diff --git a/src/components/header.tsx b/src/components/header.tsx
index 98f7f8d..33b9949 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,14 +1,44 @@
 import "./header.css";
-import Image from "next/image"
+import Image from "next/image";
 import Link from "next/link";
 
 function Header() {
   return (
-    <div className="items-center header flex flex-row w-100% h-20 border-b-solid border-b-gray-700 border-b-2 bg-gray-900 " id="header container">
-      <Image height={256} width={256} src="/pfp.png" className="ml-3.5 animate-[spin_3s_linear_infinite] rounded-full basis-15 h-15" id="pfp" alt="pfp"/>
-      <h1 className="ml-3.5 pagetitle text-4xl text-bold text-white font-[Bitcount]" id="page-title">PERIODICBRAKE</h1>
+    <div
+      className="px-4 space-x-5 items-center header flex flex-row w-100% h-20 border-b-solid border-b-gray-700 border-b-2 bg-gray-900 sticky"
+      id="header container"
+    >
+      <Image
+        height={256}
+        width={256}
+        src="/pfp.png"
+        className=" animate-[spin_3s_linear_infinite] rounded-full basis-15 h-15"
+        id="pfp"
+        alt="pfp"
+      />
+      <Link
+        href="/"
+        className="hover:text-gray-100"
+      >
+      <h1
+        className="pagetitle text-4xl text-bold text-white font-[Bitcount]"
+        id="page-title"
+      >
+        PERIODICBRAKE
+      </h1></Link>
       <div className="basis-auto w-full" id="header-separator" />
-      <Link href="/contact" className="mr-3.5 text-3xl text-bold text-white hover:text-gray-200 font-[Bitcount]"><p>Contact</p></Link>
+      <Link
+        href="/portfolio"
+        className=" text-3xl text-bold text-white hover:text-gray-200 font-[Bitcount]"
+      >
+        <p>Portfolio</p>
+      </Link>
+      <Link
+        href="/contact"
+        className=" text-3xl text-bold text-white hover:text-gray-200 font-[Bitcount]"
+      >
+        <p>Contact</p>
+      </Link>
     </div>
   );
 }