diff --git a/frontend/sportsmatch-app/assets/female.png b/frontend/sportsmatch-app/assets/female.png
new file mode 100644
index 00000000..346738e0
Binary files /dev/null and b/frontend/sportsmatch-app/assets/female.png differ
diff --git a/frontend/sportsmatch-app/assets/male.png b/frontend/sportsmatch-app/assets/male.png
new file mode 100644
index 00000000..440d28b8
Binary files /dev/null and b/frontend/sportsmatch-app/assets/male.png differ
diff --git a/frontend/sportsmatch-app/src/App.tsx b/frontend/sportsmatch-app/src/App.tsx
index 53f0366d..5dcc8913 100644
--- a/frontend/sportsmatch-app/src/App.tsx
+++ b/frontend/sportsmatch-app/src/App.tsx
@@ -4,6 +4,7 @@ import Home from './pages/Home'
 import Test from './pages/Test'
 import Login from './pages/Login'
 import Signup from './pages/Signup'
+import NewUser from './pages/NewUser'
 
 function App() {
   return (
@@ -12,6 +13,7 @@ function App() {
         <Routes>
           <Route path="login" element={<Login />} />
           <Route path="signup" element={<Signup />} />
+          <Route path="newuser" element={<NewUser />} />
           <Route path="test" element={<Test />}>
             <Route index element={<Test />} />
             <Route path=":testId" element={<Test />} />
diff --git a/frontend/sportsmatch-app/src/components/LoginComponent.tsx b/frontend/sportsmatch-app/src/components/LoginComponent.tsx
index 09dd8b98..318dbb49 100644
--- a/frontend/sportsmatch-app/src/components/LoginComponent.tsx
+++ b/frontend/sportsmatch-app/src/components/LoginComponent.tsx
@@ -3,20 +3,20 @@ import { FaMailBulk, FaLock, FaGoogle, FaFacebook } from 'react-icons/fa'
 
 function LoginComponent() {
   return (
-    <div className="wrapper">
+    <div className="wrapper-login">
       <form action="">
         <h1>Log in</h1>
-        <div className="input-box">
+        <div className="login-input-box">
           <label htmlFor="email"></label>
           <input type="email" placeholder="E-mail addres" required />
           <FaMailBulk className="icon" />
         </div>
-        <div className="input-box">
+        <div className="login-input-box">
           <label htmlFor="password"></label>
           <input type="password" placeholder="password" required />
           <FaLock className="icon" />
         </div>
-        <div className="remember-forgot">
+        <div className="login-remember-forgot">
           <label>
             <input type="checkbox" />
             Remember me{' '}
@@ -25,9 +25,9 @@ function LoginComponent() {
         </div>
 
         <button type="submit">Log in</button>
-        <div className="register-link">
+        <div className="login-register-link">
           <p>
-            Dont have an account <a href="signup">Register</a>
+            Dont have an account <a href="signup">REEGISTER</a>
           </p>
         </div>
         <p className="alt-login-text">Or log in using</p>
diff --git a/frontend/sportsmatch-app/src/components/NewUserComponent.tsx b/frontend/sportsmatch-app/src/components/NewUserComponent.tsx
new file mode 100644
index 00000000..8b98bcfe
--- /dev/null
+++ b/frontend/sportsmatch-app/src/components/NewUserComponent.tsx
@@ -0,0 +1,7 @@
+import '../styles/NewUserComponent.css'
+
+function NewUserComponent() {
+  return <div className="wrapper"></div>
+}
+
+export default NewUserComponent
diff --git a/frontend/sportsmatch-app/src/components/NewUserGenderComponent.tsx b/frontend/sportsmatch-app/src/components/NewUserGenderComponent.tsx
new file mode 100644
index 00000000..7347dc18
--- /dev/null
+++ b/frontend/sportsmatch-app/src/components/NewUserGenderComponent.tsx
@@ -0,0 +1,33 @@
+import '../styles/NewUserComponent.css'
+
+function NewUserGenderComponent() {
+  return (
+    <div className="wrapper">
+      <form action="">
+        <div className="gender">
+          <p>Select your gender</p>
+          <div className="male-female">
+            <a href="">
+              <div className="parent-male">
+                <img className="img-male" src="./assets/male.png" alt="male" />
+                <div className="male"></div>
+              </div>
+            </a>
+            <a href="">
+              <div className="parent-female">
+                <img
+                  className="img-female"
+                  src="./assets/female.png"
+                  alt="female"
+                />
+                <div className="female"></div>
+              </div>
+            </a>
+          </div>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export default NewUserGenderComponent
diff --git a/frontend/sportsmatch-app/src/components/NewUserInputComponent.tsx b/frontend/sportsmatch-app/src/components/NewUserInputComponent.tsx
new file mode 100644
index 00000000..aaf98f8d
--- /dev/null
+++ b/frontend/sportsmatch-app/src/components/NewUserInputComponent.tsx
@@ -0,0 +1,22 @@
+import '../styles/NewUserComponent.css'
+import { FaRegUser, FaRegCalendarAlt } from 'react-icons/fa'
+
+function NewUserInputComponent() {
+  return (
+    <div className="newUser-wrapper">
+      <form action="">
+        <h1>Profile</h1>
+        <div className="newUser-input-box">
+          <input type="text" placeholder="Enter Username" required />
+          <FaRegUser className="newUser-icon" />
+        </div>
+        <div className="newUser-input-box">
+          <input type="text" placeholder="Enter Date of Birth" required />
+          <FaRegCalendarAlt className="newUser-icon" />
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export default NewUserInputComponent
diff --git a/frontend/sportsmatch-app/src/components/NewUserRegistrationButtonComponent.tsx b/frontend/sportsmatch-app/src/components/NewUserRegistrationButtonComponent.tsx
new file mode 100644
index 00000000..986920e3
--- /dev/null
+++ b/frontend/sportsmatch-app/src/components/NewUserRegistrationButtonComponent.tsx
@@ -0,0 +1,15 @@
+import '../styles/NewUserComponent.css'
+
+function NewUserRegistrationButtonComponent() {
+  return (
+    <div className="wrapper">
+      <form action="">
+        <button className="save" type="submit">
+          Save profile
+        </button>
+      </form>
+    </div>
+  )
+}
+
+export default NewUserRegistrationButtonComponent
diff --git a/frontend/sportsmatch-app/src/components/SignupComponent.tsx b/frontend/sportsmatch-app/src/components/SignupComponent.tsx
index 9a62bacf..7aca5cb0 100644
--- a/frontend/sportsmatch-app/src/components/SignupComponent.tsx
+++ b/frontend/sportsmatch-app/src/components/SignupComponent.tsx
@@ -1,31 +1,31 @@
-import '../styles/LoginComponent.css'
+import '../styles/SignupComponent.css'
 import { FaLock, FaMailBulk } from 'react-icons/fa'
 
 function SignupComponent() {
   return (
-    <div className="wrapper">
+    <div className="signup-wrapper">
       <form action="">
         <h1>Sign up</h1>
-        <div className="input-box">
+        <div className="signup-input-box">
           <label htmlFor="email"></label>
           <input type="email" placeholder="E-mail addres" required />
-          <FaMailBulk className="icon" />
+          <FaMailBulk className="signup-icon" />
         </div>
-        <div className="input-box">
+        <div className="signup-input-box">
           <label htmlFor="password"></label>
           <input type="password" placeholder="password" required />
-          <FaLock className="icon" />
+          <FaLock className="signup-icon" />
         </div>
-        <div className="input-box">
+        <div className="signup-input-box">
           <label htmlFor="confirm-password"></label>
           <input
             type="confirm-password"
             placeholder="confirm password"
             required
           />
-          <FaLock className="icon" />
+          <FaLock className="signup-icon" />
         </div>
-        <div className="remember-forgot">
+        <div className="signup-remember-forgot">
           <a href="login">Allready have an account? Log in here.</a>
         </div>
 
diff --git a/frontend/sportsmatch-app/src/components/SportsButtonComponent.tsx b/frontend/sportsmatch-app/src/components/SportsButtonComponent.tsx
new file mode 100644
index 00000000..9f98feae
--- /dev/null
+++ b/frontend/sportsmatch-app/src/components/SportsButtonComponent.tsx
@@ -0,0 +1,101 @@
+import { useState } from 'react'
+import '../styles/NewUserComponent.css'
+
+function SportsButtonComponent() {
+  const [selectedButtons, setSelectedButtons] = useState<string[]>([])
+
+  const handleCheckboxChange = (buttonText: string) => {
+    if (selectedButtons.includes(buttonText)) {
+      setSelectedButtons(
+        selectedButtons.filter((button) => button !== buttonText),
+      )
+    } else {
+      setSelectedButtons([...selectedButtons, buttonText])
+    }
+  }
+
+  return (
+    <div className="wrapper">
+      <form action="">
+        <p>Select your sports</p>
+        <div className="sports-container">
+          <label>
+            <input
+              type="checkbox"
+              className="sports-checkbox"
+              checked={selectedButtons.includes('Tennis')}
+              onChange={() => handleCheckboxChange('Tennis')}
+            />
+            <span className="sports-button">🥎 Tennis</span>
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              className="sports-checkbox"
+              checked={selectedButtons.includes('Gym')}
+              onChange={() => handleCheckboxChange('Gym')}
+            />
+            <span className="sports-button">🏋 Gym</span>
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              className="sports-checkbox"
+              checked={selectedButtons.includes('Golf')}
+              onChange={() => handleCheckboxChange('Golf')}
+            />
+            <span className="sports-button">🏌🏽 Golf</span>
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              className="sports-checkbox"
+              checked={selectedButtons.includes('Bowling')}
+              onChange={() => handleCheckboxChange('Bowling')}
+            />
+            <span className="sports-button">🎳 Bowling</span>
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              className="sports-checkbox"
+              checked={selectedButtons.includes('Running')}
+              onChange={() => handleCheckboxChange('Running')}
+            />
+            <span className="sports-button">🏃 Running</span>
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              className="sports-checkbox"
+              checked={selectedButtons.includes('Bicycle')}
+              onChange={() => handleCheckboxChange('Bicycle')}
+            />
+            <span className="sports-button">🚴‍♀️ Bicycle</span>
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              className="sports-checkbox"
+              checked={selectedButtons.includes('Boxing')}
+              onChange={() => handleCheckboxChange('Boxing')}
+            />
+            <span className="sports-button">🥊 Boxing</span>
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              className="sports-checkbox"
+              checked={selectedButtons.includes('Ping pong')}
+              onChange={() => handleCheckboxChange('Ping pong')}
+            />
+            <span className="sports-button">🏓 Ping pong</span>
+          </label>
+          <button id="more-sports-button">.&nbsp;&nbsp;.&nbsp;&nbsp;.</button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export default SportsButtonComponent
diff --git a/frontend/sportsmatch-app/src/pages/NewUser.tsx b/frontend/sportsmatch-app/src/pages/NewUser.tsx
new file mode 100644
index 00000000..f3c93058
--- /dev/null
+++ b/frontend/sportsmatch-app/src/pages/NewUser.tsx
@@ -0,0 +1,20 @@
+import NewUserComponent from '../components/NewUserComponent'
+import NewUserInputComponent from '../components/NewUserInputComponent'
+import NewUserGenderComponent from '../components/NewUserGenderComponent'
+import SportsButtonComponent from '../components/SportsButtonComponent'
+import NewUserRegistrationButtonComponent from '../components/NewUserRegistrationButtonComponent'
+import '../styles/NewUserComponent.css'
+
+export default function NewUser() {
+  return (
+    <div className="wrapper-frame">
+      <div className="components-container">
+        <NewUserComponent />
+        <NewUserInputComponent />
+        <NewUserGenderComponent />
+        <SportsButtonComponent />
+        <NewUserRegistrationButtonComponent />
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/sportsmatch-app/src/styles/LoginComponent.css b/frontend/sportsmatch-app/src/styles/LoginComponent.css
index b9e5e6f2..6e7b0a1b 100644
--- a/frontend/sportsmatch-app/src/styles/LoginComponent.css
+++ b/frontend/sportsmatch-app/src/styles/LoginComponent.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;900&display=swap');
 
 * {
   margin: 0;
@@ -6,8 +6,8 @@
   box-sizing: border-box;
 }
 
-.wrapper {
-  width: 330px;
+.wrapper-login {
+  width: 430px;
   background: #fff;
   border: 2px solid rgba(65, 58, 58, 0.2);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
@@ -17,20 +17,20 @@
   padding: 30px 20px;
 }
 
-.wrapper h1 {
+.wrapper-login h1 {
   color: #e85f29;
   font-size: 36px;
   text-align: center;
 }
 
-.wrapper .input-box {
+.login-input-box {
   position: relative;
   width: 100%;
   height: 40px;
   margin: 30px 0;
 }
 
-.input-box input {
+.login-input-box input {
   width: 100%;
   height: 100%;
   border: 1px solid rgba(65, 58, 58, 0.2);
@@ -39,44 +39,55 @@
   padding: 20px 45px 20px 20px;
 }
 
-.input-box input::placeholder {
+.login-input-box input::placeholder {
   color: #ccc;
+  font-size: 15px;
 }
 
-.input-box input:focus {
+.login-input-box input:focus {
   outline-color: #e85f29;
 }
 
-.input-box .icon {
+.login-input-box .icon {
   position: absolute;
   right: 20px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 16px;
+  color: #a1a0a0;
 }
 
-.wrapper .remember-forgot {
+.login-remember-forgot {
   display: flex;
   justify-content: space-between;
   font-size: 14px;
   margin: -15px 0 15px;
 }
 
-.remember-forgot label input {
-  accent-color: #ccc;
+.login-remember-forgot input {
+  position: relative;
+  top: 4px;
+  width: 20px;
+  height: 20px;
+}
+
+.login-remember-forgot label input {
+  accent-color: #e85f29;
   margin-right: 4px;
 }
 
-.remember-forgot a {
+.login-remember-forgot a {
+  position: relative;
+  top: 4px;
   color: #ccc;
   text-decoration: none;
 }
 
-.remember-forgot a:hover {
+.login-remember-forgot a:hover {
   text-decoration: underline;
 }
 
-.wrapper button {
+.wrapper-login button {
   width: 100%;
   height: 45px;
   background: #e85f29;
@@ -87,26 +98,26 @@
   cursor: pointer;
   font-size: 16px;
   color: #fff;
-  font-weight: 700;
+  font-weight: 600;
 }
 
-.wrapper button:hover {
+.wrapper-login button:hover {
   transform: scale(1.05);
 }
 
-.wrapper .register-link {
+.login-register-link {
   font-size: 14px;
   text-align: center;
   margin: 20px 0 15px;
 }
 
-.register-link p a {
+.login-register-link  p a {
   color: #ccc;
   text-decoration: none;
-  font-weight: 600;
+  font-weight: 500;
 }
 
-.register-link p a:hover {
+.login-register-link p a:hover {
   text-decoration: underline;
 }
 
diff --git a/frontend/sportsmatch-app/src/styles/NewUserComponent.css b/frontend/sportsmatch-app/src/styles/NewUserComponent.css
new file mode 100644
index 00000000..264cb295
--- /dev/null
+++ b/frontend/sportsmatch-app/src/styles/NewUserComponent.css
@@ -0,0 +1,191 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;900&display=swap');
+
+.newUser-wrapper h1 {
+  color: #e85f29;
+  font-size: 36px;
+  text-align: center;
+}
+
+.newUser-input-box {
+  position: relative;
+  width: 100%;
+  height: 30px;
+  margin: 20px 0;
+  margin: 0 0 40px 0;
+}
+
+.newUser-input-box input {
+  width: 100%;
+  height: 100%;
+  border: 1px solid rgba(65, 58, 58, 0.2);
+  border-radius: 40px;
+  font-size: 13px;
+  padding: 20px 45px 20px 20px;
+}
+
+.newUser-input-box input::placeholder {
+  color: #ccc;
+  font-size: 15px;
+}
+
+.newUser-input-box input:focus {
+  outline-color: #e85f29;
+}
+
+.newUser-input-box .newUser-icon {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  font-size: 16px;
+  color: #a1a0a0;
+}
+
+.wrapper .gender {
+  font-size: 16px;
+  margin: -15px 0 15px;
+}
+
+.male-female {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  margin: 10px 15px 15px;
+}
+
+.parent-male {
+  position: relative;
+  top: 0;
+  left: 0;
+}
+
+.parent-female {
+  position: relative;
+  top: 0;
+  left: 0;
+}
+
+.male {
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 120px;
+  height: 130px;
+  border-radius: 30px;
+  background: #e85f29;
+  z-index: 1;
+}
+
+.female {
+  width: 120px;
+  height: 130px;
+  border-radius: 30px;
+  background: #e85f29;
+}
+
+.img-male {
+  position: absolute;
+  top: 10px;
+  left: 9px;
+  width: 100px;
+  z-index: 2;
+}
+
+.img-female {
+  position: absolute;
+  top: 10px;
+  left: 9px;
+  width: 100px;
+  z-index: 2;
+}
+
+.wrapper button {
+  width: 100%;
+  height: 45px;
+  background: #e85f29;
+  border: none;
+  outline: none;
+  border-radius: 40px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  font-size: 16px;
+  color: #fff;
+  font-weight: 600;
+  margin: 20px 0;
+}
+
+.sports-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-content: stretch;
+}
+
+.sports-checkbox {
+  display: none;
+}
+
+.sports-button {
+  display: inline-block;
+  padding: 10px;
+  border: none;
+  background-color: #2c2b2b;
+  color: #ffffff;
+  border-radius: 30px;
+  cursor: pointer;
+  margin: 3px;
+}
+
+.sports-checkbox:checked + .sports-button {
+  background-color: #e85f29;
+  color: #fff;
+}
+
+#more-sports-button {
+  width: 80px;
+  display: inline-block;
+  padding: 10px;
+  border: none;
+  background-color: #2c2b2b;
+  color: #ffffff;
+  border-radius: 30px;
+  cursor: pointer;
+  margin: 3px;
+  transform: scale(1.05);
+}
+
+.wrapper .parent-male:hover {
+  transform: scale(1.05);
+}
+
+.wrapper .parent-female:hover {
+  transform: scale(1.05);
+}
+
+.wrapper button:hover {
+  transform: scale(1.05);
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: #e9e6e6;
+  background-size: cover;
+  background-position: center;
+}
+
+p {
+  margin: 20px 20px 15px 0;
+}
+
+.wrapper-frame {
+  width: 430px;
+  background: #fff;
+  border: 2px solid rgba(65, 58, 58, 0.2);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(30px);
+  color: #ccc;
+  border-radius: 10px;
+  padding: 30px 20px;
+}
diff --git a/frontend/sportsmatch-app/src/styles/SignupComponent.css b/frontend/sportsmatch-app/src/styles/SignupComponent.css
new file mode 100644
index 00000000..dd8feaf9
--- /dev/null
+++ b/frontend/sportsmatch-app/src/styles/SignupComponent.css
@@ -0,0 +1,96 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;900&display=swap');
+
+.signup-wrapper {
+  width: 430px;
+  background: #fff;
+  border: 2px solid rgba(65, 58, 58, 0.2);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(30px);
+  color: #ccc;
+  border-radius: 10px;
+  padding: 30px 20px;
+}
+
+.signup-wrapper h1 {
+  color: #e85f29;
+  font-size: 36px;
+  text-align: center;
+}
+
+.signup-input-box {
+  position: relative;
+  width: 100%;
+  height: 40px;
+  margin: 30px 0;
+}
+
+.signup-input-box input {
+  width: 100%;
+  height: 100%;
+  border: 1px solid rgba(65, 58, 58, 0.2);
+  border-radius: 40px;
+  font-size: 13px;
+  padding: 20px 45px 20px 20px;
+}
+
+.signup-input-box input::placeholder {
+  color: #ccc;
+  font-size: 15px;
+}
+
+.signup-input-box input:focus {
+  outline-color: #e85f29;
+}
+
+.signup-icon {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 16px;
+  color: #a1a0a0;
+}
+
+.signup-wrapper button {
+  width: 100%;
+  height: 45px;
+  background: #e85f29;
+  border: none;
+  outline: none;
+  border-radius: 40px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  font-size: 16px;
+  color: #fff;
+  font-weight: 600;
+}
+
+.signup-wrapper button:hover {
+  transform: scale(1.05);
+}
+
+.signup-remember-forgot {
+  font-size: 14px;
+  text-align: center;
+  margin: 20px 0 15px;
+}
+
+.signup-remember-forgot a {
+  color: #ccc;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.signup-remember-forgot a:hover {
+  text-decoration: underline;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: #e9e6e6;
+  background-size: cover;
+  background-position: center;
+}
diff --git a/frontend/sportsmatch-app/tsconfig.json b/frontend/sportsmatch-app/tsconfig.json
index fdd48200..5c490dd4 100644
--- a/frontend/sportsmatch-app/tsconfig.json
+++ b/frontend/sportsmatch-app/tsconfig.json
@@ -18,7 +18,7 @@
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true
   },
   "include": ["src",".src/test/setup.ts"],