diff --git a/gui/src/components/OnnxWeb.tsx b/gui/src/components/OnnxWeb.tsx
index 9b49e072..f3b1ec64 100644
--- a/gui/src/components/OnnxWeb.tsx
+++ b/gui/src/components/OnnxWeb.tsx
@@ -3,12 +3,12 @@ import { Box, Container, Divider, Link, Tab, Typography } from '@mui/material';
 import * as React from 'react';
 
 import { ImageHistory } from './ImageHistory.js';
-import { Img2Img } from './Img2Img.js';
-import { Inpaint } from './Inpaint.js';
-import { ModelControl } from './ModelControl.js';
-import { Settings } from './Settings.js';
-import { Txt2Img } from './Txt2Img.js';
-import { Upscale } from './Upscale.js';
+import { Img2Img } from './tab/Img2Img.js';
+import { Inpaint } from './tab/Inpaint.js';
+import { ModelControl } from './control/ModelControl.js';
+import { Settings } from './tab/Settings.js';
+import { Txt2Img } from './tab/Txt2Img.js';
+import { Upscale } from './tab/Upscale.js';
 
 const { useState } = React;
 
diff --git a/gui/src/components/ImageControl.tsx b/gui/src/components/control/ImageControl.tsx
similarity index 92%
rename from gui/src/components/ImageControl.tsx
rename to gui/src/components/control/ImageControl.tsx
index 9c663993..6a3f0b5d 100644
--- a/gui/src/components/ImageControl.tsx
+++ b/gui/src/components/control/ImageControl.tsx
@@ -5,12 +5,12 @@ import * as React from 'react';
 import { useQuery } from 'react-query';
 import { useStore } from 'zustand';
 
-import { BaseImgParams } from '../client.js';
-import { STALE_TIME } from '../config.js';
-import { ClientContext, ConfigContext, OnnxState, StateContext } from '../state.js';
-import { SCHEDULER_LABELS } from '../strings.js';
-import { NumericField } from './NumericField.js';
-import { QueryList } from './QueryList.js';
+import { BaseImgParams } from '../../client.js';
+import { STALE_TIME } from '../../config.js';
+import { ClientContext, ConfigContext, OnnxState, StateContext } from '../../state.js';
+import { SCHEDULER_LABELS } from '../../strings.js';
+import { NumericField } from '../input/NumericField.js';
+import { QueryList } from '../input/QueryList.js';
 
 const { useContext } = React;
 
diff --git a/gui/src/components/ModelControl.tsx b/gui/src/components/control/ModelControl.tsx
similarity index 90%
rename from gui/src/components/ModelControl.tsx
rename to gui/src/components/control/ModelControl.tsx
index ae43c0bb..de4dbd3c 100644
--- a/gui/src/components/ModelControl.tsx
+++ b/gui/src/components/control/ModelControl.tsx
@@ -5,10 +5,10 @@ import { useContext } from 'react';
 import { useQuery } from 'react-query';
 import { useStore } from 'zustand';
 
-import { STALE_TIME } from '../config.js';
-import { ClientContext, StateContext } from '../state.js';
-import { MODEL_LABELS, PLATFORM_LABELS } from '../strings.js';
-import { QueryList } from './QueryList.js';
+import { STALE_TIME } from '../../config.js';
+import { ClientContext, StateContext } from '../../state.js';
+import { MODEL_LABELS, PLATFORM_LABELS } from '../../strings.js';
+import { QueryList } from '../input/QueryList.js';
 
 export function ModelControl() {
   const client = mustExist(useContext(ClientContext));
diff --git a/gui/src/components/OutpaintControl.tsx b/gui/src/components/control/OutpaintControl.tsx
similarity index 94%
rename from gui/src/components/OutpaintControl.tsx
rename to gui/src/components/control/OutpaintControl.tsx
index 5d0e026b..19728a86 100644
--- a/gui/src/components/OutpaintControl.tsx
+++ b/gui/src/components/control/OutpaintControl.tsx
@@ -5,8 +5,8 @@ import * as React from 'react';
 import { useContext } from 'react';
 import { useStore } from 'zustand';
 
-import { ConfigContext, StateContext } from '../state.js';
-import { NumericField } from './NumericField.js';
+import { ConfigContext, StateContext } from '../../state.js';
+import { NumericField } from '../input/NumericField.js';
 
 export function OutpaintControl() {
   const { params } = mustExist(useContext(ConfigContext));
diff --git a/gui/src/components/UpscaleControl.tsx b/gui/src/components/control/UpscaleControl.tsx
similarity index 95%
rename from gui/src/components/UpscaleControl.tsx
rename to gui/src/components/control/UpscaleControl.tsx
index 2b6af7a0..7687d34d 100644
--- a/gui/src/components/UpscaleControl.tsx
+++ b/gui/src/components/control/UpscaleControl.tsx
@@ -5,8 +5,8 @@ import * as React from 'react';
 import { useContext } from 'react';
 import { useStore } from 'zustand';
 
-import { ConfigContext, StateContext } from '../state.js';
-import { NumericField } from './NumericField.js';
+import { ConfigContext, StateContext } from '../../state.js';
+import { NumericField } from '../input/NumericField.js';
 
 export function UpscaleControl() {
   const { params } = mustExist(useContext(ConfigContext));
diff --git a/gui/src/components/ImageInput.tsx b/gui/src/components/input/ImageInput.tsx
similarity index 100%
rename from gui/src/components/ImageInput.tsx
rename to gui/src/components/input/ImageInput.tsx
diff --git a/gui/src/components/MaskCanvas.tsx b/gui/src/components/input/MaskCanvas.tsx
similarity index 98%
rename from gui/src/components/MaskCanvas.tsx
rename to gui/src/components/input/MaskCanvas.tsx
index ec2dced6..4bd5489c 100644
--- a/gui/src/components/MaskCanvas.tsx
+++ b/gui/src/components/input/MaskCanvas.tsx
@@ -5,8 +5,8 @@ import { throttle } from 'lodash';
 import React, { RefObject, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useStore } from 'zustand';
 
-import { SAVE_TIME } from '../config.js';
-import { ConfigContext, StateContext } from '../state.js';
+import { SAVE_TIME } from '../../config.js';
+import { ConfigContext, StateContext } from '../../state.js';
 import { NumericField } from './NumericField';
 
 export const FULL_CIRCLE = 2 * Math.PI;
diff --git a/gui/src/components/NumericField.tsx b/gui/src/components/input/NumericField.tsx
similarity index 100%
rename from gui/src/components/NumericField.tsx
rename to gui/src/components/input/NumericField.tsx
diff --git a/gui/src/components/QueryList.tsx b/gui/src/components/input/QueryList.tsx
similarity index 100%
rename from gui/src/components/QueryList.tsx
rename to gui/src/components/input/QueryList.tsx
diff --git a/gui/src/components/Img2Img.tsx b/gui/src/components/tab/Img2Img.tsx
similarity index 84%
rename from gui/src/components/Img2Img.tsx
rename to gui/src/components/tab/Img2Img.tsx
index 378de3fe..b989dac7 100644
--- a/gui/src/components/Img2Img.tsx
+++ b/gui/src/components/tab/Img2Img.tsx
@@ -4,12 +4,12 @@ import * as React from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { useStore } from 'zustand';
 
-import { IMAGE_FILTER } from '../config.js';
-import { ClientContext, ConfigContext, StateContext } from '../state.js';
-import { ImageControl } from './ImageControl.js';
-import { ImageInput } from './ImageInput.js';
-import { NumericField } from './NumericField.js';
-import { UpscaleControl } from './UpscaleControl.js';
+import { IMAGE_FILTER } from '../../config.js';
+import { ClientContext, ConfigContext, StateContext } from '../../state.js';
+import { ImageControl } from '../control/ImageControl.js';
+import { ImageInput } from '../input/ImageInput.js';
+import { NumericField } from '../input/NumericField.js';
+import { UpscaleControl } from '../control/UpscaleControl.js';
 
 const { useContext } = React;
 
diff --git a/gui/src/components/Inpaint.tsx b/gui/src/components/tab/Inpaint.tsx
similarity index 87%
rename from gui/src/components/Inpaint.tsx
rename to gui/src/components/tab/Inpaint.tsx
index a82182e6..65054c64 100644
--- a/gui/src/components/Inpaint.tsx
+++ b/gui/src/components/tab/Inpaint.tsx
@@ -4,16 +4,16 @@ import * as React from 'react';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useStore } from 'zustand';
 
-import { IMAGE_FILTER, STALE_TIME } from '../config.js';
-import { ClientContext, ConfigContext, StateContext } from '../state.js';
-import { MASK_LABELS, NOISE_LABELS } from '../strings.js';
-import { ImageControl } from './ImageControl.js';
-import { ImageInput } from './ImageInput.js';
-import { MaskCanvas } from './MaskCanvas.js';
-import { NumericField } from './NumericField.js';
-import { OutpaintControl } from './OutpaintControl.js';
-import { QueryList } from './QueryList.js';
-import { UpscaleControl } from './UpscaleControl.js';
+import { IMAGE_FILTER, STALE_TIME } from '../../config.js';
+import { ClientContext, ConfigContext, StateContext } from '../../state.js';
+import { MASK_LABELS, NOISE_LABELS } from '../../strings.js';
+import { ImageControl } from '../control/ImageControl.js';
+import { ImageInput } from '../input/ImageInput.js';
+import { MaskCanvas } from '../input/MaskCanvas.js';
+import { NumericField } from '../input/NumericField.js';
+import { OutpaintControl } from '../control/OutpaintControl.js';
+import { QueryList } from '../input/QueryList.js';
+import { UpscaleControl } from '../control/UpscaleControl.js';
 
 const { useContext } = React;
 
diff --git a/gui/src/components/Settings.tsx b/gui/src/components/tab/Settings.tsx
similarity index 92%
rename from gui/src/components/Settings.tsx
rename to gui/src/components/tab/Settings.tsx
index 87f1c04d..73616765 100644
--- a/gui/src/components/Settings.tsx
+++ b/gui/src/components/tab/Settings.tsx
@@ -5,9 +5,9 @@ import * as React from 'react';
 import { useContext, useState } from 'react';
 import { useStore } from 'zustand';
 
-import { getApiRoot } from '../config.js';
-import { ConfigContext, StateContext } from '../state.js';
-import { NumericField } from './NumericField.js';
+import { getApiRoot } from '../../config.js';
+import { ConfigContext, StateContext } from '../../state.js';
+import { NumericField } from '../input/NumericField.js';
 
 export function Settings() {
   const config = mustExist(useContext(ConfigContext));
diff --git a/gui/src/components/Txt2Img.tsx b/gui/src/components/tab/Txt2Img.tsx
similarity index 88%
rename from gui/src/components/Txt2Img.tsx
rename to gui/src/components/tab/Txt2Img.tsx
index 588b2a59..9f9e565a 100644
--- a/gui/src/components/Txt2Img.tsx
+++ b/gui/src/components/tab/Txt2Img.tsx
@@ -4,10 +4,10 @@ import * as React from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { useStore } from 'zustand';
 
-import { ClientContext, ConfigContext, StateContext } from '../state.js';
-import { ImageControl } from './ImageControl.js';
-import { NumericField } from './NumericField.js';
-import { UpscaleControl } from './UpscaleControl.js';
+import { ClientContext, ConfigContext, StateContext } from '../../state.js';
+import { ImageControl } from '../control/ImageControl.js';
+import { NumericField } from '../input/NumericField.js';
+import { UpscaleControl } from '../control/UpscaleControl.js';
 
 const { useContext } = React;
 
diff --git a/gui/src/components/Upscale.tsx b/gui/src/components/tab/Upscale.tsx
similarity index 86%
rename from gui/src/components/Upscale.tsx
rename to gui/src/components/tab/Upscale.tsx
index a965dc8e..1447c357 100644
--- a/gui/src/components/Upscale.tsx
+++ b/gui/src/components/tab/Upscale.tsx
@@ -4,10 +4,10 @@ import * as React from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { useStore } from 'zustand';
 
-import { IMAGE_FILTER } from '../config.js';
-import { ClientContext, ConfigContext, StateContext } from '../state.js';
-import { ImageInput } from './ImageInput.js';
-import { UpscaleControl } from './UpscaleControl.js';
+import { IMAGE_FILTER } from '../../config.js';
+import { ClientContext, ConfigContext, StateContext } from '../../state.js';
+import { ImageInput } from '../input/ImageInput.js';
+import { UpscaleControl } from '../control/UpscaleControl.js';
 
 const { useContext } = React;