diff --git a/app/SearchBox.tsx b/app/SearchBox.tsx
index 3e3362dde..5ddee2cd5 100644
--- a/app/SearchBox.tsx
+++ b/app/SearchBox.tsx
@@ -195,7 +195,8 @@ export default function SearchBox() {
               >
                 <img
                   src={infoCircleSvg}
-                  style={{ color: 'white', height: 24, width: 24 }}
+                  alt="search info"
+                  className="info-icon"
                   onClick={handleClickFn}
                 />
               </InputGroup.Text>
diff --git a/app/components/LiquidityPoolTable.tsx b/app/components/LiquidityPoolTable.tsx
index baa525034..c76483973 100644
--- a/app/components/LiquidityPoolTable.tsx
+++ b/app/components/LiquidityPoolTable.tsx
@@ -111,7 +111,6 @@ export default function LiquidityPoolTable({
             <th>
               <FormattedMessage id="liquidity-pool.trustlines" />
             </th>
-            <th />
           </tr>
         </thead>
         <tbody>
diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx
index 1347b1fe2..4e90ea4c6 100644
--- a/app/components/layout/Header.tsx
+++ b/app/components/layout/Header.tsx
@@ -9,6 +9,7 @@ import { LinkContainer } from 'react-router-bootstrap'
 import logoImg from '../../img/logo.png'
 import LanguageSelector from './LanguageSelector'
 import NetworkSelector from './NetworkSelector'
+import ThemeSwitcher from './ThemeSwitcher'
 import type { NetworkDetails } from '~/lib/stellar/networks'
 
 interface HeaderProps extends NetworkDetails {
@@ -24,6 +25,7 @@ export default function Header({
   customSorobanRPCAddress,
 }: Readonly<HeaderProps>) {
   const { formatMessage } = useIntl()
+
   return (
     <Navbar collapseOnSelect expand="xxl" fixed="top">
       <Navbar.Brand href="/">
@@ -60,12 +62,12 @@ export default function Header({
           <Nav.Link href="/exchanges">
             <FormattedMessage id="exchanges" />
           </Nav.Link>
-
           <div className="divider-vertical" />
 
           <NavDropdown
             title={formatMessage({ id: 'more' })}
             id="basic-nav-dropdown"
+            className="nav-dropdown"
           >
             <LinkContainer to="/effects">
               <NavDropdown.Item>
@@ -99,6 +101,9 @@ export default function Header({
               customSorobanRPCAddress={customSorobanRPCAddress}
             />
           </NavItem>
+          <NavItem className="theme-selector-wrapper">
+            <ThemeSwitcher />
+          </NavItem>
           <NavItem>
             <LanguageSelector switcher={languageSwitcher} />
           </NavItem>
diff --git a/app/components/layout/LanguageSelector.tsx b/app/components/layout/LanguageSelector.tsx
index 17bd688b4..f05cc4d0f 100644
--- a/app/components/layout/LanguageSelector.tsx
+++ b/app/components/layout/LanguageSelector.tsx
@@ -21,7 +21,7 @@ export default function LanguageSelector({
 }) {
   const { formatMessage } = useIntl()
   return (
-    <Dropdown id="language-selector">
+    <Dropdown id="language-selector" className="nav-dropdown">
       <Dropdown.Toggle style={styleLanguageSelector}>
         <img
           src={langSelectImg}
diff --git a/app/components/layout/ThemeSwitcher.tsx b/app/components/layout/ThemeSwitcher.tsx
new file mode 100644
index 000000000..96bf16ad3
--- /dev/null
+++ b/app/components/layout/ThemeSwitcher.tsx
@@ -0,0 +1,28 @@
+import { Theme, useTheme } from '~/context/theme.provider'
+import lightIcon from 'public/img/sun.svg'
+import darkIcon from 'public/img/moon.svg'
+
+const ThemeSwitcher = () => {
+  const [theme, setTheme] = useTheme()
+  const toggleTheme = () => {
+    const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light
+    localStorage.setItem('theme', newTheme)
+    setTheme(newTheme)
+  }
+
+  return (
+    <div onClick={toggleTheme} className="theme-selector">
+      {theme === Theme.Light ? <LightIcon /> : <DarkIcon />}
+    </div>
+  )
+}
+
+const DarkIcon = () => {
+  return <img src={darkIcon} alt="moon" width={28} height={28} />
+}
+
+const LightIcon = () => {
+  return <img src={lightIcon} alt="sun" width={28} height={28} />
+}
+
+export default ThemeSwitcher
diff --git a/app/components/shared/ClipboardCopy.tsx b/app/components/shared/ClipboardCopy.tsx
index 77386cd47..a243cfddc 100644
--- a/app/components/shared/ClipboardCopy.tsx
+++ b/app/components/shared/ClipboardCopy.tsx
@@ -2,7 +2,6 @@ import { useState } from 'react'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
 import Tooltip from 'react-bootstrap/Tooltip'
 import clipSvg from '../../../public/clipboard.svg'
-
 const TooltipCopy = <Tooltip id="tooltip-copy">Copy to Clipboard</Tooltip>
 const TooltipCopied = (
   <Tooltip id="tooltip-copied" className="in">
@@ -18,14 +17,13 @@ function ClipboardCopy({ text }: { text: string }) {
     setCopied(true)
     setTimeout(() => setCopied(false), 10000)
   }
-
   return (
     <OverlayTrigger delay={300} overlay={copied ? TooltipCopied : TooltipCopy}>
       <img
         src={clipSvg}
         alt="clipboard"
         onClick={handleCopyFn}
-        style={{ color: 'white', height: 14, width: 14, marginLeft: 10 }}
+        className="clipboard-icon"
       />
     </OverlayTrigger>
   )
diff --git a/app/components/shared/CustomNetworkButton.tsx b/app/components/shared/CustomNetworkButton.tsx
index 21b5a5e5b..c4acaa865 100644
--- a/app/components/shared/CustomNetworkButton.tsx
+++ b/app/components/shared/CustomNetworkButton.tsx
@@ -85,7 +85,7 @@ const ResourceModal = (props: ResourceModalProps) => (
     onHide={props.handleCloseFn as () => void}
   >
     <Modal.Header closeButton>
-      <Modal.Title id="contained-modal-title-lg" style={{ color: '#dce2ec' }}>
+      <Modal.Title id="contained-modal-title-lg">
         <FormattedMessage id="network.set-custom" />
       </Modal.Title>
     </Modal.Header>
diff --git a/app/components/shared/NewWindowIcon.tsx b/app/components/shared/NewWindowIcon.tsx
index 48628ec39..f56b8054f 100644
--- a/app/components/shared/NewWindowIcon.tsx
+++ b/app/components/shared/NewWindowIcon.tsx
@@ -3,8 +3,8 @@ import externalLinkSvg from '../../../public/external-link.svg'
 const NewWindowIcon = () => (
   <img
     src={externalLinkSvg}
-    alt="clipboard"
-    style={{ color: 'white', height: 14, width: 14, marginLeft: 10 }}
+    alt="open new window"
+    className="new-window-icon"
   />
 )
 
diff --git a/app/components/shared/__tests__/BackendResourceBadgeButton.test.tsx b/app/components/shared/__tests__/BackendResourceBadgeButton.test.tsx
index b3a04ecba..1c8e68c7e 100644
--- a/app/components/shared/__tests__/BackendResourceBadgeButton.test.tsx
+++ b/app/components/shared/__tests__/BackendResourceBadgeButton.test.tsx
@@ -45,9 +45,11 @@ describe('BackendResourceBadgeButtonWithResourceModal', () => {
     expect(screen.getByRole('button', { name: 'Copy' })).toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
     expect(
-      screen.getByRole('link', { name: `${url} clipboard` }),
+      screen.getByRole('link', { name: `${url} open new window` }),
+    ).toBeInTheDocument()
+    expect(
+      screen.getByRole('img', { name: 'open new window' }),
     ).toBeInTheDocument()
-    expect(screen.getByRole('img', { name: 'clipboard' })).toBeInTheDocument()
   })
 
   it('closes the modal when close button is clicked', async () => {
diff --git a/app/context/theme.provider.tsx b/app/context/theme.provider.tsx
new file mode 100644
index 000000000..560400251
--- /dev/null
+++ b/app/context/theme.provider.tsx
@@ -0,0 +1,37 @@
+import type { ReactNode, Dispatch, SetStateAction } from 'react'
+import { createContext, useContext, useState, useEffect } from 'react'
+
+enum Theme {
+  Dark = 'dark',
+  Light = 'light',
+}
+
+type ThemeContextType = [
+  Theme | undefined,
+  Dispatch<SetStateAction<Theme | undefined>>,
+]
+
+const ThemeContext = createContext<ThemeContextType>([undefined, () => {}])
+
+function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<Theme | undefined>(Theme.Light)
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('theme')
+    if (savedTheme) {
+      setTheme(savedTheme as Theme)
+    }
+  }, [])
+
+  return (
+    <ThemeContext.Provider value={[theme, setTheme]}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+function useTheme(): ThemeContextType {
+  return useContext(ThemeContext)
+}
+
+export { Theme, ThemeProvider, useTheme }
diff --git a/app/root.tsx b/app/root.tsx
index 4f8dac285..5ad99c8f6 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { IntlProvider } from 'react-intl'
 import { cssBundleHref } from '@remix-run/css-bundle'
 import { json } from '@remix-run/node'
@@ -20,6 +20,7 @@ import { captureRemixErrorBoundaryError, withSentry } from '@sentry/remix'
 import bootstrapStyles from 'bootstrap/dist/css/bootstrap.css'
 import jsonPrettyStyles from 'react-json-pretty/themes/1337.css'
 import siteStyles from '~/styles/styles.css'
+import lightSiteStyles from '~/styles/styles.light.css'
 
 import Footer from './components/layout/Footer'
 import Header from './components/layout/Header'
@@ -38,12 +39,14 @@ import { requestToNetworkDetails } from './lib/stellar/networks'
 import { storageInit } from './lib/utils'
 import SearchBox from './SearchBox'
 import { NotFoundError } from 'stellar-sdk'
+import { ThemeProvider, useTheme } from '~/context/theme.provider'
 import type { ErrorBoundaryComponent } from '@remix-run/react/dist/routeModules'
 
 export const links: LinksFunction = () => [
   { rel: 'stylesheet', href: bootstrapStyles },
   { rel: 'stylesheet', href: jsonPrettyStyles },
   { rel: 'stylesheet', href: siteStyles },
+  { rel: 'stylesheet', href: lightSiteStyles },
   ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
 ]
 
@@ -84,8 +87,15 @@ function HtmlDocument({
   children,
   title,
 }: PropsWithChildren<{ title?: string }>) {
+  const [theme] = useTheme()
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    setIsLoading(false)
+  }, [])
+
   return (
-    <html lang="en">
+    <html lang="en" data-bs-theme={theme}>
       <head>
         <meta charSet="utf-8" />
         <meta
@@ -105,7 +115,7 @@ function HtmlDocument({
         <Links />
       </head>
       <body>
-        {children}
+        {!isLoading && children}
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
@@ -136,32 +146,34 @@ function App() {
   } = useLoaderData<typeof loader>()
 
   return (
-    <HtmlDocument>
-      <div className="App">
-        <IntlProvider
-          key={language}
-          locale={language}
-          messages={getMessages(language)}
-        >
-          <Header
-            languageSwitcher={languageSwitcherFn(setLanguage)}
-            networkType={networkType}
-            isLocal={isLocal}
-            isCustom={isCustom}
-            customHorizonAddress={horizonAddress}
-            customSorobanRPCAddress={sorobanRPCAddress}
-          />
-          <SearchBox />
-          <div
-            id="main-content"
-            className={navigation.state === 'loading' ? 'loading' : ''}
+    <ThemeProvider>
+      <HtmlDocument>
+        <div className="App">
+          <IntlProvider
+            key={language}
+            locale={language}
+            messages={getMessages(language)}
           >
-            <Outlet />
-          </div>
-        </IntlProvider>
-        <Footer />
-      </div>
-    </HtmlDocument>
+            <Header
+              languageSwitcher={languageSwitcherFn(setLanguage)}
+              networkType={networkType}
+              isLocal={isLocal}
+              isCustom={isCustom}
+              customHorizonAddress={horizonAddress}
+              customSorobanRPCAddress={sorobanRPCAddress}
+            />
+            <SearchBox />
+            <div
+              id="main-content"
+              className={navigation.state === 'loading' ? 'loading' : ''}
+            >
+              <Outlet />
+            </div>
+          </IntlProvider>
+          <Footer />
+        </div>
+      </HtmlDocument>
+    </ThemeProvider>
   )
 }
 
@@ -184,12 +196,14 @@ export const ErrorBoundary: ErrorBoundaryComponent = () => {
   }
 
   return (
-    <HtmlDocument title="Stellar Explorer - Error">
-      <div className="error-container">
-        <h1>Error</h1>
-        <pre>{errorMessage}</pre>
-      </div>
-    </HtmlDocument>
+    <ThemeProvider>
+      <HtmlDocument title="Stellar Explorer - Error">
+        <div className="error-container">
+          <h1>Error</h1>
+          <pre>{errorMessage}</pre>
+        </div>
+      </HtmlDocument>
+    </ThemeProvider>
   )
 }
 
diff --git a/app/styles/styles.css b/app/styles/styles.css
index fdf9b9376..abad9dbc6 100644
--- a/app/styles/styles.css
+++ b/app/styles/styles.css
@@ -1,4 +1,7 @@
-body,
+body {
+  background-color: #3c4452;
+}
+
 .navbar {
   color: #96a2b4;
   background-color: #3c4452 !important;
@@ -253,12 +256,52 @@ pre#plain-text {
   overflow-wrap: break-word;
 }
 
+.theme-selector {
+  display: flex;
+  width: 38px;
+  height: 38px;
+  border-radius: 100%;
+  transition: background-color 0.3s ease;
+  align-items: center;
+  justify-content: center;
+}
+
+.theme-selector:hover {
+  background-color: lightgray;
+  cursor: pointer;
+}
+
+.clipboard-icon {
+  filter: brightness(0) saturate(100%) hue-rotate(0deg) invert(100%);
+  height: 14px;
+  width: 14px;
+  margin-left: 10px;
+}
+
+.info-icon {
+  filter: brightness(0) saturate(100%) hue-rotate(0deg) invert(100%);
+  height: 24px;
+  width: 24px;
+}
+
+.new-window-icon {
+  filter: brightness(0) saturate(100%) hue-rotate(0deg) invert(100%);
+  height: 14px;
+  width: 14px;
+  margin-left: 10px;
+}
+
+[id="contained-modal-title-lg"] {
+  color: #dce2ec;
+}
+
 @media (max-width: 1300px) {
   .divider-vertical {
     display: none !important;
   }
 
   #language-selector,
+  .theme-selector-wrapper,
   .network-selector {
     margin-top: 10px;
     margin-left: 15px !important;
@@ -266,6 +309,10 @@ pre#plain-text {
     border-top: hsla(210, 8%, 51%, .28) solid 1px;
   }
 
+  .theme-selector {
+    margin-left: 0px !important;
+  }
+
   #language-selector {
     margin-bottom: 20px;
   }
@@ -293,6 +340,10 @@ pre#plain-text {
 /*************************************************************/
 
 #language-selector {
+  margin-left: 10px;
+}
+
+.theme-selector {
   margin-left: 30px;
 }
 
@@ -612,4 +663,4 @@ Mobile Rules
     font-size: 12px;
     padding: 4px 7px;
   }
-}
\ No newline at end of file
+}
diff --git a/app/styles/styles.light.css b/app/styles/styles.light.css
new file mode 100644
index 000000000..c87efa43f
--- /dev/null
+++ b/app/styles/styles.light.css
@@ -0,0 +1,303 @@
+[data-bs-theme="light"] {
+  --light-color: #000000;
+  --light-background-color: #ffffff;
+  --light-text-color: #000000;
+  --light-table-bg: #efefef;
+  --light-body-bg: #e7e7e7;
+}
+
+[data-bs-theme="light"] body {
+  background-color: var(--light-body-bg)
+}
+
+[data-bs-theme="light"] .navbar {
+  color: var(--light-color);
+  background-color: var(--light-background-color) !important;
+  font-family: "Noto Sans",
+  "Noto Sans CJK {SC, TC}",
+  sans-serif;
+}
+
+[data-bs-theme="light"] .navbar-toggler {
+  color: transparent;
+}
+
+[data-bs-theme="light"] hr {
+  border-top: 1px solid #4c5667;
+}
+
+
+[data-bs-theme="light"] #footer {
+  border-top: 1px solid #4c5667;
+}
+
+[data-bs-theme="light"] .modal-header,
+.modal-body {
+  background-color: var(--light-table-bg);
+}
+
+[data-bs-theme="light"] .__json-pretty__ {
+  border: 1px black solid;
+  font-size: 13px;
+  background-color: var(--light-body-bg);
+  color: black;
+}
+
+[data-bs-theme="light"] .__json-string__ {
+  color: blue;
+}
+
+/* server.toml: */
+[data-bs-theme="light"] pre#plain-text {
+  background-color: #f5f5f5;
+  color: var(--light-color);
+}
+
+[data-bs-theme="light"] .brand-text {
+  color: var(--light-text-color);
+}
+
+[data-bs-theme="light"] .card {
+  background-color: var(--light-background-color);
+  color: var(--light-text-color);
+}
+
+[data-bs-theme="light"] .card-default>.card-header {
+  background-color: var(--light-background-color);
+  color: var(--light-text-color);
+}
+
+[data-bs-theme="light"] .card-header .pull-right {
+  float: right;
+  color: #fb9678 !important;
+}
+
+[data-bs-theme="light"] .card-header .pull-right:hover {
+  color: #fa6f46 !important;
+}
+
+[data-bs-theme="light"] .secondary-heading {
+  color: var(--light-text-color);
+}
+
+[data-bs-theme="light"] [id*="-table"] thead th {
+  color: #242424 !important;
+}
+
+[data-bs-theme="light"] [id*="-table"] tbody td {
+  color: var(--light-text-color) !important;
+}
+
+[data-bs-theme="light"] [id*="-table"]>tbody>tr>td {
+  border-top: 1px solid #4c5667;
+}
+
+[data-bs-theme="light"] .filter .disclaimer {
+  color: rgb(3, 169, 243);
+}
+
+[data-bs-theme="light"] .card-body td {
+  color: var(--light-text-color) !important;
+}
+
+[data-bs-theme="light"] .table>thead>tr>th,
+.table>tbody>tr:nth-of-type(odd)>td,
+.table>tbody>tr:nth-of-type(even)>td {
+  background-color: var(--light-table-bg);
+}
+
+/* For language dropdown */
+
+[data-bs-theme="light"] .nav-link {
+  color: var(--light-text-color);
+}
+
+[data-bs-theme="light"] .nav-link:hover,
+.nav-link:focus {
+  background-color: var(--light-background-color) !important;
+  color: #08b5e5 !important;
+}
+
+[data-bs-theme="light"] .divider-vertical {
+  border-right: 1px solid #96a2b4;
+}
+
+[data-bs-theme="light"] .clipboard-icon {
+  filter: brightness(0) saturate(100%) hue-rotate(0deg) invert(100%) brightness(0) contrast(100%) grayscale(100%) sepia(0%);
+}
+
+[data-bs-theme="light"] .new-window-icon {
+  filter: brightness(0) saturate(100%) hue-rotate(0deg) invert(100%) brightness(0) contrast(100%) grayscale(100%) sepia(0%);
+}
+
+[data-bs-theme="light"] .info-icon {
+  filter: brightness(0) saturate(100%) hue-rotate(0deg) invert(100%) brightness(0) contrast(100%) grayscale(100%) sepia(0%);
+}
+
+[data-bs-theme="light"] [id="contained-modal-title-lg"] {
+  color: var(--light-text-color);
+}
+
+/* Custom dropdown in lighttheme only */
+[data-bs-theme="light"] .nav-dropdown .dropdown-menu {
+  background-color: var(--light-table-bg);
+  color: var(--light-color);
+}
+
+[data-bs-theme="light"] .nav-dropdown .dropdown-menu a {
+  color: var(--light-text-color);
+}
+
+[data-bs-theme="light"] .nav-dropdown .dropdown-menu a:hover {
+  background-color: var(--light-table-bg);
+  color: #08b5e5;
+}
+
+[data-bs-theme="light"] .nav-dropdown .dropdown-menu .active {
+  background-color: var(--light-table-bg);
+  color: #08b5e5;
+}
+
+@media (max-width: 1300px) {
+  [data-bs-theme="light"] #language-selector,
+  .network-selector {
+    border-top: hsla(210, 8%, 51%, .28) solid 1px;
+  }
+
+  [data-bs-theme="light"] .dropdown-menu {
+    background-color: var(--light-background-color);
+  }
+
+  [data-bs-theme="light"] .dropdown-menu a {
+    color: #00c292 !important;
+  }
+}
+
+/*************************************************************/
+
+[data-bs-theme="light"] #language-selector>span.caret {
+  color: #dce2ec !important;
+}
+
+[data-bs-theme="light"] .network-selector button {
+  background: #08b5e5;
+  border: 1px solid #08b5e5;
+  color: white;
+}
+
+[data-bs-theme="light"] .network-selector .is-inactive {
+  background: transparent;
+  color: #08b5e5;
+}
+
+[data-bs-theme="light"] .network-selector .is-inactive:hover {
+  background: #08b5e5;
+  color: white;
+}
+
+[data-bs-theme="light"] .stellarToml a {
+  background-color: #fec107 !important;
+  color: white !important;
+}
+
+[data-bs-theme="light"] .directoryRow {
+  border-bottom: 1px solid #4c5667;
+}
+
+[data-bs-theme="light"] .directoryRow .anchorLinkCol span a:hover {
+  background-color: #fece3a !important;
+}
+
+[data-bs-theme="light"] #account-id {
+  color: white;
+}
+
+[data-bs-theme="light"] #account-nav,
+#contract-nav {
+  background-color: var(--light-table-bg);
+}
+
+[data-bs-theme="light"] #account-nav>a,
+#contract-nav>a {
+  color: var(--light-text-color);
+}
+
+[data-bs-theme="light"] .break {
+  color: var(--light-text-color) !important;
+}
+
+[data-bs-theme="light"] #account-nav>a:hover,
+#contract-nav>a:hover {
+  background-color: var(--light-background-color) !important;
+  color: #01c0c8;
+}
+
+[data-bs-theme="light"] #account-tab-content,
+#contract-tab-content {
+  background-color: var(--light-table-bg);
+}
+
+[data-bs-theme="light"] .account-tab-active,
+.contract-tab-active {
+  color: #01c0c8 !important;
+  background-color: white;
+}
+
+[data-bs-theme="light"] .account-badge a {
+  background-color: #03a9f3;
+  color: white;
+}
+
+[data-bs-theme="light"] .account-badge span a:hover {
+  color: white;
+}
+
+[data-bs-theme="light"] #paging-controls button {
+  background-color: #08b5e5 !important;
+  color: #ffffff;
+}
+
+[data-bs-theme="light"] #paging-controls button:hover {
+  background-color: #3c4452 !important;
+}
+
+[data-bs-theme="light"] a {
+  color: #00c292;
+}
+
+[data-bs-theme="light"] a:hover {
+  color: #008f6c;
+}
+
+[data-bs-theme="light"] .col-md-1 a span {
+  color: white !important;
+  background-color: #01c0c8 !important;
+}
+
+[data-bs-theme="light"] .col-md-1 a span:hover {
+  background-color: #01a8af !important;
+}
+
+[data-bs-theme="light"] .green-blue-button {
+  color: white !important;
+  background-color: #01c0c8 !important;
+}
+
+[data-bs-theme="light"] .green-blue-button:hover {
+  background-color: #01a8af !important;
+}
+
+[data-bs-theme="light"] .backend-resource-badge-button {
+  color: white;
+  background-color: #01c0c8;
+}
+
+/*
+Mobile Rules
+*/
+
+@media only screen and (max-width: 600px) {
+  [data-bs-theme="light"] #search-container .input-group-text {
+    background-color: #01c0c8;
+  }
+}
diff --git a/public/clipboard.svg b/public/clipboard.svg
index 1785ebd38..dcf784856 100644
--- a/public/clipboard.svg
+++ b/public/clipboard.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="white" d="M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"/></svg>
diff --git a/public/img/moon.svg b/public/img/moon.svg
new file mode 100644
index 000000000..f1a84ab6f
--- /dev/null
+++ b/public/img/moon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-moon" viewBox="0 0 16 16">
+  <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278M4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z"/>
+</svg>
diff --git a/public/img/sun.svg b/public/img/sun.svg
new file mode 100644
index 000000000..e870c1e89
--- /dev/null
+++ b/public/img/sun.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-brightness-high" viewBox="0 0 16 16">
+  <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
+</svg>
diff --git a/public/info-circle.svg b/public/info-circle.svg
index aa455aadc..8aa81232f 100644
--- a/public/info-circle.svg
+++ b/public/info-circle.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="white" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>