diff --git a/app/views/pay/index.html.erb b/app/views/pay/index.html.erb
index 08e1f29..4048164 100644
--- a/app/views/pay/index.html.erb
+++ b/app/views/pay/index.html.erb
@@ -36,120 +36,74 @@
     </div>
   </div>
 
-  <div class="row g-3">
+  <div class="row g-4">
     <!-- Left Column - Forms -->
-    <div class="col-lg-4">
+    <div class="col-lg-5">
       <!-- Add Direct Deposit Form -->
-      <div class="card shadow-sm mb-3" style="border-left: 4px solid var(--rg-success);">
-        <div class="card-header py-3" style="background: linear-gradient(135deg, rgba(6, 214, 160, 0.05), rgba(30, 130, 94, 0.05));">
-          <h4 class="mb-0">
-            <i class="bi bi-plus-circle text-success"></i> Add Direct Deposit
-          </h4>
-          <p class="text-muted mb-0 small mt-1">Set up a new account</p>
+      <div class="card shadow-sm mb-4">
+        <div class="card-header bg-white py-3">
+          <h5 class="mb-0">
+            <i class="bi bi-plus-circle text-success me-2"></i>Add Direct Deposit
+          </h5>
         </div>
         <div class="card-body p-4">
           <%= form_tag "#", { class: "needs-validation", id: "bank_info_form" } do %>
-            <div class="mb-4">
-              <label class="form-label fw-semibold">
-                <i class="bi bi-hash text-success me-2"></i>Bank Account Number
-              </label>
-              <div class="input-group input-group-lg">
-                <%= text_field_tag :bank_account_num, params[:bank_account_num], {
-                  placeholder: "Enter account number",
-                  class: "form-control"
-                } %>
-                <span class="input-group-text bg-white">
-                  <i class="bi bi-bank2"></i>
-                </span>
-              </div>
-              <small class="text-muted">Your bank account number</small>
-            </div>
-
-            <div class="mb-4">
-              <label class="form-label fw-semibold">
-                <i class="bi bi-sign-turn-right text-success me-2"></i>Bank Routing Number
-              </label>
-              <div class="input-group input-group-lg">
-                <%= text_field_tag :bank_routing_num, params[:bank_routing_num], {
-                  placeholder: "Enter routing number",
-                  class: "form-control"
-                } %>
-                <span class="input-group-text bg-white">
-                  <i class="bi bi-diagram-3"></i>
-                </span>
-              </div>
-              <small class="text-muted">9-digit routing number</small>
-            </div>
-
-            <div class="mb-4">
-              <label class="form-label fw-semibold">
-                <i class="bi bi-percent text-success me-2"></i>Percentage of Deposit
-              </label>
-              <div class="input-group input-group-lg">
-                <%= text_field_tag :dd_percent, params[:dd_percent], {
-                  placeholder: "e.g., 100",
-                  class: "form-control"
-                } %>
-                <span class="input-group-text bg-white">%</span>
-              </div>
-              <small class="text-muted">What percentage to deposit (1-100)</small>
-            </div>
-
-            <div class="d-grid">
-              <%= submit_tag "Add Account", {
-                id: "dd_form_btn",
-                class: "btn btn-success btn-lg"
+            <div class="mb-3">
+              <label class="form-label">Bank Account Number</label>
+              <%= text_field_tag :bank_account_num, params[:bank_account_num], {
+                placeholder: "Enter account number",
+                class: "form-control"
               } %>
             </div>
 
-            <div class="mt-3 p-3 rounded" style="background: var(--rg-light); border-left: 3px solid var(--rg-success);">
-              <small class="text-muted">
-                <i class="bi bi-shield-lock-fill text-success me-1"></i>
-                <strong>Secure:</strong> All account information is encrypted
-              </small>
+            <div class="mb-3">
+              <label class="form-label">Bank Routing Number</label>
+              <%= text_field_tag :bank_routing_num, params[:bank_routing_num], {
+                placeholder: "9-digit routing number",
+                class: "form-control"
+              } %>
+            </div>
+
+            <div class="mb-3">
+              <label class="form-label">Percentage of Deposit</label>
+              <%= text_field_tag :dd_percent, params[:dd_percent], {
+                placeholder: "1-100",
+                class: "form-control"
+              } %>
+            </div>
+
+            <div class="d-grid mt-4">
+              <%= submit_tag "Add Account", {
+                id: "dd_form_btn",
+                class: "btn btn-success"
+              } %>
             </div>
           <% end %>
         </div>
       </div>
 
       <!-- Decrypt Form -->
-      <div class="card shadow-sm" style="border-left: 4px solid var(--rg-warning);">
-        <div class="card-header py-3" style="background: linear-gradient(135deg, rgba(255, 183, 3, 0.05), rgba(251, 133, 0, 0.05));">
-          <h4 class="mb-0">
-            <i class="bi bi-unlock text-warning"></i> Decrypt Account Number
-          </h4>
-          <p class="text-muted mb-0 small mt-1">View unencrypted account number</p>
+      <div class="card shadow-sm">
+        <div class="card-header bg-white py-3">
+          <h5 class="mb-0">
+            <i class="bi bi-unlock text-warning me-2"></i>Decrypt Account
+          </h5>
         </div>
         <div class="card-body p-4">
           <%= form_tag "#", { class: "needs-validation", id: "decrypt_form" } do %>
-            <div class="mb-4">
-              <label class="form-label fw-semibold">
-                <i class="bi bi-key-fill text-warning me-2"></i>Encrypted Account Number
-              </label>
-              <div class="input-group input-group-lg">
-                <%= text_field_tag :value_to_decrypt, params[:value_to_decrypt], {
-                  placeholder: "Paste encrypted value",
-                  class: "form-control"
-                } %>
-                <span class="input-group-text bg-white">
-                  <i class="bi bi-lock"></i>
-                </span>
-              </div>
-              <small class="text-muted">Copy from the table on the right</small>
-            </div>
-
-            <div class="d-grid">
-              <%= submit_tag "Decrypt", {
-                id: "decrypt_btn",
-                class: "btn btn-warning btn-lg"
+            <div class="mb-3">
+              <label class="form-label">Encrypted Account Number</label>
+              <%= text_field_tag :value_to_decrypt, params[:value_to_decrypt], {
+                placeholder: "Paste encrypted value",
+                class: "form-control"
               } %>
             </div>
 
-            <div class="mt-3 p-3 rounded" style="background: var(--rg-light); border-left: 3px solid var(--rg-warning);">
-              <small class="text-muted">
-                <i class="bi bi-info-circle-fill text-warning me-1"></i>
-                Decryption is for your convenience and security verification
-              </small>
+            <div class="d-grid mt-4">
+              <%= submit_tag "Decrypt", {
+                id: "decrypt_btn",
+                class: "btn btn-warning"
+              } %>
             </div>
           <% end %>
         </div>
@@ -157,18 +111,15 @@
     </div>
 
     <!-- Right Column - Accounts Table -->
-    <div class="col-lg-8">
+    <div class="col-lg-7">
       <div class="card shadow-sm">
         <div class="card-header bg-white py-3">
-          <div class="d-flex justify-content-between align-items-start">
-            <div>
-              <h4 class="mb-0">
-                <i class="bi bi-list-ul text-primary"></i> Direct Deposit Accounts
-              </h4>
-              <p class="text-muted mb-0 small mt-1">Your configured bank accounts</p>
-            </div>
+          <div class="d-flex justify-content-between align-items-center">
+            <h5 class="mb-0">
+              <i class="bi bi-list-ul text-primary me-2"></i>Your Accounts
+            </h5>
             <button type="button" class="btn btn-sm btn-outline-secondary" id="encrypted_acct_question">
-              <i class="bi bi-question-circle"></i> Why Encrypted?
+              <i class="bi bi-question-circle me-1"></i> Why Encrypted?
             </button>
           </div>
         </div>
@@ -177,18 +128,10 @@
             <table class="table table-hover mb-0" id="data_table">
               <thead class="table-light">
                 <tr>
-                  <th style="width: 35%;">
-                    <i class="bi bi-shield-lock me-2"></i>Encrypted Account Number
-                  </th>
-                  <th style="width: 25%;">
-                    <i class="bi bi-diagram-3 me-2"></i>Routing Number
-                  </th>
-                  <th style="width: 20%;">
-                    <i class="bi bi-percent me-2"></i>Deposit %
-                  </th>
-                  <th style="width: 20%;">
-                    <i class="bi bi-gear me-2"></i>Actions
-                  </th>
+                  <th>Account Number</th>
+                  <th>Routing Number</th>
+                  <th>Deposit %</th>
+                  <th>Actions</th>
                 </tr>
               </thead>
               <tbody>
@@ -198,48 +141,6 @@
           </div>
         </div>
       </div>
-
-      <!-- Info Cards -->
-      <div class="row mt-3 g-3">
-        <div class="col-md-4">
-          <div class="card shadow-sm h-100" style="border-left: 3px solid #579da9;">
-            <div class="card-body">
-              <h6 class="card-title">
-                <i class="bi bi-lightning-charge-fill text-primary"></i> Instant Access
-              </h6>
-              <p class="card-text small text-muted">
-                Your paycheck is deposited directly into your account on payday.
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div class="col-md-4">
-          <div class="card shadow-sm h-100" style="border-left: 3px solid #1e825e;">
-            <div class="card-body">
-              <h6 class="card-title">
-                <i class="bi bi-shield-check text-success"></i> Secure & Encrypted
-              </h6>
-              <p class="card-text small text-muted">
-                All banking information is encrypted using industry-standard security.
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div class="col-md-4">
-          <div class="card shadow-sm h-100" style="border-left: 3px solid var(--rg-warning);">
-            <div class="card-body">
-              <h6 class="card-title">
-                <i class="bi bi-piggy-bank text-warning"></i> Split Deposits
-              </h6>
-              <p class="card-text small text-muted">
-                Allocate different percentages of your pay to multiple accounts.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 </div>
@@ -509,117 +410,47 @@ $(document).on('turbolinks:load', function() {
     background-color: rgba(230, 57, 70, 0.03);
   }
 
-  /* Modern form controls - sleek and rounded */
-  .form-control,
-  .form-select {
-    border-radius: 0.75rem !important;
-    border: 2px solid #e9ecef;
-    padding: 0.75rem 1rem;
-    font-size: 1rem;
+  /* Clean, minimal form controls */
+  .form-control {
+    border-radius: 0.5rem;
+    border: 1px solid #dee2e6;
+    padding: 0.625rem 0.875rem;
+    font-size: 0.95rem;
     transition: all 0.2s ease;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
   }
 
-  .form-control:focus,
-  .form-select:focus {
-    border-color: var(--rg-success);
-    box-shadow: 0 0 0 4px rgba(6, 214, 160, 0.15), 0 2px 8px rgba(0,0,0,0.1);
+  .form-control:focus {
+    border-color: var(--rg-primary);
+    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);
     outline: none;
   }
 
-  .input-group-lg .form-control {
-    padding: 0.875rem 1.25rem;
-    font-size: 1.1rem;
-  }
-
-  .input-group-text {
-    border-radius: 0 0.75rem 0.75rem 0 !important;
-    border: 2px solid #e9ecef;
-    border-left: none;
-    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-    transition: all 0.2s ease;
-    padding: 0.75rem 1rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 50px;
-  }
-
-  .input-group-lg .input-group-text {
-    padding: 0.875rem 1.25rem;
-    font-size: 1.1rem;
-  }
-
-  .input-group-text i {
-    font-size: 1rem;
-    line-height: 1;
-  }
-
-  .input-group .form-control {
-    border-radius: 0.75rem 0 0 0.75rem !important;
-    border-right: none;
-  }
-
-  .input-group:focus-within .input-group-text {
+  #bank_info_form .form-control:focus {
     border-color: var(--rg-success);
-    background: linear-gradient(135deg, rgba(6, 214, 160, 0.05), rgba(30, 130, 94, 0.05));
+    box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.1);
   }
 
-  .input-group:focus-within .form-control {
-    border-color: var(--rg-success);
-  }
-
-  /* Decrypt form focus - use warning color */
   #decrypt_form .form-control:focus {
     border-color: var(--rg-warning);
-    box-shadow: 0 0 0 4px rgba(255, 183, 3, 0.15), 0 2px 8px rgba(0,0,0,0.1);
+    box-shadow: 0 0 0 3px rgba(255, 183, 3, 0.1);
   }
 
-  #decrypt_form .input-group:focus-within .input-group-text {
-    border-color: var(--rg-warning);
-    background: linear-gradient(135deg, rgba(255, 183, 3, 0.05), rgba(251, 133, 0, 0.05));
+  .form-label {
+    font-weight: 500;
+    color: var(--rg-dark);
+    margin-bottom: 0.4rem;
+    font-size: 0.9rem;
   }
 
-  #decrypt_form .input-group:focus-within .form-control {
-    border-color: var(--rg-warning);
-  }
-
-  /* Modern buttons - already handled by global styles but ensure consistency */
+  /* Button styling */
   .btn {
-    border-radius: 0.75rem;
-    padding: 0.75rem 1.5rem;
-    font-weight: 600;
-    transition: all 0.3s ease;
-    border: none;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    border-radius: 0.5rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
   }
 
   .btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-  }
-
-  .btn:active {
-    transform: translateY(0);
-  }
-
-  .btn-lg {
-    padding: 0.875rem 1.75rem;
-    font-size: 1.1rem;
-  }
-
-  /* Label styling */
-  .form-label {
-    font-weight: 600;
-    color: var(--rg-dark);
-    margin-bottom: 0.5rem;
-  }
-
-  /* Small helper text */
-  small.text-muted {
-    font-size: 0.875rem;
-    color: #6c757d;
-    display: block;
-    margin-top: 0.375rem;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
   }
 </style>