diff --git a/frontend/src/components/EarthTwin.tsx b/frontend/src/components/EarthTwin.tsx
index 68ab3ec..e3791c3 100644
--- a/frontend/src/components/EarthTwin.tsx
+++ b/frontend/src/components/EarthTwin.tsx
@@ -3,6 +3,15 @@ import { useUIStore } from '@/store/uiStore';
 import { MaterialIcon } from './MaterialIcon';
 import * as Cesium from 'cesium';
 import { isSatelliteSunlit } from '../utils/illumination';
+import { useBookmarks } from '../hooks/useBookmarks';
+import type { Bookmark } from '../hooks/useBookmarkStorage';
+import { BookmarkModal, type BookmarkFormValues, } from './GlobeBookmarks/BookMarkModal';
+import { BookmarkSidebar } from './GlobeBookmarks/BookmarkSidebar';
+import {
+  createBookmarkShareUrl,
+  getSharedBookmarkFromUrl,
+} from '../utils/bookmarkHelpers';
+
 
 interface CatalogObject {
   id: number;
@@ -37,32 +46,32 @@ interface CollisionRisk {
 
 function keplerToLatLonAlt(obj: CatalogObject, timeOffsetSec: number = 0): { lat: number; lon: number; alt: number } | null {
   if (obj.semimajor_axis == null || obj.inclination == null || obj.raan == null ||
-      obj.arg_of_perigee == null || obj.mean_anomaly == null || obj.mean_motion == null) {
+    obj.arg_of_perigee == null || obj.mean_anomaly == null || obj.mean_motion == null) {
     return null;
   }
 
-  const EARTH_RADIUS = 6371; 
+  const EARTH_RADIUS = 6371;
   const alt = obj.semimajor_axis - EARTH_RADIUS;
   if (alt < 0 || alt > 100000) return null;
 
-  
+
   const epochDate = obj.epoch ? new Date(obj.epoch) : new Date();
   const now = new Date();
   const elapsedDays = (now.getTime() - epochDate.getTime()) / 86400000 + (timeOffsetSec / 86400);
   const currentMeanAnomaly = ((obj.mean_anomaly + (elapsedDays * obj.mean_motion * 360)) % 360) * Math.PI / 180;
 
-  
+
   const ecc = obj.eccentricity ?? 0;
   const trueAnomaly = currentMeanAnomaly + 2 * ecc * Math.sin(currentMeanAnomaly);
 
-  
+
   const argLat = (obj.arg_of_perigee * Math.PI / 180) + trueAnomaly;
 
-  
+
   const raanRad = obj.raan * Math.PI / 180;
   const incRad = obj.inclination * Math.PI / 180;
 
-  
+
   const J2000 = new Date('2000-01-01T12:00:00Z').getTime();
   const daysSinceJ2000 = (now.getTime() + timeOffsetSec * 1000 - J2000) / 86400000;
   const GMST = (280.46061837 + 360.98564736629 * daysSinceJ2000) % 360;
@@ -79,29 +88,29 @@ function keplerToLatLonAlt(obj: CatalogObject, timeOffsetSec: number = 0): { lat
 
 
 const CATEGORY_COLORS = {
-  PAYLOAD:     { css: '#00E5FF', cesium: Cesium.Color.fromCssColorString('#00E5FF'), label: 'Active Satellites', icon: 'satellite_alt' },
-  DEBRIS:      { css: '#FFAA00', cesium: Cesium.Color.fromCssColorString('#FFAA00'), label: 'Debris Objects',    icon: 'delete_sweep' },
-  ROCKET_BODY: { css: '#FF4444', cesium: Cesium.Color.fromCssColorString('#FF4444'), label: 'Rocket Bodies',     icon: 'rocket' },
-  UNKNOWN:     { css: '#888888', cesium: Cesium.Color.fromCssColorString('#888888'), label: 'Unknown Objects',   icon: 'help_outline' },
-  COLLISION:   { css: '#FF0000', cesium: Cesium.Color.fromCssColorString('#FF0000'), label: 'Collision Risk',    icon: 'warning' },
-  SELECTED:    { css: '#00E5FF', cesium: Cesium.Color.fromCssColorString('#00E5FF'), label: 'Selected',          icon: 'gps_fixed' },
+  PAYLOAD: { css: '#00E5FF', cesium: Cesium.Color.fromCssColorString('#00E5FF'), label: 'Active Satellites', icon: 'satellite_alt' },
+  DEBRIS: { css: '#FFAA00', cesium: Cesium.Color.fromCssColorString('#FFAA00'), label: 'Debris Objects', icon: 'delete_sweep' },
+  ROCKET_BODY: { css: '#FF4444', cesium: Cesium.Color.fromCssColorString('#FF4444'), label: 'Rocket Bodies', icon: 'rocket' },
+  UNKNOWN: { css: '#888888', cesium: Cesium.Color.fromCssColorString('#888888'), label: 'Unknown Objects', icon: 'help_outline' },
+  COLLISION: { css: '#FF0000', cesium: Cesium.Color.fromCssColorString('#FF0000'), label: 'Collision Risk', icon: 'warning' },
+  SELECTED: { css: '#00E5FF', cesium: Cesium.Color.fromCssColorString('#00E5FF'), label: 'Selected', icon: 'gps_fixed' },
 } as const;
 
 function getPointSize(classification: string): number {
   switch (classification) {
-    case 'PAYLOAD':     return 5;
-    case 'DEBRIS':      return 4;
+    case 'PAYLOAD': return 5;
+    case 'DEBRIS': return 4;
     case 'ROCKET_BODY': return 6;
-    default:            return 3;
+    default: return 3;
   }
 }
 
 function getOutlineWidth(classification: string): number {
   switch (classification) {
-    case 'PAYLOAD':     return 1;
-    case 'DEBRIS':      return 1;
+    case 'PAYLOAD': return 1;
+    case 'DEBRIS': return 1;
     case 'ROCKET_BODY': return 2;
-    default:            return 1;
+    default: return 1;
   }
 }
 
@@ -138,15 +147,17 @@ export const EarthTwin: React.FC = () => {
   const [showRiskOverlay, setShowRiskOverlay] = useState(false);
   const [objectCounts, setObjectCounts] = useState({ payloads: 0, debris: 0, rocketBodies: 0, total: 0, collisions: 0 });
   const [dataLoaded, setDataLoaded] = useState(false);
+  const [isBookmarkModalOpen, setIsBookmarkModalOpen] = useState(false);
+  const [isBookmarkSidebarOpen, setIsBookmarkSidebarOpen] = useState(false);
+  const [editingBookmark, setEditingBookmark] = useState<Bookmark | null>(null);
 
-  
   const [stats, setStats] = useState({
     totalObjects: 0,
     lastSync: '',
     weatherIndex: 'K0',
   });
 
-  
+
   const populateEntities = useCallback(async (viewer: Cesium.Viewer) => {
     try {
       if (!viewer || viewer.isDestroyed()) return;
@@ -156,7 +167,7 @@ export const EarthTwin: React.FC = () => {
         fetchCollisions(),
       ]);
 
-      
+
       const collisionCatNums = new Set<string>();
       collisions.forEach(c => {
         if (c.object_a?.catalog_number) collisionCatNums.add(c.object_a.catalog_number);
@@ -166,22 +177,22 @@ export const EarthTwin: React.FC = () => {
       let payloads = 0, debris = 0, rocketBodies = 0;
       const entityMap = new Map<string, Cesium.Entity>();
 
-      
+
       if (!viewer || viewer.isDestroyed()) return;
 
-      
+
       viewer.entities.removeAll();
-const nowJulian = Cesium.JulianDate.now();
+      const nowJulian = Cesium.JulianDate.now();
       objects.forEach(obj => {
         const pos = keplerToLatLonAlt(obj);
         if (!pos) return;
 
-        
+
         if (obj.classification === 'PAYLOAD') payloads++;
         else if (obj.classification === 'DEBRIS') debris++;
         else if (obj.classification === 'ROCKET_BODY') rocketBodies++;
 
-        
+
         const isCollisionRisk = collisionCatNums.has(obj.catalog_number);
         const colorConfig = isCollisionRisk
           ? CATEGORY_COLORS.COLLISION
@@ -191,7 +202,7 @@ const nowJulian = Cesium.JulianDate.now();
         const outlineWidth = isCollisionRisk ? 3 : getOutlineWidth(obj.classification);
 
         const cartPos = Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat, pos.alt * 1000);
-                const sunlit = isSatelliteSunlit(cartPos, nowJulian, viewer.scene.globe);
+        const sunlit = isSatelliteSunlit(cartPos, nowJulian, viewer.scene.globe);
 
         const entity = viewer.entities.add({
           position: cartPos,
@@ -217,7 +228,7 @@ const nowJulian = Cesium.JulianDate.now();
         entityMap.set(obj.catalog_number, entity);
       });
 
-      
+
       collisions.forEach(conj => {
         if (!conj.object_a || !conj.object_b) return;
         const entityA = entityMap.get(conj.object_a.catalog_number);
@@ -260,7 +271,173 @@ const nowJulian = Cesium.JulianDate.now();
     }
   }, []);
 
-  
+
+  const autoRotateRef = useRef(true);
+
+  const {
+    bookmarks,
+    filteredBookmarks,
+    favoriteBookmarks,
+    recentBookmarks,
+    categories,
+
+    searchQuery,
+    selectedCategory,
+
+    setSearchQuery,
+    setSelectedCategory,
+
+    addBookmark,
+    updateBookmark,
+    deleteBookmark,
+    toggleFavorite,
+    markAsRecent,
+
+    exportBookmarks,
+    importBookmarks,
+  } = useBookmarks();
+
+  const [selectedBookmarkId, setSelectedBookmarkId] =
+    useState('');
+
+
+  const saveCurrentView = useCallback(() => {
+    const viewer = viewerRef.current;
+
+    if (!viewer || viewer.isDestroyed()) {
+      return;
+    }
+
+    const cartographic =
+      viewer.scene.globe.ellipsoid.cartesianToCartographic(
+        viewer.camera.positionWC
+      );
+
+    if (!cartographic) {
+      return;
+    }
+
+    const timestamp = new Intl.DateTimeFormat('en-IN', {
+      dateStyle: 'medium',
+      timeStyle: 'short',
+    }).format(new Date());
+
+    addBookmark({
+      name: `Saved view — ${timestamp}`,
+      description: 'Saved from the current globe camera position.',
+      category: 'Custom',
+
+      latitude: Cesium.Math.toDegrees(cartographic.latitude),
+      longitude: Cesium.Math.toDegrees(cartographic.longitude),
+      altitude: cartographic.height,
+
+      // Cesium expects these values in radians when restoring.
+      heading: viewer.camera.heading,
+      pitch: viewer.camera.pitch,
+      roll: viewer.camera.roll,
+    });
+  }, [addBookmark]);
+
+  const restoreBookmark = useCallback(
+    (bookmark: Bookmark) => {
+      const viewer = viewerRef.current;
+
+      if (!viewer || viewer.isDestroyed()) {
+        return;
+      }
+
+      // Prevent the existing automatic globe rotation from immediately
+      // moving the camera away from the restored bookmark view.
+      autoRotateRef.current = false;
+
+      markAsRecent(bookmark.id);
+
+      const prefersReducedMotion =
+        window.matchMedia?.(
+          '(prefers-reduced-motion: reduce)'
+        ).matches ?? false;
+
+      viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          bookmark.longitude,
+          bookmark.latitude,
+          bookmark.altitude
+        ),
+        orientation: {
+          heading: bookmark.heading,
+          pitch: bookmark.pitch,
+          roll: bookmark.roll,
+        },
+        duration: prefersReducedMotion ? 0 : 1.5,
+      });
+    },
+    [markAsRecent]
+  );
+
+  const handleBookmarkSubmit = useCallback(
+    (values: BookmarkFormValues) => {
+      if (editingBookmark) {
+        updateBookmark(editingBookmark.id, {
+          name: values.name,
+          description: values.description,
+          category: values.category,
+        });
+
+        setEditingBookmark(null);
+        setIsBookmarkModalOpen(false);
+        return;
+      }
+
+      const viewer = viewerRef.current;
+
+      if (!viewer || viewer.isDestroyed()) {
+        return;
+      }
+
+      const cartographic =
+        viewer.scene.globe.ellipsoid.cartesianToCartographic(
+          viewer.camera.positionWC
+        );
+
+      if (!cartographic) {
+        return;
+      }
+
+      addBookmark({
+        name: values.name,
+        description: values.description,
+        category: values.category,
+
+        latitude: Cesium.Math.toDegrees(cartographic.latitude),
+        longitude: Cesium.Math.toDegrees(cartographic.longitude),
+        altitude: cartographic.height,
+
+        heading: viewer.camera.heading,
+        pitch: viewer.camera.pitch,
+        roll: viewer.camera.roll,
+      });
+
+      setIsBookmarkModalOpen(false);
+    },
+    [addBookmark, editingBookmark, updateBookmark]
+  );
+
+  const handleShareBookmark = useCallback(
+    async (bookmark: Bookmark) => {
+      const shareUrl = createBookmarkShareUrl(bookmark);
+
+      try {
+        await navigator.clipboard.writeText(shareUrl);
+      } catch {
+        window.prompt(
+          'Copy this bookmark link:',
+          shareUrl
+        );
+      }
+    },
+    []
+  );
+
   useEffect(() => {
     if (!containerRef.current || !Cesium) return;
     if (viewerRef.current && !viewerRef.current.isDestroyed()) return;
@@ -290,7 +467,7 @@ const nowJulian = Cesium.JulianDate.now();
       // eslint-disable-next-line react-hooks/set-state-in-effect
       setUseFallback(false);
 
-      
+
       viewer.scene.globe.enableLighting = true; // Enable real-time day/night lighting
       viewer.scene.backgroundColor = Cesium.Color.fromCssColorString('#050710');
       viewer.scene.fog.enabled = false;
@@ -298,7 +475,7 @@ const nowJulian = Cesium.JulianDate.now();
         viewer.scene.skyAtmosphere.show = true;
       }
 
-      
+
       viewer.camera.setView({
         destination: Cesium.Cartesian3.fromDegrees(30, 15, 20000000),
         orientation: {
@@ -307,14 +484,42 @@ const nowJulian = Cesium.JulianDate.now();
           roll: 0.0,
         },
       });
+      const sharedBookmark = getSharedBookmarkFromUrl();
+
+      if (sharedBookmark) {
+        autoRotateRef.current = false;
+
+        const prefersReducedMotion =
+          window.matchMedia?.(
+            '(prefers-reduced-motion: reduce)'
+          ).matches ?? false;
+
+        viewer.camera.flyTo({
+          destination: Cesium.Cartesian3.fromDegrees(
+            sharedBookmark.longitude,
+            sharedBookmark.latitude,
+            sharedBookmark.altitude
+          ),
+          orientation: {
+            heading: sharedBookmark.heading,
+            pitch: sharedBookmark.pitch,
+            roll: sharedBookmark.roll,
+          },
+          duration: prefersReducedMotion ? 0 : 1.5,
+        });
+      }
 
-      
       onTick = () => {
-        viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, 0.0003);
+        if (autoRotateRef.current) {
+          viewer.scene.camera.rotate(
+            Cesium.Cartesian3.UNIT_Z,
+            0.0003
+          );
+        }
       };
       viewer.clock.onTick.addEventListener(onTick);
 
-      
+
       handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
 
       handler.setInputAction((movement: { endPosition: Cesium.Cartesian2 }) => {
@@ -333,7 +538,7 @@ const nowJulian = Cesium.JulianDate.now();
         }
       }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 
-      
+
       handler.setInputAction((click: { position: Cesium.Cartesian2 }) => {
         const picked = viewer.scene.pick(click.position);
         if (Cesium.defined(picked) && picked.id && picked.id.properties) {
@@ -343,7 +548,7 @@ const nowJulian = Cesium.JulianDate.now();
               const obj = JSON.parse(rawData) as CatalogObject;
               setSelectedSatelliteId(obj.catalog_number);
 
-              
+
               const pos = keplerToLatLonAlt(obj);
               if (pos) {
                 viewer.camera.flyTo({
@@ -356,10 +561,10 @@ const nowJulian = Cesium.JulianDate.now();
         }
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 
-      
+
       populateEntities(viewer);
 
-      
+
       const refreshInterval = setInterval(() => {
         if (viewerRef.current && !viewerRef.current.isDestroyed()) {
           populateEntities(viewerRef.current);
@@ -382,7 +587,7 @@ const nowJulian = Cesium.JulianDate.now();
       setUseFallback(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); 
+  }, []);
 
   return (
     <div className="relative w-full h-full overflow-hidden bg-bg-deep-space border-b border-border-panel">
@@ -450,7 +655,7 @@ const nowJulian = Cesium.JulianDate.now();
       )}
 
       {/* ── HUD Overlay ───────────────────────────────────────── */}
-      <div className="absolute inset-0 p-3 md:p-6 flex flex-col justify-between z-10 pointer-events-none overflow-hidden">
+      <div className="absolute inset-0 p-3 pb-16 md:p-6 md:pb-16 flex flex-col justify-between z-10 pointer-events-none overflow-hidden">
 
         {/* Top Row */}
         <div className="flex flex-col sm:flex-row justify-between items-start gap-2">
@@ -469,30 +674,30 @@ const nowJulian = Cesium.JulianDate.now();
           </div>
 
           <div className="text-right space-y-1 animate-[slideDown_0.5s_ease-out] hidden sm:block">
-          {dataLoaded ? (
-            <>
-            {objectCounts.collisions > 0 ? (
-              <div className="bg-status-emergency/20 border border-status-emergency px-3 md:px-4 py-1 flex items-center gap-2 drop-shadow-[0_0_12px_rgba(255,59,48,0.4)]">
-                <MaterialIcon name="warning" className="text-status-emergency text-sm animate-pulse" />
-                <span className="font-technical-data text-status-emergency text-[11px] md:text-[12px] font-bold">
-                  {objectCounts.collisions} ACTIVE CONJUNCTION{objectCounts.collisions !== 1 ? 'S' : ''}
-                </span>
-              </div>
+            {dataLoaded ? (
+              <>
+                {objectCounts.collisions > 0 ? (
+                  <div className="bg-status-emergency/20 border border-status-emergency px-3 md:px-4 py-1 flex items-center gap-2 drop-shadow-[0_0_12px_rgba(255,59,48,0.4)]">
+                    <MaterialIcon name="warning" className="text-status-emergency text-sm animate-pulse" />
+                    <span className="font-technical-data text-status-emergency text-[11px] md:text-[12px] font-bold">
+                      {objectCounts.collisions} ACTIVE CONJUNCTION{objectCounts.collisions !== 1 ? 'S' : ''}
+                    </span>
+                  </div>
+                ) : (
+                  <div className="bg-status-success/20 border border-status-success px-3 md:px-4 py-1 flex items-center gap-2">
+                    <MaterialIcon name="verified_user" className="text-status-success text-sm" />
+                    <span className="font-technical-data text-status-success text-[11px] md:text-[12px] font-bold">
+                      ALL CLEAR
+                    </span>
+                  </div>
+                )}
+              </>
             ) : (
-              <div className="bg-status-success/20 border border-status-success px-3 md:px-4 py-1 flex items-center gap-2">
-                <MaterialIcon name="verified_user" className="text-status-success text-sm" />
-                <span className="font-technical-data text-status-success text-[11px] md:text-[12px] font-bold">
-                  ALL CLEAR
-                </span>
-              </div>
+              <>
+                <div className="w-full h-8 bg-surface-container/80 animate-pulse" />
+                <div className="w-full h-4 bg-surface-container/80 animate-pulse" />
+              </>
             )}
-            </>
-          ) : (
-            <>
-            <div className="w-full h-8 bg-surface-container/80 animate-pulse" />
-            <div className="w-full h-4 bg-surface-container/80 animate-pulse" />
-            </>
-          ) }
             <p className={`font-technical-data text-[9px] md:text-[10px] text-primary/70 hidden md:block transition-ui ${dataLoaded ? 'opacity-100' : 'opacity-0'}`}>
               WEATHER: {stats.weatherIndex} · DATA SOURCE: SPACE-TRACK / NASA DONKI
             </p>
@@ -507,52 +712,69 @@ const nowJulian = Cesium.JulianDate.now();
               <div className="min-w-[250px] p-4 animate-pulse bg-surface-container/80 h-12" />
             ) : (
               <>
-            <div className="space-y-0.5">
-              <p className="font-label-caps text-[9px] md:text-[10px] text-primary/70 uppercase">Objects Tracked</p>
-              <p className="font-headline-lg text-primary text-xl md:text-3xl font-bold font-technical-data drop-shadow-[0_0_8px_rgba(0,229,255,0.4)]">
-                {objectCounts.total.toLocaleString()}
-              </p>
-            </div>
-            <div className="space-y-0.5">
-              <p className="font-label-caps text-[9px] md:text-[10px] text-primary/70 uppercase">Debris</p>
-              <p className="font-headline-lg text-status-warning text-xl md:text-3xl font-bold font-technical-data drop-shadow-[0_0_8px_rgba(255,170,0,0.4)]">
-                {objectCounts.debris.toLocaleString()}
-              </p>
-            </div>
-            <div className="space-y-0.5">
-              <p className="font-label-caps text-[9px] md:text-[10px] text-primary/70 uppercase">Collision Risks</p>
-              <p className={`font-headline-lg text-xl md:text-3xl font-bold font-technical-data ${objectCounts.collisions > 0 ? 'text-status-emergency animate-pulse drop-shadow-[0_0_8px_rgba(255,59,48,0.6)]' : 'text-status-success drop-shadow-[0_0_8px_rgba(0,255,136,0.4)]'}`}>
-                {objectCounts.collisions}
-              </p>
-            </div>
-            </>
+                <div className="space-y-0.5">
+                  <p className="font-label-caps text-[9px] md:text-[10px] text-primary/70 uppercase">Objects Tracked</p>
+                  <p className="font-headline-lg text-primary text-xl md:text-3xl font-bold font-technical-data drop-shadow-[0_0_8px_rgba(0,229,255,0.4)]">
+                    {objectCounts.total.toLocaleString()}
+                  </p>
+                </div>
+                <div className="space-y-0.5">
+                  <p className="font-label-caps text-[9px] md:text-[10px] text-primary/70 uppercase">Debris</p>
+                  <p className="font-headline-lg text-status-warning text-xl md:text-3xl font-bold font-technical-data drop-shadow-[0_0_8px_rgba(255,170,0,0.4)]">
+                    {objectCounts.debris.toLocaleString()}
+                  </p>
+                </div>
+                <div className="space-y-0.5">
+                  <p className="font-label-caps text-[9px] md:text-[10px] text-primary/70 uppercase">Collision Risks</p>
+                  <p className={`font-headline-lg text-xl md:text-3xl font-bold font-technical-data ${objectCounts.collisions > 0 ? 'text-status-emergency animate-pulse drop-shadow-[0_0_8px_rgba(255,59,48,0.6)]' : 'text-status-success drop-shadow-[0_0_8px_rgba(0,255,136,0.4)]'}`}>
+                    {objectCounts.collisions}
+                  </p>
+                </div>
+              </>
             )
-          }
+            }
           </div>
 
           {/* Controls */}
           <div className="flex gap-1.5 md:gap-2 pointer-events-auto">
+
+            <button
+              type="button"
+              onClick={() => setIsBookmarkModalOpen(true)}
+              className="px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border border-primary-container text-primary-container hover:bg-primary-container/10"
+              aria-label="Save the current globe view as a bookmark"
+            >
+              SAVE VIEW
+            </button>
+
+            <button
+              type="button"
+              onClick={() => setIsBookmarkSidebarOpen(true)}
+              className="px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border border-primary-container text-primary-container hover:bg-primary-container/10"
+              aria-label="Open saved globe bookmarks"
+            >
+              BOOKMARKS
+            </button>
+
+
             <button
               onClick={() => setShowLegend(v => !v)}
-              className={`px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${
-                showLegend ? 'bg-primary-container text-bg-deep-space border-primary-container' : 'border-primary-container text-primary-container hover:bg-primary-container/10'
-              }`}
+              className={`px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${showLegend ? 'bg-primary-container text-bg-deep-space border-primary-container' : 'border-primary-container text-primary-container hover:bg-primary-container/10'
+                }`}
             >
               LEGEND
             </button>
             <button
               onClick={() => setShowDensity(v => !v)}
-              className={`px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${
-                showDensity ? 'bg-status-warning text-bg-deep-space border-status-warning' : 'border-status-warning/50 text-status-warning hover:bg-status-warning/10'
-              }`}
+              className={`px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${showDensity ? 'bg-status-warning text-bg-deep-space border-status-warning' : 'border-status-warning/50 text-status-warning hover:bg-status-warning/10'
+                }`}
             >
               DENSITY
             </button>
             <button
               onClick={() => setShowRiskOverlay(v => !v)}
-              className={`px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${
-                showRiskOverlay ? 'bg-status-emergency text-white border-status-emergency' : 'border-status-emergency/50 text-status-emergency hover:bg-status-emergency/10'
-              }`}
+              className={`px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${showRiskOverlay ? 'bg-status-emergency text-white border-status-emergency' : 'border-status-emergency/50 text-status-emergency hover:bg-status-emergency/10'
+                }`}
             >
               RISK
             </button>
@@ -564,39 +786,92 @@ const nowJulian = Cesium.JulianDate.now();
       {showLegend && (
         <div className="absolute bottom-16 md:bottom-24 left-3 md:left-6 z-20 pointer-events-auto animate-[slideUp_0.3s_ease-out]">
           {dataLoaded ? (
-          <div className="bg-bg-deep-space/90 backdrop-blur-xl border border-border-panel p-4 min-w-[200px] shadow-[0_0_30px_rgba(0,0,0,0.6)]">
-            <div className="flex justify-between items-center mb-3">
-              <span className="font-label-caps text-[10px] text-primary-container font-bold tracking-widest">ORBITAL LEGEND</span>
-              <button onClick={() => setShowLegend(false)} className="text-on-surface-variant/60 hover:text-on-surface cursor-pointer">
-                <MaterialIcon name="close" className="text-xs" />
-              </button>
-            </div>
-            <div className="space-y-2">
-              {[
-                { color: CATEGORY_COLORS.PAYLOAD.css,     label: 'Active Satellites', count: objectCounts.payloads },
-                { color: CATEGORY_COLORS.DEBRIS.css,      label: 'Debris Objects',    count: objectCounts.debris },
-                { color: CATEGORY_COLORS.ROCKET_BODY.css, label: 'Rocket Bodies',     count: objectCounts.rocketBodies },
-                { color: CATEGORY_COLORS.COLLISION.css,    label: 'Collision Risks',   count: objectCounts.collisions },
-              ].map(item => (
-                <div key={item.label} className="flex items-center justify-between gap-3">
-                  <div className="flex items-center gap-2">
-                    <span
-                      className="w-3 h-3 rounded-full"
-                      style={{ backgroundColor: item.color, boxShadow: `0 0 8px ${item.color}60` }}
-                    />
-                    <span className="font-technical-data text-[11px] text-on-surface-variant">{item.label}</span>
+            <div className="bg-bg-deep-space/90 backdrop-blur-xl border border-border-panel p-4 min-w-[200px] shadow-[0_0_30px_rgba(0,0,0,0.6)]">
+              <div className="flex justify-between items-center mb-3">
+                <span className="font-label-caps text-[10px] text-primary-container font-bold tracking-widest">ORBITAL LEGEND</span>
+                <button onClick={() => setShowLegend(false)} className="text-on-surface-variant/60 hover:text-on-surface cursor-pointer">
+                  <MaterialIcon name="close" className="text-xs" />
+                </button>
+              </div>
+              <div className="space-y-2">
+                {[
+                  { color: CATEGORY_COLORS.PAYLOAD.css, label: 'Active Satellites', count: objectCounts.payloads },
+                  { color: CATEGORY_COLORS.DEBRIS.css, label: 'Debris Objects', count: objectCounts.debris },
+                  { color: CATEGORY_COLORS.ROCKET_BODY.css, label: 'Rocket Bodies', count: objectCounts.rocketBodies },
+                  { color: CATEGORY_COLORS.COLLISION.css, label: 'Collision Risks', count: objectCounts.collisions },
+                ].map(item => (
+                  <div key={item.label} className="flex items-center justify-between gap-3">
+                    <div className="flex items-center gap-2">
+                      <span
+                        className="w-3 h-3 rounded-full"
+                        style={{ backgroundColor: item.color, boxShadow: `0 0 8px ${item.color}60` }}
+                      />
+                      <span className="font-technical-data text-[11px] text-on-surface-variant">{item.label}</span>
+                    </div>
+                    <span className="font-technical-data text-[11px] font-bold text-on-surface">{item.count.toLocaleString()}</span>
                   </div>
-                  <span className="font-technical-data text-[11px] font-bold text-on-surface">{item.count.toLocaleString()}</span>
-                </div>
-              ))}
-            </div>
-            <div className="mt-3 pt-2 border-t border-border-panel/40 text-[9px] text-on-surface-variant/50 font-technical-data">
-              All positions from real orbital elements
+                ))}
+              </div>
+              <div className="mt-3 pt-2 border-t border-border-panel/40 text-[9px] text-on-surface-variant/50 font-technical-data">
+                All positions from real orbital elements
+              </div>
             </div>
-          </div>
-          ) : (<LegendCardSkeleton />) }
+          ) : (<LegendCardSkeleton />)}
         </div>
       )}
+
+      {/* Bookmark create/edit dialog */}
+      {isBookmarkModalOpen && (
+        <BookmarkModal
+          onClose={() => setIsBookmarkModalOpen(false)}
+          onSubmit={handleBookmarkSubmit}
+        />
+      )}
+
+
+      {/* Bookmark sidebar */}
+      {isBookmarkSidebarOpen && (
+        <BookmarkSidebar
+          bookmarks={bookmarks}
+          filteredBookmarks={filteredBookmarks}
+          favoriteBookmarks={favoriteBookmarks}
+          recentBookmarks={recentBookmarks}
+          categories={categories}
+          searchQuery={searchQuery}
+          selectedCategory={selectedCategory}
+          onSearchChange={setSearchQuery}
+          onCategoryChange={setSelectedCategory}
+          onOpenBookmark={restoreBookmark}
+          onCreateBookmark={() => {
+            setEditingBookmark(null);
+            setIsBookmarkModalOpen(true);
+          }}
+          onShareBookmark={handleShareBookmark}
+          onEditBookmark={(bookmark) => {
+            setEditingBookmark(bookmark);
+            setIsBookmarkModalOpen(true);
+          }}
+          onDeleteBookmark={deleteBookmark}
+          onToggleFavorite={(bookmarkId) =>
+            toggleFavorite(bookmarkId)
+          }
+          onExportBookmarks={exportBookmarks}
+          onImportBookmarks={importBookmarks}
+          onClose={() => setIsBookmarkSidebarOpen(false)}
+        />
+      )}
+
+      {isBookmarkModalOpen && (
+        <BookmarkModal
+          key={editingBookmark?.id ?? 'create-bookmark'}
+          initialBookmark={editingBookmark}
+          onClose={() => {
+            setEditingBookmark(null);
+            setIsBookmarkModalOpen(false);
+          }}
+          onSubmit={handleBookmarkSubmit}
+        />
+      )}
       {/* ── Inline Styles for Animations ──────────────────────── */}
       <style>{`
         @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
diff --git a/frontend/src/components/GlobeBookmarks/BookmarkCard.tsx b/frontend/src/components/GlobeBookmarks/BookmarkCard.tsx
new file mode 100644
index 0000000..78dd986
--- /dev/null
+++ b/frontend/src/components/GlobeBookmarks/BookmarkCard.tsx
@@ -0,0 +1,132 @@
+import type { Bookmark } from '../../hooks/useBookmarkStorage';
+import { MaterialIcon } from '../MaterialIcon';
+
+interface BookmarkCardProps {
+    bookmark: Bookmark;
+    onOpen: (bookmark: Bookmark) => void;
+    onEdit: (bookmark: Bookmark) => void;
+    onDelete: (bookmark: Bookmark) => void;
+    onToggleFavorite: (bookmark: Bookmark) => void;
+    onShare: (bookmark: Bookmark) => void;
+}
+
+export function BookmarkCard({
+    bookmark,
+    onOpen,
+    onShare,
+    onEdit,
+    onDelete,
+    onToggleFavorite,
+}: BookmarkCardProps) {
+    const lastOpenedLabel = bookmark.lastOpenedAt
+        ? new Intl.DateTimeFormat('en-IN', {
+            dateStyle: 'medium',
+            timeStyle: 'short',
+        }).format(new Date(bookmark.lastOpenedAt))
+        : 'Not opened yet';
+
+    return (
+        <article className="border border-border-panel/70 bg-surface-container/35 p-3 transition-ui hover:border-primary-container/70 hover:bg-surface-container/60">
+            <div className="flex items-start justify-between gap-3">
+                <button
+                    type="button"
+                    onClick={() => onOpen(bookmark)}
+                    className="min-w-0 flex-1 text-left"
+                    aria-label={`Open bookmark: ${bookmark.name}`}
+                >
+                    <div className="flex items-center gap-2">
+                        <MaterialIcon
+                            name={bookmark.isFavorite ? 'star' : 'public'}
+                            className={
+                                bookmark.isFavorite
+                                    ? 'text-status-warning text-sm'
+                                    : 'text-primary-container text-sm'
+                            }
+                        />
+
+                        <h3 className="truncate font-technical-data text-sm font-bold text-on-surface">
+                            {bookmark.name}
+                        </h3>
+                    </div>
+
+                    <p className="mt-1 font-label-caps text-[9px] tracking-wider text-primary-container/75">
+                        {bookmark.category}
+                        {bookmark.isDefault ? ' · DEFAULT VIEW' : ''}
+                    </p>
+
+                    {bookmark.description && (
+                        <p className="mt-2 line-clamp-2 font-technical-data text-xs text-on-surface-variant">
+                            {bookmark.description}
+                        </p>
+                    )}
+                </button>
+
+                <button
+                    type="button"
+                    onClick={() => onToggleFavorite(bookmark)}
+                    aria-label={
+                        bookmark.isFavorite
+                            ? `Remove ${bookmark.name} from favorites`
+                            : `Add ${bookmark.name} to favorites`
+                    }
+                    aria-pressed={bookmark.isFavorite}
+                    className="shrink-0 border border-border-panel p-1.5 text-on-surface-variant transition-ui hover:border-status-warning hover:text-status-warning"
+                >
+                    <MaterialIcon
+                        name={bookmark.isFavorite ? 'star' : 'star_outline'}
+                        className="text-base"
+                    />
+                </button>
+            </div>
+
+            <div className="mt-3 flex items-center justify-between gap-3 border-t border-border-panel/50 pt-3">
+                <span className="font-technical-data text-[9px] text-on-surface-variant/70">
+                    {lastOpenedLabel}
+                </span>
+
+                <div className="flex items-center gap-1">
+                    <button
+                        type="button"
+                        onClick={() => onOpen(bookmark)}
+                        className="border border-primary-container/60 px-2 py-1 font-technical-data text-[10px] font-bold text-primary-container transition-ui hover:bg-primary-container hover:text-bg-deep-space"
+                        aria-label={`Open ${bookmark.name}`}
+                    >
+                        OPEN
+                    </button>
+
+                    <button
+                        type="button"
+                        onClick={() => onShare(bookmark)}
+                        className="border border-border-panel px-2 py-1 text-on-surface-variant transition-ui hover:border-primary-container hover:text-primary-container"
+                        aria-label={`Copy a share link for ${bookmark.name}`}
+                    >
+                        <MaterialIcon name="share" className="text-sm" />
+                    </button>
+
+                    {!bookmark.isDefault && (
+                        <>
+
+                            <button
+                                type="button"
+                                onClick={() => onEdit(bookmark)}
+                                className="border border-border-panel px-2 py-1 text-on-surface-variant transition-ui hover:border-primary-container hover:text-primary-container"
+                                aria-label={`Edit ${bookmark.name}`}
+                            >
+                                <MaterialIcon name="edit" className="text-sm" />
+                            </button>
+
+                            <button
+                                type="button"
+                                onClick={() => onDelete(bookmark)}
+                                className="border border-border-panel px-2 py-1 text-on-surface-variant transition-ui hover:border-status-emergency hover:text-status-emergency"
+                                aria-label={`Delete ${bookmark.name}`}
+                            >
+                                <MaterialIcon name="delete" className="text-sm" />
+                            </button>
+                        </>
+                    )}
+                </div>
+            </div>
+        </article>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/components/GlobeBookmarks/BookmarkModal.tsx b/frontend/src/components/GlobeBookmarks/BookmarkModal.tsx
new file mode 100644
index 0000000..a446c5b
--- /dev/null
+++ b/frontend/src/components/GlobeBookmarks/BookmarkModal.tsx
@@ -0,0 +1,204 @@
+import { useState } from 'react';
+import type { Bookmark } from '../../hooks/useBookmarkStorage';
+
+export interface BookmarkFormValues {
+  name: string;
+  description: string;
+  category: string;
+}
+
+interface BookmarkModalProps {
+  initialBookmark?: Bookmark | null;
+  onClose: () => void;
+  onSubmit: (values: BookmarkFormValues) => void;
+}
+
+function getInitialValues(
+  bookmark?: Bookmark | null
+): BookmarkFormValues {
+  return {
+    name: bookmark?.name ?? '',
+    description: bookmark?.description ?? '',
+    category: bookmark?.category ?? 'Custom',
+  };
+}
+
+export function BookmarkModal({
+  initialBookmark,
+  onClose,
+  onSubmit,
+}: BookmarkModalProps) {
+  const [values, setValues] = useState<BookmarkFormValues>(() =>
+    getInitialValues(initialBookmark)
+  );
+
+  const isEditing = Boolean(initialBookmark);
+
+  const handleSubmit = (
+    event: React.FormEvent<HTMLFormElement>
+  ) => {
+    event.preventDefault();
+
+    const name = values.name.trim();
+
+    if (!name) {
+      return;
+    }
+
+    onSubmit({
+      name,
+      description: values.description.trim(),
+      category: values.category.trim() || 'Custom',
+    });
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm"
+      role="presentation"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) {
+          onClose();
+        }
+      }}
+    >
+      <section
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="bookmark-modal-title"
+        className="w-full max-w-md border border-primary-container/40 bg-bg-deep-space/95 p-5 shadow-[0_0_40px_rgba(0,229,255,0.15)] backdrop-blur-xl"
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') {
+            onClose();
+          }
+        }}
+      >
+        <div className="mb-5 flex items-start justify-between gap-4">
+          <div>
+            <p className="font-label-caps text-[10px] tracking-widest text-primary-container/80">
+              GLOBE BOOKMARK
+            </p>
+
+            <h2
+              id="bookmark-modal-title"
+              className="mt-1 font-display-lg text-lg font-bold text-on-surface"
+            >
+              {isEditing
+                ? 'Edit Saved View'
+                : 'Save Current View'}
+            </h2>
+          </div>
+
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close bookmark dialog"
+            className="border border-border-panel px-2 py-1 text-on-surface-variant transition-ui hover:border-primary-container hover:text-primary-container"
+          >
+            ×
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label
+              htmlFor="bookmark-name"
+              className="mb-1.5 block font-technical-data text-xs text-on-surface"
+            >
+              Name <span className="text-status-emergency">*</span>
+            </label>
+
+            <input
+              id="bookmark-name"
+              autoFocus
+              required
+              maxLength={80}
+              value={values.name}
+              onChange={(event) =>
+                setValues((current) => ({
+                  ...current,
+                  name: event.target.value,
+                }))
+              }
+              placeholder="Example: India monitoring view"
+              className="w-full border border-border-panel bg-surface-container/40 px-3 py-2 font-technical-data text-sm text-on-surface outline-none transition-ui placeholder:text-on-surface-variant/50 focus:border-primary-container"
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="bookmark-description"
+              className="mb-1.5 block font-technical-data text-xs text-on-surface"
+            >
+              Description <span className="text-on-surface-variant/60">(optional)</span>
+            </label>
+
+            <textarea
+              id="bookmark-description"
+              rows={3}
+              maxLength={240}
+              value={values.description}
+              onChange={(event) =>
+                setValues((current) => ({
+                  ...current,
+                  description: event.target.value,
+                }))
+              }
+              placeholder="Add context for this saved view."
+              className="w-full resize-none border border-border-panel bg-surface-container/40 px-3 py-2 font-technical-data text-sm text-on-surface outline-none transition-ui placeholder:text-on-surface-variant/50 focus:border-primary-container"
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="bookmark-category"
+              className="mb-1.5 block font-technical-data text-xs text-on-surface"
+            >
+              Category
+            </label>
+
+            <input
+              id="bookmark-category"
+              list="bookmark-category-options"
+              maxLength={40}
+              value={values.category}
+              onChange={(event) =>
+                setValues((current) => ({
+                  ...current,
+                  category: event.target.value,
+                }))
+              }
+              placeholder="Custom"
+              className="w-full border border-border-panel bg-surface-container/40 px-3 py-2 font-technical-data text-sm text-on-surface outline-none transition-ui placeholder:text-on-surface-variant/50 focus:border-primary-container"
+            />
+
+            <datalist id="bookmark-category-options">
+              <option value="Custom" />
+              <option value="Region" />
+              <option value="Satellite" />
+              <option value="Orbit" />
+              <option value="Mission" />
+            </datalist>
+          </div>
+
+          <div className="flex justify-end gap-2 border-t border-border-panel/60 pt-5">
+            <button
+              type="button"
+              onClick={onClose}
+              className="border border-border-panel px-4 py-2 font-technical-data text-xs font-bold text-on-surface-variant transition-ui hover:border-on-surface hover:text-on-surface"
+            >
+              CANCEL
+            </button>
+
+            <button
+              type="submit"
+              className="border border-primary-container bg-primary-container px-4 py-2 font-technical-data text-xs font-bold text-bg-deep-space transition-ui hover:brightness-110"
+            >
+              {isEditing ? 'SAVE CHANGES' : 'SAVE BOOKMARK'}
+            </button>
+          </div>
+        </form>
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/GlobeBookmarks/BookmarkSearch.tsx b/frontend/src/components/GlobeBookmarks/BookmarkSearch.tsx
new file mode 100644
index 0000000..ff826b6
--- /dev/null
+++ b/frontend/src/components/GlobeBookmarks/BookmarkSearch.tsx
@@ -0,0 +1,29 @@
+import { MaterialIcon } from '../MaterialIcon';
+
+interface BookmarkSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function BookmarkSearch({
+  value,
+  onChange,
+}: BookmarkSearchProps) {
+  return (
+    <div className="relative">
+      <MaterialIcon
+        name="search"
+        className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-on-surface-variant/60"
+      />
+
+      <input
+        type="search"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder="Search saved views..."
+        aria-label="Search bookmarks by name, description, or category"
+        className="w-full border border-border-panel bg-surface-container/40 py-2 pl-9 pr-3 font-technical-data text-sm text-on-surface outline-none placeholder:text-on-surface-variant/50 focus:border-primary-container"
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/GlobeBookmarks/BookmarkSidebar.tsx b/frontend/src/components/GlobeBookmarks/BookmarkSidebar.tsx
new file mode 100644
index 0000000..beea033
--- /dev/null
+++ b/frontend/src/components/GlobeBookmarks/BookmarkSidebar.tsx
@@ -0,0 +1,354 @@
+import { useRef, useState } from 'react';
+import type { Bookmark } from '../../hooks/useBookmarkStorage';
+import { BookmarkCard } from './BookmarkCard';
+import { BookmarkSearch } from './BookmarkSearch';
+
+
+interface ImportResult {
+    success: boolean;
+    count: number;
+    error?: string;
+}
+
+interface BookmarkSidebarProps {
+    bookmarks: Bookmark[];
+    filteredBookmarks: Bookmark[];
+    favoriteBookmarks: Bookmark[];
+    recentBookmarks: Bookmark[];
+    categories: string[];
+
+    searchQuery: string;
+    selectedCategory: string;
+
+    onSearchChange: (value: string) => void;
+    onCategoryChange: (value: string) => void;
+    onShareBookmark: (bookmark: Bookmark) => void;
+    onOpenBookmark: (bookmark: Bookmark) => void;
+    onCreateBookmark: () => void;
+    onEditBookmark: (bookmark: Bookmark) => void;
+    onDeleteBookmark: (bookmarkId: string) => void;
+    onToggleFavorite: (bookmarkId: string) => void;
+
+    onExportBookmarks: () => string;
+    onImportBookmarks: (json: string) => ImportResult;
+
+    onClose: () => void;
+}
+
+export function BookmarkSidebar({
+    bookmarks,
+    filteredBookmarks,
+    favoriteBookmarks,
+    recentBookmarks,
+    categories,
+    searchQuery,
+    selectedCategory,
+    onSearchChange,
+    onCategoryChange,
+    onShareBookmark,
+    onOpenBookmark,
+    onCreateBookmark,
+    onEditBookmark,
+    onDeleteBookmark,
+    onToggleFavorite,
+    onExportBookmarks,
+    onImportBookmarks,
+    onClose,
+}: BookmarkSidebarProps) {
+    const importInputRef = useRef<HTMLInputElement>(null);
+
+    const [bookmarkToDelete, setBookmarkToDelete] =
+        useState<Bookmark | null>(null);
+
+    const [importMessage, setImportMessage] =
+        useState<string | null>(null);
+
+    const showExtraSections =
+        searchQuery.trim().length === 0 &&
+        selectedCategory === 'all';
+
+    const handleExport = () => {
+        const content = onExportBookmarks();
+
+        const blob = new Blob([content], {
+            type: 'application/json',
+        });
+
+        const url = URL.createObjectURL(blob);
+
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = 'kepler-globe-bookmarks.json';
+
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+
+        URL.revokeObjectURL(url);
+    };
+
+    const handleImport = async (
+        event: React.ChangeEvent<HTMLInputElement>
+    ) => {
+        const file = event.target.files?.[0];
+
+        if (!file) {
+            return;
+        }
+
+        try {
+            const json = await file.text();
+            const result = onImportBookmarks(json);
+
+            setImportMessage(
+                result.success
+                    ? `${result.count} bookmark${result.count === 1 ? '' : 's'
+                    } imported.`
+                    : result.error ?? 'Unable to import bookmarks.'
+            );
+        } catch {
+            setImportMessage(
+                'Unable to read the selected bookmark file.'
+            );
+        } finally {
+            event.target.value = '';
+        }
+    };
+
+    return (
+        <>
+            <aside
+                aria-label="Globe bookmarks"
+                className="absolute right-3 top-3 z-30 flex max-h-[calc(100%-1.5rem)] w-[min(24rem,calc(100%-1.5rem))] flex-col border border-primary-container/35 bg-bg-deep-space/95 shadow-[0_0_35px_rgba(0,229,255,0.12)] backdrop-blur-xl md:right-6 md:top-6"
+            >
+                <header className="flex items-center justify-between border-b border-border-panel/70 p-4">
+                    <div>
+                        <p className="font-label-caps text-[9px] tracking-[0.18em] text-primary-container/75">
+                            NAVIGATION
+                        </p>
+                        <h2 className="font-display-lg text-base font-bold text-on-surface">
+                            SAVED VIEWS
+                        </h2>
+                    </div>
+
+                    <button
+                        type="button"
+                        onClick={onClose}
+                        aria-label="Close bookmark sidebar"
+                        className="border border-border-panel px-2 py-1 text-on-surface-variant transition-ui hover:border-primary-container hover:text-primary-container"
+                    >
+                        ×
+                    </button>
+                </header>
+
+                <div className="space-y-3 border-b border-border-panel/70 p-4">
+                    <BookmarkSearch
+                        value={searchQuery}
+                        onChange={onSearchChange}
+                    />
+
+                    <select
+                        value={selectedCategory}
+                        onChange={(event) =>
+                            onCategoryChange(event.target.value)
+                        }
+                        aria-label="Filter bookmarks by category"
+                        className="w-full border border-border-panel bg-surface-container/40 px-3 py-2 font-technical-data text-xs text-on-surface outline-none focus:border-primary-container"
+                    >
+                        <option value="all">All categories</option>
+
+                        {categories.map((category) => (
+                            <option key={category} value={category}>
+                                {category}
+                            </option>
+                        ))}
+                    </select>
+
+                    <button
+                        type="button"
+                        onClick={onCreateBookmark}
+                        className="w-full border border-primary-container bg-primary-container px-3 py-2 font-technical-data text-xs font-bold text-bg-deep-space transition-ui hover:brightness-110"
+                    >
+                        + CREATE BOOKMARK
+                    </button>
+                </div>
+
+                <div className="min-h-0 flex-1 space-y-5 overflow-y-auto p-4">
+                    {showExtraSections &&
+                        favoriteBookmarks.length > 0 && (
+                            <section aria-labelledby="favorite-bookmarks-title">
+                                <h3
+                                    id="favorite-bookmarks-title"
+                                    className="mb-2 font-label-caps text-[10px] tracking-widest text-status-warning"
+                                >
+                                    ★ FAVORITES
+                                </h3>
+
+                                <div className="space-y-2">
+                                    {favoriteBookmarks.map((bookmark) => (
+                                        <BookmarkCard
+                                            key={bookmark.id}
+                                            bookmark={bookmark}
+                                            onOpen={onOpenBookmark}
+                                            onShare={onShareBookmark}
+                                            onEdit={onEditBookmark}
+                                            onDelete={setBookmarkToDelete}
+                                            onToggleFavorite={(item) =>
+                                                onToggleFavorite(item.id)
+                                            }
+                                        />
+                                    ))}
+                                </div>
+                            </section>
+                        )}
+
+                    {showExtraSections &&
+                        recentBookmarks.length > 0 && (
+                            <section aria-labelledby="recent-bookmarks-title">
+                                <h3
+                                    id="recent-bookmarks-title"
+                                    className="mb-2 font-label-caps text-[10px] tracking-widest text-primary-container/80"
+                                >
+                                    RECENT
+                                </h3>
+
+                                <div className="space-y-2">
+                                    {recentBookmarks.map((bookmark) => (
+                                        <BookmarkCard
+                                            key={bookmark.id}
+                                            bookmark={bookmark}
+                                            onOpen={onOpenBookmark}
+                                            onShare={onShareBookmark}
+                                            onEdit={onEditBookmark}
+                                            onDelete={setBookmarkToDelete}
+                                            onToggleFavorite={(item) =>
+                                                onToggleFavorite(item.id)
+                                            }
+                                        />
+                                    ))}
+                                </div>
+                            </section>
+                        )}
+
+                    <section aria-labelledby="all-bookmarks-title">
+                        <div className="mb-2 flex items-center justify-between">
+                            <h3
+                                id="all-bookmarks-title"
+                                className="font-label-caps text-[10px] tracking-widest text-primary-container/80"
+                            >
+                                SAVED VIEWS
+                            </h3>
+
+                            <span className="font-technical-data text-[10px] text-on-surface-variant">
+                                {bookmarks.length}
+                            </span>
+                        </div>
+
+                        {filteredBookmarks.length > 0 ? (
+                            <div className="space-y-2">
+                                {filteredBookmarks.map((bookmark) => (
+                                    <BookmarkCard
+                                        key={bookmark.id}
+                                        bookmark={bookmark}
+                                        onOpen={onOpenBookmark}
+                                        onShare={onShareBookmark}
+                                        onEdit={onEditBookmark}
+                                        onDelete={setBookmarkToDelete}
+                                        onToggleFavorite={(item) =>
+                                            onToggleFavorite(item.id)
+                                        }
+                                    />
+                                ))}
+                            </div>
+                        ) : (
+                            <p className="border border-dashed border-border-panel p-4 text-center font-technical-data text-xs text-on-surface-variant">
+                                No bookmarks match this search.
+                            </p>
+                        )}
+                    </section>
+                </div>
+
+                <footer className="border-t border-border-panel/70 p-4">
+                    <input
+                        ref={importInputRef}
+                        type="file"
+                        accept="application/json,.json"
+                        className="hidden"
+                        onChange={handleImport}
+                    />
+
+                    <div className="grid grid-cols-2 gap-2">
+                        <button
+                            type="button"
+                            onClick={() => importInputRef.current?.click()}
+                            className="border border-border-panel px-3 py-2 font-technical-data text-xs font-bold text-on-surface-variant transition-ui hover:border-primary-container hover:text-primary-container"
+                        >
+                            IMPORT
+                        </button>
+
+                        <button
+                            type="button"
+                            onClick={handleExport}
+                            className="border border-border-panel px-3 py-2 font-technical-data text-xs font-bold text-on-surface-variant transition-ui hover:border-primary-container hover:text-primary-container"
+                        >
+                            EXPORT
+                        </button>
+                    </div>
+
+                    {importMessage && (
+                        <p
+                            role="status"
+                            className="mt-2 font-technical-data text-[10px] text-primary-container"
+                        >
+                            {importMessage}
+                        </p>
+                    )}
+                </footer>
+            </aside>
+
+            {bookmarkToDelete && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm">
+                    <section
+                        role="dialog"
+                        aria-modal="true"
+                        aria-labelledby="delete-bookmark-title"
+                        className="w-full max-w-sm border border-status-emergency/50 bg-bg-deep-space p-5 shadow-[0_0_35px_rgba(255,59,48,0.15)]"
+                    >
+                        <h2
+                            id="delete-bookmark-title"
+                            className="font-display-lg text-lg font-bold text-on-surface"
+                        >
+                            Delete Bookmark?
+                        </h2>
+
+                        <p className="mt-2 font-technical-data text-sm text-on-surface-variant">
+                            Delete “{bookmarkToDelete.name}”? This action cannot
+                            be undone.
+                        </p>
+
+                        <div className="mt-5 flex justify-end gap-2">
+                            <button
+                                type="button"
+                                onClick={() => setBookmarkToDelete(null)}
+                                className="border border-border-panel px-4 py-2 font-technical-data text-xs font-bold text-on-surface-variant"
+                            >
+                                CANCEL
+                            </button>
+
+                            <button
+                                type="button"
+                                onClick={() => {
+                                    onDeleteBookmark(bookmarkToDelete.id);
+                                    setBookmarkToDelete(null);
+                                }}
+                                className="border border-status-emergency bg-status-emergency px-4 py-2 font-technical-data text-xs font-bold text-white"
+                            >
+                                DELETE
+                            </button>
+                        </div>
+                    </section>
+                </div>
+            )}
+        </>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/hooks/useBookmarkStorage.ts b/frontend/src/hooks/useBookmarkStorage.ts
new file mode 100644
index 0000000..8ce19ff
--- /dev/null
+++ b/frontend/src/hooks/useBookmarkStorage.ts
@@ -0,0 +1,328 @@
+import { useCallback, useState } from 'react';
+import { DEFAULT_BOOKMARKS } from '../utils/bookmarkHelpers';
+
+export interface Bookmark {
+  id: string;
+  name: string;
+  description?: string;
+  category: string;
+
+  latitude: number;
+  longitude: number;
+  altitude: number;
+
+  heading: number;
+  pitch: number;
+  roll: number;
+
+  selectedSatellite?: string;
+  activeFilters?: string[];
+
+  isFavorite: boolean;
+  isDefault?: boolean;
+
+  createdAt: string;
+  updatedAt: string;
+  lastOpenedAt?: string;
+}
+
+const STORAGE_KEY = 'kepler-globe-bookmarks';
+function mergeWithDefaultBookmarks(
+  storedBookmarks: Bookmark[]
+): Bookmark[] {
+  const storedById = new Map(
+    storedBookmarks.map((bookmark) => [
+      bookmark.id,
+      bookmark,
+    ])
+  );
+
+  const defaultIds = new Set(
+    DEFAULT_BOOKMARKS.map((bookmark) => bookmark.id)
+  );
+
+  const defaultsWithSavedPreferences = DEFAULT_BOOKMARKS.map(
+    (preset) => ({
+      ...preset,
+      ...storedById.get(preset.id),
+      isDefault: true,
+    })
+  );
+
+  const customBookmarks = storedBookmarks.filter(
+    (bookmark) => !defaultIds.has(bookmark.id)
+  );
+
+  return [
+    ...defaultsWithSavedPreferences,
+    ...customBookmarks,
+  ];
+}
+
+function loadBookmarks(): Bookmark[] {
+  try {
+    const storedBookmarks =
+      localStorage.getItem(STORAGE_KEY);
+
+    if (!storedBookmarks) {
+      return DEFAULT_BOOKMARKS;
+    }
+
+    const parsedBookmarks: unknown =
+      JSON.parse(storedBookmarks);
+
+    if (!Array.isArray(parsedBookmarks)) {
+      return DEFAULT_BOOKMARKS;
+    }
+
+    return mergeWithDefaultBookmarks(
+      parsedBookmarks as Bookmark[]
+    );
+  } catch (error) {
+    console.error(
+      'Failed to load bookmarks from localStorage:',
+      error
+    );
+
+    return DEFAULT_BOOKMARKS;
+  }
+}
+
+export function useBookmarkStorage() {
+  const [bookmarks, setBookmarks] = useState<Bookmark[]>(loadBookmarks);
+  
+  
+
+  /**
+   * Save bookmarks to localStorage
+   */
+  const saveBookmarks = useCallback(
+    (newBookmarks: Bookmark[]) => {
+      try {
+        localStorage.setItem(
+          STORAGE_KEY,
+          JSON.stringify(newBookmarks)
+        );
+
+        setBookmarks(newBookmarks);
+      } catch (error) {
+        console.error(
+          'Failed to save bookmarks to localStorage:',
+          error
+        );
+      }
+    },
+    []
+  );
+
+  /**
+   * Add a bookmark
+   */
+  const addBookmark = useCallback(
+    (bookmark: Bookmark) => {
+      setBookmarks((currentBookmarks) => {
+        const updatedBookmarks = [
+          ...currentBookmarks,
+          bookmark,
+        ];
+
+        try {
+          localStorage.setItem(
+            STORAGE_KEY,
+            JSON.stringify(updatedBookmarks)
+          );
+        } catch (error) {
+          console.error(
+            'Failed to save bookmark:',
+            error
+          );
+        }
+
+        return updatedBookmarks;
+      });
+    },
+    []
+  );
+
+  /**
+   * Update a bookmark
+   */
+  const updateBookmark = useCallback(
+    (
+      id: string,
+      updates: Partial<Bookmark>
+    ) => {
+      setBookmarks((currentBookmarks) => {
+        const updatedBookmarks =
+          currentBookmarks.map((bookmark) =>
+            bookmark.id === id
+              ? {
+                  ...bookmark,
+                  ...updates,
+                  updatedAt:
+                    new Date().toISOString(),
+                }
+              : bookmark
+          );
+
+        try {
+          localStorage.setItem(
+            STORAGE_KEY,
+            JSON.stringify(updatedBookmarks)
+          );
+        } catch (error) {
+          console.error(
+            'Failed to update bookmark:',
+            error
+          );
+        }
+
+        return updatedBookmarks;
+      });
+    },
+    []
+  );
+
+  /**
+   * Delete a bookmark
+   */
+  const deleteBookmark = useCallback(
+    (id: string) => {
+      setBookmarks((currentBookmarks) => {
+        const updatedBookmarks =
+          currentBookmarks.filter(
+            (bookmark) => bookmark.id !== id
+          );
+
+        try {
+          localStorage.setItem(
+            STORAGE_KEY,
+            JSON.stringify(updatedBookmarks)
+          );
+        } catch (error) {
+          console.error(
+            'Failed to delete bookmark:',
+            error
+          );
+        }
+
+        return updatedBookmarks;
+      });
+    },
+    []
+  );
+
+  /**
+   * Toggle favorite status
+   */
+  const toggleFavorite = useCallback(
+    (id: string) => {
+      setBookmarks((currentBookmarks) => {
+        const updatedBookmarks =
+          currentBookmarks.map((bookmark) =>
+            bookmark.id === id
+              ? {
+                  ...bookmark,
+                  isFavorite:
+                    !bookmark.isFavorite,
+                  updatedAt:
+                    new Date().toISOString(),
+                }
+              : bookmark
+          );
+
+        try {
+          localStorage.setItem(
+            STORAGE_KEY,
+            JSON.stringify(updatedBookmarks)
+          );
+        } catch (error) {
+          console.error(
+            'Failed to toggle bookmark favorite:',
+            error
+          );
+        }
+
+        return updatedBookmarks;
+      });
+    },
+    []
+  );
+
+  /**
+   * Mark bookmark as recently opened
+   */
+  const markAsOpened = useCallback(
+    (id: string) => {
+      setBookmarks((currentBookmarks) => {
+        const updatedBookmarks =
+          currentBookmarks.map((bookmark) =>
+            bookmark.id === id
+              ? {
+                  ...bookmark,
+                  lastOpenedAt:
+                    new Date().toISOString(),
+                  updatedAt:
+                    new Date().toISOString(),
+                }
+              : bookmark
+          );
+
+        try {
+          localStorage.setItem(
+            STORAGE_KEY,
+            JSON.stringify(updatedBookmarks)
+          );
+        } catch (error) {
+          console.error(
+            'Failed to mark bookmark as opened:',
+            error
+          );
+        }
+
+        return updatedBookmarks;
+      });
+    },
+    []
+  );
+
+  /**
+   * Replace all bookmarks.
+   * Used for importing bookmarks.
+   */
+  const replaceBookmarks = useCallback(
+    (newBookmarks: Bookmark[]) => {
+      saveBookmarks(newBookmarks);
+    },
+    [saveBookmarks]
+  );
+
+  /**
+   * Clear all bookmarks
+   */
+ const clearBookmarks = useCallback(() => {
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+    setBookmarks(DEFAULT_BOOKMARKS);
+  } catch (error) {
+    console.error(
+      'Failed to clear bookmarks:',
+      error
+    );
+  }
+}, []);
+
+  return {
+    bookmarks,
+
+    addBookmark,
+    updateBookmark,
+    deleteBookmark,
+
+    toggleFavorite,
+    markAsOpened,
+
+    replaceBookmarks,
+    clearBookmarks,
+  };
+}
\ No newline at end of file
diff --git a/frontend/src/hooks/useBookmarks.ts b/frontend/src/hooks/useBookmarks.ts
new file mode 100644
index 0000000..3d28d7e
--- /dev/null
+++ b/frontend/src/hooks/useBookmarks.ts
@@ -0,0 +1,517 @@
+import {
+    useCallback,
+    useMemo,
+    useState,
+} from 'react';
+
+import {
+    useBookmarkStorage,
+    type Bookmark,
+} from './useBookmarkStorage';
+
+interface CreateBookmarkInput {
+    name: string;
+    description?: string;
+    category: string;
+
+    latitude: number;
+    longitude: number;
+    altitude: number;
+
+    heading: number;
+    pitch: number;
+    roll: number;
+
+    selectedSatellite?: string;
+    activeFilters?: string[];
+}
+
+interface UpdateBookmarkInput {
+    name?: string;
+    description?: string;
+    category?: string;
+
+    latitude?: number;
+    longitude?: number;
+    altitude?: number;
+
+    heading?: number;
+    pitch?: number;
+    roll?: number;
+
+    selectedSatellite?: string;
+    activeFilters?: string[];
+}
+
+export function useBookmarks() {
+    const {
+        bookmarks,
+        addBookmark: addBookmarkToStorage,
+        updateBookmark: updateBookmarkInStorage,
+        deleteBookmark: deleteBookmarkFromStorage,
+
+        markAsOpened,
+        replaceBookmarks,
+    } = useBookmarkStorage();
+
+    const [searchQuery, setSearchQuery] =
+        useState('');
+
+    const [
+        selectedCategory,
+        setSelectedCategory,
+    ] = useState<string>('all');
+
+    /**
+     * Create a new bookmark
+     */
+    const addBookmark = useCallback(
+        (input: CreateBookmarkInput) => {
+            const now =
+                new Date().toISOString();
+
+            const newBookmark: Bookmark = {
+                id: crypto.randomUUID(),
+
+                name: input.name.trim(),
+
+                description:
+                    input.description?.trim() || '',
+
+                category:
+                    input.category.trim() || 'Custom',
+
+                latitude: input.latitude,
+                longitude: input.longitude,
+                altitude: input.altitude,
+
+                heading: input.heading,
+                pitch: input.pitch,
+                roll: input.roll,
+
+                selectedSatellite:
+                    input.selectedSatellite,
+
+                activeFilters:
+                    input.activeFilters,
+
+                isFavorite: false,
+                isDefault: false,
+
+                createdAt: now,
+                updatedAt: now,
+            };
+
+            addBookmarkToStorage(
+                newBookmark
+            );
+
+            return newBookmark;
+        },
+        [addBookmarkToStorage]
+    );
+
+    /**
+     * Update an existing bookmark
+     */
+    const updateBookmark = useCallback(
+        (id: string, updates: UpdateBookmarkInput) => {
+            const existingBookmark = bookmarks.find(
+                (bookmark) => bookmark.id === id
+            );
+
+            if (!existingBookmark || existingBookmark.isDefault) {
+                return;
+            }
+
+            const cleanedUpdates = {
+                ...updates,
+                ...(updates.name !== undefined && {
+                    name: updates.name.trim(),
+                }),
+                ...(updates.description !== undefined && {
+                    description: updates.description.trim(),
+                }),
+                ...(updates.category !== undefined && {
+                    category: updates.category.trim(),
+                }),
+            };
+
+            updateBookmarkInStorage(id, cleanedUpdates);
+        },
+        [bookmarks, updateBookmarkInStorage]
+    );
+
+    /**
+     * Delete a bookmark
+     *
+     * The UI should show the confirmation dialog
+     * before calling this function.
+     */
+    const deleteBookmark = useCallback(
+        (id: string) => {
+            const bookmark =
+                bookmarks.find(
+                    (item) => item.id === id
+                );
+
+            // Prevent deletion of default bookmarks
+            if (bookmark?.isDefault) {
+                return false;
+            }
+
+            deleteBookmarkFromStorage(id);
+
+            return true;
+        },
+        [
+            bookmarks,
+            deleteBookmarkFromStorage,
+        ]
+    );
+
+    /**
+     * Toggle favorite status
+     */
+    const toggleFavorite = useCallback(
+        (id: string) => {
+            const bookmark =
+                bookmarks.find(
+                    (item) => item.id === id
+                );
+
+            if (!bookmark) {
+                return;
+            }
+
+            updateBookmarkInStorage(id, {
+                isFavorite:
+                    !bookmark.isFavorite,
+            });
+        },
+        [
+            bookmarks,
+            updateBookmarkInStorage,
+        ]
+    );
+
+    /**
+     * Mark bookmark as recently opened
+     */
+    const markAsRecent = useCallback(
+        (id: string) => {
+            markAsOpened(id);
+        },
+        [markAsOpened]
+    );
+
+    /**
+     * Get bookmark by ID
+     */
+    const getBookmark = useCallback(
+        (id: string) => {
+            return bookmarks.find(
+                (bookmark) =>
+                    bookmark.id === id
+            );
+        },
+        [bookmarks]
+    );
+
+    /**
+     * Get unique categories
+     */
+    const categories = useMemo(() => {
+        const uniqueCategories =
+            new Set(
+                bookmarks.map(
+                    (bookmark) =>
+                        bookmark.category
+                )
+            );
+
+        return Array.from(
+            uniqueCategories
+        ).sort();
+    }, [bookmarks]);
+
+    /**
+     * Filter bookmarks
+     */
+    const filteredBookmarks = useMemo(() => {
+        const query =
+            searchQuery
+                .trim()
+                .toLowerCase();
+
+        return bookmarks
+            .filter((bookmark) => {
+                const matchesSearch =
+                    query.length === 0 ||
+                    bookmark.name
+                        .toLowerCase()
+                        .includes(query) ||
+                    (
+                        bookmark.description ??
+                        ''
+                    )
+                        .toLowerCase()
+                        .includes(query) ||
+                    bookmark.category
+                        .toLowerCase()
+                        .includes(query);
+
+                const matchesCategory =
+                    selectedCategory === 'all' ||
+                    bookmark.category ===
+                    selectedCategory;
+
+                return (
+                    matchesSearch &&
+                    matchesCategory
+                );
+            })
+            .sort((a, b) => {
+                // Favorites first
+                if (
+                    a.isFavorite !==
+                    b.isFavorite
+                ) {
+                    return a.isFavorite
+                        ? -1
+                        : 1;
+                }
+
+                // Recently opened first
+                const aDate = new Date(
+                    a.lastOpenedAt ??
+                    a.updatedAt
+                ).getTime();
+
+                const bDate = new Date(
+                    b.lastOpenedAt ??
+                    b.updatedAt
+                ).getTime();
+
+                return bDate - aDate;
+            });
+    }, [
+        bookmarks,
+        searchQuery,
+        selectedCategory,
+    ]);
+
+    /**
+     * Favorite bookmarks
+     */
+    const favoriteBookmarks =
+        useMemo(
+            () =>
+                bookmarks
+                    .filter(
+                        (bookmark) =>
+                            bookmark.isFavorite
+                    )
+                    .sort(
+                        (a, b) =>
+                            new Date(
+                                b.lastOpenedAt ??
+                                b.updatedAt
+                            ).getTime() -
+                            new Date(
+                                a.lastOpenedAt ??
+                                a.updatedAt
+                            ).getTime()
+                    ),
+            [bookmarks]
+        );
+
+    /**
+     * Recent bookmarks
+     */
+    const recentBookmarks =
+        useMemo(
+            () =>
+                [...bookmarks]
+                    .sort(
+                        (a, b) =>
+                            new Date(
+                                b.lastOpenedAt ??
+                                b.updatedAt
+                            ).getTime() -
+                            new Date(
+                                a.lastOpenedAt ??
+                                a.updatedAt
+                            ).getTime()
+                    )
+                    .slice(0, 5),
+            [bookmarks]
+        );
+
+    /**
+     * Export bookmarks as JSON
+     */
+    const exportBookmarks =
+        useCallback(() => {
+            return JSON.stringify(
+                bookmarks,
+                null,
+                2
+            );
+        }, [bookmarks]);
+
+    /**
+     * Import bookmarks from JSON
+     */
+    const importBookmarks =
+        useCallback(
+            (json: string) => {
+                try {
+                    const parsed: unknown =
+                        JSON.parse(json);
+
+                    if (
+                        !Array.isArray(parsed)
+                    ) {
+                        throw new Error(
+                            'Invalid bookmark file format.'
+                        );
+                    }
+
+                    const importedBookmarks: Bookmark[] =
+                        parsed
+                            .filter(
+                                (
+                                    item
+                                ): item is Bookmark => {
+                                    if (
+                                        !item ||
+                                        typeof item !==
+                                        'object'
+                                    ) {
+                                        return false;
+                                    }
+
+                                    const bookmark =
+                                        item as Partial<Bookmark>;
+
+                                    return (
+                                        typeof bookmark.name ===
+                                        'string' &&
+                                        typeof bookmark.category ===
+                                        'string' &&
+                                        typeof bookmark.latitude ===
+                                        'number' &&
+                                        typeof bookmark.longitude ===
+                                        'number' &&
+                                        typeof bookmark.altitude ===
+                                        'number' &&
+                                        typeof bookmark.heading ===
+                                        'number' &&
+                                        typeof bookmark.pitch ===
+                                        'number' &&
+                                        typeof bookmark.roll ===
+                                        'number'
+                                    );
+                                }
+                            )
+                            .map(
+                                (bookmark) => {
+                                    const now =
+                                        new Date().toISOString();
+
+                                    return {
+                                        ...bookmark,
+
+                                        id: crypto.randomUUID(),
+
+                                        isDefault: false,
+
+                                        isFavorite:
+                                            Boolean(
+                                                bookmark.isFavorite
+                                            ),
+
+                                        createdAt:
+                                            bookmark.createdAt ??
+                                            now,
+
+                                        updatedAt: now,
+                                    };
+                                }
+                            );
+
+                    if (
+                        importedBookmarks.length ===
+                        0
+                    ) {
+                        throw new Error(
+                            'No valid bookmarks found in the imported file.'
+                        );
+                    }
+
+                    // Add imported bookmarks
+                    // to existing bookmarks
+                    replaceBookmarks([
+                        ...bookmarks,
+                        ...importedBookmarks,
+                    ]);
+
+                    return {
+                        success: true,
+                        count:
+                            importedBookmarks.length,
+                    };
+                } catch (error) {
+                    console.error(
+                        'Failed to import bookmarks:',
+                        error
+                    );
+
+                    return {
+                        success: false,
+                        count: 0,
+                        error:
+                            error instanceof Error
+                                ? error.message
+                                : 'Failed to import bookmarks.',
+                    };
+                }
+            },
+            [
+                bookmarks,
+                replaceBookmarks,
+            ]
+        );
+
+    return {
+        // Data
+        bookmarks,
+        filteredBookmarks,
+        favoriteBookmarks,
+        recentBookmarks,
+        categories,
+
+        // State
+        searchQuery,
+        selectedCategory,
+
+        // Search
+        setSearchQuery,
+        setSelectedCategory,
+
+        // CRUD
+        addBookmark,
+        updateBookmark,
+        deleteBookmark,
+        getBookmark,
+
+        // Bookmark actions
+        toggleFavorite,
+        markAsRecent,
+
+        // Import / Export
+        exportBookmarks,
+        importBookmarks,
+    };
+}
\ No newline at end of file
diff --git a/frontend/src/utils/bookmarkHelpers.ts b/frontend/src/utils/bookmarkHelpers.ts
new file mode 100644
index 0000000..ccd6869
--- /dev/null
+++ b/frontend/src/utils/bookmarkHelpers.ts
@@ -0,0 +1,251 @@
+import type { Bookmark } from '../hooks/useBookmarkStorage';
+
+const PRESET_TIMESTAMP = '2026-01-01T00:00:00.000Z';
+
+const DEFAULT_HEADING = 0;
+const DEFAULT_PITCH = -1.48; // Approximately -85 degrees.
+const DEFAULT_ROLL = 0;
+
+export const DEFAULT_BOOKMARKS: Bookmark[] = [
+  {
+    id: 'default-earth-overview',
+    name: 'Earth Overview',
+    description: 'A wide global view of Earth.',
+    category: 'Overview',
+    latitude: 15,
+    longitude: 30,
+    altitude: 20_000_000,
+    heading: DEFAULT_HEADING,
+    pitch: DEFAULT_PITCH,
+    roll: DEFAULT_ROLL,
+    isFavorite: false,
+    isDefault: true,
+    createdAt: PRESET_TIMESTAMP,
+    updatedAt: PRESET_TIMESTAMP,
+  },
+  {
+    id: 'default-iss',
+    name: 'ISS',
+    description: 'A low-Earth-orbit perspective associated with the International Space Station.',
+    category: 'Satellite',
+    latitude: 0,
+    longitude: 0,
+    altitude: 2_200_000,
+    heading: DEFAULT_HEADING,
+    pitch: DEFAULT_PITCH,
+    roll: DEFAULT_ROLL,
+    isFavorite: false,
+    isDefault: true,
+    createdAt: PRESET_TIMESTAMP,
+    updatedAt: PRESET_TIMESTAMP,
+  },
+  {
+    id: 'default-india',
+    name: 'India',
+    description: 'Overview centered on the Indian subcontinent.',
+    category: 'Region',
+    latitude: 20.5937,
+    longitude: 78.9629,
+    altitude: 3_000_000,
+    heading: DEFAULT_HEADING,
+    pitch: DEFAULT_PITCH,
+    roll: DEFAULT_ROLL,
+    isFavorite: false,
+    isDefault: true,
+    createdAt: PRESET_TIMESTAMP,
+    updatedAt: PRESET_TIMESTAMP,
+  },
+  {
+    id: 'default-europe',
+    name: 'Europe',
+    description: 'Regional overview of Europe.',
+    category: 'Region',
+    latitude: 54.526,
+    longitude: 15.2551,
+    altitude: 3_500_000,
+    heading: DEFAULT_HEADING,
+    pitch: DEFAULT_PITCH,
+    roll: DEFAULT_ROLL,
+    isFavorite: false,
+    isDefault: true,
+    createdAt: PRESET_TIMESTAMP,
+    updatedAt: PRESET_TIMESTAMP,
+  },
+  {
+    id: 'default-north-america',
+    name: 'North America',
+    description: 'Regional overview of North America.',
+    category: 'Region',
+    latitude: 45,
+    longitude: -100,
+    altitude: 4_500_000,
+    heading: DEFAULT_HEADING,
+    pitch: DEFAULT_PITCH,
+    roll: DEFAULT_ROLL,
+    isFavorite: false,
+    isDefault: true,
+    createdAt: PRESET_TIMESTAMP,
+    updatedAt: PRESET_TIMESTAMP,
+  },
+  {
+    id: 'default-starlink',
+    name: 'Starlink Constellation',
+    description: 'Wide view suitable for examining a large low-Earth-orbit constellation.',
+    category: 'Constellation',
+    latitude: 0,
+    longitude: -20,
+    altitude: 10_000_000,
+    heading: DEFAULT_HEADING,
+    pitch: DEFAULT_PITCH,
+    roll: DEFAULT_ROLL,
+    isFavorite: false,
+    isDefault: true,
+    createdAt: PRESET_TIMESTAMP,
+    updatedAt: PRESET_TIMESTAMP,
+  },
+  {
+    id: 'default-low-earth-orbit',
+    name: 'Low Earth Orbit',
+    description: 'A closer view of the low-Earth-orbit operational region.',
+    category: 'Orbit',
+    latitude: 10,
+    longitude: 0,
+    altitude: 5_000_000,
+    heading: DEFAULT_HEADING,
+    pitch: DEFAULT_PITCH,
+    roll: DEFAULT_ROLL,
+    isFavorite: false,
+    isDefault: true,
+    createdAt: PRESET_TIMESTAMP,
+    updatedAt: PRESET_TIMESTAMP,
+  },
+];
+
+type SharedBookmarkData = Pick<
+  Bookmark,
+  | 'name'
+  | 'description'
+  | 'category'
+  | 'latitude'
+  | 'longitude'
+  | 'altitude'
+  | 'heading'
+  | 'pitch'
+  | 'roll'
+>;
+
+function toBase64Url(value: string): string {
+  const bytes = new TextEncoder().encode(value);
+  const binary = Array.from(bytes, (byte) =>
+    String.fromCharCode(byte)
+  ).join('');
+
+  return btoa(binary)
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=+$/g, '');
+}
+
+function fromBase64Url(value: string): string {
+  const base64 = value
+    .replace(/-/g, '+')
+    .replace(/_/g, '/');
+
+  const padded = base64.padEnd(
+    Math.ceil(base64.length / 4) * 4,
+    '='
+  );
+
+  const binary = atob(padded);
+
+  const bytes = Uint8Array.from(binary, (character) =>
+    character.charCodeAt(0)
+  );
+
+  return new TextDecoder().decode(bytes);
+}
+
+function isValidSharedBookmark(
+  value: unknown
+): value is SharedBookmarkData {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+
+  const bookmark = value as Partial<SharedBookmarkData>;
+
+  return (
+    typeof bookmark.name === 'string' &&
+    typeof bookmark.category === 'string' &&
+    typeof bookmark.latitude === 'number' &&
+    Number.isFinite(bookmark.latitude) &&
+    typeof bookmark.longitude === 'number' &&
+    Number.isFinite(bookmark.longitude) &&
+    typeof bookmark.altitude === 'number' &&
+    Number.isFinite(bookmark.altitude) &&
+    typeof bookmark.heading === 'number' &&
+    Number.isFinite(bookmark.heading) &&
+    typeof bookmark.pitch === 'number' &&
+    Number.isFinite(bookmark.pitch) &&
+    typeof bookmark.roll === 'number' &&
+    Number.isFinite(bookmark.roll)
+  );
+}
+
+export function createBookmarkShareUrl(
+  bookmark: Bookmark
+): string {
+  const sharedData: SharedBookmarkData = {
+    name: bookmark.name,
+    description: bookmark.description,
+    category: bookmark.category,
+    latitude: bookmark.latitude,
+    longitude: bookmark.longitude,
+    altitude: bookmark.altitude,
+    heading: bookmark.heading,
+    pitch: bookmark.pitch,
+    roll: bookmark.roll,
+  };
+
+  const url = new URL(window.location.href);
+
+  url.searchParams.set(
+    'bookmark',
+    toBase64Url(JSON.stringify(sharedData))
+  );
+
+  return url.toString();
+}
+
+export function getSharedBookmarkFromUrl(): Bookmark | null {
+  try {
+    const encodedBookmark = new URLSearchParams(
+      window.location.search
+    ).get('bookmark');
+
+    if (!encodedBookmark) {
+      return null;
+    }
+
+    const decodedBookmark: unknown = JSON.parse(
+      fromBase64Url(encodedBookmark)
+    );
+
+    if (!isValidSharedBookmark(decodedBookmark)) {
+      return null;
+    }
+
+    const now = new Date().toISOString();
+
+    return {
+      ...decodedBookmark,
+      id: crypto.randomUUID(),
+      isFavorite: false,
+      isDefault: false,
+      createdAt: now,
+      updatedAt: now,
+    };
+  } catch {
+    return null;
+  }
+}
\ No newline at end of file