diff --git a/src/Controller/GuiController.php b/src/Controller/GuiController.php
index 2d17f69..372d26d 100644
--- a/src/Controller/GuiController.php
+++ b/src/Controller/GuiController.php
@@ -30,14 +30,108 @@ class GuiController extends AbstractController {
         EntityManagerInterface $entityManager,
     ): array {
         $notes = $entityManager->getRepository(Note::class)->findAllOrderedBySlugDesc();
+        $years = $this->getYears($notes);
+        $notesByYear = $this->groupByYear($notes);
+        $months = array_map(array: $years, callback: fn($year) => $this->getMonths($notesByYear[$year]));
+        $monthsByYear = array_combine(keys: $years, values: $months);
+        $groupByMonth = fn($notes) => $this->groupByMonth($notes);
+        $notesByYearAndMonth = array_map(
+            array: $notesByYear,
+            callback: $groupByMonth,
+        );
 
         return [
             'title' => 'Joe Carstairs\' notes',
             'description' => 'Joe Carstairs\' notes',
-            'notes' => $notes,
+            'notes' => $notesByYearAndMonth,
+            'years' => $years,
+            'months' => $monthsByYear,
+            'monthNames' => [
+                '01' => 'January',
+                '02' => 'February',
+                '03' => 'March',
+                '04' => 'April',
+                '05' => 'May',
+                '06' => 'June',
+                '07' => 'July',
+                '08' => 'August',
+                '09' => 'September',
+                '10' => 'October',
+                '11' => 'November',
+                '12' => 'December',
+            ],
         ];
     }
 
+    /**
+     * @param $notes Note[]
+     * @return Note[][]
+     */
+    function groupByYear(array $notes): array {
+        $years = $this->getYears($notes);
+        $filterByYear = fn(string $year) =>
+            fn($note) => ($note->getPublishedDate()->format('Y') == $year);
+        $notesForYear = fn(string $year) =>
+            array_filter(array: $notes, callback: $filterByYear($year));
+        $notesByYear = array_map(
+            array: $years,
+            callback: $notesForYear,
+        );
+        return array_combine(keys: $years, values: $notesByYear);
+    }
+
+    /**
+    * @param $notes Note[]
+    * @return string[]
+    */
+    function getYears(array $notes): array {
+        $getYear = fn(Note $note): string => $note->getPublishedDate()->format('Y');
+        $years = array_map(array: $notes, callback: $getYear);
+        $years = array_unique($years);
+        arsort($years);
+        return $years;
+    }
+
+    /**
+     * @param $notes Note[]
+     * @return Note[]
+     */
+    function groupByMonth(array $notes): array {
+        $months = $this->getMonths($notes);
+        $filterByMonth = fn(string $month) =>
+            fn($note) => ($note->getPublishedDate()->format('m') == $month);
+        $notesByMonth = array_map(
+            array: $months,
+            callback: fn(string $month) =>
+                array_filter(array: $notes, callback: $filterByMonth($month)),
+        );
+        return array_combine(keys: $months, values: $notesByMonth);
+    }
+
+    /**
+    * @param $notes Note[]
+    * @return string[]
+    */
+    function getMonths(array $notes): array {
+        $getMonth = fn(Note $note): string => $note->getPublishedDate()->format('m');
+        $months = array_map(array: $notes, callback: $getMonth);
+        $months = array_unique($months);
+        arsort($months);
+        return $months;
+    }
+
+    /**
+     * @param $notes Note[]
+     * @return Note[]
+     */
+    function sortBySlug(array $notes): array {
+        $getSlug = fn(Note $note): string => $note->getSlug();
+        $slugs = array_map(array: $notes, callback: $getSlug);
+        $notesBySlug = array_combine(keys: $slugs, values: $notes);
+        krsort($notesBySlug);
+        return array_values($notesBySlug);
+    }
+
     #[IsGranted('ROLE_EDITOR')]
     #[Route('/notes/write')]
     #[Template('/write_note.html.twig')]
diff --git a/templates/notes.html.twig b/templates/notes.html.twig
index 7b0370f..48f25f5 100644
--- a/templates/notes.html.twig
+++ b/templates/notes.html.twig
@@ -3,12 +3,41 @@
 {% block content %}
     <section>
         <h1>Notes</h1>
+        <p>
+            Skip to:
+            <ul>
+                {% for year in years %}
+                    <li><a href="#{{ year }}">{{ year }}</a></li>
+                {% endfor %}
+            </ul>
+        </p>
 
-        {% for note in notes %}
-            <h2><a href="/notes/{{ note.slug }}">Note {{ note.slug }}</a></h2>
-            {% apply markdown_to_html %}
-                {{ note.content }}
-            {% endapply %}
+        {% for year in years %}
+            <h2 id="{{ year }}">{{ year }}</h2>
+
+            <p>
+                Skip to:
+                <ul>
+                    {% for month in months[year] %}
+                        <li><a href="#{{ year }}-{{ month }}">{{ monthNames[month] }} {{ year }}</a></li>
+                    {% endfor %}
+                </ul>
+            </p>
+
+
+            {% for month in months[year] %}
+                <h3 id="{{ year }}-{{ month }}">{{ monthNames[month] }}</h3>
+
+                {% for note in notes[year][month] %}
+                    <h4><a href="/notes/{{ note.slug }}">Note {{ note.slug }}</a></h4>
+                    <time datetime="{{ note.publishedDate.format('c') }}">
+                        {{ note.publishedDate.format('j F Y') }}
+                    </time>
+                    {% apply markdown_to_html %}
+                        {{ note.content }}
+                    {% endapply %}
+                {% endfor %}
+            {% endfor %}
         {% else %}
             <p>I have no notes.</p>
         {% endfor %}