diff --git a/frontend/src/Avatar.tsx b/frontend/src/Avatar.tsx
new file mode 100644
index 0000000..123b383
--- /dev/null
+++ b/frontend/src/Avatar.tsx
@@ -0,0 +1,9 @@
+export default function Avatar({
+  avatar,
+  size,
+}: {
+  avatar: string;
+  size?: 'SMALL' | 'MEDIUM' | 'LARGE';
+}) {
+  return <div>{avatar}</div>;
+}
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index dcb09bd..4856393 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -25,7 +25,7 @@ export default function Navigation({
     isApiKeySet ? 'INACTIVE' : 'ACTIVE',
   );
   const openNav = (
-    <div className="fixed h-full w-72 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all md:visible md:flex lg:w-96">
+    <div className="fixed z-10 h-full w-72 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all md:visible md:flex lg:w-96">
       <div className={'h-16 w-full border-b-2 border-gray-100'}>
         <button
           className="float-right mr-5 mt-5 h-5 w-5"
@@ -76,7 +76,7 @@ export default function Navigation({
 
   const closedNav = (
     <>
-      <div className="fixed hidden h-full w-16 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all md:flex">
+      <div className="fixed z-10 hidden h-full w-16 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all md:flex">
         <div className={'h-16 w-16 border-b-2 border-gray-100'}>
           <button
             className="float-right mr-5 mt-5 h-5 w-5"
diff --git a/frontend/src/assets/send.svg b/frontend/src/assets/send.svg
new file mode 100644
index 0000000..f31b69b
--- /dev/null
+++ b/frontend/src/assets/send.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.00999999 18L21 9L0.00999999 0L0 7L15 9L0 11L0.00999999 18Z" fill="black" fill-opacity="0.54"/>
+</svg>
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 909662f..dd0fb23 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -1,7 +1,28 @@
+import ConversationBubble from './ConversationBubble';
+import ConversationInput from './ConversationInput';
+
 export default function Conversation() {
+  // uncomment below JSX to see the sample harcoded chat box
   return (
-    <div className="h-full w-full p-6 text-center transition-all">
-      Docs GPT Chat Placeholder
+    <div className="flex justify-center p-6">
+      {/* <div className="w-10/12 transition-all md:w-1/2">
+        {new Array(10).fill(1).map((item, index) => {
+          return (
+            <ConversationBubble
+              className="mt-5"
+              key={index}
+              user={index % 2 === 0 ? { avatar: '🦖' } : { avatar: '👤' }}
+              message={
+                index % 2 === 0
+                  ? 'A chatbot is a computer program that simulates human conversation through voice commands or text chats or both. It can be integrated with various messaging platforms like Facebook Messenger, WhatsApp, WeChat, etc.'
+                  : 'what is DocsGPT'
+              }
+              isCurrentUser={index % 2 === 0 ? false : true}
+            ></ConversationBubble>
+          );
+        })}
+      </div>
+      <ConversationInput className="fixed bottom-2 w-10/12 md:w-[50%]"></ConversationInput> */}
     </div>
   );
 }
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
new file mode 100644
index 0000000..e5a34f8
--- /dev/null
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -0,0 +1,25 @@
+import Avatar from '../Avatar';
+import { User } from '../models/misc';
+
+export default function ConversationBubble({
+  user,
+  message,
+  isCurrentUser,
+  className,
+}: {
+  user: User;
+  message: string;
+  isCurrentUser: boolean;
+  className: string;
+}) {
+  return (
+    <div
+      className={`flex rounded-3xl ${
+        isCurrentUser ? '' : 'bg-gray-1000'
+      } py-7 px-5 ${className}`}
+    >
+      <Avatar avatar={user.avatar}></Avatar>
+      <p className="ml-5">{message}</p>
+    </div>
+  );
+}
diff --git a/frontend/src/conversation/ConversationInput.tsx b/frontend/src/conversation/ConversationInput.tsx
new file mode 100644
index 0000000..9dca9f7
--- /dev/null
+++ b/frontend/src/conversation/ConversationInput.tsx
@@ -0,0 +1,21 @@
+import Send from './../assets/send.svg';
+
+export default function ConversationInput({
+  className,
+}: {
+  className?: string;
+}) {
+  return (
+    <div className={`${className} flex`}>
+      <div
+        contentEditable
+        className={`min-h-5 border-000000 overflow-x-hidden; max-h-24 w-full overflow-y-auto rounded-xl border bg-white p-2 pr-9 opacity-100 focus:border-2 focus:outline-none`}
+      ></div>
+      <img
+        onClick={() => console.log('here')}
+        src={Send}
+        className="relative right-9"
+      ></img>
+    </div>
+  );
+}
diff --git a/frontend/src/models/misc.ts b/frontend/src/models/misc.ts
index 27a149d..dbf21ae 100644
--- a/frontend/src/models/misc.ts
+++ b/frontend/src/models/misc.ts
@@ -1 +1,5 @@
 export type ActiveState = 'ACTIVE' | 'INACTIVE';
+
+export type User = {
+  avatar: string;
+};
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 8a8d3bf..8596bc5 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -11,6 +11,7 @@ module.exports = {
         'eerie-black': '#212121',
         jet: '#343541',
         'gray-alpha': 'rgba(0,0,0, .1)',
+        'gray-1000': '#F6F6F6',
       },
     },
   },