diff --git a/static/css/stylesheet.css b/static/css/stylesheet.css
index 93f0686c52c567e9efc4c4e89420483919bf76a5..e2cb5de509bb76987f548b35e461f359d56033dc 100644
--- a/static/css/stylesheet.css
+++ b/static/css/stylesheet.css
@@ -253,9 +253,10 @@ body {
 .foli-card {
     border: 1px solid #FF9900;
 }
-.foli-card .card-header {
-    background-color: #FF9900;
-}
+    .foli-card .card-header {
+        background-color: #FF9900;
+    }
+
 th .text-muted {
     font-size: 14px;
     font-style: normal;
@@ -270,6 +271,19 @@ th .text-muted {
     margin-bottom: 30px;
 }
 
+/* F�li application page*/
+.app-card {
+    border: 1px solid #FF9900;
+}
+    .app-card .card-header {
+        background-color: #FF9900;
+    }
+
+.app-image {
+    margin-bottom: 25px;
+    width: 100%;
+}
+
 /* larger screen layout */
 @media (min-width: 768px) {
 	.header { min-height: 33.63rem; /* 33.63rem = 538.5px, font-size 16 (half of the current image height) */ }
diff --git a/static/img/application_placeholder.png b/static/img/application_placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..0445f3d662671522ce0d7ef8242fefa5373619a3
Binary files /dev/null and b/static/img/application_placeholder.png differ
diff --git a/static/img/mobiililippu_1.png b/static/img/mobiililippu_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..e07d28464be406c6d00bf075b176458e72bf65a2
Binary files /dev/null and b/static/img/mobiililippu_1.png differ
diff --git a/static/img/mobiililippu_2.png b/static/img/mobiililippu_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..d7ca148a90eee26af9e4c9834ec4d8c2c5a1ef0c
Binary files /dev/null and b/static/img/mobiililippu_2.png differ
diff --git a/static/img/mobiililippu_3.png b/static/img/mobiililippu_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..3904ff1a15f2b39890a081a63ce466d0b06408a1
Binary files /dev/null and b/static/img/mobiililippu_3.png differ
diff --git a/static/img/mobiililippu_4.png b/static/img/mobiililippu_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c7883b645e5518d34723e1249269fc6b0e5c039
Binary files /dev/null and b/static/img/mobiililippu_4.png differ
diff --git a/templates/foliApp.html b/templates/foliApp.html
new file mode 100644
index 0000000000000000000000000000000000000000..e30829f2f26fa07c29dcbc93994127a04e910842
--- /dev/null
+++ b/templates/foliApp.html
@@ -0,0 +1,33 @@
+{% extends 'internal/base.html' %}
+
+{% set title = 'Foli-sovellus' %}
+{% set sticky_banners = true %}
+{% set localized = false %}
+{% set content_lang = 'fi' %}
+
+{% block content %}
+
+<div class="container">
+    <h1>Foli - Turun seudun joukkoliikenne</h1>
+    <h2>Mobiilisovellus</h2>
+    <div class="card app-card">
+        <div class="card-header">
+            <h3 class="card-title">Bussilippu kannykalla</h3>
+        </div>
+        <div class="row" style="margin-top: 25px;">
+            <div class="col-sm-5">
+                <img class="app-image" src="{{ util.static_url('img/mobiililippu_1.png') }}">
+            </div>
+            <div class="col-sm-7">
+                <img class="app-image" src="{{ util.static_url('img/mobiililippu_2.png') }}">
+                <img class="app-image" src="{{ util.static_url('img/mobiililippu_3.png') }}">
+                <img class="app-image" src="{{ util.static_url('img/mobiililippu_4.png') }}">
+            </div>
+        </div>
+        <div class="card-footer">
+            <p>Mobiililippusovelluksen voi ladata uusimpiin Windows, Apple ja Android -puhelimiin.</p>
+        </div>
+    </div>
+</div>
+
+{% endblock content %}
diff --git a/templates/index.html b/templates/index.html
index bed79aad41575a63b0bff5550fe5b3f5de0d57d1..e80a8e295da6b1b301fdd1ec45350567cbe79177 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -34,7 +34,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="row">
+	<div class="row mb-4">
 		<div class="col-md-5 offset-md-1 mb-4 mb-md-0">
 			<!-- this particular button variation has some responsiveness issues -->
 			<div class="card menu-card text-center bg-white border-foli text-foli box-shadow">
@@ -57,4 +57,17 @@
 			</div>
 		</div>
 	</div>
+    <div class="row mb-4">
+        <div class="col-md-5 offset-md-1 mb-4 mb-md-0">
+            <div class="card menu-card bg-foli text-center box-shadow">
+                <img class="card-img-top" src="{{ util.static_url('img/application_placeholder.png') }}" alt="{{ _("Card Image") }}">
+                <div class="card-body">
+                    <a role="button" href="{{ util.view_url('foliApp') }}" class="btn btn-lg btn-primary">{{ _("Föli application") }}</a>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-5">
+            <!--Empty spot for next menu card-->
+        </div>
+    </div>
 {% endblock content %}