diff --git a/rollup.config.js b/rollup.config.js
index dac65839..ed8799f3 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -55,11 +55,9 @@ export default [
       'react-toastify',
       'react-string-replace',
       'react-toastify/dist/ReactToastify.css',
-      'tw-elements',
       'react-router-dom',
       'react-leaflet-cluster',
       '@tanstack/react-query',
-      'tributejs',
       'prop-types',
       'leaflet/dist/leaflet.css',
       '@heroicons/react/20/solid',
diff --git a/src/Components/AppShell/ContextWrapper.tsx b/src/Components/AppShell/ContextWrapper.tsx
index 6cafd1a2..50777b63 100644
--- a/src/Components/AppShell/ContextWrapper.tsx
+++ b/src/Components/AppShell/ContextWrapper.tsx
@@ -22,7 +22,7 @@ const ContextCheckContext = createContext(false)
 
 const CloseButton = ({ closeToast }: CloseButtonProps) => (
   <button
-    className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw:absolute tw:right-2 tw:top-2 tw:focus:outline-hidden'
+    className='tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-2 tw:top-2 tw:focus:outline-hidden'
     onClick={closeToast}
   >
     ✕
diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx
index 5bcc8d12..bc26ff6a 100644
--- a/src/Components/AppShell/NavBar.tsx
+++ b/src/Components/AppShell/NavBar.tsx
@@ -69,9 +69,9 @@ export default function NavBar({ appName }: { appName: string }) {
   if (showNav) {
     return (
       <>
-        <div className='tw-navbar tw:bg-base-100 tw:z-9998 tw:shadow-xl tw:relative'>
+        <div className='tw:navbar tw:bg-base-100 tw:z-9998 tw:shadow-xl tw:relative'>
           <button
-            className='tw-btn tw-btn-square tw-btn-ghost'
+            className='tw:btn tw:btn-square tw:btn-ghost'
             aria-controls='#sidenav'
             aria-haspopup='true'
             onClick={() => toggleSidebar()}
@@ -84,7 +84,7 @@ export default function NavBar({ appName }: { appName: string }) {
               style={{ maxWidth: nameWidth + 60 }}
             >
               <Link
-                className='tw-btn tw-btn-ghost tw:px-2 tw:normal-case tw:text-xl tw:flex-1 tw:truncate'
+                className='tw:btn tw:btn-ghost tw:px-2 tw:normal-case tw:text-xl tw:flex-1 tw:truncate'
                 to={'/'}
               >
                 <h1 ref={nameRef} className='tw:truncate'>
@@ -92,7 +92,7 @@ export default function NavBar({ appName }: { appName: string }) {
                 </h1>
               </Link>
               <button
-                className='tw-btn tw:px-2  tw-btn-ghost'
+                className='tw:btn tw:px-2  tw:btn-ghost'
                 onClick={() => window.my_modal_3.showModal()}
               >
                 <QuestionMarkIcon className='tw:h-5 tw:w-5' />
@@ -107,7 +107,7 @@ export default function NavBar({ appName }: { appName: string }) {
                 className='tw:flex tw:items-center'
               >
                 {userProfile.image && (
-                  <div className='tw-avatar'>
+                  <div className='tw:avatar'>
                     <div className='tw:w-10 tw:rounded-full'>
                       <img src={appState.assetsApi.url + userProfile.image} />
                     </div>
@@ -115,13 +115,13 @@ export default function NavBar({ appName }: { appName: string }) {
                 )}
                 <div className='tw:ml-2 tw:mr-2'>{userProfile.name || user?.first_name}</div>
               </Link>
-              <div className='tw-dropdown tw-dropdown-end'>
-                <label tabIndex={0} className='tw-btn tw-btn-ghost tw-btn-square'>
+              <div className='tw:dropdown tw:dropdown-end'>
+                <label tabIndex={0} className='tw:btn tw:btn-ghost tw:btn-square'>
                   <EllipsisVerticalIcon className='tw:h-5 tw:w-5' />
                 </label>
                 <ul
                   tabIndex={0}
-                  className='tw-menu tw-menu-compact tw-dropdown-content tw:mt-3 tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:w-52 tw:z-10000!'
+                  className='tw:menu tw:menu-compact tw:dropdown-content tw:mt-3 tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:w-52 tw:z-10000!'
                 >
                   <li>
                     <Link to={`${userProfile.id && '/edit-item/' + userProfile.id}`}>Profile</Link>
@@ -145,20 +145,20 @@ export default function NavBar({ appName }: { appName: string }) {
             <div>
               <div className='tw:hidden tw:md:flex'>
                 <Link to={'/login'}>
-                  <div className='tw-btn tw-btn-ghost tw:mr-2'>Login</div>
+                  <div className='tw:btn tw:btn-ghost tw:mr-2'>Login</div>
                 </Link>
 
                 <Link to={'/signup'}>
-                  <div className='tw-btn tw-btn-ghost tw:mr-2'>Sign Up</div>
+                  <div className='tw:btn tw:btn-ghost tw:mr-2'>Sign Up</div>
                 </Link>
               </div>
-              <div className='tw-dropdown tw-dropdown-end'>
-                <label tabIndex={1} className='tw-btn tw-btn-ghost tw:md:hidden'>
+              <div className='tw:dropdown tw:dropdown-end'>
+                <label tabIndex={1} className='tw:btn tw:btn-ghost tw:md:hidden'>
                   <EllipsisVerticalIcon className='tw:h-5 tw:w-5' />
                 </label>
                 <ul
                   tabIndex={1}
-                  className='tw-menu tw-dropdown-content tw:mt-3 tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:w-52 tw:z-10000!'
+                  className='tw:menu tw:dropdown-content tw:mt-3 tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:w-52 tw:z-10000!'
                 >
                   <li>
                     <Link to={'/login'}>Login</Link>
diff --git a/src/Components/AppShell/SideBar.tsx b/src/Components/AppShell/SideBar.tsx
index 6f4e75f6..3bbcbc2e 100644
--- a/src/Components/AppShell/SideBar.tsx
+++ b/src/Components/AppShell/SideBar.tsx
@@ -53,7 +53,7 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
         className={`tw:flex tw:flex-col  ${embedded ? 'tw:h-full' : 'tw:h-[calc(100dvh-64px)]'}`}
       >
         <ul
-          className='tw-menu tw:w-full tw:bg-base-100 tw:text-base-content tw:p-0'
+          className='tw:menu tw:w-full tw:bg-base-100 tw:text-base-content tw:p-0'
           data-te-sidenav-menu-ref
         >
           {routes.map((route, k) => {
@@ -102,7 +102,7 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
         >
           <div className='tw:w-full'>
             <ul
-              className='tw-menu tw:w-full tw:bg-base-100 tw:text-base-content tw:p-0 tw:mb-0'
+              className='tw:menu tw:w-full tw:bg-base-100 tw:text-base-content tw:p-0 tw:mb-0'
               data-te-sidenav-menu-ref
             >
               {bottomRoutes?.map((route, k) => {
diff --git a/src/Components/Auth/LoginPage.tsx b/src/Components/Auth/LoginPage.tsx
index a5d6e2a4..b3a835a1 100644
--- a/src/Components/Auth/LoginPage.tsx
+++ b/src/Components/Auth/LoginPage.tsx
@@ -60,13 +60,13 @@ export function LoginPage() {
         placeholder='E-Mail'
         value={email}
         onChange={(e) => setEmail(e.target.value)}
-        className='tw-input tw-input-bordered tw:w-full tw:max-w-xs'
+        className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
       />
       <input
         type='password'
         placeholder='Password'
         onChange={(e) => setPassword(e.target.value)}
-        className='tw-input tw-input-bordered tw:w-full tw:max-w-xs'
+        className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
       />
       <div className='tw:text-right tw:text-primary'>
         <Link to='/reset-password'>
@@ -75,17 +75,17 @@ export function LoginPage() {
           </span>
         </Link>
       </div>
-      <div className='tw-card-actions'>
+      <div className='tw:card-actions'>
         <button
           className={
             loading
-              ? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
-              : 'tw-btn tw-btn-primary tw-btn-block'
+              ? 'tw:btn tw:btn-disabled tw:btn-block tw:btn-primary'
+              : 'tw:btn tw:btn-primary tw:btn-block'
           }
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onClick={() => onLogin()}
         >
-          {loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Login'}
+          {loading ? <span className='tw:loading tw:loading-spinner'></span> : 'Login'}
         </button>
       </div>
     </MapOverlayPage>
diff --git a/src/Components/Auth/RequestPasswordPage.tsx b/src/Components/Auth/RequestPasswordPage.tsx
index b750249c..0f15acd5 100644
--- a/src/Components/Auth/RequestPasswordPage.tsx
+++ b/src/Components/Auth/RequestPasswordPage.tsx
@@ -43,19 +43,19 @@ export function RequestPasswordPage({ resetUrl }: { resetUrl: string }) {
         placeholder='E-Mail'
         value={email}
         onChange={(e) => setEmail(e.target.value)}
-        className='tw-input tw-input-bordered tw:w-full tw:max-w-xs'
+        className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
       />
-      <div className='tw-card-actions tw:mt-4'>
+      <div className='tw:card-actions tw:mt-4'>
         <button
           className={
             loading
-              ? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
-              : 'tw-btn tw-btn-primary tw-btn-block'
+              ? 'tw:btn tw:btn-disabled tw:btn-block tw:btn-primary'
+              : 'tw:btn tw:btn-primary tw:btn-block'
           }
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onClick={() => onReset()}
         >
-          {loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Send'}
+          {loading ? <span className='tw:loading tw:loading-spinner'></span> : 'Send'}
         </button>
       </div>
     </MapOverlayPage>
diff --git a/src/Components/Auth/SetNewPasswordPage.tsx b/src/Components/Auth/SetNewPasswordPage.tsx
index 0004e6c2..c8f59591 100644
--- a/src/Components/Auth/SetNewPasswordPage.tsx
+++ b/src/Components/Auth/SetNewPasswordPage.tsx
@@ -42,19 +42,19 @@ export function SetNewPasswordPage() {
         type='password'
         placeholder='Password'
         onChange={(e) => setPassword(e.target.value)}
-        className='tw-input tw-input-bordered tw:w-full tw:max-w-xs'
+        className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
       />
-      <div className='tw-card-actions tw:mt-4'>
+      <div className='tw:card-actions tw:mt-4'>
         <button
           className={
             loading
-              ? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
-              : 'tw-btn tw-btn-primary tw-btn-block'
+              ? 'tw:btn tw:btn-disabled tw:btn-block tw:btn-primary'
+              : 'tw:btn tw:btn-primary tw:btn-block'
           }
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onClick={() => onReset()}
         >
-          {loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Set'}
+          {loading ? <span className='tw:loading tw:loading-spinner'></span> : 'Set'}
         </button>
       </div>
     </MapOverlayPage>
diff --git a/src/Components/Auth/SignupPage.tsx b/src/Components/Auth/SignupPage.tsx
index fe9d44cd..1eb51ea9 100644
--- a/src/Components/Auth/SignupPage.tsx
+++ b/src/Components/Auth/SignupPage.tsx
@@ -62,32 +62,32 @@ export function SignupPage() {
         placeholder='Name'
         value={userName}
         onChange={(e) => setUserName(e.target.value)}
-        className='tw-input tw-input-bordered tw:w-full tw:max-w-xs'
+        className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
       />
       <input
         type='email'
         placeholder='E-Mail'
         value={email}
         onChange={(e) => setEmail(e.target.value)}
-        className='tw-input tw-input-bordered tw:w-full tw:max-w-xs'
+        className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
       />
       <input
         type='password'
         placeholder='Password'
         onChange={(e) => setPassword(e.target.value)}
-        className='tw-input tw-input-bordered tw:w-full tw:max-w-xs'
+        className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
       />
-      <div className='tw-card-actions tw:mt-4'>
+      <div className='tw:card-actions tw:mt-4'>
         <button
           className={
             loading
-              ? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
-              : 'tw-btn tw-btn-primary tw-btn-block'
+              ? 'tw:btn tw:btn-disabled tw:btn-block tw:btn-primary'
+              : 'tw:btn tw:btn-primary tw:btn-block'
           }
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onClick={() => onRegister()}
         >
-          {loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Sign Up'}
+          {loading ? <span className='tw:loading tw:loading-spinner'></span> : 'Sign Up'}
         </button>
       </div>
     </MapOverlayPage>
diff --git a/src/Components/Gaming/Modal.tsx b/src/Components/Gaming/Modal.tsx
index ffe0ad17..32f66058 100644
--- a/src/Components/Gaming/Modal.tsx
+++ b/src/Components/Gaming/Modal.tsx
@@ -20,14 +20,14 @@ export function Modal({
   return (
     <>
       {/* You can open the modal using ID.showModal() method */}
-      <dialog id='my_modal_3' className='tw-modal tw:transition-all tw:duration-300'>
-        <form method='dialog' className='tw-modal-box tw:transition-none'>
-          <button className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw:absolute tw:right-2 tw:top-2 tw:focus:outline-hidden'>
+      <dialog id='my_modal_3' className='tw:modal tw:transition-all tw:duration-300'>
+        <form method='dialog' className='tw:modal-box tw:transition-none'>
+          <button className='tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-2 tw:top-2 tw:focus:outline-hidden'>
             ✕
           </button>
           {children}
         </form>
-        <form method='dialog' className='tw-modal-backdrop'>
+        <form method='dialog' className='tw:modal-backdrop'>
           <button>close</button>
         </form>
       </dialog>
diff --git a/src/Components/Gaming/Quests.tsx b/src/Components/Gaming/Quests.tsx
index c9872844..944a2633 100644
--- a/src/Components/Gaming/Quests.tsx
+++ b/src/Components/Gaming/Quests.tsx
@@ -39,56 +39,56 @@ export function Quests() {
   return (
     <>
       {questsOpen ? (
-        <div className='tw-card tw:w-48 tw:bg-base-100 tw:shadow-xl tw:absolute tw:bottom-4 tw:left-4 tw:z-2000'>
-          <div className='tw-card-body tw:p-4 tw:pt-0'>
-            <div className='tw-card-actions tw:justify-end'>
+        <div className='tw:card tw:w-48 tw:bg-base-100 tw:shadow-xl tw:absolute tw:bottom-4 tw:left-4 tw:z-2000'>
+          <div className='tw:card-body tw:p-4 tw:pt-0'>
+            <div className='tw:card-actions tw:justify-end'>
               <label
-                className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw:absolute tw:right-1 tw:top-1'
+                className='tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-1 tw:top-1'
                 onClick={() => setQuestsOpen(false)}
               >
                 ✕
               </label>
             </div>
-            <h2 className='tw-card-title tw:m-auto '>
+            <h2 className='tw:card-title tw:m-auto '>
               Level 1
               <QuestionMarkCircleIcon />
             </h2>
             <ul className='tw:flex-row'>
               <li>
-                <label className='tw-label tw:justify-normal tw:pt-1 tw:pb-0'>
+                <label className='tw:label tw:justify-normal tw:pt-1 tw:pb-0'>
                   <input
                     type='checkbox'
                     readOnly={true}
-                    className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
+                    className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
                     checked={isAuthenticated || false}
                   />
-                  <span className='tw:text-sm tw-label-text tw:mx-2'>Sign Up</span>
+                  <span className='tw:text-sm tw:label-text tw:mx-2'>Sign Up</span>
                 </label>
               </li>
               <li>
-                <label className='tw-label tw:justify-normal tw:pt-1 tw:pb-0'>
+                <label className='tw:label tw:justify-normal tw:pt-1 tw:pb-0'>
                   <input
                     type='checkbox'
                     readOnly={true}
-                    className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
+                    className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
                     checked={!!profile?.text}
                   />
-                  <span className='tw:text-sm tw-label-text tw:mx-2'>Fill Profile</span>
+                  <span className='tw:text-sm tw:label-text tw:mx-2'>Fill Profile</span>
                 </label>
               </li>
               <li>
-                <label className='tw-label tw:justify-normal tw:pt-1 tw:pb-0'>
+                <label className='tw:label tw:justify-normal tw:pt-1 tw:pb-0'>
                   <input
                     type='checkbox'
                     readOnly={true}
-                    className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
+                    className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
                     checked={!!profile?.image}
                   />
-                  <span className='tw:text-sm tw-label-text tw:mx-2'>Upload Avatar</span>
+                  <span className='tw:text-sm tw:label-text tw:mx-2'>Upload Avatar</span>
                 </label>
               </li>
             </ul>
-            {/**                 <button className='tw-btn tw-btn-xs tw-btn-neutral tw:w-fit tw:self-center tw:mt-1'>Next &gt;</button> */}{' '}
+            {/**                 <button className='tw:btn tw:btn-xs tw:btn-neutral tw:w-fit tw:self-center tw:mt-1'>Next &gt;</button> */}{' '}
           </div>
         </div>
       ) : (
diff --git a/src/Components/Input/ComboBoxInput.tsx b/src/Components/Input/ComboBoxInput.tsx
index edeccde8..398e8005 100644
--- a/src/Components/Input/ComboBoxInput.tsx
+++ b/src/Components/Input/ComboBoxInput.tsx
@@ -14,7 +14,7 @@ const ComboBoxInput = ({ id, options, value, onValueChange }: ComboBoxProps) =>
   return (
     <select
       id={id}
-      className='tw-form-select tw:block tw:w-full tw:py-2 tw:px-4 tw:border tw:border-gray-300 rounded-md tw:shadow-sm tw:text-sm tw:focus:outline-hidden tw:focus:ring-indigo-500 tw:focus:border-indigo-500 tw:sm:text-sm'
+      className='tw:form-select tw:block tw:w-full tw:py-2 tw:px-4 tw:border tw:border-gray-300 rounded-md tw:shadow-sm tw:text-sm tw:focus:outline-hidden tw:focus:ring-indigo-500 tw:focus:border-indigo-500 tw:sm:text-sm'
       onChange={handleChange}
       defaultValue={value}
     >
diff --git a/src/Components/Input/TextAreaInput.tsx b/src/Components/Input/TextAreaInput.tsx
index 31a41624..2ab53264 100644
--- a/src/Components/Input/TextAreaInput.tsx
+++ b/src/Components/Input/TextAreaInput.tsx
@@ -42,10 +42,10 @@ export function TextAreaInput({
   }
 
   return (
-    <div className={`tw-form-control tw:w-full ${containerStyle ?? ''}`}>
+    <div className={`tw:form-control tw:w-full ${containerStyle ?? ''}`}>
       {labelTitle ? (
-        <label className='tw-label'>
-          <span className={`tw-label-text tw:text-base-content ${labelStyle ?? ''}`}>
+        <label className='tw:label'>
+          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
             {labelTitle}
           </span>
         </label>
@@ -55,7 +55,7 @@ export function TextAreaInput({
         ref={ref}
         value={inputValue}
         name={dataField}
-        className={`tw-textarea tw-textarea-bordered tw:w-full tw:leading-5 ${inputStyle ?? ''}`}
+        className={`tw:textarea tw:textarea-bordered tw:w-full tw:leading-5 ${inputStyle ?? ''}`}
         placeholder={placeholder ?? ''}
         onChange={handleChange}
       ></textarea>
diff --git a/src/Components/Input/TextInput.cy.tsx b/src/Components/Input/TextInput.cy.tsx
index 1ca7cb7c..d0fc069a 100644
--- a/src/Components/Input/TextInput.cy.tsx
+++ b/src/Components/Input/TextInput.cy.tsx
@@ -9,8 +9,8 @@ describe('<TextInput />', () => {
     cy.get('input').should('have.attr', 'type', 'text')
     cy.get('input').should('have.attr', 'placeholder', '')
     cy.get('input').should('have.attr', 'required')
-    cy.get('input').should('have.class', 'tw-input')
-    cy.get('input').should('have.class', 'tw-input-bordered')
+    cy.get('input').should('have.class', 'input')
+    cy.get('input').should('have.class', 'input-bordered')
     cy.get('input').should('have.class', 'tw:w-full')
   })
 
diff --git a/src/Components/Input/TextInput.tsx b/src/Components/Input/TextInput.tsx
index 3bc86946..0feab982 100644
--- a/src/Components/Input/TextInput.tsx
+++ b/src/Components/Input/TextInput.tsx
@@ -47,10 +47,10 @@ export function TextInput({
   }
 
   return (
-    <div className={`tw-form-control ${containerStyle ?? ''}`}>
+    <div className={`tw:form-control ${containerStyle ?? ''}`}>
       {labelTitle ? (
-        <label className='tw-label'>
-          <span className={`tw-label-text tw:text-base-content ${labelStyle ?? ''}`}>
+        <label className='tw:label'>
+          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
             {labelTitle}
           </span>
         </label>
@@ -64,7 +64,7 @@ export function TextInput({
         placeholder={placeholder ?? ''}
         autoComplete={autocomplete}
         onChange={handleChange}
-        className={`tw-input tw-input-bordered tw:w-full ${inputStyle ?? ''}`}
+        className={`tw:input tw:input-bordered tw:w-full ${inputStyle ?? ''}`}
       />
     </div>
   )
diff --git a/src/Components/Input/__snapshots__/ComboBoxInput.spec.tsx.snap b/src/Components/Input/__snapshots__/ComboBoxInput.spec.tsx.snap
index 18ef547d..9700e490 100644
--- a/src/Components/Input/__snapshots__/ComboBoxInput.spec.tsx.snap
+++ b/src/Components/Input/__snapshots__/ComboBoxInput.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ComboBoxInput /> > renders properly 1`] = `
 <select
-  class="tw-form-select tw-block tw-w-full tw-py-2 tw-px-4 tw-border tw-border-gray-300 rounded-md tw-shadow-sm tw-text-sm focus:tw-outline-none focus:tw-ring-indigo-500 focus:tw-border-indigo-500 sm:tw-text-sm"
+  class="form-select block w-full py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
 >
   <option
     value="Option 1"
diff --git a/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap b/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap
index 48991cae..68847706 100644
--- a/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap
+++ b/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap
@@ -2,19 +2,19 @@
 
 exports[`<TextAreaInput /> > labelTitle > sets label 1`] = `
 <div
-  class="tw-form-control tw-w-full "
+  class="form-control w-full "
 >
   <label
-    class="tw-label"
+    class="label"
   >
     <span
-      class="tw-label-text tw-text-base-content "
+      class="label-text text-base-content "
     >
       My Title
     </span>
   </label>
   <textarea
-    class="tw-textarea tw-textarea-bordered tw-w-full tw-leading-5 "
+    class="textarea textarea-bordered w-full leading-5 "
     placeholder=""
     required=""
   />
@@ -23,10 +23,10 @@ exports[`<TextAreaInput /> > labelTitle > sets label 1`] = `
 
 exports[`<TextAreaInput /> > renders properly 1`] = `
 <div
-  class="tw-form-control tw-w-full "
+  class="form-control w-full "
 >
   <textarea
-    class="tw-textarea tw-textarea-bordered tw-w-full tw-leading-5 "
+    class="textarea textarea-bordered w-full leading-5 "
     placeholder=""
     required=""
   />
diff --git a/src/Components/Input/__snapshots__/TextInput.spec.tsx.snap b/src/Components/Input/__snapshots__/TextInput.spec.tsx.snap
index 1ebdb5e4..2ae257a5 100644
--- a/src/Components/Input/__snapshots__/TextInput.spec.tsx.snap
+++ b/src/Components/Input/__snapshots__/TextInput.spec.tsx.snap
@@ -2,19 +2,19 @@
 
 exports[`<TextInput /> > labelTitle > sets label 1`] = `
 <div
-  class="tw-form-control "
+  class="form-control "
 >
   <label
-    class="tw-label"
+    class="label"
   >
     <span
-      class="tw-label-text tw-text-base-content "
+      class="label-text text-base-content "
     >
       My Title
     </span>
   </label>
   <input
-    class="tw-input tw-input-bordered tw-w-full "
+    class="input input-bordered w-full "
     placeholder=""
     required=""
     type="text"
@@ -25,10 +25,10 @@ exports[`<TextInput /> > labelTitle > sets label 1`] = `
 
 exports[`<TextInput /> > renders properly 1`] = `
 <div
-  class="tw-form-control "
+  class="form-control "
 >
   <input
-    class="tw-input tw-input-bordered tw-w-full "
+    class="input input-bordered w-full "
     placeholder=""
     required=""
     type="text"
diff --git a/src/Components/Map/Subcomponents/AddButton.tsx b/src/Components/Map/Subcomponents/AddButton.tsx
index 485560c6..48afa52c 100644
--- a/src/Components/Map/Subcomponents/AddButton.tsx
+++ b/src/Components/Map/Subcomponents/AddButton.tsx
@@ -31,11 +31,11 @@ export default function AddButton({
   return (
     <>
       {canAddItems() ? (
-        <div className='tw-dropdown tw-dropdown-top tw-dropdown-end tw-dropdown-hover tw:z-500 tw:absolute tw:right-4 tw:bottom-4'>
-          <label tabIndex={0} className='tw:z-500 tw-btn tw-btn-circle tw:shadow tw:bg-base-100'>
+        <div className='tw:dropdown tw:dropdown-top tw:dropdown-end tw:dropdown-hover tw:z-500 tw:absolute tw:right-4 tw:bottom-4'>
+          <label tabIndex={0} className='tw:z-500 tw:btn tw:btn-circle tw:shadow tw:bg-base-100'>
             <SVG src={PlusSVG} className='tw:h-5 tw:w-5' />
           </label>
-          <ul tabIndex={0} className='tw-dropdown-content tw:pr-1 tw:list-none'>
+          <ul tabIndex={0} className='tw:dropdown-content tw:pr-1 tw:list-none'>
             {layers.map(
               (layer) =>
                 layer.api?.createItem &&
@@ -43,10 +43,10 @@ export default function AddButton({
                 layer.listed && (
                   <li key={layer.name}>
                     <a>
-                      <div className='tw-tooltip tw-tooltip-left' data-tip={layer.menuText}>
+                      <div className='tw:tooltip tw:tooltip-left' data-tip={layer.menuText}>
                         <button
                           tabIndex={0}
-                          className='tw:z-500  tw:border-0 tw:pl-2 tw:p-0 tw:mb-3 tw:w-10 tw:h-10 tw:cursor-pointer tw:rounded-full tw-mouse tw:drop-shadow-md tw:transition tw:ease-in tw:duration-200 tw:focus:outline-hidden'
+                          className='tw:z-500  tw:border-0 tw:pl-2 tw:p-0 tw:mb-3 tw:w-10 tw:h-10 tw:cursor-pointer tw:rounded-full tw:mouse tw:drop-shadow-md tw:transition tw:ease-in tw:duration-200 tw:focus:outline-hidden'
                           style={{ backgroundColor: layer.menuColor || '#777' }}
                           onClick={() => {
                             triggerAction(layer)
diff --git a/src/Components/Map/Subcomponents/Controls/FilterControl.tsx b/src/Components/Map/Subcomponents/Controls/FilterControl.tsx
index 4c397471..e5c6c340 100644
--- a/src/Components/Map/Subcomponents/Controls/FilterControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/FilterControl.tsx
@@ -28,11 +28,11 @@ export function FilterControl() {
   const visibleGroupTypes = useVisibleGroupType()
 
   return (
-    <div className='tw-card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
+    <div className='tw:card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
       {open ? (
-        <div className='tw-card-body tw:pr-4 tw:min-w-[8rem] tw:p-2 tw:w-fit tw:transition-all tw:duration-300'>
+        <div className='tw:card-body tw:pr-4 tw:min-w-[8rem] tw:p-2 tw:w-fit tw:transition-all tw:duration-300'>
           <label
-            className='tw-btn tw-btn-sm tw:rounded-2xl tw-btn-circle tw-btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
+            className='tw:btn tw:btn-sm tw:rounded-2xl tw:btn-circle tw:btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
             onClick={() => {
               setOpen(false)
             }}
@@ -44,16 +44,16 @@ export function FilterControl() {
               <li key={groupType.value}>
                 <label
                   htmlFor={groupType.value}
-                  className='tw-label tw:justify-normal tw:pt-1 tw:pb-1'
+                  className='tw:label tw:justify-normal tw:pt-1 tw:pb-1'
                 >
                   <input
                     id={groupType.value}
                     onChange={() => toggleVisibleGroupType(groupType.value)}
                     type='checkbox'
-                    className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
+                    className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
                     checked={isGroupTypeVisible(groupType.value)}
                   />
-                  <span className='tw:text-sm tw-label-text tw:mx-2 tw:cursor-pointer'>
+                  <span className='tw:text-sm tw:label-text tw:mx-2 tw:cursor-pointer'>
                     {groupType.text}
                   </span>
                 </label>
@@ -62,12 +62,12 @@ export function FilterControl() {
           </ul>
         </div>
       ) : (
-        <div className='tw-indicator'>
+        <div className='tw:indicator'>
           {visibleGroupTypes.length < groupTypes.length && (
-            <span className='tw-indicator-item tw-badge tw-badge-success tw:h-4 tw:p-2 tw:translate-x-1/3 tw:-translate-y-1/3 tw:border-0'></span>
+            <span className='tw:indicator-item tw:badge tw:badge-success tw:h-4 tw:p-2 tw:translate-x-1/3 tw:-translate-y-1/3 tw:border-0'></span>
           )}
           <div
-            className='tw-card-body tw:hover:bg-slate-300 tw-card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
+            className='tw:card-body tw:hover:bg-slate-300 tw:card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
             onClick={() => {
               setOpen(true)
             }}
diff --git a/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx b/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx
index 8a6611e2..5e7c9d6e 100644
--- a/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx
@@ -9,10 +9,10 @@ export const GratitudeControl = () => {
 
   if (isAuthenticated) {
     return (
-      <div className='tw-card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
+      <div className='tw:card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
         {
           <div
-            className='tw-card-body tw:hover:bg-slate-300 tw-card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
+            className='tw:card-body tw:hover:bg-slate-300 tw:card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
             onClick={() => {
               navigate('/select-user')
             }}
diff --git a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
index 2c787dbd..ada85f8a 100644
--- a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
@@ -14,11 +14,11 @@ export function LayerControl() {
   const toggleVisibleLayer = useToggleVisibleLayer()
 
   return (
-    <div className='tw-card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
+    <div className='tw:card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
       {open ? (
-        <div className='tw-card-body tw:pr-4 tw:min-w-[8rem] tw:p-2 tw:transition-all tw:w-fit tw:duration-300'>
+        <div className='tw:card-body tw:pr-4 tw:min-w-[8rem] tw:p-2 tw:transition-all tw:w-fit tw:duration-300'>
           <label
-            className='tw-btn tw-btn-sm tw:rounded-2xl tw-btn-circle tw-btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
+            className='tw:btn tw:btn-sm tw:rounded-2xl tw:btn-circle tw:btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
             onClick={() => {
               setOpen(false)
             }}
@@ -32,16 +32,16 @@ export function LayerControl() {
                   <li key={layer.name}>
                     <label
                       htmlFor={layer.name}
-                      className='tw-label tw:justify-normal tw:pt-1 tw:pb-1'
+                      className='tw:label tw:justify-normal tw:pt-1 tw:pb-1'
                     >
                       <input
                         id={layer.name}
                         onChange={() => toggleVisibleLayer(layer)}
                         type='checkbox'
-                        className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
+                        className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
                         checked={isLayerVisible(layer)}
                       />
-                      <span className='tw:text-sm tw-label-text tw:mx-2 tw:cursor-pointer'>
+                      <span className='tw:text-sm tw:label-text tw:mx-2 tw:cursor-pointer'>
                         {layer.name}
                       </span>
                     </label>
@@ -52,7 +52,7 @@ export function LayerControl() {
         </div>
       ) : (
         <div
-          className='tw-card-body tw:hover:bg-slate-300 tw-card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
+          className='tw:card-body tw:hover:bg-slate-300 tw:card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
           onClick={() => {
             setOpen(true)
           }}
diff --git a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
index 6a71c0ea..fd2f52f8 100644
--- a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
@@ -43,9 +43,9 @@ export const LocateControl = () => {
 
   return (
     <>
-      <div className='tw-card tw:h-12 tw:w-12 tw:bg-base-100 tw:shadow-xl tw:items-center tw:justify-center  tw:hover:bg-slate-300 tw:hover:cursor-pointer tw:transition-all tw:duration-300 tw:ml-2'>
+      <div className='tw:card tw:h-12 tw:w-12 tw:bg-base-100 tw:shadow-xl tw:items-center tw:justify-center  tw:hover:bg-slate-300 tw:hover:cursor-pointer tw:transition-all tw:duration-300 tw:ml-2'>
         <div
-          className='tw-card-body tw-card tw:p-2 tw:h-10 tw:w-10  '
+          className='tw:card-body tw:card tw:p-2 tw:h-10 tw:w-10  '
           onClick={() => {
             if (active) {
               lc.stop()
@@ -57,7 +57,7 @@ export const LocateControl = () => {
           }}
         >
           {loading ? (
-            <span className='tw-loading tw-loading-spinner tw-loading-md tw:mt-1'></span>
+            <span className='tw:loading tw:loading-spinner tw:loading-md tw:mt-1'></span>
           ) : (
             <SVG
               src={TargetSVG}
diff --git a/src/Components/Map/Subcomponents/Controls/QuestControl.tsx b/src/Components/Map/Subcomponents/Controls/QuestControl.tsx
index eb68740b..bb2b9f94 100644
--- a/src/Components/Map/Subcomponents/Controls/QuestControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/QuestControl.tsx
@@ -11,11 +11,11 @@ export function QuestControl() {
         ''
       ) : (
         <div
-          className='tw-card tw:bg-base-100 tw:shadow-xl tw:my-2 tw:w-10'
+          className='tw:card tw:bg-base-100 tw:shadow-xl tw:my-2 tw:w-10'
           onClick={(e) => e.stopPropagation()}
         >
           <div
-            className='tw-card-body tw:hover:bg-slate-300 tw:rounded-2xl tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
+            className='tw:card-body tw:hover:bg-slate-300 tw:rounded-2xl tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
             onClick={() => setQuestsOpen(true)}
           >
             <img src={FistSVG} alt='Quests' className='tw:h-[2em]' />
diff --git a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
index 97437058..10a96a43 100644
--- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
@@ -118,7 +118,7 @@ export const SearchControl = () => {
                 placeholder='search ...'
                 autoComplete='off'
                 value={value}
-                className='tw-input tw-input-bordered tw:grow tw:shadow-xl tw:rounded-lg tw:pr-12'
+                className='tw:input tw:input-bordered tw:grow tw:shadow-xl tw:rounded-lg tw:pr-12'
                 ref={searchInput}
                 onChange={(e) => setValue(e.target.value)}
                 onFocus={() => {
@@ -129,7 +129,7 @@ export const SearchControl = () => {
               />
               {value.length > 0 && (
                 <button
-                  className='tw-btn tw-btn-sm tw-btn-circle tw:absolute tw:right-2 tw:top-2'
+                  className='tw:btn tw:btn-sm tw:btn-circle tw:absolute tw:right-2 tw:top-2'
                   onClick={() => setValue('')}
                 >
                   ✕
@@ -146,13 +146,13 @@ export const SearchControl = () => {
           value.length === 0 ? (
             ''
           ) : (
-            <div className='tw-card tw-card-body tw:bg-base-100 tw:p-4 tw:mt-2 tw:shadow-xl tw:overflow-y-auto tw:max-h-[calc(100dvh-152px)] tw:absolute tw:z-3000'>
+            <div className='tw:card tw:card-body tw:bg-base-100 tw:p-4 tw:mt-2 tw:shadow-xl tw:overflow-y-auto tw:max-h-[calc(100dvh-152px)] tw:absolute tw:z-3000'>
               {tagsResults.length > 0 && (
                 <div className='tw:flex tw:flex-wrap'>
                   {tagsResults.slice(0, 3).map((tag) => (
                     <div
                       key={tag.name}
-                      className='tw:rounded-2xl tw:text-white tw:p-1 tw:px-4 tw:shadow-md tw-card tw:mr-2 tw:mb-2 tw:cursor-pointer'
+                      className='tw:rounded-2xl tw:text-white tw:p-1 tw:px-4 tw:shadow-md tw:card tw:mr-2 tw:mb-2 tw:cursor-pointer'
                       style={{ backgroundColor: tag.color }}
                       onClick={() => {
                         addFilterTag(tag)
diff --git a/src/Components/Map/Subcomponents/Controls/SidebarControl.tsx b/src/Components/Map/Subcomponents/Controls/SidebarControl.tsx
index 1dcbe040..b809ab3a 100644
--- a/src/Components/Map/Subcomponents/Controls/SidebarControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/SidebarControl.tsx
@@ -4,10 +4,10 @@ import Bars3Icon from '@heroicons/react/16/solid/Bars3Icon'
 export const SidebarControl = () => {
   return (
     <>
-      <div className='tw-card tw:bg-base-100 tw:shadow-xl tw:items-center tw:justify-center  tw:hover:bg-slate-300 tw:hover:cursor-pointer tw:transition-all tw:duration-300 tw:mr-2 tw:h-12 tw:w-12 '>
-        <div className='tw-card-body tw-card tw:p-0'>
+      <div className='tw:card tw:bg-base-100 tw:shadow-xl tw:items-center tw:justify-center  tw:hover:bg-slate-300 tw:hover:cursor-pointer tw:transition-all tw:duration-300 tw:mr-2 tw:h-12 tw:w-12 '>
+        <div className='tw:card-body tw:card tw:p-0'>
           <button
-            className='tw-btn tw-btn-square tw-btn-ghost tw:rounded-2xl'
+            className='tw:btn tw:btn-square tw:btn-ghost tw:rounded-2xl'
             data-te-sidenav-toggle-ref
             data-te-target='#sidenav'
             aria-controls='#sidenav'
diff --git a/src/Components/Map/Subcomponents/Controls/TagsControl.tsx b/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
index 18576da4..d793cccf 100644
--- a/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
@@ -10,12 +10,12 @@ export const TagsControl = () => {
       {filterTags.map((tag) => (
         <div
           key={tag.id}
-          className='tw:rounded-2xl tw:text-white tw:p-2 tw:px-4 tw:shadow-xl tw-card tw:mr-2 tw:mb-2'
+          className='tw:rounded-2xl tw:text-white tw:p-2 tw:px-4 tw:shadow-xl tw:card tw:mr-2 tw:mb-2'
           style={{ backgroundColor: tag.color }}
         >
-          <div className='tw-card-actions tw:justify-end'>
+          <div className='tw:card-actions tw:justify-end'>
             <label
-              className='tw-btn tw-btn-xs tw-btn-circle tw:absolute tw:-right-2 tw:-top-2 tw:bg-white tw:text-gray-600'
+              className='tw:btn tw:btn-xs tw:btn-circle tw:absolute tw:-right-2 tw:-top-2 tw:bg-white tw:text-gray-600'
               onClick={() => removeFilterTag(tag.name)}
             >
               ✕
diff --git a/src/Components/Map/Subcomponents/ItemFormPopup.tsx b/src/Components/Map/Subcomponents/ItemFormPopup.tsx
index 6b5740e1..0f346b25 100644
--- a/src/Components/Map/Subcomponents/ItemFormPopup.tsx
+++ b/src/Components/Map/Subcomponents/ItemFormPopup.tsx
@@ -199,12 +199,12 @@ export function ItemFormPopup(props: ItemFormPopupProps) {
           <button
             className={
               spinner
-                ? 'tw-btn tw-btn-disabled tw:mt-5 tw:place-self-center'
-                : 'tw-btn tw:mt-5 tw:place-self-center'
+                ? 'tw:btn tw:btn-disabled tw:mt-5 tw:place-self-center'
+                : 'tw:btn tw:mt-5 tw:place-self-center'
             }
             type='submit'
           >
-            {spinner ? <span className='tw-loading tw-loading-spinner'></span> : 'Save'}
+            {spinner ? <span className='tw:loading tw:loading-spinner'></span> : 'Save'}
           </button>
         </div>
       </form>
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
index b88bb640..b2820dae 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
@@ -78,7 +78,7 @@ export function HeaderView({
         <div className={'tw:grow tw:max-w-[calc(100%-60px)] }'}>
           <div className='flex items-center'>
             {avatar && (
-              <div className='tw-avatar'>
+              <div className='tw:avatar'>
                 <div
                   className={`${
                     big ? 'tw:w-20' : 'tw:w-10'
@@ -123,16 +123,16 @@ export function HeaderView({
             (hasUserPermission(api?.collectionName!, 'delete', item) ||
               hasUserPermission(api?.collectionName!, 'update', item)) &&
             !hideMenu && (
-              <div className='tw-dropdown tw-dropdown-bottom'>
+              <div className='tw:dropdown tw:dropdown-bottom'>
                 <label
                   tabIndex={0}
-                  className='tw:bg-base-100 tw-btn tw:m-1 tw:leading-3 tw:border-none tw:min-h-0 tw:h-6'
+                  className='tw:bg-base-100 tw:btn tw:m-1 tw:leading-3 tw:border-none tw:min-h-0 tw:h-6'
                 >
                   <EllipsisVerticalIcon className='tw:h-5 tw:w-5' />
                 </label>
                 <ul
                   tabIndex={0}
-                  className='tw-dropdown-content tw-menu tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:z-1000'
+                  className='tw:dropdown-content tw:menu tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:z-1000'
                 >
                   {api?.updateItem &&
                     hasUserPermission(api.collectionName!, 'update', item) &&
@@ -170,7 +170,7 @@ export function HeaderView({
                       <li>
                         <a className='tw:cursor-pointer tw:text-error!' onClick={openDeleteModal}>
                           {loading ? (
-                            <span className='tw-loading tw-loading-spinner tw-loading-sm'></span>
+                            <span className='tw:loading tw:loading-spinner tw:loading-sm'></span>
                           ) : (
                             <TrashIcon className='tw:h-5 tw:w-5' />
                           )}
@@ -195,7 +195,7 @@ export function HeaderView({
           <div className='tw:grid'>
             <div className='tw:flex tw:justify-between'>
               <label
-                className='tw-btn tw:mt-4 tw-btn-error'
+                className='tw:btn tw:mt-4 tw:btn-error'
                 onClick={(e) => {
                   deleteCallback(e)
                   setModalOpen(false)
@@ -203,7 +203,7 @@ export function HeaderView({
               >
                 Yes
               </label>
-              <label className='tw-btn tw:mt-4' onClick={() => setModalOpen(false)}>
+              <label className='tw:btn tw:mt-4' onClick={() => setModalOpen(false)}>
                 No
               </label>
             </div>
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx
index 1a09aeee..119262b5 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx
@@ -29,7 +29,7 @@ export const PopupButton = ({
         style={{
           backgroundColor: `${item?.color ?? (item && (getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : (item?.layer?.markerDefaultColor ?? '#000')))}`,
         }}
-        className='tw-btn tw:text-white tw-btn-sm tw:float-right tw:mt-1'
+        className='tw:btn tw:text-white tw:btn-sm tw:float-right tw:mt-1'
       >
         {text}
       </button>
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx
index 080eb558..49d96eb8 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx
@@ -13,15 +13,15 @@ export const PopupCheckboxInput = ({
   item?: Item
 }) => {
   return (
-    <label htmlFor={item?.id} className='tw-label tw:justify-normal tw:pt-1 tw:pb-1'>
+    <label htmlFor={item?.id} className='tw:label tw:justify-normal tw:pt-1 tw:pb-1'>
       <input
         id={item?.id}
         type='checkbox'
         name={dataField}
-        className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
+        className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
         checked={item?.public_edit}
       />
-      <span className='tw:text-sm tw-label-text tw:mx-2 tw:cursor-pointer'>{label}</span>
+      <span className='tw:text-sm tw:label-text tw:mx-2 tw:cursor-pointer'>{label}</span>
     </label>
   )
 }
diff --git a/src/Components/Map/Subcomponents/SelectPosition.tsx b/src/Components/Map/Subcomponents/SelectPosition.tsx
index 414351b7..05a5959b 100644
--- a/src/Components/Map/Subcomponents/SelectPosition.tsx
+++ b/src/Components/Map/Subcomponents/SelectPosition.tsx
@@ -1,16 +1,16 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 export const SelectPosition = ({ setSelectNewItemPosition }: { setSelectNewItemPosition }) => {
   return (
-    <div className='tw:animate-pulseGrow tw-button tw:z-1000 tw:absolute tw:right-5 tw:top-4 tw:drop-shadow-md'>
+    <div className='tw:animate-pulseGrow tw:button tw:z-1000 tw:absolute tw:right-5 tw:top-4 tw:drop-shadow-md'>
       <label
-        className='tw-btn tw-btn-sm tw:rounded-2xl tw-btn-circle tw-btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
+        className='tw:btn tw:btn-sm tw:rounded-2xl tw:btn-circle tw:btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
         onClick={() => {
           setSelectNewItemPosition(null)
         }}
       >
         <p className='tw:text-center '>✕</p>
       </label>
-      <div className='tw-alert tw:bg-base-100 tw:text-base-content'>
+      <div className='tw:alert tw:bg-base-100 tw:text-base-content'>
         <div>
           <span className='tw:text-lg'>Select position on the map!</span>
         </div>
diff --git a/src/Components/Map/UtopiaMapInner.tsx b/src/Components/Map/UtopiaMapInner.tsx
index 57b688c2..d41e87d5 100644
--- a/src/Components/Map/UtopiaMapInner.tsx
+++ b/src/Components/Map/UtopiaMapInner.tsx
@@ -80,7 +80,7 @@ export function UtopiaMapInner({
                   }
                 />
                 <a href='https://opencollective.com/utopia-project'>
-                  <div className='tw-btn  tw-btn-sm tw:float-right tw-btn-primary'>Donate</div>
+                  <div className='tw:btn  tw:btn-sm tw:float-right tw:btn-primary'>Donate</div>
                 </a>
               </div>
             </>,
diff --git a/src/Components/Profile/ProfileForm.tsx b/src/Components/Profile/ProfileForm.tsx
index 609594c1..86b3e406 100644
--- a/src/Components/Profile/ProfileForm.tsx
+++ b/src/Components/Profile/ProfileForm.tsx
@@ -203,7 +203,7 @@ export function ProfileForm() {
 
             <div className='tw:mt-4'>
               <button
-                className={loading ? ' tw-loading tw-btn tw:float-right' : 'tw-btn tw:float-right'}
+                className={loading ? ' tw:loading tw:btn tw:float-right' : 'tw:btn tw:float-right'}
                 type='submit'
                 style={{
                   // We could refactor this, it is used several times at different locations
diff --git a/src/Components/Profile/ProfileView.tsx b/src/Components/Profile/ProfileView.tsx
index c9617783..7e4c5944 100644
--- a/src/Components/Profile/ProfileView.tsx
+++ b/src/Components/Profile/ProfileView.tsx
@@ -174,7 +174,7 @@ export function ProfileView({ attestationApi }: { attestationApi?: ItemsApi<any>
       {item && (
         <MapOverlayPage
           key={item.id}
-          className={`tw:p-0! tw:mx-4 tw:mt-4 tw:mb-4 tw:md:w-[calc(50%-32px)] tw:w-[calc(100%-32px)] tw:min-w-80 tw:max-w-3xl tw:left-0! tw:sm:left-auto! tw:top-0 tw:bottom-0 tw:transition-opacity tw:duration-500 ${!selectPosition ? 'tw:opacity-100 tw:pointer-events-auto' : 'tw:opacity-0 tw:pointer-events-none'}`}
+          className={`tw:p-0! tw:m-4! tw:md:w-[calc(50%-32px)] tw:w-[calc(100%-32px)] tw:min-w-80 tw:max-w-3xl tw:left-0! tw:sm:left-auto! tw:top-0 tw:bottom-0 tw:transition-opacity tw:duration-500 ${!selectPosition ? 'tw:opacity-100 tw:pointer-events-auto' : 'tw:opacity-0 tw:pointer-events-none'}`}
         >
           <>
             <div className={'tw:px-6 tw:pt-6'}>
diff --git a/src/Components/Profile/Subcomponents/ActionsButton.tsx b/src/Components/Profile/Subcomponents/ActionsButton.tsx
index 973d63d1..98322512 100644
--- a/src/Components/Profile/Subcomponents/ActionsButton.tsx
+++ b/src/Components/Profile/Subcomponents/ActionsButton.tsx
@@ -58,7 +58,7 @@ export function ActionButton({
             {triggerItemSelected && (
               <button
                 tabIndex={0}
-                className='tw:z-500 tw-btn tw-btn-circle tw:shadow'
+                className='tw:z-500 tw:btn tw:btn-circle tw:shadow'
                 onClick={() => {
                   setModalOpen(true)
                 }}
@@ -73,7 +73,7 @@ export function ActionButton({
             {triggerAddButton && (
               <button
                 tabIndex={0}
-                className='tw:z-500 tw-btn tw-btn-circle tw:shadow tw:mt-2'
+                className='tw:z-500 tw:btn tw:btn-circle tw:shadow tw:mt-2'
                 onClick={() => {
                   triggerAddButton()
                 }}
@@ -110,7 +110,7 @@ export function ActionButton({
                 .map((i) => (
                   <div
                     key={i.id}
-                    className='tw:cursor-pointer tw-card tw:border-[1px] tw:border-base-300 tw-card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:mx-4 tw:p-4 tw:mb-4 tw:h-fit'
+                    className='tw:cursor-pointer tw:card tw:border-[1px] tw:border-base-300 tw:card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:mx-4 tw:p-4 tw:mb-4 tw:h-fit'
                     onClick={() => {
                       triggerItemSelected(i.id)
                       setModalOpen(false)
diff --git a/src/Components/Profile/Subcomponents/AvatarWidget.tsx b/src/Components/Profile/Subcomponents/AvatarWidget.tsx
index dd49bf50..9434c535 100644
--- a/src/Components/Profile/Subcomponents/AvatarWidget.tsx
+++ b/src/Components/Profile/Subcomponents/AvatarWidget.tsx
@@ -166,10 +166,10 @@ export const AvatarWidget: React.FC<AvatarWidgetProps> = ({ avatar, setAvatar })
           <input
             type='file'
             accept='image/*'
-            className='tw-file-input tw:w-full tw:max-w-xs'
+            className='tw:file-input tw:w-full tw:max-w-xs'
             onChange={onImageChange}
           />
-          <div className='button tw-btn tw-btn-lg tw-btn-circle tw:animate-none'>
+          <div className='button tw:btn tw:btn-lg tw:btn-circle tw:animate-none'>
             <ArrowUpTrayIcon className='tw:w-6 tw:h-6' />
           </div>
           {avatar ? (
@@ -187,7 +187,7 @@ export const AvatarWidget: React.FC<AvatarWidgetProps> = ({ avatar, setAvatar })
         </label>
       ) : (
         <div className='tw:w-20 tw:flex tw:items-center tw:justify-center'>
-          <span className='tw-loading tw-loading-spinner'></span>
+          <span className='tw:loading tw:loading-spinner'></span>
         </div>
       )}
       <DialogModal
@@ -203,7 +203,7 @@ export const AvatarWidget: React.FC<AvatarWidgetProps> = ({ avatar, setAvatar })
           <img src={image} ref={imgRef} onLoad={onImageLoad} />
         </ReactCrop>
         <button
-          className={'tw-btn tw-btn-primary'}
+          className={'tw:btn tw:btn-primary'}
           onClick={() => {
             setCropping(true)
             setCropModalOpen(false)
diff --git a/src/Components/Profile/Subcomponents/ContactInfoView.tsx b/src/Components/Profile/Subcomponents/ContactInfoView.tsx
index fd0a6828..e0595f48 100644
--- a/src/Components/Profile/Subcomponents/ContactInfoView.tsx
+++ b/src/Components/Profile/Subcomponents/ContactInfoView.tsx
@@ -30,7 +30,7 @@ export const ContactInfoView = ({ item, heading }: { item: Item; heading: string
         {profileOwner?.image && (
           <ConditionalLink url={'/item/' + profileOwner?.id}>
             <div className='tw:mr-5 tw:flex tw:items-center tw:justify-center'>
-              <div className='tw-avatar'>
+              <div className='tw:avatar'>
                 <div className='tw:w-20 tw:h-20 tw:bg-gray-200 rounded-full tw:flex tw:items-center tw:justify-center overflow-hidden'>
                   <img
                     src={appState.assetsApi.url + profileOwner?.image}
diff --git a/src/Components/Profile/Subcomponents/FormHeader.tsx b/src/Components/Profile/Subcomponents/FormHeader.tsx
index 4868d0f7..165a9c27 100644
--- a/src/Components/Profile/Subcomponents/FormHeader.tsx
+++ b/src/Components/Profile/Subcomponents/FormHeader.tsx
@@ -40,7 +40,7 @@ export const FormHeader = ({ item, state, setState }) => {
               name: v,
             }))
           }
-          containerStyle='tw:grow tw-input-md'
+          containerStyle='tw:grow tw:input-md'
         />
         <TextInput
           placeholder='Subtitle'
@@ -52,7 +52,7 @@ export const FormHeader = ({ item, state, setState }) => {
               subname: v,
             }))
           }
-          containerStyle='tw:grow tw-input-sm tw:px-4 tw:mt-1'
+          containerStyle='tw:grow tw:input-sm tw:px-4 tw:mt-1'
         />
       </div>
     </div>
diff --git a/src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx b/src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx
index e75b5310..29e4b9f3 100644
--- a/src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx
+++ b/src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx
@@ -53,16 +53,16 @@ export function LinkedItemsHeaderView({
         </div>
         <div className='tw:col-span-1' onClick={(e) => e.stopPropagation()}>
           {unlinkPermission && (
-            <div className='tw-dropdown tw-dropdown-bottom'>
+            <div className='tw:dropdown tw:dropdown-bottom'>
               <label
                 tabIndex={0}
-                className=' tw-btn tw:m-1 tw:leading-3 tw:border-none tw:min-h-0 tw:h-6'
+                className=' tw:btn tw:m-1 tw:leading-3 tw:border-none tw:min-h-0 tw:h-6'
               >
                 <EllipsisVerticalIcon className='tw:h-5 tw:w-5' />
               </label>
               <ul
                 tabIndex={0}
-                className='tw-dropdown-content tw-menu tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:z-1000'
+                className='tw:dropdown-content tw:menu tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:z-1000'
               >
                 {true && (
                   <li>
@@ -71,7 +71,7 @@ export function LinkedItemsHeaderView({
                       onClick={() => unlinkCallback(item.id)}
                     >
                       {loading ? (
-                        <span className='tw-loading tw-loading-spinner tw-loading-sm'></span>
+                        <span className='tw:loading tw:loading-spinner tw:loading-sm'></span>
                       ) : (
                         <LinkSlashIcon className='tw:h-5 tw:w-5 tw:stroke-3' />
                       )}
diff --git a/src/Components/Profile/Subcomponents/MarkdownHint.tsx b/src/Components/Profile/Subcomponents/MarkdownHint.tsx
index 48ecf56c..6e263e33 100644
--- a/src/Components/Profile/Subcomponents/MarkdownHint.tsx
+++ b/src/Components/Profile/Subcomponents/MarkdownHint.tsx
@@ -10,7 +10,7 @@ export const MarkdownHint = () => {
       title='Markdown is supported'
       className='flex tw:flex-row tw:text-gray-400 tw:cursor-pointer tw:items-center'
     >
-      <img src={MarkdownSVG} alt='Markdown' className='octicon octicon-markdown tw-gray-400' />
+      <img src={MarkdownSVG} alt='Markdown' className='octicon octicon-markdown tw:gray-400' />
       {expended && (
         <a
           href='https://www.markdownguide.org/cheat-sheet/#basic-syntax'
diff --git a/src/Components/Profile/Subcomponents/PlusButton.tsx b/src/Components/Profile/Subcomponents/PlusButton.tsx
index 386a456a..e9f3c868 100644
--- a/src/Components/Profile/Subcomponents/PlusButton.tsx
+++ b/src/Components/Profile/Subcomponents/PlusButton.tsx
@@ -21,10 +21,10 @@ export function PlusButton({
   return (
     <>
       {hasUserPermission(collection, 'create', undefined, layer) && (
-        <div className='tw-dropdown tw-dropdown-top tw-dropdown-end tw-dropdown-hover tw:z-3000 tw:absolute tw:right-4 tw:bottom-4'>
+        <div className='tw:dropdown tw:dropdown-top tw:dropdown-end tw:dropdown-hover tw:z-3000 tw:absolute tw:right-4 tw:bottom-4'>
           <button
             tabIndex={0}
-            className='tw:z-500 tw-btn tw-btn-circle tw:shadow'
+            className='tw:z-500 tw:btn tw:btn-circle tw:shadow'
             onClick={() => {
               triggerAction()
             }}
diff --git a/src/Components/Profile/Subcomponents/TagsWidget.tsx b/src/Components/Profile/Subcomponents/TagsWidget.tsx
index 21c57c5c..6636faee 100644
--- a/src/Components/Profile/Subcomponents/TagsWidget.tsx
+++ b/src/Components/Profile/Subcomponents/TagsWidget.tsx
@@ -107,18 +107,18 @@ export const TagsWidget = ({ placeholder, containerStyle, defaultTags, onUpdate
           setFocusInput(false)
         }, 200)
       }}
-      className={`tw-input tw-input-bordered tw:cursor-text ${containerStyle}`}
+      className={`tw:input tw:input-bordered tw:cursor-text ${containerStyle}`}
     >
       <div className='tw:flex tw:flex-wrap tw:h-fit'>
         {defaultTags.map((tag) => (
           <div
             key={tag.name}
-            className='tw:rounded-2xl tw:text-white tw:p-2 tw:px-4 tw:shadow-xl tw-card tw:mt-3 tw:mr-4'
+            className='tw:rounded-2xl tw:text-white tw:p-2 tw:px-4 tw:shadow-xl tw:card tw:mt-3 tw:mr-4'
             style={{ backgroundColor: tag.color ? tag.color : '#666' }}
           >
-            <div className='tw-card-actions tw:justify-end'>
+            <div className='tw:card-actions tw:justify-end'>
               <label
-                className='tw-btn tw-btn-xs tw-btn-circle tw:absolute tw:-right-2 tw:-top-2 tw:bg-white tw:text-gray-600'
+                className='tw:btn tw:btn-xs tw:btn-circle tw:absolute tw:-right-2 tw:-top-2 tw:bg-white tw:text-gray-600'
                 onClick={() => deleteTag(tag)}
               >
                 ✕
diff --git a/src/Components/Profile/Templates/TabsForm.tsx b/src/Components/Profile/Templates/TabsForm.tsx
index 1e76fb0a..e8fced36 100644
--- a/src/Components/Profile/Templates/TabsForm.tsx
+++ b/src/Components/Profile/Templates/TabsForm.tsx
@@ -53,19 +53,19 @@ export const TabsForm = ({
   }, [location.search])
 
   return (
-    <div role='tablist' className='tw-tabs tw-tabs-lifted tw:mt-3'>
+    <div role='tablist' className='tw:tabs tw:tabs-lifted tw:mt-3'>
       <input
         type='radio'
         name='my_tabs_2'
         role='tab'
-        className={'tw-tab  tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'}
+        className={'tw:tab  tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'}
         aria-label='Info'
         checked={activeTab === 1 && true}
         onChange={() => updateActiveTab(1)}
       />
       <div
         role='tabpanel'
-        className='tw-tab-content tw:bg-base-100 tw:border-(--fallback-bc,oklch(var(--bc)/0.2)) tw:rounded-box tw:h-[calc(100dvh-332px)] tw:min-h-56 tw:border-none'
+        className='tw:tab-content tw:bg-base-100 tw:border-(--fallback-bc,oklch(var(--bc)/0.2)) tw:rounded-box tw:h-[calc(100dvh-332px)] tw:min-h-56 tw:border-none'
       >
         <div
           className={`tw:flex tw:flex-col tw:h-full ${item.layer.itemType.show_start_end_input && 'tw:pt-4'}`}
@@ -125,7 +125,7 @@ export const TabsForm = ({
             name='my_tabs_2'
             role='tab'
             className={
-              'tw-tab tw:min-w-[10em]  tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
+              'tw:tab tw:min-w-[10em]  tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
             }
             aria-label='Offers & Needs'
             checked={activeTab === 3 && true}
@@ -133,7 +133,7 @@ export const TabsForm = ({
           />
           <div
             role='tabpanel'
-            className='tw-tab-content tw:bg-base-100 tw:border-(--fallback-bc,oklch(var(--bc)/0.2)) tw:rounded-box tw:h-[calc(100dvh-332px)] tw:min-h-56 tw:border-none'
+            className='tw:tab-content tw:bg-base-100 tw:border-(--fallback-bc,oklch(var(--bc)/0.2)) tw:rounded-box tw:h-[calc(100dvh-332px)] tw:min-h-56 tw:border-none'
           >
             <div className='tw:h-full'>
               <div className='tw:w-full tw:h-[calc(50%-0.75em)] tw:mb-4'>
@@ -172,14 +172,14 @@ export const TabsForm = ({
             type='radio'
             name='my_tabs_2'
             role='tab'
-            className='tw-tab  tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
+            className='tw:tab  tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
             aria-label='Links'
             checked={activeTab === 7 && true}
             onChange={() => updateActiveTab(7)}
           />
           <div
             role='tabpanel'
-            className='tw-tab-content tw:bg-base-100  tw:rounded-box tw:h-[calc(100dvh-332px)] tw:overflow-y-auto tw:pt-4 tw:pb-1 tw:-mx-4 tw:overflow-x-hidden fade'
+            className='tw:tab-content tw:bg-base-100  tw:rounded-box tw:h-[calc(100dvh-332px)] tw:overflow-y-auto tw:pt-4 tw:pb-1 tw:-mx-4 tw:overflow-x-hidden fade'
           >
             <div className='tw:h-full'>
               <div className='tw:grid tw:grid-cols-1 tw:sm:grid-cols-2 tw:md:grid-cols-1 tw:lg:grid-cols-1 tw:xl:grid-cols-1 tw:2xl:grid-cols-2 tw:mb-4'>
@@ -187,7 +187,7 @@ export const TabsForm = ({
                   state.relations.map((i) => (
                     <div
                       key={i.id}
-                      className='tw:cursor-pointer tw-card tw:bg-base-200 tw:border-[1px] tw:border-base-300 tw-card-body tw:shadow-xl tw:text-base-content tw:mx-4 tw:p-6 tw:mb-4'
+                      className='tw:cursor-pointer tw:card tw:bg-base-200 tw:border-[1px] tw:border-base-300 tw:card-body tw:shadow-xl tw:text-base-content tw:mx-4 tw:p-6 tw:mb-4'
                       onClick={() => navigate('/item/' + i.id)}
                     >
                       <LinkedItemsHeaderView
diff --git a/src/Components/Profile/Templates/TabsView.tsx b/src/Components/Profile/Templates/TabsView.tsx
index 6fa091eb..9b4c38be 100644
--- a/src/Components/Profile/Templates/TabsView.tsx
+++ b/src/Components/Profile/Templates/TabsView.tsx
@@ -85,13 +85,13 @@ export const TabsView = ({
   }, [location.search])
 
   return (
-    <div role='tablist' className='tw-tabs tw-tabs-lifted tw:mt-2 tw:mb-2 tw:px-6'>
+    <div role='tablist' className='tw:tabs tw:tabs-lifted tw:mt-2 tw:mb-2 tw:px-6'>
       <input
         type='radio'
         name='my_tabs_2'
         role='tab'
         className={
-          'tw-tab tw:font-bold tw:ps-2! tw:pe-2! tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
+          'tw:tab tw:font-bold tw:ps-2! tw:pe-2! tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
         }
         aria-label={`${item.layer?.itemType.icon_as_labels && activeTab !== 1 ? '📝' : '📝\u00A0Info'}`}
         checked={activeTab === 1 && true}
@@ -99,7 +99,7 @@ export const TabsView = ({
       />
       <div
         role='tabpanel'
-        className='tw-tab-content tw:bg-base-100 tw:rounded-box tw:h-[calc(100dvh-280px)] tw:overflow-y-auto fade tw:pt-2 tw:pb-4 tw:mb-4 tw:overflow-x-hidden'
+        className='tw:tab-content tw:bg-base-100 tw:rounded-box tw:h-[calc(100dvh-280px)] tw:overflow-y-auto fade tw:pt-2 tw:pb-4 tw:mb-4 tw:overflow-x-hidden'
       >
         {item.layer?.itemType.show_start_end && (
           <div className='tw:max-w-xs'>
@@ -117,7 +117,7 @@ export const TabsView = ({
             name='my_tabs_2'
             role='tab'
             className={
-              'tw-tab tw:font-bold tw:ps-2! tw:pe-2! tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
+              'tw:tab tw:font-bold tw:ps-2! tw:pe-2! tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
             }
             aria-label={`${item.layer.itemType.icon_as_labels && activeTab !== 2 ? '❤️' : '❤️\u00A0Trust'}`}
             checked={activeTab === 2 && true}
@@ -125,9 +125,9 @@ export const TabsView = ({
           />
           <div
             role='tabpanel'
-            className='tw-tab-content tw:bg-base-100 tw:rounded-box tw:h-[calc(100dvh-280px)] tw:overflow-y-auto fade tw:pt-2 tw:pb-4 tw:mb-4 tw:overflow-x-hidden'
+            className='tw:tab-content tw:bg-base-100 tw:rounded-box tw:h-[calc(100dvh-280px)] tw:overflow-y-auto fade tw:pt-2 tw:pb-4 tw:mb-4 tw:overflow-x-hidden'
           >
-            <table className='sm:tw-table-sm md:tw-table-md'>
+            <table className='sm:tw:table-sm md:tw:table-md'>
               <tbody>
                 {attestations
                   .filter((a) => a.to.some((t) => t.directus_users_id === item.user_created?.id))
@@ -139,7 +139,7 @@ export const TabsView = ({
                     <tr key={i}>
                       <td>
                         <div
-                          className={`tw:cursor-pointer tw:text-3xl tw-mask tw-mask-${a.shape} tw:p-3 tw:mr-2 tw:shadow-xl tw-bg-[${a.color}]`}
+                          className={`tw:cursor-pointer tw:text-3xl tw:mask tw:mask-${a.shape} tw:p-3 tw:mr-2 tw:shadow-xl tw:bg-[${a.color}]`}
                         >
                           {a.emoji}
                         </div>
@@ -153,8 +153,8 @@ export const TabsView = ({
                         {getUserProfile(a.user_created.id) ? (
                           <Link to={'/item/' + getUserProfile(a.user_created.id)?.id}>
                             <div className='flex items-center gap-3'>
-                              <div className='tw-avatar'>
-                                <div className='tw-mask tw:rounded-full tw:h-8 tw:w-8 tw:mr-2'>
+                              <div className='tw:avatar'>
+                                <div className='tw:mask tw:rounded-full tw:h-8 tw:w-8 tw:mr-2'>
                                   {getUserProfile(a.user_created.id)?.image && (
                                     <img
                                       src={
@@ -199,14 +199,14 @@ export const TabsView = ({
             type='radio'
             name='my_tabs_2'
             role='tab'
-            className={`tw-tab tw:font-bold tw:ps-2! tw:pe-2! ${!(item.layer.itemType.icon_as_labels && activeTab !== 3) && 'tw:min-w-[10.4em]'} tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]`}
+            className={`tw:tab tw:font-bold tw:ps-2! tw:pe-2! ${!(item.layer.itemType.icon_as_labels && activeTab !== 3) && 'tw:min-w-[10.4em]'} tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]`}
             aria-label={`${item.layer.itemType.icon_as_labels && activeTab !== 3 ? '♻️' : '♻️\u00A0Offers & Needs'}`}
             checked={activeTab === 3 && true}
             onChange={() => updateActiveTab(3)}
           />
           <div
             role='tabpanel'
-            className='tw-tab-content tw:bg-base-100  tw:rounded-box tw:h-[calc(100dvh-268px)] tw:overflow-y-auto fade tw:pt-4 tw:pb-1'
+            className='tw:tab-content tw:bg-base-100  tw:rounded-box tw:h-[calc(100dvh-268px)] tw:overflow-y-auto fade tw:pt-4 tw:pb-1'
           >
             <div className='tw:h-full'>
               <div className='tw:grid tw:grid-cols-1'>
@@ -252,14 +252,14 @@ export const TabsView = ({
             type='radio'
             name='my_tabs_2'
             role='tab'
-            className='tw-tab tw:font-bold tw:ps-2! tw:pe-2! tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
+            className='tw:tab tw:font-bold tw:ps-2! tw:pe-2! tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
             aria-label={`${item.layer.itemType.icon_as_labels && activeTab !== 7 ? '🔗' : '🔗\u00A0Links'}`}
             checked={activeTab === 7 && true}
             onChange={() => updateActiveTab(7)}
           />
           <div
             role='tabpanel'
-            className='tw-tab-content tw:bg-base-100  tw:rounded-box tw:h-[calc(100dvh-280px)] tw:overflow-y-auto tw:pt-4 tw:pb-1 tw:-mr-4 tw:-mb-4 tw:overflow-x-hidden'
+            className='tw:tab-content tw:bg-base-100  tw:rounded-box tw:h-[calc(100dvh-280px)] tw:overflow-y-auto tw:pt-4 tw:pb-1 tw:-mr-4 tw:-mb-4 tw:overflow-x-hidden'
           >
             <div className='tw:h-full'>
               <div className='tw:grid tw:grid-cols-1 tw:sm:grid-cols-2 tw:md:grid-cols-1 tw:lg:grid-cols-1 tw:xl:grid-cols-1 tw:2xl:grid-cols-2 tw:pb-4'>
@@ -267,7 +267,7 @@ export const TabsView = ({
                   relations.map((i) => (
                     <div
                       key={i.id}
-                      className='tw:cursor-pointer tw-card tw:bg-base-200 tw:border-[1px] tw:border-base-300 tw-card-body tw:shadow-xl tw:text-base-content tw:p-6 tw:mr-4 tw:mb-4'
+                      className='tw:cursor-pointer tw:card tw:bg-base-200 tw:border-[1px] tw:border-base-300 tw:card-body tw:shadow-xl tw:text-base-content tw:p-6 tw:mr-4 tw:mb-4'
                       onClick={() => navigate('/item/' + i.id)}
                     >
                       <LinkedItemsHeaderView
diff --git a/src/Components/Profile/UserSettings.tsx b/src/Components/Profile/UserSettings.tsx
index cd73c4a1..02fccb6f 100644
--- a/src/Components/Profile/UserSettings.tsx
+++ b/src/Components/Profile/UserSettings.tsx
@@ -56,7 +56,7 @@ export function UserSettings() {
       className='tw:mx-4 tw:mt-4 tw:max-h-[calc(100dvh-96px)] tw:h-fit tw:md:w-[calc(50%-32px)] tw:w-[calc(100%-32px)] tw:max-w-xl tw:left-auto! tw:top-0 tw:bottom-0'
     >
       <div className={'tw:text-xl tw:font-semibold'}>Settings</div>
-      <div className='tw-divider tw:mt-2'></div>
+      <div className='tw:divider tw:mt-2'></div>
       <div className='tw:grid tw:grid-cols-1 tw:gap-6'>
         <TextInput
           type='email'
@@ -80,8 +80,8 @@ export function UserSettings() {
         <button
           className={
             loading
-              ? ' tw-loading tw-btn-disabled tw-btn tw-btn-primary tw:float-right'
-              : 'tw-btn tw-btn-primary tw:float-right'
+              ? ' tw:loading tw:btn-disabled tw:btn tw:btn-primary tw:float-right'
+              : 'tw:btn tw:btn-primary tw:float-right'
           }
           onClick={() => onUpdateUser()}
         >
diff --git a/src/Components/Templates/AttestationForm.tsx b/src/Components/Templates/AttestationForm.tsx
index 62cb795c..e23a2aff 100644
--- a/src/Components/Templates/AttestationForm.tsx
+++ b/src/Components/Templates/AttestationForm.tsx
@@ -96,8 +96,8 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
           (u, k) => (
             <div key={k} className='tw:flex tw:items-center tw:space-x-3 tw:mx-2 tw:my-1'>
               {u.image ? (
-                <div className='tw-avatar'>
-                  <div className='tw-mask tw-mask-circle tw:w-8 tw:h-8'>
+                <div className='avatar'>
+                  <div className='mask mask-circle tw:w-8 tw:h-8'>
                     <img
                       src={appState.assetsApi.url + u.image + '?width=40&heigth=40'}
                       alt='Avatar'
@@ -105,7 +105,7 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
                   </div>
                 </div>
               ) : (
-                <div className='tw-mask tw-mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
+                <div className='mask mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
               )}
               <div>
                 <div className='tw:font-bold'>{u.name}</div>
@@ -136,12 +136,12 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
             onChange={handleChange}
             type='text'
             placeholder='... and say some words'
-            className='tw-input tw:min-w-0 tw:w-fit tw:resize-none tw:overflow-hidden tw:text-center '
+            className='input tw:min-w-0 tw:w-fit tw:resize-none tw:overflow-hidden tw:text-center '
           />
         </div>
       </div>
       <div className='tw:w-full tw:grid tw:mt-4'>
-        <button onClick={sendAttestation} className='tw-btn tw:place-self-center tw:px-8'>
+        <button onClick={sendAttestation} className='btn tw:place-self-center tw:px-8'>
           Next
         </button>
       </div>
diff --git a/src/Components/Templates/CardPage.tsx b/src/Components/Templates/CardPage.tsx
index 0614f473..d16ecedc 100644
--- a/src/Components/Templates/CardPage.tsx
+++ b/src/Components/Templates/CardPage.tsx
@@ -19,7 +19,7 @@ export function CardPage({
   return (
     <main className='tw:flex-1 tw:overflow-y-auto tw:overflow-x-hidden tw:pt-2 tw:px-6 tw:min-w-80 tw:flex tw:justify-center'>
       <div className='tw:w-full tw:xl:max-w-6xl '>
-        <div className='tw:text-sm tw-breadcrumbs'>
+        <div className='tw:text-sm breadcrumbs'>
           <ul>
             <li>
               <Link to={'/'}>Home</Link>
diff --git a/src/Components/Templates/DialogModal.tsx b/src/Components/Templates/DialogModal.tsx
index a4244eef..f2a72ec9 100644
--- a/src/Components/Templates/DialogModal.tsx
+++ b/src/Components/Templates/DialogModal.tsx
@@ -44,20 +44,20 @@ const DialogModal = ({
   if (isOpened) {
     return (
       <dialog
-        className={`${className ?? ''} tw-card tw:shadow-xl tw:absolute tw:right-0 tw:top-0 tw:bottom-0 tw:left-0 tw:m-auto tw:transition-opacity tw:duration-300 tw:p-4 tw:max-w-xl tw:bg-base-100`}
+        className={`${className ?? ''} card tw:shadow-xl tw:absolute tw:right-0 tw:top-0 tw:bottom-0 tw:left-0 tw:m-auto tw:transition-opacity tw:duration-300 tw:p-4 tw:max-w-xl tw:bg-base-100`}
         ref={ref}
         onCancel={onClose}
         onClick={(e) =>
           ref.current && !isClickInsideRectangle(e, ref.current) && closeOnClickOutside && onClose()
         }
       >
-        <div className='tw-card-body tw:p-2'>
+        <div className='card-body tw:p-2'>
           <h2 className='tw:text-2xl tw:font-semibold tw:mb-2 tw:text-center'>{title}</h2>
 
           {children}
           {showCloseButton && (
             <button
-              className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw:absolute tw:right-2 tw:top-2'
+              className='btn btn-sm btn-circle btn-ghost tw:absolute tw:right-2 tw:top-2'
               onClick={onClose}
             >
               ✕
diff --git a/src/Components/Templates/EmojiPicker.tsx b/src/Components/Templates/EmojiPicker.tsx
index 59f67367..58e57ada 100644
--- a/src/Components/Templates/EmojiPicker.tsx
+++ b/src/Components/Templates/EmojiPicker.tsx
@@ -97,7 +97,7 @@ export const EmojiPicker = ({
     <>
       <div
         onClick={toggleDropdown}
-        className={`tw:cursor-pointer ${selectedEmoji === 'select badge' ? 'tw:text-sm tw:p-9! tw:text-center ' : 'tw:text-6xl'} tw-mask tw-mask-${selectedShape} tw:p-6 tw-bg-[${selectedColor}]`}
+        className={`tw:cursor-pointer ${selectedEmoji === 'select badge' ? 'tw:text-sm tw:p-9! tw:text-center ' : 'tw:text-6xl'} mask mask-${selectedShape} tw:p-6 bg-[${selectedColor}]`}
       >
         {selectedEmoji}
       </div>
@@ -123,7 +123,7 @@ export const EmojiPicker = ({
                 className={`tw:cursor-pointer tw:hover:bg-base-200 tw:rounded-md tw:p-2 ${shape === selectedShape ? 'tw:bg-base-300' : ''}`}
                 onClick={() => selectShape(shape)}
               >
-                <div className={`tw:h-12 tw-mask tw-mask-${shape} tw:bg-neutral-content`}></div>
+                <div className={`tw:h-12 mask mask-${shape} tw:bg-neutral-content`}></div>
               </div>
             ))}
           </div>
@@ -135,7 +135,7 @@ export const EmojiPicker = ({
                 className={`tw:cursor-pointer tw:hover:bg-base-200 tw:rounded-md tw:p-2 tw:flex tw:justify-center tw:items-center  ${color === selectedColor ? 'tw:bg-base-300' : ''}`}
                 onClick={() => selectColor(color)}
               >
-                <div className={`tw:h-8 tw:w-8 tw:rounded-full tw-bg-[${color}]`}></div>
+                <div className={`tw:h-8 tw:w-8 tw:rounded-full bg-[${color}]`}></div>
               </div>
             ))}
           </div>
diff --git a/src/Components/Templates/ItemCard.tsx b/src/Components/Templates/ItemCard.tsx
index b5108469..3c8e2ad0 100644
--- a/src/Components/Templates/ItemCard.tsx
+++ b/src/Components/Templates/ItemCard.tsx
@@ -24,7 +24,7 @@ export const ItemCard = ({
 
   return (
     <div
-      className='tw:cursor-pointer tw-card tw:border-[1px] tw:border-base-300 tw-card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:p-4 tw:mb-4 tw:h-fit'
+      className='tw:cursor-pointer card tw:border-[1px] tw:border-base-300 card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:p-4 tw:mb-4 tw:h-fit'
       onClick={() => {
         // We could have an onClick callback instead
         const params = new URLSearchParams(window.location.search)
diff --git a/src/Components/Templates/MapOverlayPage.tsx b/src/Components/Templates/MapOverlayPage.tsx
index 580db2da..752050fa 100644
--- a/src/Components/Templates/MapOverlayPage.tsx
+++ b/src/Components/Templates/MapOverlayPage.tsx
@@ -45,11 +45,11 @@ export function MapOverlayPage({
       >
         <div
           ref={overlayRef}
-          className={`${card ? 'tw-card tw-card-body' : ''} tw:shadow-xl tw:bg-base-100 tw:p-6 ${className ?? ''} ${backdrop ? '' : 'tw:z-2000'} tw:absolute tw:top-0 tw:bottom-0 tw:right-0 tw:left-0 tw:m-auto`}
+          className={`${card ? 'card card-body' : ''} tw:shadow-xl tw:bg-base-100 tw:p-6 ${className ?? ''} ${backdrop ? '' : 'tw:z-2000'} tw:absolute tw:top-0 tw:bottom-0 tw:right-0 tw:left-0 tw:m-auto`}
         >
           {children}
           <button
-            className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw:absolute tw:right-2 tw:top-2'
+            className='btn btn-sm btn-circle btn-ghost tw:absolute tw:right-2 tw:top-2'
             onClick={() => closeScreen()}
           >
             ✕
diff --git a/src/Components/Templates/OverlayItemsIndexPage.tsx b/src/Components/Templates/OverlayItemsIndexPage.tsx
index 618777b2..482d639e 100644
--- a/src/Components/Templates/OverlayItemsIndexPage.tsx
+++ b/src/Components/Templates/OverlayItemsIndexPage.tsx
@@ -176,9 +176,9 @@ export const OverlayItemsIndexPage = ({
                 ))}
               {addItemPopupType === 'place' && (
                 <form ref={tabRef} autoComplete='off' onSubmit={(e) => submitNewItem(e)}>
-                  <div className='tw:cursor-pointer tw:break-inside-avoid tw-card tw:border-[1px] tw:border-base-300 tw-card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:p-6 tw:mb-10'>
+                  <div className='tw:cursor-pointer tw:break-inside-avoid card tw:border-[1px] tw:border-base-300 card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:p-6 tw:mb-10'>
                     <label
-                      className='tw-btn tw-btn-sm tw:rounded-2xl tw-btn-circle tw-btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
+                      className='btn btn-sm tw:rounded-2xl btn-circle btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
                       onClick={() => setAddItemPopupType('')}
                     >
                       <p className='tw:text-center'>✕</p>
@@ -201,12 +201,12 @@ export const OverlayItemsIndexPage = ({
                       <button
                         className={
                           loading
-                            ? 'tw-btn tw-btn-disabled tw:mt-5 tw:place-self-center'
-                            : 'tw-btn tw:mt-5 tw:place-self-center'
+                            ? 'btn btn-disabled tw:mt-5 tw:place-self-center'
+                            : 'btn tw:mt-5 tw:place-self-center'
                         }
                         type='submit'
                       >
-                        {loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Save'}
+                        {loading ? <span className='loading loading-spinner'></span> : 'Save'}
                       </button>
                     </div>
                   </div>
diff --git a/src/Components/Templates/SelectUser.tsx b/src/Components/Templates/SelectUser.tsx
index 4a971e13..af851393 100644
--- a/src/Components/Templates/SelectUser.tsx
+++ b/src/Components/Templates/SelectUser.tsx
@@ -32,14 +32,14 @@ export const SelectUser = () => {
                     <input
                       type='checkbox'
                       onChange={() => setSelectedUsers((prev) => [...prev, u.id])}
-                      className='tw-checkbox tw-checkbox-sm'
+                      className='checkbox checkbox-sm'
                     />
                   </td>
                   <td>
                     <div className='tw:flex tw:items-center tw:space-x-3'>
                       {u.image ? (
-                        <div className='tw-avatar'>
-                          <div className='tw-mask tw-mask-circle tw:w-8 tw:h-8'>
+                        <div className='avatar'>
+                          <div className='mask mask-circle tw:w-8 tw:h-8'>
                             <img
                               src={appState.assetsApi.url + u.image + '?width=40&heigth=40'}
                               alt='Avatar'
@@ -47,7 +47,7 @@ export const SelectUser = () => {
                           </div>
                         </div>
                       ) : (
-                        <div className='tw-mask tw-mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
+                        <div className='mask mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
                       )}
                       <div>
                         <div className='tw:font-bold'>{u.name}</div>
@@ -65,7 +65,7 @@ export const SelectUser = () => {
           className='tw:place-self-center '
           to={'/attestation-form' + '?to=' + selectedUsers.map((u) => u, ',')}
         >
-          <button className='tw-btn tw:px-8'>Next</button>
+          <button className='btn tw:px-8'>Next</button>
         </Link>
       </div>
     </MapOverlayPage>
diff --git a/src/Components/Templates/TagView.tsx b/src/Components/Templates/TagView.tsx
index bc474e3d..35493b1a 100644
--- a/src/Components/Templates/TagView.tsx
+++ b/src/Components/Templates/TagView.tsx
@@ -19,7 +19,7 @@ export const TagView = ({
     <div
       key={tag.name}
       onClick={onClick}
-      className={`tw:flex tw:items-center tw:flex-row tw:rounded-2xl tw:text-white tw:p-2 tw:px-4 tw:shadow-xl tw-card tw:mt-3 tw:mr-4 tw:cursor-pointer tw:w-fit ${heighlight ? 'tw:border-4 tw:border-base-200 tw:shadow-lg' : ''}`}
+      className={`tw:flex tw:items-center tw:flex-row tw:rounded-2xl tw:text-white tw:p-2 tw:px-4 tw:shadow-xl card tw:mt-3 tw:mr-4 tw:cursor-pointer tw:w-fit ${heighlight ? 'tw:border-4 tw:border-base-200 tw:shadow-lg' : ''}`}
       style={{ backgroundColor: tag.color ? tag.color : '#666' }}
     >
       <b>{decodeTag(tag.name)}</b>
diff --git a/src/Components/Templates/TitleCard.tsx b/src/Components/Templates/TitleCard.tsx
index 19bcc66d..fe644412 100644
--- a/src/Components/Templates/TitleCard.tsx
+++ b/src/Components/Templates/TitleCard.tsx
@@ -23,7 +23,7 @@ export function TitleCard({
   return (
     <div
       className={
-        'tw-card tw:w-full tw:p-6 tw:bg-base-100 tw:shadow-xl tw:h-fit tw:mb-4 ' +
+        'card tw:w-full tw:p-6 tw:bg-base-100 tw:shadow-xl tw:h-fit tw:mb-4 ' +
         (className ?? '') +
         ' ' +
         (topMargin ?? 'tw:mt-6')
@@ -39,7 +39,7 @@ export function TitleCard({
               <div className='tw:inline-block tw:float-right'>{TopSideButtons}</div>
             )}
           </Subtitle>
-          <div className='tw-divider tw:mt-2'></div>
+          <div className='divider tw:mt-2'></div>
         </>
       )}
 
diff --git a/src/assets/chevron.svg b/src/assets/chevron.svg
index fb6f4454..c12f3bcd 100644
--- a/src/assets/chevron.svg
+++ b/src/assets/chevron.svg
@@ -2,7 +2,7 @@
             xmlns='http://www.w3.org/2000/svg'
             viewBox='0 0 24 24'
             fill='white'
-            className='tw-h-4 tw-w-4'
+            className='h-4 w-4'
           >
             <path d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z' />
           </svg>
\ No newline at end of file
diff --git a/src/assets/css/leaflet.css b/src/assets/css/leaflet.css
index 5c464e19..8fb4a278 100644
--- a/src/assets/css/leaflet.css
+++ b/src/assets/css/leaflet.css
@@ -20,14 +20,14 @@
 }
 
 .leaflet-popup-content-wrapper, .leaflet-popup-tip{
-    background-color: theme('colors.base-100');
-    color: theme('colors.base-content');
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
 
 }
 
 .leaflet-tooltip {
-    background-color: theme('colors.base-100');
-    color: theme('colors.base-content');
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
     border-width: 0px;
 }
 
@@ -35,11 +35,10 @@
     border-radius: 1em;
     transition: opacity 500ms;
     transition-delay: 50ms;
-
 }
 
-.leaflet-tooltip-top::before {
-    border-top-color: theme('colors.base-100');
+.leaflet-tooltip::before {
+    border-top-color: var(--color-base-100);
 }
 
 .leaflet-container {
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index 3ba1db02..6cb0e333 100644
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -1,6 +1,6 @@
 @import 'tailwindcss' prefix(tw);
 @plugin "daisyui" {
-  themes: light --default, dark --prefersdark, cupcake;
+  themes: light --default, dark --prefersdark, cupcake, retro;
 };
 
 @theme {
@@ -62,23 +62,23 @@
   }
 }
 
-.tw-modal {
+.modal {
     z-index: 1200 !important;
 }
 
-.tw-menu li a {
+.menu li a {
     border-radius: 10px;
 }
 
-.tw-modal {
+.modal {
     z-index: 1200 !important;
     max-height: 100dvh;
 }
 
-.tw-modal-box {
+.modal-box {
     max-height: calc(100dvh - 2em);
 }
 
-.tw-tab-content .container {
+.tab-content .container {
     height: 100%;
 }
\ No newline at end of file
diff --git a/src/assets/css/toastify.css b/src/assets/css/toastify.css
index aa235288..dec3026f 100644
--- a/src/assets/css/toastify.css
+++ b/src/assets/css/toastify.css
@@ -1,20 +1,20 @@
 :root {
-    --toastify-color-info: theme('colors.info');
-    --toastify-color-success: theme('colors.success');
-    --toastify-color-warning: theme('colors.warning');
-    --toastify-color-error: theme('colors.error');
+    --toastify-color-info: var(--color-info);
+    --toastify-color-success: var(--color-success);
+    --toastify-color-warning: var(--color-warning);
+    --toastify-color-error: var(--color-error);
 }
 
 .Toastify__toast {
     border-radius: 1rem;
-    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    --shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-colored: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--shadow);
     margin-left: 1rem;
     margin-right: 1rem;
     margin-bottom: 1rem;
-    background-color: theme('colors.base-100');
-    color: theme('colors.base-content');
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
 }
 
 .Toastify__toast-container {
diff --git a/src/assets/plus.svg b/src/assets/plus.svg
index ae77e510..ebc620a3 100644
--- a/src/assets/plus.svg
+++ b/src/assets/plus.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="tw-w-5 tw-h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path></svg>
\ No newline at end of file
diff --git a/src/assets/targetDot.svg b/src/assets/targetDot.svg
index 9ded1a69..a600b43b 100644
--- a/src/assets/targetDot.svg
+++ b/src/assets/targetDot.svg
@@ -3,7 +3,7 @@
                             fill='currentColor'
                             strokeWidth='0'
                             viewBox='0 0 512 512'
-                            className='tw-w-5 tw-h-5'
+                            className='w-5 h-5'
                             xmlns='http://www.w3.org/2000/svg'
                           >
                             <path d='M256 0c17.7 0 32 14.3 32 32V42.4c93.7 13.9 167.7 88 181.6 181.6H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H469.6c-13.9 93.7-88 167.7-181.6 181.6V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V469.6C130.3 455.7 56.3 381.7 42.4 288H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H42.4C56.3 130.3 130.3 56.3 224 42.4V32c0-17.7 14.3-32 32-32zM107.4 288c12.5 58.3 58.4 104.1 116.6 116.6V384c0-17.7 14.3-32 32-32s32 14.3 32 32v20.6c58.3-12.5 104.1-58.4 116.6-116.6H384c-17.7 0-32-14.3-32-32s14.3-32 32-32h20.6C392.1 165.7 346.3 119.9 288 107.4V128c0 17.7-14.3 32-32 32s-32-14.3-32-32V107.4C165.7 119.9 119.9 165.7 107.4 224H128c17.7 0 32 14.3 32 32s-14.3 32-32 32H107.4zM256 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'></path>
diff --git a/src/assets/user.svg b/src/assets/user.svg
index 4a0573ec..97b4d23e 100644
--- a/src/assets/user.svg
+++ b/src/assets/user.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 150 150" class="tw-w-20 tw-h-20 tw-rounded-full" style="background-color: rgb(238, 238, 238);"><path fill="#ccc" d="M 104.68731,56.689353 C 102.19435,80.640493 93.104981,97.26875 74.372196,97.26875 55.639402,97.26875 46.988823,82.308034 44.057005,57.289941 41.623314,34.938838 55.639402,15.800152 74.372196,15.800152 c 18.732785,0 32.451944,18.493971 30.315114,40.889201 z"></path><path fill="#ccc" d="M 92.5675 89.6048 C 90.79484 93.47893 89.39893 102.4504 94.86478 106.9039 C 103.9375 114.2963 106.7064 116.4723 118.3117 118.9462 C 144.0432 124.4314 141.6492 138.1543 146.5244 149.2206 L 4.268444 149.1023 C 8.472223 138.6518 6.505799 124.7812 32.40051 118.387 C 41.80992 116.0635 45.66513 113.8823 53.58659 107.0158 C 58.52744 102.7329 57.52583 93.99267 56.43084 89.26926 C 52.49275 88.83011 94.1739 88.14054 92.5675 89.6048 z"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 150 150" class="w-20 h-20 rounded-full" style="background-color: rgb(238, 238, 238);"><path fill="#ccc" d="M 104.68731,56.689353 C 102.19435,80.640493 93.104981,97.26875 74.372196,97.26875 55.639402,97.26875 46.988823,82.308034 44.057005,57.289941 41.623314,34.938838 55.639402,15.800152 74.372196,15.800152 c 18.732785,0 32.451944,18.493971 30.315114,40.889201 z"></path><path fill="#ccc" d="M 92.5675 89.6048 C 90.79484 93.47893 89.39893 102.4504 94.86478 106.9039 C 103.9375 114.2963 106.7064 116.4723 118.3117 118.9462 C 144.0432 124.4314 141.6492 138.1543 146.5244 149.2206 L 4.268444 149.1023 C 8.472223 138.6518 6.505799 124.7812 32.40051 118.387 C 41.80992 116.0635 45.66513 113.8823 53.58659 107.0158 C 58.52744 102.7329 57.52583 93.99267 56.43084 89.26926 C 52.49275 88.83011 94.1739 88.14054 92.5675 89.6048 z"></path></svg>
\ No newline at end of file