diff --git a/css/main.scss b/css/main.scss
index 7380405..3277a21 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,7 +1,20 @@
 ---
 # Only the main Sass file needs front matter (the dashes are enough)
 ---
 
 @charset "utf-8";
 
 @import "download.scss";
+@import "home.scss";
+
+.kAppInfo a {
+  max-width: 40%;
+  height: auto;
+  margin: 15px;
+}
+
+.kAppInfo img {
+  max-width: 100%;
+  height: auto;
+  margin: 0;
+}
diff --git a/screenshots.md b/screenshots.md
index cf1f2c0..848281f 100644
--- a/screenshots.md
+++ b/screenshots.md
@@ -1,20 +1,23 @@
 ---
 title: Screenshots
-layout: page
+layout: default
+css-include: /css/main.css
 ---
 
-# Screenshots
+<main class="container">
+  <h1>Screenshots</h1>
 
-{% for image in site.data.screenshots %}
-  <div class="d-flex">
-    <div class="flex-fill mb-2">
-      <strong>{{ image.title }}</strong>
-      <p/>
-      {{image.description | markdownify}}
+  {% for image in site.data.screenshots %}
+    <div class="block pt-4 pb-4">
+      <div class="kAppInfo">
+        <div class="kAppInfo-content">
+          <h2>{{ image.title }}</h2>
+          <p style="max-width:900px;">
+            {{image.description | markdownify}}
+          </p>
+        </div>
+        <a href="{{ image.large }}" data-toggle="lightbox"><img alt="{{ image.tip }}" src="{{ image.large }}" class="preview img-fluid" /></a>
+      </div>
     </div>
-    <div>
-      <a href="{{ image.large }}"><img src="{{ image.small }}" alt="{{ image.tip }}" /></a>
-    </div>
-  </div>
-  <hr class="mb-4" />
-{% endfor %}
+  {% endfor %}
+</main>