diff --git a/frontend/package.json b/frontend/package.json
index 6472d872..e4a4ba66 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -56,6 +56,7 @@
     "rfc6902": "^5.1.2",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
+    "vibe-kanban-web-companion": "^0.0.4",
     "zustand": "^4.5.4"
   },
   "devDependencies": {
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 43c6ee01..9a8a8eed 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 import './styles/index.css';
 import { ClickToComponent } from 'click-to-react-component';
+import { VibeKanbanWebCompanion } from 'vibe-kanban-web-companion';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as Sentry from '@sentry/react';
 import NiceModal from '@ebay/nice-modal-react';
@@ -91,6 +92,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     <QueryClientProvider client={queryClient}>
       <Sentry.ErrorBoundary fallback={<p>An error has occurred</p>} showDialog>
         <ClickToComponent />
+        <VibeKanbanWebCompanion />
         <App />
         {/* <ReactQueryDevtools initialIsOpen={false} /> */}
       </Sentry.ErrorBoundary>