diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index e67d9ee..9dab76d 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -2,6 +2,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import './Navbar.css'
 import { GiFamilyHouse } from 'react-icons/gi';
+import Profile from './Profile';
 const Navbar = () => {
     const navigate = useNavigate();
     const location = useLocation();
@@ -55,6 +56,7 @@ const Navbar = () => {
                     Compare Suburbs
                 </motion.button>
             </div>
+            <Profile/>
         </div>
     )
 }
diff --git a/frontend/src/components/Profile.jsx b/frontend/src/components/Profile.jsx
new file mode 100644
index 0000000..42aa8e0
--- /dev/null
+++ b/frontend/src/components/Profile.jsx
@@ -0,0 +1,92 @@
+import { useEffect, useState } from "react";
+import { FiDatabase } from "react-icons/fi";
+import BasicInput from "./Inputs";
+
+const Profile = () => {
+    const [modal, setModal] = useState(false);
+    const [cusId, setCusId] = useState('');
+    const [index, setIndex] = useState(0);
+
+    const baseSelections = ['Default', 'Default (small)'];
+    const [selections, setSelections] = useState(baseSelections);
+
+    const defaultIds = [
+        "76d3b838-5880-4320-b42f-8bd8273ab6a0",
+        "34c762a2-e1cd-44a7-a9ea-56f22d64989e"
+    ];
+
+    useEffect(() => {
+        const savedId = localStorage.getItem('id');
+        if (savedId && !defaultIds.includes(savedId)) {
+            setCusId(savedId);
+            setSelections([...baseSelections, 'Custom']);
+            setIndex(2);
+        } else if (savedId) {
+            const foundIndex = defaultIds.indexOf(savedId);
+            setIndex(foundIndex !== -1 ? foundIndex : 0);
+        }
+    }, []);
+
+    const handleSelectChange = (e) => {
+        const newIndex = parseInt(e.target.value);
+        setIndex(newIndex);
+
+        if (newIndex < 2) {
+            localStorage.setItem('id', defaultIds[newIndex]);
+        } else if (cusId) {
+            localStorage.setItem('id', cusId);
+        }
+    };
+
+    const handleCusIdChange = (e) => {
+        const value = e.target.value.trim();
+        setCusId(value);
+
+        if (value) {
+            localStorage.setItem('id', value);
+            if (!selections.includes('Custom')) {
+                setSelections([...baseSelections, 'Custom']);
+                setIndex(2); // auto-select custom
+            }
+        } else {
+            localStorage.removeItem('id');
+            setSelections(baseSelections);
+            if (index === 2) setIndex(0); // Reset to Default
+        }
+    };
+
+    return (
+        <div className="h-full relative">
+            <FiDatabase className="text-4xl" onClick={() => setModal(!modal)} />
+            {modal && (
+                <div className="absolute right-0 top-13 z-100 border border-white/30 bg-[#080929] rounded-sm p-4">
+                    <p className="text-xl pb-2 text-gray-300">Dataset</p>
+                    <select
+                        value={index}
+                        onChange={handleSelectChange}
+                        className="pr-10 bg-[linear-gradient(to_top_right,rgba(24,44,88,0.4)_13.2%,rgba(227,228,252,0.02)_88.27%)] text-[#CF9FFF] border border-[#c8c8c8] rounded-md px-6 py-4 cursor-pointer transition duration-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-[#466fba]"
+                    >
+                        {selections.map((opt, i) => (
+                            <option key={i} value={i} className="text-black">
+                                {opt}
+                            </option>
+                        ))}
+                    </select>
+
+                    <input
+                            type="text"
+                            placeholder="Custom dataset ID"
+                            value={cusId}
+                            onChange={handleCusIdChange}
+                            className="w-full bg-[#1e1a36] text-white mt-2
+                                placeholder:text-gray-400 border border-[#2a263d] 
+                                rounded-xl px-5 py-3 focus:outline-none
+                                focus:border-[#ffffffe0] focus:border-1 focus:bg-none focus:bg-[#0b0a27] shadow-inner"
+                    />
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Profile;
diff --git a/frontend/src/pages/CommercialRecs.jsx b/frontend/src/pages/CommercialRecs.jsx
index fea9dde..ade2fd4 100644
--- a/frontend/src/pages/CommercialRecs.jsx
+++ b/frontend/src/pages/CommercialRecs.jsx
@@ -17,13 +17,19 @@ import {
 } from "recharts";
 
 const CommercialRecs = () => {
-  const [id, setId] = useState(null);
   const [topN, setTopN] = useState(10);
   const [loading, setLoading] = useState(false);
   const [recs, setRecs] = useState(null);
   const [isOpen, setIsOpen] = useState(false);
 
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
   const fetchPrice = async () => {
+    const id = getId();
     if (id == null) {
       alert("no id given");
       return;
@@ -66,13 +72,6 @@ const CommercialRecs = () => {
         ]}
         loading={loading}
       >
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Dataset ID"
-          onChange={(e) => setId(e.target.value || null)}
-        />
-
         <BasicInput
           type="number"
           name="top_n"
diff --git a/frontend/src/pages/CommercialRecsTargeted.jsx b/frontend/src/pages/CommercialRecsTargeted.jsx
index c672e73..e4450a1 100644
--- a/frontend/src/pages/CommercialRecsTargeted.jsx
+++ b/frontend/src/pages/CommercialRecsTargeted.jsx
@@ -9,13 +9,20 @@ import Panel from "@/components/Blocks";
 import Loading from "@/components/Loading";
 
 const CommercialRecommendationsTargeted = () => {
-  const [id, setId] = useState(null);
   const [topN, setTopN] = useState(10);
   const [loading, setLoading] = useState(false);
   const [recs, setRecs] = useState(null);
   const [isOpen, setIsOpen] = useState(false);
 
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
+
   const fetchPrice = async () => {
+    const id = getId();
     if (id == null) {
       alert("no id given");
       return;
@@ -69,12 +76,6 @@ const CommercialRecommendationsTargeted = () => {
         ]}
         loading={loading}
       >
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Dataset ID"
-          onChange={(e) => setId(e.target.value || null)}
-        />
 
         <BasicInput
           type="number"
diff --git a/frontend/src/pages/CrimeWeight.jsx b/frontend/src/pages/CrimeWeight.jsx
index 17bdd24..9267a1b 100644
--- a/frontend/src/pages/CrimeWeight.jsx
+++ b/frontend/src/pages/CrimeWeight.jsx
@@ -7,7 +7,6 @@ import Loading from "@/components/Loading";
 import { Button } from "@/components/ui/button";
 
 const CrimeWeight = () => {
-  const [id, setId] = useState(null);
   const [suburbInput, setSuburbInput] = useState("");
   const [suburbs, setSuburbs] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -24,7 +23,15 @@ const CrimeWeight = () => {
     setSuburbs(suburbs.filter((s) => s !== sub));
   };
 
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
+
   const fetchData = async () => {
+    const id = getId();
     if (!id) {
       alert("Please enter an ID");
       return;
@@ -77,14 +84,6 @@ const CrimeWeight = () => {
         description="Check the weighted crime rate per 10,000 population by suburbs. Crimes are weighted by their severity."
         loading={loading}
       >
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Enter ID"
-          value={id || ""}
-          onChange={(e) => setId(e.target.value)}
-        />
-
         <div className="flex gap-2 mb-4 justify-center items-center">
           <BasicInput
             type="text"
diff --git a/frontend/src/pages/InfluenceFactor.jsx b/frontend/src/pages/InfluenceFactor.jsx
index f7b39df..16ff641 100644
--- a/frontend/src/pages/InfluenceFactor.jsx
+++ b/frontend/src/pages/InfluenceFactor.jsx
@@ -7,12 +7,19 @@ import Panel from "@/components/Blocks";
 const InfluenceFactor = () => {
   const [loading, setLoading] = useState(false);
   const [factor, setFactor] = useState(null);
-  const [id, setId] = useState(null);
   const [targetCol, setTargetCol] = useState(null);
   const [filterCol, setFilterCol] = useState(null);
   const [filterVal, setFilterVal] = useState(null);
   const [dropCol, setDropCol] = useState(null);
+  
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
   const fetchData = async () => {
+    const id = getId()
     if (id === null) {
       alert("missing id");
       return;
@@ -51,18 +58,6 @@ const InfluenceFactor = () => {
         description="Provides a ranked list of real estate features effecting the target variable (from most impactful to least impactful)"
         loading={loading}
       >
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Id"
-          onChange={(e) => {
-            if (e.target.value !== "") {
-              setId(e.target.value);
-            } else {
-              setId(null);
-            }
-          }}
-        />
         <BasicInput
           type="text"
           name="id"
diff --git a/frontend/src/pages/InvestmentPotential.jsx b/frontend/src/pages/InvestmentPotential.jsx
index 6b03bf9..40f8157 100644
--- a/frontend/src/pages/InvestmentPotential.jsx
+++ b/frontend/src/pages/InvestmentPotential.jsx
@@ -16,10 +16,16 @@ import {
 const InvestmentPotential = () => {
   const [loading, setLoading] = useState(false);
   const [investPotential, setInvestPotential] = useState(null);
-  const [id, setId] = useState(null);
   const [topN, setTopN] = useState(null);
 
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; 
+
+    return storedId;
+  };
   const fetchData = async () => {
+    const id = getId();
     if (id == null) {
       alert("missing id");
       return;
@@ -63,18 +69,6 @@ const InvestmentPotential = () => {
         ]}
         loading={loading}
       >
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Dataset ID"
-          onChange={(e) => {
-            if (e.target.value !== "") {
-              setId(e.target.value);
-            } else {
-              setId(null);
-            }
-          }}
-        />
         <BasicInput
           type="number"
           name="top_n"
diff --git a/frontend/src/pages/PropertyAffordabilityIndex.jsx b/frontend/src/pages/PropertyAffordabilityIndex.jsx
index 9868223..b3e27f1 100644
--- a/frontend/src/pages/PropertyAffordabilityIndex.jsx
+++ b/frontend/src/pages/PropertyAffordabilityIndex.jsx
@@ -20,7 +20,6 @@ const PropertyAffordabilityIndex = () => {
   const [income, setIncome] = useState("32292");
   const [affordabilityData, setAffordabilityData] = useState(null);
   const [mapHtml, setMapHtml] = useState(null);
-  const [id, setId] = useState(null);
   const [minIndex, setMinIndex] = useState(0);
   const [sortConfig, setSortConfig] = useState({
     key: "norm_affordability_index",
@@ -46,7 +45,14 @@ const PropertyAffordabilityIndex = () => {
     }, 10000);
   };
 
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
   const fetchData = async () => {
+    const id = getId()
     if (id == null) {
       alert("missing id");
       return;
@@ -110,18 +116,6 @@ const PropertyAffordabilityIndex = () => {
         }
         loading={loading}
       >
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Id"
-          onChange={(e) => {
-            if (e.target.value !== "") {
-              setId(e.target.value);
-            } else {
-              setId(null);
-            }
-          }}
-        />
         <BasicInput
           type="text"
           name="income"
diff --git a/frontend/src/pages/PropertyPrices.jsx b/frontend/src/pages/PropertyPrices.jsx
index 4c53a6d..5e680c6 100644
--- a/frontend/src/pages/PropertyPrices.jsx
+++ b/frontend/src/pages/PropertyPrices.jsx
@@ -8,7 +8,6 @@ const PropertyPrices = () => {
   const [loading, setLoading] = useState(false);
   const [loaded, setLoaded] = useState(false);
   const [price, setPrice] = useState("");
-  const [id, setId] = useState(null);
 
   const [minPrice, setMinPrice] = useState(null);
   const [maxPrice, setMaxPrice] = useState(null);
@@ -22,7 +21,15 @@ const PropertyPrices = () => {
   const [maxSize, setMaxSize] = useState(null);
   const [type, setType] = useState(null);
 
+
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
   const fetchPrice = async () => {
+    const id = getId()
     if (id == null) {
       alert("missing id");
       return;
@@ -85,18 +92,6 @@ const PropertyPrices = () => {
         description="Explore average property prices with optional filters like suburb, size and features. "
         loading={loading}
       >
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Id"
-          onChange={(e) => {
-            if (e.target.value !== "") {
-              setId(e.target.value);
-            } else {
-              setId(null);
-            }
-          }}
-        />
         <p>Price range:</p>
         <BasicInput
           type="text"
diff --git a/frontend/src/pages/SuburbLivability.jsx b/frontend/src/pages/SuburbLivability.jsx
index 9fdc153..0f216bb 100644
--- a/frontend/src/pages/SuburbLivability.jsx
+++ b/frontend/src/pages/SuburbLivability.jsx
@@ -22,7 +22,6 @@ const SuburbLivability = () => {
   const [density, setDensity] = useState(0.1);
   const [crimeRiskWeight, setCrimeRiskWeight] = useState(0.1);
   const [weatherRiskWeight, setWeatherRiskWeight] = useState(0.1);
-  const [id, setId] = useState(null);
   const [livabilityData, setLivabilityData] = useState(null);
   const [mapHtml, setMapHtml] = useState(null);
   const [minIndex, setMinIndex] = useState(0);
@@ -47,7 +46,15 @@ const SuburbLivability = () => {
     }, 15000);
   };
 
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
+
   const fetchData = async () => {
+    const id = getId()
     if (id == null) {
       alert("missing id");
       return;
@@ -123,18 +130,6 @@ const SuburbLivability = () => {
         description="Discover the best suburbs to live in based on livability score given weightings of proximity to CBD, property size, population density, crime risk and weather risk"
         loading={loading}      
       >
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Dataset ID"
-          onChange={(e) => {
-            if (e.target.value !== "") {
-              setId(e.target.value);
-            } else {
-              setId(null);
-            }
-          }}
-        />
         <BasicInput
           type="text"
           name="proximityWeight"
diff --git a/frontend/src/pages/SuburbPriceMap.jsx b/frontend/src/pages/SuburbPriceMap.jsx
index 8456838..bd38c40 100644
--- a/frontend/src/pages/SuburbPriceMap.jsx
+++ b/frontend/src/pages/SuburbPriceMap.jsx
@@ -7,8 +7,15 @@ import Loading from "@/components/Loading";
 const SuburbPriceMap = () => {
   const [loading, setLoading] = useState(false);
   const [ret, setRet] = useState(null);
-  const [id, setId] = useState(null);
+
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
   const fetchData = async () => {
+    const id = getId()
     if (id == null) {
       alert("missing id");
       return;
@@ -44,22 +51,10 @@ const SuburbPriceMap = () => {
       >
         {!ret ? (
           <>
-            <BasicInput
-              type="text"
-              name="id"
-              placeholder="Id"
-              onChange={(e) => {
-                if (e.target.value !== "") {
-                  setId(e.target.value);
-                } else {
-                  setId(null);
-                }
-              }}
-            />
             {loading ? (
               <Loading />
             ) : (
-              <RunButton text={"Submit"} onClick={fetchData} />
+              <RunButton text={"Generate map"} onClick={fetchData} />
             )}
           </>
         ) : (
diff --git a/frontend/src/pages/TopSchoolArea.jsx b/frontend/src/pages/TopSchoolArea.jsx
index 7035761..6aa6edd 100644
--- a/frontend/src/pages/TopSchoolArea.jsx
+++ b/frontend/src/pages/TopSchoolArea.jsx
@@ -14,7 +14,6 @@ const TopSchoolArea = () => {
   const [schoolTypeIndex, setSchoolTypeIndex] = useState(0);
   const [districtIndex, setDistrictIndex] = useState(0);
   const [radius, setRadius] = useState(10);
-  const [id, setId] = useState(null);
   const [sortConfig, setSortConfig] = useState({ key: "avg_property_price", direction: "desc" });
 
   const schoolTypes = ["Secondary School", "Primary School", "Infants School"];
@@ -28,7 +27,14 @@ const TopSchoolArea = () => {
     "Nepean Blue Mountains",
   ];
 
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0";
+
+    return storedId;
+  };
   const fetchData = async () => {
+    const id = getId();
     if (!id) {
       alert("Please enter a valid ID.");
       return;
@@ -60,7 +66,6 @@ const TopSchoolArea = () => {
   };
 
   const handleSort = (key) => {
-    console.log(key);
     setSortConfig((prev) =>
       prev.key === key
         ? { key, direction: prev.direction === "asc" ? "desc" : "asc" }
@@ -90,14 +95,6 @@ const TopSchoolArea = () => {
         description="Check top schools accessibility and property prices in educational hotspots for your family."
         loading={loading}
       >
-        {/* ID Input */}
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Enter Location ID"
-          onChange={(e) => setId(e.target.value || null)}
-        />
-
         {/* School Level Dropdown */}
         <Dropdown
           className="mb-4 text-white/90"
diff --git a/frontend/src/pages/demoPropertyAfford.jsx b/frontend/src/pages/demoPropertyAfford.jsx
index 3c5e920..18e4274 100644
--- a/frontend/src/pages/demoPropertyAfford.jsx
+++ b/frontend/src/pages/demoPropertyAfford.jsx
@@ -18,7 +18,6 @@ const DemoPropertyAfford = () => {
   const [income, setIncome] = useState("32292");
   const [affordabilityData, setAffordabilityData] = useState(null);
   const [mapHtml, setMapHtml] = useState(null);
-  const [id, setId] = useState(null);
   const [minIndex, setMinIndex] = useState(0);
 
   const pollForResult = () => {
@@ -39,8 +38,15 @@ const DemoPropertyAfford = () => {
       }
     }, 10000);
   };
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
 
   const fetchData = async () => {
+    const id = getId()
     if (id == null) {
       alert("missing id");
       return;
@@ -78,18 +84,6 @@ const DemoPropertyAfford = () => {
         title="Property Affordability Index"
         description={"How affordable each suburb is based on given income"}
       >
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Id"
-          onChange={(e) => {
-            if (e.target.value !== "") {
-              setId(e.target.value);
-            } else {
-              setId(null);
-            }
-          }}
-        />
         <BasicInput
           type="text"
           name="income"
diff --git a/frontend/src/pages/demoSuburbLivability.jsx b/frontend/src/pages/demoSuburbLivability.jsx
index 6fe96e0..9b39eb5 100644
--- a/frontend/src/pages/demoSuburbLivability.jsx
+++ b/frontend/src/pages/demoSuburbLivability.jsx
@@ -20,7 +20,6 @@ const DemoSuburbLivability = () => {
   const [density, setDensity] = useState(0.1);
   const [crimeRiskWeight, setCrimeRiskWeight] = useState(0.1);
   const [weatherRiskWeight, setWeatherRiskWeight] = useState(0.1);
-  const [id, setId] = useState(null);
   const [livabilityData, setLivabilityData] = useState(null);
   const [mapHtml, setMapHtml] = useState(null);
   const [minIndex, setMinIndex] = useState(0);
@@ -64,7 +63,15 @@ const DemoSuburbLivability = () => {
   //   }, 3000);
   // };
 
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
+
   const fetchData = async () => {
+    const id = getId()
     if (id == null) {
       alert("missing id");
       return;
@@ -113,18 +120,6 @@ const DemoSuburbLivability = () => {
         title="Suburb Livability Score"
         description="Calculates livability score given weightings of proximity to CBD, property size, population density, crime risk and weather risk"
       >
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Id"
-          onChange={(e) => {
-            if (e.target.value !== "") {
-              setId(e.target.value);
-            } else {
-              setId(null);
-            }
-          }}
-        />
         <BasicInput
           type="text"
           name="proximityWeight"
diff --git a/frontend/src/pages/demoSuburbPriceMap.jsx b/frontend/src/pages/demoSuburbPriceMap.jsx
index 948936b..a4a5296 100644
--- a/frontend/src/pages/demoSuburbPriceMap.jsx
+++ b/frontend/src/pages/demoSuburbPriceMap.jsx
@@ -7,8 +7,14 @@ import Panel2 from "../components/Panel2";
 const DemoSuburbPriceMap = () => {
   const [loading, setLoading] = useState(false);
   const [ret, setRet] = useState(null);
-  const [id, setId] = useState(null);
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
   const fetchData = async () => {
+    const id = getId()
     if (id == null) {
       alert("missing id");
       return;
@@ -44,19 +50,7 @@ const DemoSuburbPriceMap = () => {
         {loading && <p>Loading...</p>}
         {!ret ? (
           <>
-            <BasicInput
-              type="text"
-              name="id"
-              placeholder="Id"
-              onChange={(e) => {
-                if (e.target.value !== "") {
-                  setId(e.target.value);
-                } else {
-                  setId(null);
-                }
-              }}
-            />
-            <RunButton onClick={fetchData} text={"Submit"}></RunButton>
+            <RunButton onClick={fetchData} text={"Generate map"}></RunButton>
           </>
         ) : (
           <div
diff --git a/frontend/src/pages/demoTopSchoolArea.jsx b/frontend/src/pages/demoTopSchoolArea.jsx
index 422b689..51e54f6 100644
--- a/frontend/src/pages/demoTopSchoolArea.jsx
+++ b/frontend/src/pages/demoTopSchoolArea.jsx
@@ -11,7 +11,6 @@ const DemoTopSchoolArea = () => {
   const [option, setOption] = useState(0);
   const [option1, setOption1] = useState(0);
   const [radius, setRadius] = useState(10);
-  const [id, setId] = useState(null);
 
   const districts = [
     "Central Coast",
@@ -25,7 +24,14 @@ const DemoTopSchoolArea = () => {
 
   const schoolTypes = ["Secondary School", "Primary School", "Infants School"];
 
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
   const fetchData = async () => {
+    const id = getId()
     if (id == null) {
       alert("missing id");
       return;
@@ -65,14 +71,6 @@ const DemoTopSchoolArea = () => {
         title="Schools Nearby"
         description="Find out how many properties are near a school and what the average property price is."
       >
-        <p>Id:</p>
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Id"
-          onChange={(e) => setId(e.target.value || null)}
-        />
-
         <Dropdown
           label="School level:"
           value={option}