diff --git a/frontend/src/assets/img/chatbox-border.svg b/frontend/src/assets/img/chatbox-border.svg
new file mode 100644
index 0000000..a8d8d26
--- /dev/null
+++ b/frontend/src/assets/img/chatbox-border.svg
@@ -0,0 +1 @@
+
<svg width="20" height="31" viewBox="0 0 20 31" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Caret"><mask id="mask0_8083_82129" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="31"><rect id="Rectangle 6226" width="20" height="31" transform="matrix(-1 0 0 1 20 0)" fill="#C4C4C4"/></mask><g mask="url(#mask0_8083_82129)"><path id="Carrot" d="M25.806 8.68571C27.0958 7.53922 29.1348 8.45483 29.1348 10.1805V27.5C29.1348 28.6046 28.2393 29.5 27.1348 29.5H7.65036C5.81133 29.5 4.94712 27.227 6.32164 26.0052L25.806 8.68571Z" fill="white" stroke="#E5E5E5" stroke-width="2"/></g></g></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/img/duo-writing.png b/frontend/src/assets/img/duo-writing.png
new file mode 100644
index 0000000..de7b5bd
Binary files /dev/null and b/frontend/src/assets/img/duo-writing.png differ
diff --git a/frontend/src/components/ChatBox.tsx b/frontend/src/components/ChatBox.tsx
new file mode 100644
index 0000000..478b2c9
--- /dev/null
+++ b/frontend/src/components/ChatBox.tsx
@@ -0,0 +1,13 @@
+import ChatBoxBorder from '../assets/img/chatbox-border.svg';
+
+interface ChatBoxProps {
+  msg: string;
+}
+
+export default function ChatBox({msg}: ChatBoxProps) {
+
+  return <div className='round box h-min no-shadow relative min-h-[60px] flex items-center justify-center mx-5'>
+    <img src={ChatBoxBorder} alt="" className="absolute left-0 translate-x-[-100%] bottom-2" />
+    {msg}
+  </div>
+}