From a1e313cd2aa5eb766d182009d91cd23674cc48eb Mon Sep 17 00:00:00 2001
From: DariusIII <dkrisan@gmail.com>
Date: Fri, 26 Apr 2024 22:11:49 +0200
Subject: [PATCH] Update forum

---
 config/{forum.api.php => forum/api.php}       |  36 +-
 config/{forum.web.php => forum/frontend.php}  |  25 +-
 .../{forum.general.php => forum/general.php}  |   2 +-
 .../integration.php}                          |   0
 config/gearer.php                             |  24 --
 resources/css/app.css                         |   0
 resources/forum/blade-tailwind/css/forum.css  |  35 ++
 resources/forum/blade-tailwind/js/forum.js    | 154 +++++++
 .../views/category/index.blade.php            |  20 +
 .../views/category/manage.blade.php           | 115 ++++++
 .../views/category/modals/create.blade.php    |  31 ++
 .../views/category/modals/delete.blade.php    |  21 +
 .../views/category/modals/edit.blade.php      |  40 ++
 .../modals/mark-threads-as-read.blade.php     |  16 +
 .../category/partials/inputs/color.blade.php  |   5 +
 .../views/category/partials/list.blade.php    |  75 ++++
 .../views/category/partials/options.blade.php |  12 +
 .../views/category/show.blade.php             | 248 +++++++++++
 .../views/components/badge.blade.php          |  27 ++
 .../views/components/button-group.blade.php   |   3 +
 .../views/components/button-link.blade.php    |   3 +
 .../components/button-secondary.blade.php     |   3 +
 .../views/components/button.blade.php         |   3 +
 .../views/components/input.blade.php          |   1 +
 .../views/components/label.blade.php          |   3 +
 .../views/components/select.blade.php         |   5 +
 .../views/components/textarea.blade.php       |   1 +
 .../views/layouts/main.blade.php              |  94 +++++
 .../blade-tailwind/views/modal-form.blade.php |  30 ++
 .../blade-tailwind/views/pagination.blade.php |  46 +++
 .../views/partials/alert.blade.php            |  18 +
 .../views/partials/alerts.blade.php           |  11 +
 .../partials/breadcrumb-categories.blade.php  |   4 +
 .../views/partials/breadcrumbs.blade.php      |  16 +
 .../views/partials/timestamp.blade.php        |   1 +
 .../views/post/confirm-delete.blade.php       |  37 ++
 .../views/post/confirm-restore.blade.php      |  29 ++
 .../views/post/create.blade.php               |  32 ++
 .../blade-tailwind/views/post/edit.blade.php  |  29 ++
 .../views/post/partials/actions.blade.php     |  23 ++
 .../views/post/partials/list.blade.php        |  70 ++++
 .../views/post/partials/quote.blade.php       |  13 +
 .../blade-tailwind/views/post/show.blade.php  |  14 +
 .../views/thread/create.blade.php             |  25 ++
 .../thread/modals/mark-as-read.blade.php      |  14 +
 .../views/thread/partials/list.blade.php      |  52 +++
 .../views/thread/recent.blade.php             |  21 +
 .../views/thread/show.blade.php               | 391 ++++++++++++++++++
 .../views/thread/unread.blade.php             |  31 ++
 .../forum/livewire-tailwind/css/forum.css     |  83 ++++
 resources/forum/livewire-tailwind/js/forum.js |   9 +
 .../views/components/alerts.blade.php         |  64 +++
 .../breadcrumb-categories.blade.php           |   4 +
 .../views/components/breadcrumbs.blade.php    |  23 ++
 .../views/components/button.blade.php         |  21 +
 .../views/components/category/card.blade.php  | 103 +++++
 .../category/draggable-items.blade.php        |  18 +
 .../components/category/options.blade.php     |  10 +
 .../views/components/form/error.blade.php     |   3 +
 .../components/form/input-checkbox.blade.php  |  11 +
 .../components/form/input-select.blade.php    |  11 +
 .../components/form/input-text.blade.php      |  11 +
 .../components/form/input-textarea.blade.php  |  11 +
 .../views/components/group-button.blade.php   |  14 +
 .../icons/arrow-down-mini.blade.php           |   7 +
 .../icons/arrow-path-mini.blade.php           |   7 +
 .../icons/arrow-right-mini.blade.php          |   7 +
 .../icons/arrow-up-circle-mini.blade.php      |   7 +
 .../components/icons/arrow-up-mini.blade.php  |   7 +
 .../icons/book-open-outline.blade.php         |   9 +
 .../icons/chat-bubble-text-mini.blade.php     |   7 +
 .../icons/chat-bubble-text-outline.blade.php  |   7 +
 .../icons/chat-bubbles-mini.blade.php         |   8 +
 .../icons/chat-bubbles-outline.blade.php      |   7 +
 .../icons/drag-area-vertical.blade.php        |   7 +
 .../components/icons/home-mini.blade.php      |   7 +
 .../icons/lock-closed-mini.blade.php          |   7 +
 .../components/icons/lock-open-mini.blade.php |   7 +
 .../components/icons/pencil-mini.blade.php    |   7 +
 .../components/icons/pencil-outline.blade.php |   7 +
 .../components/icons/sparkles-mini.blade.php  |   7 +
 .../icons/squares-plus-outline.blade.php      |   9 +
 .../components/icons/subcategory.blade.php    |   7 +
 .../components/icons/trash-mini.blade.php     |   7 +
 .../views/components/icons/x-mark.blade.php   |   8 +
 .../views/components/link-button.blade.php    |  19 +
 .../components/loading-overlay.blade.php      |  15 +
 .../views/components/modal.blade.php          |  21 +
 .../views/components/pagination.blade.php     | 106 +++++
 .../views/components/pill.blade.php           |  14 +
 .../views/components/post/card.blade.php      | 101 +++++
 .../views/components/post/quote.blade.php     |  16 +
 .../views/components/thread/card.blade.php    |  95 +++++
 .../views/components/timestamp.blade.php      |  20 +
 .../views/layouts/main.blade.php              | 137 ++++++
 .../views/pages/category/create.blade.php     |  60 +++
 .../views/pages/category/edit.blade.php       | 107 +++++
 .../views/pages/category/index.blade.php      |  23 ++
 .../views/pages/category/manage.blade.php     |  83 ++++
 .../views/pages/category/show.blade.php       | 197 +++++++++
 .../views/pages/post/edit.blade.php           |  75 ++++
 .../views/pages/post/show.blade.php           |  17 +
 .../views/pages/thread/create.blade.php       |  36 ++
 .../views/pages/thread/recent.blade.php       |  22 +
 .../views/pages/thread/reply.blade.php        |  36 ++
 .../views/pages/thread/show.blade.php         | 369 +++++++++++++++++
 .../views/pages/thread/unread.blade.php       |  66 +++
 resources/js/app.js                           |   1 +
 resources/js/bootstrap.js                     |   4 +
 109 files changed, 4048 insertions(+), 50 deletions(-)
 rename config/{forum.api.php => forum/api.php} (86%)
 rename config/{forum.web.php => forum/frontend.php} (69%)
 rename config/{forum.general.php => forum/general.php} (98%)
 rename config/{forum.integration.php => forum/integration.php} (100%)
 delete mode 100644 config/gearer.php
 create mode 100644 resources/css/app.css
 create mode 100644 resources/forum/blade-tailwind/css/forum.css
 create mode 100644 resources/forum/blade-tailwind/js/forum.js
 create mode 100644 resources/forum/blade-tailwind/views/category/index.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/category/manage.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/category/modals/create.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/category/modals/delete.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/category/modals/edit.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/category/modals/mark-threads-as-read.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/category/partials/inputs/color.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/category/partials/list.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/category/partials/options.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/category/show.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/components/badge.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/components/button-group.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/components/button-link.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/components/button-secondary.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/components/button.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/components/input.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/components/label.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/components/select.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/components/textarea.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/layouts/main.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/modal-form.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/pagination.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/partials/alert.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/partials/alerts.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/partials/breadcrumb-categories.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/partials/breadcrumbs.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/partials/timestamp.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/post/confirm-delete.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/post/confirm-restore.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/post/create.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/post/edit.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/post/partials/actions.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/post/partials/list.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/post/partials/quote.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/post/show.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/thread/create.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/thread/modals/mark-as-read.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/thread/partials/list.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/thread/recent.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/thread/show.blade.php
 create mode 100644 resources/forum/blade-tailwind/views/thread/unread.blade.php
 create mode 100644 resources/forum/livewire-tailwind/css/forum.css
 create mode 100644 resources/forum/livewire-tailwind/js/forum.js
 create mode 100644 resources/forum/livewire-tailwind/views/components/alerts.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/breadcrumb-categories.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/breadcrumbs.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/button.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/category/card.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/category/draggable-items.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/category/options.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/form/error.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/form/input-checkbox.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/form/input-select.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/form/input-text.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/form/input-textarea.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/group-button.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/arrow-down-mini.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/arrow-path-mini.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/arrow-right-mini.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/arrow-up-circle-mini.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/arrow-up-mini.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/book-open-outline.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/chat-bubble-text-mini.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/chat-bubble-text-outline.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/chat-bubbles-mini.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/chat-bubbles-outline.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/drag-area-vertical.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/home-mini.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/lock-closed-mini.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/lock-open-mini.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/pencil-mini.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/pencil-outline.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/sparkles-mini.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/squares-plus-outline.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/subcategory.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/trash-mini.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/icons/x-mark.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/link-button.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/loading-overlay.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/modal.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/pagination.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/pill.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/post/card.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/post/quote.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/thread/card.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/components/timestamp.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/layouts/main.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/pages/category/create.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/pages/category/edit.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/pages/category/index.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/pages/category/manage.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/pages/category/show.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/pages/post/edit.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/pages/post/show.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/pages/thread/create.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/pages/thread/recent.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/pages/thread/reply.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/pages/thread/show.blade.php
 create mode 100644 resources/forum/livewire-tailwind/views/pages/thread/unread.blade.php
 create mode 100644 resources/js/app.js
 create mode 100644 resources/js/bootstrap.js

diff --git a/config/forum.api.php b/config/forum/api.php
similarity index 86%
rename from config/forum.api.php
rename to config/forum/api.php
index e54d1807f..75811cc2b 100644
--- a/config/forum.api.php
+++ b/config/forum/api.php
@@ -4,10 +4,10 @@ return [
 
     /*
     |--------------------------------------------------------------------------
-    | Enable/disable
+    | Enable/disable feature
     |--------------------------------------------------------------------------
     |
-    | Set to false if you want to effectively disable the API.
+    | Whether or not to enable the API feature.
     |
     */
 
@@ -24,21 +24,6 @@ return [
 
     'enable_search' => true,
 
-    /*
-    |--------------------------------------------------------------------------
-    | Resources
-    |--------------------------------------------------------------------------
-    |
-    | Override to return your own resources for API responses
-    |
-    */
-
-    'resources' => [
-        'category' => TeamTeaTime\Forum\Http\Resources\CategoryResource::class,
-        'thread' => TeamTeaTime\Forum\Http\Resources\ThreadResource::class,
-        'post' => TeamTeaTime\Forum\Http\Resources\PostResource::class,
-    ],
-
     /*
     |--------------------------------------------------------------------------
     | Router
@@ -51,9 +36,24 @@ return [
     'router' => [
         'prefix' => '/forum/api',
         'as' => 'forum.api.',
-        'namespace' => '\TeamTeaTime\Forum\Http\Controllers\Api',
+        'namespace' => '\\TeamTeaTime\\Forum\\Http\\Controllers\\Api',
         'middleware' => ['api', 'auth:api'],
         'auth_middleware' => ['auth:api'],
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Resources
+    |--------------------------------------------------------------------------
+    |
+    | Override to return your own resources for API responses.
+    |
+    */
+
+    'resources' => [
+        'category' => TeamTeaTime\Forum\Http\Resources\CategoryResource::class,
+        'thread' => TeamTeaTime\Forum\Http\Resources\ThreadResource::class,
+        'post' => TeamTeaTime\Forum\Http\Resources\PostResource::class,
+    ],
+
 ];
diff --git a/config/forum.web.php b/config/forum/frontend.php
similarity index 69%
rename from config/forum.web.php
rename to config/forum/frontend.php
index 5cf84265b..82433e8f2 100644
--- a/config/forum.web.php
+++ b/config/forum/frontend.php
@@ -4,28 +4,39 @@ return [
 
     /*
     |--------------------------------------------------------------------------
-    | Enable/disable
+    | Enable/disable feature
     |--------------------------------------------------------------------------
     |
-    | Set to false if you want to effectively disable the frontend.
+    | Whether or not to enable the frontend feature.
     |
     */
 
     'enable' => true,
 
+    /*
+    |--------------------------------------------------------------------------
+    | Preset
+    |--------------------------------------------------------------------------
+    |
+    | The frontend preset to use. Must be installed with the
+    | forum:preset-install command.
+    |
+    */
+
+    'preset' => 'livewire-tailwind',
+
     /*
     |--------------------------------------------------------------------------
     | Router
     |--------------------------------------------------------------------------
     |
-    | Web router config.
+    | Router config for the frontend routes.
     |
     */
 
     'router' => [
         'prefix' => '/forum',
         'as' => 'forum.',
-        'namespace' => '\TeamTeaTime\Forum\Http\Controllers\Web',
         'middleware' => ['web'],
         'auth_middleware' => ['auth'],
     ],
@@ -35,7 +46,7 @@ return [
     | Route Prefixes
     |--------------------------------------------------------------------------
     |
-    | Prefixes to use for each model.
+    | Prefixes to use for each model in frontend routes.
     |
     */
 
@@ -61,11 +72,11 @@ return [
     | Utility Class
     |--------------------------------------------------------------------------
     |
-    | Here we specify the class to use for various web utility methods.
+    | Here we specify the class to use for various frontend utility methods.
     | This is automatically aliased to 'Forum' for ease of use in views.
     |
     */
 
-    'utility_class' => TeamTeaTime\Forum\Support\Web\Forum::class,
+    'utility_class' => TeamTeaTime\Forum\Support\Frontend\Forum::class,
 
 ];
diff --git a/config/forum.general.php b/config/forum/general.php
similarity index 98%
rename from config/forum.general.php
rename to config/forum/general.php
index 776db8d37..f95132fa3 100644
--- a/config/forum.general.php
+++ b/config/forum/general.php
@@ -16,7 +16,7 @@ return [
     |
     */
 
-    'old_thread_threshold' => '30 days',
+    'old_thread_threshold' => '7 days',
 
     /*
     |--------------------------------------------------------------------------
diff --git a/config/forum.integration.php b/config/forum/integration.php
similarity index 100%
rename from config/forum.integration.php
rename to config/forum/integration.php
diff --git a/config/gearer.php b/config/gearer.php
deleted file mode 100644
index 2433d60c2..000000000
--- a/config/gearer.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-
-return [
-    /*
-    |--------------------------------------------------------------------------
-    | MyceliumGear authorization configuration
-    |--------------------------------------------------------------------------
-    */
-    'gateway_id' => env('MYCELIUM_GATEWAY_ID', ''),
-    'gateway_secret' => env('MYCELIUM_GATEWAY_SECRET', ''),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Default configuration
-    |--------------------------------------------------------------------------
-    |
-    | Define default callback data that will be used before any custom data are set
-    */
-    'defaults' => [
-        'callback_data' => [
-            //'foo' => 'bar'
-        ],
-    ],
-];
diff --git a/resources/css/app.css b/resources/css/app.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/resources/forum/blade-tailwind/css/forum.css b/resources/forum/blade-tailwind/css/forum.css
new file mode 100644
index 000000000..6e72d22ce
--- /dev/null
+++ b/resources/forum/blade-tailwind/css/forum.css
@@ -0,0 +1,35 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    .forum {
+        font-family: "Open Sans", sans-serif;
+        font-optical-sizing: auto;
+        font-weight: 400;
+        font-style: normal;
+        font-variation-settings: "wdth" 100;
+    }
+
+    h1 {
+        @apply text-4xl my-6;
+    }
+
+    h2 {
+        @apply text-2xl;
+    }
+
+    h3 {
+        @apply text-xl;
+    }
+
+    a {
+        @apply text-blue-500;
+    }
+
+    a:hover {
+        @apply text-blue-800;
+    }
+}
diff --git a/resources/forum/blade-tailwind/js/forum.js b/resources/forum/blade-tailwind/js/forum.js
new file mode 100644
index 000000000..828787a00
--- /dev/null
+++ b/resources/forum/blade-tailwind/js/forum.js
@@ -0,0 +1,154 @@
+import feather from 'feather-icons';
+import { createApp, ref, reactive, watch } from 'vue/dist/vue.esm-bundler.js';
+import axios from 'axios';
+import Pickr from '@simonwep/pickr';
+import draggable from 'vuedraggable/src/vuedraggable';
+
+import '@simonwep/pickr/dist/themes/classic.min.css';
+
+window.axios = axios;
+window.Vue = { createApp, ref, reactive, watch };
+window.VueDraggable = draggable;
+
+document.addEventListener('DOMContentLoaded', function () {
+    createApp({
+        setup() {
+            const isCollapsed = ref(true);
+            const isUserDropdownCollapsed = ref(true);
+
+            window.addEventListener('click', event => {
+                const ignore = ['navbar-toggler', 'navbar-toggler-icon', 'dropdown-toggle'];
+                if (ignore.some(className => event.target.classList.contains(className))) return;
+                if (!isCollapsed.value) isCollapsed.value = true;
+                if (!isUserDropdownCollapsed.value) isUserDropdownCollapsed.value = true;
+            });
+
+            return {
+                isCollapsed,
+                isUserDropdownCollapsed,
+            };
+        }
+    }).mount('.v-navbar');
+
+    function findModal(key)
+    {
+        const modal = document.querySelector(`[data-modal=${key}]`);
+
+        if (!modal) throw `Attempted to open modal '${key}' but no such modal found.`;
+
+        return modal;
+    }
+
+    function openModal(modal)
+    {
+        setTimeout(function()
+        {
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+        }, 200);
+    }
+
+    document.querySelectorAll('[data-open-modal]').forEach(item =>
+    {
+        item.addEventListener('click', event =>
+        {
+            event.preventDefault();
+
+            openModal(findModal(event.currentTarget.dataset.openModal));
+        });
+    });
+
+    document.querySelectorAll('[data-close-modal]').forEach(modalClose =>
+    {
+        modalClose.addEventListener('click', event =>
+        {
+            event.preventDefault
+
+            setTimeout(function()
+            {
+                modalClose.closest('[data-modal]').classList.remove('flex');
+                modalClose.closest('[data-modal]').classList.add('hidden');
+            }, 200);
+        });
+    });
+
+    document.querySelectorAll('[data-dismiss]').forEach(item =>
+    {
+        item.addEventListener('click', event => event.currentTarget.parentElement.style.display = 'none');
+    });
+
+    const hash = window.location.hash.substr(1);
+    if (hash.startsWith('modal='))
+    {
+        openModal(findModal(hash.replace('modal=','')));
+    }
+
+    feather.replace();
+
+    const input = document.querySelector('input[name=color]');
+
+    if (!input) return;
+
+    const pickr = Pickr.create({
+        el: '.pickr',
+        theme: 'classic',
+        default: input.value || null,
+
+        swatches: [
+            window.defaultCategoryColor,
+            '#f44336',
+            '#e91e63',
+            '#9c27b0',
+            '#673ab7',
+            '#3f51b5',
+            '#2196f3',
+            '#03a9f4',
+            '#00bcd4',
+            '#009688',
+            '#4caf50',
+            '#8bc34a',
+            '#cddc39',
+            '#ffeb3b',
+            '#ffc107'
+        ],
+
+        components: {
+            preview: true,
+            hue: true,
+            interaction: {
+                input: true,
+                save: true
+            }
+        },
+
+        strings: {
+            save: 'Apply'
+        }
+    });
+
+    pickr.on('save', instance => pickr.hide())
+        .on('clear', instance =>
+        {
+            input.value = '';
+            input.dispatchEvent(new Event('change'));
+        })
+        .on('cancel', instance =>
+        {
+            const selectedColor = instance
+                .getSelectedColor()
+                .toHEXA()
+                .toString();
+
+            input.value = selectedColor;
+            input.dispatchEvent(new Event('change'));
+        })
+        .on('change', (color, instance) =>
+        {
+            const selectedColor = color
+                .toHEXA()
+                .toString();
+
+            input.value = selectedColor;
+            input.dispatchEvent(new Event('change'));
+        });
+});
diff --git a/resources/forum/blade-tailwind/views/category/index.blade.php b/resources/forum/blade-tailwind/views/category/index.blade.php
new file mode 100644
index 000000000..93eeb6de4
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/category/index.blade.php
@@ -0,0 +1,20 @@
+{{-- $category is passed as NULL to the master layout view to prevent it from showing in the breadcrumbs --}}
+@extends ('forum::layouts.main', ['category' => null])
+
+@section ('content')
+    <div class="flex flex-row justify-between my-3">
+        <h2 class="grow text-3xl font-medium">{{ trans('forum::general.index') }}</h2>
+
+        @can ('createCategories')
+            <x-forum::button type="button" data-open-modal="create-category">
+                {{ trans('forum::categories.create') }}
+            </x-forum::button>
+
+            @include ('forum::category.modals.create')
+        @endcan
+    </div>
+
+    @foreach ($categories as $category)
+        @include ('forum::category.partials.list', ['titleClass' => 'lead'])
+    @endforeach
+@stop
diff --git a/resources/forum/blade-tailwind/views/category/manage.blade.php b/resources/forum/blade-tailwind/views/category/manage.blade.php
new file mode 100644
index 000000000..be48382b5
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/category/manage.blade.php
@@ -0,0 +1,115 @@
+@extends ('forum::layouts.main', ['category' => null, 'thread' => null, 'breadcrumbs_append' => [trans('forum::general.manage')]])
+
+@section ('content')
+    <div class="flex flex-row justify-between mb-2">
+        <h2 class="text-3xl font-medium my-3">{{ trans('forum::general.manage') }}</h2>
+
+        @can ('createCategories')
+            <x-forum::button type="button" data-open-modal="create-category" class="px-6">
+                {{ trans('forum::categories.create') }}
+            </x-forum::button>
+
+            @include ('forum::category.modals.create')
+        @endcan
+    </div>
+
+    <div id="manage-categories">
+        <draggable-category-list :categories="state.categories"></draggable-category-list>
+
+        <transition name="fade">
+            <div v-show="state.changesApplied" class="bg-green-100 mb-4 text-green-700 mt-3 px-4 py-3" role="alert">
+                {{ trans('forum::general.changes_applied') }}
+            </div>
+        </transition>
+
+        <div class="flex justify-end py-3">
+            <button type="button" class="bg-blue-500 text-white rounded py-2 px-8 hover:cursor-pointer disabled:opacity-50" :disabled="state.isSavingDisabled" @click="onSave">
+                {{ trans('forum::general.save') }}
+            </button>
+        </div>
+    </div>
+
+    <script type="text/x-template" id="draggable-category-list-template">
+        <draggable
+            :list="categories"
+            tag="ul"
+            @start="drag=true"
+            @end="drag=false"
+            :group="{ name: 'categories' }"
+            item-key="id">
+            <template #item="{element}">
+                <li class="bg-white p-4 my-2 rounded-md border" :data-id="element.id">
+                    <span class="flex">
+                        <span class="grow">
+                            <strong :style="{ color: element.color }">@{{ element.title }}</strong>
+                            <div class="text-muted">@{{ element.description }}</div>
+                        </span>
+                        <span>
+                            <a class="text-blue-500 hover:text-blue-800 px-3 py-2 text-sm ml-2" :href="element.route + '#modal=edit-category'">{{ trans('forum::general.edit') }}</a>
+                            <a class="bg-red-500 hover:bg-red-400 text-white hover:text-white px-3 py-2 text-sm rounded ml-2" :href="element.route + '#modal=delete-category'">{{ trans('forum::general.delete') }}</a>
+                        </span>
+                    </span>
+
+                    <draggable-category-list :categories="element.children" />
+                </li>
+            </template>
+        </draggable>
+    </script>
+
+    <script type="module">
+    const app = Vue.createApp({
+        setup() {
+            const state = Vue.reactive({
+                categories: @json($categories),
+                isSavingDisabled: true,
+                changesApplied: false,
+            });
+
+            Vue.watch(
+                () => state.categories,
+                async (newValue, oldValue) => {
+                    state.isSavingDisabled = false;
+                },
+                { deep: true }
+            );
+
+            function onSave()
+            {
+                state.isSavingDisabled = true;
+                state.changesApplied = false;
+
+                var payload = { categories: state.categories };
+                axios.post('{{ route('forum.bulk.category.manage') }}', payload)
+                    .then(response => {
+                        state.changesApplied = true;
+                        setTimeout(() => state.changesApplied = false, 3000);
+                    })
+                    .catch(error => {
+                        state.isSavingDisabled = false;
+                        console.log(error);
+                    });
+            }
+
+            return {
+                state,
+                onSave
+            };
+        }
+    });
+
+    app.component(
+        'Draggable',
+        VueDraggable
+    );
+
+    app.component(
+        'DraggableCategoryList',
+        {
+            props: ['categories'],
+            template: '#draggable-category-list-template',
+        }
+    );
+
+    app.mount('#manage-categories');
+    </script>
+@stop
diff --git a/resources/forum/blade-tailwind/views/category/modals/create.blade.php b/resources/forum/blade-tailwind/views/category/modals/create.blade.php
new file mode 100644
index 000000000..6d8301610
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/category/modals/create.blade.php
@@ -0,0 +1,31 @@
+@component('forum::modal-form')
+    @slot('key', 'create-category')
+    @slot('title', trans('forum::categories.create'))
+    @slot('route', Forum::route('category.store'))
+
+    <div class="mb-3">
+        <x-forum::label for="title">{{ trans('forum::general.title') }}</x-forum::label>
+        <x-forum::input type="text" name="title" value="{{ old('title') }}" class="w-full" />
+    </div>
+    <div class="mb-3">
+        <x-forum::label for="description">{{ trans('forum::general.description') }}</x-forum::label>
+        <x-forum::input type="text" name="description" value="{{ old('description') }}" class="w-full" />
+    </div>
+    <div class="mb-3">
+        <div class="form-check">
+            <input class="form-check-input" type="checkbox" name="accepts_threads" id="accepts-threads" value="1" {{ old('accepts_threads') ? 'checked' : '' }}>
+            <label class="form-check-label" for="accepts-threads">{{ trans('forum::categories.enable_threads') }}</label>
+        </div>
+    </div>
+    <div class="mb-3">
+        <div>
+            <input type="checkbox" name="is_private" id="is-private" value="1" {{ old('is_private') ? 'checked' : '' }}>
+            <label for="is-private">{{ trans('forum::categories.make_private') }}</label>
+        </div>
+    </div>
+    @include ('forum::category.partials.inputs.color')
+
+    @slot('actions')
+        <x-forum::button type="submit">{{ trans('forum::general.create') }}</x-forum::button>
+    @endslot
+@endcomponent
diff --git a/resources/forum/blade-tailwind/views/category/modals/delete.blade.php b/resources/forum/blade-tailwind/views/category/modals/delete.blade.php
new file mode 100644
index 000000000..e313edb40
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/category/modals/delete.blade.php
@@ -0,0 +1,21 @@
+@component('forum::modal-form')
+    @slot('key', 'delete-category')
+    @slot('title', trans('forum::general.delete'))
+    @slot('route', Forum::route('category.delete', $category))
+    @slot('method', 'DELETE')
+
+    {{ trans('forum::general.generic_confirm') }}
+
+    @if(!$category->isEmpty())
+        <div class="form-check mt-3">
+            <input class="form-check-input" type="checkbox" value="1" name="force" id="forceDelete">
+            <label class="form-check-label" for="forceDelete">
+                {{ trans('forum::categories.confirm_nonempty_delete') }}
+            </label>
+        </div>
+    @endif
+
+    @slot('actions')
+        <x-forum::button type="submit" class="bg-red-500 hover:bg-red-400">{{ trans('forum::general.delete') }}</x-forum::button>
+    @endslot
+@endcomponent
diff --git a/resources/forum/blade-tailwind/views/category/modals/edit.blade.php b/resources/forum/blade-tailwind/views/category/modals/edit.blade.php
new file mode 100644
index 000000000..c5a6ce3a0
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/category/modals/edit.blade.php
@@ -0,0 +1,40 @@
+@component('forum::modal-form')
+    @slot('key', 'edit-category')
+    @slot('title', trans('forum::general.edit'))
+    @slot('route', Forum::route('category.update', $category))
+    @slot('method', 'PATCH')
+
+    <div class="mb-3">
+        <x-forum::label for="title">{{ trans('forum::general.title') }}</x-forum::label>
+        <x-forum::input type="text" name="title" value="{{ old('title') ?? $category->title }}" class="w-full" />
+    </div>
+    <div class="mb-3">
+        <x-forum::label for="description">{{ trans('forum::general.description') }}</x-forum::label>
+        <x-forum::input type="text" name="description" value="{{ old('description') ?? $category->description }}" class="w-full" />
+    </div>
+    <div class="mb-3">
+        <div class="form-check">
+            <input type="hidden" name="accepts_threads" value="0" />
+            <input class="form-check-input" type="checkbox" name="accepts_threads" id="accepts-threads" value="1" {{ $category->accepts_threads ? 'checked' : '' }}>
+            <label class="form-check-label" for="accepts-threads">{{ trans('forum::categories.enable_threads') }}</label>
+        </div>
+    </div>
+    <div class="mb-3">
+        <div class="form-check">
+            <input type="hidden" name="is_private" value="0" />
+            <input class="form-check-input" type="checkbox" name="is_private" id="is-private" value="1" {{ $category->is_private ? 'checked' : '' }} {{ $privateAncestor != null ? 'disabled' : '' }}>
+            <label class="form-check-label" for="is-private">{{ trans('forum::categories.make_private') }}</label>
+        </div>
+    </div>
+    @if ($privateAncestor != null)
+        <div class="alert alert-primary" role="alert">
+            {!! trans('forum::categories.access_controlled_by_private_ancestor', ['category' => "<a href=\"{$privateAncestor->route}\">{$privateAncestor->title}</a>"]) !!}
+        </div>
+    @endif
+
+    @include ('forum::category.partials.inputs.color')
+
+    @slot('actions')
+        <x-forum::button type="submit">{{ trans('forum::general.save') }}</x-forum::button>
+    @endslot
+@endcomponent
diff --git a/resources/forum/blade-tailwind/views/category/modals/mark-threads-as-read.blade.php b/resources/forum/blade-tailwind/views/category/modals/mark-threads-as-read.blade.php
new file mode 100644
index 000000000..b2fc42d07
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/category/modals/mark-threads-as-read.blade.php
@@ -0,0 +1,16 @@
+@component('forum::modal-form')
+    @slot('key', 'mark-threads-as-read')
+    @slot('title', trans('forum::categories.mark_read'))
+    @slot('route', Forum::route('unread.mark-as-read'))
+    @slot('method', 'PATCH')
+
+    <input type="hidden" name="category_id" value="{{ $category->id }}" />
+
+    <p>{{ trans('forum::general.generic_confirm') }}</p>
+
+    @slot('actions')
+        <x-forum::button type="submit">
+            {{ trans('forum::general.mark_read') }}
+        </x-forum::button>
+    @endslot
+@endcomponent
diff --git a/resources/forum/blade-tailwind/views/category/partials/inputs/color.blade.php b/resources/forum/blade-tailwind/views/category/partials/inputs/color.blade.php
new file mode 100644
index 000000000..37f675ba8
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/category/partials/inputs/color.blade.php
@@ -0,0 +1,5 @@
+<div class="mb-3">
+    <label for="color">{{ trans('forum::general.color') }}</label>
+    <div class="pickr"></div>
+    <input type="hidden" value="{{ isset($category->color_light_mode) ? $category->color_light_mode : (old('color') ?? config('forum.frontend.default_category_color')) }}" name="color">
+</div>
diff --git a/resources/forum/blade-tailwind/views/category/partials/list.blade.php b/resources/forum/blade-tailwind/views/category/partials/list.blade.php
new file mode 100644
index 000000000..b92a05463
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/category/partials/list.blade.php
@@ -0,0 +1,75 @@
+<div class="my-4">
+    <div class="bg-white shadow rounded-md relative">
+        <div class="flex flex-col md:items-start md:flex-row md:justify-between md:gap-4 p-6">
+            <div class="md:w-3/6 text-center md:text-left">
+                <h5 class="text-lg">
+                    <a href="{{ Forum::route('category.show', $category) }}" style="color: {{ $category->color_light_mode }};">{{ $category->title }}</a>
+                </h5>
+                <p class="text-gray-500">{{ $category->description }}</p>
+            </div>
+            <div class="md:w-1/6 flex flex-col items-center gap-1 mt-2 md:mt-0">
+                @if ($category->accepts_threads)
+                    <x-forum::badge style="background: {{ $category->color_light_mode }};">
+                        {{ trans_choice('forum::threads.thread', 2) }}: {{ $category->thread_count }}
+                    </x-forum::badge>
+                    <x-forum::badge style="background: {{ $category->color_light_mode }};">
+                        {{ trans_choice('forum::posts.post', 2) }}: {{ $category->post_count }}
+                    </x-forum::badge>
+                @endif
+            </div>
+            <div class="md:w-2/6 text-gray-500 text-center md:text-right mt-2 md:mt-0">
+                @if ($category->accepts_threads)
+                    @if ($category->newestThread)
+                        <div>
+                            <a href="{{ Forum::route('thread.show', $category->newestThread) }}" class="mr-1">{{ $category->newestThread->title }}</a>
+                            @include ('forum::partials.timestamp', ['carbon' => $category->newestThread->created_at])
+                        </div>
+                    @endif
+                    @if ($category->latestActiveThread && $category->latestActiveThread->post_count > 1)
+                        <div>
+                            <a href="{{ Forum::route('thread.show', $category->latestActiveThread->lastPost) }}" class="mr-1">Re: {{ $category->latestActiveThread->title }}</a>
+                            @include ('forum::partials.timestamp', ['carbon' => $category->latestActiveThread->lastPost->created_at])
+                        </div>
+                    @endif
+                @endif
+            </div>
+        </div>
+    </div>
+
+    @if ($category->children->count() > 0)
+        <div class="subcategories">
+            @foreach ($category->children as $subcategory)
+                <div class="bg-white -mt-1 shadow rounded-b-md">
+                    <div class="flex flex-col md:items-start md:flex-row md:justify-between md:gap-4 p-6">
+                        <div class="md:w-3/6 text-center md:text-left">
+                            <a href="{{ Forum::route('category.show', $subcategory) }}" style="color: {{ $subcategory->color_light_mode }};">{{ $subcategory->title }}</a>
+                            <div class="text-muted">{{ $subcategory->description }}</div>
+                        </div>
+                        <div class="md:w-1/6 flex flex-col items-center gap-1 mt-2 md:mt-0">
+                            <x-forum::badge style="background: {{ $subcategory->color_light_mode }};">
+                                {{ trans_choice('forum::threads.thread', 2) }}: {{ $subcategory->thread_count }}
+                            </x-forum::badge>
+                            <x-forum::badge style="background: {{ $subcategory->color_light_mode }};">
+                                {{ trans_choice('forum::posts.post', 2) }}: {{ $subcategory->post_count }}
+                            </x-forum::badge>
+                        </div>
+                        <div class="md:w-2/6 text-gray-500 md:items-end text-center md:text-right mt-2 md:mt-0">
+                            @if ($subcategory->newestThread)
+                                <div>
+                                    <a href="{{ Forum::route('thread.show', $subcategory->newestThread) }}" class="mr-1">{{ $subcategory->newestThread->title }}</a>
+                                    @include ('forum::partials.timestamp', ['carbon' => $subcategory->newestThread->created_at])
+                                </div>
+                            @endif
+                            @if ($subcategory->latestActiveThread && $subcategory->latestActiveThread->post_count > 1)
+                                <div>
+                                    <a href="{{ Forum::route('thread.show', $subcategory->latestActiveThread->lastPost) }}" class="mr-1">Re: {{ $subcategory->latestActiveThread->title }}</a>
+                                    @include ('forum::partials.timestamp', ['carbon' => $subcategory->latestActiveThread->lastPost->created_at])
+                                </div>
+                            @endif
+                        </div>
+                    </div>
+                </div>
+            @endforeach
+        </div>
+    @endif
+</div>
diff --git a/resources/forum/blade-tailwind/views/category/partials/options.blade.php b/resources/forum/blade-tailwind/views/category/partials/options.blade.php
new file mode 100644
index 000000000..338024af2
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/category/partials/options.blade.php
@@ -0,0 +1,12 @@
+@foreach ($categories as $cat)
+    @if (!isset($hide) || (isset($hide) && $cat->id != $hide->id))
+        <option value="{{ $cat->id }}" {{ (isset($category) && $cat->id == $category->id) ? 'selected' : '' }}>
+            @for ($i = 0; $i < $cat->depth; $i++)- @endfor
+            {{ $cat->title }}
+        </option>
+    @endif
+
+    @if ($cat->children)
+        @include ('forum::category.partials.options', ['categories' => $cat->children])
+    @endif
+@endforeach
diff --git a/resources/forum/blade-tailwind/views/category/show.blade.php b/resources/forum/blade-tailwind/views/category/show.blade.php
new file mode 100644
index 000000000..e8f5591a7
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/category/show.blade.php
@@ -0,0 +1,248 @@
+{{-- $thread is passed as NULL to the master layout view to prevent it from showing in the breadcrumbs --}}
+@extends('forum::layouts.main', ['thread' => null])
+
+@section('content')
+    <div class="flex flex-row justify-between mb-2">
+        <h2 class="text-3xl" style="color: {{ $category->color_light_mode }};">
+            {{ $category->title }} &nbsp;
+            @if ($category->description)
+                <small>{{ $category->description }}</small>
+            @endif
+        </h2>
+    </div>
+
+    <div id="category">
+        <div class="flex justify-between flex-row-reverse">
+            @if ($category->accepts_threads)
+                @can ('createThreads', $category)
+                    <x-forum::button-link href="{{ Forum::route('thread.create', $category) }}" class="float-end">{{ trans('forum::threads.new_thread') }}</x-forum::button-link>
+                @endcan
+            @endif
+
+            <x-forum::button-group>
+                @can ('editCategories')
+                    @can ('edit', $category)
+                        <x-forum::button-secondary type="button" data-open-modal="edit-category">
+                            {{ trans('forum::general.edit') }}
+                        </x-forum::button-secondary>
+                    @endcan
+                @endcan
+            </x-forum::button-group>
+        </div>
+
+        @if (!$category->children->isEmpty())
+            @foreach ($category->children as $subcategory)
+                @include ('forum::category.partials.list', ['category' => $subcategory])
+            @endforeach
+        @endif
+
+        @if ($category->accepts_threads)
+            @if (!$threads->isEmpty())
+                <div class="mt-4">
+                    {{ $threads->links('forum::pagination') }}
+                </div>
+
+                @if (count($selectableThreadIds) > 0)
+                    @can ('manageThreads', $category)
+                        <form :action="actions[state.selectedAction]" method="POST">
+                            @csrf
+                            <input type="hidden" name="_method" :value="actionMethods[state.selectedAction]" />
+
+                            <div class="text-end mt-2">
+                                <div class="form-check">
+                                    <label for="selectAllThreads">
+                                        {{ trans('forum::threads.select_all') }}
+                                    </label>
+                                    <input type="checkbox" value="" id="selectAllThreads" class="align-middle" @click="toggleAll" :checked="state.selectedThreads.length == selectableThreadIds.length">
+                                </div>
+                            </div>
+                    @endcan
+                @endif
+
+                <div class="threads list-group my-3 shadow-sm">
+                    @foreach ($threads as $thread)
+                        @include ('forum::thread.partials.list')
+                    @endforeach
+                </div>
+
+                @if (count($selectableThreadIds) > 0)
+                    @can ('manageThreads', $category)
+                            <div class="fixed bottom-0 right-0 m-2" style="z-index: 1000;" v-if="state.selectedThreads.length">
+                                <div class="bg-white shadow-sm rounded-md min-w-96 max-w-full">
+                                    <div class="border-b text-center py-4 px-6">
+                                        {{ trans('forum::general.with_selection') }}
+                                    </div>
+                                    <div class="p-6">
+                                        <div class="mb-3">
+                                            <div>
+                                                <x-forum::label for="bulk-actions">{{ trans_choice('forum::general.actions', 1) }}</x-forum::label>
+                                            </div>
+
+                                            <x-forum::select id="bulk-actions" v-model="state.selectedAction">
+                                                @can ('deleteThreads', $category)
+                                                    <option value="delete">{{ trans('forum::general.delete') }}</option>
+                                                @endcan
+                                                @can ('restoreThreads', $category)
+                                                    <option value="restore">{{ trans('forum::general.restore') }}</option>
+                                                @endcan
+                                                @can ('moveThreadsFrom', $category)
+                                                    <option value="move">{{ trans('forum::general.move') }}</option>
+                                                @endcan
+                                                @can ('lockThreads', $category)
+                                                    <option value="lock">{{ trans('forum::threads.lock') }}</option>
+                                                    <option value="unlock">{{ trans('forum::threads.unlock') }}</option>
+                                                @endcan
+                                                @can ('pinThreads', $category)
+                                                    <option value="pin">{{ trans('forum::threads.pin') }}</option>
+                                                    <option value="unpin">{{ trans('forum::threads.unpin') }}</option>
+                                                @endcan
+                                            </x-forum::select>
+                                        </div>
+
+                                        <div class="mb-3" v-if="state.selectedAction == 'move'">
+                                            <div>
+                                                <label for="category-id">{{ trans_choice('forum::categories.category', 1) }}</label>
+                                            </div>
+                                            <x-forum::select name="category_id" id="category-id">
+                                                @include ('forum::category.partials.options', [
+                                                    'categories' => $threadDestinationCategories,
+                                                    'hide' => $category
+                                                ])
+                                            </x-forum::select>
+                                        </div>
+
+                                        @if (config('forum.general.soft_deletes'))
+                                            <div class="mb-3" v-if="state.selectedAction == 'delete'">
+                                                <input class="form-check-input" type="checkbox" name="permadelete" value="1" id="permadelete">
+                                                <label class="form-check-label" for="permadelete">
+                                                    {{ trans('forum::general.perma_delete') }}
+                                                </label>
+                                            </div>
+                                        @endif
+
+                                        <div class="text-end">
+                                            <button type="submit" class="bg-blue-500 text-white rounded-md px-3 py-1" @click="submit" :disabled="state.selectedAction == null">{{ trans('forum::general.proceed') }}</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </form>
+                    @endcan
+                @endif
+            @else
+                <div class="card my-3">
+                    <div class="card-body">
+                        {{ trans('forum::threads.none_found') }}
+                        @can ('createThreads', $category)
+                            <br>
+                            <a href="{{ Forum::route('thread.create', $category) }}">{{ trans('forum::threads.post_the_first') }}</a>
+                        @endcan
+                    </div>
+                </div>
+            @endif
+
+            <div class="row">
+                <div class="col col-xs-8">
+                    {{ $threads->links('forum::pagination') }}
+                </div>
+                <div class="col col-xs-4 text-end">
+                    @if ($category->accepts_threads)
+                        @can ('createThreads', $category)
+                            <x-forum::button-link href="{{ Forum::route('thread.create', $category) }}">{{ trans('forum::threads.new_thread') }}</x-forum::button-link>
+                        @endcan
+                    @endif
+                </div>
+            </div>
+        @endif
+    </div>
+
+    @if (!$threads->isEmpty())
+        @can ('markThreadsAsRead')
+            <div class="text-center mt-3">
+                <x-forum::button class="inline-flex px-6 items-center gap-2" data-open-modal="mark-threads-as-read">
+                    <i data-feather="book"></i> {{ trans('forum::general.mark_read') }}
+                </x-forum::button>
+            </div>
+
+            @include ('forum::category.modals.mark-threads-as-read')
+        @endcan
+    @endif
+
+    @can ('editCategories')
+        @can ('edit', $category)
+            @include ('forum::category.modals.edit')
+        @endcan
+    @endcan
+    @can ('deleteCategories')
+        @can ('delete', $category)
+            @include ('forum::category.modals.delete')
+        @endcan
+    @endcan
+
+    <script type="module">
+    Vue.createApp({
+        setup() {
+            const selectableThreadIds = @json($selectableThreadIds);
+
+            const actions = {
+                delete: "{{ Forum::route('bulk.thread.delete') }}",
+                restore: "{{ Forum::route('bulk.thread.restore') }}",
+                lock: "{{ Forum::route('bulk.thread.lock') }}",
+                unlock: "{{ Forum::route('bulk.thread.unlock') }}",
+                pin: "{{ Forum::route('bulk.thread.pin') }}",
+                unpin: "{{ Forum::route('bulk.thread.unpin') }}",
+                move: "{{ Forum::route('bulk.thread.move') }}"
+            };
+
+            const actionMethods = {
+                delete: 'DELETE',
+                restore: 'POST',
+                lock: 'POST',
+                unlock: 'POST',
+                pin: 'POST',
+                unpin: 'POST',
+                move: 'POST'
+            };
+
+            const state = Vue.reactive({
+                selectedAction: null,
+                selectedThreads: [],
+                isEditModalOpen: false,
+                isDeleteModalOpen: false
+            });
+
+            function toggleAll()
+            {
+                state.selectedThreads = (state.selectedThreads.length < selectableThreadIds.length) ? selectableThreadIds : [];
+            }
+
+            function submit(event)
+            {
+                if (actionMethods[state.selectedAction] === 'DELETE' && !confirm("{{ trans('forum::general.generic_confirm') }}"))
+                {
+                    event.preventDefault();
+                }
+            }
+
+            function onClickModal(event)
+            {
+                if (event.target.classList.contains('modal'))
+                {
+                    state.isEditModalOpen = false;
+                    state.isDeleteModalOpen = false;
+                }
+            }
+
+            return {
+                selectableThreadIds,
+                actions,
+                actionMethods,
+                state,
+                toggleAll,
+                submit,
+                onClickModal,
+            };
+        }
+    }).mount('#category');
+    </script>
+@stop
diff --git a/resources/forum/blade-tailwind/views/components/badge.blade.php b/resources/forum/blade-tailwind/views/components/badge.blade.php
new file mode 100644
index 000000000..652c1cc0b
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/components/badge.blade.php
@@ -0,0 +1,27 @@
+@props([
+    'type' => 'default'
+])
+
+@php
+switch($type) {
+    case('info'):
+        $color = 'bg-blue-500';
+        break;
+
+    case('danger'):
+        $color = 'bg-red-500';
+        break;
+
+    case('warning'):
+        $color = 'bg-orange-500';
+        break;
+
+    default:
+        $color = 'bg-gray-400';
+        break;
+}
+@endphp
+
+<span {{ $attributes->merge(['class' => "$color rounded-full px-2 py-1 text-white text-xs font-semibold"]) }}>
+    {{ $slot }}
+</span>
diff --git a/resources/forum/blade-tailwind/views/components/button-group.blade.php b/resources/forum/blade-tailwind/views/components/button-group.blade.php
new file mode 100644
index 000000000..008539dc3
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/components/button-group.blade.php
@@ -0,0 +1,3 @@
+<div class="flex flex-wrap items-center [&_a:first-child]:rounded-r-none [&_a:not(:first-child):not(:last-child)]:rounded-none [&_a:last-child]:rounded-l-none" role="group">
+    {{ $slot }}
+</div>
diff --git a/resources/forum/blade-tailwind/views/components/button-link.blade.php b/resources/forum/blade-tailwind/views/components/button-link.blade.php
new file mode 100644
index 000000000..6968d4e44
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/components/button-link.blade.php
@@ -0,0 +1,3 @@
+<a {{ $attributes->merge(['class' => 'bg-blue-500 hover:bg-blue-400 text-white font-semibold hover:text-white px-3 py-2 rounded-md inline-block']) }}>
+    {{ $slot }}
+</a>
diff --git a/resources/forum/blade-tailwind/views/components/button-secondary.blade.php b/resources/forum/blade-tailwind/views/components/button-secondary.blade.php
new file mode 100644
index 000000000..519f991fa
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/components/button-secondary.blade.php
@@ -0,0 +1,3 @@
+<button {{ $attributes->merge(['class' => 'bg-gray-300 hover:bg-gray-200 text-gray-600 font-semibold px-3 py-2 rounded-md inline-block']) }}>
+    {{ $slot }}
+</button>
diff --git a/resources/forum/blade-tailwind/views/components/button.blade.php b/resources/forum/blade-tailwind/views/components/button.blade.php
new file mode 100644
index 000000000..afccd7b4e
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/components/button.blade.php
@@ -0,0 +1,3 @@
+<button {{ $attributes->merge(['class' => 'bg-blue-500 hover:bg-blue-400 text-white font-semibold px-3 py-2 rounded-md inline-block']) }}>
+    {{ $slot }}
+</button>
diff --git a/resources/forum/blade-tailwind/views/components/input.blade.php b/resources/forum/blade-tailwind/views/components/input.blade.php
new file mode 100644
index 000000000..2e221f669
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/components/input.blade.php
@@ -0,0 +1 @@
+<input {{ $attributes->merge(['type' => 'text', 'class' => 'px-3 py-1 border-gray-300 focus:border-blue-500 focus:ring-blue-500 rounded-md border shadow-sm']) }}>
diff --git a/resources/forum/blade-tailwind/views/components/label.blade.php b/resources/forum/blade-tailwind/views/components/label.blade.php
new file mode 100644
index 000000000..4d9a6b565
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/components/label.blade.php
@@ -0,0 +1,3 @@
+<label {{ $attributes->merge(['class' => 'block w-full mb-1']) }}>
+    {{ $slot }}
+</label>
diff --git a/resources/forum/blade-tailwind/views/components/select.blade.php b/resources/forum/blade-tailwind/views/components/select.blade.php
new file mode 100644
index 000000000..2df5e15da
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/components/select.blade.php
@@ -0,0 +1,5 @@
+<div class="inline-block relative w-64">
+    <select {{ $attributes->merge(['class' => 'block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline']) }}>
+        {{ $slot }}
+    </select>
+</div>
diff --git a/resources/forum/blade-tailwind/views/components/textarea.blade.php b/resources/forum/blade-tailwind/views/components/textarea.blade.php
new file mode 100644
index 000000000..01483e3bd
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/components/textarea.blade.php
@@ -0,0 +1 @@
+<textarea {{ $attributes->merge(['type' => 'text', 'class' => 'px-3 py-1 border-gray-300 focus:border-blue-500 focus:ring-blue-500 rounded-md border shadow-sm']) }}>{{ $slot }}</textarea>
diff --git a/resources/forum/blade-tailwind/views/layouts/main.blade.php b/resources/forum/blade-tailwind/views/layouts/main.blade.php
new file mode 100644
index 000000000..8457adbdd
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/layouts/main.blade.php
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>
+        @if (isset($thread_title))
+            {{ $thread_title }} —
+        @endif
+        @if (isset($category))
+            {{ $category->title }} —
+        @endif
+        {{ trans('forum::general.home_title') }}
+    </title>
+
+    @vite(['resources/forum/blade-tailwind/css/forum.css', 'resources/forum/blade-tailwind/js/forum.js'])
+</head>
+<body class="forum bg-gray-100">
+    <nav id="navbar" class="bg-white shadow py-4">
+        <div class="container mx-auto px-4 md:flex md:items-center md:gap-4">
+            <div class="flex justify-between items-center">
+                <a class="text-lg font-semibold" href="{{ url(config('forum.frontend.router.prefix')) }}">Laravel Forum</a>
+                <button class="navbar-toggler block md:hidden border rounded-md px-2 py-1" type="button" :class="{ collapsed: isCollapsed }" @click="isCollapsed = !isCollapsed">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="navbar-toggler-icon w-6 h-6">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+                    </svg>
+                </button>
+            </div>
+            <div class="grow justify-between navbar-collapse" :class="{ 'flex flex-col': !isCollapsed, 'hidden md:flex': isCollapsed }">
+                <ul class="flex flex-col md:flex-row gap-3 mb-4 md:mb-0">
+                    <li>
+                        <a class="text-gray-500 hover:text-gray-800" href="{{ url(config('forum.frontend.router.prefix')) }}">{{ trans('forum::general.index') }}</a>
+                    </li>
+                    <li>
+                        <a class="text-gray-500 hover:text-gray-800" href="{{ route('forum.recent') }}">{{ trans('forum::threads.recent') }}</a>
+                    </li>
+                    @auth
+                        <li>
+                            <a class="text-gray-500 hover:text-gray-800" href="{{ route('forum.unread') }}">{{ trans('forum::threads.unread_updated') }}</a>
+                        </li>
+                    @endauth
+                    @can ('moveCategories')
+                        <li>
+                            <a class="text-gray-500 hover:text-gray-800" href="{{ route('forum.category.manage') }}">{{ trans('forum::general.manage') }}</a>
+                        </li>
+                    @endcan
+                </ul>
+                <ul class="navbar-nav flex gap-4 flex-col md:flex-row">
+                    @if (Auth::check())
+                        <li class="nav-item dropdown relative">
+                            <a class="dropdown-toggle text-gray-500 flex items-center gap-1" href="#" id="navbarDropdownMenuLink" @click="isUserDropdownCollapsed = !isUserDropdownCollapsed">
+                                {{ $username }}
+
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                                </svg>
+                            </a>
+                            <div class="border absolute left-0 bg-white rounded-md w-44 divide-y" :class="{ hidden: isUserDropdownCollapsed }" aria-labelledby="navbarDropdownMenuLink">
+                                <a class="block px-4 py-2" href="{{ url('/logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
+                                    Log out
+                                </a>
+                                <form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
+                                    @csrf
+                                </form>
+                            </div>
+                        </li>
+                    @else
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ url('/login') }}">Log in</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ url('/register') }}">Register</a>
+                        </li>
+                    @endif
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <div id="main" class="container mx-auto p-4">
+        @include ('forum::partials.breadcrumbs')
+        @include ('forum::partials.alerts')
+
+        @yield('content')
+    </div>
+
+    @yield('footer')
+
+    <script>
+        window.defaultCategoryColor = '{{ config('forum.frontend.default_category_color') }}';
+    </script>
+</body>
+</html>
diff --git a/resources/forum/blade-tailwind/views/modal-form.blade.php b/resources/forum/blade-tailwind/views/modal-form.blade.php
new file mode 100644
index 000000000..35d368f2c
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/modal-form.blade.php
@@ -0,0 +1,30 @@
+<div tabindex="-1" role="dialog" data-modal="{{ $key }}" class="fixed top-0 left-0 w-full h-full hidden z-10 items-center justify-center">
+    <div class="fixed top-0 left-0 w-full h-full bg-black/25" data-close-modal></div>
+    <div class="relative bg-white rounded-md max-w-screen-sm w-full m-2" role="document">
+        <div class="">
+            <div class="border-b px-6 py-4 flex justify-between">
+                <h5 class="text-xl font-medium flex items-center gap-1">{!!$title !!}</h5>
+                <button type="button" aria-label="Close" data-close-modal>
+                    <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="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+            <form action="{{ $route }}" method="POST">
+                @csrf
+                @if (isset($method))
+                    @method($method)
+                @endif
+
+                <div class="p-6">
+                    {{ $slot }}
+                </div>
+
+                <div class="border-t px-6 py-4 flex justify-end gap-4">
+                    <x-forum::button-secondary type="button" class="btn btn-secondary" data-close-modal>{{ trans('forum::general.cancel') }}</x-forum::button-secondary>
+                    {{ $actions }}
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
diff --git a/resources/forum/blade-tailwind/views/pagination.blade.php b/resources/forum/blade-tailwind/views/pagination.blade.php
new file mode 100644
index 000000000..63c6f56b5
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/pagination.blade.php
@@ -0,0 +1,46 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
+                    <span class="page-link" aria-hidden="true">&lsaquo;</span>
+                </li>
+            @else
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
+                </li>
+            @endif
+
+            {{-- Pagination Elements --}}
+            @foreach ($elements as $element)
+                {{-- "Three Dots" Separator --}}
+                @if (is_string($element))
+                    <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
+                @endif
+
+                {{-- Array Of Links --}}
+                @if (is_array($element))
+                    @foreach ($element as $page => $url)
+                        @if ($page == $paginator->currentPage())
+                            <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>
+                        @else
+                            <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
+                        @endif
+                    @endforeach
+                @endif
+            @endforeach
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
+                </li>
+            @else
+                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
+                    <span class="page-link" aria-hidden="true">&rsaquo;</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/forum/blade-tailwind/views/partials/alert.blade.php b/resources/forum/blade-tailwind/views/partials/alert.blade.php
new file mode 100644
index 000000000..e3c1b5dee
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/partials/alert.blade.php
@@ -0,0 +1,18 @@
+@php
+$colorClasses = match ($type) {
+    'primary', '', null => 'bg-blue-100 text-blue-700',
+    'success', '', null => 'bg-green-100 text-green-700',
+    'danger' => 'bg-orange-100 text-orange-700'
+};
+@endphp
+
+<div class="alert alert-{{ $type }} alert-dismissable rounded-md my-4 p-4 flex justify-between gap-4 {{ $colorClasses }}">
+    <div class="message">
+        {!! $message !!}
+    </div>
+    <button type="button" data-dismiss="alert" aria-hidden="true">
+        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+        </svg>
+    </button>
+</div>
diff --git a/resources/forum/blade-tailwind/views/partials/alerts.blade.php b/resources/forum/blade-tailwind/views/partials/alerts.blade.php
new file mode 100644
index 000000000..e2a0e35a9
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/partials/alerts.blade.php
@@ -0,0 +1,11 @@
+@if (Session::has('alerts'))
+    @foreach (Session::get('alerts') as $alert)
+        @include ('forum::partials.alert', $alert)
+    @endforeach
+@endif
+
+@if (isset($errors) && !$errors->isEmpty())
+    @foreach ($errors->all() as $error)
+        @include ('forum::partials.alert', ['type' => 'danger', 'message' => $error])
+    @endforeach
+@endif
diff --git a/resources/forum/blade-tailwind/views/partials/breadcrumb-categories.blade.php b/resources/forum/blade-tailwind/views/partials/breadcrumb-categories.blade.php
new file mode 100644
index 000000000..521e55241
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/partials/breadcrumb-categories.blade.php
@@ -0,0 +1,4 @@
+@if ($category->parent !== null)
+    @include ('forum::partials.breadcrumb-categories', ['category' => $category->parent])
+@endif
+<li class=""><a href="{{ Forum::route('category.show', $category) }}" class="text-blue-500">{{ $category->title }}</a></li>
diff --git a/resources/forum/blade-tailwind/views/partials/breadcrumbs.blade.php b/resources/forum/blade-tailwind/views/partials/breadcrumbs.blade.php
new file mode 100644
index 000000000..b60634275
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/partials/breadcrumbs.blade.php
@@ -0,0 +1,16 @@
+<nav aria-label="breadcrumb" class="mb-4">
+    <ol class="flex flex-wrap [&_li]:after:content-['/'] [&_li]:after:px-2 [&_li]:after:text-gray-500 [&_li:last-child]:after:content-['']">
+        <li class=""><a href="{{ url(config('forum.frontend.router.prefix')) }}" class="text-blue-500">{{ trans('forum::general.index') }}</a></li>
+        @if (isset($category) && $category)
+            @include ('forum::partials.breadcrumb-categories', ['category' => $category])
+        @endif
+        @if (isset($thread) && $thread)
+            <li class=""><a href="{{ Forum::route('thread.show', $thread) }}" class="text-blue-500">{{ $thread->title }}</a></li>
+        @endif
+        @if (isset($breadcrumbs_append) && count($breadcrumbs_append) > 0)
+            @foreach ($breadcrumbs_append as $breadcrumb)
+                <li class="">{{ $breadcrumb }}</li>
+            @endforeach
+        @endif
+    </ol>
+</nav>
diff --git a/resources/forum/blade-tailwind/views/partials/timestamp.blade.php b/resources/forum/blade-tailwind/views/partials/timestamp.blade.php
new file mode 100644
index 000000000..c01cce7a9
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/partials/timestamp.blade.php
@@ -0,0 +1 @@
+<time class="timestamp" datetime="{{ $carbon }}" title="{{ $carbon->toDayDateTimeString() }}">{{ $carbon->diffForHumans() }}</time>
\ No newline at end of file
diff --git a/resources/forum/blade-tailwind/views/post/confirm-delete.blade.php b/resources/forum/blade-tailwind/views/post/confirm-delete.blade.php
new file mode 100644
index 000000000..ae71f083f
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/post/confirm-delete.blade.php
@@ -0,0 +1,37 @@
+@extends ('forum::layouts.main', ['breadcrumbs_append' => [trans_choice('forum::posts.delete', 1)]])
+
+@section ('content')
+    <div id="delete-post">
+        <h2 class="text-3xl">{{ trans_choice('forum::posts.delete', 1) }}</h2>
+
+        <hr>
+
+        @include ('forum::post.partials.list', ['post' => $post, 'single' => true])
+
+        <form method="POST" action="{{ Forum::route('post.delete', $post) }}">
+            @csrf
+            @method('DELETE')
+
+            <div class="bg-white border rounded-md mb-3">
+                <div class="p-4">
+
+                    @if (config('forum.general.soft_deletes'))
+                        <div class="form-check" v-if="state.selectedPostAction == 'delete'">
+                            <input class="form-check-input" type="checkbox" name="permadelete" value="1" id="permadelete">
+                            <label class="form-check-label" for="permadelete">
+                                {{ trans('forum::general.perma_delete') }}
+                            </label>
+                        </div>
+                    @else
+                        {{ trans('forum::general.generic_confirm') }}
+                    @endif
+                </div>
+            </div>
+
+            <div class="flex justify-end items-center gap-2">
+                <x-forum::button-link href="{{ URL::previous() }}">{{ trans('forum::general.cancel') }}</x-forum::button-link>
+                <x-forum::button type="submit" class="bg-red-500 px-5">{{ trans('forum::general.delete') }}</x-forum::button>
+            </div>
+        </form>
+    </div>
+@stop
diff --git a/resources/forum/blade-tailwind/views/post/confirm-restore.blade.php b/resources/forum/blade-tailwind/views/post/confirm-restore.blade.php
new file mode 100644
index 000000000..66d4deb9c
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/post/confirm-restore.blade.php
@@ -0,0 +1,29 @@
+@extends ('forum::layouts.main', ['breadcrumbs_append' => [trans_choice('forum::posts.restore', 1)]])
+
+@section ('content')
+    <div id="delete-post">
+        <h2 class="flex-grow-1">{{ trans_choice('forum::posts.restore', 1) }}</h2>
+
+        <hr>
+
+        @include ('forum::post.partials.list', ['post' => $post, 'single' => true])
+
+        <form method="POST" action="{{ Forum::route('post.restore', $post) }}">
+            @csrf
+            @method('POST')
+
+            <div class="card mb-3">
+                <div class="card-body">
+                    {{ trans('forum::general.generic_confirm') }}
+                </div>
+            </div>
+
+            <div class="text-end">
+                <a href="{{ URL::previous() }}" class="btn btn-link">{{ trans('forum::general.cancel') }}</a>
+                <x-forum::button type="submit" class="px-5">
+                    {{ trans('forum::general.restore') }}
+                </x-forum::button>
+            </div>
+        </form>
+    </div>
+@stop
diff --git a/resources/forum/blade-tailwind/views/post/create.blade.php b/resources/forum/blade-tailwind/views/post/create.blade.php
new file mode 100644
index 000000000..46bd4e78a
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/post/create.blade.php
@@ -0,0 +1,32 @@
+@extends ('forum::layouts.main', ['breadcrumbs_append' => [trans('forum::general.new_reply')]])
+
+@section ('content')
+    <div id="create-post">
+        <h2 class="text-3xl font-medium my-3">{{ trans('forum::general.new_reply') }} ({{ $thread->title }})</h2>
+
+        @if ($post !== null && !$post->trashed())
+            <div class="mb-2">{{ trans('forum::general.replying_to', ['item' => $post->authorName]) }}:</div>
+
+            @include ('forum::post.partials.quote')
+        @endif
+
+        <hr class="my-4" />
+
+        <form method="POST" action="{{ Forum::route('post.store', $thread) }}">
+            {!! csrf_field() !!}
+
+            @if ($post !== null)
+                <input type="hidden" name="post" value="{{ $post->id }}" />
+            @endif
+
+            <div class="mb-3">
+                <x-forum::textarea name="content" class="w-full min-h-48">{{ old('content') }}</x-forum::textarea>
+            </div>
+
+            <div class="flex justify-end items-center gap-4">
+                <a href="{{ URL::previous() }}" class="text-blue-500 underline">{{ trans('forum::general.cancel') }}</a>
+                <x-forum::button type="submit" class="">{{ trans('forum::general.reply') }}</x-forum::button>
+            </div>
+        </form>
+    </div>
+@stop
diff --git a/resources/forum/blade-tailwind/views/post/edit.blade.php b/resources/forum/blade-tailwind/views/post/edit.blade.php
new file mode 100644
index 000000000..295b79487
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/post/edit.blade.php
@@ -0,0 +1,29 @@
+@extends ('forum::layouts.main', ['breadcrumbs_append' => [trans('forum::posts.edit')]])
+
+@section ('content')
+    <div id="edit-post">
+        <h2 class="text-3xl font-medium my-3">{{ trans('forum::posts.edit') }} ({{ $thread->title }})</h2>
+
+        <hr class="mb-4">
+
+        @if ($post->parent)
+            <h3>{{ trans('forum::general.response_to', ['item' => $post->parent->authorName]) }}...</h3>
+
+            @include ('forum::post.partials.list', ['post' => $post->parent, 'single' => true])
+        @endif
+
+        <form method="POST" action="{{ Forum::route('post.update', $post) }}">
+            @csrf
+            @method('PATCH')
+
+            <div class="mb-3">
+                <x-forum::textarea name="content" class="w-full">{{ old('content') !== null ? old('content') : $post->content }}</x-forum::textarea>
+            </div>
+
+            <div class="flex items-center gap-4 justify-end">
+                <a href="{{ URL::previous() }}" class="underline text-blue-500">{{ trans('forum::general.cancel') }}</a>
+                <x-forum::button type="submit">{{ trans('forum::general.save') }}</x-forum::button>
+            </div>
+        </form>
+    </div>
+@stop
diff --git a/resources/forum/blade-tailwind/views/post/partials/actions.blade.php b/resources/forum/blade-tailwind/views/post/partials/actions.blade.php
new file mode 100644
index 000000000..e7eb921ac
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/post/partials/actions.blade.php
@@ -0,0 +1,23 @@
+<div class="panel panel-default" data-actions>
+    <div class="panel-heading">
+        <span class="glyphicon glyphicon-option-vertical"></span>
+        <a href="#" data-toggle="collapse" data-target=".collapse.post-actions">{{ trans('forum::posts.actions') }}</a>
+    </div>
+    <div class="collapse post-actions">
+        <div class="panel-body">
+            <div class="mb-3">
+                <label for="action">{{ trans_choice('forum::general.actions', 1) }}</label>
+                <select name="action" id="action" class="form-control">
+                    @can ('deletePosts', $post->thread)
+                        @can ('delete', $post)
+                            <option value="delete" data-confirm="true" data-method="delete">{{ trans('forum::general.delete') }}</option>
+                        @endcan
+                    @endcan
+                </select>
+            </div>
+        </div>
+        <div class="panel-footer clearfix">
+            <button type="submit" class="btn btn-default pull-right">{{ trans('forum::general.proceed') }}</button>
+        </div>
+    </div>
+</div>
diff --git a/resources/forum/blade-tailwind/views/post/partials/list.blade.php b/resources/forum/blade-tailwind/views/post/partials/list.blade.php
new file mode 100644
index 000000000..ecf26f53d
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/post/partials/list.blade.php
@@ -0,0 +1,70 @@
+<div @if (!$post->trashed())id="post-{{ $post->sequence }}"@endif
+    class="bg-white border mb-2 rounded-md {{ $post->trashed() || $thread->trashed() ? 'opacity-50' : '' }}"
+    :class="{ 'border-blue-500': state.selectedPosts.includes({{ $post->id }}) }">
+    <div class="bg-gray-100 border-b px-6 py-4 flex justify-between flex-row-reverse rounded-t-md">
+        @if (!isset($single) || !$single)
+            <span class="float-end">
+                <a href="{{ Forum::route('thread.show', $post) }}" class="text-blue-500">#{{ $post->sequence }}</a>
+                @if ($post->sequence != 1)
+                    @can ('deletePosts', $post->thread)
+                        @can ('delete', $post)
+                            <input type="checkbox" name="posts[]" :value="{{ $post->id }}" v-model="state.selectedPosts" class="ml-2" />
+                        @endcan
+                    @endcan
+                @endif
+            </span>
+        @endif
+
+        <div>
+            {{ $post->authorName }}
+            <span class="text-gray-500">
+                @include ('forum::partials.timestamp', ['carbon' => $post->created_at])
+                @if ($post->hasBeenUpdated())
+                    ({{ trans('forum::general.last_updated') }} @include ('forum::partials.timestamp', ['carbon' => $post->updated_at]))
+                @endif
+            </span>
+        </div>
+    </div>
+    <div class="p-6">
+        @if ($post->parent !== null)
+            @include ('forum::post.partials.quote', ['post' => $post->parent])
+        @endif
+
+        @if ($post->trashed())
+            @can ('viewTrashedPosts')
+                {!! Forum::render($post->content) !!}
+                <br>
+            @endcan
+            <x-forum::badge type="danger">{{ trans('forum::general.deleted') }}</x-forum::badge>
+        @else
+            {!! Forum::render($post->content) !!}
+        @endif
+
+        @if (!isset($single) || !$single)
+            <div class="flex items-center gap-4 justify-end mt-4">
+                @if (!$post->trashed())
+                    <a href="{{ Forum::route('post.show', $post) }}" class="text-gray-500 hover:text-gray-800">{{ trans('forum::general.permalink') }}</a>
+                    @if ($post->sequence != 1)
+                        @can ('deletePosts', $post->thread)
+                            @can ('delete', $post)
+                                <a href="{{ Forum::route('post.confirm-delete', $post) }}" class="text-red-500 hover:text-red-800">{{ trans('forum::general.delete') }}</a>
+                            @endcan
+                        @endcan
+                    @endif
+                    @can ('edit', $post)
+                        <a href="{{ Forum::route('post.edit', $post) }}" class="text-blue-500">{{ trans('forum::general.edit') }}</a>
+                    @endcan
+                    @can ('reply', $post->thread)
+                        <a href="{{ Forum::route('post.create', $post) }}" class="text-blue-500">{{ trans('forum::general.reply') }}</a>
+                    @endcan
+                @else
+                    @can ('restorePosts', $post->thread)
+                        @can ('restore', $post)
+                            <a href="{{ Forum::route('post.confirm-restore', $post) }}" class="card-link">{{ trans('forum::general.restore') }}</a>
+                        @endcan
+                    @endcan
+                @endif
+            </div>
+        @endif
+    </div>
+</div>
diff --git a/resources/forum/blade-tailwind/views/post/partials/quote.blade.php b/resources/forum/blade-tailwind/views/post/partials/quote.blade.php
new file mode 100644
index 000000000..9c7649f9e
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/post/partials/quote.blade.php
@@ -0,0 +1,13 @@
+<div class="bg-white rounded-md border mb-2">
+    <div class="p-6">
+        <div class="flex justify-between flex-row-reverse mb-2">
+            <span>
+                <a href="{{ Forum::route('thread.show', $post) }}" class="text-gray-500">#{{ $post->sequence }}</a>
+            </span>
+            <div>
+                <strong>{{ $post->authorName }}</strong> <span class="text-gray-500">{{ $post->posted }}</span>
+            </div>
+        </div>
+        {!! \Illuminate\Support\Str::limit(Forum::render($post->content)) !!}
+    </div>
+</div>
diff --git a/resources/forum/blade-tailwind/views/post/show.blade.php b/resources/forum/blade-tailwind/views/post/show.blade.php
new file mode 100644
index 000000000..9e1d1b056
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/post/show.blade.php
@@ -0,0 +1,14 @@
+@extends ('forum::layouts.main', ['breadcrumbs_append' => [trans('forum::posts.view')]])
+
+@section ('content')
+    <div id="post">
+        <div class="flex flex-row justify-between mb-3">
+            <h2 class="grow">{{ trans('forum::posts.view') }} ({{ $thread->title }})</h2>
+            <x-forum::button-link href="{{ Forum::route('thread.show', $thread) }}">{{ trans('forum::threads.view') }}</x-forum::button-link>
+        </div>
+
+        <hr>
+
+        @include ('forum::post.partials.list', ['post' => $post, 'single' => true])
+    </div>
+@stop
diff --git a/resources/forum/blade-tailwind/views/thread/create.blade.php b/resources/forum/blade-tailwind/views/thread/create.blade.php
new file mode 100644
index 000000000..d9effc59f
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/thread/create.blade.php
@@ -0,0 +1,25 @@
+@extends ('forum::layouts.main', ['breadcrumbs_append' => [trans('forum::threads.new_thread')]])
+
+@section ('content')
+    <div id="create-thread">
+        <h2 class="text-3xl">{{ trans('forum::threads.new_thread') }} ({{ $category->title }})</h2>
+
+        <form method="POST" action="{{ Forum::route('thread.store', $category) }}">
+            @csrf
+
+            <div class="mb-3">
+                <x-forum::label for="title">{{ trans('forum::general.title') }}</x-forum::label>
+                <x-forum::input type="text" name="title" value="{{ old('title') }}" class="w-full" />
+            </div>
+
+            <div class="mb-3">
+                <x-forum::textarea name="content" class="w-full">{{ old('content') }}</x-forum::textarea>
+            </div>
+
+            <div class="text-end">
+                <x-forum::button-link href="{{ URL::previous() }}" class="bg-gray-500">{{ trans('forum::general.cancel') }}</x-forum::button-link>
+                <x-forum::button type="submit">{{ trans('forum::general.create') }}</x-forum::button>
+            </div>
+        </form>
+    </div>
+@stop
diff --git a/resources/forum/blade-tailwind/views/thread/modals/mark-as-read.blade.php b/resources/forum/blade-tailwind/views/thread/modals/mark-as-read.blade.php
new file mode 100644
index 000000000..8c196ac65
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/thread/modals/mark-as-read.blade.php
@@ -0,0 +1,14 @@
+@component('forum::modal-form')
+    @slot('key', 'mark-as-read')
+    @slot('title', trans('forum::general.mark_read'))
+    @slot('route', Forum::route('unread.mark-as-read'))
+    @slot('method', 'PATCH')
+
+    <p>{{ trans('forum::general.generic_confirm') }}</p>
+
+    @slot('actions')
+        <x-forum::button type="submit">
+            {{ trans('forum::general.mark_read') }}
+        </x-forum::button>
+    @endslot
+@endcomponent
diff --git a/resources/forum/blade-tailwind/views/thread/partials/list.blade.php b/resources/forum/blade-tailwind/views/thread/partials/list.blade.php
new file mode 100644
index 000000000..a30f82fa3
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/thread/partials/list.blade.php
@@ -0,0 +1,52 @@
+<div class="bg-white" :class="{ 'ring-1 ring-blue-500': state.selectedThreads.includes({{ $thread->id }}) }">
+    <div class="flex flex-col md:items-start md:flex-row md:justify-between md:gap-4 p-6">
+        <div class="md:w-3/6 text-center md:text-left">
+            <span class="lead">
+                <a href="{{ Forum::route('thread.show', $thread) }}" @if (isset($category))style="color: {{ $category->color_light_mode }};"@endif class="text-lg">{{ $thread->title }}</a>
+            </span>
+            <br>
+            {{ $thread->authorName }}
+            <span class="text-gray-500"> @include ('forum::partials.timestamp', ['carbon' => $thread->created_at])</span>
+
+            @if (!isset($category))
+                <br>
+                <a href="{{ Forum::route('category.show', $thread->category) }}" style="color: {{ $thread->category->color_light_mode }};">{{ $thread->category->title }}</a>
+            @endif
+        </div>
+
+        <div class="md:w-2/6 flex flex-wrap justify-center items-center md:justify-end gap-1">
+            @if ($thread->pinned)
+                <x-forum::badge type="info">{{ trans('forum::threads.pinned') }}</x-forum::badge>
+            @endif
+            @if ($thread->locked)
+                <x-forum::badge type="warning">{{ trans('forum::threads.locked') }}</x-forum::badge>
+            @endif
+            @if ($thread->userReadStatus !== null && !$thread->trashed())
+                <x-forum::badge type="success">{{ trans($thread->userReadStatus) }}</x-forum::badge>
+            @endif
+            @if ($thread->trashed())
+                <x-forum::badge type="danger">{{ trans('forum::general.deleted') }}</x-forum::badge>
+            @endif
+            <x-forum::badge :style="(isset($category) && $category->color_light_mode) ? 'background: '.$category->color_light_mode .';' : null">
+                {{ trans('forum::general.replies') }}:
+                {{ $thread->reply_count }}
+            </x-forum::badge>
+        </div>
+
+        @if ($thread->lastPost)
+            <div class="md:w-1/6 flex justify-center md:flex-col md:items-end">
+                <a href="{{ Forum::route('thread.show', $thread->lastPost) }}" class="text-blue-500">{{ trans('forum::posts.view') }} &raquo;</a>
+                <div>
+                    {{ $thread->lastPost->authorName }}
+                    <span class="text-gray-500"> @include ('forum::partials.timestamp', ['carbon' => $thread->lastPost->created_at])</span>
+                </div>
+            </div>
+        @endif
+
+        @if (isset($category) && isset($selectableThreadIds) && in_array($thread->id, $selectableThreadIds))
+            <div class="" style="flex: 0;">
+                <input type="checkbox" name="threads[]" :value="{{ $thread->id }}" v-model="state.selectedThreads">
+            </div>
+        @endif
+    </div>
+</div>
diff --git a/resources/forum/blade-tailwind/views/thread/recent.blade.php b/resources/forum/blade-tailwind/views/thread/recent.blade.php
new file mode 100644
index 000000000..b96988453
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/thread/recent.blade.php
@@ -0,0 +1,21 @@
+@extends ('forum::layouts.main', ['thread' => null, 'breadcrumbs_append' => [trans('forum::threads.recent')]])
+
+@section ('content')
+    <div id="new-posts">
+        <h2 class="text-3xl font-medium my-3">{{ trans('forum::threads.recent') }}</h2>
+
+        @if (!$threads->isEmpty())
+            <div class="my-3">
+                @foreach ($threads as $thread)
+                    @include ('forum::thread.partials.list')
+                @endforeach
+            </div>
+        @else
+            <div class="bg-white my-3">
+                <div class="card-body text-center text-muted">
+                    {{ trans('forum::threads.none_found') }}
+                </div>
+            </div>
+        @endif
+    </div>
+@stop
diff --git a/resources/forum/blade-tailwind/views/thread/show.blade.php b/resources/forum/blade-tailwind/views/thread/show.blade.php
new file mode 100644
index 000000000..0e8afc3bd
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/thread/show.blade.php
@@ -0,0 +1,391 @@
+@extends ('forum::layouts.main', ['thread' => null, 'breadcrumbs_append' => [$thread->title], 'thread_title' => $thread->title])
+
+@section ('content')
+    <div id="thread">
+        <div class="flex flex-col md:flex-row justify-between my-4">
+            <h2 class="grow text-3xl font-semibold">{{ $thread->title }}</h2>
+
+            <div class="flex flex-col md:flex-row items-center gap-2">
+                @if (Gate::allows('deleteThreads', $thread->category) && Gate::allows('delete', $thread))
+                    @if ($thread->trashed())
+                        <x-forum::button-link href="#" class="bg-red-500 hover:bg-red-400" data-open-modal="perma-delete-thread">
+                            <i data-feather="trash"></i> {{ trans('forum::general.perma_delete') }}
+                        </x-forum::button-link>
+                    @else
+                        <x-forum::button-link href="#" class="bg-red-500 hover:bg-red-400 inline-flex items-center gap-2" data-open-modal="delete-thread">
+                            <i data-feather="trash" class="w-4"></i> {{ trans('forum::general.delete') }}
+                        </x-forum::button-link>
+                    @endif
+                @endif
+                @if ($thread->trashed() && Gate::allows('restoreThreads', $thread->category) && Gate::allows('restore', $thread))
+                    <x-forum::button-link href="#" data-open-modal="restore-thread" class="inline-flex items-center gap-2">
+                        <i data-feather="refresh-cw" class="w-4"></i> {{ trans('forum::general.restore') }}
+                    </x-forum::button-link>
+                @endif
+
+                @if (Gate::allows('lockThreads', $category)
+                    || Gate::allows('pinThreads', $category)
+                    || Gate::allows('rename', $thread)
+                    || Gate::allows('moveThreadsFrom', $category))
+                    <x-forum::button-group>
+                        @if (!$thread->trashed())
+                            @can ('lockThreads', $category)
+                                @if ($thread->locked)
+                                    <x-forum::button-link href="#" data-open-modal="unlock-thread" class="inline-flex items-center gap-2 bg-gray-500 hover:bg-gray-400">
+                                        <i data-feather="unlock" class="w-4"></i> {{ trans('forum::threads.unlock') }}
+                                    </x-forum::button-link>
+                                @else
+                                    <x-forum::button-link href="#" data-open-modal="lock-thread" class="inline-flex items-center gap-2 bg-gray-500 hover:bg-gray-400">
+                                        <i data-feather="lock" class="w-4"></i> {{ trans('forum::threads.lock') }}
+                                    </x-forum::button-link>
+                                @endif
+                            @endcan
+                            @can ('pinThreads', $category)
+                                @if ($thread->pinned)
+                                    <x-forum::button-link href="#" data-open-modal="unpin-thread" class="inline-flex items-center gap-2 bg-gray-500 hover:bg-gray-400">
+                                        <i data-feather="arrow-down"></i> {{ trans('forum::threads.unpin') }}
+                                    </x-forum::button-link>
+                                @else
+                                    <x-forum::button-link href="#" data-open-modal="pin-thread" class="inline-flex items-center gap-2 bg-gray-500 hover:bg-gray-400">
+                                        <i data-feather="arrow-up" class="w-4"></i> {{ trans('forum::threads.pin') }}
+                                    </x-forum::button-link>
+                                @endif
+                            @endcan
+                            @can ('rename', $thread)
+                                <x-forum::button-link href="#"  data-open-modal="rename-thread" class="inline-flex items-center gap-2 bg-gray-500 hover:bg-gray-400">
+                                    <i data-feather="edit-2" class="w-4"></i> {{ trans('forum::general.rename') }}
+                                </x-forum::button-link>
+                            @endcan
+                            @can ('moveThreadsFrom', $category)
+                                <x-forum::button-link href="#" data-open-modal="move-thread" class="inline-flex items-center gap-2 bg-gray-500 hover:bg-gray-400">
+                                    <i data-feather="corner-up-right" class="w-4"></i> {{ trans('forum::general.move') }}
+                                </x-forum::button-link>
+                            @endcan
+                        @endif
+                    </x-forum::button-group>
+                @endcan
+            </div>
+        </div>
+
+        <div class="flex flex-wrap gap-x-1">
+            @if ($thread->trashed())
+                <x-forum::badge type="danger">{{ trans('forum::general.deleted') }}</x-forum::badge>
+            @endif
+            @if ($thread->pinned)
+                <x-forum::badge type="info">{{ trans('forum::threads.pinned') }}</x-forum::badge>
+            @endif
+            @if ($thread->locked)
+                <x-forum::badge type="warning">{{ trans('forum::threads.locked') }}</x-forum::badge>
+            @endif
+        </div>
+
+        @if ((count($posts) > 1 || $posts->currentPage() > 1) && (Gate::allows('deletePosts', $thread) || Gate::allows('restorePosts', $thread)) && count($selectablePosts) > 0)
+            <form :action="postActions[state.selectedPostAction]" method="POST">
+                @csrf
+                <input type="hidden" name="_method" :value="postActionMethods[state.selectedPostAction]" />
+        @endif
+
+        <div class="my-4">
+            <div>
+                {{ $posts->links('forum::pagination') }}
+            </div>
+            <div class="flex justify-end">
+                @if (!$thread->trashed())
+                    @can ('reply', $thread)
+                        <x-forum::button-group>
+                            <x-forum::button-link href="{{ Forum::route('post.create', $thread) }}">
+                                {{ trans('forum::general.new_reply') }}
+                            </x-forum::button-link>
+                            <x-forum::button-link href="#quick-reply">
+                                {{ trans('forum::general.quick_reply') }}
+                            </x-forum::button-link>
+                        </x-forum::button-group>
+                    @endcan
+                @endif
+            </div>
+        </div>
+
+        @if ((count($posts) > 1 || $posts->currentPage() > 1) && (Gate::allows('deletePosts', $thread) || Gate::allows('restorePosts', $thread)) && count($selectablePosts) > 0)
+            <div class="text-end mb-2">
+                <div class="form-check">
+                    <label for="selectAllPosts">
+                        {{ trans('forum::posts.select_all') }}
+                    </label>
+                    <input type="checkbox" value="" id="selectAllPosts" class="align-middle" @click="toggleAll" :checked="state.selectedPosts.length == posts.data.length">
+                </div>
+            </div>
+        @endif
+
+        @foreach ($posts as $post)
+            @include ('forum::post.partials.list', compact('post'))
+        @endforeach
+
+        @if ((count($posts) > 1 || $posts->currentPage() > 1) && (Gate::allows('deletePosts', $thread) || Gate::allows('restorePosts', $thread)) && count($selectablePosts) > 0)
+                <div class="fixed bottom-0 right-0 m-2" style="z-index: 1000;" v-if="state.selectedPosts.length">
+                    <div class="bg-white shadow-sm rounded-md min-w-96 max-w-full">
+                        <div class="border-b text-center py-4 px-6">
+                            {{ trans('forum::general.with_selection') }}
+                        </div>
+                        <div class="p-6">
+                            <div class="mb-3">
+                                <div>
+                                    <x-forum::label for="bulk-actions">{{ trans_choice('forum::general.actions', 1) }}</x-forum::label>
+                                </div>
+
+                                <x-forum::select id="bulk-actions" v-model="state.selectedPostAction">
+                                    <option value="delete">{{ trans('forum::general.delete') }}</option>
+                                    <option value="restore">{{ trans('forum::general.restore') }}</option>
+                                </x-forum::select>
+                            </div>
+
+                            @if (config('forum.general.soft_deletes'))
+                                <div class="form-check mb-3" v-if="state.selectedPostAction == 'delete'">
+                                    <input class="form-check-input" type="checkbox" name="permadelete" value="1" id="permadelete">
+                                    <label class="form-check-label" for="permadelete">
+                                        {{ trans('forum::general.perma_delete') }}
+                                    </label>
+                                </div>
+                            @endif
+
+                            <div class="text-end">
+                                <x-forum::button type="submit" class="px-5" @click="submitPosts">{{ trans('forum::general.proceed') }}</x-forum::button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        @endif
+
+        {{ $posts->links('forum::pagination') }}
+
+        @if (!$thread->trashed())
+            @can ('reply', $thread)
+                <h2>{{ trans('forum::general.quick_reply') }}</h2>
+                <div id="quick-reply" class="mt-4">
+                    <form method="POST" action="{{ Forum::route('post.store', $thread) }}">
+                        @csrf
+
+                        <div class="mb-3">
+                            <x-forum::textarea name="content" class="w-full min-h-48">{{ old('content') }}</x-forum::textarea>
+                        </div>
+
+                        <div class="text-end">
+                            <x-forum::button type="submit" class="px-5">{{ trans('forum::general.reply') }}</x-forum::button>
+                        </div>
+                    </form>
+                </div>
+            @endcan
+        @endif
+    </div>
+
+    @if ($thread->trashed() && Gate::allows('restoreThreads', $thread->category) && Gate::allows('restore', $thread))
+        @component('forum::modal-form')
+            @slot('key', 'restore-thread')
+            @slot('title', '<i data-feather="refresh-cw" class="text-gray-500"></i>' . trans('forum::general.restore'))
+            @slot('route', Forum::route('thread.restore', $thread))
+            @slot('method', 'POST')
+
+            {{ trans('forum::general.generic_confirm') }}
+
+            @slot('actions')
+                <x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
+            @endslot
+        @endcomponent
+    @endif
+
+    @if (Gate::allows('deleteThreads', $thread->category) && Gate::allows('delete', $thread))
+        @component('forum::modal-form')
+            @slot('key', 'delete-thread')
+            @slot('title', '<i data-feather="trash" class="text-gray-500"></i>' . trans('forum::threads.delete'))
+            @slot('route', Forum::route('thread.delete', $thread))
+            @slot('method', 'DELETE')
+
+            @if (config('forum.general.soft_deletes'))
+                <div class="form-check">
+                    <input class="form-check-input" type="checkbox" name="permadelete" value="1" id="permadelete">
+                    <label class="form-check-label" for="permadelete">
+                        {{ trans('forum::general.perma_delete') }}
+                    </label>
+                </div>
+            @else
+                {{ trans('forum::general.generic_confirm') }}
+            @endif
+
+            @slot('actions')
+                <x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
+            @endslot
+        @endcomponent
+
+        @if (config('forum.general.soft_deletes'))
+            @component('forum::modal-form')
+                @slot('key', 'perma-delete-thread')
+                @slot('title', '<i data-feather="trash" class="text-gray-500"></i>' . trans_choice('forum::threads.perma_delete', 1))
+                @slot('route', Forum::route('thread.delete', $thread))
+                @slot('method', 'DELETE')
+
+                <input type="hidden" name="permadelete" value="1" />
+
+                {{ trans('forum::general.generic_confirm') }}
+
+                @slot('actions')
+                    <x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
+                @endslot
+            @endcomponent
+        @endif
+    @endif
+
+    @if (!$thread->trashed())
+        @can ('lockThreads', $category)
+            @if ($thread->locked)
+                @component('forum::modal-form')
+                    @slot('key', 'unlock-thread')
+                    @slot('title', '<i data-feather="unlock" class="text-gray-500"></i> ' . trans('forum::threads.unlock'))
+                    @slot('route', Forum::route('thread.unlock', $thread))
+                    @slot('method', 'POST')
+
+                    {{ trans('forum::general.generic_confirm') }}
+
+                    @slot('actions')
+                        <x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
+                    @endslot
+                @endcomponent
+            @else
+                @component('forum::modal-form')
+                    @slot('key', 'lock-thread')
+                    @slot('title', '<i data-feather="lock" class="text-gray-500"></i> ' . trans('forum::threads.lock'))
+                    @slot('route', Forum::route('thread.lock', $thread))
+                    @slot('method', 'POST')
+
+                    {{ trans('forum::general.generic_confirm') }}
+
+                    @slot('actions')
+                        <x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
+                    @endslot
+                @endcomponent
+            @endif
+        @endcan
+
+        @can ('pinThreads', $category)
+            @if ($thread->pinned)
+                @component('forum::modal-form')
+                    @slot('key', 'unpin-thread')
+                    @slot('title', '<i data-feather="arrow-down" class="text-gray-500"></i> ' . trans('forum::threads.unpin'))
+                    @slot('route', Forum::route('thread.unpin', $thread))
+                    @slot('method', 'POST')
+
+                    {{ trans('forum::general.generic_confirm') }}
+
+                    @slot('actions')
+                        <x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
+                    @endslot
+                @endcomponent
+            @else
+                @component('forum::modal-form')
+                    @slot('key', 'pin-thread')
+                    @slot('title', '<i data-feather="arrow-up" class="text-gray-500"></i> ' . trans('forum::threads.pin'))
+                    @slot('route', Forum::route('thread.pin', $thread))
+                    @slot('method', 'POST')
+
+                    {{ trans('forum::general.generic_confirm') }}
+
+                    @slot('actions')
+                        <x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
+                    @endslot
+                @endcomponent
+            @endif
+        @endcan
+
+        @can ('rename', $thread)
+            @component('forum::modal-form')
+                @slot('key', 'rename-thread')
+                @slot('title', '<i data-feather="edit-2" class="text-gray-500"></i> ' . trans('forum::general.rename'))
+                @slot('route', Forum::route('thread.rename', $thread))
+                @slot('method', 'POST')
+
+                <div>
+                    <x-forum::label for="new-title">{{ trans('forum::general.title') }}</x-forum::label>
+                    <x-forum::input type="text" name="title" value="{{ $thread->title }}" class="w-full" />
+                </div>
+
+                @slot('actions')
+                    <x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
+                @endslot
+            @endcomponent
+        @endcan
+
+        @can ('moveThreadsFrom', $category)
+            @component('forum::modal-form')
+                @slot('key', 'move-thread')
+                @slot('title', '<i data-feather="corner-up-right" class="text-gray-500"></i> ' . trans('forum::general.move'))
+                @slot('route', Forum::route('thread.move', $thread))
+                @slot('method', 'POST')
+
+                <div class="input-group">
+                    <div class="input-group-prepend">
+                        <label class="input-group-text" for="category-id">{{ trans_choice('forum::categories.category', 1) }}</label>
+                    </div>
+                    <select name="category_id" id="category-id" class="form-select">
+                        @include ('forum::category.partials.options', ['hide' => $thread->category])
+                    </select>
+                </div>
+
+                @slot('actions')
+                    <x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
+                @endslot
+            @endcomponent
+        @endcan
+    @endif
+
+    <script type="module">
+    Vue.createApp({
+        setup() {
+            let posts = @json($posts);
+            posts.data = posts.data.filter(post => post.sequence > 1);
+
+            const selectablePosts = @json($selectablePosts);
+            const postActions = {
+                delete: "{{ Forum::route('bulk.post.delete') }}",
+                restore: "{{ Forum::route('bulk.post.restore') }}"
+            };
+            const postActionMethods = {
+                delete: 'DELETE',
+                restore: 'POST',
+            };
+
+            const state = Vue.reactive({
+                selectedPostAction: 'delete',
+                selectedPosts: [],
+                selectedThreadAction: null,
+            });
+
+            function toggleAll() {
+                state.selectedPosts = (state.selectedPosts.length < selectablePosts.length) ? selectablePosts : [];
+            }
+
+            function submitThread(event) {
+                if (threadActionMethods[state.selectedThreadAction] === 'DELETE' && !confirm("{{ trans('forum::general.generic_confirm') }}"))
+                {
+                    event.preventDefault();
+                }
+            }
+
+            function submitPosts(event) {
+                if (postActionMethods[state.selectedPostAction] === 'DELETE' && !confirm("{{ trans('forum::general.generic_confirm') }}")) {
+                    event.preventDefault();
+                }
+            }
+
+            return {
+                posts,
+                selectablePosts,
+                postActions,
+                postActionMethods,
+                state,
+                toggleAll,
+                submitThread,
+                submitPosts,
+            };
+        }
+    }).mount('#thread');
+    </script>
+@stop
diff --git a/resources/forum/blade-tailwind/views/thread/unread.blade.php b/resources/forum/blade-tailwind/views/thread/unread.blade.php
new file mode 100644
index 000000000..560ac0edd
--- /dev/null
+++ b/resources/forum/blade-tailwind/views/thread/unread.blade.php
@@ -0,0 +1,31 @@
+@extends ('forum::layouts.main', ['thread' => null, 'breadcrumbs_append' => [trans('forum::threads.unread_updated')]])
+
+@section ('content')
+    <div id="new-posts">
+        <h2 class="text-3xl text-medium my-4">{{ trans('forum::threads.unread_updated') }}</h2>
+
+        @if (!$threads->isEmpty())
+            <div class="">
+                @foreach ($threads as $thread)
+                    @include ('forum::thread.partials.list')
+                @endforeach
+            </div>
+        @else
+            <div class="bg-white shadow rounded text-gray-500 text-center py-4">
+                {{ trans('forum::threads.none_found') }}
+            </div>
+        @endif
+    </div>
+
+    @if (!$threads->isEmpty())
+        @can ('markThreadsAsRead')
+            <div class="flex justify-center mt-4">
+                <x-forum::button class="px-5 flex items-center gap-2" data-open-modal="mark-as-read">
+                    <i data-feather="book"></i> {{ trans('forum::general.mark_read') }}
+                </x-forum::button>
+            </div>
+
+            @include ('forum::thread.modals.mark-as-read')
+        @endcan
+    @endif
+@stop
diff --git a/resources/forum/livewire-tailwind/css/forum.css b/resources/forum/livewire-tailwind/css/forum.css
new file mode 100644
index 000000000..f1f6bcc75
--- /dev/null
+++ b/resources/forum/livewire-tailwind/css/forum.css
@@ -0,0 +1,83 @@
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,700;1,400&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    .forum {
+        font-family: "Source Sans 3", sans-serif;
+        font-optical-sizing: auto;
+        font-size: 18px;
+        @apply text-slate-900;
+    }
+
+    .breadcrumbs ol li {
+        display: inline-block;
+    }
+
+    .breadcrumbs ol li + li {
+        margin-left: .5rem;
+    }
+
+    .breadcrumbs ol li + li::before {
+        float: left;
+        padding-right: .5rem;
+        color: #6c757d;
+        content: "/";
+    }
+
+    .forum .clr-field button {
+        @apply w-6 h-6 mr-2 rounded-full;
+    }
+
+    .forum .nested-sort .ns-targeted {
+        @apply rounded-md border-green-500 outline outline-green-500;
+    }
+
+    .bg-category {
+        background-color: var(--category-light);
+    }
+
+    .text-category {
+        color: var(--category-light);
+    }
+
+    div, p {
+        font-size: 1rem;
+    }
+
+    h1 {
+        @apply text-4xl my-6;
+    }
+
+    h2 {
+        @apply text-2xl;
+    }
+
+    h3 {
+        @apply text-xl;
+    }
+
+    a:not(.link-button):not(.group-button):not(.text-category) {
+        @apply text-slate-600 hover:text-slate-900;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .forum {
+            @apply text-slate-400;
+        }
+
+        .bg-category {
+            background-color: var(--category-dark);
+        }
+
+        .text-category {
+            color: var(--category-dark);
+        }
+
+        a:not(.link-button):not(.group-button):not(.text-category) {
+            @apply text-slate-300 hover:text-white;
+        }
+    }
+}
diff --git a/resources/forum/livewire-tailwind/js/forum.js b/resources/forum/livewire-tailwind/js/forum.js
new file mode 100644
index 000000000..1d0f67295
--- /dev/null
+++ b/resources/forum/livewire-tailwind/js/forum.js
@@ -0,0 +1,9 @@
+import { formatDistance } from 'date-fns';
+import '@melloware/coloris/dist/coloris.css';
+import Coloris from '@melloware/coloris';
+import NestedSort from 'nested-sort';
+
+window.dateFormatDistance = formatDistance;
+window.Coloris = Coloris;
+window.Coloris.init();
+window.NestedSort = NestedSort;
diff --git a/resources/forum/livewire-tailwind/views/components/alerts.blade.php b/resources/forum/livewire-tailwind/views/components/alerts.blade.php
new file mode 100644
index 000000000..56e135179
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/alerts.blade.php
@@ -0,0 +1,64 @@
+<div x-data="alerts" @alert.window="onReceiveAlert" class="grid place-content-center fixed bottom-4 left-0 right-0 z-50">
+    <template x-for="alert in list" :key="alert.id">
+        <div
+            x-show="alert.show"
+            x-transition:enter="transition-all ease-out duration-300"
+            x-transition:enter-start="opacity-0 translate-y-2"
+            x-transition:enter-end="opacity-100 translate-y-0"
+            x-transition:leave="transition-all ease-in duration-300"
+            x-transition:leave-start="opacity-100 translate-y-0"
+            x-transition:leave-end="opacity-0 translate-y-2"
+            class="min-w-80 max-w-96 px-6 py-4 mb-4 text-lg text-center rounded-md"
+            :class="alert.classes">
+            <span x-text="alert.message"></span>
+        </div>
+    </template>
+</div>
+
+@script
+<script>
+const SHOW_DURATION = 4000;
+const FADE_DURATION = 300;
+const TICK_INTERVAL = 250;
+
+Alpine.data('alerts', () => {
+    return {
+        list: [],
+        baseClasses: '',
+        styleMap: {
+            'success': 'bg-green-400 text-green-900',
+            'warning': 'bg-orange-400 text-orange-900',
+        },
+        init() {
+            setInterval(() => {
+                for (let i = this.list.length - 1; i >= 0; --i) {
+                    if (this.list[i].showFor === SHOW_DURATION) {
+                        this.list[i].show = true;
+                    }
+
+                    this.list[i].showFor -= TICK_INTERVAL;
+
+                    if (this.list[i].showFor <= FADE_DURATION) {
+                        this.list[i].show = false;
+                    }
+
+                    if (this.list[i].showFor <= 0) {
+                        this.list.splice(i, 1);
+                    }
+                }
+            }, TICK_INTERVAL);
+        },
+        onReceiveAlert(event) {
+            this.list.unshift({
+                id: Math.random().toString(36).slice(2, 7),
+                show: false,
+                type: event.detail.type,
+                message: event.detail.message,
+                showFor: SHOW_DURATION,
+                classes: this.styleMap[event.detail.type]
+            });
+        }
+    }
+});
+</script>
+@endscript
diff --git a/resources/forum/livewire-tailwind/views/components/breadcrumb-categories.blade.php b/resources/forum/livewire-tailwind/views/components/breadcrumb-categories.blade.php
new file mode 100644
index 000000000..cc919d74f
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/breadcrumb-categories.blade.php
@@ -0,0 +1,4 @@
+@if ($category->parent !== null)
+    @include ('forum::components.breadcrumb-categories', ['category' => $category->parent])
+@endif
+<li class="breadcrumb-item"><a href="{{ Forum::route('category.show', $category) }}">{{ $category->title }}</a></li>
diff --git a/resources/forum/livewire-tailwind/views/components/breadcrumbs.blade.php b/resources/forum/livewire-tailwind/views/components/breadcrumbs.blade.php
new file mode 100644
index 000000000..d1d243464
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/breadcrumbs.blade.php
@@ -0,0 +1,23 @@
+<nav class="breadcrumbs bg-slate-300 rounded-lg p-2 my-2 dark:bg-slate-700" aria-label="breadcrumb">
+    <ol class="flex flex-wrap">
+        <li>
+            <a href="{{ url(config('forum.frontend.router.prefix')) }}" class="flex items-center">
+                <span class="inline-block mr-1">
+                    @include ('forum::components.icons.home-mini')
+                </span>
+                {{ trans('forum::general.index') }}
+            </a>
+        </li>
+        @if (isset($category) && $category || isset($thread->category) && $thread->category)
+            @include ('forum::components.breadcrumb-categories', ['category' => $category ?? $thread->category])
+        @endif
+        @if (isset($thread) && $thread)
+            <li>{{ trans_choice('forum::threads.thread', 1) }}</li>
+        @endif
+        @if (isset($breadcrumbs_append))
+            @foreach ($breadcrumbs_append as $breadcrumb)
+                <li>{{ $breadcrumb }}</li>
+            @endforeach
+        @endif
+    </ol>
+</nav>
diff --git a/resources/forum/livewire-tailwind/views/components/button.blade.php b/resources/forum/livewire-tailwind/views/components/button.blade.php
new file mode 100644
index 000000000..b0db803de
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/button.blade.php
@@ -0,0 +1,21 @@
+@php
+$colorClasses = match ($intent) {
+    'primary', '', null => 'text-white bg-blue-600 hover:text-white hover:bg-blue-500',
+    'secondary' => 'text-zinc-800 bg-zinc-400/50 hover:bg-zinc-400/35 dark:text-slate-800 dark:bg-slate-400/50 dark:hover:bg-slate-400/65',
+    'danger' => 'text-white bg-red-500 hover:bg-red-400'
+};
+
+$sizeClasses = match ($size) {
+    'regular', '', null => 'min-w-36 px-4 py-2',
+    'small' => 'px-4 py-1',
+};
+@endphp
+
+<button
+    class="inline-block rounded-full font-medium text-lg text-center disabled:text-slate-500 disabled:bg-slate-300 dark:disabled:text-slate-300 dark:disabled:bg-slate-500 {{ $colorClasses }} {{ $sizeClasses }}"
+    {{ $attributes }}>
+    @if (isset($icon) && !empty($icon))
+        @include ("forum::components.icons.{$icon}", ['size' => '5'])
+    @endif
+    {{ $label }}
+</button>
diff --git a/resources/forum/livewire-tailwind/views/components/category/card.blade.php b/resources/forum/livewire-tailwind/views/components/category/card.blade.php
new file mode 100644
index 000000000..850278fe0
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/category/card.blade.php
@@ -0,0 +1,103 @@
+<div class="my-4" style="{{ $category->styleVariables }}">
+    <div class="bg-white shadow-md rounded-lg p-4 flex flex-col sm:flex-row sm:items-center sm:content-center dark:bg-slate-700">
+        <div class="hidden sm:block self-stretch">
+            <div class="w-3 h-full rounded-full mr-4 bg-category"></div>
+        </div>
+        <div class="grow text-center sm:text-left">
+            <h2>
+                <a href="{{ $category->route }}" class="text-category">{{ $category->title }}</a>
+            </h2>
+            <h3 class="text-slate-600 dark:text-slate-400">{{ $category->description }}</h3>
+        </div>
+        <div class="text-center text-base mt-2 sm:mt-0">
+            @if ($category->accepts_threads)
+                <livewire:forum::components.pill
+                    icon="chat-bubbles-mini"
+                    :text="trans_choice('forum::threads.thread', 2) . ': ' . $category->thread_count" />
+                <livewire:forum::components.pill
+                    icon="chat-bubble-text-mini"
+                    :text="trans_choice('forum::posts.post', 2) . ': ' . $category->post_count" />
+            @endif
+        </div>
+        <div class="min-w-30 sm:min-w-48 lg:min-w-96 xl:w-full xl:max-w-lg text-center sm:text-right mt-2 sm:mt-0">
+            @if ($category->accepts_threads)
+                @if ($category->newestThread)
+                    <div>
+                        @include ("forum::components.icons.chat-bubbles-mini")
+                        <a href="{{ $category->newestThread->route }}" class="inline-block max-w-36 md:max-w-48 lg:max-w-64 truncate align-middle">
+                            {{ $category->newestThread->title }}
+                        </a>
+                        <span class="inline-block align-middle">
+                            <livewire:forum::components.timestamp :carbon="$category->newestThread->created_at" />
+                        </span>
+                    </div>
+                @endif
+                @if ($category->latestActiveThread && $category->latestActiveThread->reply_count > 1)
+                    <div>
+                        @include ("forum::components.icons.chat-bubble-text-mini")
+                        <a href="{{ $category->latestActiveThread->lastPost->route }}" class="inline-block max-w-36 md:max-w-48 lg:max-w-64 truncate align-middle">
+                            Re: {{ $category->latestActiveThread->title }}
+                        </a>
+                        <span class="inline-block align-middle">
+                            <livewire:forum::components.timestamp :carbon="$category->latestActiveThread->lastPost->created_at" />
+                        </span>
+                    </div>
+                @endif
+            @endif
+        </div>
+    </div>
+
+    @if (count($category->children) > 0)
+        @foreach ($category->children as $subcategory)
+            <div class="flex mt-4" style="{{ $subcategory->styleVariables }}">
+                <div class="min-w-12 sm:min-w-24 self-center text-center text-slate-300 dark:text-slate-700">
+                    @include ('forum::components.icons.subcategory', ['size' => '12'])
+                </div>
+                <div class="grow flex flex-col sm:flex-row sm:items-center sm:content-center items-center justify-items-center bg-white shadow-md rounded-lg p-4 dark:bg-slate-700">
+                    <div class="grow text-center sm:text-left">
+                        <h3>
+                            <a href="{{ $subcategory->route }}" class="text-category">{{ $subcategory->title }}</a>
+                        </h3>
+                        <h3 class="text-slate-600 text-base dark:text-slate-400">{{ $subcategory->description }}</h3>
+                    </div>
+                    <div class="text-center text-base mt-2 sm:mt-0">
+                        @if ($subcategory->accepts_threads)
+                            <livewire:forum::components.pill
+                                icon="chat-bubbles-mini"
+                                :text="trans_choice('forum::threads.thread', 2) . ': ' . $subcategory->thread_count" />
+                            <livewire:forum::components.pill
+                                icon="chat-bubble-text-mini"
+                                :text="trans_choice('forum::posts.post', 2) . ': ' . $subcategory->post_count" />
+                        @endif
+                    </div>
+                    <div class="min-w-30 sm:min-w-48 lg:min-w-96 xl:w-full xl:max-w-lg text-center sm:text-right mt-2 sm:mt-0">
+                        @if ($subcategory->accepts_threads)
+                            @if ($subcategory->newestThread)
+                                <div>
+                                    @include ("forum::components.icons.chat-bubbles-mini")
+                                    <a href="{{ $subcategory->newestThread->route }}" class="inline-block max-w-36 md:max-w-48 lg:max-w-64 truncate align-middle">
+                                        {{ $subcategory->newestThread->title }}
+                                    </a>
+                                    <span class="inline-block align-middle">
+                                        <livewire:forum::components.timestamp :carbon="$subcategory->newestThread->created_at" />
+                                    </span>
+                                </div>
+                            @endif
+                            @if ($subcategory->latestActiveThread && $subcategory->latestActiveThread->reply_count > 1)
+                                <div>
+                                    @include ("forum::components.icons.chat-bubble-text-mini")
+                                    <a href="{{ $subcategory->latestActiveThread->lastPost->route }}" class="inline-block max-w-36 md:max-w-48 lg:max-w-64 truncate align-middle">
+                                        Re: {{ $subcategory->latestActiveThread->title }}
+                                    </a>
+                                    <span class="inline-block align-middle">
+                                        <livewire:forum::components.timestamp :carbon="$subcategory->latestActiveThread->lastPost->created_at" />
+                                    </span>
+                                </div>
+                            @endif
+                        @endif
+                    </div>
+                </div>
+            </div>
+        @endforeach
+    @endif
+</div>
diff --git a/resources/forum/livewire-tailwind/views/components/category/draggable-items.blade.php b/resources/forum/livewire-tailwind/views/components/category/draggable-items.blade.php
new file mode 100644
index 000000000..4e05635c1
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/category/draggable-items.blade.php
@@ -0,0 +1,18 @@
+@foreach ($categories as $category)
+    <li class="font-medium border border-slate-300 dark:border-slate-600 rounded-md text-lg p-4 my-2 cursor-move" data-id="{{ $category->id }}">
+        <span class="flex">
+            <span class="text-slate-400 mr-1" style="margin-left: -8px">
+                @include ('forum::components.icons.drag-area-vertical')
+            </span>
+            <span class="grow select-none" data-title>{{ $category->title }}</span>
+            <a href="{{ Forum::route('category.edit', $category) }}">
+                {{ trans('forum::general.edit') }}
+            </a>
+        </span>
+        @if (count($category->children) > 0)
+            <ol data-id="{{ $category->id }}">
+                @include ('forum::components.category.draggable-items', ['categories' => $category->children])
+            </ol>
+        @endif
+    </li>
+@endforeach
diff --git a/resources/forum/livewire-tailwind/views/components/category/options.blade.php b/resources/forum/livewire-tailwind/views/components/category/options.blade.php
new file mode 100644
index 000000000..9736cda0a
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/category/options.blade.php
@@ -0,0 +1,10 @@
+@foreach ($categories as $category)
+    <option value="{{ $category->id }}" {{ isset($disable) && $category->id == $disable || !$category->accepts_threads ? 'disabled' : '' }}>
+        @for ($i = 0; $i < $category->depth; ++$i)- @endfor
+        {{ $category->title }}
+    </option>
+
+    @if ($category->children)
+        @include ('forum::components.category.options', ['categories' => $category->children])
+    @endif
+@endforeach
diff --git a/resources/forum/livewire-tailwind/views/components/form/error.blade.php b/resources/forum/livewire-tailwind/views/components/form/error.blade.php
new file mode 100644
index 000000000..ef252c72f
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/form/error.blade.php
@@ -0,0 +1,3 @@
+<div class="mt-2 text-pink-800 font-medium">
+    @error($id) {{ $message }} @enderror
+</div>
diff --git a/resources/forum/livewire-tailwind/views/components/form/input-checkbox.blade.php b/resources/forum/livewire-tailwind/views/components/form/input-checkbox.blade.php
new file mode 100644
index 000000000..6b643223f
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/form/input-checkbox.blade.php
@@ -0,0 +1,11 @@
+<div {!! isset($xShow) && !empty($xShow) ? "x-show=\"{$xShow}\"" : "" !!} class="flex {{ isset($reverse) && $reverse ? 'flex-row-reverse' : '' }} items-center mb-2">
+    <input
+        id="{{ $id }}"
+        type="checkbox"
+        value="{{ $value }}"
+        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-800 dark:border-gray-600"
+        {{ $attributes }} />
+    @if (isset($label))
+        <label for="{{ $id }}" class="ms-2 font-medium text-gray-900 select-none dark:text-slate-400">{{ $label }}</label>
+    @endif
+</div>
diff --git a/resources/forum/livewire-tailwind/views/components/form/input-select.blade.php b/resources/forum/livewire-tailwind/views/components/form/input-select.blade.php
new file mode 100644
index 000000000..c88db127a
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/form/input-select.blade.php
@@ -0,0 +1,11 @@
+<div {!! isset($xShow) && !empty($xShow) ? "x-show=\"{$xShow}\"" : "" !!} class="mb-4">
+    <label for="{{ $id }}" class="block mb-2 font-medium text-gray-900 dark:text-slate-400">{{ $label }}</label>
+    <select
+        id="{{ $id }}"
+        class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        {{ $attributes }}>
+        {{ $slot }}
+    </select>
+
+    @include ('forum::components.form.error')
+</div>
diff --git a/resources/forum/livewire-tailwind/views/components/form/input-text.blade.php b/resources/forum/livewire-tailwind/views/components/form/input-text.blade.php
new file mode 100644
index 000000000..f5531a4b5
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/form/input-text.blade.php
@@ -0,0 +1,11 @@
+<div {!! isset($xShow) && !empty($xShow) ? "x-show=\"{$xShow}\"" : "" !!} class="mb-4">
+    <label for="{{ $id }}" class="block mb-2 font-medium text-gray-900 dark:text-slate-400">{{ $label }}</label>
+    <input
+        type="{{ $type ?? 'text' }}"
+        id="{{ $id }}"
+        value="{{ $value }}"
+        class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        {{ $attributes }} />
+
+    @include ('forum::components.form.error')
+</div>
diff --git a/resources/forum/livewire-tailwind/views/components/form/input-textarea.blade.php b/resources/forum/livewire-tailwind/views/components/form/input-textarea.blade.php
new file mode 100644
index 000000000..afb0004bf
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/form/input-textarea.blade.php
@@ -0,0 +1,11 @@
+<div {!! isset($xShow) && !empty($xShow) ? "x-show=\"{$xShow}\"" : "" !!} class="mb-4">
+    @if (isset($label))
+        <label for="{{ $id }}" class="block mb-2 font-medium text-gray-900 dark:text-slate-400">{{ $label }}</label>
+    @endif
+    <textarea
+        id="{{ $id }}"
+        class="block p-2.5 w-full min-h-36 text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        {{ $attributes }}></textarea>
+
+    @include ('forum::components.form.error')
+</div>
diff --git a/resources/forum/livewire-tailwind/views/components/group-button.blade.php b/resources/forum/livewire-tailwind/views/components/group-button.blade.php
new file mode 100644
index 000000000..60dfea7b7
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/group-button.blade.php
@@ -0,0 +1,14 @@
+@php
+$colorClasses = match ($intent) {
+    'primary', '', null => 'text-white bg-blue-600 hover:text-white hover:bg-blue-500',
+    'secondary' => 'text-zinc-800 bg-zinc-400/50 hover:bg-zinc-400/35 dark:text-slate-800 dark:bg-slate-400/50 dark:hover:bg-slate-400/65',
+    'danger' => 'text-white bg-red-500 hover:bg-red-400'
+};
+@endphp
+
+<a href="{{ $href }}" class="group-button py-2 px-5 text-base font-medium inline-flex items-center gap-x-2 -ms-px first:rounded-s-xl first:ms-0 last:rounded-e-xl focus:z-10 disabled:opacity-50 disabled:pointer-events-none {{ $colorClasses }}" {{ $attributes }}>
+    @if (isset($icon) && !empty($icon))
+        @include ("forum::components.icons.{$icon}", ['size' => '5'])
+    @endif
+    {{ $label }}
+</a>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/arrow-down-mini.blade.php b/resources/forum/livewire-tailwind/views/components/icons/arrow-down-mini.blade.php
new file mode 100644
index 000000000..94a3f2e41
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/arrow-down-mini.blade.php
@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '4' }} h-{{ $size ?? '4' }}">
+    <path fill-rule="evenodd" d="M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 1 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z" clip-rule="evenodd" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/arrow-path-mini.blade.php b/resources/forum/livewire-tailwind/views/components/icons/arrow-path-mini.blade.php
new file mode 100644
index 000000000..cc91c2a2d
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/arrow-path-mini.blade.php
@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '4' }} h-{{ $size ?? '4' }}">
+    <path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" clip-rule="evenodd" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/arrow-right-mini.blade.php b/resources/forum/livewire-tailwind/views/components/icons/arrow-right-mini.blade.php
new file mode 100644
index 000000000..ec405c168
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/arrow-right-mini.blade.php
@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '4' }} h-{{ $size ?? '4' }}">
+    <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/arrow-up-circle-mini.blade.php b/resources/forum/livewire-tailwind/views/components/icons/arrow-up-circle-mini.blade.php
new file mode 100644
index 000000000..76fda48ea
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/arrow-up-circle-mini.blade.php
@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '4' }} h-{{ $size ?? '4' }}">
+    <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm-.75-4.75a.75.75 0 0 0 1.5 0V8.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0L6.2 9.74a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z" clip-rule="evenodd" />
+  </svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/arrow-up-mini.blade.php b/resources/forum/livewire-tailwind/views/components/icons/arrow-up-mini.blade.php
new file mode 100644
index 000000000..d0034033f
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/arrow-up-mini.blade.php
@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '4' }} h-{{ $size ?? '4' }}">
+    <path fill-rule="evenodd" d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/book-open-outline.blade.php b/resources/forum/livewire-tailwind/views/components/icons/book-open-outline.blade.php
new file mode 100644
index 000000000..5e4afca6c
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/book-open-outline.blade.php
@@ -0,0 +1,9 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="inline-block w-{{ $size ?? '6' }} h-{{ $size ?? '6' }}">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/chat-bubble-text-mini.blade.php b/resources/forum/livewire-tailwind/views/components/icons/chat-bubble-text-mini.blade.php
new file mode 100644
index 000000000..04ad9f24b
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/chat-bubble-text-mini.blade.php
@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '4' }} h-{{ $size ?? '4' }}">
+  <path fill-rule="evenodd" d="M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 4.014 1 5.426v5.148c0 1.413.993 2.67 2.43 2.902 1.168.188 2.352.327 3.55.414.28.02.521.18.642.413l1.713 3.293a.75.75 0 0 0 1.33 0l1.713-3.293a.783.783 0 0 1 .642-.413 41.102 41.102 0 0 0 3.55-.414c1.437-.231 2.43-1.49 2.43-2.902V5.426c0-1.413-.993-2.67-2.43-2.902A41.289 41.289 0 0 0 10 2ZM6.75 6a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm0 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z" clip-rule="evenodd" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/chat-bubble-text-outline.blade.php b/resources/forum/livewire-tailwind/views/components/icons/chat-bubble-text-outline.blade.php
new file mode 100644
index 000000000..9ddb8cb28
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/chat-bubble-text-outline.blade.php
@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '4' }} h-{{ $size ?? '4' }}">
+  <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" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/chat-bubbles-mini.blade.php b/resources/forum/livewire-tailwind/views/components/icons/chat-bubbles-mini.blade.php
new file mode 100644
index 000000000..33905dd0f
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/chat-bubbles-mini.blade.php
@@ -0,0 +1,8 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '4' }} h-{{ $size ?? '4' }}">
+  <path d="M3.505 2.365A41.369 41.369 0 0 1 9 2c1.863 0 3.697.124 5.495.365 1.247.167 2.18 1.108 2.435 2.268a4.45 4.45 0 0 0-.577-.069 43.141 43.141 0 0 0-4.706 0C9.229 4.696 7.5 6.727 7.5 8.998v2.24c0 1.413.67 2.735 1.76 3.562l-2.98 2.98A.75.75 0 0 1 5 17.25v-3.443c-.501-.048-1-.106-1.495-.172C2.033 13.438 1 12.162 1 10.72V5.28c0-1.441 1.033-2.717 2.505-2.914Z" />
+  <path d="M14 6c-.762 0-1.52.02-2.271.062C10.157 6.148 9 7.472 9 8.998v2.24c0 1.519 1.147 2.839 2.71 2.935.214.013.428.024.642.034.2.009.385.09.518.224l2.35 2.35a.75.75 0 0 0 1.28-.531v-2.07c1.453-.195 2.5-1.463 2.5-2.915V8.998c0-1.526-1.157-2.85-2.729-2.936A41.645 41.645 0 0 0 14 6Z" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/chat-bubbles-outline.blade.php b/resources/forum/livewire-tailwind/views/components/icons/chat-bubbles-outline.blade.php
new file mode 100644
index 000000000..f94d5de70
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/chat-bubbles-outline.blade.php
@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '5' }} h-{{ $size ?? '5' }}">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/drag-area-vertical.blade.php b/resources/forum/livewire-tailwind/views/components/icons/drag-area-vertical.blade.php
new file mode 100644
index 000000000..be107bf12
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/drag-area-vertical.blade.php
@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 15 15"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '8' }} h-{{ $size ?? '8' }}">
+    <path clip-rule="evenodd" d="M4.49999 2.5C4.49999 1.94772 4.9477 1.5 5.49999 1.5C6.05227 1.5 6.49999 1.94772 6.49999 2.5C6.49999 3.05228 6.05227 3.5 5.49999 3.5C4.9477 3.5 4.49999 3.05228 4.49999 2.5ZM8.49999 2.5C8.49999 1.94772 8.9477 1.5 9.49999 1.5C10.0523 1.5 10.5 1.94772 10.5 2.5C10.5 3.05228 10.0523 3.5 9.49999 3.5C8.9477 3.5 8.49999 3.05229 8.49999 2.5ZM4.49998 7.5C4.49998 6.94772 4.9477 6.5 5.49998 6.5C6.05227 6.5 6.49998 6.94772 6.49998 7.5C6.49998 8.05228 6.05227 8.5 5.49998 8.5C4.9477 8.5 4.49998 8.05228 4.49998 7.5ZM8.49998 7.5C8.49998 6.94771 8.9477 6.5 9.49999 6.5C10.0523 6.5 10.5 6.94772 10.5 7.5C10.5 8.05228 10.0523 8.5 9.49998 8.5C8.9477 8.5 8.49998 8.05228 8.49998 7.5ZM4.49998 12.5C4.49998 11.9477 4.9477 11.5 5.49998 11.5C6.05227 11.5 6.49998 11.9477 6.49998 12.5C6.49998 13.0523 6.05227 13.5 5.49998 13.5C4.9477 13.5 4.49998 13.0523 4.49998 12.5ZM8.49998 12.5C8.49998 11.9477 8.9477 11.5 9.49998 11.5C10.0523 11.5 10.5 11.9477 10.5 12.5C10.5 13.0523 10.0523 13.5 9.49998 13.5C8.9477 13.5 8.49998 13.0523 8.49998 12.5Z" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/home-mini.blade.php b/resources/forum/livewire-tailwind/views/components/icons/home-mini.blade.php
new file mode 100644
index 000000000..64ff3200f
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/home-mini.blade.php
@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '4' }} h-{{ $size ?? '4' }}">
+  <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z" clip-rule="evenodd" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/lock-closed-mini.blade.php b/resources/forum/livewire-tailwind/views/components/icons/lock-closed-mini.blade.php
new file mode 100644
index 000000000..2a0be423c
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/lock-closed-mini.blade.php
@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '4' }} h-{{ $size ?? '4' }}">
+    <path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/lock-open-mini.blade.php b/resources/forum/livewire-tailwind/views/components/icons/lock-open-mini.blade.php
new file mode 100644
index 000000000..2bba2f070
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/lock-open-mini.blade.php
@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '4' }} h-{{ $size ?? '4' }}">
+    <path fill-rule="evenodd" d="M14.5 1A4.5 4.5 0 0 0 10 5.5V9H3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-1.5V5.5a3 3 0 1 1 6 0v2.75a.75.75 0 0 0 1.5 0V5.5A4.5 4.5 0 0 0 14.5 1Z" clip-rule="evenodd" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/pencil-mini.blade.php b/resources/forum/livewire-tailwind/views/components/icons/pencil-mini.blade.php
new file mode 100644
index 000000000..5889e1357
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/pencil-mini.blade.php
@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '4' }} h-{{ $size ?? '4' }}">
+    <path d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/pencil-outline.blade.php b/resources/forum/livewire-tailwind/views/components/icons/pencil-outline.blade.php
new file mode 100644
index 000000000..39d34e482
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/pencil-outline.blade.php
@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '6' }} h-{{ $size ?? '6' }}">
+    <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/sparkles-mini.blade.php b/resources/forum/livewire-tailwind/views/components/icons/sparkles-mini.blade.php
new file mode 100644
index 000000000..508d57150
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/sparkles-mini.blade.php
@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '4' }} h-{{ $size ?? '4' }}">
+    <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/squares-plus-outline.blade.php b/resources/forum/livewire-tailwind/views/components/icons/squares-plus-outline.blade.php
new file mode 100644
index 000000000..dc17a13e8
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/squares-plus-outline.blade.php
@@ -0,0 +1,9 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="inline-block w-{{ $size ?? '6' }} h-{{ $size ?? '6' }}">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/subcategory.blade.php b/resources/forum/livewire-tailwind/views/components/icons/subcategory.blade.php
new file mode 100644
index 000000000..e9e7691ad
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/subcategory.blade.php
@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '4' }} h-{{ $size ?? '4' }}">
+    <path d="M18.29 15.71l-4.58 4.58c-.39.39-1.03.39-1.42 0-.39-.39-.39-1.03 0-1.42L15.17 16H5c-.55 0-1-.45-1-1V5c0-.55.45-1 1-1s1 .45 1 1v9h9.17l-2.88-2.87c-.39-.39-.39-1.03 0-1.42.39-.39 1.03-.39 1.42 0l4.58 4.58c.39.39.39 1.03 0 1.42z"></path>
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/trash-mini.blade.php b/resources/forum/livewire-tailwind/views/components/icons/trash-mini.blade.php
new file mode 100644
index 000000000..de2a9e41b
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/trash-mini.blade.php
@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    class="inline-block w-{{ $size ?? '4' }} h-{{ $size ?? '4' }}">
+    <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/icons/x-mark.blade.php b/resources/forum/livewire-tailwind/views/components/icons/x-mark.blade.php
new file mode 100644
index 000000000..ac9f2466a
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/icons/x-mark.blade.php
@@ -0,0 +1,8 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor" class="inline-block w-{{ $size ?? '6' }} h-{{ $size ?? '6' }}">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+</svg>
diff --git a/resources/forum/livewire-tailwind/views/components/link-button.blade.php b/resources/forum/livewire-tailwind/views/components/link-button.blade.php
new file mode 100644
index 000000000..06fcc448e
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/link-button.blade.php
@@ -0,0 +1,19 @@
+@php
+$colorClasses = match ($intent) {
+    'primary', '', null => 'text-white bg-blue-600 hover:text-white hover:bg-blue-500',
+    'secondary' => 'text-zinc-800 bg-zinc-400/50 hover:bg-zinc-400/35 dark:text-slate-800 dark:bg-slate-400/50 dark:hover:bg-slate-400/65',
+    'danger' => 'text-white bg-red-500 hover:bg-red-400'
+};
+
+$sizeClasses = match ($size) {
+    'regular', '', null => 'min-w-36 px-4 py-2',
+    'small' => 'px-4 py-1',
+};
+@endphp
+
+<a href="{{ $href }}" class="link-button inline-block rounded-full font-medium text-lg text-center {{ $colorClasses }} {{ $sizeClasses }}" {{ $attributes }}>
+    @if (isset($icon) && !empty($icon))
+        @include ("forum::components.icons.{$icon}", ['size' => '5'])
+    @endif
+    {{ $label }}
+</a>
diff --git a/resources/forum/livewire-tailwind/views/components/loading-overlay.blade.php b/resources/forum/livewire-tailwind/views/components/loading-overlay.blade.php
new file mode 100644
index 000000000..5432e33a6
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/loading-overlay.blade.php
@@ -0,0 +1,15 @@
+<div wire:loading class="fixed top-0 right-0 bottom-0 left-0 bg-white/40 z-50">
+    <div class="flex h-screen place-content-center">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" class="w-16 w-16">
+            <circle fill="#9A9A9A" stroke="#9A9A9A" stroke-width="15" r="15" cx="40" cy="100">
+                <animate attributeName="opacity" calcMode="spline" dur="2" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.4"></animate>
+            </circle>
+            <circle fill="#9A9A9A" stroke="#9A9A9A" stroke-width="15" r="15" cx="100" cy="100">
+                <animate attributeName="opacity" calcMode="spline" dur="2" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.2"></animate>
+            </circle>
+            <circle fill="#9A9A9A" stroke="#9A9A9A" stroke-width="15" r="15" cx="160" cy="100">
+                <animate attributeName="opacity" calcMode="spline" dur="2" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="0"></animate>
+            </circle>
+        </svg>
+    </div>
+</div>
diff --git a/resources/forum/livewire-tailwind/views/components/modal.blade.php b/resources/forum/livewire-tailwind/views/components/modal.blade.php
new file mode 100644
index 000000000..2c3974dcd
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/modal.blade.php
@@ -0,0 +1,21 @@
+<div class="fixed top-0 right-0 bottom-0 left-0 bg-white/40 z-40 dark:bg-slate-900/40" {{ $attributes }}>
+    <div class="grid h-screen justify-items-center items-center" {!! !empty($onClose) ? "@click.self=\"{$onClose}\"" : '' !!}>
+        <div class="sm:min-w-96 bg-white shadow-lg rounded-md dark:bg-slate-700">
+            <div class="flex border-b border-slate-300 p-6 pb-4 dark:border-slate-500">
+                <div class="grow">
+                    <h2>{{ $heading }}</h2>
+                </div>
+                @if (!empty($onClose))
+                    <div class="pl-4 pt-1">
+                        <a href="#" class="" @click="{{ $onClose }}">
+                            @include ('forum::components.icons.x-mark')
+                        </a>
+                    </div>
+                @endif
+            </div>
+            <div class="p-6 pt-4 mt-2">
+                {{ $slot }}
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/forum/livewire-tailwind/views/components/pagination.blade.php b/resources/forum/livewire-tailwind/views/components/pagination.blade.php
new file mode 100644
index 000000000..f8f1a3fc0
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/pagination.blade.php
@@ -0,0 +1,106 @@
+@if ($paginator->hasPages())
+    <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="flex flex-col items-center justify-between">
+        <div class="flex justify-between flex-1 sm:hidden">
+            @if ($paginator->onFirstPage())
+                <span class="relative inline-flex items-center px-4 py-2 font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:text-gray-600 dark:bg-gray-800 dark:border-gray-600">
+                    {!! __('pagination.previous') !!}
+                </span>
+            @else
+                <a href="{{ $paginator->previousPageUrl() }}" class="relative inline-flex items-center px-4 py-2 font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
+                    {!! __('pagination.previous') !!}
+                </a>
+            @endif
+
+            @if ($paginator->hasMorePages())
+                <a href="{{ $paginator->nextPageUrl() }}" class="relative inline-flex items-center px-4 py-2 ml-3 font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
+                    {!! __('pagination.next') !!}
+                </a>
+            @else
+                <span class="relative inline-flex items-center px-4 py-2 ml-3 font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:text-gray-600 dark:bg-gray-800 dark:border-gray-600">
+                    {!! __('pagination.next') !!}
+                </span>
+            @endif
+        </div>
+
+        <div class="hidden sm:flex-1 sm:flex sm:flex-col sm:items-center sm:justify-between">
+            <div class="mb-4">
+                <p class="text-gray-700 leading-5 dark:text-gray-400">
+                    {!! __('Showing') !!}
+                    @if ($paginator->firstItem())
+                        <span class="font-medium">{{ $paginator->firstItem() }}</span>
+                        {!! __('to') !!}
+                        <span class="font-medium">{{ $paginator->lastItem() }}</span>
+                    @else
+                        {{ $paginator->count() }}
+                    @endif
+                    {!! __('of') !!}
+                    <span class="font-medium">{{ $paginator->total() }}</span>
+                    {!! __('results') !!}
+                </p>
+            </div>
+
+            <div class="text-center">
+                <span class="relative z-0 inline-flex rtl:flex-row-reverse shadow-sm rounded-md">
+                    {{-- Previous Page Link --}}
+                    @if ($paginator->onFirstPage())
+                        <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
+                            <span class="relative inline-flex items-center px-2 py-2 font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5 dark:bg-gray-800 dark:border-gray-600" aria-hidden="true">
+                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                </svg>
+                            </span>
+                        </span>
+                    @else
+                        <a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="relative inline-flex items-center px-2 py-2 font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('pagination.previous') }}">
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                    @endif
+
+                    {{-- Pagination Elements --}}
+                    @foreach ($elements as $element)
+                        {{-- "Three Dots" Separator --}}
+                        @if (is_string($element))
+                            <span aria-disabled="true">
+                                <span class="relative inline-flex items-center px-4 py-2 -ml-px font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5 dark:bg-gray-800 dark:border-gray-600">{{ $element }}</span>
+                            </span>
+                        @endif
+
+                        {{-- Array Of Links --}}
+                        @if (is_array($element))
+                            @foreach ($element as $page => $url)
+                                @if ($page == $paginator->currentPage())
+                                    <span aria-current="page">
+                                        <span class="relative inline-flex items-center px-4 py-2 -ml-px font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 dark:bg-gray-800 dark:border-gray-600">{{ $page }}</span>
+                                    </span>
+                                @else
+                                    <a href="{{ $url }}" class="relative inline-flex items-center px-4 py-2 -ml-px font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:text-gray-300 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
+                                        {{ $page }}
+                                    </a>
+                                @endif
+                            @endforeach
+                        @endif
+                    @endforeach
+
+                    {{-- Next Page Link --}}
+                    @if ($paginator->hasMorePages())
+                        <a href="{{ $paginator->nextPageUrl() }}" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('pagination.next') }}">
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                    @else
+                        <span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
+                            <span class="relative inline-flex items-center px-2 py-2 -ml-px font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5 dark:bg-gray-800 dark:border-gray-600" aria-hidden="true">
+                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                </svg>
+                            </span>
+                        </span>
+                    @endif
+                </span>
+            </div>
+        </div>
+    </nav>
+@endif
diff --git a/resources/forum/livewire-tailwind/views/components/pill.blade.php b/resources/forum/livewire-tailwind/views/components/pill.blade.php
new file mode 100644
index 000000000..391726ed4
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/pill.blade.php
@@ -0,0 +1,14 @@
+<span class="inline-block
+    rounded-full
+    text-base
+    text-nowrap
+    align-middle
+    {{ $bgColor ?? 'bg-zinc-300 dark:bg-slate-500' }}
+    {{ $textColor ?? 'text-zinc-600 dark:text-slate-200' }}
+    {{ $padding ?? 'px-2' }}
+    {{ $margin ?? 'mx-2' }}">
+    @if (isset($icon))
+        @include ("forum::components.icons.{$icon}")
+    @endif
+    {{ $text }}
+</span>
diff --git a/resources/forum/livewire-tailwind/views/components/post/card.blade.php b/resources/forum/livewire-tailwind/views/components/post/card.blade.php
new file mode 100644
index 000000000..03433ffe3
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/post/card.blade.php
@@ -0,0 +1,101 @@
+<div id="post-{{ $post->sequence }}" class="post-card my-4" x-data="postCard" data-post="{{ $post->id }}" {{ $selectable ? 'x-on:change=onPostChanged' : '' }}>
+    <div class="bg-white shadow-md rounded-lg flex flex-col sm:flex-row items-stretch dark:bg-slate-700 {{ $post->trashed() ? 'opacity-65' : '' }}" :class="classes">
+        @if ($showAuthorPane)
+            <div class="flex flex-row sm:flex-col w-full sm:w-1/5 px-6 py-4 sm:py-6 border-b sm:border-b-0 sm:border-r border-slate-200 dark:border-slate-600">
+                <div class="grow text-lg font-medium truncate">
+                    {{ $post->authorName }}
+                </div>
+                <div>
+                    @if (! isset($single) || ! $single)
+                        <a href="{{ Forum::route('thread.show', $post) }}">#{{ $post->sequence }}</a>
+                    @endif
+                </div>
+            </div>
+        @endif
+        <div class="grow p-6 w-full sm:w-4/5">
+            @if (isset($post->parent))
+                <livewire:forum::components.post.quote :post="$post->parent" />
+            @endif
+
+            <div class="dark:text-slate-100">
+                @if ($post->trashed())
+                    @can ('viewTrashedPosts')
+                        <div class="mb-4">
+                            {!! Forum::render($post->content) !!}
+                        </div>
+                    @endcan
+
+                    <div>
+                        <livewire:forum::components.pill
+                            bg-color="bg-zinc-400"
+                            text-color="text-zinc-950"
+                            margin="mr-2"
+                            icon="trash-mini"
+                            :text="trans('forum::general.deleted')" />
+                    </div>
+                @else
+                    {!! Forum::render($post->content) !!}
+                @endif
+            </div>
+
+            <div class="flex flex-col sm:flex-row mt-4">
+                <div class="grow text-slate-500">
+                    <livewire:forum::components.timestamp :carbon="$post->created_at" />
+                    @if ($post->hasBeenUpdated())
+                        <span class="mx-1 text-slate-500">•</span>
+                        {{ trans('forum::general.last_updated') }} <livewire:forum::components.timestamp :carbon="$post->updated_at" />
+                    @endif
+                </div>
+                @if (!isset($single) || !$single)
+                    <div class="text-right sm:text-left mt-2 sm:mt-0">
+                        @if (!$post->trashed())
+                            <a href="{{ Forum::route('post.show', $post) }}" class="font-medium">
+                                {{ trans('forum::general.permalink') }}
+                            </a>
+                            @can ('edit', $post)
+                                <a href="{{ Forum::route('post.edit', $post) }}" class="font-medium ml-2">
+                                    {{ trans('forum::general.edit') }}
+                                </a>
+                            @endcan
+                            @can ('reply', $post->thread)
+                                <a href="{{ Forum::route('thread.reply', $post->thread) }}?parent_id={{ $post->id }}" class="font-medium ml-2">
+                                    {{ trans('forum::general.reply') }}
+                                </a>
+                            @endcan
+                        @endif
+                        @if ($selectable)
+                            <div class="inline-block ml-4">
+                                <x-forum::form.input-checkbox
+                                    id=""
+                                    :value="$post->id"
+                                    @change="onChanged" />
+                            </div>
+                        @endif
+                    </div>
+                @endif
+            </div>
+        </div>
+    </div>
+</div>
+
+
+@script
+<script>
+Alpine.data('postCard', () => {
+    return {
+        classes: 'outline-none',
+        onChanged(event) {
+            event.stopPropagation();
+
+            if (event.target.checked) {
+                this.classes = 'outline outline-blue-500';
+            } else {
+                this.classes = 'outline-none';
+            }
+
+            $dispatch('change', { isSelected: event.target.checked, id: event.target.value });
+        }
+    }
+});
+</script>
+@endscript
diff --git a/resources/forum/livewire-tailwind/views/components/post/quote.blade.php b/resources/forum/livewire-tailwind/views/components/post/quote.blade.php
new file mode 100644
index 000000000..9f260440a
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/post/quote.blade.php
@@ -0,0 +1,16 @@
+<div class="border border-slate-200 rounded-md p-6 mb-4 dark:border-slate-600">
+    {!! Forum::render($post->content) !!}
+    <div class="flex mt-4">
+        <div class="grow">
+            <span class="font-medium">
+                {{ $post->authorName }}
+            </span>
+            <span class="text-slate-500">
+                <livewire:forum::components.timestamp :carbon="$post->updated_at" />
+            </span>
+        </div>
+        <div>
+            <a href="{{ Forum::route('thread.show', $post) }}">#{{ $post->sequence }}</a>
+        </div>
+    </div>
+</div>
diff --git a/resources/forum/livewire-tailwind/views/components/thread/card.blade.php b/resources/forum/livewire-tailwind/views/components/thread/card.blade.php
new file mode 100644
index 000000000..7186ab0cb
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/thread/card.blade.php
@@ -0,0 +1,95 @@
+<div class="thread-card my-4" x-data="threadCard" data-thread="{{ $thread->id }}" {{ $selectable ? 'x-on:change=onThreadChanged' : '' }} style="{{ $thread->category->styleVariables }}">
+    <div class="bg-white transition ease-in-out shadow-md rounded-lg p-4 flex flex-col sm:flex-row items-center justify-items-center dark:bg-slate-700 {{ $thread->trashed() ? 'opacity-75' : '' }}" :class="classes">
+        <div class="grow text-center sm:text-left">
+            <a href="{{ $thread->route }}" class="block text-xl mb-2">
+                @if ($thread->pinned)
+                    <livewire:forum::components.pill
+                        bg-color="bg-amber-400"
+                        text-color="text-amber-950"
+                        margin="mr-2"
+                        icon="arrow-up-circle-mini"
+                        :text="trans('forum::threads.pinned')" />
+                @endif
+                @if ($thread->locked)
+                    <livewire:forum::components.pill
+                        bg-color="bg-rose-400"
+                        text-color="text-rose-950"
+                        margin="mr-2"
+                        icon="lock-closed-mini"
+                        :text="trans('forum::threads.locked')" />
+                @endif
+                @if ($thread->userReadStatus !== null && ! $thread->trashed())
+                    <livewire:forum::components.pill
+                        bg-color="bg-teal-400"
+                        text-color="text-teal-950"
+                        margin="mr-2"
+                        icon="sparkles-mini"
+                        :text="trans($thread->userReadStatus)" />
+                @endif
+                @if ($thread->trashed())
+                    <livewire:forum::components.pill
+                        bg-color="bg-zinc-400"
+                        text-color="text-zinc-950"
+                        margin="mr-2"
+                        icon="trash-mini"
+                        :text="trans('forum::general.deleted')" />
+                @endif
+                <span class="inline-block align-middle {{ !$showCategory ? 'text-category' : '' }}">
+                    {{ $thread->title }}
+                </span>
+            </a>
+            @if ($showCategory)
+                <a href="{{ $thread->category->route }}" class="font-medium text-category">
+                    {{ $thread->category->title }}
+                </a>
+                <span class="mx-1 text-slate-500">•</span>
+            @endif
+            {{ $thread->author->name }}
+            <span class="text-slate-500">
+                <livewire:forum::components.timestamp :carbon="$thread->created_at" />
+            </span>
+        </div>
+        <div class="text-center text-base mt-2 sm:mt-0">
+            <livewire:forum::components.pill
+                icon="chat-bubble-text-mini"
+                :text="trans('forum::general.replies') . ': ' . $thread->reply_count" />
+        </div>
+        <div class="min-w-30 sm:min-w-48 lg:min-w-96 xl:w-full xl:max-w-lg text-center sm:text-right mt-2 sm:mt-0">
+            <a href="{{ Forum::route('thread.show', $thread->lastPost) }}" class="text-lg font-medium">{{ trans('forum::posts.view') }} @include ("forum::components.icons.arrow-right-mini")</a>
+            <br>
+            {{ $thread->lastPost->authorName }}
+            <span class="text-slate-500">
+                <livewire:forum::components.timestamp :carbon="$thread->lastPost->created_at" />
+            </span>
+        </div>
+        @if ($selectable)
+            <div class="pl-4">
+                <x-forum::form.input-checkbox
+                    id=""
+                    :value="$thread->id"
+                    @change="onChanged" />
+            </div>
+        @endif
+    </div>
+</div>
+
+@script
+<script>
+Alpine.data('threadCard', () => {
+    return {
+        classes: 'outline-none',
+        onChanged(event) {
+            event.stopPropagation();
+
+            if (event.target.checked) {
+                this.classes = 'outline outline-blue-500';
+            } else {
+                this.classes = 'outline-none';
+            }
+
+            $dispatch('change', { isSelected: event.target.checked, id: event.target.value });
+        }
+    }
+});
+</script>
+@endscript
diff --git a/resources/forum/livewire-tailwind/views/components/timestamp.blade.php b/resources/forum/livewire-tailwind/views/components/timestamp.blade.php
new file mode 100644
index 000000000..1cabe4359
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/components/timestamp.blade.php
@@ -0,0 +1,20 @@
+<time x-data="timestamp"
+    x-effect="setNaturalDiff(new Date('{{ $carbon->toIso8601String() }}'), $store.time.now)"
+    class="timestamp"
+    datetime="{{ $carbon }}"
+    title="{{ $carbon->toDayDateTimeString() }}">
+    <span x-text="naturalDiff"></span>
+</time>
+
+@script
+<script type="module">
+Alpine.data('timestamp', () => {
+    return {
+        naturalDiff: '',
+        setNaturalDiff(then, now) {
+            this.naturalDiff = dateFormatDistance(then, $store.time.now, { addSuffix: true });
+        }
+    }
+});
+</script>
+@endscript
diff --git a/resources/forum/livewire-tailwind/views/layouts/main.blade.php b/resources/forum/livewire-tailwind/views/layouts/main.blade.php
new file mode 100644
index 000000000..7fd2162a5
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/layouts/main.blade.php
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="csrf-token" content="{{ csrf_token() }}">
+
+        <title>
+            @if (isset($thread))
+                {{ $thread->title }} —
+            @endif
+            @if (isset($category))
+                {{ $category->title }} —
+            @endif
+            {{ trans('forum::general.home_title') }}
+        </title>
+
+        @vite([
+            'resources/forum/livewire-tailwind/css/forum.css',
+            'resources/forum/livewire-tailwind/js/forum.js'
+        ])
+    </head>
+    <body class="forum bg-slate-200 dark:bg-slate-800">
+        <div x-data="navbar">
+            <div class="bg-white shadow-md border-b border-slate-100 dark:bg-slate-800 dark:border-slate-700 dark:shadow-none" @click.outside="closeMenu">
+                <div class="container mx-auto p-4">
+                    <div class="flex flex-col md:flex-row flex-wrap items-center justify-between">
+                        <div class="flex w-full md:w-auto items-center justify-between">
+                            <div class="grow">
+                                <a href="/" class="text-lg font-medium">
+                                    {{ config('app.name') }}
+                                </a>
+                            </div>
+                            <button type="button" class="md:hidden inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-slate-400 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-slate-200 dark:focus:ring-slate-600" aria-controls="navbar" aria-expanded="false" @click="toggleMenu">
+                                <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="w-full md:w-auto md:block font-medium flex flex-col items-center justify-between mt-4 md:mt-0 md:flex-row rtl:space-x-reverse text-center" :class="{ hidden: isMenuCollapsed }">
+                            <span class="w-full md:w-auto">
+                                <a href="{{ route('forum.category.index') }}" class="block hover:bg-slate-100 dark:hover:bg-slate-600 rounded-md px-4 py-2 md:hover:bg-transparent md:dark:hover:bg-transparent md:inline dark:md:inline">{{ trans('forum::general.home_title') }}</a>
+                            </span>
+                            <span class="w-full md:w-auto">
+                                <a href="{{ route('forum.recent') }}" class="block hover:bg-slate-100 dark:hover:bg-slate-600 rounded-md px-4 py-2 md:hover:bg-transparent md:dark:hover:bg-transparent md:inline">{{ trans('forum::threads.recent') }}</a>
+                            </span>
+                            @auth
+                                <span class="w-full md:w-auto">
+                                    <a href="{{ route('forum.unread') }}" class="block hover:bg-slate-100 dark:hover:bg-slate-600 rounded-md px-4 py-2 md:hover:bg-transparent md:dark:hover:bg-transparent md:inline">{{ trans('forum::threads.unread_updated') }}</a>
+                                </span>
+                            @endauth
+                            @can ('moveCategories')
+                                <span class="w-full md:w-auto">
+                                    <a href="{{ route('forum.category.order') }}" class="block hover:bg-slate-100 dark:hover:bg-slate-600 rounded-md px-4 py-2 md:hover:bg-transparent md:dark:hover:bg-transparent md:inline">{{ trans('forum::general.manage') }}</a>
+                                </span>
+                            @endcan
+                            @if (Auth::check())
+                                <span class="relative w-full md:w-auto" @click.outside="closeUserDropdown">
+                                    <a class="block flex flex-row items-center place-content-center gap-1 hover:bg-slate-100 dark:hover:bg-slate-600 rounded-md px-4 py-2 md:hover:bg-transparent md:dark:hover:bg-transparent w-full md:w-auto md:inline" href="#" id="navbarDropdownMenuLink" @click="toggleUserDropdown">
+                                        {{ $username }}
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline w-3 h-3">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                                        </svg>
+                                    </a>
+                                    <div class="absolute right-0 left-0 md:left-auto w-auto md:w-44 divide-y border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-700 rounded-md" :class="{ hidden: isUserDropdownCollapsed }" aria-labelledby="navbarDropdownMenuLink">
+                                        <a class="block px-4 py-2" href="#" @click.prevent="logout">
+                                            {{ __('Log out') }}
+                                        </a>
+                                    </div>
+                                </span>
+                            @else
+                                <span class="w-full md:w-auto">
+                                    <a href="{{ url('/login') }}" class="block hover:bg-slate-100 dark:hover:bg-slate-600 rounded-md px-4 py-2 md:hover:bg-transparent md:dark:hover:bg-transparent md:inline">
+                                        {{ __('Log in') }}
+                                    </a>
+                                </span>
+                                <span class="w-full md:w-auto">
+                                    <a href="{{ url('/register') }}" class="block hover:bg-slate-100 dark:hover:bg-slate-600 rounded-md px-4 py-2 md:hover:bg-transparent md:dark:hover:bg-transparent md:inline">
+                                        {{ __('Register') }}
+                                    </a>
+                                </span>
+                            @endif
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="container mx-auto p-4">
+            {{ $slot }}
+        </div>
+
+        <livewire:forum::components.alerts />
+
+        <script type="module">
+            document.addEventListener('alpine:init', () => {
+                Alpine.store('time', {
+                    now: new Date(),
+                    init() {
+                        setInterval(() => {
+                            this.now = new Date();
+                        }, 1000);
+                    }
+                })
+            });
+
+            Alpine.data('navbar', () => {
+                return {
+                    isMenuCollapsed: true,
+                    isUserDropdownCollapsed: true,
+                    toggleMenu() {
+                        this.isMenuCollapsed = !this.isMenuCollapsed;
+                    },
+                    closeMenu() {
+                        this.isMenuCollapsed = true;
+                    },
+                    toggleUserDropdown() {
+                        this.isUserDropdownCollapsed = !this.isUserDropdownCollapsed;
+                    },
+                    closeUserDropdown() {
+                        this.isUserDropdownCollapsed = true;
+                    },
+                    logout() {
+                        const csrfToken = document.head.querySelector("[name=csrf-token]").content;
+
+                        fetch('/logout', {
+                            method: 'POST',
+                            headers: {
+                                'X-CSRF-TOKEN': csrfToken
+                            }
+                        }).then(() => { window.location.reload(); });
+                    }
+                }
+            });
+        </script>
+    </body>
+</html>
diff --git a/resources/forum/livewire-tailwind/views/pages/category/create.blade.php b/resources/forum/livewire-tailwind/views/pages/category/create.blade.php
new file mode 100644
index 000000000..af65f9781
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/pages/category/create.blade.php
@@ -0,0 +1,60 @@
+<div>
+    @include ('forum::components.loading-overlay')
+    @include ('forum::components.breadcrumbs')
+
+    <div class="flex justify-center items-center">
+        <div class="grow max-w-screen-md">
+            <h1>{{ trans('forum::categories.create') }}</h1>
+
+            <div class="bg-white rounded-md shadow-md my-2 p-6 dark:bg-slate-700">
+                <form wire:submit="create">
+                    <x-forum::form.input-text
+                        id="title"
+                        :label="trans('forum::general.title')"
+                        wire:model="title" />
+
+                    <x-forum::form.input-text
+                        id="description"
+                        :label="trans('forum::general.description')"
+                        wire:model="description" />
+
+                    <x-forum::form.input-text
+                        id="color"
+                        :label="trans('forum::general.color_light_mode')"
+                        wire:model="color_light_mode"
+                        data-coloris />
+
+                    <x-forum::form.input-text
+                        id="color"
+                        :label="trans('forum::general.color_dark_mode')"
+                        wire:model="color_dark_mode"
+                        data-coloris />
+
+                    @if ($categories->count() > 0)
+                        <x-forum::form.input-select
+                            id="parent-category"
+                            :label="trans('forum::categories.parent')"
+                            wire:model="parent_category">
+                            <option value="0">{{ trans('forum::general.none') }}</option>
+                            @include ('forum::components.category.options', ['categories' => $categories])
+                        </x-forum::form.input-select>
+                    @endif
+
+                    <x-forum::form.input-checkbox
+                        id="accepts-threads"
+                        :label="trans('forum::categories.enable_threads')"
+                        wire:model="accepts_threads" />
+
+                    <x-forum::form.input-checkbox
+                        id="make-private"
+                        :label="trans('forum::categories.make_private')"
+                        wire:model="is_private" />
+
+                    <div class="text-center mt-4">
+                        <x-forum::button :label="trans('forum::general.create')" type="submit" />
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/forum/livewire-tailwind/views/pages/category/edit.blade.php b/resources/forum/livewire-tailwind/views/pages/category/edit.blade.php
new file mode 100644
index 000000000..1261410c3
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/pages/category/edit.blade.php
@@ -0,0 +1,107 @@
+<div x-data="editCategory">
+    @include ('forum::components.loading-overlay')
+    @include ('forum::components.breadcrumbs')
+
+    <div class="flex justify-center items-center">
+        <div class="grow max-w-screen-md">
+            <h1 class="mb-2">{{ trans('forum::categories.edit') }}</h1>
+            <h2 class="mb-4 text-slate-500">{{ $category->title }}</h2>
+
+            <div class="bg-white rounded-md shadow-md my-2 p-6 dark:bg-slate-700">
+                <form wire:submit="save">
+                    <x-forum::form.input-text
+                        id="title"
+                        :label="trans('forum::general.title')"
+                        wire:model="title" />
+
+                    <x-forum::form.input-text
+                        id="description"
+                        :label="trans('forum::general.description')"
+                        wire:model="description" />
+
+                    <x-forum::form.input-text
+                        id="color"
+                        :label="trans('forum::general.color_light_mode')"
+                        wire:model="color_light_mode"
+                        data-coloris />
+
+                    <x-forum::form.input-text
+                        id="color"
+                        :label="trans('forum::general.color_dark_mode')"
+                        wire:model="color_dark_mode"
+                        data-coloris />
+
+                    @if ($categories->count() > 0)
+                        <x-forum::form.input-select
+                            id="parent-category"
+                            :label="trans('forum::categories.parent')"
+                            wire:model="parent_category">
+                            <option value="0">{{ trans('forum::general.none') }}</option>
+                            @include ('forum::components.category.options', ['categories' => $categories])
+                        </x-forum::form.input-select>
+                    @endif
+
+                    <x-forum::form.input-checkbox
+                        id="accepts-threads"
+                        :label="trans('forum::categories.enable_threads')"
+                        wire:model="accepts_threads" />
+
+                    <x-forum::form.input-checkbox
+                        id="make-private"
+                        :label="trans('forum::categories.make_private')"
+                        wire:model="is_private" />
+
+                    <div class="flex mt-4">
+                        <div class="grow">
+                            <x-forum::button
+                                intent="danger"
+                                :label="trans('forum::general.delete')"
+                                @click.prevent="requestDelete" />
+                        </div>
+                        <div>
+                            <x-forum::button :label="trans('forum::general.save')" type="submit" />
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <x-forum::modal
+        :heading="trans('forum::general.generic_confirm')"
+        x-show="showDeleteModal"
+        onClose="showDeleteModal = false">
+        {{ trans('forum::categories.confirm_nonempty_delete') }}
+
+        <div class="flex flex-wrap mt-6">
+            <div class="grow">
+                <x-forum::button
+                    intent="secondary"
+                    :label="trans('forum::general.cancel')"
+                    @click="showDeleteModal = false" />
+            </div>
+            <div>
+                <x-forum::button
+                    intent="primary"
+                    :label="trans('forum::general.proceed')"
+                    @click="confirmDelete" />
+            </div>
+        </div>
+    </x-forum::modal>
+</div>
+
+@script
+<script>
+Alpine.data('editCategory', () => {
+    return {
+        showDeleteModal: false,
+        requestDelete(event) {
+            this.showDeleteModal = true;
+        },
+        confirmDelete() {
+            $wire.delete();
+        }
+    }
+});
+</script>
+@endscript
diff --git a/resources/forum/livewire-tailwind/views/pages/category/index.blade.php b/resources/forum/livewire-tailwind/views/pages/category/index.blade.php
new file mode 100644
index 000000000..4e809f492
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/pages/category/index.blade.php
@@ -0,0 +1,23 @@
+<div>
+    @include ('forum::components.loading-overlay')
+    @include ('forum::components.breadcrumbs')
+
+    <h1>{{ trans('forum::general.index') }}</h1>
+
+    <div class="flex">
+        <div class="grow">
+        </div>
+        <div>
+            @can ('createCategories')
+                <x-forum::link-button
+                    :label="trans('forum::categories.create')"
+                    icon="squares-plus-outline"
+                    :href="Forum::route('category.create')" />
+            @endcan
+        </div>
+    </div>
+
+    @foreach ($categories as $category)
+        <livewire:forum::components.category.card :$category :key="$category->id" />
+    @endforeach
+</div>
diff --git a/resources/forum/livewire-tailwind/views/pages/category/manage.blade.php b/resources/forum/livewire-tailwind/views/pages/category/manage.blade.php
new file mode 100644
index 000000000..2f9561193
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/pages/category/manage.blade.php
@@ -0,0 +1,83 @@
+<div x-data="manage">
+    @include ('forum::components.loading-overlay')
+    @include ('forum::components.breadcrumbs')
+
+    <div class="flex justify-center items-center">
+        <div class="grow max-w-screen-lg">
+            <h1>{{ trans('forum::general.manage') }}</h1>
+
+            @can ('createCategories')
+                <div class="mb-6 text-right">
+                    <x-forum::link-button
+                        :label="trans('forum::categories.create')"
+                        icon="squares-plus-outline"
+                        :href="Forum::route('category.create')" />
+                </div>
+            @endcan
+
+            <div class="bg-white dark:bg-slate-700 rounded-md shadow-md my-2 p-6">
+                <ol id="category-tree">
+                    @include ('forum::components.category.draggable-items', ['categories' => $categories])
+                </ol>
+
+                <div class="mt-4 text-right">
+                    <x-forum::button
+                        id="save"
+                        :label="trans('forum::general.save')"
+                        x-ref="button"
+                        @click="save"
+                        disabled />
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@script
+<script>
+Alpine.data('manage', () => {
+    return {
+        nestedSort: null,
+        init () {
+            this.initialiseNestedSort();
+        },
+        initialiseNestedSort() {
+            this.nestedSort = new NestedSort({
+                propertyMap: {
+                    id: 'id',
+                    parent: 'parent_id',
+                    text: 'title',
+                },
+                actions: {
+                    onDrop: () => $refs.button.disabled = false
+                },
+                el: '#category-tree',
+                listItemClassNames: 'border border-slate-300 rounded-md text-lg p-4 my-2'
+            });
+        },
+        getItems (ol) {
+            let tree = [];
+            for (let i = 0; i < ol.children.length; ++i) {
+                let item = { id: ol.children[i].dataset.id, children: [] };
+                for (let j = 0; j < ol.children[i].children.length; ++j) {
+                    if (ol.children[i].children[j].tagName == 'OL') {
+                        item.children = this.getItems(ol.children[i].children[j]);
+                    }
+                }
+
+                tree.push(item);
+            }
+
+            return tree;
+        },
+        async save () {
+            let tree = this.getItems(document.getElementById('category-tree'));
+            $wire.tree = tree;
+            const result = await $wire.save();
+            $dispatch('alert', result);
+            this.initialiseNestedSort();
+        }
+    }
+});
+</script>
+@endscript
diff --git a/resources/forum/livewire-tailwind/views/pages/category/show.blade.php b/resources/forum/livewire-tailwind/views/pages/category/show.blade.php
new file mode 100644
index 000000000..0756ea1b5
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/pages/category/show.blade.php
@@ -0,0 +1,197 @@
+<div x-data="category" x-on:page-changed="onPageChanged" style="{{ $category->styleVariables }}">
+    @include ('forum::components.loading-overlay')
+    @include ('forum::components.breadcrumbs')
+
+    <h1 class="mb-0 text-category">{{ $category->title }}</h1>
+    <h2 class="mt-0 text-slate-500">{{ $category->description }}</h2>
+
+    <div class="flex mt-6 mb-8">
+        <div class="grow">
+            @can ('edit', $category)
+                <x-forum::link-button
+                    intent="secondary"
+                    :href="Forum::route('category.edit', $category)"
+                    :label="trans('forum::categories.edit')" />
+            @endcan
+        </div>
+        @can ('createCategories')
+            <div>
+                <x-forum::link-button
+                    :label="trans('forum::categories.create')"
+                    icon="squares-plus-outline"
+                    :href="Forum::route('category.create') . '?parent_id=' . $category->id" />
+            </div>
+        @endcan
+    </div>
+
+    @foreach ($category->descendants as $child)
+        <livewire:forum::components.category.card :category="$child" :key="$child->id" />
+    @endforeach
+
+    <div class="flex mt-6 mb-8">
+        <div class="grow">
+        </div>
+        @if ($category->accepts_threads)
+            @can ('createThreads', $category)
+                <div>
+                    <x-forum::link-button
+                        :href="Forum::route('thread.create', $category)"
+                        icon="pencil-outline"
+                        :label="trans('forum::threads.new_thread')" />
+                </div>
+            @endcan
+        @endif
+    </div>
+
+    @if (count($selectableThreadIds) > 0)
+        <div class="flex justify-end">
+            <x-forum::form.input-checkbox
+                id="toggle-all"
+                value=""
+                :label="trans('forum::threads.select_all')"
+                x-model="toggledAllThreads"
+                @click="toggleAllThreads" />
+        </div>
+    @endif
+
+    <div class="my-4">
+        @foreach ($threads as $thread)
+            <livewire:forum::components.thread.card
+                :$thread
+                :key="$thread->id . $updateKey"
+                :selectable="in_array($thread->id, $selectableThreadIds)" />
+        @endforeach
+
+        @if ($category->accepts_threads && $threads->count() == 0)
+            <div class="p-6 border border-slate-300 dark:border-slate-700 rounded-md text-center text-slate-500 text-lg font-medium">
+                {{ trans('forum::threads.none_found') }}
+            </div>
+        @endif
+    </div>
+
+    <div x-show="selectedThreads.length > 0" class="fixed bottom-0 right-0 z-40 min-w-96 bg-white shadow-md rounded-md m-4 p-6 dark:bg-slate-700">
+        <h3>{{ trans('forum::general.with_selection') }}</h3>
+
+        <x-forum::form.input-select
+            id="selected-action"
+            x-model="selectedAction">
+                <option value="none" disabled>{{ trans_choice('forum::general.actions', 1) }}...</option>
+            @can ('deleteThreads', $category)
+                <option value="delete">{{ trans('forum::general.delete') }}</option>
+            @endcan
+            @can ('restoreThreads', $category)
+                <option value="restore">{{ trans('forum::general.restore') }}</option>
+            @endcan
+            @can ('moveThreadsFrom', $category)
+                <option value="move">{{ trans('forum::general.move') }}</option>
+            @endcan
+            @can ('lockThreads', $category)
+                <option value="lock">{{ trans('forum::threads.lock') }}</option>
+                <option value="unlock">{{ trans('forum::threads.unlock') }}</option>
+            @endcan
+            @can ('pinThreads', $category)
+                <option value="pin">{{ trans('forum::threads.pin') }}</option>
+                <option value="unpin">{{ trans('forum::threads.unpin') }}</option>
+            @endcan
+        </x-forum::form.input-select>
+
+        @if (config('forum.general.soft_deletes'))
+            <x-forum::form.input-checkbox
+                id="permadelete"
+                value=""
+                :label="trans('forum::general.perma_delete')"
+                x-show="selectedAction == 'delete'"
+                x-model="permadelete" />
+        @endif
+
+        <x-forum::form.input-select
+            id="destination-category"
+            :label="trans_choice('forum::categories.category', 1)"
+            x-show="selectedAction == 'move'"
+            x-model="destinationCategory">
+            <option value="0" disabled>...</option>
+            @include ('forum::components.category.options', ['categories' => $threadDestinationCategories, 'disable' => $category->id])
+        </x-forum::form.input-select>
+
+        <x-forum::button
+            :label="trans('forum::general.proceed')"
+            @click="applySelectedAction"
+            x-bind:disabled="selectedAction == 'none' || selectedAction == 'move' && destinationCategory == 0" />
+    </div>
+
+    {{ $threads->links('forum::components.pagination') }}
+</div>
+
+@script
+<script>
+Alpine.data('category', () => {
+    return {
+        toggledAllThreads: false,
+        selectedThreads: [],
+        selectedAction: 'none',
+        permadelete: false,
+        destinationCategory: 0,
+        confirmMessage: "{{ trans('forum::general.generic_confirm') }}",
+        reset() {
+            this.toggledAllThreads = false;
+            this.selectedThreads = [];
+            this.permadelete = false;
+            this.destinationCategory = 0;
+        },
+        onThreadChanged(event) {
+            if (event.detail.isSelected) {
+                this.selectedThreads.push(event.detail.id);
+            } else {
+                this.selectedThreads.splice(this.selectedThreads.indexOf(event.detail.id), 1);
+            }
+        },
+        onPageChanged(event) {
+            this.reset();
+        },
+        async applySelectedAction() {
+            if (this.selectedAction == null || this.selectedThreads.length == 0) {
+                return;
+            }
+
+            let result;
+            switch (this.selectedAction) {
+                case 'delete':
+                    if (!confirm(this.confirmMessage)) return;
+                    result = await $wire.deleteThreads(this.selectedThreads, this.permadelete);
+                    break;
+                case 'restore':
+                    result = await $wire.restoreThreads(this.selectedThreads);
+                    break;
+                case 'move':
+                    result = await $wire.moveThreads(this.selectedThreads, this.destinationCategory);
+                    break;
+                case 'lock':
+                    result = await $wire.lockThreads(this.selectedThreads);
+                    break;
+                case 'unlock':
+                    result = await $wire.unlockThreads(this.selectedThreads);
+                    break;
+                case 'pin':
+                    result = await $wire.pinThreads(this.selectedThreads);
+                    break;
+                case 'unpin':
+                    result = await $wire.unpinThreads(this.selectedThreads);
+                    break;
+            }
+
+            if (result.type == 'success') this.reset();
+            $dispatch('alert', result);
+        },
+        toggleAllThreads(event) {
+            this.toggledAllThreads = !this.toggledAllThreads;
+            if (!this.toggledAllThreads) this.selectedThreads = [];
+            const checkboxes = document.querySelectorAll('[data-thread] input[type=checkbox]');
+            checkboxes.forEach(checkbox => {
+                checkbox.checked = this.toggledAllThreads;
+                checkbox.dispatchEvent(new Event('change'));
+            });
+        }
+    }
+});
+</script>
+@endscript
diff --git a/resources/forum/livewire-tailwind/views/pages/post/edit.blade.php b/resources/forum/livewire-tailwind/views/pages/post/edit.blade.php
new file mode 100644
index 000000000..4e02cbd81
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/pages/post/edit.blade.php
@@ -0,0 +1,75 @@
+<div x-data="editPost">
+    @include ('forum::components.loading-overlay')
+    @include ('forum::components.breadcrumbs')
+
+    <div class="flex justify-center items-center">
+        <div class="grow max-w-screen-lg">
+            <h1 class="mb-2">{{ trans('forum::posts.edit') }}</h1>
+            <h2 class="mb-4 text-slate-500">Re: {{ $post->thread->title }}</h2>
+
+            <div class="mb-4 text-right">
+                <x-forum::link-button
+                    :href="$post->route"
+                    :label="trans('forum::threads.view')" />
+            </div>
+
+            <div class="bg-white rounded-md shadow-md my-2 p-6 dark:bg-slate-700">
+                <form wire:submit="save">
+                    <x-forum::form.input-textarea
+                        id="content"
+                        wire:model="content" />
+
+                    <div class="flex mt-6">
+                        <div class="grow">
+                            <x-forum::button
+                                intent="danger"
+                                :label="trans('forum::general.delete')"
+                                @click.prevent="requestDelete" />
+                        </div>
+                        <div>
+                            <x-forum::button :label="trans('forum::general.save')" type="submit" />
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <x-forum::modal
+        :heading="trans('forum::general.generic_confirm')"
+        x-show="showDeleteModal"
+        onClose="showDeleteModal = false">
+        {{ trans_choice('forum::posts.confirm_delete', 1) }}
+
+        <div class="flex flex-wrap mt-6">
+            <div class="grow">
+                <x-forum::button
+                    intent="secondary"
+                    :label="trans('forum::general.cancel')"
+                    @click="showDeleteModal = false" />
+            </div>
+            <div>
+                <x-forum::button
+                    intent="primary"
+                    :label="trans('forum::general.proceed')"
+                    @click="confirmDelete" />
+            </div>
+        </div>
+    </x-forum::modal>
+</div>
+
+@script
+<script>
+Alpine.data('editPost', () => {
+    return {
+        showDeleteModal: false,
+        requestDelete(event) {
+            this.showDeleteModal = true;
+        },
+        confirmDelete() {
+            $wire.delete();
+        }
+    }
+});
+</script>
+@endscript
diff --git a/resources/forum/livewire-tailwind/views/pages/post/show.blade.php b/resources/forum/livewire-tailwind/views/pages/post/show.blade.php
new file mode 100644
index 000000000..71eace7ee
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/pages/post/show.blade.php
@@ -0,0 +1,17 @@
+<div>
+    @include ('forum::components.loading-overlay')
+    @include ('forum::components.breadcrumbs')
+
+    <div class="flex justify-center items-center">
+        <div class="grow max-w-screen-xl">
+            <h1 class="mb-2">{{ trans('forum::posts.view') }}</h1>
+            <h2 class="text-slate-500">Re: {{ $post->thread->title }}</h2>
+
+            <div class="text-right">
+                <x-forum::link-button :href="$post->route" :label="trans('forum::threads.view')" />
+            </div>
+
+            <livewire:forum::components.post.card :$post :single="true" />
+        </div>
+    </div>
+</div>
diff --git a/resources/forum/livewire-tailwind/views/pages/thread/create.blade.php b/resources/forum/livewire-tailwind/views/pages/thread/create.blade.php
new file mode 100644
index 000000000..03991d98b
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/pages/thread/create.blade.php
@@ -0,0 +1,36 @@
+<div>
+    @include ('forum::components.loading-overlay')
+    @include ('forum::components.breadcrumbs')
+
+    <div class="flex justify-center items-center">
+        <div class="grow max-w-screen-lg">
+            <h1>{{ trans('forum::threads.new_thread') }} ({{ $category->title }})</h1>
+
+            <div class="bg-white rounded-md shadow-md my-2 p-6 dark:bg-slate-700">
+                <form wire:submit="create">
+                    <x-forum::form.input-text
+                        id="title"
+                        value=""
+                        :label="trans('forum::general.title')"
+                        wire:model="title" />
+
+                    <x-forum::form.input-textarea
+                        id="content"
+                        wire:model="content" />
+
+                    <div class="flex mt-6">
+                        <div class="grow">
+                            <x-forum::button
+                                href="{{ URL::previous() }}"
+                                intent="secondary"
+                                label="{{ trans('forum::general.cancel') }}" />
+                        </div>
+                        <div class="grow text-right">
+                            <x-forum::button :label="trans('forum::general.create')" type="submit" />
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/forum/livewire-tailwind/views/pages/thread/recent.blade.php b/resources/forum/livewire-tailwind/views/pages/thread/recent.blade.php
new file mode 100644
index 000000000..a6f91509c
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/pages/thread/recent.blade.php
@@ -0,0 +1,22 @@
+<div>
+    @include ('forum::components.loading-overlay')
+    @include ('forum::components.breadcrumbs')
+
+    <h1 class="mb-0">{{ trans('forum::threads.recent') }}</h1>
+
+    <div class="my-4">
+        @foreach ($threads as $thread)
+            <livewire:forum::components.thread.card
+                :$thread
+                :key="$thread->id"
+                :selectable="false"
+                :show-category="true" />
+        @endforeach
+
+        @if ($threads->count() == 0)
+            <div class="p-6 border border-slate-300 dark:border-slate-700 rounded-md text-center text-slate-500 text-lg font-medium">
+                {{ trans('forum::threads.none_found') }}
+            </div>
+        @endif
+    </div>
+</div>
diff --git a/resources/forum/livewire-tailwind/views/pages/thread/reply.blade.php b/resources/forum/livewire-tailwind/views/pages/thread/reply.blade.php
new file mode 100644
index 000000000..09849db1a
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/pages/thread/reply.blade.php
@@ -0,0 +1,36 @@
+<div>
+    @include ('forum::components.loading-overlay')
+    @include ('forum::components.breadcrumbs')
+
+    <div class="flex justify-center items-center">
+        <div class="grow max-w-screen-lg">
+            <h1 class="mb-2">{{ trans('forum::general.reply') }}</h1>
+            <h2 class="text-slate-500">Re: {{ $thread->title }}</h2>
+
+            @if (isset($parent) && !$parent->trashed())
+                <h3 class="mt-4 text-slate-500">{{ trans('forum::general.replying_to', ['item' => $parent->authorName]) }}</h3>
+                <livewire:forum::components.post.card :post="$parent" :single="true" :show-author-pane="false" />
+            @endif
+
+            <div class="bg-white rounded-md shadow-md my-2 p-6 dark:bg-slate-700">
+                <form wire:submit="reply">
+                    <x-forum::form.input-textarea
+                        id="content"
+                        wire:model="form.content" />
+
+                    <div class="flex mt-6">
+                        <div class="grow">
+                            <x-forum::link-button
+                                href="{{ URL::previous() }}"
+                                intent="secondary"
+                                label="{{ trans('forum::general.cancel') }}" />
+                        </div>
+                        <div class="grow text-right">
+                            <x-forum::button :label="trans('forum::general.reply')" type="submit" />
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/forum/livewire-tailwind/views/pages/thread/show.blade.php b/resources/forum/livewire-tailwind/views/pages/thread/show.blade.php
new file mode 100644
index 000000000..53916f7a0
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/pages/thread/show.blade.php
@@ -0,0 +1,369 @@
+<div x-data="thread" x-on:page-changed="onPageChanged">
+    @include ('forum::components.loading-overlay')
+    @include ('forum::components.breadcrumbs')
+
+    <h1 class="mb-0">{{ $thread->title }}</h1>
+
+    <div class="flex items-center mt-4 mb-6">
+        <div class="grow">
+            @if ($thread->pinned)
+                <livewire:forum::components.pill
+                    bg-color="bg-amber-400"
+                    text-color="text-amber-950"
+                    margin="mr-2"
+                    icon="arrow-up-circle-mini"
+                    :text="trans('forum::threads.pinned')" />
+            @endif
+            @if ($thread->locked)
+                <livewire:forum::components.pill
+                    bg-color="bg-rose-400"
+                    text-color="text-rose-950"
+                    margin="mr-2"
+                    icon="lock-closed-mini"
+                    :text="trans('forum::threads.locked')" />
+            @endif
+            @if ($thread->trashed())
+                <livewire:forum::components.pill
+                    bg-color="bg-zinc-400"
+                    text-color="text-zinc-950"
+                    margin="mr-2"
+                    icon="trash-mini"
+                    :text="trans('forum::general.deleted')" />
+            @endif
+        </div>
+
+        @if (count($selectablePostIds) > 0)
+            <div style="margin-bottom: -.6rem;">
+                <x-forum::form.input-checkbox
+                    id="toggle-all"
+                    value=""
+                    :label="trans('forum::posts.select_all')"
+                    x-model="toggledAllPosts"
+                    @click="toggleAllPosts" />
+            </div>
+        @endif
+    </div>
+
+    <div class="flex flex-col lg:flex-row items-center">
+        <div class="grow">
+            <div class="inline-flex flex-wrap sm:flex-nowrap">
+                @if (Gate::allows('deleteThreads', $thread->category) && Gate::allows('delete', $thread))
+                    @if ($thread->trashed())
+                        <x-forum::group-button
+                            intent="danger"
+                            size="small"
+                            icon="trash-mini"
+                            href="#"
+                            :label="trans('forum::general.perma_delete')"
+                            @click.prevent="confirmThreadAction('permadelete', '{{ trans_choice('forum::threads.confirm_perma_delete', 1) }}')" />
+                    @else
+                        <x-forum::group-button
+                            intent="danger"
+                            size="small"
+                            icon="trash-mini"
+                            href="#"
+                            :label="trans('forum::general.delete')"
+                            @click.prevent="confirmThreadAction('delete', '{{ trans_choice('forum::threads.confirm_delete', 1) }}')" />
+                    @endif
+                @endif
+                @if ($thread->trashed() && Gate::allows('restoreThreads', $thread->category) && Gate::allows('restore', $thread))
+                    <x-forum::group-button
+                        intent="secondary"
+                        size="small"
+                        icon="arrow-path-mini"
+                        :label="trans('forum::general.restore')"
+                        @click.prevent="confirmThreadAction('restore', '{{ trans_choice('forum::threads.confirm_restore', 1) }}')" />
+                @endif
+                @if (!$thread->trashed())
+                    @can ('lockThreads', $thread->category)
+                        @if ($thread->locked)
+                            <x-forum::group-button
+                                intent="secondary"
+                                size="small"
+                                icon="lock-open-mini"
+                                :label="trans('forum::threads.unlock')"
+                                @click.prevent="confirmThreadAction('unlock', '{{ trans_choice('forum::threads.confirm_unlock', 1) }}')" />
+                        @else
+                            <x-forum::group-button
+                                intent="secondary"
+                                size="small"
+                                icon="lock-closed-mini"
+                                :label="trans('forum::threads.lock')"
+                                @click.prevent="confirmThreadAction('lock', '{{ trans_choice('forum::threads.confirm_lock', 1) }}')" />
+                        @endif
+                    @endcan
+                    @can ('pinThreads', $thread->category)
+                        @if ($thread->pinned)
+                            <x-forum::group-button
+                                intent="secondary"
+                                size="small"
+                                icon="arrow-down-mini"
+                                :label="trans('forum::threads.unpin')"
+                                @click.prevent="confirmThreadAction('unpin', '{{ trans_choice('forum::threads.confirm_unpin', 1) }}')" />
+                        @else
+                            <x-forum::group-button
+                                intent="secondary"
+                                size="small"
+                                icon="arrow-up-mini"
+                                :label="trans('forum::threads.pin')"
+                                @click.prevent="confirmThreadAction('pin', '{{ trans_choice('forum::threads.confirm_pin', 1) }}')" />
+                        @endif
+                    @endcan
+                    @can ('rename', $thread)
+                        <x-forum::group-button
+                            intent="secondary"
+                            size="small"
+                            icon="pencil-mini"
+                            :label="trans('forum::general.rename')"
+                            @click.prevent="confirmThreadAction('rename', '')" />
+                    @endcan
+                    @can ('moveThreadsFrom', $thread->category)
+                        <x-forum::group-button
+                            intent="secondary"
+                            size="small"
+                            icon="arrow-right-mini"
+                            :label="trans('forum::general.move')"
+                            @click.prevent="confirmThreadAction('move', '')" />
+                    @endcan
+                @endif
+            </div>
+        </div>
+        @if (!$thread->trashed())
+            @can ('reply', $thread)
+                <div class="inline-flex gap-x-2 mt-4 lg:mt-0">
+                    <x-forum::link-button
+                        intent="secondary"
+                        href="#quick-reply"
+                        :label="trans('forum::general.quick_reply')" />
+
+                    <x-forum::link-button
+                        intent="primary"
+                        :href="Forum::route('thread.reply', $thread)"
+                        :label="trans('forum::general.reply')" />
+                </div>
+            @endcan
+        @endif
+    </div>
+
+    <div>
+        @foreach ($posts as $post)
+            <livewire:forum::components.post.card
+                :$post
+                :key="$post->id . $updateKey"
+                :selectable="in_array($post->id, $selectablePostIds)" />
+        @endforeach
+    </div>
+
+    {{ $posts->links('forum::components.pagination') }}
+
+    @if (!$thread->trashed() && Gate::allows('reply', $thread))
+        <div id="quick-reply" class="mt-4">
+            <h2>{{ trans('forum::general.quick_reply') }}</h2>
+
+            <div class="bg-white rounded-md shadow-md p-6 mt-4 dark:bg-slate-700">
+                <x-forum::form.input-textarea wire:model="threadReplyForm.content" />
+
+                <div class="text-right mt-6">
+                    <x-forum::button :label="trans('forum::general.reply')" @click="reply" />
+                </div>
+            </div>
+        </div>
+    @endif
+
+    <div x-show="selectedPosts.length > 0" class="fixed bottom-0 right-0 z-40 left-0 sm:left-auto sm:min-w-96 bg-white shadow-md rounded-md m-4 p-6 z-30 dark:bg-slate-700">
+        <h3>{{ trans('forum::general.with_selection') }}</h3>
+
+        <x-forum::form.input-select
+            id="bulk-action"
+            x-model="postsAction">
+                <option value="none" disabled>{{ trans_choice('forum::general.actions', 1) }}...</option>
+            @can ('deletePosts', $thread)
+                <option value="delete">{{ trans('forum::general.delete') }}</option>
+            @endcan
+            @can ('restorePosts', $thread)
+                <option value="restore">{{ trans('forum::general.restore') }}</option>
+            @endcan
+        </x-forum::form.input-select>
+
+        @if (config('forum.general.soft_deletes'))
+            <x-forum::form.input-checkbox
+                id="permadelete"
+                value=""
+                :label="trans('forum::general.perma_delete')"
+                x-show="postsAction == 'delete'"
+                x-model="permadeletePosts" />
+        @endif
+
+        <div class="mt-4">
+            <x-forum::button
+                :label="trans('forum::general.proceed')"
+                @click="confirmPostsAction"
+                x-bind:disabled="postsAction == 'none'" />
+        </div>
+    </div>
+
+    <x-forum::modal x-show="showThreadActionConfirmationModal" :heading="trans('forum::general.confirm_action')" onClose="showThreadActionConfirmationModal = false">
+        <span x-text="threadActionConfirmationText"></span>
+
+        <div x-show="threadAction == 'rename'">
+            <x-forum::form.input-text
+                id="title"
+                :label="trans('forum::general.title')"
+                wire:model="threadEditForm.title" />
+        </div>
+
+        <div x-show="threadAction == 'move'">
+            <x-forum::form.input-select
+                id="destination-category"
+                :label="trans('forum::general.move_to')"
+                wire:model="destinationCategoryId">
+                <option value="0" disabled>...</option>
+                @include ('forum::components.category.options', ['categories' => $threadDestinationCategories, 'disable' => $thread->category->id])
+            </x-forum::form.input-select>
+        </div>
+
+        <div class="flex flex-wrap mt-6">
+            <div class="grow">
+                <x-forum::link-button
+                    intent="secondary"
+                    :label="trans('forum::general.cancel')"
+                    @click.prevent="showThreadActionConfirmationModal = false" />
+            </div>
+            <div>
+                <x-forum::button
+                    type="submit"
+                    :label="trans('forum::general.proceed')"
+                    @click="applyThreadAction" />
+            </div>
+        </div>
+    </x-forum::modal>
+
+    <x-forum::modal x-show="showPostsActionConfirmationModal" :heading="trans('forum::general.confirm_action')" onClose="showPostsActionConfirmationModal = false">
+        {{ trans('forum::general.generic_confirm') }}
+
+        <div class="flex flex-wrap mt-6">
+            <div class="grow">
+                <x-forum::link-button
+                    intent="secondary"
+                    :label="trans('forum::general.cancel')"
+                    @click.prevent="showPostsActionConfirmationModal = false" />
+            </div>
+            <div>
+                <x-forum::button
+                    type="submit"
+                    :label="trans('forum::general.proceed')"
+                    @click="applyPostsAction" />
+            </div>
+        </div>
+    </x-forum::modal>
+</div>
+
+@script
+<script>
+Alpine.data('thread', () => {
+    return {
+        toggledAllPosts: false,
+        selectedPosts: [],
+        postsAction: 'none',
+        permadeletePosts: false,
+        showPostsActionConfirmationModal: false,
+        threadAction: null,
+        showThreadActionConfirmationModal: false,
+        threadActionConfirmationText: '',
+        reset() {
+            this.toggledAllPosts = false;
+            this.selectedPosts = [];
+            this.showThreadActionConfirmationModal = false;
+            this.showPostsActionConfirmationModal = false;
+        },
+        onPostChanged(event) {
+            if (event.detail.isSelected) {
+                this.selectedPosts.push(event.detail.id);
+            } else {
+                this.selectedPosts.splice(this.selectedPosts.indexOf(event.detail.id), 1);
+            }
+        },
+        onPageChanged() {
+            this.reset();
+        },
+        confirmThreadAction(action, text) {
+            this.threadAction = action;
+            this.threadActionConfirmationText = text;
+            this.showThreadActionConfirmationModal = true;
+        },
+        async applyThreadAction() {
+            let result;
+            switch (this.threadAction) {
+                case 'delete':
+                    result = await $wire.delete(false);
+                    break;
+                case 'permadelete':
+                    result = await $wire.delete(true);
+                    break;
+                case 'restore':
+                    result = await $wire.restore();
+                    break;
+                case 'lock':
+                    result = await $wire.lock();
+                    break;
+                case 'unlock':
+                    result = await $wire.unlock();
+                    break;
+                case 'pin':
+                    result = await $wire.pin();
+                    break;
+                case 'unpin':
+                    result = await $wire.unpin();
+                    break;
+                case 'rename':
+                    result = await $wire.rename();
+                    break;
+                case 'move':
+                    result = await $wire.move();
+                    break;
+            }
+
+            if (result === null) return;
+            if (result.type == 'success') this.showThreadActionConfirmationModal = false;
+            $dispatch('alert', result);
+        },
+        confirmPostsAction() {
+            this.showPostsActionConfirmationModal = true;
+        },
+        async applyPostsAction() {
+            if (this.postsAction == null || this.selectedPosts.length == 0) {
+                return;
+            }
+
+            let result;
+            switch (this.postsAction) {
+                case 'delete':
+                    result = await $wire.deletePosts(this.selectedPosts, this.permadeletePosts);
+                    break;
+                case 'restore':
+                    result = await $wire.restorePosts(this.selectedPosts);
+                    break;
+            }
+
+            if (result.type == 'success') this.reset();
+            $dispatch('alert', result);
+        },
+        async reply() {
+            const result = await $wire.reply();
+            if (result === null) return;
+            if (result.type == 'success') this.reset();
+            $dispatch('alert', result);
+        },
+        toggleAllPosts() {
+            this.toggledAllPosts = !this.toggledAllPosts;
+            if (!this.toggledAllPosts) this.selectedPosts = [];
+            const checkboxes = document.querySelectorAll('[data-post] input[type=checkbox]');
+            checkboxes.forEach(checkbox => {
+                checkbox.checked = this.toggledAllPosts;
+                checkbox.dispatchEvent(new Event('change'));
+            });
+        }
+    }
+});
+</script>
+@endscript
diff --git a/resources/forum/livewire-tailwind/views/pages/thread/unread.blade.php b/resources/forum/livewire-tailwind/views/pages/thread/unread.blade.php
new file mode 100644
index 000000000..e80bc32a7
--- /dev/null
+++ b/resources/forum/livewire-tailwind/views/pages/thread/unread.blade.php
@@ -0,0 +1,66 @@
+<div x-data="unread">
+    @include ('forum::components.loading-overlay')
+    @include ('forum::components.breadcrumbs')
+
+    <h1 class="mb-0">{{ trans('forum::threads.unread_updated') }}</h1>
+
+    <div class="my-4">
+        @foreach ($threads as $thread)
+            <livewire:forum::components.thread.card
+                :$thread
+                :key="$thread->id . $updateKey"
+                :selectable="false"
+                :show-category="true" />
+        @endforeach
+
+        @if ($threads->count() == 0)
+            <div class="p-6 border border-slate-300 dark:border-slate-700 rounded-md text-center text-slate-500 text-lg font-medium">
+                {{ trans('forum::threads.none_found') }}
+            </div>
+        @else
+            <div class="text-center mt-6">
+                <x-forum::button
+                    :label="trans('forum::general.mark_read')"
+                    icon="book-open-outline"
+                    @click="showMarkAsReadModal = true" />
+            </div>
+        @endif
+    </div>
+
+    <x-forum::modal
+        :heading="trans('forum::general.mark_read')"
+        x-show="showMarkAsReadModal"
+        onClose="showMarkAsReadModal = false">
+        {{ trans('forum::general.generic_confirm') }}
+
+        <div class="flex flex-wrap mt-6">
+            <div class="grow">
+                <x-forum::button
+                    intent="secondary"
+                    :label="trans('forum::general.cancel')"
+                    @click="showMarkAsReadModal = false" />
+            </div>
+            <div>
+                <x-forum::button
+                    intent="primary"
+                    :label="trans('forum::general.proceed')"
+                    @click="markAsRead" />
+            </div>
+        </div>
+    </x-forum::modal>
+</div>
+
+@script
+<script>
+Alpine.data('unread', () => {
+    return {
+        showMarkAsReadModal: false,
+        async markAsRead() {
+            const alert = await $wire.markAsRead();
+            this.showMarkAsReadModal = false;
+            $dispatch('alert', alert);
+        }
+    }
+});
+</script>
+@endscript
diff --git a/resources/js/app.js b/resources/js/app.js
new file mode 100644
index 000000000..e59d6a0ad
--- /dev/null
+++ b/resources/js/app.js
@@ -0,0 +1 @@
+import './bootstrap';
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
new file mode 100644
index 000000000..5f1390b01
--- /dev/null
+++ b/resources/js/bootstrap.js
@@ -0,0 +1,4 @@
+import axios from 'axios';
+window.axios = axios;
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';