diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx
index c2f2e4bddb..dd83492dc9 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx
@@ -75,7 +75,10 @@ import {
 } from "@storyteller/ui-gallery-modal";
 import {
   imageGenerationModels,
+  // ModelCategory,
   ModelSelector,
+  // videoGenerationModels,
+  // useModelSelectorStore,
 } from "@storyteller/ui-model-selector";
 
 export const PageEditor = () => {
@@ -85,6 +88,12 @@ export const PageEditor = () => {
     event.stopPropagation();
   };
 
+  // TODO: For 3d Promptbox to accept this later on
+  // const { selectedModels } = useModelSelectorStore();
+  // const selectedModel =
+  // selectedModels[ModelCategory.Editor3D] ||
+  // videoGenerationModels[0]?.label;
+
   useEffect(() => {
     timelineHeight.value = 0; //timelineHeight.value = 208;
     sidePanelWidth.value = 340;
@@ -460,7 +469,7 @@ export const PageEditor = () => {
                 <div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
                   <ModelSelector
                     items={imageGenerationModels}
-                    category="image-generation"
+                    category="3d-editor"
                     panelTitle="Select Model"
                     panelClassName="min-w-[280px]"
                     buttonClassName="bg-transparent p-0 text-lg hover:bg-transparent text-white/80 hover:text-white"
diff --git a/frontend/apps/editor3d/app/src/pages/PageImage/TextToImage.tsx b/frontend/apps/editor3d/app/src/pages/PageImage/TextToImage.tsx
index ce17aa14d8..db0c9f7031 100644
--- a/frontend/apps/editor3d/app/src/pages/PageImage/TextToImage.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageImage/TextToImage.tsx
@@ -4,6 +4,7 @@ import { PromptBoxImage } from "@storyteller/ui-promptbox";
 import BackgroundGallery from "./BackgroundGallery";
 import {
   imageGenerationModels,
+  ModelCategory,
   ModelSelector,
   useModelSelectorStore,
 } from "@storyteller/ui-model-selector";
@@ -17,7 +18,8 @@ const TextToImage = ({ imageMediaId, imageUrl }: TextToImageProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { selectedModels } = useModelSelectorStore();
   const selectedModel =
-    selectedModels["text-to-image"] || imageGenerationModels[0]?.label;
+    selectedModels[ModelCategory.TextToImage] ||
+    imageGenerationModels[0]?.label;
 
   const jobContext: JobContextType = {
     jobTokens: [],
@@ -58,7 +60,7 @@ const TextToImage = ({ imageMediaId, imageUrl }: TextToImageProps) => {
           <div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
             <ModelSelector
               items={imageGenerationModels}
-              category="text-to-image"
+              category={ModelCategory.TextToImage}
               mode="hoverSelect"
               panelTitle="Select Model"
               panelClassName="min-w-[280px]"
diff --git a/frontend/apps/editor3d/app/src/pages/PageVideo/ImageToVideo.tsx b/frontend/apps/editor3d/app/src/pages/PageVideo/ImageToVideo.tsx
index 6d5f3562e8..d338db554a 100644
--- a/frontend/apps/editor3d/app/src/pages/PageVideo/ImageToVideo.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageVideo/ImageToVideo.tsx
@@ -3,6 +3,7 @@ import { JobContextType } from "@storyteller/common";
 import { PromptBoxVideo } from "@storyteller/ui-promptbox";
 import BackgroundGallery from "./BackgroundGallery";
 import {
+  ModelCategory,
   ModelSelector,
   useModelSelectorStore,
   videoGenerationModels,
@@ -17,7 +18,8 @@ const ImageToVideo = ({ imageMediaId, imageUrl }: ImageToVideoProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { selectedModels } = useModelSelectorStore();
   const selectedModel =
-    selectedModels["image-to-video"] || videoGenerationModels[0]?.label;
+    selectedModels[ModelCategory.ImageToVideo] ||
+    videoGenerationModels[0]?.label;
 
   const jobContext: JobContextType = {
     jobTokens: [],
@@ -59,7 +61,7 @@ const ImageToVideo = ({ imageMediaId, imageUrl }: ImageToVideoProps) => {
           <div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
             <ModelSelector
               items={videoGenerationModels}
-              category="image-to-video"
+              category={ModelCategory.ImageToVideo}
               panelTitle="Select Model"
               panelClassName="min-w-[280px]"
               buttonClassName="bg-transparent p-0 text-lg hover:bg-transparent text-white/80 hover:text-white"
diff --git a/frontend/libs/components/model-selector/src/index.ts b/frontend/libs/components/model-selector/src/index.ts
index 2f5ed443ae..068889200b 100644
--- a/frontend/libs/components/model-selector/src/index.ts
+++ b/frontend/libs/components/model-selector/src/index.ts
@@ -1,3 +1,4 @@
 export * from "./lib/model-selector";
 export * from "./lib/model-selector-store";
 export * from "./lib/model-lists";
+export * from "./lib/model-categories";
diff --git a/frontend/libs/components/model-selector/src/lib/model-categories.ts b/frontend/libs/components/model-selector/src/lib/model-categories.ts
new file mode 100644
index 0000000000..2ead6dc5a1
--- /dev/null
+++ b/frontend/libs/components/model-selector/src/lib/model-categories.ts
@@ -0,0 +1,10 @@
+/**
+ * Defines the unique categories for each product or context where a model
+ * selection is required. Using an enum prevents typos and ensures type safety.
+ */
+export enum ModelCategory {
+  TextToImage = "text-to-image",
+  ImageToVideo = "image-to-video",
+  Canvas2D = "2d-canvas",
+  Editor3D = "3d-editor",
+}
diff --git a/frontend/libs/components/model-selector/src/lib/model-lists.tsx b/frontend/libs/components/model-selector/src/lib/model-lists.tsx
index c81a074635..9d40ac57ec 100644
--- a/frontend/libs/components/model-selector/src/lib/model-lists.tsx
+++ b/frontend/libs/components/model-selector/src/lib/model-lists.tsx
@@ -38,6 +38,12 @@ export const allModels = {
       description: "Fast and high-quality model",
       badges: [{ label: "15 sec.", icon: <FontAwesomeIcon icon={faClock} /> }],
     },
+    {
+      label: "Flux.1 Kontext",
+      icon: <FontAwesomeIcon icon={faImage} className="h-4 w-4" />,
+      description: "New model with advanced context",
+      badges: [{ label: "25 sec.", icon: <FontAwesomeIcon icon={faClock} /> }],
+    },
   ],
 };
 
diff --git a/frontend/libs/components/model-selector/src/lib/model-selector-store.ts b/frontend/libs/components/model-selector/src/lib/model-selector-store.ts
index fb63511013..0339e174cd 100644
--- a/frontend/libs/components/model-selector/src/lib/model-selector-store.ts
+++ b/frontend/libs/components/model-selector/src/lib/model-selector-store.ts
@@ -1,8 +1,9 @@
 import { create } from "zustand";
+import { ModelCategory } from "./model-categories";
 
 interface ModelSelectorState {
-  selectedModels: { [category: string]: string | undefined };
-  setSelectedModel: (category: string, modelLabel: string) => void;
+  selectedModels: { [category in ModelCategory]?: string };
+  setSelectedModel: (category: ModelCategory, modelLabel: string) => void;
 }
 
 export const useModelSelectorStore = create<ModelSelectorState>((set) => ({
diff --git a/frontend/libs/components/model-selector/src/lib/model-selector.tsx b/frontend/libs/components/model-selector/src/lib/model-selector.tsx
index 2112b80c90..448c81961d 100644
--- a/frontend/libs/components/model-selector/src/lib/model-selector.tsx
+++ b/frontend/libs/components/model-selector/src/lib/model-selector.tsx
@@ -1,10 +1,11 @@
 import { PopoverMenu, type PopoverItem } from "@storyteller/ui-popover";
 import { useModelSelectorStore } from "./model-selector-store";
 import { useMemo } from "react";
+import { ModelCategory } from "./model-categories";
 
 interface ModelSelectorProps {
   items: Omit<PopoverItem, "selected">[];
-  category: string;
+  category: ModelCategory;
   mode?: "hoverSelect" | "default" | "toggle" | "button";
   panelTitle?: string;
   buttonClassName?: string;