diff --git a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
index d0b0f31f..52626f3a 100644
--- a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
@@ -61,6 +61,7 @@ import {
 import Pagination from './Pagination';
 import { url } from '@/components/utils/URLs';
 import { MultiSelectFilter } from '@/components/ui/multi-select';
+import { TagSelector } from '@/components/ui/tagSelector';
 import BottomBar from '../BottomBar/BottomBar';
 import {
   addTaskToBackend,
@@ -106,7 +107,6 @@ export const Tasks = (
   });
   const [isAddTaskOpen, setIsAddTaskOpen] = useState(false);
   const [_isDialogOpen, setIsDialogOpen] = useState(false);
-  const [tagInput, setTagInput] = useState('');
 
   const [isEditing, setIsEditing] = useState(false);
   const [editedDescription, setEditedDescription] = useState('');
@@ -114,7 +114,6 @@ export const Tasks = (
   const [editedTags, setEditedTags] = useState<string[]>(
     _selectedTask?.tags || []
   );
-  const [editTagInput, setEditTagInput] = useState<string>('');
   const [isEditingTags, setIsEditingTags] = useState(false);
   const [isEditingPriority, setIsEditingPriority] = useState(false);
   const [editedPriority, setEditedPriority] = useState('NONE');
@@ -609,35 +608,6 @@ export const Tasks = (
     }
   };
 
-  // Handle adding a tag
-  const handleAddTag = () => {
-    if (tagInput && !newTask.tags.includes(tagInput, 0)) {
-      setNewTask({ ...newTask, tags: [...newTask.tags, tagInput] });
-      setTagInput(''); // Clear the input field
-    }
-  };
-
-  // Handle adding a tag while editing
-  const handleAddEditTag = () => {
-    if (editTagInput && !editedTags.includes(editTagInput, 0)) {
-      setEditedTags([...editedTags, editTagInput]);
-      setEditTagInput('');
-    }
-  };
-
-  // Handle removing a tag
-  const handleRemoveTag = (tagToRemove: string) => {
-    setNewTask({
-      ...newTask,
-      tags: newTask.tags.filter((tag) => tag !== tagToRemove),
-    });
-  };
-
-  // Handle removing a tag while editing task
-  const handleRemoveEditTag = (tagToRemove: string) => {
-    setEditedTags(editedTags.filter((tag) => tag !== tagToRemove));
-  };
-
   const sortWithOverdueOnTop = (tasks: Task[]) => {
     return [...tasks].sort((a, b) => {
       const aOverdue = a.status === 'pending' && isOverdue(a.due);
@@ -723,8 +693,7 @@ export const Tasks = (
       task.depends || []
     );
 
-    setIsEditingTags(false);
-    setEditTagInput('');
+    setIsEditingTags(false); // Exit editing mode
   };
 
   const handleCancelTags = () => {
@@ -1062,40 +1031,16 @@ export const Tasks = (
                               >
                                 Tags
                               </Label>
-                              <Input
-                                id="tags"
-                                name="tags"
-                                placeholder="Add a tag"
-                                value={tagInput}
-                                onChange={(e) => setTagInput(e.target.value)}
-                                onKeyDown={(e) =>
-                                  e.key === 'Enter' && handleAddTag()
-                                } // Allow adding tag on pressing Enter
-                                required
-                                className="col-span-3"
-                              />
-                            </div>
-
-                            <div className="mt-2">
-                              {newTask.tags.length > 0 && (
-                                <div className="grid grid-cols-4 items-center">
-                                  <div> </div>
-                                  <div className="flex flex-wrap gap-2 col-span-3">
-                                    {newTask.tags.map((tag, index) => (
-                                      <Badge key={index}>
-                                        <span>{tag}</span>
-                                        <button
-                                          type="button"
-                                          className="ml-2 text-red-500"
-                                          onClick={() => handleRemoveTag(tag)}
-                                        >
-                                          ✖
-                                        </button>
-                                      </Badge>
-                                    ))}
-                                  </div>
-                                </div>
-                              )}
+                              <div className="col-span-3">
+                                <TagSelector
+                                  options={uniqueTags}
+                                  selected={newTask.tags}
+                                  onChange={(updated) =>
+                                    setNewTask({ ...newTask, tags: updated })
+                                  }
+                                  placeholder="Select or Create Tags"
+                                />
+                              </div>
                             </div>
                           </div>
                           <DialogFooter>
@@ -1924,86 +1869,31 @@ export const Tasks = (
                                         <TableCell>Tags:</TableCell>
                                         <TableCell>
                                           {isEditingTags ? (
-                                            <div>
-                                              <div className="flex items-center w-full">
-                                                <Input
-                                                  type="text"
-                                                  value={editTagInput}
-                                                  onChange={(e) => {
-                                                    // For allowing only alphanumeric characters
-                                                    if (
-                                                      e.target.value.length > 1
-                                                    ) {
-                                                      /^[a-zA-Z0-9]*$/.test(
-                                                        e.target.value.trim()
-                                                      )
-                                                        ? setEditTagInput(
-                                                            e.target.value.trim()
-                                                          )
-                                                        : '';
-                                                    } else {
-                                                      /^[a-zA-Z]*$/.test(
-                                                        e.target.value.trim()
-                                                      )
-                                                        ? setEditTagInput(
-                                                            e.target.value.trim()
-                                                          )
-                                                        : '';
-                                                    }
-                                                  }}
-                                                  placeholder="Add a tag (press enter to add)"
-                                                  className="flex-grow mr-2"
-                                                  onKeyDown={(e) =>
-                                                    e.key === 'Enter' &&
-                                                    handleAddEditTag()
-                                                  }
-                                                />
-                                                <Button
-                                                  variant="ghost"
-                                                  size="icon"
-                                                  onClick={() =>
-                                                    handleSaveTags(task)
-                                                  }
-                                                  aria-label="Save tags"
-                                                >
-                                                  <CheckIcon className="h-4 w-4 text-green-500" />
-                                                </Button>
-                                                <Button
-                                                  variant="ghost"
-                                                  size="icon"
-                                                  onClick={handleCancelTags}
-                                                  aria-label="Cancel editing tags"
-                                                >
-                                                  <XIcon className="h-4 w-4 text-red-500" />
-                                                </Button>
-                                              </div>
-                                              <div className="mt-2">
-                                                {editedTags != null &&
-                                                  editedTags.length > 0 && (
-                                                    <div>
-                                                      <div className="flex flex-wrap gap-2 col-span-3">
-                                                        {editedTags.map(
-                                                          (tag, index) => (
-                                                            <Badge key={index}>
-                                                              <span>{tag}</span>
-                                                              <button
-                                                                type="button"
-                                                                className="ml-2 text-red-500"
-                                                                onClick={() =>
-                                                                  handleRemoveEditTag(
-                                                                    tag
-                                                                  )
-                                                                }
-                                                              >
-                                                                ✖
-                                                              </button>
-                                                            </Badge>
-                                                          )
-                                                        )}
-                                                      </div>
-                                                    </div>
-                                                  )}
-                                              </div>
+                                            <div className="flex items-center">
+                                              <TagSelector
+                                                options={uniqueTags}
+                                                selected={editedTags}
+                                                onChange={(updated) =>
+                                                  setEditedTags(updated)
+                                                }
+                                                placeholder="Select or Create Tags"
+                                              />
+                                              <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                onClick={() =>
+                                                  handleSaveTags(task)
+                                                }
+                                              >
+                                                <CheckIcon className="h-4 w-4 text-green-500" />
+                                              </Button>
+                                              <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                onClick={handleCancelTags}
+                                              >
+                                                <XIcon className="h-4 w-4 text-red-500" />
+                                              </Button>
                                             </div>
                                           ) : (
                                             <div className="flex items-center flex-wrap">
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
index b5371f55..e58bd4be 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
@@ -1,11 +1,4 @@
-import {
-  render,
-  screen,
-  fireEvent,
-  act,
-  within,
-  waitFor,
-} from '@testing-library/react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
 import { Tasks } from '../Tasks';
 
 // Mock props for the Tasks component
@@ -45,6 +38,14 @@ jest.mock('@/components/ui/multi-select', () => ({
   )),
 }));
 
+jest.mock('@/components/ui/tagSelector', () => ({
+  TagSelector: jest.fn(({ selected }) => (
+    <div data-testid="mock-tag-selector">
+      Mocked TagSelector - Selected: {selected?.join(', ') || 'none'}
+    </div>
+  )),
+}));
+
 jest.mock('../../BottomBar/BottomBar', () => {
   return jest.fn(() => <div>Mocked BottomBar</div>);
 });
@@ -179,123 +180,6 @@ describe('Tasks Component', () => {
     expect(screen.getByTestId('current-page')).toHaveTextContent('1');
   });
 
-  test('shows tags as badges in task dialog and allows editing (add on Enter)', async () => {
-    render(<Tasks {...mockProps} />);
-
-    expect(await screen.findByText('Task 1')).toBeInTheDocument();
-
-    const taskRow = screen.getByText('Task 1');
-    fireEvent.click(taskRow);
-
-    expect(await screen.findByText('Tags:')).toBeInTheDocument();
-
-    expect(screen.getByText('tag1')).toBeInTheDocument();
-
-    const tagsLabel = screen.getByText('Tags:');
-    const tagsRow = tagsLabel.closest('tr') as HTMLElement;
-    const pencilButton = within(tagsRow).getByRole('button');
-    fireEvent.click(pencilButton);
-
-    const editInput = await screen.findByPlaceholderText(
-      'Add a tag (press enter to add)'
-    );
-
-    fireEvent.change(editInput, { target: { value: 'newtag' } });
-    fireEvent.keyDown(editInput, { key: 'Enter', code: 'Enter' });
-
-    expect(await screen.findByText('newtag')).toBeInTheDocument();
-
-    expect((editInput as HTMLInputElement).value).toBe('');
-  });
-
-  test('adds a tag while editing and saves updated tags to backend', async () => {
-    render(<Tasks {...mockProps} />);
-
-    expect(await screen.findByText('Task 1')).toBeInTheDocument();
-
-    const taskRow = screen.getByText('Task 1');
-    fireEvent.click(taskRow);
-
-    expect(await screen.findByText('Tags:')).toBeInTheDocument();
-
-    const tagsLabel = screen.getByText('Tags:');
-    const tagsRow = tagsLabel.closest('tr') as HTMLElement;
-    const pencilButton = within(tagsRow).getByRole('button');
-    fireEvent.click(pencilButton);
-
-    const editInput = await screen.findByPlaceholderText(
-      'Add a tag (press enter to add)'
-    );
-
-    fireEvent.change(editInput, { target: { value: 'addedtag' } });
-    fireEvent.keyDown(editInput, { key: 'Enter', code: 'Enter' });
-
-    expect(await screen.findByText('addedtag')).toBeInTheDocument();
-
-    const saveButton = await screen.findByRole('button', {
-      name: /save tags/i,
-    });
-    fireEvent.click(saveButton);
-
-    await waitFor(() => {
-      const hooks = require('../hooks');
-      expect(hooks.editTaskOnBackend).toHaveBeenCalled();
-    });
-
-    const hooks = require('../hooks');
-    const callArg = hooks.editTaskOnBackend.mock.calls[0][0];
-    expect(callArg.tags).toEqual(expect.arrayContaining(['tag1', 'addedtag']));
-  });
-
-  test('removes a tag while editing and saves updated tags to backend', async () => {
-    render(<Tasks {...mockProps} />);
-
-    expect(await screen.findByText('Task 1')).toBeInTheDocument();
-
-    const taskRow = screen.getByText('Task 1');
-    fireEvent.click(taskRow);
-
-    expect(await screen.findByText('Tags:')).toBeInTheDocument();
-
-    const tagsLabel = screen.getByText('Tags:');
-    const tagsRow = tagsLabel.closest('tr') as HTMLElement;
-    const pencilButton = within(tagsRow).getByRole('button');
-    fireEvent.click(pencilButton);
-
-    const editInput = await screen.findByPlaceholderText(
-      'Add a tag (press enter to add)'
-    );
-
-    fireEvent.change(editInput, { target: { value: 'newtag' } });
-    fireEvent.keyDown(editInput, { key: 'Enter', code: 'Enter' });
-
-    expect(await screen.findByText('newtag')).toBeInTheDocument();
-
-    const tagBadge = screen.getByText('tag1');
-    const badgeContainer = (tagBadge.closest('div') ||
-      tagBadge.parentElement) as HTMLElement;
-
-    const removeButton = within(badgeContainer).getByText('✖');
-    fireEvent.click(removeButton);
-
-    expect(screen.queryByText('tag1')).not.toBeInTheDocument();
-
-    const saveButton = await screen.findByRole('button', {
-      name: /save tags/i,
-    });
-    fireEvent.click(saveButton);
-
-    await waitFor(() => {
-      const hooks = require('../hooks');
-      expect(hooks.editTaskOnBackend).toHaveBeenCalled();
-    });
-
-    const hooks = require('../hooks');
-    const callArg = hooks.editTaskOnBackend.mock.calls[0][0];
-
-    expect(callArg.tags).toEqual(expect.arrayContaining(['newtag', '-tag1']));
-  });
-
   test('shows red background on task ID and Overdue badge for overdue tasks', async () => {
     render(<Tasks {...mockProps} />);
 
@@ -314,6 +198,7 @@ describe('Tasks Component', () => {
     const overdueBadge = await screen.findByText('Overdue');
     expect(overdueBadge).toBeInTheDocument();
   });
+
   test('filters tasks with fuzzy search (handles typos)', async () => {
     jest.useFakeTimers();
 
@@ -336,4 +221,47 @@ describe('Tasks Component', () => {
 
     jest.useRealTimers();
   });
+
+  test('renders mocked TagSelector in Add Task dialog', async () => {
+    render(<Tasks {...mockProps} />);
+
+    const addButton = screen.getByRole('button', { name: /add task/i });
+
+    fireEvent.click(addButton);
+
+    expect(await screen.findByTestId('mock-tag-selector')).toBeInTheDocument();
+  });
+
+  test('TagSelector receives correct options and selected values', async () => {
+    render(<Tasks {...mockProps} />);
+
+    fireEvent.click(screen.getAllByText('Add Task')[0]);
+
+    const tagSelector = await screen.findByTestId('mock-tag-selector');
+
+    expect(tagSelector).toHaveTextContent('Selected: none');
+  });
+
+  test('Selecting tags updates newTask state', async () => {
+    (
+      require('@/components/ui/tagSelector').TagSelector as jest.Mock
+    ).mockImplementation(({ selected, onChange }) => (
+      <div>
+        <button data-testid="add-tag" onClick={() => onChange(['tag1'])}>
+          Add Tag1
+        </button>
+        <div data-testid="mock-tag-selector">
+          {selected?.join(',') || 'none'}
+        </div>
+      </div>
+    ));
+
+    render(<Tasks {...mockProps} />);
+
+    fireEvent.click(screen.getAllByText('Add Task')[0]);
+
+    fireEvent.click(await screen.findByTestId('add-tag'));
+
+    expect(screen.getByTestId('mock-tag-selector')).toHaveTextContent('tag1');
+  });
 });
diff --git a/frontend/src/components/ui/popover.tsx b/frontend/src/components/ui/popover.tsx
index 24e02d1a..c31de5c5 100644
--- a/frontend/src/components/ui/popover.tsx
+++ b/frontend/src/components/ui/popover.tsx
@@ -11,18 +11,16 @@ const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
 >(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]',
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
+  <PopoverPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]',
+      className
+    )}
+    {...props}
+  />
 ));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
diff --git a/frontend/src/components/ui/tagSelector.tsx b/frontend/src/components/ui/tagSelector.tsx
new file mode 100644
index 00000000..0000af49
--- /dev/null
+++ b/frontend/src/components/ui/tagSelector.tsx
@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { Check, ChevronsUpDown, Plus, X } from 'lucide-react';
+
+import { cn } from '@/components/utils/utils';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+
+interface TagSelectorProps {
+  options: string[]; // all existing tags (uniqueTags)
+  selected: string[]; // currently selected tags
+  onChange: (tags: string[]) => void; // update parent state
+  placeholder?: string; // optional placeholder text
+}
+
+export function TagSelector({
+  options,
+  selected,
+  onChange,
+  placeholder = 'Select or create tags…',
+}: TagSelectorProps) {
+  const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState('');
+
+  const handleCreateTag = () => {
+    const newTag = search.trim();
+
+    if (!newTag) return;
+    if (selected.includes(newTag)) return;
+
+    onChange([...selected, newTag]);
+    setSearch('');
+  };
+
+  // Toggle existing tag selection
+  const handleSelectTag = (tag: string) => {
+    const alreadySelected = selected.includes(tag);
+
+    if (alreadySelected) {
+      onChange(selected.filter((t) => t !== tag));
+    } else {
+      onChange([...selected, tag]);
+    }
+  };
+
+  // Remove a tag when X inside the chip is clicked
+  const removeTagInsideChip = (tag: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    onChange(selected.filter((t) => t !== tag));
+  };
+
+  return (
+    <>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-full justify-between h-auto min-h-[40px] group"
+          >
+            <div className="flex flex-wrap gap-2 items-center">
+              {selected.length === 0 ? (
+                <span className="text-muted-foreground">{placeholder}</span>
+              ) : (
+                selected.map((tag) => (
+                  <span
+                    key={tag}
+                    className="px-2 py-1 rounded-md bg-muted text-sm flex items-center gap-1 hover:text-neutral-300
+                                group-hover:bg-black group-hover:text-muted-foreground transition-colors"
+                  >
+                    {tag}
+                    <X
+                      className="w-3 h-3 cursor-pointer hover:text-red-500"
+                      onClick={(e) => removeTagInsideChip(tag, e)}
+                    />
+                  </span>
+                ))
+              )}
+            </div>
+
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+
+        <PopoverContent
+          className="w-full md:w-[220px] bg-background"
+          align="start"
+          side="bottom"
+        >
+          <Command>
+            <CommandInput
+              placeholder="Search or create tag..."
+              value={search}
+              onInput={(e: any) => setSearch(e.target.value)}
+            />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+
+              <CommandGroup>
+                {/* CREATE NEW TAG OPTION */}
+                {search.trim() !== '' && !options.includes(search.trim()) && (
+                  <CommandItem
+                    onSelect={() => handleCreateTag()}
+                    className="flex items-center cursor-pointer text-green-500"
+                  >
+                    <Plus className="mr-2 h-4 w-4" />
+                    Create "{search}"
+                  </CommandItem>
+                )}
+
+                {/* EXISTING TAGS */}
+                {options.map((tag) => {
+                  const isSelected = selected.includes(tag);
+
+                  return (
+                    <CommandItem
+                      key={tag}
+                      value={tag}
+                      onSelect={() => handleSelectTag(tag)}
+                    >
+                      <Check
+                        className={cn(
+                          'mr-2 h-4 w-4',
+                          isSelected ? 'opacity-100' : 'opacity-0'
+                        )}
+                      />
+                      {tag}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}