diff --git a/src/assets/studioBenker.png b/src/assets/studioBenker.png
new file mode 100644
index 0000000..261daf5
Binary files /dev/null and b/src/assets/studioBenker.png differ
diff --git a/src/components/About.astro b/src/components/About.astro
index 5804e7e..0f9fc5a 100644
--- a/src/components/About.astro
+++ b/src/components/About.astro
@@ -1,15 +1,19 @@
 ---
-import { translations } from '../data/i18n.js';
+import { translations } from '@data/i18n.js';
+import { Image } from 'astro:assets';
+import benker from '@assets/studioBenker.png';
 const { lang = 'no' } = Astro.props;
 const t = translations[lang].about;
 ---
 
-<main class="flex gap-8 flex-col">
+<main class="flex gap-8 flex-col max-w-prose">
   <h1 class="text-4xl font-bold">{t.title}</h1>
-  <div class="flex gap-2 text-lg max-w-prose flex-col">
+  <div class="flex gap-2 text-lg flex-col">
     <p>{t.p1}</p>
     <p>{t.p2}</p>
     <p>{t.p3}</p>
     <p>{t.p4}</p>
+    <Image src={benker} alt="Studio Benker" class="place-self-center w-full" width={600} height={400} loading="eager" /> 
+    <p set:html={t.p5}></p>
   </div>
 </main>
\ No newline at end of file
diff --git a/src/components/FAQ.astro b/src/components/FAQ.astro
index 8d4b85f..5f1f0d9 100644
--- a/src/components/FAQ.astro
+++ b/src/components/FAQ.astro
@@ -1,14 +1,14 @@
 ---
-import { translations } from '../data/i18n.js';
+import { translations } from '@data/i18n.js';
 const { lang = 'no' } = Astro.props;
 const t = translations[lang].faq;
 ---
 
-<section class="flex flex-col gap-4">
-    <h2 class="text-xl font-bold">{t.title}</h2>
-    <ul class="flex flex-col gap-2">
+<section class="flex flex-col gap-6 max-w-prose">
+    <h2 class="text-2xl font-bold">{t.title}</h2>
+    <ul class="flex flex-col gap-4">
         <li>
-            <strong>{t.q1} </strong>
+            <strong>{t.q1}</strong>
             <p set:html={t.a1}></p>
         </li>
         <li>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index a4eaf50..95bcbc8 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,32 +2,20 @@
 import { Image } from 'astro:assets';
 import logo from '@assets/logo.png';
 import DNS  from '@assets/DNS-logo-hvit.png';
-import { FaFacebook, FaInstagram, FaTiktok } from 'react-icons/fa';
-import { translations } from '../data/i18n.js';
+import { translations } from '@data/i18n.js';
+import Links from './Links.astro';
 const { lang = 'no' } = Astro.props;
 const t = translations[lang].footer;
 ---
-<footer class="flex items-center justify-between bg-red-900 text-white py-16 px-8 mt-20">
-    <div class="flex gap-2 items-center justify-center">
-        <Image src={logo} alt={t.org} class="hero-logo" width={48} height={48}/>
-        <p>{t.org}</p>
+
+<footer class="flex items-center lg:justify-between justify-center bg-accent text-white py-16 px-18 mt-20">
+    <div class="gap-4 items-center justify-center hidden lg:flex">
+        <Image src={logo} alt={t.org} class="hero-logo" width={64} height={64} loading="lazy" />
+        <p class="text-white text-2xl">{t.org}</p>
     </div>
-    <div class="flex gap-2 items-center justify-center">
-        <Image src={DNS} alt={t.dnsAlt} class="hero-logo" width={169} height={169}/>
-    <div class="flex flex-col items-center justify-center gap-2">
+    <div class="flex gap-6 items-center justify-center flex-col text-center">
+        <Image src={DNS} alt={t.dnsAlt} class="hero-logo" width={200} height={200} loading="lazy" />
         <address>{t.address}</address>
-        <div>
-            <div class="flex gap-4">
-                <a href="https://www.facebook.com/events/692300293586085" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
-                    <FaFacebook class="text-white text-2xl hover:text-gray-300" />
-                </a>
-                <a href="https://www.instagram.com/studentfestivalenioslo/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
-                    <FaInstagram class="text-white text-2xl hover:text-gray-300" />
-                </a>
-                <a href="https://www.tiktok.com/@studentersamfund" target="_blank" rel="noopener noreferrer" aria-label="TikTok">
-                    <FaTiktok class="text-white text-2xl hover:text-gray-300" />
-                </a>
-            </div>
-        </div>
+        <Links lang={lang} class="text-3xl" />
     </div>
 </footer>
\ No newline at end of file
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 7ee4086..54769bf 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -1,12 +1,12 @@
 ---
 import logo from '@assets/logo.png';
 import { Image } from 'astro:assets';
-import { translations } from '../data/i18n.js';
+import { translations } from '@data/i18n.js';
 const { lang = 'no' } = Astro.props;
 const t = translations[lang].hero;
 ---
 
-<section class="flex flex-col items-center justify-center h-[75vh] gap-4">
-    <h1 class="text-4xl">{t.title}</h1>
-    <Image src={logo} alt={t.alt} width={250} height={250}/>
+<section class="flex flex-col items-center justify-center h-[50vh] gap-4">
+    <h1 class="text-4xl font-extrabold">{t.title}</h1>
+    <Image src={logo} alt={t.alt} width={250} height={250} loading="eager" />
 </section>
\ No newline at end of file
diff --git a/src/components/Links.astro b/src/components/Links.astro
index ccce399..092aac9 100644
--- a/src/components/Links.astro
+++ b/src/components/Links.astro
@@ -1,11 +1,17 @@
 ---
-import { translations } from '../data/i18n.js';
-const { lang = 'no' } = Astro.props;
-const links = translations[lang].links;
+import { FaFacebook, FaInstagram, FaTiktok } from 'react-icons/fa';
+const { href, class: className, ...props } = Astro.props;
+
 ---
 
-<div class="flex gap-4 justify-center items-center">
-    {links.map(link => (
-        <a href={link.href} target="_blank" rel="noopener noreferrer">{link.text}</a>
-    ))}
+<div class:list={["flex gap-6 justify-center items-center", className]} {...props}>
+    <a href="https://www.facebook.com/events/692300293586085" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
+        <FaFacebook className=`${className} hover:text-slottsblaa` />
+    </a>
+    <a href="https://www.instagram.com/studentfestivalenioslo/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="hover:text-griserosa">
+        <FaInstagram className=`${className} hover:text-slottsblaa` />
+    </a>
+    <a href="https://www.tiktok.com/@studentersamfund" target="_blank" rel="noopener noreferrer" aria-label="TikTok" class="hover:text-dyp-tegl">
+        <FaTiktok className=`${className} hover:text-slottsblaa` />
+    </a>
 </div>
\ No newline at end of file
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 4784f8b..8d7e4c2 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -1,5 +1,7 @@
 ---
-import { translations } from '../data/i18n.js';
+import NavLink from '@components/NavLink.astro';
+
+import { translations } from '@data/i18n.js';
 const { lang = 'no' } = Astro.props;
 const t = translations[lang].nav;
 const { pathname } = Astro.url;
@@ -18,32 +20,15 @@ function getLangSwitchPath(path, lang) {
 
 const langSwitchPath = getLangSwitchPath(pathname, lang);
 ---
-<nav class="flex justify-between items-center px-10 py-4 bg-accent mb-4">
-    <h1 class="text-xl font-bold text-white">
-        <a href={lang === 'en' ? '/en/' : '/'}>{t.title}</a>
+<nav class="flex justify-center lg:justify-between items-center px-10 py-6 bg-accent mb-4 whitespace-nowrap">
+    <h1 class="text-xl font-bold text-white hover:no-underline hidden lg:block">
+        <a href={lang === 'en' ? '/en/' : '/'} class="hover:no-underline">{t.title}</a>
     </h1>
-    <ul class="flex space-x-4 text-white">
-        <li><a href={lang === 'en' ? '/en/' : '/'}>{t.home}</a></li>
-        <li><a href={lang === 'en' ? '/en/program' : '/program'}>{t.program}</a></li>
-        <li><a href="https://forms.gle/PvEh37nvRyicLFXn6" target="_blank">{t.volunteer}</a></li>
-        <li><a href={lang === 'en' ? '/en/about' : '/about'}>{t.about}</a></li>
-        <li>
-            <a href={langSwitchPath} class="ml-4 bg-blue-500 text-white px-3 py-1 rounded">
-                {t.langSwitch}
-            </a>
-        </li>
+    <ul class="flex space-x-6 text-betongraa">
+        <NavLink href={lang === 'en' ? '/en/' : '/'}>{t.home}</NavLink>
+        <NavLink href={lang === 'en' ? '/en/program' : '/program'}>{t.program}</NavLink>
+        <NavLink href="https://forms.gle/PvEh37nvRyicLFXn6" target="_blank">{t.volunteer}</NavLink>
+        <NavLink href={lang === 'en' ? '/en/about' : '/about'}>{t.about}</NavLink>
+        <NavLink href={langSwitchPath} noActive class="bg-gyllen-beige text-svart px-3 py-1 rounded hover:bg-slottsblaa font-bold">{t.langSwitch}</NavLink>
     </ul>
-</nav>
-
-<style>
-  nav a {
-    padding: 0.5em 0.5em;
-    color: var(--text);
-    border-bottom: 4px solid transparent;
-    text-decoration: none;
-  }
-  nav a.active {
-    text-decoration: none;
-    border-bottom-color: var(--accent);
-  }
-</style>
+</nav>
\ No newline at end of file
diff --git a/src/components/NavLink.astro b/src/components/NavLink.astro
new file mode 100644
index 0000000..e826efd
--- /dev/null
+++ b/src/components/NavLink.astro
@@ -0,0 +1,18 @@
+---
+const { href, class: className, noActive = false, ...props } = Astro.props;
+const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, "");
+const subpath = pathname.match(/[^\/]+/g);
+
+const normalize = (str: string) => str.replace(/^\/+/, "");
+const isActive = !noActive && (
+  normalize(href) === normalize(pathname) ||
+  normalize(href) === `en/${normalize(pathname)}` ||
+  normalize(href) === (subpath?.[0] || "") ||
+  (normalize(href) === "en" && normalize(pathname) === "en") ||
+  (normalize(href) === "" && normalize(pathname) === "")
+);
+---
+
+<a href={href} class:list={["hover:text-white border-b-4 border-b-transparent hover:border-b-slottsblaa no-underline p-2 flex items-center text-center", className, { active: isActive }]} {...props}>
+  <slot />
+</a>
diff --git a/src/components/Program.astro b/src/components/Program.astro
index 67e574e..b5f1d92 100644
--- a/src/components/Program.astro
+++ b/src/components/Program.astro
@@ -1,30 +1,40 @@
 ---
-import { translations } from '../data/i18n.js';
+import { translations } from '@data/i18n.js';
 const { lang = 'no', data } = Astro.props;
 const t = translations[lang].program;
-const currentDate = new Date().toLocaleDateString(lang === 'en' ? 'en-GB' : 'nb-NO', {
-  weekday: 'long',
-  year: 'numeric',
-  month: 'long',
-  day: 'numeric'
-});
+
+const convertDate = (date) => {
+  let d = date;
+  if (!(d instanceof Date)) {
+    d = new Date(d);
+  }
+  return d.toLocaleDateString(lang === 'en' ? 'en-GB' : 'nb-NO', {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric'
+  });
+};
 ---
+
 {data ? (
-  <div class="flex gap-4 flex-col">
-    <div class="flex items-center justify-between">
-      <h2 class="font-bold text-xl">{t.today}</h2>
-      <p>{currentDate}</p>
-    </div>
-    {Object.entries(data).map(([dayName, items]) => (
-      <div class="day">
-        <h2>{dayName}</h2>
+  <div class="flex items-center justify-between flex-col gap-8">
+    <h1 class="font-bold text-3xl text-center w-full">{t.today}</h1>
+    <p class="font-bold text-2xl text-center w-full">{convertDate(new Date())}</p>
+  </div>
+  <div class="flex gap-12 flex-wrap justify-center items-stretch">
+    {Object.entries(data).map(([date, items]) => (
+      <div id="program-list" class="w-125 p-6 border-1 border-white rounded-2xl even:bg-slottsblaa even:text-white bg-gyllen-beige flex flex-col gap-2">
+        <h2 class="font-bold text-xl">{convertDate(date)}</h2>
         <ul>
           {items.map((item) => {
             const price = item.price || item.cost;
             return (
-              <li class="item">
-                {item.time} - {item.event} - {item.url ? (
-                  <a href={item.url} target="_blank" rel="noopener noreferrer">{price}</a>
+              <li class="flex justify-between">
+                <p>
+                {item.time} - {item.event}
+                </p>
+                {item.url ? (
+                  <a href={item.url} target="_blank" rel="noopener noreferrer" class="text-right">{price}</a>
                 ) : (
                   price
                 )}
@@ -35,25 +45,15 @@ const currentDate = new Date().toLocaleDateString(lang === 'en' ? 'en-GB' : 'nb-
       </div>
     ))}
   </div>
+  <div class="flex justify-center">
+    <p class="font-bold text-xl text-center w-full">
+      <a href="https://neuf.no/arrangementer" class="text-gyllen-oransje hover:text-slottsblaa hover:underline" target="_blank" rel="noopener noreferrer">{t.program_more}</a>
+    </p>
+  </div>
 ) : (
   <div>No program data available.</div>
 )}
 
 <style>
-.day {
-  margin-bottom: 20px;
-  padding: 10px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-}
-.day:nth-child(odd) {
-  background-color: #F8BC90;
-}
-.day:nth-child(even) {
-  background-color: #0A0F6D;
-  color: #fff;
-}
-.item {
-  margin: 5px 0;
-}
+
 </style>
\ No newline at end of file
diff --git a/src/components/Vors.astro b/src/components/Vors.astro
index 788da63..6c831ff 100644
--- a/src/components/Vors.astro
+++ b/src/components/Vors.astro
@@ -1,17 +1,20 @@
 ---
-const videoUrl = "https://www.youtube.com/watch?v=t7T4RPBpTVY";
-import { translations } from '../data/i18n.js';
+import { translations } from '@data/i18n.js';
 const { lang = 'no' } = Astro.props;
 const t = translations[lang].vors;
+
+const videoUrl = "https://www.youtube.com/watch?v=t7T4RPBpTVY";
 ---
 
-<div style="width: 560px; height: 315px;">
-    <div class="mt-4 text-xl mb-2">
+<div class="self-center flex flex-col items-center p-4 gap-4">
+    <p>
         {t.text}
-    </div>
+    </p>
     <iframe 
-        width="560" 
-        height="315" 
+        loading="lazy"
+        class="max-w-full"
+        width="640"
+        height="480" 
         src={videoUrl.replace("watch?v=", "embed/")} 
         title="YouTube video player" 
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index a5218af..b76812f 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -14,9 +14,9 @@ const { lang = 'no' } = Astro.props;
 		<meta name="generator" content={Astro.generator} />
 		<title>STUDiO 2025 - Studentfestivalen i Oslo</title>
 	</head>
-	<body class="grid grid-rows-[auto_1fr_auto] jusify-center">
+	<body class="grid grid-rows-[auto_1fr_auto] jusify-center gap-12">
 		<Nav lang={lang} />
-		<div class="max-w-7xl grid place-self-center gap-8">
+		<div id="content" class="max-w-7xl grid place-self-center gap-8 px-4">
 			<slot />
 		</div>
 		<Footer lang={lang} />
diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
index 908fee6..eb248d3 100644
--- a/src/pages/en/index.astro
+++ b/src/pages/en/index.astro
@@ -9,7 +9,7 @@ import Vors from '@components/Vors.astro';
 
 <Layout lang="en">
 	<Hero lang="en" />
-	<Links lang="en" />
+	<Links lang="en" class="text-5xl text-black" />
 	<Program lang="en" />
 	<FAQ lang="en" />
 	<Vors lang="en" />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3753679..7eb3e6c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,7 +9,7 @@ import Vors from '@components/Vors.astro';
 
 <Layout lang="no">
 	<Hero lang="no" />
-	<Links lang="no" />
+	<Links lang="no" class="text-5xl text-black" />
 	<Program lang="no" />
 	<FAQ lang="no" />
 	<Vors lang="no" />
diff --git a/src/styles/global.css b/src/styles/global.css
index 7ef605f..77c6e23 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,10 +1,19 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
+@import url("https://fonts.google.com/specimen/Montserrat?query=montserrat");
+
 @import "tailwindcss";
 
 :root {
-  --font-avenir: "Avenir Next", sans-serif;
-  --background: #E5E2D7;
-  --text: #333333;
-  --accent: #C13131;
+  --font-avenir: "montserrat", sans-serif;
+  --accent: #c13131;
+
+  --dyp-tegl: #720328;
+  --griserosa: #cd96ab;
+  --betongraa: #e5e2d7;
+  --gyllen-oransje: #ff6915;
+  --gyllen-beige: #f8bc90;
+  --slottsblaa: #0a0f6d;
+  --svart: #161516;
 }
 
 @theme {
@@ -12,32 +21,52 @@
   --color-background: var(--background);
   --color-text: var(--text);
   --color-accent: var(--accent);
+
+  --color-dyp-tegl: var(--dyp-tegl);
+  --color-griserosa: var(--griserosa);
+  --color-betongraa: var(--betongraa);
+  --color-gyllen-oransje: var(--gyllen-oransje);
+  --color-gyllen-beige: var(--gyllen-beige);
+  --color-slottsblaa: var(--slottsblaa);
+  --color-svart: var(--svart);
 }
 
 html,
 body {
-		margin: 0;
-		width: 100%;
-		height: 100%;
+  @apply m-0;
+  @apply w-full;
+  @apply h-full;
 }
 
 body {
-    @apply text-lg;
-    font-family: var(--font-avenir);
-    color: var(--color-text);
-    background-color: var(--color-background);
+  @apply bg-betongraa;
+  font-family: var(--font-avenir);
+  @apply text-svart;
+  @apply text-lg;
+  @apply leading-relaxed;
 }
 
-a {
-    color: var(--color-accent);
-    text-decoration: none;
+a.active {
+  font-weight: bolder;
 }
 
-nav a {
-    display: inline-block;
-    text-decoration: none;
-  }
- nav a.active {
-    font-weight: bolder;
-    text-decoration: underline;
-  }
\ No newline at end of file
+#content a {
+  @apply text-gyllen-oransje;
+}
+#content a:hover {
+  @apply text-slottsblaa;
+  @apply underline;
+}
+
+#program-list:nth-child(odd) a {
+  @apply text-accent;
+}
+#program-list:nth-child(odd) a:hover {
+  @apply text-dyp-tegl;
+  @apply underline;
+}
+
+#program-list:nth-child(even) a:hover {
+  @apply text-accent;
+  @apply underline;
+}