chore: release version v1.37.5

Merge pull request #109 from guarzo/guarzo/themefixes
fix: restore node styling, simplify framework for new themes
2025-12-06 07:45:34 +00:00 · 2025-01-09 19:09:14 +00:00 · 2025-01-09 22:08:47 +03:00 · 2025-01-09 13:38:11 -05:00 · 2025-01-09 13:21:32 +00:00 · 2025-01-09 12:52:30 +00:00
53 changed files with 3407 additions and 1503 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -3,6 +3,8 @@
@import 'primereact/resources/themes/arya-blue/theme.css' layer(primereact);
 /*@import 'primereact/resources/themes/bootstrap4-dark-blue/theme.css' layer(primereact);*/

+@import '../js/hooks/Mapper/components/map/styles/index.scss';
+
@layer tailwind-base {
  @tailwind base;
 }
--- a/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/useContextMenuSystemHandlers.ts
+++ b/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/useContextMenuSystemHandlers.ts
@@ -88,6 +88,23 @@ export const useContextMenuSystemHandlers = ({ systems, hubs, outCommand }: UseC
    setSystem(undefined);
  }, []);

+  const onSystemTemporaryName = useCallback((temporaryName?: string) => {
+    const { system, outCommand } = ref.current;
+    if (!system) {
+      return;
+    }
+
+    outCommand({
+      type: OutCommand.updateSystemTemporaryName,
+      data: {
+        system_id: system,
+        value: temporaryName ?? '',
+      },
+    });
+    setSystem(undefined);
+  }, []);
+
+
  const onSystemStatus = useCallback((status: number) => {
    const { system, outCommand } = ref.current;
    if (!system) {
@@ -161,6 +178,7 @@ export const useContextMenuSystemHandlers = ({ systems, hubs, outCommand }: UseC
    onLockToggle,
    onHubToggle,
    onSystemTag,
+    onSystemTemporaryName,
    onSystemStatus,
    onSystemLabels,
    onOpenSettings,
--- a/assets/js/hooks/Mapper/components/hooks/useSolarSystemNode.ts
+++ b/assets/js/hooks/Mapper/components/hooks/useSolarSystemNode.ts
@@ -0,0 +1,173 @@
+// feel free to rename these imports or the file path as you see fit
+import { useMemo } from 'react';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
+import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
+import { useDoubleClick } from '@/hooks/Mapper/hooks/useDoubleClick.ts';
+import { REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
+import { MapSolarSystemType } from '../../map.types';
+import {
+  LABELS_INFO,
+  LABELS_ORDER,
+  getActivityType,
+} from '@/hooks/Mapper/components/map/constants.ts';
+import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
+import { getSystemClassStyles, prepareUnsplashedChunks } from '@/hooks/Mapper/components/map/helpers';
+import { sortWHClasses } from '@/hooks/Mapper/helpers';
+import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
+import { OutCommand } from '@/hooks/Mapper/types';
+
+const SpaceToClass: Record<string, string> = {
+  [Spaces.Caldari]: 'Caldaria',
+  [Spaces.Matar]: 'Mataria',
+  [Spaces.Amarr]: 'Amarria',
+  [Spaces.Gallente]: 'Gallente',
+};
+
+const sortedLabels = (labels: string[]) => {
+  if (!labels) return [];
+  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x]);
+};
+
+interface UseSolarSystemNodeParams {
+  data: MapSolarSystemType;
+  selected: boolean;
+}
+
+export function useSolarSystemNode({ data, selected }: UseSolarSystemNodeParams) {
+  // 1) Bring in relevant global state
+  const { interfaceSettings } = useMapRootState();
+  const { isShowUnsplashedSignatures } = interfaceSettings;
+  const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
+  
+  const {
+    data: {
+      characters,
+      presentCharacters,
+      wormholesData,
+      hubs,
+      kills,
+      userCharacters,
+      isConnecting,
+      hoverNodeId,
+      visibleNodes,
+      showKSpaceBG,
+      isThickConnections,
+    },
+    outCommand,
+  } = useMapState();
+
+  // 2) Extract data from the node
+  const {
+    system_class,
+    security,
+    class_title,
+    solar_system_id,
+    statics,
+    effect_name,
+    region_name,
+    region_id,
+    is_shattered,
+    solar_system_name,
+  } = data.system_static_info;
+
+  const { locked, name, tag, status, labels, id, temporary_name: temporaryName } = data || {};
+  const signatures = data.system_signatures;
+
+  // 3) Compute derived values
+  const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
+  
+  const charactersInSystem = useMemo(() => {
+    return characters
+      .filter(c => c.location?.solar_system_id === solar_system_id)
+      .filter(c => c.online);
+  }, [characters, presentCharacters, solar_system_id]);
+
+  const isWormhole = isWormholeSpace(system_class);
+  
+  const classTitleColor = useMemo(
+    () => getSystemClassStyles({ systemClass: system_class, security }),
+    [security, system_class],
+  );
+
+  const sortedStatics = useMemo(
+    () => sortWHClasses(wormholesData, statics),
+    [wormholesData, statics],
+  );
+
+  const labelsManager = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
+  const labelsInfo = useMemo(() => sortedLabels(labelsManager.list), [labelsManager]);
+  const labelCustom = useMemo(() => labelsManager.customLabel, [labelsManager]);
+
+  const killsCount = useMemo(() => {
+    const systemKills = kills[solar_system_id];
+    if (!systemKills) return null;
+    return systemKills;
+  }, [kills, solar_system_id]);
+
+  const hasUserCharacters = useMemo(() => {
+    return charactersInSystem.some(x => userCharacters.includes(x.eve_id));
+  }, [charactersInSystem, userCharacters]);
+
+  const dbClick = useDoubleClick(() => {
+    outCommand({
+      type: OutCommand.openSettings,
+      data: {
+        system_id: solar_system_id.toString(),
+      },
+    });
+  });
+
+  const showHandlers = isConnecting || hoverNodeId === id;
+
+  const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
+  const regionClass = showKSpaceBG ? SpaceToClass[space] : null;
+
+  const systemName = (isTempSystemNameEnabled && temporaryName) || solar_system_name;
+  const customName = (isTempSystemNameEnabled && temporaryName && name) 
+    || (solar_system_name !== name && name);
+
+  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
+    if (!isShowUnsplashedSignatures) {
+      return [[], []];
+    }
+    return prepareUnsplashedChunks(
+      signatures
+        .filter(s => s.group === 'Wormhole' && !s.linked_system)
+        .map(s => ({
+          eve_id: s.eve_id,
+          type: s.type,
+          custom_info: s.custom_info,
+        })),
+    );
+  }, [isShowUnsplashedSignatures, signatures]);
+
+  return {
+    selected,
+    visible,
+    isWormhole,
+    classTitleColor,
+    killsCount,
+    hasUserCharacters,
+    showHandlers,
+    regionClass,
+    systemName,
+    customName,
+    labelCustom,
+    is_shattered,
+    tag,
+    status,
+    labelsInfo,
+    dbClick,
+    sortedStatics,
+    effect_name,
+    region_name,
+    solar_system_id,
+    locked,
+    hubs,
+    charactersInSystem,
+    unsplashedLeft,
+    unsplashedRight,
+    isThickConnections,
+  };
+}
--- a/assets/js/hooks/Mapper/components/map/Map.module.scss
+++ b/assets/js/hooks/Mapper/components/map/Map.module.scss
@@ -1,8 +1,11 @@
 .MapRoot {
  width: 100%;
  height: 100%;
-}

-.BackgroundAlternateColor {
+  background-color: var(--rf-bg-color, #000000);

+  &.BackgroundAlternateColor {
+    background-color: var(--rf-soft-bg-color, #171717);
+    --rf-node-bg-color: var(--rf-node-soft-bg-color, #2b2b2b);
+  }
 }
--- a/assets/js/hooks/Mapper/components/map/Map.tsx
+++ b/assets/js/hooks/Mapper/components/map/Map.tsx
@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect } from 'react';
+import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo } from 'react';
 import ReactFlow, {
  Background,
  ConnectionMode,
@@ -16,8 +16,6 @@ import ReactFlow, {
 } from 'reactflow';
 import 'reactflow/dist/style.css';
 import classes from './Map.module.scss';
-import './styles/neon-theme.scss';
-import './styles/eve-common.scss';
 import { MapProvider, useMapState } from './MapProvider';
 import { useNodesState, useEdgesState, useMapHandlers, useUpdateNodes } from './hooks';
 import { MapHandlers, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
@@ -25,16 +23,19 @@ import {
  ContextMenuConnection,
  ContextMenuRoot,
  SolarSystemEdge,
-  SolarSystemNode,
+  SolarSystemNodeDefault,
+  SolarSystemNodeTheme,
  useContextMenuConnectionHandlers,
  useContextMenuRootHandlers,
 } from './components';
+import { wrapNode } from './utils/wrapNode';
 import { OnMapAddSystemCallback, OnMapSelectionChange } from './map.types';
 import { SESSION_KEY } from '@/hooks/Mapper/constants.ts';
 import { SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 import { NodeSelectionMouseHandler } from '@/hooks/Mapper/components/contexts/types.ts';
 import clsx from 'clsx';
+import { useBackgroundVars } from './hooks/useBackgroundVars';

 const DEFAULT_VIEW_PORT = { zoom: 1, x: 0, y: 0 };

@@ -76,11 +77,8 @@ const initialEdges = [
  },
 ];

-const nodeTypes = {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  custom: SolarSystemNode,
-} as never;
+
+

 const edgeTypes = {
  floating: SolarSystemEdge,
@@ -101,6 +99,7 @@ interface MapCompProps {
  isThickConnections?: boolean;
  isShowBackgroundPattern?: boolean;
  isSoftBackground?: boolean;
+  theme?: string;
 }

 const MapComp = ({
@@ -117,17 +116,30 @@ const MapComp = ({
  isThickConnections,
  isShowBackgroundPattern,
  isSoftBackground,
+  theme,
  onAddSystem,
 }: MapCompProps) => {
  const { getNode, getNodes } = useReactFlow();
  const [nodes, , onNodesChange] = useNodesState<Node<SolarSystemRawType>>(initialNodes);
  const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>>(initialEdges);

+
+  const nodeTypes = useMemo(() => {
+    return {
+      custom:
+        theme !== '' && theme !== 'default'
+          ? wrapNode(SolarSystemNodeTheme)
+          : wrapNode(SolarSystemNodeDefault),
+    };
+  }, [theme]);
+  
+
  useMapHandlers(refn, onSelectionChange);
  useUpdateNodes(nodes);
  const { handleRootContext, ...rootCtxProps } = useContextMenuRootHandlers({ onAddSystem });
  const { handleConnectionContext, ...connectionCtxProps } = useContextMenuConnectionHandlers();
  const { update } = useMapState();
+  const { variant, gap, size, color } = useBackgroundVars(theme);

  const onConnect: OnConnect = useCallback(
    params => {
@@ -229,7 +241,7 @@ const MapComp = ({

  return (
    <>
-      <div className={clsx(classes.MapRoot, { ['bg-neutral-900']: isSoftBackground })}>
+      <div className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}>
        <ReactFlow
          nodes={nodes}
          edges={edges}
@@ -276,7 +288,7 @@ const MapComp = ({
          selectionMode={SelectionMode.Partial}
        >
          {isShowMinimap && <MiniMap pannable zoomable ariaLabel="Mini map" className={minimapClasses} />}
-          {isShowBackgroundPattern && <Background />}
+          {isShowBackgroundPattern && <Background variant={variant} gap={gap} size={size} color={color} />}
        </ReactFlow>
        {/* <button className="z-auto btn btn-primary absolute top-20 right-20" onClick={handleGetPassages}>
          Test // DON NOT REMOVE
--- a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.module.scss
+++ b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.module.scss
@@ -1,15 +1,17 @@
+@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
+
 .ConnectionTimeEOL {
-  background-image: linear-gradient(207deg, transparent, #7452c3e3);
+  background-image: linear-gradient(207deg, transparent, var(--conn-time-eol));
 }

 .ConnectionFrigate {
-  background-image: linear-gradient(207deg, transparent, #325d88);
+  background-image: linear-gradient(207deg, transparent, var(--conn-frigate));
 }

 .ConnectionSave {
-  background-image: linear-gradient(207deg, transparent, rgba(155, 102, 45, 0.85));
+  background-image: linear-gradient(207deg, transparent, var(--conn-save));
 }

 .SelectedItem {
-  background-color: rgba(98, 98, 98, 0.33);
+  background-color: var(--selected-item-bg);
 }
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.module.scss
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.module.scss
@@ -1,14 +1,38 @@
-@import "@/hooks/Mapper/components/map/styles/neon-variables";
+@import '@/hooks/Mapper/components/map/styles/eve-common-variables';

-.react-flow__edge.selected {
-  .EdgePathBack {
-    stroke: $pastel-yellow;
+.EdgePathBack {
+  fill: none;
+  stroke: #80a5c5;
+  stroke-width: 3px;
+
+  &.TimeCrit {
+    stroke: #f11ab2;
+    stroke-width: 4px;
+  }
+
+  &.Hovered {
+    stroke: #b5c8d9;
+
+    &.TimeCrit {
+      stroke: #ef7dce;
+    }
+  }
+
+  &.Tick {
+    stroke-width: 5px;
+
+    &.TimeCrit {
+      stroke-width: 6px;
+    }
+  }
+
+  &.Gate {
+    stroke: #9aff40;
  }
 }

 .EdgePathFront {
  fill: none;
-
  stroke: #2c3844;
  stroke-width: 2px;

@@ -54,46 +78,29 @@
  }
 }

-.EdgePathBack {
-  fill: none;
-
-  stroke: #80a5c5;
-  stroke-width: 3px;
-
-  &.TimeCrit {
-    stroke: #f11ab2;
-    stroke-width: 4px;
-  }
-
-  &.Hovered {
-    stroke: #b5c8d9;
-
-    &.TimeCrit {
-      stroke: #ef7dce;
-    }
-  }
-
-  &.Tick {
-    stroke-width: 5px;
-
-    &.TimeCrit {
-      stroke-width: 6px;
-    }
-  }
-
-  &.Gate {
-    stroke: #9aff40;
-  }
-
-}
-
 .ClickPath {
  fill: none;
  stroke: none;
  stroke-width: 8px;
 }

-.LinkLabel{
+.Handle {
+  border: 1px solid var(--pastel-blue);
+  width: 5px;
+  height: 5px;
+  z-index: 1001;
+
+  &.Tick {
+    width: 7px;
+    height: 7px;
+  }
+
+  &.Right {
+    margin-left: 0px;
+  }
+}
+
+.LinkLabel {
  font-size: 9px;
  line-height: 10px;
  padding: 2px 4px;
@@ -109,22 +116,3 @@
  height: 8px;
  font-size: 8px;
 }
-
-.Handle {
-  min-width: initial;
-  min-height: initial;
-  border: 1px solid #5a7d9a;
-  width: 5px;
-  height: 5px;
-  z-index: 1001;
-
-  &.Tick {
-    width: 7px;
-    height: 7px;
-
-    &.Right {
-      margin-left: 0px;
-    }
-  }
-}
-
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.tsx
@@ -130,7 +130,7 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
        />

        <div
-          className="absolute flex items-center gap-1"
+          className="absolute flex items-center gap-1 pointer-events-none"
          style={{
            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
          }}
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNode.Old.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNode.Old.tsx
@@ -4,6 +4,7 @@ import { MapSolarSystemType } from '../../map.types';
 import classes from './SolarSystemNode.module.scss';
 import clsx from 'clsx';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';

 import {
  EFFECT_BACKGROUND_STYLES,
@@ -56,6 +57,8 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
  const { interfaceSettings } = useMapRootState();
  const { isShowUnsplashedSignatures } = interfaceSettings;

+  const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
+
  const {
    system_class,
    security,
@@ -71,18 +74,14 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS

  const signatures = data.system_signatures;

-  const { locked, name, tag, status, labels, id } = data || {};
-
-  const customName = solar_system_name !== name ? name : undefined;
+  const { locked, name, tag, status, labels, id, temporary_name: temporaryName } = data || {};

  const {
    data: {
      characters,
-      presentCharacters,
      wormholesData,
      hubs,
      kills,
-      userCharacters,
      isConnecting,
      hoverNodeId,
      visibleNodes,
@@ -96,8 +95,7 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS

  const charactersInSystem = useMemo(() => {
    return characters.filter(c => c.location?.solar_system_id === solar_system_id).filter(c => c.online);
-    // eslint-disable-next-line
-  }, [characters, presentCharacters, solar_system_id]);
+  }, [characters, solar_system_id]);

  const isWormhole = isWormholeSpace(system_class);
  const classTitleColor = useMemo(
@@ -114,14 +112,9 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
    if (!systemKills) {
      return null;
    }
-
    return systemKills;
  }, [kills, solar_system_id]);

-  const hasUserCharacters = useMemo(() => {
-    return charactersInSystem.some(x => userCharacters.includes(x.eve_id));
-  }, [charactersInSystem, userCharacters]);
-
  const dbClick = useDoubleClick(() => {
    outCommand({
      type: OutCommand.openSettings,
@@ -131,16 +124,58 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
    });
  });

+
  const showHandlers = isConnecting || hoverNodeId === id;
+  const dropHandler =  isConnecting ? 'all' : 'none';

  const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
  const regionClass = showKSpaceBG ? SpaceToClass[space] : null;

+  const hasTempName = isTempSystemNameEnabled && temporaryName;
+
+  // systemName: if temporary name is enabled and present, use it; otherwise use solar_system_name
+  const systemName = hasTempName
+    ? temporaryName
+    : solar_system_name;
+
+  // hsCustomLabel: if temporary name is enabled and present, show region_name, otherwise labelCustom
+  const hsCustomLabel = hasTempName
+    ? region_name
+    : labelCustom;
+
+  // whCustomLabel: default to solar_system_name; if that's falsy, use labelCustom
+  const whCustomLabel = solar_system_name || labelCustom;
+
+  // customLabel: if wormhole, use whCustomLabel; otherwise hsCustomLabel
+  const customLabel = isWormhole
+    ? whCustomLabel
+    : hsCustomLabel;
+
+  // whCustomName: if name differs from solar_system_name, use name; otherwise blank
+  const whCustomName = (name !== solar_system_name)
+    ? name
+    : '';
+
+  // hsSuffix: if name differs from solar_system_name, append name; otherwise blank
+  const needsHsSuffix = (name !== solar_system_name);
+  const hsSuffix = needsHsSuffix
+    ? name
+    : '';
+
+  // hsCustomName: if there's a temp name, show "solar_system_name + suffix", otherwise "region_name + suffix"
+  const hsCustomName = hasTempName
+    ? `${solar_system_name} ${hsSuffix}`
+    : `${region_name} ${hsSuffix}`;
+
+  // customName: if wormhole, use whCustomName; otherwise hsCustomName
+  const customName = isWormhole
+    ? whCustomName
+    : hsCustomName;
+
  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
    if (!isShowUnsplashedSignatures) {
      return [[], []];
    }
-
    return prepareUnsplashedChunks(
      signatures
        .filter(s => s.group === 'Wormhole' && !s.linked_system)
@@ -156,22 +191,22 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
    <>
      {visible && (
        <div className={classes.Bookmarks}>
-          {labelCustom !== '' && (
+          {customLabel !== '' && (
            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
-              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">{labelCustom}</span>
+              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">{customLabel}</span>
            </div>
          )}

          {is_shattered && (
            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
-              <span className={clsx('pi pi-chart-pie', classes.icon)} />
+              <span className={clsx('pi pi-chart-pie text-[0.55rem]')} />
            </div>
          )}

          {killsCount && (
            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[getActivityType(killsCount)])}>
              <div className={clsx(classes.BookmarkWithIcon)}>
-                <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
+                <span className={clsx(PrimeIcons.BOLT, 'text-[0.65rem]')} />
                <span className={clsx(classes.text)}>{killsCount}</span>
              </div>
            </div>
@@ -184,32 +219,37 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
          ))}
        </div>
      )}
-
      <div
-        className={clsx(classes.RootCustomNode, regionClass, classes[STATUS_CLASSES[status]], {
-          [classes.selected]: selected,
-        })}
+        className={clsx(
+          classes.RootCustomNode,
+          regionClass,
+          classes[STATUS_CLASSES[status]],
+          { [classes.selected]: selected },
+          'flex flex-col w-[130px] h-[34px]',
+          'px-[6px] pt-[2px] pb-[3px] text-[10px]',
+          'leading-[1] space-y-[1px]',
+          'shadow-[0_0_5px_rgba(45,45,45,0.5)]',
+          'border border-[var(--pastel-blue-darken10)] rounded-[5px]',
+        )}
      >
        {visible && (
          <>
-            <div className={classes.HeadRow}>
+            <div className={clsx(classes.HeadRow, 'flex items-center gap-[3px]')}>
              <div className={clsx(classes.classTitle, classTitleColor, '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]')}>
                {class_title ?? '-'}
              </div>
-              {tag != null && tag !== '' && (
-                <div className={clsx(classes.TagTitle, 'text-sky-400 font-medium')}>{tag}</div>
-              )}
+
              <div
                className={clsx(
                  classes.classSystemName,
-                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] flex-grow overflow-hidden text-ellipsis whitespace-nowrap font-sans',
+                  'flex-grow overflow-hidden text-ellipsis whitespace-nowrap font-sans',
                )}
              >
-                {solar_system_name}
+                {systemName}
              </div>

              {isWormhole && (
-                <div className={classes.statics}>
+                <div className={clsx(classes.statics, 'flex gap-[2px] text-[8px]')}>
                  {sortedStatics.map(x => (
                    <WormholeClassComp key={x} id={x} />
                  ))}
@@ -221,40 +261,34 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
              )}
            </div>

-            <div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
-              {customName && (
-                <div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-blue-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
-                  {customName}
-                </div>
-              )}
-
-              {!isWormhole && !customName && (
+            <div className={clsx(classes.BottomRow, 'flex items-center gap-[3px]')}>
+              <div className="flex items-center gap-2">
+                {tag != null && tag !== '' && (
+                    <div className={clsx(classes.TagTitle, 'font-medium')}>{`[${tag}]`}</div>
+                )}
                <div
-                  className={clsx(
-                    '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-stone-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
-                  )}
+                  className={clsx(classes.customName)}
+                  title={`${customName ?? ''} ${labelCustom ?? ''}`}
                >
-                  {region_name}
+                  {customName} {labelCustom}
                </div>
-              )}
+              </div>

-              {isWormhole && !customName && <div />}
-
-              <div className="flex items-center justify-end">
-                <div className="flex gap-1 items-center">
-                  {locked && <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem', fontWeight: 'bold' }}></i>}
-
-                  {hubs.includes(solar_system_id.toString()) && (
-                    <i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem', fontWeight: 'bold' }}></i>
-                  )}
-
-                  {charactersInSystem.length > 0 && (
-                    <div className={clsx(classes.localCounter, { ['text-amber-300']: hasUserCharacters })}>
-                      <i className="pi pi-users" style={{ fontSize: '0.50rem' }}></i>
-                      <span className="font-sans">{charactersInSystem.length}</span>
-                    </div>
-                  )}
-                </div>
+              <div className="flex items-center ml-auto gap-[2px]">
+                {locked && <i className={clsx(PrimeIcons.LOCK, 'text-[0.45rem] font-bold')} />}
+                {hubs.includes(solar_system_id.toString()) && (
+                  <i className={clsx(PrimeIcons.MAP_MARKER, 'text-[0.45rem] font-bold')} />
+                )}
+                {charactersInSystem.length > 0 && (
+                  <div
+                    className={clsx(
+                      classes.localCounter,
+                      'flex gap-[2px]'
+                    )}
+                  >
+                    <span className="font-sans text-[0.65rem]">{charactersInSystem.length}</span>
+                  </div>
+                )}
              </div>
            </div>
          </>
@@ -268,9 +302,8 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
          ))}
        </div>
      )}
-
      {visible && isShowUnsplashedSignatures && (
-        <div className={clsx([classes.Unsplashed, classes['Unsplashed--right']])}>
+        <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
          {unsplashedRight.map(x => (
            <UnsplashedSignature key={x.sig_id} signature={x} />
          ))}
@@ -278,13 +311,33 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
      )}

      <div onMouseDownCapture={dbClick} className={classes.Handlers}>
+      <Handle
+          type="target"
+          position={Position.Bottom}
+          style={{
+            width: '100%',
+            height: '100%',
+            background: 'none',
+            cursor: 'cell',
+            pointerEvents: dropHandler,
+            opacity: 0,
+            borderRadius: 0 }}
+          id="whole-node-target"
+        />
        <Handle
          type="source"
          className={clsx(classes.Handle, classes.HandleTop, {
            [classes.selected]: selected,
            [classes.Tick]: isThickConnections,
          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
+          style={{
+            width: '100%',
+            height: '55%',
+            background: 'none',
+            cursor: 'cell',
+            opacity: 0,
+            borderRadius: 0,
+            visibility: showHandlers ? 'visible' : 'hidden',}}
          position={Position.Top}
          id="a"
        />
@@ -294,7 +347,7 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
            [classes.selected]: selected,
            [classes.Tick]: isThickConnections,
          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
+          style={{ visibility: showHandlers ? 'visible' : 'hidden', cursor: 'cell',  zIndex: 10  }}
          position={Position.Right}
          id="b"
        />
@@ -304,7 +357,7 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
            [classes.selected]: selected,
            [classes.Tick]: isThickConnections,
          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
+          style={{ visibility: 'hidden', cursor: 'cell' }}
          position={Position.Bottom}
          id="c"
        />
@@ -314,7 +367,7 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
            [classes.selected]: selected,
            [classes.Tick]: isThickConnections,
          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
+          style={{ visibility: showHandlers ? 'visible' : 'hidden', cursor: 'cell',  zIndex: 10  }}
          position={Position.Left}
          id="d"
        />
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.module.scss
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.module.scss
@@ -80,8 +80,8 @@ $tooltip-bg: #202020; // Dark background for tooltips
    }
  }

-  &.selected {
-    border-color: $pastel-pink;
+  .selected {
+    border-color: var($pastel-pink, #d291bc);
    box-shadow: 0 0 10px #9a1af1c2;
  }

@@ -93,43 +93,55 @@ $tooltip-bg: #202020; // Dark background for tooltips
    border: 1px solid $pastel-pink;
  }

-  &.eve-system-status-home {
-    border: 1px solid darken($eve-solar-system-status-color-home, 30%);
-    background-image: linear-gradient(275deg, $eve-solar-system-status-friendly, transparent);
-
+ .eve-system-status-home {
+    border: 1px solid var(--eve-solar-system-status-color-home-dark30);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-friendly),
+      transparent
+    );
    &.selected {
-      border-color: $eve-solar-system-status-color-home;
+      border-color: var(--eve-solar-system-status-color-home);
    }
  }
-
-  &.eve-system-status-friendly {
-    border: 1px solid darken($eve-solar-system-status-color-friendly, 20%);
-    background-image: linear-gradient(275deg, darken($eve-solar-system-status-friendly, 30%), transparent);
-
+  .eve-system-status-friendly {
+    border: 1px solid var(--eve-solar-system-status-color-friendly-dark20);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-friendly-dark30),
+      transparent
+    );
    &.selected {
-      border-color: darken($eve-solar-system-status-color-friendly, 5%);
+      border-color: var(--eve-solar-system-status-color-friendly-dark5);
    }
  }
-
-  &.eve-system-status-lookingFor {
-    border: 1px solid darken($eve-solar-system-status-color-lookingFor, 15%);
+  .eve-system-status-lookingFor {
+    border: 1px solid var(--eve-solar-system-status-color-lookingFor-dark15);
    background-image: linear-gradient(275deg, #45ff8f2f, #457fff2f);
-
    &.selected {
-      border-color: $pastel-pink;
+      border-color: var(--pastel-pink, #d291bc);
    }
  }
-
-  &.eve-system-status-warning {
-    background-image: linear-gradient(275deg, $eve-solar-system-status-warning, transparent);
+  .eve-system-status-warning {
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-warning),
+      transparent
+    );
  }
-
-  &.eve-system-status-dangerous {
-    background-image: linear-gradient(275deg, $eve-solar-system-status-dangerous, transparent);
+  .eve-system-status-dangerous {
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-dangerous),
+      transparent
+    );
  }
-
-  &.eve-system-status-target {
-    background-image: linear-gradient(275deg, $eve-solar-system-status-target, transparent);
+  .eve-system-status-target {
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-target),
+      transparent
+    );
  }
 }

@@ -242,10 +254,10 @@ $tooltip-bg: #202020; // Dark background for tooltips

  .TagTitle {
    font-size: 11px;
-    font-weight: bold;
+    font-weight: medium;
    text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);

-    color: #ffb01d;
+    color: var(--rf-tag-color, #38BDF8);
  }

  /* Firefox kostyl */
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.tsx
@@ -0,0 +1,235 @@
+import { memo } from 'react';
+import { Handle, Position } from 'reactflow';
+import clsx from 'clsx';
+
+import classes from './SolarSystemNodeDefault.module.scss'; 
+import { PrimeIcons } from 'primereact/api';
+
+import { useSolarSystemNode } from '../../hooks/useSolarSystemNode';
+
+import {
+  MARKER_BOOKMARK_BG_STYLES,
+  STATUS_CLASSES,
+  EFFECT_BACKGROUND_STYLES,
+} from '@/hooks/Mapper/components/map/constants';
+import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
+import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
+
+
+export const SolarSystemNodeDefault = memo((props) => {
+  const nodeVars = useSolarSystemNode(props);
+
+  return (
+    <>
+      {nodeVars.visible && (
+        <div className={classes.Bookmarks}>
+          {nodeVars.labelCustom !== '' && (
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
+              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">
+                {nodeVars.labelCustom}
+              </span>
+            </div>
+          )}
+
+          {nodeVars.isShattered && (
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
+              <span className={clsx('pi pi-chart-pie', classes.icon)} />
+            </div>
+          )}
+
+          {nodeVars.killsCount && (
+            <div
+              className={clsx(
+                classes.Bookmark,
+                MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!]
+              )}
+            >
+              <div className={clsx(classes.BookmarkWithIcon)}>
+                <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
+                <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
+              </div>
+            </div>
+          )}
+
+          {nodeVars.labelsInfo.map(x => (
+            <div
+              key={x.id}
+              className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}
+            >
+              {x.shortName}
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div
+        className={clsx(
+          classes.RootCustomNode,
+          nodeVars.regionClass && classes[nodeVars.regionClass],
+          classes[STATUS_CLASSES[nodeVars.status]],
+          { [classes.selected]: nodeVars.selected },
+        )}
+      >
+        {nodeVars.visible && (
+          <>
+            <div className={classes.HeadRow}>
+              <div
+                className={clsx(
+                  classes.classTitle,
+                  nodeVars.classTitleColor,
+                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]',
+                )}
+              >
+                {nodeVars.classTitle ?? '-'}
+              </div>
+
+              {nodeVars.tag != null && nodeVars.tag !== '' && (
+                <div className={clsx(classes.TagTitle, 'text-sky-400 font-medium')}>
+                  {nodeVars.tag}
+                </div>
+              )}
+
+              <div
+                className={clsx(
+                  classes.classSystemName,
+                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] flex-grow overflow-hidden text-ellipsis whitespace-nowrap font-sans',
+                )}
+              >
+                {nodeVars.systemName}
+              </div>
+
+              {nodeVars.isWormhole && (
+                <div className={classes.statics}>
+                  {nodeVars.sortedStatics.map(whClass => (
+                    <WormholeClassComp key={whClass} id={whClass} />
+                  ))}
+                </div>
+              )}
+
+              {nodeVars.effectName !== null && nodeVars.isWormhole && (
+                <div
+                  className={clsx(
+                    classes.effect,
+                    EFFECT_BACKGROUND_STYLES[nodeVars.effectName],
+                  )}
+                />
+              )}
+            </div>
+
+            <div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
+              {nodeVars.customName && (
+                <div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-blue-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
+                  {nodeVars.customName}
+                </div>
+              )}
+
+              {!nodeVars.isWormhole && !nodeVars.customName && (
+                <div
+                  className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-stone-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5"
+                >
+                  {nodeVars.regionName}
+                </div>
+              )}
+
+              {nodeVars.isWormhole && !nodeVars.customName && <div />}
+
+              <div className="flex items-center justify-end">
+                <div className="flex gap-1 items-center">
+                  {nodeVars.locked && (
+                    <i
+                      className={PrimeIcons.LOCK}
+                      style={{ fontSize: '0.45rem', fontWeight: 'bold' }}
+                    />
+                  )}
+
+                  {nodeVars.hubs.includes(nodeVars.solarSystemId.toString()) && (
+                    <i
+                      className={PrimeIcons.MAP_MARKER}
+                      style={{ fontSize: '0.45rem', fontWeight: 'bold' }}
+                    />
+                  )}
+
+                  {nodeVars.charactersInSystem.length > 0 && (
+                    <div
+                      className={clsx(classes.localCounter, {
+                        ['text-amber-300']: nodeVars.hasUserCharacters,
+                      })}
+                    >
+                      <i className="pi pi-users" style={{ fontSize: '0.50rem' }} />
+                      <span className="font-sans">
+                        {nodeVars.charactersInSystem.length}
+                      </span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+
+      {nodeVars.visible && (
+        <>
+          {nodeVars.unsplashedLeft.length > 0 && (
+            <div className={classes.Unsplashed}>
+              {nodeVars.unsplashedLeft.map(sig => (
+                <UnsplashedSignature key={sig.sig_id} signature={sig} />
+              ))}
+            </div>
+          )}
+
+          {nodeVars.unsplashedRight.length > 0 && (
+            <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
+              {nodeVars.unsplashedRight.map(sig => (
+                <UnsplashedSignature key={sig.sig_id} signature={sig} />
+              ))}
+            </div>
+          )}
+        </>
+      )}
+
+      <div onMouseDownCapture={nodeVars.dbClick} className={classes.Handlers}>
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleTop, {
+            [classes.selected]: nodeVars.selected,
+            [classes.Tick]: nodeVars.isThickConnections,
+          })}
+          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Top}
+          id="a"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleRight, {
+            [classes.selected]: nodeVars.selected,
+            [classes.Tick]: nodeVars.isThickConnections,
+          })}
+          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Right}
+          id="b"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleBottom, {
+            [classes.selected]: nodeVars.selected,
+            [classes.Tick]: nodeVars.isThickConnections,
+          })}
+          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Bottom}
+          id="c"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleLeft, {
+            [classes.selected]: nodeVars.selected,
+            [classes.Tick]: nodeVars.isThickConnections,
+          })}
+          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Left}
+          id="d"
+        />
+      </div>
+    </>
+  );
+});
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeTheme.module.scss
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeTheme.module.scss
@@ -0,0 +1,402 @@
+@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
+
+$pastel-blue: #5a7d9a;
+$pastel-pink: #d291bc;
+$pastel-green: #88b04b;
+$pastel-yellow: #ffdd59;
+$dark-bg: #2d2d2d;
+$text-color: #ffffff;
+$tooltip-bg: #202020; // Dark background for tooltips
+
+.RootCustomNode {
+  display: flex;
+  width: 130px;
+  height: 34px;
+
+  flex-direction: column;
+  padding: 2px 6px;
+  font-size: 10px;
+
+  background-color: var(--rf-node-bg-color, #202020) !important;
+  color: var(--rf-text-color, #ffffff);
+  font-family: var(--rf-node-font-family, inherit) !important;
+  font-weight: var(--rf-node-font-weight, inherit) !important;
+
+  box-shadow: 0 0 5px rgba($dark-bg, 0.5);
+  border: 1px solid darken($pastel-blue, 10%);
+  border-radius: 5px;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+
+  &.Mataria,
+  &.Amarria,
+  &.Gallente,
+  &.Caldaria {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-size: cover;
+      background-position: 50% 50%;
+      z-index: -1;
+      background-repeat: no-repeat;
+      border-radius: 3px;
+    }
+  }
+
+  &.Mataria {
+    &::before {
+      background-image: url('/images/mataria-180.png');
+      opacity: 0.6;
+      background-position-x: 1px;
+      background-position-y: -14px;
+    }
+  }
+
+  &.Caldaria {
+    &::before {
+      background-image: url('/images/caldaria-180.png');
+      opacity: 0.6;
+      background-position-x: 1px;
+      background-position-y: -10px;
+    }
+  }
+
+  &.Amarria {
+    &::before {
+      opacity: 0.45;
+      background-image: url('/images/amarr-180.png');
+      background-position-x: 0;
+      background-position-y: -13px;
+    }
+  }
+
+  &.Gallente {
+    &::before {
+      opacity: 0.5;
+      background-image: url('/images/gallente-180.png');
+      background-position-x: 1px;
+      background-position-y: 0;
+    }
+  }
+
+  .selected {
+    border-color: var($pastel-pink, #d291bc);
+    box-shadow: 0 0 10px #9a1af1c2;
+  }
+
+  .tooltip {
+    background-color: $tooltip-bg;
+    color: $text-color;
+    padding: 5px 10px;
+    border-radius: 3px;
+    border: 1px solid $pastel-pink;
+  }
+
+ .eve-system-status-home {
+    border: 1px solid var(--eve-solar-system-status-color-home-dark30);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-friendly),
+      transparent
+    );
+    &.selected {
+      border-color: var(--eve-solar-system-status-color-home);
+    }
+  }
+  .eve-system-status-friendly {
+    border: 1px solid var(--eve-solar-system-status-color-friendly-dark20);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-friendly-dark30),
+      transparent
+    );
+    &.selected {
+      border-color: var(--eve-solar-system-status-color-friendly-dark5);
+    }
+  }
+  .eve-system-status-lookingFor {
+    border: 1px solid var(--eve-solar-system-status-color-lookingFor-dark15);
+    background-image: linear-gradient(275deg, #45ff8f2f, #457fff2f);
+    &.selected {
+      border-color: var(--pastel-pink, #d291bc);
+    }
+  }
+  .eve-system-status-warning {
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-warning),
+      transparent
+    );
+  }
+  .eve-system-status-dangerous {
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-dangerous),
+      transparent
+    );
+  }
+  .eve-system-status-target {
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-target),
+      transparent
+    );
+  }
+}
+
+.Bookmarks {
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  display: flex;
+  left: 4px;
+
+  & > .Bookmark {
+    min-width: 13px;
+    height: 22px;
+    position: relative;
+    top: -13px;
+    border-radius: 5px;
+    color: #ffffff;
+    font-size: 8px;
+    text-align: center;
+    padding-top: 2px;
+    font-weight: bolder;
+    padding-left: 3px;
+    padding-right: 3px;
+
+    //background-color: #833ca4;
+
+    &:not(:first-child) {
+      box-shadow: inset 4px -3px 4px rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  .BookmarkWithIcon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: -2px;
+    text-shadow: 0 0 3px rgba(0, 0, 0, 1);
+    padding-right: 2px;
+
+    & > .icon {
+      width: 8px;
+      height: 8px;
+      font-size: 8px;
+    }
+
+    & > .text {
+      margin-top: 1px;
+      font-size: 9px;
+    }
+  }
+}
+
+.Unsplashed {
+  position: absolute;
+  width: calc(50% - 4px);
+  z-index: -1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  left: 2px;
+
+  &--right {
+    left: calc(50% + 6px);
+  }
+
+  & > .Signature {
+    width: 13px;
+    height: 4px;
+    position: relative;
+    top: 3px;
+    border-radius: 5px;
+    color: #ffffff;
+    font-size: 8px;
+    text-align: center;
+    padding-top: 2px;
+    font-weight: bolder;
+    padding-left: 3px;
+    padding-right: 3px;
+    display: block;
+
+    background-color: #833ca4;
+
+    &:not(:first-child) {
+      box-shadow: inset 4px -3px 4px rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+
+.icon {
+  width: 8px;
+  height: 8px;
+  font-size: 8px;
+}
+
+.HeadRow {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 11px;
+  line-height: 14px;
+  font-weight: 500;
+  position: relative;
+  top: 1px;
+
+  .classTitle {
+    font-size: 11px;
+    font-weight: bold;
+    text-shadow: 0 0 2px rgb(0 0 0 / 73%);
+  }
+
+  .TagTitle {
+    font-size: 11px;
+    font-weight: medium;
+    text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
+
+    color: var(--rf-tag-color, #38BDF8);
+  }
+
+  /* Firefox kostyl */
+  @-moz-document url-prefix() {
+    .classSystemName {
+      font-family: inherit !important;
+      font-weight: bold;
+    }
+  }
+
+  .classSystemName {
+    font-family: inherit !important;
+    font-weight: bold;
+  }
+
+  .solarSystemName {
+  }
+}
+
+.BottomRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 19px;
+
+  .regionName {
+    color: var(--rf-region-name, #D6D3D1)
+  }
+
+  .customName {
+    color: var(--rf-custom-name, #93C5FD)
+  }
+
+  .localCounter {
+    display: flex;
+    //align-items: center;
+    gap: 2px;
+
+    .hasUserCharacters {
+      color: var(--rf-has-user-characters, #fbbf24);
+    }
+
+    & > i {
+      position: relative;
+      top: 1px;
+    }
+
+    & > span {
+      font-size: 9px;
+      line-height: 9px;
+      font-weight: 500;
+      //margin-top: 1px;
+    }
+  }
+}
+
+.effect {
+  width: 8px;
+  height: 8px;
+  margin-top: -2px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  margin-left: 1px;
+}
+
+.statics {
+  display: flex;
+  gap: 2px;
+  font-size: 8px;
+
+  & > * {
+    line-height: 10px;
+  }
+
+  /* Firefox kostyl */
+  @-moz-document url-prefix() {
+    position: relative;
+    top: -1px;
+  }
+}
+
+.Handlers {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.Handle {
+  min-width: initial;
+  min-height: initial;
+  border: 1px solid $pastel-blue;
+  width: 5px;
+  height: 5px;
+
+  &.selected {
+    border-color: $pastel-pink;
+  }
+
+  &.HandleTop {
+    top: -2px;
+  }
+
+  &.HandleRight {
+    right: -2px;
+  }
+
+  &.HandleBottom {
+    bottom: -2px;
+  }
+
+  &.HandleLeft {
+    left: -2px;
+  }
+
+  &.Tick {
+    width: 7px;
+    height: 7px;
+
+    &.HandleTop {
+      top: -3px;
+    }
+
+    &.HandleRight {
+      right: -3px;
+    }
+
+    &.HandleBottom {
+      bottom: -3px;
+    }
+
+    &.HandleLeft {
+      left: -3px;
+    }
+  }
+}
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeTheme.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeTheme.tsx
@@ -0,0 +1,236 @@
+import { memo } from 'react';
+import { Handle, Position } from 'reactflow';
+import clsx from 'clsx';
+
+import classes from './SolarSystemNodeTheme.module.scss'; 
+import { PrimeIcons } from 'primereact/api';
+
+import { useSolarSystemNode } from '../../hooks/useSolarSystemNode';
+
+import {
+  MARKER_BOOKMARK_BG_STYLES,
+  STATUS_CLASSES,
+  EFFECT_BACKGROUND_STYLES,
+} from '@/hooks/Mapper/components/map/constants';
+import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
+import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
+
+
+export const SolarSystemNodeTheme = memo((props) => {
+  const nodeVars = useSolarSystemNode(props);
+
+  return (
+    <>
+      {nodeVars.visible && (
+        <div className={classes.Bookmarks}>
+          {nodeVars.labelCustom !== '' && (
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
+              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">
+                {nodeVars.labelCustom}
+              </span>
+            </div>
+          )}
+
+          {nodeVars.isShattered && (
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
+              <span className={clsx('pi pi-chart-pie', classes.icon)} />
+            </div>
+          )}
+
+          {nodeVars.killsCount && (
+            <div
+              className={clsx(
+                classes.Bookmark,
+                MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!]
+              )}
+            >
+              <div className={clsx(classes.BookmarkWithIcon)}>
+                <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
+                <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
+              </div>
+            </div>
+          )}
+
+          {nodeVars.labelsInfo.map(x => (
+            <div
+              key={x.id}
+              className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}
+            >
+              {x.shortName}
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div
+        className={clsx(
+          classes.RootCustomNode,
+          nodeVars.regionClass && classes[nodeVars.regionClass],
+          classes[STATUS_CLASSES[nodeVars.status]],
+          { [classes.selected]: nodeVars.selected },
+        )}
+      >
+        {nodeVars.visible && (
+          <>
+            <div className={classes.HeadRow}>
+              <div
+                className={clsx(
+                  classes.classTitle,
+                  nodeVars.classTitleColor,
+                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]',
+                )}
+              >
+                {nodeVars.classTitle ?? '-'}
+              </div>
+
+              {nodeVars.tag != null && nodeVars.tag !== '' && (
+                <div className={clsx(classes.TagTitle)}>
+                  {nodeVars.tag}
+                </div>
+              )}
+
+              <div
+                className={clsx(
+                  classes.classSystemName,
+                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] flex-grow overflow-hidden text-ellipsis whitespace-nowrap',
+                )}
+              >
+                {nodeVars.systemName}
+              </div>
+
+              {nodeVars.isWormhole && (
+                <div className={classes.statics}>
+                  {nodeVars.sortedStatics.map(whClass => (
+                    <WormholeClassComp key={whClass} id={whClass} />
+                  ))}
+                </div>
+              )}
+
+              {nodeVars.effectName !== null && nodeVars.isWormhole && (
+                <div className={clsx(classes.effect, EFFECT_BACKGROUND_STYLES[nodeVars.effectName])} />
+              )}
+            </div>
+
+            <div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
+              {nodeVars.customName && (
+                <div
+                  className={clsx(
+                    classes.CustomName,
+                    '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
+                  )}
+                >
+                  {nodeVars.customName}
+                </div>
+              )}
+
+              {!nodeVars.isWormhole && !nodeVars.customName && (
+                <div
+                  className={clsx(
+                    classes.RegionName,
+                    '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
+                  )}
+                >
+                  {nodeVars.regionName}
+                </div>
+              )}
+
+              {nodeVars.isWormhole && !nodeVars.customName && <div />}
+
+              <div className="flex items-center justify-end">
+                <div className="flex gap-1 items-center">
+                  {nodeVars.locked && (
+                    <i
+                      className={PrimeIcons.LOCK}
+                      style={{ fontSize: '0.45rem', fontWeight: 'bold' }}
+                    />
+                  )}
+
+                  {nodeVars.hubs.includes(nodeVars.solarSystemId.toString()) && (
+                    <i
+                      className={PrimeIcons.MAP_MARKER}
+                      style={{ fontSize: '0.45rem', fontWeight: 'bold' }}
+                    />
+                  )}
+
+                  {nodeVars.charactersInSystem.length > 0 && (
+                    <div
+                      className={clsx(classes.localCounter, {
+                        [classes.hasUserCharacters]: nodeVars.hasUserCharacters,
+                      })}
+                    >
+                      <i className="pi pi-users" style={{ fontSize: '0.50rem' }} />
+                      <span className="font-sans">{nodeVars.charactersInSystem.length}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+
+      {nodeVars.visible && (
+        <>
+          {nodeVars.unsplashedLeft.length > 0 && (
+            <div className={classes.Unsplashed}>
+              {nodeVars.unsplashedLeft.map(sig => (
+                <UnsplashedSignature key={sig.sig_id} signature={sig} />
+              ))}
+            </div>
+          )}
+
+          {nodeVars.unsplashedRight.length > 0 && (
+            <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
+              {nodeVars.unsplashedRight.map(sig => (
+                <UnsplashedSignature key={sig.sig_id} signature={sig} />
+              ))}
+            </div>
+          )}
+        </>
+      )}
+
+      <div onMouseDownCapture={nodeVars.dbClick} className={classes.Handlers}>
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleTop, {
+            [classes.selected]: nodeVars.selected,
+            [classes.Tick]: nodeVars.isThickConnections,
+          })}
+          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Top}
+          id="a"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleRight, {
+            [classes.selected]: nodeVars.selected,
+            [classes.Tick]: nodeVars.isThickConnections,
+          })}
+          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Right}
+          id="b"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleBottom, {
+            [classes.selected]: nodeVars.selected,
+            [classes.Tick]: nodeVars.isThickConnections,
+          })}
+          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Bottom}
+          id="c"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleLeft, {
+            [classes.selected]: nodeVars.selected,
+            [classes.Tick]: nodeVars.isThickConnections,
+          })}
+          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Left}
+          id="d"
+        />
+      </div>
+    </>
+  );
+});
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/index.ts
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/index.ts
@@ -1 +1,2 @@
-export * from './SolarSystemNode';
+export * from './SolarSystemNodeDefault';
+export * from './SolarSystemNodeTheme';
--- a/assets/js/hooks/Mapper/components/map/components/UnsplashedSignature/UnsplashedSignature.module.scss
+++ b/assets/js/hooks/Mapper/components/map/components/UnsplashedSignature/UnsplashedSignature.module.scss
@@ -9,7 +9,7 @@
    width: 13px;
    height: 4px;
    border-radius: 4px;
-    color: #ffffff;
+    color: var(--text-color);
    font-size: 8px;
    text-align: center;
    font-weight: bolder;
--- a/assets/js/hooks/Mapper/components/map/hooks/useBackgroundVars.ts
+++ b/assets/js/hooks/Mapper/components/map/hooks/useBackgroundVars.ts
@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { BackgroundVariant } from 'reactflow';
+
+
+export function useBackgroundVars(themeName?: string) {
+  const [variant, setVariant] = useState<BackgroundVariant>(BackgroundVariant.Dots);
+  const [gap, setGap] = useState<number>(16);
+  const [size, setSize] = useState<number>(1);
+  const [color, setColor] = useState('#81818b')
+
+  useEffect(() => { 
+    let themeEl = document.querySelector('.pathfinder-theme, .default-theme');
+    if (!themeEl) {
+      themeEl = document.documentElement;
+    }
+
+    const style = getComputedStyle(themeEl as HTMLElement);
+
+    const rawVariant = style.getPropertyValue('--rf-bg-variant').replace(/['"]/g, '').trim().toLowerCase();
+    let finalVariant: BackgroundVariant = BackgroundVariant.Dots;
+    if (rawVariant === 'lines') {
+      finalVariant = BackgroundVariant.Lines;
+    } else if (rawVariant === 'cross') {
+      finalVariant = BackgroundVariant.Cross;
+    }
+
+    const cssVarGap = style.getPropertyValue('--rf-bg-gap');
+    const cssVarSize = style.getPropertyValue('--rf-bg-size');
+    const cssColor = style.getPropertyValue('--rf-bg-pattern-color');
+
+    const gapNum = parseInt(cssVarGap, 10) || 16;
+    const sizeNum = parseInt(cssVarSize, 10) || 1;
+
+    setVariant(finalVariant);
+    setGap(gapNum);
+    setSize(sizeNum);
+    setColor(cssColor);
+
+  }, [themeName]); 
+
+  return { variant, gap, size, color };
+}
--- a/assets/js/hooks/Mapper/components/map/hooks/useSolarSystemNode.ts
+++ b/assets/js/hooks/Mapper/components/map/hooks/useSolarSystemNode.ts
@@ -0,0 +1,165 @@
+import { useMemo } from 'react';
+
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
+import { useMapState } from '@/hooks/Mapper/components/map/MapProvider';
+import { useDoubleClick } from '@/hooks/Mapper/hooks/useDoubleClick';
+import { REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
+import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
+import { getSystemClassStyles, prepareUnsplashedChunks } from '@/hooks/Mapper/components/map/helpers';
+import { sortWHClasses } from '@/hooks/Mapper/helpers';
+import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager';
+import { OutCommand } from '@/hooks/Mapper/types';
+import { LABELS_INFO, LABELS_ORDER } from '@/hooks/Mapper/components/map/constants';
+
+function getActivityType(count: number) {
+  if (count <= 5) return 'activityNormal';
+  if (count <= 30) return 'activityWarn';
+  return 'activityDanger';
+}
+
+const SpaceToClass: Record<string, string> = {
+  [Spaces.Caldari]: 'Caldaria',
+  [Spaces.Matar]: 'Mataria',
+  [Spaces.Amarr]: 'Amarria',
+  [Spaces.Gallente]: 'Gallente',
+};
+
+function sortedLabels(labels: string[]) {
+  if (!labels) return [];
+  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x]);
+}
+
+export function useSolarSystemNode(props: any) {
+  const { data, selected, id } = props;
+  const { system_static_info, system_signatures, locked, name, tag, status, labels, temporary_name } = data;
+
+  const {
+    system_class,
+    security,
+    class_title,
+    solar_system_id,
+    statics,
+    effect_name,
+    region_name,
+    region_id,
+    is_shattered,
+    solar_system_name,
+  } = system_static_info;
+
+  // Global map state
+  const { interfaceSettings } = useMapRootState();
+  const { isShowUnsplashedSignatures } = interfaceSettings;
+  const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
+
+  const {
+    data: {
+      characters,
+      presentCharacters,
+      wormholesData,
+      hubs,
+      kills,
+      userCharacters,
+      isConnecting,
+      hoverNodeId,
+      visibleNodes,
+      showKSpaceBG,
+      isThickConnections,
+    },
+    outCommand,
+  } = useMapState();
+
+  // logic
+  const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
+
+  const charactersInSystem = useMemo(() => {
+    return characters.filter(c => c.location?.solar_system_id === solar_system_id).filter(c => c.online);
+    // eslint-disable-next-line
+  }, [characters, presentCharacters, solar_system_id]);
+
+  const isWormhole = isWormholeSpace(system_class);
+
+  const classTitleColor = useMemo(
+    () => getSystemClassStyles({ systemClass: system_class, security }),
+    [security, system_class],
+  );
+
+  const sortedStatics = useMemo(() => sortWHClasses(wormholesData, statics), [wormholesData, statics]);
+  
+  const labelsManager = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
+  const labelsInfo = useMemo(() => sortedLabels(labelsManager.list), [labelsManager]);
+  const labelCustom = useMemo(() => labelsManager.customLabel, [labelsManager]);
+
+  const killsCount = useMemo(() => kills[solar_system_id] ?? null, [kills, solar_system_id]);
+  const killsActivityType = killsCount ? getActivityType(killsCount) : null;
+
+  const hasUserCharacters = useMemo(() => {
+    return charactersInSystem.some(x => userCharacters.includes(x.eve_id));
+  }, [charactersInSystem, userCharacters]);
+
+  const dbClick = useDoubleClick(() => {
+    outCommand({
+      type: OutCommand.openSettings,
+      data: { system_id: solar_system_id.toString() },
+    });
+  });
+
+  const showHandlers = isConnecting || hoverNodeId === id;
+
+  const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
+  const regionClass = showKSpaceBG ? SpaceToClass[space] : null;
+
+  const systemName = (isTempSystemNameEnabled && temporary_name) || solar_system_name;
+  const customName =
+    (isTempSystemNameEnabled && temporary_name && name) || (solar_system_name !== name && name);
+
+  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
+    if (!isShowUnsplashedSignatures) {
+      return [[], []];
+    }
+    return prepareUnsplashedChunks(
+      system_signatures
+        .filter(s => s.group === 'Wormhole' && !s.linked_system)
+        .map(s => ({
+          eve_id: s.eve_id,
+          type: s.type,
+          custom_info: s.custom_info,
+        })),
+    );
+  }, [isShowUnsplashedSignatures, system_signatures]);
+
+  const nodeVars = {
+    // original props
+    selected,
+    // computed
+    visible,
+    isWormhole,
+    classTitleColor,
+    killsCount,
+    killsActivityType,
+    hasUserCharacters,
+    showHandlers,
+    regionClass,
+    systemName,
+    customName,
+    labelCustom,
+    isShattered: is_shattered,
+    tag,
+    status,
+    labelsInfo,
+    dbClick,
+    sortedStatics,
+    effectName: effect_name,
+    regionName: region_name,
+    solarSystemId: solar_system_id,
+    locked,
+    hubs,
+    charactersInSystem,
+    unsplashedLeft,
+    unsplashedRight,
+    isThickConnections,
+    classTitle: class_title,
+  };
+
+  return nodeVars;
+}
--- a/assets/js/hooks/Mapper/components/map/styles/default-theme.scss
+++ b/assets/js/hooks/Mapper/components/map/styles/default-theme.scss
@@ -0,0 +1,31 @@
+@import './eve-common-variables';
+@import './eve-common';
+
+.default-theme {
+  --rf-bg-color: #000000;
+  --rf-soft-bg-color: #171717;
+
+  --rf-node-bg-color: #202020;
+  --rf-node-soft-bg-color: #2b2b2b;
+  --rf-text-color: #ffffff;
+  --rf-tag-color:  #38BDF8;
+  --rf-region-name: #D6D3D1;
+  --rf-custom-name: #93C5FD;
+
+
+  --rf-bg-variant: "dots";
+  --rf-bg-gap: 16;
+  --rf-bg-size: 1;
+  --rf-bg-pattern-color: #81818a;
+
+  --pastel-blue: #5a7d9a;
+  --pastel-pink: #d291bc;
+  --pastel-green: #88b04b;
+  --pastel-yellow: #ffdd59;
+
+  --dark-bg: #2d2d2d;
+  --text-color: #ffffff;
+  --tooltip-bg: #202020;
+
+  
+}
--- a/assets/js/hooks/Mapper/components/map/styles/eve-common-variables.scss
+++ b/assets/js/hooks/Mapper/components/map/styles/eve-common-variables.scss
@@ -1,78 +1,114 @@
-$eve-link-color-default: #333;
-$eve-link-color-top-mass-0: #333;
-$eve-link-color-top-mass-1: #5a4520;
-$eve-link-color-top-mass-2: #672c2c;
-$eve-link-color-middle-mass-0: #333;
-$eve-link-color-middle-mass-1: #333;
-$eve-link-color-middle-mass-2: #333;
-$eve-link-color-middle-time-0: #5c5c5c;
-$eve-link-color-middle-time-1: #ff00cd;
-$eve-link-color-middle-time-1-border: #99f3ff;
+:root {
+    --pastel-blue: #5a7d9a;
+    --pastel-pink: #d291bc;
+    --pastel-green: #88b04b;
+    --pastel-yellow: #ffdd59;
+    --dark-bg: #2d2d2d;
+    --text-color: #ffffff;
+    --tooltip-bg: #202020;

-$eve-link-color-top-mass-1-time-1: #796300;
-$eve-link-color-top-mass-2-time-1: #8c1717;
-$eve-link-color-temp: orange;
+    --pastel-blue-darken10: #4f6b86;
+    --pastel-blue-lighten10: #6da3af;
+    --pastel-pink-darken10: #bb7ca9;
+    --pastel-pink-lighten10: #e0a6cb;

-$eve-effect-pulsar: #40aef5;
-$eve-effect-magnetar: #f058f8;
-$eve-effect-wolfRayet: #ef7843;
-$eve-effect-blackHole: #1b1b1b;
-$eve-effect-cataclysmicVariable: #ffea90;
-$eve-effect-redGiant: #fd3c3c;
-$eve-effect-dazhLiminalityLocus: #ff6464;
-$eve-effect-imperialStellarObservatory: #6991ce;
-$eve-effect-stateStellarObservatory: #6991ce;
-$eve-effect-republicStellarObservatory: #6991ce;
-$eve-effect-federalStellarObservatory: #6991ce;
+    --pastel-green-darken10: #79a244;
+    --pastel-green-lighten10: #99cf52;

-$eve-wh-type-color-high: #5dffd2;
-$eve-wh-type-color-low: #f79400;
-$eve-wh-type-color-null: #fc3c3c;
-$eve-wh-type-color-c1: #69bfce;
-$eve-wh-type-color-c2: #6991ce;
-$eve-wh-type-color-c3: #a8cb70;
-$eve-wh-type-color-c4: #e39c68;
-$eve-wh-type-color-c5: #de8686;
-$eve-wh-type-color-c6: #e76363;
-$eve-wh-type-color-c13: #988cb5;
-$eve-wh-type-color-drifter: #ff44f6;
-$eve-wh-type-color-thera: #ffffff;
-$eve-wh-type-color-zarzakh: #212121;
+    --pastel-yellow-darken10: #e6c44f;
+    --pastel-yellow-lighten10: #ffe874;

-$eve-security-color-10: #2c74df;
-$eve-security-color-09: #3998e8;
-$eve-security-color-08: #4dcbf5;
-$eve-security-color-07: #60d8a2;
-$eve-security-color-06: #71e454;
-$eve-security-color-05: #f2fc81;
-$eve-security-color-04: #d96c07;
-$eve-security-color-03: #cb440f;
-$eve-security-color-02: #b91117;
-$eve-security-color-01: #732020;
-$eve-security-color-00: #8b3263;
-$eve-security-color-m-01: #8b3263;
-$eve-security-color-m-02: #8b3263;
-$eve-security-color-m-03: #8b3263;
-$eve-security-color-m-04: #8b3263;
-$eve-security-color-m-05: #8b3263;
-$eve-security-color-m-06: #8b3263;
-$eve-security-color-m-07: #8b3263;
-$eve-security-color-m-08: #8b3263;
-$eve-security-color-m-09: #8b3263;
-$eve-security-color-m-10: #8b3263;
+    /* Eve Link Colors */
+    --eve-link-color-default: #333;
+    --eve-link-color-top-mass-0: #333;
+    --eve-link-color-top-mass-1: #5a4520;
+    --eve-link-color-top-mass-2: #672c2c;
+    --eve-link-color-middle-mass-0: #333;
+    --eve-link-color-middle-mass-1: #333;
+    --eve-link-color-middle-mass-2: #333;
+    --eve-link-color-middle-time-0: #5c5c5c;
+    --eve-link-color-middle-time-1: #ff00cd;
+    --eve-link-color-middle-time-1-border: #99f3ff;
+    --eve-link-color-top-mass-1-time-1: #796300;
+    --eve-link-color-top-mass-2-time-1: #8c1717;
+    --eve-link-color-temp: orange;

-$eve-solar-system-status-unknown: transparent;
-$eve-solar-system-status-friendly: #3bbd3952;
-$eve-solar-system-status-warning: #906518a6;
-$eve-solar-system-status-target: #b439ff6b;
-$eve-solar-system-status-dangerous: #d54040;
-$eve-solar-system-status-lookingFor: rgba(67, 176, 253, 0.48);
-$eve-solar-system-status-home: rgb(197, 253, 67);
+    /* Wormhole Effects */
+    --eve-effect-pulsar: #40aef5;
+    --eve-effect-magnetar: #f058f8;
+    --eve-effect-wolfRayet: #ef7843;
+    --eve-effect-blackHole: #1b1b1b;
+    --eve-effect-cataclysmicVariable: #ffea90;
+    --eve-effect-redGiant: #fd3c3c;
+    --eve-effect-dazhLiminalityLocus: #ff6464;
+    --eve-effect-imperialStellarObservatory: #6991ce;
+    --eve-effect-stateStellarObservatory: #6991ce;
+    --eve-effect-republicStellarObservatory: #6991ce;
+    --eve-effect-federalStellarObservatory: #6991ce;

-$eve-solar-system-status-color-unknown: transparent;
-$eve-solar-system-status-color-friendly: #3bbd39;
-$eve-solar-system-status-color-warning: #ffb93b;
-$eve-solar-system-status-color-target: #b439ff;
-$eve-solar-system-status-color-dangerous: #d54040;
-$eve-solar-system-status-color-lookingFor: #43c2fd;
-$eve-solar-system-status-color-home: rgb(197, 253, 67);
+    /* WH Types */
+    --eve-wh-type-color-high: #5dffd2;
+    --eve-wh-type-color-low: #f79400;
+    --eve-wh-type-color-null: #fc3c3c;
+    --eve-wh-type-color-c1: #69bfce;
+    --eve-wh-type-color-c2: #6991ce;
+    --eve-wh-type-color-c3: #a8cb70;
+    --eve-wh-type-color-c4: #e39c68;
+    --eve-wh-type-color-c5: #de8686;
+    --eve-wh-type-color-c6: #e76363;
+    --eve-wh-type-color-c13: #988cb5;
+    --eve-wh-type-color-drifter: #ff44f6;
+    --eve-wh-type-color-thera: #ffffff;
+    --eve-wh-type-color-zarzakh: #212121;
+
+    /* Security Colors */
+    --eve-security-color-10: #2c74df;
+    --eve-security-color-09: #3998e8;
+    --eve-security-color-08: #4dcbf5;
+    --eve-security-color-07: #60d8a2;
+    --eve-security-color-06: #71e454;
+    --eve-security-color-05: #f2fc81;
+    --eve-security-color-04: #d96c07;
+    --eve-security-color-03: #cb440f;
+    --eve-security-color-02: #b91117;
+    --eve-security-color-01: #732020;
+    --eve-security-color-00: #8b3263;
+    --eve-security-color-m-01: #8b3263;
+    --eve-security-color-m-02: #8b3263;
+    --eve-security-color-m-03: #8b3263;
+    --eve-security-color-m-04: #8b3263;
+    --eve-security-color-m-05: #8b3263;
+    --eve-security-color-m-06: #8b3263;
+    --eve-security-color-m-07: #8b3263;
+    --eve-security-color-m-08: #8b3263;
+    --eve-security-color-m-09: #8b3263;
+    --eve-security-color-m-10: #8b3263;
+
+    /* Solar System Status */
+    --eve-solar-system-status-unknown: transparent;
+    --eve-solar-system-status-friendly: #3bbd3952;
+    --eve-solar-system-status-warning: #906518a6;
+    --eve-solar-system-status-target: #b439ff6b;
+    --eve-solar-system-status-dangerous: #d54040;
+    --eve-solar-system-status-lookingFor: rgba(67, 176, 253, 0.48);
+    --eve-solar-system-status-home: rgb(197, 253, 67);
+
+    --eve-solar-system-status-color-unknown: transparent;
+    --eve-solar-system-status-color-friendly: #3bbd39;
+    --eve-solar-system-status-color-warning: #ffb93b;
+    --eve-solar-system-status-color-target: #b439ff;
+    --eve-solar-system-status-color-dangerous: #d54040;
+    --eve-solar-system-status-color-lookingFor: #43c2fd;
+    --eve-solar-system-status-color-home: rgb(197, 253, 67);
+
+    --eve-solar-system-status-color-friendly-dark20: #2d9b2e;
+    --eve-solar-system-status-friendly-dark30: #28892a;
+    --eve-solar-system-status-color-friendly-dark5: #38b538;
+    --eve-solar-system-status-color-lookingFor-dark15: #32aadf;
+
+    /* Context Menu */
+    --conn-time-eol: #7452c3e3;
+    --conn-frigate: #325d88;
+    --conn-save: rgba(155, 102, 45, 0.85);
+    --selected-item-bg: rgba(98, 98, 98, 0.33);
+  }
--- a/assets/js/hooks/Mapper/components/map/styles/eve-common.scss
+++ b/assets/js/hooks/Mapper/components/map/styles/eve-common.scss
@@ -1,535 +1,448 @@
-@import "eve-common-variables";
+@import './eve-common-variables';
+

 .eve-wh-effect-color-pulsar {
-  fill: $eve-effect-pulsar;
-  background-color: $eve-effect-pulsar;
+  fill: var(--eve-effect-pulsar);
+  background-color: var(--eve-effect-pulsar);
 }

 .eve-wh-effect-color-magnetar {
-  fill: $eve-effect-magnetar;
-  background-color: $eve-effect-magnetar;
+  fill: var(--eve-effect-magnetar);
+  background-color: var(--eve-effect-magnetar);
 }

 .eve-wh-effect-color-wolfRayet {
-  fill: $eve-effect-wolfRayet;
-  background-color: $eve-effect-wolfRayet;
+  fill: var(--eve-effect-wolfRayet);
+  background-color: var(--eve-effect-wolfRayet);
 }

 .eve-wh-effect-color-blackHole {
-  fill: $eve-effect-blackHole;
-  background-color: $eve-effect-blackHole;
-  box-shadow: 0 0 8px rgba(255 255 255 / 33);
+  fill: var(--eve-effect-blackHole);
+  background-color: var(--eve-effect-blackHole);
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.33);
 }

 .eve-wh-effect-color-cataclysmicVariable {
-  fill: $eve-effect-cataclysmicVariable;
-  background-color: $eve-effect-cataclysmicVariable;
+  fill: var(--eve-effect-cataclysmicVariable);
+  background-color: var(--eve-effect-cataclysmicVariable);
 }

 .eve-wh-effect-color-redGiant {
-  fill: $eve-effect-redGiant;
-  background-color: $eve-effect-redGiant;
+  fill: var(--eve-effect-redGiant);
+  background-color: var(--eve-effect-redGiant);
 }

 .text-eve-wh-effect-color-pulsar {
-  color: $eve-effect-pulsar;
+  color: var(--eve-effect-pulsar);
 }
-
 .text-eve-wh-effect-color-magnetar {
-  color: $eve-effect-magnetar;
+  color: var(--eve-effect-magnetar);
 }
-
 .text-eve-wh-effect-color-wolfRayet {
-  color: $eve-effect-wolfRayet;
+  color: var(--eve-effect-wolfRayet);
 }
-
 .text-eve-wh-effect-color-blackHole {
  color: #fff;
 }
-
 .text-eve-wh-effect-color-cataclysmicVariable {
-  color: $eve-effect-cataclysmicVariable;
+  color: var(--eve-effect-cataclysmicVariable);
 }
-
 .text-eve-wh-effect-color-redGiant {
-  color: $eve-effect-redGiant;
+  color: var(--eve-effect-redGiant);
 }
-
 .text-eve-wh-effect-color-dazhLiminalityLocus {
-  color: $eve-effect-dazhLiminalityLocus;
+  color: var(--eve-effect-dazhLiminalityLocus);
 }
-
 .text-eve-wh-effect-color-imperialStellarObservatory {
-  color: $eve-effect-imperialStellarObservatory;
+  color: var(--eve-effect-imperialStellarObservatory);
 }
-
 .text-eve-wh-effect-color-stateStellarObservatory {
-  color: $eve-effect-stateStellarObservatory;
+  color: var(--eve-effect-stateStellarObservatory);
 }
-
 .text-eve-wh-effect-color-republicStellarObservatory {
-  color: $eve-effect-republicStellarObservatory;
+  color: var(--eve-effect-republicStellarObservatory);
 }
-
 .text-eve-wh-effect-color-federalStellarObservatory {
-  color: $eve-effect-federalStellarObservatory;
+  color: var(--eve-effect-federalStellarObservatory);
 }

+/* Security color classes */
 .eve-security-color-10 {
-  color: $eve-security-color-10 !important;
-  fill: $eve-security-color-10;
+  color: var(--eve-security-color-10) !important;
+  fill: var(--eve-security-color-10);
 }
-
 .eve-security-color-09 {
-  color: $eve-security-color-09 !important;
-  fill: $eve-security-color-09;
+  color: var(--eve-security-color-09) !important;
+  fill: var(--eve-security-color-09);
 }
-
 .eve-security-color-08 {
-  color: $eve-security-color-08 !important;
-  fill: $eve-security-color-08;
+  color: var(--eve-security-color-08) !important;
+  fill: var(--eve-security-color-08);
 }
-
 .eve-security-color-07 {
-  color: $eve-security-color-07 !important;
-  fill: $eve-security-color-07;
+  color: var(--eve-security-color-07) !important;
+  fill: var(--eve-security-color-07);
 }
-
 .eve-security-color-06 {
-  color: $eve-security-color-06 !important;
-  fill: $eve-security-color-06;
+  color: var(--eve-security-color-06) !important;
+  fill: var(--eve-security-color-06);
 }
-
 .eve-security-color-05 {
-  color: $eve-security-color-05 !important;
-  fill: $eve-security-color-05;
+  color: var(--eve-security-color-05) !important;
+  fill: var(--eve-security-color-05);
 }
-
 .eve-security-color-04 {
-  color: $eve-security-color-04 !important;
-  fill: $eve-security-color-04;
+  color: var(--eve-security-color-04) !important;
+  fill: var(--eve-security-color-04);
 }
-
 .eve-security-color-03 {
-  color: $eve-security-color-03 !important;
-  fill: $eve-security-color-03;
+  color: var(--eve-security-color-03) !important;
+  fill: var(--eve-security-color-03);
 }
-
 .eve-security-color-02 {
-  color: $eve-security-color-02 !important;
-  fill: $eve-security-color-02;
+  color: var(--eve-security-color-02) !important;
+  fill: var(--eve-security-color-02);
 }
-
 .eve-security-color-01 {
-  color: $eve-security-color-01 !important;
-  fill: $eve-security-color-01;
+  color: var(--eve-security-color-01) !important;
+  fill: var(--eve-security-color-01);
 }
-
 .eve-security-color-00 {
-  color: $eve-security-color-00 !important;
-  fill: $eve-security-color-00;
+  color: var(--eve-security-color-00) !important;
+  fill: var(--eve-security-color-00);
 }
-
 .eve-security-color-m-01 {
-  color: $eve-security-color-m-01 !important;
-  fill: $eve-security-color-m-01;
+  color: var(--eve-security-color-m-01) !important;
+  fill: var(--eve-security-color-m-01);
 }
-
 .eve-security-color-m-02 {
-  color: $eve-security-color-m-02 !important;
-  fill: $eve-security-color-m-02;
+  color: var(--eve-security-color-m-02) !important;
+  fill: var(--eve-security-color-m-02);
 }
-
 .eve-security-color-m-03 {
-  color: $eve-security-color-m-03 !important;
-  fill: $eve-security-color-m-03;
+  color: var(--eve-security-color-m-03) !important;
+  fill: var(--eve-security-color-m-03);
 }
-
 .eve-security-color-m-04 {
-  color: $eve-security-color-m-04 !important;
-  fill: $eve-security-color-m-04;
+  color: var(--eve-security-color-m-04) !important;
+  fill: var(--eve-security-color-m-04);
 }
-
 .eve-security-color-m-05 {
-  color: $eve-security-color-m-05 !important;
-  fill: $eve-security-color-m-05;
+  color: var(--eve-security-color-m-05) !important;
+  fill: var(--eve-security-color-m-05);
 }
-
 .eve-security-color-m-06 {
-  color: $eve-security-color-m-06 !important;
-  fill: $eve-security-color-m-06;
+  color: var(--eve-security-color-m-06) !important;
+  fill: var(--eve-security-color-m-06);
 }
-
 .eve-security-color-m-07 {
-  color: $eve-security-color-m-07 !important;
-  fill: $eve-security-color-m-07;
+  color: var(--eve-security-color-m-07) !important;
+  fill: var(--eve-security-color-m-07);
 }
-
 .eve-security-color-m-08 {
-  color: $eve-security-color-m-08 !important;
-  fill: $eve-security-color-m-08;
+  color: var(--eve-security-color-m-08) !important;
+  fill: var(--eve-security-color-m-08);
 }
-
 .eve-security-color-m-09 {
-  color: $eve-security-color-m-09 !important;
-  fill: $eve-security-color-m-09;
+  color: var(--eve-security-color-m-09) !important;
+  fill: var(--eve-security-color-m-09);
 }
-
 .eve-security-color-m-10 {
-  color: $eve-security-color-m-10 !important;
-  fill: $eve-security-color-m-10;
+  color: var(--eve-security-color-m-10) !important;
+  fill: var(--eve-security-color-m-10);
 }

+/* Security backgrounds */
 .eve-security-background-10 {
-  background-color: $eve-security-color-10;
-  fill: $eve-security-color-10;
+  background-color: var(--eve-security-color-10);
+  fill: var(--eve-security-color-10);
 }
-
 .eve-security-background-09 {
-  background-color: $eve-security-color-09;
-  fill: $eve-security-color-09;
+  background-color: var(--eve-security-color-09);
+  fill: var(--eve-security-color-09);
 }
-
 .eve-security-background-08 {
-  background-color: $eve-security-color-08;
-  fill: $eve-security-color-08;
+  background-color: var(--eve-security-color-08);
+  fill: var(--eve-security-color-08);
 }
-
 .eve-security-background-07 {
-  background-color: $eve-security-color-07;
-  fill: $eve-security-color-07;
+  background-color: var(--eve-security-color-07);
+  fill: var(--eve-security-color-07);
 }
-
 .eve-security-background-06 {
-  background-color: $eve-security-color-06;
-  fill: $eve-security-color-06;
+  background-color: var(--eve-security-color-06);
+  fill: var(--eve-security-color-06);
 }
-
 .eve-security-background-05 {
-  background-color: $eve-security-color-05;
-  fill: $eve-security-color-05;
+  background-color: var(--eve-security-color-05);
+  fill: var(--eve-security-color-05);
 }
-
 .eve-security-background-04 {
-  background-color: $eve-security-color-04;
-  fill: $eve-security-color-04;
+  background-color: var(--eve-security-color-04);
+  fill: var(--eve-security-color-04);
 }
-
 .eve-security-background-03 {
-  background-color: $eve-security-color-03;
-  fill: $eve-security-color-03;
+  background-color: var(--eve-security-color-03);
+  fill: var(--eve-security-color-03);
 }
-
 .eve-security-background-02 {
-  background-color: $eve-security-color-02;
-  fill: $eve-security-color-02;
+  background-color: var(--eve-security-color-02);
+  fill: var(--eve-security-color-02);
 }
-
 .eve-security-background-01 {
-  background-color: $eve-security-color-01;
-  fill: $eve-security-color-01;
+  background-color: var(--eve-security-color-01);
+  fill: var(--eve-security-color-01);
 }
-
 .eve-security-background-00 {
-  background-color: $eve-security-color-00;
-  fill: $eve-security-color-00;
+  background-color: var(--eve-security-color-00);
+  fill: var(--eve-security-color-00);
 }
-
 .eve-security-background-m-01 {
-  background-color: $eve-security-color-m-01;
-  fill: $eve-security-color-m-01;
+  background-color: var(--eve-security-color-m-01);
+  fill: var(--eve-security-color-m-01);
 }
-
 .eve-security-background-m-02 {
-  background-color: $eve-security-color-m-02;
-  fill: $eve-security-color-m-02;
+  background-color: var(--eve-security-color-m-02);
+  fill: var(--eve-security-color-m-02);
 }
-
 .eve-security-background-m-03 {
-  background-color: $eve-security-color-m-03;
-  fill: $eve-security-color-m-03;
+  background-color: var(--eve-security-color-m-03);
+  fill: var(--eve-security-color-m-03);
 }
-
 .eve-security-background-m-04 {
-  background-color: $eve-security-color-m-04;
-  fill: $eve-security-color-m-04;
+  background-color: var(--eve-security-color-m-04);
+  fill: var(--eve-security-color-m-04);
 }
-
 .eve-security-background-m-05 {
-  background-color: $eve-security-color-m-05;
-  fill: $eve-security-color-m-05;
+  background-color: var(--eve-security-color-m-05);
+  fill: var(--eve-security-color-m-05);
 }
-
 .eve-security-background-m-06 {
-  background-color: $eve-security-color-m-06;
-  fill: $eve-security-color-m-06;
+  background-color: var(--eve-security-color-m-06);
+  fill: var(--eve-security-color-m-06);
 }
-
 .eve-security-background-m-07 {
-  background-color: $eve-security-color-m-07;
-  fill: $eve-security-color-m-07;
+  background-color: var(--eve-security-color-m-07);
+  fill: var(--eve-security-color-m-07);
 }
-
 .eve-security-background-m-08 {
-  background-color: $eve-security-color-m-08;
-  fill: $eve-security-color-m-08;
+  background-color: var(--eve-security-color-m-08);
+  fill: var(--eve-security-color-m-08);
 }
-
 .eve-security-background-m-09 {
-  background-color: $eve-security-color-m-09;
-  fill: $eve-security-color-m-09;
+  background-color: var(--eve-security-color-m-09);
+  fill: var(--eve-security-color-m-09);
 }
-
 .eve-security-background-m-10 {
-  background-color: $eve-security-color-m-10;
-  fill: $eve-security-color-m-10;
+  background-color: var(--eve-security-color-m-10);
+  fill: var(--eve-security-color-m-10);
 }

+/* WH Type color classes */
 .eve-wh-type-color-high {
-  color: $eve-wh-type-color-high;
-  fill: $eve-wh-type-color-high;
+  color: var(--eve-wh-type-color-high) !important;
+  fill: var(--eve-wh-type-color-high);
  font-weight: bold !important;
 }
-
 .eve-wh-type-color-low {
-  color: $eve-wh-type-color-low;
-  fill: $eve-wh-type-color-low;
+  color: var(--eve-wh-type-color-low) !important;
+  fill: var(--eve-wh-type-color-low);
  font-weight: bold !important;
 }
-
 .eve-wh-type-color-null {
-  color: $eve-wh-type-color-null;
-  fill: $eve-wh-type-color-null;
+  color: var(--eve-wh-type-color-null) !important;
+  fill: var(--eve-wh-type-color-null);
  font-weight: bold !important;
 }
-
 .eve-wh-type-color-c1 {
-  color: $eve-wh-type-color-c1 !important;
-  fill: $eve-wh-type-color-c1;
+  color: var(--eve-wh-type-color-c1) !important;
+  fill: var(--eve-wh-type-color-c1);
  font-weight: bold !important;
 }
-
 .eve-wh-type-color-c2 {
-  color: $eve-wh-type-color-c2 !important;
-  fill: $eve-wh-type-color-c2;
+  color: var(--eve-wh-type-color-c2) !important;
+  fill: var(--eve-wh-type-color-c2);
  font-weight: bold !important;
 }
-
 .eve-wh-type-color-c3 {
-  color: $eve-wh-type-color-c3 !important;
-  fill: $eve-wh-type-color-c3;
+  color: var(--eve-wh-type-color-c3) !important;
+  fill: var(--eve-wh-type-color-c3);
  font-weight: bold !important;
 }
-
 .eve-wh-type-color-c4 {
-  color: $eve-wh-type-color-c4 !important;
-  fill: $eve-wh-type-color-c4;
+  color: var(--eve-wh-type-color-c4) !important;
+  fill: var(--eve-wh-type-color-c4);
  font-weight: bold !important;
 }
-
 .eve-wh-type-color-c5 {
-  color: $eve-wh-type-color-c5 !important;
-  fill: $eve-wh-type-color-c5;
+  color: var(--eve-wh-type-color-c5) !important;
+  fill: var(--eve-wh-type-color-c5);
  font-weight: bold !important;
 }
-
 .eve-wh-type-color-c6 {
-  color: $eve-wh-type-color-c6 !important;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6) !important;
+  fill: var(--eve-wh-type-color-c6);
  font-weight: bold !important;
 }
-
 .eve-wh-type-color-c13 {
-  color: $eve-wh-type-color-c13 !important;
-  fill: $eve-wh-type-color-c13;
+  color: var(--eve-wh-type-color-c13) !important;
+  fill: var(--eve-wh-type-color-c13);
 }
-
 .eve-wh-type-color-drifter {
-  color: $eve-wh-type-color-drifter !important;
-  fill: $eve-wh-type-color-drifter;
+  color: var(--eve-wh-type-color-drifter) !important;
+  fill: var(--eve-wh-type-color-drifter);
 }
-
 .eve-wh-type-color-thera {
-  color: $eve-wh-type-color-thera !important;
-  fill: $eve-wh-type-color-thera;
+  color: var(--eve-wh-type-color-thera) !important;
+  fill: var(--eve-wh-type-color-thera);
 }

+/* WH Type backgrounds */
 .eve-wh-type-background-high {
-  background-color: $eve-wh-type-color-high;
+  background-color: var(--eve-wh-type-color-high);
 }
-
 .eve-wh-type-background-low {
-  background-color: $eve-wh-type-color-low;
+  background-color: var(--eve-wh-type-color-low);
 }
-
 .eve-wh-type-background-null {
-  background-color: $eve-wh-type-color-null;
+  background-color: var(--eve-wh-type-color-null);
 }
-
 .eve-wh-type-background-c1 {
-  background-color: $eve-wh-type-color-c1;
+  background-color: var(--eve-wh-type-color-c1);
 }
-
 .eve-wh-type-background-c2 {
-  background-color: $eve-wh-type-color-c2;
+  background-color: var(--eve-wh-type-color-c2);
 }
-
 .eve-wh-type-background-c3 {
-  background-color: $eve-wh-type-color-c3;
+  background-color: var(--eve-wh-type-color-c3);
 }
-
 .eve-wh-type-background-c4 {
-  background-color: $eve-wh-type-color-c4;
+  background-color: var(--eve-wh-type-color-c4);
 }
-
 .eve-wh-type-background-c5 {
-  background-color: $eve-wh-type-color-c5;
+  background-color: var(--eve-wh-type-color-c5);
 }
-
 .eve-wh-type-background-c6 {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-wh-type-background-c13 {
-  background-color: $eve-wh-type-color-c13;
+  background-color: var(--eve-wh-type-color-c13);
 }
-
 .eve-wh-type-background-drifter {
-  background-color: $eve-wh-type-color-drifter;
+  background-color: var(--eve-wh-type-color-drifter);
 }
-
 .eve-wh-type-background-thera {
-  background-color: $eve-wh-type-color-thera;
+  background-color: var(--eve-wh-type-color-thera);
 }
-
 .eve-wh-type-background-zarzakh {
-  background-color: $eve-wh-type-color-zarzakh;
+  background-color: var(--eve-wh-type-color-zarzakh);
 }

+/* Kind color classes */
 .eve-kind-color-high {
-  color: $eve-wh-type-color-high;
-  fill: $eve-wh-type-color-high;
+  color: var(--eve-wh-type-color-high);
+  fill: var(--eve-wh-type-color-high);
 }
-
 .eve-kind-color-low {
-  color: $eve-wh-type-color-low;
-  fill: $eve-wh-type-color-low;
+  color: var(--eve-wh-type-color-low);
+  fill: var(--eve-wh-type-color-low);
  font-weight: bold;
 }
-
 .eve-kind-color-null {
-  color: $eve-wh-type-color-null;
-  fill: $eve-wh-type-color-null;
+  color: var(--eve-wh-type-color-null);
+  fill: var(--eve-wh-type-color-null);
 }
-
 .eve-kind-color-wh {
-  color: $eve-wh-type-color-c6;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6);
+  fill: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-color-thera {
-  color: $eve-wh-type-color-thera;
-  fill: $eve-wh-type-color-thera;
+  color: var(--eve-wh-type-color-thera);
+  fill: var(--eve-wh-type-color-thera);
 }
-
 .eve-kind-color-abyss {
-  color: $eve-wh-type-color-c6;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6);
+  fill: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-color-penalty {
-  color: $eve-wh-type-color-c6;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6);
+  fill: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-color-pochven {
-  color: $eve-wh-type-color-c6;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6);
+  fill: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-color-zarzakh {
-  color: $eve-wh-type-color-zarzakh;
-  fill: $eve-wh-type-color-zarzakh;
+  color: var(--eve-wh-type-color-zarzakh);
+  fill: var(--eve-wh-type-color-zarzakh);
 }

+/* Kind backgrounds */
 .eve-kind-background-high {
-  background-color: $eve-wh-type-color-high;
+  background-color: var(--eve-wh-type-color-high);
 }
-
 .eve-kind-background-low {
-  background-color: $eve-wh-type-color-low;
+  background-color: var(--eve-wh-type-color-low);
 }
-
 .eve-kind-background-null {
-  background-color: $eve-wh-type-color-null;
+  background-color: var(--eve-wh-type-color-null);
 }
-
 .eve-kind-background-wh {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-background-thera {
-  background-color: $eve-wh-type-color-thera;
+  background-color: var(--eve-wh-type-color-thera);
 }
-
 .eve-kind-background-abyss {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-background-penalty {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-background-pochven {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-background-zarzakh {
-  background-color: $eve-wh-type-color-zarzakh;
+  background-color: var(--eve-wh-type-color-zarzakh);
 }

+/* System status color classes */
 .eve-system-status-color-clear {
-  color: $eve-solar-system-status-color-unknown;
+  color: var(--eve-solar-system-status-color-unknown);
 }
-
 .eve-system-status-color-home {
-  color: $eve-solar-system-status-color-home;
+  color: var(--eve-solar-system-status-color-home);
 }
-
 .eve-system-status-color-friendly {
-  color: $eve-solar-system-status-color-friendly;
+  color: var(--eve-solar-system-status-color-friendly);
 }
-
 .eve-system-status-color-lookingFor {
-  color: $eve-solar-system-status-color-lookingFor;
+  color: var(--eve-solar-system-status-color-lookingFor);
 }
-
 .eve-system-status-color-warning {
-  color: $eve-solar-system-status-color-warning;
+  color: var(--eve-solar-system-status-color-warning);
 }
-
 .eve-system-status-color-target {
-  color: $eve-solar-system-status-color-target;
+  color: var(--eve-solar-system-status-color-target);
 }
-
 .eve-system-status-color-dangerous {
-  color: $eve-solar-system-status-color-dangerous;
+  color: var(--eve-solar-system-status-color-dangerous);
 }

+/* Shapes */
 .wd-route-system-shape-triangle {
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
 }
-
 .wd-route-system-shape-circle {
  border-radius: 40%;
 }

+/* Some additional background classes */
 .wd-marker-bookmark-color-shattered {
  background-color: #833ca4;
  margin-top: 1px;
 }

-
 .wd-marker-bookmark-color-custom {
  background-color: #282828;
  border: 1px solid #4c4c4c;
@@ -572,3 +485,49 @@
 .wd-marker-bookmark-color-danger {
  background-color: #d10600;
 }
+
+.react-flow {
+  color: var(--text-color);
+
+  &__pane {
+    cursor: auto;
+  }
+
+  &__minimap {
+    background-color: rgba(66, 66, 66, 1);
+    opacity: 0.7;
+    border: 1px solid #2f2f2f;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  &__minimap-mask {
+    fill: rgba(28, 28, 28, 0.75);
+  }
+
+  &__controls {
+    filter: brightness(1.5);
+  }
+
+  &__minimap-node {
+    fill: #ffb03a;
+  }
+}
+
+.context-menu-active {
+  background-color: rgba(131, 131, 131, 0.33);
+}
+
+.p-dialog {
+  .p-dialog-header {
+    height: 40px;
+    padding: 1rem;
+    padding-right: 10px !important;
+  }
+  .p-dialog-title {
+    font-size: 1rem !important;
+  }
+  .p-dialog-header-icons {
+    align-self: initial !important;
+  }
+}
--- a/assets/js/hooks/Mapper/components/map/styles/index.scss
+++ b/assets/js/hooks/Mapper/components/map/styles/index.scss
@@ -0,0 +1,2 @@
+@import './default-theme.scss'; 
+@import './pathfinder-theme.scss'; 
--- a/assets/js/hooks/Mapper/components/map/styles/neon-theme.scss
+++ b/assets/js/hooks/Mapper/components/map/styles/neon-theme.scss
@@ -1,74 +0,0 @@
-$pastel-blue: #5a7d9a;
-$pastel-pink: #d291bc;
-$pastel-green: #88b04b;
-$pastel-yellow: #ffdd59;
-$dark-bg: #2d2d2d;
-$text-color: #ffffff;
-$tooltip-bg: #202020;
-
-.react-flow {
-  // background-color: $dark-bg;
-  color: $text-color;
-
-  &__node {
-    //cursor: auto;
-  }
-
-  &__pane {
-    cursor: auto;
-  }
-  //&__edge {
-  //  stroke: $pastel-pink;
-  //  stroke-width: 2px;
-  //
-  //  &.selected {
-  //    stroke: $pastel-yellow;
-  //  }
-  //}
-
-  &__handle {
-    //background-color: $pastel-green;
-    //box-shadow: 0 0 5px rgba($pastel-green, 0.5);
-  }
-
-  &__minimap {
-    background-color: rgba(66, 66, 66, 1);
-    opacity: 0.7;
-    //backdrop-filter: blur(5px);
-    border: 1px solid #2f2f2f;
-    border-radius: 4px;
-    overflow: hidden;
-  }
-
-  &__minimap-mask {
-    fill: rgba(28, 28, 28, 0.75);
-  }
-
-  &__controls {
-    filter: brightness(1.5);
-  }
-
-  &__minimap-node {
-    fill: #ffb03a;
-  }
-}
-
-.context-menu-active {
-  background-color: rgba(131, 131, 131, 0.33);
-}
-
-.p-dialog {
-  .p-dialog-header {
-    height: 40px;
-    padding: 1rem;
-    padding-right: 10px !important;
-  }
-
-  .p-dialog-title {
-    font-size: 1rem !important;
-  }
-
-  .p-dialog-header-icons {
-    align-self: initial !important;
-  }
-}
--- a/assets/js/hooks/Mapper/components/map/styles/neon-variables.scss
+++ b/assets/js/hooks/Mapper/components/map/styles/neon-variables.scss
@@ -1,7 +0,0 @@
-$pastel-blue: #5a7d9a;
-$pastel-pink: #d291bc;
-$pastel-green: #88b04b;
-$pastel-yellow: #ffdd59;
-$dark-bg: #2d2d2d;
-$text-color: #ffffff;
-$tooltip-bg: #202020;
--- a/assets/js/hooks/Mapper/components/map/styles/pathfinder-theme.scss
+++ b/assets/js/hooks/Mapper/components/map/styles/pathfinder-theme.scss
@@ -0,0 +1,51 @@
+
+@import './eve-common-variables';
+@import './eve-common';
+@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');
+
+.pathfinder-theme {
+  --rf-bg-color: #000000;
+  --rf-soft-bg-color: #282828;
+
+  --rf-node-bg-color: #202020;
+  --rf-node-soft-bg-color: #313335;
+  --rf-node-font-weight: bold;
+  --rf-text-color: #adadad;
+  --rf-region-name: var(--rf-text-color);
+  --rf-custom-name: var(--rf-text-color);
+
+  --tooltip-bg: #202020;
+
+  --rf-bg-variant: "lines";
+  --rf-bg-gap: 32;
+  --rf-bg-size: 1;
+  --rf-bg-pattern-color: #313131;
+
+  --eve-effect-pulsar: #428bca;
+  --eve-effect-magnetar: #e06fdf;
+  --eve-effect-wolfRayet: #e28a0d;
+  --eve-effect-blackHole: #000000;
+  --eve-effect-cataclysmicVariable: #ffffbb;
+  --eve-effect-redGiant: #d9534f;
+
+  --eve-wh-type-color-high: #5cb85c;
+  --eve-wh-type-color-low: #e28a0d;
+  --eve-wh-type-color-null: #d9534f;
+  --eve-wh-type-color-c1: #428bca;
+  --eve-wh-type-color-c2: #428bca;
+  --eve-wh-type-color-c3: #e28a0d;
+  --eve-wh-type-color-c4: #e28a0d;
+  --eve-wh-type-color-c5: #d9534f;
+  --eve-wh-type-color-c6: #d9534f;
+  --eve-wh-type-color-c13: #7986cb;
+  --eve-wh-type-color-drifter: #44aa82;
+
+
+  --rf-node-font-weight: bold;
+  --rf-node-line-height: normal;
+  --rf-node-font-family: 'Oxygen', sans-serif;
+  --rf-node-text-color: var(--pf-text-color);
+
+  --rf-tag-color: #fbbf24;
+  --rf-has-user-characters: #5cb85c;
+}
--- a/assets/js/hooks/Mapper/components/map/utils/wrapNode.tsx
+++ b/assets/js/hooks/Mapper/components/map/utils/wrapNode.tsx
@@ -0,0 +1,11 @@
+// wrapNode.ts
+import { NodeProps } from 'reactflow';
+import { SolarSystemNodeProps } from '../components/SolarSystemNode';
+
+export function wrapNode<T>(
+  SolarSystemNode: React.FC<SolarSystemNodeProps<T>>
+): React.FC<NodeProps<T>> {
+  return function NodeAdapter(props) {
+    return <SolarSystemNode {...props} />;
+  };
+}
--- a/assets/js/hooks/Mapper/components/mapInterface/components/SystemSettingsDialog/SystemSettingsDialog.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/SystemSettingsDialog/SystemSettingsDialog.tsx
@@ -3,6 +3,7 @@ import { InputTextarea } from 'primereact/inputtextarea';
 import { Dialog } from 'primereact/dialog';
 import { getSystemById } from '@/hooks/Mapper/helpers';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button } from 'primereact/button';
 import { OutCommand } from '@/hooks/Mapper/types';
@@ -22,30 +23,21 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
    outCommand,
  } = useMapRootState();

+  const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
+
  const system = getSystemById(systems, systemId);

  const [name, setName] = useState('');
  const [label, setLabel] = useState('');
+  const [temporaryName, setTemporaryName] = useState('');
  const [description, setDescription] = useState('');
  const inputRef = useRef<HTMLInputElement>();

-  useEffect(() => {
-    if (!system) {
-      return;
-    }
-
-    const labels = new LabelsManager(system.labels || '');
-
-    setName(system.name || '');
-    setLabel(labels.customLabel);
-    setDescription(system.description || '');
-  }, [system]);
-
-  const ref = useRef({ name, description, label, outCommand, systemId, system });
-  ref.current = { name, description, label, outCommand, systemId, system };
+  const ref = useRef({ name, description, temporaryName, label, outCommand, systemId, system });
+  ref.current = { name, description, label, temporaryName, outCommand, systemId, system };

  const handleSave = useCallback(() => {
-    const { name, description, label, outCommand, systemId, system } = ref.current;
+    const { name, description, label, temporaryName, outCommand, systemId, system } = ref.current;

    const outLabel = new LabelsManager(system?.labels ?? '');
    outLabel.updateCustomLabel(label);
@@ -58,6 +50,14 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
      },
    });

+    outCommand({
+      type: OutCommand.updateSystemTemporaryName,
+      data: {
+        system_id: systemId,
+        value: temporaryName,
+      },
+    });
+
    outCommand({
      type: OutCommand.updateSystemName,
      data: {
@@ -93,6 +93,21 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
    e.target.value = e.target.value.toUpperCase().replace(/[^A-Z0-9\-[\](){}]/g, '');
  }, []);

+  // Attention: this effect should be call only on mount.
+  useEffect(() => {
+    const { system } = ref.current;
+    if (!system) {
+      return;
+    }
+
+    const labels = new LabelsManager(system.labels || '');
+
+    setName(system.name || '');
+    setLabel(labels.customLabel);
+    setTemporaryName(system.temporary_name || '');
+    setDescription(system.description || '');
+  }, []);
+
  return (
    <Dialog
      header="System settings"
@@ -167,6 +182,35 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
              </IconField>
            </div>

+            {isTempSystemNameEnabled && (
+              <div className="flex flex-col gap-1">
+                <label htmlFor="username">Temporary Name</label>
+
+                <IconField>
+                  {temporaryName !== '' && (
+                    <WdImgButton
+                      className="pi pi-trash text-red-400"
+                      textSize={WdImageSize.large}
+                      tooltip={{
+                        content: 'Remove temporary name',
+                        className: 'pi p-input-icon',
+                        position: TooltipPosition.top,
+                      }}
+                      onClick={() => setTemporaryName('')}
+                    />
+                  )}
+                  <InputText
+                    id="temporaryName"
+                    aria-describedby="temporaryName"
+                    autoComplete="off"
+                    value={temporaryName}
+                    maxLength={10}
+                    onChange={e => setTemporaryName(e.target.value)}
+                  />
+                </IconField>
+              </div>
+            )}
+
            <div className="flex flex-col gap-1">
              <label htmlFor="username">Description</label>
              <InputTextarea
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesList/RoutesList.module.scss
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesList/RoutesList.module.scss
@@ -8,7 +8,6 @@
 .RouteSystem {
  width: 8px;
  height: 8px;
-  background: #ffffff;

  cursor: pointer;
  transition: opacity 200ms;
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.tsx
@@ -2,7 +2,10 @@ import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { parseSignatures } from '@/hooks/Mapper/helpers';
 import { Commands, OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { WdTooltip, WdTooltipHandlers } from '@/hooks/Mapper/components/ui-kit';
-import { GROUPS_LIST } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
+import {
+  getGroupIdByRawGroup,
+  GROUPS_LIST,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';

 import { DataTable, DataTableRowClickEvent, DataTableRowMouseEvent, SortOrder } from 'primereact/datatable';
 import { Column } from 'primereact/column';
@@ -122,13 +125,14 @@ export const SystemSignaturesContent = ({
        }

        const isCosmicSignature = x.kind === COSMIC_SIGNATURE;
+        const preparedGroup = getGroupIdByRawGroup(x.group);

        if (isCosmicSignature) {
          const showCosmicSignatures = settings.find(y => y.key === COSMIC_SIGNATURE)?.value;
          if (showCosmicSignatures) {
-            return !x.group || groupSettings.find(y => y.key === x.group)?.value;
+            return !x.group || groupSettings.find(y => y.key === preparedGroup)?.value;
          } else {
-            return !!x.group && groupSettings.find(y => y.key === x.group)?.value;
+            return !!x.group && groupSettings.find(y => y.key === preparedGroup)?.value;
          }
        }

--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts
@@ -1,4 +1,12 @@
-import { GroupType, SignatureGroup } from '@/hooks/Mapper/types';
+import {
+  GroupType,
+  SignatureGroup,
+  SignatureGroupENG,
+  SignatureGroupRU,
+  SignatureKind,
+  SignatureKindENG,
+  SignatureKindRU,
+} from '@/hooks/Mapper/types';

 export const TIME_ONE_MINUTE = 1000 * 60;
 export const TIME_TEN_MINUTES = 1000 * 60 * 10;
@@ -24,3 +32,43 @@ export const GROUPS: Record<SignatureGroup, GroupType> = {
  [SignatureGroup.Wormhole]: { id: SignatureGroup.Wormhole, icon: '/icons/brackets/wormhole.png', ...wh },
  [SignatureGroup.CosmicSignature]: { id: SignatureGroup.CosmicSignature, icon: '/icons/x_close14.png', w: 9, h: 9 },
 };
+
+export const MAPPING_GROUP_TO_ENG = {
+  // ENGLISH
+  [SignatureGroupENG.GasSite]: SignatureGroup.GasSite,
+  [SignatureGroupENG.RelicSite]: SignatureGroup.RelicSite,
+  [SignatureGroupENG.DataSite]: SignatureGroup.DataSite,
+  [SignatureGroupENG.OreSite]: SignatureGroup.OreSite,
+  [SignatureGroupENG.CombatSite]: SignatureGroup.CombatSite,
+  [SignatureGroupENG.Wormhole]: SignatureGroup.Wormhole,
+  [SignatureGroupENG.CosmicSignature]: SignatureGroup.CosmicSignature,
+
+  // RUSSIAN
+  [SignatureGroupRU.GasSite]: SignatureGroup.GasSite,
+  [SignatureGroupRU.RelicSite]: SignatureGroup.RelicSite,
+  [SignatureGroupRU.DataSite]: SignatureGroup.DataSite,
+  [SignatureGroupRU.OreSite]: SignatureGroup.OreSite,
+  [SignatureGroupRU.CombatSite]: SignatureGroup.CombatSite,
+  [SignatureGroupRU.Wormhole]: SignatureGroup.Wormhole,
+  [SignatureGroupRU.CosmicSignature]: SignatureGroup.CosmicSignature,
+};
+
+export const MAPPING_TYPE_TO_ENG = {
+  // ENGLISH
+  [SignatureKindENG.CosmicSignature]: SignatureKind.CosmicSignature,
+  [SignatureKindENG.CosmicAnomaly]: SignatureKind.CosmicAnomaly,
+  [SignatureKindENG.Structure]: SignatureKind.Structure,
+  [SignatureKindENG.Ship]: SignatureKind.Ship,
+  [SignatureKindENG.Deployable]: SignatureKind.Deployable,
+  [SignatureKindENG.Drone]: SignatureKind.Drone,
+
+  // RUSSIAN
+  [SignatureKindRU.CosmicSignature]: SignatureKind.CosmicSignature,
+  [SignatureKindRU.CosmicAnomaly]: SignatureKind.CosmicAnomaly,
+  [SignatureKindRU.Structure]: SignatureKind.Structure,
+  [SignatureKindRU.Ship]: SignatureKind.Ship,
+  [SignatureKindRU.Deployable]: SignatureKind.Deployable,
+  [SignatureKindRU.Drone]: SignatureKind.Drone,
+};
+
+export const getGroupIdByRawGroup = (val: string) => MAPPING_GROUP_TO_ENG[val as SignatureGroup];
--- a/assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx
@@ -16,6 +16,8 @@ export const MapRootContent = ({}: MapRootContentProps) => {
  const { interfaceSettings } = useMapRootState();
  const { isShowMenu } = interfaceSettings;

+  const themeClass = `${interfaceSettings.theme ?? 'default'}-theme`;
+
  const [showOnTheMap, setShowOnTheMap] = useState(false);
  const [showMapSettings, setShowMapSettings] = useState(false);
  const mapInterface = <MapInterface />;
@@ -26,27 +28,29 @@ export const MapRootContent = ({}: MapRootContentProps) => {
  useSkipContextMenu();

  return (
-    <Layout map={<MapWrapper />}>
-      {!isShowMenu ? (
-        <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
-          <div className="absolute top-0 left-0 w-[calc(100%-3.5rem)] h-full pointer-events-none">
-            <Topbar />
+    <div className={themeClass}>
+      <Layout map={<MapWrapper />}>
+        {!isShowMenu ? (
+          <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
+            <div className="absolute top-0 left-0 w-[calc(100%-3.5rem)] h-full pointer-events-none">
+              <Topbar />
+              {mapInterface}
+            </div>
+            <div className="absolute top-0 right-0 w-14 h-[calc(100%+3.5rem)] pointer-events-auto">
+              <RightBar onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
+            </div>
+          </div>
+        ) : (
+          <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
+            <Topbar>
+              <MapContextMenu onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
+            </Topbar>
            {mapInterface}
          </div>
-          <div className="absolute top-0 right-0 w-14 h-[calc(100%+3.5rem)] pointer-events-auto">
-            <RightBar onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
-          </div>
-        </div>
-      ) : (
-        <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
-          <Topbar>
-            <MapContextMenu onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
-          </Topbar>
-          {mapInterface}
-        </div>
-      )}
-      <OnTheMap show={showOnTheMap} onHide={() => setShowOnTheMap(false)} />
-      <MapSettings show={showMapSettings} onHide={() => setShowMapSettings(false)} />
-    </Layout>
+        )}
+        <OnTheMap show={showOnTheMap} onHide={() => setShowOnTheMap(false)} />
+        <MapSettings show={showMapSettings} onHide={() => setShowMapSettings(false)} />
+      </Layout>
+    </div>
  );
 };
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.tsx
@@ -3,8 +3,13 @@ import { Dialog } from 'primereact/dialog';
 import { useCallback, useMemo, useState } from 'react';
 import { TabPanel, TabView } from 'primereact/tabview';
 import { PrettySwitchbox } from './components';
-import { InterfaceStoredSettings, InterfaceStoredSettingsProps, useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import {
+  InterfaceStoredSettingsProps,
+  useMapRootState,
+  InterfaceStoredSettings,
+} from '@/hooks/Mapper/mapRootProvider';
 import { OutCommand } from '@/hooks/Mapper/types';
+import { Dropdown } from 'primereact/dropdown';

 export enum UserSettingsRemoteProps {
  link_signature_on_splash = 'link_signature_on_splash',
@@ -37,96 +42,171 @@ export interface MapSettingsProps {
  onHide: () => void;
 }

-type CheckboxesList = {
+type SettingsListItem = {
  prop: keyof UserSettings;
  label: string;
-}[];
+  type: 'checkbox' | 'dropdown';
+  options?: { label: string; value: string }[];
+};

-const COMMON_CHECKBOXES_PROPS: CheckboxesList = [
-  { prop: InterfaceStoredSettingsProps.isShowMinimap, label: 'Show Minimap' },
+const COMMON_CHECKBOXES_PROPS: SettingsListItem[] = [
+  {
+    prop: InterfaceStoredSettingsProps.isShowMinimap,
+    label: 'Show Minimap',
+    type: 'checkbox',
+  },
 ];

-const SYSTEMS_CHECKBOXES_PROPS: CheckboxesList = [
-  { prop: InterfaceStoredSettingsProps.isShowKSpace, label: 'Highlight Low/High-security systems' },
-  { prop: UserSettingsRemoteProps.select_on_spash, label: 'Auto-select splashed' },
+const SYSTEMS_CHECKBOXES_PROPS: SettingsListItem[] = [
+  {
+    prop: InterfaceStoredSettingsProps.isShowKSpace,
+    label: 'Highlight Low/High-security systems',
+    type: 'checkbox',
+  },
+  {
+    prop: UserSettingsRemoteProps.select_on_spash,
+    label: 'Auto-select splashed',
+    type: 'checkbox',
+  },
 ];

-const SIGNATURES_CHECKBOXES_PROPS: CheckboxesList = [
-  { prop: UserSettingsRemoteProps.link_signature_on_splash, label: 'Link signature on splash' },
-  { prop: InterfaceStoredSettingsProps.isShowUnsplashedSignatures, label: 'Show unsplashed signatures' },
+const SIGNATURES_CHECKBOXES_PROPS: SettingsListItem[] = [
+  {
+    prop: UserSettingsRemoteProps.link_signature_on_splash,
+    label: 'Link signature on splash',
+    type: 'checkbox',
+  },
+  {
+    prop: InterfaceStoredSettingsProps.isShowUnsplashedSignatures,
+    label: 'Show unsplashed signatures',
+    type: 'checkbox',
+  },
 ];

-const CONNECTIONS_CHECKBOXES_PROPS: CheckboxesList = [
-  { prop: UserSettingsRemoteProps.delete_connection_with_sigs, label: 'Delete connections to linked signatures' },
-  { prop: InterfaceStoredSettingsProps.isThickConnections, label: 'Thicker connections' },
+const CONNECTIONS_CHECKBOXES_PROPS: SettingsListItem[] = [
+  {
+    prop: UserSettingsRemoteProps.delete_connection_with_sigs,
+    label: 'Delete connections to linked signatures',
+    type: 'checkbox',
+  },
+  {
+    prop: InterfaceStoredSettingsProps.isThickConnections,
+    label: 'Thicker connections',
+    type: 'checkbox',
+  },
 ];

-const UI_CHECKBOXES_PROPS: CheckboxesList = [
-  { prop: InterfaceStoredSettingsProps.isShowMenu, label: 'Enable compact map menu bar' },
-  { prop: InterfaceStoredSettingsProps.isShowBackgroundPattern, label: 'Show background pattern' },
-  { prop: InterfaceStoredSettingsProps.isSoftBackground, label: 'Enable soft background' },
+const UI_CHECKBOXES_PROPS: SettingsListItem[] = [
+  {
+    prop: InterfaceStoredSettingsProps.isShowMenu,
+    label: 'Enable compact map menu bar',
+    type: 'checkbox',
+  },
+  {
+    prop: InterfaceStoredSettingsProps.isShowBackgroundPattern,
+    label: 'Show background pattern',
+    type: 'checkbox',
+  },
+  {
+    prop: InterfaceStoredSettingsProps.isSoftBackground,
+    label: 'Enable soft background',
+    type: 'checkbox',
+  },
 ];

+const THEME_OPTIONS = [
+  { label: 'Default', value: 'default' },
+  { label: 'Pathfinder', value: 'pathfinder' },
+];
+
+const THEME_SETTING: SettingsListItem = {
+  prop: 'theme',
+  label: 'Theme',
+  type: 'dropdown',
+  options: THEME_OPTIONS,
+};
+
 export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
  const [activeIndex, setActiveIndex] = useState(0);
  const { outCommand, interfaceSettings, setInterfaceSettings } = useMapRootState();
-  const [userRemoteSettings, setUserRemoteSettings] = useState<UserSettingsRemote>({ ...DEFAULT_REMOTE_SETTINGS });
+  const [userRemoteSettings, setUserRemoteSettings] = useState<UserSettingsRemote>({
+    ...DEFAULT_REMOTE_SETTINGS,
+  });

  const mergedSettings = useMemo(() => {
    return {
-      ...interfaceSettings,
      ...userRemoteSettings,
+      ...interfaceSettings,
    };
  }, [userRemoteSettings, interfaceSettings]);

+
  const handleShow = async () => {
    const { user_settings } = await outCommand({
      type: OutCommand.getUserSettings,
      data: null,
    });
-
    setUserRemoteSettings({
      ...user_settings,
    });
  };

-  const handleChangeChecked = useCallback(
-    (prop: keyof UserSettings) => async (checked: boolean) => {
-      // @ts-ignore
-      if (UserSettingsRemoteList.includes(prop)) {
+  const handleSettingChange = useCallback(
+    async (prop: keyof UserSettings, value: boolean | string) => {
+      if (UserSettingsRemoteList.includes(prop as any)) {
        const newRemoteSettings = {
          ...userRemoteSettings,
-          [prop]: checked,
+          [prop]: value,
        };
-
        await outCommand({
          type: OutCommand.updateUserSettings,
          data: newRemoteSettings,
        });
-
        setUserRemoteSettings(newRemoteSettings);
-        return;
+      } else {
+        setInterfaceSettings({
+          ...interfaceSettings,
+          [prop]: value,
+        });
      }
-
-      setInterfaceSettings({
-        ...interfaceSettings,
-        [prop]: checked,
-      });
    },
-    [interfaceSettings, outCommand, setInterfaceSettings, userRemoteSettings],
+    [userRemoteSettings, interfaceSettings, outCommand, setInterfaceSettings],
  );

-  const renderCheckboxesList = (list: CheckboxesList) => {
-    return list.map(x => {
+  const renderSettingItem = (item: SettingsListItem) => {
+    const currentValue = mergedSettings[item.prop];
+
+    if (item.type === 'checkbox') {
      return (
        <PrettySwitchbox
-          key={x.prop}
-          label={x.label}
-          checked={mergedSettings[x.prop]}
-          setChecked={handleChangeChecked(x.prop)}
+          key={item.prop}
+          label={item.label}
+          checked={!!currentValue}
+          setChecked={(checked) => handleSettingChange(item.prop, checked)}
        />
      );
-    });
+    }
+
+    if (item.type === 'dropdown' && item.options) {
+      return (
+        <div key={item.prop} className="flex items-center gap-2 mt-2">
+          <label className="text-sm">{item.label}:</label>
+          <Dropdown
+            className="text-sm"
+            value={currentValue}
+            options={item.options}
+            onChange={(e) => handleSettingChange(item.prop, e.value)}
+            placeholder="Select a theme"
+          />
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  const renderSettingsList = (list: SettingsListItem[]) => {
+    return list.map(renderSettingItem);
  };

  return (
@@ -137,10 +217,7 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
      style={{ width: '550px' }}
      onShow={handleShow}
      onHide={() => {
-        if (!show) {
-          return;
-        }
-
+        if (!show) return;
        setActiveIndex(0);
        onHide();
      }}
@@ -150,25 +227,35 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
          <div className={styles.verticalTabsContainer}>
            <TabView
              activeIndex={activeIndex}
-              onTabChange={e => setActiveIndex(e.index)}
+              onTabChange={(e) => setActiveIndex(e.index)}
              className={styles.verticalTabView}
            >
              <TabPanel header="Common" headerClassName={styles.verticalTabHeader}>
-                <div className="w-full h-full flex flex-col gap-1">{renderCheckboxesList(COMMON_CHECKBOXES_PROPS)}</div>
-              </TabPanel>
-              <TabPanel header="Systems" headerClassName={styles.verticalTabHeader}>
                <div className="w-full h-full flex flex-col gap-1">
-                  {renderCheckboxesList(SYSTEMS_CHECKBOXES_PROPS)}
+                  {renderSettingsList(COMMON_CHECKBOXES_PROPS)}
                </div>
              </TabPanel>
+
+              <TabPanel header="Systems" headerClassName={styles.verticalTabHeader}>
+                <div className="w-full h-full flex flex-col gap-1">
+                  {renderSettingsList(SYSTEMS_CHECKBOXES_PROPS)}
+                </div>
+              </TabPanel>
+
              <TabPanel header="Connections" headerClassName={styles.verticalTabHeader}>
-                {renderCheckboxesList(CONNECTIONS_CHECKBOXES_PROPS)}
+                {renderSettingsList(CONNECTIONS_CHECKBOXES_PROPS)}
              </TabPanel>
+
              <TabPanel header="Signatures" headerClassName={styles.verticalTabHeader}>
-                {renderCheckboxesList(SIGNATURES_CHECKBOXES_PROPS)}
+                {renderSettingsList(SIGNATURES_CHECKBOXES_PROPS)}
              </TabPanel>
+
              <TabPanel header="User Interface" headerClassName={styles.verticalTabHeader}>
-                {renderCheckboxesList(UI_CHECKBOXES_PROPS)}
+                {renderSettingsList(UI_CHECKBOXES_PROPS)}
+              </TabPanel>
+
+              <TabPanel header="Theme" headerClassName={styles.verticalTabHeader}>
+                {renderSettingItem(THEME_SETTING)}
              </TabPanel>
            </TabView>
          </div>
--- a/assets/js/hooks/Mapper/components/mapWrapper/MapWrapper.tsx
+++ b/assets/js/hooks/Mapper/components/mapWrapper/MapWrapper.tsx
@@ -40,6 +40,7 @@ export const MapWrapper = () => {
      isThickConnections,
      isShowBackgroundPattern,
      isSoftBackground,
+      theme,
    },
  } = useMapRootState();
  const { deleteSystems } = useDeleteSystems();
@@ -166,6 +167,7 @@ export const MapWrapper = () => {
        isThickConnections={isThickConnections}
        isShowBackgroundPattern={isShowBackgroundPattern}
        isSoftBackground={isSoftBackground}
+        theme={theme}
        onAddSystem={onAddSystem}
      />

--- a/assets/js/hooks/Mapper/helpers/parseSignatures.ts
+++ b/assets/js/hooks/Mapper/helpers/parseSignatures.ts
@@ -1,5 +1,5 @@
-import { COSMIC_SIGNATURE } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
-import { SystemSignature } from '@/hooks/Mapper/types';
+import { SignatureGroup, SignatureKind, SystemSignature } from '@/hooks/Mapper/types';
+import { MAPPING_TYPE_TO_ENG } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';

 export const parseSignatures = (value: string, availableKeys: string[]): SystemSignature[] => {
  const outArr: SystemSignature[] = [];
@@ -14,10 +14,12 @@ export const parseSignatures = (value: string, availableKeys: string[]): SystemS
      continue;
    }

+    const kind = MAPPING_TYPE_TO_ENG[sigArrInfo[1] as SignatureKind];
+
    outArr.push({
      eve_id: sigArrInfo[0],
-      kind: availableKeys.includes(sigArrInfo[1]) ? sigArrInfo[1] : COSMIC_SIGNATURE,
-      group: sigArrInfo[2],
+      kind: availableKeys.includes(kind) ? kind : SignatureKind.CosmicSignature,
+      group: sigArrInfo[2] as SignatureGroup,
      name: sigArrInfo[3],
      type: '',
    });
--- a/assets/js/hooks/Mapper/mapRootProvider/MapRootProvider.tsx
+++ b/assets/js/hooks/Mapper/mapRootProvider/MapRootProvider.tsx
@@ -37,6 +37,7 @@ export enum InterfaceStoredSettingsProps {
  isShowUnsplashedSignatures = 'isShowUnsplashedSignatures',
  isShowBackgroundPattern = 'isShowBackgroundPattern',
  isSoftBackground = 'isSoftBackground',
+  theme = 'theme',
 }

 export type InterfaceStoredSettings = {
@@ -47,6 +48,7 @@ export type InterfaceStoredSettings = {
  isShowUnsplashedSignatures: boolean;
  isShowBackgroundPattern: boolean;
  isSoftBackground: boolean;
+  theme: string;
 };

 export const STORED_INTERFACE_DEFAULT_VALUES: InterfaceStoredSettings = {
@@ -57,7 +59,8 @@ export const STORED_INTERFACE_DEFAULT_VALUES: InterfaceStoredSettings = {
  isShowUnsplashedSignatures: false,
  isShowBackgroundPattern: true,
  isSoftBackground: false,
-};
+  theme: 'default',
+}

 export interface MapRootContextProps {
  update: ContextStoreDataUpdate<MapRootData>;
--- a/assets/js/hooks/Mapper/types/mapHandlers.ts
+++ b/assets/js/hooks/Mapper/types/mapHandlers.ts
@@ -129,6 +129,7 @@ export enum OutCommand {
  updateConnectionCustomInfo = 'update_connection_custom_info',
  updateSignatures = 'update_signatures',
  updateSystemName = 'update_system_name',
+  updateSystemTemporaryName = 'update_system_temporary_name',
  updateSystemDescription = 'update_system_description',
  updateSystemLabels = 'update_system_labels',
  updateSystemLocked = 'update_system_locked',
--- a/assets/js/hooks/Mapper/types/signatures.ts
+++ b/assets/js/hooks/Mapper/types/signatures.ts
@@ -10,6 +10,15 @@ export enum SignatureGroup {
  CombatSite = 'Combat Site',
 }

+export enum SignatureKind {
+  CosmicSignature = 'Cosmic Signature',
+  CosmicAnomaly = 'Cosmic Anomaly',
+  Structure = 'Structure',
+  Ship = 'Ship',
+  Deployable = 'Deployable',
+  Drone = 'Drone',
+}
+
 export type GroupType = {
  id: string;
  icon: string;
@@ -19,7 +28,7 @@ export type GroupType = {

 export type SystemSignature = {
  eve_id: string;
-  kind: string;
+  kind: SignatureKind;
  name: string;
  custom_info?: string;
  description?: string;
@@ -30,3 +39,41 @@ export type SystemSignature = {
  inserted_at?: string;
  updated_at?: string;
 };
+
+export enum SignatureKindENG {
+  CosmicSignature = 'Cosmic Signature',
+  CosmicAnomaly = 'Cosmic Anomaly',
+  Structure = 'Structure',
+  Ship = 'Ship',
+  Deployable = 'Deployable',
+  Drone = 'Drone',
+}
+
+export enum SignatureKindRU {
+  CosmicSignature = 'Скрытый сигнал',
+  CosmicAnomaly = 'Космическая аномалия',
+  Structure = 'Сооружение',
+  Ship = 'Корабль',
+  Deployable = 'Полевые блоки',
+  Drone = 'Дрон',
+}
+
+export enum SignatureGroupENG {
+  CosmicSignature = 'Cosmic Signature',
+  Wormhole = 'Wormhole',
+  GasSite = 'Gas Site',
+  RelicSite = 'Relic Site',
+  DataSite = 'Data Site',
+  OreSite = 'Ore Site',
+  CombatSite = 'Combat Site',
+}
+
+export enum SignatureGroupRU {
+  CosmicSignature = 'Скрытый сигнал',
+  Wormhole = 'Червоточина',
+  GasSite = 'Газовый район',
+  RelicSite = 'Археологический район',
+  DataSite = 'Информационный район',
+  OreSite = 'Астероидный район',
+  CombatSite = 'Боевой район',
+}
--- a/assets/js/hooks/Mapper/types/system.ts
+++ b/assets/js/hooks/Mapper/types/system.ts
@@ -116,6 +116,7 @@ export type SolarSystemRawType = {
  tag: string | null;
  status: number;
  name: string | null;
+  temporary_name: string | null;

  system_static_info: SolarSystemStaticInfoRaw;
  system_signatures: SystemSignature[];
--- a/lib/wanderer_app/api/map_system.ex
+++ b/lib/wanderer_app/api/map_system.ex
@@ -46,6 +46,7 @@ defmodule WandererApp.Api.MapSystem do
    define(:update_locked, action: :update_locked)
    define(:update_status, action: :update_status)
    define(:update_tag, action: :update_tag)
+    define(:update_temporary_name, action: :update_temporary_name)
    define(:update_labels, action: :update_labels)
    define(:update_position, action: :update_position)
    define(:update_visible, action: :update_visible)
@@ -102,6 +103,10 @@ defmodule WandererApp.Api.MapSystem do
      accept [:tag]
    end

+    update :update_temporary_name do
+      accept [:temporary_name]
+    end
+
    update :update_labels do
      accept [:labels]
    end
@@ -141,6 +146,10 @@ defmodule WandererApp.Api.MapSystem do
      allow_nil? true
    end

+    attribute :temporary_name, :string do
+      allow_nil? true
+    end
+
    attribute :labels, :string do
      allow_nil? true
    end
--- a/lib/wanderer_app/map/map_server.ex
+++ b/lib/wanderer_app/map/map_server.ex
@@ -129,6 +129,12 @@ defmodule WandererApp.Map.Server do
      |> map_pid!
      |> GenServer.cast({&Impl.update_system_tag/2, [update]})

+    def update_system_temporary_name(map_id, update) when is_binary(map_id),
+    do:
+      map_id
+      |> map_pid!
+      |> GenServer.cast({&Impl.update_system_temporary_name/2, [update]})
+
  def update_system_locked(map_id, update) when is_binary(map_id),
    do:
      map_id
--- a/lib/wanderer_app/map/map_server_impl.ex
+++ b/lib/wanderer_app/map/map_server_impl.ex
@@ -150,6 +150,8 @@ defmodule WandererApp.Map.Server.Impl do

  defdelegate update_system_tag(state, update), to: SystemsImpl

+  defdelegate update_system_temporary_name(state, update), to: SystemsImpl
+
  defdelegate update_system_locked(state, update), to: SystemsImpl

  defdelegate update_system_labels(state, update), to: SystemsImpl
@@ -320,6 +322,8 @@ defmodule WandererApp.Map.Server.Impl do
      layout: options |> Map.get("layout", "left_to_right"),
      store_custom_labels:
        options |> Map.get("store_custom_labels", "false") |> String.to_existing_atom(),
+      show_temp_system_name:
+        options |> Map.get("show_temp_system_name", "false") |> String.to_existing_atom(),
      restrict_offline_showing:
        options |> Map.get("restrict_offline_showing", "false") |> String.to_existing_atom()
    ]
@@ -427,7 +431,8 @@ defmodule WandererApp.Map.Server.Impl do
                                 "name" => name,
                                 "position" => %{"x" => x, "y" => y},
                                 "status" => status,
-                                 "tag" => tag
+                                 "tag" => tag,
+                                 "temporary_name" => temporary_name,
                               } = _system,
                               acc ->
        acc
@@ -446,6 +451,7 @@ defmodule WandererApp.Map.Server.Impl do
        })
        |> update_system_status(%{solar_system_id: id |> String.to_integer(), status: status})
        |> update_system_tag(%{solar_system_id: id |> String.to_integer(), tag: tag})
+        |> update_system_temporary_name(%{solar_system_id: id |> String.to_integer(), temporary_name: temporary_name})
        |> update_system_locked(%{solar_system_id: id |> String.to_integer(), locked: locked})
        |> update_system_labels(%{solar_system_id: id |> String.to_integer(), labels: labels})
      end)
--- a/lib/wanderer_app/map/server/map_server_systems_impl.ex
+++ b/lib/wanderer_app/map/server/map_server_systems_impl.ex
@@ -122,6 +122,13 @@ defmodule WandererApp.Map.Server.SystemsImpl do
      ),
      do: state |> update_system(:update_tag, [:tag], update)

+  def update_system_temporary_name(
+        state,
+        update
+      ) do
+      state |> update_system(:update_temporary_name, [:temporary_name], update)
+  end
+
  def update_system_locked(
        state,
        update
@@ -286,6 +293,7 @@ defmodule WandererApp.Map.Server.SystemsImpl do
              |> WandererApp.MapSystemRepo.cleanup_labels!(map_opts)
              |> WandererApp.MapSystemRepo.update_visible!(%{visible: true})
              |> WandererApp.MapSystemRepo.cleanup_tags()
+              |> WandererApp.MapSystemRepo.cleanup_temporary_name()

            @ddrt.insert(
              {existing_system.solar_system_id,
@@ -404,6 +412,7 @@ defmodule WandererApp.Map.Server.SystemsImpl do
            |> WandererApp.MapSystemRepo.update_position!(%{position_x: x, position_y: y})
            |> WandererApp.MapSystemRepo.cleanup_labels!(map_opts)
            |> WandererApp.MapSystemRepo.cleanup_tags!()
+            |> WandererApp.MapSystemRepo.cleanup_temporary_name!()
            |> WandererApp.MapSystemRepo.update_visible(%{visible: true})
          end

--- a/lib/wanderer_app/repositories/map_repo.ex
+++ b/lib/wanderer_app/repositories/map_repo.ex
@@ -4,6 +4,7 @@ defmodule WandererApp.MapRepo do
  @default_map_options %{
    "layout" => "left_to_right",
    "store_custom_labels" => "false",
+    "show_temp_system_name" => "false",
    "restrict_offline_showing" => "false"
  }

--- a/lib/wanderer_app/repositories/map_system_repo.ex
+++ b/lib/wanderer_app/repositories/map_system_repo.ex
@@ -61,6 +61,20 @@ defmodule WandererApp.MapSystemRepo do
    })
  end

+  def cleanup_temporary_name(system) do
+    system
+    |> WandererApp.Api.MapSystem.update_temporary_name(%{
+      temporary_name: nil
+    })
+  end
+
+  def cleanup_temporary_name!(system) do
+    system
+    |> WandererApp.Api.MapSystem.update_temporary_name!(%{
+      temporary_name: nil
+    })
+  end
+
  def get_filtered_labels(labels, true) when is_binary(labels) do
    labels
    |> Jason.decode!()
@@ -101,6 +115,11 @@ defmodule WandererApp.MapSystemRepo do
      system
      |> WandererApp.Api.MapSystem.update_tag(update)

+  def update_temporary_name(system, update) do
+      system
+      |> WandererApp.Api.MapSystem.update_temporary_name(update)
+  end
+
  def update_labels(system, update),
    do:
      system
--- a/lib/wanderer_app_web/controllers/api_controller.ex
+++ b/lib/wanderer_app_web/controllers/api_controller.ex
@@ -7,14 +7,49 @@ defmodule WandererAppWeb.APIController do
  alias WandererApp.MapSystemRepo
  alias WandererApp.MapCharacterSettingsRepo
  alias WandererApp.Api.Character
+  alias WandererApp.CachedInfo


 # -----------------------------------------------------------------
-# SYSTEMS
+# Common
+# -----------------------------------------------------------------
+
+  @doc """
+  GET /api/system-static-info
+
+  Requires 'id' (the solar_system_id)
+
+  Example:
+      GET /api/common/system_static?id=31002229
+      GET /api/common/system_static?id=31002229
+  """
+  def show_system_static(conn, params) do
+    with {:ok, solar_system_str} <- require_param(params, "id"),
+         {:ok, solar_system_id} <- parse_int(solar_system_str) do
+      case CachedInfo.get_system_static_info(solar_system_id) do
+        {:ok, system} ->
+          data = static_system_to_json(system)
+          json(conn, %{data: data})
+
+        {:error, :not_found} ->
+          conn
+          |> put_status(:not_found)
+          |> json(%{error: "System not found"})
+      end
+    else
+      {:error, msg} ->
+        conn
+        |> put_status(:bad_request)
+        |> json(%{error: msg})
+    end
+  end
+
+# -----------------------------------------------------------------
+# Map
 # -----------------------------------------------------------------

@doc """
-GET /api/systems
+GET /api/map/systems

 Requires either `?map_id=<UUID>` **OR** `?slug=<map-slug>` in the query params.

@@ -22,9 +57,9 @@ If `?all=true` is provided, **all** systems are returned.
 Otherwise, only "visible" systems are returned.

 Examples:
-    GET /api/systems?map_id=466e922b-e758-485e-9b86-afae06b88363
-    GET /api/systems?slug=my-unique-wormhole-map
-    GET /api/systems?map_id=<UUID>&all=true
+    GET /api/map/systems?map_id=466e922b-e758-485e-9b86-afae06b88363
+    GET /api/map/systems?slug=my-unique-wormhole-map
+    GET /api/map/systems?map_id=<UUID>&all=true
 """
 def list_systems(conn, params) do
  with {:ok, map_id} <- fetch_map_id(params) do
@@ -56,14 +91,14 @@ end


  @doc """
-  GET /api/system
+  GET /api/map/system

  Requires 'id' (the solar_system_id)
  plus either ?map_id=<UUID> or ?slug=<map-slug>.

  Example:
-      GET /api/system?id=31002229&map_id=466e922b-e758-485e-9b86-afae06b88363
-      GET /api/system?id=31002229&slug=my-unique-wormhole-map
+      GET /api/map/system?id=31002229&map_id=466e922b-e758-485e-9b86-afae06b88363
+      GET /api/map/system?id=31002229&slug=my-unique-wormhole-map
  """
  def show_system(conn, params) do
    with {:ok, solar_system_str} <- require_param(params, "id"),
@@ -87,16 +122,14 @@ end
    end
  end

-  # -----------------------------------------------------------------
-  # Characters
-  # -----------------------------------------------------------------
+

  @doc """
-  GET /api/tracked_characters_with_info
+  GET /api/map/tracked_characters_with_info

  Example usage:
-    GET /api/tracked_characters_with_info?map_id=<uuid>
-    GET /api/tracked_characters_with_info?slug=<map-slug>
+    GET /api/map/tracked_characters_with_info?map_id=<uuid>
+    GET /api/map/tracked_characters_with_info?slug=<map-slug>

  Returns a list of tracked records, plus their fully-loaded `character` data.
  """
@@ -211,38 +244,65 @@ end
  end

  defp map_system_to_json(system) do
-    %{
-      id: system.id,
-      map_id: system.map_id,
-      solar_system_id: system.solar_system_id,
-      name: system.name,
-      custom_name: system.custom_name,
-      description: system.description,
-      tag: system.tag,
-      labels: system.labels,
-      locked: system.locked,
-      visible: system.visible,
-      status: system.status,
-      position_x: system.position_x,
-      position_y: system.position_y,
-      inserted_at: system.inserted_at,
-      updated_at: system.updated_at
-    }
+    Map.take(system, [
+      :id,
+      :map_id,
+      :solar_system_id,
+      :name,
+      :custom_name,
+      :temporary_name,
+      :description,
+      :tag,
+      :labels,
+      :locked,
+      :visible,
+      :status,
+      :position_x,
+      :position_y,
+      :inserted_at,
+      :updated_at
+    ])
  end

  defp character_to_json(ch) do
-    %{
-      id: ch.id,
-      eve_id: ch.eve_id,
-      name: ch.name,
-      corporation_id: ch.corporation_id,
-      corporation_name: ch.corporation_name,
-      corporation_ticker: ch.corporation_ticker,
-      alliance_id: ch.alliance_id,
-      alliance_name: ch.alliance_name,
-      alliance_ticker: ch.alliance_ticker,
-      inserted_at: ch.inserted_at,
-      updated_at: ch.updated_at
-    }
+    Map.take(ch, [
+      :id,
+      :eve_id,
+      :name,
+      :corporation_id,
+      :corporation_name,
+      :corporation_ticker,
+      :alliance_id,
+      :alliance_name,
+      :alliance_ticker,
+      :inserted_at,
+      :updated_at
+    ])
  end
+
+
+  defp static_system_to_json(system) do
+    system
+    |> Map.take([
+      :solar_system_id,
+      :region_id,
+      :constellation_id,
+      :solar_system_name,
+      :solar_system_name_lc,
+      :constellation_name,
+      :region_name,
+      :system_class,
+      :security,
+      :type_description,
+      :class_title,
+      :is_shattered,
+      :effect_name,
+      :effect_power,
+      :statics,
+      :wandering,
+      :triglavian_invasion_status,
+      :sun_type_id
+    ])
+  end
+
 end
--- a/lib/wanderer_app_web/live/maps/event_handlers/map_systems_event_handler.ex
+++ b/lib/wanderer_app_web/live/maps/event_handlers/map_systems_event_handler.ex
@@ -231,6 +231,7 @@ defmodule WandererAppWeb.MapSystemsEventHandler do
        "labels" -> :update_system_labels
        "locked" -> :update_system_locked
        "tag" -> :update_system_tag
+        "temporary_name" -> :update_system_temporary_name
        "status" -> :update_system_status
        _ -> nil
      end
@@ -242,6 +243,7 @@ defmodule WandererAppWeb.MapSystemsEventHandler do
        "labels" -> :labels
        "locked" -> :locked
        "tag" -> :tag
+        "temporary_name" -> :temporary_name
        "status" -> :status
        _ -> :none
      end
--- a/lib/wanderer_app_web/live/maps/map_event_handler.ex
+++ b/lib/wanderer_app_web/live/maps/map_event_handler.ex
@@ -50,6 +50,7 @@ defmodule WandererAppWeb.MapEventHandler do
    "update_system_labels",
    "update_system_locked",
    "update_system_tag",
+    "update_system_temporary_name",
    "update_system_status"
  ]

@@ -244,6 +245,7 @@ defmodule WandererAppWeb.MapEventHandler do
          locked: locked,
          tag: tag,
          labels: labels,
+          temporary_name: temporary_name,
          status: status,
          visible: visible
        } = _system,
@@ -269,6 +271,7 @@ defmodule WandererAppWeb.MapEventHandler do
      locked: locked,
      status: status,
      tag: tag,
+      temporary_name: temporary_name,
      visible: visible
    }
  end
--- a/lib/wanderer_app_web/live/maps/maps_live.ex
+++ b/lib/wanderer_app_web/live/maps/maps_live.ex
@@ -682,7 +682,12 @@ defmodule WandererAppWeb.MapsLive do
      ) do
    options =
      options_form
-      |> Map.take(["layout", "store_custom_labels", "restrict_offline_showing"])
+      |> Map.take([
+        "layout",
+        "store_custom_labels",
+        "show_temp_system_name",
+        "restrict_offline_showing"
+      ])

    {:ok, updated_map} = WandererApp.MapRepo.update_options(map, options)

--- a/lib/wanderer_app_web/live/maps/maps_live.html.heex
+++ b/lib/wanderer_app_web/live/maps/maps_live.html.heex
@@ -371,6 +371,11 @@
                    field={f[:store_custom_labels]}
                    label="Store system custom labels"
                  />
+                  <.input
+                    type="checkbox"
+                    field={f[:show_temp_system_name]}
+                    label="Allow Temporary System Names"
+                  />
                  <.input
                    type="checkbox"
                    field={f[:restrict_offline_showing]}
--- a/lib/wanderer_app_web/router.ex
+++ b/lib/wanderer_app_web/router.ex
@@ -21,9 +21,10 @@ defmodule WandererAppWeb.Router do
  @frame_src if(@code_reloading, do: ~w('self'), else: ~w())
  @style_src ~w('self' 'unsafe-inline' https://fonts.googleapis.com)
  @img_src ~w('self' data: https://images.evetech.net https://web.ccpgamescdn.com https://images.ctfassets.net https://w.appzi.io)
-  @font_src ~w('self' data: https://web.ccpgamescdn.com https://w.appzi.io)
+  @font_src ~w('self' https://fonts.gstatic.com data: https://web.ccpgamescdn.com https://w.appzi.io )
  @script_src ~w('self' )

+
  pipeline :admin_bauth do
    plug :admin_basic_auth
  end
@@ -107,23 +108,36 @@ defmodule WandererAppWeb.Router do
  pipeline :api do
    plug(:accepts, ["json"])
    plug WandererAppWeb.Plugs.CheckApiDisabled
+  end
+
+  pipeline :api_map do
    plug WandererAppWeb.Plugs.CheckMapApiKey
  end

-  if not WandererApp.Env.public_api_disabled?() do
-    scope "/api", WandererAppWeb do
-      pipe_through [:api]
+scope "/api/map", WandererAppWeb do
+  pipe_through [:api_map]
+  pipe_through [:api]

-      # GET /api/systems?map_id=... or ?slug=...
-      get "/systems", APIController, :list_systems
+  # GET /api/map/systems?map_id=... or ?slug=...
+  get "/systems", APIController, :list_systems

-      # GET /api/system?id=... plus either map_id=... or slug=...
-      get "/system", APIController, :show_system
+  # GET /api/map/system-static-info?id=... plus either map_id=... or slug=...
+  get "/system-static-info", APIController, :show_system_static

-      # GET /api/characters?map_id=... or slug=...
-      get "/characters", APIController, :tracked_characters_with_info
-    end
-  end
+  # GET /api/map/system?id=... plus either map_id=... or slug=...
+  get "/system", APIController, :show_system
+
+  # GET /api/map/characters?map_id=... or slug=...
+  get "/characters", APIController, :tracked_characters_with_info
+end
+
+scope "/api/common", WandererAppWeb do
+  pipe_through [:api]
+
+  # GET /api/common/system-static-info?id=...
+  get "/system-static-info", APIController, :show_system_static
+
+end

  scope "/", WandererAppWeb do
    pipe_through [:browser, :blog, :redirect_if_user_is_authenticated]
--- a/mix.exs
+++ b/mix.exs
@@ -2,7 +2,8 @@ defmodule WandererApp.MixProject do
  use Mix.Project

  @source_url "https://github.com/wanderer-industries/wanderer"
-  @version "1.33.1"
+  
+  @version "1.37.5"

  def project do
    [
--- a/priv/posts/2025/01-05-map-public-api.md
+++ b/priv/posts/2025/01-05-map-public-api.md
@@ -20,20 +20,22 @@ As part of the Wanderer platform, a public API has been introduced to help users

 ## Authentication

-Each request to the Wanderer API must include a valid API key in the `Authorization` header. The format is:
+Each request to the Wanderer APIs that being with /api/map must include a valid API key in the `Authorization` header. The format is:

    Authorization: Bearer <YOUR_MAP_API_KEY>

 If the API key is missing or incorrect, you’ll receive a `401 Unauthorized` response.

+No api key is required for routes that being with /api/common
+
 ---

 ## Endpoints Overview

 ### 1. List Systems

-    GET /api/systems?map_id=<UUID>
-    GET /api/systems?slug=<map-slug>
+    GET /api/map/systems?map_id=<UUID>
+    GET /api/map/systems?slug=<map-slug>

 - **Description:** Retrieves a list of systems associated with the specified map (by `map_id` or `slug`).
 - **Authentication:** Required via `Authorization` header.
@@ -44,7 +46,7 @@ If the API key is missing or incorrect, you’ll receive a `401 Unauthorized` re

 #### Example Request
 ```
-    curl -H "Authorization: Bearer <REDACTED_TOKEN>" "https://wanderer.example.com/api/systems?slug=some-slug"
+    curl -H "Authorization: Bearer <REDACTED_TOKEN>" "https://wanderer.example.com/api/map/systems?slug=some-slug"
 ```
 #### Example Response
 ```
@@ -75,8 +77,8 @@ If the API key is missing or incorrect, you’ll receive a `401 Unauthorized` re

 ### 2. Show Single System

-    GET /api/system?id=<SOLAR_SYSTEM_ID>&map_id=<UUID>
-    GET /api/system?id=<SOLAR_SYSTEM_ID>&slug=<map-slug>
+    GET /api/map/system?id=<SOLAR_SYSTEM_ID>&map_id=<UUID>
+    GET /api/map/system?id=<SOLAR_SYSTEM_ID>&slug=<map-slug>

 - **Description:** Retrieves information for a specific system on the specified map. You must provide:
  - `id` (the `solar_system_id`).
@@ -85,7 +87,7 @@ If the API key is missing or incorrect, you’ll receive a `401 Unauthorized` re

 #### Example Request
 ```
-    curl -H "Authorization: Bearer <REDACTED_TOKEN>" "https://wanderer.example.com/api/system?id=<REDACTED_NUMBER>&slug=<REDACTED_SLUG>"
+    curl -H "Authorization: Bearer <REDACTED_TOKEN>" "https://wanderer.example.com/api/map/system?id=<REDACTED_NUMBER>&slug=<REDACTED_SLUG>"
 ```
 #### Example Response
 ```
@@ -111,17 +113,63 @@ If the API key is missing or incorrect, you’ll receive a `401 Unauthorized` re
 ```
 ---

+### 2. Show Single System Static Info
+
+    GET /api/common/static-system-info?id=<SOLAR_SYSTEM_ID>
+
+- **Description:** Retrieves the static information for a specific system.
+
+- **Authentication:** No API token required
+
+#### Example Request
+```
+    curl "https://wanderer.example.com/api/common/static-system-info?id=31002229
+```
+#### Example Response
+```
+{
+  "data": {
+    "solar_system_id": 31002229,
+    "triglavian_invasion_status": "Normal",
+    "solar_system_name": "J132946",
+    "system_class": 5,
+    "region_id": 11000028,
+    "constellation_id": 21000278,
+    "solar_system_name_lc": "j132946",
+    "constellation_name": "E-C00278",
+    "region_name": "E-R00028",
+    "security": "-1.0",
+    "type_description": "Class 5",
+    "class_title": "C5",
+    "is_shattered": false,
+    "effect_name": null,
+    "effect_power": 5,
+    "statics": [
+      "H296"
+    ],
+    "wandering": [
+      "D792",
+      "C140",
+      "Z142"
+    ],
+    "sun_type_id": 38
+  }
+}
+
+```
+---
+
 ### 3. List Tracked Characters

-    GET /api/characters?map_id=<UUID>
-    GET /api/characters?slug=<map-slug>
+    GET /api/map/characters?map_id=<UUID>
+    GET /api/map/characters?slug=<map-slug>

 - **Description:** Retrieves a list of tracked characters for the specified map (by `map_id` or `slug`), including metadata such as corporation/alliance details.
 - **Authentication:** Required via `Authorization` header.

 #### Example Request
 ```
-    curl -H "Authorization: Bearer <REDACTED_TOKEN>" "https://wanderer.example.com/api/characters?slug=some-slug"
+    curl -H "Authorization: Bearer <REDACTED_TOKEN>" "https://wanderer.example.com/api/map/characters?slug=some-slug"
 ```
 #### Example Response
 ```
--- a/priv/repo/migrations/20250103005559_add_temporary_name.exs
+++ b/priv/repo/migrations/20250103005559_add_temporary_name.exs
@@ -0,0 +1,21 @@
+defmodule WandererApp.Repo.Migrations.AddTemporaryName do
+  @moduledoc """
+  Updates resources based on their most recent snapshots.
+
+  This file was autogenerated with `mix ash_postgres.generate_migrations`
+  """
+
+  use Ecto.Migration
+
+  def up do
+    alter table(:map_system_v1) do
+      add :temporary_name, :text
+    end
+  end
+
+  def down do
+    alter table(:map_system_v1) do
+      remove :temporary_name
+    end
+  end
+end
Author	SHA1	Message	Date
CI	f2083f4256	chore: release version v1.37.5 Some checks are pending Build / 🚀 Deploy to test env (fly.io) (push) Waiting to run Details Build / 🛠 Build (1.17, 18.x, 27) (push) Waiting to run Details Build / 🛠 Build Docker Images (linux/amd64) (push) Blocked by required conditions Details Build / 🏷 Create Release (push) Blocked by required conditions Details	2025-01-09 19:09:14 +00:00
Aleksei Chichenkov	6c7bd5804e	Merge pull request #109 from guarzo/guarzo/themefixes fix: restore node styling, simplify framework for new themes	2025-01-09 22:08:47 +03:00
Gustav	483ae21e89	fix: restore node styling, simplify framework for new themes	2025-01-09 13:38:11 -05:00
CI	f734565844	chore: release version v1.37.4	2025-01-09 13:21:32 +00:00
CI	8c718ba181	chore: release version v1.37.3	2025-01-09 12:52:30 +00:00
Aleksei Chichenkov	c8d8734601	Merge pull request #108 from wanderer-industries/fix-dbclick fix(Map): Fixed dbclick behaviour	2025-01-09 15:51:16 +03:00
achichenkov	5c757e8255	fix(Map): Fixed dbclick behaviour	2025-01-09 15:50:03 +03:00
CI	82f90ef759	chore: release version v1.37.2 Some checks are pending Build / 🚀 Deploy to test env (fly.io) (push) Waiting to run Details Build / 🛠 Build (1.17, 18.x, 27) (push) Waiting to run Details Build / 🛠 Build Docker Images (linux/amd64) (push) Blocked by required conditions Details Build / 🏷 Create Release (push) Blocked by required conditions Details	2025-01-09 07:26:08 +00:00
Aleksei Chichenkov	167c8eea6b	Merge pull request #107 from guarzo/guarzo/theme-pathfinder fix: fix route color	2025-01-09 10:25:37 +03:00
Gustav	d76079d4c7	theme cleanup	2025-01-08 23:45:27 -05:00
Gustav	bf9c4cda02	route color fix	2025-01-08 23:44:12 -05:00
CI	af00402546	chore: release version v1.37.1 Some checks are pending Build / 🚀 Deploy to test env (fly.io) (push) Waiting to run Details Build / 🛠 Build (1.17, 18.x, 27) (push) Waiting to run Details Build / 🛠 Build Docker Images (linux/amd64) (push) Blocked by required conditions Details Build / 🏷 Create Release (push) Blocked by required conditions Details	2025-01-08 21:53:07 +00:00
Aleksei Chichenkov	a245842ca4	Merge pull request #106 from guarzo/guarzo/themes refactor: cleaned up scss classes, and updated theme dropdown to use declarative style	2025-01-09 00:52:36 +03:00
Gustav	8ddd672f13	fix: add back pathfinder theme font	2025-01-08 16:44:23 -05:00
Gustav	92f471c0b0	refactor: declarative dropdown for theme choice	2025-01-08 16:20:34 -05:00
Gustav	9e2a2c5b44	chore: clean up theme scss class usage	2025-01-08 16:20:25 -05:00
CI	5f5d3df003	chore: release version v1.37.0	2025-01-08 20:01:55 +00:00
Aleksei Chichenkov	c66cc8868e	Merge pull request #100 from guarzo/guarzo/themes feat: add theme selection, and pathfinder theme	2025-01-08 23:01:26 +03:00
guarzo	0d6528ce4f	Merge branch 'main' into guarzo/themes	2025-01-08 14:05:59 -05:00
CI	34c385ac5f	chore: release version v1.36.2 Some checks are pending Build / 🚀 Deploy to test env (fly.io) (push) Waiting to run Details Build / 🛠 Build (1.17, 18.x, 27) (push) Waiting to run Details Build / 🛠 Build Docker Images (linux/amd64) (push) Blocked by required conditions Details Build / 🏷 Create Release (push) Blocked by required conditions Details	2025-01-08 17:55:41 +00:00
Aleksei Chichenkov	b6d12e73a9	Merge pull request #105 from wanderer-industries/feat-wnd-104-fix-pasting fix(Map): Fixed pasting into Name, Custom Label and Description	2025-01-08 20:55:16 +03:00
achichenkov	1118858120	fix(Map): Fixed pasting into Name, Custom Label and Description	2025-01-08 20:35:57 +03:00
CI	ae3a34d5bf	chore: release version v1.36.1	2025-01-08 17:08:14 +00:00
Aleksei Chichenkov	43df42e49b	Merge pull request #102 from wanderer-industries/feat-signatures-ru fix(Map): Add support RU signatures and fix filtering	2025-01-08 20:07:43 +03:00
achichenkov	e670f3bf03	fix(Map): Removed unnecessary comment	2025-01-08 19:39:33 +03:00
achichenkov	c26a9404c5	fix(Map): Add support RU signatures and fix filtering	2025-01-08 12:46:56 +03:00
Gustav	c0fad4ca92	unused import	2025-01-07 18:44:49 -05:00
Gustav	16dbf9378b	feat: add theme selection and pathfinder theme	2025-01-07 18:44:46 -05:00
CI	4001fe5eac	chore: release version v1.36.0 Some checks are pending Build / 🚀 Deploy to test env (fly.io) (push) Waiting to run Details Build / 🛠 Build (1.17, 18.x, 27) (push) Waiting to run Details Build / 🛠 Build Docker Images (linux/amd64) (push) Blocked by required conditions Details Build / 🏷 Create Release (push) Blocked by required conditions Details	2025-01-07 23:28:11 +00:00
guarzo	2992dd8f8b	feat: added static system info to api (#101 ) * feat: added static system info to api	2025-01-08 03:27:44 +04:00
CI	98a03d1e59	chore: release version v1.35.0	2025-01-07 23:05:04 +00:00
guarzo	2088393c79	feat(Map): add "temporary system names" toggle (#86 ) If enabled and set, a temporary name is displayed instead of the system name. The original system name appears on a secondary row if no custom name exists. Temporary names are removed when the system is removed from the map.	2025-01-08 03:04:36 +04:00