diff --git a/apps/signup/signup.css b/apps/signup/signup.css
index 40d071bfb..88374c9af 100644
--- a/apps/signup/signup.css
+++ b/apps/signup/signup.css
@@ -1,130 +1,215 @@
-/* signup.css */
-
-
-body {
-	color: #999;
-	background: #f5f5f5;
-	font-family: 'Roboto', sans-serif;
-	overflow-x: hidden;
+/* Light mode styles */
+body.light-mode {
+    color: #999;
+    background: #f5f5f5;
+    font-family: 'Roboto', sans-serif;
+    overflow-x: hidden;
 }
+
 .bg-dark {
     background-color: #343a40!important;
 }
-.form-control, .form-control:focus, .input-group-addon {
-	border-color: #e1e1e1;
-	border-radius: 0;
+
+.form-control,
+.form-control:focus,
+.input-group-addon {
+    border-color: #e1e1e1;
+    border-radius: 0;
 }
+
 .signup-form {
-	width: 390px;
-	margin: 5% auto;
-	padding: 30px 0;
+    width: 390px;
+    margin: 5% auto;
+    padding: 30px 0;
+	
 }
+
 .signup-form h2 {
-	color: #636363;
-	margin: 0 0 15px;
-	text-align: center;
+    color: #636363;
+    margin: 0 0 15px;
+    text-align: center;
 }
+
 .signup-form .lead {
-	font-size: 14px;
-	margin-bottom: 30px;
-	text-align: center;
-}
-.signup-form form {		
-	border-radius: 1px;
-	margin-bottom: 15px;
-	background: #fff;
-	border: 1px solid #f3f3f3;
-	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-	padding: 30px;
+    font-size: 14px;
+    margin-bottom: 30px;
+    text-align: center;
 }
+
+.signup-form form {
+    border-radius: 1px;
+    margin-bottom: 15px;
+    background: #fff;
+    border: 1px solid #f3f3f3;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
+    padding: 30px;
+}
+
 .signup-form .form-group {
-	margin-bottom: 20px;
+    margin-bottom: 20px;
 }
+
 .signup-form label {
-	font-weight: normal;
-	font-size: 13px;
+    font-weight: normal;
+    font-size: 13px;
 }
+
 .signup-form .form-control {
-	min-height: 38px;
-	box-shadow: none !important;
-	border-width: 0 0 1px 0;
-}	
+    min-height: 38px;
+    box-shadow: none !important;
+    border-width: 0 0 1px 0;
+}
+
 .signup-form .input-group-addon {
-	max-width: 42px;
-	text-align: center;
-	background: none;
-	border-width: 0 0 1px 0;
-	padding-left: 5px;
-}
-.signup-form .btn {        
-	font-size: 16px;
-	font-weight: bold;
-	background: #19aa8d;
-	border-radius: 3px;
-	border: none;
-	min-width: 140px;
-	outline: none !important;
-}
-.signup-form .btn:hover, .signup-form .btn:focus {
-	background: #179b81;
+    max-width: 42px;
+    text-align: center;
+    background: none;
+    border-width: 0 0 1px 0;
+    padding-left: 5px;
 }
+
+.signup-form .btn {
+    font-size: 16px;
+    font-weight: bold;
+    background: #19aa8d;
+    border-radius: 3px;
+    border: none;
+    min-width: 140px;
+    outline: none !important;
+}
+
+.signup-form .btn:hover,
+.signup-form .btn:focus {
+    background: #179b81;
+}
+
 .signup-form a {
-	color: #19aa8d;
-	text-decoration: none;
-}	
+    color: #19aa8d;
+    text-decoration: none;
+}
+
 .signup-form a:hover {
-	text-decoration: underline;
+    text-decoration: underline;
 }
+
 .signup-form .fa {
-	font-size: 21px;
+    font-size: 21px;
 }
 
-.link{
-	letter-spacing: 0.02em;
-	text-transform: uppercase;
-	font-size: 0.99em;
-	font-weight: bold;
-	color: #5e6875;
-	text-decoration:none;
-	padding-right: 0.7rem;
-	padding-left: 0.7rem;
-	margin-top: 0.2rem;
-	font-family: "Open Sans", Helvetica, sans-serif;
-	line-height: 1.8;
+.link {
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    font-size: 0.99em;
+    font-weight: bold;
+    color: #5e6875;
+    text-decoration: none;
+    padding-right: 0.7rem;
+    padding-left: 0.7rem;
+    margin-top: 0.2rem;
+    font-family: "Open Sans", Helvetica, sans-serif;
+    line-height: 1.8;
 }
 
+nav li {
+    transition: background 0.5s;
+    border-radius: 3px;
+}
 
+nav li:not(.active):hover {
+    background: white;
+}
 
-nav li{
-	transition: background 0.5s; 
-	border-radius: 3px;
+nav li:not(.active):hover a {
+    color: black !important;
 }
 
+.active {
+    background: white;
+}
 
-nav li:not(.active):hover{
-	background: white;
+.active a {
+    color: black !important;
 }
-nav li:not(.active):hover a{
-	color: black !important;
+
+.text-center {
+    cursor: pointer;
 }
-.active{
-	background: white;
+
+@media screen and (max-width: 736px) {
+    .signup-form {
+        margin: 20% auto;
+    }
 }
-.active a{
-	color: black !important;
+
+@media screen and (max-width: 480px) {
+    .signup-form {
+        width: 300px;
+    }
 }
 
-.text-center{
-	cursor: pointer;
+/* Dark mode styles */
+body.dark-mode {
+    font-family: Arial, sans-serif;
+    transition: background-color 0.3s ease;
+    background-color: #333333; /* Dark mode background color */
+    color: #ffffff; /* Dark mode text color */
 }
 
-@media screen and (max-width:736px) {
-	.signup-form {
-		margin: 20% auto;
-	}
+body.dark-mode .signup-form {
+   
+    border: 1px solid #333;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
+    margin-bottom: 30px;
 }
-@media screen and (max-width: 480px) {
-	.signup-form {
-		width: 300px;
-	}
+
+body.dark-mode .signup-form h2 {
+    color: #ddd; /* Lighter text color */
+}
+
+body.dark-mode .signup-form .lead {
+    color: #ccc; /* Lighter text color */
+}
+
+body.dark-mode .signup-form form {
+    background-color: #555!important; /* Dark form background color */
+}
+
+body.dark-mode .signup-form label {
+    color: #ccc; /* Lighter text color */
+}
+
+body.dark-mode .signup-form .form-control {
+    color: #ddd; /* Lighter text color */
+    border-color: #444; /* Darker border color */
+}
+
+body.dark-mode .signup-form .input-group-addon {
+    color: #ddd; /* Lighter text color */
+    border-color: #444; /* Darker border color */
+}
+
+body.dark-mode .signup-form .btn {
+    color: #fff; /* Light text color */
+    background: #19aa8d; /* Button background color */
+}
+
+body.dark-mode .signup-form .btn:hover,
+body.dark-mode .signup-form .btn:focus {
+    background: #179b81; /* Darker button background color on hover/focus */
+}
+
+.signup-form.dark-mode a {
+    color: #19aa8d; /* Link color */
+}
+
+.signup-form.dark-mode a:hover {
+    color: #179b81; /* Darker link color on hover */
+}
+
+.link.dark-mode {
+    color: #ccc; /* Lighter link color */
+}
+
+.link.dark-mode:hover {
+    color: #ddd; /* Lighter link color on hover */
 }
\ No newline at end of file
diff --git a/apps/signup/signup.html b/apps/signup/signup.html
index 10243698a..5714e677c 100644
--- a/apps/signup/signup.html
+++ b/apps/signup/signup.html
@@ -61,8 +61,16 @@
       </div>
   </nav>
 
+ 
+
     <div class="signup-form">
+      <div class="form-check form-switch">
+        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" color="#fff" style=" border-color: #19aa8d; color: #fff;" />
+        <label class="form-check-label" for="flexSwitchCheckDefault">Switch Dark mode</label>
+      </div>
+
       <div
+        class='dark-mode'
         style="text-align:center; background: #17a2b8; font-size: xx-large; color: white; padding: 4px; border-radius: 5px 5px 0px 0px;">
         caMicroscope
       </div>
diff --git a/apps/signup/signup.js b/apps/signup/signup.js
index 30cd39dfc..102d5d4b2 100644
--- a/apps/signup/signup.js
+++ b/apps/signup/signup.js
@@ -116,4 +116,15 @@ $(window).on('load', function() {
 function loginPage(){
   const url = "/login.html";
   window.location.href = url;
-}
\ No newline at end of file
+}
+
+function toggleDarkMode() {
+  document.body.classList.toggle('dark-mode');
+}
+
+// Add event listener to the toggle button
+document.addEventListener("DOMContentLoaded", function() {
+  document.getElementById('flexSwitchCheckDefault').addEventListener('change', function() {
+      toggleDarkMode();
+  });
+});
\ No newline at end of file