diff --git a/frontend/src/assets/images/github.svg b/frontend/src/assets/images/github.svg
new file mode 100644
index 0000000..2dfec51
--- /dev/null
+++ b/frontend/src/assets/images/github.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>github [#142]</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7559.000000)" fill="#000000">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+                <path d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399" id="github-[#142]">
+
+</path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/images/navidrome.svg b/frontend/src/assets/images/navidrome.svg
new file mode 100644
index 0000000..c94c861
--- /dev/null
+++ b/frontend/src/assets/images/navidrome.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xml:space="preserve"
+     viewBox="0 0 256 256" width="256" height="256">
+
+  <style>
+    .st1,.st2{fill:#000;stroke:#fff;stroke-width:9.9999;stroke-miterlimit:15.118}
+    .st2{fill:none;stroke-linecap:round}
+  </style>
+
+  <g id="spinGroup">
+
+    <circle cx="128" cy="128" r="122.8"
+            style="fill:#0084ff;stroke:#fff;stroke-width:10.3641;stroke-miterlimit:15.118"/>
+
+    <circle cx="128" cy="128" r="43.7" fill="#fff" class="st1"/>
+
+    <path fill="#fff"
+      d="M201.8 128c0 40.7-33 73.8-73.8 73.8M54.2 128c0-40.7 33-73.8 73.8-73.8"
+      class="st2"/>
+
+    <path fill="#fff"
+      d="M224.9 128c0 1.2 0 2.5-.1 3.7m-2.2 17.6c-9.7 43.3-48.4 75.6-94.6 75.6
+         M31.1 128c0-1.1 0-2.2.1-3.3m1.8-16c9-44.2 48.1-77.6 95-77.6"
+      class="st2"/>
+
+    <circle cx="128" cy="128" r="9" fill="#fff" class="st1"/>
+
+    <!-- SPIN ANIMATION INSIDE THE GROUP -->
+    <animateTransform
+        attributeName="transform"
+        type="rotate"
+        from="0 128 128"
+        to="360 128 128"
+        dur="3s"
+        repeatCount="indefinite"/>
+  </g>
+
+</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/images/nextcloud.svg b/frontend/src/assets/images/nextcloud.svg
new file mode 100644
index 0000000..0bf39af
--- /dev/null
+++ b/frontend/src/assets/images/nextcloud.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+   <circle cx="512" cy="512" r="512" style="fill:#0082c9"/>
+   <path d="M512.5 370.9c-64.6 0-118.8 44.2-135.4 103.7-14.5-31.8-46.3-54.4-83.3-54.4-50.6.2-91.5 41.2-91.8 91.8.2 50.6 41.2 91.5 91.8 91.8 37 0 68.8-22.6 83.3-54.4 16.6 59.5 70.8 103.7 135.4 103.7 64.2 0 118.2-43.7 135.1-102.7 14.7 31.3 46.1 53.4 82.6 53.4 50.6-.2 91.6-41.2 91.8-91.8-.2-50.6-41.2-91.6-91.8-91.8-36.6 0-67.9 22.2-82.6 53.4-16.9-59-70.9-102.8-135.1-102.7zm0 53.8c48.5 0 87.3 38.8 87.3 87.3s-38.8 87.3-87.3 87.3c-48 .2-87-38.5-87.2-86.5v-.8c-.1-48.5 38.7-87.3 87.2-87.3zm-218.7 49.4c21.2 0 37.9 16.7 37.9 37.9 0 21.3-16.6 37.9-37.9 37.9-20.7.2-37.7-16.4-37.9-37.1v-.8c0-21.3 16.6-37.9 37.9-37.9zm436.4 0c21.3 0 37.9 16.7 37.9 37.9 0 21.3-16.7 37.9-37.9 37.9-20.7.2-37.7-16.4-37.9-37.1v-.8c0-21.3 16.7-37.9 37.9-37.9z" style="fill:#fff"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/images/search.svg b/frontend/src/assets/images/search.svg
new file mode 100644
index 0000000..f0ba700
--- /dev/null
+++ b/frontend/src/assets/images/search.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-0.5 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 11.8201C22 9.84228 21.4135 7.90885 20.3147 6.26436C19.2159 4.61987 17.6542 3.33813 15.8269 2.58126C13.9996 1.82438 11.9889 1.62637 10.0491 2.01223C8.10927 2.39808 6.32748 3.35052 4.92896 4.74904C3.53043 6.14757 2.578 7.92935 2.19214 9.86916C1.80629 11.809 2.00436 13.8197 2.76123 15.6469C3.51811 17.4742 4.79985 19.036 6.44434 20.1348C8.08883 21.2336 10.0222 21.8201 12 21.8201" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 11.8201H22" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 21.8201C10.07 21.8201 8.5 17.3401 8.5 11.8201C8.5 6.30007 10.07 1.82007 12 1.82007C13.93 1.82007 15.5 6.30007 15.5 11.8201" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.3691 21.6901C20.3021 21.6901 21.8691 20.1231 21.8691 18.1901C21.8691 16.2571 20.3021 14.6901 18.3691 14.6901C16.4361 14.6901 14.8691 16.2571 14.8691 18.1901C14.8691 20.1231 16.4361 21.6901 18.3691 21.6901Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.9998 22.8202L20.8398 20.6702" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 9756604..a783b50 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -1,48 +1,70 @@
+import type { ReactElement } from "react";
+
+import nextcloud from "../assets/images/nextcloud.svg";
+import navidrome from "../assets/images/navidrome.svg";
 import forgejo from "../assets/images/forgejo.svg";
+import search from "../assets/images/search.svg";
+import github from "../assets/images/github.svg";
 import gitea from "../assets/images/gitea.svg";
 
-export default function Footer() {
+interface IconLink {
+    label: string;
+    url: string;
+    src: string;
+    invert?: boolean;
+}
+
+const iconLinks: IconLink[] = [
+    {
+        label: "Nextcloud",
+        url: "https://nextcloud.aramjonghu.dev",
+        src: nextcloud,
+    },
+    { label: "Navidrome", url: "https://music.aramjonghu.dev", src: navidrome },
+    {
+        label: "Forgejo Git",
+        url: "https://git.aramjonghu.dev/AramJonghu",
+        src: forgejo,
+    },
+    {
+        label: "Omnisearch",
+        url: "https://xng.aramjonghu.dev",
+        src: search,
+        invert: true,
+    },
+    {
+        label: "Gitea zach-dev",
+        url: "https://git.zach-dev.cc/AramJonghu",
+        src: gitea,
+    },
+];
+
+export default function Footer(): ReactElement {
     const currentYear = new Date().getFullYear();
 
-    const goToForgejo = () => {
-        window.location.href =
-            "https://git.aramjonghu.dev/AramJonghu/aramjonghu-site";
-    };
-
-    const goToGitea = () => {
-        window.location.href =
-            "https://git.zach-dev.cc/AramJonghu/aramjonghu-site";
-    };
-
     return (
         <footer className="bg-ctp-mantle flex flex-col md:flex-row items-center justify-between gap-3 px-4 md:px-24 py-6 border-t border-ctp-lavender-800 mt-10">
             <p className="text-sm text-ctp-text">
                 &copy; {currentYear} AramJonghu. All rights reserved.
             </p>
-            <div className="flex items-center">
-                <p className="text-sm text-ctp-text hidden sm:block">
-                    Check out the website repository here:
-                </p>
-
-                <button
-                    onClick={goToForgejo}
-                    aria-label="Forgejo repository"
-                    className="ml-2 p-2 cursor-pointer hover:opacity-80 transition-opacity"
-                >
-                    <img
-                        src={forgejo}
-                        alt="Forgejo repository"
-                        className="w-7 h-7"
-                    />
-                </button>
-
-                <button
-                    onClick={goToGitea}
-                    aria-label="Gitea mirror"
-                    className="ml-2 p-2 cursor-pointer hover:opacity-80 transition-opacity"
-                >
-                    <img src={gitea} alt="Gitea mirror" className="w-7 h-7" />
-                </button>
+            <div className="flex items-center gap-2">
+                {iconLinks.map((icon) => (
+                    <a
+                        key={icon.label}
+                        href={icon.url}
+                        target="_blank"
+                        rel="noreferrer"
+                        aria-label={icon.label}
+                        title={icon.label}
+                        className="p-2 cursor-pointer hover:opacity-80 transition-opacity"
+                    >
+                        <img
+                            src={icon.src}
+                            alt={icon.label}
+                            className={`w-7 h-7 ${icon.invert ? "icon-invert" : ""}`}
+                        />
+                    </a>
+                ))}
             </div>
         </footer>
     );
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 349889a..bfc8ff2 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,11 +1,6 @@
 import { useState } from "react";
 import Aku from "../assets/images/aku.png";
 
-interface NavItem {
-    label: string;
-    url: string;
-}
-
 interface PageItem {
     label: string;
     url: string;
@@ -24,16 +19,9 @@ export default function Header({ theme }: HeaderProps) {
     const { theme: currentTheme, toggleTheme } = theme;
     const [menuOpen, setMenuOpen] = useState(false);
 
-    const navItems: NavItem[] = [
-        { label: "Nextcloud", url: "https://nextcloud.aramjonghu.dev" },
-        { label: "Navidrome", url: "https://music.aramjonghu.dev" },
-        { label: "Forgejo Git", url: "https://git.aramjonghu.dev" },
-        { label: "Omnisearch", url: "https://xng.aramjonghu.dev" },
-        { label: "Gitea zach-dev", url: "https://git.zach-dev.cc" },
-    ];
-
     const pageItems: PageItem[] = [
         { label: "Stream", url: "/stream" },
+        { label: "Portfolio", url: "/portfolio" },
         { label: "Contact", url: "/contact" },
     ];
 
@@ -81,17 +69,6 @@ export default function Header({ theme }: HeaderProps) {
                 />
             </div>
 
-            <nav className="hidden md:flex flex-wrap gap-2 md:gap-3 items-start">
-                {navItems.map((nav) => (
-                    <a
-                        key={nav.label}
-                        href={nav.url}
-                        className="ui-btn ui-btn:hover px-2 py-1 md:px-3 md:py-1"
-                    >
-                        {nav.label}
-                    </a>
-                ))}
-            </nav>
             <nav className="hidden md:flex flex-wrap gap-2 md:gap-3 items-end">
                 {pageItems.map((page) => (
                     <a
@@ -121,17 +98,6 @@ export default function Header({ theme }: HeaderProps) {
                 }`}
             >
                 <nav className="flex flex-col gap-2 w-full max-w-sm mx-auto border-t border-ctp-lavender-800 pt-4">
-                    {navItems.map((item) => (
-                        <a
-                            key={item.label}
-                            href={item.url}
-                            className="ui-btn ui-btn:hover px-2 py-1 w-full"
-                            onClick={closeMenu}
-                        >
-                            {item.label}
-                        </a>
-                    ))}
-                    <div className="w-full border-t border-ctp-lavender-800 my-2" />
                     {pageItems.map((item) => (
                         <a
                             key={item.label}