diff --git a/component/Navbar.tsx b/component/Navbar.tsx
index e4810c08..48bd0ea1 100644
--- a/component/Navbar.tsx
+++ b/component/Navbar.tsx
@@ -20,7 +20,7 @@ export default function Navbar() {
           </div>
 
           <div className="">
-            <Link href="articles">
+            <Link href="/articles">
               <span className="pl-8 text-black font-light text-sm lg:text-md uppercase tracking-wider cursor-pointer">
                 Articles
               </span>
@@ -41,7 +41,7 @@ export default function Navbar() {
                 Related
               </span>
             </a> */}
-            <Link href="about" className="no-underline">
+            <Link href="/about" className="no-underline">
               <span className="hidden cursor-pointer sm:inline pl-8 text-black font-light text-sm lg:text-md uppercase tracking-wider hover:text-reactGallery">
                 About
               </span>
diff --git a/pages/animation.tsx b/pages/animation.tsx
index 7e166d0c..0f4367b8 100644
--- a/pages/animation.tsx
+++ b/pages/animation.tsx
@@ -1,16 +1,16 @@
-import React from "react";
-import { Layout } from "../component/Layout";
-import TitleAndDescription from "../component/TitleAndDescription";
-import ChartFamilySection from "../component/ChartFamilySection";
+import React from 'react';
+import { Layout } from '../component/Layout';
+import TitleAndDescription from '../component/TitleAndDescription';
+import ChartFamilySection from '../component/ChartFamilySection';
 
-import Link from "next/link";
-import GraphGallery from "component/GraphGallery";
-import { LinkAsButton } from "component/LinkAsButton";
+import Link from 'next/link';
+import GraphGallery from 'component/GraphGallery';
+import { LinkAsButton } from 'component/LinkAsButton';
 
 const graphDescription = (
   <>
     <p>
-      <b>Animation</b> is both the most <b>challenging</b> and the most{" "}
+      <b>Animation</b> is both the most <b>challenging</b> and the most{' '}
       <b>exciting</b> part of an interactive chart. Animation is like salt: use
       the right amount of it and your creation is a delight. Too much of it and
       it <b>spoils the dish</b> 🤌.
@@ -48,12 +48,12 @@ export default function Home() {
       </p>
       <p>
         But I plan to write some <b>complete tutorials</b> on this passionating
-        and complicated topic. You can <Link href="/Subscribe">subscribe</Link>{" "}
+        and complicated topic. You can <Link href="/subscribe">subscribe</Link>{' '}
         to the project to know when it's ready!
       </p>
       <p>
         <br />
-      </p>{" "}
+      </p>{' '}
       <LinkAsButton isFilled size="sm" href="/subscribe">
         Subscribe
       </LinkAsButton>
@@ -62,14 +62,14 @@ export default function Home() {
       </p>
       <GraphGallery
         images={[
-          "histogram-dataset-transition.gif",
-          "violinBoxplotTransition.png",
-          "violin-bucket-size-effect.gif",
-          "boxplot-violin-transition.gif",
-          "barplotDatasetAnimation.gif",
-          "bubble-plot-dataset-transition.gif",
-          "line-chart-data-transition.gif",
-          "streamgraph-offset-type-transition.gif",
+          'histogram-dataset-transition.gif',
+          'violinBoxplotTransition.png',
+          'violin-bucket-size-effect.gif',
+          'boxplot-violin-transition.gif',
+          'barplotDatasetAnimation.gif',
+          'bubble-plot-dataset-transition.gif',
+          'line-chart-data-transition.gif',
+          'streamgraph-offset-type-transition.gif',
         ]}
       />
       <div className="full-bleed border-t h-0 bg-gray-100 mb-3 mt-24" />
diff --git a/pages/example/radar-chart-animation.tsx b/pages/example/radar-chart-animation.tsx
index 162169f0..801d0681 100644
--- a/pages/example/radar-chart-animation.tsx
+++ b/pages/example/radar-chart-animation.tsx
@@ -190,7 +190,7 @@ export default function Home() {
       <CodeBlock code={snippetAnim} />
       <p>
         I plan to write some <b>complete tutorials</b> on this passionating and
-        complicated topic. You can <Link href="/Subscribe">subscribe</Link> to
+        complicated topic. You can <Link href="/subscribe">subscribe</Link> to
         the project to know when it's ready!
       </p>
 
diff --git a/pages/interactivity.tsx b/pages/interactivity.tsx
index 0be6994d..5df27baf 100644
--- a/pages/interactivity.tsx
+++ b/pages/interactivity.tsx
@@ -1,17 +1,17 @@
-import React from "react";
-import { Layout } from "../component/Layout";
-import TitleAndDescription from "../component/TitleAndDescription";
-import ChartFamilySection from "../component/ChartFamilySection";
+import React from 'react';
+import { Layout } from '../component/Layout';
+import TitleAndDescription from '../component/TitleAndDescription';
+import ChartFamilySection from '../component/ChartFamilySection';
 
-import Link from "next/link";
-import GraphGallery from "component/GraphGallery";
-import { LinkAsButton } from "component/LinkAsButton";
+import Link from 'next/link';
+import GraphGallery from 'component/GraphGallery';
+import { LinkAsButton } from 'component/LinkAsButton';
 
 const graphDescription = (
   <>
     <p>
       <b>Interactivity</b> is a key feature of any chart displayed on the web.
-      It includes <b>tooltip</b>, <b>hover effect</b>,{" "}
+      It includes <b>tooltip</b>, <b>hover effect</b>,{' '}
       <b>cross-graph interaction</b>, <b>zooming</b>, <b>panning</b> and more.
     </p>
     <p>
@@ -46,12 +46,12 @@ export default function Home() {
       </p>
       <p>
         But I plan to write some <b>complete tutorials</b> on this passionating
-        and complicated topic. You can <Link href="/Subscribe">subscribe</Link>{" "}
+        and complicated topic. You can <Link href="/subscribe">subscribe</Link>{' '}
         to the project to know when it's ready!
       </p>
       <p>
         <br />
-      </p>{" "}
+      </p>{' '}
       <LinkAsButton isFilled size="sm" href="/subscribe">
         Subscribe
       </LinkAsButton>
@@ -60,17 +60,17 @@ export default function Home() {
       </p>
       <GraphGallery
         images={[
-          "streamgraph-application.gif",
-          "scatterplotHoverEffect.gif",
-          "histogram-dataset-transition.gif",
-          "violinBoxplotTransition.png",
-          "violin-bucket-size-effect.gif",
-          "boxplot-violin-transition.gif",
-          "barplotDatasetAnimation.gif",
-          "bubble-plot-dataset-transition.gif",
-          "line-chart-data-transition.gif",
-          "streamgraph-offset-type-transition.gif",
-          "streamgraph-hover-effect.gif",
+          'streamgraph-application.gif',
+          'scatterplotHoverEffect.gif',
+          'histogram-dataset-transition.gif',
+          'violinBoxplotTransition.png',
+          'violin-bucket-size-effect.gif',
+          'boxplot-violin-transition.gif',
+          'barplotDatasetAnimation.gif',
+          'bubble-plot-dataset-transition.gif',
+          'line-chart-data-transition.gif',
+          'streamgraph-offset-type-transition.gif',
+          'streamgraph-hover-effect.gif',
         ]}
       />
       <div className="full-bleed border-t h-0 bg-gray-100 mb-3 mt-24" />
diff --git a/pages/line-chart.tsx b/pages/line-chart.tsx
index a932e96e..19df8b7b 100644
--- a/pages/line-chart.tsx
+++ b/pages/line-chart.tsx
@@ -286,7 +286,7 @@ export default function Home() {
         <br />
       </p>{' '}
       <p>Subscribe to the gallery to know when it is ready!</p>
-      <LinkAsButton isFilled size="sm" href="Subscribe">
+      <LinkAsButton isFilled size="sm" href="/subscribe">
         Subscribe
       </LinkAsButton>
       <p>