diff --git a/.prettierrc b/.prettierrc
index cd93fd98..d61d4db2 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,6 @@
 {
     "singleQuote": true,
-    "tabWidth": 4
+    "tabWidth": 4,
+    "plugins": ["prettier-plugin-tailwindcss"],
+    "tailwindConfig": "./apps/azkaban-admin-ui/tailwind.config.js"
 }
diff --git a/apps/azkaban-admin-ui/src/features/auth/login/components/header.component.tsx b/apps/azkaban-admin-ui/src/features/auth/login/components/header.component.tsx
index 18daa7d0..df63aaa9 100644
--- a/apps/azkaban-admin-ui/src/features/auth/login/components/header.component.tsx
+++ b/apps/azkaban-admin-ui/src/features/auth/login/components/header.component.tsx
@@ -1,6 +1,6 @@
 export function AuthLoginHeader() {
     return (
-        <h1 className="text-3xl text-slate-800 dark:text-slate-100 font-bold mb-6">
+        <h1 className="mb-6 text-3xl font-bold text-slate-800 dark:text-slate-100">
             Welcome Back{' '}
             <span role="img" aria-labelledby="Star">
                 ✨
diff --git a/apps/azkaban-admin-ui/src/features/shared/components/layout/auth.layout.tsx b/apps/azkaban-admin-ui/src/features/shared/components/layout/auth.layout.tsx
index 59469e5b..1fe74caa 100644
--- a/apps/azkaban-admin-ui/src/features/shared/components/layout/auth.layout.tsx
+++ b/apps/azkaban-admin-ui/src/features/shared/components/layout/auth.layout.tsx
@@ -6,13 +6,13 @@ function AuthLayout() {
     const { toasts } = useToasts();
 
     return (
-        <div className="font-exo antialiased bg-slate-100 dark:bg-slate-900 text-slate-600 dark:text-slate-400">
+        <div className="bg-slate-100 font-exo text-slate-600 antialiased dark:bg-slate-900 dark:text-slate-400">
             <main className="bg-slate-100 dark:bg-slate-900">
                 <div className="relative flex">
                     <div className="w-full md:w-1/2">
-                        <div className="min-h-screen h-full flex flex-col after:flex-1">
+                        <div className="flex h-full min-h-screen flex-col after:flex-1">
                             <div className="flex-1">
-                                <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
+                                <div className="flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
                                     <button className="block">
                                         <svg
                                             width="32"
@@ -78,25 +78,25 @@ function AuthLayout() {
                                 </div>
                             </div>
 
-                            <div className="w-full max-w-sm mx-auto px-4 py-8">
+                            <div className="mx-auto w-full max-w-sm px-4 py-8">
                                 <Outlet />
                             </div>
                         </div>
                     </div>
 
                     <div
-                        className="hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2"
+                        className="absolute bottom-0 right-0 top-0 hidden md:block md:w-1/2"
                         aria-hidden="true"
                     >
                         <img
-                            className="object-cover object-center w-full h-full"
+                            className="h-full w-full object-cover object-center"
                             src="/assets/auth-image.jpg"
                             width="760"
                             height="1024"
                             alt="Authentication"
                         />
                         <img
-                            className="absolute top-1/4 left-0 -translate-x-1/2 ml-8 hidden lg:block"
+                            className="absolute left-0 top-1/4 ml-8 hidden -translate-x-1/2 lg:block"
                             src="/assets/auth-decoration.png"
                             width="218"
                             height="224"
diff --git a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard.layout.tsx b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard.layout.tsx
index 61a2cbf2..5d549e3d 100644
--- a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard.layout.tsx
+++ b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard.layout.tsx
@@ -29,7 +29,7 @@ function DashboardLayout() {
                     toggleSidebar={() => onToggleSidebar()}
                     version={version}
                 />
-                <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
+                <div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
                     <Header
                         sidebarOpen={sidebarOpen}
                         onSidebarChange={(value: boolean) =>
diff --git a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header-left-side.tsx b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header-left-side.tsx
index dd48031b..dcd28808 100644
--- a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header-left-side.tsx
+++ b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header-left-side.tsx
@@ -3,10 +3,10 @@ import { Button } from '../../ui/button';
 export function HeaderLeftSide() {
     return (
         <div className="flex">
-            <Button className="lg:hidden bg-indigo-500 hover:bg-indigo-600">
+            <Button className="bg-indigo-500 hover:bg-indigo-600 lg:hidden">
                 <span className="sr-only">Open sidebar</span>
                 <svg
-                    className="w-6 h-6 fill-current"
+                    className="h-6 w-6 fill-current"
                     viewBox="0 0 24 24"
                     xmlns="http://www.w3.org/2000/svg"
                 >
diff --git a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header-right-side.tsx b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header-right-side.tsx
index e820345c..326cf80a 100644
--- a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header-right-side.tsx
+++ b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header-right-side.tsx
@@ -12,14 +12,14 @@ export function HeaderRightSide(props: PropsWithChildren<Props>) {
         <div className="flex items-center space-x-3">
             <div>
                 <button
-                    className={`w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 rounded-full ml-3 ${
+                    className={`ml-3 flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 ${
                         searchModalOpen && 'bg-slate-200'
                     }`}
                     onClick={() => onSearchModalChange()}
                 >
                     <span className="sr-only">Search</span>
                     <svg
-                        className="w-4 h-4"
+                        className="h-4 w-4"
                         viewBox="0 0 16 16"
                         xmlns="http://www.w3.org/2000/svg"
                     >
diff --git a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header.tsx b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header.tsx
index 4e8b6eee..17bb8ea4 100644
--- a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header.tsx
+++ b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header.tsx
@@ -29,9 +29,9 @@ export function Header(props: Props) {
     } = props;
 
     return (
-        <header className="sticky top-0 bg-white dark:bg-[#182235] border-b border-slate-200 dark:border-slate-700 z-30">
+        <header className="sticky top-0 z-30 border-b border-slate-200 bg-white dark:border-slate-700 dark:bg-[#182235]">
             <div className="px-4 sm:px-6 lg:px-8">
-                <div className="flex items-center justify-between h-16 -mb-px">
+                <div className="-mb-px flex h-16 items-center justify-between">
                     <HeaderLeftSide />
                     <HeaderRightSide
                         searchModalOpen={searchModalOpen}
@@ -51,7 +51,7 @@ export function Header(props: Props) {
                             }
                         />
                         <ThemeToggle />
-                        <hr className="w-px h-6 bg-slate-200 dark:bg-slate-700 border-none" />
+                        <hr className="h-6 w-px border-none bg-slate-200 dark:bg-slate-700" />
                         UserMenu
                     </HeaderRightSide>
                 </div>
diff --git a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/notifications/notification-trigger.tsx b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/notifications/notification-trigger.tsx
index 580901fc..cb7b0765 100644
--- a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/notifications/notification-trigger.tsx
+++ b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/notifications/notification-trigger.tsx
@@ -7,13 +7,13 @@ export function NotificationTriggerPartial(props: Props) {
 
     return (
         <div
-            className={`w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 rounded-full ${
+            className={`flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 ${
                 dropdownOpen && 'bg-slate-200'
             }`}
         >
             <span className="sr-only">Notifications</span>
             <svg
-                className="w-4 h-4"
+                className="h-4 w-4"
                 viewBox="0 0 16 16"
                 xmlns="http://www.w3.org/2000/svg"
             >
diff --git a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/sidebar.tsx b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/sidebar.tsx
index d84cfa79..3f12002a 100644
--- a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/sidebar.tsx
+++ b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/sidebar.tsx
@@ -10,26 +10,26 @@ export function Sidebar(props: Props) {
     return (
         <div>
             <div
-                className={`fixed inset-0 dark:bg-slate-900 dark:bg-opacity-30 bg-slate-300 bg-opacity-60 z-40 lg:hidden lg:z-auto transition-opacity duration-200 ${
+                className={`fixed inset-0 z-40 bg-slate-300 bg-opacity-60 transition-opacity duration-200 dark:bg-slate-900 dark:bg-opacity-30 lg:z-auto lg:hidden ${
                     sidebarOpen
                         ? 'opacity-100'
-                        : 'opacity-0 pointer-events-none'
+                        : 'pointer-events-none opacity-0'
                 }`}
             />
             <div
                 id="sidebar"
-                className={`border-r border-slate-200 dark:border-slate-700 flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-screen overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:!w-64 shrink-0 dark:bg-slate-800 bg-white p-4 transition-all duration-200 ease-in-out ${
+                className={`no-scrollbar lg:sidebar-expanded:!w-64 absolute left-0 top-0 z-40 flex h-screen w-64 shrink-0 flex-col overflow-y-scroll border-r border-slate-200 bg-white p-4 transition-all duration-200 ease-in-out dark:border-slate-700 dark:bg-slate-800 lg:static lg:left-auto lg:top-auto lg:w-20 lg:translate-x-0 lg:overflow-y-auto 2xl:!w-64 ${
                     sidebarOpen ? 'translate-x-0' : '-translate-x-64'
                 }`}
             >
-                <div className="flex justify-between mb-10 pr-3 sm:px-2">
+                <div className="mb-10 flex justify-between pr-3 sm:px-2">
                     <button
-                        className="lg:hidden text-slate-500 hover:text-slate-400"
+                        className="text-slate-500 hover:text-slate-400 lg:hidden"
                         onClick={() => toggleSidebar()}
                     >
                         <span className="sr-only">Toggle sidebar</span>
                         <svg
-                            className="w-6 h-6 fill-current"
+                            className="h-6 w-6 fill-current"
                             viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg"
                         >
@@ -93,28 +93,28 @@ export function Sidebar(props: Props) {
 
                 <div className="space-y-8">
                     <div>
-                        <h3 className="text-xs uppercase text-slate-500 font-semibold pl-3">
+                        <h3 className="pl-3 text-xs font-semibold uppercase text-slate-500">
                             <span
-                                className="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6"
+                                className="lg:sidebar-expanded:hidden hidden w-6 text-center lg:block 2xl:hidden"
                                 aria-hidden="true"
                             >
                                 •••
                             </span>
-                            <span className="lg:hidden lg:sidebar-expanded:block 2xl:block">
+                            <span className="lg:sidebar-expanded:block lg:hidden 2xl:block">
                                 Azkaban Admin
                             </span>
                         </h3>
 
-                        <ul className="mt-3 mb-3">LINKS</ul>
+                        <ul className="mb-3 mt-3">LINKS</ul>
 
-                        <h3 className="text-xs uppercase text-slate-500 font-semibold pl-3">
+                        <h3 className="pl-3 text-xs font-semibold uppercase text-slate-500">
                             <span
-                                className="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6"
+                                className="lg:sidebar-expanded:hidden hidden w-6 text-center lg:block 2xl:hidden"
                                 aria-hidden="true"
                             >
                                 •••
                             </span>
-                            <span className="lg:hidden lg:sidebar-expanded:block 2xl:block">
+                            <span className="lg:sidebar-expanded:block lg:hidden 2xl:block">
                                 Version: {version}
                             </span>
                         </h3>
diff --git a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/theme-toggle.tsx b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/theme-toggle.tsx
index df3ab83b..3549ba03 100644
--- a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/theme-toggle.tsx
+++ b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/theme-toggle.tsx
@@ -21,7 +21,7 @@ export function ThemeToggle() {
                 onChange={() => switchTheme()}
             />
             <label
-                className="flex items-center justify-center cursor-pointer w-8 h-8 bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 rounded-full"
+                className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80"
                 htmlFor="light-switch"
             >
                 <ThemeToggleIcon theme={theme} />
diff --git a/apps/azkaban-admin-ui/src/features/shared/components/ui/index.ts b/apps/azkaban-admin-ui/src/features/shared/components/ui/index.ts
index fe11dd3a..19eda998 100644
--- a/apps/azkaban-admin-ui/src/features/shared/components/ui/index.ts
+++ b/apps/azkaban-admin-ui/src/features/shared/components/ui/index.ts
@@ -1,3 +1,5 @@
 export * from './button';
 export * from './input';
 export * from './label';
+export * from './popover';
+export * from './toast';
diff --git a/package-lock.json b/package-lock.json
index e562eb47..3786b156 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -105,6 +105,7 @@
                 "nx": "19.1.2",
                 "postcss": "8.4.21",
                 "prettier": "^3.2.5",
+                "prettier-plugin-tailwindcss": "^0.6.5",
                 "tailwindcss": "3.4.3",
                 "ts-jest": "^29.1.3",
                 "ts-node": "10.9.2",
@@ -19874,6 +19875,80 @@
                 "url": "https://github.com/prettier/prettier?sponsor=1"
             }
         },
+        "node_modules/prettier-plugin-tailwindcss": {
+            "version": "0.6.5",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.5.tgz",
+            "integrity": "sha512-axfeOArc/RiGHjOIy9HytehlC0ZLeMaqY09mm8YCkMzznKiDkwFzOpBvtuhuv3xG5qB73+Mj7OCe2j/L1ryfuQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=14.21.3"
+            },
+            "peerDependencies": {
+                "@ianvs/prettier-plugin-sort-imports": "*",
+                "@prettier/plugin-pug": "*",
+                "@shopify/prettier-plugin-liquid": "*",
+                "@trivago/prettier-plugin-sort-imports": "*",
+                "@zackad/prettier-plugin-twig-melody": "*",
+                "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-sort-imports": "*",
+                "prettier-plugin-style-order": "*",
+                "prettier-plugin-svelte": "*"
+            },
+            "peerDependenciesMeta": {
+                "@ianvs/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "@prettier/plugin-pug": {
+                    "optional": true
+                },
+                "@shopify/prettier-plugin-liquid": {
+                    "optional": true
+                },
+                "@trivago/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "@zackad/prettier-plugin-twig-melody": {
+                    "optional": true
+                },
+                "prettier-plugin-astro": {
+                    "optional": true
+                },
+                "prettier-plugin-css-order": {
+                    "optional": true
+                },
+                "prettier-plugin-import-sort": {
+                    "optional": true
+                },
+                "prettier-plugin-jsdoc": {
+                    "optional": true
+                },
+                "prettier-plugin-marko": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-attributes": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-style-order": {
+                    "optional": true
+                },
+                "prettier-plugin-svelte": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/pretty-bytes": {
             "version": "5.6.0",
             "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
diff --git a/package.json b/package.json
index 0ea02e76..4e37ea01 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
         "nx": "19.1.2",
         "postcss": "8.4.21",
         "prettier": "^3.2.5",
+        "prettier-plugin-tailwindcss": "^0.6.5",
         "tailwindcss": "3.4.3",
         "ts-jest": "^29.1.3",
         "ts-node": "10.9.2",