diff --git a/.gitignore b/.gitignore
index ab2a853..11f1248 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,7 +41,7 @@ yarn-error.log*
 next-env.d.ts
 
 # local databases & temporary files
-backend/netify_data.db*
+
 temp.json
 /scratch
 
diff --git a/backend/netify_data.db b/backend/netify_data.db
new file mode 100644
index 0000000..34419b5
Binary files /dev/null and b/backend/netify_data.db differ
diff --git a/backend/netify_data.db-shm b/backend/netify_data.db-shm
new file mode 100644
index 0000000..697c40a
Binary files /dev/null and b/backend/netify_data.db-shm differ
diff --git a/backend/netify_data.db-wal b/backend/netify_data.db-wal
new file mode 100644
index 0000000..8e55be3
Binary files /dev/null and b/backend/netify_data.db-wal differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 8cf0e09..436d33b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -418,7 +418,7 @@ body::after {
   position: fixed;
   inset: 0;
   z-index: -1;
-  transition: opacity 500ms ease-in-out;
+  transition: opacity 150ms ease-in-out;
   pointer-events: none;
   background-size: cover;
   background-attachment: fixed;
@@ -480,11 +480,12 @@ body::after {
 *::after {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, background-image;
   transition-timing-function: ease-in-out;
-  transition-duration: 500ms;
+  transition-duration: 150ms;
 }
+
 /* View Transitions API (For perfect whole-screen crossfade including WebGL/Canvas) */
 ::view-transition-old(root),
 ::view-transition-new(root) {
-  animation-duration: 500ms;
+  animation-duration: 150ms;
   animation-timing-function: ease-in-out;
-}
+}
\ No newline at end of file
diff --git a/src/components/ui/GlobeMap.tsx b/src/components/ui/GlobeMap.tsx
index 53ec13e..c0d235f 100644
--- a/src/components/ui/GlobeMap.tsx
+++ b/src/components/ui/GlobeMap.tsx
@@ -173,7 +173,7 @@ export const GlobeMap = ({ data }: GlobeMapProps) => {
     });
 
     return points;
-  }, [arcsData]);
+  }, [arcsData, isLight]);
 
   return (
     <div
@@ -230,15 +230,27 @@ export const GlobeMap = ({ data }: GlobeMapProps) => {
         ringPropagationSpeed={3}
         ringRepeatPeriod={1000}
 
-        // Labels configuration
-        labelsData={pointsData}
-        labelLat="lat"
-        labelLng="lng"
-        labelText="name"
-        labelSize={1.2}
-        labelDotRadius={0.5}
-        labelColor={() => isLight ? '#0f172a' : 'rgba(255, 255, 255, 0.8)'}
-        labelResolution={2}
+        // HTML Labels configuration for better readability with text-shadow
+        htmlElementsData={pointsData}
+        htmlLat="lat"
+        htmlLng="lng"
+        htmlAltitude={0.03}
+        htmlElement={(d: any) => {
+          const el = document.createElement('div');
+          el.innerHTML = d.name;
+          el.style.color = isLight ? '#0f172a' : '#f8fafc';
+          el.style.fontSize = '12px';
+          el.style.fontWeight = '700';
+          el.style.fontFamily = 'Inter, sans-serif';
+          // Creates a thick outline effect so text doesn't blend into arcs/continents
+          el.style.textShadow = isLight 
+            ? '0 0 4px #ffffff, 0 0 6px #ffffff, 0 0 8px #ffffff' 
+            : '0 0 4px #000000, 0 0 6px #000000, 0 0 8px #000000';
+          el.style.pointerEvents = 'none';
+          el.style.whiteSpace = 'nowrap';
+          el.style.transform = 'translate(-50%, -100%)'; // shift slightly up
+          return el;
+        }}
       />
     </div>
   );