diff --git a/.prettierrc b/.prettierrc
index 19916822..487f5a3f 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,5 +3,10 @@
   "printWidth": 100,
   "tabWidth": 2,
   "jsxSingleQuote": false,
-  "singleQuote": false
+  "singleQuote": false,
+
+  "plugins": ["@pandabox/prettier-plugin"],
+  "pandaFirstProps": ["as", "className", "layerStyle", "textStyle"],
+  "pandaStylePropsFirst": true,
+  "pandaSortOtherProps": true
 }
diff --git a/client/eslint.config.js b/client/eslint.config.js
index 8e7d2ec5..433600b7 100644
--- a/client/eslint.config.js
+++ b/client/eslint.config.js
@@ -5,6 +5,7 @@ import { fileURLToPath } from "url";
 import { dirname, resolve } from "path";
 import rootConfig from "../eslint.config.js";
 import panda from "@pandacss/eslint-plugin";
+import pandabox from "@pandabox/prettier-plugin";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -21,6 +22,7 @@ export default [
       "react-hooks": reactHooks,
       "jsx-a11y": jsxA11y,
       "@pandacss": panda,
+      "@pandabox": pandabox,
     },
     languageOptions: {
       parserOptions: {
diff --git a/client/package.json b/client/package.json
index 000db721..29a4a505 100644
--- a/client/package.json
+++ b/client/package.json
@@ -11,11 +11,13 @@
     "prepare": "panda codegen"
   },
   "dependencies": {
+    "@pandabox/panda-plugins": "^0.0.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "socket.io-client": "^4.8.1"
   },
   "devDependencies": {
+    "@pandabox/prettier-plugin": "^0.1.3",
     "@pandacss/dev": "^0.47.1",
     "@pandacss/eslint-plugin": "^0.2.0",
     "@types/react": "^18.3.12",
@@ -26,6 +28,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.14",
+    "prettier": "^3.0.0",
     "vite": "^5.4.10",
     "vite-tsconfig-paths": "^5.1.0"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3daec2d6..789a39b5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,6 +56,9 @@ importers:
 
   client:
     dependencies:
+      '@pandabox/panda-plugins':
+        specifier: ^0.0.8
+        version: 0.0.8
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -66,6 +69,9 @@ importers:
         specifier: ^4.8.1
         version: 4.8.1
     devDependencies:
+      '@pandabox/prettier-plugin':
+        specifier: ^0.1.3
+        version: 0.1.3(@pandacss/config@0.47.1)(@pandacss/core@0.47.1)(@pandacss/is-valid-prop@0.47.1)(@pandacss/node@0.47.1(typescript@5.3.3))(@pandacss/preset-base@0.47.1)(@pandacss/shared@0.47.1)
       '@pandacss/dev':
         specifier: ^0.47.1
         version: 0.47.1(typescript@5.3.3)
@@ -96,6 +102,9 @@ importers:
       eslint-plugin-react-refresh:
         specifier: ^0.4.14
         version: 0.4.14(eslint@8.57.1)
+      prettier:
+        specifier: ^3.0.0
+        version: 3.3.3
       vite:
         specifier: ^5.4.10
         version: 5.4.10(@types/node@20.17.6)(lightningcss@1.25.1)(terser@5.36.0)
@@ -956,6 +965,24 @@ packages:
     engines: {node: '>=8.0.0', npm: '>=5.0.0'}
     hasBin: true
 
+  '@pandabox/panda-plugins@0.0.8':
+    resolution: {integrity: sha512-rT2I3lxNG5c1XUwJH7hFrqVR3upkI8OpoxvW802OuLfPCg8j3nvG31VthzmeZ6SitRixxOY4J419HgChY20kRQ==}
+
+  '@pandabox/postcss-plugins@0.0.2':
+    resolution: {integrity: sha512-sOhfLohVcjPmA6mgYElLiNwnolEiM7Wqk4OBPSYC/k1Rpx2QyNenwBuB4mRtN9oV21N29fgfNZfTqMbT/fwQpw==}
+    peerDependencies:
+      postcss: ^8.4.35
+
+  '@pandabox/prettier-plugin@0.1.3':
+    resolution: {integrity: sha512-EvwXOpFatVYloXvYEPTm2HL53k6SEUSHRYp+DUdSRIT/KivrFmkSGfl0j8WfdDtxc+4j9tYQNs0rBkSvvxuChA==}
+    peerDependencies:
+      '@pandacss/config': '>=0.36.1'
+      '@pandacss/core': '>=0.36.1'
+      '@pandacss/is-valid-prop': '>=0.36.1'
+      '@pandacss/node': '>=0.36.1'
+      '@pandacss/preset-base': '>=0.36.1'
+      '@pandacss/shared': '>=0.36.1'
+
   '@pandacss/config@0.40.1':
     resolution: {integrity: sha512-Pzm0GpsrV8OoXgrBJ+V7aaKG39ytbLex1XsRKY6JThkAAz0rE2P8k4nbSQU8WXuG7mbOijBKYybi/cxRAIUL1w==}
 
@@ -5329,6 +5356,25 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
+  '@pandabox/panda-plugins@0.0.8':
+    dependencies:
+      '@pandabox/postcss-plugins': 0.0.2(postcss@8.4.47)
+      postcss: 8.4.47
+
+  '@pandabox/postcss-plugins@0.0.2(postcss@8.4.47)':
+    dependencies:
+      postcss: 8.4.47
+
+  '@pandabox/prettier-plugin@0.1.3(@pandacss/config@0.47.1)(@pandacss/core@0.47.1)(@pandacss/is-valid-prop@0.47.1)(@pandacss/node@0.47.1(typescript@5.3.3))(@pandacss/preset-base@0.47.1)(@pandacss/shared@0.47.1)':
+    dependencies:
+      '@pandacss/config': 0.47.1
+      '@pandacss/core': 0.47.1
+      '@pandacss/is-valid-prop': 0.47.1
+      '@pandacss/node': 0.47.1(typescript@5.3.3)
+      '@pandacss/preset-base': 0.47.1
+      '@pandacss/shared': 0.47.1
+      micromatch: 4.0.8
+
   '@pandacss/config@0.40.1':
     dependencies:
       '@pandacss/logger': 0.40.1