diff --git a/app/layout.tsx b/app/layout.tsx
index 969f380..f9812b0 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,20 +1,23 @@
 import './globals.css'
 import { PageNavbar } from '@/components/navbar'
+import * as fs from 'fs';
 
 export const metadata = {
   title: 'Stellaris Ethics Compass',
   description: '',
 }
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
+  const navLinks = JSON.parse(fs.readFileSync('public/routes_api.json', 'utf-8')).links;
+  
   return (
     <html lang="en">
       <body>
-        <PageNavbar />
+        <PageNavbar links={navLinks}/>
         {children}
       </body>
     </html>
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 33ee205..f09eac8 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -3,11 +3,24 @@ import '@/app/globals.css'
 import { usePathname } from 'next/navigation'
 import Links from '@/public/routes.json'; // move to api again but use this for inital hydration
 import Link from 'next/link';
+import React from 'react';
 
-export const PageNavbar = () => {
+export const PageNavbar = (props: {links: any}) => {
   const path = usePathname();
 
   let navbar: JSX.Element 
+  if (props.links.length != 0) {
+    navbar = (
+      <nav className='navbar'>
+        {props.links.map((item: {name: string, href: string}) => (
+          <Link className={(path === item.href ? "active" : "")} key={item.name} href={item.href}>
+            {item.name}
+          </Link>
+        ))}
+      </nav>
+    );
+  }
+  else {
     navbar = (
       <nav className='navbar'>
         {Links.links.map((item) => (
@@ -17,5 +30,8 @@ export const PageNavbar = () => {
         ))}
       </nav>
     );
+  }
+    
+    
   return navbar;
 }
\ No newline at end of file
