diff --git a/app/css/main.css b/app/css/main.css
index 78a4f5e..74e1631 100644
--- a/app/css/main.css
+++ b/app/css/main.css
@@ -10,7 +10,11 @@
  */
 
 
+ 
 
+.context-main-bg {
+    background-color: #f7f7f7;
+}
 /* Base styles for the switch container */
 .material-switch {
     position: relative;
diff --git a/app/js/main.js b/app/js/main.js
index 377b259..a41ce06 100644
--- a/app/js/main.js
+++ b/app/js/main.js
@@ -86,22 +86,34 @@ $(document).ready(function() {
 // with the dynamic footer, you need to adjust the content padding to make sure the footer doesn't overlap the content
   document.addEventListener('DOMContentLoaded', function () {
     const toggleButton = document.getElementById('dark-mode-toggle');
+    const enableButton = document.getElementById('dark-mode-toggle-button');
     const darkModeStylesheet = document.getElementById('dark-mode-stylesheet');
-    console.error( 'DOMContentLoaded');
 
     // Check if dark mode is saved in localStorage
     if (localStorage.getItem('darkMode') === 'enabled') {
       darkModeStylesheet.disabled = false;
       toggleButton.checked = true;
       
-        console.error( 'darkMode enabled');
-    } else {
-        
-        console.error( 'darkMode disabled');
+        if ( enableButton ) {
+            enableButton.innerText = 'Disable Now';
+        }
+    }
+    
+    if ( enableButton ) {
+        enableButton.addEventListener('click', function () {
+          if (darkModeStylesheet.disabled) {
+            darkModeStylesheet.disabled = false;
+            localStorage.setItem('darkMode', 'enabled');
+            enableButton.innerText = 'Disable Now';
+          } else {
+            darkModeStylesheet.disabled = true;
+            localStorage.setItem('darkMode', 'disabled');
+            enableButton.innerText = 'Enable Now';
+          }
+        });
     }
 
     toggleButton.addEventListener('click', function () {
-        console.error( 'addEventListener');
       if (darkModeStylesheet.disabled) {
         darkModeStylesheet.disabled = false;
         localStorage.setItem('darkMode', 'enabled');
@@ -110,4 +122,4 @@ $(document).ready(function() {
         localStorage.setItem('darkMode', 'disabled');
       }
     });
-  });
\ No newline at end of file
+  });
diff --git a/app/plugins/blog/templates/blog.inc.php b/app/plugins/blog/templates/blog.inc.php
index 35c19b6..714bf5f 100644
--- a/app/plugins/blog/templates/blog.inc.php
+++ b/app/plugins/blog/templates/blog.inc.php
@@ -30,6 +30,7 @@ class BlogLoader extends DefaultLoader {
         Components::set('SIDEBAR', Views::simpleView('blog.sidebar', $posts->recent(5)));
         Components::set('SIDEBAR2', Views::simpleView('blog.sidebar2', $posts->archive()));
         Components::set('SIDEBARABOUT', Views::simpleView('blog.about'));
+        Components::set('BLOGFEATURES', '');
         Navigation::setCrumbComponent( 'BLOG_BREADCRUMBS', Input::get( 'url' ) );
         Components::set( 'BLOG_TEMPLATE_URL', Template::parse( '{ROOT_URL}app/plugins/comments/' ) );
         $this->addCss( '<link rel="stylesheet" href="{BLOG_TEMPLATE_URL}css/comments.css">' );
diff --git a/app/plugins/blog/templates/blog.tpl b/app/plugins/blog/templates/blog.tpl
index c404cf9..1444ac6 100644
--- a/app/plugins/blog/templates/blog.tpl
+++ b/app/plugins/blog/templates/blog.tpl
@@ -74,57 +74,11 @@
 
 			    <!-- Leading Content -->
                 <div class="container">
-                    <div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
-                        <div class="col-md-6 px-0">
-                            <h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
-                            <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
-                            <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
-                        </div>
-                    </div>
-                    <div class="row mb-2">
-                        <div class="col-md-6">
-                            <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
-                                <div class="col p-4 d-flex flex-column position-static">
-                                    <strong class="d-inline-block mb-2 text-primary">World</strong>
-                                    <h3 class="mb-0">Featured post</h3>
-                                    <div class="mb-1 text-muted">Nov 12</div>
-                                    <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
-                                    <a href="#" class="stretched-link">Continue reading</a>
-                                </div>
-                                <div class="col-auto d-none d-lg-block">
-                                    <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-6">
-                            <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
-                                <div class="col p-4 d-flex flex-column position-static">
-                                    <strong class="d-inline-block mb-2 text-success">Design</strong>
-                                    <h3 class="mb-0">Post title</h3>
-                                    <div class="mb-1 text-muted">Nov 11</div>
-                                    <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
-                                    <a href="#" class="stretched-link">Continue reading</a>
-                                </div>
-                                <div class="col-auto d-none d-lg-block">
-                                    <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                    {BLOGFEATURES}
                 </div>
 
-
-
-
-
-
-
-
                 <div class="pt-4">
                     <div class="container">
-
-
-
                         <h3 class="pb-4 mb-4 fst-italic border-bottom">
                             {SITENAME} Blog
                         </h3>
@@ -136,7 +90,7 @@
 			                <!-- Sidebar Content -->
                             <div class="col-md-4">
                                 <div class="position-sticky" style="top: 2rem;">
-                                    <div class="p-4 mb-3 bg-light rounded">
+                                    <div class="p-4">
                                         {SIDEBARABOUT}
                                     </div>
                                     <div class="p-4">
diff --git a/app/plugins/blog/views/about.html b/app/plugins/blog/views/about.html
index 12777ba..ccd8d95 100644
--- a/app/plugins/blog/views/about.html
+++ b/app/plugins/blog/views/about.html
@@ -1,4 +1,4 @@
-<div class="p-4 mb-3 bg-light rounded">
+<div class="p-4 mb-3 rounded context-main-bg">
     <h4 class="fst-italic">About</h4>
     <p class="mb-0">
         The blog is mostly here to serve ass a simple way to link to long-form content on the site. There won't be any breaking news or tell-all stories here. Just good ole fashioned boring crap no one wants to read.
diff --git a/app/plugins/blog/views/largeFeature.html b/app/plugins/blog/views/largeFeature.html
new file mode 100644
index 0000000..e533c50
--- /dev/null
+++ b/app/plugins/blog/views/largeFeature.html
@@ -0,0 +1,7 @@
+<div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
+    <div class="col-md-6 px-0">
+        <h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
+        <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
+        <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/plugins/blog/views/sidebar.html b/app/plugins/blog/views/sidebar.html
index d10de0b..07ca483 100644
--- a/app/plugins/blog/views/sidebar.html
+++ b/app/plugins/blog/views/sidebar.html
@@ -1,4 +1,4 @@
-<div class="card panel-info">
+<div class="card context-main-bg">
     <div class="card-header">
         <h3 class="card-title">Recent Posts</h3>
     </div>
diff --git a/app/plugins/blog/views/smallFeature.html b/app/plugins/blog/views/smallFeature.html
new file mode 100644
index 0000000..14eaaf0
--- /dev/null
+++ b/app/plugins/blog/views/smallFeature.html
@@ -0,0 +1,31 @@
+
+<div class="row mb-2">
+    <div class="col-md-6">
+        <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+            <div class="col p-4 d-flex flex-column position-static">
+                <strong class="d-inline-block mb-2 text-primary">World</strong>
+                <h3 class="mb-0">Featured post</h3>
+                <div class="mb-1 text-muted">Nov 12</div>
+                <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
+                <a href="#" class="stretched-link">Continue reading</a>
+            </div>
+            <div class="col-auto d-none d-lg-block">
+                <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6">
+        <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+            <div class="col p-4 d-flex flex-column position-static">
+                <strong class="d-inline-block mb-2 text-success">Design</strong>
+                <h3 class="mb-0">Post title</h3>
+                <div class="mb-1 text-muted">Nov 11</div>
+                <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
+                <a href="#" class="stretched-link">Continue reading</a>
+            </div>
+            <div class="col-auto d-none d-lg-block">
+                <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/plugins/comments/views/create.html b/app/plugins/comments/views/create.html
index 098552a..0cc13a5 100644
--- a/app/plugins/comments/views/create.html
+++ b/app/plugins/comments/views/create.html
@@ -1,10 +1,14 @@
-<form action="" method="post" class="form-horizontal">
-    <div class="form-group center-block">
-        <div class="col-lg-8 col-lg-offset-2">
-            <textarea class="form-control" name="comment" maxlength="2000" rows="4" cols="50" id="comment"></textarea>
-        </div>
+<form action="" method="post" class="text-center mx-auto mt-4" style="max-width: 600px;">
+    <div class="mb-3">
+        <textarea 
+            class="form-control" 
+            name="comment" 
+            maxlength="2000" 
+            rows="4" 
+            id="comment" 
+            placeholder="Write your comment here..."></textarea>
     </div>
-    <button name="submit" value="submit" type="submit" class="btn btn-lg btn-primary center-block">Comment</button>
+    <button name="submit" value="submit" type="submit" class="btn btn-lg btn-primary">Comment</button>
     <input type="hidden" name="token" value="{TOKEN}">
     <input type="hidden" name="contentId" value="{CONTENT_ID}">
-</form>
\ No newline at end of file
+</form>
diff --git a/app/plugins/comments/views/list.html b/app/plugins/comments/views/list.html
index cfb4e58..2a4777d 100644
--- a/app/plugins/comments/views/list.html
+++ b/app/plugins/comments/views/list.html
@@ -1,10 +1,10 @@
-<div class="card panel-info widget comments">
-    <div class="card-header">
-        <span class="fa fa-fw fa-comment"></span>
-        <h3 class="card-title">Comments</h3>
+<div class="card">
+    <div class="card-header bg-secondary">
+        
+        <h class="card-title"><span class="fa fa-fw fa-comment"></span> Comments</h3>
         <span class="label label-primary">{count}</span>
     </div>
-    <div class="card-body">
+    <div class="card-body context-main-bg">
         <ul class="list-group">
             {LOOP}
             <li class="list-group-item">
diff --git a/app/views/nav/usercp.html b/app/views/nav/usercp.html
index a9dd2e2..7bf679f 100644
--- a/app/views/nav/usercp.html
+++ b/app/views/nav/usercp.html
@@ -1,5 +1,5 @@
 <ul class="nav nav-tabs justify-content-center" role="tablist">
     {LOOP}
-    <li class="nav-item"><a href="{url}" class="nav-link">{name}</a></li>
+    <li class="nav-item context-main-bg mx-1"><a href="{url}" class="nav-link context-main">{name}</a></li>
     {/LOOP}
 </ul>
\ No newline at end of file