diff --git a/packages/app/hivecommand-frontend/src/pages/device-control/utils/alarm.ts b/packages/app/hivecommand-frontend/src/pages/device-control/utils/alarm.ts
index a8b1ce2d7..808f00a07 100644
--- a/packages/app/hivecommand-frontend/src/pages/device-control/utils/alarm.ts
+++ b/packages/app/hivecommand-frontend/src/pages/device-control/utils/alarm.ts
@@ -31,7 +31,7 @@ export const useAlarms = (deviceId: string) => {
     })
 
     const refetch = () => {
-        client.refetchQueries({include: ['DeviceConnectivity']})
+        client.refetchQueries({include: ['GetDeviceAlarms']})
     }
 
     useEffect(() => {
diff --git a/packages/core-ui/command-surface/src/views/alarms.tsx b/packages/core-ui/command-surface/src/views/alarms.tsx
index eb9cd2e79..23a4815d4 100644
--- a/packages/core-ui/command-surface/src/views/alarms.tsx
+++ b/packages/core-ui/command-surface/src/views/alarms.tsx
@@ -1,19 +1,62 @@
-import { Box, List, ListItem, Typography } from '@mui/material'
-import React, { useContext } from 'react'
+import { Box, Collapse, Divider, IconButton, List, ListItem, Typography } from '@mui/material'
+import React, { useContext, useState } from 'react'
 import { DeviceControlContext } from '../context';
+import { ChevronRight, KeyboardArrowDown } from '@mui/icons-material';
+import moment from 'moment';
 
 export const AlarmList = () => {
 
     const { alarms } = useContext(DeviceControlContext);
     
+    const sortedAlarms = alarms?.slice()?.sort((a,b) => a.createdAt?.getTime() - b.createdAt?.getTime())
+
+    const [ expanded, setExpanded ] = useState<string[]>([])
+
+    const toggleExpansion = (id: string) => {
+        if(expanded.includes(id)){
+            let ex = expanded.slice()
+            ex.splice(ex.indexOf(id), 1)
+
+            setExpanded(ex)
+        }else{
+            setExpanded([...expanded, id])
+        }
+    }
+
     return (
         <Box sx={{flex: 1}}>
             <Box sx={{display: 'flex', alignItems: 'center', marginBottom: '12px', marginTop: '12px', justifyContent: 'center'}}>
                 <Typography>Alarms</Typography>
             </Box>
-            <List>  
-                {alarms?.map((alarm) => (
-                    <ListItem>{alarm.message} {alarm.severity} {alarm.createdAt} {alarm.cause?.title}</ListItem>
+            <List sx={{overflowY: 'auto'}}>  
+                {sortedAlarms?.map((alarm) => (
+                    <>
+                    <ListItem>
+                        <Box sx={{display: 'flex', alignItems: 'flex-start'}}>
+                            {/* <IconButton onClick={() => toggleExpansion(alarm.id)}>
+                                {expanded.includes(alarm.id) ? <KeyboardArrowDown /> : <ChevronRight />}
+                            </IconButton> */}
+                        </Box>
+                        <Box sx={{display: 'flex', flex: 1, flexDirection: 'column'}}>
+                            <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
+                                <Typography>{alarm.message}</Typography>
+                                <Box sx={{display: 'flex'}}>
+                                    {/* <Divider orientation='vertical'/> */}
+                                    <Typography>{alarm.cause?.title}</Typography>
+                                </Box>
+                            </Box>
+                            <Box>
+                                <Typography>Raised at: {moment(alarm.createdAt).format("hh:mma - DD/MM/YYYY")}</Typography>
+                                <Typography>Severity : {alarm.severity}</Typography>
+                            </Box>
+                            <Collapse in={expanded.includes(alarm.id)}>
+                            </Collapse>
+                        </Box>
+                        
+                        {/* {alarm.message} {alarm.severity} {alarm.createdAt} {alarm.cause?.title} */}
+                    </ListItem>
+                    <Divider />
+                    </>
                 ))}
             </List>
         </Box>
diff --git a/packages/core/command-alarms/src/hook/utils.ts b/packages/core/command-alarms/src/hook/utils.ts
index 8ff8160a8..79e42b90b 100644
--- a/packages/core/command-alarms/src/hook/utils.ts
+++ b/packages/core/command-alarms/src/hook/utils.ts
@@ -38,9 +38,9 @@ export const makeHook = (
     const jsCode = transpile(`
 
     enum ALARM_LEVEL {
-        CRITICAL,
-        FAULT,
-        WARNING
+        CRITICAL = 'Critical',
+        FAULT = 'Fault',
+        WARNING = 'Warning'
     }
 
     enum PATHWAYS {
diff --git a/packages/core/command-alarms/src/index.ts b/packages/core/command-alarms/src/index.ts
index efa5fbec1..c84a04b82 100644
--- a/packages/core/command-alarms/src/index.ts
+++ b/packages/core/command-alarms/src/index.ts
@@ -25,8 +25,6 @@ export class AlarmCenter {
     async hook (alarms: Alarm[], alarmPathways: AlarmPathway[], values: any, typedValues: any) {
         //Look up device and routing key in alarms list
         
-        console.log({values, typedValues})
-
         const hookInst = new Hook(this.register, alarms, alarmPathways);