diff --git a/components/BerthDetailsModal.vue b/components/BerthDetailsModal.vue
index 041c300..49e64a7 100644
--- a/components/BerthDetailsModal.vue
+++ b/components/BerthDetailsModal.vue
@@ -58,11 +58,14 @@
 
       <v-divider />
 
-      <v-card-text class="pa-6">
+      <v-card-text class="pa-8 bg-grey-lighten-5">
         <v-container fluid class="pa-0">
           <!-- Basic Information Section -->
-          <div class="section mb-6">
-            <h4 class="text-h6 mb-3 text-primary">Basic Information</h4>
+          <div class="info-section mb-8">
+            <div class="section-header mb-6">
+              <v-icon color="primary" size="28" class="mr-3">mdi-information-outline</v-icon>
+              <h4 class="text-h5 text-primary font-weight-bold">Basic Information</h4>
+            </div>
             <v-row>
               <v-col cols="12" md="4">
                 <v-text-field
@@ -109,8 +112,11 @@
           </div>
 
           <!-- Specifications Section -->
-          <div class="section mb-6">
-            <h4 class="text-h6 mb-3 text-primary">Specifications</h4>
+          <div class="info-section mb-8">
+            <div class="section-header mb-6">
+              <v-icon color="primary" size="28" class="mr-3">mdi-ruler-square</v-icon>
+              <h4 class="text-h5 text-primary font-weight-bold">Specifications</h4>
+            </div>
             <v-row>
               <v-col cols="12" md="6">
                 <v-text-field
@@ -193,8 +199,11 @@
           </div>
 
           <!-- Infrastructure Section -->
-          <div class="section mb-6">
-            <h4 class="text-h6 mb-3 text-primary">Infrastructure</h4>
+          <div class="info-section mb-8">
+            <div class="section-header mb-6">
+              <v-icon color="primary" size="28" class="mr-3">mdi-office-building-outline</v-icon>
+              <h4 class="text-h5 text-primary font-weight-bold">Infrastructure</h4>
+            </div>
             <v-row>
               <v-col cols="12" md="6">
                 <v-select
@@ -270,8 +279,11 @@
           </div>
 
           <!-- Hardware Section -->
-          <div class="section mb-6">
-            <h4 class="text-h6 mb-3 text-primary">Hardware</h4>
+          <div class="info-section mb-8">
+            <div class="section-header mb-6">
+              <v-icon color="primary" size="28" class="mr-3">mdi-wrench-outline</v-icon>
+              <h4 class="text-h5 text-primary font-weight-bold">Hardware</h4>
+            </div>
             <v-row>
               <v-col cols="12" md="6">
                 <v-select
@@ -333,8 +345,11 @@
           </div>
 
           <!-- Pricing & Orientation -->
-          <div class="section mb-6">
-            <h4 class="text-h6 mb-3 text-primary">Details</h4>
+          <div class="info-section mb-8">
+            <div class="section-header mb-6">
+              <v-icon color="primary" size="28" class="mr-3">mdi-currency-usd</v-icon>
+              <h4 class="text-h5 text-primary font-weight-bold">Pricing & Details</h4>
+            </div>
             <v-row>
               <v-col cols="12" md="6">
                 <v-text-field
@@ -368,19 +383,22 @@
           </div>
 
           <!-- Interested Parties Section -->
-          <div class="section">
-            <h4 class="text-h6 mb-3 text-primary">
-              Interested Parties 
-              <v-chip 
-                v-if="interestedParties.length > 0" 
-                size="small" 
-                color="primary" 
-                variant="tonal"
-                class="ml-2"
-              >
-                {{ interestedParties.length }}
-              </v-chip>
-            </h4>
+          <div class="info-section">
+            <div class="section-header mb-6">
+              <v-icon color="primary" size="28" class="mr-3">mdi-account-group-outline</v-icon>
+              <h4 class="text-h5 text-primary font-weight-bold">
+                Interested Parties
+                <v-chip 
+                  v-if="interestedParties.length > 0" 
+                  size="small" 
+                  color="primary" 
+                  variant="tonal"
+                  class="ml-3"
+                >
+                  {{ interestedParties.length }}
+                </v-chip>
+              </h4>
+            </div>
             
             <div v-if="interestedParties.length === 0" class="text-center py-4 text-grey-darken-1">
               <v-icon size="48" class="mb-2">mdi-account-search-outline</v-icon>
@@ -701,34 +719,42 @@ onUnmounted(() => {
 }
 
 /* Modern section styling with subtle shadows */
-.section {
+.info-section {
   background: white;
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  border-radius: 16px;
+  padding: 32px;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08), 0 1px 3px 0 rgba(0, 0, 0, 0.04);
   transition: all 0.3s ease;
+  border: 1px solid rgba(0, 0, 0, 0.04);
 }
 
-.section:hover {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+.info-section:hover {
+  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.08);
+  transform: translateY(-2px);
 }
 
-/* Section titles with accent underline */
-.section h4 {
-  position: relative;
-  padding-bottom: 12px;
-  margin-bottom: 24px !important;
+/* Section headers with icons */
+.section-header {
+  display: flex;
+  align-items: center;
+  border-bottom: 2px solid #f1f5f9;
+  padding-bottom: 16px;
+  margin-bottom: 24px;
 }
 
-.section h4::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 40px;
-  height: 3px;
-  background-color: var(--v-primary-base);
-  border-radius: 2px;
+.section-header h4 {
+  margin-bottom: 0 !important;
+  color: #1e293b;
+  font-size: 1.375rem;
+  font-weight: 700;
+}
+
+.section-header .v-icon {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white !important;
+  border-radius: 50%;
+  padding: 8px;
+  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.25);
 }
 
 /* Field display improvements */
diff --git a/pages/dashboard/interest-berth-status.vue b/pages/dashboard/interest-berth-status.vue
index 6d4a80b..62ce51c 100644
--- a/pages/dashboard/interest-berth-status.vue
+++ b/pages/dashboard/interest-berth-status.vue
@@ -127,12 +127,12 @@
                     elevation="0"
                     hover
                   >
-                    <v-card-text class="pa-3">
-                      <div class="d-flex align-center justify-space-between mb-2">
+                    <v-card-text class="pa-4">
+                      <div class="d-flex align-center justify-space-between mb-3">
                         <span class="font-weight-bold text-subtitle-2">{{ berth['Mooring Number'] }}</span>
                         <span class="text-caption text-grey-darken-1">Area {{ berth.Area }}</span>
                       </div>
-                      <div class="text-caption text-grey-darken-1 mb-2">
+                      <div class="text-caption text-grey-darken-1 mb-3">
                         {{ displayMeasurement(berth['Nominal Boat Size']) }} boat
                       </div>
                       <div class="d-flex justify-space-between align-center">