diff --git a/src/content_detail_page/empty_history.html b/src/content_detail_page/empty_history.html
index 4f159b6e7c..02b2e7bcb2 100644
--- a/src/content_detail_page/empty_history.html
+++ b/src/content_detail_page/empty_history.html
@@ -20,7 +20,7 @@
       <div class="text-center">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 mx-auto text-gray-500 dark:text-neutral-500"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
         <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-neutral-200">History is Empty</h3>
-        <p class="mt-1 text-sm text-gray-500 dark:text-neutral-400c">This section will display contents once they have been engaged with or completed.</p>
+        <p class="mt-1 text-sm text-gray-500 dark:text-neutral-400">This section will display contents once they have been engaged with or completed.</p>
       </div>
     </div>
   </main>
diff --git a/src/content_detail_page/includes/comment_section.html b/src/content_detail_page/includes/comment_section.html
index 88db92e308..ad93610e89 100644
--- a/src/content_detail_page/includes/comment_section.html
+++ b/src/content_detail_page/includes/comment_section.html
@@ -1,11 +1,11 @@
 <!-- Comments-->
 <section aria-labelledby="notes-title" class="mt-6">
-  <div class="bg-white sm:overflow-hidden sm:rounded-lg">
+  <div class="bg-white sm:overflow-hidden sm:rounded-lg dark:bg-neutral-800">
     <div class="">
       <div class="px-4 sm:px-6 lg:px-8">
-        <h2 id="notes-title" class="text-base lg:text-lg font-medium text-gray-900">Comments</h2>
+        <h2 id="notes-title" class="text-base lg:text-lg font-medium text-gray-900 dark:text-neutral-200">Comments</h2>
       </div>
-      <div class="px-4 py-6 sm:px-6 lg:px-8 border-t border-gray-200 mt-4">
+      <div class="px-4 py-6 sm:px-6 lg:px-8 border-t border-gray-200 mt-4 dark:border-neutral-700">
         <ul role="list" class="space-y-8">
           {% for comment in comments %}
             <li>
@@ -15,29 +15,29 @@ <h2 id="notes-title" class="text-base lg:text-lg font-medium text-gray-900">Comm
                 </div>
                 <div>
                   <div class="text-sm flex space-x-2 items-center">
-                    <a href="#" class="font-medium text-gray-900">{{ comment.author }}</a>
-                    <span class="font-medium text-gray-500">4d ago</span>
+                    <a href="#" class="font-medium text-gray-900 dark:text-neutral-200">{{ comment.author }}</a>
+                    <span class="font-medium text-gray-500 dark:text-neutral-400">4d ago</span>
                     {% if comment.warning %}
-                      <span class="inline-flex items-center rounded-md bg-yellow-50 px-1.5 py-0.5 text-xs font-medium text-yellow-800 ring-1 ring-inset ring-yellow-600/20">Pending Moderation</span>
+                      <span class="inline-flex items-center rounded-md bg-yellow-50 px-1.5 py-0.5 text-xs font-medium text-yellow-800 ring-1 ring-inset ring-yellow-600/20 dark:bg-yellow-500/10 dark:text-yellow-500">Pending Moderation</span>
                     {% endif %}
                   </div>
-                  <div class="mt-1 text-sm text-gray-700">
+                  <div class="mt-1 text-sm text-gray-700 dark:text-neutral-300">
                     <p>{{ comment.text }}</p>
                   </div>
                   <div class="flex mt-2 truncate text-sm">
-                    <span class="flex items-center hover:cursor-pointer" :class="{ 'text-emerald-600':'{{comment.upvoted}}', 'text-gray-600': !'{{comment.downvoted}}'}">
+                    <span class="flex items-center hover:cursor-pointer" :class="{ 'text-emerald-600 dark:text-emerald-400':'{{comment.upvoted}}', 'text-gray-600 dark:text-neutral-200': !'{{comment.downvoted}}'}">
                       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V3a.75.75 0 0 1 .75-.75A2.25 2.25 0 0 1 16.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48a4.53 4.53 0 0 1-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665 8.97 8.97 0 0 0 .654 3.375z"/></svg>
                       <span>{{ comment.upvotes }}</span>
                     </span>
-                    <span class="mx-2 text-gray-400" aria-hidden="true">·</span>
-                    <span class="flex items-center hover:cursor-pointer" :class="{ 'text-red-600':!'{{comment.downvoted}}', 'text-gray-600': '{{comment.upvoted}}'}">
+                    <span class="mx-2 text-gray-400 dark:text-neutral-500" aria-hidden="true">·</span>
+                    <span class="flex items-center hover:cursor-pointer" :class="{ 'text-red-600 dark:text-red-400':!'{{comment.downvoted}}', 'text-gray-600 dark:text-neutral-200': '{{comment.upvoted}}'}">
                       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 0 1-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 0 0 .303-.54m.023-8.25H16.48a4.5 4.5 0 0 1-1.423-.23l-3.114-1.04a4.5 4.5 0 0 0-1.423-.23H6.504c-.618 0-1.217.247-1.605.729A11.95 11.95 0 0 0 2.25 12c0 .434.023.863.068 1.285C2.427 14.306 3.346 15 4.372 15h3.126c.618 0 .991.724.725 1.282A7.471 7.471 0 0 0 7.5 19.5a2.25 2.25 0 0 0 2.25 2.25.75.75 0 0 0 .75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 0 0 2.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384"/></svg>
                       <span>{{ comment.downvotes }}</span>
                     </span>
                   </div>
                   {% if comment.replies %}
                     <div class="mt-4 text-sm" x-data="{ showReply: false }">
-                      <span class="flex items-center space-x-2 font-medium text-emerald-700 hover:cursor-pointer" @click="showReply = !showReply">
+                      <span class="flex items-center space-x-2 font-medium text-emerald-700 hover:cursor-pointer dark:text-emerald-400" @click="showReply = !showReply">
                         <svg class="w-3 h-3 mr-1 transition-transform duration-300 transform" fill="currentColor" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24"
                             :class="{ '-rotate-90': !showReply, 'rotate-0': showReply }">
                             <path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z"/>
@@ -54,19 +54,19 @@ <h2 id="notes-title" class="text-base lg:text-lg font-medium text-gray-900">Comm
                               </div>
                               <div>
                                 <div class="text-sm flex space-x-2 items-center">
-                                  <a href="#" class="font-medium text-gray-900">{{ reply.author }}</a>
-                                  <span class="font-medium text-gray-500">4d ago</span>
+                                  <a href="#" class="font-medium text-gray-900 dark:text-neutral-200">{{ reply.author }}</a>
+                                  <span class="font-medium text-gray-500 dark:text-neutral-400">4d ago</span>
                                 </div>
-                                <div class="mt-1 text-sm text-gray-700">
+                                <div class="mt-1 text-sm text-gray-700 dark:text-neutral-300">
                                   <p>{{ reply.text }}</p>
                                 </div>
                                 <div class="flex mt-2 truncate text-sm">
-                                  <span class="flex text-gray-600 items-center hover:cursor-pointer">
+                                  <span class="flex text-gray-600 items-center hover:cursor-pointer dark:text-neutral-400">
                                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V3a.75.75 0 0 1 .75-.75A2.25 2.25 0 0 1 16.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48a4.53 4.53 0 0 1-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665 8.97 8.97 0 0 0 .654 3.375z"/></svg>
                                     <span>{{ reply.upvotes }}</span>
                                   </span>
-                                  <span class="mx-2 text-gray-400" aria-hidden="true">·</span>
-                                  <span class="flex text-gray-600 items-center hover:cursor-pointer">
+                                  <span class="mx-2 text-gray-400 dark:text-neutral-500" aria-hidden="true">·</span>
+                                  <span class="flex text-gray-600 items-center hover:cursor-pointer dark:text-neutral-400">
                                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 0 1-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 0 0 .303-.54m.023-8.25H16.48a4.5 4.5 0 0 1-1.423-.23l-3.114-1.04a4.5 4.5 0 0 0-1.423-.23H6.504c-.618 0-1.217.247-1.605.729A11.95 11.95 0 0 0 2.25 12c0 .434.023.863.068 1.285C2.427 14.306 3.346 15 4.372 15h3.126c.618 0 .991.724.725 1.282A7.471 7.471 0 0 0 7.5 19.5a2.25 2.25 0 0 0 2.25 2.25.75.75 0 0 0 .75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 0 0 2.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384"/></svg>
                                     <span>{{ reply.downvotes }}</span>
                                   </span>
@@ -85,7 +85,7 @@ <h2 id="notes-title" class="text-base lg:text-lg font-medium text-gray-900">Comm
         </ul>
       </div>
     </div>
-    <div class="bg-gray-50 px-4 py-6 sm:px-6 lg:px-8">
+    <div class="bg-gray-50 px-4 py-6 sm:px-6 lg:px-8 dark:bg-neutral-800">
       <div class="flex space-x-3">
         <div class="flex-shrink-0">
           <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="">
@@ -94,10 +94,10 @@ <h2 id="notes-title" class="text-base lg:text-lg font-medium text-gray-900">Comm
           <form action="#">
             <div>
               <label for="comment" class="sr-only">About</label>
-              <textarea id="comment" name="comment" rows="3" class="block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6" placeholder="Add a note"></textarea>
+              <textarea id="comment" name="comment" rows="3" class="block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6 dark:bg-neutral-800 dark:ring-neutral-600 dark:placeholder:text-neutral-400 dark:text-neutral-200" placeholder="Add a note"></textarea>
             </div>
             <div class="mt-3 flex items-center justify-end">           
-              <button type="submit" class="inline-flex items-center justify-center rounded-md bg-emerald-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600">Comment</button>
+              <button type="submit" class="inline-flex items-center justify-center rounded-md bg-emerald-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-500">Comment</button>
             </div>
           </form>
         </div>
diff --git a/src/content_detail_page/includes/content_heading.html b/src/content_detail_page/includes/content_heading.html
index e24f335c21..f41e286ccd 100644
--- a/src/content_detail_page/includes/content_heading.html
+++ b/src/content_detail_page/includes/content_heading.html
@@ -1,18 +1,18 @@
-<div x-data="{ is_completed: false}" class="flex flex-wrap gap-4 items-center justify-between pt-4 px-4 lg:px-6">
-  <h1 class="text-lg lg:text-2xl font-bold text-gray-900">What is Markup language?</h1>
+<div x-data="{ is_completed: false}" class="flex flex-wrap gap-4 items-center justify-between pt-4 px-4 lg:px-6 dark:bg-neutral-800">
+  <h1 class="text-lg lg:text-2xl font-bold text-gray-900 dark:text-neutral-200">What is Markup language?</h1>
   <div class="flex items-center space-x-2">
     <a class="cursor-pointer" title="Download" x-show="is_renderable" x-cloak>
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-6 h-6 text-emerald-600" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-6 h-6 text-emerald-600 dark:text-emerald-500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M19 21H5"/>
       </svg>                
     </a>
     <a class="cursor-pointer" x-on:click="toggleSVG = !toggleSVG" title="Bookmark" x-show="!isBookmarked" x-cloak>
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-emerald-600">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-emerald-600 dark:text-emerald-500">
         <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
       </svg>  
     </a>
     <a class="cursor-pointer" x-on:click="isBookmarked = false" title="Remove Bookmark" x-show="isBookmarked" x-cloak> 
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-emerald-600">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-emerald-600 dark:text-emerald-500">
         <path stroke-linecap="round" stroke-linejoin="round" d="M3 3l1.664 1.664M21 21l-1.5-1.5m-5.485-1.242L12 17.25 4.5 21V8.742m.164-4.078a2.15 2.15 0 011.743-1.342 48.507 48.507 0 0111.186 0c1.1.128 1.907 1.077 1.907 2.185V19.5M4.664 4.664L19.5 19.5" />
       </svg>                
     </a>
@@ -29,13 +29,13 @@ <h1 class="text-lg lg:text-2xl font-bold text-gray-900">What is Markup language?
       </svg>
     </button>
     <div class="hidden md:flex space-x-3 ml-4">
-      <a href="{{pagination.previousPageHref|url}}" class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-emerald-600 ring-1 ring-inset ring-emerald-600 hover:bg-gray-50 focus-visible:outline-offset-0">
+      <a href="{{pagination.previousPageHref|url}}" class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-emerald-600 ring-1 ring-inset ring-emerald-600 hover:bg-gray-50 focus-visible:outline-offset-0 dark:bg-neutral-800 dark:text-neutral-200 dark:ring-neutral-600 dark:hover:bg-neutral-600">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
           <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
         </svg>
         Previous
       </a>
-      <a href="{{ pagination.nextPageHref|url }}" class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-emerald-600 ring-1 ring-inset ring-emerald-600 hover:bg-gray-50 focus-visible:outline-offset-0">
+      <a href="{{ pagination.nextPageHref|url }}" class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-emerald-600 ring-1 ring-inset ring-emerald-600 hover:bg-gray-50 focus-visible:outline-offset-0 dark:bg-neutral-800 dark:text-neutral-200 dark:ring-neutral-600 dark:hover:bg-neutral-600">
         Next
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
           <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
@@ -59,25 +59,25 @@ <h1 class="text-lg lg:text-2xl font-bold text-gray-900">What is Markup language?
 </button>
 <div class="flex justify-end" x-show="!toggleSVG" x-cloak>
   <div class="absolute z-10">
-    <input id="combobox" type="text" class="w-full rounded-md border-0 bg-white py-1.5 pl-3 pr-12 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600 text-sm leading-6" role="combobox" aria-controls="options" aria-expanded="false" placeholder="Search folder...">
-    <ul class="mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-sm" id="options" role="listbox">
+    <input id="combobox" type="text" class="w-full rounded-md border-0 bg-white py-1.5 pl-3 pr-12 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600 text-sm leading-6 dark:bg-neutral-900 dark:text-neutral-200 dark:ring-neutral-700 dark:placeholder:text-neutral-500" role="combobox" aria-controls="options" aria-expanded="false" placeholder="Search folder...">
+    <ul class="mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-sm dark:bg-neutral-900 dark:ring-white/10" id="options" role="listbox">
       {% for _ in range(3) %}
-        <li x-on:click="isBookmarked = true; toggleSVG=true" class="relative cursor-pointer select-none py-2 pl-8 pr-4 text-gray-900" id="option-0" role="option" tabindex="-1">
-          <!-- Selected: "font-semibold" -->
+        <li x-on:click="isBookmarked = true; toggleSVG=true" class="relative cursor-pointer select-none py-2 pl-8 pr-4 text-gray-900 dark:text-neutral-200 dark:hover:bg-neutral-700" id="option-0" role="option" tabindex="-1">
+        <!-- Selected: "font-semibold" -->
           <span class="block truncate">Folder</span>
-          <span class="absolute inset-y-0 left-0 flex items-center pl-1.5 text-gray-400">
+          <span class="absolute inset-y-0 left-0 flex items-center pl-1.5 text-gray-400 dark:text-neutral-500">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
               <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
             </svg>          
           </span>
         </li>
       {% endfor %}   
-      <div class="flex items-center space-x-2 border-t py-3 mr-2">
+      <div class="flex items-center space-x-2 border-t py-3 mr-2 dark:border-neutral-700">
         <label for="folder" class="sr-only">Create Folder</label>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-gray-400">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-gray-400 dark:text-neutral-500">
           <path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
         </svg>          
-        <input name="folder" id="folder" class="block w-full rounded-md border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 text-sm leading-6" placeholder="Add Folder">
+        <input name="folder" id="folder" class="block w-full rounded-md border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 text-sm leading-6 dark:bg-neutral-800 dark:text-neutral-200 dark:ring-neutral-700 dark:placeholder:text-neutral-500" placeholder="Add Folder">
       </div>  
     </ul>
   </div>
diff --git a/src/content_detail_page/includes/doubt_button.html b/src/content_detail_page/includes/doubt_button.html
index 4e4c0c06af..d668648887 100644
--- a/src/content_detail_page/includes/doubt_button.html
+++ b/src/content_detail_page/includes/doubt_button.html
@@ -1,5 +1,5 @@
 <div class="mt-6 flex justify-end ">
-    <a href="#" class="flex gap-2 text-emerald-700 text-bold text-sm cursor-pointer font-medium hover:underline">
+    <a href="#" class="flex gap-2 text-emerald-700 text-bold text-sm cursor-pointer font-medium hover:underline dark:text-emerald-400">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="15" height="15" stroke-width="1.5" stroke="currentColor" class="size-6">
             <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"></path>
         </svg>
diff --git a/src/content_detail_page/includes/navigate_content.html b/src/content_detail_page/includes/navigate_content.html
index fd44ca549c..662d2763af 100644
--- a/src/content_detail_page/includes/navigate_content.html
+++ b/src/content_detail_page/includes/navigate_content.html
@@ -1,14 +1,14 @@
 {% include "./viewer_header.html" %}
-<nav class="h-16 fixed bottom-0 left-0 w-full lg:relative lg:bottom-auto lg:border-b lg:flex items-center justify-between border-gray-200 bg-white px-4 py-3 ">
+<nav class="h-16 fixed bottom-0 left-0 w-full lg:relative lg:bottom-auto lg:border-b lg:flex items-center justify-between border-gray-200 bg-white px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800">
 
   <div class="md:hidden flex flex-1 justify-between sm:justify-end">
-    <a href="{{pagination.previousPageHref|url}}" class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-emerald-600 ring-1 ring-inset ring-emerald-600 hover:bg-gray-50 focus-visible:outline-offset-0">
+    <a href="{{pagination.previousPageHref|url}}" class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-emerald-600 ring-1 ring-inset ring-emerald-600 hover:bg-gray-50 focus-visible:outline-offset-0 dark:bg-neutral-800 dark:text-emerald-500 dark:ring-emerald-500/30 dark:hover:bg-neutral-700">
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
         <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
       </svg>
       Previous
     </a>
-    <a href="{{ pagination.nextPageHref|url }}" class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-emerald-600 ring-1 ring-inset ring-emerald-600 hover:bg-gray-50 focus-visible:outline-offset-0">
+    <a href="{{ pagination.nextPageHref|url }}" class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-emerald-600 ring-1 ring-inset ring-emerald-600 hover:bg-gray-50 focus-visible:outline-offset-0 dark:bg-neutral-800 dark:text-emerald-500 dark:ring-emerald-500/30 dark:hover:bg-neutral-700">
       Next
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
         <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
diff --git a/src/content_detail_page/notes.html b/src/content_detail_page/notes.html
index 3efedaeab2..2172efda9a 100644
--- a/src/content_detail_page/notes.html
+++ b/src/content_detail_page/notes.html
@@ -12,14 +12,14 @@
 <div x-data="contents">
 	{% include "./includes/mobile_sidebar.html" %}  
 	{% include "./includes/desktop_sidebar.html" %}  
-	<main class="lg:pl-96">
+	<main class="lg:pl-96 dark:bg-neutral-800">
 		{% include "./includes/navigate_content.html" %}
-    <div class="sticky top-28 xl:top-16 z-30 bg-white p-2 shadow"  x-data="{toggleSVG : true, isBookmarked:false, is_renderable:false}">
+    <div class="sticky top-28 xl:top-16 z-30 bg-white p-2 shadow dark:bg-neutral-800 dark:border-b dark:border-neutral-700"  x-data="{toggleSVG : true, isBookmarked:false, is_renderable:false}">
       {% include "./includes/content_heading.html" %}
     </div>
     <div class="lg:px-8">
       <div>
-        <div class="mt-6 prose prose-slate px-4 sm:px-6 lg:px-0 lg:prose-md max-w-none dark:prose-invert">
+        <div class="mt-6 prose prose-neutral px-4 sm:px-6 lg:px-0 lg:prose-md max-w-none dark:prose-invert dark:bg-neutral-800">
           {{ content.body|safe }}
           <h4><strong>Mentor Links </strong></h4>
           <p>Before coming to the session, be ready with specific doubts/issues you are facing with regards to the preparation.</p>