diff --git a/src/lib/components/chat/Tags.svelte b/src/lib/components/chat/Tags.svelte
new file mode 100644
index 000000000..17ec064ee
--- /dev/null
+++ b/src/lib/components/chat/Tags.svelte
@@ -0,0 +1,52 @@
+<script>
+	import {
+		addTagById,
+		deleteTagById,
+		getAllChatTags,
+		getTagsById,
+		updateChatById
+	} from '$lib/apis/chats';
+	import { tags as _tags } from '$lib/stores';
+	import { onMount } from 'svelte';
+
+	import Tags from '../common/Tags.svelte';
+
+	export let chatId = '';
+	let tags = [];
+
+	const getTags = async () => {
+		return await getTagsById(localStorage.token, chatId).catch(async (error) => {
+			return [];
+		});
+	};
+
+	const addTag = async (tagName) => {
+		const res = await addTagById(localStorage.token, chatId, tagName);
+		tags = await getTags();
+
+		await updateChatById(localStorage.token, chatId, {
+			tags: tags
+		});
+
+		_tags.set(await getAllChatTags(localStorage.token));
+	};
+
+	const deleteTag = async (tagName) => {
+		const res = await deleteTagById(localStorage.token, chatId, tagName);
+		tags = await getTags();
+
+		await updateChatById(localStorage.token, chatId, {
+			tags: tags
+		});
+
+		_tags.set(await getAllChatTags(localStorage.token));
+	};
+
+	onMount(async () => {
+		if (chatId) {
+			tags = await getTags();
+		}
+	});
+</script>
+
+<Tags {tags} {deleteTag} {addTag} />
diff --git a/src/lib/components/common/Dropdown.svelte b/src/lib/components/common/Dropdown.svelte
index e8284a504..eaceeb3e2 100644
--- a/src/lib/components/common/Dropdown.svelte
+++ b/src/lib/components/common/Dropdown.svelte
@@ -4,10 +4,12 @@
 
 	import { flyAndScale } from '$lib/utils/transitions';
 
+	export let show = false;
 	const dispatch = createEventDispatcher();
 </script>
 
 <DropdownMenu.Root
+	bind:open={show}
 	onOpenChange={(state) => {
 		dispatch('change', state);
 	}}
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 33334b38b..a1a4e2ae8 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -538,6 +538,7 @@
 							{:else}
 								<div class="flex self-center space-x-1.5 z-10">
 									<ChatMenu
+										chatId={chat.id}
 										renameHandler={() => {
 											chatTitle = chat.title;
 											chatTitleEditId = chat.id;
diff --git a/src/lib/components/layout/Sidebar/ChatMenu.svelte b/src/lib/components/layout/Sidebar/ChatMenu.svelte
index b5a0a86a4..0eab11211 100644
--- a/src/lib/components/layout/Sidebar/ChatMenu.svelte
+++ b/src/lib/components/layout/Sidebar/ChatMenu.svelte
@@ -6,14 +6,19 @@
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Pencil from '$lib/components/icons/Pencil.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Tags from '$lib/components/chat/Tags.svelte';
 
 	export let renameHandler: Function;
 	export let deleteHandler: Function;
-
 	export let onClose: Function;
+
+	export let chatId = '';
+
+	let show = false;
 </script>
 
 <Dropdown
+	bind:show
 	on:change={(e) => {
 		if (e.detail === false) {
 			onClose();
@@ -51,6 +56,12 @@
 				<GarbageBin strokeWidth="2" />
 				<div class="flex items-center">Delete</div>
 			</DropdownMenu.Item>
+
+			<hr class="border-gray-100 dark:border-gray-800 mt-2.5 mb-1.5" />
+
+			<div class="flex p-1">
+				<Tags {chatId} />
+			</div>
 		</DropdownMenu.Content>
 	</div>
 </Dropdown>