diff --git a/.gitpod.yml b/.gitpod.yml
new file mode 100644
index 0000000..50d74ae
--- /dev/null
+++ b/.gitpod.yml
@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: pnpm install && pnpm run build
+    command: pnpm run start
+
+
diff --git a/components/Hero/index.tsx b/components/Hero/index.tsx
index 007698b..3761ef4 100644
--- a/components/Hero/index.tsx
+++ b/components/Hero/index.tsx
@@ -10,7 +10,7 @@ import {useState,useEffect} from 'react';
 import axios from 'axios';
 import FormData from 'form-data';
 import Image from "next/image";
-
+import '../../styles/mode.css'
 const Hero = () => {
   const [addresses, setAddresses] = useState(data);
   const EVStationData = chargingData;
@@ -215,6 +215,7 @@ const nearbyAddresses = searchNearbyAddressesWithIncreasedRadius(5, 20);
             alt="Animated GIF"
             className="object-cover mt-[200px]"
             width={400}
+            id="image"
             height={400}
           />
         </div>
@@ -253,7 +254,7 @@ const nearbyAddresses = searchNearbyAddressesWithIncreasedRadius(5, 20);
               transform="rotate(-13.421 214.505 60.5054)"
               stroke="url(#paint4_linear_25:218)"
             />
-            <circle cx="220" cy="63" r="43" fill="url(#paint5_radial_25:218)" />
+            <circle cx="220" cy="63" r="43" fill="url(#paint5_radial_25:218)" id="circle" />
             <defs>
               <linearGradient
                 id="paint0_linear_25:218"
diff --git a/package-lock.json b/package-lock.json
index 0183264..2f25b64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "bufferutil": "^4.0.8",
         "eslint": "8.33.0",
         "eslint-config-next": "13.1.6",
+        "ethers": "^5.7.2",
         "firebase": "^10.7.1",
         "next": "^13.5.6",
         "next-themes": "^0.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fd8388a..9b96113 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7028,4 +7028,4 @@ packages:
   /yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
-    dev: false
+    dev: false
\ No newline at end of file
diff --git a/styles/mode.css b/styles/mode.css
new file mode 100644
index 0000000..607057f
--- /dev/null
+++ b/styles/mode.css
@@ -0,0 +1,6 @@
+.light #image{
+    filter:invert(8%);
+}
+.light #circle{
+    filter: invert(1);
+}
\ No newline at end of file