diff --git a/custom/shared/contexts/CallProvider.js b/custom/shared/contexts/CallProvider.js
index 763e836..a084a3a 100644
--- a/custom/shared/contexts/CallProvider.js
+++ b/custom/shared/contexts/CallProvider.js
@@ -13,6 +13,7 @@ import React, {
   useState,
 } from 'react';
 import DailyIframe from '@daily-co/daily-js';
+import { DailyProvider } from '@daily-co/daily-react-hooks';
 import Bowser from 'bowser';
 import { useRouter } from 'next/router';
 import PropTypes from 'prop-types';
@@ -159,7 +160,7 @@ export const CallProvider = ({
         setEnableJoinSound
       }}
     >
-      {children}
+      <DailyProvider callObject={daily}>{children}</DailyProvider>
     </CallContext.Provider>
   );
 };
diff --git a/custom/shared/package.json b/custom/shared/package.json
index dfce824..6f946de 100644
--- a/custom/shared/package.json
+++ b/custom/shared/package.json
@@ -4,7 +4,8 @@
   "private": true,
   "main": "index.js",
   "dependencies": {
-    "@daily-co/daily-js": "0.21.0",
+    "@daily-co/daily-js": "^0.24.0",
+    "@daily-co/daily-react-hooks": "^0.1.0",
     "bowser": "^2.11.0",
     "classnames": "^2.3.1",
     "debounce": "^1.2.1",
@@ -15,6 +16,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-portal": "^4.2.1",
+    "recoil": "^0.7.0",
     "shallow-equal": "^1.2.1",
     "use-deep-compare": "^1.1.0"
   }