diff --git a/sigap-website/app/_components/map/controls/top/additional-tooltips.tsx b/sigap-website/app/_components/map/controls/top/additional-tooltips.tsx
index abdcc9a..f720950 100644
--- a/sigap-website/app/_components/map/controls/top/additional-tooltips.tsx
+++ b/sigap-website/app/_components/map/controls/top/additional-tooltips.tsx
@@ -52,7 +52,7 @@ export default function AdditionalTooltips({
 
     return (
         <>
-            <div className="z-10 bg-background rounded-md p-1 flex items-center space-x-1">
+            <div ref={containerRef} className="z-10 bg-background rounded-md p-1 flex items-center space-x-1">
                 <TooltipProvider>
                     {additionalTooltips.map((control) => (
                         <Tooltip key={control.id}>
diff --git a/sigap-website/app/_components/map/controls/top/search-control.tsx b/sigap-website/app/_components/map/controls/top/search-control.tsx
index b4580b0..95e480b 100644
--- a/sigap-website/app/_components/map/controls/top/search-control.tsx
+++ b/sigap-website/app/_components/map/controls/top/search-control.tsx
@@ -63,16 +63,6 @@ const generateSampleData = () => {
 const EXPANDED_SAMPLE_DATA = generateSampleData();
 
 const ACTIONS = [
-    {
-        id: "crime_id",
-        label: "Search by Crime ID",
-        icon: <Search className="h-4 w-4 text-blue-500" />,
-        description: "e.g., CR-12345",
-        category: "Search",
-        prefix: "CR-",
-        regex: /^CR-\d+(-\d{4})?$/,
-        placeholder: "CR-12345-2023",
-    },
     {
         id: "incident_id",
         label: "Search by Incident ID",
@@ -300,6 +290,8 @@ export default function SearchTooltip({ onControlChange, activeControl }: Search
             bubbles: true
         });
         document.dispatchEvent(flyToEvent);
+        setShowInfoBox(false);
+        setSelectedSuggestion(null);
         toggleSearch();
     };
 
@@ -357,7 +349,7 @@ export default function SearchTooltip({ onControlChange, activeControl }: Search
                             initial={{ opacity: 0 }}
                             animate={{ opacity: 1 }}
                             exit={{ opacity: 0 }}
-                            className="fixed inset-0 bg-black/40 backdrop-blur-sm z-40"
+                            className="fixed inset-0 bg-black/40 backdrop-blur-sm z-50 flex items-center justify-center"
                             onClick={toggleSearch}
                         />
 
@@ -365,7 +357,7 @@ export default function SearchTooltip({ onControlChange, activeControl }: Search
                             initial={{ opacity: 0, scale: 0.9 }}
                             animate={{ opacity: 1, scale: 1 }}
                             exit={{ opacity: 0, scale: 0.9 }}
-                            className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 w-[600px] max-w-[90vw]"
+                            className="fixed transform top-1/4 left-1/4 z-50 w-full max-w-lg sm:max-w-xl md:max-w-3xl"
                         >
                             <div className="bg-background border border-border rounded-lg shadow-xl p-4">
                                 <div className="flex justify-between items-center mb-3">
@@ -373,7 +365,7 @@ export default function SearchTooltip({ onControlChange, activeControl }: Search
                                     <Button
                                         variant="ghost"
                                         size="icon"
-                                        className="h-7 w-7 rounded-full hover:bg-slate-200"
+                                        className="h-7 w-7 rounded-full hover:bg-slate-200 hover:text-background"
                                         onClick={toggleSearch}
                                     >
                                         <XCircle size={18} />
diff --git a/sigap-website/app/_components/map/crime-map.tsx b/sigap-website/app/_components/map/crime-map.tsx
index 2506dee..0f9a8bb 100644
--- a/sigap-website/app/_components/map/crime-map.tsx
+++ b/sigap-website/app/_components/map/crime-map.tsx
@@ -345,8 +345,8 @@ export default function CrimeMap() {
                                         {/* Components that are only visible in fullscreen mode */}
                                         {isFullscreen && (
                                             <>
-                                                <Overlay position="top" className="m-0 bg-transparent shadow-none p-0 border-none">
-                                                    <div className="flex justify-center">
+                                                {/* <Overlay position="top" className="m-0 bg-transparent shadow-none p-0 border-none"> */}
+                                                <div className="absolute flex w-full p-2">
                                                         <Tooltips
                                                             activeControl={activeControl}
                                                             onControlChange={handleControlChange}
@@ -360,7 +360,7 @@ export default function CrimeMap() {
                                                             categories={categories}
                                                         />
                                                     </div>
-                                                </Overlay>
+                                                {/* </Overlay> */}
 
                                                 {/* Pass selectedCategory, selectedYear, and selectedMonth to the sidebar */}
                                                 <CrimeSidebar
diff --git a/sigap-website/app/_components/map/legends/map-legend.tsx b/sigap-website/app/_components/map/legends/map-legend.tsx
index 07009a8..80ce8dc 100644
--- a/sigap-website/app/_components/map/legends/map-legend.tsx
+++ b/sigap-website/app/_components/map/legends/map-legend.tsx
@@ -9,7 +9,7 @@ interface MapLegendProps {
 export default function MapLegend({ position = "bottom-right" }: MapLegendProps) {
   return (
     // <Overlay position={position}>
-    <div className="flex flex-row text-xs font-semibold font-sans text-background">
+    <div className="flex flex-row text-xs font-semibold font-sans text-background z-0">
         <div className={`flex items-center gap-1.5 py-0 px-8 rounded-l-md border-y border-1 `} style={{ backgroundColor: `${CRIME_RATE_COLORS.low}` }}>
           <span>Low</span>
         </div>