diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 35ab95ec..77086bff 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,15 +1,43 @@
+import { useState } from "react";
 import {
   Button,
   Card,
   CardHeader,
   CardContent,
   CardActions,
+  CircularProgress,
 } from '@material-ui/core';
 import logo from '../assets/logo.png';
 import logoCircle from '../assets/ring.png';
 import Guide from '../components/Guide';
+import useStore from '../utils/apiStore';
+
+
+const sleep = ms => {
+  return new Promise(resolve => setTimeout(resolve, ms));
+};
+
 
 export default function Home() {
+  const scanForDevices = useStore((state) => state.scanForDevices);
+  const getDevices = useStore((state) => state.getDevices);
+  const getDisplays = useStore((state) => state.getDisplays);
+  const [scanning, setScanning] = useState(false)
+
+  const handleScan = () => {
+    setScanning(true)
+    scanForDevices().then(async () => {
+      for (let sec = 1; sec <= 10; sec++) {
+        await sleep(1000).then(() => {
+          getDevices();
+          getDisplays();
+          setScanning(sec)
+        });
+      }
+    }).then(() => {
+      setScanning(false)
+    })
+  }
   return (
     <>
       <div className="Content">
@@ -43,8 +71,12 @@ export default function Home() {
           <Button disabled variant="outlined">
             Docs
           </Button>
-          <Button disabled variant="outlined">
-            Scan
+          <Button onClick={() => handleScan()} variant="outlined">
+            {scanning ? <CircularProgress
+              variant="determinate"
+              value={(scanning / 10) * 100}
+              size={24}
+            /> : 'Scan'}
           </Button>
         </CardActions>
       </Card>
diff --git a/src/utils/apiStore.jsx b/src/utils/apiStore.jsx
index be553af1..c5e77b80 100644
--- a/src/utils/apiStore.jsx
+++ b/src/utils/apiStore.jsx
@@ -438,6 +438,10 @@ const useStore = create(
           set({ dialogs: { nohost: { open: true } } });
         }
       },
+      setSystemConfig: async (config) => {
+        const resp = await Ledfx('/api/config', set, 'PUT', config);
+        console.log(resp)
+      },
       deleteSystemConfig: async () => {
         const resp = await Ledfx('/api/config', set, 'DELETE');
         console.log(resp)
@@ -480,6 +484,28 @@ const useStore = create(
           // set({ dialogs: { nohost: { open: true } } });
         }
       },
+      scanForDevices: async () => {
+        const resp = await Ledfx('/api/find_devices', set, 'POST', {});
+        if (resp && resp.status === 'success') {
+          console.log(resp)
+        }
+        // if (resp && resp.status === 'success') {
+        //   set({
+        //     settings: get().settings,
+        //     ...{
+        //       "settings": {
+        //         audio_inputs: get().settings.audio_inputs,
+        //         "active_device_index": parseInt(index),
+        //       }
+        //     },
+
+        //   });
+        // } 
+        else {
+          set({ dialogs: { nohost: { open: true } } });
+        }
+      },
+
 
 
       togglePause: async () => {