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 da186b520..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
@@ -125,14 +125,35 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
                 var value = this.value ? this.datewidget._formatClients(this.value) : '';
                 var parsed_date = this.value ? this.datewidget._parseDate(this.value) : '';
                 var hijri_value = parsed_date ? this.datewidget._convertGregorianToHijri(parsed_date) : '';
+                
+                // Gregorian Date Section
                 $('<div>', {
-                    class: this.$el.attr('class'),
-                    text: value,
-                }).appendTo($div);
+                    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: this.$el.attr('class'),
-                    text: hijri_value,
-                }).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 9f9e63bc6..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
@@ -63,4 +63,62 @@
             top: 30px;
         }
     }
+    
+    // New styles for date labels and sections
+    .o_date_section {
+        margin-bottom: 5px;
+        
+        .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;
+        }
+    }
+}
+
+// Form view specific styles
+.o_form_view {
+    .o_datepicker {
+        .o_date_section {
+            .o_date_label {
+                font-size: 12px;
+                margin-bottom: 3px;
+            }
+        }
+    }
+}
+
+// Read-only mode improvements
+.o_field_date.o_readonly_modifier {
+    .o_date_section {
+        margin-bottom: 8px;
+        
+        .o_date_label {
+            font-size: 11px;
+            font-weight: 600;
+            color: #6c757d;
+            margin-bottom: 2px;
+        }
+        
+        .o_date_value {
+            padding: 2px 0;
+            font-size: 13px;
+        }
+    }
 }
\ 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 fc125211d..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,19 +3,32 @@
     <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"/>
-                <span class="o_datepicker_button"/>
-                <input type="text"
-                       class="o_hijri o_input mt4"
-                       t-att-name="widget.name"
-                       t-att-placeholder="placeholder"/>
-                <span class="o_datepicker_button o_hijri_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>
+                
+                <!-- 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>
         </t>
     </t>