diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index d6c9537..9629532 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -10,9 +10,6 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
   },
 }
diff --git a/.github/workflows/deploy_to_gh_pages.yml b/.github/workflows/deploy_to_gh_pages.yml
index 2a6f500..44a7c6c 100644
--- a/.github/workflows/deploy_to_gh_pages.yml
+++ b/.github/workflows/deploy_to_gh_pages.yml
@@ -48,4 +48,4 @@ jobs:
           path: './dist'
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
\ No newline at end of file
+        uses: actions/deploy-pages@v2
diff --git a/.prettierrc b/.prettierrc
index 251f9c1..110c98c 100755
--- a/.prettierrc
+++ b/.prettierrc
@@ -7,5 +7,6 @@
   "bracketSpacing": true,
   "bracketSameLine": false,
   "arrowParens": "avoid",
-  "printWidth": 100
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/README.md b/README.md
index d542e7f..ce37372 100644
--- a/README.md
+++ b/README.md
@@ -2,41 +2,42 @@
 
 ![LLM X logo](https://raw.githubusercontent.com/mrdjohnson/llm-X/main/public/LLMX.png)
 
-***What is this?***
+**_What is this?_**
 Chat GPT style UI for the niche group of folks who run [Ollama](https://ollama.com/) (think of this like an offline chat gpt) locally. Supports sending images and text!
 **WORKS OFFLINE** through PWA ([Progressive Web App](https://web.dev/explore/progressive-web-apps)) standards (its not dead!)
 
-***Why do this?***
+**_Why do this?_**
 I have been interested in **LLM UI** for a while now and this seemed like a good intro application.
-I've been introduced to a lot of modern technologies thanks to this project as well, its been fun! 
+I've been introduced to a lot of modern technologies thanks to this project as well, its been fun!
 
-***Why so many buzz words?***
-I couldn't help but bee cool 😎 
+**_Why so many buzz words?_**
+I couldn't help but bee cool 😎
+
+## Tech Stack (thank you's):
+
+**_Logic helpers:_**
 
-  
-  ## Tech Stack (thank you's):
-***Logic helpers:***
 - [React](https://react.dev/)
 - [Typescript](https://www.typescriptlang.org/)
 - [Mobx State Tree](https://mobx-state-tree.js.org/intro/welcome)
 
-***UI Helpers:***
+**_UI Helpers:_**
+
 - [Tailwind css](https://tailwindcss.com/)
 - [DaisyUI](https://daisyui.com/)
 - [Highlight.js](https://www.npmjs.com/package/highlight.js)
 - [React Markdown](https://www.npmjs.com/package/react-markdown)
 
-***Project setup helpers:***
+**_Project setup helpers:_**
+
 - [Vite](https://vitejs.dev/)
 - [Vite PWA plugin](https://vite-pwa-org.netlify.app/)
 
-
-***Inspiration:***
- [ollama-ui's](https://github.com/ollama-ui/ollama-ui) project. Which allows users to connect to ollama via a [web app](https://ollama-ui.github.io/ollama-ui/)
+**_Inspiration:_**
+[ollama-ui's](https://github.com/ollama-ui/ollama-ui) project. Which allows users to connect to ollama via a [web app](https://ollama-ui.github.io/ollama-ui/)
 
 [Perplexity.ai](https://www.perplexity.ai/) Perpexlity has sone some amazing UI advancements in the LLM UI space and I have been very interested in getting to that point. Hopefully this starter project lets me get closer to doing something similar!
 
-
 ## Getting started
 
 Clone the project, and run `npm install` in the root directory
@@ -66,4 +67,4 @@ Clone the project, and run `npm install` in the root directory
 
 - This readme was written with [https://stackedit.io/app](https://stackedit.io/app)
 
-- Changes to the main branch trigger an immediate deploy to https://mrdjohnson.github.io/llm-x/
\ No newline at end of file
+- Changes to the main branch trigger an immediate deploy to https://mrdjohnson.github.io/llm-x/
diff --git a/src/App.css b/src/App.css
index b2ea627..0895a10 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,5 @@
-
-html, body {
+html,
+body {
   min-height: 100% !important;
   height: 100%;
 }
diff --git a/src/App.tsx b/src/App.tsx
index fdc6416..0f13379 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,7 +22,7 @@ const Navbar = observer(() => {
   const noServer = !settingStore.selectedModel
 
   return (
-    <nav className="navbar bg-base-300 rounded-md mb-2">
+    <nav className="navbar mb-2 rounded-md bg-base-300">
       <div className="navbar-start text-xl">
         <label className="ml-2 text-xl">LLM X</label>
       </div>
@@ -32,7 +32,6 @@ const Navbar = observer(() => {
         <ModelRefreshButton />
       </div>
 
-
       <div className="navbar-end">
         <label htmlFor="app-drawer" className="btn btn-square btn-ghost drawer-button ">
           <div className="indicator p-1">
@@ -53,7 +52,7 @@ const Navbar = observer(() => {
 function App() {
   return (
     <div className="App grid">
-      <div className="flex flex-col max-h-screen p-3 drawer drawer-end place-self-center container">
+      <div className="container drawer drawer-end flex max-h-screen flex-col place-self-center p-3">
         <Navbar />
 
         <Drawer />
@@ -64,12 +63,12 @@ function App() {
 
         <PwaReloadPrompt />
 
-        <section className="flex flex-row gap-4 text-xl flex-grow max-h-full overflow-hidden h-screen drawer-content w-full">
-          <aside className="h-full hidden lg:block">
+        <section className="drawer-content flex h-screen max-h-full w-full flex-grow flex-row gap-4 overflow-hidden text-xl">
+          <aside className="hidden h-full lg:block">
             <SideBar />
           </aside>
 
-          <main className=" h-full flex-1 w-full overflow-x-auto overflow-y-scroll">
+          <main className=" h-full w-full flex-1 overflow-x-auto overflow-y-scroll">
             <ChatBox />
           </main>
         </section>
diff --git a/src/components/ChatBox.tsx b/src/components/ChatBox.tsx
index 6f0c5f7..abe2d3c 100644
--- a/src/components/ChatBox.tsx
+++ b/src/components/ChatBox.tsx
@@ -59,11 +59,11 @@ const ChatBoxInputRow = observer(
     const inputDisabled = chatStore.isGettingData || noServer
 
     return (
-      <div className={'w-full mt-2 ' + (noServer && 'tooltip')} data-tip="Server is not connected">
-        <form className="flex flex-row min-h-fit gap-2 w-full" onSubmit={onFormSubmit}>
-          <div className="join w-full flex-1 relative">
+      <div className={'mt-2 w-full ' + (noServer && 'tooltip')} data-tip="Server is not connected">
+        <form className="flex min-h-fit w-full flex-row gap-2" onSubmit={onFormSubmit}>
+          <div className="join relative w-full flex-1">
             <input
-              className="input input-bordered join-item grow focus:outline-none"
+              className="input join-item input-bordered grow focus:outline-none"
               placeholder="Enter Prompt"
               ref={inputRef}
               type="text"
@@ -81,7 +81,7 @@ const ChatBoxInputRow = observer(
             <button
               className={
                 'btn join-item !rounded-r-md border ' +
-                (inputDisabled ? '':  'input-bordered hover:input-bordered')
+                (inputDisabled ? '' : 'input-bordered hover:input-bordered')
               }
               type="button"
               onClick={() => fileInputRef.current?.click()}
@@ -91,10 +91,10 @@ const ChatBoxInputRow = observer(
             </button>
 
             {previewImage && (
-              <div className="h-24 w-24 absolute --top-full end-0 bottom-full mb-2">
+              <div className="--top-full absolute bottom-full end-0 mb-2 h-24 w-24">
                 <div className="relative h-full w-full">
                   <div
-                    className="absolute top-1 right-1 opacity-70 btn btn-xs"
+                    className="btn btn-xs absolute right-1 top-1 opacity-70"
                     onClick={() => setPreviewImage(undefined)}
                   >
                     x
@@ -171,10 +171,10 @@ const ChatBox = observer(() => {
   }
 
   return (
-    <div className="rounded-md flex flex-col min-h-full max-h-full w-full max-w-full overflow-x-auto overflow-y-scroll min-w-full">
+    <div className="flex max-h-full min-h-full w-full min-w-full max-w-full flex-col overflow-x-auto overflow-y-scroll rounded-md">
       <ScrollableFeed
         ref={scrollableFeedRef}
-        className="flex flex-col gap-2 flex-1 no-scrollbar overflow-x-hidden overflow-y-scroll"
+        className="no-scrollbar flex flex-1 flex-col gap-2 overflow-x-hidden overflow-y-scroll"
         animateScroll={(element, offset) => element.scrollBy({ top: offset, behavior: 'smooth' })}
       >
         {chat.messages.map(message => (
diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx
index ca5ed79..f08ca52 100644
--- a/src/components/Drawer.tsx
+++ b/src/components/Drawer.tsx
@@ -22,7 +22,7 @@ const Input = observer(() => {
   return (
     <div className="form-control">
       <div className="label pb-1 pt-0">
-        <span className="label-text text-sm flex flex-row items-center gap-2">
+        <span className="label-text flex flex-row items-center gap-2 text-sm">
           Host:
           <div className="cursor-pointer" onClick={openNoServerDialog}>
             <Question />
@@ -30,7 +30,7 @@ const Input = observer(() => {
         </span>
       </div>
 
-      <div className="flex flex-row gap-2 items-center">
+      <div className="flex flex-row items-center gap-2">
         <input
           type="text"
           id="host"
@@ -66,9 +66,9 @@ const Drawer = () => {
       <section className="drawer-side z-20">
         <label htmlFor="app-drawer" aria-label="close sidebar" className="drawer-overlay" />
 
-        <div className="p-3 w-80 min-h-full bg-base-200 flex flex-col">
+        <div className="flex min-h-full w-80 flex-col bg-base-200 p-3">
           <div className="navbar" />
-          <div className="flex flex-col gap-3 flex-1 h-full">
+          <div className="flex h-full flex-1 flex-col gap-3">
             <Input />
 
             <Suspense fallback={<div> Loading models ... </div>}>
@@ -77,7 +77,7 @@ const Drawer = () => {
 
             <ThemeSelector />
 
-            <div className="lg:hidden h-full flex-1 flex bg-base-300 rounded-md flex">
+            <div className="flex h-full flex-1 rounded-md bg-base-300 lg:hidden">
               <SideBar />
             </div>
           </div>
diff --git a/src/components/HelpModal.tsx b/src/components/HelpModal.tsx
index e132e38..4c359ca 100644
--- a/src/components/HelpModal.tsx
+++ b/src/components/HelpModal.tsx
@@ -33,8 +33,8 @@ const HelpModal = observer(() => {
 
   return (
     <dialog ref={modalRef} id="help-modal" className="modal modal-top">
-      <div className="modal-box w-9/12 rounded place-self-center max-w-[1000px]">
-        <h3 className="font-bold text-xl pb-3">How to connect to Ollama Server:</h3>
+      <div className="modal-box w-9/12 max-w-[1000px] place-self-center rounded">
+        <h3 className="pb-3 text-xl font-bold">How to connect to Ollama Server:</h3>
 
         <div className="flex flex-col gap-2">
           <p>By default, Ollama allows cross origin requests from 127.0.0.1 and 0.0.0.0.</p>{' '}
@@ -47,13 +47,13 @@ const HelpModal = observer(() => {
           </p>
         </div>
 
-        <div className="flex flex-row place-content-center gap-2 my-4">
+        <div className="my-4 flex flex-row place-content-center gap-2">
           <div className="prose">
             <code>{OLLAMA_CODE}</code>
           </div>
 
           <label
-            className={'swap btn btn-neutral btn-sm ' + (copied && 'swap-active')}
+            className={'btn swap btn-neutral btn-sm ' + (copied && 'swap-active')}
             onClick={handleCopy}
           >
             <Copy className="swap-off" />
@@ -70,7 +70,7 @@ const HelpModal = observer(() => {
 
         <div className="modal-action">
           <form method="dialog">
-            <button className="btn btn-sm btn-ghost focus:outline-0 absolute right-2 top-2">
+            <button className="btn btn-ghost btn-sm absolute right-2 top-2 focus:outline-0">
               ✕
             </button>
           </form>
diff --git a/src/components/Message.tsx b/src/components/Message.tsx
index b740d8a..305daf8 100644
--- a/src/components/Message.tsx
+++ b/src/components/Message.tsx
@@ -31,7 +31,7 @@ const customCodeBlock = (props: React.HTMLAttributes<HTMLElement>) => {
     return (
       <div className="indicator w-full ">
         <button
-          className="text-neutral-content/30 indicator-item hover:text-neutral-content z-10 "
+          className="indicator-item z-10 text-neutral-content/30 hover:text-neutral-content "
           onClick={copy}
         >
           <Copy />
@@ -40,7 +40,7 @@ const customCodeBlock = (props: React.HTMLAttributes<HTMLElement>) => {
         <code
           {...rest}
           dangerouslySetInnerHTML={{ __html: highlightedText }}
-          className="w-full overflow-x-scroll max-w-lg xl:max-w-[700px] 2xl:max-w-[1000px]"
+          className="w-full max-w-lg overflow-x-scroll xl:max-w-[700px] 2xl:max-w-[1000px]"
         />
       </div>
     )
@@ -50,7 +50,7 @@ const customCodeBlock = (props: React.HTMLAttributes<HTMLElement>) => {
 }
 
 const Loading = () => (
-  <span className="indicator-item indicator-start loading loading-dots loading-sm ml-8" />
+  <span className="indicator-item loading loading-dots loading-sm indicator-start ml-8" />
 )
 
 // this one is observed for incoming text changes, the rest do not need to be observed
@@ -92,13 +92,15 @@ export const Message = ({ message, onDestroy, children, customDeleteIcon }: Mess
   return (
     <div
       className={
-        'group w-fit max-w-full flex flex-col indicator ' + (fromBot ? 'pr-6 ' : ' ml-2 self-end ')
+        'group indicator flex w-fit max-w-full flex-col ' + (fromBot ? 'pr-6 ' : ' ml-2 self-end ')
       }
       key={uniqId}
     >
-      {image && <img className="w-56 h-56 rounded-md place-self-center object-contain" src={image} />}
+      {image && (
+        <img className="h-56 w-56 place-self-center rounded-md object-contain" src={image} />
+      )}
 
-      <div className=" border border-base-content/20 p-2 rounded-md w-full">
+      <div className=" w-full rounded-md border border-base-content/20 p-2">
         <Markdown
           remarkPlugins={[[remarkGfm, { singleTilde: false }]]}
           className="prose inline-table w-full"
@@ -112,13 +114,13 @@ export const Message = ({ message, onDestroy, children, customDeleteIcon }: Mess
 
       {children}
 
-      <div className={'group-hover:opacity-90 opacity-0 w-fit mt-1 ' + (!fromBot && 'self-end')}>
-        <button className="mr-2 hover:text-error text-error/30 rounded-md" onClick={onDestroy}>
+      <div className={'mt-1 w-fit opacity-0 group-hover:opacity-90 ' + (!fromBot && 'self-end')}>
+        <button className="mr-2 rounded-md text-error/30 hover:text-error" onClick={onDestroy}>
           {customDeleteIcon || <Delete />}
         </button>
 
         <button
-          className="hover:text-base-content text-base-content/30 rounded-md"
+          className="rounded-md text-base-content/30 hover:text-base-content"
           onClick={handleCopy}
         >
           <label className={'swap ' + (copied && 'swap-active')}>
diff --git a/src/components/ModalSelector.tsx b/src/components/ModalSelector.tsx
index 51ae717..de5ec23 100644
--- a/src/components/ModalSelector.tsx
+++ b/src/components/ModalSelector.tsx
@@ -10,20 +10,25 @@ const ModalSelector = observer(() => {
 
   return (
     <div className="dropdown">
-      <button tabIndex={0} role="button" className="btn btn-active w-full" disabled={!selectedModel}>
+      <button
+        tabIndex={0}
+        role="button"
+        className="btn btn-active w-full"
+        disabled={!selectedModel}
+      >
         {selectedModel?.name || 'No models available'}
         <ChevronDown />
       </button>
 
       <ul
         tabIndex={0}
-        className="dropdown-content z-[1] p-2 shadow-2xl bg-base-300 rounded-box mt-2 border border-base-content/30 max-h-52 flex flex-col"
+        className="dropdown-content z-[1] mt-2 flex max-h-52 flex-col rounded-box border border-base-content/30 bg-base-300 p-2 shadow-2xl"
       >
         {models?.map(model => (
           <li key={model.name}>
             <input
               type="radio"
-              className="btn btn-sm btn-ghost w-full place-items-center"
+              className="btn btn-ghost btn-sm w-full place-items-center"
               aria-label={model.name}
               value={model.name}
               checked={selectedModel === model}
@@ -33,8 +38,11 @@ const ModalSelector = observer(() => {
         ))}
 
         <li>
-          <a href="https://ollama.com/library" className="btn btn-outline btn-sm btn-neutral place-items-center flex flex-row flex-nowrap gap-2 w-full mt-2">
-            <span className=" text-sm whitespace-nowrap ">Ollama Library</span>
+          <a
+            href="https://ollama.com/library"
+            className="btn btn-outline btn-neutral btn-sm mt-2 flex w-full flex-row flex-nowrap place-items-center gap-2"
+          >
+            <span className=" whitespace-nowrap text-sm ">Ollama Library</span>
             <Globe />
           </a>
         </li>
diff --git a/src/components/PwaReloadPrompt.tsx b/src/components/PwaReloadPrompt.tsx
index 82be83d..0b750ef 100644
--- a/src/components/PwaReloadPrompt.tsx
+++ b/src/components/PwaReloadPrompt.tsx
@@ -54,19 +54,19 @@ const PwaReloadPrompt = () => {
 
   return (
     <dialog id="pwa_refresh_modal" className="modal modal-top">
-      <div className="modal-box justify-self-center m-8 rounded-md max-w-[600px] flex flex-row items-center w-fit relative">
-        <h3 className="font-bold text-lg">Updates Found, Please refresh the page</h3>
+      <div className="modal-box relative m-8 flex w-fit max-w-[600px] flex-row items-center justify-self-center rounded-md">
+        <h3 className="text-lg font-bold">Updates Found, Please refresh the page</h3>
 
-        <div className="btn btn-neutral mx-4 btn-sm" onClick={() => updateServiceWorker(true)}>
+        <div className="btn btn-neutral btn-sm mx-4" onClick={() => updateServiceWorker(true)}>
           Refresh
         </div>
 
         <div
-            className="absolute top-1 right-1 opacity-50 btn btn-xs font-bold text-sm"
-            onClick={() => setNeedRefresh(false)}
-          >
-            x
-          </div>
+          className="btn btn-xs absolute right-1 top-1 text-sm font-bold opacity-50"
+          onClick={() => setNeedRefresh(false)}
+        >
+          x
+        </div>
       </div>
 
       <form method="dialog" className="modal-backdrop">
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 7d2edc7..4b8b635 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -23,28 +23,28 @@ const ChatItem = observer(({ chat }: { chat: IChatModel }) => {
   return (
     <div
       className={
-        ' group rounded-md w-full flex flex-row justify-between dropdown dropdown-left lg:dropdown-right text-left p-2 ' +
+        ' group dropdown dropdown-left flex w-full flex-row justify-between rounded-md p-2 text-left lg:dropdown-right ' +
         (chat.id === chatStore.selectedChat?.id
-          ? ' btn-active btn-neutral cursor-default'
+          ? ' btn-neutral btn-active cursor-default'
           : ' btn-ghost cursor-pointer')
       }
       onClick={() => chatStore.selectChat(chat)}
     >
-      <span className="flex-1 line-clamp-1">{chat.name || 'new chat'}</span>
+      <span className="line-clamp-1 flex-1">{chat.name || 'new chat'}</span>
 
       <div onClick={e => e.stopPropagation()}>
-        <div tabIndex={0} role="button" className="hover:text-base-content/40 px-1 h-full">
+        <div tabIndex={0} role="button" className="h-full px-1 hover:text-base-content/40">
           <Options />
         </div>
 
         <div
           tabIndex={0}
-          className="dropdown-content z-10 menu p-2 shadow bg-base-300 rounded-box mr-3 lg:ml-3 mt-2 w-72 flex gap-2"
+          className="menu dropdown-content z-10 mr-3 mt-2 flex w-72 gap-2 rounded-box bg-base-300 p-2 shadow lg:ml-3"
         >
           <form className="flex flex-row gap-2" onSubmit={handleFormSubmit}>
             <input
               type="text"
-              className="input grow flex-1 input-bordered focus:outline-none w-full min-w-24"
+              className="input input-bordered w-full min-w-24 flex-1 grow focus:outline-none"
               defaultValue={chat.name || 'new chat'}
               ref={inputRef}
             />
@@ -67,9 +67,9 @@ export const SideBar = observer(() => {
   const chats = chatStore.chats
 
   return (
-    <div className="flex-1 flex flex-col flex-nowrap gap-2 bg-base-300 h-full rounded-md p-2 min-w-[260px] w-[260px] ">
+    <div className="flex h-full w-[260px] min-w-[260px] flex-1 flex-col flex-nowrap gap-2 rounded-md bg-base-300 p-2 ">
       <button
-        className="btn w-full p-2 flex flex-row gap-2 items-center justify-center btn-neutral mb-2"
+        className="btn btn-neutral mb-2 flex w-full flex-row items-center justify-center gap-2 p-2"
         onClick={chatStore.createChat}
         disabled={chatStore.hasEmptyChat}
       >
diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx
index d53f502..bb8ecb0 100644
--- a/src/components/ThemeSelector.tsx
+++ b/src/components/ThemeSelector.tsx
@@ -37,14 +37,14 @@ const ThemeSelector = observer(() => {
 
         <ul
           tabIndex={0}
-          className="dropdown-content z-[1] p-2 shadow-2xl bg-base-300 rounded-box w-52 mt-2"
+          className="dropdown-content z-[1] mt-2 w-52 rounded-box bg-base-300 p-2 shadow-2xl"
         >
           {_.map(themes, (label, value) => (
             <li key={value}>
               <input
                 type="radio"
                 name="theme-dropdown"
-                className="theme-controller btn btn-sm btn-block btn-ghost justify-start"
+                className="theme-controller btn btn-ghost btn-sm btn-block justify-start"
                 aria-label={label}
                 value={theme}
                 checked={selectedTheme === value}
diff --git a/src/components/ToastCenter.tsx b/src/components/ToastCenter.tsx
index 5cd0f68..44f0554 100644
--- a/src/components/ToastCenter.tsx
+++ b/src/components/ToastCenter.tsx
@@ -27,12 +27,12 @@ const ToastCenter = observer(() => {
     >
       {toasts.map(toast => (
         <div
-          className={`alert alert-${toast.type} text-xl font-bold rounded-md relative px-4 max-w-10/12 border border-base-content/30`}
+          className={`alert alert-${toast.type} max-w-10/12 relative rounded-md border border-base-content/30 px-4 text-xl font-bold`}
         >
           <span className="cursor-default">{toast.message}</span>
 
           <div
-            className="absolute top-1 right-1 opacity-50 btn btn-xs font-bold text-sm"
+            className="btn btn-xs absolute right-1 top-1 text-sm font-bold opacity-50"
             onClick={() => toastStore.removeToast(toast)}
           >
             x
diff --git a/src/icons/Bars3.tsx b/src/icons/Bars3.tsx
index ca68ce6..c6b3740 100644
--- a/src/icons/Bars3.tsx
+++ b/src/icons/Bars3.tsx
@@ -6,7 +6,7 @@ export default function Bars3() {
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="w-5 h-5"
+      className="h-5 w-5"
     >
       <path
         strokeLinecap="round"
diff --git a/src/icons/ChatBubble.tsx b/src/icons/ChatBubble.tsx
index 40d6560..300c032 100644
--- a/src/icons/ChatBubble.tsx
+++ b/src/icons/ChatBubble.tsx
@@ -6,7 +6,7 @@ export default function ChatBubble() {
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="w-6 h-6"
+      className="h-6 w-6"
     >
       <path
         strokeLinecap="round"
diff --git a/src/icons/Check.tsx b/src/icons/Check.tsx
index b9575ff..053b2a4 100644
--- a/src/icons/Check.tsx
+++ b/src/icons/Check.tsx
@@ -6,7 +6,7 @@ export default function Check() {
       viewBox="0 0 24 24"
       strokeWidth={3}
       stroke="currentColor"
-      className="w-4 h-4"
+      className="h-4 w-4"
     >
       <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
     </svg>
diff --git a/src/icons/ChevronDown.tsx b/src/icons/ChevronDown.tsx
index 11b59eb..457f64a 100644
--- a/src/icons/ChevronDown.tsx
+++ b/src/icons/ChevronDown.tsx
@@ -6,7 +6,7 @@ export default function ChevronDown() {
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="w-4 h-4"
+      className="h-4 w-4"
     >
       <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
     </svg>
diff --git a/src/icons/Copy.tsx b/src/icons/Copy.tsx
index 4d9e574..bd7fd49 100644
--- a/src/icons/Copy.tsx
+++ b/src/icons/Copy.tsx
@@ -6,7 +6,7 @@ export default function Copy({ className = '' }: { className?: string }) {
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className={className + ' w-4 h-4 text-current/60 hover:text-current'}
+      className={className + ' text-current/60 h-4 w-4 hover:text-current'}
     >
       <path
         strokeLinecap="round"
diff --git a/src/icons/CopySuccess.tsx b/src/icons/CopySuccess.tsx
index 6380a3a..c81efd4 100644
--- a/src/icons/CopySuccess.tsx
+++ b/src/icons/CopySuccess.tsx
@@ -6,7 +6,7 @@ export default function CopySuccess({ className = '' }: { className?: string })
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className={className + ' w-4 h-4 text-current/60 hover:text-current'}
+      className={className + ' text-current/60 h-4 w-4 hover:text-current'}
     >
       <path
         strokeLinecap="round"
diff --git a/src/icons/Delete.tsx b/src/icons/Delete.tsx
index 81c1930..5b23208 100644
--- a/src/icons/Delete.tsx
+++ b/src/icons/Delete.tsx
@@ -6,7 +6,7 @@ export default function Delete() {
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="w-4 h-4"
+      className="h-4 w-4"
     >
       <path
         strokeLinecap="round"
diff --git a/src/icons/Edit.tsx b/src/icons/Edit.tsx
index 48972ad..314e703 100644
--- a/src/icons/Edit.tsx
+++ b/src/icons/Edit.tsx
@@ -6,7 +6,7 @@ export default function Edit() {
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="w-5 h-5"
+      className="h-5 w-5"
     >
       <path
         strokeLinecap="round"
diff --git a/src/icons/Globe.tsx b/src/icons/Globe.tsx
index 5b14036..eed9138 100644
--- a/src/icons/Globe.tsx
+++ b/src/icons/Globe.tsx
@@ -6,7 +6,7 @@ export default function Globe() {
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="w-4 h-4"
+      className="h-4 w-4"
     >
       <path
         strokeLinecap="round"
diff --git a/src/icons/Options.tsx b/src/icons/Options.tsx
index 19951eb..feec61c 100644
--- a/src/icons/Options.tsx
+++ b/src/icons/Options.tsx
@@ -6,7 +6,7 @@ export default function Options() {
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="w-6 h-6"
+      className="h-6 w-6"
     >
       <path
         strokeLinecap="round"
diff --git a/src/icons/Paperclip.tsx b/src/icons/Paperclip.tsx
index b65263c..531831e 100644
--- a/src/icons/Paperclip.tsx
+++ b/src/icons/Paperclip.tsx
@@ -6,7 +6,7 @@ export default function Paperclip() {
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="w-4 h-4"
+      className="h-4 w-4"
     >
       <path
         strokeLinecap="round"
diff --git a/src/icons/Question.tsx b/src/icons/Question.tsx
index 6af5996..6fad849 100644
--- a/src/icons/Question.tsx
+++ b/src/icons/Question.tsx
@@ -6,7 +6,7 @@ export default function Question() {
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="w-4 h-4"
+      className="h-4 w-4"
     >
       <path
         strokeLinecap="round"
diff --git a/src/icons/Refresh.tsx b/src/icons/Refresh.tsx
index 414c287..9fee2ff 100644
--- a/src/icons/Refresh.tsx
+++ b/src/icons/Refresh.tsx
@@ -6,7 +6,7 @@ export default function Refresh() {
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="w-4 h-4"
+      className="h-4 w-4"
     >
       <path
         strokeLinecap="round"
diff --git a/src/icons/Stop.tsx b/src/icons/Stop.tsx
index 5124e65..05d00c6 100644
--- a/src/icons/Stop.tsx
+++ b/src/icons/Stop.tsx
@@ -4,7 +4,7 @@ export default function Stop() {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="currentColor"
-      className="w-4 h-4"
+      className="h-4 w-4"
     >
       <path
         fillRule="evenodd"
diff --git a/src/icons/Warning.tsx b/src/icons/Warning.tsx
index d05b94f..e865200 100644
--- a/src/icons/Warning.tsx
+++ b/src/icons/Warning.tsx
@@ -6,7 +6,7 @@ export default function Warning() {
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="w-4 h-4"
+      className="h-4 w-4"
     >
       <path
         strokeLinecap="round"
diff --git a/src/index.css b/src/index.css
index 9251d68..c1dbb6b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,7 +8,7 @@
   }
 
   pre {
-    @apply inline-table my-2 w-full max-w-full;
+    @apply my-2 inline-table w-full max-w-full;
   }
 
   li {
@@ -16,7 +16,7 @@
   }
 
   ol {
-    @apply list-decimal list-inside !px-2;
+    @apply list-inside list-decimal !px-2;
   }
 
   /* Hide scrollbar for Chrome, Safari and Opera */