diff --git a/templates/course_dashboard.html b/templates/course_dashboard.html
index e2e72da..9d2e65a 100644
--- a/templates/course_dashboard.html
+++ b/templates/course_dashboard.html
@@ -53,12 +53,21 @@
             border: 1px solid var(--border-color);
         }
 
+        html, body {
+            height: 100%;
+        }
         body {
             font-family: var(--font-family);
             font-size: var(--font-size-base);
             background: var(--bg-primary);
             color: var(--text-primary);
             line-height: 1.6;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+        .page-content {
+            flex: 1;
         }
 
         .container {
@@ -68,17 +77,98 @@
             padding: 20px;
         }
 
-        .header {
-            background: var(--bg-secondary);
-            padding: 20px 0;
+        .app-header {
+            background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
+            padding: 28px 0;
             margin-bottom: 30px;
             border-bottom: 3px solid var(--accent);
+            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
         }
 
-        .header h1 {
+        .app-header .container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 20px;
+            flex-wrap: wrap;
+        }
+
+        .brand {
+            display: flex;
+            align-items: center;
+            gap: 14px;
+        }
+
+        .brand-icon {
+            font-size: 2.2em;
+            line-height: 1;
+        }
+
+        .brand h1 {
+            color: var(--accent);
+            font-size: 1.9em;
+            letter-spacing: 0.5px;
+        }
+
+        .brand .tagline {
+            color: var(--text-muted);
+            font-size: 0.85em;
+            margin-top: 2px;
+        }
+
+        .header-course-badge {
+            background: var(--bg-primary);
+            border: 1px solid var(--accent);
+            color: var(--text-primary);
+            padding: 8px 16px;
+            border-radius: var(--radius);
+            font-size: 0.9em;
+            max-width: 340px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .app-footer {
+            background: var(--bg-secondary);
+            border-top: 1px solid var(--border-color);
+            margin-top: 40px;
+            padding: 18px 0;
+        }
+
+        .app-footer .container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 15px;
+            flex-wrap: wrap;
+        }
+
+        .footer-brand {
+            color: var(--text-muted);
+            font-size: 0.9em;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .footer-links {
+            display: flex;
+            gap: 20px;
+        }
+
+        .footer-links a {
+            color: var(--text-muted);
+            text-decoration: none;
+            font-size: 0.9em;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: color 0.2s;
+        }
+
+        .footer-links a:hover {
             color: var(--accent);
-            text-align: center;
-            font-size: 2.5em;
         }
 
         .nav {
@@ -388,18 +478,27 @@
     </style>
 </head>
 <body>
-    <div class="header">
+    <div class="app-header">
         <div class="container">
-            <h1>OfflineU</h1>
+            <div class="brand">
+                <span class="brand-icon">📚</span>
+                <div>
+                    <h1>OfflineU</h1>
+                    <p class="tagline">Your self-hosted course library</p>
+                </div>
+            </div>
+            {% if course %}
+            <div class="header-course-badge">{{ course.name }}</div>
+            {% endif %}
         </div>
     </div>
 
+    <div class="page-content">
     {% if course %}
         <div class="nav">
             <div class="container">
                 <a href="/reset_course">← Select Different Course</a>
                 <a href="#stats">Progress</a>
-                <a href="/settings">⚙ Settings</a>
                 <span style="color: #666; margin-left: auto;">
                     {{ stats.total_lessons }} lessons
                 </span>
@@ -488,10 +587,7 @@
     {% else %}
         <div class="container">
             <div class="card" id="library-card">
-                <div style="display: flex; justify-content: space-between; align-items: center;">
-                    <h2>Your Courses</h2>
-                    <a href="/settings" style="color: var(--text-muted); text-decoration: none; font-size: 0.9em;">⚙ Settings</a>
-                </div>
+                <h2>Your Courses</h2>
                 <p id="library-path-bar" style="color: #999; font-size: 13px; margin-top: 6px;"></p>
                 <div id="library-groups" style="margin-top: 15px;"></div>
             </div>
@@ -537,6 +633,18 @@
             </div>
         </div>
     {% endif %}
+    </div>
+
+    <footer class="app-footer">
+        <div class="container">
+            <div class="footer-brand">
+                📚 <span>OfflineU</span>
+            </div>
+            <div class="footer-links">
+                <a href="/settings">⚙ Settings</a>
+            </div>
+        </div>
+    </footer>
 
     <script>
         function toggleTree(element) {
diff --git a/templates/lesson_view.html b/templates/lesson_view.html
index ae699a6..f4686d6 100644
--- a/templates/lesson_view.html
+++ b/templates/lesson_view.html
@@ -41,12 +41,80 @@
         [data-card-style="bordered"] .file-link {
             border: 1px solid var(--border-color);
         }
+        html, body {
+            height: 100%;
+        }
         body { 
             font-family: var(--font-family); 
             font-size: var(--font-size-base);
-            margin: 20px; 
+            margin: 0; 
             background: var(--bg-primary);
             color: var(--text-primary);
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+        .page-content {
+            flex: 1;
+            padding: 20px;
+        }
+        .app-header {
+            background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
+            padding: 18px 0;
+            border-bottom: 3px solid var(--accent);
+            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
+        }
+        .app-header .container {
+            max-width: var(--container-max-width);
+            width: 95%;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .app-header .brand-icon {
+            font-size: 1.6em;
+        }
+        .app-header a.brand-link {
+            color: var(--accent);
+            text-decoration: none;
+            font-size: 1.3em;
+            font-weight: 600;
+            letter-spacing: 0.5px;
+        }
+        .app-footer {
+            background: var(--bg-secondary);
+            border-top: 1px solid var(--border-color);
+            padding: 18px 0;
+        }
+        .app-footer .container-inner {
+            max-width: var(--container-max-width);
+            width: 95%;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 15px;
+            flex-wrap: wrap;
+        }
+        .footer-brand {
+            color: var(--text-muted);
+            font-size: 0.9em;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .footer-links a {
+            color: var(--text-muted);
+            text-decoration: none;
+            font-size: 0.9em;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: color 0.2s;
+        }
+        .footer-links a:hover {
+            color: var(--accent);
         }
         .container { 
             max-width: var(--container-max-width); 
@@ -144,6 +212,14 @@
     </style>
 </head>
 <body>
+    <div class="app-header">
+        <div class="container">
+            <span class="brand-icon">📚</span>
+            <a href="/" class="brand-link">OfflineU</a>
+        </div>
+    </div>
+
+    <div class="page-content">
     <div class="container">
         <h1 class="lesson-title">{{ lesson.title }}</h1>
         
@@ -154,7 +230,6 @@
         <div class="navigation">
             <a href="/" style="text-decoration: none; color: var(--accent);">← Back to Course</a>
             <button onclick="markCompleted()">Mark as Completed</button>
-            <a href="/settings" style="text-decoration: none; color: var(--text-muted); margin-left: auto; font-size: 0.9em;">⚙ Settings</a>
         </div>
 
         <div class="content">
@@ -426,6 +501,19 @@
             }
         </script>
     </div>
+    </div>
+
+    <footer class="app-footer">
+        <div class="container-inner">
+            <div class="footer-brand">
+                📚 <span>OfflineU</span>
+            </div>
+            <div class="footer-links">
+                <a href="/settings">⚙ Settings</a>
+            </div>
+        </div>
+    </footer>
+
     <script src="/static/theme.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/templates/settings.html b/templates/settings.html
index a87e5d1..5852d42 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -36,12 +36,69 @@
             border: 1px solid var(--border-color);
         }
         * { box-sizing: border-box; }
+        html, body { height: 100%; }
         body {
             font-family: var(--font-family);
             font-size: var(--font-size-base);
             background: var(--bg-primary);
             color: var(--text-primary);
-            margin: 20px;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+        .page-content {
+            flex: 1;
+            padding: 20px;
+        }
+        .app-header {
+            background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
+            padding: 18px 0;
+            border-bottom: 3px solid var(--accent);
+            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
+        }
+        .app-header .header-inner {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .app-header .brand-icon {
+            font-size: 1.6em;
+        }
+        .app-header a.brand-link {
+            color: var(--accent);
+            text-decoration: none;
+            font-size: 1.3em;
+            font-weight: 600;
+            letter-spacing: 0.5px;
+        }
+        .app-footer {
+            background: var(--bg-secondary);
+            border-top: 1px solid var(--border-color);
+            padding: 18px 0;
+        }
+        .app-footer .footer-inner {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 15px;
+            flex-wrap: wrap;
+        }
+        .footer-brand {
+            color: var(--text-muted);
+            font-size: 0.9em;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .footer-links a {
+            color: var(--accent);
+            text-decoration: none;
+            font-size: 0.9em;
         }
         .container {
             max-width: 800px;
@@ -152,8 +209,15 @@
     </style>
 </head>
 <body>
+    <div class="app-header">
+        <div class="header-inner">
+            <span class="brand-icon">📚</span>
+            <a href="/" class="brand-link">OfflineU</a>
+        </div>
+    </div>
+
+    <div class="page-content">
     <div class="container">
-        <a href="/" style="color: var(--text-muted); text-decoration: none; font-size: 0.9em;">← Back</a>
         <h1 style="margin-top: 10px;">Settings</h1>
         <p class="subtitle">Changes save and apply immediately across the app.</p>
 
@@ -253,6 +317,18 @@
             <span id="save-status">✓ Saved</span>
         </div>
     </div>
+    </div>
+
+    <footer class="app-footer">
+        <div class="footer-inner">
+            <div class="footer-brand">
+                📚 <span>OfflineU</span>
+            </div>
+            <div class="footer-links">
+                <a href="/">← Back to app</a>
+            </div>
+        </div>
+    </footer>
 
     <script src="/static/theme.js"></script>
     <script>
