diff --git a/README.md b/README.md
index 7016a4e..9bc5089 100644
--- a/README.md
+++ b/README.md
@@ -1,15 +1,11 @@
 # Gemini Pro Vision Playground
 
-
 This project is a simple playground for using the Gemini Pro Vision and Gemini Pro AI models.
 
-
+I created this to help others building apps with the gemini-pro and gemin-pro-vision models. If you find it helpful, please give a ⭐
 
 https://github.com/e-roy/gemini-pro-vision-playground/assets/70700747/e0e80929-285c-441f-87f5-34d68593b787
 
-
-
-
 ## Getting Started
 
 Get your Google AI API key [here](https://ai.google.dev/tutorials/setup)
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0b2a9a7..e8aeb8a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,11 +9,11 @@ export default function Home() {
   const { selectedModel } = useControlContext();
 
   return (
-    <main className="grid md:grid-cols-12 max-h-screen h-screen max-w-6xl m-auto gap-4 p-2 md:p-4 my-12 md:my-0">
+    <main className="grid md:grid-cols-12 max-h-screen md:h-screen max-w-6xl m-auto gap-4 p-2 md:p-4 my-12 md:my-0">
       <div className="relative md:col-span-3 h-[95vh]">
         <ControlContainer />
       </div>
-      <div className="md:col-span-9 h-[95vh]">
+      <div className="md:col-span-9">
         {selectedModel === "gemini-pro" ? (
           <ChatContainer />
         ) : (
diff --git a/src/components/ChatContainer.tsx b/src/components/ChatContainer.tsx
index 6ac6836..7d434aa 100644
--- a/src/components/ChatContainer.tsx
+++ b/src/components/ChatContainer.tsx
@@ -9,16 +9,13 @@ import React, {
 } from "react";
 import { Message, useChat } from "ai/react";
 import { Card } from "./ui/card";
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/components/ui/hover-card";
-import { MarkdownViewer } from "./MarkdownViewer";
+
+import { MarkdownViewer } from "./markdown-viewer/MarkdownViewer";
 import { useControlContext } from "@/providers/ControlContext";
 import { CommonForm } from "./CommonForm";
 import { TypingBubble } from "./TypingBubble";
-import { MessageCircleX } from "lucide-react";
+import { MessageCircleX, User, Bot } from "lucide-react";
+import { Button } from "./ui/button";
 
 export const ChatContainer = () => {
   const { generalSettings, safetySettings } = useControlContext();
@@ -63,39 +60,41 @@ export const ChatContainer = () => {
   return (
     <div className="flex flex-col h-[95vh]">
       <Card className="flex flex-col flex-1 overflow-hidden">
+        {messages.length > 0 && (
+          <div className={`flex p-4`}>
+            <Button
+              variant={`secondary`}
+              type={`button`}
+              size={`sm`}
+              onClick={handleClearChat}
+            >
+              <MessageCircleX className={`mr-2`} /> Clear chat history
+            </Button>
+          </div>
+        )}
         <div className="flex-1 overflow-y-auto">
-          {messages.length > 0 && (
-            <div className={`flex justify-end p-4`}>
-              <HoverCard openDelay={200}>
-                <HoverCardTrigger asChild onClick={handleClearChat}>
-                  <div className={`text-primary/60 hover:text-primary/90`}>
-                    <MessageCircleX />
-                  </div>
-                </HoverCardTrigger>
-                <HoverCardContent
-                  align="start"
-                  className="w-[260px] text-sm"
-                  side="right"
-                >
-                  Clear chat history
-                </HoverCardContent>
-              </HoverCard>
-            </div>
-          )}
           {messages.map((message: Message) => (
-            <div
-              key={message.id}
-              className={`${
-                message.role === "user" ? "justify-end" : "justify-start"
-              } flex m-4`}
-            >
+            <div key={message.id} className={`flex`}>
               <div
                 className={`${
                   message.role === "user"
-                    ? "bg-primary/20 dark:bg-primary/20"
+                    ? ""
                     : "bg-primary/10 dark:bg-primary/10"
-                } px-4 py-2 rounded-lg`}
+                } px-4 py-8 w-full`}
               >
+                <div className={`my-4`}>
+                  {message.role === "user" ? (
+                    <div className={`flex space-x-4 font-medium`}>
+                      <User />
+                      <div>You</div>
+                    </div>
+                  ) : (
+                    <div className={`flex space-x-4 font-medium`}>
+                      <Bot />
+                      <div>Gemini Pro</div>
+                    </div>
+                  )}
+                </div>
                 <MarkdownViewer text={message.content} />
               </div>
             </div>
diff --git a/src/components/MarkdownViewer.tsx b/src/components/MarkdownViewer.tsx
deleted file mode 100644
index 5516efb..0000000
--- a/src/components/MarkdownViewer.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-"use client";
-// components/MarkdownViewer.tsx
-import React, { useMemo, useState } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import rehypeRaw from "rehype-raw";
-import rehypeSanitize from "rehype-sanitize";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { a11yDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
-
-type AnchorProps = {
-  href: string;
-  children: React.ReactNode;
-};
-
-const Anchor: React.FC<AnchorProps> = ({ href, children }) => {
-  return (
-    <a
-      href={href}
-      className="text-blue-500 hover:underline"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      {children}
-    </a>
-  );
-};
-
-const UlComponent: React.FC<React.HTMLAttributes<HTMLUListElement>> = ({
-  children,
-  ...props
-}) => {
-  return (
-    <ul {...props} className="list-disc pl-4 mb-4">
-      {children}
-    </ul>
-  );
-};
-
-const OlComponent: React.FC<React.HTMLAttributes<HTMLOListElement>> = ({
-  children,
-  ...props
-}) => {
-  return (
-    <ol {...props} className="list-decimal pl-4 mb-0">
-      {children}
-    </ol>
-  );
-};
-
-const LiComponent: React.FC<React.LiHTMLAttributes<HTMLLIElement>> = ({
-  children,
-  ...props
-}) => {
-  return (
-    <li {...props} className="mb-1 leading-snug pl-4">
-      {children}
-    </li>
-  );
-};
-
-interface IPreProps {
-  children: React.ReactElement<{ className?: string; children: string }>;
-}
-
-const PreComponent: React.FC<IPreProps> = ({ children }) => {
-  const [hasCopied, setHasCopied] = useState(false);
-  const language = React.isValidElement(children)
-    ? children.props.className?.split("-")[1] || ""
-    : "";
-
-  const copyToClipboard = React.useCallback(async () => {
-    if ("clipboard" in navigator) {
-      try {
-        await navigator.clipboard.writeText(children?.props?.children);
-        setHasCopied(true);
-        setTimeout(() => setHasCopied(false), 2000);
-      } catch (err) {
-        console.error("Failed to copy!", err);
-      }
-    }
-  }, [children.props.children]);
-
-  return (
-    <pre className="bg-[#2B2B2B] rounded-md p-2 text-neutral-50 mb-4">
-      <div className={`flex justify-between`}>
-        <div className="italic text-xs text-neutral-300 uppercase">
-          {language}
-        </div>
-        <button
-          type={`button`}
-          className="border w-20 rounded"
-          onClick={copyToClipboard}
-        >
-          {hasCopied ? "Copied!" : "Copy"}
-        </button>
-      </div>
-
-      {children}
-    </pre>
-  );
-};
-
-interface CodeBlockProps {
-  className?: string;
-  children?: string | React.ReactNode;
-}
-
-const CodeBlock: React.FC<CodeBlockProps> = ({ ...props }) => {
-  const { children, className, ...rest } = props;
-  const match = /language-(\w+)/.exec(className as string) || [];
-
-  return match ? (
-    <SyntaxHighlighter
-      {...rest}
-      PreTag="div"
-      language={match[1]}
-      style={a11yDark}
-    >
-      {String(children).replace(/\n$/, "")}
-    </SyntaxHighlighter>
-  ) : (
-    <code {...rest} className={className}>
-      {children}
-    </code>
-  );
-};
-
-const MemoizedAnchor = React.memo(Anchor);
-const MemoizedUlComponent = React.memo(UlComponent);
-const MemoizedOlComponent = React.memo(OlComponent);
-const MemoizedLiComponent = React.memo(LiComponent);
-const MemoizedPreComponent = React.memo(PreComponent);
-const MemoizedCodeBlock = React.memo(CodeBlock);
-
-interface IMarkdownViewerProps {
-  text: string;
-}
-
-export const MarkdownViewer: React.FC<IMarkdownViewerProps> = ({ text }) => {
-  const components = useMemo(
-    () => ({
-      a: MemoizedAnchor,
-      ul: MemoizedUlComponent,
-      ol: MemoizedOlComponent,
-      li: MemoizedLiComponent,
-      pre: MemoizedPreComponent,
-      code: MemoizedCodeBlock,
-    }),
-    []
-  );
-
-  return (
-    <ReactMarkdown
-      // @ts-ignore
-      components={components}
-      remarkPlugins={[remarkGfm]}
-      rehypePlugins={[rehypeRaw, rehypeSanitize]}
-    >
-      {text}
-    </ReactMarkdown>
-  );
-};
diff --git a/src/components/VisionContainer.tsx b/src/components/VisionContainer.tsx
index c840eab..f3756cf 100644
--- a/src/components/VisionContainer.tsx
+++ b/src/components/VisionContainer.tsx
@@ -4,7 +4,7 @@ import React, { useState, useCallback } from "react";
 import { useControlContext } from "@/providers/ControlContext";
 import { Card } from "@/components/ui/card";
 
-import { MarkdownViewer } from "./MarkdownViewer";
+import { MarkdownViewer } from "./markdown-viewer/MarkdownViewer";
 import { CommonForm } from "./CommonForm";
 import { TypingBubble } from "./TypingBubble";
 
diff --git a/src/components/markdown-viewer/MarkdownViewer.tsx b/src/components/markdown-viewer/MarkdownViewer.tsx
new file mode 100644
index 0000000..dcd1d69
--- /dev/null
+++ b/src/components/markdown-viewer/MarkdownViewer.tsx
@@ -0,0 +1,92 @@
+"use client";
+// components/MarkdownViewer.tsx
+import React, { useMemo } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
+
+import { UlComponent, OlComponent, LiComponent } from "./list";
+
+import { PreComponent, CodeBlock } from "./code";
+
+import {
+  TableComponent,
+  TheadComponent,
+  TbodyComponent,
+  TrComponent,
+  ThComponent,
+  TdComponent,
+} from "./table";
+
+type AnchorProps = {
+  href: string;
+  children: React.ReactNode;
+};
+
+const Anchor: React.FC<AnchorProps> = ({ href, children }) => {
+  return (
+    <a
+      href={href}
+      className="text-blue-500 hover:underline"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {children}
+    </a>
+  );
+};
+
+const MemoizedAnchor = React.memo(Anchor);
+
+const MemoizedUlComponent = React.memo(UlComponent);
+const MemoizedOlComponent = React.memo(OlComponent);
+const MemoizedLiComponent = React.memo(LiComponent);
+
+const MemoizedPreComponent = React.memo(PreComponent);
+const MemoizedCodeBlock = React.memo(CodeBlock);
+
+const MemoizedTableComponent = React.memo(TableComponent);
+const MemoizedTheadComponent = React.memo(TheadComponent);
+const MemoizedTbodyComponent = React.memo(TbodyComponent);
+const MemoizedTrComponent = React.memo(TrComponent);
+const MemoizedThComponent = React.memo(ThComponent);
+const MemoizedTdComponent = React.memo(TdComponent);
+
+interface IMarkdownViewerProps {
+  text: string;
+}
+
+export const MarkdownViewer: React.FC<IMarkdownViewerProps> = ({ text }) => {
+  const components = useMemo(
+    () => ({
+      a: MemoizedAnchor,
+
+      ul: MemoizedUlComponent,
+      ol: MemoizedOlComponent,
+      li: MemoizedLiComponent,
+
+      pre: MemoizedPreComponent,
+      code: MemoizedCodeBlock,
+
+      table: MemoizedTableComponent,
+      thead: MemoizedTheadComponent,
+      tbody: MemoizedTbodyComponent,
+      tr: MemoizedTrComponent,
+      th: MemoizedThComponent,
+      td: MemoizedTdComponent,
+    }),
+    []
+  );
+
+  return (
+    <ReactMarkdown
+      // @ts-ignore
+      components={components}
+      remarkPlugins={[remarkGfm]}
+      rehypePlugins={[rehypeRaw, rehypeSanitize]}
+    >
+      {text}
+    </ReactMarkdown>
+  );
+};
diff --git a/src/components/markdown-viewer/code.tsx b/src/components/markdown-viewer/code.tsx
new file mode 100644
index 0000000..0da5a4c
--- /dev/null
+++ b/src/components/markdown-viewer/code.tsx
@@ -0,0 +1,71 @@
+"use client";
+import React, { useState } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { a11yDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+
+interface IPreProps {
+  children: React.ReactElement<{ className?: string; children: string }>;
+}
+
+export const PreComponent: React.FC<IPreProps> = ({ children }) => {
+  const [hasCopied, setHasCopied] = useState(false);
+  const language = React.isValidElement(children)
+    ? children.props.className?.split("-")[1] || ""
+    : "";
+
+  const copyToClipboard = React.useCallback(async () => {
+    if ("clipboard" in navigator) {
+      try {
+        await navigator.clipboard.writeText(children?.props?.children);
+        setHasCopied(true);
+        setTimeout(() => setHasCopied(false), 2000);
+      } catch (err) {
+        console.error("Failed to copy!", err);
+      }
+    }
+  }, [children.props.children]);
+
+  return (
+    <pre className="bg-[#2B2B2B] rounded-md p-2 text-neutral-50 mb-4">
+      <div className={`flex justify-between`}>
+        <div className="italic text-xs text-neutral-300 uppercase">
+          {language}
+        </div>
+        <button
+          type={`button`}
+          className="border w-20 rounded"
+          onClick={copyToClipboard}
+        >
+          {hasCopied ? "Copied!" : "Copy"}
+        </button>
+      </div>
+
+      {children}
+    </pre>
+  );
+};
+
+interface CodeBlockProps {
+  className?: string;
+  children?: string | React.ReactNode;
+}
+
+export const CodeBlock: React.FC<CodeBlockProps> = ({ ...props }) => {
+  const { children, className, ...rest } = props;
+  const match = /language-(\w+)/.exec(className as string) || [];
+
+  return match ? (
+    <SyntaxHighlighter
+      {...rest}
+      PreTag="div"
+      language={match[1]}
+      style={a11yDark}
+    >
+      {String(children).replace(/\n$/, "")}
+    </SyntaxHighlighter>
+  ) : (
+    <code {...rest} className={className}>
+      {children}
+    </code>
+  );
+};
diff --git a/src/components/markdown-viewer/list.tsx b/src/components/markdown-viewer/list.tsx
new file mode 100644
index 0000000..7bbfaaa
--- /dev/null
+++ b/src/components/markdown-viewer/list.tsx
@@ -0,0 +1,32 @@
+export const UlComponent: React.FC<React.HTMLAttributes<HTMLUListElement>> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <ul {...props} className="list-disc pl-4 mb-4">
+      {children}
+    </ul>
+  );
+};
+
+export const OlComponent: React.FC<React.HTMLAttributes<HTMLOListElement>> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <ol {...props} className="list-decimal pl-4 mb-0">
+      {children}
+    </ol>
+  );
+};
+
+export const LiComponent: React.FC<React.LiHTMLAttributes<HTMLLIElement>> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <li {...props} className="mb-1 leading-snug pl-4">
+      {children}
+    </li>
+  );
+};
diff --git a/src/components/markdown-viewer/table.tsx b/src/components/markdown-viewer/table.tsx
new file mode 100644
index 0000000..c3294bf
--- /dev/null
+++ b/src/components/markdown-viewer/table.tsx
@@ -0,0 +1,67 @@
+// components/markdown-viewer/table.tsx
+export const TableComponent: React.FC<
+  React.TableHTMLAttributes<HTMLTableElement>
+> = ({ children, ...props }) => {
+  return (
+    <div className="w-full max-w-[340px] sm:max-w-[640px] md:max-w-full overflow-x-auto">
+      <table
+        {...props}
+        className="w-full my-4 divide-y divide-primary/60 border border-primary/30 border-collapse p-1 bg-primary/10"
+      >
+        {children}
+      </table>
+    </div>
+  );
+};
+
+export const TheadComponent: React.FC<
+  React.HTMLAttributes<HTMLTableSectionElement>
+> = ({ children, ...props }) => {
+  return (
+    <thead {...props} className="divide-x bg-primary/10">
+      {children}
+    </thead>
+  );
+};
+
+export const TbodyComponent: React.FC<
+  React.HTMLAttributes<HTMLTableSectionElement>
+> = ({ children, ...props }) => {
+  return (
+    <tbody {...props} className="divide-y divide-x">
+      {children}
+    </tbody>
+  );
+};
+
+export const TrComponent: React.FC<
+  React.HTMLAttributes<HTMLTableRowElement>
+> = ({ children, ...props }) => {
+  return <tr {...props}>{children}</tr>;
+};
+
+export const ThComponent: React.FC<
+  React.ThHTMLAttributes<HTMLTableCellElement>
+> = ({ children, ...props }) => {
+  return (
+    <th
+      {...props}
+      className={`px-6 py-3 text-left text-sm font-bold text-primary/90 uppercase border-x border-x-primary/10`}
+    >
+      {children}
+    </th>
+  );
+};
+
+export const TdComponent: React.FC<
+  React.TdHTMLAttributes<HTMLTableCellElement>
+> = ({ children, ...props }) => {
+  return (
+    <td
+      {...props}
+      className="px-6 py-2 text-sm whitespace-nowrap border-x-primary/10 border-y-primary/50 border"
+    >
+      {children}
+    </td>
+  );
+};
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index a0518ae..411e369 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground border-primary/40 shadow-md shadow-primary/20 dark:shadow-none",
+      "rounded border bg-card text-card-foreground border-primary/40 shadow-md shadow-primary/20 dark:shadow-none",
       className
     )}
     {...props}