diff --git a/.changeset/little-zebras-boil.md b/.changeset/little-zebras-boil.md
new file mode 100644
index 000000000..a1e4b49fe
--- /dev/null
+++ b/.changeset/little-zebras-boil.md
@@ -0,0 +1,6 @@
+---
+'@halfdomelabs/project-builder-web': patch
+'@halfdomelabs/ui-components': patch
+---
+
+Fix model UI fields alignment
diff --git a/packages/project-builder-web/src/index.tsx b/packages/project-builder-web/src/index.tsx
index ee7d0b928..5d62bb1f5 100644
--- a/packages/project-builder-web/src/index.tsx
+++ b/packages/project-builder-web/src/index.tsx
@@ -3,7 +3,7 @@ import * as ReactDOM from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 
 import './index.css';
-import { router } from './pages';
+import { router } from './pages/_routes';
 
 const rootElement = document.querySelector('#root');
 if (!rootElement) throw new Error('Failed to find root element');
diff --git a/packages/project-builder-web/src/pages/index.tsx b/packages/project-builder-web/src/pages/_routes.tsx
similarity index 97%
rename from packages/project-builder-web/src/pages/index.tsx
rename to packages/project-builder-web/src/pages/_routes.tsx
index 2a0eed084..76e9f0400 100644
--- a/packages/project-builder-web/src/pages/index.tsx
+++ b/packages/project-builder-web/src/pages/_routes.tsx
@@ -5,7 +5,7 @@ import { AppLayout } from '@src/app/AppLayout/AppLayout';
 import { createRouteCrumb } from '@src/types/routes';
 
 import { AppsRoutes } from './apps';
-import { DataRoutes } from './data';
+import { DataRoutes } from './data/_routes';
 import { FeatureRoutes } from './features';
 import HomePage from './home/home.page';
 import { NotFoundRoute } from './NotFound.page';
diff --git a/packages/project-builder-web/src/pages/data/DataLayout.tsx b/packages/project-builder-web/src/pages/data/_layout.tsx
similarity index 96%
rename from packages/project-builder-web/src/pages/data/DataLayout.tsx
rename to packages/project-builder-web/src/pages/data/_layout.tsx
index b8ba5d22a..20fda53af 100644
--- a/packages/project-builder-web/src/pages/data/DataLayout.tsx
+++ b/packages/project-builder-web/src/pages/data/_layout.tsx
@@ -8,7 +8,7 @@ import { NavLink, Outlet, useMatch } from 'react-router-dom';
 import { ErrorBoundary } from '@src/components/ErrorBoundary/ErrorBoundary';
 
 import { EnumsSidebarList } from './enums/EnumsSidebarList';
-import { ModelsSidebarList } from './models/ModelsSidebarList';
+import { ModelsSidebarList } from './models/_components/ModelsSidebarList';
 
 export function DataLayout(): React.JSX.Element {
   const {
diff --git a/packages/project-builder-web/src/pages/data/index.tsx b/packages/project-builder-web/src/pages/data/_routes.tsx
similarity index 74%
rename from packages/project-builder-web/src/pages/data/index.tsx
rename to packages/project-builder-web/src/pages/data/_routes.tsx
index f26f00c23..760427d5c 100644
--- a/packages/project-builder-web/src/pages/data/index.tsx
+++ b/packages/project-builder-web/src/pages/data/_routes.tsx
@@ -2,16 +2,16 @@ import type { RouteObject } from 'react-router-dom';
 
 import { Navigate } from 'react-router-dom';
 
-import { DataLayout } from './DataLayout';
+import { DataLayout } from './_layout';
 import { EnumRoutes } from './enums';
-import { ModelRoutes } from './models';
+import { ModelsRoutes } from './models/_routes';
 
 export const DataRoutes: RouteObject = {
   element: <DataLayout />,
   path: '/data',
   children: [
     { index: true, element: <Navigate to="./models" /> },
-    ModelRoutes,
+    ModelsRoutes,
     EnumRoutes,
   ],
 };
diff --git a/packages/project-builder-web/src/pages/data/enums/EnumsSidebarList.tsx b/packages/project-builder-web/src/pages/data/enums/EnumsSidebarList.tsx
index a29986001..55c055186 100644
--- a/packages/project-builder-web/src/pages/data/enums/EnumsSidebarList.tsx
+++ b/packages/project-builder-web/src/pages/data/enums/EnumsSidebarList.tsx
@@ -13,7 +13,7 @@ import { useState } from 'react';
 import { MdAdd, MdClear } from 'react-icons/md';
 import { NavLink } from 'react-router-dom';
 
-import { createEnumEditLink } from '../models/utils/url';
+import { createEnumEditLink } from '../models/_utils/url';
 import { NewEnumDialog } from './new/NewEnumDialog';
 
 interface EnumsSidebarListProps {
diff --git a/packages/project-builder-web/src/pages/data/enums/hooks/useEnumForm.tsx b/packages/project-builder-web/src/pages/data/enums/hooks/useEnumForm.tsx
index 06bc5687e..521afa90a 100644
--- a/packages/project-builder-web/src/pages/data/enums/hooks/useEnumForm.tsx
+++ b/packages/project-builder-web/src/pages/data/enums/hooks/useEnumForm.tsx
@@ -23,7 +23,7 @@ import { useDeleteReferenceDialog } from '@src/hooks/useDeleteReferenceDialog';
 import { logAndFormatError } from '@src/services/error-formatter';
 import { NotFoundError, RefDeleteError } from '@src/utils/error';
 
-import { createEnumEditLink } from '../../models/utils/url';
+import { createEnumEditLink } from '../../models/_utils/url';
 
 interface UseEnumFormOptions {
   schema?: z.ZodTypeAny;
diff --git a/packages/project-builder-web/src/pages/data/models/ModelsSidebarList.tsx b/packages/project-builder-web/src/pages/data/models/_components/ModelsSidebarList.tsx
similarity index 98%
rename from packages/project-builder-web/src/pages/data/models/ModelsSidebarList.tsx
rename to packages/project-builder-web/src/pages/data/models/_components/ModelsSidebarList.tsx
index 81e12d0e2..bfcf1f11d 100644
--- a/packages/project-builder-web/src/pages/data/models/ModelsSidebarList.tsx
+++ b/packages/project-builder-web/src/pages/data/models/_components/ModelsSidebarList.tsx
@@ -13,8 +13,8 @@ import { useState } from 'react';
 import { MdAdd, MdClear } from 'react-icons/md';
 import { NavLink } from 'react-router-dom';
 
+import { createModelEditLink } from '../_utils/url';
 import { NewModelDialog } from './NewModelDialog';
-import { createModelEditLink } from './utils/url';
 
 interface ModelsSidebarListProps {
   className?: string;
diff --git a/packages/project-builder-web/src/pages/data/models/NewModelDialog.tsx b/packages/project-builder-web/src/pages/data/models/_components/NewModelDialog.tsx
similarity index 93%
rename from packages/project-builder-web/src/pages/data/models/NewModelDialog.tsx
rename to packages/project-builder-web/src/pages/data/models/_components/NewModelDialog.tsx
index b5abaf9af..b3a66cd03 100644
--- a/packages/project-builder-web/src/pages/data/models/NewModelDialog.tsx
+++ b/packages/project-builder-web/src/pages/data/models/_components/NewModelDialog.tsx
@@ -7,8 +7,8 @@ import {
   useControlledState,
 } from '@halfdomelabs/ui-components';
 
-import { ModelInfoForm } from './edit/model/ModelInfoForm';
-import { useModelForm } from './hooks/useModelForm';
+import { useModelForm } from '../_hooks/useModelForm';
+import { ModelInfoForm } from '../edit/[id]/_components/ModelInfoForm';
 
 interface NewModelDialogProps {
   children: React.ReactNode;
diff --git a/packages/project-builder-web/src/pages/data/models/constants/scalar-types.ts b/packages/project-builder-web/src/pages/data/models/_constants.tsx
similarity index 55%
rename from packages/project-builder-web/src/pages/data/models/constants/scalar-types.ts
rename to packages/project-builder-web/src/pages/data/models/_constants.tsx
index 6441dce91..574e0f38d 100644
--- a/packages/project-builder-web/src/pages/data/models/constants/scalar-types.ts
+++ b/packages/project-builder-web/src/pages/data/models/_constants.tsx
@@ -1,5 +1,32 @@
 import type { ScalarFieldType } from '@halfdomelabs/project-builder-lib';
 
+import { modelTransformerEntityType } from '@halfdomelabs/project-builder-lib';
+import { createNewModelTransformerWebConfig } from '@halfdomelabs/project-builder-lib/web';
+
+import { embeddedRelationTransformerWebConfig } from './edit/[id]/_components/service/ServiceEmbeddedRelationForm';
+
+export const BUILT_IN_TRANSFORMER_WEB_CONFIGS = [
+  embeddedRelationTransformerWebConfig,
+  createNewModelTransformerWebConfig({
+    name: 'password',
+    label: 'Password',
+    description: "Hashes the input value of value 'password' using Argon2id",
+    getNewTransformer: () => ({
+      id: modelTransformerEntityType.generateNewId(),
+      type: 'password',
+    }),
+    allowNewTransformer(_, modelConfig) {
+      return (
+        !modelConfig.service?.transformers?.some(
+          (t) => t.type === 'password',
+        ) && modelConfig.model.fields.some((f) => f.name === 'passwordHash')
+      );
+    },
+    getSummary: () => [],
+    pluginId: undefined,
+  }),
+];
+
 export interface ScalarFieldTypeOption {
   label: string;
   value: string;
diff --git a/packages/project-builder-web/src/pages/data/models/hooks/useEditedModelConfig.tsx b/packages/project-builder-web/src/pages/data/models/_hooks/useEditedModelConfig.tsx
similarity index 100%
rename from packages/project-builder-web/src/pages/data/models/hooks/useEditedModelConfig.tsx
rename to packages/project-builder-web/src/pages/data/models/_hooks/useEditedModelConfig.tsx
diff --git a/packages/project-builder-web/src/pages/data/models/hooks/useModelForm.ts b/packages/project-builder-web/src/pages/data/models/_hooks/useModelForm.ts
similarity index 99%
rename from packages/project-builder-web/src/pages/data/models/hooks/useModelForm.ts
rename to packages/project-builder-web/src/pages/data/models/_hooks/useModelForm.ts
index a15f97340..15e81985d 100644
--- a/packages/project-builder-web/src/pages/data/models/hooks/useModelForm.ts
+++ b/packages/project-builder-web/src/pages/data/models/_hooks/useModelForm.ts
@@ -24,7 +24,7 @@ import { logAndFormatError } from 'src/services/error-formatter';
 import { useDeleteReferenceDialog } from '@src/hooks/useDeleteReferenceDialog';
 import { NotFoundError, RefDeleteError } from '@src/utils/error';
 
-import { createModelEditLink } from '../utils/url';
+import { createModelEditLink } from '../_utils/url';
 
 interface UseModelFormOptions {
   schema?: z.ZodTypeAny;
diff --git a/packages/project-builder-web/src/pages/data/models/index.tsx b/packages/project-builder-web/src/pages/data/models/_routes.tsx
similarity index 63%
rename from packages/project-builder-web/src/pages/data/models/index.tsx
rename to packages/project-builder-web/src/pages/data/models/_routes.tsx
index 397c5c34b..9008dbb87 100644
--- a/packages/project-builder-web/src/pages/data/models/index.tsx
+++ b/packages/project-builder-web/src/pages/data/models/_routes.tsx
@@ -3,16 +3,16 @@ import type { RouteObject } from 'react-router-dom';
 import { NotFoundRoute } from '@src/pages/NotFound.page';
 import { createRouteCrumb } from '@src/types/routes';
 
-import { ModelEditRoutes } from './edit/_routes';
-import ModelListPage from './ModelList.page';
+import { ModelEditRoutes } from './edit/[id]/_routes';
+import ModelsIndexPage from './index.page';
 
-export const ModelRoutes: RouteObject = {
+export const ModelsRoutes: RouteObject = {
   path: 'models/*',
   handle: {
     crumb: createRouteCrumb({ label: 'Models', url: '/data/models' }),
   },
   children: [
-    { index: true, element: <ModelListPage /> },
+    { index: true, element: <ModelsIndexPage /> },
     ModelEditRoutes,
     NotFoundRoute,
   ],
diff --git a/packages/project-builder-web/src/pages/data/models/utils/url.ts b/packages/project-builder-web/src/pages/data/models/_utils/url.ts
similarity index 100%
rename from packages/project-builder-web/src/pages/data/models/utils/url.ts
rename to packages/project-builder-web/src/pages/data/models/_utils/url.ts
diff --git a/packages/project-builder-web/src/pages/data/models/constants/built-in-transformers.ts b/packages/project-builder-web/src/pages/data/models/constants/built-in-transformers.ts
deleted file mode 100644
index 9e5e33514..000000000
--- a/packages/project-builder-web/src/pages/data/models/constants/built-in-transformers.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { modelTransformerEntityType } from '@halfdomelabs/project-builder-lib';
-import { createNewModelTransformerWebConfig } from '@halfdomelabs/project-builder-lib/web';
-
-import { embeddedRelationTransformerWebConfig } from '../edit/service/ServiceEmbeddedRelationForm';
-
-export const BUILT_IN_TRANSFORMER_WEB_CONFIGS = [
-  embeddedRelationTransformerWebConfig,
-  createNewModelTransformerWebConfig({
-    name: 'password',
-    label: 'Password',
-    description: "Hashes the input value of value 'password' using SHA-256",
-    getNewTransformer: () => ({
-      id: modelTransformerEntityType.generateNewId(),
-      type: 'password',
-    }),
-    allowNewTransformer(_, modelConfig) {
-      return (
-        !modelConfig.service?.transformers?.some(
-          (t) => t.type === 'password',
-        ) && modelConfig.model.fields.some((f) => f.name === 'passwordHash')
-      );
-    },
-    getSummary: () => [],
-    pluginId: undefined,
-  }),
-];
diff --git a/packages/project-builder-web/src/pages/data/models/edit/components/BadgeWithTypeLabel.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/BadgeWithTypeLabel.tsx
similarity index 100%
rename from packages/project-builder-web/src/pages/data/models/edit/components/BadgeWithTypeLabel.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/BadgeWithTypeLabel.tsx
diff --git a/packages/project-builder-web/src/pages/data/models/edit/ModelHeaderBar.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/ModelHeaderBar.tsx
similarity index 100%
rename from packages/project-builder-web/src/pages/data/models/edit/ModelHeaderBar.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/ModelHeaderBar.tsx
diff --git a/packages/project-builder-web/src/pages/data/models/edit/ModelInfoEditDialog.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/ModelInfoEditDialog.tsx
similarity index 92%
rename from packages/project-builder-web/src/pages/data/models/edit/ModelInfoEditDialog.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/ModelInfoEditDialog.tsx
index b46326b08..12b2c9a55 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/ModelInfoEditDialog.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/ModelInfoEditDialog.tsx
@@ -6,8 +6,9 @@ import {
   useControlledState,
 } from '@halfdomelabs/ui-components';
 
-import { useModelForm } from '../hooks/useModelForm';
-import { ModelInfoForm } from './model/ModelInfoForm';
+import { useModelForm } from '@src/pages/data/models/_hooks/useModelForm';
+
+import { ModelInfoForm } from './ModelInfoForm';
 
 interface ModelInfoEditDialogProps {
   open?: boolean;
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/ModelInfoForm.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/ModelInfoForm.tsx
similarity index 100%
rename from packages/project-builder-web/src/pages/data/models/edit/model/ModelInfoForm.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/ModelInfoForm.tsx
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/ModelRelationsSection.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/ModelRelationsSection.tsx
similarity index 97%
rename from packages/project-builder-web/src/pages/data/models/edit/model/ModelRelationsSection.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/ModelRelationsSection.tsx
index 77c6d6395..98a5db7d9 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/model/ModelRelationsSection.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/ModelRelationsSection.tsx
@@ -11,7 +11,7 @@ import {
 } from '@halfdomelabs/ui-components';
 import { MdAdd, MdDeleteOutline, MdEdit } from 'react-icons/md';
 
-import { useEditedModelConfig } from '../../hooks/useEditedModelConfig';
+import { useEditedModelConfig } from '../../../_hooks/useEditedModelConfig';
 import { ModelRelationDialog } from './fields/relations/ModelRelationDialog';
 
 interface Props {
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/ModelUniqueConstraintsSection.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/ModelUniqueConstraintsSection.tsx
similarity index 97%
rename from packages/project-builder-web/src/pages/data/models/edit/model/ModelUniqueConstraintsSection.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/ModelUniqueConstraintsSection.tsx
index 7786399c8..3a9fa50d6 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/model/ModelUniqueConstraintsSection.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/ModelUniqueConstraintsSection.tsx
@@ -10,7 +10,7 @@ import {
 } from '@halfdomelabs/ui-components';
 import { MdAdd, MdDeleteOutline, MdEdit } from 'react-icons/md';
 
-import { useEditedModelConfig } from '../../hooks/useEditedModelConfig';
+import { useEditedModelConfig } from '../../../_hooks/useEditedModelConfig';
 import { ModelUniqueConstraintDialog } from './fields/unique-constraints/ModelUniqueConstraintDialog';
 
 interface Props {
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/fields/ModelAddFieldButton.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/ModelAddFieldButton.tsx
similarity index 97%
rename from packages/project-builder-web/src/pages/data/models/edit/model/fields/ModelAddFieldButton.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/ModelAddFieldButton.tsx
index 112212ee8..60ea18f00 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/model/fields/ModelAddFieldButton.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/ModelAddFieldButton.tsx
@@ -10,7 +10,7 @@ import { Button, ButtonGroup, Dropdown } from '@halfdomelabs/ui-components';
 import { useMemo } from 'react';
 import { MdExpandMore } from 'react-icons/md';
 
-import { useEditedModelConfig } from '../../../hooks/useEditedModelConfig';
+import { useEditedModelConfig } from '../../../../_hooks/useEditedModelConfig';
 
 interface ModelAddFieldButtonProps {
   className?: string;
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/fields/ModelFieldDefaultValueInput.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/ModelFieldDefaultValueInput.tsx
similarity index 82%
rename from packages/project-builder-web/src/pages/data/models/edit/model/fields/ModelFieldDefaultValueInput.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/ModelFieldDefaultValueInput.tsx
index bdf734ecd..4a9fb189f 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/model/fields/ModelFieldDefaultValueInput.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/ModelFieldDefaultValueInput.tsx
@@ -45,7 +45,7 @@ export function ModelFieldDefaultValueInput({
 
   if (type === 'boolean') {
     return (
-      <div className="flex items-center space-x-1">
+      <div className="flex items-center gap-1">
         <SelectField.Controller
           control={control}
           className="flex-1"
@@ -57,8 +57,9 @@ export function ModelFieldDefaultValueInput({
           placeholder="NULL"
         />
         {defaultValue && (
-          <Button
+          <Button.WithOnlyIcon
             title="Reset"
+            icon={HiOutlineX}
             onClick={() => {
               setValue(`model.fields.${idx}.options.default`, '', {
                 shouldDirty: true,
@@ -66,9 +67,7 @@ export function ModelFieldDefaultValueInput({
             }}
             variant="ghost"
             size="icon"
-          >
-            <Button.Icon icon={HiOutlineX} />
-          </Button>
+          />
         )}
       </div>
     );
@@ -76,15 +75,17 @@ export function ModelFieldDefaultValueInput({
 
   if (['string', 'int', 'float'].includes(type)) {
     return (
-      <div className="flex items-center space-x-1">
+      <div className="flex items-center gap-1">
         <InputField.Controller
           control={control}
           placeholder="NULL"
           name={`model.fields.${idx}.options.default`}
+          className="flex-1"
         />
         {defaultValue && (
-          <Button
+          <Button.WithOnlyIcon
             title="Reset"
+            icon={HiOutlineX}
             onClick={() => {
               setValue(`model.fields.${idx}.options.default`, undefined, {
                 shouldDirty: true,
@@ -92,43 +93,45 @@ export function ModelFieldDefaultValueInput({
             }}
             variant="ghost"
             size="icon"
-          >
-            <Button.Icon icon={HiOutlineX} />
-          </Button>
+          />
         )}
       </div>
     );
   }
+
   if (type === 'uuid') {
     if (optionsValue?.genUuid) {
       return (
-        <div className="flex items-center space-x-1">
-          <InputField disabled value="Random UUID v4" />
-          <Button
+        <div className="flex items-center gap-1">
+          <InputField disabled value="Random UUID v4" className="flex-1" />
+          <Button.WithOnlyIcon
             title="Reset"
+            icon={HiOutlineX}
             onClick={() => {
               onOptionsChange({ ...optionsValue, genUuid: false });
             }}
             variant="ghost"
             size="icon"
-          >
-            <Button.Icon icon={HiOutlineX} />
-          </Button>
+          />
         </div>
       );
     }
     return (
-      <div className="flex items-center space-x-1">
+      <div className="flex items-center gap-1">
         <InputField.Controller
           control={control}
           placeholder="NULL"
           name={`model.fields.${idx}.options.default`}
+          className="flex-1"
         />
         <Dropdown>
           <Dropdown.Trigger asChild>
-            <Button variant="ghost" size="icon">
-              <Button.Icon icon={HiDotsVertical} />
-            </Button>
+            <Button.WithOnlyIcon
+              title="Options"
+              variant="ghost"
+              size="icon"
+              icon={HiDotsVertical}
+            />
           </Dropdown.Trigger>
           <Dropdown.Content>
             <Dropdown.Group>
@@ -154,10 +157,15 @@ export function ModelFieldDefaultValueInput({
 
     if (defaultToNow ?? updatedAt) {
       return (
-        <div className="flex items-center space-x-1">
-          <InputField disabled value={updatedAt ? 'Last Updated' : 'Now'} />
-          <Button
+        <div className="flex items-center gap-1">
+          <InputField
+            disabled
+            value={updatedAt ? 'Last Updated' : 'Now'}
+            className="flex-1"
+          />
+          <Button.WithOnlyIcon
             title="Reset"
+            icon={HiOutlineX}
             onClick={() => {
               onOptionsChange({
                 ...optionsValue,
@@ -167,9 +175,7 @@ export function ModelFieldDefaultValueInput({
             }}
             variant="ghost"
             size="icon"
-          >
-            <Button.Icon icon={HiOutlineX} />
-          </Button>
+          />
         </div>
       );
     }
@@ -179,12 +185,16 @@ export function ModelFieldDefaultValueInput({
           placeholder="NULL"
           control={control}
           name={`model.fields.${idx}.options.default`}
+          className="flex-1"
         />
         <Dropdown>
           <Dropdown.Trigger asChild>
-            <Button variant="ghost" size="icon">
-              <Button.Icon icon={HiDotsVertical} />
-            </Button>
+            <Button.WithOnlyIcon
+              title="Options"
+              variant="ghost"
+              size="icon"
+              icon={HiDotsVertical}
+            />
           </Dropdown.Trigger>
           <Dropdown.Content>
             <Dropdown.Group>
@@ -235,10 +245,12 @@ export function ModelFieldDefaultValueInput({
             });
           }}
           options={enumValues}
+          className="flex-1"
         />
         {optionsValue.defaultEnumValueRef && (
-          <Button
+          <Button.WithOnlyIcon
             title="Reset"
+            icon={HiOutlineX}
             onClick={() => {
               onOptionsChange({
                 ...optionsValue,
@@ -247,9 +259,7 @@ export function ModelFieldDefaultValueInput({
             }}
             variant="ghost"
             size="icon"
-          >
-            <Button.Icon icon={HiOutlineX} />
-          </Button>
+          />
         )}
       </div>
     );
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/fields/ModelFieldForm.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/ModelFieldForm.tsx
similarity index 99%
rename from packages/project-builder-web/src/pages/data/models/edit/model/fields/ModelFieldForm.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/ModelFieldForm.tsx
index 4a2bda7b0..c63a28244 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/model/fields/ModelFieldForm.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/ModelFieldForm.tsx
@@ -16,7 +16,7 @@ import { useWatch } from 'react-hook-form';
 import { HiDotsVertical } from 'react-icons/hi';
 import { MdOutlineDelete } from 'react-icons/md';
 
-import { useEditedModelConfig } from '../../../hooks/useEditedModelConfig';
+import { useEditedModelConfig } from '../../../../_hooks/useEditedModelConfig';
 import { ModelFieldBadges } from './badges/ModelFieldBadges';
 import { ModelFieldDefaultValueInput } from './ModelFieldDefaultValueInput';
 import { ModelFieldTypeInput } from './ModelFieldTypeInput';
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/fields/ModelFieldTypeInput.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/ModelFieldTypeInput.tsx
similarity index 93%
rename from packages/project-builder-web/src/pages/data/models/edit/model/fields/ModelFieldTypeInput.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/ModelFieldTypeInput.tsx
index 31ae1deb2..0f413272d 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/model/fields/ModelFieldTypeInput.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/ModelFieldTypeInput.tsx
@@ -10,9 +10,9 @@ import { useProjectDefinition } from '@halfdomelabs/project-builder-lib/web';
 import { ComboboxField } from '@halfdomelabs/ui-components';
 import { useController } from 'react-hook-form';
 
-import type { ScalarFieldTypeOption } from '../../../constants/scalar-types';
+import type { ScalarFieldTypeOption } from '../../../../_constants';
 
-import { SCALAR_FIELD_TYPE_OPTIONS } from '../../../constants/scalar-types';
+import { SCALAR_FIELD_TYPE_OPTIONS } from '../../../../_constants';
 
 interface ModelFieldTypeInputProps {
   control: Control<ModelConfig>;
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/fields/ModelFieldsForm.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/ModelFieldsForm.tsx
similarity index 100%
rename from packages/project-builder-web/src/pages/data/models/edit/model/fields/ModelFieldsForm.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/ModelFieldsForm.tsx
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/fields/badges/ModelFieldBadges.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/badges/ModelFieldBadges.tsx
similarity index 95%
rename from packages/project-builder-web/src/pages/data/models/edit/model/fields/badges/ModelFieldBadges.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/badges/ModelFieldBadges.tsx
index c8b4c9d27..0fab65ba5 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/model/fields/badges/ModelFieldBadges.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/badges/ModelFieldBadges.tsx
@@ -4,7 +4,8 @@ import type { Control } from 'react-hook-form';
 
 import { clsx } from 'clsx';
 
-import { useEditedModelConfig } from '../../../../hooks/useEditedModelConfig';
+import { useEditedModelConfig } from '@src/pages/data/models/_hooks/useEditedModelConfig';
+
 import { ModelPrimaryKeyBadge } from '../primary-key/ModelPrimaryKeyBadge';
 import { ModelRelationsBadge } from '../relations/ModelRelationBadge';
 import { ModelFieldUniqueBadge } from '../unique-constraints/ModelUniqueConstraintBadge';
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/fields/primary-key/ModelPrimaryKeyBadge.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/primary-key/ModelPrimaryKeyBadge.tsx
similarity index 100%
rename from packages/project-builder-web/src/pages/data/models/edit/model/fields/primary-key/ModelPrimaryKeyBadge.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/primary-key/ModelPrimaryKeyBadge.tsx
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/fields/primary-key/ModelPrimaryKeyDialog.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/primary-key/ModelPrimaryKeyDialog.tsx
similarity index 100%
rename from packages/project-builder-web/src/pages/data/models/edit/model/fields/primary-key/ModelPrimaryKeyDialog.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/primary-key/ModelPrimaryKeyDialog.tsx
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/fields/primary-key/ModelPrimaryKeyForm.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/primary-key/ModelPrimaryKeyForm.tsx
similarity index 95%
rename from packages/project-builder-web/src/pages/data/models/edit/model/fields/primary-key/ModelPrimaryKeyForm.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/primary-key/ModelPrimaryKeyForm.tsx
index 048c077f7..c7ee37ae7 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/model/fields/primary-key/ModelPrimaryKeyForm.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/primary-key/ModelPrimaryKeyForm.tsx
@@ -13,7 +13,7 @@ import { useId } from 'react';
 import { useController, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { useEditedModelConfig } from '@src/pages/data/models/hooks/useEditedModelConfig';
+import { useEditedModelConfig } from '@src/pages/data/models/_hooks/useEditedModelConfig';
 
 interface ModelPrimaryKeyFormProps {
   className?: string;
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/fields/relations/ModelRelationBadge.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/relations/ModelRelationBadge.tsx
similarity index 100%
rename from packages/project-builder-web/src/pages/data/models/edit/model/fields/relations/ModelRelationBadge.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/relations/ModelRelationBadge.tsx
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/fields/relations/ModelRelationDialog.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/relations/ModelRelationDialog.tsx
similarity index 100%
rename from packages/project-builder-web/src/pages/data/models/edit/model/fields/relations/ModelRelationDialog.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/relations/ModelRelationDialog.tsx
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/fields/relations/ModelRelationForm.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/relations/ModelRelationForm.tsx
similarity index 99%
rename from packages/project-builder-web/src/pages/data/models/edit/model/fields/relations/ModelRelationForm.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/relations/ModelRelationForm.tsx
index 7900d0f66..bdf6d0eb5 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/model/fields/relations/ModelRelationForm.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/relations/ModelRelationForm.tsx
@@ -26,7 +26,7 @@ import { pluralize } from 'inflection';
 import React, { useId, useMemo } from 'react';
 import { useController, useForm } from 'react-hook-form';
 
-import { useEditedModelConfig } from '@src/pages/data/models/hooks/useEditedModelConfig';
+import { useEditedModelConfig } from '@src/pages/data/models/_hooks/useEditedModelConfig';
 
 interface ModelRelationFormProps {
   className?: string;
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/fields/unique-constraints/ModelUniqueConstraintBadge.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/unique-constraints/ModelUniqueConstraintBadge.tsx
similarity index 94%
rename from packages/project-builder-web/src/pages/data/models/edit/model/fields/unique-constraints/ModelUniqueConstraintBadge.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/unique-constraints/ModelUniqueConstraintBadge.tsx
index 4c47380c8..e015eaa21 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/model/fields/unique-constraints/ModelUniqueConstraintBadge.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/unique-constraints/ModelUniqueConstraintBadge.tsx
@@ -7,7 +7,7 @@ import { clsx } from 'clsx';
 import { useState } from 'react';
 import { MdStar } from 'react-icons/md';
 
-import { useEditedModelConfig } from '@src/pages/data/models/hooks/useEditedModelConfig';
+import { useEditedModelConfig } from '@src/pages/data/models/_hooks/useEditedModelConfig';
 
 import { ModelUniqueConstraintDialog } from './ModelUniqueConstraintDialog';
 
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/fields/unique-constraints/ModelUniqueConstraintDialog.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/unique-constraints/ModelUniqueConstraintDialog.tsx
similarity index 100%
rename from packages/project-builder-web/src/pages/data/models/edit/model/fields/unique-constraints/ModelUniqueConstraintDialog.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/unique-constraints/ModelUniqueConstraintDialog.tsx
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/fields/unique-constraints/ModelUniqueConstraintForm.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/unique-constraints/ModelUniqueConstraintForm.tsx
similarity index 97%
rename from packages/project-builder-web/src/pages/data/models/edit/model/fields/unique-constraints/ModelUniqueConstraintForm.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/unique-constraints/ModelUniqueConstraintForm.tsx
index f6a4e14ba..c83ffa648 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/model/fields/unique-constraints/ModelUniqueConstraintForm.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/unique-constraints/ModelUniqueConstraintForm.tsx
@@ -14,7 +14,7 @@ import { useId } from 'react';
 import { useController, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { useEditedModelConfig } from '@src/pages/data/models/hooks/useEditedModelConfig';
+import { useEditedModelConfig } from '@src/pages/data/models/_hooks/useEditedModelConfig';
 
 interface ModelUniqueConstraintFormProps {
   className?: string;
diff --git a/packages/project-builder-web/src/pages/data/models/edit/schema/GraphQLMutationsSection.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/graphql/GraphQLMutationsSection.tsx
similarity index 98%
rename from packages/project-builder-web/src/pages/data/models/edit/schema/GraphQLMutationsSection.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/graphql/GraphQLMutationsSection.tsx
index 0b8b6b972..da22a7d15 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/schema/GraphQLMutationsSection.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/graphql/GraphQLMutationsSection.tsx
@@ -13,7 +13,7 @@ import { useWatch } from 'react-hook-form';
 import { MdInfo } from 'react-icons/md';
 import { Link } from 'react-router-dom';
 
-import { useEditedModelConfig } from '../../hooks/useEditedModelConfig';
+import { useEditedModelConfig } from '../../../../_hooks/useEditedModelConfig';
 
 interface GraphQLMutationsSectionProps {
   className?: string;
diff --git a/packages/project-builder-web/src/pages/data/models/edit/schema/GraphQLObjectTypeSection.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/graphql/GraphQLObjectTypeSection.tsx
similarity index 98%
rename from packages/project-builder-web/src/pages/data/models/edit/schema/GraphQLObjectTypeSection.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/graphql/GraphQLObjectTypeSection.tsx
index 64890495c..e79c374e6 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/schema/GraphQLObjectTypeSection.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/graphql/GraphQLObjectTypeSection.tsx
@@ -9,9 +9,9 @@ import { useState } from 'react';
 import { useController, useWatch } from 'react-hook-form';
 import { MdExpandLess, MdExpandMore } from 'react-icons/md';
 
-import { SCALAR_FIELD_TYPE_OPTIONS } from '../../constants/scalar-types';
-import { useEditedModelConfig } from '../../hooks/useEditedModelConfig';
-import { BadgeWithTypeLabel } from '../components/BadgeWithTypeLabel';
+import { SCALAR_FIELD_TYPE_OPTIONS } from '../../../../_constants';
+import { useEditedModelConfig } from '../../../../_hooks/useEditedModelConfig';
+import { BadgeWithTypeLabel } from '../BadgeWithTypeLabel';
 
 interface GraphQLObjectTypeSectionProps {
   className?: string;
diff --git a/packages/project-builder-web/src/pages/data/models/edit/schema/GraphQLQueriesSection.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/graphql/GraphQLQueriesSection.tsx
similarity index 100%
rename from packages/project-builder-web/src/pages/data/models/edit/schema/GraphQLQueriesSection.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/graphql/GraphQLQueriesSection.tsx
diff --git a/packages/project-builder-web/src/pages/data/models/edit/service/ServiceEmbeddedRelationForm.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/service/ServiceEmbeddedRelationForm.tsx
similarity index 98%
rename from packages/project-builder-web/src/pages/data/models/edit/service/ServiceEmbeddedRelationForm.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/service/ServiceEmbeddedRelationForm.tsx
index 1cea93df4..6cce07a44 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/service/ServiceEmbeddedRelationForm.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/service/ServiceEmbeddedRelationForm.tsx
@@ -17,7 +17,7 @@ import { useEffect } from 'react';
 import { useWatch } from 'react-hook-form';
 import { usePrevious } from 'src/hooks/usePrevious';
 
-import { useEditedModelConfig } from '../../hooks/useEditedModelConfig';
+import { useEditedModelConfig } from '../../../../_hooks/useEditedModelConfig';
 
 function ServiceEmbeddedRelationForm({
   formProps,
diff --git a/packages/project-builder-web/src/pages/data/models/edit/service/ServiceMethodFieldsSection.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/service/ServiceMethodFieldsSection.tsx
similarity index 95%
rename from packages/project-builder-web/src/pages/data/models/edit/service/ServiceMethodFieldsSection.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/service/ServiceMethodFieldsSection.tsx
index 7180fc5d0..0799d1ab8 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/service/ServiceMethodFieldsSection.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/service/ServiceMethodFieldsSection.tsx
@@ -10,10 +10,12 @@ import {
 import { SectionList, SwitchField } from '@halfdomelabs/ui-components';
 import { useWatch } from 'react-hook-form';
 
-import { BUILT_IN_TRANSFORMER_WEB_CONFIGS } from '../../constants/built-in-transformers';
-import { SCALAR_FIELD_TYPE_OPTIONS } from '../../constants/scalar-types';
-import { useEditedModelConfig } from '../../hooks/useEditedModelConfig';
-import { BadgeWithTypeLabel } from '../components/BadgeWithTypeLabel';
+import {
+  BUILT_IN_TRANSFORMER_WEB_CONFIGS,
+  SCALAR_FIELD_TYPE_OPTIONS,
+} from '../../../../_constants';
+import { useEditedModelConfig } from '../../../../_hooks/useEditedModelConfig';
+import { BadgeWithTypeLabel } from '../BadgeWithTypeLabel';
 
 interface ServiceMethodFieldsSectionProps {
   className?: string;
diff --git a/packages/project-builder-web/src/pages/data/models/edit/service/ServiceTransformerDialog.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/service/ServiceTransformerDialog.tsx
similarity index 100%
rename from packages/project-builder-web/src/pages/data/models/edit/service/ServiceTransformerDialog.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/service/ServiceTransformerDialog.tsx
diff --git a/packages/project-builder-web/src/pages/data/models/edit/service/ServiceTransformerForm.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/service/ServiceTransformerForm.tsx
similarity index 96%
rename from packages/project-builder-web/src/pages/data/models/edit/service/ServiceTransformerForm.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/service/ServiceTransformerForm.tsx
index f016b9fe6..4fac18a0f 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/service/ServiceTransformerForm.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/service/ServiceTransformerForm.tsx
@@ -14,7 +14,7 @@ import { useId } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { useEditedModelConfig } from '../../hooks/useEditedModelConfig';
+import { useEditedModelConfig } from '../../../../_hooks/useEditedModelConfig';
 
 interface ServiceTransformerFormProps {
   className?: string;
diff --git a/packages/project-builder-web/src/pages/data/models/edit/service/ServiceTransformersSection.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/service/ServiceTransformersSection.tsx
similarity index 97%
rename from packages/project-builder-web/src/pages/data/models/edit/service/ServiceTransformersSection.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_components/service/ServiceTransformersSection.tsx
index 6cbbf9eab..c2a9e9d3c 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/service/ServiceTransformersSection.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_components/service/ServiceTransformersSection.tsx
@@ -19,8 +19,9 @@ import { useState } from 'react';
 import { useFieldArray, useWatch } from 'react-hook-form';
 import { MdAdd, MdEdit, MdOutlineDelete } from 'react-icons/md';
 
-import { BUILT_IN_TRANSFORMER_WEB_CONFIGS } from '../../constants/built-in-transformers';
-import { useEditedModelConfig } from '../../hooks/useEditedModelConfig';
+import { BUILT_IN_TRANSFORMER_WEB_CONFIGS } from '@src/pages/data/models/_constants';
+import { useEditedModelConfig } from '@src/pages/data/models/_hooks/useEditedModelConfig';
+
 import { ServiceTransformerDialog } from './ServiceTransformerDialog';
 
 interface Props {
diff --git a/packages/project-builder-web/src/pages/data/models/edit/ModelEditLayout.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_layout.tsx
similarity index 96%
rename from packages/project-builder-web/src/pages/data/models/edit/ModelEditLayout.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/_layout.tsx
index a4e633d3f..7f81d91b7 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/ModelEditLayout.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_layout.tsx
@@ -6,7 +6,7 @@ import { NavigationTabs } from '@halfdomelabs/ui-components';
 import { NavLink, Outlet, useParams } from 'react-router-dom';
 import { NotFoundCard } from 'src/components';
 
-import { ModelHeaderBar } from './ModelHeaderBar';
+import { ModelHeaderBar } from './_components/ModelHeaderBar';
 
 export function ModelEditLayout(): React.JSX.Element {
   const { uid } = useParams<'uid'>();
diff --git a/packages/project-builder-web/src/pages/data/models/edit/[id]/_routes.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/_routes.tsx
new file mode 100644
index 000000000..ac9f1f9eb
--- /dev/null
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/_routes.tsx
@@ -0,0 +1,51 @@
+import type { RouteObject } from 'react-router-dom';
+
+import { modelEntityType } from '@halfdomelabs/project-builder-lib';
+import { Navigate } from 'react-router-dom';
+
+import { NotFoundRoute } from '@src/pages/NotFound.page';
+import { createCrumbFromUid, createRouteCrumb } from '@src/types/routes';
+
+import { ModelEditLayout } from './_layout';
+import ModelEditGraphQLPage from './graphql.page';
+import ModelEditModelPage from './index.page';
+import ModelEditServicePage from './service.page';
+
+export const ModelEditRoutes: RouteObject = {
+  path: 'edit',
+  children: [
+    {
+      index: true,
+      element: <Navigate to="../" replace />,
+    },
+    {
+      path: ':uid',
+      element: <ModelEditLayout />,
+      handle: {
+        crumb: createCrumbFromUid(
+          modelEntityType,
+          'Edit Model',
+          '/data/models/edit/:uid',
+        ),
+      },
+      children: [
+        { index: true, element: <ModelEditModelPage /> },
+        {
+          path: 'service',
+          element: <ModelEditServicePage />,
+          handle: {
+            crumb: createRouteCrumb('Service'),
+          },
+        },
+        {
+          path: 'graphql',
+          element: <ModelEditGraphQLPage />,
+          handle: {
+            crumb: createRouteCrumb('GraphQL'),
+          },
+        },
+        NotFoundRoute,
+      ],
+    },
+  ],
+};
diff --git a/packages/project-builder-web/src/pages/data/models/edit/schema/schema.page.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/graphql.page.tsx
similarity index 66%
rename from packages/project-builder-web/src/pages/data/models/edit/schema/schema.page.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/graphql.page.tsx
index 66f0a855a..ca9a690dd 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/schema/schema.page.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/graphql.page.tsx
@@ -5,13 +5,13 @@ import { useBlockUnsavedChangesNavigate } from '@halfdomelabs/project-builder-li
 
 import FormActionBar from '@src/components/FormActionBar';
 
-import { EditedModelContextProvider } from '../../hooks/useEditedModelConfig';
-import { useModelForm } from '../../hooks/useModelForm';
-import { GraphQLMutationsSection } from './GraphQLMutationsSection';
-import { GraphQLObjectTypeSection } from './GraphQLObjectTypeSection';
-import { GraphQLQueriesSection } from './GraphQLQueriesSection';
+import { EditedModelContextProvider } from '../../_hooks/useEditedModelConfig';
+import { useModelForm } from '../../_hooks/useModelForm';
+import { GraphQLMutationsSection } from './_components/graphql/GraphQLMutationsSection';
+import { GraphQLObjectTypeSection } from './_components/graphql/GraphQLObjectTypeSection';
+import { GraphQLQueriesSection } from './_components/graphql/GraphQLQueriesSection';
 
-function ModelEditSchemaPage(): React.JSX.Element {
+function ModelEditGraphQLPage(): React.JSX.Element {
   const { form, onSubmit, defaultValues } = useModelForm({
     schema: modelBaseSchema.omit({ name: true, featureRef: true }),
   });
@@ -39,4 +39,4 @@ function ModelEditSchemaPage(): React.JSX.Element {
   );
 }
 
-export default ModelEditSchemaPage;
+export default ModelEditGraphQLPage;
diff --git a/packages/project-builder-web/src/pages/data/models/edit/model/model.page.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/index.page.tsx
similarity index 84%
rename from packages/project-builder-web/src/pages/data/models/edit/model/model.page.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/index.page.tsx
index bbea78fb2..127d7ec55 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/model/model.page.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/index.page.tsx
@@ -13,11 +13,11 @@ import { registerEntityTypeUrl } from 'src/services/entity-type';
 import { ErrorBoundary } from '@src/components/ErrorBoundary/ErrorBoundary';
 import FormActionBar from '@src/components/FormActionBar';
 
-import { EditedModelContextProvider } from '../../hooks/useEditedModelConfig';
-import { useModelForm } from '../../hooks/useModelForm';
-import { ModelFieldsForm } from './fields/ModelFieldsForm';
-import { ModelRelationsSection } from './ModelRelationsSection';
-import { ModelUniqueConstraintsSection } from './ModelUniqueConstraintsSection';
+import { EditedModelContextProvider } from '../../_hooks/useEditedModelConfig';
+import { useModelForm } from '../../_hooks/useModelForm';
+import { ModelFieldsForm } from './_components/fields/ModelFieldsForm';
+import { ModelRelationsSection } from './_components/ModelRelationsSection';
+import { ModelUniqueConstraintsSection } from './_components/ModelUniqueConstraintsSection';
 
 registerEntityTypeUrl(modelEntityType, `/data/models/edit/{uid}`);
 registerEntityTypeUrl(
diff --git a/packages/project-builder-web/src/pages/data/models/edit/service/service.page.tsx b/packages/project-builder-web/src/pages/data/models/edit/[id]/service.page.tsx
similarity index 87%
rename from packages/project-builder-web/src/pages/data/models/edit/service/service.page.tsx
rename to packages/project-builder-web/src/pages/data/models/edit/[id]/service.page.tsx
index b03fa9819..6a35cbd7d 100644
--- a/packages/project-builder-web/src/pages/data/models/edit/service/service.page.tsx
+++ b/packages/project-builder-web/src/pages/data/models/edit/[id]/service.page.tsx
@@ -10,10 +10,10 @@ import { SectionList, SwitchField } from '@halfdomelabs/ui-components';
 import FormActionBar from '@src/components/FormActionBar';
 import { registerEntityTypeUrl } from '@src/services/entity-type';
 
-import { EditedModelContextProvider } from '../../hooks/useEditedModelConfig';
-import { useModelForm } from '../../hooks/useModelForm';
-import { ServiceMethodFieldsSection } from './ServiceMethodFieldsSection';
-import { ServiceTransformersSection } from './ServiceTransformersSection';
+import { EditedModelContextProvider } from '../../_hooks/useEditedModelConfig';
+import { useModelForm } from '../../_hooks/useModelForm';
+import { ServiceMethodFieldsSection } from './_components/service/ServiceMethodFieldsSection';
+import { ServiceTransformersSection } from './_components/service/ServiceTransformersSection';
 
 registerEntityTypeUrl(
   modelTransformerEntityType,
diff --git a/packages/project-builder-web/src/pages/data/models/edit/_routes.tsx b/packages/project-builder-web/src/pages/data/models/edit/_routes.tsx
deleted file mode 100644
index ca5dd0646..000000000
--- a/packages/project-builder-web/src/pages/data/models/edit/_routes.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { RouteObject } from 'react-router-dom';
-
-import { modelEntityType } from '@halfdomelabs/project-builder-lib';
-
-import { NotFoundRoute } from '@src/pages/NotFound.page';
-import { createCrumbFromUid, createRouteCrumb } from '@src/types/routes';
-
-import ModelEditModelPage from './model/model.page';
-import { ModelEditLayout } from './ModelEditLayout';
-import ModelEditSchemaPage from './schema/schema.page';
-import ModelEditServicePage from './service/service.page';
-
-export const ModelEditRoutes: RouteObject = {
-  path: 'edit/:uid/*',
-  element: <ModelEditLayout />,
-  handle: {
-    crumb: createCrumbFromUid(
-      modelEntityType,
-      'Edit Model',
-      '/data/models/edit/:uid',
-    ),
-  },
-  children: [
-    { index: true, element: <ModelEditModelPage /> },
-    {
-      path: 'service',
-      element: <ModelEditServicePage />,
-      handle: {
-        crumb: createRouteCrumb('Service'),
-      },
-    },
-    {
-      path: 'graphql',
-      element: <ModelEditSchemaPage />,
-      handle: {
-        crumb: createRouteCrumb('GraphQL'),
-      },
-    },
-    NotFoundRoute,
-  ],
-};
diff --git a/packages/project-builder-web/src/pages/data/models/ModelList.page.tsx b/packages/project-builder-web/src/pages/data/models/index.page.tsx
similarity index 88%
rename from packages/project-builder-web/src/pages/data/models/ModelList.page.tsx
rename to packages/project-builder-web/src/pages/data/models/index.page.tsx
index 6201ea672..86b7fa161 100644
--- a/packages/project-builder-web/src/pages/data/models/ModelList.page.tsx
+++ b/packages/project-builder-web/src/pages/data/models/index.page.tsx
@@ -4,9 +4,9 @@ import { useProjectDefinition } from '@halfdomelabs/project-builder-lib/web';
 import { Button, EmptyDisplay } from '@halfdomelabs/ui-components';
 import { HiDatabase } from 'react-icons/hi';
 
-import { NewModelDialog } from './NewModelDialog';
+import { NewModelDialog } from './_components/NewModelDialog';
 
-function ModelListPage(): React.JSX.Element {
+function ModelsIndexPage(): React.JSX.Element {
   const { definition } = useProjectDefinition();
 
   if (definition.models.length === 0) {
@@ -44,4 +44,4 @@ function ModelListPage(): React.JSX.Element {
   );
 }
 
-export default ModelListPage;
+export default ModelsIndexPage;
diff --git a/packages/ui-components/src/components/InputField/InputField.tsx b/packages/ui-components/src/components/InputField/InputField.tsx
index 26cbc4976..f0f10aa2e 100644
--- a/packages/ui-components/src/components/InputField/InputField.tsx
+++ b/packages/ui-components/src/components/InputField/InputField.tsx
@@ -13,6 +13,7 @@ import { get, useFormState } from 'react-hook-form';
 
 import type { FieldProps } from '@src/types/form';
 
+import { cn } from '@src/utils';
 import { genericForwardRef } from '@src/utils/generic-forward-ref.js';
 
 import { FormItem } from '../FormItem/FormItem';
@@ -27,11 +28,28 @@ export interface InputFieldProps
   onChange?: (value: string) => void;
   value?: string;
   register?: UseFormRegisterReturn;
+  inputClassName?: string;
 }
 
 const InputFieldRoot = React.forwardRef<HTMLDivElement, InputFieldProps>(
-  ({ label, description, error, onChange, register, ...props }, ref) => (
-    <FormItem ref={ref} error={error} className="flex flex-col gap-1.5">
+  (
+    {
+      label,
+      description,
+      error,
+      onChange,
+      register,
+      className,
+      inputClassName,
+      ...props
+    },
+    ref,
+  ) => (
+    <FormItem
+      ref={ref}
+      error={error}
+      className={cn('flex flex-col gap-1.5', className)}
+    >
       {label && <FormItem.Label>{label}</FormItem.Label>}
       <FormItem.Control>
         <Input
@@ -41,6 +59,7 @@ const InputFieldRoot = React.forwardRef<HTMLDivElement, InputFieldProps>(
               onChange(e.target.value);
             })
           }
+          className={inputClassName}
           {...props}
           {...register}
         />