diff --git a/frontend/components/nodes/filter-node/filter-node.tsx b/frontend/components/nodes/filter-node/filter-node.tsx
index a02a02d..a11075a 100644
--- a/frontend/components/nodes/filter-node/filter-node.tsx
+++ b/frontend/components/nodes/filter-node/filter-node.tsx
@@ -1,6 +1,10 @@
 'use client';
 import { useGlobalContext } from '@/context/GlobalContext';
 import { ProcessingConfig } from '@/lib/processing';
+
+const dispatchProcessingConfig = (config: ProcessingConfig) => {
+    window.dispatchEvent(new CustomEvent('processing-config-update', { detail: config }));
+};
 import { Handle, Position, useReactFlow } from '@xyflow/react';
 import React from 'react';
 import ComboBox from './combo-box';
@@ -19,8 +23,7 @@ export default function FilterNode({ id }: FilterNodeProps) {
     // Get React Flow instance
     const reactFlowInstance = useReactFlow();
     
-    // Get data stream status from global context
-    const { dataStreaming, sendProcessingConfig } = useGlobalContext()
+    const { dataStreaming } = useGlobalContext();
 
     const buildConfig = (): ProcessingConfig => {
         if (!isConnected) {
@@ -136,11 +139,11 @@ export default function FilterNode({ id }: FilterNodeProps) {
 
     React.useEffect(() => {
         if (!dataStreaming) return
-        sendProcessingConfig(buildConfig())
+        dispatchProcessingConfig(buildConfig())
     }, [selectedFilter, lowCutoff, highCutoff, isConnected, dataStreaming])  
 
     React.useEffect(() => {
-        sendProcessingConfig(buildConfig());
+        dispatchProcessingConfig(buildConfig());
     }, []);
     
     return (
diff --git a/frontend/components/nodes/signal-graph-node/signal-graph-node.tsx b/frontend/components/nodes/signal-graph-node/signal-graph-node.tsx
index e00ea5e..8c85d08 100644
--- a/frontend/components/nodes/signal-graph-node/signal-graph-node.tsx
+++ b/frontend/components/nodes/signal-graph-node/signal-graph-node.tsx
@@ -1,7 +1,7 @@
 import { Card } from '@/components/ui/card';
 import { Handle, Position, useReactFlow } from '@xyflow/react';
-// import useWebsocket from '@/hooks/useWebsocket';
 import { useGlobalContext } from '@/context/GlobalContext';
+import useNodeData from '@/hooks/useNodeData';
 import { ArrowUpRight } from 'lucide-react';
 import React from 'react';
 
@@ -16,9 +16,8 @@ import {
 import SignalGraphView from './signal-graph-full';
 
 export default function SignalGraphNode({ id }: { id?: string }) {
-    // const { renderData } = useWebsocket(20, 10);
-
-    const { renderData, dataStreaming } = useGlobalContext();
+    const { dataStreaming } = useGlobalContext();
+    const { renderData } = useNodeData(20, 10);
 
     const processedData = renderData;
     const reactFlowInstance = useReactFlow();
diff --git a/frontend/components/nodes/window-node/window-combo-box.tsx b/frontend/components/nodes/window-node/window-combo-box.tsx
index 791995f..a426a68 100644
--- a/frontend/components/nodes/window-node/window-combo-box.tsx
+++ b/frontend/components/nodes/window-node/window-combo-box.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ChevronUp } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
-export type WindowOption = 'default' | 'preset' | 'custom';
+export type WindowOption = 'default' | 'custom';
 
 interface ComboBoxProps {
     windowSize: number;
@@ -17,8 +17,6 @@ interface ComboBoxProps {
 
 const presetWindows: Array<{ value: WindowOption; label: string; size?: number }> = [
     { value: 'default', label: 'Default (64)', size: 64 },
-    { value: 'preset', label: 'Preset A (4)', size: 4 },
-    { value: 'preset', label: 'Preset B (6)', size: 6 },
     { value: 'custom', label: 'Custom' },
 ];
 
@@ -33,48 +31,55 @@ export default function ComboBox({
     isDataStreamOn = false,
 }: ComboBoxProps) {
     const [isExpanded, setIsExpanded] = React.useState(false);
+    const [step, setStep] = React.useState<'window' | 'overlap'>('window');
     const [customWindowInput, setCustomWindowInput] = React.useState<string>('');
-    const[customOverlapInput, setCustomOverlapInput] = React.useState<string>(String(overlapSize));
+    const [customOverlapInput, setCustomOverlapInput] = React.useState<string>('');
     const [windowError, setWindowError] = React.useState<string>('');
     const [overlapError, setOverlapError] = React.useState<string>('');
-
-    React.useEffect(() => {
-        setCustomOverlapInput(String(overlapSize));
-    }, [overlapSize]);
+    const [overlapOption, setOverlapOption] = React.useState<'default' | 'custom'>('default');
 
     const toggleExpanded = () => {
+        if (!isExpanded) {
+            setStep('window');
+            setWindowError('');
+            setOverlapError('');
+        }
         setIsExpanded(!isExpanded);
     };
 
+    const confirmWindow = () => {
+        setStep('overlap');
+    };
+
+    const confirmOverlap = () => {
+        setIsExpanded(false);
+        setStep('window');
+    };
+
     const handlePresetSelect = (optionValue: WindowOption, size?: number) => {
         setSelectedOption(optionValue);
-        if(typeof size == 'number'){
+        setWindowError('');
+        if (typeof size === 'number') {
             setWindowSize(size);
-            if(overlapSize >= size){
-                setOverlapSize(Math.max(0,size-1));
+            if (overlapSize >= size) {
+                setOverlapSize(0);
+                setOverlapOption('default');
             }
         }
-        if(optionValue !== 'custom'){
-            setWindowError('');
-            setOverlapError('');
-            setIsExpanded(false);
-            setTimeout(() => {
-                setIsExpanded(false);
-            }, 100);
-            return;
+        if (optionValue === 'custom') {
+            setCustomWindowInput('');
+        } else {
+            confirmWindow();
         }
-        setCustomWindowInput('');
-        setWindowError('');
-
     };
 
     const submitCustomWindow = () => {
         const parsed = Number(customWindowInput);
-        if(!Number.isInteger(parsed) || parsed <= 0){
+        if (!Number.isInteger(parsed) || parsed <= 0) {
             setWindowError('Window size must be a positive integer');
             return;
-        }   
-        if(overlapSize >= parsed){
+        }
+        if (overlapSize >= parsed) {
             setWindowError('Window size must be greater than overlap size');
             return;
         }
@@ -82,43 +87,32 @@ export default function ComboBox({
         setWindowSize(parsed);
         setWindowError('');
         setOverlapError('');
-        setIsExpanded(false);
-
-        setTimeout(() => {
-            setIsExpanded(false);
-        }, 100);
+        confirmWindow();
     };
 
     const submitCustomOverlap = () => {
         const parsed = Number(customOverlapInput);
-        if(!Number.isInteger(parsed) || parsed < 0){
+        if (!Number.isInteger(parsed) || parsed < 0) {
             setOverlapError('Overlap size must be a non-negative integer');
             return;
-        }   
-        if(parsed >= windowSize){
+        }
+        if (parsed >= windowSize) {
             setOverlapError('Overlap size must be less than window size');
             return;
         }
         setOverlapSize(parsed);
         setOverlapError('');
         setWindowError('');
-
-        setTimeout(() => {
-            setIsExpanded(false);
-        }, 100);
+        confirmOverlap();
     };
 
     return (
         <div
             className={cn(
                 'bg-white rounded-[30px] border-2 overflow-hidden',
-                // Node border stays gray - no change with connection
                 'border-[#D3D3D3]'
             )}
-            style={{
-                width: 'fit-content',
-                minWidth: '396px', // changed width to 396px, same width as source-node
-            }}
+            style={{ width: '396px' }}
         >
             {/* Main button/header */}
             <button
@@ -126,73 +120,51 @@ export default function ComboBox({
                 className="w-full h-[70px] px-4 flex items-center justify-between transition-colors"
             >
                 <div className="flex items-center">
-                    {/* Left connection circle - changes based on connection and data stream */}
                     <div
                         className={cn(
                             'absolute left-6 w-6 h-6 rounded-full border-[3px] flex items-center justify-center bg-white',
-                            isConnected
-                                ? 'border-black' // Connected to source AND data stream on: black border (activated)
-                                : isConnected
-                                    ? 'border-gray-300' // Connected to source: gray border (non-activated)
-                                    : 'border-gray-300' // Disconnected: gray border
+                            isConnected ? 'border-black' : 'border-gray-300'
                         )}
-                    >
-                        {/* No filled circle - always stay empty */}
-                    </div>
+                    />
 
-                    {/* Status dot */}
                     <div
                         className={cn(
                             'absolute left-16 w-3 h-3 rounded-full',
-                            isConnected && isDataStreamOn
-                                ? 'bg-[#509693]'
-                                : 'bg-[#D3D3D3]'
+                            isConnected && isDataStreamOn ? 'bg-[#509693]' : 'bg-[#D3D3D3]'
                         )}
                     />
 
-                    {/* Filter text - larger, bold font with ref for measurement */}
-                    <span
-                        className="absolute left-24 font-geist text-[25px] font-[550] leading-tight text-black tracking-wider"
-                    >
+                    <span className="absolute left-24 font-geist text-[25px] font-[550] leading-tight text-black tracking-wider">
                         Window Node
                     </span>
                 </div>
 
                 <div className="flex items-center space-x-3">
-                    {/* Toggle arrow */}
                     <div className="absolute right-[58px] transition-transform duration-300 ease-in-out">
                         <ChevronUp
-                            className={`h-5 w-5 text-gray-600 transform transition-all duration-300 ease-in-out ${isExpanded ? 'rotate-0' : 'rotate-180'
-                                }`}
+                            className={`h-5 w-5 text-gray-600 transform transition-all duration-300 ease-in-out ${isExpanded ? 'rotate-0' : 'rotate-180'}`}
                         />
                     </div>
 
-                    {/* Right connection circle - changes based on connection and data stream */}
                     <div
                         className={cn(
                             'absolute right-6 w-6 h-6 rounded-full border-[3px] flex items-center justify-center bg-white',
-                            isConnected
-                                ? 'border-black' // Connected to source AND data stream on: black border (activated)
-                                : isConnected
-                                    ? 'border-gray-300' // Connected to source: gray border (non-activated)
-                                    : 'border-gray-300' // Disconnected: gray border
+                            isConnected ? 'border-black' : 'border-gray-300'
                         )}
-                    >
-                        {/* No solid circle inside */}
-                    </div>
+                    />
                 </div>
             </button>
 
-            {/* Base Header */}
+            {/* Collapsed summary */}
             {!isExpanded && (
                 <div className="space-y-3 pb-4" style={{ paddingLeft: '60px', paddingRight: '60px' }}>
-                    <div className="text-[22px] leading-tight text-black">
+                    <div className="text-[20px] leading-tight text-black">
                         Size:{' '}
                         <span className="inline-flex w-12 h-12 rounded-full border border-[#509693] items-center justify-center">
                             {windowSize}
                         </span>
                     </div>
-                    <div className="text-[22px] leading-tight text-black">
+                    <div className="text-[20px] leading-tight text-black">
                         Overlap Size:{' '}
                         <span className="inline-flex w-12 h-12 rounded-full border border-[#509693] items-center justify-center">
                             {overlapSize}
@@ -201,77 +173,105 @@ export default function ComboBox({
                 </div>
             )}
 
-            {/* Expandable options section */}
+            {/* Expandable section */}
             <div
-                className="overflow-hidden"
+                className="overflow-hidden nodrag"
                 style={{
-                    maxHeight: isExpanded ? '120px' : '0px',
+                    maxHeight: isExpanded ? '320px' : '0px',
                     opacity: isExpanded ? 1 : 0,
-                    transition:
-                        'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out',
+                    transition: 'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out',
                 }}
             >
-        <div className="space-y-2 pb-3 overflow-y-auto max-h-[120px]" style={{ paddingLeft: '60px', paddingRight: '60px' }}>
-                    <div className="text-sm text-gray-700">Input size</div>
-                    {presetWindows.map((preset) => (
-                        <button
-                            key={preset.label}
-                            onClick={() => handlePresetSelect(preset.value, preset.size)}
-                            className={cn(
-                                'w-full text-left px-3 py-1 rounded-md text-sm',
-                                selectedOption === preset.value ? 'bg-gray-100 text-gray-900' : 'text-gray-700 hover:bg-gray-50'
+                <div className="space-y-2 pb-3 overflow-y-auto max-h-[320px]" style={{ paddingLeft: '60px', paddingRight: '60px' }}>
+
+                    {/* Step 1: Input size */}
+                    {step === 'window' && (
+                        <>
+                            <div className="text-xs text-gray-700">Input size</div>
+                            {presetWindows.map((preset) => (
+                                <button
+                                    key={preset.label}
+                                    onClick={() => handlePresetSelect(preset.value, preset.size)}
+                                    className={cn(
+                                        'nodrag w-full text-left px-3 py-0 rounded-lg text-xs font-normal',
+                                        selectedOption === preset.value ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-50'
+                                    )}
+                                >
+                                    {preset.label}
+                                </button>
+                            ))}
+                            {selectedOption === 'custom' && (
+                                <div className="flex items-center gap-2 pt-1">
+                                    <input
+                                        value={customWindowInput}
+                                        onChange={(e) => {
+                                            setCustomWindowInput(e.target.value.replace(/[^\d]/g, ''));
+                                            setWindowError('');
+                                        }}
+                                        placeholder="Custom integer"
+                                        className="nodrag h-8 w-full rounded-md border border-gray-300 px-2 text-sm"
+                                    />
+                                    <button
+                                        onClick={submitCustomWindow}
+                                        className="nodrag h-8 px-3 rounded-md border border-gray-300 text-sm hover:bg-gray-50"
+                                    >
+                                        OK
+                                    </button>
+                                </div>
                             )}
-                        >
-                            {preset.label}
-                        </button>
-                    ))}
+                            {selectedOption === 'custom' && windowError && (
+                                <div className="text-xs text-red-600 -mt-1" role="alert">{windowError}</div>
+                            )}
+                        </>
+                    )}
 
-                    {selectedOption === 'custom' && (
-                        <div className="flex items-center gap-2 pt-1">
-                            <input
-                                value={customWindowInput}
-                                onChange={(e) => {
-                                    setCustomWindowInput(e.target.value.replace(/[^\d]/g, '')); // Enfore integer-only input by stripping non-digits.
-                                    setWindowError('');
-                                }}
-                                placeholder="Custom integer"
-                                className="h-8 w-full rounded-md border border-gray-300 px-2 text-sm"
-                            />
+                    {/* Step 2: Overlap size */}
+                    {step === 'overlap' && (
+                        <>
+                            <div className="text-xs text-gray-700">Overlap size</div>
                             <button
-                                onClick={submitCustomWindow}
-                                className="h-8 px-3 rounded-md border border-gray-300 text-sm hover:bg-gray-50"
+                                onClick={() => { setOverlapOption('default'); setOverlapSize(0); setOverlapError(''); confirmOverlap(); }}
+                                className={cn(
+                                    'nodrag w-full text-left px-3 py-0 rounded-lg text-xs font-normal',
+                                    overlapOption === 'default' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-50'
+                                )}
                             >
-                                OK
+                                Default (0)
                             </button>
-                        </div>
-                    )}
-                    {selectedOption === 'custom' && windowError && (
-                        <div className="text-xs text-red-600 -mt-1" role="alert">{windowError}</div>
-                    )}
-
-                    <div className="pt-1">
-                        <div className="text-sm text-gray-700 mb-1">Overlap size</div>
-                        <div className="flex items-center gap-2">
-                            <input
-                                value={customOverlapInput}
-                                onChange={(e) => {
-                                    setCustomOverlapInput(e.target.value.replace(/[^\d]/g, ''));
-                                    setOverlapError('');
-                                }}
-                                className="h-8 w-full rounded-md border border-gray-300 px-2 text-sm"
-                            />
                             <button
-                                onClick={submitCustomOverlap}
-                                className="h-8 px-3 rounded-md border border-gray-300 text-sm hover:bg-gray-50"
+                                onClick={() => { setOverlapOption('custom'); setCustomOverlapInput(''); setOverlapError(''); }}
+                                className={cn(
+                                    'nodrag w-full text-left px-3 py-0 rounded-lg text-xs font-normal',
+                                    overlapOption === 'custom' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-50'
+                                )}
                             >
-                                OK
+                                Custom
                             </button>
-                        </div>
-                    </div>
-                    {overlapError && <div className="text-xs text-red-600 -mt-1" role="alert">{overlapError}</div>}
+                            {overlapOption === 'custom' && (
+                                <div className="flex items-center gap-2 pt-1">
+                                    <input
+                                        value={customOverlapInput}
+                                        onChange={(e) => {
+                                            setCustomOverlapInput(e.target.value.replace(/[^\d]/g, ''));
+                                            setOverlapError('');
+                                        }}
+                                        placeholder="Custom integer"
+                                        className="nodrag h-8 w-full rounded-md border border-gray-300 px-2 text-sm"
+                                    />
+                                    <button
+                                        onClick={submitCustomOverlap}
+                                        className="nodrag h-8 px-3 rounded-md border border-gray-300 text-sm hover:bg-gray-50"
+                                    >
+                                        OK
+                                    </button>
+                                </div>
+                            )}
+                            {overlapError && <div className="text-xs text-red-600 -mt-1" role="alert">{overlapError}</div>}
+                        </>
+                    )}
 
                 </div>
             </div>
-        </div>        
+        </div>
     );
 }
diff --git a/frontend/components/nodes/window-node/window-node.tsx b/frontend/components/nodes/window-node/window-node.tsx
index 1d3151e..a84cc27 100644
--- a/frontend/components/nodes/window-node/window-node.tsx
+++ b/frontend/components/nodes/window-node/window-node.tsx
@@ -3,7 +3,7 @@ import { useGlobalContext } from '@/context/GlobalContext';
 import { Handle, Position, useReactFlow } from '@xyflow/react';
 import React from 'react';
 import WindowComboBox, { type WindowOption } from './window-combo-box';
-// import useWebsocket from '@/hooks/useWebsocket';
+import { WindowingConfig } from '@/lib/processing';
 
 interface WindowNodeProps {
     id?: string;
@@ -23,12 +23,13 @@ export default function WindowNode({ id }: WindowNodeProps) {
     // Get React Flow instance
     const reactFlowInstance = useReactFlow();
     
-    // Get data stream status from global context
-    const { dataStreaming, sendWindowingConfig } = useGlobalContext();
+    const { dataStreaming } = useGlobalContext();
 
-    // const { sendWindowingConfig } = useWebsocket(0, 0);
+    const dispatchWindowingConfig = (config: WindowingConfig) => {
+        window.dispatchEvent(new CustomEvent('windowing-config-update', { detail: config }));
+    };
 
-    const buildConfig = () => ({
+    const buildConfig = (): WindowingConfig => ({
         chunk_size: windowSize,
         overlap_size: overlapSize,
     });
@@ -81,7 +82,7 @@ export default function WindowNode({ id }: WindowNodeProps) {
         overlapSize < windowSize;
     
     React.useEffect(() => {
-        sendWindowingConfig(buildConfig());
+        dispatchWindowingConfig(buildConfig());
     }, []);
 
     // Check connection status on mount and when edges might change
@@ -105,9 +106,8 @@ export default function WindowNode({ id }: WindowNodeProps) {
     }, [checkConnectionStatus]);
 
     React.useEffect(() => {
-        if (!dataStreaming) return;
         if(!isValidConfig) return;
-        sendWindowingConfig(buildConfig());
+        dispatchWindowingConfig(buildConfig());
     }, [windowSize, overlapSize, selectedOption, isConnected, dataStreaming]);
 
     return (
diff --git a/frontend/context/GlobalContext.tsx b/frontend/context/GlobalContext.tsx
index 4af5cc5..6533812 100644
--- a/frontend/context/GlobalContext.tsx
+++ b/frontend/context/GlobalContext.tsx
@@ -5,34 +5,23 @@ import React, {
     useState
 } from 'react';
 
-import useWebsocket from '@/hooks/useWebsocket';
-import { ProcessingConfig, WindowingConfig } from '@/lib/processing';
-
 type GlobalContextType = {
     dataStreaming: boolean;
     setDataStreaming: React.Dispatch<React.SetStateAction<boolean>>;
     activeSessionId: number | null;
     setActiveSessionId: React.Dispatch<React.SetStateAction<number | null>>;
-    renderData: any[];
-    sendProcessingConfig: (config: ProcessingConfig) => void;
-    sendWindowingConfig: (config: WindowingConfig) => void;
 };
 
 const GlobalContext = createContext<GlobalContextType | undefined>(undefined);
 
 export const GlobalProvider = ({ children }: { children: ReactNode }) => {
     const [dataStreaming, setDataStreaming] = useState(false);
-
-    const { renderData, sendProcessingConfig, sendWindowingConfig } = useWebsocket(20, 10, dataStreaming);
     const [activeSessionId, setActiveSessionId] = useState<number | null>(null);
 
     return (
         <GlobalContext.Provider value={{
             dataStreaming,
             setDataStreaming,
-            renderData,
-            sendProcessingConfig,
-            sendWindowingConfig,
             activeSessionId,
             setActiveSessionId,
         }}>
diff --git a/frontend/context/WebSocketContext.tsx b/frontend/context/WebSocketContext.tsx
index 7e09eb4..1045179 100644
--- a/frontend/context/WebSocketContext.tsx
+++ b/frontend/context/WebSocketContext.tsx
@@ -2,7 +2,7 @@
 
 import React, { createContext, useContext, useEffect, useRef, useCallback, ReactNode } from 'react';
 import { useGlobalContext } from './GlobalContext';
-import { ProcessingConfig } from '@/lib/processing';
+import { ProcessingConfig, WindowingConfig } from '@/lib/processing';
 
 export type DataPoint = {
     time: string;
@@ -17,6 +17,7 @@ type Subscriber = (points: DataPoint[]) => void;
 type WebSocketContextType = {
     subscribe: (fn: Subscriber) => () => void;
     sendProcessingConfig: (config: ProcessingConfig) => void;
+    sendWindowingConfig: (config: WindowingConfig) => void;
 };
 
 const WebSocketContext = createContext<WebSocketContextType | undefined>(undefined);
@@ -52,6 +53,7 @@ export function WebSocketProvider({ children }: { children: ReactNode }) {
     const { dataStreaming } = useGlobalContext();
     const wsRef = useRef<WebSocket | null>(null);
     const processingConfigRef = useRef<ProcessingConfig | null>(null);
+    const windowingConfigRef = useRef<WindowingConfig | null>(null);
     const subscribersRef = useRef<Set<Subscriber>>(new Set());
     const closingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const isClosingGracefullyRef = useRef(false);
@@ -69,14 +71,29 @@ export function WebSocketProvider({ children }: { children: ReactNode }) {
         }
     }, []);
 
-    // Forward processing-config-update events from filter node to backend
+    const sendWindowingConfig = useCallback((config: WindowingConfig) => {
+        windowingConfigRef.current = config;
+        if (wsRef.current?.readyState === WebSocket.OPEN) {
+            wsRef.current.send(JSON.stringify(config));
+            console.log('Sent windowing config:', config);
+        }
+    }, []);
+
+    // Forward config events from nodes to backend
     useEffect(() => {
-        const handler = (event: Event) => {
+        const processingHandler = (event: Event) => {
             sendProcessingConfig((event as CustomEvent<ProcessingConfig>).detail);
         };
-        window.addEventListener('processing-config-update', handler);
-        return () => window.removeEventListener('processing-config-update', handler);
-    }, [sendProcessingConfig]);
+        const windowingHandler = (event: Event) => {
+            sendWindowingConfig((event as CustomEvent<WindowingConfig>).detail);
+        };
+        window.addEventListener('processing-config-update', processingHandler);
+        window.addEventListener('windowing-config-update', windowingHandler);
+        return () => {
+            window.removeEventListener('processing-config-update', processingHandler);
+            window.removeEventListener('windowing-config-update', windowingHandler);
+        };
+    }, [sendProcessingConfig, sendWindowingConfig]);
 
     // Manage WebSocket lifecycle
     useEffect(() => {
@@ -102,6 +119,9 @@ export function WebSocketProvider({ children }: { children: ReactNode }) {
         ws.onopen = () => {
             console.log('WebSocket connection opened.');
             ws.send(JSON.stringify(processingConfigRef.current ?? DEFAULT_PROCESSING_CONFIG));
+            if (windowingConfigRef.current) {
+                ws.send(JSON.stringify(windowingConfigRef.current));
+            }
         };
 
         ws.onmessage = (event) => {
@@ -145,7 +165,7 @@ export function WebSocketProvider({ children }: { children: ReactNode }) {
     }, [dataStreaming]);
 
     return (
-        <WebSocketContext.Provider value={{ subscribe, sendProcessingConfig }}>
+        <WebSocketContext.Provider value={{ subscribe, sendProcessingConfig, sendWindowingConfig }}>
             {children}
         </WebSocketContext.Provider>
     );
diff --git a/frontend/hooks/useWebsocket.tsx b/frontend/hooks/useWebsocket.tsx
deleted file mode 100644
index 5b8531d..0000000
--- a/frontend/hooks/useWebsocket.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-// import { useGlobalContext } from '@/context/GlobalContext';
-import { ProcessingConfig, WindowingConfig } from '@/lib/processing';
-
-export default function useWebsocket(
-    chartSize: number,
-    batchesPerSecond: number,
-    dataStreaming: boolean
-) {
-//     type WsConfigMessage =
-//   | { type: 'processing'; payload: ProcessingConfig }
-//   | { type: 'windowing'; payload: WindowingConfig };
-
-    // const { dataStreaming } = useGlobalContext();
-    const [renderData, setRenderData] = useState<any[] | []>([]);
-    const bufferRef = useRef<any[]>([]);
-    const wsRef = useRef<WebSocket | null>(null);
-    const closingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-    const [isClosingGracefully, setIsClosingGracefully] = useState(false);
-    const processingConfigRef = useRef<ProcessingConfig | null>(null);
-    const windowingConfigRef = useRef<WindowingConfig | null>(null);
-
-    const intervalTime = 1000 / batchesPerSecond;
-  
-    const sendProcessingConfig = (config: ProcessingConfig) => {
-        processingConfigRef.current = config
-      
-        if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-          wsRef.current.send(JSON.stringify(config))
-          console.log('Sent processing config:', config)
-        }
-    }     
-    
-    const sendWindowingConfig = (config: WindowingConfig) => {
-        windowingConfigRef.current = config
-      
-        if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-          wsRef.current.send(JSON.stringify(config))
-          console.log('Sent windowing config:', config)
-        }
-    }     
-
-    useEffect(() => {
-        console.log('data streaming:', dataStreaming);
-
-        if (!dataStreaming && wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-            if (!isClosingGracefully) {
-                console.log("Initiating graceful close...");
-                setIsClosingGracefully(true);
-                wsRef.current.send('clientClosing');
-
-                closingTimeoutRef.current = setTimeout(() => {
-                    console.warn("Timeout: No 'confirmed closing' received. Forcing WebSocket close.");
-                    if (wsRef.current) {
-                        wsRef.current.close();
-                    }
-                    setIsClosingGracefully(false);
-                }, 5000);
-            }
-            return;
-        }
-
-        if (!dataStreaming && (!wsRef.current || wsRef.current.readyState === WebSocket.CLOSED)) {
-            return;
-        }
-
-        if (dataStreaming && (!wsRef.current || wsRef.current.readyState === WebSocket.CLOSED)) {
-            console.log("Opening new WebSocket connection...");
-            const ws = new WebSocket('ws://localhost:8080');
-            wsRef.current = ws;
-
-            ws.onopen = () => {
-                console.log('WebSocket connection opened.');
-
-                if (processingConfigRef.current) {
-                    ws.send(JSON.stringify(processingConfigRef.current))
-                }
-                if (windowingConfigRef.current) {
-                    ws.send(JSON.stringify(windowingConfigRef.current))
-                }
-            };
-
-            ws.onmessage = (event) => {
-                const message = event.data;
-                if (message === 'confirmed closing') {
-                    console.log("Received 'confirmed closing' from server. Proceeding to close.");
-                    if (closingTimeoutRef.current) {
-                        clearTimeout(closingTimeoutRef.current);
-                    }
-                    if (wsRef.current) {
-                        wsRef.current.close();
-                    }
-                    setIsClosingGracefully(false);
-                } else {
-                    try {
-                        const parsedData = JSON.parse(message);
-                        bufferRef.current.push(parsedData);
-                    } catch (e) {
-                        console.error("Failed to parse non-confirmation message as JSON:", e, message);
-                    }
-                }
-            };
-
-            ws.onclose = (event) => {
-                console.log('WebSocket connection closed:', event.code, event.reason);
-                wsRef.current = null;
-                setIsClosingGracefully(false);
-            };
-
-            ws.onerror = (error) => {
-                console.error('WebSocket error:', error);
-                if (closingTimeoutRef.current) {
-                    clearTimeout(closingTimeoutRef.current);
-                }
-                setIsClosingGracefully(false);
-            };
-        }
-
-        const updateRenderData = () => {
-            if (bufferRef.current.length > 0) {
-                const nextBatch = bufferRef.current.splice(
-                    0,
-                    Math.min(bufferRef.current.length, chartSize)
-                );
-                setRenderData((prevData) =>
-                    [...(Array.isArray(prevData) ? prevData : []), ...nextBatch].slice(-chartSize)
-                );
-            }
-        };
-
-        let intervalId: NodeJS.Timeout | null = null;
-        if (dataStreaming) {
-            intervalId = setInterval(updateRenderData, intervalTime);
-        }
-
-        return () => {
-            console.log("Cleanup function running.");
-            if (intervalId) {
-                clearInterval(intervalId);
-            }
-
-            if (closingTimeoutRef.current) {
-                clearTimeout(closingTimeoutRef.current);
-            }
-
-            if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN && !isClosingGracefully) {
-                console.log("Component unmounting or dependencies changed: Initiating graceful close during cleanup.");
-                wsRef.current.send('clientClosing');
-                closingTimeoutRef.current = setTimeout(() => {
-                    console.warn("Timeout: No 'confirmed closing' received during cleanup. Forcing WebSocket close.");
-                    if (wsRef.current) {
-                        wsRef.current.close();
-                    }
-                }, 5000);
-            } else if (wsRef.current && wsRef.current.readyState !== WebSocket.CLOSED) {
-                console.log("Forcing immediate WebSocket close during cleanup.");
-                wsRef.current.close();
-            }
-            wsRef.current = null;
-            setIsClosingGracefully(false);
-        };
-    }, [chartSize, batchesPerSecond, dataStreaming, isClosingGracefully]);
-
-    return { renderData, sendProcessingConfig, sendWindowingConfig };
-}
\ No newline at end of file