diff --git a/viewer/static/css/noscript.css b/viewer/static/css/noscript.css
new file mode 100644
index 0000000..ac6abe7
--- /dev/null
+++ b/viewer/static/css/noscript.css
@@ -0,0 +1,12 @@
+.offcanvas,
+.sidebar-toggle,
+.sidebar-close {
+    display: none !important;
+}
+
+.noscript-sidebar {
+    display: block !important;
+    margin-bottom: 12px;
+    width: 100% !important;
+    flex: 0 0 auto !important;
+}
diff --git a/viewer/static/css/old_styles.css b/viewer/static/css/old_styles.css
new file mode 100644
index 0000000..8c9f165
--- /dev/null
+++ b/viewer/static/css/old_styles.css
@@ -0,0 +1,128 @@
+/****************************************************************************
+ * Specific elements.                                                       *
+ ****************************************************************************/
+
+html {
+    height:100%;
+}
+
+body {
+    height: 100%;
+    margin: 0px;
+}
+
+#id_username {
+width: 100%;
+}
+
+#id_password {
+width: 100%;
+}
+
+a:link {
+    color: #ffff00;
+}
+
+a:visited {
+    color: #009CD9;
+}
+
+/****************************************************************************
+ * Containers.                                                              *
+ ****************************************************************************/
+
+.centered-container {
+    width: 100%;
+    text-align: center;
+    margin-bottom: 0.5em;
+}
+
+.background {
+    background-color: darkslategray;
+    color: lightgray;
+}
+
+.image-container {
+    max-width: 900px;
+    max-height: 600px;
+}
+
+.fc {
+    width: fit-content;
+}
+
+.h90 {
+    height: 90%;
+}
+
+.full-width {
+    width: 100%;
+}
+
+.fixed-width {
+    width: 300px;
+}
+
+/****************************************************************************
+ * Content.                                                                 *
+ ****************************************************************************/
+
+.image {
+    max-width: 100%;
+    max-height: 600px;
+    width: auto;
+}
+
+.mauto {
+    margin: auto;
+}
+
+.mauto-top {
+    margin: 200px auto;
+}
+
+.navigation-icon {
+    width: 100px;
+}
+
+.small-nav-icon {
+    width: 3em;
+}
+
+.mb-2 {
+    margin-bottom: 2em;
+}
+
+.mr-2 {
+    margin-right: 2em;
+}
+
+.ml-4 {
+    margin-left: 4em;
+}
+
+.ml-2 {
+    margin-left: 2em;
+}
+
+.clear-btn {
+    border: none;
+    background-color: #00000000;
+}
+
+.search-box {
+    height: 2.5em;
+}
+
+.float-right {
+    float: right;
+}
+
+/****************************************************************************
+ * Grid.                                                                    *
+ ****************************************************************************/
+
+.column {
+    text-align: center;
+    border: black 1px solid;
+}
diff --git a/viewer/static/css/styles.css b/viewer/static/css/styles.css
index 382a7e0..d080ca8 100644
--- a/viewer/static/css/styles.css
+++ b/viewer/static/css/styles.css
@@ -1,128 +1,315 @@
-/****************************************************************************
- * Specific elements.                                                       *
- ****************************************************************************/
+:root {
+    --radius: 14px;
+    --sidebar-width: 284px;
+}
 
-html {
-    height:100%;
+body.theme-dark {
+    --bg: #24282d;
+    --panel: #2e333a;
+    --panel-strong: #3a4048;
+    --text: #ecf0f4;
+    --muted: #c6ced8;
+    --line: #606973;
+    --accent: #91adc4;
+    --input-bg: #252a30;
+}
+
+body.theme-light {
+    --bg: #d8dadc;
+    --panel: #f2f2f2;
+    --panel-strong: #ffffff;
+    --text: #1e2f40;
+    --muted: #3b4a57;
+    --line: #7c8894;
+    --accent: #32506a;
+    --input-bg: #f8fafb;
+}
+
+html,
+body {
+    height: 100%;
 }
 
 body {
-    height: 100%;
-    margin: 0px;
+    margin: 0;
+    background: var(--bg);
+    color: var(--text);
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
-#id_username {
+.app-shell {
+    height: 100vh;
+    overflow: hidden;
+    gap: 24px;
+    padding: 16px;
+}
+
+.sidebar {
+    width: var(--sidebar-width);
+    flex: 0 0 var(--sidebar-width);
+    background: var(--panel);
+    border-radius: var(--radius);
+    padding: 10px;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.28);
+}
+
+.sidebar hr {
+    border-color: var(--line);
+    opacity: 0.85;
+    margin: 8px 0;
+}
+
+.user-row {
+    background: var(--panel-strong);
+    border-radius: 8px;
+    min-height: 42px;
+    padding: 0 8px;
+    gap: 8px;
+}
+
+.user-name {
+    color: var(--text);
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.sidebar-link {
+    color: var(--text);
+    display: block;
+    padding: 2px 0;
+    text-decoration: none;
+}
+
+.sidebar-link:hover {
+    color: var(--accent);
+}
+
+.sidebar-scroll {
+    overflow-y: auto;
+    min-height: 120px;
+}
+
+.subdir-item {
+    color: var(--text);
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    padding: 6px 0;
+    text-decoration: none;
+}
+
+.subdir-item:hover {
+    color: var(--accent);
+}
+
+.subdir-thumb {
+    width: 70px;
+    height: 45px;
+    object-fit: cover;
+    border-radius: 6px;
+    display: block;
+}
+
+.subdir-fallback {
+    width: 70px;
+    height: 45px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--accent);
+    font-size: 34px;
+    line-height: 1;
+}
+
+.main-area {
+    min-width: 0;
+}
+
+.top-bar {
+    background: var(--panel);
+    border-radius: 10px;
+    min-height: 44px;
+    padding: 4px 10px;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.22);
+}
+
+.breadcrumb-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+}
+
+.crumb-link {
+    color: var(--text);
+    text-decoration: none;
+    font-size: 15px;
+    max-width: 240px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.crumb-link:hover {
+    color: var(--accent);
+}
+
+.crumb-sep {
+    color: var(--muted);
+}
+
+.gallery-scroll {
+    overflow-y: auto;
+    min-height: 0;
+    padding-top: 12px;
+}
+
+.gallery-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(128px, 128px));
+    justify-content: space-between;
+    column-gap: 24px;
+    row-gap: 24px;
+    padding-bottom: 8px;
+}
+
+.thumb-card {
+    width: 128px;
+    display: block;
+    border-radius: 14px;
+    overflow: hidden;
+    text-decoration: none;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.35);
+}
+
+.thumb-card img,
+.thumb-fallback {
+    width: 128px;
+    height: 128px;
+    object-fit: cover;
+    border-radius: 14px;
+    display: block;
+    filter: brightness(1);
+    transition: filter 0.25s ease;
+}
+
+.thumb-fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--accent);
+    font-size: 44px;
+    background: var(--panel-strong);
+}
+
+.thumb-card:hover img,
+.thumb-card:hover .thumb-fallback {
+    filter: brightness(1.25);
+}
+
+.search-input,
+.search-input:focus {
+    background: var(--input-bg);
+    color: var(--text);
+    border-color: var(--line);
+    box-shadow: none;
+}
+
+.search-input::placeholder {
+    color: var(--muted);
+    opacity: 1;
+}
+
+.search-input::-webkit-input-placeholder {
+    color: var(--muted);
+}
+
+.search-input::-moz-placeholder {
+    color: var(--muted);
+    opacity: 1;
+}
+
+.search-addon {
+    background: var(--input-bg);
+    color: var(--muted);
+    border-color: var(--line);
+}
+
+.btn-plain {
+    color: var(--text);
+    background: var(--panel-strong);
+}
+
+.btn-plain:hover {
+    color: var(--accent);
+    border-color: var(--accent);
+}
+
+.offcanvas {
+    background: var(--panel);
+    color: var(--text);
+    width: var(--sidebar-width) !important;
+}
+
+.offcanvas .sidebar {
     width: 100%;
+    border-radius: 0;
+    padding: 0;
+    background: transparent;
 }
 
-#id_password {
-    width: 100%;
+.sort-menu {
+    max-height: 220px;
+    overflow-y: auto;
 }
 
-a:link {
-    color: #ffff00;
+.sort-menu .dropdown-item {
+    color: #1e2f40;
+    font-weight: 600;
+    font-size: 14px;
 }
 
-a:visited {
-    color: #009CD9;
+.sort-menu .dropdown-item.active-sort {
+    text-decoration: underline;
+    background: transparent;
 }
 
-/****************************************************************************
- * Containers.                                                              *
- ****************************************************************************/
+@media (max-width: 991.98px) {
+    .app-shell {
+        padding: 12px;
+        gap: 12px;
+    }
 
-.centered-container {
-    width: 100%;
-    text-align: center;
-    margin-bottom: 0.5em;
+    .offcanvas {
+        width: 100vw !important;
+    }
 }
 
-.background {
-    background-color: darkslategray;
-    color: lightgray;
+@media (max-width: 575.98px) {
+    .gallery-grid {
+        grid-template-columns: 1fr;
+        justify-content: stretch;
+    }
+
+    .thumb-card {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .crumb-link {
+        max-width: 130px;
+    }
 }
 
-.image-container {
-    max-width: 900px;
-    max-height: 600px;
-}
-
-.fc {
-    width: fit-content;
-}
-
-.h90 {
-    height: 90%;
-}
-
-.full-width {
-    width: 100%;
-}
-
-.fixed-width {
-    width: 300px;
-}
-
-/****************************************************************************
- * Content.                                                                 *
- ****************************************************************************/
-
-.image {
-    max-width: 100%;
-    max-height: 600px;
-    width: auto;
-}
-
-.mauto {
-    margin: auto;
-}
-
-.mauto-top {
-    margin: 200px auto;
-}
-
-.navigation-icon {
-    width: 100px;
-}
-
-.small-nav-icon {
-    width: 3em;
-}
-
-.mb-2 {
-    margin-bottom: 2em;
-}
-
-.mr-2 {
-    margin-right: 2em;
-}
-
-.ml-4 {
-    margin-left: 4em;
-}
-
-.ml-2 {
-    margin-left: 2em;
-}
-
-.clear-btn {
-    border: none;
-    background-color: #00000000;
-}
-
-.search-box {
-    height: 2.5em;
-}
-
-.float-right {
-    float: right;
-}
-
-/****************************************************************************
- * Grid.                                                                    *
- ****************************************************************************/
-
-.column {
-    text-align: center;
-    border: black 1px solid;
+@supports not (display: grid) {
+    .gallery-grid {
+        display: block;
+    }
+
+    .thumb-card {
+        display: inline-block;
+        margin: 0 24px 24px 0;
+    }
 }
diff --git a/viewer/templates/gallery_view.html b/viewer/templates/gallery_view.html
index 0e36454..ff655d4 100644
--- a/viewer/templates/gallery_view.html
+++ b/viewer/templates/gallery_view.html
@@ -7,346 +7,9 @@
         <title>Gallery</title>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer">
-        <style>
-            :root {
-                --radius: 14px;
-                --sidebar-width: 284px;
-            }
-
-            body.theme-dark {
-                --bg: #24282d;
-                --panel: #2e333a;
-                --panel-strong: #3a4048;
-                --text: #ecf0f4;
-                --muted: #c6ced8;
-                --line: #606973;
-                --accent: #91adc4;
-                --input-bg: #252a30;
-            }
-
-            body.theme-light {
-                --bg: #d8dadc;
-                --panel: #f2f2f2;
-                --panel-strong: #ffffff;
-                --text: #1e2f40;
-                --muted: #3b4a57;
-                --line: #7c8894;
-                --accent: #32506a;
-                --input-bg: #f8fafb;
-            }
-
-            html,
-            body {
-                height: 100%;
-            }
-
-            body {
-                margin: 0;
-                background: var(--bg);
-                color: var(--text);
-                font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-            }
-
-            .app-shell {
-                height: 100vh;
-                overflow: hidden;
-                gap: 24px;
-                padding: 16px;
-            }
-
-            .sidebar {
-                width: var(--sidebar-width);
-                flex: 0 0 var(--sidebar-width);
-                background: var(--panel);
-                border: 1px solid var(--line);
-                border-radius: var(--radius);
-                padding: 10px;
-                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.28);
-            }
-
-            .sidebar hr {
-                border-color: var(--line);
-                opacity: 0.85;
-                margin: 8px 0;
-            }
-
-            .user-row {
-                background: var(--panel-strong);
-                border: 1px solid var(--line);
-                border-radius: 8px;
-                min-height: 42px;
-                padding: 0 8px;
-                gap: 8px;
-            }
-
-            .user-name {
-                color: var(--text);
-                font-weight: 600;
-                font-size: 14px;
-            }
-
-            .sidebar-link {
-                color: var(--text);
-                display: block;
-                padding: 2px 0;
-                text-decoration: none;
-            }
-
-            .sidebar-link:hover {
-                color: var(--accent);
-            }
-
-            .sidebar-scroll {
-                overflow-y: auto;
-                min-height: 120px;
-            }
-
-            .subdir-item {
-                color: var(--text);
-                display: flex;
-                gap: 10px;
-                align-items: center;
-                padding: 6px 0;
-                text-decoration: none;
-            }
-
-            .subdir-item:hover {
-                color: var(--accent);
-            }
-
-            .subdir-thumb {
-                width: 70px;
-                height: 45px;
-                object-fit: cover;
-                border: 1px solid var(--line);
-                border-radius: 6px;
-                display: block;
-            }
-
-            .subdir-fallback {
-                width: 70px;
-                height: 45px;
-                border: 1px solid var(--line);
-                border-radius: 6px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: var(--accent);
-                font-size: 34px;
-                line-height: 1;
-            }
-
-            .main-area {
-                min-width: 0;
-            }
-
-            .top-bar {
-                background: var(--panel);
-                border: 1px solid var(--line);
-                border-radius: 10px;
-                min-height: 44px;
-                padding: 4px 10px;
-                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.22);
-            }
-
-            .breadcrumb-wrap {
-                display: flex;
-                flex-wrap: wrap;
-                align-items: center;
-                gap: 6px;
-                min-width: 0;
-            }
-
-            .crumb-link {
-                color: var(--text);
-                text-decoration: none;
-                font-size: 15px;
-                max-width: 240px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-
-            .crumb-link:hover {
-                color: var(--accent);
-            }
-
-            .crumb-sep {
-                color: var(--muted);
-            }
-
-            .gallery-scroll {
-                overflow-y: auto;
-                min-height: 0;
-                padding-top: 12px;
-            }
-
-            .gallery-grid {
-                display: grid;
-                grid-template-columns: repeat(auto-fill, minmax(128px, 128px));
-                justify-content: space-between;
-                column-gap: 24px;
-                row-gap: 24px;
-                padding-bottom: 8px;
-            }
-
-            .thumb-card {
-                width: 128px;
-                display: block;
-                border-radius: 14px;
-                overflow: hidden;
-                text-decoration: none;
-                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.35);
-            }
-
-            .thumb-card img,
-            .thumb-fallback {
-                width: 128px;
-                height: 128px;
-                object-fit: cover;
-                border-radius: 14px;
-                display: block;
-                border: 2px solid rgba(0, 0, 0, 0.18);
-                filter: brightness(1);
-                transition: filter 0.25s ease;
-            }
-
-            .thumb-fallback {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: var(--accent);
-                font-size: 44px;
-                background: var(--panel-strong);
-            }
-
-            .thumb-card:hover img,
-            .thumb-card:hover .thumb-fallback {
-                filter: brightness(1.25);
-            }
-
-            .search-input,
-            .search-input:focus {
-                background: var(--input-bg);
-                color: var(--text);
-                border-color: var(--line);
-                box-shadow: none;
-            }
-
-            .search-input::placeholder {
-                color: var(--muted);
-                opacity: 1;
-            }
-
-            .search-input::-webkit-input-placeholder {
-                color: var(--muted);
-            }
-
-            .search-input::-moz-placeholder {
-                color: var(--muted);
-                opacity: 1;
-            }
-
-            .search-addon {
-                background: var(--input-bg);
-                color: var(--muted);
-                border-color: var(--line);
-            }
-
-            .btn-plain {
-                color: var(--text);
-                border: 1px solid var(--line);
-                background: var(--panel-strong);
-            }
-
-            .btn-plain:hover {
-                color: var(--accent);
-                border-color: var(--accent);
-            }
-
-            .offcanvas {
-                background: var(--panel);
-                color: var(--text);
-                width: var(--sidebar-width) !important;
-            }
-
-            .offcanvas .sidebar {
-                width: 100%;
-                border: none;
-                border-radius: 0;
-                padding: 0;
-                background: transparent;
-            }
-
-            .sort-menu {
-                max-height: 220px;
-                overflow-y: auto;
-            }
-
-            .sort-menu .dropdown-item {
-                color: #1e2f40;
-                font-weight: 600;
-                font-size: 14px;
-            }
-
-            .sort-menu .dropdown-item.active-sort {
-                text-decoration: underline;
-                background: transparent;
-            }
-
-            @media (max-width: 991.98px) {
-                .app-shell {
-                    padding: 12px;
-                    gap: 12px;
-                }
-
-                .offcanvas {
-                    width: 100vw !important;
-                }
-            }
-
-            @media (max-width: 575.98px) {
-                .gallery-grid {
-                    grid-template-columns: 1fr;
-                    justify-content: stretch;
-                }
-
-                .thumb-card {
-                    margin-left: auto;
-                    margin-right: auto;
-                }
-
-                .crumb-link {
-                    max-width: 130px;
-                }
-            }
-
-            @supports not (display: grid) {
-                .gallery-grid {
-                    display: block;
-                }
-
-                .thumb-card {
-                    display: inline-block;
-                    margin: 0 24px 24px 0;
-                }
-            }
-        </style>
+        <link href="{% static 'css/styles.css' %}" rel="stylesheet">
         <noscript>
-            <style>
-                .offcanvas,
-                .sidebar-toggle,
-                .sidebar-close {
-                    display: none !important;
-                }
-
-                .noscript-sidebar {
-                    display: block !important;
-                    margin-bottom: 12px;
-                    width: 100% !important;
-                    flex: 0 0 auto !important;
-                }
-            </style>
+            <link href="{% static 'css/noscript.css' %}" rel="stylesheet">
         </noscript>
     </head>
     <body class="theme-{{ theme }}">
diff --git a/viewer/templates/image_view.html b/viewer/templates/image_view.html
index a1fe3cc..11880dc 100644
--- a/viewer/templates/image_view.html
+++ b/viewer/templates/image_view.html
@@ -6,7 +6,7 @@
         <title>
             File: {{image_path.name}}
         </title>
-        <link href="{% static 'css/styles.css' %}" rel="stylesheet">
+        <link href="{% static 'css/old_styles.css' %}" rel="stylesheet">
     </head>
 
     <body class="background">