diff --git a/package.json b/package.json
index 4778b77..5d0396e 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
 	"version": "0.0.0",
 	"type": "module",
 	"scripts": {
-		"dev": "vite",
+		"dev": "vite --host 0.0.0.0",
 		"build": "vite build",
 		"preview": "vite preview",
 		"appwrite": "docker compose -f ./appwrite/docker-compose.yml up"
diff --git a/src/lib/components/Inputs/Hidden_Input_type2.svelte b/src/lib/components/Inputs/Hidden_Input_type2.svelte
new file mode 100644
index 0000000..0a9da7f
--- /dev/null
+++ b/src/lib/components/Inputs/Hidden_Input_type2.svelte
@@ -0,0 +1,56 @@
+<script>
+	import Eye from '../../svg/Eye.svelte'
+
+
+	export let placeholder = ''
+	export let value = ''
+
+	let input
+	let vissible = false
+
+	function changeVisibility(i) {
+		if (!vissible) {
+			i.type = 'text'
+			vissible = true
+		} else {
+			i.type = 'password'
+			vissible = false
+		}
+	}
+</script>
+
+<div>
+	<input bind:value bind:this={input} type="password"  {placeholder} minlength="8" class="input" required />
+	<button type="button" on:click={changeVisibility(input)}>
+		<Eye active={vissible} />
+	</button>
+</div>
+
+<style lang="scss">
+    	div {
+		width: 100%;
+		position: relative;
+		button {
+			position: absolute;
+			right: 25px;
+			top: 50%;
+			transform: translateY(-50%);
+		}
+		button:hover {
+			opacity: 50%;
+		}
+	}
+
+	.input {        
+		width: calc(100%);
+		padding: 12px 24px;
+		border-radius: 15px;
+		background-color: #eeeeee;
+		font-size: 18px;
+		font-style: normal;
+		font-weight: 600;
+		@media screen and (max-height: 720px) {
+			padding: 8px 24px;
+		}
+	}
+</style>
diff --git a/src/lib/svg/CookieMonster.svelte b/src/lib/svg/CookieMonster.svelte
index 534d562..81291e3 100644
--- a/src/lib/svg/CookieMonster.svelte
+++ b/src/lib/svg/CookieMonster.svelte
@@ -4,6 +4,7 @@
     <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
     <use xlink:href="#image0_1890_4495" transform="scale(0.01)"/>
     </pattern>
+    
     <image id="image0_1890_4495" width="100" height="100" xlink:href="data:image/png;base64,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"/>
     </defs>
 </svg>
diff --git a/src/lib/svg/Logout.svelte b/src/lib/svg/Logout.svelte
index ffbd144..fcf4d13 100644
--- a/src/lib/svg/Logout.svelte
+++ b/src/lib/svg/Logout.svelte
@@ -1,10 +1,3 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="filter: invert(34%) sepia(86%) saturate(3454%) hue-rotate(222deg) brightness(96%) contrast(92%);">
-	<rect width="30" height="30" fill="url(#pattern0)"/>
-	<defs>
-	<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
-	<use xlink:href="#image0_1890_4382" transform="scale(0.0104167)"/>
-	</pattern>
-	<image id="image0_1890_4382" width="96" height="96" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABmJLR0QA/wD/AP+gvaeTAAADqUlEQVR4nO2dvU8UQRyGH40KjYI22FnYGDpI7kSxM/gRjQmNBUGtLKz8+JNMsLAjojEaYwMROaWy0kRtjFbG00SjhVgMG+C8u5253ZnffbxPMoHA7s7c+8DezOzeDgghhBBCCJGcXQX3HwcmgDFgb/HmdMQf4AWwalR/coaA28A7YKOLykNgJOLr7gqqwEfsw25VluK9dHtmgV/Yh5xXqrECiMFuz+2qwD1gOGJbyuKUdQNC8BEwDNynN8IH91/QM/gIuAEcid2QElmxbkDZdFtvp115ECkDM8axDzUk/J7rhu7J+f2ExzH+4t6gPxVvTkd8wZ12akb1FyJPwGGPYywAV0toy0CS9ya83+MY78toyKDiOw4QkZAAYyTAGAkwRgKMkQBjJMAYCTBGAozJm4oYNKaAk5vfrwAvY1coAY4DuAnFCw0/XwLmgXqsinUKcjQLH+Ai8BQYjVWxBMBxmoefUQGeEEmCBMC0xzbRJEiAP1EkSAAsB2xbugQJgDXCLuaXKkECHFcIu6ZcmgQJcNSBGcIGXhXgGXCoSMUSsEUdOEuYhEncOKFjCRKwk0zCWsA+hSRIwP/UgTMkkiABzUkmQQJak0SCxWzoFHAC2GdQdyc8xwXrm9Uk8Bgn71vexikFjOJmHc8nrNOKbJwwQ85UdspT0KCEn1EB7uZtlErAFIMVfsYlnIiWpBLgM+Xbr7R97eoFGZNKQN99biuAttPdqQSsAo8S1dVNLAKv2m2Q8hQ0h3ucwKBQA67lbZRyHFDH3WVQxb0xjSWsuwgHgeuEPdikhhuI5d7OYjESXiNseG/JCG5AFRL+OnAOj1EwqBfUjiz8kGdPrONGv199d5CA5iQJHySgGcnCBwloJGn4IAHbSR4+SEDGCO5CSkj4NeA0BcIHCchYIGfWsoGsn+/V1WyHBOTfHd1IaeGDBEDYVHmp4YMEhFB6+CAB4Hd3dJTwQQIg/+7oaOGDBGTM01zCIq6fHyV80KckM76zdQF9GvcMumXgdeyKJWAnNRI/e06nIGMkwBgJMEYCjJEAYyTAGAkwRgKMkQBj8gT88DjG0TIaMqjkTUV89jjG3ObXNwXb0il9vY5YLy3g0LfriL3FPlzf0pfriN3CPtiQ0lPriPkwBHzAPljfcidODHHw6Yb+Bi7jVtHrBTasGxCLWeAn9n/hA3cK2k4Ft2aMdcitSt+tI9aMIeAm3dc76sl1xIou6HwM93CKMew+89XT64gJIYQQQghhwD+GY3D/XU+PSgAAAABJRU5ErkJggg=="/>
-	</defs>
-</svg>
+<svg viewBox="0 0 24 24" width="24" height="24" stroke="#4263EB" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+	
 	
diff --git a/src/lib/utils/database/game.ts b/src/lib/utils/database/game.ts
index 8abc5f8..a997e30 100644
--- a/src/lib/utils/database/game.ts
+++ b/src/lib/utils/database/game.ts
@@ -6,7 +6,7 @@ import { getLocationDataFromLatAndLong } from '../locations'
 export const load = async (pathName: string) => {
 	const checkPoints = []
 	const game = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpURL', pathName)])).documents[0]
-
+	
 	const checkPointsIds = game.ExpCPsID
 
 	for (const checkPointId of checkPointsIds) {
@@ -46,5 +46,6 @@ export const getExpiriences = async () => {
 			link: `${expirience.ExpURL}`,
 		})
 	}
+
 	return items
 }
diff --git a/src/routes/explore/explore.svelte b/src/routes/explore/explore.svelte
index 04a23ad..6654498 100644
--- a/src/routes/explore/explore.svelte
+++ b/src/routes/explore/explore.svelte
@@ -2,12 +2,11 @@
 	import NavigationBarLayout from '../../lib/components/Layouts/NavigationBarLayout.svelte'
 	import Result from './Components/Result.svelte'
 	import Top from './Components/Top.svelte'
+	import { getExpiriences } from '$lib/utils/database/game'
+	import Loading from '$lib/components/Common/Loading.svelte'
 
 	let Search: string
 
-	function search(value: string) {
-		return [value, value, value]
-	}
 </script>
 
 <NavigationBarLayout>
@@ -15,9 +14,16 @@
 		<Top bind:search_value={Search} />
 
 		<div class="results">
-			{#each search(Search) as result}
-				<Result name={result} />
-			{/each}
+			{#await getExpiriences()}
+				<div class="w-full h-24 flex items-center justify-center">
+					<Loading />
+				</div>
+			{:then expiriences}
+				{#each expiriences as result}
+					<Result name={result.name} />
+				{/each}
+			{/await}
+			
 
 			<div class="end" />
 		</div>
diff --git a/src/routes/homepage/Components/Comparment.svelte b/src/routes/homepage/Components/Comparment.svelte
index e2801d6..c00e3e7 100644
--- a/src/routes/homepage/Components/Comparment.svelte
+++ b/src/routes/homepage/Components/Comparment.svelte
@@ -4,6 +4,8 @@
 	import Headline from './Headline.svelte'
 
 	export let items = []
+
+	console.log(items)
 </script>
 
 <div class="section">
diff --git a/src/routes/profile/functions/Interests-Update.svelte b/src/routes/profile/functions/Interests-Update.svelte
index 65fa4d9..45a8f64 100644
--- a/src/routes/profile/functions/Interests-Update.svelte
+++ b/src/routes/profile/functions/Interests-Update.svelte
@@ -1,7 +1,70 @@
 <script lang="ts">
+    import Line from "$lib/components/Common/Line.svelte";
+    function select_tag(){
+        const target = event.currentTarget as HTMLElement
 
+        console.log(target)
+        if (target.parentElement.classList.contains("tag-container-selected")){
+            target.parentElement.parentElement.querySelector(".tag-container").appendChild(target)
+        }
+        else{
+            target.parentElement.parentElement.querySelector(".tag-container-selected").appendChild(target)
+        }
+
+    }
 </script>
 
-<div>
-    <p>What are you most interested in?</p>
-</div>
\ No newline at end of file
+<div class="container">
+    <p class="headline">What are you most interested in?</p>
+    <div class="tag-container-selected">
+
+    </div>
+    <Line />
+    <div class="tag-container">
+        <button class="tag" on:click={select_tag}>History</button>
+        <button class="tag" on:click={select_tag}>Pubs</button>
+    </div>
+</div>
+
+<style lang="scss">
+    .container{
+        padding: 0 24px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+
+        text-align: left;
+        .headline{
+            width: 100%;
+            /* Label Large - Source Sans Pro/Medium 16/24 . +0.2 */
+
+            font-family: 'Source Sans Pro';
+            font-style: normal;
+            font-weight: 600;
+            font-size: 18px;
+            line-height: 28px;
+            /* or 156% */
+
+            display: flex;
+            align-items: center;
+            letter-spacing: 0.2px;
+
+            color: #000000;
+        }
+
+        .tag-container, .tag-container-selected{
+            width: 100%;
+            display: flex;
+            margin: 16px 0;
+            flex-wrap: wrap;
+            gap: 16px 24px;
+            .tag{
+                padding: 4px 10px;
+                background: #FFFFFF;
+                box-shadow: 0px 0px 20px -6px rgba(0, 0, 0, 0.45);
+                border-radius: 6px;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/profile/functions/Profile-Update.svelte b/src/routes/profile/functions/Profile-Update.svelte
index 6ec325b..fde0b10 100644
--- a/src/routes/profile/functions/Profile-Update.svelte
+++ b/src/routes/profile/functions/Profile-Update.svelte
@@ -1,17 +1,92 @@
 <script lang="ts">
+    import HiddenInput from '$lib/components/Inputs/Hidden_Input_type2.svelte'
 
+    let c_password:string = ''
+    let n_password:string = ''
+    let nr_password:string = ''
 </script>
 
-<div>
+<div class="container">
     <div class="photo">
         <div class="currentPhoto">
 
         </div>
-        <div class="changePhoto">
+        <button class="changePhoto">
+            Update your photo
+        </button>
+    </div>
 
-        </div>
-    </div>
-    <div class="inputs">
+    <form class="inputs">
         <input type="text" placeholder="Your name">
-    </div>
-</div>
\ No newline at end of file
+        <input type="email" placeholder="Your email">
+
+        <HiddenInput bind:value={c_password} placeholder="Your current password" />
+        <HiddenInput bind:value={n_password} placeholder="New password" />
+        <HiddenInput bind:value={nr_password} placeholder="Re-type new password" />
+
+    </form>
+</div>
+
+<style lang="scss">
+    .container{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+        .photo{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-start;
+            gap: 8px;
+
+            .currentPhoto{
+                width: 100%;
+                aspect-ratio: 1/1;
+                /* background */
+
+                background: #EFEFF0;
+                /* subtle-light */
+
+                border: 2px solid #AFB1B6;
+                border-radius: 200px;
+                background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1380_1768' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.000488281 0H19.9601V19.9498H0.000488281V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1380_1768)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.65049 1.5C3.12949 1.5 1.50049 3.227 1.50049 5.899V14.051C1.50049 16.724 3.12949 18.45 5.65049 18.45H14.3005C16.8275 18.45 18.4605 16.724 18.4605 14.051V5.899C18.4605 3.227 16.8275 1.5 14.3005 1.5H5.65049ZM14.3005 19.95H5.65049C2.27049 19.95 0.000488281 17.579 0.000488281 14.051V5.899C0.000488281 2.371 2.27049 0 5.65049 0H14.3005C17.6855 0 19.9605 2.371 19.9605 5.899V14.051C19.9605 17.579 17.6855 19.95 14.3005 19.95Z' fill='%23AFB1B6'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.28126 15.1799C3.09526 15.1799 2.91026 15.1119 2.76526 14.9739C2.46426 14.6899 2.45226 14.2139 2.73726 13.9149L4.26526 12.3019C5.07426 11.4429 6.43926 11.4009 7.30226 12.2109L8.26026 13.1829C8.52726 13.4529 8.96126 13.4579 9.22926 13.1939C9.33026 13.0749 11.5083 10.4299 11.5083 10.4299C11.9223 9.92789 12.5063 9.61789 13.1553 9.55389C13.8053 9.49689 14.4363 9.68589 14.9393 10.0989C14.9823 10.1339 15.0213 10.1679 17.2173 12.4229C17.5063 12.7189 17.5013 13.1939 17.2043 13.4829C16.9083 13.7739 16.4323 13.7649 16.1433 13.4689C16.1433 13.4689 14.0943 11.3659 13.9483 11.2239C13.7933 11.0969 13.5443 11.0229 13.2993 11.0469C13.0503 11.0719 12.8263 11.1909 12.6673 11.3839C10.3433 14.2029 10.3153 14.2299 10.2773 14.2669C9.41926 15.1089 8.03426 15.0949 7.19126 14.2349C7.19126 14.2349 6.26126 13.2909 6.24526 13.2719C6.01426 13.0579 5.60226 13.0719 5.35526 13.3329L3.82526 14.9459C3.67726 15.1019 3.47926 15.1799 3.28126 15.1799Z' fill='%23AFB1B6'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.55769 6.12891C6.00469 6.12891 5.55469 6.57891 5.55469 7.13291C5.55469 7.68691 6.00469 8.13791 6.55869 8.13791C7.11269 8.13791 7.56369 7.68691 7.56369 7.13291C7.56369 6.57991 7.11269 6.12991 6.55769 6.12891ZM6.55869 9.63791C5.17769 9.63791 4.05469 8.51391 4.05469 7.13291C4.05469 5.75191 5.17769 4.62891 6.55869 4.62891C7.94069 4.62991 9.06369 5.75391 9.06369 7.13291C9.06369 8.51391 7.93969 9.63791 6.55869 9.63791Z' fill='%23AFB1B6'/%3E%3C/svg%3E");
+                background-repeat: no-repeat;
+                background-position: center; 
+            }
+            .changePhoto{
+                font-weight: 600;
+                font-size: 14px;
+                color: #FFFFFF;
+                padding: 8px 12px;
+
+                background: #110042;
+                border-radius: 15px;
+            }
+        }
+        .inputs{
+            padding: 0 24px;
+            margin-top: 16px;
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-start;
+            width: 100%;
+
+            gap: 16px;
+
+            input[type='text'], input[type='email']{
+                padding: 12px 24px;
+                background: #EEEEEE;
+                width: 100%;
+                border-radius: 15px;
+
+                
+                font-weight: 600;
+                font-size: 18px;
+            }
+        }
+    }
+
+</style>
\ No newline at end of file