diff --git a/package-lock.json b/package-lock.json
index d4ebc98..8e60881 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8367,6 +8367,11 @@
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
       "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA=="
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -10110,6 +10115,15 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-scroll": {
+      "version": "1.8.8",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.8.tgz",
+      "integrity": "sha512-RnU0wLaLozKIhLNAfoz6yxMus+PMypk7eBRfOitalYd2+qCiHrZdJ0MSDBs1Y23IFSfqSCdCEmENMJeSh0KoHA==",
+      "requires": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 5b1f3e6..92364de 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "react-scroll": "^1.8.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/src/App.css b/src/App.css
index 74b5e05..3f478cf 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,5 @@
 .App {
-  text-align: center;
+  /* text-align: center; */
 }
 
 .App-logo {
diff --git a/src/App.js b/src/App.js
index 3784575..41b0e0d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,10 @@
 import logo from './logo.svg';
 import './App.css';
+import HomePage from './pages/homepage'
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <HomePage/>
   );
 }
 
diff --git a/src/pages/Slides/introslide.js b/src/pages/Slides/introslide.js
new file mode 100644
index 0000000..ce5899c
--- /dev/null
+++ b/src/pages/Slides/introslide.js
@@ -0,0 +1,37 @@
+import react, { useState } from "react";
+import Typewriter from "typewriter-effect";
+import { Link } from "react-scroll";
+import "../styles.css";
+
+export default function IntroSlide() {
+  return (
+    <div id="home" style={{ backgroundColor: "#eaf2fa" }}>
+      <div style={{ marginTop: "2.5%", marginLeft: "5%" }}>
+        <Typewriter
+          options={{
+            wrapperClassName: "typewriter_title",
+          }}
+          onInit={(typewriter) => {
+            typewriter
+              .typeString(
+                'intro(name={"<span id="name_tag">Vaaranan</span>"});'
+              )
+              .start();
+          }}
+          style={{ fontFamily: "Courier" }}
+        />
+      </div>
+      <div
+        style={{
+          width: "45%",
+          fontFamily: "Avenir",
+          fontWeight: "100",
+          marginLeft: "5%",
+        }}
+      >
+        Hi! My name is Vaaranan, I am in 3A at the Univeristy of Waterloo,
+        pursuing a specialziation in Digital Hardware
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/homepage.js b/src/pages/homepage.js
new file mode 100644
index 0000000..359f516
--- /dev/null
+++ b/src/pages/homepage.js
@@ -0,0 +1,51 @@
+import react, { useState } from "react";
+import Typewriter from "typewriter-effect";
+import { Link } from "react-scroll";
+import IntroSlide from "./Slides/introslide";
+import "./styles.css";
+
+export default function HomePage() {
+  return (
+    <div className="App">
+      <header className="nav">
+        <nav className="nav__container__actions">
+          <ul>
+            <li>
+              <Link activeClass="active" smooth spy to="about">
+                ABOUT
+              </Link>
+            </li>
+            <li>
+              <Link activeClass="active" smooth spy to="projects">
+                PROJECTS
+              </Link>
+            </li>
+            <li>
+              <Link activeClass="active" smooth spy to="blog">
+                BLOG
+              </Link>
+            </li>
+            <li>
+              <Link activeClass="active" smooth spy to="contact">
+                CONTACT ME!
+              </Link>
+            </li>
+          </ul>
+        </nav>
+      </header>
+      <IntroSlide />
+      <section id="about">
+        <div>ABOUT</div>
+      </section>
+      <section id="projects">
+        <div>PROJECTS</div>
+      </section>
+      <section id="blog">
+        <div>BLOG</div>
+      </section>
+      <section id="contact">
+        <div>CONTACT ME</div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/pages/styles.css b/src/pages/styles.css
new file mode 100644
index 0000000..4234d43
--- /dev/null
+++ b/src/pages/styles.css
@@ -0,0 +1,95 @@
+.App {
+    font-family: sans-serif;
+    /* text-align: center; */
+  }
+  
+  section {
+    display: grid;
+    height: 100vh;
+    font-size: 32px;
+    font-weight: bold;
+  }
+
+  #projects,
+  #contact {
+    color: #3b3b3c;
+    background: #eaf2fa;
+  }
+  
+  .nav {
+    display: flex;
+    align-items: center;
+    position: -webkit-sticky;
+    position: sticky;
+    top: -5px;
+    z-index: 2;
+    height: 70px;
+    min-height: 70px;
+    width: calc(100% - 1.5rem);
+    background-color: #fff;
+    padding: 0 1rem;
+    box-shadow: 0 0.125rem 0.25rem 0 rgb(0 0 0 / 11%);
+  }
+  
+  .nav__container {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    position: relative;
+  }
+  
+  .nav__container__actions {
+    display: inline-flex;
+    flex-flow: row nowrap;
+    padding-left: 50px;
+    flex: 1;
+  }
+  
+  .active {
+    font-weight: bold;
+  }
+  
+  ul {
+    display: flex;
+    gap: 1rem;
+    font-size: 0.9rem;
+    list-style: none;
+    padding: 0;
+  }
+  
+  li {
+    cursor: pointer;
+  }
+  
+  li:hover {
+    text-decoration: underline;
+  }
+
+  #home {
+    display: grid;
+    font-size: 32px;
+    font-weight: bold;
+    padding-bottom: 5%;
+  }
+
+  .typewriter_title{
+    font-family: 'Avenir';
+    font-weight: "600";
+    font-size: 75px;
+    justify-content: left;
+    align-items: flex-start;
+    margin-bottom: 15%;
+  }
+  
+  .Typewriter__cursor{
+    font-size: 75px;
+  }
+
+  #name_tag{
+    background-color: #000;
+    color: #fff;
+  }
\ No newline at end of file