diff --git a/app/emails/frontend/emails.html b/app/emails/frontend/emails.html
index 6dbd463..72985a6 100644
--- a/app/emails/frontend/emails.html
+++ b/app/emails/frontend/emails.html
@@ -379,6 +379,26 @@
         word-break: break-word;
     }
 
+    .email-html-body {
+        max-width: 100%;
+        overflow-x: hidden;
+    }
+
+    .email-html-iframe {
+        width: 100%;
+        min-height: 520px;
+        height: min(72vh, 980px);
+        border: 1px solid rgba(0,0,0,0.08);
+        border-radius: 10px;
+        background: #ffffff;
+        display: block;
+    }
+
+    [data-bs-theme="dark"] .email-html-iframe {
+        background: #111827;
+        border-color: rgba(255,255,255,0.16);
+    }
+
     .email-body pre,
     .email-html-body,
     .email-html-body * {
@@ -388,14 +408,28 @@
     }
 
     .email-html-body table {
-        display: block;
-        overflow-x: auto;
-        width: 100% !important;
+        display: table;
+        overflow-x: visible;
+        width: max-content !important;
+        min-width: 100% !important;
         max-width: 100% !important;
         table-layout: auto !important;
         border-collapse: collapse;
     }
 
+    .email-table-scroll {
+        width: 100%;
+        max-width: 100%;
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+        margin-bottom: 0.5rem;
+    }
+
+    .email-table-scroll > table {
+        margin-bottom: 0;
+    }
+
     .email-html-body tbody,
     .email-html-body thead,
     .email-html-body tfoot,
@@ -407,11 +441,21 @@
 
     .email-html-body td,
     .email-html-body th {
+        min-width: 0 !important;
         white-space: normal !important;
         word-break: break-word !important;
         overflow-wrap: anywhere !important;
     }
 
+    .email-html-body [width],
+    .email-html-body [style*="width:"],
+    .email-html-body [style*="width: "],
+    .email-html-body [style*="min-width:"],
+    .email-html-body [style*="min-width: "] {
+        max-width: 100% !important;
+        box-sizing: border-box !important;
+    }
+
     .email-html-body img,
     .email-html-body video,
     .email-html-body iframe {
@@ -2226,45 +2270,102 @@ function renderEmailDetail(email) {
         </div>
         
         <div class="email-body">
-            ${email.body_html ? `<div class="email-html-body"></div>` : 
+                        ${email.body_html ? `<iframe class="email-html-iframe" sandbox="allow-popups allow-popups-to-escape-sandbox"></iframe>` : 
               `<pre style="white-space: pre-wrap; font-family: inherit;">${escapeHtml(email.body_text || 'Ingen indhold')}</pre>`}
         </div>
     `;
-    // If HTML, inject it as innerHTML after rendering
+
+        // If HTML, render inside sandboxed iframe so mail CSS cannot affect app layout.
     if (email.body_html) {
-        const htmlDiv = pane.querySelector('.email-html-body');
-        if (htmlDiv) {
-            htmlDiv.innerHTML = email.body_html;
-            normalizeEmailHtmlLayout(htmlDiv);
+                const frame = pane.querySelector('.email-html-iframe');
+                if (frame) {
+                        frame.srcdoc = buildIsolatedEmailSrcdoc(email.body_html);
         }
     }
 }
 
-function normalizeEmailHtmlLayout(container) {
-    if (!container) return;
+function buildIsolatedEmailSrcdoc(rawHtml) {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(String(rawHtml || ''), 'text/html');
 
-    const tables = container.querySelectorAll('table');
-    tables.forEach((table) => {
-        table.style.maxWidth = '100%';
-        table.style.width = '100%';
-        table.style.tableLayout = 'auto';
-        table.removeAttribute('width');
-    });
+        doc.querySelectorAll('script, base, meta[http-equiv="refresh"]').forEach((el) => el.remove());
 
-    const cells = container.querySelectorAll('td, th');
-    cells.forEach((cell) => {
-        cell.style.whiteSpace = 'normal';
-        cell.style.wordBreak = 'break-word';
-        cell.style.overflowWrap = 'anywhere';
-    });
+        doc.querySelectorAll('*').forEach((el) => {
+                Array.from(el.attributes).forEach((attr) => {
+                        if (/^on/i.test(attr.name)) {
+                                el.removeAttribute(attr.name);
+                        }
+                });
 
-    const images = container.querySelectorAll('img, iframe, video');
-    images.forEach((el) => {
-        el.style.maxWidth = '100%';
-        if (el.tagName === 'IMG' || el.tagName === 'VIDEO') {
-            el.style.height = 'auto';
+                if (el.hasAttribute('width')) {
+                        el.removeAttribute('width');
+                }
+
+                if (el.tagName === 'A') {
+                        el.setAttribute('target', '_blank');
+                        el.setAttribute('rel', 'noopener noreferrer');
+                }
+        });
+
+        const bodyHtml = (doc.body && doc.body.innerHTML) ? doc.body.innerHTML : String(rawHtml || '');
+
+        return `<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+            max-width: 100%;
+            overflow-x: auto;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            font-size: 14px;
+            line-height: 1.5;
+            color: #1f2937;
+            background: #ffffff;
         }
-    });
+
+        body {
+            padding: 10px;
+        }
+
+        * {
+            box-sizing: border-box;
+            max-width: 100%;
+        }
+
+        table {
+            display: block;
+            width: max-content !important;
+            min-width: 100% !important;
+            max-width: 100% !important;
+            overflow-x: auto;
+            border-collapse: collapse;
+        }
+
+        td, th {
+            min-width: 0 !important;
+            white-space: normal !important;
+            word-break: break-word !important;
+            overflow-wrap: anywhere !important;
+            vertical-align: top;
+        }
+
+        img, video, iframe {
+            max-width: 100% !important;
+            height: auto !important;
+        }
+
+        [style*="position:fixed"],
+        [style*="position: fixed"] {
+            position: static !important;
+        }
+    </style>
+</head>
+<body>${bodyHtml}</body>
+</html>`;
 }
 
 function renderEmailAnalysis(email) {
diff --git a/app/modules/sag/templates/detail.html b/app/modules/sag/templates/detail.html
index fb266cc..49bdeb7 100644
--- a/app/modules/sag/templates/detail.html
+++ b/app/modules/sag/templates/detail.html
@@ -864,11 +864,11 @@
 
     /* Forslag 1: Opgavebeskrivelse + kommentarspor (venstre side) */
     .narrative-description {
-        border: 1px solid rgba(15, 76, 117, 0.16);
-        background: linear-gradient(180deg, rgba(15, 76, 117, 0.06), rgba(15, 76, 117, 0.02));
+        border: 1px solid rgba(15, 76, 117, 0.22);
+        background: linear-gradient(165deg, rgba(15, 76, 117, 0.11), rgba(15, 76, 117, 0.04));
         border-radius: 12px;
         padding: 1.1rem 1.1rem 1rem;
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), 0 3px 10px rgba(15, 76, 117, 0.06);
     }
 
     #beskrivelse-section {
@@ -885,21 +885,26 @@
         font-weight: 800;
         letter-spacing: 0.06em;
         text-transform: uppercase;
-        color: var(--text-secondary);
+        color: color-mix(in srgb, var(--accent) 68%, #2f3a45);
         margin-bottom: 0.55rem;
     }
 
+    .case-left-section-title i {
+        color: var(--accent);
+    }
+
     .case-left-panel {
-        border: 1px solid rgba(0, 0, 0, 0.09);
+        border: 1px solid rgba(15, 76, 117, 0.18);
         border-radius: 12px;
-        background: var(--bg-card);
+        background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--bg-card)), var(--bg-card));
         padding: 0.9rem;
+        box-shadow: 0 2px 8px rgba(15, 76, 117, 0.06);
     }
 
     #beskrivelse-history-wrap {
-        border: 1px solid rgba(0, 0, 0, 0.09);
+        border: 1px solid rgba(15, 76, 117, 0.18);
         border-radius: 12px;
-        background: rgba(0, 0, 0, 0.02);
+        background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
         padding: 0.75rem 0.85rem;
     }
 
@@ -909,9 +914,9 @@
     }
 
     #beskrivelse-comments-wrap {
-        border: 1px solid rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(15, 76, 117, 0.2);
         border-radius: 12px;
-        background: var(--bg-card);
+        background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 3%, var(--bg-card)), var(--bg-card));
         padding: 0.95rem;
     }
 
@@ -930,20 +935,21 @@
     }
 
     .comment-thread {
-        border: 1px solid rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(15, 76, 117, 0.2);
         border-radius: 10px;
         padding: 0.65rem;
         max-height: 360px;
         overflow-y: auto;
-        background: var(--bg-body);
+        background: color-mix(in srgb, var(--accent) 3%, var(--bg-body));
     }
 
     .comment-item {
-        border: 1px solid rgba(0, 0, 0, 0.08);
+        border: 1px solid rgba(15, 76, 117, 0.16);
         border-radius: 10px;
         background: var(--bg-card);
         padding: 0.55rem 0.65rem;
         margin-bottom: 0.5rem;
+        box-shadow: 0 1px 4px rgba(15, 76, 117, 0.05);
     }
 
     .comment-item:last-child {
@@ -1020,9 +1026,9 @@
 
     .comment-quick-reply-box {
         margin-top: 0.75rem;
-        border: 1px solid rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(15, 76, 117, 0.2);
         border-radius: 10px;
-        background: var(--bg-card);
+        background: color-mix(in srgb, var(--accent) 3%, var(--bg-card));
         padding: 0.6rem;
     }
 
@@ -1162,13 +1168,31 @@
     }
 
     [data-bs-theme="dark"] .narrative-description {
-        border-color: rgba(117, 194, 239, 0.24);
-        background: linear-gradient(180deg, rgba(117, 194, 239, 0.14), rgba(117, 194, 239, 0.06));
+        border-color: rgba(117, 194, 239, 0.32);
+        background: linear-gradient(180deg, rgba(117, 194, 239, 0.2), rgba(117, 194, 239, 0.08));
+        box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px rgba(5, 18, 30, 0.28);
+    }
+
+    [data-bs-theme="dark"] .case-left-section-title {
+        color: #d4e8f8;
+    }
+
+    [data-bs-theme="dark"] .case-left-section-title i {
+        color: #8fc3e8;
+    }
+
+    [data-bs-theme="dark"] .case-left-panel,
+    [data-bs-theme="dark"] #beskrivelse-history-wrap,
+    [data-bs-theme="dark"] #beskrivelse-comments-wrap {
+        border-color: rgba(117, 194, 239, 0.28);
+        background: linear-gradient(180deg, rgba(117, 194, 239, 0.08), rgba(17, 24, 33, 0.94));
     }
 
     [data-bs-theme="dark"] .comment-thread,
-    [data-bs-theme="dark"] .comment-item {
-        border-color: rgba(255, 255, 255, 0.14);
+    [data-bs-theme="dark"] .comment-item,
+    [data-bs-theme="dark"] .comment-quick-reply-box {
+        border-color: rgba(117, 194, 239, 0.24);
+        background: rgba(20, 30, 41, 0.86);
     }
 
     .card[data-module].module-empty-compact {
@@ -1802,9 +1826,9 @@
     }
 
     .case-tabs-topbar.topbar-primary {
-        grid-template-columns: repeat(8, minmax(130px, 1fr));
-        background: linear-gradient(140deg, rgba(15,76,117,0.08), rgba(15,76,117,0.01));
-        border: 1px solid rgba(15,76,117,0.22);
+        grid-template-columns: minmax(86px, 0.55fr) minmax(220px, 1.7fr) repeat(6, minmax(120px, 1fr));
+        background: #0f4c75;
+        border: 1px solid #0b3a59;
         border-radius: 0;
         box-shadow: none;
         margin-bottom: 1rem;
@@ -1813,7 +1837,7 @@
     .topbar-primary .case-tabs-topbar-item {
         background: transparent;
         border: none;
-        border-left: 1px solid rgba(15,76,117,0.2);
+        border-left: 1px solid rgba(255,255,255,0.24);
         border-radius: 0;
         padding: 0.45rem 0.7rem;
     }
@@ -1823,16 +1847,26 @@
     }
 
     .topbar-primary .case-tabs-topbar-label {
-        color: color-mix(in srgb, var(--accent) 75%, #2f3a45);
-        opacity: 0.95;
-        font-size: 0.62rem;
+        color: rgba(255,255,255,0.88);
+        opacity: 1;
+        font-size: 0.72rem;
         letter-spacing: 0.1em;
     }
 
     .topbar-primary .case-tabs-topbar-value {
-        font-size: 1.02rem;
+        font-size: 1.12rem;
         font-weight: 750;
-        color: var(--accent);
+        color: #ffffff;
+    }
+
+    .topbar-primary .field-case-id .case-tabs-topbar-value {
+        font-size: 0.96rem;
+        font-weight: 700;
+        letter-spacing: 0.01em;
+    }
+
+    .topbar-primary .field-case-id {
+        padding-right: 0.45rem;
     }
 
     .topbar-company-row {
@@ -1849,12 +1883,21 @@
         white-space: nowrap;
     }
 
+    .topbar-primary .topbar-company-name {
+        color: #ffffff !important;
+        font-size: 1.18rem;
+        font-weight: 800;
+        line-height: 1.15;
+        letter-spacing: 0.01em;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+    }
+
     .topbar-company-contact {
         margin-top: 0.22rem;
-        font-size: 0.72rem;
+        font-size: 0.8rem;
         line-height: 1.2;
-        color: color-mix(in srgb, var(--accent) 58%, #475569);
-        opacity: 0.95;
+        color: rgba(255,255,255,0.88);
+        opacity: 1;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -1886,24 +1929,43 @@
     }
 
     .topbar-primary .case-inline-select {
-        background: rgba(255,255,255,0.88);
-        border-color: rgba(15,76,117,0.3);
+        background: rgba(255,255,255,0.14);
+        border-color: rgba(255,255,255,0.36);
         box-shadow: none;
         border-radius: 4px;
         font-weight: 700;
-        color: var(--accent);
+        color: #ffffff;
     }
 
     .topbar-primary .topbar-next-meta {
         margin-top: 0.12rem;
-        font-size: 0.7rem;
-        color: color-mix(in srgb, var(--accent) 55%, #4b5563);
-        opacity: 0.95;
+        font-size: 0.78rem;
+        color: rgba(255,255,255,0.8);
+        opacity: 1;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
 
+    .topbar-primary .topbar-secondary-action {
+        border-color: rgba(255,255,255,0.36);
+        background: rgba(255,255,255,0.12);
+        color: #ffffff;
+        font-size: 0.88rem;
+    }
+
+    .topbar-primary .topbar-secondary-action:hover,
+    .topbar-primary .topbar-secondary-action:focus-visible {
+        background: rgba(255,255,255,0.22);
+        color: #ffffff;
+    }
+
+    .topbar-primary .case-tabs-topbar-label i,
+    .topbar-primary .topbar-next-meta i,
+    .topbar-primary .case-tabs-topbar-value i {
+        color: rgba(255,255,255,0.9);
+    }
+
     .back-link {
         display: inline-flex;
         align-items: center;
@@ -1945,23 +2007,34 @@
     }
 
     [data-bs-theme="dark"] .case-tabs-topbar.topbar-primary {
-        background: linear-gradient(135deg, rgba(70,120,160,0.2), rgba(70,120,160,0.06));
-        border-color: rgba(120,170,210,0.35);
+        background: #0f4c75;
+        border-color: #75a7cc;
     }
 
     [data-bs-theme="dark"] .topbar-primary .case-tabs-topbar-item {
-        border-left-color: rgba(120,170,210,0.25);
+        border-left-color: rgba(255,255,255,0.28);
     }
 
     [data-bs-theme="dark"] .topbar-primary .case-tabs-topbar-label,
     [data-bs-theme="dark"] .topbar-primary .case-tabs-topbar-value {
-        color: #b8d9f1;
+        color: #ffffff;
     }
 
     [data-bs-theme="dark"] .topbar-primary .case-inline-select {
-        background: rgba(20,35,48,0.7);
-        border-color: rgba(120,170,210,0.4);
-        color: #d9ebf7;
+        background: rgba(255,255,255,0.14);
+        border-color: rgba(255,255,255,0.4);
+        color: #ffffff;
+    }
+
+    .card[data-module] {
+        border-width: 2px !important;
+        border-color: rgba(15, 76, 117, 0.28) !important;
+        box-shadow: 0 4px 12px rgba(15, 76, 117, 0.10);
+    }
+
+    [data-bs-theme="dark"] .card[data-module] {
+        border-color: rgba(117, 167, 204, 0.45) !important;
+        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
     }
 
     [data-bs-theme="dark"] .topbar-company-edit-btn {
@@ -1973,6 +2046,11 @@
         color: #b8d9f1;
     }
 
+    [data-bs-theme="dark"] .topbar-primary .topbar-company-name {
+        color: #ffffff !important;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
+    }
+
     [data-bs-theme="dark"] .right-module-card {
         border-color: rgba(140, 182, 219, 0.25);
         box-shadow: 0 4px 16px rgba(5, 22, 40, 0.45);
@@ -1997,6 +2075,56 @@
             minmax(150px, 1.1fr)  /* Deadline (1 knap) */
             minmax(120px, 0.85fr) /* AnyDesk */
             minmax(140px, 1fr)    /* Dokumenter */;
+        align-items: stretch;
+        background: linear-gradient(180deg, rgba(15, 76, 117, 0.10), rgba(15, 76, 117, 0.04));
+        border: 1px solid rgba(15, 76, 117, 0.30);
+        border-radius: 10px;
+        padding: 0.42rem 0.5rem;
+    }
+
+    .case-tabs-topbar.topbar-secondary .case-tabs-topbar-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        height: 100%;
+        background: rgba(255, 255, 255, 0.82);
+        border: 1px solid rgba(15, 76, 117, 0.24);
+        border-left: 1px solid rgba(15, 76, 117, 0.24);
+        border-radius: 8px;
+    }
+
+    .case-tabs-topbar.topbar-secondary .case-tabs-topbar-item:first-child {
+        border-left: 1px solid rgba(15, 76, 117, 0.24);
+    }
+
+    .case-tabs-topbar.topbar-secondary .case-tabs-topbar-label {
+        color: #1c425c;
+        opacity: 1;
+    }
+
+    .case-tabs-topbar.topbar-secondary .case-tabs-topbar-value {
+        color: #0f2f45;
+        font-weight: 700;
+    }
+
+    .case-tabs-topbar.topbar-secondary .case-inline-select {
+        background: #ffffff;
+        border: 1px solid rgba(15, 76, 117, 0.34);
+        color: #0f2f45;
+        font-weight: 700;
+    }
+
+    .case-tabs-topbar.topbar-secondary .topbar-secondary-action {
+        border-color: rgba(15, 76, 117, 0.34);
+        background: #ffffff;
+        color: #0f2f45;
+    }
+
+    .case-tabs-topbar.topbar-secondary .topbar-secondary-action:hover,
+    .case-tabs-topbar.topbar-secondary .topbar-secondary-action:focus-visible {
+        background: rgba(15, 76, 117, 0.12);
+        border-color: rgba(15, 76, 117, 0.55);
+        color: #0b2535;
     }
 
     .case-tabs-topbar-item {
@@ -2226,6 +2354,31 @@
         background: rgba(20, 27, 38, 0.78);
     }
 
+    [data-bs-theme="dark"] .case-tabs-topbar.topbar-secondary {
+        background: linear-gradient(180deg, rgba(117, 194, 239, 0.18), rgba(117, 194, 239, 0.08));
+        border-color: rgba(117, 194, 239, 0.36);
+    }
+
+    [data-bs-theme="dark"] .case-tabs-topbar.topbar-secondary .case-tabs-topbar-item {
+        background: rgba(15, 24, 34, 0.9);
+        border-color: rgba(117, 194, 239, 0.32);
+    }
+
+    [data-bs-theme="dark"] .case-tabs-topbar.topbar-secondary .case-tabs-topbar-label {
+        color: #cfe6f7;
+    }
+
+    [data-bs-theme="dark"] .case-tabs-topbar.topbar-secondary .case-tabs-topbar-value {
+        color: #f2f8fe;
+    }
+
+    [data-bs-theme="dark"] .case-tabs-topbar.topbar-secondary .case-inline-select,
+    [data-bs-theme="dark"] .case-tabs-topbar.topbar-secondary .topbar-secondary-action {
+        background: rgba(19, 30, 42, 0.92);
+        border-color: rgba(117, 194, 239, 0.38);
+        color: #eef6fd;
+    }
+
 
 
     .case-add-side-backdrop {
@@ -2462,7 +2615,7 @@
 <div class="container-fluid case-detail-page-shell">
 
     <div class="case-tabs-topbar topbar-primary" role="region" aria-label="Primær sagsbar">
-        <div class="case-tabs-topbar-item">
+        <div class="case-tabs-topbar-item field-case-id">
             <div class="case-tabs-topbar-label"><i class="bi bi-hash"></i>SagsID</div>
             <div class="case-tabs-topbar-value">#{{ case.id }}</div>
         </div>
@@ -2535,12 +2688,8 @@
         </div>
     </div>
 
-    <!-- Top Bar: Back Link + Secondary Bar -->
-    <div class="d-flex justify-content-between align-items-start gap-3 mb-2">
-        <a href="/sag" class="back-link">
-            <i class="bi bi-chevron-left"></i> Tilbage til sager
-        </a>
-        
+    <!-- Top Bar: Secondary Bar -->
+    <div class="mb-2">
         <div class="case-top-aux">
             <div class="case-tabs-topbar topbar-secondary" role="region" aria-label="Sekundær sagsbar">
                 <div class="case-tabs-topbar-item field-created">
@@ -11779,13 +11928,6 @@
                     return;
                 }
 
-                // Moduler med indhold skal altid vises.
-                if (hasContent) {
-                    setVisibility(true);
-                    el.classList.remove('module-empty-compact');
-                    return;
-                }
-
                 // HVIS specifik præference deaktiverer den - Skjul den! Uanset content.
                 if (pref === false) {
                     setVisibility(false);
@@ -11800,6 +11942,13 @@
                     return;
                 }
 
+                // Moduler med indhold vises automatisk, når der ikke er et eksplicit brugervalg.
+                if (hasContent) {
+                    setVisibility(true);
+                    el.classList.remove('module-empty-compact');
+                    return;
+                }
+
                 // Default logic - ingen content: se på layout defaults
                 if (standardModuleSet.has(moduleName)) {
                     setVisibility(true);
diff --git a/app/shared/frontend/base.html b/app/shared/frontend/base.html
index ddbc536..469f945 100644
--- a/app/shared/frontend/base.html
+++ b/app/shared/frontend/base.html
@@ -109,6 +109,16 @@
             scrollbar-width: none;
         }
 
+        .global-bottom-bar .bb-zone-left .bb-back-btn {
+            position: sticky;
+            left: 0;
+            z-index: 3;
+            background: var(--bg-card);
+            border-color: rgba(var(--text-primary-rgb), 0.2);
+            margin-right: 0.2rem;
+            flex: 0 0 auto;
+        }
+
         .global-bottom-bar .bb-zone-left::-webkit-scrollbar {
             display: none;
         }
@@ -1047,6 +1057,10 @@
 <div id="globalBottomBar" class="global-bottom-bar" hidden>
     <div class="bb-header">
         <div class="bb-zone bb-zone-left" role="status" aria-live="polite">
+            <button id="bbBackBtn" class="bb-action-btn bb-back-btn" type="button" title="Tilbage">
+                <i class="bi bi-arrow-left"></i>
+                <span>Tilbage</span>
+            </button>
             <button class="bb-chip" type="button" data-bb-key="mail"><i class="bi bi-envelope"></i> <span class="bb-chip-label">Ulæste mails</span> <span class="bb-chip-bubble" aria-hidden="true">0</span> <span class="bb-chip-text visually-hidden">Ulæste mails: 0</span></button>
             <button class="bb-chip" type="button" data-bb-key="urgent"><i class="bi bi-exclamation-octagon"></i> <span class="bb-chip-label">Hastesager</span> <span class="bb-chip-bubble" aria-hidden="true">0</span> <span class="bb-chip-text visually-hidden">Hastesager: 0</span></button>
             <button class="bb-chip" type="button" data-bb-key="unassigned"><i class="bi bi-person-x"></i> <span class="bb-chip-label">Uden ansvarlig</span> <span class="bb-chip-bubble" aria-hidden="true">0</span> <span class="bb-chip-text visually-hidden">Uden ansvarlig: 0</span></button>
@@ -1189,7 +1203,7 @@ window.addEventListener('unhandledrejection', function(event) {
 <script src="/static/js/notifications.js?v=1.0"></script>
 <script src="/static/js/telefoni.js?v=2.2"></script>
 <script src="/static/js/sms.js?v=1.0"></script>
-<script src="/static/js/bottom-bar.js?v=2.22"></script>
+<script src="/static/js/bottom-bar.js?v=2.23"></script>
 <script>
     // Dark Mode Toggle Logic
     const darkModeToggle = document.getElementById('darkModeToggle');
diff --git a/design_forslag_1_sidebar.html b/design_forslag_1_sidebar.html
new file mode 100644
index 0000000..2cd2afd
--- /dev/null
+++ b/design_forslag_1_sidebar.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Design 1: Sidebar Layout</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+    <style>
+        :root { --bs-primary-rgb: 15, 76, 117; --bg-surface: #fff; --text-color: #333; --border-color: #e0e0e0; }
+        body { background-color: #f8f9fa; color: var(--text-color); font-family: system-ui, -apple-system, sans-serif; }
+        .sidebar { background: var(--bg-surface); border-right: 1px solid var(--border-color); height: 100vh; position: sticky; top: 0; overflow-y: auto; padding: 1.5rem; }
+        .main-content { padding: 2rem; }
+        .sidebar-section { margin-bottom: 2rem; }
+        .sidebar-section h6 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: #6c757d; margin-bottom: 1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; }
+        .form-select-sm { font-size: 0.85rem; border-color: var(--border-color); background-color: #fafafa; }
+        .hero-title { font-size: 2rem; font-weight: 700; color: #0f4c75; letter-spacing: -0.5px; }
+    </style>
+</head>
+<body>
+    <div class="container-fluid p-0">
+        <div class="row g-0">
+            <!-- VENSTRE SIDEBAR (Erstatning for topbars) -->
+            <div class="col-12 col-xl-3 col-xxl-2 sidebar shadow-sm">
+                <!-- Kunde & Kontakt -->
+                <div class="sidebar-section">
+                    <h6><i class="bi bi-building me-2"></i>Kundeinfo</h6>
+                    <div class="fw-bold mb-1">BMC Networks</div>
+                    <div class="small text-muted mb-2"><i class="bi bi-person me-1"></i>Christian Thomas</div>
+                    <button class="btn btn-sm btn-outline-primary w-100 rounded-pill"><i class="bi bi-pencil me-1"></i>Skift kunde</button>
+                </div>
+                
+                <!-- Klassifikation -->
+                <div class="sidebar-section">
+                    <h6><i class="bi bi-tags me-2"></i>Klassifikation</h6>
+                    <div class="mb-2">
+                        <label class="form-label small mb-1 text-muted">Status</label>
+                        <select class="form-select form-select-sm border-start border-warning border-3"><option>Åben</option><option>I gang</option><option>Løst</option></select>
+                    </div>
+                    <div class="mb-2">
+                        <label class="form-label small mb-1 text-muted">Type</label>
+                        <select class="form-select form-select-sm border-start border-success border-3"><option>Ticket</option><option>Opgave</option><option>Projekt</option></select>
+                    </div>
+                    <div class="mb-2">
+                        <label class="form-label small mb-1 text-muted">Prioritet</label>
+                        <select class="form-select form-select-sm border-start border-danger border-3"><option>Normal</option><option>Høj</option><option>Akut</option></select>
+                    </div>
+                </div>
+
+                <!-- Tildeling -->
+                <div class="sidebar-section">
+                    <h6><i class="bi bi-people me-2"></i>Tildeling</h6>
+                    <div class="mb-2">
+                        <label class="form-label small mb-1 text-muted">Ansvarlig</label>
+                        <select class="form-select form-select-sm"><option>Christian</option><option>Frederik</option></select>
+                    </div>
+                    <div class="mb-2">
+                        <label class="form-label small mb-1 text-muted">Gruppe</label>
+                        <select class="form-select form-select-sm"><option>Support</option><option>Development</option></select>
+                    </div>
+                </div>
+
+                <!-- Tidslinje -->
+                <div class="sidebar-section">
+                    <h6><i class="bi bi-calendar3 me-2"></i>Planlægning</h6>
+                    <div class="small text-muted mb-2"><i class="bi bi-plus-circle me-1"></i>Oprettet: 12/04/2026</div>
+                    <div class="mb-2">
+                        <label class="form-label small mb-0 text-muted">Arbejdsstart</label>
+                        <div class="input-group input-group-sm">
+                            <input type="date" class="form-control form-control-sm" value="2026-04-12">
+                            <button class="btn btn-outline-secondary" data-bs-toggle="dropdown"><i class="bi bi-three-dots-vertical"></i></button>
+                            <ul class="dropdown-menu"><li><a class="dropdown-item">I dag</a></li><li><a class="dropdown-item">I morgen</a></li></ul>
+                        </div>
+                    </div>
+                    <div class="mb-2">
+                        <label class="form-label small mb-0 text-muted">Start senest (Trigger)</label>
+                        <div class="input-group input-group-sm">
+                            <input type="date" class="form-control form-control-sm">
+                            <button class="btn btn-outline-secondary" data-bs-toggle="dropdown"><i class="bi bi-three-dots-vertical"></i></button>
+                            <ul class="dropdown-menu"><li><a class="dropdown-item">Trigger: Sag Lukket</a></li></ul>
+                        </div>
+                    </div>
+                    <div class="mb-2">
+                        <label class="form-label small mb-0 text-muted">Deadline</label>
+                        <div class="input-group input-group-sm">
+                            <input type="date" class="form-control form-control-sm text-danger" value="2026-04-20">
+                            <button class="btn btn-outline-danger" title="Ryd deadline"><i class="bi bi-x"></i></button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Handlinger -->
+                 <div class="sidebar-section">
+                    <h6><i class="bi bi-lightning-charge me-2"></i>Handlinger</h6>
+                    <div class="d-grid gap-2">
+                        <button class="btn btn-sm btn-primary rounded-pill"><i class="bi bi-display me-2"></i>AnyDesk Quick Connect</button>
+                        <button class="btn btn-sm btn-outline-secondary rounded-pill bg-white"><i class="bi bi-printer me-2"></i>Print arbejdsseddel</button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- HOVEDINDHOLD (Beskrivelse, Titel, Tabs) -->
+            <div class="col-12 col-xl-9 col-xxl-10 main-content">
+                <div class="d-flex justify-content-between align-items-start mb-4">
+                    <div>
+                        <span class="badge bg-primary rounded-pill mb-2 px-3 py-2">#9925</span>
+                        <h1 class="hero-title">Netværksnedbrud i afdeling 3 - Ingen forbindelse</h1>
+                        <p class="text-muted"><i class="bi bi-list-check me-1"></i>Næste todo: Gennemtjekke switches kl 14:00 (Christian)</p>
+                    </div>
+                </div>
+
+                <!-- Tabs -->
+                <ul class="nav nav-tabs nav-tabs-bordered mb-4">
+                    <li class="nav-item"><a class="nav-link active fw-bold border-bottom border-3 border-primary" href="#"><i class="bi bi-card-text me-2"></i>Sagsdetaljer</a></li>
+                    <li class="nav-item"><a class="nav-link text-muted" href="#"><i class="bi bi-lightbulb me-2"></i>Løsning</a></li>
+                    <li class="nav-item"><a class="nav-link text-muted" href="#"><i class="bi bi-envelope me-2"></i>E-mail <span class="badge bg-danger rounded-pill">2</span></a></li>
+                </ul>
+
+                <!-- Indhold Grid (Det du kaldte "venstre side" før er nu meget mere clean center-piece) -->
+                <div class="row g-4">
+                    <div class="col-xl-8">
+                        <div class="card border-0 shadow-sm rounded-4">
+                            <div class="card-body p-4 p-xl-5">
+                                <h5>Opgavebeskrivelse</h5>
+                                <p class="fs-5" style="line-height: 1.6; color: #334;">Sagen er oprettet da hele afdeling 3 oplever at deres kablede forbindelse forsvandt for få minutter siden.</p>
+                                <hr class="my-4">
+                                <div style="height: 300px; background: #f8fafc; border-radius: 8px; border: 1px dashed #cbd5e1; display:flex; align-items:center; justify-content:center; color:#999;">
+                                    Her er Tråd & Beskeder lagt frit op, masser af ro uden støj fra meta-data i toppen.
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xl-4">
+                         <div class="card border-0 shadow-sm rounded-4">
+                            <div class="card-body">
+                                <h5>Næste Todos</h5>
+                                <ul class="list-group list-group-flush mb-3 mt-3">
+                                    <li class="list-group-item px-0 border-0"><input type="checkbox" class="form-check-input me-2"> Tjek firewall config</li>
+                                </ul>
+                                <button class="btn btn-outline-primary btn-sm w-100 rounded-pill"><i class="bi bi-plus-lg me-1"></i>Opret todo</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/design_forslag_2_kompakt.html b/design_forslag_2_kompakt.html
new file mode 100644
index 0000000..0120f39
--- /dev/null
+++ b/design_forslag_2_kompakt.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Design 2: Kompakt Action Ribbon</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+    <style>
+        :root { --bs-primary-rgb: 15, 76, 117; }
+        body { background-color: #f8f9fa; font-family: system-ui; }
+        /* Mega compact header */
+        .case-ribbon { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 0.5rem 1.5rem; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
+        .ribbon-item { display: inline-flex; align-items: center; gap: 0.5rem; margin-right: 1.5rem; padding: 0.25rem 0.5rem; border-radius: 6px; cursor: pointer; transition: 0.2s; border: 1px solid transparent; }
+        .ribbon-item:hover { background: #f1f5f9; border: 1px solid #cbd5e1; }
+        .ribbon-label { font-size: 0.7rem; text-transform: uppercase; color: #64748b; font-weight: 600; line-height: 1; }
+        .ribbon-val { font-size: 0.85rem; font-weight: 600; color: #0f172a; line-height: 1; }
+        .id-badge { background: #0f4c75; color: #fff; padding: 0.25rem 0.5rem; border-radius: 4px; font-weight: 700; font-size: 0.85rem; }
+        
+        .main-container { max-width: 1400px; margin: 2rem auto; padding: 0 1rem; }
+        .title-area { margin-bottom: 2rem; }
+        .title-text { font-size: 2.25rem; font-weight: 800; color: #0f4c75; letter-spacing: -0.03em; }
+    </style>
+</head>
+<body>
+    <!-- ENKELT KOMPAKT TOPBÅND DER INDEHOLDER MODALS & POP-OVERS i steden for indhold på skærmen -->
+    <div class="case-ribbon d-flex justify-content-between align-items-center flex-wrap gap-2">
+        <div class="d-flex align-items-center">
+            <div class="id-badge me-3">#9925</div>
+            
+            <div class="ribbon-item" data-bs-toggle="dropdown" title="Skift Kunde">
+                <div>
+                    <div class="ribbon-label">Kunde</div>
+                    <div class="ribbon-val text-primary"><i class="bi bi-building me-1"></i>BMC Networks <i class="bi bi-chevron-down ms-1 small"></i></div>
+                </div>
+            </div>
+            
+            <div class="ribbon-item" data-bs-toggle="dropdown" title="Opdater Status, Type eller Prioritet">
+                <div>
+                    <div class="ribbon-label">Klassifikation</div>
+                    <div class="ribbon-val"><span class="text-warning">●</span> Åben · Ticket · Normal <i class="bi bi-chevron-down ms-1 small"></i></div>
+                </div>
+            </div>
+
+            <div class="ribbon-item" data-bs-toggle="dropdown" title="Tildel ansvarlig og gruppe">
+                <div>
+                    <div class="ribbon-label">Tildeling</div>
+                    <div class="ribbon-val"><i class="bi bi-person-check me-1 text-muted"></i>Christian (Support) <i class="bi bi-chevron-down ms-1 small"></i></div>
+                </div>
+            </div>
+
+            <div class="ribbon-item" data-bs-toggle="dropdown" title="Redigér start, start-senest-trigger og deadline">
+                <div>
+                    <div class="ribbon-label">Tidslinje</div>
+                    <div class="ribbon-val"><i class="bi bi-calendar-event me-1 text-muted"></i>Start: 12/04 · <span class="text-danger">Frist: 20/04</span> <i class="bi bi-chevron-down ms-1 small"></i></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="d-flex align-items-center gap-2">
+            <button class="btn btn-sm btn-primary rounded-pill fw-medium"><i class="bi bi-display me-2"></i>AnyDesk</button>
+            <button class="btn btn-sm btn-light bg-white border rounded-pill"><i class="bi bi-printer me-2"></i>Print</button>
+            <button class="btn btn-sm btn-light bg-white border rounded-pill"><i class="bi bi-check2-circle text-success me-1"></i>Næste: Tjek switches</button>
+        </div>
+    </div> <!-- /Slut på topbar -->
+
+    <!-- HOVEDINDHOLD (MEGET RENERE NU i "Venstre side") -->
+    <div class="main-container">
+        <div class="title-area">
+            <h1 class="title-text">Netværksnedbrud i afdeling 3 - Ingen forbindelse</h1>
+            <p class="text-muted mb-0"><i class="bi bi-person me-1"></i>Kontakt: <b>Lars Larsen</b> v. BMC Networks · <i class="bi bi-plus-circle me-1 ms-2"></i>Oprettet: 12/04/2026</p>
+        </div>
+
+        <ul class="nav nav-tabs mb-4">
+            <li class="nav-item"><a class="nav-link active fw-bold border-bottom border-3 border-primary" href="#"><i class="bi bi-card-text me-2"></i>Sagsdetaljer</a></li>
+            <li class="nav-item"><a class="nav-link text-muted" href="#">Løsning</a></li>
+            <li class="nav-item"><a class="nav-link text-muted" href="#">E-mail</a></li>
+            <li class="nav-item"><a class="nav-link text-muted" href="#">Tidsforbrug</a></li>
+        </ul>
+
+        <!-- DET OMDESIGNEDE VENSTRE SIDE & HØJRE SIDE FORLØB -->
+        <div class="row g-4">
+            <div class="col-xl-8">
+                <!-- Nu får indholdet masser af plads og minimal støj ("Venstre side" som brugeren kaldte det) -->
+                <div class="card shadow-sm border-0 rounded-4">
+                    <div class="card-body p-4 p-lg-5">
+                        <h5 class="fw-bold mb-4">Beskrivelse</h5>
+                        <p class="fs-5" style="line-height: 1.6; color: #334155;">Vi oplever at hele afdeling 3 mistede forbindelsen for 10 minutter siden. Tror det er switchen i kælderen der er gået død efter vi stikuheldet tidligere.</p>
+                        
+                        <hr class="my-5 opacity-25">
+                        <h6 class="text-uppercase text-muted fw-bold mb-3 small">Tråd & Kommunikation</h6>
+                        <div class="bg-light rounded-4 p-4 text-center text-muted" style="height:300px;border: 1px dashed #cbd5e1;">Brugerens fokus er fuldstændig centreret på sagsbehandlingen her.</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-xl-4 d-none d-xl-block">
+                <!-- Ekstra info på højre side vi nu har plads til at have åben permanent for at undgå rod på den venstre side -->
+                <div class="card shadow-sm border-0 rounded-4 mb-4 bg-primary text-white" style="--bs-bg-opacity: .05; color: #0f4c75 !important;">
+                    <div class="card-body">
+                         <h6 class="fw-bold"><i class="bi bi-clock-history me-2"></i>Sagsprogression</h6>
+                         <p class="small mb-0">Arbejdet startede for 2 timer siden. 80% oppetidsgaranti overholdt.</p>
+                    </div>
+                </div>
+                <!-- Eksempel højre kolonne -->
+                <div class="card shadow-sm border-0 rounded-4">
+                    <div class="card-body p-4 text-center text-muted" style="height: 200px;">
+                        Sidestillet indhold (vedhæftninger osv.)
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/design_forslag_3_kort.html b/design_forslag_3_kort.html
new file mode 100644
index 0000000..539ab1b
--- /dev/null
+++ b/design_forslag_3_kort.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Design 3: Widget Cards Dashboard</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+    <style>
+        :root { --bs-primary-rgb: 15, 76, 117; }
+        body { background-color: #f1f5f9; font-family: system-ui; }
+        .header-bg { background: linear-gradient(to right, #0f4c75, #1e3c72); color: white; padding: 2rem 0 3rem 0; margin-bottom: -2rem; }
+        .stat-card { background: white; border-radius: 12px; padding: 1.25rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); height: 100%; border: 1px solid #e2e8f0; }
+        .stat-label { font-size: 0.75rem; text-transform: uppercase; color: #64748b; font-weight: 700; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
+        .widget-field { margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; }
+        .widget-field label { margin: 0; font-size: 0.8rem; color: #475569; }
+        .widget-select { width: 60%; padding: 0.15rem 0.5rem; font-size: 0.8rem; border-radius: 4px; border: 1px solid #cbd5e1; background: #f8fafc; }
+        .hero-title { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.5px; }
+    </style>
+</head>
+<body>
+
+    <!-- CLEAN TOP UDEN INPUTS - BARE TITEL & ACTIONS (HELT NY HOVED STRUKTUR) -->
+    <div class="header-bg">
+        <div class="container-fluid px-4 px-xl-5">
+            <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
+                <div class="d-flex align-items-center gap-3">
+                    <span class="badge bg-white text-primary fs-6 rounded-pill px-3 shadow-sm">#9925</span>
+                    <span class="badge bg-success fs-6 rounded-pill px-3 shadow-sm"><i class="bi bi-circle-fill me-1 small"></i>Åben</span>
+                </div>
+                <div class="d-flex gap-2">
+                     <button class="btn btn-light rounded-pill fw-bold text-primary shadow-sm"><i class="bi bi-display me-2"></i>AnyDesk Quick Connect</button>
+                     <button class="btn btn-outline-light rounded-pill"><i class="bi bi-printer me-2"></i>Print</button>
+                </div>
+            </div>
+            
+            <h1 class="hero-title mb-1">Netværksnedbrud i afdeling 3 - Ingen forbindelse</h1>
+            <p class="text-white-50"><i class="bi bi-building me-1"></i>BMC Networks · <i class="bi bi-person me-1"></i>Christian Thomas · <i class="bi bi-plus-circle me-1 ms-2"></i>Oprettet: 12/04/2026</p>
+        </div>
+    </div>
+
+    <!-- WIDGET DASHBOARD SOM ERSTATTER DE 2 TOPBARER -->
+    <div class="container-fluid px-4 px-xl-5">
+        <div class="row g-3 mb-4 position-relative" style="z-index: 10;">
+            
+            <!-- Widget 1: Klassifikation -->
+            <div class="col-md-6 col-xl-3">
+                <div class="stat-card">
+                    <div class="stat-label"><i class="bi bi-tags-fill text-primary"></i> Klassifikation</div>
+                    <div class="widget-field"><label>Status</label>
+                        <select class="widget-select border-warning border-start border-3"><option>Åben</option><option>I gang</option></select>
+                    </div>
+                    <div class="widget-field"><label>Type</label>
+                        <select class="widget-select border-success border-start border-3"><option>Ticket</option><option>Opgave</option></select>
+                    </div>
+                    <div class="widget-field"><label>Prioritet</label>
+                        <select class="widget-select border-danger border-start border-3"><option>Normal</option><option>Høj</option></select>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Widget 2: Tildeling -->
+            <div class="col-md-6 col-xl-3">
+                <div class="stat-card">
+                    <div class="stat-label"><i class="bi bi-people-fill text-success"></i> Tildeling</div>
+                    <div class="widget-field"><label>Ansvarlig</label>
+                        <select class="widget-select"><option>Christian</option><option>Ingen</option></select>
+                    </div>
+                    <div class="widget-field"><label>Gruppe</label>
+                        <select class="widget-select"><option>Support</option><option>Salg</option></select>
+                    </div>
+                    <div class="widget-field mt-3">
+                        <label class="w-100"><i class="bi bi-check2-square text-primary me-1"></i>Næste todo:</label>
+                    </div>
+                    <div class="text-primary fw-bold small text-truncate">Gennemgå switches (14:00)</div>
+                </div>
+            </div>
+            
+            <!-- Widget 3: Tidslinje -->
+            <div class="col-md-6 col-xl-3">
+                <div class="stat-card">
+                    <div class="stat-label"><i class="bi bi-calendar-event-fill text-info"></i> Tidslinje</div>
+                    <div class="widget-field"><label>Arbejdsstart</label>
+                        <div class="input-group input-group-sm" style="width: 60%;"><input type="date" class="form-control" value="2026-04-12"><button class="btn btn-light bg-white border"><i class="bi bi-three-dots-vertical"></i></button></div>
+                    </div>
+                    <div class="widget-field"><label title="Start senest (Trigger)">Start senest</label>
+                         <div class="input-group input-group-sm" style="width: 60%;"><input type="date" class="form-control"><button class="btn btn-light bg-white border"><i class="bi bi-three-dots-vertical"></i></button></div>
+                    </div>
+                    <div class="widget-field"><label>Deadline</label>
+                         <div class="input-group input-group-sm" style="width: 60%;"><input type="date" class="form-control text-danger"><button class="btn btn-outline-danger bg-white"><i class="bi bi-x"></i></button></div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Widget 4: Links -->
+            <div class="col-md-6 col-xl-3">
+                <div class="stat-card bg-light">
+                    <div class="stat-label"><i class="bi bi-chat-left-dots-fill text-secondary"></i> Hurtige links</div>
+                    <div class="d-flex flex-column gap-2 mt-3">
+                        <button class="btn btn-sm btn-white bg-white border w-100 text-start shadow-sm"><i class="bi bi-building-gear me-2 text-primary"></i>Skift kunde/firma</button>
+                        <button class="btn btn-sm btn-white bg-white border w-100 text-start shadow-sm"><i class="bi bi-diagram-3 me-2 text-primary"></i>Ændre afdeling</button>
+                        <button class="btn btn-sm btn-white bg-white border w-100 text-start shadow-sm"><i class="bi bi-plus-square me-2 text-success"></i>Opret underopgave</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <ul class="nav nav-tabs mb-4 px-2">
+            <li class="nav-item"><a class="nav-link active fw-bold px-4 border-bottom border-3 border-primary" href="#"><i class="bi bi-card-text me-2"></i>Sagsdetaljer</a></li>
+            <li class="nav-item"><a class="nav-link text-muted px-4" href="#">Løsning</a></li>
+            <li class="nav-item"><a class="nav-link text-muted px-4" href="#">E-mail</a></li>
+            <li class="nav-item"><a class="nav-link text-muted px-4" href="#">Tidsforbrug</a></li>
+        </ul>
+
+        <!-- DET OMDESIGNEDE VENSTRE SIDE INDHOLD: Nu er det ikke bombarderet med header støj -->
+        <div class="row g-4 mb-5">
+             <div class="col-xl-8">
+                  <div class="card border-0 shadow-sm rounded-4">
+                       <div class="card-body p-4 p-xl-5">
+                            <h4 class="fw-bold mb-4">Beskrivelse</h4>
+                            <p class="fs-5" style="color: #334155; line-height:1.6;">Netværket gik ned efter strømafbrydelse. Vi har brug for at tekniker gennemgår kablet setup i rack-skab D.</p>
+                            <hr class="my-5">
+                            <!-- Her ville chat thread ligge normalt som du bad om (venstre side) -->
+                            <div class="p-4 rounded text-center text-muted" style="background:#f1f5f9;border:1px dashed #cbd5e1;height:250px;">
+                                Den overordnede "Venstre side" føles meget mere åndbar nu.
+                            </div>
+                       </div>
+                  </div>
+             </div>
+             <div class="col-xl-4">
+                  <div class="card border-0 shadow-sm rounded-4 h-100">
+                      <div class="card-body p-4 text-center text-muted" style="background:#f8fafc;">
+                          Sidestillet overblik over timer, tildelinger og vedhæftninger.
+                      </div>
+                  </div>
+             </div>
+        </div>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/design_forslag_kompakt.html b/design_forslag_kompakt.html
deleted file mode 100644
index f781862..0000000
--- a/design_forslag_kompakt.html
+++ /dev/null
@@ -1,195 +0,0 @@
-<!DOCTYPE html>
-<html lang="da">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Kompakte Designforslag - Sagsdetaljer</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <style>
-        body {
-            background-color: #f8f9fa;
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-            padding-bottom: 50px;
-            font-size: 0.9rem; /* Generelt lidt mindre tekststørrelse for helheden */
-        }
-        .container { max-width: 900px; }
-        .section-title {
-            color: #0f4c75;
-            border-bottom: 2px solid #0f4c75;
-            padding-bottom: 4px;
-            margin-top: 40px;
-            margin-bottom: 15px;
-            font-size: 1.1rem;
-            font-weight: 600;
-        }
-
-        /* Værktøjs-klasser for at fjerne default p-margins */
-        p:last-child { margin-bottom: 0; }
-        
-        /* ---------------------------------------------------
-           Forslag 1: Inline Chat / Slack Kompakt 
-           Alt på (næsten) én linje, nul spildplads.
-        --------------------------------------------------- */
-        .f1-container { background: white; border: 1px solid #ddd; border-radius: 4px; padding: 10px; }
-        .f1-row { padding: 4px 8px; border-radius: 4px; line-height: 1.4; border-bottom: 1px dashed #f0f0f0; }
-        .f1-row:last-child { border-bottom: none; }
-        .f1-row:hover { background-color: #f8f9fa; }
-        .f1-meta { color: #888; font-size: 0.8rem; margin-right: 8px; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
-        .f1-author { font-weight: 600; margin-right: 8px; }
-        .f1-author.tech { color: #0f4c75; }
-        .f1-author.cust { color: #b33939; }
-        .f1-content { color: #222; }
-
-        /* ---------------------------------------------------
-           Forslag 2: Helpdesk Split (Venstre/Højre)
-           Tydelig opdeling mellem forfatter og tekst, men kompakt font.
-        --------------------------------------------------- */
-        .f2-container { border: 1px solid #dee2e6; border-radius: 4px; background: white; }
-        .f2-row { display: flex; border-bottom: 1px solid #e9ecef; }
-        .f2-row:last-child { border-bottom: none; }
-        .f2-left { width: 140px; background: #f8f9fa; padding: 8px 10px; flex-shrink: 0; border-right: 1px solid #e9ecef; }
-        .f2-right { padding: 8px 12px; flex-grow: 1; color: #333; }
-        .f2-name { font-weight: 600; font-size: 0.85rem; margin-bottom: 2px; }
-        .f2-time { font-size: 0.75rem; color: #6c757d; }
-        .f2-badge-tech { color: #0f4c75; font-size: 0.75rem; font-weight: bold; }
-        .f2-badge-cust { color: #6c757d; font-size: 0.75rem; font-weight: bold; }
-
-        /* ---------------------------------------------------
-           Forslag 3: Minimalistisk Logbog
-           Information-dense liste. Små headere, tekst umiddelbart under.
-        --------------------------------------------------- */
-        .f3-container { background: white; border: 1px solid #ccc; border-radius: 4px; }
-        .f3-item { border-bottom: 1px solid #eee; }
-        .f3-item:last-child { border-bottom: none; }
-        .f3-header { display: flex; justify-content: space-between; align-items: center; background: #fdfdfd; padding: 3px 8px; border-left: 3px solid #ccc; font-size: 0.85rem; font-weight: 600; color: #444; }
-        .f3-header.tech { border-left-color: #0f4c75; background: #f0f4f8; }
-        .f3-body { padding: 6px 8px 8px 11px; color: #222; }
-        .f3-small { font-weight: normal; color: #777; font-size: 0.75rem; }
-
-    </style>
-</head>
-<body>
-
-<div class="container mt-4">
-    <h2 class="mb-4 text-center">Fokuseret på Minimal Plads (Kompakt)</h2>
-    <p class="text-muted text-center mb-5">Her er 3 designs uden store ikoner, uden navnebobler og med minimal whitespace, præcis som i en professionel log eller et tæt ticket-system.</p>
-
-    <!-- ==============================================
-         FORSLAG 1: INLINE CHAT (SLACK KOMPAKT STYLE)
-         ============================================== -->
-    <h3 class="section-title">Forslag 1: Inline Log (Slack Kompakt style)</h3>
-    <p class="text-muted small mb-2">Minder om terminal-output eller kompakt chat. Alt udover teksten står på én linje, og marginer er næsten fjernet.</p>
-    
-    <div class="f1-container">
-        <div class="f1-row">
-            <span class="f1-meta">I dag 10:00</span>
-            <span class="f1-author cust">Jens Jensen:</span>
-            <span class="f1-content">Vi har et problem med at vores to printere på kontoret ikke vil forbinde til netværket siden fredag. Skærmene lyser, men de melder offline på printserveren.</span>
-        </div>
-        <div class="f1-row">
-            <span class="f1-meta">I dag 10:15</span>
-            <span class="f1-author tech">Christian Thomas:</span>
-            <span class="f1-content">Hej Jens. Jeg kan se at switchen port 4 & 5 var nede hurtigt i nat. Har I prøvet at genstarte dem, så de fanger ny DHCP IP?</span>
-        </div>
-        <div class="f1-row">
-            <span class="f1-meta">I dag 10:35</span>
-            <span class="f1-author cust">Jens Jensen:</span>
-            <span class="f1-content">Ja, det har vi nu og det løste det mærkeligt nok for den ene, men HP printeren driller stadig.</span>
-        </div>
-        <div class="f1-row">
-            <span class="f1-meta">I dag 10:45</span>
-            <span class="f1-author tech">Christian Thomas:</span>
-            <span class="f1-content">Jeg logger lige på jeres firewall udefra om 5 minutter og tjekker om HP'en er blokeret i MAC-filteret.</span>
-        </div>
-    </div>
-
-
-    <!-- ==============================================
-         FORSLAG 2: HELPDESK SPLIT (2-KOLONNER)
-         ============================================== -->
-    <h3 class="section-title">Forslag 2: Helpdesk Split (ITSM style)</h3>
-    <p class="text-muted small mb-2">Klassisk 2-kolonne layout. Venstre side har fast bredde til metadata, højre side udnytter hele bredden til ren tekst. Ingen tidsspilde vertikalt.</p>
-
-    <div class="f2-container">
-        <!-- Oprindelig sag -->
-        <div class="f2-row">
-            <div class="f2-left">
-                <div class="f2-name">Jens Jensen</div>
-                <div class="f2-badge-cust">KUNDE</div>
-                <div class="f2-time mt-1">I dag, kl. 10:00</div>
-            </div>
-            <div class="f2-right">
-                Vi har et problem med at vores to printere på kontoret ikke vil forbinde til netværket siden fredag. Skærmene lyser, men de melder offline på printserveren.
-            </div>
-        </div>
-        
-        <!-- Svar -->
-        <div class="f2-row">
-            <div class="f2-left">
-                <div class="f2-name text-primary">Christian Thomas</div>
-                <div class="f2-badge-tech">BMC NETWORKS</div>
-                <div class="f2-time mt-1">I dag, kl. 10:15</div>
-            </div>
-            <div class="f2-right">
-                Hej Jens.<br>Jeg kan se at switchen port 4 & 5 var nede hurtigt i nat. Har I prøvet at genstarte dem, så de fanger ny DHCP IP?
-            </div>
-        </div>
-
-        <!-- Svar -->
-        <div class="f2-row">
-            <div class="f2-left">
-                <div class="f2-name">Jens Jensen</div>
-                <div class="f2-badge-cust">KUNDE</div>
-                <div class="f2-time mt-1">I dag, kl. 10:35</div>
-            </div>
-            <div class="f2-right">
-                Ja, det har vi nu og det løste det mærkeligt nok for den ene, men HP printeren driller stadig.
-            </div>
-        </div>
-    </div>
-
-
-    <!-- ==============================================
-         FORSLAG 3: MINIMALISTISK LOGBOG
-         ============================================== -->
-    <h3 class="section-title">Forslag 3: Minimalistisk Logbog</h3>
-    <p class="text-muted small mb-2">Hver tråd adskilles af en meget tynd grå overskrift. Ingen kasser rundt om teksten, den flyder frit for maksimal informationsdensitet.</p>
-
-    <div class="f3-container">
-        
-        <div class="f3-item">
-            <div class="f3-header">
-                <span>Jens Jensen <span class="fw-normal text-muted">(Kunde)</span></span>
-                <span class="f3-small">I dag, kl. 10:00</span>
-            </div>
-            <div class="f3-body">
-                Vi har et problem med at vores to printere på kontoret ikke vil forbinde til netværket siden fredag. Skærmene lyser, men de melder offline på printserveren.
-            </div>
-        </div>
-
-        <div class="f3-item">
-            <div class="f3-header tech">
-                <span>Christian Thomas <span class="fw-normal text-muted" style="color: #0f4c75 !important;">(Tekniker)</span></span>
-                <span class="f3-small">I dag, kl. 10:15</span>
-            </div>
-            <div class="f3-body">
-                Hej Jens.<br>Jeg kan se at switchen port 4 & 5 var nede hurtigt i nat. Har I prøvet at genstarte dem, så de fanger ny DHCP IP?
-            </div>
-        </div>
-
-        <div class="f3-item">
-            <div class="f3-header">
-                <span>Jens Jensen <span class="fw-normal text-muted">(Kunde)</span></span>
-                <span class="f3-small">I dag, kl. 10:35</span>
-            </div>
-            <div class="f3-body">
-                Ja, det har vi nu og det løste det mærkeligt nok for den ene, men HP printeren driller stadig.
-            </div>
-        </div>
-        
-    </div>
-
-</div>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/design_forslag_sagsdetaljer.html b/design_forslag_sagsdetaljer.html
deleted file mode 100644
index 8938102..0000000
--- a/design_forslag_sagsdetaljer.html
+++ /dev/null
@@ -1,338 +0,0 @@
-<!DOCTYPE html>
-<html lang="da">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Designforslag - Sagsdetaljer & Kommentarer</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
-    <style>
-        body { 
-            background: #f0f2f5; 
-            padding: 3rem 1rem; 
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
-        }
-        .container {
-            max-width: 900px;
-        }
-        .proposal-wrapper {
-            background: white;
-            border-radius: 16px;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
-            padding: 2rem;
-            margin-bottom: 4rem;
-        }
-        .proposal-title {
-            border-bottom: 2px solid #f0f2f5;
-            padding-bottom: 1rem;
-            margin-bottom: 2rem;
-            color: #0f4c75;
-        }
-
-        /* Fælles: Opgavebeskrivelse kort */
-        .desc-card {
-            background: #fff;
-            border: 1px solid #e1e4e8;
-            border-radius: 8px;
-            padding: 1.5rem;
-            margin-bottom: 2rem;
-        }
-        .desc-label {
-            font-size: 0.75rem;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            color: #6c757d;
-            font-weight: 700;
-            margin-bottom: 1rem;
-            display: flex;
-            justify-content: space-between;
-        }
-
-        /* ---------------------------------------------------
-           FORSLAG 1: CHAT / MESSENGER STYLE
-           --------------------------------------------------- */
-        .chat-container {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-        }
-        .chat-msg {
-            max-width: 85%;
-            padding: 1rem;
-            border-radius: 12px;
-            position: relative;
-        }
-        .chat-internal {
-            align-self: flex-end;
-            background-color: #e3f2fd;
-            border-bottom-right-radius: 2px;
-            color: #084298;
-        }
-        .chat-customer {
-            align-self: flex-start;
-            background-color: #f1f3f5;
-            border-bottom-left-radius: 2px;
-            color: #212529;
-            border: 1px solid #e9ecef;
-        }
-        .chat-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            font-size: 0.8rem;
-            margin-bottom: 0.5rem;
-            font-weight: 600;
-            opacity: 0.8;
-        }
-
-        /* ---------------------------------------------------
-           FORSLAG 2: TIMELINE / ACTIVITY FEED
-           --------------------------------------------------- */
-        .timeline {
-            position: relative;
-            padding-left: 3rem;
-            margin-top: 1rem;
-        }
-        .timeline::before {
-            content: '';
-            position: absolute;
-            left: 17px;
-            top: 0;
-            bottom: 0;
-            width: 2px;
-            background: #e9ecef;
-        }
-        .timeline-item {
-            position: relative;
-            margin-bottom: 2rem;
-        }
-        .timeline-icon {
-            position: absolute;
-            left: -3rem;
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            background: white;
-            border: 2px solid #e9ecef;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 1;
-            font-size: 1.1rem;
-        }
-        .icon-internal { border-color: #ffc107; color: #ffc107; }
-        .icon-customer { border-color: #198754; color: #198754; }
-        .icon-system { border-color: #6c757d; color: #6c757d; }
-        
-        .timeline-content {
-            background: white;
-            border: 1px solid #e9ecef;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
-            padding: 1.25rem;
-        }
-        .timeline-meta {
-            font-size: 0.85rem;
-            color: #6c757d;
-            margin-bottom: 0.75rem;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        /* ---------------------------------------------------
-           FORSLAG 3: CLEAN CARDS MED FARVEKODER (Trello/Jira style)
-           --------------------------------------------------- */
-        .comment-card {
-            background: white;
-            border: 1px solid #e9ecef;
-            border-radius: 8px;
-            margin-bottom: 1.5rem;
-            overflow: hidden;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.02);
-        }
-        .comment-card.type-internal {
-            border-left: 4px solid #ffc107; /* Gul venstre kant for intern */
-        }
-        .comment-card.type-customer {
-            border-left: 4px solid #0dcaf0; /* Blå/grøn venstre kant for kunde */
-        }
-        .card-header-clean {
-            background: #f8f9fa;
-            border-bottom: 1px solid #e9ecef;
-            padding: 0.75rem 1.25rem;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-        .card-header-clean .author {
-            font-weight: 600;
-            font-size: 0.9rem;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .badge-type {
-            font-size: 0.7rem;
-            padding: 0.2rem 0.5rem;
-            border-radius: 12px;
-        }
-    </style>
-</head>
-<body>
-
-<div class="container">
-    <div class="mb-5 text-center">
-        <h1 class="fw-bold" style="color: #0f4c75;">UI Forslag: Sagsdetaljer & Kommentarer</h1>
-        <p class="text-muted">3 forskellige måder at redesigne "Opgavebeskrivelse" og "Kommentarer" på, uden at røre live-koden endnu.</p>
-    </div>
-
-    <!-- FORSLAG 1 -->
-    <div class="proposal-wrapper">
-        <h3 class="proposal-title"><i class="bi bi-chat-dots me-2"></i>Forslag 1: Chat / Messenger UI</h3>
-        <p class="text-muted mb-4">Gør det nemt at adskille hvem der siger hvad. Interne noter (højre, blå), kundens svar (venstre, grå). Beskrivelsen er "låst" i toppen som opgavens udgangspunkt.</p>
-        
-        <div class="desc-card">
-            <div class="desc-label">
-                <span><i class="bi bi-card-text me-2"></i>Opgavebeskrivelse</span>
-                <a href="#" class="text-decoration-none text-muted"><i class="bi bi-pencil-square"></i> Rediger</a>
-            </div>
-            <p class="mb-0">awrtqerqerg</p>
-        </div>
-
-        <div class="chat-container mt-4">
-            <div class="chat-msg chat-internal">
-                <div class="chat-header">
-                    <span><i class="bi bi-lock-fill me-1"></i> Hurtig kommentar (Intern)</span>
-                    <span class="small fw-normal">19/03-2026 06:34</span>
-                </div>
-                <div>tiest</div>
-            </div>
-
-            <div class="chat-msg chat-internal">
-                <div class="chat-header">
-                    <span><i class="bi bi-lock-fill me-1"></i> Hurtig kommentar (Intern)</span>
-                    <span class="small fw-normal">19/03-2026 07:30</span>
-                </div>
-                <div>test</div>
-            </div>
-
-            <div class="chat-msg chat-customer">
-                <div class="chat-header">
-                    <span><i class="bi bi-person-circle me-1"></i> Bruger / Kunde svar</span>
-                    <span class="small fw-normal">19/03-2026 08:03</span>
-                </div>
-                <div>sdfsdfsdfgsg</div>
-            </div>
-        </div>
-    </div>
-
-
-    <!-- FORSLAG 2 -->
-    <div class="proposal-wrapper">
-        <h3 class="proposal-title"><i class="bi bi-clock-history me-2"></i>Forslag 2: Timeline / Activity Feed</h3>
-        <p class="text-muted mb-4">Inspireret af GitHub Issues. En lodret historik-streg samler oprettelse, kommentarer og ændringer i et nemt læsbart flow.</p>
-        
-        <div class="timeline">
-            <!-- Beskrivelsen som første post i timelinen -->
-            <div class="timeline-item">
-                <div class="timeline-icon icon-system"><i class="bi bi-flag-fill"></i></div>
-                <div class="timeline-content">
-                    <div class="timeline-meta">
-                        <strong>Sag oprettet</strong> &bull; Beskrivelse tilføjet
-                        <div class="ms-auto"><a href="#" class="text-muted"><i class="bi bi-pencil"></i></a></div>
-                    </div>
-                    <div class="p-3 bg-light rounded border">
-                        awrtqerqerg
-                    </div>
-                </div>
-            </div>
-
-            <div class="timeline-item">
-                <div class="timeline-icon icon-internal"><i class="bi bi-chat-square-text"></i></div>
-                <div class="timeline-content">
-                    <div class="timeline-meta">
-                        <strong>Hurtig kommentar</strong> (Intern note)
-                        <span class="ms-auto text-muted small">19/03-2026 06:34</span>
-                    </div>
-                    <div>tiest</div>
-                </div>
-            </div>
-
-            <div class="timeline-item">
-                <div class="timeline-icon icon-customer"><i class="bi bi-envelope"></i></div>
-                <div class="timeline-content" style="border-color: #c3e6cb;">
-                    <div class="timeline-meta text-success">
-                        <strong>Bruger</strong> (Svar fra kunde)
-                        <span class="ms-auto text-muted small">19/03-2026 08:03</span>
-                    </div>
-                    <div>sdfsdfsdfgsg</div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-
-    <!-- FORSLAG 3 -->
-    <div class="proposal-wrapper">
-        <h3 class="proposal-title"><i class="bi bi-card-list me-2"></i>Forslag 3: Clean Cards (Farvekodet venstre kant)</h3>
-        <p class="text-muted mb-4">Meget stilrent design til CRM / Enterprise systemer. Bevarer fuld bredde for lang tekst, men bruger en tyk farvekode på venstre kant til at identificere typen lynhurtigt.</p>
-        
-        <div class="desc-card shadow-sm" style="border-top: 4px solid #0f4c75;">
-            <div class="desc-label">
-                <span>Opgavebeskrivelse</span>
-                <button class="btn btn-sm btn-outline-secondary py-0"><i class="bi bi-pencil"></i> Rediger</button>
-            </div>
-            <p class="mb-0 fs-5">awrtqerqerg</p>
-        </div>
-
-        <h5 class="mb-3 mt-5" style="color: #6c757d; font-size: 0.9rem; text-transform: uppercase;">Kommentarer & Historik</h5>
-
-        <div class="comment-card type-internal">
-            <div class="card-header-clean">
-                <div class="author">
-                    <div class="bg-warning text-dark rounded-circle d-flex align-items-center justify-content-center" style="width:24px; height:24px; font-size:0.75rem;"><i class="bi bi-lock-fill"></i></div>
-                    Hurtig kommentar
-                    <span class="badge bg-warning text-dark badge-type ms-2">Intern Note</span>
-                </div>
-                <div class="text-muted small">19/03-2026 06:34</div>
-            </div>
-            <div class="card-body p-3">
-                tiest
-            </div>
-        </div>
-
-        <div class="comment-card type-internal">
-            <div class="card-header-clean">
-                <div class="author">
-                    <div class="bg-warning text-dark rounded-circle d-flex align-items-center justify-content-center" style="width:24px; height:24px; font-size:0.75rem;"><i class="bi bi-lock-fill"></i></div>
-                    Hurtig kommentar
-                    <span class="badge bg-warning text-dark badge-type ms-2">Intern Note</span>
-                </div>
-                <div class="text-muted small">19/03-2026 07:59</div>
-            </div>
-            <div class="card-body p-3">
-                adfgaegea hsrhsh
-            </div>
-        </div>
-
-        <div class="comment-card type-customer">
-            <div class="card-header-clean">
-                <div class="author">
-                    <div class="bg-info text-white rounded-circle d-flex align-items-center justify-content-center" style="width:24px; height:24px; font-size:0.75rem;"><i class="bi bi-person-fill"></i></div>
-                    Bruger
-                    <span class="badge bg-info text-dark badge-type ms-2">Kunde</span>
-                </div>
-                <div class="text-muted small">19/03-2026 08:03</div>
-            </div>
-            <div class="card-body p-3">
-                sdfsdfsdfgsg
-            </div>
-        </div>
-
-    </div>
-
-</div>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/design_forslag_top3_ny_side.html b/design_forslag_top3_ny_side.html
deleted file mode 100644
index f535ceb..0000000
--- a/design_forslag_top3_ny_side.html
+++ /dev/null
@@ -1,290 +0,0 @@
-<!DOCTYPE html>
-<html lang="da">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>3 Kompakte Forslag - Sagsdetaljer</title>
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
-  <style>
-    :root {
-      --accent: #0f4c75;
-      --bg: #f4f6f8;
-      --card: #ffffff;
-      --muted: #6c757d;
-      --border: #e3e7eb;
-    }
-
-    body {
-      background: var(--bg);
-      color: #1f2937;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      font-size: 0.9rem;
-    }
-
-    .wrap {
-      max-width: 980px;
-      margin: 24px auto 48px;
-      padding: 0 12px;
-    }
-
-    .hero {
-      background: linear-gradient(145deg, #fafdff, #eef5fb);
-      border: 1px solid #d7e7f7;
-      border-radius: 10px;
-      padding: 14px 16px;
-      margin-bottom: 16px;
-    }
-
-    .hero h1 {
-      font-size: 1.15rem;
-      margin: 0 0 4px;
-      color: var(--accent);
-      font-weight: 700;
-    }
-
-    .hero p {
-      margin: 0;
-      color: var(--muted);
-      font-size: 0.83rem;
-    }
-
-    .proposal {
-      background: var(--card);
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      margin-bottom: 14px;
-      overflow: hidden;
-    }
-
-    .proposal-head {
-      padding: 10px 12px;
-      border-bottom: 1px solid var(--border);
-      background: #fbfdff;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .proposal-head h2 {
-      margin: 0;
-      font-size: 0.84rem;
-      text-transform: uppercase;
-      letter-spacing: 0.07em;
-      color: var(--accent);
-      font-weight: 700;
-    }
-
-    .proposal-head small {
-      color: #6b7280;
-      font-size: 0.73rem;
-    }
-
-    .proposal-body {
-      padding: 10px 12px;
-    }
-
-    .example {
-      border: 1px solid #edf0f3;
-      border-radius: 8px;
-      overflow: hidden;
-    }
-
-    .msg-row {
-      padding: 7px 10px;
-      border-bottom: 1px solid #f2f4f6;
-    }
-
-    .msg-row:last-child {
-      border-bottom: none;
-    }
-
-    .meta {
-      display: flex;
-      align-items: center;
-      gap: 7px;
-      margin-bottom: 2px;
-      font-size: 0.78rem;
-      color: #64748b;
-    }
-
-    .meta .name {
-      color: #0f172a;
-      font-weight: 600;
-    }
-
-    .meta .time {
-      margin-left: auto;
-      color: #9aa3ad;
-      font-size: 0.72rem;
-    }
-
-    .content {
-      color: #1f2937;
-      line-height: 1.43;
-      font-size: 0.86rem;
-    }
-
-    /* Forslag 1 */
-    .avatar {
-      width: 21px;
-      height: 21px;
-      border-radius: 50%;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 0.63rem;
-      font-weight: 700;
-      color: white;
-      background: var(--accent);
-      flex-shrink: 0;
-    }
-
-    .sys {
-      background: #7d8793;
-      font-style: italic;
-      color: #5f6b76;
-    }
-
-    /* Forslag 2 */
-    .log-line {
-      display: flex;
-      gap: 0;
-      border-bottom: 1px solid #f1f3f5;
-    }
-
-    .log-line:last-child {
-      border-bottom: none;
-    }
-
-    .stripe {
-      width: 3px;
-      background: #cfd6de;
-      flex-shrink: 0;
-    }
-
-    .stripe.tech {
-      background: var(--accent);
-    }
-
-    .stripe.system {
-      background: #9da8b5;
-    }
-
-    .log-inner {
-      padding: 6px 9px;
-      width: 100%;
-    }
-
-    /* Forslag 3 */
-    .inbox {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-      padding: 8px;
-      background: #fbfdff;
-    }
-
-    .bubble {
-      max-width: 78%;
-      border: 1px solid #dee5ed;
-      border-radius: 7px;
-      padding: 6px 9px;
-      font-size: 0.86rem;
-      line-height: 1.43;
-    }
-
-    .left { align-self: flex-start; background: #eef3f8; }
-    .right { align-self: flex-end; background: #e4eef8; border-color: #c7d9eb; }
-    .center { align-self: center; max-width: 90%; background: #f4f4f4; border-color: #e3e3e3; color: #69727d; font-style: italic; }
-
-    @media (max-width: 768px) {
-      .proposal-head {
-        flex-direction: column;
-        align-items: flex-start;
-      }
-
-      .bubble {
-        max-width: 92%;
-      }
-    }
-  </style>
-</head>
-<body>
-  <div class="wrap">
-    <div class="hero">
-      <h1>3 nye forslag på én side</h1>
-      <p>Fokus: kompakt layout, mindre vertikalt spild, hurtig læsning i drift.</p>
-    </div>
-
-    <section class="proposal">
-      <div class="proposal-head">
-        <h2>Forslag 1: Kompakt Thread</h2>
-        <small>Bedst balance mellem læsbarhed og tæthed</small>
-      </div>
-      <div class="proposal-body">
-        <div class="example">
-          <div class="msg-row">
-            <div class="meta"><span class="avatar">JJ</span><span class="name">Jens Jensen</span><span class="time">10:00</span></div>
-            <div class="content" style="padding-left:28px;">Vi har et problem med printerne siden fredag. De melder offline.</div>
-          </div>
-          <div class="msg-row">
-            <div class="meta"><span class="avatar">CT</span><span class="name">Christian Thomas</span><span class="time">10:15</span></div>
-            <div class="content" style="padding-left:28px;">Jeg kan se port 4 og 5 har været nede. Kan I genstarte printerne?</div>
-          </div>
-          <div class="msg-row sys">
-            <div class="meta"><span class="avatar" style="background:#7d8793;">SY</span><span class="name">System</span><span class="time">10:20</span></div>
-            <div class="content" style="padding-left:28px;">Status ændret: Åben -> Under behandling</div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <section class="proposal">
-      <div class="proposal-head">
-        <h2>Forslag 2: Activity Log</h2>
-        <small>Maksimal informationsdensitet</small>
-      </div>
-      <div class="proposal-body">
-        <div class="example">
-          <div class="log-line">
-            <div class="stripe"></div>
-            <div class="log-inner">
-              <div class="meta"><span class="name">Jens Jensen</span><span class="time">10:00</span></div>
-              <div class="content">Vi har et problem med printerne siden fredag. De melder offline.</div>
-            </div>
-          </div>
-          <div class="log-line">
-            <div class="stripe tech"></div>
-            <div class="log-inner">
-              <div class="meta"><span class="name">Christian Thomas</span><span class="time">10:15</span></div>
-              <div class="content">Jeg kan se port 4 og 5 har været nede. Kan I genstarte printerne?</div>
-            </div>
-          </div>
-          <div class="log-line">
-            <div class="stripe system"></div>
-            <div class="log-inner">
-              <div class="meta"><span class="name">System</span><span class="time">10:20</span></div>
-              <div class="content" style="color:#6b7280; font-style:italic;">Status ændret: Åben -> Under behandling</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <section class="proposal">
-      <div class="proposal-head">
-        <h2>Forslag 3: Split Inbox</h2>
-        <small>Tydelig kunde/tekniker-retning</small>
-      </div>
-      <div class="proposal-body">
-        <div class="example inbox">
-          <div class="bubble left">Vi har et problem med printerne siden fredag. De melder offline.<div class="meta" style="margin-top:4px; margin-bottom:0;"><span class="name">Jens Jensen</span><span class="time">10:00</span></div></div>
-          <div class="bubble right">Jeg kan se port 4 og 5 har været nede. Kan I genstarte printerne?<div class="meta" style="margin-top:4px; margin-bottom:0;"><span class="name">Christian Thomas</span><span class="time">10:15</span></div></div>
-          <div class="bubble center">Status ændret: Åben -> Under behandling<div class="meta" style="justify-content:center; margin-top:4px; margin-bottom:0;"><span class="name">System</span><span class="time">10:20</span></div></div>
-        </div>
-      </div>
-    </section>
-  </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/static/js/bottom-bar.js b/static/js/bottom-bar.js
index ed5fbe6..90b1299 100644
--- a/static/js/bottom-bar.js
+++ b/static/js/bottom-bar.js
@@ -1492,6 +1492,7 @@
     }
 
     function bindHeaderActions() {
+        const backBtn = byId('bbBackBtn');
         const searchBtn = byId('bbSearchBtn');
         const notificationsBtn = byId('bbNotificationsBtn');
         const pauseBtn = byId('bbTimerPauseBtn');
@@ -1499,6 +1500,16 @@
         const switchBtn = byId('bbTimerSwitchBtn');
         const timerChip = byId('bbActiveTimerChip');
 
+        if (backBtn) {
+            backBtn.addEventListener('click', function () {
+                if (window.history.length > 1) {
+                    window.history.back();
+                } else {
+                    window.location.href = '/sag';
+                }
+            });
+        }
+
         if (searchBtn) {
             searchBtn.addEventListener('click', function () {
                 const trigger = byId('globalSearchBtn');