diff --git a/src/pages/Device.tsx b/src/pages/Device.tsx
index a855b31..03013fb 100644
--- a/src/pages/Device.tsx
+++ b/src/pages/Device.tsx
@@ -34,7 +34,8 @@ export default function DevicePage() {
   const [availablePositions, setAvailablePositions] = useState<DeviceAvailabilityMap>(new Map());
   const [availableOffsets, setAvailableOffsets] = useState<OffsetAvailabilityMap>(new Map());
 
-  const [components, setComponents] = useState<Map<string, Component>>(new Map());
+  // const [components, setComponents] = useState<Map<string, Component>>(new Map());
+  const [components, setComponents] = useState<Component[]>([]);
 
   const [addComponentManualDialogOpen, setAddComponentManualDialogOpen] = useState(false)
 
@@ -53,7 +54,6 @@ export default function DevicePage() {
     setLoading(true)
     deviceAPI.getPageData(deviceID, getContextKeys(), getContextTypes()).then(resp => {
       setDevice(Device.any(resp.data.device))
-      
       let newPermissions: pond.Permission[] = []
       resp.data.permissions.forEach(perm => {
         if (typeof(perm) === "string" ) {
@@ -67,6 +67,12 @@ export default function DevicePage() {
       let u = User.any(resp.data.user);
       setPreferences(u.preferences)
       setTags(resp.data.tags)
+      let newComps: Component[] = []
+      resp.data.components.forEach(comp => {
+        newComps.push(Component.create(comp))
+      })
+      console.log(resp.data.components)
+      setComponents(newComps)
     }).catch(err => {
       setDevice(Device.create());
       // setComponents(new Map());
@@ -153,7 +159,8 @@ export default function DevicePage() {
       <DeviceOverview
         device={device}
         // components={[...components.values()]}
-        components={[]}
+        // components={[]}
+        components={components}
         usage={getUsage()}
         loading={loading}
         tags={tags}