diff --git a/frontend/src/components/Account/UserInformation.jsx b/frontend/src/components/Account/UserInformation.jsx
index 746184a..cddcb02 100644
--- a/frontend/src/components/Account/UserInformation.jsx
+++ b/frontend/src/components/Account/UserInformation.jsx
@@ -22,10 +22,10 @@ export default function UserInformation() {
 
   return (
     <div className="information_container">
-      <h1 className="categoryTitle">Informations</h1>
+      <h1 className="categoryTitle-info">INFORMATIONS</h1>
       {salon && (
         <div>
-          <h2 className="categoryTitle">Salon Information</h2>
+          <h2 className="categoryTitle-salon">Salon Information</h2>
           <p>Name : {salon.salonName}</p>
           <p>City : {salon.city}</p>
           <p>Country : {salon.country}</p>
@@ -33,7 +33,7 @@ export default function UserInformation() {
       )}
       {stylist && (
         <div>
-          <h2 className="categoryTitle">Stylist Information</h2>
+          <h2 className="categoryTitle-salon-info">Stylist Information</h2>
           <p>Last Name : {stylist.lastName}</p>
           <p>First Name : {stylist.firstName}</p>
           <p>Role : {stylist.stylistRole}</p>
diff --git a/frontend/src/components/Account/UserModification.jsx b/frontend/src/components/Account/UserModification.jsx
index 49633b5..90025e5 100644
--- a/frontend/src/components/Account/UserModification.jsx
+++ b/frontend/src/components/Account/UserModification.jsx
@@ -200,7 +200,7 @@ export default function UserModification() {
 
   return (
     <div className="modification_container">
-      <h2 className="categoryTitle">Modification :</h2>
+      <h2 className="categoryTitle-modi">Modification :</h2>
       {stylist && (
         <form onSubmit={handleSubmit}>
           <label>
@@ -233,6 +233,7 @@ export default function UserModification() {
           <label>
             Newsletter:
             <input
+              className="checkbox"
               type="checkbox"
               name="optinValue"
               checked={formData.optinValue || ""}
diff --git a/frontend/src/pages/Account.jsx b/frontend/src/pages/Account.jsx
index d0602fd..227f0d0 100644
--- a/frontend/src/pages/Account.jsx
+++ b/frontend/src/pages/Account.jsx
@@ -15,6 +15,7 @@ export default function Account() {
       <ScrollToTop />
       <Navigation />
       <NavigationPhone />
+      <h1 className="accountTitle">My Account</h1>
       <UserInformation />
       <UserModification />
     </main>
diff --git a/frontend/src/scss/account.scss b/frontend/src/scss/account.scss
index f7b2f3d..41771de 100644
--- a/frontend/src/scss/account.scss
+++ b/frontend/src/scss/account.scss
@@ -1,70 +1,125 @@
 @import "./color-config.scss";
 
-.information_container {
-  padding: 2rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  max-width: 500px;
-  gap: 2rem;
-  margin: 3rem auto 0;
-  background-color: white;
-  filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.25));
-  .categoryTitle {
-    display: flex;
-    width: max-content;
-    background-color: rgba($color-black, 1);
-    color: $color-light;
-    padding: 0.5rem 1rem;
-    font-size: 1.4rem;
-    font-weight: 600;
-  }
+.accountTitle {
+  text-align: center;
+  margin-top: 50px;
+  font-size: 50px;
 }
 
+.information_container,
 .modification_container {
-  padding: 2rem;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
-  width: 100%;
-  max-width: 500px;
-  gap: 1rem;
-  margin: 3rem auto 0;
-  background-color: white;
+  max-width: 89%;
+  margin: 30px auto 50px;
+  padding: 20px;
+  background-color: #f5f5f5;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  overflow-y: auto;
+  max-height: 600px;
   filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.25));
-  .categoryTitle {
+
+  .checkbox {
+    width: 20px;
+  }
+
+  .categoryTitle,
+  .categoryTitle-salon,
+  .categoryTitle-info,
+  .categoryTitle-salon-info,
+  .categoryTitle-modi {
     display: flex;
-    width: max-content;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    max-width: 245px;
+    height: 43px;
     background-color: rgba($color-black, 1);
     color: $color-light;
     padding: 0.5rem 1rem;
+    border-radius: 8px;
     font-size: 1.4rem;
-    font-weight: 600;
+    font-weight: 400;
+    margin: 0 auto;
+    margin-bottom: 1rem;
+    text-align: center;
   }
+
+  @media (max-width: 768px) {
+    max-width: 90%;
+    .categoryTitle,
+    .categoryTitle-salon,
+    .categoryTitle-info,
+    .categoryTitle-salon-info,
+    .categoryTitle-modi {
+      max-width: 100%;
+    }
+  }
+
+  @media (max-width: 480px) {
+    padding: 1rem;
+    gap: 1rem;
+  }
+
+  div {
+    width: 100%;
+    padding: 1rem;
+    border-top: 1px solid #ddd;
+
+    h2 {
+      font-size: 1.2rem;
+    }
+
+    p {
+      text-align: left;
+      font-size: 20px;
+      font-weight: 600;
+      color: #000000;
+      margin: 1rem 0;
+    }
+  }
+
+  label {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    max-width: 300px;
+
+    input {
+      width: 100%;
+      padding: 1rem;
+      margin-top: 0.5rem;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+  }
+
   form {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    font-size: 20px;
     align-items: center;
     width: 100%;
-    max-width: 1920px;
     gap: 1rem;
-    margin: 0rem auto 0;
+    margin: 0 auto;
+    text-align: center;
+
     button {
-      width: max-content;
-      height: fit-content;
-      padding: 0.8rem 1rem;
-      background-color: rgba($color-black, 0);
-      border-radius: 2rem;
+      width: 80%;
+      padding: 0.7rem 1.5rem;
+      font-size: 25px;
+      background-color: rgba($color-black, 1);
+      border-radius: 8px;
       cursor: pointer;
-      font-size: 1rem;
       font-weight: 700;
-      color: $color-black;
+      color: $color-light;
+      margin: 0 auto;
+
       &:hover {
-        cursor: pointer;
         background-color: rgba($color-black, 0.1);
       }
     }
diff --git a/frontend/src/scss/components/LatestOrders.scss b/frontend/src/scss/components/LatestOrders.scss
index 9305734..3baaec0 100644
--- a/frontend/src/scss/components/LatestOrders.scss
+++ b/frontend/src/scss/components/LatestOrders.scss
@@ -21,7 +21,8 @@
     &_head {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
-      background-color: #e7e7e7;
+      color: #f5f5f5;
+      background-color: #000000;
       padding: 10px;
       font-weight: bold;
       text-align: center;