diff --git a/resources/views/components/layouts/base.blade.php b/resources/views/components/layouts/base.blade.php
index 9d94e77..07f28b0 100644
--- a/resources/views/components/layouts/base.blade.php
+++ b/resources/views/components/layouts/base.blade.php
@@ -1,5 +1,5 @@
 @props([
-    'fixedHeight' => false,
+    'timeline' => false,
 ])
 
 <!doctype html>
@@ -27,14 +27,15 @@
 
 <body @class([
     'flex flex-col  font-sans antialiased',
-    $fixedHeight ? 'h-screen' : 'min-h-screen',
-])>
+    $timeline ? 'h-screen' : 'min-h-screen',
+])
+    @if ($timeline) x-data="{ sidebarOpen: false }" @endif>
     <x-site.skip-to-content />
     <x-site.banner />
 
-    <x-site.header />
+    <x-site.header :$timeline />
 
-    <div @class(['flex flex-1', 'overflow-hidden' => $fixedHeight])>
+    <div @class(['flex flex-1', 'overflow-hidden' => $timeline])>
         {{ $slot }}
     </div>
 
diff --git a/resources/views/components/layouts/election.blade.php b/resources/views/components/layouts/election.blade.php
index 3bded17..b1c1c97 100644
--- a/resources/views/components/layouts/election.blade.php
+++ b/resources/views/components/layouts/election.blade.php
@@ -1,4 +1,4 @@
-<x-layouts.base fixedHeight>
+<x-layouts.base timeline>
     <x-timeline class="overflow-y-auto" />
 
     <main id="content" class="flex-1 px-4 py-10 overflow-y-auto sm:px-6 lg:px-8">
diff --git a/resources/views/components/site/header.blade.php b/resources/views/components/site/header.blade.php
index 4d176d1..b228b64 100644
--- a/resources/views/components/site/header.blade.php
+++ b/resources/views/components/site/header.blade.php
@@ -1,18 +1,31 @@
 <header x-data="{ menuOpen: false }" class="relative z-40 border-b border-gray-200 shadow-sm">
-    <nav class="flex justify-between gap-4 px-4 py-4 ">
-        <a href="{{ route('front.index') }}" class="flex items-center gap-2" wire:navigate>
+    <nav class="flex justify-between gap-4 px-4 py-4">
+        <a href="{{ route('front.index') }}" class="flex items-center flex-1 gap-2" wire:navigate>
             <div class="sr-only">{{ config('app.name') }}</div>
             <x-icon-logo class="h-10 md:h-14" />
         </a>
 
-        <div class="flex items-center gap-2 sm:relative">
+        <div class="flex items-center gap-4 sm:relative">
             <div class="items-center hidden gap-2 md:flex">
                 @foreach ($menuItems as $route => $label)
                     <x-navigation-item :route="$route" :label="$label" />
                 @endforeach
             </div>
 
-            <button type="button" @@click="menuOpen = !menuOpen" class="md:hidden">
+            @if ($timeline)
+                <button
+                    type="button"
+                    @@click="sidebarOpen = !sidebarOpen"
+                    class="p-2 -m-2 text-gray-700 md:hidden">
+                    <span class="sr-only">Open sidebar</span>
+                    <x-ri-history-line class="w-5 h-5" />
+                </button>
+            @endif
+
+            <button
+                type="button"
+                @@click="menuOpen = !menuOpen"
+                class="p-2 -m-2 text-gray-700 md:hidden">
                 <div class="sr-only">{{ __('app.menu') }}</div>
                 <x-ri-menu-line x-show="!menuOpen" class="w-5 h-5" />
                 <x-ri-close-line x-show="menuOpen" class="w-5 h-5" x-cloak />
diff --git a/resources/views/components/timeline/index.blade.php b/resources/views/components/timeline/index.blade.php
index 60f5b5e..ffeb7ca 100644
--- a/resources/views/components/timeline/index.blade.php
+++ b/resources/views/components/timeline/index.blade.php
@@ -1,67 +1,103 @@
-<nav class="flex flex-col px-6 pb-4 bg-white border-r border-gray-200 sm:py-10 gap-y-5 w-80">
-    <ul class="flex flex-col flex-1">
-        @foreach ($years as $year => $electionTypes)
-            <li class="relative pb-8 pl-8 group">
-                <div
-                    @class([
-                        'flex flex-col items-start mb-1',
-                    
-                        // Vertical line
-                        'group-last:before:hidden before:absolute before:left-2 before:h-full before:px-px before:bg-slate-200 before:self-start before:-translate-x-1/2 before:translate-y-3',
-                    
-                        // Marker
-                        'after:absolute after:left-2 after:w-3 after:h-3 after:border-2 after:box-content after:rounded-full after:-translate-x-1/2 after:translate-y-1.5',
-                    
-                        $isActiveYear($year)
-                            ? 'after:bg-indigo-600 after:border-indigo-50' // Active marker
-                            : 'after:bg-white after:border-slate-200', // Inactive marker
-                    ])>
+<div
+    x-show="sidebarOpen"
+    x-transition:enter="transition-opacity ease-linear duration-300"
+    x-transition:enter-start="opacity-0"
+    x-transition:enter-end="opacity-100"
+    x-transition:leave="transition-opacity ease-linear duration-300"
+    x-transition:leave-start="opacity-100"
+    x-transition:leave-end="opacity-0"
+    class="fixed inset-0 bg-gray-900/80 z-40 md:hidden"
+    aria-hidden="true"
+    x-cloak></div>
 
-                    <time
-                        class="text-xl font-bold text-slate-900"
-                        datetime="{{ $year }}">
-                        {{ $year }}
-                    </time>
-                </div>
+<div
+    @keydown.window.escape="sidebarOpen = false"
+    class="fixed inset-y-0 mr-16 flex flex-row-reverse w-full flex-1 z-50 items-stretch md:translate-x-0 md:relative transition ease-in-out duration-300 transform"
+    x-bind:class="{
+        '-translate-x-full': !sidebarOpen,
+        'translate-x-0': sidebarOpen
+    }">
 
-                <ul>
-                    @foreach ($electionTypes as $type => $elections)
-                        @if ($elections->count() === 1)
-                            <x-timeline.item
-                                :isActive="$isActiveElection($elections->first())"
-                                :isLive="$elections->first()->is_live"
-                                :url="route('front.elections.results', $elections->first())"
-                                :label="$type" />
-                        @else
-                            <li x-data="{ open: @js($isActiveElectionType($type)) }">
-                                <button
-                                    type="button"
-                                    class="flex items-center justify-between"
-                                    ::class="{ '-rotate-90': open }"
-                                    @@click="open = !open">
-                                    <span>{{ $type }}</span>
+    <div
+        x-show="sidebarOpen"
+        x-transition:enter="ease-in-out duration-300"
+        x-transition:enter-start="opacity-0"
+        x-transition:enter-end="opacity-100"
+        x-transition:leave="ease-in-out duration-300"
+        x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0"
+        @@click="sidebarOpen = false"
+        class="relative flex w-16 justify-center items-start pt-5">
+        <button type="button" class="-m-2.5 p-2.5" @@click="sidebarOpen = false">
+            <span class="sr-only">Close sidebar</span>
+            <x-ri-close-line class="w-6 h-6 text-white" />
+        </button>
+    </div>
 
-                                    <x-ri-arrow-down-s-fill
-                                        class="w-4 h-4 text-slate-500"
-                                        x-cloak />
-                                </button>
+    <nav
+        class="flex flex-col px-6 py-8 bg-white border-r border-gray-200 sm:py-10 gap-y-5 grow flex-1 md:w-80 overflow-y-auto">
+        <ul class="flex flex-col flex-1">
+            @foreach ($years as $year => $electionTypes)
+                <li class="relative pb-8 pl-8 group">
+                    <div
+                        @class([
+                            'flex flex-col items-start mb-1',
 
-                                <ul class="pl-4">
-                                    @foreach ($elections as $election)
-                                        <x-timeline.item
-                                            :isActive="$isActiveElection($election)"
-                                            :isLive="$election->is_live"
-                                            :url="route('front.elections.results', $election)"
-                                            :label="$election->title" />
-                                    @endforeach
-                                </ul>
-                            </li>
-                        @endif
-                    @endforeach
-                </ul>
+                            // Vertical line
+                            'group-last:before:hidden before:absolute before:left-2 before:h-full before:px-px before:bg-slate-200 before:self-start before:-translate-x-1/2 before:translate-y-3',
 
-            </li>
-        @endforeach
+                            // Marker
+                            'after:absolute after:left-2 after:w-3 after:h-3 after:border-2 after:box-content after:rounded-full after:-translate-x-1/2 after:translate-y-1.5',
 
-    </ul>
-</nav>
+                            $isActiveYear($year)
+                                ? 'after:bg-indigo-600 after:border-indigo-50' // Active marker
+                                : 'after:bg-white after:border-slate-200', // Inactive marker
+                        ])>
+
+                        <time
+                            class="text-xl font-bold text-slate-900"
+                            datetime="{{ $year }}">
+                            {{ $year }}
+                        </time>
+                    </div>
+
+                    <ul>
+                        @foreach ($electionTypes as $type => $elections)
+                            @if ($elections->count() === 1)
+                                <x-timeline.item
+                                    :isActive="$isActiveElection($elections->first())"
+                                    :isLive="$elections->first()->is_live"
+                                    :url="route('front.elections.results', $elections->first())"
+                                    :label="$type" />
+                            @else
+                                <li x-data="{ open: @js($isActiveElectionType($type)) }">
+                                    <button
+                                        type="button"
+                                        class="flex items-center justify-between"
+                                        ::class="{ '-rotate-90': open }"
+                                        @@click="open = !open">
+                                        <span>{{ $type }}</span>
+
+                                        <x-ri-arrow-down-s-fill
+                                            class="w-4 h-4 text-slate-500"
+                                            x-cloak />
+                                    </button>
+
+                                    <ul class="pl-4">
+                                        @foreach ($elections as $election)
+                                            <x-timeline.item
+                                                :isActive="$isActiveElection($election)"
+                                                :isLive="$election->is_live"
+                                                :url="route('front.elections.results', $election)"
+                                                :label="$election->title" />
+                                        @endforeach
+                                    </ul>
+                                </li>
+                            @endif
+                        @endforeach
+                    </ul>
+                </li>
+            @endforeach
+        </ul>
+    </nav>
+</div>
