diff --git a/.gitignore b/.gitignore
index 4d29575..98bcd31 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# local editor configs
+.idea
\ No newline at end of file
diff --git a/src/containers/home/home.js b/src/containers/home/home.js
index 9830282..b17aed5 100644
--- a/src/containers/home/home.js
+++ b/src/containers/home/home.js
@@ -1,11 +1,11 @@
 import React from "react";
-import { Container, Paper, Typography, InputAdornment, FormControl, TextField, List, ListItem, ListItemText } from "@material-ui/core";
+import { Container, Paper, Typography, InputAdornment, FormControl, TextField, List, ListItem, ListItemText, CircularProgress, Button } from "@material-ui/core";
 import { fade, makeStyles } from '@material-ui/core/styles';
 
 
 import SearchIcon from '@material-ui/icons/Search';
+import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
 import './home.scss';
-import data from '../../data.json';
 import { withTranslation } from 'react-i18next';
 import FuzzySet from 'fuzzyset.js';
 
@@ -58,38 +58,47 @@ class Home extends React.Component {
   state = {
     showDeviceData: false,
     device: null,
+    deviceLoaded: false,
+    devices: [],
+    devicesLoaded: false,
     searchResults: [],
     showSearch: false,
     selectedSearchIndex: 0,
     query: '',
+    downloading: false,
   };
   fuzzySet;
 
+  getDevicesData = () => fetch('https://chef.libremesh.org/download/json/devices.json').then(res => res.json());
+  getDeviceData = (device_id) => fetch('https://chef.libremesh.org/download/json/' + device_id + '.json').then(res => res.json());
+
   componentDidMount() {
-    Object.keys(data['devices']).forEach((device_id) => {
-      var deviceName = '';
-      if ('vendor' in data['devices'][device_id]) {
-        deviceName += data['devices'][device_id]['vendor'] + ' ';
-      }
-      deviceName += data['devices'][device_id]['model'];
-      if ('variant' in data['devices'][device_id]) {
-        if (data['devices'][device_id]['variant'] !== '') {
-          deviceName += ' ' + data['devices'][device_id]['variant'];
-        }
-      }
-      this.deviceNames.push(deviceName);
-      this.deviceNamesID[deviceName] = device_id;
+    this.getDevicesData().then(data => {
+      Object.keys(data['devices']).forEach((device_name) => {
+        this.deviceNames.push(device_name);
+        this.deviceNamesID[device_name] = data['devices'][device_name];
+      });
+      this.fuzzySet = FuzzySet(this.deviceNames);
+      this.setState({
+        devices: data['devices'],
+        devicesLoaded: true,
+      });
     });
-    this.fuzzySet = FuzzySet(this.deviceNames);
   }
 
-  selectDevice = (device_id) => {
-    if (device_id != null) {
+  selectDevice = (device_name) => {
+    if (device_name != null) {
       this.setState({
-        device: data["devices"][device_id],
         showDeviceData: true,
         showSearch: false,
-        query: data["devices"][device_id]["vendor"] + " " + data["devices"][device_id]["model"] + " " + data["devices"][device_id]["variant"]
+        query: device_name,
+        deviceLoaded: false,
+      });
+      this.getDeviceData(this.state.devices[device_name]).then(data => {
+        this.setState({
+          device: data,
+          deviceLoaded: true,
+        });
       });
     }
   }
@@ -105,7 +114,7 @@ class Home extends React.Component {
     var searchResults = [];
     if (deviceNames != null) {
       for (var i = 0; i < deviceNames.length && i < 6; i++) {
-        searchResults.push(data['devices'][this.deviceNamesID[deviceNames[i][1]]]);
+        searchResults.push(deviceNames[i][1]);
       }
     }
     this.setState({
@@ -135,93 +144,118 @@ class Home extends React.Component {
     });
   }
 
+  downlodingImageIndicatorShow = (i) => {
+    this.setState({
+      downloading: true
+    });
+    setTimeout(() => {
+      this.setState({
+        downloading: false
+      });
+    }, 1000)
+  }
+
   render() {
+    const notLoaded = (
+      <CircularProgress />
+    );
+    const onLoad = (
+      <>
+        <Typography variant="h5">
+          {this.props.t('Download OpenWrt firmware for your device!')}
+        </Typography>
+        <Typography>
+          {this.props.t('Please use the input below to download firmware for your device!')}
+        </Typography>
+        <br />
+        <div className="search-container">
+          <FormControl fullWidth>
+            <SearchTextField
+              id="outlined-adornment-search-devices"
+              labeltext={this.props.t('Search your device')}
+              value={this.state.query}
+              onChange={this.search}
+              onClick={this.search}
+            />
+          </FormControl>
+        </div>
+        {
+          this.state.showSearch && (
+            <Paper elevation={4} className="search-results">
+              <List>
+              {
+                this.state.searchResults.map((res, index) => {
+                  return (
+                    <ListItem
+                      key={res}
+                      button
+                      onClick={() => this.selectDevice(res)}
+                    >
+                      <ListItemText primary={
+                        <div>
+                          {res}
+                        </div>
+                      } />
+                    </ListItem>
+                  );
+                })
+              }
+              </List>
+            </Paper>
+          )
+        }
+        {
+          (this.state.searchResults.length === 0 && this.state.showSearch) && (
+            <Paper elevation={4} className="search-results">
+              <ListItem>
+                <ListItemText primary={this.props.t('No results')}></ListItemText>
+              </ListItem>
+            </Paper>
+          )
+        }
+        {
+          this.state.showDeviceData && !this.state.deviceLoaded && (
+            <>
+              { notLoaded }
+            </>
+          )
+        }
+        {
+          this.state.showDeviceData && this.state.deviceLoaded && (
+            <>
+            <br />
+            {
+              this.state.device.images.map((image, i) => {
+                return (
+                  <Button
+                    key={i}
+                    className="download-button"
+                    href={"http://downloads.openwrt.org/snapshots/targets/" + this.state.device.target + "/" + this.state.device.subtarget + "/" + image.name}
+                    color="primary"
+                    variant="contained"
+                    onClick={() => this.downlodingImageIndicatorShow()}
+                  >
+                    <CloudDownloadIcon className="download-icon" />
+                    { image.type }
+                  </Button>
+                );
+              })
+            }
+            &nbsp;
+            {
+              this.state.downloading && (
+                <CircularProgress size={20} />
+              )
+            }
+            </>
+          )
+        }
+      </>
+    );
     return (
       <Container className="home-container" onClick={this.toggleSearchIfIntended}>
         <Paper className="home-container-paper">
-          <Typography variant="h5">
-            {this.props.t('Download OpenWrt firmware for your device!')}
-          </Typography>
-          <Typography>
-            {this.props.t('Please use the input below to download firmware for your device!')}
-          </Typography>
-          <br />
-          <div className="search-container">
-            <FormControl fullWidth>
-              <SearchTextField
-                id="outlined-adornment-search-devices"
-                labeltext={this.props.t('Search...')}
-                value={this.state.query}
-                onChange={this.search}
-                onClick={this.search}
-              />
-            </FormControl>
-          </div>
-          {
-            this.state.showSearch && (
-              <Paper elevation={4} className="search-results">
-                <List>
-                {
-                  this.state.searchResults.map((res, index) => {
-                    return (
-                      <ListItem
-                        key={res["device_id"]}
-                        button
-                        onClick={() => this.selectDevice(res["device_id"])}
-                      >
-                        <ListItemText primary={
-                          <div>
-                            {res["vendor"]} {res["model"]} {res["variant"]}
-                          </div>
-                        } />
-                      </ListItem>
-                    );
-                  })
-                }
-                </List>
-              </Paper>
-            )
-          }
-          {
-            (this.state.searchResults.length === 0 && this.state.showSearch) && (
-              <Paper elevation={4} className="search-results">
-                <ListItem>
-                  <ListItemText primary={this.props.t('No results')}></ListItemText>
-                </ListItem>
-              </Paper>
-            )
-          }
-          <br />
-          {this.state.showDeviceData ? (
-            <table className="device-table">
-              <tbody>
-                <tr>
-                  <td>{this.props.t('Model')}</td>
-                  <td>{this.state.device.model}</td>
-                </tr>
-                <tr>
-                  <td>{this.props.t('Vendor')}</td>
-                  <td>{this.state.device.vendor}</td>
-                </tr>
-                { 
-                  this.state.device.variant === null || this.state.device.variant === '' ? '' : (
-                    <tr>
-                      <td>{this.props.t('Variant')}</td>
-                      <td>{this.state.device.variant}</td>
-                    </tr>
-                  )
-                }
-                {
-                  this.state.device.images.map((image, i) => {
-                    return <tr key={i}>
-                      <td>{image.type}</td>
-                      <td><a href={"http://downloads.openwrt.org/snapshots/targets/" + this.state.device.target + "/" + this.state.device.subtarget + "/" + image.name}>{image.name}</a></td>
-                    </tr>;
-                  })
-                }
-              </tbody>
-            </table>
-          ) : ''}
+          { this.state.devicesLoaded ? onLoad : notLoaded }
         </Paper>
       </Container>
     );
diff --git a/src/containers/home/home.scss b/src/containers/home/home.scss
index c70e631..5fdc82e 100644
--- a/src/containers/home/home.scss
+++ b/src/containers/home/home.scss
@@ -17,6 +17,12 @@
             font-weight: bold;
             margin-bottom: 15px;
         }
+        .download-button {
+            margin-right: 10px;
+            .download-icon {
+                margin-right: 10px;
+            }
+        }
     }
 }