diff --git a/.yarn/cache/@babel-plugin-transform-react-display-name-npm-7.23.3-42e6709253-7f86964e84.zip b/.yarn/cache/@babel-plugin-transform-react-display-name-npm-7.23.3-42e6709253-7f86964e84.zip
new file mode 100644
index 0000000000..0fe736493f
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-react-display-name-npm-7.23.3-42e6709253-7f86964e84.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-react-pure-annotations-npm-7.23.3-2a925e2096-9ea3698b1d.zip b/.yarn/cache/@babel-plugin-transform-react-pure-annotations-npm-7.23.3-2a925e2096-9ea3698b1d.zip
new file mode 100644
index 0000000000..463d18db8a
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-react-pure-annotations-npm-7.23.3-2a925e2096-9ea3698b1d.zip differ
diff --git a/.yarn/cache/@babel-preset-react-npm-7.23.3-6a959abc25-2d90961e7e.zip b/.yarn/cache/@babel-preset-react-npm-7.23.3-6a959abc25-2d90961e7e.zip
new file mode 100644
index 0000000000..118cb0ac05
Binary files /dev/null and b/.yarn/cache/@babel-preset-react-npm-7.23.3-6a959abc25-2d90961e7e.zip differ
diff --git a/.yarn/cache/@r2wc-core-npm-1.0.1-af213829d4-0c71090e88.zip b/.yarn/cache/@r2wc-core-npm-1.0.1-af213829d4-0c71090e88.zip
new file mode 100644
index 0000000000..6808faba58
Binary files /dev/null and b/.yarn/cache/@r2wc-core-npm-1.0.1-af213829d4-0c71090e88.zip differ
diff --git a/.yarn/cache/@r2wc-react-to-web-component-npm-1.0.0-7aeae173e4-85455f59ba.zip b/.yarn/cache/@r2wc-react-to-web-component-npm-1.0.0-7aeae173e4-85455f59ba.zip
new file mode 100644
index 0000000000..bd3c62cd2c
Binary files /dev/null and b/.yarn/cache/@r2wc-react-to-web-component-npm-1.0.0-7aeae173e4-85455f59ba.zip differ
diff --git a/.yarn/cache/react-dom-npm-18.2.0-dd675bca1c-7d323310be.zip b/.yarn/cache/react-dom-npm-18.2.0-dd675bca1c-7d323310be.zip
new file mode 100644
index 0000000000..bbf6e75fee
Binary files /dev/null and b/.yarn/cache/react-dom-npm-18.2.0-dd675bca1c-7d323310be.zip differ
diff --git a/.yarn/cache/scheduler-npm-0.23.0-a379a6bc3b-d79192eeaa.zip b/.yarn/cache/scheduler-npm-0.23.0-a379a6bc3b-d79192eeaa.zip
new file mode 100644
index 0000000000..77e2bec070
Binary files /dev/null and b/.yarn/cache/scheduler-npm-0.23.0-a379a6bc3b-d79192eeaa.zip differ
diff --git a/index.html b/index.html
index fa57f85235..7933c0ca67 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -11,13 +11,23 @@
 
     <script src="https://unpkg.com/@microsoft/teams-js@2/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
 
-    <script src="./packages/mgt/dist/bundle/mgt-loader.js"></script>
+    <!--script src="./packages/mgt/dist/bundle/mgt-loader.js"></script-->
 
-    <!-- <script type="module" src="./packages/mgt-element/dist/es6/index.js"></script>
-    <script type="module" src="./packages/mgt-components/dist/es6/index.js"></script>
-    <script type="module" src="./packages/providers/mgt-msal2-provider/dist/es6/index.js"></script>
-    <script type="module" src="./packages/providers/mgt-mock-provider/dist/es6/index.js"></script> -->
-    
+    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
+    <script type="module" src="packages/mgt-element/dist/es6/index.js"></script>
+    <script type="module" src="packages/mgt-components/dist/es6/index.js"></script>
+    <script type="module" src="packages/mgt-react/dist/es6/index.js"></script>
+    <script type="module" src="packages/mgt-chat/dist/es6/index.js"></script>
+    <script type="module" src="packages/providers/mgt-msal2-provider/dist/es6/index.js"></script>
+    <script type="module" src="packages/providers/mgt-mock-provider/dist/es6/index.js"></script>
+
+    <script type="module">
+      import { registerMgtComponents } from "@microsoft/mgt-components";
+      import { Chat } from "@microsoft/mgt-chat";
+      registerMgtComponents();
+      //registerMgtChatComponent();
+    </script>
     <style>
       header {
         display: flex;
@@ -39,13 +49,13 @@
   </head>
 
   <body>
-    <!-- <mgt-msal2-provider
+    <mgt-msal2-provider
       client-id="2dfea037-938a-4ed8-9b35-c05708a1b241"
       redirect-uri="http://localhost:3000"
       scopes="user.read,user.read.all,mail.readBasic,people.read,people.read.all,sites.read.all,user.readbasic.all,contacts.read,presence.read,presence.read.all,tasks.readwrite,tasks.read,calendars.read,group.read.all,files.read,files.read.all,files.readwrite,files.readwrite.all"
-    ></mgt-msal2-provider> -->
+    ></mgt-msal2-provider>
 
-    <mgt-mock-provider></mgt-mock-provider>
+    <!--mgt-mock-provider></mgt-mock-provider-->
     <header>
       <mgt-theme-toggle></mgt-theme-toggle>
     </header>
@@ -82,6 +92,7 @@ <h2>mgt-login</h2>
       <mgt-search-box search-term="contoso"></mgt-search-box>
       <h2>mgt-search-results</h2>
       <mgt-search-results query-string="contoso"></mgt-search-results> -->
+      <mgt-chat chat-id=""></mgt-chat>
     </main>
   </body>
 </html>
diff --git a/packages/mgt-chat/package.json b/packages/mgt-chat/package.json
index 8d815a63cf..6d72aba969 100644
--- a/packages/mgt-chat/package.json
+++ b/packages/mgt-chat/package.json
@@ -56,13 +56,13 @@
     "@fluentui/react-components": "^9.19.1",
     "@fluentui/react-icons": "^2.0.210",
     "@fluentui/react-northstar": "^0.66.4",
-    "@microsoft/mgt-components": "*",
     "@microsoft/mgt-element": "*",
     "@microsoft/mgt-msal2-provider": "*",
     "@microsoft/mgt-react": "*",
     "@microsoft/microsoft-graph-types": "^2.0.0",
     "@microsoft/microsoft-graph-types-beta": "^0.16.0-preview",
     "@microsoft/signalr": "^7.0.4",
+    "@r2wc/react-to-web-component": "^1.0",
     "immer": "^9.0.6",
     "opencrypto": "1.5.5",
     "uuid": "^9.0.0",
diff --git a/packages/mgt-chat/src/components/Chat/Chat.tsx b/packages/mgt-chat/src/components/Chat/Chat.tsx
index f6918853ab..0488bdef4c 100644
--- a/packages/mgt-chat/src/components/Chat/Chat.tsx
+++ b/packages/mgt-chat/src/components/Chat/Chat.tsx
@@ -10,9 +10,17 @@ import ChatMessageBar from '../ChatMessageBar/ChatMessageBar';
 import { renderMGTMention } from '../../utils/mentions';
 import { registerAppIcons } from '../styles/registerIcons';
 import { ChatHeader } from '../ChatHeader/ChatHeader';
+import r2wc from '@r2wc/react-to-web-component';
+import { registerComponent } from '@microsoft/mgt-element';
 
 registerAppIcons();
 
+export const registerMgtChatComponent = () => {
+  // register self
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-call
+  registerComponent('chat', r2wc(Chat));
+};
+
 interface IMgtChatProps {
   chatId: string;
 }
diff --git a/packages/mgt-chat/src/components/NewChat/NewChat.tsx b/packages/mgt-chat/src/components/NewChat/NewChat.tsx
index 63133ec8e1..b51f241109 100644
--- a/packages/mgt-chat/src/components/NewChat/NewChat.tsx
+++ b/packages/mgt-chat/src/components/NewChat/NewChat.tsx
@@ -1,7 +1,6 @@
 import React, { FC, useCallback, useState } from 'react';
-import { IDynamicPerson } from '@microsoft/mgt-components';
 import { Chat } from '@microsoft/microsoft-graph-types';
-import { IGraph, PeoplePicker, Spinner } from '@microsoft/mgt-react';
+import { IGraph, PeoplePicker, Spinner, IDynamicPerson } from '@microsoft/mgt-react';
 import {
   Button,
   Field,
diff --git a/packages/mgt-chat/src/components/index.ts b/packages/mgt-chat/src/components/index.ts
index 9168084985..4926d24114 100644
--- a/packages/mgt-chat/src/components/index.ts
+++ b/packages/mgt-chat/src/components/index.ts
@@ -5,6 +5,6 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { Chat } from './Chat/Chat';
+import { Chat, registerMgtChatComponent } from './Chat/Chat';
 import { NewChat } from './NewChat/NewChat';
-export { Chat, NewChat };
+export { Chat, NewChat, registerMgtChatComponent };
diff --git a/packages/mgt-chat/src/statefulClient/StatefulGraphChatClient.ts b/packages/mgt-chat/src/statefulClient/StatefulGraphChatClient.ts
index f154ca61cd..16895a0465 100644
--- a/packages/mgt-chat/src/statefulClient/StatefulGraphChatClient.ts
+++ b/packages/mgt-chat/src/statefulClient/StatefulGraphChatClient.ts
@@ -14,7 +14,7 @@ import {
   SendBoxProps,
   SystemMessage
 } from '@azure/communication-react';
-import { IDynamicPerson, getUserWithPhoto } from '@microsoft/mgt-components';
+import { IDynamicPerson, getUserWithPhoto } from '@microsoft/mgt-react';
 import {
   ActiveAccountChanged,
   IGraph,
diff --git a/packages/mgt-chat/src/statefulClient/chatOperationScopes.ts b/packages/mgt-chat/src/statefulClient/chatOperationScopes.ts
index d34e234e1d..5061d192f2 100644
--- a/packages/mgt-chat/src/statefulClient/chatOperationScopes.ts
+++ b/packages/mgt-chat/src/statefulClient/chatOperationScopes.ts
@@ -4,7 +4,7 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
-import { getMgtPersonCardScopes } from '@microsoft/mgt-components/dist/es6/exports';
+import { getMgtPersonCardScopes } from '@microsoft/mgt-react';
 
 /**
  * The lowest count of scopes required to perform all chat operations
diff --git a/packages/mgt-chat/src/statefulClient/graph.chat.ts b/packages/mgt-chat/src/statefulClient/graph.chat.ts
index cf28e96334..bb857ef2a2 100644
--- a/packages/mgt-chat/src/statefulClient/graph.chat.ts
+++ b/packages/mgt-chat/src/statefulClient/graph.chat.ts
@@ -5,13 +5,7 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import {
-  schemas,
-  CachePhoto,
-  getPhotoInvalidationTime,
-  storePhotoInCache,
-  blobToBase64
-} from '@microsoft/mgt-components';
+import { schemas, CachePhoto, getPhotoInvalidationTime, storePhotoInCache, blobToBase64 } from '@microsoft/mgt-react';
 import { CacheService, IGraph, prepScopes } from '@microsoft/mgt-element';
 import { ResponseType } from '@microsoft/microsoft-graph-client';
 import { AadUserConversationMember, Chat, ChatMessage } from '@microsoft/microsoft-graph-types';
diff --git a/packages/mgt-chat/src/utils/mentions.tsx b/packages/mgt-chat/src/utils/mentions.tsx
index fc247125c0..b265ee2469 100644
--- a/packages/mgt-chat/src/utils/mentions.tsx
+++ b/packages/mgt-chat/src/utils/mentions.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { PersonCardInteraction } from '@microsoft/mgt-components';
-import { MgtTemplateProps, Person } from '@microsoft/mgt-react';
+import { MgtTemplateProps, Person, PersonCardInteraction } from '@microsoft/mgt-react';
 import { ChatMessageMention, User } from '@microsoft/microsoft-graph-types';
 import { GraphChatClient } from 'src/statefulClient/StatefulGraphChatClient';
 import { Mention } from '@azure/communication-react';
diff --git a/packages/mgt-react/package.json b/packages/mgt-react/package.json
index 0330c70b5c..80e43e7a7b 100644
--- a/packages/mgt-react/package.json
+++ b/packages/mgt-react/package.json
@@ -39,11 +39,9 @@
     "@microsoft/mgt-element": "*",
     "@microsoft/microsoft-graph-types": "^2.0.0",
     "@microsoft/microsoft-graph-types-beta": "^0.29.0-preview",
-    "wc-react": "^0.5.0"
-  },
-  "peerDependencies": {
     "react": "^17.0.1 || ^18.0.0",
-    "react-dom": "^17.0.1 || ^18.0.0"
+    "react-dom": "^17.0.1 || ^18.0.0",
+    "wc-react": "^0.5.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/yarn.lock b/yarn.lock
index 98bd5ab0d5..d991ae58d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1668,6 +1668,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-display-name@npm:^7.23.3":
+  version: 7.23.3
+  resolution: "@babel/plugin-transform-react-display-name@npm:7.23.3"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 7f86964e8434d3ddbd3c81d2690c9b66dbf1cd8bd9512e2e24500e9fa8cf378bc52c0853270b3b82143aba5965aec04721df7abdb768f952b44f5c6e0b198779
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-react-jsx-development@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-react-jsx-development@npm:7.22.5"
@@ -1706,6 +1717,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-pure-annotations@npm:^7.23.3":
+  version: 7.23.3
+  resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.23.3"
+  dependencies:
+    "@babel/helper-annotate-as-pure": ^7.22.5
+    "@babel/helper-plugin-utils": ^7.22.5
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 9ea3698b1d422561d93c0187ac1ed8f2367e4250b10e259785ead5aa643c265830fd0f4cf5087a5bedbc4007444c06da2f2006686613220acf0949895f453666
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-regenerator@npm:^7.22.10":
   version: 7.22.10
   resolution: "@babel/plugin-transform-regenerator@npm:7.22.10"
@@ -1978,7 +2001,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-react@npm:^7.12.5, @babel/preset-react@npm:^7.12.7, @babel/preset-react@npm:^7.16.0":
+"@babel/preset-react@npm:^7.12.5, @babel/preset-react@npm:^7.16.0":
   version: 7.22.15
   resolution: "@babel/preset-react@npm:7.22.15"
   dependencies:
@@ -1994,6 +2017,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/preset-react@npm:^7.12.7":
+  version: 7.23.3
+  resolution: "@babel/preset-react@npm:7.23.3"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/helper-validator-option": ^7.22.15
+    "@babel/plugin-transform-react-display-name": ^7.23.3
+    "@babel/plugin-transform-react-jsx": ^7.22.15
+    "@babel/plugin-transform-react-jsx-development": ^7.22.5
+    "@babel/plugin-transform-react-pure-annotations": ^7.23.3
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 2d90961e7e627a74b44551e88ad36a440579e283e8dc27972bf2f50682152bbc77228673a3ea22c0e0d005b70cbc487eccd64897c5e5e0384e5ce18f300b21eb
+  languageName: node
+  linkType: hard
+
 "@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.16.0, @babel/preset-typescript@npm:^7.23.0":
   version: 7.23.2
   resolution: "@babel/preset-typescript@npm:7.23.2"
@@ -5940,13 +5979,13 @@ __metadata:
     "@fluentui/react-components": ^9.19.1
     "@fluentui/react-icons": ^2.0.210
     "@fluentui/react-northstar": ^0.66.4
-    "@microsoft/mgt-components": "*"
     "@microsoft/mgt-element": "*"
     "@microsoft/mgt-msal2-provider": "*"
     "@microsoft/mgt-react": "*"
     "@microsoft/microsoft-graph-types": ^2.0.0
     "@microsoft/microsoft-graph-types-beta": ^0.16.0-preview
     "@microsoft/signalr": ^7.0.4
+    "@r2wc/react-to-web-component": ^1.0
     "@types/react": ^17.0.0
     immer: ^9.0.6
     opencrypto: 1.5.5
@@ -6032,10 +6071,9 @@ __metadata:
     "@microsoft/mgt-element": "*"
     "@microsoft/microsoft-graph-types": ^2.0.0
     "@microsoft/microsoft-graph-types-beta": ^0.29.0-preview
-    wc-react: ^0.5.0
-  peerDependencies:
     react: ^17.0.1 || ^18.0.0
     react-dom: ^17.0.1 || ^18.0.0
+    wc-react: ^0.5.0
   languageName: unknown
   linkType: soft
 
@@ -7250,6 +7288,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@r2wc/core@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "@r2wc/core@npm:1.0.1"
+  checksum: 0c71090e887cc9e295efe5ed2c038d937be870dfd2c409b5100cd91a662e5ac0ba938687aa33bdf98a874b4056a8af26f66357a8f8ac8a371334da99cb4d8400
+  languageName: node
+  linkType: hard
+
+"@r2wc/react-to-web-component@npm:^1.0":
+  version: 1.0.0
+  resolution: "@r2wc/react-to-web-component@npm:1.0.0"
+  dependencies:
+    "@r2wc/core": ^1.0.0
+  peerDependencies:
+    react: ^16.0.0 || ^17.0.0
+    react-dom: ^16.0.0 || ^17.0.0
+  checksum: 85455f59ba20e9de6070afca26920c30be3ef44b292fe1373265963c6ded01a0ba3b8555648b158bb733d84143aacb49dd11c430a98b74dd90c698b37575da00
+  languageName: node
+  linkType: hard
+
 "@radix-ui/number@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/number@npm:1.0.1"
@@ -32980,6 +33037,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-dom@npm:^17.0.1 || ^18.0.0":
+  version: 18.2.0
+  resolution: "react-dom@npm:18.2.0"
+  dependencies:
+    loose-envify: ^1.1.0
+    scheduler: ^0.23.0
+  peerDependencies:
+    react: ^18.2.0
+  checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc
+  languageName: node
+  linkType: hard
+
 "react-error-overlay@npm:^6.0.11":
   version: 6.0.11
   resolution: "react-error-overlay@npm:6.0.11"
@@ -33265,7 +33334,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18.0":
+"react@npm:^17.0.1 || ^18.0.0, react@npm:^18.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
   dependencies:
@@ -34866,6 +34935,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scheduler@npm:^0.23.0":
+  version: 0.23.0
+  resolution: "scheduler@npm:0.23.0"
+  dependencies:
+    loose-envify: ^1.1.0
+  checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a
+  languageName: node
+  linkType: hard
+
 "schema-utils@npm:2.7.0":
   version: 2.7.0
   resolution: "schema-utils@npm:2.7.0"
