diff --git a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
index 5b14a7d6c..d1f14985c 100644
--- a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
+++ b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
@@ -76,7 +76,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus}) => {
     const scrollableRef = useRef(null);
 
     const [openOasModal, setOpenOasModal] = useState(false);
-    const handleOpenModal = () => setOpenOasModal(true);
+    
     const handleCloseModal = () => setOpenOasModal(false);
 
     const [showTLSWarning, setShowTLSWarning] = useState(false);
@@ -258,8 +258,14 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus}) => {
         }
     }
 
+    const handleOpenOasModal = () => {
+      ws.current.close();
+      setOpenOasModal(true);
+    }
+
     const openServiceMapModalDebounce = debounce(() => {
-        setServiceMapModalOpen(true)
+        ws.current.close();
+        setServiceMapModalOpen(true);
     }, 500);
 
   return (
@@ -285,7 +291,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus}) => {
             variant="contained"
             className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
             style={{ marginRight: 25 }}
-            onClick={handleOpenModal}
+            onClick={handleOpenOasModal}
           >
             Show OAS
           </Button>}