diff --git a/app.rb b/app.rb
index 904dd78..e4bea26 100644
--- a/app.rb
+++ b/app.rb
@@ -77,8 +77,7 @@ helpers do
     is_active = nav_link_active?(path, query_params, project_id)
 
     classes = 'nav-link py-1 px-3'
-    classes += ' active bg-dark' if is_active
-    classes += ' link-dark' unless is_active
+    classes += ' active-link' if is_active
 
     classes
   end
diff --git a/app/views/layout.erb b/app/views/layout.erb
index 453b339..eebbf0a 100644
--- a/app/views/layout.erb
+++ b/app/views/layout.erb
@@ -14,7 +14,6 @@
     <div class="row flex-nowrap">
       <% if current_user %>
         <%= partial :'sidebar' %>
-        <%= partial :'projects/_new_project_modal' %>
         <div class="px-md-4 pt-4 mb-3 main-content col-md-9 col-lg-10">
           <%= yield %>
         </div>
diff --git a/app/views/projects/_panel.erb b/app/views/projects/_panel.erb
index c665712..57e2220 100644
--- a/app/views/projects/_panel.erb
+++ b/app/views/projects/_panel.erb
@@ -1,6 +1,6 @@
 <% task_counts = @project.task_status_counts %>
 <% days_passed = (Date.today - @project.created_at.to_date).to_i %>
-<div class="bg-secondary-subtle mb-4 mx-3 p-3 rounded">
+<div class="mb-4 mx-3 p-3 panel rounded">
   <div class="row">
     <% task_stats = [['list-check', 'Total', task_counts[:total]],
                      ['arrow-repeat', 'In Progress', task_counts[:in_progress]],
@@ -8,13 +8,10 @@
                      ['hourglass-split', 'Not Started', task_counts[:not_started]]] %>
     <% task_stats.each do |icon, title, count| %>
       <div class="col-md-3 mb-2">
-        <div class="card bg-light text-center py-3 border-0">
-          <div class="card-body d-flex align-items-center justify-content-center py-1">
-            <i class="bi bi-<%= icon %> fs-4 me-2"></i>
-            <span class="card-title mb-1"><%= title %></span>
-          </div>
-          <div class="card-footer py-1 border-0 bg-transparent">
-            <p class="card-text fs-4"><%= count %></p>
+        <div class="card panel-card text-center py-3 border-0">
+          <div class="card-body fs-6 d-flex align-items-center justify-content-center py-1">
+            <i class="bi bi-<%= icon %> me-2"></i>
+            <span class=""><%= title %>: <%= count %></span>
           </div>
         </div>
       </div>
diff --git a/app/views/projects/index.erb b/app/views/projects/index.erb
index 395abd4..fc9717a 100644
--- a/app/views/projects/index.erb
+++ b/app/views/projects/index.erb
@@ -28,7 +28,7 @@
               <div class="card shadow-sm" style="min-height: 177px;">
                 <div class="d-flex flex-column justify-content-between h-100">
                   <div>
-                    <div class="bg-light rounded" style="height: 100px;"></div>
+                    <div class="rounded" style="height: 100px;"></div>
                     <div class="card-body p-0">
                       <div class="card-footer p-0">
                         <div class="progress rounded-0" style="height: 2px;">
@@ -36,7 +36,7 @@
                         </div>
                       </div>
                       <h5 class="card-title px-3 pt-3 pb-0 mb-1"><%= project.name.upcase %></h5>
-                      <div class="card-text px-3 small text-black-50 opacity-75">
+                      <div class="card-text px-3 small opacity-50">
                         <%= project.task_status_counts[:total] %> Tasks
                         <% if project.task_status_counts[:in_progress] > 0 %>
                           , <i class="bi bi-circle-fill text-success me-1" style="font-size: 0.5em; position: relative; top: -0.3em;"></i> <%= project.task_status_counts[:in_progress] %> in progress
@@ -51,9 +51,9 @@
         <% end %>
         <div class="col-md-4 mb-3">
           <a class="text-decoration-none project-card" href="#" data-bs-toggle="modal" data-bs-target="#newProjectModal">
-            <div class="card shadow-sm border-light p-0" style="min-height: 177px;">
-              <div class="card-body bg-light rounded px-0 p-0 text-center">
-                <i class="bi bi-plus" style="font-size: 72px; line-height: 175px; color: #eee"></i>
+            <div class="card shadow-sm p-0 opacity-25" style="min-height: 177px;">
+              <div class="card-body rounded px-0 p-0 text-center">
+                <i class="bi bi-plus opacity-25" style="font-size: 72px; line-height: 175px;"></i>
               </div>
             </div>
           </a>
diff --git a/app/views/projects/show.erb b/app/views/projects/show.erb
index 8cc41df..51c4113 100644
--- a/app/views/projects/show.erb
+++ b/app/views/projects/show.erb
@@ -21,7 +21,7 @@
   </div>
 </h2>
 <% unless @project.description.blank? %>
-  <div class="bg-primary-subtle mb-4 mx-3 rounded d-flex align-items-center">
+  <div class="mb-4 mx-3 rounded d-flex align-items-center">
     <i class="bi bi-info-circle-fill fs-1 text-primary ms-3"></i>
     <div class="px-4 py-3">
       <%= @project.description %>
diff --git a/app/views/sidebar.erb b/app/views/sidebar.erb
index 645f076..6ac5308 100644
--- a/app/views/sidebar.erb
+++ b/app/views/sidebar.erb
@@ -1,7 +1,10 @@
-<div class="d-flex flex-column flex-shrink-0 p-3 vh-100 sidebar fixed-sidebar" style="width: 300px;">  <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
-    <span class="fs-4">tu|du|di</span>
-  </a>
-  <hr>
+<div class="d-flex flex-column flex-shrink-0 p-3 vh-100 sidebar fixed-sidebar" style="width: 300px;">
+  <div class="d-flex justify-content-center mb-3 mb-md-0">
+    <a href="/" class="d-flex justify-content-center align-items-center mb-3 mb-md-0 link-dark text-decoration-none">
+      <span class="fs-4 fw-bold">tududi</span>
+    </a>
+  </div>
+  <div class="border-top my-3"></div>
   <ul class="nav nav-pills flex-column">
     <li>
       <a href="/tasks?type=today" class="<%= nav_link('/tasks', 'type' => 'today') %>">
@@ -19,12 +22,12 @@
       </a>
     </li>
     <li>
-      <a href="/tasks?type=upcoming" class="<%= nav_link('/tasks', 'due_date' => 'upcoming') %>">
+      <a href="/tasks?type=upcoming" class="<%= nav_link('/tasks', 'type' => 'upcoming') %>">
         <i class="bi bi-calendar3 me-1"></i> Upcoming
       </a>
     </li>
     <li>
-      <a href="/tasks?type=someday" class="<%= nav_link('/tasks', 'due_date' => 'never') %>">
+      <a href="/tasks?type=someday" class="<%= nav_link('/tasks', 'type' => 'someday') %>">
         <i class="bi bi-moon-stars-fill me-1"></i> Someday
       </a>
     </li>
@@ -79,8 +82,10 @@
       <li><a class="dropdown-item" href="/logout">Sign out</a></li>
     </ul>
   </div>
+  <button id="darkModeToggle" class="btn btn-link link-dark">
+    <i id="darkModeIcon" class="bi bi-moon"></i>
+  </button>
 </div>
 <%= partial :'projects/_new_project_modal' %>
 <%= partial :'areas/_new_area_modal' %>
 <%= partial :'notes/_new_note_modal', locals: {note: Note.new, context: 'sidebar'} %>
-
diff --git a/app/views/tasks/_task.erb b/app/views/tasks/_task.erb
index 8a28714..8e659ac 100644
--- a/app/views/tasks/_task.erb
+++ b/app/views/tasks/_task.erb
@@ -1,4 +1,4 @@
-<div class="border-0 rounded bg-white shadow-sm mb-1 px-2 py-2 d-flex align-items-center task-item <%= 'opacity-50' if task.done? %>" data-task-id="<%= task.id %>">
+<div class="border-0 rounded shadow-sm mb-1 px-2 py-2 d-flex align-items-center task-item <%= 'opacity-50' if task.done? %>" data-task-id="<%= task.id %>">
   <div class="row flex-grow-1 align-items-top">
     <div class="col-md-6">
       <span onclick="toggleTaskCompletion(event, <%= task.id %>)" class="toggle-completion">
@@ -17,7 +17,7 @@
     </div>
     <div class="col-md-3 text-end">
       <% if task.project && params[:id].blank? %>
-        <a href="/project/<%= task.project.id %>" class="badge border text-decoration-none link-dark bg-light">
+        <a href="/project/<%= task.project.id %>" class="badge border text-decoration-none link-dark">
           <%= task.project.name %>
         </a>
       <% end %>
diff --git a/public/css/app.css b/public/css/app.css
index 9dbd704..6a5fa2f 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -100,12 +100,42 @@ h6 {
   background: #ececec;
 }
 
+.nav-link {
+  color: #000; 
+}
+
+.nav-link.active-link {
+  background-color: #343a40;
+  color: #fff;
+}
+
+.dark-mode .nav-link {
+  color: #fff;
+}
+
+.dark-mode .nav-link.active-link {
+  background-color: var(--bs-dark);
+}
+
 /* tasks, notes */
 
+.task-item {
+  background: var(--bs-white);
+}
+
+.dark-mode .task-item,
+.dark-mode .note-item {
+  background: var(--bs-gray-dark);
+}
+
 .task-item:hover, .note-item:hover {
   background: #fafafa !important;
 }
 
+.dark-mode .task-item:hover, .dark-mode .note-item:hover {
+  background: var(--bs-black) !important;
+}
+
 /* task form */
 
 .task-name-input::placeholder {
@@ -127,4 +157,92 @@ h6 {
 /* project card */
 a.project-card .card:hover {
   border: 1px solid #777 !important;
-}
\ No newline at end of file
+}
+
+/* dark mode */
+.dark-mode {
+  background-color:  var(--bs-dark);
+  color: var(--bs-light);
+}
+
+.dark-mode .sidebar {
+  background-color: var(--bs-black);
+}
+
+.sidebar .border-top {
+  border-color: #ddd !important;
+}
+
+.dark-mode .sidebar .border-top {
+  border-color: #333 !important;
+}
+
+.dark-mode h1,
+.dark-mode h2,
+.dark-mode h3,
+.dark-mode h4,
+.dark-mode h5,
+.dark-mode h6 {
+  color: var(--bs-light) !important;
+}
+
+.dark-mode .modal .modal-dialog .modal-content {
+  background-color: var(--bs-gray-dark);
+  color: var(--bs-light);
+}
+
+.dark-mode .modal-header {
+  border-color: var(--bs-black);
+}
+
+.dark-mode input, 
+.dark-mode tags, 
+.dark-mode select,
+.dark-mode textarea {
+  background-color: var(--bs-dark);
+  color: var(--bs-light);
+  border-color: var(--bs-black);
+}
+
+.dark-mode input:focus,
+.dark-mode textarea:focus {
+  background-color: var(--bs-black);
+  color: var(--bs-light);
+}
+
+.dark-mode tag {
+  background-color: var(--bs-gray-dark) !important;
+  color: var(--bs-light) !important;
+}
+
+.dark-mode .project-card .card {
+  background-color: var(--bs-gray-dark) !important;
+  color: var(--bs-light) !important;
+}
+
+.dark-mode .progress {
+  background-color: var(--bs-dark);
+}
+
+.panel-card {
+  background-color: var(--bs-white) !important;
+  color: var(--bs-dark) !important;
+}
+
+.dark-mode .panel-card {
+  background-color: var(--bs-gray-dark) !important;
+  color: var(--bs-light) !important;
+}
+
+.panel {
+  background-color: var(--bs-light);
+}
+
+.dark-mode .panel {
+  background-color: var(--bs-black);
+}
+
+/* .dark-mode .panel .progress {
+  background-color: var(--bs-black);
+} */
+
diff --git a/public/js/app.js b/public/js/app.js
index 9376d0e..d85738d 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -1,6 +1,8 @@
 document.addEventListener("DOMContentLoaded", function () {
   attachEventListeners();
   initializeTagifyOnNotes();
+  initializeDarkModeToggle();
+  setInitialDarkModeState();
 });
 
 function attachEventListeners() {
@@ -12,6 +14,46 @@ function attachEventListeners() {
   attachNoteClickListeners();
 }
 
+function initializeDarkModeToggle() {
+  const darkModeToggle = document.querySelector('#darkModeToggle');
+  const darkModeIcon = document.querySelector('#darkModeIcon');
+  const isDarkMode = localStorage.getItem('darkMode') === 'true';
+
+  updateDarkMode(isDarkMode);
+
+  darkModeToggle.addEventListener('click', function () {
+    const isDarkMode = localStorage.getItem('darkMode') === 'true';
+    updateDarkMode(!isDarkMode);
+  });
+}
+
+function updateDarkMode(enabled) {
+  document.body.classList.toggle('dark-mode', enabled);
+  localStorage.setItem('darkMode', enabled);
+  darkModeIcon.classList.toggle('bi-moon', !enabled);
+  darkModeIcon.classList.toggle('bi-sun', enabled);
+  // Update link colors and other necessary elements
+  updateLinkColors(enabled);
+}
+
+function updateLinkColors(darkModeEnabled) {
+  const links = document.querySelectorAll('.link-dark, .link-light');
+  links.forEach(link => {
+    link.classList.toggle('link-dark', !darkModeEnabled);
+    link.classList.toggle('link-light', darkModeEnabled);
+  });
+}
+
+function setInitialDarkModeState() {
+  const isDarkMode = localStorage.getItem('darkMode') === 'true';
+  const darkModeToggle = document.querySelector('#darkModeToggle');
+  if (darkModeToggle) {
+    darkModeToggle.checked = isDarkMode;
+    document.body.classList.toggle('dark-mode', isDarkMode);
+    updateLinkColors(isDarkMode);
+  }
+}
+
 function initializeTagifyOnNotes() {
   document.querySelectorAll('[id^="note_tags_new_"]').forEach(function(element) {
     new Tagify(element);