diff --git a/frontend/src/pages/devices/DeviceEditMobiFlight.tsx b/frontend/src/pages/devices/DeviceEditMobiFlight.tsx
new file mode 100644
index 00000000..06e30e29
--- /dev/null
+++ b/frontend/src/pages/devices/DeviceEditMobiFlight.tsx
@@ -0,0 +1,28 @@
+import DeviceIcon from "@/components/mobiflight/icons/DeviceIcon";
+import { DeviceElementType, IDeviceItem } from "@/types";
+import { IconTrash } from "@tabler/icons-react";
+
+export type MobiFlightDeviceEditPanelProps = {
+  device: IDeviceItem;
+};
+
+export const MobiFlightDeviceEditPanel = (
+  props: MobiFlightDeviceEditPanelProps
+) => {
+  const device = props.device;
+  return (
+    <div className="w-full flex flex-col p-4 overflow-y-auto gap-2">
+      {(device?.Elements ?? []).map((element) => {
+        return (
+          <div className="group flex flex-row gap-4 items-center hover:bg-slate-200 py-2 px-4 rounded-md cursor-pointer border-2 border-slate-200" key={element.Id}>
+            <DeviceIcon className="w-8 h-8" variant={element.Type as DeviceElementType}></DeviceIcon>
+            <div className="grow">{element.Name}</div>
+            <div className="group-hover:opacity-100 opacity-0"><IconTrash className="text-gray-400"></IconTrash></div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default MobiFlightDeviceEditPanel;
diff --git a/frontend/src/pages/devices/DeviceSelection.tsx b/frontend/src/pages/devices/DeviceSelection.tsx
new file mode 100644
index 00000000..e5d5e5d5
--- /dev/null
+++ b/frontend/src/pages/devices/DeviceSelection.tsx
@@ -0,0 +1,24 @@
+import DeviceIcon from "@/components/mobiflight/icons/DeviceIcon";
+import { DeviceElementTypes } from "@/types/deviceElements";
+
+const DeviceSelection = () => {
+  const availableDeviceTypes = DeviceElementTypes;
+
+  return (
+    <div className="flex flex-row flex-wrap gap-4">
+      {availableDeviceTypes.map((deviceType) => {
+        return (
+          <div
+            key={deviceType}
+            className="h-24 w-24 group flex flex-col gap-1 items-center justify-center hover:bg-slate-200 py-2 px-4 rounded-md cursor-pointer border-2 border-slate-200"
+          >
+            <DeviceIcon className="w-12 h-12" variant={deviceType}></DeviceIcon>
+            <div className="">{deviceType}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default DeviceSelection;