diff --git a/frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx b/frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx
index 1ea74d84d5..8d09300a19 100644
--- a/frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx
@@ -14,7 +14,7 @@ import { ContextMenuContainer } from "./components/ui/ContextMenu";
 import { ModelInfo } from "@storyteller/model-list";
 import {
   CANVAS_2D_PAGE_MODEL_LIST,
-  ModelCategory,
+  ModelPage,
   ModelSelector,
   useModelSelectorStore,
 } from "@storyteller/ui-model-selector";
@@ -55,7 +55,7 @@ const PageDraw = () => {
   const store = useSceneStore();
 
   const selectedModel =
-    selectedModels[ModelCategory.Canvas2D] ||
+    selectedModels[ModelPage.Canvas2D] ||
     CANVAS_2D_PAGE_MODEL_LIST[0]?.label;
 
   const selectedModelInfo: ModelInfo | undefined =
@@ -446,7 +446,7 @@ const PageDraw = () => {
       <div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
         <ModelSelector
           items={CANVAS_2D_PAGE_MODEL_LIST}
-          category={ModelCategory.Canvas2D}
+          page={ModelPage.Canvas2D}
           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/PageEdit/PageEdit.tsx b/frontend/apps/editor3d/app/src/pages/PageEdit/PageEdit.tsx
index 001b63c504..3f9cb4a54c 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEdit/PageEdit.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEdit/PageEdit.tsx
@@ -14,7 +14,7 @@ import { EditPaintSurface } from "./EditPaintSurface";
 import { normalizeCanvas } from "../../Helpers/CanvasHelpers";
 import { BaseImageSelector, BaseSelectorImage } from "./BaseImageSelector";
 import DrawToolControlBar from "./DrawToolControlBar";
-import { IMAGE_EDITOR_PAGE_MODEL_LIST, ModelCategory, ModelSelector, useModelSelectorStore } from "@storyteller/ui-model-selector";
+import { IMAGE_EDITOR_PAGE_MODEL_LIST, ModelPage, ModelSelector, useModelSelectorStore } from "@storyteller/ui-model-selector";
 import { ModelInfo } from "@storyteller/model-list";
 
 const PageEdit = () => {
@@ -22,7 +22,7 @@ const PageEdit = () => {
   const { selectedModels } = useModelSelectorStore();
 
   const selectedModel =
-    selectedModels[ModelCategory.Canvas2D] ||
+    selectedModels[ModelPage.Canvas2D] ||
     IMAGE_EDITOR_PAGE_MODEL_LIST[0]?.label;
 
   const selectedModelInfo: ModelInfo | undefined =
@@ -314,7 +314,7 @@ const PageEdit = () => {
       <div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
         <ModelSelector
           items={IMAGE_EDITOR_PAGE_MODEL_LIST}
-          category={ModelCategory.ImageEditor}
+          page={ModelPage.ImageEditor}
           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/PageEnigma/PageEditor.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx
index c45b676a29..5014e23d2c 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx
@@ -67,7 +67,7 @@ import {
 } from "@storyteller/ui-gallery-modal";
 import {
   STAGE_3D_PAGE_MODEL_LIST,
-  ModelCategory,
+  ModelPage,
   ModelSelector,
   useModelSelectorStore,
 } from "@storyteller/ui-model-selector";
@@ -109,7 +109,7 @@ export const PageEditor = () => {
   }, []);
 
   const selectedModel =
-    selectedModels[ModelCategory.Editor3D] ||
+    selectedModels[ModelPage.Stage3D] ||
     STAGE_3D_PAGE_MODEL_LIST[0]?.label;
 
   const selectedModelInfo: ModelInfo | undefined =
@@ -548,7 +548,7 @@ export const PageEditor = () => {
                 <div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
                   <ModelSelector
                     items={STAGE_3D_PAGE_MODEL_LIST}
-                    category={ModelCategory.Editor3D}
+                    page={ModelPage.Stage3D}
                     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 c0a2022856..3d76d36483 100644
--- a/frontend/apps/editor3d/app/src/pages/PageImage/TextToImage.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageImage/TextToImage.tsx
@@ -4,7 +4,7 @@ import { PromptBoxImage } from "@storyteller/ui-promptbox";
 import BackgroundGallery from "./BackgroundGallery";
 import {
   TEXT_TO_IMAGE_PAGE_MODEL_LIST,
-  ModelCategory,
+  ModelPage,
   ModelSelector,
   useModelSelectorStore,
 } from "@storyteller/ui-model-selector";
@@ -20,7 +20,7 @@ const TextToImage = ({ imageMediaId, imageUrl }: TextToImageProps) => {
   const { selectedModels } = useModelSelectorStore();
 
   const selectedModel =
-    selectedModels[ModelCategory.TextToImage] ||
+    selectedModels[ModelPage.TextToImage] ||
     TEXT_TO_IMAGE_PAGE_MODEL_LIST[0]?.label;
 
   const selectedModelInfo: ModelInfo | undefined = TEXT_TO_IMAGE_PAGE_MODEL_LIST.find(
@@ -67,7 +67,7 @@ const TextToImage = ({ imageMediaId, imageUrl }: TextToImageProps) => {
           <div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
             <ModelSelector
               items={TEXT_TO_IMAGE_PAGE_MODEL_LIST}
-              category={ModelCategory.TextToImage}
+              page={ModelPage.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 8c7b7730cb..df35d2c8be 100644
--- a/frontend/apps/editor3d/app/src/pages/PageVideo/ImageToVideo.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageVideo/ImageToVideo.tsx
@@ -3,7 +3,7 @@ import { JobContextType } from "@storyteller/common";
 import { PromptBoxVideo } from "@storyteller/ui-promptbox";
 import BackgroundGallery from "./BackgroundGallery";
 import {
-  ModelCategory,
+  ModelPage,
   ModelSelector,
   useModelSelectorStore,
   IMAGE_TO_VIDEO_PAGE_MODEL_LIST,
@@ -20,7 +20,7 @@ const ImageToVideo = ({ imageMediaId, imageUrl }: ImageToVideoProps) => {
   const { selectedModels } = useModelSelectorStore();
 
   const selectedModel =
-    selectedModels[ModelCategory.ImageToVideo] ||
+    selectedModels[ModelPage.ImageToVideo] ||
     IMAGE_TO_VIDEO_PAGE_MODEL_LIST[0]?.label;
 
   const selectedModelInfo: ModelInfo | undefined = IMAGE_TO_VIDEO_PAGE_MODEL_LIST.find(
@@ -68,7 +68,7 @@ const ImageToVideo = ({ imageMediaId, imageUrl }: ImageToVideoProps) => {
           <div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
             <ModelSelector
               items={IMAGE_TO_VIDEO_PAGE_MODEL_LIST}
-              category={ModelCategory.ImageToVideo}
+              page={ModelPage.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 068889200b..fb473a6446 100644
--- a/frontend/libs/components/model-selector/src/index.ts
+++ b/frontend/libs/components/model-selector/src/index.ts
@@ -1,4 +1,4 @@
 export * from "./lib/model-selector";
 export * from "./lib/model-selector-store";
 export * from "./lib/model-lists";
-export * from "./lib/model-categories";
+export * from "./lib/model-pages";
diff --git a/frontend/libs/components/model-selector/src/lib/model-categories.ts b/frontend/libs/components/model-selector/src/lib/model-pages.ts
similarity index 66%
rename from frontend/libs/components/model-selector/src/lib/model-categories.ts
rename to frontend/libs/components/model-selector/src/lib/model-pages.ts
index d48b1a9d69..351b48a26b 100644
--- a/frontend/libs/components/model-selector/src/lib/model-categories.ts
+++ b/frontend/libs/components/model-selector/src/lib/model-pages.ts
@@ -1,8 +1,8 @@
-export enum ModelCategory {
+export enum ModelPage {
   TextToImage = "text-to-image",
   ImageToVideo = "image-to-video",
-  Canvas2D = "2d-canvas",
-  Editor3D = "3d-editor",
+  Canvas2D = "canvas-2d",
+  Stage3D = "stage-3d",
 
   // The "inpainting + outpainting + text" image editor
   ImageEditor = "image-editor",
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 0339e174cd..e0887c4a93 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,18 +1,18 @@
 import { create } from "zustand";
-import { ModelCategory } from "./model-categories";
+import { ModelPage } from "./model-pages";
 
 interface ModelSelectorState {
-  selectedModels: { [category in ModelCategory]?: string };
-  setSelectedModel: (category: ModelCategory, modelLabel: string) => void;
+  selectedModels: { [page in ModelPage]?: string };
+  setSelectedModel: (page: ModelPage, modelLabel: string) => void;
 }
 
 export const useModelSelectorStore = create<ModelSelectorState>((set) => ({
   selectedModels: {},
-  setSelectedModel: (category, modelLabel) =>
+  setSelectedModel: (page, modelLabel) =>
     set((state) => ({
       selectedModels: {
         ...state.selectedModels,
-        [category]: modelLabel,
+        [page]: modelLabel,
       },
     })),
 }));
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 448c81961d..b11d8658df 100644
--- a/frontend/libs/components/model-selector/src/lib/model-selector.tsx
+++ b/frontend/libs/components/model-selector/src/lib/model-selector.tsx
@@ -1,11 +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";
+import { ModelPage } from "./model-pages";
 
 interface ModelSelectorProps {
   items: Omit<PopoverItem, "selected">[];
-  category: ModelCategory;
+  page: ModelPage;
   mode?: "hoverSelect" | "default" | "toggle" | "button";
   panelTitle?: string;
   buttonClassName?: string;
@@ -16,14 +16,14 @@ interface ModelSelectorProps {
 
 export function ModelSelector({
   items,
-  category,
+  page,
   ...popoverProps
 }: ModelSelectorProps) {
   const { selectedModels, setSelectedModel } = useModelSelectorStore();
-  const selectedModel = selectedModels[category] || items[0]?.label;
+  const selectedModel = selectedModels[page] || items[0]?.label;
 
   const handleModelSelect = (item: PopoverItem) => {
-    setSelectedModel(category, item.label);
+    setSelectedModel(page, item.label);
   };
 
   const modelList = useMemo(