diff --git a/src/client/public/css/main.css b/src/client/public/css/main.css
deleted file mode 100644
index 214dc50..0000000
--- a/src/client/public/css/main.css
+++ /dev/null
@@ -1,178 +0,0 @@
-@import "tailwindcss";
-@import "preline/variants.css";
-
-@config "../../../../tailwind.config.js";
-
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-    *,
-    ::after,
-    ::before,
-    ::backdrop,
-    ::file-selector-button {
-        border-color: var(--color-gray-200, currentColor);
-    }
-}
-
-@font-face {
-    font-family: "Inter";
-    font-style: normal;
-    font-weight: 200, 700;
-    font-display: swap;
-    src: url("/public/fonts/inter-variablefont.ttf");
-}
-
-/* Datatables */
-
-.dt-layout-row:has(.dt-search),
-.dt-layout-row:has(.dt-length),
-.dt-layout-row:has(.dt-paging) {
-    display: none !important;
-}
-
-.cj-table {
-    @apply min-w-full divide-y divide-gray-200 dark:divide-neutral-700;
-}
-
-.cj-thead {
-    @apply border-none bg-gray-50 dark:bg-neutral-800;
-}
-
-.cj-table-header {
-    @apply px-6 py-3 text-start;
-}
-
-.cj-table-header-content {
-    @apply flex justify-between items-center gap-x-2;
-}
-
-.cj-table-header-content > span {
-    @apply text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200 text-nowrap;
-}
-
-.cj-table-header-content > svg {
-    @apply size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500;
-}
-
-.cj-table-header-content > svg > path:nth-child(1) {
-    @apply hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500;
-}
-
-.cj-table-header-content > svg > path:nth-child(2) {
-    @apply hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500;
-}
-
-.cj-table-footer {
-    @apply px-6 py-4 gap-3 flex justify-between items-center;
-}
-
-.cj-table-paging-btn {
-    @apply py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium
-        rounded-lg border border-gray-200 bg-white text-gray-800
-        shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50
-        disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800
-        dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700
-        dark:focus:bg-neutral-700;
-}
-
-.cj-table-checkbox {
-    @apply form-checkbox shrink-0 disabled:opacity-50 rounded-sm 
-        text-blue-600 focus:ring-blue-500 border-gray-300
-        dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500
-        dark:checked:border-blue-500 dark:focus:ring-offset-gray-800;
-}
-
-.cj-table-link {
-    @apply block px-6 py-4 text-blue-500 hover:text-blue-600 focus:text-blue-600
-        dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500
-        text-nowrap cursor-pointer
-}
-
-.cj-table-text {
-    @apply text-sm text-gray-500 dark:text-neutral-500 text-nowrap;
-}
-
-/* Select Box */
-
-.cj-select-toggle {
-    @apply form-select hs-select-disabled:pointer-events-none
-        hs-select-disabled:opacity-50 relative py-2 px-3 pe-9 flex text-nowrap w-full
-        cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm
-        text-gray-800 shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50
-        before:absolute before:inset-0 before:z-1 dark:bg-neutral-900 dark:border-neutral-700
-        dark:text-neutral-200 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800;
-}
-
-.cj-select-dropdown {
-    @apply mt-2 z-50 w-20 max-h-72 p-1 space-y-0.5 bg-white border border-gray-200
-        rounded-lg shadow-md overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2
-        [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100
-        [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700
-        dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900
-        dark:border-neutral-700;
-}
-
-.cj-select-option {
-    @apply py-2 px-3 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100
-        rounded-lg focus:outline-hidden focus:bg-gray-100 dark:bg-neutral-900
-        dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800;
-}
-
-/* Layout Sidebar */
-
-.sidebar-btn {
-    @apply
-        w-full
-        flex
-        items-center
-        gap-x-3.5
-        py-2
-        px-2.5
-        text-sm
-        rounded-lg
-        focus:outline-hidden
-        text-gray-800
-        hover:bg-gray-100
-        focus:bg-gray-100
-        dark:bg-neutral-800
-        dark:hover:bg-neutral-700
-        dark:focus:bg-neutral-700
-        dark:text-neutral-200;
-}
-
-/* Form Controls */
-
-.text-input-label {
-    @apply block text-sm font-medium mb-2 dark:text-white
-}
-
-.text-input {
-    @apply
-        py-3
-        px-4
-        block
-        w-full
-        rounded-lg
-        text-sm
-        disabled:opacity-50
-        disabled:pointer-events-none
-        border-gray-200
-        focus:border-blue-500
-        focus:ring-blue-500
-        dark:bg-neutral-900
-        dark:border-neutral-700
-        dark:text-neutral-400
-        dark:placeholder-neutral-500
-        dark:focus:ring-neutral-600        
-}
-
-.text-input-help {
-    @apply mt-2 text-sm text-gray-500 dark:text-neutral-500
-}
\ No newline at end of file
diff --git a/src/client/src/css/main.css b/src/client/src/css/main.css
index bc98c0c..11e6da0 100644
--- a/src/client/src/css/main.css
+++ b/src/client/src/css/main.css
@@ -1,4 +1,178 @@
 @import "tailwindcss";
-@import "preline/variants.css";
+@import "./preline";
 
-@config "../../../../tailwind.config.js";
\ No newline at end of file
+@config "../../../../tailwind.config.js";
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--color-gray-200, currentColor);
+    }
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 200, 700;
+    font-display: swap;
+    src: url("/public/fonts/inter-variablefont.ttf");
+}
+
+/* Datatables */
+
+.dt-layout-row:has(.dt-search),
+.dt-layout-row:has(.dt-length),
+.dt-layout-row:has(.dt-paging) {
+    display: none !important;
+}
+
+.cj-table {
+    @apply min-w-full divide-y divide-gray-200 dark:divide-neutral-700;
+}
+
+.cj-thead {
+    @apply border-none bg-gray-50 dark:bg-neutral-800;
+}
+
+.cj-table-header {
+    @apply px-6 py-3 text-start;
+}
+
+.cj-table-header-content {
+    @apply flex justify-between items-center gap-x-2;
+}
+
+.cj-table-header-content > span {
+    @apply text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200 text-nowrap;
+}
+
+.cj-table-header-content > svg {
+    @apply size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500;
+}
+
+.cj-table-header-content > svg > path:nth-child(1) {
+    @apply hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500;
+}
+
+.cj-table-header-content > svg > path:nth-child(2) {
+    @apply hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500;
+}
+
+.cj-table-footer {
+    @apply px-6 py-4 gap-3 flex justify-between items-center;
+}
+
+.cj-table-paging-btn {
+    @apply py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium
+        rounded-lg border border-gray-200 bg-white text-gray-800
+        shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50
+        disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800
+        dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700
+        dark:focus:bg-neutral-700;
+}
+
+.cj-table-checkbox {
+    @apply form-checkbox shrink-0 disabled:opacity-50 rounded-sm 
+        text-blue-600 focus:ring-blue-500 border-gray-300
+        dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500
+        dark:checked:border-blue-500 dark:focus:ring-offset-gray-800;
+}
+
+.cj-table-link {
+    @apply block px-6 py-4 text-blue-500 hover:text-blue-600 focus:text-blue-600
+        dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500
+        text-nowrap cursor-pointer
+}
+
+.cj-table-text {
+    @apply text-sm text-gray-500 dark:text-neutral-500 text-nowrap;
+}
+
+/* Select Box */
+
+.cj-select-toggle {
+    @apply form-select hs-select-disabled:pointer-events-none
+        hs-select-disabled:opacity-50 relative py-2 px-3 pe-9 flex text-nowrap w-full
+        cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm
+        text-gray-800 shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50
+        before:absolute before:inset-0 before:z-1 dark:bg-neutral-900 dark:border-neutral-700
+        dark:text-neutral-200 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800;
+}
+
+.cj-select-dropdown {
+    @apply mt-2 z-50 w-20 max-h-72 p-1 space-y-0.5 bg-white border border-gray-200
+        rounded-lg shadow-md overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2
+        [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100
+        [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700
+        dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900
+        dark:border-neutral-700;
+}
+
+.cj-select-option {
+    @apply py-2 px-3 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100
+        rounded-lg focus:outline-hidden focus:bg-gray-100 dark:bg-neutral-900
+        dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800;
+}
+
+/* Layout Sidebar */
+
+.sidebar-btn {
+    @apply
+        w-full
+        flex
+        items-center
+        gap-x-3.5
+        py-2
+        px-2.5
+        text-sm
+        rounded-lg
+        focus:outline-hidden
+        text-gray-800
+        hover:bg-gray-100
+        focus:bg-gray-100
+        dark:bg-neutral-800
+        dark:hover:bg-neutral-700
+        dark:focus:bg-neutral-700
+        dark:text-neutral-200;
+}
+
+/* Form Controls */
+
+.text-input-label {
+    @apply block text-sm font-medium mb-2 dark:text-white
+}
+
+.text-input {
+    @apply
+        py-3
+        px-4
+        block
+        w-full
+        rounded-lg
+        text-sm
+        disabled:opacity-50
+        disabled:pointer-events-none
+        border-gray-200
+        focus:border-blue-500
+        focus:ring-blue-500
+        dark:bg-neutral-900
+        dark:border-neutral-700
+        dark:text-neutral-400
+        dark:placeholder-neutral-500
+        dark:focus:ring-neutral-600        
+}
+
+.text-input-help {
+    @apply mt-2 text-sm text-gray-500 dark:text-neutral-500
+}
\ No newline at end of file
diff --git a/src/client/src/css/preline.css b/src/client/src/css/preline.css
new file mode 100644
index 0000000..6a0f6dc
--- /dev/null
+++ b/src/client/src/css/preline.css
@@ -0,0 +1,76 @@
+/* Custom written preline variants file */
+/* The actual file in preline/variants has '@import' statements out of order, which fail with postcss. */
+
+/* Preline */
+@import 'preline/src/plugins/dropdown/variants.css';
+@import 'preline/src/plugins/remove-element/variants.css';
+@import 'preline/src/plugins/tooltip/variants.css';
+@import 'preline/src/plugins/accordion/variants.css';
+@import 'preline/src/plugins/tree-view/variants.css';
+@import 'preline/src/plugins/collapse/variants.css';
+@import 'preline/src/plugins/tabs/variants.css';
+@import 'preline/src/plugins/overlay/variants.css';
+@import 'preline/src/plugins/scrollspy/variants.css';
+@import 'preline/src/plugins/carousel/variants.css';
+@import 'preline/src/plugins/select/variants.css';
+@import 'preline/src/plugins/input-number/variants.css';
+@import 'preline/src/plugins/pin-input/variants.css';
+@import 'preline/src/plugins/strong-password/variants.css';
+@import 'preline/src/plugins/stepper/variants.css';
+@import 'preline/src/plugins/combobox/variants.css';
+@import 'preline/src/plugins/layout-splitter/variants.css';
+@import 'preline/src/plugins/scroll-nav/variants.css';
+@import 'preline/src/plugins/datatable/variants.css';
+@import 'preline/src/plugins/range-slider/variants.css';
+@import 'preline/src/plugins/file-upload/variants.css';
+@import 'preline/src/plugins/datepicker/variants.css';
+@import 'preline/src/plugins/theme-switch/variants.css';
+
+/* States */
+@custom-variant hs-success {
+
+    &.success {
+        @slot;
+    }
+  
+    .success & {
+        @slot;
+    }
+  }
+  
+@custom-variant hs-error {
+  
+    &.error {
+         @slot;
+    }
+  
+    .error & {
+        @slot;
+    }
+  }
+  
+  /* Apexcharts */
+@custom-variant hs-apexcharts-tooltip-dark {
+    &.dark {
+        @slot;
+    }
+  }
+  
+  /* Sortable.js */
+@custom-variant hs-dragged {
+    &.dragged {
+        @slot;
+    }
+  }
+  
+  /* Toastify */
+@custom-variant hs-toastify-on {
+  
+    &.toastify.on {
+        @slot;
+    }
+  
+    .toastify.on & {
+        @slot;
+    }
+  }
\ No newline at end of file
diff --git a/src/client/views/layout/base.ejs b/src/client/views/layout/base.ejs
index d3c3d7c..d7e93bd 100644
--- a/src/client/views/layout/base.ejs
+++ b/src/client/views/layout/base.ejs
@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title><%= title %></title>
-        <link rel="stylesheet" href="/public/generated/css/tailwind.css">
+        <link rel="stylesheet" href="/public/generated/css/main.css">
     </head>
     <body class="bg-neutral-100 dark:bg-neutral-900 text-gray-600 dark:text-gray-400 min-h-screen font-[Inter]">
         <%- include("sidebar") -%>