diff --git a/.eslintrc.js b/.eslintrc.js
index d8081e99..7cd0f41f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-commonjs
 module.exports = {
   env: {
     browser: true,
@@ -29,10 +30,12 @@ module.exports = {
     'react-hooks',
   ],
   settings: {
-    // 'import/resolver': {
-    //  typescript: true,
-    //  node: true,
-    // },
+    'import/resolver': {
+      typescript: true,
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
     react: {
       version: 'detect',
     },
@@ -83,13 +86,16 @@ module.exports = {
     'import/no-relative-parent-imports': [
       'error',
       {
-        ignore: [
-          '#[src,root,components,pages,assets,layouts,queries,stores,plugins,context,types]/*',
-        ],
+        ignore: ['#[src,root,components,utils]/*'],
       },
     ],
     'import/no-self-import': 'error',
-    'import/no-unresolved': 'error',
+    'import/no-unresolved': [
+      'error',
+      {
+        ignore: ['react'],
+      },
+    ],
     'import/no-useless-path-segments': 'error',
     'import/no-webpack-loader-syntax': 'error',
     'import/consistent-type-specifier-style': 'error',
diff --git a/package-lock.json b/package-lock.json
index 7f23447e..74187848 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,10 +31,10 @@
       },
       "devDependencies": {
         "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
+        "@types/geojson": "^7946.0.14",
         "@types/leaflet": "^1.7.11",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.0.5",
-        "@types/react-leaflet": "^2.8.2",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
         "autoprefixer": "^10.4.14",
@@ -402,10 +402,11 @@
       }
     },
     "node_modules/@types/geojson": {
-      "version": "7946.0.8",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
-      "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
-      "dev": true
+      "version": "7946.0.14",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
+      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/hast": {
       "version": "3.0.3",
@@ -430,10 +431,11 @@
       "license": "MIT"
     },
     "node_modules/@types/leaflet": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.11.tgz",
-      "integrity": "sha512-VwAYom2pfIAf/pLj1VR5aLltd4tOtHyvfaJlNYCoejzP2nu52PrMi1ehsLRMUS+bgafmIIKBV1cMfKeS+uJ0Vg==",
+      "version": "1.9.14",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.14.tgz",
+      "integrity": "sha512-sx2q6MDJaajwhKeVgPSvqXd8rhNJSTA3tMidQGduZn9S6WBYxDkCpSpV5xXEmSg7Cgdk/5vJGhVF1kMYLzauBg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/geojson": "*"
       }
@@ -479,16 +481,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-leaflet": {
-      "version": "2.8.2",
-      "resolved": "https://registry.npmjs.org/@types/react-leaflet/-/react-leaflet-2.8.2.tgz",
-      "integrity": "sha512-Iel8Vd1bSCD38Yhiqcmm/+9hjPEdd39LFE3tBMbOytq3QAQsC3LDrbo6ifoh8JbpqPbCsQPo9Wx5OELHixEShg==",
-      "dev": true,
-      "dependencies": {
-        "@types/leaflet": "*",
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/semver": {
       "version": "7.5.8",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
diff --git a/package.json b/package.json
index b1ff997d..825bc7b7 100644
--- a/package.json
+++ b/package.json
@@ -19,10 +19,10 @@
   "license": "GPL-3.0-only",
   "devDependencies": {
     "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
+    "@types/geojson": "^7946.0.14",
     "@types/leaflet": "^1.7.11",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.0.5",
-    "@types/react-leaflet": "^2.8.2",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "autoprefixer": "^10.4.14",
@@ -71,5 +71,11 @@
     "remark-breaks": "^4.0.0",
     "tributejs": "^5.1.3",
     "tw-elements": "^1.0.0"
+  },
+  "imports": {
+    "#components/*": "./src/Components/*",
+    "#utils/*": "./src/Utils/*",
+    "#src/*": "./src/*",
+    "#root/*": "./*"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091d..90005359 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-commonjs
 module.exports = {
   plugins: {
     tailwindcss: {},
diff --git a/src/Components/AppShell/AppShell.tsx b/src/Components/AppShell/AppShell.tsx
index 3d5acebc..3f8746d0 100644
--- a/src/Components/AppShell/AppShell.tsx
+++ b/src/Components/AppShell/AppShell.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react'
+import { AssetsApi } from '#src/types'
+
+import { ContextWrapper } from './ContextWrapper'
 import NavBar from './NavBar'
 import { SetAppState } from './SetAppState'
-import { AssetsApi } from '../../types'
-import { ContextWrapper } from './ContextWrapper'
 
 export function AppShell({
   appName,
diff --git a/src/Components/AppShell/Content.tsx b/src/Components/AppShell/Content.tsx
index de30e296..28ed522f 100644
--- a/src/Components/AppShell/Content.tsx
+++ b/src/Components/AppShell/Content.tsx
@@ -1,6 +1,4 @@
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
-import * as React from 'react'
-
 type ContentProps = {
   children?: React.ReactNode
 }
diff --git a/src/Components/AppShell/ContextWrapper.tsx b/src/Components/AppShell/ContextWrapper.tsx
index 69bd6a1a..858834e6 100644
--- a/src/Components/AppShell/ContextWrapper.tsx
+++ b/src/Components/AppShell/ContextWrapper.tsx
@@ -1,18 +1,20 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ToastContainer } from 'react-toastify'
-import { QuestsProvider } from '../Gaming/hooks/useQuests'
-import { ClusterRefProvider } from '../Map/hooks/useClusterRef'
-import { FilterProvider } from '../Map/hooks/useFilter'
-import { ItemsProvider } from '../Map/hooks/useItems'
-import { LayersProvider } from '../Map/hooks/useLayers'
-import { LeafletRefsProvider } from '../Map/hooks/useLeafletRefs'
-import { PermissionsProvider } from '../Map/hooks/usePermissions'
-import { SelectPositionProvider } from '../Map/hooks/useSelectPosition'
-import { TagsProvider } from '../Map/hooks/useTags'
-import { AppStateProvider } from './hooks/useAppState'
 import { useContext, createContext } from 'react'
 import { BrowserRouter as Router, useLocation } from 'react-router-dom'
+import { ToastContainer } from 'react-toastify'
+
+import { QuestsProvider } from '#components/Gaming/hooks/useQuests'
+import { ClusterRefProvider } from '#components/Map/hooks/useClusterRef'
+import { FilterProvider } from '#components/Map/hooks/useFilter'
+import { ItemsProvider } from '#components/Map/hooks/useItems'
+import { LayersProvider } from '#components/Map/hooks/useLayers'
+import { LeafletRefsProvider } from '#components/Map/hooks/useLeafletRefs'
+import { PermissionsProvider } from '#components/Map/hooks/usePermissions'
+import { SelectPositionProvider } from '#components/Map/hooks/useSelectPosition'
+import { TagsProvider } from '#components/Map/hooks/useTags'
+
+import { AppStateProvider } from './hooks/useAppState'
 
 // Helper context to determine if the ContextWrapper is already present.
 const ContextCheckContext = createContext(false)
diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx
index 56355b39..1ea55767 100644
--- a/src/Components/AppShell/NavBar.tsx
+++ b/src/Components/AppShell/NavBar.tsx
@@ -9,13 +9,14 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-import { useAuth } from '../Auth'
-import { Link, useLocation } from 'react-router-dom'
-import { toast } from 'react-toastify'
 import QuestionMarkIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon'
 import { useEffect, useRef, useState } from 'react'
-import { useItems } from '../Map/hooks/useItems'
-import { Item } from '../../types'
+import { Link, useLocation } from 'react-router-dom'
+import { toast } from 'react-toastify'
+
+import { useAuth } from '#components/Auth'
+import { useItems } from '#components/Map/hooks/useItems'
+import { Item } from '#src/types'
 
 export default function NavBar({ appName, userType }: { appName: string; userType: string }) {
   const { isAuthenticated, user, logout } = useAuth()
diff --git a/src/Components/AppShell/SetAppState.tsx b/src/Components/AppShell/SetAppState.tsx
index fb0275de..b7831ac2 100644
--- a/src/Components/AppShell/SetAppState.tsx
+++ b/src/Components/AppShell/SetAppState.tsx
@@ -1,7 +1,9 @@
-import { useSetAppState } from './hooks/useAppState'
-import { AssetsApi } from '../../types'
 import { useEffect } from 'react'
 
+import { AssetsApi } from '#src/types'
+
+import { useSetAppState } from './hooks/useAppState'
+
 export const SetAppState = ({
   assetsApi,
   userType,
diff --git a/src/Components/AppShell/SideBar.tsx b/src/Components/AppShell/SideBar.tsx
index 13aa05c2..1525157a 100644
--- a/src/Components/AppShell/SideBar.tsx
+++ b/src/Components/AppShell/SideBar.tsx
@@ -5,12 +5,12 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
+import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon'
 import { useRef, useState, useEffect } from 'react'
 import { NavLink, useLocation } from 'react-router-dom'
 import { Sidenav, initTE } from 'tw-elements'
+
 import SidebarSubmenu from './SidebarSubmenu'
-import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon'
-import * as React from 'react'
 
 type route = {
   path: string
diff --git a/src/Components/AppShell/Sitemap.tsx b/src/Components/AppShell/Sitemap.tsx
index 1e8274bd..61d97abc 100644
--- a/src/Components/AppShell/Sitemap.tsx
+++ b/src/Components/AppShell/Sitemap.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 import { useEffect, useState } from 'react'
-import { useItems } from '../Map/hooks/useItems'
+
+import { useItems } from '#components/Map/hooks/useItems'
 
 export const Sitemap = ({ url }: { url: string }) => {
   const [sitemap, setSitemap] = useState('')
diff --git a/src/Components/AppShell/hooks/useAppState.tsx b/src/Components/AppShell/hooks/useAppState.tsx
index 26835d77..053d23b7 100644
--- a/src/Components/AppShell/hooks/useAppState.tsx
+++ b/src/Components/AppShell/hooks/useAppState.tsx
@@ -1,7 +1,8 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { useCallback, useState, createContext, useContext } from 'react'
-import * as React from 'react'
-import { AssetsApi } from '../../../types'
+
+import { AssetsApi } from '#src/types'
 
 interface AppState {
   assetsApi: AssetsApi
diff --git a/src/Components/AppShell/hooks/useAssets.tsx b/src/Components/AppShell/hooks/useAssets.tsx
index 276773ab..08f4a4e4 100644
--- a/src/Components/AppShell/hooks/useAssets.tsx
+++ b/src/Components/AppShell/hooks/useAssets.tsx
@@ -1,8 +1,9 @@
+/* eslint-disable react/prop-types */
+
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { useCallback, useState, createContext, useContext } from 'react'
 
-import * as React from 'react'
-import { AssetsApi } from '../../../types'
+import { AssetsApi } from '#src/types'
 
 type UseAssetManagerResult = ReturnType<typeof useAssetsManager>
 
diff --git a/src/Components/Auth/LoginPage.tsx b/src/Components/Auth/LoginPage.tsx
index 6c9f7fd5..73ab2fb0 100644
--- a/src/Components/Auth/LoginPage.tsx
+++ b/src/Components/Auth/LoginPage.tsx
@@ -6,8 +6,10 @@
 import { useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
+
+import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
+
 import { useAuth } from './useAuth'
-import { MapOverlayPage } from '../Templates'
 
 export function LoginPage() {
   const [email, setEmail] = useState<string>('')
diff --git a/src/Components/Auth/RequestPasswordPage.tsx b/src/Components/Auth/RequestPasswordPage.tsx
index fd1f25b6..043f0e96 100644
--- a/src/Components/Auth/RequestPasswordPage.tsx
+++ b/src/Components/Auth/RequestPasswordPage.tsx
@@ -4,8 +4,10 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
+
+import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
+
 import { useAuth } from './useAuth'
-import { MapOverlayPage } from '../Templates'
 
 // eslint-disable-next-line react/prop-types
 export function RequestPasswordPage({ resetUrl }) {
diff --git a/src/Components/Auth/SetNewPasswordPage.tsx b/src/Components/Auth/SetNewPasswordPage.tsx
index 9e35560c..529bffa8 100644
--- a/src/Components/Auth/SetNewPasswordPage.tsx
+++ b/src/Components/Auth/SetNewPasswordPage.tsx
@@ -2,10 +2,11 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-
 import { toast } from 'react-toastify'
+
+import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
+
 import { useAuth } from './useAuth'
-import { MapOverlayPage } from '../Templates'
 
 export function SetNewPasswordPage() {
   const [password, setPassword] = useState<string>('')
diff --git a/src/Components/Auth/SignupPage.tsx b/src/Components/Auth/SignupPage.tsx
index 484a8262..82f5bbf0 100644
--- a/src/Components/Auth/SignupPage.tsx
+++ b/src/Components/Auth/SignupPage.tsx
@@ -5,10 +5,11 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-
 import { toast } from 'react-toastify'
+
+import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
+
 import { useAuth } from './useAuth'
-import { MapOverlayPage } from '../Templates'
 
 export function SignupPage() {
   const [email, setEmail] = useState<string>('')
diff --git a/src/Components/Auth/useAuth.tsx b/src/Components/Auth/useAuth.tsx
index b51f8449..5e2a6755 100644
--- a/src/Components/Auth/useAuth.tsx
+++ b/src/Components/Auth/useAuth.tsx
@@ -6,8 +6,8 @@
 /* eslint-disable @typescript-eslint/no-floating-promises */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { createContext, useState, useContext, useEffect } from 'react'
-import * as React from 'react'
-import { UserApi, UserItem } from '../../types'
+
+import { UserApi, UserItem } from '#src/types'
 
 interface AuthProviderProps {
   userApi: UserApi
diff --git a/src/Components/Gaming/Modal.tsx b/src/Components/Gaming/Modal.tsx
index f6372551..7d83ac5a 100644
--- a/src/Components/Gaming/Modal.tsx
+++ b/src/Components/Gaming/Modal.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import * as React from 'react'
 import { useEffect } from 'react'
 
 export function Modal({
diff --git a/src/Components/Gaming/Quests.tsx b/src/Components/Gaming/Quests.tsx
index 35cdcab3..35415762 100644
--- a/src/Components/Gaming/Quests.tsx
+++ b/src/Components/Gaming/Quests.tsx
@@ -1,9 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { useQuestsOpen, useSetQuestOpen } from './hooks/useQuests'
-import { useAuth } from '../Auth'
 import { useEffect, useState } from 'react'
-import { useItems } from '../Map/hooks/useItems'
-import { Item } from '../../types'
+
+import { useAuth } from '#components/Auth'
+import { useItems } from '#components/Map/hooks/useItems'
+import { Item } from '#src/types'
+
+import { useQuestsOpen, useSetQuestOpen } from './hooks/useQuests'
 
 export function Quests() {
   const questsOpen = useQuestsOpen()
diff --git a/src/Components/Gaming/hooks/useQuests.tsx b/src/Components/Gaming/hooks/useQuests.tsx
index 569d431c..336d7a8f 100644
--- a/src/Components/Gaming/hooks/useQuests.tsx
+++ b/src/Components/Gaming/hooks/useQuests.tsx
@@ -1,6 +1,6 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { useCallback, useState, createContext, useContext } from 'react'
-import * as React from 'react'
 
 type UseQuestManagerResult = ReturnType<typeof useQuestsManager>
 
diff --git a/src/Components/Input/Autocomplete.tsx b/src/Components/Input/Autocomplete.tsx
index 39013c6b..6dc4bdde 100644
--- a/src/Components/Input/Autocomplete.tsx
+++ b/src/Components/Input/Autocomplete.tsx
@@ -5,9 +5,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import * as React from 'react'
-import { useEffect } from 'react'
-import { TagView } from '../Templates/TagView'
+import { useEffect, useRef, useState } from 'react'
+
+import { TagView } from '#components/Templates/TagView'
 
 export const Autocomplete = ({
   inputProps,
@@ -22,8 +22,8 @@ export const Autocomplete = ({
   pushFilteredSuggestions?: any[]
   setFocus?: boolean
 }) => {
-  const [filteredSuggestions, setFilteredSuggestions] = React.useState<any[]>([])
-  const [heighlightedSuggestion, setHeighlightedSuggestion] = React.useState<number>(0)
+  const [filteredSuggestions, setFilteredSuggestions] = useState<any[]>([])
+  const [heighlightedSuggestion, setHeighlightedSuggestion] = useState<number>(0)
 
   useEffect(() => {
     pushFilteredSuggestions && setFilteredSuggestions(pushFilteredSuggestions)
@@ -33,7 +33,7 @@ export const Autocomplete = ({
     setFocus && inputRef.current?.focus()
   }, [setFocus])
 
-  const inputRef = React.useRef<HTMLInputElement>()
+  const inputRef = useRef<HTMLInputElement>()
 
   const getSuggestionValue = (suggestion) => suggestion.name
 
diff --git a/src/Components/Input/ComboBoxInput.tsx b/src/Components/Input/ComboBoxInput.tsx
index 3491102d..b6712a93 100644
--- a/src/Components/Input/ComboBoxInput.tsx
+++ b/src/Components/Input/ComboBoxInput.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 interface ComboBoxProps {
   id?: string
   options: string[]
diff --git a/src/Components/Input/SelectBox.tsx b/src/Components/Input/SelectBox.tsx
index aed5e04b..5fe6cff7 100644
--- a/src/Components/Input/SelectBox.tsx
+++ b/src/Components/Input/SelectBox.tsx
@@ -1,8 +1,7 @@
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import { useState } from 'react'
 import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon'
-import * as React from 'react'
+import { useState } from 'react'
 
 type SelectBoxProps = {
   labelTitle?: string
diff --git a/src/Components/Input/TextAreaInput.tsx b/src/Components/Input/TextAreaInput.tsx
index 03593d2f..91642f0e 100644
--- a/src/Components/Input/TextAreaInput.tsx
+++ b/src/Components/Input/TextAreaInput.tsx
@@ -2,10 +2,10 @@
 /* eslint-disable @typescript-eslint/consistent-indexed-object-style */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
-import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import Tribute from 'tributejs'
-import { useTags } from '../Map/hooks/useTags'
+
+import { useTags } from '#components/Map/hooks/useTags'
 
 type TextAreaProps = {
   labelTitle?: string
diff --git a/src/Components/Input/TextInput.tsx b/src/Components/Input/TextInput.tsx
index aa248c7c..0ab98c15 100644
--- a/src/Components/Input/TextInput.tsx
+++ b/src/Components/Input/TextInput.tsx
@@ -2,7 +2,6 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 import { useEffect, useState } from 'react'
-import * as React from 'react'
 
 type InputTextProps = {
   labelTitle?: string
diff --git a/src/Components/Map/ItemForm.tsx b/src/Components/Map/ItemForm.tsx
index 282a191c..91cf08a7 100644
--- a/src/Components/Map/ItemForm.tsx
+++ b/src/Components/Map/ItemForm.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react'
-import { Item } from '../../types'
-import * as PropTypes from 'prop-types'
-import { useEffect } from 'react'
+import { node, string } from 'prop-types'
+import { Children, cloneElement, isValidElement, useEffect } from 'react'
+
+import { Item } from '#src/types'
 
 export const ItemForm = ({
   children,
@@ -23,9 +23,9 @@ export const ItemForm = ({
   return (
     <div>
       {children
-        ? React.Children.toArray(children).map((child) =>
-            React.isValidElement<{ item: Item; test: string }>(child)
-              ? React.cloneElement(child, { item, test: 'test' })
+        ? Children.toArray(children).map((child) =>
+            isValidElement<{ item: Item; test: string }>(child)
+              ? cloneElement(child, { item, test: 'test' })
               : '',
           )
         : ''}
@@ -34,8 +34,8 @@ export const ItemForm = ({
 }
 
 ItemForm.propTypes = {
-  children: PropTypes.node,
-  __TYPE: PropTypes.string,
+  children: node,
+  __TYPE: string,
 }
 
 ItemForm.defaultProps = {
diff --git a/src/Components/Map/ItemView.tsx b/src/Components/Map/ItemView.tsx
index de3e9a61..fe4f0d18 100644
--- a/src/Components/Map/ItemView.tsx
+++ b/src/Components/Map/ItemView.tsx
@@ -1,13 +1,14 @@
-import * as React from 'react'
-import { Item } from '../../types'
-import * as PropTypes from 'prop-types'
+import { node, string } from 'prop-types'
+import { Children, cloneElement, isValidElement } from 'react'
+
+import { Item } from '#src/types'
 
 export const ItemView = ({ children, item }: { children?: React.ReactNode; item?: Item }) => {
   return (
     <div>
       {children
-        ? React.Children.toArray(children).map((child) =>
-            React.isValidElement<{ item: Item }>(child) ? React.cloneElement(child, { item }) : '',
+        ? Children.toArray(children).map((child) =>
+            isValidElement<{ item: Item }>(child) ? cloneElement(child, { item }) : '',
           )
         : ''}
     </div>
@@ -15,8 +16,8 @@ export const ItemView = ({ children, item }: { children?: React.ReactNode; item?
 }
 
 ItemView.propTypes = {
-  children: PropTypes.node,
-  __TYPE: PropTypes.string,
+  children: node,
+  __TYPE: string,
 }
 
 ItemView.defaultProps = {
diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx
index 5a290b5f..4d09b729 100644
--- a/src/Components/Map/Layer.tsx
+++ b/src/Components/Map/Layer.tsx
@@ -7,29 +7,30 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import * as React from 'react'
+import { Popup } from 'leaflet'
+import { Children, isValidElement, useEffect, useState } from 'react'
 import { Marker, Tooltip, useMap, useMapEvents } from 'react-leaflet'
-import { Item, LayerProps, Tag } from '../../types'
-import MarkerIconFactory from '../../Utils/MarkerIconFactory'
-import { ItemViewPopup } from './Subcomponents/ItemViewPopup'
-import { useAllItemsLoaded, useItems, useSetItemsApi, useSetItemsData } from './hooks/useItems'
-import { useEffect, useState } from 'react'
-import { ItemFormPopup } from './Subcomponents/ItemFormPopup'
+import { useLocation } from 'react-router-dom'
+
+import { Item, LayerProps, Tag } from '#src/types'
+import { encodeTag } from '#utils/FormatTags'
+import { getValue } from '#utils/GetValue'
+import { hashTagRegex } from '#utils/HashTagRegex'
+import MarkerIconFactory from '#utils/MarkerIconFactory'
+import { randomColor } from '#utils/RandomColor'
+
 import {
   useFilterTags,
   useIsGroupTypeVisible,
   useIsLayerVisible,
   useVisibleGroupType,
 } from './hooks/useFilter'
-import { useAddTag, useAllTagsLoaded, useGetItemTags, useTags } from './hooks/useTags'
+import { useAllItemsLoaded, useItems, useSetItemsApi, useSetItemsData } from './hooks/useItems'
 import { useAddMarker, useAddPopup, useLeafletRefs } from './hooks/useLeafletRefs'
-import { Popup } from 'leaflet'
-import { useLocation } from 'react-router-dom'
-import { getValue } from '../../Utils/GetValue'
-import { hashTagRegex } from '../../Utils/HashTagRegex'
-import { randomColor } from '../../Utils/RandomColor'
-import { encodeTag } from '../../Utils/FormatTags'
 import { useSelectPosition, useSetMarkerClicked } from './hooks/useSelectPosition'
+import { useAddTag, useAllTagsLoaded, useGetItemTags, useTags } from './hooks/useTags'
+import { ItemFormPopup } from './Subcomponents/ItemFormPopup'
+import { ItemViewPopup } from './Subcomponents/ItemViewPopup'
 
 export const Layer = ({
   data,
@@ -335,11 +336,11 @@ export const Layer = ({
                   position={[latitude, longitude]}
                 >
                   {children &&
-                  React.Children.toArray(children).some(
-                    (child) => React.isValidElement(child) && child.props.__TYPE === 'ItemView',
+                  Children.toArray(children).some(
+                    (child) => isValidElement(child) && child.props.__TYPE === 'ItemView',
                   ) ? (
-                    React.Children.toArray(children).map((child) =>
-                      React.isValidElement(child) && child.props.__TYPE === 'ItemView' ? (
+                    Children.toArray(children).map((child) =>
+                      isValidElement(child) && child.props.__TYPE === 'ItemView' ? (
                         <ItemViewPopup
                           ref={(r) => {
                             if (!(item.id in leafletRefs && leafletRefs[item.id].popup === r)) {
@@ -383,11 +384,11 @@ export const Layer = ({
       {itemFormPopup &&
         itemFormPopup.layer.name === name &&
         (children &&
-        React.Children.toArray(children).some(
-          (child) => React.isValidElement(child) && child.props.__TYPE === 'ItemForm',
+        Children.toArray(children).some(
+          (child) => isValidElement(child) && child.props.__TYPE === 'ItemForm',
         ) ? (
-          React.Children.toArray(children).map((child) =>
-            React.isValidElement(child) && child.props.__TYPE === 'ItemForm' ? (
+          Children.toArray(children).map((child) =>
+            isValidElement(child) && child.props.__TYPE === 'ItemForm' ? (
               <ItemFormPopup
                 key={setItemFormPopup?.name}
                 position={itemFormPopup.position}
diff --git a/src/Components/Map/Permissions.tsx b/src/Components/Map/Permissions.tsx
index f5555c71..5b40bd77 100644
--- a/src/Components/Map/Permissions.tsx
+++ b/src/Components/Map/Permissions.tsx
@@ -1,8 +1,9 @@
-import * as React from 'react'
 import { useEffect } from 'react'
-import { ItemsApi, Permission } from '../../types'
+
+import { useAuth } from '#components/Auth'
+import { ItemsApi, Permission } from '#src/types'
+
 import { useSetPermissionData, useSetPermissionApi, useSetAdminRole } from './hooks/usePermissions'
-import { useAuth } from '../Auth'
 
 export function Permissions({
   data,
diff --git a/src/Components/Map/Subcomponents/AddButton.tsx b/src/Components/Map/Subcomponents/AddButton.tsx
index de6235c2..3ab07683 100644
--- a/src/Components/Map/Subcomponents/AddButton.tsx
+++ b/src/Components/Map/Subcomponents/AddButton.tsx
@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import * as React from 'react'
-import { useLayers } from '../hooks/useLayers'
-import { useHasUserPermission } from '../hooks/usePermissions'
+import { useLayers } from '#components/Map/hooks/useLayers'
+import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
 
 export default function AddButton({
   triggerAction,
diff --git a/src/Components/Map/Subcomponents/Controls/Control.tsx b/src/Components/Map/Subcomponents/Controls/Control.tsx
index 91c1125a..3587a8be 100644
--- a/src/Components/Map/Subcomponents/Controls/Control.tsx
+++ b/src/Components/Map/Subcomponents/Controls/Control.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import * as L from 'leaflet'
-import * as React from 'react'
+import { DomEvent } from 'leaflet'
+import { createRef, useEffect } from 'react'
 
 export const Control = ({
   position,
@@ -13,12 +13,12 @@ export const Control = ({
   zIndex: string
   absolute: boolean
 }) => {
-  const controlContainerRef = React.createRef<HTMLDivElement>()
+  const controlContainerRef = createRef<HTMLDivElement>()
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (controlContainerRef.current !== null) {
-      L.DomEvent.disableClickPropagation(controlContainerRef.current)
-      L.DomEvent.disableScrollPropagation(controlContainerRef.current)
+      DomEvent.disableClickPropagation(controlContainerRef.current)
+      DomEvent.disableScrollPropagation(controlContainerRef.current)
     }
   }, [controlContainerRef])
 
diff --git a/src/Components/Map/Subcomponents/Controls/FilterControl.tsx b/src/Components/Map/Subcomponents/Controls/FilterControl.tsx
index e3326056..bcafe457 100644
--- a/src/Components/Map/Subcomponents/Controls/FilterControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/FilterControl.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react'
+import { useEffect } from 'react'
+
 import {
   useAddVisibleGroupType,
   useIsGroupTypeVisible,
   useToggleVisibleGroupType,
   useVisibleGroupType,
-} from '../../hooks/useFilter'
-import { useEffect } from 'react'
+} from '#components/Map/hooks/useFilter'
 
 export function FilterControl() {
   const [open, setOpen] = React.useState(false)
diff --git a/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx b/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx
index 2f129cc2..873c06e1 100644
--- a/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx
@@ -1,5 +1,6 @@
 import { useNavigate } from 'react-router-dom'
-import { useAuth } from '../../../Auth'
+
+import { useAuth } from '#components/Auth'
 
 export const GratitudeControl = () => {
   const navigate = useNavigate()
diff --git a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
index 77cf07af..421d0c1a 100644
--- a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
@@ -1,9 +1,10 @@
-import * as React from 'react'
-import { useLayers } from '../../hooks/useLayers'
-import { useIsLayerVisible, useToggleVisibleLayer } from '../../hooks/useFilter'
+import { useState } from 'react'
+
+import { useIsLayerVisible, useToggleVisibleLayer } from '#components/Map/hooks/useFilter'
+import { useLayers } from '#components/Map/hooks/useLayers'
 
 export function LayerControl() {
-  const [open, setOpen] = React.useState(false)
+  const [open, setOpen] = useState(false)
 
   const layers = useLayers()
 
diff --git a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
index e3920979..d0eeec4a 100644
--- a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
@@ -4,12 +4,13 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import * as L from 'leaflet'
-import { useMap, useMapEvents } from 'react-leaflet'
-import 'leaflet.locatecontrol'
-
-import 'leaflet.locatecontrol/dist/L.Control.Locate.css'
+import { control } from 'leaflet'
 import { useEffect, useRef, useState } from 'react'
+import { useMap, useMapEvents } from 'react-leaflet'
+// eslint-disable-next-line import/no-unassigned-import
+import 'leaflet.locatecontrol'
+// eslint-disable-next-line import/no-unassigned-import
+import 'leaflet.locatecontrol/dist/L.Control.Locate.css'
 
 // Converts leaflet.locatecontrol to a React Component
 export const LocateControl = () => {
@@ -25,7 +26,7 @@ export const LocateControl = () => {
   useEffect(() => {
     if (!init.current) {
       // @ts-ignore
-      setLc(L.control.locate().addTo(map))
+      setLc(control.locate().addTo(map))
       init.current = true
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/src/Components/Map/Subcomponents/Controls/QuestControl.tsx b/src/Components/Map/Subcomponents/Controls/QuestControl.tsx
index 80078f68..1ebd60c2 100644
--- a/src/Components/Map/Subcomponents/Controls/QuestControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/QuestControl.tsx
@@ -1,5 +1,4 @@
-import * as React from 'react'
-import { useQuestsOpen, useSetQuestOpen } from '../../../Gaming/hooks/useQuests'
+import { useQuestsOpen, useSetQuestOpen } from '#components/Gaming/hooks/useQuests'
 
 export function QuestControl() {
   const questsOpen = useQuestsOpen()
diff --git a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
index 1ff35787..88022721 100644
--- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
@@ -10,24 +10,24 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import * as React from 'react'
-import { useAddFilterTag } from '../../hooks/useFilter'
-import useWindowDimensions from '../../hooks/useWindowDimension'
 import axios from 'axios'
+import { LatLng, LatLngBounds, marker } from 'leaflet'
 import { useEffect, useRef, useState } from 'react'
 import { useMap, useMapEvents } from 'react-leaflet'
-import { LatLng, LatLngBounds } from 'leaflet'
-import { useDebounce } from '../../hooks/useDebounce'
-import { useTags } from '../../hooks/useTags'
-import { useItems } from '../../hooks/useItems'
-import { useLeafletRefs } from '../../hooks/useLeafletRefs'
-import { getValue } from '../../../../Utils/GetValue'
-import { LocateControl } from './LocateControl'
-import * as L from 'leaflet'
-import MarkerIconFactory from '../../../../Utils/MarkerIconFactory'
-import { decodeTag } from '../../../../Utils/FormatTags'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { Item } from '../../../../types'
+
+import { useDebounce } from '#components/Map/hooks/useDebounce'
+import { useAddFilterTag } from '#components/Map/hooks/useFilter'
+import { useItems } from '#components/Map/hooks/useItems'
+import { useLeafletRefs } from '#components/Map/hooks/useLeafletRefs'
+import { useTags } from '#components/Map/hooks/useTags'
+import useWindowDimensions from '#components/Map/hooks/useWindowDimension'
+import { Item } from '#src/types'
+import { decodeTag } from '#utils/FormatTags'
+import { getValue } from '#utils/GetValue'
+import MarkerIconFactory from '#utils/MarkerIconFactory'
+
+import { LocateControl } from './LocateControl'
 import { SidebarControl } from './SidebarControl'
 
 export const SearchControl = () => {
@@ -206,7 +206,7 @@ export const SearchControl = () => {
                   key={Math.random()}
                   onClick={() => {
                     searchInput.current?.blur()
-                    L.marker(new LatLng(geo.geometry.coordinates[1], geo.geometry.coordinates[0]), {
+                    marker(new LatLng(geo.geometry.coordinates[1], geo.geometry.coordinates[0]), {
                       icon: MarkerIconFactory('circle', '#777', 'RGBA(35, 31, 32, 0.2)', 'point'),
                     })
                       .addTo(map)
@@ -272,7 +272,7 @@ export const SearchControl = () => {
                 <div
                   className='tw-flex tw-flex-row hover:tw-font-bold tw-cursor-pointer'
                   onClick={() => {
-                    L.marker(
+                    marker(
                       new LatLng(extractCoordinates(value)![0], extractCoordinates(value)![1]),
                       {
                         icon: MarkerIconFactory('circle', '#777', 'RGBA(35, 31, 32, 0.2)', 'point'),
diff --git a/src/Components/Map/Subcomponents/Controls/TagsControl.tsx b/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
index 0f823769..a4bfa859 100644
--- a/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
@@ -1,6 +1,5 @@
-import * as React from 'react'
-import { useFilterTags, useRemoveFilterTag } from '../../hooks/useFilter'
-import { decodeTag } from '../../../../Utils/FormatTags'
+import { useFilterTags, useRemoveFilterTag } from '#components/Map/hooks/useFilter'
+import { decodeTag } from '#utils/FormatTags'
 
 export const TagsControl = () => {
   const filterTags = useFilterTags()
diff --git a/src/Components/Map/Subcomponents/ItemFormPopup.tsx b/src/Components/Map/Subcomponents/ItemFormPopup.tsx
index 65bf111e..bb4f841a 100644
--- a/src/Components/Map/Subcomponents/ItemFormPopup.tsx
+++ b/src/Components/Map/Subcomponents/ItemFormPopup.tsx
@@ -7,28 +7,19 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import * as React from 'react'
-import { LatLng } from 'leaflet'
+import { Children, cloneElement, isValidElement, useEffect, useRef, useState } from 'react'
 import { Popup as LeafletPopup, useMap } from 'react-leaflet'
-import { useEffect, useRef, useState } from 'react'
-import { useAddItem, useItems, useRemoveItem, useUpdateItem } from '../hooks/useItems'
-import { Geometry, LayerProps, Item } from '../../../types'
-import { TextAreaInput } from '../../Input/TextAreaInput'
-import { TextInput } from '../../Input/TextInput'
 import { toast } from 'react-toastify'
-import { useResetFilterTags } from '../hooks/useFilter'
-import { hashTagRegex } from '../../../Utils/HashTagRegex'
-import { randomColor } from '../../../Utils/RandomColor'
-import { useAddTag, useTags } from '../hooks/useTags'
-import { useAuth } from '../../Auth'
 
-export interface ItemFormPopupProps {
-  position: LatLng
-  layer: LayerProps
-  item?: Item
-  children?: React.ReactNode
-  setItemFormPopup?: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>
-}
+import { useAuth } from '#components/Auth/useAuth'
+import { TextAreaInput } from '#components/Input/TextAreaInput'
+import { TextInput } from '#components/Input/TextInput'
+import { useResetFilterTags } from '#components/Map/hooks/useFilter'
+import { useAddItem, useItems, useRemoveItem, useUpdateItem } from '#components/Map/hooks/useItems'
+import { useAddTag, useTags } from '#components/Map/hooks/useTags'
+import { Geometry, Item, ItemFormPopupProps } from '#src/types'
+import { hashTagRegex } from '#utils/HashTagRegex'
+import { randomColor } from '#utils/RandomColor'
 
 export function ItemFormPopup(props: ItemFormPopupProps) {
   const [spinner, setSpinner] = useState(false)
@@ -168,13 +159,13 @@ export function ItemFormPopup(props: ItemFormPopupProps) {
         )}
 
         {props.children ? (
-          React.Children.toArray(props.children).map((child) =>
-            React.isValidElement<{
+          Children.toArray(props.children).map((child) =>
+            isValidElement<{
               item: Item
               test: string
               setPopupTitle: React.Dispatch<React.SetStateAction<string>>
             }>(child)
-              ? React.cloneElement(child, {
+              ? cloneElement(child, {
                   item: props.item,
                   key: props.position.toString(),
                   setPopupTitle,
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
index 4257e144..71c637b2 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
@@ -9,14 +9,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import * as React from 'react'
-import { Item, ItemsApi } from '../../../../types'
-import { useHasUserPermission } from '../../hooks/usePermissions'
-import { getValue } from '../../../../Utils/GetValue'
-import { useAppState } from '../../../AppShell/hooks/useAppState'
-import DialogModal from '../../../Templates/DialogModal'
+import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
+import { useAppState } from '#components/AppShell/hooks/useAppState'
+import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
+import DialogModal from '#components/Templates/DialogModal'
+import { Item, ItemsApi } from '#src/types'
+import { getValue } from '#utils/GetValue'
+
 export function HeaderView({
   item,
   api,
@@ -48,7 +49,7 @@ export function HeaderView({
   truncateSubname?: boolean
   showAddress?: boolean
 }) {
-  const [modalOpen, setModalOpen] = React.useState<boolean>(false)
+  const [modalOpen, setModalOpen] = useState<boolean>(false)
 
   const hasUserPermission = useHasUserPermission()
   const navigate = useNavigate()
@@ -72,7 +73,7 @@ export function HeaderView({
     ? getValue(item, itemSubnameField)
     : item.layer?.itemSubnameField && item && getValue(item, item.layer.itemSubnameField)
 
-  const [address] = React.useState<string>('')
+  const [address] = useState<string>('')
 
   const params = new URLSearchParams(window.location.search)
 
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx
index 965f0317..8ba9bb63 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx
@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 import { Link } from 'react-router-dom'
-import { getValue } from '../../../../Utils/GetValue'
-import { Item } from '../../../../types'
-import { useGetItemTags } from '../../hooks/useTags'
+
+import { useGetItemTags } from '#components/Map/hooks/useTags'
+import { Item } from '#src/types'
+import { getValue } from '#utils/GetValue'
 
 export const PopupButton = ({
   url,
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx
index 7e3655cf..64c3eb61 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx
@@ -1,4 +1,4 @@
-import { Item } from '../../../../types'
+import { Item } from '#src/types'
 
 export const PopupCheckboxInput = ({
   dataField,
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
index 2c11baf3..f46ce126 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
-import * as React from 'react'
-import { TextInput } from '../../../Input'
-import { Item } from '../../../../types'
+import { TextInput } from '#components/Input'
+import { Item } from '#src/types'
 
 interface StartEndInputProps {
   item?: Item
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx
index b1f8e28b..6f8fabf2 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx
@@ -1,6 +1,5 @@
-import * as React from 'react'
-import { TextAreaInput } from '../../../Input'
-import { Item } from '../../../../types'
+import { TextAreaInput } from '#components/Input'
+import { Item } from '#src/types'
 
 export const PopupTextAreaInput = ({
   dataField,
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx
index ae527f3f..df72cbed 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx
@@ -1,6 +1,5 @@
-import * as React from 'react'
-import { TextInput } from '../../../Input'
-import { Item } from '../../../../types'
+import { TextInput } from '#components/Input'
+import { Item } from '#src/types'
 
 export const PopupTextInput = ({
   dataField,
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx
index f216d6e5..4496535f 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
-import * as React from 'react'
-import { Item } from '../../../../types'
+import { Item } from '#src/types'
 
 export const StartEndView = ({ item }: { item?: Item }) => {
   return (
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
index 56994c4c..8ba7f09b 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
@@ -7,16 +7,17 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import { Item } from '../../../../types'
-import { useTags } from '../../hooks/useTags'
-import { useAddFilterTag } from '../../hooks/useFilter'
-import { hashTagRegex } from '../../../../Utils/HashTagRegex'
-import { fixUrls, mailRegex } from '../../../../Utils/ReplaceURLs'
-import Markdown from 'react-markdown'
-import { getValue } from '../../../../Utils/GetValue'
-import remarkBreaks from 'remark-breaks'
-import { decodeTag } from '../../../../Utils/FormatTags'
 import { memo } from 'react'
+import Markdown from 'react-markdown'
+import remarkBreaks from 'remark-breaks'
+
+import { useAddFilterTag } from '#components/Map/hooks/useFilter'
+import { useTags } from '#components/Map/hooks/useTags'
+import { Item } from '#src/types'
+import { decodeTag } from '#utils/FormatTags'
+import { getValue } from '#utils/GetValue'
+import { hashTagRegex } from '#utils/HashTagRegex'
+import { fixUrls, mailRegex } from '#utils/ReplaceURLs'
 
 export const TextView = ({
   item,
diff --git a/src/Components/Map/Subcomponents/ItemViewPopup.tsx b/src/Components/Map/Subcomponents/ItemViewPopup.tsx
index f4336ce4..f7aedff4 100644
--- a/src/Components/Map/Subcomponents/ItemViewPopup.tsx
+++ b/src/Components/Map/Subcomponents/ItemViewPopup.tsx
@@ -7,19 +7,19 @@
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import * as React from 'react'
+import { LatLng } from 'leaflet'
+import { Children, cloneElement, forwardRef, isValidElement, useState } from 'react'
 import { Popup as LeafletPopup, useMap } from 'react-leaflet'
-import { Item } from '../../../types'
-import { ItemFormPopupProps } from './ItemFormPopup'
+import { useNavigate } from 'react-router-dom'
+import { toast } from 'react-toastify'
+
+import { useRemoveItem, useUpdateItem } from '#components/Map/hooks/useItems'
+import { useSetSelectPosition } from '#components/Map/hooks/useSelectPosition'
+import { Item, ItemFormPopupProps } from '#src/types'
+import { timeAgo } from '#utils/TimeAgo'
+
 import { HeaderView } from './ItemPopupComponents/HeaderView'
 import { TextView } from './ItemPopupComponents/TextView'
-import { timeAgo } from '../../../Utils/TimeAgo'
-import { useState } from 'react'
-import { LatLng } from 'leaflet'
-import { useNavigate } from 'react-router-dom'
-import { useRemoveItem, useUpdateItem } from '../hooks/useItems'
-import { toast } from 'react-toastify'
-import { useSetSelectPosition } from '../hooks/useSelectPosition'
 
 export interface ItemViewPopupProps {
   item: Item
@@ -28,9 +28,9 @@ export interface ItemViewPopupProps {
 }
 
 // eslint-disable-next-line react/display-name
-export const ItemViewPopup = React.forwardRef((props: ItemViewPopupProps, ref: any) => {
+export const ItemViewPopup = forwardRef((props: ItemViewPopupProps, ref: any) => {
   const map = useMap()
-  const [loading, setLoading] = React.useState<boolean>(false)
+  const [loading, setLoading] = useState<boolean>(false)
   const removeItem = useRemoveItem()
   const updadateItem = useUpdateItem()
   const navigate = useNavigate()
@@ -95,9 +95,9 @@ export const ItemViewPopup = React.forwardRef((props: ItemViewPopupProps, ref: a
         />
         <div className='tw-overflow-y-auto tw-overflow-x-hidden tw-max-h-64 fade'>
           {props.children ? (
-            React.Children.toArray(props.children).map((child) =>
-              React.isValidElement<{ item: Item; test: string }>(child)
-                ? React.cloneElement(child, { item: props.item })
+            Children.toArray(props.children).map((child) =>
+              isValidElement<{ item: Item; test: string }>(child)
+                ? cloneElement(child, { item: props.item })
                 : '',
             )
           ) : (
diff --git a/src/Components/Map/Tags.tsx b/src/Components/Map/Tags.tsx
index 89352561..c9a9f538 100644
--- a/src/Components/Map/Tags.tsx
+++ b/src/Components/Map/Tags.tsx
@@ -1,9 +1,10 @@
-import * as React from 'react'
 import { useEffect } from 'react'
-import { ItemsApi, Tag } from '../../types'
-import { useSetTagData, useSetTagApi, useTags } from './hooks/useTags'
 import { useLocation } from 'react-router-dom'
+
+import { ItemsApi, Tag } from '#src/types'
+
 import { useAddFilterTag, useFilterTags, useResetFilterTags } from './hooks/useFilter'
+import { useSetTagData, useSetTagApi, useTags } from './hooks/useTags'
 
 export function Tags({ data, api }: { data?: Tag[]; api?: ItemsApi<Tag> }) {
   const setTagData = useSetTagData()
diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx
index ea0c1c9c..0a577e9a 100644
--- a/src/Components/Map/UtopiaMap.tsx
+++ b/src/Components/Map/UtopiaMap.tsx
@@ -1,6 +1,8 @@
-import { UtopiaMapProps } from '../../types'
-import { ContextWrapper } from '../AppShell/ContextWrapper'
+import { ContextWrapper } from '#components/AppShell/ContextWrapper'
+import { UtopiaMapProps } from '#src/types'
+
 import { UtopiaMapInner } from './UtopiaMapInner'
+// eslint-disable-next-line import/no-unassigned-import
 import 'react-toastify/dist/ReactToastify.css'
 
 function UtopiaMap(props: UtopiaMapProps) {
diff --git a/src/Components/Map/UtopiaMapInner.tsx b/src/Components/Map/UtopiaMapInner.tsx
index e80887a0..36966780 100644
--- a/src/Components/Map/UtopiaMapInner.tsx
+++ b/src/Components/Map/UtopiaMapInner.tsx
@@ -6,37 +6,49 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { TileLayer, MapContainer, useMapEvents, GeoJSON } from 'react-leaflet'
-import 'leaflet/dist/leaflet.css'
-import * as React from 'react'
-import { UtopiaMapProps } from '../../types'
-import './UtopiaMap.css'
 import { LatLng } from 'leaflet'
+import {
+  Children,
+  cloneElement,
+  createRef,
+  isValidElement,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { TileLayer, MapContainer, useMapEvents, GeoJSON } from 'react-leaflet'
+// eslint-disable-next-line import/no-unassigned-import
+import 'leaflet/dist/leaflet.css'
 import MarkerClusterGroup from 'react-leaflet-cluster'
-import AddButton from './Subcomponents/AddButton'
-import { useEffect, useRef, useState } from 'react'
-import { ItemFormPopupProps } from './Subcomponents/ItemFormPopup'
-import { SearchControl } from './Subcomponents/Controls/SearchControl'
-import { Control } from './Subcomponents/Controls/Control'
 import { Outlet } from 'react-router-dom'
-import { TagsControl } from './Subcomponents/Controls/TagsControl'
+import { toast } from 'react-toastify'
+
+import { ItemFormPopupProps, UtopiaMapProps } from '#src/types'
+
+// eslint-disable-next-line import/no-unassigned-import
+import './UtopiaMap.css'
+
+import { useClusterRef, useSetClusterRef } from './hooks/useClusterRef'
+import { useAddVisibleLayer } from './hooks/useFilter'
+import { useLayers } from './hooks/useLayers'
 import {
   useSelectPosition,
   useSetMapClicked,
   useSetSelectPosition,
 } from './hooks/useSelectPosition'
-import { useClusterRef, useSetClusterRef } from './hooks/useClusterRef'
-import { Feature, Geometry as GeoJSONGeometry } from 'geojson'
+import AddButton from './Subcomponents/AddButton'
+import { Control } from './Subcomponents/Controls/Control'
 import { FilterControl } from './Subcomponents/Controls/FilterControl'
-import { LayerControl } from './Subcomponents/Controls/LayerControl'
-import { useLayers } from './hooks/useLayers'
-import { useAddVisibleLayer } from './hooks/useFilter'
 import { GratitudeControl } from './Subcomponents/Controls/GratitudeControl'
-import { SelectPosition } from './Subcomponents/SelectPosition'
-import { toast } from 'react-toastify'
+import { LayerControl } from './Subcomponents/Controls/LayerControl'
+import { SearchControl } from './Subcomponents/Controls/SearchControl'
+import { TagsControl } from './Subcomponents/Controls/TagsControl'
 import { TextView } from './Subcomponents/ItemPopupComponents/TextView'
+import { SelectPosition } from './Subcomponents/SelectPosition'
 
-const mapDivRef = React.createRef()
+import type { Feature, Geometry as GeoJSONGeometry } from 'geojson'
+
+const mapDivRef = createRef()
 
 export function UtopiaMapInner({
   height = '500px',
@@ -147,13 +159,13 @@ export function UtopiaMapInner({
           maxClusterRadius={50}
           removeOutsideVisibleBounds={false}
         >
-          {React.Children.toArray(children).map((child) =>
-            React.isValidElement<{
+          {Children.toArray(children).map((child) =>
+            isValidElement<{
               setItemFormPopup: React.Dispatch<React.SetStateAction<ItemFormPopupProps>>
               itemFormPopup: ItemFormPopupProps | null
               clusterRef: React.MutableRefObject<undefined>
             }>(child)
-              ? React.cloneElement(child, { setItemFormPopup, itemFormPopup, clusterRef })
+              ? cloneElement(child, { setItemFormPopup, itemFormPopup, clusterRef })
               : child,
           )}
         </MarkerClusterGroup>
diff --git a/src/Components/Map/hooks/useClusterRef.tsx b/src/Components/Map/hooks/useClusterRef.tsx
index 2ee00904..a445dd90 100644
--- a/src/Components/Map/hooks/useClusterRef.tsx
+++ b/src/Components/Map/hooks/useClusterRef.tsx
@@ -1,7 +1,7 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import * as React from 'react'
 import { createContext, useContext, useState } from 'react'
 
 type UseClusterRefManagerResult = ReturnType<typeof useClusterRefManager>
diff --git a/src/Components/Map/hooks/useDebounce.tsx b/src/Components/Map/hooks/useDebounce.tsx
index 042890c6..9e887a37 100644
--- a/src/Components/Map/hooks/useDebounce.tsx
+++ b/src/Components/Map/hooks/useDebounce.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { useEffect } from 'react'
+
 import { useTimeout } from './useTimeout'
 
 export const useDebounce = (callback, delay, deps) => {
diff --git a/src/Components/Map/hooks/useFilter.tsx b/src/Components/Map/hooks/useFilter.tsx
index 72c717f2..8b21caf1 100644
--- a/src/Components/Map/hooks/useFilter.tsx
+++ b/src/Components/Map/hooks/useFilter.tsx
@@ -1,13 +1,15 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable no-case-declarations */
-import { useCallback, useReducer, createContext, useContext } from 'react'
-import * as React from 'react'
-import { LayerProps, Tag } from '../../../types'
-import { useLayers } from './useLayers'
+import { useCallback, useReducer, createContext, useContext, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+
+import { LayerProps, Tag } from '#src/types'
+
+import { useLayers } from './useLayers'
 import useWindowDimensions from './useWindowDimension'
 
 type ActionType =
@@ -118,7 +120,7 @@ function useFilterManager(initialTags: Tag[]): {
     [],
   )
 
-  const [searchPhrase, searchPhraseSet] = React.useState<string>('')
+  const [searchPhrase, searchPhraseSet] = useState<string>('')
 
   const addFilterTag = useCallback((tag: Tag) => {
     const params = new URLSearchParams(location.search)
diff --git a/src/Components/Map/hooks/useItems.tsx b/src/Components/Map/hooks/useItems.tsx
index 7f0c7190..3e67c2c9 100644
--- a/src/Components/Map/hooks/useItems.tsx
+++ b/src/Components/Map/hooks/useItems.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/require-await */
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
@@ -7,9 +8,10 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { useCallback, useReducer, createContext, useContext, useState } from 'react'
-import * as React from 'react'
-import { Item, LayerProps } from '../../../types'
 import { toast } from 'react-toastify'
+
+import { Item, LayerProps } from '#src/types'
+
 import { useAddLayer } from './useLayers'
 
 type ActionType =
diff --git a/src/Components/Map/hooks/useLayers.tsx b/src/Components/Map/hooks/useLayers.tsx
index b4a35468..392d535a 100644
--- a/src/Components/Map/hooks/useLayers.tsx
+++ b/src/Components/Map/hooks/useLayers.tsx
@@ -1,7 +1,8 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { useCallback, useReducer, createContext, useContext } from 'react'
-import * as React from 'react'
-import { LayerProps } from '../../../types'
+
+import { LayerProps } from '#src/types'
 
 interface ActionType {
   type: 'ADD LAYER'
diff --git a/src/Components/Map/hooks/useLeafletRefs.tsx b/src/Components/Map/hooks/useLeafletRefs.tsx
index de9cd82a..3a728b4e 100644
--- a/src/Components/Map/hooks/useLeafletRefs.tsx
+++ b/src/Components/Map/hooks/useLeafletRefs.tsx
@@ -1,9 +1,10 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { useCallback, useReducer, createContext, useContext } from 'react'
-import * as React from 'react'
-import { Item } from '../../../types'
 import { Marker, Popup } from 'leaflet'
+import { useCallback, useReducer, createContext, useContext } from 'react'
+
+import { Item } from '#src/types'
 
 interface LeafletRef {
   item: Item
diff --git a/src/Components/Map/hooks/usePermissions.tsx b/src/Components/Map/hooks/usePermissions.tsx
index d56b6159..d74021b7 100644
--- a/src/Components/Map/hooks/usePermissions.tsx
+++ b/src/Components/Map/hooks/usePermissions.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-empty-function */
@@ -6,10 +7,10 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useCallback, useReducer, createContext, useContext } from 'react'
-import * as React from 'react'
-import { Item, ItemsApi, LayerProps, Permission, PermissionAction } from '../../../types'
-import { useAuth } from '../../Auth'
+import { useCallback, useReducer, createContext, useContext, useState } from 'react'
+
+import { useAuth } from '#components/Auth/useAuth'
+import { Item, ItemsApi, LayerProps, Permission, PermissionAction } from '#src/types'
 
 type ActionType = { type: 'ADD'; permission: Permission } | { type: 'REMOVE'; id: string }
 
@@ -51,7 +52,7 @@ function usePermissionsManager(initialPermissions: Permission[]): {
     }
   }, initialPermissions)
 
-  const [adminRole, setAdminRole] = React.useState<string | null>(null)
+  const [adminRole, setAdminRole] = useState<string | null>(null)
   const { user } = useAuth()
 
   const setPermissionApi = useCallback(async (api: ItemsApi<Permission>) => {
diff --git a/src/Components/Map/hooks/useSelectPosition.tsx b/src/Components/Map/hooks/useSelectPosition.tsx
index 855fea30..310ce7ad 100644
--- a/src/Components/Map/hooks/useSelectPosition.tsx
+++ b/src/Components/Map/hooks/useSelectPosition.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
 /* eslint-disable @typescript-eslint/no-floating-promises */
 /* eslint-disable @typescript-eslint/no-empty-function */
@@ -7,14 +8,14 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import * as React from 'react'
-import { createContext, useContext, useEffect, useState } from 'react'
-import { Geometry, Item, LayerProps } from '../../../types'
-import { useUpdateItem } from './useItems'
-import { toast } from 'react-toastify'
-import { useHasUserPermission } from './usePermissions'
 import { LatLng } from 'leaflet'
-import { ItemFormPopupProps } from '../Subcomponents/ItemFormPopup'
+import { createContext, useContext, useEffect, useState } from 'react'
+import { toast } from 'react-toastify'
+
+import { Geometry, Item, LayerProps, ItemFormPopupProps } from '#src/types'
+
+import { useUpdateItem } from './useItems'
+import { useHasUserPermission } from './usePermissions'
 
 interface PolygonClickedProps {
   position: LatLng
diff --git a/src/Components/Map/hooks/useTags.tsx b/src/Components/Map/hooks/useTags.tsx
index 036fc232..83e3a373 100644
--- a/src/Components/Map/hooks/useTags.tsx
+++ b/src/Components/Map/hooks/useTags.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-empty-function */
@@ -9,10 +10,10 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { useCallback, useReducer, createContext, useContext, useState } from 'react'
-import * as React from 'react'
-import { Item, ItemsApi, Tag } from '../../../types'
-import { hashTagRegex } from '../../../Utils/HashTagRegex'
-import { getValue } from '../../../Utils/GetValue'
+
+import { Item, ItemsApi, Tag } from '#src/types'
+import { getValue } from '#utils/GetValue'
+import { hashTagRegex } from '#utils/HashTagRegex'
 
 type ActionType = { type: 'ADD'; tag: Tag } | { type: 'REMOVE'; id: string }
 
@@ -55,7 +56,7 @@ function useTagsManager(initialTags: Tag[]): {
     }
   }, initialTags)
 
-  const [api, setApi] = React.useState<ItemsApi<Tag>>({} as ItemsApi<Tag>)
+  const [api, setApi] = useState<ItemsApi<Tag>>({} as ItemsApi<Tag>)
 
   const setTagApi = useCallback(async (api: ItemsApi<Tag>) => {
     setApi(api)
diff --git a/src/Components/Map/setItemLocation.tsx b/src/Components/Map/setItemLocation.tsx
index 7fb310a9..ae776994 100644
--- a/src/Components/Map/setItemLocation.tsx
+++ b/src/Components/Map/setItemLocation.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+
 import { useMap } from 'react-leaflet'
 
 export const setItemLocation = () => {
diff --git a/src/Components/Profile/ProfileForm.tsx b/src/Components/Profile/ProfileForm.tsx
index a9a40e33..d57c8f0c 100644
--- a/src/Components/Profile/ProfileForm.tsx
+++ b/src/Components/Profile/ProfileForm.tsx
@@ -5,23 +5,25 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { useItems, useUpdateItem, useAddItem } from '../Map/hooks/useItems'
 import { useEffect, useState } from 'react'
-import { getValue } from '../../Utils/GetValue'
-import { useAuth } from '../Auth'
-import { useAddTag, useGetItemTags, useTags } from '../Map/hooks/useTags'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { Item, Tag } from '../../types'
-import { MapOverlayPage } from '../Templates'
-import { useLayers } from '../Map/hooks/useLayers'
-import { useHasUserPermission } from '../Map/hooks/usePermissions'
-import { OnepagerForm } from './Templates/OnepagerForm'
+
+import { useAppState } from '#components/AppShell/hooks/useAppState'
+import { useAuth } from '#components/Auth'
+import { useItems, useUpdateItem, useAddItem } from '#components/Map/hooks/useItems'
+import { useLayers } from '#components/Map/hooks/useLayers'
+import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
+import { useAddTag, useGetItemTags, useTags } from '#components/Map/hooks/useTags'
+import { MapOverlayPage } from '#components/Templates'
+import { Item, Tag } from '#src/types'
+import { getValue } from '#utils/GetValue'
+
 import { linkItem, onUpdateItem, unlinkItem } from './itemFunctions'
+import { FormHeader } from './Subcomponents/FormHeader'
+import { FlexForm } from './Templates/FlexForm'
+import { OnepagerForm } from './Templates/OnepagerForm'
 import { SimpleForm } from './Templates/SimpleForm'
 import { TabsForm } from './Templates/TabsForm'
-import { FormHeader } from './Subcomponents/FormHeader'
-import { useAppState } from '../AppShell/hooks/useAppState'
-import { FlexForm } from './Templates/FlexForm'
 
 export function ProfileForm() {
   const [state, setState] = useState({
diff --git a/src/Components/Profile/ProfileView.tsx b/src/Components/Profile/ProfileView.tsx
index 03fd13bf..a54ae222 100644
--- a/src/Components/Profile/ProfileView.tsx
+++ b/src/Components/Profile/ProfileView.tsx
@@ -7,26 +7,28 @@
 /* eslint-disable @typescript-eslint/no-floating-promises */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import { MapOverlayPage } from '../Templates'
-import { useItems, useRemoveItem, useUpdateItem } from '../Map/hooks/useItems'
-import { useLocation, useNavigate } from 'react-router-dom'
-import { useEffect, useState } from 'react'
-import { Item, ItemsApi, Tag } from '../../types'
-import { useMap } from 'react-leaflet'
 import { LatLng } from 'leaflet'
-import { useHasUserPermission } from '../Map/hooks/usePermissions'
-import { HeaderView } from '../Map/Subcomponents/ItemPopupComponents/HeaderView'
-import { useSelectPosition, useSetSelectPosition } from '../Map/hooks/useSelectPosition'
-import { useClusterRef } from '../Map/hooks/useClusterRef'
-import { useLeafletRefs } from '../Map/hooks/useLeafletRefs'
-import { getValue } from '../../Utils/GetValue'
-import { TabsView } from './Templates/TabsView'
+import { useEffect, useState } from 'react'
+import { useMap } from 'react-leaflet'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import { useAppState } from '#components/AppShell/hooks/useAppState'
+import { useClusterRef } from '#components/Map/hooks/useClusterRef'
+import { useItems, useRemoveItem, useUpdateItem } from '#components/Map/hooks/useItems'
+import { useLeafletRefs } from '#components/Map/hooks/useLeafletRefs'
+import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
+import { useSelectPosition, useSetSelectPosition } from '#components/Map/hooks/useSelectPosition'
+import { useTags } from '#components/Map/hooks/useTags'
+import { HeaderView } from '#components/Map/Subcomponents/ItemPopupComponents/HeaderView'
+import { MapOverlayPage } from '#components/Templates'
+import { Item, ItemsApi, Tag } from '#src/types'
+import { getValue } from '#utils/GetValue'
+
+import { handleDelete, linkItem, unlinkItem } from './itemFunctions'
+import { FlexView } from './Templates/FlexView'
 import { OnepagerView } from './Templates/OnepagerView'
 import { SimpleView } from './Templates/SimpleView'
-import { handleDelete, linkItem, unlinkItem } from './itemFunctions'
-import { useTags } from '../Map/hooks/useTags'
-import { FlexView } from './Templates/FlexView'
-import { useAppState } from '../AppShell/hooks/useAppState'
+import { TabsView } from './Templates/TabsView'
 
 export function ProfileView({ attestationApi }: { attestationApi?: ItemsApi<any> }) {
   const [item, setItem] = useState<Item>()
diff --git a/src/Components/Profile/Subcomponents/ActionsButton.tsx b/src/Components/Profile/Subcomponents/ActionsButton.tsx
index a9636947..4b62d2d3 100644
--- a/src/Components/Profile/Subcomponents/ActionsButton.tsx
+++ b/src/Components/Profile/Subcomponents/ActionsButton.tsx
@@ -3,14 +3,15 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState } from 'react'
-import { useHasUserPermission } from '../../Map/hooks/usePermissions'
-import DialogModal from '../../Templates/DialogModal'
-import { useItems } from '../../Map/hooks/useItems'
-import { HeaderView } from '../../Map/Subcomponents/ItemPopupComponents/HeaderView'
-import { Item } from '../../../types'
-import { TextInput } from '../../Input'
-import { getValue } from '../../../Utils/GetValue'
-import { useGetItemTags } from '../../Map/hooks/useTags'
+
+import { TextInput } from '#components/Input'
+import { useItems } from '#components/Map/hooks/useItems'
+import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
+import { useGetItemTags } from '#components/Map/hooks/useTags'
+import { HeaderView } from '#components/Map/Subcomponents/ItemPopupComponents/HeaderView'
+import DialogModal from '#components/Templates/DialogModal'
+import { Item } from '#src/types'
+import { getValue } from '#utils/GetValue'
 
 export function ActionButton({
   item,
diff --git a/src/Components/Profile/Subcomponents/AvatarWidget.tsx b/src/Components/Profile/Subcomponents/AvatarWidget.tsx
index ef3b4f03..237c1256 100644
--- a/src/Components/Profile/Subcomponents/AvatarWidget.tsx
+++ b/src/Components/Profile/Subcomponents/AvatarWidget.tsx
@@ -1,14 +1,18 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-floating-promises */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
-import * as React from 'react'
 import { useState, useCallback, useRef } from 'react'
-import ReactCrop, { Crop, centerCrop, makeAspectCrop } from 'react-image-crop'
-import { useAppState } from '../../AppShell/hooks/useAppState'
+import { ReactCrop, centerCrop, makeAspectCrop } from 'react-image-crop'
+
+import { useAppState } from '#components/AppShell/hooks/useAppState'
+// eslint-disable-next-line import/no-unassigned-import
 import 'react-image-crop/dist/ReactCrop.css'
-import DialogModal from '../../Templates/DialogModal'
+import DialogModal from '#components/Templates/DialogModal'
+
+import type { Crop } from 'react-image-crop'
 
 interface AvatarWidgetProps {
   avatar: string
diff --git a/src/Components/Profile/Subcomponents/ColorPicker.tsx b/src/Components/Profile/Subcomponents/ColorPicker.tsx
index 7f8a5659..abe199f7 100644
--- a/src/Components/Profile/Subcomponents/ColorPicker.tsx
+++ b/src/Components/Profile/Subcomponents/ColorPicker.tsx
@@ -3,10 +3,11 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { useCallback, useEffect, useRef, useState } from 'react'
-import * as React from 'react'
 import { HexColorPicker } from 'react-colorful'
+
+// eslint-disable-next-line import/no-unassigned-import
 import './ColorPicker.css'
-import useClickOutside from '../hooks/useClickOutside'
+import useClickOutside from '#components/Profile/hooks/useClickOutside'
 
 // eslint-disable-next-line react/prop-types
 export const ColorPicker = ({ color, onChange, className }) => {
@@ -16,7 +17,7 @@ export const ColorPicker = ({ color, onChange, className }) => {
   const close = useCallback(() => toggle(false), [])
   useClickOutside(popover, close)
 
-  const colorPickerRef = React.useRef<HTMLDivElement>(null)
+  const colorPickerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     // Füge dem Color-Picker explizit Event-Listener hinzu
diff --git a/src/Components/Profile/Subcomponents/ContactInfoForm.tsx b/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
index 24a8b9f5..9a87fc6a 100644
--- a/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
+++ b/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
@@ -1,8 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
-import * as React from 'react'
-import { TextInput } from '../../Input'
-import { FormState } from '../Templates/OnepagerForm'
+import { TextInput } from '#components/Input'
+import { FormState } from '#src/types'
 
 export const ContactInfoForm = ({
   state,
diff --git a/src/Components/Profile/Subcomponents/ContactInfoView.tsx b/src/Components/Profile/Subcomponents/ContactInfoView.tsx
index 38d090e8..2e9a727b 100644
--- a/src/Components/Profile/Subcomponents/ContactInfoView.tsx
+++ b/src/Components/Profile/Subcomponents/ContactInfoView.tsx
@@ -3,11 +3,12 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
-import { Link } from 'react-router-dom'
-import { useAppState } from '../../AppShell/hooks/useAppState'
-import { Item } from '../../../types'
 import { useEffect, useState } from 'react'
-import { useItems } from '../../Map/hooks/useItems'
+import { Link } from 'react-router-dom'
+
+import { useAppState } from '#components/AppShell/hooks/useAppState'
+import { useItems } from '#components/Map/hooks/useItems'
+import { Item } from '#src/types'
 
 export const ContactInfoView = ({ item, heading }: { item: Item; heading: string }) => {
   const appState = useAppState()
diff --git a/src/Components/Profile/Subcomponents/FormHeader.tsx b/src/Components/Profile/Subcomponents/FormHeader.tsx
index d58a70b3..a20a778f 100644
--- a/src/Components/Profile/Subcomponents/FormHeader.tsx
+++ b/src/Components/Profile/Subcomponents/FormHeader.tsx
@@ -3,7 +3,8 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable react/prop-types */
-import { TextInput } from '../../Input'
+import { TextInput } from '#components/Input'
+
 import { AvatarWidget } from './AvatarWidget'
 import { ColorPicker } from './ColorPicker'
 
diff --git a/src/Components/Profile/Subcomponents/GroupSubHeaderView.tsx b/src/Components/Profile/Subcomponents/GroupSubHeaderView.tsx
index 70a0a41f..98196e27 100644
--- a/src/Components/Profile/Subcomponents/GroupSubHeaderView.tsx
+++ b/src/Components/Profile/Subcomponents/GroupSubHeaderView.tsx
@@ -1,4 +1,5 @@
-import { Item } from '../../../types'
+import { Item } from '#src/types'
+
 import SocialShareBar from './SocialShareBar'
 
 export const GroupSubHeaderView = ({
diff --git a/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx b/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
index 3708e53f..71273a26 100644
--- a/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
+++ b/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
@@ -1,11 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
-import * as React from 'react'
-import ComboBoxInput from '../../Input/ComboBoxInput'
-import { Item } from '../../../types'
 import { useEffect } from 'react'
-import { FormState } from '../Templates/OnepagerForm'
+
+import ComboBoxInput from '#components/Input/ComboBoxInput'
+import { Item, FormState } from '#src/types'
 
 interface groupType {
   groupTypes_id: {
diff --git a/src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx b/src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx
index 0dafb1a1..48d1d72a 100644
--- a/src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx
+++ b/src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx
@@ -6,9 +6,10 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { useEffect } from 'react'
-import { getValue } from '../../../Utils/GetValue'
-import { Item } from '../../../types'
-import { useAppState } from '../../AppShell/hooks/useAppState'
+
+import { useAppState } from '#components/AppShell/hooks/useAppState'
+import { Item } from '#src/types'
+import { getValue } from '#utils/GetValue'
 
 export function LinkedItemsHeaderView({
   item,
diff --git a/src/Components/Profile/Subcomponents/PlusButton.tsx b/src/Components/Profile/Subcomponents/PlusButton.tsx
index 70cbcdd3..9faba0db 100644
--- a/src/Components/Profile/Subcomponents/PlusButton.tsx
+++ b/src/Components/Profile/Subcomponents/PlusButton.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import { LayerProps } from '../../../types'
-import { useHasUserPermission } from '../../Map/hooks/usePermissions'
+import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
+import { LayerProps } from '#src/types'
 
 export function PlusButton({
   layer,
diff --git a/src/Components/Profile/Subcomponents/ProfileStartEndForm.tsx b/src/Components/Profile/Subcomponents/ProfileStartEndForm.tsx
index 3ffc48cb..5657ac6c 100644
--- a/src/Components/Profile/Subcomponents/ProfileStartEndForm.tsx
+++ b/src/Components/Profile/Subcomponents/ProfileStartEndForm.tsx
@@ -1,8 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
-import * as React from 'react'
-import { PopupStartEndInput } from '../../Map'
-import { Item } from '../../../types'
+import { PopupStartEndInput } from '#components/Map'
+import { Item } from '#src/types'
 
 export const ProfileStartEndForm = ({
   item,
diff --git a/src/Components/Profile/Subcomponents/ProfileStartEndView.tsx b/src/Components/Profile/Subcomponents/ProfileStartEndView.tsx
index 06935fca..f166523d 100644
--- a/src/Components/Profile/Subcomponents/ProfileStartEndView.tsx
+++ b/src/Components/Profile/Subcomponents/ProfileStartEndView.tsx
@@ -1,6 +1,5 @@
-import * as React from 'react'
-import { StartEndView } from '../../Map'
-import { Item } from '../../../types'
+import { StartEndView } from '#components/Map'
+import { Item } from '#src/types'
 
 export const ProfileStartEndView = ({ item }: { item: Item }) => {
   return (
diff --git a/src/Components/Profile/Subcomponents/ProfileTextForm.tsx b/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
index d1f8a99d..ccac9c44 100644
--- a/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
+++ b/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
@@ -2,12 +2,12 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import * as React from 'react'
-import { TextAreaInput } from '../../Input'
-import { FormState } from '../Templates/OnepagerForm'
-import { getValue } from '../../../Utils/GetValue'
 import { useEffect, useState } from 'react'
 
+import { TextAreaInput } from '#components/Input'
+import { FormState } from '#src/types'
+import { getValue } from '#utils/GetValue'
+
 export const ProfileTextForm = ({
   state,
   setState,
diff --git a/src/Components/Profile/Subcomponents/ProfileTextView.tsx b/src/Components/Profile/Subcomponents/ProfileTextView.tsx
index 10227f0f..e36f04db 100644
--- a/src/Components/Profile/Subcomponents/ProfileTextView.tsx
+++ b/src/Components/Profile/Subcomponents/ProfileTextView.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { Item } from '../../../types'
-import { getValue } from '../../../Utils/GetValue'
-import { TextView } from '../../Map'
+import { TextView } from '#components/Map'
+import { Item } from '#src/types'
+import { getValue } from '#utils/GetValue'
 
 export const ProfileTextView = ({
   item,
diff --git a/src/Components/Profile/Subcomponents/SocialShareBar.tsx b/src/Components/Profile/Subcomponents/SocialShareBar.tsx
index bd627431..13b94910 100644
--- a/src/Components/Profile/Subcomponents/SocialShareBar.tsx
+++ b/src/Components/Profile/Subcomponents/SocialShareBar.tsx
@@ -1,4 +1,5 @@
 import { toast } from 'react-toastify'
+
 import SocialShareButton from './SocialShareButton'
 
 const SocialShareBar = ({
diff --git a/src/Components/Profile/Subcomponents/SocialShareButton.tsx b/src/Components/Profile/Subcomponents/SocialShareButton.tsx
index e77bd56e..bc0f3c42 100644
--- a/src/Components/Profile/Subcomponents/SocialShareButton.tsx
+++ b/src/Components/Profile/Subcomponents/SocialShareButton.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-import * as React from 'react'
+
+import { cloneElement } from 'react'
 
 const platformConfigs = {
   facebook: {
@@ -106,7 +106,7 @@ const SocialShareButton = ({
       }}
       title={`share link on ${platform}`}
     >
-      {React.cloneElement(icon, { className: 'tw-w-4 tw-h-4 tw-fill-current' })}
+      {cloneElement(icon, { className: 'tw-w-4 tw-h-4 tw-fill-current' })}
     </a>
   )
 }
diff --git a/src/Components/Profile/Subcomponents/TagsWidget.tsx b/src/Components/Profile/Subcomponents/TagsWidget.tsx
index 9f79dd89..3a5709ab 100644
--- a/src/Components/Profile/Subcomponents/TagsWidget.tsx
+++ b/src/Components/Profile/Subcomponents/TagsWidget.tsx
@@ -4,13 +4,13 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import * as React from 'react'
 import { useEffect, useState } from 'react'
-import { useTags } from '../../Map/hooks/useTags'
-import { Tag } from '../../../types'
-import { Autocomplete } from '../../Input/Autocomplete'
-import { randomColor } from '../../../Utils/RandomColor'
-import { decodeTag, encodeTag } from '../../../Utils/FormatTags'
+
+import { Autocomplete } from '#components/Input/Autocomplete'
+import { useTags } from '#components/Map/hooks/useTags'
+import { Tag } from '#src/types'
+import { decodeTag, encodeTag } from '#utils/FormatTags'
+import { randomColor } from '#utils/RandomColor'
 
 // eslint-disable-next-line react/prop-types
 export const TagsWidget = ({ placeholder, containerStyle, defaultTags, onUpdate }) => {
diff --git a/src/Components/Profile/Templates/FlexForm.tsx b/src/Components/Profile/Templates/FlexForm.tsx
index cd046046..c7a8d5f4 100644
--- a/src/Components/Profile/Templates/FlexForm.tsx
+++ b/src/Components/Profile/Templates/FlexForm.tsx
@@ -2,13 +2,12 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import * as React from 'react'
-import { Item } from '../../../types'
-import { FormState } from './OnepagerForm'
-import { GroupSubheaderForm } from '../Subcomponents/GroupSubheaderForm'
-import { ContactInfoForm } from '../Subcomponents/ContactInfoForm'
-import { ProfileTextForm } from '../Subcomponents/ProfileTextForm'
-import { ProfileStartEndForm } from '../Subcomponents/ProfileStartEndForm'
+
+import { ContactInfoForm } from '#components/Profile/Subcomponents/ContactInfoForm'
+import { GroupSubheaderForm } from '#components/Profile/Subcomponents/GroupSubheaderForm'
+import { ProfileStartEndForm } from '#components/Profile/Subcomponents/ProfileStartEndForm'
+import { ProfileTextForm } from '#components/Profile/Subcomponents/ProfileTextForm'
+import { Item, FormState } from '#src/types'
 
 const componentMap = {
   groupSubheaders: GroupSubheaderForm,
diff --git a/src/Components/Profile/Templates/FlexView.tsx b/src/Components/Profile/Templates/FlexView.tsx
index e677c025..c9f68c18 100644
--- a/src/Components/Profile/Templates/FlexView.tsx
+++ b/src/Components/Profile/Templates/FlexView.tsx
@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import { GroupSubHeaderView } from '../Subcomponents/GroupSubHeaderView'
-import { ProfileTextView } from '../Subcomponents/ProfileTextView'
-import { ContactInfoView } from '../Subcomponents/ContactInfoView'
-import { Item } from '../../../types'
-import { ProfileStartEndView } from '../Subcomponents/ProfileStartEndView'
+
+import { ContactInfoView } from '#components/Profile/Subcomponents/ContactInfoView'
+import { GroupSubHeaderView } from '#components/Profile/Subcomponents/GroupSubHeaderView'
+import { ProfileStartEndView } from '#components/Profile/Subcomponents/ProfileStartEndView'
+import { ProfileTextView } from '#components/Profile/Subcomponents/ProfileTextView'
+import { Item } from '#src/types'
 
 const componentMap = {
   groupSubheaders: GroupSubHeaderView,
diff --git a/src/Components/Profile/Templates/OnepagerForm.tsx b/src/Components/Profile/Templates/OnepagerForm.tsx
index 865c9763..db7d4f3f 100644
--- a/src/Components/Profile/Templates/OnepagerForm.tsx
+++ b/src/Components/Profile/Templates/OnepagerForm.tsx
@@ -1,28 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
-import * as React from 'react'
-import { Item, Tag } from '../../../types'
-import { TextAreaInput } from '../../Input'
-import { GroupSubheaderForm } from '../Subcomponents/GroupSubheaderForm'
-import { ContactInfoForm } from '../Subcomponents/ContactInfoForm'
-
-export interface FormState {
-  color: string
-  id: string
-  group_type: string
-  status: string
-  name: string
-  subname: string
-  text: string
-  contact: string
-  telephone: string
-  next_appointment: string
-  image: string
-  marker_icon: string
-  offers: Tag[]
-  needs: Tag[]
-  relations: Item[]
-}
+import { TextAreaInput } from '#components/Input'
+import { ContactInfoForm } from '#components/Profile/Subcomponents/ContactInfoForm'
+import { GroupSubheaderForm } from '#components/Profile/Subcomponents/GroupSubheaderForm'
+import { FormState, Item } from '#src/types'
 
 export const OnepagerForm = ({
   item,
diff --git a/src/Components/Profile/Templates/OnepagerView.tsx b/src/Components/Profile/Templates/OnepagerView.tsx
index 21640a5a..b5e93280 100644
--- a/src/Components/Profile/Templates/OnepagerView.tsx
+++ b/src/Components/Profile/Templates/OnepagerView.tsx
@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import { Item } from '../../../types'
-import { TextView } from '../../Map'
-import { ContactInfoView } from '../Subcomponents/ContactInfoView'
-import { GroupSubHeaderView } from '../Subcomponents/GroupSubHeaderView'
+import { TextView } from '#components/Map'
+import { ContactInfoView } from '#components/Profile/Subcomponents/ContactInfoView'
+import { GroupSubHeaderView } from '#components/Profile/Subcomponents/GroupSubHeaderView'
+import { Item } from '#src/types'
 
 export const OnepagerView = ({ item }: { item: Item }) => {
   return (
diff --git a/src/Components/Profile/Templates/SimpleForm.tsx b/src/Components/Profile/Templates/SimpleForm.tsx
index 68fd1a06..bbc1e48d 100644
--- a/src/Components/Profile/Templates/SimpleForm.tsx
+++ b/src/Components/Profile/Templates/SimpleForm.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { TextAreaInput } from '../../Input'
+import { TextAreaInput } from '#components/Input'
 
 // eslint-disable-next-line react/prop-types
 export const SimpleForm = ({ state, setState }) => {
diff --git a/src/Components/Profile/Templates/SimpleView.tsx b/src/Components/Profile/Templates/SimpleView.tsx
index 5ad02668..027ed7c4 100644
--- a/src/Components/Profile/Templates/SimpleView.tsx
+++ b/src/Components/Profile/Templates/SimpleView.tsx
@@ -1,6 +1,5 @@
-import * as React from 'react'
-import { TextView } from '../../Map'
-import { Item } from '../../../types'
+import { TextView } from '#components/Map'
+import { Item } from '#src/types'
 
 export const SimpleView = ({ item }: { item: Item }) => {
   return (
diff --git a/src/Components/Profile/Templates/TabsForm.tsx b/src/Components/Profile/Templates/TabsForm.tsx
index fc5d2ecd..add01201 100644
--- a/src/Components/Profile/Templates/TabsForm.tsx
+++ b/src/Components/Profile/Templates/TabsForm.tsx
@@ -7,13 +7,14 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable react/prop-types */
 import { useCallback, useEffect, useState } from 'react'
-import { TextAreaInput } from '../../Input'
-import { PopupStartEndInput, TextView } from '../../Map'
-import { ActionButton } from '../Subcomponents/ActionsButton'
-import { LinkedItemsHeaderView } from '../Subcomponents/LinkedItemsHeaderView'
-import { TagsWidget } from '../Subcomponents/TagsWidget'
 import { useNavigate } from 'react-router-dom'
-import { useUpdateItem } from '../../Map/hooks/useItems'
+
+import { TextAreaInput } from '#components/Input'
+import { PopupStartEndInput, TextView } from '#components/Map'
+import { useUpdateItem } from '#components/Map/hooks/useItems'
+import { ActionButton } from '#components/Profile/Subcomponents/ActionsButton'
+import { LinkedItemsHeaderView } from '#components/Profile/Subcomponents/LinkedItemsHeaderView'
+import { TagsWidget } from '#components/Profile/Subcomponents/TagsWidget'
 
 export const TabsForm = ({
   item,
diff --git a/src/Components/Profile/Templates/TabsView.tsx b/src/Components/Profile/Templates/TabsView.tsx
index a376897d..2b046f7b 100644
--- a/src/Components/Profile/Templates/TabsView.tsx
+++ b/src/Components/Profile/Templates/TabsView.tsx
@@ -6,17 +6,18 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { StartEndView, TextView } from '../../Map'
-import { TagView } from '../../Templates/TagView'
-import { LinkedItemsHeaderView } from '../Subcomponents/LinkedItemsHeaderView'
-import { ActionButton } from '../Subcomponents/ActionsButton'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { useAddFilterTag } from '../../Map/hooks/useFilter'
-import { Item, Tag } from '../../../types'
 import { Link, useNavigate } from 'react-router-dom'
-import { useItems } from '../../Map/hooks/useItems'
-import { useAppState } from '../../AppShell/hooks/useAppState'
-import { timeAgo } from '../../../Utils/TimeAgo'
+
+import { useAppState } from '#components/AppShell/hooks/useAppState'
+import { StartEndView, TextView } from '#components/Map'
+import { useAddFilterTag } from '#components/Map/hooks/useFilter'
+import { useItems } from '#components/Map/hooks/useItems'
+import { ActionButton } from '#components/Profile/Subcomponents/ActionsButton'
+import { LinkedItemsHeaderView } from '#components/Profile/Subcomponents/LinkedItemsHeaderView'
+import { TagView } from '#components/Templates/TagView'
+import { Item, Tag } from '#src/types'
+import { timeAgo } from '#utils/TimeAgo'
 
 export const TabsView = ({
   attestations,
diff --git a/src/Components/Profile/UserSettings.tsx b/src/Components/Profile/UserSettings.tsx
index 20813730..88d644e7 100644
--- a/src/Components/Profile/UserSettings.tsx
+++ b/src/Components/Profile/UserSettings.tsx
@@ -1,14 +1,14 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-floating-promises */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import * as React from 'react'
-import { MapOverlayPage } from '../Templates'
+import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useState } from 'react'
-import { UserItem } from '../../types'
 import { toast } from 'react-toastify'
-import { useAuth } from '../Auth'
-import { TextInput } from '../Input'
+
+import { useAuth } from '#components/Auth'
+import { TextInput } from '#components/Input'
+import { MapOverlayPage } from '#components/Templates'
+import { UserItem } from '#src/types'
 
 export function UserSettings() {
   const { user, updateUser, loading /* token */ } = useAuth()
@@ -21,7 +21,7 @@ export function UserSettings() {
 
   const navigate = useNavigate()
 
-  React.useEffect(() => {
+  useEffect(() => {
     setId(user?.id ? user.id : '')
     setEmail(user?.email ? user.email : '')
     setPassword(user?.password ? user.password : '')
diff --git a/src/Components/Profile/itemFunctions.ts b/src/Components/Profile/itemFunctions.ts
index 05e0d8da..3ad3d1d5 100644
--- a/src/Components/Profile/itemFunctions.ts
+++ b/src/Components/Profile/itemFunctions.ts
@@ -9,13 +9,13 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import * as React from 'react'
-import { Item } from '../../types'
-import { encodeTag } from '../../Utils/FormatTags'
-import { hashTagRegex } from '../../Utils/HashTagRegex'
-import { randomColor } from '../../Utils/RandomColor'
 import { toast } from 'react-toastify'
 
+import { Item } from '#src/types'
+import { encodeTag } from '#utils/FormatTags'
+import { hashTagRegex } from '#utils/HashTagRegex'
+import { randomColor } from '#utils/RandomColor'
+
 const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
 
 export const submitNewItem = async (
diff --git a/src/Components/Templates/AttestationForm.tsx b/src/Components/Templates/AttestationForm.tsx
index f616dd25..a5ed5b69 100644
--- a/src/Components/Templates/AttestationForm.tsx
+++ b/src/Components/Templates/AttestationForm.tsx
@@ -7,16 +7,17 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import * as React from 'react'
-import { MapOverlayPage } from './MapOverlayPage'
-import { useItems } from '../Map/hooks/useItems'
-import { useAppState } from '../AppShell/hooks/useAppState'
-import { EmojiPicker } from './EmojiPicker'
-import { useNavigate } from 'react-router-dom'
 import { useRef, useState, useEffect } from 'react'
-import { Item, ItemsApi } from '../../types'
+import { useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
 
+import { useAppState } from '#components/AppShell/hooks/useAppState'
+import { useItems } from '#components/Map/hooks/useItems'
+import { Item, ItemsApi } from '#src/types'
+
+import { EmojiPicker } from './EmojiPicker'
+import { MapOverlayPage } from './MapOverlayPage'
+
 export const AttestationForm = ({ api }: { api?: ItemsApi<any> }) => {
   const items = useItems()
   const appState = useAppState()
diff --git a/src/Components/Templates/CardPage.tsx b/src/Components/Templates/CardPage.tsx
index 9722f6e3..42078e88 100644
--- a/src/Components/Templates/CardPage.tsx
+++ b/src/Components/Templates/CardPage.tsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom'
-import * as React from 'react'
+
 import { TitleCard } from './TitleCard'
 
 export function CardPage({
diff --git a/src/Components/Templates/DateUserInfo.tsx b/src/Components/Templates/DateUserInfo.tsx
index 25662a84..a25e623e 100644
--- a/src/Components/Templates/DateUserInfo.tsx
+++ b/src/Components/Templates/DateUserInfo.tsx
@@ -4,8 +4,9 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
 import { useState } from 'react'
-import { timeAgo } from '../../Utils/TimeAgo'
-import { Item } from '../../types'
+
+import { Item } from '#src/types'
+import { timeAgo } from '#utils/TimeAgo'
 
 export const DateUserInfo = ({ item }: { item: Item }) => {
   const [infoExpanded, setInfoExpanded] = useState<boolean>(false)
diff --git a/src/Components/Templates/DialogModal.tsx b/src/Components/Templates/DialogModal.tsx
index 8951048e..3fa4da0e 100644
--- a/src/Components/Templates/DialogModal.tsx
+++ b/src/Components/Templates/DialogModal.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { MouseEvent, useEffect, useRef } from 'react'
 
 const isClickInsideRectangle = (e: MouseEvent, element: HTMLElement) => {
diff --git a/src/Components/Templates/ItemCard.tsx b/src/Components/Templates/ItemCard.tsx
index 0deb3e8a..2c2d9251 100644
--- a/src/Components/Templates/ItemCard.tsx
+++ b/src/Components/Templates/ItemCard.tsx
@@ -4,13 +4,15 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { DateUserInfo } from './DateUserInfo'
-import { StartEndView, TextView } from '../Map'
-import { HeaderView } from '../Map/Subcomponents/ItemPopupComponents/HeaderView'
-import { Item } from '../../types'
 import { useNavigate } from 'react-router-dom'
-import { getValue } from '../../Utils/GetValue'
-import useWindowDimensions from '../Map/hooks/useWindowDimension'
+
+import { StartEndView, TextView } from '#components/Map'
+import useWindowDimensions from '#components/Map/hooks/useWindowDimension'
+import { HeaderView } from '#components/Map/Subcomponents/ItemPopupComponents/HeaderView'
+import { Item } from '#src/types'
+import { getValue } from '#utils/GetValue'
+
+import { DateUserInfo } from './DateUserInfo'
 
 export const ItemCard = ({
   i,
diff --git a/src/Components/Templates/MapOverlayPage.tsx b/src/Components/Templates/MapOverlayPage.tsx
index 1e5d86cd..e25bb589 100644
--- a/src/Components/Templates/MapOverlayPage.tsx
+++ b/src/Components/Templates/MapOverlayPage.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import * as L from 'leaflet'
-import * as React from 'react'
+import { DomEvent } from 'leaflet'
+import { createRef, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 export function MapOverlayPage({
@@ -20,17 +20,17 @@ export function MapOverlayPage({
 
   const navigate = useNavigate()
 
-  const overlayRef = React.createRef<HTMLDivElement>()
-  const backdropRef = React.createRef<HTMLDivElement>()
+  const overlayRef = createRef<HTMLDivElement>()
+  const backdropRef = createRef<HTMLDivElement>()
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (overlayRef.current !== null) {
-      L.DomEvent.disableClickPropagation(overlayRef.current)
-      L.DomEvent.disableScrollPropagation(overlayRef.current)
+      DomEvent.disableClickPropagation(overlayRef.current)
+      DomEvent.disableScrollPropagation(overlayRef.current)
     }
     if (backdropRef.current !== null && backdrop) {
-      L.DomEvent.disableClickPropagation(backdropRef.current)
-      L.DomEvent.disableScrollPropagation(backdropRef.current)
+      DomEvent.disableClickPropagation(backdropRef.current)
+      DomEvent.disableScrollPropagation(backdropRef.current)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [overlayRef, backdropRef])
diff --git a/src/Components/Templates/MarketView.tsx b/src/Components/Templates/MarketView.tsx
index 8b5adc31..f21cfecb 100644
--- a/src/Components/Templates/MarketView.tsx
+++ b/src/Components/Templates/MarketView.tsx
@@ -4,13 +4,15 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import { useEffect, useState } from 'react'
-import { useItems } from '../Map/hooks/useItems'
-import { Tag } from '../../types'
-import { useTags } from '../Map/hooks/useTags'
-import { getValue } from '../../Utils/GetValue'
+import { useNavigate } from 'react-router-dom'
+
+import { useItems } from '#components/Map/hooks/useItems'
+import { useTags } from '#components/Map/hooks/useTags'
+import { Tag } from '#src/types'
+import { getValue } from '#utils/GetValue'
+
 import { MapOverlayPage } from './MapOverlayPage'
 import { TagView } from './TagView'
-import { useNavigate } from 'react-router-dom'
 
 function groupAndCount(arr) {
   const grouped = arr.reduce((acc, obj) => {
diff --git a/src/Components/Templates/MoonCalendar.tsx b/src/Components/Templates/MoonCalendar.tsx
index c43b85fc..a2a6bf5e 100644
--- a/src/Components/Templates/MoonCalendar.tsx
+++ b/src/Components/Templates/MoonCalendar.tsx
@@ -1,10 +1,11 @@
-import * as React from 'react'
-import { useState } from 'react'
-import { add, format, parse, startOfToday, sub } from 'date-fns'
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
-import { MapOverlayPage } from './MapOverlayPage'
+import { add, format, parse, startOfToday, sub } from 'date-fns'
+import { useState } from 'react'
+
+import { LUNAR_MONTH, getLastNewMoon, getNextNewMoon } from '#utils/Moon'
+
 import { CircleLayout } from './CircleLayout'
-import { LUNAR_MONTH, getLastNewMoon, getNextNewMoon } from '../../Utils/Moon'
+import { MapOverlayPage } from './MapOverlayPage'
 
 export const MoonCalendar = () => {
   const today = startOfToday()
diff --git a/src/Components/Templates/OverlayItemsIndexPage.tsx b/src/Components/Templates/OverlayItemsIndexPage.tsx
index 61502f07..291abbd4 100644
--- a/src/Components/Templates/OverlayItemsIndexPage.tsx
+++ b/src/Components/Templates/OverlayItemsIndexPage.tsx
@@ -6,23 +6,25 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import { useEffect, useRef, useState } from 'react'
-import { Item } from '../../types'
-import { PopupStartEndInput } from '../Map'
-import { PlusButton } from '../Profile/Subcomponents/PlusButton'
-import { TextInput, TextAreaInput } from '../Input'
-import { useAddTag, useGetItemTags, useTags } from '../Map/hooks/useTags'
 import { toast } from 'react-toastify'
-import { hashTagRegex } from '../../Utils/HashTagRegex'
-import { randomColor } from '../../Utils/RandomColor'
-import { useAuth } from '../Auth'
-import { useLayers } from '../Map/hooks/useLayers'
-import { MapOverlayPage } from './MapOverlayPage'
-import { useAddItem, useItems, useRemoveItem } from '../Map/hooks/useItems'
+
+import { useAuth } from '#components/Auth/useAuth'
+import { TextInput, TextAreaInput } from '#components/Input'
+import { PopupStartEndInput } from '#components/Map'
+import { useFilterTags } from '#components/Map/hooks/useFilter'
+import { useAddItem, useItems, useRemoveItem } from '#components/Map/hooks/useItems'
+import { useLayers } from '#components/Map/hooks/useLayers'
+import { useAddTag, useGetItemTags, useTags } from '#components/Map/hooks/useTags'
+import { Control } from '#components/Map/Subcomponents/Controls/Control'
+import { SearchControl } from '#components/Map/Subcomponents/Controls/SearchControl'
+import { TagsControl } from '#components/Map/Subcomponents/Controls/TagsControl'
+import { PlusButton } from '#components/Profile/Subcomponents/PlusButton'
+import { Item } from '#src/types'
+import { hashTagRegex } from '#utils/HashTagRegex'
+import { randomColor } from '#utils/RandomColor'
+
 import { ItemCard } from './ItemCard'
-import { Control } from '../Map/Subcomponents/Controls/Control'
-import { SearchControl } from '../Map/Subcomponents/Controls/SearchControl'
-import { TagsControl } from '../Map/Subcomponents/Controls/TagsControl'
-import { useFilterTags } from '../Map/hooks/useFilter'
+import { MapOverlayPage } from './MapOverlayPage'
 
 export const OverlayItemsIndexPage = ({
   url,
diff --git a/src/Components/Templates/SelectUser.tsx b/src/Components/Templates/SelectUser.tsx
index 3d4280cb..f9da4dfd 100644
--- a/src/Components/Templates/SelectUser.tsx
+++ b/src/Components/Templates/SelectUser.tsx
@@ -1,10 +1,12 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 import { useState } from 'react'
-import { MapOverlayPage } from './MapOverlayPage'
-import { useItems } from '../Map/hooks/useItems'
-import { useAppState } from '../AppShell/hooks/useAppState'
 import { Link } from 'react-router-dom'
 
+import { useAppState } from '#components/AppShell/hooks/useAppState'
+import { useItems } from '#components/Map/hooks/useItems'
+
+import { MapOverlayPage } from './MapOverlayPage'
+
 export const SelectUser = () => {
   const appState = useAppState()
   const items = useItems()
diff --git a/src/Components/Templates/TagView.tsx b/src/Components/Templates/TagView.tsx
index db080fb1..13c184a5 100644
--- a/src/Components/Templates/TagView.tsx
+++ b/src/Components/Templates/TagView.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import * as React from 'react'
-import { decodeTag } from '../../Utils/FormatTags'
-import { Tag } from '../../types'
+
+import { Tag } from '#src/types'
+import { decodeTag } from '#utils/FormatTags'
 
 export const TagView = ({
   tag,
diff --git a/src/Components/Templates/TitleCard.tsx b/src/Components/Templates/TitleCard.tsx
index 9c904cc0..206ef8fa 100644
--- a/src/Components/Templates/TitleCard.tsx
+++ b/src/Components/Templates/TitleCard.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import Subtitle from '../Typography/Subtitle'
-import * as React from 'react'
+import Subtitle from '#components/Typography/Subtitle'
 
 interface TitleCardProps {
   title?: string
diff --git a/src/Components/Templates/index.tsx b/src/Components/Templates/index.tsx
index ebd01942..97b50bfb 100644
--- a/src/Components/Templates/index.tsx
+++ b/src/Components/Templates/index.tsx
@@ -3,6 +3,7 @@ export { TitleCard } from './TitleCard'
 export { MapOverlayPage } from './MapOverlayPage'
 export { MoonCalendar } from './MoonCalendar'
 export { SelectUser } from './SelectUser'
+
 export { OverlayItemsIndexPage } from './OverlayItemsIndexPage'
 export { AttestationForm } from './AttestationForm'
 export { MarketView } from './MarketView'
diff --git a/src/Components/Typography/ErrorText.tsx b/src/Components/Typography/ErrorText.tsx
index d8f9e051..133c466a 100644
--- a/src/Components/Typography/ErrorText.tsx
+++ b/src/Components/Typography/ErrorText.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import * as React from 'react'
 
 // eslint-disable-next-line react/prop-types
 function ErrorText({ styleClass, children }) {
diff --git a/src/Components/Typography/Subtitle.tsx b/src/Components/Typography/Subtitle.tsx
index 6cf3a400..2aadab5e 100644
--- a/src/Components/Typography/Subtitle.tsx
+++ b/src/Components/Typography/Subtitle.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 function Subtitle({ styleClass, children }: { styleClass: string; children: React.ReactNode }) {
   return <div className={`tw-text-xl tw-font-semibold ${styleClass}`}>{children}</div>
 }
diff --git a/src/Utils/MarkerIconFactory.ts b/src/Utils/MarkerIconFactory.ts
index 9ddc8c40..eb3614eb 100644
--- a/src/Utils/MarkerIconFactory.ts
+++ b/src/Utils/MarkerIconFactory.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
-import * as L from 'leaflet'
+import { divIcon, Point } from 'leaflet'
 
 const createSvg = (shape: string, markerColor: string, borderColor: string) => {
   const svgMap = {
@@ -66,11 +66,11 @@ const addIcon = (icon: string) => {
 }
 
 const MarkerIconFactory = (shape: string, color1: string, color2: string, icon: string) => {
-  return L.divIcon({
+  return divIcon({
     html: `${createSvg(shape, color1, color2)}${addIcon(icon)}`,
     iconAnchor: [17, 40],
     popupAnchor: [0, -40],
-    iconSize: new L.Point(40, 46),
+    iconSize: new Point(40, 46),
     className: 'leaflet-data-marker',
     shadowAnchor: [0, 0],
   })
diff --git a/src/index.tsx b/src/index.tsx
index 91ca338b..6008084d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-unassigned-import
 import './index.css'
 
 export {
diff --git a/src/types.ts b/src/types.ts
index 3032a95b..4b964237 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import * as React from 'react'
-import { ItemFormPopupProps } from './Components/Map/Subcomponents/ItemFormPopup'
+import { LatLng } from 'leaflet'
 
 export interface Tag {
   color: string
@@ -69,7 +68,9 @@ export interface LayerProps {
   public_edit_items?: boolean
   listed?: boolean
   item_presets?: Record<string, unknown>
+  // eslint-disable-next-line no-use-before-define
   setItemFormPopup?: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>
+  // eslint-disable-next-line no-use-before-define
   itemFormPopup?: ItemFormPopupProps | null
   clusterRef?: any
 }
@@ -178,3 +179,29 @@ export interface Permission {
     _and: PermissionCondition[]
   }
 }
+
+export interface ItemFormPopupProps {
+  position: LatLng
+  layer: LayerProps
+  item?: Item
+  children?: React.ReactNode
+  setItemFormPopup?: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>
+}
+
+export interface FormState {
+  color: string
+  id: string
+  group_type: string
+  status: string
+  name: string
+  subname: string
+  text: string
+  contact: string
+  telephone: string
+  next_appointment: string
+  image: string
+  marker_icon: string
+  offers: Tag[]
+  needs: Tag[]
+  relations: Item[]
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 37d47197..30ebd8ee 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+// eslint-disable-next-line import/no-commonjs
 module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}', './node_modules/tw-elements/dist/js/**/*.js'],
   safelist: [
@@ -63,6 +64,7 @@ module.exports = {
       pulseGrow: 'pulseGrow 2s ease-in-out infinite',
     },
   },
+  // eslint-disable-next-line import/no-commonjs, import/extensions
   plugins: [require('daisyui'), require('tw-elements/dist/plugin.cjs')],
   daisyui: {
     themes: [
diff --git a/tsconfig.json b/tsconfig.json
index a234ea8f..1fcb7ebb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,13 @@
       "noImplicitThis": true,
       "strictNullChecks": true,
       "noUnusedLocals": false,
-      "noUnusedParameters": true
+      "noUnusedParameters": true,
+      "paths": {
+        "#components/*": ["./src/Components/*"],
+        "#utils/*": ["./src/Utils/*"],
+        "#src/*": ["./src/*"],
+        "#root/*": ["./*"]
+      }
     },
     "include": ["src"],
     "exclude": ["node_modules", "dist", "example", "rollup.config.mjss"],