diff --git a/app/Helpers/Formatting.php b/app/Helpers/Formatting.php
new file mode 100644
index 0000000..9113d61
--- /dev/null
+++ b/app/Helpers/Formatting.php
@@ -0,0 +1,77 @@
+<?php
+
+namespace App\Helpers;
+
+class Formatting
+{
+    /**
+     * Transform the body of the post.
+     *
+     * @param string $body
+     *
+     * @return string
+     */
+    public static function transformBody($text)
+    {
+        $text = self::makeLinks($text);
+        $text = self::wpautop($text);
+
+        return $text;
+    }
+
+    /**
+     * Makes links clickable in the given text.
+     *
+     * @param string $text The text to process.
+     * @return string The processed text with clickable links.
+     */
+    public static function makeLinks($text)
+    {
+        return preg_replace('/(http|https):\/\/[a-zA-Z0-9\.\-\/\?\&\=\_\%\#]+/', '<a href="$0" target="_blank">$0</a>', $text);
+    }
+
+    /**
+     * Replaces double line breaks with paragraph elements.
+     *
+     * @param string $text The text to process.
+     * @param bool $br Whether to add line breaks.
+     * @return string The processed text with paragraph elements.
+     */
+    public static function wpautop($text, $br = true)
+    {
+        if (trim($text) === '') {
+            return '';
+        }
+
+        // Just to make things a little easier, pad the end.
+        $text = $text . "\n";
+
+        // Change multiple <br>'s into two line breaks, which will turn into paragraphs.
+        $text = preg_replace('|<br\s*/?>\s*<br\s*/?>|', "\n\n", $text);
+
+        // Add a double line break after hr tags, which are self closing.
+        $text = preg_replace('!(<hr\s*?/?>)!', "$1\n\n", $text);
+
+        // Standardize newline characters to "\n".
+        $text = str_replace(array( "\r\n", "\r" ), "\n", $text);
+
+        // Remove more than two contiguous line breaks.
+        $text = preg_replace("/\n\n+/", "\n\n", $text);
+
+        // Split up the contents into an array of strings, separated by double line breaks.
+        $paragraphs = preg_split('/\n\s*\n/', $text, -1, PREG_SPLIT_NO_EMPTY);
+
+        // Reset $text prior to rebuilding.
+        $text = '';
+
+        // Rebuild the content as a string, wrapping every bit with a <p>.
+        foreach ($paragraphs as $paragraph) {
+            $text .= '<p class="mb-3">' . trim($paragraph, "\n") . "</p>\n";
+        }
+
+        // Under certain strange conditions it could create a P of entirely whitespace.
+        $text = preg_replace('|<p>\s*</p>|', '', $text);
+
+        return $text;
+    }
+}
diff --git a/app/Http/Controllers/Admin/CommentController.php b/app/Http/Controllers/Admin/CommentController.php
new file mode 100644
index 0000000..ecc5bd5
--- /dev/null
+++ b/app/Http/Controllers/Admin/CommentController.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Http\Controllers\Controller;
+use App\Models\Comment;
+
+class CommentController extends Controller
+{
+    public function destroy(Comment $comment)
+    {
+        $comment->delete();
+
+        return response()->json(['message' => 'Comment deleted']);
+    }
+}
diff --git a/app/Http/Controllers/Admin/FeedbackController.php b/app/Http/Controllers/Admin/FeedbackController.php
index 42bd5c5..942d625 100644
--- a/app/Http/Controllers/Admin/FeedbackController.php
+++ b/app/Http/Controllers/Admin/FeedbackController.php
@@ -7,6 +7,7 @@
 use App\Models\Board;
 use App\Models\Status;
 use App\Models\Comment;
+use App\Helpers\Formatting;
 use Illuminate\Http\Request;
 use App\Http\Controllers\Controller;
 use App\Notifications\FeedbackStatusChanged;
@@ -59,6 +60,9 @@ public function show(Post $post)
         $boards = Board::select('id', 'name', 'posts', 'slug')->get();
         $statuses = Status::select('id', 'name', 'color')->get();
 
+        $post->raw_body = $post->body;
+        $post->body = Formatting::transformBody($post->body);
+
         return inertia('Admin/Feedbacks/Show', [
             'post' => $post,
             'boards' => $boards,
@@ -67,6 +71,60 @@ public function show(Post $post)
         ]);
     }
 
+    public function store(Request $request)
+    {
+        $rules = [
+            'title' => 'required',
+            'body' => 'required',
+            'status_id' => 'required|exists:statuses,id',
+            'board_id' => 'required|exists:boards,id',
+        ];
+
+        if ($request->has('behalf_id') && $request->behalf_id) {
+            $rules['behalf_id'] = 'exists:users,id';
+        }
+
+        $request->validate($rules);
+
+        $args = [
+            'title'     => strip_tags($request->title),
+            'body'      => strip_tags($request->body),
+            'status_id' => $request->status_id,
+            'board_id'  => $request->board_id,
+        ];
+
+        if ($request->behalf_id) {
+            $args['created_by'] = $request->behalf_id;
+            $args['by'] = auth()->id();
+        }
+
+        $post = Post::create($args);
+
+        if ($post) {
+            $post->votes()->create([
+                'user_id' => $post->created_by,
+                'board_id' => $post->board_id,
+            ]);
+        }
+
+        return redirect()->route('admin.feedbacks.show', $post)->with('success', 'Post created successfully');
+    }
+
+    public function updateContent(Request $request, Post $post)
+    {
+        $request->validate([
+            'title' => 'required',
+            'body' => 'required',
+        ]);
+
+        $post->update([
+            'title' => strip_tags($request->title),
+            'body' => strip_tags($request->body),
+        ]);
+
+        return redirect()->route('admin.feedbacks.show', $post)->with('success', 'Content updated successfully.');
+    }
+
     public function update(Request $request, Post $post)
     {
         $request->validate([
@@ -113,6 +171,13 @@ private function notify($post)
         });
     }
 
+    public function destroy(Post $post)
+    {
+        $post->delete();
+
+        return redirect()->route('admin.feedbacks.index')->with('success', 'Feedback deleted successfully.');
+    }
+
     public function addVote(Post $post, Request $request)
     {
         $request->validate([
diff --git a/app/Http/Controllers/Admin/PostsController.php b/app/Http/Controllers/Admin/PostsController.php
deleted file mode 100644
index 528e655..0000000
--- a/app/Http/Controllers/Admin/PostsController.php
+++ /dev/null
@@ -1,49 +0,0 @@
-<?php
-
-namespace App\Http\Controllers\Admin;
-
-use App\Models\Post;
-use Illuminate\Http\Request;
-use App\Http\Controllers\Controller;
-
-class PostsController extends Controller
-{
-    public function store(Request $request)
-    {
-        $rules = [
-            'title' => 'required',
-            'body' => 'required',
-            'status_id' => 'required|exists:statuses,id',
-            'board_id' => 'required|exists:boards,id',
-        ];
-
-        if ($request->has('behalf_id') && $request->behalf_id) {
-            $rules['behalf_id'] = 'exists:users,id';
-        }
-
-        $request->validate($rules);
-
-        $args = [
-            'title' => $request->title,
-            'body' => $request->body,
-            'status_id' => $request->status_id,
-            'board_id' => $request->board_id,
-        ];
-
-        if ($request->behalf_id) {
-            $args['created_by'] = $request->behalf_id;
-            $args['by'] = auth()->id();
-        }
-
-        $post = Post::create($args);
-
-        if ($post) {
-            $post->votes()->create([
-                'user_id' => $post->created_by,
-                'board_id' => $post->board_id,
-            ]);
-        }
-
-        return redirect()->route('admin.feedbacks.show', $post)->with('success', 'Post created successfully');
-    }
-}
diff --git a/app/Http/Controllers/Frontend/BoardController.php b/app/Http/Controllers/Frontend/BoardController.php
index 24fa4f2..9a625e8 100644
--- a/app/Http/Controllers/Frontend/BoardController.php
+++ b/app/Http/Controllers/Frontend/BoardController.php
@@ -69,8 +69,8 @@ public function store(Request $request, Board $board)
 
         try {
             $post = Post::create([
-                'title'      => $request->title,
-                'body'       => $request->body,
+                'title'      => strip_tags($request->title),
+                'body'       => strip_tags($request->body),
                 'board_id'   => $board->id,
                 'status_id'  => null,
                 'created_by' => auth()->user()->id,
diff --git a/app/Http/Controllers/Frontend/CommentController.php b/app/Http/Controllers/Frontend/CommentController.php
index c5afabb..5041a28 100644
--- a/app/Http/Controllers/Frontend/CommentController.php
+++ b/app/Http/Controllers/Frontend/CommentController.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers\Frontend;
 
+use App\Helpers\Formatting;
 use App\Models\Post;
 use App\Models\User;
 use App\Models\Comment;
@@ -29,6 +30,7 @@ public function index(Request $request, Post $post)
             if (isset($groupedComments[$parentId])) {
                 foreach ($groupedComments[$parentId] as $comment) {
                     $children = $buildCommentTree($comment->id);
+                    $comment->body = Formatting::transformBody($comment->body);
                     $comment->children = $children;
                     $result[] = $comment;
                 }
@@ -53,7 +55,7 @@ public function store(Request $request, Post $post)
         ]);
 
         $comment = $post->comments()->create([
-            'body' => $request->body,
+            'body' => strip_tags($request->body),
             'user_id' => auth()->user()->id,
             'parent_id' => $parentId === 0 ? null : $parentId,
         ]);
diff --git a/app/Http/Controllers/Frontend/PostController.php b/app/Http/Controllers/Frontend/PostController.php
index 02844c4..f59ce7c 100644
--- a/app/Http/Controllers/Frontend/PostController.php
+++ b/app/Http/Controllers/Frontend/PostController.php
@@ -2,6 +2,8 @@
 
 namespace App\Http\Controllers\Frontend;
 
+use App\Helpers\Formatting;
+use App\Http\Controllers\Admin\FeedbackController;
 use App\Models\Post;
 use Illuminate\Http\Request;
 use App\Http\Controllers\Controller;
@@ -15,6 +17,8 @@ public function show(Board $board, $post)
         $post = Post::where('slug', $post)->withVote()->firstOrFail();
         $post->load('creator');
 
+        $post->body = Formatting::transformBody($post->body);
+
         $data = [
             'post' => $post,
             'board' => $board,
diff --git a/package.json b/package.json
index b71ee73..dfffe97 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "dependencies": {
         "@heroicons/react": "^2.1.1",
         "@radix-ui/react-popover": "^1.0.7",
-        "@wedevs/tail-react": "^0.3.3",
+        "@wedevs/tail-react": "^0.5.0",
         "classnames": "^2.5.1",
         "lodash.debounce": "^4.0.8",
         "react-color": "^2.19.3"
@@ -39,4 +39,4 @@
             "path": "./node_modules/cz-conventional-changelog"
         }
     }
-}
+}
\ No newline at end of file
diff --git a/resources/js/Components/CommentBox.tsx b/resources/js/Components/CommentBox.tsx
index 1434c73..96e3283 100644
--- a/resources/js/Components/CommentBox.tsx
+++ b/resources/js/Components/CommentBox.tsx
@@ -94,9 +94,12 @@ const CommentBox = ({ post, parent, onComment }: Props) => {
   };
 
   return (
-    <form className="border border-gray-300 rounded" onSubmit={onFormSubmit}>
+    <form
+      className="border border-gray-300 dark:border-gray-700 rounded"
+      onSubmit={onFormSubmit}
+    >
       <textarea
-        className="w-full border-0 text-sm px-3 py-2 mt-1 focus:ring-0"
+        className="w-full border-0 dark:bg-gray-800 dark:text-gray-300 text-sm px-3 py-2 mt-1 focus:ring-0"
         autoComplete="off"
         rows={rows}
         value={form.body}
@@ -112,7 +115,7 @@ const CommentBox = ({ post, parent, onComment }: Props) => {
       ></textarea>
 
       {showButtons && (
-        <div className="flex border-t border-gray-300 px-3 py-2 justify-between items-center">
+        <div className="flex border-t border-gray-300 dark:border-gray-700 px-3 py-2 justify-between items-center">
           <div className="text-xs text-gray-500">
             {parent ? (
               <span>&nbsp;</span>
diff --git a/resources/js/Components/Comments.tsx b/resources/js/Components/Comments.tsx
index e59dad3..d48a3f1 100644
--- a/resources/js/Components/Comments.tsx
+++ b/resources/js/Components/Comments.tsx
@@ -1,9 +1,12 @@
-import { BoardType, CommentType, PageProps, PostType, User } from '@/types';
+import { BoardType, CommentType, PostType, User } from '@/types';
 import React, { useEffect, useState } from 'react';
 
 import { formatDate } from '@/utils';
 import CommentBox from './CommentBox';
 import classNames from 'classnames';
+import { usePage } from '@inertiajs/react';
+import axios from 'axios';
+import { on } from 'events';
 
 type CommentsProps = {
   post: PostType;
@@ -14,6 +17,7 @@ type CommentProps = {
   comment: CommentType;
   post: PostType;
   parentId?: number;
+  onCommentDelete: (commentId: number) => void;
 };
 
 const Comments: React.FC<CommentsProps> = ({ post }) => {
@@ -56,11 +60,11 @@ const Comments: React.FC<CommentsProps> = ({ post }) => {
       </div>
 
       {comments.length > 0 && !isFetching && (
-        <div className="flex justify-between items-center text-gray-700 ml-12 mb-8 pb-4 border-b">
-          <h3 className="text-lg font-semibold">Comments</h3>
+        <div className="flex justify-between items-center text-gray-700 ml-12 mb-8 pb-4 border-b dark:border-gray-700">
+          <h3 className="text-lg font-semibold dark:text-gray-300">Comments</h3>
 
           <div className="flex items-center">
-            <div className="text-sm mr-2">Sort By</div>
+            <div className="text-sm mr-2 dark:text-gray-400">Sort By</div>
             <select
               className="px-2 min-w-28 text-sm py-1.5 rounded border border-gray-200"
               value={sort}
@@ -75,20 +79,48 @@ const Comments: React.FC<CommentsProps> = ({ post }) => {
 
       <div className="mt-4">
         {comments.map((comment) => (
-          <Comment key={comment.id} post={post} comment={comment} />
+          <Comment
+            key={comment.id}
+            post={post}
+            comment={comment}
+            onCommentDelete={() => {
+              setComments(comments.filter((c) => c.id !== comment.id));
+            }}
+          />
         ))}
       </div>
     </div>
   );
 };
 
-const Comment = ({ post, comment, parentId }: CommentProps) => {
+const Comment = ({
+  post,
+  comment,
+  parentId,
+  onCommentDelete,
+}: CommentProps) => {
   const [showReplyBox, setShowReplyBox] = useState(false);
+  const { auth } = usePage().props;
 
   const toggleReplyBox = () => {
     setShowReplyBox(!showReplyBox);
   };
 
+  const deleteComment = (commentId: number) => {
+    if (!confirm('Are you sure you want to delete this comment?')) {
+      return;
+    }
+
+    axios
+      .delete(route('admin.comments.destroy', [commentId]))
+      .then(() => {
+        onCommentDelete(commentId);
+      })
+      .catch((error) => {
+        alert(error.response.data.message);
+      });
+  };
+
   return (
     <div className="flex py-3">
       <div className="w-9 mr-3">
@@ -103,7 +135,9 @@ const Comment = ({ post, comment, parentId }: CommentProps) => {
 
       <div className="flex-1">
         <div className="flex items-center text-sm mb-2">
-          <div className="font-semibold">{comment.user?.name}</div>
+          <div className="font-semibold dark:text-gray-300">
+            {comment.user?.name}
+          </div>
           {comment.status && (
             <div className="text-sm text-gray-700 ml-2">
               <span>marked this post as</span>
@@ -116,16 +150,32 @@ const Comment = ({ post, comment, parentId }: CommentProps) => {
             </div>
           )}
         </div>
-        <div className="text-sm text-gray-800 mb-2">{comment.body}</div>
+        <div
+          className="text-sm text-gray-800 dark:text-gray-300 mb-2"
+          dangerouslySetInnerHTML={{ __html: comment.body }}
+        ></div>
         <div className="flex text-xs text-gray-500">
           <div className="">{formatDate(comment.created_at)}</div>
           <div className="mx-1">•</div>
           <div
-            className="cursor-pointer hover:text-gray-800"
+            className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-300"
             onClick={toggleReplyBox}
           >
             Reply
           </div>
+          {auth.user?.role === 'admin' && (
+            <>
+              <div className="mx-1">•</div>
+              <div className="">
+                <button
+                  className="text-xs text-red-500 dark:text-red-300"
+                  onClick={() => deleteComment(comment.id)}
+                >
+                  Delete
+                </button>
+              </div>
+            </>
+          )}
         </div>
 
         {comment.children.length > 0 && (
diff --git a/resources/js/Components/VoteButton.tsx b/resources/js/Components/VoteButton.tsx
index 7e1f0c7..bdb2a87 100644
--- a/resources/js/Components/VoteButton.tsx
+++ b/resources/js/Components/VoteButton.tsx
@@ -38,14 +38,16 @@ const VoteButton = ({ post }: Props) => {
       <button
         className={classNames(
           'flex flex-col self-start w-9 text-sm text-gray-700 rounded-md border py-2 items-center hover:bg-gray-100',
-          hasVoted ? 'border-indigo-500 bg-indigo-50' : 'border-gray-300'
+          hasVoted
+            ? 'dark:text-gray-300 border-indigo-500 bg-indigo-50 dark:bg-gray-700'
+            : 'dark:text-gray-300 dark:bg-gray-700 border-gray-300 dark:border-gray-600'
         )}
         onClick={() => toggleVote(post)}
       >
         <ChevronUpIcon
           className={classNames(
             'h-3 w-3 mb-1',
-            hasVoted ? 'text-indigo-600' : 'text-gray-400'
+            hasVoted ? 'text-indigo-600 dark:text-gray-300' : 'text-gray-400'
           )}
         />
         <span className="text-xs">{vote}</span>
diff --git a/resources/js/Layouts/FrontendLayout.tsx b/resources/js/Layouts/FrontendLayout.tsx
index 52062de..0db1dc0 100644
--- a/resources/js/Layouts/FrontendLayout.tsx
+++ b/resources/js/Layouts/FrontendLayout.tsx
@@ -11,8 +11,8 @@ const FrontendLayout = ({ children }: PropsWithChildren) => {
   const { auth, appName, appLogo } = usePage<PageProps>().props;
 
   return (
-    <div>
-      <header className="border-b border-gray-200 mb-8">
+    <div className="dark:bg-gray-900">
+      <header className="border-b border-gray-200 dark:border-gray-700 mb-8">
         <div className="w-[960px] mx-auto">
           <div className="flex justify-between py-3 mb-1 items-center">
             <div className="">
@@ -23,7 +23,9 @@ const FrontendLayout = ({ children }: PropsWithChildren) => {
                   loading="lazy"
                   className="w-10 h-10 mr-3"
                 />
-                <span className="text-xl font-semibold">{appName}</span>
+                <span className="text-xl font-semibold dark:text-gray-300">
+                  {appName}
+                </span>
               </Link>
             </div>
             <div className="">
@@ -45,7 +47,7 @@ const FrontendLayout = ({ children }: PropsWithChildren) => {
                       <span className="inline-flex rounded-md">
                         <button
                           type="button"
-                          className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150"
+                          className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white dark:bg-gray-800 hover:text-gray-700 focus:outline-none transition ease-in-out duration-150"
                         >
                           {auth.user.name}
 
@@ -107,8 +109,8 @@ const FrontendLayout = ({ children }: PropsWithChildren) => {
                 className={classNames(
                   'inline-flex items-center text-sm mr-3 px-3 py-3',
                   route().current('home')
-                    ? 'text-indigo-600 font-semibold hover:text-indigo-700 border-b border-indigo-500'
-                    : ''
+                    ? 'text-indigo-600 dark:text-indigo-300 font-semibold hover:text-indigo-700 border-b border-indigo-500'
+                    : 'dark:text-gray-400'
                 )}
               >
                 <MapIcon className="h-5 w-5 mr-1.5" />
@@ -119,8 +121,8 @@ const FrontendLayout = ({ children }: PropsWithChildren) => {
                 className={classNames(
                   'inline-flex items-center text-sm mr-3 px-3 py-2',
                   route().current('board.show')
-                    ? 'text-indigo-600 font-medium hover:text-indigo-700 border-b border-indigo-500'
-                    : ''
+                    ? 'text-indigo-600 dark:text-indigo-300 font-semibold hover:text-indigo-700 border-b border-indigo-500'
+                    : 'dark:text-gray-400'
                 )}
               >
                 <LightBulbIcon className="h-5 w-5 mr-1.5" />
@@ -144,8 +146,8 @@ const FrontendLayout = ({ children }: PropsWithChildren) => {
 
       <main className="w-[960px] mx-auto">{children}</main>
 
-      <footer className="border-t border-gray-200 mt-12 py-4">
-        <div className="w-[960px] mx-auto text-sm text-gray-600">
+      <footer className="border-t border-gray-200 dark:border-gray-700 mt-12 py-4">
+        <div className="w-[960px] mx-auto text-sm text-gray-600 dark:text-gray-300">
           &copy; {appName}
         </div>
       </footer>
diff --git a/resources/js/Pages/Admin/Boards/Index.tsx b/resources/js/Pages/Admin/Boards/Index.tsx
index 1f0acdc..52c1cc0 100644
--- a/resources/js/Pages/Admin/Boards/Index.tsx
+++ b/resources/js/Pages/Admin/Boards/Index.tsx
@@ -60,11 +60,11 @@ const BoardsIndex = ({ boards }: Props) => {
         {boards.map((board) => (
           <Link
             key={board.id}
-            className="rounded-lg bg-white shadow"
+            className="rounded-lg bg-white shadow dark:bg-gray-800"
             href={route('admin.boards.show', [board])}
           >
             <div className="space-x-6 p-6">
-              <div className="flex items-center justify-between">
+              <div className="flex items-center justify-between dark:text-gray-300">
                 <span className="font-medium">{board.name}</span>
                 <span className="text-sm">{board.posts}</span>
               </div>
diff --git a/resources/js/Pages/Admin/Boards/Show.tsx b/resources/js/Pages/Admin/Boards/Show.tsx
index 9d0a6cb..6574728 100644
--- a/resources/js/Pages/Admin/Boards/Show.tsx
+++ b/resources/js/Pages/Admin/Boards/Show.tsx
@@ -100,7 +100,7 @@ const Show = ({ board }: Props) => {
   };
 
   return (
-    <div className="p-6 bg-white rounded shadow">
+    <div className="p-6 bg-white dark:bg-gray-800 rounded shadow">
       <Link
         className="flex mb-6 items-center text-sm text-gray-600 "
         href={route('admin.boards.index')}
@@ -149,7 +149,7 @@ const Show = ({ board }: Props) => {
         />
 
         {form.data.allow_posts && (
-          <div className="p-6 bg-gray-50 border border-gray-200 rounded mt-4">
+          <div className="p-6 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded mt-4">
             <h3 className="font-semibold text-base mb-4">Form Settings</h3>
 
             <TextField
@@ -165,8 +165,10 @@ const Show = ({ board }: Props) => {
             />
 
             <div className="border border-dashed border-indigo-200 p-4 rounded mb-4">
-              <div className="mb-4 bg-indigo-50 border border-indigo-100 p-4 rounded">
-                <div className="mb-4 text-sm font-semibold">Title Field</div>
+              <div className="mb-4 bg-indigo-50 dark:bg-gray-800 border border-indigo-100 dark:border-gray-700 p-4 rounded">
+                <div className="mb-4 text-sm font-semibold dark:text-gray-300">
+                  Title Field
+                </div>
 
                 <div className="sm:flex gap-4">
                   <TextField
@@ -187,8 +189,8 @@ const Show = ({ board }: Props) => {
                 </div>
               </div>
 
-              <div className="mb-4 bg-indigo-50 border border-indigo-100 p-4 rounded">
-                <div className="mb-4 text-sm font-semibold">
+              <div className="mb-4 bg-indigo-50 dark:bg-gray-800 border border-indigo-100 dark:border-gray-700 p-4 rounded">
+                <div className="mb-4 text-sm font-semibold dark:text-gray-300">
                   Description Field
                 </div>
 
diff --git a/resources/js/Pages/Admin/Feedbacks/EditFeedback.tsx b/resources/js/Pages/Admin/Feedbacks/EditFeedback.tsx
new file mode 100644
index 0000000..9908108
--- /dev/null
+++ b/resources/js/Pages/Admin/Feedbacks/EditFeedback.tsx
@@ -0,0 +1,78 @@
+import { PostType } from '@/types';
+import { useForm } from '@inertiajs/react';
+import {
+  Button,
+  Modal,
+  ModalActions,
+  ModalBody,
+  ModalHeader,
+  TextField,
+  Textarea,
+} from '@wedevs/tail-react';
+import React from 'react';
+
+type Props = {
+  post: PostType;
+  isOpen: boolean;
+  onClose: () => void;
+  onUpdate?: () => void;
+};
+
+const EditFeedback: React.FC<Props> = ({ isOpen, onClose, post, onUpdate }) => {
+  const form = useForm({
+    title: post.title,
+    body: post.raw_body,
+  });
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    form.put(
+      route('admin.feedbacks.update-content', {
+        post: post.slug,
+      }),
+      {
+        preserveScroll: true,
+        onSuccess: () => {
+          onClose();
+
+          if (onUpdate) {
+            onUpdate();
+          }
+        },
+      }
+    );
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <form onSubmit={handleSubmit}>
+        <ModalHeader>Edit Feedback</ModalHeader>
+        <ModalBody>
+          <TextField
+            label="Title"
+            value={form.data.title}
+            onChange={(value) => form.setData('title', value)}
+          />
+
+          <Textarea
+            label="Feedback"
+            value={form.data.body}
+            rows={10}
+            onChange={(value) => form.setData('body', value)}
+          />
+        </ModalBody>
+        <ModalActions>
+          <Button type="submit" className="ml-2">
+            Update
+          </Button>
+          <Button variant="secondary" onClick={onClose}>
+            Cancel
+          </Button>
+        </ModalActions>
+      </form>
+    </Modal>
+  );
+};
+
+export default EditFeedback;
diff --git a/resources/js/Pages/Admin/Feedbacks/Index.tsx b/resources/js/Pages/Admin/Feedbacks/Index.tsx
index 8a2bba5..f451a59 100644
--- a/resources/js/Pages/Admin/Feedbacks/Index.tsx
+++ b/resources/js/Pages/Admin/Feedbacks/Index.tsx
@@ -94,7 +94,7 @@ const Feedbacks = ({ posts, boards, statuses }: Props) => {
 
         <div className="p-6 text-gray-900 dark:text-gray-100">
           <div className="sm:flex gap-6">
-            <div className="sm:w-52 sm:border-r sm:pr-5 border-gray-100">
+            <div className="sm:w-52 sm:border-r sm:pr-5 border-gray-100 dark:border-gray-700">
               <SelectInput
                 label="Sort By"
                 selectedKey={sortKey}
@@ -129,7 +129,7 @@ const Feedbacks = ({ posts, boards, statuses }: Props) => {
               {posts.data.map((post) => (
                 <div
                   key={post.id}
-                  className="p-4 flex justify-between hover:bg-slate-50"
+                  className="p-4 flex justify-between hover:bg-slate-50 hover:dark:bg-slate-900 rounded"
                 >
                   <Link
                     href={route('admin.feedbacks.show', [post])}
diff --git a/resources/js/Pages/Admin/Feedbacks/Show.tsx b/resources/js/Pages/Admin/Feedbacks/Show.tsx
index e9e0c79..8a4754e 100644
--- a/resources/js/Pages/Admin/Feedbacks/Show.tsx
+++ b/resources/js/Pages/Admin/Feedbacks/Show.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Head, Link, useForm } from '@inertiajs/react';
 import {
   Button,
@@ -15,6 +15,8 @@ import {
   ChevronUpIcon,
   ChatBubbleLeftIcon,
   ChevronLeftIcon,
+  TrashIcon,
+  PencilSquareIcon,
 } from '@heroicons/react/24/outline';
 
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
@@ -24,6 +26,7 @@ import Comments from '@/Components/Comments';
 import classNames from 'classnames';
 import UserSearchDropdown from '@/Components/UserSearchDropdown';
 import CreateUserModal from '@/Components/CreateUserModal';
+import EditFeedback from './EditFeedback';
 
 type Props = {
   post: PostType;
@@ -39,6 +42,7 @@ type VoteProps = {
 };
 
 const FeedbackShow = ({ post, statuses, boards, votes }: Props) => {
+  const [showEditForm, setShowEditForm] = useState(false);
   const [localPost, setLocalPost] = useState(post);
   const [showVoteModal, setShowVoteModal] = useState(false);
   const form = useForm({
@@ -48,6 +52,10 @@ const FeedbackShow = ({ post, statuses, boards, votes }: Props) => {
     notify: true,
   });
 
+  useEffect(() => {
+    setLocalPost(post);
+  }, [post]);
+
   const statusOptions = [
     { value: '- Select Status -', key: '' },
     ...statuses.map((status) => ({
@@ -86,7 +94,7 @@ const FeedbackShow = ({ post, statuses, boards, votes }: Props) => {
             Back
           </Link>
 
-          <div className="text-xl font-semibold mb-4 ml-12">
+          <div className="text-xl font-semibold dark:text-gray-300 mb-4 ml-12">
             {localPost.title}
           </div>
 
@@ -107,10 +115,14 @@ const FeedbackShow = ({ post, statuses, boards, votes }: Props) => {
               )}
             </div>
             <div className="flex-1">
-              <div className="text-sm font-semibold mb-3">
+              <div className="text-sm font-semibold dark:text-gray-300 mb-3">
                 {localPost.creator?.name}
               </div>
-              <div className="text-sm text-gray-800 mb-3">{localPost.body}</div>
+
+              <div
+                className="text-sm text-gray-800 dark:text-gray-300 mb-3"
+                dangerouslySetInnerHTML={{ __html: localPost.body }}
+              ></div>
 
               <div className="flex text-xs text-gray-500 gap-4 items-center">
                 {localPost.by && (
@@ -137,20 +149,56 @@ const FeedbackShow = ({ post, statuses, boards, votes }: Props) => {
           <Comments post={localPost} board={localPost.board} />
         </div>
 
-        <div className="sm:w-96 sm:border-l sm:pl-5 border-gray-100">
-          <Button
-            as="a"
-            href={route('post.show', {
-              board: post.board?.slug,
-              post: post.slug,
-            })}
-            variant="secondary"
-            className="inline-flex mb-4"
-            target="_blank"
-          >
-            <ArrowTopRightOnSquareIcon className="h-5 w-5 mr-2" />
-            View Feedback
-          </Button>
+        <div className="sm:w-96 sm:border-l sm:pl-5 border-gray-100 dark:border-gray-700">
+          <div className="flex items-center justify-between mb-4 border-b border-gray-100 dark:border-gray-700 pb-4">
+            <div className="">
+              <Button
+                as="a"
+                href={route('post.show', {
+                  board: post.board?.slug,
+                  post: post.slug,
+                })}
+                variant="secondary"
+                className="inline-flex"
+                target="_blank"
+              >
+                <ArrowTopRightOnSquareIcon className="h-5 w-5 mr-2" />
+                View
+              </Button>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Button
+                variant="secondary"
+                className="inline-flex"
+                onClick={() => setShowEditForm(true)}
+              >
+                <PencilSquareIcon className="h-5 w-5 mr-2" />
+                Edit
+              </Button>
+              <Button
+                variant="danger"
+                style="outline"
+                className="inline-flex"
+                onClick={() => {
+                  if (
+                    confirm(
+                      'Are you sure you want to delete this feedback? This action cannot be undone.'
+                    )
+                  ) {
+                    form.delete(
+                      route('admin.feedbacks.destroy', {
+                        post: post.slug,
+                      })
+                    );
+                  }
+                }}
+              >
+                <TrashIcon className="h-5 w-5 mr-2" />
+                <span>Delete</span>
+              </Button>
+            </div>
+          </div>
 
           <form onSubmit={onSubmit}>
             <SelectInput
@@ -198,7 +246,9 @@ const FeedbackShow = ({ post, statuses, boards, votes }: Props) => {
 
           <div className="mt-8 py-4">
             <div className="flex items-center justify-between mb-3">
-              <h3 className="text-base font-semibold">Voters</h3>
+              <h3 className="text-base font-semibold dark:text-gray-300">
+                Voters
+              </h3>
 
               <Button
                 variant="secondary"
@@ -208,7 +258,6 @@ const FeedbackShow = ({ post, statuses, boards, votes }: Props) => {
                 Add Vote
               </Button>
             </div>
-
             {votes.length > 0 ? (
               <>
                 <ul>
@@ -221,7 +270,7 @@ const FeedbackShow = ({ post, statuses, boards, votes }: Props) => {
                         />
                       </div>
                       <div className="flex-1">
-                        <div className="text-sm font-semibold">
+                        <div className="text-sm dark:text-gray-300 font-semibold">
                           {vote.user.name}
                         </div>
                       </div>
@@ -247,6 +296,15 @@ const FeedbackShow = ({ post, statuses, boards, votes }: Props) => {
         onClose={() => setShowVoteModal(false)}
         post={localPost}
       />
+
+      <EditFeedback
+        isOpen={showEditForm}
+        onClose={() => setShowEditForm(false)}
+        post={localPost}
+        onUpdate={() => {
+          // inertia reload
+        }}
+      />
     </div>
   );
 };
diff --git a/resources/js/Pages/Admin/Status.tsx b/resources/js/Pages/Admin/Status.tsx
index 1acae97..b9a813a 100644
--- a/resources/js/Pages/Admin/Status.tsx
+++ b/resources/js/Pages/Admin/Status.tsx
@@ -145,7 +145,7 @@ const StatusPage = ({ statuses }: Props) => {
 
         <div className="bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
           <div className="sm:flex gap-6 p-6 text-gray-900 dark:text-gray-100">
-            <div className="mb-4 sm:mb-0 sm:w-96 sm:border-r sm:pr-5 border-gray-100">
+            <div className="mb-4 sm:mb-0 sm:w-96 sm:border-r sm:pr-5 border-gray-100 dark:border-gray-700">
               <h3 className="font-semibold mb-2">About Statuses</h3>
               <p className="text-sm">
                 Statuses are the integral part of product roadmap. Only 3
diff --git a/resources/js/Pages/Frontend/Board/PostForm.tsx b/resources/js/Pages/Frontend/Board/PostForm.tsx
index 843e76c..ff1dfc9 100644
--- a/resources/js/Pages/Frontend/Board/PostForm.tsx
+++ b/resources/js/Pages/Frontend/Board/PostForm.tsx
@@ -29,11 +29,11 @@ const PostForm = ({ board, user }: Props) => {
   return (
     <div className="w-72">
       <form
-        className="px-4 py-4 border rounded text-center"
+        className="px-4 py-4 border dark:border-gray-700 rounded text-center"
         onSubmit={createPost}
       >
         {board.allow_posts && (
-          <h3 className="text-base font-semibold mb-3">
+          <h3 className="text-base font-semibold dark:text-gray-300 mb-3">
             {board.settings?.form.heading || 'Create a post'}
           </h3>
         )}
diff --git a/resources/js/Pages/Frontend/Board/Show.tsx b/resources/js/Pages/Frontend/Board/Show.tsx
index 2f7c8e2..d9866c5 100644
--- a/resources/js/Pages/Frontend/Board/Show.tsx
+++ b/resources/js/Pages/Frontend/Board/Show.tsx
@@ -9,7 +9,6 @@ import {
 import FrontendLayout from '@/Layouts/FrontendLayout';
 import { BoardType, PageProps, PostType, User } from '@/types';
 import PostForm from './PostForm';
-import classNames from 'classnames';
 import axios from 'axios';
 import VoteButton from '@/Components/VoteButton';
 
@@ -70,13 +69,13 @@ const ShowBoard = ({ auth, posts, board }: PageProps<Props>) => {
         <PostForm board={board} user={auth.user} />
 
         <div className="flex-1">
-          <div className="border rounded">
-            <div className="flex border-b px-3 py-3 bg-gray-50 justify-between">
-              <div className="flex gap-2 items-center">
+          <div className="border dark:border-gray-700 rounded">
+            <div className="flex border-b dark:border-gray-700 px-3 py-3 bg-gray-50 dark:bg-gray-800 justify-between">
+              <div className="flex gap-2 items-center dark:text-gray-300">
                 <div className="">Showing</div>
                 <div className="">
                   <select
-                    className="px-2 text-sm py-1.5 rounded border border-gray-200"
+                    className="px-2 text-sm py-1.5 rounded border border-gray-200 dark:border-gray-700 dark:bg-gray-800"
                     onChange={handleSortChange}
                     value={sortKey}
                   >
@@ -95,7 +94,7 @@ const ShowBoard = ({ auth, posts, board }: PageProps<Props>) => {
                     type="search"
                     placeholder="Search"
                     disabled
-                    className="px-4 pl-9 py-2 rounded border-0 text-sm ring-1 ring-indigo-50 focus:outline-none focus:ring-1"
+                    className="px-4 pl-9 py-2 dark:bg-gray-800 rounded border-0 text-sm ring-1 ring-indigo-50 dark:ring-gray-700 focus:outline-none focus:ring-1"
                   />
                   <div className="absolute inset-y-0 left-2 flex items-center pr-3 pointer-events-none">
                     <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
@@ -104,17 +103,17 @@ const ShowBoard = ({ auth, posts, board }: PageProps<Props>) => {
               </div>
             </div>
 
-            <div className="divide-y">
+            <div className="divide-y dark:divide-gray-700">
               {allPosts.map((post) => (
                 <div
                   key={post.id}
-                  className="p-4 flex justify-between hover:bg-slate-50"
+                  className="p-4 flex justify-between hover:bg-slate-50 dark:hover:bg-slate-800"
                 >
                   <Link
                     href={route('post.show', [board.slug, post.slug])}
                     className="flex flex-col flex-1"
                   >
-                    <div className="text-sm font-semibold mb-1">
+                    <div className="text-sm font-semibold dark:text-gray-300 mb-1">
                       {post.title}
                     </div>
                     <div className="text-sm text-gray-500 line-clamp-2">
@@ -132,6 +131,12 @@ const ShowBoard = ({ auth, posts, board }: PageProps<Props>) => {
                   </div>
                 </div>
               ))}
+
+              {allPosts.length === 0 && (
+                <div className="p-4 text-sm text-center dark:text-gray-300">
+                  No posts found.
+                </div>
+              )}
             </div>
           </div>
         </div>
diff --git a/resources/js/Pages/Frontend/Partials/HomeBoardList.tsx b/resources/js/Pages/Frontend/Partials/HomeBoardList.tsx
index 839d11b..0c62b95 100644
--- a/resources/js/Pages/Frontend/Partials/HomeBoardList.tsx
+++ b/resources/js/Pages/Frontend/Partials/HomeBoardList.tsx
@@ -10,14 +10,14 @@ type Props = {
 const HomeBoardList = ({ boards }: Props) => {
   return (
     <>
-      <h2 className="text-base font-semibold">Boards</h2>
+      <h2 className="text-base font-semibold dark:text-gray-300">Boards</h2>
 
       <div className="mt-4 grid grid-cols-3 gap-4">
         {boards.map((board) => (
           <div key={board.id}>
             <Link
               href={route('board.show', board.slug)}
-              className="flex py-3 px-4 justify-between items-center font-semibold text-gray-900 border rounded-md bg-white hover:bg-gray-100"
+              className="flex py-3 px-4 justify-between items-center font-semibold text-gray-900 dark:text-gray-300 border dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700"
             >
               <div className="text-sm">{board.name}</div>
               <div className="text-xs">{board.posts}</div>
diff --git a/resources/js/Pages/Frontend/Partials/HomeRoadmap.tsx b/resources/js/Pages/Frontend/Partials/HomeRoadmap.tsx
index 2e566dc..4d71ba5 100644
--- a/resources/js/Pages/Frontend/Partials/HomeRoadmap.tsx
+++ b/resources/js/Pages/Frontend/Partials/HomeRoadmap.tsx
@@ -21,17 +21,24 @@ const HomeRoadmap = ({ roadmaps, posts, boards }: Props) => {
 
   return (
     <>
-      <h2 className="text-base font-semibold mt-8 mb-4">Roadmap</h2>
+      <h2 className="text-base font-semibold mt-8 mb-4 dark:text-gray-300">
+        Roadmap
+      </h2>
 
       <div className="grid grid-cols-3 gap-4">
         {roadmaps.map((roadmap) => (
-          <div key={roadmap.id} className="border border-gray-300 rounded-md">
-            <div className="flex items-center px-4 py-3 border-b border-gray-300">
+          <div
+            key={roadmap.id}
+            className="border border-gray-300 dark:border-gray-700 rounded-md"
+          >
+            <div className="flex items-center px-4 py-3 border-b border-gray-300 dark:border-gray-700">
               <div
                 className="w-3 h-3 rounded-full mr-2"
                 style={{ backgroundColor: roadmap.color }}
               ></div>
-              <div className="text-sm font-semibold">{roadmap.name}</div>
+              <div className="text-sm font-semibold dark:text-gray-300">
+                {roadmap.name}
+              </div>
             </div>
 
             <div className="px-4 pb-4 min-h-80 h-[500px] overflow-y-auto">
@@ -48,7 +55,7 @@ const HomeRoadmap = ({ roadmaps, posts, boards }: Props) => {
                       href={route('post.show', [board?.slug, post.slug])}
                       className="flex flex-col flex-1 group"
                     >
-                      <div className="mb-1.5 text-sm font-semibold text-gray-700 group-hover:text-indigo-600">
+                      <div className="mb-1.5 text-sm font-semibold text-gray-700 dark:text-gray-300 group-hover:text-indigo-600">
                         {post.title}
                       </div>
                       <div className="text-xs text-gray-500 uppercase font-semibold">
diff --git a/resources/js/Pages/Frontend/Post.tsx b/resources/js/Pages/Frontend/Post.tsx
index ff5b7e5..e084ef9 100644
--- a/resources/js/Pages/Frontend/Post.tsx
+++ b/resources/js/Pages/Frontend/Post.tsx
@@ -21,8 +21,10 @@ const Post = ({ post, status, board, votes }: PageProps<Props>) => {
 
       <div className="flex gap-8 mb-8">
         <div className="w-72">
-          <div className="px-4 py-4 border rounded">
-            <h3 className="text-base font-semibold mb-3">Voters</h3>
+          <div className="px-4 py-4 border dark:border-gray-700 rounded">
+            <h3 className="text-base font-semibold dark:text-gray-300 mb-3">
+              Voters
+            </h3>
 
             {votes.length > 0 ? (
               <>
@@ -36,7 +38,7 @@ const Post = ({ post, status, board, votes }: PageProps<Props>) => {
                         />
                       </div>
                       <div className="flex-1">
-                        <div className="text-sm font-semibold">
+                        <div className="text-sm font-semibold dark:text-gray-300">
                           {vote.user.name}
                         </div>
                       </div>
@@ -63,7 +65,9 @@ const Post = ({ post, status, board, votes }: PageProps<Props>) => {
             </div>
 
             <div className="flex flex-col flex-1">
-              <div className="text-xl font-semibold mb-2">{post.title}</div>
+              <div className="text-xl font-semibold mb-2 dark:text-gray-300">
+                {post.title}
+              </div>
               <div className="flex text-sm text-gray-500">
                 {status && (
                   <>
@@ -96,10 +100,13 @@ const Post = ({ post, status, board, votes }: PageProps<Props>) => {
               />
             </div>
             <div className="flex-1">
-              <div className="text-sm font-semibold mb-3">
+              <div className="text-sm font-semibold dark:text-gray-300 mb-3">
                 {post.creator?.name}
               </div>
-              <div className="text-sm text-gray-800 mb-3">{post.body}</div>
+              <div
+                className="text-sm text-gray-800 dark:text-gray-300 mb-3"
+                dangerouslySetInnerHTML={{ __html: post.body }}
+              ></div>
               <div className="text-xs text-gray-500">
                 {formatDate(post.created_at)}
               </div>
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index 8214501..cacb58c 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -73,6 +73,7 @@ export interface PostType {
   title: string;
   slug: string;
   body: string;
+  raw_body: string;
   vote: number;
   comments: number;
   status_id: null | number;
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 6c5ea19..f48d50a 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -16,7 +16,7 @@
         @vite(['resources/js/app.tsx', "resources/js/Pages/{$page['component']}.tsx"])
         @inertiaHead
     </head>
-    <body class="font-sans antialiased">
+    <body class="font-sans dark:bg-gray-900 antialiased">
         @inertia
     </body>
 </html>
diff --git a/routes/web.php b/routes/web.php
index 6873fea..b97066f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,20 +1,18 @@
 <?php
 
-use Inertia\Inertia;
 use Illuminate\Support\Facades\Route;
 use Illuminate\Foundation\Application;
 use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\Admin\UserController;
-use App\Http\Controllers\Admin\PostsController;
 use App\Http\Controllers\Admin\StatusController;
 use App\Http\Controllers\Frontend\HomeController;
 use App\Http\Controllers\Frontend\PostController;
 use App\Http\Controllers\Admin\FeedbackController;
 use App\Http\Controllers\Frontend\BoardController;
-use App\Http\Controllers\Admin\DashboardController;
 use App\Http\Controllers\Admin\UserSearchController;
 use App\Http\Controllers\Frontend\CommentController;
 use App\Http\Controllers\Admin\BoardController as AdminBoardController;
+use App\Http\Controllers\Admin\CommentController as AdminCommentController;
 
 /*
 |--------------------------------------------------------------------------
@@ -41,9 +39,13 @@
 
     Route::get('/feedbacks', [FeedbackController::class, 'index'])->name('admin.feedbacks.index');
     Route::get('/feedbacks/{post}', [FeedbackController::class, 'show'])->name('admin.feedbacks.show');
-    Route::post('/feedbacks', [PostsController::class, 'store'])->name('admin.feedbacks.store');
+    Route::post('/feedbacks', [FeedbackController::class, 'store'])->name('admin.feedbacks.store');
     Route::post('/feedbacks/{post}', [FeedbackController::class, 'update'])->name('admin.feedbacks.update');
+    Route::put('/feedbacks/{post}/update', [FeedbackController::class, 'updateContent'])->name('admin.feedbacks.update-content');
     Route::post('/feedbacks/{post}/vote', [FeedbackController::class, 'addVote'])->name('admin.feedbacks.vote');
+    Route::delete('/feedbacks/{post}', [FeedbackController::class, 'destroy'])->name('admin.feedbacks.destroy');
+
+    Route::delete('/comment/{comment}', [AdminCommentController::class, 'destroy'])->name('admin.comments.destroy');
 
     Route::put('/boards/{board}', [AdminBoardController::class, 'update'])->name('admin.boards.update');
     Route::post('/boards', [AdminBoardController::class, 'store'])->name('admin.boards.store');
diff --git a/yarn.lock b/yarn.lock
index 140d321..f788264 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -418,6 +418,11 @@
   dependencies:
     client-only "^0.0.1"
 
+"@headlessui/tailwindcss@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@headlessui/tailwindcss/-/tailwindcss-0.2.0.tgz#2c55c98fd8eee4b4f21ec6eb35a014b840059eec"
+  integrity sha512-fpL830Fln1SykOCboExsWr3JIVeQKieLJ3XytLe/tt1A0XzqUthOftDmjcCYLW62w7mQI7wXcoPXr3tZ9QfGxw==
+
 "@heroicons/react@^2.0.18", "@heroicons/react@^2.1.1":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.1.1.tgz#422deb80c4d6caf3371aec6f4bee8361a354dc13"
@@ -654,6 +659,25 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.1"
 
+"@radix-ui/react-tooltip@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz#8f55070f852e7e7450cc1d9210b793d2e5a7686e"
+  integrity sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-visually-hidden" "1.0.3"
+
 "@radix-ui/react-use-callback-ref@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
@@ -700,6 +724,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/react-visually-hidden@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz#51aed9dd0fe5abcad7dee2a234ad36106a6984ac"
+  integrity sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
 "@radix-ui/rect@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.1.tgz#bf8e7d947671996da2e30f4904ece343bc4a883f"
@@ -881,13 +913,16 @@
     "@types/babel__core" "^7.20.5"
     react-refresh "^0.14.0"
 
-"@wedevs/tail-react@^0.3.3":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@wedevs/tail-react/-/tail-react-0.3.3.tgz#eeb5a569b475a529bed4b31fbe1a2006498ccd2c"
-  integrity sha512-UU5mMC+bwqP2+tnGlopev5Tv3ABNRzg+ffx6aBeUcyg48EVrtMwyjpU2/2QjAHaKBZC/fR+NOh+9YfofaEdwcA==
+"@wedevs/tail-react@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@wedevs/tail-react/-/tail-react-0.5.0.tgz#2b15545a5cf8f51246cafff90362d6765541744a"
+  integrity sha512-ZdVr4KQv668A1tfA8cQVWPR7WzidCe22vNHqmTsgrT6IajHwaQfzc4/zUbF2h8IOOqtQwe6OX7Ikny0ROAmtTA==
   dependencies:
     "@headlessui/react" "^1.7.16"
+    "@headlessui/tailwindcss" "^0.2.0"
     "@heroicons/react" "^2.0.18"
+    "@radix-ui/react-popover" "^1.0.7"
+    "@radix-ui/react-tooltip" "^1.0.7"
     classnames "^2.3.2"
     react "^18.2.0"
     react-dom "^18.2.0"