diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 3f79c3d..6ff0c03 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,12 +4,12 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="docs: edit pdf meta">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="refactor: getGroups">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/ToolContent.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolContent.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/generic-calc/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/generic-calc/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/time/check-leap-years/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/time/check-leap-years/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/App.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/App.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ToolLayout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolLayout.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/home/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -503,15 +503,7 @@
       <workItem from="1752071020011" duration="1599000" />
       <workItem from="1752077170501" duration="4261000" />
       <workItem from="1752127185450" duration="1168000" />
-      <workItem from="1752157409587" duration="2415000" />
-    </task>
-    <task id="LOCAL-00169" summary="chore: text result extensions">
-      <option name="closed" value="true" />
-      <created>1743022260639</created>
-      <option name="number" value="00169" />
-      <option name="presentableId" value="LOCAL-00169" />
-      <option name="project" value="LOCAL" />
-      <updated>1743022260639</updated>
+      <workItem from="1752157409587" duration="4662000" />
     </task>
     <task id="LOCAL-00170" summary="chore: show new tools in landing">
       <option name="closed" value="true" />
@@ -897,7 +889,15 @@
       <option name="project" value="LOCAL" />
       <updated>1752158119802</updated>
     </task>
-    <option name="localTasksCounter" value="218" />
+    <task id="LOCAL-00218" summary="refactor: getGroups">
+      <option name="closed" value="true" />
+      <created>1752159900432</created>
+      <option name="number" value="00218" />
+      <option name="presentableId" value="LOCAL-00218" />
+      <option name="project" value="LOCAL" />
+      <updated>1752159900432</updated>
+    </task>
+    <option name="localTasksCounter" value="219" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -944,7 +944,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="fix: add mkv to supported videos" />
     <MESSAGE value="feat: drag and drop" />
     <MESSAGE value="Merge branch 'feat/pdf-merge' of git-rohit:rohit267/omni-tools into feat/pdf-merge" />
     <MESSAGE value="chore: revert create-tool.mjs" />
@@ -969,7 +968,8 @@
     <MESSAGE value="chore: style link" />
     <MESSAGE value="refactor: PDF editor" />
     <MESSAGE value="docs: edit pdf meta" />
-    <option name="LAST_COMMIT_MESSAGE" value="docs: edit pdf meta" />
+    <MESSAGE value="refactor: getGroups" />
+    <option name="LAST_COMMIT_MESSAGE" value="refactor: getGroups" />
   </component>
   <component name="VgoProject">
     <integration-enabled>false</integration-enabled>
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 69d4d36..71460c6 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -3,7 +3,7 @@ import routesConfig from '../config/routesConfig';
 import Navbar from './Navbar';
 import { Suspense, useState, useEffect } from 'react';
 import Loading from './Loading';
-import { CssBaseline, Theme, ThemeProvider } from '@mui/material';
+import { Box, CssBaseline, Theme, ThemeProvider } from '@mui/material';
 import { CustomSnackBarProvider } from '../contexts/CustomSnackBarContext';
 import { SnackbarProvider } from 'notistack';
 import { tools } from '../tools';
@@ -55,16 +55,52 @@ function App() {
       >
         <CustomSnackBarProvider>
           <BrowserRouter>
-            <Navbar
-              mode={mode}
-              onChangeMode={() => {
-                setMode((prev) => nextMode(prev));
-                localStorage.setItem('theme', nextMode(mode));
+            <Box
+              sx={{
+                height: '100vh',
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                zIndex: 1000,
+                backgroundColor:
+                  theme.palette.mode === 'dark' ? 'black' : '#f8fafc'
               }}
-            />
-            <Suspense fallback={<Loading />}>
-              <AppRoutes />
-            </Suspense>
+            >
+              <Box
+                sx={
+                  theme.palette.mode === 'dark'
+                    ? {
+                        background: '#000000',
+                        backgroundImage: `
+        linear-gradient(to right, rgba(75, 85, 99, 0.4) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(75, 85, 99, 0.4) 1px, transparent 1px)
+      `,
+                        backgroundSize: '40px 40px'
+                      }
+                    : {
+                        backgroundImage: `
+        linear-gradient(to right, rgba(229,231,235,0.8) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(229,231,235,0.8) 1px, transparent 1px),
+        radial-gradient(circle 500px at 20% 80%, rgba(139,92,246,0.3), transparent),
+        radial-gradient(circle 500px at 80% 20%, rgba(59,130,246,0.3), transparent)
+      `,
+                        backgroundSize:
+                          '48px 48px, 48px 48px, 100% 100%, 100% 100%'
+                      }
+                }
+              >
+                <Navbar
+                  mode={mode}
+                  onChangeMode={() => {
+                    setMode((prev) => nextMode(prev));
+                    localStorage.setItem('theme', nextMode(mode));
+                  }}
+                />
+                <Suspense fallback={<Loading />}>
+                  <AppRoutes />
+                </Suspense>
+              </Box>
+            </Box>
           </BrowserRouter>
         </CustomSnackBarProvider>
       </SnackbarProvider>
diff --git a/src/components/ToolLayout.tsx b/src/components/ToolLayout.tsx
index 3da0837..4d1efff 100644
--- a/src/components/ToolLayout.tsx
+++ b/src/components/ToolLayout.tsx
@@ -38,7 +38,6 @@ export default function ToolLayout({
       display={'flex'}
       flexDirection={'column'}
       alignItems={'center'}
-      sx={{ backgroundColor: 'background.default' }}
     >
       <Helmet>
         <title>{`${title} - OmniTools`}</title>
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 4443975..9479f57 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -11,14 +11,16 @@ export default function Home() {
         md: 3,
         lg: 5
       }}
-      sx={{
-        background: `url(/assets/${
-          theme.palette.mode === 'dark'
-            ? 'background-dark.png'
-            : 'background.svg'
-        })`,
-        backgroundColor: 'background.default'
-      }}
+      sx={
+        {
+          // background: `url(/assets/${
+          //   theme.palette.mode === 'dark'
+          //     ? 'background-dark.png'
+          //     : 'background.svg'
+          // })`,
+          // backgroundColor: 'background.default'
+        }
+      }
       display={'flex'}
       flexDirection={'column'}
       alignItems={'center'}
diff --git a/src/pages/tools-by-category/index.tsx b/src/pages/tools-by-category/index.tsx
index 947862e..91e74e5 100644
--- a/src/pages/tools-by-category/index.tsx
+++ b/src/pages/tools-by-category/index.tsx
@@ -42,7 +42,7 @@ export default function ToolsByCategory() {
   }, []);
 
   return (
-    <Box sx={{ backgroundColor: 'background.default' }}>
+    <Box>
       <Helmet>
         <title>{`${rawTitle} Tools`}</title>
       </Helmet>