diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 724e1cd..df04198 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -31,5 +31,3 @@ jobs:
     - run: pnpm install
     - run: pnpm lint
     - run: pnpm build
-    - run: pnpm cypress install
-    - run: pnpm test
diff --git a/README.md b/README.md
index 8e0c817..936ef5c 100755
--- a/README.md
+++ b/README.md
@@ -14,7 +14,9 @@ This dashboard is built with `Typescript` and [React Bootstrap](https://react-bo
 
 https://nextjs-dashboard-olive.vercel.app
 
-[<img alt="Dashboard" width="400" src="https://user-images.githubusercontent.com/7660346/180629352-f92216e3-7cf4-4fba-92fa-089dd96b4478.png" />](https://nextjs-dashboard-olive.vercel.app)
+| Light                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Dark                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| [<img alt="Dashboard" width="400" src="https://private-user-images.githubusercontent.com/7660346/330458105-1885c757-0616-4023-ab51-1ffe162fb019.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTU2OTY3NjAsIm5iZiI6MTcxNTY5NjQ2MCwicGF0aCI6Ii83NjYwMzQ2LzMzMDQ1ODEwNS0xODg1Yzc1Ny0wNjE2LTQwMjMtYWI1MS0xZmZlMTYyZmIwMTkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDUxNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA1MTRUMTQyMTAwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MGYzYTVmYWJkZDFjNWNjMWMxNmE3YWU2ZmU0ZjhlZGQ4YmJiM2YyY2RjMzkwNTQyNGZmZjRjNTg4ODBmZWY1OSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.V3BUd9KPOG_dqP0zyN8ooOmnGA36RzzCTQNYUerOork" />](https://nextjs-dashboard-olive.vercel.app) | [<img alt="Dashboard" width="400" src="https://private-user-images.githubusercontent.com/7660346/330458408-b05459ba-3049-481a-b3a1-5a52bc2c51c0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTU2OTY3NjAsIm5iZiI6MTcxNTY5NjQ2MCwicGF0aCI6Ii83NjYwMzQ2LzMzMDQ1ODQwOC1iMDU0NTliYS0zMDQ5LTQ4MWEtYjNhMS01YTUyYmMyYzUxYzAucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDUxNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA1MTRUMTQyMTAwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZmVjZjMwNDUxNTE2YjBlYTQ0ZTU4MGU1OGU2ODM4NTBhNGMyY2IyMDE4NzlhN2E4ZTc4YWEyNjdjYjc3MTM5NSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.EeevKS8-6k1qW1nINO3VeFt2uffRXLhbE5bArXewkBQ" />](https://nextjs-dashboard-olive.vercel.app) |
 
 | Mobile (collapsed)                                                                                                                                                                           | Mobile (expand)                                                                                                                                                                              |
 |----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
@@ -24,7 +26,12 @@ https://nextjs-dashboard-olive.vercel.app
 
 https://nextjs-dashboard-olive.vercel.app/pokemons
 
-[<img alt="Sample page" width="400" src="https://user-images.githubusercontent.com/7660346/183112188-75ffbd15-e7ef-455f-994b-945df16e5846.png">](https://nextjs-dashboard-olive.vercel.app/pokemons)
+#### Multilingual
+
+| English                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | 日本語                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| [<img alt="Sample page" width="400" src="https://private-user-images.githubusercontent.com/7660346/330461274-b0779014-ced2-4755-941b-77349bc6a2ed.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTU2OTY3NjAsIm5iZiI6MTcxNTY5NjQ2MCwicGF0aCI6Ii83NjYwMzQ2LzMzMDQ2MTI3NC1iMDc3OTAxNC1jZWQyLTQ3NTUtOTQxYi03NzM0OWJjNmEyZWQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDUxNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA1MTRUMTQyMTAwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzA0MzYwYThiMTFmZDAzMDM5NThmZmMxMDBhMDZlZDA3ZjNjOGM5NWUzMjE3NmIxM2U2NzEwYzA1MTNjMzQ5OCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.4er_vRXAo6Ylo30eCPrQQ54TkOTCn3oTdWK4jz31kV0">](https://nextjs-dashboard-olive.vercel.app/pokemons) | [<img alt="Sample page" width="400" src="https://private-user-images.githubusercontent.com/7660346/330461591-b2842635-87d1-4d3f-95c2-aeef5cad779c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTU2OTY3NjAsIm5iZiI6MTcxNTY5NjQ2MCwicGF0aCI6Ii83NjYwMzQ2LzMzMDQ2MTU5MS1iMjg0MjYzNS04N2QxLTRkM2YtOTVjMi1hZWVmNWNhZDc3OWMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDUxNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA1MTRUMTQyMTAwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MTllZTI2YTA1MjYyMmIxYWZkZmFjMWY4YTViOGQzNjBhZTA2ZDEyOTZhMzZlM2Y4OGU3ZTQzMjhjZjA3NmMzMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.nLAwlkNjJHnWQ5dxI-FpE9cDHhpO-RXs2Brp8x2OuSg">](https://nextjs-dashboard-olive.vercel.app/pokemons) |
+
 
 ### Login
 
diff --git a/package.json b/package.json
index c629e60..4d0f6b5 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
     "react-paginate": "^8.2.0",
+    "react-responsive": "^10.0.0",
     "swr": "^2.2.5",
     "zod": "^3.23.8",
     "zod-i18n-map": "^2.27.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b267dcf..f00e3cd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,6 +71,9 @@ importers:
       react-paginate:
         specifier: ^8.2.0
         version: 8.2.0(react@18.3.1)
+      react-responsive:
+        specifier: ^10.0.0
+        version: 10.0.0(react@18.3.1)
       swr:
         specifier: ^2.2.5
         version: 2.2.5(react@18.3.1)
@@ -792,6 +795,9 @@ packages:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
 
+  css-mediaquery@0.1.2:
+    resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==}
+
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -1371,6 +1377,9 @@ packages:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
 
+  hyphenate-style-name@1.0.4:
+    resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==}
+
   i18next@23.11.4:
     resolution: {integrity: sha512-CCUjtd5TfaCl+mLUzAA0uPSN+AVn4fP/kWCYt/hocPUwusTpMVczdrRyOBUwk6N05iH40qiKx6q1DoNJtBIwdg==}
 
@@ -1702,6 +1711,9 @@ packages:
   map-stream@0.1.0:
     resolution: {integrity: sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==}
 
+  matchmediaquery@0.4.2:
+    resolution: {integrity: sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA==}
+
   media-typer@0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
@@ -2104,6 +2116,12 @@ packages:
     peerDependencies:
       react: ^16 || ^17 || ^18
 
+  react-responsive@10.0.0:
+    resolution: {integrity: sha512-N6/UiRLGQyGUqrarhBZmrSmHi2FXSD++N5VbSKsBBvWfG0ZV7asvUBluSv5lSzdMyEVjzZ6Y8DL4OHABiztDOg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: '>=16.8.0'
+
   react-transition-group@4.4.5:
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:
@@ -2234,6 +2252,9 @@ packages:
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
+  shallow-equal@3.1.0:
+    resolution: {integrity: sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg==}
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -3298,6 +3319,8 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css-mediaquery@0.1.2: {}
+
   csstype@3.1.3: {}
 
   cypress@13.9.0:
@@ -4136,6 +4159,8 @@ snapshots:
 
   human-signals@2.1.0: {}
 
+  hyphenate-style-name@1.0.4: {}
+
   i18next@23.11.4:
     dependencies:
       '@babel/runtime': 7.24.5
@@ -4475,6 +4500,10 @@ snapshots:
 
   map-stream@0.1.0: {}
 
+  matchmediaquery@0.4.2:
+    dependencies:
+      css-mediaquery: 0.1.2
+
   media-typer@0.3.0: {}
 
   merge-descriptors@1.0.1: {}
@@ -4864,6 +4893,14 @@ snapshots:
       prop-types: 15.8.1
       react: 18.3.1
 
+  react-responsive@10.0.0(react@18.3.1):
+    dependencies:
+      hyphenate-style-name: 1.0.4
+      matchmediaquery: 0.4.2
+      prop-types: 15.8.1
+      react: 18.3.1
+      shallow-equal: 3.1.0
+
   react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.24.5
@@ -5027,6 +5064,8 @@ snapshots:
 
   setprototypeof@1.2.0: {}
 
+  shallow-equal@3.1.0: {}
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
diff --git a/src/app/(authentication)/layout.tsx b/src/app/(authentication)/layout.tsx
index 1b3cbcd..8b8c049 100644
--- a/src/app/(authentication)/layout.tsx
+++ b/src/app/(authentication)/layout.tsx
@@ -7,7 +7,7 @@ export default function Layout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="bg-light min-vh-100 d-flex flex-row align-items-center dark:bg-transparent">
+    <div className="bg-light dark:bg-dark min-vh-100 d-flex flex-row align-items-center">
       <Container>
         {children}
       </Container>
diff --git a/src/app/(authentication)/login/page.tsx b/src/app/(authentication)/login/page.tsx
index 034ecaf..fe618b5 100644
--- a/src/app/(authentication)/login/page.tsx
+++ b/src/app/(authentication)/login/page.tsx
@@ -20,10 +20,10 @@ export default async function Page({ searchParams }: { searchParams: SearchParam
     <Row className="justify-content-center align-items-center px-3">
       <Col lg={8}>
         <Row>
-          <Col md={7} className="bg-white border p-5">
+          <Col md={7} className="bg-white dark:bg-dark border p-5">
             <div>
               <h1>{dict.login.title}</h1>
-              <p className="text-black-50">{dict.login.description}</p>
+              <p className="text-black-50 dark:text-gray-500">{dict.login.description}</p>
 
               <LoginForm callbackUrl={getCallbackUrl()} />
             </div>
diff --git a/src/app/(authentication)/register/page.tsx b/src/app/(authentication)/register/page.tsx
index c23ec5b..d892e62 100644
--- a/src/app/(authentication)/register/page.tsx
+++ b/src/app/(authentication)/register/page.tsx
@@ -13,7 +13,7 @@ export default async function Page() {
         <Card className="mb-4 rounded-0">
           <CardBody className="p-4">
             <h1>{dict.signup.title}</h1>
-            <p className="text-black-50">{dict.signup.description}</p>
+            <p className="text-black-50 dark:text-gray-500">{dict.signup.description}</p>
             <Register />
           </CardBody>
         </Card>
diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
index 544e3a6..2de145f 100644
--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@@ -19,7 +19,7 @@ export default function Layout({
         <SidebarNav />
       </Sidebar>
 
-      <div className="wrapper d-flex flex-column min-vh-100 bg-light">
+      <div className="wrapper d-flex flex-column min-vh-100">
         <Header />
 
         <div className="body flex-grow-1 px-sm-2 mb-4">
diff --git a/src/app/(dashboard)/page.tsx b/src/app/(dashboard)/page.tsx
index 4258e73..52df197 100644
--- a/src/app/(dashboard)/page.tsx
+++ b/src/app/(dashboard)/page.tsx
@@ -45,7 +45,7 @@ export default async function Page() {
   const dict = await getDictionary()
 
   return (
-    <>
+    <div>
       <div className="row">
         <div className="col-sm-6 col-lg-3">
           <Card bg="primary" text="white" className="mb-4">
@@ -201,7 +201,7 @@ export default async function Page() {
           <div className="d-flex justify-content-between">
             <div>
               <h4 className="mb-0">{dict.dashboard.traffic.title}</h4>
-              <div className="small text-black-50">{dict.dashboard.traffic.duration}</div>
+              <div className="small text-black-50 dark:text-gray-500">{dict.dashboard.traffic.duration}</div>
             </div>
             <div className="d-none d-md-block">
               <ButtonGroup aria-label="Toolbar with buttons" className="mx-3">
@@ -263,7 +263,7 @@ export default async function Page() {
         <CardFooter>
           <div className="row row-cols-1 row-cols-md-5 text-center">
             <div className="col mb-sm-2 mb-0">
-              <div className="text-black-50">{dict.dashboard.traffic.category1}</div>
+              <div className="text-black-50 dark:text-gray-500">{dict.dashboard.traffic.category1}</div>
               <div className="fw-semibold">
                 29.703
                 {dict.dashboard.traffic.users}
@@ -277,7 +277,7 @@ export default async function Page() {
               />
             </div>
             <div className="col mb-sm-2 mb-0">
-              <div className="text-black-50">{dict.dashboard.traffic.category2}</div>
+              <div className="text-black-50 dark:text-gray-500">{dict.dashboard.traffic.category2}</div>
               <div className="fw-semibold">
                 24.093
                 {dict.dashboard.traffic.users}
@@ -291,7 +291,7 @@ export default async function Page() {
               />
             </div>
             <div className="col mb-sm-2 mb-0">
-              <div className="text-black-50">{dict.dashboard.traffic.category3}</div>
+              <div className="text-black-50 dark:text-gray-500">{dict.dashboard.traffic.category3}</div>
               <div className="fw-semibold">
                 78.706
                 {dict.dashboard.traffic.views}
@@ -305,7 +305,7 @@ export default async function Page() {
               />
             </div>
             <div className="col mb-sm-2 mb-0">
-              <div className="text-black-50">{dict.dashboard.traffic.category4}</div>
+              <div className="text-black-50 dark:text-gray-500">{dict.dashboard.traffic.category4}</div>
               <div className="fw-semibold">
                 22.123
                 {dict.dashboard.traffic.users}
@@ -319,7 +319,7 @@ export default async function Page() {
               />
             </div>
             <div className="col mb-sm-2 mb-0">
-              <div className="text-black-50">{dict.dashboard.traffic.category5}</div>
+              <div className="text-black-50 dark:text-gray-500">{dict.dashboard.traffic.category5}</div>
               <div className="fw-semibold">40.15%</div>
               <ProgressBar
                 className="progress-thin mt-2"
@@ -349,14 +349,14 @@ export default async function Page() {
               <div className="row text-center">
                 <div className="col">
                   <div className="fs-5 fw-semibold">89k</div>
-                  <div className="text-uppercase text-black-50 small">
+                  <div className="text-uppercase text-black-50 dark:text-gray-500 small">
                     {dict.dashboard.social.facebook.label1}
                   </div>
                 </div>
                 <div className="vr p-0" />
                 <div className="col">
                   <div className="fs-5 fw-semibold">459</div>
-                  <div className="text-uppercase text-black-50 small">
+                  <div className="text-uppercase text-black-50 dark:text-gray-500 small">
                     {dict.dashboard.social.facebook.label2}
                   </div>
                 </div>
@@ -382,14 +382,14 @@ export default async function Page() {
               <div className="row text-center">
                 <div className="col">
                   <div className="fs-5 fw-semibold">973k</div>
-                  <div className="text-uppercase text-black-50 small">
+                  <div className="text-uppercase text-black-50 dark:text-gray-500 small">
                     {dict.dashboard.social.twitter.label1}
                   </div>
                 </div>
                 <div className="vr p-0" />
                 <div className="col">
                   <div className="fs-5 fw-semibold">1.792</div>
-                  <div className="text-uppercase text-black-50 small">
+                  <div className="text-uppercase text-black-50 dark:text-gray-500 small">
                     {dict.dashboard.social.twitter.label2}
                   </div>
                 </div>
@@ -415,14 +415,14 @@ export default async function Page() {
               <div className="row text-center">
                 <div className="col">
                   <div className="fs-5 fw-semibold">500+</div>
-                  <div className="text-uppercase text-black-50 small">
+                  <div className="text-uppercase text-black-50 dark:text-gray-500 small">
                     {dict.dashboard.social.instagram.label1}
                   </div>
                 </div>
                 <div className="vr p-0" />
                 <div className="col">
                   <div className="fs-5 fw-semibold">292</div>
-                  <div className="text-uppercase text-black-50 small">
+                  <div className="text-uppercase text-black-50 dark:text-gray-500 small">
                     {dict.dashboard.social.instagram.label2}
                   </div>
                 </div>
@@ -445,7 +445,7 @@ export default async function Page() {
                   <div className="row">
                     <div className="col-6">
                       <div className="border-start border-4 border-info px-3 mb-3">
-                        <small className="text-black-50">
+                        <small className="text-black-50 dark:text-gray-500">
                           {dict.dashboard.sales.stats.stat1}
                         </small>
                         <div className="fs-5 fw-semibold">9,123</div>
@@ -454,7 +454,7 @@ export default async function Page() {
 
                     <div className="col-6">
                       <div className="border-start border-4 border-danger px-3 mb-3">
-                        <small className="text-black-50">
+                        <small className="text-black-50 dark:text-gray-500">
                           {dict.dashboard.sales.stats.stat2}
                         </small>
                         <div className="fs-5 fw-semibold">22,643</div>
@@ -467,7 +467,7 @@ export default async function Page() {
 
                   <div className="row mb-4 align-items-center">
                     <div className="col-3">
-                      <span className="text-black-50 small">
+                      <span className="text-black-50 dark:text-gray-500 small">
                         {dict.dashboard.sales.monday}
                       </span>
                     </div>
@@ -487,7 +487,7 @@ export default async function Page() {
 
                   <div className="row mb-4 align-items-center">
                     <div className="col-3">
-                      <span className="text-black-50 small">
+                      <span className="text-black-50 dark:text-gray-500 small">
                         {dict.dashboard.sales.tuesday}
                       </span>
                     </div>
@@ -507,7 +507,7 @@ export default async function Page() {
 
                   <div className="row mb-4 align-items-center">
                     <div className="col-3">
-                      <span className="text-black-50 small">
+                      <span className="text-black-50 dark:text-gray-500 small">
                         {dict.dashboard.sales.wednesday}
                       </span>
                     </div>
@@ -527,7 +527,7 @@ export default async function Page() {
 
                   <div className="row mb-4 align-items-center">
                     <div className="col-3">
-                      <span className="text-black-50 small">
+                      <span className="text-black-50 dark:text-gray-500 small">
                         {dict.dashboard.sales.thursday}
                       </span>
                     </div>
@@ -547,7 +547,7 @@ export default async function Page() {
 
                   <div className="row mb-4 align-items-center">
                     <div className="col-3">
-                      <span className="text-black-50 small">
+                      <span className="text-black-50 dark:text-gray-500 small">
                         {dict.dashboard.sales.friday}
                       </span>
                     </div>
@@ -567,7 +567,7 @@ export default async function Page() {
 
                   <div className="row mb-4 align-items-center">
                     <div className="col-3">
-                      <span className="text-black-50 small">
+                      <span className="text-black-50 dark:text-gray-500 small">
                         {dict.dashboard.sales.saturday}
                       </span>
                     </div>
@@ -587,7 +587,7 @@ export default async function Page() {
 
                   <div className="row mb-4 align-items-center">
                     <div className="col-3">
-                      <span className="text-black-50 small">
+                      <span className="text-black-50 dark:text-gray-500 small">
                         {dict.dashboard.sales.sunday}
                       </span>
                     </div>
@@ -610,7 +610,7 @@ export default async function Page() {
                   <div className="row">
                     <div className="col-6">
                       <div className="border-start border-4 border-warning px-3 mb-3">
-                        <small className="text-black-50">
+                        <small className="text-black-50 dark:text-gray-500">
                           {dict.dashboard.sales.stats.stat3}
                         </small>
                         <div className="fs-5 fw-semibold">78,623</div>
@@ -619,7 +619,7 @@ export default async function Page() {
 
                     <div className="col-6">
                       <div className="border-start border-4 border-success px-3 mb-3">
-                        <small className="text-black-50">
+                        <small className="text-black-50 dark:text-gray-500">
                           {dict.dashboard.sales.stats.stat4}
                         </small>
                         <div className="fs-5 fw-semibold">49,123</div>
@@ -669,7 +669,7 @@ export default async function Page() {
                         {dict.dashboard.sales.organic}
                       </div>
                       <div className="ms-auto fw-semibold me-2">191.235</div>
-                      <div className="text-black-50 small">(56%)</div>
+                      <div className="text-black-50 dark:text-gray-500 small">(56%)</div>
                     </div>
                     <ProgressBar
                       className="progress-thin"
@@ -685,7 +685,7 @@ export default async function Page() {
                         {dict.dashboard.sales.facebook}
                       </div>
                       <div className="ms-auto fw-semibold me-2">51.223</div>
-                      <div className="text-black-50 small">(15%)</div>
+                      <div className="text-black-50 dark:text-gray-500 small">(15%)</div>
                     </div>
                     <ProgressBar
                       className="progress-thin"
@@ -701,7 +701,7 @@ export default async function Page() {
                         {dict.dashboard.sales.twitter}
                       </div>
                       <div className="ms-auto fw-semibold me-2">37.564</div>
-                      <div className="text-black-50 small">(11%)</div>
+                      <div className="text-black-50 dark:text-gray-500 small">(11%)</div>
                     </div>
                     <ProgressBar
                       className="progress-thin"
@@ -717,7 +717,7 @@ export default async function Page() {
                         {dict.dashboard.sales.linkedin}
                       </div>
                       <div className="ms-auto fw-semibold me-2">27.319</div>
-                      <div className="text-black-50 small">(8%)</div>
+                      <div className="text-black-50 dark:text-gray-500 small">(8%)</div>
                     </div>
                     <ProgressBar
                       className="progress-thin"
@@ -732,8 +732,8 @@ export default async function Page() {
 
               <div className="table-responsive">
                 <table className="table border mb-0">
-                  <thead className="table-light fw-semibold">
-                    <tr className="align-middle">
+                  <thead className="fw-semibold">
+                    <tr className="align-middle table-light dark:table-dark">
                       <th className="text-center" aria-label="icon">
                         <FontAwesomeIcon icon={faUsers} fixedWidth />
                       </th>
@@ -762,7 +762,7 @@ export default async function Page() {
                       </td>
                       <td>
                         <div>{dict.dashboard.listing.items.item1.name}</div>
-                        <div className="small text-black-50">
+                        <div className="small text-black-50 dark:text-gray-500">
                           <span>{dict.dashboard.listing.user_status.new}</span>
                           {' '}
                           |
@@ -779,7 +779,7 @@ export default async function Page() {
                             <div className="fw-semibold">50%</div>
                           </div>
                           <div className="float-end">
-                            <small className="text-black-50">
+                            <small className="text-black-50 dark:text-gray-500">
                               {dict.dashboard.listing.usage_duration}
                             </small>
                           </div>
@@ -790,7 +790,7 @@ export default async function Page() {
                         <FontAwesomeIcon icon={faCcAmex} size="lg" fixedWidth />
                       </td>
                       <td>
-                        <div className="small text-black-50">{dict.dashboard.listing.last_login}</div>
+                        <div className="small text-black-50 dark:text-gray-500">{dict.dashboard.listing.last_login}</div>
                         <div className="fw-semibold">{dict.dashboard.listing.items.item1.login_at}</div>
                       </td>
                       <td>
@@ -798,7 +798,7 @@ export default async function Page() {
                           <DropdownToggle
                             as="button"
                             bsPrefix="btn"
-                            className="btn-link rounded-0 text-black-50 shadow-none p-0"
+                            className="btn-link rounded-0 text-black-50 dark:text-gray-500 shadow-none p-0"
                             id="action-user1"
                           >
                             <FontAwesomeIcon fixedWidth icon={faEllipsisVertical} />
@@ -834,7 +834,7 @@ export default async function Page() {
                       </td>
                       <td>
                         <div>{dict.dashboard.listing.items.item2.name}</div>
-                        <div className="small text-black-50">
+                        <div className="small text-black-50 dark:text-gray-500">
                           <span>{dict.dashboard.listing.user_status.recurring}</span>
                           {' '}
                           |
@@ -851,7 +851,7 @@ export default async function Page() {
                             <div className="fw-semibold">10%</div>
                           </div>
                           <div className="float-end">
-                            <small className="text-black-50">
+                            <small className="text-black-50 dark:text-gray-500">
                               {dict.dashboard.listing.usage_duration}
                             </small>
                           </div>
@@ -862,7 +862,7 @@ export default async function Page() {
                         <FontAwesomeIcon icon={faCcVisa} size="lg" fixedWidth />
                       </td>
                       <td>
-                        <div className="small text-black-50">{dict.dashboard.listing.last_login}</div>
+                        <div className="small text-black-50 dark:text-gray-500">{dict.dashboard.listing.last_login}</div>
                         <div className="fw-semibold">{dict.dashboard.listing.items.item2.login_at}</div>
                       </td>
                       <td>
@@ -870,7 +870,7 @@ export default async function Page() {
                           <DropdownToggle
                             as="button"
                             bsPrefix="btn"
-                            className="btn-link rounded-0 text-black-50 shadow-none p-0"
+                            className="btn-link rounded-0 text-black-50 dark:text-gray-500 shadow-none p-0"
                             id="action-user2"
                           >
                             <FontAwesomeIcon fixedWidth icon={faEllipsisVertical} />
@@ -906,7 +906,7 @@ export default async function Page() {
                       </td>
                       <td>
                         <div>{dict.dashboard.listing.items.item3.name}</div>
-                        <div className="small text-black-50">
+                        <div className="small text-black-50 dark:text-gray-500">
                           <span>{dict.dashboard.listing.user_status.new}</span>
                           {' '}
                           |
@@ -923,7 +923,7 @@ export default async function Page() {
                             <div className="fw-semibold">74%</div>
                           </div>
                           <div className="float-end">
-                            <small className="text-black-50">
+                            <small className="text-black-50 dark:text-gray-500">
                               {dict.dashboard.listing.usage_duration}
                             </small>
                           </div>
@@ -934,7 +934,7 @@ export default async function Page() {
                         <FontAwesomeIcon icon={faCcStripe} size="lg" fixedWidth />
                       </td>
                       <td>
-                        <div className="small text-black-50">{dict.dashboard.listing.last_login}</div>
+                        <div className="small text-black-50 dark:text-gray-500">{dict.dashboard.listing.last_login}</div>
                         <div className="fw-semibold">{dict.dashboard.listing.items.item3.login_at}</div>
                       </td>
                       <td>
@@ -942,7 +942,7 @@ export default async function Page() {
                           <DropdownToggle
                             as="button"
                             bsPrefix="btn"
-                            className="btn-link rounded-0 text-black-50 shadow-none p-0"
+                            className="btn-link rounded-0 text-black-50 dark:text-gray-500 shadow-none p-0"
                             id="action-user3"
                           >
                             <FontAwesomeIcon fixedWidth icon={faEllipsisVertical} />
@@ -978,7 +978,7 @@ export default async function Page() {
                       </td>
                       <td>
                         <div>{dict.dashboard.listing.items.item4.name}</div>
-                        <div className="small text-black-50">
+                        <div className="small text-black-50 dark:text-gray-500">
                           <span>{dict.dashboard.listing.user_status.new}</span>
                           {' '}
                           |
@@ -995,7 +995,7 @@ export default async function Page() {
                             <div className="fw-semibold">98%</div>
                           </div>
                           <div className="float-end">
-                            <small className="text-black-50">
+                            <small className="text-black-50 dark:text-gray-500">
                               {dict.dashboard.listing.usage_duration}
                             </small>
                           </div>
@@ -1006,7 +1006,7 @@ export default async function Page() {
                         <FontAwesomeIcon icon={faCcPaypal} size="lg" fixedWidth />
                       </td>
                       <td>
-                        <div className="small text-black-50">{dict.dashboard.listing.last_login}</div>
+                        <div className="small text-black-50 dark:text-gray-500">{dict.dashboard.listing.last_login}</div>
                         <div className="fw-semibold">{dict.dashboard.listing.items.item4.login_at}</div>
                       </td>
                       <td>
@@ -1014,7 +1014,7 @@ export default async function Page() {
                           <DropdownToggle
                             as="button"
                             bsPrefix="btn"
-                            className="btn-link rounded-0 text-black-50 shadow-none p-0"
+                            className="btn-link rounded-0 text-black-50 dark:text-gray-500 shadow-none p-0"
                             id="action-user4"
                           >
                             <FontAwesomeIcon fixedWidth icon={faEllipsisVertical} />
@@ -1050,7 +1050,7 @@ export default async function Page() {
                       </td>
                       <td>
                         <div>{dict.dashboard.listing.items.item5.name}</div>
-                        <div className="small text-black-50">
+                        <div className="small text-black-50 dark:text-gray-500">
                           <span>{dict.dashboard.listing.user_status.new}</span>
                           {' '}
                           |
@@ -1067,7 +1067,7 @@ export default async function Page() {
                             <div className="fw-semibold">22%</div>
                           </div>
                           <div className="float-end">
-                            <small className="text-black-50">
+                            <small className="text-black-50 dark:text-gray-500">
                               {dict.dashboard.listing.usage_duration}
                             </small>
                           </div>
@@ -1078,7 +1078,7 @@ export default async function Page() {
                         <FontAwesomeIcon icon={faCcApplePay} size="lg" fixedWidth />
                       </td>
                       <td>
-                        <div className="small text-black-50">{dict.dashboard.listing.last_login}</div>
+                        <div className="small text-black-50 dark:text-gray-500">{dict.dashboard.listing.last_login}</div>
                         <div className="fw-semibold">{dict.dashboard.listing.items.item5.login_at}</div>
                       </td>
                       <td>
@@ -1086,7 +1086,7 @@ export default async function Page() {
                           <DropdownToggle
                             as="button"
                             bsPrefix="btn"
-                            className="btn-link rounded-0 text-black-50 shadow-none p-0"
+                            className="btn-link rounded-0 text-black-50 dark:text-gray-500 shadow-none p-0"
                             id="action-user5"
                           >
                             <FontAwesomeIcon fixedWidth icon={faEllipsisVertical} />
@@ -1122,7 +1122,7 @@ export default async function Page() {
                       </td>
                       <td>
                         <div>{dict.dashboard.listing.items.item6.name}</div>
-                        <div className="small text-black-50">
+                        <div className="small text-black-50 dark:text-gray-500">
                           <span>{dict.dashboard.listing.user_status.new}</span>
                           {' '}
                           |
@@ -1139,7 +1139,7 @@ export default async function Page() {
                             <div className="fw-semibold">43%</div>
                           </div>
                           <div className="float-end">
-                            <small className="text-black-50">
+                            <small className="text-black-50 dark:text-gray-500">
                               {dict.dashboard.listing.usage_duration}
                             </small>
                           </div>
@@ -1150,7 +1150,7 @@ export default async function Page() {
                         <FontAwesomeIcon icon={faCcAmex} size="lg" fixedWidth />
                       </td>
                       <td>
-                        <div className="small text-black-50">{dict.dashboard.listing.last_login}</div>
+                        <div className="small text-black-50 dark:text-gray-500">{dict.dashboard.listing.last_login}</div>
                         <div className="fw-semibold">{dict.dashboard.listing.items.item6.login_at}</div>
                       </td>
                       <td>
@@ -1158,7 +1158,7 @@ export default async function Page() {
                           <DropdownToggle
                             as="button"
                             bsPrefix="btn"
-                            className="btn-link rounded-0 text-black-50 shadow-none p-0"
+                            className="btn-link rounded-0 text-black-50 dark:text-gray-500 shadow-none p-0"
                             id="action-user6"
                           >
                             <FontAwesomeIcon fixedWidth icon={faEllipsisVertical} />
@@ -1184,6 +1184,6 @@ export default async function Page() {
           </Card>
         </div>
       </div>
-    </>
+    </div>
   )
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c2b6c1b..4783355 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import '@fortawesome/fontawesome-svg-core/styles.css'
 import ProgressBar from '@/components/ProgressBar/ProgressBar'
 import DictionaryProvider from '@/locales/DictionaryProvider'
 import { getDictionary } from '@/locales/dictionary'
+import getTheme from '@/themes/theme'
 
 // You change this configuration value to false so that the Font Awesome core SVG library
 // will not try and insert <style> elements into the <head> of the page.
@@ -21,7 +22,7 @@ export default async function RootLayout({
   const dictionary = await getDictionary()
 
   return (
-    <html lang="en">
+    <html lang="en" data-bs-theme={getTheme()}>
       <body>
         <ProgressBar />
         <DictionaryProvider dictionary={dictionary}>
diff --git a/src/components/Layout/Dashboard/Header/HeaderLocale.tsx b/src/components/Layout/Dashboard/Header/HeaderLocale.tsx
index 15a96c3..4e149a9 100644
--- a/src/components/Layout/Dashboard/Header/HeaderLocale.tsx
+++ b/src/components/Layout/Dashboard/Header/HeaderLocale.tsx
@@ -1,17 +1,16 @@
 'use client'
 
 import Cookies from 'js-cookie'
-import React, { useEffect, useState } from 'react'
-import { defaultLocale } from '@/locales/config'
+import React, { useState } from 'react'
 import { useRouter } from 'next/navigation'
 import {
   Dropdown, DropdownItem, DropdownMenu, DropdownToggle, NavLink,
 } from 'react-bootstrap'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faGlobe } from '@fortawesome/free-solid-svg-icons'
+import { faLanguage } from '@fortawesome/free-solid-svg-icons'
 
-export default function HeaderLocale() {
-  const [locale, setLocale] = useState(defaultLocale)
+export default function HeaderLocale({ currentLocale }: { currentLocale: string }) {
+  const [locale, setLocale] = useState(currentLocale)
   const router = useRouter()
 
   const changeLocale = (loc: string) => {
@@ -20,14 +19,10 @@ export default function HeaderLocale() {
     router.refresh()
   }
 
-  useEffect(() => {
-    setLocale(Cookies.get('locale') ?? defaultLocale)
-  }, [])
-
   return (
     <Dropdown>
       <DropdownToggle className="px-2 mx-1 px-sm-3 mx-sm-0" as={NavLink} bsPrefix="hide-caret" id="dropdown-locale">
-        <FontAwesomeIcon icon={faGlobe} size="lg" />
+        <FontAwesomeIcon icon={faLanguage} size="lg" />
       </DropdownToggle>
       <DropdownMenu className="pt-0" align="end">
         <DropdownItem active={locale === 'en'} onClick={() => changeLocale('en')}>
diff --git a/src/components/Layout/Dashboard/Header/HeaderNotificationNav.tsx b/src/components/Layout/Dashboard/Header/HeaderNotificationNav.tsx
index 7a5ad9f..37f4ef9 100644
--- a/src/components/Layout/Dashboard/Header/HeaderNotificationNav.tsx
+++ b/src/components/Layout/Dashboard/Header/HeaderNotificationNav.tsx
@@ -24,7 +24,9 @@ import Link from 'next/link'
 import React, { PropsWithChildren } from 'react'
 import Image from 'next/image'
 import HeaderLocale from '@/components/Layout/Dashboard/Header/HeaderLocale'
-import { getDictionary } from '@/locales/dictionary'
+import { getDictionary, getLocale } from '@/locales/dictionary'
+import HeaderTheme from '@/components/Layout/Dashboard/Header/HeaderTheme'
+import { getPreferredTheme } from '@/themes/theme'
 
 type ItemWithIconProps = {
   icon: IconDefinition;
@@ -45,19 +47,16 @@ export default async function HeaderNotificationNav() {
   const dict = await getDictionary()
   return (
     <Nav>
-      <NavItem>
-        <HeaderLocale />
-      </NavItem>
-      <NavItem>
+      <NavItem className="d-none d-sm-block">
         <Dropdown>
           <DropdownToggle className="px-2 mx-1 px-sm-3 mx-sm-0" as={NavLink} bsPrefix="hide-caret" id="dropdown-notification">
             <FontAwesomeIcon icon={faBell} size="lg" />
-            <Badge pill bg="danger" className="position-absolute top-0 right-0 px-1 px-sm-2">
+            <Badge pill bg="danger" className="position-absolute top-0 end-0 px-1 px-sm-2">
               5
             </Badge>
           </DropdownToggle>
           <DropdownMenu className="pt-0" align="end">
-            <DropdownHeader className="bg-light fw-bold rounded-top">{dict.notification.message.replace('{{total}}', '5')}</DropdownHeader>
+            <DropdownHeader className="fw-bold rounded-top">{dict.notification.message.replace('{{total}}', '5')}</DropdownHeader>
             <Link href="#" passHref legacyBehavior>
               <DropdownItem>
                 <ItemWithIcon icon={faUserPlus}>
@@ -94,7 +93,7 @@ export default async function HeaderNotificationNav() {
               </DropdownItem>
             </Link>
 
-            <DropdownHeader className="bg-light fw-bold">{dict.notification.server.title}</DropdownHeader>
+            <DropdownHeader className="fw-bold">{dict.notification.server.title}</DropdownHeader>
 
             <Link href="#" passHref legacyBehavior>
               <DropdownItem>
@@ -144,16 +143,16 @@ export default async function HeaderNotificationNav() {
           </DropdownMenu>
         </Dropdown>
       </NavItem>
-      <NavItem>
+      <NavItem className="d-none d-sm-block">
         <Dropdown>
           <DropdownToggle className="px-2 mx-1 px-sm-3 mx-sm-0" as={NavLink} bsPrefix="hide-caret" id="dropdown-task">
             <FontAwesomeIcon icon={faList} size="lg" />
-            <Badge pill bg="warning" className="position-absolute top-0 right-0 px-1 px-sm-2">
+            <Badge pill bg="warning" className="position-absolute top-0 end-0 px-1 px-sm-2">
               5
             </Badge>
           </DropdownToggle>
           <DropdownMenu className="pt-0" align="end">
-            <DropdownHeader className="bg-light fw-bold rounded-top">{dict.task.message.replace('{{total}}', '5')}</DropdownHeader>
+            <DropdownHeader className="fw-bold rounded-top">{dict.task.message.replace('{{total}}', '5')}</DropdownHeader>
 
             <Link href="#" passHref legacyBehavior>
               <DropdownItem>
@@ -230,16 +229,16 @@ export default async function HeaderNotificationNav() {
           </DropdownMenu>
         </Dropdown>
       </NavItem>
-      <NavItem>
+      <NavItem className="d-none d-sm-block">
         <Dropdown>
           <DropdownToggle className="px-2 mx-1 px-sm-3 mx-sm-0" as={NavLink} bsPrefix="hide-caret" id="dropdown-mail">
             <FontAwesomeIcon icon={faEnvelope} size="lg" />
-            <Badge pill bg="primary" className="position-absolute top-0 right-0 px-1 px-sm-2">
+            <Badge pill bg="primary" className="position-absolute top-0 end-0 px-1 px-sm-2">
               7
             </Badge>
           </DropdownToggle>
           <DropdownMenu className="pt-0" align="end">
-            <DropdownHeader className="bg-light fw-bold rounded-top">{dict.messages.message.replace('{{total}}', '4')}</DropdownHeader>
+            <DropdownHeader className="fw-bold rounded-top">{dict.messages.message.replace('{{total}}', '4')}</DropdownHeader>
             <Link href="#" passHref legacyBehavior>
               <DropdownItem>
                 <div className="message">
@@ -361,6 +360,12 @@ export default async function HeaderNotificationNav() {
           </DropdownMenu>
         </Dropdown>
       </NavItem>
+      <NavItem>
+        <HeaderLocale currentLocale={getLocale()} />
+      </NavItem>
+      <NavItem>
+        <HeaderTheme currentPreferredTheme={getPreferredTheme()} />
+      </NavItem>
     </Nav>
   )
 }
diff --git a/src/components/Layout/Dashboard/Header/HeaderProfileNav.tsx b/src/components/Layout/Dashboard/Header/HeaderProfileNav.tsx
index 7df0387..baf84d1 100644
--- a/src/components/Layout/Dashboard/Header/HeaderProfileNav.tsx
+++ b/src/components/Layout/Dashboard/Header/HeaderProfileNav.tsx
@@ -66,7 +66,7 @@ export default async function HeaderProfileNav() {
           </div>
         </DropdownToggle>
         <DropdownMenu className="pt-0">
-          <DropdownHeader className="bg-light fw-bold rounded-top">{dict.profile.account.title}</DropdownHeader>
+          <DropdownHeader className="fw-bold rounded-top">{dict.profile.account.title}</DropdownHeader>
           <Link href="#" passHref legacyBehavior>
             <DropdownItem>
               <ItemWithIcon icon={faBell}>
@@ -100,7 +100,7 @@ export default async function HeaderProfileNav() {
             </DropdownItem>
           </Link>
 
-          <DropdownHeader className="bg-light fw-bold">{dict.profile.settings.title}</DropdownHeader>
+          <DropdownHeader className="fw-bold">{dict.profile.settings.title}</DropdownHeader>
 
           <Link href="#" passHref legacyBehavior>
             <DropdownItem>
diff --git a/src/components/Layout/Dashboard/Header/HeaderTheme.tsx b/src/components/Layout/Dashboard/Header/HeaderTheme.tsx
new file mode 100644
index 0000000..cf40426
--- /dev/null
+++ b/src/components/Layout/Dashboard/Header/HeaderTheme.tsx
@@ -0,0 +1,93 @@
+'use client'
+
+import Cookies from 'js-cookie'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import {
+  Dropdown, DropdownItem, DropdownMenu, DropdownToggle, NavLink,
+} from 'react-bootstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCircleHalfStroke, faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
+import { Theme } from '@/themes/enum'
+import useDictionary from '@/locales/dictionary-hook'
+import { useMediaQuery } from 'react-responsive'
+
+const CurrentTheme = ({ theme }: { theme: string }) => (
+  <>
+    {theme === Theme.Light && <FontAwesomeIcon icon={faSun} size="lg" />}
+    {theme === Theme.Dark && <FontAwesomeIcon icon={faMoon} size="lg" />}
+    {theme === Theme.Auto && <FontAwesomeIcon icon={faCircleHalfStroke} size="lg" />}
+  </>
+)
+
+export default function HeaderTheme({ currentPreferredTheme }: { currentPreferredTheme: Theme }) {
+  const dict = useDictionary()
+  const [preferredTheme, setPreferredTheme] = useState<Theme>(currentPreferredTheme)
+  const router = useRouter()
+
+  const changePreferredTheme = useCallback((t: Theme) => {
+    setPreferredTheme(t)
+    Cookies.set('preferred_theme', t)
+
+    if (t === Theme.Auto) {
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        Cookies.set('theme', Theme.Dark)
+        router.refresh()
+        return
+      }
+
+      Cookies.set('theme', Theme.Light)
+      router.refresh()
+      return
+    }
+
+    Cookies.set('theme', t)
+    router.refresh()
+  }, [router])
+
+  const isDarkMode = useMediaQuery(
+    {
+      query: '(prefers-color-scheme: dark)',
+    },
+  )
+
+  useEffect(() => {
+    if (preferredTheme !== Theme.Auto) {
+      return
+    }
+
+    Cookies.set('theme', isDarkMode ? Theme.Dark : Theme.Light)
+    router.refresh()
+  }, [isDarkMode, preferredTheme, router])
+
+  return (
+    <Dropdown>
+      <DropdownToggle className="px-2 mx-1 px-sm-3 mx-sm-0" as={NavLink} bsPrefix="hide-caret" id="dropdown-theme">
+        <CurrentTheme theme={preferredTheme} />
+      </DropdownToggle>
+      <DropdownMenu className="pt-0" align="end">
+        <DropdownItem
+          active={preferredTheme === Theme.Light}
+          onClick={() => changePreferredTheme(Theme.Light)}
+        >
+          <FontAwesomeIcon className="me-2" icon={faSun} fixedWidth />
+          {dict.theme.light}
+        </DropdownItem>
+        <DropdownItem
+          active={preferredTheme === Theme.Dark}
+          onClick={() => changePreferredTheme(Theme.Dark)}
+        >
+          <FontAwesomeIcon className="me-2" icon={faMoon} fixedWidth />
+          {dict.theme.dark}
+        </DropdownItem>
+        <DropdownItem
+          active={preferredTheme === Theme.Auto}
+          onClick={() => changePreferredTheme(Theme.Auto)}
+        >
+          <FontAwesomeIcon className="me-2" icon={faCircleHalfStroke} fixedWidth />
+          {dict.theme.auto}
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  )
+}
diff --git a/src/components/Layout/Dashboard/Sidebar/Sidebar.tsx b/src/components/Layout/Dashboard/Sidebar/Sidebar.tsx
index 7556221..598d8e8 100644
--- a/src/components/Layout/Dashboard/Sidebar/Sidebar.tsx
+++ b/src/components/Layout/Dashboard/Sidebar/Sidebar.tsx
@@ -37,7 +37,7 @@ export default function Sidebar({ children }: { children: React.ReactNode }) {
 
   return (
     <div
-      className={classNames('sidebar d-flex flex-column position-fixed h-100', {
+      className={classNames('sidebar d-flex flex-column position-fixed h-100 border-end', {
         'sidebar-narrow': isNarrow,
         show: isShowSidebar,
         'md-hide': !isShowSidebarMd,
@@ -63,13 +63,13 @@ export default function Sidebar({ children }: { children: React.ReactNode }) {
         </svg>
       </div>
 
-      <div className="sidebar-nav flex-fill">
+      <div className="sidebar-nav flex-fill border-top">
         {children}
       </div>
 
       <Button
         variant="link"
-        className="sidebar-toggler d-none d-md-inline-block rounded-0 text-end pe-4 fw-bold shadow-none"
+        className="sidebar-toggler d-none d-md-inline-block rounded-0 text-end pe-4 fw-bold shadow-none border-top"
         onClick={toggleIsNarrow}
         type="button"
         aria-label="sidebar toggler"
diff --git a/src/components/Page/Dashboard/TrafficChart.tsx b/src/components/Page/Dashboard/TrafficChart.tsx
index 63b4b65..012f303 100644
--- a/src/components/Page/Dashboard/TrafficChart.tsx
+++ b/src/components/Page/Dashboard/TrafficChart.tsx
@@ -13,6 +13,7 @@ import {
   Tooltip,
 } from 'chart.js'
 import useDictionary from '@/locales/dictionary-hook'
+import useComputedStyle from '@/hooks/use-computed-style'
 
 Chart.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Filler)
 
@@ -20,6 +21,8 @@ const random = (min: number, max: number) => Math.floor(Math.random() * (max - m
 
 export default function TrafficChart() {
   const dict = useDictionary()
+  const borderColor = useComputedStyle('--bs-border-color')
+  const bodyColor = useComputedStyle('--bs-body-color')
 
   return (
     <Line
@@ -82,13 +85,24 @@ export default function TrafficChart() {
         scales: {
           x: {
             grid: {
+              color: borderColor,
               drawOnChartArea: false,
             },
+            ticks: {
+              color: bodyColor,
+            },
           },
           y: {
             beginAtZero: true,
+            border: {
+              color: borderColor,
+            },
+            grid: {
+              color: borderColor,
+            },
             max: 250,
             ticks: {
+              color: bodyColor,
               maxTicksLimit: 5,
               stepSize: Math.ceil(250 / 5),
             },
diff --git a/src/components/Page/Pokemon/PokemonList.tsx b/src/components/Page/Pokemon/PokemonList.tsx
index c30ebca..4a04d8e 100644
--- a/src/components/Page/Pokemon/PokemonList.tsx
+++ b/src/components/Page/Pokemon/PokemonList.tsx
@@ -21,8 +21,8 @@ export default function PokemonList(props: Props) {
 
   return (
     <Table responsive bordered hover>
-      <thead className="bg-light">
-        <tr>
+      <thead>
+        <tr className="table-light dark:table-dark">
           <th><THSort name="id">#</THSort></th>
           <th aria-label="Photo" />
           <th><THSort name="name">{dict.pokemons.attribute.name}</THSort></th>
@@ -74,7 +74,7 @@ export default function PokemonList(props: Props) {
                 <DropdownToggle
                   as="button"
                   bsPrefix="btn"
-                  className="btn-link rounded-0 text-black-50 shadow-none p-0"
+                  className="btn-link rounded-0 text-black-50 dark:text-gray-500 shadow-none p-0"
                   id={`action-${pokemon.id}`}
                 >
                   <FontAwesomeIcon fixedWidth icon={faEllipsisVertical} />
diff --git a/src/hooks/use-computed-style.ts b/src/hooks/use-computed-style.ts
new file mode 100644
index 0000000..2e9c1ec
--- /dev/null
+++ b/src/hooks/use-computed-style.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react'
+import Cookies from 'js-cookie'
+
+export default function useComputedStyle(property: string) {
+  const [style, setStyle] = useState('')
+  const theme = Cookies.get('theme')
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+      const element = document.body
+      const computedStyle = window.getComputedStyle(element, null).getPropertyValue(property).replace(/^\s/, '')
+      setStyle(computedStyle)
+    }
+  }, [property, theme])
+
+  return style
+}
diff --git a/src/locales/en/lang.json b/src/locales/en/lang.json
index 659b96c..715b773 100644
--- a/src/locales/en/lang.json
+++ b/src/locales/en/lang.json
@@ -40,6 +40,11 @@
     "submitting": "Submitting...",
     "reset": "Reset"
   },
+  "theme": {
+    "light": "Light",
+    "dark": "Dark",
+    "auto": "Auto"
+  },
   "dashboard": {
     "featured": {
       "user": "Users",
diff --git a/src/locales/ja/lang.json b/src/locales/ja/lang.json
index 9008b42..14dda78 100644
--- a/src/locales/ja/lang.json
+++ b/src/locales/ja/lang.json
@@ -40,6 +40,11 @@
     "submitting": "送信中...",
     "reset": "リセット"
   },
+  "theme": {
+    "light": "ライト",
+    "dark": "ダーク",
+    "auto": "自動"
+  },
   "dashboard": {
     "featured": {
       "user": "ユーザー",
diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
deleted file mode 100755
index e69de29..0000000
diff --git a/src/styles/_custom.scss b/src/styles/_custom.scss
index e69de29..51cefa9 100644
--- a/src/styles/_custom.scss
+++ b/src/styles/_custom.scss
@@ -0,0 +1,13 @@
+@include color-mode(dark) {
+  .dark\:text-gray-500 {
+    color: $gray-500 !important;
+  }
+
+  .dark\:table-dark {
+    @extend .table-dark;
+  }
+
+  .dark\:bg-dark {
+    @extend .bg-dark;
+  }
+}
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 2ca7925..d0114d3 100755
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -8,6 +8,4 @@ $enable-negative-margins: true;
 @import "layout/progress";
 @import "layout/sidebar";
 
-@import "~nprogress/nprogress.css";
-
 @import "_custom";
diff --git a/src/styles/layout/_footer.scss b/src/styles/layout/_footer.scss
index a34a13c..b52d648 100644
--- a/src/styles/layout/_footer.scss
+++ b/src/styles/layout/_footer.scss
@@ -1,5 +1,3 @@
-$header-background: #fff;
-$header-link-color: rgba(44, 56, 74, 0.681);
 $footer-height: 3rem;
 
 .footer {
diff --git a/src/styles/layout/_header.scss b/src/styles/layout/_header.scss
index 4670f2b..04e198a 100644
--- a/src/styles/layout/_header.scss
+++ b/src/styles/layout/_header.scss
@@ -1,28 +1,46 @@
 $header-background: #fff;
+$header-background-dark: #212529;
 $header-link-color: rgba(44, 56, 74, 0.681);
+$header-link-color-dark: var(--#{$prefix}body-color);
 $header-link-color-hover: rgba(44, 56, 74, 0.95);
+$header-link-color-hover-dark: #999;
 $header-brand-color: #4f5d73;
+$header-brand-color-dark: var(--#{$prefix}body-color);
+
+:root {
+  --header-background: #{$header-background};
+  --header-link-color: #{$header-link-color};
+  --header-link-color-hover: #{$header-link-color-hover};
+  --header-brand-color: #{$header-brand-color};
+}
+
+@include color-mode(dark) {
+  --header-background: #{$header-background-dark};
+  --header-link-color: #{$header-link-color-dark};
+  --header-link-color-hover: #{$header-link-color-hover-dark};
+  --header-brand-color: #{$header-brand-color-dark};
+}
 
 .header {
-  background: $header-background;
+  background: var(--header-background);
 
   .header-brand {
-    color: $header-brand-color;
+    color: var(--header-brand-color);
   }
 
   .header-navbar {
     min-height: 3rem;
 
     .header-toggler {
-      color: $header-link-color;
+      color: var(--header-link-color);
     }
 
     .header-nav {
       .nav-link {
-        color: $header-link-color;
+        color: var(--header-link-color);
 
         &:hover {
-          color: $header-link-color-hover;
+          color: var(--header-link-color-hover);
         }
       }
     }
@@ -33,10 +51,10 @@ $header-brand-color: #4f5d73;
 
     .breadcrumb-item {
       a {
-        color: $header-link-color;
+        color: var(--header-link-color);
 
         &:hover {
-          color: $header-link-color-hover;
+          color: var(--header-link-color-hover);
         }
       }
     }
diff --git a/src/styles/layout/_sidebar.scss b/src/styles/layout/_sidebar.scss
index af99f43..663e4fb 100644
--- a/src/styles/layout/_sidebar.scss
+++ b/src/styles/layout/_sidebar.scss
@@ -1,13 +1,18 @@
 $sidebar-background: #3c4b64;
+$sidebar-background-dark: var(--#{$prefix}body-bg);
 $sidebar-text-color: rgba(255, 255, 255, 0.6);
 $sidebar-brand-height: 4rem;
 $sidebar-brand-background: rgba(0, 0, 21, 0.2);
+$sidebar-brand-background-dark: #1a1e26;
+$sidebar-border-color: #3c4b64;
+$sidebar-border-color-dark: var(--#{$prefix}border-color);
 $sidebar-nav-group-background: rgba(0, 0, 0, 0.2);
 $sidebar-link-color: rgba(255, 255, 255, 0.6);
 $sidebar-link-color-hover: rgba(255, 255, 255, 0.87);
 $sidebar-link-background-hover: rgba(255, 255, 255, 0.05);
 $sidebar-toggler-height: 3rem;
 $sidebar-toggler-background: rgba(0, 0, 21, 0.2);
+$sidebar-toggler-background-dark: #1a1e26;
 $sidebar-toggler-background-hover: rgba(0, 0, 0, 0.3);
 $sidebar-toggler-color: rgba(255, 255, 255, 0.6);
 $sidebar-toggler-color-hover: #ffffff;
@@ -16,12 +21,23 @@ $sidebar-overlay-z-index: 1025;
 
 :root {
   --sidebar-width: 16rem;
+  --sidebar-background: #{$sidebar-background};
+  --sidebar-brand-background: #{$sidebar-brand-background};
+  --sidebar-toggler-background: #{$sidebar-toggler-background};
+  --sidebar-border-color: #{$sidebar-border-color}
+}
+
+@include color-mode(dark) {
+  --sidebar-background: #{$sidebar-background-dark};
+  --sidebar-brand-background: #{$sidebar-brand-background-dark};
+  --sidebar-toggler-background: #{$sidebar-toggler-background-dark};
+  --sidebar-border-color: #{$sidebar-border-color-dark}
 }
 
 .sidebar {
   flex: 0 0 var(--sidebar-width);
   width: var(--sidebar-width);
-  background: $sidebar-background;
+  background: var(--sidebar-background);
   color: $sidebar-text-color;
   transition: margin-left 0.15s, margin-right 0.15s, box-shadow 0.075s, transform 0.15s, width 0.15s, z-index 0s ease 0.15s;
   z-index: $sidebar-z-index;
@@ -33,12 +49,13 @@ $sidebar-overlay-z-index: 1025;
 
   .sidebar-brand {
     flex: 0 0 $sidebar-brand-height;
-    background: $sidebar-brand-background;
+    background: var(--sidebar-brand-background);
   }
 
   .sidebar-nav {
     overflow-x: hidden;
     overflow-y: auto;
+    border-top-color: var(--sidebar-border-color) !important;
 
     .nav-title {
       font-size: 80%;
@@ -83,8 +100,9 @@ $sidebar-overlay-z-index: 1025;
 
   .sidebar-toggler {
     flex: 0 0 $sidebar-toggler-height;
-    background: $sidebar-toggler-background;
+    background: var(--sidebar-toggler-background);
     color: $sidebar-toggler-color;
+    border-top-color: var(--sidebar-border-color) !important;
 
     &:hover {
       background: $sidebar-toggler-background-hover;
@@ -134,6 +152,10 @@ $sidebar-overlay-z-index: 1025;
         & + .wrapper {
           --sidebar-width: 4rem;
         }
+
+        .nav-link {
+          white-space: nowrap;
+        }
       }
     }
 
diff --git a/src/themes/enum.ts b/src/themes/enum.ts
new file mode 100644
index 0000000..60b8127
--- /dev/null
+++ b/src/themes/enum.ts
@@ -0,0 +1,5 @@
+export enum Theme {
+  Light = 'light',
+  Dark = 'dark',
+  Auto = 'auto',
+}
diff --git a/src/themes/theme.ts b/src/themes/theme.ts
new file mode 100644
index 0000000..03b9fac
--- /dev/null
+++ b/src/themes/theme.ts
@@ -0,0 +1,24 @@
+import 'server-only'
+
+import { cookies } from 'next/headers'
+import { Theme } from '@/themes/enum'
+
+export const getPreferredTheme = () => {
+  const preferredThemeCookies = (cookies().get('preferred_theme')?.value ?? Theme.Auto) as Theme
+
+  if (!Object.values(Theme).includes(preferredThemeCookies)) {
+    return Theme.Auto
+  }
+
+  return preferredThemeCookies
+}
+
+export default function getTheme() {
+  const themeCookies = (cookies().get('theme')?.value ?? Theme.Light) as Theme
+
+  if (themeCookies !== Theme.Light && themeCookies !== Theme.Dark) {
+    return Theme.Light
+  }
+
+  return themeCookies
+}