diff --git a/frontend/src/components/OutputSettingsSection.tsx b/frontend/src/components/OutputSettingsSection.tsx
index 4398f1b..06ae6ef 100644
--- a/frontend/src/components/OutputSettingsSection.tsx
+++ b/frontend/src/components/OutputSettingsSection.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import {
   Select,
   SelectContent,
@@ -5,56 +6,22 @@ import {
   SelectItem,
   SelectTrigger,
 } from "./ui/select";
-import { GeneratedCodeConfig } from "../types";
+import { GeneratedCodeConfig, STACK_DESCRIPTION } from "../types";
 import { Badge } from "./ui/badge";
 
-function generateDisplayComponent(config: GeneratedCodeConfig) {
-  switch (config) {
-    case GeneratedCodeConfig.HTML_TAILWIND:
-      return (
-        <div>
-          <span className="font-semibold">HTML</span> +{" "}
-          <span className="font-semibold">Tailwind</span>
-        </div>
-      );
-    case GeneratedCodeConfig.REACT_TAILWIND:
-      return (
-        <div>
-          <span className="font-semibold">React</span> +{" "}
-          <span className="font-semibold">Tailwind</span>
-        </div>
-      );
-    case GeneratedCodeConfig.BOOTSTRAP:
-      return (
-        <div>
-          <span className="font-semibold">Bootstrap</span>
-        </div>
-      );
-    case GeneratedCodeConfig.IONIC_TAILWIND:
-      return (
-        <div>
-          <span className="font-semibold">Ionic</span> +{" "}
-          <span className="font-semibold">Tailwind</span>
-        </div>
-      );
-    case GeneratedCodeConfig.VUE_TAILWIND:
-      return (
-        <div>
-          <span className="font-semibold">Vue</span> +{" "}
-          <span className="font-semibold">Tailwind</span>
-        </div>
-      );
-    case GeneratedCodeConfig.SVG:
-      return (
-        <div>
-          <span className="font-semibold">SVG</span>
-        </div>
-      );
-    default: {
-      const exhaustiveCheck: never = config;
-      throw new Error(`Unhandled case: ${exhaustiveCheck}`);
-    }
-  }
+function generateDisplayComponent(stack: GeneratedCodeConfig) {
+  const stackComponents = STACK_DESCRIPTION[stack].components;
+
+  return (
+    <div>
+      {stackComponents.map((component, index) => (
+        <React.Fragment key={index}>
+          <span className="font-semibold">{component}</span>
+          {index < stackComponents.length - 1 && " + "}
+        </React.Fragment>
+      ))}
+    </div>
+  );
 }
 
 interface Props {
@@ -88,39 +55,18 @@ function OutputSettingsSection({
           </SelectTrigger>
           <SelectContent>
             <SelectGroup>
-              <SelectItem value={GeneratedCodeConfig.HTML_TAILWIND}>
-                {generateDisplayComponent(GeneratedCodeConfig.HTML_TAILWIND)}
-              </SelectItem>
-              <SelectItem value={GeneratedCodeConfig.REACT_TAILWIND}>
-                {generateDisplayComponent(GeneratedCodeConfig.REACT_TAILWIND)}
-              </SelectItem>
-              <SelectItem value={GeneratedCodeConfig.BOOTSTRAP}>
-                {generateDisplayComponent(GeneratedCodeConfig.BOOTSTRAP)}
-              </SelectItem>
-              <SelectItem value={GeneratedCodeConfig.VUE_TAILWIND}>
-                <div className="flex items-center">
-                  {generateDisplayComponent(GeneratedCodeConfig.VUE_TAILWIND)}
-                  <Badge className="ml-2" variant="secondary">
-                    Beta
-                  </Badge>
-                </div>
-              </SelectItem>
-              <SelectItem value={GeneratedCodeConfig.IONIC_TAILWIND}>
-                <div className="flex items-center">
-                  {generateDisplayComponent(GeneratedCodeConfig.IONIC_TAILWIND)}
-                  <Badge className="ml-2" variant="secondary">
-                    Beta
-                  </Badge>
-                </div>
-              </SelectItem>
-              <SelectItem value={GeneratedCodeConfig.SVG}>
-                <div className="flex items-center">
-                  {generateDisplayComponent(GeneratedCodeConfig.SVG)}
-                  <Badge className="ml-2" variant="secondary">
-                    Beta
-                  </Badge>
-                </div>
-              </SelectItem>
+              {Object.values(GeneratedCodeConfig).map((stack) => (
+                <SelectItem value={stack}>
+                  <div className="flex items-center">
+                    {generateDisplayComponent(stack)}
+                    {STACK_DESCRIPTION[stack].inBeta && (
+                      <Badge className="ml-2" variant="secondary">
+                        Beta
+                      </Badge>
+                    )}
+                  </div>
+                </SelectItem>
+              ))}
             </SelectGroup>
           </SelectContent>
         </Select>
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index e0c1026..31459cb 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -3,16 +3,27 @@ export enum EditorTheme {
   COBALT = "cobalt",
 }
 
-// Keep in sync with backend (prompts.py)
+// Keep in sync with backend (prompts/types.py)
 export enum GeneratedCodeConfig {
   HTML_TAILWIND = "html_tailwind",
   REACT_TAILWIND = "react_tailwind",
-  VUE_TAILWIND = "vue_tailwind",
   BOOTSTRAP = "bootstrap",
+  VUE_TAILWIND = "vue_tailwind",
   IONIC_TAILWIND = "ionic_tailwind",
   SVG = "svg",
 }
 
+export const STACK_DESCRIPTION: {
+  [key in GeneratedCodeConfig]: { components: string[]; inBeta: boolean };
+} = {
+  html_tailwind: { components: ["HTML", "Tailwind"], inBeta: false },
+  react_tailwind: { components: ["React", "Tailwind"], inBeta: false },
+  bootstrap: { components: ["Bootstrap"], inBeta: false },
+  vue_tailwind: { components: ["Vue", "Tailwind"], inBeta: true },
+  ionic_tailwind: { components: ["Ionic", "Tailwind"], inBeta: true },
+  svg: { components: ["SVG"], inBeta: true },
+};
+
 export interface Settings {
   openAiApiKey: string | null;
   openAiBaseURL: string | null;