diff --git a/web/.npmrc b/web/.npmrc
new file mode 100644
index 0000000..cb15887
--- /dev/null
+++ b/web/.npmrc
@@ -0,0 +1 @@
+public-hoist-pattern[]=*@nextui-org/*
\ No newline at end of file
diff --git a/web/public/assets/bg.png b/web/public/assets/bg.png
new file mode 100644
index 0000000..5b746db
Binary files /dev/null and b/web/public/assets/bg.png differ
diff --git a/web/src/App.tsx b/web/src/App.tsx
index e0fba7a..ea343fa 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux';
 import { AppActions, RootState } from './store';
 import { ToastContainer } from 'react-toastify';
 import { Box } from 'lr-components';
-import { NextUIProvider } from '@nextui-org/react';
 import AppActionHook from './components/AppActionHook';
 import { isEnvBrowser } from './utils/misc';
 import { fetchNui } from './utils/fetchNui';
@@ -25,39 +24,37 @@ function App() {
   }, [setSetting]);
   return (
     <SettingContext.Provider value={{ setting, setSetting, L }}>
-      <NextUIProvider>
+      <Box
+        display='flex'
+        position='absolute'
+        flexWrap='wrap'
+        justifyContent='center'
+        alignItems='center'
+        flexDirection='column'
+        width={'50%'}
+        height={'50%'}
+        rGap={10}
+      >
+        {Object.keys(AppActions).map((action) => {
+          return (
+            <AppActionHook
+              action={action as keyof typeof AppActions}
+            ></AppActionHook>
+          );
+        })}
+      </Box>
+      {show && (
         <Box
+          width={'100%'}
+          height={'100%'}
           display='flex'
-          position='absolute'
-          flexWrap='wrap'
           justifyContent='center'
           alignItems='center'
-          flexDirection='column'
-          width={'50%'}
-          height={'50%'}
-          rGap={10}
-        >
-          {Object.keys(AppActions).map((action) => {
-            return (
-              <AppActionHook
-                action={action as keyof typeof AppActions}
-              ></AppActionHook>
-            );
-          })}
-        </Box>
-        {show && (
-          <Box
-            width={'100%'}
-            height={'100%'}
-            display='flex'
-            justifyContent='center'
-            alignItems='center'
-            className='prose'
-            pointerEvents='none'
-          ></Box>
-        )}
-        <ToastContainer pauseOnFocusLoss={false} hideProgressBar={true} />
-      </NextUIProvider>
+          className='prose'
+          pointerEvents='none'
+        ></Box>
+      )}
+      <ToastContainer pauseOnFocusLoss={false} hideProgressBar={true} />
     </SettingContext.Provider>
   );
 }
diff --git a/web/src/main.tsx b/web/src/main.tsx
index d8ab69d..4721766 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -4,11 +4,24 @@ import App from './App';
 import './index.css';
 import { Provider } from 'react-redux';
 import { store } from './store';
+import { isEnvBrowser } from './utils/misc';
+import { NextUIProvider } from '@nextui-org/react';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+const root = document.getElementById('root');
+if (isEnvBrowser()) {
+  // https://i.imgur.com/iPTAdYV.png - Night time img
+  root!.style.backgroundImage = 'url("https://i.imgur.com/3pzRj9n.png")';
+  root!.style.backgroundSize = 'cover';
+  root!.style.backgroundRepeat = 'no-repeat';
+  root!.style.backgroundPosition = 'center';
+}
+
+ReactDOM.createRoot(root!).render(
   <React.StrictMode>
     <Provider store={store}>
-      <App />
+      <NextUIProvider>
+        <App />
+      </NextUIProvider>
     </Provider>
   </React.StrictMode>
 );