diff --git a/.gitignore b/.gitignore
index 39782888..24ef4c64 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,4 +11,9 @@ vite.config.ts.timestamp-*
 coverage/
 e2eresults.json
 package-lock.json
-src/lib/assets/styles/tailwind-output.css
\ No newline at end of file
+src/lib/assets/styles/tailwind-output.css
+src/lib/stores/adminStore.ts
+src/lib/stores/chatStore.ts
+src/lib/stores/sfxStore.ts
+src/lib/stores/funFactStore.ts
+/static/sfx/
\ No newline at end of file
diff --git a/package.json b/package.json
index 6c6e90bd..2612817e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",
@@ -50,6 +50,7 @@
 		"vite": "^4.1.4"
 	},
 	"dependencies": {
+		"@neodrag/svelte": "^2.0.3",
 		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/typography": "^0.5.9",
 		"animate.css": "^4.1.1",
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index b38a0ab2..549f4ea0 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -14,7 +14,6 @@ import { user_role } from '$lib/stores/authStore'
 
 export const handle: Handle = async ({ event, resolve }) => {
 	const pathname = event.url.pathname
-
 	const userId = event.url.searchParams.get('userId') || event.cookies.get('userId') || ''
 	let token = event.url.searchParams.get('token') || event.cookies.get('token') || ''
 	// const lastTimeTillLoadConfig = event.cookies.get('loadConfigTime') || '0'
diff --git a/src/lib/WHEPClient.ts b/src/lib/WHEPClient.ts
index 722e124d..16f10729 100644
--- a/src/lib/WHEPClient.ts
+++ b/src/lib/WHEPClient.ts
@@ -9,7 +9,7 @@ export default class WHEPClient {
 	private peerConnection: RTCPeerConnection
 	private stream: MediaStream
 
-	constructor(private endpoint: string, private videoElement: HTMLVideoElement) {
+	constructor(private endpoint: string, private videoElement: any, private trackType: string) {
 		this.stream = new MediaStream()
 
 		/**
@@ -26,14 +26,20 @@ export default class WHEPClient {
 			bundlePolicy: 'max-bundle'
 		})
 
+		const trackOrKind = trackType === 'screen' || trackType === 'webcam' ? 'video' : 'audio'
+
 		/** https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addTransceiver */
-		this.peerConnection.addTransceiver('video', {
-			direction: 'recvonly'
-		})
-		this.peerConnection.addTransceiver('audio', {
+		this.peerConnection.addTransceiver(trackOrKind, {
 			direction: 'recvonly'
 		})
 
+		//NOTE: used for system audio
+		if (this.trackType === 'screen') {
+			this.peerConnection.addTransceiver('audio', {
+				direction: 'recvonly'
+			})
+		}
+
 		/**
 		 * When new tracks are received in the connection, store local references,
 		 * so that they can be added to a MediaStream, and to the <video> element.
@@ -67,9 +73,7 @@ export default class WHEPClient {
 			if (this.peerConnection.connectionState !== 'connected') {
 				return
 			}
-			if (!this.videoElement.srcObject) {
-				this.videoElement.srcObject = this.stream
-			}
+			this.videoElement.srcObject = this.stream
 		})
 
 		this.peerConnection.addEventListener('negotiationneeded', (ev) => {
diff --git a/src/lib/WHIPClient.ts b/src/lib/WHIPClient.ts
index ed357bb0..877aa2fb 100644
--- a/src/lib/WHIPClient.ts
+++ b/src/lib/WHIPClient.ts
@@ -5,11 +5,12 @@ import negotiateConnectionWithClientOffer from '$lib/negotiateConnectionWithClie
  *
  * https://www.ietf.org/archive/id/draft-ietf-wish-whip-01.html
  */
-export default class WHIPClient {
+export default class WHIPClient extends EventTarget {
 	private peerConnection: RTCPeerConnection
-	private localStream?: MediaStream
+	public localStream?: MediaStream
 
-	constructor(private endpoint: string, private videoElement: HTMLVideoElement, trackType: string) {
+	constructor(private endpoint: string, private videoElement: any, private trackType: string) {
+		super()
 		/**
 		 * Create a new WebRTC connection, using public STUN servers with ICE,
 		 * allowing the client to disover its own IP address.
@@ -41,11 +42,13 @@ export default class WHIPClient {
 		 * connect the video stream to the provided <video> element.
 		 */
 		this.accessLocalMediaSources(trackType)
-			.then((stream) => {
+			.then((stream: any) => {
 				this.localStream = stream
-				videoElement.srcObject = stream as MediaProvider
+				videoElement.srcObject = stream
+			})
+			.catch((err: any) => {
+				this.disconnectStream()
 			})
-			.catch(console.error)
 	}
 
 	/**
@@ -57,6 +60,21 @@ export default class WHIPClient {
 	private async accessLocalMediaSources(trackType: string) {
 		if (trackType === 'screen') {
 			return navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }).then((stream) => {
+				if (!stream.getAudioTracks().length) {
+					const audioContext = new AudioContext()
+					const oscillator = audioContext.createOscillator()
+					const destination = audioContext.createMediaStreamDestination()
+					oscillator.connect(destination)
+					oscillator.frequency.setValueAtTime(0, audioContext.currentTime)
+					oscillator.start()
+					const audioTrack = destination.stream.getAudioTracks()[0]
+					audioTrack.enabled = true
+					// audioTrack.id = 'silent-audio-track'
+					// audioTrack.label = 'Silent Audio Track'
+					const audioTransceiver = this.peerConnection.addTransceiver(audioTrack, {
+						direction: 'sendonly'
+					})
+				}
 				stream.getTracks().forEach((track) => {
 					const transceiver = this.peerConnection.addTransceiver(track, {
 						/** WHIP is only for sending streaming media */
@@ -64,15 +82,18 @@ export default class WHIPClient {
 					})
 					if (track.kind == 'video' && transceiver.sender.track) {
 						transceiver.sender.track.applyConstraints({
-							width: 1280,
-							height: 720
+							width: 1920,
+							height: 1080
 						})
 					}
 				})
+				stream.getVideoTracks()[0].addEventListener('ended', () => {
+					this.disconnectStream()
+				})
 				return stream
 			})
 		} else if (trackType === 'webcam') {
-			return navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((stream) => {
+			return navigator.mediaDevices.getUserMedia({ video: true, audio: false }).then((stream) => {
 				stream.getTracks().forEach((track) => {
 					const transceiver = this.peerConnection.addTransceiver(track, {
 						/** WHIP is only for sending streaming media */
@@ -85,6 +106,9 @@ export default class WHIPClient {
 						})
 					}
 				})
+				stream.getVideoTracks()[0].addEventListener('ended', () => {
+					this.disconnectStream()
+				})
 				return stream
 			})
 		} else if (trackType === 'audio') {
@@ -103,12 +127,9 @@ export default class WHIPClient {
 							/** WHIP is only for sending streaming media */
 							direction: 'sendonly'
 						})
-						if (track.kind == 'video' && transceiver.sender.track) {
-							transceiver.sender.track.applyConstraints({
-								width: 1280,
-								height: 720
-							})
-						}
+					})
+					stream.getAudioTracks()[0].addEventListener('ended', () => {
+						this.disconnectStream()
 					})
 					return stream
 				})
@@ -124,11 +145,14 @@ export default class WHIPClient {
 	 * Note that once you call this method, this instance of this WHIPClient cannot be reused.
 	 */
 	public async disconnectStream() {
-		const response = await fetch(this.endpoint, {
-			method: 'DELETE',
-			mode: 'cors'
-		})
+		// const response = await fetch(this.endpoint, {
+		// 	method: 'DELETE',
+		// 	mode: 'cors'
+		// })
 		this.peerConnection.close()
 		this.localStream?.getTracks().forEach((track) => track.stop())
+		this.videoElement.srcObject = null
+		this.dispatchEvent(new CustomEvent(`localStreamStopped-${this.trackType}`))
+		console.log('Disconnected')
 	}
 }
diff --git a/src/lib/assets/icons/IconCross.svelte b/src/lib/assets/icons/IconCross.svelte
deleted file mode 100644
index 57c9f686..00000000
--- a/src/lib/assets/icons/IconCross.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	class="h-6 w-6"
-	fill="none"
-	viewBox="0 0 24 24"
-	stroke="currentColor"
-	><path
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="2"
-		d="M6 18L18 6M6 6l12 12" /></svg>
diff --git a/src/lib/assets/icons/IconMageLogo.svelte b/src/lib/assets/icons/IconMageLogo.svelte
new file mode 100644
index 00000000..93419ca7
--- /dev/null
+++ b/src/lib/assets/icons/IconMageLogo.svelte
@@ -0,0 +1,49 @@
+<script>
+	import { current_theme } from '$lib/stores/helperStore'
+	import { onMount } from 'svelte'
+
+	export let customClass = 'w-20'
+
+	let color = '#fff'
+	onMount(() => {
+		current_theme.subscribe((theme) => {
+			switch (theme) {
+				case 'dark':
+				case 'synthwave':
+					color = '#fff'
+					break
+				case 'light':
+				case 'cyberpunk':
+					color = '#3b0f7f'
+					break
+			}
+		})
+	})
+</script>
+
+<div class={customClass}>
+	<svg
+		data-name="Layer 1"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 514.34 814.7"
+		style="fill: {color};">
+		<path
+			class="prefix__cls-1"
+			d="M243.75 612.04c4.28 5.69 14.78 55.16 14.78 55.16s10.54-49.47 14.8-55.16 41.55-19.69 41.55-19.69-37.28-13.93-41.55-19.59-14.8-55.18-14.8-55.18-10.52 49.5-14.78 55.18-41.58 19.59-41.58 19.59 37.29 14 41.58 19.69z" />
+		<path
+			class="prefix__cls-2"
+			d="M179.38 199.74c2.44 3.24 8.42 31.39 8.42 31.39s6-28.15 8.42-31.39 23.65-11.19 23.65-11.19-21.22-7.93-23.65-11.15-8.42-31.41-8.42-31.41-6 28.17-8.42 31.41-23.64 11.15-23.64 11.15 21.21 7.95 23.64 11.19z" />
+		<path
+			class="prefix__cls-3"
+			d="M459.46 375.96c2.44 3.24 8.42 31.39 8.42 31.39s6-28.15 8.43-31.39 23.65-11.19 23.65-11.19-21.22-7.93-23.65-11.15-8.43-31.41-8.43-31.41-6 28.17-8.42 31.41-23.64 11.15-23.64 11.15 21.21 7.95 23.64 11.19z" />
+		<path
+			class="prefix__cls-4"
+			d="M240.32 67.27c2.44 3.23 8.42 31.39 8.42 31.39s6-28.16 8.42-31.39 23.65-11.2 23.65-11.2-21.22-7.93-23.65-11.15-8.42-31.4-8.42-31.4-6 28.17-8.42 31.4-23.65 11.15-23.65 11.15 21.21 7.96 23.65 11.2z" />
+		<path
+			class="prefix__cls-5"
+			d="M132.51 597.21l79.18-107.68-40.46-116.56 99.26-191.14L65.11 386.44l41.01 107.23L0 597.21 247.9 814.7 132.51 597.21z" />
+		<path
+			class="prefix__cls-6"
+			d="M378.52 341.17l51.65-117.07L299.25 0l57.78 180.74-68.47 151.25 100.03 223.79L247.9 814.7l266.44-248.57-135.82-224.96z" />
+	</svg>
+</div>
diff --git a/src/lib/assets/icons/IconMageText.svelte b/src/lib/assets/icons/IconMageText.svelte
new file mode 100644
index 00000000..7fd02f4a
--- /dev/null
+++ b/src/lib/assets/icons/IconMageText.svelte
@@ -0,0 +1,35 @@
+<script>
+	import { current_theme } from '$lib/stores/helperStore'
+	import { onMount } from 'svelte'
+
+	export let customClass = 'w-20'
+
+	let color = '#fff'
+	onMount(() => {
+		current_theme.subscribe((theme) => {
+			switch (theme) {
+				case 'dark':
+				case 'synthwave':
+					color = '#fff'
+					break
+				case 'light':
+				case 'cyberpunk':
+					color = '#3b0f7f'
+					break
+			}
+		})
+	})
+</script>
+
+<div class={customClass}>
+	<svg
+		id="Layer_1"
+		data-name="Layer 1"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 204.31 58.75"
+		style="fill: {color}">
+		<path
+			class="cls-1"
+			d="M198.31,12.23H180.88v9.84h17.67V30H180.88V41.75h23l-6,9.6h-26.4l.09-1.13-.24.17V9.5l9.27-6.79V2.63h.11l.22-.16v.16h23.43ZM163.68,29.16c-.06.36-.13.79-.23,1.3a24.28,24.28,0,0,1-3,8,25,25,0,0,1-5.41,6.45,25.46,25.46,0,0,1-7.34,4.3,23.88,23.88,0,0,1-8.63,1.57,23.57,23.57,0,0,1-9.56-2,25.27,25.27,0,0,1-7.86-5.3,24.94,24.94,0,0,1-5.33-7.87,24.24,24.24,0,0,1,0-19.19,24.94,24.94,0,0,1,5.33-7.87,25.44,25.44,0,0,1,7.86-5.3,24.23,24.23,0,0,1,16.7-.88,27.11,27.11,0,0,1,6.29,2.91l.85.54a5.24,5.24,0,0,1,.81.65c4.13,2.85,6.31,8.23,6.31,8.23h-9.43a4.33,4.33,0,0,1-.72,0h-.53v-.08a4.56,4.56,0,0,1-1.59-.66L146.4,12.8a17.13,17.13,0,0,0-3.46-1.34,15,15,0,0,0-9.71.69,15.81,15.81,0,0,0-4.8,3.22,15.08,15.08,0,0,0,0,21.43,15.81,15.81,0,0,0,4.8,3.22,14.44,14.44,0,0,0,5.88,1.19,14.88,14.88,0,0,0,4.68-.73,15.06,15.06,0,0,0,4.07-2,14.84,14.84,0,0,0,3.22-3.11,16,16,0,0,0,2.23-4h-6.6l-7.84-9.58h19.74a5.34,5.34,0,0,1,3.72,1.8,5.58,5.58,0,0,1,1.5,3.88V28a.32.32,0,0,1-.08.23A6.79,6.79,0,0,1,163.68,29.16ZM98.33,46.05V36.84H83.21v-.08a3.18,3.18,0,0,1-.85.08l-.83,0V37L64.2,49.16l-2.05,1.52-.07,0L58.75,53V47.45a4.93,4.93,0,0,1-.19-1.4v-20a23.48,23.48,0,0,1,1.54-8.53,25.41,25.41,0,0,1,5.52-8.75,26.37,26.37,0,0,1,7.95-5.45,24.43,24.43,0,0,1,19.27,0A24.79,24.79,0,0,1,106,16.49a23.86,23.86,0,0,1,2,9.6v19.4l-9.54,6.95S98.33,47.38,98.33,46.05Zm0-20a14.69,14.69,0,0,0-1.92-7.38.18.18,0,0,0,0-.11.15.15,0,0,1,0-.12c-.21-.3-.41-.61-.62-.92s-.41-.58-.61-.84A14.83,14.83,0,0,0,83.21,11a14.3,14.3,0,0,0-6.8,1.65A15.84,15.84,0,0,0,71.23,17,15.49,15.49,0,0,0,69,21.17a15,15,0,0,0-.8,4.92V36l14.2-8.74h16ZM51.72,12.93l-.81,4.62,0,.16h0L47,39.92l4.21,18.83L38.23,41.6l3.26-15.8-5.41,5.42a13.08,13.08,0,0,1-4.18,2.84,12.32,12.32,0,0,1-4.94,1,12.61,12.61,0,0,1-5-1,12,12,0,0,1-4.14-2.84L12.14,25.5l3.32,16.1L2.53,58.75,6.75,39.92,2.81,17.71h0l0-.16L2,12.93h.08L0,0,9.5,9.69v0l.61.53L23.78,23.93a4.6,4.6,0,0,0,3.15,1.23A4.52,4.52,0,0,0,30,23.93L44.13,9.72h0L53.69,0l-2,12.93Z" />
+	</svg>
+</div>
diff --git a/src/lib/assets/icons/channel/IconShareScreen.svelte b/src/lib/assets/icons/channel/IconShareScreen.svelte
index 1cf28773..718a62b9 100644
--- a/src/lib/assets/icons/channel/IconShareScreen.svelte
+++ b/src/lib/assets/icons/channel/IconShareScreen.svelte
@@ -1,4 +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 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
-  </svg>
-  
\ No newline at end of file
+<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 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
+</svg>
diff --git a/src/lib/assets/icons/chat/IconChatAI.svelte b/src/lib/assets/icons/chat/IconChatAI.svelte
new file mode 100644
index 00000000..963a5646
--- /dev/null
+++ b/src/lib/assets/icons/chat/IconChatAI.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.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
+</svg>
diff --git a/src/lib/assets/icons/chat/IconChatStar.svelte b/src/lib/assets/icons/chat/IconChatStar.svelte
new file mode 100644
index 00000000..318062be
--- /dev/null
+++ b/src/lib/assets/icons/chat/IconChatStar.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="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
+</svg>
diff --git a/src/lib/authentication/routes.ts b/src/lib/authentication/routes.ts
index 3f0a121a..cdebbf46 100644
--- a/src/lib/authentication/routes.ts
+++ b/src/lib/authentication/routes.ts
@@ -2,39 +2,35 @@ const USER_COTEXT = 'user'
 const ADMIN_COTEXT = 'admin'
 
 const routes: any = {
-    admin: [
-        { path: '/admins', access: [ADMIN_COTEXT] },
-        { path: '/channels', access: [ADMIN_COTEXT] },
-        { path: '/fun-facts', access: [ADMIN_COTEXT] },
-        { path: '/legal', access: [ADMIN_COTEXT] },
-        { path: '/settings', access: [ADMIN_COTEXT] },
-        { path: '/users', access: [ADMIN_COTEXT] }
-    ],
-    browse: [
-        { path: '/', access: [USER_COTEXT, ADMIN_COTEXT] },
-        { path: '/(.*)/$', access: [USER_COTEXT, ADMIN_COTEXT] }
-    ],
-    channel: [
-        { path: '/', access: [USER_COTEXT, ADMIN_COTEXT] },
-        { path: '/(.*)/$', access: [USER_COTEXT, ADMIN_COTEXT] }
-    ],
-    profile: [
-        { path: '/', access: [USER_COTEXT, ADMIN_COTEXT] },
-        { path: '/(.*)/$', access: [USER_COTEXT, ADMIN_COTEXT] }
-    ],
-    search: [
-        { path: '/', access: [USER_COTEXT, ADMIN_COTEXT] },
-        { path: '/(.*)/', access: [USER_COTEXT, ADMIN_COTEXT] }
-    ],
-    maintenance: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }],
-    settings: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }],
-    premium: [{ path: '/', access: [ADMIN_COTEXT] }],
-    careers: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }],
-    contact: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }],
-    videos: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }],
-    legal: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }],
-    logout: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }],
-    'creator-space': [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }]
+	admin: [
+		{ path: '/admins', access: [ADMIN_COTEXT] },
+		{ path: '/channels', access: [ADMIN_COTEXT] },
+		{ path: '/legal', access: [ADMIN_COTEXT] },
+		{ path: '/settings', access: [ADMIN_COTEXT] },
+		{ path: '/users', access: [ADMIN_COTEXT] }
+	],
+	browse: [
+		{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] },
+		{ path: '/(.*)/$', access: [USER_COTEXT, ADMIN_COTEXT] }
+	],
+	channel: [
+		{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] },
+		{ path: '/(.*)/$', access: [USER_COTEXT, ADMIN_COTEXT] }
+	],
+	profile: [
+		{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] },
+		{ path: '/(.*)/$', access: [USER_COTEXT, ADMIN_COTEXT] }
+	],
+	search: [
+		{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] },
+		{ path: '/(.*)/', access: [USER_COTEXT, ADMIN_COTEXT] }
+	],
+	maintenance: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }],
+	settings: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }],
+	careers: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }],
+	contact: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }],
+	legal: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }],
+	logout: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }]
 }
 
 export default routes
diff --git a/src/lib/components/Browse/DrawerAddCategory.svelte b/src/lib/components/Browse/DrawerAddCategory.svelte
index be01e2fa..95e36f80 100644
--- a/src/lib/components/Browse/DrawerAddCategory.svelte
+++ b/src/lib/components/Browse/DrawerAddCategory.svelte
@@ -142,14 +142,13 @@
 					</label>
 				{/each}
 			{:else if searchQuery != ''}
-				<div class="alert shadow-lg flex justify-center">
+				<div class="alert flex justify-center">
 					<IconInfo />
-
 					<p>No results for the search query</p>
 				</div>
 			{:else}
 				<div class="flex justify-center w-full">
-					<span class="btn btn-circle btn-outline btn-sm loading" />
+					<progress class="progress w-full" />
 				</div>
 			{/if}
 		</div>
diff --git a/src/lib/components/Browse/DrawerCreateChannel.svelte b/src/lib/components/Browse/DrawerCreateChannel.svelte
index 13acc41b..09162087 100644
--- a/src/lib/components/Browse/DrawerCreateChannel.svelte
+++ b/src/lib/components/Browse/DrawerCreateChannel.svelte
@@ -28,7 +28,8 @@
 		showThumbnail = false,
 		showAddCategory = false,
 		maxTag = 3,
-		maxCategory = 4
+		maxCategory = 4,
+		isLoadingChannel = false
 
 	$: maxTagLabel = newChannel.tags.length == maxTag ? 'max reached' : 'max ' + maxTag
 	$: maxCategoryLabel =
@@ -93,6 +94,7 @@
 				action="?/create-channel"
 				method="post"
 				use:enhance={({ data }) => {
+					isLoadingChannel = true
 					data.append('newChannel', JSON.stringify(newChannel))
 				}}>
 				<div class="bg-base-200 w-80 md:w-[30rem] h-full flex flex-col rounded-lg">
@@ -148,7 +150,7 @@
 								{/each}
 							{:else}
 								<div class="flex justify-center w-full">
-									<span class="btn btn-circle btn-outline btn-sm loading" />
+									<progress class="progress w-full" />
 								</div>
 							{/if}
 						</div>
@@ -188,7 +190,10 @@
 					<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">Add</button>
+						<button
+							type="submit"
+							disabled={isLoadingChannel}
+							class="btn btn-primary grow {isLoadingChannel ? 'loading' : ''}">Add</button>
 					</div>
 				</div>
 			</form>
diff --git a/src/lib/components/Browse/SearchBar.svelte b/src/lib/components/Browse/SearchBar.svelte
index 9e96ce05..81e08b3a 100644
--- a/src/lib/components/Browse/SearchBar.svelte
+++ b/src/lib/components/Browse/SearchBar.svelte
@@ -1,24 +1,22 @@
 <script lang="ts">
 	import IconCreate from '$lib/assets/icons/IconCreate.svelte'
-	import IconCross from '$lib/assets/icons/IconCross.svelte'
 	import IconSearch from '$lib/assets/icons/IconSearch.svelte'
 	import DrawerCreateChannel from './DrawerCreateChannel.svelte'
 	import { is_login_modal_open } from '$lib/stores/helperStore'
 	import { page } from '$app/stores'
 
-	export let searchPage = false
-	export let searchQuery: string | null = ''
+	export let query: string | null = ''
 
 	let showDrawer = false
 </script>
 
-<div class="flex flex-col md:flex-row gap-4 py-5 pl-5 {searchPage ? 'px-4 md:px-24' : ''}">
-	<form class={searchPage ? 'flex-1' : ''} method="GET" action={`/search`}>
+<div class="flex flex-col md:flex-row gap-4 p-5">
+	<form method="GET" action={`/search`}>
 		<div class="form-control">
 			<div class="input-group relative">
 				<input
-					name="searchQuery"
-					bind:value={searchQuery}
+					name="query"
+					bind:value={query}
 					type="search"
 					placeholder="Search channels"
 					class="input input-bordered input-primary w-96" />
@@ -28,26 +26,22 @@
 			</div>
 		</div>
 	</form>
+	<div class="form-control">
+		<label
+			for="create-channel-drawer"
+			class="btn w-[21rem] btn-primary gap-2 drawer-button"
+			on:click={() => {
+				if ($page.data.user) {
+					showDrawer = true
+				} else {
+					$is_login_modal_open = true
+				}
+			}}>
+			<IconCreate />
+			Create a channel</label>
+	</div>
 
-	{#if !searchPage}
-		<div class="form-control">
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<label
-				for="create-channel-drawer"
-				class="btn w-[21rem] btn-primary gap-2 drawer-button"
-				on:click={() => {
-					if ($page.data.user) {
-						showDrawer = true
-					} else {
-						$is_login_modal_open = true
-					}
-				}}>
-				<IconCreate />
-				Create a channel</label>
-		</div>
-	{/if}
-
-	{#if showDrawer && !searchPage}
+	{#if showDrawer}
 		<DrawerCreateChannel bind:showDrawer />
 	{/if}
 </div>
diff --git a/src/lib/components/Browse/Sections/ItemCarousel.svelte b/src/lib/components/Browse/Sections/ItemCarousel.svelte
new file mode 100644
index 00000000..4869a2f3
--- /dev/null
+++ b/src/lib/components/Browse/Sections/ItemCarousel.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import IconViewers from '$lib/assets/icons/IconViewers.svelte'
+	// import IconBrowseItemPlay from '$lib/assets/icons/browse/IconBrowseItemPlay.svelte'
+	import { category_list } from '$lib/stores/channelStore'
+
+	export let channel: any = {}
+
+	let bg_cover = channel.thumbnail || '/placeholder/programming-placeholder.jpg'
+</script>
+
+<a
+	class="swiper-slide rounded-md"
+	href="/channel/{channel._id}"
+	style="background-image: url({bg_cover});">
+	<div class="flex flex-col justify-between p-3 w-full h-full">
+		<div class="flex flex-row justify-between">
+			<div class="flex gap-2 mb-3">
+				<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>
+				<div class="dropdown dropdown-bottom">
+					<label
+						for=""
+						class="btn btn-sm rounded-md font-medium gap-2 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="flex justify-center w-full">
+			<IconBrowseItemPlay />
+		</div> -->
+		<div class="space-y-2">
+			<p class="text-2xl truncate text-white font-semibold">{channel.title || ''}</p>
+			<div class="flex flex-row items-center gap-2">
+				<div class="avatar">
+					<div class="w-14 mask mask-squircle">
+						<img src={channel.avatar} alt="" />
+					</div>
+				</div>
+				<div class="w-4/5">
+					<p class="truncate text-white">
+						@{channel.createdByUsername}
+					</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</a>
diff --git a/src/lib/components/Browse/Sections/ItemChannel.svelte b/src/lib/components/Browse/Sections/ItemChannel.svelte
new file mode 100644
index 00000000..50422aa5
--- /dev/null
+++ b/src/lib/components/Browse/Sections/ItemChannel.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import IconViewers from '$lib/assets/icons/IconViewers.svelte'
+	import { category_list } from '$lib/stores/channelStore'
+
+	export let channel: any = {}
+</script>
+
+<ul class="menu shrink-0 bg-base-100 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 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'} />
+				</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 mask-squircle">
+						<img src={channel.avatar} alt="" />
+					</div>
+				</div>
+				<div class="flex items-center">
+					<p>@{channel.createdByUsername}</p>
+				</div>
+			</div>
+		</a>
+	</li>
+</ul>
+
+<style>
+	.video-thumbnail {
+		@apply w-full h-64 flex items-center justify-center mb-2;
+	}
+</style>
diff --git a/src/lib/components/Browse/Sections/SectionTableRow.svelte b/src/lib/components/Browse/Sections/ItemTable.svelte
similarity index 96%
rename from src/lib/components/Browse/Sections/SectionTableRow.svelte
rename to src/lib/components/Browse/Sections/ItemTable.svelte
index dce0a0e1..8cdf3ed0 100644
--- a/src/lib/components/Browse/Sections/SectionTableRow.svelte
+++ b/src/lib/components/Browse/Sections/ItemTable.svelte
@@ -32,9 +32,6 @@
 	</td>
 	<td>
 		<div class="flex gap-2 my-3">
-			<!-- {#if channel.isPrivate}
-										<IconLock />
-									{/if} -->
 			<IconViewers />
 			<span>{channel.memberCount || '0'}</span>
 		</div>
diff --git a/src/lib/components/Browse/Sections/SectionUserItem.svelte b/src/lib/components/Browse/Sections/ItemUser.svelte
similarity index 75%
rename from src/lib/components/Browse/Sections/SectionUserItem.svelte
rename to src/lib/components/Browse/Sections/ItemUser.svelte
index 2c5f564c..6b314fb9 100644
--- a/src/lib/components/Browse/Sections/SectionUserItem.svelte
+++ b/src/lib/components/Browse/Sections/ItemUser.svelte
@@ -7,14 +7,16 @@
 <ul class="menu shrink-0 bg-base-100 rounded-md">
 	<li>
 		<a class="rounded-md" href="/profile/{user.username}">
-			<div class="text-center space-y-3">
+			<div class="text-center space-y-3 w-[200px]">
 				<div class="avatar">
 					<div class="w-36 mask mask-squircle">
 						<img src={user.avatar} alt="" />
 					</div>
 				</div>
-				<p class="text-lg font-semibold">@{user.username}</p>
-				<div class="flex flex-wrap">
+				<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}>
diff --git a/src/lib/components/Browse/Sections/SectionCarousel.svelte b/src/lib/components/Browse/Sections/SectionCarousel.svelte
index 86bbb213..91d9c68d 100644
--- a/src/lib/components/Browse/Sections/SectionCarousel.svelte
+++ b/src/lib/components/Browse/Sections/SectionCarousel.svelte
@@ -4,17 +4,19 @@
 	import LoadingItemCarousel from '$lib/components/Browse/Sections/LoadingItemCarousel.svelte'
 	import { onMount } from 'svelte'
 	import Swiper, { Navigation } from 'swiper'
+	import ItemCarousel from '$lib/components/Browse/Sections/ItemCarousel.svelte'
 	import 'swiper/css'
-	import SectionCarouselItem from '$lib/components/Browse/Sections/SectionCarouselItem.svelte'
 
 	export let channels: any = []
+
 	let swiper: Swiper
 
-	onMount(() => {
+	const initSwiper = () => {
 		swiper = new Swiper('.carousel', {
 			slidesPerView: 3,
 			spaceBetween: 15,
 			loop: true,
+			centeredSlides: true,
 			modules: [Navigation],
 			navigation: {
 				nextEl: '.btn-next',
@@ -32,10 +34,14 @@
 				}
 			}
 		})
+	}
+
+	onMount(async () => {
+		initSwiper()
 	})
 </script>
 
-{#await channels}
+{#if channels.length == 0}
 	<div class="flex flex-col my-4 relative overflow-x-auto scrollbar-hide">
 		<div role="status" class="flex flex-row gap-1 animate-pulse">
 			{#each Array(5) as _, index (index)}
@@ -43,31 +49,25 @@
 			{/each}
 		</div>
 	</div>
-{:then value}
-	{#if value.length > 0}
-		<div class="relative p-1">
-			<div class="btn btn-square p-3 btn-prev absolute top-2/4 left-1 z-10 ml-3">
-				<IconDrawerLeft />
-			</div>
-			<div class="swiper carousel mt-10 mx-8">
-				<div class="swiper-wrapper">
-					{#each value as channel}
-						<SectionCarouselItem {channel} />
-					{/each}
-				</div>
-			</div>
-			<div class="btn btn-square z-10 p-3 btn-next absolute top-2/4 right-1 mr-3">
-				<IconDrawerChevron />
+{:else}
+	<div class="relative p-1">
+		<div class="btn btn-square p-2 btn-prev absolute top-2/4 left-1 z-10 ml-3">
+			<IconDrawerLeft />
+		</div>
+		<div class="swiper carousel mt-10 mx-8">
+			<div class="swiper-wrapper">
+				{#each channels as channel}
+					<ItemCarousel {channel} />
+				{/each}
 			</div>
 		</div>
-	{/if}
-{/await}
+		<div class="btn btn-square z-10 p-2 btn-next absolute top-2/4 right-1 mr-3">
+			<IconDrawerChevron />
+		</div>
+	</div>
+{/if}
 
 <style>
-	.swiper-slide {
-		background: #fff;
-		display: flex;
-	}
 	:global(.swiper-slide) {
 		height: 20rem !important;
 	}
diff --git a/src/lib/components/Browse/Sections/SectionCarouselItem.svelte b/src/lib/components/Browse/Sections/SectionCarouselItem.svelte
deleted file mode 100644
index 77da0fce..00000000
--- a/src/lib/components/Browse/Sections/SectionCarouselItem.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-	export let channel: any = {}
-</script>
-
-<a class="swiper-slide flex cursor-pointer rounded-md" href="/channel/{channel._id}">
-	<div class="flex flex-row items-end w-3/4">
-		<div class="avatar my-3 ml-2">
-			<div class="w-14 mask mask-squircle">
-				<img src={channel.avatar} alt="" />
-			</div>
-		</div>
-		<div class="mb-2 ml-2 w-full">
-			<p class="text-2xl truncate font-semibold">{channel.title}</p>
-			<p class="truncate">{channel.description}</p>
-		</div>
-	</div>
-</a>
-
-<style>
-	.video-thumbnail {
-		@apply w-full h-64 flex items-center justify-center mb-2;
-	}
-</style>
diff --git a/src/lib/components/Browse/Sections/SectionChannel.svelte b/src/lib/components/Browse/Sections/SectionChannel.svelte
index 27cd5afa..56dd00ae 100644
--- a/src/lib/components/Browse/Sections/SectionChannel.svelte
+++ b/src/lib/components/Browse/Sections/SectionChannel.svelte
@@ -2,7 +2,7 @@
 	import IconDrawerLeft from '$lib/assets/icons/drawer/IconDrawerLeft.svelte'
 	import IconDrawerChevron from '$lib/assets/icons/drawer/IconDrawerChevron.svelte'
 	import LoadingItemChannel from '$lib/components/Browse/Sections/LoadingItemChannel.svelte'
-	import SectionChannelItem from '$lib/components/Browse/Sections/SectionChannelItem.svelte'
+	import ItemChannel from '$lib/components/Browse/Sections/ItemChannel.svelte'
 
 	export let title: string = '',
 		channels: any = undefined,
@@ -44,7 +44,7 @@
 	{#if sectionId === 'weekly' ? value.channels?.length > 0 : value.length > 0}
 		<div class="flex flex-col my-4 relative overflow-x-auto scrollbar-hide">
 			<div class="font-semibold m-3">
-				<a class="link link-secondary text-lg" href="/browse/{sectionId}"
+				<a class="link link-secondary text-lg" href="/search?section={sectionId}"
 					>{sectionId === 'weekly' ? value.title : title}</a>
 			</div>
 			<div class="flex flex-row">
@@ -56,14 +56,14 @@
 
 				<div
 					bind:this={ref}
-					class="relative w-full flex gap-6 snap-x scrollbar-hide snap-mandatory overflow-x-auto flex-grow mx-8">
+					class="relative w-full flex gap-6 snap-x scrollbar-hide snap-mandatory overflow-x-auto flex-grow mx-14">
 					{#if sectionId === 'weekly'}
 						{#each value.channels as channel}
-							<SectionChannelItem {channel} />
+							<ItemChannel {channel} />
 						{/each}
 					{:else}
 						{#each value as channel}
-							<SectionChannelItem {channel} />
+							<ItemChannel {channel} />
 						{/each}
 					{/if}
 				</div>
diff --git a/src/lib/components/Browse/Sections/SectionChannelItem.svelte b/src/lib/components/Browse/Sections/SectionChannelItem.svelte
deleted file mode 100644
index 101ffc3b..00000000
--- a/src/lib/components/Browse/Sections/SectionChannelItem.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-	export let channel: any = {}
-</script>
-
-<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">
-			<img
-				class="w-full h-full mask rounded-lg"
-				src={channel.thumbnail
-					? channel.thumbnail
-					: '/src/lib/assets/placeholder/programming-placeholder.jpg'} />
-		</div>
-	</div>
-	<div class="flex flex-row gap-3 max-w-[400px]">
-		<div class="avatar">
-			<div class="w-12 mask mask-squircle">
-				<img src={channel.avatar} alt="" />
-			</div>
-		</div>
-
-		<div class="truncate mr-2">
-			<p class="text-lg font-semibold">{channel.title}</p>
-			<p class="text-sm">{channel.description}</p>
-		</div>
-	</div>
-</a>
-
-<style>
-	.video-thumbnail {
-		@apply w-full h-64 flex items-center justify-center mb-2;
-	}
-</style>
diff --git a/src/lib/components/Browse/Sections/SectionTable.svelte b/src/lib/components/Browse/Sections/SectionTable.svelte
index 6d35dcdd..e42ec557 100644
--- a/src/lib/components/Browse/Sections/SectionTable.svelte
+++ b/src/lib/components/Browse/Sections/SectionTable.svelte
@@ -2,7 +2,7 @@
 	// import IconLock from '$lib/assets/icons/IconLock.svelte'
 	// import VirtualList from '@sveltejs/svelte-virtual-list'
 	import LoadingItemTable from '$lib/components/Browse/Sections/LoadingItemTable.svelte'
-	import SectionTableRow from '$lib/components/Browse/Sections/SectionTableRow.svelte'
+	import ItemTable from '$lib/components/Browse/Sections/ItemTable.svelte'
 	import LastItemInViewport from '$lib/actions/LastItemInViewport'
 	import { get } from '$lib/api'
 
@@ -26,7 +26,7 @@
 	</div>
 {:then value}
 	{#if value.length > 0}
-		<table class="table-auto w-full">
+		<table class="table-auto w-full overflow-hidden">
 			<thead>
 				<tr>
 					<th class="px-4 text-start">Host</th>
@@ -38,10 +38,10 @@
 			</thead>
 			<tbody>
 				{#each value as channel}
-					<SectionTableRow {channel} />
+					<ItemTable {channel} />
 				{/each}
 				{#each moreChannels as channel}
-					<SectionTableRow {channel} />
+					<ItemTable {channel} />
 				{/each}
 			</tbody>
 			<tfoot>
diff --git a/src/lib/components/Browse/Sections/SectionUser.svelte b/src/lib/components/Browse/Sections/SectionUser.svelte
index 90b150ac..dc561ac2 100644
--- a/src/lib/components/Browse/Sections/SectionUser.svelte
+++ b/src/lib/components/Browse/Sections/SectionUser.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import IconDrawerLeft from '$lib/assets/icons/drawer/IconDrawerLeft.svelte'
 	import IconDrawerChevron from '$lib/assets/icons/drawer/IconDrawerChevron.svelte'
-	import SectionUserItem from '$lib/components/Browse/Sections/SectionUserItem.svelte'
+	import ItemUser from '$lib/components/Browse/Sections/ItemUser.svelte'
 	import LoadingItemChannel from '$lib/components/Browse/Sections/LoadingItemChannel.svelte'
 
 	export let title: string = '',
@@ -29,7 +29,6 @@
 	}
 </script>
 
-<!--class:hidden-->
 {#await users}
 	<div class="flex flex-col my-4 relative overflow-x-auto scrollbar-hide">
 		<div class="font-semibold m-3">
@@ -45,7 +44,7 @@
 	{#if value.length > 0}
 		<div class="flex flex-col my-4 relative overflow-x-auto scrollbar-hide">
 			<div class="font-semibold m-3">
-				<a class="link link-secondary text-lg" href="/browse/{sectionId}">{title}</a>
+				<a class="link link-secondary text-lg" href="/search?section={sectionId}">{title}</a>
 			</div>
 			<div class="flex flex-row">
 				<div class="relative flex items-center ml-3">
@@ -59,11 +58,11 @@
 					class="relative w-full flex gap-6 snap-x scrollbar-hide snap-mandatory overflow-x-auto flex-grow mx-14">
 					{#if sectionId === 'rising-stars'}
 						{#each value.users as user}
-							<SectionUserItem {user} />
+							<ItemUser {user} />
 						{/each}
 					{:else}
 						{#each value as user}
-							<SectionUserItem {user} />
+							<ItemUser {user} />
 						{/each}
 					{/if}
 				</div>
@@ -79,10 +78,6 @@
 {/await}
 
 <style>
-	.video-thumbnail {
-		@apply bg-slate-400 w-full h-64 flex items-center justify-center text-white rounded-md cursor-pointer;
-	}
-
 	.scrollbar-hide::-webkit-scrollbar {
 		display: none;
 	}
diff --git a/src/lib/components/Channel/Chat/ChatInput.svelte b/src/lib/components/Channel/Chat/ChatInput.svelte
index 662c8ef1..c219d725 100644
--- a/src/lib/components/Channel/Chat/ChatInput.svelte
+++ b/src/lib/components/Channel/Chat/ChatInput.svelte
@@ -1,23 +1,24 @@
 <script lang="ts">
 	// import IconChatAttachment from '$lib/assets/icons/chat/IconChatAttachment.svelte'
+	import IconChatAI from '$lib/assets/icons/chat/IconChatAI.svelte'
 	import IconChatEmoji from '$lib/assets/icons/chat/IconChatEmoji.svelte'
 	import IconChatGif from '$lib/assets/icons/chat/IconChatGif.svelte'
 	import IconChatCode from '$lib/assets/icons/chat/IconChatCode.svelte'
 	import IconChatSendMessage from '$lib/assets/icons/chat/IconChatSendMessage.svelte'
-	import { emitMessageToChannel } from '$lib/websocket'
+	import { emitChannelUpdate, emitMessageToChannel } from '$lib/websocket'
 	import { page } from '$app/stores'
 	import { channel_connection } from '$lib/stores/websocketStore'
 
 	export let channel: any
 
 	$: chatMessage = ''
-
-	$: isChannelSocketConnected =
-		$channel_connection === 'open' && $page.data?.user?.userId ? true : false
+	$: isChannelSocketConnected = $channel_connection === 'open' && $page.data.user?.userId
+	$: isHost = channel.user === $page.data.user?.userId
 
 	const sendMessage = () => {
 		if (chatMessage === null || chatMessage.match(/^\s*$/) !== null) return
 		const completeMessage = {
+			isAiChatEnabled: channel.isAiChatEnabled,
 			body: chatMessage,
 			state: { timestamp: new Date().toISOString() },
 			user: {
@@ -28,37 +29,37 @@
 		emitMessageToChannel({ channelId: channel._id, message: JSON.stringify(completeMessage) })
 		chatMessage = ''
 	}
+
+	const toggleAIChat = async () => {
+		channel.isAiChatEnabled = !channel.isAiChatEnabled
+		emitChannelUpdate({ channel })
+	}
 </script>
 
 <form class="rounded-lg bg-base-200 p-2 w-full">
-	<!-- <button
-		disabled
-		type="button"
-		class="btn border-none text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 tooltip font-normal normal-case"
-		data-tip="Attachment">
-		<IconChatAttachment />
-		<span class="sr-only">Upload attachment</span>
-	</button> -->
 	<button
-		disabled
-		type="button"
-		class="btn border-none text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 tooltip font-normal normal-case"
-		data-tip="Emoji">
+		class="btn tooltip font-normal normal-case {!isHost
+			? 'no-animation'
+			: ''} {channel.isAiChatEnabled ? 'btn-primary' : ''}"
+		data-tip="AI"
+		on:click={() => {
+			if (isHost) toggleAIChat()
+		}}>
+		<IconChatAI />
+		<span class="sr-only">Enable AI</span>
+	</button>
+	<button disabled type="button" class="btn tooltip font-normal normal-case" data-tip="Emoji">
 		<IconChatEmoji />
 		<span class="sr-only">Add emoji</span>
 	</button>
-	<button
-		disabled
-		type="button"
-		class="btn border-none text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 tooltip font-normal normal-case"
-		data-tip="GIF">
+	<button disabled type="button" class="btn tooltip font-normal normal-case" data-tip="GIF">
 		<IconChatGif />
 		<span class="sr-only">Add GIF</span>
 	</button>
 	<button
 		disabled
 		type="button"
-		class="btn border-none text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 tooltip font-normal normal-case"
+		class="btn tooltip font-normal normal-case"
 		data-tip="Code snippet">
 		<IconChatCode />
 		<span class="sr-only">Add code snippet</span>
@@ -66,7 +67,7 @@
 	<div class="flex items-center py-2 rounded-lg">
 		{#if !isChannelSocketConnected || channel.bans?.includes($page.data.user.userId)}
 			<input
-				class="animate-pulse block mx-2 p-2.5 w-full text-sm textarea textarea-bordered textarea-secondary"
+				class="animate-pulse block mx-1 p-2.5 w-full text-sm textarea textarea-bordered textarea-secondary"
 				placeholder="Disabled"
 				disabled />
 		{:else}
@@ -79,7 +80,7 @@
 				}}
 				bind:value={chatMessage}
 				rows="1"
-				class="block mx-2 p-2.5 w-full text-sm textarea textarea-bordered textarea-secondary"
+				class="block mx-1 p-2.5 w-full text-sm textarea textarea-bordered textarea-secondary"
 				placeholder="Your message..." /><!--focus:h-32 -->
 			<button
 				on:click={() => sendMessage()}
diff --git a/src/lib/components/Channel/Chat/DrawerChat.svelte b/src/lib/components/Channel/Chat/DrawerChat.svelte
index 402cb317..5189d8e2 100644
--- a/src/lib/components/Channel/Chat/DrawerChat.svelte
+++ b/src/lib/components/Channel/Chat/DrawerChat.svelte
@@ -15,9 +15,10 @@
 	let chatHistory: any[] = []
 
 	const setRole = (msg: any): any => {
-		if (msg.user?.userId === channel?.user) msg.role = 'Host'
+		if (msg.user?.userId === 'AI') msg.role = '🤖 AI'
+		else if (msg.user?.userId === channel?.user) msg.role = 'Host'
 		else if (channel?.mods?.includes(msg.user._id)) msg.role = 'Mod'
-		else if (msg.user?.userId === $page.data?.user?.userId) msg.role = 'You'
+		else if (msg.user?.userId === $page.data.user?.userId) msg.role = 'You'
 		else msg.role = 'Rando'
 		return msg
 	}
@@ -41,9 +42,9 @@
 				chatHistory = chatHistory.filter((item) => item.timestamp !== parsedMsg.data.timestamp)
 			} else {
 				parsedMsg = setRole(parsedMsg)
-				chatHistory.push(parsedMsg)
+				chatHistory.unshift(parsedMsg)
 			}
-			chatHistory = chatHistory.reverse()
+			chatHistory = chatHistory
 		}
 	})
 
diff --git a/src/lib/components/Channel/Chat/DrawerEditChannel.svelte b/src/lib/components/Channel/Chat/DrawerEditChannel.svelte
index 84fd0bba..e160c26d 100644
--- a/src/lib/components/Channel/Chat/DrawerEditChannel.svelte
+++ b/src/lib/components/Channel/Chat/DrawerEditChannel.svelte
@@ -87,8 +87,6 @@
 				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)
@@ -145,7 +143,7 @@
 								{/each}
 							{:else}
 								<div class="flex justify-center w-full">
-									<span class="btn btn-circle btn-outline btn-sm loading" />
+									<progress class="progress w-full" />
 								</div>
 							{/if}
 						</div>
@@ -164,9 +162,9 @@
 								name="category"
 								required={!channel.category.length}
 								placeholder={channel?.category?.length ? '' : 'Category'}
-								class="input input-primary input-bordered mt-5 w-full " />
+								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">
+							<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" />
diff --git a/src/lib/components/Channel/Chat/DropdownViewChannel.svelte b/src/lib/components/Channel/Chat/DropdownViewChannel.svelte
index 2afe814c..77bfcb2a 100644
--- a/src/lib/components/Channel/Chat/DropdownViewChannel.svelte
+++ b/src/lib/components/Channel/Chat/DropdownViewChannel.svelte
@@ -1,15 +1,61 @@
 <script lang="ts">
-	import { get } from '$lib/api'
 	import IconChatDownChevron from '$lib/assets/icons/chat/IconChatDownChevron.svelte'
 	import { category_list } from '$lib/stores/channelStore'
-	import { page } from '$app/stores'
 	import { copyToClipboard } from '$lib/utils'
 	import IconChatDelete from '$lib/assets/icons/chat/IconChatDelete.svelte'
+	import IconChatStar from '$lib/assets/icons/chat/IconChatStar.svelte'
+	import { onMount } from 'svelte'
+	import { page } from '$app/stores'
+	import { del, get, put } from '$lib/api'
 
 	export let channel: any = undefined,
 		showEditChannelDrawer: boolean = false,
 		host: any = {},
-		isHost: boolean = false
+		isHost: boolean = false,
+		isSubscribed: boolean = false,
+		isFavorite: boolean = false
+
+	onMount(async () => {
+		if (!$page.data.user?.userId) return
+		const relationship = await get(`subscribes/relationship?source=${channel.user}`, {
+			userId: $page.data.user?.userId,
+			token: $page.data.user?.token
+		})
+		isSubscribed = relationship?.isSubscribing
+		isFavorite = $page.data.user?.user?.favChannelIds?.includes(channel._id)
+	})
+
+	const toggleSubscribe = async () => {
+		isSubscribed = !isSubscribed
+		if (isSubscribed) {
+			await put(
+				`subscribes`,
+				{ source1: channel.user, source2: $page.data.user?.userId },
+				{ userId: $page.data.user?.userId, token: $page.data.user?.token }
+			)
+		} else {
+			await del(`subscribes?source1=${channel.user}&source2=${$page.data.user?.userId}`, {
+				userId: $page.data.user?.userId,
+				token: $page.data.user?.token
+			})
+		}
+	}
+
+	const toggleFavorite = async () => {
+		isFavorite = !isFavorite
+		if (isFavorite) {
+			await put(
+				`users/channel?channelId=${channel._id}`,
+				{},
+				{ userId: $page.data.user?.userId, token: $page.data.user?.token }
+			)
+		} else {
+			await del(`users/channel?channelId=${channel._id}`, {
+				userId: $page.data.user?.userId,
+				token: $page.data.user?.token
+			})
+		}
+	}
 </script>
 
 <div class="menu dropdown dropdown-bottom">
@@ -80,7 +126,6 @@
 		</li>
 		{#if isHost}
 			<div class="grid grid-cols-5 gap-2">
-				<!-- 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"
@@ -90,11 +135,32 @@
 				</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"
+					class="btn col-span-1 bg-error text-black hover:text-white border-none font-normal normal-case tooltip tooltip-left tooltip-error flex"
 					data-tip="Delete channel">
 					<IconChatDelete />
 				</label>
 			</div>
+		{:else}
+			<div class="grid grid-cols-5 gap-2">
+				<button
+					disabled={!$page.data.user?.userId}
+					class="btn btn-secondary {isSubscribed
+						? 'btn-outline'
+						: ''} col-span-4 normal-case tooltip tooltip-top flex"
+					data-tip={isSubscribed ? 'Unsubscribe from host' : 'Subscribe to host'}
+					on:click={() => toggleSubscribe()}>
+					{isSubscribed ? 'Unsubscribe' : 'Subscribe'}
+				</button>
+				<button
+					disabled={!$page.data.user?.userId}
+					class="btn col-span-1 {isFavorite
+						? 'bg-yellow-300 text-black hover:bg-yellow-500'
+						: ''} border-none font-normal normal-case tooltip tooltip-left flex"
+					data-tip="Fav channel"
+					on:click={() => toggleFavorite()}>
+					<IconChatStar />
+				</button>
+			</div>
 		{/if}
 	</ul>
 </div>
diff --git a/src/lib/components/Channel/Chat/Message.svelte b/src/lib/components/Channel/Chat/Message.svelte
index d9d382ef..1b3e2eb3 100644
--- a/src/lib/components/Channel/Chat/Message.svelte
+++ b/src/lib/components/Channel/Chat/Message.svelte
@@ -48,10 +48,10 @@
 	}
 
 	const toggleGuest = () => {
-		if (channel.guests.includes(sender.user?.userId)) {
-			channel.guests = channel.guests.filter((guest: string) => guest !== sender.user?.userId)
-		} else {
+		if (!channel.guests.includes(sender.user?.userId) && channel.guests.length < 9) {
 			channel.guests.push(sender.user?.userId)
+		} else {
+			channel.guests = channel.guests.filter((guest: string) => guest !== sender.user?.userId)
 		}
 		emitChannelUpdate({ channel })
 	}
@@ -64,12 +64,15 @@
 		<!--Host, Mod, You or Rando-->
 		<div class="p-1 border border-transparent rounded-lg flex gap-2 overflow-x-hidden">
 			<span>
-				{#if sender.role === 'Host' || sender.role === 'Mod' || sender.role === 'You'}
+				{#if sender.role === '🤖 AI' || sender.role === 'Host' || sender.role === 'Mod' || sender.role === 'You'}
 					<span class="{coloredRole.tagColor} rounded-sm text-sm px-[5px] py-[2px] text-white"
 						>{sender.role}</span>
 				{/if}
-				<span data-popover-target="popover-user-profile" class="{coloredRole.textColor} font-medium"
-					>@{sender.user?.username}</span>
+				{#if sender.role !== '🤖 AI'}
+					<span
+						data-popover-target="popover-user-profile"
+						class="{coloredRole.textColor} font-medium">@{sender.user?.username}</span>
+				{/if}
 				<span class="break-all">{sender.message}</span>
 			</span>
 			<div
diff --git a/src/lib/components/Channel/Stream/StreamContainer.svelte b/src/lib/components/Channel/Stream/StreamContainer.svelte
index c00845ba..620de262 100644
--- a/src/lib/components/Channel/Stream/StreamContainer.svelte
+++ b/src/lib/components/Channel/Stream/StreamContainer.svelte
@@ -1,17 +1,21 @@
 <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 DropdownViewers from '$lib/components/Channel/Stream/DropdownViewers.svelte'
 	import VideoGrid from '$lib/components/Channel/Stream/VideoGrid.svelte'
 	import { goto } from '$app/navigation'
 	import { page } from '$app/stores'
 	import { createEventDispatcher } from 'svelte'
 	import { video_items } from '$lib/stores/streamStore'
+	import { channel_connection } from '$lib/stores/websocketStore'
 
 	const dispatch = createEventDispatcher()
-	export let userCount: number = 10,
+	export let userCount: number = 1,
 		channel: any,
-		channels: any = []
+		channels: any = [],
+		isHostOrGuest: boolean = false
+
+	$: isChannelSocketConnected = $channel_connection === 'open'
 
 	function autoActive(node: Element) {
 		const observer = new IntersectionObserver(callback, { threshold: 0.5 })
@@ -58,16 +62,27 @@
 								<IconViewers />
 								{userCount}
 							</label>
-							<DropdownViewers />
+							<!-- <DropdownViewers /> -->
 						</div>
 					</div>
-					<VideoGrid {channel} />
+					{#if channel && nextchannel?._id === $page.params.channelId}
+						<VideoGrid {channel} />
+						{#if !$video_items?.length && isChannelSocketConnected}
+							<div
+								class="mockup-code absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition-all">
+								<pre data-prefix="$"><code>npm check streams</code></pre>
+								<pre data-prefix=">" class="text-warning"><code>pinging host...</code></pre>
+								<pre data-prefix=">" class="text-success"><code
+										>Streams not found for this channel</code></pre>
+							</div>
+						{/if}
+					{/if}
 				</div>
 			</div>
 		{/each}
 	</div>
 
 	<div class="absolute bottom-0 m-5">
-		<StreamControls isHost={channel?.user === $page?.data?.user?.userId} bind:channel />
+		<StreamControls {isHostOrGuest} />
 	</div>
 </div>
diff --git a/src/lib/components/Channel/Stream/StreamControls.svelte b/src/lib/components/Channel/Stream/StreamControls.svelte
index c46b6d89..225679c3 100644
--- a/src/lib/components/Channel/Stream/StreamControls.svelte
+++ b/src/lib/components/Channel/Stream/StreamControls.svelte
@@ -8,16 +8,23 @@
 		is_chat_drawer_destroy,
 		was_chat_drawer_closed
 	} from '$lib/stores/channelStore'
-	import { del, post } from '$lib/api'
+	import { del, put } from '$lib/api'
 	import { page } from '$app/stores'
 	import { emitAction } from '$lib/websocket'
-	import { updateVideoItems, video_items } from '$lib/stores/streamStore'
+	import {
+		is_sharing_audio,
+		is_sharing_screen,
+		is_sharing_webcam,
+		updateVideoItems,
+		video_items
+	} from '$lib/stores/streamStore'
+	import { channel_connection } from '$lib/stores/websocketStore'
+
+	export let isHostOrGuest: boolean = false
+
+	$: isChannelSocketConnected = $channel_connection === 'open' && $page.data.user?.userId
+	$: videoItemIsActive = $video_items.some((video: any) => video._id === $page.data.user?.userId)
 
-	export let isHost: boolean = true,
-		channel: any
-	let isSharingScreen: boolean = false
-	let isSharingWebcam: boolean = false
-	let isSharingAudio: boolean = false
 	let screenUid: string = ''
 	let webcamUid: string = ''
 	let audioUid: string = ''
@@ -39,63 +46,70 @@
 	}
 
 	const createLiveInput = async (trackData: any) => {
-		return await post(
-			`cloudflare/live-input?channelId=${$page.params.channelId}`,
-			JSON.stringify(trackData),
-			{
-				userId: $page.data.user.userId,
-				token: $page.data.user.token
-			}
-		)
+		return await put(`cloudflare/live-input`, trackData, {
+			userId: $page.data.user?.userId,
+			token: $page.data.user?.token
+		})
 	}
 
 	const deleteLiveInput = async ({
 		channelId,
+		userId,
+		trackType,
 		inputId
 	}: {
 		channelId: string
+		userId: string
+		trackType: string
 		inputId: string
 	}) => {
-		return await del(`cloudflare/live-input?channelId=${channelId}&inputId=${inputId}`, {
-			userId: $page.data.user.userId,
-			token: $page.data.user.token
-		})
+		return await del(
+			`cloudflare/live-input?channelId=${channelId}&userId=${userId}&trackType=${trackType}&inputId=${inputId}`,
+			{
+				userId: $page.data.user?.userId,
+				token: $page.data.user?.token
+			}
+		)
 	}
 
 	const startScreenStream = async () => {
-		const trackName = `screen-${$page.data.user.userId}`
 		const liveInput = await createLiveInput({
-			meta: {
-				name: JSON.stringify({
-					channel: `${$page.params.channelId}`,
-					isTrackActive: true,
-					trackType: 'screen',
-					_id: $page.data.user.userId
-				})
-			},
-			recording: { mode: 'automatic' }
+			channelId: `${$page.params.channelId}`,
+			userId: $page.data.user.userId,
+			trackType: 'screen',
+			isTrackActive: true,
+			liveInput: {
+				meta: {
+					name: `${$page.params.channelId}-${$page.data.user.userId}-screen`
+				},
+				recording: { mode: 'automatic' }
+			}
 		})
 		screenUid = liveInput.uid
 		$video_items = updateVideoItems($video_items, [liveInput])
-		console.log('video_items', $video_items)
 		emitAction({
 			channelId: $page.params.channelId,
 			message: {
-				action: 'toggleTrack-start',
+				action: 'toggleTrack',
 				video: liveInput
 			}
 		})
 	}
 
 	const stopScreenStream = async () => {
-		await deleteLiveInput({ channelId: $page.params.channelId, inputId: screenUid })
+		await deleteLiveInput({
+			channelId: $page.params.channelId,
+			userId: $page.data.user.userId,
+			trackType: 'screen',
+			inputId: screenUid
+		})
 		$video_items = updateVideoItems($video_items, [
 			{ _id: $page.data.user.userId, trackType: 'screen', isTrackActive: false }
 		])
 		emitAction({
 			channelId: $page.params.channelId,
 			message: {
-				action: 'toggleTrack-stop',
+				action: 'toggleTrack',
 				video: {
 					trackType: 'screen',
 					isTrackActive: false,
@@ -107,42 +121,47 @@
 	}
 
 	const startWebcamStream = async () => {
-		const trackName = `webcam-${$page.data.user.userId}`
 		const liveInput = await createLiveInput({
-			meta: {
-				name: `${$page.params.channelId}-${trackName}`,
-				trackName: trackName,
-				trackType: 'webcam',
-				username: $page.data.user.user.username
-			},
-			recording: { mode: 'automatic' }
+			channelId: `${$page.params.channelId}`,
+			userId: $page.data.user.userId,
+			trackType: 'webcam',
+			isTrackActive: true,
+			liveInput: {
+				meta: {
+					name: `${$page.params.channelId}-${$page.data.user.userId}-webcam`
+				},
+				recording: { mode: 'automatic' }
+			}
 		})
 		webcamUid = liveInput.uid
-		$video_items.push(liveInput)
+		$video_items = updateVideoItems($video_items, [liveInput])
 		emitAction({
 			channelId: $page.params.channelId,
 			message: {
-				action: 'toggleTrack-start',
+				action: 'toggleTrack',
 				video: liveInput
 			}
 		})
 	}
 
 	const stopWebcamStream = async () => {
-		await deleteLiveInput({ channelId: $page.params.channelId, inputId: webcamUid })
-		$video_items = $video_items.filter(
-			(video: any) => video.trackName !== `webcam-${$page.data.user.userId}`
-		)
+		await deleteLiveInput({
+			channelId: $page.params.channelId,
+			userId: $page.data.user.userId,
+			trackType: 'webcam',
+			inputId: webcamUid
+		})
+		$video_items = updateVideoItems($video_items, [
+			{ _id: $page.data.user.userId, trackType: 'webcam', isTrackActive: false }
+		])
 		emitAction({
 			channelId: $page.params.channelId,
 			message: {
-				action: 'toggleTrack-stop',
+				action: 'toggleTrack',
 				video: {
 					trackType: 'webcam',
-					liveInput: { webcamUid },
-					trackName: null,
-					userId: $page.data.user.userId,
-					username: $page.data.user.user.username
+					isTrackActive: false,
+					_id: $page.data.user.userId
 				}
 			}
 		})
@@ -150,83 +169,106 @@
 	}
 
 	const startAudioStream = async () => {
-		const trackName = `audio-${$page.data.user.userId}`
 		const liveInput = await createLiveInput({
-			meta: {
-				name: `${$page.params.channelId}-${trackName}`,
-				trackName: trackName,
-				trackType: 'webcam',
-				userId: $page.data.user.userId,
-				username: $page.data.user.user.username
-			},
-			recording: { mode: 'automatic' }
+			channelId: `${$page.params.channelId}`,
+			userId: $page.data.user.userId,
+			trackType: 'audio',
+			isTrackActive: true,
+			liveInput: {
+				meta: {
+					name: `${$page.params.channelId}-${$page.data.user.userId}-audio`
+				},
+				recording: { mode: 'automatic' }
+			}
 		})
 		audioUid = liveInput.uid
-		$video_items.push(liveInput)
+		$video_items = updateVideoItems($video_items, [liveInput])
 		emitAction({
 			channelId: $page.params.channelId,
 			message: {
-				action: 'toggleTrack-start',
+				action: 'toggleTrack',
 				video: liveInput
 			}
 		})
 	}
 
 	const stopAudioStream = async () => {
-		await deleteLiveInput({ channelId: $page.params.channelId, inputId: audioUid })
-		$video_items = $video_items.filter(
-			(video: any) => video.trackName !== `audio-${$page.data.user.userId}`
-		)
+		await deleteLiveInput({
+			channelId: $page.params.channelId,
+			userId: $page.data.user.userId,
+			trackType: 'audio',
+			inputId: audioUid
+		})
+		$video_items = updateVideoItems($video_items, [
+			{ _id: $page.data.user.userId, trackType: 'audio', isTrackActive: false }
+		])
 		emitAction({
 			channelId: $page.params.channelId,
 			message: {
-				action: 'toggleTrack-stop',
+				action: 'toggleTrack',
 				video: {
 					trackType: 'audio',
-					liveInput: { audioUid },
-					trackName: null,
-					userId: $page.data.user.userId,
-					username: $page.data.user.user.username
+					isTrackActive: false,
+					_id: $page.data.user.userId
 				}
 			}
 		})
 		audioUid = ''
 	}
 
-	$: isHostOrGuest = isHost || channel.guests.includes($page.data?.user?.userId)
+	is_sharing_screen.subscribe((value) => {
+		if (value) {
+			startScreenStream()
+		} else if (value === false) {
+			stopScreenStream()
+		}
+	})
+
+	is_sharing_webcam.subscribe((value) => {
+		if (value) {
+			startWebcamStream()
+		} else if (value === false) {
+			stopWebcamStream()
+		}
+	})
+
+	is_sharing_audio.subscribe((value) => {
+		if (value) {
+			startAudioStream()
+		} else if (value === false) {
+			stopAudioStream()
+		}
+	})
 </script>
 
 <div class="flex gap-4">
 	<button
-		class="btn tooltip font-normal normal-case {isSharingScreen ? 'btn-primary' : ''}"
+		class="btn tooltip font-normal normal-case {$is_sharing_screen ? 'btn-primary' : ''}"
 		data-tip="Screen"
 		on:click={() => {
-			isSharingScreen = !isSharingScreen
-			isSharingScreen ? startScreenStream() : stopScreenStream()
+			$is_sharing_screen = !$is_sharing_screen
 		}}
-		disabled={!isHostOrGuest}>
+		disabled={!isHostOrGuest || !isChannelSocketConnected || !videoItemIsActive}>
 		<IconShareScreen />
 	</button>
 
 	<button
-		class="btn tooltip font-normal normal-case {isSharingWebcam ? 'btn-primary' : ''}"
+		class="btn tooltip font-normal normal-case {$is_sharing_webcam ? 'btn-primary' : ''}"
 		data-tip="Webcam"
 		on:click={() => {
-			isSharingWebcam = !isSharingWebcam
-			isSharingWebcam ? startWebcamStream() : stopWebcamStream()
+			$is_sharing_webcam = !$is_sharing_webcam
 		}}
-		disabled={!isHostOrGuest}>
+		disabled={!isHostOrGuest || !isChannelSocketConnected || !videoItemIsActive}>
 		<IconShareWebcam />
 	</button>
 
 	<button
-		class="btn tooltip font-normal normal-case {isSharingAudio ? 'btn-primary' : ''}"
+		class="btn tooltip font-normal normal-case {$is_sharing_audio ? 'btn-primary' : ''}"
 		data-tip="Audio"
 		on:click={() => {
-			isSharingAudio = !isSharingAudio
-			isSharingAudio ? startAudioStream() : stopAudioStream()
+			$is_sharing_audio = !$is_sharing_audio
 		}}
-		disabled={!isHostOrGuest}>
+		disabled={!isHostOrGuest || !isChannelSocketConnected || !videoItemIsActive}>
 		<IconShareAudio />
 	</button>
 
diff --git a/src/lib/components/Channel/Stream/VideoGrid.svelte b/src/lib/components/Channel/Stream/VideoGrid.svelte
index 0a9189a3..6fa81cde 100644
--- a/src/lib/components/Channel/Stream/VideoGrid.svelte
+++ b/src/lib/components/Channel/Stream/VideoGrid.svelte
@@ -1,27 +1,26 @@
 <script lang="ts">
 	import VideoItem from '$lib/components/Channel/Stream/VideoItem.svelte'
-	import { divideNumber, cardCounts } from '$lib/utils'
+	import { getVideoGrids } from '$lib/utils'
 	import { video_items } from '$lib/stores/streamStore'
 
 	export let channel: any
 
 	const sender: any = {}
+	$: grid = getVideoGrids($video_items, 9)
 </script>
 
 {#if $video_items?.length}
 	<div class="carousel h-full pb-6">
-		{#each divideNumber($video_items.length, 16) as videos}
-			<div class="carousel-item w-full">
-				<div class="flex flex-col h-full w-full">
-					{#each cardCounts[videos] as row}
-						<div class="flex flex-row max-h-80 gap-4 justify-center h-full mt-3">
-							{#each Array(row) as _, i}
-								<VideoItem bind:video={$video_items[i]} {channel} {sender} />
-							{/each}
-						</div>
-					{/each}
-				</div>
+		<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 mt-3">
+						{#each row as video}
+							<VideoItem bind:video {channel} {sender} />
+						{/each}
+					</div>
+				{/each}
 			</div>
-		{/each}
+		</div>
 	</div>
 {/if}
diff --git a/src/lib/components/Channel/Stream/VideoItem.svelte b/src/lib/components/Channel/Stream/VideoItem.svelte
index a5ed6a6b..9e08cb70 100644
--- a/src/lib/components/Channel/Stream/VideoItem.svelte
+++ b/src/lib/components/Channel/Stream/VideoItem.svelte
@@ -7,100 +7,207 @@
 	// import IconChatGuest from '$lib/assets/icons/chat/IconChatGuest.svelte'
 	// import { emitChannelUpdate } from '$lib/websocket'
 	// import { getColoredRole } from '$lib/utils'
+	import { draggable } from '@neodrag/svelte'
+	import { is_sharing_audio, is_sharing_screen, is_sharing_webcam } from '$lib/stores/streamStore'
 
 	export let video: any, channel: any, sender: any
 
 	let coloredRole: any = {},
 		isGuest = false,
-		screenElement: any,
-		webcamElement: any,
-		audioElement: any,
+		screenElement: HTMLVideoElement,
+		webcamElement: HTMLVideoElement,
+		audioElement: HTMLAudioElement,
 		screenWhip: WHIPClient,
 		screenWhep: WHEPClient,
 		webcamWhip: WHIPClient,
 		webcamWhep: WHEPClient,
 		audioWhip: WHIPClient,
-		audioWhep: WHEPClient
-
-	$: if (video.screen) {
-		initClient({
-			videoWhip: screenWhip,
-			videoWhep: screenWhep,
-			videoElement: screenElement,
-			videoItem: video.screen
-		})
+		audioWhep: WHEPClient,
+		prevScreen: any,
+		prevWebcam: any,
+		prevAudio: any,
+		isMounted: boolean = false
+
+	$: if (isMounted && video.screen !== prevScreen) {
+		handleScreenChanges()
 	}
 
-	$: if (video.webcam) {
-		initClient({
-			videoWhip: webcamWhip,
-			videoWhep: webcamWhep,
-			videoElement: webcamElement,
-			videoItem: video.webcam
-		})
+	$: if (isMounted && video.webcam !== prevWebcam) {
+		handleWebcamChanges()
 	}
 
-	$: if (video.audio) {
-		initClient({
-			videoWhip: audioWhip,
-			videoWhep: audioWhep,
-			videoElement: audioElement,
-			videoItem: video.audio
+	$: if (isMounted && video.audio !== prevAudio) {
+		handleAudioChanges()
+	}
+
+	const handleScreenChanges = () => {
+		prevScreen = video.screen
+		toggleClient({
+			trackType: 'screen'
 		})
 	}
+	const handleWebcamChanges = () => {
+		prevWebcam = video.webcam
+		toggleClient({
+			trackType: 'webcam'
+		})
+	}
+	const handleAudioChanges = () => {
+		prevAudio = video.audio
+		toggleClient({
+			trackType: 'audio'
+		})
+	}
+
+	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(
+							video.screen.webRTC.url,
+							screenElement,
+							video.screen.trackType
+						)
+						screenWhip.addEventListener(
+							`localStreamStopped-${trackType}`,
+							() => ($is_sharing_screen = false)
+						)
+					}
+					break
+				case 'webcam':
+					if (video.webcam && $is_sharing_webcam) {
+						webcamWhip = new WHIPClient(
+							video.webcam.webRTC.url,
+							webcamElement,
+							video.webcam.trackType
+						)
+						webcamWhip.addEventListener(
+							`localStreamStopped-${trackType}`,
+							() => ($is_sharing_webcam = false)
+						)
+					}
+					break
+				case 'audio':
+					if (video.audio && $is_sharing_audio) {
+						audioWhip = new WHIPClient(video.audio.webRTC.url, audioElement, video.audio.trackType)
+						audioWhip.addEventListener(
+							`localStreamStopped-${trackType}`,
+							() => ($is_sharing_audio = false)
+						)
+					}
+					break
+			}
+		} else {
+			switch (trackType) {
+				case 'screen':
+					if (video.screen) {
+						screenWhep = new WHEPClient(
+							video.screen.webRTCPlayback.url,
+							screenElement,
+							video.screen.trackType
+						)
+						screenElement.muted = false
+						screenElement.play()
+					} else {
+						if (screenElement) screenElement.srcObject = null
+					}
+					break
+				case 'webcam':
+					if (video.webcam) {
+						webcamWhep = new WHEPClient(
+							video.webcam.webRTCPlayback.url,
+							webcamElement,
+							video.webcam.trackType
+						)
+					} else {
+						if (webcamElement) webcamElement.srcObject = null
+					}
+					break
+				case 'audio':
+					if (video.audio) {
+						audioWhep = new WHEPClient(
+							video.audio.webRTCPlayback.url,
+							audioElement,
+							video.audio.trackType
+						)
+						audioElement.muted = false
+						audioElement.play()
+					} else {
+						if (audioElement) audioElement.srcObject = null
+					}
+					break
+			}
+		}
+	}
+
+	// const initializeAndHandleChanges = () => {
+	// 	if (!prevScreen) {
+	// 		prevScreen = video.screen
+	// 		handleScreenChanges()
+	// 	}
+	// 	if (!prevWebcam) {
+	// 		prevWebcam = video.webcam
+	// 		handleWebcamChanges()
+	// 	}
+	// 	if (!prevAudio) {
+	// 		prevAudio = video.audio
+	// 		handleAudioChanges()
+	// 	}
+	// }
+
+	onMount(() => {
+		// coloredRole = getColoredRole(sender.role)
+		// isGuest = channel?.guests?.includes(sender.userData?.userId)
+		screenElement = document.getElementById(`screen-${video._id}`) as HTMLVideoElement
+		webcamElement = document.getElementById(`webcam-${video._id}`) as HTMLVideoElement
+		audioElement = document.getElementById(`audio-${video._id}`) as HTMLAudioElement
 
-	const initVideoElement = ({
-		trackType,
-		videoElement
-	}: {
-		trackType: string
-		videoElement: any
-	}) => {
-		videoElement = document.getElementById(`${trackType}-${video._id}`)
-		if (videoElement) {
-			videoElement.addEventListener('dblclick', (event: any) => {
+		if (screenElement) {
+			screenElement.addEventListener('dblclick', (event: any) => {
 				if (document.fullscreenElement) {
 					document.exitFullscreen()
 				} else {
-					videoElement.requestFullscreen()
+					screenElement.requestFullscreen()
 				}
 			})
-			videoElement.addEventListener(
-				'click',
-				(event: { preventDefault: () => void; stopPropagation: () => void }) => {
-					event.preventDefault()
-					event.stopPropagation()
-					videoElement.scrollIntoView()
+			handleScreenChanges()
+		}
+
+		if (webcamElement) {
+			webcamElement.addEventListener('dblclick', (event: any) => {
+				if (document.fullscreenElement) {
+					document.exitFullscreen()
+				} else {
+					webcamElement.requestFullscreen()
 				}
-			)
+			})
+			handleWebcamChanges()
 		}
-	}
 
-	const initClient = ({
-		videoWhip,
-		videoWhep,
-		videoElement,
-		videoItem
-	}: {
-		videoWhip: WHIPClient
-		videoWhep: WHEPClient
-		videoElement: any
-		videoItem: any
-	}) => {
-		if ($page.data.user.user.username === video.username) {
-			console.log(videoItem)
-			videoWhip = new WHIPClient(videoItem.webRTC.url, videoElement, videoItem.trackType)
-		} else if ($page.data.user.user.username !== video.username) {
-			videoWhep = new WHEPClient(videoItem.webRTCPlayback.url, videoElement)
+		if (webcamElement) {
+			handleAudioChanges()
 		}
-	}
+		isMounted = true
+	})
 
-	onMount(() => {
-		// coloredRole = getColoredRole(sender.role)
-		// isGuest = channel?.guests?.includes(sender.userData?.userId)
-		initVideoElement({ trackType: 'screen', videoElement: screenElement })
-		initVideoElement({ trackType: 'webcam', videoElement: webcamElement })
-		initVideoElement({ trackType: 'audio', videoElement: audioElement })
+	is_sharing_screen.subscribe((value) => {
+		//prevents duplicate calls from WHIPClient
+		if (value === false && screenElement?.srcObject) {
+			screenWhip?.disconnectStream()
+		}
+	})
+
+	is_sharing_webcam.subscribe((value) => {
+		if (value === false && webcamElement?.srcObject) {
+			webcamWhip?.disconnectStream()
+		}
+	})
+
+	is_sharing_audio.subscribe((value) => {
+		if (value === false && audioElement?.srcObject) {
+			audioWhip?.disconnectStream()
+		}
 	})
 
 	// const toggleMod = () => {
@@ -122,35 +229,35 @@
 	// }
 </script>
 
-<div class="w-[500px]">
+<div class={$is_sharing_screen || $is_sharing_webcam ? 'w-full h-full' : 'w-[500px] max-h-80'}>
 	<div class="bg-base-200 relative w-full h-full rounded-md">
-		<div class="flex items-center justify-center h-full">
+		<img
+			src={video.avatar}
+			alt=""
+			class="absolute inset-0 w-24 md:w-24 mask mask-squircle object-cover m-auto" />
+		<div class="absolute inset-0">
+			<video id={`screen-${video._id}`} autoplay muted class="rounded-md w-full h-full" />
 			<div
-				class="w-24 md:w-24 mask mask-squircle ring ring-primary ring-offset-base-100 ring-offset-2">
-				<img src={video.avatar} alt="" />
+				use:draggable={{ bounds: 'parent' }}
+				class={!$is_sharing_screen
+					? 'transition-all absolute w-full bottom-0 left-0 h-full'
+					: 'transition-all absolute w-1/4 bottom-0 right-0'}>
+				<video 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" />
+			<div class="absolute left-2 bottom-2 rounded-md dropdown">
+				<label tabindex="0" class="btn btn-sm normal-case">@{video.username}</label>
+				<!-- <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52">
+					<li>
+						<a on:click={() => toggleMod()}
+							><IconChatMod /> {sender?.role === 'Mod' ? 'Remove Mod' : 'Grant Mod'}
+						</a>
+					</li>
+					<li>
+						<a on:click={() => toggleGuest()}><IconChatGuest /> Revoke Guest </a>
+					</li>
+				</ul> -->
 			</div>
-			{#if video.screen}
-				<video id={`screen-${video._id}`} />
-			{/if}
-			{#if video.webcam}
-				<video id={`webcam-${video._id}`} />
-			{/if}
-			{#if video.audio}
-				<video id={`audio-${video._id}`} />
-			{/if}
-		</div>
-		<div class="absolute left-2 bottom-2 rounded-md dropdown">
-			<label tabindex="0" class="btn btn-sm normal-case">@{video.username}</label>
-			<!-- <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52">
-				<li>
-					<a on:click={() => toggleMod()}
-						><IconChatMod /> {sender?.role === 'Mod' ? 'Remove Mod' : 'Grant Mod'}
-					</a>
-				</li>
-				<li>
-					<a on:click={() => toggleGuest()}><IconChatGuest /> Revoke Guest </a>
-				</li>
-			</ul> -->
 		</div>
 	</div>
 </div>
diff --git a/src/lib/components/MainDrawer/DrawerMain.svelte b/src/lib/components/MainDrawer/DrawerMain.svelte
index 28062f02..72d03155 100644
--- a/src/lib/components/MainDrawer/DrawerMain.svelte
+++ b/src/lib/components/MainDrawer/DrawerMain.svelte
@@ -25,12 +25,12 @@
 	// 	is_feature_group_chat_enabled,
 	// 	is_feature_video_responses_enabled
 	// } from '$lib/stores/remoteConfigStore'
-	import IconMageText from '$lib/assets/icons/IconMageText.svg'
-	import IconMageTextDark from '$lib/assets/icons/IconMageTextDark.svg'
-
+	import IconMageText from '$lib/assets/icons/IconMageText.svelte'
 	import { is_login_modal_open } from '$lib/stores/helperStore'
 	import { colorFromLevel, levelAndBarValueFromExp } from '$lib/utils'
 	import { onMount } from 'svelte'
+	import { isOnline } from '$lib/stores/userStore'
+	import { get } from '$lib/api'
 
 	export var nav_drawer: HTMLInputElement
 
@@ -39,17 +39,23 @@
 	let progressBarLevel = 1
 	let progressBarValue = 0
 	let progressBarColor = colorFromLevel(1)
-	let streamCount = 0
-	let hoursStreamed = 0
+	let streakCount: number = 0
+	let hoursStreamed: number = 0
 	onMount(async () => {
 		if (currentUser) {
-			let exp = currentUser.exp
+			let exp = currentUser.exp || 0
 			let levelAndBarValue = levelAndBarValueFromExp(exp)
 			progressBarLevel = levelAndBarValue.level
 			progressBarValue = levelAndBarValue.barValue
 			progressBarColor = colorFromLevel(progressBarLevel)
-			streamCount = 0 //await get(`TODO: add endpoint here`)
-			hoursStreamed = 0 //await get(`TODO: add endpoint here`)
+			// streakCount = await get(`stats/stream/streak`, {
+			// 	userId: $page.data.user?.userId,
+			// 	token: $page.data.user?.token
+			// })
+			// hoursStreamed = await get(`stats/stream/total-hours`, {
+			// 	userId: $page.data.user?.userId,
+			// 	token: $page.data.user?.token
+			// })
 		}
 	})
 </script>
@@ -61,8 +67,7 @@
 			<ul>
 				<li>
 					<a href="/browse">
-						<img class="w-20 mage-text" src={IconMageText} alt="" />
-						<img class="w-20 mage-text-dark" src={IconMageTextDark} alt="" />
+						<IconMageText />
 					</a>
 				</li>
 			</ul>
@@ -73,7 +78,7 @@
 					<div>
 						<div class="hero-content">
 							<div class="max-w-md">
-								<div class="avatar {currentUser.isOnline ? 'online' : 'offline'}">
+								<div class="avatar {$isOnline ? 'online' : 'offline'}">
 									<div
 										class="w-24 mask mask-squircle ring ring-primary ring-offset-base-100 ring-offset-2">
 										<img src={currentUser.avatar} alt="" />
@@ -88,8 +93,8 @@
 									<p class=" text-pink-500 truncate">@{currentUser.username}</p>
 								</div>
 								<IconDrawerStreak />
-								<p class="col-span-2 tooltip text-start" data-tip="{streamCount} day streak">
-									{streamCount} d
+								<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">
@@ -213,7 +218,7 @@
 
 	<footer class="mt-auto p-4">
 		<!-- <RisingStars /> -->
-		<div class="flex gap-4">
+		<div class="flex gap-4 items-center">
 			<a href="https://github.com/CodeCrowCorp" target="_blank" rel="noreferrer">
 				<IconSocialGitHub />
 			</a>
@@ -230,7 +235,7 @@
 				<img src={IconSocialDexlab} alt="" />
 			</a> -->
 		</div>
-		<p>Code Crow Corp © 2023</p>
+		<p>Code Crow © 2023</p>
 		<p class="text-gray-500">v{__VERSION__} [{env.PUBLIC_ENV}]</p>
 	</footer>
 </div>
@@ -239,4 +244,8 @@
 	progress::-webkit-progress-value {
 		background-color: var(--progress-bar-color);
 	}
+
+	.icon-color {
+		color: var(--theme-text); /* This will set the color based on the current theme */
+	}
 </style>
diff --git a/src/lib/components/MainDrawer/DrawerSmall.svelte b/src/lib/components/MainDrawer/DrawerSmall.svelte
index 43d615e9..037a7eee 100644
--- a/src/lib/components/MainDrawer/DrawerSmall.svelte
+++ b/src/lib/components/MainDrawer/DrawerSmall.svelte
@@ -14,14 +14,14 @@
 	import { env } from '$env/dynamic/public'
 	import { page } from '$app/stores'
 	import { user_role } from '$lib/stores/authStore'
-	import IconMageLogo from '$lib/assets/icons/IconMageLogo.svg'
-	import IconMageLogoDark from '$lib/assets/icons/IconMageLogoDark.svg'
-	import IconMageText from '$lib/assets/icons/IconMageText.svg'
-	import IconMageTextDark from '$lib/assets/icons/IconMageTextDark.svg'
+	import IconMageLogo from '$lib/assets/icons/IconMageLogo.svelte'
+	import IconMageText from '$lib/assets/icons/IconMageText.svelte'
 
 	import { is_login_modal_open } from '$lib/stores/helperStore'
 	import { colorFromLevel, levelAndBarValueFromExp } from '$lib/utils'
 	import { onMount } from 'svelte'
+	import { isOnline } from '$lib/stores/userStore'
+	import { get } from '$lib/api'
 
 	export var nav_drawer: HTMLInputElement
 
@@ -30,17 +30,23 @@
 	let progressBarLevel = 1
 	let progressBarValue = 0
 	let progressBarColor = colorFromLevel(1)
-	let streamCount = 0
+	let streakCount = 0
 	let hoursStreamed = 0
 	onMount(async () => {
 		if (currentUser) {
-			let exp = currentUser.exp
+			let exp = currentUser.exp || 0
 			let levelAndBarValue = levelAndBarValueFromExp(exp)
 			progressBarLevel = levelAndBarValue.level
 			progressBarValue = levelAndBarValue.barValue
 			progressBarColor = colorFromLevel(progressBarLevel)
-			streamCount = 0 //await get(`TODO: add endpoint here`)
-			hoursStreamed = 0 //await get(`TODO: add endpoint here`)
+			// streakCount = await get(`stats/stream/streak`, {
+			// 	userId: $page.data.user?.userId,
+			// 	token: $page.data.user?.token
+			// })
+			// hoursStreamed = await get(`stats/stream/total-hours`, {
+			// 	userId: $page.data.user?.userId,
+			// 	token: $page.data.user?.token
+			// })
 		}
 	})
 </script>
@@ -51,10 +57,8 @@
 			<ul>
 				<li>
 					<a href="/browse" class="md:justify-center">
-						<img class="w-20 md:w-7 mage-text hidden md:block" src={IconMageLogo} alt="" />
-						<img class="w-20 md:w-7 mage-text-dark hidden md:block" src={IconMageLogoDark} alt="" />
-						<img class="w-20 md:w-7 mage-text md:hidden" src={IconMageText} alt="" />
-						<img class="w-20 md:w-7 mage-text-dark md:hidden" src={IconMageTextDark} alt="" />
+						<IconMageLogo customClass={'w-20 md:w-7 mage-text hidden md:block'} />
+						<IconMageText customClass={'w-20 md:w-7 mage-text md:hidden'} />
 					</a>
 				</li>
 			</ul>
@@ -67,7 +71,7 @@
 					<div class="md:text-center">
 						<div class="hero-content">
 							<div class="max-w-md">
-								<div class="avatar {currentUser.isOnline ? 'online' : 'offline'}">
+								<div class="avatar {$isOnline ? 'online' : 'offline'}">
 									<div
 										class="w-24 md:w-12 mask mask-squircle ring ring-primary ring-offset-base-100 ring-offset-2">
 										<img src={currentUser.avatar} alt="" />
@@ -82,8 +86,8 @@
 									<p class=" text-pink-500 truncate">@{currentUser.username}</p>
 								</div>
 								<IconDrawerStreak />
-								<p class="col-span-2 tooltip text-start" data-tip="{streamCount} day streak">
-									{streamCount} d
+								<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">
@@ -179,7 +183,7 @@
 				<IconSocialTwitter />
 			</a>
 		</div>
-		<p>Code Crow Corp © 2023</p>
+		<p>Code Corp © 2023</p>
 		<p class="text-gray-500">v{__VERSION__} [{env.PUBLIC_ENV}]</p>
 	</footer>
 </div>
diff --git a/src/lib/components/Profile/Elements/SubscriberItem.svelte b/src/lib/components/Profile/Elements/SubscriberItem.svelte
index 9f779619..55c96449 100644
--- a/src/lib/components/Profile/Elements/SubscriberItem.svelte
+++ b/src/lib/components/Profile/Elements/SubscriberItem.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { page } from '$app/stores'
 	import IconMore from '$lib/assets/icons/IconMore.svelte'
 	export let subscriberItem: any
 </script>
@@ -7,19 +8,21 @@
 	<div class="flex">
 		<div class="avatar">
 			<div class="w-16 rounded-full">
-				<img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" alt="" />
+				<img src={subscriberItem.avatar} alt="" />
 			</div>
 		</div>
 
 		<div class="flex flex-col justify-center pl-4 text-start">
-			<p class="text-black">DisplayName</p>
-			<p class="text-secondary">Username</p>
+			<p class="text-black">{subscriberItem.displayName}</p>
+			<p class="text-secondary">{subscriberItem.username}</p>
 		</div>
 	</div>
 
 	<div class="flex flex-row items-center">
 		<div>
-			<button class="btn rounded-3xl py-1 btn-sm btn-secondary">Follow</button>
+			<button
+				class="btn rounded-3xl py-1 btn-sm btn-secondary"
+				disabled={subscriberItem?._id === $page.data.user?.userId}>Subscribe</button>
 		</div>
 
 		<div class="dropdown dropdown-end">
@@ -30,9 +33,9 @@
 				<li>
 					<span>Profile</span>
 				</li>
-				<li>
+				<!-- <li>
 					<span>Message</span>
-				</li>
+				</li> -->
 			</ul>
 		</div>
 	</div>
diff --git a/src/lib/components/Profile/TopSection.svelte b/src/lib/components/Profile/TopSection.svelte
index cb2c844b..aeeafdfd 100644
--- a/src/lib/components/Profile/TopSection.svelte
+++ b/src/lib/components/Profile/TopSection.svelte
@@ -42,7 +42,9 @@
 					{#await isSubscribed}
 						<button class="btn btn-secondary" disabled>Unsubscribe</button>
 					{:then value}
-						<button class="btn btn-secondary" disabled={profile?._id === $page.data.user?.userId}
+						<button
+							class="btn btn-secondary"
+							disabled={profile?._id === $page.data.user?.userId || !currentUser}
 							>{value.isSubscriber ? 'Subscribe' : 'Unsubscribe'}</button>
 					{/await}
 					<!--TODO: open sponsor dialog-->
@@ -53,7 +55,7 @@
 				<button
 					class="btn btn-circle"
 					tabindex="0"
-					disabled={currentUser.username !== $page.params.username}>
+					disabled={currentUser?.username !== $page.params.username}>
 					<IconMore />
 				</button>
 				<ul tabindex="-1" class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52">
diff --git a/src/lib/components/Search/ItemSearch.svelte b/src/lib/components/Search/ItemSearch.svelte
deleted file mode 100644
index 3653aa80..00000000
--- a/src/lib/components/Search/ItemSearch.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-	export let channel: any
-	function timeSince(date: string) {
-		let created: any = new Date(date)
-		let currentDate: any = new Date(Date.now())
-		var seconds = Math.floor((currentDate - created) / 1000)
-		var interval = seconds / 31536000
-		if (interval > 1) {
-			return Math.floor(interval) + ' years ago'
-		}
-		interval = seconds / 2592000
-		if (interval > 1) {
-			return Math.floor(interval) + ' months ago'
-		}
-		interval = seconds / 86400
-		if (interval > 1) {
-			return Math.floor(interval) + ' days ago'
-		}
-		interval = seconds / 3600
-		if (interval > 1) {
-			return Math.floor(interval) + ' hours ago'
-		}
-		interval = seconds / 60
-		if (interval > 1) {
-			return Math.floor(interval) + ' minutes ago'
-		}
-		return Math.floor(seconds) + ' seconds ago'
-	}
-</script>
-
-<div class="flex flex-col md:flex-row gap-4">
-	<a href={`/channel/${channel._id}`} class=" md:w-96 bg-gray-200">
-		<img
-			loading="lazy"
-			src={channel.thumbnail || 'https://via.placeholder.com/300/09f/fff.png'}
-			class="w-full max-h-64 border-none rounded shadow"
-			alt="" />
-	</a>
-
-	<div class="md:basis-96 flex-auto flex flex-col gap-2">
-		{#if Array.isArray(channel.category)}
-			<div class="flex flex-wrap gap-2">
-				{#each channel.category as cat}
-					<div class="badge badge-primary">{cat}</div>
-				{/each}
-			</div>
-		{/if}
-
-		<a href={`/channel/${channel._id}`}>
-			<h2 class="text-xl font-semibold dark:text-white">
-				{channel.title || ''}
-			</h2>
-		</a>
-
-		<p class="text-sm font-light">
-			{channel.memberCount || 0} Views - {timeSince(channel.createdAt)}
-		</p>
-
-		<a href={`/channel/${channel._id}`} class="flex items-center">
-			<div class="avatar">
-				<div class="w-8 rounded-full">
-					<img
-						loading="lazy"
-						src={channel.avatar || 'https://via.placeholder.com/300/09f/fff.png'}
-						alt="avater" />
-				</div>
-			</div>
-			<p class="ml-2 text-sm font-light text-center">{channel.createdBy || ''}</p>
-		</a>
-
-		<p class="text-sm font-light">
-			{channel.description ? channel.description.slice(0, 100) : ''}
-		</p>
-
-		{#if Array.isArray(channel.tags)}
-			<div class="flex flex-wrap gap-2">
-				{#each channel.tags as tag}
-					<div class="badge">{tag}</div>
-				{/each}
-			</div>
-		{/if}
-	</div>
-</div>
diff --git a/src/lib/components/Search/ItemSearchChannel.svelte b/src/lib/components/Search/ItemSearchChannel.svelte
new file mode 100644
index 00000000..b049420d
--- /dev/null
+++ b/src/lib/components/Search/ItemSearchChannel.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+	import IconViewers from '$lib/assets/icons/IconViewers.svelte'
+	import { category_list } from '$lib/stores/channelStore'
+	import { timeSince } from '$lib/utils'
+
+	export let item: any
+</script>
+
+<ul class="menu bg-base-100 rounded-md">
+	<li>
+		<a href={`/channel/${item._id}`}>
+			<div class="flex flex-col md:flex-row gap-4 w-full">
+				<div class="min-w-[20rem]">
+					<div class="absolute flex gap-2 m-2">
+						{#if item.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 text-white border-none"
+								tabindex="-1">
+								<IconViewers />
+								{item.memberCount || '0'}
+							</label>
+						</div>
+					</div>
+					<img
+						loading="lazy"
+						src={item.thumbnail ? item.thumbnail : '/placeholder/programming-placeholder.jpg'}
+						class="h-64 w-full object-cover rounded shadow"
+						alt="" />
+				</div>
+				<div class="flex-auto flex flex-col gap-2">
+					<div class="flex flex-wrap">
+						{#if item.category && item.category.length}
+							{#each item.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>
+
+					<h2 class="text-xl font-semibold">
+						{item.title || ''}
+					</h2>
+
+					<h2 class="text-md">
+						{item.description || ''}
+					</h2>
+
+					<div class="flex items-center">
+						<div class="avatar">
+							<div class="w-12 mask mask-squircle">
+								<img src={item.avatar} alt="" />
+							</div>
+						</div>
+						<a class="ml-2 link link-secondary" href="/profile/{item.createdByUsername}"
+							>@{item.createdByUsername || ''}</a>
+					</div>
+
+					<div class="flex flex-wrap gap-2 my-1">
+						{#if item.tags && item.tags.length}
+							{#each item.tags as tag}
+								<div>
+									<span
+										class="badge badge-md text-primary bg-gray-200 rounded-md font-semibold border-none"
+										>{tag}</span>
+								</div>
+							{/each}
+						{/if}
+					</div>
+
+					<p class="text-sm font-light">
+						{item.viewCount || 0} Views - {timeSince(item.createdAt)}
+					</p>
+				</div>
+			</div>
+		</a>
+	</li>
+</ul>
diff --git a/src/lib/components/Search/ItemSearchUser.svelte b/src/lib/components/Search/ItemSearchUser.svelte
new file mode 100644
index 00000000..9c69021a
--- /dev/null
+++ b/src/lib/components/Search/ItemSearchUser.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import IconLink from '$lib/assets/icons/IconLink.svelte'
+	import { category_list } from '$lib/stores/channelStore'
+
+	export let item: any
+</script>
+
+<ul class="menu bg-base-100 rounded-md">
+	<li>
+		<a href={`/profile/${item.username}`}>
+			<div class="flex-col md:flex-row gap-4 w-full contents">
+				<div class="max-w-md">
+					<div class="avatar">
+						<div class="mask mask-squircle">
+							<img loading="lazy" src={item.avatar} alt="" />
+						</div>
+					</div>
+				</div>
+				<div class="flex-auto flex flex-col gap-2">
+					<div class="flex flex-wrap">
+						{#if item.category && item.category.length}
+							{#each item.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>
+					<h2 class="text-xl font-semibold">
+						{item.displayName || ''}
+					</h2>
+					<div class="flex items-center">
+						<a class="link link-secondary" href="/profile/{item.username}"
+							>@{item.username || ''}</a>
+					</div>
+					<h2 class="text-md">
+						{item.bio || ''}
+					</h2>
+					{#if item.website}
+						<div class="flex gap-2">
+							<IconLink />
+							<a class="link link-info" href={item.website} target="_blank" rel="noreferrer"
+								>{item.website || ''}</a>
+						</div>
+					{/if}
+				</div>
+			</div>
+		</a>
+	</li>
+</ul>
diff --git a/src/lib/components/Search/ItemSection.svelte b/src/lib/components/Search/ItemSection.svelte
deleted file mode 100644
index 3653aa80..00000000
--- a/src/lib/components/Search/ItemSection.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-	export let channel: any
-	function timeSince(date: string) {
-		let created: any = new Date(date)
-		let currentDate: any = new Date(Date.now())
-		var seconds = Math.floor((currentDate - created) / 1000)
-		var interval = seconds / 31536000
-		if (interval > 1) {
-			return Math.floor(interval) + ' years ago'
-		}
-		interval = seconds / 2592000
-		if (interval > 1) {
-			return Math.floor(interval) + ' months ago'
-		}
-		interval = seconds / 86400
-		if (interval > 1) {
-			return Math.floor(interval) + ' days ago'
-		}
-		interval = seconds / 3600
-		if (interval > 1) {
-			return Math.floor(interval) + ' hours ago'
-		}
-		interval = seconds / 60
-		if (interval > 1) {
-			return Math.floor(interval) + ' minutes ago'
-		}
-		return Math.floor(seconds) + ' seconds ago'
-	}
-</script>
-
-<div class="flex flex-col md:flex-row gap-4">
-	<a href={`/channel/${channel._id}`} class=" md:w-96 bg-gray-200">
-		<img
-			loading="lazy"
-			src={channel.thumbnail || 'https://via.placeholder.com/300/09f/fff.png'}
-			class="w-full max-h-64 border-none rounded shadow"
-			alt="" />
-	</a>
-
-	<div class="md:basis-96 flex-auto flex flex-col gap-2">
-		{#if Array.isArray(channel.category)}
-			<div class="flex flex-wrap gap-2">
-				{#each channel.category as cat}
-					<div class="badge badge-primary">{cat}</div>
-				{/each}
-			</div>
-		{/if}
-
-		<a href={`/channel/${channel._id}`}>
-			<h2 class="text-xl font-semibold dark:text-white">
-				{channel.title || ''}
-			</h2>
-		</a>
-
-		<p class="text-sm font-light">
-			{channel.memberCount || 0} Views - {timeSince(channel.createdAt)}
-		</p>
-
-		<a href={`/channel/${channel._id}`} class="flex items-center">
-			<div class="avatar">
-				<div class="w-8 rounded-full">
-					<img
-						loading="lazy"
-						src={channel.avatar || 'https://via.placeholder.com/300/09f/fff.png'}
-						alt="avater" />
-				</div>
-			</div>
-			<p class="ml-2 text-sm font-light text-center">{channel.createdBy || ''}</p>
-		</a>
-
-		<p class="text-sm font-light">
-			{channel.description ? channel.description.slice(0, 100) : ''}
-		</p>
-
-		{#if Array.isArray(channel.tags)}
-			<div class="flex flex-wrap gap-2">
-				{#each channel.tags as tag}
-					<div class="badge">{tag}</div>
-				{/each}
-			</div>
-		{/if}
-	</div>
-</div>
diff --git a/src/lib/components/Search/ListSearch.svelte b/src/lib/components/Search/ListSearch.svelte
deleted file mode 100644
index b9269c3e..00000000
--- a/src/lib/components/Search/ListSearch.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-	import LastItemInViewport from '$lib/actions/LastItemInViewport'
-	import ItemSearch from '$lib/components/Search/ItemSearch.svelte'
-	import ItemSection from '$lib/components/Search/ItemSection.svelte'
-	export let channels: any = [],
-		loadingMoreChannels: boolean = false,
-		isSearchPage: boolean = false
-</script>
-
-<div class="flex flex-col gap-4 px-4 md:px-24 justify-around">
-	{#each channels as channel}
-		{#if channel.isPrivate !== true}
-			{#if isSearchPage}
-				<ItemSearch {channel} />
-			{:else}
-				<ItemSection {channel} />
-			{/if}
-		{/if}
-	{:else}
-		<h2>No records found</h2>
-	{/each}
-	{#if loadingMoreChannels}
-		<div class="flex justify-center items-center pb-8">
-			<div
-				class="w-12 h-12 rounded-full animate-spin border border-solid border-black dark:border-white border-t-transparent" />
-		</div>
-	{/if}
-	<span use:LastItemInViewport on:loadMore />
-</div>
diff --git a/src/lib/components/Search/LoadingItemSearch.svelte b/src/lib/components/Search/LoadingItemSearch.svelte
deleted file mode 100644
index c3467eb0..00000000
--- a/src/lib/components/Search/LoadingItemSearch.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-	import IconBrowseItemPlay from '$lib/assets/icons/browse/IconBrowseItemPlay.svelte'
-	import IconBrowseItemUser from '$lib/assets/icons/browse/IconBrowseItemUser.svelte'
-</script>
-
-<div
-	role="status"
-	class="max-w-sm p-4 border border-gray-200 rounded shadow md:p-6 dark:border-gray-700 mx-3">
-	<div class="flex items-center justify-center h-48 mb-4 bg-gray-300 rounded dark:bg-gray-700">
-		<IconBrowseItemPlay />
-	</div>
-	<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4" />
-	<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
-	<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
-	<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
-	<div class="flex items-center mt-4 space-x-3">
-		<IconBrowseItemUser />
-		<div>
-			<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2" />
-			<div class="w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
-		</div>
-	</div>
-	<span class="sr-only">Loading...</span>
-</div>
diff --git a/src/lib/components/Search/LoadingItemSearchChannel.svelte b/src/lib/components/Search/LoadingItemSearchChannel.svelte
new file mode 100644
index 00000000..d218e5f3
--- /dev/null
+++ b/src/lib/components/Search/LoadingItemSearchChannel.svelte
@@ -0,0 +1,37 @@
+<script>
+	import IconBrowseItemPlay from '$lib/assets/icons/browse/IconBrowseItemPlay.svelte'
+	import IconBrowseItemUser from '$lib/assets/icons/browse/IconBrowseItemUser.svelte'
+</script>
+
+<div
+	role="status"
+	class="w-full p-4 border border-gray-200 rounded-md shadow md:p-6 dark:border-gray-700">
+	<div class="flex flex-col md:flex-row gap-4 w-full">
+		<div class="min-w-[20rem]">
+			<div class="flex items-center justify-center h-64 bg-gray-300 rounded-md dark:bg-gray-700">
+				<IconBrowseItemPlay />
+			</div>
+		</div>
+		<div class="flex-auto flex flex-col gap-2">
+			<div class="flex gap-2 mb-2.5">
+				<div class="h-8 bg-gray-200 rounded-full dark:bg-gray-700 w-8" />
+				<div class="h-8 bg-gray-200 rounded-full dark:bg-gray-700 w-8" />
+				<div class="h-8 bg-gray-200 rounded-full dark:bg-gray-700 w-8" />
+				<div class="h-8 bg-gray-200 rounded-full dark:bg-gray-700 w-8" />
+			</div>
+			<div class="h-3 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-2.5" />
+			<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
+			<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2" />
+			<div class="flex items-center space-x-3">
+				<IconBrowseItemUser />
+				<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32" />
+			</div>
+			<div class="flex gap-2 mb-2.5">
+				<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-16" />
+				<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-16" />
+			</div>
+			<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-32" />
+			<span class="sr-only">Loading...</span>
+		</div>
+	</div>
+</div>
diff --git a/src/lib/components/Search/LoadingItemSearchUser.svelte b/src/lib/components/Search/LoadingItemSearchUser.svelte
new file mode 100644
index 00000000..9b5a0a17
--- /dev/null
+++ b/src/lib/components/Search/LoadingItemSearchUser.svelte
@@ -0,0 +1,33 @@
+<script>
+	import IconBrowseItemUser from '$lib/assets/icons/browse/IconBrowseItemUser.svelte'
+</script>
+
+<div
+	role="status"
+	class="w-full p-4 border border-gray-200 rounded-md shadow md:p-6 dark:border-gray-700">
+	<div class="flex flex-col md:flex-row gap-4 w-full">
+		<div class="min-w-[10rem]">
+			<div
+				class="flex items-center justify-center h-40 border border-gray-200 rounded-md shadow md:p-6 dark:border-gray-700">
+				<IconBrowseItemUser />
+			</div>
+		</div>
+		<div class="flex-auto flex flex-col gap-2">
+			<div class="flex gap-2 mb-2.5">
+				<div class="h-8 bg-gray-200 rounded-full dark:bg-gray-700 w-8" />
+				<div class="h-8 bg-gray-200 rounded-full dark:bg-gray-700 w-8" />
+				<div class="h-8 bg-gray-200 rounded-full dark:bg-gray-700 w-8" />
+				<div class="h-8 bg-gray-200 rounded-full dark:bg-gray-700 w-8" />
+			</div>
+			<div class="h-3 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-2.5" />
+			<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-40 mb-2.5" />
+			<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
+			<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-2.5" />
+			<div class="flex gap-2 mb-2.5">
+				<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-8" />
+				<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-20" />
+			</div>
+			<span class="sr-only">Loading...</span>
+		</div>
+	</div>
+</div>
diff --git a/src/lib/components/Search/LoadingItemSection.svelte b/src/lib/components/Search/LoadingItemSection.svelte
deleted file mode 100644
index c3467eb0..00000000
--- a/src/lib/components/Search/LoadingItemSection.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-	import IconBrowseItemPlay from '$lib/assets/icons/browse/IconBrowseItemPlay.svelte'
-	import IconBrowseItemUser from '$lib/assets/icons/browse/IconBrowseItemUser.svelte'
-</script>
-
-<div
-	role="status"
-	class="max-w-sm p-4 border border-gray-200 rounded shadow md:p-6 dark:border-gray-700 mx-3">
-	<div class="flex items-center justify-center h-48 mb-4 bg-gray-300 rounded dark:bg-gray-700">
-		<IconBrowseItemPlay />
-	</div>
-	<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4" />
-	<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
-	<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
-	<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
-	<div class="flex items-center mt-4 space-x-3">
-		<IconBrowseItemUser />
-		<div>
-			<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2" />
-			<div class="w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
-		</div>
-	</div>
-	<span class="sr-only">Loading...</span>
-</div>
diff --git a/src/lib/stores/adminStore.ts b/src/lib/stores/adminStore.ts
deleted file mode 100644
index bf62dd32..00000000
--- a/src/lib/stores/adminStore.ts
+++ /dev/null
@@ -1,163 +0,0 @@
-import { env } from '$env/dynamic/public'
-
-async function uploadFile({ file, url }: { file: File; url: string }) {
-	return await fetch(url, {
-		method: 'PUT',
-		headers: {
-			'x-amz-acl': 'public-read',
-			'Content-Type': file.type
-		}, //reportProgress: true, observe: 'events',
-		body: JSON.stringify(file)
-	})
-		.then((response) => response.json())
-		.catch((err) => console.log('err', err))
-}
-
-async function getUserRole(hooks_call = false, headers = {}) {
-	if (hooks_call) {
-		return await fetch(`${env.PUBLIC_API_URL}/roles/role-mapping`, {
-			method: 'GET',
-			headers
-		}).then((response) => response.json())
-	} else {
-		return await fetch(`${env.PUBLIC_API_URL}/roles/role-mapping`, {
-			method: 'GET'
-		}).then((response) => response.json())
-	}
-}
-
-async function getRoles(hooks_call = false, headers = {}) {
-	if (hooks_call) {
-		return await fetch(`${env.PUBLIC_API_URL}/roles`, {
-			method: 'GET'
-		}).then((response) => response.json())
-	} else {
-		return await fetch(`${env.PUBLIC_API_URL}/roles`, {
-			method: 'GET'
-		}).then((response) => response.json())
-	}
-}
-
-async function getAdmins({ roleId }: { roleId: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/roles/users?roleId=${roleId}`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function addAdmin({ userId, roleId }: { userId: string; roleId: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/roles/role-mapping`, {
-		method: 'POST',
-		body: JSON.stringify({ roleId, userId })
-	}).then((response) => response.json())
-}
-
-async function removeAdmin({ userId, roleId }: { userId: string; roleId: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/roles/role-mapping`, {
-		method: 'PATCH',
-		body: JSON.stringify({ roleId, userId })
-	}).then((response) => response.json())
-}
-
-async function getUploadURL({
-	fileName,
-	fileType,
-	bucketName
-}: {
-	fileName: string
-	fileType: string
-	bucketName: string
-}) {
-	return await fetch(`${env.PUBLIC_API_URL}/attachments/url`, {
-		method: 'PUT',
-		body: JSON.stringify({ fileName, fileType, bucketName })
-	}).then((response) => response.json())
-}
-
-async function getVideos({
-	filter = '',
-	sortOrder = 'asc',
-	pageNumber = 0,
-	pageSize = 5
-}: {
-	filter: string
-	sortOrder: string
-	pageNumber: number
-	pageSize: number
-}) {
-	return await fetch(
-		`${env.PUBLIC_API_URL}/videos?admin=1&filter=${filter}&skip=${pageNumber}&limit=${pageSize}&sort=${sortOrder}`,
-		{
-			method: 'GET'
-		}
-	).then((response) => response.json())
-}
-
-async function getAllVideos() {
-	return await fetch(`${env.PUBLIC_API_URL}/videos/all?admin=1`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function getChannels() {
-	return await fetch(`${env.PUBLIC_API_URL}/channels`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function getChannelLiveStreams({ id }: { id: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/channels/live-streams?channelId=${id}`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function getMonthLiveStreaming() {
-	return await fetch(`${env.PUBLIC_API_URL}/streams`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function createLegalDoc({
-	title,
-	createdAt,
-	pdf
-}: {
-	title: string
-	createdAt: string
-	pdf: string
-}) {
-	return await fetch(`${env.PUBLIC_API_URL}/legal`, {
-		method: 'POST',
-		body: JSON.stringify({ title, createdAt, pdf })
-	}).then((response) => response.json())
-}
-
-async function getLegalDocs() {
-	return await fetch(`${env.PUBLIC_API_URL}/legal/get/objects?bucketName=legal`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function setUserBan({ id, isBanned }: { id: string; isBanned: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/users/ban?userId=${id}`, {
-		method: 'PATCH',
-		body: JSON.stringify({ isBanned })
-	}).then((response) => response.json())
-}
-
-export {
-	uploadFile,
-	getUserRole,
-	getRoles,
-	getAdmins,
-	addAdmin,
-	removeAdmin,
-	getUploadURL,
-	getVideos,
-	getAllVideos,
-	getChannels,
-	getChannelLiveStreams,
-	getMonthLiveStreaming,
-	createLegalDoc,
-	getLegalDocs,
-	setUserBan
-}
diff --git a/src/lib/stores/channelStore.ts b/src/lib/stores/channelStore.ts
index a69b50a6..6e55189e 100644
--- a/src/lib/stores/channelStore.ts
+++ b/src/lib/stores/channelStore.ts
@@ -1,5 +1,4 @@
-import { get, writable, type Writable } from 'svelte/store'
-import { env } from '$env/dynamic/public'
+import { writable, type Writable } from 'svelte/store'
 
 export const category_list: Writable<any> = writable({})
 export const tags: Writable<any> = writable([])
@@ -11,337 +10,3 @@ export const category_assets: Writable<{
 export const is_chat_drawer_open: Writable<boolean> = writable(false)
 export const is_chat_drawer_destroy: Writable<boolean> = writable(false)
 export const was_chat_drawer_closed: Writable<boolean> = writable(false)
-
-async function createChannel({
-	title,
-	description,
-	thumbnail,
-	category,
-	tags,
-	isPrivate = false,
-	user,
-	channelType
-}: {
-	title: string
-	description: string
-	thumbnail: string
-	category: string[]
-	tags: string[]
-	isPrivate: boolean
-	user: any
-	channelType: string
-}) {
-	return await fetch(`${env.PUBLIC_API_URL}/channel`, {
-		method: 'POST',
-		body: JSON.stringify({
-			title,
-			description,
-			thumbnail,
-			category,
-			tags,
-			isPrivate,
-			user: user._id,
-			createdBy: user.displayName,
-			avatar: user.avatar,
-			channelType
-		})
-	}).then(async (response) => {
-		const res = await response.json()
-		if (channelType === 'channel') {
-			await addHostChannelToUser({ hostChannelId: res.channel._id })
-		}
-		return res
-	})
-}
-
-async function deleteChannel({ channelId }: { channelId: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/channels/${channelId}?bucketName=attachments`, {
-		method: 'DELETE'
-	})
-}
-
-async function getChannel({ channelId }: { channelId: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/channel?channelId=${channelId}`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function addChannelToUser({ channelId }: { channelId: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/users/channels?channelId=${channelId}`, {
-		method: 'GET'
-	}).then(async (response) => {
-		const res = await response.json()
-		//TODO: update user in authStore
-	})
-}
-
-async function removeChannelFromUser({ channelId, userId }: { channelId: string; userId: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/users/channels?channelId=${channelId}`, {
-		method: 'DELETE'
-	}).then(async (response) => {
-		const res = await response.json()
-		//TODO: update user in authStore
-		//if (this.user == userId) this.authService.setUser(userUpdate)
-	})
-}
-
-async function addHostChannelToUser({ hostChannelId }: { hostChannelId: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/users/host-channels?hostChannelId=${hostChannelId}`, {
-		method: 'PUT'
-	}).then(async (response) => {
-		const res = await response.json()
-		//TODO: update user in authStore
-	})
-}
-
-async function removeHostChannelFromUser({ hostChannelId }: { hostChannelId: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/users/host-channels?hostChannelId=${hostChannelId}`, {
-		method: 'DELETE'
-	}).then(async (response) => {
-		const res = await response.json()
-		//TODO: update user in authStore
-	})
-}
-
-async function blockUserFromChannel({ channelId, userId }: { channelId: string; userId: string }) {
-	return await fetch(
-		`${env.PUBLIC_API_URL}/channels/blocked-users?channelId=${channelId}&userId=${userId}`,
-		{
-			method: 'PATCH'
-		}
-	)
-}
-
-async function unblockUserFromChannel({
-	channelId,
-	userId
-}: {
-	channelId: string
-	userId: string
-}) {
-	return await fetch(
-		`${env.PUBLIC_API_URL}/channels/blocked-users?channelId=${channelId}&userId=${userId}`,
-		{
-			method: 'DELETE'
-		}
-	)
-}
-
-async function updateChannelProperties({
-	channelId,
-	updatedProperties
-}: {
-	channelId: string
-	updatedProperties: any
-}) {
-	return await fetch(`${env.PUBLIC_API_URL}/channels?channelId=${channelId}`, {
-		method: 'PATCH',
-		body: JSON.stringify(updatedProperties)
-	})
-}
-
-//TODO: fix this
-// isUserBlockedFromChannel({ userId }: { userId: string }) {
-//     return this.currentChannel.blockedUsers?.some((user) => !!(user == userId))
-// }
-
-async function addAttachments({
-	channelId,
-	attachmentUrl
-}: {
-	channelId: string
-	attachmentUrl: string
-}) {
-	return await fetch(
-		`${
-			env.PUBLIC_API_URL
-		}/channels/attachments?channelId=${channelId}&encodeURIComponent=${encodeURIComponent(
-			attachmentUrl
-		)}`,
-		{
-			method: 'PUT'
-		}
-	)
-}
-
-async function deleteAttachment({
-	channelId,
-	attachmentUrl
-}: {
-	channelId: string
-	attachmentUrl: string
-}) {
-	return await fetch(
-		`${
-			env.PUBLIC_API_URL
-		}/channels/attachments?channelId=${channelId}&encodeURIComponent=${encodeURIComponent(
-			attachmentUrl
-		)}`,
-		{
-			method: 'DELETE'
-		}
-	)
-}
-
-async function addChannelNotificationSubscriber({
-	channelId,
-	userId
-}: {
-	channelId: string
-	userId: string
-}) {
-	return await fetch(
-		`${env.PUBLIC_API_URL}/channels/notification-subscribers?channelId=${channelId}&userId=${userId}`,
-		{
-			method: 'PUT'
-		}
-	)
-}
-
-async function removeChannelNotificationSubscriber({
-	channelId,
-	userId
-}: {
-	channelId: string
-	userId: string
-}) {
-	return await fetch(
-		`${env.PUBLIC_API_URL}/channels/notification-subscribers?channelId=${channelId}&userId=${userId}`,
-		{
-			method: 'DELETE'
-		}
-	)
-}
-
-async function deleteMembers({ channelId }: { channelId: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/channel-members?channelId=${channelId}`, {
-		method: 'DELETE'
-	})
-}
-
-async function getMyChannels({ skip = 0, limit = 50 }: { skip: number; limit: number }) {
-	return await fetch(`${env.PUBLIC_API_URL}/channels/me/hosted?skip=${skip}&limit=${limit}`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function getChannelsByUserId({
-	userId,
-	searchQuery = '',
-	skip = 0,
-	limit = 50
-}: {
-	userId: string
-	searchQuery: string
-	skip?: number
-	limit?: number
-}) {
-	return await fetch(
-		`${env.PUBLIC_API_URL}/channels/user?userId=${userId}&searchQuery=${searchQuery}&skip=${skip}&limit=${limit}`,
-		{
-			method: 'GET'
-		}
-	).then((response) => response.json())
-}
-
-async function getFavChannels({ skip = 0, limit = 50 }: { skip: number; limit: number }) {
-	return await fetch(`${env.PUBLIC_API_URL}/channels/me/fav?skip=${skip}&limit=${limit}`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function getMostActiveChannels({ skip = 0, limit = 50 }: { skip: number; limit: number }) {
-	return await fetch(`${env.PUBLIC_API_URL}/channels/most-active?skip=${skip}&limit=${limit}`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function getWeeklyChannels({ skip = 0, limit = 50 }: { skip: number; limit: number }) {
-	return await fetch(`${env.PUBLIC_API_URL}/channels/weekly?skip=${skip}&limit=${limit}`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function getChannels({ skip = 0, limit = 50 }: { skip: number; limit: number }) {
-	return await fetch(`${env.PUBLIC_API_URL}/channels?skip=${skip}&limit=${limit}`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function toggleNotifications({ channel, userId }: { channel: any; userId: string }) {
-	if (channel?.notificationSubscribers?.includes(userId)) {
-		await removeChannelFromUser({ channelId: channel._id, userId })
-		await removeChannelNotificationSubscriber({
-			channelId: channel._id,
-			userId
-		})
-	} else {
-		await addChannelToUser({ channelId: channel._id })
-		await addChannelNotificationSubscriber({
-			channelId: channel._id,
-			userId
-		})
-	}
-}
-
-// async sendToken({ channelId }) {
-//     await lastValueFrom(this.http
-//         .get(`${env.PUBLIC_API_URL}/token/sendToken?channelId=${channelId}`, {
-//             responseType: 'text'
-//         })).then((res) => {
-//             return this.snackBar.open('You received 1 recursion Token', null, {
-//                 duration: 2500
-//             })
-//         }).catch((err) => {
-//             console.log('Err', err)
-//         })
-// }
-
-async function getTechListJson() {
-	if (get(category_list).length < 1) {
-		let gameAssets: any = await fetch(`/svg-json/image_urls.json`, {
-			method: 'GET'
-		})
-		if (gameAssets.ok) {
-			gameAssets = await gameAssets.json()
-		}
-		category_list.set(gameAssets)
-		return gameAssets
-	}
-}
-
-async function getTags() {
-	return await fetch(`${env.PUBLIC_API_URL}/tags`, {
-		method: 'GET'
-	}).then(async (response) => {
-		const res = await response.json()
-		tags.set(res)
-	})
-}
-
-export {
-	createChannel,
-	deleteChannel,
-	getChannel,
-	addChannelToUser,
-	removeChannelFromUser,
-	addHostChannelToUser,
-	removeHostChannelFromUser,
-	blockUserFromChannel,
-	unblockUserFromChannel,
-	updateChannelProperties,
-	addAttachments,
-	deleteAttachment,
-	addChannelNotificationSubscriber,
-	removeChannelNotificationSubscriber,
-	deleteMembers,
-	getMyChannels,
-	getChannelsByUserId,
-	getFavChannels,
-	getMostActiveChannels,
-	getWeeklyChannels,
-	getChannels,
-	toggleNotifications,
-	getTechListJson,
-	getTags
-}
diff --git a/src/lib/stores/chatStore.ts b/src/lib/stores/chatStore.ts
deleted file mode 100644
index 82d1d4fa..00000000
--- a/src/lib/stores/chatStore.ts
+++ /dev/null
@@ -1,369 +0,0 @@
-import { writable, type Writable } from 'svelte/store'
-import { env } from '$env/dynamic/public'
-
-let lastMessageSendDate: Date = new Date()
-let skip = 0
-let limit = 100
-
-export const searchQuery: Writable<string> = writable('')
-export const chats: Writable<[]> = writable([])
-export const messages: Writable<[]> = writable([])
-export const activeTabs: Writable<[]> = writable([])
-export const isShowingSearchResults: Writable<boolean> = writable(false)
-
-function resetSkipLimit() {
-	skip = 0
-	limit = 100
-}
-
-// function deleteMessage({ message, channelId }: { message: any; channelId: string }) {
-// 	emitDeleteMessageToChannel({ channelId, message: JSON.stringify(message) })
-// }
-
-// function deleteAllMessages({ channelId }: { channelId: string }) {
-// 	emitDeleteAllMessagesToChannel({ channelId })
-// }
-
-async function postFile({ channelId, fileToUpload }: { channelId: string; fileToUpload: File }) {
-	const formData: FormData = new FormData()
-	formData.append('file', fileToUpload, fileToUpload.name)
-	formData.append('channelId', channelId)
-	formData.append('name', fileToUpload.name)
-	formData.append('type', fileToUpload.type)
-	return await fetch(`${env.PUBLIC_API_URL}/attachments/file`, {
-		method: 'POST',
-		body: JSON.stringify(formData)
-	})
-}
-
-async function deleteFile({ key }: { key: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/attachments/file?key=${key}`, {
-		method: 'DELETE'
-	})
-}
-
-async function getTrendingGifs() {
-	return await fetch(`${env.PUBLIC_API_URL}/giphy/trending`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function searchGifs({ query }: { query: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/giphy/search?${query}`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function getMessages({ chat, chatType }: { chat: any; chatType: string }) {
-	const data = { limit: limit, skip: 0 }
-	if (chatType == 'channelChat') {
-		skip = skip + limit
-		data.skip = skip
-		// emitChatHistoryToChannel({ channelId: chat.channel, skip: data.skip })
-	} else if (chatType == 'oneToOneChat') {
-		data.skip = chat.skip
-	}
-}
-
-async function sendChannelMessage({ channel, attributes }: { channel: any; attributes: any }) {
-	const dateNow = new Date()
-	const diff = Math.round(Math.abs((dateNow.getTime() - lastMessageSendDate.getTime()) / 1000))
-	if (diff <= 0.7) {
-		//TODO: show alert
-		// snackBar.open('Please be courteous to other users', null, {
-		//     duration: 1000
-		// })
-	} else {
-		//TODO: get currentUser
-		const user: any = null
-		attributes.userId = user._id
-		attributes.avatar = user.avatar
-		const completeMessage = {
-			attributes: attributes,
-			body: attributes.text,
-			state: { timestamp: new Date().toISOString() },
-			user: user,
-			author: user.displayName
-		}
-		// emitMessageToChannel({ channelId: channel._id, message: completeMessage })
-		lastMessageSendDate = new Date()
-		// sendEmailAndWebNotifications({ channel: channel._id, user, attributes })
-	}
-}
-
-async function sendChatMessage({ chat, attributes }: { chat: any; attributes: any }) {
-	//TODO: get currentUser
-	const user: any = null
-	attributes.userId = user._id
-	attributes.avatar = user.avatar
-	const completeMessage = {
-		attributes: attributes,
-		body: attributes.text,
-		state: { timestamp: new Date().toISOString() },
-		user: user,
-		author: user.displayName
-	}
-	// emitChatMessage({ source1: chat.source1, source2: chat.source2, message: completeMessage })
-	lastMessageSendDate = new Date()
-	// sendEmailAndWebNotifications({ channel: chat._id, user, attributes })
-}
-
-// async function sendEmailAndWebNotifications({ channel, user, attributes }: { channel: any, user: any, attributes: any }) {
-//     let notificationSubscribers = []
-//     notificationSubscribers = channel?.notificationSubscribers?.filter((id: any) =>
-//         id == user._id ? false : true
-//     )
-//     if (notificationSubscribers?.length) {
-//         const sendNotificationsTo: any[] = []
-//         // const sendEmailsTo = []
-//         notificationSubscribers = await userStore.getUsersByIds(notificationSubscribers)
-//         notificationSubscribers.forEach((user: any) => {
-//             if (user.isWebNotificationsEnabled) sendNotificationsTo.push(user._id)
-//             // if (user.isEmailNotificationsEnabled) sendEmailsTo.push(user._id)
-//         })
-//         const body = `${user.username}: ${attributes.text}`
-//         const title = `New message at ${channel.title}`
-//         const sendToList = []
-//         // if (sendNotificationsTo.length) {
-//         //     sendToList.push(
-//         //         notificationService.sendWebNotifications({
-//         //             body,
-//         //             title,
-//         //             userIds: sendNotificationsTo
-//         //         })
-//         //     )
-//         // }
-//         // if (sendEmailsTo.length) {
-//         //   sendToList.push(notificationService.sendEmails({
-//         //     subject: `Chat notification from codecrow.io`, message: body, name: channel.title, userIds: sendEmailsTo, url: `${environment.hostUrl}/channel/${channel._id}`
-//         //   }))
-//         // }
-//         return Promise.all(sendToList)
-//     } else {
-//         return Promise.resolve()
-//     }
-// }
-
-function emitChannelChatTyping({
-	typingUser,
-	channelId = ''
-}: {
-	typingUser: any
-	channelId: string
-}) {
-	if (!channelId) {
-		// emitChatTypingByUser(typingUser)
-	} else {
-		// emitChannelChatTypingByUser({ channelId, typingUser })
-	}
-}
-
-async function createChat({ source1, source2 }: { source1: string; source2: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/chats`, {
-		method: 'PUT',
-		body: JSON.stringify({ source1, source2 })
-	}).then(async (response) => {
-		const res = await response.json()
-		//TODO: fix array push to writable
-		// chats.subscribe((value: any) => {
-		//     const doesChatExist = value.some((cht: any) => res._id === cht._id)
-		//     if (!doesChatExist) value.push(res)
-		//     return res
-		// })
-	})
-}
-
-async function getChat({ source1, source2 }: { source1: string; source2: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/chats/me?source1=${source1}&source2=${source2}`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function getChats(isRefresh = false) {
-	if (isRefresh) {
-		chats.set([])
-		resetSkipLimit()
-	}
-	return await fetch(
-		`${env.PUBLIC_API_URL}/chats?searchQuery=${searchQuery}&skip=${skip}&limit=${limit}`,
-		{
-			method: 'GET'
-		}
-	).then(async (response) => {
-		const res = await response.json()
-		//TODO: fix array push to writable
-		// if (chats.length) {
-		//     skip += limit
-		//     chats.push(...chats)
-		// } else {
-		//TODO: show alert
-		// if (searchQuery && !skip)
-		//     snackBar.open('No results with the search criteria', null, {
-		//         duration: 2000
-		//     })
-		// }
-		// return chats
-	})
-}
-
-async function deleteChat({ chat }: { chat: any }) {
-	// const dialogData: DialogData = {
-	//     title: 'Delete Chat',
-	//     message: 'Are you sure you want to delete this chat?',
-	//     okText: 'Yes',
-	//     cancelText: 'Cancel'
-	// }
-
-	// const dialogRef = dialogService.openDialog(dialogData, {
-	//     disableClose: true
-	// })
-
-	// dialogRef.afterClosed().subscribe(async (result: any) => {
-	//     if (result) {
-	await fetch(`${env.PUBLIC_API_URL}/chats?chatId=${chat._id}`, {
-		method: 'DELETE'
-	}).then(async (response) => {
-		await response.json()
-		//TODO: fix array filter to writable
-		// chats.set(chats.filter((cht) => cht.chat._id !== chat._id))
-	})
-	//     }
-	// })
-}
-
-async function updateChatProperties({
-	chatId,
-	updatedProperties
-}: {
-	chatId: string
-	updatedProperties: any
-}) {
-	return await fetch(`${env.PUBLIC_API_URL}/chats?chatId=${chatId}`, {
-		method: 'PATCH',
-		body: JSON.stringify(updatedProperties)
-	}).then((response) => response.json())
-}
-
-async function incrementUnreadMessageCount({ chatId }: { chatId: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/chats?unread/chatId=${chatId}`, {
-		method: 'PATCH'
-	})
-}
-
-async function clearUnreadMessageCount({ chatId }: { chatId: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/chats?unread/chatId=${chatId}`, {
-		method: 'DELETE'
-	})
-}
-
-async function searchChats() {
-	chats.set([])
-	return getChats(true)
-}
-
-async function openChat({ chat, friendGroup = null }: { chat: any; friendGroup: any }) {
-	if (friendGroup) {
-		return activateGroupTab(friendGroup)
-	}
-	//TODO: get writable channel id
-	// if (!chat.chat) {
-	//     const existingChat = await getChat({
-	//         source1: authStore.currentUser._id,
-	//         source2: chat._id
-	//     })
-	//     if (!existingChat) {
-	//         chat = await createChat({
-	//             source1: authStore.currentUser._id,
-	//             source2: chat._id
-	//         })
-	//     } else {
-	//         chat = existingChat
-	//     }
-	// }
-	// activateChatTab(chat)
-	// socketStore.emitChatMessage({
-	//     source1: authStore.currentUser._id,
-	//     source2: chat._id,
-	//     message: "incoming message"
-	// })
-}
-
-async function activateChatTab({ chat }: { chat: any }) {
-	// const user = authStore.currentUser
-	if (checkAlreadyExist(chat)) return
-	//TODO: get writable activeTabs
-	// activeTabs.push(chat)
-	await clearUnreadMessageCount({ chatId: chat.chat._id })
-	chat.chat.unreadMessageCount = 0
-}
-
-async function activateGroupTab({ group }: { group: any }) {
-	// const user = authStore.currentUser
-	if (checkAlreadyExist(group)) return
-	//TODO: get writable activeTabs
-	// socketStore.emitChannelSubscribeByUser(group.channelId, user._id)
-	// activeTabs.push(group)
-}
-
-function checkAlreadyExist({ item }: { item: any }) {
-	//TODO: get writable currentUser
-	// const chat = activeTabs.find((chat) => {
-	//     if (chat._id === item._id || ((chat.source1 === item.source1 && chat.source2 === item.source2) ||
-	//         (chat.source2 === item.source1 && chat.source1 === item.source2))) {
-	//         return true
-	//     }
-	// })
-	// return (activeTabs.indexOf(item) !== -1) || (chat !== undefined)
-	return null
-}
-
-async function incomingMessageActivateChatTab(data: any) {
-	// const user = authStore.currentUser
-	// const otherUser = userStore.getUserById(data.source1)
-	const chat = null
-	//TODO: get writable currentUser
-	// const existingChat = await getChat({
-	//     source1: authStore.currentUser._id,
-	//     source2: data.source1
-	// })
-	// if (!existingChat) {
-	//     chat = await createChat({
-	//         source1: authStore.currentUser._id,
-	//         source2: data.source1,
-	//         user: otherUser
-	//     })
-	// } else {
-	//     chat = existingChat
-	// }
-	// if (!user.isDoNotDisturbEnabled) {
-	//     chat.isUserRequestingToOpenChat = true
-	//     initIncomingMessage = data
-	//     activateChatTab(chat)
-	// }
-}
-
-export {
-	// deleteMessage,
-	// deleteAllMessages,
-	postFile,
-	deleteFile,
-	getTrendingGifs,
-	searchGifs,
-	getMessages,
-	sendChannelMessage,
-	sendChatMessage,
-	// emitChannelChatTypingByUser,
-	createChat,
-	getChat,
-	getChats,
-	deleteChat,
-	updateChatProperties,
-	incrementUnreadMessageCount,
-	clearUnreadMessageCount,
-	searchChats,
-	openChat,
-	activateChatTab,
-	activateGroupTab,
-	checkAlreadyExist,
-	incomingMessageActivateChatTab
-}
diff --git a/src/lib/stores/funFactStore.ts b/src/lib/stores/funFactStore.ts
deleted file mode 100644
index 5ac678b3..00000000
--- a/src/lib/stores/funFactStore.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { env } from '$env/dynamic/public'
-
-async function createFunFact({ funFactText }: { funFactText: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/fun-facts`, {
-		method: 'PUT',
-		body: JSON.stringify({ funFactText })
-	}).then((response) => response.json())
-}
-
-async function deleteFunFact({ funFactId }: { funFactId: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/fun-facts?funFactId=${funFactId}`, {
-		method: 'DELETE'
-	}).then((response) => response.json())
-}
-
-async function getRandomFunFact() {
-	return await fetch(`${env.PUBLIC_API_URL}/fun-facts/random`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function getFunFacts({
-	searchQuery,
-	skip,
-	limit
-}: {
-	searchQuery: string
-	skip: string
-	limit: string
-}) {
-	return await fetch(
-		`${env.PUBLIC_API_URL}/fun-facts?searchQuery=${searchQuery}&skip=${skip}&limit=${limit}`,
-		{
-			method: 'GET'
-		}
-	).then(async (response) => {
-		const funFactsWithCount = await response.json()
-		if (!funFactsWithCount || !funFactsWithCount['total']) {
-			if (searchQuery) {
-				// this.snackBar.open('No results with the search criteria', null, {
-				//     duration: 2000
-				// })
-			}
-		}
-		return {
-			funFacts: funFactsWithCount['funFacts'],
-			total: funFactsWithCount['total']
-		}
-	})
-}
-
-export { createFunFact, deleteFunFact, getRandomFunFact, getFunFacts }
diff --git a/src/lib/stores/helperStore.ts b/src/lib/stores/helperStore.ts
index 2d1d4115..0980c5fe 100644
--- a/src/lib/stores/helperStore.ts
+++ b/src/lib/stores/helperStore.ts
@@ -1,3 +1,4 @@
 import { writable, type Writable } from 'svelte/store'
 
 export const is_login_modal_open: Writable<any> = writable(null)
+export const current_theme: Writable<string> = writable('dark')
diff --git a/src/lib/stores/remoteConfigStore.ts b/src/lib/stores/remoteConfigStore.ts
index b4a80ccf..e32b3271 100644
--- a/src/lib/stores/remoteConfigStore.ts
+++ b/src/lib/stores/remoteConfigStore.ts
@@ -1,4 +1,3 @@
-import { env } from '$env/dynamic/public'
 import { writable, type Writable } from 'svelte/store'
 
 export const is_maintenance_mode_enabled: Writable<boolean> = writable(false)
@@ -6,36 +5,3 @@ export const is_feature_video_responses_enabled: Writable<boolean> = writable(fa
 export const is_feature_group_chat_enabled: Writable<boolean> = writable(false)
 export const is_feature_mint_page_enabled: Writable<boolean> = writable(false)
 export const is_feature_premium_page_enabled: Writable<boolean> = writable(false)
-
-async function createRemoteConfig({ flagKey, flagValue }: { flagKey: string; flagValue: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/remote-config`, {
-		method: 'PUT',
-		body: JSON.stringify({ flagKey, flagValue })
-	}).then((response) => response.json())
-}
-
-async function getRemoteConfigs() {
-	return await fetch(`${env.PUBLIC_API_URL}/remote-configs`, {
-		method: 'GET'
-	}).then(async (response) => {
-		const remoteConfigs = await response.json()
-		remoteConfigs.map((config: { flagKey: string; flagValue: boolean }) => {
-			if (config.flagKey === 'maintenance-mode') is_maintenance_mode_enabled.set(config.flagValue)
-			if (config.flagKey === 'feature-video-responses')
-				is_feature_video_responses_enabled.set(config.flagValue)
-			if (config.flagKey === 'feature-group-chat')
-				is_feature_group_chat_enabled.set(config.flagValue)
-			if (config.flagKey === 'feature-mint-page') is_feature_mint_page_enabled.set(config.flagValue)
-			if (config.flagKey === 'feature-premium-page')
-				is_feature_premium_page_enabled.set(config.flagValue)
-		})
-	})
-}
-
-async function getRemoteConfigByKey({ flagKey }: { flagKey: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/remote-config?flagKey=${flagKey}`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-export { createRemoteConfig, getRemoteConfigs, getRemoteConfigByKey }
diff --git a/src/lib/stores/sfxStore.ts b/src/lib/stores/sfxStore.ts
deleted file mode 100644
index 96961515..00000000
--- a/src/lib/stores/sfxStore.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import { writable, type Writable } from 'svelte/store'
-
-export enum SoundEffect {
-	All = 'All',
-	AskedToSpeak = 'AskedToSpeak',
-	ChannelUpdates = 'ChannelUpdates',
-	FriendRequestReceived = 'FriendRequestReceived',
-	FriendRequestSend = 'FriendRequestSend',
-	MutedMic = 'MutedMic',
-	UnmutedMic = 'UnmutedMic',
-	SentMessage = 'SentMessage',
-	ReceivedMessage = 'ReceivedMessage',
-	StartedSharingScreen = 'StartedSharingScreen',
-	StoppedSharingScreen = 'StoppedSharingScreen',
-	UserJoinedChannel = 'UserJoinedChannel',
-	UserLeftChannel = 'UserLeftChannel'
-}
-
-export const sfxList: Writable<
-	(
-		| { key: SoundEffect; path: null; isMuted: boolean }
-		| { key: SoundEffect; path: string; isMuted: boolean }
-	)[]
-> = writable()
-
-async function getAllSavedMutedSfx() {
-	return sfxList.set([
-		{
-			key: SoundEffect.All,
-			path: null,
-			isMuted: await getIsMuted(SoundEffect.All)
-		},
-		{
-			key: SoundEffect.AskedToSpeak,
-			path: '../../assets/sfx/askedToSpeak.wav',
-			isMuted: await getIsMuted(SoundEffect.AskedToSpeak)
-		},
-		{
-			key: SoundEffect.ChannelUpdates,
-			path: '../../assets/sfx/channelUpdates.wav',
-			isMuted: await getIsMuted(SoundEffect.ChannelUpdates)
-		},
-		{
-			key: SoundEffect.FriendRequestReceived,
-			path: '../../assets/sfx/FriendRequestReceived.wav',
-			isMuted: await getIsMuted(SoundEffect.FriendRequestReceived)
-		},
-		{
-			key: SoundEffect.FriendRequestSend,
-			path: '../../assets/sfx/friendRequestSend.wav',
-			isMuted: await getIsMuted(SoundEffect.FriendRequestSend)
-		},
-		{
-			key: SoundEffect.MutedMic,
-			path: '../../assets/sfx/mutedMic.wav',
-			isMuted: await getIsMuted(SoundEffect.MutedMic)
-		},
-		{
-			key: SoundEffect.UnmutedMic,
-			path: '../../assets/sfx/unmutedMic.wav',
-			isMuted: await getIsMuted(SoundEffect.MutedMic)
-		},
-		{
-			key: SoundEffect.SentMessage,
-			path: '../../assets/sfx/sentMessage.wav',
-			isMuted: await getIsMuted(SoundEffect.SentMessage)
-		},
-		{
-			key: SoundEffect.ReceivedMessage,
-			path: '../../assets/sfx/receivedMessage.wav',
-			isMuted: await getIsMuted(SoundEffect.SentMessage)
-		},
-		{
-			key: SoundEffect.StartedSharingScreen,
-			path: '../../assets/sfx/startedSharingScreen.wav',
-			isMuted: await getIsMuted(SoundEffect.StartedSharingScreen)
-		},
-		{
-			key: SoundEffect.StoppedSharingScreen,
-			path: '../../assets/sfx/stoppedSharingScreen.wav',
-			isMuted: await getIsMuted(SoundEffect.StartedSharingScreen)
-		},
-		{
-			key: SoundEffect.UserJoinedChannel,
-			path: '../../assets/sfx/userJoinedChannel.wav',
-			isMuted: await getIsMuted(SoundEffect.UserJoinedChannel)
-		},
-		{
-			key: SoundEffect.UserLeftChannel,
-			path: '../../assets/sfx/userLeftChannel',
-			isMuted: await getIsMuted(SoundEffect.UserJoinedChannel)
-		}
-	])
-}
-
-async function getIsMuted(key: SoundEffect) {
-	return JSON.parse(window.localStorage.getItem(key) || 'false')
-}
-
-// public playAudio(key: SoundEffect) {
-//     const isMutedAll = sfxList.find((sfx: { key: SoundEffect; }) => sfx.key == SoundEffect.All).isMuted
-//     const sfx = sfxList.find((sfx: { key: SoundEffect; }) => sfx.key == key)
-//     if (!isMutedAll && !sfx.isMuted) {
-//         const audio = new Audio()
-//         const path = getPathFromKey(key)
-//         audio.src = path
-//         audio.load()
-//         audio.play()
-//     }
-// }
-
-// private getPathFromKey(key: SoundEffect) {
-//     return sfxList.find((sfx: { key: SoundEffect; }) => sfx.key == key).path
-// }
-
-// public saveIsMuted(key: SoundEffect, isMuted: boolean) {
-//     window.localStorage.setItem(key, isMuted.toString())
-//     sfxList.find((sfx: { key: SoundEffect; }) => sfx.key == key).isMuted = isMuted
-// }
-
-export { getAllSavedMutedSfx, getIsMuted }
diff --git a/src/lib/stores/streamStore.ts b/src/lib/stores/streamStore.ts
index e5ca104b..e6529991 100644
--- a/src/lib/stores/streamStore.ts
+++ b/src/lib/stores/streamStore.ts
@@ -1,7 +1,10 @@
-import { writable, type Writable, get } from 'svelte/store'
+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)
 
 const updateVideoItems = (videoItems: any, liveInputs: any[]) => {
 	const vidItems = [...videoItems]
@@ -11,6 +14,7 @@ const updateVideoItems = (videoItems: any, liveInputs: any[]) => {
 				if (video._id === liveInput._id) {
 					switch (liveInput.trackType) {
 						case 'screen':
+							// isTrackActive required for real-time dismissal
 							video.screen = liveInput.isTrackActive ? liveInput : null
 							break
 						case 'webcam':
diff --git a/src/lib/stores/userStore.ts b/src/lib/stores/userStore.ts
index f4e544e5..3acfcfe8 100644
--- a/src/lib/stores/userStore.ts
+++ b/src/lib/stores/userStore.ts
@@ -1,84 +1,3 @@
-import { env } from '$env/dynamic/public'
+import { writable, type Writable } from 'svelte/store'
 
-async function getUserById({ userId }: { userId: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/users/search/id?userId=${userId}`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function getUsersByIds({ userIds }: { userIds: Array<string> }) {
-	return await fetch(`${env.PUBLIC_API_URL}/users/search/ids`, {
-		method: 'POST',
-		body: JSON.stringify({ userIds })
-	}).then((response) => response.json())
-}
-
-async function getUsersByName({ name }: { name: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/users/search/name?name=${name}`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function getUserByUsername({ username }: { username: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/users/search/username?username=${username}`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function getHighestRankedUsers({ skip = 0, limit = 50 }: { skip: number; limit: number }) {
-	return await fetch(`${env.PUBLIC_API_URL}/users/highest-ranked?skip=${skip}&limit=${limit}`, {
-		method: 'GET'
-	}).then((response) => response.json())
-}
-
-async function updateUserProperties(body: any) {
-	return await fetch(`${env.PUBLIC_API_URL}/users/current`, {
-		method: 'PATCH',
-		body: JSON.stringify(body)
-	}).then(async (response) => {
-		//TODO: update user in auth service
-		const userUpdate = await response.json()
-		// this.authService.setUser(userUpdate)
-		return userUpdate
-	})
-}
-
-async function updateAvatar({ fileToUpload, fileName }: { fileToUpload: any; fileName: string }) {
-	const formData: FormData = new FormData()
-	formData.append('file', fileToUpload, fileName)
-	formData.append('bucketName', 'avatars')
-	return await fetch(`${env.PUBLIC_API_URL}/users/current/avatar`, {
-		method: 'PUT',
-		body: formData
-	}).then(async (response) => {
-		//TODO: update user in auth service
-		const userUpdate = await response.json()
-		// this.authService.setUser(userUpdate)
-		return userUpdate
-	})
-}
-
-async function updateUsername({ username }: { username: string }) {
-	return await fetch(`${env.PUBLIC_API_URL}/users/current/username`, {
-		method: 'PATCH',
-		body: JSON.stringify({ username })
-	}).then(async (response) => {
-		//TODO: update user in auth service
-		const userUpdate = await response.json()
-		// if (!userUpdate.exists) {
-		//     this.authService.setUser(userUpdate)
-		// }
-		return userUpdate
-	})
-}
-
-export {
-	getUserById,
-	getUsersByIds,
-	getUsersByName,
-	getUserByUsername,
-	getHighestRankedUsers,
-	updateUserProperties,
-	updateAvatar,
-	updateUsername
-}
+export const isOnline: Writable<boolean> = writable(false)
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index ea3987a7..8e956307 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -71,14 +71,17 @@ export const getSectionUrl = ({
 	limit: number
 }): string => {
 	switch (sectionId) {
+		case 'most-active':
+			return `channels/most-active?skip=${skip}&limit=${limit}`
 		case 'weekly':
 			return `channels/weekly?searchQuery=${query}&skip=${skip}&limit=${limit}`
 		case 'highest-ranked':
 			return `users/highest-ranked?searchQuery=${query}&skip=${skip}&limit=${limit}`
 		case 'rising-stars':
+			//stats/stream/getRisingStars?skip=${0}&limit=${10}
 			return `users/rising-stars?searchQuery=${query}&skip=${skip}&limit=${limit}`
 		case 'my':
-			return `channels/me/hosted?searchQuery=${query}&skip=${skip}&limit=${limit}`
+			return `channels/user?searchQuery=${query}&skip=${skip}&limit=${limit}`
 		case 'fav':
 			return `channels/me/fav?searchQuery=${query}&skip=${skip}&limit=${limit}`
 		default:
@@ -103,6 +106,10 @@ export const hasOneHourPassed = (date: number) => {
 
 export const getColoredRole = (role: string) =>
 	({
+		'🤖 AI': {
+			tagColor: 'bg-transparent bg-clip bg-gradient-to-r to-emerald-600 from-sky-400',
+			textColor: 'text-accent'
+		},
 		Host: { tagColor: 'bg-secondary', textColor: 'text-pink-500' },
 		You: { tagColor: 'bg-gray-600' },
 		Mod: { tagColor: 'bg-green-700', textColor: 'text-success' },
@@ -117,7 +124,7 @@ Input: 20, 16
 Output: [16, 4]
 */
 export const divideNumber = (number: number, divider: number): number[] => {
-	if (number < divider) {
+	if (number <= divider) {
 		return [number]
 	}
 	const quotient = Math.floor(number / divider)
@@ -143,13 +150,53 @@ export const cardCounts: { [key: number]: number[] } = {
 	16: [4, 4, 4, 4]
 }
 
-// export const isDarkerTheme = (currentTheme: string): boolean => {
-// 	switch (currentTheme) {
-// 		case 'light' || 'cyberpunk':
-// 			return false
-// 		case 'dark' || 'synthwave':
-// 			return true
-// 		default:
-// 			return true
-// 	}
-// }
+export const timeSince = (date: string) => {
+	if (!date) return 'Date created unknown'
+	const created: any = new Date(date)
+	const currentDate: any = new Date(Date.now())
+	const seconds = Math.floor((currentDate - created) / 1000)
+	let interval = seconds / 31536000
+	if (interval > 1) {
+		return Math.floor(interval) + ' years ago'
+	}
+	interval = seconds / 2592000
+	if (interval > 1) {
+		return Math.floor(interval) + ' months ago'
+	}
+	interval = seconds / 86400
+	if (interval > 1) {
+		return Math.floor(interval) + ' days ago'
+	}
+	interval = seconds / 3600
+	if (interval > 1) {
+		return Math.floor(interval) + ' hours ago'
+	}
+	interval = seconds / 60
+	if (interval > 1) {
+		return Math.floor(interval) + ' minutes ago'
+	}
+	return Math.floor(seconds) + ' seconds ago'
+}
+
+export const getVideoGrids = (list: any, limit: number) => {
+	if (!list.length) return []
+
+	const numList = divideNumber(list.length, limit)
+	const result: any[] = []
+	let pointer = 0
+
+	for (let i = 0; i < numList.length; i++) {
+		const row: any = cardCounts[numList[i]]
+		for (let j = 0; j < row.length; j++) {
+			result[j] = []
+			for (let k = 0; k < row[j]; k++) {
+				if (pointer < list.length) {
+					result[j].push({ ...list[pointer] })
+					pointer++
+				}
+			}
+		}
+	}
+
+	return result
+}
diff --git a/src/lib/websocket.ts b/src/lib/websocket.ts
index 651cba98..c25360fd 100644
--- a/src/lib/websocket.ts
+++ b/src/lib/websocket.ts
@@ -178,15 +178,6 @@ function emitAction({ channelId, message }: { channelId: string; message: any })
 	)
 }
 
-// function listenToUserConnection({ userId }: { userId: string }) {
-// 	platformMessage.subscribe((value) => {
-// 		const parsedData = JSON.parse(value.data)
-// 		if (parsedData.eventName === `user-connection-${userId}`) {
-// 			//parsedData.user
-// 		}
-// 	})
-// }
-
 // function listenToChannelAccessRequest({ channelId }: { channelId: string }) {
 // 	platformMessage.subscribe((value) => {
 // 		const parsedData = JSON.parse(value.data)
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e2d5ccf3..d5ca15cb 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -18,8 +18,9 @@
 	import { emitUserConnection, initPlatformSocket, platformSocket } from '$lib/websocket'
 	import { platform_connection, platform_message } from '$lib/stores/websocketStore'
 	import { isJsonString } from '$lib/utils'
-	import IconMageText from '$lib/assets/icons/IconMageText.svg'
-	import IconMageTextDark from '$lib/assets/icons/IconMageTextDark.svg'
+	import IconMageText from '$lib/assets/icons/IconMageText.svelte'
+	import { isOnline } from '$lib/stores/userStore'
+	import { current_theme } from '$lib/stores/helperStore'
 
 	NProgress.configure({
 		minimum: 0.75,
@@ -38,34 +39,59 @@
 	let nav_drawer: HTMLInputElement
 
 	onMount(async () => {
-		const platformSocketId = await get(`wsinit/wsid`)
-		initPlatformSocket(platformSocketId)
-		platformSocket.addEventListener('open', (data) => {
-			console.log('socket connection open')
-			console.log(data)
-			platform_connection.set('open')
-			if ($page.data.user?.userId)
-				emitUserConnection({ userId: $page.data.user?.userId, isOnline: true })
-		})
-		platformSocket.addEventListener('message', (data) => {
-			console.log('listening to messages')
-			console.log(data.data)
-			if (isJsonString(data.data)) platform_message.set(data.data)
-		})
-		platformSocket.addEventListener('error', (data) => {
-			console.log('socket connection error')
-			console.log(data)
-		})
-		platformSocket.addEventListener('close', (data) => {
-			console.log('socket connection close')
-			console.log(data)
-			platform_connection.set('close')
-		})
+		$current_theme = localStorage.getItem('theme') || 'dark'
 
+		await handleWebsocket()
 		if (!$category_list.length) {
 			$category_list = imageUrlsJson
 		}
 	})
+
+	const handleWebsocket = async () => {
+		try {
+			if ($page.data.user?.userId) {
+				const platformSocketId = await get(`wsinit/wsid`)
+				initPlatformSocket(platformSocketId)
+				platformSocket.addEventListener('open', (data) => {
+					console.log('socket connection open')
+					console.log(data)
+					$platform_connection = 'open'
+				})
+				platformSocket.addEventListener('message', (data) => {
+					console.log('listening to messages')
+					console.log(data.data)
+					if (isJsonString(data.data)) platform_message.set(data.data)
+				})
+				platformSocket.addEventListener('error', (data) => {
+					console.log('socket connection error')
+					console.log(data)
+				})
+				platformSocket.addEventListener('close', (data) => {
+					console.log('socket connection close')
+					console.log(data)
+					$platform_connection = 'close'
+					attemptReconnect()
+				})
+			}
+		} catch (error) {
+			attemptReconnect()
+		}
+	}
+
+	const attemptReconnect = () => {
+		setTimeout(async () => {
+			console.log('Reconnecting to WebSocket...')
+			await handleWebsocket()
+		}, 4000)
+	}
+
+	platform_connection.subscribe(async (value: any) => {
+		if (!value) return
+		$isOnline = value === 'open'
+		if ($page.data.user?.userId && value === 'open') {
+			emitUserConnection({ userId: $page.data.user?.userId, isOnline: $isOnline })
+		}
+	})
 </script>
 
 <svelte:head>
@@ -84,8 +110,7 @@
 			<ul>
 				<li>
 					<label for="main-drawer" class="lg:hidden rounded-lg">
-						<img class="w-20 mage-text" src={IconMageText} alt="" />
-						<img class="w-20 mage-text-dark" src={IconMageTextDark} alt="" />
+						<IconMageText />
 					</label>
 				</li>
 			</ul>
@@ -113,15 +138,3 @@
 		{/if}
 	</div>
 </div>
-
-<style>
-	:global(html[data-theme='dark'] .mage-text),
-	:global(html[data-theme='synthwave'] .mage-text) {
-		display: none;
-	}
-
-	:global(html[data-theme='light'] .mage-text-dark),
-	:global(html[data-theme='cyberpunk'] .mage-text-dark) {
-		display: none;
-	}
-</style>
diff --git a/src/routes/admin/+layout.svelte b/src/routes/admin/+layout.svelte
index 8103f603..663deb55 100644
--- a/src/routes/admin/+layout.svelte
+++ b/src/routes/admin/+layout.svelte
@@ -5,7 +5,7 @@
 		<slot />
 		<div class="relative h-screen w-full">
 			<div class="absolute top-0 right-0">
-				<label for="admin-drawer" class="btn btn-ghost normal-case text-xl drawer-button lg:hidden "
+				<label for="admin-drawer" class="btn btn-ghost normal-case text-xl drawer-button lg:hidden"
 					>Admin</label>
 			</div>
 		</div>
@@ -17,7 +17,6 @@
 			<li><a href="/admin/admins">Admins</a></li>
 			<li><a href="/admin/users">Users</a></li>
 			<li><a href="/admin/channels">Channels</a></li>
-			<li><a href="/admin/fun-facts">Fun Facts</a></li>
 			<li><a href="/admin/legal">Legal Policies</a></li>
 			<li><a href="/admin/settings">Site Settings</a></li>
 		</ul>
diff --git a/src/routes/browse/+page.server.ts b/src/routes/browse/+page.server.ts
index 230cb447..cb9693af 100644
--- a/src/routes/browse/+page.server.ts
+++ b/src/routes/browse/+page.server.ts
@@ -1,24 +1,39 @@
 import type { Actions, PageServerLoad } from './$types'
 import { get, post } from '$lib/api'
 import { redirect } from '@sveltejs/kit'
+import { getSectionUrl } from '$lib/utils'
 
 export const load = (async ({ locals }) => {
 	return {
+		// tableChannels: get(`channels?skip=${0}&limit=${100}`),
+		mostActiveChannels: get(
+			getSectionUrl({ sectionId: 'most-active', query: '', skip: 0, limit: 5 })
+		),
 		lazy: {
-			mostActiveChannels: get(`channels/most-active?skip=${0}&limit=${5}`),
-			weeklyChannels: get(`channels/weekly?skip=${0}&limit=${10}`),
-			highestRankedUsers: get(`users/highest-ranked?skip=${0}&limit=${10}`),
-			risingStarUsers: get(`stats/stream/getRisingStars?skip=${0}&limit=${10}`),
+			mostActiveChannels: get(
+				getSectionUrl({ sectionId: 'most-active', query: '', skip: 0, limit: 5 })
+			),
+			weeklyChannels: get(getSectionUrl({ sectionId: 'weekly', query: '', skip: 0, limit: 10 })),
+			highestRankedUsers: get(
+				getSectionUrl({ sectionId: 'highest-ranked', query: '', skip: 0, limit: 10 })
+			),
+			risingStarUsers: get(
+				getSectionUrl({ sectionId: 'rising-stars', query: '', skip: 0, limit: 10 })
+			),
 			myChannels: locals.user
-				? get(`channels/user?userId=${locals.user.userId}&skip=${0}&limit=${10}`)
+				? get(
+						`${getSectionUrl({ sectionId: 'my', query: '', skip: 0, limit: 10 })}&userId=${
+							locals.user?.userId
+						}`
+				  )
 				: [],
 			favChannels: locals.user
-				? get(`channels/me/fav?skip=${0}&limit=${10}`, {
+				? get(getSectionUrl({ sectionId: 'fav', query: '', skip: 0, limit: 10 }), {
 						userId: locals.user.userId,
 						token: locals.user.token
 				  })
 				: [],
-			tableChannels: get(`channels?skip=${0}&limit=${100}`)
+			tableChannels: get(getSectionUrl({ sectionId: '', query: '', skip: 0, limit: 100 }))
 		}
 	}
 }) satisfies PageServerLoad
diff --git a/src/routes/browse/+page.svelte b/src/routes/browse/+page.svelte
index a9395aa9..3a5191c4 100644
--- a/src/routes/browse/+page.svelte
+++ b/src/routes/browse/+page.svelte
@@ -11,7 +11,7 @@
 	$: user = $page.data.user
 </script>
 
-<SectionCarousel bind:channels={data.lazy.mostActiveChannels} />
+<SectionCarousel bind:channels={data.mostActiveChannels} />
 <SearchBar />
 
 <SectionChannel sectionId={'weekly'} bind:channels={data.lazy.weeklyChannels} />
diff --git a/src/routes/browse/[sectionId]/+page.server.ts b/src/routes/browse/[sectionId]/+page.server.ts
deleted file mode 100644
index 00f560cf..00000000
--- a/src/routes/browse/[sectionId]/+page.server.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { PageServerLoad } from '../$types'
-
-export const load = (() => {
-	return
-}) satisfies PageServerLoad
diff --git a/src/routes/browse/[sectionId]/+page.svelte b/src/routes/browse/[sectionId]/+page.svelte
deleted file mode 100644
index c12f9c6f..00000000
--- a/src/routes/browse/[sectionId]/+page.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script lang="ts">
-	import { get } from '$lib/api'
-	import { onMount } from 'svelte'
-	import SearchBar from '$lib/components/Browse/SearchBar.svelte'
-	import ListSearch from '$lib/components/Search/ListSearch.svelte'
-	import { page } from '$app/stores'
-	import { getSectionUrl } from '$lib/utils'
-	import type { PageData } from '../$types'
-
-	export let title: string = '',
-		data: PageData
-
-	$: ({ user } = data)
-	let loadingMoreChannels = false
-	let query = ''
-	let searchList: any[] = []
-	let skip: number = 0
-	let limit: number = 20
-	let sectionId = ''
-
-	onMount(async () => {
-		sectionId = $page.params.sectionId
-		const url = getSectionUrl({ sectionId, query, skip, limit })
-		searchList = await get(url)
-	})
-
-	async function loadMore(): Promise<void> {
-		loadingMoreChannels = true
-		const url = getSectionUrl({ sectionId, query, skip, limit })
-		const moreChannels = await get(url, { userId: user?.userId, token: user?.token })
-		searchList = [...searchList, ...moreChannels]
-		skip += limit
-		loadingMoreChannels = false
-	}
-</script>
-
-<SearchBar searchPage={true} searchQuery={query} />
-
-<div class="font-semibold m-3">
-	<a class="link link-secondary text-lg">{title}</a>
-</div>
-
-<ListSearch
-	channels={searchList}
-	{loadingMoreChannels}
-	on:loadMore={loadMore}
-	isSearchPage={false} />
diff --git a/src/routes/channel/[channelId]/+page.server.ts b/src/routes/channel/[channelId]/+page.server.ts
index 90b7c575..2d33f9ee 100644
--- a/src/routes/channel/[channelId]/+page.server.ts
+++ b/src/routes/channel/[channelId]/+page.server.ts
@@ -1,36 +1,7 @@
-import type { Actions, PageServerLoad } from './$types'
-import { get, patch } from '$lib/api'
-
-export const load = (async ({ params }) => {
-	// return {
-	// 	lazy: {
-	// 		channel: get(`channel?channelId=${params.channelId}`)
-	// 	},
-	// 	channelId: params.channelId
-	// }
-}) satisfies PageServerLoad
+import type { Actions } from './$types'
 
 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
-		// })
+	'edit-channel': async () => {
 		return { success: true }
 	}
 } satisfies Actions
diff --git a/src/routes/channel/[channelId]/+page.svelte b/src/routes/channel/[channelId]/+page.svelte
index 4dd1d0c3..d0821316 100644
--- a/src/routes/channel/[channelId]/+page.svelte
+++ b/src/routes/channel/[channelId]/+page.svelte
@@ -8,8 +8,7 @@
 		initChannelSocket,
 		channelSocket,
 		emitChannelSubscribeByUser,
-		emitDeleteAllMessagesToChannel,
-		emitChannelUpdate
+		emitDeleteAllMessagesToChannel
 	} from '$lib/websocket'
 	import { channel_connection, channel_message } from '$lib/stores/websocketStore'
 	import { isJsonString } from '$lib/utils'
@@ -18,11 +17,18 @@
 	import { goto } from '$app/navigation'
 	import { page } from '$app/stores'
 	import DrawerEditChannel from '$lib/components/Channel/Chat/DrawerEditChannel.svelte'
-	import { updateVideoItems, video_items } from '$lib/stores/streamStore'
+	import {
+		is_sharing_screen,
+		is_sharing_webcam,
+		is_sharing_audio,
+		updateVideoItems,
+		video_items
+	} from '$lib/stores/streamStore'
 
 	let channel: any
 	let channelId = $page.params.channelId || ''
 	$: userCount = 0
+	$: isHostOrGuest = isHost || channel?.guests?.includes($page.data.user?.userId)
 
 	let isDeleteModalOpen = false,
 		showEditChannelDrawer = false,
@@ -34,7 +40,19 @@
 
 	$: if (channel) {
 		if (channel._id !== channelId) {
+			channelSocket.close()
 			channelId = channel?._id
+			$channel_message = ''
+			$video_items = []
+			if (isHostOrGuest) {
+				$is_sharing_screen = false
+				$is_sharing_webcam = false
+				$is_sharing_audio = false
+			} else {
+				$is_sharing_screen = undefined
+				$is_sharing_webcam = undefined
+				$is_sharing_audio = undefined
+			}
 			handleWebsocket()
 		}
 	}
@@ -50,7 +68,14 @@
 		}, 600)
 	})
 
-	onDestroy(() => channelSocket?.close())
+	onDestroy(() => {
+		if (isHostOrGuest) {
+			$is_sharing_screen = false
+			$is_sharing_webcam = false
+			$is_sharing_audio = false
+		}
+		channelSocket?.close()
+	})
 
 	const loadChannel = async () => {
 		channel = await get(`channel?channelId=${channelId}`)
@@ -63,45 +88,56 @@
 		isHost = userId === $page?.data?.user?.userId
 	}
 
-	const getLiveInputs = async (channelId: string) => {
-		return await get(`cloudflare/live-input?channelId=${channelId}`)
-	}
-
 	const handleWebsocket = async () => {
-		channelSocket?.close()
-		const channelSocketId = await get(`wsinit/channelid?channelId=${channelId}`)
-		initChannelSocket(channelSocketId)
-		channelSocket.addEventListener('open', async (data) => {
-			console.log('channel socket connection open', channelSocketId)
-			$channel_connection = 'open'
-			$channel_message = ''
-			$video_items = []
-			emitChannelSubscribeByUser({
-				channelId,
-				userId: $page.data.user?.userId,
-				username: $page.data.user?.user?.username
+		try {
+			const channelSocketId = await get(`wsinit/channelid?channelId=${channelId}`)
+			initChannelSocket(channelSocketId)
+			channelSocket.addEventListener('open', async (data) => {
+				console.log('channel socket connection open', channelSocketId)
+				$channel_connection = 'open'
+				$channel_message = ''
+				$video_items = []
+				emitChannelSubscribeByUser({
+					channelId,
+					userId: $page.data.user?.userId,
+					username: $page.data.user?.user?.username
+				})
+				emitChatHistoryToChannel({ channelId, skip: 100 })
+				getHost(channel.user)
 			})
-			emitChatHistoryToChannel({ channelId, skip: 100 })
-			getHost(channel.user)
-		})
-		channelSocket.addEventListener('message', (data) => {
-			console.log('channel listening to messages')
-			if (isJsonString(data.data)) {
-				console.log('data.data', data.data)
-				$channel_message = data.data
-			}
-		})
-		channelSocket.addEventListener('error', (data) => {
-			console.log('channel socket connection error')
-			console.log(data)
-		})
-		channelSocket.addEventListener('close', (data) => {
-			console.log('channel socket connection close')
-			console.log(data)
-			$channel_connection = 'close'
-			$channel_message = ''
-			$video_items = []
-		})
+			channelSocket.addEventListener('message', (data) => {
+				console.log('channel listening to messages')
+				if (isJsonString(data.data)) {
+					console.log('data.data', data.data)
+					$channel_message = data.data
+				}
+			})
+			channelSocket.addEventListener('error', (data) => {
+				console.log('channel socket connection error')
+				console.log(data)
+			})
+			channelSocket.addEventListener('close', (data) => {
+				console.log('channel socket connection close')
+				console.log(data)
+				$channel_connection = 'close'
+				$channel_message = ''
+				$video_items = []
+
+				console.log('got here----', data.code)
+				//if manually closed, don't reconnect
+				if (data.code === 1005) return
+				attemptReconnect()
+			})
+		} catch (error) {
+			if (error) attemptReconnect()
+		}
+	}
+
+	const attemptReconnect = () => {
+		setTimeout(async () => {
+			console.log('Reconnecting to WebSocket...')
+			await handleWebsocket()
+		}, 4000)
 	}
 
 	const deleteChannelNoAction = () => {
@@ -128,7 +164,8 @@
 		var parsedMsg = JSON.parse(value)
 		switch (parsedMsg.eventName) {
 			case `channel-update-${channelId}`:
-				channel = parsedMsg.channels
+				console.log('channel-update', parsedMsg)
+				channel = parsedMsg.channel
 				break
 			case `channel-subscribe-${channelId}`:
 				userCount = parsedMsg.userCount
@@ -137,24 +174,29 @@
 				} else {
 					const activeGuests = parsedMsg.activeGuests
 					if (activeGuests?.length) {
-						$video_items = [...activeGuests]
-						const liveInputs = await getLiveInputs(channelId)
-						$video_items = updateVideoItems($video_items, liveInputs)
+						if ($video_items.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)
+								return foundVideoItem || guest
+							})
+						} else {
+							// for new users joining the channel
+							const liveInputs = await get(`cloudflare/live-inputs?channelId=${channelId}`)
+							$video_items = updateVideoItems([...activeGuests], liveInputs)
+						}
 					}
 				}
 				break
 			case `channel-streaming-action-${channelId}`:
 				switch (parsedMsg.data.action) {
-					case 'toggleTrack-start':
-						console.log('VIDEOOOOOO', $video_items)
-						console.log('start parsedMsg.data', parsedMsg.data)
-						if ($page.data.user.userId !== parsedMsg.data.video._id) {
-							$video_items = updateVideoItems($video_items, [parsedMsg.data.video])
-						}
-						break
-					case 'toggleTrack-stop':
-						console.log('stop parsedMsg.data', parsedMsg.data)
-						if ($page.data.user.userId !== parsedMsg.data.video._id) {
+					case 'toggleTrack':
+						if ($page.data.user?.userId) {
+							if ($page.data.user.userId !== parsedMsg.data.video._id) {
+								$video_items = updateVideoItems($video_items, [parsedMsg.data.video])
+							}
+						} else {
 							$video_items = updateVideoItems($video_items, [parsedMsg.data.video])
 						}
 						break
@@ -164,7 +206,7 @@
 	})
 </script>
 
-{#if channel}
+{#if channel && channel._id === channelId}
 	<div class="flex flex-auto">
 		<div class="drawer drawer-end">
 			<input
@@ -173,7 +215,12 @@
 				class="drawer-toggle"
 				bind:checked={$is_chat_drawer_open} />
 			<div class="drawer-content">
-				<StreamContainer bind:channel bind:userCount bind:channels on:loadMore={loadMoreChannels} />
+				<StreamContainer
+					bind:channel
+					bind:userCount
+					bind:channels
+					on:loadMore={loadMoreChannels}
+					bind:isHostOrGuest />
 
 				{#if showEditChannelDrawer}
 					<DrawerEditChannel bind:channel bind:showDrawer={showEditChannelDrawer} />
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index f6514606..0b73c0be 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -6,8 +6,8 @@
 <div class="m-10 lg:w-2/5 bg-primary p-16 rounded-md">
 	<h1 class="text-4xl pb-4 text-white font-bold">Get in touch</h1>
 	<p class="text-xl text-white pb-8 leading-relaxed font-normal pr-4">
-		Got a question about us? Are you interested in partnering with us? Have some suggestions or just
-		want to say hi? Just contact us. We are here to asset you.
+		If you have any inquiries about our organization or are interested in collaborating with us,
+		please do not hesitate to reach out
 	</p>
 	<div class="flex items-center">
 		<div aria-label="email icon" role="img">
@@ -35,7 +35,7 @@
 	<div class=" pt-16">
 		<a
 			href="/careers"
-			class="text-white font-bold tracking-wide underline focus:outline-none focus:ring-2 focus:ring-white ">
+			class="text-white font-bold tracking-wide underline focus:outline-none focus:ring-2 focus:ring-white">
 			View Job Openings</a>
 	</div>
 </div>
diff --git a/src/routes/legal/+page.server.ts b/src/routes/legal/+page.server.ts
index 4b3740d1..f634928d 100644
--- a/src/routes/legal/+page.server.ts
+++ b/src/routes/legal/+page.server.ts
@@ -1,26 +1,25 @@
 import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
-import { getLegalDocs } from '$lib/stores/adminStore'
 
 export const load = (async () => {
 	// const post = await getLegalDocs()
 	const post = [
 		{
 			name: 'Privacy Policy',
-			url: 'https://code-crow-legal-docs.s3.amazonaws.com/legal/privacy.pdf'
+			url: 'https://legal.mage.stream/privacy.pdf'
 		},
 		{
 			name: 'Cookie Policy',
-			url: 'https://code-crow-legal-docs.s3.amazonaws.com/legal/cookie.pdf'
+			url: 'https://legal.mage.stream/cookie.pdf'
 		},
 		{
 			name: 'Copyright Policy',
-			url: 'https://code-crow-legal-docs.s3.amazonaws.com/legal/copyright.pdf'
+			url: 'https://legal.mage.stream/copyright.pdf'
 		},
-		{ name: 'GDPR Policy', url: 'https://code-crow-legal-docs.s3.amazonaws.com/legal/gdpr.pdf' },
+		{ name: 'GDPR Policy', url: 'https://legal.mage.stream/gdpr.pdf' },
 		{
 			name: 'Terms of Service',
-			url: 'https://code-crow-legal-docs.s3.amazonaws.com/legal/terms.pdf'
+			url: 'https://legal.mage.stream/terms.pdf'
 		}
 	]
 	if (post) {
diff --git a/src/routes/premium/+page.server.ts b/src/routes/premium/+page.server.ts
deleted file mode 100644
index 22dd40eb..00000000
--- a/src/routes/premium/+page.server.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { error } from '@sveltejs/kit'
-import type { PageServerLoad } from './$types'
- 
-export const load = (async ({ params }) => {
-  // const post = null
- 
-  // if (post) {
-  //   return post
-  // }
- 
-  // throw error(404, 'Not found')
-}) satisfies PageServerLoad
\ No newline at end of file
diff --git a/src/routes/premium/+page.svelte b/src/routes/premium/+page.svelte
deleted file mode 100644
index 3cf0b0a1..00000000
--- a/src/routes/premium/+page.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<h1>Welcome to premium page</h1>
diff --git a/src/routes/profile/[username]/+page.server.ts b/src/routes/profile/[username]/+page.server.ts
index 6f1d3ccd..8e0b1ef5 100644
--- a/src/routes/profile/[username]/+page.server.ts
+++ b/src/routes/profile/[username]/+page.server.ts
@@ -1,5 +1,5 @@
 import type { Actions, PageServerLoad } from './$types'
-import { get, patch, post, del } from '$lib/api'
+import { get, patch, put, del } from '$lib/api'
 import { redirect } from '@sveltejs/kit'
 
 export const load = (async ({ params, locals }) => {
@@ -49,8 +49,8 @@ export const actions = {
 		const isSubscribing = data.get('isSubscribing')
 		const source1 = data.get('source1')
 		const source2 = data.get('source2')
-		if (isSubscribing) {
-			await post(
+		if (isSubscribing === 'false') {
+			await put(
 				`subscribes?source1=${source1}&source2=${source2}`,
 				{},
 				{
diff --git a/src/routes/profile/[username]/+page.svelte b/src/routes/profile/[username]/+page.svelte
index 9ce75831..b5347719 100644
--- a/src/routes/profile/[username]/+page.svelte
+++ b/src/routes/profile/[username]/+page.svelte
@@ -11,7 +11,7 @@
 	let showDrawer = false
 </script>
 
-{#if data.profile?.length}
+{#if !data.profile}
 	<WholePageSkeleton />
 {:else}
 	<div class="relative block h-[31rem]">
diff --git a/src/routes/search/+page.server.ts b/src/routes/search/+page.server.ts
new file mode 100644
index 00000000..0913492d
--- /dev/null
+++ b/src/routes/search/+page.server.ts
@@ -0,0 +1,5 @@
+// import type { PageServerLoad } from './$types'
+
+// export const load = (({ locals, url }) => {
+
+// }) satisfies PageServerLoad
diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
index 14fb3bfb..9b930e3f 100644
--- a/src/routes/search/+page.svelte
+++ b/src/routes/search/+page.svelte
@@ -1,33 +1,129 @@
 <script lang="ts">
 	import { get } from '$lib/api'
-	import { onMount } from 'svelte'
-	import SearchBar from '$lib/components/Browse/SearchBar.svelte'
-	import ListSearch from '$lib/components/Search/ListSearch.svelte'
 	import { page } from '$app/stores'
+	import { getSectionUrl } from '$lib/utils'
+	import IconSearch from '$lib/assets/icons/IconSearch.svelte'
+	import { onMount } from 'svelte'
+	import LastItemInViewport from '$lib/actions/LastItemInViewport'
+	import ItemSearchChannel from '$lib/components/Search/ItemSearchChannel.svelte'
+	import LoadingItemSearchChannel from '$lib/components/Search/LoadingItemSearchChannel.svelte'
+	import ItemSearchUser from '$lib/components/Search/ItemSearchUser.svelte'
+	import LoadingItemSearchUser from '$lib/components/Search/LoadingItemSearchUser.svelte'
+	// @ts-ignore
+	import NProgress from 'nprogress'
+	$: {
+		if (isLoading) {
+			NProgress.start()
+		} else {
+			NProgress.done()
+		}
+	}
+
+	let sectionId = $page.url.searchParams.get('section') || ''
+	let query = $page.url.searchParams.get('query') || ''
 
-	let loadingMoreChannels = false
-	let loadChannels = 0
-	let query = ''
-	let searchList: any[] = []
+	let title = '',
+		skip = 0,
+		limit = 10,
+		isLoading = false,
+		searchList: any[] = [],
+		placeholderText = 'channels',
+		initialLoad = true
+
+	const loadMore = async () => {
+		isLoading = true
+		const url = getSectionUrl({ sectionId, query, skip, limit })
+		const moreChannels = await get(`${url}&userId=${$page.data.user?.userId}`, {
+			userId: $page.data.user?.userId,
+			token: $page.data.user?.token
+		})
+		searchList = skip === 0 ? moreChannels : [...searchList, ...moreChannels]
+		skip += limit
+		isLoading = false
+	}
 
 	onMount(async () => {
-		const query = $page.url.searchParams.get('searchQuery')
-		searchList = await get(`channels?searchQuery=${query}&skip=${0}&limit=${20}`)
+		switch (sectionId) {
+			case 'weekly':
+				title = `Weekly`
+				break
+			case 'highest-ranked':
+				title = `Highest ranked`
+				placeholderText = 'users'
+				break
+			case 'rising-stars':
+				title = `Rising stars`
+				placeholderText = 'users'
+				break
+			case 'my':
+				title = `My channels`
+				break
+			case 'fav':
+				title = `Fav channels`
+				break
+		}
+		await loadMore()
+		initialLoad = false
 	})
 
-	async function loadMore(): Promise<void> {
-		loadingMoreChannels = true
-		loadChannels += 20
-		const moreChannels = await get(`channels?searchQuery=${query}&skip=${0}&limit=${20}`)
-		searchList = [...searchList, ...moreChannels]
-		loadingMoreChannels = false
+	const resetSkipLimit = () => {
+		skip = 0
+		limit = 10
 	}
 </script>
 
-<SearchBar searchPage={true} searchQuery={query} />
+<div class="px-9 py-9 md:px-24">
+	<div class="flex flex-col md:flex-row gap-4 pb-10">
+		<div class="flex flex-col md:flex-row gap-4">
+			<form on:submit|preventDefault={loadMore}>
+				<div class="form-control">
+					<div class="input-group relative">
+						<input
+							name="query"
+							bind:value={query}
+							type="search"
+							placeholder="Search {placeholderText}"
+							class="input input-bordered input-primary w-96" />
+						<button
+							class="btn btn-square"
+							on:click={() => {
+								resetSkipLimit()
+								loadMore()
+							}}>
+							<IconSearch />
+						</button>
+					</div>
+				</div>
+			</form>
+		</div>
+	</div>
+
+	{#if title}
+		<div class="font-semibold py-5">
+			<a class="link link-secondary text-lg">{title}</a>
+		</div>
+	{/if}
 
-<ListSearch
-	channels={searchList}
-	{loadingMoreChannels}
-	on:loadMore={loadMore}
-	isSearchPage={true} />
+	<div class="flex flex-col gap-4 justify-around">
+		{#if initialLoad}
+			{#each Array(10) as _}
+				{#if placeholderText === 'users'}
+					<LoadingItemSearchUser />
+				{:else}
+					<LoadingItemSearchChannel />
+				{/if}
+			{/each}
+		{:else}
+			{#each searchList as item}
+				{#if placeholderText === 'users'}
+					<ItemSearchUser {item} />
+				{:else}
+					<ItemSearchChannel {item} />
+				{/if}
+			{:else}
+				<h2>No {placeholderText} found</h2>
+			{/each}
+			<span use:LastItemInViewport on:loadMore={loadMore} />
+		{/if}
+	</div>
+</div>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index c1da9e52..27ed99d0 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -1,21 +1,18 @@
 <script lang="ts">
-	import { browser } from '$app/environment'
 	import { onMount } from 'svelte'
 	import { themeChange } from 'theme-change'
 	import type { ActionData } from './$types'
 	import Toast from '$lib/components/Global/Toast.svelte'
 	import { enhance } from '$app/forms'
+	import { current_theme } from '$lib/stores/helperStore'
+
 	export let form: ActionData
 
 	// $: email = $page.data.user.user.email
 
-	let currentTheme: string | null = 'dark'
 	let themes = ['dark', 'light'] //, 'cyberpunk', 'synthwave']
 
 	onMount(() => {
-		if (browser) {
-			currentTheme = localStorage.getItem('theme') || 'dark'
-		}
 		themeChange(false)
 	})
 </script>
@@ -58,18 +55,6 @@
 
 		<div class="flex flex-col border-opacity-50">
 			<div class="divider">Theming</div>
-			<!-- <div class="form-control w-96">
-				<label class="cursor-pointer label">
-					<span class="label-text">Enable dark mode</span>
-					<input
-						type="checkbox"
-						class="toggle toggle-accent"
-						id="theme-toggle"
-						data-toggle-theme="light,dark"
-						data-act-class="ACTIVECLASS"
-						checked={isDarkTheme} />
-				</label>
-			</div> -->
 			{#each themes as theme}
 				<div class="form-control">
 					<label class="label cursor-pointer">
@@ -78,51 +63,15 @@
 							type="radio"
 							name="radio-10"
 							class="radio radio-accent"
-							checked={currentTheme === theme}
+							checked={$current_theme === theme}
 							data-toggle-theme={theme}
-							data-act-class="ACTIVECLASS" />
+							data-act-class="ACTIVECLASS"
+							on:change={() => {
+								$current_theme = theme
+							}} />
 					</label>
 				</div>
 			{/each}
-
-			<!-- <div class="divider">1v1 chat</div>
-			<div class="form-control w-96">
-				<label class="cursor-pointer label">
-					<span class="label-text">Do Not Disturb - prevents chat window popup</span>
-					<input type="checkbox" class="toggle toggle-accent" checked />
-				</label>
-			</div>
-			<div class="form-control w-96">
-				<label class="cursor-pointer label">
-					<span class="label-text">Prevent messages from randos</span>
-					<input type="checkbox" class="toggle toggle-accent" checked />
-				</label>
-			</div>
-			<div class="divider">Sound Effects</div>
-			<div class="form-control w-96">
-				<label class="cursor-pointer label">
-					<span class="label-text">Mute all sfx</span>
-					<input type="checkbox" class="toggle toggle-accent" checked />
-				</label>
-			</div>
-			<div class="form-control w-96">
-				<label class="cursor-pointer label">
-					<span class="label-text">Mute channel updates sfx</span>
-					<input type="checkbox" class="toggle toggle-accent" checked />
-				</label>
-			</div>
-			<div class="form-control w-96">
-				<label class="cursor-pointer label">
-					<span class="label-text">Mute friend request received sfx</span>
-					<input type="checkbox" class="toggle toggle-accent" checked />
-				</label>
-			</div>
-			<div class="form-control w-96">
-				<label class="cursor-pointer label">
-					<span class="label-text">Mute sent and received message sfx</span>
-					<input type="checkbox" class="toggle toggle-accent" checked />
-				</label>
-			</div> -->
 		</div>
 	</div>
 </div>
diff --git a/src/lib/assets/placeholder/gaming-placeholder.jpg b/static/placeholder/gaming-placeholder.jpg
similarity index 100%
rename from src/lib/assets/placeholder/gaming-placeholder.jpg
rename to static/placeholder/gaming-placeholder.jpg
diff --git a/src/lib/assets/placeholder/programming-placeholder.jpg b/static/placeholder/programming-placeholder.jpg
similarity index 100%
rename from src/lib/assets/placeholder/programming-placeholder.jpg
rename to static/placeholder/programming-placeholder.jpg
diff --git a/static/sfx/askedToSpeak.wav b/static/sfx/askedToSpeak.wav
deleted file mode 100644
index f3afe33e..00000000
Binary files a/static/sfx/askedToSpeak.wav and /dev/null differ
diff --git a/static/sfx/channelUpdates.wav b/static/sfx/channelUpdates.wav
deleted file mode 100644
index 6198ae61..00000000
Binary files a/static/sfx/channelUpdates.wav and /dev/null differ
diff --git a/static/sfx/friendRequestReceived.wav b/static/sfx/friendRequestReceived.wav
deleted file mode 100644
index 85d38566..00000000
Binary files a/static/sfx/friendRequestReceived.wav and /dev/null differ
diff --git a/static/sfx/mutedMic.wav b/static/sfx/mutedMic.wav
deleted file mode 100644
index 11d8de26..00000000
Binary files a/static/sfx/mutedMic.wav and /dev/null differ
diff --git a/static/sfx/newMessage.wav b/static/sfx/newMessage.wav
deleted file mode 100644
index 16969c3c..00000000
Binary files a/static/sfx/newMessage.wav and /dev/null differ
diff --git a/static/sfx/receivedMessage.wav b/static/sfx/receivedMessage.wav
deleted file mode 100644
index 11e0fe65..00000000
Binary files a/static/sfx/receivedMessage.wav and /dev/null differ
diff --git a/static/sfx/sentMessage.wav b/static/sfx/sentMessage.wav
deleted file mode 100644
index 16969c3c..00000000
Binary files a/static/sfx/sentMessage.wav and /dev/null differ
diff --git a/static/sfx/startedSharingScreen.wav b/static/sfx/startedSharingScreen.wav
deleted file mode 100644
index 45039758..00000000
Binary files a/static/sfx/startedSharingScreen.wav and /dev/null differ
diff --git a/static/sfx/stoppedSharingScreen.wav b/static/sfx/stoppedSharingScreen.wav
deleted file mode 100644
index cbb6b831..00000000
Binary files a/static/sfx/stoppedSharingScreen.wav and /dev/null differ
diff --git a/static/sfx/unmutedMic.wav b/static/sfx/unmutedMic.wav
deleted file mode 100644
index 386365ca..00000000
Binary files a/static/sfx/unmutedMic.wav and /dev/null differ
diff --git a/static/sfx/userJoinedChannel.wav b/static/sfx/userJoinedChannel.wav
deleted file mode 100644
index 845d0ff3..00000000
Binary files a/static/sfx/userJoinedChannel.wav and /dev/null differ
diff --git a/static/sfx/userLeftChannel.wav b/static/sfx/userLeftChannel.wav
deleted file mode 100644
index 718797a1..00000000
Binary files a/static/sfx/userLeftChannel.wav and /dev/null differ
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index fe7c72bc..34b22952 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -2,7 +2,7 @@ module.exports = {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {},
 	daisyui: {
-		themes: ['dark', 'light'] //, 'cyberpunk', 'synthwave']
+		themes: ['dark', 'light', 'cyberpunk', 'synthwave']
 	},
 	plugins: [
 		require('@tailwindcss/aspect-ratio'),
diff --git a/tests/premium.spec.ts b/tests/premium.spec.ts
deleted file mode 100644
index 4d0acbcf..00000000
--- a/tests/premium.spec.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { expect, test } from '@playwright/test'
-
-test('premium page had expected to load', async ({ page }) => {
-	// await page.goto('/premium/602863591a512c0401910899')
-	// await expect(page).toHaveURL(/.*premium/)
-})