diff --git a/js/AvatarPreview.js b/js/AvatarPreview.js
index 4882843..02d5dd0 100644
--- a/js/AvatarPreview.js
+++ b/js/AvatarPreview.js
@@ -71,12 +71,12 @@ async function prepareImageFromUrlRedirect(stage) {
   dragndrop.addEventListener("dragenter", (evt) => {
     evt.preventDefault();
     dragndrop.className =
-      "w-full border-2 border-purple-500 text-purple-500 border-dashed rounded-lg flex justify-center items-center";
+      "h-96 w-full border-2 border-purple-500 text-purple-500 border-dashed rounded-lg flex justify-center items-center";
   });
   dragndrop.addEventListener("dragleave", (evt) => {
     evt.preventDefault();
     dragndrop.className =
-      "w-full border-2 border-black border-dashed items-center rounded-lg flex justify-center";
+      "h-96 w-full border-2 border-black border-dashed items-center rounded-lg flex justify-center";
   });
   dragndrop.addEventListener("dragover", (evt) => {
     evt.preventDefault();
@@ -84,7 +84,7 @@ async function prepareImageFromUrlRedirect(stage) {
   dragndrop.addEventListener("drop", async (evt) => {
     evt.preventDefault();
     dragndrop.className =
-      "w-full border-2 border-black border-dashed items-center rounded-lg flex justify-center";
+      "h-96 w-full border-2 border-black border-dashed items-center rounded-lg flex justify-center";
     if (evt.dataTransfer.files.length > 1) return;
     if (
       evt.dataTransfer.files[0].type != "image/jpeg" &&
@@ -191,9 +191,7 @@ export function AvatarPreview() {
                 button(
                   {
                     class: () =>
-                      `${
-                        previewImg.val != "" && "w-full"
-                      } h-full btn flex flex-row normal-case px-4 rounded-md left-0 top-0 z-[200] pointer-events-auto`,
+                      `w-full h-full btn flex flex-row normal-case px-4 rounded-md left-0 top-0 z-[200] pointer-events-auto`,
                     onclick: async () => {
                       // previewImg.val = await uploadImage();
                       // stage.val = 1;
@@ -230,33 +228,22 @@ export function AvatarPreview() {
                           class: "loading loading-spinner loading-md",
                         })
                       : ""
-                ),
-                previewImg.val == ""
-                  ? div(
-                      { class: () => "divider divider-horizontal !gap-0" },
-                      "OR"
-                    )
-                  : "",
-                previewImg.val == ""
+                )
+              ),
+                () => previewImg.val == ""
                   ? div(
                       {
                         id: "dnd",
                         class: () =>
-                          "w-full border-2 border-black border-dashed items-center rounded-lg flex justify-center",
+                          "h-96 w-full border-2 border-black border-dashed items-center rounded-lg flex justify-center",
                       },
-                      "Drag and drop the image here"
+                      "or drag and drop the image here"
                     )
-                  : ""
-              ),
-              () =>
-                previewImg.val != ""
-                  ? img({
-                      class: () =>
-                        "z-[10] object-contain w-full h-[394px] border",
-                      src: previewImg,
-                    })
-                  : "",
-
+                  : img({
+                    class: () =>
+                      "z-[10] object-contain w-full h-[394px] border",
+                    src: previewImg,
+                  }),
               button(
                 {
                   class: () =>
diff --git a/js/tw-styles.css b/js/tw-styles.css
index 6e03c7a..e310a77 100644
--- a/js/tw-styles.css
+++ b/js/tw-styles.css
@@ -730,6 +730,12 @@ html{
   .tab:hover{
     --tw-text-opacity: 1;
   }
+
+  .tabs-boxed .tab-active:not(.tab-disabled):not([disabled]):hover,
+  .tabs-boxed :is(input:checked):hover{
+    --tw-text-opacity: 1;
+    color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+  }
 }
 
 .btn{
@@ -1533,12 +1539,6 @@ input.tab:checked + .tab-content,
   }
 }
 
-.card.bordered{
-  border-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
-}
-
 @keyframes checkmark{
   0%{
     background-position-y: 5px;
@@ -2140,10 +2140,25 @@ details.collapse summary::-webkit-details-marker{
   background-position: top right;
 }
 
+.tabs-boxed{
+  border-radius: var(--rounded-btn, 0.5rem);
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
+  padding: 0.25rem;
+}
+
 .tabs-boxed .tab{
   border-radius: var(--rounded-btn, 0.5rem);
 }
 
+.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]),
+  .tabs-boxed :is(input:checked){
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+}
+
 .table tr.active,
   .table tr.active:nth-child(even),
   .table-zebra tbody tr:nth-child(even){
@@ -2645,6 +2660,10 @@ details.collapse summary::-webkit-details-marker{
   height: 100%;
 }
 
+.h-\[400px\]{
+  height: 400px;
+}
+
 .h-24{
   height: 6rem;
 }
@@ -2653,6 +2672,10 @@ details.collapse summary::-webkit-details-marker{
   height: 9rem;
 }
 
+.h-96{
+  height: 24rem;
+}
+
 .min-h-\[600px\]{
   min-height: 600px;
 }
@@ -2661,28 +2684,24 @@ details.collapse summary::-webkit-details-marker{
   min-height: 400px;
 }
 
-.min-h-\[200px\]{
-  min-height: 200px;
+.w-24{
+  width: 6rem;
 }
 
 .w-3{
   width: 0.75rem;
 }
 
-.w-32{
-  width: 8rem;
-}
-
 .w-56{
   width: 14rem;
 }
 
-.w-\[24rem\]{
+.w-96{
   width: 24rem;
 }
 
-.w-\[32rem\]{
-  width: 32rem;
+.w-\[24rem\]{
+  width: 24rem;
 }
 
 .w-\[550px\]{
@@ -2698,6 +2717,18 @@ details.collapse summary::-webkit-details-marker{
   width: 100%;
 }
 
+.w-\[32rem\]{
+  width: 32rem;
+}
+
+.w-32{
+  width: 8rem;
+}
+
+.w-\[400px\]{
+  width: 400px;
+}
+
 .min-w-\[300px\]{
   min-width: 300px;
 }
@@ -2824,9 +2855,9 @@ details.collapse summary::-webkit-details-marker{
   border-bottom-right-radius: 0px;
 }
 
-.rounded-t-md{
-  border-top-left-radius: 0.375rem;
-  border-top-right-radius: 0.375rem;
+.rounded-b-md{
+  border-bottom-right-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
 }
 
 .rounded-b-none{
@@ -2834,14 +2865,9 @@ details.collapse summary::-webkit-details-marker{
   border-bottom-left-radius: 0px;
 }
 
-.rounded-t-none{
-  border-top-left-radius: 0px;
-  border-top-right-radius: 0px;
-}
-
-.rounded-b-md{
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
+.rounded-t-md{
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
 }
 
 .border{
@@ -2856,18 +2882,10 @@ details.collapse summary::-webkit-details-marker{
   border-top-width: 4px;
 }
 
-.border-r{
-  border-right-width: 1px;
-}
-
 .border-b-0{
   border-bottom-width: 0px;
 }
 
-.border-t-0{
-  border-top-width: 0px;
-}
-
 .border-dashed{
   border-style: dashed;
 }
@@ -2881,16 +2899,6 @@ details.collapse summary::-webkit-details-marker{
   border-color: rgb(249 115 22 / var(--tw-border-opacity));
 }
 
-.border-gray-500{
-  --tw-border-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-border-opacity));
-}
-
-.border-gray-300{
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
-}
-
 .border-black{
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -2901,6 +2909,11 @@ details.collapse summary::-webkit-details-marker{
   border-color: rgb(168 85 247 / var(--tw-border-opacity));
 }
 
+.border-gray-300{
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
 .bg-\[\#f6f6f6\]{
   --tw-bg-opacity: 1;
   background-color: rgb(246 246 246 / var(--tw-bg-opacity));
@@ -2997,6 +3010,10 @@ details.collapse summary::-webkit-details-marker{
   padding: 0px;
 }
 
+.p-10{
+  padding: 2.5rem;
+}
+
 .p-2{
   padding: 0.5rem;
 }
@@ -3034,6 +3051,11 @@ details.collapse summary::-webkit-details-marker{
   padding-bottom: 0.5rem;
 }
 
+.py-4{
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .text-start{
   text-align: start;
 }