diff --git a/components/about.tsx b/components/about.tsx
index b8eaa3f..72a85db 100644
--- a/components/about.tsx
+++ b/components/about.tsx
@@ -1,16 +1,17 @@
-import Link from "next/link";
 import Background from "./background";
 
 const About: React.FC = () => {
   return (
-    <Background styles="h-[80vh] flex items-center justify-center">
-      <div className="relative z-10 text-center text-white max-w-3xl">
-        <div className="flex justify-center items-center flex-wrap gap-8 mt-8">
-          {/* TODO: Display skills */}
-          {/* TODO: Display a quick about me */}
+    <main id="about">
+      <Background styles="h-[80vh] flex items-center justify-center">
+        <div className="relative z-10 text-center text-white max-w-3xl">
+          <div className="flex justify-center items-center flex-wrap gap-8 mt-8">
+            {/* TODO: Display skills */}
+            {/* TODO: Display a quick about me */}
+          </div>
         </div>
-      </div>
-    </Background>
+      </Background>
+    </main>
   );
 };
 
diff --git a/components/background.tsx b/components/background.tsx
index d8cf8c9..4619b99 100644
--- a/components/background.tsx
+++ b/components/background.tsx
@@ -9,9 +9,8 @@ interface Props {
 const Background: React.FC<Props> = ({ children, styles }) => {
   return (
     <section
-      className={`relative bg-gradient-to-r from-catppuccin_blue via-catppuccin_lavender to-catppuccin_mauve ${styles}`}
+      className={`relative bg-gradient-to-r from-catppuccin_blue via-catppuccin_lavender to-catppuccin_mauve bg-black opacity-95 ${styles}`}
     >
-      <div className="absolute inset-0 bg-black opacity-30" />
       {children}
     </section>
   );
diff --git a/components/contact.tsx b/components/contact.tsx
index e69de29..6dafa62 100644
--- a/components/contact.tsx
+++ b/components/contact.tsx
@@ -0,0 +1,136 @@
+"use client";
+import { useState } from "react";
+import Background from "./background";
+
+type Email = {
+  name: string;
+  email: string;
+  subject: string;
+  message: string;
+};
+
+const Contact: React.FC = () => {
+  const [formData, setFormData] = useState<Email>({
+    name: "",
+    email: "",
+    subject: "",
+    message: "",
+  });
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log("Form submitted:", formData);
+    // Here you can handle form submission (send data to backend)
+  };
+
+  return (
+    <main id="contact">
+      <Background styles="h-screen">
+        <div className="max-w-lg mx-auto p-6 bg-white shadow-md rounded-lg">
+          <h2 className="text-2xl font-semibold text-gray-800 mb-6">
+            Contact Me
+          </h2>
+          <form onSubmit={handleSubmit}>
+            <div className="mb-4">
+              {/* Name Field */}
+              <label
+                htmlFor="name"
+                className="block text-gray-700 font-medium mb-2"
+              >
+                Name
+              </label>
+
+              <input
+                type="text"
+                name="name"
+                id="name"
+                value={formData.name}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black"
+                placeholder="Your Name"
+                required
+              />
+            </div>
+
+            {/* Email Field */}
+            <div className="mb-4">
+              <label
+                htmlFor="email"
+                className="block text-gray-700 font-medium mb-2"
+              >
+                Email
+              </label>
+
+              <input
+                type="email"
+                name="email"
+                id="email"
+                value={formData.email}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black"
+                placeholder="Your Email"
+                required
+              />
+            </div>
+
+            {/* Subject Field */}
+            <div className="mb-4">
+              <label
+                htmlFor="subject"
+                className="block text-gray-700 font-medium mb-2"
+              >
+                Subject
+              </label>
+              <input
+                name="subject"
+                value={formData.subject}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black"
+                placeholder="Your Subject"
+                required
+              />
+            </div>
+
+            {/* Message Field */}
+            <div className="mb-4">
+              <label
+                htmlFor="message"
+                className="block text-gray-700 font-medium mb-2"
+              >
+                Message
+              </label>
+              <textarea
+                name="message"
+                id="message"
+                value={formData.message}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black"
+                rows={6}
+                placeholder="Your Message"
+                required
+                style={{ resize: "none" }}
+              />
+            </div>
+
+            {/* Submit Button */}
+            <button
+              type="submit"
+              className="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition duration-300"
+            >
+              Submit
+            </button>
+          </form>
+        </div>
+      </Background>
+    </main>
+  );
+};
+
+export default Contact;
diff --git a/components/hero.tsx b/components/hero.tsx
index a23011b..57988a3 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -1,34 +1,41 @@
 import Link from "next/link";
 import Background from "./background";
+import { FaLinkedin } from "react-icons/fa";
+import { FaGithub } from "react-icons/fa";
 
 const Hero: React.FC = () => {
   return (
-    <Background styles="h-screen flex items-center justify-center">
-      <div className="relative z-10 text-center text-white max-w-3xl">
-        <h1 className="text-4xl md:text-6xl font-bold mb-6">
-          Hi, I'm <span className="text-catppuccin_red">Dylan Zhou</span>
-        </h1>
-        <p className="text-lg md:text-xl mb-8">
-          I'm a dedicated student passionate about{" "}
-          <span className="font-extrabold">Full Stack Developer</span>, always
-          seeking new challenges to grow my skills and improve my applications.
-        </p>
-        <div className="grid grid-cols-2 gap-10">
-          <Link
-            href="#projects"
-            className="bg-catppuccin_rosewater text-black font-semibold py-3 px-6 rounded-full hover:bg-catppuccin_flamingo transition duration-300"
-          >
-            View My Work
-          </Link>
-          <Link
-            href="#resume"
-            className="bg-catppuccin_rosewater text-black font-semibold py-3 px-6 rounded-full hover:bg-catppuccin_flamingo transition duration-300"
-          >
-            View My Resume
-          </Link>
+    <main id="hero">
+      <Background styles="h-screen flex items-center justify-center">
+        <div className="relative z-10 text-center text-white max-w-3xl">
+          <h1 className="text-4xl md:text-6xl font-bold mb-6">
+            Hi, I'm <span className="text-catppuccin_red">Dylan Zhou</span>
+          </h1>
+          <p className="text-lg md:text-xl mb-8">
+            I'm a dedicated student passionate about{" "}
+            <span className="font-extrabold">Full Stack Developer</span>, always
+            seeking new challenges to grow my skills and improve my
+            applications.
+          </p>
+          <div className="flex">
+            <div className="flex items-center justify-center space-x-5 mx-10">
+              <Link href={"https://www.linkedin.com/in/dylan-zhou-714110262/"}>
+                <FaLinkedin size={32} />
+              </Link>
+              <Link href={"https://www.github.com/Aeonoi/"}>
+                <FaGithub size={32} />
+              </Link>
+              <Link
+                href="#contact"
+                className="bg-catppuccin_rosewater text-black font-semibold py-3 px-6 rounded-full hover:bg-catppuccin_flamingo transition duration-300"
+              >
+                Contact Me
+              </Link>
+            </div>
+          </div>
         </div>
-      </div>
-    </Background>
+      </Background>
+    </main>
   );
 };
 export default Hero;
diff --git a/components/navbar.tsx b/components/navbar.tsx
index b5a1b4a..9494930 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -7,16 +7,19 @@ const Navbar: React.FC = () => {
         <div className="flex justify-between items-center">
           <div className="text-2xl font-bold text-gray-800">Dylan Zhou</div>
           <div className="hidden md:flex items-center space-x-4">
-            <Link href="#" className="text-gray-800 hover:text-blue-600">
+            <Link href="#hero" className="text-gray-800 hover:text-blue-600">
               Home
             </Link>
-            <Link href="#" className="text-gray-800 hover:text-blue-600">
+            <Link href="#about" className="text-gray-800 hover:text-blue-600">
               About
             </Link>
-            <Link href="#" className="text-gray-800 hover:text-blue-600">
+            <Link
+              href="#projects"
+              className="text-gray-800 hover:text-blue-600"
+            >
               Projects
             </Link>
-            <Link href="#" className="text-gray-800 hover:text-blue-600">
+            <Link href="#contact" className="text-gray-800 hover:text-blue-600">
               Contact
             </Link>
           </div>
diff --git a/components/projects.tsx b/components/projects.tsx
index 3db90b8..e2fe20a 100644
--- a/components/projects.tsx
+++ b/components/projects.tsx
@@ -2,13 +2,16 @@ import Background from "./background";
 
 const Projects: React.FC = () => {
   return (
-    <Background styles="">
-      <div className="grid grid-cols-3">
-        <div>test1</div>
-        <div>test2</div>
-        <div>test3</div>
-      </div>
-    </Background>
+    <main id="projects">
+      <Background styles="h-[70vh]">
+        <div className="grid grid-cols-2 justify-items-center items-center">
+          <div>test1</div>
+          <div>test2</div>
+          <div>test3</div>
+          <div>test4</div>
+        </div>
+      </Background>
+    </main>
   );
 };