diff --git a/public/settings.css b/public/settings.css
index c4011786..bcb2066c 100644
--- a/public/settings.css
+++ b/public/settings.css
@@ -535,4 +535,153 @@ input:checked + .slider:before {
         gap: 15px;
         text-align: center;
     }
-}
\ No newline at end of file
+}
+/* ===========================
+   Notifications Section Fix
+=========================== */
+
+.notifications-section {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+/* Card / Section Box */
+.form-section {
+  background: rgba(20, 25, 40, 0.8);
+  border: 1px solid rgba(100, 255, 218, 0.15);
+  border-radius: 16px;
+  padding: 1.8rem;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
+}
+
+.form-section h3 {
+  margin-bottom: 1.2rem;
+  color: #64ffda;
+  font-size: 1.2rem;
+  border-bottom: 1px solid rgba(100,255,218,0.2);
+  padding-bottom: 0.6rem;
+}
+
+/* Toggle Group */
+.toggle-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Each Toggle Row */
+.toggle-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba(30, 35, 55, 0.9);
+  border: 1px solid rgba(100,255,218,0.1);
+  border-radius: 12px;
+  padding: 1rem 1.2rem;
+  transition: all 0.25s ease;
+}
+
+.toggle-item:hover {
+  border-color: rgba(100,255,218,0.4);
+  background: rgba(40, 45, 70, 0.95);
+  transform: translateY(-2px);
+}
+
+/* Left Text */
+.toggle-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.toggle-info label {
+  font-weight: 600;
+  color: #ffffff;
+  font-size: 0.95rem;
+}
+
+.toggle-info small {
+  color: #a0a8c0;
+  font-size: 0.8rem;
+}
+
+/* ===========================
+   Toggle Switch Fix
+=========================== */
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 52px;
+  height: 28px;
+  flex-shrink: 0;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* Slider */
+.toggle-switch .slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background-color: #2a2f45;
+  border-radius: 34px;
+  transition: 0.4s;
+  box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
+}
+
+/* Slider Knob */
+.toggle-switch .slider::before {
+  position: absolute;
+  content: "";
+  height: 22px;
+  width: 22px;
+  left: 3px;
+  top: 3px;
+  background: linear-gradient(135deg, #ccc, #eee);
+  border-radius: 50%;
+  transition: 0.4s;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
+}
+
+/* Checked State */
+.toggle-switch input:checked + .slider {
+  background: linear-gradient(135deg, #64ffda, #00b4d8);
+  box-shadow: 0 0 10px rgba(100,255,218,0.6);
+}
+
+.toggle-switch input:checked + .slider::before {
+  transform: translateX(24px);
+  background: #ffffff;
+}
+
+/* ===========================
+   Save Button Fix
+=========================== */
+
+#notifications-tab .form-actions {
+  margin-top: 1.5rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+#save-notifications-btn {
+  padding: 0.7rem 1.4rem;
+  border-radius: 10px;
+  font-weight: 600;
+  background: linear-gradient(135deg, #64ffda, #00b4d8);
+  border: none;
+  color: #000;
+  cursor: pointer;
+  transition: all 0.25s ease;
+}
+
+#save-notifications-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(100,255,218,0.4);
+}
diff --git a/public/settings.html b/public/settings.html
index 38ba7e0d..19324b55 100644
--- a/public/settings.html
+++ b/public/settings.html
@@ -7,15 +7,97 @@
   <title>Settings & Profile - ExpenseFlow</title>
   <link rel="stylesheet" href="settings.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+  <style>
+  /* ====== HARD LAYOUT FIX FOR SETTINGS PAGE ====== */
+
+html, body {
+  height: 100%;
+  overflow: hidden;   /* Prevent whole page scrolling */
+}
+
+.settings-container {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.settings-main {
+  display: flex;
+  height: calc(100vh - 80px); /* adjust if you have header height */
+  overflow: hidden;
+}
+
+/* Left nav */
+.settings-nav {
+  flex-shrink: 0;
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* Right panel */
+.settings-content {
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Each tab scrolls internally */
+.tab-content {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: none;
+  box-sizing: border-box;
+  padding-bottom: 4rem;
+}
+
+/* Active tab only */
+.tab-content.active {
+  display: block;
+}
+
+/* Notifications specific safety */
+#notifications-tab,
+.notifications-section {
+  height: 100%;
+  max-height: 100%;
+  overflow-y: auto;
+}
+
+    /* Ensure main layout doesn't break */
+.settings-main {
+  display: flex;
+  align-items: stretch;
+  min-height: 100vh;
+}
+
+/* Right content area */
+.settings-content {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Each tab should stay inside */
+.tab-content {
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding-bottom: 3rem; /* prevents spill */
+}
+
+/* Fix notifications section specifically */
+.notifications-section {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Prevent any absolute/fixed child from pushing layout */
+.notifications-section * {
+  max-width: 100%;
+}
 
-  <!-- Clerk Authentication SDK -->
-  <script
-  async
-  crossorigin="anonymous"
-  data-clerk-publishable-key="your clerk-publishable-key here"
-  src="key"
-  type="text/javascript">
-</script>
+  </style>
 </head>
 
 <style>
@@ -555,141 +637,14 @@
       transform: translate(-50%, -50%) scale(1.3);
       background: linear-gradient(135deg, #00b4d8 0%, #64ffda 100%) !important;
     }
-
-    /* Footer */
-.footer {
-  background: rgba(15, 15, 35, 0.9);
-  backdrop-filter: blur(20px);
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 3rem 0 1rem;
-  margin-top: 4rem;
-  animation: fadeInUp 1s ease-out 1.2s both;
-}
-
-.footer-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 2rem;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 2rem;
-}
-
-.footer-section {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.footer-logo {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--accent-primary);
-  margin-bottom: 0.5rem;
-}
-
-.footer-logo i {
-  font-size: 2rem;
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.footer-section p {
-  color: var(--text-secondary);
-  line-height: 1.6;
-}
-
-.footer-section h4 {
-  color: var(--text-primary);
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-}
-
-.footer-links {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.footer-links a {
-  color: var(--text-secondary);
-  text-decoration: none;
-  transition: color 0.3s ease;
-}
-
-.footer-links a:hover {
-  color: var(--accent-primary);
-}
-.footer-bottom {
-  margin-top: 2rem;
-  padding-top: 1rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  text-align: center;
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-}
-.social-links {
-  display: flex;
-  gap: 1rem;
-}
-
-.social-link {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 50%;
-  color: var(--text-secondary);
-  text-decoration: none;
-  transition: all 0.3s ease;
-}
-
-.social-link:hover {
-  background: var(--accent-primary);
-  color: var(--bg-primary);
-  transform: translateY(-2px);
-}
-
-.footer-bottom {
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  margin-top: 2rem;
-  padding-top: 1rem;
-}
-
-.footer-bottom .footer-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 1rem;
-  grid-template-columns: 1fr;
-}
-
-.footer-bottom p {
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-}
-
-.footer-stats {
-  display: flex;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-.footer-stats span {
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-  background: rgba(255, 255, 255, 0.05);
-  padding: 0.25rem 0.75rem;
-  border-radius: 15px;
+    .cursor-trail-container {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 9999;
 }
 
   </style>