diff --git a/client/web/src/components/panels/Document.vue b/client/web/src/components/panels/Document.vue
index f20b6e92..de71e6c4 100644
--- a/client/web/src/components/panels/Document.vue
+++ b/client/web/src/components/panels/Document.vue
@@ -136,7 +136,7 @@
 					<ShelfItem :icon="'VectorShapeTool'" title="Shape Tool (Y)" :active="activeTool === 'Shape'" @click="selectTool('Shape')" />
 				</div>
 				<div class="spacer"></div>
-				<WorkingColors />
+				<SwatchPair />
 			</LayoutCol>
 			<LayoutCol :class="'viewport'">
 				<div class="canvas" @mousedown="canvasMouseDown" @mouseup="canvasMouseUp" @mousemove="canvasMouseMove" ref="canvas">
@@ -196,10 +196,10 @@ import { makeModifiersBitfield } from "@/utilities/input";
 import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool, ExportDocument, SetCanvasZoom, SetCanvasRotation } from "@/utilities/response-handler";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
-import WorkingColors from "@/components/widgets/WorkingColors.vue";
+import SwatchPair from "@/components/widgets/inputs/SwatchPair.vue";
 import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
-import ShelfItem from "@/components/widgets/ShelfItem.vue";
-import Separator, { SeparatorDirection, SeparatorType } from "@/components/widgets/Separator.vue";
+import ShelfItem from "@/components/widgets/inputs/ShelfItem.vue";
+import Separator, { SeparatorDirection, SeparatorType } from "@/components/widgets/separators/Separator.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
 import RadioInput from "@/components/widgets/inputs/RadioInput.vue";
@@ -331,7 +331,7 @@ export default defineComponent({
 	components: {
 		LayoutRow,
 		LayoutCol,
-		WorkingColors,
+		SwatchPair,
 		ShelfItem,
 		Separator,
 		IconButton,
diff --git a/client/web/src/components/panels/LayerTree.vue b/client/web/src/components/panels/LayerTree.vue
index 268bc123..8a52cbc3 100644
--- a/client/web/src/components/panels/LayerTree.vue
+++ b/client/web/src/components/panels/LayerTree.vue
@@ -107,7 +107,7 @@ import { defineComponent } from "vue";
 import { ResponseType, registerResponseHandler, Response, ExpandFolder, LayerPanelEntry } from "@/utilities/response-handler";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
-import Separator, { SeparatorType } from "@/components/widgets/Separator.vue";
+import Separator, { SeparatorType } from "@/components/widgets/separators/Separator.vue";
 import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
 import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
diff --git a/client/web/src/components/widgets/floating-menus/MenuList.vue b/client/web/src/components/widgets/floating-menus/MenuList.vue
index cd025835..2dd5cc23 100644
--- a/client/web/src/components/widgets/floating-menus/MenuList.vue
+++ b/client/web/src/components/widgets/floating-menus/MenuList.vue
@@ -124,7 +124,7 @@
 import { defineComponent, PropType } from "vue";
 import { keyboardLockApiSupported } from "@/utilities/fullscreen";
 import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
-import Separator, { SeparatorDirection, SeparatorType } from "@/components/widgets/Separator.vue";
+import Separator, { SeparatorDirection, SeparatorType } from "@/components/widgets/separators/Separator.vue";
 import Icon from "@/components/widgets/labels/Icon.vue";
 import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
 
diff --git a/client/web/src/components/widgets/ShelfItem.vue b/client/web/src/components/widgets/inputs/ShelfItem.vue
similarity index 100%
rename from client/web/src/components/widgets/ShelfItem.vue
rename to client/web/src/components/widgets/inputs/ShelfItem.vue
diff --git a/client/web/src/components/widgets/WorkingColors.vue b/client/web/src/components/widgets/inputs/SwatchPair.vue
similarity index 94%
rename from client/web/src/components/widgets/WorkingColors.vue
rename to client/web/src/components/widgets/inputs/SwatchPair.vue
index c066daff..dbdf739a 100644
--- a/client/web/src/components/widgets/WorkingColors.vue
+++ b/client/web/src/components/widgets/inputs/SwatchPair.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="working-colors">
+	<div class="swatch-pair">
 		<SwatchPairInput />
 		<div class="swap-and-reset">
 			<IconButton @click="swapColors" :icon="'Swap'" title="Swap (Shift+X)" :size="16" />
@@ -9,7 +9,7 @@
 </template>
 
 <style lang="scss">
-.working-colors {
+.swatch-pair {
 	.swap-and-reset {
 		font-size: 0;
 	}
diff --git a/client/web/src/components/widgets/Separator.vue b/client/web/src/components/widgets/separators/Separator.vue
similarity index 100%
rename from client/web/src/components/widgets/Separator.vue
rename to client/web/src/components/widgets/separators/Separator.vue
diff --git a/client/web/src/components/window/status-bar/StatusBar.vue b/client/web/src/components/window/status-bar/StatusBar.vue
index 2221b65a..9c36b6bf 100644
--- a/client/web/src/components/window/status-bar/StatusBar.vue
+++ b/client/web/src/components/window/status-bar/StatusBar.vue
@@ -56,7 +56,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
-import Separator, { SeparatorType } from "@/components/widgets/Separator.vue";
+import Separator, { SeparatorType } from "@/components/widgets/separators/Separator.vue";
 
 export default defineComponent({
 	components: {