diff --git a/package.json b/package.json
index f69e283e..3e598460 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
 		"dev": "concurrently \"npm run dev:only\" \"npm run tailwind:watch\"",
 		"build": "npm run tailwind:build && npm run build:only",
 		"preview": "vite preview",
-		"test": "playwright test",
+		"test": "npx playwright test",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
diff --git a/playwright.config.ts b/playwright.config.ts
index 0da4e6c9..0ce975f6 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,10 +1,10 @@
-import type { PlaywrightTestConfig } from '@playwright/test'
+import { defineConfig }  from '@playwright/test'
 
-const config: PlaywrightTestConfig = {
+export default defineConfig({
     reporter: [['json', { outputFile: 'e2eresults.json' }]],
     webServer: {
         command: 'npm run dev',
-        url: 'http://localhost:5173/',
+        port:5173,
         timeout: 240000,
         reuseExistingServer: !process.env.CI,
     },
@@ -12,6 +12,4 @@ const config: PlaywrightTestConfig = {
         baseURL: 'http://localhost:5173/',
     },
     workers: process.env.CI ? 4 : undefined
-}
-
-export default config
+});
diff --git a/src/lib/components/Browse/DrawerAddCategory.svelte b/src/lib/components/Browse/DrawerAddCategory.svelte
index 5576a542..be01e2fa 100644
--- a/src/lib/components/Browse/DrawerAddCategory.svelte
+++ b/src/lib/components/Browse/DrawerAddCategory.svelte
@@ -7,7 +7,8 @@
 	import gameUrlsJson from '$lib/assets/svg-json/game.json'
 
 	export let showAddCategory: boolean = true,
-		categories: any = []
+		categories: any = [],
+		classes: string = ''
 
 	let maxCategory = 4,
 		tabs = ['Game', 'Web2', 'Web3'],
@@ -87,7 +88,7 @@
 	})
 </script>
 
-<div class="bg-base-200 w-80 md:w-[30rem] flex flex-col">
+<div class="bg-base-200 rounded-lg w-80 md:w-[30rem] flex flex-col {classes}">
 	<p class="p-3 text-xl mb-5 pb-2 border-purple-500 font-semibold border-b-2">Select category</p>
 	<div class="flex flex-col p-3 h-full">
 		<div class="relative">
diff --git a/src/lib/components/Browse/DrawerCreateChannel.svelte b/src/lib/components/Browse/DrawerCreateChannel.svelte
index 12efcf92..9df2f19e 100644
--- a/src/lib/components/Browse/DrawerCreateChannel.svelte
+++ b/src/lib/components/Browse/DrawerCreateChannel.svelte
@@ -79,6 +79,7 @@
 	<div class="drawer-side">
 		<label
 			for="create-channel-drawer"
+			on:keyup
 			on:click={() =>
 				setTimeout(() => {
 					showDrawer = false
@@ -88,12 +89,13 @@
 			<DrawerAddCategory bind:showAddCategory bind:categories={newChannel.category} />
 		{:else}
 			<form
+				class="flex m-5"
 				action="?/create-channel"
 				method="post"
 				use:enhance={({ data }) => {
 					data.append('newChannel', JSON.stringify(newChannel))
 				}}>
-				<div class="bg-base-200 w-80 md:w-[30rem] h-full flex flex-col">
+				<div class="bg-base-200 w-80 md:w-[30rem] h-full flex flex-col rounded-lg">
 					<p class="p-3 text-xl mb-5 pb-2 border-purple-500 font-semibold border-b-2">
 						Create a new channel
 					</p>
diff --git a/src/lib/components/Browse/Sections/SectionChannelItem.svelte b/src/lib/components/Browse/Sections/SectionChannelItem.svelte
index a4eadbf7..ec53bcc9 100644
--- a/src/lib/components/Browse/Sections/SectionChannelItem.svelte
+++ b/src/lib/components/Browse/Sections/SectionChannelItem.svelte
@@ -5,7 +5,7 @@
 	export let channel: any
 </script>
 
-<div class="flex flex-col shrink-0 first:pl-8 last:pr-8 w-[300px] md:w-[400px] rounded-md">
+<a class="flex flex-col shrink-0 first:pl-8 last:pr-8 w-[300px] md:w-[400px] rounded-md" href="/channel/{channel._id}">
 	<div class="relative">
 		<div class="video-thumbnail" on:click|preventDefault={() => goto(`/channel/${channel._id}`)}>
 			{#if channel.thumbnail}
@@ -34,4 +34,4 @@
 			<p class="text-sm text-gray-600">{channel.description}</p>
 		</div>
 	</div>
-</div>
+</a>
diff --git a/src/lib/components/Channel/Chat/DrawerChat.svelte b/src/lib/components/Channel/Chat/DrawerChat.svelte
index 4e109080..ed10515a 100644
--- a/src/lib/components/Channel/Chat/DrawerChat.svelte
+++ b/src/lib/components/Channel/Chat/DrawerChat.svelte
@@ -5,7 +5,8 @@
 	import DropdownViewChannel from '$lib/components/Channel/Chat/DropdownViewChannel.svelte'
 	import { page } from '$app/stores'
 
-	export let channel: any = undefined
+	export let channel: any = undefined,
+		showEditChannelDrawer: boolean = false
 
 	let chatHistory: any[] = []
 
@@ -39,12 +40,15 @@
 			}
 			chatHistory = chatHistory.reverse()
 		}
+
+		if (parsedMsg.eventName === `channel-update-${channel._id}`) {
+			channel = parsedMsg.channel
+		}
 	})
 </script>
 
 <div class="bg-base-100 flex flex-col overflow-y-hidden">
-	<!--lg:opacity-70-->
-	<DropdownViewChannel bind:channel />
+	<DropdownViewChannel bind:channel bind:showEditChannelDrawer />
 	<div class="flex flex-col-reverse p-3 grow overflow-y-scroll lg:w-[425px] w-[415px]">
 		{#each chatHistory as sender}
 			<Message bind:sender bind:hostId={channel.user} />
diff --git a/src/lib/components/Channel/Chat/DrawerEditChannel.svelte b/src/lib/components/Channel/Chat/DrawerEditChannel.svelte
new file mode 100644
index 00000000..84fd0bba
--- /dev/null
+++ b/src/lib/components/Channel/Chat/DrawerEditChannel.svelte
@@ -0,0 +1,228 @@
+<script lang="ts">
+	// import IconPhoto from '$lib/assets/icons/IconPhoto.svelte'
+	import { tags } from '$lib/stores/channelStore'
+	import { onDestroy, onMount } from 'svelte'
+	import Tags from 'svelte-tags-input'
+	import DrawerAddCategory from '$lib/components/Browse/DrawerAddCategory.svelte'
+	import { get } from '$lib/api'
+	import { enhance } from '$app/forms'
+	import { category_list } from '$lib/stores/channelStore'
+	import { emitChannelUpdate } from '$lib/websocket'
+
+	export let channel: any, showDrawer: boolean
+
+	let fileuploader: HTMLInputElement,
+		thumbnailRef: any,
+		showThumbnail = false,
+		showAddCategory = false,
+		maxTag = 3,
+		maxCategory = 4
+
+	$: maxTagLabel = channel?.tags.length == maxTag ? 'max reached' : 'max ' + maxTag
+	$: maxCategoryLabel =
+		channel?.category.length == maxCategory ? 'max reached' : 'max ' + maxCategory
+
+	onMount(async () => {
+		if (!$tags.length) {
+			const suggestedTags = await get(`tags`)
+			$tags = suggestedTags
+		}
+	})
+	onDestroy(() => {
+		showDrawer = false
+	})
+
+	const fileupload = async () => {
+		const file = fileuploader.files && fileuploader.files[0]
+
+		if (file) {
+			const reader = new FileReader()
+			reader.addEventListener('load', function () {
+				thumbnailRef.setAttribute('src', reader.result)
+			})
+			reader.readAsDataURL(file)
+
+			// channel.thumbnail = reader.result
+			showThumbnail = true
+			return
+		}
+		showThumbnail = false
+	}
+
+	const addTag = (tagName: string) => {
+		tagName && channel.tags.length < maxTag ? channel.tags.push(tagName) : ''
+		channel = channel
+	}
+
+	let refToggle: any
+	const toggleDrawer = () => {
+		if (refToggle) {
+			refToggle.checked = false
+		}
+		setTimeout(() => {
+			showDrawer = false
+		}, 200)
+	}
+</script>
+
+<div class="drawer drawer-end absolute right-0 z-10 top-0">
+	<input id="edit-channel-drawer" bind:this={refToggle} type="checkbox" class="drawer-toggle" />
+
+	<div class="drawer-side m-5 rounded-lg">
+		<label
+			on:keyup
+			for="edit-channel-drawer"
+			class="drawer-overlay"
+			on:click={() =>
+				setTimeout(() => {
+					showDrawer = false
+				}, 200)} />
+		{#if showAddCategory}
+			<DrawerAddCategory
+				classes={'w-[415px] lg:w-[425px]'}
+				bind:showAddCategory
+				bind:categories={channel.category} />
+		{:else}
+			<form
+				action="?/edit-channel"
+				method="post"
+				use:enhance={({ data }) => {
+					data.append('category-selected', JSON.stringify(channel.category))
+					data.append('tags-selected', JSON.stringify(channel.tags))
+					return ({ result }) => {
+						if (result.type === 'success') {
+							console.log('channel', channel)
+							emitChannelUpdate({ channel })
+							toggleDrawer()
+						}
+					}
+				}}>
+				<div class="bg-base-200 rounded-lg w-[415px] lg:w-[425px] h-full flex flex-col">
+					<p class="p-3 text-xl mb-5 pb-2 border-purple-500 font-semibold border-b-2">
+						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" />
+									{:else}
+										<IconPhoto />
+									{/if}
+								</div>
+							</div>
+						</div>
+
+						<input
+							bind:this={fileuploader}
+							on:change={fileupload}
+							type="file"
+							class="file-input file-input-bordered file-input-primary w-full mt-5" /> -->
+						<input
+							bind:value={channel.title}
+							type="text"
+							name="title"
+							required
+							placeholder="Title"
+							class="input input-primary input-bordered mt-5 w-full" />
+						<textarea
+							bind:value={channel.description}
+							placeholder="Description"
+							name="description"
+							required
+							class="textarea textarea-primary mt-5 text-base w-full h-28" />
+						<p class="text-base text-gray-500 mt-5 mb-2">Suggested Tags</p>
+						<div class="flex flex-wrap">
+							{#if $tags && $tags.length > 0}
+								{#each $tags as tag}
+									<span
+										class="badge badge-md text-primary bg-gray-200 rounded-md font-semibold mx-1 cursor-pointer border-none"
+										on:keyup
+										on:click={() => addTag(tag.name)}>{tag.name}</span>
+								{/each}
+							{:else}
+								<div class="flex justify-center w-full">
+									<span class="btn btn-circle btn-outline btn-sm loading" />
+								</div>
+							{/if}
+						</div>
+						<div class="relative">
+							<Tags
+								bind:tags={channel.tags}
+								maxTags={maxTag}
+								id="tags"
+								placeholder={channel.tags.length > 0 ? '' : 'Tag'} />
+							<span class="absolute right-0 top-1/2 text-gray-400 pr-3">({maxTagLabel})</span>
+						</div>
+						<div class="relative">
+							<input
+								on:click={() => (showAddCategory = true)}
+								type="text"
+								name="category"
+								required={!channel.category.length}
+								placeholder={channel?.category?.length ? '' : 'Category'}
+								class="input input-primary input-bordered mt-5 w-full " />
+							<span class="absolute right-0 top-1/2 text-gray-400 pr-3">({maxCategoryLabel})</span>
+							<span class="absolute flex flex-row gap-2 left-0 top-1/2  pl-5">
+								{#if channel?.category?.length}
+									{#each channel?.category as icon}
+										<img src={$category_list[icon]} alt="" class="h-5 w-5" />
+									{/each}
+								{/if}
+							</span>
+						</div>
+						<!-- <div class="flex flex-row mt-5 ">
+							<input
+								bind:checked={channel.isPrivate}
+								type="checkbox"
+								class="checkbox checkbox-primary mr-3" /> Private
+						</div> -->
+					</div>
+
+					<div class="flex flex-row gap-2 mt-auto md:mb-4 p-3">
+						<button type="button" class="btn btn-default grow" on:click={() => toggleDrawer()}
+							>Cancel</button>
+						<button type="submit" class="btn btn-primary grow">Edit</button>
+					</div>
+				</div>
+			</form>
+		{/if}
+	</div>
+</div>
+
+<style>
+	:global(.svelte-tags-input-layout) {
+		--tw-border-opacity: 1 !important;
+		border-color: hsl(var(--p) / var(--tw-border-opacity)) !important;
+		border-radius: var(--rounded-btn, 0.5rem) !important;
+		height: 3rem;
+		padding-left: 1rem !important;
+		padding-right: 1rem !important;
+		--tw-bg-opacity: 1 !important;
+		background-color: hsl(var(--b1) / var(--tw-bg-opacity)) !important;
+		flex-wrap: nowrap !important;
+	}
+	:global(.svelte-tags-input-layout) {
+		@apply mt-5 w-full;
+	}
+	:global(.svelte-tags-input-layout:focus-within) {
+		outline: 2px solid hsl(var(--p)) !important;
+		outline-offset: 2px !important;
+	}
+	:global(.svelte-tags-input) {
+		width: 100%;
+		font-size: 1rem !important;
+		font-family: inherit !important;
+		background-color: hsl(var(--b1) / var(--tw-bg-opacity)) !important;
+	}
+
+	:global(.svelte-tags-input-tag) {
+		background-color: hsl(var(--p) / var(--tw-bg-opacity)) !important;
+		padding-left: 0.5rem !important;
+		padding-right: 0.5rem !important;
+		border-radius: var(--rounded-badge, 1.5rem) !important;
+	}
+</style>
diff --git a/src/lib/components/Channel/Chat/DropdownViewChannel.svelte b/src/lib/components/Channel/Chat/DropdownViewChannel.svelte
index 84f79b4a..e5c47c75 100644
--- a/src/lib/components/Channel/Chat/DropdownViewChannel.svelte
+++ b/src/lib/components/Channel/Chat/DropdownViewChannel.svelte
@@ -6,9 +6,9 @@
 	import { page } from '$app/stores'
 	import { copyToClipboard } from '$lib/utils'
 	import IconChatDelete from '$lib/assets/icons/chat/IconChatDelete.svelte'
-	import { enhance } from '$app/forms'
 
-	export let channel: any = undefined
+	export let channel: any = undefined,
+		showEditChannelDrawer: boolean = false
 
 	let host: any = {},
 		isHost: boolean = false
@@ -20,7 +20,7 @@
 </script>
 
 <div class="menu dropdown dropdown-bottom">
-	<ul tabindex="0">
+	<ul tabindex="-1">
 		<li>
 			<div class="p-3 text-xl mb-2 pb-2 border-purple-500 font-semibold border-b-2 flex">
 				<p>{channel.title || 'Chat'}</p>
@@ -32,11 +32,11 @@
 			</div>
 		</li>
 	</ul>
-	<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-96 m-3">
-		<li on:click={() => copyToClipboard(channel.description)}>
+	<ul tabindex="-1" class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-96 m-3">
+		<li on:click={() => copyToClipboard(channel.description)} on:keyup>
 			<a class="text-sm max-w-md">{channel.description || 'No description'}</a>
 		</li>
-		<li on:click={() => copyToClipboard(channel.category)}>
+		<li on:click={() => copyToClipboard(channel.category)} on:keyup>
 			<a
 				><div class="flex flex-wrap">
 					{#if channel.category && channel.category.length}
@@ -48,7 +48,7 @@
 					{/if}
 				</div></a>
 		</li>
-		<li on:click={() => copyToClipboard(channel.tags)}>
+		<li on:click={() => copyToClipboard(channel.tags)} on:keyup>
 			<a>
 				<div class="flex flex-wrap gap-2">
 					{#if channel.tags && channel.tags.length}
@@ -85,26 +85,20 @@
 		</li>
 		{#if isHost}
 			<div class="grid grid-cols-5 gap-2">
-				<button
-					class="btn col-span-4 border-none font-normal normal-case tooltip tooltip-top"
-					data-tip="Edit channel">
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<label
+					for="edit-channel-drawer"
+					class="btn col-span-4 border-none font-normal normal-case tooltip tooltip-top flex"
+					data-tip="Edit channel"
+					on:click={() => (showEditChannelDrawer = true)}>
 					Edit channel
-				</button>
-				<form
-					action="?/subscribe"
-					method="post"
-					use:enhance={() => {
-						return async ({ update }) => {
-							await update({ reset: false })
-						}
-					}}>
-					<label
-						for="modal-delete-channel"
-						class="btn col-span-1 bg-error text-white border-none font-normal normal-case tooltip tooltip-left tooltip-error flex"
-						data-tip="Delete channel">
-						<IconChatDelete />
-					</label>
-				</form>
+				</label>
+				<label
+					for="modal-delete-channel"
+					class="btn col-span-1 bg-error text-white border-none font-normal normal-case tooltip tooltip-left tooltip-error flex"
+					data-tip="Delete channel">
+					<IconChatDelete />
+				</label>
 			</div>
 		{/if}
 	</ul>
diff --git a/src/lib/components/Channel/Stream/StreamContainer.svelte b/src/lib/components/Channel/Stream/StreamContainer.svelte
new file mode 100644
index 00000000..f50186f4
--- /dev/null
+++ b/src/lib/components/Channel/Stream/StreamContainer.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import IconViewers from '$lib/assets/icons/IconViewers.svelte'
+	import StreamControls from '$lib/components/Channel/Stream/StreamControls.svelte'
+	import DropdownViewers from '$lib/components/Channel/Stream/DropdownViewers.svelte'
+	import VideoGrid from '$lib/components/Channel/Stream/VideoGrid.svelte'
+	export let count: number = 10
+</script>
+
+<div class="flex justify-center h-full">
+	<div class="carousel carousel-vertical rounded-lg bg-base-100 w-full m-5 mb-24">
+		<!-- {#each} -->
+		<div class="carousel-item h-full p-3">
+			<div>
+				<div class="flex gap-2 mb-3">
+					<span
+						class="btn-sm bg-red-700 rounded-md font-medium text-white border-none flex items-center">
+						LIVE
+					</span>
+					<div class="dropdown dropdown-bottom">
+						<label
+							class="btn btn-sm rounded-md font-medium gap-2 text-white border-none"
+							tabindex="0">
+							<IconViewers />
+							{count}
+						</label>
+						<DropdownViewers />
+					</div>
+				</div>
+				<VideoGrid />
+			</div>
+		</div>
+		<!-- {/each} -->
+	</div>
+
+	<div class="absolute bottom-0 m-5">
+		<StreamControls />
+	</div>
+</div>
diff --git a/src/lib/components/Channel/Stream/VideoGrid.svelte b/src/lib/components/Channel/Stream/VideoGrid.svelte
index 616c2fbc..6dc84bee 100644
--- a/src/lib/components/Channel/Stream/VideoGrid.svelte
+++ b/src/lib/components/Channel/Stream/VideoGrid.svelte
@@ -1,38 +1,10 @@
 <script lang="ts">
-	import IconViewers from '$lib/assets/icons/IconViewers.svelte'
-	import StreamControls from '$lib/components/Channel/Stream/StreamControls.svelte'
-	import DropdownViewers from '$lib/components/Channel/Stream/DropdownViewers.svelte'
-	export let count: number = 10
+	import VideoItem from '$lib/components/Channel/Stream/VideoItem.svelte'
 </script>
 
-<div class="flex justify-center h-full">
-	<div class="carousel carousel-vertical rounded-lg bg-base-100 w-full m-5 mb-24">
-		<div class="flex gap-2 p-3">
-			<span
-				class="btn-sm bg-red-700 rounded-md font-medium text-white border-none flex items-center">
-				LIVE
-			</span>
-			<div class="dropdown dropdown-bottom">
-				<label class="btn btn-sm rounded-md font-medium gap-2 text-white border-none" tabindex="0">
-					<IconViewers />
-					{count}
-				</label>
-				<DropdownViewers />
-			</div>
-		</div>
-		<!-- {#each} -->
-		<!-- <div class="carousel-item h-full">
-			<img src="/images/stock/photo-1559703248-dcaaec9fab78.jpg" />
-		</div>
-		<div class="carousel-item h-full">
-			<img src="/images/stock/photo-1565098772267-60af42b81ef2.jpg" />
-		</div> -->
-		<!-- {/each} -->
-	</div>
-
-	<!-- <video></video> -->
-
-	<div class="absolute bottom-0 m-5">
-		<StreamControls />
-	</div>
+<!-- create a grid layout of video items centered and responsive with maximum 4 in a gridd and scrolling more horizontally -->
+<div class="grid grid-cols-2 gap-4">
+	{#each Array(3) as _, i}
+		<VideoItem />
+	{/each}
 </div>
diff --git a/src/lib/components/Channel/Stream/VideoItem.svelte b/src/lib/components/Channel/Stream/VideoItem.svelte
index e69de29b..8ec433c6 100644
--- a/src/lib/components/Channel/Stream/VideoItem.svelte
+++ b/src/lib/components/Channel/Stream/VideoItem.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+</script>
+
+<div class="card w-full bg-base-100 shadow-xl border border-red-300">
+	<div class="card-body">
+		<h2 class="card-title">Shoes!</h2>
+		<p>If a dog chews shoes whose shoes does he choose?</p>
+		<div class="card-actions justify-end">
+			<button class="btn btn-primary">Buy Now</button>
+		</div>
+	</div>
+</div>
diff --git a/src/lib/components/Profile/DrawerEditProfile.svelte b/src/lib/components/Profile/DrawerEditProfile.svelte
index 50541ab1..3f862f00 100644
--- a/src/lib/components/Profile/DrawerEditProfile.svelte
+++ b/src/lib/components/Profile/DrawerEditProfile.svelte
@@ -31,6 +31,7 @@
 	<div class="drawer-side">
 		<label
 			for="edit-profile-drawer"
+			on:keyup
 			on:click={() =>
 				setTimeout(() => {
 					showDrawer = false
@@ -40,6 +41,7 @@
 			<DrawerAddCategory bind:showAddCategory bind:categories={profile.category} />
 		{:else}
 			<form
+				class="flex m-5"
 				action="?/update-profile"
 				method="post"
 				use:enhance={({ data }) => {
@@ -47,7 +49,7 @@
 						data.append('category', JSON.stringify(profile?.category))
 					}
 				}}>
-				<div class="bg-base-200 w-80 md:w-[30rem] h-full flex flex-col">
+				<div class="bg-base-200 w-80 md:w-[30rem] h-full flex flex-col rounded-lg">
 					<p class="p-3 text-xl mb-5 pb-2 border-purple-500 font-semibold border-b-2">
 						Update Profile
 					</p>
diff --git a/src/lib/websocket.ts b/src/lib/websocket.ts
index 7e3833ff..2e6f7239 100644
--- a/src/lib/websocket.ts
+++ b/src/lib/websocket.ts
@@ -74,8 +74,8 @@ function emitRemovedUser({ channelId, userId }: { channelId: string; userId: str
 	channelSocket.send(JSON.stringify({ eventName: `user-removed`, channelId, userId }))
 }
 
-function emitChannelUpdate({ channelId }: { channelId: string }) {
-	channelSocket.send(JSON.stringify({ eventName: `channel-update`, channelId }))
+function emitChannelUpdate({ channel }: { channel: any }) {
+	channelSocket.send(JSON.stringify({ eventName: `channel-update`, channel }))
 }
 
 function emitChannelSubscribeByUser({ channelId, userId }: { channelId: string; userId: string }) {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5398e129..385b9520 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -44,7 +44,7 @@
 			console.log('socket connection open')
 			console.log(data)
 			platform_connection.set('open')
-			emitUserConnection({ userId: $page.data.user?.userId, isOnline: true })
+			if($page.data.user?.userId) emitUserConnection({ userId: $page.data.user?.userId, isOnline: true })
 		})
 		platformSocket.addEventListener('message', (data) => {
 			console.log('listening to messages')
diff --git a/src/routes/browse/+page.server.ts b/src/routes/browse/+page.server.ts
index f8944d73..4916c25f 100644
--- a/src/routes/browse/+page.server.ts
+++ b/src/routes/browse/+page.server.ts
@@ -10,10 +10,7 @@ export const load = (async ({ locals }) => {
 			highestRankedUsers: get(`users/highest-ranked?skip=${0}&limit=${10}`),
 			risingStarUsers: get(`users/rising-stars?skip=${0}&limit=${10}`),
 			myChannels: locals.user
-				? get(`channels/me/hosted?skip=${0}&limit=${10}`, {
-						userId: locals.user.userId,
-						token: locals.user.token
-				  })
+				? get(`channels/user?userId=${locals.user.userId}&skip=${0}&limit=${10}`)
 				: [],
 			favChannels: locals.user
 				? get(`channels/me/fav?skip=${0}&limit=${10}`, {
diff --git a/src/routes/channel/[channelId]/+page.server.ts b/src/routes/channel/[channelId]/+page.server.ts
index 02236668..b763e0ec 100644
--- a/src/routes/channel/[channelId]/+page.server.ts
+++ b/src/routes/channel/[channelId]/+page.server.ts
@@ -1,5 +1,5 @@
-import type { PageServerLoad } from './$types'
-import { get } from '$lib/api'
+import type { Actions, PageServerLoad } from './$types'
+import { get, patch } from '$lib/api'
 
 export const load = (async ({ params }) => {
 	return {
@@ -9,3 +9,28 @@ export const load = (async ({ params }) => {
 		channelId: params.channelId
 	}
 }) satisfies PageServerLoad
+
+export const actions = {
+	'edit-channel': async ({
+		request,
+		locals,
+		params
+	}: {
+		request: any
+		locals: any
+		params: any
+	}) => {
+		const { userId, token } = locals.user
+		const data = await request.formData()
+		const title = data.get('title')
+		const description = data.get('description')
+		const tags = JSON.parse(data.get('tags-selected'))
+		const category = JSON.parse(data.get('category-selected'))
+		const updatedChannel = { title, description, tags, category }
+		await patch(`channels?channelId=${params.channelId}`, updatedChannel, {
+			userId,
+			token
+		})
+		return { success: true }
+	}
+} satisfies Actions
diff --git a/src/routes/channel/[channelId]/+page.svelte b/src/routes/channel/[channelId]/+page.svelte
index a292b271..fba5d25b 100644
--- a/src/routes/channel/[channelId]/+page.svelte
+++ b/src/routes/channel/[channelId]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import DrawerChat from '$lib/components/Channel/Chat/DrawerChat.svelte'
-	import VideoGrid from '$lib/components/Channel/Stream/VideoGrid.svelte'
+	import StreamContainer from '$lib/components/Channel/Stream/StreamContainer.svelte'
 	import type { PageData } from './$types'
 	import { onDestroy, onMount } from 'svelte'
 	import { get, del } from '$lib/api'
@@ -17,12 +17,14 @@
 	import Modal from '$lib/components/Global/Modal.svelte'
 	import { goto } from '$app/navigation'
 	import { page } from '$app/stores'
+	import DrawerEditChannel from '$lib/components/Channel/Chat/DrawerEditChannel.svelte'
 
 	export let data: PageData
 
 	$: ({ channelId } = data)
 
-	let isDeleteModalOpen = false
+	let isDeleteModalOpen = false,
+		showEditChannelDrawer = false
 
 	onMount(async () => {
 		const channelSocketId = await get(`wsinit/channelid?channelId=${channelId}`)
@@ -71,9 +73,7 @@
 	}
 </script>
 
-{#await data.lazy.channel}
-	Loading...
-{:then value}
+{#await data.lazy.channel then value}
 	<div class="flex flex-auto">
 		<div class="drawer drawer-end">
 			<input
@@ -82,11 +82,18 @@
 				class="drawer-toggle"
 				bind:checked={$is_chat_drawer_open} />
 			<div class="drawer-content">
-				<VideoGrid />
+				<StreamContainer />
+
+				{#if showEditChannelDrawer}
+					<DrawerEditChannel channel={value} bind:showDrawer={showEditChannelDrawer} />
+				{/if}
 			</div>
-			<div class="drawer-side m-5 rounded-lg md:w-fit lg:drop-shadow-lg">
+			<div
+				class="drawer-side m-5 rounded-lg md:w-fit lg:drop-shadow-lg"
+				class:!hidden={showEditChannelDrawer}>
 				<label for="chat-drawer" class="drawer-overlay" />
-				<DrawerChat channel={value} />
+
+				<DrawerChat channel={value} bind:showEditChannelDrawer />
 			</div>
 		</div>
 	</div>
@@ -96,7 +103,6 @@
 		id="modal-delete-channel"
 		class="modal-toggle"
 		bind:checked={isDeleteModalOpen} />
-
 	<Modal
 		id="modal-delete-channel"
 		title="Delete channel"