diff --git a/package-lock.json b/package-lock.json
index 18ff646..79d7bf6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7256,7 +7256,7 @@
     },
     "node_modules/protobuf-ts": {
       "version": "1.0.0",
-      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#86c8ea9c667b2d01c56e0af05f77c1326f8e08fa",
+      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#cf0774d8aab2663916bbb0b2c44f4bb3352487b5",
       "dependencies": {
         "protobufjs": "^6.8.8"
       }
diff --git a/src/device/DeviceOverview.tsx b/src/device/DeviceOverview.tsx
index bc29f9f..87c0c60 100644
--- a/src/device/DeviceOverview.tsx
+++ b/src/device/DeviceOverview.tsx
@@ -16,7 +16,7 @@ import { notNull, or } from "utils/types";
 // import { MatchParams } from "navigation/Routes";
 // import DeviceHologram from "./DeviceHologram";
 import { makeStyles } from "@mui/styles";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 const useStyles = makeStyles((_theme: Theme) => {
   return ({
@@ -39,13 +39,12 @@ interface Props {
   usage?: Usage;
   loading?: boolean;
   disableAddTag?: boolean;
-  tags: pond.Tag[];
   groupID?: number;
 }
 
 export default function DeviceOverview(props: Props) {
   const [{ user, firmware }] = useGlobalState();
-  const { device, components, groupID, usage, loading, disableAddTag, tags } = props;
+  const { device, components, groupID, usage, loading, disableAddTag } = props;
   const prevComponents = usePrevious(components);
   const { info } = useSnackbar();
   const classes = useStyles();
@@ -156,8 +155,8 @@ export default function DeviceOverview(props: Props) {
                 variant={modemComponent ? "filled" : "outlined"}
                 clickable={modemComponent !== null}
                 onClick={() => {
-                  console.log(modemComponent)
-                  console.log(modemComponent?.key())
+                  // console.log(modemComponent)
+                  // console.log(modemComponent?.key())
                   if (modemComponent && modemComponent.key()) {
                     navigate(pathToDevice() + "/components/" + modemComponent.key());
                   }
@@ -234,7 +233,7 @@ export default function DeviceOverview(props: Props) {
             <StatusChip status="pending" />
           </Grid>
         )}
-        {user.allowedTo("provision") && <DeviceTags tags={tags} device={device} disableAdd={disableAddTag} />}
+        {user.allowedTo("provision") && <DeviceTags device={device} disableAdd={disableAddTag} />}
       </Grid>
     );
   };
diff --git a/src/device/DeviceSettings.tsx b/src/device/DeviceSettings.tsx
index a2c5221..91f2577 100644
--- a/src/device/DeviceSettings.tsx
+++ b/src/device/DeviceSettings.tsx
@@ -17,7 +17,6 @@ import {
   Theme,
   Typography
 } from "@mui/material";
-// import { Theme } from "@material-ui/core/styles/createMuiTheme";
 import DeleteButton from "common/DeleteButton";
 import PeriodSelect from "common/time/PeriodSelect";
 import ResponsiveDialog from "common/ResponsiveDialog";
@@ -27,7 +26,6 @@ import { IsExtended, ListDeviceProductDescribers } from "products/DeviceProduct"
 import { pond } from "protobuf-ts/pond";
 import { useGlobalState } from "providers";
 import React, { useEffect, useState } from "react";
-// import { useHistory } from "react-router";
 import { quack } from "protobuf-ts/quack";
 import LinearMutationBuilder from "common/LinearMutationBuilder";
 import { makeStyles } from "@mui/styles";
diff --git a/src/device/DeviceTags.tsx b/src/device/DeviceTags.tsx
index 83b78a0..82981d1 100644
--- a/src/device/DeviceTags.tsx
+++ b/src/device/DeviceTags.tsx
@@ -19,7 +19,7 @@ import TagSettings from "common/TagSettings";
 import { Device, Tag } from "models";
 import { filterByTag } from "pbHelpers/Tag";
 import { useDeviceAPI, useSnackbar, useTagAPI } from "providers";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { pond } from "protobuf-ts/pond";
 
 const useStyles = makeStyles((_theme: Theme) => {
@@ -32,7 +32,7 @@ const useStyles = makeStyles((_theme: Theme) => {
 
 interface AddDeviceTagProps {
   device: Device;
-  deviceTags: string[];
+  deviceTags: pond.TagSettings[];
   addTagToDevice: (tag: Tag) => void;
 }
 
@@ -60,7 +60,7 @@ function AddDeviceTag(props: AddDeviceTagProps) {
   }, [])
 
   const tagItems = tags
-    .filter(tag => !deviceTags.some(key => key === tag.settings.key))
+    .filter(tag => !deviceTags.some(tagSettings => tagSettings.key === tag.settings.key))
     .filter(tag => filterByTag(searchValue, tag))
     .sort((a, b) => (a.name().toLowerCase() > b.name().toLowerCase() ? 1 : -1))
     .map((tag, index, array) => (
@@ -102,7 +102,10 @@ function AddDeviceTag(props: AddDeviceTagProps) {
           </List>
         </DialogContent>
       </Dialog>
-      <TagSettings open={createNewOpen} mode="add" onClose={() => setCreateNewOpen(false)} />
+      <TagSettings open={createNewOpen} mode="add" onClose={() => {
+        setCreateNewOpen(false)
+        loadTags()
+      }} />
     </React.Fragment>
   );
 }
@@ -127,7 +130,6 @@ function DeviceTag(props: DeviceTagProps) {
 interface DeviceTagsProps {
   device: Device;
   disableAdd?: boolean;
-  tags: pond.Tag[];
 }
 
 export default function DeviceTags(props: DeviceTagsProps) {
@@ -138,8 +140,8 @@ export default function DeviceTags(props: DeviceTagsProps) {
   // const [loading, setLoading] = useState(false)
   const deviceAPI = useDeviceAPI();
   const { error } = useSnackbar();
-  const [deviceTags, setDeviceTags] = useState<string[]>(device.status.tagKeys);
-  // const previousDeviceRef = useRef(device);
+  const [deviceTags, setDeviceTags] = useState<pond.TagSettings[]>(device.status.tags);
+  const previousDeviceRef = useRef(device);
 
   const loadTags = () => {
     // setLoading(true)
@@ -155,36 +157,35 @@ export default function DeviceTags(props: DeviceTagsProps) {
   }
 
   useEffect(() => {
-    let newTags: string[] = []
-    props.tags.forEach(tag => {
-      if (tag.settings) newTags.push(tag.settings?.key)
-    })
-    setDeviceTags(newTags)
-  }, [props.tags])
+    if (previousDeviceRef.current !== device) {
+      setDeviceTags(device.status.tags);
+      previousDeviceRef.current = device;
+    }
+  }, [device]);
 
   useEffect(() => {
     loadTags()
   }, [])
 
   const addTag = (tag: Tag) => {
-    if (!deviceTags.some(dt => dt === tag.key())) {
+    if (!deviceTags.some(dt => dt.key === tag.settings.key)) {
       deviceAPI
-        .tag(device.id(), tag.key())
+        .tag(device.id(), tag.settings.key)
         .then(() => {
-          setDeviceTags([...deviceTags, tag.key()]);
+          setDeviceTags([...deviceTags, tag.settings]);
         })
-        .catch(() => error("Failed to tag device as " + tag.name()));
+        .catch(() => error("Failed to tag device as " + tag.name));
     }
   };
 
   const removeTagFromDevice = (tag: Tag) => {
-    if (deviceTags.some(dt => dt === tag.key())) {
+    if (deviceTags.some(dt => dt.key === tag.settings.key)) {
       deviceAPI
         .untag(device.id(), tag.key())
         .then(() => {
-          setDeviceTags(deviceTags.filter(t => tag.key() !== t));
+          setDeviceTags(deviceTags.filter(t => tag.key() !== t.key));
         })
-        .catch(() => error("Failed to remove tag " + tag.name() + " from device"));
+        .catch(() => error("Failed to remove tag " + tag.name + " from device"));
     }
   };
 
@@ -194,14 +195,11 @@ export default function DeviceTags(props: DeviceTagsProps) {
 
   return (
     <React.Fragment>
-      {deviceTags.map(key => {
-        let tag = tags.find(t => t.settings.key === key);
-        if (!tag) {
-          return null;
-        }
+      {deviceTags?.map(tagSettings => {
+        let pondTag = pond.Tag.create({ settings: tagSettings })
         return (
-          <Grid key={tag.settings.key}>
-            <DeviceTag tag={tag} removeTagFromDevice={removeTagFromDevice} />
+          <Grid key={"device-tags-"+tagSettings.key}>
+            <DeviceTag tag={Tag.create(pondTag)} removeTagFromDevice={removeTagFromDevice} />
           </Grid>
         );
       })}
diff --git a/src/pages/Device.tsx b/src/pages/Device.tsx
index 9e13e4c..d04f440 100644
--- a/src/pages/Device.tsx
+++ b/src/pages/Device.tsx
@@ -1,4 +1,4 @@
-import { Button, Checkbox, Divider, FormControlLabel, List, ListItem, Typography } from "@mui/material";
+import { Button, Divider, List, ListItem, Typography } from "@mui/material";
 import Grid from '@mui/material/Grid2';
 import { Component, Device, Interaction, User } from "models";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
@@ -33,7 +33,7 @@ export default function DevicePage() {
   const [loading, setLoading] = useState(false)
   const [permissions, setPermissions] = useState<pond.Permission[]>([])
   const [preferences, setPreferences] = useState<pond.DevicePreferences>(pond.DevicePreferences.create())
-  const [tags, setTags] = useState<pond.Tag[]>([]);
+  // const [tags, setTags] = useState<pond.Tag[]>([]);
   const [interactions, setInteractions] = useState<Interaction[]>([]);
   const [prefsMap, setPrefsMap] = useState<Map<string, pond.DeviceComponentPreferences>>(new Map());
 
@@ -52,10 +52,10 @@ export default function DevicePage() {
 
   const loadDevice = () => {
     if (loading) return
-
     setLoading(true)
     deviceAPI.getPageData(deviceID, getContextKeys(), getContextTypes()).then(resp => {
       let device = Device.any(resp.data.device)
+      // console.log(resp.data.device)
       setDevice(device)
       let newPermissions: pond.Permission[] = []
       resp.data.permissions.forEach(perm => {
@@ -69,7 +69,8 @@ export default function DevicePage() {
       setPermissions(newPermissions)
       let u = User.any(resp.data.user);
       setPreferences(u.preferences)
-      setTags(resp.data.tags)
+      // setTags(resp.data.tags)
+      resp.data.device?.status?.tagNames
       let newComps: Component[] = []
       resp.data.components.forEach(comp => {
         newComps.push(Component.create(comp))
@@ -290,8 +291,8 @@ export default function DevicePage() {
         <Divider component="li" />
         <ListItem>
           <Grid width={"100%"} container justifyContent="flex-start" direction="row" spacing={2}>
-            {sensorComponents.map(card => (
-              <Grid  size={{ 
+            {sensorComponents.map((card, index) => (
+              <Grid key={"sensor-components-"+index} size={{ 
                 xs: 12, 
                 sm: isMobile ? 12 : 6, 
                 md: isMobile ? 12 : 6,
@@ -311,8 +312,8 @@ export default function DevicePage() {
         <Divider component="li" />
         <ListItem>
           <Grid width={"100%"} container justifyContent="flex-start" direction="row" spacing={2}>
-            {controllerComponents.map(card => (
-              <Grid  size={{ 
+            {controllerComponents.map((card, index) => (
+              <Grid key={"sensor-components-"+index} size={{ 
                 xs: 12, 
                 sm: isMobile ? 12 : 6, 
                 md: isMobile ? 12 : 6,
@@ -422,9 +423,11 @@ export default function DevicePage() {
             open={addComponentManualDialogOpen}
             onClose={() => setAddComponentManualDialogOpen(false)}
           />
-          <Button onClick={() => setAddComponentManualDialogOpen(true)}>
-            Manual Comp
-          </Button>
+          {user.hasFeature("developer") === true && 
+            <Button onClick={() => setAddComponentManualDialogOpen(true)}>
+              Manual Comp
+            </Button>
+          }
           <DeviceActions
             device={device}
             isPaused={false}
@@ -445,7 +448,6 @@ export default function DevicePage() {
         // components={components}
         usage={getUsage()}
         loading={loading}
-        tags={tags}
         groupID={parseInt(groupID)}
       />
       {componentCards()}
diff --git a/src/providers/pond/tagAPI.tsx b/src/providers/pond/tagAPI.tsx
index 06522eb..235e622 100644
--- a/src/providers/pond/tagAPI.tsx
+++ b/src/providers/pond/tagAPI.tsx
@@ -4,6 +4,7 @@ import { createContext, PropsWithChildren, useContext } from "react";
 import { pondURL } from "./pond";
 import { useGlobalState } from "providers/StateContainer";
 import { AxiosResponse } from "axios";
+import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 
 export interface ITagAPIContext {
   addTag: (tag: pond.TagSettings) => Promise<any>;
@@ -87,6 +88,8 @@ export default function TagProvider(props: PropsWithChildren<Props>) {
     types?: string[]
   ) => {
     limit = limit ? limit : 100
+    // if (!keys) keys = getContextKeys()
+    // if (!types) types = getContextTypes()  
     const url = pondURL(
       "/tags" +
         "?limit=" +