diff --git a/.changeset/gentle-rats-greet.md b/.changeset/gentle-rats-greet.md
new file mode 100644
index 000000000..0c8ed65a9
--- /dev/null
+++ b/.changeset/gentle-rats-greet.md
@@ -0,0 +1,5 @@
+---
+'@livekit/components-react': patch
+---
+
+Added close button in chat screen
diff --git a/README.md b/README.md
index 070da8bb2..3fa31a2d5 100644
--- a/README.md
+++ b/README.md
@@ -135,3 +135,5 @@ The highest priority is currently to get the core and react packages to a stable
 </tbody>
 </table>
 <!--END_REPO_NAV-->
+
+
diff --git a/packages/react/etc/components-react.api.md b/packages/react/etc/components-react.api.md
index 01c757025..2463bfb29 100644
--- a/packages/react/etc/components-react.api.md
+++ b/packages/react/etc/components-react.api.md
@@ -107,6 +107,11 @@ export const CarouselView: typeof CarouselLayout;
 // @public
 export function Chat({ messageFormatter, messageDecoder, messageEncoder, channelTopic, ...props }: ChatProps): React_2.JSX.Element;
 
+// Warning: (ae-internal-missing-underscore) The name "ChatCloseIcon" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const ChatCloseIcon: (props: SVGProps<SVGSVGElement>) => React_2.JSX.Element;
+
 // @public
 export function ChatEntry({ entry, hideName, hideTimestamp, messageFormatter, ...props }: ChatEntryProps): React_2.JSX.Element;
 
diff --git a/packages/react/src/assets/icons/ChatCloseIcon.tsx b/packages/react/src/assets/icons/ChatCloseIcon.tsx
new file mode 100644
index 000000000..915316570
--- /dev/null
+++ b/packages/react/src/assets/icons/ChatCloseIcon.tsx
@@ -0,0 +1,17 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgChatCloseIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 24 24" {...props}>
+    <path
+      fill="#FFF"
+      d="M4.99 3.99a1 1 0 0 0-.697 1.717L10.586 12l-6.293 6.293a1 1 0 1 0 1.414 1.414L12 13.414l6.293 6.293a1 1 0 1 0 1.414-1.414L13.414 12l6.293-6.293a1 1 0 0 0-.727-1.717 1 1 0 0 0-.687.303L12 10.586 5.707 4.293a1 1 0 0 0-.717-.303z"
+    />
+  </svg>
+);
+export default SvgChatCloseIcon;
diff --git a/packages/react/src/assets/icons/index.ts b/packages/react/src/assets/icons/index.ts
index ea04acf9e..7425b1e9a 100644
--- a/packages/react/src/assets/icons/index.ts
+++ b/packages/react/src/assets/icons/index.ts
@@ -1,5 +1,6 @@
 export { default as CameraDisabledIcon } from './CameraDisabledIcon';
 export { default as CameraIcon } from './CameraIcon';
+export { default as ChatCloseIcon } from './ChatCloseIcon';
 export { default as ChatIcon } from './ChatIcon';
 export { default as Chevron } from './Chevron';
 export { default as FocusToggleIcon } from './FocusToggleIcon';
diff --git a/packages/react/src/prefabs/Chat.tsx b/packages/react/src/prefabs/Chat.tsx
index 0dd895790..91f17d9c2 100644
--- a/packages/react/src/prefabs/Chat.tsx
+++ b/packages/react/src/prefabs/Chat.tsx
@@ -5,6 +5,8 @@ import { cloneSingleChild } from '../utils';
 import type { MessageFormatter } from '../components/ChatEntry';
 import { ChatEntry } from '../components/ChatEntry';
 import { useChat } from '../hooks/useChat';
+import { ChatToggle } from '../components';
+import { ChatCloseIcon } from '../assets/icons';
 
 /** @public */
 export interface ChatProps extends React.HTMLAttributes<HTMLDivElement>, ChatOptions {
@@ -85,6 +87,13 @@ export function Chat({
 
   return (
     <div {...props} className="lk-chat">
+      <div className="lk-chat-header">
+        Messages
+        <ChatToggle className="lk-close-button">
+          <ChatCloseIcon />
+        </ChatToggle>
+      </div>
+
       <ul className="lk-list lk-chat-messages" ref={ulRef}>
         {props.children
           ? chatMessages.map((msg, idx) =>
diff --git a/packages/styles/assets/icons/chat-close-icon.svg b/packages/styles/assets/icons/chat-close-icon.svg
new file mode 100644
index 000000000..f6fdff7d6
--- /dev/null
+++ b/packages/styles/assets/icons/chat-close-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0 0 24 24">
+<path fill="#FFF" d="M 4.9902344 3.9902344 A 1.0001 1.0001 0 0 0 4.2929688 5.7070312 L 10.585938 12 L 4.2929688 18.292969 A 1.0001 1.0001 0 1 0 5.7070312 19.707031 L 12 13.414062 L 18.292969 19.707031 A 1.0001 1.0001 0 1 0 19.707031 18.292969 L 13.414062 12 L 19.707031 5.7070312 A 1.0001 1.0001 0 0 0 18.980469 3.9902344 A 1.0001 1.0001 0 0 0 18.292969 4.2929688 L 12 10.585938 L 5.7070312 4.2929688 A 1.0001 1.0001 0 0 0 4.9902344 3.9902344 z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/styles/scss/prefabs/chat.scss b/packages/styles/scss/prefabs/chat.scss
index 654df282d..8d166e5a3 100644
--- a/packages/styles/scss/prefabs/chat.scss
+++ b/packages/styles/scss/prefabs/chat.scss
@@ -1,12 +1,30 @@
 .chat {
   display: grid;
-  grid-template-rows: 1fr var(--control-bar-height);
+  grid-template-rows: var(--chat-header-height) 1fr var(--control-bar-height);
   width: clamp(200px, 55ch, 60ch);
   background-color: var(--bg2);
   border-left: 1px solid var(--border-color);
   align-items: end;
 }
 
+.chat-header {
+  height: var(--chat-header-height);
+  padding: 0.75rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .close-button {
+    position: absolute;
+    right: 0;
+    transform: translateX(-50%);
+    background-color: transparent;
+    &:hover {
+      background-color:var(--lk-control-active-hover-bg);
+    }
+  }
+}
+
 .chat-messages {
   display: flex;
   width: 100%;
@@ -28,9 +46,11 @@
     white-space: nowrap;
     padding: 0 0.3rem;
     display: flex;
+
     .participant-name {
       margin-top: 1rem;
     }
+
     .timestamp {
       margin-left: auto;
       align-self: flex-end;
@@ -49,6 +69,7 @@
       background-color: var(--bg5);
     }
   }
+
   &[data-message-origin='remote'] {
     .message-body {
       background-color: var(--accent4);
@@ -85,4 +106,4 @@
     max-width: 100%;
     bottom: var(--control-bar-height);
   }
-}
+}
\ No newline at end of file
diff --git a/packages/styles/scss/themes/default.scss b/packages/styles/scss/themes/default.scss
index dd32483ab..105cf81ff 100644
--- a/packages/styles/scss/themes/default.scss
+++ b/packages/styles/scss/themes/default.scss
@@ -61,4 +61,5 @@ $accent: #1f8cf9;
 
   --grid-gap: 0.5rem;
   --control-bar-height: 69px;
+  --chat-header-height: 69px;
 }