diff --git a/components/Loader.js b/components/Loader.js
new file mode 100644
index 0000000..ad4cbac
--- /dev/null
+++ b/components/Loader.js
@@ -0,0 +1,10 @@
+import css from "challenges/styles/loader.module.scss";
+
+/**
+ * Simple Loading component which can be styled afterwards
+ * @param {props} props 
+ * @returns Loader Component
+ */
+export default function Loader(props) {
+   return <div {...props} className={css.loader}></div>;
+}
\ No newline at end of file
diff --git a/layouts/Header.js b/layouts/Header.js
index a6c9c16..d571366 100644
--- a/layouts/Header.js
+++ b/layouts/Header.js
@@ -1,7 +1,9 @@
 import { Component, createRef } from "react";
+import { withRouter } from "next/router";
+import Link from "next/link";
+
 import css from "challenges/styles/header.module.scss";
 
-import Link from "next/link";
 import Logo from "challenges/assets/logo.svg";
 
 
@@ -18,21 +20,25 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 
-export class Header extends Component {
-   constructor() {
-      super();
+class Header extends Component {
+   constructor(props) {
+      super(props);
+
+      this.props = props;
 
       this.header = createRef(null);
       this.headerPlaceholder = createRef(null);
       this.buttonText = createRef(null);
 
-      this.toggleWidth = this.toggleWidth.bind(this);
-
       /**
        * true = expanded
        * false = collapsed
-       */
+      */
       this.width = true;
+
+
+      this.toggleWidth = this.toggleWidth.bind(this);
+      this.highlightActiveLink = this.highlightActiveLink.bind(this);
    }
 
 
@@ -57,20 +63,64 @@ export class Header extends Component {
    }
 
 
+   /**
+    * Highlights the current route by adding a the 
+    * css.active class
+    */
+   highlightActiveLink() {
+
+      const pathname = this.props.router.asPath;
+
+      const results = document.querySelectorAll(`.${css.scrollSection} a[href="${pathname}"]`);
+      const oldRouteElements = document.querySelectorAll(`.${css.scrollSection} a.${css.active}`);
+
+      for (let i = 0; i < oldRouteElements.length; i++) {
+         const old = oldRouteElements[i];
+         old.classList.remove(css.active);
+
+      }
+
+      for (let i = 0; i < results.length; i++) {
+         const result = results[i];
+         result.classList.add(css.active);
+      }
+
+   }
+
+
+   componentDidMount() {
+
+      this.props.router.events.on("routeChangeComplete", this.highlightActiveLink);
+      this.props.router.events.on("routeChangeError", this.highlightActiveLink);
+      this.highlightActiveLink();
+
+   }
+
+
+   componentWillUnmount() {
+
+      this.props.router.events.off("routeChangeComplete", this.highlightActiveLink);
+      this.props.router.events.off("routeChangeError", this.highlightActiveLink);
+
+   }
+
+
    render() {
 
+      const router = this.router;
+
       return <>
          <section className={css.headerPlaceholder} ref={this.headerPlaceholder}>
             <nav className={css.header} id="header" ref={this.header}>
 
-               <Link href="/" >
+               <Link href="/" prefetch={false}>
                   <Logo />
                   <p>Challenge Tracker</p>
                </Link>
 
                <div className={css.scrollSection}>
 
-                  <Link href="/">
+                  <Link href="/" prefetch={false}>
                      <FontAwesomeIcon
                         icon={faHouse}
                      />
@@ -78,35 +128,35 @@ export class Header extends Component {
                      <p>Home</p>
                   </Link>
 
-                  <Link href="/challenges">
+                  <Link href="/challenges" prefetch={false}>
                      <FontAwesomeIcon
                         icon={faCompass}
                      />
                      <p>Challenges</p>
                   </Link>
 
-                  <Link href="/challenges/0">
+                  <Link href="/challenges/0" prefetch={false}>
                      <FontAwesomeIcon
                         icon={faRankingStar}
                      />
                      <p>Leaderboards</p>
                   </Link>
 
-                  <Link href="/titles">
+                  <Link href="/titles" prefetch={false}>
                      <FontAwesomeIcon
                         icon={faAward}
                      />
                      <p>Titles</p>
                   </Link>
 
-                  <Link href="/communities">
+                  <Link href="/communities" prefetch={false}>
                      <FontAwesomeIcon
                         icon={faUserGroup}
                      />
                      <p>Communities</p>
                   </Link>
 
-                  <Link href="/settings">
+                  <Link href="/settings" prefetch={false}>
                      <FontAwesomeIcon
                         icon={faGear}
                      />
@@ -131,4 +181,6 @@ export class Header extends Component {
       </>;
 
    }
-}
\ No newline at end of file
+}
+
+export default withRouter(Header);
\ No newline at end of file
diff --git a/layouts/Layout.js b/layouts/Layout.js
index a8a1ce1..ccdb245 100644
--- a/layouts/Layout.js
+++ b/layouts/Layout.js
@@ -1,4 +1,4 @@
-import { Header } from "./Header";
+import Header from "./Header";
 import css from "challenges/styles/layout.module.scss";
 
 export default function Layout(props) {
diff --git a/pages/_app.js b/pages/_app.js
index 1c3f96f..73b98e4 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,33 +1,106 @@
 import { Noto_Sans, Noto_Sans_JP, Noto_Sans_KR, Source_Sans_Pro } from "@next/font/google";
-import Layout from "challenges/layouts/Layout";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
 import "challenges/styles/global.css";
 
+import Loader from "challenges/components/Loader";
+import Layout from "challenges/layouts/Layout";
+
+
+/**
+ * Fonts used for this Site. 
+ * 
+ * Noto is the default font. Additionally, notoJP and 
+ * notoKR should cover most of the ASIA regions to
+ * not cause any font issues. 
+ * 
+ * Source Sans Pro is currently only used for the logo
+ */
 const noto = Noto_Sans({
   weight: ["300", "400", "700"],
   subsets: ["latin", "greek"],
   variable: "--Noto"
 });
-
 const notoJP = Noto_Sans_JP({
   weight: ["400", "700"],
   subsets: ["latin"],
   variable: "--NotoJP"
 });
-
 const notoKR = Noto_Sans_KR({
   weight: ["400", "700"],
   subsets: ["latin"],
   variable: "--NotoKR"
 });
-
 const source = Source_Sans_Pro({
   weight: ["700"],
   subsets: ["latin"],
   variable: "--Source"
 });
 
-export default function App({ Component, pageProps }) {
+
+export default function ChallengeTracker({ Component, pageProps }) {
+
+  /**
+   * Handler to show a loading animation instead of a
+   * stuck screen when changing routes
+   */
+  const router = useRouter();
+  const [lastKnownUrl, setLastKnownUrl] = useState(router.asPath);
+  const [loading, setLoading] = useState(false);
+
+
+  /**
+   * Handle the loading animation
+   * 
+   * Set the state "loading" to true if the page is
+   * currently changing, and render the <Loading/>
+   * componen instead. 
+   */
+  useEffect(() => {
+    const handleStart = (url) => {
+      if (url === lastKnownUrl) {
+        return;
+      }
+      setLastKnownUrl(url);
+      setLoading(true);
+    };
+
+    const handleStop = () => {
+      setLoading(false);
+    };
+
+    router.events.on("routeChangeStart", handleStart);
+    router.events.on("routeChangeComplete", handleStop);
+    router.events.on("routeChangeError", handleStop);
+
+    return () => {
+      /**
+       * Unmount, even tho probably unnecessary as in _app
+       */
+      router.events.off("routeChangeStart", handleStart);
+      router.events.off("routeChangeComplete", handleStop);
+      router.events.off("routeChangeError", handleStop);
+    };
+  }, [router, setLoading, lastKnownUrl, setLastKnownUrl]);
+
+
+  /**
+   * Return the app body in the <Layout/>. 
+   * Shows a loader if(loading === true)
+   */
   return <Layout className={`${noto.variable} ${notoJP.variable} ${notoKR.variable} ${source.variable}`}>
-    <Component {...pageProps} />
+
+    {
+      loading
+        ? <Loader style={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%,-50%)"
+        }} />
+        : <Component {...pageProps} />
+    }
+
   </Layout>;
 }
diff --git a/styles/_variables.scss b/styles/_variables.scss
index 3337760..f54da37 100644
--- a/styles/_variables.scss
+++ b/styles/_variables.scss
@@ -6,7 +6,7 @@ $selected: rgb(13, 189, 255) !default;
 $light0: #fff !default;
 $light1: #fff !default;
 $light2: rgb(206, 206, 210) !default;
-$light3: rgb(200, 200, 204) !default;
+$light3: rgb(180, 180, 184) !default;
 
 /* color variables */
 $win: #4287f5 !default;
diff --git a/styles/header.module.scss b/styles/header.module.scss
index e07d31b..f3387f4 100644
--- a/styles/header.module.scss
+++ b/styles/header.module.scss
@@ -78,16 +78,25 @@ $width: 230px;
          padding: 20px 10px;
          overflow: hidden;
 
-         color: $light2;
+         color: $light3;
          white-space: nowrap;
 
          transition: .25s color;
 
+         &.active {
+
+            p,
+            svg {
+               color: $light0;
+            }
+         }
+
+
          p {
             padding: 0;
             margin: 0;
             flex: 1;
-            color: $light2;
+            color: $light3;
             font-size: 1rem;
             padding-left: 10px;
 
@@ -95,6 +104,7 @@ $width: 230px;
          }
 
          svg {
+            color: $light3;
             text-align: center;
             width: 2rem;
          }
diff --git a/styles/loader.module.scss b/styles/loader.module.scss
new file mode 100644
index 0000000..f187cb9
--- /dev/null
+++ b/styles/loader.module.scss
@@ -0,0 +1,27 @@
+@import 'variables';
+
+.loader {
+   height: 30px;
+   width: 30px;
+   font-size: 10px;
+   position: relative;
+   text-indent: -9999em;
+   box-sizing: border-box;
+   border-left: 3px solid $dark3;
+   border-right: 3px solid $dark3;
+   border-bottom: 3px solid $dark3;
+   border-top: 3px solid $selected;
+   transform: translateZ(0);
+   animation: load 1.3s infinite cubic-bezier(.35, .72, .54, .90);
+   border-radius: 50%;
+
+   @keyframes load {
+      from {
+         transform: rotate(0deg)
+      }
+
+      to {
+         transform: rotate(360deg)
+      }
+   }
+}
\ No newline at end of file
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..922cd12
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,5 @@
+{
+   "github": {
+      "silent": true
+   }
+}
\ No newline at end of file