diff --git a/main.go b/main.go
index fbea54a..8360911 100644
--- a/main.go
+++ b/main.go
@@ -53,6 +53,23 @@ func main() {
 		})
 	}
 
+	r.Get("/appunti", func(w http.ResponseWriter, r *http.Request) {
+		searchQuery := ""
+
+		keys, present := r.URL.Query()["q"]
+		if present {
+			searchQuery = keys[0]
+		}
+
+		err := renderer.Render(w, "appunti.html", util.H{
+			"Query": searchQuery,
+		})
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+	})
+
 	r.Get("/news", func(w http.ResponseWriter, r *http.Request) {
 		articles, err := newsArticlesRegistry.LoadAll()
 		if err != nil {
diff --git a/public/style.css b/public/style.css
index 897a75f..f2d4aba 100644
--- a/public/style.css
+++ b/public/style.css
@@ -143,7 +143,7 @@ nav .nav-main {
     border: 1px solid var(--bg-darker-2);
     box-shadow: var(--shadow-1);
 
-    z-index: 0;
+    z-index: 1;
 }
 
 nav .nav-item.filler {
@@ -633,16 +633,16 @@ form .field-set input {
     padding-top: calc(100vh - 6rem);
 }
 
-.page-utenti .search {
+.search {
     margin: 2rem 0;
 }
 
-.page-utenti .search input[type=text] {
+.search input[type=text] {
     width: 50ch;
     height: 2.5rem;
 }
 
-.page-utenti .search button {
+.search button {
     width: 2.5rem;
     height: 2.5rem;
 }
diff --git a/views/appunti.html b/views/appunti.html
new file mode 100644
index 0000000..0fb0ad4
--- /dev/null
+++ b/views/appunti.html
@@ -0,0 +1,43 @@
+{{template "base" .}}
+
+{{define "title"}}Appunti • PHC{{end}}
+
+{{define "body"}}
+<section>
+    <h2>
+        <i class="fas fa-book"></i>
+        Raccolta degli Appunti
+    </h2>
+    <p>
+        Questa è la raccolta degli appunti presenti su Poisson. Cerca il titolo della dispensa, il nome e cognome o l'username dell'autore oppure scrivi il nome del corso rispetto a cui filtrare. Altrimenti in cima compariranno gli appunti più "gettonati".
+    </p>
+    <p>
+        Puoi aggiungere le tue dispense dalla <a href="/appunti/condivisi">pagina personale di condivisione</a>.
+    </p>
+    <div class="search">
+        <div class="compound">
+            <input type="text" id="search-field" placeholder="Prova con &quot;Geometria 1&quot; o &quot;Mezzedimi&quot;..." autocomplete="off" {{ if .Query }}value="{{ .Query }}"{{ end }}>
+            <button class="icon">
+                <i class="fas fa-search"></i>
+            </button>
+        </div>
+    </div>
+    <div class="appunti-list">
+        <code>TODO: Lista work in progress</code>
+    </div>
+
+    <script>
+        // Aggiorna automaticamente la barra dell'URL con la query corrente
+        document.querySelector('#search-field').addEventListener('input', function() {
+            const q = this.value.trim();
+            history.replaceState({}, 'Appunti', 
+                q.length === 0 ? '/appunti' : '/appunti?q=' + encodeURIComponent(q)
+            );
+        });
+    </script>
+</section>
+<script>
+
+</script>
+
+{{end}}
\ No newline at end of file
diff --git a/views/partials/navbar.html b/views/partials/navbar.html
index 4b09352..dee9497 100644
--- a/views/partials/navbar.html
+++ b/views/partials/navbar.html
@@ -48,6 +48,9 @@
                 <div class="nav-item">
                     <a class="nav-element" href="/news">News</a>
                 </div>
+                <div class="nav-item">
+                    <a class="nav-element" href="/appunti">Appunti</a>
+                </div>
                 <div class="nav-item">
                     <a class="nav-element" href="/guide">Guide</a>
                 </div>
diff --git a/views/utenti.html b/views/utenti.html
index 231e960..241416c 100644
--- a/views/utenti.html
+++ b/views/utenti.html
@@ -20,7 +20,7 @@
         </div>
     </div>
     <div class="user-list">
-        <!-- Dummy data -->
+        <code>TODO: Lista work in progress</code>
     </div>
 </section>
 <script>