diff --git a/.eslintrc b/.eslintrc
index e04f8bc..89cb577 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -7,6 +7,8 @@
     "plugin:jsx-a11y/recommended",
     "plugin:@typescript-eslint/recommended",
     "eslint-config-prettier",
+    "prettier",
+    "prettier/react"
   ],
   "settings": {
     "react": {
diff --git a/package-lock.json b/package-lock.json
index 50df0fc..e9d80b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,12 @@
       "name": "ji-yun",
       "version": "0.0.0",
       "dependencies": {
+        "clsx": "^2.1.1",
+        "gestalt": "^166.2.1",
         "path": "^0.12.7",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.4.0",
         "react-router-dom": "^7.1.1",
         "tailwindcss-children": "^2.1.0"
       },
@@ -1130,6 +1133,64 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/core/node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz",
+      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom/node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.25.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.25.4.tgz",
+      "integrity": "sha512-lWRQ/UiTvSIBxohn0/2HFHEmnmOVRjl7j6XcRJuLH0ls6f/9AyHMWVzkAJFuwx0n9gaEeCmg9VccCSCJzbEJig==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.2",
+        "@floating-ui/utils": "^0.1.1",
+        "tabbable": "^6.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -3419,6 +3480,11 @@
       "integrity": "sha512-cuSVIHi9/9E/+821Qjdvngor+xpnlwnuwIyZOaLmHBVdXL+gP+I6QQB9VkO7RI77YIcTV+S1W9AreJ5eN63JBA==",
       "dev": true
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -3491,6 +3557,14 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -5067,6 +5141,28 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/gestalt": {
+      "version": "166.2.1",
+      "resolved": "https://registry.npmjs.org/gestalt/-/gestalt-166.2.1.tgz",
+      "integrity": "sha512-CE5CtezEAtf1ZadeTTzAyInEIcZ6v6ZTGU+rppIA7+7VfTpWIXhjLAWzwcY6ETTRER+NEhCs/w+14tQ5wyvTnw==",
+      "dependencies": {
+        "@floating-ui/react": "^0.25.4",
+        "classnames": "^2.2.6",
+        "gestalt-design-tokens": ">0.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0",
+        "react-dom": "^18.0"
+      }
+    },
+    "node_modules/gestalt-design-tokens": {
+      "version": "166.2.1",
+      "resolved": "https://registry.npmjs.org/gestalt-design-tokens/-/gestalt-design-tokens-166.2.1.tgz",
+      "integrity": "sha512-jkRqxbP9OHKKQg9I8TwbsQVM8Kw/NHfbfU+VwuPy5CFAmU/UWZ39aWbaTXh6ZrROiP8h8cN2eiOhiv7EPA/PBw==",
+      "peerDependencies": {
+        "gestalt": ">0.0.0"
+      }
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -8070,6 +8166,14 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz",
+      "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -8972,6 +9076,11 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
diff --git a/package.json b/package.json
index 728b26e..65a33ad 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
+    "gestalt": "^166.2.1",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.4.0",
     "react-router-dom": "^7.1.1",
     "tailwindcss-children": "^2.1.0"
   },
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 96c229c..d9ace0c 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,29 @@
-export const Footer = () => (
-    <footer>
-      <h1>Footer</h1>
+import { SocialMediaContactRow, getNavLinkCollection } from '.';
+import { footerAndHeaderSharedClassName } from './utils';
+
+export const Footer = () => {
+  const footerNavLinkCollection = getNavLinkCollection({
+    id: 'footer',
+    className: 'inline-block',
+  });
+
+  return (
+    <footer className={footerAndHeaderSharedClassName}>
+      <div className="grid w-full max-w-screen-xl grid-cols-1 gap-10 md:grid-cols-3">
+        <div>
+          <h3 className="mb-2 text-xl font-semibold">Contact</h3>
+          <p>Email: support@example.com</p>
+          <p>Phone: +1 234 567 890</p>
+        </div>
+        <div>
+          <h3 className="mb-2 text-xl font-semibold">Quick Links</h3>
+          {footerNavLinkCollection.map((navLink) => navLink)}
+        </div>
+        <div>
+          <h3 className="mb-2 text-xl font-semibold">Follow</h3>
+          <SocialMediaContactRow baseId="footer" />
+        </div>
+      </div>
     </footer>
-  )
\ No newline at end of file
+  );
+};
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e3e46da..1f6a412 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,6 +1,103 @@
-export const Header = () => (
-    <header>
-      <h1>Header</h1>
+import clsx from 'clsx';
+import { Link } from 'gestalt';
+import { useState } from 'react';
+import { GiHamburgerMenu } from 'react-icons/gi';
+import { GrClose } from 'react-icons/gr';
+import { Logo } from './Logo';
+import { footerAndHeaderSharedClassName } from './utils';
+
+const basePath = '/ji-yun';
+const baseNavItemId = 'nav-menu-item';
+
+type GetNavLinkCollectionParams = {
+  id?: string;
+  className?: string;
+};
+export const getNavLinkCollection = ({
+  id = 'base',
+  className = 'block px-4 py- text-black',
+}: GetNavLinkCollectionParams = {}) => [
+  <li key={`${id}-${baseNavItemId}-home`}>
+    <Link
+      href="/"
+      tapStyle="compress"
+      underline="hover"
+      accessibilityLabel="Navigate to home page."
+      dataTestId={`${id}-${baseNavItemId}-home`}
+    >
+      <p className={clsx(className, 'hover:text-blue-600')}>Home</p>
+    </Link>
+  </li>,
+  <li key={`${id}-${baseNavItemId}-projects`}>
+    <Link
+      href={`${basePath}/projects`}
+      tapStyle="compress"
+      underline="hover"
+      accessibilityLabel="Navigate to project list page."
+      dataTestId={`${id}-${baseNavItemId}-projects`}
+    >
+      <p className={clsx(className, 'hover:text-blue-600')}>Projects</p>
+    </Link>
+  </li>,
+  <li key={`${id}-${baseNavItemId}-about`}>
+    <Link
+      href={`${basePath}/about`}
+      tapStyle="compress"
+      underline="hover"
+      accessibilityLabel="Navigate to 'about me' page and find out more details about me."
+      dataTestId={`${id}-${baseNavItemId}-about`}
+    >
+      <p className={clsx(className, 'hover:text-blue-600')}>About</p>
+    </Link>
+  </li>,
+  <li key={`${id}-${baseNavItemId}-contact`}>
+    <Link
+      href={`${basePath}/contact`}
+      tapStyle="compress"
+      underline="hover"
+      accessibilityLabel="Navigate to contact page and send me an email."
+      dataTestId={`${id}-${baseNavItemId}-contact`}
+    >
+      <p className={clsx(className, 'hover:text-blue-600')}>Contact</p>
+    </Link>
+  </li>,
+];
+
+export const Header = () => {
+  const [showMenu, setShowMenu] = useState(false);
+  const headerNavLinkCollection = getNavLinkCollection();
+
+  return (
+    <header className={footerAndHeaderSharedClassName}>
+      <nav className="flex w-full max-w-screen-lg justify-between">
+        <div className="flex w-full items-center justify-between">
+          <Logo />
+          {/* Mobile Hamburger Menu */}
+          <button
+            className="m-0 md:hidden"
+            onClick={() => setShowMenu(!showMenu)}
+          >
+            {showMenu ? <GrClose /> : <GiHamburgerMenu />}
+          </button>
+        </div>
+        <ul
+          className={clsx(
+            'absolute w-10/12 bg-white p-4 text-black shadow-md transition-all md:hidden md:w-auto md:gap-6 md:bg-transparent md:p-0',
+            showMenu ? 'top-16' : 'top-[-400px]'
+          )}
+        >
+          {headerNavLinkCollection.map((link) => link)}
+        </ul>
+
+        <ul
+          className={clsx(
+            'hidden w-full bg-white p-4 transition-all md:relative md:flex md:w-auto md:gap-6 md:bg-transparent md:p-0 md:shadow-none',
+            showMenu ? 'top-16' : 'top-0'
+          )}
+        >
+          {headerNavLinkCollection.map((link) => link)}
+        </ul>
+      </nav>
     </header>
-  )
-  
\ No newline at end of file
+  );
+};
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
new file mode 100644
index 0000000..8b2c81f
--- /dev/null
+++ b/src/components/Logo.tsx
@@ -0,0 +1,15 @@
+import { Link } from 'gestalt';
+
+export const Logo = () => (
+  <Link
+    href="/"
+    tapStyle="compress"
+    underline="hover"
+    accessibilityLabel="Navigate to home page."
+  >
+    <p className="text-2xl font-bold text-gray-800">
+      {/* <p className="flex h-10 items-center px-10 font-bold uppercase italic text-black hover:opacity-90"> */}
+      Ji Yun Pahk
+    </p>
+  </Link>
+);
diff --git a/src/components/SocialMediaContactRow.tsx b/src/components/SocialMediaContactRow.tsx
new file mode 100644
index 0000000..5d237f7
--- /dev/null
+++ b/src/components/SocialMediaContactRow.tsx
@@ -0,0 +1,57 @@
+import { Link } from 'gestalt';
+import { FaFacebook, FaInstagram, FaLinkedin } from 'react-icons/fa';
+
+interface SocialMediaContactRowProps {
+  className?: string;
+  baseId?: string;
+}
+
+export const SocialMediaContactRow = ({
+  baseId = 'base',
+  className = 'text-5xl',
+}: SocialMediaContactRowProps) => {
+  return (
+    <ul className="flex gap-4">
+      <li key={`${baseId}-facebook-icon-redirect`}>
+        <Link
+          href="https://www.facebook.com/jiyun.pahk"
+          target="blank"
+          tapStyle="compress"
+          underline="hover"
+          accessibilityLabel="Navigate to my facebook profile."
+          dataTestId={`${baseId}-facebook-icon-redirect`}
+        >
+          <FaFacebook className={className} />
+        </Link>
+      </li>
+      <li key={`${baseId}-instagram-icon-redirect`}>
+        <Link
+          href="https://www.instagram.com/nuyijkhap"
+          target="blank"
+          tapStyle="compress"
+          underline="hover"
+          accessibilityLabel="Navigate to my facebook profile."
+          dataTestId={`${baseId}-facebook-icon-redirect`}
+        >
+          <FaInstagram
+            className={className}
+            target="blank"
+            to="https://www.instagram.com/nuyijkhap"
+          />
+        </Link>
+      </li>
+      <li key={`${baseId}-linkedin-icon-redirect`}>
+        <Link
+          href="https://www.linkedin.com/in/jiyunpahk"
+          target="blank"
+          tapStyle="compress"
+          underline="hover"
+          accessibilityLabel="Navigate to my facebook profile."
+          dataTestId={`${baseId}-facebook-icon-redirect`}
+        >
+          <FaLinkedin className={className} />
+        </Link>
+      </li>
+    </ul>
+  );
+};
diff --git a/src/components/index.ts b/src/components/index.ts
index e86b2bc..fbbcd35 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,2 +1,4 @@
-export * from './Footer'
-export * from './Header'
+export * from './Footer';
+export * from './Header';
+export * from './SocialMediaContactRow';
+export * from './layouts';
diff --git a/src/components/layouts/Layout.tsx b/src/components/layouts/Layout.tsx
new file mode 100644
index 0000000..86ac63f
--- /dev/null
+++ b/src/components/layouts/Layout.tsx
@@ -0,0 +1,15 @@
+import clsx from 'clsx';
+import { Outlet } from 'react-router-dom';
+import { Footer, Header } from '..';
+
+export const Layout = () => {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Header />
+      <main className={clsx('flex-1 items-start bg-gray-100 p-4')}>
+        <Outlet />
+      </main>
+      <Footer />
+    </div>
+  );
+};
diff --git a/src/components/layouts/index.ts b/src/components/layouts/index.ts
new file mode 100644
index 0000000..9877e7f
--- /dev/null
+++ b/src/components/layouts/index.ts
@@ -0,0 +1 @@
+export * from './Layout';
diff --git a/src/components/utils.ts b/src/components/utils.ts
new file mode 100644
index 0000000..6243ed3
--- /dev/null
+++ b/src/components/utils.ts
@@ -0,0 +1,2 @@
+export const footerAndHeaderSharedClassName =
+  'w-full xl:max-w-screen-lg mx-auto flex items-center justify-between bg-white text-black p-4';
diff --git a/src/index.css b/src/index.css
index 6119ad9..25ca05c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,68 +1,47 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+html,
+body {
+  box-sizing: border-box;
+  font-size: 16px;
+  scroll-behavior: smooth;
+  height: 100%;
 }
-a:hover {
-  color: #535bf2;
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
 }
 
 body {
   margin: 0;
+  line-height: 1.5;
   display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  flex-direction: column;
+  height: 100%;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+#root {
+  display: flex;
+  flex-direction: column;
+  /* height: 100%; */
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+main {
+  flex-grow: 1;
+  overflow-y: auto;
+  /* flex-grow: 1; */
 }
diff --git a/src/main.tsx b/src/main.tsx
index 4926127..c0c141c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,24 +1,11 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom'
-import { Footer, Header } from './components'
-import './index.css'
-import { About, Contact, Home, Projects } from './pages'
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { Layout } from './components';
+import './index.css';
+import { About, Contact, Home, Projects } from './pages';
 
-
-
-
-const Layout = () => { 
-  return (
-    <div>
-<Header />
-<Outlet/>
-      <Footer />
-    </div>
-  )
-}
-
-const basePath = '/ji-yun'
+const basePath = '/ji-yun';
 
 const router = createBrowserRouter([
   {
@@ -27,25 +14,29 @@ const router = createBrowserRouter([
     children: [
       {
         path: basePath,
-        element: <Home />
+        element: <Home />,
+      },
+
+      {
+        path: `${basePath}/projects`,
+        element: <Projects />,
+      },
+
+      {
+        path: `${basePath}/about`,
+        element: <About />,
+      },
+
+      {
+        path: `${basePath}/contact`,
+        element: <Contact />,
       },
-        {
-          path: `${basePath}/projects`,
-          element: <Projects/>
-        },
-        {
-          path: `${basePath}/about`,
-          element: <About/>
-        },
-        {
-          path: `${basePath}/contact`,
-          element: <Contact/>
-        }
-    ]
-  }
-])
+    ],
+  },
+]);
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-<RouterProvider router={router}/> </StrictMode>,
-)
+    <RouterProvider router={router} />
+  </StrictMode>
+);
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index f871cfb..ad86b12 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -1,7 +1,7 @@
 export const About = () => {
-    return (
-        <div>
-        <h1>About me</h1>
-        </div>
-    )
-    }   
\ No newline at end of file
+  return (
+    <div className="">
+      <h1>About me</h1>
+    </div>
+  );
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index 585f1ef..fa2051e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 
 export default {
-  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   darkMode: 'class',
   theme: {
     extend: {
@@ -16,4 +16,4 @@ export default {
     require('@tailwindcss/aspect-ratio'),
     require('tailwindcss-children'),
   ],
-};
+};
\ No newline at end of file