diff --git a/.eslintrc.json b/.eslintrc.json
index 0564858cc4..f43af11a15 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -10,6 +10,12 @@
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint", "tailwindcss"],
   "root": true,
+  "settings": {
+    "tailwindcss": {
+      "config": "./tailwind.config.js",
+      "callees": ["classnames", "classNames"]
+    }
+  },
   "rules": {
     "no-empty": "warn",
     "@typescript-eslint/no-explicit-any": "warn",
diff --git a/package-lock.json b/package-lock.json
index 6b953160cc..4c549b952d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -76,8 +76,8 @@
         "gpt-3-encoder": "^1.1.4",
         "jsdom": "^21.1.1",
         "postcss": "^8.4.21",
-        "prettier": "^2.8.7",
-        "prettier-plugin-tailwindcss": "^0.2.5",
+        "prettier": "^3.0.3",
+        "prettier-plugin-tailwindcss": "^0.5.7",
         "tailwindcss": "^3.3.5",
         "typescript": "^5.2.2",
         "vitest": "^0.29.7"
@@ -10590,27 +10590,27 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
+      "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==",
       "dev": true,
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14"
       },
       "funding": {
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
     "node_modules/prettier-plugin-tailwindcss": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.8.tgz",
-      "integrity": "sha512-KgPcEnJeIijlMjsA6WwYgRs5rh3/q76oInqtMXBA/EMcamrcYJpyhtRhyX1ayT9hnHlHTuO8sIifHF10WuSDKg==",
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.7.tgz",
+      "integrity": "sha512-4v6uESAgwCni6YF6DwJlRaDjg9Z+al5zM4JfngcazMy4WEf/XkPS5TEQjbD+DZ5iNuG6RrKQLa/HuX2SYzC3kQ==",
       "dev": true,
       "engines": {
-        "node": ">=12.17.0"
+        "node": ">=14.21.3"
       },
       "peerDependencies": {
         "@ianvs/prettier-plugin-sort-imports": "*",
@@ -10618,7 +10618,7 @@
         "@shopify/prettier-plugin-liquid": "*",
         "@shufo/prettier-plugin-blade": "*",
         "@trivago/prettier-plugin-sort-imports": "*",
-        "prettier": ">=2.2.0",
+        "prettier": "^3.0",
         "prettier-plugin-astro": "*",
         "prettier-plugin-css-order": "*",
         "prettier-plugin-import-sort": "*",
@@ -10626,8 +10626,7 @@
         "prettier-plugin-organize-attributes": "*",
         "prettier-plugin-organize-imports": "*",
         "prettier-plugin-style-order": "*",
-        "prettier-plugin-svelte": "*",
-        "prettier-plugin-twig-melody": "*"
+        "prettier-plugin-svelte": "*"
       },
       "peerDependenciesMeta": {
         "@ianvs/prettier-plugin-sort-imports": {
@@ -10657,6 +10656,9 @@
         "prettier-plugin-jsdoc": {
           "optional": true
         },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
         "prettier-plugin-organize-attributes": {
           "optional": true
         },
diff --git a/package.json b/package.json
index 57b6fa57fb..7ec0d2d70d 100644
--- a/package.json
+++ b/package.json
@@ -87,8 +87,8 @@
     "gpt-3-encoder": "^1.1.4",
     "jsdom": "^21.1.1",
     "postcss": "^8.4.21",
-    "prettier": "^2.8.7",
-    "prettier-plugin-tailwindcss": "^0.2.5",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.2.2",
     "vitest": "^0.29.7"
diff --git a/prettier.config.js b/prettier.config.js
index 5cb7fa7711..0e1b1f8aca 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -5,6 +5,7 @@ module.exports = {
     '@trivago/prettier-plugin-sort-imports',
     'prettier-plugin-tailwindcss',
   ],
+  tailwindFunctions: ['classnames', 'classNames'],
   importOrder: [
     'react', // React
     '^react-.*$', // React-related imports
@@ -29,5 +30,4 @@ module.exports = {
   ],
   importOrderSeparation: true,
   importOrderSortSpecifiers: true,
-  pluginSearchDirs: false,
 };
diff --git a/src/components/Chat/ChatInput.tsx b/src/components/Chat/ChatInput.tsx
index 051713d06b..0011553850 100644
--- a/src/components/Chat/ChatInput.tsx
+++ b/src/components/Chat/ChatInput.tsx
@@ -367,7 +367,7 @@ export const ChatInput = ({
 
           {showScrollDownButton && (
             <ScrollDownButton
-              containerClassNames="2xl:right-[-60px] xl:right-2 2xl:bottom-0  2xl:top-auto -top-14 right-0"
+              className="-top-14 right-0 xl:right-2 2xl:bottom-0 2xl:right-[-60px] 2xl:top-auto"
               onScrollDownClick={onScrollDownClick}
             />
           )}
diff --git a/src/components/Chat/PlaybackControls.tsx b/src/components/Chat/PlaybackControls.tsx
index 70eebddb35..d9e99935ff 100644
--- a/src/components/Chat/PlaybackControls.tsx
+++ b/src/components/Chat/PlaybackControls.tsx
@@ -205,7 +205,7 @@ export const PlaybackControls = ({
 
       {showScrollDownButton && (
         <ScrollDownButton
-          containerClassNames="bottom-16 right-2 md:right-5 md:bottom-20 xl:right-2 xl:bottom-6"
+          className="bottom-16 right-2 md:bottom-20 md:right-5 xl:bottom-6 xl:right-2"
           onScrollDownClick={onScrollDownClick}
         />
       )}
diff --git a/src/components/Chat/ScrollDownButton.tsx b/src/components/Chat/ScrollDownButton.tsx
index e31211f43c..f845986637 100644
--- a/src/components/Chat/ScrollDownButton.tsx
+++ b/src/components/Chat/ScrollDownButton.tsx
@@ -4,19 +4,11 @@ import classNames from 'classnames';
 
 interface Props {
   onScrollDownClick: () => void;
-  containerClassNames?: string;
+  className?: string;
 }
-export const ScrollDownButton = ({
-  onScrollDownClick,
-  containerClassNames,
-}: Props) => {
+export const ScrollDownButton = ({ onScrollDownClick, className }: Props) => {
   return (
-    <div
-      className={classNames(
-        'absolute  aspect-square h-11',
-        containerClassNames,
-      )}
-    >
+    <div className={classNames('absolute  aspect-square h-11', className)}>
       <button
         className="flex h-full w-full items-center justify-center rounded-full bg-gray-100 p-2 hover:bg-gray-400 dark:bg-gray-700 hover:dark:bg-gray-600"
         onClick={onScrollDownClick}
diff --git a/src/components/Common/DropdownMenu.tsx b/src/components/Common/DropdownMenu.tsx
index cda924d4ac..8e64a3d6d0 100644
--- a/src/components/Common/DropdownMenu.tsx
+++ b/src/components/Common/DropdownMenu.tsx
@@ -42,8 +42,9 @@ import {
 
 import classNames from 'classnames';
 
-const menuItemClassNames =
-  'flex focus-visible:border-none focus-visible:outline-none gap-3 cursor-pointer px-3 items-center max-w-[300px]';
+const menuItemClassNames = classNames(
+  'flex max-w-[300px] cursor-pointer items-center gap-3 px-3 focus-visible:border-none focus-visible:outline-none',
+);
 
 const MenuContext = createContext<{
   getItemProps: (userProps?: HTMLProps<HTMLElement>) => Record<string, unknown>;
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 7f42a29d52..32cb021f63 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -74,7 +74,7 @@ const Sidebar = <T,>({
     <div
       className={classNames(
         `group/sidebar fixed top-12 z-40 flex h-[calc(100%-48px)] w-[260px] flex-none shrink-0 flex-col divide-y divide-gray-300 border-r border-gray-300 bg-gray-100 transition-all dark:divide-gray-900 dark:border-gray-900 dark:bg-gray-700  xl:relative xl:top-0 xl:h-full`,
-        `${side}-0`,
+        side === 'left' ? `left-0` : 'right-0',
       )}
       data-qa="sidebar"
     >
diff --git a/src/utils/app/merge-streams.ts b/src/utils/app/merge-streams.ts
index 05418f0c34..8a3272f355 100644
--- a/src/utils/app/merge-streams.ts
+++ b/src/utils/app/merge-streams.ts
@@ -10,11 +10,14 @@ export const parseStreamMessages = (message: string): Partial<Message>[] => {
 };
 
 const mergeStages = (sourceStages: Stage[], newStages: Stage[]) => {
-  const sourceStagesReducer = sourceStages.reduce((acc, curr) => {
-    acc[curr.index] = curr;
-
-    return acc;
-  }, {} as Record<number, Stage>);
+  const sourceStagesReducer = sourceStages.reduce(
+    (acc, curr) => {
+      acc[curr.index] = curr;
+
+      return acc;
+    },
+    {} as Record<number, Stage>,
+  );
 
   newStages.forEach((stage) => {
     if (sourceStagesReducer[stage.index]) {
diff --git a/src/utils/data/throttle.ts b/src/utils/data/throttle.ts
index 1a1e3e5e3d..87c8ef697b 100644
--- a/src/utils/data/throttle.ts
+++ b/src/utils/data/throttle.ts
@@ -11,12 +11,15 @@ export function throttle<T extends (...args: any[]) => any>(
       lastRan = Date.now();
     } else {
       clearTimeout(lastFunc);
-      lastFunc = setTimeout(() => {
-        if (Date.now() - lastRan >= limit) {
-          func(...args);
-          lastRan = Date.now();
-        }
-      }, limit - (Date.now() - lastRan));
+      lastFunc = setTimeout(
+        () => {
+          if (Date.now() - lastRan >= limit) {
+            func(...args);
+            lastRan = Date.now();
+          }
+        },
+        limit - (Date.now() - lastRan),
+      );
     }
   }) as T;
 }