diff --git a/frontend/public/index.html b/frontend/public/index.html
index 19a00f8..80af791 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -19,31 +19,35 @@
   <!-- Add Family Form Modal -->
   <div id="addFamilyModal" class="modal">
     <div class="modal-content">
-      <span class="close" onclick="toggleAddFamilyForm()">&times;</span>
-      <h2>Add New Family Location</h2>
-      <form id="addFamilyForm" onsubmit="addFamily(event)">
-        <div class="form-group">
-          <label for="familyName">Family Name:</label>
-          <input type="text" id="familyName" required placeholder="e.g., Cohen (כהן)" />
-        </div>
-        <div class="form-group">
-          <label for="cityName">City:</label>
-          <input type="text" id="cityName" required placeholder="e.g., Jerusalem (ירושלים)" />
-        </div>
-        <div class="form-group">
-          <label for="latitude">Latitude:</label>
-          <input type="number" id="latitude" required step="0.0001" min="-90" max="90" placeholder="e.g., 31.7683" />
-        </div>
-        <div class="form-group">
-          <label for="longitude">Longitude:</label>
-          <input type="number" id="longitude" required step="0.0001" min="-180" max="180" placeholder="e.g., 35.2137" />
-        </div>
-        <div class="form-actions">
-          <button type="submit" class="btn btn-primary">Add Family</button>
-          <button type="button" class="btn btn-secondary" onclick="toggleAddFamilyForm()">Cancel</button>
-        </div>
-      </form>
-      <div id="formMessage" class="form-message"></div>
+      <div class="modal-header">
+        <h2>Add New Family Location</h2>
+        <span class="close" onclick="toggleAddFamilyForm()">&times;</span>
+      </div>
+      <div class="modal-body">
+        <div id="formMessage" class="form-message"></div>
+        <form id="addFamilyForm" onsubmit="addFamily(event)">
+          <div class="form-group">
+            <label for="familyName">Family Name</label>
+            <input type="text" id="familyName" required placeholder="e.g., Cohen (כהן)" />
+          </div>
+          <div class="form-group">
+            <label for="cityName">City</label>
+            <input type="text" id="cityName" required placeholder="e.g., Jerusalem (ירושלים)" />
+          </div>
+          <div class="form-group">
+            <label for="latitude">Latitude</label>
+            <input type="number" id="latitude" required step="0.0001" min="-90" max="90" placeholder="e.g., 31.7683" />
+          </div>
+          <div class="form-group">
+            <label for="longitude">Longitude</label>
+            <input type="number" id="longitude" required step="0.0001" min="-180" max="180" placeholder="e.g., 35.2137" />
+          </div>
+          <div class="form-actions">
+            <button type="submit" class="btn-submit">Add Family</button>
+            <button type="button" class="btn-cancel" onclick="toggleAddFamilyForm()">Cancel</button>
+          </div>
+        </form>
+      </div>
     </div>
   </div>
 
diff --git a/frontend/public/style.css b/frontend/public/style.css
index 29ba7fd..268ce11 100644
--- a/frontend/public/style.css
+++ b/frontend/public/style.css
@@ -97,7 +97,7 @@
     flex-direction: column;
   }
 
-  /* Modal styles */
+  /* Modern Modal styles with animations */
   .modal {
     display: none;
     position: fixed;
@@ -106,133 +106,247 @@
     top: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(4px);
+    animation: fadeIn 0.3s ease-out;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      transform: translateY(50px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
   }
 
   .modal-content {
-    background-color: #fefefe;
-    margin: 5% auto;
-    padding: 30px;
-    border-radius: 10px;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+    margin: 8% auto;
+    padding: 0;
+    border-radius: 20px;
     width: 90%;
-    max-width: 500px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    max-width: 480px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
+    animation: slideUp 0.4s ease-out;
+    overflow: hidden;
+  }
+
+  .modal-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 24px 30px;
+    color: white;
+    position: relative;
   }
 
   .modal-content h2 {
-    margin-bottom: 20px;
-    color: #2c3e50;
+    margin: 0;
+    font-size: 24px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .modal-content h2::before {
+    content: "📍";
+    font-size: 28px;
   }
 
   .close {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-    line-height: 20px;
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 32px;
+    font-weight: 300;
+    line-height: 1;
     cursor: pointer;
+    transition: all 0.3s ease;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
   }
 
-  .close:hover,
-  .close:focus {
-    color: #000;
+  .close:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+    transform: translateY(-50%) rotate(90deg);
+    color: white;
+  }
+
+  .modal-body {
+    padding: 30px;
   }
 
   .form-group {
-    margin-bottom: 15px;
+    margin-bottom: 20px;
   }
 
   .form-group label {
     display: block;
-    margin-bottom: 5px;
-    font-weight: bold;
-    color: #2c3e50;
+    margin-bottom: 8px;
+    font-weight: 600;
+    color: #2d3748;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .form-group label::before {
+    content: "•";
+    color: #667eea;
+    font-size: 20px;
   }
 
   .form-group input {
     width: 100%;
-    padding: 10px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    font-size: 14px;
+    padding: 12px 16px;
+    border: 2px solid #e2e8f0;
+    border-radius: 12px;
+    font-size: 15px;
+    transition: all 0.3s ease;
+    background-color: white;
+    font-family: inherit;
   }
 
   .form-group input:focus {
     outline: none;
-    border-color: #3498db;
+    border-color: #667eea;
+    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
+    transform: translateY(-1px);
+  }
+
+  .form-group input:hover {
+    border-color: #cbd5e0;
   }
 
   .form-actions {
     display: flex;
-    gap: 10px;
-    margin-top: 20px;
+    gap: 12px;
+    margin-top: 28px;
+    padding-top: 20px;
+    border-top: 2px solid #f1f3f5;
   }
 
   .form-actions button {
     flex: 1;
-    padding: 10px;
+    padding: 14px 24px;
     border: none;
-    border-radius: 5px;
+    border-radius: 12px;
     cursor: pointer;
-    font-weight: bold;
+    font-weight: 600;
+    font-size: 15px;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
   }
 
   .btn-submit {
-    background-color: #27ae60;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
   }
 
   .btn-submit:hover {
-    background-color: #229954;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
+  }
+
+  .btn-submit:active {
+    transform: translateY(0);
+  }
+
+  .btn-submit::before {
+    content: "✓";
+    font-size: 18px;
   }
 
   .btn-cancel {
-    background-color: #95a5a6;
-    color: white;
+    background-color: #e2e8f0;
+    color: #4a5568;
   }
 
   .btn-cancel:hover {
-    background-color: #7f8c8d;
+    background-color: #cbd5e0;
+    transform: translateY(-2px);
+  }
+
+  .btn-cancel::before {
+    content: "✕";
+    font-size: 18px;
   }
 
   .form-message {
-    padding: 10px;
-    border-radius: 5px;
-    margin-bottom: 15px;
+    padding: 14px 18px;
+    border-radius: 12px;
+    margin-bottom: 20px;
     text-align: center;
-    font-weight: bold;
+    font-weight: 500;
+    animation: slideUp 0.3s ease-out;
+    font-size: 14px;
   }
 
   .form-message.success {
-    background-color: #d4edda;
+    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
     color: #155724;
-    border: 1px solid #c3e6cb;
+    border: 2px solid #b1dfbb;
+    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
   }
 
   .form-message.error {
-    background-color: #f8d7da;
+    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
     color: #721c24;
-    border: 1px solid #f5c6cb;
+    border: 2px solid #f1b0b7;
+    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
   }
 
   .form-message.info {
-    background-color: #d1ecf1;
+    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
     color: #0c5460;
-    border: 1px solid #bee5eb;
+    border: 2px solid #a6d9e3;
+    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
   }
 
-  /* Add Family button */
+  /* Add Family button with modern style */
   .btn-add-family {
-    padding: 10px 15px;
+    padding: 12px 20px;
     border: none;
-    border-radius: 5px;
-    background-color: #27ae60;
+    border-radius: 10px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     cursor: pointer;
-    font-weight: bold;
+    font-weight: 600;
     margin-left: 8px;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
   }
 
   .btn-add-family:hover {
-    background-color: #229954;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+  }
+
+  .btn-add-family:active {
+    transform: translateY(0);
   }
\ No newline at end of file