diff --git a/client/app/Dash/styles.css b/client/app/Dash/styles.css
index 08181a3..030445a 100644
--- a/client/app/Dash/styles.css
+++ b/client/app/Dash/styles.css
@@ -2,17 +2,17 @@
 @import '@radix-ui/colors/mauve.css';
 @import '@radix-ui/colors/violet.css';
 
-.bgcontainer{
+.container{
     min-width: 100%;
     height: 100vh;
     overflow: hidden;
     display: grid;
     grid-template-rows: 0.1fr 0.9fr;
+    padding: 0 15px;
 }
 .content{
     display: grid;
     grid-template-columns: 0.5fr 0.5fr;
-    
 }   
 
 .left-side{
@@ -69,6 +69,8 @@
 .balance-buy{
     display: flex;
     font-family: Spartan,sans;
+
+    flex-direction: column;
 }
 .balance{
     background-color:#1D1D1D ;
@@ -78,7 +80,6 @@
     margin: 20px;
     padding: 20px;
     border-radius: 10px;
-
 }
 .balance-amt{
     color: #fea240;
@@ -92,7 +93,6 @@
     border-radius: 10px;
     margin: 0 10px;
     font-weight:100;
-
 }
 .logout-button{
     background-color: #1D1D1D;
@@ -110,6 +110,7 @@
   margin: 0 10px;
   font-weight: 100;
 }
+
 .buy-stocks{
     color: white;
     border: 0cm;
@@ -119,14 +120,13 @@
     border-radius: 10px;
     width: 40%;
     height: 100%;
-    margin: 20px;
+    margin: 20px        0;
     padding: 20px;
     padding-bottom: 0;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-
 }
 .buy-confirm{
     color: #ffffff;
@@ -158,8 +158,7 @@
     width: 80%;
     margin: 10px;
     background-color: rgba(0, 0, 0, 0);
-    border-bottom: solid;
-    border-color: white;
+    border-bottom: solid 1px white;
 }
 .buy-input-field:focus{
     color: white;
@@ -168,7 +167,7 @@
     border: none;
     border-bottom: solid;
   
-    box-shadow: none;
+    box-shadow: none; 
     outline: none;
 }
 
@@ -341,4 +340,137 @@ input {
     opacity: 1;
     transform: translateX(0);
   }
+}
+
+/* Base styles */
+.container {
+  padding: 0px 15px; 
+} 
+
+/* Responsive Styles */
+
+/* Mobile Styles */
+@media (max-width: 480px) {
+  .content {
+      flex-direction: column;
+  }
+
+  .topbar {
+      flex-direction: column;
+      justify-content: center;
+  }
+
+  .holdings {
+      flex-direction: column;
+      padding: 10px;
+  }
+
+  
+  .balance-buy {
+      flex-direction: column;
+      align-items: center;
+  }
+
+  .balance {
+      width: 100%;
+      margin: 10px 0;
+  }
+
+  .buy-stocks {
+      width: 100%;
+  }
+
+  .buy-confirm {
+      width: 100%;
+  }
+
+  .left-side, .right-side {
+      width: 100%;
+  }
+
+}
+
+/* Tablet Styles */
+@media (min-width: 481px) and (max-width: 768px) {
+  .content {
+      display: flex;
+      flex-direction: column;
+  }
+
+  .topbar {
+      flex-direction: column;
+  }
+
+  .balance-buy {
+      flex-direction: row;
+      justify-content: space-between;
+  }
+
+  .left-side, .right-side {
+      width: 100%;
+  }
+
+  .buy-stocks {
+      width: 45%;
+  }
+}
+
+/* Laptop Styles */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .content {
+      display: grid;
+      grid-template-columns: 1fr 1fr; /* Two columns */
+  }
+
+  .topbar {
+      justify-content: space-between;
+  }
+
+  .left-side, .right-side {
+      display: flex;
+      flex-direction: column;
+  }
+
+  .balance-buy {
+      flex-direction: row;
+      justify-content: space-between;
+  }
+
+  .buy-stocks {
+      width: 40%;
+  }
+
+  .balance {
+      width: 60%;
+  }
+}
+
+/* Desktop Styles */
+@media (min-width: 1025px) {
+  .content {
+      display: grid;
+      grid-template-columns: 1fr 1fr; /* Two columns */
+  }
+
+  .topbar {
+      justify-content: space-between;
+  }
+
+  .left-side, .right-side {
+      display: flex;
+      flex-direction: column;
+  }
+
+  .balance-buy {
+      flex-direction: row;
+      justify-content: space-between;
+  }
+
+  .buy-stocks {
+      width: 40%;
+  }
+
+  .balance {
+      width: 60%;
+  }
 }
\ No newline at end of file
diff --git a/client/app/Forget-Password/style.css b/client/app/Forget-Password/style.css
index d8a5880..a17dfcb 100644
--- a/client/app/Forget-Password/style.css
+++ b/client/app/Forget-Password/style.css
@@ -9,7 +9,8 @@ body {
 
 .container {
     background-color: #333333;
-    padding: 40px;
+    /* padding: 40px; */
+    padding: 20px;
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     max-width: 400px;
@@ -20,6 +21,9 @@ body {
 h1 {
     color: #fff;
     margin-bottom: 20px;
+
+    
+    font-size: 24px;
 }
 
 input {
@@ -52,4 +56,63 @@ button:hover {
 
 .heading{
     font-size: 30px;
+}
+
+/* Tablet */
+@media (max-width: 768px) { 
+    .container {
+        padding: 30px; 
+    }
+    h1 {
+        font-size: 28px; 
+    }
+}
+
+/* Mobile Styles */
+@media (max-width: 480px) { 
+    .container {
+        padding: 20px; 
+        max-width: 90%; 
+    }
+    h1 {
+        font-size: 24px; 
+    }
+    input, button {
+        font-size: 14px;
+    }
+}
+
+/* Tablet Styles */
+@media (min-width: 481px) and (max-width: 768px) { 
+    .container {
+        padding: 30px; 
+    }
+    h1 {
+        font-size: 28px; 
+    }
+}
+
+/* Laptop Styles */
+@media (min-width: 769px) and (max-width: 1024px) { 
+    .container {
+        padding: 40px; 
+        max-width: 70%; 
+    }
+    h1 {
+        font-size: 30px; 
+    }
+    input, button {
+        font-size: 16px;
+    }
+}
+
+/* Desktop Styles */
+@media (min-width: 1025px) { 
+    .container {
+        padding: 50px; 
+        max-width: 400px; 
+    }
+    h1 {
+        font-size: 32px; 
+    }
 }
\ No newline at end of file
diff --git a/client/app/globals.css b/client/app/globals.css
index a958b55..694658a 100644
--- a/client/app/globals.css
+++ b/client/app/globals.css
@@ -31,27 +31,44 @@ body {
   grid-template-columns: repeat(2, 1fr);
   
 }
-.titlecard {
-  width: calc(100%-20px);
+ .titlecard {
+   width: calc(100%-20px);
   margin: 20px;
   float: left;
-  /* Additional styling for the card */
   background-color: #1D1D1D;
   padding: 20px;
   box-sizing: border-box;
   border-radius: 10px;
   color: #CFC354;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  height: calc(100vh - 40px); /* 100vh minus 20px top margin and 20px bottom margin */
+  height: calc(100vh - 40px); 
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  font-size: 105px;
+  font-family: Della Respira; 
+  margin: 20px;
+  background-color: #1D1D1D;
+  padding: 20px;
+  box-sizing: border-box;
+  border-radius: 10px;
+  color: #CFC354;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
+ } 
+
+ .titlecard {
+  height: calc(100vh - 40px);
   font-size: 105px;
-  font-family: Della Respira;
+  font-family: 'Della Respira';
 }
-.logincard {
+ .logincard {
   width: 100%;
   float: left;
   background-color: #5DBE74;
@@ -71,7 +88,15 @@ body {
   height: 20%;
   transition: height 0.5s ease;
   justify-content: center;
+} 
 
+.logincard {
+  background-color: #5DBE74;
+  color: #22472B;
+  height: 20%;
+  font-size: 40px;
+  font-family: Spartan;
+  transition: height 0.5s ease;
 }
 
 .signupcard{
@@ -94,7 +119,6 @@ body {
   flex-direction: column;
   align-items: center;
   text-align: center;
-
 }
 
 .loginform{
@@ -187,7 +211,6 @@ body {
 
 }
 
-
 .stock-card-container{
     width: 100%;
     float: left;
@@ -240,26 +263,18 @@ body {
   letter-spacing: 5px;
 }
 
-.card-button-add{
+.card-button-add, .card-button-sell{
   height: 50%;
   width: 100%;
   color: white;
-
-
-
 }
+
 .card-button-add:hover{
   font-size: 20px;
   font-weight: 700;
   border-radius: 0 0 10px 0;
   text-shadow: 0 0 20px #5DBE74;
 
-}
-.card-button-sell{
-  height: 50%;
-  width: 100%;
-  color: white;
-
 }
 .card-button-sell:hover{
   font-size: 20px;
@@ -272,7 +287,6 @@ body {
   background-color: #ffffff;
 }
 
-
 .ScrollAreaRoot {
   width: 100%;
   height: 80vh;
@@ -477,10 +491,88 @@ button {
   box-shadow: 0 0 0 2px var(--green-8);
 }
 
-/* Media Query For Responsive Design Sm and md  */
-@media only screen and (max-width:1000px) {
-  .bgcontainer{
-    grid-template-columns: repeat(1, 1fr);
-    place-content: center;
+/* Media Queries for Responsive Design */
+
+/* mobile */
+@media (max-width: 480px) {
+  .bgcontainer {
+      grid-template-columns: 1fr;
+      margin-top: 10px;
+      justify-content: center;
+  }
+
+  .titlecard {
+      font-size: 40px; 
+  }
+
+  .logincard, .infocard {
+      height: auto; 
+  }
+
+  .login-text-field, .signup-text-field {
+      font-size: 18px; 
+  }
+
+  .login-button, .signup-button {
+      font-size: 16px; 
+  }
+} 
+
+@media (min-width: 481px) and (max-width: 768px) {
+  .bgcontainer {
+      grid-template-columns: 1fr; 
+  }
+
+  .titlecard {
+      font-size: 60px; 
+  }
+
+  .logincard, .infocard {
+      height: auto; 
+  }
+
+  .login-text-field, .signup-text-field {
+      font-size: 20px; 
+  }
+
+  .login-button, .signup-button {
+      font-size: 18px; 
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .bgcontainer {
+      grid-template-columns: 1fr; 
+  }
+
+  .titlecard {
+      font-size: 80px; 
+  }
+
+  .logincard, .infocard {
+      height: calc(100vh - 40px);
+  }
+
+  .login-text-field, .signup-text-field {
+      font-size: 25px; 
+  }
+
+  .login-button, .signup-button {
+      font-size: 20px; 
+  }
+}
+
+/* Default font size for desktops */
+@media (min-width: 1025px) {
+  .titlecard {
+      font-size: 105px; 
   }
-}
\ No newline at end of file
+}
+
+/* Additional Media Query for Small and Medium Screens */
+@media only screen and (max-width: 1000px) {
+  .bgcontainer {
+      grid-template-columns: repeat(1, 1fr);
+      place-content: center; /* You can adjust this if necessary */
+  }
+}