diff --git a/.cspell.json b/.cspell.json
index dff7920e41e..0af9e2f3ec3 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -690,6 +690,7 @@
     "xyflow",
     "Sonner",
     "sonner",
+    "cmdk"
   ],
   "flagWords": [],
   "patterns": [
@@ -787,6 +788,6 @@
     "apps/web/src/studio/components/workflows/step-editor/editor/files.ts",
     "apps/web/src/pages/playground/web-container-configuration/sandbox-vite/*.ts",
     "apps/api/src/app/analytics/usecases/hubspot-identify-form/hubspot-identify-form.usecase.ts",
-    "apps/dashboard/eslint.config.js",
+    "apps/dashboard/eslint.config.js"
   ]
 }
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index 11a44a02c38..c761efa63dd 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -41,6 +41,7 @@
     "@xyflow/react": "^12.3.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "1.0.0",
     "date-fns": "^4.1.0",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.439.0",
diff --git a/apps/dashboard/src/components/create-workflow-button.tsx b/apps/dashboard/src/components/create-workflow-button.tsx
index 3e8e2c361df..aff422372e8 100644
--- a/apps/dashboard/src/components/create-workflow-button.tsx
+++ b/apps/dashboard/src/components/create-workflow-button.tsx
@@ -1,6 +1,6 @@
 import { createWorkflow } from '@/api/workflows';
 import { Button } from '@/components/primitives/button';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/primitives/form';
+import { FormField, FormItem, FormLabel, FormControl, FormMessage, Form } from '@/components/primitives/form/form';
 import { Input, InputField } from '@/components/primitives/input';
 import { Separator } from '@/components/primitives/separator';
 import {
@@ -16,6 +16,7 @@ import {
 import { TagInput } from '@/components/primitives/tag-input';
 import { Textarea } from '@/components/primitives/textarea';
 import { useEnvironment } from '@/context/environment/hooks';
+import { useTagsQuery } from '@/hooks/use-tags-query';
 import { QueryKeys } from '@/utils/query-keys';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { type CreateWorkflowDto, WorkflowCreationSourceEnum } from '@novu/shared';
@@ -54,6 +55,8 @@ export const CreateWorkflowButton = (props: CreateWorkflowButtonProps) => {
       setIsOpen(false);
     },
   });
+  const tagsQuery = useTagsQuery();
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: { description: '', identifier: '', name: '', tags: [] },
@@ -147,7 +150,7 @@ export const CreateWorkflowButton = (props: CreateWorkflowButtonProps) => {
                       <FormLabel hint="(max. 8)">Add tags</FormLabel>
                     </div>
                     <FormControl>
-                      <TagInput {...field} />
+                      <TagInput suggestions={tagsQuery.data?.data.map((tag) => tag.name) || []} {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
diff --git a/apps/dashboard/src/components/dashboard-layout.tsx b/apps/dashboard/src/components/dashboard-layout.tsx
index 1a2dafbe2f6..8977c31bca5 100644
--- a/apps/dashboard/src/components/dashboard-layout.tsx
+++ b/apps/dashboard/src/components/dashboard-layout.tsx
@@ -2,9 +2,9 @@ import { ReactNode } from 'react';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { IntercomProvider } from 'react-use-intercom';
-import { SideNavigation } from './side-navigation';
-import { HeaderNavigation } from './header-navigation';
 import { INTERCOM_APP_ID } from '@/config';
+import { SideNavigation } from '@/components/side-navigation/side-navigation';
+import { HeaderNavigation } from '@/components/header-navigation/header-navigation';
 
 export const DashboardLayout = ({
   children,
diff --git a/apps/dashboard/src/components/edit-workflow-layout.tsx b/apps/dashboard/src/components/edit-workflow-layout.tsx
index acebb9226a9..913db59aae0 100644
--- a/apps/dashboard/src/components/edit-workflow-layout.tsx
+++ b/apps/dashboard/src/components/edit-workflow-layout.tsx
@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { IntercomProvider } from 'react-use-intercom';
-import { HeaderNavigation } from './header-navigation';
 import { INTERCOM_APP_ID } from '@/config';
+import { HeaderNavigation } from '@/components/header-navigation/header-navigation';
 
 export const EditWorkflowLayout = ({
   children,
diff --git a/apps/dashboard/src/components/header-navigation/customer-support-button.tsx b/apps/dashboard/src/components/header-navigation/customer-support-button.tsx
index 3dedbf34e03..5d5658fb351 100644
--- a/apps/dashboard/src/components/header-navigation/customer-support-button.tsx
+++ b/apps/dashboard/src/components/header-navigation/customer-support-button.tsx
@@ -1,5 +1,5 @@
+import { useBootIntercom } from '@/hooks/use-boot-intercom';
 import { RiCustomerService2Line } from 'react-icons/ri';
-import { useBootIntercom } from '@/hooks';
 
 export const CustomerSupportButton = () => {
   useBootIntercom();
diff --git a/apps/dashboard/src/components/header-navigation/edit-bridge-url-button.tsx b/apps/dashboard/src/components/header-navigation/edit-bridge-url-button.tsx
index dfc49270b96..82d70c598d3 100644
--- a/apps/dashboard/src/components/header-navigation/edit-bridge-url-button.tsx
+++ b/apps/dashboard/src/components/header-navigation/edit-bridge-url-button.tsx
@@ -8,10 +8,12 @@ import { cn } from '@/utils/ui';
 import { Popover, PopoverContent, PopoverTrigger, PopoverPortal } from '../primitives/popover';
 import { Button } from '../primitives/button';
 import { Input, InputField } from '../primitives/input';
-import { useBridgeHealthCheck, useUpdateBridgeUrl, useValidateBridgeUrl } from '@/hooks';
 import { ConnectionStatus } from '@/utils/types';
 import { useEnvironment } from '@/context/environment/hooks';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../primitives/form';
+import { useBridgeHealthCheck } from '@/hooks/use-bridge-health-check';
+import { useValidateBridgeUrl } from '@/hooks/use-validate-bridge-url';
+import { useUpdateBridgeUrl } from '@/hooks/use-update-bridge-url';
+import { FormField, FormItem, FormLabel, FormControl, FormMessage, Form } from '@/components/primitives/form/form';
 
 const formSchema = z.object({ bridgeUrl: z.string().url() });
 
diff --git a/apps/dashboard/src/components/header-navigation/index.ts b/apps/dashboard/src/components/header-navigation/index.ts
deleted file mode 100644
index 4dade914253..00000000000
--- a/apps/dashboard/src/components/header-navigation/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './header-navigation';
diff --git a/apps/dashboard/src/components/primitives/form/index.ts b/apps/dashboard/src/components/primitives/form/index.ts
deleted file mode 100644
index 698d687b924..00000000000
--- a/apps/dashboard/src/components/primitives/form/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './form';
diff --git a/apps/dashboard/src/components/primitives/input.tsx b/apps/dashboard/src/components/primitives/input.tsx
index c96194d3f5e..ec02bddc581 100644
--- a/apps/dashboard/src/components/primitives/input.tsx
+++ b/apps/dashboard/src/components/primitives/input.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { cn } from '@/utils/ui';
 import { cva, VariantProps } from 'class-variance-authority';
+import { inputVariants } from '@/components/primitives/variants';
 
 const inputFieldVariants = cva(
   'text-foreground-950 flex w-full flex-nowrap items-center gap-1.5 rounded-md border bg-transparent shadow-sm transition-colors focus-within:outline-none focus-visible:outline-none hover:bg-neutral-50 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50 has-[input[value=""]]:text-foreground-400 has-[input:disabled]:bg-neutral-alpha-100 has-[input:disabled]:text-foreground-300',
@@ -27,26 +28,20 @@ export type InputFieldProps = { children: React.ReactNode; className?: string }
   typeof inputFieldVariants
 >;
 
-const InputField = ({ children, className, size, state }: InputFieldProps) => {
-  return <div className={inputFieldVariants({ size, state, className })}>{children}</div>;
-};
+const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(({ children, className, size, state }, ref) => {
+  return (
+    <div ref={ref} className={inputFieldVariants({ size, state, className })}>
+      {children}
+    </div>
+  );
+});
 
 InputField.displayName = 'InputField';
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
-  return (
-    <input
-      type={type}
-      className={cn(
-        'file:text-foreground placeholder:text-foreground-400 flex h-full w-full bg-transparent text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed',
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
+  return <input type={type} className={cn(inputVariants(), className)} ref={ref} {...props} />;
 });
 Input.displayName = 'Input';
 
diff --git a/apps/dashboard/src/components/primitives/popover.tsx b/apps/dashboard/src/components/primitives/popover.tsx
index cfbe4d24a05..a616a74c249 100644
--- a/apps/dashboard/src/components/primitives/popover.tsx
+++ b/apps/dashboard/src/components/primitives/popover.tsx
@@ -13,9 +13,9 @@ const PopoverPortal = PopoverPrimitive.Portal;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & { portal?: boolean }
+>(({ className, align = 'center', portal = true, sideOffset = 4, ...props }, ref) => {
+  const body = (
     <PopoverPrimitive.Content
       ref={ref}
       align={align}
@@ -26,8 +26,10 @@ const PopoverContent = React.forwardRef<
       )}
       {...props}
     />
-  </PopoverPrimitive.Portal>
-));
+  );
+
+  return portal ? <PopoverPrimitive.Portal>{body}</PopoverPrimitive.Portal> : body;
+});
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal };
diff --git a/apps/dashboard/src/components/primitives/tag-input.tsx b/apps/dashboard/src/components/primitives/tag-input.tsx
index 065920f8a0a..e4a784d1ddc 100644
--- a/apps/dashboard/src/components/primitives/tag-input.tsx
+++ b/apps/dashboard/src/components/primitives/tag-input.tsx
@@ -1,20 +1,25 @@
 'use client';
 
 import { Badge } from '@/components/primitives/badge';
-import { Input, InputField } from '@/components/primitives/input';
+import { Popover, PopoverAnchor, PopoverContent } from '@/components/primitives/popover';
+import { inputVariants } from '@/components/primitives/variants';
+import { CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
 import { cn } from '@/utils/ui';
+import { Command } from 'cmdk';
 import { forwardRef, useEffect, useState } from 'react';
 import { RiCloseFill } from 'react-icons/ri';
 
 type TagInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   value: string[];
+  suggestions: string[];
   onChange: (tags: string[]) => void;
 };
 
 const TagInput = forwardRef<HTMLInputElement, TagInputProps>((props, ref) => {
-  const { className, value, onChange, ...rest } = props;
+  const { className, suggestions, value, onChange, ...rest } = props;
   const [tags, setTags] = useState<string[]>(value);
   const [inputValue, setInputValue] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
     setTags(value);
@@ -27,6 +32,7 @@ const TagInput = forwardRef<HTMLInputElement, TagInputProps>((props, ref) => {
     }
     onChange(newTags);
     setInputValue('');
+    setIsOpen(false);
   };
 
   const removeTag = (tag: string) => {
@@ -39,48 +45,75 @@ const TagInput = forwardRef<HTMLInputElement, TagInputProps>((props, ref) => {
     setInputValue('');
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-
-      if (inputValue === '') {
-        return;
-      }
-
-      addTag(inputValue);
-    }
-  };
-
   return (
-    <div className="flex flex-col space-y-2">
-      <InputField>
-        <Input
-          ref={ref}
-          type="text"
-          value={inputValue}
-          onKeyDown={handleKeyDown}
-          className={cn('flex-grow', className)}
-          placeholder="Type a tag and press Enter"
-          onChange={(e) => setInputValue(e.target.value)}
-          {...rest}
-        />
-      </InputField>
-      <div className="flex flex-wrap gap-2">
-        {tags.map((tag, index) => (
-          <Badge key={index} variant="outline" kind="tag">
-            {tag}
-            <button
-              type="button"
-              onClick={() => removeTag(tag)}
-              className="ml-1 rounded-full outline-none focus:outline-none"
-            >
-              <RiCloseFill className="size-3" />
-              <span className="sr-only">Remove tag</span>
-            </button>
-          </Badge>
-        ))}
-      </div>
-    </div>
+    <Popover open={isOpen}>
+      <Command>
+        <div className="flex flex-col gap-2">
+          <PopoverAnchor asChild>
+            <CommandInput
+              ref={ref}
+              autoComplete="off"
+              value={inputValue}
+              className={cn(inputVariants(), 'flex-grow', className)}
+              placeholder="Type a tag and press Enter"
+              onValueChange={(value) => {
+                setInputValue(value);
+                setIsOpen(true);
+              }}
+              onFocusCapture={() => setIsOpen(true)}
+              onBlurCapture={() => setIsOpen(false)}
+              {...rest}
+            />
+          </PopoverAnchor>
+          <div className="flex flex-wrap gap-2">
+            {tags.map((tag, index) => (
+              <Badge key={index} variant="outline" kind="tag" className="gap-1">
+                <span>{tag}</span>
+                <button type="button" onClick={() => removeTag(tag)}>
+                  <RiCloseFill className="size-3" />
+                  <span className="sr-only">Remove tag</span>
+                </button>
+              </Badge>
+            ))}
+          </div>
+        </div>
+        <PopoverContent
+          className="p-1"
+          portal={false}
+          onOpenAutoFocus={(e) => {
+            e.preventDefault();
+          }}
+        >
+          <CommandList>
+            <CommandGroup>
+              {inputValue !== '' && (
+                <CommandItem
+                  // We can't have duplicate keys in our list so adding a prefix
+                  // here to differentiate this from a possible suggestion value
+                  value={`input-${inputValue}`}
+                  onSelect={() => {
+                    addTag(inputValue);
+                  }}
+                >
+                  {inputValue}
+                </CommandItem>
+              )}
+              {suggestions.map((tag) => (
+                <CommandItem
+                  key={tag}
+                  value={tag}
+                  onSelect={() => {
+                    addTag(tag);
+                  }}
+                >
+                  {tag}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </PopoverContent>
+      </Command>
+    </Popover>
   );
 });
 TagInput.displayName = 'TagInput';
diff --git a/apps/dashboard/src/components/primitives/variants.ts b/apps/dashboard/src/components/primitives/variants.ts
index 04c3a273955..09a4ed1b423 100644
--- a/apps/dashboard/src/components/primitives/variants.ts
+++ b/apps/dashboard/src/components/primitives/variants.ts
@@ -115,3 +115,7 @@ export const stepVariants = cva(
     },
   }
 );
+
+export const inputVariants = cva(
+  'file:text-foreground placeholder:text-foreground-400 flex h-full w-full bg-transparent text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed'
+);
diff --git a/apps/dashboard/src/components/side-navigation/free-trial-card.tsx b/apps/dashboard/src/components/side-navigation/free-trial-card.tsx
index 13828e0a664..10c55d27cc1 100644
--- a/apps/dashboard/src/components/side-navigation/free-trial-card.tsx
+++ b/apps/dashboard/src/components/side-navigation/free-trial-card.tsx
@@ -1,10 +1,10 @@
-import { useBillingSubscription } from '@/hooks';
 import { LogoCircle } from '../icons';
 import { RiArrowRightDoubleLine, RiInformationFill } from 'react-icons/ri';
 import { Progress } from '../primitives/progress';
 import { Button } from '../primitives/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TooltipArrow } from '../primitives/tooltip';
 import { LEGACY_ROUTES } from '@/utils/routes';
+import { useBillingSubscription } from '@/hooks/use-billing-subscription';
 
 const transition = 'transition-all duration-300 ease-out';
 
diff --git a/apps/dashboard/src/components/side-navigation/index.ts b/apps/dashboard/src/components/side-navigation/index.ts
deleted file mode 100644
index 4a61e7d72fa..00000000000
--- a/apps/dashboard/src/components/side-navigation/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './side-navigation';
diff --git a/apps/dashboard/src/components/side-navigation/side-navigation.tsx b/apps/dashboard/src/components/side-navigation/side-navigation.tsx
index ad0b3643610..ee99dea1d49 100644
--- a/apps/dashboard/src/components/side-navigation/side-navigation.tsx
+++ b/apps/dashboard/src/components/side-navigation/side-navigation.tsx
@@ -18,8 +18,8 @@ import { OrganizationDropdown } from './organization-dropdown';
 import { FreeTrialCard } from './free-trial-card';
 import { buildRoute, LEGACY_ROUTES, ROUTES } from '@/utils/routes';
 import { SubscribersStayTunedModal } from './subscribers-stay-tuned-modal';
-import { useTelemetry } from '@/hooks';
 import { TelemetryEvent } from '@/utils/telemetry';
+import { useTelemetry } from '@/hooks/use-telemetry';
 
 const linkVariants = cva(
   `flex items-center gap-2 text-sm py-1.5 px-2 rounded-lg focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring cursor-pointer`,
diff --git a/apps/dashboard/src/components/ui/command.tsx b/apps/dashboard/src/components/ui/command.tsx
new file mode 100644
index 00000000000..df15d293e93
--- /dev/null
+++ b/apps/dashboard/src/components/ui/command.tsx
@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+
+import { cn } from '@/utils/ui';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { inputVariants } from '@/components/primitives/variants';
+import { InputField } from '@/components/primitives/input';
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'bg-background text-foreground-950 flex h-full w-full flex-col overflow-hidden rounded-md',
+      className
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+type CommandDialogProps = DialogProps;
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-foreground-400 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <InputField>
+    <CommandPrimitive.Input ref={ref} className={cn(inputVariants(), className)} {...props} />
+  </InputField>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />);
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'text-foreground [&_[cmdk-group-heading]]:text-foreground-400 overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator ref={ref} className={cn('bg-border -mx-1 h-px', className)} {...props} />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('text-foreground-400 ml-auto text-xs tracking-widest', className)} {...props} />;
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/apps/dashboard/src/components/ui/dialog.tsx b/apps/dashboard/src/components/ui/dialog.tsx
new file mode 100644
index 00000000000..5b2c249f81f
--- /dev/null
+++ b/apps/dashboard/src/components/ui/dialog.tsx
@@ -0,0 +1,95 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
+
+import { cn } from '@/utils/ui';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'bg-background 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/apps/dashboard/src/components/workflow-editor/index.ts b/apps/dashboard/src/components/workflow-editor/index.ts
deleted file mode 100644
index 38c673f8e48..00000000000
--- a/apps/dashboard/src/components/workflow-editor/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './workflow-editor';
-export * from './workflow-editor-provider';
diff --git a/apps/dashboard/src/context/auth/index.ts b/apps/dashboard/src/context/auth/index.ts
deleted file mode 100644
index 3137341d714..00000000000
--- a/apps/dashboard/src/context/auth/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './auth-provider';
-export * from './auth-context';
-export * from './hooks';
diff --git a/apps/dashboard/src/context/environment/environment-provider.tsx b/apps/dashboard/src/context/environment/environment-provider.tsx
index 05ebd7dc97e..f2a8ebb299f 100644
--- a/apps/dashboard/src/context/environment/environment-provider.tsx
+++ b/apps/dashboard/src/context/environment/environment-provider.tsx
@@ -1,12 +1,12 @@
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import type { IEnvironment } from '@novu/shared';
-import { useFetchEnvironments } from './hooks';
-import { useAuth } from '../auth';
-import { EnvironmentContext } from './environment-context';
 import { getEnvironmentId, saveEnvironmentId } from '@/utils/environment';
 import { BaseEnvironmentEnum } from '@/utils/types';
 import { buildRoute, ROUTES } from '@/utils/routes';
+import { useAuth } from '@/context/auth/hooks';
+import { useFetchEnvironments } from '@/context/environment/hooks';
+import { EnvironmentContext } from '@/context/environment/environment-context';
 
 function selectEnvironment(environments: IEnvironment[], selectedEnvironmentId?: string | null) {
   let environment: IEnvironment | undefined;
diff --git a/apps/dashboard/src/context/environment/index.ts b/apps/dashboard/src/context/environment/index.ts
deleted file mode 100644
index abdcb82a753..00000000000
--- a/apps/dashboard/src/context/environment/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './environment-provider';
-export * from './hooks';
diff --git a/apps/dashboard/src/context/index.ts b/apps/dashboard/src/context/index.ts
deleted file mode 100644
index af426cefddc..00000000000
--- a/apps/dashboard/src/context/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './clerk-provider';
-export * from './segment';
-export * from './auth';
-export * from './environment';
diff --git a/apps/dashboard/src/hooks/use-billing-subscription.ts b/apps/dashboard/src/hooks/use-billing-subscription.ts
index de9655b1dc6..0b623838ce8 100644
--- a/apps/dashboard/src/hooks/use-billing-subscription.ts
+++ b/apps/dashboard/src/hooks/use-billing-subscription.ts
@@ -2,9 +2,9 @@ import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { differenceInDays, isSameDay } from 'date-fns';
 import type { GetSubscriptionDto } from '@novu/shared';
-import { useAuth } from '@/context';
 import { getBillingSubscription } from '@/api/billing';
 import { QueryKeys } from '@/utils/query-keys';
+import { useAuth } from '@/context/auth/hooks';
 
 const today = new Date();
 
diff --git a/apps/dashboard/src/hooks/use-boot-intercom.ts b/apps/dashboard/src/hooks/use-boot-intercom.ts
index d8428ddd061..966cd92ee75 100644
--- a/apps/dashboard/src/hooks/use-boot-intercom.ts
+++ b/apps/dashboard/src/hooks/use-boot-intercom.ts
@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 // @ts-ignore
 import { useIntercom } from 'react-use-intercom';
 import { INTERCOM_APP_ID } from '../config';
-import { useAuth } from '@/context';
+import { useAuth } from '@/context/auth/hooks';
 
 export function useBootIntercom() {
   const { currentOrganization, currentUser } = useAuth();
diff --git a/apps/dashboard/src/hooks/use-tags-query.ts b/apps/dashboard/src/hooks/use-tags-query.ts
new file mode 100644
index 00000000000..c837464a05f
--- /dev/null
+++ b/apps/dashboard/src/hooks/use-tags-query.ts
@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+import { QueryKeys } from '@/utils/query-keys';
+import { useEnvironment } from '@/context/environment/hooks';
+import { getV2 } from '@/api/api.client';
+
+export const useTagsQuery = () => {
+  const { currentEnvironment } = useEnvironment();
+  const query = useQuery<{ data: { name: string }[] }>({
+    queryKey: [QueryKeys.fetchWorkflow, currentEnvironment?._id],
+    queryFn: async () => await getV2(`/environments/${currentEnvironment!._id}/tags`),
+    enabled: !!currentEnvironment?._id,
+  });
+
+  return query;
+};
diff --git a/apps/dashboard/src/pages/edit-workflow.tsx b/apps/dashboard/src/pages/edit-workflow.tsx
index bd2938253cf..d8ed1c6f6e0 100644
--- a/apps/dashboard/src/pages/edit-workflow.tsx
+++ b/apps/dashboard/src/pages/edit-workflow.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { WorkflowEditor, WorkflowEditorProvider } from '@/components/workflow-editor';
 import { EditWorkflowLayout } from '@/components/edit-workflow-layout';
 import { ArrowRight, RouteFill } from '@/components/icons';
 import {
@@ -12,6 +11,8 @@ import {
   BreadcrumbSeparator,
 } from '@/components/primitives/breadcrumb';
 import { Button } from '@/components/primitives/button';
+import { WorkflowEditor } from '@/components/workflow-editor/workflow-editor';
+import { WorkflowEditorProvider } from '@/components/workflow-editor/workflow-editor-provider';
 import { useEnvironment } from '@/context/environment/hooks';
 import { useFetchWorkflow } from '@/hooks/use-fetch-workflow';
 import { buildRoute, ROUTES } from '@/utils/routes';
diff --git a/apps/dashboard/src/routes/protected-route.tsx b/apps/dashboard/src/routes/protected-route.tsx
index 8f725d53b2d..e536647d462 100644
--- a/apps/dashboard/src/routes/protected-route.tsx
+++ b/apps/dashboard/src/routes/protected-route.tsx
@@ -1,7 +1,7 @@
 import { Navigate } from 'react-router-dom';
 import { SignedIn, SignedOut } from '@clerk/clerk-react';
-import { EnvironmentProvider } from '@/context';
 import { ROUTES } from '@/utils/routes';
+import { EnvironmentProvider } from '@/context/environment/environment-provider';
 
 export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
   return (
diff --git a/apps/dashboard/src/routes/root.tsx b/apps/dashboard/src/routes/root.tsx
index 80e0a5f99d4..f0121ecee3a 100644
--- a/apps/dashboard/src/routes/root.tsx
+++ b/apps/dashboard/src/routes/root.tsx
@@ -1,7 +1,9 @@
 import { Outlet } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { AuthProvider, ClerkProvider, SegmentProvider } from '@/context';
 import { HelmetProvider } from 'react-helmet-async';
+import { SegmentProvider } from '@/context/segment';
+import { AuthProvider } from '@/context/auth/auth-provider';
+import { ClerkProvider } from '@/context/clerk-provider';
 
 const queryClient = new QueryClient();
 
diff --git a/apps/dashboard/src/utils/query-keys.ts b/apps/dashboard/src/utils/query-keys.ts
index c1cca6d9bb5..bdf14e2bbc7 100644
--- a/apps/dashboard/src/utils/query-keys.ts
+++ b/apps/dashboard/src/utils/query-keys.ts
@@ -4,4 +4,5 @@ export const QueryKeys = Object.freeze({
   bridgeHealthCheck: 'bridgeHealthCheck',
   fetchWorkflow: 'fetchWorkflow',
   fetchWorkflows: 'fetchWorkflows',
+  fetchTags: 'fetchTags',
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3c3890bd6d2..ac934e28bd0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -700,6 +700,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      cmdk:
+        specifier: 1.0.0
+        version: 1.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
@@ -19297,6 +19300,12 @@ packages:
     resolution: {integrity: sha512-qkCtZ59BidfEwHltnJwkyVZn+XQojdAySM1D1gSeh11Z4pW1Kpolkyo53L5noc0nrxmIvyFwTmJRo4xs7FFLPw==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
 
+  cmdk@1.0.0:
+    resolution: {integrity: sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+
   co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
@@ -34627,8 +34636,8 @@ snapshots:
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sso-oidc': 3.575.0(@aws-sdk/client-sts@3.575.0)
-      '@aws-sdk/client-sts': 3.575.0
+      '@aws-sdk/client-sso-oidc': 3.575.0
+      '@aws-sdk/client-sts': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)
       '@aws-sdk/core': 3.575.0
       '@aws-sdk/credential-provider-node': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)(@aws-sdk/client-sts@3.575.0)
       '@aws-sdk/middleware-host-header': 3.575.0
@@ -34829,8 +34838,8 @@ snapshots:
       '@aws-crypto/sha1-browser': 3.0.0
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sso-oidc': 3.575.0(@aws-sdk/client-sts@3.575.0)
-      '@aws-sdk/client-sts': 3.575.0
+      '@aws-sdk/client-sso-oidc': 3.575.0
+      '@aws-sdk/client-sts': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)
       '@aws-sdk/core': 3.575.0
       '@aws-sdk/credential-provider-node': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)(@aws-sdk/client-sts@3.575.0)
       '@aws-sdk/middleware-bucket-endpoint': 3.575.0
@@ -35056,11 +35065,11 @@ snapshots:
       - aws-crt
     optional: true
 
-  '@aws-sdk/client-sso-oidc@3.575.0(@aws-sdk/client-sts@3.575.0)':
+  '@aws-sdk/client-sso-oidc@3.575.0':
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sts': 3.575.0
+      '@aws-sdk/client-sts': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)
       '@aws-sdk/core': 3.575.0
       '@aws-sdk/credential-provider-node': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)(@aws-sdk/client-sts@3.575.0)
       '@aws-sdk/middleware-host-header': 3.575.0
@@ -35099,7 +35108,6 @@ snapshots:
       '@smithy/util-utf8': 3.0.0
       tslib: 2.7.0
     transitivePeerDependencies:
-      - '@aws-sdk/client-sts'
       - aws-crt
 
   '@aws-sdk/client-sso-oidc@3.637.0(@aws-sdk/client-sts@3.637.0)':
@@ -35484,11 +35492,11 @@ snapshots:
       - aws-crt
     optional: true
 
-  '@aws-sdk/client-sts@3.575.0':
+  '@aws-sdk/client-sts@3.575.0(@aws-sdk/client-sso-oidc@3.575.0)':
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sso-oidc': 3.575.0(@aws-sdk/client-sts@3.575.0)
+      '@aws-sdk/client-sso-oidc': 3.575.0
       '@aws-sdk/core': 3.575.0
       '@aws-sdk/credential-provider-node': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)(@aws-sdk/client-sts@3.575.0)
       '@aws-sdk/middleware-host-header': 3.575.0
@@ -35527,6 +35535,7 @@ snapshots:
       '@smithy/util-utf8': 3.0.0
       tslib: 2.7.0
     transitivePeerDependencies:
+      - '@aws-sdk/client-sso-oidc'
       - aws-crt
 
   '@aws-sdk/client-sts@3.637.0':
@@ -35756,7 +35765,7 @@ snapshots:
 
   '@aws-sdk/credential-provider-ini@3.575.0(@aws-sdk/client-sso-oidc@3.575.0)(@aws-sdk/client-sts@3.575.0)':
     dependencies:
-      '@aws-sdk/client-sts': 3.575.0
+      '@aws-sdk/client-sts': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)
       '@aws-sdk/credential-provider-env': 3.575.0
       '@aws-sdk/credential-provider-process': 3.575.0
       '@aws-sdk/credential-provider-sso': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)
@@ -36067,7 +36076,7 @@ snapshots:
 
   '@aws-sdk/credential-provider-web-identity@3.575.0(@aws-sdk/client-sts@3.575.0)':
     dependencies:
-      '@aws-sdk/client-sts': 3.575.0
+      '@aws-sdk/client-sts': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)
       '@aws-sdk/types': 3.575.0
       '@smithy/property-provider': 3.1.3
       '@smithy/types': 3.3.0
@@ -36588,7 +36597,7 @@ snapshots:
 
   '@aws-sdk/token-providers@3.575.0(@aws-sdk/client-sso-oidc@3.575.0)':
     dependencies:
-      '@aws-sdk/client-sso-oidc': 3.575.0(@aws-sdk/client-sts@3.575.0)
+      '@aws-sdk/client-sso-oidc': 3.575.0
       '@aws-sdk/types': 3.575.0
       '@smithy/property-provider': 3.1.3
       '@smithy/shared-ini-file-loader': 3.1.4
@@ -36597,7 +36606,7 @@ snapshots:
 
   '@aws-sdk/token-providers@3.614.0(@aws-sdk/client-sso-oidc@3.575.0)':
     dependencies:
-      '@aws-sdk/client-sso-oidc': 3.575.0(@aws-sdk/client-sts@3.575.0)
+      '@aws-sdk/client-sso-oidc': 3.575.0
       '@aws-sdk/types': 3.609.0
       '@smithy/property-provider': 3.1.3
       '@smithy/shared-ini-file-loader': 3.1.4
@@ -53540,7 +53549,7 @@ snapshots:
 
   '@storybook/components@8.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1)
       '@storybook/client-logger': 8.1.1
       '@storybook/csf': 0.1.7
@@ -60271,6 +60280,16 @@ snapshots:
     dependencies:
       mkdirp-infer-owner: 2.0.0
 
+  cmdk@1.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   co@4.6.0: {}
 
   coa@2.0.2: