From 45dd78396493ee053f3d156731d124139ee288ec Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Sun, 6 Sep 2026 10:30:21 -0400
Subject: [PATCH] refactor(nav): migrate header, dashboard chrome and discovery
 UI to v3

- Header/MobileBar: MenuRoot/Positioner/Content + Portal + Tooltip
  shims, ghost icon buttons, 2rem padded user/settings menus, hover
  token gray.700; MobileBar drawer API (open/onOpenChange/finalFocusEl)
- FilterBar/ActiveFilters: DrawerRoot/CloseTrigger, Divider -> Separator,
  Tag shim, FixedSelect with typed handlers and width-preserving
  chakraStyles, blue active-filter pills untouched
- Pagination: NumberInputRoot/Field + NativeSelect shims, first/last
  arrows back to double chevrons (LuChevronsLeft/Right), single chevrons
  kept for prev/next
- Search/SearchModal, Home, NoGames, LoadingModal, DashboardLoadingModal:
  Dialog/Toaster-era props, gap/align/textAlign renames; App.test target
  content updated accordingly
---
 src/components/ActiveFilters.tsx              |  26 ++-
 src/components/FilterBar.tsx                  | 116 ++++++-----
 src/components/Footer.tsx                     |   2 +-
 src/components/GamesDashboard.tsx             |  24 +--
 src/components/Header.tsx                     | 182 +++++++++---------
 src/components/Home.tsx                       |   8 +-
 src/components/LoadingModal.tsx               |   9 +-
 src/components/MobileBar.tsx                  |  76 +++-----
 src/components/NoGames.tsx                    |   8 +-
 src/components/Pagination.tsx                 | 108 ++++++-----
 src/components/Search.tsx                     |  36 ++--
 src/components/SearchModal.tsx                |  22 +--
 .../DashboardLoadingModal.tsx                 |   9 +-
 .../helperComponents/ResetFilterButton.tsx    |  10 +-
 .../helperComponents/SteamAndDeckLogo.tsx     |  15 +-
 15 files changed, 325 insertions(+), 326 deletions(-)

diff --git a/src/components/ActiveFilters.tsx b/src/components/ActiveFilters.tsx
index 0c2720f..032dc68 100644
--- a/src/components/ActiveFilters.tsx
+++ b/src/components/ActiveFilters.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 import { useHookstate } from '@hookstate/core'
 import { gameDashboardState } from '../stateManagement/gameState'
-import { Flex, Stack, HStack, Link, Spacer, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react'
+import { Flex, Stack, HStack, Link, Spacer } from '@chakra-ui/react'
+import {Tag} from './ui/tag'
 import getWithFilters from '../componentUtils/getWithFilters'
 import {
     loadingState,
@@ -53,7 +54,7 @@ const ActiveFilters = () => {
         }} direction={{
             base: 'column',
             md: 'row'
-        }} spacing={4}>
+        }} gap={4}>
             {searchParams.length >= 1 && (
                 <>
                     <h2>Search: </h2>
@@ -61,11 +62,8 @@ const ActiveFilters = () => {
                         size={'md'}
                         borderRadius="full"
                         variant="solid"
-                        colorScheme="blue"
-                    >
-                        <TagLabel><Link
-                            onMouseDown={() => setSearchModalOpen.set(true)}>{searchParams}</Link></TagLabel>
-                        <TagCloseButton onMouseDown={async () => {
+                        colorPalette="blue"
+                        onClose={async () => {
                             const newSearchParams = ""
                             ChangeActiveFilterHeader(filters, newSearchParams, setShowFiltersModuleState)
                             searchComplete.set(false)
@@ -80,7 +78,9 @@ const ActiveFilters = () => {
                                 useRatingState,
                                 useSteamRatingState,
                             )
-                        }} />
+                        }}
+                    ><Link
+                            onMouseDown={() => setSearchModalOpen.set(true)}>{searchParams}</Link>
                     </Tag>
                 </>
             )}
@@ -99,22 +99,20 @@ const ActiveFilters = () => {
                         <>
                             <HStack key={num}>
                                 <h3 style={{ textTransform: 'capitalize' }}>{filter}</h3>
-                                <HStack spacing={4}>
+                                <HStack gap={4}>
                                     {filters[filter as keyof typeof filters].split(',').map((item: string, index) => (
                                         <Tag
                                             size={'md'}
                                             key={index}
                                             borderRadius="full"
                                             variant="solid"
-                                            colorScheme="blue"
-                                        >
-                                            <TagLabel>{
+                                            colorPalette="blue"
+                                            onClose={() => removeFilters(filter, item)}
+                                        >{
                                                 item.includes('lte')
                                                     ? item.replace('lte', '<= ')
                                                     : item.includes('gte') ? item.replace('gte', '>= ')
                                                         : item}
-                                            </TagLabel>
-                                            <TagCloseButton onMouseDown={() => removeFilters(filter, item)} />
                                         </Tag>
                                     ))}
                                 </HStack>
diff --git a/src/components/FilterBar.tsx b/src/components/FilterBar.tsx
index ea36a8f..ccc794d 100644
--- a/src/components/FilterBar.tsx
+++ b/src/components/FilterBar.tsx
@@ -1,17 +1,12 @@
 import React, {MutableRefObject, useEffect} from 'react'
 import {
     Center,
-    Divider,
-    Drawer,
-    DrawerBody,
-    DrawerCloseButton,
-    DrawerContent,
-    DrawerFooter,
-    DrawerHeader,
-    DrawerOverlay, Flex,
+    Separator,
+    Flex,
     Heading, Spacer,
     Text,
 } from '@chakra-ui/react'
+import {DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerHeader, DrawerRoot} from './ui/drawer'
 import AdminMode from './authComponents/AdminMode'
 import {StateMethods, useHookstate} from '@hookstate/core'
 import {tagState} from '../stateManagement/tagState'
@@ -25,7 +20,7 @@ import {
 } from '../componentUtils/SelectValues'
 import {retrieveTags} from '../componentUtils/retrieveTags'
 import {gameDashboardState} from '../stateManagement/gameState'
-import {Select} from 'chakra-react-select'
+import {Select} from './FixedSelect'
 import getWithFilters from '../componentUtils/getWithFilters'
 import {loadingState, showFiltersModuleState} from '../stateManagement/loadingState'
 import {adminMode} from '../stateManagement/userState'
@@ -99,26 +94,25 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
     }
 
     return (
-        <Drawer
-            isOpen={filterIsOpen}
-            placement="right"
-            onClose={filterOnClose}
-            finalFocusRef={btnRef}
+        <DrawerRoot
+            open={filterIsOpen}
+            placement="end"
+            onOpenChange={(e) => { if (!e.open) filterOnClose() }}
+            finalFocusEl={() => btnRef.current as unknown as HTMLElement}
         >
-            <DrawerOverlay/>
             <DrawerContent>
-                <DrawerCloseButton/>
+                <DrawerCloseTrigger/>
                 <DrawerHeader>
                     <Heading as={'h3'}>Filters</Heading>
                 </DrawerHeader>
 
                 <DrawerBody>
                     <AdminMode/>
-                    <Divider my={'3'}/>
+                    <Separator borderColor="gray.200" my={'3'}/>
                     <Center>
                         <ResetFilterButton/>
                     </Center>
-                    <Divider my={'3'}/>
+                    <Separator borderColor="gray.200" my={'3'}/>
                     <Text mb={'1'} fontSize={'xl'}>Series</Text>
                     <Select
                         size={'sm'}
@@ -126,13 +120,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
                         isClearable
                         isMulti
                         name="series"
-                        onChange={(event) => {
-                            const value = event.map(a => a.value).join(',')
+                        onChange={(event: any) => {
+                            const value = event.map((a: any) => a.value).join(',')
                             changeFilters("series", value)
                         }}
                         options={tags.series}
                     />
-                    <Divider my={'3'}/>
+                    <Separator borderColor="gray.200" my={'3'}/>
                     <Flex mb={'1'}>
                         <Text mb={'1'} fontSize={'xl'}>Rating</Text>
                         <Spacer />
@@ -140,13 +134,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
                             size={'sm'}
                             defaultValue={ratingToSelectDefaultValue(useRatingState)}
                             name="rating"
-                            onChange={(event) => {
+                            onChange={(event: any) => {
                                 if (event === null) return
                                 setRatingState.set(event.value)
                             }}
                             options={ratingStateValues}
                             chakraStyles={{
-                                container: (provided) => ({
+                                container: (provided: any) => ({
                                     ...provided,
                                     width: "75px"
                                 })
@@ -158,13 +152,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
                         defaultValue={filterToSelectDefaultValue("rating")}
                         isClearable
                         name="rating"
-                        onChange={(event) => {
+                        onChange={(event: any) => {
                             if(event === null) return changeFilters("rating", "")
                             changeFilters("rating", event.value)
                         }}
                         options={ratingValues}
                     />
-                    <Divider my={'1'}/>
+                    <Separator borderColor="gray.200" my={'1'}/>
                     <Flex mb={'1'}>
                         <Text mb={'1'} fontSize={'xl'}>Steam Rating</Text>
                         <Spacer />
@@ -172,13 +166,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
                             size={'sm'}
                             defaultValue={ratingToSelectDefaultValue(useSteamRatingState)}
                             name="steamRating"
-                            onChange={(event) => {
+                            onChange={(event: any) => {
                                 if (event === null) return
                                 setSteamRatingState.set(event.value)
                             }}
                             options={ratingStateValues}
                             chakraStyles={{
-                                container: (provided) => ({
+                                container: (provided: any) => ({
                                     ...provided,
                                     width: "75px"
                                 })
@@ -190,13 +184,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
                         defaultValue={filterToSelectDefaultValue("steamRating")}
                         isClearable
                         name="steamRating"
-                        onChange={(event) => {
+                        onChange={(event: any) => {
                             if(event === null) return changeFilters("steamRating", "")
                             changeFilters("steamRating", event.value)
                         }}
                         options={ratingValues}
                     />
-                    <Divider my={'1'}/>
+                    <Separator borderColor="gray.200" my={'1'}/>
                     <Text mb={'1'} fontSize={'xl'}>Play Status</Text>
                     <Select
                         size={'sm'}
@@ -204,13 +198,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
                         isClearable
                         isMulti
                         name="playStatus"
-                        onChange={(event) => {
-                            const value = event.map(a => a.value).join(',')
+                        onChange={(event: any) => {
+                            const value = event.map((a: any) => a.value).join(',')
                             changeFilters("playStatus", value)
                         }}
                         options={playStatusValues}
                     />
-                    <Divider my={'1'}/>
+                    <Separator borderColor="gray.200" my={'1'}/>
                     <Text mb={'1'} fontSize={'xl'}>Genres</Text>
                     <Select
                         size={'sm'}
@@ -218,13 +212,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
                         isClearable
                         isMulti
                         name="genre"
-                        onChange={(event) => {
-                            const value = event.map(a => a.value).join(',')
+                        onChange={(event: any) => {
+                            const value = event.map((a: any) => a.value).join(',')
                             changeFilters("genre", value)
                         }}
                         options={tags.genres}
                     />
-                    <Divider my={'1'}/>
+                    <Separator borderColor="gray.200" my={'1'}/>
                     <Text mb={'1'} fontSize={'xl'}>Operating System</Text>
                     <Select
                         size={'sm'}
@@ -232,13 +226,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
                         isClearable
                         isMulti
                         name="os"
-                        onChange={(event) => {
-                            const value = event.map(a => a.value).join(',')
+                        onChange={(event: any) => {
+                            const value = event.map((a: any) => a.value).join(',')
                             changeFilters("os", value)
                         }}
                         options={osValues}
                     />
-                    <Divider my={'1'}/>
+                    <Separator borderColor="gray.200" my={'1'}/>
                     <Text mb={'1'} fontSize={'xl'}>Store</Text>
                     <Select
                         size={'sm'}
@@ -246,13 +240,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
                         isClearable
                         isMulti
                         name="store"
-                        onChange={(event) => {
-                            const value = event.map(a => a.value).join(',')
+                        onChange={(event: any) => {
+                            const value = event.map((a: any) => a.value).join(',')
                             changeFilters("store", value)
                         }}
                         options={tags.store}
                     />
-                    <Divider my={'1'}/>
+                    <Separator borderColor="gray.200" my={'1'}/>
                     <Text mb={'1'} fontSize={'xl'}>Controller Support</Text>
                     <Select
                         size={'sm'}
@@ -260,13 +254,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
                         isClearable
                         isMulti
                         name="controller"
-                        onChange={(event) => {
-                            const value = event.map(a => a.value).join(',')
+                        onChange={(event: any) => {
+                            const value = event.map((a: any) => a.value).join(',')
                             changeFilters("controller", value)
                         }}
                         options={controllerValues}
                     />
-                    <Divider my={'1'}/>
+                    <Separator borderColor="gray.200" my={'1'}/>
                     <Text mb={'1'} fontSize={'xl'}>Developer</Text>
                     <Select
                         size={'sm'}
@@ -274,13 +268,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
                         isClearable
                         isMulti
                         name="developer"
-                        onChange={(event) => {
-                            const value = event.map(a => a.value).join(',')
+                        onChange={(event: any) => {
+                            const value = event.map((a: any) => a.value).join(',')
                             changeFilters("developer", value)
                         }}
                         options={tags.developer}
                     />
-                    <Divider my={'1'}/>
+                    <Separator borderColor="gray.200" my={'1'}/>
                     <Text mb={'1'} fontSize={'xl'}>Publisher</Text>
                     <Select
                         size={'sm'}
@@ -288,13 +282,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
                         isClearable
                         isMulti
                         name="publisher"
-                        onChange={(event) => {
-                            const value = event.map(a => a.value).join(',')
+                        onChange={(event: any) => {
+                            const value = event.map((a: any) => a.value).join(',')
                             changeFilters("publisher", value)
                         }}
                         options={tags.publisher}
                     />
-                    <Divider my={'1'}/>
+                    <Separator borderColor="gray.200" my={'1'}/>
                     <Text mb={'1'} fontSize={'xl'}>Do you own the Soundtrack?</Text>
                     <Select
                         size={'sm'}
@@ -302,13 +296,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
                         isClearable
                         isMulti
                         name="soundtrack"
-                        onChange={(event) => {
-                            const value = event.map(a => a.value).join(',')
+                        onChange={(event: any) => {
+                            const value = event.map((a: any) => a.value).join(',')
                             changeFilters("soundtrack", value)
                         }}
                         options={yesNo}
                     />
-                    <Divider my={'1'}/>
+                    <Separator borderColor="gray.200" my={'1'}/>
                     <Text mb={'1'} fontSize={'xl'}>Does in work on Intel?</Text>
                     <Select
                         size={'sm'}
@@ -316,13 +310,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
                         isClearable
                         isMulti
                         name="intel"
-                        onChange={(event) => {
-                            const value = event.map(a => a.value).join(',')
+                        onChange={(event: any) => {
+                            const value = event.map((a: any) => a.value).join(',')
                             changeFilters("intel", value)
                         }}
                         options={wineIntelValues}
                     />
-                    <Divider my={'1'}/>
+                    <Separator borderColor="gray.200" my={'1'}/>
                     <Text mb={'1'} fontSize={'xl'}>Does is work with Wine?</Text>
                     <Select
                         size={'sm'}
@@ -330,21 +324,21 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
                         isClearable
                         isMulti
                         name="wine"
-                        onChange={(event) => {
-                            const value = event.map(a => a.value).join(',')
+                        onChange={(event: any) => {
+                            const value = event.map((a: any) => a.value).join(',')
                             changeFilters("wine", value)
                         }}
                         options={wineIntelValues}
                     />
-                    <Divider my={'1'}/>
+                    <Separator borderColor="gray.200" my={'1'}/>
                 </DrawerBody>
 
                 <DrawerFooter>
 
                 </DrawerFooter>
             </DrawerContent>
-        </Drawer>
+        </DrawerRoot>
     )
 }
 
-export default FilterBar
\ No newline at end of file
+export default FilterBar
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 2091fc0..fce4181 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -6,7 +6,7 @@ export default function Footer() {
   return (
       <Box as='footer' role='contentinfo' mx='auto' maxW='7xl' py='12' px={{ base: '4', md: '8' }}>
         <Stack>
-          <Stack direction="row" spacing="4" align="center" justify="space-between">
+          <Stack direction="row" gap="4" align="center" justify="space-between">
 
 
           </Stack>
diff --git a/src/components/GamesDashboard.tsx b/src/components/GamesDashboard.tsx
index 280b6f8..24539ba 100644
--- a/src/components/GamesDashboard.tsx
+++ b/src/components/GamesDashboard.tsx
@@ -4,7 +4,7 @@ import React, { useEffect } from 'react'
 import { gameDashboardState } from '../stateManagement/gameState'
 import { loadingState } from '../stateManagement/loadingState'
 import { useHookstate } from '@hookstate/core'
-import { Box, Center, Container, Divider, Heading, SimpleGrid, VStack } from '@chakra-ui/react'
+import { Box, Center, Container, Separator, Heading, SimpleGrid, VStack } from '@chakra-ui/react'
 import Pagination from './Pagination'
 import { NavLink } from 'react-router-dom'
 import { adminMode } from '../stateManagement/userState'
@@ -33,34 +33,36 @@ const GameDashboard = () => {
 
     return (
         <>
-            <Container maxW="container.xl" mt="7">
+            <Container maxW="1280px" mt="7">
                 <Pagination />
                 <ActiveFilters />
-                <Divider />
+                <Separator borderColor="gray.200" />
                 {!loaded ? <DashboardLoadingModal /> : games.count.totalGames === 0 ?
                     <Center h={'80vh'}>
-                        <VStack spacing={10}>
+                        <VStack gap={10}>
                             <Heading as={'h1'} size={'3xl'}>No Results Found...</Heading>
-                            <Divider />
+                            <Separator borderColor="gray.200" />
                             {games.searchParams !== '' ?
                                 <Box mt='10'>
-                                    <ResetFilterButton text='Clear Search and Filters' size='lg' variant='outline' colorScheme='blue' />
+                                    <ResetFilterButton text='Clear Search and Filters' size='lg' variant='outline' colorPalette='blue' />
                                 </Box>
                                 :
                                 <Box
                                     rounded={'md'}
-                                    as={NavLink}
-                                    border={'1px'}
+                                    asChild
+                                    borderWidth={'1px'} borderStyle={'solid'}
                                     p={'3'}
                                     fontSize={'2xl'}
-                                    to="/games/create">
+                                >
+                                    <NavLink to="/games/create">
                                     Create a Game
+                                    </NavLink>
                                 </Box>
                             }
                         </VStack>
                     </Center>
                     :
-                    <SimpleGrid columns={{ base: 1, sm: 2, md: 3 }} spacing={10} style={{ marginTop: '3rem' }}>
+                    <SimpleGrid columns={{ base: 1, sm: 2, md: 3 }} gap={10} style={{ marginTop: '3rem' }}>
                         {games.data.map((game) => (
                             <GameThumbnailContextMenu
                                 key={game._id}
@@ -68,7 +70,7 @@ const GameDashboard = () => {
                                 game={game} />
                         ))}
                     </SimpleGrid>}
-                <Divider my={'1rem'} />
+                <Separator borderColor="gray.200" my={'1rem'} />
                 <Pagination />
             </Container>
         </>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index bc99a00..43c2b64 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -9,27 +9,23 @@ import {
   Link,
   HStack,
   Stack,
-  useColorModeValue,
   Menu,
-  MenuButton,
-  Avatar,
-  MenuList,
-  MenuItem,
-  MenuDivider,
+  Portal,
   Icon,
-  useColorMode,
   Text,
   Center,
   VStack,
-  Tooltip,
-  Divider,
+  Separator,
   Heading,
   Kbd,
   Spacer,
   useDisclosure,
   useMediaQuery,
 } from '@chakra-ui/react'
-import { AddIcon, HamburgerIcon, Search2Icon, SettingsIcon } from '@chakra-ui/icons'
+import {useColorMode, useColorModeValue} from './ui/color-mode'
+import {Tooltip} from './ui/tooltip'
+import {Avatar} from './ui/avatar'
+import { LuPlus, LuMenu, LuSearch, LuSettings } from 'react-icons/lu'
 import SearchModal from './SearchModal'
 import { openAndCloseSearchDialogue } from '../stateManagement/loadingState'
 import AdminMode from './authComponents/AdminMode'
@@ -49,10 +45,10 @@ export default function NavBar() {
   const bgLink = useColorModeValue('gray.200', 'gray.700')
   const location = useLocation()
   const history = useNavigate()
-  const { isOpen: mobileIsOpen, onOpen: mobileOnOpen, onClose: mobileOnClose } = useDisclosure()
-  const { isOpen: filterIsOpen, onOpen: filterOnOpen, onClose: filterOnClose } = useDisclosure()
+  const { open: mobileIsOpen, onOpen: mobileOnOpen, onClose: mobileOnClose } = useDisclosure()
+  const { open: filterIsOpen, onOpen: filterOnOpen, onClose: filterOnClose } = useDisclosure()
   const btnRef = React.useRef(null)
-  const [isSmallerThan768] = useMediaQuery('(max-width: 768px)')
+  const [isSmallerThan768] = useMediaQuery(['(max-width: 768px)'])
 
   const handleKeyPress = useCallback((event: any) => {
     if (event.ctrlKey === true && event.key === ',') {
@@ -95,13 +91,13 @@ export default function NavBar() {
           position={loadedPreferences.get().stickyNav ? "fixed" : "relative"}
           justifyContent={'space-between'}
       >
-        <HStack spacing={8} alignItems={'center'}>
-          <Box as={RouteLink} to="/">
-            Game Database
+        <HStack gap={8} alignItems={'center'}>
+          <Box asChild>
+            <RouteLink to="/">Game Database</RouteLink>
           </Box>
           <HStack
             as={'nav'}
-            spacing={4}
+            gap={4}
             display={{ base: 'none', md: 'flex' }}
           >
             <Link
@@ -112,9 +108,8 @@ export default function NavBar() {
                 textDecoration: 'none',
                 bg: bgLink,
               }}
-              as={RouteLink}
-              to="/games">
-              Games
+              asChild>
+              <RouteLink to="/games">Games</RouteLink>
             </Link>
             <Link
               px={2}
@@ -124,9 +119,8 @@ export default function NavBar() {
                 textDecoration: 'none',
                 bg: bgLink,
               }}
-              as={RouteLink}
-              to="/games/create">
-              Create Game
+              asChild>
+              <RouteLink to="/games/create">Create Game</RouteLink>
             </Link>
           </HStack>
         </HStack>
@@ -135,7 +129,7 @@ export default function NavBar() {
         {isSmallerThan768 ?
           <>
             <Button ref={btnRef} onMouseDown={mobileIsOpen ? mobileOnClose : mobileOnOpen}>
-              <HamburgerIcon/>
+              <LuMenu/>
             </Button>
             <MobileBar mobileIsOpen={mobileIsOpen} mobileOnClose={mobileOnClose} btnRef={btnRef} bgLink={bgLink}
                        user={user} colorMode={colorMode} toggleColorMode={toggleColorMode}/>
@@ -144,7 +138,7 @@ export default function NavBar() {
           <Stack direction={'row'}>
 
             { user.role === 'admin' && <AdminMode/>}
-            <Tooltip hasArrow mr={'2'} label={'Filters'} aria-label={'Filters'}>
+            <Tooltip showArrow content={'Filters'}>
               <Button
                 rounded={'full'}
                 bg={'transparent'}
@@ -164,7 +158,7 @@ export default function NavBar() {
             </Tooltip>
             <FilterBar filterIsOpen={filterIsOpen} filterOnClose={filterOnClose} btnRef={btnRef} filterLoadingState={filterLoadingState} />
 
-            <Tooltip hasArrow mr={'2'} label={'Search: ctrl+s'} aria-label={'Search'}>
+            <Tooltip showArrow content={'Search: ctrl+s'}>
               <Button
                 rounded={'full'}
                 onMouseDown={() => {
@@ -173,77 +167,81 @@ export default function NavBar() {
                 bg={'transparent'}
                 cursor={'pointer'}
                 minW={0}>
-                <Search2Icon/>
+                <LuSearch/>
               </Button>
             </Tooltip>
-            <Menu>
-              <Tooltip hasArrow mr={'2'} label={'Settings'} aria-label={'Settings'}>
-                <MenuButton
-                  as={Button}
+            <Menu.Root>
+              <Menu.Trigger asChild>
+                <Button
                   rounded={'full'}
-                  variant={'transparent'}
+                  variant={'ghost'}
                   cursor={'pointer'}
                   minW={0}>
-                  <SettingsIcon/>
-                </MenuButton>
-              </Tooltip>
-              <MenuList alignItems={'center'}>
-                <VStack>
-                  {/*<Button onMouseDown={toggleColorMode} w={'70%'}>*/}
-                  {/*  {colorMode === 'light' ? <MoonIcon/> : <SunIcon/>}*/}
-                  {/*  {colorMode === 'light' ?*/}
-                  {/*    <Text mt={'1'} ml={'2'}>Dark</Text> :*/}
-                  {/*    <Text mt={'1'} ml={'2'}>Light</Text>}*/}
-                  {/*</Button>*/}
-                  <Button
-                    variant={'solid'}
-                    colorScheme={'blue'}
-                    size={'md'}
-                    leftIcon={<AddIcon/>}
-                    as={RouteLink}
-                    w={'70%'}
-                    to="/games/create">
-                    <Text mt="1">Create Game</Text>
-                  </Button>
-                  <Divider/>
-                  <Heading as={'h3'} size={'md'}>Keyboard Shortcuts</Heading>
-                  <HStack><Text fontSize={'sm'}>Search:</Text><span><Kbd>ctrl</Kbd> + <Kbd>,</Kbd></span></HStack>
-                  <HStack><Text fontSize={'sm'}>Games Grid:</Text><span><Kbd>ctrl</Kbd> + <Kbd>.</Kbd></span></HStack>
-                  <HStack><Text fontSize={'sm'}>Create
-                    Game:</Text><span><Kbd>ctrl</Kbd> + <Kbd>/</Kbd></span></HStack>
-                </VStack>
-              </MenuList>
-            </Menu>
-            <Menu>
-              <Tooltip hasArrow mr={'2'} label={'User Info and Logout'} aria-label={'User Info'}>
-              <MenuButton
-                as={Button}
-                rounded={'full'}
-                variant={'transparent'}
-                cursor={'pointer'}
-                minW={0}>
-                <Avatar size={'sm'} src={user.avatar}/>
-              </MenuButton>
-              </Tooltip>
-              <MenuList alignItems={'center'}>
-                <br/>
-                <Center>
-                  <Avatar
-                    size={'2xl'}
-                    src={user.avatar}
-                  />
-                </Center>
-                <br/>
-                <Center>
-                  <p>{user.displayName}</p>
-                </Center>
-                <br/>
-                <MenuDivider/>
-                <MenuItem onClick={() => history('/profile')}>Preferences</MenuItem>
-                <MenuItem onClick={() => logout()}><Icon as={MdOutlinePowerSettingsNew} mr={'2'}/> <Text
-                  mt={'1'}>Logout</Text></MenuItem>
-              </MenuList>
-            </Menu>
+                  <Tooltip showArrow content={'Settings'}>
+                    <LuSettings/>
+                  </Tooltip>
+                </Button>
+              </Menu.Trigger>
+              <Portal>
+                <Menu.Positioner>
+                  <Menu.Content p={8}>
+                    <VStack alignItems={'center'}>
+                      <Button
+                        variant={'solid'}
+                        colorPalette={'blue'}
+                        size={'md'}
+                        asChild
+                        w={'70%'}
+                      >
+                        <RouteLink to="/games/create"><LuPlus/> <Text mt="1">Create Game</Text></RouteLink>
+                      </Button>
+                      <Separator/>
+                      <Heading as={'h3'} size={'md'}>Keyboard Shortcuts</Heading>
+                      <HStack><Text fontSize={'sm'}>Search:</Text><span><Kbd>ctrl</Kbd> + <Kbd>,</Kbd></span></HStack>
+                      <HStack><Text fontSize={'sm'}>Games Grid:</Text><span><Kbd>ctrl</Kbd> + <Kbd>.</Kbd></span></HStack>
+                      <HStack><Text fontSize={'sm'}>Create
+                        Game:</Text><span><Kbd>ctrl</Kbd> + <Kbd>/</Kbd></span></HStack>
+                    </VStack>
+                  </Menu.Content>
+                </Menu.Positioner>
+              </Portal>
+            </Menu.Root>
+            <Menu.Root>
+              <Menu.Trigger asChild>
+                <Button
+                  rounded={'full'}
+                  variant={'ghost'}
+                  cursor={'pointer'}
+                  minW={0}>
+                  <Tooltip showArrow content={'User Info and Logout'}>
+                    <Avatar size={'sm'} src={user.avatar} name={user.displayName} />
+                  </Tooltip>
+                </Button>
+              </Menu.Trigger>
+              <Portal>
+                <Menu.Positioner>
+                  <Menu.Content p={8}>
+                    <br/>
+                    <Center>
+                      <Avatar
+                        size={'2xl'}
+                        src={user.avatar}
+                        name={user.displayName}
+                      />
+                    </Center>
+                    <br/>
+                    <Center>
+                      <p>{user.displayName}</p>
+                    </Center>
+                    <br/>
+                    <Menu.Separator/>
+                    <Menu.Item value="preferences" onSelect={() => history('/profile')}>Preferences</Menu.Item>
+                    <Menu.Item value="logout" onSelect={() => logout()}><Icon as={MdOutlinePowerSettingsNew} mr={'2'}/> <Text
+                      mt={'1'}>Logout</Text></Menu.Item>
+                  </Menu.Content>
+                </Menu.Positioner>
+              </Portal>
+            </Menu.Root>
           </Stack>
         }
       </Flex>
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 2400aae..161f02f 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -4,13 +4,13 @@ import { VStack, Image, Button, Heading, Flex, Center } from '@chakra-ui/react'
 
 const Home = () => {
   return (
-    <Flex align={'center'} bgGradient={'linear(to-br, #314755, #26a0da)'} height={'100vh'}>
+    <Flex align={'center'} bgImage={'linear-gradient(to bottom right, #314755, #26a0da)'} height={'100vh'}>
       <Center w={'100%'}>
-        <VStack spacing={4} align={'center'} margin={'auto'}>
+        <VStack gap={4} align={'center'} margin={'auto'}>
           <Image src="/assets/Logo.svg" alt="Games Database Logo"/>
           <Heading as="h2" fontSize={'1.7em'} fontWeight={'normal'}>Welcome to your Games Database</Heading>
-          <Button as={Link} to="/login" size='lg' variant='outline' fontSize='1.25rem'>
-            Login
+          <Button asChild size='lg' variant='outline' fontSize='1.25rem'>
+            <Link to="/login">Login</Link>
           </Button>
         </VStack>
       </Center>
diff --git a/src/components/LoadingModal.tsx b/src/components/LoadingModal.tsx
index 5303349..9afe522 100644
--- a/src/components/LoadingModal.tsx
+++ b/src/components/LoadingModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Center, CircularProgress } from '@chakra-ui/react'
+import { Center, ProgressCircle } from '@chakra-ui/react'
 
 export default function LoadingModal() {
 
@@ -14,7 +14,12 @@ export default function LoadingModal() {
         bottom={'0'}
         left={'0'}
       >
-        <CircularProgress isIndeterminate color="blue.500"/>
+        <ProgressCircle.Root value={null} size="lg">
+          <ProgressCircle.Circle>
+            <ProgressCircle.Track />
+            <ProgressCircle.Range stroke="blue.500" />
+          </ProgressCircle.Circle>
+        </ProgressCircle.Root>
       </Center>
     </>
   )
diff --git a/src/components/MobileBar.tsx b/src/components/MobileBar.tsx
index 246a897..dbcf620 100644
--- a/src/components/MobileBar.tsx
+++ b/src/components/MobileBar.tsx
@@ -1,19 +1,18 @@
 import React, { MutableRefObject } from 'react'
 import {
-  Avatar, Button, Center, ColorMode,
-  Divider, Drawer,
-  DrawerBody,
-  DrawerCloseButton,
-  DrawerContent, DrawerFooter,
-  DrawerHeader,
-  DrawerOverlay, Icon,
+  Button, Center,
+  Separator,
+  Drawer,
+  Icon,
   Image, Link,
   Stack, Text,
 } from '@chakra-ui/react'
+import {DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerHeader, DrawerRoot} from './ui/drawer'
+import {Avatar} from './ui/avatar'
 import AdminMode from './authComponents/AdminMode'
 import { NavLink } from 'react-router-dom'
 import Search from './Search'
-import { AddIcon } from '@chakra-ui/icons'
+import { LuPlus } from 'react-icons/lu'
 import { logout } from '../stateManagement/userState'
 import User from '../models/user'
 import { AiOutlineLogout } from 'react-icons/ai'
@@ -21,12 +20,13 @@ import {useHookstate} from "@hookstate/core";
 import {searchCompletedState} from "../stateManagement/loadingState";
 import {gameDashboardState} from "../stateManagement/gameState";
 import ResetFilterButton from "./helperComponents/ResetFilterButton";
+import type { ColorMode } from './ui/color-mode'
 
 interface Props {
   mobileIsOpen: boolean
   mobileOnClose: () => void
   btnRef: MutableRefObject<null>
-  bgLink: "gray.200" | "gray.700"
+  bgLink: string
   user: User
   colorMode: ColorMode
   toggleColorMode: () => void
@@ -37,15 +37,14 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
   const gamesState = useHookstate(gameDashboardState)
   const games = gamesState.get()
   return (
-    <Drawer
-      isOpen={mobileIsOpen}
-      placement="right"
-      onClose={mobileOnClose}
-      finalFocusRef={btnRef}
+    <DrawerRoot
+      open={mobileIsOpen}
+      placement="end"
+      onOpenChange={(e) => { if (!e.open) mobileOnClose() }}
+      finalFocusEl={() => btnRef.current as unknown as HTMLElement}
     >
-      <DrawerOverlay/>
       <DrawerContent>
-        <DrawerCloseButton/>
+        <DrawerCloseTrigger/>
         <DrawerHeader>
           <Image maxW="15rem" src="/assets/Logo.svg" alt="Games Database Logo"/>
         </DrawerHeader>
@@ -54,7 +53,7 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
           <AdminMode />
           <Stack
             as={'nav'}
-            spacing={4}
+            gap={4}
           >
             <Link
               px={2}
@@ -64,9 +63,8 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
                 textDecoration: 'none',
                 bg: bgLink,
               }}
-              as={NavLink}
-              to="/games">
-              <Text align={'right'}>Games</Text>
+              asChild>
+              <NavLink to="/games"><Text textAlign={'right'}>Games</Text></NavLink>
             </Link>
             <Link
               px={2}
@@ -76,15 +74,14 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
                 textDecoration: 'none',
                 bg: bgLink,
               }}
-              as={NavLink}
-              to="/games/create">
-              <Text align={'right'}>Create Game</Text>
+              asChild>
+              <NavLink to="/games/create"><Text textAlign={'right'}>Create Game</Text></NavLink>
             </Link>
-            <Divider/>
+            <Separator/>
             <Search/>
             {searchCompleted.get() && <Text>Games Found: {games.count.totalGames}</Text>}
-            <Divider/>
-            <Center><Avatar mr={'2'} size={'sm'} src={user.avatar}/><Text mt={1}>{user.displayName}</Text></Center>
+            <Separator/>
+            <Center><Avatar mr={'2'} size={'sm'} src={user.avatar} name={user.displayName}/><Text mt={1}>{user.displayName}</Text></Center>
             <Link
               px={2}
               py={1}
@@ -93,18 +90,10 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
                 textDecoration: 'none',
                 bg: bgLink,
               }}
-              as={NavLink}
-              to="/profile">
-              <Text align={'right'}>Preferences</Text>
+              asChild>
+              <NavLink to="/profile"><Text textAlign={'right'}>Preferences</Text></NavLink>
             </Link>
-            <Divider/>
-            {/*<Button onMouseDown={toggleColorMode} ml={'auto'}>*/}
-            {/*  {colorMode === 'light' ? <MoonIcon/> : <SunIcon/>}*/}
-            {/*  {colorMode === 'light' ?*/}
-            {/*    <Text mt={'1'} ml={'2'}>Dark</Text> :*/}
-            {/*    <Text mt={'1'} ml={'2'}>Light</Text>}*/}
-            {/*</Button>*/}
-            {/*<Divider/>*/}
+            <Separator/>
             <ResetFilterButton />
           </Stack>
 
@@ -114,21 +103,20 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
         <DrawerFooter>
           <Button
             variant={'solid'}
-            colorScheme={'blue'}
+            colorPalette={'blue'}
             size={'md'}
-            leftIcon={<AddIcon/>}
-            as={NavLink}
+            asChild
             mr={3}
-            to="/games/create">
-            <Text mt="1">Create Game</Text>
+          >
+            <NavLink to="/games/create"><LuPlus/> <Text mt="1">Create Game</Text></NavLink>
           </Button>
           <Button onMouseDown={() => logout()}><Icon as={AiOutlineLogout} mr={'2'}/> <Text
             mt={'1'}>Logout</Text></Button>
 
         </DrawerFooter>
       </DrawerContent>
-    </Drawer>
+    </DrawerRoot>
   )
 }
 
-export default MobileBar
\ No newline at end of file
+export default MobileBar
diff --git a/src/components/NoGames.tsx b/src/components/NoGames.tsx
index 1ee327d..3d83049 100644
--- a/src/components/NoGames.tsx
+++ b/src/components/NoGames.tsx
@@ -4,12 +4,12 @@ import { Center, Flex, Heading, Button, VStack } from '@chakra-ui/react'
 
 export default function NoGames() {
   return (
-    <Flex align={'center'} bgGradient={'linear(to-br, #314755, #26a0da)'} height={'100vh'}>
+    <Flex align={'center'} bgImage={'linear-gradient(to bottom right, #314755, #26a0da)'} height={'100vh'}>
       <Center w={'100%'}>
-        <VStack spacing={4} align={'center'} margin={'auto'}>
+        <VStack gap={4} align={'center'} margin={'auto'}>
           {<Heading as="h2">You have not added any games yet.</Heading>}
-        <Button as={Link} to='/games/create' size='lg' variant='outline' fontSize='1.25rem'>
-          Click here to add some!
+        <Button asChild size='lg' variant='outline' fontSize='1.25rem'>
+          <Link to='/games/create'>Click here to add some!</Link>
         </Button>
         </VStack>
       </Center>
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index 40f8a56..a87928e 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -4,24 +4,21 @@ import {
     Grid,
     GridItem,
     IconButton,
-    NumberDecrementStepper,
-    NumberIncrementStepper,
-    NumberInput,
-    NumberInputField,
-    NumberInputStepper,
-    Select,
     Text,
-    Tooltip,
-    useColorModeValue,
-    useMediaQuery,
+    Portal,
 } from '@chakra-ui/react'
-import { ArrowLeftIcon, ArrowRightIcon, ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
+import {NumberInputRoot, NumberInputField} from './ui/number-input'
+import { NativeSelect } from '@chakra-ui/react'
+import { LuChevronLeft, LuChevronRight, LuChevronsLeft, LuChevronsRight } from 'react-icons/lu'
+import {Tooltip} from './ui/tooltip'
 import { useHookstate } from '@hookstate/core'
 import { gameDashboardState } from '../stateManagement/gameState'
 import { loadingState } from '../stateManagement/loadingState'
 import { adminMode } from '../stateManagement/userState'
 import getWithFilters from '../componentUtils/getWithFilters'
 import { ratingState, steamRatingState } from "../stateManagement/ratingState";
+import {useColorModeValue} from "./ui/color-mode";
+import {useMediaQuery} from "@chakra-ui/react";
 
 export default function Pagination() {
     const gamesState = useHookstate(gameDashboardState)
@@ -34,7 +31,7 @@ export default function Pagination() {
     const bg = useColorModeValue('gray.50', 'transparent')
     const useRatingState = useHookstate(ratingState).get()
     const useSteamRatingState = useHookstate(steamRatingState).get()
-    const [isSmallerThan768] = useMediaQuery('(max-width: 768px)')
+    const [isSmallerThan768] = useMediaQuery(['(max-width: 768px)'])
 
     const setPageSize = async (limit: number) => await getWithFilters(
         gamesState,
@@ -99,22 +96,24 @@ export default function Pagination() {
         }}>
             <GridItem area={"backArrows"}>
                 <Flex>
-                    <Tooltip label="First Page">
+                    <Tooltip content="First Page">
                         <IconButton
                             aria-label={'First Page'}
                             onMouseDown={() => gotoPage(0)}
-                            isDisabled={pageIndex <= 1}
-                            icon={<ArrowLeftIcon h={3} w={3} />}
+                            disabled={pageIndex <= 1}
                             mr={4}
-                        />
+                        >
+                            <LuChevronsLeft />
+                        </IconButton>
                     </Tooltip>
-                    <Tooltip label="Previous Page">
+                    <Tooltip content="Previous Page">
                         <IconButton
                             aria-label={'Previous Page'}
                             onMouseDown={previousPage}
-                            isDisabled={pageIndex <= 1}
-                            icon={<ChevronLeftIcon h={6} w={6} />}
-                        />
+                            disabled={pageIndex <= 1}
+                        >
+                            <LuChevronLeft />
+                        </IconButton>
                     </Tooltip>
                 </Flex>
             </GridItem>
@@ -133,70 +132,79 @@ export default function Pagination() {
             {!isSmallerThan768 &&
                 <GridItem area={"goToPage"}>
                     <Text mb={'1'}>Go to Page:</Text>
-                    <NumberInput
+                    <NumberInputRoot
                         bg={bg}
                         rounded={'md'}
                         w={{ base: 20, md: 28 }}
                         min={1}
                         max={pageCount}
-                        value={pageIndex}
-                        onChange={(value) => {
-                            const page = value ? Number(value) : 1
+                        value={String(pageIndex)}
+                        onValueChange={(e) => {
+                            const page = e.value ? Number(e.value) : 1
                             gotoPage(page)
                         }}
                     >
-                        <NumberInputField />
-                        <NumberInputStepper>
-                            <NumberIncrementStepper />
-                            <NumberDecrementStepper />
-                        </NumberInputStepper>
-                    </NumberInput>
+                        <NumberInputField
+                            borderWidth="1px"
+                            borderStyle="solid"
+                            borderColor={{ base: "gray.500", _invalid: "red.500" }}
+                        />
+                    </NumberInputRoot>
 
                 </GridItem>
             }
             <GridItem area={"countPerPage"}>
                 <Text mb={'1'}>Count Per Page:</Text>
-                <Select
+                <NativeSelect.Root
                     ml={{
                         base: '4',
                         md: '0'
                     }}
-                    bg={bg}
-                    rounded={'md'}
                     w={{ base: 20, md: 32 }}
-                    value={pageSize}
-                    onChange={(e) => {
-                        setPageSize(Number(e.target.value))
-                    }}
                 >
-                    {[10, 20, 30, 40, 50].map((pageSize) => (
-                        <option key={pageSize} value={pageSize}>
-                            {pageSize}
-                        </option>
-                    ))}
-                </Select>
+                    <NativeSelect.Field
+                        rounded={'md'}
+                        borderWidth={'1px'}
+                        borderStyle={'solid'}
+                        borderColor={'gray.500'}
+                        bg={bg}
+                        value={pageSize}
+                        onChange={(e: any) => {
+                            setPageSize(Number(e.target.value))
+                        }}
+                    >
+                        {[10, 20, 30, 40, 50].map((pageSize) => (
+                            <option key={pageSize} value={pageSize}>
+                                {pageSize}
+                            </option>
+                        ))}
+                    </NativeSelect.Field>
+                    <NativeSelect.Indicator />
+                </NativeSelect.Root>
             </GridItem>
             <GridItem area={'gamesFound'}>
                 <Text>Games Found: {games.count.totalGames}</Text>
             </GridItem>
             <GridItem area={"forwardArrows"}>
                 <Flex justifySelf={'end'}>
-                    <Tooltip label="Next Page">
+                    <Tooltip content="Next Page">
                         <IconButton
                             aria-label={'Next Page'}
                             onMouseDown={nextPage}
-                            isDisabled={pageIndex >= pageCount}
-                            icon={<ChevronRightIcon h={6} w={6} />}
-                        />
+                            disabled={pageIndex >= pageCount}
+                        >
+                            <LuChevronRight />
+                        </IconButton>
                     </Tooltip>
-                    <Tooltip label="Last Page">
+                    <Tooltip content="Last Page">
                         <IconButton
                             aria-label={'Last Page'}
                             onMouseDown={() => gotoPage(pageCount)}
-                            isDisabled={pageIndex >= pageCount}
-                            icon={<ArrowRightIcon h={3} w={3} />}
+                            disabled={pageIndex >= pageCount}
                             ml={4}
-                        />
+                        >
+                            <LuChevronsRight />
+                        </IconButton>
                     </Tooltip>
                 </Flex>
             </GridItem>
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index e6ce6dd..d051828 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -1,6 +1,7 @@
 import React, { FormEvent } from 'react'
-import { Button, FormControl, Input, InputGroup, InputRightElement, useColorModeValue } from '@chakra-ui/react'
-import { SearchIcon } from '@chakra-ui/icons'
+import { Button, Input, Group } from '@chakra-ui/react'
+import { Field } from './ui/field'
+import { LuSearch } from 'react-icons/lu'
 import { GameList } from '../models/game'
 import { useHookstate } from '@hookstate/core'
 import { gameDashboardState } from '../stateManagement/gameState'
@@ -14,6 +15,7 @@ import { adminMode } from '../stateManagement/userState'
 import getWithFilters from '../componentUtils/getWithFilters'
 import {ChangeActiveFilterHeader} from "../componentUtils/changeActiveFilterHeader";
 import {ratingState, steamRatingState} from "../stateManagement/ratingState";
+import {useColorModeValue} from "./ui/color-mode";
 
 export default function Search() {
   const gamesState = useHookstate(gameDashboardState)
@@ -54,16 +56,16 @@ export default function Search() {
   return (
       <>
         <form onSubmit={handleSubmit}>
-          <FormControl mb="3">
-            <InputGroup>
+          <Field mb="3">
+            <Group attached w="full">
               <Input
                   autoFocus
                   id="searchParams"
                   name="searchParams"
                   bg={bg}
                   type="text"
-                  border="1px"
-                  borderColor="gray.500"
+                  borderWidth="1px" borderStyle="solid"
+                  borderColor={{ base: "gray.500", _invalid: "red.500" }}
                   rounded="md"
                   placeholder="Search..."
                   value={games.searchParams}
@@ -71,18 +73,16 @@ export default function Search() {
                     handleInputChange('searchParams', e.target.value)
                   }}
               />
-              <InputRightElement>
-                <Button
-                    isLoading={submitLoading}
-                    type="submit"
-                    colorScheme="blue"
-                >
-                  <SearchIcon/>
-                </Button>
-              </InputRightElement>
-            </InputGroup>
-          </FormControl>
+              <Button
+                  loading={submitLoading}
+                  type="submit"
+                  colorPalette="blue"
+              >
+                <LuSearch/>
+              </Button>
+            </Group>
+          </Field>
         </form>
       </>
   )
-}
\ No newline at end of file
+}
diff --git a/src/components/SearchModal.tsx b/src/components/SearchModal.tsx
index c124d13..4d9eb11 100644
--- a/src/components/SearchModal.tsx
+++ b/src/components/SearchModal.tsx
@@ -1,8 +1,6 @@
 import React from 'react'
-import {
-  Modal, ModalBody, ModalCloseButton, ModalContent,
-  ModalHeader,
-} from '@chakra-ui/react'
+import { Dialog } from '@chakra-ui/react'
+import {DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot} from './ui/dialog'
 import { useHookstate } from '@hookstate/core'
 import { openAndCloseSearchDialogue } from '../stateManagement/loadingState'
 import Search from './Search'
@@ -16,14 +14,14 @@ export default function SearchModal() {
   }
 
   return (
-    <Modal isOpen={isOpen} onClose={handleClose}>
-      <ModalContent>
-        <ModalHeader>Search</ModalHeader>
-        <ModalCloseButton onMouseDown={() => handleClose()}/>
-        <ModalBody>
+    <DialogRoot open={isOpen} onOpenChange={(e) => { if (!e.open) handleClose() }}>
+      <DialogContent>
+        <DialogHeader>Search</DialogHeader>
+        <DialogCloseTrigger onClick={() => handleClose()}/>
+        <DialogBody>
           <Search />
-        </ModalBody>
-      </ModalContent>
-    </Modal>
+        </DialogBody>
+      </DialogContent>
+    </DialogRoot>
   )
 }
diff --git a/src/components/dashboardComponents/DashboardLoadingModal.tsx b/src/components/dashboardComponents/DashboardLoadingModal.tsx
index e8e35a3..9f774c4 100644
--- a/src/components/dashboardComponents/DashboardLoadingModal.tsx
+++ b/src/components/dashboardComponents/DashboardLoadingModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Center, CircularProgress } from '@chakra-ui/react'
+import { Center, ProgressCircle } from '@chakra-ui/react'
 
 export default function DashboardLoadingModal() {
 
@@ -9,7 +9,12 @@ export default function DashboardLoadingModal() {
         w="100%"
         mt={'1rem'}
       >
-        <CircularProgress isIndeterminate color="blue.500"/>
+        <ProgressCircle.Root value={null} size="md">
+          <ProgressCircle.Circle>
+            <ProgressCircle.Track />
+            <ProgressCircle.Range />
+          </ProgressCircle.Circle>
+        </ProgressCircle.Root>
       </Center>
     </>
   )
diff --git a/src/components/helperComponents/ResetFilterButton.tsx b/src/components/helperComponents/ResetFilterButton.tsx
index f1bcd2c..7fd1151 100644
--- a/src/components/helperComponents/ResetFilterButton.tsx
+++ b/src/components/helperComponents/ResetFilterButton.tsx
@@ -9,12 +9,12 @@ import { ratingState, steamRatingState } from "../../stateManagement/ratingState
 
 interface Props {
     text?: string
-    size?: string
-    variant?: string
-    colorScheme?: string
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+    variant?: "solid" | "subtle" | "surface" | "outline" | "ghost" | "plain"
+    colorPalette?: string
 }
 
-const ResetFilterButton = ({ text = "Reset Search and Filters", size = 'md', variant = 'solid', colorScheme = 'gray' }: Props) => {
+const ResetFilterButton = ({ text = "Reset Search and Filters", size = 'md', variant = 'solid', colorPalette = 'gray' }: Props) => {
     const gameState = useHookstate(gameDashboardState)
     const games = gameState.get()
     const admin = useHookstate(adminMode).get()
@@ -58,7 +58,7 @@ const ResetFilterButton = ({ text = "Reset Search and Filters", size = 'md', var
     }
 
     return (
-        <Button onMouseDown={resetFilters} size={size} variant={variant} colorScheme={colorScheme}>
+        <Button onMouseDown={resetFilters} size={size} variant={variant} colorPalette={colorPalette}>
             {text}
         </Button>
     )
diff --git a/src/components/helperComponents/SteamAndDeckLogo.tsx b/src/components/helperComponents/SteamAndDeckLogo.tsx
index 602216d..7dc11ad 100644
--- a/src/components/helperComponents/SteamAndDeckLogo.tsx
+++ b/src/components/helperComponents/SteamAndDeckLogo.tsx
@@ -9,17 +9,19 @@ const SteamAndDeckLogo = (props: ISteamAndDeckLogo) => {
     return (
         <div>
             <Box
-                as="svg"
-                role="img"
+                asChild
                 width={props.size}
                 height={props.size}
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 1080 1080"
-                fill="#1f2127"
                 _hover={{
-                    fill: "brand.accent",
+                    fill: "blue.500",
                 }}
             >
+                <svg
+                    role="img"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 1080 1080"
+                    fill="#1f2127"
+                >
                 <title>SteamAndDeckLogo</title>
                 <path
                     fill="url(#_Radial1)"
@@ -97,6 +99,7 @@ const SteamAndDeckLogo = (props: ISteamAndDeckLogo) => {
                         <stop offset="1" stopColor="#00A6FF" stopOpacity="0.6"></stop>
                     </linearGradient>
                 </defs>
+                </svg>
             </Box>
         </div>
     );