diff --git a/app/package.json b/app/package.json
index 300467e..1781e4a 100755
--- a/app/package.json
+++ b/app/package.json
@@ -3,6 +3,7 @@
     "@parcel/compressor-brotli": "^2.8.3",
     "@parcel/compressor-gzip": "^2.8.3",
     "@parcel/config-default": "^2.8.3",
+    "@tailwindcss/typography": "^0.5.9",
     "@types/chroma-js": "^2.4.0",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
@@ -48,12 +49,15 @@
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hotkeys-hook": "^4.4.0",
+    "react-markdown": "^8.0.6",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.8.1",
     "react-scroll": "^1.8.9",
     "react-select": "^5.7.0",
     "react-tiny-popover": "^7.2.3",
     "react-transition-group": "^4.4.5",
+    "remark-gfm": "^3.0.1",
     "sort-by": "^1.2.0",
     "sse.js": "^0.6.1",
     "tailwind-merge": "^1.9.0",
diff --git a/app/src/app.tsx b/app/src/app.tsx
index efbdf40..b828c41 100755
--- a/app/src/app.tsx
+++ b/app/src/app.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react"
-import {Playground, Compare, Settings} from "./pages"
+import {Playground, Compare, Chat, Settings} from "./pages"
 import {SSE} from "sse.js"
 import {
   EditorState,
@@ -56,6 +56,12 @@ const DEFAULT_CONTEXTS = {
         showParametersTable: false
       }
     },
+    chat:{
+      history: DEFAULT_HISTORY_STATE,
+      editor: DEFAULT_EDITOR_STATE,
+      modelsState: [],
+      parameters: DEFAULT_PARAMETERS_STATE
+    },
   },
   MODELS: [],
 }
@@ -155,7 +161,7 @@ const APIContextWrapper = ({children}) => {
 
   useEffect(() => {
     const sse_request = new SSE("/api/notifications")
-    
+
     sse_request.addEventListener("notification", (event: any) => {
       const parsedEvent = JSON.parse(event.data);
       notificationSubscribers.current.forEach((callback) => {
@@ -180,15 +186,15 @@ const APIContextWrapper = ({children}) => {
       notificationSubscribers.current = notificationSubscribers.current.filter((cb) => cb !== callback);
     },
   };
-  
+
   const Provider = {
-    setAPIKey: async (provider, apiKey) => (await fetch(`/api/provider/${provider}/api-key`, {method: "PUT", headers: {"Content-Type": "application/json"}, 
+    setAPIKey: async (provider, apiKey) => (await fetch(`/api/provider/${provider}/api-key`, {method: "PUT", headers: {"Content-Type": "application/json"},
       body: JSON.stringify({apiKey: apiKey})}
     )).json(),
     getAll: async () => (await fetch("/api/providers")).json(),
     getAllWithModels: async () => (await fetch("/api/providers-with-key-and-models")).json(),
   };
-  
+
   const Inference = {
     subscribeTextCompletion: (callback) => {
       textCompletionSubscribers.current.push(callback);
@@ -205,14 +211,14 @@ const APIContextWrapper = ({children}) => {
     },
     chatCompletion: createChatCompletionRequest,
   };
-  
+
   const [apiContext, _] = React.useState({
     Model,
     Notifications,
     Provider,
     Inference,
   });
-  
+
   function createTextCompletionRequest({prompt, models}) {
     const url = "/api/inference/text/stream";
     const payload = {
@@ -221,30 +227,30 @@ const APIContextWrapper = ({children}) => {
     };
     return createCompletionRequest(url, payload, textCompletionSubscribers);
   }
-  
+
   function createChatCompletionRequest(prompt, model) {
     const url = "/api/inference/chat/stream";
     const payload = {prompt, model};
     return createCompletionRequest(url, payload, chatCompletionSubscribers);
   }
-  
+
   function createCompletionRequest(url, payload, subscribers) {
     pendingCompletionRequest.current = true;
     let sse_request = null;
-  
+
     function beforeUnloadHandler() {
       if (sse_request) sse_request.close();
     }
-  
+
     window.addEventListener("beforeunload", beforeUnloadHandler);
     const completionsBuffer = createCompletionsBuffer(payload.models);
     let error_occured = false;
     let request_complete = false;
-  
+
     sse_request = new SSE(url, {payload: JSON.stringify(payload)});
-  
+
     bindSSEEvents(sse_request, completionsBuffer, {error_occured, request_complete}, beforeUnloadHandler, subscribers);
-  
+
     return () => {
       if (sse_request) sse_request.close();
     };
@@ -257,32 +263,32 @@ const APIContextWrapper = ({children}) => {
     });
     return buffer;
   }
-  
+
   function bindSSEEvents(sse_request, completionsBuffer, requestState, beforeUnloadHandler, subscribers) {
     sse_request.onopen = async () => {
       bulkWrite(completionsBuffer, requestState, subscribers);
     };
-  
+
     sse_request.addEventListener("infer", (event) => {
       let resp = JSON.parse(event.data);
       completionsBuffer[resp.modelTag].push(resp);
     });
-  
+
     sse_request.addEventListener("status", (event) => {
       subscribers.current.forEach((callback) => callback({
         event: "status",
         data: JSON.parse(event.data)
       }));
     });
-  
+
     sse_request.addEventListener("error", (event) => {
       requestState.error_occured = true;
       try {
         const message = JSON.parse(event.data);
-  
+
         subscribers.current.forEach((callback) => callback({
           "event": "error",
-          "data": message.status 
+          "data": message.status
         }));
       } catch (e) {
         subscribers.current.forEach((callback) => callback({
@@ -290,19 +296,19 @@ const APIContextWrapper = ({children}) => {
           "data": "Unknown error"
         }));
       }
-  
+
       close_sse(sse_request, requestState, beforeUnloadHandler, subscribers);
     });
-  
+
     sse_request.addEventListener("abort", () => {
       requestState.error_occured = true;
       close_sse(sse_request, requestState, beforeUnloadHandler, subscribers);
     });
-  
+
     sse_request.addEventListener("readystatechange", (event) => {
       if (event.readyState === 2) close_sse(sse_request, requestState, beforeUnloadHandler, subscribers);
     });
-  
+
     sse_request.stream();
   }
 
@@ -313,27 +319,27 @@ const APIContextWrapper = ({children}) => {
       "meta": {error: requestState.error_occured},
     }));
     window.removeEventListener("beforeunload", beforeUnloadHandler);
-  }  
-  
+  }
+
   function bulkWrite(completionsBuffer, requestState, subscribers) {
     setTimeout(() => {
       let newTokens = false;
       let batchUpdate = {};
-  
+
       for (let modelTag in completionsBuffer) {
         if (completionsBuffer[modelTag].length > 0) {
           newTokens = true;
           batchUpdate[modelTag] = completionsBuffer[modelTag].splice(0, completionsBuffer[modelTag].length);
         }
       }
-  
+
       if (newTokens) {
         subscribers.current.forEach((callback) => callback({
           event: "completion",
           data: batchUpdate,
         }));
       }
-  
+
       if (!requestState.request_complete) bulkWrite(completionsBuffer, requestState, subscribers);
     }, 20);
   }
@@ -347,12 +353,11 @@ const APIContextWrapper = ({children}) => {
 
 const PlaygroundContextWrapper = ({page, children}) => {
   const apiContext = React.useContext(APIContext)
-
   const [editorContext, _setEditorContext] = React.useState(DEFAULT_CONTEXTS.PAGES[page].editor);
   const [parametersContext, _setParametersContext] = React.useState(DEFAULT_CONTEXTS.PAGES[page].parameters);
   let [modelsStateContext, _setModelsStateContext] = React.useState(DEFAULT_CONTEXTS.PAGES[page].modelsState);
   const [modelsContext, _setModelsContext] = React.useState(DEFAULT_CONTEXTS.MODELS);
-  const [historyContext, _setHistoryContext] = React.useState(DEFAULT_CONTEXTS.PAGES[page].history);
+  const [historyContext, setHistoryContext] = React.useState(DEFAULT_CONTEXTS.PAGES[page].history);
 
   /* Temporary fix for models that have been purged remotely but are still cached locally */
   for(const {name} of modelsStateContext) {
@@ -360,7 +365,7 @@ const PlaygroundContextWrapper = ({page, children}) => {
       modelsStateContext = modelsStateContext.filter(({name: _name}) => _name !== name)
     }
   }
-  
+
   const editorContextRef = React.useRef(editorContext);
   const historyContextRef = React.useRef(historyContext);
 
@@ -399,7 +404,7 @@ const PlaygroundContextWrapper = ({page, children}) => {
         break;
       }
     }
-    
+
     apiContext.Notifications.subscribe(notificationCallback)
 
     return () => {
@@ -410,9 +415,9 @@ const PlaygroundContextWrapper = ({page, children}) => {
   const updateModelsData = async () => {
     const json_params = await apiContext.Model.getAllEnabled()
     const models = {};
-    
+
     const PAGE_MODELS_STATE = SETTINGS.pages[page].modelsState;
-     
+
     for (const [model_key, modelDetails] of Object.entries(json_params)) {
       const existingModelEntry = (PAGE_MODELS_STATE.find((model) => model.name === model_key));
 
@@ -448,7 +453,7 @@ const PlaygroundContextWrapper = ({page, children}) => {
         provider: modelDetails.provider,
       }
     }
-      
+
     const SERVER_SIDE_MODELS = Object.keys(json_params);
     for (const {name} of PAGE_MODELS_STATE) {
       if (!SERVER_SIDE_MODELS.includes(name)) {
@@ -465,7 +470,7 @@ const PlaygroundContextWrapper = ({page, children}) => {
   const setEditorContext = (newEditorContext, immediate=false) => {
     SETTINGS.pages[page].editor = {...SETTINGS.pages[page].editor, ...newEditorContext};
 
-    const _editor = {...SETTINGS.pages[page].editor, internalState: null };
+    const _editor = {...SETTINGS.pages[page].editor, internalState: null};
 
     _setEditorContext(_editor);
     if (immediate) {
@@ -485,14 +490,14 @@ const PlaygroundContextWrapper = ({page, children}) => {
 
   const setModelsContext = (newModels) => {
     SETTINGS.models = newModels;
-    
+
     debouncedSettingsSave()
     _setModelsContext(newModels);
   }
 
   const setModelsStateContext = (newModelsState) => {
     SETTINGS.pages[page].modelsState = newModelsState;
-    
+
     debouncedSettingsSave()
     _setModelsStateContext(newModelsState);
   }
@@ -503,7 +508,7 @@ const PlaygroundContextWrapper = ({page, children}) => {
       show: (value === undefined || value === null) ? !SETTINGS.pages[page].history.show : value
     }
 
-    _setHistoryContext(_newHistory);
+    setHistoryContext(_newHistory);
 
     SETTINGS.pages[page].history = _newHistory;
     debouncedSettingsSave()
@@ -518,7 +523,7 @@ const PlaygroundContextWrapper = ({page, children}) => {
     const year = currentDate.getFullYear();
     const month = String(currentDate.getMonth() + 1).padStart(2, '0');
     const day = String(currentDate.getDate()).padStart(2, '0');
-    
+
     const newEntry = {
       timestamp:  currentDate.getTime(),
       date:     `${year}-${month}-${day}`,
@@ -536,7 +541,7 @@ const PlaygroundContextWrapper = ({page, children}) => {
       current: newEntry
     }
 
-    _setHistoryContext(_newHistory);
+    setHistoryContext(_newHistory);
 
     //console.warn("Adding to history", _newHistory)
     SETTINGS.pages[page].history = _newHistory;
@@ -549,7 +554,7 @@ const PlaygroundContextWrapper = ({page, children}) => {
       entries: SETTINGS.pages[page].history.entries.filter((historyEntry) => historyEntry !== entry)
     }
 
-    _setHistoryContext(_newHistory);
+    setHistoryContext(_newHistory);
 
     SETTINGS.pages[page].history = _newHistory;
     debouncedSettingsSave()
@@ -562,7 +567,7 @@ const PlaygroundContextWrapper = ({page, children}) => {
       current: null
     }
 
-    _setHistoryContext(_newHistory);
+    setHistoryContext(_newHistory);
 
     SETTINGS.pages[page].history = _newHistory;
     debouncedSettingsSave()
@@ -572,7 +577,7 @@ const PlaygroundContextWrapper = ({page, children}) => {
     SETTINGS.pages[page].history.current = entry;
     _setEditorContext(entry.editor);
 
-    _setHistoryContext(SETTINGS.pages[page].history);
+    setHistoryContext(SETTINGS.pages[page].history);
     setParametersContext(entry.parameters);
     setModelsStateContext(entry.modelsState);
   }
@@ -583,8 +588,8 @@ const PlaygroundContextWrapper = ({page, children}) => {
 
   return (
     <HistoryContext.Provider value = {{
-      historyContext, selectHistoryItem,
-      addHistoryEntry, removeHistoryEntry, clearHistory, toggleShowHistory
+      historyContext, setHistoryContext, selectHistoryItem,
+      addHistoryEntry, removeHistoryEntry, clearHistory, toggleShowHistory,
     }}>
       <EditorContext.Provider value = {{editorContext, setEditorContext}}>
         <ParametersContext.Provider value = {{parametersContext, setParametersContext}}>
@@ -626,6 +631,17 @@ function ProviderWithRoutes() {
         }
       />
 
+      <Route
+        path="/chat"
+        element={
+          <APIContextWrapper>
+            <PlaygroundContextWrapper key = "chat" page = "chat">
+              <Chat/>
+            </PlaygroundContextWrapper>
+          </APIContextWrapper>
+        }
+      />
+
       <Route
         path="/settings"
         element={
@@ -645,4 +661,4 @@ export default function App() {
       <ProviderWithRoutes />
     </BrowserRouter>
   )
-}
\ No newline at end of file
+}
diff --git a/app/src/components/chat/avatar.tsx b/app/src/components/chat/avatar.tsx
new file mode 100644
index 0000000..c8985fe
--- /dev/null
+++ b/app/src/components/chat/avatar.tsx
@@ -0,0 +1,19 @@
+import { FC } from "react"
+
+interface Props {
+  name: string
+}
+
+const Avatar: FC<Props> = ({name}) => {
+  const colors = ["pink", "purple", "red", "yellow", "blue", "gray", "green", "indigo"];
+  const hashCode = (s:string) => s.split('').reduce((a,b) => (((a << 5) - a) + b.charCodeAt(0))|0, 0);
+  const color = colors[hashCode(name) % colors.length];
+  return (
+    <div
+      className={`bg-${color}-500 rounded h-8 w-8 flex-shrink-0`}
+      title={name}
+    />
+  )
+}
+
+export default Avatar
diff --git a/app/src/components/chat/message-composer.tsx b/app/src/components/chat/message-composer.tsx
new file mode 100644
index 0000000..d59b380
--- /dev/null
+++ b/app/src/components/chat/message-composer.tsx
@@ -0,0 +1,45 @@
+import { FC, useState } from "react"
+import { useHotkeys } from "react-hotkeys-hook"
+
+interface Props {
+  onSubmit: (content: string) => void
+  onCancel: () => void
+  disabled: boolean
+}
+
+const MessageComposer: FC<Props> = ({ onSubmit, onCancel, disabled }) => {
+  const [newMessage, setNewMessage] = useState("")
+
+  function handleSubmit() {
+    if (!newMessage) return
+    onSubmit(newMessage)
+    setNewMessage("")
+  }
+
+  const hotkeyOptions = { preventDefault: true, enableOnFormTags: true }
+  useHotkeys("enter", handleSubmit, hotkeyOptions)
+  useHotkeys("esc, ctrl+c", onCancel, hotkeyOptions)
+
+  const height = 24 * (newMessage.split("\n").length + 1)
+  const style = {
+    minHeight: "50px",
+    maxHeight: "200px",
+    height: `${height}px`,
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="p-4">
+      <textarea
+        className="block border rounded p-3 w-full shadow-md"
+        style={style}
+        onChange={(evt) => setNewMessage(evt.target.value)}
+        placeholder="Send a message..."
+        value={newMessage}
+        rows={1}
+        disabled={disabled}
+      />
+    </form>
+  )
+}
+
+export default MessageComposer
diff --git a/app/src/components/chat/message.tsx b/app/src/components/chat/message.tsx
new file mode 100644
index 0000000..6f70057
--- /dev/null
+++ b/app/src/components/chat/message.tsx
@@ -0,0 +1,22 @@
+import { FC } from "react"
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+import { IMessage } from "../../pages/chat"
+import Avatar from "./avatar"
+
+interface Props {
+  message: IMessage
+}
+
+const Message: FC<Props> = ({ message }) => {
+  return (
+    <div className="flex gap-4">
+      <Avatar name={message.author}/>
+      <div className="prose">
+        <ReactMarkdown children={message.content} remarkPlugins={[remarkGfm]} />
+      </div>
+    </div>
+  )
+}
+
+export default Message
diff --git a/app/src/components/chat/scroll-container.tsx b/app/src/components/chat/scroll-container.tsx
new file mode 100644
index 0000000..304eb7e
--- /dev/null
+++ b/app/src/components/chat/scroll-container.tsx
@@ -0,0 +1,34 @@
+import { FC, ReactNode, useEffect, useRef, useState } from "react"
+
+const ScrollContainer: FC<{ children: ReactNode }> = ({ children }) => {
+  const outerRef = useRef<HTMLDivElement>(null)
+  const innerRef = useRef<HTMLDivElement>(null)
+
+  const prevRender = useRef(false)
+
+  useEffect(() => {
+    const outerHeight = outerRef.current!.clientHeight
+    const innerHeight = innerRef.current!.clientHeight
+
+    outerRef.current!.scrollTo({
+      top: innerHeight - outerHeight,
+      left: 0,
+      behavior: prevRender.current ? "smooth" : "auto",
+    })
+
+    prevRender.current = true
+  }, [children])
+
+  return (
+    <div
+      className="relative h-full overflow-scroll overscroll-contain"
+      ref={outerRef}
+    >
+      <div className="relative" ref={innerRef}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default ScrollContainer
diff --git a/app/src/components/navbar.tsx b/app/src/components/navbar.tsx
index c6a41dc..458cd97 100644
--- a/app/src/components/navbar.tsx
+++ b/app/src/components/navbar.tsx
@@ -2,7 +2,7 @@ import React from "react"
 import { Link } from "react-router-dom"
 
 export default function NavBar({ tab, children }: any) {
-  const menu = ["playground", "compare", "settings"].map((menuName, index) => (
+  const menu = ["playground", "compare", "chat", "settings"].map((menuName, index) => (
     <div key = {menuName} className="align-middle mt-1 flex items-center">
       <Link
         to={`/${index > 0 ? menuName: ''}`}
diff --git a/app/src/components/ui/alert-dialog.tsx b/app/src/components/ui/alert-dialog.tsx
index 63c2420..20c4e56 100644
--- a/app/src/components/ui/alert-dialog.tsx
+++ b/app/src/components/ui/alert-dialog.tsx
@@ -143,6 +143,40 @@ const AlertDialogCancel = React.forwardRef<
 ))
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
 
+const CustomAlertDialogue = ({ dialog }) => {
+  const [openDialog, setOpenDialog] = React.useState<boolean>(false)
+  const [_dialogue, _setDialogue] = React.useState<any>({
+    title: "",
+    message: "",
+  })
+
+  React.useEffect(() => {
+    if (!openDialog && dialog.title !== "" && dialog.message !== "") {
+      _setDialogue({
+        title: dialog.title,
+        message: dialog.message,
+      })
+      setOpenDialog(true)
+    }
+  }, [dialog])
+
+  return (
+    <AlertDialog open={openDialog} onOpenChange={setOpenDialog}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{_dialogue.title}</AlertDialogTitle>
+          <AlertDialogDescription className="text-base text-slate-700 dark:text-slate-400">
+            {_dialogue.message}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogAction>Ok</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+
 export {
   AlertDialog,
   AlertDialogTrigger,
@@ -153,4 +187,5 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
+  CustomAlertDialogue,
 }
diff --git a/app/src/components/ui/history-side-panel.tsx b/app/src/components/ui/history-side-panel.tsx
new file mode 100644
index 0000000..db9cebb
--- /dev/null
+++ b/app/src/components/ui/history-side-panel.tsx
@@ -0,0 +1,203 @@
+import React, { useContext } from "react"
+import { Button } from "../../components/ui/button"
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
+import { X } from "lucide-react"
+import {HistoryContext} from "../../app"
+import { useHotkeys } from 'react-hotkeys-hook'
+
+
+export default function HistorySidePanel() {
+  const {
+    historyContext, toggleShowHistory, clearHistory, selectHistoryItem
+  } = useContext(HistoryContext);
+
+  const hotkeyOptions = {preventDefault: true, enableOnFormTags: true}
+  useHotkeys("meta+h", () => toggleShowHistory(), hotkeyOptions)
+
+  const handleDeleteAllHistory = () => {
+    clearHistory()
+  }
+
+  if (!historyContext.show) return null;
+
+  const downloadHistory = () => {
+    const element = document.createElement("a")
+    const history_json = historyContext.entries.map((entry: any) => {
+      const model = entry.modelsState.find(({selected}) => selected)
+      const text = EditorState.createWithContent(convertFromRaw(entry.editor.internalState)).getCurrentContent().getPlainText()
+      return {
+        model: model.name,
+        date: entry.date,
+        timestamp: entry.timestamp,
+        text: text,
+        parameters: entry.parameters
+      }
+    })
+
+    const file = new Blob([JSON.stringify(history_json)], {
+      type: "application/json",
+    })
+    element.href = URL.createObjectURL(file)
+    element.download = "history.json"
+    document.body.appendChild(element) // Required for this to work in FireFox
+    element.click()
+  }
+  return (
+      <div className="flex flex-col h-full relative overflow-auto">
+        <div
+          className="text-lg tracking-tight font-semibold text-slate-900 flex sticky top-[0] right-[0]"
+          style={{ justifyContent: "flex-end" }}
+        >
+          <div>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild>
+              <Button
+                type="button"
+                variant="subtle"
+                className="inline-flex text-sm font-medium outline-0"
+                onClick={(e) => {
+                  setShowHistory((e) => !e)
+                }}
+                disabled={history.length == 0}
+              >
+                ...
+              </Button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Portal>
+              <DropdownMenu.Content
+                className="outline-0 cursor-default min-w-[150px] bg-white rounded-md shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade z-10"
+                sideOffset={5}
+              >
+                <DropdownMenu.Item
+                  className="cursor-pointer outline-0 hover:bg-slate-200 text-sm p-2 text-center"
+                  onClick={() => {
+                    downloadHistory()
+                  }}
+                  >
+                  Download as JSON
+                </DropdownMenu.Item>
+                <DropdownMenu.Separator className="h-[1px] bg-slate-200" />
+                <DropdownMenu.Item
+                  className="cursor-pointer outline-0 hover:bg-slate-200 text-sm p-2 text-center"
+                  onClick={() => {
+                    handleDeleteAllHistory()
+                  }}
+                >
+                  Clear History
+                </DropdownMenu.Item>
+                <DropdownMenu.Arrow className="fill-white" />
+              </DropdownMenu.Content>
+            </DropdownMenu.Portal>
+            </DropdownMenu.Root>
+          </div>
+
+          <div className="cursor-pointer inline m-2 align-middle lg:inline align-middle mb-1" style = {{height: 20, width: 20}}>
+            <X
+              size={20}
+              onClick={(e) => {
+                toggleShowHistory()
+              }}
+            />
+          </div>
+        </div>
+
+        <div className="overflow-y-auto max-h-[100%] mt-2">
+          {historyContext.entries
+              .reduce((accumulator: any, value: any) => {
+                let val = value.date
+                if (!accumulator.includes(val)) {
+                  accumulator.push(val)
+                }
+                return accumulator.sort((a, b) => (new Date(b) - new Date(a)))
+              }, [])
+              .map((unique_date: any, main_index) => {
+
+                return (
+                  <div key = {unique_date}>
+                    <div className="text-xs tracking-tight mb-4 mt-2 font-semibold uppercase text-slate-900">
+                      {new Date(unique_date).toLocaleDateString(
+                        ["en-GB", "en-us"],
+                        {
+                          weekday: "long",
+                          year: "numeric",
+                          month: "short",
+                          day: "numeric",
+                        }
+                      )}
+                    </div>
+                    {historyContext.entries
+                      .filter((value: any) => (value.date === unique_date))
+                      .sort((a: any, b: any) => (new Date(b.timestamp) - new Date(a.timestamp)))
+                      .map((historyItem: any, index: number) => {
+                        const isSelectedHistoryItem = historyContext?.current?.timestamp === historyItem.timestamp && historyContext?.current?.editor.prompt === historyItem.editor.prompt;
+
+                        return (
+                          <div key={historyItem.timestamp}>
+                            <div
+                              onClick={() => {
+                                selectHistoryItem(historyItem)
+                              }}
+                              className={`[&>div:nth-child(2)]:hover:w-[7px]
+                              [&>div:nth-child(2)]:hover:h-[7px]
+                              [&>div:nth-child(2)]:hover:left-[77px]
+                              [&>div:nth-child(2)]:hover:border-slate-800
+                              [&>div:nth-child(2)]:hover:border-2
+                              rounded-sm rounded-sm relative flex flex-row p-4 font-bold text-sm cursor-pointer click:bg-slate-300 dark:hover:bg-slate-200  ${
+                                isSelectedHistoryItem
+                                  ? "bg-slate-200"
+                                  : "hover:bg-slate-100"
+                              }`}
+                            >
+                              <div
+                                className={`bg-slate-300 w-[1px] absolute left-[80px] ${
+                                  main_index === 0 && index === 0
+                                    ? "h-[75%] top-[25%]"
+                                    : "h-[100%] top-[0]"
+                                }`}
+                              />
+                              <div
+                                className={`ease-in duration-100 border rounded-full bg-white absolute top-[22px] ${
+                                  isSelectedHistoryItem
+                                    ? "border-slate-800 w-[7px] h-[7px] border-2 left-[77px]"
+                                    : "border-slate-500 w-[5px] h-[5px] left-[78px] "
+                                }
+                              `}
+                              />
+                              <div className="text-xs pl-4 pr-10">
+                                {main_index === 0 && index === 0 ? (
+                                  <span style = {{marginRight: 6}}>Now</span>
+                                ) : (
+                                  new Date(historyItem.timestamp)
+                                    .toTimeString()
+                                    .split(":")
+                                    .slice(0, 2)
+                                    .join(":")
+                                )}
+                              </div>
+                              <div className="text-xs overflow-hidden ">
+                                <p className="truncate tracking-wide">
+                                  {main_index === 0 && index === 0
+                                    ? "Current"
+                                    : historyItem.editor.prompt}
+                                </p>
+                                <div
+                                  className="mt font-medium"
+                                  style={{
+                                    whiteSpace: "nowrap",
+                                    overflow: "hidden",
+                                  }}
+                                >
+                                  {historyItem.modelsState.find(({selected})=> selected).name}
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        )
+                      })}
+                  </div>
+                )
+              })}
+        </div>
+      </div>
+  )
+}
diff --git a/app/src/pages/chat.tsx b/app/src/pages/chat.tsx
new file mode 100644
index 0000000..70c1b41
--- /dev/null
+++ b/app/src/pages/chat.tsx
@@ -0,0 +1,168 @@
+import React, { useContext, useEffect, useRef, useState } from "react"
+import Message from "../components/chat/message"
+import MessageComposer from "../components/chat/message-composer"
+import ScrollContainer from "../components/chat/scroll-container"
+import NavBar from "../components/navbar"
+import ParameterSidePanel from "../components/parameters-side-panel"
+import {
+  APIContext,
+  EditorContext,
+  ModelsStateContext,
+  HistoryContext,
+} from "../app"
+import HistorySidePanel from "../components/ui/history-side-panel"
+import { CustomAlertDialogue } from "../components/ui/alert-dialog"
+
+export interface IMessage {
+  author: string
+  content: string
+}
+
+const parameterSidebar = (
+  <ParameterSidePanel showModelDropdown={true} showModelList={false} />
+)
+
+const initialMessages = [] as IMessage[]
+
+export default function Chat() {
+  const {
+    historyContext,
+    setHistoryContext,
+    addHistoryEntry,
+    toggleShowHistory,
+  } = useContext(HistoryContext)
+  const [_, signalRender] = React.useState(0)
+  const { modelsStateContext } = useContext(ModelsStateContext)
+  const apiContext = useContext(APIContext)
+  const [generating, setGenerating] = useState(false)
+  const cancel_callback = useRef(null)
+  const [dialog, showDialog] = React.useState({
+    title: "",
+    message: "",
+  })
+
+  useEffect(() => {
+    historyContext.current = null
+  }, [])
+
+  const handleStreamingSubmit = async (content) => {
+    setGenerating(true)
+    const _cancel_callback = apiContext.Inference.textCompletionRequest({
+      prompt: content,
+      models: modelsStateContext.filter((modelState => modelState.selected))
+    })
+    cancel_callback.current = _cancel_callback
+  }
+
+  const handleSubmit = async (content) => {
+    if (historyContext.current == null) {
+      addHistoryEntry([{ author: "me", content }])
+      return handleStreamingSubmit(content)
+    } else {
+      const newMessages = [...historyContext.current.editor.internalState, { author: "me", content }]
+      historyContext.current.editor.internalState = newMessages
+      setHistoryContext(historyContext)
+      const promptContent = newMessages.map((m) => m.content).join("\n")
+      return handleStreamingSubmit(promptContent)
+    }
+  }
+
+  const abortCompletion = () => {
+    if (cancel_callback.current) {
+      cancel_callback.current()
+    }
+  }
+
+  useEffect(() => {
+    const completionCallback = ({ event, data, meta }) => {
+      if (event == "cancel") {
+        setGenerating(false)
+      } else if (event == "close") {
+        setGenerating(false)
+      } else if (event == "completion") {
+        setHistoryContext((history) => {
+          const completions = Object.values(data)[0]
+          const completion = completions.map((c) => c.message).join("")
+          history.current.editor.internalState.at(-1).content += completion
+          return history
+        })
+        signalRender((x) => x + 1)
+      } else if (event == "status") {
+        const { message, modelName, modelProvider, modelTag } = data
+        if (message === "[INITIALIZING]") {
+          setHistoryContext((history) => {
+            history.current.editor.internalState.push({ author: modelName, content: "" })
+            return history
+          })
+        } else if (message.startsWith("[ERROR]")) {
+          showDialog({
+            title: "Model Error",
+            message: message.replace("[ERROR] ", ""),
+          })
+        }
+      } else if (event == "error") {
+        if (data == "Too many pending requests")
+          showDialog({
+            title: "Too many pending requests",
+            message: "Please wait a few seconds before trying again.",
+          })
+        else if (data == "Too many daily completions")
+          showDialog({
+            title: "Daily limit reached",
+            message:
+              "It seems you've reached your daily limit of completions. Please try again tomorrow.",
+          })
+        else if (data == "Unauthorized")
+          showDialog({
+            title: "Unauthorized",
+            message: "Please log in to use this feature.",
+          })
+        else {
+          showDialog({
+            title: "Error",
+            message: data,
+          })
+        }
+      } else {
+        console.log("Unknown event", event, data)
+      }
+    }
+    apiContext.Inference.subscribeTextCompletion(completionCallback)
+    return () => {
+      apiContext.Inference.unsubscribeTextCompletion(completionCallback)
+    }
+  }, [])
+  const messages = historyContext.current?.editor?.internalState || []
+  return (
+    <div className="flex flex-col h-full">
+      <NavBar tab="chat" />
+      <div className="flex flex-grow flex-col font-display min-h-0 min-w-0 ml-5">
+        <CustomAlertDialogue dialog={dialog} />
+        <div className="flex flex-row space-x-4 flex-grow mr-5 min-h-0 min-w-0">
+          <div className="hidden p-1 grow-0 shrink-0 basis-auto lg:w-[250px] overflow-auto lg:block">
+            <HistorySidePanel />
+          </div>
+          <div className="flex flex-col grow basis-auto max-w-3xl mx-auto">
+            <ScrollContainer>
+              {messages.map((message, index) => (
+                <div className="p-4" key={index}>
+                  <div>
+                    <Message message={message} />
+                  </div>
+                </div>
+              ))}
+            </ScrollContainer>
+            <MessageComposer
+              onSubmit={handleSubmit}
+              onCancel={abortCompletion}
+              disabled={generating}
+            />
+          </div>
+          <div className="hidden p-1 grow-0 shrink-0 basis-auto lg:w-[250px] overflow-auto lg:block">
+            {parameterSidebar}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx
index 61ea651..564406a 100644
--- a/app/src/pages/index.tsx
+++ b/app/src/pages/index.tsx
@@ -1,5 +1,6 @@
 import Playground from "./playground"
 import Compare from "./compare"
+import Chat from "./chat"
 import Settings from "./settings"
 
-export { Playground, Compare, Settings };
\ No newline at end of file
+export { Playground, Compare, Chat, Settings };
\ No newline at end of file
diff --git a/app/src/pages/playground.tsx b/app/src/pages/playground.tsx
index a6ed060..546efff 100755
--- a/app/src/pages/playground.tsx
+++ b/app/src/pages/playground.tsx
@@ -15,7 +15,6 @@ import {
 } from "draft-js"
 import { Button } from "../components/ui/button"
 import NavBar from "../components/navbar"
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
 import {
   X,
   HistoryIcon,
@@ -37,7 +36,9 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
+  CustomAlertDialogue,
 } from "../components/ui/alert-dialog"
+import HistorySidePanel from "../components/ui/history-side-panel"
 import { useMetaKeyPress } from "../lib/meta-keypress"
 import { useKeyPress } from "../lib/keypress"
 import "draft-js/dist/Draft.css"
@@ -49,199 +50,7 @@ import { APIContext, EditorContext, ModelsStateContext, ParametersContext, Histo
 import ParameterSidePanel from "../components/parameters-side-panel"
 import { TooltipProvider } from "@radix-ui/react-tooltip"
 
-const HistorySidePanel = () => {
-  const {
-    historyContext, toggleShowHistory, clearHistory, selectHistoryItem
-  } = useContext(HistoryContext)
-
-  const handleDeleteAllHistory = () => {
-    clearHistory()
-  }
-
-  if (!historyContext.show) return null;
-
-  const downloadHistory = () => {
-    const element = document.createElement("a")
-    const history_json = historyContext.entries.map((entry: any) => {
-      const model = entry.modelsState.find(({selected}) => selected)
-      const text = EditorState.createWithContent(convertFromRaw(entry.editor.internalState)).getCurrentContent().getPlainText()
-      return {
-        model: model.name,
-        date: entry.date,
-        timestamp: entry.timestamp,
-        text: text,
-        parameters: entry.parameters
-      }
-    })
-
-    const file = new Blob([JSON.stringify(history_json)], {
-      type: "application/json",
-    })
-    element.href = URL.createObjectURL(file)
-    element.download = "history.json"
-    document.body.appendChild(element) // Required for this to work in FireFox
-    element.click()
-  }
-  return (
-      <div className="flex flex-col h-full relative overflow-auto">
-        <div
-          className="text-lg tracking-tight font-semibold text-slate-900 flex sticky top-[0] right-[0]"
-          style={{ justifyContent: "flex-end" }}
-        >
-          <div>
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger asChild>
-              <Button
-                type="button"
-                variant="subtle"
-                className="inline-flex text-sm font-medium outline-0"
-                onClick={(e) => {
-                  setShowHistory((e) => !e)
-                }}
-                disabled={history.length == 0}
-              >
-                ...
-              </Button>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Portal>
-              <DropdownMenu.Content
-                className="outline-0 cursor-default min-w-[150px] bg-white rounded-md shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade z-10"
-                sideOffset={5}
-              >
-                <DropdownMenu.Item
-                  className="cursor-pointer outline-0 hover:bg-slate-200 text-sm p-2 text-center"
-                  onClick={() => {
-                    downloadHistory()
-                  }}
-                  >
-                  Download as JSON
-                </DropdownMenu.Item>
-                <DropdownMenu.Separator className="h-[1px] bg-slate-200" />
-                <DropdownMenu.Item
-                  className="cursor-pointer outline-0 hover:bg-slate-200 text-sm p-2 text-center"
-                  onClick={() => {
-                    handleDeleteAllHistory()
-                  }}
-                >
-                  Clear History
-                </DropdownMenu.Item>
-                <DropdownMenu.Arrow className="fill-white" />
-              </DropdownMenu.Content>
-            </DropdownMenu.Portal>
-            </DropdownMenu.Root>
-          </div>
 
-          <div className="cursor-pointer inline m-2 align-middle lg:inline align-middle mb-1" style = {{height: 20, width: 20}}>
-            <X
-              size={20}
-              onClick={(e) => {
-                toggleShowHistory()
-              }}
-            />
-          </div>
-        </div>
-      
-        <div className="overflow-y-auto max-h-[100%] mt-2">
-          {historyContext.entries
-              .reduce((accumulator: any, value: any) => {
-                let val = value.date 
-                if (!accumulator.includes(val)) {
-                  accumulator.push(val)
-                }
-                return accumulator.sort((a, b) => (new Date(b) - new Date(a)))
-              }, [])
-              .map((unique_date: any, main_index) => {
-                
-                return (
-                  <div key = {unique_date}>
-                    <div className="text-xs tracking-tight mb-4 mt-2 font-semibold uppercase text-slate-900">
-                      {new Date(unique_date).toLocaleDateString(
-                        ["en-GB", "en-us"],
-                        {
-                          weekday: "long",
-                          year: "numeric",
-                          month: "short",
-                          day: "numeric",
-                        }
-                      )}
-                    </div>
-                    {historyContext.entries
-                      .filter((value: any) => (value.date === unique_date))
-                      .sort((a: any, b: any) => (new Date(b.timestamp) - new Date(a.timestamp)))
-                      .map((historyItem: any, index: number) => {
-                        const isSelectedHistoryItem = historyContext.current.timestamp === historyItem.timestamp && historyContext.current.editor.prompt === historyItem.editor.prompt;
-
-                        return (
-                          <div key={historyItem.timestamp}>
-                            <div
-                              onClick={() => {
-                                selectHistoryItem(historyItem)
-                              }}
-                              className={`[&>div:nth-child(2)]:hover:w-[7px]
-                              [&>div:nth-child(2)]:hover:h-[7px]
-                              [&>div:nth-child(2)]:hover:left-[77px]
-                              [&>div:nth-child(2)]:hover:border-slate-800
-                              [&>div:nth-child(2)]:hover:border-2
-                              rounded-sm rounded-sm relative flex flex-row p-4 font-bold text-sm cursor-pointer click:bg-slate-300 dark:hover:bg-slate-200  ${
-                                isSelectedHistoryItem
-                                  ? "bg-slate-200"
-                                  : "hover:bg-slate-100"
-                              }`}
-                            >
-                              <div
-                                className={`bg-slate-300 w-[1px] absolute left-[80px] ${
-                                  main_index === 0 && index === 0
-                                    ? "h-[75%] top-[25%]"
-                                    : "h-[100%] top-[0]"
-                                }`}
-                              />
-                              <div
-                                className={`ease-in duration-100 border rounded-full bg-white absolute top-[22px] ${
-                                  isSelectedHistoryItem
-                                    ? "border-slate-800 w-[7px] h-[7px] border-2 left-[77px]"
-                                    : "border-slate-500 w-[5px] h-[5px] left-[78px] "
-                                }
-                              `}
-                              />
-                              <div className="text-xs pl-4 pr-10">
-                                {main_index === 0 && index === 0 ? (
-                                  <span style = {{marginRight: 6}}>Now</span>
-                                ) : (
-                                  new Date(historyItem.timestamp)
-                                    .toTimeString()
-                                    .split(":")
-                                    .slice(0, 2)
-                                    .join(":")
-                                )}
-                              </div>
-                              <div className="text-xs overflow-hidden ">
-                                <p className="truncate tracking-wide">
-                                  {main_index === 0 && index === 0
-                                    ? "Current"
-                                    : historyItem.editor.prompt}
-                                </p>
-                                <div
-                                  className="mt font-medium"
-                                  style={{
-                                    whiteSpace: "nowrap",
-                                    overflow: "hidden",
-                                  }}
-                                >
-                                  {historyItem.modelsState.find(({selected})=> selected).name}
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        )
-                      })}
-                  </div>
-                )
-              })}
-        </div>
-      </div>
- 
-  )
-}
 
 class EditorWrapper extends React.Component {
   componentDidCatch() {
@@ -373,8 +182,7 @@ const PromptCompletionEditor = ({showDialog}) => {
         case "close":
           if (!meta.error)
             addHistoryEntry(convertToRaw(editorStateRef.current.getCurrentContent()))
-          
-            
+
           setEditorContext({
             prompt: editorStateRef.current.getCurrentContent().getPlainText(),
             internalState: convertToRaw(editorStateRef.current.getCurrentContent()),
@@ -435,7 +243,7 @@ const PromptCompletionEditor = ({showDialog}) => {
         break;
       }
     }
-    
+
     apiContext.Inference.subscribeTextCompletion(completionCallback)
 
     return () => {
@@ -497,7 +305,7 @@ const PromptCompletionEditor = ({showDialog}) => {
           {children}
         </span>
       )
- 
+
       if (probabilitiesMap && (tokensMap[props.decoratedText] != undefined && tokensMap[props.decoratedText].length > 0)) {
         let percentage = Math.min(tokensMap[props.decoratedText][1] / probabilitiesMap.simpleProbSum, 1.0)
         let f = chroma.scale(["#ff8886", "ffff00", "#96f29b"])
@@ -508,7 +316,7 @@ const PromptCompletionEditor = ({showDialog}) => {
           padding: "2px 0",
         } : style
 
-        let popoverContent = 
+        let popoverContent =
         (
           <div className="shadow-xl shadow-inner rounded-sm bg-white mb-2" data-container="body">
             <ul key={children[0].key} className="grid pt-4">
@@ -529,8 +337,8 @@ const PromptCompletionEditor = ({showDialog}) => {
           </div>
         )
         content = (
-          <Popover 
-            isOpen={popoverOpen} 
+          <Popover
+            isOpen={popoverOpen}
             onClickOutside={() => setPopoverOpen(false)}
             positions={["bottom", "top", "left", "right"]}
             content={popoverContent}
@@ -585,7 +393,7 @@ const PromptCompletionEditor = ({showDialog}) => {
   )
 
   const editorStateRef = useRef<EditorState>(editorState)
-  
+
   useEffect(() => {
     editorStateRef.current = editorState;
   }, [editorState]);
@@ -658,13 +466,13 @@ const PromptCompletionEditor = ({showDialog}) => {
     if (status.message && status.message.indexOf("[QUEUE] ") === 0) {
       toast({
         title: "Inference request queued",
-        description: "We're currently experiencing high load, your compeletion request is in a queue and will be compeleted shortly"
+        description: "We're currently experiencing high load, your completion request is in a queue and will be completed shortly"
       })
       return
-    } 
+    }
     if (status.message && status.message.indexOf("[ERROR] ") === 0) {
       showDialog({
-        title: "An error occured!",
+        title: "An error occurred!",
         description: status.message.replace("[ERROR] ", "")
       })
       return
@@ -686,7 +494,7 @@ const PromptCompletionEditor = ({showDialog}) => {
       previousInternalState: null,
     })
   }
-  
+
   return (
     <form
       onSubmit={(e) => {
@@ -706,7 +514,7 @@ const PromptCompletionEditor = ({showDialog}) => {
           resetEditorState = {resetEditorState}
         />
       </div>
-    
+
       <div className="flex space-x-2 mb-8">
         {generating && (
           <TooltipProvider>
@@ -822,7 +630,7 @@ const PromptCompletionEditor = ({showDialog}) => {
               <Button
                 type="button"
                 variant="subtle"
-                className="inline-flex items-center mt-4 text-sm font-medium text-center"  
+                className="inline-flex items-center mt-4 text-sm font-medium text-center"
                 onClick={(e) => {
                   e.stopPropagation()
                   handleUndoLast()
@@ -832,7 +640,7 @@ const PromptCompletionEditor = ({showDialog}) => {
               >
                 Regenerate
               </Button>
-              </div> 
+              </div>
             </TooltipTrigger>
             <TooltipContent
               side="top"
@@ -890,39 +698,6 @@ const PromptCompletionEditor = ({showDialog}) => {
   )
 }
 
-const CustomAlertDialogue = ({dialog}) => {
-  const [openDialog, setOpenDialog] = React.useState<boolean>(false)
-  const [_dialogue, _setDialogue] = React.useState<any>({
-    title: "",
-    message: ""
-  })
-
-  useEffect(() => {
-    if (!openDialog && dialog.title !== "" && dialog.message !== "") {
-      _setDialogue({
-        title: dialog.title,
-        message: dialog.message
-      })
-      setOpenDialog(true)
-    }
-  }, [dialog])
-
-  return (
-    <AlertDialog open={openDialog} onOpenChange={setOpenDialog}>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>{_dialogue.title}</AlertDialogTitle>
-          <AlertDialogDescription className="text-base text-slate-700 dark:text-slate-400">
-            {_dialogue.message}
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogAction>Ok</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-    )
-}
 export default function Playground() {
   const apiContext = useContext(APIContext)
   const {historyContext, toggleShowHistory} = useContext(HistoryContext)
@@ -975,7 +750,7 @@ export default function Playground() {
       <SheetContent className="w-[80vw]">{historySidebar}</SheetContent>
     </Sheet>
   )
- 
+
   return (
     <div className="flex flex-col h-full">
       <NavBar tab="playground">
@@ -1024,9 +799,9 @@ export default function Playground() {
             </div>) : null
           }
           <PromptCompletionEditor showDialog = {showDialog}/>
-            <div className="hidden p-1 grow-0 shrink-0 basis-auto lg:w-[250px] overflow-auto lg:block">
-              {parameterSidebar}
-            </div>
+          <div className="hidden p-1 grow-0 shrink-0 basis-auto lg:w-[250px] overflow-auto lg:block">
+            {parameterSidebar}
+          </div>
         </div>
       </div>
     </div>
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
index a7fdb81..357fbb4 100755
--- a/app/tailwind.config.js
+++ b/app/tailwind.config.js
@@ -7,14 +7,14 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        'highlight-tokens': '#ff395ad1',
+        "highlight-tokens": "#ff395ad1",
       },
       screens: {
-        '3xl': '1792px',
-        '4xl': '2048px',
-        '5xl': '2748px',
-        '6xl': '3448px',
-        '8xl': '4000px'
+        "3xl": "1792px",
+        "4xl": "2048px",
+        "5xl": "2748px",
+        "6xl": "3448px",
+        "8xl": "4000px",
       },
       fontFamily: {
         sans: ["var(--font-sans)", ...fontFamily.sans],
@@ -36,5 +36,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 }
diff --git a/server/app.py b/server/app.py
index 3804504..4e1f27d 100755
--- a/server/app.py
+++ b/server/app.py
@@ -91,7 +91,7 @@ def run(self):
             current_shard = 0
             total_shards = 0
             last_line = 0
-   
+
             while not self._stop_event.is_set():
                 try:
                     lines = output_buffer.getvalue().splitlines()[last_line:]
@@ -210,7 +210,7 @@ def __initialization_check__(self):
         # TODO: In the future it might make sense to have local provider specific instances
         cache_info = scan_cache_dir()
         hugging_face_local = self.storage.get_provider("huggingface-local")
- 
+
         for repo_info in cache_info.repos:
             repo_id = repo_info.repo_id
             repo_type = repo_info.repo_type
@@ -236,7 +236,7 @@ def __initialization_check__(self):
     def __model_added_callback__(self, model_name, model):
         if model.status == 'pending':
             self.model_queue.put(model)
-     
+
     def __download_loop__(self):
         while True:
             try:
@@ -258,7 +258,7 @@ def __download_loop__(self):
 
                     monitor_thread.stop()
                     monitor_thread.join()
-                    
+
                     logger.info("Finished downloading model", model.name)
             except queue.Empty:
                 time.sleep(1)
@@ -284,7 +284,7 @@ def __init__(self, storage):
 
     def get_storage(self):
         return self.storage
-    
+
     def get_sse_manager(self):
         return self.sse_manager
 
@@ -292,7 +292,7 @@ def text_generation(self, inference_request: InferenceRequest):
         provider = self.storage.get_provider(inference_request.model_provider)
 
         provider_details = ProviderDetails(
-            api_key=provider.api_key ,
+            api_key=provider.api_key,
             version_key=None
         )
         logger.info(f"Received inference request {inference_request.model_provider}")
@@ -315,7 +315,7 @@ def text_generation(self, inference_request: InferenceRequest):
             raise Exception(
                 f"Unknown model provider, {inference_request.model_provider}. Please add a generation function in InferenceManager or route in ModelManager.text_generation"
             )
-    
+
     def get_announcer(self):
         return self.inference_manager.get_announcer()
 
@@ -400,4 +400,4 @@ def export_config(ctx, output):
     app.static_folder='../app/dist'
     run()
 else:
-    app.static_folder='./static'
\ No newline at end of file
+    app.static_folder='./static'