From ab3c47130310b355a640ffe1aac94c731e1e628d Mon Sep 17 00:00:00 2001
From: Alex <oleksi.ovsiannikov@gmail.com>
Date: Fri, 3 Jul 2026 22:51:21 +0200
Subject: [PATCH 1/6] Add Profile page and API integration

---
 GuessWho/frontend/src/App.jsx             |  3 +
 GuessWho/frontend/src/profile/Profile.css |  0
 GuessWho/frontend/src/profile/Profile.jsx | 82 +++++++++++++++++++++++
 GuessWho/frontend/src/signup/SignUp.jsx   |  2 +-
 4 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 GuessWho/frontend/src/profile/Profile.css
 create mode 100644 GuessWho/frontend/src/profile/Profile.jsx

diff --git a/GuessWho/frontend/src/App.jsx b/GuessWho/frontend/src/App.jsx
index 7a6d04c..e0687a8 100644
--- a/GuessWho/frontend/src/App.jsx
+++ b/GuessWho/frontend/src/App.jsx
@@ -2,12 +2,15 @@ import { Routes, Route } from 'react-router-dom';
 
 import SignUp from './signup/SignUp';
 import Dashboard from './dashboard/Dashboard';
+import Profile from './profile/Profile';
+
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<SignUp />} />
       <Route path="/dashboard" element={<Dashboard />} />
+      <Route path="/profile" element={<Profile />} />
     </Routes>
   );
 }
diff --git a/GuessWho/frontend/src/profile/Profile.css b/GuessWho/frontend/src/profile/Profile.css
new file mode 100644
index 0000000..e69de29
diff --git a/GuessWho/frontend/src/profile/Profile.jsx b/GuessWho/frontend/src/profile/Profile.jsx
new file mode 100644
index 0000000..53aea55
--- /dev/null
+++ b/GuessWho/frontend/src/profile/Profile.jsx
@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import './Profile.css';
+
+export default function Profile() {
+  const [fullName, setFullName] = useState('');
+  const [aboutMe, setAboutMe] = useState('');
+
+  const navigate = useNavigate();
+
+  const isFormIncomplete =
+    !fullName.trim() || !aboutMe.trim();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (isFormIncomplete) {
+      alert('Please complete all fields.');
+      return;
+    }
+    
+    try {
+      const response = await fetch('/api/profile', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          fullName,
+          aboutMe,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        alert(data.message);
+        return;
+      }
+
+      alert('Profile created successfully!');
+      navigate('/dashboard');
+    } catch (error) {
+      console.error(error);
+      alert('Cannot connect to the server.');
+    }
+  };
+
+  return (
+    <div className="container">
+      <h2>Create Profile</h2>
+
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          placeholder="Full Name"
+          value={fullName}
+          onChange={(e) => setFullName(e.target.value)}
+        />
+
+        <br />
+        <br />
+
+        <textarea
+          placeholder="Tell us about yourself..."
+          value={aboutMe}
+          onChange={(e) => setAboutMe(e.target.value)}
+        />
+
+        <br />
+        <br />
+
+        <button
+          type="submit"
+          disabled={isFormIncomplete}
+        >
+          Save Profile
+        </button>
+      </form>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/GuessWho/frontend/src/signup/SignUp.jsx b/GuessWho/frontend/src/signup/SignUp.jsx
index 5e45256..2399a79 100644
--- a/GuessWho/frontend/src/signup/SignUp.jsx
+++ b/GuessWho/frontend/src/signup/SignUp.jsx
@@ -49,7 +49,7 @@ function SignUp() {
       setSuccessMessage('Account created successfully!')
 
       setTimeout(() => {
-        navigate('/dashboard')
+        navigate('/profile')
       }, 1500)
     } catch (error) {
       console.error(error)

From 8de126462e46c8003991fcbd2c02735d1f348351 Mon Sep 17 00:00:00 2001
From: Alex <oleksi.ovsiannikov@gmail.com>
Date: Thu, 9 Jul 2026 00:27:22 +0200
Subject: [PATCH 2/6] Enhance profile page with user information form

---
 GuessWho/frontend/src/profile/Profile.css | 140 +++++++++++++++
 GuessWho/frontend/src/profile/Profile.jsx | 200 ++++++++++++++++------
 2 files changed, 292 insertions(+), 48 deletions(-)

diff --git a/GuessWho/frontend/src/profile/Profile.css b/GuessWho/frontend/src/profile/Profile.css
index e69de29..6b95fed 100644
--- a/GuessWho/frontend/src/profile/Profile.css
+++ b/GuessWho/frontend/src/profile/Profile.css
@@ -0,0 +1,140 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: #f3f6fb;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.container {
+  width: 100%;
+  max-width: 100%;
+  margin: 20px auto;
+  padding: 20px;
+  background: #fff;
+  border-radius: 15px;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, .08);
+}
+
+h2 {
+  text-align: center;
+  color: #2563eb;
+  margin-bottom: 25px;
+}
+
+h3 {
+  margin: 20px 0 10px;
+  color: #333;
+  font-size: 18px;
+}
+
+input[type="text"],
+textarea {
+  width: 100%;
+  padding: 14px;
+  margin-bottom: 20px;
+  border: 2px solid #ddd;
+  border-radius: 10px;
+  font-size: 16px;
+  transition: .3s;
+}
+
+input[type="text"]:focus,
+textarea:focus {
+  outline: none;
+  border-color: #2563eb;
+}
+
+textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+
+label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  margin-bottom: 10px;
+  background: #f8f9fc;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: .2s;
+}
+
+label:hover {
+  background: #e8f0ff;
+  border-color: #2563eb;
+}
+
+input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  accent-color: #2563eb;
+}
+
+button {
+  width: 100%;
+  margin-top: 25px;
+  padding: 14px;
+  border: none;
+  border-radius: 10px;
+  background: #2563eb;
+  color: white;
+  font-size: 17px;
+  cursor: pointer;
+  transition: .3s;
+}
+
+button:hover {
+  background: #1d4ed8;
+}
+
+/* ---------- Tablet ------ */
+
+@media (min-width: 768px) {
+
+  .container {
+    max-width: 750px;
+    padding: 35px;
+  }
+
+  label {
+    display: inline-flex;
+    width: 48%;
+    margin-right: 2%;
+    margin-bottom: 12px;
+  }
+
+  button {
+    width: 250px;
+    display: block;
+    margin: 30px auto 0;
+  }
+}
+
+/* -------- Desktop -------- */
+
+@media (min-width: 1200px) {
+
+  .container {
+    max-width: 900px;
+  }
+
+  label {
+    width: 30%;
+    margin-right: 3%;
+  }
+
+  h2 {
+    font-size: 34px;
+  }
+
+  h3 {
+    font-size: 22px;
+  }
+}
\ No newline at end of file
diff --git a/GuessWho/frontend/src/profile/Profile.jsx b/GuessWho/frontend/src/profile/Profile.jsx
index 53aea55..b80d8db 100644
--- a/GuessWho/frontend/src/profile/Profile.jsx
+++ b/GuessWho/frontend/src/profile/Profile.jsx
@@ -2,81 +2,185 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import './Profile.css';
 
+const programmingLanguages = [
+    'JavaScript',
+    'TypeScript',
+    'Python',
+    'Java',
+    'C#',
+    'C++',
+    'Go'
+];
+
+const softSkills = [
+    'Communication',
+    'Teamwork',
+    'LeaderShip',
+    'Problem Solving',
+    'Adaptability',
+];
+
+const sports = [
+    'Football',
+    'Basketball',
+    'Gym',
+    'Running',
+    'Swimming',
+];
+
+const hobbies = [
+    'Reading',
+    'Gaming',
+    'Music',
+    'Travel',
+    'Cooking',
+];
+
 export default function Profile() {
-  const [fullName, setFullName] = useState('');
-  const [aboutMe, setAboutMe] = useState('');
 
   const navigate = useNavigate();
 
-  const isFormIncomplete =
-    !fullName.trim() || !aboutMe.trim();
+  const [profile, setProfile] = useState({
+    fullName: '',
+    aboutMe: '',
+    programming: [],
+    softSkills: [],
+    sports: [],
+    hobbies: []
+  });
+
+  const handleInput = (e) => {
+    setProfile({
+        ...profile,
+        [e.target.name]: e.target.value,
+    });
+  };
 
-  const handleSubmit = async (e) => {
+  const toggleItem = (field, value) => {
+  const currentItems = profile[field];
+
+  if (currentItems.includes(value)) {
+    setProfile({
+      ...profile,
+      [field]: currentItems.filter((item) => item !== value),
+    });
+  } else {
+    setProfile({
+      ...profile,
+      [field]: [...currentItems, value],
+    });
+  }
+};
+
+  const handleSubmit = (e) => {
     e.preventDefault();
 
-    if (isFormIncomplete) {
-      alert('Please complete all fields.');
-      return;
-    }
-    
-    try {
-      const response = await fetch('/api/profile', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          fullName,
-          aboutMe,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        alert(data.message);
+    if (!profile.fullName || !profile.aboutMe) {
+        alert('Please complete all required fields');
         return;
-      }
-
-      alert('Profile created successfully!');
-      navigate('/dashboard');
-    } catch (error) {
-      console.error(error);
-      alert('Cannot connect to the server.');
     }
-  };
+
+    console.log(profile);
+
+    alert("Profile saved!");
+
+    navigate("/dashboard");
+};
 
   return (
     <div className="container">
       <h2>Create Profile</h2>
 
       <form onSubmit={handleSubmit}>
+
         <input
           type="text"
+          name="fullName"
           placeholder="Full Name"
-          value={fullName}
-          onChange={(e) => setFullName(e.target.value)}
+          value={profile.fullName}
+          onChange={handleInput}
         />
 
-        <br />
-        <br />
-
         <textarea
+          name="aboutMe"
           placeholder="Tell us about yourself..."
-          value={aboutMe}
-          onChange={(e) => setAboutMe(e.target.value)}
+          value={profile.aboutMe}
+          onChange={handleInput}
         />
 
-        <br />
-        <br />
+        <h3>Programming Languages</h3>
+         
+         <div className='checkbox-group'>
+        {programmingLanguages.map((language) => (
+          <label key={language}>
+            <input
+              type="checkbox"
+              checked={profile.programming.includes(language)}
+              onChange={() =>
+              toggleItem("programming", language)
+              }
+            />
+            {language}
+          </label>
+        ))}
+        </div>
+
+        <h3>Soft Skills</h3>
 
-        <button
-          type="submit"
-          disabled={isFormIncomplete}
-        >
+        <div className='checkbox-group'>
+        {softSkills.map((skill) => (
+          <label key={skill}>
+            <input
+              type="checkbox"
+              checked={profile.softSkills.includes(skill)}
+              onChange={() =>
+                toggleItem("softSkills", skill)
+              }
+            />
+            {skill}
+          </label>
+        ))}
+        </div>
+
+        <h3>Sports</h3>
+
+        <div className='checkbox-group'>
+        {sports.map((sport) => (
+          <label key={sport}>
+            <input
+              type="checkbox"
+              checked={profile.sports.includes(sport)}
+              onChange={() =>
+              toggleItem("sports", sport)
+              }
+            />
+            {sport}
+          </label>
+        ))}
+        </div>
+
+        <h3>Hobbies</h3>
+        <div className='checkbox-group'>
+        {hobbies.map((hobby) => (
+          <label key={hobby}>
+            <input
+              type="checkbox"
+              checked={profile.hobbies.includes(hobby)}
+              onChange={() =>
+                toggleItem("hobbies", hobby)
+              }
+            />
+            {hobby}
+          </label>
+        ))}
+        </div>
+
+        <button type="submit">
           Save Profile
         </button>
+
       </form>
     </div>
   );
-}
\ No newline at end of file
+}
+  
\ No newline at end of file

From c39ea43139c9546393e90b568c23cf7d799bc4b9 Mon Sep 17 00:00:00 2001
From: Alex <oleksi.ovsiannikov@gmail.com>
Date: Thu, 9 Jul 2026 15:42:56 +0200
Subject: [PATCH 3/6] Fix CSS scope for Profile page

---
 GuessWho/frontend/src/profile/Profile.css | 54 ++++++++++-------------
 GuessWho/frontend/src/profile/Profile.jsx | 20 +++------
 2 files changed, 31 insertions(+), 43 deletions(-)

diff --git a/GuessWho/frontend/src/profile/Profile.css b/GuessWho/frontend/src/profile/Profile.css
index 6b95fed..a7f2e46 100644
--- a/GuessWho/frontend/src/profile/Profile.css
+++ b/GuessWho/frontend/src/profile/Profile.css
@@ -1,15 +1,4 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  background: #f3f6fb;
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-.container {
+.profile-page {
   width: 100%;
   max-width: 100%;
   margin: 20px auto;
@@ -19,20 +8,25 @@ body {
   box-shadow: 0 5px 20px rgba(0, 0, 0, .08);
 }
 
-h2 {
+.profile-container {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.profile-container h2 {
   text-align: center;
   color: #2563eb;
   margin-bottom: 25px;
 }
 
-h3 {
+.profile-container h3 {
   margin: 20px 0 10px;
   color: #333;
   font-size: 18px;
 }
 
-input[type="text"],
-textarea {
+.profile-container input[type="text"],
+.profile-container textarea {
   width: 100%;
   padding: 14px;
   margin-bottom: 20px;
@@ -42,18 +36,18 @@ textarea {
   transition: .3s;
 }
 
-input[type="text"]:focus,
-textarea:focus {
+.profile-container input[type="text"]:focus,
+.profile-container textarea:focus {
   outline: none;
   border-color: #2563eb;
 }
 
-textarea {
+.profile-container textarea {
   min-height: 120px;
   resize: vertical;
 }
 
-label {
+.profile-container label {
   display: flex;
   align-items: center;
   gap: 10px;
@@ -66,19 +60,19 @@ label {
   transition: .2s;
 }
 
-label:hover {
+.profile-container label:hover {
   background: #e8f0ff;
   border-color: #2563eb;
 }
 
-input[type="checkbox"] {
+.profile-container input[type="checkbox"] {
   width: 18px;
   height: 18px;
   accent-color: #2563eb;
 }
 
-button {
-  width: 100%;
+.profile-container button {
+  width: 50%;
   margin-top: 25px;
   padding: 14px;
   border: none;
@@ -90,7 +84,7 @@ button {
   transition: .3s;
 }
 
-button:hover {
+.profile-container button:hover {
   background: #1d4ed8;
 }
 
@@ -98,19 +92,19 @@ button:hover {
 
 @media (min-width: 768px) {
 
-  .container {
+  .profile-container {
     max-width: 750px;
     padding: 35px;
   }
 
-  label {
+ .profile-container label {
     display: inline-flex;
     width: 48%;
     margin-right: 2%;
     margin-bottom: 12px;
   }
 
-  button {
+  .profile-container button {
     width: 250px;
     display: block;
     margin: 30px auto 0;
@@ -130,11 +124,11 @@ button:hover {
     margin-right: 3%;
   }
 
-  h2 {
+  .profile-container h2 {
     font-size: 34px;
   }
 
-  h3 {
+  .profile-container h3 {
     font-size: 22px;
   }
 }
\ No newline at end of file
diff --git a/GuessWho/frontend/src/profile/Profile.jsx b/GuessWho/frontend/src/profile/Profile.jsx
index b80d8db..9ea0a6a 100644
--- a/GuessWho/frontend/src/profile/Profile.jsx
+++ b/GuessWho/frontend/src/profile/Profile.jsx
@@ -42,7 +42,6 @@ export default function Profile() {
 
   const [profile, setProfile] = useState({
     fullName: '',
-    aboutMe: '',
     programming: [],
     softSkills: [],
     sports: [],
@@ -75,7 +74,7 @@ export default function Profile() {
   const handleSubmit = (e) => {
     e.preventDefault();
 
-    if (!profile.fullName || !profile.aboutMe) {
+    if (!profile.fullName.trim()) {
         alert('Please complete all required fields');
         return;
     }
@@ -88,26 +87,21 @@ export default function Profile() {
 };
 
   return (
-    <div className="container">
+    <div className="profile-page">
+    <div className="profile-container">
+
       <h2>Create Profile</h2>
 
       <form onSubmit={handleSubmit}>
-
+        <h3>Player Name</h3>
         <input
           type="text"
           name="fullName"
-          placeholder="Full Name"
+          placeholder="Enter your player name"
           value={profile.fullName}
           onChange={handleInput}
         />
 
-        <textarea
-          name="aboutMe"
-          placeholder="Tell us about yourself..."
-          value={profile.aboutMe}
-          onChange={handleInput}
-        />
-
         <h3>Programming Languages</h3>
          
          <div className='checkbox-group'>
@@ -178,8 +172,8 @@ export default function Profile() {
         <button type="submit">
           Save Profile
         </button>
-
       </form>
+      </div>
     </div>
   );
 }

From 2e68e8ac2e3e8e4114d617897551d3728c640c56 Mon Sep 17 00:00:00 2001
From: Alex <oleksi.ovsiannikov@gmail.com>
Date: Fri, 10 Jul 2026 14:00:11 +0200
Subject: [PATCH 4/6] refactor: extract reusable Container component

---
 GuessWho/frontend/src/components/Container/Container.jsx | 9 +++++++++
 .../src/components/Container/Container.module.css        | 4 ++++
 2 files changed, 13 insertions(+)
 create mode 100644 GuessWho/frontend/src/components/Container/Container.jsx
 create mode 100644 GuessWho/frontend/src/components/Container/Container.module.css

diff --git a/GuessWho/frontend/src/components/Container/Container.jsx b/GuessWho/frontend/src/components/Container/Container.jsx
new file mode 100644
index 0000000..62db307
--- /dev/null
+++ b/GuessWho/frontend/src/components/Container/Container.jsx
@@ -0,0 +1,9 @@
+import styles from "./Container.module.css";
+
+export default function Container({ children, className = "" }) {
+  return (
+    <div className={`${styles.container} ${className}`}>
+      {children}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/GuessWho/frontend/src/components/Container/Container.module.css b/GuessWho/frontend/src/components/Container/Container.module.css
new file mode 100644
index 0000000..73b11fa
--- /dev/null
+++ b/GuessWho/frontend/src/components/Container/Container.module.css
@@ -0,0 +1,4 @@
+.container {
+  max-width: 900px;
+  margin: 0 auto;
+}
\ No newline at end of file

From fadcaee40387a8e3088e0ddd9fb1125dcf59964c Mon Sep 17 00:00:00 2001
From: Alex <oleksi.ovsiannikov@gmail.com>
Date: Fri, 10 Jul 2026 18:39:22 +0200
Subject: [PATCH 5/6] refactor: simplify Container component

---
 GuessWho/frontend/src/components/Container/Container.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/GuessWho/frontend/src/components/Container/Container.jsx b/GuessWho/frontend/src/components/Container/Container.jsx
index 62db307..97135d1 100644
--- a/GuessWho/frontend/src/components/Container/Container.jsx
+++ b/GuessWho/frontend/src/components/Container/Container.jsx
@@ -1,8 +1,8 @@
 import styles from "./Container.module.css";
 
-export default function Container({ children, className = "" }) {
+export default function Container({ children }) {
   return (
-    <div className={`${styles.container} ${className}`}>
+    <div className={`${styles.container}`}>
       {children}
     </div>
   );

From 93a68b9c2a2d4966eb1d340205b1517da53608ab Mon Sep 17 00:00:00 2001
From: Alex <oleksi.ovsiannikov@gmail.com>
Date: Fri, 10 Jul 2026 18:46:54 +0200
Subject: [PATCH 6/6] refactor: migrate Profile to CSS Modules

---
 GuessWho/frontend/src/profile/Profile.jsx     |  17 +--
 .../{Profile.css => Profile.module.css}       | 101 +++++++++---------
 2 files changed, 58 insertions(+), 60 deletions(-)
 rename GuessWho/frontend/src/profile/{Profile.css => Profile.module.css} (67%)

diff --git a/GuessWho/frontend/src/profile/Profile.jsx b/GuessWho/frontend/src/profile/Profile.jsx
index 9ea0a6a..685153b 100644
--- a/GuessWho/frontend/src/profile/Profile.jsx
+++ b/GuessWho/frontend/src/profile/Profile.jsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import './Profile.css';
+import styles from './Profile.module.css';
+import Container from "../components/Container/Container";
 
 const programmingLanguages = [
     'JavaScript',
@@ -87,8 +88,8 @@ export default function Profile() {
 };
 
   return (
-    <div className="profile-page">
-    <div className="profile-container">
+    <div className={styles.profilePage}>
+    <Container className={styles.profileContainer}>
 
       <h2>Create Profile</h2>
 
@@ -104,7 +105,7 @@ export default function Profile() {
 
         <h3>Programming Languages</h3>
          
-         <div className='checkbox-group'>
+         <div className={styles.checkboxGroup}>
         {programmingLanguages.map((language) => (
           <label key={language}>
             <input
@@ -121,7 +122,7 @@ export default function Profile() {
 
         <h3>Soft Skills</h3>
 
-        <div className='checkbox-group'>
+        <div className={styles.checkboxGroup}>
         {softSkills.map((skill) => (
           <label key={skill}>
             <input
@@ -138,7 +139,7 @@ export default function Profile() {
 
         <h3>Sports</h3>
 
-        <div className='checkbox-group'>
+        <div className={styles.checkboxGroup}>
         {sports.map((sport) => (
           <label key={sport}>
             <input
@@ -154,7 +155,7 @@ export default function Profile() {
         </div>
 
         <h3>Hobbies</h3>
-        <div className='checkbox-group'>
+       <div className={styles.checkboxGroup}>
         {hobbies.map((hobby) => (
           <label key={hobby}>
             <input
@@ -173,7 +174,7 @@ export default function Profile() {
           Save Profile
         </button>
       </form>
-      </div>
+      </Container>
     </div>
   );
 }
diff --git a/GuessWho/frontend/src/profile/Profile.css b/GuessWho/frontend/src/profile/Profile.module.css
similarity index 67%
rename from GuessWho/frontend/src/profile/Profile.css
rename to GuessWho/frontend/src/profile/Profile.module.css
index a7f2e46..91e89eb 100644
--- a/GuessWho/frontend/src/profile/Profile.css
+++ b/GuessWho/frontend/src/profile/Profile.module.css
@@ -1,6 +1,5 @@
-.profile-page {
+.profilePage{
   width: 100%;
-  max-width: 100%;
   margin: 20px auto;
   padding: 20px;
   background: #fff;
@@ -8,25 +7,49 @@
   box-shadow: 0 5px 20px rgba(0, 0, 0, .08);
 }
 
-.profile-container {
-  max-width: 900px;
-  margin: 0 auto;
+.profileContainer{
+    padding: 20px;
 }
-
-.profile-container h2 {
+.profileContainer h2 {
   text-align: center;
   color: #2563eb;
   margin-bottom: 25px;
 }
 
-.profile-container h3 {
+.profileContainer h3 {
   margin: 20px 0 10px;
   color: #333;
   font-size: 18px;
 }
 
-.profile-container input[type="text"],
-.profile-container textarea {
+.profileContainer button {
+  width: 50%;
+  margin-top: 25px;
+  padding: 14px;
+  border: none;
+  border-radius: 10px;
+  background: #2563eb;
+  color: white;
+  font-size: 17px;
+  cursor: pointer;
+  transition: .3s;
+}
+
+.profileContainer label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  margin-bottom: 10px;
+  background: #f8f9fc;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: .2s;
+}
+
+.profileContainer input[type="text"],
+.profileContainer textarea {
   width: 100%;
   padding: 14px;
   margin-bottom: 20px;
@@ -36,75 +59,53 @@
   transition: .3s;
 }
 
-.profile-container input[type="text"]:focus,
-.profile-container textarea:focus {
+.profileContainer input[type="text"]:focus,
+.profileContainer textarea:focus {
   outline: none;
   border-color: #2563eb;
 }
 
-.profile-container textarea {
+.profileContainer textarea {
   min-height: 120px;
   resize: vertical;
 }
 
-.profile-container label {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px;
-  margin-bottom: 10px;
-  background: #f8f9fc;
-  border: 1px solid #ddd;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: .2s;
-}
 
-.profile-container label:hover {
+.profileContainer label:hover {
   background: #e8f0ff;
   border-color: #2563eb;
 }
 
-.profile-container input[type="checkbox"] {
+.profileContainer input[type="checkbox"] {
   width: 18px;
   height: 18px;
   accent-color: #2563eb;
 }
 
-.profile-container button {
-  width: 50%;
-  margin-top: 25px;
-  padding: 14px;
-  border: none;
-  border-radius: 10px;
-  background: #2563eb;
-  color: white;
-  font-size: 17px;
-  cursor: pointer;
-  transition: .3s;
-}
 
-.profile-container button:hover {
+.profileContainer button:hover {
   background: #1d4ed8;
 }
 
+.checkboxGroup {
+  margin-bottom: 20px;
+}
+
 /* ---------- Tablet ------ */
 
 @media (min-width: 768px) {
-
-  .profile-container {
-    max-width: 750px;
+.profileContainer {
     padding: 35px;
   }
 
- .profile-container label {
+.profileContainer label {
     display: inline-flex;
     width: 48%;
     margin-right: 2%;
     margin-bottom: 12px;
   }
 
-  .profile-container button {
+.profileContainer button {
     width: 250px;
     display: block;
     margin: 30px auto 0;
@@ -115,20 +116,16 @@
 
 @media (min-width: 1200px) {
 
-  .container {
-    max-width: 900px;
-  }
-
-  label {
+  .profileContainer label {
     width: 30%;
     margin-right: 3%;
   }
 
-  .profile-container h2 {
+  .profileContainer h2 {
     font-size: 34px;
   }
 
-  .profile-container h3 {
+  .profileContainer h3 {
     font-size: 22px;
   }
 }
\ No newline at end of file