diff --git a/package-lock.json b/package-lock.json
index 75efefa..b27227d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,8 @@
         "@mui/icons-material": "^5.15.15",
         "@mui/lab": "^5.0.0-alpha.170",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-intersection-observer": "^9.8.2"
       },
       "devDependencies": {
         "@types/react": "^18.2.66",
@@ -3498,6 +3499,20 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.8.2",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.8.2.tgz",
+      "integrity": "sha512-901naEiiZmse3p+AmtbQ3NL9xx+gQ8TXLiGDc+8GiE3JKJkNV3vP737aGuWTAXBA+1QqxPrDDE+fIEgYpGDlrQ==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
diff --git a/package.json b/package.json
index 6271c7e..6966d5a 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "@mui/icons-material": "^5.15.15",
     "@mui/lab": "^5.0.0-alpha.170",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.8.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",
diff --git a/resume.pdf b/resume.pdf
index 8c18122..694ae74 100644
Binary files a/resume.pdf and b/resume.pdf differ
diff --git a/src/App.tsx b/src/App.tsx
index 8b9ff36..e0d3c95 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import { Grid, Typography, Link, IconButton } from "@mui/material";
 import { GitHub, LinkedIn } from "@mui/icons-material";
+import { Navigation } from "./components";
 
 type Icon = {
   icon: React.ReactNode;
@@ -27,8 +28,9 @@ export default function App() {
       maxWidth="md"
       textAlign="left"
       margin="0 auto"
+      alignItems="center"
       padding={["5rem 2rem", "9rem 2rem"]}
-      spacing={2} // Adjust the spacing between items
+      spacing={2}
     >
       <Grid item>
         <Typography fontSize={[18, 42]} color="secondary">
@@ -55,12 +57,6 @@ export default function App() {
             component="a"
             color="secondary"
             href={item.link}
-            sx={{
-              ".MuiSvgIcon-root": {
-                height: ["2rem", "4rem"],
-                width: ["2rem", "4rem"],
-              },
-            }}
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -68,9 +64,10 @@ export default function App() {
           </IconButton>
         ))}
       </Grid>
-      <Grid item alignSelf="center">
+      <Grid item>
         <Link
           color="secondary.main"
+          component="a"
           href="/resume.pdf"
           target="_blank"
           sx={{ fontSize: ["1rem", "2rem"] }}
@@ -78,6 +75,9 @@ export default function App() {
           View full resume
         </Link>
       </Grid>
+      <Grid item sx={{ width: "100%" }}>
+        <Navigation />
+      </Grid>
     </Grid>
   );
 }
diff --git a/src/components/About.tsx b/src/components/About.tsx
deleted file mode 100644
index a23984c..0000000
--- a/src/components/About.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Stack } from "@mui/material";
-
-export default function About() {
-  return <Stack></Stack>;
-}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
new file mode 100644
index 0000000..6a14e0c
--- /dev/null
+++ b/src/components/Navigation.tsx
@@ -0,0 +1,111 @@
+import * as React from "react";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import { styled } from "@mui/system";
+
+const TabsWrapper = styled(Box)(({ theme }) => ({
+  flexGrow: 1,
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.secondary.main,
+  display: "flex",
+  marginTop: "1rem",
+  borderTop: `2px solid`,
+  paddingTop: "2rem",
+  minHeight: 224,
+  [theme.breakpoints.up("sm")]: {
+    paddingTop: "3rem",
+    marginTop: "3rem",
+  },
+}));
+
+const StyledTabs = styled(Tabs)(({ theme }) => ({
+  borderRight: `1px solid ${theme.palette.divider}`,
+  "& button": {
+    color: theme.palette.secondary.main,
+    fontSize: 14,
+    paddingLeft: 0,
+    maxWidth: 30,
+    padding: 0,
+    [theme.breakpoints.up("sm")]: {
+      fontSize: 18,
+      paddingLeft: "1rem",
+      maxWidth: "100%",
+      padding: "24px 60px 24px 0",
+    },
+  },
+  "& .MuiTab-root.Mui-selected": {
+    color: theme.palette.info.main,
+  },
+  "& .MuiTab-root": {
+    alignItems: "baseline",
+  },
+  "& .MuiTabs-indicator": {
+    backgroundColor: theme.palette.info.main,
+  },
+}));
+
+type TabPanelProps = {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+};
+
+function TabPanel({ children, value, index, ...other }: TabPanelProps) {
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`vertical-tabpanel-${index}`}
+      aria-labelledby={`vertical-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `vertical-tab-${index}`,
+    "aria-controls": `vertical-tabpanel-${index}`,
+  };
+}
+
+export default function Navigation() {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <TabsWrapper>
+      <StyledTabs
+        orientation="vertical"
+        variant="scrollable"
+        value={value}
+        onChange={(e, newValue) => handleChange(newValue)}
+        aria-label="Vertical tabs example"
+      >
+        <Tab label="About" {...a11yProps(0)} />
+        <Tab label="Projects" {...a11yProps(1)} />
+        <Tab label="Contact" {...a11yProps(2)} />
+      </StyledTabs>
+      <TabPanel value={value} index={0}>
+        About me
+      </TabPanel>
+      <TabPanel value={value} index={1}>
+        Projects
+      </TabPanel>
+      <TabPanel value={value} index={2}>
+        Contact
+      </TabPanel>
+    </TabsWrapper>
+  );
+}
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..0e2636e
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1 @@
+export { default as Navigation } from "./Navigation";
diff --git a/src/theme.ts b/src/theme.ts
index db7ded8..f2f7707 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -29,6 +29,16 @@ export const theme = createTheme({
           textAlign: "left",
           color: "#ececec",
         },
+        ":root": {
+          ".MuiSvgIcon-root": {
+            height: "4rem",
+            width: "4rem",
+            "@media (max-width:600px)": {
+              height: "2rem",
+              width: "2rem",
+            },
+          },
+        },
       },
     },
   },