diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index afca272..8875a50 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,17 +1,17 @@
 import { useEffect, useRef } from "react";
 import ImageUpload from "./components/ImageUpload";
 import { generateCode } from "./generateCode";
-import SettingsDialog from "./components/SettingsDialog";
+import SettingsDialog from "./components/settings/SettingsDialog";
 import { AppState, CodeGenerationParams, EditorTheme, Settings } from "./types";
 import { IS_RUNNING_ON_CLOUD } from "./config";
-import { PicoBadge } from "./components/PicoBadge";
-import { OnboardingNote } from "./components/OnboardingNote";
+import { PicoBadge } from "./components/messages/PicoBadge";
+import { OnboardingNote } from "./components/messages/OnboardingNote";
 import { usePersistedState } from "./hooks/usePersistedState";
 import { UrlInputSection } from "./components/UrlInputSection";
 import TermsOfServiceDialog from "./components/TermsOfServiceDialog";
 import html2canvas from "html2canvas";
 import { USER_CLOSE_WEB_SOCKET_CODE } from "./constants";
-import OutputSettingsSection from "./components/OutputSettingsSection";
+import OutputSettingsSection from "./components/settings/OutputSettingsSection";
 import { History } from "./components/history/history_types";
 import HistoryDisplay from "./components/history/HistoryDisplay";
 import { extractHistoryTree } from "./components/history/utils";
@@ -19,9 +19,9 @@ import toast from "react-hot-toast";
 import ImportCodeSection from "./components/ImportCodeSection";
 import { Stack } from "./lib/stacks";
 import { CodeGenerationModel } from "./lib/models";
-import ModelSettingsSection from "./components/ModelSettingsSection";
+import ModelSettingsSection from "./components/settings/ModelSettingsSection";
 import useBrowserTabIndicator from "./hooks/useBrowserTabIndicator";
-import TipLink from "./components/core/TipLink";
+import TipLink from "./components/messages/TipLink";
 import { useAppStore } from "./store/app-store";
 import { useProjectStore } from "./store/project-store";
 import Sidebar from "./components/sidebar/Sidebar";
diff --git a/frontend/src/components/ImportCodeSection.tsx b/frontend/src/components/ImportCodeSection.tsx
index c31e753..5628e95 100644
--- a/frontend/src/components/ImportCodeSection.tsx
+++ b/frontend/src/components/ImportCodeSection.tsx
@@ -10,7 +10,7 @@ import {
   DialogTrigger,
 } from "./ui/dialog";
 import { Textarea } from "./ui/textarea";
-import OutputSettingsSection from "./OutputSettingsSection";
+import OutputSettingsSection from "./settings/OutputSettingsSection";
 import toast from "react-hot-toast";
 import { Stack } from "../lib/stacks";
 
diff --git a/frontend/src/components/Spinner.tsx b/frontend/src/components/core/Spinner.tsx
similarity index 100%
rename from frontend/src/components/Spinner.tsx
rename to frontend/src/components/core/Spinner.tsx
diff --git a/frontend/src/components/OnboardingNote.tsx b/frontend/src/components/messages/OnboardingNote.tsx
similarity index 100%
rename from frontend/src/components/OnboardingNote.tsx
rename to frontend/src/components/messages/OnboardingNote.tsx
diff --git a/frontend/src/components/PicoBadge.tsx b/frontend/src/components/messages/PicoBadge.tsx
similarity index 100%
rename from frontend/src/components/PicoBadge.tsx
rename to frontend/src/components/messages/PicoBadge.tsx
diff --git a/frontend/src/components/core/TipLink.tsx b/frontend/src/components/messages/TipLink.tsx
similarity index 100%
rename from frontend/src/components/core/TipLink.tsx
rename to frontend/src/components/messages/TipLink.tsx
diff --git a/frontend/src/components/ModelSettingsSection.tsx b/frontend/src/components/settings/ModelSettingsSection.tsx
similarity index 95%
rename from frontend/src/components/ModelSettingsSection.tsx
rename to frontend/src/components/settings/ModelSettingsSection.tsx
index 4a4e7b9..314dfc5 100644
--- a/frontend/src/components/ModelSettingsSection.tsx
+++ b/frontend/src/components/settings/ModelSettingsSection.tsx
@@ -4,12 +4,12 @@ import {
   SelectGroup,
   SelectItem,
   SelectTrigger,
-} from "./ui/select";
+} from "../ui/select";
 import {
   CODE_GENERATION_MODEL_DESCRIPTIONS,
   CodeGenerationModel,
-} from "../lib/models";
-import { Badge } from "./ui/badge";
+} from "../../lib/models";
+import { Badge } from "../ui/badge";
 
 interface Props {
   codeGenerationModel: CodeGenerationModel;
diff --git a/frontend/src/components/OutputSettingsSection.tsx b/frontend/src/components/settings/OutputSettingsSection.tsx
similarity index 94%
rename from frontend/src/components/OutputSettingsSection.tsx
rename to frontend/src/components/settings/OutputSettingsSection.tsx
index 64f62cb..3d0c176 100644
--- a/frontend/src/components/OutputSettingsSection.tsx
+++ b/frontend/src/components/settings/OutputSettingsSection.tsx
@@ -5,9 +5,9 @@ import {
   SelectGroup,
   SelectItem,
   SelectTrigger,
-} from "./ui/select";
-import { Badge } from "./ui/badge";
-import { Stack, STACK_DESCRIPTIONS } from "../lib/stacks";
+} from "../ui/select";
+import { Badge } from "../ui/badge";
+import { Stack, STACK_DESCRIPTIONS } from "../../lib/stacks";
 
 function generateDisplayComponent(stack: Stack) {
   const stackComponents = STACK_DESCRIPTIONS[stack].components;
diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/settings/SettingsDialog.tsx
similarity index 96%
rename from frontend/src/components/SettingsDialog.tsx
rename to frontend/src/components/settings/SettingsDialog.tsx
index 97d8f38..4283ad4 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/settings/SettingsDialog.tsx
@@ -9,19 +9,19 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { FaCog } from "react-icons/fa";
-import { EditorTheme, Settings } from "../types";
-import { Switch } from "./ui/switch";
-import { Label } from "./ui/label";
-import { Input } from "./ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger } from "./ui/select";
-import { capitalize } from "../lib/utils";
-import { IS_RUNNING_ON_CLOUD } from "../config";
+import { EditorTheme, Settings } from "../../types";
+import { Switch } from "../ui/switch";
+import { Label } from "../ui/label";
+import { Input } from "../ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "../ui/select";
+import { capitalize } from "../../lib/utils";
+import { IS_RUNNING_ON_CLOUD } from "../../config";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "./ui/accordion";
+} from "../ui/accordion";
 
 interface Props {
   settings: Settings;
diff --git a/frontend/src/components/sidebar/Sidebar.tsx b/frontend/src/components/sidebar/Sidebar.tsx
index a92c77f..f1d2141 100644
--- a/frontend/src/components/sidebar/Sidebar.tsx
+++ b/frontend/src/components/sidebar/Sidebar.tsx
@@ -4,9 +4,9 @@ import { useAppStore } from "../../store/app-store";
 import { useProjectStore } from "../../store/project-store";
 import { AppState } from "../../types";
 import CodePreview from "../preview/CodePreview";
-import Spinner from "../Spinner";
+import Spinner from "../core/Spinner";
 import KeyboardShortcutBadge from "../core/KeyboardShortcutBadge";
-import TipLink from "../core/TipLink";
+import TipLink from "../messages/TipLink";
 import SelectAndEditModeToggleButton from "../select-and-edit/SelectAndEditModeToggleButton";
 import { Button } from "../ui/button";
 import { Textarea } from "../ui/textarea";