diff --git a/static/css/styles.css b/static/css/styles.css
index b154fe1..e17595f 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -4,8 +4,8 @@ html {
   margin: 0;
   height: 100%;
   font-family: Arial, sans-serif;
-  background-color: #1e1e2e; /* Dark background */
-  color: #e5e7eb; /* Light text */
+  background-color: #f3f4f6;
+  /* similar to bg-gray-100 */
 }
 
 .flex {
@@ -25,7 +25,7 @@ html {
 }
 
 .bg-gray {
-  background-color: #2a2a40; /* Dark gray */
+  background-color: #f3f4f6;
 }
 
 /* Container setup for dashboard */
@@ -38,9 +38,11 @@ html {
 
 /* Sidebar styles */
 .sidebar {
-  width: 16rem; /* Fixed width for sidebar */
-  background-color: #121220; /* Darker background */
-  color: #e5e7eb; /* Light text */
+  width: 16rem;
+  /* Fixed width for sidebar */
+  background-color: #1f2937;
+  /* Dark background */
+  color: white;
   padding: 1rem;
   display: flex;
   flex-direction: column;
@@ -57,7 +59,7 @@ html {
 }
 
 .sidebar a {
-  color: #e5e7eb;
+  color: white;
   text-decoration: none;
   padding: 0.5rem 0;
   display: block;
@@ -66,26 +68,31 @@ html {
 }
 
 .sidebar a:hover {
-  background-color: #374151; /* Slightly lighter on hover */
+  background-color: #374151;
+  /* Slightly lighter on hover */
 }
 
 /* Main content area for dashboard */
 .main-content {
-  flex-grow: 1; /* Take up remaining space */
+  flex-grow: 1;
+  /* Take up remaining space */
   padding: 2rem;
   display: flex;
   flex-direction: column;
-  overflow-y: auto; /* Allow scrolling if needed */
+  overflow-y: auto;
+  /* Allow scrolling if needed */
 }
 
 .header {
   display: flex;
-  justify-content: flex-end; /* Align logout button to the right */
+  justify-content: flex-end;
+  /* Align logout button to the right */
   margin-bottom: 2rem;
 }
 
 .logout-btn {
-  background-color: #f87171; /* Red button */
+  background-color: #ef4444;
+  /* Red button */
   color: white;
   padding: 0.5rem 1rem;
   border: none;
@@ -94,72 +101,91 @@ html {
 }
 
 .logout-btn:hover {
-  background-color: #e11d48; /* Darker red on hover */
+  background-color: #dc2626;
+  /* Darker red on hover */
 }
 
 .content {
-  background-color: #2e2e42; /* Dark content background */
+  background-color: white;
   padding: 1.5rem;
   border-radius: 0.5rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   flex-grow: 1;
-  overflow-y: auto; /* Ensure content area can scroll */
+  overflow-y: auto;
+  /* Ensure content area can scroll */
 }
 
 /* Login Container */
 .login-container {
-  background-color: #2e2e42;
+  background-color: white;
   padding: 2rem;
   border-radius: 0.5rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  /* Similar to shadow-md */
   width: 24rem;
+  /* similar to w-96 */
 }
 
 .login-title {
   font-size: 1.75rem;
+  /* similar to text-2xl */
   font-weight: bold;
   margin-bottom: 0.5rem;
+  /* similar to mb-6 */
   text-align: center;
-  color: #e5e7eb;
+  color: #2d3748;
+  /* similar to text-gray-800 */
 }
 
 .login-subtitle {
   font-size: 1.25rem;
+  /* Size between h2 and h3 */
   font-weight: normal;
+  /* Lighter weight to distinguish from the title */
   margin-bottom: 1.5rem;
+  /* Adjust spacing below subtitle */
   text-align: center;
-  color: #9ca3af; /* Slightly lighter than title */
+  color: #4a5568;
+  /* A slightly lighter color than the title */
 }
 
 /* Input Fields */
 .input-group {
   margin-bottom: 1rem;
+  /* similar to mb-4 */
 }
 
 .input-group label {
   display: block;
-  color: #9ca3af; /* Gray text */
+  color: #4a5568;
+  /* similar to text-gray-700 */
   font-size: 0.875rem;
+  /* similar to text-sm */
   font-weight: bold;
   margin-bottom: 0.5rem;
+  /* similar to mb-2 */
 }
 
 .input-field {
   width: 100%;
   padding: 0.5rem;
-  border: 1px solid #4b5563; /* Dark border */
+  border: 1px solid #cbd5e0;
+  /* similar to border */
   border-radius: 0.25rem;
-  background-color: #3b3b53;
-  color: #e5e7eb;
+  /* similar to rounded */
+  color: #4a5568;
+  /* similar to text-gray-700 */
   font-size: 1rem;
   line-height: 1.5;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
+  /* resets shadow */
   transition: box-shadow 0.15s ease-in-out;
 }
 
 .input-field:focus {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); /* Blue focus */
+  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+  /* similar to focus:shadow-outline */
 }
 
 /* Form Footer */
@@ -168,10 +194,12 @@ html {
   justify-content: space-between;
   align-items: center;
   margin-top: 1rem;
+  /* similar to mb-6 */
 }
 
 .btn-primary {
-  background-color: #4299e1; /* Blue button */
+  background-color: #4299e1;
+  /* similar to bg-blue-500 */
   color: white;
   padding: 0.5rem 1rem;
   border-radius: 0.25rem;
@@ -182,18 +210,22 @@ html {
 }
 
 .btn-primary:hover {
-  background-color: #2563eb; /* Darker blue on hover */
+  background-color: #2b6cb0;
+  /* similar to hover:bg-blue-700 */
 }
 
 .forgot-password {
   color: #4299e1;
+  /* similar to text-blue-500 */
   font-size: 0.875rem;
+  /* similar to text-sm */
   font-weight: bold;
   text-decoration: none;
 }
 
 .forgot-password:hover {
-  color: #2563eb;
+  color: #2b6cb0;
+  /* similar to hover:text-blue-800 */
 }
 
 /* Login Message */
@@ -201,7 +233,6 @@ html {
   margin-top: 1rem;
   text-align: center;
   font-size: 0.875rem;
-  color: #9ca3af;
 }
 
 /* Dashboard-specific styles */
@@ -213,16 +244,15 @@ html {
 }
 
 .dashboard-item {
-  background-color: #1e1e2e;
+  background-color: white;
   padding: 1rem;
   border-radius: 0.5rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .dashboard-item h3 {
   margin-top: 0;
   margin-bottom: 1rem;
-  color: #e5e7eb;
 }
 
 /* New styles for jobs submenu */
@@ -233,7 +263,7 @@ html {
 .submenu-header {
   font-size: 1.5rem;
   font-weight: bold;
-  color: #e5e7eb;
+  color: #2d3748;
   margin-bottom: 1rem;
 }
 
@@ -244,22 +274,22 @@ html {
 }
 
 .submenu-item {
-  background-color: #3b3b53;
+  background-color: white;
   border-radius: 0.5rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   padding: 1rem;
   transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
 .submenu-item:hover {
   transform: translateY(-2px);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 .submenu-title {
   font-size: 1.25rem;
   font-weight: bold;
-  color: #9ca3af;
+  color: #4a5568;
   margin-bottom: 0.5rem;
 }
 
@@ -272,7 +302,7 @@ html {
 
 .submenu-item li {
   font-size: 0.875rem;
-  color: #a0aec0;
+  color: #718096;
   padding: 0.25rem 0;
 }
 
@@ -294,10 +324,20 @@ html {
 
 .submenu-item a:hover,
 .submenu-item button:hover {
-  background-color: #2563eb;
+  background-color: #2b6cb0;
 }
 
 /* Style for error and not-found message display */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 .error,
 .not-found {
   text-align: center;
@@ -310,8 +350,8 @@ html {
 
 .error {
   background-color: #fee2e2;
-  border: 1px solid #f87171;
-  color: #e11d48;
+  border: 1px solid #ef4444;
+  color: #b91c1c;
 }
 
 .not-found {
@@ -338,15 +378,30 @@ html {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
 }
 
+.htmx-indicator {
+  display: none;
+}
+
+.htmx-request .htmx-indicator {
+  display: flex;
+  align-items: center;
+}
+
+.htmx-request.htmx-indicator {
+  display: flex;
+  align-items: center;
+}
+
 .loading-indicator {
   width: 1.5rem;
   height: 1.5rem;
-  border: 0.25rem solid #4a5568;
+  border: 0.25rem solid #e2e8f0;
   border-top: 0.25rem solid #4299e1;
   border-radius: 50%;
   animation: spin 1s linear infinite;
@@ -364,6 +419,7 @@ html {
   0% {
     background-color: #fef3c7;
   }
+
   100% {
     background-color: transparent;
   }
@@ -373,9 +429,9 @@ html {
   animation: highlightBackground 2s ease-in-out;
 }
 
-/* Button styles */
+/* You better be sure you wanna do this button styles */
 .warning-button {
-  background-color: #f87171;
+  background-color: #ef4444;
   color: white;
   border: none;
   padding: 0.5rem 1rem;
@@ -387,11 +443,17 @@ html {
 }
 
 .warning-button:hover {
-  background-color: #e11d48;
+  background-color: #dc2626;
 }
 
+.warning-button:disabled {
+  background-color: #9ca3af;
+  cursor: not-allowed;
+}
+
+/* Pretty sure you wanna do this but lets think about it again button styles */
 .caution-button {
-  background-color: #f59e0b;
+  background-color: #eab308;
   color: #1f2937;
   border: none;
   padding: 0.5rem 1rem;
@@ -403,11 +465,17 @@ html {
 }
 
 .caution-button:hover {
-  background-color: #d97706;
+  background-color: #ca8a04;
+}
+
+.caution-button:disabled {
+  background-color: #9ca3af;
+  cursor: not-allowed;
 }
 
+/* This button is harmless button styles */
 .success-button {
-  background-color: #34d399;
+  background-color: #22c55e;
   color: white;
   border: none;
   padding: 0.5rem 1rem;
@@ -419,5 +487,459 @@ html {
 }
 
 .success-button:hover {
-  background-color: #059669;
+  background-color: #16a34a;
+}
+
+.success-button:disabled {
+  background-color: #9ca3af;
+  cursor: not-allowed;
 }
+
+@media (prefers-color-scheme: dark) {
+
+  /* General reset and body setup */
+  body,
+  html {
+    margin: 0;
+    height: 100%;
+    font-family: Arial, sans-serif;
+    background-color: #1e1e2e;
+    /* Dark background */
+    color: #e5e7eb;
+    /* Light text */
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .h-screen {
+    height: 100vh;
+  }
+
+  /* Flexbox centering for login */
+  .flex-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+
+  .bg-gray {
+    background-color: #2a2a40;
+    /* Dark gray */
+  }
+
+  /* Container setup for dashboard */
+  .container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100vh;
+  }
+
+  /* Sidebar styles */
+  .sidebar {
+    width: 16rem;
+    /* Fixed width for sidebar */
+    background-color: #121220;
+    /* Darker background */
+    color: #e5e7eb;
+    /* Light text */
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sidebar .title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 1.5rem;
+  }
+
+  .sidebar ul {
+    list-style-type: none;
+  }
+
+  .sidebar a {
+    color: #e5e7eb;
+    text-decoration: none;
+    padding: 0.5rem 0;
+    display: block;
+    margin-bottom: 0.5rem;
+    border-radius: 0.25rem;
+  }
+
+  .sidebar a:hover {
+    background-color: #374151;
+    /* Slightly lighter on hover */
+  }
+
+  /* Main content area for dashboard */
+  .main-content {
+    flex-grow: 1;
+    /* Take up remaining space */
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    /* Allow scrolling if needed */
+  }
+
+  .header {
+    display: flex;
+    justify-content: flex-end;
+    /* Align logout button to the right */
+    margin-bottom: 2rem;
+  }
+
+  .logout-btn {
+    background-color: #f87171;
+    /* Red button */
+    color: white;
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 0.25rem;
+    cursor: pointer;
+  }
+
+  .logout-btn:hover {
+    background-color: #e11d48;
+    /* Darker red on hover */
+  }
+
+  .content {
+    background-color: #2e2e42;
+    /* Dark content background */
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    flex-grow: 1;
+    overflow-y: auto;
+    /* Ensure content area can scroll */
+  }
+
+  /* Login Container */
+  .login-container {
+    background-color: #2e2e42;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    width: 24rem;
+  }
+
+  .login-title {
+    font-size: 1.75rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+    text-align: center;
+    color: #e5e7eb;
+  }
+
+  .login-subtitle {
+    font-size: 1.25rem;
+    font-weight: normal;
+    margin-bottom: 1.5rem;
+    text-align: center;
+    color: #9ca3af;
+    /* Slightly lighter than title */
+  }
+
+  /* Input Fields */
+  .input-group {
+    margin-bottom: 1rem;
+  }
+
+  .input-group label {
+    display: block;
+    color: #9ca3af;
+    /* Gray text */
+    font-size: 0.875rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+
+  .input-field {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #4b5563;
+    /* Dark border */
+    border-radius: 0.25rem;
+    background-color: #3b3b53;
+    color: #e5e7eb;
+    font-size: 1rem;
+    line-height: 1.5;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
+    transition: box-shadow 0.15s ease-in-out;
+  }
+
+  .input-field:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+    /* Blue focus */
+  }
+
+  /* Form Footer */
+  .form-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 1rem;
+  }
+
+  .btn-primary {
+    background-color: #4299e1;
+    /* Blue button */
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    border: none;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+
+  .btn-primary:hover {
+    background-color: #2563eb;
+    /* Darker blue on hover */
+  }
+
+  .forgot-password {
+    color: #4299e1;
+    font-size: 0.875rem;
+    font-weight: bold;
+    text-decoration: none;
+  }
+
+  .forgot-password:hover {
+    color: #2563eb;
+  }
+
+  /* Login Message */
+  .login-message {
+    margin-top: 1rem;
+    text-align: center;
+    font-size: 0.875rem;
+    color: #9ca3af;
+  }
+
+  /* Dashboard-specific styles */
+  .dashboard-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1rem;
+    margin-top: 1rem;
+  }
+
+  .dashboard-item {
+    background-color: #1e1e2e;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  }
+
+  .dashboard-item h3 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    color: #e5e7eb;
+  }
+
+  /* New styles for jobs submenu */
+  .submenu-container {
+    margin-bottom: 2rem;
+  }
+
+  .submenu-header {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #e5e7eb;
+    margin-bottom: 1rem;
+  }
+
+  .submenu-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+  }
+
+  .submenu-item {
+    background-color: #3b3b53;
+    border-radius: 0.5rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    padding: 1rem;
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  }
+
+  .submenu-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+  }
+
+  .submenu-title {
+    font-size: 1.25rem;
+    font-weight: bold;
+    color: #9ca3af;
+    margin-bottom: 0.5rem;
+  }
+
+  /* Style for lists within submenu items */
+  .submenu-item ul {
+    list-style-type: none;
+    padding-left: 0;
+    margin-top: 0.5rem;
+  }
+
+  .submenu-item li {
+    font-size: 0.875rem;
+    color: #a0aec0;
+    padding: 0.25rem 0;
+  }
+
+  /* Style for buttons or links within submenu items */
+  .submenu-item a,
+  .submenu-item button {
+    display: inline-block;
+    background-color: #4299e1;
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    text-decoration: none;
+    font-size: 0.875rem;
+    font-weight: bold;
+    transition: background-color 0.2s;
+    border: none;
+    cursor: pointer;
+  }
+
+  .submenu-item a:hover,
+  .submenu-item button:hover {
+    background-color: #2563eb;
+  }
+
+  /* Style for error and not-found message display */
+  .error,
+  .not-found {
+    text-align: center;
+    padding: 0.75rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    margin-top: 0.5rem;
+    animation: fadeIn 0.3s ease-in-out;
+  }
+
+  .error {
+    background-color: #fee2e2;
+    border: 1px solid #f87171;
+    color: #e11d48;
+  }
+
+  .not-found {
+    background-color: #fef3c7;
+    border: 1px solid #f59e0b;
+    color: #92400e;
+  }
+
+  .error::before,
+  .not-found::before {
+    margin-right: 0.5rem;
+  }
+
+  .error::before {
+    content: "⚠️";
+  }
+
+  .not-found::before {
+    content: "🔍";
+  }
+
+  /* Loading indicator */
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .loading-indicator {
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 0.25rem solid #4a5568;
+    border-top: 0.25rem solid #4299e1;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-right: 0.5rem;
+  }
+
+  /* Fade effect for existing content */
+  .htmx-request .fade-me-out {
+    opacity: 0.5;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  /* Highlight effect for changed content */
+  @keyframes highlightBackground {
+    0% {
+      background-color: #fef3c7;
+    }
+
+    100% {
+      background-color: transparent;
+    }
+  }
+
+  .highlight-change {
+    animation: highlightBackground 2s ease-in-out;
+  }
+
+  /* Button styles */
+  .warning-button {
+    background-color: #f87171;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    margin-bottom: 1rem;
+  }
+
+  .warning-button:hover {
+    background-color: #e11d48;
+  }
+
+  .caution-button {
+    background-color: #f59e0b;
+    color: #1f2937;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    margin-bottom: 1rem;
+  }
+
+  .caution-button:hover {
+    background-color: #d97706;
+  }
+
+  .success-button {
+    background-color: #34d399;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    margin-bottom: 1rem;
+  }
+
+  .success-button:hover {
+    background-color: #059669;
+  }
+}
\ No newline at end of file