diff --git a/EssentialCSharp.Web/Areas/Identity/Pages/Account/Manage/TwoFactorAuthentication.cshtml b/EssentialCSharp.Web/Areas/Identity/Pages/Account/Manage/TwoFactorAuthentication.cshtml
index 7bf35e76..0fbc38d8 100644
--- a/EssentialCSharp.Web/Areas/Identity/Pages/Account/Manage/TwoFactorAuthentication.cshtml
+++ b/EssentialCSharp.Web/Areas/Identity/Pages/Account/Manage/TwoFactorAuthentication.cshtml
@@ -38,7 +38,7 @@ ViewData["ActivePage"] = ManageNavPages.TwoFactorAuthentication;
 
         if (Model.IsMachineRemembered)
         {
-            <form method="post" style="display: inline-block">
+            <form method="post" class="d-inline-block">
                     <button type="submit" class="btn btn-primary">Forget this browser</button>
                 </form>
         }
diff --git a/EssentialCSharp.Web/Areas/Identity/Pages/_PasswordStrengthMeter.cshtml b/EssentialCSharp.Web/Areas/Identity/Pages/_PasswordStrengthMeter.cshtml
index 36e3095a..1b3e8ff5 100644
--- a/EssentialCSharp.Web/Areas/Identity/Pages/_PasswordStrengthMeter.cshtml
+++ b/EssentialCSharp.Web/Areas/Identity/Pages/_PasswordStrengthMeter.cshtml
@@ -17,10 +17,10 @@
      data-user-input-fields="@Model.UserInputFieldIds"
      data-min-length="@EssentialCSharp.Web.Services.PasswordRequirementOptions.PasswordMinimumLength">
     <div class="d-flex gap-2 align-items-center">
-        <div class="progress flex-grow-1" style="height: 6px;" role="progressbar"
+        <div class="progress flex-grow-1 password-strength-progress" role="progressbar"
              aria-label="Password strength"
              aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
-            <div class="progress-bar password-strength-bar" style="width: 0;"></div>
+            <div class="progress-bar password-strength-bar password-strength-bar-initial"></div>
         </div>
         <button type="button"
                 class="btn btn-sm btn-outline-secondary password-show-toggle py-0 px-1 border-0"
diff --git a/EssentialCSharp.Web/Program.cs b/EssentialCSharp.Web/Program.cs
index f5c980ad..93994def 100644
--- a/EssentialCSharp.Web/Program.cs
+++ b/EssentialCSharp.Web/Program.cs
@@ -508,7 +508,8 @@ await McpJsonRpcResponseWriter.WriteErrorAsync(
             string csp = string.Join("; ",
                 $"default-src 'self'",
                 $"script-src 'self' 'unsafe-inline' cdn.jsdelivr.net www.clarity.ms www.googletagmanager.com js.monitor.azure.com https://hcaptcha.com https://*.hcaptcha.com{tryDotNetSources}",
-                $"style-src 'self' 'unsafe-inline' cdnjs.cloudflare.com fonts.googleapis.com https://hcaptcha.com https://*.hcaptcha.com",
+                $"style-src 'self' cdnjs.cloudflare.com fonts.googleapis.com https://hcaptcha.com https://*.hcaptcha.com",
+                $"style-src-attr 'unsafe-inline'",
                 $"font-src 'self' fonts.gstatic.com cdnjs.cloudflare.com",
                 $"img-src 'self' data: https:",
                 $"connect-src 'self' https://hcaptcha.com https://*.hcaptcha.com https://api.pwnedpasswords.com https://*.algolia.net https://*.algolianet.com https://*.google-analytics.com https://*.clarity.ms https://*.in.applicationinsights.azure.com{GetApplicationInsightsCspSources(app.Configuration["APPLICATIONINSIGHTS_CONNECTION_STRING"], app.Logger)}{tryDotNetSources}",
diff --git a/EssentialCSharp.Web/Views/Home/About.cshtml b/EssentialCSharp.Web/Views/Home/About.cshtml
index 81210bee..559322d4 100644
--- a/EssentialCSharp.Web/Views/Home/About.cshtml
+++ b/EssentialCSharp.Web/Views/Home/About.cshtml
@@ -27,7 +27,7 @@
         </div>
         <div class="col-12 col-md-6">
             <div class="d-flex align-items-center justify-content-center h-100 bg-light">
-                <img src="/images/intellitect-logo.svg" class="img-fluid" alt="IntelliTect Logo" style="height: 75px">
+                <img src="/images/intellitect-logo.svg" class="img-fluid intellitect-logo-img" alt="IntelliTect Logo">
             </div>
         </div>
     </div>
@@ -38,7 +38,7 @@
         <div class="col-12 col-md-6">
             <div class="d-flex align-items-center justify-content-center h-100">
                 <a href="https://a.co/d/95wxhTg" target="_blank">
-                    <img src="/images/book.png" class="img-fluid" style="height: 450px" alt="Essential C Sharp Book">
+                    <img src="/images/book.png" class="img-fluid ecs-book-cover-img" alt="Essential C Sharp Book">
                 </a>
             </div>
         </div>
@@ -70,4 +70,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/EssentialCSharp.Web/Views/Home/Guidelines.cshtml b/EssentialCSharp.Web/Views/Home/Guidelines.cshtml
index cb2a4842..cd2e9aee 100644
--- a/EssentialCSharp.Web/Views/Home/Guidelines.cshtml
+++ b/EssentialCSharp.Web/Views/Home/Guidelines.cshtml
@@ -53,7 +53,7 @@
             foreach (var guideline in group)
             {
                 <div>
-                    <i class="@GetSymbolForType(guideline.Type)" style="color: @GetColorForType(guideline.Type); padding-right: 10px;"></i>
+                    <i class="@GetSymbolForType(guideline.Type) guideline-icon @GetColorClassForType(guideline.Type)"></i>
                     <span>@guideline.Guideline</span>
                 </div>
             }
@@ -75,14 +75,14 @@
         };
     }
 
-    private string GetColorForType(GuidelineType type)
+    private string GetColorClassForType(GuidelineType type)
     {
         return type switch
         {
-            GuidelineType.DoNot => "#ff0000",
-            GuidelineType.Avoid => "#ff0000",
-            GuidelineType.Consider => "#7a7a7a",
-            GuidelineType.Do => "#63E6BE",
+            GuidelineType.DoNot => "guideline-color-do-not",
+            GuidelineType.Avoid => "guideline-color-avoid",
+            GuidelineType.Consider => "guideline-color-consider",
+            GuidelineType.Do => "guideline-color-do",
             _ => string.Empty,
         };
     }
diff --git a/EssentialCSharp.Web/Views/Home/Home.cshtml b/EssentialCSharp.Web/Views/Home/Home.cshtml
index 5c96fb51..64539cb1 100644
--- a/EssentialCSharp.Web/Views/Home/Home.cshtml
+++ b/EssentialCSharp.Web/Views/Home/Home.cshtml
@@ -36,7 +36,7 @@
         <div class="col-12 col-md-6">
             <div class="d-flex align-items-center justify-content-center h-100">
                 <a href="https://a.co/d/95wxhTg" target="_blank">
-                    <img src="/images/book.png" class="img-fluid" style="height: 450px" alt="Essential C Sharp Book">
+                    <img src="/images/book.png" class="img-fluid ecs-book-cover-img" alt="Essential C Sharp Book">
                 </a>
             </div>
         </div>
diff --git a/EssentialCSharp.Web/Views/McpSetup/Index.cshtml b/EssentialCSharp.Web/Views/McpSetup/Index.cshtml
index 8f027d09..460362df 100644
--- a/EssentialCSharp.Web/Views/McpSetup/Index.cshtml
+++ b/EssentialCSharp.Web/Views/McpSetup/Index.cshtml
@@ -9,7 +9,7 @@
     bool isSignedIn = SignInManager.IsSignedIn(User);
 }
 
-<div class="container py-4" style="max-width:900px">
+<div class="container py-4 mcp-setup-container">
 
     
     <div class="mb-5">
@@ -267,7 +267,7 @@
         @foreach (var tool in Model)
         {
             <details class="card mb-2">
-                <summary class="card-header d-flex align-items-center gap-2" style="cursor:pointer;list-style:none">
+                <summary class="card-header d-flex align-items-center gap-2 mcp-tool-summary">
                     <span class="details-chevron">&#9656;</span>
                     <span class="font-monospace fw-semibold">@tool.Name</span>
                     <span class="text-muted small ms-auto">@tool.Title</span>
@@ -380,17 +380,6 @@
 </div>
 
 @section Scripts {
-    <style>
-        .details-chevron {
-            display: inline-block;
-            transition: transform 0.2s ease;
-            color: var(--bs-secondary-color, #6c757d);
-            font-size: .75rem;
-        }
-        details[open] > summary .details-chevron {
-            transform: rotate(90deg);
-        }
-    </style>
     <script>
         function toggleAllTools(btn) {
             const details = document.querySelectorAll('#tools details');
diff --git a/EssentialCSharp.Web/Views/Shared/_Layout.cshtml b/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
index 57061fbe..8cfda0ec 100644
--- a/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
+++ b/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
@@ -182,7 +182,7 @@
         </div>
     </footer>
 
-    <div id="docsearch" style="display: none;"></div>
+    <div id="docsearch" class="d-none"></div>
 
     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="~/js/algoliaDocSearch.js" asp-append-version="true"></script>
diff --git a/EssentialCSharp.Web/wwwroot/css/styles.css b/EssentialCSharp.Web/wwwroot/css/styles.css
index 302ef70a..8832d6c1 100644
--- a/EssentialCSharp.Web/wwwroot/css/styles.css
+++ b/EssentialCSharp.Web/wwwroot/css/styles.css
@@ -786,6 +786,80 @@ details > summary::-webkit-details-marker {
   padding-left: 1em;
 }
 
+/* CSP inline-style replacements */
+.mcp-setup-container {
+  max-width: 900px;
+}
+
+.mcp-tool-summary {
+  cursor: pointer;
+  list-style: none;
+}
+
+.details-chevron {
+  display: inline-block;
+  transition: transform 0.2s ease;
+  color: var(--bs-secondary-color, #6c757d);
+  font-size: .75rem;
+}
+
+details[open] > summary .details-chevron {
+  transform: rotate(90deg);
+}
+
+.password-strength-progress {
+  height: 6px;
+}
+
+.password-strength-bar-initial {
+  width: 0;
+}
+
+.password-strength-width-20 {
+  width: 20%;
+}
+
+.password-strength-width-40 {
+  width: 40%;
+}
+
+.password-strength-width-60 {
+  width: 60%;
+}
+
+.password-strength-width-80 {
+  width: 80%;
+}
+
+.password-strength-width-100 {
+  width: 100%;
+}
+
+.guideline-icon {
+  padding-right: 10px;
+}
+
+.guideline-color-do-not,
+.guideline-color-avoid {
+  color: #ff0000;
+}
+
+.guideline-color-consider {
+  color: #7a7a7a;
+}
+
+.guideline-color-do {
+  color: #63E6BE;
+}
+
+.intellitect-logo-img {
+  height: 75px;
+}
+
+.ecs-book-cover-img {
+  height: 450px;
+}
+
 /* Home Page Styles */
 
 .quote {
@@ -1079,6 +1153,7 @@ button.accept-policy {
 }
 
 /* Reduced motion support */
+
 @media (prefers-reduced-motion: reduce) {
     .captcha-modal-overlay,
     .captcha-modal-card {
@@ -1093,3 +1168,105 @@ button.accept-policy {
         transform: none;
     }
 }
+
+/* Cookie consent banner */
+.consent-banner {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #ffffff;
+    border-top: 3px solid #007bff;
+    box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
+    z-index: 10000;
+    font-family: inherit;
+}
+
+.consent-banner-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+}
+
+.consent-banner-text h3 {
+    margin: 0 0 8px 0;
+    font-size: 1.2rem;
+    color: #333;
+}
+
+.consent-banner-text p {
+    margin: 0;
+    color: #666;
+    font-size: 0.95rem;
+}
+
+.consent-banner-actions {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.consent-details {
+    border-top: 1px solid #eee;
+    padding: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.consent-details-hidden {
+    display: none;
+}
+
+.consent-category {
+    margin-bottom: 20px;
+}
+
+.consent-switch {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    cursor: pointer;
+    padding: 15px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    background: #f8f9fa;
+}
+
+.consent-switch input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    margin: 0;
+}
+
+.consent-info strong {
+    display: block;
+    margin-bottom: 5px;
+    color: #333;
+}
+
+.consent-info p {
+    margin: 0;
+    color: #666;
+    font-size: 0.9rem;
+}
+
+.consent-actions {
+    text-align: center;
+    margin-top: 20px;
+}
+
+@media (max-width: 768px) {
+    .consent-banner-content {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .consent-banner-actions {
+        justify-content: center;
+        width: 100%;
+    }
+}
diff --git a/EssentialCSharp.Web/wwwroot/js/consent-manager.js b/EssentialCSharp.Web/wwwroot/js/consent-manager.js
index 0b755c80..f234c8e8 100644
--- a/EssentialCSharp.Web/wwwroot/js/consent-manager.js
+++ b/EssentialCSharp.Web/wwwroot/js/consent-manager.js
@@ -97,9 +97,6 @@ class ConsentManager {
 
         const banner = this.createConsentBanner();
         document.body.appendChild(banner);
-        
-        // Add banner styles if not already added
-        this.addConsentStyles();
     }
 
     createConsentBanner() {
@@ -118,7 +115,7 @@ class ConsentManager {
                     <button id="consent-customize" class="btn btn-outline-primary">Customize</button>
                 </div>
             </div>
-            <div id="consent-details" class="consent-details" style="display: none;">
+            <div id="consent-details" class="consent-details consent-details-hidden">
                 <div class="consent-category">
                     <label class="consent-switch">
                         <input type="checkbox" id="consent-essential" checked disabled>
@@ -182,7 +179,7 @@ class ConsentManager {
     showCustomizeOptions() {
         const details = document.getElementById('consent-details');
         if (details) {
-            details.style.display = 'block';
+            details.classList.remove('consent-details-hidden');
             
             // Load current preferences into checkboxes
             document.getElementById('consent-analytics').checked = 
@@ -287,113 +284,6 @@ class ConsentManager {
         }
     }
 
-    addConsentStyles() {
-        if (document.getElementById('consent-styles')) return; // Already added
-
-        const styles = document.createElement('style');
-        styles.id = 'consent-styles';
-        styles.textContent = `
-            .consent-banner {
-                position: fixed;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                background: #ffffff;
-                border-top: 3px solid #007bff;
-                box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
-                z-index: 10000;
-                font-family: inherit;
-            }
-
-            .consent-banner-content {
-                max-width: 1200px;
-                margin: 0 auto;
-                padding: 20px;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                gap: 20px;
-            }
-
-            .consent-banner-text h3 {
-                margin: 0 0 8px 0;
-                font-size: 1.2rem;
-                color: #333;
-            }
-
-            .consent-banner-text p {
-                margin: 0;
-                color: #666;
-                font-size: 0.95rem;
-            }
-
-            .consent-banner-actions {
-                display: flex;
-                gap: 10px;
-                flex-wrap: wrap;
-            }
-
-            .consent-details {
-                border-top: 1px solid #eee;
-                padding: 20px;
-                max-width: 1200px;
-                margin: 0 auto;
-            }
-
-            .consent-category {
-                margin-bottom: 20px;
-            }
-
-            .consent-switch {
-                display: flex;
-                align-items: center;
-                gap: 15px;
-                cursor: pointer;
-                padding: 15px;
-                border: 1px solid #ddd;
-                border-radius: 8px;
-                background: #f8f9fa;
-            }
-
-            .consent-switch input[type="checkbox"] {
-                width: 20px;
-                height: 20px;
-                margin: 0;
-            }
-
-            .consent-info strong {
-                display: block;
-                margin-bottom: 5px;
-                color: #333;
-            }
-
-            .consent-info p {
-                margin: 0;
-                color: #666;
-                font-size: 0.9rem;
-            }
-
-            .consent-actions {
-                text-align: center;
-                margin-top: 20px;
-            }
-
-            @media (max-width: 768px) {
-                .consent-banner-content {
-                    flex-direction: column;
-                    text-align: center;
-                }
-                
-                .consent-banner-actions {
-                    justify-content: center;
-                    width: 100%;
-                }
-            }
-        `;
-        
-        document.head.appendChild(styles);
-    }
-
     // Cookie utility methods
     setCookie(name, value, days) {
         const expires = new Date();
diff --git a/EssentialCSharp.Web/wwwroot/js/password-strength.js b/EssentialCSharp.Web/wwwroot/js/password-strength.js
index 4a578271..e1aff858 100644
--- a/EssentialCSharp.Web/wwwroot/js/password-strength.js
+++ b/EssentialCSharp.Web/wwwroot/js/password-strength.js
@@ -12,11 +12,11 @@
 import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core';
 
 const SCORE_CONFIG = [
-    { label: 'Very weak', barClass: 'bg-danger',            width: 20 },
-    { label: 'Weak',      barClass: 'bg-warning text-dark', width: 40 },
-    { label: 'Fair',      barClass: 'bg-info text-dark',    width: 60 },
-    { label: 'Strong',    barClass: 'bg-primary',           width: 80 },
-    { label: 'Very strong', barClass: 'bg-success',         width: 100 },
+    { label: 'Very weak', barClass: 'bg-danger',            width: 20, widthClass: 'password-strength-width-20' },
+    { label: 'Weak',      barClass: 'bg-warning text-dark', width: 40, widthClass: 'password-strength-width-40' },
+    { label: 'Fair',      barClass: 'bg-info text-dark',    width: 60, widthClass: 'password-strength-width-60' },
+    { label: 'Strong',    barClass: 'bg-primary',           width: 80, widthClass: 'password-strength-width-80' },
+    { label: 'Very strong', barClass: 'bg-success',         width: 100, widthClass: 'password-strength-width-100' },
 ];
 
 let zxcvbnReady = false;
@@ -87,8 +87,7 @@ function updateMeter(container, score, feedback, crackTimesDisplay) {
     const crackTimeEl = container.querySelector('.password-strength-cracktime');
 
     // Reset bar classes
-    bar.className = 'progress-bar password-strength-bar ' + config.barClass;
-    bar.style.width = config.width + '%';
+    bar.className = `progress-bar password-strength-bar ${config.barClass} ${config.widthClass}`;
 
     // Update aria
     const progressEl = container.querySelector('.progress');
@@ -126,8 +125,7 @@ function updateMeter(container, score, feedback, crackTimesDisplay) {
 
 function clearMeter(container) {
     const bar = container.querySelector('.password-strength-bar');
-    bar.className = 'progress-bar password-strength-bar';
-    bar.style.width = '0';
+    bar.className = 'progress-bar password-strength-bar password-strength-bar-initial';
     container.querySelector('.progress').setAttribute('aria-valuenow', '0');
     container.querySelector('.password-strength-label').textContent = '';
     const warningEl = container.querySelector('.password-strength-warning');