diff --git a/components/DvpnMap.js b/components/DvpnMap.js
index 06e8539..5978468 100644
--- a/components/DvpnMap.js
+++ b/components/DvpnMap.js
@@ -50,7 +50,6 @@ const DvpnMap = ({ nodes }) => {
       offsetMap[key].push(node);
     });
 
-    // Apply circular offsets
     const finalOffsets = {};
     for (const key in offsetMap) {
       const nodesAtLocation = offsetMap[key];
@@ -66,17 +65,16 @@ const DvpnMap = ({ nodes }) => {
     return null;
   }
 
-  // Function to style each country based on the node count
   const getCountryStyle = (feature) => {
     const country = feature.properties.ISO_A2;
     const count = nodes.filter(node => node.ipinfocountry === country).length;
 
     return {
       fillColor: count > 3 ? '#0e038c' :
-                count > 2 ? '#1500ff' :
-                count > 1 ? '#007bff' :
-                count > 0  ? '#7fd0f5' :
-                             '#f7f7f7', // Default color for zero nodes
+        count > 2 ? '#1500ff' :
+          count > 1 ? '#007bff' :
+            count > 0 ? '#7fd0f5' :
+              '#f7f7f7',
       weight: 2,
       opacity: 1,
       color: 'white',
@@ -85,7 +83,6 @@ const DvpnMap = ({ nodes }) => {
     };
   };
 
-  // Function to create a tooltip with the node count only for countries with nodes
   const onEachCountry = (feature, layer) => {
     const country = feature.properties.ISO_A2;
     const count = nodes.filter(node => node.ipinfocountry === country).length;
@@ -107,16 +104,13 @@ const DvpnMap = ({ nodes }) => {
         zoom={2}
         minZoom={2}
         maxZoom={10}
-        style={{ height: '100%', width: '100%', padding: '20px', borderRadius: '20px', border: '2px solid gray',   boxShadow: '0 0px 25px black'}}
-        // className="leaflet-container"
-        // maxBounds={[[-90, -180], [90, 180]]}
-        // maxBoundsViscosity={1.0}
+        style={{ height: '100%', width: '100%', padding: '20px', borderRadius: '20px', border: '2px solid gray', boxShadow: '0 0px 25px black' }}
       >
         <TileLayer
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
           attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         />
-        {/* <TileLayer
+{/* <TileLayer
           url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png" // CartoDB Dark theme URL
           attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | Map tiles by <a href="https://carto.com/attributions">CartoDB</a>'
           noWrap={true}
@@ -127,7 +121,6 @@ const DvpnMap = ({ nodes }) => {
           noWrap={true}
         /> */}
 
-        {/* Add GeoJSON layer for the choropleth */}
         <GeoJSON
           data={geojsonData}
           style={getCountryStyle}
@@ -153,6 +146,7 @@ const DvpnMap = ({ nodes }) => {
           );
         })}
       </MapContainer>
+
       <style jsx>{`
         @keyframes pulse {
           0% {
@@ -205,4 +199,3 @@ const DvpnMap = ({ nodes }) => {
 };
 
 export default DvpnMap;
-
diff --git a/components/DwifiMap.js b/components/DwifiMap.js
index 0559f83..d259f92 100644
--- a/components/DwifiMap.js
+++ b/components/DwifiMap.js
@@ -26,7 +26,7 @@ export default function DwifiMap() {
     };
 
     socket.onmessage = function (event) {
-      console.log('Received:', event.data);
+      console.log('Received:');
     };
 
     socket.onerror = function (event) {
diff --git a/components/NodesData.js b/components/NodesData.js
index 94b271b..11e9eb7 100644
--- a/components/NodesData.js
+++ b/components/NodesData.js
@@ -413,7 +413,23 @@ const NodesData = () => {
               </tr>
             </thead>
               <tbody>
-              {filteredNodesData.map((node) => (
+              {nodesdata.length === 0 ? (
+                <tr className="table-row" style={{ height: "60px" }}>
+                  <td
+                    colSpan="8" 
+                    style={{ 
+                      textAlign: "center",
+                      border: "solid 1px #FFFFFF66",
+                      padding: "16px" 
+                    }}
+                  >
+                    <div className="flex justify-center items-center py-2 px-4">
+                      No Nodes Available
+                    </div>
+                  </td>
+                </tr>
+              ) : (
+              filteredNodesData.map((node) => (
                 <tr
                   key={node.id}
                   className={`table-row cursor-pointer ${
@@ -473,7 +489,8 @@ const NodesData = () => {
                   </td>
                   {/* <td style={{paddingTop:'20px'}}>{node.lastPinged}</td> */}
                 </tr>
-              ))}
+              ))
+              )}
             </tbody>
             </table>
           </div>
diff --git a/components/nodedataDwifi.js b/components/nodedataDwifi.js
index 99b35ce..4433256 100644
--- a/components/nodedataDwifi.js
+++ b/components/nodedataDwifi.js
@@ -181,7 +181,7 @@ const NodeDwifiStream = () => {
         onClick={() => setShowSortOptions(!showSortOptions)}
         className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-12 rounded"
       >
-        Sort By: {sortBy || 'Select'}
+        {sortBy || 'Sort By'}
       </button>
       {showSortOptions && (
         <div className="absolute right-0 mt-2 w-48 bg-blue-500 rounded-md shadow-lg z-10">
@@ -240,7 +240,7 @@ const NodeDwifiStream = () => {
                 <th style={{ border: "solid 1px #FFFFFF66" }}>
                   <div className="flex gap-4 justify-center items-center pt-4 pb-4 px-4">
                     <img src="/dwifi4.png" className="w-10 h-10" />
-                    <div>Price_per_min</div>
+                    <div>Price/min</div>
                   </div>
                 </th>
                 <th style={{ border: "solid 1px #FFFFFF66" }}>
diff --git a/pages/dwifi.tsx b/pages/dwifi.tsx
index 242a446..cedace1 100644
--- a/pages/dwifi.tsx
+++ b/pages/dwifi.tsx
@@ -13,43 +13,67 @@ const Dwifi = () => {
       <div className="bg-black">
       <div className="mx-auto py-20"
         style={{
-          backgroundImage: 'radial-gradient(circle at left, rgba(86, 150, 255, 0.6) 4%, #0162FF80 10%, black 30%), url("/explorer2.png")',  
+          backgroundImage: 'radial-gradient(circle at 0% 7%, rgba(86, 150, 255, 0.6) 4%, #0162FF80 10%, black 30%), url("/explorer2.png")',  
             backgroundSize: 'cover',
             backgroundBlendMode: 'overlay',
           }}
           >
-      <div className="flex flex-col items-start justify-start lg:h-full mt-10 lg:ml-0 lg:mr-0 md:ml-0 md:mr-0 ml-4 mr-4 mb-36 lg:mb-0 px-20 ">
+      <div className="flex flex-col lg:flex-row items-start justify-between lg:h-full mt-10 lg:ml-0 lg:mr-0 md:ml-0 md:mr-0 ml-4 mr-4 mb-36 lg:mb-0 px-4 lg:px-20">
+      <div className="flex flex-col items-start justify-start">
         <motion.h1
           initial={{ y: 100, opacity: 0 }}
           animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
-          className="text-6xl font-semibold text-gray-300 mb-8 w-3/5"
+          className="text-4xl md:text-5xl lg:text-6xl font-semibold text-gray-300 mb-8 lg:w-4/5"
         >
-          Decentralized Connectivity 
-          with Erebrus ÐWi-Fi
+          Decentralized Connectivity with Erebrus ÐWi-Fi
         </motion.h1>
         <motion.h1
           initial={{ y: 100, opacity: 0 }}
           animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
-          className="text-2xl text-white mb-8"
+          className="text-xl md:text-2xl text-white mb-8 w-full"
         >
-          <p>
-          Secure and fast Wi-Fi Everywhere
-          </p>
+          <p>Secure and fast Wi-Fi Everywhere</p>
         </motion.h1>
         <motion.div
           initial={{ y: 100, opacity: 0 }}
           animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
           className="text-black font-bold py-3 px-10 rounded-full bg-white text-lg" 
-          // style={{backgroundImage: 'linear-gradient(#FFFFFF00, #0099FF)'}}
         >
-          <Link href="https://discord.com/invite/5uaFhNpRF6" target="_blank"
-            rel="noopener noreferrer">
+          <Link href="https://discord.com/invite/5uaFhNpRF6" target="_blank" rel="noopener noreferrer">
             Run Your Node
           </Link>
         </motion.div>
       </div>
+      
+      {/* Animated Image */}
+      <div className="hidden lg:block lg:w-1/3">
+        <img 
+          src="/gradient-vpn-illustration.png" 
+          alt="Decorative GIF" 
+          className="w-full h-auto opacity-90 shadow-lg"
+          style={{
+            animation: 'scaleUpDown 2s infinite'
+          }}
+        />
+      </div>
+
+      <style jsx>{`
+        @keyframes scaleUpDown {
+          0% {
+            transform: scale(1);
+          }
+          50% {
+            transform: scale(1.1);
+          }
+          100% {
+            transform: scale(1);
+          }
+        }
+      `}</style>
+      
+    </div>
     </div>
-    <div className="bg-[#20253A] pt-16 px-20">
+    <div className=" bg-gradient-to-b from-black to-[#20253A] lg:px-20 pt-16 px-20">
           <div className="text-2xl font-semibold text-gray-300 mb-8 ">
           Erebrus Decentralized Wi-Fi (ÐWi-Fi) Network Nodes Overview
           </div>
@@ -58,10 +82,7 @@ const Dwifi = () => {
             Discover the Erebrus decentralized Wi-Fi network with our interactive map. View real-time details about Wi-Fi hotspots, including their location, performance, and usage stats. This dashboard helps you find secure and fast Wi-Fi connections globally.            </p>
           </div>
         </div>
-    <div className="map-page" style={{ height: '100vh', width: '100vw' }}>
-      
-      <div className="map-controls" style={{ position: 'absolute', top: 10, left: 10, zIndex: 1000 }}>
-      </div>
+    <div className="map-page" style={{ height: '100vh'}}>
       <div className="map-container" style={{ height: '100%', width: '100%' }}>
           <DwifiMap />
       </div>
diff --git a/pages/explorer.js b/pages/explorer.js
index 1610241..70b4180 100644
--- a/pages/explorer.js
+++ b/pages/explorer.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import NodesData from "../components/NodesData";
 import dynamic from 'next/dynamic';
@@ -13,75 +13,108 @@ const Explorer = () => {
 
   useEffect(() => {
     async function fetchNodes() {
-      const response = await fetch(`${EREBRUS_GATEWAY_URL}api/v1.0/nodes/all`);
-      const data = await response.json();
-      setNodes(data.payload);
+      try {
+        const response = await fetch(`${EREBRUS_GATEWAY_URL}api/v1.0/nodes/all`);
+        const data = await response.json();
+        if (data && Array.isArray(data.payload)) {
+          setNodes(data.payload);
+        } else {
+          setNodes([]);
+          console.warn("Received invalid data payload from API.");
+        }
+      } catch (error) {
+        console.error("Error fetching nodes data:", error);
+        setNodes([]);
+      }
     }
     fetchNodes();
   }, []);
 
-    return (
-      <div className="bg-[#040819] ">
-        <div className="mx-auto py-20 "
-          style={{
-            backgroundImage: 'radial-gradient(circle at left, rgba(86, 150, 255, 0.6) 4%, #0162FF80 10%, black 30%), url("/explorer4.png") ',  
-              backgroundSize: 'cover',
-              backgroundBlendMode: 'overlay',
-            }}
-            >
-        <div className="flex flex-col items-start justify-start lg:h-full mt-10 lg:ml-0 lg:mr-0 md:ml-0 md:mr-0 ml-4 mr-4 mb-36 lg:mb-0 px-20 ">
+  return (
+    <div className="bg-[#040819]">
+      <div className="mx-auto relative flex flex-col lg:flex-row items-center lg:items-start lg:justify-between p-4 lg:p-10"
+        style={{
+          backgroundImage: 'radial-gradient(circle at 0% 7%, rgba(86, 150, 255, 0.6) 4%, #0162FF80 10%, black 30%), url("/explorer4.png")',
+          backgroundSize: 'cover',
+          backgroundBlendMode: 'overlay',
+        }}
+      >
+        <div className="flex flex-col items-center lg:items-start lg:w-2/3 lg:pr-10 text-left">
           <motion.h1
             initial={{ y: 100, opacity: 0 }}
             animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
-            className="text-6xl font-semibold text-gray-300 mb-8 w-3/5"
+            className="text-6xl font-semibold text-gray-300 mb-8 px-4"
           >
             Decentralized Access with 
+            <br />
             Erebrus ÐVPN
           </motion.h1>
           <motion.h1
             initial={{ y: 100, opacity: 0 }}
             animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
-            className="text-2xl text-white mb-8"
+            className="text-2xl text-white mb-8 px-4"
           >
             <p>
-            Unrestricted Uncensored Web Access
+              Unrestricted Uncensored Web Access
             </p>
           </motion.h1>
           <motion.div
             initial={{ y: 100, opacity: 0 }}
             animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
-            className="text-black font-bold py-3 px-10 rounded-full bg-white text-lg" 
-            // style={{backgroundImage: 'linear-gradient(#FFFFFF00, #0099FF)'}}
+            className="text-black font-bold py-3 px-10 rounded-full bg-white text-lg inline-block"
           >
-            <Link href="https://discord.com/invite/5uaFhNpRF6" target="_blank"
-              rel="noopener noreferrer">
+            <Link href="https://discord.com/invite/5uaFhNpRF6" target="_blank" rel="noopener noreferrer">
               Run Your Node
             </Link>
           </motion.div>
         </div>
+
+        <div className="hidden lg:block lg:w-1/3 relative">
+          <img 
+            src="/gradient-vpn-illustration.png" 
+            alt="Decorative GIF" 
+            className="w-full h-auto opacity-90 shadow-lg"
+            style={{
+              animation: 'scaleUpDown 2s infinite'
+            }}
+          />
+        </div>
       </div>
-            {/* <img src="/mapRegions.png"/> */}
-        <div className="bg-[#20253A] pt-16 px-20">
-          <div className="text-2xl font-semibold text-gray-300 mb-8 "
-          >
-            Erebrus Decentralized VPN (ÐVPN) Network Nodes Overview
-          </div>
-          <div className="text-white"
-          >
-            <p>
-            Explore the Erebrus decentralized VPN network with our interactive map. View detailed information on active nodes, including their location, network performance, and status. This map provides real-time insights into the global distribution and operation of our secure and private VPN infrastructure.
-            </p>
-          </div>
+
+      <div className="pt-16 px-4 lg:px-20 bg-gradient-to-b from-black to-[#20253A]">
+        <div className="text-2xl font-semibold text-gray-300 mb-8">
+          Erebrus Decentralized VPN (ÐVPN) Network Nodes Overview
         </div>
-        <div className="map-page" style={{ height: '100vh', width: '100vw' }}>
-          <div className="map-container" style={{ height: '100%', width: '100%' }}>
-              <DvpnMap nodes={nodes} />
-          </div>
+        <div className="text-white">
+          <p>
+            Explore the Erebrus decentralized VPN network with our interactive map. View detailed information on active nodes, including their location, network performance, and status. This map provides real-time insights into the global distribution and operation of our secure and private VPN infrastructure.
+          </p>
         </div>
+      </div>
 
-        <NodesData />
+      <div className="map-page" style={{ height: '100vh' }}>
+        <div className="map-container" style={{ height: '100%', width: '100%' }}>
+          <DvpnMap nodes={nodes} />
+        </div>
       </div>
-    )
+
+      <NodesData />
+      
+      <style jsx>{`
+        @keyframes scaleUpDown {
+          0% {
+            transform: scale(1);
+          }
+          50% {
+            transform: scale(1.1);
+          }
+          100% {
+            transform: scale(1);
+          }
+        }
+      `}</style>
+    </div>
+  );
 }
 
 export default Explorer;
diff --git a/public/gradient-vpn-illustration.png b/public/gradient-vpn-illustration.png
new file mode 100644
index 0000000..bd1939c
Binary files /dev/null and b/public/gradient-vpn-illustration.png differ