diff --git a/src/components/connectOverlay/ConnectOverlay.tsx b/src/components/connectOverlay/ConnectOverlay.tsx
index 729e0b3..1abd12c 100644
--- a/src/components/connectOverlay/ConnectOverlay.tsx
+++ b/src/components/connectOverlay/ConnectOverlay.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import WebApp from '@twa-dev/sdk';
 import { PulseLoader } from 'react-spinners';
@@ -43,11 +43,22 @@ const ConnectOverlay: React.FC<Props> = ({
     close,
     onConnect,
 }) => {
+    // Redux
     const connectionState = useSelector(
         (state: RootState) => state.connection.connectionState
     );
     const dispatch = useDispatch<AppDispatch>();
 
+    // Dark Mode
+    const [darkMode, setDarkMode] = useState<boolean>(
+        WebApp.colorScheme === 'dark'
+    );
+    useEffect(() => {
+        setDarkMode(WebApp.colorScheme === 'dark');
+        document.documentElement.classList.toggle('dark', darkMode);
+        localStorage.setItem('theme', darkMode ? 'dark' : 'light');
+    }, [WebApp.colorScheme]);
+
     const [networksExpanded, setNetworksExpanded] = useState(true);
     const [ethereumWalletsExpanded, setEthereumWalletsExpanded] =
         useState(false);
@@ -202,30 +213,39 @@ const ConnectOverlay: React.FC<Props> = ({
     };
 
     return (
-        <div className={`connect-overlay ${slideAnimation}`}>
+        <div
+            className={`connect-overlay ${slideAnimation}`}
+            style={
+                darkMode
+                    ? {
+                          backgroundColor: '#262233',
+                      }
+                    : {}
+            }
+        >
             <div className="flex justify-between text-left py-3 px-4">
                 {connectionState === 'connecting' && (
-                    <p className="m-0 text-lg font-bold text-customBlackText">
+                    <p className="m-0 text-lg font-bold text-customBlackText dark:text-customDarkModeTextColor">
                         Connecting
                     </p>
                 )}
                 {connectionState === 'disconnected' && (
-                    <p className="m-0 text-lg font-bold text-customBlackText">
+                    <p className="m-0 text-lg font-bold text-customBlackText dark:text-customDarkModeTextColor">
                         Connect Wallet
                     </p>
                 )}
                 {connectionState === 'connected' && (
-                    <p className="m-0 text-lg font-bold text-customBlackText">
+                    <p className="m-0 text-lg font-bold text-customBlackText dark:text-customDarkModeTextColor">
                         Account Details
                     </p>
                 )}
                 {connectionState === 'error' && (
-                    <p className="m-0 text-lg font-bold text-customBlackText">
+                    <p className="m-0 text-lg font-bold text-customBlackText dark:text-customDarkModeTextColor">
                         Connection Error
                     </p>
                 )}
                 {connectionState === 'retrying' && (
-                    <p className="m-0 text-lg font-bold text-customBlackText">
+                    <p className="m-0 text-lg font-bold text-customBlackText dark:text-customDarkModeTextColor">
                         Retrying
                     </p>
                 )}
@@ -243,10 +263,12 @@ const ConnectOverlay: React.FC<Props> = ({
                         <PulseLoader size={12} margin={5} color="#2D2D2D" />
                     </div>
                     <div>
-                        <p className="text-lg m-4 mt-2">Connecting Wallet</p>
+                        <p className="text-lg m-4 mt-2 dark:text-customDarkModeTextColor">
+                            Connecting Wallet
+                        </p>
                     </div>
                     <div>
-                        <p className="m-4 mb-8 px-10">
+                        <p className="m-4 mb-8 px-10 dark:text-customDarkModeTextColor">
                             Please connect your Wallet & approve transaction
                         </p>
                     </div>
@@ -255,7 +277,7 @@ const ConnectOverlay: React.FC<Props> = ({
             {connectionState === 'disconnected' && (
                 <>
                     <div className="flex py-4 px-5 justify-between">
-                        <p className="m-0 text-customBlackText text-base font-medium">
+                        <p className="m-0 text-customBlackText text-base font-medium dark:text-customDarkModeTextColor">
                             Choose Network
                         </p>
                         <img
@@ -291,7 +313,7 @@ const ConnectOverlay: React.FC<Props> = ({
                         </div>
                     )}
                     <div className="flex py-4 px-5 justify-between">
-                        <p className="m-0 text-customBlackText text-base font-medium">
+                        <p className="m-0 text-customBlackText text-base font-medium dark:text-customDarkModeTextColor">
                             Select Wallet
                         </p>
                         <img
@@ -348,7 +370,11 @@ const ConnectOverlay: React.FC<Props> = ({
                                     alt=""
                                 />
                             </div>
-                            {account && <p>{truncateText(account, 8, 8)}</p>}
+                            {account && (
+                                <p className="dark:text-customDarkModeTextColor">
+                                    {truncateText(account, 8, 8)}
+                                </p>
+                            )}
                         </div>
                         <div className="flex justify-between my-2 mx-1 p-2 mr-4 gap-4">
                             <div
@@ -356,7 +382,7 @@ const ConnectOverlay: React.FC<Props> = ({
                                 onClick={copyAccountToClipboard}
                             >
                                 <img src={copyIcon} alt="" />
-                                <p className="text-xs text-customGrayAccountDetails font-normal">
+                                <p className="text-xs text-customGrayAccountDetails font-normal dark:text-customDarkModeTextColor">
                                     Copy Address
                                 </p>
                             </div>
@@ -365,7 +391,7 @@ const ConnectOverlay: React.FC<Props> = ({
                                 onClick={viewOnExplorer}
                             >
                                 <img src={documentIcon} alt="" />
-                                <p className="text-xs text-customGrayAccountDetails font-normal">
+                                <p className="text-xs text-customGrayAccountDetails font-normal dark:text-customDarkModeTextColor">
                                     View on explorer
                                 </p>
                             </div>
@@ -373,7 +399,7 @@ const ConnectOverlay: React.FC<Props> = ({
                     </div>
                     <div className="flex justify-between">
                         <div className="flex align-middle items-center">
-                            <p className="text-xs">
+                            <p className="text-xs dark:text-customDarkModeTextColor">
                                 Connected with{' '}
                                 {window.localStorage.getItem('walletProvider')}
                             </p>
@@ -393,11 +419,11 @@ const ConnectOverlay: React.FC<Props> = ({
                         <img src={dangerIcon} alt="" />
                     </div>
                     <div>
-                        <p className="text-lg font-normal">
+                        <p className="text-lg font-normal dark:text-customDarkModeTextColor">
                             An Unwanted Error Occurred
                         </p>
                     </div>
-                    <div className="flex flex-col mb-4">
+                    <div className="flex flex-col mb-4 dark:text-customDarkModeTextColor">
                         <p>Wallet not connected.</p>
                         <p>Please try again</p>
                     </div>
diff --git a/src/components/connectOverlay/NetworkBadge.tsx b/src/components/connectOverlay/NetworkBadge.tsx
index 55f566b..b4843d1 100644
--- a/src/components/connectOverlay/NetworkBadge.tsx
+++ b/src/components/connectOverlay/NetworkBadge.tsx
@@ -37,7 +37,7 @@ const NetworkBadge: React.FC<Props> = ({
             style={{ backgroundColor: selected ? backgroundColor : '' }}
         >
             <img className="w-11 h-11" src={icon} alt="" />
-            <p>{network}</p>
+            <p className="dark:text-customDarkModeTextColor">{network}</p>
         </div>
     );
 };
diff --git a/src/components/connectOverlay/WalletBadge.tsx b/src/components/connectOverlay/WalletBadge.tsx
index dea9ee8..db5b157 100644
--- a/src/components/connectOverlay/WalletBadge.tsx
+++ b/src/components/connectOverlay/WalletBadge.tsx
@@ -34,7 +34,7 @@ const WalletBadge: React.FC<Props> = ({
             style={{ backgroundColor: selected ? backgroundColor : '' }}
         >
             <img className="w-9 h-9" src={icon} alt="" />
-            <p>{walletName}</p>
+            <p className="dark:text-customDarkModeTextColor">{walletName}</p>
         </div>
     );
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index 6ef468c..934fe62 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+    darkMode: 'class',
     content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
     theme: {
         extend: {
@@ -18,6 +19,8 @@ export default {
                 customBlueSelected: '#B9C1F4',
                 customGrayLine: '#c6c6c6',
                 customGrayAccountDetails: '#616161',
+                customDarkModeBackground: '#262233',
+                customDarkModeTextColor: '#DEDEDE',
             },
             gridTemplateColumns: {
                 'custom-1-3-1': '1fr 3fr 1fr',
diff --git a/vite.config.ts b/vite.config.ts
index f5ef820..482c5cc 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,4 +9,7 @@ export default defineConfig({
         outDir: './docs',
     },
     base: './',
+    server: {
+        port: 5174,
+    },
 });