diff --git a/Frontend/src/components/analytics/HeatmapLegendControls.tsx b/Frontend/src/components/analytics/HeatmapLegendControls.tsx
new file mode 100644
index 00000000..4e24338c
--- /dev/null
+++ b/Frontend/src/components/analytics/HeatmapLegendControls.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+
+export interface HeatmapScaleConfig {
+  minThreshold: number;
+  maxThreshold: number;
+  colorScheme: "indigo" | "emerald" | "amber" | "rose";
+}
+
+export interface HeatmapLegendControlsProps {
+  initialConfig?: HeatmapScaleConfig;
+  onChange?: (config: HeatmapScaleConfig) => void;
+}
+
+export const HeatmapLegendControls: React.FC<HeatmapLegendControlsProps> = ({
+  initialConfig = { minThreshold: 0, maxThreshold: 100, colorScheme: "indigo" },
+  onChange,
+}) => {
+  const [config, setConfig] = useState<HeatmapScaleConfig>(initialConfig);
+
+  const handleUpdate = (updated: Partial<HeatmapScaleConfig>) => {
+    const next = { ...config, ...updated };
+    setConfig(next);
+    onChange?.(next);
+  };
+
+  return (
+    <div className="p-4 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800">
+      <h4 className="text-sm font-semibold mb-3 text-gray-800 dark:text-gray-200">
+        Heatmap Scale Controls
+      </h4>
+      <div className="flex flex-wrap items-center gap-4 text-xs">
+        <label className="flex items-center gap-2">
+          <span>Min:</span>
+          <input
+            type="number"
+            value={config.minThreshold}
+            onChange={e => handleUpdate({ minThreshold: Number(e.target.value) })}
+            className="w-16 px-2 py-1 border rounded dark:bg-gray-800 dark:border-gray-700"
+          />
+        </label>
+        <label className="flex items-center gap-2">
+          <span>Max:</span>
+          <input
+            type="number"
+            value={config.maxThreshold}
+            onChange={e => handleUpdate({ maxThreshold: Number(e.target.value) })}
+            className="w-16 px-2 py-1 border rounded dark:bg-gray-800 dark:border-gray-700"
+          />
+        </label>
+        <label className="flex items-center gap-2">
+          <span>Palette:</span>
+          <select
+            value={config.colorScheme}
+            onChange={e => handleUpdate({ colorScheme: e.target.value as HeatmapScaleConfig["colorScheme"] })}
+            className="px-2 py-1 border rounded dark:bg-gray-800 dark:border-gray-700"
+          >
+            <option value="indigo">Indigo</option>
+            <option value="emerald">Emerald</option>
+            <option value="amber">Amber</option>
+            <option value="rose">Rose</option>
+          </select>
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default HeatmapLegendControls;
diff --git a/Frontend/src/components/analytics/MultiAreaComparison.tsx b/Frontend/src/components/analytics/MultiAreaComparison.tsx
new file mode 100644
index 00000000..36543f8d
--- /dev/null
+++ b/Frontend/src/components/analytics/MultiAreaComparison.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+export interface AreaStats {
+  areaId: string;
+  name: string;
+  gistCount: number;
+  activeUsers: number;
+  densityScore: number;
+}
+
+export interface MultiAreaComparisonProps {
+  areas?: AreaStats[];
+}
+
+export const MultiAreaComparison: React.FC<MultiAreaComparisonProps> = ({
+  areas = [],
+}) => {
+  return (
+    <div className="p-4 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800">
+      <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">
+        Multi-Area Spatial Comparison
+      </h3>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {areas.map(area => (
+          <div key={area.areaId} className="p-3 bg-gray-50 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700">
+            <h4 className="font-medium text-indigo-600 dark:text-indigo-400 mb-2">{area.name}</h4>
+            <div className="space-y-1 text-xs text-gray-600 dark:text-gray-300">
+              <div className="flex justify-between">
+                <span>Gist Count:</span>
+                <span className="font-semibold">{area.gistCount}</span>
+              </div>
+              <div className="flex justify-between">
+                <span>Active Users:</span>
+                <span className="font-semibold">{area.activeUsers}</span>
+              </div>
+              <div className="flex justify-between">
+                <span>Density Score:</span>
+                <span className="font-semibold">{area.densityScore}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MultiAreaComparison;