diff --git a/resources/views/livewire/comment.blade.php b/resources/views/livewire/comment.blade.php
index fccc75d..876286a 100644
--- a/resources/views/livewire/comment.blade.php
+++ b/resources/views/livewire/comment.blade.php
@@ -5,7 +5,7 @@
         </div>
         <div class="flex-grow">
             <div>
-                <a href="#" class="font-medium text-gray-900">{{ $comment->user->name }}</a>
+                <p class="font-medium text-gray-900 dark:text-gray-100">{{ $comment->user->name }}</p>
             </div>
             <div class="mt-1 flex-grow w-full">
                 @if ($isEditing)
@@ -13,7 +13,7 @@
                         <div>
                             <label for="comment" class="sr-only">Comment body</label>
                             <textarea id="comment" name="comment" rows="3"
-                                      class="shadow-sm block w-full focus:ring-rose-500 focus:border-rose-500 border-gray-300 rounded-md
+                                      class="bg-white dark:bg-neutral-700 shadow-sm block w-full focus:ring-rose-500 focus:border-rose-500 border-gray-300 dark:border-gray-400/40 text-gray-900 dark:text-gray-200 placeholder:text-gray-400 rounded-md
                                         @error('editState.body') border-red-500 @enderror"
                                       placeholder="Write something" wire:model.defer="editState.body"></textarea>
                             @error('editState.body')
@@ -28,24 +28,22 @@
                         </div>
                     </form>
                 @else
-                    <p class="text-gray-700">{!! $comment->presenter()->markdownBody() !!}</p>
+                    <div class="text-gray-700 dark:text-gray-200">{!! $comment->presenter()->markdownBody() !!}</div>
                 @endif
             </div>
             <div class="mt-2 space-x-2">
-                <span class="text-gray-500 font-medium">
+                <span class="text-gray-500 dark:text-gray-300 font-medium">
                     {{ $comment->presenter()->relativeCreatedAt() }}
                 </span>
                 @auth
-                    {{--@if ($comment->hasParent())--}}
                     @if ($comment->depth() < 2)
-                        <button wire:click="$toggle('isReplying')" type="button" class="text-gray-900 font-medium">
+                        <button wire:click="$toggle('isReplying')" type="button" class="text-gray-900 dark:text-gray-100 font-medium">
                             Reply
                         </button>
                     @endif
-                    {{--@endif--}}
 
                     @can ('update', $comment)
-                        <button wire:click="$toggle('isEditing')" type="button" class="text-gray-900 font-medium">
+                        <button wire:click="$toggle('isEditing')" type="button" class="text-gray-900 dark:text-gray-100 font-medium">
                             Edit
                         </button>
                     @endcan
@@ -60,7 +58,7 @@
                         }"
                             @click="confirmCommentDeletion"
                             type="button"
-                            class="text-gray-900 font-medium"
+                            class="text-gray-900 dark:text-gray-100 font-medium"
                         >
                             Delete
                         </button>
@@ -76,7 +74,7 @@
                 <div>
                     <label for="comment" class="sr-only">Reply body</label>
                     <textarea id="comment" name="comment" rows="3"
-                              class="shadow-sm block w-full focus:ring-rose-500 focus:border-rose-500 border-gray-300 rounded-md
+                              class="bg-white dark:bg-neutral-700 shadow-sm block w-full focus:ring-rose-500 focus:border-rose-500 border-gray-300 dark:border-gray-400/40 text-gray-900 dark:text-gray-200 placeholder:text-gray-400 rounded-md
                                         @error('replyState.body') border-red-500 @enderror"
                               placeholder="Write something" wire:model.defer="replyState.body"></textarea>
                     @error('replyState.body')
diff --git a/resources/views/livewire/comments.blade.php b/resources/views/livewire/comments.blade.php
index 2aa0d26..7005fc8 100644
--- a/resources/views/livewire/comments.blade.php
+++ b/resources/views/livewire/comments.blade.php
@@ -1,8 +1,8 @@
 <section>
-    <div class="bg-white shadow sm:rounded-lg sm:overflow-hidden">
-        <div class="divide-y divide-gray-200">
+    <div class="bg-white dark:bg-neutral-800 shadow sm:rounded-lg sm:overflow-hidden">
+        <div class="divide-y divide-gray-200 dark:divide-gray-400/40">
             <div class="px-4 py-5 sm:px-6">
-                <h2 class="text-lg font-medium text-gray-900">Comments</h2>
+                <h2 class="text-lg font-medium text-gray-900 dark:text-gray-200">Comments</h2>
             </div>
             <div class="px-4 py-6 sm:px-6">
                 <div class="space-y-8">
@@ -12,12 +12,12 @@
                         @endforeach
                         {{ $comments->links() }}
                     @else
-                        <p>No comments yet.</p>
+                        <p class="text-gray-900 dark:text-gray-200">No comments yet.</p>
                     @endif
                 </div>
             </div>
         </div>
-        <div class="bg-gray-50 px-4 py-6 sm:px-6">
+        <div class="bg-gray-50 dark:bg-neutral-800 px-4 py-6 sm:px-6">
             @auth
                 <div class="flex">
                 <div class="flex-shrink-0 mr-4">
@@ -28,7 +28,7 @@
                         <div>
                             <label for="comment" class="sr-only">Comment body</label>
                             <textarea id="comment" name="comment" rows="3"
-                                      class="shadow-sm block w-full focus:ring-rose-500 focus:border-rose-500 border-gray-300 rounded-md
+                                      class="bg-white dark:bg-neutral-700 shadow-sm block w-full focus:ring-rose-500 focus:border-rose-500 border-gray-300 dark:border-gray-400/40 text-gray-900 dark:text-gray-200 placeholder:text-gray-400 rounded-md
                                         @error('newCommentState.body') border-red-500 @enderror"
                                       placeholder="Write something" wire:model.defer="newCommentState.body"></textarea>
                             @error('newCommentState.body')
@@ -37,7 +37,7 @@
                         </div>
                         <div class="mt-3 flex items-center justify-between">
                             <button type="submit"
-                                    class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md shadow-sm text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
+                                    class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md shadow-sm text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-rose-500">
                                 Comment
                             </button>
                         </div>
@@ -47,7 +47,7 @@
             @endauth
 
             @guest
-                <p>Log in to comment.</p>
+                <p class="text-gray-900 dark:text-gray-200">Log in to comment.</p>
             @endguest
         </div>
     </div>