diff --git a/app/resources/views/index.twig b/app/resources/views/index.twig
index 3bc97e0..b94b8f8 100644
--- a/app/resources/views/index.twig
+++ b/app/resources/views/index.twig
@@ -1,16 +1,6 @@
-<!DOCTYPE html>
-
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="{{ asset('app.js') }}" defer></script>
-<link rel="icon" href="/app/resources/images/favicon.{{ config('dark_mode') ? 'dark' : 'light' }}.png">
-
-<link rel="stylesheet" href="{{ asset('app.css') }}">
-
-<title>Directory Lister</title>
-
-<div id="app" class="font-mono min-h-screen z-0 {{ config('dark_mode') ? 'dark-mode' : '' }}">
+{% extends "layouts/app.twig" %}
 
+{% block content %}
     <header id="header" class="block bg-blue-600 shadow sticky top-0 text-white text-sm tracking-tight">
         <div class="container mx-auto p-4">
             <a href="/" class="hover:underline">Home</a>
@@ -71,4 +61,4 @@
     </a>
 
     <file-info-modal ref="fileInfoModal"></file-info-modal>
-</div>
+{% endblock %}
diff --git a/app/resources/views/layouts/app.twig b/app/resources/views/layouts/app.twig
new file mode 100644
index 0000000..1b2bd6d
--- /dev/null
+++ b/app/resources/views/layouts/app.twig
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="{{ asset('app.js') }}" defer></script>
+<link rel="icon" href="/app/resources/images/favicon.{{ config('dark_mode') ? 'dark' : 'light' }}.png">
+
+<link rel="stylesheet" href="{{ asset('app.css') }}">
+
+<title>Directory Lister</title>
+
+<div id="app" class="font-mono min-h-screen z-0 {{ config('dark_mode') ? 'dark-mode' : '' }}">
+    {% block content %}{% endblock %}
+</div>
