diff --git a/change-beta/@azure-communication-react-b5c59c38-b83a-466c-ac6e-ca06b99ae9b7.json b/change-beta/@azure-communication-react-b5c59c38-b83a-466c-ac6e-ca06b99ae9b7.json
new file mode 100644
index 00000000000..e02d4a598ab
--- /dev/null
+++ b/change-beta/@azure-communication-react-b5c59c38-b83a-466c-ac6e-ca06b99ae9b7.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add Video Effects Pane to Call Composite",
+  "packageName": "@azure/communication-react",
+  "email": "97124699+prabhjot-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-b5c59c38-b83a-466c-ac6e-ca06b99ae9b7.json b/change/@azure-communication-react-b5c59c38-b83a-466c-ac6e-ca06b99ae9b7.json
new file mode 100644
index 00000000000..e02d4a598ab
--- /dev/null
+++ b/change/@azure-communication-react-b5c59c38-b83a-466c-ac6e-ca06b99ae9b7.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add Video Effects Pane to Call Composite",
+  "packageName": "@azure/communication-react",
+  "email": "97124699+prabhjot-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-composites/src/composites/CallComposite/components/CallArrangement.tsx b/packages/react-composites/src/composites/CallComposite/components/CallArrangement.tsx
index 4c5fb3651dd..23634be9f2d 100644
--- a/packages/react-composites/src/composites/CallComposite/components/CallArrangement.tsx
+++ b/packages/react-composites/src/composites/CallComposite/components/CallArrangement.tsx
@@ -52,6 +52,8 @@ import { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hoo
 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
 import { getPage } from '../selectors/baseSelectors';
 import { drawerContainerStyles } from '../styles/CallComposite.styles';
+/* @conditional-compile-remove(video-background-effects) */
+import { VideoEffectsPane } from '../../common/VideoEffectsPane';
 
 /**
  * @private
@@ -130,6 +132,17 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
     [callWithChatStrings]
   );
 
+  /* @conditional-compile-remove(video-background-effects) */
+  const [showVideoEffectsPane, setVideoEffectsPane] = useState(false);
+
+  /* @conditional-compile-remove(video-background-effects) */
+  const setShowVideoEffectsPane = useCallback(
+    (showVideoEffectsOptions: boolean): void => {
+      setVideoEffectsPane(showVideoEffectsOptions);
+    },
+    [setVideoEffectsPane]
+  );
+
   const [showDrawer, setShowDrawer] = useState(false);
   const onMoreButtonClicked = useCallback(() => {
     closePane();
@@ -253,6 +266,8 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
                     peopleButtonChecked={activePane === 'people'}
                     onPeopleButtonClicked={togglePeoplePane}
                     onMoreButtonClicked={onMoreButtonClicked}
+                    /* @conditional-compile-remove(video-background-effects) */
+                    onShowVideoEffectsPicker={setShowVideoEffectsPane}
                   />
                 )}
               </Stack.Item>
@@ -311,6 +326,14 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
               callPaneContent()
             }
           </Stack>
+          {
+            /* @conditional-compile-remove(video-background-effects) */
+            <VideoEffectsPane
+              showVideoEffectsOptions={showVideoEffectsPane}
+              setshowVideoEffectsOptions={setShowVideoEffectsPane}
+              adapter={adapter}
+            />
+          }
         </Stack>
       </Stack>
     </div>