diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 96606c7d..b1b14962 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -16,5 +16,8 @@ module.exports = {
 		browser: true,
 		es2017: true,
 		node: true
+	},
+	rules: {
+		'@typescript-eslint/no-explicit-any': ['off']
 	}
 }
diff --git a/package.json b/package.json
index 35ed4469..f52e7790 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.0.10",
+	"version": "0.0.11",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",
@@ -24,8 +24,8 @@
 		"@sveltejs/kit": "^1.10.0",
 		"@sveltejs/svelte-virtual-list": "^3.0.1",
 		"@svitejs/svelte-preprocess-svg": "^2.0.0",
-		"@typescript-eslint/eslint-plugin": "^6.0.0",
-		"@typescript-eslint/parser": "^6.0.0",
+		"@typescript-eslint/eslint-plugin": "^6.1.0",
+		"@typescript-eslint/parser": "^6.1.0",
 		"autoprefixer": "^10.4.13",
 		"concurrently": "^8.0.1",
 		"cross-env": "^7.0.3",
diff --git a/src/lib/WHEPClient.ts b/src/lib/WHEPClient.ts
index 363f5b3a..377e26d6 100644
--- a/src/lib/WHEPClient.ts
+++ b/src/lib/WHEPClient.ts
@@ -76,14 +76,14 @@ export default class WHEPClient extends EventTarget {
 			}
 		}
 
-		this.peerConnection.addEventListener('connectionstatechange', (ev) => {
+		this.peerConnection.addEventListener('connectionstatechange', () => {
 			if (this.peerConnection.connectionState !== 'connected') {
 				return
 			}
 			this.videoElement.srcObject = this.stream
 		})
 
-		this.peerConnection.addEventListener('negotiationneeded', (ev) => {
+		this.peerConnection.addEventListener('negotiationneeded', () => {
 			negotiateConnectionWithClientOffer(this.peerConnection, this.endpoint)
 		})
 	}
diff --git a/src/lib/WHIPClient.ts b/src/lib/WHIPClient.ts
index ebdc2252..1ca744a7 100644
--- a/src/lib/WHIPClient.ts
+++ b/src/lib/WHIPClient.ts
@@ -32,7 +32,7 @@ export default class WHIPClient extends EventTarget {
 		 * https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/negotiationneeded_event
 		 * https://www.ietf.org/archive/id/draft-ietf-wish-whip-01.html
 		 */
-		this.peerConnection.addEventListener('negotiationneeded', async (ev) => {
+		this.peerConnection.addEventListener('negotiationneeded', async () => {
 			console.log('Connection negotiation starting')
 			await negotiateConnectionWithClientOffer(this.peerConnection, this.endpoint)
 			console.log('Connection negotiation ended')
@@ -47,7 +47,7 @@ export default class WHIPClient extends EventTarget {
 				this.localStream = stream
 				videoElement.srcObject = stream
 			})
-			.catch((err: any) => {
+			.catch(() => {
 				this.disconnectStream()
 			})
 	}
@@ -72,7 +72,7 @@ export default class WHIPClient extends EventTarget {
 					audioTrack.enabled = true
 					// audioTrack.id = 'silent-audio-track'
 					// audioTrack.label = 'Silent Audio Track'
-					const audioTransceiver = this.peerConnection.addTransceiver(audioTrack, {
+					this.peerConnection.addTransceiver(audioTrack, {
 						direction: 'sendonly'
 					})
 				}
@@ -126,7 +126,7 @@ export default class WHIPClient extends EventTarget {
 				})
 				.then((stream) => {
 					stream.getTracks().forEach((track) => {
-						const transceiver = this.peerConnection.addTransceiver(track, {
+						this.peerConnection.addTransceiver(track, {
 							/** WHIP is only for sending streaming media */
 							direction: 'sendonly'
 						})
diff --git a/src/lib/assets/icons/chat/IconChatScreenshot.svelte b/src/lib/assets/icons/chat/IconChatScreenshot.svelte
new file mode 100644
index 00000000..cb43add4
--- /dev/null
+++ b/src/lib/assets/icons/chat/IconChatScreenshot.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-8 h-8">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+</svg>
diff --git a/src/lib/assets/icons/drawer/IconDrawerProfileViews.svelte b/src/lib/assets/icons/drawer/IconDrawerProfileViews.svelte
new file mode 100644
index 00000000..805047b8
--- /dev/null
+++ b/src/lib/assets/icons/drawer/IconDrawerProfileViews.svelte
@@ -0,0 +1,13 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
+	<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+</svg>
diff --git a/src/lib/assets/icons/drawer/IconDrawerVerification.svelte b/src/lib/assets/icons/drawer/IconDrawerVerification.svelte
new file mode 100644
index 00000000..0d79a6d4
--- /dev/null
+++ b/src/lib/assets/icons/drawer/IconDrawerVerification.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
+</svg>
diff --git a/src/lib/components/Browse/Sections/ItemChannel.svelte b/src/lib/components/Browse/Sections/ItemChannel.svelte
index 4d8d2def..445ba7d9 100644
--- a/src/lib/components/Browse/Sections/ItemChannel.svelte
+++ b/src/lib/components/Browse/Sections/ItemChannel.svelte
@@ -5,62 +5,56 @@
 	export let channel: any = {}
 </script>
 
-<ul class="p-4 bg-base-100 hover:bg-base-300 shrink-0 mt-6 rounded-md">
-	<li>
-		<a
-			class="flex flex-col w-[20rem] md:w-[25rem] rounded-md items-stretch"
-			href="/channel/{channel._id}">
-			<div class="relative">
-				<div class="flex flex-row justify-between">
-					<div class="flex gap-2 mb-3">
-						{#if channel.isLive}
-							<span
-								class="btn btn-sm rounded-md font-medium text-white border-none flex items-center bg-red-700 hover:bg-red-700">
-								LIVE
-							</span>
-						{/if}
-						<div class="dropdown dropdown-bottom">
-							<label
-								for=""
-								class="btn btn-sm rounded-md font-medium gap-2 btn-neutral text-white border-none"
-								tabindex="-1">
-								<IconViewers />
-								{channel.memberCount || '0'}
-							</label>
-						</div>
-					</div>
-					<div class="flex flex-wrap">
-						{#if channel.category && channel.category.length}
-							{#each channel.category as category}
-								<div class="tooltip" data-tip={category}>
-									<img src={$category_list[category]} alt="" class="h-7 w-7 m-1" />
-								</div>
-							{/each}
-						{/if}
-					</div>
-				</div>
-				<div class="video-thumbnail">
-					<img
-						class="w-full h-full mask rounded-lg object-cover"
-						src={channel.thumbnail
-							? channel.thumbnail
-							: '/placeholder/programming-placeholder.jpg'} />
+<a
+	class="flex flex-col w-[20rem] md:w-[27rem] p-4 bg-base-100 hover:bg-base-300 mt-6 rounded-md shrink-0"
+	href="/channel/{channel._id}">
+	<div class="relative">
+		<div class="flex flex-row justify-between">
+			<div class="flex gap-2 mb-3">
+				{#if channel.isLive}
+					<span
+						class="btn btn-sm rounded-md font-medium text-white border-none flex items-center bg-red-700 hover:bg-red-700">
+						LIVE
+					</span>
+				{/if}
+				<div class="dropdown dropdown-bottom">
+					<label
+						for=""
+						class="btn btn-sm rounded-md font-medium gap-2 btn-neutral text-white border-none"
+						tabindex="-1">
+						<IconViewers />
+						{channel.memberCount || '0'}
+					</label>
 				</div>
 			</div>
-			<p class="text-lg font-semibold truncate">{channel.title}</p>
-			<div class="flex flex-row gap-2 max-w-[25rem]">
-				<div class="avatar">
-					<div class="w-12 mask {channel?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
-						<img src={channel.avatar} alt="" />
-					</div>
-				</div>
-				<div class="flex items-center">
-					<p>@{channel.createdByUsername}</p>
-				</div>
+			<div class="flex flex-wrap">
+				{#if channel.category && channel.category.length}
+					{#each channel.category as category}
+						<div class="tooltip" data-tip={category}>
+							<img src={$category_list[category]} alt="" class="h-7 w-7 m-1" />
+						</div>
+					{/each}
+				{/if}
+			</div>
+		</div>
+		<div class="video-thumbnail">
+			<img
+				class="w-full h-full mask rounded-lg object-cover"
+				src={channel.thumbnail ? channel.thumbnail : '/placeholder/programming-placeholder.jpg'} />
+		</div>
+	</div>
+	<p class="text-lg font-semibold truncate">{channel.title}</p>
+	<div class="flex flex-row gap-2 max-w-[25rem]">
+		<div class="avatar">
+			<div class="w-12 mask {channel?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
+				<img src={channel.avatar} alt="" />
 			</div>
-		</a>
-	</li>
-</ul>
+		</div>
+		<div class="flex items-center">
+			<p>@{channel.createdByUsername}</p>
+		</div>
+	</div>
+</a>
 
 <style>
 	.video-thumbnail {
diff --git a/src/lib/components/Browse/Sections/ItemTable.svelte b/src/lib/components/Browse/Sections/ItemTable.svelte
index ffd8ce63..c356edf8 100644
--- a/src/lib/components/Browse/Sections/ItemTable.svelte
+++ b/src/lib/components/Browse/Sections/ItemTable.svelte
@@ -8,8 +8,6 @@
 <tr
 	class="cursor-pointer hover:btn-ghost border border-transparent"
 	on:click|preventDefault={() => goto(`/channel/${channel._id}`)}>
-	<!-- <ul class="menu">
-								<li> -->
 	<td>
 		<div class="flex items-center space-x-2 my-3 pl-3">
 			<div class="avatar">
@@ -19,7 +17,7 @@
 			</div>
 			<div>
 				<div class="font-bold">{channel.createdByDisplayName || ''}</div>
-				<div class="text-sm text-pink-500">@{channel.createdByUsername || ''}</div>
+				<div class="text-sm">@{channel.createdByUsername || ''}</div>
 			</div>
 		</div>
 	</td>
@@ -66,6 +64,4 @@
 			{/if}
 		</div>
 	</td>
-	<!-- </li>
-							</ul> -->
 </tr>
diff --git a/src/lib/components/Browse/Sections/ItemUser.svelte b/src/lib/components/Browse/Sections/ItemUser.svelte
index bf64ef1d..1c98ab43 100644
--- a/src/lib/components/Browse/Sections/ItemUser.svelte
+++ b/src/lib/components/Browse/Sections/ItemUser.svelte
@@ -4,28 +4,24 @@
 	export let user: any = {}
 </script>
 
-<ul class="p-4 bg-base-100 hover:bg-base-300 shrink-0 rounded-md">
-	<li>
-		<a class="rounded-md" href="/profile/{user.username}">
-			<div class="text-center space-y-3 w-[200px]">
-				<div class="avatar">
-					<div class="w-36 mask {user?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
-						<img src={user.avatar} alt="" />
-					</div>
-				</div>
-				<div class="tooltip w-full" data-tip="@{user.username}">
-					<p class="text-lg font-semibold truncate">@{user.username}</p>
-				</div>
-				<div class="w-full">
-					{#if user.category && user.category.length}
-						{#each user.category as category}
-							<div class="tooltip" data-tip={category}>
-								<img src={$category_list[category]} alt="" class="h-10 w-10 m-1" />
-							</div>
-						{/each}
-					{/if}
-				</div>
+<a class="p-4 bg-base-100 hover:bg-base-300 shrink-0 rounded-md" href="/profile/{user.username}">
+	<div class="text-center space-y-3 w-[200px]">
+		<div class="avatar">
+			<div class="w-36 mask {user?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
+				<img src={user.avatar} alt="" />
 			</div>
-		</a>
-	</li>
-</ul>
+		</div>
+		<div class="tooltip w-full" data-tip="@{user.username}">
+			<p class="text-lg font-semibold truncate">@{user.username}</p>
+		</div>
+		<div class="w-full">
+			{#if user.category && user.category.length}
+				{#each user.category as category}
+					<div class="tooltip" data-tip={category}>
+						<img src={$category_list[category]} alt="" class="h-10 w-10 m-1" />
+					</div>
+				{/each}
+			{/if}
+		</div>
+	</div>
+</a>
diff --git a/src/lib/components/Browse/Sections/SectionChannel.svelte b/src/lib/components/Browse/Sections/SectionChannel.svelte
index 8ef4ac45..4a7951f1 100644
--- a/src/lib/components/Browse/Sections/SectionChannel.svelte
+++ b/src/lib/components/Browse/Sections/SectionChannel.svelte
@@ -49,7 +49,9 @@
 			</div>
 			<div class="flex flex-row">
 				<div class="relative flex items-center ml-3">
-					<div class="absolute btn btn-neutral btn-prev btn-square text-white p-2 left-0 z-10" on:click={prev}>
+					<div
+						class="absolute btn btn-neutral btn-prev btn-square text-white p-2 left-0 z-10"
+						on:click={prev}>
 						<IconDrawerLeft />
 					</div>
 				</div>
@@ -69,7 +71,9 @@
 				</div>
 
 				<div class="relative flex items-center mr-3">
-					<div class="absolute btn btn-neutral btn-next btn-square text-white p-2 right-0 z-10" on:click={next}>
+					<div
+						class="absolute btn btn-neutral btn-next btn-square text-white p-2 right-0 z-10"
+						on:click={next}>
 						<IconDrawerChevron />
 					</div>
 				</div>
diff --git a/src/lib/components/Channel/Chat/ChatInput.svelte b/src/lib/components/Channel/Chat/ChatInput.svelte
index 9545e01e..50f3260e 100644
--- a/src/lib/components/Channel/Chat/ChatInput.svelte
+++ b/src/lib/components/Channel/Chat/ChatInput.svelte
@@ -21,7 +21,7 @@
 	$: isHost = channel.user === $page.data.user?.userId
 
 	$: viewersWithOutHost = viewers.filter((viewer) => viewer.userId !== channel.user)
-
+$: console.log("viewers : ", viewers)
 	function insert(str: string, index: number, value: string) {
 		return str.substr(0, index) + value + str.substr(index)
 	}
@@ -68,9 +68,17 @@
 	}
 
 	const slectUserfromKey = (key: string) => {
-		if (key === 'ArrowDown' && selectedUser < viewers.length) {
+		if(selectedUser >= viewersWithOutHost.length - 1){
+			selectedUser = 0
+			return 
+		}
+		else if(selectedUser === 0){
+			selectedUser = viewersWithOutHost.length - 1
+			return
+		}
+		if (key === 'ArrowDown' && selectedUser < viewersWithOutHost.length - 1) {
 			selectedUser++
-		} else if (key === 'ArrowUp' && selectedUser >= 0) {
+		} else if (key === 'ArrowUp' && selectedUser > 0) {
 			selectedUser--
 		}
 	}
@@ -205,6 +213,7 @@
 		!chatMessage.includes('@') &&
 		(channel.user === $page.data.user?.userId || channel.mods?.includes($page.data.user?.userId)) &&
 		!showUsers
+
 </script>
 
 <form class="rounded-lg bg-base-200 p-2 w-full relative">
@@ -299,7 +308,7 @@
 							e.preventDefault()
 							if (showUsers) {
 								if (selectedUser >= 0) {
-									const user = viewers[selectedUser]
+									const user = viewersWithOutHost[selectedUser]
 									chatMessage = chatMessage.replace(/@/, '@' + user.username)
 								}
 							} else {
diff --git a/src/lib/components/Channel/Chat/DrawerChat.svelte b/src/lib/components/Channel/Chat/DrawerChat.svelte
index b2b98183..71ce249f 100644
--- a/src/lib/components/Channel/Chat/DrawerChat.svelte
+++ b/src/lib/components/Channel/Chat/DrawerChat.svelte
@@ -9,6 +9,7 @@
 	import { emitChatHistoryToChannel } from '$lib/websocket'
 	import { setRole } from '$lib/utils'
 	import LastItemInViewport from '$lib/actions/LastItemInViewport'
+	import ProfilePopup from './ProfilePopup.svelte'
 
 	export let channel: any = undefined,
 		showEditChannelDrawer: boolean = false,
@@ -16,6 +17,9 @@
 		chatHistory: any[] = []
 
 	let cursor: any = undefined
+	let profileElt: any = null
+	let selectedUser: string = ''
+	let ignoreOutsideClick = false
 
 	channel_message.subscribe((value) => {
 		if (!value) return
@@ -74,13 +78,34 @@
 			})
 		}
 	}
+
+	const closeProfile = () => {
+		if (ignoreOutsideClick) return
+		profileElt = null
+		selectedUser = ''
+	}
+
+	const onUsernameClick = (evt: any) => {
+		profileElt = evt.target
+		selectedUser = profileElt.id.substr(1)
+		ignoreOutsideClick = true
+		setTimeout(() => {
+			ignoreOutsideClick = false
+		}, 100)
+	}
+
 </script>
 
 <div class="bg-base-100 flex flex-col overflow-y-hidden w-72 md:w-full h-full rounded-lg">
 	<DropdownViewChannel bind:channel bind:showEditChannelDrawer />
-	<div class="flex flex-col-reverse p-3 grow overflow-y-scroll w-96">
+	<div on:scroll={closeProfile} class="flex flex-col-reverse p-3 grow overflow-y-scroll w-96">
+		<ProfilePopup
+			open={profileElt ? true : false}
+			elt={profileElt}
+			bind:userId={selectedUser}
+			onOutsideClick={closeProfile} />
 		{#each chatHistory as sender}
-			<Message bind:sender bind:hostId={channel.user} bind:channel />
+			<Message bind:sender bind:hostId={channel.user} bind:channel {onUsernameClick} />
 		{/each}
 		<span use:LastItemInViewport on:loadMore={loadMore} />
 	</div>
diff --git a/src/lib/components/Channel/Chat/DrawerEditChannel.svelte b/src/lib/components/Channel/Chat/DrawerEditChannel.svelte
index fb8d8987..ca71c9f6 100644
--- a/src/lib/components/Channel/Chat/DrawerEditChannel.svelte
+++ b/src/lib/components/Channel/Chat/DrawerEditChannel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	// import IconPhoto from '$lib/assets/icons/IconPhoto.svelte'
 	import { tags } from '$lib/stores/channelStore'
+	import { is_sharing_screen, is_sharing_webcam } from '$lib/stores/streamStore'
 	import { onDestroy, onMount } from 'svelte'
 	import Tags from 'svelte-tags-input'
 	import DrawerAddCategory from '$lib/components/Browse/DrawerAddCategory.svelte'
@@ -8,6 +8,7 @@
 	import { enhance } from '$app/forms'
 	import { category_list } from '$lib/stores/channelStore'
 	import { emitChannelUpdate } from '$lib/websocket'
+	import IconChatScreenshot from '$lib/assets/icons/chat/IconChatScreenshot.svelte'
 
 	export let channel: any, showDrawer: boolean
 
@@ -16,7 +17,8 @@
 		showThumbnail = false,
 		showAddCategory = false,
 		maxTag = 3,
-		maxCategory = 4
+		maxCategory = 4,
+		imageSrc = ''
 
 	$: maxTagLabel = channel?.tags.length == maxTag ? 'max reached' : 'max ' + maxTag
 	$: maxCategoryLabel =
@@ -49,6 +51,37 @@
 		showThumbnail = false
 	}
 
+	const checkVideo = (e: any) => {
+		e.preventDefault()
+		showThumbnail = true
+		if (channel.videoItems.length > 0) {
+			let screenElement = document.getElementById(
+				`screen-${channel.videoItems[0]._id}`
+			) as HTMLVideoElement
+			let webcamElement = document.getElementById(
+				`webcam-${channel.videoItems[0]._id}`
+			) as HTMLVideoElement
+			let canvas = document.createElement('canvas')
+			canvas.width = 1920
+			canvas.height = 1080
+
+			let ctx = canvas.getContext('2d')
+
+			console.log(screenElement)
+			console.log(webcamElement)
+
+			if (ctx !== null && screenElement !== null && webcamElement !== null) {
+				ctx.drawImage(screenElement, 0, 0, canvas.width, canvas.height)
+				ctx.globalAlpha = 1
+				ctx.drawImage(webcamElement, 1400, 750, canvas.width - 1400, canvas.height - 750)
+			}
+
+			let screenshot = canvas.toDataURL('image/jpeg')
+			imageSrc = screenshot
+			//thumbnailRef.setAttribute('src', screenshot);
+		}
+	}
+
 	const addTag = (tagName: string) => {
 		tagName && channel.tags.length < maxTag ? channel.tags.push(tagName) : ''
 		channel = channel
@@ -101,25 +134,32 @@
 						Edit channel
 					</p>
 					<div class="flex flex-col p-3">
-						<p class="text-lg font-semibold">Please hide all sensitive data before going live.</p>
-
-						<!-- <div class="flex flex-row justify-center w-full">
-							<div class="card w-40 shadow-xl">
-								<div class="card-body items-center max-h-40 {showThumbnail ? '!p-3' : ''}">
-									{#if showThumbnail}
-										<img bind:this={thumbnailRef} src="" alt="Preview" class="rounded-lg h-full" />
+						<div class="flex flex-row justify-center w-full">
+							<div class="card w-60 shadow-xl" on:click={checkVideo}>
+								<div class="items-center max-h-40 {showThumbnail ? '!p-3' : ''}">
+									{#if imageSrc || channel.thumbnail}
+										<img
+											bind:this={thumbnailRef}
+											src={imageSrc || channel.thumbnail}
+											alt="Preview"
+											class="rounded-lg h-full" />
 									{:else}
-										<IconPhoto />
+										<div class="h-40 flex flex-col justify-center items-center">
+											<IconChatScreenshot />
+											Thumbnail
+										</div>
 									{/if}
 								</div>
 							</div>
 						</div>
-
+						<input type="hidden" name="imageSrc" value={imageSrc} />
+						<input type="hidden" name="channelId" value={channel._id} />
 						<input
 							bind:this={fileuploader}
 							on:change={fileupload}
 							type="file"
-							class="file-input file-input-bordered file-input-primary w-full mt-5" /> -->
+							name="thumbnail"
+							class="file-input file-input-bordered file-input-primary w-full mt-5" />
 						<input
 							bind:value={channel.title}
 							type="text"
diff --git a/src/lib/components/Channel/Chat/DropdownViewChannel.svelte b/src/lib/components/Channel/Chat/DropdownViewChannel.svelte
index 91c7b28a..920dddad 100644
--- a/src/lib/components/Channel/Chat/DropdownViewChannel.svelte
+++ b/src/lib/components/Channel/Chat/DropdownViewChannel.svelte
@@ -130,7 +130,7 @@
 							<p class="truncate">{host?.displayName}</p>
 						</div>
 						<div class="col-span-3 tooltip flex" data-tip="@{host?.username}">
-							<p class=" text-pink-500 truncate">@{host?.username}</p>
+							<p class="truncate">@{host?.username}</p>
 						</div>
 					</div>
 				</div>
@@ -140,7 +140,7 @@
 			<div class="grid grid-cols-5 gap-2">
 				<label
 					for="edit-channel-drawer"
-					class="btn btn-neutral text-white col-span-4 flex"
+					class="btn btn-neutral text-white col-span-4 flex tooltip font-normal normal-case"
 					data-tip="Edit channel"
 					on:click={() => (showEditChannelDrawer = true)}>
 					Edit channel
diff --git a/src/lib/components/Channel/Chat/GifPicker.svelte b/src/lib/components/Channel/Chat/GifPicker.svelte
index 214da21d..a4b9e13c 100644
--- a/src/lib/components/Channel/Chat/GifPicker.svelte
+++ b/src/lib/components/Channel/Chat/GifPicker.svelte
@@ -3,8 +3,8 @@
 	import IconChatGif from '$lib/assets/icons/chat/IconChatGif.svelte'
 	import FloatingMenu from './FloatingMenu.svelte'
 
-	import { get } from '../../../api.js'
 	import { page } from '$app/stores'
+	import { get } from '$lib/api'
 
 	export let onSelect: any, isChannelSocketConnected: any
 
diff --git a/src/lib/components/Channel/Chat/Message.svelte b/src/lib/components/Channel/Chat/Message.svelte
index 4f36f292..93b2abab 100644
--- a/src/lib/components/Channel/Chat/Message.svelte
+++ b/src/lib/components/Channel/Chat/Message.svelte
@@ -5,14 +5,17 @@
 	import IconChatQuote from '$lib/assets/icons/chat/IconChatQuote.svelte'
 	import IconChatDelete from '$lib/assets/icons/chat/IconChatDelete.svelte'
 	import IconChatHorizontalMore from '$lib/assets/icons/chat/IconChatHorizontalMore.svelte'
-	import ProfileCard from '$lib/components/Channel/Chat/ProfileCard.svelte'
 	import { emitChannelUpdate, emitDeleteMessageToChannel } from '$lib/websocket'
 	import { copyToClipboard, getColoredRole, setRole } from '$lib/utils'
 	import { page } from '$app/stores'
 	import IconChatBan from '$lib/assets/icons/chat/IconChatBan.svelte'
+	import { onMount } from 'svelte'
+	import ProfilePopup from './ProfilePopup.svelte'
 
-	export let sender: any, hostId: string, channel: any
+	export let sender: any, hostId: string, channel: any, onUsernameClick: any
 	let role: string, coloredRole: any
+	let profileElt: any = null
+	let ignoreOutsideClick = false
 
 	$: isGuest = channel?.guests?.includes(sender.user?.userId)
 
@@ -130,6 +133,30 @@
 		}
 	}
 
+	const hightlightUsername = (match: string) => {
+		return `
+			<span 
+				class="text-success font-medium cursor-pointer link"
+				name="username"
+				id=${match}
+			>
+				${match}
+			</span>
+		`
+	}
+
+	const parse = (msg: string) => {
+		const m = msg + ' '
+		return m.replace(/@[\w-]+[,\s]/g, hightlightUsername).trim()
+	}
+
+	onMount(() => {
+		const spans = document.querySelectorAll('span[name="username"]')
+		spans.forEach((span: any) => {
+			span.onclick = onUsernameClick
+		})
+	})
+
 	$: codeSnippet = isCodeSnippet(sender.message) ? getCodeSnippet(sender.message) : false
 </script>
 
@@ -149,11 +176,12 @@
 							id="b1"
 							class="{coloredRole.textColor} font-medium">@{sender.user?.username}</span> -->
 
-					<ProfileCard userId={sender.user?.userId}>
-						<span class="{coloredRole.textColor} font-medium">
-							@{sender.user?.username}
-						</span>
-					</ProfileCard>
+					<span
+						class="{coloredRole.textColor} font-medium cursor-pointer"
+						on:click={onUsernameClick}
+						id={'@' + sender.user?.username}>
+						@{sender.user?.username}
+					</span>
 				{/if}
 				{#if isImage(sender.message)}
 					<img class="py-2 pr-2" src={sender.message} alt="imgs" />
@@ -172,7 +200,7 @@
 						<span class="break-all">{codeSnippet.endText}</span>
 					{/if}
 				{:else}
-					<span class="break-all">{sender.message}</span>
+					<span class="break-all">{@html parse(sender.message)}</span>
 				{/if}
 			</label>
 
diff --git a/src/lib/components/Channel/Chat/ProfileCard.svelte b/src/lib/components/Channel/Chat/ProfileCard.svelte
deleted file mode 100644
index 9c8fd838..00000000
--- a/src/lib/components/Channel/Chat/ProfileCard.svelte
+++ /dev/null
@@ -1,133 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/stores'
-	import { get, post } from '$lib/api'
-	import { onMount } from 'svelte'
-	import { setProfile, getProfile } from '$lib/stores/helperStore'
-	import { clickOutside } from '$lib/utils.js'
-	import { put, del } from '$lib/api'
-
-	export let userId: string
-	let profileData: any = getProfile(userId) || { profile: {} }
-	let loading = false
-	let show = false
-	let elt: any
-
-	$: auth = {
-		userId: $page.data.user?.userId,
-		token: $page.data.user?.token
-	}
-
-	const toggle = async () => {
-		show = !show
-		if (show) loadProfile(false)
-	}
-
-	const handleClickOutside = (event: any) => {
-		show = false
-	}
-
-	const doFollow = async (isFollow: any) => {
-		loading = true
-
-		const source1 = profile._id
-		const source2 = $page.data.user?.userId
-		const isFollowing = isFollow.toString()
-
-		if (isFollowing == 'true') {
-			await put(`follows`, { source1, source2 }, auth)
-		} else {
-			await del(`follows?source1=${source1}&source2=${source2}`, auth)
-		}
-
-		await loadProfile(true)
-		loading = false
-	}
-
-	const loadProfile = async (refresh: boolean) => {
-		loading = true
-		if (getProfile(userId) && !refresh) {
-			profileData = getProfile(userId)
-		} else {
-			profileData.profile = await get(`users/search/id?userId=${userId}`, auth)
-			profileData.followerCount = await get(
-				`follows/count?source=${userId}&sourceType=source1`,
-				auth
-			)
-			profileData.followingCount = await get(
-				`follows/count?source=${userId}&sourceType=source2`,
-				auth
-			)
-			if ($page.data.user?.userId) {
-				profileData.isFollowed = await get(`follows/relationship?source=${profile._id}`, auth)
-			}
-
-			setProfile(userId, profileData)
-		}
-		loading = false
-	}
-
-	$: profile = profileData.profile
-	$: followerCount = profileData.followerCount || 0
-	$: followingCount = profileData.followingCount || 0
-	$: margin = (elt ? elt.getBoundingClientRect().height : 0) + 40
-	$: isSelf = userId === $page.data.user?.userId
-</script>
-
-<span use:clickOutside={handleClickOutside}>
-	{#if show}
-		<div
-			style="margin-top: {-margin}px"
-			bind:this={elt}
-			data-popover
-			class="absolute -mt-2 z-50 dropdown-content text-sm font-light bg-base-200 card shadow-sm w-full">
-			<div class="p-3">
-				<div class="flex items-center justify-between mb-2">
-					<span>
-						<img
-							class="w-10 h-10 mask mask-squircle"
-							src={profileData.profile.avatar}
-							alt={profileData.profile.avatar} />
-					</span>
-					<div>
-						<button
-							on:click={() => doFollow(!profileData.isFollowed?.isInterested)}
-							disabled={isSelf || loading}
-							type="button"
-							class="btn btn-secondary btn-sm">
-							{#if loading}
-								<span class="loading loading-dots loading-md" />
-							{:else if profileData.isFollowed?.isInterested}
-								Unfollow
-							{:else}
-								Follow
-							{/if}
-						</button>
-					</div>
-				</div>
-
-				<p class="text-base font-semibold leading-none">
-					{profileData.profile.displayName || ''}
-				</p>
-				<p class="mb-3 text-sm font-normal">
-					<a class="link link-hover" href="/profile/{profileData.profile.username}"
-						>@{profileData.profile.username || ''}</a>
-				</p>
-				<p class="mb-4 text-sm font-light">
-					{profileData.profile.bio || ''}
-				</p>
-				<div class="flex text-sm gap-5">
-					<!-- svelte-ignore a11y-missing-attribute -->
-					<a class="link link-hover">
-						<span class="font-semibold">{followerCount}</span> Followers</a>
-					<!-- svelte-ignore a11y-missing-attribute -->
-					<a class="link link-hover">
-						<span class="font-semibold">{followingCount}</span> Following</a>
-				</div>
-			</div>
-		</div>
-	{/if}
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<span class="cursor-pointer" on:click={toggle}>
-		<slot />
-	</span>
-</span>
diff --git a/src/lib/components/Channel/Chat/ProfilePopup.svelte b/src/lib/components/Channel/Chat/ProfilePopup.svelte
new file mode 100644
index 00000000..09a10e54
--- /dev/null
+++ b/src/lib/components/Channel/Chat/ProfilePopup.svelte
@@ -0,0 +1,156 @@
+<script lang="ts">
+	import { page } from '$app/stores'
+	import { get } from '$lib/api'
+	import { setProfile, getProfile } from '$lib/stores/helperStore'
+	import { clickOutside } from '$lib/utils.js'
+	import { put, del } from '$lib/api'
+	import { createEffect } from '$lib/utils'
+
+	export let userId: string = '',
+		open: boolean = false,
+		onOutsideClick: any,
+		elt: any
+
+	let self: any
+
+	const useOueryEffect = createEffect()
+
+	let profileData: any = getProfile(userId) || { profile: {} }
+	let loading = false
+
+	$: auth = {
+		userId: $page.data.user?.userId,
+		token: $page.data.user?.token
+	}
+
+	const handleClickOutside = (event: any) => {
+		if (onOutsideClick) onOutsideClick()
+	}
+
+	const doFollow = async (isFollow: any) => {
+		loading = true
+
+		const source1 = profileData.profile._id
+		const source2 = $page.data.user?.userId
+		const isFollowing = isFollow.toString()
+		if (!profileData.isFollowed) profileData.isFollowed = {}
+
+		if (isFollowing == 'true') {
+			await put(`follows`, { source1, source2 }, auth)
+			profileData.followerCount++
+			profileData.isFollowed.isFollowing = true
+		} else {
+			await del(`follows?source1=${source1}&source2=${source2}`, auth)
+			profileData.followerCount--
+			profileData.isFollowed.isFollowing = false
+		}
+		setProfile(userId, profileData)
+		loading = false
+	}
+
+	const loadProfile = async (refresh: boolean) => {
+		loading = true
+		if (getProfile(userId) && !refresh) {
+			profileData = getProfile(userId)
+		} else {
+			if ($page?.data?.user?.user?.username === userId) {
+				profileData.profile = $page?.data?.user?.user
+			} else {
+				profileData.profile = await get(`users/search/username?username=${userId}`, auth)
+			}
+			const id = profileData.profile._id
+			profileData.followerCount = await get(`follows/count?source=${id}&sourceType=source1`, auth)
+			profileData.followingCount = await get(`follows/count?source=${id}&sourceType=source2`, auth)
+
+			if (userId === $page.data.user?.user?.username) {
+				profileData.isFollowed = { isFollowing: true }
+			} else {
+				profileData.isFollowed = await get(`follows/relationship?source=${id}`, auth)
+			}
+
+			setProfile(userId, profileData)
+		}
+		loading = false
+	}
+
+	$: useOueryEffect(() => {
+		if (open && userId) {
+			profileData = { profile: {} }
+			loadProfile(false)
+		}
+	}, [open, userId])
+
+	$: followerCount = profileData.followerCount || 0
+	$: followingCount = profileData.followingCount || 0
+	$: margin = (self ? self.getBoundingClientRect().height : 0) + 40
+	$: top = (elt ? elt.getBoundingClientRect().top : 0) + 40
+	$: isSelf = userId === $page.data.user?.user?.username
+</script>
+
+<span use:clickOutside={handleClickOutside}>
+	{#if open}
+		<div
+			style="margin-top: {-margin}px; top: {top}px;"
+			bind:this={self}
+			data-popover
+			class="absolute -mt-2 z-50 dropdown-content text-sm font-light bg-base-200 card shadow-sm w-80">
+			<div class="p-3">
+				<div class="flex items-center justify-between mb-2">
+					<span>
+						{#if !profileData?.profile?.avatar}
+							<div class="animate-pulse flex space-x-4 mb-1">
+								<div class="rounded bg-base-100 h-8 w-8" />
+							</div>
+						{:else}
+							<img
+								class="w-10 h-10 mask mask-squircle"
+								src={profileData?.profile?.avatar}
+								alt={profileData?.profile?.avatar} />
+						{/if}
+					</span>
+					<div>
+						<button
+							on:click={() => doFollow(!profileData?.isFollowed?.isFollowing)}
+							disabled={!$page.data.user?.userId || isSelf || loading}
+							type="button"
+							class="btn btn-secondary btn-sm">
+							{#if loading}
+								<span class="loading loading-dots loading-md" />
+							{:else if profileData?.isFollowed?.isFollowing}
+								Unfollow
+							{:else}
+								Follow
+							{/if}
+						</button>
+					</div>
+				</div>
+
+				{#if !profileData?.profile?.displayName && !profileData?.profile?.username}
+					<div class="animate-pulse flex space-x-4 mb-3">
+						<div class="rounded bg-base-100 h-12 w-full" />
+					</div>
+				{:else}
+					<p class="text-base font-semibold leading-none">
+						{profileData?.profile?.displayName}
+					</p>
+					<p class="mb-3 text-sm font-normal">
+						<a class="link link-hover" href="/profile/{profileData?.profile?.username}"
+							>@{profileData?.profile?.username}</a>
+					</p>
+				{/if}
+
+				<p class="mb-4 text-sm font-light">
+					{profileData?.profile?.bio || ' '}
+				</p>
+				<div class="flex text-sm gap-5">
+					<!-- svelte-ignore a11y-missing-attribute -->
+					<a class="link link-hover">
+						<span class="font-semibold">{followerCount}</span> Followers</a>
+					<!-- svelte-ignore a11y-missing-attribute -->
+					<a class="link link-hover">
+						<span class="font-semibold">{followingCount}</span> Following</a>
+				</div>
+			</div>
+		</div>
+	{/if}
+</span>
diff --git a/src/lib/components/Channel/Stream/StreamContainer.svelte b/src/lib/components/Channel/Stream/StreamContainer.svelte
index d0ca35a6..499f4721 100644
--- a/src/lib/components/Channel/Stream/StreamContainer.svelte
+++ b/src/lib/components/Channel/Stream/StreamContainer.svelte
@@ -5,9 +5,7 @@
 	import VideoGrid from '$lib/components/Channel/Stream/VideoGrid.svelte'
 	import { goto } from '$app/navigation'
 	import { page } from '$app/stores'
-	import { createEventDispatcher, onMount } from 'svelte'
-	import { video_items } from '$lib/stores/streamStore'
-	import { channel_connection } from '$lib/stores/websocketStore'
+	import { createEventDispatcher } from 'svelte'
 
 	const dispatch = createEventDispatcher()
 	export let userCount: number = 1,
@@ -16,8 +14,6 @@
 		isHostOrGuest: boolean = false,
 		viewers: any[] = []
 
-	$: isChannelSocketConnected = $channel_connection === `open-${channel._id}`
-
 	function autoActive(node: Element) {
 		const observer = new IntersectionObserver(callback, { threshold: 0.5 })
 		observer.observe(node)
@@ -50,7 +46,8 @@
 				<div class="flex flex-col w-full">
 					<div class="flex gap-2 mb-3">
 						<span
-							class="btn btn-sm btn-neutral font-medium text-white border-none flex items-center {$video_items?.length
+							class="btn btn-sm btn-neutral font-medium text-white border-none flex items-center {channel
+								.videoItems?.length
 								? 'bg-red-700 hover:bg-red-700'
 								: ''}">
 							LIVE
@@ -67,7 +64,7 @@
 						</div>
 					</div>
 					{#if channel && nextchannel?._id === $page.params.channelId}
-						<VideoGrid {channel} />
+						<VideoGrid bind:channel />
 					{/if}
 				</div>
 			</div>
@@ -75,6 +72,6 @@
 	</div>
 
 	<div class="absolute lg:bottom-0 bottom-10 m-7">
-		<StreamControls bind:isHostOrGuest {channel} />
+		<StreamControls bind:isHostOrGuest bind:channel />
 	</div>
 </div>
diff --git a/src/lib/components/Channel/Stream/StreamControls.svelte b/src/lib/components/Channel/Stream/StreamControls.svelte
index 1b602d4a..2c80d4bc 100644
--- a/src/lib/components/Channel/Stream/StreamControls.svelte
+++ b/src/lib/components/Channel/Stream/StreamControls.svelte
@@ -15,8 +15,7 @@
 		is_sharing_audio,
 		is_sharing_screen,
 		is_sharing_webcam,
-		updateVideoItems,
-		video_items
+		updateVideoItems
 	} from '$lib/stores/streamStore'
 	import { channel_connection } from '$lib/stores/websocketStore'
 	import { onDestroy, onMount } from 'svelte'
@@ -26,7 +25,9 @@
 
 	$: isChannelSocketConnected =
 		$channel_connection === `open-${$page.params.channelId}` && $page.data.user?.userId
-	$: videoItemIsActive = $video_items?.some((video: any) => video._id === $page.data.user?.userId)
+	$: videoItemIsActive = channel.videoItems.some(
+		(video: any) => video._id === $page.data.user?.userId
+	)
 
 	let screenUid: string = '',
 		webcamUid: string = '',
@@ -92,7 +93,7 @@
 			}
 		})
 		screenUid = liveInput.uid
-		$video_items = updateVideoItems($video_items, [liveInput])
+		channel.videoItems = updateVideoItems(channel.videoItems, [liveInput])
 		emitAction({
 			channelSocket: channel?.socket,
 			channelId: $page.params.channelId,
@@ -110,7 +111,7 @@
 			trackType: 'screen',
 			inputId: screenUid
 		})
-		$video_items = updateVideoItems($video_items, [
+		channel.videoItems = updateVideoItems(channel.videoItems, [
 			{ _id: $page.data.user.userId, trackType: 'screen', isTrackActive: false }
 		])
 		emitAction({
@@ -142,7 +143,7 @@
 			}
 		})
 		webcamUid = liveInput.uid
-		$video_items = updateVideoItems($video_items, [liveInput])
+		channel.videoItems = updateVideoItems(channel.videoItems, [liveInput])
 		emitAction({
 			channelSocket: channel?.socket,
 			channelId: $page.params.channelId,
@@ -160,7 +161,7 @@
 			trackType: 'webcam',
 			inputId: webcamUid
 		})
-		$video_items = updateVideoItems($video_items, [
+		channel.videoItems = updateVideoItems(channel.videoItems, [
 			{ _id: $page.data.user.userId, trackType: 'webcam', isTrackActive: false }
 		])
 		emitAction({
@@ -192,7 +193,7 @@
 			}
 		})
 		audioUid = liveInput.uid
-		$video_items = updateVideoItems($video_items, [liveInput])
+		channel.videoItems = updateVideoItems(channel.videoItems, [liveInput])
 		emitAction({
 			channelSocket: channel?.socket,
 			channelId: $page.params.channelId,
@@ -210,7 +211,7 @@
 			trackType: 'audio',
 			inputId: audioUid
 		})
-		$video_items = updateVideoItems($video_items, [
+		channel.videoItems = updateVideoItems(channel.videoItems, [
 			{ _id: $page.data.user.userId, trackType: 'audio', isTrackActive: false }
 		])
 		emitAction({
diff --git a/src/lib/components/Channel/Stream/VideoGrid.svelte b/src/lib/components/Channel/Stream/VideoGrid.svelte
index 9cd78864..6e37a863 100644
--- a/src/lib/components/Channel/Stream/VideoGrid.svelte
+++ b/src/lib/components/Channel/Stream/VideoGrid.svelte
@@ -1,21 +1,20 @@
 <script lang="ts">
 	import VideoItem from '$lib/components/Channel/Stream/VideoItem.svelte'
 	import { getVideoGrids } from '$lib/utils'
-	import { video_items } from '$lib/stores/streamStore'
 	import CommandList from '$lib/components/Channel/Stream/CommandList.svelte'
 
 	export let channel: any
 
-	$: grid = getVideoGrids($video_items, 9)
+	$: grid = getVideoGrids(channel.videoItems, 9)
 </script>
 
-{#if $video_items?.length}
+{#if channel.videoItems?.length}
 	<div class="carousel h-full pb-6">
 		<div class="carousel-item w-full h-full">
 			<div class="flex flex-col h-full w-full">
 				{#each grid as row}
 					<div class="flex flex-row gap-4 justify-center h-full">
-						{#each row as video}
+						{#each row as video (video._id)}
 							<VideoItem bind:video {channel} />
 						{/each}
 					</div>
diff --git a/src/lib/components/Channel/Stream/VideoItem.svelte b/src/lib/components/Channel/Stream/VideoItem.svelte
index 70aee38b..fae74763 100644
--- a/src/lib/components/Channel/Stream/VideoItem.svelte
+++ b/src/lib/components/Channel/Stream/VideoItem.svelte
@@ -11,6 +11,7 @@
 	import { getColoredRole, setRole } from '$lib/utils'
 	import IconChatBan from '$lib/assets/icons/chat/IconChatBan.svelte'
 	import { is_feature_stats_enabled } from '$lib/stores/remoteConfigStore'
+	import { addScreen, getScreen, removeScreen } from '$lib/stream-utils'
 
 	export let video: any, channel: any
 
@@ -57,7 +58,7 @@
 		video._id !== $page.data.user?.userId &&
 		role !== '🤖 AI'
 
-	$: if (isMounted && video.screen !== prevScreen) {
+	$: if (isMounted && (video.screen !== prevScreen)) {
 		handleScreenChanges()
 	}
 
@@ -95,21 +96,40 @@
 	}
 
 	const toggleClient = ({ trackType }: { trackType: string }) => {
+
 		if ($page.data.user?.userId === video._id) {
+			
 			switch (trackType) {
 				case 'screen':
 					if (video.screen && $is_sharing_screen) {
-						screenWhip = new WHIPClient(
+						const key = video.screen.webRTCPlayback.url+"-"+video._id
+						const existed = getScreen(key)
+						screenWhip = existed || new WHIPClient(
 							video.screen.webRTC.url,
 							screenElement,
 							video.screen.trackType
 						)
+						if(existed){
+							existed.videoElement = screenElement
+							screenElement.srcObject = existed.localStream
+							$is_sharing_screen = true
+							isScreenLive = true
+						}
+						addScreen(key, screenWhip)
 						screenWhip.addEventListener(`localStreamStopped-${trackType}`, () => {
 							$is_sharing_screen = false
 							isScreenLive = false
+							removeScreen(key)
 						})
 						screenWhip.addEventListener(`isScreenLive`, (ev: any) => (isScreenLive = ev.detail))
 					}
+					else if(!video.screen){
+						if(screenElement){
+							screenElement.srcObject = null
+						}
+						$is_sharing_screen = false
+						isScreenLive = false
+					}
 					break
 				case 'webcam':
 					if (video.webcam && $is_sharing_webcam) {
@@ -124,6 +144,11 @@
 						})
 						webcamWhip.addEventListener(`isWebcamLive`, (ev: any) => (isWebcamLive = ev.detail))
 					}
+					else if(!video.webcam){
+						if(webcamElement){
+							webcamElement.srcObject = null
+						}
+					}
 					break
 				case 'audio':
 					if (video.audio && $is_sharing_audio) {
@@ -141,12 +166,21 @@
 		} else {
 			switch (trackType) {
 				case 'screen':
-					if (video.screen) {
-						screenWhep = new WHEPClient(
+					if (video.screen && screenElement) {
+						const key = video.screen.webRTCPlayback.url +"-"+video._id
+						const existed = getScreen(key)
+						screenWhep = existed || new WHEPClient(
 							video.screen.webRTCPlayback.url,
 							screenElement,
 							video.screen.trackType
 						)
+						if(existed){
+							existed.videoElement = screenElement
+							screenElement.srcObject = existed.stream
+							isScreenLive = true
+						}
+						
+						addScreen(key, screenWhep)
 						screenElement.muted = false
 						screenElement.play()
 						screenWhep.addEventListener(`isScreenLive`, (ev: any) => (isScreenLive = ev.detail))
@@ -156,7 +190,7 @@
 					}
 					break
 				case 'webcam':
-					if (video.webcam) {
+					if (video.webcam && webcamElement) {
 						webcamWhep = new WHEPClient(
 							video.webcam.webRTCPlayback.url,
 							webcamElement,
@@ -169,7 +203,7 @@
 					}
 					break
 				case 'audio':
-					if (video.audio) {
+					if (video.audio && audioElement) {
 						audioWhep = new WHEPClient(
 							video.audio.webRTCPlayback.url,
 							audioElement,
@@ -199,10 +233,6 @@
 
 	onMount(() => {
 		isGuest = channel?.guests?.includes(video._id)
-		screenElement = document.getElementById(`screen-${video._id}`) as HTMLVideoElement
-		webcamElement = document.getElementById(`webcam-${video._id}`) as HTMLVideoElement
-		audioElement = document.getElementById(`audio-${video._id}`) as HTMLAudioElement
-
 		if (screenElement) {
 			screenElement.addEventListener('dblclick', (event: any) => {
 				if (document.fullscreenElement) {
@@ -232,20 +262,19 @@
 	})
 
 	is_sharing_screen.subscribe((value) => {
-		//prevents duplicate calls from WHIPClient
-		if (value === false && screenElement?.srcObject) {
+		if (value === false) {
 			screenWhip?.disconnectStream()
 		}
 	})
 
 	is_sharing_webcam.subscribe((value) => {
-		if (value === false && webcamElement?.srcObject) {
+		if (value === false) {
 			webcamWhip?.disconnectStream()
 		}
 	})
 
 	is_sharing_audio.subscribe((value) => {
-		if (value === false && audioElement?.srcObject) {
+		if (value === false) {
 			audioWhip?.disconnectStream()
 		}
 	})
@@ -314,6 +343,7 @@
 			}, 1000)
 		}
 	}
+
 </script>
 
 <div
@@ -321,6 +351,7 @@
 	on:mouseenter={() => (isHoverVideo = true)}
 	on:mouseleave={() => (isHoverVideo = false)}>
 	<div class="bg-base-200 relative w-full h-full rounded-md">
+		{video._id}
 		<img
 			src={video.avatar}
 			alt=""
@@ -336,7 +367,12 @@
 					{formattedTime}
 				</span>
 			{/if}
-			<video id={`screen-${video._id}`} autoplay muted class="rounded-md w-full h-full" />
+			<video
+				bind:this={screenElement}
+				id={`screen-${video._id}`}
+				autoplay
+				muted
+				class="rounded-md w-full h-full" />
 			<div
 				use:draggable={{ bounds: 'parent' }}
 				on:mousedown={onMouseDown}
@@ -344,9 +380,14 @@
 				class={animate +
 					' absolute ' +
 					(!isScreenLive ? 'w-full bottom-0 left-0 h-full' : 'w-1/4 bottom-0 right-0')}>
-				<video id={`webcam-${video._id}`} autoplay muted class="rounded-md h-full w-full" />
+				<video
+					bind:this={webcamElement}
+					id={`webcam-${video._id}`}
+					autoplay
+					muted
+					class="rounded-md h-full w-full" />
 			</div>
-			<video id={`audio-${video._id}`} autoplay muted class="rounded-md w-0 h-0" />
+			<video bind:this={audioElement} autoplay muted class="rounded-md w-0 h-0" />
 			<div class="absolute left-2 bottom-2 rounded-md dropdown">
 				<label
 					tabindex="0"
diff --git a/src/lib/components/Global/DrawerMain.svelte b/src/lib/components/Global/DrawerMain.svelte
index 8b0469c1..b38c71d1 100644
--- a/src/lib/components/Global/DrawerMain.svelte
+++ b/src/lib/components/Global/DrawerMain.svelte
@@ -18,7 +18,8 @@
 	import { user_role } from '$lib/stores/authStore'
 	import {
 		is_feature_premium_page_enabled,
-		is_feature_video_responses_enabled
+		is_feature_video_responses_enabled,
+		is_feature_affiliate_enabled
 	} from '$lib/stores/remoteConfigStore'
 	import IconMageText from '$lib/assets/icons/IconMageText.svelte'
 	import { is_login_modal_open } from '$lib/stores/helperStore'
@@ -27,6 +28,7 @@
 	import { isOnline } from '$lib/stores/userStore'
 	import { get } from '$lib/api'
 	import IconMageLogo from '$lib/assets/icons/IconMageLogo.svelte'
+	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
 
 	export var nav_drawer: HTMLInputElement
 
@@ -59,7 +61,7 @@
 </script>
 
 <div
-	class="menu w-80 {isChannelPage
+	class="menu w-80 overflow-y-auto overflow-x-hidden flex-nowrap {isChannelPage
 		? 'md:w-24 fixed h-full'
 		: 'h-screen'} bg-base-100 text-base-content flex flex-col">
 	<ul class={isChannelPage ? 'md:flex md:flex-col items-center md:w-full' : ''}>
@@ -81,10 +83,10 @@
 			<li class={isChannelPage ? 'md:w-full' : ''}>
 				<a
 					href="/profile/{currentUser.username}"
-					class="{isChannelPage ? 'justify-center md:w-full' : 'hero'} rounded-md cursor-pointer">
+					class="{isChannelPage ? 'justify-center md:w-full hero' : ''} rounded-md cursor-pointer">
 					<div class={isChannelPage ? 'md:text-center' : ''}>
-						<div class="hero-content {isChannelPage ? '' : 'my-1 w-64'}">
-							<div class={isChannelPage ? 'max-w-md' : 'max-w-full'}>
+						<div class={isChannelPage ? '' : 'my-1'}>
+							<div class="flex gap-3 {isChannelPage ? 'max-w-md' : 'max-w-full'}">
 								<div class="avatar {$isOnline ? 'online' : 'offline'}">
 									<div
 										class="w-24 {isChannelPage ? 'md:w-12' : ''} mask {currentUser?.isPaidPlan
@@ -94,28 +96,37 @@
 									</div>
 								</div>
 							</div>
-							<div class="grid grid-cols-3 gap-1 {isChannelPage ? 'md:hidden' : ''}">
-								<div class="col-span-3 tooltip flex" data-tip={currentUser.displayName}>
-									<p class="truncate">{currentUser.displayName}</p>
+						</div>
+						<div class={isChannelPage ? 'md:hidden' : 'space-y-1'}>
+							<div class="tooltip flex w-fit" data-tip={currentUser.displayName}>
+								<p class="tooltip truncate">{currentUser.displayName}</p>
+							</div>
+							<div class="tooltip flex gap-1 w-fit" data-tip="@{currentUser.username}">
+								<p class="truncate">@{currentUser.username}</p>
+								{#if currentUser.isAffiliate}
+									<div class="text-accent font-bold">
+										<IconDrawerVerification />
+									</div>
+								{/if}
+							</div>
+							<div class="flex gap-4 {isChannelPage ? 'md:hidden' : ''}">
+								<div class="flex gap-1 tooltip" data-tip="{streakCount} day streak">
+									<IconDrawerStreak />
+									<p class="text-start">
+										{streakCount} d
+									</p>
 								</div>
-								<div class="col-span-3 tooltip flex" data-tip="@{currentUser.username}">
-									<p class=" text-pink-500 truncate">@{currentUser.username}</p>
+								<div class="flex gap-1 tooltip" data-tip="{hoursStreamed} hours streamed today">
+									<IconDrawerStreamDuration />
+									<p class="text-start">
+										{hoursStreamed} h
+									</p>
 								</div>
-								<IconDrawerStreak />
-								<p class="col-span-2 tooltip text-start" data-tip="{streakCount} day streak">
-									{streakCount} d
-								</p>
-								<IconDrawerStreamDuration />
-								<p
-									class="col-span-2 tooltip text-start"
-									data-tip="{hoursStreamed} hours streamed today">
-									{hoursStreamed} h
-								</p>
 							</div>
 						</div>
 						<div class="tooltip" data-tip="level {progressBarLevel}">
 							<progress
-								class="progress w-64 {isChannelPage ? 'md:w-12' : 'mb-1'}"
+								class="tooltip progress w-[17rem] mt-3 {isChannelPage ? 'md:w-12' : ''}"
 								style="--progress-bar-color: {progressBarColor}"
 								value={progressBarValue}
 								max="100" />
@@ -167,9 +178,20 @@
 		<li>
 			<a class="custom-menu-item" href="https://codecrow.io/careers" target="_blank">
 				<IconDrawerCareers />
-				<span class={isChannelPage ? 'md:hidden' : ''}> Careers </span>
+				<span class={isChannelPage ? 'md:hidden' : ''}>Careers</span>
 			</a>
 		</li>
+		{#if currentUser && $is_feature_affiliate_enabled}
+			<li>
+				<a href="https://forms.gle/mBtByR6jdoJeQd367" class="custom-menu-item" target="_blank">
+					<IconDrawerVerification />
+					<span class={isChannelPage ? 'md:hidden' : ''}>Affiliate</span>
+					{#if !isChannelPage}
+						<span class="badge badge-neutral">New</span>
+					{/if}
+				</a>
+			</li>
+		{/if}
 		<li>
 			<details>
 				<summary class="custom-menu-item"
@@ -184,7 +206,7 @@
 		<li>
 			<a class="custom-menu-item" href="/settings">
 				<IconDrawerSettings />
-				<span class={isChannelPage ? 'md:hidden' : ''}> Settings </span>
+				<span class={isChannelPage ? 'md:hidden' : ''}>Settings </span>
 			</a>
 		</li>
 		{#if currentUser}
@@ -192,7 +214,7 @@
 				<li>
 					<button class="custom-menu-item" type="submit">
 						<IconDrawerLogOut />
-						<span class={isChannelPage ? 'md:hidden' : ''}>Log out </span>
+						<span class={isChannelPage ? 'md:hidden' : ''}>Log out</span>
 					</button>
 				</li>
 			</form>
@@ -207,7 +229,7 @@
 						}
 					}}>
 					<IconDrawerLogOut />
-					<span class={isChannelPage ? 'md:hidden' : ''}>Log In </span>
+					<span class={isChannelPage ? 'md:hidden' : ''}>Log In</span>
 				</button>
 			</li>
 		{/if}
diff --git a/src/lib/components/Profile/Elements/UserDetails.svelte b/src/lib/components/Profile/Elements/UserDetails.svelte
index 385bfdbb..bfb153db 100644
--- a/src/lib/components/Profile/Elements/UserDetails.svelte
+++ b/src/lib/components/Profile/Elements/UserDetails.svelte
@@ -12,7 +12,7 @@
 		</h3>
 	{/if}
 	{#if profile.username}
-		<div class="text-lg leading-normal mt-0 mb-2 font-bold text-pink-500">
+		<div class="text-lg leading-normal mt-0 mb-2 font-bold">
 			@{profile.username || ''}
 		</div>
 	{/if}
diff --git a/src/lib/components/Profile/LoadMore.svelte b/src/lib/components/Profile/LoadMore.svelte
index 98350b3f..4176e771 100644
--- a/src/lib/components/Profile/LoadMore.svelte
+++ b/src/lib/components/Profile/LoadMore.svelte
@@ -14,12 +14,12 @@
 
 	let listElement: any
 	let skip = 0
-	let s_skip = 0
+	let sSkip = 0
 	let list: any[] = []
-	let s_list: any = null
+	let sList: any = null
 	let loading = false
 	let allLoaded = false
-	let s_allLoaded = false
+	let sAllLoaded = false
 	let query = ''
 
 	onMount(async () => {
@@ -29,11 +29,11 @@
 					if (dataSource && !loading && !allLoaded) {
 						loading = true
 						if (query) {
-							if (!s_allLoaded) {
-								s_skip += s_limit
-								let resp = await searchDataSource(query, s_skip, s_limit)
-								s_allLoaded = resp.length === 0
-								s_list = [...s_list, ...resp]
+							if (!sAllLoaded) {
+								sSkip += s_limit
+								let resp = await searchDataSource(query, sSkip, s_limit)
+								sAllLoaded = resp.length === 0
+								sList = [...sList, ...resp]
 							}
 						} else {
 							skip += limit
@@ -50,11 +50,11 @@
 
 	const search = async () => {
 		loading = true
-		s_allLoaded = false
-		s_list = []
-		s_skip = 0
-		s_list = await searchDataSource(query, s_skip, s_limit)
-		s_allLoaded = s_list.length < s_limit ? true : false
+		sAllLoaded = false
+		sList = []
+		sSkip = 0
+		sList = await searchDataSource(query, sSkip, s_limit)
+		sAllLoaded = sList.length < s_limit ? true : false
 		loading = false
 	}
 
@@ -64,7 +64,7 @@
 
 	$: useOueryEffect(() => {
 		if (!query) {
-			s_list = null
+			sList = null
 		}
 	}, [query])
 
@@ -74,7 +74,7 @@
 			return
 		}
 		query = ''
-		s_list = null
+		sList = null
 		skip = 0
 		loading = true
 		list = await dataSource(skip, limit)
@@ -82,7 +82,7 @@
 		loading = false
 	}, [count])
 
-	$: main_list = s_list || list
+	$: main_list = sList || list
 </script>
 
 <div>
diff --git a/src/lib/components/Profile/TopSection.svelte b/src/lib/components/Profile/TopSection.svelte
index 1490d961..1f5923c4 100644
--- a/src/lib/components/Profile/TopSection.svelte
+++ b/src/lib/components/Profile/TopSection.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
 	import IconMore from '$lib/assets/icons/IconMore.svelte'
 	import { page } from '$app/stores'
-	import { onMount } from 'svelte'
 	import { follower_count, following_count } from '$lib/stores/profileStore'
-	import { enhance } from '$app/forms'
 	import { put, del } from '$lib/api'
 	import { get } from '$lib/api'
+	import { createEffect } from '$lib/utils'
 
 	export let profile: any,
 		showDrawer = false
 
+	const useOueryEffect = createEffect()
+
+
 	$: auth = {
 		userId: $page.data.user?.userId,
 		token: $page.data.user?.token
@@ -21,7 +23,6 @@
 	const refreash = async () => {
 		$follower_count = await get(`follows/count?source=${profile._id}&sourceType=source1`, auth)
 		$following_count = await get(`follows/count?source=${profile._id}&sourceType=source2`, auth)
-
 		if ($page.data.user?.userId) {
 			isFollowed = await get(`follows/relationship?source=${profile._id}`, auth)
 			subValues = isFollowed
@@ -41,9 +42,9 @@
 		refreash()
 	}
 
-	onMount(async () => {
+	$: useOueryEffect(async () => {
 		refreash()
-	})
+	}, [profile._id])
 
 	$: currentUser = $page.data.user?.user
 	$: subValues
diff --git a/src/lib/stores/remoteConfigStore.ts b/src/lib/stores/remoteConfigStore.ts
index 287edfb8..1661fa74 100644
--- a/src/lib/stores/remoteConfigStore.ts
+++ b/src/lib/stores/remoteConfigStore.ts
@@ -4,3 +4,4 @@ export const is_feature_video_responses_enabled: Writable<boolean> = writable(fa
 export const is_feature_premium_page_enabled: Writable<boolean> = writable(false)
 export const is_feature_follows_enabled: Writable<boolean> = writable(false)
 export const is_feature_stats_enabled: Writable<boolean> = writable(false)
+export const is_feature_affiliate_enabled: Writable<boolean> = writable(false)
diff --git a/src/lib/stores/streamStore.ts b/src/lib/stores/streamStore.ts
index e6529991..d321941f 100644
--- a/src/lib/stores/streamStore.ts
+++ b/src/lib/stores/streamStore.ts
@@ -1,7 +1,6 @@
 import { writable, type Writable } from 'svelte/store'
 import { env } from '$env/dynamic/public'
 
-export const video_items: Writable<any> = writable([])
 export const is_sharing_screen: Writable<boolean | undefined> = writable(undefined)
 export const is_sharing_webcam: Writable<boolean | undefined> = writable(undefined)
 export const is_sharing_audio: Writable<boolean | undefined> = writable(undefined)
diff --git a/src/lib/stream-utils.ts b/src/lib/stream-utils.ts
new file mode 100644
index 00000000..c6b156f3
--- /dev/null
+++ b/src/lib/stream-utils.ts
@@ -0,0 +1,13 @@
+var aliveScreens:any = {}
+
+export const addScreen = (key:string, screen:any) => {
+    aliveScreens[key] = screen
+}
+
+export const getScreen = (key:string):any => {
+    return aliveScreens[key]
+}
+
+export const removeScreen = (key:string) => {
+    delete aliveScreens[key]
+}
diff --git a/src/lib/websocket.ts b/src/lib/websocket.ts
index 06287194..b99f1e22 100644
--- a/src/lib/websocket.ts
+++ b/src/lib/websocket.ts
@@ -27,6 +27,7 @@ const emitChannelUpdate = ({
 }) => {
 	const noSocketChannel = { ...channel }
 	delete noSocketChannel.socket
+	delete noSocketChannel.videoItems
 	channelSocket.send(
 		JSON.stringify({ eventName: `channel-update`, channel: noSocketChannel, roleUpdate })
 	)
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index bb29f00b..094501ef 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -23,7 +23,8 @@
 		is_feature_premium_page_enabled,
 		is_feature_follows_enabled,
 		is_feature_video_responses_enabled,
-		is_feature_stats_enabled
+		is_feature_stats_enabled,
+		is_feature_affiliate_enabled
 	} from '$lib/stores/remoteConfigStore'
 	import { env } from '$env/dynamic/public'
 	import { user_role } from '$lib/stores/authStore'
@@ -50,6 +51,7 @@
 		$is_feature_video_responses_enabled = env.PUBLIC_FEATURE_VIDEO_RESPONSES === 'true'
 		$is_feature_follows_enabled = env.PUBLIC_FEATURE_FOLLOWS === 'true'
 		$is_feature_stats_enabled = env.PUBLIC_FEATURE_STATS === 'true'
+		$is_feature_affiliate_enabled = env.PUBLIC_FEATURE_AFFILIATE === 'true'
 		await handleWebsocket()
 		if (!$category_list.length) {
 			$category_list = imageUrlsJson
diff --git a/src/routes/browse/+page.svelte b/src/routes/browse/+page.svelte
index b1d8125c..a9395aa9 100644
--- a/src/routes/browse/+page.svelte
+++ b/src/routes/browse/+page.svelte
@@ -6,16 +6,9 @@
 	import SectionTable from '$lib/components/Browse/Sections/SectionTable.svelte'
 	import type { PageData } from './$types'
 	import { page } from '$app/stores'
-	import { onMount } from 'svelte'
-	import { video_items } from '$lib/stores/streamStore'
-	import { get, post } from '$lib/api'
 
 	export let data: PageData
 	$: user = $page.data.user
-
-	onMount(async () => {
-		$video_items = []
-	})
 </script>
 
 <SectionCarousel bind:channels={data.lazy.mostActiveChannels} />
diff --git a/src/routes/channel/[channelId]/+page.server.ts b/src/routes/channel/[channelId]/+page.server.ts
index 2d33f9ee..4ca374c3 100644
--- a/src/routes/channel/[channelId]/+page.server.ts
+++ b/src/routes/channel/[channelId]/+page.server.ts
@@ -1,7 +1,63 @@
+import { patch, putImage } from '$lib/api'
 import type { Actions } from './$types'
 
+const dataURLtoFile = (dataurl: string, filename: string) => {
+	const arr = dataurl.split(',')
+	const mime = (arr[0] && arr[0].match(/:(.*?);/)?.[1]) || ''
+	const bstr = atob(arr[1])
+	let n = bstr.length
+	const u8arr = new Uint8Array(n)
+	while (n--) {
+		u8arr[n] = bstr.charCodeAt(n)
+	}
+	return new File([u8arr], filename, { type: mime })
+}
+
 export const actions = {
-	'edit-channel': async () => {
+	'edit-channel': async ({ request, locals }) => {
+		const data: FormData = await request.formData()
+		const newChannel = {}
+		addPropertyIfDefined(data, 'description', newChannel)
+		addPropertyIfDefined(data, 'title', newChannel)
+		addPropertyIfDefined(data, 'category', newChannel)
+		const thumbnail = data.get('thumbnail') as File
+		const imageSrc = data.get('imageSrc') as string
+		const channelId = data.get('channelId') as string
+		const file =
+			thumbnail !== null && thumbnail.size > 0
+				? thumbnail
+				: dataURLtoFile(imageSrc, 'thumbnail-image')
+		console.log(file)
+		if (file !== null && file.size > 0) {
+			const urlLocation = await putImage(
+				`channels/thumbnail?channelId=${channelId}&bucketName=thumbnails&originalName=${channelId}-thumbnail`,
+				file,
+				{
+					userId: locals.user.userId,
+					token: locals.user.token
+				}
+			)
+			console.log(urlLocation)
+		}
+
+		const updatedChannel = await patch(`channels?channelId=${channelId}`, newChannel, {
+			userId: locals.user.userId,
+			token: locals.user.token
+		})
+
+		console.log(updatedChannel)
+
 		return { success: true }
 	}
 } satisfies Actions
+
+const addPropertyIfDefined = (
+	data: FormData,
+	property: string,
+	newChannel: { [key: string]: unknown }
+) => {
+	const propertyValue = data.get(property)
+	if (propertyValue !== null && propertyValue !== undefined) {
+		newChannel[property] = propertyValue
+	}
+}
diff --git a/src/routes/channel/[channelId]/+page.svelte b/src/routes/channel/[channelId]/+page.svelte
index 2e629ed8..ffa4bc29 100644
--- a/src/routes/channel/[channelId]/+page.svelte
+++ b/src/routes/channel/[channelId]/+page.svelte
@@ -20,8 +20,7 @@
 		is_sharing_screen,
 		is_sharing_webcam,
 		is_sharing_audio,
-		updateVideoItems,
-		video_items
+		updateVideoItems
 	} from '$lib/stores/streamStore'
 
 	let channel: any,
@@ -80,13 +79,14 @@
 
 	const loadChannel = async () => {
 		const chan = await get(`channel?channelId=${$page.params.channelId}`)
+		chan.videoItems = []
 		channels.push(chan)
 	}
 
 	const initChannel = (chan: any) => {
 		$channel_connection = `open-${$page.params.channelId}`
 		$channel_message = ''
-		$video_items = []
+		chan.videoItems = []
 		if (chan.socket.readyState === WebSocket.OPEN) {
 			emitChannelSubscribeByUser({
 				channelSocket: chan.socket,
@@ -191,34 +191,36 @@
 		newchannels = newchannels.filter(
 			(newChannel: any) => !channels.some((channel: any) => channel._id === newChannel._id)
 		)
+		newchannels.forEach((channel: any) => {
+			channel.videoItems = []
+		})
 		channels = [...channels, ...newchannels]
 		skip += limit
 	}
 
 	channel_message.subscribe(async (value: any) => {
-		if (!value) return
+		if (!value || (channel && $page.params.channelId !== channel._id)) return
 		var parsedMsg = JSON.parse(value)
 		switch (parsedMsg.eventName) {
 			case `channel-update-${$page.params.channelId}`:
 				console.log('channel-update', parsedMsg)
-				channel = { ...parsedMsg.channel, socket: channel.socket }
+				channel = { ...parsedMsg.channel, socket: channel.socket, videoItems: channel.videoItems }
 
 				if (parsedMsg.roleUpdate) {
-					let videoItems = [...$video_items]
 					switch (parsedMsg.roleUpdate.roleEvent) {
 						case 'ban':
 							if (parsedMsg.roleUpdate.isEnabled) {
-								$video_items = videoItems.filter(
+								channel.videoItems = channel.videoItems.filter(
 									(video: any) => video._id !== parsedMsg.roleUpdate.userId
 								)
 							}
 							break
 						case 'guest':
 							if (parsedMsg.roleUpdate.isEnabled) {
-								videoItems.push(parsedMsg.roleUpdate.user)
-								$video_items = videoItems
+								channel.videoItems.push(parsedMsg.roleUpdate.user)
+								channel.videoItems = channel.videoItems
 							} else {
-								$video_items = videoItems.filter(
+								channel.videoItems = channel.videoItems.filter(
 									(video: any) => video._id !== parsedMsg.roleUpdate.userId
 								)
 							}
@@ -229,15 +231,20 @@
 			case `channel-subscribe-${$page.params.channelId}`:
 				userCount = parsedMsg.userCount
 				if (parsedMsg.quitUserId) {
-					$video_items = $video_items.filter((video: any) => video._id !== parsedMsg.quitUserId)
+					channel.videoItems = channel.videoItems.filter(
+						(video: any) => video._id !== parsedMsg.quitUserId
+					)
+					console.log("channel.videoItems on quit : ", channel.videoItems)
 				} else {
 					const activeGuests = parsedMsg.activeGuests
 					if (activeGuests?.length) {
-						if ($video_items.length) {
+						if (channel.videoItems.length) {
 							// for users that are in the channel and new users join
 							// add new users but dont overwrite the existing ones streaming
-							$video_items = activeGuests.map((guest: any) => {
-								const foundVideoItem = $video_items.find((video: any) => guest._id === video._id)
+							channel.videoItems = activeGuests.map((guest: any) => {
+								const foundVideoItem = channel.videoItems.find(
+									(video: any) => guest._id === video._id
+								)
 								return foundVideoItem || guest
 							})
 						} else {
@@ -245,7 +252,7 @@
 							const liveInputs = await get(
 								`cloudflare/live-inputs?channelId=${$page.params.channelId}`
 							)
-							$video_items = updateVideoItems([...activeGuests], liveInputs)
+							channel.videoItems = updateVideoItems([...activeGuests], liveInputs)
 						}
 					}
 				}
@@ -253,13 +260,16 @@
 			case `channel-streaming-action-${$page.params.channelId}`:
 				switch (parsedMsg.data.action) {
 					case 'toggleTrack':
-						if ($page.data.user?.userId) {
-							if ($page.data.user.userId !== parsedMsg.data.video._id) {
-								$video_items = updateVideoItems($video_items, [parsedMsg.data.video])
+						if(channel){
+							if ($page.data.user?.userId) {
+								if ($page.data.user.userId !== parsedMsg.data.video._id) {
+									channel.videoItems = updateVideoItems(channel.videoItems, [parsedMsg.data.video])
+								}
+							} else {
+								channel.videoItems = updateVideoItems(channel.videoItems, [parsedMsg.data.video])
 							}
-						} else {
-							$video_items = updateVideoItems($video_items, [parsedMsg.data.video])
 						}
+						
 						break
 				}
 				break
diff --git a/tsconfig.json b/tsconfig.json
index c8a152b3..f2371325 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,4 +16,4 @@
 	//
 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
 	// from the referenced tsconfig.json - TypeScript does not merge them in
-}
\ No newline at end of file
+}