diff --git a/css/fonts.css b/css/fonts.css
index e51c3bf..1a28a4f 100644
--- a/css/fonts.css
+++ b/css/fonts.css
@@ -12,22 +12,22 @@
 /*! 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');
+    src: url('../fonts/robotocondensed-bold-webfont.woff2') format('woff2'),
+         url('../fonts/robotocondensed-bold-webfont.woff2') 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');
+    src: url('../fonts/robotocondensed-italic-webfont.woff2') format('woff2'),
+         url('../fonts/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');
+    src: url('../fonts/robotocondensed-regular-webfont.woff2') format('woff2'),
+         url('../fonts/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 c005e9a..a4e70cd 100644
--- a/css/main.css
+++ b/css/main.css
@@ -13,6 +13,7 @@ body {
     height: 100%;
     display: flex;
     flex-direction: column;
+    scroll-behavior: smooth;
 }
 main {
     flex: 1 0 auto;
@@ -22,6 +23,7 @@ main {
 header {
     background-size: cover;
     background-position: center;
+    background-attachment: fixed; 
     background-repeat: no-repeat;
     width: 100%;
     min-height: 930px;
@@ -55,10 +57,12 @@ header {
     min-width: 50%;
 }
 #title button {
-    min-width: 100%;
-    background-color: transparent;
+    min-width: 80%;
     color: #fff;
-    border: none;
+    background-color: transparent;
+    border: 1px solid #fff;
+    border-radius: 4px;
+    padding: 3px 0;
     font-size: 0.9rem;
     cursor: pointer;
 }
@@ -68,7 +72,7 @@ header {
 }
 #nav {
     max-height: 50px;
-    position: absolute;
+    position: fixed;
     top: 0;
     width: 100%;
 }
@@ -78,13 +82,13 @@ header {
 }
 #logo {
     max-height: 41%;
-    padding: 7px 0 5px 20px;
+    padding: 7px 0 10px 20px;
 }
 #links {
     text-align: right;
 }
 #links a {
-    color: #eee;
+    color: inherit;
     padding: 10px;
     font-size: 0.85rem;
     text-decoration: none;
diff --git a/css/spectre.css b/css/spectre.css
index 1499dcc..0c76161 100644
--- a/css/spectre.css
+++ b/css/spectre.css
@@ -3169,7 +3169,7 @@ a.text-secondary:visited {
 }
 
 .text-gray {
-  color: #bcc3ce !important;
+  color: #eee !important;
 }
 
 a.text-gray:focus,
@@ -3251,6 +3251,12 @@ a.text-error:visited {
   color: #fff;
 }
 
+/** Custom **/
+.bg-white {
+  background: #fff;
+  color: #333 !important;
+}
+
 .bg-secondary {
   background: #f1f1fc !important;
 }
diff --git a/index.html b/index.html
index 88fab69..8c5e6ec 100644
--- a/index.html
+++ b/index.html
@@ -10,22 +10,22 @@
     <body>
         <header class="main-header bg1">
             <div class="container">
-                <div class="columns" id="nav">
+                <div class="columns text-gray" 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>
+                        <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 id="title" class="text-center">
+                <h1 class="arvo">Nel cielo di Fara</h1>
+                <button>Entra</button>
             </div>
         </header>
         <main></main>
@@ -36,7 +36,7 @@
     </body>
     <!-- MOOOVE AWAAAAAYY -->
     <script type="text/javascript">
-        window.addEventListener('load', function () {
+        window.addEventListener('load', () => {
             let navlinks = document.querySelector('#links').children;
 
             Array.from(navlinks).forEach(element => {
@@ -46,5 +46,18 @@
                 }
             });            
         });
+
+        window.addEventListener('scroll', event => {
+            let nav = document.querySelector('#nav');
+
+            if (window.pageYOffset !== 0) {
+                nav.classList.add('bg-white');
+                nav.classList.remove('text-gray');
+            }
+            else {
+                nav.classList.add('text-gray');
+                nav.classList.remove('bg-white');
+            }
+        })
     </script>
 </html>
\ No newline at end of file
