diff --git a/web/components/gallery.js b/web/components/gallery.js
index 6e40537..9dced9e 100644
--- a/web/components/gallery.js
+++ b/web/components/gallery.js
@@ -4,6 +4,7 @@ import axios from 'axios'
 import _ from 'lodash'
 import { scrollItemIntoView } from '../utils'
 import { useSelectedImage } from '../hooks/useSelectedImage'
+import { useSetCursorToWait } from '../hooks/useSetCursorToWait'
 import {
   EuiLoadingSpinner,
   EuiText,
@@ -70,7 +71,6 @@ export default function ImageGallery () {
 
   const updateLayout = useCallback(_.debounce(() => {
     if (stackedGridRef.current) {
-      console.log('update called really')
       stackedGridRef.current.updateLayout()
     }
   }, 250, { maxWait: 2000 }), [])
@@ -90,6 +90,8 @@ export default function ImageGallery () {
     setPreview(false)
   })
 
+  const [ resetCursorToDefault ] = useSetCursorToWait([tab]);
+
   if (isLoading) {
     return (
       <div className="gallery-container">
@@ -109,13 +111,15 @@ export default function ImageGallery () {
         onClick={setTab}
         selected={tab}/>
       <div>
+        {!isPreview && filterList.length != 0 &&
         <StackGrid
           ref={stackedGridRef}
+          onLayout={resetCursorToDefault}
           gutterWidth={10}
           gutterHeight={10}
           className={`thumbnail-container ${isPreview ? 'in-preview' : ''}`}
           columnWidth={columnWidth}>
-          {!isPreview && filterList.map((data, index) => {
+          {filterList.map((data, index) => {
             return (
               <Thumbnail
                 isSelected={index === currentSelected}
@@ -126,15 +130,15 @@ export default function ImageGallery () {
                 updateLayout={updateLayout}/>
             )
           })}
-        </StackGrid>
+        </StackGrid>}
         {!isPreview && filterList.length === 0 &&
-            <div className="no-data-container">
-              <EuiText>
-                <EuiTextAlign textAlign="center">
-                  <p>No Data available</p>
-                </EuiTextAlign>
-              </EuiText>
-            </div>}
+        <div className="no-data-container">
+            <EuiText>
+            <EuiTextAlign textAlign="center">
+                <p>No Data available</p>
+            </EuiTextAlign>
+            </EuiText>
+        </div>}
       </div>
       {isPreview &&
             <ImageViewer {...selectedItem} index={currentSelected} total={filterList.length} closeModal={closePreview}/>
diff --git a/web/components/tabs.js b/web/components/tabs.js
index 95c9d3a..cff5068 100644
--- a/web/components/tabs.js
+++ b/web/components/tabs.js
@@ -36,7 +36,7 @@ export function Tabs ({ tabs, onClick, selected }) {
   }, [tabs, selected])
 
   return (
-    <EuiTabs className="nav-tabs" size="xl">
+    <EuiTabs size="xl">
       {renderTabs.map((tab, index) => {
         return (
           <EuiTab
diff --git a/web/hooks/useSetCursorToWait.js b/web/hooks/useSetCursorToWait.js
new file mode 100644
index 0000000..be9fae0
--- /dev/null
+++ b/web/hooks/useSetCursorToWait.js
@@ -0,0 +1,24 @@
+import { useEffect, useCallback, useRef } from "react";
+
+export function useSetCursorToWait(triggerDeps = []) {
+    useEffect(() => {
+        document.body.style.cursor = 'wait';
+    }, triggerDeps);
+
+    const cursorTimer = useRef();
+    useEffect(() => {
+        if (cursorTimer.current) {
+            clearTimeout(cursorTimer.current);
+        }
+        // in case layout change didn't happen
+        cursorTimer.current = setTimeout(() => {
+            document.body.style.cursor = 'default';
+        }, 1000)
+    });
+
+    const resetToDefault = useCallback(() => {
+        document.body.style.cursor = 'default';
+    }, []);
+
+    return [resetToDefault];
+}
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index 11dd2bb..abd8104 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html lang="en">
 
 <head>
