diff --git a/dev/icons/ArrowAutofitHeight.tsx b/dev/icons/ArrowAutofitHeight.tsx
index 4ec2a8b..8899267 100644
--- a/dev/icons/ArrowAutofitHeight.tsx
+++ b/dev/icons/ArrowAutofitHeight.tsx
@@ -1,8 +1,8 @@
 export const ArrowAutofitHeightIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<path
@@ -10,7 +10,7 @@ export const ArrowAutofitHeightIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 			d="M12 20H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6m6 10v7m0-18v7m-3 8l3 3l3-3M15 6l3-3l3 3"
 		></path>
 	</svg>
diff --git a/dev/icons/ArrowAutofitWidth.tsx b/dev/icons/ArrowAutofitWidth.tsx
index a8f9b22..ace0ce7 100644
--- a/dev/icons/ArrowAutofitWidth.tsx
+++ b/dev/icons/ArrowAutofitWidth.tsx
@@ -1,8 +1,8 @@
 export const ArrowAutofitWidthIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<path
@@ -10,7 +10,7 @@ export const ArrowAutofitWidthIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 			d="M4 12V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v6m-10 6H3m18 0h-7m-8-3l-3 3l3 3m12-6l3 3l-3 3"
 		></path>
 	</svg>
diff --git a/dev/icons/ArrowNarrowDown.tsx b/dev/icons/ArrowNarrowDown.tsx
index 06cf356..ae39dd9 100644
--- a/dev/icons/ArrowNarrowDown.tsx
+++ b/dev/icons/ArrowNarrowDown.tsx
@@ -1,8 +1,8 @@
 export const ArrowNarrowDownIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<path
@@ -10,7 +10,7 @@ export const ArrowNarrowDownIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 			d="M12 5v14m4-4l-4 4m-4-4l4 4"
 		/>
 	</svg>
diff --git a/dev/icons/ArrowNarrowUp.tsx b/dev/icons/ArrowNarrowUp.tsx
index ed8239d..cfa91f0 100644
--- a/dev/icons/ArrowNarrowUp.tsx
+++ b/dev/icons/ArrowNarrowUp.tsx
@@ -1,8 +1,8 @@
 export const ArrowNarrowUpIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<path
@@ -10,7 +10,7 @@ export const ArrowNarrowUpIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 			d="M12 5v14m4-10l-4-4M8 9l4-4"
 		/>
 	</svg>
diff --git a/dev/icons/ArrowsSort.tsx b/dev/icons/ArrowsSort.tsx
index 937341c..dce0a32 100644
--- a/dev/icons/ArrowsSort.tsx
+++ b/dev/icons/ArrowsSort.tsx
@@ -1,8 +1,8 @@
 export const ArrowsSortIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<path
@@ -10,7 +10,7 @@ export const ArrowsSortIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 			d="m3 9l4-4l4 4M7 5v14m14-4l-4 4l-4-4m4 4V5"
 		/>
 	</svg>
diff --git a/dev/icons/ChevronDown.tsx b/dev/icons/ChevronDown.tsx
index fa13551..5c8c777 100644
--- a/dev/icons/ChevronDown.tsx
+++ b/dev/icons/ChevronDown.tsx
@@ -1,8 +1,8 @@
 export const ChevronDownIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<path
@@ -10,7 +10,7 @@ export const ChevronDownIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 			d="m6 9l6 6l6-6"
 		/>
 	</svg>
diff --git a/dev/icons/File.tsx b/dev/icons/File.tsx
index 294418f..ed48591 100644
--- a/dev/icons/File.tsx
+++ b/dev/icons/File.tsx
@@ -1,8 +1,8 @@
 export const FileIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<g
@@ -10,7 +10,7 @@ export const FileIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 		>
 			<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
 			<path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2"></path>
diff --git a/dev/icons/FileDelta.tsx b/dev/icons/FileDelta.tsx
index 5465fc5..b008a6c 100644
--- a/dev/icons/FileDelta.tsx
+++ b/dev/icons/FileDelta.tsx
@@ -1,8 +1,8 @@
 export const FileDeltaIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<g
@@ -10,7 +10,7 @@ export const FileDeltaIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 		>
 			<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
 			<path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2"></path>
diff --git a/dev/icons/FileMusic.tsx b/dev/icons/FileMusic.tsx
index 05c5f84..99563ec 100644
--- a/dev/icons/FileMusic.tsx
+++ b/dev/icons/FileMusic.tsx
@@ -1,8 +1,8 @@
 export const FileMusicIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<g
@@ -10,7 +10,7 @@ export const FileMusicIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 		>
 			<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
 			<path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2"></path>
diff --git a/dev/icons/FilePencil.tsx b/dev/icons/FilePencil.tsx
index 8a64a55..f445be1 100644
--- a/dev/icons/FilePencil.tsx
+++ b/dev/icons/FilePencil.tsx
@@ -1,8 +1,8 @@
 export const FilePencilIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<g
@@ -10,7 +10,7 @@ export const FilePencilIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 		>
 			<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
 			<path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2"></path>
diff --git a/dev/icons/FileUnknown.tsx b/dev/icons/FileUnknown.tsx
index 3d66755..cc1e341 100644
--- a/dev/icons/FileUnknown.tsx
+++ b/dev/icons/FileUnknown.tsx
@@ -1,8 +1,8 @@
 export const FileUnknownIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<g
@@ -10,7 +10,7 @@ export const FileUnknownIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 		>
 			<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
 			<path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2m-5-4v.01"></path>
diff --git a/dev/icons/FloppyDisc.tsx b/dev/icons/FloppyDisc.tsx
index d33b8f0..8cb5da0 100644
--- a/dev/icons/FloppyDisc.tsx
+++ b/dev/icons/FloppyDisc.tsx
@@ -1,8 +1,8 @@
 export const FloppyDiscIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<g
@@ -10,7 +10,7 @@ export const FloppyDiscIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 		>
 			<path d="M6 4h10l4 4v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2"></path>
 			<path d="M10 14a2 2 0 1 0 4 0a2 2 0 1 0-4 0m4-10v4H8V4"></path>
diff --git a/dev/icons/Folder.tsx b/dev/icons/Folder.tsx
index 434fd75..139fc7f 100644
--- a/dev/icons/Folder.tsx
+++ b/dev/icons/Folder.tsx
@@ -1,8 +1,8 @@
 export const FolderIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<path
@@ -10,7 +10,7 @@ export const FolderIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 			d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2"
 		></path>
 	</svg>
diff --git a/dev/icons/FolderOpen.tsx b/dev/icons/FolderOpen.tsx
index 1268832..19559e9 100644
--- a/dev/icons/FolderOpen.tsx
+++ b/dev/icons/FolderOpen.tsx
@@ -1,8 +1,8 @@
 export const FolderOpenIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<path
@@ -10,7 +10,7 @@ export const FolderOpenIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 			d="m5 19l2.757-7.351A1 1 0 0 1 8.693 11H21a1 1 0 0 1 .986 1.164l-.996 5.211A2 2 0 0 1 19.026 19za2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h4l3 3h7a2 2 0 0 1 2 2v2"
 		></path>
 	</svg>
diff --git a/dev/icons/Lasso.tsx b/dev/icons/Lasso.tsx
index 3ca1acc..bfef376 100644
--- a/dev/icons/Lasso.tsx
+++ b/dev/icons/Lasso.tsx
@@ -1,8 +1,8 @@
 export const LassoIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<g
@@ -10,7 +10,7 @@ export const LassoIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 		>
 			<path d="M4.028 13.252C3.371 12.28 3 11.174 3 10c0-3.866 4.03-7 9-7s9 3.134 9 7s-4.03 7-9 7c-1.913 0-3.686-.464-5.144-1.255"></path>
 			<path d="M3 15a2 2 0 1 0 4 0a2 2 0 1 0-4 0"></path>
diff --git a/dev/icons/LassoPolygon.tsx b/dev/icons/LassoPolygon.tsx
index 816448b..4b25e14 100644
--- a/dev/icons/LassoPolygon.tsx
+++ b/dev/icons/LassoPolygon.tsx
@@ -1,8 +1,8 @@
 export const LassoPolygonIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<g
@@ -10,7 +10,7 @@ export const LassoPolygonIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 		>
 			<path d="M4.028 13.252L3 10l2-7l7 5l8-3l1 9l-9 3l-5.144-1.255"></path>
 			<path d="M3 15a2 2 0 1 0 4 0a2 2 0 1 0-4 0"></path>
diff --git a/dev/icons/LayoutGrid.tsx b/dev/icons/LayoutGrid.tsx
index 85ac2d8..bdf1ba4 100644
--- a/dev/icons/LayoutGrid.tsx
+++ b/dev/icons/LayoutGrid.tsx
@@ -1,8 +1,8 @@
 export const LayoutGridIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<path
@@ -10,7 +10,7 @@ export const LayoutGridIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 			d="M4 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm10 0a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1zM4 15a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm10 0a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z"
 		></path>
 	</svg>
diff --git a/dev/icons/LetterX.tsx b/dev/icons/LetterX.tsx
new file mode 100644
index 0000000..c82ffa6
--- /dev/null
+++ b/dev/icons/LetterX.tsx
@@ -0,0 +1,17 @@
+export const LetterXIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+	>
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			d="m7 4l10 16m0-16L7 20"
+		/>
+	</svg>
+);
diff --git a/dev/icons/LetterY.tsx b/dev/icons/LetterY.tsx
new file mode 100644
index 0000000..f22bc17
--- /dev/null
+++ b/dev/icons/LetterY.tsx
@@ -0,0 +1,17 @@
+export const LetterYIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+	>
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			d="m7 4l5 9l5-9m-5 9v7"
+		/>
+	</svg>
+);
diff --git a/dev/icons/Pencil.tsx b/dev/icons/Pencil.tsx
index d13e69a..1d6e7af 100644
--- a/dev/icons/Pencil.tsx
+++ b/dev/icons/Pencil.tsx
@@ -1,8 +1,8 @@
 export const PencilIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<path
@@ -10,7 +10,7 @@ export const PencilIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 			d="M4 20h4L18.5 9.5a2.828 2.828 0 1 0-4-4L4 16zm9.5-13.5l4 4"
 		></path>
 	</svg>
diff --git a/dev/icons/Polygon.tsx b/dev/icons/Polygon.tsx
index 9f52e63..f2f1a0e 100644
--- a/dev/icons/Polygon.tsx
+++ b/dev/icons/Polygon.tsx
@@ -1,8 +1,8 @@
 export const PolygonIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<path
@@ -10,7 +10,7 @@ export const PolygonIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 			d="M10 5a2 2 0 1 0 4 0a2 2 0 1 0-4 0m7 3a2 2 0 1 0 4 0a2 2 0 1 0-4 0M3 11a2 2 0 1 0 4 0a2 2 0 1 0-4 0m10 8a2 2 0 1 0 4 0a2 2 0 1 0-4 0M6.5 9.5l3.5-3m4-1L17 7m1.5 3L16 17m-2.5.5l-7-5"
 		></path>
 	</svg>
diff --git a/dev/icons/Refresh.tsx b/dev/icons/Refresh.tsx
index 6a4e979..da0e618 100644
--- a/dev/icons/Refresh.tsx
+++ b/dev/icons/Refresh.tsx
@@ -1,8 +1,8 @@
 export const RefreshIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<path
@@ -10,7 +10,7 @@ export const RefreshIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 			d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"
 		></path>
 	</svg>
diff --git a/dev/icons/RefreshAlert.tsx b/dev/icons/RefreshAlert.tsx
index 54a8b8d..2371e47 100644
--- a/dev/icons/RefreshAlert.tsx
+++ b/dev/icons/RefreshAlert.tsx
@@ -1,8 +1,8 @@
 export const RefreshAlertIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<path
@@ -10,7 +10,7 @@ export const RefreshAlertIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 			d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4m-4-6v3m0 3h.01"
 		></path>
 	</svg>
diff --git a/dev/icons/RefreshDot.tsx b/dev/icons/RefreshDot.tsx
index 19c6067..aa29d71 100644
--- a/dev/icons/RefreshDot.tsx
+++ b/dev/icons/RefreshDot.tsx
@@ -1,8 +1,8 @@
 export const RefreshDotIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<path
@@ -10,7 +10,7 @@ export const RefreshDotIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 			d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4m-5-3a1 1 0 1 0 2 0a1 1 0 1 0-2 0"
 		></path>
 	</svg>
diff --git a/dev/icons/Reload.tsx b/dev/icons/Reload.tsx
index 361782a..46e6d7c 100644
--- a/dev/icons/Reload.tsx
+++ b/dev/icons/Reload.tsx
@@ -1,8 +1,8 @@
 export const ReloadIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<g
@@ -10,7 +10,7 @@ export const ReloadIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 		>
 			<path d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
 			<path d="M20 4v5h-5" />
diff --git a/dev/icons/Script.tsx b/dev/icons/Script.tsx
index a6f5b3f..18e46e8 100644
--- a/dev/icons/Script.tsx
+++ b/dev/icons/Script.tsx
@@ -1,8 +1,8 @@
 export const ScriptIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<path
@@ -10,7 +10,7 @@ export const ScriptIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 			d="M17 20H6a3 3 0 0 1 0-6h11a3 3 0 0 0 0 6h1a3 3 0 0 0 3-3V6a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v8"
 		></path>
 	</svg>
diff --git a/dev/icons/StackBackward.tsx b/dev/icons/StackBackward.tsx
index b14e098..f33c0d2 100644
--- a/dev/icons/StackBackward.tsx
+++ b/dev/icons/StackBackward.tsx
@@ -1,8 +1,8 @@
 export const StackBackwardIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<g
@@ -10,7 +10,7 @@ export const StackBackwardIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 		>
 			<path d="m14 12l6-3l-8-4l-8 4l6 3"></path>
 			<path fill="currentColor" d="m10 12l-6 3l8 4l8-4l-6-3l-2 1z"></path>
diff --git a/dev/icons/StackForward.tsx b/dev/icons/StackForward.tsx
index 69ddffb..8d009db 100644
--- a/dev/icons/StackForward.tsx
+++ b/dev/icons/StackForward.tsx
@@ -1,8 +1,8 @@
 export const StackForwardIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<g
@@ -10,7 +10,7 @@ export const StackForwardIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 		>
 			<path fill="currentColor" d="M12 5L4 9l8 4l8-4z"></path>
 			<path d="m10 12l-6 3l8 4l8-4l-6-3"></path>
diff --git a/dev/icons/TransformPoint.tsx b/dev/icons/TransformPoint.tsx
index ae56ad1..7329281 100644
--- a/dev/icons/TransformPoint.tsx
+++ b/dev/icons/TransformPoint.tsx
@@ -1,8 +1,8 @@
 export const TransformPointIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<path
@@ -10,7 +10,7 @@ export const TransformPointIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 			d="M3 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm0 14a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zM17 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zm0 14a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zM11 5h2m-8 6v2m14-2v2m-8 6h2"
 		></path>
 	</svg>
diff --git a/dev/icons/ZoomScan.tsx b/dev/icons/ZoomScan.tsx
index f514b3b..e24e710 100644
--- a/dev/icons/ZoomScan.tsx
+++ b/dev/icons/ZoomScan.tsx
@@ -1,8 +1,8 @@
 export const ZoomScanIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
+		width="24"
+		height="24"
 		viewBox="0 0 24 24"
 	>
 		<path
@@ -10,7 +10,7 @@ export const ZoomScanIcon = () => (
 			stroke="currentColor"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={2}
+			stroke-width="2"
 			d="M4 8V6a2 2 0 0 1 2-2h2M4 16v2a2 2 0 0 0 2 2h2m8-16h2a2 2 0 0 1 2 2v2m-4 12h2a2 2 0 0 0 2-2v-2M8 11a3 3 0 1 0 6 0a3 3 0 0 0-6 0m8 5l-2.5-2.5"
 		></path>
 	</svg>
diff --git a/dev/main.css b/dev/main.css
index c98402d..6fec878 100644
--- a/dev/main.css
+++ b/dev/main.css
@@ -138,3 +138,9 @@
 		flex-basis: calc(50% - var(--sp-1));
 	}
 }
+
+.entity-props {
+	display: grid;
+	gap: var(--sp-2);
+	grid-template-columns: 1fr 1fr;
+}
diff --git a/dev/main.tsx b/dev/main.tsx
index 3ab417e..b0e00a1 100644
--- a/dev/main.tsx
+++ b/dev/main.tsx
@@ -1,5 +1,11 @@
 import "./main.css";
-import { type Component, createEffect, createSignal, onMount } from "solid-js";
+import {
+	type Component,
+	createEffect,
+	createSignal,
+	onMount,
+	Show,
+} from "solid-js";
 import { render } from "solid-js/web";
 import { InputField } from "#/dev/controls/InputField.tsx";
 import { RangeSlider } from "#/dev/controls/RangeSlider.tsx";
@@ -7,7 +13,10 @@ import { ItemList, type ItemsRef } from "#/dev/ItemList.tsx";
 import { ArrowAutofitHeightIcon } from "#/dev/icons/ArrowAutofitHeight.tsx";
 import { ArrowAutofitWidthIcon } from "#/dev/icons/ArrowAutofitWidth.tsx";
 import { FileIcon } from "#/dev/icons/File.tsx";
+import { LetterXIcon } from "#/dev/icons/LetterX.tsx";
+import { LetterYIcon } from "#/dev/icons/LetterY.tsx";
 import { ZoomScanIcon } from "#/dev/icons/ZoomScan.tsx";
+import type { Entity } from "#/engine/Entity.ts";
 import {
 	currentScene,
 	type SceneData,
@@ -65,6 +74,9 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 	const [entities, setEntities] = createSignal(
 		mapSceneEntities(currentScene.data),
 	);
+	const [activeEntity, setActiveEntity] = createSignal<null | Entity<unknown>>(
+		null,
+	);
 
 	createEffect(() => {
 		setScale(currentScale());
@@ -80,7 +92,7 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 		setEntities(mapSceneEntities(data));
 	});
 
-	const setActiveEntity = (items: ItemsRef): void => {
+	const selectEntity = (items: ItemsRef): void => {
 		const activeRef = items.find((ref) => ref.item.isActive)!;
 		const instances = currentScene.entityInstanceMap.get(
 			activeRef.item.label,
@@ -92,6 +104,8 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 		const instance =
 			instances[entityRefs.findIndex((ref) => ref.item.isActive)];
 
+		setActiveEntity(instance);
+
 		const processProxy = sceneProcessMap.get(currentScene.data.name)!;
 		const ctx = viewport.ctx;
 		currentScene.process = (...args) => {
@@ -169,7 +183,30 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 				<ItemList name="Scenes" handler={setCurrentScene} items={scenes} />
 				<GraphBrowser graph={sceneGraph} />
 
-				<ItemList name="Entities" handler={setActiveEntity} items={entities} />
+				<ItemList name="Entities" handler={selectEntity} items={entities} />
+
+				<Show when={activeEntity() !== null}>
+					<div class="entity-props">
+						<InputField
+							type="number"
+							name="x"
+							value={String(activeEntity()!.position.x)}
+							icon={LetterXIcon()}
+							onChange={(value) => {
+								activeEntity()!.position.x = parseInt(value);
+							}}
+						></InputField>
+						<InputField
+							type="number"
+							name="y"
+							value={String(activeEntity()!.position.y)}
+							icon={LetterYIcon()}
+							onChange={(value) => {
+								activeEntity()!.position.y = parseInt(value);
+							}}
+						></InputField>
+					</div>
+				</Show>
 			</div>
 			<div class="tool-bar-resize" onMouseDown={startResizing}></div>
 		</div>