diff --git a/odex25_base/web_hijri_datepicker/static/src/js/web_hijri_date.js b/odex25_base/web_hijri_datepicker/static/src/js/web_hijri_date.js
index 6b1b1f6db..c66866a67 100644
--- a/odex25_base/web_hijri_datepicker/static/src/js/web_hijri_date.js
+++ b/odex25_base/web_hijri_datepicker/static/src/js/web_hijri_date.js
@@ -126,32 +126,33 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
                 var parsed_date = this.value ? this.datewidget._parseDate(this.value) : '';
                 var hijri_value = parsed_date ? this.datewidget._convertGregorianToHijri(parsed_date) : '';
                 
-                // Original Gregorian date (unchanged)
+                // Gregorian Date Section
                 $('<div>', {
-                    class: this.$el.attr('class'),
-                    text: value,
-                }).appendTo($div);
-                
-                // Hijri date with label layout
-                var $hijriContainer = $('<div>', {
-                    class: 'o_hijri_readonly_container'
-                });
-                
-                var $hijriRow = $('<div>', {
-                    class: 'o_hijri_readonly_row'
-                }).appendTo($hijriContainer);
+                    class: 'o_date_section'
+                }).append([
+                    $('<label>', {
+                        class: 'o_date_label o_gregorian_label',
+                        text: 'التاريخ الميلادي'
+                    }),
+                    $('<div>', {
+                        class: 'o_date_value ' + this.$el.attr('class'),
+                        text: value,
+                    })
+                ]).appendTo($div);
                 
+                // Hijri Date Section
                 $('<div>', {
-                    class: 'o_hijri_readonly_label',
-                    text: 'التاريخ الهجري:'
-                }).appendTo($hijriRow);
-                
-                $('<div>', {
-                    class: 'o_hijri_readonly_value ' + this.$el.attr('class'),
-                    text: hijri_value,
-                }).appendTo($hijriRow);
-                
-                $hijriContainer.appendTo($div);
+                    class: 'o_date_section'
+                }).append([
+                    $('<label>', {
+                        class: 'o_date_label o_hijri_label',
+                        text: 'التاريخ الهجري'
+                    }),
+                    $('<div>', {
+                        class: 'o_date_value ' + this.$el.attr('class'),
+                        text: hijri_value,
+                    })
+                ]).appendTo($div);
                 
                 this.datewidget.appendTo('<div>').then(function () {
                     self._replaceElement($div);
diff --git a/odex25_base/web_hijri_datepicker/static/src/scss/web_hijri_date.scss b/odex25_base/web_hijri_datepicker/static/src/scss/web_hijri_date.scss
index 6098df1e3..acf3d8c81 100644
--- a/odex25_base/web_hijri_datepicker/static/src/scss/web_hijri_date.scss
+++ b/odex25_base/web_hijri_datepicker/static/src/scss/web_hijri_date.scss
@@ -60,44 +60,34 @@
 .o_datepicker {
     .o_datepicker_button {
         &.o_hijri_datepicker_button {
-            position: absolute;
-            right: 0;
-            top: 50%;
-            transform: translateY(-50%);
+            top: 30px;
         }
     }
     
-    // Hijri field container
-    .o_hijri_field_container {
-        margin-top: 8px;
+    // New styles for date labels and sections
+    .o_date_section {
+        margin-bottom: 5px;
         
-        .o_hijri_field_row {
+        .o_date_label {
+            display: block;
+            font-size: 11px;
+            font-weight: 600;
+            color: #6c757d;
+            margin-bottom: 2px;
+            
+            &.o_gregorian_label {
+                color: #007bff;
+            }
+            
+            &.o_hijri_label {
+                color: #28a745;
+            }
+        }
+        
+        .o_date_input_container {
+            position: relative;
             display: flex;
             align-items: center;
-            
-            .o_hijri_label_container {
-                min-width: 120px;
-                padding-right: 8px;
-                text-align: right;
-                
-                .o_hijri_label {
-                    font-size: 13px;
-                    font-weight: normal;
-                    color: #495057;
-                    margin-bottom: 0;
-                    white-space: nowrap;
-                }
-            }
-            
-            .o_hijri_input_container {
-                flex: 1;
-                position: relative;
-                
-                .o_hijri {
-                    width: 100%;
-                    padding-right: 30px; // مساحة للزرار
-                }
-            }
         }
     }
 }
@@ -105,81 +95,30 @@
 // Form view specific styles
 .o_form_view {
     .o_datepicker {
-        .o_hijri_field_container {
-            .o_hijri_field_row {
-                .o_hijri_label_container {
-                    min-width: 140px; // عرض أكبر في الفورم
-                }
+        .o_date_section {
+            .o_date_label {
+                font-size: 12px;
+                margin-bottom: 3px;
             }
         }
     }
 }
 
-// Readonly mode styles for hijri field
-.o_hijri_readonly_container {
-    margin-top: 8px;
-    
-    .o_hijri_readonly_row {
-        display: flex;
-        align-items: center;
+// Read-only mode improvements
+.o_field_date.o_readonly_modifier {
+    .o_date_section {
+        margin-bottom: 8px;
         
-        .o_hijri_readonly_label {
-            min-width: 120px;
-            padding-right: 8px;
-            text-align: right;
-            font-size: 13px;
-            font-weight: normal;
-            color: #495057;
-            white-space: nowrap;
+        .o_date_label {
+            font-size: 11px;
+            font-weight: 600;
+            color: #6c757d;
+            margin-bottom: 2px;
         }
         
-        .o_hijri_readonly_value {
-            flex: 1;
+        .o_date_value {
+            padding: 2px 0;
             font-size: 13px;
         }
     }
-}
-
-// Form view readonly specific styles
-.o_form_view {
-    .o_hijri_readonly_container {
-        .o_hijri_readonly_row {
-            .o_hijri_readonly_label {
-                min-width: 140px;
-            }
-        }
-    }
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-    .o_datepicker {
-        .o_hijri_field_container {
-            .o_hijri_field_row {
-                flex-direction: column;
-                align-items: stretch;
-                
-                .o_hijri_label_container {
-                    min-width: auto;
-                    text-align: right;
-                    padding-right: 0;
-                    margin-bottom: 4px;
-                }
-            }
-        }
-    }
-    
-    .o_hijri_readonly_container {
-        .o_hijri_readonly_row {
-            flex-direction: column;
-            align-items: stretch;
-            
-            .o_hijri_readonly_label {
-                min-width: auto;
-                text-align: right;
-                padding-right: 0;
-                margin-bottom: 4px;
-            }
-        }
-    }
 }
\ No newline at end of file
diff --git a/odex25_base/web_hijri_datepicker/static/src/xml/web_hijri_date.xml b/odex25_base/web_hijri_datepicker/static/src/xml/web_hijri_date.xml
index 8047fc9a7..1d05a7bdc 100644
--- a/odex25_base/web_hijri_datepicker/static/src/xml/web_hijri_date.xml
+++ b/odex25_base/web_hijri_datepicker/static/src/xml/web_hijri_date.xml
@@ -3,29 +3,30 @@
     <t t-name="web.datepicker" t-extend="web.datepicker">
         <t t-jquery=".o_datepicker" t-operation="replace">
             <div class="o_datepicker" aria-atomic="true" t-att-id="datepickerID" data-target-input="nearest">
-                <!-- الحقل الميلادي العادي بدون تغيير -->
-                <input type="text"
-                       class="o_datepicker_input o_input datetimepicker-input"
-                       t-att-name="widget.name"
-                       t-att-placeholder="placeholder"
-                       t-attf-data-target="##{datepickerID}"
-                        autocomplete="off"/>
-                <span class="o_datepicker_button"/>
+                <!-- Gregorian Date Section -->
+                <div class="o_date_section">
+                    <label class="o_date_label o_gregorian_label">التاريخ الميلادي</label>
+                    <div class="o_date_input_container">
+                        <input type="text"
+                               class="o_datepicker_input o_input datetimepicker-input"
+                               t-att-name="widget.name"
+                               t-att-placeholder="placeholder"
+                               t-attf-data-target="##{datepickerID}"
+                                autocomplete="off"/>
+                        <span class="o_datepicker_button"/>
+                    </div>
+                </div>
                 
-                <!-- محاكاة شكل الحقل العادي للهجري -->
-                <div class="o_hijri_field_container">
-                    <div class="o_hijri_field_row">
-                        <div class="o_hijri_label_container">
-                            <label class="o_form_label o_hijri_label">التاريخ الهجري:</label>
-                        </div>
-                        <div class="o_hijri_input_container">
-                            <input type="text"
-                                   class="o_hijri o_input"
-                                   t-att-name="widget.name"
-                                   t-att-placeholder="'التاريخ الهجري'"
-                                   readonly="readonly"/>
-                            <span class="o_datepicker_button o_hijri_datepicker_button"/>
-                        </div>
+                <!-- Hijri Date Section -->
+                <div class="o_date_section mt-2">
+                    <label class="o_date_label o_hijri_label">التاريخ الهجري</label>
+                    <div class="o_date_input_container">
+                        <input type="text"
+                               class="o_hijri o_input"
+                               t-att-name="widget.name"
+                               t-att-placeholder="'التاريخ الهجري'"
+                               readonly="readonly"/>
+                        <span class="o_datepicker_button o_hijri_datepicker_button"/>
                     </div>
                 </div>
             </div>