diff --git a/src/app/globals.css b/src/app/globals.css
index d945e31..337b54f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -19,7 +19,6 @@
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: "Inter", sans-serif;
 }
 
 @layer utilities {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e3e994c..59e2df3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { Inter } from "next/font/google"
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -6,20 +7,20 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
+const inter = Inter({
+  subsets: ["latin"],
+  display: "optional",
+  variable: "--font-inter"
+})
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <head>
-        <link
-            href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
-            rel="stylesheet"
-          />
-      </head>
-      <body>
+    <html lang="en" className={inter.variable}>
+      <body className="font-inter">
         {children}
       </body>
     </html>
diff --git a/src/app/templates/BlogPostTemplate.tsx b/src/app/templates/BlogPostTemplate.tsx
index 1e97093..1876874 100644
--- a/src/app/templates/BlogPostTemplate.tsx
+++ b/src/app/templates/BlogPostTemplate.tsx
@@ -9,19 +9,22 @@ export interface PostProps {
   image?: {
     src: StaticImageData | string
     alt: string
-  }
+    fill?: boolean
+  },
   author: string
   date: string
   content: string
 }
 
-const Post: FC<PostProps> = ({ title, hook, image={src: "https://picsum.photos/1000/500", alt: "A randomly generated image from Lorem Picsum"}, author, date, content }) => {
+const Post: FC<PostProps> = ({ title, hook, image={src: "https://picsum.photos/1000/500", alt: "A randomly generated image from Lorem Picsum", fill: true}, author, date, content }) => {
+  image.fill ??= true
+
   return (
     <>
       <Navbar />
       <main>
         <div className="grid grid-cols-2 grid-rows-2 h-[50vh] w-[100vw] overflow-hidden relative gap-4">
-          <Image src={image.src} alt={image.alt} height={0} width={0} sizes="100vw" className="col-start-1 col-end-3 w-[100vw] h-auto" />
+          <Image src={image.src} alt={image.alt} height={0} width={0} sizes="100vw" className={`col-start-1 col-end-3 ${image.fill ? "w-[100vw]" : "w-auto"} ${!image.fill && "justify-self-center"} h-auto`} />
           <div className="col-start-1 row-start-2 z-10 m-6 bg-[#BE8CFF] p-4 w-fit rounded-xl flex flex-col gap-3">
             <h1 className="text-4xl text-text_secondary font-black">{title}</h1>
             {hook && <p>{hook}</p>}
diff --git a/src/app/templates/page.tsx b/src/app/templates/page.tsx
index 707eb6d..9b0b9db 100644
--- a/src/app/templates/page.tsx
+++ b/src/app/templates/page.tsx
@@ -1,8 +1,14 @@
 import Post, { PostProps } from "./BlogPostTemplate"
+import onboardingLogo from "@/app/assets/onboarding_logo_rev_2.png"
 
 const anArticle: PostProps = {
     title: "Dotkom er best",
     hook: "Men det visste jo alle fra før. I tilfelle du er appkommer eller bare dum, og ikke er enig, så forklarer denne artikkelen hvorfor!",
+    image: {
+        src: onboardingLogo,
+        alt: "Dotkom Onboaring 2024 sin logo",
+        fill: false
+    },
     author: "Henry Græbserg",
     date: "23/10/2024",
     content: `The standard Lorem Ipsum passage, used since the 1500s
@@ -20,4 +26,4 @@ const Page = () => {
     )
 }
 
-export default Page;
\ No newline at end of file
+export default Page;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3ffc1fb..a8957a9 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,7 +17,7 @@ const config: Config = {
         accent: "#B432DB",
       },
       fontFamily: {
-        inter: ["Inter", "sans-serif"],
+        inter: ["var(--font-inter)", "sans-serif"],
       },
     },
   },
