diff --git a/web-client/public/index.html b/web-client/public/index.html
index 9704bad..5fd9794 100644
--- a/web-client/public/index.html
+++ b/web-client/public/index.html
@@ -26,6 +26,8 @@
     -->
     <title>React App</title>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/web-client/src/App.js b/web-client/src/App.js
index e4079c3..1c08267 100644
--- a/web-client/src/App.js
+++ b/web-client/src/App.js
@@ -6,7 +6,9 @@ import './global.css';
 function App() {
   return (
     <div>
-      <header>This is the header</header>
+      <header className="site-header">
+        <h1><a href="/" className="site-header-heading">FSWD</a></h1>
+      </header>
       <main>
         <Outlet />
       </main>
diff --git a/web-client/src/pages/signup.js b/web-client/src/pages/signup.js
new file mode 100644
index 0000000..cfb782c
--- /dev/null
+++ b/web-client/src/pages/signup.js
@@ -0,0 +1,60 @@
+import '../components/signup.css';
+import '../global.css';
+
+export default function Signup(){
+    return (
+        <>
+
+    <main>
+      <nav aria-label="breadcrumb" className="breadcrumb">
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><span aria-current="page">Sign-up</span></li>
+        </ul>
+      </nav>
+      <div id="main-container">
+        <form action="https://jsonplaceholder.typicode.com/users" method="POST" id="sign-up-form">
+          <div className="form-group">
+            <label for="sign-up-form-name">Name</label>
+            <input type="text" id="sign-up-form-name" name="name" required/>
+          </div>
+          <div className="form-group">
+            <label for="sign-up-form-email">Email</label>
+            <input type="email" name="email" required id="sign-up-form-email"/>
+          </div>
+          <div className="form-group">
+            <label for="sign-up-form-password">Password</label>
+            <input type="password" name="password" id="sign-up-form-password"/>
+          </div>
+          <div className="form-group">
+            <label for="sign-up-form-dob">Date of Birth</label>
+            <input type="date" name="dateOfBirth" id="sign-up-form-dob"/>
+          </div>
+          <div className="form-group">
+            <label>Notification Preference</label>
+            <label><input type="radio" name="notificationPreference"/> Email</label>
+            <label><input type="radio" name="notificationPreference"/> Phone</label>
+            <label><input type="radio" name="notificationPreference"/> None</label>
+          </div>
+          
+          <div className="form-group">
+            <label for="sign-up-form-bio">Write About Yourself</label>
+            <textarea name="biography" id="sign-up-form-bio" rows="3"></textarea>
+          </div>
+          <div className="form-group">
+            <div>
+              <label><input type="checkbox" name="agreeToTerms" value="true"/> I agree to the terms and conditions</label>
+            </div>
+            <div>
+              <label><input type="checkbox" name="subscribeToNewsLetter"/> Subscribe to newsletter</label>
+            </div>
+          </div>
+          <div>
+            <input type="submit" value="Sign Up"/>
+          </div>
+        </form>
+      </div>
+    </main>
+    </>
+    );
+}
\ No newline at end of file
diff --git a/web-client/src/routes.js b/web-client/src/routes.js
index cadb0bf..03045f2 100644
--- a/web-client/src/routes.js
+++ b/web-client/src/routes.js
@@ -2,6 +2,7 @@ import React from 'react';
 import App from './App';
 import ResetPasswordForm from './components/reset-password-form';
 import Messages from './pages/messages';
+import Signup from './pages/signup';
 
 const routes = [
   {
@@ -19,6 +20,10 @@ const routes = [
       {
         path: '/messages',
         element: <Messages />
+      },
+      {
+        path: '/signup',
+        element: <Signup/>
       }
     ]
   },
