diff --git a/package-lock.json b/package-lock.json
index b2a49877..3f7294f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
                 "@kamiya4047/eslint-plugin-pretty-import": "^0.1.6",
                 "@sentry/vite-plugin": "^4.8.0",
                 "@sentry/vue": "^10.38.0",
+                "@sigma/node-border": "^3.0.0",
                 "@tailwindcss/vite": "^4.1.18",
                 "@tanstack/vue-table": "^8.21.3",
                 "@tanstack/vue-virtual": "^3.13.18",
@@ -49,7 +50,9 @@
                 "eslint-plugin-vue": "^9.33.0",
                 "globals": "^17.2.0",
                 "graphology": "^0.26.0",
+                "graphology-communities-louvain": "^2.0.2",
                 "graphology-layout-forceatlas2": "^0.10.1",
+                "graphology-layout-noverlap": "^0.4.2",
                 "jest": "^30.2.0",
                 "lightningcss": "^1.31.1",
                 "lucide-vue-next": "^0.562.0",
@@ -4704,6 +4707,16 @@
                 }
             }
         },
+        "node_modules/@sigma/node-border": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/@sigma/node-border/-/node-border-3.0.0.tgz",
+            "integrity": "sha512-mE3zUfjvJVuAMhSjiP/zdlkqe0OVTETxd04XHUwof01YqdzTk0OB4ACJIhWrwgsBXl7tTd9lPuKoroafLh8MtQ==",
+            "dev": true,
+            "license": "MIT",
+            "peerDependencies": {
+                "sigma": ">=3.0.0-beta.17"
+            }
+        },
         "node_modules/@sinclair/typebox": {
             "version": "0.34.41",
             "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.41.tgz",
@@ -10228,6 +10241,36 @@
                 "graphology-types": ">=0.24.0"
             }
         },
+        "node_modules/graphology-communities-louvain": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/graphology-communities-louvain/-/graphology-communities-louvain-2.0.2.tgz",
+            "integrity": "sha512-zt+2hHVPYxjEquyecxWXoUoIuN/UvYzsvI7boDdMNz0rRvpESQ7+e+Ejv6wK7AThycbZXuQ6DkG8NPMCq6XwoA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "graphology-indices": "^0.17.0",
+                "graphology-utils": "^2.4.4",
+                "mnemonist": "^0.39.0",
+                "pandemonium": "^2.4.1"
+            },
+            "peerDependencies": {
+                "graphology-types": ">=0.19.0"
+            }
+        },
+        "node_modules/graphology-indices": {
+            "version": "0.17.0",
+            "resolved": "https://registry.npmjs.org/graphology-indices/-/graphology-indices-0.17.0.tgz",
+            "integrity": "sha512-A7RXuKQvdqSWOpn7ZVQo4S33O0vCfPBnUSf7FwE0zNCasqwZVUaCXePuWo5HBpWw68KJcwObZDHpFk6HKH6MYQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "graphology-utils": "^2.4.2",
+                "mnemonist": "^0.39.0"
+            },
+            "peerDependencies": {
+                "graphology-types": ">=0.20.0"
+            }
+        },
         "node_modules/graphology-layout-forceatlas2": {
             "version": "0.10.1",
             "resolved": "https://registry.npmjs.org/graphology-layout-forceatlas2/-/graphology-layout-forceatlas2-0.10.1.tgz",
@@ -10241,6 +10284,19 @@
                 "graphology-types": ">=0.19.0"
             }
         },
+        "node_modules/graphology-layout-noverlap": {
+            "version": "0.4.2",
+            "resolved": "https://registry.npmjs.org/graphology-layout-noverlap/-/graphology-layout-noverlap-0.4.2.tgz",
+            "integrity": "sha512-13WwZSx96zim6l1dfZONcqLh3oqyRcjIBsqz2c2iJ3ohgs3605IDWjldH41Gnhh462xGB1j6VGmuGhZ2FKISXA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "graphology-utils": "^2.3.0"
+            },
+            "peerDependencies": {
+                "graphology-types": ">=0.19.0"
+            }
+        },
         "node_modules/graphology-types": {
             "version": "0.24.8",
             "resolved": "https://registry.npmjs.org/graphology-types/-/graphology-types-0.24.8.tgz",
@@ -14082,6 +14138,16 @@
                 "node": ">=10"
             }
         },
+        "node_modules/mnemonist": {
+            "version": "0.39.8",
+            "resolved": "https://registry.npmjs.org/mnemonist/-/mnemonist-0.39.8.tgz",
+            "integrity": "sha512-vyWo2K3fjrUw8YeeZ1zF0fy6Mu59RHokURlld8ymdUPjMlD9EC9ov1/YPqTgqRvUN9nTr3Gqfz29LYAmu0PHPQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "obliterator": "^2.0.1"
+            }
+        },
         "node_modules/ms": {
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -14496,6 +14562,13 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/obliterator": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/obliterator/-/obliterator-2.0.5.tgz",
+            "integrity": "sha512-42CPE9AhahZRsMNslczq0ctAEtqk8Eka26QofnqC346BZdHDySk3LWka23LI7ULIw11NmltpiLagIq8gBozxTw==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/ohash": {
             "version": "2.0.11",
             "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
@@ -14676,6 +14749,16 @@
             "dev": true,
             "license": "BlueOak-1.0.0"
         },
+        "node_modules/pandemonium": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/pandemonium/-/pandemonium-2.4.1.tgz",
+            "integrity": "sha512-wRqjisUyiUfXowgm7MFH2rwJzKIr20rca5FsHXCMNm1W5YPP1hCtrZfgmQ62kP7OZ7Xt+cR858aB28lu5NX55g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "mnemonist": "^0.39.2"
+            }
+        },
         "node_modules/parent-module": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -16490,6 +16573,7 @@
             "integrity": "sha512-/BUbeOwPGruiBOm0YQQ6ZMcLIZ6tf/W+Jcm7dxZyAX0tK3WP9/sq7/NAWBxPIxVahdGjCJoGwej0Gdrv0DxlQQ==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "events": "^3.3.0",
                 "graphology-utils": "^2.5.2"
diff --git a/package.json b/package.json
index 8cb59a00..1a57962a 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
         "@kamiya4047/eslint-plugin-pretty-import": "^0.1.6",
         "@sentry/vite-plugin": "^4.8.0",
         "@sentry/vue": "^10.38.0",
+        "@sigma/node-border": "^3.0.0",
         "@tailwindcss/vite": "^4.1.18",
         "@tanstack/vue-table": "^8.21.3",
         "@tanstack/vue-virtual": "^3.13.18",
@@ -70,7 +71,9 @@
         "eslint-plugin-vue": "^9.33.0",
         "globals": "^17.2.0",
         "graphology": "^0.26.0",
+        "graphology-communities-louvain": "^2.0.2",
         "graphology-layout-forceatlas2": "^0.10.1",
+        "graphology-layout-noverlap": "^0.4.2",
         "jest": "^30.2.0",
         "lightningcss": "^1.31.1",
         "lucide-vue-next": "^0.562.0",
diff --git a/src/views/Charts/components/MutualFriends.vue b/src/views/Charts/components/MutualFriends.vue
index 5715ed26..a4c0fe3a 100644
--- a/src/views/Charts/components/MutualFriends.vue
+++ b/src/views/Charts/components/MutualFriends.vue
@@ -1,46 +1,60 @@
 <template>
-    <div class="mutual-graph pt-12" ref="mutualGraphRef">
-        <div class="options-container mutual-graph__toolbar">
-            <div class="mutual-graph__actions">
-                <TooltipWrapper :content="fetchButtonLabel" side="top">
-                    <Button :disabled="fetchButtonDisabled" @click="startFetch">
-                        <Spinner v-if="isFetching" />
-                        {{ fetchButtonLabel }}
-                    </Button>
-                </TooltipWrapper>
-                <TooltipWrapper
-                    v-if="isFetching"
-                    :content="t('view.charts.mutual_friend.actions.stop_fetching')"
-                    side="top">
-                    <Button variant="destructive" :disabled="status.cancelRequested" @click="cancelFetch">
-                        {{ t('view.charts.mutual_friend.actions.stop') }}
-                    </Button>
-                </TooltipWrapper>
+    <div class="mt-0 flex min-h-[calc(100vh-140px)] flex-col items-center justify-betweenpt-12" ref="mutualGraphRef">
+        <div class="flex items-center w-full">
+            <div
+                class="options-container mt-2 mb-0 flex flex-wrap items-center gap-3 bg-transparent px-0 pb-2 shadow-none">
+                <div class="flex flex-wrap items-center gap-2">
+                    <TooltipWrapper :content="fetchButtonLabel" side="top">
+                        <Button :disabled="fetchButtonDisabled" @click="startFetch">
+                            <Spinner v-if="isFetching" />
+                            {{ fetchButtonLabel }}
+                        </Button>
+                    </TooltipWrapper>
+
+                    <TooltipWrapper
+                        v-if="isFetching"
+                        :content="t('view.charts.mutual_friend.actions.stop_fetching')"
+                        side="top">
+                        <Button variant="destructive" :disabled="status.cancelRequested" @click="cancelFetch">
+                            {{ t('view.charts.mutual_friend.actions.stop') }}
+                        </Button>
+                    </TooltipWrapper>
+                </div>
+            </div>
+            <div
+                v-if="isFetching"
+                class="mt-3 grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] items-center gap-x-3 gap-y-2 rounded-md bg-transparent p-3 ml-auto">
+                <div class="flex justify-between text-[13px]">
+                    <span>{{ t('view.charts.mutual_friend.progress.friends_processed') }}</span>
+                    <strong>{{ fetchState.processedFriends }} / {{ totalFriends }}</strong>
+                </div>
+                <Progress :model-value="progressPercent" class="h-3" />
             </div>
         </div>
 
-        <div v-if="isFetching" class="mutual-graph__status">
-            <div class="mutual-graph__status-row">
-                <span>{{ t('view.charts.mutual_friend.progress.friends_processed') }}</span>
-                <strong>{{ fetchState.processedFriends }} / {{ totalFriends }}</strong>
-            </div>
+        <div
+            v-show="!(hasFetched && !isFetching && !graphReady)"
+            ref="graphContainerRef"
+            class="mt-3 h-[calc(100vh-260px)] min-h-[520px] w-full flex-1 rounded-lg bg-transparent"
+            :style="{ backgroundColor: canvasBackground }"></div>
 
-            <Progress :model-value="progressPercent" class="h-3" />
-        </div>
-
-        <div ref="graphContainerRef" class="mutual-graph__canvas" :style="{ backgroundColor: canvasBackground }"></div>
-
-        <div v-if="hasFetched && !isFetching && !graphReady" class="mutual-graph__placeholder">
-            <span>{{ t('view.charts.mutual_friend.progress.no_relationships_discovered') }}</span>
-        </div>
+        <Empty v-if="hasFetched && !isFetching && !graphReady" class="mt-3 w-full flex-1">
+            <EmptyHeader>
+                <EmptyDescription>
+                    {{ t('view.charts.mutual_friend.progress.no_relationships_discovered') }}
+                </EmptyDescription>
+            </EmptyHeader>
+        </Empty>
     </div>
 </template>
 
 <script setup>
     import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+    import { Empty, EmptyDescription, EmptyHeader } from '@/components/ui/empty';
     import { Button } from '@/components/ui/button';
     import { Progress } from '@/components/ui/progress';
     import { Spinner } from '@/components/ui/spinner';
+    import { createNodeBorderProgram } from '@sigma/node-border';
     import { onBeforeRouteLeave } from 'vue-router';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
@@ -49,6 +63,8 @@
     import Graph from 'graphology';
     import Sigma from 'sigma';
     import forceAtlas2 from 'graphology-layout-forceatlas2';
+    import louvain from 'graphology-communities-louvain';
+    import noverlap from 'graphology-layout-noverlap';
 
     import {
         useAppearanceSettingsStore,
@@ -58,7 +74,9 @@
         useUserStore
     } from '../../../stores';
     import { createRateLimiter, executeWithBackoff } from '../../../shared/utils';
+    import { database } from '../../../service/database';
     import { userRequest } from '../../../api';
+    import { watchState } from '../../../service/watchState';
 
     const { t } = useI18n();
     const friendStore = useFriendStore();
@@ -76,7 +94,8 @@
     const fetchState = chartsStore.mutualGraphFetchState;
     const status = chartsStore.mutualGraphStatus;
 
-    const LOCAL_STORAGE_KEY = 'VRCX_MutualGraphSnapshot';
+    const MAX_LABEL_NAME_LENGTH = 20;
+
     const COLORS_PALETTE = [
         '#5470c6',
         '#91cc75',
@@ -88,14 +107,26 @@
         '#9a60b4',
         '#ea7ccc'
     ];
-    const MAX_LABEL_NAME_LENGTH = 22;
+
+    const NodeBorderProgram = createNodeBorderProgram({
+        borders: [
+            { size: { value: 0.1 }, color: { value: '#f2f2f2' } },
+            { size: { fill: true }, color: { attribute: 'color' } }
+        ]
+    });
 
     const graphContainerRef = ref(null);
     const mutualGraphRef = ref(null);
+
     let sigmaInstance = null;
     let currentGraph = null;
     let resizeObserver = null;
 
+    watch(isDarkMode, () => {
+        if (!currentGraph) return;
+        renderGraph(currentGraph, true);
+    });
+
     const isFetching = computed({
         get: () => status.isFetching,
         set: (val) => {
@@ -126,8 +157,8 @@
     const progressPercent = computed(() =>
         totalFriends.value ? Math.min(100, Math.round((fetchState.processedFriends / totalFriends.value) * 100)) : 0
     );
-    const canvasBackground = computed(() => (isDarkMode.value ? 'rgba(15, 23, 42, 0.35)' : 'rgba(15, 23, 42, 0.02)'));
-    const edgeColor = computed(() => (isDarkMode.value ? 'rgba(226,232,240,0.2)' : 'rgba(15,23,42,0.2)'));
+
+    const canvasBackground = computed(() => 'transparent');
 
     const mutualGraphResizeObserver = new ResizeObserver(() => {
         setMutualGraphHeight();
@@ -143,21 +174,17 @@
 
     onMounted(() => {
         nextTick(() => {
-            if (!graphContainerRef.value) {
-                return;
-            }
+            if (!graphContainerRef.value) return;
+
             resizeObserver = new ResizeObserver(() => {
-                if (sigmaInstance?.refresh) {
-                    sigmaInstance.refresh();
-                }
+                if (sigmaInstance?.refresh) sigmaInstance.refresh();
             });
             resizeObserver.observe(graphContainerRef.value);
+
             mutualGraphResizeObserver.observe(mutualGraphRef.value);
             setMutualGraphHeight();
 
-            if (currentGraph) {
-                renderGraph(currentGraph);
-            }
+            if (currentGraph) renderGraph(currentGraph);
         });
     });
 
@@ -171,56 +198,81 @@
             sigmaInstance = null;
         }
         currentGraph = null;
-        if (mutualGraphResizeObserver) {
-            mutualGraphResizeObserver.disconnect();
-        }
+        if (mutualGraphResizeObserver) mutualGraphResizeObserver.disconnect();
     });
 
     watch(
         activeTab,
         (tab) => {
-            if (tab === 'mutual') {
-                loadGraphFromLocalStorage();
-            }
+            if (tab === 'mutual') loadGraphFromDatabase();
         },
         { immediate: true }
     );
 
-    watch(isDarkMode, () => {
-        if (!currentGraph) {
-            return;
+    watch(
+        () => watchState.isFriendsLoaded,
+        (isFriendsLoaded) => {
+            if (isFriendsLoaded && activeTab.value === 'mutual') {
+                loadGraphFromDatabase();
+            }
         }
-        applyThemeToGraph(currentGraph);
-        renderGraph(currentGraph);
-    });
+    );
 
     function showStatusMessage(message, type = 'info') {
-        if (!message) {
-            return;
-        }
+        if (!message) return;
         const toastFn = toast[type] ?? toast;
         toastFn(message, { duration: 4000 });
     }
 
     function truncateLabelText(text) {
-        if (!text) {
-            return 'Unknown';
-        }
+        if (!text) return 'Unknown';
         return text.length > MAX_LABEL_NAME_LENGTH ? `${text.slice(0, MAX_LABEL_NAME_LENGTH)}…` : text;
     }
 
-    function hashToUnit(value) {
-        let hash = 0;
-        for (let i = 0; i < value.length; i += 1) {
-            hash = (hash * 31 + value.charCodeAt(i)) % 1000;
-        }
-        return hash / 1000 - 0.5;
+    function initPositions(graph) {
+        const n = graph.order;
+        const radius = Math.max(50, Math.sqrt(n) * 30);
+        graph.forEachNode((node) => {
+            const a = Math.random() * Math.PI * 2;
+            const r = Math.sqrt(Math.random()) * radius;
+            graph.mergeNodeAttributes(node, {
+                x: Math.cos(a) * r,
+                y: Math.sin(a) * r
+            });
+        });
     }
 
-    function applyThemeToGraph(graph) {
-        const color = edgeColor.value;
-        graph.forEachEdge((edge) => {
-            graph.setEdgeAttribute(edge, 'color', color);
+    function runLayout(graph) {
+        initPositions(graph);
+
+        const iterations = Math.min(1200, Math.max(400, Math.round(Math.sqrt(graph.order) * 18)));
+
+        const inferred = forceAtlas2.inferSettings ? forceAtlas2.inferSettings(graph) : {};
+        const settings = {
+            ...inferred,
+            barnesHutOptimize: true,
+            barnesHutTheta: 0.8,
+            strongGravityMode: true,
+            gravity: 1.2,
+            scalingRatio: 20,
+            slowDown: 2
+        };
+
+        forceAtlas2.assign(graph, { iterations, settings });
+        noverlap.assign(graph, { maxIterations: 200, settings: { ratio: 1.1, margin: 2 } });
+    }
+
+    function assignCommunitiesAndColors(graph) {
+        const communities = louvain(graph);
+        const ids = Array.from(new Set(Object.values(communities)));
+        ids.sort((a, b) => String(a).localeCompare(String(b)));
+        const idToIndex = new Map(ids.map((id, i) => [id, i]));
+
+        graph.forEachNode((node) => {
+            const communityId = communities[node];
+            const idx = idToIndex.get(communityId) ?? 0;
+            graph.setNodeAttribute(node, 'community', communityId);
+            graph.setNodeAttribute(node, 'color', COLORS_PALETTE[idx % COLORS_PALETTE.length]);
         });
     }
 
@@ -230,32 +282,25 @@
             multi: false,
             allowSelfLoops: false
         });
+
         const nodeDegree = new Map();
         const nodeNames = new Map();
 
         function ensureNode(id, name) {
-            if (!id) {
-                return;
-            }
+            if (!id) return;
             if (!graph.hasNode(id)) {
                 graph.addNode(id);
                 nodeDegree.set(id, 0);
             }
-            if (name && !nodeNames.get(id)) {
-                nodeNames.set(id, name);
-            }
+            if (name && !nodeNames.get(id)) nodeNames.set(id, name);
         }
 
         function addEdge(source, target) {
-            if (!source || !target || source === target) {
-                return;
-            }
+            if (!source || !target || source === target) return;
             const [a, b] = [source, target].sort();
             const key = `${a}__${b}`;
-            if (graph.hasEdge(key)) {
-                return;
-            }
-            graph.addEdgeWithKey(key, a, b, { color: edgeColor.value });
+            if (graph.hasEdge(key)) return;
+            graph.addEdgeWithKey(key, a, b, { size: 0.75 });
             nodeDegree.set(a, (nodeDegree.get(a) || 0) + 1);
             nodeDegree.set(b, (nodeDegree.get(b) || 0) + 1);
         }
@@ -266,9 +311,7 @@
             ensureNode(friendId, friendName || friendId);
 
             for (const mutual of mutuals) {
-                if (!mutual?.id) {
-                    continue;
-                }
+                if (!mutual?.id) continue;
                 const cached = cachedUsers.get(mutual.id);
                 const label = cached?.displayName || mutual.displayName || mutual.id;
                 ensureNode(mutual.id, label);
@@ -278,69 +321,187 @@
 
         const nodeIds = graph.nodes();
         const maxDegree = nodeIds.reduce((max, id) => Math.max(max, nodeDegree.get(id) || 0), 0);
-        const radius = Math.max(80, Math.sqrt(Math.max(nodeIds.length, 1)) * 60);
 
-        nodeIds.forEach((id, index) => {
-            const baseX = hashToUnit(id) * radius;
-            const baseY = hashToUnit(`${id}-y`) * radius;
-            const jitterX = hashToUnit(id + id) * radius * 0.15;
-            const jitterY = hashToUnit(id + 'z') * radius * 0.15;
+        nodeIds.forEach((id) => {
             const degree = nodeDegree.get(id) || 0;
-            const size = 6 + (maxDegree ? (degree / maxDegree) * 16 : 0);
+            const size = 4 + (maxDegree ? (degree / maxDegree) * 18 : 0);
             const label = truncateLabelText(nodeNames.get(id) || id);
-            const color = COLORS_PALETTE[index % COLORS_PALETTE.length];
-
-            graph.mergeNodeAttributes(id, {
-                label,
-                size,
-                color,
-                x: baseX + jitterX,
-                y: baseY + jitterY
-            });
+            graph.mergeNodeAttributes(id, { label, size, type: 'border' });
         });
 
         if (graph.order > 1) {
-            const iterations = Math.min(200, Math.max(90, Math.round(Math.sqrt(graph.order)) * 12));
-            const inferred = forceAtlas2.inferSettings ? forceAtlas2.inferSettings(graph) : {};
-            const settings = {
-                ...inferred,
-                gravity: 0.7,
-                scalingRatio: 14,
-                slowDown: 1,
-                barnesHutOptimize: true,
-                strongGravityMode: false
-            };
-            forceAtlas2.assign(graph, {
-                iterations,
-                settings
-            });
+            runLayout(graph);
+            assignCommunitiesAndColors(graph);
         }
 
-        applyThemeToGraph(graph);
-
         graphNodeCount.value = graph.order;
         return graph;
     }
 
-    function renderGraph(graph) {
-        if (!graphContainerRef.value) {
-            return;
-        }
-        if (sigmaInstance) {
+    function renderGraph(graph, forceRecreate = false) {
+        if (!graphContainerRef.value) return;
+
+        const DEFAULT_LABEL_THRESHOLD = 10;
+
+        const labelColor = isDarkMode.value ? '#e2e8f0' : '#111827';
+        const EDGE_BASE = isDarkMode.value ? '#334155' : '#94a3b8';
+        const EDGE_ACTIVE = isDarkMode.value ? '#bac1c9' : '#0f172a';
+
+        let cameraState = null;
+
+        if (sigmaInstance && forceRecreate) {
+            try {
+                const cam = sigmaInstance.getCamera?.();
+                cameraState = cam?.getState?.() || null;
+            } catch (e) {}
             sigmaInstance.kill();
             sigmaInstance = null;
         }
-        const labelColor = isDarkMode.value ? '#e2e8f0' : '#111827';
-        sigmaInstance = new Sigma(graph, graphContainerRef.value, {
-            renderLabels: true,
-            labelRenderedSizeThreshold: 8,
-            labelColor: { color: labelColor }
-        });
-        sigmaInstance.on('clickNode', ({ node }) => {
-            if (node) {
-                showUserDialog(node);
+
+        if (!sigmaInstance) {
+            sigmaInstance = new Sigma(graph, graphContainerRef.value, {
+                renderLabels: true,
+                labelRenderedSizeThreshold: DEFAULT_LABEL_THRESHOLD,
+                labelColor: { color: labelColor },
+                defaultEdgeColor: EDGE_BASE,
+                zIndex: true,
+                defaultNodeType: 'border',
+                nodeProgramClasses: { border: NodeBorderProgram },
+                defaultDrawNodeHover: (ctx, data, settings) => {
+                    if (!data.label) return;
+
+                    const fontSize = settings.labelSize ?? 12;
+                    const font = settings.labelFont ?? 'sans-serif';
+
+                    ctx.font = `${fontSize}px ${font}`;
+                    ctx.textBaseline = 'middle';
+
+                    const paddingX = 6;
+                    const paddingY = 4;
+
+                    const textWidth = ctx.measureText(data.label).width;
+                    const w = textWidth + paddingX * 2;
+                    const h = fontSize + paddingY * 2;
+
+                    const x = data.x + data.size - 5;
+                    const y = data.y - h / 2;
+
+                    ctx.shadowColor = 'rgba(0, 0, 0, 0.25)';
+                    ctx.shadowBlur = 6;
+                    ctx.shadowOffsetX = 0;
+                    ctx.shadowOffsetY = 2;
+
+                    ctx.fillStyle = 'rgba(255, 255, 255, 1)';
+                    ctx.fillRect(x, y, w, h);
+
+                    ctx.fillStyle = '#111827';
+                    ctx.fillText(data.label, x + paddingX, y + h / 2);
+                }
+            });
+        } else {
+            sigmaInstance.setGraph(graph);
+            sigmaInstance.setSetting('labelRenderedSizeThreshold', DEFAULT_LABEL_THRESHOLD);
+            sigmaInstance.setSetting('labelColor', { color: labelColor });
+            sigmaInstance.setSetting('defaultEdgeColor', EDGE_BASE);
+            sigmaInstance.setSetting('zIndex', true);
+        }
+
+        if (cameraState) {
+            try {
+                const cam = sigmaInstance.getCamera?.();
+                cam?.setState?.(cameraState);
+            } catch (e) {}
+        }
+
+        let hovered = null;
+        let neighbors = new Set();
+
+        const rebuildNeighbors = (node) => {
+            neighbors = node ? new Set(graph.neighbors(node)) : new Set();
+        };
+
+        sigmaInstance.setSetting('nodeReducer', (node, data) => {
+            const res = { ...data };
+
+            if (!hovered) {
+                res.color = data.color;
+                res.zIndex = 1;
+                return res;
             }
+
+            const isHover = node === hovered;
+            const isNeighbor = neighbors.has(node);
+
+            if (isHover) {
+                res.color = '#facc15';
+                res.size = (data.size || 4) * 1.6;
+                res.label = data.label;
+                res.labelColor = '#111827';
+                res.zIndex = 3;
+                return res;
+            }
+
+            if (isNeighbor) {
+                res.color = data.color;
+                res.size = (data.size || 4) * 1.2;
+                res.label = data.label;
+                res.labelColor = '#111827';
+                res.zIndex = 2;
+                return res;
+            }
+
+            res.color = isDarkMode.value ? 'rgba(148,163,184,0.04)' : 'rgba(100,116,139,0.06)';
+            res.size = 0.7;
+            res.label = '';
+            res.zIndex = 0;
+            return res;
         });
+
+        sigmaInstance.setSetting('edgeReducer', (edge, data) => {
+            const res = { ...data };
+
+            if (!hovered) {
+                res.hidden = false;
+                res.color = EDGE_BASE;
+                res.size = data.size || 1;
+                return res;
+            }
+
+            const [s, t] = graph.extremities(edge);
+            const active = s === hovered || t === hovered;
+
+            if (active) {
+                res.hidden = false;
+                res.color = EDGE_ACTIVE;
+                res.size = data.size || 1;
+                return res;
+            }
+
+            res.hidden = true;
+            return res;
+        });
+
+        sigmaInstance.removeAllListeners?.();
+
+        sigmaInstance.on('enterNode', ({ node }) => {
+            hovered = node;
+            rebuildNeighbors(node);
+            sigmaInstance.setSetting('labelRenderedSizeThreshold', 0);
+            sigmaInstance.refresh();
+        });
+
+        sigmaInstance.on('leaveNode', () => {
+            hovered = null;
+            rebuildNeighbors(null);
+            sigmaInstance.setSetting('labelRenderedSizeThreshold', DEFAULT_LABEL_THRESHOLD);
+            sigmaInstance.refresh();
+        });
+
+        sigmaInstance.on('clickNode', ({ node }) => {
+            if (node) showUserDialog(node);
+        });
+
+        sigmaInstance.refresh();
     }
 
     function applyGraph(mutualMap) {
@@ -349,15 +510,22 @@
         renderGraph(graph);
     }
 
-    async function loadGraphFromLocalStorage() {
-        if (hasFetched.value || isFetching.value || isLoadingSnapshot.value) {
-            return;
-        }
+    async function loadGraphFromDatabase() {
+        if (!watchState.isLoggedIn || !currentUser.value?.id) return;
+        if (!watchState.isFriendsLoaded) return;
+        if (isFetching.value || isLoadingSnapshot.value) return;
+        if (hasFetched.value && !status.needsRefetch) return;
+
         isLoadingSnapshot.value = true;
         loadingToastId.value = toast.loading(t('view.charts.mutual_friend.status.loading_cache'));
+
         try {
-            const raw = localStorage.getItem(LOCAL_STORAGE_KEY);
-            if (!raw) {
+            const snapshot = await database.getMutualGraphSnapshot();
+            if (!snapshot || snapshot.size === 0) {
+                if (totalFriends.value === 0) {
+                    showStatusMessage(t('view.charts.mutual_friend.status.no_friends_to_process'), 'info');
+                    return;
+                }
                 if (isOptOut.value) {
                     promptEnableMutualFriendsSharing();
                     return;
@@ -366,22 +534,15 @@
                 return;
             }
 
-            const parsed = JSON.parse(raw);
-            const snapshot = parsed?.data;
-            if (!snapshot || typeof snapshot !== 'object' || Array.isArray(snapshot)) {
-                await promptInitialFetch();
-                return;
-            }
-
             const mutualMap = new Map();
-            Object.entries(snapshot).forEach(([friendId, mutualIds]) => {
-                if (!friendId) {
-                    return;
-                }
+            snapshot.forEach((mutualIds, friendId) => {
+                if (!friendId) return;
                 const friendEntry = friends.value?.get ? friends.value.get(friendId) : undefined;
                 const fallbackRef = friendEntry?.ref || cachedUsers.get(friendId);
+
                 let normalizedMutuals = Array.isArray(mutualIds) ? mutualIds : [];
                 normalizedMutuals = normalizedMutuals.filter((id) => id != 'usr_00000000-0000-0000-0000-000000000000');
+
                 mutualMap.set(friendId, {
                     friend: friendEntry || (fallbackRef ? { id: friendId, ref: fallbackRef } : { id: friendId }),
                     mutuals: normalizedMutuals.map((id) => ({ id }))
@@ -410,9 +571,7 @@
     }
 
     async function promptInitialFetch() {
-        if (isFetching.value || hasFetched.value || !totalFriends.value) {
-            return;
-        }
+        if (isFetching.value || hasFetched.value || !totalFriends.value) return;
 
         modalStore
             .confirm({
@@ -423,7 +582,6 @@
             })
             .then(async ({ ok }) => {
                 if (!ok) return;
-
                 await startFetch();
             });
     }
@@ -445,35 +603,26 @@
     }
 
     function cancelFetch() {
-        if (isFetching.value) {
-            status.cancelRequested = true;
-        }
+        if (isFetching.value) status.cancelRequested = true;
     }
 
     const isCancelled = () => status.cancelRequested === true;
 
     async function startFetch() {
-        const rateLimiter = createRateLimiter({
-            limitPerInterval: 5,
-            intervalMs: 1000
-        });
+        const rateLimiter = createRateLimiter({ limitPerInterval: 5, intervalMs: 1000 });
 
         const fetchMutualFriends = async (userId) => {
             const collected = [];
             let offset = 0;
+
             while (true) {
-                if (isCancelled()) {
-                    break;
-                }
+                if (isCancelled()) break;
                 await rateLimiter.wait();
-                if (isCancelled()) {
-                    break;
-                }
+                if (isCancelled()) break;
+
                 const args = await executeWithBackoff(
                     () => {
-                        if (isCancelled()) {
-                            throw new Error('cancelled');
-                        }
+                        if (isCancelled()) throw new Error('cancelled');
                         return userRequest.getMutualFriends({ userId, offset, n: 100 });
                     },
                     {
@@ -482,26 +631,23 @@
                         shouldRetry: (err) => err?.status === 429 || (err?.message || '').includes('429')
                     }
                 ).catch((err) => {
-                    if ((err?.message || '') === 'cancelled') {
-                        return null;
-                    }
+                    if ((err?.message || '') === 'cancelled') return null;
                     throw err;
                 });
-                if (!args || isCancelled()) {
-                    break;
-                }
+
+                if (!args || isCancelled()) break;
+
                 collected.push(...args.json);
-                if (args.json.length < 100) {
-                    break;
-                }
+
+                if (args.json.length < 100) break;
                 offset += args.json.length;
             }
+
             return collected;
         };
 
-        if (isFetching.value || isOptOut.value) {
-            return;
-        }
+        if (isFetching.value || isOptOut.value) return;
+
         if (!totalFriends.value) {
             showStatusMessage(t('view.charts.mutual_friend.status.no_friends_to_process'), 'info');
             return;
@@ -512,24 +658,23 @@
         status.needsRefetch = false;
         status.cancelRequested = false;
         hasFetched.value = false;
-        Object.assign(fetchState, {
-            processedFriends: 0
-        });
+        Object.assign(fetchState, { processedFriends: 0 });
 
         const friendSnapshot = Array.from(friends.value.values());
         const mutualMap = new Map();
 
         let cancelled = false;
+
         try {
             for (let index = 0; index < friendSnapshot.length; index += 1) {
                 const friend = friendSnapshot[index];
-                if (!friend?.id) {
-                    continue;
-                }
+                if (!friend?.id) continue;
+
                 if (isCancelled()) {
                     cancelled = true;
                     break;
                 }
+
                 try {
                     const mutuals = await fetchMutualFriends(friend.id);
                     if (isCancelled()) {
@@ -545,6 +690,7 @@
                     console.warn('[MutualNetworkGraph] Skipping friend due to fetch error', friend.id, err);
                     continue;
                 }
+
                 fetchState.processedFriends = index + 1;
                 if (status.cancelRequested) {
                     cancelled = true;
@@ -563,10 +709,31 @@
             status.needsRefetch = false;
 
             try {
-                persistMutualGraphToLocalStorage(mutualMap);
+                const entries = new Map();
+                mutualMap.forEach((value, friendId) => {
+                    if (!friendId) return;
+                    const normalizedFriendId = String(friendId);
+                    const collection = Array.isArray(value?.mutuals) ? value.mutuals : [];
+                    const ids = [];
+
+                    for (const entry of collection) {
+                        const identifier =
+                            typeof entry?.id === 'string'
+                                ? entry.id
+                                : entry?.id !== undefined && entry?.id !== null
+                                  ? String(entry.id)
+                                  : '';
+                        if (identifier && identifier !== 'usr_00000000-0000-0000-0000-000000000000')
+                            ids.push(identifier);
+                    }
+
+                    entries.set(normalizedFriendId, ids);
+                });
+                await database.saveMutualGraphSnapshot(entries);
             } catch (persistErr) {
                 console.error('[MutualNetworkGraph] Failed to cache data', persistErr);
             }
+
             hasFetched.value = true;
         } catch (err) {
             console.error('[MutualNetworkGraph] fetch aborted', err);
@@ -576,114 +743,7 @@
         }
     }
 
-    function persistMutualGraphToLocalStorage(mutualMap) {
-        const snapshot = {};
-        mutualMap.forEach((value, friendId) => {
-            if (!friendId) {
-                return;
-            }
-            const normalizedFriendId = String(friendId);
-            const collection = Array.isArray(value?.mutuals) ? value.mutuals : [];
-            const ids = [];
-            for (const entry of collection) {
-                const identifier =
-                    typeof entry?.id === 'string'
-                        ? entry.id
-                        : entry?.id !== undefined && entry?.id !== null
-                          ? String(entry.id)
-                          : '';
-                if (identifier) {
-                    ids.push(identifier);
-                }
-            }
-            snapshot[normalizedFriendId] = ids;
-        });
-
-        const payload = {
-            version: 1,
-            savedAt: Date.now(),
-            data: snapshot
-        };
-        localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(payload));
-    }
-
     onBeforeRouteLeave(() => {
         chartsStore.resetMutualGraphState();
     });
 </script>
-
-<style scoped>
-    .mutual-graph {
-        margin-top: 0;
-        display: flex;
-        flex-direction: column;
-        min-height: calc(100vh - 140px);
-    }
-
-    .mutual-graph__toolbar {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-top: 8px;
-        margin-bottom: 0;
-        background: transparent;
-        border: none;
-        box-shadow: none;
-        padding: 0 0 8px 0;
-        gap: 12px;
-        flex-wrap: wrap;
-    }
-
-    .mutual-graph__actions {
-        display: flex;
-        gap: 8px;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-
-    .mutual-graph__docs-button {
-        text-decoration: none;
-    }
-
-    .mutual-graph__status {
-        margin-top: 12px;
-        padding: 12px 16px;
-        border-radius: 6px;
-        background: transparent;
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-        gap: 8px 12px;
-        align-items: center;
-    }
-
-    .mutual-graph__status-row {
-        display: flex;
-        justify-content: space-between;
-        font-size: 13px;
-    }
-
-    .mutual-graph__status-row strong {
-        font-weight: 600;
-    }
-
-    .mutual-graph__canvas {
-        margin-top: 12px;
-        width: 100%;
-        flex: 1 1 auto;
-        height: calc(100vh - 260px);
-        min-height: 520px;
-        border-radius: 8px;
-        background: rgba(15, 23, 42, 0.02);
-    }
-
-    .mutual-graph__placeholder {
-        margin-top: 12px;
-        padding: 40px;
-        text-align: center;
-        border-radius: 8px;
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-</style>