diff --git a/src/components/DnD/OrderList.tsx b/src/components/DnD/OrderList.tsx
index 91ac3041..87438253 100644
--- a/src/components/DnD/OrderList.tsx
+++ b/src/components/DnD/OrderList.tsx
@@ -7,24 +7,11 @@ const OrderList: FC = () => {
   const virtualOrder = useStore((state) => state.virtualOrder)
   const setVirtualOrder = useStore((state) => state.setVirtualOrder)
   const virtuals = useStore((state) => state.virtuals)
-  const showComplex = useStore((state) => state.showComplex)
-  const showGaps = useStore((state) => state.showGaps)
 
   const enrichedOrders: Order[] = virtualOrder
     .map((order) => {
       const vs = Object.keys(virtuals)
-      const virt = vs
-        .filter((v) =>
-          showComplex
-            ? v
-            : !(
-                v.endsWith('-mask') ||
-                v.endsWith('-foreground') ||
-                v.endsWith('-background')
-              )
-        )
-        .filter((v) => (showGaps ? v : !v.startsWith('gap-')))
-        .find((v) => virtuals[v].id === order.virtId)
+      const virt = vs.find((v) => virtuals[v].id === order.virtId)
       if (virt === undefined) {
         return null
       } else {
diff --git a/src/components/DnD/OrderListBase.tsx b/src/components/DnD/OrderListBase.tsx
index 88aea23c..06c75a41 100644
--- a/src/components/DnD/OrderListBase.tsx
+++ b/src/components/DnD/OrderListBase.tsx
@@ -12,6 +12,7 @@ import {
 } from '@hello-pangea/dnd'
 import { useTheme } from '@mui/styles'
 import { Theme } from '@mui/material'
+import useStore from '../../store/useStore'
 
 export interface Order {
   virtId: string
@@ -57,6 +58,10 @@ const getListStyle = (_isDraggingOver: boolean) => ({
 
 const OrderListBase: FC<OrderListBaseProps> = ({ orders, setOrders }) => {
   const theme = useTheme() as Theme
+
+  const showComplex = useStore((state) => state.showComplex)
+  const showGaps = useStore((state) => state.showGaps)
+
   const onDragEnd = (result: DropResult) => {
     if (!result.destination) {
       return
@@ -95,7 +100,14 @@ const OrderListBase: FC<OrderListBaseProps> = ({ orders, setOrders }) => {
                         provided.draggableProps.style,
                         theme
                       ),
-                      cursor: 'grab'
+                      cursor: 'grab',
+                      color:
+                        item.virtId.startsWith('gap-') ||
+                        item.virtId.endsWith('-mask') ||
+                        item.virtId.endsWith('-foreground') ||
+                        item.virtId.endsWith('-background')
+                          ? theme.palette.text.disabled
+                          : ''
                     }}
                   >
                     <ListItemIcon>
@@ -103,7 +115,15 @@ const OrderListBase: FC<OrderListBaseProps> = ({ orders, setOrders }) => {
                         name={item.icon || 'wled'}
                         sx={{
                           filter: snapshot.isDragging ? 'invert(1)' : '',
-                          mr: 2
+                          mr: 2,
+                          color:
+                            (!showGaps && item.virtId.startsWith('gap-')) ||
+                            (!showComplex &&
+                              (item.virtId.endsWith('-mask') ||
+                                item.virtId.endsWith('-foreground') ||
+                                item.virtId.endsWith('-background')))
+                              ? theme.palette.text.disabled
+                              : ''
                         }}
                       />
                     </ListItemIcon>
diff --git a/src/components/DnD/OrderListDialog.tsx b/src/components/DnD/OrderListDialog.tsx
index 738a8f65..2c9790de 100644
--- a/src/components/DnD/OrderListDialog.tsx
+++ b/src/components/DnD/OrderListDialog.tsx
@@ -9,8 +9,11 @@ import MenuItem from '@mui/material/MenuItem'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import Sort from '@mui/icons-material/Sort'
 import OrderList from './OrderList'
-import { ArrowBackIos } from '@mui/icons-material'
-import { Divider, Stack, Typography, useTheme } from '@mui/material'
+import { ArrowBackIos, Save } from '@mui/icons-material'
+import { Divider, IconButton, Stack, Typography, useTheme } from '@mui/material'
+import BladeIcon from '../Icons/BladeIcon/BladeIcon'
+import { download } from '../../utils/helpers'
+import useStore from '../../store/useStore'
 
 interface OrderListDialogProps {
   mode?: 'dialog' | 'drawer'
@@ -23,6 +26,10 @@ const OrderListDialog: FC<OrderListDialogProps> = ({
   variant = 'menuitem',
   onOpen
 }) => {
+  const virtualOrder = useStore((state) => state.virtualOrder)
+  const setVirtualOrder = useStore((state) => state.setVirtualOrder)
+  const showSnackbar = useStore((state) => state.ui.showSnackbar)
+
   const [open, setOpen] = useState(false)
   const theme = useTheme()
   const handleClickOpen = () => {
@@ -31,10 +38,38 @@ const OrderListDialog: FC<OrderListDialogProps> = ({
       onOpen()
     }
   }
-
+  console.log('virtualOrder', virtualOrder)
   const handleClose = () => {
     setOpen(false)
   }
+  const handleSave = () => {
+    download({ virtualOrder }, 'DeviceOrder.json', 'application/json')
+    setOpen(false)
+  }
+
+  const fileChanged = async (e: any) => {
+    const fileReader = new FileReader()
+    fileReader.readAsText(e.target.files[0], 'UTF-8')
+    fileReader.onload = (ev: any) => {
+      const newOrder = JSON.parse(ev.target.result).virtualOrder
+      if (!newOrder) {
+        showSnackbar('error', 'Invalid order file')
+        return
+      }
+      const oldVirtIds = virtualOrder.map((o: any) => o.virtId)
+      const newVirtIds = newOrder.map((o: any) => o.virtId)
+      if (
+        newOrder.length === virtualOrder.length &&
+        oldVirtIds.sort().join(',') === newVirtIds.sort().join(',')
+      ) {
+        setVirtualOrder(newOrder)
+        setOpen(false)
+        showSnackbar('success', 'Order updated')
+      } else {
+        showSnackbar('warning', 'order file does not match')
+      }
+    }
+  }
 
   return (
     <>
@@ -67,6 +102,24 @@ const OrderListDialog: FC<OrderListDialogProps> = ({
               <Typography variant="h6" ml={0.5}>
                 Change Order
               </Typography>
+              <IconButton sx={{ ml: 5 }} onClick={handleSave}>
+                <Save />
+              </IconButton>
+              <IconButton>
+                <input
+                  hidden
+                  accept="application/json"
+                  id="contained-button-file"
+                  type="file"
+                  onChange={(e) => fileChanged(e)}
+                />
+                <label
+                  htmlFor="contained-button-file"
+                  style={{ width: '100%', flexBasis: '49%' }}
+                >
+                  <BladeIcon sx={{ pt: 0.4 }} name="mdi:folder-open" />
+                </label>
+              </IconButton>
             </Stack>
             <Divider />
             <OrderList />