diff --git a/.gitignore b/.gitignore
index 5593629..ac4820f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 node_modules/
 dist/
 service-worker.build.js
-.env
\ No newline at end of file
+.env
+static/images/mockups
\ No newline at end of file
diff --git a/index.html b/index.html
index 35461ed..4075cc7 100644
--- a/index.html
+++ b/index.html
@@ -8,11 +8,56 @@
   <link rel="manifest" href="/manifest.json">
   <title>Pianello</title>
 
+  <link rel="stylesheet" href="/src/css/roboto.css">
   <link rel="stylesheet" href="/src/css/index.css">
 </head>
 
 <body>
 
+  <header>
+    <div id="welcome-message">Benvenuti a <span class="bold">Pianello Val Tidone</span></div>
+  </header>
+
+  <main>
+    <div id="route-cards">
+      <div class="route-card">
+        <div class="route-card-left">
+          <img src="static/images/app-bar-logo.png">
+        </div>
+        <div class="route-card-center">
+          <div class="name">
+            <div>Percorsi</div>
+            <div class="bold">naturalistici</div>
+          </div>
+        </div>
+        <div class="route-card-right"></div>
+      </div>
+      <div class="route-card">
+        <div class="route-card-left">
+          <img src="static/images/app-bar-logo.png">
+        </div>
+        <div class="route-card-center">
+          <div class="name">
+            <div>Percorsi</div>
+            <div class="bold">storici</div>
+          </div>
+        </div>
+        <div class="route-card-right"></div>
+      </div>
+      <div class="route-card">
+        <div class="route-card-left">
+          <img src="static/images/app-bar-logo.png">
+        </div>
+        <div class="route-card-center">
+          <div class="name">
+            <div>Percorsi</div>
+            <div class="bold">tradizionalistici</div>
+          </div>
+        </div>
+        <div class="route-card-right"></div>
+      </div>
+    </div>
+  </main>
 
   <footer>
     <bottom-app-bar></bottom-app-bar>
diff --git a/src/components/bottom-app-bar.js b/src/components/bottom-app-bar.js
index 97d15c7..a296d53 100644
--- a/src/components/bottom-app-bar.js
+++ b/src/components/bottom-app-bar.js
@@ -16,8 +16,8 @@ const template = `
 const style = `
   :host {
     display: flex;
-    height: 42px;
-    width: 80%;
+    height: 68px;
+    width: 90%;
     border-radius: 90px;
     box-shadow: 0 0 50px #ccc;
   }
diff --git a/src/css/index.css b/src/css/index.css
index 09f1ba8..ac6e43e 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,20 +1,114 @@
 
+:root {
+  --footer-height: calc(68px + 20px + 20px);
+  --pianello-red: #de0e1b;
+  --pianello-yellow: #f6ae04;
+  --pianello-blue: #213c8b;
+}
+
 * {
   box-sizing: border-box;
 }
 
+html {
+  width: 100%;
+  height: 100%;
+}
+
 body {
   width: 100%;
   height: 100%;
   margin: 0px;
   background-color: #fff;
-}
-
-footer {
-  position: fixed;
-  bottom: 0;
+  font-family: 'Roboto-Regular';
   display: grid;
   place-items: center;
-  width: 100%;
-  height: calc(42px + 20px + 20px);
+  grid-template-rows: var(--footer-height) auto var(--footer-height);
+}
+
+header,
+main,
+footer {
+  height: 100%;
+  width: 100%;
+  display: grid;
+  place-items: center;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+#welcome-message {
+  font-size: 18px;
+}
+
+#route-cards {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+}
+
+.route-card {
+  flex: 1;
+  --route-card-radius: 45px;
+  border-radius: var(--route-card-radius);
+  box-shadow: 0 0 27px #ccc;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  width: 90%;
+  display: flex;
+}
+
+.route-card > * {
+  flex: 1;
+}
+
+.route-card-left {
+  flex: 0 1 20%;
+  border-top-left-radius: var(--route-card-radius);
+  border-bottom-left-radius: var(--route-card-radius);
+  display: grid;
+  place-items: center;
+}
+
+.route-card-left img {
+  display: block;
+  width: 80%;
+  height: auto;
+}
+
+.route-card-right {
+  flex: 0 1 20%;
+  border-top-right-radius: var(--route-card-radius);
+  border-bottom-right-radius: var(--route-card-radius);
+  background-image: url('../../static/images/test-1.jpg');
+  background-position: center;
+  background-size: cover;
+}
+
+#route-cards .route-card:nth-child(1) .route-card-left {
+  background-color: var(--pianello-red);
+}
+
+#route-cards .route-card:nth-child(2) .route-card-left {
+  background-color: var(--pianello-yellow);
+}
+
+#route-cards .route-card:nth-child(3) .route-card-left {
+  background-color: var(--pianello-blue);
+}
+
+.route-card .name {
+  display: grid;
+  height: 100%;
+  align-content: center;
+  padding: 20px;
+  font-size: 20px;
+}
+
+.route-card .name > * {
+  flex: 1;
 }
diff --git a/src/css/roboto.css b/src/css/roboto.css
new file mode 100644
index 0000000..f231572
--- /dev/null
+++ b/src/css/roboto.css
@@ -0,0 +1,5 @@
+
+@font-face {
+  font-family: 'Roboto-Regular';
+  src: url('../../static/fonts/roboto/Roboto-Regular.ttf') format('TrueType');
+}
diff --git a/static/images/test-1.jpg b/static/images/test-1.jpg
new file mode 100644
index 0000000..aa93799
Binary files /dev/null and b/static/images/test-1.jpg differ
