diff --git a/src/App.tsx b/src/App.tsx
index 6b2113b..e88625d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Suspense, lazy, useState } from 'react'
 
 import styled from '@emotion/styled'
 
@@ -12,8 +12,8 @@ import SettingsProvider from './context/SettingsProvider'
 
 import Wrapper from './Wrapper'
 
-const Weather = React.lazy(() => import('./components/Weather'))
-const Preferences = React.lazy(() => import('./components/Preferences'))
+const Weather = lazy(() => import('./components/Weather'))
+const Preferences = lazy(() => import('./components/Preferences'))
 
 const Layout = styled.div`
   position: relative;
@@ -26,8 +26,8 @@ const Main = styled.div<{ menuOpen: boolean }>`
   display: ${props => (props.menuOpen ? 'none' : 'block')};
 `
 
-const App = (): JSX.Element => {
-  const [menuOpen, setMenuOpen] = React.useState(false)
+const App = () => {
+  const [menuOpen, setMenuOpen] = useState(false)
 
   return (
     <SettingsProvider>
@@ -36,16 +36,16 @@ const App = (): JSX.Element => {
         <Layout>
           <DateTime />
           <Main menuOpen={menuOpen}>
-            <React.Suspense fallback={<Loading />}>
+            <Suspense fallback={<Loading />}>
               <Weather />
-            </React.Suspense>
+            </Suspense>
             <Greeting />
             <Search />
             <Bookmarks />
           </Main>
-          <React.Suspense fallback={<Loading />}>
+          <Suspense fallback={<Loading />}>
             <Preferences menuOpen={menuOpen} />
-          </React.Suspense>
+          </Suspense>
         </Layout>
       </Wrapper>
     </SettingsProvider>
diff --git a/src/Wrapper.tsx b/src/Wrapper.tsx
index 7b9b1b8..7813479 100644
--- a/src/Wrapper.tsx
+++ b/src/Wrapper.tsx
@@ -1,4 +1,5 @@
-import * as React from 'react'
+import type { ReactNode } from 'react'
+import { useContext } from 'react'
 
 import { Global, ThemeProvider } from '@emotion/react'
 
@@ -11,11 +12,11 @@ import { globalStyles } from './theme'
 const matchMediaFallback = (): boolean =>
   window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
 
-const Wrapper = ({ children }: { children: React.ReactNode }): JSX.Element => {
+const Wrapper = ({ children }: { children: ReactNode }) => {
   const {
     settings: { prefersDarkMode = matchMediaFallback() },
     setSetting,
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   const theme = useTheme()
 
diff --git a/src/components/Bookmark.tsx b/src/components/Bookmark.tsx
index 8a9e585..aa43747 100644
--- a/src/components/Bookmark.tsx
+++ b/src/components/Bookmark.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useContext, useState } from 'react'
 
 import styled from '@emotion/styled'
 import { faLink } from '@fortawesome/free-solid-svg-icons'
@@ -45,11 +45,11 @@ type Props = {
   bookmark: BookmarkLink
 }
 
-const Bookmark = ({ bookmark }: Props): JSX.Element => {
-  const [error, setError] = React.useState(false)
+const Bookmark = ({ bookmark }: Props) => {
+  const [error, setError] = useState(false)
   const {
     settings: { showFavicons = true },
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   return (
     <Style href={bookmark.url} key={bookmark.id}>
diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx
index da5c8e4..19132ca 100644
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react'
+import { useContext } from 'react'
 
 import styled from '@emotion/styled'
 
-import type { BookmarkLink, BookmarkLinks } from '../types'
+import type { BookmarkLink } from '../types'
 
 import { SettingsContext } from '../context/SettingsProvider'
 
@@ -36,7 +36,7 @@ const Links = styled.div`
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 `
 
-const getUniqueCategories = (bookmarks: BookmarkLinks) => [
+const getUniqueCategories = (bookmarks: BookmarkLink[]) => [
   ...new Set(
     bookmarks
       ?.map(bookmark => bookmark.category)
@@ -45,17 +45,17 @@ const getUniqueCategories = (bookmarks: BookmarkLinks) => [
   ),
 ]
 
-const mapItems = (bookmarks: BookmarkLinks) =>
+const mapItems = (bookmarks: BookmarkLink[]) =>
   bookmarks
     ?.sort((a: BookmarkLink, b: BookmarkLink) => a.label.localeCompare(b.label))
     .map((bookmark: BookmarkLink) => (
       <Bookmark key={bookmark.url} bookmark={bookmark} />
     ))
 
-const Bookmarks = (): JSX.Element | null => {
+const Bookmarks = () => {
   const {
     settings: { bookmarks },
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   if (!bookmarks) {
     return null
diff --git a/src/components/DarkModeToggle.tsx b/src/components/DarkModeToggle.tsx
index a9a9785..09d9f22 100644
--- a/src/components/DarkModeToggle.tsx
+++ b/src/components/DarkModeToggle.tsx
@@ -35,7 +35,7 @@ type Props = {
   toggleDarkMode: () => void
 }
 
-const DarkModeToggle = ({ isDarkMode, toggleDarkMode }: Props): JSX.Element => (
+const DarkModeToggle = ({ isDarkMode, toggleDarkMode }: Props) => (
   <Style>
     <ToggleArea checked={!!isDarkMode} onChange={toggleDarkMode}>
       <FontAwesomeIcon className="dark" icon={faMoon} fixedWidth />
diff --git a/src/components/DateTime.tsx b/src/components/DateTime.tsx
index 09fe693..fd9829d 100644
--- a/src/components/DateTime.tsx
+++ b/src/components/DateTime.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useState } from 'react'
 
 import { format } from 'date-fns'
 
@@ -16,10 +16,10 @@ const Style = styled.div`
   font-weight: 600;
 `
 
-const DateTime = (): JSX.Element => {
-  const [time, setTime] = React.useState(new Date())
+const DateTime = () => {
+  const [time, setTime] = useState(new Date())
 
-  React.useEffect(() => {
+  useEffect(() => {
     const timer = setTimeout(() => {
       setTime(new Date())
     }, 1000)
diff --git a/src/components/Greeting.tsx b/src/components/Greeting.tsx
index 97eea85..7403e22 100644
--- a/src/components/Greeting.tsx
+++ b/src/components/Greeting.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useContext } from 'react'
 
 import styled from '@emotion/styled'
 
@@ -10,10 +10,10 @@ const Style = styled.h1`
   line-height: 1em;
 `
 
-const Greeting = (): JSX.Element => {
+const Greeting = () => {
   const {
     settings: { name },
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   return (
     <Style>
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index d2c4b5c..9ebeaf0 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -13,7 +13,7 @@ const Style = styled.h1`
   }
 `
 
-const Loading = (): JSX.Element => (
+const Loading = () => (
   <Style>
     <FontAwesomeIcon icon={faSpinner} spin fixedWidth />
   </Style>
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
index 7db3c00..bb93b39 100644
--- a/src/components/Menu.tsx
+++ b/src/components/Menu.tsx
@@ -25,7 +25,7 @@ const Menu = ({
 }: {
   menuOpen: boolean
   onClick: () => void
-}): JSX.Element => (
+}) => (
   <Style menuOpen={menuOpen} onClick={onClick}>
     <FontAwesomeIcon icon={faBars} size="2x" />
   </Style>
diff --git a/src/components/Preferences/BackupRestore.tsx b/src/components/Preferences/BackupRestore.tsx
index da77c94..d1a18bb 100644
--- a/src/components/Preferences/BackupRestore.tsx
+++ b/src/components/Preferences/BackupRestore.tsx
@@ -1,4 +1,5 @@
-import * as React from 'react'
+import type { ChangeEvent } from 'react'
+import { useContext } from 'react'
 
 import { setMany, clear } from 'idb-keyval'
 
@@ -27,10 +28,10 @@ const Style = styled.div`
   }
 `
 
-const BackupRestore = (): JSX.Element => {
-  const { settings, setSettings, store } = React.useContext(SettingsContext)
+const BackupRestore = () => {
+  const { settings, setSettings, store } = useContext(SettingsContext)
 
-  const onChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+  const onChange = async (event: ChangeEvent<HTMLInputElement>) => {
     if (event.target.files) {
       const newSettings = (await readJsonFile(
         event.target.files[0]
diff --git a/src/components/Preferences/BookmarkRow.tsx b/src/components/Preferences/BookmarkRow.tsx
index 1ce6c1e..85d84c8 100644
--- a/src/components/Preferences/BookmarkRow.tsx
+++ b/src/components/Preferences/BookmarkRow.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react'
+import { useEffect, type KeyboardEvent, useState, useContext } from 'react'
 
 import axios from 'axios'
 
 import styled from '@emotion/styled'
 
-import type { BookmarkLink, BookmarkLinks } from '../../types'
+import type { BookmarkLink } from '../../types'
 
 import { SettingsContext } from '../../context/SettingsProvider'
 
@@ -38,16 +38,16 @@ type Props = {
   bookmark?: BookmarkLink
 }
 
-const BookmarkRow = ({ bookmark }: Props): JSX.Element => {
-  const [label, setLabel] = React.useState(bookmark?.label ?? '')
-  const [url, setUrl] = React.useState(bookmark?.url ?? '')
-  const [category, setCategory] = React.useState(bookmark?.category ?? '')
-  const [mode, setMode] = React.useState('remove')
+const BookmarkRow = ({ bookmark }: Props) => {
+  const [label, setLabel] = useState(bookmark?.label ?? '')
+  const [url, setUrl] = useState(bookmark?.url ?? '')
+  const [category, setCategory] = useState(bookmark?.category ?? '')
+  const [mode, setMode] = useState('remove')
 
   const {
     settings: { bookmarks },
     setSetting,
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   const isExists = () => !!bookmarks?.find((f: BookmarkLink) => f.url === url)
 
@@ -79,7 +79,7 @@ const BookmarkRow = ({ bookmark }: Props): JSX.Element => {
       const newBookmark = { id: Date.now(), label, url, icon, category }
 
       if (bookmarks !== undefined) {
-        setSetting<BookmarkLinks>('bookmarks', [...bookmarks, newBookmark])
+        setSetting<BookmarkLink[]>('bookmarks', [...bookmarks, newBookmark])
       } else {
         setSetting('bookmarks', [newBookmark])
       }
@@ -113,7 +113,7 @@ const BookmarkRow = ({ bookmark }: Props): JSX.Element => {
     setMode('remove')
   }
 
-  const onEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  const onEnter = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       switch (mode) {
         case 'update':
@@ -129,7 +129,7 @@ const BookmarkRow = ({ bookmark }: Props): JSX.Element => {
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     const determineMode = () => {
       if (!bookmark) {
         setMode('add')
diff --git a/src/components/Preferences/Bookmarks.tsx b/src/components/Preferences/Bookmarks.tsx
index eecb523..dacca43 100644
--- a/src/components/Preferences/Bookmarks.tsx
+++ b/src/components/Preferences/Bookmarks.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useContext } from 'react'
 
 import type { BookmarkLink } from '../../types'
 
@@ -6,10 +6,10 @@ import { SettingsContext } from '../../context/SettingsProvider'
 
 import BookmarkRow from './BookmarkRow'
 
-const Bookmarks = (): JSX.Element => {
+const Bookmarks = () => {
   const {
     settings: { bookmarks },
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   return (
     <>
diff --git a/src/components/Preferences/Button.tsx b/src/components/Preferences/Button.tsx
index 8ae397f..6c6d36c 100644
--- a/src/components/Preferences/Button.tsx
+++ b/src/components/Preferences/Button.tsx
@@ -1,4 +1,5 @@
-import * as React from 'react'
+import type { MouseEvent } from 'react'
+import { useContext, useEffect, useState } from 'react'
 
 import styled from '@emotion/styled'
 import { faSpinner } from '@fortawesome/free-solid-svg-icons'
@@ -47,7 +48,7 @@ const Style = styled.button<{ isDisabled?: boolean }>`
 `
 
 type Props = {
-  onClick?: (e: React.MouseEvent) => void
+  onClick?: (e: MouseEvent) => void
   disabled?: boolean
   className?: 'warning' | 'danger' | 'success'
   children: string
@@ -60,11 +61,11 @@ const Button = ({
   className,
   children,
   setClick = true,
-}: Props): JSX.Element => {
-  const [clicked, setClicked] = React.useState(false)
-  const { settings } = React.useContext(SettingsContext)
+}: Props) => {
+  const [clicked, setClicked] = useState(false)
+  const { settings } = useContext(SettingsContext)
 
-  React.useEffect(() => {
+  useEffect(() => {
     setClicked(false)
   }, [settings])
 
diff --git a/src/components/Preferences/Name.tsx b/src/components/Preferences/Name.tsx
index ab6aa62..702aa61 100644
--- a/src/components/Preferences/Name.tsx
+++ b/src/components/Preferences/Name.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react'
+import { useContext } from 'react'
 
 import { SettingsContext } from '../../context/SettingsProvider'
 
 import TextInput from './TextInput'
 
-const Name = (): JSX.Element => {
+const Name = () => {
   const {
     settings: { name },
     setSetting,
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   return (
     <>
       <label>Name</label>
       <TextInput
-        value={name !== undefined ? name : ''}
+        value={name ?? ''}
         placeholder="Enter your name"
         onChange={e => setSetting('name', e.target.value)}
       />
diff --git a/src/components/Preferences/QuickSettings.tsx b/src/components/Preferences/QuickSettings.tsx
index 79d838c..47834db 100644
--- a/src/components/Preferences/QuickSettings.tsx
+++ b/src/components/Preferences/QuickSettings.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useContext } from 'react'
 
 import styled from '@emotion/styled'
 
@@ -10,11 +10,11 @@ const Style = styled.div`
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 `
 
-const QuickSettings = (): JSX.Element => {
+const QuickSettings = () => {
   const {
     settings: { weather = false, showFavicons = true },
     setSetting,
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   return (
     <Style>
diff --git a/src/components/Preferences/SearchEngine.tsx b/src/components/Preferences/SearchEngine.tsx
index 3a050a3..68d7177 100644
--- a/src/components/Preferences/SearchEngine.tsx
+++ b/src/components/Preferences/SearchEngine.tsx
@@ -1,4 +1,5 @@
-import * as React from 'react'
+import type { FunctionComponentElement } from 'react'
+import { createElement, useContext } from 'react'
 
 import styled from '@emotion/styled'
 
@@ -8,11 +9,11 @@ import { DuckDuckGo, Google, Startpage } from '../../icons'
 
 const searchIconMap: Record<
   string,
-  React.FunctionComponentElement<Record<string, never>>
+  FunctionComponentElement<Record<string, never>>
 > = {
-  [Engine.GOOGLE]: React.createElement(Google),
-  [Engine.DUCKDUCKGO]: React.createElement(DuckDuckGo),
-  [Engine.STARTPAGE]: React.createElement(Startpage),
+  [Engine.GOOGLE]: createElement(Google),
+  [Engine.DUCKDUCKGO]: createElement(DuckDuckGo),
+  [Engine.STARTPAGE]: createElement(Startpage),
 }
 
 const Product = styled.button<{ isActive: boolean }>`
@@ -34,11 +35,11 @@ const Product = styled.button<{ isActive: boolean }>`
   }
 `
 
-const SearchEngine = (): JSX.Element => {
+const SearchEngine = () => {
   const {
     setSetting,
     settings: { searchEngine = 'Google' },
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   return (
     <>
diff --git a/src/components/Preferences/TextInput.tsx b/src/components/Preferences/TextInput.tsx
index 40b1b55..2d1c3a2 100644
--- a/src/components/Preferences/TextInput.tsx
+++ b/src/components/Preferences/TextInput.tsx
@@ -1,3 +1,5 @@
+import type { ChangeEvent, KeyboardEvent } from 'react'
+
 import styled from '@emotion/styled'
 
 const Style = styled.input`
@@ -8,9 +10,9 @@ const Style = styled.input`
 type Props = {
   defaultValue?: string
   placeholder?: string
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
   value?: string
-  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void
+  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void
 }
 
 const TextInput = ({
@@ -19,7 +21,7 @@ const TextInput = ({
   onChange,
   value,
   onKeyDown,
-}: Props): JSX.Element => (
+}: Props) => (
   <Style
     type="text"
     autoComplete="off"
diff --git a/src/components/Preferences/Theme.tsx b/src/components/Preferences/Theme.tsx
index bb6315d..8fdd5b4 100644
--- a/src/components/Preferences/Theme.tsx
+++ b/src/components/Preferences/Theme.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useContext } from 'react'
 
 import type { Theme } from '@emotion/react'
 import styled from '@emotion/styled'
@@ -46,12 +46,12 @@ type AvailableOption =
   | 'highlight'
   | 'inputFocus'
 
-const Themer = (): JSX.Element => {
+const Themer = () => {
   const {
     settings: { prefersDarkMode = matchMediaFallback() },
     setSetting,
     deleteSetting,
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   const theme = useTheme()
 
diff --git a/src/components/Preferences/UploadInput.tsx b/src/components/Preferences/UploadInput.tsx
index 42845d0..cc36c10 100644
--- a/src/components/Preferences/UploadInput.tsx
+++ b/src/components/Preferences/UploadInput.tsx
@@ -1,19 +1,16 @@
-import React from 'react'
+import type { ChangeEventHandler } from 'react'
+import { useRef } from 'react'
 
 import Button from './Button'
 
 interface Props {
   label?: string
   accept?: string
-  onChange: React.ChangeEventHandler
+  onChange: ChangeEventHandler
 }
 
-const UploadInput = ({
-  label = 'Upload a file',
-  accept,
-  onChange,
-}: Props): JSX.Element => {
-  const input = React.useRef<HTMLInputElement>(null)
+const UploadInput = ({ label = 'Upload a file', accept, onChange }: Props) => {
+  const input = useRef<HTMLInputElement>(null)
 
   const selectFiles = () => {
     if (input.current !== null) {
diff --git a/src/components/Preferences/index.tsx b/src/components/Preferences/index.tsx
index b810538..25fa346 100644
--- a/src/components/Preferences/index.tsx
+++ b/src/components/Preferences/index.tsx
@@ -15,7 +15,7 @@ const Setting = styled.section`
   margin-bottom: 2em;
 `
 
-const Preferences = ({ menuOpen }: { menuOpen: boolean }): JSX.Element => (
+const Preferences = ({ menuOpen }: { menuOpen: boolean }) => (
   <Style menuOpen={menuOpen}>
     <h1>Preferences</h1>
     <Setting>
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index dcb0b81..3b60304 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useContext, useEffect, useState } from 'react'
 
 import axios from 'axios'
 import { InputSuggestions } from 'react-input-suggestions'
@@ -60,17 +60,17 @@ const fetchSuggestions = async (
   return []
 }
 
-const Search = (): JSX.Element => {
+const Search = () => {
   const {
     settings: { searchEngine = Engine.GOOGLE },
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
-  const [searchParam, setSearchParam] = React.useState('')
-  const [suggestions, setSuggestions] = React.useState<string[]>([])
+  const [searchParam, setSearchParam] = useState('')
+  const [suggestions, setSuggestions] = useState<string[]>([])
 
   const engine = searchEngines.find(f => f.label === searchEngine)
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (searchParam) {
       ;(async () => {
         const results = await fetchSuggestions(searchParam, engine)
diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
index 1274405..3ce4e55 100644
--- a/src/components/Switch.tsx
+++ b/src/components/Switch.tsx
@@ -1,3 +1,5 @@
+import type { ChangeEvent, ReactNode } from 'react'
+
 import styled from '@emotion/styled'
 
 const Style = styled.label<{ checked: boolean }>`
@@ -39,17 +41,12 @@ const Style = styled.label<{ checked: boolean }>`
 
 type Props = {
   checked?: boolean
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
   className?: string
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
-const Switch = ({
-  checked,
-  onChange,
-  className,
-  children,
-}: Props): JSX.Element => (
+const Switch = ({ checked, onChange, className, children }: Props) => (
   <Style className={className} checked={!!checked}>
     {children}
     <input type="checkbox" checked={checked} onChange={onChange} />
diff --git a/src/components/Weather.tsx b/src/components/Weather.tsx
index 416e4c3..201485b 100644
--- a/src/components/Weather.tsx
+++ b/src/components/Weather.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useContext, useEffect, useState } from 'react'
 
 import axios from 'axios'
 
@@ -16,15 +16,15 @@ const Temp = styled.span`
   color: ${props => props.theme.colors.highlight};
 `
 
-const Weather = (): JSX.Element | null => {
+const Weather = () => {
   const {
     settings: { weather = false },
-  } = React.useContext(SettingsContext)
-  const [location, setLocation] = React.useState({
+  } = useContext(SettingsContext)
+  const [location, setLocation] = useState({
     longitude: 0,
     latitude: 0,
   })
-  const [conditions, setConditions] = React.useState({
+  const [conditions, setConditions] = useState({
     main: null,
     description: null,
     temperature: 0,
@@ -32,7 +32,7 @@ const Weather = (): JSX.Element | null => {
     icon: '',
   })
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (weather) {
       navigator.geolocation.getCurrentPosition(r => {
         setLocation({
@@ -43,7 +43,7 @@ const Weather = (): JSX.Element | null => {
     }
   }, [weather])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (location !== null) {
       ;(async () => {
         const { data } = await axios.get(
diff --git a/src/context/SettingsProvider.tsx b/src/context/SettingsProvider.tsx
index 5d9fb5c..3dcdff3 100644
--- a/src/context/SettingsProvider.tsx
+++ b/src/context/SettingsProvider.tsx
@@ -1,10 +1,11 @@
-import * as React from 'react'
+import type { ReactNode } from 'react'
+import { createContext, useState, useEffect, useMemo } from 'react'
 
 import { keys, set, del, getMany, createStore } from 'idb-keyval'
 
 import type { Theme } from '@emotion/react'
 
-import type { BookmarkLink, BookmarkLinks } from '../types'
+import type { BookmarkLink } from '../types'
 import type { UseStore } from 'idb-keyval'
 
 const store = createStore('startpage', 'user-preferences')
@@ -20,14 +21,14 @@ const getSettings = async () => {
 }
 
 export interface SettingsProviderProps {
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export interface Settings {
   name?: string
   searchEngine?: string
   weather?: boolean
-  bookmarks?: BookmarkLinks
+  bookmarks?: BookmarkLink[]
   themeLight?: Theme
   themeDark?: Theme
   prefersDarkMode?: boolean
@@ -45,7 +46,7 @@ interface SettingsContextType {
   store?: UseStore
 }
 
-export const SettingsContext = React.createContext<SettingsContextType>({
+export const SettingsContext = createContext<SettingsContextType>({
   settings: {},
   setSetting: () => null,
   deleteSetting: () => null,
@@ -53,10 +54,10 @@ export const SettingsContext = React.createContext<SettingsContextType>({
   store: undefined,
 })
 
-const SettingsProvider = ({ children }: SettingsProviderProps): JSX.Element => {
-  const [settings, setSettings] = React.useState({})
+const SettingsProvider = ({ children }: SettingsProviderProps) => {
+  const [settings, setSettings] = useState({})
 
-  React.useEffect(() => {
+  useEffect(() => {
     ;(async () => {
       const s = await getSettings()
       setSettings(s)
@@ -84,7 +85,10 @@ const SettingsProvider = ({ children }: SettingsProviderProps): JSX.Element => {
     setSettings(s)
   }
 
-  const value = { settings, setSetting, deleteSetting, setSettings, store }
+  const value = useMemo(
+    () => ({ settings, setSetting, deleteSetting, setSettings, store }),
+    []
+  )
 
   return (
     <SettingsContext.Provider value={value}>
diff --git a/src/icons/DuckDuckGo.tsx b/src/icons/DuckDuckGo.tsx
index 63fd8d3..af821c8 100644
--- a/src/icons/DuckDuckGo.tsx
+++ b/src/icons/DuckDuckGo.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react'
+import { useContext } from 'react'
 
 import { SettingsContext } from '../context/SettingsProvider'
 
-const DuckDuckGo = (): JSX.Element => {
+const DuckDuckGo = () => {
   const {
     settings: { prefersDarkMode },
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   return (
     <svg
diff --git a/src/icons/Google.tsx b/src/icons/Google.tsx
index 4f703ae..489c3a6 100644
--- a/src/icons/Google.tsx
+++ b/src/icons/Google.tsx
@@ -1,4 +1,4 @@
-const Google = (): JSX.Element => (
+const Google = () => (
   <svg
     id="Layer_1"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Startpage.tsx b/src/icons/Startpage.tsx
index 2598d94..9c8e626 100644
--- a/src/icons/Startpage.tsx
+++ b/src/icons/Startpage.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react'
+import { useContext } from 'react'
 
 import { SettingsContext } from '../context/SettingsProvider'
 
-const Startpage = (): JSX.Element => {
+const Startpage = () => {
   const {
     settings: { prefersDarkMode },
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   return (
     <svg
diff --git a/src/index.html b/src/index.html
index ab8cc83..1790aae 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,18 +1,19 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <title>Start 🚀</title>
+    <meta charset="utf-8" />
+    <meta name="description" content="Start Page" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+  </head>
 
-<head>
-  <title>Start 🚀</title>
-  <meta charset="utf-8" />
-  <meta name="description" content="Start Page" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" />
-  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet" />
-</head>
-
-<body>
-  <main id="app"></main>
-  <script type="module" src="./index.tsx"></script>
-</body>
-
-</html>
\ No newline at end of file
+  <body>
+    <main id="app"></main>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>
diff --git a/src/types.ts b/src/types.ts
index 2a93557..6d67669 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,15 +1,13 @@
-export type SearchEngine = {
+export interface SearchEngine {
   label: string
   url: string
   suggestions: string
 }
 
-export type BookmarkLink = {
+export interface BookmarkLink {
   id: number
   label: string
   url: string
   icon?: string | null
   category?: string
 }
-
-export type BookmarkLinks = BookmarkLink[]