diff --git a/config/user-monitoring.php b/config/user-monitoring.php
index 158cfc3..dad07cd 100644
--- a/config/user-monitoring.php
+++ b/config/user-monitoring.php
@@ -11,6 +11,11 @@
              */
             'file_path' => 'routes/user-monitoring.php',
         ],
+
+        /*
+         * Enable or disable dark mode for the views.
+         */
+        'dark_mode' => false,
     ],
 
     /*
diff --git a/resources/views/actions-monitoring/index.blade.php b/resources/views/actions-monitoring/index.blade.php
index 704d7f9..284b6f8 100644
--- a/resources/views/actions-monitoring/index.blade.php
+++ b/resources/views/actions-monitoring/index.blade.php
@@ -1,6 +1,6 @@
 @extends('LaravelUserMonitoring::layouts.master')
 
-@section('title', 'Action Monitoring')
+@section('title', 'Actions Monitoring')
 
 @section('content')
     <div class="mt-7 overflow-x-auto">
@@ -65,7 +65,7 @@
                                 @csrf
                                 @method('DELETE')
 
-                                <button class="focus:ring-2 focus:ring-offset-2 focus:ring-red-300 text-sm leading-none text-red-600 py-3 px-5 bg-red-100 rounded hover:bg-red-200 focus:outline-none" type="submit">
+                                <button class="delete-btn focus:ring-2 focus:ring-offset-2 focus:ring-red-300 text-sm leading-none text-red-600 py-3 px-5 bg-red-100 rounded hover:bg-red-200 focus:outline-none" type="submit">
                                     <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">
                                         <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                     </svg>
diff --git a/resources/views/authentications-monitoring/index.blade.php b/resources/views/authentications-monitoring/index.blade.php
index eabca1a..84b47c8 100644
--- a/resources/views/authentications-monitoring/index.blade.php
+++ b/resources/views/authentications-monitoring/index.blade.php
@@ -1,6 +1,6 @@
 @extends('LaravelUserMonitoring::layouts.master')
 
-@section('title', 'Authentication Monitoring')
+@section('title', 'Authentications Monitoring')
 
 @section('content')
     <div class="mt-7 overflow-x-auto">
@@ -58,7 +58,7 @@
                                 @csrf
                                 @method('DELETE')
 
-                                <button class="focus:ring-2 focus:ring-offset-2 focus:ring-red-300 text-sm leading-none text-red-600 py-3 px-5 bg-red-100 rounded hover:bg-red-200 focus:outline-none" type="submit">
+                                <button class="delete-btn focus:ring-2 focus:ring-offset-2 focus:ring-red-300 text-sm leading-none text-red-600 py-3 px-5 bg-red-100 rounded hover:bg-red-200 focus:outline-none" type="submit">
                                     <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">
                                         <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                     </svg>
diff --git a/resources/views/layouts/master.blade.php b/resources/views/layouts/master.blade.php
index bd874a7..71d6d6d 100644
--- a/resources/views/layouts/master.blade.php
+++ b/resources/views/layouts/master.blade.php
@@ -12,47 +12,80 @@
             .checkbox:checked + .check-icon {
                 display: flex;
             }
+
+            /* Dark Mode */
+            body.dark-mode {
+                background-color: #222831;
+            }
+
+            body.dark-mode .title-bar {
+                color: #fff;
+            }
+
+            body.dark-mode .tab-box {
+                background-color: #222831;
+            }
+
+            body.dark-mode .tab-title {
+                color: #fff;
+            }
+
+            body.dark-mode .tab-title:hover {
+                color: #4338ca;
+            }
+
+            body.dark-mode :is(a, p, path) {
+                color: #fff;
+            }
+
+            body.dark-mode .delete-btn {
+                background-color: rgb(234, 56, 56);
+            }
+
+            body.dark-mode .bg-indigo-100 p {
+                color: #000;
+            }
         </style>
     </head>
-    <body>
+    <body @class(['dark-mode' => config('user-monitoring.config.dark_mode', false)])>
         <div class="sm:px-6 w-full">
             <div class="px-4 md:px-10 py-4 md:py-7">
                 <div class="flex items-center justify-between">
-                    <p class="focus:outline-none text-base sm:text-lg md:text-xl lg:text-2xl font-bold leading-normal text-gray-800" tabindex="0">
+                    <p class="focus:outline-none text-base sm:text-lg md:text-xl lg:text-2xl font-bold leading-normal text-gray-800 title-bar" tabindex="0">
                         Laravel User Monitoring 📈
                     </p>
                 </div>
             </div>
-            <div class="bg-white py-4 md:py-7 px-4 md:px-8 xl:px-10">
+            <div class="bg-white py-4 md:py-7 px-4 md:px-8 xl:px-10 tab-box">
                 <div class="sm:flex items-center justify-between">
                     <div class="flex items-center">
                         <a class="rounded-full focus:outline-none focus:ring-2 focus:bg-indigo-50 focus:ring-indigo-800"
                            href="{{ route('user-monitoring.visits-monitoring') }}">
                             <div class="py-2 px-8 text-indigo-700 rounded-full hover:text-indigo-700 hover:bg-indigo-100
-                                {{ request()->routeIs('user-monitoring.visits-monitoring') ? 'bg-indigo-100' : '' }}">
-                                <p>Visit Monitoring</p>
+                                        {{ request()->routeIs('user-monitoring.visits-monitoring') ? 'bg-indigo-100' : '' }}">
+                                <p class="tab-title">Visit Monitoring</p>
                             </div>
                         </a>
                         <a class="rounded-full focus:outline-none focus:ring-2 focus:bg-indigo-50 focus:ring-indigo-800 ml-4 sm:ml-8"
                            href="{{ route('user-monitoring.actions-monitoring') }}">
                             <div class="py-2 px-8 text-indigo-700 rounded-full hover:text-indigo-700 hover:bg-indigo-100
-                                {{ request()->routeIs('user-monitoring.actions-monitoring') ? 'bg-indigo-100' : '' }}">
-                                <p>Action Monitoring</p>
+                                        {{ request()->routeIs('user-monitoring.actions-monitoring') ? 'bg-indigo-100' : '' }}">
+                                <p class="tab-title">Action Monitoring</p>
                             </div>
                         </a>
                         <a class="rounded-full focus:outline-none focus:ring-2 focus:bg-indigo-50 focus:ring-indigo-800 ml-4 sm:ml-8"
                            href="{{ route('user-monitoring.authentications-monitoring') }}">
                             <div class="py-2 px-8 text-indigo-700 rounded-full hover:text-indigo-700 hover:bg-indigo-100
-                                {{ request()->routeIs('user-monitoring.authentications-monitoring') ? 'bg-indigo-100' : '' }}">
-                                <p>Authentication Monitoring</p>
+                                        {{ request()->routeIs('user-monitoring.authentications-monitoring') ? 'bg-indigo-100' : '' }}">
+                                <p class="tab-title">Authentication Monitoring</p>
                             </div>
                         </a>
                     </div>
                     <div>
                         <a href="https://github.com/binafy/laravel-user-monitoring"
                            class="focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600 mt-4 sm:mt-0
-                                    inline-flex items-start justify-start px-6 py-3 bg-indigo-700 hover:bg-indigo-600
-                                    focus:outline-none rounded items-center">
+                                            inline-flex items-start justify-start px-6 py-3 bg-indigo-700 hover:bg-indigo-600
+                                            focus:outline-none rounded items-center">
                             <p class="text-sm font-medium leading-none text-white mr-2">
                                 GitHub
                             </p>
@@ -63,9 +96,11 @@ class="focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600 mt-4 sm:mt-0
                     </div>
                 </div>
 
-                @if(session()->has('message'))
+                @if (session()->has('message'))
                     <div class="flex items-center bg-blue-500 text-white text-sm font-bold px-4 py-3" role="alert">
-                        <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
+                        <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                            <path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/>
+                        </svg>
                         <p>{{ session()->get('message') }}</p>
                     </div>
                 @endif
diff --git a/resources/views/visits-monitoring/index.blade.php b/resources/views/visits-monitoring/index.blade.php
index 8e7fb75..cea1886 100644
--- a/resources/views/visits-monitoring/index.blade.php
+++ b/resources/views/visits-monitoring/index.blade.php
@@ -1,6 +1,6 @@
 @extends('LaravelUserMonitoring::layouts.master')
 
-@section('title', 'Visit Monitoring')
+@section('title', 'Visits Monitoring')
 
 @section('content')
     <div class="mt-7 overflow-x-auto">
@@ -75,7 +75,7 @@
                                 @csrf
                                 @method('DELETE')
 
-                                <button class="focus:ring-2 focus:ring-offset-2 focus:ring-red-300 text-sm leading-none text-red-600 py-3 px-5 bg-red-100 rounded hover:bg-red-200 focus:outline-none" type="submit">
+                                <button class="delete-btn focus:ring-2 focus:ring-offset-2 focus:ring-red-300 text-sm leading-none text-red-600 py-3 px-5 bg-red-100 rounded hover:bg-red-200 focus:outline-none" type="submit">
                                     <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">
                                         <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                     </svg>
diff --git a/src/Providers/LaravelUserMonitoringServiceProvider.php b/src/Providers/LaravelUserMonitoringServiceProvider.php
index a2c8842..33c70e7 100644
--- a/src/Providers/LaravelUserMonitoringServiceProvider.php
+++ b/src/Providers/LaravelUserMonitoringServiceProvider.php
@@ -73,7 +73,7 @@ private function publishMigrations()
     private function publishViews()
     {
         $this->publishes([
-            __DIR__ . '/../../resources/views' => resource_path('views/laravel-user-monitoring'),
+            __DIR__ . '/../../resources/views' => resource_path('views/vendor/LaravelUserMonitoring'),
         ], 'laravel-user-monitoring-views');
     }