diff --git a/src/App.svelte b/src/App.svelte
index 6a61647..233065a 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,12 +1,12 @@
 <script>
 	import CookiesPopUp from './lib/Components/Cookies/CookiesPopUp.svelte'
-	import QrRoute from './routes/qrRoute.svelte'
+	import QrRoute from './routes/qrscanner/qrscanner.svelte'
 	import { Router, link, Route } from 'svelte-routing'
 	import './main.scss'
 
 	import Error from './routes/error.svelte'
-	import Game from './routes/game.svelte'
-	import Index from './routes/index.svelte'
+	import Game from './routes/game/game.svelte'
+	import Index from './routes/homepage/homepage.svelte'
 	import Test from './routes/test.svelte'
 	import Test2 from './routes/map.svelte'
 	import LogIn from './routes/log_in.svelte'
@@ -28,11 +28,11 @@
 		<Route path="/test" component={Test} />
 		<Route path="/map" component={Test2} />
 
-		<Route path="/login" >
-			<LogIn/>
+		<Route path="/login">
+			<LogIn />
 		</Route>
-		<Route path="/register" >
-			<LogIn purpose="register"/>
+		<Route path="/register">
+			<LogIn purpose="register" />
 		</Route>
 
 		<Route path="/:gameurl" let:params>
diff --git a/src/lib/Components/Button.svelte b/src/lib/Components/Buttons/Button.svelte
similarity index 100%
rename from src/lib/Components/Button.svelte
rename to src/lib/Components/Buttons/Button.svelte
diff --git a/src/lib/Components/Sharebutton.svelte b/src/lib/Components/Buttons/Sharebutton.svelte
similarity index 100%
rename from src/lib/Components/Sharebutton.svelte
rename to src/lib/Components/Buttons/Sharebutton.svelte
diff --git a/src/lib/Components/Game/Heading.svelte b/src/lib/Components/Game/Heading.svelte
deleted file mode 100644
index dd75e8a..0000000
--- a/src/lib/Components/Game/Heading.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script>
-</script>
-
-<div>
-	<h1>
-		<slot />
-	</h1>
-
-	<slot name="bubbles" />
-</div>
-
-<style lang="scss">
-	div {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 10px;
-	}
-	h1 {
-		font-style: normal;
-		font-weight: 600;
-		font-size: 36px;
-		line-height: 45px;
-		color: #110042;
-	}
-</style>
diff --git a/src/lib/Components/Game/Tab.svelte b/src/lib/Components/Game/Tab.svelte
deleted file mode 100644
index 0f3c781..0000000
--- a/src/lib/Components/Game/Tab.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-	import Sharebutton from '../Sharebutton.svelte'
-	export let shareData
-</script>
-
-<div>
-	<Sharebutton {shareData} />
-</div>
-
-<style lang="scss">
-	div {
-		width: 100%;
-		height: calc(100% - 75%);
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-		position: absolute;
-		top: 0;
-		padding: 50px;
-		background: none;
-		clip-path: inset(0);
-		z-index: 6;
-
-		@media (min-width: 768px) {
-			position: absolute;
-		}
-	}
-</style>
diff --git a/src/lib/Components/Heading.svelte b/src/lib/Components/Heading.svelte
deleted file mode 100644
index 5a62673..0000000
--- a/src/lib/Components/Heading.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<h1>
-	<slot />
-</h1>
-
-<style lang="scss">
-	h1 {
-		font-style: normal;
-		font-weight: 600;
-		font-size: 36px;
-		line-height: 45px;
-		color: #110042;
-	}
-</style>
diff --git a/src/lib/Components/Quiz/answers/Checkbox.svelte b/src/lib/Components/Inputs/Checkbox.svelte
similarity index 95%
rename from src/lib/Components/Quiz/answers/Checkbox.svelte
rename to src/lib/Components/Inputs/Checkbox.svelte
index 0374dca..186ddb3 100644
--- a/src/lib/Components/Quiz/answers/Checkbox.svelte
+++ b/src/lib/Components/Inputs/Checkbox.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { idGenerator } from '$lib/jsLibrari/IdGenerator'
+	import { idGenerator } from '$lib/utils/IdGenerator'
 	const id = idGenerator()
 
 	export let checked = true
diff --git a/src/lib/Components/Log_In/Hidden_Input.svelte b/src/lib/Components/Inputs/Hidden_Input.svelte
similarity index 100%
rename from src/lib/Components/Log_In/Hidden_Input.svelte
rename to src/lib/Components/Inputs/Hidden_Input.svelte
diff --git a/src/lib/Components/Quiz/answers/Input.svelte b/src/lib/Components/Inputs/Input.svelte
similarity index 100%
rename from src/lib/Components/Quiz/answers/Input.svelte
rename to src/lib/Components/Inputs/Input.svelte
diff --git a/src/lib/Components/Quiz/answers/Radio.svelte b/src/lib/Components/Inputs/Radio.svelte
similarity index 94%
rename from src/lib/Components/Quiz/answers/Radio.svelte
rename to src/lib/Components/Inputs/Radio.svelte
index ce04574..2c09d93 100644
--- a/src/lib/Components/Quiz/answers/Radio.svelte
+++ b/src/lib/Components/Inputs/Radio.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { idGenerator } from '../../../jsLibrari/IdGenerator'
+	import { idGenerator } from '../../utils/IdGenerator'
 	const id = idGenerator()
 
 	export let group = false
diff --git a/src/lib/Components/Quiz/answers/Range.svelte b/src/lib/Components/Inputs/Range.svelte
similarity index 100%
rename from src/lib/Components/Quiz/answers/Range.svelte
rename to src/lib/Components/Inputs/Range.svelte
diff --git a/src/lib/Components/Layout.svelte b/src/lib/Components/Layout.svelte
deleted file mode 100644
index a55ce2c..0000000
--- a/src/lib/Components/Layout.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<div>
-	<slot />
-</div>
-
-<style>
-	div {
-		height: 100%;
-		width: 100%;
-		overflow: auto;
-	}
-</style>
diff --git a/src/lib/Components/Overlay.svelte b/src/lib/Components/Layouts/LayoutImg.svelte
similarity index 62%
rename from src/lib/Components/Overlay.svelte
rename to src/lib/Components/Layouts/LayoutImg.svelte
index 53b8687..b712800 100644
--- a/src/lib/Components/Overlay.svelte
+++ b/src/lib/Components/Layouts/LayoutImg.svelte
@@ -1,24 +1,25 @@
 <script>
+	import Sharebutton from '../Buttons/Sharebutton.svelte'
 	export let img = null
 	export let shareData = null
 	export let alt = 'background image'
-	import Tab from './Game/Tab.svelte'
-	import Layout from './Layout.svelte'
 </script>
 
-<Layout>
+<div class="h-full w-full overflow-auto">
 	<section class="wraper">
 		{#if img}
 			<img src={img} {alt} />
 		{/if}
 		{#if shareData !== null && shareData !== false}
-			<Tab {shareData} />
+			<div class="shareButton">
+				<Sharebutton {shareData} />
+			</div>
 		{/if}
 		<section class="overlay">
 			<slot />
 		</section>
 	</section>
-</Layout>
+</div>
 
 <style lang="scss">
 	.wraper {
@@ -50,5 +51,22 @@
 			height: auto;
 			position: absolute;
 		}
+		.shareButton {
+			width: 100%;
+			height: calc(100% - 75%);
+			display: flex;
+			justify-content: flex-end;
+			align-items: center;
+			position: absolute;
+			top: 0;
+			padding: 50px;
+			background: none;
+			clip-path: inset(0);
+			z-index: 6;
+
+			@media (min-width: 768px) {
+				position: absolute;
+			}
+		}
 	}
 </style>
diff --git a/src/lib/Components/Game/Map/Circle.svelte b/src/lib/Components/Map/Circle.svelte
similarity index 100%
rename from src/lib/Components/Game/Map/Circle.svelte
rename to src/lib/Components/Map/Circle.svelte
diff --git a/src/lib/Components/Game/Map/Map.svelte b/src/lib/Components/Map/Map.svelte
similarity index 100%
rename from src/lib/Components/Game/Map/Map.svelte
rename to src/lib/Components/Map/Map.svelte
diff --git a/src/lib/Components/NavigationBar.svelte b/src/lib/Components/NavigationBar.svelte
deleted file mode 100644
index a5ba126..0000000
--- a/src/lib/Components/NavigationBar.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-    import FooterItem from "./NavBar_Item.svelte";
-
-    //Do not change!!!
-    export let items = [{"name":"Home", "active":true, "url":"/" ,"image_url": "data:image/svg+xml,%3Csvg width='23' height='24' viewBox='0 0 23 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.1572 22.2352V18.6679C8.1572 17.7573 8.90083 17.019 9.81813 17.019H13.1713C13.6118 17.019 14.0343 17.1928 14.3458 17.502C14.6573 17.8112 14.8323 18.2306 14.8323 18.6679V22.2352C14.8295 22.6138 14.979 22.9779 15.2477 23.2465C15.5164 23.5152 15.882 23.6663 16.2634 23.6663H18.5511C19.6195 23.6691 20.6452 23.2497 21.4017 22.5006C22.1581 21.7516 22.5833 20.7345 22.5833 19.6738V9.51101C22.5833 8.65421 22.2007 7.84149 21.5387 7.29179L13.7563 1.12152C12.4026 0.0396631 10.4629 0.0745936 9.14958 1.20448L1.54481 7.29179C0.85149 7.82529 0.437104 8.64042 0.416626 9.51101V19.6634C0.416626 21.8742 2.2219 23.6663 4.44883 23.6663H6.6843C7.47639 23.6663 8.12012 23.0319 8.12586 22.2456L8.1572 22.2352Z' fill='%2361646B'/%3E%3C/svg%3E%0A"},
-                        {"name":"Explore", "active":false, "url":"" , "image_url":"data:image/svg+xml,%3Csvg width='26' height='25' viewBox='0 0 26 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.58 11.0798L10.3585 14.9846L14.2622 13.7619L15.4848 9.85711L11.58 11.0798ZM9.02384 17.1931C8.79517 17.1931 8.57117 17.1033 8.40434 16.9376C8.17451 16.7066 8.09051 16.3671 8.18851 16.0579L10.047 10.1208C10.1322 9.84545 10.3468 9.63195 10.6198 9.54678L16.557 7.68828C16.8685 7.58911 17.2068 7.67428 17.4378 7.90411C17.6677 8.13511 17.7517 8.47461 17.6537 8.78378L15.7963 14.7209C15.7112 14.9951 15.4953 15.2098 15.2223 15.2949L9.28517 17.1534C9.19884 17.1803 9.11017 17.1931 9.02384 17.1931Z' fill='%2361646B'/%3E%3Cmask id='mask0_1515_2517' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='26' height='25'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.833374 0.333008H25.0088V24.5083H0.833374V0.333008Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_2517)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.921 2.08301C7.22063 2.08301 2.58313 6.72167 2.58313 12.4208C2.58313 18.1212 7.22063 22.7587 12.921 22.7587C18.6213 22.7587 23.2588 18.1212 23.2588 12.4208C23.2588 6.72167 18.6213 2.08301 12.921 2.08301M12.921 24.5087C6.2558 24.5087 0.83313 19.086 0.83313 12.4208C0.83313 5.75567 6.2558 0.333008 12.921 0.333008C19.5861 0.333008 25.0088 5.75567 25.0088 12.4208C25.0088 19.086 19.5861 24.5087 12.921 24.5087' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E "}, 
-                        {"name":"Map", "active":false, "url":"/map" , "image_url":"data:image/svg+xml,%3Csvg width='18' height='24' viewBox='0 0 18 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.833496 8.80925C0.833496 4.29425 4.48516 0.642578 9.00016 0.642578C13.5152 0.642578 17.1668 4.29425 17.1668 8.80925C17.1668 13.6742 12.0102 20.3826 9.8985 22.9376C9.43183 23.4976 8.58016 23.4976 8.1135 22.9376C5.99016 20.3826 0.833496 13.6742 0.833496 8.80925ZM6.0835 8.80925C6.0835 10.4192 7.39016 11.7259 9.00016 11.7259C10.6102 11.7259 11.9168 10.4192 11.9168 8.80925C11.9168 7.19924 10.6102 5.89258 9.00016 5.89258C7.39016 5.89258 6.0835 7.19924 6.0835 8.80925Z' fill='%2361646B' /%3E%3C/svg%3E%0A"}, 
-                        {"name":"Trips", "active":false, "url":"" , "image_url":"data:image/svg+xml,%3Csvg width='26' height='22' viewBox='0 0 26 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.3662 5.53348C14.8832 5.53348 14.4912 5.14148 14.4912 4.65848V1.83398C14.4912 1.35098 14.8832 0.958984 15.3662 0.958984C15.8492 0.958984 16.2412 1.35098 16.2412 1.83398V4.65848C16.2412 5.14148 15.8492 5.53348 15.3662 5.53348Z' fill='%2361646B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.3662 20.8318C14.8832 20.8318 14.4912 20.4398 14.4912 19.9568V17.5967C14.4912 17.1125 14.8832 16.7217 15.3662 16.7217C15.8492 16.7217 16.2412 17.1125 16.2412 17.5967V19.9568C16.2412 20.4398 15.8492 20.8318 15.3662 20.8318Z' fill='%2361646B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.3662 14.4634C14.8832 14.4634 14.4912 14.0714 14.4912 13.5884V7.96387C14.4912 7.48087 14.8832 7.08887 15.3662 7.08887C15.8492 7.08887 16.2412 7.48087 16.2412 7.96387V13.5884C16.2412 14.0714 15.8492 14.4634 15.3662 14.4634Z' fill='%2361646B'/%3E%3Cmask id='mask0_1515_513' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='26' height='22'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.666626 0.666992H25.75V21.0833H0.666626V0.666992Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_513)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.41663 14.1467V16.4088C2.41663 18.0212 3.75013 19.3337 5.38929 19.3337H21.0273C22.6665 19.3337 24 18.0212 24 16.4088V14.1467C22.5405 13.7628 21.4601 12.4422 21.4601 10.8765C21.4601 9.30966 22.5393 7.99016 24 7.60633L23.9988 5.34183C23.9988 3.72949 22.6653 2.41699 21.0261 2.41699H5.39046C3.75129 2.41699 2.41779 3.72949 2.41779 5.34183L2.41663 7.69616C3.89479 8.05899 4.95646 9.32599 4.95646 10.8765C4.95646 12.4422 3.87613 13.7628 2.41663 14.1467ZM21.0273 21.0837H5.38929C2.78529 21.0837 0.666626 18.986 0.666626 16.4088V13.3848C0.666626 12.9018 1.05863 12.5098 1.54163 12.5098C2.45979 12.5098 3.20646 11.7772 3.20646 10.8765C3.20646 10.0015 2.49013 9.34116 1.54163 9.34116C1.30946 9.34116 1.08663 9.24899 0.923293 9.08449C0.758793 8.92116 0.666626 8.69716 0.666626 8.46616L0.667793 5.34183C0.667793 2.76466 2.78646 0.666992 5.39046 0.666992H21.0261C23.6301 0.666992 25.7488 2.76466 25.7488 5.34183L25.75 8.36816C25.75 8.59916 25.6578 8.82316 25.4933 8.98649C25.33 9.15099 25.1071 9.24316 24.875 9.24316C23.9568 9.24316 23.2101 9.97583 23.2101 10.8765C23.2101 11.7772 23.9568 12.5098 24.875 12.5098C25.358 12.5098 25.75 12.9018 25.75 13.3848V16.4088C25.75 18.986 23.6313 21.0837 21.0273 21.0837Z' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E "}, 
-                        {"name":"Profile", "active":false, "url":"" , "image_url":"data:image/svg+xml,%3Csvg width='19' height='24' viewBox='0 0 19 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='19' height='10'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.166626 14.9121H18.6465V23.5151H0.166626V14.9121Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40767 16.6621C4.4365 16.6621 1.9165 17.5161 1.9165 19.2019C1.9165 20.9029 4.4365 21.7651 9.40767 21.7651C14.3777 21.7651 16.8965 20.9111 16.8965 19.2253C16.8965 17.5243 14.3777 16.6621 9.40767 16.6621ZM9.40767 23.5151C7.12217 23.5151 0.166504 23.5151 0.166504 19.2019C0.166504 15.3566 5.441 14.9121 9.40767 14.9121C11.6932 14.9121 18.6465 14.9121 18.6465 19.2253C18.6465 23.0706 13.3732 23.5151 9.40767 23.5151Z' fill='%2361646B'/%3E%3C/g%3E%3Cmask id='mask1_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='3' y='0' width='13' height='13'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.21143 0.333008H15.6015V12.7214H3.21143V0.333008Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40763 1.99901C6.9098 1.99901 4.87746 4.03017 4.87746 6.52801C4.8693 9.01767 6.88646 11.0477 9.3738 11.057L9.40763 11.89V11.057C11.9043 11.057 13.9355 9.02467 13.9355 6.52801C13.9355 4.03017 11.9043 1.99901 9.40763 1.99901ZM9.40763 12.7218H9.3703C5.9613 12.7113 3.1998 9.93117 3.21146 6.52451C3.21146 3.11201 5.99046 0.333008 9.40763 0.333008C12.8236 0.333008 15.6015 3.11201 15.6015 6.52801C15.6015 9.94401 12.8236 12.7218 9.40763 12.7218Z' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E "}
-                        ]
-</script>
-
-<div class="footer">
-    {#each items as item}
-        <FooterItem active={item.active} name={item.name} url={item.url}>
-            {#if item.active}
-                <img style="filter: invert(44%) sepia(66%) saturate(6619%) hue-rotate(222deg) brightness(98%) contrast(88%);" src={item.image_url}>
-            {:else}
-                <img src={item.image_url}>
-            {/if}
-        </FooterItem>
-    {/each}
-</div>
-
-<style>
-	.footer {
-        width: 100%;
-		position: absolute;
-
-		background: white;
-		width: calc(100%);
-
-
-		bottom: 0px;
-		left: 0px;
-
-		border-top: 1px solid #EFEFF0;
-		display: flex;
-		
-		flex-direction: row;
-		align-items: center;
-		justify-content: space-around;
-		padding: 15px 10px 25px 10px;
-	}
-
-    @media screen and (max-width: 320px){
-        .footer {
-            gap: 0px;
-            justify-content: space-around;
-            padding: 10px 0 15px 0;
-        }
-    }
-</style>
\ No newline at end of file
diff --git a/src/lib/Components/Quiz/Heading.svelte b/src/lib/Components/Quiz/Heading.svelte
deleted file mode 100644
index 4c53076..0000000
--- a/src/lib/Components/Quiz/Heading.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-	export let style = ''
-</script>
-
-<div {style}>
-	<slot />
-</div>
-
-<style>
-	div {
-		height: var(--quizHeader);
-		width: 100%;
-		display: flex;
-		position: relative;
-		top: 0;
-		justify-content: center;
-		align-items: center;
-	}
-</style>
diff --git a/src/lib/Components/Quiz/ImageFullScreen.svelte b/src/lib/Components/Quiz/ImageFullScreen.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/Components/Quiz/QuizWrap.svelte b/src/lib/Components/Quiz/QuizWrap.svelte
deleted file mode 100644
index bb231ef..0000000
--- a/src/lib/Components/Quiz/QuizWrap.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-</script>
-
-<section>
-	<slot />
-</section>
-
-<style>
-	section {
-		display: flex;
-		padding: 10px;
-	}
-</style>
diff --git a/src/lib/Components/Quiz/answers/CheckBox.svelte b/src/lib/Components/Quiz/answers/CheckBox.svelte
deleted file mode 100644
index 0374dca..0000000
--- a/src/lib/Components/Quiz/answers/CheckBox.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-	import { idGenerator } from '$lib/jsLibrari/IdGenerator'
-	const id = idGenerator()
-
-	export let checked = true
-</script>
-
-<div class="cover h-14">
-	<div class="h-14 w-14 flex justify-center items-center">
-		<input
-			{id}
-			bind:checked
-			type="checkbox"
-			class="relative w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-[#96ddff] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-[#96ddff] focus:ring-[#96ddff] ring-offset-white focus:outline-none appearance-none before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-[var(--blue)] before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-20"
-		/>
-	</div>
-	<label for={id}><slot /></label>
-</div>
-
-<style>
-	.cover {
-		height: 100%;
-		width: fit-content;
-		background: white;
-		display: grid;
-		grid-template-columns: 56px auto;
-		gap: 20px;
-		padding: 4px;
-	}
-
-	label {
-		font-size: 100%;
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		font-size: 140%;
-	}
-</style>
diff --git a/src/lib/Components/Game/Bubble.svelte b/src/lib/Components/common/Bubble.svelte
similarity index 100%
rename from src/lib/Components/Game/Bubble.svelte
rename to src/lib/Components/common/Bubble.svelte
diff --git a/src/lib/Components/Game/Carousel.svelte b/src/lib/Components/common/Carousel.svelte
similarity index 100%
rename from src/lib/Components/Game/Carousel.svelte
rename to src/lib/Components/common/Carousel.svelte
diff --git a/src/lib/Components/FullWidthRow.svelte b/src/lib/Components/common/FullWidthRow.svelte
similarity index 100%
rename from src/lib/Components/FullWidthRow.svelte
rename to src/lib/Components/common/FullWidthRow.svelte
diff --git a/src/lib/Components/Image.svelte b/src/lib/Components/common/Image.svelte
similarity index 100%
rename from src/lib/Components/Image.svelte
rename to src/lib/Components/common/Image.svelte
diff --git a/src/lib/Components/ImageSlider.svelte b/src/lib/Components/common/ImageSlider.svelte
similarity index 100%
rename from src/lib/Components/ImageSlider.svelte
rename to src/lib/Components/common/ImageSlider.svelte
diff --git a/src/lib/Components/Loading.svelte b/src/lib/Components/common/Loading.svelte
similarity index 100%
rename from src/lib/Components/Loading.svelte
rename to src/lib/Components/common/Loading.svelte
diff --git a/src/lib/Components/NavBar_Item.svelte b/src/lib/Components/common/NavBar_Item.svelte
similarity index 100%
rename from src/lib/Components/NavBar_Item.svelte
rename to src/lib/Components/common/NavBar_Item.svelte
diff --git a/src/lib/Components/common/NavigationBar.svelte b/src/lib/Components/common/NavigationBar.svelte
new file mode 100644
index 0000000..8398517
--- /dev/null
+++ b/src/lib/Components/common/NavigationBar.svelte
@@ -0,0 +1,83 @@
+<script>
+	import FooterItem from './NavBar_Item.svelte'
+
+	//Do not change!!!
+	export let items = [
+		{
+			name: 'Home',
+			active: true,
+			url: '/',
+			image_url:
+				"data:image/svg+xml,%3Csvg width='23' height='24' viewBox='0 0 23 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.1572 22.2352V18.6679C8.1572 17.7573 8.90083 17.019 9.81813 17.019H13.1713C13.6118 17.019 14.0343 17.1928 14.3458 17.502C14.6573 17.8112 14.8323 18.2306 14.8323 18.6679V22.2352C14.8295 22.6138 14.979 22.9779 15.2477 23.2465C15.5164 23.5152 15.882 23.6663 16.2634 23.6663H18.5511C19.6195 23.6691 20.6452 23.2497 21.4017 22.5006C22.1581 21.7516 22.5833 20.7345 22.5833 19.6738V9.51101C22.5833 8.65421 22.2007 7.84149 21.5387 7.29179L13.7563 1.12152C12.4026 0.0396631 10.4629 0.0745936 9.14958 1.20448L1.54481 7.29179C0.85149 7.82529 0.437104 8.64042 0.416626 9.51101V19.6634C0.416626 21.8742 2.2219 23.6663 4.44883 23.6663H6.6843C7.47639 23.6663 8.12012 23.0319 8.12586 22.2456L8.1572 22.2352Z' fill='%2361646B'/%3E%3C/svg%3E%0A",
+		},
+		{
+			name: 'Explore',
+			active: false,
+			url: '',
+			image_url:
+				"data:image/svg+xml,%3Csvg width='26' height='25' viewBox='0 0 26 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.58 11.0798L10.3585 14.9846L14.2622 13.7619L15.4848 9.85711L11.58 11.0798ZM9.02384 17.1931C8.79517 17.1931 8.57117 17.1033 8.40434 16.9376C8.17451 16.7066 8.09051 16.3671 8.18851 16.0579L10.047 10.1208C10.1322 9.84545 10.3468 9.63195 10.6198 9.54678L16.557 7.68828C16.8685 7.58911 17.2068 7.67428 17.4378 7.90411C17.6677 8.13511 17.7517 8.47461 17.6537 8.78378L15.7963 14.7209C15.7112 14.9951 15.4953 15.2098 15.2223 15.2949L9.28517 17.1534C9.19884 17.1803 9.11017 17.1931 9.02384 17.1931Z' fill='%2361646B'/%3E%3Cmask id='mask0_1515_2517' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='26' height='25'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.833374 0.333008H25.0088V24.5083H0.833374V0.333008Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_2517)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.921 2.08301C7.22063 2.08301 2.58313 6.72167 2.58313 12.4208C2.58313 18.1212 7.22063 22.7587 12.921 22.7587C18.6213 22.7587 23.2588 18.1212 23.2588 12.4208C23.2588 6.72167 18.6213 2.08301 12.921 2.08301M12.921 24.5087C6.2558 24.5087 0.83313 19.086 0.83313 12.4208C0.83313 5.75567 6.2558 0.333008 12.921 0.333008C19.5861 0.333008 25.0088 5.75567 25.0088 12.4208C25.0088 19.086 19.5861 24.5087 12.921 24.5087' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E ",
+		},
+		{
+			name: 'Map',
+			active: false,
+			url: '/map',
+			image_url:
+				"data:image/svg+xml,%3Csvg width='18' height='24' viewBox='0 0 18 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.833496 8.80925C0.833496 4.29425 4.48516 0.642578 9.00016 0.642578C13.5152 0.642578 17.1668 4.29425 17.1668 8.80925C17.1668 13.6742 12.0102 20.3826 9.8985 22.9376C9.43183 23.4976 8.58016 23.4976 8.1135 22.9376C5.99016 20.3826 0.833496 13.6742 0.833496 8.80925ZM6.0835 8.80925C6.0835 10.4192 7.39016 11.7259 9.00016 11.7259C10.6102 11.7259 11.9168 10.4192 11.9168 8.80925C11.9168 7.19924 10.6102 5.89258 9.00016 5.89258C7.39016 5.89258 6.0835 7.19924 6.0835 8.80925Z' fill='%2361646B' /%3E%3C/svg%3E%0A",
+		},
+		{
+			name: 'Trips',
+			active: false,
+			url: '',
+			image_url:
+				"data:image/svg+xml,%3Csvg width='26' height='22' viewBox='0 0 26 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.3662 5.53348C14.8832 5.53348 14.4912 5.14148 14.4912 4.65848V1.83398C14.4912 1.35098 14.8832 0.958984 15.3662 0.958984C15.8492 0.958984 16.2412 1.35098 16.2412 1.83398V4.65848C16.2412 5.14148 15.8492 5.53348 15.3662 5.53348Z' fill='%2361646B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.3662 20.8318C14.8832 20.8318 14.4912 20.4398 14.4912 19.9568V17.5967C14.4912 17.1125 14.8832 16.7217 15.3662 16.7217C15.8492 16.7217 16.2412 17.1125 16.2412 17.5967V19.9568C16.2412 20.4398 15.8492 20.8318 15.3662 20.8318Z' fill='%2361646B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.3662 14.4634C14.8832 14.4634 14.4912 14.0714 14.4912 13.5884V7.96387C14.4912 7.48087 14.8832 7.08887 15.3662 7.08887C15.8492 7.08887 16.2412 7.48087 16.2412 7.96387V13.5884C16.2412 14.0714 15.8492 14.4634 15.3662 14.4634Z' fill='%2361646B'/%3E%3Cmask id='mask0_1515_513' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='26' height='22'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.666626 0.666992H25.75V21.0833H0.666626V0.666992Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_513)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.41663 14.1467V16.4088C2.41663 18.0212 3.75013 19.3337 5.38929 19.3337H21.0273C22.6665 19.3337 24 18.0212 24 16.4088V14.1467C22.5405 13.7628 21.4601 12.4422 21.4601 10.8765C21.4601 9.30966 22.5393 7.99016 24 7.60633L23.9988 5.34183C23.9988 3.72949 22.6653 2.41699 21.0261 2.41699H5.39046C3.75129 2.41699 2.41779 3.72949 2.41779 5.34183L2.41663 7.69616C3.89479 8.05899 4.95646 9.32599 4.95646 10.8765C4.95646 12.4422 3.87613 13.7628 2.41663 14.1467ZM21.0273 21.0837H5.38929C2.78529 21.0837 0.666626 18.986 0.666626 16.4088V13.3848C0.666626 12.9018 1.05863 12.5098 1.54163 12.5098C2.45979 12.5098 3.20646 11.7772 3.20646 10.8765C3.20646 10.0015 2.49013 9.34116 1.54163 9.34116C1.30946 9.34116 1.08663 9.24899 0.923293 9.08449C0.758793 8.92116 0.666626 8.69716 0.666626 8.46616L0.667793 5.34183C0.667793 2.76466 2.78646 0.666992 5.39046 0.666992H21.0261C23.6301 0.666992 25.7488 2.76466 25.7488 5.34183L25.75 8.36816C25.75 8.59916 25.6578 8.82316 25.4933 8.98649C25.33 9.15099 25.1071 9.24316 24.875 9.24316C23.9568 9.24316 23.2101 9.97583 23.2101 10.8765C23.2101 11.7772 23.9568 12.5098 24.875 12.5098C25.358 12.5098 25.75 12.9018 25.75 13.3848V16.4088C25.75 18.986 23.6313 21.0837 21.0273 21.0837Z' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E ",
+		},
+		{
+			name: 'Profile',
+			active: false,
+			url: '',
+			image_url:
+				"data:image/svg+xml,%3Csvg width='19' height='24' viewBox='0 0 19 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='19' height='10'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.166626 14.9121H18.6465V23.5151H0.166626V14.9121Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40767 16.6621C4.4365 16.6621 1.9165 17.5161 1.9165 19.2019C1.9165 20.9029 4.4365 21.7651 9.40767 21.7651C14.3777 21.7651 16.8965 20.9111 16.8965 19.2253C16.8965 17.5243 14.3777 16.6621 9.40767 16.6621ZM9.40767 23.5151C7.12217 23.5151 0.166504 23.5151 0.166504 19.2019C0.166504 15.3566 5.441 14.9121 9.40767 14.9121C11.6932 14.9121 18.6465 14.9121 18.6465 19.2253C18.6465 23.0706 13.3732 23.5151 9.40767 23.5151Z' fill='%2361646B'/%3E%3C/g%3E%3Cmask id='mask1_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='3' y='0' width='13' height='13'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.21143 0.333008H15.6015V12.7214H3.21143V0.333008Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40763 1.99901C6.9098 1.99901 4.87746 4.03017 4.87746 6.52801C4.8693 9.01767 6.88646 11.0477 9.3738 11.057L9.40763 11.89V11.057C11.9043 11.057 13.9355 9.02467 13.9355 6.52801C13.9355 4.03017 11.9043 1.99901 9.40763 1.99901ZM9.40763 12.7218H9.3703C5.9613 12.7113 3.1998 9.93117 3.21146 6.52451C3.21146 3.11201 5.99046 0.333008 9.40763 0.333008C12.8236 0.333008 15.6015 3.11201 15.6015 6.52801C15.6015 9.94401 12.8236 12.7218 9.40763 12.7218Z' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E ",
+		},
+	]
+</script>
+
+<div class="footer">
+	{#each items as item}
+		<FooterItem active={item.active} name={item.name} url={item.url}>
+			{#if item.active}
+				<img style="filter: invert(44%) sepia(66%) saturate(6619%) hue-rotate(222deg) brightness(98%) contrast(88%);" src={item.image_url} />
+			{:else}
+				<img src={item.image_url} />
+			{/if}
+		</FooterItem>
+	{/each}
+</div>
+
+<style>
+	.footer {
+		width: 100%;
+		position: absolute;
+
+		background: white;
+		width: calc(100%);
+
+		bottom: 0px;
+		left: 0px;
+
+		border-top: 1px solid #efeff0;
+		display: flex;
+
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-around;
+		padding: 15px 10px 25px 10px;
+	}
+
+	@media screen and (max-width: 320px) {
+		.footer {
+			gap: 0px;
+			justify-content: space-around;
+			padding: 10px 0 15px 0;
+		}
+	}
+</style>
diff --git a/src/lib/Components/Redirect.svelte b/src/lib/Components/common/Redirect.svelte
similarity index 100%
rename from src/lib/Components/Redirect.svelte
rename to src/lib/Components/common/Redirect.svelte
diff --git a/src/lib/Components/Section.svelte b/src/lib/Components/common/Section.svelte
similarity index 100%
rename from src/lib/Components/Section.svelte
rename to src/lib/Components/common/Section.svelte
diff --git a/src/lib/Components/game/Bubble.svelte b/src/lib/Components/game/Bubble.svelte
deleted file mode 100644
index 385819f..0000000
--- a/src/lib/Components/game/Bubble.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script>
-	const col = {
-		blue: '#4263EB',
-		white: 'white',
-		txt_blue: 'white',
-		txt_white: '#999999',
-	}
-	export let background
-</script>
-
-<div class="bubble" style={`background: ${col[background]}; color: ${col[`txt_${background}`]}`}>
-	<slot name="icon" />
-	<span class="text"><slot /></span>
-</div>
-
-<style>
-	.bubble {
-		border-radius: 20px;
-		width: fit-content;
-		height: 38px;
-		display: flex;
-		align-items: center;
-		flex-direction: row;
-		align-items: center;
-		justify-content: space-between;
-		padding: 6px 10px;
-		gap: 10px;
-		border: 1px solid #4263eb;
-		font-size: 17px;
-		color: white;
-	}
-	.text {
-		font-family: 'Source Sans Pro';
-		font-style: normal;
-		font-weight: 700;
-		font-size: 20px;
-		line-height: 25px;
-		display: flex;
-		align-items: center;
-		text-align: center;
-	}
-</style>
diff --git a/src/lib/Components/game/Heading.svelte b/src/lib/Components/game/Heading.svelte
deleted file mode 100644
index dd75e8a..0000000
--- a/src/lib/Components/game/Heading.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script>
-</script>
-
-<div>
-	<h1>
-		<slot />
-	</h1>
-
-	<slot name="bubbles" />
-</div>
-
-<style lang="scss">
-	div {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 10px;
-	}
-	h1 {
-		font-style: normal;
-		font-weight: 600;
-		font-size: 36px;
-		line-height: 45px;
-		color: #110042;
-	}
-</style>
diff --git a/src/lib/Components/game/Map/Circle.svelte b/src/lib/Components/game/Map/Circle.svelte
deleted file mode 100644
index 2c1130f..0000000
--- a/src/lib/Components/game/Map/Circle.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script>
-	import { Marker } from '@beyonk/svelte-mapbox'
-	import { createEventDispatcher, getContext } from 'svelte'
-
-	export let lat = 0
-	export let lng = 0
-	export let round = (1 / 110.574 / 1000) * 12 //cca 12m nutno pozměnit!!!!!!!!!! tento komentář nemazat
-	console.log({ round, lat, lng })
-	export let user = { lat: 0, lng: 0 }
-
-	const dispatch = createEventDispatcher()
-
-	let Mlat = [lat - round, lat + round]
-	let Mlng = [lng - round, lng + round]
-
-	$: isIn = user ? user.lat > Mlat[0] && user.lat < Mlat[1] && user.lng > Mlng[0] && user.lng < Mlng[1] : null
-
-	$: isIn && dispatch('enter', { lat, lng, user })
-</script>
-
-<Marker popup={false} {lat} {lng}>
-	<svg width="28" height="27" viewBox="0 0 112 108" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<path
-			d="M64.488 103.367L89.7283 62.4464C106.409 35.4037 86.9542 0.547852 55.1801 0.547852C22.7617 0.547852 3.42399 36.6756 21.4041 63.6502L48.0703 103.656C52.0131 109.571 60.7561 109.417 64.488 103.367Z"
-			fill="url(#paint0_radial_1068_1071)"
-			fill-opacity="0.4"
-		/>
-		<path
-			d="M63.4756 91.4251L82.4058 60.4583C94.9161 39.9936 80.3252 13.6162 56.4947 13.6162C32.1808 13.6162 17.6776 40.9562 31.1627 61.3693L51.1623 91.644C54.1194 96.1203 60.6766 96.0037 63.4756 91.4251Z"
-			fill="url(#paint1_linear_1068_1071)"
-		/>
-		<circle cx="55.6164" cy="35.6164" r="11.6164" fill="white" />
-		<defs>
-			<radialGradient
-				id="paint0_radial_1068_1071"
-				cx="0"
-				cy="0"
-				r="1"
-				gradientUnits="userSpaceOnUse"
-				gradientTransform="translate(55.1781 54.2739) rotate(90.2138) scale(47.7265 37.7293)"
-			>
-				<stop offset="0.865366" stop-color="#FFD325" />
-				<stop offset="1" stop-color="#FFE066" stop-opacity="0.1" />
-			</radialGradient>
-			<linearGradient id="paint1_linear_1068_1071" x1="40.9078" y1="34.3967" x2="71.9265" y2="73.4203" gradientUnits="userSpaceOnUse">
-				<stop stop-color="#FFBF00" />
-				<stop offset="1" stop-color="#DD8706" />
-			</linearGradient>
-		</defs>
-	</svg>
-</Marker>
diff --git a/src/lib/Components/game/Map/Map.svelte b/src/lib/Components/game/Map/Map.svelte
deleted file mode 100644
index c5e0590..0000000
--- a/src/lib/Components/game/Map/Map.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<script>
-	import { Map, controls } from '@beyonk/svelte-mapbox'
-	import { createEventDispatcher } from 'svelte'
-	export let mapComponent
-	let geolocateControl
-	let className = ''
-	export { className as class }
-
-	let user = { lat: 0, lng: 0 }
-
-	const dispatch = createEventDispatcher()
-
-	export let radius = false
-	export let center = { lng: 0, lat: 0 }
-	export const geo = (e) => {
-		geolocateControl.dispatchEvent('geolocate')
-		if (navigator.geolocation) {
-			navigator.geolocation.getCurrentPosition((position) => {
-				const { latitude, longitude } = position.coords
-				user = { lat: latitude, lng: longitude }
-				dispatch('move', user)
-			})
-		} else {
-			alert("Can't load your location!")
-		}
-	}
-</script>
-
-<div class={className} class:radius>
-	<Map
-		class="h-full"
-		accessToken="pk.eyJ1IjoiZXJhbnQ0MiIsImEiOiJjbDdybXo4dmswZ3E5M3FwMnFsazdpb3VoIn0.wXblbreOUt3e8N81CAH0Wg"
-		style="mapbox://styles/mapbox/outdoors-v11"
-		bind:this={mapComponent}
-		on:ready={() => {
-			mapComponent.resize()
-			mapComponent.setCenter([center.lng, center.lat], 14)
-		}}
-		zoom={14}
-	>
-		<slot {user} />
-	</Map>
-</div>
-
-<style lang="scss">
-	div {
-		overflow: hidden;
-
-		&.radius {
-			border-radius: 25px;
-		}
-	}
-
-	:global(.mapboxgl-marker) {
-		cursor: pointer;
-	}
-</style>
diff --git a/src/lib/Components/game/Tab.svelte b/src/lib/Components/game/Tab.svelte
deleted file mode 100644
index 0f3c781..0000000
--- a/src/lib/Components/game/Tab.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-	import Sharebutton from '../Sharebutton.svelte'
-	export let shareData
-</script>
-
-<div>
-	<Sharebutton {shareData} />
-</div>
-
-<style lang="scss">
-	div {
-		width: 100%;
-		height: calc(100% - 75%);
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-		position: absolute;
-		top: 0;
-		padding: 50px;
-		background: none;
-		clip-path: inset(0);
-		z-index: 6;
-
-		@media (min-width: 768px) {
-			position: absolute;
-		}
-	}
-</style>
diff --git a/src/lib/Components/Icons/Point.svelte b/src/lib/svg/Point.svelte
similarity index 100%
rename from src/lib/Components/Icons/Point.svelte
rename to src/lib/svg/Point.svelte
diff --git a/src/lib/Components/Icons/Share.svelte b/src/lib/svg/Share.svelte
similarity index 100%
rename from src/lib/Components/Icons/Share.svelte
rename to src/lib/svg/Share.svelte
diff --git a/src/lib/Components/Icons/Star.svelte b/src/lib/svg/Star.svelte
similarity index 100%
rename from src/lib/Components/Icons/Star.svelte
rename to src/lib/svg/Star.svelte
diff --git a/src/lib/jsLibrari/IdGenerator.js b/src/lib/utils/IdGenerator.js
similarity index 100%
rename from src/lib/jsLibrari/IdGenerator.js
rename to src/lib/utils/IdGenerator.js
diff --git a/src/routes/error.svelte b/src/routes/error.svelte
index cc2ee57..99d5667 100644
--- a/src/routes/error.svelte
+++ b/src/routes/error.svelte
@@ -1,14 +1,13 @@
 <script>
-	import Heading from '../lib/Components/Game/Heading.svelte'
-	import Overlay from '../lib/Components/Overlay.svelte'
-	import Section from '../lib/Components/Section.svelte'
-	import Button from '../lib/Components/Button.svelte'
+	import Overlay from '../lib/Components/Layouts/LayoutImg.svelte'
+	import Section from '../lib/Components/common/Section.svelte'
+	import Button from '../lib/Components/Buttons/Button.svelte'
 </script>
 
 <Overlay img="/assets/images/main.jpg">
-	<Heading>
+	<div>
 		<span>Erant</span>
-	</Heading>
+	</div>
 
 	<Section title="Nastala chyba">
 		<p>Je nám líto ale tento zážitek nebyl nalezen.</p>
diff --git a/src/lib/Components/Quiz/Layout.svelte b/src/routes/game/Components/Layout.svelte
similarity index 85%
rename from src/lib/Components/Quiz/Layout.svelte
rename to src/routes/game/Components/Layout.svelte
index b683dd7..ce5050f 100644
--- a/src/lib/Components/Quiz/Layout.svelte
+++ b/src/routes/game/Components/Layout.svelte
@@ -1,22 +1,20 @@
 <script>
-	import Heading from './Heading.svelte'
-	import Layout from '../Layout.svelte'
-	import Section from '../Section.svelte'
-	import Button from '../Button.svelte'
-	import Image from '../Image.svelte'
+	import Section from '../../../lib/Components/common/Section.svelte'
+	import Button from '../../../lib/Components/Buttons/Button.svelte'
+	import Image from '../../../lib/Components/common/Image.svelte'
 
 	export let control, nextQuestion
 	export let imgSrc
 </script>
 
-<Layout>
+<div>
 	<div class="wrap">
-		<Heading>
+		<div class="h-[var(--quizHeader)] w-full flex relative top-0 justify-center items-center">
 			<div class="flex justify-center items-center flex-col flex-wrap gap-3">
 				<span class="title"><slot name="title" /></span>
 				<span style="width: 100%"><Image class="w-full h-[200px]" src={imgSrc} /></span>
 			</div>
-		</Heading>
+		</div>
 		<Section style="height: calc(100% - var(--quizHeader)); position: relative">
 			<div class="flex items-center justify-center flex-col w-full gap-24 p-4">
 				<div class="popis">
@@ -41,7 +39,7 @@
 			</div>
 		</Section>
 	</div>
-</Layout>
+</div>
 
 <style lang="scss">
 	.wrap {
diff --git a/src/lib/Components/Forms/Finish.svelte b/src/routes/game/Forms/Finish.svelte
similarity index 58%
rename from src/lib/Components/Forms/Finish.svelte
rename to src/routes/game/Forms/Finish.svelte
index d2dfed7..88b70d6 100644
--- a/src/lib/Components/Forms/Finish.svelte
+++ b/src/routes/game/Forms/Finish.svelte
@@ -1,13 +1,13 @@
 <script>
-	import Overlay from '$lib/Components/Overlay.svelte'
-	import Button from '$lib/Components/Button.svelte'
+	import LayoutImg from './../../../lib/Components/Layouts/LayoutImg.svelte'
+	import Button from '../../../lib/Components/Buttons/Button.svelte'
 	export let img
 </script>
 
-<Overlay {img}>
+<LayoutImg {img}>
 	<div class="h-full w-full flex justify-self-center justify-center relative top-20"><slot /></div>
 	<div><Button href="/">ukončit hru</Button></div>
-</Overlay>
+</LayoutImg>
 
 <style>
 	div {
diff --git a/src/lib/Components/Forms/IntervalForm.svelte b/src/routes/game/Forms/IntervalForm.svelte
similarity index 87%
rename from src/lib/Components/Forms/IntervalForm.svelte
rename to src/routes/game/Forms/IntervalForm.svelte
index 435ae26..93617a0 100644
--- a/src/lib/Components/Forms/IntervalForm.svelte
+++ b/src/routes/game/Forms/IntervalForm.svelte
@@ -1,6 +1,6 @@
 <script>
-	import Layout from '../Quiz/Layout.svelte'
-	import Input from '../Quiz/answers/Input.svelte'
+	import Layout from '../Components/Layout.svelte'
+	import Input from '../../../lib/Components/Inputs/Input.svelte'
 	let title = 'title' //exportovat ze zhora
 
 	export let params // { type: 'interval', correct: [0, 3], quesion: 'text otazky', description: '', options: null },
diff --git a/src/lib/Components/Forms/MultiChoiceForm.svelte b/src/routes/game/Forms/MultiChoiceForm.svelte
similarity index 89%
rename from src/lib/Components/Forms/MultiChoiceForm.svelte
rename to src/routes/game/Forms/MultiChoiceForm.svelte
index 9712f75..251af60 100644
--- a/src/lib/Components/Forms/MultiChoiceForm.svelte
+++ b/src/routes/game/Forms/MultiChoiceForm.svelte
@@ -1,6 +1,6 @@
 <script>
-	import Layout from '../Quiz/Layout.svelte'
-	import CheckBox from '../Quiz/answers/Checkbox.svelte'
+	import Layout from '../Components/Layout.svelte'
+	import CheckBox from '../../../lib/Components/Inputs/Checkbox.svelte'
 	import parseQuestion from '$lib/utils/parseQuestion'
 
 	export let gameData
diff --git a/src/lib/Components/Forms/NumberForm.svelte b/src/routes/game/Forms/NumberForm.svelte
similarity index 87%
rename from src/lib/Components/Forms/NumberForm.svelte
rename to src/routes/game/Forms/NumberForm.svelte
index b2bc977..879b5e4 100644
--- a/src/lib/Components/Forms/NumberForm.svelte
+++ b/src/routes/game/Forms/NumberForm.svelte
@@ -1,6 +1,6 @@
 <script>
-	import Layout from '../Quiz/Layout.svelte'
-	import Input from '../Quiz/answers/Input.svelte'
+	import Layout from '../Components/Layout.svelte'
+	import Input from '../../../lib/Components/Inputs/Input.svelte'
 	import parseQuestion from '$lib/utils/parseQuestion'
 
 	export let gameData
diff --git a/src/lib/Components/Forms/QrCode.svelte b/src/routes/game/Forms/QrCode.svelte
similarity index 100%
rename from src/lib/Components/Forms/QrCode.svelte
rename to src/routes/game/Forms/QrCode.svelte
diff --git a/src/lib/Components/Forms/Renderer.svelte b/src/routes/game/Forms/Renderer.svelte
similarity index 94%
rename from src/lib/Components/Forms/Renderer.svelte
rename to src/routes/game/Forms/Renderer.svelte
index 1c809ff..3e9e63d 100644
--- a/src/lib/Components/Forms/Renderer.svelte
+++ b/src/routes/game/Forms/Renderer.svelte
@@ -1,4 +1,5 @@
 <script>
+	import Circle from './../../../lib/Components/Map/Circle.svelte'
 	import TextForm from './TextForm.svelte'
 	import NumberForm from './NumberForm.svelte'
 	import SingleForm from './SingleChoiceForm.svelte'
@@ -6,11 +7,9 @@
 	import IntervalForm from './IntervalForm.svelte'
 	import QrCode from './QrCode.svelte'
 	import Finish from './Finish.svelte'
-	import parseQuestion from '$lib/utils/parseQuestion'
-	import Circle from '../Game/Map/Circle.svelte'
-	import Map from '../Game/Map/Map.svelte'
 	import { data } from '$lib/stores/game'
 	import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
+	import Map from '$lib/Components/Map/Map.svelte'
 
 	const components = {
 		TEXT: TextForm,
diff --git a/src/lib/Components/Forms/SingleChoiceForm.svelte b/src/routes/game/Forms/SingleChoiceForm.svelte
similarity index 88%
rename from src/lib/Components/Forms/SingleChoiceForm.svelte
rename to src/routes/game/Forms/SingleChoiceForm.svelte
index c32c9f2..518812c 100644
--- a/src/lib/Components/Forms/SingleChoiceForm.svelte
+++ b/src/routes/game/Forms/SingleChoiceForm.svelte
@@ -1,6 +1,6 @@
 <script>
-	import Radio from '../Quiz/answers/Radio.svelte'
-	import Layout from '../Quiz/Layout.svelte'
+	import Radio from '../../../lib/Components/Inputs/Radio.svelte'
+	import Layout from '../Components/Layout.svelte'
 	import parseQuestion from '$lib/utils/parseQuestion'
 
 	export let gameData
diff --git a/src/lib/Components/Forms/TextForm.svelte b/src/routes/game/Forms/TextForm.svelte
similarity index 88%
rename from src/lib/Components/Forms/TextForm.svelte
rename to src/routes/game/Forms/TextForm.svelte
index 29b4ec8..46b3648 100644
--- a/src/lib/Components/Forms/TextForm.svelte
+++ b/src/routes/game/Forms/TextForm.svelte
@@ -1,6 +1,6 @@
 <script>
-	import Layout from '../Quiz/Layout.svelte'
-	import Input from '../Quiz/answers/Input.svelte'
+	import Layout from '../Components/Layout.svelte'
+	import Input from '../../../lib/Components/Inputs/Input.svelte'
 	import parseQuestion from '$lib/utils/parseQuestion'
 
 	export let gameData
diff --git a/src/routes/game.svelte b/src/routes/game/game.svelte
similarity index 67%
rename from src/routes/game.svelte
rename to src/routes/game/game.svelte
index b18a566..6ba35c7 100644
--- a/src/routes/game.svelte
+++ b/src/routes/game/game.svelte
@@ -1,22 +1,21 @@
 <script>
-	import Circle from '../lib/Components/Game/Map/Circle.svelte'
-	import Heading from '../lib/Components/Game/Heading.svelte'
-	import Overlay from '../lib/Components/Overlay.svelte'
-	import Section from '../lib/Components/Section.svelte'
-	import Button from '../lib/Components/Button.svelte'
-	import Bubble from '../lib/Components/Game/Bubble.svelte'
-	import IconStar from '../lib/Components/Icons/Star.svelte'
-	import IconPoint from '../lib/Components/Icons/Point.svelte'
-	import Map from '../lib/Components/Game/Map/Map.svelte'
-	import ImageSlider from '$lib/Components/ImageSlider.svelte'
-	import Redirect from '$lib/Components/Redirect.svelte'
-	import Loading from '../lib/Components/Loading.svelte'
-	import { loadable } from '../lib/utils/stores'
-	import * as api from '../lib/utils/api'
-	import { data } from '../lib/stores/game'
-	import Renderer from '$lib/Components/Forms/Renderer.svelte'
-	import FullWidthRow from '$lib/Components/FullWidthRow.svelte'
+	import Overlay from '../../lib/Components/Layouts/LayoutImg.svelte'
+	import Section from '../../lib/Components/common/Section.svelte'
+	import Button from '../../lib/Components/Buttons/Button.svelte'
+	import Bubble from '../../lib/Components/common/Bubble.svelte'
+	import IconStar from '../../lib/svg/Star.svelte'
+	import IconPoint from '../../lib/svg/Point.svelte'
+	import Loading from '../../lib/Components/common/Loading.svelte'
+	import { loadable } from '../../lib/utils/stores'
+	import * as api from '../../lib/utils/api'
+	import { data } from '../../lib/stores/game'
 	import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
+	import Map from '../../lib/Components/Map/Map.svelte'
+	import FullWidthRow from '../../lib/Components/common/FullWidthRow.svelte'
+	import Renderer from './Forms/Renderer.svelte'
+	import Redirect from '../../lib/Components/common/Redirect.svelte'
+	import ImageSlider from '../../lib/Components/common/ImageSlider.svelte'
+	import Circle from '../../lib/Components/Map/Circle.svelte'
 
 	export let gameurl
 
@@ -39,9 +38,9 @@
 		</h1>
 	{:else if $gameData?.success === true}
 		<Overlay shareData={{ url: window.location.href }} img={$gameData.data.thumbnail}>
-			<Heading>
-				<span>{$gameData.data.name}</span>
-				<div class="bubbles" slot="bubbles">
+			<div>
+				<span class="text-[36px]">{$gameData.data.name}</span>
+				<div class="bubbles">
 					<Bubble background="blue">
 						<span slot="icon"><IconStar /></span>
 						<span> {'5.0'} </span>
@@ -51,7 +50,7 @@
 						<span>{$gameData.data.district}</span>
 					</Bubble>
 				</div>
-			</Heading>
+			</div>
 
 			<Section title="Popis">
 				<span>
diff --git a/src/lib/Components/homepage/Categories.svelte b/src/routes/homepage/Components/Categories.svelte
similarity index 100%
rename from src/lib/Components/homepage/Categories.svelte
rename to src/routes/homepage/Components/Categories.svelte
diff --git a/src/lib/Components/homepage/Category.svelte b/src/routes/homepage/Components/Category.svelte
similarity index 100%
rename from src/lib/Components/homepage/Category.svelte
rename to src/routes/homepage/Components/Category.svelte
diff --git a/src/lib/Components/homepage/Comparment.svelte b/src/routes/homepage/Components/Comparment.svelte
similarity index 100%
rename from src/lib/Components/homepage/Comparment.svelte
rename to src/routes/homepage/Components/Comparment.svelte
diff --git a/src/lib/Components/homepage/Compartment_Item.svelte b/src/routes/homepage/Components/Compartment_Item.svelte
similarity index 100%
rename from src/lib/Components/homepage/Compartment_Item.svelte
rename to src/routes/homepage/Components/Compartment_Item.svelte
diff --git a/src/lib/Components/homepage/Discover.svelte b/src/routes/homepage/Components/Discover.svelte
similarity index 100%
rename from src/lib/Components/homepage/Discover.svelte
rename to src/routes/homepage/Components/Discover.svelte
diff --git a/src/lib/Components/homepage/Headline.svelte b/src/routes/homepage/Components/Headline.svelte
similarity index 100%
rename from src/lib/Components/homepage/Headline.svelte
rename to src/routes/homepage/Components/Headline.svelte
diff --git a/src/lib/Components/homepage/Top.svelte b/src/routes/homepage/Components/Top.svelte
similarity index 100%
rename from src/lib/Components/homepage/Top.svelte
rename to src/routes/homepage/Components/Top.svelte
diff --git a/src/routes/index.svelte b/src/routes/homepage/homepage.svelte
similarity index 76%
rename from src/routes/index.svelte
rename to src/routes/homepage/homepage.svelte
index 6ebbb11..d8ab317 100644
--- a/src/routes/index.svelte
+++ b/src/routes/homepage/homepage.svelte
@@ -1,9 +1,9 @@
 <script>
-	import Discover from '../lib/Components/homepage/Discover.svelte'
-	import Top from '../lib/Components/homepage/Top.svelte'
-	import NavigationBar from '../lib/Components/NavigationBar.svelte';
-	import Categories from '../lib/Components/homepage/Categories.svelte'
-	import Comparment from '../lib/Components/homepage/Comparment.svelte'
+	import NavigationBar from './../../lib/Components/common/NavigationBar.svelte'
+	import Discover from './Components/Discover.svelte'
+	import Top from './Components/Top.svelte'
+	import Categories from './Components/Categories.svelte'
+	import Comparment from './Components/Comparment.svelte'
 </script>
 
 <div class="content">
@@ -19,7 +19,7 @@
 		items={[
 			{ price: '$10.00', location: 'Prag, Czech Republic', name: 'Hometown', image: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg' },
 			{ price: '$10.00', location: 'Prag, Czech Republic', name: 'Hometown', image: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg' },
-			{ price: '$10.00', location: 'Prag, Czech Republic', name: 'Hometown', image: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg' }
+			{ price: '$10.00', location: 'Prag, Czech Republic', name: 'Hometown', image: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg' },
 		]}
 	/>
 </div>
diff --git a/src/routes/log_in.svelte b/src/routes/log_in.svelte
index dcffb31..4ebb9ee 100644
--- a/src/routes/log_in.svelte
+++ b/src/routes/log_in.svelte
@@ -1,10 +1,9 @@
 <script>
-	import HiddenInput from '../lib/Components/Log_In/Hidden_Input.svelte'
+	import HiddenInput from '../lib/Components/Inputs/Hidden_Input.svelte'
 	import GoogleLogo from '../lib/svg/GoogleLogo.svelte'
 	import TopImage from '../lib/svg/Top-Image.svelte'
 
-    export let purpose = "login" //possible values login, register
-
+	export let purpose = 'login' //possible values login, register
 </script>
 
 <div class="main">
@@ -15,30 +14,30 @@
 
 	<!--Welcome sign 2 options for Log in and for register-->
 	<h1 class="headline">
-        {#if purpose === "login"}
-            Welcome Back
-        {:else}
-            Register
-        {/if}
-    </h1>
+		{#if purpose === 'login'}
+			Welcome Back
+		{:else}
+			Register
+		{/if}
+	</h1>
 
 	<!--2 forms from components-->
 	<div class="form">
-        {#if purpose === "login"}
-            <form>
-                <input type="text" placeholder="E-mail" autocomplete="email" required />
-                <HiddenInput placeholder="Password"/>
-                <input type="submit" value="Sign in" />
-            </form>
-        {:else}
-            <form>
-                <input type="text" placeholder="Name" autocomplete="full-name" required />
-                <input type="text" placeholder="E-mail" autocomplete="email" required />
-                <HiddenInput placeholder="Password"/>
-                <HiddenInput placeholder="Re-type password"/>
-                <input type="submit" value="Sign up" />
-            </form>
-        {/if}
+		{#if purpose === 'login'}
+			<form>
+				<input type="text" placeholder="E-mail" autocomplete="email" required />
+				<HiddenInput placeholder="Password" />
+				<input type="submit" value="Sign in" />
+			</form>
+		{:else}
+			<form>
+				<input type="text" placeholder="Name" autocomplete="full-name" required />
+				<input type="text" placeholder="E-mail" autocomplete="email" required />
+				<HiddenInput placeholder="Password" />
+				<HiddenInput placeholder="Re-type password" />
+				<input type="submit" value="Sign up" />
+			</form>
+		{/if}
 	</div>
 
 	<div class="continue_with">
@@ -47,26 +46,23 @@
 			<p>Continue with Google</p>
 		</button>
 
-        <button>
-			
+		<button>
 			<p>Continue with Facebook</p>
 		</button>
 	</div>
 
 	<div class="LR_switch">
-        <!--LR switch = login / register switch-->
-        {#if purpose === "login"}
-            <p>Don’t have an account? <a href="/register">Sign-up</a></p>
-        {:else}
-            <p>Already have an account? <a href="/login">Log In</a></p>
-        {/if}
+		<!--LR switch = login / register switch-->
+		{#if purpose === 'login'}
+			<p>Don’t have an account? <a href="/register">Sign-up</a></p>
+		{:else}
+			<p>Already have an account? <a href="/login">Log In</a></p>
+		{/if}
 	</div>
 </div>
 
-
-
 <style lang="scss">
-    $gap: 20px;
+	$gap: 20px;
 
 	.main {
 		width: 100%;
@@ -79,9 +75,9 @@
 		gap: $gap;
 		padding: 30px 0 0 0;
 
-        @media screen and (max-height: 990px) {
-            gap: 2vh
-        }
+		@media screen and (max-height: 990px) {
+			gap: 2vh;
+		}
 
 		.top-image {
 			display: flex;
@@ -97,23 +93,23 @@
 			font-size: 40px;
 			margin: 0px;
 
-            @media screen and (max-height: 750px){
-                font-size: 5.3vh;
-            }
+			@media screen and (max-height: 750px) {
+				font-size: 5.3vh;
+			}
 		}
 
 		.continue_with {
 			width: calc(100% - 48px);
 			margin: 0 auto 0 auto;
 			position: relative;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 20px;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			gap: 20px;
 
-            @media screen and (max-width: 410px) {
-                width: calc(100% - 24px);   
-            }
+			@media screen and (max-width: 410px) {
+				width: calc(100% - 24px);
+			}
 
 			button {
 				height: 60px;
@@ -129,9 +125,9 @@
 				border-radius: 10px;
 				box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.084), 0px 2px 3px rgba(0, 0, 0, 0.168);
 
-                @media screen and (max-width: 410px) {
-                    gap: 3.5vw;
-                }
+				@media screen and (max-width: 410px) {
+					gap: 3.5vw;
+				}
 				p {
 					font-family: 'Source Sans Pro';
 					font-style: normal;
@@ -140,9 +136,9 @@
 					line-height: 36px;
 					color: rgba(0, 0, 0, 0.54);
 
-                    @media screen and (max-width: 400px) {
-                        font-size: 7.3vw;
-                    }
+					@media screen and (max-width: 400px) {
+						font-size: 7.3vw;
+					}
 				}
 			}
 			button:hover {
@@ -155,9 +151,9 @@
 			position: relative;
 			margin: 0 auto 0 auto;
 
-            @media screen and (max-width: 410px) {
-                width: calc(100% - 24px);   
-            }
+			@media screen and (max-width: 410px) {
+				width: calc(100% - 24px);
+			}
 
 			form {
 				display: flex;
@@ -165,15 +161,14 @@
 				align-items: center;
 				gap: $gap;
 
-                @media screen and (max-height: 990px) {
-                    gap: 2vh
-                }
+				@media screen and (max-height: 990px) {
+					gap: 2vh;
+				}
 
 				width: 100%;
 				position: relative;
 
-
-				input[type='text']{
+				input[type='text'] {
 					width: calc(100%);
 					padding: 12px 24px;
 					border-radius: 15px;
@@ -182,10 +177,10 @@
 					font-family: 'Source Sans Pro';
 					font-style: normal;
 					font-weight: 600;
-                    line-height: 28px;
-                    @media screen and (max-height: 720px) {
-                        padding: 8px 24px;
-                    }
+					line-height: 28px;
+					@media screen and (max-height: 720px) {
+						padding: 8px 24px;
+					}
 				}
 				::placeholder {
 					color: #8f8f8f;
@@ -193,35 +188,35 @@
 					font-family: 'Source Sans Pro';
 					font-style: normal;
 					font-weight: 600;
-                    line-height: 28px;
+					line-height: 28px;
 				}
 
-                input[type='submit'] {
-					background-color: #4263EB;
-                    color: white;
+				input[type='submit'] {
+					background-color: #4263eb;
+					color: white;
 
-                    width: 100%;
+					width: 100%;
 
-                    font-family: 'Source Sans Pro';
-                    font-style: normal;
-                    font-weight: 600;
-                    font-size: 32px;
-                    line-height: 40px;
-                    padding: 12px 0px;
-                    border-radius: 15px;
+					font-family: 'Source Sans Pro';
+					font-style: normal;
+					font-weight: 600;
+					font-size: 32px;
+					line-height: 40px;
+					padding: 12px 0px;
+					border-radius: 15px;
 
-                    @media screen and (max-height: 820px) { 
-                        font-size: 3.9vh;
-                        line-height: 4.8vh;
-                        padding: 1.4vh 0px;
-                    }
+					@media screen and (max-height: 820px) {
+						font-size: 3.9vh;
+						line-height: 4.8vh;
+						padding: 1.4vh 0px;
+					}
 				}
 			}
 		}
 
 		.LR_switch {
-            width: calc(100% - 48px);
-            padding-bottom: 30px;
+			width: calc(100% - 48px);
+			padding-bottom: 30px;
 
 			text-align: center;
 			font-family: 'Source Sans Pro';
@@ -230,14 +225,14 @@
 			font-size: 24px;
 			letter-spacing: 0.5px;
 			color: rgba(0, 0, 0, 0.4);
-            @media screen and (max-width: 410px) {
-                width: calc(100% - 24px);  
-                font-size: 5.8vw; 
-            }
+			@media screen and (max-width: 410px) {
+				width: calc(100% - 24px);
+				font-size: 5.8vw;
+			}
 
-            @media screen and (max-width: 320px) { 
-                font-size: 18px; 
-            }
+			@media screen and (max-width: 320px) {
+				font-size: 18px;
+			}
 			a {
 				color: #4263eb;
 			}
diff --git a/src/routes/map.svelte b/src/routes/map.svelte
index 4edcc6f..336f0d8 100644
--- a/src/routes/map.svelte
+++ b/src/routes/map.svelte
@@ -1,7 +1,7 @@
 <script>
+	import Map from './../lib/Components/Map/Map.svelte'
 	import { navigate } from 'svelte-routing'
-	import Map from '../lib/Components/Game/Map/Map.svelte'
-	import NavigationBar from '../lib/Components/NavigationBar.svelte'
+	import NavigationBar from '../lib/Components/common/NavigationBar.svelte'
 
 	let lat = null
 	let lng = null
diff --git a/src/lib/Components/QR/InfoBar.svelte b/src/routes/qrscanner/Components/InfoBar.svelte
similarity index 100%
rename from src/lib/Components/QR/InfoBar.svelte
rename to src/routes/qrscanner/Components/InfoBar.svelte
diff --git a/src/lib/Components/QR/QRinput.svelte b/src/routes/qrscanner/Components/QRinput.svelte
similarity index 100%
rename from src/lib/Components/QR/QRinput.svelte
rename to src/routes/qrscanner/Components/QRinput.svelte
diff --git a/src/lib/Components/QR/QRscanner.svelte b/src/routes/qrscanner/Components/QRscanner.svelte
similarity index 100%
rename from src/lib/Components/QR/QRscanner.svelte
rename to src/routes/qrscanner/Components/QRscanner.svelte
diff --git a/src/lib/Components/QR/ScanFrame.svelte b/src/routes/qrscanner/Components/ScanFrame.svelte
similarity index 100%
rename from src/lib/Components/QR/ScanFrame.svelte
rename to src/routes/qrscanner/Components/ScanFrame.svelte
diff --git a/src/lib/Components/QR/SwitchBar.svelte b/src/routes/qrscanner/Components/SwitchBar.svelte
similarity index 100%
rename from src/lib/Components/QR/SwitchBar.svelte
rename to src/routes/qrscanner/Components/SwitchBar.svelte
diff --git a/src/routes/qrRoute.svelte b/src/routes/qrscanner/qrscanner.svelte
similarity index 80%
rename from src/routes/qrRoute.svelte
rename to src/routes/qrscanner/qrscanner.svelte
index dee3b4e..997f664 100644
--- a/src/routes/qrRoute.svelte
+++ b/src/routes/qrscanner/qrscanner.svelte
@@ -1,9 +1,9 @@
 <script>
-	import ScanFrame from '../lib/Components/QR/ScanFrame.svelte'
-	import InfoBar from '../lib/Components/QR/InfoBar.svelte'
-	import QRscanner from '../lib/Components/QR/QRscanner.svelte'
-	import SwitchBar from '../lib/Components/QR/SwitchBar.svelte'
-	import QRinput from '../lib/Components/QR/QRinput.svelte'
+	import ScanFrame from './Components/ScanFrame.svelte'
+	import InfoBar from './Components/InfoBar.svelte'
+	import QRscanner from './Components/QRscanner.svelte'
+	import SwitchBar from './Components/SwitchBar.svelte'
+	import QRinput from './Components/QRinput.svelte'
 	import { navigate } from 'svelte-routing'
 
 	let switched = 'scan'
diff --git a/src/routes/test.svelte b/src/routes/test.svelte
index b2dd63a..3d86c2d 100644
--- a/src/routes/test.svelte
+++ b/src/routes/test.svelte
@@ -1,4 +1,5 @@
 <script>
-	import Carousel from "../lib/Components/Game/Carousel.svelte"
+	import Carousel from '../lib/Components/common/Carousel.svelte'
 </script>
-<Carousel></Carousel>
\ No newline at end of file
+
+<Carousel />
diff --git a/vite.config.js b/vite.config.js
index a8e7d04..eac806e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -11,6 +11,7 @@ export default defineConfig({
 	resolve: {
 		alias: {
 			$lib: path.resolve(__dirname, 'src', 'lib'),
+			$src: path.resolve(__dirname, 'src')
 		},
 	},
 	plugins: [