diff --git a/static/app.css b/static/app.css
index 6d52f3e..395ea59 100644
--- a/static/app.css
+++ b/static/app.css
@@ -1,44 +1,59 @@
 /* Ensure html and body take full height */
 html, body {
-  background-color: var(--light-background);
+  background: var(--light-background);
   color: var(--main-text-color);
   height: 100%;
   margin: 0;
-  /* padding: 0; */
 }
 
 /* Global Styles */
 body {
-  font-family: 'Helvetica Neue', Arial, sans-serif;
-  padding-top: 70px; /* Adjust to your header height */
-  overflow-x: hidden; /* Prevent horizontal scroll */
+  font-family: 'Manrope', 'Segoe UI', sans-serif;
+  padding-top: 0;
+  overflow-x: hidden;
+  letter-spacing: 0.01em;
+  line-height: 1.6;
+  background:
+    radial-gradient(1200px 900px at -10% 10%, rgba(34, 211, 238, 0.12), transparent 40%),
+    radial-gradient(1100px 800px at 110% -20%, rgba(59, 130, 246, 0.14), transparent 45%),
+    var(--light-background);
+}
+
+/* Header styles */
+.site-header {
+  background: linear-gradient(120deg, var(--dark-background), #13253f);
+  color: var(--header-text-color);
+  position: sticky;
+  top: 0;
+  width: 100%;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 20px;
+
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.site-header img.logo {
+    height: 54px;
+    margin-right: 6px;
+    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.25));
+}
+
+.site-header h1 {
+    font-size: 1.4rem;
+    margin: 0;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    font-weight: 800;
 }
-  /* Header styles */
-  .site-header {
-    background-color: var(--dark-background);
-    color: var(--header-text-color);
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    padding: 10px 20px;
-  }
-  .site-header img.logo {
-      height: 50px;
-      margin-right: 15px;
-  }
-  .site-header h1 {
-      font-size: 1.5em;
-      margin: 0;
-  }
 
 .wrapper {
   display: flex;
   flex-direction: column;
   min-height: 100%;
-  padding-bottom: 200px;
+  padding-bottom: 220px;
 }
 
 .wrapper > .admin-nav,
@@ -49,79 +64,159 @@ body {
 .wrapper > main,
 .wrapper > section {
   flex: 1 1 auto;
+  padding-top: 6px;
 }
 
 .wrapper > footer {
   flex: 0 0 auto;
 }
+
 .container {
   max-width: 1200px;
-  width: 90%;
-  margin: 0 auto;
-  padding: 20px 0;
+  width: 95%;
+
 }
 
 .container a {
-  font-size: 18px;
+  font-size: 17px;
 }
 
 .container-fluid {
+  padding: 24px;
+}
+
+/* Carded content shell */
+main.tab-content,
+section.tab-content {
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid var(--border-color);
+  box-shadow: none;
   padding: 20px;
+  margin-top: -1px;
+}
+
+/* Search view container (custom element) */
+search {
+  display: block;
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid var(--border-color);
+  border-radius: 0 0 16px 16px;
+  box-shadow: none;
+  margin-top: -1px;
+  padding: 16px 0 10px;
 }
 
 /* Breadcrumb Styles */
-.breadcrumb a {
-  font-size: 19px;
-  text-decoration: none;
-  color: var(--main-text-color);
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 10px 16px;
+  margin: 0 0 14px;
 }
+
+.breadcrumb a {
+  font-size: 17px;
+  text-decoration: none;
+  color: var(--brand-navy);
+  font-weight: 700;
+}
+
 .breadcrumb span {
-  font-size: 19px;
-  color: #ccc;
-  margin-left: 5px;
-  margin-right: 5px;
-  margin-bottom: 10px;
+  font-size: 17px;
+  color: var(--muted-text);
+  margin: 0;
 }
 
 /* Admin Nav Styles */
 .admin-nav {
-  color: #ccc;
-  border: 1px solid #ccc;
-  padding: 10px;
-  background-color: #979797;
+  color: var(--brand-ink);
+  border: 1px solid var(--border-color);
+  background: rgba(255, 255, 255, 0.9);
+  margin-bottom: 12px;
+  width: 100vw;
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+  box-sizing: border-box;
+  position: relative;
+  z-index: 1000;
+  overflow: visible;
+}
+
+.admin-nav-rail {
+  position: relative;
+  overflow: visible;
+}
+
+.admin-nav-track {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  overflow-x: auto;
+  overflow-y: visible;
+  -webkit-overflow-scrolling: touch;
+  white-space: nowrap;
 }
 
 .admin-nav a {
-  color: #ccc;
+  color: var(--brand-ink);
   text-decoration: none;
-  padding: 5px 0;
+  padding: 8px 12px;
+  font-weight: 600;
+  font-size: 13px;
+  border: 1px solid transparent;
+  background: linear-gradient(135deg, #fff, #f4f7fb);
+  transition: all 0.2s ease;
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
+  flex-shrink: 0;
+}
+
+.admin-nav a:hover {
+  color: var(--brand-sky);
+  border-color: var(--border-color);
+  transform: translateY(-1px);
+}
+
+.admin-nav span {
+  color: var(--border-color);
+  display: none;
 }
 
 .admin-nav .dropdown-toggle {
-  color: #ccc;
-  text-decoration: none;
-  padding: 5px 0;
+  color: var(--brand-ink);
+  padding: 8px 12px;
 }
 
 .admin-nav .dropdown-toggle::after {
-  border-top-color: #ccc;
+  display: none; /* hide default Bootstrap caret */
 }
 
 .admin-nav .dropdown-menu {
-  background-color: #f2f2f2;
-  border-color: #ccc;
+  background-color: #fff;
+  border-color: var(--border-color);
+  border-radius: 10px;
+  box-shadow: var(--card-shadow);
+  z-index: 4000;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  margin-top: 0;
+  margin-left: 8px;
+  transform: none;
 }
 
 .admin-nav .dropdown-item {
-  color: #333;
+  color: var(--brand-ink);
   padding-left: 14px;
   padding-right: 14px;
 }
 
 .admin-nav .dropdown-item:hover,
 .admin-nav .dropdown-item:focus {
-  background-color: #e6e6e6;
-  color: #000;
+  background-color: #eef4ff;
+  color: var(--brand-navy);
 }
 
 /* List Styles */
@@ -138,18 +233,29 @@ div.directory-item a, li.directory-item a, li.file-item a, li.link-item a {
 
 /* Directory Items (in a list) */
 .directory-item, .link-item, .directory-item, .file-item {
-  margin-bottom: 10px;
+  margin-bottom: 12px;
   background-color: #fff;
-  border-radius: 5px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-  padding: 10px 15px;
+  border-radius: 12px;
+  box-shadow: var(--card-shadow);
+  padding: 12px 18px;
+  border: 1px solid var(--border-color);
+  transition: all 0.2s ease;
+}
+
+.directory-item:hover,
+.link-item:hover,
+.file-item:hover {
+  border-color: var(--brand-sky);
+  box-shadow: 0 14px 26px rgba(59, 130, 246, 0.14);
+  transform: translateY(-1px);
 }
 
 /* Grid Layout for Directories */
 .directories-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 0 10px;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  column-gap: 14px;
+  row-gap: 0;
   text-align: center;
 }
 
@@ -159,49 +265,58 @@ div.directory-item a, li.directory-item a, li.file-item a, li.link-item a {
   grid-template-columns: 1fr auto;
   align-items: center;
   background-color: #fff;
-  border-radius: 5px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  border-radius: 12px;
+  box-shadow: var(--card-shadow);
 }
 
 /* Link Styles */
 .directory-link,
 .link-link,
 a.play-file {
-  color: var(--player-text-color);
+  color: var(--brand-ink);
   text-decoration: none;
   word-break: break-all;
+  font-weight: 600;
 }
+
 a.show-transcript {
   text-decoration: none;
-  color: var(--main-text-color);
-  font-size: 20px;
+  color: var(--brand-navy);
+  font-size: 18px;
   margin-left: 10px;
+  font-weight: 600;
 }
+
 a.show-transcript:hover {
-  color: rgb(113, 146, 167);
+  color: var(--brand-sky);
 }
 
 .highlight {
-  background-color: yellow;
+  background-color: #fffbcc;
+  padding: 2px 4px;
+  border-radius: 4px;
 }
+
 #transcriptContent code.timecode-link {
   cursor: pointer;
   font-size: small;
 }
 
-
 a.create-share {
   text-decoration: none;
-  color: var(--main-text-color);
-  font-size: 20px;
+  color: var(--brand-navy);
+  font-size: 18px;
   margin-left: 10px;
+  font-weight: 600;
 }
+
 a.create-share:hover {
-  color: rgb(113, 146, 167);
+  color: var(--brand-sky);
 }
 
 .currently-playing {
   background-color: var(--selected-background);
+  border: 1px solid var(--brand-sky);
 }
 
 /* Footer Player Styles */
@@ -210,14 +325,15 @@ footer {
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: var(--dark-background);
+  background: linear-gradient(120deg, #0b1220, #0f172a);
   color: #fff;
-  padding: 7px;
+  padding: 10px 14px;
   text-align: center;
   z-index: 1000;  /* Make sure it sits on top */
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
 }
 
 /* Modal Styles */
@@ -242,14 +358,18 @@ footer {
   position: relative;
   max-height: 80vh;
   overflow-y: auto;
+  display: flex;
+  flex-direction: column;
 }
 #transcriptModal .close {
-  position: absolute;
-  right: 15px;
-  top: 10px;
+  position: sticky;
+  top: 0;
+  right: 0;
   font-size: 28px;
   font-weight: bold;
   cursor: pointer;
+  margin-left: auto;
+  z-index: 5;
 }
 
 /* Basic Markdown Styles */
@@ -313,9 +433,10 @@ footer {
 .image-item {
   position: relative;
   overflow: hidden;
-  border: 2px solid #ccc;
-  border-radius: 8px;
-  background: #f9f9f9;
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  background: linear-gradient(145deg, #ffffff, #f6f8fc);
+  box-shadow: var(--card-shadow);
 }
 
 /* the filename overlay, centered at bottom */
@@ -422,41 +543,60 @@ footer {
 
 /* Tab Navigation Styles */
 .main-tabs {
-  background-color: var(--dark-background);
   display: flex;
-  justify-content: center;
-  padding: 0;
-  margin: 0;
-  gap: 2px;
-  border-bottom: 2px solid #444;
+  justify-content: flex-start;
+  padding: 6px 18px 0;
+  gap: 0;
+  border-bottom: 1px solid var(--border-color);
+  flex-wrap: nowrap;
+  border-radius: 0;
+  width: 100vw;
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+  box-sizing: border-box;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
 }
 
 .tab-button {
-  background: #333;
-  border: 1px solid #444;
+  background: rgba(217, 217, 217, 0.5);
+  border: 1px solid var(--border-color);
   border-bottom: none;
-  color: #999;
-  padding: 6px 20px;
-  font-size: 14px;
+  color: var(--muted-text);
+  padding: 10px 16px;
+  font-size: 13px;
   cursor: pointer;
   transition: all 0.2s ease;
-  border-radius: 5px 5px 0 0;
-  margin: 0;
+  border-radius: 10px 10px 0 0;
+  margin: 0 6px 0 0;
   position: relative;
-  top: 2px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: none;
+  box-shadow:
+    0 -10px 18px -12px rgba(15, 23, 42, 0.18),
+    10px 0 18px -12px rgba(15, 23, 42, 0.12),
+    -10px 0 18px -12px rgba(15, 23, 42, 0.12);
+  flex: 0 0 auto;
 }
 
 .tab-button:hover {
-  color: #fff;
-  background: #3a3a3a;
+  color: var(--brand-ink);
+  background: rgba(255, 255, 255, 0.92);
 }
 
 .tab-button.active {
-  color: var(--main-text-color, #000);
-  background: var(--light-background);
-  border-color: #444;
-  border-bottom-color: var(--light-background);
-  z-index: 1;
+  color: var(--brand-ink);
+  background: rgba(255, 255, 255, 0.92);
+  border-color: var(--border-color);
+  z-index: 2;
+  box-shadow:
+    0 -12px 22px -12px rgba(15, 23, 42, 0.22),
+    12px 0 20px -14px rgba(15, 23, 42, 0.14),
+    -12px 0 20px -14px rgba(15, 23, 42, 0.14);
+  margin-bottom: -1px;
 }
 
 .tab-content {
@@ -471,27 +611,28 @@ footer {
 .messages-section-header {
   max-width: 900px;
   margin: 0 auto;
-  padding: 0 0 8px;
+  padding: 0 0 10px;
 }
 
 .messages-container {
   max-width: 900px;
   margin: 0 auto;
-  padding: 20px 0;
+  padding: 10px 0 24px;
 }
 
 .message-card {
-  background: var(--card-background, #fff);
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  padding: 20px;
+  background: linear-gradient(145deg, #ffffff, #f7f9ff);
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
+  padding: 20px 22px;
   margin-bottom: 20px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  transition: box-shadow 0.3s ease;
+  box-shadow: var(--card-shadow);
+  transition: box-shadow 0.3s ease, transform 0.2s ease;
 }
 
 .message-card:hover {
-  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  box-shadow: 0 20px 38px rgba(15, 23, 42, 0.16);
+  transform: translateY(-2px);
 }
 
 .message-header {
@@ -500,18 +641,18 @@ footer {
   align-items: center;
   margin-bottom: 15px;
   padding-bottom: 10px;
-  border-bottom: 2px solid #e0e0e0;
+  border-bottom: 1px dashed var(--border-color);
 }
 
 .message-title {
   font-size: 1.5em;
   font-weight: bold;
-  color: var(--main-text-color);
+  color: var(--brand-ink);
   margin: 0;
 }
 
 .message-datetime {
-  color: #666;
+  color: var(--muted-text);
   font-size: 0.9em;
   font-style: italic;
 }
@@ -527,9 +668,9 @@ footer {
   gap: 6px;
   padding: 8px 16px;
   margin: 4px 0;
-  background: #f0f4f8;
-  color: #495057;
-  border: 1px solid #d1dce5;
+  background: #ecf6ff;
+  color: #0f172a;
+  border: 1px solid #bed8ff;
   border-radius: 6px;
   font-size: 0.95em;
   font-weight: 500;
@@ -539,9 +680,9 @@ footer {
 }
 
 .message-content .folder-link-btn:hover {
-  background: #e3eaf0;
-  border-color: #b8c5d0;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
+  background: #dff0ff;
+  border-color: #93c5fd;
+  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.24);
 }
 
 .message-content .folder-link-btn:active {
@@ -554,13 +695,13 @@ footer {
 }
 
 .message-content a {
-  color: #007bff;
+  color: var(--brand-sky);
   text-decoration: underline;
   cursor: pointer;
 }
 
 .message-content a:hover {
-  color: #0056b3;
+  color: #0ea5e9;
   text-decoration: underline;
 }
 
@@ -620,10 +761,12 @@ footer {
 }
 
 .message-content blockquote {
-  border-left: 4px solid #ccc;
+  border-left: 4px solid var(--border-color);
   padding-left: 15px;
-  color: #666;
+  color: var(--muted-text);
   font-style: italic;
+  background: #f8fbff;
+  border-radius: 6px;
 }
 
 .message-image {
@@ -638,7 +781,7 @@ footer {
 .message-actions {
   margin-top: 15px;
   padding-top: 10px;
-  border-top: 1px solid #e0e0e0;
+  border-top: 1px solid var(--border-color);
   display: flex;
   gap: 10px;
 }
@@ -654,12 +797,12 @@ footer {
 }
 
 .btn-edit {
-  background-color: #007bff;
+  background: linear-gradient(135deg, #2563eb, #22d3ee);
   color: white;
 }
 
 .btn-edit:hover {
-  background-color: #0056b3;
+  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
 }
 
 .btn-delete {
@@ -674,7 +817,7 @@ footer {
 .no-messages {
   text-align: center;
   padding: 40px;
-  color: #999;
+  color: var(--muted-text);
   font-size: 1.2em;
 }
 
@@ -690,9 +833,9 @@ footer {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 0;
-  border: 1px solid #ddd;
+  border: 1px solid var(--border-color);
   border-top: 0;
-  border-radius: 0 0 6px 6px;
+  border-radius: 0 0 10px 10px;
   overflow: visible;
 }
 
@@ -701,9 +844,9 @@ footer {
 }
 
 .calendar-day {
-  background: var(--card-background, #fff);
-  border-bottom: 1px solid #ddd;
-  padding: 8px 10px 4px;
+  background: #ffffff;
+  border-bottom: 1px solid var(--border-color);
+  padding: 12px 12px 6px;
   display: flex;
   flex-direction: column;
   min-width: 0;
@@ -713,19 +856,19 @@ footer {
 }
 
 .calendar-day-today {
-  background: #f7fbff;
-  box-shadow: inset 0 0 0 2px #4da3ff;
-  border-color: #4da3ff;
+  background: linear-gradient(135deg, #f6fbff, #ecf4ff);
+  box-shadow: inset 0 0 0 2px #3b82f6;
+  border-color: #3b82f6;
 }
 
 .calendar-day-sunday,
 .calendar-day-holiday {
-  background: #fff7f7;
+  background: #fff8f5;
 }
 
 .calendar-day-today.calendar-day-sunday,
 .calendar-day-today.calendar-day-holiday {
-  background: linear-gradient(135deg, #f7fbff 0%, #f7fbff 60%, #fff2f2 100%);
+  background: linear-gradient(135deg, #f6fbff 0%, #f6fbff 60%, #fff1ed 100%);
 }
 
 .calendar-day-sunday .calendar-day-header,
@@ -757,7 +900,7 @@ footer {
 @media (min-width: 992px) {
   .calendar-grid {
     grid-template-columns: repeat(7, minmax(0, 1fr));
-    border-radius: 0 0 8px 8px;
+    border-radius: 0 0 12px 12px;
   }
 
   .calendar-weekday-header {
@@ -765,21 +908,21 @@ footer {
     grid-template-columns: repeat(7, minmax(0, 1fr));
     text-align: center;
     font-weight: 600;
-    color: #999;
-    border: 1px solid #ddd;
+    color: var(--muted-text);
+    border: 1px solid var(--border-color);
     border-bottom: 0;
-    border-radius: 8px 8px 0 0;
+    border-radius: 12px 12px 0 0;
     overflow: visible;
     position: sticky;
     top: 70px;
     z-index: 900;
     background: var(--card-background, #fff);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
   }
 
   .calendar-day {
-    border-bottom: 1px solid #ddd;
-    border-right: 1px solid #ddd;
+    border-bottom: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
   }
 
   .calendar-day:nth-child(7n) {
@@ -795,17 +938,17 @@ footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 6px;
+  margin-bottom: 8px;
   gap: 8px;
 }
 
 .calendar-day-name {
-  font-weight: 600;
+  font-weight: 700;
   text-transform: capitalize;
 }
 
 .calendar-day-date {
-  color: #666;
+  color: var(--muted-text);
   font-size: 0.95rem;
   white-space: nowrap;
 }
@@ -817,9 +960,9 @@ footer {
 }
 
 .calendar-day thead th {
-  background: #f1f1f1;
-  color: #666;
-  border-color: #ddd;
+  background: #f6f8fb;
+  color: var(--muted-text);
+  border-color: var(--border-color);
 }
 
 .calendar-day.empty thead {
@@ -851,7 +994,7 @@ footer {
 
 .details-indicator {
   font-weight: 700;
-  color: #666;
+  color: var(--brand-sky);
   margin-left: 6px;
   cursor: pointer;
   position: relative;
@@ -869,7 +1012,7 @@ footer {
 }
 
 .calendar-details-row td {
-  background: #f8f9fa;
+  background: #f8fbff;
 }
 
 .calendar-inline-actions {
@@ -882,8 +1025,10 @@ footer {
 .file-browser-content {
   max-height: 400px;
   overflow-y: auto;
-  border: 1px solid #ddd;
-  border-radius: 5px;
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  background: #fff;
+  box-shadow: var(--card-shadow);
 }
 
 .file-browser-content .list-group-item {
@@ -906,15 +1051,15 @@ footer {
 }
 
 .file-browser-panel {
-  background-color: #f5f5f5;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  padding: 15px;
+  background-color: #f8fbff;
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 16px;
   margin-bottom: 10px;
 }
 
 .file-browser-panel h6 {
   margin-top: 0;
   margin-bottom: 10px;
-  color: #333;
+  color: var(--brand-ink);
 }
diff --git a/static/app.js b/static/app.js
index 9bcc4ab..06290b7 100644
--- a/static/app.js
+++ b/static/app.js
@@ -252,9 +252,9 @@ function renderContent(data) {
         contentHTML += '<div class="directories-grid">';
         data.directories.forEach(dir => {
           if (admin_enabled && data.breadcrumbs.length != 1 && dir.share) {
-            share_link = `<a href="#" class="create-share" data-url="${dir.path}">⚙️</a>`;
+            share_link = `<a href="#" class="create-share" data-url="${dir.path}"><i class="bi bi-gear"></i></a>`;
           }
-          contentHTML += `<div class="directory-item"><a href="#" class="directory-link" data-path="${dir.path}">📁 ${dir.name}</a>
+          contentHTML += `<div class="directory-item"><a href="#" class="directory-link" data-path="${dir.path}"><i class="bi bi-folder"></i> ${dir.name}</a>
           ${share_link}
           </div>`;
         });
@@ -262,22 +262,22 @@ function renderContent(data) {
       } else {
         contentHTML += '<ul>';
         if (data.breadcrumbs.length === 1 && Array.isArray(data.folder_today) && data.folder_today.length > 0) {
-          contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="heute">📅 Heute</a></li>`;
+          contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="heute"><i class="bi bi-calendar2-day"></i> Heute</a></li>`;
         } else if (data.breadcrumbs.length === 1 && Array.isArray(data.folder_yesterday) && data.folder_yesterday.length > 0) {
-          contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="gestern">📅 Gestern</a></li>`;
+          contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="gestern"><i class="bi bi-calendar2-day"></i> Gestern</a></li>`;
         }
         if (data.breadcrumbs.length === 1 && data.toplist_enabled) {
-          contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="toplist">🔥 oft angehört</a></li>`;
+          contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="toplist"><i class="bi bi-graph-up"></i> oft angehört</a></li>`;
         }
         
         data.directories.forEach(dir => {
           if (admin_enabled && data.breadcrumbs.length != 1 && dir.share) {
-            share_link = `<a href="#" class="create-share" data-url="${dir.path}">⚙️</a>`;
+            share_link = `<a href="#" class="create-share" data-url="${dir.path}"><i class="bi bi-gear"></i></a>`;
           }
           if (dir.path.includes('toplist')) {
-            link_symbol = '⭐';
+            link_symbol = '<i class="bi bi-star"></i>';
           } else {
-            link_symbol = '📁';
+            link_symbol = '<i class="bi bi-folder"></i>';
           }
           contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="${dir.path}">${link_symbol} ${dir.name}</a>${share_link}</li>`;
         });
@@ -286,7 +286,7 @@ function renderContent(data) {
     }
     // Add search link at top level above directories/files
     if (data.breadcrumbs.length === 1) {
-      contentHTML = `<ul><li class="link-item" onclick="viewSearch()"><a onclick="viewSearch()" class="link-link">🔎 Suche</a></li></ul>` + contentHTML;
+      contentHTML = `<ul><li class="link-item" onclick="viewSearch()"><a onclick="viewSearch()" class="link-link"><i class="bi bi-search"></i> Suche</a></li></ul>` + contentHTML;
     }
 
     // Render files (including music and non-image files)
@@ -294,18 +294,18 @@ function renderContent(data) {
     if (nonImageFiles.length > 0) {
       contentHTML += '<ul>';
       nonImageFiles.forEach((file, idx) => {
-        let symbol = '📄';
+        let symbol = '<i class="bi bi-file-earmark"></i>';
         if (file.file_type === 'music') {
-          symbol = '🔊';
+          symbol = '<i class="bi bi-volume-up"></i>';
           currentMusicFiles.push({ path: file.path, index: idx, title: file.name.replace('.mp3', '') });
         } else if (file.file_type === 'image') {
-          symbol = '🖼️';
+          symbol = '<i class="bi bi-image"></i>';
         }
         const indexAttr = file.file_type === 'music' ? ` data-index="${currentMusicFiles.length - 1}"` : '';
         contentHTML += `<li class="file-item">
                   <a href="#" class="play-file"${indexAttr} data-url="${file.path}" data-file-type="${file.file_type}">${symbol} ${file.name.replace('.mp3', '')}</a>`;
         if (file.has_transcript) {
-          contentHTML += `<a href="#" class="show-transcript" data-url="${file.transcript_url}" data-audio-url="${file.path}" title="Show Transcript">&#128196;</a>`;
+          contentHTML += `<a href="#" class="show-transcript" data-url="${file.transcript_url}" data-audio-url="${file.path}" title="Show Transcript"><i class="bi bi-journal-text"></i></a>`;
         }
         contentHTML += `</li>`;
       });
diff --git a/static/audioplayer.css b/static/audioplayer.css
index d11594c..d09ba60 100644
--- a/static/audioplayer.css
+++ b/static/audioplayer.css
@@ -1,23 +1,24 @@
 .audio-player-container {
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  padding: 7px;
-  width: 100%;
+  background: linear-gradient(135deg, #f9fbff, #eef4ff);
+  border-radius: 14px;
+  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
+  border: 1px solid #d7e3f4;
+  padding: 12px 16px;
+  width: min(1100px, 100%);
   display: none;
+  color: #1f2937;
 }
 
 /* Now Playing Info */
 .now-playing-info {
   margin-top: 5px;
-  font-size: 16px;
-  color: var(--main-text-color);
+  font-size: 15px;
+  color: #1f2937;
   text-align: center;
 }
 
 .audio-player {
-  --player-button-width: 4em;
-  --sound-button-width: 3em;
+  --control-size: 3.4em;
   --space: 0.5em;
 }
 
@@ -26,6 +27,7 @@
   align-items: center;
   width: 100%;
   gap: var(--space); /* ensures spacing between controls */
+  color: #1f2937;
 }
 
 /* Make the slider container fill the available space and stack its children vertically */
@@ -40,10 +42,10 @@
   -webkit-appearance: none;
   width: 100%;
   height: 0.5em;
-  background-color: #ccc;
+  background-color: #e6edf7;
   border-radius: 5px;
   background-size: 0% 100%;
-  background-image: linear-gradient(var(--dark-background), var(--dark-background));
+  background-image: linear-gradient(90deg, #0b1220, #0f172a);
   background-repeat: no-repeat;
   appearance: none;
   outline: none;
@@ -56,9 +58,9 @@
   width: 1em;
   height: 1em;
   border-radius: 50%;
-  background-color: var(--dark-background);
+  background-color: #0f172a;
   cursor: pointer;
-  border: none;
+  border: 2px solid #0b1220;
   outline: none;
 }
 
@@ -67,9 +69,9 @@
   width: 1em;
   height: 1em;
   border-radius: 50%;
-  background-color: var(--dark-background);
+  background-color: #0f172a;
   cursor: pointer;
-  border: none;
+  border: 2px solid #0b1220;
   outline: none;
 }
 
@@ -78,9 +80,9 @@
   width: 1em;
   height: 1em;
   border-radius: 50%;
-  background-color: var(--dark-background);
+  background-color: #0f172a;
   cursor: pointer;
-  border: none;
+  border: 2px solid #0b1220;
   outline: none;
 }
 
@@ -104,18 +106,37 @@
 
 .player-button,
 .sound-button {
-  background-color: transparent;
-  border: 0;
+  background-color: #0f172a;
+  border: 1px solid #0f172a;
   cursor: pointer;
-  padding: 0;
+  padding: 6px;
+  border-radius: 12px;
+  transition: background-color 0.2s ease, transform 0.2s ease;
 }
 
 .player-button {
-  width: var(--player-button-width);
-  height: var(--player-button-width);
+  width: var(--control-size);
+  height: var(--control-size);
 }
 
 .sound-button {
-  width: var(--sound-button-width);
-  height: var(--sound-button-width);
+  width: var(--control-size);
+  height: var(--control-size);
+}
+
+.player-button:hover,
+.sound-button:hover {
+  background-color: #0b1220;
+  transform: translateY(-1px);
+}
+
+.player-button svg path,
+.sound-button svg path {
+  fill: #f9fbff;
+}
+
+.timeline::-webkit-slider-thumb,
+.timeline::-moz-range-thumb,
+.timeline::-ms-thumb {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
 }
diff --git a/static/gallery.js b/static/gallery.js
index e37e292..bf8a92d 100644
--- a/static/gallery.js
+++ b/static/gallery.js
@@ -417,7 +417,7 @@ function setAutoPlay(active) {
   const playButton = document.getElementById('gallery-play');
   isAutoPlay = active;
   if (playButton) {
-    playButton.textContent = active ? '⏸' : '▶';
+    playButton.textContent = active ? '||' : '>';
     playButton.setAttribute('aria-pressed', active ? 'true' : 'false');
     playButton.classList.toggle('playing', active);
   }
diff --git a/static/general.js b/static/general.js
index 56d59d4..c735bb7 100644
--- a/static/general.js
+++ b/static/general.js
@@ -1,6 +1,66 @@
-  document.addEventListener('DOMContentLoaded', function() {
-    // (No per-icon setup needed here—just ensure your CSS is in place.)
-  });
+  function wireAdminDropdowns() {
+    const reposition = (toggle, menu) => {
+      const rect = toggle.getBoundingClientRect();
+      const gutter = 8;
+      const menuWidth = menu.offsetWidth || 220;
+      const menuHeight = menu.offsetHeight || 0;
+
+      // Prefer placing the menu to the right of the toggle; clamp within viewport.
+      let left = rect.right + gutter;
+      if (left + menuWidth > window.innerWidth - gutter) {
+        left = Math.max(gutter, window.innerWidth - menuWidth - gutter);
+      }
+
+      let top = Math.max(gutter, Math.min(rect.top, window.innerHeight - menuHeight - gutter));
+
+      menu.style.position = 'fixed';
+      menu.style.transform = 'none';
+      menu.style.top = `${top}px`;
+      menu.style.left = `${left}px`;
+      menu.style.right = 'auto';
+      menu.style.minWidth = `${Math.max(rect.width, 160)}px`;
+      menu.style.maxWidth = '260px';
+      menu.style.display = 'block';
+      menu.dataset.dropdownOpen = '1';
+      menu.classList.add('show');
+    };
+
+    const resetMenu = (menu) => {
+      menu.style.position = '';
+      menu.style.transform = '';
+      menu.style.top = '';
+      menu.style.left = '';
+      menu.style.right = '';
+      menu.style.minWidth = '';
+      menu.style.maxWidth = '';
+      menu.style.display = '';
+      menu.classList.remove('show');
+      delete menu.dataset.dropdownOpen;
+    };
+
+    document.querySelectorAll('.admin-nav .dropdown-toggle').forEach((toggle) => {
+      if (toggle.dataset.dropdownWired) return;
+      toggle.dataset.dropdownWired = '1';
+      const menu = toggle.nextElementSibling;
+      if (!menu) return;
+
+      toggle.addEventListener('shown.bs.dropdown', () => reposition(toggle, menu));
+      toggle.addEventListener('hide.bs.dropdown', () => resetMenu(menu));
+
+      window.addEventListener('scroll', () => {
+        if (menu.dataset.dropdownOpen) reposition(toggle, menu);
+      }, { passive: true });
+      window.addEventListener('resize', () => {
+        if (menu.dataset.dropdownOpen) reposition(toggle, menu);
+      });
+    });
+  }
+
+  if (document.readyState === 'complete' || document.readyState === 'interactive') {
+    wireAdminDropdowns();
+  } else {
+    document.addEventListener('DOMContentLoaded', wireAdminDropdowns);
+  }
 
   // 1) Delegate clicks on any .toggle-icon, now or in the future:
   document.addEventListener('click', function(e) {
diff --git a/static/search.js b/static/search.js
index 1c593c7..0ee23bf 100644
--- a/static/search.js
+++ b/static/search.js
@@ -14,11 +14,11 @@ document.addEventListener('DOMContentLoaded', function() {
                 card.className = 'card';
                 card.innerHTML = `
                     <div class="card-body">
-                        <p><button class="btn btn-light" onclick="player.loadTrack('${file.relative_path}')" style="width:100%;">🔊 ${filenameWithoutExtension}</button></p>
-                        <p><button onclick="window.open('/path/${file.relative_path}', '_self');" class="btn btn-light btn-sm" style="width:100%;">📁 ${parentFolder}</button></p>
+                        <p><button class="btn btn-light" onclick="player.loadTrack('${file.relative_path}')" style="width:100%;"><i class="bi bi-volume-up"></i> ${filenameWithoutExtension}</button></p>
+                        <p><button onclick="window.open('/path/${file.relative_path}', '_self');" class="btn btn-light btn-sm" style="width:100%;"><i class="bi bi-folder"></i> ${parentFolder}</button></p>
                         <p class="card-text">Anzahl Downloads: ${file.hitcount}</p>
                         ${ file.performance_date !== undefined ? `<p class="card-text">Datum: ${file.performance_date}</p>` : ``}
-                        ${ file.transcript_hits  !== undefined ? `<p class="card-text">Treffer im Transkript: ${file.transcript_hits} <a href="#" class="show-transcript" data-url="${transcriptURL}" data-audio-url="${file.relative_path}" highlight="${file.query}">&#128196;</a></p>` : ``}
+                        ${ file.transcript_hits  !== undefined ? `<p class="card-text">Treffer im Transkript: ${file.transcript_hits} <a href="#" class="show-transcript" data-url="${transcriptURL}" data-audio-url="${file.relative_path}" highlight="${file.query}"><i class="bi bi-journal-text"></i></a></p>` : ``}
                     </div>
                 `;
                 resultsDiv.appendChild(card);
diff --git a/templates/app.html b/templates/app.html
index e2a71c6..a1dd764 100644
--- a/templates/app.html
+++ b/templates/app.html
@@ -29,6 +29,10 @@
     <meta name="mobile-web-app-status-bar-style" content="default">
     <meta name="mobile-web-app-title" content="Gottesdienste">
 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
 
@@ -51,12 +55,14 @@
   <div class="wrapper">
     {% if admin_enabled %}
       <div class="admin-nav">
+        <div class="admin-nav-rail">
+          <div class="admin-nav-track">
         <a href="{{ url_for('mylinks') }}">Meine Links</a>
         <span> | </span>
         <a href="{{ url_for('folder_secret_config_editor') }}" id="edit-folder-config">Ordnerkonfiguration</a>
         <span> | </span>
-        <div class="dropdown d-inline-block">
-          <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+        <div class="dropdown dropend d-inline-block">
+          <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
             Auswertungen
           </a>
           <ul class="dropdown-menu">
@@ -67,6 +73,8 @@
             <li><a class="dropdown-item" href="{{ url_for('search_db_analyzer') }}">Dateiindex Analyse</a></li>
           </ul>
         </div>
+          </div>
+        </div>
       </div>
     {% endif %}
     
@@ -81,18 +89,16 @@
     
     <!-- Browse Section -->
     <main id="browse-section" class="tab-content active">
-      <div class="container">
-        <div id="breadcrumbs" class="breadcrumb"></div>
-        <div id="content"></div>
-        <div id="directory-controls">
-          <button id="reload-button" onclick="reloadDirectory()" title="Reload Directory">
-            <svg width="70px" height="70px" viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg">
-              <path d="M16.2721 3.13079L17.4462 6.15342C17.6461 6.66824 17.3909 7.24768 16.8761 7.44764L13.8535 8.6217" stroke="#CCC" stroke-width="2.5" stroke-linecap="round"/>
-              <path d="M7.61555 20.5111L6.93391 17.3409C6.81782 16.801 7.16142 16.2692 7.70136 16.1531L10.8715 15.4714" stroke="#CCC" stroke-width="2.5" stroke-linecap="round"/>
-              <path fill-rule="evenodd" clip-rule="evenodd" d="M16.9153 7.86755C17.6501 7.5052 17.8749 6.55584 17.263 6.01119C16.4869 5.32046 15.5626 4.77045 14.5169 4.41551C10.3331 2.99538 5.79017 5.23581 4.37005 9.41964C4.01511 10.4653 3.88883 11.5335 3.96442 12.5696C4.02402 13.3867 4.9141 13.7862 5.64883 13.4239V13.4239C6.17327 13.1652 6.44536 12.5884 6.44406 12.0037C6.44274 11.4136 6.53712 10.8132 6.73739 10.2232C7.71372 7.34681 10.837 5.80651 13.7134 6.78285C14.3034 6.98311 14.8371 7.27371 15.3045 7.63397C15.7677 7.99095 16.3909 8.12619 16.9153 7.86755V7.86755ZM6.97575 16.1145C7.50019 15.8558 8.12343 15.991 8.58656 16.348C9.05394 16.7083 9.58773 16.9989 10.1777 17.1992C13.0541 18.1755 16.1774 16.6352 17.1537 13.7588C17.354 13.1688 17.4483 12.5684 17.447 11.9783C17.4457 11.3936 17.7178 10.8168 18.2423 10.5581V10.5581C18.977 10.1958 19.8671 10.5953 19.9267 11.4124C20.0022 12.4485 19.876 13.5167 19.521 14.5624C18.1009 18.7462 13.558 20.9866 9.37418 19.5665C8.32849 19.2116 7.4042 18.6615 6.62812 17.9708C6.01616 17.4262 6.24102 16.4768 6.97575 16.1145V16.1145Z" fill="#CCC"/>
-              </svg>
-          </button>
-        </div>
+      <div id="breadcrumbs" class="breadcrumb"></div>
+      <div id="content"></div>
+      <div id="directory-controls">
+        <button id="reload-button" onclick="reloadDirectory()" title="Reload Directory">
+          <svg width="70px" height="70px" viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.2721 3.13079L17.4462 6.15342C17.6461 6.66824 17.3909 7.24768 16.8761 7.44764L13.8535 8.6217" stroke="#CCC" stroke-width="2.5" stroke-linecap="round"/>
+            <path d="M7.61555 20.5111L6.93391 17.3409C6.81782 16.801 7.16142 16.2692 7.70136 16.1531L10.8715 15.4714" stroke="#CCC" stroke-width="2.5" stroke-linecap="round"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.9153 7.86755C17.6501 7.5052 17.8749 6.55584 17.263 6.01119C16.4869 5.32046 15.5626 4.77045 14.5169 4.41551C10.3331 2.99538 5.79017 5.23581 4.37005 9.41964C4.01511 10.4653 3.88883 11.5335 3.96442 12.5696C4.02402 13.3867 4.9141 13.7862 5.64883 13.4239V13.4239C6.17327 13.1652 6.44536 12.5884 6.44406 12.0037C6.44274 11.4136 6.53712 10.8132 6.73739 10.2232C7.71372 7.34681 10.837 5.80651 13.7134 6.78285C14.3034 6.98311 14.8371 7.27371 15.3045 7.63397C15.7677 7.99095 16.3909 8.12619 16.9153 7.86755V7.86755ZM6.97575 16.1145C7.50019 15.8558 8.12343 15.991 8.58656 16.348C9.05394 16.7083 9.58773 16.9989 10.1777 17.1992C13.0541 18.1755 16.1774 16.6352 17.1537 13.7588C17.354 13.1688 17.4483 12.5684 17.447 11.9783C17.4457 11.3936 17.7178 10.8168 18.2423 10.5581V10.5581C18.977 10.1958 19.8671 10.5953 19.9267 11.4124C20.0022 12.4485 19.876 13.5167 19.521 14.5624C18.1009 18.7462 13.558 20.9866 9.37418 19.5665C8.32849 19.2116 7.4042 18.6615 6.62812 17.9708C6.01616 17.4262 6.24102 16.4768 6.97575 16.1145V16.1145Z" fill="#CCC"/>
+            </svg>
+        </button>
       </div>
     </main>
     
@@ -257,7 +263,7 @@
     <img id="gallery-modal-content" src="" />
     <button class="gallery-nav gallery-prev">‹</button>
     <button class="gallery-nav gallery-next">›</button>
-    <button id="gallery-play" aria-pressed="false">▶</button>
+    <button id="gallery-play" aria-pressed="false" aria-label="Start slideshow">&gt;</button>
     <div id="gallery-exif" aria-live="polite"></div>
     <div id="gallery-filename" aria-live="polite"></div>
   </div>
@@ -278,6 +284,7 @@
   <script src="{{ url_for('static', filename='gallery.js') }}"></script>
   <script src="{{ url_for('static', filename='search.js') }}"></script>
   <script src="{{ url_for('static', filename='messages.js') }}"></script>
+  <script src="{{ url_for('static', filename='general.js') }}"></script>
   <script>
     if ('serviceWorker' in navigator) {
       window.addEventListener('load', () => {
diff --git a/templates/base.html b/templates/base.html
index 34ba269..20f5e83 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,6 +10,10 @@
     <!-- Android Theme Color -->
     <meta name="theme-color" content="#000">
 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
     <link rel="stylesheet" href="{{ url_for('static', filename='theme.css') }}">
@@ -29,23 +33,27 @@
       {% if admin_enabled %}
       <!-- Navigation Bar -->
       <div class="admin-nav">
-        <a href="{{ url_for('index') }}">App</a>
-        <span> | </span>
-        <a href="{{ url_for('mylinks') }}">Meine Links</a>
-        <span> | </span>
-        <a href="{{ url_for('folder_secret_config_editor') }}" id="edit-folder-config">Ordnerkonfiguration</a>
-        <span> | </span>
-        <div class="dropdown d-inline-block">
-          <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-            Auswertungen
-          </a>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item" href="{{ url_for('dashboard') }}">Dashbord</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('connections') }}">Verbindungen</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('file_access') }}">Dateizugriffe</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('songs_dashboard') }}">Wiederholungen</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('search_db_analyzer') }}">Dateiindex Analyse</a></li>
-          </ul>
+        <div class="admin-nav-rail">
+          <div class="admin-nav-track">
+            <a href="{{ url_for('index') }}">App</a>
+            <span> | </span>
+            <a href="{{ url_for('mylinks') }}">Meine Links</a>
+            <span> | </span>
+            <a href="{{ url_for('folder_secret_config_editor') }}" id="edit-folder-config">Ordnerkonfiguration</a>
+            <span> | </span>
+          <div class="dropdown dropend d-inline-block">
+            <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
+              Auswertungen
+            </a>
+              <ul class="dropdown-menu">
+                <li><a class="dropdown-item" href="{{ url_for('dashboard') }}">Dashbord</a></li>
+                <li><a class="dropdown-item" href="{{ url_for('connections') }}">Verbindungen</a></li>
+                <li><a class="dropdown-item" href="{{ url_for('file_access') }}">Dateizugriffe</a></li>
+                <li><a class="dropdown-item" href="{{ url_for('songs_dashboard') }}">Wiederholungen</a></li>
+                <li><a class="dropdown-item" href="{{ url_for('search_db_analyzer') }}">Dateiindex Analyse</a></li>
+              </ul>
+            </div>
+          </div>
         </div>
       </div>
       {% endif %}
@@ -54,7 +62,7 @@
     </div>
 
     {% block scripts %}{% endblock %}
-    <script src="{{ url_for('static', filename='general.js') }}"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="{{ url_for('static', filename='general.js') }}"></script>
   </body>
 </html>