diff --git a/.gitignore b/.gitignore
index bb3e03a..53015af 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 package-lock.json
 /node_modules
-/dist
\ No newline at end of file
+/dist
+.vscode
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..66b85cd
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,12 @@
+# Build output
+dist/
+node_modules/
+
+# Generated / vendored
+*.min.js
+*.min.css
+
+# Lock files
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..ef25880
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,40 @@
+import js from "@eslint/js";
+import tseslint from "typescript-eslint";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import prettierConfig from "eslint-config-prettier";
+
+export default tseslint.config(
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  prettierConfig,
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        React: "readonly",
+        JSX: "readonly",
+      },
+    },
+    plugins: {
+      react,
+      "react-hooks": reactHooks,
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+    rules: {
+      ...react.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+    },
+  }
+);
diff --git a/package.json b/package.json
index 28572e6..315282c 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,10 @@
         "build:wp": "wp-scripts build --config webpack.config.js",
         "build:types": "tsc --emitDeclarationOnly",
         "start": "wp-scripts start --config webpack.config.js",
-        "lint": "eslint src --ext .ts,.tsx",
+        "lint": "eslint src",
+        "lint:fix": "eslint src --fix",
+        "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
+        "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
         "typecheck": "tsc --noEmit",
         "prepare": "npm run build"
     },
@@ -62,15 +65,20 @@
         "tw-animate-css": "^1.4.0"
     },
     "devDependencies": {
+        "@eslint/js": "^9.15.0",
         "@tailwindcss/postcss": "^4.1.18",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "@wordpress/scripts": "^30.25.0",
-        "autoprefixer": "^10.4.23",
-        "postcss": "^8.5.6",
-        "postcss-cli": "^11.0.1",
+        "eslint": "^9.15.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-react": "^7.37.0",
+        "eslint-plugin-react-hooks": "^5.0.0",
+        "prettier": "^3.8.1",
+        "prettier-plugin-tailwindcss": "^0.7.2",
         "tailwindcss": "^4.1.18",
-        "typescript": "^5.0.0"
+        "typescript": "^5.0.0",
+        "typescript-eslint": "^8.15.0"
     },
     "keywords": [
         "wordpress",
@@ -87,5 +95,8 @@
     "repository": {
         "type": "git",
         "url": "https://github.com/mrabbani/plugin-ui.git"
+    },
+    "overrides": {
+        "eslint": "$eslint"
     }
 }
diff --git a/prettier.config.mjs b/prettier.config.mjs
new file mode 100644
index 0000000..1cf5d02
--- /dev/null
+++ b/prettier.config.mjs
@@ -0,0 +1,16 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
+export default {
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'es5',
+  tabWidth: 2,
+  printWidth: 80,
+  endOfLine: 'lf',
+  tailwindStylesheet: path.join(__dirname, 'src/styles.css'),
+  plugins: ['prettier-plugin-tailwindcss'],
+};