diff --git a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
index 3380f6bc..db555bf2 100644
--- a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
@@ -12,7 +12,6 @@ import TargetSVG from '#assets/target.svg'
 
 // eslint-disable-next-line import/no-unassigned-import
 import 'leaflet.locatecontrol'
-import 'leaflet.locatecontrol/dist/L.Control.Locate.css'
 
 // Converts leaflet.locatecontrol to a React Component
 export const LocateControl = () => {
diff --git a/src/Components/Map/UtopiaMap.css b/src/Components/Map/UtopiaMap.css
deleted file mode 100644
index a1f1a014..00000000
--- a/src/Components/Map/UtopiaMap.css
+++ /dev/null
@@ -1,188 +0,0 @@
-.leaflet-container {
-    text-align: left;
-    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-position: 50% 80%; 
-  }
-  
-  input {
-    box-sizing: border-box;
-  }
-  
-  textarea {
-    box-sizing: border-box;
-  }
-  
-  .leaflet-control-attribution {
-    display: none;
-   }
-  
-  .leaflet-control-locate {
-    display: none;
-  }
-
-  .leaflet-data-marker {
-  
-    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat;
-    background-position: 6px 32px;
-  }
-  
-  .crosshair-cursor-enabled {
-    cursor: crosshair;
-  }
-  
-  .leaflet-container {
-    cursor: inherit;
-  }
-  
-  .calendar-icon {
-    position: relative;
-    top: -35px;
-    left: 10px;
-    width: 13px;
-  }
-  
-  .user-icon {
-    position: relative;
-    top: -36px;
-    left: 10px;
-    width: 13px;
-  }
-
-  .circle-icon {
-    position: relative;
-    top: -33px;
-    left: 10px;
-    width: 13px;
-  }
-
-  .fire-icon {
-    position: relative;
-    top: -36px;
-    left: 10px;
-    width: 13px;
-  }
-
-  .tree-icon {
-    position: relative;
-    top: -38px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .music-icon {
-    position: relative;
-    top: -35px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .quest-icon {
-    position: relative;
-    top: -34px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .drum-icon {
-    position: relative;
-    top: -38px;
-    left: 4px;
-    width: 24px;
-  }
-
-  
-  .compass-icon {
-    position: relative;
-    top: -36.5px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .group-icon {
-    position: relative;
-    top: -37px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .liebevoll-jetzt-icon{
-    position: relative;
-    top: -35px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .staff-snake-icon {
-    position: relative;
-    top: -35px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .flower-icon {
-    position: relative;
-    top: -35px;
-    left: 4px;
-    width: 24px;
-  }
-  
-  .network-icon {
-    position: relative;
-    top: -35px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .shop-icon {
-    position: relative;
-    top: -34px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .plant-icon {
-    position: relative;
-    top: -34px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .circle-dot-icon {
-    position: relative;
-    top: -36px;
-    left: 4px;
-    width: 24px;
-  }
-  
-  .leaflet-popup-scrolled {
-    overflow-x: hidden;
-  }
-
-  .leaflet-popup-content-wrapper, .leaflet-popup-tip{
-    background-color: theme('colors.base-100');
-    color: theme('colors.base-content');
-
-  }
-
-  .leaflet-tooltip {
-    background-color: theme('colors.base-100');
-    color: theme('colors.base-content');
-    border-width: 0px;
-  }
-
-  .leaflet-tooltip {
-    border-radius: 1em;
-    transition: opacity 500ms;
-    transition-delay: 50ms;
-
-  }
-
-  .leaflet-tooltip-top::before {
-    border-top-color: theme('colors.base-100');
-  }
-
-  .marker-cluster span {
-    color: #000;
-  }
\ No newline at end of file
diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx
index ed612563..6d89cebb 100644
--- a/src/Components/Map/UtopiaMap.tsx
+++ b/src/Components/Map/UtopiaMap.tsx
@@ -6,7 +6,6 @@ import { ContextWrapper } from '#components/AppShell/ContextWrapper'
 import { UtopiaMapInner } from './UtopiaMapInner'
 
 import type { UtopiaMapProps } from '#types/UtopiaMapProps'
-import 'react-toastify/dist/ReactToastify.css'
 
 /**
  * @category Map
diff --git a/src/Components/Map/UtopiaMapInner.tsx b/src/Components/Map/UtopiaMapInner.tsx
index 927a7865..25198f21 100644
--- a/src/Components/Map/UtopiaMapInner.tsx
+++ b/src/Components/Map/UtopiaMapInner.tsx
@@ -8,11 +8,9 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { Children, cloneElement, isValidElement, useEffect, useRef, useState } from 'react'
 import { TileLayer, useMapEvents, GeoJSON, useMap } from 'react-leaflet'
-import 'leaflet/dist/leaflet.css'
 import MarkerClusterGroup from 'react-leaflet-cluster'
 import { Outlet, useLocation } from 'react-router-dom'
 import { toast } from 'react-toastify'
-import './UtopiaMap.css'
 
 import { containsUUID } from '#utils/ContainsUUID'
 
diff --git a/src/Components/Profile/Subcomponents/AvatarWidget.tsx b/src/Components/Profile/Subcomponents/AvatarWidget.tsx
index 94d1e1f4..b16f0def 100644
--- a/src/Components/Profile/Subcomponents/AvatarWidget.tsx
+++ b/src/Components/Profile/Subcomponents/AvatarWidget.tsx
@@ -8,7 +8,6 @@ import { ReactCrop, centerCrop, makeAspectCrop } from 'react-image-crop'
 
 import UserSVG from '#assets/user.svg'
 import { useAppState } from '#components/AppShell/hooks/useAppState'
-import 'react-image-crop/dist/ReactCrop.css'
 import DialogModal from '#components/Templates/DialogModal'
 
 import type { Crop } from 'react-image-crop'
diff --git a/src/Components/Profile/Subcomponents/ColorPicker.tsx b/src/Components/Profile/Subcomponents/ColorPicker.tsx
index 84160fc0..b75ed28b 100644
--- a/src/Components/Profile/Subcomponents/ColorPicker.tsx
+++ b/src/Components/Profile/Subcomponents/ColorPicker.tsx
@@ -5,7 +5,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { HexColorPicker } from 'react-colorful'
 
-import './ColorPicker.css'
 import useClickOutside from '#components/Profile/hooks/useClickOutside'
 
 // eslint-disable-next-line react/prop-types
diff --git a/src/Components/Profile/Subcomponents/GalleryView.tsx b/src/Components/Profile/Subcomponents/GalleryView.tsx
index affd8515..287131ad 100644
--- a/src/Components/Profile/Subcomponents/GalleryView.tsx
+++ b/src/Components/Profile/Subcomponents/GalleryView.tsx
@@ -1,8 +1,6 @@
 import { useState } from 'react'
 import { RowsPhotoAlbum } from 'react-photo-album'
 import ReactLightbox from 'yet-another-react-lightbox'
-import 'yet-another-react-lightbox/styles.css'
-import 'react-photo-album/rows.css'
 
 import { useAppState } from '#components/AppShell/hooks/useAppState'
 
diff --git a/src/Components/Profile/Subcomponents/ColorPicker.css b/src/assets/css/color-picker.css
similarity index 89%
rename from src/Components/Profile/Subcomponents/ColorPicker.css
rename to src/assets/css/color-picker.css
index 8fb97fb2..202106fd 100644
--- a/src/Components/Profile/Subcomponents/ColorPicker.css
+++ b/src/assets/css/color-picker.css
@@ -1,20 +1,20 @@
 .picker {
     position: relative;
-  }
-  
-  .swatch {
+}
+
+.swatch {
     width: 28px;
     height: 28px;
     border-radius: 8px;
     border: 3px solid #fff;
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
     cursor: pointer;
-  }
-  
-  .popover {
+}
+
+.popover {
     position: absolute;
     top: 0;
     left: 36px;
     border-radius: 9px;
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/assets/css/custom-file-upload.css b/src/assets/css/custom-file-upload.css
new file mode 100644
index 00000000..8594a921
--- /dev/null
+++ b/src/assets/css/custom-file-upload.css
@@ -0,0 +1,18 @@
+.custom-file-upload {
+    cursor: pointer;
+}
+
+input[type="file"] {
+    display: none;
+}
+
+.custom-file-upload:hover .button {
+    opacity: 0.8;
+}
+
+.custom-file-upload .button {
+    transition: .5s ease;
+    opacity: 0;
+    position: absolute;
+    transform: translate(8px, 8px);
+}
\ No newline at end of file
diff --git a/src/assets/css/leaflet.css b/src/assets/css/leaflet.css
new file mode 100644
index 00000000..5c464e19
--- /dev/null
+++ b/src/assets/css/leaflet.css
@@ -0,0 +1,51 @@
+.leaflet-control-attribution {
+    display: none;
+}
+
+.leaflet-control-locate {
+    display: none;
+}
+
+.leaflet-data-marker {
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat;
+    background-position: 6px 32px;
+}
+
+.leaflet-container {
+    cursor: inherit;
+}
+
+.leaflet-popup-scrolled {
+    overflow-x: hidden;
+}
+
+.leaflet-popup-content-wrapper, .leaflet-popup-tip{
+    background-color: theme('colors.base-100');
+    color: theme('colors.base-content');
+
+}
+
+.leaflet-tooltip {
+    background-color: theme('colors.base-100');
+    color: theme('colors.base-content');
+    border-width: 0px;
+}
+
+.leaflet-tooltip {
+    border-radius: 1em;
+    transition: opacity 500ms;
+    transition-delay: 50ms;
+
+}
+
+.leaflet-tooltip-top::before {
+    border-top-color: theme('colors.base-100');
+}
+
+.leaflet-container {
+    text-align: left;
+    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-position: 50% 80%;
+}
\ No newline at end of file
diff --git a/src/assets/css/marker-icons.css b/src/assets/css/marker-icons.css
new file mode 100644
index 00000000..c69102d3
--- /dev/null
+++ b/src/assets/css/marker-icons.css
@@ -0,0 +1,118 @@
+.calendar-icon {
+    position: relative;
+    top: -35px;
+    left: 10px;
+    width: 13px;
+}
+
+.user-icon {
+    position: relative;
+    top: -36px;
+    left: 10px;
+    width: 13px;
+}
+
+.circle-icon {
+    position: relative;
+    top: -33px;
+    left: 10px;
+    width: 13px;
+}
+
+.fire-icon {
+    position: relative;
+    top: -36px;
+    left: 10px;
+    width: 13px;
+}
+
+.tree-icon {
+    position: relative;
+    top: -38px;
+    left: 4px;
+    width: 24px;
+}
+
+.music-icon {
+    position: relative;
+    top: -35px;
+    left: 4px;
+    width: 24px;
+}
+
+.quest-icon {
+    position: relative;
+    top: -34px;
+    left: 4px;
+    width: 24px;
+}
+
+.drum-icon {
+    position: relative;
+    top: -38px;
+    left: 4px;
+    width: 24px;
+}
+
+.compass-icon {
+    position: relative;
+    top: -36.5px;
+    left: 4px;
+    width: 24px;
+}
+
+.group-icon {
+    position: relative;
+    top: -37px;
+    left: 4px;
+    width: 24px;
+}
+
+.liebevoll-jetzt-icon{
+    position: relative;
+    top: -35px;
+    left: 4px;
+    width: 24px;
+}
+
+.staff-snake-icon {
+    position: relative;
+    top: -35px;
+    left: 4px;
+    width: 24px;
+}
+
+.flower-icon {
+    position: relative;
+    top: -35px;
+    left: 4px;
+    width: 24px;
+}
+
+.network-icon {
+    position: relative;
+    top: -35px;
+    left: 4px;
+    width: 24px;
+}
+
+.shop-icon {
+    position: relative;
+    top: -34px;
+    left: 4px;
+    width: 24px;
+}
+
+.plant-icon {
+    position: relative;
+    top: -34px;
+    left: 4px;
+    width: 24px;
+}
+
+.circle-dot-icon {
+    position: relative;
+    top: -36px;
+    left: 4px;
+    width: 24px;
+}
\ No newline at end of file
diff --git a/src/assets/css/masonry.css b/src/assets/css/masonry.css
new file mode 100644
index 00000000..873e8c58
--- /dev/null
+++ b/src/assets/css/masonry.css
@@ -0,0 +1,27 @@
+.masonry {
+    column-count: 1;
+    column-gap: 1.5rem;
+}
+
+.masonry-item {
+    break-inside: avoid;
+    margin-bottom: 1.5rem;
+}
+
+@media (min-width: 640px) {
+    .masonry {
+        column-count: 2;
+    }
+}
+
+@media (min-width: 1024px) {
+    .masonry {
+        column-count: 3;
+    }
+}
+
+@media (min-width: 1536px) {
+    .masonry {
+        column-count: 4;
+    }
+}
\ No newline at end of file
diff --git a/src/assets/css/misc.css b/src/assets/css/misc.css
new file mode 100644
index 00000000..fa6234bb
--- /dev/null
+++ b/src/assets/css/misc.css
@@ -0,0 +1,23 @@
+.fade {
+    mask-image: linear-gradient(180deg, transparent, #000 1%, #000 99%, transparent);
+}
+
+.placeholder-center::placeholder {
+    text-align: center;
+}
+
+input {
+    box-sizing: border-box;
+}
+
+textarea {
+    box-sizing: border-box;
+}
+
+.crosshair-cursor-enabled {
+    cursor: crosshair;
+}
+
+.marker-cluster span {
+    color: #000;
+}
\ No newline at end of file
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
new file mode 100644
index 00000000..0c34187f
--- /dev/null
+++ b/src/assets/css/tailwind.css
@@ -0,0 +1,24 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.tw-modal {
+    z-index: 1200 !important;
+}
+
+.tw-menu li a {
+    border-radius: 10px;
+}
+
+.tw-modal {
+    z-index: 1200 !important;
+    max-height: 100dvh;
+}
+
+.tw-modal-box {
+    max-height: calc(100dvh - 2em);
+}
+
+.tw-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
new file mode 100644
index 00000000..aa235288
--- /dev/null
+++ b/src/assets/css/toastify.css
@@ -0,0 +1,26 @@
+: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__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);
+    margin-left: 1rem;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+    background-color: theme('colors.base-100');
+    color: theme('colors.base-content');
+}
+
+.Toastify__toast-container {
+    z-index: 2001 !important;
+}
+
+.Toastify__toast-container--top-right {
+    top: 4.75em !important;
+}
\ No newline at end of file
diff --git a/src/css.tsx b/src/css.tsx
new file mode 100644
index 00000000..5856b54a
--- /dev/null
+++ b/src/css.tsx
@@ -0,0 +1,15 @@
+import 'leaflet/dist/leaflet.css'
+import 'leaflet.locatecontrol/dist/L.Control.Locate.css'
+import 'react-image-crop/dist/ReactCrop.css'
+import 'react-photo-album/rows.css'
+import 'react-toastify/dist/ReactToastify.css'
+import 'yet-another-react-lightbox/styles.css'
+
+import '#assets/css/tailwind.css'
+import '#assets/css/masonry.css'
+import '#assets/css/toastify.css'
+import '#assets/css/custom-file-upload.css'
+import '#assets/css/misc.css'
+import '#assets/css/marker-icons.css'
+import '#assets/css/leaflet.css'
+import '#assets/css/color-picker.css'
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 0790b43c..00000000
--- a/src/index.css
+++ /dev/null
@@ -1,105 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-.fade {
-  mask-image: linear-gradient(180deg, transparent, #000 1%, #000 99%, transparent);
-}
-
-.tw-modal {
-  z-index: 1200 !important;
-}
-
-.tw-menu li a {
-  border-radius: 10px;
-}
-
-.tw-modal {
-  z-index: 1200 !important;
-  max-height: 100dvh;
-}
-
-.tw-modal-box {
-  max-height: calc(100dvh - 2em);
-}
-
-.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);
-  margin-left: 1rem;
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-  background-color: theme('colors.base-100');
-  color: theme('colors.base-content');
-}
-
-.Toastify__toast-container {
-  z-index: 2001 !important;
-}
-
-.Toastify__toast-container--top-right {
-  top: 4.75em !important;
-}
-
-: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');
-
-}
-
-.placeholder-center::placeholder {
-  text-align: center;
-}
-
-.custom-file-upload {
-  cursor: pointer;
-}
-
-input[type="file"] {
-  display: none;
-}
-
-.custom-file-upload:hover .button {
-  opacity: 0.8;
-}
-
-.custom-file-upload .button {
-  transition: .5s ease;
-  opacity: 0;
-  position: absolute;
-  transform: translate(8px, 8px);
-
-}
-
-.tw-tab-content .container {
-  height: 100%;
-}
-
-.masonry {
-  column-count: 1;
-  column-gap: 1.5rem;
-}
-.masonry-item {
-  break-inside: avoid;
-  margin-bottom: 1.5rem;
-}
-@media (min-width: 640px) {
-  .masonry {
-      column-count: 2;
-  }
-}
-@media (min-width: 1024px) {
-  .masonry {
-      column-count: 3;
-  }
-}
-@media (min-width: 1536px) {
-  .masonry {
-      column-count: 4;
-  }
-}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 0e6c5864..b84d77a2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,5 @@
-import './index.css'
+// eslint-disable-next-line import/no-unassigned-import
+import './css'
 
 export * from './Components/Map'
 export * from './Components/AppShell'