diff --git a/src/components/Branding/FullLogo.tsx b/src/components/Branding/FullLogo.tsx
new file mode 100644
index 00000000..6d333b28
--- /dev/null
+++ b/src/components/Branding/FullLogo.tsx
@@ -0,0 +1,9 @@
+
+const FullLogo = () => {
+    return <svg width="168" height="22" viewBox="0 0 168 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M17.8026 0.636363V21H14.0838L5.22443 8.18324H5.07528V21H0.769886V0.636363H4.5483L13.3381 13.4432H13.517V0.636363H17.8026ZM20.5842 4.18608V0.636363H37.3086V4.18608H31.0742V21H26.8185V4.18608H20.5842ZM40.0629 21V0.636363H44.3683V9.03835H53.1083V0.636363H57.4038V21H53.1083V12.5881H44.3683V21H40.0629ZM73.5316 0.636363H77.837V13.8608C77.837 15.3456 77.4824 16.6449 76.7731 17.7585C76.0704 18.8722 75.0861 19.7405 73.82 20.3636C72.5539 20.9801 71.079 21.2884 69.3952 21.2884C67.7049 21.2884 66.2267 20.9801 64.9606 20.3636C63.6945 19.7405 62.7101 18.8722 62.0075 17.7585C61.3048 16.6449 60.9535 15.3456 60.9535 13.8608V0.636363H65.2589V13.4929C65.2589 14.2685 65.4279 14.9579 65.766 15.5611C66.1107 16.1643 66.5946 16.6383 67.2177 16.983C67.8408 17.3277 68.5666 17.5 69.3952 17.5C70.2305 17.5 70.9563 17.3277 71.5728 16.983C72.1959 16.6383 72.6765 16.1643 73.0146 15.5611C73.3593 14.9579 73.5316 14.2685 73.5316 13.4929V0.636363ZM89.033 0.636363H90.3853L98.2305 19.2102H98.3697L106.215 0.636363H107.567V21H106.374V3.58949H106.255L98.8867 21H97.7134L90.3455 3.58949H90.2262V21H89.033V0.636363ZM129.648 10.8182C129.648 12.9195 129.284 14.7557 128.555 16.3267C127.826 17.8911 126.811 19.1075 125.512 19.9759C124.219 20.8442 122.728 21.2784 121.038 21.2784C119.341 21.2784 117.843 20.8442 116.543 19.9759C115.251 19.1009 114.24 17.8812 113.511 16.3168C112.781 14.7457 112.417 12.9129 112.417 10.8182C112.417 8.71686 112.781 6.884 113.511 5.3196C114.246 3.75521 115.261 2.53882 116.553 1.67045C117.846 0.795454 119.341 0.357954 121.038 0.357954C122.728 0.357954 124.219 0.792139 125.512 1.66051C126.811 2.52888 127.826 3.74858 128.555 5.3196C129.284 6.884 129.648 8.71686 129.648 10.8182ZM128.435 10.8182C128.435 8.92898 128.117 7.29167 127.481 5.90625C126.851 4.52083 125.979 3.45028 124.866 2.6946C123.752 1.93229 122.476 1.55114 121.038 1.55114C119.599 1.55114 118.323 1.92898 117.21 2.68466C116.096 3.43371 115.221 4.50426 114.585 5.89631C113.955 7.28172 113.64 8.92235 113.64 10.8182C113.64 12.6941 113.951 14.3281 114.575 15.7202C115.204 17.1056 116.076 18.1795 117.19 18.9418C118.303 19.7041 119.586 20.0852 121.038 20.0852C122.476 20.0852 123.752 19.7074 124.866 18.9517C125.979 18.1894 126.851 17.1155 127.481 15.7301C128.117 14.3447 128.435 12.7074 128.435 10.8182ZM140.153 21H134.506V0.636363H140.591C142.5 0.636363 144.134 1.04072 145.493 1.84943C146.852 2.65814 147.893 3.81818 148.615 5.32954C149.344 6.83428 149.705 8.64062 149.699 10.7486C149.692 12.9029 149.314 14.7457 148.565 16.277C147.816 17.8016 146.732 18.9716 145.314 19.7869C143.895 20.5956 142.175 21 140.153 21ZM135.749 19.8466H140.104C141.92 19.8466 143.451 19.4853 144.697 18.7628C145.944 18.0336 146.885 16.9896 147.521 15.6307C148.164 14.2718 148.482 12.6444 148.476 10.7486C148.476 8.87926 148.168 7.27841 147.551 5.94602C146.935 4.60701 146.036 3.57955 144.857 2.86364C143.683 2.14773 142.245 1.78977 140.541 1.78977H135.749V19.8466ZM165.526 5.72727C165.42 4.46117 164.903 3.43703 163.975 2.65483C163.053 1.87263 161.86 1.48153 160.395 1.48153C159.408 1.48153 158.529 1.66383 157.76 2.02841C156.991 2.39299 156.388 2.89015 155.951 3.51989C155.513 4.14962 155.294 4.87216 155.294 5.6875C155.294 6.21117 155.394 6.68513 155.593 7.10938C155.798 7.52699 156.087 7.90151 156.458 8.23295C156.829 8.55776 157.27 8.8428 157.78 9.08807C158.291 9.33333 158.854 9.54877 159.471 9.73438L161.698 10.3906C162.46 10.6226 163.163 10.8911 163.806 11.196C164.455 11.5009 165.019 11.8655 165.496 12.2898C165.98 12.7074 166.355 13.1979 166.62 13.7614C166.891 14.3248 167.027 14.9744 167.027 15.7102C167.027 16.7841 166.749 17.7453 166.192 18.5938C165.642 19.4422 164.856 20.1117 163.836 20.6023C162.821 21.0862 161.625 21.3281 160.246 21.3281C158.934 21.3281 157.79 21.1061 156.816 20.6619C155.848 20.2178 155.082 19.6013 154.519 18.8125C153.955 18.017 153.637 17.1023 153.564 16.0682H154.837C154.903 16.91 155.172 17.6392 155.642 18.2557C156.12 18.8655 156.753 19.3362 157.542 19.6676C158.33 19.9991 159.232 20.1648 160.246 20.1648C161.34 20.1648 162.304 19.9792 163.14 19.608C163.975 19.2301 164.628 18.7064 165.098 18.0369C165.569 17.3674 165.804 16.5885 165.804 15.7003C165.804 14.9844 165.635 14.3712 165.297 13.8608C164.959 13.3504 164.459 12.9096 163.796 12.5384C163.14 12.1671 162.324 11.8357 161.35 11.544L158.973 10.8281C157.382 10.3442 156.166 9.68466 155.324 8.84943C154.489 8.0142 154.071 6.97348 154.071 5.72727C154.071 4.67992 154.35 3.75189 154.907 2.94318C155.463 2.12784 156.219 1.48816 157.174 1.02415C158.135 0.560132 159.219 0.328125 160.425 0.328125C161.638 0.328125 162.709 0.563447 163.637 1.03409C164.565 1.49811 165.301 2.13778 165.844 2.95312C166.388 3.76184 166.689 4.68655 166.749 5.72727H165.526Z" fill="black"/>
+    </svg>
+    
+}
+
+export default FullLogo;
\ No newline at end of file
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 22e0920a..d907e277 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,11 +1,12 @@
 import { Chip, IconButton } from "@mui/joy";
 import { GitHub, Mail } from "react-feather";
+import FullLogo from "./Branding/FullLogo";
 
 const Footer = () => {
     return (
         <footer className="hidden md:grid w-screen dark:bg-neutral-800 bg-neutral-50 p-6 rounded-lg shadow-lg grid-cols-2">
             <div className="">
-                <h1 className="font-bold text-3xl">NTHUMods <Chip variant="outlined">ALPHA</Chip></h1>
+                <h1 className="font-bold text-3xl flex flex-row space-x-3 mb-2"><FullLogo/> <Chip variant="outlined">ALPHA</Chip></h1>
                 <p className="text-gray-600 dark:text-gray-400">Made with ❤️ by students for students</p>
                 <div className="py-2">
                 <p className="text-xs text-gray-600 dark:text-gray-400">We desperately need more contributers, join us if you're interested</p>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 071b0849..106d1417 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,7 +1,7 @@
-'use client';
-import { FC, useMemo } from "react";
-import { formatDistance, parse } from 'date-fns';
+'use client';;
+import { FC } from "react";
 import { useSettings } from "@/hooks/contexts/settings";
+import FullLogo from "./Branding/FullLogo";
 const Header: FC = () => {
 
     const { language } = useSettings();
@@ -21,7 +21,7 @@ const Header: FC = () => {
 
     return (
         <header className="h-14 w-screen bg-gray-100 dark:bg-neutral-800 shadow-md bg-neu px-8 py-4 md:col-span-2 flex flex-row justify-between items-center">
-            <h1 className="font-bold text-lg">NTHUMods</h1>
+            <FullLogo />
             <p className="text-sm text-gray-600 dark:text-gray-400">
             {language == 'en' &&
                 (currentSemester ?`AC${currentSemester.year} Sem ${currentSemester.semester}, Week ${currentWeek}`: `No Active Semester`)}
diff --git a/src/components/SideNav.tsx b/src/components/SideNav.tsx
index 56aa0bc2..d4e76106 100644
--- a/src/components/SideNav.tsx
+++ b/src/components/SideNav.tsx
@@ -16,36 +16,43 @@ const SideNav:FC = () => {
         title: string;
         href: Route;
         icon: JSX.Element;
+        color: string;
     }[] = [
         {
             title: dict.navigation.today,
             href: `/${language}/today`,
-            icon: <I.Clock strokeWidth="1"/>
+            icon: <I.Clock strokeWidth="1"/>,
+            color: '#7EC96D'
         },
         {
             title: dict.navigation.timetable,
             href: `/${language}/timetable`,
-            icon: <I.Calendar strokeWidth="1"/>
+            icon: <I.Calendar strokeWidth="1"/>,
+            color: '#E47B86'
         },
         {
             title: dict.navigation.courses,
             href: `/${language}/courses`,
-            icon: <I.BookOpen strokeWidth="1"/>
+            icon: <I.BookOpen strokeWidth="1"/>,
+            color: '#7BC2CF'
         },
         {
             title: dict.navigation.venues,
             href: `/${language}/venues`,
-            icon: <I.Map strokeWidth="1"/>
+            icon: <I.Map strokeWidth="1"/>,
+            color: '#AEA3C9'
         },
         {
             title: dict.navigation.bus,
             href: `/${language}/bus`,
-            icon: <I.Navigation strokeWidth="1"/>
+            icon: <I.Navigation strokeWidth="1"/>,
+            color: '#EB8751'
         },
         {
             title: dict.navigation.settings,
             href: `/${language}/settings`,
-            icon: <I.Settings strokeWidth="1"/>
+            icon: <I.Settings strokeWidth="1"/>,
+            color: '#B46DD6'
         }
     ]
     return (<>
@@ -61,9 +68,9 @@ const SideNav:FC = () => {
         </nav>
         <nav className="hidden h-screen md:flex flex-col w-max gap-4 p-6">
             {links.map((link, index) => (
-                <Link className={`flex items-center gap-4 hover:text-fuchsia-600 hover:underline transition-colors ${link.href == pathname ? "text-fuchsia-600":"text-gray-600 dark:text-gray-400"}`}
+                <Link className={`flex items-center gap-3 hover:text-fuchsia-600 hover:underline transition-colors ${link.href == pathname ? "text-fuchsia-600":"text-gray-600 dark:text-gray-400"}`}
                     key={index} href={link.href}>
-
+                    <div className={`w-[6px] h-7 ${link.href != pathname ? 'max-h-1': 'max-h-6'} transition`} style={{backgroundColor: link.color}}></div>
                     <span className="w-6">
                         {link.icon}
                     </span>