1 files changed, 21 insertions, 19 deletions
diff --git a/pages/index.js b/pages/index.js
index 72f99f4..ac36c3b 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,38 +1,40 @@
 import styles from 'styles/Main.module.scss'
-import React from 'react'
+import Image from 'next/image'
 import useUser from 'hooks/useUser'
 import useSettings from 'hooks/useSettings'
 import useApps from 'hooks/useApps'
 import useMediaQuery from 'hooks/useMediaQuery'
-import {Layout, App, Splash} from 'components'
-import {open} from 'helpers/windowActions'
+import { Layout, App, Splash } from 'components'
+import { open } from 'helpers/windowActions'
 import appList from 'configs/appList'
 
 const Home = () => {
-  const {t} = useSettings()
-  const {apps, setApps} = useApps()
-  const touchDevice = useMediaQuery('(pointer: coarse)');
-  const {user} = useUser({
+  const { t } = useSettings()
+  const { apps, setApps } = useApps()
+  const touchDevice = useMediaQuery('(pointer: coarse)')
+  const { user } = useUser({
     redirectToLogin: true,
     redirectToVerify: true,
-    redirectToApps: true,
+    redirectToApps: true
   })
 
-  if (!user) return (
-    <Layout><Splash fixed /></Layout>
-  )
+  if (!user) {
+    return (
+      <Layout><Splash fixed /></Layout>
+    )
+  }
 
   const handleClick = (e, appProps) => {
     switch (e.detail) {
       case 1:
         touchDevice ? open(appProps, setApps) : e.currentTarget.focus()
-        break;
+        break
       case 2:
         open(appProps, setApps)
         e.currentTarget.blur()
-        break;
+        break
     }
-  };
+  }
 
   const handleKey = (e, appProps) => {
     if (e.key === 'Enter') {
@@ -48,11 +50,11 @@ const Home = () => {
             <div
               key={`${a[0]}_icon`}
               className={styles.icon}
-              onClick={e => handleClick(e, {appName: a[0], ...a[1]})}
-              onKeyDown={e => handleKey(e, {appName: a[0], ...a[1]})}
-              tabIndex="0"
+              onClick={e => handleClick(e, { appName: a[0], ...a[1] })}
+              onKeyDown={e => handleKey(e, { appName: a[0], ...a[1] })}
+              tabIndex='0'
             >
-              <img src={`./${a[0].toLowerCase()}.svg`} alt={`${a[0]} Icon`} />
+              <Image src={`/icons/${a[0].toLowerCase()}.svg`} width={48} height={48} alt={`${a[0]} Icon`} />
               <p>{t(a[0])}</p>
             </div>
           ))
@@ -70,7 +72,7 @@ const Home = () => {
             >
               <AppComponent />
             </App>
-          );
+          )
         })}
       </>
     </Layout>