diff --git a/src/components/RegionMap.tsx b/src/components/RegionMap.tsx
index f1cd6a0..13d7d3f 100644
--- a/src/components/RegionMap.tsx
+++ b/src/components/RegionMap.tsx
@@ -8,7 +8,6 @@ import { useQuery } from '@tanstack/react-query';
 import { getSecurityColor } from '../utils/securityColors';
 
 const pocketbaseUrl = `https://evebase.site.quack-lab.dev/api/collections/regionview/records`;
-// const pocketbaseUrl = `https://evebase.site.quack-lab.dev/api/collections/regionview/records?filter=(sysregion%3D'${encodedSystem}')`;
 
 interface SolarSystem {
   solarSystemName: string;
@@ -31,6 +30,12 @@ interface ProcessedConnection {
   color: string;
 }
 
+interface RegionMapProps {
+  regionName: string;
+  focusSystem?: string;
+  isCompact?: boolean;
+}
+
 const fetchRegionData = async (regionName: string): Promise<SolarSystem[]> => {
   const response = await fetch(`/${regionName}.json`);
   if (!response.ok) {
@@ -52,7 +57,11 @@ const fetchRegionData = async (regionName: string): Promise<SolarSystem[]> => {
   return systems;
 };
 
-export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
+export const RegionMap: React.FC<RegionMapProps> = ({ 
+  regionName, 
+  focusSystem, 
+  isCompact = false 
+}) => {
   const navigate = useNavigate();
   const [viewBox, setViewBox] = useState({ x: 0, y: 0, width: 1200, height: 800 });
   const [isPanning, setIsPanning] = useState(false);
@@ -73,19 +82,13 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
 
     systems.forEach(system => {
       system.connectedSystems?.forEach(connectedSystem => {
-        // Create a unique key by sorting system names alphabetically
         const connectionKey = [system.solarSystemName, connectedSystem].sort().join('-');
-
-        // Skip if we've already processed this connection
         if (connections.has(connectionKey)) return;
 
         const fromPos = nodePositions[system.solarSystemName];
         const toPos = nodePositions[connectedSystem];
-
-        // Skip if positions are not available
         if (!fromPos || !toPos) return;
 
-        // Calculate average security for the connection
         const toSystem = systems.find(s => s.solarSystemName === connectedSystem);
         if (!toSystem) return;
 
@@ -104,7 +107,7 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
     return Array.from(connections.values());
   }, [systems, nodePositions]);
 
-  // Initialize node positions when data is loaded
+  // Initialize node positions and focus on system if specified
   useEffect(() => {
     if (systems) {
       const positions: Record<string, Position> = {};
@@ -115,8 +118,21 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
         };
       });
       setNodePositions(positions);
+
+      // If focusSystem is specified and we're in compact mode, center on it
+      if (focusSystem && isCompact) {
+        const focusSystemData = systems.find(s => s.solarSystemName === focusSystem);
+        if (focusSystemData) {
+          setViewBox({
+            x: focusSystemData.x - 200,
+            y: focusSystemData.y - 150,
+            width: 400,
+            height: 300
+          });
+        }
+      }
     }
-  }, [systems]);
+  }, [systems, focusSystem, isCompact]);
 
   const handleSystemClick = (systemName: string) => {
     navigate(`/systems/${systemName}`);
@@ -165,7 +181,6 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
     const mouseX = e.clientX - rect.left;
     const mouseY = e.clientY - rect.top;
 
-    // Invert scroll direction: negative deltaY (scroll up) zooms out, positive (scroll down) zooms in
     const scale = e.deltaY < 0 ? 1.1 : 0.9;
     const newWidth = viewBox.width * scale;
     const newHeight = viewBox.height * scale;
@@ -186,7 +201,7 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center">
+      <div className={`${isCompact ? 'h-full' : 'min-h-screen'} bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center`}>
         <div className="text-white text-xl">Loading {regionName} data...</div>
       </div>
     );
@@ -194,22 +209,103 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
 
   if (error) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center">
+      <div className={`${isCompact ? 'h-full' : 'min-h-screen'} bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center`}>
         <div className="text-center">
           <h1 className="text-4xl font-bold text-white mb-4">Error Loading Region</h1>
           <p className="text-red-400 mb-6">Failed to load data for {regionName}</p>
-          <Button
-            onClick={() => navigate('/')}
-            className="bg-purple-600 hover:bg-purple-700"
-          >
-            <ArrowLeft className="w-4 h-4 mr-2" />
-            Return to Galaxy Map
-          </Button>
+          {!isCompact && (
+            <Button
+              onClick={() => navigate('/')}
+              className="bg-purple-600 hover:bg-purple-700"
+            >
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              Return to Galaxy Map
+            </Button>
+          )}
         </div>
       </div>
     );
   }
 
+  // Compact mode (for system page)
+  if (isCompact) {
+    return (
+      <div className="w-full h-full bg-black/20 backdrop-blur-sm">
+        <svg
+          ref={svgRef}
+          width="100%"
+          height="100%"
+          viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
+          className="cursor-grab active:cursor-grabbing"
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          onMouseLeave={handleMouseUp}
+          onWheel={handleWheel}
+        >
+          <defs>
+            <filter id="glow-compact">
+              <feGaussianBlur stdDeviation="3" result="coloredBlur" />
+              <feMerge>
+                <feMergeNode in="coloredBlur" />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+          </defs>
+
+          {/* Render connections */}
+          {processedConnections.map(connection => (
+            <Connection
+              key={connection.key}
+              from={connection.from}
+              to={connection.to}
+              color={connection.color}
+            />
+          ))}
+
+          {/* Render systems */}
+          {systems?.map((system) => (
+            <MapNode
+              key={system.solarSystemName}
+              id={system.solarSystemName}
+              name={system.solarSystemName}
+              position={nodePositions[system.solarSystemName] || { x: 0, y: 0 }}
+              onClick={() => handleSystemClick(system.solarSystemName)}
+              type="system"
+              security={system.security}
+              signatures={system.signatures}
+            />
+          ))}
+
+          {/* Highlight focused system */}
+          {focusSystem && nodePositions[focusSystem] && (
+            <circle
+              cx={nodePositions[focusSystem].x}
+              cy={nodePositions[focusSystem].y}
+              r="15"
+              fill="none"
+              stroke="#a855f7"
+              strokeWidth="3"
+              strokeDasharray="5,5"
+              opacity="0.8"
+            >
+              <animateTransform
+                attributeName="transform"
+                attributeType="XML"
+                type="rotate"
+                from={`0 ${nodePositions[focusSystem].x} ${nodePositions[focusSystem].y}`}
+                to={`360 ${nodePositions[focusSystem].x} ${nodePositions[focusSystem].y}`}
+                dur="3s"
+                repeatCount="indefinite"
+              />
+            </circle>
+          )}
+        </svg>
+      </div>
+    );
+  }
+
+  // Full page mode (original region page)
   return (
     <div className="w-full h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden relative">
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-900/20 via-slate-900/40 to-black"></div>
@@ -252,7 +348,7 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
               </filter>
             </defs>
 
-            {/* Render connections first (behind nodes) */}
+            {/* Render connections */}
             {processedConnections.map(connection => (
               <Connection
                 key={connection.key}
diff --git a/src/components/RegionOverviewMap.tsx b/src/components/RegionOverviewMap.tsx
deleted file mode 100644
index 9e9d5e3..0000000
--- a/src/components/RegionOverviewMap.tsx
+++ /dev/null
@@ -1,286 +0,0 @@
-
-import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { MapNode } from './MapNode';
-import { Connection } from './Connection';
-import { useQuery } from '@tanstack/react-query';
-import { getSecurityColor } from '../utils/securityColors';
-
-const pocketbaseUrl = `https://evebase.site.quack-lab.dev/api/collections/regionview/records`;
-
-interface SolarSystem {
-  solarSystemName: string;
-  x: number;
-  y: number;
-  security: number;
-  signatures: number;
-  connectedSystems: string[];
-}
-
-interface Position {
-  x: number;
-  y: number;
-}
-
-interface ProcessedConnection {
-  key: string;
-  from: Position;
-  to: Position;
-  color: string;
-}
-
-interface RegionOverviewMapProps {
-  regionName: string;
-  currentSystem: string;
-  className?: string;
-}
-
-const fetchRegionData = async (regionName: string): Promise<SolarSystem[]> => {
-  const response = await fetch(`/${regionName}.json`);
-  if (!response.ok) {
-    throw new Error('Failed to fetch region data');
-  }
-  const systems = await response.json();
-
-  const regionSignatures = await fetch(`${pocketbaseUrl}?filter=(sysregion%3D'${regionName}')`);
-  const regionSignaturesJson = await regionSignatures.json();
-  
-  if (regionSignaturesJson.items.length > 0) {
-    for (const systemSigs of regionSignaturesJson.items) {
-      const system = systems.find(s => s.solarSystemName === systemSigs.sysname);
-      if (system) {
-        system.signatures = systemSigs.sigcount;
-      }
-    }
-  }
-  return systems;
-};
-
-export const RegionOverviewMap: React.FC<RegionOverviewMapProps> = ({ 
-  regionName, 
-  currentSystem, 
-  className = "" 
-}) => {
-  const navigate = useNavigate();
-  const [viewBox, setViewBox] = useState({ x: 0, y: 0, width: 800, height: 600 });
-  const [isPanning, setIsPanning] = useState(false);
-  const [lastPanPoint, setLastPanPoint] = useState({ x: 0, y: 0 });
-  const [nodePositions, setNodePositions] = useState<Record<string, Position>>({});
-  const svgRef = useRef<SVGSVGElement>(null);
-
-  const { data: systems, isLoading } = useQuery({
-    queryKey: ['region-overview', regionName],
-    queryFn: () => fetchRegionData(regionName),
-  });
-
-  // Process connections
-  const processedConnections = useMemo(() => {
-    if (!systems || !nodePositions) return [];
-
-    const connections = new Map<string, ProcessedConnection>();
-
-    systems.forEach(system => {
-      system.connectedSystems?.forEach(connectedSystem => {
-        const connectionKey = [system.solarSystemName, connectedSystem].sort().join('-');
-        if (connections.has(connectionKey)) return;
-
-        const fromPos = nodePositions[system.solarSystemName];
-        const toPos = nodePositions[connectedSystem];
-        if (!fromPos || !toPos) return;
-
-        const toSystem = systems.find(s => s.solarSystemName === connectedSystem);
-        if (!toSystem) return;
-
-        const avgSecurity = (system.security + toSystem.security) / 2;
-        const connectionColor = getSecurityColor(avgSecurity);
-
-        connections.set(connectionKey, {
-          key: connectionKey,
-          from: fromPos,
-          to: toPos,
-          color: connectionColor
-        });
-      });
-    });
-
-    return Array.from(connections.values());
-  }, [systems, nodePositions]);
-
-  // Initialize positions and center on current system
-  useEffect(() => {
-    if (systems) {
-      const positions: Record<string, Position> = {};
-      systems.forEach(system => {
-        positions[system.solarSystemName] = {
-          x: system.x,
-          y: system.y
-        };
-      });
-      setNodePositions(positions);
-
-      // Find current system and center view on it
-      const currentSystemData = systems.find(s => s.solarSystemName === currentSystem);
-      if (currentSystemData) {
-        setViewBox({
-          x: currentSystemData.x - 200, // Center with some padding
-          y: currentSystemData.y - 150,
-          width: 400,
-          height: 300
-        });
-      }
-    }
-  }, [systems, currentSystem]);
-
-  const handleSystemClick = (systemName: string) => {
-    navigate(`/systems/${systemName}`);
-  };
-
-  const handleMouseDown = useCallback((e: React.MouseEvent) => {
-    if (!svgRef.current) return;
-    setIsPanning(true);
-    const rect = svgRef.current.getBoundingClientRect();
-    setLastPanPoint({
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top
-    });
-  }, []);
-
-  const handleMouseMove = useCallback((e: React.MouseEvent) => {
-    if (!isPanning || !svgRef.current) return;
-
-    const rect = svgRef.current.getBoundingClientRect();
-    const currentPoint = {
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top
-    };
-
-    const deltaX = (lastPanPoint.x - currentPoint.x) * (viewBox.width / rect.width);
-    const deltaY = (lastPanPoint.y - currentPoint.y) * (viewBox.height / rect.height);
-
-    setViewBox(prev => ({
-      ...prev,
-      x: prev.x + deltaX,
-      y: prev.y + deltaY
-    }));
-
-    setLastPanPoint(currentPoint);
-  }, [isPanning, lastPanPoint, viewBox.width, viewBox.height]);
-
-  const handleMouseUp = useCallback(() => {
-    setIsPanning(false);
-  }, []);
-
-  const handleWheel = useCallback((e: React.WheelEvent) => {
-    e.preventDefault();
-    if (!svgRef.current) return;
-
-    const rect = svgRef.current.getBoundingClientRect();
-    const mouseX = e.clientX - rect.left;
-    const mouseY = e.clientY - rect.top;
-
-    const scale = e.deltaY > 0 ? 1.1 : 0.9; // Inverted: scroll down = zoom in
-    const newWidth = viewBox.width * scale;
-    const newHeight = viewBox.height * scale;
-
-    const mouseXInSVG = viewBox.x + (mouseX / rect.width) * viewBox.width;
-    const mouseYInSVG = viewBox.y + (mouseY / rect.height) * viewBox.height;
-
-    const newX = mouseXInSVG - (mouseX / rect.width) * newWidth;
-    const newY = mouseYInSVG - (mouseY / rect.height) * newHeight;
-
-    setViewBox({
-      x: newX,
-      y: newY,
-      width: newWidth,
-      height: newHeight
-    });
-  }, [viewBox]);
-
-  if (isLoading) {
-    return (
-      <div className={`bg-black/20 backdrop-blur-sm border border-purple-500/30 rounded-lg flex items-center justify-center ${className}`}>
-        <div className="text-white text-sm">Loading region map...</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`bg-black/20 backdrop-blur-sm border border-purple-500/30 rounded-lg overflow-hidden ${className}`}>
-      <div className="p-2 border-b border-purple-500/30">
-        <h3 className="text-white text-sm font-semibold">{regionName} Region</h3>
-        <p className="text-purple-200 text-xs">Click systems to navigate</p>
-      </div>
-      
-      <svg
-        ref={svgRef}
-        width="100%"
-        height="100%"
-        viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
-        className="cursor-grab active:cursor-grabbing"
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseUp}
-        onWheel={handleWheel}
-      >
-        <defs>
-          <filter id="glow-overview">
-            <feGaussianBlur stdDeviation="3" result="coloredBlur" />
-            <feMerge>
-              <feMergeNode in="coloredBlur" />
-              <feMergeNode in="SourceGraphic" />
-            </feMerge>
-          </filter>
-        </defs>
-
-        {/* Render connections */}
-        {processedConnections.map(connection => (
-          <Connection
-            key={connection.key}
-            from={connection.from}
-            to={connection.to}
-            color={connection.color}
-          />
-        ))}
-
-        {/* Render systems */}
-        {systems?.map((system) => (
-          <MapNode
-            key={system.solarSystemName}
-            id={system.solarSystemName}
-            name={system.solarSystemName}
-            position={nodePositions[system.solarSystemName] || { x: 0, y: 0 }}
-            onClick={() => handleSystemClick(system.solarSystemName)}
-            type="system"
-            security={system.security}
-            signatures={system.signatures}
-          />
-        ))}
-
-        {/* Highlight current system with a ring */}
-        {currentSystem && nodePositions[currentSystem] && (
-          <circle
-            cx={nodePositions[currentSystem].x}
-            cy={nodePositions[currentSystem].y}
-            r="15"
-            fill="none"
-            stroke="#a855f7"
-            strokeWidth="3"
-            strokeDasharray="5,5"
-            opacity="0.8"
-          >
-            <animateTransform
-              attributeName="transform"
-              attributeType="XML"
-              type="rotate"
-              from={`0 ${nodePositions[currentSystem].x} ${nodePositions[currentSystem].y}`}
-              to={`360 ${nodePositions[currentSystem].x} ${nodePositions[currentSystem].y}`}
-              dur="3s"
-              repeatCount="indefinite"
-            />
-          </circle>
-        )}
-      </svg>
-    </div>
-  );
-};
diff --git a/src/pages/SystemView.tsx b/src/pages/SystemView.tsx
index d6f663d..7af0a1c 100644
--- a/src/pages/SystemView.tsx
+++ b/src/pages/SystemView.tsx
@@ -2,7 +2,7 @@
 import { useParams, useNavigate } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import SystemTracker from "@/components/SystemTracker";
-import { RegionOverviewMap } from "@/components/RegionOverviewMap";
+import { RegionMap } from "@/components/RegionMap";
 import { findSystemRegion } from "@/utils/systemRegionMapping";
 
 const SystemView = () => {
@@ -37,11 +37,19 @@ const SystemView = () => {
           {/* Regional overview map */}
           <div className="lg:col-span-1">
             {regionName ? (
-              <RegionOverviewMap
-                regionName={regionName}
-                currentSystem={system}
-                className="h-96"
-              />
+              <div className="h-96 border border-purple-500/30 rounded-lg overflow-hidden">
+                <div className="p-2 border-b border-purple-500/30 bg-black/20 backdrop-blur-sm">
+                  <h3 className="text-white text-sm font-semibold">{regionName} Region</h3>
+                  <p className="text-purple-200 text-xs">Click systems to navigate • Current: {system}</p>
+                </div>
+                <div className="h-[calc(100%-3rem)]">
+                  <RegionMap 
+                    regionName={regionName} 
+                    focusSystem={system}
+                    isCompact={true}
+                  />
+                </div>
+              </div>
             ) : (
               <div className="bg-black/20 backdrop-blur-sm border border-purple-500/30 rounded-lg p-4 h-96 flex items-center justify-center">
                 <div className="text-center">