diff --git a/css/fonts.css b/css/fonts.css
index 4b207d9..e51c3bf 100644
--- a/css/fonts.css
+++ b/css/fonts.css
@@ -7,4 +7,27 @@
          url('../fonts/arvo-regular-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
+}
+/* Roboto */
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 28, 2021 */
+@font-face {
+    font-family: 'roboto_condensedbold';
+    src: url('robotocondensed-bold-webfont.woff2') format('woff2'),
+         url('robotocondensed-bold-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'roboto_condenseditalic';
+    src: url('robotocondensed-italic-webfont.woff2') format('woff2'),
+         url('robotocondensed-italic-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'roboto_condensedregular';
+    src: url('robotocondensed-regular-webfont.woff2') format('woff2'),
+         url('robotocondensed-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
 }
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index 0e4c7ce..c005e9a 100644
--- a/css/main.css
+++ b/css/main.css
@@ -2,18 +2,29 @@
 @import url(fonts.css);
 
 /** Font classes **/
-
 .arvo {
     font-family: 'arvoregular'/*Fallback??*/;
 }
-
-.main-header {
-    background-image: url(../img/fara_background.jpg);
+.roboto {
+    font-family: 'roboto_condensedregular';
+}
+/****** Custom rules ******/
+body {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+main {
+    flex: 1 0 auto;
+    width: 100%;
+}
+/* ---- Header ----- */
+header {
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width: 100%;
-    min-height: 900px;
+    min-height: 930px;
     color: #fff;
     display: flex;
     align-items: center;
@@ -22,11 +33,80 @@
     margin: 0;
     padding: 0;
 }
+.main-header.bg1 {
+    background-image: url(../img/fara_background.jpg);
+}
+.main-header.bg2 {
+    background-image: url(../img/fara_bg_2.jpg);
+}
 .main-header h1 {
     font-size: 3rem;
 }
+.main-header h1::after {
+    max-width: 5rem;
+    margin: 10px auto 0 auto;
+    min-height: 0.4rem;
+    background-color: #ccac68;
+    content: '';
+    display: block;
+}
 #title {
     flex: none;
     min-width: 50%;
 }
-    
\ No newline at end of file
+#title button {
+    min-width: 100%;
+    background-color: transparent;
+    color: #fff;
+    border: none;
+    font-size: 0.9rem;
+    cursor: pointer;
+}
+/* ---- Navbar ----- */
+.active {
+    color: #fff;font-weight:bold;
+}
+#nav {
+    max-height: 50px;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+#nav > div {
+    vertical-align: middle;
+    line-height: 2.3rem;
+}
+#logo {
+    max-height: 41%;
+    padding: 7px 0 5px 20px;
+}
+#links {
+    text-align: right;
+}
+#links a {
+    color: #eee;
+    padding: 10px;
+    font-size: 0.85rem;
+    text-decoration: none;
+    cursor: pointer;
+}
+#links a:hover {
+    color: #fff;
+    text-decoration: none;
+}
+/** Footer **/
+footer {
+    min-height: 5rem;
+}
+footer p {
+    padding: 20px;
+    text-align: center;
+    margin-bottom: 0;
+}
+#copy {
+    font-size: 0.7rem;
+    margin-top: 1rem;
+}
+#benef {
+    max-height: 70px;
+}
\ No newline at end of file
diff --git a/fonts/robotocondensed-bold-webfont.woff b/fonts/robotocondensed-bold-webfont.woff
new file mode 100644
index 0000000..2ab7f1d
Binary files /dev/null and b/fonts/robotocondensed-bold-webfont.woff differ
diff --git a/fonts/robotocondensed-bold-webfont.woff2 b/fonts/robotocondensed-bold-webfont.woff2
new file mode 100644
index 0000000..a2c88cf
Binary files /dev/null and b/fonts/robotocondensed-bold-webfont.woff2 differ
diff --git a/fonts/robotocondensed-italic-webfont.woff b/fonts/robotocondensed-italic-webfont.woff
new file mode 100644
index 0000000..7a7f15d
Binary files /dev/null and b/fonts/robotocondensed-italic-webfont.woff differ
diff --git a/fonts/robotocondensed-italic-webfont.woff2 b/fonts/robotocondensed-italic-webfont.woff2
new file mode 100644
index 0000000..35de4de
Binary files /dev/null and b/fonts/robotocondensed-italic-webfont.woff2 differ
diff --git a/fonts/robotocondensed-regular-webfont.woff b/fonts/robotocondensed-regular-webfont.woff
new file mode 100644
index 0000000..762e4d7
Binary files /dev/null and b/fonts/robotocondensed-regular-webfont.woff differ
diff --git a/fonts/robotocondensed-regular-webfont.woff2 b/fonts/robotocondensed-regular-webfont.woff2
new file mode 100644
index 0000000..bd97acd
Binary files /dev/null and b/fonts/robotocondensed-regular-webfont.woff2 differ
diff --git a/img/FESR_BARRA_BENEFICIARI_DEF.jpg b/img/FESR_BARRA_BENEFICIARI_DEF.jpg
new file mode 100644
index 0000000..9b36d6d
Binary files /dev/null and b/img/FESR_BARRA_BENEFICIARI_DEF.jpg differ
diff --git a/img/InnovaPatrimonio_logo_transparent_bg_150x98.png b/img/InnovaPatrimonio_logo_transparent_bg_150x98.png
new file mode 100644
index 0000000..ddc7dde
Binary files /dev/null and b/img/InnovaPatrimonio_logo_transparent_bg_150x98.png differ
diff --git a/img/fara_background_alt.jpg b/img/fara_background_alt.jpg
new file mode 100644
index 0000000..36d32b0
Binary files /dev/null and b/img/fara_background_alt.jpg differ
diff --git a/img/fara_bg_2.jpg b/img/fara_bg_2.jpg
new file mode 100644
index 0000000..71c8a6d
Binary files /dev/null and b/img/fara_bg_2.jpg differ
diff --git a/index.html b/index.html
index 6437390..88fab69 100644
--- a/index.html
+++ b/index.html
@@ -8,13 +8,43 @@
         <title>Nel cielo di Fara</title>
     </head>
     <body>
-        <header class="main-header">
+        <header class="main-header bg1">
             <div class="container">
-                <!-- GRIIIIDDDDD -->
+                <div class="columns" id="nav">
+                    <div class="column col-7">
+                        <img src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
+                    </div>
+                    <div class="column col-5" id="links">
+                        <a href="/index.html" title="Torna alla home page">Home</a>
+                        <a href="/progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
+                        <a href="/itinerario.html" title="Vai all'itinerario">L'itinerario</a>
+                        <a href="/news.html" title="Leggi news ed eventi">News & Eventi</a>
+                        <a href="/credits.html" title="Credits del progetto">Credits</a>
+                    </div>
+                </div>
             </div>
             <div id="title">
                 <h1 class="arvo text-center">Nel cielo di Fara</h1>
+                <button class="text-center">Entra</button>
             </div>
         </header>
+        <main></main>
+        <footer class="roboto">
+            <p id="copy">&copy; Avviso pubblico Beni Culturali e Turismo POR FESR Lazio 2014-2020</p>
+            <p><img src="img/FESR_BARRA_BENEFICIARI_DEF.jpg" id="benef" alt="Loghi enti beneficiari"></p>
+        </footer>
     </body>
+    <!-- MOOOVE AWAAAAAYY -->
+    <script type="text/javascript">
+        window.addEventListener('load', function () {
+            let navlinks = document.querySelector('#links').children;
+
+            Array.from(navlinks).forEach(element => {
+                let ref = element.href.substr(element.href.lastIndexOf('/'), element.href.length);
+                if (window.location.href.includes(ref)) {
+                    element.setAttribute('class', 'active');
+                }
+            });            
+        });
+    </script>
 </html>
\ No newline at end of file