diff --git a/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.module.scss b/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.module.scss
index 036d03e2..abd6790f 100644
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.module.scss
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.module.scss
@@ -24,6 +24,10 @@
     stroke: #d4f0ff;
   }
 
+  &.Gate {
+    stroke: #1c1e15;
+  }
+
   &.Hovered {
     stroke: #4e5d6c;
     stroke-width: 2px;
@@ -76,6 +80,11 @@
       stroke-width: 6px;
     }
   }
+
+  &.Gate {
+    stroke: #9aff40;
+  }
+
 }
 
 .ClickPath {
diff --git a/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.tsx b/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.tsx
index 2d0313b6..49fd48f2 100644
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 
 import classes from './SolarSystemEdge.module.scss';
-import { EdgeLabelRenderer, EdgeProps, getBezierPath, Position, useStore } from 'reactflow';
+import { EdgeLabelRenderer, EdgeProps, getBezierPath, getSmoothStepPath, Position, useStore } from 'reactflow';
 import { getEdgeParams } from '@/hooks/Mapper/components/map/utils.ts';
 import clsx from 'clsx';
 import { ConnectionType, MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
@@ -46,7 +46,9 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
 
     const offset = isThickConnections ? MAP_OFFSETS_TICK[targetPos] : MAP_OFFSETS[targetPos];
 
-    const [edgePath, labelX, labelY] = getBezierPath({
+    const method = isWormhole ? getBezierPath : getSmoothStepPath;
+
+    const [edgePath, labelX, labelY] = method({
       sourceX: sx - offset.x,
       sourceY: sy - offset.y,
       sourcePosition: sourcePos,
@@ -54,8 +56,9 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
       targetX: tx + offset.x,
       targetY: ty + offset.y,
     });
+
     return [edgePath, labelX, labelY, sx, sy, tx, ty, sourcePos, targetPos];
-  }, [isThickConnections, sourceNode, targetNode]);
+  }, [isThickConnections, sourceNode, targetNode, isWormhole]);
 
   if (!sourceNode || !targetNode || !data) {
     return null;
@@ -69,6 +72,7 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
           [classes.Tick]: isThickConnections,
           [classes.TimeCrit]: isWormhole && data.time_status === TimeStatus.eol,
           [classes.Hovered]: hovered,
+          [classes.Gate]: !isWormhole,
         })}
         d={path}
         markerEnd={markerEnd}
@@ -82,6 +86,7 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
           [classes.MassVerge]: isWormhole && data.mass_status === MassState.verge,
           [classes.MassHalf]: isWormhole && data.mass_status === MassState.half,
           [classes.Frigate]: isWormhole && data.ship_size_type === ShipSizeStatus.small,
+          [classes.Gate]: !isWormhole,
         })}
         d={path}
         markerEnd={markerEnd}
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.tsx
index 5b035ae7..51e5543b 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.tsx
@@ -82,7 +82,7 @@ export const Connections = ({ selectedConnection, onHide }: OnTheMapProps) => {
   }, [cnInfo]);
 
   const [passages, setPassages] = useState<Passage[]>([]);
-  const [info, setInfo] = useState<ConnectionInfoOutput>(null);
+  const [info, setInfo] = useState<ConnectionInfoOutput | null>(null);
 
   const loadInfo = useCallback(
     async (connection: SolarSystemConnection) => {
@@ -141,7 +141,7 @@ export const Connections = ({ selectedConnection, onHide }: OnTheMapProps) => {
     >
       <div className={clsx(classes.SidebarContent, '')}>
         {/* Connection Info */}
-        <div className="px-2 pb-3 flex flex-col gap-2">
+        <div className="px-2 flex flex-col gap-2">
           {/* Connection Info Row */}
           <InfoDrawer title="Connection" rightSide>
             <div className="flex justify-end gap-2 items-center">
@@ -159,18 +159,25 @@ export const Connections = ({ selectedConnection, onHide }: OnTheMapProps) => {
             </div>
           </InfoDrawer>
 
-          {/* Connection Info Row */}
-          {isWormhole && (
-            <>
-              <InfoDrawer title="Approximate mass of passages" rightSide>
-                {kgToTons(approximateMass)}
-              </InfoDrawer>
+          <div className="flex justify-between gap-2">
+            {/*Left column*/}
+            <div>
+              {isWormhole && info?.marl_eol_time && (
+                <InfoDrawer title="Mark EOL Time">
+                  <TimeAgo timestamp={info.marl_eol_time} />
+                </InfoDrawer>
+              )}
+            </div>
 
-              <InfoDrawer title="Mark EOL Time" rightSide>
-                {info?.marl_eol_time ? <TimeAgo timestamp={info.marl_eol_time} /> : ' unknown '}
-              </InfoDrawer>
-            </>
-          )}
+            {/*Right column*/}
+            <div>
+              {isWormhole && (
+                <InfoDrawer title="Approximate mass of passages" rightSide>
+                  {kgToTons(approximateMass)}
+                </InfoDrawer>
+              )}
+            </div>
+          </div>
 
           <div className="flex gap-2"></div>
         </div>