diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
index f0da210..d13bcc4 100644
--- a/src/components/Navbar.svelte
+++ b/src/components/Navbar.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { slide, fade } from "svelte/transition";
 
+  export let sticky = true;
   export let currentPath: string;
   $: currentPathTrimmed = currentPath.replace(/\/+$/, "");
 
@@ -19,8 +20,8 @@
 <svelte:window bind:scrollY={scrollPosition} />
 
 <header
-  class="sticky top-0 z-10 bg-gray-50 transition-shadow ease-in"
-  class:shadow={isScrolled}
+  class={sticky ? "sticky top-0 z-10 bg-gray-50 transition-shadow ease-in" : ""}
+  class:shadow={sticky && isScrolled}
 >
   <nav
     class="mx-auto flex h-16 max-w-5xl flex-wrap items-center justify-between px-6"
diff --git a/src/components/Photo.astro b/src/components/Photo.astro
new file mode 100644
index 0000000..f5a3da6
--- /dev/null
+++ b/src/components/Photo.astro
@@ -0,0 +1,20 @@
+---
+import { Image } from "astro:assets";
+
+interface Props {
+  photo: any;
+  class?: string;
+}
+
+const { photo, class: className } = Astro.props;
+---
+
+<Image
+  src={photo}
+  alt=""
+  height={1000}
+  densities={[1, 2]}
+  quality="mid"
+  class={"object-contain rounded " + (className ?? "")}
+  transition:name={photo.src}
+/>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 9fb3cca..68df3c8 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -4,13 +4,18 @@ import RootLayout from "./RootLayout.astro";
 
 interface Props {
   title?: string;
+  noStickyNavbar?: boolean;
 }
 
-const { title } = Astro.props;
+const { title, noStickyNavbar } = Astro.props;
 ---
 
 <RootLayout {title}>
-  <Navbar client:load currentPath={Astro.url.pathname} />
+  <Navbar
+    client:load
+    sticky={!noStickyNavbar}
+    currentPath={Astro.url.pathname}
+  />
   <main>
     <slot />
   </main>
diff --git a/src/layouts/RootLayout.astro b/src/layouts/RootLayout.astro
index a03b1a8..508e3c5 100644
--- a/src/layouts/RootLayout.astro
+++ b/src/layouts/RootLayout.astro
@@ -12,7 +12,7 @@ const fullTitle = `${title ? title + " – " : ""}Mikkel Svartveit`;
 ---
 
 <!doctype html>
-<html lang="en" transition:animate="fade">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.png" />
diff --git a/src/pages/photography/[photo].astro b/src/pages/photography/[photo].astro
index 30fad73..c3f7a7d 100644
--- a/src/pages/photography/[photo].astro
+++ b/src/pages/photography/[photo].astro
@@ -1,8 +1,8 @@
 ---
 import type { GetStaticPaths } from "astro";
 import { getFileNameFromPath } from "./index.astro";
-import { Image } from "astro:assets";
 import RootLayout from "@layouts/RootLayout.astro";
+import Photo from "@components/Photo.astro";
 
 export const getStaticPaths = (async () => {
   const photos = await Astro.glob("../../assets/photos/*");
@@ -21,17 +21,12 @@ const { photo } = Astro.props;
 ---
 
 <RootLayout title="Photo" hideScrollbar>
-  <div class="bg-gray-900 m-screen h-screen" onclick="
-  history.back()
-  ">
-    <Image
-      src={photo.default}
-      alt=""
-      height={1000}
-      densities={[1, 2]}
-      class="h-screen w-screen object-contain"
-      loading="eager"
-      decoding="sync"
-    />
+  <div
+    class="cursor-pointer bg-gray-900 w-full h-screen flex justify-center"
+    onclick="
+    history.back()
+    "
+  >
+    <Photo photo={photo.default} class="w-auto" />
   </div>
 </RootLayout>
diff --git a/src/pages/photography/index.astro b/src/pages/photography/index.astro
index 8eb13c9..1a34992 100644
--- a/src/pages/photography/index.astro
+++ b/src/pages/photography/index.astro
@@ -4,6 +4,7 @@ import ContainerLayout from "@layouts/ContainerLayout.astro";
 import BaseLayout from "@layouts/BaseLayout.astro";
 import TextContentLayout from "@layouts/TextContentLayout.astro";
 import { Image } from "astro:assets";
+import Photo from "@components/Photo.astro";
 
 const photos = await Astro.glob("../../assets/photos/*");
 
@@ -21,7 +22,7 @@ export const getFileNameFromPath = (path: string) => {
 };
 ---
 
-<BaseLayout title="Photography">
+<BaseLayout title="Photography" noStickyNavbar>
   <ContainerLayout>
     <TextContentLayout>
       <h1
@@ -44,16 +45,11 @@ export const getFileNameFromPath = (path: string) => {
       photos.sort(sortFiles).map((photo) => (
         <a
           href={`/photography/${getFileNameFromPath(photo.default.src)}`}
-          class="flex w-full py-2 duration-100 hover:-translate-y-1"
+          class="flex w-full py-2 duration-100 hover:-translate-y-1 rounded-lg"
         >
-          <Image
-            src={photo.default}
-            alt=""
-            width={400}
-            densities={[1, 2]}
-            transition:name={getFileNameFromPath(photo.default.src)}
-            class="rounded bg-gray-200"
-          />
+          <div class="bg-gray-200 rounded">
+            <Photo photo={photo.default} />
+          </div>
         </a>
       ))
     }
