diff --git a/static/styles.css b/static/styles.css
index 54317c3..de32121 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -6,6 +6,7 @@ body {
     box-sizing: border-box; /* Ensures padding doesn't affect overall width/height */
     background-color: #f4f4f4;
     color: black;
+    transition: background-color 0.3s ease, color 0.3s ease; /* for theme switch */
 }
 
 
@@ -337,35 +338,42 @@ button:active {
 
 
 /* Slider */
+
+/* Theme Toggle */
 .switch {
     position: absolute;
-    top: 10px;
-    right: 20px;
+    top: 80px;
+    right: 100px;
     display: inline-block;
+    width: 60px;
+    height: 34px;
 }
 
 .switch input {
-    display: none;
+    opacity: 0;
+    width: 0;
+    height: 0;
 }
 
 .switch .slider {
-    width: 50px;
-    height: 25px;
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     background-color: #ccc;
-    border-radius: 34px;
-    position: relative;
     transition: 0.4s;
+    border-radius: 34px;
 }
 
-.switch .slider::before {
-    content: "";
+.switch .slider:before {
     position: absolute;
-    height: 15px;
-    width: 15px;
-    border-radius: 50%;
-    left: 5px;
-    bottom: 5px;
-    background-color: white;
+    content: "🌙";
+
+    font-size: 20px;
+    left: 8px;
+    bottom: 7px;
     transition: 0.4s;
 }
 
@@ -373,10 +381,36 @@ input:checked + .slider {
     background-color: #4CAF50;
 }
 
-input:checked + .slider::before {
-    transform: translateX(25px);
+input:checked + .slider:before {
+    transform: translateX(26px);
+    content: "🌞";
 }
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 /* Preformatted Text */
 pre {
     background-color: #f4f4f4;
@@ -384,3 +418,158 @@ pre {
     border: 1px solid #ddd;
     overflow-x: auto;
 }
+
+
+/* notebook */
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+label {
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.form-data {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-sizing: border-box;
+    font-size: 16px;
+    resize: none;
+}
+
+button {
+    align-self: flex-start;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+/* Password Register */
+
+/* Password Requirements Box */
+#password-requirements {
+    position: absolute;
+    top: 200px; /* Adjust to fit below password input */
+    left: 50%;
+    transform: translateX(-50%);
+    background: linear-gradient(145deg, #e0e0e0, #ffffff);
+    border-radius: 10px;
+    padding: 15px;
+    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2), -5px -5px 15px rgba(255, 255, 255, 0.7);
+    width: 300px;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    z-index: 1000;
+}
+
+#password-requirements.hidden {
+    opacity: 0;
+    transform: translateX(-50%) translateY(20px);
+    pointer-events: none;
+}
+
+#password-requirements ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    color: #333;
+}
+
+#password-requirements li {
+    padding: 5px 0;
+    font-size: 14px;
+}
+
+/* Highlight Valid and Invalid States */
+#password-requirements li:before {
+    content: "• ";
+    color: red;
+}
+
+#password-requirements li.valid:before {
+    color: green;
+}
+
+
+
+
+/* Navigation Bar */
+.nav-links {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+}
+
+.nav-left {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* Search Bar */
+.search-bar {
+    display: inline-block;
+    position: relative;
+}
+
+.search-bar form {
+    display: inline-block;
+    white-space: nowrap;
+}
+
+.search-bar input[type="text"] {
+    padding: 5px 10px;
+    border: 1px solid #ccc;
+    border-right: none;
+    border-radius: 5px 0 0 5px; /* Rounded left corners */
+    font-size: 14px;
+    vertical-align: middle;
+}
+
+.search-bar button {
+    padding: 5px 10px;
+    border: 1px solid #ccc;
+    background-color: #007bff;
+    color: white;
+    font-size: 14px;
+    border-radius: 0 5px 5px 0; /* Rounded right corners */
+    vertical-align: middle;
+    cursor: pointer;
+}
+
+.search-bar button:hover {
+    background-color: #0056b3;
+}
+
+.search-bar input:focus {
+    outline: none;
+    border-color: #007bff;
+}