diff --git a/change/@internal-react-components-d6a8dba5-a8a4-4f1e-816f-b94c7ef635a5.json b/change/@internal-react-components-d6a8dba5-a8a4-4f1e-816f-b94c7ef635a5.json
new file mode 100644
index 00000000000..d905f56e30c
--- /dev/null
+++ b/change/@internal-react-components-d6a8dba5-a8a4-4f1e-816f-b94c7ef635a5.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "VideoGallery has unique identifier for local video tile to dock.",
+  "packageName": "@internal/react-components",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@internal-storybook-369108de-2ed0-45dc-9a76-35f091c05f27.json b/change/@internal-storybook-369108de-2ed0-45dc-9a76-35f091c05f27.json
new file mode 100644
index 00000000000..84a3c7a84c6
--- /dev/null
+++ b/change/@internal-storybook-369108de-2ed0-45dc-9a76-35f091c05f27.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "updated VideoGallery snapshot",
+  "packageName": "@internal/storybook",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/communication-react/package.json b/packages/communication-react/package.json
index 643a1d9160d..89eb69724d3 100644
--- a/packages/communication-react/package.json
+++ b/packages/communication-react/package.json
@@ -122,8 +122,7 @@
     "ts-jest": "^26.4.4",
     "ts-node": "^9.1.1",
     "ttypescript": "~1.5.12",
-    "typescript": "4.3.5",
-    "uuid": "^8.1.0"
+    "typescript": "4.3.5"
   },
   "beachball": {
     "shouldPublish": false
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index deecb5d9263..8f12210e011 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -34,7 +34,8 @@
     "@internal/acs-ui-common": "1.0.0-beta.8",
     "react-aria-live": "^2.0.5",
     "react-linkify": "^1.0.0-alpha",
-    "html-to-react": "~1.4.5"
+    "html-to-react": "~1.4.5",
+    "uuid": "^8.1.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <18.0.0",
@@ -101,7 +102,6 @@
     "ts-node": "^9.1.1",
     "type-fest": "~1.2.1",
     "typescript": "4.3.5",
-    "uuid": "^8.1.0",
     "webpack": "5.38.1"
   }
 }
diff --git a/packages/react-components/src/components/VideoGallery.tsx b/packages/react-components/src/components/VideoGallery.tsx
index 504e1b037f8..e1d95118c7b 100644
--- a/packages/react-components/src/components/VideoGallery.tsx
+++ b/packages/react-components/src/components/VideoGallery.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 
 import { concatStyleSets, ContextualMenu, IDragOptions, IStyle, mergeStyles, Modal, Stack } from '@fluentui/react';
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef, useEffect } from 'react';
 import { GridLayoutStyles } from '.';
 import { smartDominantSpeakerParticipants } from '../gallery';
 import { useIdentifiers } from '../identifiers/IdentifierProvider';
@@ -35,8 +35,7 @@ import { isNarrowWidth, useContainerWidth } from './utils/responsive';
 import { LocalScreenShare } from './VideoGallery/LocalScreenShare';
 import { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';
 import { VideoTile } from './VideoTile';
-
-const FLOATING_TILE_HOST_ID = 'UILibraryFloatingTileHost';
+import { v4 as uuidv4 } from 'uuid';
 
 // Currently the Calling JS SDK supports up to 4 remote video streams
 const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
@@ -303,9 +302,14 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
     />
   );
 
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.id = `video-gallery-${uuidv4()}`;
+    }
+  }, [containerRef]);
+
   return (
     <div
-      id={FLOATING_TILE_HOST_ID}
       data-ui-id={ids.videoGallery}
       ref={containerRef}
       className={mergeStyles(videoGalleryOuterDivStyle, styles?.root)}
@@ -316,7 +320,7 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
           isModeless={true}
           dragOptions={DRAG_OPTIONS}
           styles={floatingLocalVideoModalStyle(theme, isNarrow)}
-          layerProps={{ hostId: FLOATING_TILE_HOST_ID }}
+          layerProps={{ hostId: containerRef.current?.id }}
         >
           {localParticipant && localVideoTile}
         </Modal>
diff --git a/packages/storybook/stories/VideoGallery/__snapshots__/VideoGallery.stories.storyshot b/packages/storybook/stories/VideoGallery/__snapshots__/VideoGallery.stories.storyshot
index e8f537c708c..add7e3e555d 100644
--- a/packages/storybook/stories/VideoGallery/__snapshots__/VideoGallery.stories.storyshot
+++ b/packages/storybook/stories/VideoGallery/__snapshots__/VideoGallery.stories.storyshot
@@ -23,11 +23,208 @@ exports[`storybook snapshot tests Storyshots UI Components/Video Gallery Video G
       <div
         className="css-84"
         data-ui-id="video-gallery"
-        id="UILibraryFloatingTileHost"
       >
         <span
           className="ms-layer"
-        />
+        >
+          <div
+            className="ms-Fabric ms-Layer-content content-48"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onClick={[Function]}
+            onContextMenu={[Function]}
+            onDoubleClick={[Function]}
+            onDrag={[Function]}
+            onDragEnd={[Function]}
+            onDragEnter={[Function]}
+            onDragExit={[Function]}
+            onDragLeave={[Function]}
+            onDragOver={[Function]}
+            onDragStart={[Function]}
+            onDrop={[Function]}
+            onFocus={[Function]}
+            onInput={[Function]}
+            onKeyDown={[Function]}
+            onKeyPress={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onMouseUp={[Function]}
+            onSubmit={[Function]}
+            onTouchCancel={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+          >
+            <div
+              aria-modal={false}
+              onKeyDown={[Function]}
+              role="dialog"
+              style={
+                Object {
+                  "outline": "none",
+                  "overflowY": undefined,
+                }
+              }
+            >
+              <div
+                className="ms-Modal is-open root-1"
+              >
+                <div
+                  className="ms-Dialog-main main-2"
+                  id="ModalFocusTrapZone1"
+                  onBlurCapture={[Function]}
+                  onFocusCapture={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseUp={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
+                  style={
+                    Object {
+                      "transform": "translate(0px, 0px)",
+                    }
+                  }
+                >
+                  <div
+                    aria-hidden={true}
+                    data-is-visible={true}
+                    style={
+                      Object {
+                        "pointerEvents": "none",
+                        "position": "fixed",
+                      }
+                    }
+                    tabIndex={0}
+                  />
+                  <div
+                    className="ms-Modal-scrollableContent scrollableContent-3"
+                    data-is-scrollable={true}
+                  >
+                    <div
+                      className="ms-Stack css-52"
+                      data-ui-id="video-tile"
+                    >
+                      <div
+                        className="css-15"
+                      />
+                      <div
+                        className="ms-Stack css-19"
+                      >
+                        <div
+                          className="ms-Stack css-21"
+                        >
+                          <div
+                            aria-label=""
+                            className="ms-Persona ms-Persona--size48 root-22"
+                            style={
+                              Object {
+                                "height": 100,
+                                "minWidth": 100,
+                              }
+                            }
+                          >
+                            <div
+                              className="ms-Persona-coin ms-Persona--size48 coin-29"
+                              role="presentation"
+                            >
+                              <div
+                                className="ms-Persona-imageArea imageArea-31"
+                                role="presentation"
+                                style={
+                                  Object {
+                                    "height": 100,
+                                    "width": 100,
+                                  }
+                                }
+                              >
+                                <div
+                                  aria-hidden="true"
+                                  className="ms-Persona-initials initials-34"
+                                  style={
+                                    Object {
+                                      "height": 100,
+                                      "width": 100,
+                                    }
+                                  }
+                                >
+                                  <span>
+                                    Y
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="ms-Stack css-81 css-37"
+                      >
+                        <div
+                          className="ms-Stack css-82 css-38"
+                        >
+                          <span
+                            className="css-39"
+                            title="You"
+                          >
+                            You
+                          </span>
+                          <div
+                            className="ms-Stack css-53"
+                          >
+                            <i
+                              aria-hidden={true}
+                              className="root-37"
+                              data-icon-name="VideoTileMicOff"
+                            >
+                              <span
+                                aria-hidden={true}
+                                className="root-span"
+                              >
+                                <svg
+                                  className="svg"
+                                  fill="currentColor"
+                                  height={16}
+                                  viewBox="0 0 16 16"
+                                  width={16}
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M10.8 11.52l3.35 3.33a.5.5 0 00.7-.7l-13-13a.5.5 0 10-.7.7L5.5 6.21V8a2.5 2.5 0 003.88 2.09l.72.71A3.5 3.5 0 014.5 8a.5.5 0 10-1 0 4.5 4.5 0 004 4.47v1.03a.5.5 0 101 0v-1.03c.87-.1 1.66-.44 2.3-.95z"
+                                  />
+                                  <path
+                                    d="M12.06 9.94l-.76-.76c.13-.37.2-.77.2-1.18a.5.5 0 011 0c0 .7-.16 1.35-.44 1.94z"
+                                  />
+                                  <path
+                                    d="M10.48 8.35l-4.8-4.79a2.5 2.5 0 014.82.94V8c0 .12 0 .24-.02.35z"
+                                  />
+                                </svg>
+                              </span>
+                            </i>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    aria-hidden={true}
+                    data-is-visible={true}
+                    style={
+                      Object {
+                        "pointerEvents": "none",
+                        "position": "fixed",
+                      }
+                    }
+                    tabIndex={0}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </span>
         <div
           className="ms-Stack css-9"
         >