diff --git a/frontend/package.json b/frontend/package.json
index e03bc04..d850234 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,6 +16,9 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@fullcalendar/core": "^6.1.9",
     "@fullcalendar/daygrid": "^6.1.9",
     "@fullcalendar/interaction": "^6.1.9",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index acf0447..2bce532 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -23,6 +23,15 @@ dependencies:
   '@emotion/styled':
     specifier: ^11.11.0
     version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.37)(react@18.2.0)
+  '@fortawesome/fontawesome-svg-core':
+    specifier: ^6.4.2
+    version: 6.4.2
+  '@fortawesome/free-brands-svg-icons':
+    specifier: ^6.4.2
+    version: 6.4.2
+  '@fortawesome/react-fontawesome':
+    specifier: ^0.2.0
+    version: 0.2.0(@fortawesome/fontawesome-svg-core@6.4.2)(react@18.2.0)
   '@fullcalendar/core':
     specifier: ^6.1.9
     version: 6.1.9
@@ -820,6 +829,39 @@ packages:
     resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
     dev: false
 
+  /@fortawesome/fontawesome-common-types@6.4.2:
+    resolution: {integrity: sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dev: false
+
+  /@fortawesome/fontawesome-svg-core@6.4.2:
+    resolution: {integrity: sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 6.4.2
+    dev: false
+
+  /@fortawesome/free-brands-svg-icons@6.4.2:
+    resolution: {integrity: sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 6.4.2
+    dev: false
+
+  /@fortawesome/react-fontawesome@0.2.0(@fortawesome/fontawesome-svg-core@6.4.2)(react@18.2.0):
+    resolution: {integrity: sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==}
+    peerDependencies:
+      '@fortawesome/fontawesome-svg-core': ~1 || ~6
+      react: '>=16.3'
+    dependencies:
+      '@fortawesome/fontawesome-svg-core': 6.4.2
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
   /@fullcalendar/core@6.1.9:
     resolution: {integrity: sha512-eeG+z9BWerdsU9Ac6j16rpYpPnE0wxtnEHiHrh/u/ADbGTR3hCOjCD9PxQOfhOTHbWOVs7JQunGcksSPu5WZBQ==}
     dependencies:
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index ad9dc97..c4b93eb 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -12,6 +12,7 @@ import IconSideNav from "./components/navigations/IconSideNav";
 import Eisenhower from "./components/eisenhowerMatrix/Eisenhower";
 import PrivateRoute from "./PrivateRoute";
 import ProfileUpdatePage from "./components/profilePage";
+import Signup from "./components/signup/Signup";
 
 
 const App = () => {
@@ -43,6 +44,7 @@ const App = () => {
             <Route path="/login" element={<LoginPage />} />
             <Route path="/signup" element={<SignUpPage />} />
           </Routes>
+          <Signup/>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/signup/Signup.jsx b/frontend/src/components/signup/Signup.jsx
new file mode 100644
index 0000000..3958feb
--- /dev/null
+++ b/frontend/src/components/signup/Signup.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGoogle, faGithub } from '@fortawesome/free-brands-svg-icons';
+
+function Signup() {
+    return (
+        <div className="flex items-center justify-center h-screen">
+            <div className="flex flex-col items-center bg-white p-10 rounded-lg shadow-md">
+                <h1 className="text-4xl font-semibold mb-6">Create your account</h1>
+                <p className="text-gray-700 mb-6 text-lg">
+                    Start spending more time on your own table.
+                </p>
+                <div className='font-bold'>
+                    <div className="mb-4">
+                        <button className="flex items-center justify-center bg-blue-500 text-white px-14 py-3 rounded-lg">
+                            <span className="mr-3"><FontAwesomeIcon icon={faGoogle} /></span>
+                            Sign Up with Google
+                        </button>
+                    </div>
+
+                    <div className="mb-4">
+                        <button className="flex items-center justify-center bg-gray-800 text-white px-14 py-3 rounded-lg">
+                            <span className="mr-3"><FontAwesomeIcon icon={faGithub} /></span>
+                            Sign Up with Github
+                        </button>
+                    </div>
+
+                    <div>
+                        <button className="bg-green-500 text-white px-14 py-3 rounded-lg">
+                            Sign Up with your email.
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Signup;