fix(Map): removed unnecessary hooks styles

fix(Map): Fixed a lot of design and architect issues after last million PRs
2025-11-25 10:34:42 +00:00 · 2025-02-08 20:45:42 +03:00 · 2025-02-08 20:33:27 +03:00
264 changed files with 3850 additions and 16495 deletions
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -1,12 +1,7 @@
 {
  "name": "wanderer-dev",
  "dockerComposeFile": ["./docker-compose.yml"],
-  "extensions": [
-    "jakebecker.elixir-ls",
-    "JakeBecker.elixir-ls",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
-  ],
+  "extensions": ["jakebecker.elixir-ls"],
  "service": "wanderer",
  "workspaceFolder": "/app",
  "shutdownAction": "stopCompose",
--- a/.env.example
+++ b/.env.example
@@ -7,5 +7,4 @@ export EVE_CLIENT_WITH_WALLET_SECRET="<EVE_CLIENT_WITH_WALLET_SECRET>"
 export GIT_SHA="1111"
 export WANDERER_INVITES="false"
 export WANDERER_PUBLIC_API_DISABLED="false"
-export WANDERER_CHARACTER_API_DISABLED="false"
 export WANDERER_ZKILL_PRELOAD_DISABLED="false"
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -1,6 +1,8 @@
 name: Build

 on:
+  pull_request:
+    types: [opened, synchronize, reopened, labeled, unlabeled]
  push:
    branches:
      - main
@@ -39,28 +41,8 @@ jobs:
        env:
          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

-  manual-approval:
-    name: Manual Approval
-    runs-on: ubuntu-latest
-    needs: deploy-test
-    if: success()
-
-    permissions:
-      issues: write
-
-    steps:
-      - name: Await Manual Approval
-        uses: trstringer/manual-approval@v1
-        with:
-          secret: ${{ github.TOKEN }}
-          approvers: DmitryPopov
-          minimum-approvals: 1
-          issue-title: "Manual Approval Required for Release"
-          issue-body: "Please approve or deny the deployment."
-
  build:
    name: 🛠 Build
-    needs: manual-approval
    runs-on: ubuntu-22.04
    if: ${{ (github.ref == 'refs/heads/main') && github.event_name == 'push' }}
    permissions:
@@ -158,6 +140,7 @@ jobs:
        platform:
          - linux/amd64
          - linux/arm64
+          - linux/arm64/v8
    steps:
      - name: Prepare
        run: |
--- a/.gitignore
+++ b/.gitignore
@@ -26,7 +26,6 @@

 .env
 *.local.env
-test/manual/.auto*

 .direnv/
 .cache/
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,345 +2,6 @@

 <!-- changelog -->

-## [v1.55.2](https://github.com/wanderer-industries/wanderer/compare/v1.55.1...v1.55.2) (2025-03-16)
-
-
-
-
-### Bug Fixes:
-
-* Core: fixed lazy delete reset state
-
-## [v1.55.1](https://github.com/wanderer-industries/wanderer/compare/v1.55.0...v1.55.1) (2025-03-16)
-
-
-
-
-### Bug Fixes:
-
-* Core: fixed lazy delete timeouts
-
-* Core: fixed lazy delete settings
-
-* keep character api off by default (#258)
-
-## [v1.55.0](https://github.com/wanderer-industries/wanderer/compare/v1.54.1...v1.55.0) (2025-03-15)
-
-
-
-
-### Features:
-
-* News: added map subscription news
-
-* Api: added map audit base API. Added comments server validations.
-
-* enhance character activty and summmarize by user (#206)
-
-* enhance character activty and summmarize by user (#206)
-
-### Bug Fixes:
-
-* Core: updated balance top up instructions
-
-* updated connections cleanup logic
-
-* removed placeholder favicon (#240)
-
-* fixed activity aggregation and new user tracking (#230)
-
-* fixed activity aggregation and new user tracking (#230)
-
-* fixed activity aggregation and new user tracking (#230)
-
-* fixed activity aggregation and new user tracking (#230)
-
-## [v1.54.1](https://github.com/wanderer-industries/wanderer/compare/v1.54.0...v1.54.1) (2025-03-06)
-
-
-
-
-### Bug Fixes:
-
-* fix scroll and size issues with kills widget (#219)
-
-* fix scroll and size issues with kills widget
-
-## [v1.54.0](https://github.com/wanderer-industries/wanderer/compare/v1.53.4...v1.54.0) (2025-03-05)
-
-
-
-
-### Features:
-
-* added auto-refresh timeout for cloud new version updates
-
-* add selectable sig deletion timing, and color options (#208)
-
-## [v1.53.4](https://github.com/wanderer-industries/wanderer/compare/v1.53.3...v1.53.4) (2025-03-04)
-
-
-
-
-### Bug Fixes:
-
-* add retry on kills retrieval (#207)
-
-* add missing masses to wh sizes const (#215)
-
-## [v1.53.3](https://github.com/wanderer-industries/wanderer/compare/v1.53.2...v1.53.3) (2025-02-27)
-
-
-
-
-### Bug Fixes:
-
-* Map: little bit up performance for windows manager
-
-## [v1.53.2](https://github.com/wanderer-industries/wanderer/compare/v1.53.1...v1.53.2) (2025-02-27)
-
-
-
-
-## [v1.53.1](https://github.com/wanderer-industries/wanderer/compare/v1.53.0...v1.53.1) (2025-02-26)
-
-
-
-
-### Bug Fixes:
-
-* Core: Fixed map ACLs add/remove behaviour
-
-## [v1.53.0](https://github.com/wanderer-industries/wanderer/compare/v1.52.8...v1.53.0) (2025-02-26)
-
-
-
-
-### Features:
-
-* Auto-set connection EOL status and ship size when linking/editing signatures (#194)
-
-* Automatically set connection EOL status and ship size type when linking/updating signatures
-
-## [v1.52.8](https://github.com/wanderer-industries/wanderer/compare/v1.52.7...v1.52.8) (2025-02-26)
-
-
-
-
-### Bug Fixes:
-
-* Map: Added delete systems hotkey
-
-## [v1.52.7](https://github.com/wanderer-industries/wanderer/compare/v1.52.6...v1.52.7) (2025-02-24)
-
-
-
-
-### Bug Fixes:
-
-* update news image link (#204)
-
-* Map: Block map events for old client versions
-
-## [v1.52.6](https://github.com/wanderer-industries/wanderer/compare/v1.52.5...v1.52.6) (2025-02-23)
-
-
-
-
-### Bug Fixes:
-
-* Map: Fixed delete systems on map changes
-
-## [v1.52.5](https://github.com/wanderer-industries/wanderer/compare/v1.52.4...v1.52.5) (2025-02-22)
-
-
-
-
-### Bug Fixes:
-
-* Map: Fixed delete system on signature deletion
-
-* Map: Fixed delete system on signature deletion
-
-## [v1.52.4](https://github.com/wanderer-industries/wanderer/compare/v1.52.3...v1.52.4) (2025-02-21)
-
-
-
-
-### Bug Fixes:
-
-* signature paste for russian lang
-
-## [v1.52.3](https://github.com/wanderer-industries/wanderer/compare/v1.52.2...v1.52.3) (2025-02-21)
-
-
-
-
-### Bug Fixes:
-
-* remove signature expiration (#196)
-
-## [v1.52.2](https://github.com/wanderer-industries/wanderer/compare/v1.52.1...v1.52.2) (2025-02-21)
-
-
-
-
-### Bug Fixes:
-
-* prevent constant full signature widget rerender (#195)
-
-## [v1.52.1](https://github.com/wanderer-industries/wanderer/compare/v1.52.0...v1.52.1) (2025-02-20)
-
-
-
-
-### Bug Fixes:
-
-* proper virtual scroller usage (#192)
-
-* restore delete key functionality for nodes (#191)
-
-## [v1.52.0](https://github.com/wanderer-industries/wanderer/compare/v1.51.3...v1.52.0) (2025-02-19)
-
-
-
-
-### Features:
-
-* Map: Added map characters view
-
-## [v1.51.3](https://github.com/wanderer-industries/wanderer/compare/v1.51.2...v1.51.3) (2025-02-19)
-
-
-
-
-### Bug Fixes:
-
-* pending deletion working again (#185)
-
-## [v1.51.2](https://github.com/wanderer-industries/wanderer/compare/v1.51.1...v1.51.2) (2025-02-18)
-
-
-
-
-## [v1.51.1](https://github.com/wanderer-industries/wanderer/compare/v1.51.0...v1.51.1) (2025-02-18)
-
-
-
-
-## [v1.51.0](https://github.com/wanderer-industries/wanderer/compare/v1.50.0...v1.51.0) (2025-02-17)
-
-
-
-
-### Features:
-
-* add undo deletion for signatures (#155)
-
-* add undo for signature deletion and addition
-
-## [v1.50.0](https://github.com/wanderer-industries/wanderer/compare/v1.49.0...v1.50.0) (2025-02-17)
-
-
-
-
-### Features:
-
-* allow addition of characters to acl without preregistration (#176)
-
-## [v1.49.0](https://github.com/wanderer-industries/wanderer/compare/v1.48.1...v1.49.0) (2025-02-15)
-
-
-
-
-### Features:
-
-* add api for acl management (#171)
-
-## [v1.48.1](https://github.com/wanderer-industries/wanderer/compare/v1.48.0...v1.48.1) (2025-02-13)
-
-
-
-
-## [v1.48.0](https://github.com/wanderer-industries/wanderer/compare/v1.47.6...v1.48.0) (2025-02-12)
-
-
-
-
-### Features:
-
-* autosize local character tooltip and increase hover target (#165)
-
-## [v1.47.6](https://github.com/wanderer-industries/wanderer/compare/v1.47.5...v1.47.6) (2025-02-12)
-
-
-
-
-## [v1.47.5](https://github.com/wanderer-industries/wanderer/compare/v1.47.4...v1.47.5) (2025-02-12)
-
-
-
-
-### Bug Fixes:
-
-* sync kills count bookmark and the kills widget (#160)
-
-* lazy load kills widget
-
-## [v1.47.4](https://github.com/wanderer-industries/wanderer/compare/v1.47.3...v1.47.4) (2025-02-11)
-
-
-
-
-## [v1.47.3](https://github.com/wanderer-industries/wanderer/compare/v1.47.2...v1.47.3) (2025-02-11)
-
-
-
-
-## [v1.47.2](https://github.com/wanderer-industries/wanderer/compare/v1.47.1...v1.47.2) (2025-02-11)
-
-
-
-
-### Bug Fixes:
-
-* lazy load kills widget (#157)
-
-* lazy load kills widget
-
-* updates for eslint and pr feedback
-
-## [v1.47.1](https://github.com/wanderer-industries/wanderer/compare/v1.47.0...v1.47.1) (2025-02-09)
-
-
-
-
-### Bug Fixes:
-
-* Connections: Fixed connections auto-refresh after update
-
-## [v1.47.0](https://github.com/wanderer-industries/wanderer/compare/v1.46.1...v1.47.0) (2025-02-09)
-
-
-
-
-### Features:
-
-* Map: Added check for active map subscription to using Map APIs
-
-## [v1.46.1](https://github.com/wanderer-industries/wanderer/compare/v1.46.0...v1.46.1) (2025-02-09)
-
-
-
-
-### Bug Fixes:
-
-* Map: Fixed a lot of design and architect issues after last milliâ¦ (#154)
-
-* Map: Fixed a lot of design and architect issues after last million PRs
-
-* Map: removed unnecessary hooks styles
-
 ## [v1.46.0](https://github.com/wanderer-industries/wanderer/compare/v1.45.5...v1.46.0) (2025-02-08)


--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -936,66 +936,3 @@ body > div:first-of-type {
  width: 16px;
  height: 16px;
 }
-
-.verticalTabsContainer {
-  display: flex;
-  width: 100%;
-  min-height: 300px;
-}
-.verticalTabsContainer .p-tabview {
-  width: 100%;
-  display: flex;
-  align-items: flex-start;
-}
-.verticalTabsContainer .p-tabview-panels {
-  padding: 6px 1rem !important;
-  flex-grow: 1;
-  height: 100%;
-}
-.verticalTabsContainer .p-tabview-nav-container {
-  border-right: none;
-  height: 100%;
-}
-.verticalTabsContainer .p-tabview-nav {
-  flex-direction: column;
-  width: 150px;
-  min-height: 100%;
-  border: none;
-}
-.verticalTabsContainer .p-tabview-nav li {
-  width: 100%;
-  border-right: 4px solid var(--surface-hover);
-  background-color: var(--surface-card);
-  transition:
-    background-color 200ms,
-    border-right-color 200ms;
-}
-.verticalTabsContainer .p-tabview-nav li:hover {
-  background-color: var(--surface-hover);
-  border-right: 4px solid var(--surface-100);
-}
-.verticalTabsContainer .p-tabview-nav li .p-tabview-nav-link {
-  transition: color 200ms;
-  justify-content: flex-end;
-  padding: 10px;
-  background-color: initial;
-  border: none;
-  color: var(--gray-400);
-  border-radius: initial;
-  font-weight: 400;
-  margin: 0;
-}
-.verticalTabsContainer .p-tabview-nav li.p-tabview-selected {
-  background-color: var(--surface-50);
-  border-right: 4px solid var(--primary-color);
-}
-.verticalTabsContainer .p-tabview-nav li.p-tabview-selected .p-tabview-nav-link {
-  font-weight: 600;
-  color: var(--primary-color);
-}
-.verticalTabsContainer .p-tabview-nav li.p-tabview-selected:hover {
-  border-right: 4px solid var(--primary-color);
-}
-.verticalTabsContainer .p-tabview-panel {
-  flex-grow: 1;
-}
--- a/assets/js/hooks/Mapper/common-styles/fixes.scss
+++ b/assets/js/hooks/Mapper/common-styles/fixes.scss
@@ -67,22 +67,16 @@
  }
 }

-.p-datatable-thead {
-  th, th.p-sortable-column {
-    font-size: 12px;
-    font-weight: bold;
-    padding: 3px 4px;
-  }
+.p-sortable-column {
+  font-size: 12px;
+  font-weight: bold;
+  padding: 3px 4px;
 }

 .p-selectable-row td {
  padding: 4px 4px;
 }

-.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
-  padding: 3px 4px;
-}
-
 .p-sortable-column > .p-column-header-content > span:last-child {
  transform: scale(0.7);

--- a/assets/js/hooks/Mapper/common-styles/prime-fixes/fix-popup.scss
+++ b/assets/js/hooks/Mapper/common-styles/prime-fixes/fix-popup.scss
@@ -1,45 +0,0 @@
-.p-confirm-popup {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  @apply p-[12px];
-
-  &::before, &::after {
-    display: none;
-  }
-
-  .p-confirm-popup-content, .p-confirm-popup-footer {
-    @apply p-0 m-0;
-  }
-
-  .p-confirm-popup-content {
-    display: flex;
-    gap: 6px;
-  }
-
-  .p-confirm-popup-footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: 4px;
-  }
-
-  .p-confirm-popup-icon {
-    font-size: 14px;
-  }
-
-  .p-confirm-popup-message {
-    @apply m-0;
-    font-size: 12px;
-  }
-
-  .p-confirm-popup-reject.p-button-sm,
-  .p-confirm-popup-accept.p-button-sm {
-    @apply px-1.5 py-1 m-0;
-
-    & > span {
-      font-size: 12px;
-      line-height: 12px;
-    }
-  }
-
-}
--- a/assets/js/hooks/Mapper/common-styles/prime-fixes/index.scss
+++ b/assets/js/hooks/Mapper/common-styles/prime-fixes/index.scss
@@ -1,5 +1,4 @@
@import "fix-dialog";
-@import "fix-popup";
 //@import "fix-input";

 //@import "theme";
--- a/assets/js/hooks/Mapper/components/map/Map.tsx
+++ b/assets/js/hooks/Mapper/components/map/Map.tsx
@@ -2,6 +2,7 @@ import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo }
 import ReactFlow, {
  Background,
  Edge,
+  EdgeChange,
  MiniMap,
  Node,
  NodeChange,
@@ -78,12 +79,12 @@ const edgeTypes = {
  floating: SolarSystemEdge,
 };

-export const MAP_ROOT_ID = 'MAP_ROOT_ID';
-
 interface MapCompProps {
  refn: ForwardedRef<MapHandlers>;
  onCommand: OutCommandHandler;
  onSelectionChange: OnMapSelectionChange;
+  onManualDelete(systems: string[]): void;
+  canRemoveConnection?(connectionId: string): boolean;
  onConnectionInfoClick?(e: SolarSystemConnection): void;
  onAddSystem?: OnMapAddSystemCallback;
  onSelectionContextMenu?: NodeSelectionMouseHandler;
@@ -105,6 +106,7 @@ const MapComp = ({
  onSystemContextMenu,
  onConnectionInfoClick,
  onSelectionContextMenu,
+  onManualDelete,
  isShowMinimap,
  showKSpaceBG,
  isThickConnections,
@@ -112,8 +114,9 @@ const MapComp = ({
  isSoftBackground,
  theme,
  onAddSystem,
+  canRemoveConnection,
 }: MapCompProps) => {
-  const { getNodes } = useReactFlow();
+  const { getEdge, getNode, getNodes } = useReactFlow();
  const [nodes, , onNodesChange] = useNodesState<Node<SolarSystemRawType>>(initialNodes);
  const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>>(initialEdges);

@@ -186,6 +189,8 @@ const MapComp = ({

  const handleNodesChange = useCallback(
    (changes: NodeChange[]) => {
+      const systemsIdsToRemove: string[] = [];
+
      // prevents single node deselection on background / same node click
      // allows deseletion of all nodes if multiple are currently selected
      if (changes.length === 1 && changes[0].type == 'select' && changes[0].selected === false) {
@@ -193,12 +198,64 @@ const MapComp = ({
      }

      const nextChanges = changes.reduce((acc, change) => {
+        if (change.type !== 'remove') {
+          return [...acc, change];
+        }
+
+        const node = getNode(change.id);
+        if (!node) {
+          return [...acc, change];
+        }
+
+        if (node.data.locked) {
+          return acc;
+        }
+
+        systemsIdsToRemove.push(node.data.id);
        return [...acc, change];
      }, [] as NodeChange[]);

+      if (systemsIdsToRemove.length > 0) {
+        onManualDelete(systemsIdsToRemove);
+      }
+
      onNodesChange(nextChanges);
    },
-    [getNodes, onNodesChange],
+    [getNode, getNodes, onManualDelete, onNodesChange],
+  );
+
+  const handleEdgesChange = useCallback(
+    (changes: EdgeChange[]) => {
+      const nextChanges = changes.reduce((acc, change) => {
+        if (change.type !== 'remove') {
+          return [...acc, change];
+        }
+
+        if (canRemoveConnection?.(change.id)) {
+          return [...acc, change];
+        }
+
+        const edge = getEdge(change.id);
+        if (!edge) {
+          return [...acc, change];
+        }
+
+        const sourceNode = getNode(edge.source);
+        const targetNode = getNode(edge.target);
+        if (!sourceNode || !targetNode) {
+          return [...acc, change];
+        }
+
+        if (sourceNode.data.locked || targetNode.data.locked) {
+          return acc;
+        }
+
+        return [...acc, change];
+      }, [] as EdgeChange[]);
+
+      onEdgesChange(nextChanges);
+    },
+    [canRemoveConnection, getEdge, getNode, onEdgesChange],
  );

  useEffect(() => {
@@ -211,15 +268,12 @@ const MapComp = ({

  return (
    <>
-      <div
-        data-window-id={MAP_ROOT_ID}
-        className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}
-      >
+      <div className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}>
        <ReactFlow
          nodes={nodes}
          edges={edges}
          onNodesChange={handleNodesChange}
-          onEdgesChange={onEdgesChange}
+          onEdgesChange={handleEdgesChange}
          onConnect={onConnect}
          // TODO we need save into session all of this
          //      and on any action do either
@@ -258,7 +312,7 @@ const MapComp = ({
          minZoom={0.2}
          maxZoom={1.5}
          elevateNodesOnSelect
-          deleteKeyCode={['']}
+          deleteKeyCode={['Delete']}
          {...(isPanAndDrag
            ? {
                selectionOnDrag: true,
--- a/assets/js/hooks/Mapper/components/map/MapProvider.tsx
+++ b/assets/js/hooks/Mapper/components/map/MapProvider.tsx
@@ -37,7 +37,7 @@ const INITIAL_DATA: MapData = {
  userPermissions: {},
  systemSignatures: {} as Record<string, SystemSignature[]>,
  options: {} as Record<string, string | boolean>,
-  isSubscriptionActive: false,
+  is_subscription_active: false,
 };

 export interface MapContextProps {
@@ -53,7 +53,7 @@ const MapContext = createContext<MapContextProps>({
  outCommand: async () => void 0,
 });

-export const MapProvider = ({ children, onCommand }: MapProviderProps) => {
+export const MapProvider: React.FC<MapProviderProps> = ({ children, onCommand }) => {
  const { update, ref } = useContextStore<MapData>({ ...INITIAL_DATA });

  return (
--- a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.tsx
@@ -2,6 +2,7 @@ import React, { RefObject, useMemo } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
 import { PrimeIcons } from 'primereact/api';
 import { MenuItem } from 'primereact/menuitem';
+import { Edge } from '@reactflow/core/dist/esm/types/edges';
 import { ConnectionType, MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
 import clsx from 'clsx';
 import classes from './ContextMenuConnection.module.scss';
@@ -13,7 +14,6 @@ import {
  SHIP_SIZES_NAMES_SHORT,
  SHIP_SIZES_SIZE,
 } from '@/hooks/Mapper/components/map/constants.ts';
-import { Edge } from 'reactflow';

 export interface ContextMenuConnectionProps {
  contextMenuRef: RefObject<ContextMenu>;
--- a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/useContextMenuConnectionHandlers.ts
+++ b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/useContextMenuConnectionHandlers.ts
@@ -1,8 +1,9 @@
-import { Edge, EdgeMouseHandler } from 'reactflow';
+import { EdgeMouseHandler } from 'reactflow';
 import { useCallback, useRef, useState } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
 import { useMapState } from '../../MapProvider.tsx';
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
+import { Edge } from '@reactflow/core/dist/esm/types/edges';
 import { ConnectionType, MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';

--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemKillsCounter.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemKillsCounter.tsx
@@ -1,11 +1,7 @@
-import React, { useMemo } from 'react';
 import { SystemKillsContent } from '../../../mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent';
 import { useKillsCounter } from '../../hooks/useKillsCounter';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
-import { WithChildren, WithClassName } from '@/hooks/Mapper/types/common';
-
-const ITEM_HEIGHT = 35;
-const MIN_TOOLTIP_HEIGHT = 40;
+import { WithChildren, WithClassName } from '@/hooks/Mapper/types/common.ts';

 type TooltipSize = 'xs' | 'sm' | 'md' | 'lg';

@@ -19,45 +15,16 @@ type KillsBookmarkTooltipProps = {
  WithClassName;

 export const KillsCounter = ({ killsCount, systemId, className, children, size = 'xs' }: KillsBookmarkTooltipProps) => {
-  const {
-    isLoading,
-    kills: detailedKills,
-    systemNameMap,
-  } = useKillsCounter({
-    realSystemId: systemId,
-  });
+  const { isLoading, kills: detailedKills, systemNameMap } = useKillsCounter({ realSystemId: systemId });

-  const limitedKills = useMemo(() => {
-    if (!detailedKills || detailedKills.length === 0) return [];
-    return detailedKills.slice(0, killsCount);
-  }, [detailedKills, killsCount]);
-
-  if (!killsCount || limitedKills.length === 0 || !systemId || isLoading) {
-    return null;
-  }
-
-  // Calculate height based on number of kills, but ensure a minimum height
-  const killsNeededHeight = limitedKills.length * ITEM_HEIGHT;
-  // Add a small buffer (10px) to prevent scrollbar from appearing unnecessarily
-  const tooltipHeight = Math.max(MIN_TOOLTIP_HEIGHT, Math.min(killsNeededHeight + 10, 500));
+  if (!killsCount || detailedKills.length === 0 || !systemId || isLoading) return null;

  const tooltipContent = (
-    <div
-      style={{
-        width: '400px',
-        height: `${tooltipHeight}px`,
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-      className="overflow-hidden"
-    >
-      <div className="flex-1 h-full">
-        <SystemKillsContent kills={limitedKills} systemNameMap={systemNameMap} onlyOneSystem />
-      </div>
-    </div>
+    <SystemKillsContent kills={detailedKills} systemNameMap={systemNameMap} compact={true} onlyOneSystem={true} />
  );

  return (
+    // @ts-ignore
    <WdTooltipWrapper content={tooltipContent} className={className} size={size} interactive={true}>
      {children}
    </WdTooltipWrapper>
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemLocalCounter.module.scss
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemLocalCounter.module.scss
@@ -4,12 +4,6 @@
  z-index: 3;
 }

-.hoverTarget {
-  padding: 0.5rem;
-  margin: -0.5rem;
-  display: inline-block;
-}
-
 .localCounter {
  mix-blend-mode: screen;
  display: flex;
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemLocalCounter.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemLocalCounter.tsx
@@ -24,12 +24,13 @@ export const LocalCounter = ({ localCounterCharacters, hasUserCharacters, showIc
    return (
      <div
        style={{
-          width: '100%',
-          minWidth: '300px',
-          overflow: 'hidden',
+          width: '300px',
+          overflowX: 'hidden',
+          overflowY: 'auto',
+          height: '300px',
        }}
      >
-        <LocalCharactersList items={localCounterCharacters} itemTemplate={itemTemplate} itemSize={26} autoSize={true} />
+        <LocalCharactersList items={localCounterCharacters} itemTemplate={itemTemplate} itemSize={26} />
      </div>
    );
  }, [localCounterCharacters, itemTemplate]);
@@ -44,16 +45,19 @@ export const LocalCounter = ({ localCounterCharacters, hasUserCharacters, showIc
        [classes.Pathfinder]: theme === AvailableThemes.pathfinder,
      })}
    >
-      <WdTooltipWrapper content={pilotTooltipContent} position={TooltipPosition.right} offset={0} interactive={true}>
-        <div className={clsx(classes.hoverTarget)}>
-          <div
-            className={clsx(classes.localCounter, {
-              [classes.hasUserCharacters]: hasUserCharacters,
-            })}
-          >
-            {showIcon && <i className="pi pi-users" />}
-            <span>{localCounterCharacters.length}</span>
-          </div>
+      <WdTooltipWrapper
+        // @ts-ignore
+        content={pilotTooltipContent}
+        position={TooltipPosition.right}
+        offset={0}
+      >
+        <div
+          className={clsx(classes.localCounter, {
+            [classes.hasUserCharacters]: hasUserCharacters,
+          })}
+        >
+          {showIcon && <i className="pi pi-users" />}
+          <span>{localCounterCharacters.length}</span>
        </div>
      </WdTooltipWrapper>
    </div>
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.module.scss
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.module.scss
@@ -90,7 +90,11 @@ $tooltip-bg: #202020;

  &.eve-system-status-home {
    border: 1px solid var(--eve-solar-system-status-color-home-dark30);
-    background-image: linear-gradient(45deg, var(--eve-solar-system-status-color-background), transparent);
+    background-image: linear-gradient(
+      45deg,
+      var(--eve-solar-system-status-color-background),
+      transparent
+    );
    &.selected {
      border-color: var(--eve-solar-system-status-color-home);
    }
@@ -98,7 +102,11 @@ $tooltip-bg: #202020;

  &.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);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-friendly-dark30),
+      transparent
+    );
    &.selected {
      border-color: var(--eve-solar-system-status-color-friendly-dark5);
    }
@@ -113,15 +121,27 @@ $tooltip-bg: #202020;
  }

  &.eve-system-status-warning {
-    background-image: linear-gradient(275deg, var(--eve-solar-system-status-warning), transparent);
+    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);
+    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);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-target),
+      transparent
+    );
  }
 }

@@ -234,7 +254,7 @@ $tooltip-bg: #202020;
    font-size: 11px;
    font-weight: 500;
    text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
-    color: var(--rf-tag-color, #38bdf8);
+    color: var(--rf-tag-color, #38BDF8);
  }

  /* Firefox kostyl */
@@ -243,6 +263,7 @@ $tooltip-bg: #202020;
      font-weight: bold;
    }
  }
+
 }

 .BottomRow {
@@ -355,3 +376,4 @@ $tooltip-bg: #202020;
    }
  }
 }
+
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.tsx
@@ -4,7 +4,7 @@ import { Handle, NodeProps, Position } from 'reactflow';
 import clsx from 'clsx';
 import classes from './SolarSystemNodeDefault.module.scss';
 import { PrimeIcons } from 'primereact/api';
-import { useLocalCounter, useSolarSystemNode, useNodeKillsCount } from '../../hooks';
+import { useLocalCounter, useSolarSystemNode } from '../../hooks/useSolarSystemLogic';
 import {
  EFFECT_BACKGROUND_STYLES,
  MARKER_BOOKMARK_BG_STYLES,
@@ -18,7 +18,6 @@ import { KillsCounter } from './SolarSystemKillsCounter';
 export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>) => {
  const nodeVars = useSolarSystemNode(props);
  const { localCounterCharacters } = useLocalCounter(nodeVars);
-  const localKillsCount = useNodeKillsCount(nodeVars.solarSystemId, nodeVars.killsCount);

  return (
    <>
@@ -36,9 +35,9 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
            </div>
          )}

-          {localKillsCount && localKillsCount > 0 && nodeVars.solarSystemId && (
+          {nodeVars.killsCount && nodeVars.killsCount > 0 && nodeVars.solarSystemId && (
            <KillsCounter
-              killsCount={localKillsCount}
+              killsCount={nodeVars.killsCount}
              systemId={nodeVars.solarSystemId}
              size="lg"
              killsActivityType={nodeVars.killsActivityType}
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeTheme.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeTheme.tsx
@@ -4,7 +4,7 @@ import { Handle, NodeProps, Position } from 'reactflow';
 import clsx from 'clsx';
 import classes from './SolarSystemNodeTheme.module.scss';
 import { PrimeIcons } from 'primereact/api';
-import { useLocalCounter, useNodeKillsCount, useSolarSystemNode } from '../../hooks';
+import { useLocalCounter, useSolarSystemNode } from '../../hooks/useSolarSystemLogic';
 import {
  EFFECT_BACKGROUND_STYLES,
  MARKER_BOOKMARK_BG_STYLES,
@@ -18,7 +18,6 @@ import { KillsCounter } from './SolarSystemKillsCounter';
 export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>) => {
  const nodeVars = useSolarSystemNode(props);
  const { localCounterCharacters } = useLocalCounter(nodeVars);
-  const localKillsCount = useNodeKillsCount(nodeVars.solarSystemId, nodeVars.killsCount);

  return (
    <>
@@ -36,9 +35,9 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
            </div>
          )}

-          {localKillsCount && localKillsCount > 0 && nodeVars.solarSystemId && (
+          {nodeVars.killsCount && nodeVars.killsCount > 0 && nodeVars.solarSystemId && (
            <KillsCounter
-              killsCount={localKillsCount}
+              killsCount={nodeVars.killsCount}
              systemId={nodeVars.solarSystemId}
              size="lg"
              killsActivityType={nodeVars.killsActivityType}
--- a/assets/js/hooks/Mapper/components/map/constants.ts
+++ b/assets/js/hooks/Mapper/components/map/constants.ts
@@ -322,9 +322,6 @@ export const WORMHOLES_ADDITIONAL_INFO: Record<string, WormholesAdditionalInfoTy
 export const WORMHOLES_ADDITIONAL_INFO_BY_CLASS_ID: Record<string, WormholesAdditionalInfoType> =
  WORMHOLES_ADDITIONAL_INFO_RAW.reduce((acc, x) => ({ ...acc, [x.wormholeClassID]: x }), {});

-export const WORMHOLES_ADDITIONAL_INFO_BY_SHORT_NAME: Record<string, WormholesAdditionalInfoType> =
-  WORMHOLES_ADDITIONAL_INFO_RAW.reduce((acc, x) => ({ ...acc, [x.shortName]: x }), {});
-
 // export const SOLAR_SYSTEM_CLASS_NAMES = {
 //   ccp1 =  ,
 //   c1 = ,
@@ -653,7 +650,6 @@ export enum LABELS {
  l3 = '3',
 }

-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const LABELS_INFO: Record<string, any> = {
  [LABELS.clear]: { id: 'clear', name: 'Clear', shortName: '', icon: '' },
  [LABELS.la]: { id: 'la', name: 'Label A', shortName: 'A', icon: '' },
@@ -754,17 +750,6 @@ export const SHIP_SIZES_SIZE = {
  [ShipSizeStatus.capital]: '2M',
 };

-export const SHIP_MASSES_SIZE: Record<number, ShipSizeStatus> = {
-  5_000_000: ShipSizeStatus.small,
-  62_000_000: ShipSizeStatus.medium,
-  300_000_000: ShipSizeStatus.large,
-  375_000_000: ShipSizeStatus.large,
-  1_000_000_000: ShipSizeStatus.freight,
-  1_350_000_000: ShipSizeStatus.capital,
-  1_800_000_000: ShipSizeStatus.capital,
-  2_000_000_000: ShipSizeStatus.capital,
-};
-
 export const SHIP_SIZES_DESCRIPTION = {
  [ShipSizeStatus.small]: 'Frigate wormhole - up to Destroyer | 5K t.',
  [ShipSizeStatus.medium]: 'Cruise wormhole - up to Battlecruiser | 62K t.',
--- a/assets/js/hooks/Mapper/components/map/helpers/convertSystem2Node.ts
+++ b/assets/js/hooks/Mapper/components/map/helpers/convertSystem2Node.ts
@@ -10,6 +10,5 @@ export const convertSystem2Node = (sys: SolarSystemRawType): Node => {
    position: sys.position,
    data: sys,
    draggable: !sys.locked,
-    deletable: !sys.locked,
  };
 };
--- a/assets/js/hooks/Mapper/components/map/hooks/index.ts
+++ b/assets/js/hooks/Mapper/components/map/hooks/index.ts
@@ -1,11 +1,3 @@
 export * from './useMapHandlers';
 export * from './useUpdateNodes';
 export * from './useNodesEdgesState';
-export * from './useBackgroundVars';
-export * from './useKillsCounter';
-export * from './useSystemName';
-export * from './useNodesEdgesState';
-export * from './useSolarSystemNode';
-export * from './useUnsplashedSignatures';
-export * from './useUpdateNodes';
-export * from './useNodeKillsCount';
--- a/assets/js/hooks/Mapper/components/map/hooks/useKillsCounter.ts
+++ b/assets/js/hooks/Mapper/components/map/hooks/useKillsCounter.ts
@@ -27,12 +27,13 @@ export function useKillsCounter({ realSystemId }: UseKillsCounterProps) {
  const filteredKills = useMemo(() => {
    if (!allKills || allKills.length === 0) return [];

-    // Sort kills by time, most recent first, but don't limit the number of kills
-    return [...allKills].sort((a, b) => {
-      const aTime = a.kill_time ? new Date(a.kill_time).getTime() : 0;
-      const bTime = b.kill_time ? new Date(b.kill_time).getTime() : 0;
-      return bTime - aTime;
-    });
+    return [...allKills]
+      .sort((a, b) => {
+        const aTime = a.kill_time ? new Date(a.kill_time).getTime() : 0;
+        const bTime = b.kill_time ? new Date(b.kill_time).getTime() : 0;
+        return bTime - aTime;
+      })
+      .slice(0, 10);
  }, [allKills]);

  return {
--- a/assets/js/hooks/Mapper/components/map/hooks/useLabelsInfo.ts
+++ b/assets/js/hooks/Mapper/components/map/hooks/useLabelsInfo.ts
@@ -1,31 +0,0 @@
-import { useMemo } from 'react';
-import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager';
-import { LABELS_INFO, LABELS_ORDER } from '@/hooks/Mapper/components/map/constants';
-interface UseLabelsInfoParams {
-  labels: string | null;
-  linkedSigPrefix: string | null;
-  isShowLinkedSigId: boolean;
-}
-
-export type LabelInfo = {
-  id: string;
-  shortName: string;
-};
-
-function sortedLabels(labels: string[]): LabelInfo[] {
-  if (!labels) return [];
-  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x] as LabelInfo);
-}
-
-export function useLabelsInfo({ labels, linkedSigPrefix, isShowLinkedSigId }: UseLabelsInfoParams) {
-  const labelsManager = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
-  const labelsInfo = useMemo(() => sortedLabels(labelsManager.list), [labelsManager]);
-  const labelCustom = useMemo(() => {
-    if (isShowLinkedSigId && linkedSigPrefix) {
-      return labelsManager.customLabel ? `${linkedSigPrefix}・${labelsManager.customLabel}` : linkedSigPrefix;
-    }
-    return labelsManager.customLabel;
-  }, [linkedSigPrefix, isShowLinkedSigId, labelsManager]);
-
-  return { labelsInfo, labelCustom };
-}
--- a/assets/js/hooks/Mapper/components/map/hooks/useMapHandlers.ts
+++ b/assets/js/hooks/Mapper/components/map/hooks/useMapHandlers.ts
@@ -131,21 +131,6 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
              // do nothing here
              break;

-            case Commands.characterActivityData:
-              break;
-
-            case Commands.trackingCharactersData:
-              break;
-
-            case Commands.updateActivity:
-              break;
-
-            case Commands.updateTracking:
-              break;
-
-            case Commands.userSettingsUpdated:
-              break;
-
            default:
              console.warn(`Map handlers: Unknown command: ${type}`, data);
              break;
--- a/assets/js/hooks/Mapper/components/map/hooks/useNodeKillsCount.ts
+++ b/assets/js/hooks/Mapper/components/map/hooks/useNodeKillsCount.ts
@@ -1,42 +0,0 @@
-import { useEffect, useState, useCallback } from 'react';
-import { useMapEventListener } from '@/hooks/Mapper/events';
-import { Commands } from '@/hooks/Mapper/types';
-
-interface Kill {
-  solar_system_id: number | string;
-  kills: number;
-}
-
-interface MapEvent {
-  name: Commands;
-  data?: any;
-  payload?: Kill[];
-}
-
-export function useNodeKillsCount(
-  systemId: number | string,
-  initialKillsCount: number | null
-): number | null {
-  const [killsCount, setKillsCount] = useState<number | null>(initialKillsCount);
-
-  useEffect(() => {
-    setKillsCount(initialKillsCount);
-  }, [initialKillsCount]);
-
-  const handleEvent = useCallback((event: MapEvent): boolean => {
-    if (event.name === Commands.killsUpdated && Array.isArray(event.payload)) {
-      const killForSystem = event.payload.find(
-        kill => kill.solar_system_id.toString() === systemId.toString()
-      );
-      if (killForSystem && typeof killForSystem.kills === 'number') {
-        setKillsCount(killForSystem.kills);
-      }
-      return true;
-    }
-    return false;
-  }, [systemId]);
-
-  useMapEventListener(handleEvent);
-
-  return killsCount;
-}
--- a/assets/js/hooks/Mapper/components/map/hooks/useSolarSystemLogic.tsx
+++ b/assets/js/hooks/Mapper/components/map/hooks/useSolarSystemLogic.tsx
@@ -7,12 +7,18 @@ 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 } from '@/hooks/Mapper/components/map/helpers';
+import { getSystemClassStyles, prepareUnsplashedChunks } from '@/hooks/Mapper/components/map/helpers';
 import { sortWHClasses } from '@/hooks/Mapper/helpers';
+import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager';
 import { CharacterTypeRaw, OutCommand, SystemSignature } from '@/hooks/Mapper/types';
-import { useUnsplashedSignatures } from './useUnsplashedSignatures';
-import { useSystemName } from './useSystemName';
-import { LabelInfo, useLabelsInfo } from './useLabelsInfo';
+import { LABELS_INFO, LABELS_ORDER } from '@/hooks/Mapper/components/map/constants';
+
+export type LabelInfo = {
+  id: string;
+  shortName: string;
+};
+
+export type UnsplashedSignatureType = SystemSignature & { sig_id: string };

 function getActivityType(count: number): string {
  if (count <= 5) return 'activityNormal';
@@ -27,6 +33,11 @@ const SpaceToClass: Record<string, string> = {
  [Spaces.Gallente]: 'Gallente',
 };

+function sortedLabels(labels: string[]): LabelInfo[] {
+  if (!labels) return [];
+  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x] as LabelInfo);
+}
+
 export function useLocalCounter(nodeVars: SolarSystemNodeVars) {
  const localCounterCharacters = useMemo(() => {
    return nodeVars.charactersInSystem
@@ -115,19 +126,21 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS

  const linkedSigPrefix = useMemo(() => (linkedSigEveId ? linkedSigEveId.split('-')[0] : null), [linkedSigEveId]);

-  const { labelsInfo, labelCustom } = useLabelsInfo({
-    labels,
-    linkedSigPrefix,
-    isShowLinkedSigId,
-  });
+  const labelsManager = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
+  const labelsInfo = useMemo(() => sortedLabels(labelsManager.list), [labelsManager]);
+  const labelCustom = useMemo(() => {
+    if (isShowLinkedSigId && linkedSigPrefix) {
+      return labelsManager.customLabel ? `${linkedSigPrefix}・${labelsManager.customLabel}` : linkedSigPrefix;
+    }
+    return labelsManager.customLabel;
+  }, [linkedSigPrefix, isShowLinkedSigId, labelsManager]);

  const killsCount = useMemo(() => kills[solar_system_id] ?? null, [kills, solar_system_id]);
  const killsActivityType = killsCount ? getActivityType(killsCount) : null;

-  const hasUserCharacters = useMemo(
-    () => charactersInSystem.some(x => userCharacters.includes(x.eve_id)),
-    [charactersInSystem, userCharacters],
-  );
+  const hasUserCharacters = useMemo(() => {
+    return charactersInSystem.some(x => userCharacters.includes(x.eve_id));
+  }, [charactersInSystem, userCharacters]);

  const dbClick = useDoubleClick(() => {
    outCommand({
@@ -139,19 +152,55 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
  const showHandlers = isConnecting || hoverNodeId === id;

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

-  const { systemName, computedTemporaryName, customName } = useSystemName({
-    isTempSystemNameEnabled,
-    temporary_name,
-    solar_system_name: solar_system_name || '',
-    isShowLinkedSigIdTempName,
-    linkedSigPrefix,
-    name,
-  });
+  const computedTemporaryName = useMemo(() => {
+    if (!isTempSystemNameEnabled) {
+      return '';
+    }
+    if (isShowLinkedSigIdTempName && linkedSigPrefix) {
+      return temporary_name ? `${linkedSigPrefix}・${temporary_name}` : `${linkedSigPrefix}・${solar_system_name}`;
+    }
+    return temporary_name;
+  }, [isShowLinkedSigIdTempName, isTempSystemNameEnabled, linkedSigPrefix, solar_system_name, temporary_name]);

-  const { unsplashedLeft, unsplashedRight } = useUnsplashedSignatures(systemSigs, isShowUnsplashedSignatures);
+  const systemName = useMemo(() => {
+    if (isTempSystemNameEnabled && computedTemporaryName) {
+      return computedTemporaryName;
+    }
+    return solar_system_name;
+  }, [isTempSystemNameEnabled, solar_system_name, computedTemporaryName]);

+  const customName = useMemo(() => {
+    if (isTempSystemNameEnabled && computedTemporaryName && name) {
+      return name;
+    }
+    if (solar_system_name !== name && name) {
+      return name;
+    }
+    return null;
+  }, [isTempSystemNameEnabled, computedTemporaryName, name, solar_system_name]);
+
+  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
+    if (!isShowUnsplashedSignatures) {
+      return [[], []];
+    }
+    return prepareUnsplashedChunks(
+      systemSigs
+        .filter(s => s.group === 'Wormhole' && !s.linked_system)
+        .map(s => ({
+          eve_id: s.eve_id,
+          type: s.type,
+          custom_info: s.custom_info,
+          kind: s.kind,
+          name: s.name,
+          group: s.group,
+          sig_id: s.eve_id, // Add a unique key property
+        })) as UnsplashedSignatureType[],
+    );
+  }, [isShowUnsplashedSignatures, systemSigs]);
+
+  // Ensure hubs are always strings.
  const hubsAsStrings = useMemo(() => hubs.map(item => item.toString()), [hubs]);

  const nodeVars: SolarSystemNodeVars = {
@@ -176,10 +225,12 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
    dbClick,
    sortedStatics,
    effectName: effect_name,
+    regionName: region_name,
    solarSystemId: solar_system_id.toString(),
+    solarSystemName: solar_system_name,
    locked,
    hubs: hubsAsStrings,
-    name,
+    name: name,
    isConnecting,
    hoverNodeId,
    charactersInSystem,
@@ -188,8 +239,6 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
    isThickConnections,
    classTitle: class_title,
    temporaryName: computedTemporaryName,
-    regionName: region_name,
-    solarSystemName: solar_system_name,
  };

  return nodeVars;
--- a/assets/js/hooks/Mapper/components/map/hooks/useSystemName.ts
+++ b/assets/js/hooks/Mapper/components/map/hooks/useSystemName.ts
@@ -1,49 +0,0 @@
-// useSystemName.ts
-import { useMemo } from 'react';
-
-interface UseSystemNameParams {
-  isTempSystemNameEnabled: boolean;
-  temporary_name?: string | null;
-  solar_system_name: string;
-  isShowLinkedSigIdTempName: boolean;
-  linkedSigPrefix: string | null;
-  name?: string | null;
-}
-
-export function useSystemName({
-  isTempSystemNameEnabled,
-  temporary_name,
-  solar_system_name,
-  isShowLinkedSigIdTempName,
-  linkedSigPrefix,
-  name,
-}: UseSystemNameParams) {
-  const computedTemporaryName = useMemo(() => {
-    if (!isTempSystemNameEnabled) {
-      return '';
-    }
-    if (isShowLinkedSigIdTempName && linkedSigPrefix) {
-      return temporary_name ? `${linkedSigPrefix}・${temporary_name}` : `${linkedSigPrefix}・${solar_system_name}`;
-    }
-    return temporary_name ?? '';
-  }, [isTempSystemNameEnabled, temporary_name, solar_system_name, isShowLinkedSigIdTempName, linkedSigPrefix]);
-
-  const systemName = useMemo(() => {
-    if (isTempSystemNameEnabled && computedTemporaryName) {
-      return computedTemporaryName;
-    }
-    return solar_system_name;
-  }, [isTempSystemNameEnabled, computedTemporaryName, solar_system_name]);
-
-  const customName = useMemo(() => {
-    if (isTempSystemNameEnabled && computedTemporaryName && name) {
-      return name;
-    }
-    if (solar_system_name !== name && name) {
-      return name;
-    }
-    return null;
-  }, [isTempSystemNameEnabled, computedTemporaryName, name, solar_system_name]);
-
-  return { systemName, computedTemporaryName, customName };
-}
--- a/assets/js/hooks/Mapper/components/map/hooks/useUnsplashedSignatures.ts
+++ b/assets/js/hooks/Mapper/components/map/hooks/useUnsplashedSignatures.ts
@@ -1,30 +0,0 @@
-import { useMemo } from 'react';
-import { SystemSignature } from '@/hooks/Mapper/types';
-import { prepareUnsplashedChunks } from '@/hooks/Mapper/components/map/helpers';
-
-export type UnsplashedSignatureType = SystemSignature & { sig_id: string };
-
-export function useUnsplashedSignatures(systemSigs: SystemSignature[], isShowUnsplashedSignatures: boolean) {
-  return useMemo(() => {
-    if (!isShowUnsplashedSignatures) {
-      return {
-        unsplashedLeft: [] as SystemSignature[],
-        unsplashedRight: [] as SystemSignature[],
-      };
-    }
-    const chunks = prepareUnsplashedChunks(
-      systemSigs
-        .filter(s => s.group === 'Wormhole' && !s.linked_system)
-        .map(s => ({
-          eve_id: s.eve_id,
-          type: s.type,
-          custom_info: s.custom_info,
-          kind: s.kind,
-          name: s.name,
-          group: s.group,
-        })) as UnsplashedSignatureType[],
-    );
-    const [unsplashedLeft, unsplashedRight] = chunks;
-    return { unsplashedLeft, unsplashedRight };
-  }, [isShowUnsplashedSignatures, systemSigs]);
-}
--- a/assets/js/hooks/Mapper/components/map/hooks/useUpdateNodes.ts
+++ b/assets/js/hooks/Mapper/components/map/hooks/useUpdateNodes.ts
@@ -6,9 +6,9 @@ import { SolarSystemRawType } from '@/hooks/Mapper/types';
 const useThrottle = () => {
  const throttleSeed = useRef<number | null>(null);

-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const throttleFunction = useRef((func: any, delay = 200) => {
    if (!throttleSeed.current) {
+      // Call the callback immediately for the first time
      func();
      throttleSeed.current = setTimeout(() => {
        throttleSeed.current = null;
@@ -75,7 +75,7 @@ export const useUpdateNodes = (nodes: Node<SolarSystemRawType>[]) => {

    const visibleNodes = new Set(nodes.filter(x => isNodeVisible(x, viewport)).map(x => x.id));
    update({ visibleNodes });
-  }, [getViewport, nodes, update]);
+  }, [nodes]);

  useOnViewportChange({
    onChange: () => throttle(updateNodesVisibility.bind(this)),
@@ -84,5 +84,5 @@ export const useUpdateNodes = (nodes: Node<SolarSystemRawType>[]) => {

  useEffect(() => {
    updateNodesVisibility();
-  }, [nodes, updateNodesVisibility]);
+  }, [nodes]);
 };
--- a/assets/js/hooks/Mapper/components/mapInterface/components/Comments/Comments.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/Comments/Comments.tsx
@@ -1,52 +0,0 @@
-import { MarkdownComment } from '@/hooks/Mapper/components/mapInterface/components/Comments/components';
-import { useEffect, useRef, useState } from 'react';
-import { CommentType } from '@/hooks/Mapper/types';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-
-export interface CommentsProps {}
-
-// eslint-disable-next-line no-empty-pattern
-export const Comments = ({}: CommentsProps) => {
-  const [commentsList, setCommentsList] = useState<CommentType[]>([]);
-
-  const {
-    data: { selectedSystems },
-    comments: { loadComments, comments, lastUpdateKey },
-  } = useMapRootState();
-
-  const [systemId] = selectedSystems;
-
-  const ref = useRef({ loadComments, systemId });
-  ref.current = { loadComments, systemId };
-
-  useEffect(() => {
-    const commentsBySystem = comments.get(systemId);
-    if (!commentsBySystem) {
-      return;
-    }
-
-    const els = [...commentsBySystem.comments].sort((a, b) => +new Date(b.updated_at) - +new Date(a.updated_at));
-
-    setCommentsList(els);
-  }, [systemId, lastUpdateKey, comments]);
-
-  useEffect(() => {
-    ref.current.loadComments(systemId);
-  }, [systemId]);
-
-  if (commentsList.length === 0) {
-    return (
-      <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
-        Not comments found here
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-1 mt-1 whitespace-nowrap overflow-auto text-ellipsis custom-scrollbar">
-      {commentsList.map(({ id, text, updated_at, characterEveId }) => (
-        <MarkdownComment key={id} text={text} time={updated_at} characterEveId={characterEveId} id={id} />
-      ))}
-    </div>
-  );
-};
--- a/assets/js/hooks/Mapper/components/mapInterface/components/Comments/components/MarkdownComment/MarkdownComment.module.scss
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/Comments/components/MarkdownComment/MarkdownComment.module.scss
@@ -1,70 +0,0 @@
-.MarkdownCommentRoot {
-  border-left-width: 3px;
-
-  @apply text-[12px] leading-[1.2] text-stone-300 break-words;
-  @apply bg-gradient-to-r from-stone-600/40 via-stone-600/10 to-stone-600/0;
-
-  .h1 {
-    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
-  }
-
-  .h2 {
-    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
-  }
-
-  .h3 {
-    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
-  }
-
-  .h4 {
-    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
-  }
-
-  .h5 {
-    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
-  }
-
-  .h6 {
-    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
-  }
-
-  p {
-    @apply m-0 p-0 break-words whitespace-normal;
-  }
-
-  ul, ol {
-    @apply m-0 p-0 list-none;
-  }
-
-  li {
-    @apply m-0 break-words whitespace-normal;
-  }
-
-  blockquote {
-    @apply border-l-4 border-cyan-400 p-2 m-0 font-normal text-stone-300 italic break-words whitespace-normal;
-  }
-
-  a {
-    @apply text-violet-400 cursor-pointer transition-colors duration-200 break-words whitespace-normal;
-
-    &:hover {
-      @apply underline;
-    }
-  }
-
-  b, strong {
-    @apply font-bold text-green-400 break-words whitespace-normal;
-  }
-
-  i, em {
-    @apply italic text-pink-400 break-words whitespace-normal;
-  }
-
-  del {
-    @apply line-through text-stone-500 break-words whitespace-normal;
-  }
-
-  hr {
-    @apply border-none h-[1px] bg-cyan-400 opacity-50 my-2;
-  }
-}
--- a/assets/js/hooks/Mapper/components/mapInterface/components/Comments/components/MarkdownComment/MarkdownComment.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/Comments/components/MarkdownComment/MarkdownComment.tsx
@@ -1,95 +0,0 @@
-import classes from './MarkdownComment.module.scss';
-import clsx from 'clsx';
-import Markdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { InfoDrawer, TimeAgo, TooltipPosition, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
-import remarkBreaks from 'remark-breaks';
-import { useGetCacheCharacter } from '@/hooks/Mapper/mapRootProvider/hooks/api';
-import { useCallback, useRef, useState } from 'react';
-import { WdTransition } from '@/hooks/Mapper/components/ui-kit/WdTransition/WdTransition.tsx';
-import { PrimeIcons } from 'primereact/api';
-import { ConfirmPopup } from 'primereact/confirmpopup';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { OutCommand } from '@/hooks/Mapper/types';
-
-const TOOLTIP_PROPS = { content: 'Remove comment', position: TooltipPosition.top };
-const REMARK_PLUGINS = [remarkGfm, remarkBreaks];
-
-export interface MarkdownCommentProps {
-  text: string;
-  time: string;
-  characterEveId: string;
-  id: string;
-}
-
-export const MarkdownComment = ({ text, time, characterEveId, id }: MarkdownCommentProps) => {
-  const char = useGetCacheCharacter(characterEveId);
-  const [hovered, setHovered] = useState(false);
-
-  const cpRemoveBtnRef = useRef<HTMLElement>();
-  const [cpRemoveVisible, setCpRemoveVisible] = useState(false);
-
-  const { outCommand } = useMapRootState();
-  const ref = useRef({ outCommand, id });
-  ref.current = { outCommand, id };
-
-  const handleDelete = useCallback(async () => {
-    await ref.current.outCommand({
-      type: OutCommand.deleteSystemComment,
-      data: ref.current.id,
-    });
-  }, []);
-
-  const handleMouseEnter = useCallback(() => setHovered(true), []);
-  const handleMouseLeave = useCallback(() => setHovered(false), []);
-
-  const handleShowCP = useCallback(() => setCpRemoveVisible(true), []);
-  const handleHideCP = useCallback(() => setCpRemoveVisible(false), []);
-
-  return (
-    <>
-      <InfoDrawer
-        labelClassName="mb-[3px]"
-        className={clsx(classes.MarkdownCommentRoot, 'p-1 bg-stone-700/20 ')}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        title={
-          <div className="flex items-center justify-between">
-            <div>
-              <span className="text-stone-500">
-                by <span className="text-orange-300/70">{char?.data?.name ?? ''}</span>
-              </span>
-            </div>
-
-            <WdTransition active={hovered} timeout={100}>
-              <div className="text-stone-500 max-h-[12px]">
-                {!hovered && <TimeAgo timestamp={time} />}
-                {hovered && (
-                  // @ts-ignore
-                  <div ref={cpRemoveBtnRef}>
-                    <WdImgButton
-                      className={clsx(PrimeIcons.TRASH, 'hover:text-red-400')}
-                      tooltip={TOOLTIP_PROPS}
-                      onClick={handleShowCP}
-                    />
-                  </div>
-                )}
-              </div>
-            </WdTransition>
-          </div>
-        }
-      >
-        <Markdown remarkPlugins={REMARK_PLUGINS}>{text}</Markdown>
-      </InfoDrawer>
-
-      <ConfirmPopup
-        target={cpRemoveBtnRef.current}
-        visible={cpRemoveVisible}
-        onHide={handleHideCP}
-        message="Are you sure you want to delete?"
-        icon="pi pi-exclamation-triangle"
-        accept={handleDelete}
-      />
-    </>
-  );
-};
--- a/assets/js/hooks/Mapper/components/mapInterface/components/Comments/components/MarkdownComment/index.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/Comments/components/MarkdownComment/index.ts
@@ -1 +0,0 @@
-export * from './MarkdownComment.tsx';
--- a/assets/js/hooks/Mapper/components/mapInterface/components/Comments/components/index.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/Comments/components/index.ts
@@ -1 +0,0 @@
-export * from './MarkdownComment';
--- a/assets/js/hooks/Mapper/components/mapInterface/components/Comments/index.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/Comments/index.ts
@@ -1 +0,0 @@
-export * from './Comments';
--- a/assets/js/hooks/Mapper/components/mapInterface/components/Comments/markdownexample.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/Comments/markdownexample.ts
@@ -1,26 +0,0 @@
-export const markdown = `
-  # Heading 1
-  ## Heading 2
-  ### Heading 3
-  #### Heading 4
-  ##### Heading 5
-  ###### Heading 6
-
-  ---
-
-  ## Paragraphs
-  This is a regular text paragraph.
-
-  Another paragraph, but with **bold** and *italic* text, as well as ~~strikethrough~~.
-
-  > This is a block quote.
-  > Second line of the quote.
-
-  ## Links
-  [Link to Google](https://www.google.com)
-
-  ## Horizontal Line
-  A block quote with ~strikethrough~ and a URL: https://reactjs.org.
-  ---
-
-  `;
--- a/assets/js/hooks/Mapper/components/mapInterface/components/CommentsEditor/CommentsEditor.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/CommentsEditor/CommentsEditor.tsx
@@ -1,72 +0,0 @@
-import { TooltipPosition, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
-import clsx from 'clsx';
-import { PrimeIcons } from 'primereact/api';
-import { MarkdownEditor } from '@/hooks/Mapper/components/mapInterface/components/MarkdownEditor';
-import { useHotkey } from '@/hooks/Mapper/hooks';
-import { useCallback, useRef, useState } from 'react';
-import { OutCommand } from '@/hooks/Mapper/types';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-
-export interface CommentsEditorProps {}
-
-export const CommentsEditor = ({}: CommentsEditorProps) => {
-  const [textVal, setTextVal] = useState('');
-
-  const {
-    data: { selectedSystems },
-    outCommand,
-  } = useMapRootState();
-
-  const [systemId] = selectedSystems;
-
-  const ref = useRef({ outCommand, systemId, textVal });
-  ref.current = { outCommand, systemId, textVal };
-
-  const handleFinishEdit = useCallback(async () => {
-    if (ref.current.textVal === '') {
-      return;
-    }
-
-    await ref.current.outCommand({
-      type: OutCommand.addSystemComment,
-      data: {
-        solarSystemId: ref.current.systemId,
-        value: ref.current.textVal,
-      },
-    });
-    setTextVal('');
-  }, []);
-
-  const handleClick = async () => {
-    await handleFinishEdit();
-  };
-
-  useHotkey(true, ['Enter'], async () => {
-    await handleFinishEdit();
-  });
-
-  return (
-    <MarkdownEditor
-      value={textVal}
-      onChange={setTextVal}
-      overlayContent={
-        <div className="w-full h-full flex justify-end items-end pointer-events-none pb-[1px] pr-[8px]">
-          <WdImgButton
-            disabled={textVal.length === 0}
-            tooltip={{
-              position: TooltipPosition.bottom,
-              content: (
-                <span>
-                  Also you may use <span className="text-cyan-400">Meta + Enter</span> hotkey.
-                </span>
-              ),
-            }}
-            textSize={WdImageSize.large}
-            className={clsx(PrimeIcons.SEND, 'text-[14px]')}
-            onClick={handleClick}
-          />
-        </div>
-      }
-    />
-  );
-};
--- a/assets/js/hooks/Mapper/components/mapInterface/components/CommentsEditor/index.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/CommentsEditor/index.ts
@@ -1 +0,0 @@
-export * from './CommentsEditor';
--- a/assets/js/hooks/Mapper/components/mapInterface/components/MarkdownEditor/MarkdownEditor.module.scss
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/MarkdownEditor/MarkdownEditor.module.scss
@@ -1,40 +0,0 @@
-.CERoot {
-  @apply border border-stone-400/30 rounded-[2px];
-
-  :global {
-    .cm-content {
-      @apply bg-stone-600/40;
-    }
-
-    .cm-scroller {
-      scrollbar-width: thin;
-      scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
-    }
-
-    .cm-scroller::-webkit-scrollbar {
-      width: 10px;
-    }
-
-    .cm-scroller::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    .cm-scroller::-webkit-scrollbar-thumb {
-      background-color: rgba(255, 255, 255, 0.5);
-      border-radius: 5px;
-      border: 2px solid transparent;
-      background-clip: content-box;
-    }
-
-    .cm-scroller::-webkit-scrollbar-thumb:hover {
-      background-color: rgba(255, 255, 255, 0.7);
-    }
-
-    .cm-scroller::-webkit-scrollbar-button {
-      display: none;
-      height: 0;
-      width: 0;
-    }
-
-  }
-}
--- a/assets/js/hooks/Mapper/components/mapInterface/components/MarkdownEditor/MarkdownEditor.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/MarkdownEditor/MarkdownEditor.tsx
@@ -1,87 +0,0 @@
-import { ReactNode, useCallback, useRef, useState } from 'react';
-import CodeMirror, { ViewPlugin } from '@uiw/react-codemirror';
-import { markdown } from '@codemirror/lang-markdown';
-import { oneDark } from '@codemirror/theme-one-dark';
-import { EditorView, type ViewUpdate } from '@codemirror/view';
-
-import classes from './MarkdownEditor.module.scss';
-import clsx from 'clsx';
-
-// TODO special plugin which force CodeMirror using capture for paste event
-const stopEventPropagationPlugin = ViewPlugin.fromClass(
-  class {
-    constructor(view: EditorView) {
-      // @ts-ignore
-      this.view = view;
-
-      // @ts-ignore
-      this.pasteHandler = (event: Event) => {
-        console.log('Paste done in editor, stopping global listeners.');
-        event.stopPropagation();
-      };
-
-      // @ts-ignore
-      view.dom.addEventListener('paste', this.pasteHandler);
-    }
-
-    destroy() {
-      // @ts-ignore
-      this.view.dom.removeEventListener('paste', this.pasteHandler);
-    }
-  },
-);
-
-const CODE_MIRROR_EXTENSIONS = [
-  markdown(),
-  EditorView.lineWrapping,
-  EditorView.theme({
-    '&': { backgroundColor: 'transparent !important' },
-    '& .cm-gutterElement': { display: 'none' },
-  }),
-  stopEventPropagationPlugin,
-];
-
-export interface MarkdownEditorProps {
-  overlayContent?: ReactNode;
-  value: string;
-  onChange: (value: string) => void;
-}
-
-export const MarkdownEditor = ({ value, onChange, overlayContent }: MarkdownEditorProps) => {
-  const [hasShift, setHasShift] = useState(false);
-
-  const refData = useRef({ onChange });
-  refData.current = { onChange };
-
-  const handleOnChange = useCallback((value: string, viewUpdate: ViewUpdate) => {
-    // Rerender happens after change
-    setTimeout(() => {
-      const scrollDOM = viewUpdate.view.scrollDOM;
-      setHasShift(scrollDOM.scrollHeight > scrollDOM.clientHeight);
-    }, 0);
-
-    refData.current.onChange(value);
-  }, []);
-
-  return (
-    <div className={clsx(classes.MarkdownEditor, 'relative')}>
-      <CodeMirror
-        value={value}
-        height="70px"
-        extensions={CODE_MIRROR_EXTENSIONS}
-        className={classes.CERoot}
-        theme={oneDark}
-        onChange={handleOnChange}
-        placeholder="Start typing..."
-      />
-      <div
-        className={clsx('absolute top-0 left-0 h-full pointer-events-none', {
-          'w-full': !hasShift,
-          'w-[calc(100%-10px)]': hasShift,
-        })}
-      >
-        {overlayContent}
-      </div>
-    </div>
-  );
-};
--- a/assets/js/hooks/Mapper/components/mapInterface/components/MarkdownEditor/index.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/MarkdownEditor/index.ts
@@ -1 +0,0 @@
-export * from './MarkdownEditor.tsx';
--- a/assets/js/hooks/Mapper/components/mapInterface/components/SystemLinkSignatureDialog/SystemLinkSignatureDialog.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/SystemLinkSignatureDialog/SystemLinkSignatureDialog.tsx
@@ -1,163 +1,57 @@
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { Dialog } from 'primereact/dialog';

 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { CommandLinkSignatureToSystem, SignatureGroup, SystemSignature, TimeStatus } from '@/hooks/Mapper/types';
+import { SystemSignature } from '@/hooks/Mapper/types';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { CommandLinkSignatureToSystem } from '@/hooks/Mapper/types';
 import { SystemSignaturesContent } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent';
-import { parseSignatureCustomInfo } from '@/hooks/Mapper/helpers/parseSignatureCustomInfo';
-import { getWhSize } from '@/hooks/Mapper/helpers/getWhSize';
-import { useSystemInfo } from '@/hooks/Mapper/components/hooks';
+import { SHOW_DESCRIPTION_COLUMN_SETTING } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures';
 import {
-  SOLAR_SYSTEM_CLASS_IDS,
-  SOLAR_SYSTEM_CLASSES_TO_CLASS_GROUPS,
-  WORMHOLES_ADDITIONAL_INFO_BY_SHORT_NAME,
-} from '@/hooks/Mapper/components/map/constants.ts';
-import { K162_TYPES_MAP } from '@/hooks/Mapper/constants.ts';
-import {
-  SETTINGS_KEYS,
-  SignatureSettingsType,
-} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
-
-const K162_SIGNATURE_TYPE = WORMHOLES_ADDITIONAL_INFO_BY_SHORT_NAME['K162'].shortName;
+  Setting,
+  COSMIC_SIGNATURE,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
+import { SignatureGroup } from '@/hooks/Mapper/types';

 interface SystemLinkSignatureDialogProps {
  data: CommandLinkSignatureToSystem;
  setVisible: (visible: boolean) => void;
 }

-export const LINK_SIGNTATURE_SETTINGS: SignatureSettingsType = {
-  [SETTINGS_KEYS.COSMIC_SIGNATURE]: true,
-  [SETTINGS_KEYS.WORMHOLE]: true,
-  [SETTINGS_KEYS.SHOW_DESCRIPTION_COLUMN]: true,
-};
-
-// Extend the SignatureCustomInfo type to include k162Type
-interface ExtendedSignatureCustomInfo {
-  k162Type?: string;
-  isEOL?: boolean;
-  [key: string]: unknown;
-}
+const signatureSettings: Setting[] = [
+  { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true },
+  { key: SignatureGroup.Wormhole, name: 'Wormhole', value: true },
+  { key: SHOW_DESCRIPTION_COLUMN_SETTING, name: 'Show Description Column', value: true, isFilter: false },
+];

 export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignatureDialogProps) => {
-  const {
-    outCommand,
-    data: { wormholes },
-  } = useMapRootState();
+  const { outCommand } = useMapRootState();

  const ref = useRef({ outCommand });
  ref.current = { outCommand };

-  // Get system info for the target system
-  const { staticInfo: targetSystemInfo } = useSystemInfo({ systemId: `${data.solar_system_target}` });
-
-  // Get the system class group for the target system
-  const targetSystemClassGroup = useMemo(() => {
-    if (!targetSystemInfo) return null;
-    const systemClassId = targetSystemInfo.system_class;
-
-    const systemClassKey = Object.keys(SOLAR_SYSTEM_CLASS_IDS).find(
-      key => SOLAR_SYSTEM_CLASS_IDS[key as keyof typeof SOLAR_SYSTEM_CLASS_IDS] === systemClassId,
-    );
-
-    if (!systemClassKey) return null;
-
-    return (
-      SOLAR_SYSTEM_CLASSES_TO_CLASS_GROUPS[systemClassKey as keyof typeof SOLAR_SYSTEM_CLASSES_TO_CLASS_GROUPS] || null
-    );
-  }, [targetSystemInfo]);
-
  const handleHide = useCallback(() => {
    setVisible(false);
  }, [setVisible]);

-  const filterSignature = useCallback(
-    (signature: SystemSignature) => {
-      if (signature.group !== SignatureGroup.Wormhole || !targetSystemClassGroup) {
-        return true;
-      }
-
-      if (!signature.type) {
-        return true;
-      }
-
-      if (signature.type === K162_SIGNATURE_TYPE) {
-        // Parse the custom info to see if the user has specified what class this K162 leads to
-        const customInfo = parseSignatureCustomInfo(signature.custom_info) as ExtendedSignatureCustomInfo;
-
-        // If the user has specified a k162Type for this K162
-        if (customInfo.k162Type) {
-          // Get the K162 type information
-          const k162TypeInfo = K162_TYPES_MAP[customInfo.k162Type];
-
-          if (k162TypeInfo) {
-            // Check if the k162Type matches our target system class
-            return customInfo.k162Type === targetSystemClassGroup;
-          }
-        }
-
-        // If no k162Type is specified or we couldn't find type info, allow it
-        return true;
-      }
-
-      // Find the wormhole data for this signature type
-      const wormholeData = wormholes.find(wh => wh.name === signature.type);
-      if (!wormholeData) {
-        return true; // If we don't know the destination, don't filter it out
-      }
-
-      // Get the destination system class from the wormhole data
-      const destinationClass = wormholeData.dest;
-
-      // Check if the destination class matches the target system class
-      const isMatch = destinationClass === targetSystemClassGroup;
-      return isMatch;
-    },
-    [targetSystemClassGroup, wormholes],
-  );
-
  const handleSelect = useCallback(
-    async (signature: SystemSignature) => {
+    (signature: SystemSignature) => {
      if (!signature) {
        return;
      }

      const { outCommand } = ref.current;

-      await outCommand({
+      outCommand({
        type: OutCommand.linkSignatureToSystem,
        data: {
          ...data,
          signature_eve_id: signature.eve_id,
        },
      });
-
-      if (parseSignatureCustomInfo(signature.custom_info).isEOL === true) {
-        await outCommand({
-          type: OutCommand.updateConnectionTimeStatus,
-          data: {
-            source: data.solar_system_source,
-            target: data.solar_system_target,
-            value: TimeStatus.eol,
-          },
-        });
-      }
-
-      const whShipSize = getWhSize(wormholes, signature.type);
-      if (whShipSize) {
-        await outCommand({
-          type: OutCommand.updateConnectionShipSizeType,
-          data: {
-            source: data.solar_system_source,
-            target: data.solar_system_target,
-            value: whShipSize,
-          },
-        });
-      }
-
      setVisible(false);
    },
-    [data, setVisible, wormholes],
+    [data, setVisible],
  );

  return (
@@ -172,10 +66,9 @@ export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignat
      <SystemSignaturesContent
        systemId={`${data.solar_system_source}`}
        hideLinkedSignatures
-        settings={LINK_SIGNTATURE_SETTINGS}
+        settings={signatureSettings}
        onSelect={handleSelect}
        selectable={true}
-        filterSignature={filterSignature}
      />
    </Dialog>
  );
--- a/assets/js/hooks/Mapper/components/mapInterface/components/Widget/Widget.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/Widget/Widget.tsx
@@ -5,14 +5,12 @@ import clsx from 'clsx';

 export interface WidgetProps {
  label: React.ReactNode | string;
-  windowId?: string;
  children?: React.ReactNode;
 }

-export const Widget = ({ label, children, windowId }: WidgetProps) => {
+export const Widget = ({ label, children }: WidgetProps) => {
  return (
    <div
-      data-window-id={windowId}
      className={clsx(
        classes.root,
        'flex flex-col w-full h-full rounded',
--- a/assets/js/hooks/Mapper/components/mapInterface/constants.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/constants.tsx
@@ -7,9 +7,8 @@ import {
  SystemStructures,
  SystemKills,
 } from '@/hooks/Mapper/components/mapInterface/widgets';
-import { CommentsWidget } from '@/hooks/Mapper/components/mapInterface/widgets/CommentsWidget';

-export const CURRENT_WINDOWS_VERSION = 9;
+export const CURRENT_WINDOWS_VERSION = 8;
 export const WINDOWS_LOCAL_STORE_KEY = 'windows:settings:v2';

 export enum WidgetsIds {
@@ -19,7 +18,6 @@ export enum WidgetsIds {
  routes = 'routes',
  structures = 'structures',
  kills = 'kills',
-  comments = 'comments',
 }

 export const STORED_VISIBLE_WIDGETS_DEFAULT = [
@@ -72,13 +70,6 @@ export const DEFAULT_WIDGETS: WindowProps[] = [
    zIndex: 0,
    content: () => <SystemKills />,
  },
-  {
-    id: WidgetsIds.comments,
-    position: { x: 10, y: 10 },
-    size: { width: 250, height: 300 },
-    zIndex: 0,
-    content: () => <CommentsWidget />,
-  },
 ];

 type WidgetsCheckboxesType = {
@@ -111,8 +102,4 @@ export const WIDGETS_CHECKBOXES_PROPS: WidgetsCheckboxesType = [
    id: WidgetsIds.kills,
    label: 'Kills',
  },
-  {
-    id: WidgetsIds.comments,
-    label: 'Comments',
-  },
 ];
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/CommentsWidget/CommentsWidget.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/CommentsWidget/CommentsWidget.tsx
@@ -1,82 +0,0 @@
-import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
-import { Comments } from '@/hooks/Mapper/components/mapInterface/components/Comments';
-import { InfoDrawer, SystemView, TooltipPosition, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
-import { useRef } from 'react';
-import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
-import { COMPACT_MAX_WIDTH } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import clsx from 'clsx';
-import { CommentsEditor } from '@/hooks/Mapper/components/mapInterface/components/CommentsEditor';
-import { PrimeIcons } from 'primereact/api';
-
-export const CommentsWidgetContent = () => {
-  const {
-    data: { selectedSystems },
-  } = useMapRootState();
-
-  const isNotSelectedSystem = selectedSystems.length !== 1;
-
-  if (isNotSelectedSystem) {
-    return (
-      <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
-        System is not selected
-      </div>
-    );
-  }
-
-  return (
-    <div className={clsx('h-full grid grid-rows-[1fr_auto] gap-1 px-[4px]')}>
-      <Comments />
-      <CommentsEditor />
-    </div>
-  );
-};
-
-export const CommentsWidget = () => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const isCompact = useMaxWidth(containerRef, COMPACT_MAX_WIDTH);
-
-  const {
-    data: { selectedSystems, isSubscriptionActive },
-  } = useMapRootState();
-  const [systemId] = selectedSystems;
-  const isNotSelectedSystem = selectedSystems.length !== 1;
-
-  return (
-    <Widget
-      label={
-        <div ref={containerRef} className="flex justify-between items-center gap-1 text-xs w-full">
-          <div className="flex items-center gap-1">
-            {!isCompact && (
-              <div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
-                Comments {isNotSelectedSystem ? '' : 'in'}
-              </div>
-            )}
-            {!isNotSelectedSystem && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
-          </div>
-          <WdImgButton
-            className={PrimeIcons.QUESTION_CIRCLE}
-            tooltip={{
-              position: TooltipPosition.left,
-              content: (
-                <div className="flex flex-col gap-1">
-                  <InfoDrawer title={<b className="text-slate-50">How to add/delete comment?</b>}>
-                    It is possible to use markdown formating. <br />
-                    Only users with tracking permission can add/delete comments. <br />
-                  </InfoDrawer>
-                  <InfoDrawer title={<b className="text-slate-50">Limitations</b>}>
-                    Each comment length is limited to <b>500</b> characters. <br />
-                    No more than <b>{isSubscriptionActive ? '500' : '30'}</b> comments are allowed per system*. <br />
-                    <small>* based on active map subscription.</small>
-                  </InfoDrawer>
-                </div>
-              ),
-            }}
-          />
-        </div>
-      }
-    >
-      <CommentsWidgetContent />
-    </Widget>
-  );
-};
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/CommentsWidget/index.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/CommentsWidget/index.ts
@@ -1 +0,0 @@
-export * from './CommentsWidget';
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components/LocalCharactersItemTemplate/LocalCharactersItemTemplate.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components/LocalCharactersItemTemplate/LocalCharactersItemTemplate.tsx
@@ -13,7 +13,6 @@ export const LocalCharactersItemTemplate = ({ showShipName, ...options }: LocalC
      className={clsx(
        classes.CharacterRow,
        'box-border flex items-center w-full whitespace-nowrap overflow-hidden text-ellipsis min-w-[0px]',
-        'px-1',
        {
          'surface-hover': options.odd,
          'border-b border-gray-600 border-opacity-20': !options.last,
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components/LocalCharactersList.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components/LocalCharactersList.tsx
@@ -3,13 +3,11 @@ import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virt
 import clsx from 'clsx';
 import { CharItemProps } from './types';

-export type LocalCharactersListProps = {
+type LocalCharactersListProps = {
  items: Array<CharItemProps>;
  itemSize: number;
  itemTemplate: (char: CharItemProps, options: VirtualScrollerTemplateOptions) => React.ReactNode;
  containerClassName?: string;
-  style?: React.CSSProperties;
-  autoSize?: boolean;
 };

 export const LocalCharactersList = ({
@@ -17,19 +15,7 @@ export const LocalCharactersList = ({
  itemSize,
  itemTemplate,
  containerClassName,
-  style = {},
-  autoSize = false,
 }: LocalCharactersListProps) => {
-  const computedHeight = autoSize ? `${Math.max(items.length, 1) * itemSize}px` : style.height || '100%';
-
-  const localStyle: React.CSSProperties = {
-    ...style,
-    height: computedHeight,
-    width: '100%',
-    boxSizing: 'border-box',
-    overflowX: 'hidden',
-  };
-
  return (
    <VirtualScroller
      items={items}
@@ -37,8 +23,6 @@ export const LocalCharactersList = ({
      orientation="vertical"
      className={clsx('w-full h-full', containerClassName)}
      itemTemplate={itemTemplate}
-      autoSize={autoSize}
-      style={localStyle}
    />
  );
 };
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKills.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKills.tsx
@@ -7,9 +7,8 @@ import { useKillsWidgetSettings } from './hooks/useKillsWidgetSettings';
 import { useSystemKills } from './hooks/useSystemKills';
 import { KillsSettingsDialog } from './components/SystemKillsSettingsDialog';
 import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
-import { SolarSystemRawType } from '@/hooks/Mapper/types';

-export const SystemKills: React.FC = React.memo(() => {
+export const SystemKills: React.FC = () => {
  const {
    data: { selectedSystems, systems, isSubscriptionActive },
    outCommand,
@@ -26,16 +25,6 @@ export const SystemKills: React.FC = React.memo(() => {
    return map;
  }, [systems]);

-  const systemBySolarSystemId = useMemo(() => {
-    const map: Record<number, SolarSystemRawType> = {};
-    systems.forEach(sys => {
-      if (sys.system_static_info?.solar_system_id != null) {
-        map[sys.system_static_info.solar_system_id] = sys;
-      }
-    });
-    return map;
-  }, [systems]);
-
  const [settings] = useKillsWidgetSettings();
  const visible = settings.showAll;

@@ -43,7 +32,6 @@ export const SystemKills: React.FC = React.memo(() => {
    systemId,
    outCommand,
    showAllVisible: visible,
-    sinceHours: settings.timeRange,
  });

  const isNothingSelected = !systemId && !visible;
@@ -52,55 +40,78 @@ export const SystemKills: React.FC = React.memo(() => {
  const filteredKills = useMemo(() => {
    if (!settings.whOnly || !visible) return kills;
    return kills.filter(kill => {
-      const system = systemBySolarSystemId[kill.solar_system_id];
+      const system = systems.find(
+        sys => sys.system_static_info.solar_system_id === kill.solar_system_id
+      );
      if (!system) {
        console.warn(`System with id ${kill.solar_system_id} not found.`);
        return false;
      }
      return isWormholeSpace(system.system_static_info.system_class);
    });
-  }, [kills, settings.whOnly, systemBySolarSystemId, visible]);
+  }, [kills, settings.whOnly, systems]);

  return (
-    <div className="h-full flex flex-col">
-      <Widget label={<KillsHeader systemId={systemId} onOpenSettings={() => setSettingsDialogVisible(true)} />}>
-        {!isSubscriptionActive ? (
-          <div className="w-full h-full flex items-center justify-center">
-            <span className="select-none text-center text-stone-400/80 text-sm">
-              Kills available with &#39;Active&#39; map subscription only (contact map administrators)
-            </span>
+    <div className="h-full flex flex-col min-h-0">
+      <div className="flex flex-col flex-1 min-h-0">
+        <Widget
+          label={
+            <KillsHeader
+              systemId={systemId}
+              onOpenSettings={() => setSettingsDialogVisible(true)}
+            />
+          }
+        >
+          <div className="relative h-full">
+            {!isSubscriptionActive ? (
+              <div className="absolute inset-0 flex items-center justify-center">
+                <span className="select-none text-center text-stone-400/80 text-sm">
+                  Kills available with &#39;Active&#39; map subscription only (contact map administrators)
+                </span>
+              </div>
+            ) : isNothingSelected ? (
+              <div className="absolute inset-0 flex items-center justify-center">
+                <span className="select-none text-center text-stone-400/80 text-sm">
+                  No system selected (or toggle “Show all systems”)
+                </span>
+              </div>
+            ) : showLoading ? (
+              <div className="absolute inset-0 flex items-center justify-center">
+                <span className="select-none text-center text-stone-400/80 text-sm">
+                  Loading Kills...
+                </span>
+              </div>
+            ) : error ? (
+              <div className="absolute inset-0 flex items-center justify-center">
+                <span className="select-none text-center text-red-400 text-sm">
+                  {error}
+                </span>
+              </div>
+            ) : !filteredKills || filteredKills.length === 0 ? (
+              <div className="absolute inset-0 flex items-center justify-center">
+                <span className="select-none text-center text-stone-400/80 text-sm">
+                  No kills found
+                </span>
+              </div>
+            ) : (
+              <div className="h-full overflow-y-auto">
+                <SystemKillsContent
+                  key={settings.compact ? 'compact' : 'normal'}
+                  kills={filteredKills}
+                  systemNameMap={systemNameMap}
+                  compact={settings.compact}
+                  onlyOneSystem={!visible}
+                />
+              </div>
+            )}
          </div>
-        ) : isNothingSelected ? (
-          <div className="w-full h-full flex items-center justify-center">
-            <span className="select-none text-center text-stone-400/80 text-sm">
-              No system selected (or toggle &quot;Show all systems&quot;)
-            </span>
-          </div>
-        ) : showLoading ? (
-          <div className="w-full h-full flex items-center justify-center">
-            <span className="select-none text-center text-stone-400/80 text-sm">Loading Kills...</span>
-          </div>
-        ) : error ? (
-          <div className="w-full h-full flex items-center justify-center">
-            <span className="select-none text-center text-red-400 text-sm">{error}</span>
-          </div>
-        ) : !filteredKills || filteredKills.length === 0 ? (
-          <div className="w-full h-full flex items-center justify-center">
-            <span className="select-none text-center text-stone-400/80 text-sm">No kills found</span>
-          </div>
-        ) : (
-          <SystemKillsContent
-            kills={filteredKills}
-            systemNameMap={systemNameMap}
-            onlyOneSystem={!visible}
-            timeRange={settings.timeRange}
-          />
-        )}
-      </Widget>
+        </Widget>
+      </div>

-      {settingsDialogVisible && <KillsSettingsDialog visible setVisible={setSettingsDialogVisible} />}
+      <KillsSettingsDialog
+        visible={settingsDialogVisible}
+        setVisible={setSettingsDialogVisible}
+      />
    </div>
  );
-});
-
-SystemKills.displayName = 'SystemKills';
+};
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.module.scss
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.module.scss
@@ -1,35 +1,16 @@
-// Custom scrollbar styling is now handled by the global custom-scrollbar class
-.scrollerContent {
-  overflow-x: hidden;
-  overflow-y: auto;
-  height: 100% !important;
+.TableRowCompact {
+  height: 8px;
+  max-height: 8px;
+  font-size: 12px !important;
+  line-height: 8px;
 }

-// VirtualScroller specific styles that can't be handled with Tailwind
-.VirtualScroller {
-  overflow: hidden !important;
-  display: flex !important;
-  flex-direction: column !important;
-  height: 100% !important;
-
-  // Target this specific VirtualScroller instance
-  &:global(.p-virtualscroller) {
-    height: 100% !important;
-
-    :global(.p-virtualscroller-content) {
-      height: 100% !important;
-    }
-  }
+.Table {
+  font-size: 12px;
+  border-collapse: collapse;
 }

-// Fix for PrimeReact VirtualScroller - these need to be global
-:global {
-  .p-virtualscroller {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .p-virtualscroller-content {
-    flex: 1;
-  }
+.Tooltip {
+  white-space: pre-line;
+  line-height: 1.2rem;
 }
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.tsx
@@ -1,76 +1,50 @@
 import React, { useMemo } from 'react';
+import clsx from 'clsx';
 import { DetailedKill } from '@/hooks/Mapper/types/kills';
-import { VirtualScroller } from 'primereact/virtualscroller';
-import { useSystemKillsItemTemplate } from '../hooks/useSystemKillsItemTemplate';
-import classes from './SystemKillsContent.module.scss';
+import { KillRow } from '../components/SystemKillsRow';

-export const ITEM_HEIGHT = 35;
-
-export interface SystemKillsContentProps {
+interface SystemKillsContentProps {
  kills: DetailedKill[];
  systemNameMap: Record<string, string>;
+  compact?: boolean;
  onlyOneSystem?: boolean;
-  timeRange?: number;
-  limit?: number;
 }

 export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
  kills,
  systemNameMap,
+  compact = false,
  onlyOneSystem = false,
-  timeRange = 4,
-  limit,
 }) => {
-  const processedKills = useMemo(() => {
-    if (!kills || kills.length === 0) return [];
-
-    // sort by newest first
-    const sortedKills = kills
-      .filter(k => k.kill_time)
-      .sort((a, b) => new Date(b.kill_time!).getTime() - new Date(a.kill_time!).getTime());
-
-    // filter by timeRange
-    let filteredKills = sortedKills;
-    if (timeRange !== undefined) {
-      const cutoffTime = new Date();
-      cutoffTime.setHours(cutoffTime.getHours() - timeRange);
-      filteredKills = sortedKills.filter(kill => {
-        const killTime = new Date(kill.kill_time!).getTime();
-        return killTime >= cutoffTime.getTime();
-      });
-    }
-
-    // apply limit if present
-    if (limit !== undefined) {
-      return filteredKills.slice(0, limit);
-    }
-    return filteredKills;
-  }, [kills, timeRange, limit]);
-
-  const itemTemplate = useSystemKillsItemTemplate(systemNameMap, onlyOneSystem);
-
-  // Define style for the VirtualScroller
-  const virtualScrollerStyle: React.CSSProperties = {
-    boxSizing: 'border-box',
-    height: '100%', // Use 100% height to fill the container
-  };
+  const sortedKills = useMemo(() => {
+    return [...kills].sort((a, b) => {
+      const timeA = a.kill_time ? new Date(a.kill_time).getTime() : 0;
+      const timeB = b.kill_time ? new Date(b.kill_time).getTime() : 0;
+      return timeB - timeA;
+    });
+  }, [kills]);

  return (
-    <div className="h-full w-full flex flex-col overflow-hidden" data-testid="system-kills-content">
-      <VirtualScroller
-        items={processedKills}
-        itemSize={ITEM_HEIGHT}
-        itemTemplate={itemTemplate}
-        className={`w-full h-full flex-1 select-none ${classes.VirtualScroller}`}
-        style={virtualScrollerStyle}
-        pt={{
-          content: {
-            className: `custom-scrollbar ${classes.scrollerContent}`,
-          },
-        }}
-      />
+    <div
+      className={clsx(
+        'flex flex-col w-full text-stone-200 text-xs transition-all duration-300',
+        compact ? 'p-1' : 'p-1'
+      )}
+    >
+      {sortedKills.map(kill => {
+        const systemIdStr = String(kill.solar_system_id);
+        const systemName = systemNameMap[systemIdStr] || `System ${systemIdStr}`;
+
+        return (
+          <KillRow
+            key={kill.killmail_id}
+            killDetails={kill}
+            systemName={systemName}
+            isCompact={compact}
+            onlyOneSystem={onlyOneSystem}
+          />
+        );
+      })}
    </div>
  );
 };
-
-export default SystemKillsContent;
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/CompactKillRow.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/CompactKillRow.tsx
@@ -11,8 +11,8 @@ import {
  getPrimaryLogoAndTooltip,
  getAttackerPrimaryImageAndTooltip,
 } from '../helpers';
-import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
-import classes from './KillRowDetail.module.scss';
+import { WdTooltipWrapper } from '../../../../ui-kit/WdTooltipWrapper';
+import classes from './SystemKillRow.module.scss';
 import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';

 export interface CompactKillRowProps {
@@ -21,10 +21,15 @@ export interface CompactKillRowProps {
  onlyOneSystem: boolean;
 }

-export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, systemName, onlyOneSystem }) => {
+export const CompactKillRow: React.FC<CompactKillRowProps> = ({
+  killDetails,
+  systemName,
+  onlyOneSystem,
+}) => {
  const {
    killmail_id = 0,
-    // Victim data
+
+    // Victim
    victim_char_name = 'Unknown Pilot',
    victim_alliance_ticker = '',
    victim_corp_ticker = '',
@@ -35,7 +40,8 @@ export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, syst
    victim_corp_id = 0,
    victim_alliance_id = 0,
    victim_ship_type_id = 0,
-    // Attacker data
+
+    // Attacker
    final_blow_char_id = 0,
    final_blow_char_name = '',
    final_blow_alliance_ticker = '',
@@ -45,64 +51,72 @@ export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, syst
    final_blow_corp_id = 0,
    final_blow_corp_name = '',
    final_blow_ship_type_id = 0,
+
    kill_time = '',
    total_value = 0,
  } = killDetails || {};

  const attackerIsNpc = final_blow_char_id === 0;

-  // Define victim affiliation ticker.
-  const victimAffiliationTicker = victim_alliance_ticker || victim_corp_ticker || 'No Ticker';
-
-  const killValueFormatted = total_value != null && total_value > 0 ? `${formatISK(total_value)} ISK` : null;
+  // Tickers & strings
+  const victimAffiliationTicker =
+    victim_alliance_ticker || victim_corp_ticker || 'No Ticker';
+  const killValueFormatted =
+    total_value != null && total_value > 0 ? `${formatISK(total_value)} ISK` : null;
+  const attackerName = attackerIsNpc ? '' : final_blow_char_name;
+  const attackerTicker = attackerIsNpc
+    ? ''
+    : final_blow_alliance_ticker || final_blow_corp_ticker || '';
  const killTimeAgo = kill_time ? formatTimeMixed(kill_time) : '0h ago';
-
  const attackerSubscript = getAttackerSubscript(killDetails);

-  const { victimCorpLogoUrl, victimAllianceLogoUrl, victimShipUrl } = buildVictimImageUrls({
+  // Victim images, including the ship
+  const {
+    victimCorpLogoUrl,
+    victimAllianceLogoUrl,
+    victimShipUrl,
+  } = buildVictimImageUrls({
    victim_char_id,
    victim_ship_type_id,
    victim_corp_id,
    victim_alliance_id,
  });

+  // Attacker corp/alliance
  const { attackerCorpLogoUrl, attackerAllianceLogoUrl } = buildAttackerImageUrls({
    final_blow_char_id,
    final_blow_corp_id,
    final_blow_alliance_id,
  });

-  const { url: victimPrimaryLogoUrl, tooltip: victimPrimaryTooltip } = getPrimaryLogoAndTooltip(
-    victimAllianceLogoUrl,
-    victimCorpLogoUrl,
-    victim_alliance_name,
-    victim_corp_name,
-    'Victim',
-  );
+  // Victim corp/alliance logo
+  const { url: victimPrimaryLogoUrl, tooltip: victimPrimaryTooltip } =
+    getPrimaryLogoAndTooltip(
+      victimAllianceLogoUrl,
+      victimCorpLogoUrl,
+      victim_alliance_name,
+      victim_corp_name,
+      'Victim'
+    );

-  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } = getAttackerPrimaryImageAndTooltip(
-    attackerIsNpc,
-    attackerAllianceLogoUrl,
-    attackerCorpLogoUrl,
-    final_blow_alliance_name,
-    final_blow_corp_name,
-    final_blow_ship_type_id,
-  );
-
-  // Define attackerTicker to use the alliance ticker if available, otherwise the corp ticker.
-  const attackerTicker = attackerIsNpc ? '' : final_blow_alliance_ticker || final_blow_corp_ticker || '';
-
-  // For the attacker image link: if the attacker is not an NPC, link to the character page; otherwise, link to the kill page.
-  const attackerLink = attackerIsNpc ? zkillLink('kill', killmail_id) : zkillLink('character', final_blow_char_id);
+  // Attacker corp/alliance or NPC ship
+  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } =
+    getAttackerPrimaryImageAndTooltip(
+      attackerIsNpc,
+      attackerAllianceLogoUrl,
+      attackerCorpLogoUrl,
+      final_blow_alliance_name,
+      final_blow_corp_name,
+      final_blow_ship_type_id
+    );

  return (
    <div
      className={clsx(
        'h-10 flex items-center border-b border-stone-800',
-        'text-xs whitespace-nowrap overflow-hidden leading-none',
+        'text-xs whitespace-nowrap overflow-hidden leading-none'
      )}
    >
-      {/* Victim Section */}
      <div className="flex items-center gap-1">
        {victimShipUrl && (
          <div className="relative shrink-0 w-8 h-8 overflow-hidden">
@@ -114,14 +128,20 @@ export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, syst
            >
              <img
                src={victimShipUrl}
-                alt="Victim Ship"
-                className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
+                alt="VictimShip"
+                className={clsx(
+                  classes.killRowImage,
+                  'w-full h-full object-contain'
+                )}
              />
            </a>
          </div>
        )}
        {victimPrimaryLogoUrl && (
-          <WdTooltipWrapper content={victimPrimaryTooltip} position={TooltipPosition.top}>
+          <WdTooltipWrapper
+            content={victimPrimaryTooltip}
+            position={TooltipPosition.top}
+          >
            <a
              href={zkillLink('kill', killmail_id)}
              target="_blank"
@@ -130,14 +150,17 @@ export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, syst
            >
              <img
                src={victimPrimaryLogoUrl}
-                alt="Victim Primary Logo"
-                className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
+                alt="VictimPrimaryLogo"
+                className={clsx(
+                  classes.killRowImage,
+                  'w-full h-full object-contain'
+                )}
              />
            </a>
          </WdTooltipWrapper>
        )}
      </div>
-      <div className="flex flex-col ml-2 flex-1 min-w-0 overflow-hidden leading-[1rem]">
+      <div className="flex flex-col ml-2 min-w-0 overflow-hidden leading-[1rem]">
        <div className="truncate text-stone-200">
          {victim_char_name}
          <span className="text-stone-400"> / {victimAffiliationTicker}</span>
@@ -153,17 +176,20 @@ export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, syst
        </div>
      </div>
      <div className="flex items-center ml-auto gap-2">
-        <div className="flex flex-col items-end flex-1 min-w-0 overflow-hidden text-right leading-[1rem]">
-          {!attackerIsNpc && (final_blow_char_name || attackerTicker) && (
+        <div className="flex flex-col items-end min-w-0 overflow-hidden text-right leading-[1rem]">
+          {!attackerIsNpc && (attackerName || attackerTicker) && (
            <div className="truncate text-stone-200">
-              {final_blow_char_name}
-              {!attackerIsNpc && attackerTicker && <span className="ml-1 text-stone-400">/ {attackerTicker}</span>}
+              {attackerName}
+              {attackerTicker && (
+                <span className="ml-1 text-stone-400">/ {attackerTicker}</span>
+              )}
            </div>
          )}
          <div className="truncate text-stone-400">
            {!onlyOneSystem && systemName ? (
              <>
-                {systemName} / <span className="ml-1 text-red-400">{killTimeAgo}</span>
+                {systemName} /{' '}
+                <span className="ml-1 text-red-400">{killTimeAgo}</span>
              </>
            ) : (
              <span className="text-red-400">{killTimeAgo}</span>
@@ -171,24 +197,30 @@ export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, syst
          </div>
        </div>
        {attackerPrimaryImageUrl && (
-          <WdTooltipWrapper content={attackerPrimaryTooltip} position={TooltipPosition.top}>
+          <WdTooltipWrapper
+            content={attackerPrimaryTooltip}
+            position={TooltipPosition.top}
+          >
            <a
-              href={attackerLink}
+              href={zkillLink('kill', killmail_id)}
              target="_blank"
              rel="noopener noreferrer"
              className="relative block shrink-0 w-8 h-8 overflow-hidden"
            >
              <img
                src={attackerPrimaryImageUrl}
-                alt={attackerIsNpc ? 'NPC Ship' : 'Attacker Primary Logo'}
-                className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
+                alt={attackerIsNpc ? 'NpcShip' : 'AttackerPrimaryLogo'}
+                className={clsx(
+                  classes.killRowImage,
+                  'w-full h-full object-contain'
+                )}
              />
              {attackerSubscript && (
                <span
                  className={clsx(
                    classes.attackerCountLabel,
                    attackerSubscript.cssClass,
-                    'text-[0.6rem] leading-none px-[2px]',
+                    'text-[0.6rem] leading-none px-[2px]'
                  )}
                >
                  {attackerSubscript.label}
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/FullKillRow.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/FullKillRow.tsx
@@ -0,0 +1,268 @@
+import React from 'react';
+import clsx from 'clsx';
+import { DetailedKill } from '@/hooks/Mapper/types/kills';
+import {
+  formatISK,
+  formatTimeMixed,
+  zkillLink,
+  getAttackerSubscript,
+  buildVictimImageUrls,
+  buildAttackerImageUrls,
+  getPrimaryLogoAndTooltip,
+  getAttackerPrimaryImageAndTooltip,
+} from '../helpers';
+import { VictimRowSubInfo } from './VictimRowSubInfo';
+import { WdTooltipWrapper } from '../../../../ui-kit/WdTooltipWrapper';
+import classes from './SystemKillRow.module.scss';
+import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
+
+export interface FullKillRowProps {
+  killDetails: DetailedKill;
+  systemName: string;
+  onlyOneSystem: boolean;
+}
+
+export const FullKillRow: React.FC<FullKillRowProps> = ({
+  killDetails,
+  systemName,
+  onlyOneSystem,
+}) => {
+  const {
+    killmail_id = 0,
+    // Victim data
+    victim_char_name = '',
+    victim_alliance_ticker = '',
+    victim_corp_ticker = '',
+    victim_ship_name = '',
+    victim_char_id = 0,
+    victim_corp_id = 0,
+    victim_alliance_id = 0,
+    victim_ship_type_id = 0,
+    victim_corp_name = '',
+    victim_alliance_name = '',
+    // Attacker data
+    final_blow_char_id = 0,
+    final_blow_char_name = '',
+    final_blow_alliance_ticker = '',
+    final_blow_corp_ticker = '',
+    final_blow_corp_name = '',
+    final_blow_alliance_name = '',
+    final_blow_corp_id = 0,
+    final_blow_alliance_id = 0,
+    final_blow_ship_name = '',
+    final_blow_ship_type_id = 0,
+    total_value = 0,
+    kill_time = '',
+  } = killDetails || {};
+
+  const attackerIsNpc = final_blow_char_id === 0;
+  const victimAffiliation = victim_alliance_ticker || victim_corp_ticker || null;
+  const attackerAffiliation = attackerIsNpc
+    ? ''
+    : final_blow_alliance_ticker || final_blow_corp_ticker || '';
+
+  const killValueFormatted =
+    total_value != null && total_value > 0 ? `${formatISK(total_value)} ISK` : null;
+  const killTimeAgo = kill_time ? formatTimeMixed(kill_time) : '0h ago';
+
+  // Build victim images
+  const {
+    victimPortraitUrl,
+    victimCorpLogoUrl,
+    victimAllianceLogoUrl,
+    victimShipUrl,
+  } = buildVictimImageUrls({
+    victim_char_id,
+    victim_ship_type_id,
+    victim_corp_id,
+    victim_alliance_id,
+  });
+
+  // Build attacker images
+  const {
+    attackerPortraitUrl,
+    attackerCorpLogoUrl,
+    attackerAllianceLogoUrl,
+  } = buildAttackerImageUrls({
+    final_blow_char_id,
+    final_blow_corp_id,
+    final_blow_alliance_id,
+  });
+
+  // Primary image for victim
+  const { url: victimPrimaryImageUrl, tooltip: victimPrimaryTooltip } =
+    getPrimaryLogoAndTooltip(
+      victimAllianceLogoUrl,
+      victimCorpLogoUrl,
+      victim_alliance_name,
+      victim_corp_name,
+      'Victim'
+    );
+
+  // Primary image for attacker
+  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } =
+    getAttackerPrimaryImageAndTooltip(
+      attackerIsNpc,
+      attackerAllianceLogoUrl,
+      attackerCorpLogoUrl,
+      final_blow_alliance_name,
+      final_blow_corp_name,
+      final_blow_ship_type_id
+    );
+
+  const attackerSubscript = getAttackerSubscript(killDetails);
+
+  return (
+    <div
+      className={clsx(
+        classes.killRowContainer,
+        'w-full text-sm py-1 px-2',
+        'flex flex-col sm:flex-row'
+      )}
+    >
+      <div className="w-full flex flex-col sm:flex-row items-start gap-2">
+        {/* Victim Section */}
+        <div className="flex items-start gap-1 min-w-0">
+          {victimShipUrl && (
+            <div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
+              <a
+                href={zkillLink('kill', killmail_id)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block w-full h-full"
+              >
+                <img
+                  src={victimShipUrl}
+                  alt="VictimShip"
+                  className={clsx(
+                    classes.killRowImage,
+                    'w-full h-full object-contain'
+                  )}
+                />
+              </a>
+            </div>
+          )}
+          {victimPrimaryImageUrl && (
+            <WdTooltipWrapper
+              content={victimPrimaryTooltip}
+              position={TooltipPosition.top}
+            >
+              <div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
+                <a
+                  href={zkillLink('kill', killmail_id)}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block w-full h-full"
+                >
+                  <img
+                    src={victimPrimaryImageUrl}
+                    alt="VictimPrimaryLogo"
+                    className={clsx(
+                      classes.killRowImage,
+                      'w-full h-full object-contain'
+                    )}
+                  />
+                </a>
+              </div>
+            </WdTooltipWrapper>
+          )}
+          <VictimRowSubInfo
+            victimCharName={victim_char_name}
+            victimCharacterId={victim_char_id}
+            victimPortraitUrl={victimPortraitUrl}
+          />
+          <div className="flex flex-col text-stone-200 leading-4 min-w-0 overflow-hidden">
+            <div className="truncate font-semibold">
+              {victim_char_name}
+              {victimAffiliation && (
+                <span className="ml-1 text-stone-400">/ {victimAffiliation}</span>
+              )}
+            </div>
+            <div className="truncate text-stone-300">
+              {victim_ship_name}
+              {killValueFormatted && (
+                <>
+                  <span className="ml-1 text-stone-400">/</span>
+                  <span className="ml-1 text-green-400">{killValueFormatted}</span>
+                </>
+              )}
+            </div>
+            <div className="truncate text-stone-400">
+              {!onlyOneSystem && systemName && <span>{systemName}</span>}
+            </div>
+          </div>
+        </div>
+        {/* Attacker Section */}
+        <div className="flex items-start gap-1 min-w-0 sm:ml-auto">
+          <div className="flex flex-col items-end leading-4 min-w-0 overflow-hidden text-right">
+            {!attackerIsNpc && (
+              <div className="truncate font-semibold">
+                {final_blow_char_name}
+                {attackerAffiliation && (
+                  <span className="ml-1 text-stone-400">/ {attackerAffiliation}</span>
+                )}
+              </div>
+            )}
+            {!attackerIsNpc && final_blow_ship_name && (
+              <div className="truncate text-stone-300">{final_blow_ship_name}</div>
+            )}
+            <div className="truncate text-red-400">{killTimeAgo}</div>
+          </div>
+          {(!attackerIsNpc && attackerPortraitUrl && final_blow_char_id > 0) && (
+            <div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
+              <a
+                href={zkillLink('character', final_blow_char_id)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block w-full h-full"
+              >
+                <img
+                  src={attackerPortraitUrl}
+                  alt="AttackerPortrait"
+                  className={clsx(
+                    classes.killRowImage,
+                    'w-full h-full object-contain'
+                  )}
+                />
+              </a>
+            </div>
+          )}
+          {attackerPrimaryImageUrl && (
+            <WdTooltipWrapper
+              content={attackerPrimaryTooltip}
+              position={TooltipPosition.top}
+            >
+              <div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
+                <a
+                  href={zkillLink('kill', killmail_id)}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block w-full h-full"
+                >
+                  <img
+                    src={attackerPrimaryImageUrl}
+                    alt={attackerIsNpc ? 'NpcShip' : 'AttackerPrimaryLogo'}
+                    className={clsx(
+                      classes.killRowImage,
+                      'w-full h-full object-contain'
+                    )}
+                  />
+                  {attackerSubscript && (
+                    <span
+                      className={clsx(
+                        attackerSubscript.cssClass,
+                        classes.attackerCountLabel
+                      )}
+                    >
+                      {attackerSubscript.label}
+                    </span>
+                  )}
+                </a>
+              </div>
+            </WdTooltipWrapper>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/KillItemTemplate.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/KillItemTemplate.tsx
@@ -1,20 +0,0 @@
-import { DetailedKill } from '@/hooks/Mapper/types/kills';
-import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
-import { KillRow } from './SystemKillsRow';
-import clsx from 'clsx';
-
-export function KillItemTemplate(
-  systemNameMap: Record<string, string>,
-  onlyOneSystem: boolean,
-  kill: DetailedKill,
-  options: VirtualScrollerTemplateOptions,
-) {
-  const systemIdStr = String(kill.solar_system_id);
-  const systemName = systemNameMap[systemIdStr] || `System ${systemIdStr}`;
-
-  return (
-    <div style={{ height: `${options.props.itemSize}px` }} className={clsx({ 'bg-gray-900': options.odd })}>
-      <KillRow killDetails={kill} systemName={systemName} onlyOneSystem={onlyOneSystem} />
-    </div>
-  );
-}
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/SystemKillRow.module.scss
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/SystemKillRow.module.scss
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/SystemKillsRow.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/SystemKillsRow.tsx
@@ -1,15 +1,24 @@
 import React from 'react';
 import { DetailedKill } from '@/hooks/Mapper/types/kills';
-import { KillRowDetail } from './KillRowDetail.tsx';
+import { CompactKillRow } from './CompactKillRow';
+import { FullKillRow } from './FullKillRow';

 export interface KillRowProps {
  killDetails: DetailedKill;
  systemName: string;
+  isCompact?: boolean;
  onlyOneSystem?: boolean;
 }

-const KillRowComponent: React.FC<KillRowProps> = ({ killDetails, systemName, onlyOneSystem = false }) => {
-  return <KillRowDetail killDetails={killDetails} systemName={systemName} onlyOneSystem={onlyOneSystem} />;
-};
+export const KillRow: React.FC<KillRowProps> = ({
+  killDetails,
+  systemName,
+  isCompact = false,
+  onlyOneSystem = false,
+}) => {
+  if (isCompact) {
+    return <CompactKillRow killDetails={killDetails} systemName={systemName} onlyOneSystem={onlyOneSystem} />;
+  }

-export const KillRow = React.memo(KillRowComponent);
+  return <FullKillRow killDetails={killDetails} systemName={systemName} onlyOneSystem={onlyOneSystem} />;
+};
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/SystemKillsSettingsDialog.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/SystemKillsSettingsDialog.tsx
@@ -1,14 +1,13 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Dialog } from 'primereact/dialog';
 import { Button } from 'primereact/button';
-import { WdImgButton } from '@/hooks/Mapper/components/ui-kit';
+import { WdImgButton, SystemView, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
 import { PrimeIcons } from 'primereact/api';
 import { useKillsWidgetSettings } from '../hooks/useKillsWidgetSettings';
 import {
  AddSystemDialog,
  SearchOnSubmitCallback,
 } from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
-import { SystemView, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';

 interface KillsSettingsDialogProps {
  visible: boolean;
@@ -18,39 +17,40 @@ interface KillsSettingsDialogProps {
 export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visible, setVisible }) => {
  const [globalSettings, setGlobalSettings] = useKillsWidgetSettings();
  const localRef = useRef({
+    compact: globalSettings.compact,
    showAll: globalSettings.showAll,
    whOnly: globalSettings.whOnly,
    excludedSystems: globalSettings.excludedSystems || [],
-    timeRange: globalSettings.timeRange,
  });

  const [, forceRender] = useState(0);
+
  const [addSystemDialogVisible, setAddSystemDialogVisible] = useState(false);

  useEffect(() => {
    if (visible) {
      localRef.current = {
+        compact: globalSettings.compact,
        showAll: globalSettings.showAll,
        whOnly: globalSettings.whOnly,
        excludedSystems: globalSettings.excludedSystems || [],
-        timeRange: globalSettings.timeRange,
      };
      forceRender(n => n + 1);
    }
  }, [visible, globalSettings]);

-  const handleWHChange = useCallback((checked: boolean) => {
+  const handleCompactChange = useCallback((checked: boolean) => {
    localRef.current = {
      ...localRef.current,
-      whOnly: checked,
+      compact: checked,
    };
    forceRender(n => n + 1);
  }, []);

-  const handleTimeRangeChange = useCallback((newTimeRange: number) => {
+  const handleWHChange = useCallback((checked: boolean) => {
    localRef.current = {
      ...localRef.current,
-      timeRange: newTimeRange,
+      whOnly: checked,
    };
    forceRender(n => n + 1);
  }, []);
@@ -88,19 +88,22 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl

  const localData = localRef.current;
  const excluded = localData.excludedSystems || [];
-  const timeRangeOptions = [4, 12, 24];
-
-  // Ensure timeRange is one of the valid options
-  useEffect(() => {
-    if (visible && !timeRangeOptions.includes(localData.timeRange)) {
-      // If current timeRange is not in options, set it to the default (4 hours)
-      handleTimeRangeChange(4);
-    }
-  }, [visible, localData.timeRange, handleTimeRangeChange]);

  return (
    <Dialog header="Kills Settings" visible={visible} style={{ width: '440px' }} draggable={false} onHide={handleHide}>
      <div className="flex flex-col gap-3 p-2.5">
+        <div className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            id="kills-compact-mode"
+            checked={localData.compact}
+            onChange={e => handleCompactChange(e.target.checked)}
+          />
+          <label htmlFor="kills-compact-mode" className="cursor-pointer">
+            Use compact mode
+          </label>
+        </div>
+
        <div className="flex items-center gap-2">
          <input
            type="checkbox"
@@ -108,30 +111,11 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
            checked={localData.whOnly}
            onChange={e => handleWHChange(e.target.checked)}
          />
-          <label htmlFor="kills-wormhole-only-mode" className="cursor-pointer">
+          <label htmlFor="kills-wh-only-mode" className="cursor-pointer">
            Only show wormhole kills
          </label>
        </div>

-        <div className="flex flex-col gap-1">
-          <span className="text-sm">Time Range:</span>
-          <div className="flex flex-wrap gap-2">
-            {timeRangeOptions.map(option => (
-              <label key={option} className="cursor-pointer flex items-center gap-1">
-                <input
-                  type="radio"
-                  name="timeRange"
-                  value={option}
-                  checked={localData.timeRange === option}
-                  onChange={() => handleTimeRangeChange(option)}
-                />
-                <span className="text-sm">{option} Hours</span>
-              </label>
-            ))}
-          </div>
-        </div>
-
-        {/* Excluded Systems */}
        <div className="flex flex-col gap-1">
          <div className="flex items-center justify-between">
            <label className="text-sm text-stone-400">Excluded Systems</label>
@@ -144,7 +128,8 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
          {excluded.length === 0 && <div className="text-stone-500 text-xs italic">No systems excluded.</div>}
          {excluded.map(sysId => (
            <div key={sysId} className="flex items-center justify-between border-b border-stone-600 py-1 px-1 text-xs">
-              <SystemView systemId={sysId.toString()} hideRegion />
+              <SystemView systemId={sysId.toString()} hideRegion compact/>
+
              <WdImgButton
                className={PrimeIcons.TRASH}
                onClick={() => handleRemoveSystem(sysId)}
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/VictimRowSubInfo.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/VictimRowSubInfo.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import clsx from 'clsx';
+import { zkillLink } from '../helpers';
+import classes from './SystemKillRow.module.scss';
+
+interface VictimRowSubInfoProps {
+  victimCharacterId: number | null;
+  victimPortraitUrl: string | null;
+  victimCharName?: string;
+}
+
+export const VictimRowSubInfo: React.FC<VictimRowSubInfoProps> = ({
+  victimCharacterId = 0,
+  victimPortraitUrl,
+  victimCharName,
+}) => {
+  if (!victimPortraitUrl || !victimCharacterId || victimCharacterId <= 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-start gap-1">
+      <div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
+        <a
+          href={zkillLink('character', victimCharacterId)}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block w-full h-full"
+        >
+          <img
+            src={victimPortraitUrl}
+            alt={victimCharName || 'Victim Portrait'}
+            className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
+          />
+        </a>
+      </div>
+    </div>
+  );
+};
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/helpers/linkHelpers.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/helpers/linkHelpers.ts
@@ -1,5 +1,5 @@
 const ZKILL_URL = 'https://zkillboard.com';
-import { getEveImageUrl } from '@/hooks/Mapper/helpers';
+const BASE_IMAGE_URL = 'https://images.evetech.net';

 export function zkillLink(type: 'kill' | 'character' | 'corporation' | 'alliance', id?: number | null): string {
  if (!id) return `${ZKILL_URL}`;
@@ -10,7 +10,21 @@ export function zkillLink(type: 'kill' | 'character' | 'corporation' | 'alliance
  return `${ZKILL_URL}`;
 }

-export const eveImageUrl = getEveImageUrl;
+export function eveImageUrl(
+  category: 'characters' | 'corporations' | 'alliances' | 'types',
+  id?: number | null,
+  variation: string = 'icon',
+  size?: number,
+): string | null {
+  if (!id || id <= 0) {
+    return null;
+  }
+  let url = `${BASE_IMAGE_URL}/${category}/${id}/${variation}`;
+  if (size) {
+    url += `?size=${size}`;
+  }
+  return url;
+}

 export function buildVictimImageUrls(args: {
  victim_char_id?: number | null;
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/hooks/useKillsWidgetSettings.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/hooks/useKillsWidgetSettings.ts
@@ -2,19 +2,19 @@ import { useMemo, useCallback } from 'react';
 import useLocalStorageState from 'use-local-storage-state';

 export interface KillsWidgetSettings {
+  compact: boolean;
  showAll: boolean;
  whOnly: boolean;
  excludedSystems: number[];
  version: number;
-  timeRange: number;
 }

 export const DEFAULT_KILLS_WIDGET_SETTINGS: KillsWidgetSettings = {
+  compact: true,
  showAll: false,
  whOnly: true,
  excludedSystems: [],
-  version: 2,
-  timeRange: 4,
+  version: 0,
 };

 function mergeWithDefaults(settings?: Partial<KillsWidgetSettings>): KillsWidgetSettings {
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/hooks/useSystemKills.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/hooks/useSystemKills.ts
@@ -1,10 +1,9 @@
 import { useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import debounce from 'lodash.debounce';
-import { Commands, OutCommand } from '@/hooks/Mapper/types/mapHandlers';
+import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
 import { DetailedKill } from '@/hooks/Mapper/types/kills';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useKillsWidgetSettings } from './useKillsWidgetSettings';
-import { useMapEventListener, MapEvent } from '@/hooks/Mapper/events';

 interface UseSystemKillsProps {
  systemId?: string;
@@ -19,8 +18,11 @@ function combineKills(existing: DetailedKill[], incoming: DetailedKill[], sinceH
  const byId: Record<string, DetailedKill> = {};

  for (const kill of [...existing, ...incoming]) {
-    if (!kill.kill_time) continue;
+    if (!kill.kill_time) {
+      continue;
+    }
    const killTimeMs = new Date(kill.kill_time).valueOf();
+
    if (killTimeMs >= cutoff) {
      byId[kill.killmail_id] = kill;
    }
@@ -29,44 +31,15 @@ function combineKills(existing: DetailedKill[], incoming: DetailedKill[], sinceH
  return Object.values(byId);
 }

-interface DetailedKillsEvent extends MapEvent<Commands> {
-  payload: Record<string, DetailedKill[]>;
-}
-
 export function useSystemKills({ systemId, outCommand, showAllVisible = false, sinceHours = 24 }: UseSystemKillsProps) {
  const { data, update } = useMapRootState();
  const { detailedKills = {}, systems = [] } = data;
+
  const [settings] = useKillsWidgetSettings();
  const excludedSystems = settings.excludedSystems;

-  const effectiveSinceHours = sinceHours;
-
-  const updateDetailedKills = useCallback(
-    (newKillsMap: Record<string, DetailedKill[]>) => {
-      update(prev => {
-        const oldKills = prev.detailedKills ?? {};
-        const updated = { ...oldKills };
-        for (const [sid, killsArr] of Object.entries(newKillsMap)) {
-          updated[sid] = killsArr;
-        }
-        return { ...prev, detailedKills: updated };
-      }, true);
-    },
-    [update],
-  );
-
-  useMapEventListener((event: MapEvent<Commands>) => {
-    if (event.name === Commands.detailedKillsUpdated) {
-      const detailedEvent = event as DetailedKillsEvent;
-      if (systemId && !Object.keys(detailedEvent.payload).includes(systemId.toString())) {
-        return false;
-      }
-      updateDetailedKills(detailedEvent.payload);
-      return true;
-    }
-    return false;
-  });
-
+  // When showing all visible kills, filter out excluded systems;
+  // when showAllVisible is false, ignore the exclusion filter.
  const effectiveSystemIds = useMemo(() => {
    if (showAllVisible) {
      return systems.map(s => s.id).filter(id => !excludedSystems.includes(Number(id)));
@@ -76,6 +49,7 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s

  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
+
  const didFallbackFetch = useRef(Object.keys(detailedKills).length !== 0);

  const mergeKillsIntoGlobal = useCallback(
@@ -86,14 +60,17 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s

        for (const [sid, newKills] of Object.entries(killsMap)) {
          const existing = updated[sid] ?? [];
-          const combined = combineKills(existing, newKills, effectiveSinceHours);
+          const combined = combineKills(existing, newKills, sinceHours);
          updated[sid] = combined;
        }

-        return { ...prev, detailedKills: updated };
+        return {
+          ...prev,
+          detailedKills: updated,
+        };
      });
    },
-    [update, effectiveSinceHours],
+    [update, sinceHours],
  );

  const fetchKills = useCallback(
@@ -109,15 +86,16 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
          eventType = OutCommand.getSystemsKills;
          requestData = {
            system_ids: effectiveSystemIds,
-            since_hours: effectiveSinceHours,
+            since_hours: sinceHours,
          };
        } else if (systemId) {
          eventType = OutCommand.getSystemKills;
          requestData = {
            system_id: systemId,
-            since_hours: effectiveSinceHours,
+            since_hours: sinceHours,
          };
        } else {
+          // If there's no system and not showing all, do nothing
          setIsLoading(false);
          return;
        }
@@ -127,11 +105,14 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
          data: requestData,
        });

+        // Single system => `resp.kills`
        if (resp?.kills) {
          const arr = resp.kills as DetailedKill[];
          const sid = systemId ?? 'unknown';
          mergeKillsIntoGlobal({ [sid]: arr });
-        } else if (resp?.systems_kills) {
+        }
+        // multiple systems => `resp.systems_kills`
+        else if (resp?.systems_kills) {
          mergeKillsIntoGlobal(resp.systems_kills as Record<string, DetailedKill[]>);
        } else {
          console.warn('[useSystemKills] Unexpected kills response =>', resp);
@@ -143,7 +124,7 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
        setIsLoading(false);
      }
    },
-    [showAllVisible, systemId, outCommand, effectiveSystemIds, effectiveSinceHours, mergeKillsIntoGlobal],
+    [showAllVisible, systemId, outCommand, effectiveSystemIds, sinceHours, mergeKillsIntoGlobal],
  );

  const debouncedFetchKills = useMemo(
@@ -156,26 +137,25 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
  );

  const finalKills = useMemo(() => {
-    let result: DetailedKill[] = [];
-
    if (showAllVisible) {
-      result = effectiveSystemIds.flatMap(sid => detailedKills[sid] ?? []);
+      return effectiveSystemIds.flatMap(sid => detailedKills[sid] ?? []);
    } else if (systemId) {
-      result = detailedKills[systemId] ?? [];
+      return detailedKills[systemId] ?? [];
    } else if (didFallbackFetch.current) {
-      result = effectiveSystemIds.flatMap(sid => detailedKills[sid] ?? []);
+      // if we already did a fallback, we may have data for multiple systems
+      return effectiveSystemIds.flatMap(sid => detailedKills[sid] ?? []);
    }
-
-    return result;
-  }, [showAllVisible, systemId, effectiveSystemIds, detailedKills, didFallbackFetch]);
+    return [];
+  }, [showAllVisible, systemId, effectiveSystemIds, detailedKills]);

  const effectiveIsLoading = isLoading && finalKills.length === 0;

  useEffect(() => {
    if (!systemId && !showAllVisible && !didFallbackFetch.current) {
      didFallbackFetch.current = true;
+      // Cancel any queued debounced calls, then do the fallback.
      debouncedFetchKills.cancel();
-      fetchKills(true);
+      fetchKills(true); // forceFallback => fetch as though showAllVisible is true
    }
  }, [systemId, showAllVisible, debouncedFetchKills, fetchKills]);

@@ -183,17 +163,15 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
    if (effectiveSystemIds.length === 0) return;

    if (showAllVisible || systemId) {
-      // Cancel any pending debounced fetch
-      debouncedFetchKills.cancel();
-      // Fetch kills immediately
-      fetchKills();
+      debouncedFetchKills();
+      // Clean up the debounce on unmount or changes
      return () => debouncedFetchKills.cancel();
    }
-  }, [showAllVisible, systemId, effectiveSystemIds, debouncedFetchKills, fetchKills]);
+  }, [showAllVisible, systemId, effectiveSystemIds, debouncedFetchKills]);

  const refetch = useCallback(() => {
    debouncedFetchKills.cancel();
-    fetchKills();
+    fetchKills(); // immediate (non-debounced) call
  }, [debouncedFetchKills, fetchKills]);

  return {
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/hooks/useSystemKillsItemTemplate.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/hooks/useSystemKillsItemTemplate.ts
@@ -1,13 +0,0 @@
-// useSystemKillsItemTemplate.tsx
-import { useCallback } from 'react';
-import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
-import { DetailedKill } from '@/hooks/Mapper/types/kills';
-import { KillItemTemplate } from '../components/KillItemTemplate';
-
-export function useSystemKillsItemTemplate(systemNameMap: Record<string, string>, onlyOneSystem: boolean) {
-  return useCallback(
-    (kill: DetailedKill, options: VirtualScrollerTemplateOptions) =>
-      KillItemTemplate(systemNameMap, onlyOneSystem, kill, options),
-    [systemNameMap, onlyOneSystem],
-  );
-}
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SignatureView/SignatureView.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SignatureView/SignatureView.tsx
@@ -1,36 +1,15 @@
 import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
 import { renderIcon } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
-import { getCharacterPortraitUrl } from '@/hooks/Mapper/helpers';

-export interface SignatureViewProps {
-  signature: SystemSignature;
-  showCharacterPortrait?: boolean;
-}
-
-export const SignatureView = ({ signature, showCharacterPortrait = false }: SignatureViewProps) => {
-  const isWormhole = signature?.group === SignatureGroup.Wormhole;
-  const hasCharacterInfo = showCharacterPortrait && signature.character_eve_id;
-  const groupDisplay = isWormhole ? SignatureGroup.Wormhole : (signature?.group ?? SignatureGroup.CosmicSignature);
-  const characterName = signature.character_name || 'Unknown character';
+export interface SignatureViewProps {}

+export const SignatureView = (sig: SignatureViewProps & SystemSignature) => {
  return (
-    <div className="flex flex-col gap-2">
-      <div className="flex gap-2 items-center px-2">
-        {renderIcon(signature)}
-        <div>{signature?.eve_id}</div>
-        <div>{groupDisplay}</div>
-        {!isWormhole && <div>{signature?.name}</div>}
-        {hasCharacterInfo && (
-          <div className="flex items-center gap-1 ml-2 pl-2 border-l border-stone-700">
-            <img
-              src={getCharacterPortraitUrl(signature.character_eve_id)}
-              alt={characterName}
-              className="w-5 h-5 rounded-sm border border-stone-700"
-            />
-            <div className="text-xs text-stone-300">{characterName}</div>
-          </div>
-        )}
-      </div>
+    <div className="flex gap-2 items-center">
+      {renderIcon(sig)}
+      <div>{sig?.eve_id}</div>
+      <div>{sig?.group ?? SignatureGroup.CosmicSignature}</div>
+      <div>{sig?.name}</div>
    </div>
  );
 };
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureHeader/SystemSignatureHeader.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureHeader/SystemSignatureHeader.tsx
@@ -1,118 +0,0 @@
-import { useRef } from 'react';
-import {
-  InfoDrawer,
-  LayoutEventBlocker,
-  SystemView,
-  TooltipPosition,
-  WdCheckbox,
-  WdImgButton,
-} from '@/hooks/Mapper/components/ui-kit';
-import { PrimeIcons } from 'primereact/api';
-import { CheckboxChangeEvent } from 'primereact/checkbox';
-import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
-import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
-import { COMPACT_MAX_WIDTH } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-
-export type HeaderProps = {
-  sigCount: number;
-  lazyDeleteValue: boolean;
-  onLazyDeleteChange: (checked: boolean) => void;
-  pendingCount: number;
-  pendingTimeRemaining?: number; // Time remaining in ms
-  onUndoClick: () => void;
-  onSettingsClick: () => void;
-};
-
-export const SystemSignaturesHeader = ({
-  sigCount,
-  lazyDeleteValue,
-  onLazyDeleteChange,
-  pendingCount,
-  pendingTimeRemaining,
-  onUndoClick,
-  onSettingsClick,
-}: HeaderProps) => {
-  const {
-    data: { selectedSystems },
-  } = useMapRootState();
-
-  const [systemId] = selectedSystems;
-  const isNotSelectedSystem = selectedSystems.length !== 1;
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const isCompact = useMaxWidth(containerRef, COMPACT_MAX_WIDTH);
-
-  // Format time remaining as seconds
-  const formatTimeRemaining = () => {
-    if (!pendingTimeRemaining) return '';
-    const seconds = Math.ceil(pendingTimeRemaining / 1000);
-    return ` (${seconds}s remaining)`;
-  };
-
-  return (
-    <div ref={containerRef} className="w-full">
-      <div className="flex justify-between items-center text-xs w-full h-full">
-        <div className="flex justify-between items-center gap-1">
-          {!isCompact && (
-            <div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
-              {sigCount ? `[${sigCount}] ` : ''}Signatures {isNotSelectedSystem ? '' : 'in'}
-            </div>
-          )}
-          {!isNotSelectedSystem && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
-        </div>
-
-        <LayoutEventBlocker className="flex gap-2.5">
-          <WdTooltipWrapper content="Enable Lazy delete">
-            <WdCheckbox
-              size="xs"
-              labelSide="left"
-              label={isCompact ? '' : 'Lazy delete'}
-              value={lazyDeleteValue}
-              classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300 whitespace-nowrap text-ellipsis overflow-hidden"
-              onChange={(event: CheckboxChangeEvent) => onLazyDeleteChange(!!event.checked)}
-            />
-          </WdTooltipWrapper>
-
-          {pendingCount > 0 && (
-            <WdImgButton
-              className={PrimeIcons.UNDO}
-              style={{ color: 'red' }}
-              tooltip={{ content: `Undo pending changes (${pendingCount})${formatTimeRemaining()}` }}
-              onClick={onUndoClick}
-            />
-          )}
-
-          <WdImgButton
-            className={PrimeIcons.QUESTION_CIRCLE}
-            tooltip={{
-              position: TooltipPosition.left,
-              content: (
-                <div className="flex flex-col gap-1">
-                  <InfoDrawer title={<b className="text-slate-50">How to add/update signature?</b>}>
-                    In game you need to select one or more signatures <br /> in the list in{' '}
-                    <b className="text-sky-500">Probe scanner</b>. <br /> Use next hotkeys:
-                    <br />
-                    <b className="text-sky-500">Shift + LMB</b> or <b className="text-sky-500">Ctrl + LMB</b>
-                    <br /> or <b className="text-sky-500">Ctrl + A</b> for select all
-                    <br /> and then use <b className="text-sky-500">Ctrl + C</b>, after you need to go <br />
-                    here, select Solar system and paste it with <b className="text-sky-500">Ctrl + V</b>
-                  </InfoDrawer>
-                  <InfoDrawer title={<b className="text-slate-50">How to select?</b>}>
-                    For selecting any signature, click on it <br /> with hotkeys{' '}
-                    <b className="text-sky-500">Shift + LMB</b> or <b className="text-sky-500">Ctrl + LMB</b>
-                  </InfoDrawer>
-                  <InfoDrawer title={<b className="text-slate-50">How to delete?</b>}>
-                    To delete any signature, first select it <br /> and then press <b className="text-sky-500">Del</b>
-                  </InfoDrawer>
-                </div>
-              ),
-            }}
-          />
-
-          <WdImgButton className={PrimeIcons.SLIDERS_H} onClick={onSettingsClick} />
-        </LayoutEventBlocker>
-      </div>
-    </div>
-  );
-};
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureHeader/index.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureHeader/index.ts
@@ -1 +0,0 @@
-export * from './SystemSignatureHeader';
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.tsx
@@ -4,17 +4,20 @@ import { Button } from 'primereact/button';
 import { TabPanel, TabView } from 'primereact/tabview';
 import styles from './SystemSignatureSettingsDialog.module.scss';
 import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components';
-import { Dropdown } from 'primereact/dropdown';
-import {
-  Setting,
-  SettingsTypes,
-  SIGNATURE_SETTINGS,
-  SignatureSettingsType,
-} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
+
+export type Setting = { key: string; name: string; value: boolean; isFilter?: boolean };
+
+export const COSMIC_SIGNATURE = 'Cosmic Signature';
+export const COSMIC_ANOMALY = 'Cosmic Anomaly';
+export const DEPLOYABLE = 'Deployable';
+export const STRUCTURE = 'Structure';
+export const STARBASE = 'Starbase';
+export const SHIP = 'Ship';
+export const DRONE = 'Drone';

 interface SystemSignatureSettingsDialogProps {
-  settings: SignatureSettingsType;
-  onSave: (settings: SignatureSettingsType) => void;
+  settings: Setting[];
+  onSave: (settings: Setting[]) => void;
  onCancel: () => void;
 }

@@ -24,50 +27,19 @@ export const SystemSignatureSettingsDialog = ({
  onCancel,
 }: SystemSignatureSettingsDialogProps) => {
  const [activeIndex, setActiveIndex] = useState(0);
-  const [settings, setSettings] = useState<SignatureSettingsType>(defaultSettings);
+  const [settings, setSettings] = useState<Setting[]>(defaultSettings);

-  const handleSettingsChange = ({ key, type }: Setting, value?: unknown) => {
-    setSettings(prev => {
-      switch (type) {
-        case SettingsTypes.dropdown:
-          return { ...prev, [key]: value };
-        case SettingsTypes.flag:
-          return { ...prev, [key]: !prev[key] };
-      }
-      return prev;
-    });
+  const filterSettings = settings.filter(setting => setting.isFilter);
+  const userSettings = settings.filter(setting => !setting.isFilter);
+
+  const handleSettingsChange = (key: string) => {
+    setSettings(prevState => prevState.map(item => (item.key === key ? { ...item, value: !item.value } : item)));
  };

  const handleSave = useCallback(() => {
    onSave(settings);
  }, [onSave, settings]);

-  const renderSetting = (setting: Setting) => {
-    const val = settings[setting.key];
-    if (setting.options) {
-      return (
-        <div key={setting.key} className="flex items-center justify-between gap-2 mb-2">
-          <label className="text-[#b8b8b8] text-[13px] select-none">{setting.name}</label>
-          <Dropdown
-            value={val}
-            options={setting.options}
-            onChange={e => handleSettingsChange(setting, e.value)}
-            className="w-40"
-          />
-        </div>
-      );
-    }
-
-    return (
-      <PrettySwitchbox
-        key={setting.key}
-        label={setting.name}
-        checked={!!val}
-        setChecked={() => handleSettingsChange(setting)}
-      />
-    );
-  };
-
  return (
    <Dialog header="System Signatures Settings" visible={true} onHide={onCancel} className="w-full max-w-lg h-[500px]">
      <div className="flex flex-col gap-3 justify-between h-full">
@@ -80,14 +52,30 @@ export const SystemSignatureSettingsDialog = ({
            >
              <TabPanel header="Filters" headerClassName={styles.verticalTabHeader}>
                <div className="w-full h-full flex flex-col gap-1">
-                  {SIGNATURE_SETTINGS.filterFlags.map(renderSetting)}
+                  {filterSettings.map(setting => {
+                    return (
+                      <PrettySwitchbox
+                        key={setting.key}
+                        label={setting.name}
+                        checked={setting.value}
+                        setChecked={() => handleSettingsChange(setting.key)}
+                      />
+                    );
+                  })}
                </div>
              </TabPanel>
              <TabPanel header="User Interface" headerClassName={styles.verticalTabHeader}>
                <div className="w-full h-full flex flex-col gap-1">
-                  {SIGNATURE_SETTINGS.uiFlags.map(renderSetting)}
-                  <div className="my-2 border-t border-stone-700/50"></div>
-                  {SIGNATURE_SETTINGS.uiOther.map(renderSetting)}
+                  {userSettings.map(setting => {
+                    return (
+                      <PrettySwitchbox
+                        key={setting.key}
+                        label={setting.name}
+                        checked={setting.value}
+                        setChecked={() => handleSettingsChange(setting.key)}
+                      />
+                    );
+                  })}
                </div>
              </TabPanel>
            </TabView>
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures.module.scss
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures.module.scss
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures.tsx
@@ -1,137 +1,176 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
 import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
-import { SystemSignaturesContent } from './SystemSignaturesContent';
-import { SystemSignatureSettingsDialog } from './SystemSignatureSettingsDialog';
-import { ExtendedSystemSignature, SystemSignature } from '@/hooks/Mapper/types';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useHotkey } from '@/hooks/Mapper/hooks';
-import { SystemSignaturesHeader } from './SystemSignatureHeader';
-import useLocalStorageState from 'use-local-storage-state';
 import {
-  SETTINGS_KEYS,
-  SETTINGS_VALUES,
-  SIGNATURE_DELETION_TIMEOUTS,
-  SIGNATURE_SETTING_STORE_KEY,
-  SIGNATURE_WINDOW_ID,
-  SIGNATURES_DELETION_TIMING,
-  SignatureSettingsType,
-} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
-import { calculateTimeRemaining } from './helpers';
+  InfoDrawer,
+  LayoutEventBlocker,
+  SystemView,
+  TooltipPosition,
+  WdCheckbox,
+  WdImgButton,
+} from '@/hooks/Mapper/components/ui-kit';
+import { SystemSignaturesContent } from './SystemSignaturesContent';
+import {
+  COSMIC_ANOMALY,
+  COSMIC_SIGNATURE,
+  DEPLOYABLE,
+  DRONE,
+  Setting,
+  SHIP,
+  STARBASE,
+  STRUCTURE,
+  SystemSignatureSettingsDialog,
+} from './SystemSignatureSettingsDialog';
+import { SignatureGroup } from '@/hooks/Mapper/types';
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { PrimeIcons } from 'primereact/api';
+
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { CheckboxChangeEvent } from 'primereact/checkbox';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
+import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
+
+const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings_v5_2';
+export const SHOW_DESCRIPTION_COLUMN_SETTING = 'show_description_column_setting';
+export const SHOW_UPDATED_COLUMN_SETTING = 'SHOW_UPDATED_COLUMN_SETTING';
+export const LAZY_DELETE_SIGNATURES_SETTING = 'LAZY_DELETE_SIGNATURES_SETTING';
+export const KEEP_LAZY_DELETE_SETTING = 'KEEP_LAZY_DELETE_ENABLED_SETTING';
+
+const settings: Setting[] = [
+  { key: SHOW_UPDATED_COLUMN_SETTING, name: 'Show Updated Column', value: false, isFilter: false },
+  { key: SHOW_DESCRIPTION_COLUMN_SETTING, name: 'Show Description Column', value: false, isFilter: false },
+  { key: LAZY_DELETE_SIGNATURES_SETTING, name: 'Lazy Delete Signatures', value: false, isFilter: false },
+  { key: KEEP_LAZY_DELETE_SETTING, name: 'Keep "Lazy Delete" Enabled', value: false, isFilter: false },
+  { key: COSMIC_ANOMALY, name: 'Show Anomalies', value: true, isFilter: true },
+  { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true, isFilter: true },
+  { key: DEPLOYABLE, name: 'Show Deployables', value: true, isFilter: true },
+  { key: STRUCTURE, name: 'Show Structures', value: true, isFilter: true },
+  { key: STARBASE, name: 'Show Starbase', value: true, isFilter: true },
+  { key: SHIP, name: 'Show Ships', value: true, isFilter: true },
+  { key: DRONE, name: 'Show Drones And Charges', value: true, isFilter: true },
+  { key: SignatureGroup.Wormhole, name: 'Show Wormholes', value: true, isFilter: true },
+  { key: SignatureGroup.RelicSite, name: 'Show Relic Sites', value: true, isFilter: true },
+  { key: SignatureGroup.DataSite, name: 'Show Data Sites', value: true, isFilter: true },
+  { key: SignatureGroup.OreSite, name: 'Show Ore Sites', value: true, isFilter: true },
+  { key: SignatureGroup.GasSite, name: 'Show Gas Sites', value: true, isFilter: true },
+  { key: SignatureGroup.CombatSite, name: 'Show Combat Sites', value: true, isFilter: true },
+];
+
+const defaultSettings = () => {
+  return [...settings];
+};

 export const SystemSignatures = () => {
-  const [visible, setVisible] = useState(false);
-  const [sigCount, setSigCount] = useState<number>(0);
-  const [pendingSigs, setPendingSigs] = useState<SystemSignature[]>([]);
-  const [pendingTimeRemaining, setPendingTimeRemaining] = useState<number | undefined>();
-  const undoPendingFnRef = useRef<() => void>(() => {});
-
  const {
    data: { selectedSystems },
  } = useMapRootState();

-  const [currentSettings, setCurrentSettings] = useLocalStorageState(SIGNATURE_SETTING_STORE_KEY, {
-    defaultValue: SETTINGS_VALUES,
-  });
-
-  const handleSigCountChange = useCallback((count: number) => {
-    setSigCount(count);
-  }, []);
+  const [visible, setVisible] = useState(false);
+  const [settings, setSettings] = useState<Setting[]>(defaultSettings);

  const [systemId] = selectedSystems;
+
  const isNotSelectedSystem = selectedSystems.length !== 1;

-  const handleSettingsChange = useCallback((newSettings: SignatureSettingsType) => {
-    setCurrentSettings(newSettings);
+  const lazyDeleteValue = useMemo(() => {
+    return settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)!.value;
+  }, [settings]);
+
+  const handleSettingsChange = useCallback((settings: Setting[]) => {
+    setSettings(settings);
+    localStorage.setItem(SIGNATURE_SETTINGS_KEY, JSON.stringify(settings));
    setVisible(false);
  }, []);

  const handleLazyDeleteChange = useCallback((value: boolean) => {
-    setCurrentSettings(prev => ({ ...prev, [SETTINGS_KEYS.LAZY_DELETE_SIGNATURES]: value }));
+    setSettings(settings => {
+      const lazyDelete = settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)!;
+      lazyDelete.value = value;
+      localStorage.setItem(SIGNATURE_SETTINGS_KEY, JSON.stringify(settings));
+      return [...settings];
+    });
  }, []);

-  useHotkey(true, ['z'], event => {
-    if (pendingSigs.length > 0) {
-      event.preventDefault();
-      event.stopPropagation();
-      undoPendingFnRef.current();
-      setPendingSigs([]);
-      setPendingTimeRemaining(undefined);
-    }
-  });
-
-  const handleUndoClick = useCallback(() => {
-    undoPendingFnRef.current();
-    setPendingSigs([]);
-    setPendingTimeRemaining(undefined);
-  }, []);
-
-  const handleSettingsButtonClick = useCallback(() => {
-    setVisible(true);
-  }, []);
-
-  const handlePendingChange = useCallback(
-    (pending: React.MutableRefObject<Record<string, ExtendedSystemSignature>>, newUndo: () => void) => {
-      setPendingSigs(() => {
-        return Object.values(pending.current).filter(sig => sig.pendingDeletion);
-      });
-      undoPendingFnRef.current = newUndo;
-    },
-    [],
-  );
-
-  // Calculate the minimum time remaining for any pending signature
  useEffect(() => {
-    if (pendingSigs.length === 0) {
-      setPendingTimeRemaining(undefined);
-      return;
+    const restoredSettings = localStorage.getItem(SIGNATURE_SETTINGS_KEY);
+
+    if (restoredSettings) {
+      setSettings(JSON.parse(restoredSettings));
    }
+  }, []);

-    const calculate = () => {
-      setPendingTimeRemaining(() => calculateTimeRemaining(pendingSigs));
-    };
-
-    calculate();
-    const interval = setInterval(calculate, 1000);
-    return () => clearInterval(interval);
-  }, [pendingSigs]);
+  const ref = useRef<HTMLDivElement>(null);
+  const compact = useMaxWidth(ref, 260);

  return (
    <Widget
      label={
-        <SystemSignaturesHeader
-          sigCount={sigCount}
-          lazyDeleteValue={currentSettings[SETTINGS_KEYS.LAZY_DELETE_SIGNATURES] as boolean}
-          pendingCount={pendingSigs.length}
-          pendingTimeRemaining={pendingTimeRemaining}
-          onLazyDeleteChange={handleLazyDeleteChange}
-          onUndoClick={handleUndoClick}
-          onSettingsClick={handleSettingsButtonClick}
-        />
+        <div className="flex justify-between items-center text-xs w-full h-full" ref={ref}>
+          <div className="flex justify-between items-center gap-1">
+            {!compact && (
+              <div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
+                Signatures {isNotSelectedSystem ? '' : 'in'}
+              </div>
+            )}
+            {!isNotSelectedSystem && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
+          </div>
+
+          <LayoutEventBlocker className="flex gap-2.5">
+            <WdTooltipWrapper content="Enable Lazy delete">
+              <WdCheckbox
+                size="xs"
+                labelSide="left"
+                label={compact ? '' : 'Lazy delete'}
+                value={lazyDeleteValue}
+                classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300 whitespace-nowrap text-ellipsis overflow-hidden"
+                onChange={(event: CheckboxChangeEvent) => handleLazyDeleteChange(!!event.checked)}
+              />
+            </WdTooltipWrapper>
+
+            <WdImgButton
+              className={PrimeIcons.QUESTION_CIRCLE}
+              tooltip={{
+                position: TooltipPosition.left,
+                // @ts-ignore
+                content: (
+                  <div className="flex flex-col gap-1">
+                    <InfoDrawer title={<b className="text-slate-50">How to add/update signature?</b>}>
+                      In game you need select one or more signatures <br /> in list in{' '}
+                      <b className="text-sky-500">Probe scanner</b>. <br /> Use next hotkeys:
+                      <br />
+                      <b className="text-sky-500">Shift + LMB</b> or <b className="text-sky-500">Ctrl + LMB</b>
+                      <br /> or <b className="text-sky-500">Ctrl + A</b> for select all
+                      <br />
+                      and then use <b className="text-sky-500">Ctrl + C</b>, after you need to go <br />
+                      here select Solar system and paste it with <b className="text-sky-500">Ctrl + V</b>
+                    </InfoDrawer>
+                    <InfoDrawer title={<b className="text-slate-50">How to select?</b>}>
+                      For select any signature need click on that, <br /> with hotkeys{' '}
+                      <b className="text-sky-500">Shift + LMB</b> or <b className="text-sky-500">Ctrl + LMB</b>
+                    </InfoDrawer>
+                    <InfoDrawer title={<b className="text-slate-50">How to delete?</b>}>
+                      For delete any signature first of all you need select before
+                      <br /> and then use <b className="text-sky-500">Del</b>
+                    </InfoDrawer>
+                  </div>
+                ) as React.ReactNode,
+              }}
+            />
+            <WdImgButton className={PrimeIcons.SLIDERS_H} onClick={() => setVisible(true)} />
+          </LayoutEventBlocker>
+        </div>
      }
-      windowId={SIGNATURE_WINDOW_ID}
    >
      {isNotSelectedSystem ? (
        <div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
          System is not selected
        </div>
      ) : (
-        <SystemSignaturesContent
-          systemId={systemId}
-          settings={currentSettings}
-          deletionTiming={
-            SIGNATURE_DELETION_TIMEOUTS[
-              (currentSettings[SETTINGS_KEYS.DELETION_TIMING] as keyof typeof SIGNATURE_DELETION_TIMEOUTS) ||
-                SIGNATURES_DELETION_TIMING.DEFAULT
-            ] as number
-          }
-          onLazyDeleteChange={handleLazyDeleteChange}
-          onCountChange={handleSigCountChange}
-          onPendingChange={handlePendingChange}
-        />
+        <SystemSignaturesContent systemId={systemId} settings={settings} onLazyDeleteChange={handleLazyDeleteChange} />
      )}
      {visible && (
        <SystemSignatureSettingsDialog
-          settings={currentSettings}
+          settings={settings}
          onCancel={() => setVisible(false)}
          onSave={handleSettingsChange}
        />
@@ -139,5 +178,3 @@ export const SystemSignatures = () => {
    </Widget>
  );
 };
-
-export default SystemSignatures;
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.module.scss
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.module.scss
@@ -0,0 +1,10 @@
+.TableRowCompact {
+  height: 8px;
+  max-height: 8px;
+  font-size: 12px !important;
+  line-height: 8px;
+}
+
+.Table {
+
+}
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.tsx
@@ -1,30 +1,29 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+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 {
-  DataTable,
-  DataTableRowClickEvent,
-  DataTableRowMouseEvent,
-  DataTableStateEvent,
-  SortOrder,
-} from 'primereact/datatable';
-import { Column } from 'primereact/column';
-import { PrimeIcons } from 'primereact/api';
-import useLocalStorageState from 'use-local-storage-state';
-
-import { ExtendedSystemSignature, SignatureGroup, SignatureKind, SystemSignature } from '@/hooks/Mapper/types';
-import { SignatureSettings } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings';
-import { WdTooltip, WdTooltipHandlers, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
-import { SignatureView } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SignatureView';
-import {
-  COMPACT_MAX_WIDTH,
  getGroupIdByRawGroup,
  GROUPS_LIST,
-  MEDIUM_MAX_WIDTH,
-  OTHER_COLUMNS_WIDTH,
-  SETTINGS_KEYS,
-  SIGNATURE_WINDOW_ID,
-  SignatureSettingsType,
-} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants';
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';

+import { DataTable, DataTableRowClickEvent, DataTableRowMouseEvent, SortOrder } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import useRefState from 'react-usestateref';
+import { Setting } from '../SystemSignatureSettingsDialog';
+import { useHotkey } from '@/hooks/Mapper/hooks';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
+import { useClipboard } from '@/hooks/Mapper/hooks/useClipboard';
+
+import classes from './SystemSignaturesContent.module.scss';
+import clsx from 'clsx';
+import { SystemSignature } from '@/hooks/Mapper/types';
+import { SignatureView } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SignatureView';
+import {
+  getActualSigs,
+  getRowColorByTimeLeft,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers';
 import {
  renderAddedTimeLeft,
  renderDescription,
@@ -32,13 +31,18 @@ import {
  renderInfoColumn,
  renderUpdatedTimeLeft,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
-import { useSystemSignaturesData } from '../hooks/useSystemSignaturesData';
-import { getSignatureRowClass } from '../helpers/rowStyles';
-import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth';
-import { useClipboard, useHotkey } from '@/hooks/Mapper/hooks';
-
-const renderColIcon = (sig: SystemSignature) => renderIcon(sig);
-
+import useLocalStorageState from 'use-local-storage-state';
+import { PrimeIcons } from 'primereact/api';
+import { SignatureSettings } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings';
+import { useMapEventListener } from '@/hooks/Mapper/events';
+import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
+import { COSMIC_SIGNATURE } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
+import {
+  SHOW_DESCRIPTION_COLUMN_SETTING,
+  SHOW_UPDATED_COLUMN_SETTING,
+  LAZY_DELETE_SIGNATURES_SETTING,
+  KEEP_LAZY_DELETE_SETTING,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures';
 type SystemSignaturesSortSettings = {
  sortField: string;
  sortOrder: SortOrder;
@@ -51,20 +55,12 @@ const SORT_DEFAULT_VALUES: SystemSignaturesSortSettings = {

 interface SystemSignaturesContentProps {
  systemId: string;
-  settings: SignatureSettingsType;
+  settings: Setting[];
  hideLinkedSignatures?: boolean;
  selectable?: boolean;
  onSelect?: (signature: SystemSignature) => void;
  onLazyDeleteChange?: (value: boolean) => void;
-  onCountChange?: (count: number) => void;
-  onPendingChange?: (
-    pending: React.MutableRefObject<Record<string, ExtendedSystemSignature>>,
-    undo: () => void,
-  ) => void;
-  deletionTiming?: number;
-  filterSignature?: (signature: SystemSignature) => boolean;
 }
-
 export const SystemSignaturesContent = ({
  systemId,
  settings,
@@ -72,297 +68,378 @@ export const SystemSignaturesContent = ({
  selectable,
  onSelect,
  onLazyDeleteChange,
-  onCountChange,
-  onPendingChange,
-  deletionTiming,
-  filterSignature,
 }: SystemSignaturesContentProps) => {
-  const [selectedSignatureForDialog, setSelectedSignatureForDialog] = useState<SystemSignature | null>(null);
-  const [showSignatureSettings, setShowSignatureSettings] = useState(false);
+  const { outCommand } = useMapRootState();
+
+  const [signatures, setSignatures, signaturesRef] = useRefState<SystemSignature[]>([]);
+  const [selectedSignatures, setSelectedSignatures] = useState<SystemSignature[]>([]);
  const [nameColumnWidth, setNameColumnWidth] = useState('auto');
-  const [hoveredSignature, setHoveredSignature] = useState<SystemSignature | null>(null);
+  const [selectedSignature, setSelectedSignature] = useState<SystemSignature | null>(null);
+
+  const [hoveredSig, setHoveredSig] = useState<SystemSignature | null>(null);
+
+  const [sortSettings, setSortSettings] = useLocalStorageState<SystemSignaturesSortSettings>('window:signatures:sort', {
+    defaultValue: SORT_DEFAULT_VALUES,
+  });

  const tableRef = useRef<HTMLDivElement>(null);
-  const tooltipRef = useRef<WdTooltipHandlers>(null);
+  const compact = useMaxWidth(tableRef, 260);
+  const medium = useMaxWidth(tableRef, 380);
+  const refData = useRef({ selectable });
+  refData.current = { selectable };

-  const isCompact = useMaxWidth(tableRef, COMPACT_MAX_WIDTH);
-  const isMedium = useMaxWidth(tableRef, MEDIUM_MAX_WIDTH);
+  const tooltipRef = useRef<WdTooltipHandlers>(null);

  const { clipboardContent, setClipboardContent } = useClipboard();

-  const [sortSettings, setSortSettings] = useLocalStorageState<{ sortField: string; sortOrder: SortOrder }>(
-    'window:signatures:sort',
-    { defaultValue: SORT_DEFAULT_VALUES },
-  );
+  const lazyDeleteValue = useMemo(() => {
+    return settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)?.value ?? false;
+  }, [settings]);

-  const { signatures, selectedSignatures, setSelectedSignatures, handleDeleteSelected, handleSelectAll, handlePaste } =
-    useSystemSignaturesData({
-      systemId,
-      settings,
-      onCountChange,
-      onPendingChange,
-      onLazyDeleteChange,
-      deletionTiming,
-    });
-
-  useEffect(() => {
-    if (selectable) return;
-    if (!clipboardContent?.text) return;
-
-    handlePaste(clipboardContent.text);
-
-    setClipboardContent(null);
-  }, [selectable, clipboardContent, handlePaste, setClipboardContent]);
-
-  useHotkey(true, ['a'], handleSelectAll);
-
-  useHotkey(false, ['Backspace', 'Delete'], (event: KeyboardEvent) => {
-    const targetWindow = (event.target as HTMLHtmlElement)?.closest(`[data-window-id="${SIGNATURE_WINDOW_ID}"]`);
-
-    if (!targetWindow) {
-      return;
-    }
-
-    event.preventDefault();
-    event.stopPropagation();
-    handleDeleteSelected();
-  });
+  const keepLazyDeleteValue = useMemo(() => {
+    return settings.find(setting => setting.key === KEEP_LAZY_DELETE_SETTING)?.value ?? false;
+  }, [settings]);

  const handleResize = useCallback(() => {
-    if (!tableRef.current) return;
-
-    setNameColumnWidth(`${tableRef.current.offsetWidth - OTHER_COLUMNS_WIDTH}px`);
+    if (tableRef.current) {
+      const tableWidth = tableRef.current.offsetWidth;
+      const otherColumnsWidth = 276;
+      const availableWidth = tableWidth - otherColumnsWidth;
+      setNameColumnWidth(`${availableWidth}px`);
+    }
  }, []);

-  useEffect(() => {
-    if (!tableRef.current) return;
-
-    const observer = new ResizeObserver(handleResize);
-    observer.observe(tableRef.current);
-    handleResize();
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [handleResize]);
-
-  const handleRowClick = useCallback((e: DataTableRowClickEvent) => {
-    setSelectedSignatureForDialog(e.data as SystemSignature);
-    setShowSignatureSettings(true);
-  }, []);
-
-  const handleSelectSignatures = useCallback(
-    (e: { value: SystemSignature[] }) => {
-      selectable ? onSelect?.(e.value[0]) : setSelectedSignatures(e.value as ExtendedSystemSignature[]);
-    },
-    [selectable],
-  );
-
-  const { showDescriptionColumn, showUpdatedColumn, showCharacterColumn, showCharacterPortrait } = useMemo(
-    () => ({
-      showDescriptionColumn: settings[SETTINGS_KEYS.SHOW_DESCRIPTION_COLUMN] as boolean,
-      showUpdatedColumn: settings[SETTINGS_KEYS.SHOW_UPDATED_COLUMN] as boolean,
-      showCharacterColumn: settings[SETTINGS_KEYS.SHOW_CHARACTER_COLUMN] as boolean,
-      showCharacterPortrait: settings[SETTINGS_KEYS.SHOW_CHARACTER_PORTRAIT] as boolean,
-    }),
+  const groupSettings = useMemo(() => settings.filter(s => (GROUPS_LIST as string[]).includes(s.key)), [settings]);
+  const showDescriptionColumn = useMemo(
+    () => settings.find(s => s.key === SHOW_DESCRIPTION_COLUMN_SETTING)?.value,
    [settings],
  );

-  const filteredSignatures = useMemo<ExtendedSystemSignature[]>(() => {
-    return signatures.filter(sig => {
-      if (filterSignature && !filterSignature(sig)) {
-        return false;
-      }
+  const showUpdatedColumn = useMemo(() => settings.find(s => s.key === SHOW_UPDATED_COLUMN_SETTING)?.value, [settings]);

-      if (hideLinkedSignatures && sig.linked_system) {
-        return false;
-      }
-
-      if (sig.kind === SignatureKind.CosmicSignature) {
-        if (!settings[SETTINGS_KEYS.COSMIC_SIGNATURE]) {
+  const filteredSignatures = useMemo(() => {
+    return signatures
+      .filter(x => {
+        if (hideLinkedSignatures && !!x.linked_system) {
          return false;
        }

-        if (sig.group) {
-          const enabledGroups = Object.keys(settings).filter(
-            x => GROUPS_LIST.includes(x as SignatureGroup) && settings[x as SETTINGS_KEYS],
-          );
+        const isCosmicSignature = x.kind === COSMIC_SIGNATURE;
+        const preparedGroup = getGroupIdByRawGroup(x.group);

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

-        return true;
+        return settings.find(y => y.key === x.kind)?.value;
+      })
+      .sort((a, b) => {
+        return new Date(b.updated_at || 0).getTime() - new Date(a.updated_at || 0).getTime();
+      });
+  }, [signatures, settings, groupSettings, hideLinkedSignatures]);
+
+  const handleGetSignatures = useCallback(async () => {
+    const { signatures } = await outCommand({
+      type: OutCommand.getSignatures,
+      data: { system_id: systemId },
+    });
+
+    setSignatures(signatures);
+  }, [outCommand, systemId]);
+
+  const handleUpdateSignatures = useCallback(
+    async (newSignatures: SystemSignature[], updateOnly: boolean, skipUpdateUntouched?: boolean) => {
+      const { added, updated, removed } = getActualSigs(
+        signaturesRef.current,
+        newSignatures,
+        updateOnly,
+        skipUpdateUntouched,
+      );
+
+      const { signatures: updatedSignatures } = await outCommand({
+        type: OutCommand.updateSignatures,
+        data: {
+          system_id: systemId,
+          added,
+          updated,
+          removed,
+        },
+      });
+
+      setSignatures(() => updatedSignatures);
+      setSelectedSignatures([]);
+    },
+    [outCommand, systemId],
+  );
+
+  const handleDeleteSelected = useCallback(
+    async (e: KeyboardEvent) => {
+      if (selectable) {
+        return;
+      }
+      if (selectedSignatures.length === 0) {
+        return;
      }

-      return settings[sig.kind];
-    });
-  }, [signatures, hideLinkedSignatures, settings, filterSignature]);
+      e.preventDefault();
+      e.stopPropagation();

-  const onRowMouseEnter = useCallback((e: DataTableRowMouseEvent) => {
-    setHoveredSignature(e.data as SystemSignature);
-    tooltipRef.current?.show(e.originalEvent);
+      const selectedSignaturesEveIds = selectedSignatures.map(x => x.eve_id);
+      await handleUpdateSignatures(
+        signatures.filter(x => !selectedSignaturesEveIds.includes(x.eve_id)),
+        false,
+        true,
+      );
+    },
+    [handleUpdateSignatures, selectable, signatures, selectedSignatures],
+  );
+
+  const handleSelectAll = useCallback(() => {
+    setSelectedSignatures(signatures);
+  }, [signatures]);
+
+  const handleSelectSignatures = useCallback(
+    // TODO still will be good to define types if we use typescript
+    // @ts-ignore
+    e => {
+      if (selectable) {
+        onSelect?.(e.value);
+      } else {
+        setSelectedSignatures(e.value);
+      }
+    },
+    [onSelect, selectable],
+  );
+
+  const handlePaste = async (clipboardContent: string) => {
+    const newSignatures = parseSignatures(
+      clipboardContent,
+      settings.map(x => x.key),
+    );
+
+    handleUpdateSignatures(newSignatures, !lazyDeleteValue);
+
+    if (lazyDeleteValue && !keepLazyDeleteValue) {
+      onLazyDeleteChange?.(false);
+    }
+  };
+
+  const handleEnterRow = useCallback(
+    (e: DataTableRowMouseEvent) => {
+      setHoveredSig(filteredSignatures[e.index]);
+      tooltipRef.current?.show(e.originalEvent);
+    },
+    [filteredSignatures],
+  );
+
+  const handleLeaveRow = useCallback((e: DataTableRowMouseEvent) => {
+    tooltipRef.current?.hide(e.originalEvent);
+    setHoveredSig(null);
  }, []);

-  const onRowMouseLeave = useCallback(() => {
-    setHoveredSignature(null);
-    tooltipRef.current?.hide();
-  }, []);
-
-  const refVars = useRef({ settings, selectedSignatures, setSortSettings });
-  refVars.current = { settings, selectedSignatures, setSortSettings };
-
-  // @ts-ignore
-  const getRowClassName = useCallback(rowData => {
-    if (!rowData) {
-      return null;
+  useEffect(() => {
+    if (refData.current.selectable) {
+      return;
    }

-    return getSignatureRowClass(
-      rowData as ExtendedSystemSignature,
-      refVars.current.selectedSignatures,
-      refVars.current.settings[SETTINGS_KEYS.COLOR_BY_TYPE] as boolean,
-    );
+    if (!clipboardContent?.text) {
+      return;
+    }
+
+    handlePaste(clipboardContent.text);
+    setClipboardContent(null);
+  }, [clipboardContent, selectable, lazyDeleteValue, keepLazyDeleteValue]);
+
+  useHotkey(true, ['a'], handleSelectAll);
+  useHotkey(false, ['Backspace', 'Delete'], handleDeleteSelected);
+
+  useEffect(() => {
+    if (!systemId) {
+      setSignatures([]);
+      return;
+    }
+
+    handleGetSignatures();
+  }, [systemId]);
+
+  useMapEventListener(event => {
+    switch (event.name) {
+      case Commands.signaturesUpdated:
+        if (event.data?.toString() !== systemId.toString()) {
+          return;
+        }
+
+        handleGetSignatures();
+        return true;
+    }
+  });
+
+  useEffect(() => {
+    const observer = new ResizeObserver(handleResize);
+    if (tableRef.current) {
+      observer.observe(tableRef.current);
+    }
+
+    handleResize(); // Call on mount to set initial width
+
+    return () => {
+      if (tableRef.current) {
+        observer.unobserve(tableRef.current);
+      }
+    };
  }, []);

-  const handleSortSettings = useCallback(
-    (e: DataTableStateEvent) => refVars.current.setSortSettings({ sortField: e.sortField, sortOrder: e.sortOrder }),
-    [],
-  );
+  const renderToolbar = (/*row: SystemSignature*/) => {
+    return (
+      <div className="flex justify-end items-center gap-2 mr-[4px]">
+        <WdTooltipWrapper content="To Edit Signature do double click">
+          <span className={clsx(PrimeIcons.PENCIL, 'text-[10px]')}></span>
+        </WdTooltipWrapper>
+      </div>
+    );
+  };
+
+  const [showSignatureSettings, setShowSignatureSettings] = useState(false);
+
+  const handleRowClick = (e: DataTableRowClickEvent) => {
+    setSelectedSignature(e.data as SystemSignature);
+    setShowSignatureSettings(true);
+  };

  return (
-    <div ref={tableRef} className="h-full">
-      {filteredSignatures.length === 0 ? (
-        <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
-          No signatures
-        </div>
-      ) : (
-        <DataTable
-          value={filteredSignatures}
-          size="small"
-          selectionMode="multiple"
-          selection={selectedSignatures}
-          metaKeySelection
-          onSelectionChange={handleSelectSignatures}
-          dataKey="eve_id"
-          className="w-full select-none"
-          resizableColumns={false}
-          rowHover
-          selectAll
-          onRowDoubleClick={handleRowClick}
-          sortField={sortSettings.sortField}
-          sortOrder={sortSettings.sortOrder}
-          onSort={handleSortSettings}
-          onRowMouseEnter={onRowMouseEnter}
-          onRowMouseLeave={onRowMouseLeave}
-          // @ts-ignore
-          rowClassName={getRowClassName}
-        >
-          <Column
-            field="icon"
-            header=""
-            body={renderColIcon}
-            bodyClassName="p-0 px-1"
-            style={{ maxWidth: 26, minWidth: 26, width: 26 }}
-          />
-          <Column
-            field="eve_id"
-            header="Id"
-            bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-            style={{ maxWidth: 72, minWidth: 72, width: 72 }}
-            sortable
-          />
-          <Column
-            field="group"
-            header="Group"
-            bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-            style={{ maxWidth: 110, minWidth: 110, width: 110 }}
-            body={sig => sig.group ?? ''}
-            hidden={isCompact}
-            sortable
-          />
-          <Column
-            field="info"
-            header="Info"
-            bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-            style={{ maxWidth: nameColumnWidth }}
-            hidden={isCompact || isMedium}
-            body={renderInfoColumn}
-          />
-          {showDescriptionColumn && (
-            <Column
-              field="description"
-              header="Description"
-              bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-              hidden={isCompact}
-              body={renderDescription}
-              sortable
-            />
-          )}
-          <Column
-            field="inserted_at"
-            header="Added"
-            dataType="date"
-            body={renderAddedTimeLeft}
-            style={{ minWidth: 70, maxWidth: 80 }}
-            bodyClassName="ssc-header text-ellipsis overflow-hidden whitespace-nowrap"
-            sortable
-          />
-          {showUpdatedColumn && (
-            <Column
-              field="updated_at"
-              header="Updated"
-              dataType="date"
-              body={renderUpdatedTimeLeft}
-              style={{ minWidth: 70, maxWidth: 80 }}
-              bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-              sortable
-            />
-          )}
+    <>
+      <div ref={tableRef} className={'h-full '}>
+        {filteredSignatures.length === 0 ? (
+          <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
+            No signatures
+          </div>
+        ) : (
+          <>
+            {/* @ts-ignore */}
+            <DataTable
+              className={classes.Table}
+              value={filteredSignatures}
+              size="small"
+              selectionMode={selectable ? 'single' : 'multiple'}
+              selection={selectedSignatures}
+              metaKeySelection
+              onSelectionChange={handleSelectSignatures}
+              dataKey="eve_id"
+              tableClassName="w-full select-none"
+              resizableColumns={false}
+              onRowDoubleClick={handleRowClick}
+              rowHover
+              selectAll
+              sortField={sortSettings.sortField}
+              sortOrder={sortSettings.sortOrder}
+              onSort={event => setSortSettings(() => ({ sortField: event.sortField, sortOrder: event.sortOrder }))}
+              onRowMouseEnter={compact || medium ? handleEnterRow : undefined}
+              onRowMouseLeave={compact || medium ? handleLeaveRow : undefined}
+              rowClassName={row => {
+                if (selectedSignatures.some(x => x.eve_id === row.eve_id)) {
+                  return clsx(classes.TableRowCompact, 'bg-amber-500/50 hover:bg-amber-500/70 transition duration-200');
+                }

-          {showCharacterColumn && (
-            <Column
-              field="character_name"
-              header="Character"
-              bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
-              sortable
-            ></Column>
-          )}
+                const dateClass = getRowColorByTimeLeft(row.inserted_at ? new Date(row.inserted_at) : undefined);
+                if (!dateClass) {
+                  return clsx(classes.TableRowCompact, 'hover:bg-purple-400/20 transition duration-200');
+                }

-          {!selectable && (
-            <Column
-              header=""
-              body={() => (
-                <div className="flex justify-end items-center gap-2 mr-[4px]">
-                  <WdTooltipWrapper content="Double-click a row to edit signature">
-                    <span className={PrimeIcons.PENCIL + ' text-[10px]'} />
-                  </WdTooltipWrapper>
-                </div>
+                return clsx(classes.TableRowCompact, dateClass);
+              }}
+            >
+              <Column
+                bodyClassName="p-0 px-1"
+                field="group"
+                body={x => renderIcon(x)}
+                style={{ maxWidth: 26, minWidth: 26, width: 26, height: 25 }}
+              ></Column>
+
+              <Column
+                field="eve_id"
+                header="Id"
+                bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+                style={{ maxWidth: 72, minWidth: 72, width: 72 }}
+                sortable
+              ></Column>
+              <Column
+                field="group"
+                header="Group"
+                bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+                hidden={compact}
+                style={{ maxWidth: 110, minWidth: 110, width: 110 }}
+                sortable
+              ></Column>
+              <Column
+                field="info"
+                bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+                body={renderInfoColumn}
+                style={{ maxWidth: nameColumnWidth }}
+                hidden={compact || medium}
+              ></Column>
+              {showDescriptionColumn && (
+                <Column
+                  field="description"
+                  header="Description"
+                  bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+                  body={renderDescription}
+                  hidden={compact}
+                  sortable
+                ></Column>
              )}
-              style={{ maxWidth: 26, minWidth: 26, width: 26 }}
-              bodyClassName="p-0 pl-1 pr-2"
-            />
-          )}
-        </DataTable>
-      )}

-      <WdTooltip
-        className="bg-stone-900/95 text-slate-50"
-        ref={tooltipRef}
-        content={
-          hoveredSignature ? (
-            <SignatureView signature={hoveredSignature} showCharacterPortrait={showCharacterPortrait} />
-          ) : null
-        }
-      />
+              <Column
+                field="inserted_at"
+                header="Added"
+                dataType="date"
+                bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
+                body={renderAddedTimeLeft}
+                sortable
+              ></Column>

-      {showSignatureSettings && (
-        <SignatureSettings
-          systemId={systemId}
-          show
-          onHide={() => setShowSignatureSettings(false)}
-          signatureData={selectedSignatureForDialog || undefined}
+              {showUpdatedColumn && (
+                <Column
+                  field="updated_at"
+                  header="Updated"
+                  dataType="date"
+                  bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
+                  body={renderUpdatedTimeLeft}
+                  sortable
+                ></Column>
+              )}
+
+              {!selectable && (
+                <Column
+                  bodyClassName="p-0 pl-1 pr-2"
+                  field="group"
+                  body={renderToolbar}
+                  // headerClassName={headerClasses}
+                  style={{ maxWidth: 26, minWidth: 26, width: 26 }}
+                ></Column>
+              )}
+            </DataTable>
+          </>
+        )}
+        <WdTooltip
+          className="bg-stone-900/95 text-slate-50"
+          ref={tooltipRef}
+          content={hoveredSig ? <SignatureView {...hoveredSig} /> : null}
        />
-      )}
-    </div>
+
+        {showSignatureSettings && (
+          <SignatureSettings
+            systemId={systemId}
+            show
+            onHide={() => setShowSignatureSettings(false)}
+            signatureData={selectedSignature}
+          />
+        )}
+      </div>
+    </>
  );
 };
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts
@@ -9,14 +9,7 @@ import {
 } from '@/hooks/Mapper/types';

 export const TIME_ONE_MINUTE = 1000 * 60;
-export const TIME_TEN_MINUTES = TIME_ONE_MINUTE * 10;
-export const TIME_ONE_DAY = 24 * 60 * TIME_ONE_MINUTE;
-export const TIME_ONE_WEEK = 7 * TIME_ONE_DAY;
-export const FINAL_DURATION_MS = 10000;
-
-export const COMPACT_MAX_WIDTH = 260;
-export const MEDIUM_MAX_WIDTH = 380;
-export const OTHER_COLUMNS_WIDTH = 276;
+export const TIME_TEN_MINUTES = 1000 * 60 * 10;

 export const GROUPS_LIST = [
  SignatureGroup.GasSite,
@@ -79,132 +72,3 @@ export const MAPPING_TYPE_TO_ENG = {
 };

 export const getGroupIdByRawGroup = (val: string) => MAPPING_GROUP_TO_ENG[val as SignatureGroup];
-
-export const SIGNATURE_WINDOW_ID = 'system_signatures_window';
-export const SIGNATURE_SETTING_STORE_KEY = 'wanderer_system_signature_settings_v6_5';
-
-export enum SETTINGS_KEYS {
-  SHOW_DESCRIPTION_COLUMN = 'show_description_column',
-  SHOW_UPDATED_COLUMN = 'show_updated_column',
-  SHOW_CHARACTER_COLUMN = 'show_character_column',
-  LAZY_DELETE_SIGNATURES = 'lazy_delete_signatures',
-  KEEP_LAZY_DELETE = 'keep_lazy_delete_enabled',
-  DELETION_TIMING = 'deletion_timing',
-  COLOR_BY_TYPE = 'color_by_type',
-  SHOW_CHARACTER_PORTRAIT = 'show_character_portrait',
-
-  // From SignatureKind
-  COSMIC_ANOMALY = SignatureKind.CosmicAnomaly,
-  COSMIC_SIGNATURE = SignatureKind.CosmicSignature,
-  DEPLOYABLE = SignatureKind.Deployable,
-  STRUCTURE = SignatureKind.Structure,
-  STARBASE = SignatureKind.Starbase,
-  SHIP = SignatureKind.Ship,
-  DRONE = SignatureKind.Drone,
-
-  // From SignatureGroup
-  WORMHOLE = SignatureGroup.Wormhole,
-  RELIC_SITE = SignatureGroup.RelicSite,
-  DATA_SITE = SignatureGroup.DataSite,
-  ORE_SITE = SignatureGroup.OreSite,
-  GAS_SITE = SignatureGroup.GasSite,
-  COMBAT_SITE = SignatureGroup.CombatSite,
-}
-
-export enum SettingsTypes {
-  flag,
-  dropdown,
-}
-
-export type SignatureSettingsType = { [key in SETTINGS_KEYS]?: unknown };
-
-export type Setting = {
-  key: SETTINGS_KEYS;
-  name: string;
-  type: SettingsTypes;
-  isSeparator?: boolean;
-  options?: { label: string; value: any }[];
-};
-
-export enum SIGNATURES_DELETION_TIMING {
-  IMMEDIATE,
-  DEFAULT,
-  EXTENDED,
-}
-
-export type SignatureDeletionTimingType = { [key in SIGNATURES_DELETION_TIMING]?: unknown };
-
-export const SIGNATURE_SETTINGS = {
-  filterFlags: [
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.COSMIC_ANOMALY, name: 'Show Anomalies' },
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.COSMIC_SIGNATURE, name: 'Show Cosmic Signatures' },
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.DEPLOYABLE, name: 'Show Deployables' },
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.STRUCTURE, name: 'Show Structures' },
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.STARBASE, name: 'Show Starbase' },
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.SHIP, name: 'Show Ships' },
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.DRONE, name: 'Show Drones And Charges' },
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.WORMHOLE, name: 'Show Wormholes' },
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.RELIC_SITE, name: 'Show Relic Sites' },
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.DATA_SITE, name: 'Show Data Sites' },
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.ORE_SITE, name: 'Show Ore Sites' },
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.GAS_SITE, name: 'Show Gas Sites' },
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.COMBAT_SITE, name: 'Show Combat Sites' },
-  ],
-  uiFlags: [
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.SHOW_UPDATED_COLUMN, name: 'Show Updated Column' },
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.SHOW_DESCRIPTION_COLUMN, name: 'Show Description Column' },
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.SHOW_CHARACTER_COLUMN, name: 'Show Character Column' },
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.LAZY_DELETE_SIGNATURES, name: 'Lazy Delete Signatures' },
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.KEEP_LAZY_DELETE, name: 'Keep "Lazy Delete" Enabled' },
-    {
-      type: SettingsTypes.flag,
-      key: SETTINGS_KEYS.SHOW_CHARACTER_PORTRAIT,
-      name: 'Show Character Portrait in Tooltip',
-    },
-    { type: SettingsTypes.flag, key: SETTINGS_KEYS.COLOR_BY_TYPE, name: 'Color Signatures by Type' },
-  ],
-  uiOther: [
-    {
-      type: SettingsTypes.dropdown,
-      key: SETTINGS_KEYS.DELETION_TIMING,
-      name: 'Deletion Timing',
-      options: [
-        { value: SIGNATURES_DELETION_TIMING.IMMEDIATE, label: '0s' },
-        { value: SIGNATURES_DELETION_TIMING.DEFAULT, label: '10s' },
-        { value: SIGNATURES_DELETION_TIMING.EXTENDED, label: '30s' },
-      ],
-    },
-  ],
-};
-
-export const SETTINGS_VALUES: SignatureSettingsType = {
-  [SETTINGS_KEYS.SHOW_UPDATED_COLUMN]: true,
-  [SETTINGS_KEYS.SHOW_DESCRIPTION_COLUMN]: true,
-  [SETTINGS_KEYS.SHOW_CHARACTER_COLUMN]: true,
-  [SETTINGS_KEYS.LAZY_DELETE_SIGNATURES]: true,
-  [SETTINGS_KEYS.KEEP_LAZY_DELETE]: false,
-  [SETTINGS_KEYS.DELETION_TIMING]: SIGNATURES_DELETION_TIMING.DEFAULT,
-  [SETTINGS_KEYS.COLOR_BY_TYPE]: true,
-  [SETTINGS_KEYS.SHOW_CHARACTER_PORTRAIT]: true,
-
-  [SETTINGS_KEYS.COSMIC_ANOMALY]: true,
-  [SETTINGS_KEYS.COSMIC_SIGNATURE]: true,
-  [SETTINGS_KEYS.DEPLOYABLE]: true,
-  [SETTINGS_KEYS.STRUCTURE]: true,
-  [SETTINGS_KEYS.STARBASE]: true,
-  [SETTINGS_KEYS.SHIP]: true,
-  [SETTINGS_KEYS.DRONE]: true,
-
-  [SETTINGS_KEYS.WORMHOLE]: true,
-  [SETTINGS_KEYS.RELIC_SITE]: true,
-  [SETTINGS_KEYS.DATA_SITE]: true,
-  [SETTINGS_KEYS.ORE_SITE]: true,
-  [SETTINGS_KEYS.GAS_SITE]: true,
-  [SETTINGS_KEYS.COMBAT_SITE]: true,
-};
-
-export const SIGNATURE_DELETION_TIMEOUTS: SignatureDeletionTimingType = {
-  [SIGNATURES_DELETION_TIMING.DEFAULT]: 10_000,
-  [SIGNATURES_DELETION_TIMING.IMMEDIATE]: 0,
-  [SIGNATURES_DELETION_TIMING.EXTENDED]: 30_000,
-};
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/contentHelpers.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/contentHelpers.ts
@@ -1,104 +0,0 @@
-import { ExtendedSystemSignature, SystemSignature } from '@/hooks/Mapper/types';
-import { FINAL_DURATION_MS } from '../constants';
-
-export function prepareUpdatePayload(
-  systemId: string,
-  added: ExtendedSystemSignature[],
-  updated: ExtendedSystemSignature[],
-  removed: ExtendedSystemSignature[],
-) {
-  return {
-    system_id: systemId,
-    added: added.map(s => ({ ...s })),
-    updated: updated.map(s => ({ ...s })),
-    removed: removed.map(s => ({ ...s })),
-  };
-}
-
-export function schedulePendingAdditionForSig(
-  sig: ExtendedSystemSignature,
-  finalDuration: number,
-  setSignatures: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>,
-  pendingAdditionMapRef: React.MutableRefObject<Record<string, { finalUntil: number; finalTimeoutId: number }>>,
-  setPendingUndoAdditions: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>,
-) {
-  setPendingUndoAdditions(prev => [...prev, sig]);
-
-  const now = Date.now();
-  const finalTimeoutId = window.setTimeout(() => {
-    setSignatures(prev =>
-      prev.map(x => (x.eve_id === sig.eve_id ? { ...x, pendingAddition: false, pendingUntil: undefined } : x)),
-    );
-    const clone = { ...pendingAdditionMapRef.current };
-    delete clone[sig.eve_id];
-    pendingAdditionMapRef.current = clone;
-
-    setPendingUndoAdditions(prev => prev.filter(x => x.eve_id !== sig.eve_id));
-  }, finalDuration);
-
-  pendingAdditionMapRef.current = {
-    ...pendingAdditionMapRef.current,
-    [sig.eve_id]: {
-      finalUntil: now + finalDuration,
-      finalTimeoutId,
-    },
-  };
-
-  setSignatures(prev =>
-    prev.map(x => (x.eve_id === sig.eve_id ? { ...x, pendingAddition: true, pendingUntil: now + finalDuration } : x)),
-  );
-}
-
-export function mergeLocalPending(
-  pendingMapRef: React.MutableRefObject<Record<string, ExtendedSystemSignature>>,
-  serverSigs: ExtendedSystemSignature[],
-): ExtendedSystemSignature[] {
-  const now = Date.now();
-  const pendingDeletions = Object.values(pendingMapRef.current).filter(
-    sig => sig.pendingDeletion && sig.pendingUntil && sig.pendingUntil > now,
-  );
-  const mergedMap = new Map<string, ExtendedSystemSignature>();
-  serverSigs.forEach(sig => mergedMap.set(sig.eve_id, sig));
-
-  pendingDeletions.forEach(sig => {
-    if (mergedMap.has(sig.eve_id)) {
-      mergedMap.set(sig.eve_id, sig);
-    }
-  });
-  return Array.from(mergedMap.values());
-}
-
-export function scheduleLazyTimers(
-  signatures: ExtendedSystemSignature[],
-  pendingMapRef: React.MutableRefObject<Record<string, ExtendedSystemSignature>>,
-  finalizeFn: (sig: ExtendedSystemSignature) => Promise<void>,
-  finalDuration = FINAL_DURATION_MS,
-) {
-  signatures.forEach(sig => {
-    const finalTimeoutId = window.setTimeout(async () => {
-      await finalizeFn(sig);
-    }, finalDuration);
-
-    pendingMapRef.current = {
-      ...pendingMapRef.current,
-      [sig.eve_id]: {
-        ...sig,
-        finalTimeoutId,
-      },
-    };
-  });
-}
-
-export const calculateTimeRemaining = (pendingSigs: SystemSignature[]) => {
-  const now = Date.now();
-  let minTime: number | undefined = undefined;
-
-  pendingSigs.forEach(sig => {
-    const extendedSig = sig as unknown as { pendingUntil?: number };
-    if (extendedSig.pendingUntil && (minTime === undefined || extendedSig.pendingUntil - now < minTime)) {
-      minTime = extendedSig.pendingUntil - now;
-    }
-  });
-
-  return minTime && minTime > 0 ? minTime : undefined;
-};
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/getActualSigs.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/getActualSigs.ts
@@ -1,67 +1,25 @@
 import { SystemSignature } from '@/hooks/Mapper/types';
-import { GROUPS_LIST } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants';
-import { getState } from './getState';
+import { GROUPS_LIST } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
+import { getState } from './getState.ts';

-/**
- * Compare two lists of signatures and return which are added, updated, or removed.
- *
- * @param oldSignatures existing signatures (in memory or from server)
- * @param newSignatures newly parsed or incoming signatures from user input
- * @param updateOnly    if true, do NOT remove old signatures not found in newSignatures
- * @param skipUpdateUntouched if true, do NOT push unmodified signatures into the `updated` array
- */
 export const getActualSigs = (
  oldSignatures: SystemSignature[],
  newSignatures: SystemSignature[],
-  updateOnly?: boolean,
+  updateOnly: boolean,
  skipUpdateUntouched?: boolean,
 ): { added: SystemSignature[]; updated: SystemSignature[]; removed: SystemSignature[] } => {
  const updated: SystemSignature[] = [];
  const removed: SystemSignature[] = [];
-  const added: SystemSignature[] = [];

  oldSignatures.forEach(oldSig => {
+    // if old sigs is not contains in newSigs we need mark it as removed
+    // otherwise we check
    const newSig = newSignatures.find(s => s.eve_id === oldSig.eve_id);
    if (newSig) {
-      const needUpgrade = getState(GROUPS_LIST, newSig) > getState(GROUPS_LIST, oldSig);
-      const mergedSig = { ...oldSig };
-      let changed = false;
-
-      if (needUpgrade) {
-        mergedSig.group = newSig.group;
-        mergedSig.name = newSig.name;
-        changed = true;
-      }
-      if (newSig.description && newSig.description !== oldSig.description) {
-        mergedSig.description = newSig.description;
-        changed = true;
-      }
-
-      try {
-        const oldInfo = JSON.parse(oldSig.custom_info || '{}');
-        const newInfo = JSON.parse(newSig.custom_info || '{}');
-        let infoChanged = false;
-        for (const key in newInfo) {
-          if (oldInfo[key] !== newInfo[key]) {
-            oldInfo[key] = newInfo[key];
-            infoChanged = true;
-          }
-        }
-        if (infoChanged) {
-          mergedSig.custom_info = JSON.stringify(oldInfo);
-          changed = true;
-        }
-      } catch (e) {
-        console.error(`getActualSigs: Error merging custom_info for ${oldSig.eve_id}`, e);
-      }
-
-      if (newSig.updated_at !== oldSig.updated_at) {
-        mergedSig.updated_at = newSig.updated_at;
-        changed = true;
-      }
-
-      if (changed) {
-        updated.push(mergedSig);
+      // we take new sig and now we need check that sig has been updated
+      const isNeedUpgrade = getState(GROUPS_LIST, newSig) > getState(GROUPS_LIST, oldSig);
+      if (isNeedUpgrade) {
+        updated.push({ ...oldSig, group: newSig.group, name: newSig.name });
      } else if (!skipUpdateUntouched) {
        updated.push({ ...oldSig });
      }
@@ -72,12 +30,8 @@ export const getActualSigs = (
    }
  });

-  const oldIds = new Set(oldSignatures.map(x => x.eve_id));
-  newSignatures.forEach(s => {
-    if (!oldIds.has(s.eve_id)) {
-      added.push(s);
-    }
-  });
+  const oldSignaturesIds = oldSignatures.map(x => x.eve_id);
+  const added = newSignatures.filter(s => !oldSignaturesIds.includes(s.eve_id));

  return { added, updated, removed };
 };
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/getRowColorByTimeLeft.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/getRowColorByTimeLeft.ts
@@ -3,21 +3,19 @@ import {
  TIME_TEN_MINUTES,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';

-export const getRowBackgroundColor = (date: Date | undefined): string => {
+export const getRowColorByTimeLeft = (date: Date | undefined) => {
  if (!date) {
-    return '';
+    return null;
  }

  const currentDate = new Date();
  const diff = currentDate.getTime() + currentDate.getTimezoneOffset() * TIME_ONE_MINUTE - date.getTime();

  if (diff < TIME_ONE_MINUTE) {
-    return '[&_.ssc-header]:text-amber-300 [&_.ssc-header]:hover:text-amber-200 [&_.ssc-header]:font-bold';
+    return 'bg-lime-600/50 transition hover:bg-lime-600/60';
  }

  if (diff < TIME_TEN_MINUTES) {
-    return '[&_.ssc-header]:text-amber-500 [&_.ssc-header]:hover:text-amber-500 [&_.ssc-header]:font-bold';
+    return 'bg-lime-700/40 transition hover:bg-lime-700/50';
  }
-
-  return '';
 };
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/getState.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/getState.ts
@@ -1,8 +1,11 @@
 import { SystemSignature } from '@/hooks/Mapper/types';

+// also we need detect changes, we need understand that sigs has states
+// first state when kind is Cosmic Signature or Cosmic Anomaly and group is empty
+// and we should detect it for ungrade sigs
 export const getState = (_: string[], newSig: SystemSignature) => {
  let state = -1;
-  if (!newSig.group) {
+  if (!newSig.group || newSig.group === '') {
    state = 0;
  } else if (!newSig.name || newSig.name === '') {
    state = 1;
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/index.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/index.ts
@@ -1,5 +1,3 @@
 export * from './getState';
-export * from './getRowBackgroundColor';
+export * from './getRowColorByTimeLeft';
 export * from './getActualSigs';
-export * from './contentHelpers';
-export * from './rowStyles';
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/rowStyles.module.scss
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/rowStyles.module.scss
@@ -1,4 +0,0 @@
-.TableRowCompact {
-  font-size: 12px !important;
-  line-height: 1.333;
-}
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/rowStyles.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/rowStyles.ts
@@ -1,48 +0,0 @@
-import clsx from 'clsx';
-import { ExtendedSystemSignature, SignatureGroup } from '@/hooks/Mapper/types';
-import { getRowBackgroundColor } from './getRowBackgroundColor';
-import classes from './rowStyles.module.scss';
-
-export function getSignatureRowClass(
-  row: ExtendedSystemSignature,
-  selectedSignatures: ExtendedSystemSignature[],
-  colorByType?: boolean,
-): string {
-  const isSelected = selectedSignatures.some(s => s.eve_id === row.eve_id);
-
-  const baseCls = [
-    classes.TableRowCompact,
-    getRowBackgroundColor(row.inserted_at ? new Date(row.inserted_at) : undefined),
-    'transition duration-200 my-2 hover:bg-purple-400/20',
-  ];
-
-  if (isSelected) {
-    return clsx([...baseCls, 'bg-violet-400/40 hover:bg-violet-300/40']);
-  }
-
-  if (row.pendingDeletion) {
-    return clsx([...baseCls, 'bg-red-400/40 hover:bg-red-400/50']);
-  }
-
-  // Apply color by type styling if enabled
-  if (colorByType) {
-    switch (row.group) {
-      case SignatureGroup.CosmicSignature:
-        return clsx([...baseCls, '[&_td:nth-child(-n+3)]:text-rose-400 [&_td:nth-child(-n+3)]:hover:text-rose-300']);
-      case SignatureGroup.Wormhole:
-        return clsx([...baseCls, '[&_td:nth-child(-n+3)]:text-sky-300 [&_td:nth-child(-n+3)]:hover:text-sky-200']);
-      case SignatureGroup.CombatSite:
-      case SignatureGroup.RelicSite:
-      case SignatureGroup.DataSite:
-      case SignatureGroup.GasSite:
-      case SignatureGroup.OreSite:
-        return clsx([...baseCls, '[&_td:nth-child(-n+4)]:text-lime-400 [&_td:nth-child(-n+4)]:hover:text-lime-300']);
-    }
-
-    // Default for color by type - apply same color as CosmicSignature (red) and small text size
-    return clsx([...baseCls, '[&_td:nth-child(-n+3)]:text-rose-400/100']);
-  }
-
-  // Original styling when color by type is disabled
-  return clsx(...baseCls);
-}
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/hooks/types.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/hooks/types.ts
@@ -1,38 +0,0 @@
-import { SignatureSettingsType } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
-import { ExtendedSystemSignature } from '@/hooks/Mapper/types';
-
-export interface UseSystemSignaturesDataProps {
-  systemId: string;
-  settings: SignatureSettingsType;
-  hideLinkedSignatures?: boolean;
-  onCountChange?: (count: number) => void;
-  onPendingChange?: (
-    pending: React.MutableRefObject<Record<string, ExtendedSystemSignature>>,
-    undo: () => void,
-  ) => void;
-  onLazyDeleteChange?: (value: boolean) => void;
-  deletionTiming?: number;
-}
-
-export interface UseFetchingParams {
-  systemId: string;
-  signaturesRef: React.MutableRefObject<ExtendedSystemSignature[]>;
-  setSignatures: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>;
-  pendingDeletionMapRef: React.MutableRefObject<Record<string, ExtendedSystemSignature>>;
-}
-
-export interface UsePendingDeletionParams {
-  systemId: string;
-  deletionTiming?: number;
-  setSignatures: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>;
-  onPendingChange?: (
-    pending: React.MutableRefObject<Record<string, ExtendedSystemSignature>>,
-    undo: () => void,
-  ) => void;
-}
-
-export interface UsePendingAdditionParams {
-  systemId: string;
-  setSignatures: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>;
-  deletionTiming?: number;
-}
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/hooks/usePendingDeletions.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/hooks/usePendingDeletions.ts
@@ -1,95 +0,0 @@
-import { useCallback, useRef, useEffect } from 'react';
-import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
-import { prepareUpdatePayload, scheduleLazyTimers } from '../helpers';
-import { UsePendingDeletionParams } from './types';
-import { FINAL_DURATION_MS } from '../constants';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { ExtendedSystemSignature } from '@/hooks/Mapper/types';
-
-export function usePendingDeletions({
-  systemId,
-  setSignatures,
-  deletionTiming,
-  onPendingChange,
-}: UsePendingDeletionParams) {
-  const { outCommand } = useMapRootState();
-  const pendingDeletionMapRef = useRef<Record<string, ExtendedSystemSignature>>({});
-
-  // Use the provided deletion timing or fall back to the default
-  const finalDuration = deletionTiming !== undefined ? deletionTiming : FINAL_DURATION_MS;
-
-  const processRemovedSignatures = useCallback(
-    async (
-      removed: ExtendedSystemSignature[],
-      added: ExtendedSystemSignature[],
-      updated: ExtendedSystemSignature[],
-    ) => {
-      if (!removed.length) return;
-
-      // If deletion timing is 0, immediately delete without pending state
-      if (finalDuration === 0) {
-        await outCommand({
-          type: OutCommand.updateSignatures,
-          data: prepareUpdatePayload(systemId, added, updated, removed),
-        });
-        return;
-      }
-
-      const now = Date.now();
-      const processedRemoved = removed.map(r => ({
-        ...r,
-        pendingDeletion: true,
-        pendingUntil: now + finalDuration,
-      }));
-      pendingDeletionMapRef.current = {
-        ...pendingDeletionMapRef.current,
-        ...processedRemoved.reduce((acc: any, sig) => {
-          acc[sig.eve_id] = sig;
-          return acc;
-        }, {}),
-      };
-
-      onPendingChange?.(pendingDeletionMapRef, clearPendingDeletions);
-
-      setSignatures(prev =>
-        prev.map(sig => {
-          if (processedRemoved.find(r => r.eve_id === sig.eve_id)) {
-            return { ...sig, pendingDeletion: true, pendingUntil: now + finalDuration };
-          }
-          return sig;
-        }),
-      );
-
-      scheduleLazyTimers(
-        processedRemoved,
-        pendingDeletionMapRef,
-        async sig => {
-          await outCommand({
-            type: OutCommand.updateSignatures,
-            data: prepareUpdatePayload(systemId, [], [], [sig]),
-          });
-          delete pendingDeletionMapRef.current[sig.eve_id];
-          setSignatures(prev => prev.filter(x => x.eve_id !== sig.eve_id));
-          onPendingChange?.(pendingDeletionMapRef, clearPendingDeletions);
-        },
-        finalDuration,
-      );
-    },
-    [systemId, outCommand, finalDuration],
-  );
-
-  const clearPendingDeletions = useCallback(() => {
-    Object.values(pendingDeletionMapRef.current).forEach(({ finalTimeoutId }) => {
-      clearTimeout(finalTimeoutId);
-    });
-    pendingDeletionMapRef.current = {};
-    setSignatures(prev => prev.map(x => (x.pendingDeletion ? { ...x, pendingDeletion: false } : x)));
-    onPendingChange?.(pendingDeletionMapRef, clearPendingDeletions);
-  }, []);
-
-  return {
-    pendingDeletionMapRef,
-    processRemovedSignatures,
-    clearPendingDeletions,
-  };
-}
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/hooks/useSignatureFetching.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/hooks/useSignatureFetching.ts
@@ -1,59 +0,0 @@
-import { useCallback } from 'react';
-import { ExtendedSystemSignature, SystemSignature } from '@/hooks/Mapper/types';
-import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
-import { prepareUpdatePayload, getActualSigs, mergeLocalPending } from '../helpers';
-import { UseFetchingParams } from './types';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-
-export const useSignatureFetching = ({
-  systemId,
-  signaturesRef,
-  setSignatures,
-  pendingDeletionMapRef,
-}: UseFetchingParams) => {
-  const {
-    data: { characters },
-    outCommand,
-  } = useMapRootState();
-
-  const handleGetSignatures = useCallback(async () => {
-    if (!systemId) {
-      setSignatures([]);
-      return;
-    }
-    const resp = await outCommand({
-      type: OutCommand.getSignatures,
-      data: { system_id: systemId },
-    });
-    const serverSigs = (resp.signatures ?? []) as SystemSignature[];
-
-    const extended = serverSigs.map(s => ({
-      ...s,
-      character_name: characters.find(c => c.eve_id === s.character_eve_id)?.name,
-    })) as ExtendedSystemSignature[];
-
-    setSignatures(() => mergeLocalPending(pendingDeletionMapRef, extended));
-  }, [characters, systemId, outCommand]);
-
-  const handleUpdateSignatures = useCallback(
-    async (newList: ExtendedSystemSignature[], updateOnly: boolean, skipUpdateUntouched?: boolean) => {
-      const { added, updated, removed } = getActualSigs(
-        signaturesRef.current,
-        newList,
-        updateOnly,
-        skipUpdateUntouched,
-      );
-
-      await outCommand({
-        type: OutCommand.updateSignatures,
-        data: prepareUpdatePayload(systemId, added, updated, removed),
-      });
-    },
-    [systemId, outCommand, signaturesRef],
-  );
-
-  return {
-    handleGetSignatures,
-    handleUpdateSignatures,
-  };
-};
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/hooks/useSystemSignaturesData.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/hooks/useSystemSignaturesData.ts
@@ -1,125 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import useRefState from 'react-usestateref';
-import { useMapEventListener } from '@/hooks/Mapper/events';
-import { Commands, ExtendedSystemSignature, SignatureKind } from '@/hooks/Mapper/types';
-import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
-import { parseSignatures } from '@/hooks/Mapper/helpers';
-
-import { getActualSigs } from '../helpers';
-import { useSignatureFetching } from './useSignatureFetching';
-import { usePendingDeletions } from './usePendingDeletions';
-import { UseSystemSignaturesDataProps } from './types';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { SETTINGS_KEYS } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
-
-export const useSystemSignaturesData = ({
-  systemId,
-  settings,
-  onCountChange,
-  onPendingChange,
-  onLazyDeleteChange,
-  deletionTiming,
-}: UseSystemSignaturesDataProps) => {
-  const { outCommand } = useMapRootState();
-  const [signatures, setSignatures, signaturesRef] = useRefState<ExtendedSystemSignature[]>([]);
-  const [selectedSignatures, setSelectedSignatures] = useState<ExtendedSystemSignature[]>([]);
-
-  const { pendingDeletionMapRef, processRemovedSignatures, clearPendingDeletions } = usePendingDeletions({
-    systemId,
-    setSignatures,
-    deletionTiming,
-    onPendingChange,
-  });
-
-  const { handleGetSignatures, handleUpdateSignatures } = useSignatureFetching({
-    systemId,
-    signaturesRef,
-    setSignatures,
-    pendingDeletionMapRef,
-  });
-
-  const handlePaste = useCallback(
-    async (clipboardString: string) => {
-      const lazyDeleteValue = settings[SETTINGS_KEYS.LAZY_DELETE_SIGNATURES] as boolean;
-
-      const incomingSignatures = parseSignatures(
-        clipboardString,
-        Object.keys(settings).filter(skey => skey in SignatureKind),
-      ) as ExtendedSystemSignature[];
-
-      const currentNonPending = lazyDeleteValue
-        ? signaturesRef.current.filter(sig => !sig.pendingDeletion)
-        : signaturesRef.current.filter(sig => !sig.pendingDeletion || !sig.pendingAddition);
-
-      const { added, updated, removed } = getActualSigs(currentNonPending, incomingSignatures, !lazyDeleteValue, true);
-
-      if (removed.length > 0) {
-        await processRemovedSignatures(removed, added, updated);
-      }
-
-      if (updated.length !== 0 || added.length !== 0) {
-        await outCommand({
-          type: OutCommand.updateSignatures,
-          data: {
-            system_id: systemId,
-            added,
-            updated,
-            removed: [],
-          },
-        });
-      }
-
-      const keepLazy = settings[SETTINGS_KEYS.KEEP_LAZY_DELETE] as boolean;
-      if (lazyDeleteValue && !keepLazy) {
-        onLazyDeleteChange?.(false);
-      }
-    },
-    [settings, signaturesRef, processRemovedSignatures, outCommand, systemId, onLazyDeleteChange],
-  );
-
-  const handleDeleteSelected = useCallback(async () => {
-    if (!selectedSignatures.length) return;
-    const selectedIds = selectedSignatures.map(s => s.eve_id);
-    const finalList = signatures.filter(s => !selectedIds.includes(s.eve_id));
-
-    await handleUpdateSignatures(finalList, false, true);
-    setSelectedSignatures([]);
-  }, [selectedSignatures, signatures]);
-
-  const handleSelectAll = useCallback(() => {
-    setSelectedSignatures(signatures);
-  }, [signatures]);
-
-  const undoPending = useCallback(() => {
-    clearPendingDeletions();
-  }, [clearPendingDeletions]);
-
-  useMapEventListener(event => {
-    if (event.name === Commands.signaturesUpdated && String(event.data) === String(systemId)) {
-      handleGetSignatures();
-      return true;
-    }
-  });
-
-  useEffect(() => {
-    if (!systemId) {
-      setSignatures([]);
-      undoPending();
-      return;
-    }
-    handleGetSignatures();
-  }, [systemId]);
-
-  useEffect(() => {
-    onCountChange?.(signatures.length);
-  }, [signatures]);
-
-  return {
-    signatures,
-    selectedSignatures,
-    setSelectedSignatures,
-    handleDeleteSelected,
-    handleSelectAll,
-    handlePaste,
-  };
-};
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders/renderInfoColumn.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders/renderInfoColumn.tsx
@@ -24,12 +24,6 @@ export const renderInfoColumn = (row: SystemSignature) => {
          </WdTooltipWrapper>
        )}

-        {customInfo.isCrit && (
-          <WdTooltipWrapper offset={5} position={TooltipPosition.top} content="Signature marked as Crit">
-            <div className="pi pi-clock text-fuchsia-400 text-[11px] mr-[2px]"></div>
-          </WdTooltipWrapper>
-        )}
-
        {row.type && (
          <WHClassView
            className="text-[11px]"
--- a/assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx
@@ -8,20 +8,13 @@ import { OnTheMap, RightBar } from '@/hooks/Mapper/components/mapRootContent/com
 import { MapContextMenu } from '@/hooks/Mapper/components/mapRootContent/components/MapContextMenu/MapContextMenu.tsx';
 import { useSkipContextMenu } from '@/hooks/Mapper/hooks/useSkipContextMenu';
 import { MapSettings } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings';
-import { CharacterActivity } from '@/hooks/Mapper/components/mapRootContent/components/CharacterActivity';
-import { TrackAndFollow } from '@/hooks/Mapper/components/mapRootContent/components/TrackAndFollow/TrackAndFollow';
-import { useCharacterActivityHandlers } from './hooks/useCharacterActivityHandlers';
-import { useTrackAndFollowHandlers } from './hooks/useTrackAndFollowHandlers';

 export interface MapRootContentProps {}

 // eslint-disable-next-line no-empty-pattern
 export const MapRootContent = ({}: MapRootContentProps) => {
-  const { interfaceSettings, data } = useMapRootState();
+  const { interfaceSettings } = useMapRootState();
  const { isShowMenu } = interfaceSettings;
-  const { showCharacterActivity, showTrackAndFollow } = data;
-  const { handleHideCharacterActivity } = useCharacterActivityHandlers();
-  const { handleHideTracking } = useTrackAndFollowHandlers();

  const themeClass = `${interfaceSettings.theme ?? 'default'}-theme`;

@@ -56,11 +49,7 @@ export const MapRootContent = ({}: MapRootContentProps) => {
          </div>
        )}
        <OnTheMap show={showOnTheMap} onHide={() => setShowOnTheMap(false)} />
-        {showMapSettings && <MapSettings visible={showMapSettings} onHide={() => setShowMapSettings(false)} />}
-        {showCharacterActivity && (
-          <CharacterActivity visible={showCharacterActivity} onHide={handleHideCharacterActivity} />
-        )}
-        {showTrackAndFollow && <TrackAndFollow visible={showTrackAndFollow} onHide={handleHideTracking} />}
+        <MapSettings show={showMapSettings} onHide={() => setShowMapSettings(false)} />
      </Layout>
    </div>
  );
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/CharacterActivity/CharacterActivity.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/CharacterActivity/CharacterActivity.tsx
@@ -1,129 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { Dialog } from 'primereact/dialog';
-import { DataTable } from 'primereact/datatable';
-import { Column } from 'primereact/column';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { ProgressSpinner } from 'primereact/progressspinner';
-import { CharacterCard } from '../../../ui-kit';
-import { CharacterTypeRaw } from '@/hooks/Mapper/types';
-
-export interface ActivitySummary {
-  character: CharacterTypeRaw;
-  passages: number;
-  connections: number;
-  signatures: number;
-}
-
-interface CharacterActivityProps {
-  visible: boolean;
-  onHide: () => void;
-}
-
-const getRowClassName = () => ['text-xs', 'leading-tight'];
-
-const renderCharacterTemplate = (rowData: ActivitySummary) => {
-  return <CharacterCard compact isOwn {...rowData.character} />;
-};
-
-const renderValueTemplate = (rowData: ActivitySummary, field: keyof ActivitySummary) => {
-  return <div className="tabular-nums">{rowData[field] as number}</div>;
-};
-
-export const CharacterActivity = ({ visible, onHide }: CharacterActivityProps) => {
-  const { data } = useMapRootState();
-  const { characterActivityData } = data;
-  const [localActivity, setLocalActivity] = useState<ActivitySummary[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  const activity = useMemo(() => {
-    return characterActivityData?.activity || [];
-  }, [characterActivityData]);
-
-  useEffect(() => {
-    setLocalActivity(activity);
-    setLoading(characterActivityData?.loading !== false);
-  }, [activity, characterActivityData]);
-
-  const renderContent = () => {
-    if (loading) {
-      return (
-        <div className="flex flex-col items-center justify-center h-[400px] w-full">
-          <ProgressSpinner className="w-[50px] h-[50px]" strokeWidth="4" />
-          <div className="mt-4 text-text-color-secondary text-sm">Loading character activity data...</div>
-        </div>
-      );
-    }
-
-    if (localActivity.length === 0) {
-      return (
-        <div className="p-8 text-center text-text-color-secondary italic">No character activity data available</div>
-      );
-    }
-
-    return (
-      <DataTable
-        value={localActivity}
-        scrollable
-        scrollHeight="400px"
-        resizableColumns
-        columnResizeMode="fit"
-        className="w-full"
-        tableClassName="w-full border-0"
-        emptyMessage="No character activity data available"
-        sortField="passages"
-        sortOrder={-1}
-        size="small"
-        rowClassName={getRowClassName}
-        rowHover
-      >
-        <Column
-          field="character_name"
-          header="Character"
-          body={renderCharacterTemplate}
-          sortable
-          // headerStyle={{ minWidth: '75px', height: 'auto', overflow: 'visible' }}
-          // bodyStyle={{ minWidth: '75px' }}
-          // className={classes.characterColumn}
-          // headerClassName={classes.columnHeader}
-        />
-
-        <Column
-          field="passages"
-          header="Passages"
-          body={rowData => renderValueTemplate(rowData, 'passages')}
-          sortable
-          // headerStyle={{ width: '120px', textAlign: 'center', height: 'auto', overflow: 'visible' }}
-          // bodyStyle={{ width: '120px', textAlign: 'center' }}
-          // className={classes.numericColumn}
-          // headerClassName={classes.columnHeader}
-        />
-        <Column
-          field="connections"
-          header="Connections"
-          body={rowData => renderValueTemplate(rowData, 'connections')}
-          sortable
-          // headerStyle={{ width: '120px', textAlign: 'center', height: 'auto', overflow: 'visible' }}
-          // bodyStyle={{ width: '120px', textAlign: 'center' }}
-          // className={classes.numericColumn}
-          // headerClassName={classes.columnHeader}
-        />
-        <Column
-          field="signatures"
-          header="Signatures"
-          body={rowData => renderValueTemplate(rowData, 'signatures')}
-          sortable
-          // headerStyle={{ width: '120px', textAlign: 'center', height: 'auto', overflow: 'visible' }}
-          // bodyStyle={{ width: '120px', textAlign: 'center' }}
-          // className={classes.numericColumn}
-          // headerClassName={classes.columnHeader}
-        />
-      </DataTable>
-    );
-  };
-
-  return (
-    <Dialog header="Character Activity" visible={visible} className="max-w-[600px]" onHide={onHide} dismissableMask>
-      <div className="w-full h-[400px] flex flex-col overflow-hidden p-0 m-0">{renderContent()}</div>
-    </Dialog>
-  );
-};
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/CharacterActivity/index.ts
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/CharacterActivity/index.ts
@@ -1 +0,0 @@
-export * from './CharacterActivity';
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/PassageCard/PassageCard.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/PassageCard/PassageCard.tsx
@@ -68,7 +68,7 @@ export const PassageCard = ({ inserted_at, character: char, ship }: PassageCardT
              <div className="grid gap-1 grid-cols-[1fr_1px_auto]">
                {ship.ship_name && (
                  <>
-                    <span className="text-ellipsis overflow-hidden whitespace-nowrap flex justify-end text-neutral-400">
+                    <span className="text-ellipsis overflow-hidden whitespace-nowrap">
                      {getShipName(ship.ship_name)}
                    </span>
                    <div className="h-3 border-r border-neutral-500 my-0.5"></div>
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/MapContextMenu/MapContextMenu.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/MapContextMenu/MapContextMenu.tsx
@@ -22,15 +22,8 @@ export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings }: MapContext

  const handleAddCharacter = useCallback(() => {
    outCommand({
-      type: OutCommand.showTracking,
-      data: {},
-    });
-  }, [outCommand]);
-
-  const handleShowActivity = useCallback(() => {
-    outCommand({
-      type: OutCommand.showActivity,
-      data: {},
+      type: OutCommand.addCharacter,
+      data: null,
    });
  }, [outCommand]);

@@ -43,12 +36,6 @@ export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings }: MapContext
          command: handleAddCharacter,
          visible: true,
        },
-        {
-          label: 'Character Activity',
-          icon: 'pi pi-chart-bar',
-          command: handleShowActivity,
-          visible: canTrackCharacters,
-        },
        {
          label: 'On the map',
          icon: 'pi pi-hashtag',
@@ -74,14 +61,7 @@ export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings }: MapContext
        },
      ] as MenuItem[]
    ).filter(item => item.visible);
-  }, [
-    canTrackCharacters,
-    handleAddCharacter,
-    handleShowActivity,
-    onShowMapSettings,
-    onShowOnTheMap,
-    setInterfaceSettings,
-  ]);
+  }, [canTrackCharacters, handleAddCharacter, onShowMapSettings, onShowOnTheMap, setInterfaceSettings]);

  return (
    <div className="ml-1">
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.tsx
@@ -40,7 +40,7 @@ export type UserSettingsRemote = {
 export type UserSettings = UserSettingsRemote & InterfaceStoredSettings;

 export interface MapSettingsProps {
-  visible: boolean;
+  show: boolean;
  onHide: () => void;
 }

@@ -128,7 +128,7 @@ const THEME_SETTING: SettingsListItem = {
  options: THEME_OPTIONS,
 };

-export const MapSettings = ({ visible, onHide }: MapSettingsProps) => {
+export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
  const [activeIndex, setActiveIndex] = useState(0);
  const { outCommand, interfaceSettings, setInterfaceSettings } = useMapRootState();
  const [userRemoteSettings, setUserRemoteSettings] = useState<UserSettingsRemote>({
@@ -213,12 +213,12 @@ export const MapSettings = ({ visible, onHide }: MapSettingsProps) => {
  return (
    <Dialog
      header="Map user settings"
-      visible
+      visible={show}
      draggable={false}
      style={{ width: '550px' }}
      onShow={handleShow}
      onHide={() => {
-        if (!visible) return;
+        if (!show) return;
        setActiveIndex(0);
        onHide();
      }}
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/OnTheMap/OnTheMap.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/OnTheMap/OnTheMap.tsx
@@ -26,7 +26,7 @@ const STORED_DEFAULT_VALUES: WindowLocalSettingsType = {
 const itemTemplate = (item: CharacterTypeRaw & WithIsOwnCharacter, options: VirtualScrollerTemplateOptions) => {
  return (
    <div
-      className={clsx(classes.CharacterRow, 'w-full box-border px-2 py-1', {
+      className={clsx(classes.CharacterRow, 'w-full box-border', {
        'surface-hover': options.odd,
        ['border-b border-gray-600 border-opacity-20']: !options.last,
        ['bg-green-500 hover:bg-green-700 transition duration-300 bg-opacity-10 hover:bg-opacity-10']: item.online,
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/RightBar/RightBar.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/RightBar/RightBar.tsx
@@ -21,11 +21,10 @@ export const RightBar = ({ onShowOnTheMap, onShowMapSettings }: RightBarProps) =

  const isShowMinimap = interfaceSettings.isShowMinimap === undefined ? true : interfaceSettings.isShowMinimap;

-  const handleShowTracking = useCallback(() => {
-    // Use the OutCommand pattern for showing the tracking dialog
+  const handleAddCharacter = useCallback(() => {
    outCommand({
-      type: OutCommand.showTracking,
-      data: {},
+      type: OutCommand.addCharacter,
+      data: null,
    });
  }, [outCommand]);

@@ -64,25 +63,22 @@ export const RightBar = ({ onShowOnTheMap, onShowMapSettings }: RightBarProps) =
          <button
            className="btn bg-transparent text-gray-400 hover:text-white border-transparent hover:bg-transparent py-2 h-auto min-h-auto"
            type="button"
-            onClick={handleShowTracking}
-            id="show-tracking-button"
+            onClick={handleAddCharacter}
          >
            <i className="pi pi-user-plus"></i>
          </button>
        </WdTooltipWrapper>

        {canTrackCharacters && (
-          <>
-            <WdTooltipWrapper content="Show on the map" position={TooltipPosition.left}>
-              <button
-                className="btn bg-transparent text-gray-400 hover:text-white border-transparent hover:bg-transparent py-2 h-auto min-h-auto"
-                type="button"
-                onClick={onShowOnTheMap}
-              >
-                <i className="pi pi-hashtag"></i>
-              </button>
-            </WdTooltipWrapper>
-          </>
+          <WdTooltipWrapper content="Show on the map" position={TooltipPosition.left}>
+            <button
+              className="btn bg-transparent text-gray-400 hover:text-white border-transparent hover:bg-transparent py-2 h-auto min-h-auto"
+              type="button"
+              onClick={onShowOnTheMap}
+            >
+              <i className="pi pi-hashtag"></i>
+            </button>
+          </WdTooltipWrapper>
        )}
      </div>

--- a/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/SignatureSettings.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/SignatureSettings.tsx
@@ -1,6 +1,6 @@
 import { Dialog } from 'primereact/dialog';
 import { useCallback, useEffect } from 'react';
-import { OutCommand, SignatureGroup, SystemSignature, TimeStatus } from '@/hooks/Mapper/types';
+import { OutCommand, SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import {
  SignatureGroupContent,
@@ -10,7 +10,6 @@ import { InputText } from 'primereact/inputtext';
 import { SystemsSettingsProvider } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/Provider.tsx';
 import { Button } from 'primereact/button';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { getWhSize } from '@/hooks/Mapper/helpers/getWhSize';

 type SystemSignaturePrepared = Omit<SystemSignature, 'linked_system'> & { linked_system: string };

@@ -18,14 +17,11 @@ export interface MapSettingsProps {
  systemId: string;
  show: boolean;
  onHide: () => void;
-  signatureData: SystemSignature | undefined;
+  signatureData: SystemSignature | null;
 }

 export const SignatureSettings = ({ systemId, show, onHide, signatureData }: MapSettingsProps) => {
-  const {
-    outCommand,
-    data: { wormholes },
-  } = useMapRootState();
+  const { outCommand } = useMapRootState();

  const handleShow = async () => {};
  const signatureForm = useForm<Partial<SystemSignaturePrepared>>({});
@@ -51,31 +47,6 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
                solar_system_target: values.linked_system,
              },
            });
-
-            if (values.isEOL) {
-              await outCommand({
-                type: OutCommand.updateConnectionTimeStatus,
-                data: {
-                  source: systemId,
-                  target: values.linked_system,
-                  value: TimeStatus.eol,
-                },
-              });
-            }
-
-            if (values.type) {
-              const whShipSize = getWhSize(wormholes, values.type);
-              if (whShipSize) {
-                outCommand({
-                  type: OutCommand.updateConnectionShipSizeType,
-                  data: {
-                    source: systemId,
-                    target: values.linked_system,
-                    value: whShipSize,
-                  },
-                });
-              }
-            }
          }

          out = {
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/TrackAndFollow/TrackAndFollow.module.scss
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/TrackAndFollow/TrackAndFollow.module.scss
@@ -1,3 +0,0 @@
-.trackFollowHeader {
-  background-color: #1e1e1e;
-}
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/TrackAndFollow/TrackAndFollow.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/TrackAndFollow/TrackAndFollow.tsx
@@ -1,115 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { Dialog } from 'primereact/dialog';
-import { VirtualScroller } from 'primereact/virtualscroller';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
-import { TrackingCharacterWrapper } from './TrackingCharacterWrapper';
-import { TrackingCharacter } from './types';
-
-interface TrackAndFollowProps {
-  visible: boolean;
-  onHide: () => void;
-}
-
-export const TrackAndFollow = ({ visible, onHide }: TrackAndFollowProps) => {
-  const [trackedCharacters, setTrackedCharacters] = useState<string[]>([]);
-  const [followedCharacter, setFollowedCharacter] = useState<string | null>(null);
-  const { outCommand, data } = useMapRootState();
-  const { trackingCharactersData } = data;
-  const characters = useMemo(() => trackingCharactersData || [], [trackingCharactersData]);
-
-  useEffect(() => {
-    if (trackingCharactersData) {
-      const newTrackedCharacters = trackingCharactersData.filter(tc => tc.tracked).map(tc => tc.character.eve_id);
-
-      setTrackedCharacters(newTrackedCharacters);
-
-      const followedChar = trackingCharactersData.find(tc => tc.followed);
-
-      if (followedChar?.character?.eve_id !== followedCharacter) {
-        setFollowedCharacter(followedChar?.character?.eve_id || null);
-      }
-    }
-  }, [followedCharacter, trackingCharactersData]);
-
-  const handleTrackToggle = (characterId: string) => {
-    const isCurrentlyTracked = trackedCharacters.includes(characterId);
-
-    if (isCurrentlyTracked) {
-      setTrackedCharacters(prev => prev.filter(id => id !== characterId));
-    } else {
-      setTrackedCharacters(prev => [...prev, characterId]);
-    }
-
-    outCommand({
-      type: OutCommand.toggleTrack,
-      data: { 'character-id': characterId },
-    });
-  };
-
-  const handleFollowToggle = async (characterEveId: string) => {
-    const isCurrentlyFollowed = followedCharacter === characterEveId;
-    const isCurrentlyTracked = trackedCharacters.includes(characterEveId);
-
-    // If not followed and not tracked, we need to track it first
-    if (!isCurrentlyFollowed && !isCurrentlyTracked) {
-      setTrackedCharacters(prev => [...prev, characterEveId]);
-
-      // Send track command first
-      await outCommand({
-        type: OutCommand.toggleTrack,
-        data: { 'character-id': characterEveId },
-      });
-
-      // Then send follow command after a short delay
-      setTimeout(() => {
-        outCommand({
-          type: OutCommand.toggleFollow,
-          data: { 'character-id': characterEveId },
-        });
-      }, 100);
-    } else {
-      // Otherwise just toggle follow
-      await outCommand({
-        type: OutCommand.toggleFollow,
-        data: { 'character-id': characterEveId },
-      });
-    }
-  };
-
-  const rowTemplate = (tc: TrackingCharacter) => {
-    return (
-      <TrackingCharacterWrapper
-        key={tc.character.eve_id}
-        character={tc.character}
-        isTracked={trackedCharacters.includes(tc.character.eve_id)}
-        isFollowed={followedCharacter === tc.character.eve_id}
-        onTrackToggle={() => handleTrackToggle(tc.character.eve_id)}
-        onFollowToggle={() => handleFollowToggle(tc.character.eve_id)}
-      />
-    );
-  };
-
-  return (
-    <Dialog
-      header={
-        <div className="dialog-header">
-          <span>Track & Follow</span>
-        </div>
-      }
-      visible={visible}
-      onHide={onHide}
-      className="w-[500px] text-text-color"
-      contentClassName="!p-0"
-    >
-      <div className="w-full overflow-hidden">
-        <div className="grid grid-cols-[80px_80px_1fr] p-1 font-normal text-sm text-center border-b border-[#383838]">
-          <div>Track</div>
-          <div>Follow</div>
-          <div className="text-center">Character</div>
-        </div>
-        <VirtualScroller items={characters} itemSize={48} itemTemplate={rowTemplate} className="h-72 w-full" />
-      </div>
-    </Dialog>
-  );
-};
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/TrackAndFollow/TrackingCharacterWrapper.module.scss
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/TrackAndFollow/TrackingCharacterWrapper.module.scss
@@ -1,10 +0,0 @@
-.characterRow {
-  border-color: var(--surface-border);
-  border-width: 0 0 1px 0;
-  border-style: solid;
-  opacity: 0.5;
-  
-  &:last-child {
-    border-bottom: none;
-  }
-} 
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/TrackAndFollow/TrackingCharacterWrapper.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/TrackAndFollow/TrackingCharacterWrapper.tsx
@@ -1,47 +0,0 @@
-import { WdCheckbox } from '@/hooks/Mapper/components/ui-kit/WdCheckbox/WdCheckbox';
-import WdRadioButton from '@/hooks/Mapper/components/ui-kit/WdRadioButton';
-import { CharacterCard, TooltipPosition, WdTooltipWrapper } from '../../../ui-kit';
-import { CharacterTypeRaw } from '@/hooks/Mapper/types';
-
-interface TrackingCharacterWrapperProps {
-  character: CharacterTypeRaw;
-  isTracked: boolean;
-  isFollowed: boolean;
-  onTrackToggle: () => void;
-  onFollowToggle: () => void;
-}
-
-export const TrackingCharacterWrapper = ({
-  character,
-  isTracked,
-  isFollowed,
-  onTrackToggle,
-  onFollowToggle,
-}: TrackingCharacterWrapperProps) => {
-  const trackCheckboxId = `track-${character.eve_id}`;
-  const followRadioId = `follow-${character.eve_id}`;
-
-  return (
-    <div className="grid grid-cols-[80px_80px_1fr] items-center min-h-8 hover:bg-neutral-800  border-b border-[#383838]">
-      <div className="flex justify-center items-center p-0.5 text-center">
-        <WdTooltipWrapper content="Track this character on the map" position={TooltipPosition.top}>
-          <div className="flex justify-center items-center w-full">
-            <WdCheckbox id={trackCheckboxId} label="" value={isTracked} onChange={() => onTrackToggle()} />
-          </div>
-        </WdTooltipWrapper>
-      </div>
-      <div className="flex justify-center items-center p-0.5 text-center">
-        <WdTooltipWrapper content="Follow this character's movements on the map" position={TooltipPosition.top}>
-          <div className="flex justify-center items-center w-full">
-            <div onClick={onFollowToggle} className="cursor-pointer">
-              <WdRadioButton id={followRadioId} name="followed_character" checked={isFollowed} onChange={() => {}} />
-            </div>
-          </div>
-        </WdTooltipWrapper>
-      </div>
-      <div className="flex items-center justify-center">
-        <CharacterCard showShipName={false} showSystem={false} isOwn {...character} />
-      </div>
-    </div>
-  );
-};
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/TrackAndFollow/types.ts
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/TrackAndFollow/types.ts
@@ -1,9 +0,0 @@
-import { CharacterTypeRaw } from '@/hooks/Mapper/types';
-/**
- * Interface for a character that can be tracked and followed
- */
-export interface TrackingCharacter {
-  character: CharacterTypeRaw;
-  tracked: boolean;
-  followed: boolean;
-}
--- a/assets/js/hooks/Mapper/components/mapRootContent/hooks/useCharacterActivityHandlers.ts
+++ b/assets/js/hooks/Mapper/components/mapRootContent/hooks/useCharacterActivityHandlers.ts
@@ -1,71 +0,0 @@
-import { useCallback } from 'react';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
-import type { ActivitySummary } from '@/hooks/Mapper/components/mapRootContent/components/CharacterActivity/CharacterActivity';
-
-/**
- * Hook for character activity related handlers
- */
-export const useCharacterActivityHandlers = () => {
-  const { outCommand, update } = useMapRootState();
-
-  /**
-   * Handle hiding the character activity dialog
-   */
-  const handleHideCharacterActivity = useCallback(() => {
-    // Update local state to hide the dialog
-    update(state => ({
-      ...state,
-      showCharacterActivity: false,
-    }));
-
-    // Send the command to the server
-    outCommand({
-      type: OutCommand.hideActivity,
-      data: {},
-    });
-  }, [outCommand, update]);
-
-  /**
-   * Handle showing the character activity dialog
-   */
-  const handleShowActivity = useCallback(() => {
-    // Update local state to show the dialog
-    update(state => ({
-      ...state,
-      showCharacterActivity: true,
-    }));
-
-    // Send the command to the server
-    outCommand({
-      type: OutCommand.showActivity,
-      data: {},
-    });
-  }, [outCommand, update]);
-
-  /**
-   * Handle updating character activity data
-   */
-  const handleUpdateActivity = useCallback(
-    (activityData: { activity: ActivitySummary[] }) => {
-      if (!activityData || !activityData.activity) {
-        console.error('Invalid activity data received:', activityData);
-        return;
-      }
-
-      // Update local state with the activity data
-      update(state => ({
-        ...state,
-        characterActivityData: activityData.activity,
-        showCharacterActivity: true,
-      }));
-    },
-    [update],
-  );
-
-  return {
-    handleHideCharacterActivity,
-    handleShowActivity,
-    handleUpdateActivity,
-  };
-};
--- a/assets/js/hooks/Mapper/components/mapRootContent/hooks/useTrackAndFollowHandlers.ts
+++ b/assets/js/hooks/Mapper/components/mapRootContent/hooks/useTrackAndFollowHandlers.ts
@@ -1,122 +0,0 @@
-import { useCallback } from 'react';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { OutCommand, CommandData, Commands } from '@/hooks/Mapper/types/mapHandlers';
-import type { TrackingCharacter } from '@/hooks/Mapper/components/mapRootContent/components/TrackAndFollow/types';
-
-/**
- * Hook for track and follow related handlers
- */
-export const useTrackAndFollowHandlers = () => {
-  const { outCommand, update } = useMapRootState();
-
-  /**
-   * Handle hiding the track and follow dialog
-   */
-  const handleHideTracking = useCallback(() => {
-    // Send the command to the server first
-    outCommand({
-      type: OutCommand.hideTracking,
-      data: {},
-    });
-    
-    // Then update local state to hide the dialog
-    update(state => ({
-      ...state,
-      showTrackAndFollow: false,
-    }));
-  }, [outCommand, update]);
-
-  /**
-   * Handle showing the track and follow dialog
-   */
-  const handleShowTracking = useCallback(() => {
-    // Update local state to show the dialog
-    update(state => ({
-      ...state,
-      showTrackAndFollow: true,
-    }));
-
-    // Send the command to the server
-    outCommand({
-      type: OutCommand.showTracking,
-      data: {},
-    });
-  }, [outCommand, update]);
-
-  /**
-   * Handle updating tracking data
-   */
-  const handleUpdateTracking = useCallback(
-    (trackingData: { characters: TrackingCharacter[] }) => {
-      if (!trackingData || !trackingData.characters) {
-        console.error('Invalid tracking data received:', trackingData);
-        return;
-      }
-
-      // Update local state with the tracking data
-      update(state => ({
-        ...state,
-        trackingCharactersData: trackingData.characters,
-        showTrackAndFollow: true,
-      }));
-    },
-    [update],
-  );
-
-  /**
-   * Handle toggling character tracking
-   */
-  const handleToggleTrack = useCallback(
-    (characterId: string) => {
-      if (!characterId) return;
-
-      // Send the toggle track command to the server
-      outCommand({
-        type: OutCommand.toggleTrack,
-        data: { 'character-id': characterId },
-      });
-
-      // Note: The local state is now updated in the TrackAndFollow component
-      // for immediate UI feedback, while we wait for the server response
-    },
-    [outCommand],
-  );
-
-  /**
-   * Handle toggling character following
-   */
-  const handleToggleFollow = useCallback(
-    (characterId: string) => {
-      if (!characterId) return;
-
-      // Send the toggle follow command to the server
-      outCommand({
-        type: OutCommand.toggleFollow,
-        data: { 'character-id': characterId },
-      });
-
-      // Note: The local state is now updated in the TrackAndFollow component
-      // for immediate UI feedback, while we wait for the server response
-    },
-    [outCommand],
-  );
-
-
-  /**
-   * Handle user settings updates
-   */
-  const handleUserSettingsUpdated = useCallback((settingsData: CommandData[Commands.userSettingsUpdated]) => {
-    if (!settingsData || !settingsData.settings) {
-      console.error('Invalid settings data received:', settingsData);
-    }
-  }, []);
-
-  return {
-    handleHideTracking,
-    handleShowTracking,
-    handleUpdateTracking,
-    handleToggleTrack,
-    handleToggleFollow,
-    handleUserSettingsUpdated,
-  };
-};
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
achichenkov	ba5b2fb8d9	fix(Map): removed unnecessary hooks styles	2025-02-08 20:45:42 +03:00
achichenkov	deb47b66f6	fix(Map): Fixed a lot of design and architect issues after last million PRs	2025-02-08 20:33:27 +03:00