diff --git a/client/src/components/Layout.tsx b/client/src/components/Layout.tsx
index 1deeeb2..29fa115 100644
--- a/client/src/components/Layout.tsx
+++ b/client/src/components/Layout.tsx
@@ -1,17 +1,17 @@
-import React from 'react';
-import { Outlet } from 'react-router-dom';
+import React from "react"
+import { Outlet } from "react-router-dom"
 
-import Navbar from './Navbar';
-import Footer from './Footer';
+import Navbar from "./Navbar"
+import Footer from "./Footer"
 
 const Layout: React.FC = () => {
-    return (
-        <div className="App bg-black bg-no-repeat bg-cover">
-            <Navbar />
-            <Outlet />
-            <Footer />
-        </div>
-    )
+	return (
+		<div className="App mt-28">
+			<Navbar />
+			<Outlet />
+			<Footer />
+		</div>
+	)
 }
 
-export default Layout; 
\ No newline at end of file
+export default Layout
diff --git a/client/src/index.css b/client/src/index.css
index 6a01235..6919c80 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -3,116 +3,144 @@
 @tailwind utilities;
 
 @layer components {
-    * {
-        @apply box-border
-    }
-    
-    html {
-        @apply overflow-x-hidden font-inter scroll-smooth
-    }
-
-    ::-webkit-scrollbar {
-        width: 10px;
-      }
-      
-    ::-webkit-scrollbar-track {
-        @apply bg-[#2b2b2b]
-    }
-      
-    ::-webkit-scrollbar-thumb {
-        @apply bg-[#40E9F1]
-    }
-      
-    ::-webkit-scrollbar-thumb:hover {
-        @apply bg-[#D7BDF2]
-    }
-    
-    .nav-link {
-        @apply uppercase text-gray-400 text-sm tracking-widest
-    }
-
-    .nav-link-active {
-        @apply text-white
-    }
-
-    .btn-primary {
-        @apply border-2 border-[#40E9F1] text-[#40E9F1] uppercase rounded-md hover:border-2 hover:border-white hover:bg-[#06a6ae] hover:text-white
-    }
-
-    .heading {
-        text-shadow: 0px 1px 10px #40E9F1;
-    }
-
-    .primary-input {
-        @apply bg-black text-white border-[1px] border-[#40E9F1] rounded-xl w-full py-4 text-lg text-center focus:outline-none
-    }
-
-    input::placeholder {
-        @apply text-white capitalize opacity-100 font-inter
-    }
-
-    .btn-shape {
-        clip-path: polygon(4% 0, 96% 0, 100% 6%, 100% 94%, 96% 100%, 4% 100%, 0 94%, 0 6%);
-    }
-
-    .btn-text-shadow {
-        text-shadow: 0px 2px 4px #00000034;
-    }
-
-    .btn-secondary {
-        @apply uppercase relative btn-shape text-[#FBFFFF] bg-[#40E9F1] btn-text-shadow tracking-wider text-lg
-    }
-
-    .btn-secondary::before {
-        content: "sign up";
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 48px;
-        width: 218px;
-        position: absolute;
-        top: 1px;
-        left: 1px;
-        background-color: rgba(14, 79, 94, 1);
-        clip-path: polygon(4% 0, 96% 0, 100% 6%, 100% 94%, 96% 100%, 4% 100%, 0 94%, 0 6%);
-    }
-
-    .btn-secondary::after {
-        content: "";
-        height: 48px;
-        width: 48px;
-        position: absolute;
-        top: 1px;
-        left: 40%;
-        background-image: linear-gradient(to right, rgba(11, 82, 189, 0), rgba(11, 82, 189, 1), rgba(11, 82, 189, 0));
-        opacity: 0.2;
-    }
-
-    .footer-bg {
-        background-color: rgba(255, 255, 255, 0.04)
-    }
-
-    .right::before {
-        content: "";
-        position: absolute;
-        top: 3px;
-        right: 18px;
-        background-color: rgba(255, 255, 255, 1);
-        width: 100%;
-        height: 1px;
-    }
-
-    .left::before {
-        content: "";
-        position: absolute;
-        top: 3px;
-        left: 18px;
-        background-color: rgba(255, 255, 255, 0.6);
-        width: 100%;
-        height: 1px;
-    }
-
-    .error {
-        @apply text-[#40E9F1] text-sm text-center py-1
-    }
-}
\ No newline at end of file
+	* {
+		@apply box-border;
+	}
+
+	html {
+		@apply overflow-x-hidden font-inter scroll-smooth;
+	}
+
+	::-webkit-scrollbar {
+		width: 10px;
+	}
+
+	::-webkit-scrollbar-track {
+		@apply bg-[#2b2b2b];
+	}
+
+	::-webkit-scrollbar-thumb {
+		@apply bg-[#40E9F1];
+	}
+
+	::-webkit-scrollbar-thumb:hover {
+		@apply bg-[#D7BDF2];
+	}
+
+	.nav-link {
+		@apply uppercase text-gray-400 text-sm tracking-widest;
+	}
+
+	.nav-link-active {
+		@apply text-white;
+	}
+
+	.btn-primary {
+		@apply border-2 border-[#40E9F1] text-[#40E9F1] uppercase rounded-md hover:border-2 hover:border-white hover:bg-[#06a6ae] hover:text-white;
+	}
+
+	.heading {
+		text-shadow: 0px 1px 10px #40e9f1;
+	}
+
+	.primary-input {
+		@apply bg-black text-white border-[1px] border-[#40E9F1] rounded-xl w-full py-4 text-lg text-center focus:outline-none;
+	}
+
+	input::placeholder {
+		@apply text-white capitalize opacity-100 font-inter;
+	}
+
+	.btn-shape {
+		clip-path: polygon(
+			4% 0,
+			96% 0,
+			100% 6%,
+			100% 94%,
+			96% 100%,
+			4% 100%,
+			0 94%,
+			0 6%
+		);
+	}
+
+	.btn-text-shadow {
+		text-shadow: 0px 2px 4px #00000034;
+	}
+
+	.btn-secondary {
+		@apply uppercase relative btn-shape text-[#FBFFFF] bg-[#40E9F1] btn-text-shadow tracking-wider text-lg;
+	}
+
+	.btn-secondary::before {
+		content: "sign up";
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 48px;
+		width: 218px;
+		position: absolute;
+		top: 1px;
+		left: 1px;
+		background-color: rgba(14, 79, 94, 1);
+		clip-path: polygon(
+			4% 0,
+			96% 0,
+			100% 6%,
+			100% 94%,
+			96% 100%,
+			4% 100%,
+			0 94%,
+			0 6%
+		);
+	}
+
+	.btn-secondary::after {
+		content: "";
+		height: 48px;
+		width: 48px;
+		position: absolute;
+		top: 1px;
+		left: 40%;
+		background-image: linear-gradient(
+			to right,
+			rgba(11, 82, 189, 0),
+			rgba(11, 82, 189, 1),
+			rgba(11, 82, 189, 0)
+		);
+		opacity: 0.2;
+	}
+
+	.footer-bg {
+		background-color: rgba(255, 255, 255, 0.04);
+	}
+
+	.right::before {
+		content: "";
+		position: absolute;
+		top: 3px;
+		right: 18px;
+		background-color: rgba(255, 255, 255, 1);
+		width: 100%;
+		height: 1px;
+	}
+
+	.left::before {
+		content: "";
+		position: absolute;
+		top: 3px;
+		left: 18px;
+		background-color: rgba(255, 255, 255, 0.6);
+		width: 100%;
+		height: 1px;
+	}
+
+	.error {
+		@apply text-[#40E9F1] text-sm text-center py-1;
+	}
+}
+body {
+	background-color: black;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
diff --git a/client/src/pages/About.tsx b/client/src/pages/About.tsx
index f2e5948..5a7de2a 100644
--- a/client/src/pages/About.tsx
+++ b/client/src/pages/About.tsx
@@ -1,9 +1,41 @@
-import React from 'react';
+import React from "react"
+import "../styles/About.css"
+export default function About() {
+	return (
+		<div id="about">
+			<div id="top-border">
+				<div id="top-border-1"></div>
+				<div id="top-border-2"></div>
+				<div id="top-border-3"></div>
+			</div>
 
-const About: React.FC = () => {
-    return (
-        <div>About Page</div>
-    );
-}
+			<div className="grid" id="about-content">
+				<div id="picture-container" className="border-none">
+					Picture
+				</div>
+				<div id="middle-border">
+					<div id="middle-border-top"></div>
+					<div id="middle-border-middle"></div>
+					<div id="middle-border-bottom"></div>
+				</div>
+				<div className="p-12">
+					<h1 className="text-2xl p-1">ABOUT</h1>
+					<div className="p-2" id="text-container-content">
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+						sed do eiusmod tempor incididunt ut labore et dolore
+						magna aliqua. Ut enim ad minim veniam, quis nostrud
+						exercitation Ut enim ad minim veniam, quis nostrud
+						exercitation
+					</div>
+				</div>
+			</div>
 
-export default About; 
\ No newline at end of file
+			<div id="bottom-border">
+				<div id="bottom-border-1"></div>
+				<div id="bottom-border-2"></div>
+				<div id="bottom-border-3"></div>
+				<div id="bottom-border-4"></div>
+			</div>
+		</div>
+	)
+}
diff --git a/client/src/styles/About.css b/client/src/styles/About.css
new file mode 100644
index 0000000..0a36da6
--- /dev/null
+++ b/client/src/styles/About.css
@@ -0,0 +1,107 @@
+#about {
+	display: grid;
+	grid-template-rows: 5px 1fr 5px;
+	color: white;
+	/* background-color: white; */
+	width: 100%;
+	padding: 0 96px;
+	margin: 1em 0;
+}
+#about > div {
+	background-color: rgba(255, 255, 255, 0.05);
+}
+
+#middle-border {
+	display: grid;
+	grid-template-rows: 25fr 50fr 25fr;
+}
+
+#middle-border-top {
+	background-color: rgba(255, 255, 255, 0.8);
+	box-shadow: 0px 0px 8.59873px rgba(255, 255, 255, 0.8);
+	border-radius: 0 0 5px 5px;
+}
+
+#middle-border-middle {
+	background-color: rgba(255, 255, 255, 0.6);
+	width: 1px;
+	justify-self: center;
+}
+#middle-border-bottom {
+	background-color: rgba(64, 233, 241, 0.8);
+	border-radius: 5px 5px 0 0;
+	box-shadow: 0px 0px 8.59873px rgba(64, 233, 241, 0.8);
+}
+
+#top-border-1 {
+	width: calc(100% - 4px);
+	grid-row: 1;
+	grid-column: 1;
+	margin-bottom: 1px;
+}
+#top-border-2 {
+	width: 100%;
+	grid-row: 1 / 3;
+	grid-column: 2;
+	border-top-left-radius: 1em;
+}
+#top-border-3 {
+	width: 100%;
+	margin-top: 1px;
+	grid-column: 1;
+	grid-row: 2;
+}
+#top-border {
+	display: grid;
+	grid-template-columns: 2fr 1fr;
+	grid-template-rows: 1fr 1fr;
+}
+#top-border > div {
+	background-color: rgba(255, 255, 255, 0.9);
+}
+#about-content {
+	grid-template-columns: 1fr 6px 1fr;
+}
+
+#bottom-border-1 {
+	width: 100%;
+	/* background-color: red; */
+	grid-row: 1/3;
+	grid-column: 1;
+	border-bottom-right-radius: 1em;
+}
+#bottom-border-2 {
+	width: 100%;
+	/* background-color: rgb(89, 253, 0); */
+	margin-bottom: 1px;
+}
+#bottom-border-3 {
+	width: 100%;
+	/* background-color: rgb(218, 10, 221); */
+	grid-row: 1/3;
+	grid-column: 3;
+	border-bottom-left-radius: 1em;
+}
+
+#bottom-border-4 {
+	width: calc(100% - 6px);
+	margin-top: 1px;
+	border-top-right-radius: 1em;
+	border-top-left-radius: 1em;
+	justify-self: center;
+	/* background-color: rgb(3, 126, 118); */
+}
+
+#bottom-border {
+	display: grid;
+	grid-template-columns: 2fr 2fr 0.8fr;
+	grid-template-rows: 1fr 1fr;
+}
+#bottom-border > div {
+	background-color: rgba(64, 233, 241, 0.9);
+}
+#text-container-content {
+	font-family: "Pro Display", sans-serif;
+	text-transform: capitalize;
+	color: rgba(255, 255, 255, 0.8);
+}