diff --git a/src/blog.rs b/src/blog.rs
index 7923d82..300a2eb 100644
--- a/src/blog.rs
+++ b/src/blog.rs
@@ -99,7 +99,7 @@ pub fn BlogPost() -> impl IntoView {
                         <div class="blog-open-entry">
                             <div class="blog-illustration">
                                 <img src=format!("https://directus.gerome.fi/assets/{}?width=1600&height=1000&fit=inside&format=auto&quality=90&withoutEnlargement=true", post.illustration.id)/>
-                                <h2 class="blog-title">{translations.title}</h2>
+                                <h2 class="blog-title"><p class="main-width">{translations.title}</p></h2>
                             </div>
                             <main class="main-width blog-entry-wrapper">
                                 <div class="markdown" inner_html=html/>
diff --git a/src/gallery.rs b/src/gallery.rs
index ad77de7..2971b2c 100644
--- a/src/gallery.rs
+++ b/src/gallery.rs
@@ -56,9 +56,9 @@ pub fn Gallery() -> impl IntoView {
     let gallery = Resource::new(move || i18n.get_locale(), move |locale| get_gallery(locale.to_string()));
 
     view! {
+        <Outlet/>
         <main class="main-width gallery-wrapper">
             <h2>{t!(i18n, gallery)}</h2>
-            <Outlet/>
             <Suspense fallback=move || view! { <div>"Loading..."</div> }>
                 {move || gallery.get()
                     .and_then(|gallery| gallery.ok())
@@ -68,10 +68,12 @@ pub fn Gallery() -> impl IntoView {
                                 {
                                     gallery.images.into_iter().map(|image| {
                                         view! {
-                                            <a class="gallery-thumbnail" href={format!("/gallery/{}", image.slug)}>
-                                                <img src=format!("https://directus.gerome.fi/assets/{}?width=400&height=400&fit=inside&format=auto&quality=80&withoutEnlargement=true", image.original.id)/>
-                                                <p>{image.title}</p>
-                                            </a>
+                                            <div class="gallery-thumbnail" >
+                                                <a href={format!("/gallery/{}", image.slug)}>
+                                                    <img src=format!("https://directus.gerome.fi/assets/{}?width=400&height=400&fit=inside&format=auto&quality=80&withoutEnlargement=true", image.original.id)/>
+                                                    <p>{image.title}</p>
+                                                </a>
+                                            </div>
                                         }
                                     }).collect::<Vec<_>>()
                                 }
@@ -104,31 +106,29 @@ pub fn GalleryEntry() -> impl IntoView {
     let gallery = Resource::new(move || i18n.get_locale(), move |locale| get_gallery(locale.to_string()));
 
     view! {
-        <main class="main-width gallery-wrapper">
-            <Suspense fallback=move || view! { <div>"Loading..."</div> }>
-                {move || gallery.get()
-                    .and_then(|gallery| gallery.ok())
-                    .and_then(|gallery| gallery.images.iter()
-                        .find(|image| image.slug == slug())
-                        .map(|image| image.clone()))
-                    .and_then(|image| {
-                        let translations = image.translations.unwrap_or_default();
-                        let subtitle = translations.subtitle.unwrap_or_default();
-                        view! {
-                            <div class="gallery-open-entry">
-                                <img src=format!("https://directus.gerome.fi/assets/{}?width=1600&height=1600&fit=inside&format=auto&quality=90&withoutEnlargement=true", image.watermarked.id)/>
-                                <h3>{image.title}</h3>
-                                {if subtitle.len() > 0 {
-                                    Some(view!{<div><h4>{subtitle}</h4></div>})
-                                } else {
-                                    None
-                                }}
-                                <p>{translations.description}</p>
-                            </div>
-                         }.into()
-                     })
-                 }
-            </Suspense>
-        </main>
+        <Suspense fallback=move || view! { <div>"Loading..."</div> }>
+            {move || gallery.get()
+                .and_then(|gallery| gallery.ok())
+                .and_then(|gallery| gallery.images.iter()
+                    .find(|image| image.slug == slug())
+                    .map(|image| image.clone()))
+                .and_then(|image| {
+                    let translations = image.translations.unwrap_or_default();
+                    let subtitle = translations.subtitle.unwrap_or_default();
+                    view! {
+                        <div class="main-width gallery-open-entry">
+                            <h2 class="gallery-title">{image.title}</h2>
+                            <img src=format!("https://directus.gerome.fi/assets/{}?width=1600&height=1600&fit=inside&format=auto&quality=90&withoutEnlargement=true", image.watermarked.id)/>
+                            {if subtitle.len() > 0 {
+                                Some(view!{<h4 class="gallery-subtitle">{subtitle}</h4>})
+                            } else {
+                                None
+                            }}
+                            <p class="gallery-description">{translations.description}</p>
+                        </div>
+                     }.into()
+                 })
+             }
+        </Suspense>
     }
 }
diff --git a/style/main.scss b/style/main.scss
index c6ae80d..62f3658 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -1,11 +1,17 @@
 $mainGreen: #2b762f;
 $mainGrey: #0F0F0F;
 
+@mixin main-width {
+  max-width: 800px;
+}
+
 @mixin top-level-padding {
   padding: 0 16px;
   @media all and (max-width: 400px) {
     padding: 0 8px;
   }
+
+  margin-bottom: 32px;
 }
 
 * {
@@ -45,7 +51,8 @@ body {
 
   .main-width {
     width: 100%;
-    max-width: 800px;
+    @include main-width;
+    @include top-level-padding;
   }
 
   h1, h2, h3, h4, h5, h6 {
@@ -155,11 +162,6 @@ body {
     }
   }
 
-  main {
-    @include top-level-padding;
-    margin-bottom: 32px;
-  }
-
   .markdown {
     b, strong {
       font-weight: 500;
@@ -271,6 +273,10 @@ body {
       margin: 0;
       background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 1.0));
       color: white;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
   }
 }
@@ -287,7 +293,7 @@ body {
     height: 100%;
     width: 100%;
     max-height: 300px;
-    max-width: 500px;
+    max-width: 300px;
     object-fit: contain;
   }
 
@@ -308,23 +314,40 @@ body {
 
 .gallery-wrapper {
   max-width: 1000px!important;
-  width: fit-content;
 }
 
 .gallery-thumbnail {
-  img {
-    height: 300px;
-    width: 300px;
-    object-fit: contain;
+  flex-grow: 1;
+  display: flex;
+  flex-basis: 300px;
+  align-items: center;
+  justify-content: center;
 
-    @media all and (max-width: 1000px) {
-      height: 300px;
-      width: 300px;
+  a {
+    display: block;
+    position: relative;
+    height: fit-content;
+    width: fit-content;
+
+    img {
+      max-height: 300px;
+      max-width: 300px;
+      object-fit: contain;
     }
-  }
 
-  p {
-    text-align: center;
+    p {
+      text-align: center;
+
+      display: block;
+      width: 100%;
+      position: absolute;
+      bottom: 0px;
+      padding: 16px;
+      padding-top: 64px;
+      margin: 0;
+      background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 1.0));
+      color: white;
+    }
   }
 }
 
@@ -342,11 +365,17 @@ body {
     align-self: center;
   }
 
-  h3 {
+  .gallery-title {
+    margin-bottom: 16px;
+  }
+
+  .gallery-subtitle {
+    margin-top: 16px;
     margin-bottom: 8px;
   }
 
-  p {
+  .gallery-description {
+    margin-top: 8px;
     margin-bottom: 64px;
   }
 }