diff --git a/.prettierrc.cjs b/.prettierrc.cjs
index 67800e7c..565450ea 100644
--- a/.prettierrc.cjs
+++ b/.prettierrc.cjs
@@ -4,4 +4,7 @@ module.exports = {
     semi: true,
     singleQuote: false,
     printWidth: 100,
+    // tailwind pluging config
+    plugins: ["prettier-plugin-tailwindcss"],
+    tailwindConfig: "./tailwind.config.cjs",
 };
diff --git a/package-lock.json b/package-lock.json
index 76a93203..504291d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,8 +60,8 @@
                 "eslint-plugin-storybook": "0.6.13",
                 "eslint-plugin-tsdoc": "0.2.17",
                 "jsdom": "^22.1.0",
-                "prettier": "^3.0.0",
-                "prettier-plugin-tailwindcss": "0.3.0",
+                "prettier": "^3.0.3",
+                "prettier-plugin-tailwindcss": "0.5.5",
                 "prop-types": "^15.8.1",
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0",
@@ -21608,9 +21608,9 @@
             }
         },
         "node_modules/prettier": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz",
-            "integrity": "sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==",
+            "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.cjs"
@@ -21635,12 +21635,12 @@
             }
         },
         "node_modules/prettier-plugin-tailwindcss": {
-            "version": "0.3.0",
-            "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.3.0.tgz",
-            "integrity": "sha512-009/Xqdy7UmkcTBpwlq7jsViDqXAYSOMLDrHAdTMlVZOrKfM2o9Ci7EMWTMZ7SkKBFTG04UM9F9iM2+4i6boDA==",
+            "version": "0.5.5",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.5.tgz",
+            "integrity": "sha512-voy0CjWv/CM8yeaduv5ZwovovpTGMR5LbzlhGF+LtEvMJt9wBeVTVnW781hL38R/RcDXCJwN2rolsgr94B/n0Q==",
             "dev": true,
             "engines": {
-                "node": ">=12.17.0"
+                "node": ">=14.21.3"
             },
             "peerDependencies": {
                 "@ianvs/prettier-plugin-sort-imports": "*",
@@ -21648,17 +21648,15 @@
                 "@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": "*",
                 "prettier-plugin-jsdoc": "*",
-                "prettier-plugin-marko": "*",
                 "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": {
diff --git a/package.json b/package.json
index 06f46d83..c2c9b5a4 100644
--- a/package.json
+++ b/package.json
@@ -91,8 +91,8 @@
         "eslint-plugin-storybook": "0.6.13",
         "eslint-plugin-tsdoc": "0.2.17",
         "jsdom": "^22.1.0",
-        "prettier": "^3.0.0",
-        "prettier-plugin-tailwindcss": "0.3.0",
+        "prettier": "^3.0.3",
+        "prettier-plugin-tailwindcss": "0.5.5",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
diff --git a/src/components/dialog/dialog.stories.tsx b/src/components/dialog/dialog.stories.tsx
index ff292858..5428cbde 100644
--- a/src/components/dialog/dialog.stories.tsx
+++ b/src/components/dialog/dialog.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import React, { useState } from "react";
-import { Dialog } from "./dialog";
 import { getStoryDescription, hiddenArgControl } from "../../util/storybook-utils";
+import { Dialog } from "./dialog";
 
 const SpanFooter = () => <span>test footer 🍭</span>;
 const footerOptions = { undefined, SpanFooter: <SpanFooter /> };
@@ -39,7 +39,7 @@ const meta: Meta<typeof Dialog> = {
                 <button
                     type="button"
                     onClick={toggleBtn}
-                    className="bg-neutral-100 py-2 px-4 shadow"
+                    className="bg-neutral-100 px-4 py-2 shadow"
                 >
                     show Modal
                 </button>
diff --git a/src/components/form-field/single-combobox/single-combobox-input.tsx b/src/components/form-field/single-combobox/single-combobox-input.tsx
index 2ed89ee4..425f5d54 100644
--- a/src/components/form-field/single-combobox/single-combobox-input.tsx
+++ b/src/components/form-field/single-combobox/single-combobox-input.tsx
@@ -25,7 +25,7 @@ export const SingleComboboxInput = <TValue,>({
                 placeholder={placeholder}
                 displayValue={displayValue}
                 onChange={onChange}
-                className="paragraph-100 flex h-8 w-full items-center rounded border border-neutral-400 py-2 pl-3 pr-8 focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-200 disabled:bg-neutral-100 disabled:text-neutral-600 disabled:border-neutral-300"
+                className="paragraph-100 flex h-8 w-full items-center rounded border border-neutral-400 py-2 pl-3 pr-8 focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-200 disabled:border-neutral-300 disabled:bg-neutral-100 disabled:text-neutral-600"
             />
             {showButton ? (
                 <HeadlessCombobox.Button className="absolute inset-y-0 right-0 flex items-center px-1.5">
diff --git a/src/components/form-field/text-input/text-input.tsx b/src/components/form-field/text-input/text-input.tsx
index b5e2258f..b8a08f67 100644
--- a/src/components/form-field/text-input/text-input.tsx
+++ b/src/components/form-field/text-input/text-input.tsx
@@ -60,7 +60,7 @@ export const TextInput = ({
         <div className={classNames("relative w-full", formFieldGroupStyles)}>
             {LeftIcon ? (
                 <div
-                    className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 z-10"
+                    className="pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pl-3"
                     aria-hidden="true"
                 >
                     <LeftIcon className="text-gray-400 h-3.5 w-3.5 fill-neutral-600" />
diff --git a/src/components/index.ts b/src/components/index.ts
index 09596a8e..3f81e629 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,5 +1,4 @@
 export { Alert, AlertIntent } from "./alert";
-export { InlineAlert } from "./inline-alert";
 export { Avatar } from "./avatar";
 export { Badge } from "./badge";
 export { Button } from "./button";
@@ -8,9 +7,11 @@ export { Dialog } from "./dialog";
 export { DividerLine } from "./divider-line";
 export { FormField } from "./form-field";
 export { IconButton } from "./icon-button";
+export { InlineAlert } from "./inline-alert";
 export { LastChangedInfo } from "./last-changed-info";
 export { Menu } from "./menu";
 export { Page } from "./page";
+export { Panel } from "./panel";
 export { Section } from "./section";
 export { Sidebar } from "./sidebar";
 export { SidebarContainer } from "./sidebar-container";
diff --git a/src/components/panel/index.ts b/src/components/panel/index.ts
new file mode 100644
index 00000000..8628fc58
--- /dev/null
+++ b/src/components/panel/index.ts
@@ -0,0 +1 @@
+export { Panel } from "./panel";
diff --git a/src/components/panel/panel.stories.tsx b/src/components/panel/panel.stories.tsx
new file mode 100644
index 00000000..9ddd2498
--- /dev/null
+++ b/src/components/panel/panel.stories.tsx
@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Panel } from "./panel";
+import { Button } from "../button/button";
+import { getStoryDescription } from "../../util/storybook-utils";
+import { Toggle } from "../toggle";
+
+const meta: Meta<typeof Panel> = {
+    title: "Panel",
+    parameters: {
+        ...getStoryDescription("Simple container used to group and organize elements in the UI."),
+        backgrounds: {
+            default: "light",
+        },
+    },
+    component: Panel,
+    args: {
+        className: "",
+        children: "Panel with text content",
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof Panel>;
+
+export const Default: Story = {};
+
+const noop = () => undefined;
+export const WithComponents: Story = {
+    args: {
+        children: (
+            <>
+                <Button variant="primary" onClick={noop}>
+                    Button A
+                </Button>
+                <Toggle checked ariaLabel="test" onChange={noop} />
+                <Button variant="secondary" onClick={noop}>
+                    Button B
+                </Button>
+                <p> Paragraph content</p>
+            </>
+        ),
+    },
+};
diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx
new file mode 100644
index 00000000..dab3f337
--- /dev/null
+++ b/src/components/panel/panel.tsx
@@ -0,0 +1,13 @@
+import React, { FC, ReactNode } from "react";
+import { classNames } from "../../util/class-names";
+
+interface PanelProps {
+    children: ReactNode;
+    className?: string;
+}
+
+export const Panel: FC<PanelProps> = ({ children, className }) => (
+    <div className={classNames("rounded border border-neutral-300 bg-neutral-0 p-5", className)}>
+        {children}
+    </div>
+);
diff --git a/src/components/section/section-panel.tsx b/src/components/section/section-panel.tsx
index 90402019..c024f23e 100644
--- a/src/components/section/section-panel.tsx
+++ b/src/components/section/section-panel.tsx
@@ -4,6 +4,10 @@ export interface SectionPanelProps {
     children: React.ReactNode;
 }
 
+/**
+ * @deprecated Use the dedicated Panel component
+ * Delete me on version 3
+ */
 export const SectionPanel = ({ children }: SectionPanelProps) => {
     return (
         <div className="relative rounded border border-neutral-300 bg-neutral-0 p-5">
diff --git a/src/components/section/section.tsx b/src/components/section/section.tsx
index 48d8a8fd..82c8a38f 100644
--- a/src/components/section/section.tsx
+++ b/src/components/section/section.tsx
@@ -15,6 +15,9 @@ const Section = ({ children }: SectionProps) => {
 Section.TitleGroup = SectionTitleGroup;
 Section.Title = SectionTitle;
 Section.Description = SectionDescription;
+/**
+ * @deprecated Use the dedicated Panel component
+ */
 Section.Panel = SectionPanel;
 
 export { Section };
diff --git a/src/components/table-virtualized/table-virtualized.tsx b/src/components/table-virtualized/table-virtualized.tsx
index fb16094c..34c43511 100644
--- a/src/components/table-virtualized/table-virtualized.tsx
+++ b/src/components/table-virtualized/table-virtualized.tsx
@@ -14,17 +14,15 @@ import { useVirtualizer, VirtualizerOptions } from "@tanstack/react-virtual";
 import React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
+import { classNames } from "../../util/class-names";
+import { TableUnvirtualized } from "../table-unvirtualized";
 import { DraggableRow } from "./draggable-row/draggable-row";
-import { VirtualizedHeaderGroup } from "./header-group/header-group";
 import { ExpandableButtonCell } from "./expandable-button-cell/expandable-button-cell";
-import { TableUnvirtualized } from "../table-unvirtualized";
-import { classNames } from "../../util/class-names";
+import { VirtualizedHeaderGroup } from "./header-group/header-group";
 
-export interface TableVirtualizedProps<TableData> {
+export interface TableVirtualizedProps<TableData, TableValue = unknown> {
     data: TableData[];
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    columnDefs: ColumnDef<TableData, any>[];
+    columnDefs: ColumnDef<TableData, TableValue>[];
     showPlaceholder?: boolean;
     placeholder?: React.ReactNode;
     isDraggableRowsEnabled?: boolean;