fix: misc

src/pages/home/Categories.tsx

@@ -7,10 +7,9 @@ import Button from '@mui/material/Button';
 import { useState } from 'react';
 import { categoriesColors } from 'config/uiConfig';
 import { Icon } from '@iconify/react';
-import { useUserTypeFilter } from '@components/UserTypeFilter';
 import { useTranslation } from 'react-i18next';
 import { getI18nNamespaceFromToolCategory } from '@utils/string';
-import { validNamespaces } from '../../i18n';
+import { useUserTypeFilter } from '../../providers/UserTypeFilterProvider';
 
 type ArrayElement<ArrayType extends readonly unknown[]> =
   ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
@@ -119,7 +118,7 @@ export default function Categories() {
   const categories = getToolsByCategory(selectedUserTypes, t);
 
   return (
-    <Grid width={'80%'} container mt={2} spacing={2}>
+    <Grid width={'80%'} container spacing={2}>
       {categories.map((category, index) => (
         <SingleCategory key={category.type} category={category} index={index} />
       ))}

src/pages/home/index.tsx

@@ -2,17 +2,12 @@ import { Box, useTheme } from '@mui/material';
 import Hero from 'components/Hero';
 import Categories from './Categories';
 import { Helmet } from 'react-helmet';
-import UserTypeFilter, { useUserTypeFilter } from 'components/UserTypeFilter';
-import { UserType } from '@tools/defineTool';
+import { useUserTypeFilter } from 'providers/UserTypeFilterProvider';
+import UserTypeFilter from '@components/UserTypeFilter';
 
 export default function Home() {
   const theme = useTheme();
   const { selectedUserTypes, setSelectedUserTypes } = useUserTypeFilter();
-
-  const handleUserTypesChange = (userTypes: UserType[]) => {
-    setSelectedUserTypes(userTypes);
-  };
-
   return (
     <Box
       padding={{
@@ -36,11 +31,12 @@ export default function Home() {
     >
       <Helmet title={'OmniTools'} />
       <Hero />
-      <UserTypeFilter
-        selectedUserTypes={selectedUserTypes}
-        onUserTypesChange={handleUserTypesChange}
-        label="Filter by User Type"
-      />
+      <Box my={3}>
+        <UserTypeFilter
+          selectedUserTypes={selectedUserTypes}
+          onUserTypesChange={setSelectedUserTypes}
+        />
+      </Box>
       <Categories />
     </Box>
   );

src/pages/tools-by-category/index.tsx

@@ -22,9 +22,10 @@ import IconButton from '@mui/material/IconButton';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SearchIcon from '@mui/icons-material/Search';
 import { Helmet } from 'react-helmet';
-import UserTypeFilter, { useUserTypeFilter } from '@components/UserTypeFilter';
+import UserTypeFilter from '@components/UserTypeFilter';
 import { useTranslation } from 'react-i18next';
 import { I18nNamespaces, validNamespaces } from '../../i18n';
+import { useUserTypeFilter } from '../../providers/UserTypeFilterProvider';
 
 const StyledLink = styled(Link)(({ theme }) => ({
   '&:hover': {
@@ -60,10 +61,6 @@ export default function ToolsByCategory() {
     }
   }, []);
 
-  const handleUserTypesChange = (userTypes: string[]) => {
-    setSelectedUserTypes(userTypes as any);
-  };
-
   return (
     <Box sx={{ backgroundColor: 'background.default' }}>
       <Helmet>
@@ -90,27 +87,32 @@ export default function ToolsByCategory() {
               {t('translation:toolLayout.allToolsTitle', { type: rawTitle })}
             </Typography>
           </Stack>
-          <Stack direction={'row'} spacing={2} sx={{ minWidth: 0 }}>
-            <TextField
-              placeholder={'Search'}
-              InputProps={{
-                endAdornment: <SearchIcon />,
-                sx: {
-                  borderRadius: 4,
-                  backgroundColor: 'background.paper',
-                  maxWidth: 400
-                }
-              }}
-              onChange={(event) => setSearchTerm(event.target.value)}
-            />
-            <UserTypeFilter
-              selectedUserTypes={selectedUserTypes}
-              onUserTypesChange={handleUserTypesChange}
-              label="User Type"
-            />
-          </Stack>
+          <TextField
+            placeholder={'Search'}
+            InputProps={{
+              endAdornment: <SearchIcon />,
+              sx: {
+                borderRadius: 4,
+                backgroundColor: 'background.paper',
+                maxWidth: 400
+              }
+            }}
+            onChange={(event) => setSearchTerm(event.target.value)}
+          />
         </Stack>
-        <Grid container spacing={2} mt={2}>
+        <Box
+          width={'100%'}
+          display={'flex'}
+          alignItems={'center'}
+          justifyContent={'center'}
+          my={2}
+        >
+          <UserTypeFilter
+            selectedUserTypes={selectedUserTypes}
+            onUserTypesChange={setSelectedUserTypes}
+          />
+        </Box>
+        <Grid container spacing={2}>
           {categoryTools.map((tool, index) => (
             <Grid item xs={12} md={6} lg={4} key={tool.path}>
               <Stack