diff --git a/package.json b/package.json
index 5d6d01ff..0fe38e5d 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
 		"daisyui": "^2.52.0",
 		"nprogress": "^0.2.0",
 		"playwright-e2e-coverage-report": "^1.0.28",
+		"svelte-tags-input": "^5.0.0",
 		"theme-change": "^2.5.0"
 	}
 }
diff --git a/src/app.d.ts b/src/app.d.ts
index f6f54253..083333c1 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -23,3 +23,5 @@ declare namespace svelteHTML {
 }
 
 declare const __VERSION__: string
+
+declare module 'svelte-tags-input'
diff --git a/src/lib/components/Browse/DrawerCreateChannel.svelte b/src/lib/components/Browse/DrawerCreateChannel.svelte
index 976e0b3c..d7338601 100644
--- a/src/lib/components/Browse/DrawerCreateChannel.svelte
+++ b/src/lib/components/Browse/DrawerCreateChannel.svelte
@@ -2,7 +2,7 @@
 	// import IconPhoto from '$lib/assets/icons/IconPhoto.svelte'
 	import { tags } from '$lib/stores/channelStore'
 	import { onMount } from 'svelte'
-	import Tags from '$lib/components/Browse/Tags.svelte'
+	import Tags from 'svelte-tags-input'
 	import DrawerAddCategory from '$lib/components/Browse/DrawerAddCategory.svelte'
 	import { get } from '$lib/api'
 	import { enhance } from '$app/forms'
@@ -28,7 +28,6 @@
 		showThumbnail = false,
 		showAddCategory = false,
 		maxTag = 3,
-		maxTagChars = 18,
 		maxCategory = 4,
 		isLoadingChannel = false
 
@@ -65,7 +64,7 @@
 		newChannel = newChannel
 	}
 
-	const onTagValidation = (evt: any) => {
+	const onValidation = (evt: any) => {
 		if (Number(evt.target.value) < 1) {
 			evt.target.setCustomValidity('Please fill out this field.')
 		}
@@ -165,7 +164,6 @@
 							<Tags
 								bind:tags={newChannel.tags}
 								maxTags={maxTag}
-								maxChars={maxTagChars}
 								id="tags"
 								placeholder={newChannel.tags.length > 0 ? '' : 'Tag'} />
 							<span class="absolute right-0 top-1/2 text-gray-400 pr-3">({maxTagLabel})</span>
@@ -177,7 +175,7 @@
 									min="1"
 									class="opacity-0 pointer-events-none absolute left-0 right-0 mx-auto bottom-0"
 									bind:value={newChannel.tags.length}
-									on:invalid={onTagValidation} />
+									on:invalid={onValidation} />
 							{/if}
 						</div>
 						<div class="relative">
@@ -185,7 +183,6 @@
 								on:click={() => (showAddCategory = true)}
 								type="text"
 								name="category"
-								required={!newChannel.category.length}
 								placeholder={newChannel?.category?.length ? '' : 'Category'}
 								class="input input-primary input-bordered mt-5 w-full" />
 							<span class="absolute right-0 top-1/2 text-gray-400 pr-3">({maxCategoryLabel})</span>
@@ -196,6 +193,16 @@
 									{/each}
 								{/if}
 							</span>
+							{#if newChannel.category.length === 0}
+								<input
+									type="number"
+									name="mincats"
+									required
+									min="1"
+									class="opacity-0 pointer-events-none absolute left-0 right-0 mx-auto bottom-0"
+									bind:value={newChannel.category.length}
+									on:invalid={onValidation} />
+							{/if}
 						</div>
 						<!-- <div class="flex flex-row mt-5 ">
 							<input
diff --git a/src/lib/components/Browse/Tags.svelte b/src/lib/components/Browse/Tags.svelte
deleted file mode 100644
index 131ae476..00000000
--- a/src/lib/components/Browse/Tags.svelte
+++ /dev/null
@@ -1,557 +0,0 @@
-<script>
-	let tag = ''
-	let arrelementsmatch = []
-	let autoCompleteIndex = -1
-
-	let regExpEscape = (s) => {
-		return s.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
-	}
-
-	export let tags
-	export let addKeys
-	export let maxTags
-	export let onlyUnique
-	export let removeKeys
-	export let placeholder
-	export let allowPaste
-	export let allowDrop
-	export let splitWith
-	export let autoComplete
-	export let autoCompleteFilter
-	export let autoCompleteKey
-	export let autoCompleteMarkupKey
-	export let name
-	export let id
-	export let allowBlur
-	export let disable
-	export let minChars
-	export let maxChars
-	export let onlyAutocomplete
-	export let labelText
-	export let labelShow
-	export let readonly
-	export let onTagClick
-	export let autoCompleteShowKey
-
-	let layoutElement
-
-	$: tags = tags || []
-	$: addKeys = addKeys || [13]
-	$: maxTags = maxTags || false
-	$: onlyUnique = onlyUnique || false
-	$: removeKeys = removeKeys || [8]
-	$: placeholder = placeholder || ''
-	$: allowPaste = allowPaste || false
-	$: allowDrop = allowDrop || false
-	$: splitWith = splitWith || ','
-	$: autoComplete = autoComplete || false
-	$: autoCompleteFilter = typeof autoCompleteFilter == 'undefined' ? true : false
-	$: autoCompleteKey = autoCompleteKey || false
-	$: autoCompleteMarkupKey = autoCompleteMarkupKey || false
-	$: name = name || 'svelte-tags-input'
-	$: id = id || uniqueID()
-	$: allowBlur = allowBlur || false
-	$: disable = disable || false
-	$: minChars = minChars ?? 1
-	$: maxChars = maxChars ?? 20
-	$: onlyAutocomplete = onlyAutocomplete || false
-	$: labelText = labelText || name
-	$: labelShow = labelShow || false
-	$: readonly = readonly || false
-	$: onTagClick = onTagClick || function () {}
-	$: autoCompleteShowKey = autoCompleteShowKey || autoCompleteKey
-
-	$: matchsID = id + '_matchs'
-
-	let storePlaceholder = placeholder
-
-	function setTag(e) {
-		const currentTag = e.target.value
-
-		if (addKeys) {
-			addKeys.forEach(function (key) {
-				if (key === e.keyCode) {
-					if (currentTag) e.preventDefault()
-
-					/* switch (input.keyCode) {
-                case 9:
-                    // TAB add first element on the autoComplete list
-                    if (autoComplete && document.getElementById(matchsID)) {                        
-                        addTag(document.getElementById(matchsID).querySelectorAll("li")[0].textContent);
-                    } else {
-                        addTag(currentTag);
-                    }                    
-                    break;
-                default:
-                    addTag(currentTag);
-                    break;
-                } */
-					if (autoComplete && document.getElementById(matchsID)) {
-						addTag(arrelementsmatch?.[autoCompleteIndex]?.label)
-					} else {
-						addTag(currentTag)
-					}
-				}
-			})
-		}
-
-		if (removeKeys) {
-			removeKeys.forEach(function (key) {
-				if (key === e.keyCode && tag === '') {
-					tags.pop()
-					tags = tags
-
-					arrelementsmatch = []
-					document.getElementById(id).readOnly = false
-					placeholder = storePlaceholder
-					document.getElementById(id).focus()
-				}
-			})
-		}
-
-		// ArrowDown : focus on first element of the autocomplete
-		if (e.keyCode === 40 && autoComplete && document.getElementById(matchsID)) {
-			// Last element on the list ? Go to the first
-			if (autoCompleteIndex + 1 === arrelementsmatch.length) autoCompleteIndex = 0
-			else autoCompleteIndex++
-		} else if (e.keyCode === 38) {
-			// ArrowUp
-			// First element on the list ? Go to the last
-			if (autoCompleteIndex <= 0) autoCompleteIndex = arrelementsmatch.length - 1
-			else autoCompleteIndex--
-		} else if (e.keyCode === 27) {
-			// Escape
-			arrelementsmatch = []
-			document.getElementById(id).focus()
-		}
-	}
-
-	function addTag(currentTag) {
-		if (typeof currentTag === 'object' && currentTag !== null) {
-			if (!autoCompleteKey) {
-				return console.error(
-					"'autoCompleteKey' is necessary if 'autoComplete' result is an array of objects"
-				)
-			}
-
-			if (onlyUnique) {
-				let found = tags?.find((elem) => elem[autoCompleteKey] === currentTag[autoCompleteKey])
-
-				if (found) return
-			}
-
-			var currentObjTags = currentTag
-			currentTag = currentTag[autoCompleteKey].trim()
-		} else {
-			currentTag = currentTag.trim()
-		}
-
-		if (currentTag == '') return
-		if (maxTags && tags.length == maxTags) return
-		if (onlyUnique && tags.includes(currentTag)) return
-		if (onlyAutocomplete && arrelementsmatch.length === 0) return
-
-		tags.push(currentObjTags ? currentObjTags : currentTag)
-		tags = tags
-		tag = ''
-
-		// Hide autocomplete list
-		// Focus on svelte tags input
-		arrelementsmatch = []
-		autoCompleteIndex = -1
-		document.getElementById(id).focus()
-
-		if (maxTags && tags.length == maxTags) {
-			document.getElementById(id).readOnly = true
-			placeholder = ''
-		}
-	}
-
-	function removeTag(i) {
-		tags.splice(i, 1)
-		tags = tags
-
-		// Hide autocomplete list
-		// Focus on svelte tags input
-		arrelementsmatch = []
-		document.getElementById(id).readOnly = false
-		placeholder = storePlaceholder
-		document.getElementById(id).focus()
-	}
-
-	function onPaste(e) {
-		if (!allowPaste) return
-		e.preventDefault()
-
-		const data = getClipboardData(e)
-		splitTags(data).map((tag) => addTag(tag))
-	}
-
-	function onDrop(e) {
-		if (!allowDrop) return
-		e.preventDefault()
-
-		const data = e.dataTransfer.getData('Text')
-		splitTags(data).map((tag) => addTag(tag))
-	}
-
-	function onFocus() {
-		layoutElement.classList.add('focus')
-	}
-
-	function onBlur(e, tag) {
-		layoutElement.classList.remove('focus')
-
-		if (allowBlur) {
-			// A match is highlighted
-			if (arrelementsmatch.length && autoCompleteIndex > -1) {
-				addTag(arrelementsmatch?.[autoCompleteIndex]?.label)
-			}
-			// There is no match, but we may add a new tag
-			else if (!arrelementsmatch.length) {
-				e.preventDefault()
-				addTag(tag)
-			}
-		}
-
-		arrelementsmatch = []
-		autoCompleteIndex = -1
-	}
-
-	function onClick() {
-		minChars == 0 && getMatchElements()
-	}
-
-	function getClipboardData(e) {
-		if (window.clipboardData) {
-			return window.clipboardData.getData('Text')
-		}
-
-		if (e.clipboardData) {
-			return e.clipboardData.getData('text/plain')
-		}
-
-		return ''
-	}
-
-	function splitTags(data) {
-		return data.split(splitWith).map((tag) => tag.trim())
-	}
-
-	function escapeHTML(string) {
-		const htmlEscapes = {
-			'&': '&amp;',
-			'<': '&lt;',
-			'>': '&gt;',
-			'"': '&quot;',
-			"'": '&#x27;',
-			'/': '&#x2F;'
-		}
-		return ('' + string).replace(/[&<>"'\/]/g, (match) => htmlEscapes[match])
-	}
-
-	function buildMatchMarkup(search, value) {
-		return escapeHTML(value).replace(
-			RegExp(regExpEscape(search.toLowerCase()), 'i'),
-			'<strong>$&</strong>'
-		)
-	}
-
-	async function getMatchElements(input) {
-		if (!autoComplete) return
-		if (maxTags && tags.length >= maxTags) return
-
-		let value = input ? input.target.value : ''
-		let autoCompleteValues = []
-
-		if (Array.isArray(autoComplete)) {
-			autoCompleteValues = autoComplete
-		}
-
-		if (typeof autoComplete === 'function') {
-			if (autoComplete.constructor.name === 'AsyncFunction') {
-				autoCompleteValues = await autoComplete(value)
-			} else {
-				autoCompleteValues = autoComplete(value)
-			}
-		}
-
-		if (autoCompleteValues.constructor.name === 'Promise') {
-			autoCompleteValues = await autoCompleteValues
-		}
-		// Escape
-		if (
-			(minChars > 0 && value == '') ||
-			(input && input.keyCode === 27) ||
-			value.length < minChars
-		) {
-			arrelementsmatch = []
-			return
-		}
-
-		let matchs = autoCompleteValues
-
-		if (typeof autoCompleteValues[0] === 'object' && autoCompleteValues !== null) {
-			if (!autoCompleteKey) {
-				return console.error(
-					"'autoCompleteValue' is necessary if 'autoComplete' result is an array of objects"
-				)
-			}
-
-			if (autoCompleteFilter !== false) {
-				matchs = autoCompleteValues.filter((e) =>
-					e[autoCompleteKey].toLowerCase().includes(value.toLowerCase())
-				)
-			}
-			matchs = matchs.map((matchTag) => {
-				return {
-					label: matchTag,
-					search: autoCompleteMarkupKey
-						? matchTag[autoCompleteMarkupKey]
-						: buildMatchMarkup(value, matchTag[autoCompleteKey])
-				}
-			})
-		} else {
-			if (autoCompleteFilter !== false) {
-				matchs = autoCompleteValues.filter((e) => e.toLowerCase().includes(value.toLowerCase()))
-			}
-			matchs = matchs.map((matchTag) => {
-				return {
-					label: matchTag,
-					search: buildMatchMarkup(value, matchTag)
-				}
-			})
-		}
-
-		if (onlyUnique === true && !autoCompleteKey) {
-			matchs = matchs.filter((tag) => !tags.includes(tag.label))
-		}
-
-		arrelementsmatch = matchs
-	}
-
-	function uniqueID() {
-		return 'sti_' + Math.random().toString(36).substring(2, 11)
-	}
-</script>
-
-<div
-	class="svelte-tags-input-layout"
-	class:sti-layout-disable={disable}
-	class:sti-layout-readonly={readonly}
-	bind:this={layoutElement}>
-	<label for={id} class={labelShow ? '' : 'sr-only'}>{labelText}</label>
-
-	{#if tags.length > 0}
-		{#each tags as tag, i}
-			<button class="svelte-tags-input-tag" on:click={onTagClick(tag)}>
-				{#if typeof tag === 'string'}
-					{tag}
-				{:else}
-					{tag[autoCompleteShowKey]}
-				{/if}
-				{#if !disable && !readonly}
-					<span class="svelte-tags-input-tag-remove" on:pointerdown={() => removeTag(i)}>
-						&#215;</span>
-				{/if}
-			</button>
-		{/each}
-	{/if}
-	<input
-		type="text"
-		{id}
-		{name}
-		bind:value={tag}
-		on:keydown={setTag}
-		on:keyup={getMatchElements}
-		on:paste={onPaste}
-		on:drop={onDrop}
-		on:focus={onFocus}
-		on:blur={(e) => onBlur(e, tag)}
-		on:pointerdown={onClick}
-		maxlength={maxChars}
-		class="svelte-tags-input"
-		{placeholder}
-		disabled={disable || readonly}
-		autocomplete="off" />
-</div>
-
-{#if autoComplete && arrelementsmatch.length > 0}
-	<div class="svelte-tags-input-matchs-parent">
-		<ul id="{id}_matchs" class="svelte-tags-input-matchs">
-			{#each arrelementsmatch as element, index}
-				<li
-					tabindex="-1"
-					class:focus={index === autoCompleteIndex}
-					on:pointerdown|preventDefault={() => addTag(element.label)}>
-					{@html element.search}
-				</li>
-			{/each}
-		</ul>
-	</div>
-{/if}
-
-<style>
-	/* CSS svelte-tags-input */
-
-	.svelte-tags-input,
-	.svelte-tags-input-tag,
-	.svelte-tags-input-matchs,
-	.svelte-tags-input-layout label {
-		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-			'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-		font-size: 14px;
-		padding: 2px 5px;
-	}
-
-	.svelte-tags-input-layout label {
-		margin: 4px 5px 0 0;
-		padding: 0;
-		font-weight: 500;
-	}
-
-	/* svelte-tags-input-layout */
-
-	.svelte-tags-input-layout {
-		display: -webkit-box;
-		display: -ms-flexbox;
-		display: flex;
-		-ms-flex-wrap: wrap;
-		flex-wrap: wrap;
-		-webkit-box-align: center;
-		-ms-flex-align: center;
-		align-items: center;
-		padding: 0px 5px 5px 5px;
-		border: solid 1px #ccc;
-		background: #fff;
-		border-radius: 2px;
-	}
-
-	.svelte-tags-input-layout:focus,
-	.svelte-tags-input-layout:hover {
-		border: solid 1px #000;
-	}
-
-	.svelte-tags-input-layout:focus-within {
-		outline: 5px auto -webkit-focus-ring-color;
-	}
-
-	/* svelte-tags-input */
-
-	.svelte-tags-input {
-		/* Parent handles background */
-		background: unset;
-		-webkit-box-flex: 1;
-		-ms-flex: 1;
-		flex: 1;
-		margin: 0;
-		margin-top: 5px;
-		border: none;
-	}
-
-	.svelte-tags-input:focus {
-		outline: 0;
-	}
-
-	/* svelte-tags-input-tag */
-
-	.svelte-tags-input-tag {
-		cursor: text;
-		display: -webkit-box;
-		display: -ms-flexbox;
-		display: flex;
-		white-space: nowrap;
-		user-select: text;
-		list-style: none;
-		background: #000;
-		border: none;
-		color: #fff;
-		border-radius: 2px;
-		margin-right: 5px;
-		margin-top: 5px;
-		font-weight: 400;
-	}
-
-	/*.svelte-tags-input-tag:hover {
-    background: #CCC;
-}*/
-
-	.svelte-tags-input-tag-remove {
-		cursor: pointer;
-		margin-left: 5px;
-	}
-
-	/* svelte-tags-input-matchs */
-
-	.svelte-tags-input-matchs-parent {
-		position: relative;
-	}
-
-	.svelte-tags-input-matchs {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		margin: 3px 0;
-		padding: 0px;
-		background: #fff;
-		border: solid 1px #ccc;
-		border-radius: 2px;
-		max-height: 310px;
-		overflow: scroll;
-		overflow-x: auto;
-	}
-
-	.svelte-tags-input-matchs li {
-		list-style: none;
-		padding: 5px;
-		border-radius: 2px;
-		cursor: pointer;
-	}
-
-	.svelte-tags-input-matchs li:hover,
-	.svelte-tags-input-matchs li.focus {
-		background: #000;
-		color: #fff;
-		outline: none;
-	}
-
-	/* svelte-tags-input disabled */
-
-	.svelte-tags-input:disabled {
-		background: transparent;
-	}
-
-	.svelte-tags-input-layout.sti-layout-disable,
-	.svelte-tags-input-layout.sti-layout-disable input {
-		cursor: not-allowed;
-		background: #eaeaea;
-	}
-
-	.svelte-tags-input-layout.sti-layout-disable:hover,
-	.svelte-tags-input-layout.sti-layout-disable:focus,
-	.svelte-tags-input-layout.sti-layout-readonly:hover,
-	.svelte-tags-input-layout.sti-layout-readonly:focus {
-		border-color: #ccc;
-	}
-
-	.svelte-tags-input-layout.sti-layout-disable .svelte-tags-input-tag {
-		background: #aeaeae;
-	}
-
-	.svelte-tags-input-layout.sti-layout-disable .svelte-tags-input-tag-remove {
-		cursor: not-allowed;
-	}
-
-	.svelte-tags-input-layout label.sr-only {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		padding: 0;
-		margin: -1px;
-		overflow: hidden;
-		clip: rect(0, 0, 0, 0);
-		white-space: nowrap;
-		border: 0;
-	}
-</style>
diff --git a/src/lib/components/Channel/Chat/DrawerEditChannel.svelte b/src/lib/components/Channel/Chat/DrawerEditChannel.svelte
index 6cce4126..0940e870 100644
--- a/src/lib/components/Channel/Chat/DrawerEditChannel.svelte
+++ b/src/lib/components/Channel/Chat/DrawerEditChannel.svelte
@@ -2,7 +2,7 @@
 	// import IconPhoto from '$lib/assets/icons/IconPhoto.svelte'
 	import { tags } from '$lib/stores/channelStore'
 	import { onDestroy, onMount } from 'svelte'
-	import Tags from '$lib/components/Browse/Tags.svelte'
+	import Tags from 'svelte-tags-input'
 	import DrawerAddCategory from '$lib/components/Browse/DrawerAddCategory.svelte'
 	import { get } from '$lib/api'
 	import { enhance } from '$app/forms'
@@ -16,7 +16,6 @@
 		showThumbnail = false,
 		showAddCategory = false,
 		maxTag = 3,
-		maxTagChars = 18,
 		maxCategory = 4
 
 	$: maxTagLabel = channel?.tags.length == maxTag ? 'max reached' : 'max ' + maxTag
@@ -152,7 +151,6 @@
 							<Tags
 								bind:tags={channel.tags}
 								maxTags={maxTag}
-								maxChars={maxTagChars}
 								id="tags"
 								placeholder={channel.tags.length > 0 ? '' : 'Tag'} />
 							<span class="absolute right-0 top-1/2 text-gray-400 pr-3">({maxTagLabel})</span>