diff --git a/docs/_layouts/landing.html b/docs/_layouts/landing.html
index 09d16a5b..6a5c2282 100644
--- a/docs/_layouts/landing.html
+++ b/docs/_layouts/landing.html
@@ -8,18 +8,31 @@
         <title>{{ site.title }}{% if page.title %} | {{ page.title }}{% endif %}</title>
         <meta name="description" content="{{ site.subtitle }}">
 
-        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
-        <link rel="stylesheet" href="{{ site.baseurl }}/css/syntax.css">
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">        <link rel="stylesheet" href="{{ site.baseurl }}/css/syntax.css">
         <link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
 
         {% seo %}
     </head>
-    <body id="landing" style="display:table;height:100%;width:100%;margin:0px;">
-        <div class="container" style="display:table-cell; vertical-align:middle;">
-            <div id="content" align="center">
-                <img src="static/icon_foreground.png" width="45%" style="max-width:500px">
+    <body id="landing">
+        <div class="container" align="center">
+            <div>
+                <img src="static/icon_foreground.png" width="45%" style="max-width:400px">
+            </div>
+            <div id="content">
                 {{ content }}
             </div>
+            <div class="row justify-content-sm-center">
+                <div class="col-xs-12 col-sm-auto"><a href="home">Documentation</a></div>
+                <div class="col-xs-12 col-sm-auto"><a href="about/changelog">Changelog</a></div>
+                <div class="col-xs-12 col-sm-auto"><a href="https://github.com/natario1/CameraView">GitHub</a></div>
+                <div class="col-xs-12 col-sm-auto"><a href="extra/donate">Support</a></div>
+            </div>
+            <br/>
+            <div class="row" id="screenshots">
+                <div class="col-sm-4"><img src="static/screen1.png"></div>
+                <div class="col-sm-4"><img src="static/screen2.png"></div>
+                <div class="col-sm-4"><img src="static/screen3.png"></div>
+            </div>
         </div>
 
         {% if site.google_analytics_id != "" %}
diff --git a/docs/css/main.css b/docs/css/main.css
index cc8889ec..7f24b8e9 100644
--- a/docs/css/main.css
+++ b/docs/css/main.css
@@ -95,7 +95,7 @@ a {
 }
 
 #landing h1 {
-    font-size: 4em;
+    font-size: 10vw;
     color: white;
     margin-top: 16px;
     margin-bottom: 0px;
@@ -103,6 +103,12 @@ a {
     font-weight: bold;
 }
 
+@media (min-width: 576px) {
+  #landing h1 {
+    font-size: 4em;
+  }
+}
+
 #landing p {
     font-size: 1.2em;
     color: rgba(255, 255, 255, 0.7);
@@ -117,13 +123,21 @@ a {
     border-radius: 24px;
     padding: 10px 20px 10px 20px;
     margin-top: 16px;
-    margin-left: 8px;
-    margin-right: 8px;
     display: inline-block;
     font-family: 'Calistoga', sans-serif;
     font-size: 1.1em;
 }
 
+#landing #screenshots img {
+    max-width: 100%;
+    padding: 12px;
+}
+
+#landing #screenshots {
+    margin-top: 24px;
+    margin-bottom: 24px;
+}
+
 #navigation {
     font-size: 1.0em;
 }
diff --git a/docs/index.md b/docs/index.md
index d1b7b149..f9340e8c 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -6,8 +6,4 @@ title: "CameraView"
 # CameraView
 
 A well documented, high-level library that makes capturing pictures and videos easy,
-addressing all of the common issues and needs. Supports real-time filters, gestures, watermarks, frame processing, RAW, outputs of any size and much more.
-
-<br/>
-
-[Documentation](home) [GitHub](https://github.com/natario1/CameraView) [Support](extra/donate)
+addressing all of the common issues and needs. Supports real-time filters, gestures, watermarks, frame processing, RAW, outputs of any size and much more.
\ No newline at end of file
