diff --git a/property-inspector/src/main.tsx b/property-inspector/src/main.tsx
index 8fb1556..f0b4b85 100644
--- a/property-inspector/src/main.tsx
+++ b/property-inspector/src/main.tsx
@@ -1,15 +1,27 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import ReactDOM from 'react-dom/client'
-import StreamDeckComponent from './StreamDeck'
-import './sdpi.css'
-window.connectElgatoStreamDeckSocket = (inPort: number, inUUID: string, inRegisterEvent: string, inInfo: string, inActionInfo: string) => {
+import './css/sdpi.css';
+import ReactDOM from 'react-dom/client';
+
+// - Components
+import RouterAction from './router';
+
+// - Types
+import { ParsedProps } from './types/streamDeck';
+
+// - Hooks
+import { WebSocketProvider } from './hooks/useWebSocket';
+
+
+window.connectElgatoStreamDeckSocket = (inPort: string, inUUID: string, inRegisterEvent: string, inInfo: string, inActionInfo: string) => {
+  const parsedProps: ParsedProps = {
+    inPort: parseInt(inPort),
+    inUUID,
+    inRegisterEvent,
+    inInfo: JSON.parse(inInfo),
+    inActionInfo: JSON.parse(inActionInfo),
+  };
   ReactDOM.createRoot(document.getElementById('root')!).render(
-    <StreamDeckComponent
-      inPort={inPort}
-      inUUID={inUUID}
-      inRegisterEvent={inRegisterEvent}
-      inInfo={inInfo}
-      inActionInfo={inActionInfo}
-    />,
-  )
-}
+    <WebSocketProvider props={parsedProps}>
+      <RouterAction {...parsedProps} />
+    </WebSocketProvider>
+  );
+};