diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7381fad..4856eca 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -75,7 +75,14 @@ export default function Home() {
       `You have selected following frameworks: ${data.frameworks.join(", ")}.`
     );
   }
-
+  const handleCreateFramework = (newFramework: string) => {
+    const newFrameworkObject = {
+      value: newFramework.toLowerCase(),
+      label: newFramework,
+      icon: Fish, // Using Fish icon as default for new frameworks
+    };
+    frameworksList.push(newFrameworkObject);
+  };
   return (
     <main className="flex min-h-screen:calc(100vh - 3rem) flex-col items-center justify-start space-y-3 p-3">
       <PageHeader>
@@ -109,6 +116,8 @@ export default function Home() {
                       defaultValue={field.value}
                       placeholder="Select options"
                       variant="inverted"
+                      creatable={true}
+                      onCreate={handleCreateFramework}
                       animation={2}
                       maxCount={3}
                     />
diff --git a/src/components/multi-select.tsx b/src/components/multi-select.tsx
index 0f33d2b..4c87f6c 100644
--- a/src/components/multi-select.tsx
+++ b/src/components/multi-select.tsx
@@ -6,6 +6,7 @@ import {
   ChevronDown,
   XIcon,
   WandSparkles,
+  Plus
 } from "lucide-react";
 
 import { cn } from "@/lib/utils";
@@ -115,6 +116,18 @@ interface MultiSelectProps
    * Optional, can be used to add custom styles.
    */
   className?: string;
+
+   /**
+   * If true, allows creating new options that are not in the original list.
+   * Optional, defaults to false.
+   */
+   creatable?: boolean;
+
+   /**
+    * Callback function triggered when a new option is created.
+    * Required if creatable is true.
+    */
+   onCreate?: (value: string) => void;
 }
 
 export const MultiSelect = React.forwardRef<
@@ -133,6 +146,8 @@ export const MultiSelect = React.forwardRef<
       modalPopover = false,
       asChild = false,
       className,
+      creatable = false,
+      onCreate,
       ...props
     },
     ref
@@ -141,6 +156,7 @@ export const MultiSelect = React.forwardRef<
       React.useState<string[]>(defaultValue);
     const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
     const [isAnimating, setIsAnimating] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState("");
 
     React.useEffect(() => {
       if (JSON.stringify(selectedValues) !== JSON.stringify(defaultValue)) {
@@ -194,6 +210,18 @@ export const MultiSelect = React.forwardRef<
       }
     };
 
+    const handleInputChange = (value: string) => {
+      setInputValue(value);
+    };
+
+    const handleCreateOption = () => {
+      if (creatable && onCreate && inputValue) {
+        onCreate(inputValue);
+        toggleOption(inputValue);
+        setInputValue("");
+      }
+    };
+
     return (
       <Popover
         open={isPopoverOpen}
@@ -295,7 +323,16 @@ export const MultiSelect = React.forwardRef<
               onKeyDown={handleInputKeyDown}
             />
             <CommandList>
-              <CommandEmpty>No results found.</CommandEmpty>
+            <CommandEmpty>
+                {creatable ? (
+                  <CommandItem onSelect={handleCreateOption}>
+                    <Plus className="mr-2 h-4 w-4" />
+                    Create "{inputValue}"
+                  </CommandItem>
+                ) : (
+                  "No results found."
+                )}
+              </CommandEmpty>
               <CommandGroup>
                 <CommandItem
                   key="all"