diff --git a/eslint.config.js b/eslint.config.js
index f4616740..52304070 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -19,5 +19,12 @@ export default tseslint.config([
       ecmaVersion: 2020,
       globals: globals.browser,
     },
+    rules: {
+      "@typescript-eslint/no-explicit-any": "off",
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
   },
 ]);
diff --git a/nginx/studio.conf.template b/nginx/studio.conf.template
index 71d3f265..66945cee 100644
--- a/nginx/studio.conf.template
+++ b/nginx/studio.conf.template
@@ -2,6 +2,7 @@ server {
   listen 4173;
   server_name localhost;
   proxy_http_version 1.1;
+  client_max_body_size 50m;
 
   root /usr/share/nginx/html;
 
@@ -15,5 +16,7 @@ server {
   location /api {
       proxy_pass ${VITE_BACKEND_BASE_URL};
       proxy_ssl_server_name on;
+      proxy_read_timeout 300s;
+      proxy_send_timeout 300s;
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 482168bc..00f1ac0f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "pechastudio",
-  "version": "2025.11.05.0657",
+  "version": "2026.05.28.1200",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pechastudio",
-      "version": "2025.11.05.0657",
+      "version": "2026.05.28.1200",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/modifiers": "^9.0.0",
@@ -22,6 +22,7 @@
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tooltip": "^1.2.8",
+        "@tailwindcss/typography": "^0.5.20",
         "@tailwindcss/vite": "^4.1.12",
         "@tanstack/react-query": "^5.85.5",
         "@tolgee/react": "^6.2.7",
@@ -30,6 +31,7 @@
         "axios": "^1.11.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
         "crypto-js": "^4.2.0",
         "date-fns": "^4.1.0",
         "radix-ui": "^1.4.3",
@@ -41,7 +43,10 @@
         "react-hook-form": "^7.62.0",
         "react-icons": "^5.5.0",
         "react-intersection-observer": "^10.0.3",
+        "react-markdown": "^10.1.0",
         "react-router-dom": "^7.8.1",
+        "react-split-pane": "^3.2.0",
+        "recharts": "^3.10.0",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.12",
@@ -2923,6 +2928,32 @@
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
       "license": "MIT"
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.12.0.tgz",
+      "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.32",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.32.tgz",
@@ -3190,6 +3221,12 @@
         "win32"
       ]
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
     "node_modules/@standard-schema/utils": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
@@ -3453,6 +3490,18 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.20",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.20.tgz",
+      "integrity": "sha512-hwbzQuNUfcPvbegQFatVPl/MY/tcM9KLl963hQ5laJKPh81TEZ1+dNG9PirGvcaDBkp+BCshExAyKVPW91dozw==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >=4.0.0 || insiders"
+      }
+    },
     "node_modules/@tailwindcss/vite": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.12.tgz",
@@ -3708,6 +3757,78 @@
       "integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/debug": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
+      "integrity": "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
     "node_modules/@types/deep-eql": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
@@ -3721,6 +3842,24 @@
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/history": {
       "version": "4.7.11",
       "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
@@ -3735,6 +3874,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "24.3.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.3.0.tgz",
@@ -3749,7 +3903,6 @@
       "version": "19.2.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -3788,6 +3941,18 @@
         "@types/react-router": "*"
       }
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.40.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.40.0.tgz",
@@ -4059,6 +4224,12 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.1.tgz",
+      "integrity": "sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ==",
+      "license": "ISC"
+    },
     "node_modules/@userback/widget": {
       "version": "0.3.11",
       "resolved": "https://registry.npmjs.org/@userback/widget/-/widget-0.3.11.tgz",
@@ -4420,6 +4591,16 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -4538,6 +4719,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chai": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
@@ -4572,6 +4763,46 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/check-error": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
@@ -4612,6 +4843,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmdk": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+      "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-id": "^1.1.0",
+        "@radix-ui/react-primitive": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4644,6 +4891,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4695,6 +4952,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/cssstyle": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.6.0.tgz",
@@ -4713,9 +4982,129 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/data-urls": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
@@ -4750,7 +5139,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
       "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -4771,6 +5159,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz",
+      "integrity": "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/deep-eql": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
@@ -4801,7 +5208,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -4822,6 +5228,19 @@
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
       "license": "MIT"
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/dom-accessibility-api": {
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
@@ -4943,6 +5362,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.49.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.49.0.tgz",
+      "integrity": "sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
     "node_modules/esbuild": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.9.tgz",
@@ -5175,6 +5604,16 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -5195,6 +5634,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
     "node_modules/expect-type": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.2.2.tgz",
@@ -5205,6 +5650,12 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -5621,8 +6072,48 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/html-encoding-sniffer": {
-      "version": "4.0.0",
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+      "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-js": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
       "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
       "dev": true,
@@ -5641,6 +6132,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/http-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -5692,6 +6193,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "11.1.15",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.15.tgz",
+      "integrity": "sha512-VrNANlmnWQnh5COXIIOQXM9oOJw7naGKlBT74ZOOR6lpVXc3gFEu9FJLDFcpCJ2j+NWr8TIwtWD//T6ZX6TKiQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -5729,6 +6240,55 @@
         "node": ">=8"
       }
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+      "license": "MIT"
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -5762,6 +6322,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -5772,6 +6342,18 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -6276,6 +6858,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -6366,25 +6958,620 @@
         "node": ">=10"
       }
     },
-    "node_modules/math-intrinsics": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
-      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.3.tgz",
+      "integrity": "sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark": "^4.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+      "integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
+      "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromark": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
+      "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz",
+      "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
+      "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz",
+      "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
+      "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz",
+      "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz",
+      "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz",
+      "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz",
+      "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz",
+      "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz",
+      "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz",
+      "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
+      "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz",
+      "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz",
+      "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
       }
     },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
+    "node_modules/micromark-util-subtokenize": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz",
+      "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT",
-      "engines": {
-        "node": ">= 8"
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
       }
     },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -6483,7 +7670,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/nanoid": {
@@ -6610,6 +7796,31 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
     "node_modules/parse5": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
@@ -6731,6 +7942,19 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -6804,6 +8028,16 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/property-information": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.2.0.tgz",
+      "integrity": "sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -7036,10 +8270,59 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
+    "node_modules/react-markdown": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
+      "integrity": "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
+    "node_modules/react-redux": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
+      "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -7135,6 +8418,19 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-split-pane": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-split-pane/-/react-split-pane-3.2.0.tgz",
+      "integrity": "sha512-tH2SaMqBZ7Ypcmj6I/2fIR0gdeE0Q5ve66T51UyXcSqIgPGJh40bOMTVCAFjB0Q3OB5+Aw/4ECVWU+YU9SL88Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@@ -7157,6 +8453,36 @@
         }
       }
     },
+    "node_modules/recharts": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.10.0.tgz",
+      "integrity": "sha512-wulMvfncpIlmu2uFtRU/mE5/+NiVtASXkw2KdwJTdHs3WsASX0WxZlX+rpKgyn5BDbIhkPtCpUKkB9XNK5KE0w==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^11.1.8",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.2.0",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -7171,6 +8497,60 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-rehype": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
+      "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz",
+      "integrity": "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==",
+      "license": "MIT"
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -7366,6 +8746,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -7434,6 +8824,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
@@ -7523,6 +8927,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/style-to-js": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+      "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.14"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+      "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.7"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -7635,6 +9057,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -7783,6 +9211,26 @@
         "node": ">=18"
       }
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
@@ -7870,6 +9318,93 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/unified": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
@@ -7975,6 +9510,62 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/vite": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.3.tgz",
@@ -8442,6 +10033,16 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 56f770ac..e5c13e85 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "pechastudio",
   "private": true,
-  "version": "2025.11.05.0657",
+  "version": "2026.05.28.1200",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -34,6 +34,7 @@
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.1.12",
     "@tanstack/react-query": "^5.85.5",
     "@tolgee/react": "^6.2.7",
@@ -42,6 +43,7 @@
     "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "crypto-js": "^4.2.0",
     "date-fns": "^4.1.0",
     "radix-ui": "^1.4.3",
@@ -53,7 +55,10 @@
     "react-hook-form": "^7.62.0",
     "react-icons": "^5.5.0",
     "react-intersection-observer": "^10.0.3",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^7.8.1",
+    "react-split-pane": "^3.2.0",
+    "recharts": "^3.10.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.12",
diff --git a/src/components/api/searchApi.ts b/src/components/api/searchApi.ts
index 0bc4d4a3..d1dd0fe5 100644
--- a/src/components/api/searchApi.ts
+++ b/src/components/api/searchApi.ts
@@ -18,6 +18,8 @@ type SearchTextDetails = {
   segmentId?: string;
   direction?: "next" | "previous";
   size?: number;
+  start?: number;
+  end?: number;
 };
 export const searchSources = async ({
   query,
@@ -56,14 +58,58 @@ export const fetchTextDetails = async ({
   segmentId,
   direction = "next",
   size = 20,
+  start,
+  end,
 }: SearchTextDetails) => {
   const { data } = await axiosInstance.post(`/api/v1/texts/${textId}/details`, {
     ...(contentId && { content_id: contentId }),
     ...(segmentId && { segment_id: segmentId }),
+    ...(start != null && { start }),
+    ...(end != null && { end }),
     direction,
     size,
   });
   return data;
 };
 
+type SearchSegments = {
+  content: string;
+};
+
+export type SegmentSearchResult = {
+  id: string;
+  pecha_segment_id?: string;
+  text_id: string;
+  content: string;
+  type: string;
+};
+
+export type SegmentSearchResponse = {
+  segments: SegmentSearchResult[];
+};
+
+export const searchSegments = async ({
+  content,
+}: SearchSegments): Promise<SegmentSearchResponse> => {
+  const { data } = await axiosInstance.post(`/api/v1/segments/search`, {
+    content,
+  });
+  return data;
+};
+
+export const fetchTextLanguages = async (textId: string) => {
+  const { data } = await axiosInstance.get(`/api/v1/texts/${textId}/languages`);
+  return data;
+};
+
+export const fetchLanguageVersions = async (
+  textId: string,
+  language: string,
+) => {
+  const { data } = await axiosInstance.get(
+    `/api/v1/texts/${textId}/languages/${language}/versions`,
+  );
+  return data;
+};
+
 export type { SearchCommon };
diff --git a/src/components/auth/PlanRouteGuard.test.tsx b/src/components/auth/PlanRouteGuard.test.tsx
new file mode 100644
index 00000000..23b915e0
--- /dev/null
+++ b/src/components/auth/PlanRouteGuard.test.tsx
@@ -0,0 +1,63 @@
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { describe, expect, it, vi } from "vitest";
+import PlanRouteGuard from "./PlanRouteGuard";
+import { ROUTES } from "@/routes/paths";
+
+vi.mock("@/hooks/useUserInfo", () => ({
+  useUserInfo: vi.fn(),
+}));
+
+import { useUserInfo } from "@/hooks/useUserInfo";
+
+describe("PlanRouteGuard", () => {
+  it("redirects reviewers to dashboard", () => {
+    vi.mocked(useUserInfo).mockReturnValue({
+      data: { id: "1", platform_role: "REVIEWER" },
+      isLoading: false,
+    } as ReturnType<typeof useUserInfo>);
+
+    render(
+      <MemoryRouter initialEntries={["/plan/plan-1"]}>
+        <Routes>
+          <Route
+            path="/plan/:planId"
+            element={
+              <PlanRouteGuard>
+                <div>Plan page</div>
+              </PlanRouteGuard>
+            }
+          />
+          <Route path={ROUTES.dashboard} element={<div>Dashboard</div>} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText("Dashboard")).toBeInTheDocument();
+    expect(screen.queryByText("Plan page")).not.toBeInTheDocument();
+  });
+
+  it("renders children for creators", () => {
+    vi.mocked(useUserInfo).mockReturnValue({
+      data: { id: "1", platform_role: "CREATOR" },
+      isLoading: false,
+    } as ReturnType<typeof useUserInfo>);
+
+    render(
+      <MemoryRouter initialEntries={["/plan/plan-1"]}>
+        <Routes>
+          <Route
+            path="/plan/:planId"
+            element={
+              <PlanRouteGuard>
+                <div>Plan page</div>
+              </PlanRouteGuard>
+            }
+          />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText("Plan page")).toBeInTheDocument();
+  });
+});
diff --git a/src/components/auth/PlanRouteGuard.tsx b/src/components/auth/PlanRouteGuard.tsx
new file mode 100644
index 00000000..4458e878
--- /dev/null
+++ b/src/components/auth/PlanRouteGuard.tsx
@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import { Navigate } from "react-router-dom";
+import { useUserInfo } from "@/hooks/useUserInfo";
+import { canAccessPlanRoutes } from "@/lib/platformAccess";
+import { ROUTES } from "@/routes/paths";
+
+type PlanRouteGuardProps = {
+  children: ReactNode;
+};
+
+/** Blocks `/plan/*` CMS routes for platform REVIEWER (read-only staff). */
+const PlanRouteGuard = ({ children }: PlanRouteGuardProps) => {
+  const { data: userInfo, isLoading } = useUserInfo();
+
+  if (isLoading) {
+    return (
+      <div className="flex h-[calc(100vh-40px)] items-center justify-center text-muted-foreground">
+        Loading…
+      </div>
+    );
+  }
+
+  if (userInfo && !canAccessPlanRoutes(userInfo.platform_role)) {
+    return <Navigate to={ROUTES.dashboard} replace />;
+  }
+
+  return <>{children}</>;
+};
+
+export default PlanRouteGuard;
diff --git a/src/components/auth/ProtectedRoute.test.tsx b/src/components/auth/ProtectedRoute.test.tsx
index 3af7cd01..a7aab46b 100644
--- a/src/components/auth/ProtectedRoute.test.tsx
+++ b/src/components/auth/ProtectedRoute.test.tsx
@@ -4,11 +4,16 @@ import { vi } from "vitest";
 import ProtectedRoute from "./ProtectedRoute";
 
 const mockUseAuth = vi.fn();
+const mockUseUserInfo = vi.fn();
 
 vi.mock("@/config/auth-context", () => ({
   useAuth: () => mockUseAuth(),
 }));
 
+vi.mock("@/hooks/useUserInfo", () => ({
+  useUserInfo: () => mockUseUserInfo(),
+}));
+
 const mockNavigate = vi.fn();
 vi.mock("react-router-dom", async () => {
   const actual = await vi.importActual("react-router-dom");
@@ -28,6 +33,15 @@ const renderWithRouter = (component: React.ReactElement) => {
 describe("ProtectedRoute Component", () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mockUseUserInfo.mockReturnValue({
+      data: {
+        is_verified: true,
+        is_active: true,
+        has_group: true,
+        platform_role: "CREATOR",
+      },
+      isLoading: false,
+    });
   });
 
   it("displays loading state when authentication is loading", () => {
@@ -58,20 +72,15 @@ describe("ProtectedRoute Component", () => {
       </ProtectedRoute>,
     );
 
-    expect(screen.getByTestId("navigate")).toBeDefined();
     expect(screen.getByTestId("navigate")).toHaveAttribute("data-to", "/login");
-    expect(screen.getByTestId("navigate")).toHaveAttribute(
-      "data-replace",
-      "true",
-    );
-    expect(screen.queryByText("Protected Content")).toBeNull();
     expect(mockNavigate).toHaveBeenCalledWith("/login", true);
   });
 
-  it("renders children when user is authenticated and not loading", () => {
+  it("renders children when user is authenticated and onboarding complete", () => {
     mockUseAuth.mockReturnValue({
       isLoggedIn: true,
       isAuthLoading: false,
+      logout: vi.fn(),
     });
 
     renderWithRouter(
@@ -81,40 +90,21 @@ describe("ProtectedRoute Component", () => {
     );
 
     expect(screen.getByText("Protected Content")).toBeDefined();
-    expect(screen.queryByText("common.loading")).toBeNull();
-    expect(screen.queryByTestId("navigate")).toBeNull();
-    expect(mockNavigate).not.toHaveBeenCalled();
   });
 
-  it("renders complex children components when authenticated", () => {
+  it("redirects inactive users to login", () => {
     mockUseAuth.mockReturnValue({
       isLoggedIn: true,
       isAuthLoading: false,
+      logout: vi.fn(),
     });
-
-    const ComplexChild = () => (
-      <div>
-        <h1>Dashboard</h1>
-        <button>Action Button</button>
-        <p>Some content here</p>
-      </div>
-    );
-
-    renderWithRouter(
-      <ProtectedRoute>
-        <ComplexChild />
-      </ProtectedRoute>,
-    );
-
-    expect(screen.getByText("Dashboard")).toBeDefined();
-    expect(screen.getByText("Action Button")).toBeDefined();
-    expect(screen.getByText("Some content here")).toBeDefined();
-  });
-
-  it("does not render children during loading state even if user appears logged in", () => {
-    mockUseAuth.mockReturnValue({
-      isLoggedIn: true,
-      isAuthLoading: true,
+    mockUseUserInfo.mockReturnValue({
+      data: {
+        is_verified: true,
+        is_active: false,
+        has_group: true,
+      },
+      isLoading: false,
     });
 
     renderWithRouter(
@@ -123,14 +113,22 @@ describe("ProtectedRoute Component", () => {
       </ProtectedRoute>,
     );
 
-    expect(screen.getByText("common.loading")).toBeDefined();
-    expect(screen.queryByText("Protected Content")).toBeNull();
+    expect(screen.getByTestId("navigate")).toHaveAttribute("data-to", "/login");
   });
 
-  it("uses the correct CSS classes for loading state", () => {
+  it("redirects to groups when user has no group", () => {
     mockUseAuth.mockReturnValue({
-      isLoggedIn: false,
-      isAuthLoading: true,
+      isLoggedIn: true,
+      isAuthLoading: false,
+      logout: vi.fn(),
+    });
+    mockUseUserInfo.mockReturnValue({
+      data: {
+        is_verified: true,
+        is_active: true,
+        has_group: false,
+      },
+      isLoading: false,
     });
 
     renderWithRouter(
@@ -139,13 +137,9 @@ describe("ProtectedRoute Component", () => {
       </ProtectedRoute>,
     );
 
-    const loadingContainer = screen.getByText("common.loading").parentElement;
-    expect(loadingContainer).toHaveClass(
-      "flex",
-      "items-center",
-      "justify-center",
-      "h-full",
+    expect(screen.getByTestId("navigate")).toHaveAttribute(
+      "data-to",
+      "/groups",
     );
-    expect(screen.getByText("common.loading")).toHaveClass("text-lg");
   });
 });
diff --git a/src/components/auth/ProtectedRoute.tsx b/src/components/auth/ProtectedRoute.tsx
index e6506b7b..0da969b3 100644
--- a/src/components/auth/ProtectedRoute.tsx
+++ b/src/components/auth/ProtectedRoute.tsx
@@ -1,14 +1,35 @@
+import { useEffect } from "react";
 import { useAuth } from "@/config/auth-context";
-import { Navigate } from "react-router-dom";
+import { Navigate, useLocation } from "react-router-dom";
 import { useTranslate } from "@tolgee/react";
+import { useUserInfo } from "@/hooks/useUserInfo";
+import {
+  needsGroupOnboardingRedirect,
+  needsInactiveLogout,
+  needsVerifyEmailRedirect,
+} from "@/lib/platformAccess";
+import { ROUTES } from "@/routes/paths";
+
 interface ProtectedRouteProps {
   children: React.ReactNode;
 }
 
 const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
-  const { isLoggedIn, isAuthLoading } = useAuth();
+  const { isLoggedIn, isAuthLoading, logout } = useAuth();
   const { t } = useTranslate();
-  if (isAuthLoading) {
+  const location = useLocation();
+  const { data: userInfo, isLoading: isUserInfoLoading } = useUserInfo({
+    enabled: isLoggedIn,
+  });
+
+  useEffect(() => {
+    if (!isLoggedIn || isUserInfoLoading || !userInfo) return;
+    if (needsInactiveLogout(userInfo)) {
+      logout();
+    }
+  }, [isLoggedIn, isUserInfoLoading, userInfo, logout]);
+
+  if (isAuthLoading || (isLoggedIn && isUserInfoLoading)) {
     return (
       <div className="flex items-center justify-center h-full">
         <div className="text-lg">{t("common.loading")}</div>
@@ -17,7 +38,33 @@ const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
   }
 
   if (!isLoggedIn) {
-    return <Navigate to="/login" replace />;
+    const inactive =
+      (location.state as { inactive?: boolean } | null)?.inactive === true;
+    return (
+      <Navigate
+        to={ROUTES.login}
+        replace
+        state={inactive ? { inactive: true } : undefined}
+      />
+    );
+  }
+
+  if (userInfo && needsInactiveLogout(userInfo)) {
+    return (
+      <Navigate
+        to={ROUTES.login}
+        replace
+        state={{ inactive: true, message: "Author not active" }}
+      />
+    );
+  }
+
+  if (userInfo && needsVerifyEmailRedirect(userInfo)) {
+    return <Navigate to={ROUTES.verifyEmail} replace />;
+  }
+
+  if (userInfo && needsGroupOnboardingRedirect(location.pathname, userInfo)) {
+    return <Navigate to={ROUTES.groups} replace />;
   }
 
   return <>{children}</>;
diff --git a/src/components/auth/login/Login.tsx b/src/components/auth/login/Login.tsx
index 6f1d2c19..0717305d 100644
--- a/src/components/auth/login/Login.tsx
+++ b/src/components/auth/login/Login.tsx
@@ -2,26 +2,47 @@ import { Button } from "@/components/ui/atoms/button";
 import { Input } from "@/components/ui/atoms/input";
 import { Label } from "@/components/ui/atoms/label";
 import ContainerLayout from "@/components/ui/atoms/studio-card";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { useMutation } from "@tanstack/react-query";
 import axiosInstance from "@/config/axios-config";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useAuth } from "@/config/auth-context";
 import { useTranslate } from "@tolgee/react";
 import { createPasswordHash } from "@/lib/utils";
+import {
+  AUTHOR_NOT_ACTIVE_DETAIL,
+  isAuthorNotActiveDetail,
+} from "@/lib/platformAccess";
+import { getApiErrorDetail } from "@/lib/apiErrors";
+import { ROUTES } from "@/routes/paths";
+
 interface LoginData {
   email: string;
   password: string;
 }
+
 const Login = () => {
   const { t } = useTranslate();
   const navigate = useNavigate();
+  const location = useLocation();
   const [email, setEmail] = useState("");
   const [errors, setErrors] = useState<string>("");
   const [successMessage, setSuccessMessage] = useState<string>("");
   const [showEmailReverify, setShowEmailReverify] = useState<boolean>(false);
+  const [inactiveOnly, setInactiveOnly] = useState(false);
   const { login } = useAuth();
 
+  useEffect(() => {
+    const state = location.state as {
+      inactive?: boolean;
+      message?: string;
+    } | null;
+    if (state?.inactive) {
+      setInactiveOnly(true);
+      setErrors(state.message ?? AUTHOR_NOT_ACTIVE_DETAIL);
+    }
+  }, [location.state]);
+
   const loginMutation = useMutation<any, Error, LoginData>({
     mutationFn: async (loginData: LoginData) => {
       const response = await axiosInstance.post(
@@ -34,17 +55,24 @@ const Login = () => {
       const accessToken = data.auth.access_token;
       const refreshToken = data.auth.refresh_token;
       login(accessToken, refreshToken);
-      navigate("/dashboard");
+      navigate(ROUTES.dashboard);
     },
     onError: (error: any) => {
-      const errorMsg = error?.response?.data?.detail || "Login failed";
-
-      const emailVerificationErrorMessage = errorMsg
+      const detail = getApiErrorDetail(error) ?? "Login failed";
+      const emailVerificationErrorMessage = detail
         .toLowerCase()
         .includes("author not verified");
 
+      if (isAuthorNotActiveDetail(detail)) {
+        setInactiveOnly(true);
+        setShowEmailReverify(false);
+        setErrors(AUTHOR_NOT_ACTIVE_DETAIL);
+        return;
+      }
+
+      setInactiveOnly(false);
       setShowEmailReverify(emailVerificationErrorMessage);
-      setErrors(errorMsg || "");
+      setErrors(detail);
     },
   });
 
@@ -62,8 +90,8 @@ const Login = () => {
     },
     onError: (error: any) => {
       const errorMsg =
-        error?.response?.data?.detail || "Email re-verification failed";
-      setErrors(errorMsg || "");
+        getApiErrorDetail(error) || "Email re-verification failed";
+      setErrors(errorMsg);
       setSuccessMessage("");
     },
   });
@@ -72,6 +100,7 @@ const Login = () => {
     e.preventDefault();
     setShowEmailReverify(false);
     setSuccessMessage("");
+    setInactiveOnly(false);
     const formData = new FormData(e.currentTarget);
     const password = formData.get("password") as string;
     const clientPassword = createPasswordHash(email, password);
@@ -87,6 +116,22 @@ const Login = () => {
     emailReverifyMutation.mutate({ email });
   };
 
+  if (inactiveOnly) {
+    return (
+      <ContainerLayout title={t("studio.login.title")}>
+        <div className="w-full max-w-[425px] space-y-4 text-center">
+          <p className="text-sm text-muted-foreground">
+            {errors || AUTHOR_NOT_ACTIVE_DETAIL}
+          </p>
+          <p className="text-xs text-muted-foreground">
+            Your account must be activated by a platform administrator before
+            you can sign in.
+          </p>
+        </div>
+      </ContainerLayout>
+    );
+  }
+
   return (
     <ContainerLayout title={t("studio.login.title")}>
       <form className="w-full max-w-[425px] space-y-4" onSubmit={handleLogin}>
diff --git a/src/components/routes/admin-authors/AdminAuthorsPage.tsx b/src/components/routes/admin-authors/AdminAuthorsPage.tsx
new file mode 100644
index 00000000..b2857dd9
--- /dev/null
+++ b/src/components/routes/admin-authors/AdminAuthorsPage.tsx
@@ -0,0 +1,245 @@
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { Button } from "@/components/ui/atoms/button";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import { useUserInfo, USER_INFO_QUERY_KEY } from "@/hooks/useUserInfo";
+import {
+  canAccessAdminAuthors,
+  isSuperAdmin,
+  type PlatformRole,
+} from "@/lib/platformAccess";
+import { Navigate } from "react-router-dom";
+import { ROUTES } from "@/routes/paths";
+import {
+  activateAuthor,
+  fetchAdminAuthors,
+  patchAuthorPlatformRole,
+  suspendAuthor,
+  type AdminAuthorDTO,
+} from "./api/adminAuthorsApi";
+
+const PAGE_SIZE = 20;
+
+const AdminAuthorsPage = () => {
+  const { data: userInfo } = useUserInfo();
+  const queryClient = useQueryClient();
+  const [page, setPage] = useState(0);
+  const [activationQueue, setActivationQueue] = useState(true);
+
+  const canAccess = Boolean(
+    userInfo && canAccessAdminAuthors(userInfo.platform_role),
+  );
+  const writeEnabled = isSuperAdmin(userInfo?.platform_role);
+  const showActionsColumn = writeEnabled;
+  const tableColumnCount = showActionsColumn ? 6 : 5;
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["admin-authors", page, activationQueue],
+    queryFn: () =>
+      fetchAdminAuthors({
+        skip: page * PAGE_SIZE,
+        limit: PAGE_SIZE,
+        ...(activationQueue ? { is_verified: true, is_active: false } : {}),
+      }),
+    enabled: canAccess,
+  });
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: ["admin-authors"] });
+    queryClient.invalidateQueries({ queryKey: USER_INFO_QUERY_KEY });
+  };
+
+  const activateMutation = useMutation({
+    mutationFn: activateAuthor,
+    onSuccess: () => {
+      toast.success("Author activated");
+      invalidate();
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const suspendMutation = useMutation({
+    mutationFn: suspendAuthor,
+    onSuccess: () => {
+      toast.success("Author suspended");
+      invalidate();
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const roleMutation = useMutation({
+    mutationFn: ({ id, role }: { id: string; role: PlatformRole }) =>
+      patchAuthorPlatformRole(id, role),
+    onSuccess: () => {
+      toast.success("Platform role updated");
+      invalidate();
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const authors = data?.authors ?? [];
+  const total = data?.total ?? 0;
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+
+  const displayName = (a: AdminAuthorDTO) =>
+    [a.firstname, a.lastname].filter(Boolean).join(" ").trim() || a.email;
+
+  if (userInfo && !canAccess) {
+    return <Navigate to={ROUTES.dashboard} replace />;
+  }
+
+  return (
+    <div className="font-dynamic border h-[calc(100vh-40px)] overflow-auto bg-[#F5F5F5] dark:bg-[#181818] my-4 rounded-l-2xl">
+      <div className="px-4 pt-10 pb-4 flex flex-wrap items-center justify-between gap-3">
+        <h1 className="text-xl font-semibold">Authors</h1>
+        <div className="flex gap-2">
+          <Button
+            variant={activationQueue ? "default" : "outline"}
+            size="sm"
+            onClick={() => {
+              setActivationQueue(true);
+              setPage(0);
+            }}
+          >
+            Activation queue
+          </Button>
+          <Button
+            variant={!activationQueue ? "default" : "outline"}
+            size="sm"
+            onClick={() => {
+              setActivationQueue(false);
+              setPage(0);
+            }}
+          >
+            All authors
+          </Button>
+        </div>
+      </div>
+
+      {error ? (
+        <p className="px-4 text-destructive text-sm">
+          {getApiErrorMessage(error)}
+        </p>
+      ) : null}
+
+      <div className="px-4 pb-8 overflow-x-auto">
+        <Pecha.Table>
+          <Pecha.TableHeader>
+            <Pecha.TableRow>
+              <Pecha.TableHead>Name</Pecha.TableHead>
+              <Pecha.TableHead>Email</Pecha.TableHead>
+              <Pecha.TableHead>Role</Pecha.TableHead>
+              <Pecha.TableHead>Verified</Pecha.TableHead>
+              <Pecha.TableHead>Active</Pecha.TableHead>
+              {showActionsColumn ? (
+                <Pecha.TableHead>Actions</Pecha.TableHead>
+              ) : null}
+            </Pecha.TableRow>
+          </Pecha.TableHeader>
+          <Pecha.TableBody>
+            {isLoading ? (
+              <Pecha.TableRow>
+                <Pecha.TableCell colSpan={tableColumnCount}>
+                  Loading…
+                </Pecha.TableCell>
+              </Pecha.TableRow>
+            ) : authors.length === 0 ? (
+              <Pecha.TableRow>
+                <Pecha.TableCell colSpan={tableColumnCount}>
+                  No authors found.
+                </Pecha.TableCell>
+              </Pecha.TableRow>
+            ) : (
+              authors.map((author) => (
+                <Pecha.TableRow key={author.id}>
+                  <Pecha.TableCell>{displayName(author)}</Pecha.TableCell>
+                  <Pecha.TableCell>{author.email}</Pecha.TableCell>
+                  <Pecha.TableCell>
+                    {writeEnabled ? (
+                      <select
+                        className="rounded border bg-background px-2 py-1 text-sm"
+                        value={author.platform_role}
+                        onChange={(e) =>
+                          roleMutation.mutate({
+                            id: author.id,
+                            role: e.target.value as PlatformRole,
+                          })
+                        }
+                        disabled={roleMutation.isPending}
+                      >
+                        <option value="CREATOR">CREATOR</option>
+                        <option value="REVIEWER">REVIEWER</option>
+                        <option value="SUPER_ADMIN">SUPER_ADMIN</option>
+                      </select>
+                    ) : (
+                      author.platform_role
+                    )}
+                  </Pecha.TableCell>
+                  <Pecha.TableCell>
+                    {author.is_verified ? "Yes" : "No"}
+                  </Pecha.TableCell>
+                  <Pecha.TableCell>
+                    {author.is_active ? "Yes" : "No"}
+                  </Pecha.TableCell>
+                  {showActionsColumn ? (
+                    <Pecha.TableCell>
+                      <div className="flex gap-2">
+                        {!author.is_active ? (
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            disabled={activateMutation.isPending}
+                            onClick={() => activateMutation.mutate(author.id)}
+                          >
+                            Activate
+                          </Button>
+                        ) : (
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            disabled={suspendMutation.isPending}
+                            onClick={() => suspendMutation.mutate(author.id)}
+                          >
+                            Suspend
+                          </Button>
+                        )}
+                      </div>
+                    </Pecha.TableCell>
+                  ) : null}
+                </Pecha.TableRow>
+              ))
+            )}
+          </Pecha.TableBody>
+        </Pecha.Table>
+
+        {totalPages > 1 ? (
+          <div className="mt-4 flex gap-2">
+            <Button
+              size="sm"
+              variant="outline"
+              disabled={page <= 0}
+              onClick={() => setPage((p) => p - 1)}
+            >
+              Previous
+            </Button>
+            <span className="text-sm self-center">
+              Page {page + 1} of {totalPages}
+            </span>
+            <Button
+              size="sm"
+              variant="outline"
+              disabled={page + 1 >= totalPages}
+              onClick={() => setPage((p) => p + 1)}
+            >
+              Next
+            </Button>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default AdminAuthorsPage;
diff --git a/src/components/routes/admin-authors/api/adminAuthorsApi.ts b/src/components/routes/admin-authors/api/adminAuthorsApi.ts
new file mode 100644
index 00000000..10f8f9e7
--- /dev/null
+++ b/src/components/routes/admin-authors/api/adminAuthorsApi.ts
@@ -0,0 +1,72 @@
+import axiosInstance from "@/config/axios-config";
+import type { PlatformRole } from "@/lib/platformAccess";
+
+export type AdminAuthorDTO = {
+  id: string;
+  email: string;
+  firstname?: string | null;
+  lastname?: string | null;
+  platform_role: PlatformRole;
+  is_verified: boolean;
+  is_active: boolean;
+  has_group: boolean;
+  created_at?: string;
+};
+
+export type AdminAuthorsListResponse = {
+  authors: AdminAuthorDTO[];
+  skip: number;
+  limit: number;
+  total: number;
+};
+
+export type FetchAdminAuthorsParams = {
+  is_verified?: boolean;
+  is_active?: boolean;
+  search?: string;
+  skip?: number;
+  limit?: number;
+};
+
+export const fetchAdminAuthors = async (
+  params: FetchAdminAuthorsParams = {},
+): Promise<AdminAuthorsListResponse> => {
+  const { data } = await axiosInstance.get<AdminAuthorsListResponse>(
+    `/api/v1/cms/admin/authors`,
+    {
+      params: {
+        skip: params.skip ?? 0,
+        limit: params.limit ?? 20,
+        ...(params.is_verified != null && { is_verified: params.is_verified }),
+        ...(params.is_active != null && { is_active: params.is_active }),
+        ...(params.search?.trim() && { search: params.search.trim() }),
+      },
+    },
+  );
+  return data;
+};
+
+export const activateAuthor = async (authorId: string) => {
+  const { data } = await axiosInstance.post(
+    `/api/v1/cms/admin/authors/${authorId}/activate`,
+  );
+  return data;
+};
+
+export const suspendAuthor = async (authorId: string) => {
+  const { data } = await axiosInstance.post(
+    `/api/v1/cms/admin/authors/${authorId}/suspend`,
+  );
+  return data;
+};
+
+export const patchAuthorPlatformRole = async (
+  authorId: string,
+  platform_role: PlatformRole,
+) => {
+  const { data } = await axiosInstance.patch(
+    `/api/v1/cms/admin/authors/${authorId}/platform-role`,
+    { platform_role },
+  );
+  return data;
+};
diff --git a/src/components/routes/analytics/Analytics.tsx b/src/components/routes/analytics/Analytics.tsx
index 6ae21849..28f04bdb 100644
--- a/src/components/routes/analytics/Analytics.tsx
+++ b/src/components/routes/analytics/Analytics.tsx
@@ -1,5 +1,476 @@
+import { useMemo, useState, type ReactNode } from "react";
+import { useQuery } from "@tanstack/react-query";
+import {
+  format,
+  subDays,
+  startOfMonth,
+  endOfMonth,
+  parseISO,
+} from "date-fns";
+import type { DateRange } from "react-day-picker";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { IoCalendarClearOutline, IoPeopleOutline } from "react-icons/io5";
+import { HiOutlineUserPlus } from "react-icons/hi2";
+import { MdOutlineTrendingUp } from "react-icons/md";
+import { Pecha } from "@/components/ui/shadimport";
+import { Button } from "@/components/ui/atoms/button";
+import { useUserInfo } from "@/hooks/useUserInfo";
+import { useDashboardGroupFilterOptions } from "@/hooks/useDashboardGroupFilterOptions";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import { cn } from "@/lib/utils";
+import {
+  fetchAnalyticsOverview,
+  type AnalyticsTopPlan,
+} from "@/components/routes/analytics/analyticsApi";
+
+type DatePreset = "7d" | "30d" | "90d" | "month" | "custom";
+
+const PRESETS: { id: Exclude<DatePreset, "custom">; label: string }[] = [
+  { id: "7d", label: "7 days" },
+  { id: "30d", label: "30 days" },
+  { id: "90d", label: "90 days" },
+  { id: "month", label: "This month" },
+];
+
+const CHART_TOOLTIP_STYLE = {
+  borderRadius: 12,
+  border: "1px solid #e5e5e5",
+  background: "#ffffff",
+};
+
+function rangeForPreset(
+  preset: Exclude<DatePreset, "custom">,
+  today = new Date(),
+): DateRange {
+  if (preset === "month") {
+    return { from: startOfMonth(today), to: endOfMonth(today) };
+  }
+  const days = preset === "7d" ? 6 : preset === "90d" ? 89 : 29;
+  return { from: subDays(today, days), to: today };
+}
+
+function toApiDate(value: Date): string {
+  return format(value, "yyyy-MM-dd");
+}
+
+function formatAxisDate(value: string): string {
+  try {
+    return format(parseISO(value), "MMM d");
+  } catch {
+    return value;
+  }
+}
+
+function formatRangeLabel(range: DateRange): string {
+  if (range.from && range.to) {
+    return `${format(range.from, "MMM d, yyyy")} – ${format(range.to, "MMM d, yyyy")}`;
+  }
+  if (range.from) {
+    return format(range.from, "MMM d, yyyy");
+  }
+  return "Select dates";
+}
+
+function resolveApiDates(range: DateRange): {
+  startDate: string | null;
+  endDate: string | null;
+} {
+  if (!range.from) {
+    return { startDate: null, endDate: null };
+  }
+  const startDate = toApiDate(range.from);
+  const endDate = toApiDate(range.to ?? range.from);
+  return { startDate, endDate };
+}
+
+function StatCard({
+  label,
+  value,
+  hint,
+  icon,
+}: Readonly<{
+  label: string;
+  value: number | string;
+  hint?: string;
+  icon: ReactNode;
+}>) {
+  return (
+    <div className="rounded-2xl border border-border bg-card p-5 shadow-sm">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <p className="text-sm text-muted-foreground">{label}</p>
+          <p className="mt-2 text-3xl font-semibold tracking-tight text-foreground">
+            {typeof value === "number" ? value.toLocaleString() : value}
+          </p>
+          {hint ? (
+            <p className="mt-1 text-xs text-muted-foreground">{hint}</p>
+          ) : null}
+        </div>
+        <div className="rounded-xl bg-muted/60 p-2.5 text-foreground/80">
+          {icon}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ChartPanel({
+  title,
+  description,
+  children,
+}: Readonly<{
+  title: string;
+  description: string;
+  children: ReactNode;
+}>) {
+  return (
+    <div className="rounded-2xl border border-border bg-card p-5 shadow-sm">
+      <div className="mb-4">
+        <h2 className="text-base font-semibold text-foreground">{title}</h2>
+        <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+      </div>
+      <div className="h-72 w-full">{children}</div>
+    </div>
+  );
+}
+
+function TopPlansTable({ plans }: Readonly<{ plans: AnalyticsTopPlan[] }>) {
+  if (plans.length === 0) {
+    return (
+      <div className="rounded-2xl border border-dashed border-border bg-card/60 px-6 py-16 text-center">
+        <p className="text-sm font-medium text-foreground">No plan joins yet</p>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Joins in this date range will show up here.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-hidden rounded-2xl border border-border bg-card shadow-sm">
+      <div className="border-b border-border px-5 py-4">
+        <h2 className="text-base font-semibold text-foreground">
+          Top 10 plans
+        </h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Ranked by joins in the selected date range
+        </p>
+      </div>
+      <Pecha.Table>
+        <Pecha.TableHeader>
+          <Pecha.TableRow>
+            <Pecha.TableHead className="w-12">#</Pecha.TableHead>
+            <Pecha.TableHead>Plan</Pecha.TableHead>
+            <Pecha.TableHead>Series</Pecha.TableHead>
+            <Pecha.TableHead className="text-right">Joins</Pecha.TableHead>
+            <Pecha.TableHead className="text-right">Completed</Pecha.TableHead>
+          </Pecha.TableRow>
+        </Pecha.TableHeader>
+        <Pecha.TableBody>
+          {plans.map((plan, index) => (
+            <Pecha.TableRow key={plan.id}>
+              <Pecha.TableCell className="text-muted-foreground">
+                {index + 1}
+              </Pecha.TableCell>
+              <Pecha.TableCell className="font-medium">{plan.title}</Pecha.TableCell>
+              <Pecha.TableCell className="text-muted-foreground">
+                {plan.series_name ?? "—"}
+              </Pecha.TableCell>
+              <Pecha.TableCell className="text-right tabular-nums">
+                {plan.join_count.toLocaleString()}
+              </Pecha.TableCell>
+              <Pecha.TableCell className="text-right tabular-nums">
+                {plan.completion_count.toLocaleString()}
+              </Pecha.TableCell>
+            </Pecha.TableRow>
+          ))}
+        </Pecha.TableBody>
+      </Pecha.Table>
+    </div>
+  );
+}
+
 const Analytics = () => {
-  return <div>Analytics</div>;
+  const { data: userInfo } = useUserInfo();
+  const { options: groupOptions, isLoading: isGroupFilterLoading } =
+    useDashboardGroupFilterOptions(userInfo);
+
+  const [preset, setPreset] = useState<DatePreset>("30d");
+  const [range, setRange] = useState<DateRange>(() => rangeForPreset("30d"));
+  const [calendarOpen, setCalendarOpen] = useState(false);
+  const [groupId, setGroupId] = useState<string>("all");
+
+  const { startDate, endDate } = resolveApiDates(range);
+  const dateLabel = formatRangeLabel(range);
+
+  const { data, isLoading, isFetching, error } = useQuery({
+    queryKey: ["analytics-overview", startDate, endDate, groupId],
+    queryFn: () =>
+      fetchAnalyticsOverview({
+        start_date: startDate!,
+        end_date: endDate!,
+        ...(groupId !== "all" ? { group_id: groupId } : {}),
+        top_limit: 10,
+      }),
+    enabled: Boolean(startDate && endDate),
+    staleTime: 60_000,
+  });
+
+  const chartData = useMemo(
+    () =>
+      (data?.timeline ?? []).map((point) => ({
+        ...point,
+        label: formatAxisDate(point.date),
+      })),
+    [data?.timeline],
+  );
+
+  const applyPreset = (next: Exclude<DatePreset, "custom">) => {
+    setPreset(next);
+    setRange(rangeForPreset(next));
+  };
+
+  const totalUsers = data?.users.total_users ?? (isLoading ? "—" : 0);
+  const newUsersThisMonth =
+    data?.users.new_users_this_month ?? (isLoading ? "—" : 0);
+  const newUsersInRange =
+    data?.users.new_users_in_range ?? (isLoading ? "—" : 0);
+
+  return (
+    <div className="min-h-full bg-background px-6 py-8 md:px-10">
+      <div className="mx-auto flex max-w-7xl flex-col gap-8">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+          <div>
+            <h1 className="text-2xl font-semibold tracking-tight text-foreground">
+              Analytics
+            </h1>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Users, joins, and plan completion across your content
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
+            <div className="flex flex-wrap gap-1 rounded-full border border-border bg-muted/40 p-1">
+              {PRESETS.map((item) => (
+                <button
+                  key={item.id}
+                  type="button"
+                  onClick={() => applyPreset(item.id)}
+                  className={cn(
+                    "rounded-full px-3 py-1.5 text-xs font-semibold transition-colors",
+                    preset === item.id
+                      ? "bg-neutral-900 text-white dark:bg-white dark:text-neutral-900"
+                      : "text-muted-foreground hover:text-foreground",
+                  )}
+                >
+                  {item.label}
+                </button>
+              ))}
+            </div>
+
+            <Pecha.Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
+              <Pecha.PopoverTrigger asChild>
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="justify-start gap-2 font-normal"
+                  onClick={() => setPreset("custom")}
+                >
+                  <IoCalendarClearOutline className="h-4 w-4 text-muted-foreground" />
+                  {dateLabel}
+                </Button>
+              </Pecha.PopoverTrigger>
+              <Pecha.PopoverContent className="w-auto p-0" align="end">
+                <Pecha.Calendar
+                  mode="range"
+                  numberOfMonths={2}
+                  selected={range}
+                  defaultMonth={range.from}
+                  onSelect={(next) => {
+                    setPreset("custom");
+                    setRange(next ?? { from: undefined, to: undefined });
+                  }}
+                  disabled={{ after: new Date() }}
+                />
+              </Pecha.PopoverContent>
+            </Pecha.Popover>
+
+            {groupOptions.length > 0 ? (
+              <Pecha.Select
+                value={groupId}
+                onValueChange={setGroupId}
+                disabled={isGroupFilterLoading}
+              >
+                <Pecha.SelectTrigger className="w-[220px]">
+                  <Pecha.SelectValue placeholder="All groups" />
+                </Pecha.SelectTrigger>
+                <Pecha.SelectContent>
+                  <Pecha.SelectItem value="all">All groups</Pecha.SelectItem>
+                  {groupOptions.map((group) => (
+                    <Pecha.SelectItem key={group.id} value={group.id}>
+                      {group.label}
+                    </Pecha.SelectItem>
+                  ))}
+                </Pecha.SelectContent>
+              </Pecha.Select>
+            ) : null}
+          </div>
+        </div>
+
+        {error ? (
+          <div className="rounded-xl border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+            {getApiErrorMessage(error)}
+          </div>
+        ) : null}
+
+        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+          <StatCard
+            label="Total users"
+            value={totalUsers}
+            hint="All registered app users"
+            icon={<IoPeopleOutline className="h-5 w-5" />}
+          />
+          <StatCard
+            label="New users this month"
+            value={newUsersThisMonth}
+            hint="Calendar month to date"
+            icon={<HiOutlineUserPlus className="h-5 w-5" />}
+          />
+          <StatCard
+            label="New users in range"
+            value={newUsersInRange}
+            hint={dateLabel}
+            icon={<MdOutlineTrendingUp className="h-5 w-5" />}
+          />
+        </div>
+
+        <div
+          className={cn(
+            "grid gap-4 xl:grid-cols-2",
+            isFetching && "opacity-80 transition-opacity",
+          )}
+        >
+          <ChartPanel
+            title="User growth"
+            description="New registrations per day"
+          >
+            {isLoading ? (
+              <Pecha.Skeleton className="h-full w-full rounded-xl" />
+            ) : (
+              <ResponsiveContainer width="100%" height="100%">
+                <AreaChart data={chartData}>
+                  <defs>
+                    <linearGradient id="usersFill" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="0%" stopColor="#171717" stopOpacity={0.22} />
+                      <stop
+                        offset="100%"
+                        stopColor="#171717"
+                        stopOpacity={0.02}
+                      />
+                    </linearGradient>
+                  </defs>
+                  <CartesianGrid
+                    strokeDasharray="3 3"
+                    stroke="#e5e5e5"
+                    vertical={false}
+                  />
+                  <XAxis
+                    dataKey="label"
+                    tickLine={false}
+                    axisLine={false}
+                    minTickGap={24}
+                    tick={{ fontSize: 12, fill: "#737373" }}
+                  />
+                  <YAxis
+                    allowDecimals={false}
+                    tickLine={false}
+                    axisLine={false}
+                    width={36}
+                    tick={{ fontSize: 12, fill: "#737373" }}
+                  />
+                  <Tooltip contentStyle={CHART_TOOLTIP_STYLE} />
+                  <Area
+                    type="monotone"
+                    dataKey="new_users"
+                    name="New users"
+                    stroke="#171717"
+                    fill="url(#usersFill)"
+                    strokeWidth={2}
+                  />
+                </AreaChart>
+              </ResponsiveContainer>
+            )}
+          </ChartPanel>
+
+          <ChartPanel
+            title="Joins & completions"
+            description="Plan enrollments and completions per day"
+          >
+            {isLoading ? (
+              <Pecha.Skeleton className="h-full w-full rounded-xl" />
+            ) : (
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={chartData} barGap={4}>
+                  <CartesianGrid
+                    strokeDasharray="3 3"
+                    stroke="#e5e5e5"
+                    vertical={false}
+                  />
+                  <XAxis
+                    dataKey="label"
+                    tickLine={false}
+                    axisLine={false}
+                    minTickGap={24}
+                    tick={{ fontSize: 12, fill: "#737373" }}
+                  />
+                  <YAxis
+                    allowDecimals={false}
+                    tickLine={false}
+                    axisLine={false}
+                    width={36}
+                    tick={{ fontSize: 12, fill: "#737373" }}
+                  />
+                  <Tooltip contentStyle={CHART_TOOLTIP_STYLE} />
+                  <Legend />
+                  <Bar
+                    dataKey="joins"
+                    name="Joins"
+                    fill="#525252"
+                    radius={[4, 4, 0, 0]}
+                    maxBarSize={28}
+                  />
+                  <Bar
+                    dataKey="completions"
+                    name="Completions"
+                    fill="#a3a3a3"
+                    radius={[4, 4, 0, 0]}
+                    maxBarSize={28}
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            )}
+          </ChartPanel>
+        </div>
+
+        {isLoading ? (
+          <Pecha.Skeleton className="h-64 w-full rounded-2xl" />
+        ) : (
+          <TopPlansTable plans={data?.top_plans ?? []} />
+        )}
+      </div>
+    </div>
+  );
 };
 
 export default Analytics;
diff --git a/src/components/routes/analytics/analyticsApi.ts b/src/components/routes/analytics/analyticsApi.ts
new file mode 100644
index 00000000..7ebd47f4
--- /dev/null
+++ b/src/components/routes/analytics/analyticsApi.ts
@@ -0,0 +1,60 @@
+import axiosInstance from "@/config/axios-config";
+
+export type AnalyticsDateRange = {
+  start_date: string;
+  end_date: string;
+};
+
+export type AnalyticsUserStats = {
+  total_users: number;
+  new_users_this_month: number;
+  new_users_in_range: number;
+};
+
+export type AnalyticsTimePoint = {
+  date: string;
+  new_users: number;
+  joins: number;
+  completions: number;
+};
+
+export type AnalyticsTopPlan = {
+  id: string;
+  title: string;
+  series_id: string | null;
+  series_name: string | null;
+  join_count: number;
+  completion_count: number;
+};
+
+export type AnalyticsOverview = {
+  date_range: AnalyticsDateRange;
+  users: AnalyticsUserStats;
+  top_plans: AnalyticsTopPlan[];
+  timeline: AnalyticsTimePoint[];
+  generated_at: string;
+};
+
+export type FetchAnalyticsParams = {
+  start_date: string;
+  end_date: string;
+  group_id?: string;
+  top_limit?: number;
+};
+
+export async function fetchAnalyticsOverview(
+  params: FetchAnalyticsParams,
+): Promise<AnalyticsOverview> {
+  const { data } = await axiosInstance.get<AnalyticsOverview>(
+    "/api/v1/cms/analytics/overview",
+    {
+      params: {
+        start_date: params.start_date,
+        end_date: params.end_date,
+        ...(params.group_id ? { group_id: params.group_id } : {}),
+        top_limit: params.top_limit ?? 10,
+      },
+    },
+  );
+  return data;
+}
diff --git a/src/components/routes/china-restrictions/ChinaRestrictionsPage.tsx b/src/components/routes/china-restrictions/ChinaRestrictionsPage.tsx
new file mode 100644
index 00000000..91c5ef53
--- /dev/null
+++ b/src/components/routes/china-restrictions/ChinaRestrictionsPage.tsx
@@ -0,0 +1,465 @@
+import { useEffect, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { IoMdAdd } from "react-icons/io";
+import { toast } from "sonner";
+import { format } from "date-fns";
+import { Navigate } from "react-router-dom";
+import { Pecha } from "@/components/ui/shadimport";
+import { Button } from "@/components/ui/atoms/button";
+import { DialogDescription, DialogFooter } from "@/components/ui/atoms/dialog";
+import { Pagination } from "@/components/ui/molecules/pagination/Pagination";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import { useUserInfo } from "@/hooks/useUserInfo";
+import { canAccessAdminAuthors, isSuperAdmin } from "@/lib/platformAccess";
+import { ROUTES } from "@/routes/paths";
+import {
+  createChinaRestrictedItem,
+  deleteChinaRestrictedItem,
+  fetchChinaRestrictedItems,
+  RESTRICTED_ITEM_TYPES,
+  searchChinaRestrictionCandidates,
+  type ChinaRestrictionCandidateDTO,
+  type RestrictedItemType,
+} from "./api/chinaRestrictionsApi";
+
+const PAGE_SIZE = 20;
+const SEARCH_DEBOUNCE_MS = 400;
+
+const formatItemType = (type: RestrictedItemType) =>
+  type.replaceAll("_", " ").replace(/\b\w/g, (c) => c.toUpperCase());
+
+type RestrictionRow = {
+  id: string;
+  item_type: RestrictedItemType;
+  item_id: string;
+  title?: string | null;
+  subtitle?: string | null;
+  created_at: string;
+};
+
+const renderTableBody = ({
+  isLoading,
+  items,
+  tableColumnCount,
+  writeEnabled,
+  isDeleting,
+  onRemove,
+}: {
+  isLoading: boolean;
+  items: RestrictionRow[];
+  tableColumnCount: number;
+  writeEnabled: boolean;
+  isDeleting: boolean;
+  onRemove: (id: string) => void;
+}) => {
+  if (isLoading) {
+    return (
+      <Pecha.TableRow>
+        <Pecha.TableCell colSpan={tableColumnCount}>Loading…</Pecha.TableCell>
+      </Pecha.TableRow>
+    );
+  }
+
+  if (items.length === 0) {
+    return (
+      <Pecha.TableRow>
+        <Pecha.TableCell colSpan={tableColumnCount}>
+          No restricted items found.
+        </Pecha.TableCell>
+      </Pecha.TableRow>
+    );
+  }
+
+  return items.map((item) => (
+    <Pecha.TableRow key={item.id}>
+      <Pecha.TableCell>{formatItemType(item.item_type)}</Pecha.TableCell>
+      <Pecha.TableCell>
+        <div className="min-w-[16rem]">
+          <p className="font-medium">{item.title?.trim() || "Untitled item"}</p>
+          {item.subtitle?.trim() ? (
+            <p className="text-xs text-muted-foreground mt-0.5">
+              {item.subtitle}
+            </p>
+          ) : null}
+        </div>
+      </Pecha.TableCell>
+      <Pecha.TableCell>
+        {item.created_at
+          ? format(new Date(item.created_at), "MMM dd, yyyy HH:mm")
+          : "—"}
+      </Pecha.TableCell>
+      {writeEnabled ? (
+        <Pecha.TableCell>
+          <Button
+            size="sm"
+            variant="outline"
+            disabled={isDeleting}
+            onClick={() => onRemove(item.id)}
+          >
+            Remove
+          </Button>
+        </Pecha.TableCell>
+      ) : null}
+    </Pecha.TableRow>
+  ));
+};
+
+const renderCandidateOptions = ({
+  isLoading,
+  candidates,
+  onSelect,
+}: {
+  isLoading: boolean;
+  candidates: ChinaRestrictionCandidateDTO[];
+  onSelect: (candidate: ChinaRestrictionCandidateDTO) => void;
+}) => {
+  if (isLoading) {
+    return (
+      <Pecha.CommandItem disabled value="__loading__">
+        Searching…
+      </Pecha.CommandItem>
+    );
+  }
+
+  if (candidates.length === 0) {
+    return (
+      <Pecha.CommandItem disabled value="__empty__">
+        No matches found.
+      </Pecha.CommandItem>
+    );
+  }
+
+  return candidates.map((candidate) => (
+    <Pecha.CommandItem
+      key={candidate.id}
+      value={candidate.id}
+      onSelect={() => onSelect(candidate)}
+    >
+      <div className="min-w-0">
+        <p className="truncate">{candidate.title}</p>
+        {candidate.subtitle?.trim() ? (
+          <p className="text-xs text-muted-foreground truncate">
+            {candidate.subtitle}
+          </p>
+        ) : null}
+      </div>
+    </Pecha.CommandItem>
+  ));
+};
+
+const ChinaRestrictionsPage = () => {
+  const { data: userInfo } = useUserInfo();
+  const queryClient = useQueryClient();
+  const [page, setPage] = useState(0);
+  const [typeFilter, setTypeFilter] = useState<RestrictedItemType | "ALL">(
+    "ALL",
+  );
+  const [addOpen, setAddOpen] = useState(false);
+  const [newItemType, setNewItemType] = useState<RestrictedItemType>("PLAN");
+  const [selectedItem, setSelectedItem] =
+    useState<ChinaRestrictionCandidateDTO | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
+
+  const canAccess = Boolean(
+    userInfo && canAccessAdminAuthors(userInfo.platform_role),
+  );
+  const writeEnabled = isSuperAdmin(userInfo?.platform_role);
+
+  useEffect(() => {
+    const timer = setTimeout(
+      () => setDebouncedSearch(searchQuery.trim()),
+      SEARCH_DEBOUNCE_MS,
+    );
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  useEffect(() => {
+    setSelectedItem(null);
+    setSearchQuery("");
+    setDebouncedSearch("");
+  }, [newItemType]);
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["china-restrictions", page, typeFilter],
+    queryFn: () =>
+      fetchChinaRestrictedItems({
+        skip: page * PAGE_SIZE,
+        limit: PAGE_SIZE,
+        ...(typeFilter !== "ALL" && { item_type: typeFilter }),
+      }),
+    enabled: canAccess,
+  });
+
+  const { data: candidatesData, isFetching: candidatesLoading } = useQuery({
+    queryKey: ["china-restriction-candidates", newItemType, debouncedSearch],
+    queryFn: () =>
+      searchChinaRestrictionCandidates({
+        item_type: newItemType,
+        search: debouncedSearch || undefined,
+        skip: 0,
+        limit: 20,
+      }),
+    enabled: canAccess && addOpen && searchOpen,
+  });
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: ["china-restrictions"] });
+  };
+
+  const createMutation = useMutation({
+    mutationFn: createChinaRestrictedItem,
+    onSuccess: () => {
+      toast.success("Item added to China restrictions");
+      setAddOpen(false);
+      setSelectedItem(null);
+      setSearchQuery("");
+      invalidate();
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteChinaRestrictedItem,
+    onSuccess: () => {
+      toast.success("Restriction removed");
+      setDeleteTargetId(null);
+      invalidate();
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const items = data?.items ?? [];
+  const total = data?.total ?? 0;
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+  const tableColumnCount = writeEnabled ? 4 : 3;
+  const candidates = candidatesData?.items ?? [];
+
+  const handleAdd = () => {
+    if (!selectedItem) {
+      toast.error("Search and select an item to restrict");
+      return;
+    }
+    createMutation.mutate({
+      item_type: newItemType,
+      item_id: selectedItem.id,
+    });
+  };
+
+  if (userInfo && !canAccess) {
+    return <Navigate to={ROUTES.dashboard} replace />;
+  }
+
+  return (
+    <div className="font-dynamic border h-[calc(100vh-40px)] overflow-auto bg-[#F5F5F5] dark:bg-[#181818] my-4 rounded-l-2xl">
+      <div className="px-4 pt-10 pb-4 flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <h1 className="text-xl font-semibold">China restrictions</h1>
+          <p className="text-sm text-muted-foreground mt-1">
+            Items listed here are hidden from users in Chinese timezones.
+          </p>
+        </div>
+        {writeEnabled ? (
+          <Button
+            size="sm"
+            onClick={() => {
+              setSelectedItem(null);
+              setSearchQuery("");
+              setAddOpen(true);
+            }}
+          >
+            <IoMdAdd className="mr-1 h-4 w-4" />
+            Add item
+          </Button>
+        ) : null}
+      </div>
+
+      <div className="px-4 pb-4">
+        <select
+          className="rounded border bg-background px-3 py-2 text-sm"
+          value={typeFilter}
+          onChange={(e) => {
+            setTypeFilter(e.target.value as RestrictedItemType | "ALL");
+            setPage(0);
+          }}
+        >
+          <option value="ALL">All types</option>
+          {RESTRICTED_ITEM_TYPES.map((type) => (
+            <option key={type} value={type}>
+              {formatItemType(type)}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {error ? (
+        <p className="px-4 text-destructive text-sm">
+          {getApiErrorMessage(error)}
+        </p>
+      ) : null}
+
+      <div className="px-4 pb-8 overflow-x-auto">
+        <Pecha.Table>
+          <Pecha.TableHeader>
+            <Pecha.TableRow>
+              <Pecha.TableHead>Type</Pecha.TableHead>
+              <Pecha.TableHead>Item</Pecha.TableHead>
+              <Pecha.TableHead>Added</Pecha.TableHead>
+              {writeEnabled ? <Pecha.TableHead>Actions</Pecha.TableHead> : null}
+            </Pecha.TableRow>
+          </Pecha.TableHeader>
+          <Pecha.TableBody>
+            {renderTableBody({
+              isLoading,
+              items,
+              tableColumnCount,
+              writeEnabled,
+              isDeleting: deleteMutation.isPending,
+              onRemove: setDeleteTargetId,
+            })}
+          </Pecha.TableBody>
+        </Pecha.Table>
+
+        {totalPages > 1 ? (
+          <div className="mt-4">
+            <Pagination
+              currentPage={page + 1}
+              totalPages={totalPages}
+              onPageChange={(p) => setPage(p - 1)}
+            />
+          </div>
+        ) : null}
+      </div>
+
+      <Pecha.Dialog
+        open={addOpen}
+        onOpenChange={(open) => {
+          setAddOpen(open);
+          if (!open) {
+            setSelectedItem(null);
+            setSearchQuery("");
+            setSearchOpen(false);
+          }
+        }}
+      >
+        <Pecha.DialogContent>
+          <Pecha.DialogHeader>
+            <Pecha.DialogTitle>Add China restriction</Pecha.DialogTitle>
+            <DialogDescription>
+              Choose a content type, search by name, and select the item to hide
+              for users in Chinese timezones.
+            </DialogDescription>
+          </Pecha.DialogHeader>
+          <div className="space-y-4 py-2">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Type</label>
+              <select
+                className="w-full rounded border bg-background px-3 py-2 text-sm"
+                value={newItemType}
+                onChange={(e) =>
+                  setNewItemType(e.target.value as RestrictedItemType)
+                }
+              >
+                {RESTRICTED_ITEM_TYPES.map((type) => (
+                  <option key={type} value={type}>
+                    {formatItemType(type)}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Item</label>
+              <Pecha.Popover open={searchOpen} onOpenChange={setSearchOpen}>
+                <Pecha.PopoverTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="h-11 w-full justify-between font-normal"
+                  >
+                    <span
+                      className={
+                        selectedItem
+                          ? "text-foreground truncate"
+                          : "text-muted-foreground"
+                      }
+                    >
+                      {selectedItem
+                        ? selectedItem.title
+                        : `Search ${formatItemType(newItemType).toLowerCase()}s…`}
+                    </span>
+                  </Button>
+                </Pecha.PopoverTrigger>
+                <Pecha.PopoverContent
+                  className="w-[--radix-popover-trigger-width] p-0"
+                  align="start"
+                >
+                  <Pecha.Command shouldFilter={false}>
+                    <Pecha.CommandInput
+                      placeholder={`Search ${formatItemType(newItemType).toLowerCase()}s…`}
+                      value={searchQuery}
+                      onValueChange={setSearchQuery}
+                    />
+                    <Pecha.CommandList>
+                      <Pecha.CommandGroup>
+                        {renderCandidateOptions({
+                          isLoading: candidatesLoading,
+                          candidates,
+                          onSelect: (candidate) => {
+                            setSelectedItem(candidate);
+                            setSearchOpen(false);
+                          },
+                        })}
+                      </Pecha.CommandGroup>
+                    </Pecha.CommandList>
+                  </Pecha.Command>
+                </Pecha.PopoverContent>
+              </Pecha.Popover>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setAddOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleAdd}
+              disabled={createMutation.isPending || !selectedItem}
+            >
+              Add
+            </Button>
+          </DialogFooter>
+        </Pecha.DialogContent>
+      </Pecha.Dialog>
+
+      <Pecha.AlertDialog
+        open={deleteTargetId != null}
+        onOpenChange={(open) => !open && setDeleteTargetId(null)}
+      >
+        <Pecha.AlertDialogContent>
+          <Pecha.AlertDialogHeader>
+            <Pecha.AlertDialogTitle>Remove restriction?</Pecha.AlertDialogTitle>
+            <Pecha.AlertDialogDescription>
+              This item will become visible again for users in Chinese
+              timezones.
+            </Pecha.AlertDialogDescription>
+          </Pecha.AlertDialogHeader>
+          <Pecha.AlertDialogFooter>
+            <Pecha.AlertDialogCancel>Cancel</Pecha.AlertDialogCancel>
+            <Pecha.AlertDialogAction
+              onClick={() => {
+                if (deleteTargetId) {
+                  deleteMutation.mutate(deleteTargetId);
+                }
+              }}
+            >
+              Remove
+            </Pecha.AlertDialogAction>
+          </Pecha.AlertDialogFooter>
+        </Pecha.AlertDialogContent>
+      </Pecha.AlertDialog>
+    </div>
+  );
+};
+
+export default ChinaRestrictionsPage;
diff --git a/src/components/routes/china-restrictions/api/chinaRestrictionsApi.ts b/src/components/routes/china-restrictions/api/chinaRestrictionsApi.ts
new file mode 100644
index 00000000..61b6747a
--- /dev/null
+++ b/src/components/routes/china-restrictions/api/chinaRestrictionsApi.ts
@@ -0,0 +1,110 @@
+import axiosInstance from "@/config/axios-config";
+
+export const RESTRICTED_ITEM_TYPES = [
+  "MANTRA",
+  "ACCUMULATOR",
+  "GROUP_ACCUMULATOR",
+  "PLAN",
+  "SERIES",
+  "GROUP",
+  "RECITATION",
+  "RECITATION_COLLECTION",
+] as const;
+
+export type RestrictedItemType = (typeof RESTRICTED_ITEM_TYPES)[number];
+
+export type ChinaRestrictedItemDTO = {
+  id: string;
+  item_type: RestrictedItemType;
+  item_id: string;
+  title?: string | null;
+  subtitle?: string | null;
+  created_at: string;
+  updated_at?: string | null;
+};
+
+export type ChinaRestrictedItemListResponse = {
+  items: ChinaRestrictedItemDTO[];
+  skip: number;
+  limit: number;
+  total: number;
+};
+
+export type ChinaRestrictionCandidateDTO = {
+  id: string;
+  title: string;
+  subtitle?: string | null;
+};
+
+export type ChinaRestrictionCandidateListResponse = {
+  items: ChinaRestrictionCandidateDTO[];
+  skip: number;
+  limit: number;
+  total: number;
+};
+
+export type FetchChinaRestrictedItemsParams = {
+  skip?: number;
+  limit?: number;
+  item_type?: RestrictedItemType;
+};
+
+export type SearchChinaRestrictionCandidatesParams = {
+  item_type: RestrictedItemType;
+  search?: string;
+  skip?: number;
+  limit?: number;
+};
+
+export type CreateChinaRestrictedItemPayload = {
+  item_type: RestrictedItemType;
+  item_id: string;
+};
+
+export const fetchChinaRestrictedItems = async (
+  params: FetchChinaRestrictedItemsParams = {},
+): Promise<ChinaRestrictedItemListResponse> => {
+  const { data } = await axiosInstance.get<ChinaRestrictedItemListResponse>(
+    `/api/v1/cms/admin/china-restrictions`,
+    {
+      params: {
+        skip: params.skip ?? 0,
+        limit: params.limit ?? 20,
+        ...(params.item_type && { item_type: params.item_type }),
+      },
+    },
+  );
+  return data;
+};
+
+export const searchChinaRestrictionCandidates = async (
+  params: SearchChinaRestrictionCandidatesParams,
+): Promise<ChinaRestrictionCandidateListResponse> => {
+  const { data } =
+    await axiosInstance.get<ChinaRestrictionCandidateListResponse>(
+      `/api/v1/cms/admin/china-restrictions/candidates`,
+      {
+        params: {
+          item_type: params.item_type,
+          skip: params.skip ?? 0,
+          limit: params.limit ?? 20,
+          ...(params.search?.trim() && { search: params.search.trim() }),
+        },
+      },
+    );
+  return data;
+};
+
+export const createChinaRestrictedItem = async (
+  payload: CreateChinaRestrictedItemPayload,
+) => {
+  const { data } = await axiosInstance.post(
+    `/api/v1/cms/admin/china-restrictions`,
+    payload,
+  );
+  return data;
+};
+
+export const deleteChinaRestrictedItem = async (rowId: string) => {
+  await axiosInstance.delete(`/api/v1/cms/admin/china-restrictions/${rowId}`);
+};
diff --git a/src/components/routes/content-transfer/api/transferApi.test.ts b/src/components/routes/content-transfer/api/transferApi.test.ts
new file mode 100644
index 00000000..095b47ed
--- /dev/null
+++ b/src/components/routes/content-transfer/api/transferApi.test.ts
@@ -0,0 +1,96 @@
+import { describe, expect, it } from "vitest";
+import {
+  filterIncomingForGroup,
+  idsEqual,
+  normalizeTransferListResponse,
+  normalizeTransferRequest,
+} from "./transferApi";
+
+describe("transferApi normalization", () => {
+  it("parses CMS incoming transfers payload", () => {
+    const payload = {
+      transfers: [
+        {
+          id: "971fff46-27c2-4edb-8c7b-5e2d2c0820dc",
+          entity_type: "plan",
+          entity_id: "4ed427a3-a9cc-4db3-a612-77b4b906c106",
+          from_group_id: "c9e9f7f6-1dfd-4649-8b9e-8d9d22fe7951",
+          to_group_id: "583ccaf1-ffe4-47af-8907-132ea7a5f4b3",
+          status: "PENDING",
+          entity_title: "sc",
+          from_group_title: "G2",
+          to_group_title: "G3",
+          expires_at: "2026-06-04T11:27:57.654533Z",
+          created_at: "2026-06-04T10:47:35.106483Z",
+        },
+      ],
+      total: 1,
+    };
+    const { requests } = normalizeTransferListResponse(payload);
+    expect(requests).toHaveLength(1);
+    expect(requests[0]?.content_type).toBe("plan");
+    expect(requests[0]?.target_group_id).toBe(
+      "583ccaf1-ffe4-47af-8907-132ea7a5f4b3",
+    );
+    expect(
+      filterIncomingForGroup(requests, "583ccaf1-ffe4-47af-8907-132ea7a5f4b3"),
+    ).toHaveLength(1);
+  });
+
+  it("extracts nested request arrays", () => {
+    const payload = {
+      data: {
+        requests: [
+          {
+            id: "req-1",
+            content_type: "plan",
+            content_id: "plan-1",
+            status: "PENDING",
+            source_group_id: "g-source",
+            target_group_id: "g-target",
+          },
+        ],
+      },
+    };
+    expect(normalizeTransferListResponse(payload).requests).toHaveLength(1);
+  });
+
+  it("normalizes alternate id and group field names", () => {
+    const row = normalizeTransferRequest({
+      request_id: "req-2",
+      content_type: "series",
+      series_id: "series-1",
+      status: "pending",
+      source_group: { id: "aaa-bbb" },
+      target_group: { id: "ccc-ddd" },
+      expires_at: "2099-01-01T00:00:00Z",
+    });
+    expect(row?.id).toBe("req-2");
+    expect(row?.content_type).toBe("series");
+    expect(row?.source_group_id).toBe("aaa-bbb");
+    expect(row?.target_group_id).toBe("ccc-ddd");
+    expect(row?.status).toBe("PENDING");
+  });
+
+  it("filters incoming by target group case-insensitively", () => {
+    const requests = [
+      {
+        id: "1",
+        status: "PENDING" as const,
+        content_type: "plan" as const,
+        content_id: "p1",
+        source_group_id: "a",
+        target_group_id: "ABC-DEF",
+        created_at: "",
+        expires_at: "2099-01-01T00:00:00Z",
+      },
+    ];
+    expect(
+      filterIncomingForGroup(requests, "abc-def").map((r) => r.id),
+    ).toEqual(["1"]);
+  });
+
+  it("compares ids case-insensitively", () => {
+    expect(idsEqual("ABC", "abc")).toBe(true);
+  });
+});
diff --git a/src/components/routes/content-transfer/api/transferApi.ts b/src/components/routes/content-transfer/api/transferApi.ts
new file mode 100644
index 00000000..54894aa6
--- /dev/null
+++ b/src/components/routes/content-transfer/api/transferApi.ts
@@ -0,0 +1,284 @@
+import axiosInstance from "@/config/axios-config";
+
+export type TransferRequestStatus =
+  | "PENDING"
+  | "ACCEPTED"
+  | "REJECTED"
+  | "REVOKED"
+  | "EXPIRED";
+
+export type ContentTransferRequestDTO = {
+  id: string;
+  status: TransferRequestStatus;
+  content_type: "plan" | "series";
+  content_id: string;
+  content_title?: string | null;
+  source_group_id: string;
+  target_group_id: string;
+  source_group_title?: string | null;
+  target_group_title?: string | null;
+  created_at: string;
+  expires_at: string;
+};
+
+export type TransferRequestListResponse = {
+  requests: ContentTransferRequestDTO[];
+};
+
+function pickGroupId(value: unknown): string | undefined {
+  if (typeof value === "string" && value.trim()) return value.trim();
+  if (value && typeof value === "object" && "id" in value) {
+    const id = (value as { id?: unknown }).id;
+    if (typeof id === "string" && id.trim()) return id.trim();
+  }
+  return undefined;
+}
+
+function pickString(value: unknown): string | undefined {
+  return typeof value === "string" && value.trim() ? value.trim() : undefined;
+}
+
+export function idsEqual(a?: string | null, b?: string | null): boolean {
+  if (!a?.trim() || !b?.trim()) return false;
+  return a.trim().toLowerCase() === b.trim().toLowerCase();
+}
+
+/** Walk common API envelope shapes to find the request array. */
+export function extractTransferRequestArray(
+  data: unknown,
+  depth = 0,
+): unknown[] {
+  if (data == null || depth > 5) return [];
+  if (Array.isArray(data)) return data;
+
+  if (typeof data !== "object") return [];
+
+  const root = data as Record<string, unknown>;
+  const arrayKeys = [
+    "transfers",
+    "requests",
+    "items",
+    "transfer_requests",
+    "incoming",
+    "outgoing",
+    "results",
+    "data",
+  ];
+
+  for (const key of arrayKeys) {
+    const nested = extractTransferRequestArray(root[key], depth + 1);
+    if (nested.length > 0) return nested;
+  }
+
+  return [];
+}
+
+/** Normalizes list payloads when the API uses alternate keys or nested group objects. */
+export function normalizeTransferRequest(
+  raw: unknown,
+): ContentTransferRequestDTO | null {
+  if (!raw || typeof raw !== "object") return null;
+  const r = raw as Record<string, unknown>;
+
+  const id =
+    pickString(r.id) ??
+    pickString(r.request_id) ??
+    pickString(r.transfer_request_id);
+  if (!id) return null;
+
+  const typeRaw =
+    pickString(r.entity_type) ??
+    pickString(r.content_type) ??
+    pickString(r.type);
+  const contentType = typeRaw?.toLowerCase() === "series" ? "series" : "plan";
+
+  const contentId =
+    pickString(r.entity_id) ??
+    pickString(r.content_id) ??
+    (contentType === "series"
+      ? pickString(r.series_id)
+      : pickString(r.plan_id)) ??
+    "";
+
+  const targetGroup =
+    r.to_group_id ??
+    r.target_group_id ??
+    r.target_group_uuid ??
+    r.targetGroupId ??
+    r.destination_group_id ??
+    r.target_group;
+
+  const sourceGroup =
+    r.from_group_id ??
+    r.source_group_id ??
+    r.source_group_uuid ??
+    r.sourceGroupId ??
+    r.source_group;
+
+  return {
+    id,
+    status:
+      (pickString(r.status)?.toUpperCase() as TransferRequestStatus) ??
+      "PENDING",
+    content_type: contentType,
+    content_id: contentId,
+    content_title:
+      pickString(r.entity_title) ??
+      pickString(r.content_title) ??
+      pickString(r.title) ??
+      null,
+    source_group_id: pickGroupId(sourceGroup) ?? "",
+    target_group_id: pickGroupId(targetGroup) ?? "",
+    source_group_title:
+      pickString(r.from_group_title) ??
+      pickString(r.source_group_title) ??
+      pickString((sourceGroup as { title?: string } | undefined)?.title) ??
+      null,
+    target_group_title:
+      pickString(r.to_group_title) ??
+      pickString(r.target_group_title) ??
+      pickString((targetGroup as { title?: string } | undefined)?.title) ??
+      null,
+    created_at: pickString(r.created_at) ?? new Date().toISOString(),
+    expires_at:
+      pickString(r.expires_at) ??
+      pickString(r.expiresAt) ??
+      new Date().toISOString(),
+  };
+}
+
+export function normalizeTransferListResponse(
+  data: unknown,
+): TransferRequestListResponse {
+  const list = extractTransferRequestArray(data);
+  const requests = list
+    .map(normalizeTransferRequest)
+    .filter((r): r is ContentTransferRequestDTO => r != null);
+
+  return { requests };
+}
+
+export function filterIncomingForGroup(
+  requests: ContentTransferRequestDTO[],
+  groupId: string,
+): ContentTransferRequestDTO[] {
+  const matched = requests.filter(
+    (r) => !r.target_group_id || idsEqual(r.target_group_id, groupId),
+  );
+  return matched;
+}
+
+export function filterOutgoingForGroup(
+  requests: ContentTransferRequestDTO[],
+  groupId: string,
+): ContentTransferRequestDTO[] {
+  return requests.filter(
+    (r) => !r.source_group_id || idsEqual(r.source_group_id, groupId),
+  );
+}
+
+/** Prefer global list (what notifications use); optional group query params. */
+async function fetchIncomingList(
+  groupId?: string,
+): Promise<TransferRequestListResponse> {
+  const { data } = await axiosInstance.get(
+    "/api/v1/cms/transfer-requests/incoming",
+    {
+      params: groupId
+        ? { target_group_id: groupId, group_id: groupId }
+        : undefined,
+    },
+  );
+  const normalized = normalizeTransferListResponse(data);
+
+  if (!groupId) return normalized;
+
+  const matched = filterIncomingForGroup(normalized.requests, groupId);
+  if (matched.length > 0) return { requests: matched };
+
+  // Server returned rows but group ids were missing/mismatched in JSON — show all.
+  if (normalized.requests.length > 0) return normalized;
+
+  return { requests: [] };
+}
+
+async function fetchOutgoingList(
+  groupId?: string,
+): Promise<TransferRequestListResponse> {
+  const { data } = await axiosInstance.get(
+    "/api/v1/cms/transfer-requests/outgoing",
+    {
+      params: groupId
+        ? { source_group_id: groupId, group_id: groupId }
+        : undefined,
+    },
+  );
+  const normalized = normalizeTransferListResponse(data);
+
+  if (!groupId) return normalized;
+
+  const matched = filterOutgoingForGroup(normalized.requests, groupId);
+  if (matched.length > 0) return { requests: matched };
+
+  if (normalized.requests.length > 0) return normalized;
+
+  return { requests: [] };
+}
+
+export const fetchIncomingTransferRequests = async (
+  groupId?: string,
+): Promise<TransferRequestListResponse> => fetchIncomingList(groupId);
+
+export const fetchOutgoingTransferRequests = async (
+  groupId?: string,
+): Promise<TransferRequestListResponse> => fetchOutgoingList(groupId);
+
+export const createPlanTransferRequest = async (
+  planId: string,
+  targetGroupId: string,
+): Promise<ContentTransferRequestDTO> => {
+  const { data } = await axiosInstance.post(
+    `/api/v1/cms/plans/${planId}/transfer-requests`,
+    { target_group_id: targetGroupId },
+  );
+  return normalizeTransferRequest(data) ?? (data as ContentTransferRequestDTO);
+};
+
+export const createSeriesTransferRequest = async (
+  seriesId: string,
+  targetGroupId: string,
+): Promise<ContentTransferRequestDTO> => {
+  const { data } = await axiosInstance.post(
+    `/api/v1/cms/series/${seriesId}/transfer-requests`,
+    { target_group_id: targetGroupId },
+  );
+  return normalizeTransferRequest(data) ?? (data as ContentTransferRequestDTO);
+};
+
+export const acceptTransferRequest = async (requestId: string) => {
+  const { data } = await axiosInstance.post(
+    `/api/v1/cms/transfer-requests/${requestId}/accept`,
+  );
+  return data;
+};
+
+export const rejectTransferRequest = async (requestId: string) => {
+  const { data } = await axiosInstance.post(
+    `/api/v1/cms/transfer-requests/${requestId}/reject`,
+  );
+  return data;
+};
+
+export const revokeTransferRequest = async (requestId: string) => {
+  const { data } = await axiosInstance.post(
+    `/api/v1/cms/transfer-requests/${requestId}/revoke`,
+  );
+  return data;
+};
+
+export function isTransferRequestExpired(
+  req: ContentTransferRequestDTO,
+): boolean {
+  if (req.status === "EXPIRED") return true;
+  return new Date(req.expires_at).getTime() <= Date.now();
+}
diff --git a/src/components/routes/content-transfer/components/ContentTransferDialog.tsx b/src/components/routes/content-transfer/components/ContentTransferDialog.tsx
new file mode 100644
index 00000000..c9541bcc
--- /dev/null
+++ b/src/components/routes/content-transfer/components/ContentTransferDialog.tsx
@@ -0,0 +1,168 @@
+import { useEffect, useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { useDebounce } from "use-debounce";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { Button } from "@/components/ui/atoms/button";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import {
+  createPlanTransferRequest,
+  createSeriesTransferRequest,
+} from "../api/transferApi";
+import {
+  fetchGroupsForTransfer,
+  pickGroupTitle,
+  type AuthorGroupListItem,
+} from "@/components/routes/groups/api/groupsApi";
+
+type ContentTransferDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  contentType: "plan" | "series";
+  contentId: string;
+  sourceGroupId: string;
+  contentTitle?: string;
+  onSuccess?: () => void;
+};
+
+const ContentTransferDialog = ({
+  open,
+  onOpenChange,
+  contentType,
+  contentId,
+  sourceGroupId,
+  contentTitle,
+  onSuccess,
+}: ContentTransferDialogProps) => {
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebounce(search, 400);
+  const [groups, setGroups] = useState<AuthorGroupListItem[]>([]);
+  const [isLoadingGroups, setIsLoadingGroups] = useState(false);
+  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) {
+      setSearch("");
+      setSelectedGroupId(null);
+      setGroups([]);
+      return;
+    }
+
+    let cancelled = false;
+    setIsLoadingGroups(true);
+    void fetchGroupsForTransfer({
+      search: debouncedSearch || undefined,
+      excludeGroupId: sourceGroupId,
+    })
+      .then((list) => {
+        if (cancelled) return;
+        setGroups(list);
+      })
+      .catch(() => {
+        if (!cancelled) setGroups([]);
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoadingGroups(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [open, debouncedSearch, sourceGroupId]);
+
+  const transferMutation = useMutation({
+    mutationFn: (targetGroupId: string) =>
+      contentType === "series"
+        ? createSeriesTransferRequest(contentId, targetGroupId)
+        : createPlanTransferRequest(contentId, targetGroupId),
+    onSuccess: () => {
+      toast.success("Transfer request sent", {
+        description: "The target group can accept or reject the request.",
+      });
+      onOpenChange(false);
+      onSuccess?.();
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const entityLabel = contentType === "series" ? "series" : "plan";
+
+  return (
+    <Pecha.Dialog open={open} onOpenChange={onOpenChange}>
+      <Pecha.DialogContent className="max-w-md">
+        <Pecha.DialogHeader>
+          <Pecha.DialogTitle>Transfer {entityLabel}</Pecha.DialogTitle>
+        </Pecha.DialogHeader>
+        <p className="text-sm text-muted-foreground">
+          {contentTitle
+            ? `Send "${contentTitle}" to another group for approval.`
+            : `Choose a target group for this ${entityLabel}.`}
+        </p>
+
+        <div className="space-y-3 py-2">
+          <Pecha.Input
+            placeholder="Search groups…"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+
+          <div className="max-h-52 overflow-y-auto rounded-md border border-input">
+            {isLoadingGroups ? (
+              <p className="px-3 py-4 text-sm text-muted-foreground">
+                Loading groups…
+              </p>
+            ) : groups.length === 0 ? (
+              <p className="px-3 py-4 text-sm text-muted-foreground">
+                No other groups found.
+              </p>
+            ) : (
+              <ul>
+                {groups.map((group) => {
+                  const title = pickGroupTitle(group.metadata);
+                  const selected = selectedGroupId === group.id;
+                  return (
+                    <li key={group.id}>
+                      <button
+                        type="button"
+                        className={`w-full px-3 py-2 text-left text-sm hover:bg-muted/60 ${
+                          selected ? "bg-muted font-medium" : ""
+                        }`}
+                        onClick={() => setSelectedGroupId(group.id)}
+                      >
+                        {title}
+                      </button>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-2 pt-2">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            className="bg-[#A51C21] text-white hover:bg-[#A51C21]/90"
+            disabled={!selectedGroupId || transferMutation.isPending}
+            onClick={() => {
+              if (selectedGroupId) {
+                transferMutation.mutate(selectedGroupId);
+              }
+            }}
+          >
+            {transferMutation.isPending ? "Sending…" : "Send request"}
+          </Button>
+        </div>
+      </Pecha.DialogContent>
+    </Pecha.Dialog>
+  );
+};
+
+export default ContentTransferDialog;
diff --git a/src/components/routes/create-plan/CreatePlan.test.tsx b/src/components/routes/create-plan/CreatePlan.test.tsx
index e546aa4a..83cf990c 100644
--- a/src/components/routes/create-plan/CreatePlan.test.tsx
+++ b/src/components/routes/create-plan/CreatePlan.test.tsx
@@ -4,8 +4,14 @@ import {
   screen,
   waitFor,
   act,
+  within,
 } from "@testing-library/react";
-import { MemoryRouter, useBlocker, useParams } from "react-router-dom";
+import {
+  MemoryRouter,
+  useBlocker,
+  useLocation,
+  useParams,
+} from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import CreatePlan from "./CreatePlan";
 import { vi } from "vitest";
@@ -20,11 +26,21 @@ vi.mock("react-router-dom", async () => {
       proceed: vi.fn(),
       reset: vi.fn(),
     })),
-    useParams: vi.fn(() => ({})),
+    useParams: vi.fn(() => ({ groupId: "test-group-id" })),
+    useLocation: vi.fn(() => ({
+      pathname: "/groups/test-group-id/plan/new",
+      search: "",
+      hash: "",
+      state: null,
+      key: "default",
+    })),
   };
 });
 
-const renderWithProviders = (component: React.ReactElement) => {
+const renderWithProviders = (
+  component: React.ReactElement,
+  initialEntry: string | { pathname: string; state?: unknown } = "/plan/new",
+) => {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: { retry: false },
@@ -33,7 +49,7 @@ const renderWithProviders = (component: React.ReactElement) => {
   });
 
   return render(
-    <MemoryRouter>
+    <MemoryRouter initialEntries={[initialEntry]}>
       <QueryClientProvider client={queryClient}>
         {component}
       </QueryClientProvider>
@@ -65,7 +81,24 @@ vi.mock(
 describe("CreatePlan Component", () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    vi.mocked(useParams).mockReturnValue({});
+    // `clearAllMocks` resets call history but keeps implementations set via
+    // `mockReturnValue`. The navigation tests force `useBlocker` into a
+    // "blocked" state, which opens the navigation dialog; reset it here so
+    // that leaked dialog doesn't `aria-hidden` the form in later tests.
+    vi.mocked(useBlocker).mockReturnValue({
+      state: "unblocked",
+      proceed: undefined,
+      reset: undefined,
+      location: undefined,
+    });
+    vi.mocked(useParams).mockReturnValue({ groupId: "test-group-id" });
+    vi.mocked(useLocation).mockReturnValue({
+      pathname: "/groups/test-group-id/plan/new",
+      search: "",
+      hash: "",
+      state: null,
+      key: "default",
+    });
     vi.spyOn(axiosInstance, "post").mockImplementation((url: string) => {
       if (url.includes("/media/upload")) {
         return Promise.resolve({
@@ -151,7 +184,7 @@ describe("CreatePlan Component", () => {
     renderWithProviders(<CreatePlan />);
 
     expect(
-      screen.getByText("studio.plan.form_field.details"),
+      screen.getByRole("heading", { name: "Plan Details" }),
     ).toBeInTheDocument();
   });
 
@@ -350,7 +383,7 @@ describe("CreatePlan Component", () => {
   });
 
   it("shows validation errors for required fields", async () => {
-    vi.mocked(useParams).mockReturnValue({});
+    vi.mocked(useParams).mockReturnValue({ groupId: "test-group-id" });
     renderWithProviders(<CreatePlan />);
     const submitButton = screen.getByText("studio.plan.next_button");
     fireEvent.click(submitButton);
@@ -405,13 +438,35 @@ describe("CreatePlan Component", () => {
       screen.getByRole("button", { name: 'Create "Brand New Tag"' }),
     );
 
+    // Clicking the create option opens a multi-language dialog with the
+    // typed name pre-filled for the default (EN) language.
+    const createTagButton = await screen.findByRole("button", {
+      name: "Create Tag",
+    });
+    fireEvent.click(createTagButton);
+
     await waitFor(() => {
       expect(axiosInstance.post).toHaveBeenCalledWith(
         "/api/v1/cms/tags",
-        expect.objectContaining({ name: "Brand New Tag" }),
+        expect.objectContaining({
+          metadata: expect.arrayContaining([
+            expect.objectContaining({
+              language: "EN",
+              name: "Brand New Tag",
+            }),
+          ]),
+        }),
         expect.any(Object),
       );
     });
+
+    // Successful creation closes the dialog; wait for it so the Radix
+    // scroll-lock is torn down and does not leak into later tests.
+    await waitFor(() => {
+      expect(
+        screen.queryByRole("button", { name: "Create Tag" }),
+      ).not.toBeInTheDocument();
+    });
   });
 
   it("shows no image preview initially", () => {
@@ -555,8 +610,7 @@ describe("CreatePlan Component", () => {
     await waitFor(() => {
       expect(axiosInstance.put).toHaveBeenCalledWith(
         "/api/v1/cms/plans/plan-123",
-        expect.any(Object),
-        expect.any(Object),
+        expect.objectContaining({ title: "Updated Plan" }),
       );
     });
   });
@@ -588,8 +642,104 @@ describe("CreatePlan Component", () => {
       expect(putSpy).toHaveBeenCalledWith(
         "/api/v1/cms/plans/plan-123",
         expect.objectContaining({ start_date: null }),
-        expect.any(Object),
       );
     });
   });
+
+  describe("create plan from series details", () => {
+    beforeEach(() => {
+      vi.spyOn(axiosInstance, "get").mockImplementation((url: string) => {
+        if (url.includes("/api/v1/cms/series")) {
+          return Promise.resolve({
+            data: {
+              series: [
+                {
+                  id: "series-1",
+                  metadata: [{ title: "Abhidhamma in a year", language: "EN" }],
+                },
+              ],
+            },
+          });
+        }
+        if (url.includes("/cms/tags")) {
+          return Promise.resolve({
+            data: {
+              tags: [],
+              skip: 0,
+              limit: 500,
+              total: 0,
+            },
+          });
+        }
+        return Promise.resolve({ data: {} });
+      });
+    });
+
+    it("pre-fills and locks series and language when location state is valid", async () => {
+      vi.mocked(useLocation).mockReturnValue({
+        pathname: "/plan/new",
+        search: "",
+        hash: "",
+        state: { seriesId: "series-1", language: "EN" },
+        key: "default",
+      });
+
+      renderWithProviders(<CreatePlan />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("heading", {
+            name: "Add New Plan for Abhidhamma in a year (English)",
+          }),
+        ).toBeInTheDocument();
+        expect(screen.getByText("Abhidhamma in a year")).toBeInTheDocument();
+      });
+
+      const seriesField = screen
+        .getByText("Series")
+        .closest('[data-slot="form-item"]');
+      expect(seriesField).not.toBeNull();
+      expect(
+        within(seriesField as HTMLElement).getByRole("combobox", {
+          hidden: true,
+        }),
+      ).toBeDisabled();
+
+      const languageField = screen
+        .getByText("studio.plan.form_field.language")
+        .closest('[data-slot="form-item"]');
+      expect(languageField).not.toBeNull();
+      const languageSelect = within(languageField as HTMLElement).getByRole(
+        "combobox",
+        { hidden: true },
+      );
+      expect(languageSelect).toBeDisabled();
+      expect(languageSelect).toHaveTextContent("English");
+    });
+
+    it("falls back to normal form when series id is not in the list", async () => {
+      vi.mocked(useLocation).mockReturnValue({
+        pathname: "/plan/new",
+        search: "",
+        hash: "",
+        state: { seriesId: "missing-series", language: "EN" },
+        key: "default",
+      });
+
+      renderWithProviders(<CreatePlan />);
+
+      await waitFor(() => {
+        const seriesField = screen
+          .getByText("Series")
+          .closest('[data-slot="form-item"]');
+        expect(seriesField).not.toBeNull();
+        const seriesCombobox = within(seriesField as HTMLElement).getByRole(
+          "combobox",
+          { hidden: true },
+        );
+        expect(seriesCombobox).toHaveTextContent("None");
+        expect(seriesCombobox).not.toBeDisabled();
+      });
+    });
+  });
 });
diff --git a/src/components/routes/create-plan/CreatePlan.tsx b/src/components/routes/create-plan/CreatePlan.tsx
index 14db40b9..9f57b516 100644
--- a/src/components/routes/create-plan/CreatePlan.tsx
+++ b/src/components/routes/create-plan/CreatePlan.tsx
@@ -3,24 +3,36 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { IoMdAdd, IoMdClose } from "react-icons/io";
 import {
   IoCalendarClearOutline,
+  IoChevronDown,
   IoInformationCircleOutline,
 } from "react-icons/io5";
-
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useMemo } from "react";
 import { format } from "date-fns";
-import { Textarea } from "@/components/ui/atoms/textarea";
-import { useBlocker, useNavigate, useParams } from "react-router-dom";
+import { MarkdownEditor } from "@/components/ui/atoms/markdown-editor";
+import {
+  useBlocker,
+  useLocation,
+  useNavigate,
+  useParams,
+} from "react-router-dom";
+import { parsePlanNewFromSeriesState } from "./planNewFromSeriesState";
 import { ROUTES } from "@/routes/paths";
 import { planSchema } from "@/schema/PlanSchema";
 import { z } from "zod";
 import { useTranslate } from "@tolgee/react";
 import PlanTagSearchInput from "./PlanTagSearchInput";
+import PlanVideosSection from "./PlanVideosSection";
+import type { PlanVideoSummary } from "@/components/routes/task/api/planApi";
 import {
   planTagsToIds,
   type PlanTagSummary,
 } from "@/components/routes/tags/api/tagsApi";
+import {
+  fetchSeriesList,
+  type SeriesOption,
+} from "@/components/routes/create-series/api/seriesApi";
 import { DIFFICULTY, PLAN_LANGUAGE } from "@/lib/constant";
-import { toBackendISO, fromBackendISO, isPastDate } from "@/lib/utils";
+import { cn, toBackendISO, fromBackendISO, isPastDate } from "@/lib/utils";
 import axiosInstance from "@/config/axios-config";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { toast } from "sonner";
@@ -33,14 +45,10 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/atoms/tooltip";
+import { resolveDashboardItemImageUrl } from "@/components/routes/dashboard/dashboardTable";
 
 export const getPlan = async (plan_id: string) => {
-  const accessToken = sessionStorage.getItem("accessToken");
-  const { data } = await axiosInstance.get(`/api/v1/cms/plans/${plan_id}`, {
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-    },
-  });
+  const { data } = await axiosInstance.get(`/api/v1/cms/plans/${plan_id}`);
   return data;
 };
 
@@ -51,29 +59,20 @@ export const updatePlan = async ({
   plan_id: string;
   formdata: z.infer<typeof planSchema>;
 }) => {
-  const accessToken = sessionStorage.getItem("accessToken");
   const { data } = await axiosInstance.put(
     `/api/v1/cms/plans/${plan_id}`,
     formdata,
-    {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
-    },
   );
   return data;
 };
 
 export const postPlan = async (formdata: z.infer<typeof planSchema>) => {
-  const accessToken = sessionStorage.getItem("accessToken");
-  const { data } = await axiosInstance.post(`/api/v1/cms/plans`, formdata, {
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-    },
-  });
+  const { data } = await axiosInstance.post(`/api/v1/cms/plans`, formdata);
   return data;
 };
 
+const EMPTY_SERIES_OPTIONS: SeriesOption[] = [];
+
 const Createplan = () => {
   const [selectedImage, setSelectedImage] = useState<File | null>(null);
   const [imagePreview, setImagePreview] = useState<string | null>(null);
@@ -86,11 +85,26 @@ const Createplan = () => {
   );
 
   const [isDateOpen, setIsDateOpen] = useState(false);
-  const { planId } = useParams<{ planId?: string }>();
+  const { planId, groupId } = useParams<{
+    planId?: string;
+    groupId?: string;
+  }>();
+  const location = useLocation();
   const isCreateMode = !planId;
   const { t } = useTranslate();
+  const planNewFromSeries = useMemo(
+    () => (isCreateMode ? parsePlanNewFromSeriesState(location.state) : null),
+    [isCreateMode, location.state],
+  );
   type PlanFormData = z.infer<typeof planSchema>;
   const navigate = useNavigate();
+
+  useEffect(() => {
+    if (isCreateMode && !groupId) {
+      navigate(ROUTES.groups, { replace: true });
+    }
+  }, [isCreateMode, groupId, navigate]);
+
   const form = useForm({
     resolver: zodResolver(planSchema),
     defaultValues: {
@@ -102,6 +116,7 @@ const Createplan = () => {
       tags: [],
       language: "",
       start_date: null,
+      series_id: null,
     },
   });
 
@@ -111,6 +126,117 @@ const Createplan = () => {
     enabled: !!planId,
     refetchOnWindowFocus: false,
   });
+
+  const {
+    data: seriesOptionsData,
+    isLoading: isSeriesLoading,
+    isError: isSeriesError,
+  } = useQuery({
+    queryKey: ["cms-series-list"],
+    queryFn: fetchSeriesList,
+    refetchOnWindowFocus: false,
+  });
+  const seriesOptions = seriesOptionsData ?? EMPTY_SERIES_OPTIONS;
+
+  useEffect(() => {
+    if (isSeriesError) {
+      toast.error("Couldn't load series", {
+        description:
+          "The series list is unavailable. The plan's current series won't be changed.",
+      });
+    }
+  }, [isSeriesError]);
+
+  const [isSeriesOpen, setIsSeriesOpen] = useState(false);
+  const [seriesQuery, setSeriesQuery] = useState("");
+
+  const filteredSeriesOptions = useMemo(() => {
+    const q = seriesQuery.trim().toLowerCase();
+    if (!q) return seriesOptions;
+    return seriesOptions.filter((s) => s.title.toLowerCase().includes(q));
+  }, [seriesOptions, seriesQuery]);
+
+  const lockSeriesAndLanguageFields = useMemo(() => {
+    if (!planNewFromSeries) return false;
+    if (isSeriesLoading) return true;
+    if (isSeriesError) return false;
+    return seriesOptions.some((s) => s.id === planNewFromSeries.seriesId);
+  }, [planNewFromSeries, isSeriesLoading, isSeriesError, seriesOptions]);
+
+  const lockStartDateFromSeries = useMemo(
+    () =>
+      isCreateMode &&
+      planNewFromSeries != null &&
+      planNewFromSeries.start_date !== undefined,
+    [isCreateMode, planNewFromSeries],
+  );
+
+  const pageHeading = useMemo(() => {
+    if (!isCreateMode) return "Plan Edit";
+    if (!planNewFromSeries) return "Plan Details";
+    if (lockSeriesAndLanguageFields) {
+      const seriesTitle = seriesOptions.find(
+        (s) => s.id === planNewFromSeries.seriesId,
+      )?.title;
+      const languageLabel = PLAN_LANGUAGE.find(
+        (l) => l.value === planNewFromSeries.language,
+      )?.label;
+      if (seriesTitle && languageLabel) {
+        return `Add New Plan for ${seriesTitle} (${languageLabel})`;
+      }
+      if (seriesTitle) return `Add New Plan for ${seriesTitle}`;
+    }
+    if (isSeriesLoading) return "Add New Plan";
+    return "Plan Details";
+  }, [
+    isCreateMode,
+    planNewFromSeries,
+    lockSeriesAndLanguageFields,
+    seriesOptions,
+    isSeriesLoading,
+  ]);
+
+  useEffect(() => {
+    if (!isCreateMode || !planNewFromSeries) return;
+
+    if (isSeriesLoading) {
+      form.setValue("series_id", planNewFromSeries.seriesId);
+      form.setValue("language", planNewFromSeries.language);
+      return;
+    }
+
+    const seriesExists = seriesOptions.some(
+      (s) => s.id === planNewFromSeries.seriesId,
+    );
+
+    if (!isSeriesError && seriesExists) {
+      form.setValue("series_id", planNewFromSeries.seriesId);
+      form.setValue("language", planNewFromSeries.language);
+      return;
+    }
+
+    form.setValue("series_id", null);
+    form.setValue("language", "");
+  }, [
+    isCreateMode,
+    planNewFromSeries,
+    isSeriesLoading,
+    isSeriesError,
+    seriesOptions,
+    form,
+  ]);
+
+  useEffect(() => {
+    if (!isCreateMode || !planNewFromSeries) return;
+    if (planNewFromSeries.start_date === undefined) return;
+
+    const mode = planNewFromSeries.start_date ? "specific" : "enroll";
+    setStartDateMode(mode);
+    form.setValue("start_date", planNewFromSeries.start_date, {
+      shouldDirty: false,
+    });
+  }, [isCreateMode, planNewFromSeries, form]);
+
   useEffect(() => {
     if (planId && planData) {
       form.reset({
@@ -122,12 +248,24 @@ const Createplan = () => {
         tags: planTagsToIds(planData.tags),
         language: planData.language || "",
         start_date: planData.start_date || null,
+        series_id: planData.series_id ?? null,
       });
       setStartDateMode(planData.start_date ? "specific" : "enroll");
-      setImagePreview(planData.image_url ? `${planData.image_url}` : null);
+      const resolvedImageUrl = resolveDashboardItemImageUrl({
+        image_url: planData.image_url,
+        plan_image_url: planData.plan_image_url,
+        image_key: planData.image_key,
+        image: planData.image,
+      });
+      setImagePreview(resolvedImageUrl || null);
     }
   }, [planId, planData]);
 
+  const planVideos = useMemo<PlanVideoSummary[]>(
+    () => (Array.isArray(planData?.videos) ? planData.videos : []),
+    [planData],
+  );
+
   const canUpdate = form.formState.isDirty;
 
   const hasUnsavedChanges = canUpdate && !form.formState.isSubmitSuccessful;
@@ -145,7 +283,11 @@ const Createplan = () => {
       form.reset();
       setSelectedImage(null);
       setImagePreview(null);
-      navigate(ROUTES.plan(data.id));
+      if (groupId) {
+        navigate(ROUTES.group(groupId));
+      } else {
+        navigate(ROUTES.plan(data.id));
+      }
     },
     onError: (error) => {
       toast.error("Failed to create plan", {
@@ -155,7 +297,7 @@ const Createplan = () => {
   });
   const updatePlanMutation = useMutation({
     mutationFn: updatePlan,
-    onSuccess: (_) => {
+    onSuccess: () => {
       toast.success("Plan updated successfully!", {
         description: "Your plan has been updated and is now available.",
       });
@@ -210,13 +352,15 @@ const Createplan = () => {
       });
       setIsImageDialogOpen(false);
       toast.success("Image uploaded successfully!");
-    } catch (error: any) {
-      if (error?.response?.status === 413) {
+    } catch (error: unknown) {
+      if (
+        (error as { response?: { status?: number } }).response?.status === 413
+      ) {
         toast.error("Failed to update Image", {
           description: "file exceeds the maximum size of 1MB",
         });
       } else {
-        console.error("Image upload failed:", error);
+        console.error("Image upload failed:", error as Error);
         toast.error("Failed to upload image");
       }
     } finally {
@@ -230,17 +374,26 @@ const Createplan = () => {
       start_date: startDateMode === "specific" ? data.start_date : null,
     };
     if (planId) {
-      updatePlanMutation.mutate({ plan_id: planId, formdata: payload });
+      if (isSeriesError) {
+        const { series_id: _seriesId, ...rest } = payload;
+        void _seriesId;
+        updatePlanMutation.mutate({ plan_id: planId, formdata: rest });
+      } else {
+        updatePlanMutation.mutate({ plan_id: planId, formdata: payload });
+      }
     } else {
-      createPlanMutation.mutate(payload);
+      const { series_id, ...rest } = payload;
+      const body = {
+        ...(series_id ? { ...rest, series_id } : rest),
+        group_id: groupId!,
+      };
+      createPlanMutation.mutate(body);
     }
   };
   return (
     <div className="flex flex-col sm:flex-row border h-[calc(100vh-40px)] overflow-auto bg-[#F5F5F5] dark:bg-[#181818] my-4 rounded-l-2xl font-dynamic">
       <div className="flex-1 p-4 sm:p-10">
-        <h1 className="text-xl font-bold my-4">
-          {t("studio.plan.form_field.details")}
-        </h1>
+        <h1 className="text-xl font-bold my-4">{pageHeading}</h1>
 
         <Pecha.Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
@@ -273,12 +426,14 @@ const Createplan = () => {
                     {t("studio.plan.form_field.description")}
                   </Pecha.FormLabel>
                   <Pecha.FormControl>
-                    <Textarea
+                    <MarkdownEditor
+                      value={field.value}
+                      onChange={field.onChange}
                       placeholder={t(
                         "studio.plan.form.placeholder.description",
                       )}
-                      className="min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-base  placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 resize-none"
-                      {...field}
+                      className="bg-white dark:bg-[#181818]"
+                      textareaClassName="bg-white dark:bg-[#181818]"
                     />
                   </Pecha.FormControl>
                   <Pecha.FormMessage />
@@ -462,6 +617,7 @@ const Createplan = () => {
                     <Pecha.RadioGroup
                       value={startDateMode}
                       onValueChange={(v) => {
+                        if (lockStartDateFromSeries) return;
                         const mode = v as "enroll" | "specific";
                         setStartDateMode(mode);
                         if (mode === "enroll") {
@@ -476,6 +632,7 @@ const Createplan = () => {
                         <Pecha.RadioGroupItem
                           value="enroll"
                           id="start-date-enroll"
+                          disabled={lockStartDateFromSeries}
                         />
                         <label
                           htmlFor="start-date-enroll"
@@ -488,6 +645,7 @@ const Createplan = () => {
                         <Pecha.RadioGroupItem
                           value="specific"
                           id="start-date-specific"
+                          disabled={lockStartDateFromSeries}
                         />
                         <label
                           htmlFor="start-date-specific"
@@ -505,7 +663,10 @@ const Createplan = () => {
                         <Pecha.Button
                           type="button"
                           variant="outline"
-                          disabled={startDateMode !== "specific"}
+                          disabled={
+                            lockStartDateFromSeries ||
+                            startDateMode !== "specific"
+                          }
                           className="h-12 w-full justify-start gap-2 px-3 font-normal rounded-md"
                         >
                           <IoCalendarClearOutline className="h-4 w-4 text-muted-foreground" />
@@ -550,6 +711,127 @@ const Createplan = () => {
                 )}
               />
             </div>
+
+            <Pecha.FormField
+              control={form.control}
+              name="series_id"
+              render={({ field }) => {
+                const selectedSeries = seriesOptions.find(
+                  (s) => s.id === field.value,
+                );
+
+                let seriesTriggerLabel: string;
+                if (isSeriesLoading) {
+                  seriesTriggerLabel = "Loading series…";
+                } else if (isSeriesError) {
+                  seriesTriggerLabel = "Series unavailable";
+                } else {
+                  seriesTriggerLabel = selectedSeries?.title ?? "None";
+                }
+
+                const isSeriesFieldDisabled =
+                  lockSeriesAndLanguageFields ||
+                  isSeriesLoading ||
+                  isSeriesError;
+
+                return (
+                  <Pecha.FormItem className="flex flex-col">
+                    <Pecha.FormLabel className="text-sm font-bold">
+                      Series
+                    </Pecha.FormLabel>
+                    <Pecha.Popover
+                      open={isSeriesFieldDisabled ? false : isSeriesOpen}
+                      onOpenChange={(open) => {
+                        if (isSeriesFieldDisabled) return;
+                        setIsSeriesOpen(open);
+                        if (!open) setSeriesQuery("");
+                      }}
+                    >
+                      <div
+                        className={cn(
+                          isSeriesFieldDisabled && "cursor-not-allowed",
+                        )}
+                      >
+                        <Pecha.PopoverTrigger asChild>
+                          <Pecha.FormControl>
+                            <Pecha.Button
+                              type="button"
+                              variant="outline"
+                              role="combobox"
+                              aria-expanded={isSeriesOpen}
+                              disabled={isSeriesFieldDisabled}
+                              className="h-12 w-full justify-between rounded-md bg-white px-3 font-normal"
+                            >
+                              <span
+                                className={
+                                  selectedSeries
+                                    ? "text-foreground"
+                                    : "text-muted-foreground"
+                                }
+                              >
+                                {seriesTriggerLabel}
+                              </span>
+                              <IoChevronDown className="size-4 opacity-50" />
+                            </Pecha.Button>
+                          </Pecha.FormControl>
+                        </Pecha.PopoverTrigger>
+                      </div>
+                      <Pecha.PopoverContent
+                        className="w-[--radix-popover-trigger-width] p-0"
+                        align="start"
+                      >
+                        <Pecha.Command shouldFilter={false}>
+                          <Pecha.CommandInput
+                            placeholder="Search series…"
+                            value={seriesQuery}
+                            onValueChange={setSeriesQuery}
+                          />
+                          <Pecha.CommandList>
+                            <Pecha.CommandGroup>
+                              <Pecha.CommandItem
+                                value="__none__"
+                                onSelect={() => {
+                                  field.onChange(null);
+                                  setIsSeriesOpen(false);
+                                }}
+                              >
+                                None
+                              </Pecha.CommandItem>
+                              {filteredSeriesOptions.map((series) => (
+                                <Pecha.CommandItem
+                                  key={series.id}
+                                  value={series.id}
+                                  onSelect={() => {
+                                    field.onChange(series.id);
+                                    setIsSeriesOpen(false);
+                                  }}
+                                >
+                                  {series.title}
+                                </Pecha.CommandItem>
+                              ))}
+                            </Pecha.CommandGroup>
+                            {seriesQuery &&
+                              filteredSeriesOptions.length === 0 && (
+                                <Pecha.CommandEmpty>
+                                  No series found.
+                                </Pecha.CommandEmpty>
+                              )}
+                          </Pecha.CommandList>
+                        </Pecha.Command>
+                      </Pecha.PopoverContent>
+                    </Pecha.Popover>
+                    {isSeriesError && (
+                      <p className="text-sm text-destructive">
+                        Couldn't load series. This plan's current series will
+                        not be changed.
+                      </p>
+                    )}
+                    <Pecha.FormMessage />
+                  </Pecha.FormItem>
+                );
+              }}
+            />
+
             <div className="flex flex-col sm:flex-row gap-4">
               <Pecha.FormField
                 control={form.control}
@@ -601,9 +883,13 @@ const Createplan = () => {
                     <Pecha.Select
                       onValueChange={field.onChange}
                       value={field.value}
+                      disabled={lockSeriesAndLanguageFields}
                     >
                       <Pecha.FormControl>
-                        <Pecha.SelectTrigger className="h-12 w-full bg-white">
+                        <Pecha.SelectTrigger
+                          className="h-12 w-full bg-white"
+                          disabled={lockSeriesAndLanguageFields}
+                        >
                           <Pecha.SelectValue
                             placeholder={t(
                               "studio.plan.form.placeholder.select_language",
@@ -654,6 +940,11 @@ const Createplan = () => {
                 </Pecha.FormItem>
               )}
             />
+
+            {planId && (
+              <PlanVideosSection planId={planId} videos={planVideos} />
+            )}
+
             <div className="pt-8 w-full flex justify-end">
               {isCreateMode ? (
                 <Pecha.Button
diff --git a/src/components/routes/create-plan/PlanNewLegacyRedirect.tsx b/src/components/routes/create-plan/PlanNewLegacyRedirect.tsx
new file mode 100644
index 00000000..ba44c907
--- /dev/null
+++ b/src/components/routes/create-plan/PlanNewLegacyRedirect.tsx
@@ -0,0 +1,48 @@
+import { useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import {
+  getSeries,
+  resolveSeriesGroupId,
+} from "@/components/routes/create-series/api/seriesApi";
+import { parsePlanNewFromSeriesState } from "./planNewFromSeriesState";
+import { ROUTES } from "@/routes/paths";
+
+/** Sends legacy `/plan/new` (with optional series state) to group-scoped create. */
+const PlanNewLegacyRedirect = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const fromSeries = parsePlanNewFromSeriesState(location.state);
+
+  useEffect(() => {
+    if (!fromSeries) {
+      navigate(ROUTES.groups, { replace: true });
+      return;
+    }
+
+    let cancelled = false;
+    void getSeries(fromSeries.seriesId)
+      .then((series) => {
+        if (cancelled) return;
+        const groupId = resolveSeriesGroupId(series);
+        if (groupId) {
+          navigate(ROUTES.groupPlanNew(groupId), {
+            replace: true,
+            state: location.state,
+          });
+        } else {
+          navigate(ROUTES.groups, { replace: true });
+        }
+      })
+      .catch(() => {
+        if (!cancelled) navigate(ROUTES.groups, { replace: true });
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [fromSeries, location.state, navigate]);
+
+  return null;
+};
+
+export default PlanNewLegacyRedirect;
diff --git a/src/components/routes/create-plan/PlanTagSearchInput.tsx b/src/components/routes/create-plan/PlanTagSearchInput.tsx
index d3ee908e..20981cdc 100644
--- a/src/components/routes/create-plan/PlanTagSearchInput.tsx
+++ b/src/components/routes/create-plan/PlanTagSearchInput.tsx
@@ -1,14 +1,20 @@
 import { useEffect, useRef, useState } from "react";
-import { IoMdClose } from "react-icons/io";
+import { IoMdAdd, IoMdClose } from "react-icons/io";
 import { useDebounce } from "use-debounce";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import { Input } from "@/components/ui/atoms/input";
+import { Textarea } from "@/components/ui/atoms/textarea";
+import { Button } from "@/components/ui/atoms/button";
+import { Pecha } from "@/components/ui/shadimport";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+import type { LanguageCode } from "@/schema/SeriesSchema";
 import {
   createTag,
   fetchTags,
   type PlanTagSummary,
   type Tag,
+  type TagMetadataInput,
 } from "@/components/routes/tags/api/tagsApi";
 
 interface PlanTagSearchInputProps {
@@ -16,6 +22,7 @@ interface PlanTagSearchInputProps {
   onChange?: (tagIds: string[]) => void;
   initialTags?: PlanTagSummary[];
   planId?: string;
+  hideLabel?: boolean;
 }
 
 const SUGGESTIONS_LIMIT = 10;
@@ -23,11 +30,17 @@ const SEARCH_DEBOUNCE_MS = 400;
 
 const normalizeName = (name: string) => name.trim().toLowerCase();
 
+interface LanguageData {
+  name: string;
+  description: string;
+}
+
 const PlanTagSearchInput = ({
   value = [],
   onChange,
   initialTags = [],
   planId,
+  hideLabel = false,
 }: PlanTagSearchInputProps) => {
   const queryClient = useQueryClient();
   const containerRef = useRef<HTMLDivElement>(null);
@@ -37,6 +50,20 @@ const PlanTagSearchInput = ({
   const [tagLabels, setTagLabels] = useState<Record<string, string>>(() =>
     Object.fromEntries(initialTags.map((tag) => [tag.id, tag.name])),
   );
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [activeLanguages, setActiveLanguages] = useState<LanguageCode[]>([
+    "EN",
+  ]);
+  const [languageData, setLanguageData] = useState<
+    Record<LanguageCode, LanguageData>
+  >({
+    EN: { name: "", description: "" },
+    BO: { name: "", description: "" },
+    ZH: { name: "", description: "" },
+    HI: { name: "", description: "" },
+    NE: { name: "", description: "" },
+    MN: { name: "", description: "" },
+  });
 
   useEffect(() => {
     if (!initialTags.length) return;
@@ -54,10 +81,9 @@ const PlanTagSearchInput = ({
   });
 
   const createTagMutation = useMutation({
-    mutationFn: (name: string) =>
+    mutationFn: (metadata: TagMetadataInput[]) =>
       createTag({
-        name: name.trim(),
-        description: null,
+        metadata,
         image_key: null,
         plan_ids: planId ? [planId] : [],
       }),
@@ -67,6 +93,8 @@ const PlanTagSearchInput = ({
       addTag(tag);
       setInputValue("");
       setShowSuggestions(false);
+      setShowCreateDialog(false);
+      resetCreateForm();
       toast.success(`Tag "${tag.name}" created`);
     },
     onError: () => {
@@ -104,9 +132,68 @@ const PlanTagSearchInput = ({
     setShowSuggestions(false);
   };
 
+  const resetCreateForm = () => {
+    setActiveLanguages(["EN"]);
+    setLanguageData({
+      EN: { name: "", description: "" },
+      BO: { name: "", description: "" },
+      ZH: { name: "", description: "" },
+      HI: { name: "", description: "" },
+      NE: { name: "", description: "" },
+      MN: { name: "", description: "" },
+    });
+  };
+
+  const openCreateDialog = () => {
+    resetCreateForm();
+    setLanguageData((prev) => ({
+      ...prev,
+      EN: { name: trimmedInput, description: "" },
+    }));
+    setShowCreateDialog(true);
+    setShowSuggestions(false);
+  };
+
   const handleCreateTag = () => {
-    if (!trimmedInput || createTagMutation.isPending) return;
-    createTagMutation.mutate(trimmedInput);
+    const metadata: TagMetadataInput[] = [];
+    for (const lang of activeLanguages) {
+      const data = languageData[lang];
+      if (!data.name.trim()) {
+        toast.error(
+          `Name is required for ${PLAN_LANGUAGE.find((l) => l.value === lang)?.label}`,
+        );
+        return;
+      }
+      metadata.push({
+        language: lang,
+        name: data.name.trim(),
+        description: data.description.trim() || null,
+      });
+    }
+    createTagMutation.mutate(metadata);
+  };
+
+  const addLanguage = (langCode: LanguageCode) => {
+    setActiveLanguages([...activeLanguages, langCode]);
+  };
+
+  const removeLanguage = (langCode: LanguageCode) => {
+    if (activeLanguages.length === 1) {
+      toast.error("At least one language is required");
+      return;
+    }
+    setActiveLanguages(activeLanguages.filter((l) => l !== langCode));
+  };
+
+  const updateLanguageField = (
+    lang: LanguageCode,
+    field: keyof LanguageData,
+    value: string,
+  ) => {
+    setLanguageData((prev) => ({
+      ...prev,
+      [lang]: { ...prev[lang], [field]: value },
+    }));
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -122,7 +209,7 @@ const PlanTagSearchInput = ({
         return;
       }
       if (showCreateOption) {
-        handleCreateTag();
+        openCreateDialog();
       }
     } else if (e.key === "Escape") {
       setShowSuggestions(false);
@@ -152,7 +239,7 @@ const PlanTagSearchInput = ({
       ref={containerRef}
       className="w-full space-y-2 h-full font-dynamic flex flex-col"
     >
-      <p className="text-sm font-bold">Tags</p>
+      {!hideLabel ? <p className="text-sm font-bold">Tags</p> : null}
 
       {value.length > 0 && (
         <div className="flex flex-wrap items-center justify-start h-fit gap-2">
@@ -205,7 +292,7 @@ const PlanTagSearchInput = ({
                   type="button"
                   className="w-full px-3 py-2 text-left text-sm text-[#A51C21] hover:bg-muted/50 cursor-pointer font-medium border-b"
                   onMouseDown={(e) => e.preventDefault()}
-                  onClick={handleCreateTag}
+                  onClick={openCreateDialog}
                   disabled={createTagMutation.isPending}
                 >
                   {createTagMutation.isPending
@@ -239,6 +326,124 @@ const PlanTagSearchInput = ({
           </ul>
         )}
       </div>
+
+      {/* Multi-language Create Tag Dialog */}
+      <Pecha.Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
+        <Pecha.DialogContent className="flex max-h-[min(90dvh,90vh)] w-[calc(100%-2rem)] max-w-lg flex-col gap-0 overflow-hidden p-0 sm:w-full">
+          <Pecha.DialogHeader className="shrink-0 border-b px-6 py-4">
+            <Pecha.DialogTitle>Create New Tag</Pecha.DialogTitle>
+          </Pecha.DialogHeader>
+          <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-6 py-4">
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <label className="text-sm font-bold">Languages</label>
+                {PLAN_LANGUAGE.filter(
+                  (lang) =>
+                    !activeLanguages.includes(lang.value as LanguageCode),
+                ).length > 0 && (
+                  <Pecha.DropdownMenu>
+                    <Pecha.DropdownMenuTrigger asChild>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        className="h-7 text-xs"
+                      >
+                        <IoMdAdd className="h-3 w-3 mr-1" />
+                        Add Language
+                      </Button>
+                    </Pecha.DropdownMenuTrigger>
+                    <Pecha.DropdownMenuContent>
+                      {PLAN_LANGUAGE.filter(
+                        (lang) =>
+                          !activeLanguages.includes(lang.value as LanguageCode),
+                      ).map((lang) => (
+                        <Pecha.DropdownMenuItem
+                          key={lang.value}
+                          onClick={() =>
+                            addLanguage(lang.value as LanguageCode)
+                          }
+                        >
+                          {lang.label}
+                        </Pecha.DropdownMenuItem>
+                      ))}
+                    </Pecha.DropdownMenuContent>
+                  </Pecha.DropdownMenu>
+                )}
+              </div>
+              {activeLanguages.map((lang) => {
+                const langLabel =
+                  PLAN_LANGUAGE.find((l) => l.value === lang)?.label || lang;
+                return (
+                  <div
+                    key={lang}
+                    className="relative rounded-lg border border-input bg-[#FAFAFA] dark:bg-[#262626] p-4 space-y-3"
+                  >
+                    {activeLanguages.length > 1 && (
+                      <button
+                        type="button"
+                        onClick={() => removeLanguage(lang)}
+                        className="absolute top-2 right-2 text-muted-foreground hover:text-foreground p-1 rounded"
+                        aria-label={`Remove ${langLabel}`}
+                      >
+                        <IoMdClose className="h-4 w-4" />
+                      </button>
+                    )}
+                    <div className="text-sm font-semibold text-muted-foreground mb-2">
+                      {langLabel}
+                    </div>
+                    <div className="space-y-2">
+                      <label className="text-sm font-bold">Name</label>
+                      <Input
+                        value={languageData[lang].name}
+                        onChange={(e) =>
+                          updateLanguageField(lang, "name", e.target.value)
+                        }
+                        placeholder="Tag name"
+                        required
+                        className="bg-white dark:bg-[#181818]"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <label className="text-sm font-bold">Description</label>
+                      <Textarea
+                        value={languageData[lang].description}
+                        onChange={(e) =>
+                          updateLanguageField(
+                            lang,
+                            "description",
+                            e.target.value,
+                          )
+                        }
+                        placeholder="Optional description"
+                        className="field-sizing-fixed min-h-[80px] max-h-32 resize-none bg-white dark:bg-[#181818]"
+                      />
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          <div className="flex shrink-0 justify-end gap-2 border-t bg-background px-6 py-4">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setShowCreateDialog(false)}
+              disabled={createTagMutation.isPending}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              className="bg-[#A51C21] text-white hover:bg-[#A51C21]/90"
+              onClick={handleCreateTag}
+              disabled={createTagMutation.isPending}
+            >
+              {createTagMutation.isPending ? "Creating..." : "Create Tag"}
+            </Button>
+          </div>
+        </Pecha.DialogContent>
+      </Pecha.Dialog>
     </div>
   );
 };
diff --git a/src/components/routes/create-plan/PlanVideosSection.tsx b/src/components/routes/create-plan/PlanVideosSection.tsx
new file mode 100644
index 00000000..6753581d
--- /dev/null
+++ b/src/components/routes/create-plan/PlanVideosSection.tsx
@@ -0,0 +1,271 @@
+import { useEffect, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { SortableList, SortableItem } from "@/components/ui/atoms/sortable";
+import { FaYoutube } from "react-icons/fa";
+import { FiLoader, FiPlus } from "react-icons/fi";
+import { FaTrash } from "react-icons/fa6";
+import { PiDotsSixVertical } from "react-icons/pi";
+import {
+  addPlanVideo,
+  deletePlanVideo,
+  fetchPlanVideos,
+  reorderPlanVideos,
+  type PlanVideoSummary,
+} from "@/components/routes/task/api/planApi";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import {
+  getYouTubeVideoId,
+  getYouTubeShortsId,
+  reorderArray,
+} from "@/lib/utils";
+
+interface PlanVideosSectionProps {
+  planId: string;
+  videos?: PlanVideoSummary[];
+}
+
+const isYouTubeUrl = (url: string) =>
+  Boolean(getYouTubeVideoId(url) || getYouTubeShortsId(url));
+
+const sortByOrder = (videos: PlanVideoSummary[]) =>
+  [...videos].sort((a, b) => a.display_order - b.display_order);
+
+const PlanVideosSection = ({ planId, videos }: PlanVideosSectionProps) => {
+  const [url, setUrl] = useState("");
+  const [title, setTitle] = useState("");
+  const queryClient = useQueryClient();
+
+  const { data: serverVideos = [] } = useQuery<PlanVideoSummary[]>({
+    queryKey: ["plan-videos", planId],
+    queryFn: async () => (await fetchPlanVideos(planId)) ?? [],
+    initialData: videos ?? [],
+    refetchOnWindowFocus: false,
+  });
+
+  // Local copy so drag-reorder updates instantly before the server confirms.
+  const [orderedVideos, setOrderedVideos] = useState<PlanVideoSummary[]>(
+    sortByOrder(serverVideos),
+  );
+
+  useEffect(() => {
+    setOrderedVideos(sortByOrder(serverVideos));
+  }, [serverVideos]);
+
+  const invalidateVideos = () =>
+    queryClient.invalidateQueries({ queryKey: ["plan-videos", planId] });
+
+  const addMutation = useMutation({
+    mutationFn: (payload: { url: string; title?: string | null }) =>
+      addPlanVideo(planId, payload),
+    onSuccess: () => {
+      setUrl("");
+      setTitle("");
+      toast.success("Video added");
+      invalidateVideos();
+    },
+    onError: (error: unknown) => {
+      toast.error("Failed to add video", {
+        description: getApiErrorMessage(error),
+      });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (videoId: string) => deletePlanVideo(planId, videoId),
+    onSuccess: () => {
+      toast.success("Video removed");
+      invalidateVideos();
+    },
+    onError: (error: unknown) => {
+      toast.error("Failed to remove video", {
+        description: getApiErrorMessage(error),
+      });
+    },
+  });
+
+  const reorderMutation = useMutation({
+    mutationFn: (payload: Array<{ id: string; display_order: number }>) =>
+      reorderPlanVideos(planId, payload),
+    onSuccess: (updated) => {
+      queryClient.setQueryData(["plan-videos", planId], updated);
+    },
+    onError: (error: unknown) => {
+      setOrderedVideos(sortByOrder(serverVideos)); // revert optimistic order
+      toast.error("Failed to reorder videos", {
+        description: getApiErrorMessage(error),
+      });
+    },
+  });
+
+  const trimmedUrl = url.trim();
+  const urlIsValid = isYouTubeUrl(trimmedUrl);
+  const isBusy =
+    addMutation.isPending ||
+    deleteMutation.isPending ||
+    reorderMutation.isPending;
+
+  const handleAdd = () => {
+    if (!trimmedUrl || !urlIsValid) return;
+    const trimmedTitle = title.trim();
+    addMutation.mutate({
+      url: trimmedUrl,
+      ...(trimmedTitle ? { title: trimmedTitle } : {}),
+    });
+  };
+
+  const handleReorder = (activeId: string, overId: string) => {
+    if (activeId === overId) return;
+    const next = reorderArray(orderedVideos, activeId, overId);
+    if (!next) return;
+    setOrderedVideos(next);
+    reorderMutation.mutate(
+      next.map((video, index) => ({ id: video.id, display_order: index })),
+    );
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <FaYoutube className="w-4 h-4 text-[#A51C21]" />
+        <h3 className="text-sm font-bold">YouTube videos</h3>
+        {orderedVideos.length > 0 && (
+          <span className="text-xs text-muted-foreground">
+            {orderedVideos.length}
+          </span>
+        )}
+      </div>
+
+      <div className="space-y-1">
+        <div className="flex flex-col gap-2 sm:flex-row">
+          <Pecha.Input
+            type="url"
+            placeholder="Enter YouTube URL"
+            value={url}
+            disabled={isBusy}
+            className="bg-white"
+            onChange={(e) => setUrl(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                handleAdd();
+              }
+            }}
+          />
+          <Pecha.Input
+            type="text"
+            placeholder="Title (optional)"
+            value={title}
+            disabled={isBusy}
+            className="bg-white sm:max-w-[40%]"
+            onChange={(e) => setTitle(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                handleAdd();
+              }
+            }}
+          />
+          <Pecha.Button
+            type="button"
+            className="bg-[#A51C21] hover:bg-[#A51C21]/90 shrink-0"
+            disabled={isBusy || !trimmedUrl || !urlIsValid}
+            onClick={handleAdd}
+          >
+            {addMutation.isPending ? (
+              <FiLoader className="w-4 h-4 animate-spin" />
+            ) : (
+              <FiPlus className="w-4 h-4" />
+            )}
+            Add
+          </Pecha.Button>
+        </div>
+        {trimmedUrl && !urlIsValid && (
+          <p className="text-xs text-[#A51C21]">
+            Please enter a valid YouTube URL.
+          </p>
+        )}
+      </div>
+
+      <div className="max-h-[40vh] overflow-y-auto">
+        {orderedVideos.length === 0 ? (
+          <p className="text-sm text-muted-foreground py-4 text-center">
+            No videos added yet.
+          </p>
+        ) : (
+          <SortableList
+            items={orderedVideos.map((video) => ({ id: video.id }))}
+            onReorder={handleReorder}
+            disabled={isBusy}
+          >
+            <div className="space-y-3">
+              {orderedVideos.map((video) => {
+                const videoId =
+                  video.video_id ||
+                  getYouTubeVideoId(video.url) ||
+                  getYouTubeShortsId(video.url);
+                return (
+                  <SortableItem
+                    key={video.id}
+                    id={video.id}
+                    disabled={isBusy}
+                    className="flex items-center gap-3 rounded-lg border border-dashed border-gray-300 dark:border-input p-2 bg-white dark:bg-[#161616]"
+                  >
+                    {({ listeners }: any) => (
+                      <>
+                        <PiDotsSixVertical
+                          className="w-4 h-4 text-gray-400 dark:text-muted-foreground cursor-grab active:cursor-grabbing shrink-0"
+                          {...listeners}
+                        />
+                        {videoId && (
+                          <img
+                            src={`https://img.youtube.com/vi/${videoId}/default.jpg`}
+                            alt={video.title ?? "YouTube video"}
+                            className="w-20 h-14 object-cover rounded shrink-0"
+                          />
+                        )}
+                        <div className="min-w-0 flex-1">
+                          <a
+                            href={video.url}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="text-sm text-foreground hover:underline block truncate"
+                            title={video.title ?? video.url}
+                          >
+                            {video.title || video.url}
+                          </a>
+                          <span className="text-xs text-muted-foreground truncate block">
+                            {video.url}
+                          </span>
+                        </div>
+                        <Pecha.Button
+                          type="button"
+                          variant="outline"
+                          size="icon"
+                          className="shrink-0 h-9 w-9"
+                          disabled={isBusy}
+                          title="Remove video"
+                          onClick={() => deleteMutation.mutate(video.id)}
+                        >
+                          {deleteMutation.isPending &&
+                          deleteMutation.variables === video.id ? (
+                            <FiLoader className="w-4 h-4 animate-spin" />
+                          ) : (
+                            <FaTrash className="w-4 h-4" />
+                          )}
+                        </Pecha.Button>
+                      </>
+                    )}
+                  </SortableItem>
+                );
+              })}
+            </div>
+          </SortableList>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PlanVideosSection;
diff --git a/src/components/routes/create-plan/planNewFromSeriesState.test.ts b/src/components/routes/create-plan/planNewFromSeriesState.test.ts
new file mode 100644
index 00000000..bb5a601f
--- /dev/null
+++ b/src/components/routes/create-plan/planNewFromSeriesState.test.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it } from "vitest";
+import { parsePlanNewFromSeriesState } from "./planNewFromSeriesState";
+
+describe("parsePlanNewFromSeriesState", () => {
+  it("returns null for missing or partial state", () => {
+    expect(parsePlanNewFromSeriesState(null)).toBeNull();
+    expect(parsePlanNewFromSeriesState({ seriesId: "s1" })).toBeNull();
+    expect(parsePlanNewFromSeriesState({ language: "EN" })).toBeNull();
+  });
+
+  it("returns parsed state when seriesId and language are valid", () => {
+    expect(
+      parsePlanNewFromSeriesState({ seriesId: "series-1", language: "BO" }),
+    ).toEqual({ seriesId: "series-1", language: "BO" });
+  });
+
+  it("includes inherited start_date when provided", () => {
+    expect(
+      parsePlanNewFromSeriesState({
+        seriesId: "series-1",
+        language: "BO",
+        start_date: "2026-04-30T00:00:00Z",
+      }),
+    ).toEqual({
+      seriesId: "series-1",
+      language: "BO",
+      start_date: "2026-04-30T00:00:00Z",
+    });
+    expect(
+      parsePlanNewFromSeriesState({
+        seriesId: "series-1",
+        language: "BO",
+        start_date: null,
+      }),
+    ).toEqual({
+      seriesId: "series-1",
+      language: "BO",
+      start_date: null,
+    });
+  });
+
+  it("rejects invalid language codes", () => {
+    expect(
+      parsePlanNewFromSeriesState({ seriesId: "series-1", language: "FR" }),
+    ).toBeNull();
+  });
+});
diff --git a/src/components/routes/create-plan/planNewFromSeriesState.ts b/src/components/routes/create-plan/planNewFromSeriesState.ts
new file mode 100644
index 00000000..907ab681
--- /dev/null
+++ b/src/components/routes/create-plan/planNewFromSeriesState.ts
@@ -0,0 +1,42 @@
+import { PLAN_LANGUAGE } from "@/lib/constant";
+import type { LanguageCode } from "@/schema/SeriesSchema";
+
+export type PlanNewFromSeriesState = {
+  seriesId: string;
+  language: LanguageCode;
+  /** Inherited from the first plan in the series when other plans already exist. */
+  start_date?: string | null;
+};
+
+const VALID_LANGUAGE_CODES = new Set(
+  PLAN_LANGUAGE.map((l) => l.value as LanguageCode),
+);
+
+export function parsePlanNewFromSeriesState(
+  state: unknown,
+): PlanNewFromSeriesState | null {
+  if (!state || typeof state !== "object") return null;
+
+  const { seriesId, language } = state as Record<string, unknown>;
+  if (typeof seriesId !== "string" || !seriesId.trim()) return null;
+  if (
+    typeof language !== "string" ||
+    !VALID_LANGUAGE_CODES.has(language as LanguageCode)
+  ) {
+    return null;
+  }
+
+  const rawStartDate = (state as Record<string, unknown>).start_date;
+  const start_date =
+    rawStartDate === null
+      ? null
+      : typeof rawStartDate === "string"
+        ? rawStartDate
+        : undefined;
+
+  return {
+    seriesId: seriesId.trim(),
+    language: language as LanguageCode,
+    ...(start_date !== undefined ? { start_date } : {}),
+  };
+}
diff --git a/src/components/routes/create-series/CreateSeries.tsx b/src/components/routes/create-series/CreateSeries.tsx
new file mode 100644
index 00000000..cb162279
--- /dev/null
+++ b/src/components/routes/create-series/CreateSeries.tsx
@@ -0,0 +1,174 @@
+import { useTranslate } from "@tolgee/react";
+import { Pecha } from "@/components/ui/shadimport";
+import { useCreateSeriesController } from "@/components/routes/create-series/hooks/useCreateSeriesController";
+import LanguageDetailsCard from "@/components/routes/create-series/components/LanguageDetailsCard";
+import AddLanguageSelect from "@/components/routes/create-series/components/AddLanguageSelect";
+import CoverImageField from "@/components/routes/create-series/components/CoverImageField";
+import ImageUploadDialog from "@/components/routes/create-series/components/ImageUploadDialog";
+import UnsavedChangesDialog from "@/components/routes/create-series/components/UnsavedChangesDialog";
+import IncludedPlansPanel from "@/components/routes/create-series/components/IncludedPlansPanel";
+
+const CreateSeries = () => {
+  const { t } = useTranslate();
+  const {
+    isNew,
+    navigate,
+    seriesForm,
+    seriesGroupId,
+    formReadOnly,
+    platformReadOnly,
+    image,
+    orderedAddedLanguages,
+    activePlansLanguage,
+    setActivePlansLanguage,
+    showNavigationDialog,
+    setShowNavigationDialog,
+    isSeriesLoading,
+    isSeriesError,
+    seriesError,
+    onSubmit,
+    confirmNavigation,
+    cancelNavigation,
+    saveDisabled,
+    saveLabel,
+  } = useCreateSeriesController();
+
+  const {
+    form,
+    plans,
+    addedLanguages,
+    availableLanguages,
+    addLanguage,
+    removeLanguage,
+  } = seriesForm;
+
+  if (!isNew && isSeriesLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[40vh] text-muted-foreground">
+        Loading series…
+      </div>
+    );
+  }
+
+  if (!isNew && isSeriesError) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[40vh] p-8 gap-4">
+        <p className="text-destructive text-center">
+          {(seriesError as Error)?.message || "Could not load this series."}
+        </p>
+        <Pecha.Button variant="outline" onClick={() => navigate("/dashboard")}>
+          {t("common.button.cancel")}
+        </Pecha.Button>
+      </div>
+    );
+  }
+
+  const getReadOnlyMessage = () => {
+    if (platformReadOnly) {
+      return "You have read-only access to series in this group.";
+    }
+    if (isNew) {
+      return "You cannot create a series in this group with your current role.";
+    }
+    return "This series cannot be edited with your current role.";
+  };
+
+  return (
+    <div className="flex flex-col lg:flex-row border h-[calc(100vh-40px)] overflow-auto bg-[#F3F3F3] dark:bg-[#181818] my-4 rounded-l-2xl font-dynamic">
+      <div className="flex-1 p-4 sm:p-10 border-b lg:border-b-0 border-border">
+        <h1 className="text-xl font-bold my-4 border-b border-dashed border-black dark:border-white">
+          {isNew ? "Series details" : "Series Edit"}
+        </h1>
+
+        {formReadOnly ? (
+          <p className="mb-4 text-sm text-muted-foreground">
+            {getReadOnlyMessage()}
+          </p>
+        ) : null}
+
+        <Pecha.Form {...form}>
+          <form onSubmit={onSubmit} className="space-y-6">
+            <div className="space-y-4">
+              {orderedAddedLanguages.map((code) => (
+                <LanguageDetailsCard
+                  key={code}
+                  code={code}
+                  form={form}
+                  readOnly={formReadOnly}
+                  onRemove={removeLanguage}
+                />
+              ))}
+            </div>
+
+            {!formReadOnly && availableLanguages.length > 0 ? (
+              <AddLanguageSelect
+                availableLanguages={availableLanguages}
+                addedLanguages={addedLanguages}
+                onAdd={addLanguage}
+              />
+            ) : null}
+
+            <CoverImageField
+              form={form}
+              imagePreview={image.imagePreview}
+              selectedImage={image.selectedImage}
+              onOpenDialog={image.openImageDialog}
+              onRemove={image.removeImage}
+            />
+
+            <ImageUploadDialog
+              open={image.isImageDialogOpen}
+              isUploading={image.isImageUploading}
+              onOpenChange={image.setImageDialogOpen}
+              onUpload={image.uploadImage}
+            />
+
+            <UnsavedChangesDialog
+              open={showNavigationDialog}
+              onOpenChange={setShowNavigationDialog}
+              onConfirm={confirmNavigation}
+              onCancel={cancelNavigation}
+            />
+          </form>
+        </Pecha.Form>
+      </div>
+
+      <div className="flex-1 p-4 sm:p-10 flex flex-col min-h-0">
+        <h2 className="text-lg font-bold mb-2">Included plans</h2>
+
+        <IncludedPlansPanel
+          form={form}
+          orderedLanguages={orderedAddedLanguages}
+          plans={plans}
+          activeLanguage={activePlansLanguage}
+          readOnly={formReadOnly}
+          groupId={seriesGroupId}
+          onSelectLanguage={setActivePlansLanguage}
+        />
+
+        <div className="mt-auto pt-8 flex justify-end gap-3">
+          <Pecha.Button
+            type="button"
+            variant="outline"
+            className="sm:h-12 sm:px-8"
+            onClick={() => navigate("/dashboard")}
+          >
+            {t("common.button.cancel")}
+          </Pecha.Button>
+
+          <Pecha.Button
+            type="button"
+            variant="default"
+            disabled={saveDisabled}
+            className="sm:h-12 sm:px-12 font-medium dark:text-white bg-[#A51C21] hover:bg-[#A51C21]/90 disabled:opacity-50"
+            onClick={onSubmit}
+          >
+            {saveLabel}
+          </Pecha.Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateSeries;
diff --git a/src/components/routes/create-series/api/planSearchApi.ts b/src/components/routes/create-series/api/planSearchApi.ts
new file mode 100644
index 00000000..9f49bc80
--- /dev/null
+++ b/src/components/routes/create-series/api/planSearchApi.ts
@@ -0,0 +1,71 @@
+import axiosInstance from "@/config/axios-config";
+
+export type PlanAuthor = {
+  id: string;
+  firstname: string;
+  lastname: string;
+  image_url: string;
+  image_key: string | null;
+};
+
+export type Plan = {
+  id: string;
+  title: string;
+  description: string;
+  language: string;
+  difficulty_level: string;
+  image_url: string;
+  image_key: string | null;
+  total_days: number;
+  tags: string[];
+  status: string;
+  featured: boolean;
+  subscription_count: number;
+  author: PlanAuthor;
+  start_date: string | null;
+  group_id?: string | null;
+};
+
+export type SearchPlansResponse = {
+  plans: Plan[];
+  skip: number;
+  limit: number;
+  total: number;
+};
+
+export type SearchPlansParams = {
+  search?: string;
+  tag?: string;
+  language?: string;
+  skip?: number;
+  limit?: number;
+  group_id?: string;
+};
+
+export const searchPlans = async (
+  params: SearchPlansParams,
+): Promise<SearchPlansResponse> => {
+  const { group_id, ...rest } = params;
+  const { data } = await axiosInstance.get<SearchPlansResponse>(
+    "/api/v1/cms/plans",
+    {
+      params: {
+        ...rest,
+        ...(group_id ? { group_id } : {}),
+      },
+    },
+  );
+
+  if (!group_id) {
+    return data;
+  }
+
+  const plans = (data.plans ?? []).filter((plan) => {
+    if (plan.group_id != null) {
+      return plan.group_id === group_id;
+    }
+    return true;
+  });
+
+  return { ...data, plans };
+};
diff --git a/src/components/routes/create-series/api/seriesApi.test.ts b/src/components/routes/create-series/api/seriesApi.test.ts
new file mode 100644
index 00000000..cffd20dc
--- /dev/null
+++ b/src/components/routes/create-series/api/seriesApi.test.ts
@@ -0,0 +1,137 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildSeriesPartialUpdateBody,
+  buildSeriesUpdateBody,
+} from "./seriesApi";
+import type { SeriesFormData } from "@/schema/SeriesSchema";
+
+const baseForm: SeriesFormData = {
+  languages: {
+    EN: {
+      title: "Series title",
+      sub_title: "",
+      description: "Original description",
+    },
+  },
+  plans: {
+    EN: [
+      { id: "plan-a", title: "Plan A" },
+      { id: "plan-b", title: "Plan B" },
+    ],
+  },
+  image_url: "series-image-key",
+};
+
+describe("buildSeriesPartialUpdateBody", () => {
+  it("sends only metadata when description changes", () => {
+    const current: SeriesFormData = {
+      ...baseForm,
+      languages: {
+        EN: {
+          title: "Series title",
+          sub_title: "",
+          description: "Updated description",
+        },
+      },
+    };
+
+    const body = buildSeriesPartialUpdateBody(current, baseForm, false, false);
+
+    expect(body).toEqual({
+      metadata: [
+        {
+          language: "EN",
+          title: "Series title",
+          sub_title: "",
+          description: "Updated description",
+        },
+      ],
+    });
+    expect(body.plans).toBeUndefined();
+    expect(body.image_key).toBeUndefined();
+    expect(body.featured).toBeUndefined();
+  });
+
+  it("sends only plans when plan order changes", () => {
+    const current: SeriesFormData = {
+      ...baseForm,
+      plans: {
+        EN: [
+          { id: "plan-b", title: "Plan B" },
+          { id: "plan-a", title: "Plan A" },
+        ],
+      },
+    };
+
+    const body = buildSeriesPartialUpdateBody(current, baseForm, false, false);
+
+    expect(body).toEqual({
+      plans: { EN: ["plan-b", "plan-a"] },
+    });
+    expect(body.metadata).toBeUndefined();
+  });
+
+  it("sends only image_key when cover changes", () => {
+    const current: SeriesFormData = {
+      ...baseForm,
+      image_url: "new-image-key",
+    };
+
+    const body = buildSeriesPartialUpdateBody(current, baseForm, false, false);
+
+    expect(body).toEqual({ image_key: "new-image-key" });
+  });
+
+  it("sends only featured when featured flag changes", () => {
+    const body = buildSeriesPartialUpdateBody(baseForm, baseForm, true, false);
+
+    expect(body).toEqual({ featured: true });
+  });
+});
+
+describe("buildSeriesUpdateBody", () => {
+  it("returns full payload for create", () => {
+    const body = buildSeriesUpdateBody(baseForm, false, { groupId: "group-1" });
+
+    expect(body).toMatchObject({
+      metadata: [
+        {
+          language: "EN",
+          title: "Series title",
+          sub_title: "",
+          description: "Original description",
+        },
+      ],
+      featured: false,
+      plans: { EN: ["plan-a", "plan-b"] },
+      image_key: "series-image-key",
+      group_id: "group-1",
+    });
+  });
+
+  it("returns partial payload when original form is provided", () => {
+    const current: SeriesFormData = {
+      ...baseForm,
+      languages: {
+        EN: {
+          title: "Series title",
+          sub_title: "",
+          description: "Updated description",
+        },
+      },
+    };
+
+    const body = buildSeriesUpdateBody(current, false, { original: baseForm });
+
+    expect(body).toEqual({
+      metadata: [
+        {
+          language: "EN",
+          title: "Series title",
+          sub_title: "",
+          description: "Updated description",
+        },
+      ],
+    });
+  });
+});
diff --git a/src/components/routes/create-series/api/seriesApi.ts b/src/components/routes/create-series/api/seriesApi.ts
new file mode 100644
index 00000000..350c16e8
--- /dev/null
+++ b/src/components/routes/create-series/api/seriesApi.ts
@@ -0,0 +1,482 @@
+import axiosInstance from "@/config/axios-config";
+import {
+  LANGUAGE_CODE_ORDER,
+  normalizeLanguageCode,
+} from "@/lib/languageCodes";
+import type {
+  LanguageCode,
+  SeriesFormData,
+  SeriesPlan,
+} from "@/schema/SeriesSchema";
+
+export type SeriesMetadataInput = {
+  title: string;
+  sub_title: string;
+  description: string;
+  language: LanguageCode;
+};
+
+export type SeriesPayload = {
+  metadata: SeriesMetadataInput[];
+  image_key?: string;
+  featured: boolean;
+  plans: Partial<Record<LanguageCode, string[]>>;
+  group_id?: string;
+};
+
+export type SeriesUpdatePayload = Partial<SeriesPayload>;
+
+export type SeriesPlanDTO = {
+  id: string;
+  title: string;
+  description?: string | null;
+  language: string;
+  group_id?: string | null;
+  image_url?: string | null;
+  plan_image_url?: string | null;
+  image_key?: string | null;
+  image?:
+    | string
+    | {
+        medium?: string | null;
+        thumbnail?: string | null;
+        original?: string | null;
+      }
+    | null;
+  display_order?: number | null;
+  total_days?: number | null;
+  status?: string;
+  featured?: boolean;
+  enrolled_count?: number | null;
+  subscription_count?: number | null;
+  updated_at?: string | null;
+  start_date?: string | null;
+};
+
+export type SeriesMetadataDTO = {
+  id?: string;
+  language?: string;
+  lang?: string;
+  title?: string;
+  sub_title?: string;
+  description?: string;
+};
+
+export type SeriesDetailDTO = {
+  id: string;
+  name?: Record<string, unknown>;
+  metadata?: SeriesMetadataDTO[];
+  image?: string | null;
+  image_url?: string | null;
+  image_key?: string | null;
+  author_id?: string;
+  group_id?: string | null;
+  group?: { id?: string } | null;
+  featured: boolean;
+  status: string;
+  plans: SeriesPlanDTO[];
+  total_days?: number;
+};
+
+export function resolveSeriesGroupId(
+  series:
+    | Pick<SeriesDetailDTO, "group_id" | "group" | "plans">
+    | null
+    | undefined,
+): string | undefined {
+  if (!series) return undefined;
+  if (series.group_id?.trim()) return series.group_id.trim();
+  if (series.group?.id?.trim()) return series.group.id.trim();
+  const fromPlan = series.plans?.find((p) => p.group_id?.trim())?.group_id;
+  return fromPlan?.trim() || undefined;
+}
+
+export const getSeries = async (seriesId: string): Promise<SeriesDetailDTO> => {
+  const { data } = await axiosInstance.get<SeriesDetailDTO>(
+    `/api/v1/cms/series/${seriesId}`,
+  );
+  return {
+    ...data,
+    group_id: resolveSeriesGroupId(data) ?? null,
+  };
+};
+
+export const postSeries = async (body: SeriesPayload) => {
+  const { data } = await axiosInstance.post<SeriesDetailDTO>(
+    `/api/v1/cms/series`,
+    body,
+  );
+  return data;
+};
+
+export const putUpdateSeries = async ({
+  seriesId,
+  body,
+}: {
+  seriesId: string;
+  body: SeriesPayload | SeriesUpdatePayload;
+}) => {
+  const { data } = await axiosInstance.put<SeriesDetailDTO>(
+    `/api/v1/cms/series/${seriesId}`,
+    body,
+  );
+  return data;
+};
+
+export const putSeriesFeatured = async (
+  seriesId: string,
+  featured: boolean,
+) => {
+  return putUpdateSeries({ seriesId, body: { featured } });
+};
+
+function normalizeLang(raw: string): LanguageCode | null {
+  return normalizeLanguageCode(raw);
+}
+
+function parseNameObject(
+  name: Record<string, unknown>,
+): SeriesFormData["languages"] {
+  const languages: SeriesFormData["languages"] = {};
+  const order: LanguageCode[] = [...LANGUAGE_CODE_ORDER];
+  for (const code of order) {
+    const raw = name[code];
+    if (raw == null) continue;
+    if (typeof raw === "string") {
+      languages[code] = { title: raw.trim(), sub_title: "", description: "" };
+    } else if (typeof raw === "object") {
+      const o = raw as Record<string, unknown>;
+      languages[code] = {
+        title: String(o.title ?? "").trim(),
+        sub_title: String(o.sub_title ?? "").trim(),
+        description: String(o.description ?? "").trim(),
+      };
+    }
+  }
+  return languages;
+}
+
+function parseMetadataArray(
+  metadata: SeriesMetadataDTO[],
+): SeriesFormData["languages"] {
+  const languages: SeriesFormData["languages"] = {};
+  for (const row of metadata) {
+    const code = normalizeLang(String(row.language ?? row.lang ?? ""));
+    if (!code) continue;
+    languages[code] = {
+      title: String(row.title ?? "").trim(),
+      sub_title: String(row.sub_title ?? "").trim(),
+      description: String(row.description ?? "").trim(),
+    };
+  }
+  return languages;
+}
+
+/** Infer language tabs from attached plans when name/metadata are empty. */
+function languagesFromPlans(
+  plans: SeriesPlanDTO[],
+): SeriesFormData["languages"] {
+  const languages: SeriesFormData["languages"] = {};
+  const seen = new Set<LanguageCode>();
+  for (const p of plans) {
+    const code = normalizeLang(p.language);
+    if (!code || seen.has(code)) continue;
+    seen.add(code);
+    languages[code] = { title: "", sub_title: "", description: "" };
+  }
+  return languages;
+}
+
+function resolveSeriesLanguages(
+  dto: SeriesDetailDTO,
+): SeriesFormData["languages"] {
+  if (dto.name && Object.keys(dto.name).length > 0) {
+    return parseNameObject(dto.name);
+  }
+  if (Array.isArray(dto.metadata) && dto.metadata.length > 0) {
+    return parseMetadataArray(dto.metadata);
+  }
+  return languagesFromPlans(dto.plans ?? []);
+}
+
+function resolveSeriesImageKey(dto: SeriesDetailDTO): string {
+  if (dto.image_key?.trim()) return dto.image_key.trim();
+  const image = dto.image;
+  if (typeof image === "string" && image && !/^https?:\/\//i.test(image)) {
+    return image.trim();
+  }
+  return "";
+}
+
+export function mapSeriesDetailToFormData(
+  dto: SeriesDetailDTO,
+): SeriesFormData {
+  const languages = resolveSeriesLanguages(dto);
+
+  const buckets: Partial<
+    Record<LanguageCode, { item: SeriesPlan; ord: number }[]>
+  > = {};
+  for (const p of dto.plans ?? []) {
+    const code = normalizeLang(p.language);
+    if (!code) continue;
+    const ord =
+      typeof p.display_order === "number" && !Number.isNaN(p.display_order)
+        ? p.display_order
+        : 1_000_000;
+    const item: SeriesPlan = {
+      id: String(p.id),
+      title: p.title,
+      image_url: p.image_url ?? undefined,
+    };
+    if (!buckets[code]) buckets[code] = [];
+    buckets[code]!.push({ item, ord });
+  }
+
+  const order: LanguageCode[] = [...LANGUAGE_CODE_ORDER];
+  const plans: SeriesFormData["plans"] = {};
+  for (const code of order) {
+    const row = buckets[code];
+    if (!row?.length) continue;
+    plans[code] = [...row].sort((a, b) => a.ord - b.ord).map((x) => x.item);
+  }
+
+  return {
+    languages,
+    plans,
+    image_url: resolveSeriesImageKey(dto),
+  };
+}
+
+export function buildSeriesMetadata(
+  languages: SeriesFormData["languages"],
+): SeriesMetadataInput[] {
+  const order: LanguageCode[] = [...LANGUAGE_CODE_ORDER];
+  const out: SeriesMetadataInput[] = [];
+  for (const code of order) {
+    const block = languages[code];
+    if (!block) continue;
+    out.push({
+      language: code,
+      title: block.title.trim(),
+      sub_title: block.sub_title.trim(),
+      description: block.description.trim(),
+    });
+  }
+  return out;
+}
+
+export function buildSeriesPlansJson(
+  data: SeriesFormData,
+  languageCodes: LanguageCode[],
+): Partial<Record<LanguageCode, string[]>> {
+  const plans: Partial<Record<LanguageCode, string[]>> = {};
+  for (const code of languageCodes) {
+    const list = data.plans[code] ?? [];
+    plans[code] = list.map((p) => p.id);
+  }
+  return plans;
+}
+
+export function buildSeriesWriteBody(
+  data: SeriesFormData,
+  featured: boolean,
+  groupId?: string,
+): SeriesPayload {
+  const metadata = buildSeriesMetadata(data.languages);
+  const languageCodes = metadata.map((m) => m.language);
+  const imageKey = data.image_url.trim();
+  return {
+    metadata,
+    featured,
+    plans: buildSeriesPlansJson(data, languageCodes),
+    ...(imageKey ? { image_key: imageKey } : {}),
+    ...(groupId ? { group_id: groupId } : {}),
+  };
+}
+
+export function buildSeriesCreateBody(
+  data: SeriesFormData,
+  featured = false,
+  groupId?: string,
+): SeriesPayload {
+  return buildSeriesWriteBody(data, featured, groupId);
+}
+
+function seriesMetadataEqual(
+  a: SeriesMetadataInput[],
+  b: SeriesMetadataInput[],
+): boolean {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i].language !== b[i].language) return false;
+    if (a[i].title !== b[i].title) return false;
+    if (a[i].sub_title !== b[i].sub_title) return false;
+    if (a[i].description !== b[i].description) return false;
+  }
+  return true;
+}
+
+function seriesPlansEqual(
+  a: Partial<Record<LanguageCode, string[]>>,
+  b: Partial<Record<LanguageCode, string[]>>,
+): boolean {
+  const codes = new Set<LanguageCode>([
+    ...(Object.keys(a) as LanguageCode[]),
+    ...(Object.keys(b) as LanguageCode[]),
+  ]);
+  for (const code of codes) {
+    const aIds = a[code] ?? [];
+    const bIds = b[code] ?? [];
+    if (aIds.length !== bIds.length) return false;
+    for (let i = 0; i < aIds.length; i++) {
+      if (aIds[i] !== bIds[i]) return false;
+    }
+  }
+  return true;
+}
+
+export function buildSeriesPartialUpdateBody(
+  current: SeriesFormData,
+  original: SeriesFormData,
+  featured: boolean,
+  originalFeatured: boolean,
+): SeriesUpdatePayload {
+  const body: SeriesUpdatePayload = {};
+
+  const currentMetadata = buildSeriesMetadata(current.languages);
+  const originalMetadata = buildSeriesMetadata(original.languages);
+  if (!seriesMetadataEqual(currentMetadata, originalMetadata)) {
+    body.metadata = currentMetadata;
+  }
+
+  const currentImageKey = current.image_url.trim();
+  const originalImageKey = original.image_url.trim();
+  if (currentImageKey !== originalImageKey && currentImageKey) {
+    body.image_key = currentImageKey;
+  }
+
+  if (featured !== originalFeatured) {
+    body.featured = featured;
+  }
+
+  const currentPlans = buildSeriesPlansJson(
+    current,
+    currentMetadata.map((m) => m.language),
+  );
+  const originalPlans = buildSeriesPlansJson(
+    original,
+    originalMetadata.map((m) => m.language),
+  );
+  if (!seriesPlansEqual(currentPlans, originalPlans)) {
+    body.plans = currentPlans;
+  }
+
+  return body;
+}
+
+export function buildSeriesUpdateBody(
+  data: SeriesFormData,
+  featured: boolean,
+  options?: {
+    groupId?: string;
+    original?: SeriesFormData;
+    originalFeatured?: boolean;
+  },
+): SeriesPayload | SeriesUpdatePayload {
+  if (!options?.original) {
+    return buildSeriesWriteBody(data, featured, options?.groupId);
+  }
+  return buildSeriesPartialUpdateBody(
+    data,
+    options.original,
+    featured,
+    options.originalFeatured ?? featured,
+  );
+}
+
+export function buildSeriesPlansPayloadFromIds(
+  plansByLang: Partial<Record<LanguageCode, string[]>>,
+): Partial<Record<LanguageCode, string[]>> {
+  const order: LanguageCode[] = [...LANGUAGE_CODE_ORDER];
+  const out: Partial<Record<LanguageCode, string[]>> = {};
+  for (const code of order) {
+    const ids = plansByLang[code];
+    if (ids?.length) out[code] = ids;
+  }
+  return out;
+}
+
+export async function putSeriesPlans(
+  seriesId: string,
+  plansByLang: Partial<Record<LanguageCode, string[]>>,
+) {
+  return putUpdateSeries({
+    seriesId,
+    body: { plans: buildSeriesPlansPayloadFromIds(plansByLang) },
+  });
+}
+
+export type CloneSeriesPlansPayload = {
+  source_language: LanguageCode;
+  target_language: LanguageCode;
+};
+
+export async function cloneSeriesPlansFromLanguage(
+  seriesId: string,
+  payload: CloneSeriesPlansPayload,
+) {
+  const { data } = await axiosInstance.post<SeriesDetailDTO>(
+    `/api/v1/cms/series/${seriesId}/clone-plans`,
+    payload,
+  );
+  return data;
+}
+
+export type SeriesListItemDTO = {
+  id: string;
+  metadata?: SeriesMetadataDTO[];
+  image?: string | null;
+  image_key?: string | null;
+  author_id?: string;
+  featured?: boolean;
+  status?: string;
+  plan_count?: number;
+  total_days?: number;
+};
+
+export type SeriesListResponse = {
+  series: SeriesListItemDTO[];
+};
+
+export type SeriesOption = {
+  id: string;
+  title: string;
+};
+
+function resolveSeriesListTitle(metadata?: SeriesMetadataDTO[]): string {
+  if (!Array.isArray(metadata) || metadata.length === 0) return "Untitled";
+  const order = [...LANGUAGE_CODE_ORDER];
+  for (const lang of order) {
+    const row = metadata.find(
+      (r) => String(r.language ?? r.lang ?? "").toUpperCase() === lang,
+    );
+    const t = row?.title?.trim();
+    if (t) return t;
+  }
+  for (const row of metadata) {
+    const t = row.title?.trim();
+    if (t) return t;
+  }
+  return "Untitled";
+}
+
+export const fetchSeriesList = async (): Promise<SeriesOption[]> => {
+  const { data } = await axiosInstance.get<SeriesListResponse>(
+    `/api/v1/cms/series`,
+    { params: { limit: 100 } },
+  );
+  return (data?.series ?? []).map((s) => ({
+    id: s.id,
+    title: resolveSeriesListTitle(s.metadata),
+  }));
+};
diff --git a/src/components/routes/create-series/components/AddLanguageSelect.tsx b/src/components/routes/create-series/components/AddLanguageSelect.tsx
new file mode 100644
index 00000000..f6923b0a
--- /dev/null
+++ b/src/components/routes/create-series/components/AddLanguageSelect.tsx
@@ -0,0 +1,40 @@
+import { IoMdAdd } from "react-icons/io";
+import { Pecha } from "@/components/ui/shadimport";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+import type { LanguageCode } from "@/schema/SeriesSchema";
+
+type AddLanguageSelectProps = {
+  availableLanguages: typeof PLAN_LANGUAGE;
+  addedLanguages: LanguageCode[];
+  onAdd: (code: LanguageCode) => void;
+};
+
+const AddLanguageSelect = ({
+  availableLanguages,
+  addedLanguages,
+  onAdd,
+}: AddLanguageSelectProps) => (
+  <Pecha.Select
+    key={addedLanguages.join(",")}
+    onValueChange={(v) => onAdd(v as LanguageCode)}
+  >
+    <Pecha.SelectTrigger className="h-11 w-fit max-w-md border-dashed bg-white dark:bg-[#262626]">
+      <div className="flex items-center gap-2 text-muted-foreground">
+        <IoMdAdd className="h-5 w-5" />
+        <Pecha.SelectValue
+          className="text-[#1A1A1A] font-semibold text-sm"
+          placeholder="Add series details"
+        />
+      </div>
+    </Pecha.SelectTrigger>
+    <Pecha.SelectContent>
+      {availableLanguages.map((lang) => (
+        <Pecha.SelectItem key={lang.value} value={lang.value}>
+          {lang.label}
+        </Pecha.SelectItem>
+      ))}
+    </Pecha.SelectContent>
+  </Pecha.Select>
+);
+
+export default AddLanguageSelect;
diff --git a/src/components/routes/create-series/components/CoverImageField.tsx b/src/components/routes/create-series/components/CoverImageField.tsx
new file mode 100644
index 00000000..b57d51a6
--- /dev/null
+++ b/src/components/routes/create-series/components/CoverImageField.tsx
@@ -0,0 +1,109 @@
+import type { UseFormReturn } from "react-hook-form";
+import { IoMdAdd, IoMdClose } from "react-icons/io";
+import { IoInformationCircleOutline } from "react-icons/io5";
+import { useTranslate } from "@tolgee/react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/atoms/tooltip";
+import type { SeriesFormData } from "@/schema/SeriesSchema";
+
+type CoverImageFieldProps = {
+  form: UseFormReturn<SeriesFormData>;
+  imagePreview: string | null;
+  selectedImage: File | null;
+  onOpenDialog: () => void;
+  onRemove: () => void;
+};
+
+const CoverImageField = ({
+  form,
+  imagePreview,
+  selectedImage,
+  onOpenDialog,
+  onRemove,
+}: CoverImageFieldProps) => {
+  const { t } = useTranslate();
+
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-col sm:flex-row gap-2">
+        <h3 className="text-sm font-bold">
+          {t("studio.dashboard.cover_image")}
+        </h3>
+        <div className="hidden sm:block">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  className="text-muted-foreground hover:text-foreground"
+                >
+                  <IoInformationCircleOutline className="w-4 h-4" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent
+                side="right"
+                className="bg-black text-white text-xs rounded-md px-3 py-2 shadow-md max-w-xs"
+              >
+                <p className="whitespace-pre-line">
+                  {t("studio.plan.cover_image.constraints")}
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+        <p className="text-sm sm:hidden text-muted-foreground whitespace-pre-line">
+          {t("studio.plan.cover_image.constraints")}
+        </p>
+      </div>
+      <div className="flex gap-4 mt-2 items-start">
+        {!imagePreview && (
+          <button
+            type="button"
+            onClick={onOpenDialog}
+            className="border w-56 h-40 border-dashed border-gray-300 dark:border-gray-600 rounded-lg flex items-center justify-center hover:border-gray-400 transition-colors cursor-pointer focus:outline-none bg-#C7C7C7 dark:bg-[#262626]"
+            aria-label="Upload cover image"
+          >
+            <IoMdAdd className="h-10 w-10 text-gray-400" />
+          </button>
+        )}
+        {imagePreview && (
+          <div className="relative">
+            <img
+              src={imagePreview}
+              alt="Cover preview"
+              className="w-48 h-48 object-cover rounded-lg border"
+            />
+            <div className="flex items-center justify-between absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent rounded-b-lg p-2">
+              {selectedImage && (
+                <p className="text-xs text-white truncate max-w-32">
+                  {selectedImage.name}
+                </p>
+              )}
+              <button
+                aria-label="Remove image"
+                type="button"
+                onClick={onRemove}
+                className="text-white cursor-pointer rounded-full p-1 transition-colors ml-auto"
+                data-testid="image-remove"
+              >
+                <IoMdClose className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+      <input type="hidden" {...form.register("image_url")} />
+      {form.formState.errors.image_url && (
+        <p className="text-sm text-destructive">
+          {form.formState.errors.image_url.message}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default CoverImageField;
diff --git a/src/components/routes/create-series/components/ImageUploadDialog.tsx b/src/components/routes/create-series/components/ImageUploadDialog.tsx
new file mode 100644
index 00000000..1ae3a275
--- /dev/null
+++ b/src/components/routes/create-series/components/ImageUploadDialog.tsx
@@ -0,0 +1,27 @@
+import { Pecha } from "@/components/ui/shadimport";
+import ImageContentData from "@/components/ui/molecules/modals/image-upload/ImageContentData";
+
+type ImageUploadDialogProps = {
+  open: boolean;
+  isUploading: boolean;
+  onOpenChange: (open: boolean) => void;
+  onUpload: (file: File) => void;
+};
+
+const ImageUploadDialog = ({
+  open,
+  isUploading,
+  onOpenChange,
+  onUpload,
+}: ImageUploadDialogProps) => (
+  <Pecha.Dialog open={open} onOpenChange={onOpenChange}>
+    <Pecha.DialogContent showCloseButton={true}>
+      <Pecha.DialogHeader>
+        <Pecha.DialogTitle>Upload &amp; crop image</Pecha.DialogTitle>
+      </Pecha.DialogHeader>
+      <ImageContentData onUpload={onUpload} isLoading={isUploading} />
+    </Pecha.DialogContent>
+  </Pecha.Dialog>
+);
+
+export default ImageUploadDialog;
diff --git a/src/components/routes/create-series/components/IncludedPlansPanel.tsx b/src/components/routes/create-series/components/IncludedPlansPanel.tsx
new file mode 100644
index 00000000..4b4ecd58
--- /dev/null
+++ b/src/components/routes/create-series/components/IncludedPlansPanel.tsx
@@ -0,0 +1,77 @@
+import type { UseFormReturn } from "react-hook-form";
+import PlanSearchSelector from "@/components/routes/create-series/components/PlanSearchSelector";
+import type { LanguageCode, SeriesFormData } from "@/schema/SeriesSchema";
+import { getNativeLanguageLabel } from "@/components/routes/create-series/utils/language";
+
+type IncludedPlansPanelProps = {
+  form: UseFormReturn<SeriesFormData>;
+  orderedLanguages: LanguageCode[];
+  plans: SeriesFormData["plans"];
+  activeLanguage: LanguageCode | null;
+  readOnly: boolean;
+  groupId?: string;
+  onSelectLanguage: (code: LanguageCode) => void;
+};
+
+const IncludedPlansPanel = ({
+  form,
+  orderedLanguages,
+  plans,
+  activeLanguage,
+  readOnly,
+  groupId,
+  onSelectLanguage,
+}: IncludedPlansPanelProps) => {
+  if (orderedLanguages.length === 0) {
+    return (
+      <div className="flex-1 rounded-md border border-dashed border-muted-foreground/40 p-8 text-center text-sm text-muted-foreground">
+        Add at least one language on the left to attach plans.
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="flex flex-wrap gap-1 border-b border-border mb-4">
+        {orderedLanguages.map((code) => {
+          const label = getNativeLanguageLabel(code);
+          const count = plans[code]?.length ?? 0;
+          const isActive = activeLanguage === code;
+          return (
+            <button
+              key={code}
+              type="button"
+              onClick={() => onSelectLanguage(code)}
+              className={`px-3 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
+                isActive
+                  ? "border-[#B82E2E] text-[#B82E2E] font-semibold"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <span>{label}</span>
+              <span className="text-[#737373]"> ({count})</span>
+            </button>
+          );
+        })}
+      </div>
+
+      {!readOnly && activeLanguage != null && (
+        <PlanSearchSelector
+          value={plans[activeLanguage] ?? []}
+          onChange={(next) => {
+            const current = form.getValues("plans") ?? {};
+            form.setValue(
+              "plans",
+              { ...current, [activeLanguage]: next },
+              { shouldDirty: true, shouldValidate: true },
+            );
+          }}
+          searchLanguage={activeLanguage}
+          groupId={groupId}
+        />
+      )}
+    </>
+  );
+};
+
+export default IncludedPlansPanel;
diff --git a/src/components/routes/create-series/components/LanguageDetailsCard.tsx b/src/components/routes/create-series/components/LanguageDetailsCard.tsx
new file mode 100644
index 00000000..4d9a1a3a
--- /dev/null
+++ b/src/components/routes/create-series/components/LanguageDetailsCard.tsx
@@ -0,0 +1,102 @@
+import type { UseFormReturn } from "react-hook-form";
+import { IoMdClose } from "react-icons/io";
+import { Pecha } from "@/components/ui/shadimport";
+import { MarkdownEditor } from "@/components/ui/atoms/markdown-editor";
+import type { LanguageCode, SeriesFormData } from "@/schema/SeriesSchema";
+import { getEnglishLanguageLabel } from "@/components/routes/create-series/utils/language";
+
+type LanguageDetailsCardProps = {
+  code: LanguageCode;
+  form: UseFormReturn<SeriesFormData>;
+  readOnly: boolean;
+  onRemove: (code: LanguageCode) => void;
+};
+
+const LanguageDetailsCard = ({
+  code,
+  form,
+  readOnly,
+  onRemove,
+}: LanguageDetailsCardProps) => {
+  const label = getEnglishLanguageLabel(code);
+
+  return (
+    <div className="relative rounded-lg border border-input bg-[#FAFAFA] dark:bg-[#262626] p-4 space-y-3">
+      <button
+        type="button"
+        onClick={() => onRemove(code)}
+        disabled={readOnly}
+        className="absolute top-2 right-2 text-muted-foreground hover:text-foreground p-1 rounded disabled:opacity-40"
+        aria-label={`Remove ${label}`}
+      >
+        <IoMdClose className="h-4 w-4" />
+      </button>
+      <Pecha.FormField
+        control={form.control}
+        name={`languages.${code}.title`}
+        render={({ field }) => (
+          <Pecha.FormItem>
+            <Pecha.FormLabel className="text-sm font-bold">
+              {label} title
+            </Pecha.FormLabel>
+            <Pecha.FormControl>
+              <Pecha.Input
+                placeholder={`Title in ${label}`}
+                className="h-12 text-base bg-white dark:bg-[#181818]"
+                disabled={readOnly}
+                {...field}
+              />
+            </Pecha.FormControl>
+            <Pecha.FormMessage />
+          </Pecha.FormItem>
+        )}
+      />
+
+      <Pecha.FormField
+        control={form.control}
+        name={`languages.${code}.sub_title`}
+        render={({ field }) => (
+          <Pecha.FormItem>
+            <Pecha.FormLabel className="text-sm font-bold">
+              {label} sub title
+            </Pecha.FormLabel>
+            <Pecha.FormControl>
+              <Pecha.Input
+                placeholder={`Sub title in ${label}`}
+                className="h-12 text-base bg-white dark:bg-[#181818]"
+                disabled={readOnly}
+                {...field}
+              />
+            </Pecha.FormControl>
+            <Pecha.FormMessage />
+          </Pecha.FormItem>
+        )}
+      />
+
+      <Pecha.FormField
+        control={form.control}
+        name={`languages.${code}.description`}
+        render={({ field }) => (
+          <Pecha.FormItem>
+            <Pecha.FormLabel className="text-sm font-bold">
+              {label} description
+            </Pecha.FormLabel>
+            <Pecha.FormControl>
+              <MarkdownEditor
+                value={field.value}
+                onChange={field.onChange}
+                placeholder={`Type your description here...`}
+                disabled={readOnly}
+                className="bg-white dark:bg-[#181818]"
+                textareaClassName="bg-white dark:bg-[#181818]"
+              />
+            </Pecha.FormControl>
+            <Pecha.FormMessage />
+          </Pecha.FormItem>
+        )}
+      />
+    </div>
+  );
+};
+
+export default LanguageDetailsCard;
diff --git a/src/components/routes/create-series/components/PlanSearchSelector.tsx b/src/components/routes/create-series/components/PlanSearchSelector.tsx
new file mode 100644
index 00000000..99688811
--- /dev/null
+++ b/src/components/routes/create-series/components/PlanSearchSelector.tsx
@@ -0,0 +1,229 @@
+import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import type { UniqueIdentifier } from "@dnd-kit/core";
+import { IoMdClose } from "react-icons/io";
+import { FaMagnifyingGlass } from "react-icons/fa6";
+import { PiDotsSixVertical } from "react-icons/pi";
+import {
+  searchPlans,
+  type Plan,
+} from "@/components/routes/create-series/api/planSearchApi";
+import type { SeriesPlan } from "@/schema/SeriesSchema";
+import { NO_PROFILE_IMAGE } from "@/lib/constant";
+import { reorderArray } from "@/lib/utils";
+import { SortableList, SortableItem } from "@/components/ui/atoms/sortable";
+
+const PAGE_SIZE = 10;
+const DEBOUNCE_MS = 600;
+
+function planToSeriesPlan(plan: Plan): SeriesPlan {
+  return {
+    id: plan.id,
+    title: plan.title,
+    image_url: plan.image_url || undefined,
+  };
+}
+
+type PlanSearchSelectorProps = {
+  value: SeriesPlan[];
+  onChange: (plans: SeriesPlan[]) => void;
+  searchLanguage?: string;
+  /** Only plans in this group can be searched and added. */
+  groupId?: string;
+  /** Hide the inline selected list (e.g. series details shows plans in a table). */
+  hideSelectedList?: boolean;
+  searchPlaceholder?: string;
+  className?: string;
+};
+
+const PlanSearchSelector = ({
+  value,
+  onChange,
+  searchLanguage,
+  groupId,
+  hideSelectedList = false,
+  searchPlaceholder = "Find plans to add",
+  className = "",
+}: PlanSearchSelectorProps) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedQuery, setDebouncedQuery] = useState("");
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedQuery(searchQuery.trim());
+    }, DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["search-plans", debouncedQuery, searchLanguage, groupId],
+    queryFn: () =>
+      searchPlans({
+        search: debouncedQuery || undefined,
+        language: searchLanguage,
+        skip: 0,
+        limit: PAGE_SIZE,
+        ...(groupId ? { group_id: groupId } : {}),
+      }),
+    enabled: isDropdownOpen && Boolean(groupId),
+  });
+
+  const searchResults: Plan[] = data?.plans ?? [];
+
+  const valueIds = new Set(value.map((p) => p.id));
+
+  const handleTogglePlan = (plan: Plan) => {
+    const id = plan.id;
+    if (valueIds.has(id)) {
+      onChange(value.filter((p) => p.id !== id));
+    } else {
+      onChange([...value, planToSeriesPlan(plan)]);
+    }
+  };
+
+  const handleRemovePlan = (planId: string) => {
+    onChange(value.filter((p) => p.id !== planId));
+  };
+
+  const handleReorder = (
+    activeId: UniqueIdentifier,
+    overId: UniqueIdentifier,
+  ) => {
+    const next = reorderArray(value, String(activeId), String(overId));
+    if (next) onChange(next);
+  };
+
+  const showDropdown = isDropdownOpen && Boolean(groupId);
+  const showNoResults =
+    showDropdown && !isLoading && searchResults.length === 0;
+  const showMissingGroup = isDropdownOpen && !groupId;
+
+  const sortableIds = value.map((p) => p.id);
+  const canReorder = value.length > 1;
+
+  return (
+    <div
+      className={`rounded-md ${hideSelectedList ? "" : "min-h-[200px]"} ${className}`}
+    >
+      {!hideSelectedList && value.length === 0 ? (
+        <div className="rounded-md border border-dashed border-muted-foreground/40 px-4 py-8 text-center text-sm text-muted-foreground">
+          No plans added yet — use the search to add plans to this series.
+        </div>
+      ) : !hideSelectedList ? (
+        <SortableList
+          items={sortableIds}
+          onReorder={handleReorder}
+          disabled={!canReorder}
+        >
+          <div className="space-y-2 max-h-80 overflow-auto">
+            {value.map((plan) => (
+              <SortableItem
+                key={plan.id}
+                id={plan.id}
+                disabled={!canReorder}
+                className="flex items-center gap-2 rounded-md border border-input bg-white dark:bg-[#262626] p-2"
+              >
+                {({ listeners }: { listeners: Record<string, unknown> }) => (
+                  <>
+                    <button
+                      type="button"
+                      className="shrink-0 p-1 rounded text-muted-foreground hover:text-foreground cursor-grab active:cursor-grabbing touch-none disabled:opacity-30 disabled:cursor-not-allowed"
+                      aria-label={`Reorder ${plan.title}`}
+                      disabled={!canReorder}
+                      {...listeners}
+                    >
+                      <PiDotsSixVertical className="w-4 h-4" />
+                    </button>
+                    <img
+                      src={plan.image_url || NO_PROFILE_IMAGE}
+                      alt=""
+                      className="w-10 h-10 rounded object-cover shrink-0"
+                    />
+                    <span className="flex-1 text-sm min-w-0 truncate">
+                      {plan.title}
+                    </span>
+                    <button
+                      type="button"
+                      onClick={() => handleRemovePlan(plan.id)}
+                      aria-label={`Remove ${plan.title}`}
+                      className="text-muted-foreground hover:text-foreground cursor-pointer p-1 shrink-0"
+                    >
+                      <IoMdClose className="h-4 w-4" />
+                    </button>
+                  </>
+                )}
+              </SortableItem>
+            ))}
+          </div>
+        </SortableList>
+      ) : null}
+
+      <div className={`relative ${hideSelectedList ? "" : "pt-16"}`}>
+        <div className="relative">
+          <FaMagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <input
+            type="text"
+            placeholder={searchPlaceholder}
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            onFocus={() => setIsDropdownOpen(true)}
+            onBlur={() => setTimeout(() => setIsDropdownOpen(false), 150)}
+            className="h-12 w-full rounded-md border border-input bg-white dark:bg-[#262626] dark:text-white pl-10 pr-3 text-base placeholder:text-muted-foreground focus-visible:outline-none"
+          />
+        </div>
+
+        {showMissingGroup && (
+          <div className="absolute z-10 mt-1 w-full rounded-md border border-input bg-background dark:bg-[#262626] shadow-md px-3 py-2">
+            <p className="text-sm text-muted-foreground">
+              Save the series with a group before adding plans.
+            </p>
+          </div>
+        )}
+
+        {showDropdown && (
+          <div className="absolute z-10 mt-1 w-full rounded-md border border-input bg-background dark:bg-[#262626] shadow-md max-h-60 overflow-auto">
+            {isLoading && searchResults.length === 0 && (
+              <div className="px-3 py-2 text-sm text-muted-foreground">
+                Searching...
+              </div>
+            )}
+
+            {searchResults.map((plan) => {
+              const isSelected = valueIds.has(plan.id);
+              return (
+                <button
+                  key={plan.id}
+                  type="button"
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    handleTogglePlan(plan);
+                  }}
+                  className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-gray-100 dark:hover:bg-[#333333] cursor-pointer"
+                >
+                  <img
+                    src={plan.image_url || NO_PROFILE_IMAGE}
+                    alt=""
+                    className="w-9 h-9 rounded object-cover shrink-0"
+                  />
+                  <span className="text-sm flex-1">{plan.title}</span>
+                  {isSelected && (
+                    <span className="text-sm text-foreground shrink-0">✓</span>
+                  )}
+                </button>
+              );
+            })}
+
+            {showNoResults && (
+              <div className="px-3 py-2">
+                <p className="text-sm text-muted-foreground">No plans found</p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PlanSearchSelector;
diff --git a/src/components/routes/create-series/components/UnsavedChangesDialog.tsx b/src/components/routes/create-series/components/UnsavedChangesDialog.tsx
new file mode 100644
index 00000000..0053c5a0
--- /dev/null
+++ b/src/components/routes/create-series/components/UnsavedChangesDialog.tsx
@@ -0,0 +1,45 @@
+import { useTranslate } from "@tolgee/react";
+import { Pecha } from "@/components/ui/shadimport";
+
+type UnsavedChangesDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  onCancel: () => void;
+};
+
+const UnsavedChangesDialog = ({
+  open,
+  onOpenChange,
+  onConfirm,
+  onCancel,
+}: UnsavedChangesDialogProps) => {
+  const { t } = useTranslate();
+
+  return (
+    <Pecha.Dialog open={open} onOpenChange={onOpenChange}>
+      <Pecha.DialogContent showCloseButton={false}>
+        <Pecha.DialogHeader>
+          <Pecha.DialogTitle>
+            {t("studio.plan.navigation.confirm_title")}
+          </Pecha.DialogTitle>
+        </Pecha.DialogHeader>
+        <div className="py-4">
+          <p className="text-sm text-muted-foreground">
+            {t("studio.plan.navigation.confirm_message")}
+          </p>
+        </div>
+        <div className="flex justify-end gap-3">
+          <Pecha.Button variant="outline" onClick={onCancel}>
+            {t("common.button.cancel")}
+          </Pecha.Button>
+          <Pecha.Button variant="destructive" onClick={onConfirm}>
+            {t("studio.plan.navigation.leave")}
+          </Pecha.Button>
+        </div>
+      </Pecha.DialogContent>
+    </Pecha.Dialog>
+  );
+};
+
+export default UnsavedChangesDialog;
diff --git a/src/components/routes/create-series/hooks/useCreateSeriesController.ts b/src/components/routes/create-series/hooks/useCreateSeriesController.ts
new file mode 100644
index 00000000..60d98dc1
--- /dev/null
+++ b/src/components/routes/create-series/hooks/useCreateSeriesController.ts
@@ -0,0 +1,193 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useBlocker, useNavigate, useParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { ROUTES } from "@/routes/paths";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+import type { LanguageCode } from "@/schema/SeriesSchema";
+import { useGroupContentPermissions } from "@/hooks/useGroupContentPermissions";
+import { canWriteCms } from "@/lib/platformAccess";
+import { useSeriesForm } from "@/components/routes/create-series/hooks/useSeriesForm";
+import { useSeriesImage } from "@/components/routes/create-series/hooks/useSeriesImage";
+import { useSaveSeries } from "@/components/routes/create-series/hooks/useSaveSeries";
+import {
+  getSeries,
+  mapSeriesDetailToFormData,
+  resolveSeriesGroupId,
+} from "@/components/routes/create-series/api/seriesApi";
+import { resolveDashboardItemImageUrl } from "@/components/routes/dashboard/dashboardTable";
+
+export const useCreateSeriesController = () => {
+  const { seriesId, groupId } = useParams<{
+    seriesId?: string;
+    groupId?: string;
+  }>();
+  const navigate = useNavigate();
+  const isNew = !seriesId;
+
+  useEffect(() => {
+    if (isNew && !groupId) {
+      navigate(ROUTES.groups, { replace: true });
+    }
+  }, [isNew, groupId, navigate]);
+
+  const seriesForm = useSeriesForm();
+  const { form, languages, setImageUrl } = seriesForm;
+
+  const seriesQuery = useQuery({
+    queryKey: ["series", seriesId],
+    queryFn: () => getSeries(seriesId ?? ""),
+    enabled: Boolean(seriesId) && !isNew,
+    refetchOnWindowFocus: false,
+  });
+  const seriesData = seriesQuery.data;
+
+  const seriesGroupId = groupId ?? resolveSeriesGroupId(seriesData);
+  const seriesStatus = isNew ? "DRAFT" : (seriesData?.status ?? "DRAFT");
+  const {
+    userInfo,
+    groupRole,
+    platformReadOnly,
+    canEdit: canEditSeries,
+  } = useGroupContentPermissions(seriesGroupId, seriesStatus);
+
+  const canSaveSeries =
+    !platformReadOnly &&
+    (isNew
+      ? Boolean(seriesGroupId) &&
+        canWriteCms(userInfo) &&
+        groupRole != null &&
+        groupRole !== "VIEWER"
+      : canEditSeries);
+
+  const formReadOnly = !canSaveSeries;
+
+  const image = useSeriesImage({ isNew, seriesId, setImageUrl });
+  const { setImagePreview, setSelectedImage } = image;
+
+  const [activePlansLanguage, setActivePlansLanguage] =
+    useState<LanguageCode | null>(null);
+  const [showNavigationDialog, setShowNavigationDialog] = useState(false);
+
+  const seriesHydratedIdRef = useRef<string | null>(null);
+  useEffect(() => {
+    seriesHydratedIdRef.current = null;
+  }, [seriesId]);
+
+  useEffect(() => {
+    if (isNew || !seriesData) return;
+    if (seriesHydratedIdRef.current === seriesData.id) return;
+    seriesHydratedIdRef.current = seriesData.id;
+    form.reset(mapSeriesDetailToFormData(seriesData));
+    const resolvedImageUrl = resolveDashboardItemImageUrl({
+      image_url: seriesData.image_url,
+      image_key: seriesData.image_key,
+      image: seriesData.image,
+    });
+    setImagePreview(resolvedImageUrl || null);
+    setSelectedImage(null);
+  }, [isNew, seriesData, form, setImagePreview, setSelectedImage]);
+
+  const orderedAddedLanguages = useMemo(
+    () =>
+      PLAN_LANGUAGE.map((l) => l.value as LanguageCode).filter(
+        (code) => languages[code] != null,
+      ),
+    [languages],
+  );
+
+  useEffect(() => {
+    if (orderedAddedLanguages.length === 0) {
+      setActivePlansLanguage(null);
+      return;
+    }
+    if (
+      activePlansLanguage == null ||
+      !orderedAddedLanguages.includes(activePlansLanguage)
+    ) {
+      setActivePlansLanguage(orderedAddedLanguages[0]);
+    }
+  }, [orderedAddedLanguages, activePlansLanguage]);
+
+  const hasUnsavedChanges =
+    form.formState.isDirty && !form.formState.isSubmitSuccessful;
+
+  const blocker = useBlocker(
+    ({ currentLocation, nextLocation }) =>
+      hasUnsavedChanges && currentLocation.pathname !== nextLocation.pathname,
+  );
+
+  useEffect(() => {
+    if (blocker.state === "blocked") {
+      setShowNavigationDialog(true);
+    }
+  }, [blocker.state]);
+
+  const saveSeriesMutation = useSaveSeries({
+    isNew,
+    seriesId,
+    groupId,
+    seriesData,
+    onCreated: () => {
+      form.reset({ languages: {}, plans: {}, image_url: "" });
+      setSelectedImage(null);
+      setImagePreview(null);
+      setActivePlansLanguage(null);
+    },
+  });
+
+  const onSubmit = form.handleSubmit((data) => {
+    if (formReadOnly) return;
+    const featured = isNew ? false : (seriesData?.featured ?? false);
+    saveSeriesMutation.mutate({ data, featured });
+  });
+
+  const confirmNavigation = () => {
+    setShowNavigationDialog(false);
+    blocker.proceed?.();
+  };
+
+  const cancelNavigation = () => {
+    setShowNavigationDialog(false);
+    blocker.reset?.();
+  };
+
+  const submitEnabled =
+    seriesForm.canSubmit &&
+    !saveSeriesMutation.isPending &&
+    seriesForm.imageUrl.trim().length > 0 &&
+    (isNew || !!seriesData);
+
+  const saveDisabled =
+    formReadOnly || !submitEnabled || (!isNew && !form.formState.isDirty);
+
+  const getSaveLabel = () => {
+    if (saveSeriesMutation.isPending) {
+      return isNew ? "Creating…" : "Saving…";
+    }
+    return isNew ? "Create series" : "Save changes";
+  };
+  const saveLabel = getSaveLabel();
+
+  return {
+    isNew,
+    navigate,
+    seriesForm,
+    seriesGroupId,
+    formReadOnly,
+    platformReadOnly,
+    image,
+    orderedAddedLanguages,
+    activePlansLanguage,
+    setActivePlansLanguage,
+    showNavigationDialog,
+    setShowNavigationDialog,
+    isSeriesLoading: seriesQuery.isLoading,
+    isSeriesError: seriesQuery.isError,
+    seriesError: seriesQuery.error,
+    onSubmit,
+    confirmNavigation,
+    cancelNavigation,
+    saveDisabled,
+    saveLabel,
+  };
+};
diff --git a/src/components/routes/create-series/hooks/useSaveSeries.ts b/src/components/routes/create-series/hooks/useSaveSeries.ts
new file mode 100644
index 00000000..97609ac3
--- /dev/null
+++ b/src/components/routes/create-series/hooks/useSaveSeries.ts
@@ -0,0 +1,78 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { ROUTES } from "@/routes/paths";
+import type { SeriesFormData } from "@/schema/SeriesSchema";
+import {
+  buildSeriesCreateBody,
+  buildSeriesUpdateBody,
+  mapSeriesDetailToFormData,
+  postSeries,
+  putUpdateSeries,
+  type SeriesDetailDTO,
+} from "@/components/routes/create-series/api/seriesApi";
+
+type SaveSeriesInput = { data: SeriesFormData; featured: boolean };
+
+type UseSaveSeriesParams = {
+  isNew: boolean;
+  seriesId?: string;
+  groupId?: string;
+  seriesData?: SeriesDetailDTO;
+  onCreated: () => void;
+};
+
+export const useSaveSeries = ({
+  isNew,
+  seriesId,
+  groupId,
+  seriesData,
+  onCreated,
+}: UseSaveSeriesParams) => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ data, featured }: SaveSeriesInput) => {
+      if (isNew) {
+        const body = buildSeriesCreateBody(data, featured, groupId);
+        const created = await postSeries(body);
+        return { id: String(created.id) };
+      }
+      if (!seriesId || !seriesData) {
+        throw new Error("Missing series data for update");
+      }
+      const body = buildSeriesUpdateBody(data, featured, {
+        original: mapSeriesDetailToFormData(seriesData),
+        originalFeatured: seriesData.featured,
+      });
+      await putUpdateSeries({ seriesId, body });
+      return { id: seriesId };
+    },
+    onSuccess: () => {
+      toast.success(
+        isNew ? "Series created successfully!" : "Series updated successfully!",
+      );
+      void queryClient.invalidateQueries({ queryKey: ["dashboard-items"] });
+      if (seriesId && !isNew) {
+        void queryClient.invalidateQueries({ queryKey: ["series", seriesId] });
+      }
+      if (isNew) {
+        onCreated();
+        if (groupId) {
+          navigate(ROUTES.group(groupId));
+          return;
+        }
+      }
+      navigate(ROUTES.dashboard);
+    },
+    onError: (error: Error) => {
+      toast.error(
+        isNew ? "Failed to create series" : "Failed to update series",
+        {
+          description: error.message,
+        },
+      );
+    },
+  });
+};
diff --git a/src/components/routes/create-series/hooks/useSeriesForm.ts b/src/components/routes/create-series/hooks/useSeriesForm.ts
new file mode 100644
index 00000000..bacc384b
--- /dev/null
+++ b/src/components/routes/create-series/hooks/useSeriesForm.ts
@@ -0,0 +1,155 @@
+import { useCallback } from "react";
+import { useForm, type UseFormReturn } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+import {
+  seriesSchema,
+  type SeriesFormData,
+  type LanguageCode,
+  type SeriesPlan,
+} from "@/schema/SeriesSchema";
+
+export type UseSeriesFormReturn = {
+  form: UseFormReturn<SeriesFormData>;
+  languages: SeriesFormData["languages"];
+  plans: SeriesFormData["plans"];
+  imageUrl: string;
+  addedLanguages: LanguageCode[];
+  availableLanguages: typeof PLAN_LANGUAGE;
+  canSubmit: boolean;
+  addLanguage: (code: LanguageCode) => void;
+  removeLanguage: (code: LanguageCode) => void;
+  addPlan: (code: LanguageCode, plan: SeriesPlan) => void;
+  removePlan: (code: LanguageCode, planId: string) => void;
+  reorderPlans: (code: LanguageCode, plans: SeriesPlan[]) => void;
+  setImageUrl: (url: string) => void;
+};
+
+export const useSeriesForm = (): UseSeriesFormReturn => {
+  const form = useForm<SeriesFormData>({
+    resolver: zodResolver(seriesSchema),
+    defaultValues: {
+      languages: {},
+      plans: {},
+      image_url: "",
+    } satisfies SeriesFormData,
+    mode: "onChange",
+  });
+
+  const languages = form.watch("languages") ?? {};
+  const plans = form.watch("plans") ?? {};
+  const imageUrl = form.watch("image_url") ?? "";
+
+  const addedLanguages = Object.keys(languages) as LanguageCode[];
+  const availableLanguages = PLAN_LANGUAGE.filter(
+    ({ value }) => !languages[value as LanguageCode],
+  );
+  const allAddedLanguagesComplete =
+    addedLanguages.length > 0 &&
+    addedLanguages.every((code) => {
+      const block = languages[code];
+      return !!block?.title.trim() && !!block?.description.trim();
+    });
+  const canSubmit =
+    allAddedLanguagesComplete && (imageUrl?.trim()?.length ?? 0) > 0;
+
+  const addLanguage = useCallback(
+    (code: LanguageCode) => {
+      const current = form.getValues("languages") ?? {};
+      if (current[code]) return;
+      form.setValue(
+        "languages",
+        { ...current, [code]: { title: "", sub_title: "", description: "" } },
+        { shouldDirty: true, shouldValidate: true },
+      );
+    },
+    [form],
+  );
+
+  const removeLanguage = useCallback(
+    (code: LanguageCode) => {
+      const currentLanguages = form.getValues("languages") ?? {};
+      const currentPlans = form.getValues("plans") ?? {};
+      const restLanguages = Object.fromEntries(
+        Object.entries(currentLanguages).filter(([key]) => key !== code),
+      ) as typeof currentLanguages;
+      const restPlans = Object.fromEntries(
+        Object.entries(currentPlans).filter(([key]) => key !== code),
+      ) as typeof currentPlans;
+      form.setValue("languages", restLanguages, {
+        shouldDirty: true,
+        shouldValidate: true,
+      });
+      form.setValue("plans", restPlans, {
+        shouldDirty: true,
+        shouldValidate: true,
+      });
+    },
+    [form],
+  );
+
+  const addPlan = useCallback(
+    (code: LanguageCode, plan: SeriesPlan) => {
+      const current = form.getValues("plans") ?? {};
+      const existing = current[code] ?? [];
+      if (existing.some((p) => p.id === plan.id)) return;
+      form.setValue(
+        "plans",
+        { ...current, [code]: [...existing, plan] },
+        { shouldDirty: true, shouldValidate: true },
+      );
+    },
+    [form],
+  );
+
+  const removePlan = useCallback(
+    (code: LanguageCode, planId: string) => {
+      const current = form.getValues("plans") ?? {};
+      const existing = current[code] ?? [];
+      form.setValue(
+        "plans",
+        { ...current, [code]: existing.filter((p) => p.id !== planId) },
+        { shouldDirty: true, shouldValidate: true },
+      );
+    },
+    [form],
+  );
+
+  const reorderPlans = useCallback(
+    (code: LanguageCode, reordered: SeriesPlan[]) => {
+      const current = form.getValues("plans") ?? {};
+      form.setValue(
+        "plans",
+        { ...current, [code]: reordered },
+        { shouldDirty: true, shouldValidate: true },
+      );
+    },
+    [form],
+  );
+
+  const setImageUrl = useCallback(
+    (url: string) => {
+      form.setValue("image_url", url, {
+        shouldDirty: true,
+        shouldValidate: true,
+      });
+    },
+    [form],
+  );
+
+  return {
+    form,
+    languages,
+    plans,
+    imageUrl,
+    addedLanguages,
+    availableLanguages,
+    canSubmit,
+    addLanguage,
+    removeLanguage,
+    addPlan,
+    removePlan,
+    reorderPlans,
+    setImageUrl,
+  };
+};
diff --git a/src/components/routes/create-series/hooks/useSeriesImage.ts b/src/components/routes/create-series/hooks/useSeriesImage.ts
new file mode 100644
index 00000000..d3698825
--- /dev/null
+++ b/src/components/routes/create-series/hooks/useSeriesImage.ts
@@ -0,0 +1,90 @@
+import { useCallback, useRef, useState } from "react";
+import { toast } from "sonner";
+import { uploadImageToS3 } from "@/components/routes/task/api/taskApi";
+
+type UseSeriesImageParams = {
+  isNew: boolean;
+  seriesId?: string;
+  setImageUrl: (url: string) => void;
+};
+
+export type UseSeriesImageReturn = {
+  selectedImage: File | null;
+  imagePreview: string | null;
+  isImageDialogOpen: boolean;
+  isImageUploading: boolean;
+  fileInputRef: React.RefObject<HTMLInputElement | null>;
+  openImageDialog: () => void;
+  setImageDialogOpen: (open: boolean) => void;
+  setImagePreview: (preview: string | null) => void;
+  setSelectedImage: (file: File | null) => void;
+  uploadImage: (file: File) => Promise<void>;
+  removeImage: () => void;
+};
+
+export const useSeriesImage = ({
+  isNew,
+  seriesId,
+  setImageUrl,
+}: UseSeriesImageParams): UseSeriesImageReturn => {
+  const [selectedImage, setSelectedImage] = useState<File | null>(null);
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [isImageDialogOpen, setImageDialogOpen] = useState(false);
+  const [isImageUploading, setIsImageUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const uploadImage = useCallback(
+    async (file: File) => {
+      setIsImageUploading(true);
+      try {
+        const { image, key } = await uploadImageToS3(
+          file,
+          isNew ? "" : seriesId || "",
+        );
+        setImagePreview(image.original);
+        setSelectedImage(file);
+        setImageUrl(key);
+        setImageDialogOpen(false);
+        toast.success("Image uploaded successfully!");
+      } catch (error: unknown) {
+        const err = error as { response?: { status?: number } };
+        if (err?.response?.status === 413) {
+          toast.error("Failed to upload image", {
+            description: "File exceeds the maximum size of 1MB",
+          });
+        } else {
+          console.error("Image upload failed:", error);
+          toast.error("Failed to upload image");
+        }
+      } finally {
+        setIsImageUploading(false);
+      }
+    },
+    [isNew, seriesId, setImageUrl],
+  );
+
+  const removeImage = useCallback(() => {
+    setSelectedImage(null);
+    setImagePreview(null);
+    setImageUrl("");
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }, [setImageUrl]);
+
+  const openImageDialog = useCallback(() => setImageDialogOpen(true), []);
+
+  return {
+    selectedImage,
+    imagePreview,
+    isImageDialogOpen,
+    isImageUploading,
+    fileInputRef,
+    openImageDialog,
+    setImageDialogOpen,
+    setImagePreview,
+    setSelectedImage,
+    uploadImage,
+    removeImage,
+  };
+};
diff --git a/src/components/routes/create-series/utils/language.ts b/src/components/routes/create-series/utils/language.ts
new file mode 100644
index 00000000..533be81e
--- /dev/null
+++ b/src/components/routes/create-series/utils/language.ts
@@ -0,0 +1,19 @@
+import { PLAN_LANGUAGE } from "@/lib/constant";
+import type { LanguageCode } from "@/schema/SeriesSchema";
+
+const ENGLISH_LABELS: Record<LanguageCode, string> = {
+  EN: "English",
+  BO: "Tibetan",
+  ZH: "Chinese",
+  HI: "Hindi",
+  NE: "Nepali",
+  MN: "Mongolian",
+};
+
+/** English label used for form field labels (e.g. "English title"). */
+export const getEnglishLanguageLabel = (code: LanguageCode): string =>
+  ENGLISH_LABELS[code] ?? code;
+
+/** Native label from PLAN_LANGUAGE used for plan tabs. */
+export const getNativeLanguageLabel = (code: LanguageCode): string =>
+  PLAN_LANGUAGE.find((l) => l.value === code)?.label ?? code;
diff --git a/src/components/routes/dashboard/Dashboard.test.tsx b/src/components/routes/dashboard/Dashboard.test.tsx
index 273d5765..3cbd823d 100644
--- a/src/components/routes/dashboard/Dashboard.test.tsx
+++ b/src/components/routes/dashboard/Dashboard.test.tsx
@@ -1,10 +1,22 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { BrowserRouter } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import Dashboard from "./Dashboard";
 import axiosInstance from "@/config/axios-config";
 import { vi } from "vitest";
 
+const emptyDashboardResponse = {
+  items: [],
+  pagination: { page: 1, page_size: 10, total: 0, total_pages: 0 },
+};
+
 const renderWithProviders = (component: React.ReactElement) => {
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -23,28 +35,57 @@ const renderWithProviders = (component: React.ReactElement) => {
 };
 
 describe("Dashboard Component", () => {
-  it("renders dashboard with search input and add plan button", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders dashboard with search input", () => {
+    vi.spyOn(axiosInstance, "get").mockResolvedValue({
+      data: emptyDashboardResponse,
+    });
     renderWithProviders(<Dashboard />);
 
     expect(
       screen.getByPlaceholderText("common.placeholder.search"),
     ).toBeDefined();
-
-    expect(screen.getByText("Add Plan")).toBeDefined();
   });
 
-  it("displays table headers correctly", () => {
+  it("displays table headers correctly", async () => {
+    vi.spyOn(axiosInstance, "get").mockResolvedValue({
+      data: {
+        items: [
+          {
+            id: "plan-1",
+            type: "plan",
+            title: "Header Test Plan",
+            image_url: "",
+            status: "DRAFT",
+            featured: false,
+            languages: ["EN"],
+            enrolled_count: 0,
+            created_at: "2025-01-01T00:00:00Z",
+          },
+        ],
+        pagination: { page: 1, page_size: 10, total: 1, total_pages: 1 },
+      },
+    });
     renderWithProviders(<Dashboard />);
 
-    expect(screen.getByText("studio.dashboard.cover_image")).toBeDefined();
+    await waitFor(() => {
+      expect(screen.getByRole("table")).toBeInTheDocument();
+    });
+
     expect(screen.getByText("studio.dashboard.title")).toBeDefined();
-    expect(screen.getByText("studio.dashboard.plan_days")).toBeDefined();
     expect(screen.getByText("studio.dashboard.plan_used")).toBeDefined();
-    expect(screen.getByText("Status")).toBeDefined();
+    expect(screen.getByText("Date Modified")).toBeDefined();
+    expect(screen.getByText("Featured")).toBeDefined();
     expect(screen.getByText("studio.dashboard.actions")).toBeDefined();
   });
 
   it("renders search input with correct placeholder", () => {
+    vi.spyOn(axiosInstance, "get").mockResolvedValue({
+      data: emptyDashboardResponse,
+    });
     renderWithProviders(<Dashboard />);
 
     const searchInput = screen.getByPlaceholderText(
@@ -55,6 +96,9 @@ describe("Dashboard Component", () => {
   });
 
   it("allows typing in search input", () => {
+    vi.spyOn(axiosInstance, "get").mockResolvedValue({
+      data: emptyDashboardResponse,
+    });
     renderWithProviders(<Dashboard />);
 
     const searchInput = screen.getByPlaceholderText(
@@ -66,106 +110,198 @@ describe("Dashboard Component", () => {
     expect(searchInput.value).toBe("test search");
   });
 
-  it("renders add plan button with correct link", () => {
-    renderWithProviders(<Dashboard />);
-
-    const addPlanButton = screen.getByText("Add Plan");
-    expect(addPlanButton).toBeDefined();
-
-    const linkElement = addPlanButton.closest("a");
-    expect(linkElement).toBeDefined();
-    expect(linkElement?.getAttribute("href")).toBe("/plan/new");
-  });
-
-  it("renders loading state by default", () => {
-    renderWithProviders(<Dashboard />);
-
-    expect(screen.getByText("Loading...")).toBeDefined();
-  });
-
-  it("has proper table structure", () => {
-    renderWithProviders(<Dashboard />);
-
-    const table = screen.getByRole("table");
-    expect(table).toBeDefined();
-
-    const coverImageHeader = screen.getByText("studio.dashboard.cover_image");
-    expect(coverImageHeader.tagName).toBe("TH");
-  });
-
-  it("fetches plans correctly and returns the correct data", async () => {
+  it("has proper table structure when items exist", async () => {
     vi.spyOn(axiosInstance, "get").mockResolvedValue({
-      data: { plans: [], total: 0 },
+      data: {
+        items: [
+          {
+            id: "plan-1",
+            type: "plan",
+            title: "Sample",
+            image_url: "",
+            status: "DRAFT",
+            featured: false,
+            languages: ["EN"],
+            enrolled_count: 0,
+            updated_at: "2025-01-01T00:00:00Z",
+            created_at: "2025-01-01T00:00:00Z",
+          },
+        ],
+        pagination: { page: 1, page_size: 10, total: 1, total_pages: 1 },
+      },
     });
-
     renderWithProviders(<Dashboard />);
+
     await waitFor(() => {
-      expect(screen.queryByText("Loading...")).not.toBeInTheDocument();
+      expect(screen.getByRole("table")).toBeDefined();
     });
+
+    const table = screen.getByRole("table");
+    const headers = within(table).getAllByRole("columnheader");
+    expect(headers).toHaveLength(6);
+    expect(headers[0]?.textContent?.trim()).toBe("");
   });
 
-  it("should toggle sort order when clicking column header multiple times", async () => {
-    vi.spyOn(axiosInstance, "get").mockResolvedValue({
-      data: { plans: [], total: 0 },
+  it("fetches dashboard items from unified CMS endpoint", async () => {
+    const getSpy = vi.spyOn(axiosInstance, "get").mockResolvedValue({
+      data: emptyDashboardResponse,
     });
 
     renderWithProviders(<Dashboard />);
-    const titleHeader = screen.getByText("studio.dashboard.title");
-    fireEvent.click(titleHeader);
     await waitFor(() => {
-      expect(axiosInstance.get).toHaveBeenCalledWith(
-        expect.stringContaining(`/api/v1/cms/plan`),
+      expect(getSpy).toHaveBeenCalledWith(
+        expect.stringContaining("/api/v1/cms/dashboard/items"),
         expect.objectContaining({
           params: expect.objectContaining({
-            sort_by: "title",
-            sort_order: "asc",
+            tab: "all",
+            page: 1,
+            page_size: 10,
           }),
         }),
       );
     });
-    fireEvent.click(titleHeader);
+  });
+
+  it("passes tab and filters when switching to plans", async () => {
+    const getSpy = vi.spyOn(axiosInstance, "get").mockResolvedValue({
+      data: emptyDashboardResponse,
+    });
+    const user = userEvent.setup();
+    renderWithProviders(<Dashboard />);
+
     await waitFor(() => {
-      expect(axiosInstance.get).toHaveBeenCalledWith(
-        expect.stringContaining(`/api/v1/cms/plan`),
-        expect.objectContaining({
-          params: expect.objectContaining({
-            sort_by: "title",
-            sort_order: "desc",
-          }),
-        }),
-      );
+      expect(getSpy).toHaveBeenCalled();
     });
-    fireEvent.click(titleHeader);
+
+    await user.click(screen.getByRole("button", { name: "Plans" }));
+
     await waitFor(() => {
-      expect(axiosInstance.get).toHaveBeenCalledWith(
-        expect.stringContaining(`/api/v1/cms/plan`),
+      expect(getSpy).toHaveBeenCalledWith(
+        expect.stringContaining("/api/v1/cms/dashboard/items"),
         expect.objectContaining({
           params: expect.objectContaining({
-            sort_by: "title",
-            sort_order: "asc",
+            tab: "plans",
           }),
         }),
       );
     });
   });
 
+  it("shows stack badge on series cover image", async () => {
+    vi.spyOn(axiosInstance, "get").mockResolvedValue({
+      data: {
+        items: [
+          {
+            id: "series-1",
+            type: "series",
+            metadata: [
+              {
+                id: "meta-1",
+                title: "Test Series",
+                language: "EN",
+              },
+            ],
+            image_url: "https://example.com/cover.jpg",
+            status: "PUBLISHED",
+            featured: false,
+            languages: ["EN"],
+            enrolled_count: 5,
+            plans_count: 10,
+            updated_at: "2025-01-01T00:00:00Z",
+            created_at: "2025-01-01T00:00:00Z",
+          },
+        ],
+        pagination: { page: 1, page_size: 10, total: 1, total_pages: 1 },
+      },
+    });
+    renderWithProviders(<Dashboard />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Test Series")).toBeInTheDocument();
+    });
+
+    expect(screen.getByLabelText("Series, 10 plans")).toBeInTheDocument();
+  });
+
+  it("shows same published actions for series as plans (Edit + Unpublish)", async () => {
+    vi.spyOn(axiosInstance, "get").mockResolvedValue({
+      data: {
+        items: [
+          {
+            id: "series-1",
+            type: "series",
+            metadata: [{ id: "m1", title: "Published Series", language: "EN" }],
+            status: "PUBLISHED",
+            featured: false,
+            languages: ["EN"],
+            enrolled_count: 0,
+            plans_count: 2,
+            created_at: "2025-01-01T00:00:00Z",
+          },
+          {
+            id: "plan-1",
+            type: "plan",
+            title: "Published Plan",
+            status: "PUBLISHED",
+            featured: false,
+            languages: ["EN"],
+            enrolled_count: 0,
+            created_at: "2025-01-01T00:00:00Z",
+          },
+        ],
+        pagination: { page: 1, page_size: 10, total: 2, total_pages: 1 },
+      },
+    });
+    const user = userEvent.setup();
+    renderWithProviders(<Dashboard />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Published Series")).toBeInTheDocument();
+    });
+
+    const seriesActions = screen.getByRole("button", {
+      name: "Series actions",
+    });
+    await user.click(seriesActions);
+
+    expect(
+      await screen.findByRole("menuitem", { name: "Unpublish" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("menuitem", { name: "Edit Series" }),
+    ).toBeInTheDocument();
+
+    await user.keyboard("{Escape}");
+
+    const planActions = screen.getByRole("button", { name: "Plan actions" });
+    await user.click(planActions);
+
+    expect(
+      await screen.findByRole("menuitem", { name: "Unpublish" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("menuitem", { name: "Edit Plan" }),
+    ).toBeInTheDocument();
+  });
+
   it("handles toggle featured on a plan", async () => {
     vi.spyOn(axiosInstance, "get").mockResolvedValue({
       data: {
-        plans: [
+        items: [
           {
             id: "plan-1",
-            image_url: "",
+            type: "plan",
             title: "Test Plan",
-            description: "Test description",
-            total_days: "7",
-            subscription_count: "10",
+            image_url: "",
             status: "PUBLISHED",
             featured: false,
-            language: "EN",
+            languages: ["EN"],
+            enrolled_count: 10,
+            updated_at: "2025-01-01T00:00:00Z",
+            created_at: "2025-01-01T00:00:00Z",
           },
         ],
-        total: 1,
+        pagination: { page: 1, page_size: 10, total: 1, total_pages: 1 },
       },
     });
     axiosInstance.patch = vi.fn().mockResolvedValue({ data: {} });
@@ -173,18 +309,61 @@ describe("Dashboard Component", () => {
     renderWithProviders(<Dashboard />);
 
     await waitFor(() => {
-      expect(screen.queryByText("Loading...")).not.toBeInTheDocument();
+      expect(screen.getByText("Test Plan")).toBeInTheDocument();
     });
 
-    expect(screen.getByText("Test Plan")).toBeInTheDocument();
-
-    const featuredButton = screen.getByText("Not Featured");
+    const featuredButton = screen.getByRole("button", { name: "Not featured" });
     fireEvent.click(featuredButton);
 
     await waitFor(() => {
       expect(axiosInstance.patch).toHaveBeenCalledWith(
         "/api/v1/cms/plans/plan-1/featured",
-        expect.any(Object),
+      );
+    });
+  });
+
+  it("handles toggle featured on a series", async () => {
+    vi.spyOn(axiosInstance, "get").mockResolvedValue({
+      data: {
+        items: [
+          {
+            id: "series-1",
+            type: "series",
+            metadata: [
+              {
+                id: "meta-1",
+                title: "Test Series",
+                language: "EN",
+              },
+            ],
+            image_url: "",
+            status: "PUBLISHED",
+            featured: false,
+            languages: ["EN"],
+            enrolled_count: 0,
+            plans_count: 3,
+            updated_at: "2025-01-01T00:00:00Z",
+            created_at: "2025-01-01T00:00:00Z",
+          },
+        ],
+        pagination: { page: 1, page_size: 10, total: 1, total_pages: 1 },
+      },
+    });
+    axiosInstance.put = vi.fn().mockResolvedValue({ data: {} });
+
+    renderWithProviders(<Dashboard />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Test Series")).toBeInTheDocument();
+    });
+
+    const featuredButton = screen.getByRole("button", { name: "Not featured" });
+    fireEvent.click(featuredButton);
+
+    await waitFor(() => {
+      expect(axiosInstance.put).toHaveBeenCalledWith(
+        "/api/v1/cms/series/series-1",
+        { featured: true },
       );
     });
   });
diff --git a/src/components/routes/dashboard/Dashboard.tsx b/src/components/routes/dashboard/Dashboard.tsx
index 8c8380a0..27fe5cf9 100644
--- a/src/components/routes/dashboard/Dashboard.tsx
+++ b/src/components/routes/dashboard/Dashboard.tsx
@@ -1,165 +1,464 @@
 import { Pecha } from "@/components/ui/shadimport";
-import { DashBoardTable } from "@/components/ui/molecules/dashboard-table/DashBoardTable";
-import { IoMdAdd, IoMdSearch } from "react-icons/io";
-import { useState, Activity } from "react";
+import { DashboardContentTable } from "@/components/routes/dashboard/DashboardContentTable";
+import {
+  fetchDashboardItems,
+  type DashboardTab,
+} from "@/components/routes/dashboard/dashboardApi";
+import type { DashboardRowKind } from "@/components/routes/dashboard/dashboardTable";
+import {
+  buildDashboardSearchParams,
+  dashboardUrlStateToFetchParams,
+  mergeDashboardUrlState,
+  parseDashboardSearchParams,
+  type DashboardPlanStatus,
+  type DashboardSort,
+  type DashboardUrlState,
+} from "@/components/routes/dashboard/dashboardUrlState";
+import { IoMdSearch } from "react-icons/io";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  Activity,
+  type ReactNode,
+} from "react";
 import { useDebounce } from "use-debounce";
-import { useTranslate } from "@tolgee/react";
-import { Button } from "@/components/ui/atoms/button";
+import { useTolgee, useTranslate } from "@tolgee/react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import axiosInstance from "@/config/axios-config";
-import { Link } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import { ROUTES } from "@/routes/paths";
 import { Pagination } from "@/components/ui/molecules/pagination/Pagination";
 import AuthButton from "@/components/ui/molecules/auth-button/AuthButton";
 import { toast } from "sonner";
+import { useUserInfo } from "@/hooks/useUserInfo";
+import { useDashboardGroupFilterOptions } from "@/hooks/useDashboardGroupFilterOptions";
+import { useGroupRolesMap } from "@/hooks/useGroupRolesMap";
+import { isReviewer } from "@/lib/platformAccess";
 
-const fetchPlans = async (
-  page: number,
-  limit: number,
-  search: string,
-  sortBy: string,
-  sortOrder: string,
-) => {
-  const skip = (page - 1) * limit;
-  const accessToken = sessionStorage.getItem("accessToken");
-  const { data } = await axiosInstance.get(`/api/v1/cms/plans`, {
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-    },
-    params: {
-      skip,
-      limit,
-      ...(search && { search }),
-      ...(sortBy && { sort_by: sortBy }),
-      ...(sortOrder && { sort_order: sortOrder }),
-    },
-  });
-  return data;
-};
+const SEARCH_DEBOUNCE_MS = 500;
 
-const toggleFeatured = async (planId: string) => {
-  const accessToken = sessionStorage.getItem("accessToken");
+const toggleFeatured = async ({
+  id,
+  kind,
+  featured,
+}: {
+  id: string;
+  kind: DashboardRowKind;
+  featured: boolean;
+}) => {
+  if (kind === "series") {
+    const { data } = await axiosInstance.put(`/api/v1/cms/series/${id}`, {
+      featured: !featured,
+    });
+    return data;
+  }
   const { data } = await axiosInstance.patch(
-    `/api/v1/cms/plans/${planId}/featured`,
-    {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
-    },
+    `/api/v1/cms/plans/${id}/featured`,
   );
   return data;
 };
 
+function DashboardListPlaceholder({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: string;
+  children?: ReactNode;
+}) {
+  return (
+    <div className="flex w-full max-w-md flex-col items-center justify-center rounded-xl border border-dashed border-gray-200 bg-white/80 px-8 py-16 text-center dark:border-[#313132] dark:bg-[#1d1d1f]/80">
+      <p className="text-base font-medium text-foreground">{title}</p>
+      {description ? (
+        <p className="mt-2 text-sm text-muted-foreground">{description}</p>
+      ) : null}
+      {children ? (
+        <div className="mt-6 flex flex-wrap justify-center gap-2">
+          {children}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
 const Dashboard = () => {
   const { t } = useTranslate();
-  const [search, setSearch] = useState("");
-  const [currentPage, setCurrentPage] = useState(1);
-  const [debouncedSearch] = useDebounce(search, 500);
-  const [sortBy, setSortBy] = useState("");
-  const [sortOrder, setSortOrder] = useState("");
-
-  const handleSort = (column: string) => {
-    if (sortBy === column) {
-      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
-    } else {
-      setSortBy(column);
-      setSortOrder("asc");
-    }
-    setCurrentPage(1);
-  };
+  const { data: userInfo } = useUserInfo();
+  const tolgee = useTolgee(["language"]);
+  const localeLanguage = tolgee.getLanguage();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const urlState = useMemo(
+    () => parseDashboardSearchParams(searchParams),
+    [searchParams],
+  );
+
+  const [searchDraft, setSearchDraft] = useState(urlState.search ?? "");
+  const [debouncedSearchDraft] = useDebounce(searchDraft, SEARCH_DEBOUNCE_MS);
+
+  useEffect(() => {
+    setSearchDraft(urlState.search ?? "");
+  }, [urlState.search]);
+
+  const replaceUrlState = useCallback(
+    (patch: Partial<DashboardUrlState>) => {
+      const next = mergeDashboardUrlState(urlState, patch);
+      setSearchParams(buildDashboardSearchParams(next), { replace: true });
+    },
+    [urlState, setSearchParams],
+  );
+
+  const resetPageFilters = useMemo(() => ({ page: 1 as const }), []);
+
+  useEffect(() => {
+    const trimmed = debouncedSearchDraft.trim();
+    const committed = urlState.search ?? "";
+    if (trimmed === committed) return;
+    replaceUrlState({
+      search: trimmed || null,
+      ...resetPageFilters,
+    });
+  }, [
+    debouncedSearchDraft,
+    urlState.search,
+    replaceUrlState,
+    resetPageFilters,
+  ]);
+
+  const {
+    options: groupFilterOptions,
+    rolesByGroupId,
+    isLoading: isGroupFilterLoading,
+    showFilter: showGroupFilter,
+    isStaffWideList: isStaffWideGroupList,
+    allowedGroupIds,
+  } = useDashboardGroupFilterOptions(userInfo);
+
+  const fetchParams = useMemo(
+    () => ({
+      ...dashboardUrlStateToFetchParams(urlState),
+      localeLanguage,
+    }),
+    [urlState, localeLanguage],
+  );
 
   const {
-    data: planData,
-    isLoading,
+    data: dashboardData,
+    status,
+    isFetching,
     error,
+    isError,
   } = useQuery({
-    queryKey: [
-      "dashboard-plans",
-      currentPage,
-      debouncedSearch,
-      sortBy,
-      sortOrder,
-    ],
-    queryFn: () =>
-      fetchPlans(currentPage, 10, debouncedSearch, sortBy, sortOrder),
+    queryKey: ["dashboard-items", fetchParams],
+    queryFn: () => fetchDashboardItems(fetchParams),
     refetchOnWindowFocus: false,
     retry: false,
   });
 
+  const totalPages = dashboardData?.pagination.total_pages ?? 1;
+
+  useEffect(() => {
+    if (status !== "success") return;
+    if (urlState.page > totalPages && totalPages > 0) {
+      replaceUrlState({ page: totalPages });
+    }
+  }, [status, urlState.page, totalPages, replaceUrlState]);
+
   const queryClient = useQueryClient();
   const featuredMutation = useMutation({
-    mutationFn: (planId: string) => toggleFeatured(planId),
+    mutationFn: toggleFeatured,
     onSuccess: () => {
-      queryClient.refetchQueries({ queryKey: ["dashboard-plans"] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard-items"] });
     },
-    onError: (error: any) => {
-      toast.error(error.response.data.detail.message);
+    onError: (err: unknown) => {
+      const message =
+        (err as { response?: { data?: { detail?: { message?: string } } } })
+          ?.response?.data?.detail?.message ?? "Could not update featured";
+      toast.error(message);
     },
   });
 
-  const handleFeatured = (planId: string) => {
-    featuredMutation.mutate(planId);
+  const handleFeatured = (
+    id: string,
+    kind: DashboardRowKind,
+    featured: boolean,
+  ) => {
+    featuredMutation.mutate({ id, kind, featured });
+  };
+
+  const setTab = (next: DashboardTab) => {
+    replaceUrlState({ tab: next, ...resetPageFilters });
   };
 
-  const totalPages = planData ? Math.ceil(planData.total / 10) : 1;
+  const rows = dashboardData?.rows ?? [];
+
+  const groupIdsMissingRole = useMemo(
+    () =>
+      rows
+        .map((r) => r.group_id)
+        .filter((id): id is string => Boolean(id) && !rolesByGroupId.has(id!)),
+    [rows, rolesByGroupId],
+  );
+
+  const fallbackRolesByGroupId = useGroupRolesMap(
+    groupIdsMissingRole,
+    userInfo
+      ? {
+          id: userInfo.id,
+          email: userInfo.email,
+          platform_role: userInfo.platform_role,
+        }
+      : undefined,
+  );
+
+  const mergedGroupRolesByGroupId = useMemo(() => {
+    if (fallbackRolesByGroupId.size === 0) return rolesByGroupId;
+    const merged = new Map(rolesByGroupId);
+    fallbackRolesByGroupId.forEach((role, id) => {
+      if (role && !merged.has(id)) merged.set(id, role);
+    });
+    return merged;
+  }, [rolesByGroupId, fallbackRolesByGroupId]);
+
+  useEffect(() => {
+    if (isStaffWideGroupList) return;
+    if (!urlState.groupId || isGroupFilterLoading) return;
+    if (!allowedGroupIds.has(urlState.groupId)) {
+      replaceUrlState({ groupId: null, ...resetPageFilters });
+    }
+  }, [
+    urlState.groupId,
+    allowedGroupIds,
+    isGroupFilterLoading,
+    isStaffWideGroupList,
+    replaceUrlState,
+    resetPageFilters,
+  ]);
+
+  const platformReadOnly = isReviewer(userInfo?.platform_role);
+  const hasRows = rows.length > 0;
+  const isLoadingTable = status === "pending" || isFetching;
+  const showEmpty = status === "success" && !hasRows;
+
+  const chipClass = (active: boolean) =>
+    `rounded-full px-4 py-1.5 text-sm font-semibold transition-colors ${
+      active
+        ? "bg-neutral-900 text-white dark:bg-white dark:text-neutral-900"
+        : "border border-gray-200 bg-white text-gray-800 hover:bg-gray-50 dark:border-[#313132] dark:bg-transparent dark:text-gray-200 dark:hover:bg-[#2a2a2a]"
+    }`;
+
+  const emptyTitle =
+    urlState.tab === "plans"
+      ? t("studio.dashboard.no_plan_found")
+      : urlState.tab === "series"
+        ? "No series found."
+        : "Nothing to show yet";
+
+  const emptyDescription =
+    urlState.tab === "plans"
+      ? "Create a plan to see it listed here."
+      : urlState.tab === "series"
+        ? "Create a series to see it listed here."
+        : "Try clearing search or add new plans and series.";
+
+  const sortValue: DashboardSort = urlState.sort ?? "recent";
+
+  const groupFilterValue = urlState.groupId ?? "all";
+
+  const filterBar = (
+    <div className="flex w-full flex-wrap items-end gap-4 px-4 pb-2 pt-3">
+      {showGroupFilter ? (
+        <div className="flex min-w-[200px] flex-col gap-1">
+          <span className="text-xs font-medium text-muted-foreground">
+            Group
+          </span>
+          <Pecha.Select
+            value={groupFilterValue}
+            onValueChange={(v) => {
+              replaceUrlState({
+                groupId: v === "all" ? null : v,
+                ...resetPageFilters,
+              });
+            }}
+            disabled={isGroupFilterLoading}
+          >
+            <Pecha.SelectTrigger className="h-9 w-[220px] bg-white dark:bg-input/30">
+              <Pecha.SelectValue
+                placeholder={
+                  isGroupFilterLoading ? "Loading groups…" : "All groups"
+                }
+              />
+            </Pecha.SelectTrigger>
+            <Pecha.SelectContent>
+              <Pecha.SelectItem value="all">All groups</Pecha.SelectItem>
+              {groupFilterOptions.map((group) => (
+                <Pecha.SelectItem key={group.id} value={group.id}>
+                  {group.label}
+                </Pecha.SelectItem>
+              ))}
+            </Pecha.SelectContent>
+          </Pecha.Select>
+        </div>
+      ) : null}
+      <div className="flex min-w-[180px] flex-col gap-1">
+        <span className="text-xs font-medium text-muted-foreground">Sort</span>
+        <Pecha.Select
+          value={sortValue}
+          onValueChange={() => {
+            // Backend sort is fixed; keep URL clean (omit `sort` = default).
+            replaceUrlState({ sort: null });
+          }}
+        >
+          <Pecha.SelectTrigger className="h-9 w-[200px] bg-white dark:bg-input/30">
+            <Pecha.SelectValue placeholder="Sort" />
+          </Pecha.SelectTrigger>
+          <Pecha.SelectContent>
+            <Pecha.SelectItem value="recent">
+              Recently modified
+            </Pecha.SelectItem>
+          </Pecha.SelectContent>
+        </Pecha.Select>
+      </div>
+      <div className="flex min-w-[160px] flex-col gap-1">
+        <span className="text-xs font-medium text-muted-foreground">
+          Language
+        </span>
+        <Pecha.Select
+          value={urlState.language || "all"}
+          onValueChange={(v) => {
+            replaceUrlState({
+              language: v === "all" ? null : v,
+              ...resetPageFilters,
+            });
+          }}
+        >
+          <Pecha.SelectTrigger className="h-9 w-[180px] bg-white dark:bg-input/30">
+            <Pecha.SelectValue placeholder="Language" />
+          </Pecha.SelectTrigger>
+          <Pecha.SelectContent>
+            <Pecha.SelectItem value="all">All languages</Pecha.SelectItem>
+            <Pecha.SelectItem value="EN">English</Pecha.SelectItem>
+            <Pecha.SelectItem value="ZH">中文</Pecha.SelectItem>
+            <Pecha.SelectItem value="BO">བོད་སྐད།</Pecha.SelectItem>
+          </Pecha.SelectContent>
+        </Pecha.Select>
+      </div>
+      <div className="flex min-w-[160px] flex-col gap-1">
+        <span className="text-xs font-medium text-muted-foreground">
+          Status
+        </span>
+        <Pecha.Select
+          value={urlState.status || "all"}
+          onValueChange={(v) => {
+            replaceUrlState({
+              status: v === "all" ? null : (v as DashboardPlanStatus),
+              ...resetPageFilters,
+            });
+          }}
+        >
+          <Pecha.SelectTrigger className="h-9 w-[200px] bg-white dark:bg-input/30">
+            <Pecha.SelectValue placeholder="Status" />
+          </Pecha.SelectTrigger>
+          <Pecha.SelectContent>
+            <Pecha.SelectItem value="all">All statuses</Pecha.SelectItem>
+            <Pecha.SelectItem value="DRAFT">Draft</Pecha.SelectItem>
+            <Pecha.SelectItem value="PUBLISHED">Published</Pecha.SelectItem>
+            <Pecha.SelectItem value="UNPUBLISHED">Unpublished</Pecha.SelectItem>
+            <Pecha.SelectItem value="ARCHIVED">Archived</Pecha.SelectItem>
+          </Pecha.SelectContent>
+        </Pecha.Select>
+      </div>
+    </div>
+  );
 
   return (
     <div className="flex flex-col border h-[calc(100vh-40px)] overflow-auto bg-[#F5F5F5] dark:bg-[#181818] my-4 rounded-l-2xl font-dynamic">
-      <div className="mb-4  px-4 pt-10 flex items-center justify-between">
-        <div className="flex  items-center space-x-2">
+      <div className="mb-4 px-4 pt-10 flex flex-wrap items-center justify-between gap-3">
+        <div className="flex flex-wrap items-center gap-2">
           <div className="border w-fit px-2 bg-white dark:bg-input/30 rounded-md border-gray-200 dark:border-[#313132] flex items-center">
-            <IoMdSearch className="w-4 h-4" />
+            <IoMdSearch className="w-4 h-4 shrink-0" />
             <Pecha.Input
               placeholder={t("common.placeholder.search")}
               className="rounded-md border-none dark:bg-transparent px-4 shadow-none py-2"
-              value={search}
-              onChange={(e) => {
-                setSearch(e.target.value);
-                if (currentPage !== 1) {
-                  setCurrentPage(1);
-                }
-              }}
+              value={searchDraft}
+              onChange={(e) => setSearchDraft(e.target.value)}
             />
           </div>
-          <Link to={ROUTES.planNew}>
-            <Button variant="outline" className="bg-gray-100 hover:bg-gray-200">
-              <IoMdAdd /> Add Plan
-            </Button>
-          </Link>
+
+          <div className="flex flex-wrap items-center gap-2 pl-1">
+            <button
+              type="button"
+              className={chipClass(urlState.tab === "all")}
+              onClick={() => setTab("all")}
+            >
+              All
+            </button>
+            <button
+              type="button"
+              className={chipClass(urlState.tab === "plans")}
+              onClick={() => setTab("plans")}
+            >
+              Plans
+            </button>
+            <button
+              type="button"
+              className={chipClass(urlState.tab === "series")}
+              onClick={() => setTab("series")}
+            >
+              Series
+            </button>
+          </div>
         </div>
         <AuthButton />
       </div>
-      <div className="border-b  w-full border-dashed border-gray-300 dark:border-input" />
-      <div className="px-4 pt-4 h-full flex flex-col items-center justify-between">
-        {planData?.plans.length === 0 ? (
-          <div className="flex flex-col h-full items-center justify-center">
-            <p className="text-base text-muted-foreground">
-              {t("studio.dashboard.no_plan_found")}
-            </p>
-            <Link to={ROUTES.planNew}>
-              <Pecha.Button variant="outline" className="mt-2">
-                <IoMdAdd /> {t("studio.dashboard.add_plan")}
+      <div className="border-b w-full border-dashed border-gray-300 dark:border-input" />
+      {filterBar}
+
+      <div className="flex flex-1 flex-col items-center px-4 pb-6 pt-2">
+        {isError && error && (
+          <DashboardListPlaceholder
+            title="Unable to load dashboard"
+            description={String(error.message)}
+          />
+        )}
+
+        {showEmpty && (
+          <DashboardListPlaceholder
+            title={emptyTitle}
+            description={
+              emptyDescription ?? "Create plans and series from a group page."
+            }
+          >
+            <Link to={ROUTES.groups}>
+              <Pecha.Button variant="outline" size="sm">
+                Go to groups
               </Pecha.Button>
             </Link>
+          </DashboardListPlaceholder>
+        )}
+        {!isError && !showEmpty && (
+          <div className="w-full overflow-x-auto">
+            <DashboardContentTable
+              rows={rows}
+              isLoading={isLoadingTable}
+              t={t}
+              handleFeatured={platformReadOnly ? () => {} : handleFeatured}
+              platformRole={userInfo?.platform_role}
+              groupRolesByGroupId={mergedGroupRolesByGroupId}
+              userInfo={userInfo}
+            />
           </div>
-        ) : (
-          <DashBoardTable
-            plans={planData?.plans}
-            t={t}
-            isLoading={isLoading}
-            error={error}
-            sortBy={sortBy}
-            sortOrder={sortOrder}
-            onSort={handleSort}
-            handleFeatured={handleFeatured}
-          />
         )}
       </div>
-      <Activity mode={planData?.plans?.length > 0 ? "visible" : "hidden"}>
+
+      <Activity mode={hasRows ? "visible" : "hidden"}>
         <Pagination
-          currentPage={currentPage}
+          currentPage={urlState.page}
           totalPages={totalPages}
-          onPageChange={setCurrentPage}
+          onPageChange={(nextPage) => replaceUrlState({ page: nextPage })}
         />
       </Activity>
     </div>
diff --git a/src/components/routes/dashboard/DashboardContentTable.test.tsx b/src/components/routes/dashboard/DashboardContentTable.test.tsx
new file mode 100644
index 00000000..c62958a8
--- /dev/null
+++ b/src/components/routes/dashboard/DashboardContentTable.test.tsx
@@ -0,0 +1,67 @@
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { useTranslate } from "@tolgee/react";
+import { describe, expect, it, vi } from "vitest";
+import { DashboardContentTable } from "./DashboardContentTable";
+import type { DashboardTableRow } from "./dashboardTable";
+
+const t = ((key: string) => key) as ReturnType<typeof useTranslate>["t"];
+
+const sampleRow: DashboardTableRow = {
+  id: "plan-1",
+  kind: "plan",
+  title: "Sample plan",
+  image_url: "",
+  status: "DRAFT",
+  featured: false,
+  languages: ["EN"],
+  enrolled: 0,
+  total_days: 7,
+  modifiedAt: "2025-01-01T00:00:00Z",
+};
+
+describe("DashboardContentTable", () => {
+  it("hides actions column for platform reviewers", () => {
+    render(
+      <BrowserRouter>
+        <DashboardContentTable
+          rows={[sampleRow]}
+          t={t}
+          handleFeatured={vi.fn()}
+          platformRole="REVIEWER"
+        />
+      </BrowserRouter>,
+    );
+
+    expect(screen.getByText("Sample plan")).toBeInTheDocument();
+    expect(
+      screen.queryByText("studio.dashboard.actions"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows actions column for creators", () => {
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    render(
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <DashboardContentTable
+            rows={[sampleRow]}
+            t={t}
+            handleFeatured={vi.fn()}
+            platformRole="CREATOR"
+            userInfo={{
+              id: "u1",
+              platform_role: "CREATOR",
+              can_create_content: true,
+            }}
+          />
+        </BrowserRouter>
+      </QueryClientProvider>,
+    );
+
+    expect(screen.getByText("studio.dashboard.actions")).toBeInTheDocument();
+  });
+});
diff --git a/src/components/routes/dashboard/DashboardContentTable.tsx b/src/components/routes/dashboard/DashboardContentTable.tsx
new file mode 100644
index 00000000..61fffa94
--- /dev/null
+++ b/src/components/routes/dashboard/DashboardContentTable.tsx
@@ -0,0 +1,246 @@
+import { Pecha } from "@/components/ui/shadimport";
+import type { useTranslate } from "@tolgee/react";
+import { useNavigate } from "react-router-dom";
+import defaultCover from "/default-image.webp";
+import { BsThreeDotsVertical } from "react-icons/bs";
+import { LuLayers } from "react-icons/lu";
+import { DropdownButton } from "@/components/ui/molecules/dropdown-button/DropdownButton";
+import type {
+  DashboardLanguageCode,
+  DashboardTableRow,
+} from "./dashboardTable";
+import {
+  DASHBOARD_TABLE_ICON_BTN,
+  formatRowModified,
+  isMockDashboardId,
+} from "./dashboardTable";
+import { ROUTES } from "@/routes/paths";
+import { FeaturedStar, languageChip, statusChip } from "./dashboardTableUi";
+import type { PlatformRole } from "@/lib/platformAccess";
+import {
+  canAccessPlanRoutes,
+  isReviewer,
+  shouldShowCmsActionsColumn,
+} from "@/lib/platformAccess";
+import type { AuthorGroupMemberRole } from "@/components/routes/groups/api/groupsApi";
+import { canChangeContentStatus } from "@/lib/contentPermissions";
+import { resolveDashboardRowGroupRole } from "@/lib/dashboardRowPermissions";
+import type { UserInfo } from "@/hooks/useUserInfo";
+
+interface DashboardContentTableProps {
+  rows: DashboardTableRow[];
+  isLoading?: boolean;
+  t: ReturnType<typeof useTranslate>["t"];
+  handleFeatured: (
+    id: string,
+    kind: DashboardTableRow["kind"],
+    featured: boolean,
+  ) => void;
+  platformRole?: PlatformRole;
+  /** Membership roles from the groups list API (`my_role`), keyed by group id. */
+  groupRolesByGroupId?: Map<string, AuthorGroupMemberRole | undefined>;
+  userInfo?: UserInfo | null;
+}
+
+export function DashboardContentTable({
+  rows,
+  isLoading,
+  t,
+  handleFeatured,
+  platformRole,
+  groupRolesByGroupId,
+  userInfo,
+}: DashboardContentTableProps) {
+  const navigate = useNavigate();
+  const platformReadOnly = isReviewer(platformRole);
+  const showActionsColumn = shouldShowCmsActionsColumn(platformRole);
+  const rolesMap = groupRolesByGroupId ?? new Map();
+
+  const renderBody = () => {
+    if (isLoading)
+      return (
+        <Pecha.TableRow>
+          <Pecha.TableCell colSpan={6} className="text-center py-6">
+            Loading...
+          </Pecha.TableCell>
+        </Pecha.TableRow>
+      );
+    return rows.map((row) => {
+      const groupRole = resolveDashboardRowGroupRole(row, rolesMap, userInfo);
+      const canFeature = canChangeContentStatus(groupRole, platformRole);
+      const daysLabel = `${row.total_days} ${row.total_days === 1 ? "Day" : "Days"}`;
+      const titleHref =
+        row.kind === "plan" ? ROUTES.plan(row.id) : ROUTES.series(row.id);
+      const canOpenTitle =
+        row.kind === "series" || canAccessPlanRoutes(platformRole);
+      const modifiedDisplay = formatRowModified(row);
+      const canToggleFeatured =
+        row.kind === "series" ||
+        (row.kind === "plan" && !isMockDashboardId(row.id));
+      const featuredDisabled = row.status !== "PUBLISHED";
+      return (
+        <Pecha.TableRow
+          key={`${row.kind}-${row.id}`}
+          className="dark:bg-background"
+        >
+          <Pecha.TableCell>
+            <div className="relative inline-block">
+              <img
+                src={row.image_url || defaultCover}
+                onError={(e) => {
+                  e.currentTarget.src = defaultCover;
+                }}
+                alt=""
+                className="h-12 w-28 rounded border object-cover"
+              />
+              {row.kind === "series" ? (
+                <span
+                  className="absolute left-1 top-1 flex items-center gap-0.5 rounded-full bg-black/70 px-1.5 py-0.5 text-[10px] font-semibold leading-none text-white shadow-sm"
+                  aria-label={`Series, ${row.plans_count ?? 0} plans`}
+                >
+                  <LuLayers className="h-3 w-3 shrink-0" aria-hidden />
+                  {row.plans_count ?? 0}
+                </span>
+              ) : null}
+            </div>
+          </Pecha.TableCell>
+          <Pecha.TableCell>
+            {canOpenTitle ? (
+              <button
+                type="button"
+                className="text-left cursor-pointer"
+                onClick={() => navigate(titleHref)}
+              >
+                <div className="text-sm font-semibold">{row.title}</div>
+                <div className="mt-1.5 flex flex-wrap gap-1.5">
+                  {row.languages?.map((code: DashboardLanguageCode) => (
+                    <span key={`${row.id}-${code}`}>{languageChip(code)}</span>
+                  ))}
+                  {statusChip(row.status)}
+                  {row.kind === "plan" && (
+                    <span className="rounded-full bg-[#DEAD2D4D] px-2.5 py-0.5 text-xs font-medium text-[#020C1D] dark:bg-[#DEAD2D4D] dark:text-white">
+                      {daysLabel}
+                    </span>
+                  )}
+                </div>
+              </button>
+            ) : (
+              <div className="text-left">
+                <div className="text-sm font-semibold">{row.title}</div>
+                <div className="mt-1.5 flex flex-wrap gap-1.5">
+                  {row.languages?.map((code: DashboardLanguageCode) => (
+                    <span key={`${row.id}-${code}`}>{languageChip(code)}</span>
+                  ))}
+                  {statusChip(row.status)}
+                  {row.kind === "plan" && (
+                    <span className="rounded-full bg-[#DEAD2D4D] px-2.5 py-0.5 text-xs font-medium text-[#020C1D] dark:bg-[#DEAD2D4D] dark:text-white">
+                      {daysLabel}
+                    </span>
+                  )}
+                </div>
+              </div>
+            )}
+          </Pecha.TableCell>
+          <Pecha.TableCell className="text-sm text-center">
+            {row.enrolled}
+          </Pecha.TableCell>
+          <Pecha.TableCell className="text-sm text-center">
+            {modifiedDisplay}
+          </Pecha.TableCell>
+          <Pecha.TableCell className="text-center">
+            {canToggleFeatured && canFeature && !platformReadOnly ? (
+              <Pecha.Button
+                type="button"
+                variant="outline"
+                size="icon"
+                className={`${DASHBOARD_TABLE_ICON_BTN} disabled:bg-[#F3F4F6] disabled:hover:bg-[#F3F4F6] dark:disabled:bg-[#2a2a2a] dark:disabled:hover:bg-[#2a2a2a]`}
+                disabled={featuredDisabled}
+                aria-label={row.featured ? "Featured" : "Not featured"}
+                onClick={() => handleFeatured(row.id, row.kind, row.featured)}
+              >
+                <FeaturedStar
+                  featured={row.featured}
+                  disabled={featuredDisabled}
+                />
+              </Pecha.Button>
+            ) : (
+              <span
+                className={`${DASHBOARD_TABLE_ICON_BTN} cursor-default`}
+                aria-hidden
+              >
+                <FeaturedStar featured={row.featured} disabled />
+              </span>
+            )}
+          </Pecha.TableCell>
+          {showActionsColumn ? (
+            <Pecha.TableCell className="px-auto">
+              {row.kind === "plan" && isMockDashboardId(row.id) ? (
+                <Pecha.DropdownMenu>
+                  <Pecha.DropdownMenuTrigger asChild>
+                    <Pecha.Button
+                      variant="outline"
+                      size="icon"
+                      aria-label="Actions"
+                    >
+                      <BsThreeDotsVertical />
+                    </Pecha.Button>
+                  </Pecha.DropdownMenuTrigger>
+                  <Pecha.DropdownMenuContent
+                    align="end"
+                    className="[--radius:1rem]"
+                  >
+                    <Pecha.DropdownMenuItem disabled>
+                      Preview (mock)
+                    </Pecha.DropdownMenuItem>
+                  </Pecha.DropdownMenuContent>
+                </Pecha.DropdownMenu>
+              ) : (
+                <DropdownButton
+                  id={row.id}
+                  entityType={row.kind}
+                  currentStatus={row.status}
+                  triggerVariant="icon"
+                  triggerClassName={DASHBOARD_TABLE_ICON_BTN}
+                  platformRole={platformRole}
+                  groupRole={groupRole}
+                  sourceGroupId={row.group_id}
+                  contentTitle={row.title}
+                />
+              )}
+            </Pecha.TableCell>
+          ) : null}
+        </Pecha.TableRow>
+      );
+    });
+  };
+
+  return (
+    <Pecha.Table className="bg-white dark:bg-[#181818]">
+      <Pecha.TableHeader className="dark:bg-[#1d1d1f]">
+        <Pecha.TableRow className="font-dynamic">
+          <Pecha.TableHead className="w-[120px] font-bold">
+            {/* {t("studio.dashboard.cover_image")} */}
+          </Pecha.TableHead>
+          <Pecha.TableHead className="font-bold">
+            {t("studio.dashboard.title")}
+          </Pecha.TableHead>
+          <Pecha.TableHead className="w-[100px] font-bold text-center">
+            {t("studio.dashboard.plan_used")}
+          </Pecha.TableHead>
+          <Pecha.TableHead className="w-[130px] font-bold text-center">
+            Date Modified
+          </Pecha.TableHead>
+          <Pecha.TableHead className="w-[72px] font-bold text-center">
+            Featured
+          </Pecha.TableHead>
+          {showActionsColumn ? (
+            <Pecha.TableHead className="w-[100px] font-bold text-center">
+              {t("studio.dashboard.actions")}
+            </Pecha.TableHead>
+          ) : null}
+        </Pecha.TableRow>
+      </Pecha.TableHeader>
+      <Pecha.TableBody>{renderBody()}</Pecha.TableBody>
+    </Pecha.Table>
+  );
+}
diff --git a/src/components/routes/dashboard/dashboardApi.test.ts b/src/components/routes/dashboard/dashboardApi.test.ts
new file mode 100644
index 00000000..1b8b78a7
--- /dev/null
+++ b/src/components/routes/dashboard/dashboardApi.test.ts
@@ -0,0 +1,178 @@
+import { describe, expect, it } from "vitest";
+import {
+  displayDashboardItemTitle,
+  type DashboardApiItem,
+} from "./dashboardApi";
+import { fetchDashboardItems } from "./dashboardApi";
+import axiosInstance from "@/config/axios-config";
+import { vi } from "vitest";
+import { resolveDashboardItemImageUrl } from "./dashboardTable";
+
+describe("resolveDashboardItemImageUrl", () => {
+  it("uses medium from nested image object", () => {
+    expect(
+      resolveDashboardItemImageUrl({
+        image: {
+          medium: "https://example.com/medium.jpg",
+          original: "https://example.com/original.jpg",
+        },
+      }),
+    ).toBe("https://example.com/medium.jpg");
+  });
+
+  it("prefers image_url over nested image", () => {
+    expect(
+      resolveDashboardItemImageUrl({
+        image_url: "https://example.com/direct.jpg",
+        image: { medium: "https://example.com/medium.jpg" },
+      }),
+    ).toBe("https://example.com/direct.jpg");
+  });
+});
+
+describe("displayDashboardItemTitle", () => {
+  it("uses plan title for plan rows", () => {
+    const item: DashboardApiItem = {
+      id: "p1",
+      type: "plan",
+      title: "7-Day Mindfulness",
+      status: "PUBLISHED",
+      featured: false,
+      languages: ["EN"],
+      enrolled_count: 0,
+      created_at: "2026-01-01T00:00:00Z",
+    };
+    expect(displayDashboardItemTitle(item)).toBe("7-Day Mindfulness");
+  });
+
+  it("uses metadata title for the current UI locale", () => {
+    const item: DashboardApiItem = {
+      id: "s1",
+      type: "series",
+      metadata: [
+        {
+          id: "m1",
+          title: "Foundations of Meditation",
+          description: "Intro",
+          language: "EN",
+        },
+        {
+          id: "m2",
+          title: "བོད་སྐད་",
+          language: "BO",
+        },
+      ],
+      status: "DRAFT",
+      featured: true,
+      languages: ["EN", "BO"],
+      enrolled_count: 12,
+      plans_count: 3,
+      created_at: "2026-01-01T00:00:00Z",
+    };
+    expect(displayDashboardItemTitle(item, "bo-IN")).toBe("བོད་སྐད་");
+    expect(displayDashboardItemTitle(item, "en")).toBe(
+      "Foundations of Meditation",
+    );
+  });
+
+  it("uses EN metadata title for series when locale is omitted", () => {
+    const item: DashboardApiItem = {
+      id: "s1",
+      type: "series",
+      metadata: [
+        {
+          id: "m1",
+          title: "Foundations of Meditation",
+          description: "Intro",
+          language: "EN",
+        },
+        {
+          id: "m2",
+          title: "བོད་སྐད་",
+          language: "BO",
+        },
+      ],
+      status: "DRAFT",
+      featured: true,
+      languages: ["EN", "BO"],
+      enrolled_count: 12,
+      plans_count: 3,
+      created_at: "2026-01-01T00:00:00Z",
+    };
+    expect(displayDashboardItemTitle(item)).toBe("Foundations of Meditation");
+  });
+
+  it("falls back to the first metadata title when locale title is missing", () => {
+    const item: DashboardApiItem = {
+      id: "s1",
+      type: "series",
+      metadata: [
+        { id: "m1", title: "", language: "BO" },
+        { id: "m2", title: "Only ZH title", language: "ZH" },
+        { id: "m3", title: "English backup", language: "EN" },
+      ],
+      status: "DRAFT",
+      featured: false,
+      languages: ["BO", "ZH", "EN"],
+      enrolled_count: 0,
+      created_at: "2026-01-01T00:00:00Z",
+    };
+    expect(displayDashboardItemTitle(item, "bo-IN")).toBe("Only ZH title");
+  });
+
+  it("falls back when series has no metadata", () => {
+    const item: DashboardApiItem = {
+      id: "s1",
+      type: "series",
+      status: "DRAFT",
+      featured: false,
+      languages: ["EN"],
+      enrolled_count: 0,
+      created_at: "2026-01-01T00:00:00Z",
+    };
+    expect(displayDashboardItemTitle(item)).toBe("Untitled series");
+  });
+});
+
+describe("fetchDashboardItems", () => {
+  it("maps series title from metadata in table rows", async () => {
+    vi.spyOn(axiosInstance, "get").mockResolvedValue({
+      data: {
+        items: [
+          {
+            id: "series-1",
+            type: "series",
+            metadata: [
+              {
+                id: "meta-1",
+                title: "Test Series",
+                language: "EN",
+              },
+            ],
+            image: {
+              medium: "https://example.com/series-cover.jpg",
+            },
+            status: "PUBLISHED",
+            featured: false,
+            languages: ["EN"],
+            enrolled_count: 0,
+            plans_count: 2,
+            created_at: "2026-01-01T00:00:00Z",
+          },
+        ],
+        pagination: { page: 1, page_size: 10, total: 1, total_pages: 1 },
+      },
+    });
+
+    const result = await fetchDashboardItems({
+      tab: "series",
+      page: 1,
+    });
+
+    expect(result.rows[0]?.title).toBe("Test Series");
+    expect(result.rows[0]?.image_url).toBe(
+      "https://example.com/series-cover.jpg",
+    );
+    vi.restoreAllMocks();
+  });
+});
diff --git a/src/components/routes/dashboard/dashboardApi.ts b/src/components/routes/dashboard/dashboardApi.ts
new file mode 100644
index 00000000..571c0968
--- /dev/null
+++ b/src/components/routes/dashboard/dashboardApi.ts
@@ -0,0 +1,157 @@
+import axiosInstance from "@/config/axios-config";
+import { enrichDashboardRows } from "./enrichDashboardRows";
+import {
+  normalizeStatus,
+  parseDashboardLanguages,
+  pickSeriesTitle,
+  resolveDashboardItemImageUrl,
+  type DashboardImageVariants,
+  tolgeeLocaleToDashboardLanguage,
+  type DashboardTableRow,
+} from "./dashboardTable";
+
+/** Series rows omit `title` in JSON; titles live in `metadata`. */
+export function displayDashboardItemTitle(
+  item: DashboardApiItem,
+  localeLanguage?: string,
+): string {
+  if (item.type === "plan") {
+    return item.title?.trim() || "Untitled plan";
+  }
+  const preferredLanguage = tolgeeLocaleToDashboardLanguage(localeLanguage);
+  const fromMeta = pickSeriesTitle(
+    undefined,
+    item.metadata,
+    preferredLanguage ?? undefined,
+  );
+  return fromMeta === "Untitled" ? "Untitled series" : fromMeta;
+}
+
+function mapDashboardItemToTableRow(
+  item: DashboardApiItem,
+  localeLanguage?: string,
+): DashboardTableRow {
+  return {
+    kind: item.type,
+    id: String(item.id),
+    title: displayDashboardItemTitle(item, localeLanguage),
+    image_url: resolveDashboardItemImageUrl(item),
+    languages: parseDashboardLanguages(item.languages),
+    status: normalizeStatus(item.status),
+    total_days: item.total_days ?? 0,
+    enrolled: item.enrolled_count ?? 0,
+    modifiedAt: item.updated_at ?? item.created_at ?? null,
+    featured: !!item.featured,
+    group_id: item.group_id ?? null,
+    series_id: item.series_id ?? null,
+    ...(item.type === "series" && {
+      plans_count: item.plans_count ?? 0,
+    }),
+  };
+}
+
+export type DashboardTab = "all" | "plans" | "series";
+
+export interface DashboardSeriesMetadataDTO {
+  id: string;
+  title: string;
+  description?: string;
+  language: string;
+}
+
+export interface DashboardApiItem {
+  id: string;
+  type: "plan" | "series";
+  /** Plans only; omitted from JSON for series. */
+  title?: string;
+  metadata?: DashboardSeriesMetadataDTO[];
+  author_id?: string | null;
+  group_id?: string | null;
+  series_id?: string | null;
+  image_url?: string | null;
+  plan_image_url?: string | null;
+  image_key?: string | null;
+  image?: string | DashboardImageVariants | null;
+  status: string;
+  featured: boolean;
+  languages: string[];
+  enrolled_count: number;
+  plans_count?: number | null;
+  total_days?: number | null;
+  updated_at?: string | null;
+  created_at: string;
+}
+
+export interface DashboardPagination {
+  page: number;
+  page_size: number;
+  total: number;
+  total_pages: number;
+}
+
+export interface DashboardItemsResponse {
+  items: DashboardApiItem[];
+  pagination: DashboardPagination;
+}
+
+export interface FetchDashboardItemsParams {
+  tab: DashboardTab;
+  page: number;
+  pageSize?: number;
+  search?: string;
+  status?: string;
+  language?: string;
+  featured?: boolean;
+  group_id?: string;
+  /** Tolgee UI locale used to pick localized series titles from metadata. */
+  localeLanguage?: string;
+}
+
+export interface DashboardItemsResult {
+  rows: DashboardTableRow[];
+  pagination: DashboardPagination;
+}
+
+const DASHBOARD_ITEMS_PATH = "/api/v1/cms/dashboard/items";
+
+export const DASHBOARD_PAGE_SIZE = 10;
+
+export async function fetchDashboardItems(
+  params: FetchDashboardItemsParams,
+): Promise<DashboardItemsResult> {
+  const pageSize = params.pageSize ?? DASHBOARD_PAGE_SIZE;
+
+  const { data } = await axiosInstance.get<DashboardItemsResponse>(
+    DASHBOARD_ITEMS_PATH,
+    {
+      params: {
+        tab: params.tab,
+        page: params.page,
+        page_size: pageSize,
+        ...(params.search?.trim() && { search: params.search.trim() }),
+        ...(params.status && { status: params.status }),
+        ...(params.language && { language: params.language }),
+        ...(params.featured != null && { featured: params.featured }),
+        ...(params.group_id && { group_id: params.group_id }),
+      },
+    },
+  );
+  const items = data?.items ?? [];
+  const pagination = data?.pagination ?? {
+    page: params.page,
+    page_size: pageSize,
+    total: items.length,
+    total_pages: items.length > 0 ? 1 : 0,
+  };
+
+  const rows = await enrichDashboardRows(
+    items.map((item) =>
+      mapDashboardItemToTableRow(item, params.localeLanguage),
+    ),
+  );
+
+  return {
+    rows,
+    pagination,
+  };
+}
diff --git a/src/components/routes/dashboard/dashboardTable.ts b/src/components/routes/dashboard/dashboardTable.ts
new file mode 100644
index 00000000..a9e62576
--- /dev/null
+++ b/src/components/routes/dashboard/dashboardTable.ts
@@ -0,0 +1,256 @@
+import { LANGUAGE_CODE_ORDER } from "@/lib/languageCodes";
+import { formatDistanceToNow } from "date-fns";
+
+export type DashboardRowKind = "plan" | "series";
+
+/** Bordered square control for Featured and Actions columns. */
+export const DASHBOARD_TABLE_ICON_BTN =
+  "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-gray-200 bg-[#F3F4F6] shadow-none hover:bg-[#E8E8E8] disabled:cursor-not-allowed disabled:opacity-100 dark:border-[#313132] dark:bg-[#2a2a2a] dark:hover:bg-[#333]";
+
+export type DashboardLanguageCode = "EN" | "ZH" | "BO" | "HI" | "NE" | "MN";
+
+export interface DashboardTableRow {
+  kind: DashboardRowKind;
+  id: string;
+  title: string;
+  image_url: string;
+  languages: DashboardLanguageCode[];
+  status: string;
+  total_days: number;
+  enrolled: number;
+  modifiedAt: string | null;
+  dateModifiedLabel?: string;
+  featured: boolean;
+  plans_count?: number;
+  group_id?: string | null;
+  series_id?: string | null;
+}
+
+export type DashboardImageVariants = {
+  thumbnail?: string | null;
+  medium?: string | null;
+  original?: string | null;
+};
+
+export type DashboardItemImageFields = {
+  image_url?: string | null;
+  plan_image_url?: string | null;
+  image_key?: string | null;
+  image?: string | DashboardImageVariants | null;
+};
+
+/** Resolve a display URL from dashboard/list API image fields. */
+export function resolveDashboardItemImageUrl(
+  item: DashboardItemImageFields,
+): string {
+  const direct = item.image_url?.trim() || item.plan_image_url?.trim();
+  if (direct) return direct;
+
+  const image = item.image;
+  if (image && typeof image === "object") {
+    return (
+      image.medium?.trim() ||
+      image.thumbnail?.trim() ||
+      image.original?.trim() ||
+      ""
+    );
+  }
+  if (typeof image === "string" && image.trim()) return image.trim();
+
+  const key = item.image_key?.trim();
+  if (key && /^https?:\/\//i.test(key)) return key;
+
+  return "";
+}
+
+function normalizeOneLanguageCode(v: string): DashboardLanguageCode | null {
+  const u = v.trim().toUpperCase();
+  if (u === "EN" || u === "ZH" || u === "BO") return u;
+  return null;
+}
+
+export function parseDashboardLanguages(raw: unknown): DashboardLanguageCode[] {
+  const out: DashboardLanguageCode[] = [];
+  const push = (s: string) => {
+    const c = normalizeOneLanguageCode(s);
+    if (c && !out.includes(c)) out.push(c);
+  };
+  if (Array.isArray(raw)) {
+    for (const item of raw) push(String(item));
+  } else if (raw != null && String(raw).trim() !== "") {
+    push(String(raw));
+  }
+  return out;
+}
+
+export function formatRowModified(row: DashboardTableRow): string {
+  if (row.dateModifiedLabel) return row.dateModifiedLabel;
+  if (!row.modifiedAt) return "—";
+  const d = new Date(row.modifiedAt);
+  if (Number.isNaN(d.getTime())) return "—";
+  return formatDistanceToNow(d, { addSuffix: true });
+}
+
+function titleFromMetadataRow(row: Record<string, unknown>): string {
+  const title = row.title;
+  return typeof title === "string" && title.trim() ? title.trim() : "";
+}
+
+const DEFAULT_LANG_ORDER: DashboardLanguageCode[] = [...LANGUAGE_CODE_ORDER];
+
+/** Map Tolgee UI locale (e.g. `en`, `bo-IN`) to dashboard metadata language codes. */
+export function tolgeeLocaleToDashboardLanguage(
+  locale: string | undefined | null,
+): DashboardLanguageCode | null {
+  const l = (locale ?? "").trim().toLowerCase();
+  if (!l) return null;
+  if (l.startsWith("en")) return "EN";
+  if (l.startsWith("bo")) return "BO";
+  if (l.startsWith("zh")) return "ZH";
+  if (l.startsWith("hi")) return "HI";
+  if (l.startsWith("ne")) return "NE";
+  if (l.startsWith("mn")) return "MN";
+  return null;
+}
+
+function firstTitleFromMetadataRows(rows: Record<string, unknown>[]): string {
+  for (const row of rows) {
+    const t = titleFromMetadataRow(row);
+    if (t) return t;
+  }
+  return "";
+}
+
+function titleForMetadataLanguage(
+  rows: Record<string, unknown>[],
+  language: DashboardLanguageCode,
+): string {
+  const row = rows.find(
+    (r) => String(r.language ?? r.lang ?? "").toUpperCase() === language,
+  );
+  return row ? titleFromMetadataRow(row) : "";
+}
+
+export function pickSeriesTitle(
+  nameOrTitle: unknown,
+  metadata?: unknown,
+  preferredLanguage?: DashboardLanguageCode,
+): string {
+  if (Array.isArray(metadata) && metadata.length > 0) {
+    const rows = metadata as Record<string, unknown>[];
+
+    if (preferredLanguage) {
+      const preferredTitle = titleForMetadataLanguage(rows, preferredLanguage);
+      if (preferredTitle) return preferredTitle;
+      const fallback = firstTitleFromMetadataRows(rows);
+      if (fallback) return fallback;
+    } else {
+      for (const lang of DEFAULT_LANG_ORDER) {
+        const t = titleForMetadataLanguage(rows, lang);
+        if (t) return t;
+      }
+      const fallback = firstTitleFromMetadataRows(rows);
+      if (fallback) return fallback;
+    }
+  }
+  if (!nameOrTitle) return "Untitled";
+  if (typeof nameOrTitle === "string") return nameOrTitle || "Untitled";
+  if (typeof nameOrTitle === "object") {
+    const o = nameOrTitle as Record<string, unknown>;
+    const candidate =
+      o.en ||
+      o.EN ||
+      o.bo ||
+      o.BO ||
+      o.zh ||
+      o.ZH ||
+      Object.values(o).find((v) => typeof v === "string");
+    return (candidate as string) || "Untitled";
+  }
+  return "Untitled";
+}
+
+export function normalizeStatus(raw: unknown): string {
+  let s = String(raw ?? "DRAFT").trim();
+  if (s.includes(".")) s = (s.split(".").pop() ?? s).trim();
+  return s.toUpperCase();
+}
+
+export function mapPlanToTableRow(
+  plan: Record<string, unknown>,
+): DashboardTableRow {
+  const td = plan.total_days;
+  const days =
+    typeof td === "number" ? td : parseInt(String(td ?? "0"), 10) || 0;
+  const sub = plan.subscription_count ?? plan.subscriptionCount ?? "0";
+  const enrolled =
+    typeof sub === "number" ? sub : parseInt(String(sub), 10) || 0;
+  return {
+    kind: "plan",
+    id: String(plan.id ?? ""),
+    title: String(plan.title ?? "Untitled"),
+    image_url: resolveDashboardItemImageUrl({
+      image_url: plan.image_url as string | null | undefined,
+      plan_image_url: plan.plan_image_url as string | null | undefined,
+      image_key: plan.image_key as string | null | undefined,
+      image: plan.image as DashboardItemImageFields["image"],
+    }),
+    languages: parseDashboardLanguages(
+      plan.languages ?? plan.language ?? plan.language_codes,
+    ),
+    status: normalizeStatus(plan.status),
+    total_days: days,
+    enrolled,
+    modifiedAt:
+      (plan.updated_at as string) ??
+      (plan.updatedAt as string) ??
+      (plan.modified_at as string) ??
+      null,
+    featured: !!plan.featured,
+  };
+}
+
+export function mapSeriesToTableRow(
+  s: Record<string, unknown>,
+): DashboardTableRow {
+  const plans = Array.isArray(s.plans)
+    ? (s.plans as Record<string, unknown>[])
+    : [];
+  const firstLang = plans[0]?.language as string | undefined;
+  const title =
+    typeof s.title === "string" && s.title
+      ? s.title
+      : pickSeriesTitle(s.name, s.metadata);
+  const td = s.total_days ?? 0;
+  const days =
+    typeof td === "number" ? td : parseInt(String(td ?? "0"), 10) || 0;
+  const enrolledRaw = s.enrolled ?? 0;
+  const enrolled =
+    typeof enrolledRaw === "number"
+      ? enrolledRaw
+      : parseInt(String(enrolledRaw), 10) || 0;
+  return {
+    kind: "series",
+    id: String(s.id ?? ""),
+    title,
+    image_url: resolveDashboardItemImageUrl({
+      image_url: s.image_url as string | null | undefined,
+      image_key: s.image_key as string | null | undefined,
+      image: s.image as DashboardItemImageFields["image"],
+    }),
+    languages: parseDashboardLanguages(
+      s.languages ?? s.language ?? s.language_codes ?? firstLang,
+    ),
+    status: normalizeStatus(s.status),
+    total_days: days,
+    enrolled,
+    modifiedAt: (s.updated_at as string) ?? (s.updatedAt as string) ?? null,
+    featured: !!s.featured,
+    plans_count:
+      typeof s.plans_count === "number" ? s.plans_count : plans.length,
+  };
+}
+
+export function isMockDashboardId(id: string) {
+  return id.startsWith("mock-");
+}
diff --git a/src/components/routes/dashboard/dashboardTableUi.test.ts b/src/components/routes/dashboard/dashboardTableUi.test.ts
new file mode 100644
index 00000000..b2c1449b
--- /dev/null
+++ b/src/components/routes/dashboard/dashboardTableUi.test.ts
@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+import { languageChipLabel } from "./dashboardTableUi";
+
+describe("languageChipLabel", () => {
+  it("returns the native label for every supported plan language", () => {
+    expect(languageChipLabel("EN")).toBe("English");
+    expect(languageChipLabel("BO")).toBe("བོད་ཡིག");
+    expect(languageChipLabel("ZH")).toBe("中文");
+    expect(languageChipLabel("HI")).toBe("Hindi");
+    expect(languageChipLabel("NE")).toBe("Nepali");
+    expect(languageChipLabel("MN")).toBe("Mongolian");
+  });
+});
diff --git a/src/components/routes/dashboard/dashboardTableUi.tsx b/src/components/routes/dashboard/dashboardTableUi.tsx
new file mode 100644
index 00000000..fa18fcff
--- /dev/null
+++ b/src/components/routes/dashboard/dashboardTableUi.tsx
@@ -0,0 +1,74 @@
+import { FaStar } from "react-icons/fa";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+import type { DashboardLanguageCode } from "./dashboardTable";
+
+const LANGUAGE_CHIP_CLASS =
+  "rounded-full bg-[#F8F9FA] px-2.5 py-0.5 text-xs font-medium text-gray-900 ring-1 ring-gray-200 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-700";
+
+export function languageChipLabel(code: DashboardLanguageCode): string {
+  return PLAN_LANGUAGE.find((lang) => lang.value === code)?.label ?? code;
+}
+
+export function FeaturedStar({
+  featured,
+  disabled,
+}: {
+  featured: boolean;
+  disabled?: boolean;
+}) {
+  if (disabled) {
+    return (
+      <FaStar
+        className="h-3.5 w-3.5 fill-gray-300 text-gray-300 dark:fill-gray-600 dark:text-gray-600"
+        aria-hidden
+      />
+    );
+  }
+  if (featured) {
+    return (
+      <FaStar
+        className="h-3.5 w-3.5 fill-black text-black dark:fill-white dark:text-white"
+        aria-hidden
+      />
+    );
+  }
+  return (
+    <FaStar
+      className="h-3.5 w-3.5 fill-gray-400 text-gray-400 dark:fill-gray-500 dark:text-gray-500"
+      aria-hidden
+    />
+  );
+}
+
+export function statusChip(status: string) {
+  switch (status) {
+    case "PUBLISHED":
+      return (
+        <span className="rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-[#4BBE51] dark:bg-green-900/40 dark:text-green-200">
+          Published
+        </span>
+      );
+    case "UNPUBLISHED":
+      return (
+        <span className="rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800 dark:bg-red-900/40 dark:text-red-200">
+          Unpublished
+        </span>
+      );
+    case "ARCHIVED":
+      return (
+        <span className="rounded-full border border-gray-300 bg-white px-2.5 py-0.5 text-xs font-medium text-gray-900 dark:border-gray-600 dark:bg-transparent dark:text-gray-100">
+          Archived
+        </span>
+      );
+    default:
+      return (
+        <span className="rounded-full bg-[#E0EDFE] px-2.5 py-0.5 text-xs font-medium text-[#020C1D] dark:bg-blue-950/50 dark:text-white">
+          Draft
+        </span>
+      );
+  }
+}
+
+export function languageChip(code: DashboardLanguageCode) {
+  return <span className={LANGUAGE_CHIP_CLASS}>{languageChipLabel(code)}</span>;
+}
diff --git a/src/components/routes/dashboard/dashboardUrlState.test.ts b/src/components/routes/dashboard/dashboardUrlState.test.ts
new file mode 100644
index 00000000..83ed3b84
--- /dev/null
+++ b/src/components/routes/dashboard/dashboardUrlState.test.ts
@@ -0,0 +1,33 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildDashboardSearchParams,
+  dashboardUrlStateToFetchParams,
+  parseDashboardSearchParams,
+} from "./dashboardUrlState";
+
+describe("dashboardUrlState group filter", () => {
+  it("parses and builds group_id in URL", () => {
+    const params = new URLSearchParams();
+    params.set("group_id", "abc-123");
+    const state = parseDashboardSearchParams(params);
+    expect(state.groupId).toBe("abc-123");
+
+    const built = buildDashboardSearchParams(state);
+    expect(built.get("group_id")).toBe("abc-123");
+  });
+
+  it("passes group_id to dashboard fetch params", () => {
+    const fetchParams = dashboardUrlStateToFetchParams({
+      tab: "all",
+      page: 1,
+      pageSize: 10,
+      search: null,
+      status: null,
+      language: null,
+      featured: null,
+      sort: null,
+      groupId: "group-1",
+    });
+    expect(fetchParams.group_id).toBe("group-1");
+  });
+});
diff --git a/src/components/routes/dashboard/dashboardUrlState.ts b/src/components/routes/dashboard/dashboardUrlState.ts
new file mode 100644
index 00000000..9af0633b
--- /dev/null
+++ b/src/components/routes/dashboard/dashboardUrlState.ts
@@ -0,0 +1,157 @@
+import { normalizeLanguageCode } from "@/lib/languageCodes";
+import type { DashboardTab } from "./dashboardApi";
+import { DASHBOARD_PAGE_SIZE } from "./dashboardApi";
+import type { FetchDashboardItemsParams } from "./dashboardApi";
+
+export type DashboardPlanStatus =
+  | "DRAFT"
+  | "PUBLISHED"
+  | "UNPUBLISHED"
+  | "ARCHIVED"
+  | "DELETED";
+
+/** UI-only until backend supports dashboard sort query params. */
+export type DashboardSort = "recent";
+
+export interface DashboardUrlState {
+  tab: DashboardTab;
+  page: number;
+  pageSize: number;
+  search: string | null;
+  status: DashboardPlanStatus | null;
+  language: string | null;
+  featured: boolean | null;
+  sort: DashboardSort | null;
+  groupId: string | null;
+}
+
+export const DASHBOARD_URL_DEFAULTS: DashboardUrlState = {
+  tab: "all",
+  page: 1,
+  pageSize: DASHBOARD_PAGE_SIZE,
+  search: null,
+  status: null,
+  language: null,
+  featured: null,
+  sort: null,
+  groupId: null,
+};
+
+const VALID_TABS = new Set<DashboardTab>(["all", "series", "plans"]);
+
+const VALID_STATUS = new Set<DashboardPlanStatus>([
+  "DRAFT",
+  "PUBLISHED",
+  "UNPUBLISHED",
+  "ARCHIVED",
+  "DELETED",
+]);
+
+const VALID_SORT = new Set<DashboardSort>(["recent"]);
+
+function parseTab(raw: string | null): DashboardTab {
+  if (raw && VALID_TABS.has(raw as DashboardTab)) {
+    return raw as DashboardTab;
+  }
+  return DASHBOARD_URL_DEFAULTS.tab;
+}
+
+function parseStatus(raw: string | null): DashboardPlanStatus | null {
+  if (!raw) return null;
+  const u = raw.trim().toUpperCase();
+  return VALID_STATUS.has(u as DashboardPlanStatus)
+    ? (u as DashboardPlanStatus)
+    : null;
+}
+
+function parseLanguage(raw: string | null): string | null {
+  if (!raw) return null;
+  return normalizeLanguageCode(raw);
+}
+
+function parseSort(raw: string | null): DashboardSort | null {
+  if (!raw) return null;
+  return VALID_SORT.has(raw as DashboardSort) ? (raw as DashboardSort) : null;
+}
+
+function parsePositiveInt(
+  raw: string | null,
+  fallback: number,
+  min: number,
+  max?: number,
+): number {
+  const n = Number(raw ?? fallback);
+  if (!Number.isFinite(n)) return fallback;
+  const clamped = Math.max(min, Math.floor(n));
+  if (max != null) return Math.min(max, clamped);
+  return clamped;
+}
+
+export function parseDashboardSearchParams(
+  params: URLSearchParams,
+): DashboardUrlState {
+  const featuredRaw = params.get("featured");
+  const featured =
+    featuredRaw === "true" ? true : featuredRaw === "false" ? false : null;
+
+  const search = params.get("search")?.trim() || null;
+
+  return {
+    tab: parseTab(params.get("tab")),
+    page: parsePositiveInt(params.get("page"), DASHBOARD_URL_DEFAULTS.page, 1),
+    pageSize: parsePositiveInt(
+      params.get("page_size"),
+      DASHBOARD_URL_DEFAULTS.pageSize,
+      1,
+      100,
+    ),
+    search,
+    status: parseStatus(params.get("status")),
+    language: parseLanguage(params.get("language")),
+    featured,
+    sort: parseSort(params.get("sort")),
+    groupId: params.get("group_id")?.trim() || null,
+  };
+}
+
+export function buildDashboardSearchParams(
+  state: DashboardUrlState,
+): URLSearchParams {
+  const p = new URLSearchParams();
+  const d = DASHBOARD_URL_DEFAULTS;
+
+  if (state.tab !== d.tab) p.set("tab", state.tab);
+  if (state.page !== d.page) p.set("page", String(state.page));
+  if (state.pageSize !== d.pageSize) p.set("page_size", String(state.pageSize));
+  if (state.search) p.set("search", state.search);
+  if (state.status) p.set("status", state.status);
+  if (state.language) p.set("language", state.language);
+  if (state.featured !== null) p.set("featured", String(state.featured));
+  if (state.sort) p.set("sort", state.sort);
+  if (state.groupId) p.set("group_id", state.groupId);
+
+  return p;
+}
+
+export function dashboardUrlStateToFetchParams(
+  state: DashboardUrlState,
+): FetchDashboardItemsParams {
+  return {
+    tab: state.tab,
+    page: state.page,
+    pageSize: state.pageSize,
+    ...(state.search && { search: state.search }),
+    ...(state.status && { status: state.status }),
+    ...(state.language && { language: state.language }),
+    ...(state.featured != null && { featured: state.featured }),
+    ...(state.groupId && { group_id: state.groupId }),
+  };
+}
+
+/** Merge partial state; pass `page: 1` when filters change. */
+export function mergeDashboardUrlState(
+  current: DashboardUrlState,
+  patch: Partial<DashboardUrlState>,
+): DashboardUrlState {
+  return { ...current, ...patch };
+}
diff --git a/src/components/routes/dashboard/enrichDashboardRows.ts b/src/components/routes/dashboard/enrichDashboardRows.ts
new file mode 100644
index 00000000..e1dfb530
--- /dev/null
+++ b/src/components/routes/dashboard/enrichDashboardRows.ts
@@ -0,0 +1,42 @@
+import axiosInstance from "@/config/axios-config";
+import { getSeries } from "@/components/routes/create-series/api/seriesApi";
+import type { DashboardTableRow } from "./dashboardTable";
+
+type CmsPlanDetail = {
+  group_id?: string | null;
+  series_id?: string | null;
+};
+
+/** Dashboard list items may omit group_id; resolve from CMS detail endpoints. */
+export async function enrichDashboardRowWithGroupId(
+  row: DashboardTableRow,
+): Promise<DashboardTableRow> {
+  if (row.group_id) return row;
+
+  try {
+    if (row.kind === "plan") {
+      const { data } = await axiosInstance.get<CmsPlanDetail>(
+        `/api/v1/cms/plans/${row.id}`,
+      );
+      return {
+        ...row,
+        group_id: data.group_id ?? null,
+        series_id: data.series_id ?? row.series_id ?? null,
+      };
+    }
+
+    const series = await getSeries(row.id);
+    return {
+      ...row,
+      group_id: series.group_id ?? null,
+    };
+  } catch {
+    return row;
+  }
+}
+
+export async function enrichDashboardRows(
+  rows: DashboardTableRow[],
+): Promise<DashboardTableRow[]> {
+  return Promise.all(rows.map(enrichDashboardRowWithGroupId));
+}
diff --git a/src/components/routes/groups/GroupAboutEditPage.tsx b/src/components/routes/groups/GroupAboutEditPage.tsx
new file mode 100644
index 00000000..999d9305
--- /dev/null
+++ b/src/components/routes/groups/GroupAboutEditPage.tsx
@@ -0,0 +1,493 @@
+import { useEffect, useRef, useState } from "react";
+import { Link, Navigate, useOutletContext } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { IoMdAdd, IoMdClose } from "react-icons/io";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { Textarea } from "@/components/ui/atoms/textarea";
+import { Button } from "@/components/ui/atoms/button";
+import ImageContentData from "@/components/ui/molecules/modals/image-upload/ImageContentData";
+import { uploadImageToS3 } from "@/components/routes/task/api/taskApi";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+import { ROUTES } from "@/routes/paths";
+import type { LanguageCode } from "@/schema/SeriesSchema";
+import { groupCoreSchema, type GroupCoreFormData } from "@/schema/GroupSchema";
+import {
+  buildGroupMetadata,
+  languageLabelForCode,
+  patchGroup,
+  replaceGroupSocialLinks,
+  replaceGroupTags,
+  resolveGroupAvatarUrl,
+  resolveGroupBannerUrl,
+  type GroupSocialLinkDTO,
+  type TagSummaryDTO,
+} from "./api/groupsApi";
+import { canEditGroupSettings } from "./lib/groupPermissions";
+import { sameSocialLinks, sameSortedIds } from "./lib/groupFormSectionDirty";
+import GroupFormAssociationsPanel from "./components/GroupFormAssociationsPanel";
+import GroupImageField from "./components/GroupImageField";
+import type { GroupOutletContext } from "./GroupLayout";
+
+type AssociationBaselines = {
+  tagIds: string[];
+  socialLinks: GroupSocialLinkDTO[];
+  avatarKey: string | null;
+  bannerKey: string | null;
+};
+
+const GroupAboutEditPage = () => {
+  const { group, groupId, myRole, readOnlyPlatform } =
+    useOutletContext<GroupOutletContext>();
+  const queryClient = useQueryClient();
+  const hydratedRef = useRef<string | null>(null);
+
+  const canEdit = !readOnlyPlatform && canEditGroupSettings(myRole);
+
+  const [addedLanguages, setAddedLanguages] = useState<LanguageCode[]>(["EN"]);
+  const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
+  const [bannerPreview, setBannerPreview] = useState<string | null>(null);
+  const [avatarKey, setAvatarKey] = useState<string | null>(null);
+  const [bannerKey, setBannerKey] = useState<string | null>(null);
+  const [avatarDialogOpen, setAvatarDialogOpen] = useState(false);
+  const [bannerDialogOpen, setBannerDialogOpen] = useState(false);
+  const [avatarUploading, setAvatarUploading] = useState(false);
+  const [bannerUploading, setBannerUploading] = useState(false);
+  const [tagIds, setTagIds] = useState<string[]>([]);
+  const [initialTags, setInitialTags] = useState<TagSummaryDTO[]>([]);
+  const [socialLinks, setSocialLinks] = useState<GroupSocialLinkDTO[]>([]);
+  const [savedBaselines, setSavedBaselines] = useState<AssociationBaselines>({
+    tagIds: [],
+    socialLinks: [],
+    avatarKey: null,
+    bannerKey: null,
+  });
+
+  const form = useForm<GroupCoreFormData>({
+    resolver: zodResolver(groupCoreSchema),
+    defaultValues: {
+      slug: "",
+      group_type: "PAGE",
+      is_public: true,
+      languages: {
+        EN: { title: "", sub_title: "", description: "", description_long: "" },
+      },
+      avatar_key: "",
+      banner_key: "",
+    },
+  });
+
+  useEffect(() => {
+    if (hydratedRef.current === group.id) return;
+    hydratedRef.current = group.id;
+
+    const languages: GroupCoreFormData["languages"] = {};
+    const langs: LanguageCode[] = [];
+    for (const meta of group.metadata) {
+      const code = meta.language as LanguageCode;
+      langs.push(code);
+      languages[code] = {
+        title: meta.title ?? "",
+        sub_title: meta.sub_title ?? "",
+        description: meta.description ?? "",
+        description_long: meta.description_long ?? "",
+      };
+    }
+    setAddedLanguages(langs.length ? langs : ["EN"]);
+    form.reset({
+      slug: group.slug,
+      group_type: group.group_type ?? "PAGE",
+      is_public: group.is_public,
+      languages:
+        langs.length > 0
+          ? languages
+          : {
+              EN: {
+                title: "",
+                sub_title: "",
+                description: "",
+                description_long: "",
+              },
+            },
+      avatar_key: group.avatar_key ?? "",
+      banner_key: group.banner_key ?? "",
+    });
+
+    setAvatarKey(group.avatar_key ?? null);
+    setBannerKey(group.banner_key ?? null);
+    setAvatarPreview(resolveGroupAvatarUrl(group));
+    setBannerPreview(resolveGroupBannerUrl(group));
+    setTagIds(group.tags.map((t) => t.id));
+    setInitialTags(group.tags);
+    setSocialLinks(group.social_links ?? []);
+    setSavedBaselines({
+      tagIds: group.tags.map((t) => t.id),
+      socialLinks: group.social_links ?? [],
+      avatarKey: group.avatar_key ?? null,
+      bannerKey: group.banner_key ?? null,
+    });
+  }, [group, form]);
+
+  const invalidateGroup = () => {
+    queryClient.invalidateQueries({ queryKey: ["cms-groups"] });
+    queryClient.invalidateQueries({ queryKey: ["cms-group", groupId] });
+  };
+
+  const toastOnError = (err: unknown) => toast.error(getApiErrorMessage(err));
+
+  const patchMutation = useMutation({
+    mutationFn: (payload: Parameters<typeof patchGroup>[1]) =>
+      patchGroup(groupId, payload),
+    onSuccess: () => {
+      toast.success("Group updated");
+      invalidateGroup();
+      form.reset(form.getValues());
+      setSavedBaselines((prev) => ({
+        ...prev,
+        avatarKey,
+        bannerKey,
+      }));
+      hydratedRef.current = null;
+    },
+    onError: toastOnError,
+  });
+
+  const tagsMutation = useMutation({
+    mutationFn: () => replaceGroupTags(groupId, { tag_ids: tagIds }),
+    onSuccess: () => {
+      toast.success("Tags saved");
+      invalidateGroup();
+      setSavedBaselines((prev) => ({ ...prev, tagIds: [...tagIds] }));
+    },
+    onError: toastOnError,
+  });
+
+  const socialMutation = useMutation({
+    mutationFn: () =>
+      replaceGroupSocialLinks(groupId, { social_links: socialLinks }),
+    onSuccess: () => {
+      toast.success("Social links saved");
+      invalidateGroup();
+      setSavedBaselines((prev) => ({
+        ...prev,
+        socialLinks: [...socialLinks],
+      }));
+    },
+    onError: toastOnError,
+  });
+
+  if (!canEdit) {
+    return <Navigate to={ROUTES.group(groupId)} replace />;
+  }
+
+  const availableLanguages = PLAN_LANGUAGE.filter(
+    (l) => !addedLanguages.includes(l.value as LanguageCode),
+  );
+
+  const addLanguage = (code: LanguageCode) => {
+    if (addedLanguages.includes(code)) return;
+    setAddedLanguages((prev) => [...prev, code]);
+    form.setValue(
+      `languages.${code}`,
+      { title: "", sub_title: "", description: "", description_long: "" },
+      { shouldDirty: true },
+    );
+  };
+
+  const removeLanguage = (code: LanguageCode) => {
+    if (addedLanguages.length <= 1) {
+      toast.error("At least one language is required");
+      return;
+    }
+    setAddedLanguages((prev) => prev.filter((c) => c !== code));
+    form.unregister(`languages.${code}`);
+  };
+
+  const handleImageUpload = async (file: File, kind: "avatar" | "banner") => {
+    const setUploading =
+      kind === "avatar" ? setAvatarUploading : setBannerUploading;
+    const setPreview = kind === "avatar" ? setAvatarPreview : setBannerPreview;
+    const setKey = kind === "avatar" ? setAvatarKey : setBannerKey;
+    const setDialog =
+      kind === "avatar" ? setAvatarDialogOpen : setBannerDialogOpen;
+    const field = kind === "avatar" ? "avatar_key" : "banner_key";
+
+    setUploading(true);
+    try {
+      const { image, key } = await uploadImageToS3(file, groupId);
+      setPreview(image.original);
+      setKey(key);
+      form.setValue(field, key, { shouldDirty: true });
+      setDialog(false);
+      toast.success("Image uploaded");
+    } catch {
+      toast.error("Failed to upload image");
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const onSaveCore = form.handleSubmit((data) => {
+    const metadata = buildGroupMetadata(data.languages);
+    patchMutation.mutate({
+      slug: data.slug.trim(),
+      is_public: data.is_public,
+      metadata,
+      avatar_key: avatarKey,
+      banner_key: bannerKey,
+    });
+  });
+
+  const { isDirty: isFormDirty } = form.formState;
+  const imagesDirty =
+    avatarKey !== savedBaselines.avatarKey ||
+    bannerKey !== savedBaselines.bannerKey;
+  const isCoreDirty = isFormDirty || imagesDirty;
+  const tagsDirty = !sameSortedIds(tagIds, savedBaselines.tagIds);
+  const socialDirty = !sameSocialLinks(socialLinks, savedBaselines.socialLinks);
+
+  return (
+    <>
+      <div className="mb-4 flex items-center justify-between gap-3">
+        <h2 className="text-base font-bold">Edit about</h2>
+        <Button variant="outline" size="sm" asChild>
+          <Link to={ROUTES.group(groupId)}>Done</Link>
+        </Button>
+      </div>
+
+      <div className="flex flex-col xl:flex-row xl:items-start gap-8 xl:gap-0">
+        <div className="w-full xl:w-1/2 xl:min-w-0 xl:pr-8 xl:border-r border-border space-y-6">
+          <section className="space-y-6">
+            <h3 className="text-sm font-bold text-muted-foreground uppercase tracking-wide">
+              General
+            </h3>
+            <Pecha.Form {...form}>
+              <form onSubmit={onSaveCore} className="space-y-6">
+                <Pecha.FormField
+                  control={form.control}
+                  name="slug"
+                  render={({ field }) => (
+                    <Pecha.FormItem>
+                      <Pecha.FormLabel className="text-sm font-bold">
+                        Slug
+                        <span className="text-destructive"> *</span>
+                      </Pecha.FormLabel>
+                      <Pecha.FormControl>
+                        <Pecha.Input
+                          placeholder="bodhichitta-authors"
+                          className="font-mono h-12 bg-white dark:bg-[#262626]"
+                          {...field}
+                        />
+                      </Pecha.FormControl>
+                      <Pecha.FormMessage />
+                    </Pecha.FormItem>
+                  )}
+                />
+                <Pecha.FormField
+                  control={form.control}
+                  name="is_public"
+                  render={({ field }) => (
+                    <Pecha.FormItem className="flex items-center gap-3">
+                      <Pecha.FormControl>
+                        <Pecha.Checkbox
+                          checked={field.value}
+                          onCheckedChange={(checked) =>
+                            field.onChange(checked === true)
+                          }
+                        />
+                      </Pecha.FormControl>
+                      <Pecha.FormLabel className="text-sm font-bold !mt-0">
+                        Public group
+                      </Pecha.FormLabel>
+                    </Pecha.FormItem>
+                  )}
+                />
+                <div className="space-y-4">
+                  {addedLanguages.map((code) => (
+                    <div
+                      key={code}
+                      className="relative rounded-lg border border-input bg-[#FAFAFA] dark:bg-[#262626] p-4 space-y-3"
+                    >
+                      <button
+                        type="button"
+                        onClick={() => removeLanguage(code)}
+                        className="absolute top-2 right-2 text-muted-foreground hover:text-foreground p-1"
+                        aria-label={`Remove ${languageLabelForCode(code)}`}
+                      >
+                        <IoMdClose className="h-4 w-4" />
+                      </button>
+                      <Pecha.FormField
+                        control={form.control}
+                        name={`languages.${code}.title`}
+                        render={({ field }) => (
+                          <Pecha.FormItem>
+                            <Pecha.FormLabel className="text-sm font-bold">
+                              {languageLabelForCode(code)} title
+                              <span className="text-destructive"> *</span>
+                            </Pecha.FormLabel>
+                            <Pecha.FormControl>
+                              <Pecha.Input
+                                className="h-12 bg-white dark:bg-[#181818]"
+                                {...field}
+                              />
+                            </Pecha.FormControl>
+                            <Pecha.FormMessage />
+                          </Pecha.FormItem>
+                        )}
+                      />
+                      <Pecha.FormField
+                        control={form.control}
+                        name={`languages.${code}.sub_title`}
+                        render={({ field }) => (
+                          <Pecha.FormItem>
+                            <Pecha.FormLabel className="text-sm font-bold">
+                              {languageLabelForCode(code)} sub-title
+                              <span className="text-destructive"> *</span>
+                            </Pecha.FormLabel>
+                            <Pecha.FormControl>
+                              <Pecha.Input
+                                className="h-12 bg-white dark:bg-[#181818]"
+                                {...field}
+                              />
+                            </Pecha.FormControl>
+                            <Pecha.FormMessage />
+                          </Pecha.FormItem>
+                        )}
+                      />
+                      <Pecha.FormField
+                        control={form.control}
+                        name={`languages.${code}.description`}
+                        render={({ field }) => (
+                          <Pecha.FormItem>
+                            <Pecha.FormLabel className="text-sm font-bold">
+                              {languageLabelForCode(code)} description
+                              <span className="text-destructive"> *</span>
+                            </Pecha.FormLabel>
+                            <Pecha.FormControl>
+                              <Textarea
+                                className="min-h-[100px] resize-none bg-white dark:bg-[#181818]"
+                                maxLength={200}
+                                {...field}
+                              />
+                            </Pecha.FormControl>
+                            <Pecha.FormMessage />
+                          </Pecha.FormItem>
+                        )}
+                      />
+                      <Pecha.FormField
+                        control={form.control}
+                        name={`languages.${code}.description_long`}
+                        render={({ field }) => (
+                          <Pecha.FormItem>
+                            <Pecha.FormLabel className="text-sm font-bold">
+                              {languageLabelForCode(code)} long description
+                            </Pecha.FormLabel>
+                            <Pecha.FormControl>
+                              <Textarea
+                                className="min-h-[160px] resize-y bg-white dark:bg-[#181818]"
+                                placeholder="A longer description with more detail…"
+                                {...field}
+                              />
+                            </Pecha.FormControl>
+                            <Pecha.FormMessage />
+                          </Pecha.FormItem>
+                        )}
+                      />
+                    </div>
+                  ))}
+                </div>
+                {availableLanguages.length > 0 && (
+                  <Pecha.Select
+                    onValueChange={(v) => addLanguage(v as LanguageCode)}
+                  >
+                    <Pecha.SelectTrigger className="w-fit border-dashed bg-white dark:bg-[#262626]">
+                      <div className="flex items-center gap-2 text-muted-foreground">
+                        <IoMdAdd className="h-4 w-4" />
+                        <Pecha.SelectValue placeholder="Add language" />
+                      </div>
+                    </Pecha.SelectTrigger>
+                    <Pecha.SelectContent>
+                      {availableLanguages.map((lang) => (
+                        <Pecha.SelectItem key={lang.value} value={lang.value}>
+                          {lang.label}
+                        </Pecha.SelectItem>
+                      ))}
+                    </Pecha.SelectContent>
+                  </Pecha.Select>
+                )}
+                <div className="grid sm:grid-cols-2 gap-6">
+                  <GroupImageField
+                    label="Avatar"
+                    displayUrl={avatarPreview}
+                    hasStoredImage={Boolean(avatarKey)}
+                    onUploadClick={() => setAvatarDialogOpen(true)}
+                    imageClassName="w-20 h-20 rounded-full object-cover border"
+                  />
+                  <GroupImageField
+                    label="Banner"
+                    displayUrl={bannerPreview}
+                    hasStoredImage={Boolean(bannerKey)}
+                    onUploadClick={() => setBannerDialogOpen(true)}
+                    imageClassName="w-full max-w-xs h-24 rounded object-cover border"
+                  />
+                </div>
+                <div className="flex justify-end pt-2">
+                  <Button
+                    type="submit"
+                    className="bg-[#A51C21] text-white hover:bg-[#A51C21]/90"
+                    disabled={patchMutation.isPending || !isCoreDirty}
+                  >
+                    {patchMutation.isPending ? "Saving…" : "Save general"}
+                  </Button>
+                </div>
+              </form>
+            </Pecha.Form>
+          </section>
+        </div>
+
+        <GroupFormAssociationsPanel
+          tagIds={tagIds}
+          onTagIdsChange={setTagIds}
+          initialTags={initialTags}
+          socialLinks={socialLinks}
+          onSocialLinksChange={setSocialLinks}
+          onSaveTags={() => tagsMutation.mutate()}
+          onSaveSocial={() => socialMutation.mutate()}
+          tagsSaving={tagsMutation.isPending}
+          socialSaving={socialMutation.isPending}
+          tagsSaveDisabled={!tagsDirty}
+          socialSaveDisabled={!socialDirty}
+        />
+      </div>
+
+      <Pecha.Dialog open={avatarDialogOpen} onOpenChange={setAvatarDialogOpen}>
+        <Pecha.DialogContent>
+          <Pecha.DialogHeader>
+            <Pecha.DialogTitle>Upload avatar</Pecha.DialogTitle>
+          </Pecha.DialogHeader>
+          <ImageContentData
+            onUpload={(file) => handleImageUpload(file, "avatar")}
+            isLoading={avatarUploading}
+          />
+        </Pecha.DialogContent>
+      </Pecha.Dialog>
+
+      <Pecha.Dialog open={bannerDialogOpen} onOpenChange={setBannerDialogOpen}>
+        <Pecha.DialogContent>
+          <Pecha.DialogHeader>
+            <Pecha.DialogTitle>Upload banner</Pecha.DialogTitle>
+          </Pecha.DialogHeader>
+          <ImageContentData
+            onUpload={(file) => handleImageUpload(file, "banner")}
+            isLoading={bannerUploading}
+          />
+        </Pecha.DialogContent>
+      </Pecha.Dialog>
+    </>
+  );
+};
+
+export default GroupAboutEditPage;
diff --git a/src/components/routes/groups/GroupAboutPage.tsx b/src/components/routes/groups/GroupAboutPage.tsx
new file mode 100644
index 00000000..5ded2a41
--- /dev/null
+++ b/src/components/routes/groups/GroupAboutPage.tsx
@@ -0,0 +1,120 @@
+import { Link, useOutletContext } from "react-router-dom";
+import { IoMdCreate } from "react-icons/io";
+import { Pecha } from "@/components/ui/shadimport";
+import { Button } from "@/components/ui/atoms/button";
+import type { LanguageCode } from "@/schema/SeriesSchema";
+import { ROUTES } from "@/routes/paths";
+import { languageLabelForCode, resolveGroupBannerUrl } from "./api/groupsApi";
+import { canEditGroupSettings } from "./lib/groupPermissions";
+import { GroupDetailCard } from "./components/GroupSection";
+import type { GroupOutletContext } from "./GroupLayout";
+
+const GroupAboutPage = () => {
+  const { group, groupId, myRole, readOnlyPlatform } =
+    useOutletContext<GroupOutletContext>();
+  const bannerUrl = resolveGroupBannerUrl(group);
+  const memberCount = group.member_count ?? group.members.length;
+  const canEdit = !readOnlyPlatform && canEditGroupSettings(myRole);
+
+  return (
+    <div className="space-y-6">
+      {canEdit ? (
+        <div className="flex justify-end">
+          <Button variant="outline" size="sm" asChild>
+            <Link to={ROUTES.groupEdit(groupId)}>
+              <IoMdCreate className="w-4 h-4" /> Edit about
+            </Link>
+          </Button>
+        </div>
+      ) : null}
+
+      {bannerUrl ? (
+        <img
+          src={bannerUrl}
+          alt=""
+          className="w-full max-h-48 object-cover rounded-lg border"
+        />
+      ) : null}
+
+      <div className="flex flex-wrap gap-4 text-sm">
+        <Pecha.Badge variant="outline">
+          {group.is_public ? "Public" : "Private"}
+        </Pecha.Badge>
+        <span className="text-muted-foreground">
+          {memberCount} member{memberCount === 1 ? "" : "s"}
+        </span>
+        <span className="text-muted-foreground">
+          {group.follower_count} follower
+          {group.follower_count === 1 ? "" : "s"}
+        </span>
+      </div>
+
+      {group.metadata.length > 0 ? (
+        <GroupDetailCard title="About">
+          <div className="space-y-4">
+            {group.metadata.map((meta) => (
+              <div
+                key={meta.id ?? `${meta.language}-${meta.title}`}
+                className="space-y-1"
+              >
+                <p className="text-xs font-semibold uppercase text-muted-foreground">
+                  {languageLabelForCode(meta.language as LanguageCode)}
+                </p>
+                <p className="font-medium">{meta.title}</p>
+                {meta.sub_title?.trim() ? (
+                  <p className="text-sm text-muted-foreground">
+                    {meta.sub_title}
+                  </p>
+                ) : null}
+                {meta.description?.trim() ? (
+                  <p className="text-sm text-muted-foreground whitespace-pre-wrap">
+                    {meta.description}
+                  </p>
+                ) : null}
+                {meta.description_long?.trim() ? (
+                  <p className="text-sm text-muted-foreground whitespace-pre-wrap">
+                    {meta.description_long}
+                  </p>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        </GroupDetailCard>
+      ) : null}
+
+      {group.tags.length > 0 ? (
+        <GroupDetailCard title="Tags">
+          <div className="flex flex-wrap gap-2">
+            {group.tags.map((tag) => (
+              <Pecha.Badge key={tag.id} variant="secondary">
+                {tag.name}
+              </Pecha.Badge>
+            ))}
+          </div>
+        </GroupDetailCard>
+      ) : null}
+
+      {group.social_links.length > 0 ? (
+        <GroupDetailCard title="Social links">
+          <ul className="space-y-2">
+            {group.social_links.map((link, index) => (
+              <li key={`${link.platform}-${index}`} className="text-sm">
+                <span className="font-medium capitalize">{link.platform}:</span>{" "}
+                <a
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-[#A51C21] hover:underline break-all"
+                >
+                  {link.url}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </GroupDetailCard>
+      ) : null}
+    </div>
+  );
+};
+
+export default GroupAboutPage;
diff --git a/src/components/routes/groups/GroupContentPage.tsx b/src/components/routes/groups/GroupContentPage.tsx
new file mode 100644
index 00000000..d3f8cadb
--- /dev/null
+++ b/src/components/routes/groups/GroupContentPage.tsx
@@ -0,0 +1,25 @@
+import { useOutletContext } from "react-router-dom";
+import GroupContentSection from "./components/GroupContentSection";
+import GroupAccumulatorsPanel from "./components/GroupAccumulatorsPanel";
+import type { GroupOutletContext } from "./GroupLayout";
+
+const GroupContentPage = () => {
+  const { groupId, userInfo, myRole, readOnlyPlatform } =
+    useOutletContext<GroupOutletContext>();
+
+  return (
+    <div className="space-y-10">
+      <GroupContentSection
+        groupId={groupId}
+        userInfo={userInfo}
+        groupRole={myRole}
+        readOnlyPlatform={readOnlyPlatform}
+      />
+      {!readOnlyPlatform ? (
+        <GroupAccumulatorsPanel groupId={groupId} groupRole={myRole} />
+      ) : null}
+    </div>
+  );
+};
+
+export default GroupContentPage;
diff --git a/src/components/routes/groups/GroupEventDetailPage.tsx b/src/components/routes/groups/GroupEventDetailPage.tsx
new file mode 100644
index 00000000..6d01a900
--- /dev/null
+++ b/src/components/routes/groups/GroupEventDetailPage.tsx
@@ -0,0 +1,263 @@
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate, useOutletContext, useParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { format } from "date-fns";
+import { IoCalendarClearOutline } from "react-icons/io5";
+import { LuBookOpen, LuCircleDot } from "react-icons/lu";
+import { Pecha } from "@/components/ui/shadimport";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import { cn, fromBackendISO } from "@/lib/utils";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+import { ROUTES } from "@/routes/paths";
+import type { GroupOutletContext } from "./GroupLayout";
+import { canWriteEvents } from "./lib/eventPermissions";
+import {
+  fetchCmsEvent,
+  metadataArray,
+  resolveLinkedAccumulator,
+  resolveLinkedPlan,
+  type EventDTO,
+  type EventMetadataDTO,
+  type ImageUrlModel,
+} from "./api/eventsApi";
+
+const languageLabel = (code: string) =>
+  PLAN_LANGUAGE.find((l) => l.value === code.toUpperCase())?.label ?? code;
+
+const formatDate = (iso: string) => {
+  if (!iso) return "—";
+  try {
+    return format(fromBackendISO(iso), "EEE, MMM d, yyyy");
+  } catch {
+    return iso.slice(0, 10);
+  }
+};
+
+const formatDateRange = (event: EventDTO): string => {
+  const start = formatDate(event.start_date);
+  if (event.is_one_day || event.start_date === event.end_date) return start;
+  return `${start} – ${formatDate(event.end_date)}`;
+};
+
+const resolveHeroImage = (event: EventDTO): string | null => {
+  const image = event.image as ImageUrlModel | undefined;
+  if (image?.original) return image.original;
+  if (image?.medium) return image.medium;
+  if (event.image_url && /^https?:\/\//i.test(event.image_url)) {
+    return event.image_url;
+  }
+  return null;
+};
+
+const pickDefault = (rows: EventMetadataDTO[]): EventMetadataDTO | undefined =>
+  rows.find((r) => r.language.toUpperCase() === "EN") ?? rows[0];
+
+const GroupEventDetailPage = () => {
+  const { groupId, eventId } = useParams<{
+    groupId: string;
+    eventId: string;
+  }>();
+  const navigate = useNavigate();
+  const { myRole, userInfo, readOnlyPlatform } =
+    useOutletContext<GroupOutletContext>();
+
+  const canWrite =
+    !readOnlyPlatform && canWriteEvents(myRole, userInfo?.platform_role);
+
+  const { data, isLoading, isError, error } = useQuery({
+    queryKey: ["cms-event", eventId],
+    queryFn: () => fetchCmsEvent(eventId ?? ""),
+    enabled: Boolean(eventId),
+    refetchOnWindowFocus: false,
+  });
+
+  const rows = useMemo(
+    () => (data ? metadataArray(data.metadata) : []),
+    [data],
+  );
+
+  const [activeLang, setActiveLang] = useState<string | null>(null);
+  useEffect(() => {
+    setActiveLang(pickDefault(rows)?.language ?? null);
+  }, [rows]);
+
+  const [linkTitles, setLinkTitles] = useState<Record<string, string>>({});
+  const planId = data?.plan_id;
+  const accumulatorId = data?.accumulator_id;
+
+  useEffect(() => {
+    let active = true;
+    const setTitle = (key: string, title: string) =>
+      active && setLinkTitles((prev) => ({ ...prev, [key]: title }));
+    if (planId)
+      resolveLinkedPlan(planId).then((o) => setTitle("plan", o.title));
+    if (accumulatorId) {
+      resolveLinkedAccumulator(accumulatorId).then((o) =>
+        setTitle("accumulator", o.title),
+      );
+    }
+    return () => {
+      active = false;
+    };
+  }, [planId, accumulatorId]);
+
+  const eventsListPath = groupId ? ROUTES.groupEvents(groupId) : ROUTES.groups;
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-[40vh] items-center justify-center text-muted-foreground">
+        Loading event…
+      </div>
+    );
+  }
+
+  if (isError || !data) {
+    return (
+      <div className="flex min-h-[40vh] flex-col items-center justify-center gap-4">
+        <p className="text-center text-destructive">
+          {getApiErrorMessage(error, "Could not load this event.")}
+        </p>
+        <Pecha.Button
+          variant="outline"
+          onClick={() => navigate(eventsListPath)}
+        >
+          Back to events
+        </Pecha.Button>
+      </div>
+    );
+  }
+
+  const heroImage = resolveHeroImage(data);
+  const active =
+    rows.find((r) => r.language === activeLang) ?? pickDefault(rows);
+  const title = active?.name?.trim() || "Untitled event";
+  const description = active?.description?.trim();
+
+  const links = [
+    { id: planId, key: "plan", label: "Plan", Icon: LuBookOpen },
+    {
+      id: accumulatorId,
+      key: "accumulator",
+      label: "Accumulator",
+      Icon: LuCircleDot,
+    },
+  ].filter((link) => Boolean(link.id));
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-6">
+      <div className="flex items-center justify-between">
+        <button
+          type="button"
+          onClick={() => navigate(eventsListPath)}
+          className="text-sm text-muted-foreground hover:text-foreground"
+        >
+          ← Events
+        </button>
+        {canWrite ? (
+          <Pecha.Button
+            variant="outline"
+            size="sm"
+            onClick={() =>
+              navigate(ROUTES.groupEventEdit(groupId ?? "", data.id))
+            }
+          >
+            Edit
+          </Pecha.Button>
+        ) : null}
+      </div>
+
+      <div className="overflow-hidden rounded-2xl border bg-card">
+        {heroImage ? (
+          <div className="relative aspect-[16/9] w-full">
+            <img
+              src={heroImage}
+              alt={title}
+              className="h-full w-full object-cover"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent" />
+            <div className="absolute inset-x-0 bottom-0 p-5">
+              <h1 className="text-2xl font-bold text-white drop-shadow">
+                {title}
+              </h1>
+            </div>
+          </div>
+        ) : (
+          <div className="p-5">
+            <h1 className="text-2xl font-bold">{title}</h1>
+          </div>
+        )}
+
+        <div className="flex flex-wrap items-center gap-2 px-5 py-4 text-sm text-muted-foreground">
+          <IoCalendarClearOutline className="h-4 w-4" />
+          <span className="text-foreground">{formatDateRange(data)}</span>
+          {data.is_one_day ? (
+            <Pecha.Badge variant="secondary" className="ml-1">
+              One-day event
+            </Pecha.Badge>
+          ) : null}
+        </div>
+      </div>
+
+      {rows.length > 1 ? (
+        <div className="flex flex-wrap gap-2">
+          {rows.map((row) => (
+            <button
+              key={row.id}
+              type="button"
+              onClick={() => setActiveLang(row.language)}
+              className={cn(
+                "rounded-full border px-3 py-1 text-sm transition-colors",
+                row.language === active?.language
+                  ? "border-[#A51C21] bg-[#A51C21]/10 text-foreground"
+                  : "border-input text-muted-foreground hover:text-foreground",
+              )}
+            >
+              {languageLabel(row.language)}
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      <div className="space-y-2">
+        <h2 className="text-sm font-semibold text-muted-foreground">
+          Description
+        </h2>
+        {description ? (
+          <p className="whitespace-pre-line leading-relaxed">{description}</p>
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            No description for {languageLabel(active?.language ?? "EN")}.
+          </p>
+        )}
+      </div>
+
+      {links.length > 0 && (
+        <div className="space-y-3">
+          <h2 className="text-sm font-semibold text-muted-foreground">
+            Linked content
+          </h2>
+          <div className="space-y-2">
+            {links.map(({ key, label, Icon }) => (
+              <div
+                key={key}
+                className="flex items-center gap-3 rounded-lg border bg-card p-3"
+              >
+                <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted">
+                  <Icon className="h-4 w-4 text-muted-foreground" />
+                </span>
+                <div className="min-w-0">
+                  <p className="text-xs text-muted-foreground">{label}</p>
+                  <p className="truncate font-medium">
+                    {linkTitles[key] ?? `Linked ${label.toLowerCase()}`}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GroupEventDetailPage;
diff --git a/src/components/routes/groups/GroupEventFormPage.tsx b/src/components/routes/groups/GroupEventFormPage.tsx
new file mode 100644
index 00000000..0f7fd7b7
--- /dev/null
+++ b/src/components/routes/groups/GroupEventFormPage.tsx
@@ -0,0 +1,259 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate, useOutletContext, useParams } from "react-router-dom";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import { ROUTES } from "@/routes/paths";
+import type { GroupOutletContext } from "./GroupLayout";
+import { useEventForm } from "./hooks/useEventForm";
+import { useEventImage } from "./hooks/useEventImage";
+import { canWriteEvents } from "./lib/eventPermissions";
+import {
+  buildCreateEventBody,
+  buildUpdateEventBody,
+  createCmsEvent,
+  fetchCmsEvent,
+  mapEventToFormData,
+  resolveLinkedAccumulator,
+  resolveLinkedPlan,
+  updateCmsEvent,
+  type EventDTO,
+  type ImageUrlModel,
+} from "./api/eventsApi";
+import type { FkOption } from "./components/FkMultiSearchSelector";
+import EventMetadataRows from "./components/events/EventMetadataRows";
+import EventDateSection from "./components/events/EventDateSection";
+import EventLinksSection from "./components/events/EventLinksSection";
+import EventImageField from "./components/events/EventImageField";
+import type { EventFormData } from "@/schema/EventSchema";
+
+function resolveEventImageUrl(event: EventDTO): string | null {
+  const image = event.image as ImageUrlModel | undefined;
+  if (image?.original) return image.original;
+  if (image?.medium) return image.medium;
+  if (event.image_url && /^https?:\/\//i.test(event.image_url)) {
+    return event.image_url;
+  }
+  return null;
+}
+
+const GroupEventFormPage = () => {
+  const { groupId, eventId } = useParams<{
+    groupId: string;
+    eventId?: string;
+  }>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { myRole, userInfo, readOnlyPlatform } =
+    useOutletContext<GroupOutletContext>();
+
+  const isNew = !eventId;
+  const canWrite =
+    !readOnlyPlatform && canWriteEvents(myRole, userInfo?.platform_role);
+  const readOnly = !canWrite;
+
+  const {
+    form,
+    metadataRows,
+    usedLanguages,
+    availableLanguages,
+    addMetadataRow,
+    removeMetadataRow,
+    setImageUrl,
+    setOneDay,
+    setStartDate,
+    setEndDate,
+  } = useEventForm();
+
+  const image = useEventImage({ setImageUrl });
+  const { setImagePreview, setSelectedImage } = image;
+
+  const [planValue, setPlanValue] = useState<FkOption | null>(null);
+  const [accumulatorValue, setAccumulatorValue] = useState<FkOption | null>(
+    null,
+  );
+
+  const eventQuery = useQuery({
+    queryKey: ["cms-event", eventId],
+    queryFn: () => fetchCmsEvent(eventId ?? ""),
+    enabled: Boolean(eventId) && !isNew,
+    refetchOnWindowFocus: false,
+  });
+  const eventData = eventQuery.data;
+
+  const originalRef = useRef<EventFormData | null>(null);
+  const hydratedIdRef = useRef<string | null>(null);
+  useEffect(() => {
+    hydratedIdRef.current = null;
+  }, [eventId]);
+
+  useEffect(() => {
+    if (isNew || !eventData) return;
+    if (hydratedIdRef.current === eventData.id) return;
+    hydratedIdRef.current = eventData.id;
+    const formData = mapEventToFormData(eventData);
+    originalRef.current = formData;
+    form.reset(formData);
+    setImagePreview(resolveEventImageUrl(eventData));
+    setSelectedImage(null);
+
+    if (formData.plan_id) {
+      resolveLinkedPlan(formData.plan_id).then(setPlanValue);
+    } else {
+      setPlanValue(null);
+    }
+    if (formData.accumulator_id) {
+      resolveLinkedAccumulator(formData.accumulator_id).then(
+        setAccumulatorValue,
+      );
+    } else {
+      setAccumulatorValue(null);
+    }
+  }, [isNew, eventData, form, setImagePreview, setSelectedImage]);
+
+  const eventsListPath = groupId ? ROUTES.groupEvents(groupId) : ROUTES.groups;
+
+  const mutation = useMutation({
+    mutationFn: async (data: EventFormData) => {
+      if (isNew) {
+        return createCmsEvent(buildCreateEventBody(data, groupId ?? ""));
+      }
+      const original = originalRef.current ?? mapEventToFormData(eventData!);
+      return updateCmsEvent(
+        eventId ?? "",
+        buildUpdateEventBody(data, original),
+      );
+    },
+    onSuccess: () => {
+      toast.success(isNew ? "Event created" : "Event updated");
+      queryClient.invalidateQueries({ queryKey: ["cms-events", groupId] });
+      if (eventId) {
+        queryClient.invalidateQueries({ queryKey: ["cms-event", eventId] });
+      }
+      navigate(eventsListPath);
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const onSubmit = form.handleSubmit((data) => {
+    if (readOnly) return;
+    mutation.mutate(data);
+  });
+
+  if (!isNew && eventQuery.isLoading) {
+    return (
+      <div className="flex min-h-[40vh] items-center justify-center text-muted-foreground">
+        Loading event…
+      </div>
+    );
+  }
+
+  if (!isNew && eventQuery.isError) {
+    return (
+      <div className="flex min-h-[40vh] flex-col items-center justify-center gap-4">
+        <p className="text-center text-destructive">
+          {getApiErrorMessage(eventQuery.error, "Could not load this event.")}
+        </p>
+        <Pecha.Button
+          variant="outline"
+          onClick={() => navigate(eventsListPath)}
+        >
+          Back to events
+        </Pecha.Button>
+      </div>
+    );
+  }
+
+  const isOneDay = form.watch("is_one_day");
+
+  const getSaveLabel = () => {
+    if (mutation.isPending) return isNew ? "Creating…" : "Saving…";
+    return isNew ? "Create event" : "Save changes";
+  };
+
+  const saveDisabled =
+    readOnly || mutation.isPending || (!isNew && !form.formState.isDirty);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl font-bold">
+          {isNew ? "New event" : "Edit event"}
+        </h1>
+      </div>
+
+      {readOnly ? (
+        <p className="text-sm text-muted-foreground">
+          You do not have permission to {isNew ? "create" : "edit"} events in
+          this group.
+        </p>
+      ) : null}
+
+      <Pecha.Form {...form}>
+        <form onSubmit={onSubmit} className="space-y-8">
+          <EventDateSection
+            form={form}
+            isOneDay={isOneDay}
+            readOnly={readOnly}
+            onStartChange={setStartDate}
+            onEndChange={setEndDate}
+            onOneDayChange={setOneDay}
+          />
+
+          <EventMetadataRows
+            form={form}
+            fields={metadataRows.fields}
+            usedLanguages={usedLanguages}
+            canAddLanguage={availableLanguages.length > 0}
+            readOnly={readOnly}
+            onAdd={addMetadataRow}
+            onRemove={removeMetadataRow}
+          />
+
+          <EventLinksSection
+            form={form}
+            readOnly={readOnly}
+            planValue={planValue}
+            accumulatorValue={accumulatorValue}
+            onPlanChange={setPlanValue}
+            onAccumulatorChange={setAccumulatorValue}
+          />
+
+          <EventImageField
+            imagePreview={image.imagePreview}
+            selectedImage={image.selectedImage}
+            isDialogOpen={image.isImageDialogOpen}
+            isUploading={image.isImageUploading}
+            readOnly={readOnly}
+            onOpenDialog={image.openImageDialog}
+            onDialogOpenChange={image.setImageDialogOpen}
+            onUpload={image.uploadImage}
+            onRemove={image.removeImage}
+          />
+
+          <div className="flex justify-end gap-3 border-t border-dashed border-border pt-6">
+            <Pecha.Button
+              type="button"
+              variant="outline"
+              onClick={() => navigate(eventsListPath)}
+            >
+              Cancel
+            </Pecha.Button>
+            {!readOnly ? (
+              <Pecha.Button
+                type="submit"
+                disabled={saveDisabled}
+                className="bg-[#A51C21] font-medium text-white hover:bg-[#A51C21]/90 disabled:opacity-50"
+              >
+                {getSaveLabel()}
+              </Pecha.Button>
+            ) : null}
+          </div>
+        </form>
+      </Pecha.Form>
+    </div>
+  );
+};
+
+export default GroupEventFormPage;
diff --git a/src/components/routes/groups/GroupEventsPage.tsx b/src/components/routes/groups/GroupEventsPage.tsx
new file mode 100644
index 00000000..0c1aa3cc
--- /dev/null
+++ b/src/components/routes/groups/GroupEventsPage.tsx
@@ -0,0 +1,251 @@
+import { useMemo, useState } from "react";
+import { Link, useNavigate, useOutletContext } from "react-router-dom";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { IoMdAdd, IoMdTrash } from "react-icons/io";
+import { format } from "date-fns";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { Pagination } from "@/components/ui/molecules/pagination/Pagination";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import { fromBackendISO } from "@/lib/utils";
+import { ROUTES } from "@/routes/paths";
+import type { GroupOutletContext } from "./GroupLayout";
+import { canWriteEvents } from "./lib/eventPermissions";
+import {
+  deleteCmsEvent,
+  eventName,
+  fetchCmsEvents,
+  type EventDTO,
+} from "./api/eventsApi";
+
+const PAGE_SIZE = 20;
+
+const formatEventDate = (iso: string): string => {
+  if (!iso) return "—";
+  try {
+    return format(fromBackendISO(iso), "MMM d, yyyy");
+  } catch {
+    return iso.slice(0, 10);
+  }
+};
+
+const formatEventRange = (event: EventDTO): string => {
+  const start = formatEventDate(event.start_date);
+  if (event.is_one_day || event.start_date === event.end_date) return start;
+  return `${start} – ${formatEventDate(event.end_date)}`;
+};
+
+const eventThumbnail = (event: EventDTO): string | null => {
+  if (event.image?.thumbnail) return event.image.thumbnail;
+  if (event.image?.medium) return event.image.medium;
+  if (event.image_url && /^https?:\/\//i.test(event.image_url)) {
+    return event.image_url;
+  }
+  return null;
+};
+
+const GroupEventsPage = () => {
+  const { groupId, myRole, userInfo, readOnlyPlatform } =
+    useOutletContext<GroupOutletContext>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const [page, setPage] = useState(1);
+  const [pendingDelete, setPendingDelete] = useState<EventDTO | null>(null);
+
+  const canWrite =
+    !readOnlyPlatform && canWriteEvents(myRole, userInfo?.platform_role);
+
+  const { data, isLoading, isError, error } = useQuery({
+    queryKey: ["cms-events", groupId, page],
+    queryFn: () =>
+      fetchCmsEvents({
+        group_id: groupId,
+        skip: (page - 1) * PAGE_SIZE,
+        limit: PAGE_SIZE,
+      }),
+    enabled: Boolean(groupId),
+    refetchOnWindowFocus: false,
+  });
+
+  const events = useMemo(() => data?.events ?? [], [data]);
+  const total = data?.total ?? 0;
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteCmsEvent(id),
+    onSuccess: () => {
+      toast.success("Event deleted");
+      setPendingDelete(null);
+      queryClient.invalidateQueries({ queryKey: ["cms-events", groupId] });
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const columnCount = canWrite ? 3 : 2;
+
+  const body = useMemo(() => {
+    if (isLoading) {
+      return (
+        <Pecha.TableRow>
+          <Pecha.TableCell colSpan={columnCount}>Loading…</Pecha.TableCell>
+        </Pecha.TableRow>
+      );
+    }
+    if (isError) {
+      return (
+        <Pecha.TableRow>
+          <Pecha.TableCell colSpan={columnCount} className="text-destructive">
+            {getApiErrorMessage(error, "Could not load events.")}
+          </Pecha.TableCell>
+        </Pecha.TableRow>
+      );
+    }
+    if (events.length === 0) {
+      return (
+        <Pecha.TableRow>
+          <Pecha.TableCell
+            colSpan={columnCount}
+            className="text-muted-foreground"
+          >
+            No events yet.
+          </Pecha.TableCell>
+        </Pecha.TableRow>
+      );
+    }
+    return events.map((event) => {
+      const thumbnail = eventThumbnail(event);
+      return (
+        <Pecha.TableRow key={event.id}>
+          <Pecha.TableCell className="font-medium">
+            <Link
+              to={ROUTES.groupEvent(groupId, event.id)}
+              className="flex items-center gap-3 hover:underline"
+            >
+              {thumbnail ? (
+                <img
+                  src={thumbnail}
+                  alt=""
+                  className="h-12 w-12 shrink-0 rounded object-cover"
+                />
+              ) : (
+                <div className="h-12 w-12 shrink-0 rounded bg-muted" />
+              )}
+              <span className="min-w-0 truncate">{eventName(event)}</span>
+            </Link>
+          </Pecha.TableCell>
+          <Pecha.TableCell>{formatEventRange(event)}</Pecha.TableCell>
+          {canWrite ? (
+            <Pecha.TableCell className="text-right">
+              <div className="flex justify-end gap-2">
+                <Pecha.Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() =>
+                    navigate(ROUTES.groupEventEdit(groupId, event.id))
+                  }
+                >
+                  Edit
+                </Pecha.Button>
+                <Pecha.Button
+                  variant="outline"
+                  size="sm"
+                  className="text-destructive hover:text-destructive"
+                  onClick={() => setPendingDelete(event)}
+                  aria-label={`Delete ${eventName(event)}`}
+                >
+                  <IoMdTrash className="h-4 w-4" />
+                </Pecha.Button>
+              </div>
+            </Pecha.TableCell>
+          ) : null}
+        </Pecha.TableRow>
+      );
+    });
+  }, [
+    isLoading,
+    isError,
+    error,
+    events,
+    columnCount,
+    canWrite,
+    groupId,
+    navigate,
+  ]);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-bold">Events</h2>
+        {canWrite ? (
+          <Pecha.Button
+            className="gap-1 bg-[#A51C21] text-white hover:bg-[#A51C21]/90"
+            onClick={() => navigate(ROUTES.groupEventNew(groupId))}
+          >
+            <IoMdAdd className="h-4 w-4" /> New event
+          </Pecha.Button>
+        ) : null}
+      </div>
+
+      <div className="rounded-lg border">
+        <Pecha.Table>
+          <Pecha.TableHeader>
+            <Pecha.TableRow>
+              <Pecha.TableHead>Name</Pecha.TableHead>
+              <Pecha.TableHead>Dates</Pecha.TableHead>
+              {canWrite ? (
+                <Pecha.TableHead className="text-right">
+                  Actions
+                </Pecha.TableHead>
+              ) : null}
+            </Pecha.TableRow>
+          </Pecha.TableHeader>
+          <Pecha.TableBody>{body}</Pecha.TableBody>
+        </Pecha.Table>
+
+        {totalPages > 1 ? (
+          <Pagination
+            currentPage={page}
+            totalPages={totalPages}
+            onPageChange={setPage}
+          />
+        ) : null}
+      </div>
+
+      <Pecha.AlertDialog
+        open={Boolean(pendingDelete)}
+        onOpenChange={(open) => {
+          if (!open) setPendingDelete(null);
+        }}
+      >
+        <Pecha.AlertDialogContent>
+          <Pecha.AlertDialogHeader>
+            <Pecha.AlertDialogTitle>Delete event?</Pecha.AlertDialogTitle>
+            <Pecha.AlertDialogDescription>
+              This will permanently remove &ldquo;
+              {pendingDelete ? eventName(pendingDelete) : ""}&rdquo;. This
+              action cannot be undone.
+            </Pecha.AlertDialogDescription>
+          </Pecha.AlertDialogHeader>
+          <Pecha.AlertDialogFooter>
+            <Pecha.AlertDialogCancel disabled={deleteMutation.isPending}>
+              Cancel
+            </Pecha.AlertDialogCancel>
+            <Pecha.AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              disabled={deleteMutation.isPending}
+              onClick={(e) => {
+                e.preventDefault();
+                if (pendingDelete) deleteMutation.mutate(pendingDelete.id);
+              }}
+            >
+              {deleteMutation.isPending ? "Deleting…" : "Delete"}
+            </Pecha.AlertDialogAction>
+          </Pecha.AlertDialogFooter>
+        </Pecha.AlertDialogContent>
+      </Pecha.AlertDialog>
+    </div>
+  );
+};
+
+export default GroupEventsPage;
diff --git a/src/components/routes/groups/GroupFormPage.tsx b/src/components/routes/groups/GroupFormPage.tsx
new file mode 100644
index 00000000..f728a89f
--- /dev/null
+++ b/src/components/routes/groups/GroupFormPage.tsx
@@ -0,0 +1,385 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { IoMdAdd, IoMdClose } from "react-icons/io";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { Textarea } from "@/components/ui/atoms/textarea";
+import { Button } from "@/components/ui/atoms/button";
+import ImageContentData from "@/components/ui/molecules/modals/image-upload/ImageContentData";
+import { uploadImageToS3 } from "@/components/routes/task/api/taskApi";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+import { ROUTES } from "@/routes/paths";
+import type { LanguageCode } from "@/schema/SeriesSchema";
+import { groupCoreSchema, type GroupCoreFormData } from "@/schema/GroupSchema";
+import {
+  buildGroupMetadata,
+  createGroup,
+  GROUP_TYPE_OPTIONS,
+  languageLabelForCode,
+  type AuthorGroupType,
+} from "./api/groupsApi";
+import GroupImageField from "./components/GroupImageField";
+import { GroupPageShell } from "./components/GroupPageShell";
+
+/** Create-only group form. Editing lives on each group section page. */
+const GroupFormPage = () => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const [addedLanguages, setAddedLanguages] = useState<LanguageCode[]>(["EN"]);
+  const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
+  const [bannerPreview, setBannerPreview] = useState<string | null>(null);
+  const [avatarKey, setAvatarKey] = useState<string | null>(null);
+  const [bannerKey, setBannerKey] = useState<string | null>(null);
+  const [avatarDialogOpen, setAvatarDialogOpen] = useState(false);
+  const [bannerDialogOpen, setBannerDialogOpen] = useState(false);
+  const [avatarUploading, setAvatarUploading] = useState(false);
+  const [bannerUploading, setBannerUploading] = useState(false);
+
+  const form = useForm<GroupCoreFormData>({
+    resolver: zodResolver(groupCoreSchema),
+    defaultValues: {
+      slug: "",
+      group_type: "PAGE" as AuthorGroupType,
+      is_public: true,
+      languages: {
+        EN: { title: "", sub_title: "", description: "", description_long: "" },
+      },
+      avatar_key: "",
+      banner_key: "",
+    },
+  });
+
+  const availableLanguages = PLAN_LANGUAGE.filter(
+    (l) => !addedLanguages.includes(l.value as LanguageCode),
+  );
+
+  const addLanguage = (code: LanguageCode) => {
+    if (addedLanguages.includes(code)) return;
+    setAddedLanguages((prev) => [...prev, code]);
+    form.setValue(
+      `languages.${code}`,
+      { title: "", sub_title: "", description: "", description_long: "" },
+      { shouldDirty: true },
+    );
+  };
+
+  const removeLanguage = (code: LanguageCode) => {
+    if (addedLanguages.length <= 1) {
+      toast.error("At least one language is required");
+      return;
+    }
+    setAddedLanguages((prev) => prev.filter((c) => c !== code));
+    form.unregister(`languages.${code}`);
+  };
+
+  const createMutation = useMutation({
+    mutationFn: createGroup,
+    onSuccess: (data) => {
+      toast.success("Group created");
+      queryClient.invalidateQueries({ queryKey: ["cms-groups"] });
+      navigate(ROUTES.groupEdit(data.id));
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const handleImageUpload = async (file: File, kind: "avatar" | "banner") => {
+    const setUploading =
+      kind === "avatar" ? setAvatarUploading : setBannerUploading;
+    const setPreview = kind === "avatar" ? setAvatarPreview : setBannerPreview;
+    const setKey = kind === "avatar" ? setAvatarKey : setBannerKey;
+    const setDialog =
+      kind === "avatar" ? setAvatarDialogOpen : setBannerDialogOpen;
+    const field = kind === "avatar" ? "avatar_key" : "banner_key";
+
+    setUploading(true);
+    try {
+      const { image, key } = await uploadImageToS3(file, "");
+      setPreview(image.original);
+      setKey(key);
+      form.setValue(field, key, { shouldDirty: true });
+      setDialog(false);
+      toast.success("Image uploaded");
+    } catch {
+      toast.error("Failed to upload image");
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const onCreate = form.handleSubmit((data) => {
+    createMutation.mutate({
+      slug: data.slug.trim(),
+      is_public: data.is_public,
+      group_type: data.group_type,
+      metadata: buildGroupMetadata(data.languages),
+      avatar_key: avatarKey,
+      banner_key: bannerKey,
+    });
+  });
+
+  return (
+    <GroupPageShell
+      backLabel="← Groups"
+      onBack={() => navigate(ROUTES.groups)}
+      title="Create group"
+    >
+      <div className="max-w-2xl mx-auto w-full p-4 sm:p-8 pb-12">
+        <section className="space-y-6">
+          <h2 className="text-base font-bold">General</h2>
+          <Pecha.Form {...form}>
+            <form onSubmit={onCreate} className="space-y-6">
+              <Pecha.FormField
+                control={form.control}
+                name="slug"
+                render={({ field }) => (
+                  <Pecha.FormItem>
+                    <Pecha.FormLabel className="text-sm font-bold">
+                      Slug
+                      <span className="text-destructive"> *</span>
+                    </Pecha.FormLabel>
+                    <Pecha.FormControl>
+                      <Pecha.Input
+                        placeholder="bodhichitta-authors"
+                        className="font-mono h-12 bg-white dark:bg-[#262626]"
+                        {...field}
+                      />
+                    </Pecha.FormControl>
+                    <Pecha.FormMessage />
+                  </Pecha.FormItem>
+                )}
+              />
+              <Pecha.FormField
+                control={form.control}
+                name="group_type"
+                render={({ field }) => (
+                  <Pecha.FormItem>
+                    <Pecha.FormLabel className="text-sm font-bold">
+                      Group type
+                      <span className="text-destructive"> *</span>
+                    </Pecha.FormLabel>
+                    <Pecha.Select
+                      value={field.value}
+                      onValueChange={field.onChange}
+                    >
+                      <Pecha.FormControl>
+                        <Pecha.SelectTrigger className="h-12 bg-white dark:bg-[#262626]">
+                          <Pecha.SelectValue placeholder="Select group type" />
+                        </Pecha.SelectTrigger>
+                      </Pecha.FormControl>
+                      <Pecha.SelectContent>
+                        {GROUP_TYPE_OPTIONS.map((option) => (
+                          <Pecha.SelectItem
+                            key={option.value}
+                            value={option.value}
+                          >
+                            {option.label}
+                          </Pecha.SelectItem>
+                        ))}
+                      </Pecha.SelectContent>
+                    </Pecha.Select>
+                    <p className="text-sm text-muted-foreground">
+                      {
+                        GROUP_TYPE_OPTIONS.find(
+                          (option) => option.value === field.value,
+                        )?.description
+                      }
+                    </p>
+                    <Pecha.FormMessage />
+                  </Pecha.FormItem>
+                )}
+              />
+              <Pecha.FormField
+                control={form.control}
+                name="is_public"
+                render={({ field }) => (
+                  <Pecha.FormItem className="flex items-center gap-3">
+                    <Pecha.FormControl>
+                      <Pecha.Checkbox
+                        checked={field.value}
+                        onCheckedChange={(checked) =>
+                          field.onChange(checked === true)
+                        }
+                      />
+                    </Pecha.FormControl>
+                    <Pecha.FormLabel className="text-sm font-bold !mt-0">
+                      Public group
+                    </Pecha.FormLabel>
+                  </Pecha.FormItem>
+                )}
+              />
+              <div className="space-y-4">
+                {addedLanguages.map((code) => (
+                  <div
+                    key={code}
+                    className="relative rounded-lg border border-input bg-[#FAFAFA] dark:bg-[#262626] p-4 space-y-3"
+                  >
+                    <button
+                      type="button"
+                      onClick={() => removeLanguage(code)}
+                      className="absolute top-2 right-2 text-muted-foreground hover:text-foreground p-1"
+                      aria-label={`Remove ${languageLabelForCode(code)}`}
+                    >
+                      <IoMdClose className="h-4 w-4" />
+                    </button>
+                    <Pecha.FormField
+                      control={form.control}
+                      name={`languages.${code}.title`}
+                      render={({ field }) => (
+                        <Pecha.FormItem>
+                          <Pecha.FormLabel className="text-sm font-bold">
+                            {languageLabelForCode(code)} title
+                            <span className="text-destructive"> *</span>
+                          </Pecha.FormLabel>
+                          <Pecha.FormControl>
+                            <Pecha.Input
+                              className="h-12 bg-white dark:bg-[#181818]"
+                              {...field}
+                            />
+                          </Pecha.FormControl>
+                          <Pecha.FormMessage />
+                        </Pecha.FormItem>
+                      )}
+                    />
+                    <Pecha.FormField
+                      control={form.control}
+                      name={`languages.${code}.sub_title`}
+                      render={({ field }) => (
+                        <Pecha.FormItem>
+                          <Pecha.FormLabel className="text-sm font-bold">
+                            {languageLabelForCode(code)} sub-title
+                            <span className="text-destructive"> *</span>
+                          </Pecha.FormLabel>
+                          <Pecha.FormControl>
+                            <Pecha.Input
+                              className="h-12 bg-white dark:bg-[#181818]"
+                              {...field}
+                            />
+                          </Pecha.FormControl>
+                          <Pecha.FormMessage />
+                        </Pecha.FormItem>
+                      )}
+                    />
+                    <Pecha.FormField
+                      control={form.control}
+                      name={`languages.${code}.description`}
+                      render={({ field }) => (
+                        <Pecha.FormItem>
+                          <Pecha.FormLabel className="text-sm font-bold">
+                            {languageLabelForCode(code)} description
+                            <span className="text-destructive"> *</span>
+                          </Pecha.FormLabel>
+                          <Pecha.FormControl>
+                            <Textarea
+                              className="min-h-[100px] resize-none bg-white dark:bg-[#181818]"
+                              maxLength={200}
+                              {...field}
+                            />
+                          </Pecha.FormControl>
+                          <Pecha.FormMessage />
+                        </Pecha.FormItem>
+                      )}
+                    />
+                    <Pecha.FormField
+                      control={form.control}
+                      name={`languages.${code}.description_long`}
+                      render={({ field }) => (
+                        <Pecha.FormItem>
+                          <Pecha.FormLabel className="text-sm font-bold">
+                            {languageLabelForCode(code)} long description
+                          </Pecha.FormLabel>
+                          <Pecha.FormControl>
+                            <Textarea
+                              className="min-h-[160px] resize-y bg-white dark:bg-[#181818]"
+                              placeholder="A longer description with more detail…"
+                              {...field}
+                            />
+                          </Pecha.FormControl>
+                          <Pecha.FormMessage />
+                        </Pecha.FormItem>
+                      )}
+                    />
+                  </div>
+                ))}
+              </div>
+              {availableLanguages.length > 0 && (
+                <Pecha.Select
+                  onValueChange={(v) => addLanguage(v as LanguageCode)}
+                >
+                  <Pecha.SelectTrigger className="w-fit border-dashed bg-white dark:bg-[#262626]">
+                    <div className="flex items-center gap-2 text-muted-foreground">
+                      <IoMdAdd className="h-4 w-4" />
+                      <Pecha.SelectValue placeholder="Add language" />
+                    </div>
+                  </Pecha.SelectTrigger>
+                  <Pecha.SelectContent>
+                    {availableLanguages.map((lang) => (
+                      <Pecha.SelectItem key={lang.value} value={lang.value}>
+                        {lang.label}
+                      </Pecha.SelectItem>
+                    ))}
+                  </Pecha.SelectContent>
+                </Pecha.Select>
+              )}
+              <div className="grid sm:grid-cols-2 gap-6">
+                <GroupImageField
+                  label="Avatar"
+                  displayUrl={avatarPreview}
+                  hasStoredImage={Boolean(avatarKey)}
+                  onUploadClick={() => setAvatarDialogOpen(true)}
+                  imageClassName="w-20 h-20 rounded-full object-cover border"
+                />
+                <GroupImageField
+                  label="Banner"
+                  displayUrl={bannerPreview}
+                  hasStoredImage={Boolean(bannerKey)}
+                  onUploadClick={() => setBannerDialogOpen(true)}
+                  imageClassName="w-full max-w-xs h-24 rounded object-cover border"
+                />
+              </div>
+              <div className="flex justify-end pt-2">
+                <Button
+                  type="submit"
+                  className="bg-[#A51C21] text-white hover:bg-[#A51C21]/90"
+                  disabled={createMutation.isPending}
+                >
+                  {createMutation.isPending ? "Creating…" : "Create group"}
+                </Button>
+              </div>
+            </form>
+          </Pecha.Form>
+        </section>
+      </div>
+
+      <Pecha.Dialog open={avatarDialogOpen} onOpenChange={setAvatarDialogOpen}>
+        <Pecha.DialogContent>
+          <Pecha.DialogHeader>
+            <Pecha.DialogTitle>Upload avatar</Pecha.DialogTitle>
+          </Pecha.DialogHeader>
+          <ImageContentData
+            onUpload={(file) => handleImageUpload(file, "avatar")}
+            isLoading={avatarUploading}
+          />
+        </Pecha.DialogContent>
+      </Pecha.Dialog>
+
+      <Pecha.Dialog open={bannerDialogOpen} onOpenChange={setBannerDialogOpen}>
+        <Pecha.DialogContent>
+          <Pecha.DialogHeader>
+            <Pecha.DialogTitle>Upload banner</Pecha.DialogTitle>
+          </Pecha.DialogHeader>
+          <ImageContentData
+            onUpload={(file) => handleImageUpload(file, "banner")}
+            isLoading={bannerUploading}
+          />
+        </Pecha.DialogContent>
+      </Pecha.Dialog>
+    </GroupPageShell>
+  );
+};
+
+export default GroupFormPage;
diff --git a/src/components/routes/groups/GroupLayout.tsx b/src/components/routes/groups/GroupLayout.tsx
new file mode 100644
index 00000000..7101ccee
--- /dev/null
+++ b/src/components/routes/groups/GroupLayout.tsx
@@ -0,0 +1,272 @@
+import { useState } from "react";
+import {
+  matchPath,
+  NavLink,
+  Navigate,
+  Outlet,
+  useLocation,
+  useNavigate,
+  useParams,
+  useSearchParams,
+} from "react-router-dom";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { IoMdTrash } from "react-icons/io";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { Button } from "@/components/ui/atoms/button";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import { useUserInfo } from "@/hooks/useUserInfo";
+import { ROUTES } from "@/routes/paths";
+import { isReviewer } from "@/lib/platformAccess";
+import { cn } from "@/lib/utils";
+import {
+  canDeleteGroup,
+  canManageGroupInvites,
+  getEffectiveGroupRole,
+} from "./lib/groupPermissions";
+import {
+  deleteGroup,
+  fetchGroup,
+  pickGroupTitle,
+  resolveGroupAvatarUrl,
+  type AuthorGroupDetailDTO,
+  type AuthorGroupMemberRole,
+} from "./api/groupsApi";
+import { GroupPageShell } from "./components/GroupPageShell";
+import type { UserInfo } from "@/hooks/useUserInfo";
+
+export type GroupOutletContext = {
+  group: AuthorGroupDetailDTO;
+  groupId: string;
+  myRole: AuthorGroupMemberRole | undefined;
+  userInfo: UserInfo | null | undefined;
+  readOnlyPlatform: boolean;
+  canManageTransfers: boolean;
+};
+
+const navLinkClass = ({ isActive }: { isActive: boolean }) =>
+  cn(
+    "px-3 py-2 text-sm border-b-2 -mb-px transition-colors",
+    isActive
+      ? "border-[#A51C21] text-foreground font-medium"
+      : "border-transparent text-muted-foreground hover:text-foreground",
+  );
+
+const GroupLayout = () => {
+  const { groupId } = useParams<{ groupId: string }>();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+  const queryClient = useQueryClient();
+  const { data: userInfo } = useUserInfo();
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [confirmName, setConfirmName] = useState("");
+
+  const {
+    data: group,
+    isLoading,
+    isError,
+    error,
+  } = useQuery({
+    queryKey: ["cms-group", groupId],
+    queryFn: () => fetchGroup(groupId!),
+    enabled: Boolean(groupId),
+    refetchOnWindowFocus: false,
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: () => deleteGroup(groupId!),
+    onSuccess: () => {
+      toast.success("Group deleted");
+      setDeleteOpen(false);
+      setConfirmName("");
+      queryClient.invalidateQueries({ queryKey: ["cms-groups"] });
+      navigate(ROUTES.groups);
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  if (groupId && searchParams.get("tab") === "transfers") {
+    return <Navigate to={ROUTES.groupTransfers(groupId)} replace />;
+  }
+
+  if (!groupId) return null;
+
+  if (isLoading) {
+    return (
+      <div className="flex h-[calc(100vh-40px)] items-center justify-center text-muted-foreground">
+        Loading group…
+      </div>
+    );
+  }
+
+  if (isError || !group) {
+    return (
+      <div className="flex h-[calc(100vh-40px)] flex-col items-center justify-center gap-4">
+        <p className="text-destructive">
+          {getApiErrorMessage(error, "Could not load this group")}
+        </p>
+        <Button variant="outline" onClick={() => navigate(ROUTES.groups)}>
+          Back to groups
+        </Button>
+      </div>
+    );
+  }
+
+  const groupTitle = pickGroupTitle(group.metadata);
+  const avatarUrl = resolveGroupAvatarUrl(group);
+  const myRole = getEffectiveGroupRole(group.members ?? [], userInfo);
+  const canDelete = canDeleteGroup(myRole);
+  const canManageTransfers =
+    canManageGroupInvites(myRole) || myRole === "OWNER";
+  const readOnlyPlatform = isReviewer(userInfo?.platform_role);
+  const showTransfersNav = !readOnlyPlatform;
+  const showDelete = !readOnlyPlatform && canDelete;
+  const nameMatches =
+    confirmName.trim().toLowerCase() === groupTitle.trim().toLowerCase();
+  const isAboutSection =
+    Boolean(
+      matchPath({ path: "/groups/:groupId", end: true }, location.pathname),
+    ) ||
+    Boolean(
+      matchPath(
+        { path: "/groups/:groupId/edit", end: true },
+        location.pathname,
+      ),
+    );
+  const isEditRoute = Boolean(
+    matchPath({ path: "/groups/:groupId/edit", end: true }, location.pathname),
+  );
+  const contentMaxWidth = isEditRoute ? "max-w-6xl" : "max-w-4xl";
+
+  const handleDeleteOpenChange = (open: boolean) => {
+    setDeleteOpen(open);
+    if (!open) setConfirmName("");
+  };
+
+  const outletContext: GroupOutletContext = {
+    group,
+    groupId: group.id,
+    myRole,
+    userInfo,
+    readOnlyPlatform,
+    canManageTransfers,
+  };
+
+  return (
+    <>
+      <GroupPageShell
+        backLabel="← Groups"
+        onBack={() => navigate(ROUTES.groups)}
+        title={groupTitle}
+        avatarUrl={avatarUrl}
+        subtitle={
+          <p className="mt-2 text-sm text-muted-foreground font-mono">
+            /{group.slug}
+          </p>
+        }
+        headerActions={
+          showDelete ? (
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-destructive hover:text-destructive"
+              onClick={() => setDeleteOpen(true)}
+            >
+              <IoMdTrash className="w-4 h-4" /> Delete
+            </Button>
+          ) : undefined
+        }
+        nav={
+          <nav className="flex flex-wrap gap-1 px-4 sm:px-8 border-b border-dashed border-gray-300 dark:border-input">
+            <NavLink
+              to={ROUTES.group(group.id)}
+              end
+              className={() => navLinkClass({ isActive: isAboutSection })}
+            >
+              About
+            </NavLink>
+            <NavLink
+              to={ROUTES.groupContent(group.id)}
+              className={navLinkClass}
+            >
+              Content
+            </NavLink>
+            {showTransfersNav ? (
+              <NavLink
+                to={ROUTES.groupTransfers(group.id)}
+                className={navLinkClass}
+              >
+                Transfers
+              </NavLink>
+            ) : null}
+            <NavLink
+              to={ROUTES.groupMembers(group.id)}
+              className={navLinkClass}
+            >
+              Members
+            </NavLink>
+            <NavLink to={ROUTES.groupEvents(group.id)} className={navLinkClass}>
+              Events
+            </NavLink>
+          </nav>
+        }
+      >
+        <div className="px-4 sm:px-8 py-6 pb-12">
+          <div className={cn("mx-auto w-full", contentMaxWidth)}>
+            <Outlet context={outletContext} />
+          </div>
+        </div>
+      </GroupPageShell>
+
+      <Pecha.AlertDialog
+        open={deleteOpen}
+        onOpenChange={handleDeleteOpenChange}
+      >
+        <Pecha.AlertDialogContent>
+          <Pecha.AlertDialogHeader>
+            <Pecha.AlertDialogTitle>Delete group?</Pecha.AlertDialogTitle>
+            <Pecha.AlertDialogDescription>
+              This will permanently remove &ldquo;{groupTitle}&rdquo;. This
+              action cannot be undone. Type the group name to confirm.
+            </Pecha.AlertDialogDescription>
+          </Pecha.AlertDialogHeader>
+          <div className="space-y-2 py-2">
+            <label
+              htmlFor="delete-group-confirm-name"
+              className="text-sm font-medium"
+            >
+              Group name
+            </label>
+            <Pecha.Input
+              id="delete-group-confirm-name"
+              value={confirmName}
+              onChange={(e) => setConfirmName(e.target.value)}
+              placeholder={groupTitle}
+              autoComplete="off"
+              disabled={deleteMutation.isPending}
+            />
+          </div>
+          <Pecha.AlertDialogFooter>
+            <Pecha.AlertDialogCancel disabled={deleteMutation.isPending}>
+              Cancel
+            </Pecha.AlertDialogCancel>
+            <Pecha.AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              disabled={deleteMutation.isPending || !nameMatches}
+              onClick={(e) => {
+                e.preventDefault();
+                if (!nameMatches) return;
+                deleteMutation.mutate();
+              }}
+            >
+              {deleteMutation.isPending ? "Deleting…" : "Delete"}
+            </Pecha.AlertDialogAction>
+          </Pecha.AlertDialogFooter>
+        </Pecha.AlertDialogContent>
+      </Pecha.AlertDialog>
+    </>
+  );
+};
+
+export default GroupLayout;
diff --git a/src/components/routes/groups/GroupMembersPage.tsx b/src/components/routes/groups/GroupMembersPage.tsx
new file mode 100644
index 00000000..075a8474
--- /dev/null
+++ b/src/components/routes/groups/GroupMembersPage.tsx
@@ -0,0 +1,11 @@
+import { useOutletContext } from "react-router-dom";
+import GroupMembersPanel from "./components/GroupMembersPanel";
+import type { GroupOutletContext } from "./GroupLayout";
+
+const GroupMembersPage = () => {
+  const { group, groupId } = useOutletContext<GroupOutletContext>();
+
+  return <GroupMembersPanel groupId={groupId} members={group.members ?? []} />;
+};
+
+export default GroupMembersPage;
diff --git a/src/components/routes/groups/GroupTransfersPage.tsx b/src/components/routes/groups/GroupTransfersPage.tsx
new file mode 100644
index 00000000..71d08070
--- /dev/null
+++ b/src/components/routes/groups/GroupTransfersPage.tsx
@@ -0,0 +1,24 @@
+import { Navigate, useOutletContext } from "react-router-dom";
+import { ROUTES } from "@/routes/paths";
+import GroupTransfersSection from "./components/GroupTransfersSection";
+import type { GroupOutletContext } from "./GroupLayout";
+
+const GroupTransfersPage = () => {
+  const { groupId, canManageTransfers, readOnlyPlatform } =
+    useOutletContext<GroupOutletContext>();
+
+  if (readOnlyPlatform) {
+    return <Navigate to={ROUTES.group(groupId)} replace />;
+  }
+
+  return (
+    <GroupTransfersSection
+      groupId={groupId}
+      canManageIncoming={canManageTransfers}
+      canManageOutgoing={canManageTransfers}
+      alwaysVisible
+    />
+  );
+};
+
+export default GroupTransfersPage;
diff --git a/src/components/routes/groups/Groups.tsx b/src/components/routes/groups/Groups.tsx
new file mode 100644
index 00000000..35d7496f
--- /dev/null
+++ b/src/components/routes/groups/Groups.tsx
@@ -0,0 +1,180 @@
+import { useEffect, useState } from "react";
+import { IoMdAdd, IoMdSearch } from "react-icons/io";
+import { useDebounce } from "use-debounce";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useInView } from "react-intersection-observer";
+import { Link } from "react-router-dom";
+import { Pecha } from "@/components/ui/shadimport";
+import { Button } from "@/components/ui/atoms/button";
+import AuthButton from "@/components/ui/molecules/auth-button/AuthButton";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import { ROUTES } from "@/routes/paths";
+import {
+  fetchGroups,
+  GROUP_TYPE_OPTIONS,
+  type AuthorGroupType,
+} from "./api/groupsApi";
+import { GroupListShell } from "./components/GroupPageShell";
+import GroupsList from "./GroupsList";
+import PendingGroupInvitationsBlock from "./components/PendingGroupInvitationsBlock";
+
+const PAGE_SIZE = 10;
+
+function GroupsLoadMoreStatus({
+  isFetchingNextPage,
+  hasNextPage,
+  hasGroups,
+}: Readonly<{
+  isFetchingNextPage: boolean;
+  hasNextPage: boolean;
+  hasGroups: boolean;
+}>) {
+  if (isFetchingNextPage) {
+    return <p className="text-sm text-muted-foreground">Loading more…</p>;
+  }
+  if (hasNextPage) {
+    return <span className="h-4" aria-hidden />;
+  }
+  if (hasGroups) {
+    return <p className="text-sm text-muted-foreground">All groups loaded</p>;
+  }
+  return null;
+}
+
+const Groups = () => {
+  const [search, setSearch] = useState("");
+  const [groupType, setGroupType] = useState<AuthorGroupType | "">("COMMUNITY");
+  const [debouncedSearch] = useDebounce(search, 500);
+
+  const {
+    data,
+    isLoading,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    queryKey: ["cms-groups", debouncedSearch, groupType],
+    queryFn: ({ pageParam }) =>
+      fetchGroups({
+        page: pageParam,
+        limit: PAGE_SIZE,
+        search: debouncedSearch,
+        group_type: groupType || undefined,
+      }),
+    getNextPageParam: (lastPage, allPages) => {
+      const totalFetched = allPages.reduce(
+        (sum, page) => sum + page.groups.length,
+        0,
+      );
+      return totalFetched < lastPage.total ? allPages.length + 1 : undefined;
+    },
+    initialPageParam: 1,
+    refetchOnWindowFocus: false,
+    retry: false,
+  });
+
+  const groups = data?.pages.flatMap((page) => page.groups) ?? [];
+  const isEmpty = groups.length === 0 && !isLoading;
+
+  const { ref: sentinelRef, inView } = useInView({
+    threshold: 0,
+    rootMargin: "100px",
+  });
+
+  useEffect(() => {
+    if (inView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  let listContent;
+  if (error) {
+    listContent = (
+      <p className="text-sm text-red-500 py-8">
+        Failed to load groups. {getApiErrorMessage(error)}
+      </p>
+    );
+  } else if (isEmpty) {
+    listContent = (
+      <div className="flex flex-col h-full items-center justify-center">
+        <p className="text-base text-muted-foreground">No groups found</p>
+        <Button variant="outline" className="mt-2" asChild>
+          <Link to={ROUTES.groupNew}>
+            <IoMdAdd /> Create group
+          </Link>
+        </Button>
+      </div>
+    );
+  } else {
+    listContent = (
+      <>
+        <GroupsList groups={groups} isLoading={isLoading} />
+        <div ref={sentinelRef} className="w-full py-4 flex justify-center">
+          <GroupsLoadMoreStatus
+            isFetchingNextPage={isFetchingNextPage}
+            hasNextPage={Boolean(hasNextPage)}
+            hasGroups={groups.length > 0}
+          />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <GroupListShell
+      toolbar={
+        <div className="mb-4 px-4 pt-10 flex items-center justify-between flex-wrap gap-3">
+          <div className="flex items-center flex-wrap gap-2">
+            <div className="border w-fit px-2 bg-white dark:bg-input/30 rounded-md border-gray-200 dark:border-[#313132] flex items-center">
+              <IoMdSearch className="w-4 h-4" />
+              <Pecha.Input
+                placeholder="Search groups…"
+                className="rounded-md border-none dark:bg-transparent px-4 shadow-none py-2"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+            </div>
+
+            <Pecha.Select
+              value={groupType || "all"}
+              onValueChange={(v) =>
+                setGroupType(v === "all" ? "" : (v as AuthorGroupType))
+              }
+            >
+              <Pecha.SelectTrigger className="w-36 bg-white dark:bg-input/30">
+                <Pecha.SelectValue placeholder="Type" />
+              </Pecha.SelectTrigger>
+              <Pecha.SelectContent>
+                <Pecha.SelectItem value="all">All types</Pecha.SelectItem>
+                {GROUP_TYPE_OPTIONS.map((option) => (
+                  <Pecha.SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </Pecha.SelectItem>
+                ))}
+              </Pecha.SelectContent>
+            </Pecha.Select>
+
+            <Button
+              variant="outline"
+              className="bg-gray-100 hover:bg-gray-200"
+              asChild
+            >
+              <Link to={ROUTES.groupNew}>
+                <IoMdAdd /> New group
+              </Link>
+            </Button>
+          </div>
+          <AuthButton />
+        </div>
+      }
+    >
+      <div className="px-4 pt-4 pb-8 flex flex-col items-center">
+        {listContent}
+      </div>
+      <PendingGroupInvitationsBlock />
+    </GroupListShell>
+  );
+};
+
+export default Groups;
diff --git a/src/components/routes/groups/GroupsList.tsx b/src/components/routes/groups/GroupsList.tsx
new file mode 100644
index 00000000..0136f20d
--- /dev/null
+++ b/src/components/routes/groups/GroupsList.tsx
@@ -0,0 +1,86 @@
+import { useNavigate } from "react-router-dom";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/atoms/avatar";
+import { ROUTES } from "@/routes/paths";
+import {
+  groupTypeLabel,
+  pickGroupTitle,
+  resolveGroupAvatarUrl,
+  type AuthorGroupListItem,
+} from "./api/groupsApi";
+
+interface GroupsListProps {
+  groups: AuthorGroupListItem[];
+  isLoading?: boolean;
+}
+
+const Stat = ({ label, value }: { label: string; value: string | number }) => (
+  <div className="min-w-0">
+    <p className="text-xs text-muted-foreground">{label}</p>
+    <p className="text-sm font-medium tabular-nums">{value}</p>
+  </div>
+);
+
+const GroupsList = ({ groups, isLoading }: GroupsListProps) => {
+  const navigate = useNavigate();
+
+  if (isLoading) {
+    return (
+      <p className="text-sm text-muted-foreground py-8 text-center">
+        Loading groups…
+      </p>
+    );
+  }
+
+  return (
+    <div className="w-full grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
+      {groups.map((group) => {
+        const title = pickGroupTitle(group.metadata);
+        const avatarUrl = resolveGroupAvatarUrl(group);
+
+        return (
+          <button
+            key={group.id}
+            type="button"
+            onClick={() => navigate(ROUTES.group(group.id))}
+            className="text-left rounded-lg border bg-white dark:bg-[#1e1e1e] p-4 space-y-4 hover:bg-muted/40 transition-colors cursor-pointer"
+          >
+            <div className="flex items-start gap-3 min-w-0">
+              <Avatar className="size-12 shrink-0">
+                <AvatarImage src={avatarUrl ?? undefined} />
+                <AvatarFallback>{title.charAt(0)}</AvatarFallback>
+              </Avatar>
+              <div className="min-w-0 flex-1 space-y-1">
+                <p className="font-medium truncate">{title}</p>
+                <div className="flex flex-wrap items-center gap-2 text-sm">
+                  <span className="text-muted-foreground">
+                    {groupTypeLabel(group.group_type)}
+                  </span>
+                  <span className="text-muted-foreground/50">·</span>
+                  {group.is_public ? (
+                    <span className="text-green-600 dark:text-green-400">
+                      Public
+                    </span>
+                  ) : (
+                    <span className="text-muted-foreground">Private</span>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-3 gap-3 border-t border-dashed border-gray-200 dark:border-input pt-3">
+              <Stat label="Members" value={group.member_count ?? "—"} />
+              <Stat label="Followers" value={group.follower_count} />
+              <Stat label="Joiners" value={group.joiner_count ?? "—"} />
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default GroupsList;
diff --git a/src/components/routes/groups/api/accumulatorPresetSearchApi.ts b/src/components/routes/groups/api/accumulatorPresetSearchApi.ts
new file mode 100644
index 00000000..68991170
--- /dev/null
+++ b/src/components/routes/groups/api/accumulatorPresetSearchApi.ts
@@ -0,0 +1,70 @@
+import axiosInstance from "@/config/axios-config";
+import type { FkOption } from "../components/FkMultiSearchSelector";
+
+interface PresetMantraDTO {
+  id: string;
+  mantra: string;
+  title?: string | null;
+  pronunciation?: string | null;
+}
+
+interface PublicAccumulatorDTO {
+  id: string;
+  target_count?: number | null;
+  mantra?: PresetMantraDTO | null;
+  metadata?: { language: string; name: string }[];
+}
+
+interface PublicAccumulatorsResponse {
+  accumulators: PublicAccumulatorDTO[];
+  total: number;
+  skip: number;
+  limit: number;
+}
+
+function presetLabel(preset: PublicAccumulatorDTO): string {
+  const mantraTitle = preset.mantra?.title?.trim();
+  if (mantraTitle) return mantraTitle;
+  const metaName = preset.metadata?.[0]?.name?.trim();
+  if (metaName) return metaName;
+  const mantraText = preset.mantra?.mantra?.trim();
+  if (mantraText) {
+    return mantraText.length > 60 ? `${mantraText.slice(0, 57)}…` : mantraText;
+  }
+  return "Untitled preset";
+}
+
+export async function searchAccumulatorPresets(params: {
+  search?: string;
+  skip?: number;
+  limit?: number;
+}): Promise<{
+  items: FkOption[];
+  skip: number;
+  limit: number;
+  total: number;
+}> {
+  const skip = params.skip ?? 0;
+  const limit = params.limit ?? 20;
+  const { data } = await axiosInstance.get<PublicAccumulatorsResponse>(
+    `/api/v1/accumulators/presets`,
+    {
+      params: {
+        skip,
+        limit,
+        ...(params.search?.trim() && { search: params.search.trim() }),
+      },
+    },
+  );
+
+  return {
+    items: data.accumulators.map((preset) => ({
+      id: preset.id,
+      title: presetLabel(preset),
+      image_url: undefined,
+    })),
+    skip: data.skip,
+    limit: data.limit,
+    total: data.total,
+  };
+}
diff --git a/src/components/routes/groups/api/eventsApi.ts b/src/components/routes/groups/api/eventsApi.ts
new file mode 100644
index 00000000..843a9ac2
--- /dev/null
+++ b/src/components/routes/groups/api/eventsApi.ts
@@ -0,0 +1,290 @@
+import axiosInstance from "@/config/axios-config";
+import { uploadImageToS3 } from "@/components/routes/task/api/taskApi";
+import { searchPlansForPicker } from "@/components/routes/groups/api/groupPickerApi";
+import { searchAccumulatorPresets } from "@/components/routes/groups/api/accumulatorPresetSearchApi";
+import type { FkOption } from "@/components/routes/groups/components/FkMultiSearchSelector";
+import type {
+  EventFormData,
+  EventMetadataRow,
+  LanguageCode,
+} from "@/schema/EventSchema";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+
+export interface ImageUrlModel {
+  thumbnail: string;
+  medium: string;
+  original: string;
+}
+
+export interface EventMetadataDTO {
+  id: string;
+  name: string;
+  description?: string;
+  language: string;
+}
+
+export type EventMetadataResponse =
+  | EventMetadataDTO
+  | EventMetadataDTO[]
+  | null;
+
+export interface EventDTO {
+  id: string;
+  group_id: string;
+  plan_id?: string;
+  accumulator_id?: string;
+  start_date: string;
+  end_date: string;
+  is_one_day: boolean;
+  metadata: EventMetadataResponse;
+  image?: ImageUrlModel;
+  image_url?: string;
+  created_at: string;
+  created_by: string;
+  updated_at?: string;
+}
+
+export interface EventsResponse {
+  events: EventDTO[];
+  total: number;
+  skip: number;
+  limit: number;
+}
+
+export interface EventMetadataInput {
+  name: string;
+  description?: string;
+  language: LanguageCode;
+}
+
+export interface CreateEventRequest {
+  group_id: string;
+  start_date: string;
+  end_date: string;
+  metadata: EventMetadataInput[];
+  image_url?: string;
+  plan_id?: string;
+  accumulator_id?: string;
+}
+
+export interface UpdateEventRequest {
+  group_id?: string;
+  start_date?: string;
+  end_date?: string;
+  metadata?: EventMetadataInput[];
+  image_url?: string;
+  plan_id?: string;
+  accumulator_id?: string;
+}
+
+export interface EventListFilters {
+  group_id?: string;
+  plan_id?: string;
+  accumulator_id?: string;
+  from_date?: string;
+  to_date?: string;
+  language?: string;
+  skip?: number;
+  limit?: number;
+}
+
+export const fetchCmsEvents = async (
+  filters: EventListFilters = {},
+): Promise<EventsResponse> => {
+  const { data } = await axiosInstance.get<EventsResponse>(
+    `/api/v1/cms/events`,
+    { params: filters },
+  );
+  return data;
+};
+
+export const fetchCmsEvent = async (
+  eventId: string,
+  language?: string,
+): Promise<EventDTO> => {
+  const { data } = await axiosInstance.get<EventDTO>(
+    `/api/v1/cms/events/${eventId}`,
+    { params: language ? { language } : undefined },
+  );
+  return data;
+};
+
+export const createCmsEvent = async (
+  body: CreateEventRequest,
+): Promise<EventDTO> => {
+  const { data } = await axiosInstance.post<EventDTO>(
+    `/api/v1/cms/events`,
+    body,
+  );
+  return data;
+};
+
+export const updateCmsEvent = async (
+  eventId: string,
+  body: UpdateEventRequest,
+): Promise<EventDTO> => {
+  const { data } = await axiosInstance.put<EventDTO>(
+    `/api/v1/cms/events/${eventId}`,
+    body,
+  );
+  return data;
+};
+
+export const deleteCmsEvent = async (eventId: string): Promise<void> => {
+  await axiosInstance.delete(`/api/v1/cms/events/${eventId}`);
+};
+
+export const uploadEventImage = async (file: File): Promise<string> => {
+  const { key } = await uploadImageToS3(file, "");
+  return key;
+};
+
+export function metadataArray(m: EventMetadataResponse): EventMetadataDTO[] {
+  if (!m) return [];
+  return Array.isArray(m) ? m : [m];
+}
+
+export function eventName(
+  event: Pick<EventDTO, "metadata">,
+  preferred: LanguageCode = "EN",
+): string {
+  const arr = metadataArray(event.metadata);
+  return (
+    arr.find((e) => e.language.toUpperCase() === preferred)?.name ??
+    arr[0]?.name ??
+    "Untitled event"
+  );
+}
+
+const LANGUAGE_ORDER = PLAN_LANGUAGE.map((l) => l.value as LanguageCode);
+
+export function mapEventToFormData(event: EventDTO): EventFormData {
+  const rows = metadataArray(event.metadata)
+    .map((m) => {
+      const language = m.language.toUpperCase() as LanguageCode;
+      if (!LANGUAGE_ORDER.includes(language)) return null;
+      return {
+        language,
+        name: m.name?.trim() ?? "",
+        description: m.description?.trim() ?? "",
+      } satisfies EventMetadataRow;
+    })
+    .filter((r): r is EventMetadataRow => r != null)
+    .sort(
+      (a, b) =>
+        LANGUAGE_ORDER.indexOf(a.language) - LANGUAGE_ORDER.indexOf(b.language),
+    );
+
+  return {
+    start_date: event.start_date ?? "",
+    end_date: event.end_date ?? "",
+    is_one_day: Boolean(event.is_one_day),
+    metadata:
+      rows.length > 0 ? rows : [{ language: "EN", name: "", description: "" }],
+    image_url: event.image_url?.trim() ?? "",
+    plan_id: event.plan_id?.trim() ?? "",
+    accumulator_id: event.accumulator_id?.trim() ?? "",
+  };
+}
+
+function buildMetadataInput(rows: EventMetadataRow[]): EventMetadataInput[] {
+  return rows.map((row) => {
+    const description = row.description.trim();
+    return {
+      language: row.language,
+      name: row.name.trim(),
+      ...(description ? { description } : {}),
+    };
+  });
+}
+
+export function buildCreateEventBody(
+  data: EventFormData,
+  groupId: string,
+): CreateEventRequest {
+  const imageUrl = data.image_url.trim();
+  const planId = data.plan_id.trim();
+  const accumulatorId = data.accumulator_id.trim();
+  return {
+    group_id: groupId,
+    start_date: data.start_date,
+    end_date: data.end_date,
+    metadata: buildMetadataInput(data.metadata),
+    ...(imageUrl ? { image_url: imageUrl } : {}),
+    ...(planId ? { plan_id: planId } : {}),
+    ...(accumulatorId ? { accumulator_id: accumulatorId } : {}),
+  };
+}
+
+async function resolveLinkOption(
+  id: string,
+  fallbackLabel: string,
+  searchFn: (params: {
+    search?: string;
+    skip?: number;
+    limit?: number;
+  }) => Promise<{
+    items: FkOption[];
+    skip: number;
+    limit: number;
+    total: number;
+  }>,
+): Promise<FkOption> {
+  const PAGE = 20;
+  const MAX_PAGES = 5;
+  try {
+    for (let page = 0; page < MAX_PAGES; page++) {
+      const res = await searchFn({ skip: page * PAGE, limit: PAGE });
+      const match = res.items.find((item) => item.id === id);
+      if (match) return match;
+      const fetched = res.skip + res.items.length;
+      if (fetched >= res.total || res.items.length === 0) break;
+    }
+  } catch {}
+  return { id, title: fallbackLabel };
+}
+
+export function resolveLinkedPlan(id: string): Promise<FkOption> {
+  return resolveLinkOption(id, "Linked plan", searchPlansForPicker);
+}
+
+export function resolveLinkedAccumulator(id: string): Promise<FkOption> {
+  return resolveLinkOption(id, "Linked accumulator", searchAccumulatorPresets);
+}
+
+function metadataEqual(a: EventMetadataRow[], b: EventMetadataRow[]): boolean {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i].language !== b[i].language) return false;
+    if (a[i].name.trim() !== b[i].name.trim()) return false;
+    if (a[i].description.trim() !== b[i].description.trim()) return false;
+  }
+  return true;
+}
+
+export function buildUpdateEventBody(
+  data: EventFormData,
+  original: EventFormData,
+): UpdateEventRequest {
+  const body: UpdateEventRequest = {};
+
+  if (data.start_date !== original.start_date)
+    body.start_date = data.start_date;
+  if (data.end_date !== original.end_date) body.end_date = data.end_date;
+
+  if (!metadataEqual(data.metadata, original.metadata)) {
+    body.metadata = buildMetadataInput(data.metadata);
+  }
+
+  const scalarKeys: (keyof Pick<
+    EventFormData,
+    "image_url" | "plan_id" | "accumulator_id"
+  >)[] = ["image_url", "plan_id", "accumulator_id"];
+  for (const key of scalarKeys) {
+    const next = data[key].trim();
+    const prev = original[key].trim();
+    if (next !== prev) body[key] = next;
+  }
+
+  return body;
+}
diff --git a/src/components/routes/groups/api/groupAccumulatorsApi.ts b/src/components/routes/groups/api/groupAccumulatorsApi.ts
new file mode 100644
index 00000000..5754ac31
--- /dev/null
+++ b/src/components/routes/groups/api/groupAccumulatorsApi.ts
@@ -0,0 +1,104 @@
+import axiosInstance from "@/config/axios-config";
+
+export interface GroupAccumulatorImage {
+  thumbnail: string;
+  medium: string;
+  original: string;
+}
+
+export interface GroupAccumulatorDTO {
+  id: string;
+  preset_accumulator_id: string | null;
+  group_id: string;
+  title: string | null;
+  image: GroupAccumulatorImage | null;
+  image_key: string | null;
+  target_count: number | null;
+  start_date: string | null;
+  end_date: string | null;
+  member_count?: number;
+  created_at: string;
+  updated_at: string | null;
+}
+
+export interface GroupAccumulatorsResponse {
+  accumulators: GroupAccumulatorDTO[];
+  total: number;
+  skip: number;
+  limit: number;
+}
+
+export interface CreateGroupAccumulatorRequest {
+  accumulator_id?: string | null;
+  title?: string | null;
+  image_key?: string | null;
+  target_count?: number | null;
+  start_date?: string | null;
+  end_date?: string | null;
+}
+
+export type UpdateGroupAccumulatorRequest = CreateGroupAccumulatorRequest;
+
+const getAuthHeaders = () => ({
+  Authorization: `Bearer ${sessionStorage.getItem("accessToken")}`,
+});
+
+export function resolveGroupAccumulatorImageUrl(
+  accumulator: Pick<GroupAccumulatorDTO, "image">,
+): string | null {
+  const image = accumulator.image;
+  if (!image) return null;
+  return image.medium || image.thumbnail || image.original || null;
+}
+
+export const fetchGroupAccumulators = async (
+  groupId: string,
+  params?: { skip?: number; limit?: number },
+): Promise<GroupAccumulatorsResponse> => {
+  const { data } = await axiosInstance.get<GroupAccumulatorsResponse>(
+    `/api/v1/cms/groups/${groupId}/accumulators`,
+    {
+      headers: getAuthHeaders(),
+      params: {
+        skip: params?.skip ?? 0,
+        limit: params?.limit ?? 100,
+      },
+    },
+  );
+  return data;
+};
+
+export const createGroupAccumulator = async (
+  groupId: string,
+  payload: CreateGroupAccumulatorRequest,
+): Promise<GroupAccumulatorDTO> => {
+  const { data } = await axiosInstance.post<GroupAccumulatorDTO>(
+    `/api/v1/cms/groups/${groupId}/accumulators`,
+    payload,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const updateGroupAccumulator = async (
+  groupId: string,
+  groupAccumulatorId: string,
+  payload: UpdateGroupAccumulatorRequest,
+): Promise<GroupAccumulatorDTO> => {
+  const { data } = await axiosInstance.put<GroupAccumulatorDTO>(
+    `/api/v1/cms/groups/${groupId}/accumulators/${groupAccumulatorId}`,
+    payload,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const deleteGroupAccumulator = async (
+  groupId: string,
+  groupAccumulatorId: string,
+): Promise<void> => {
+  await axiosInstance.delete(
+    `/api/v1/cms/groups/${groupId}/accumulators/${groupAccumulatorId}`,
+    { headers: getAuthHeaders() },
+  );
+};
diff --git a/src/components/routes/groups/api/groupContentApi.ts b/src/components/routes/groups/api/groupContentApi.ts
new file mode 100644
index 00000000..d409a588
--- /dev/null
+++ b/src/components/routes/groups/api/groupContentApi.ts
@@ -0,0 +1,16 @@
+import { fetchDashboardItems } from "@/components/routes/dashboard/dashboardApi";
+import type { DashboardTableRow } from "@/components/routes/dashboard/dashboardTable";
+
+/** Group-scoped plan/series list (client-filtered by group_id after enrichment). */
+export async function fetchGroupContentRows(
+  groupId: string,
+  options?: { pageSize?: number },
+): Promise<DashboardTableRow[]> {
+  const { rows } = await fetchDashboardItems({
+    tab: "all",
+    page: 1,
+    pageSize: options?.pageSize ?? 100,
+    group_id: groupId,
+  });
+  return rows;
+}
diff --git a/src/components/routes/groups/api/groupPickerApi.ts b/src/components/routes/groups/api/groupPickerApi.ts
new file mode 100644
index 00000000..8787b5db
--- /dev/null
+++ b/src/components/routes/groups/api/groupPickerApi.ts
@@ -0,0 +1,64 @@
+import { searchPlans } from "@/components/routes/create-series/api/planSearchApi";
+import type { PlanTagSummary } from "@/components/routes/tags/api/tagsApi";
+import type { TagSummaryDTO } from "./groupsApi";
+import { searchSeries } from "./seriesSearchApi";
+import type { FkOption } from "../components/FkMultiSearchSelector";
+
+type PickerSearchParams = {
+  search?: string;
+  skip?: number;
+  limit?: number;
+};
+
+const mapSearchResult = <
+  T extends { id: string; title: string; image_url?: string },
+>(
+  items: T[],
+  skip: number,
+  limit: number,
+  total: number,
+) => ({
+  items: items.map((item) => ({
+    id: item.id,
+    title: item.title,
+    image_url: item.image_url,
+  })),
+  skip,
+  limit,
+  total,
+});
+
+export const searchPlansForPicker = async (params: PickerSearchParams) => {
+  const result = await searchPlans(params);
+  return mapSearchResult(result.plans, result.skip, result.limit, result.total);
+};
+
+export const searchSeriesForPicker = async (params: PickerSearchParams) => {
+  const result = await searchSeries(params);
+  return mapSearchResult(
+    result.series,
+    result.skip,
+    result.limit,
+    result.total,
+  );
+};
+
+export function mapGroupTagsToPlanTagSummaries(
+  tags: TagSummaryDTO[],
+): PlanTagSummary[] {
+  return tags.map((tag) => ({
+    id: tag.id,
+    name: tag.name,
+    image: tag.image ?? null,
+    image_key: tag.image_key ?? null,
+    description: tag.description ?? null,
+    metadata: [],
+  }));
+}
+
+export function mapIdsToFkOptions(
+  ids: string[],
+  titleById: Map<string, string>,
+): FkOption[] {
+  return ids.map((id) => ({ id, title: titleById.get(id) ?? id }));
+}
diff --git a/src/components/routes/groups/api/groupsApi.dashboardFilter.test.ts b/src/components/routes/groups/api/groupsApi.dashboardFilter.test.ts
new file mode 100644
index 00000000..849f59de
--- /dev/null
+++ b/src/components/routes/groups/api/groupsApi.dashboardFilter.test.ts
@@ -0,0 +1,170 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import axiosInstance from "@/config/axios-config";
+import { fetchAccessibleGroupsForDashboard } from "./groupsApi";
+
+vi.mock("@/config/axios-config", () => ({
+  default: { get: vi.fn() },
+}));
+
+describe("fetchAccessibleGroupsForDashboard", () => {
+  beforeEach(() => {
+    vi.mocked(axiosInstance.get).mockReset();
+    vi.spyOn(Storage.prototype, "getItem").mockReturnValue("token");
+  });
+
+  it("uses for_dashboard for reviewers (not for_transfer)", async () => {
+    vi.mocked(axiosInstance.get).mockResolvedValueOnce({
+      data: {
+        groups: [
+          {
+            id: "g1",
+            slug: "g1",
+            is_public: true,
+            metadata: [{ title: "A", language: "EN" }],
+            tags: [],
+            follower_count: 0,
+          },
+        ],
+        skip: 0,
+        limit: 100,
+        total: 1,
+      },
+    });
+
+    await fetchAccessibleGroupsForDashboard({
+      platform_role: "REVIEWER",
+      has_group: true,
+    });
+
+    expect(axiosInstance.get).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        params: expect.objectContaining({ for_dashboard: true }),
+      }),
+    );
+    expect(axiosInstance.get).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        params: expect.not.objectContaining({ for_transfer: true }),
+      }),
+    );
+  });
+
+  it("uses for_dashboard for super admins", async () => {
+    vi.mocked(axiosInstance.get).mockResolvedValueOnce({
+      data: {
+        groups: [
+          {
+            id: "g1",
+            slug: "g1",
+            is_public: true,
+            metadata: [{ title: "A", language: "EN" }],
+            tags: [],
+            follower_count: 0,
+          },
+        ],
+        skip: 0,
+        limit: 100,
+        total: 1,
+      },
+    });
+
+    await fetchAccessibleGroupsForDashboard({
+      platform_role: "SUPER_ADMIN",
+      has_group: true,
+    });
+
+    expect(axiosInstance.get).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        params: expect.objectContaining({ for_dashboard: true }),
+      }),
+    );
+  });
+
+  it("omits for_dashboard and for_transfer for creators", async () => {
+    vi.mocked(axiosInstance.get).mockResolvedValueOnce({
+      data: {
+        groups: [],
+        skip: 0,
+        limit: 100,
+        total: 0,
+      },
+    });
+
+    await fetchAccessibleGroupsForDashboard({
+      platform_role: "CREATOR",
+      has_group: true,
+    });
+
+    expect(axiosInstance.get).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        params: expect.not.objectContaining({
+          for_transfer: true,
+          for_dashboard: true,
+        }),
+      }),
+    );
+  });
+
+  it("skips API for creators without a group", async () => {
+    const groups = await fetchAccessibleGroupsForDashboard({
+      platform_role: "CREATOR",
+      has_group: false,
+    });
+
+    expect(groups).toEqual([]);
+    expect(axiosInstance.get).not.toHaveBeenCalled();
+  });
+
+  it("falls back to plain list when for_dashboard returns no groups", async () => {
+    vi.mocked(axiosInstance.get)
+      .mockResolvedValueOnce({
+        data: { groups: [], skip: 0, limit: 100, total: 0 },
+      })
+      .mockResolvedValueOnce({
+        data: {
+          groups: [
+            {
+              id: "g2",
+              slug: "g2",
+              is_public: true,
+              metadata: [{ title: "B", language: "EN" }],
+              tags: [],
+              follower_count: 0,
+            },
+          ],
+          skip: 0,
+          limit: 100,
+          total: 1,
+        },
+      });
+
+    const groups = await fetchAccessibleGroupsForDashboard({
+      platform_role: "REVIEWER",
+      has_group: true,
+    });
+
+    expect(groups).toHaveLength(1);
+    expect(groups[0].id).toBe("g2");
+    expect(axiosInstance.get).toHaveBeenCalledTimes(2);
+    expect(axiosInstance.get).toHaveBeenNthCalledWith(
+      1,
+      expect.any(String),
+      expect.objectContaining({
+        params: expect.objectContaining({ for_dashboard: true }),
+      }),
+    );
+    expect(axiosInstance.get).toHaveBeenNthCalledWith(
+      2,
+      expect.any(String),
+      expect.objectContaining({
+        params: expect.not.objectContaining({
+          for_dashboard: true,
+          for_transfer: true,
+        }),
+      }),
+    );
+  });
+});
diff --git a/src/components/routes/groups/api/groupsApi.transfer.test.ts b/src/components/routes/groups/api/groupsApi.transfer.test.ts
new file mode 100644
index 00000000..bd2bfd5c
--- /dev/null
+++ b/src/components/routes/groups/api/groupsApi.transfer.test.ts
@@ -0,0 +1,124 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import axiosInstance from "@/config/axios-config";
+import { fetchGroups, fetchGroupsForTransfer } from "./groupsApi";
+
+vi.mock("@/config/axios-config", () => ({
+  default: { get: vi.fn() },
+}));
+
+describe("fetchGroupsForTransfer", () => {
+  beforeEach(() => {
+    vi.mocked(axiosInstance.get).mockReset();
+    vi.spyOn(Storage.prototype, "getItem").mockReturnValue("token");
+  });
+
+  it("requests for_transfer=true with skip/limit pagination", async () => {
+    vi.mocked(axiosInstance.get)
+      .mockResolvedValueOnce({
+        data: {
+          groups: [
+            {
+              id: "g1",
+              slug: "g1",
+              is_public: true,
+              metadata: [],
+              tags: [],
+              follower_count: 0,
+            },
+          ],
+          skip: 0,
+          limit: 100,
+          total: 2,
+        },
+      })
+      .mockResolvedValueOnce({
+        data: {
+          groups: [
+            {
+              id: "g2",
+              slug: "g2",
+              is_public: true,
+              metadata: [],
+              tags: [],
+              follower_count: 0,
+            },
+          ],
+          skip: 100,
+          limit: 100,
+          total: 2,
+        },
+      });
+
+    const groups = await fetchGroupsForTransfer();
+
+    expect(groups).toHaveLength(2);
+    expect(axiosInstance.get).toHaveBeenCalledTimes(2);
+    expect(
+      vi.mocked(axiosInstance.get).mock.calls[0]?.[1]?.params,
+    ).toMatchObject({
+      skip: 0,
+      limit: 100,
+      for_transfer: true,
+    });
+    expect(
+      vi.mocked(axiosInstance.get).mock.calls[1]?.[1]?.params,
+    ).toMatchObject({
+      skip: 100,
+      limit: 100,
+      for_transfer: true,
+    });
+  });
+
+  it("excludes source group and passes search", async () => {
+    vi.mocked(axiosInstance.get).mockResolvedValueOnce({
+      data: {
+        groups: [
+          {
+            id: "SOURCE",
+            slug: "s",
+            is_public: true,
+            metadata: [],
+            tags: [],
+            follower_count: 0,
+          },
+          {
+            id: "target",
+            slug: "t",
+            is_public: true,
+            metadata: [],
+            tags: [],
+            follower_count: 0,
+          },
+        ],
+        skip: 0,
+        limit: 100,
+        total: 2,
+      },
+    });
+
+    const groups = await fetchGroupsForTransfer({
+      excludeGroupId: "source",
+      search: "G3",
+    });
+
+    expect(groups.map((g) => g.id)).toEqual(["target"]);
+    expect(
+      vi.mocked(axiosInstance.get).mock.calls[0]?.[1]?.params,
+    ).toMatchObject({
+      search: "G3",
+      for_transfer: true,
+    });
+  });
+
+  it("does not send for_transfer on regular fetchGroups", async () => {
+    vi.mocked(axiosInstance.get).mockResolvedValueOnce({
+      data: { groups: [], skip: 0, limit: 10, total: 0 },
+    });
+
+    await fetchGroups({ page: 1, limit: 10 });
+
+    expect(
+      vi.mocked(axiosInstance.get).mock.calls[0]?.[1]?.params,
+    ).not.toHaveProperty("for_transfer");
+  });
+});
diff --git a/src/components/routes/groups/api/groupsApi.ts b/src/components/routes/groups/api/groupsApi.ts
new file mode 100644
index 00000000..cd6ba8c9
--- /dev/null
+++ b/src/components/routes/groups/api/groupsApi.ts
@@ -0,0 +1,707 @@
+import axiosInstance from "@/config/axios-config";
+import {
+  resolveDashboardItemImageUrl,
+  type DashboardImageVariants,
+} from "@/components/routes/dashboard/dashboardTable";
+import type { LanguageCode } from "@/schema/SeriesSchema";
+import { usesStaffWideDashboardGroupList } from "@/lib/platformAccess";
+import type { UserInfo } from "@/hooks/useUserInfo";
+
+export type AuthorGroupMemberRole = "OWNER" | "ADMIN" | "AUTHOR" | "VIEWER";
+
+export type AuthorGroupType = "PAGE" | "COMMUNITY";
+
+export const GROUP_TYPE_OPTIONS: {
+  value: AuthorGroupType;
+  label: string;
+  description: string;
+}[] = [
+  {
+    value: "PAGE",
+    label: "Page",
+    description: "Users follow this group to stay updated.",
+  },
+  {
+    value: "COMMUNITY",
+    label: "Community",
+    description: "Users join this group as members.",
+  },
+];
+
+export interface GroupMetadataDTO {
+  id?: string;
+  title: string;
+  sub_title?: string | null;
+  description?: string | null;
+  description_long?: string | null;
+  language: LanguageCode;
+}
+
+export interface GroupMetadataInput {
+  title: string;
+  sub_title: string;
+  description: string;
+  description_long?: string | null;
+  language: LanguageCode;
+}
+
+export interface TagSummaryDTO {
+  id: string;
+  name: string;
+  image?: string | null;
+  image_key?: string | null;
+  description?: string | null;
+  featured?: boolean;
+}
+
+export interface GroupSocialLinkDTO {
+  platform: string;
+  url: string;
+}
+
+export interface AuthorGroupMemberDTO {
+  author_id: string;
+  role: AuthorGroupMemberRole;
+  firstname: string;
+  lastname: string;
+  email: string;
+}
+
+export interface GroupLinkedSeriesDTO {
+  id: string;
+  metadata: GroupMetadataDTO[];
+  image?: string | DashboardImageVariants | null;
+  image_key?: string | null;
+  author_id?: string;
+  featured: boolean;
+  status: string;
+  plan_count?: number;
+  total_days?: number;
+}
+
+export interface GroupLinkedPlanAuthorDTO {
+  id: string;
+  firstname: string;
+  lastname: string;
+  image_url?: string | null;
+  image_key?: string | null;
+}
+
+export interface GroupLinkedPlanDTO {
+  id: string;
+  title: string;
+  description?: string | null;
+  language: LanguageCode;
+  difficulty_level?: string;
+  image_url?: string | null;
+  image_key?: string | null;
+  total_days?: number;
+  tags: TagSummaryDTO[];
+  status: string;
+  featured?: boolean;
+  subscription_count?: number;
+  author?: GroupLinkedPlanAuthorDTO;
+  start_date?: string | null;
+  series_id?: string | null;
+  display_order?: number | null;
+  group_id?: string | null;
+}
+
+export interface AuthorGroupListItem {
+  id: string;
+  slug: string;
+  group_type?: AuthorGroupType;
+  is_public: boolean;
+  metadata: GroupMetadataDTO[];
+  tags: TagSummaryDTO[];
+  follower_count: number;
+  joiner_count?: number;
+  member_count?: number;
+  avatar?: string | null;
+  avatar_key?: string | null;
+  avatar_url?: string | null;
+  /** Current user's membership role when returned by the CMS list API. */
+  my_role?: AuthorGroupMemberRole | null;
+}
+
+export interface AuthorGroupDetailDTO extends AuthorGroupListItem {
+  avatar_key?: string | null;
+  banner?: string | null;
+  banner_key?: string | null;
+  banner_url?: string | null;
+  members: AuthorGroupMemberDTO[];
+  social_links: GroupSocialLinkDTO[];
+  series: GroupLinkedSeriesDTO[];
+  plans: GroupLinkedPlanDTO[];
+}
+
+export interface AuthorGroupListResponse {
+  groups: AuthorGroupListItem[];
+  skip: number;
+  limit: number;
+  total: number;
+}
+
+export interface CreateAuthorGroupRequest {
+  slug: string;
+  group_type?: AuthorGroupType;
+  is_public?: boolean;
+  avatar_key?: string | null;
+  banner_key?: string | null;
+  metadata: GroupMetadataInput[];
+}
+
+export interface UpdateAuthorGroupRequest {
+  slug?: string;
+  is_public?: boolean;
+  avatar_key?: string | null;
+  banner_key?: string | null;
+  metadata?: GroupMetadataInput[];
+}
+
+export interface ReplaceGroupTagsRequest {
+  tag_ids: string[];
+}
+
+export interface ReplaceGroupSocialLinksRequest {
+  social_links: GroupSocialLinkDTO[];
+}
+
+export interface ReplaceGroupSeriesRequest {
+  series_ids: string[];
+}
+
+export interface ReplaceGroupPlansRequest {
+  plan_ids: string[];
+}
+
+export type AuthorGroupInviteStatus =
+  | "PENDING"
+  | "ACCEPTED"
+  | "REJECTED"
+  | "REVOKED"
+  | "EXPIRED";
+
+export interface GroupInviteDTO {
+  id: string;
+  group_id: string;
+  group_name: string;
+  target_email: string;
+  role: AuthorGroupMemberRole;
+  status: AuthorGroupInviteStatus;
+  expires_at: string;
+  accepted_at?: string | null;
+  rejected_at?: string | null;
+  revoked_at?: string | null;
+  created_at: string;
+  created_by: string;
+  inviter_name?: string;
+  inviter_email?: string;
+}
+
+export function formatGroupInviteInviter(invite: GroupInviteDTO): {
+  name: string;
+  email: string;
+} {
+  const email = (invite.inviter_email ?? invite.created_by).trim();
+  const rawName = (invite.inviter_name ?? "").trim();
+  const name =
+    rawName && rawName.toLowerCase() !== email.toLowerCase() ? rawName : email;
+  return { name, email };
+}
+
+export interface GroupInviteListResponse {
+  invites: GroupInviteDTO[];
+  total: number;
+}
+
+export interface CreateGroupInviteRequest {
+  target_email: string;
+  role: AuthorGroupMemberRole;
+}
+
+export interface GroupInviteCreatedResponse {
+  invite: GroupInviteDTO;
+  notification_id?: string | null;
+}
+
+export interface UpdateGroupMemberRoleRequest {
+  role: AuthorGroupMemberRole;
+}
+
+export interface FetchGroupsParams {
+  page: number;
+  limit: number;
+  search?: string;
+  language?: string;
+  tag_id?: string;
+  group_type?: AuthorGroupType;
+  /** When true, lists all groups eligible as transfer targets (not only membership). */
+  for_transfer?: boolean;
+  /** When true, lists groups the user may filter dashboard content by (staff-wide read list). */
+  for_dashboard?: boolean;
+}
+
+export const TRANSFER_GROUPS_PAGE_LIMIT = 100;
+
+const getAuthHeaders = () => ({
+  Authorization: `Bearer ${sessionStorage.getItem("accessToken")}`,
+});
+
+export function groupTypeLabel(groupType?: AuthorGroupType): string {
+  if (!groupType) return "—";
+  return (
+    GROUP_TYPE_OPTIONS.find((option) => option.value === groupType)?.label ??
+    groupType
+  );
+}
+
+export const fetchGroups = async ({
+  page,
+  limit,
+  search,
+  language,
+  tag_id,
+  group_type,
+  for_transfer,
+  for_dashboard,
+}: FetchGroupsParams): Promise<AuthorGroupListResponse> => {
+  const requestLimit = for_transfer
+    ? Math.min(Math.max(limit, 1), TRANSFER_GROUPS_PAGE_LIMIT)
+    : limit;
+  const skip = (page - 1) * requestLimit;
+  const { data } = await axiosInstance.get<AuthorGroupListResponse>(
+    `/api/v1/cms/author/groups`,
+    {
+      headers: getAuthHeaders(),
+      params: {
+        skip,
+        limit: requestLimit,
+        ...(search?.trim() && { search: search.trim() }),
+        ...(language && { language }),
+        ...(tag_id && { tag_id }),
+        ...(group_type && { group_type }),
+        ...(for_transfer && { for_transfer: true }),
+        ...(for_dashboard && { for_dashboard: true }),
+      },
+    },
+  );
+  return data;
+};
+
+function groupIdsEqual(a: string, b: string): boolean {
+  return a.trim().toLowerCase() === b.trim().toLowerCase();
+}
+
+/** Loads all transfer-target groups (paginated), excluding the source group. */
+export const fetchGroupsForTransfer = async (options?: {
+  search?: string;
+  excludeGroupId?: string;
+}): Promise<AuthorGroupListItem[]> => {
+  const limit = TRANSFER_GROUPS_PAGE_LIMIT;
+  const collected: AuthorGroupListItem[] = [];
+  let page = 1;
+  let total = 0;
+
+  do {
+    const res = await fetchGroups({
+      page,
+      limit,
+      search: options?.search,
+      for_transfer: true,
+    });
+    total = res.total ?? 0;
+    const batch = res.groups ?? [];
+    collected.push(...batch);
+    if (batch.length === 0) break;
+    page += 1;
+  } while (collected.length < total);
+
+  const excludeId = options?.excludeGroupId?.trim();
+  if (!excludeId) return collected;
+  return collected.filter((g) => !groupIdsEqual(g.id, excludeId));
+};
+
+export type DashboardGroupFilterUser = Pick<
+  UserInfo,
+  "platform_role" | "has_group"
+>;
+
+async function fetchAllGroupPages(
+  limit: number,
+  flags?: Pick<FetchGroupsParams, "for_dashboard" | "for_transfer">,
+): Promise<AuthorGroupListItem[]> {
+  const collected: AuthorGroupListItem[] = [];
+  let page = 1;
+  let total = 0;
+
+  do {
+    const res = await fetchGroups({
+      page,
+      limit,
+      ...flags,
+    });
+    total = res.total ?? 0;
+    const batch = res.groups ?? [];
+    collected.push(...batch);
+    if (batch.length === 0) break;
+    page += 1;
+  } while (collected.length < total);
+
+  return collected;
+}
+
+/** Groups the user may filter dashboard content by (membership vs staff-wide list). */
+export async function fetchAccessibleGroupsForDashboard(
+  user?: DashboardGroupFilterUser | null,
+): Promise<AuthorGroupListItem[]> {
+  const platformRole = user?.platform_role;
+  if (
+    platformRole &&
+    !usesStaffWideDashboardGroupList(platformRole) &&
+    user?.has_group === false
+  ) {
+    return [];
+  }
+
+  const staffWideList = usesStaffWideDashboardGroupList(platformRole);
+  const limit = staffWideList ? TRANSFER_GROUPS_PAGE_LIMIT : 100;
+
+  let collected = await fetchAllGroupPages(
+    limit,
+    staffWideList ? { for_dashboard: true } : undefined,
+  );
+
+  // Fallback when backend has not shipped for_dashboard yet.
+  if (staffWideList && collected.length === 0) {
+    collected = await fetchAllGroupPages(limit);
+  }
+
+  return collected.sort((a, b) =>
+    pickGroupTitle(a.metadata).localeCompare(pickGroupTitle(b.metadata)),
+  );
+}
+
+export const fetchGroup = async (
+  groupId: string,
+): Promise<AuthorGroupDetailDTO> => {
+  const { data } = await axiosInstance.get<AuthorGroupDetailDTO>(
+    `/api/v1/cms/author/groups/${groupId}`,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const createGroup = async (
+  payload: CreateAuthorGroupRequest,
+): Promise<AuthorGroupDetailDTO> => {
+  const { data } = await axiosInstance.post<AuthorGroupDetailDTO>(
+    `/api/v1/cms/author/groups`,
+    payload,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const patchGroup = async (
+  groupId: string,
+  payload: UpdateAuthorGroupRequest,
+): Promise<AuthorGroupDetailDTO> => {
+  const { data } = await axiosInstance.patch<AuthorGroupDetailDTO>(
+    `/api/v1/cms/author/groups/${groupId}`,
+    payload,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const deleteGroup = async (groupId: string): Promise<void> => {
+  await axiosInstance.delete(`/api/v1/cms/author/groups/${groupId}`, {
+    headers: getAuthHeaders(),
+  });
+};
+
+export const replaceGroupTags = async (
+  groupId: string,
+  payload: ReplaceGroupTagsRequest,
+): Promise<AuthorGroupDetailDTO> => {
+  const { data } = await axiosInstance.put<AuthorGroupDetailDTO>(
+    `/api/v1/cms/author/groups/${groupId}/tags`,
+    payload,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const replaceGroupSocialLinks = async (
+  groupId: string,
+  payload: ReplaceGroupSocialLinksRequest,
+): Promise<AuthorGroupDetailDTO> => {
+  const { data } = await axiosInstance.put<AuthorGroupDetailDTO>(
+    `/api/v1/cms/author/groups/${groupId}/social-links`,
+    payload,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const replaceGroupSeries = async (
+  groupId: string,
+  payload: ReplaceGroupSeriesRequest,
+): Promise<AuthorGroupDetailDTO> => {
+  const { data } = await axiosInstance.put<AuthorGroupDetailDTO>(
+    `/api/v1/cms/author/groups/${groupId}/series`,
+    payload,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const replaceGroupPlans = async (
+  groupId: string,
+  payload: ReplaceGroupPlansRequest,
+): Promise<AuthorGroupDetailDTO> => {
+  const { data } = await axiosInstance.put<AuthorGroupDetailDTO>(
+    `/api/v1/cms/author/groups/${groupId}/plans`,
+    payload,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const createGroupInvite = async (
+  groupId: string,
+  payload: CreateGroupInviteRequest,
+): Promise<GroupInviteCreatedResponse> => {
+  const { data } = await axiosInstance.post<GroupInviteCreatedResponse>(
+    `/api/v1/cms/author/groups/${groupId}/members/invites`,
+    payload,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const fetchGroupInvites = async (
+  groupId: string,
+  status?: AuthorGroupInviteStatus,
+): Promise<GroupInviteListResponse> => {
+  const { data } = await axiosInstance.get<GroupInviteListResponse>(
+    `/api/v1/cms/author/groups/${groupId}/members/invites`,
+    {
+      headers: getAuthHeaders(),
+      params: status ? { status } : undefined,
+    },
+  );
+  return data;
+};
+
+export const fetchMyPendingGroupInvites =
+  async (): Promise<GroupInviteListResponse> => {
+    const { data } = await axiosInstance.get<GroupInviteListResponse>(
+      `/api/v1/cms/author/groups/invites/me`,
+    );
+    return data;
+  };
+
+export const acceptGroupInvite = async (
+  inviteId: string,
+): Promise<AuthorGroupDetailDTO> => {
+  const { data } = await axiosInstance.post<AuthorGroupDetailDTO>(
+    `/api/v1/cms/author/groups/invites/${inviteId}/accept`,
+  );
+  return data;
+};
+
+export const rejectGroupInvite = async (
+  inviteId: string,
+): Promise<GroupInviteDTO> => {
+  const { data } = await axiosInstance.post<GroupInviteDTO>(
+    `/api/v1/cms/author/groups/invites/${inviteId}/reject`,
+    {},
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const revokeGroupInvite = async (
+  groupId: string,
+  inviteId: string,
+): Promise<void> => {
+  await axiosInstance.post(
+    `/api/v1/cms/author/groups/${groupId}/members/invites/${inviteId}/revoke`,
+    {},
+    { headers: getAuthHeaders() },
+  );
+};
+
+export function isGroupInviteExpired(invite: GroupInviteDTO): boolean {
+  if (invite.status === "EXPIRED") return true;
+  return new Date(invite.expires_at).getTime() <= Date.now();
+}
+
+export const updateGroupMemberRole = async (
+  groupId: string,
+  authorId: string,
+  payload: UpdateGroupMemberRoleRequest,
+): Promise<AuthorGroupDetailDTO> => {
+  const { data } = await axiosInstance.patch<AuthorGroupDetailDTO>(
+    `/api/v1/cms/author/groups/${groupId}/members/${authorId}/role`,
+    payload,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export interface TransferGroupOwnershipRequest {
+  new_owner_author_id: string;
+}
+
+export const transferGroupOwnership = async (
+  groupId: string,
+  payload: TransferGroupOwnershipRequest,
+): Promise<AuthorGroupDetailDTO> => {
+  const { data } = await axiosInstance.post<AuthorGroupDetailDTO>(
+    `/api/v1/cms/author/groups/${groupId}/transfer-ownership`,
+    payload,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const removeGroupMember = async (
+  groupId: string,
+  authorId: string,
+): Promise<void> => {
+  await axiosInstance.delete(
+    `/api/v1/cms/author/groups/${groupId}/members/${authorId}`,
+    { headers: getAuthHeaders() },
+  );
+};
+
+export function pickGroupTitle(
+  metadata: GroupMetadataDTO[] | undefined,
+  fallback = "Untitled group",
+): string {
+  if (!metadata?.length) return fallback;
+  const en = metadata.find((m) => m.language === "EN");
+  if (en?.title?.trim()) return en.title.trim();
+  const first = metadata.find((m) => m.title?.trim());
+  return first?.title?.trim() || fallback;
+}
+
+export function resolveGroupBannerUrl(group: {
+  banner?: string | DashboardImageVariants | null;
+  banner_url?: string | null;
+  banner_key?: string | null;
+}): string | null {
+  const url = resolveDashboardItemImageUrl({
+    image_url: group.banner_url,
+    image: group.banner,
+    image_key: group.banner_key,
+  });
+  return url || null;
+}
+
+export function resolveGroupAvatarUrl(group: {
+  avatar?: string | DashboardImageVariants | null;
+  avatar_url?: string | null;
+  avatar_key?: string | null;
+}): string | null {
+  const url = resolveDashboardItemImageUrl({
+    image_url: group.avatar_url,
+    image: group.avatar,
+    image_key: group.avatar_key,
+  });
+  return url || null;
+}
+
+export function pickGroupLinkedSeriesTitle(
+  series: GroupLinkedSeriesDTO,
+  fallback = "Untitled series",
+): string {
+  return pickGroupTitle(series.metadata, fallback);
+}
+
+export function groupLinkedSeriesToFkOptions(
+  series: GroupLinkedSeriesDTO[],
+): { id: string; title: string; image_url?: string }[] {
+  return series.map((item) => {
+    const image_url =
+      resolveDashboardItemImageUrl({
+        image: item.image,
+        image_key: item.image_key,
+      }) || undefined;
+    return {
+      id: item.id,
+      title: pickGroupLinkedSeriesTitle(item),
+      image_url,
+    };
+  });
+}
+
+export function pickGroupLinkedPlanTitle(
+  plan: GroupLinkedPlanDTO,
+  fallback = "Untitled plan",
+): string {
+  return plan.title?.trim() || fallback;
+}
+
+export function groupLinkedPlansToFkOptions(
+  plans: GroupLinkedPlanDTO[],
+): { id: string; title: string; image_url?: string }[] {
+  return plans.map((item) => {
+    const image_url =
+      resolveDashboardItemImageUrl({
+        image_url: item.image_url,
+        image_key: item.image_key,
+      }) || undefined;
+    return {
+      id: item.id,
+      title: pickGroupLinkedPlanTitle(item),
+      image_url,
+    };
+  });
+}
+
+const LANGUAGE_LABELS: Record<LanguageCode, string> = {
+  EN: "English",
+  BO: "Tibetan",
+  ZH: "Chinese",
+  HI: "Hindi",
+  NE: "Nepali",
+  MN: "Mongolian",
+};
+
+export function languageLabelForCode(code: LanguageCode): string {
+  return LANGUAGE_LABELS[code] ?? code;
+}
+
+export function buildGroupMetadata(
+  languages: Partial<
+    Record<
+      LanguageCode,
+      {
+        title: string;
+        sub_title: string;
+        description: string;
+        description_long?: string;
+      }
+    >
+  >,
+): GroupMetadataInput[] {
+  const order: LanguageCode[] = ["EN", "BO", "ZH", "HI", "NE", "MN"];
+  const out: GroupMetadataInput[] = [];
+  for (const code of order) {
+    const block = languages[code];
+    if (!block) continue;
+    const descriptionLong = block.description_long?.trim() ?? "";
+    out.push({
+      language: code,
+      title: block.title.trim(),
+      sub_title: block.sub_title.trim(),
+      description: block.description.trim(),
+      description_long: descriptionLong || null,
+    });
+  }
+  return out;
+}
diff --git a/src/components/routes/groups/api/seriesSearchApi.ts b/src/components/routes/groups/api/seriesSearchApi.ts
new file mode 100644
index 00000000..0d5d056c
--- /dev/null
+++ b/src/components/routes/groups/api/seriesSearchApi.ts
@@ -0,0 +1,42 @@
+import { fetchDashboardItems } from "@/components/routes/dashboard/dashboardApi";
+
+export type SeriesOption = {
+  id: string;
+  title: string;
+  image_url?: string;
+};
+
+export type SearchSeriesResponse = {
+  series: SeriesOption[];
+  skip: number;
+  limit: number;
+  total: number;
+};
+
+export const searchSeries = async (params: {
+  search?: string;
+  skip?: number;
+  limit?: number;
+}): Promise<SearchSeriesResponse> => {
+  const limit = params.limit ?? 20;
+  const skip = params.skip ?? 0;
+  const page = Math.floor(skip / limit) + 1;
+
+  const result = await fetchDashboardItems({
+    tab: "series",
+    page,
+    pageSize: limit,
+    search: params.search,
+  });
+
+  return {
+    series: result.rows.map((row) => ({
+      id: row.id,
+      title: row.title,
+      image_url: row.image_url || undefined,
+    })),
+    skip,
+    limit,
+    total: result.pagination.total,
+  };
+};
diff --git a/src/components/routes/groups/components/FkMultiSearchSelector.tsx b/src/components/routes/groups/components/FkMultiSearchSelector.tsx
new file mode 100644
index 00000000..7e59a23e
--- /dev/null
+++ b/src/components/routes/groups/components/FkMultiSearchSelector.tsx
@@ -0,0 +1,203 @@
+import { useEffect, useState } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useInView } from "react-intersection-observer";
+import { IoMdClose } from "react-icons/io";
+import { FaMagnifyingGlass } from "react-icons/fa6";
+import { NO_PROFILE_IMAGE } from "@/lib/constant";
+
+export type FkOption = {
+  id: string;
+  title: string;
+  image_url?: string;
+};
+
+type SearchFn = (params: {
+  search?: string;
+  skip?: number;
+  limit?: number;
+}) => Promise<{
+  items: FkOption[];
+  skip: number;
+  limit: number;
+  total: number;
+}>;
+
+type FkMultiSearchSelectorProps = {
+  value: FkOption[];
+  onChange: (items: FkOption[]) => void;
+  searchFn: SearchFn;
+  queryKeyPrefix: string;
+  label?: string;
+  hideLabel?: boolean;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+};
+
+const PAGE_SIZE = 20;
+const DEBOUNCE_MS = 600;
+
+const FkMultiSearchSelector = ({
+  value,
+  onChange,
+  searchFn,
+  queryKeyPrefix,
+  label,
+  hideLabel = false,
+  searchPlaceholder = "Search…",
+  emptyMessage = "No items selected — use search to add.",
+}: FkMultiSearchSelectorProps) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedQuery, setDebouncedQuery] = useState("");
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(
+      () => setDebouncedQuery(searchQuery.trim()),
+      DEBOUNCE_MS,
+    );
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
+    useInfiniteQuery({
+      queryKey: [queryKeyPrefix, debouncedQuery],
+      queryFn: ({ pageParam = 0 }) =>
+        searchFn({
+          search: debouncedQuery || undefined,
+          skip: pageParam,
+          limit: PAGE_SIZE,
+        }),
+      getNextPageParam: (lastPage) => {
+        const fetched = lastPage.skip + lastPage.items.length;
+        return fetched < lastPage.total ? fetched : undefined;
+      },
+      initialPageParam: 0,
+      enabled: isDropdownOpen,
+    });
+
+  const searchResults: FkOption[] =
+    data?.pages.flatMap((page) => page.items) ?? [];
+
+  const { ref: sentinelRef, inView } = useInView({ threshold: 0 });
+  useEffect(() => {
+    if (inView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  const valueIds = new Set(value.map((item) => item.id));
+
+  const handleToggle = (item: FkOption) => {
+    if (valueIds.has(item.id)) {
+      onChange(value.filter((v) => v.id !== item.id));
+    } else {
+      onChange([...value, item]);
+    }
+  };
+
+  const handleRemove = (id: string) => {
+    onChange(value.filter((v) => v.id !== id));
+  };
+
+  return (
+    <div className="space-y-3">
+      {!hideLabel && label ? (
+        <p className="text-sm font-bold">{label}</p>
+      ) : null}
+
+      {value.length === 0 ? (
+        <div className="rounded-md border border-dashed border-muted-foreground/40 px-4 py-6 text-center text-sm text-muted-foreground">
+          {emptyMessage}
+        </div>
+      ) : (
+        <div className="space-y-2 max-h-60 overflow-auto">
+          {value.map((item) => (
+            <div
+              key={item.id}
+              className="flex items-center gap-2 rounded-md border border-input bg-white dark:bg-[#262626] p-2"
+            >
+              <img
+                src={item.image_url || NO_PROFILE_IMAGE}
+                alt=""
+                className="w-9 h-9 rounded object-cover shrink-0"
+              />
+              <span className="flex-1 text-sm min-w-0 truncate">
+                {item.title}
+              </span>
+              <button
+                type="button"
+                onClick={() => handleRemove(item.id)}
+                aria-label={`Remove ${item.title}`}
+                className="text-muted-foreground hover:text-foreground cursor-pointer p-1 shrink-0"
+              >
+                <IoMdClose className="h-4 w-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="relative">
+        <FaMagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <input
+          type="text"
+          placeholder={searchPlaceholder}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          onFocus={() => setIsDropdownOpen(true)}
+          onBlur={() => setTimeout(() => setIsDropdownOpen(false), 150)}
+          className="h-11 w-full rounded-md border border-input bg-white dark:bg-[#262626] dark:text-white pl-10 pr-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none"
+        />
+
+        {isDropdownOpen && (
+          <div className="absolute z-10 mt-1 w-full rounded-md border border-input bg-background dark:bg-[#262626] shadow-md max-h-52 overflow-auto">
+            {isLoading && searchResults.length === 0 && (
+              <div className="px-3 py-2 text-sm text-muted-foreground">
+                Searching…
+              </div>
+            )}
+            {searchResults.map((item) => {
+              const selected = valueIds.has(item.id);
+              return (
+                <button
+                  key={item.id}
+                  type="button"
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    handleToggle(item);
+                  }}
+                  className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-gray-100 dark:hover:bg-[#333333] cursor-pointer"
+                >
+                  <img
+                    src={item.image_url || NO_PROFILE_IMAGE}
+                    alt=""
+                    className="w-8 h-8 rounded object-cover shrink-0"
+                  />
+                  <span className="text-sm flex-1">{item.title}</span>
+                  {selected && (
+                    <span className="text-sm text-foreground shrink-0">✓</span>
+                  )}
+                </button>
+              );
+            })}
+            {hasNextPage && (
+              <div
+                ref={sentinelRef}
+                className="px-3 py-2 text-xs text-muted-foreground text-center"
+              >
+                {isFetchingNextPage ? "Loading more…" : ""}
+              </div>
+            )}
+            {!isLoading && searchResults.length === 0 && (
+              <div className="px-3 py-2 text-sm text-muted-foreground">
+                No results found
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FkMultiSearchSelector;
diff --git a/src/components/routes/groups/components/GroupAccumulatorsPanel.tsx b/src/components/routes/groups/components/GroupAccumulatorsPanel.tsx
new file mode 100644
index 00000000..6b4f951e
--- /dev/null
+++ b/src/components/routes/groups/components/GroupAccumulatorsPanel.tsx
@@ -0,0 +1,640 @@
+import { useEffect, useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { format } from "date-fns";
+import { IoMdAdd } from "react-icons/io";
+import { IoCalendarClearOutline } from "react-icons/io5";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { Button } from "@/components/ui/atoms/button";
+import ImageContentData from "@/components/ui/molecules/modals/image-upload/ImageContentData";
+import { uploadImageToS3 } from "@/components/routes/task/api/taskApi";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import { canChangeContentStatus } from "@/lib/contentPermissions";
+import { isReviewer } from "@/lib/platformAccess";
+import { fromBackendISO, toBackendISO } from "@/lib/utils";
+import { useUserInfo } from "@/hooks/useUserInfo";
+import type { AuthorGroupMemberRole } from "../api/groupsApi";
+import { searchAccumulatorPresets } from "../api/accumulatorPresetSearchApi";
+import {
+  createGroupAccumulator,
+  deleteGroupAccumulator,
+  fetchGroupAccumulators,
+  resolveGroupAccumulatorImageUrl,
+  updateGroupAccumulator,
+  type GroupAccumulatorDTO,
+} from "../api/groupAccumulatorsApi";
+import GroupImageField from "./GroupImageField";
+import { GroupSectionHeader } from "./GroupSection";
+import type { FkOption } from "./FkMultiSearchSelector";
+
+type GroupAccumulatorsPanelProps = {
+  groupId: string;
+  groupRole?: AuthorGroupMemberRole;
+};
+
+type AccumulatorFormState = {
+  title: string;
+  target_count: string;
+  start_date: string | null;
+  end_date: string | null;
+  image_key: string | null;
+  image_preview: string | null;
+  preset: FkOption | null;
+};
+
+const emptyFormState = (): AccumulatorFormState => ({
+  title: "",
+  target_count: "",
+  start_date: null,
+  end_date: null,
+  image_key: null,
+  image_preview: null,
+  preset: null,
+});
+
+function formStateFromAccumulator(
+  accumulator: GroupAccumulatorDTO,
+): AccumulatorFormState {
+  return {
+    title: accumulator.title ?? "",
+    target_count:
+      accumulator.target_count != null ? String(accumulator.target_count) : "",
+    start_date: accumulator.start_date,
+    end_date: accumulator.end_date,
+    image_key: accumulator.image_key,
+    image_preview: resolveGroupAccumulatorImageUrl(accumulator),
+    preset: accumulator.preset_accumulator_id
+      ? { id: accumulator.preset_accumulator_id, title: "Linked preset" }
+      : null,
+  };
+}
+
+function formatAccumulatorDate(value: string | null): string {
+  if (!value) return "—";
+  try {
+    return format(fromBackendISO(value), "MMM d, yyyy");
+  } catch {
+    return value;
+  }
+}
+
+const GroupAccumulatorsPanel = ({
+  groupId,
+  groupRole,
+}: GroupAccumulatorsPanelProps) => {
+  const queryClient = useQueryClient();
+  const { data: userInfo } = useUserInfo();
+  const platformReadOnly = isReviewer(userInfo?.platform_role);
+  const canCreate =
+    !platformReadOnly && groupRole != null && groupRole !== "VIEWER";
+  const canManage =
+    !platformReadOnly &&
+    canChangeContentStatus(groupRole, userInfo?.platform_role);
+
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editing, setEditing] = useState<GroupAccumulatorDTO | null>(null);
+  const [form, setForm] = useState<AccumulatorFormState>(emptyFormState);
+  const [imageDialogOpen, setImageDialogOpen] = useState(false);
+  const [imageUploading, setImageUploading] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<GroupAccumulatorDTO | null>(
+    null,
+  );
+  const [presetSearchOpen, setPresetSearchOpen] = useState(false);
+  const [presetQuery, setPresetQuery] = useState("");
+  const [presetResults, setPresetResults] = useState<FkOption[]>([]);
+  const [presetLoading, setPresetLoading] = useState(false);
+  const [startDateOpen, setStartDateOpen] = useState(false);
+  const [endDateOpen, setEndDateOpen] = useState(false);
+
+  const { data, isLoading, isError, error } = useQuery({
+    queryKey: ["cms-group-accumulators", groupId],
+    queryFn: () => fetchGroupAccumulators(groupId),
+    refetchOnWindowFocus: false,
+  });
+
+  const accumulators = data?.accumulators ?? [];
+
+  useEffect(() => {
+    if (!dialogOpen || !form.preset || form.preset.title !== "Linked preset") {
+      return;
+    }
+    let cancelled = false;
+    searchAccumulatorPresets({ limit: 100 }).then((result) => {
+      if (cancelled) return;
+      const match = result.items.find(
+        (preset) => preset.id === form.preset?.id,
+      );
+      if (match) {
+        setForm((prev) => ({ ...prev, preset: match }));
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [dialogOpen, form.preset]);
+
+  useEffect(() => {
+    if (!presetSearchOpen) return;
+    const timer = setTimeout(async () => {
+      setPresetLoading(true);
+      try {
+        const result = await searchAccumulatorPresets({
+          search: presetQuery,
+          limit: 20,
+        });
+        setPresetResults(result.items);
+      } catch {
+        setPresetResults([]);
+      } finally {
+        setPresetLoading(false);
+      }
+    }, 400);
+    return () => clearTimeout(timer);
+  }, [presetSearchOpen, presetQuery]);
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({
+      queryKey: ["cms-group-accumulators", groupId],
+    });
+  };
+
+  const toastOnError = (err: unknown) => toast.error(getApiErrorMessage(err));
+
+  const openCreate = () => {
+    setEditing(null);
+    setForm(emptyFormState());
+    setDialogOpen(true);
+  };
+
+  const openEdit = (accumulator: GroupAccumulatorDTO) => {
+    setEditing(accumulator);
+    setForm(formStateFromAccumulator(accumulator));
+    setDialogOpen(true);
+  };
+
+  const closeDialog = () => {
+    setDialogOpen(false);
+    setEditing(null);
+    setForm(emptyFormState());
+    setPresetQuery("");
+    setPresetResults([]);
+  };
+
+  const buildPayload = () => {
+    const targetRaw = form.target_count.trim();
+    const target_count =
+      targetRaw === "" ? null : Math.max(1, Number.parseInt(targetRaw, 10));
+
+    return {
+      accumulator_id: form.preset?.id ?? null,
+      title: form.title.trim() || null,
+      image_key: form.image_key,
+      target_count: Number.isFinite(target_count) ? target_count : null,
+      start_date: form.start_date,
+      end_date: form.end_date,
+    };
+  };
+
+  const createMutation = useMutation({
+    mutationFn: () => createGroupAccumulator(groupId, buildPayload()),
+    onSuccess: () => {
+      toast.success("Accumulator created");
+      invalidate();
+      closeDialog();
+    },
+    onError: toastOnError,
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: () =>
+      updateGroupAccumulator(groupId, editing!.id, buildPayload()),
+    onSuccess: () => {
+      toast.success("Accumulator updated");
+      invalidate();
+      closeDialog();
+    },
+    onError: toastOnError,
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (accumulatorId: string) =>
+      deleteGroupAccumulator(groupId, accumulatorId),
+    onSuccess: () => {
+      toast.success("Accumulator deleted");
+      setDeleteTarget(null);
+      invalidate();
+    },
+    onError: toastOnError,
+  });
+
+  const handleImageUpload = async (file: File) => {
+    setImageUploading(true);
+    try {
+      const { image, key } = await uploadImageToS3(file, groupId);
+      setForm((prev) => ({
+        ...prev,
+        image_key: key,
+        image_preview: image.original,
+      }));
+      setImageDialogOpen(false);
+      toast.success("Image uploaded");
+    } catch {
+      toast.error("Failed to upload image");
+    } finally {
+      setImageUploading(false);
+    }
+  };
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    if (editing) {
+      updateMutation.mutate();
+      return;
+    }
+    createMutation.mutate();
+  };
+
+  const isSaving = createMutation.isPending || updateMutation.isPending;
+
+  const dialogTitle = editing ? "Edit accumulator" : "Create accumulator";
+
+  const presetTriggerLabel = useMemo(() => {
+    if (form.preset) return form.preset.title;
+    return "None (optional)";
+  }, [form.preset]);
+
+  return (
+    <div className="space-y-4">
+      <GroupSectionHeader
+        title="Accumulators"
+        action={
+          canCreate ? (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={openCreate}
+            >
+              <IoMdAdd className="h-4 w-4" /> Add accumulator
+            </Button>
+          ) : undefined
+        }
+      />
+
+      {isError ? (
+        <p className="text-sm text-destructive">{getApiErrorMessage(error)}</p>
+      ) : isLoading ? (
+        <p className="text-sm text-muted-foreground">Loading accumulators…</p>
+      ) : accumulators.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          No group accumulators yet.
+          {canCreate ? " Use the button above to create one." : null}
+        </p>
+      ) : (
+        <div className="space-y-3">
+          {accumulators.map((accumulator) => {
+            const imageUrl = resolveGroupAccumulatorImageUrl(accumulator);
+            return (
+              <div
+                key={accumulator.id}
+                className="flex flex-col sm:flex-row sm:items-center gap-4 rounded-lg border bg-white dark:bg-[#1e1e1e] p-4"
+              >
+                {imageUrl ? (
+                  <img
+                    src={imageUrl}
+                    alt=""
+                    className="w-16 h-16 rounded object-cover border shrink-0"
+                  />
+                ) : (
+                  <div className="w-16 h-16 rounded border bg-muted shrink-0" />
+                )}
+                <div className="flex-1 min-w-0 space-y-1">
+                  <p className="font-medium truncate">
+                    {accumulator.title?.trim() || "Untitled accumulator"}
+                  </p>
+                  <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground">
+                    <span>
+                      Target:{" "}
+                      {accumulator.target_count != null
+                        ? accumulator.target_count.toLocaleString()
+                        : "—"}
+                    </span>
+                    <span>
+                      Start: {formatAccumulatorDate(accumulator.start_date)}
+                    </span>
+                    <span>
+                      End: {formatAccumulatorDate(accumulator.end_date)}
+                    </span>
+                    <span>
+                      Joined:{" "}
+                      {accumulator.member_count != null
+                        ? accumulator.member_count.toLocaleString()
+                        : "—"}
+                    </span>
+                  </div>
+                </div>
+                {canManage ? (
+                  <div className="flex gap-2 shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => openEdit(accumulator)}
+                    >
+                      Edit
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="text-destructive hover:text-destructive"
+                      onClick={() => setDeleteTarget(accumulator)}
+                    >
+                      Delete
+                    </Button>
+                  </div>
+                ) : null}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <Pecha.Dialog
+        open={dialogOpen}
+        onOpenChange={(open) => {
+          if (!open) closeDialog();
+        }}
+      >
+        <Pecha.DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
+          <Pecha.DialogHeader>
+            <Pecha.DialogTitle>{dialogTitle}</Pecha.DialogTitle>
+          </Pecha.DialogHeader>
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div className="space-y-2">
+              <label className="text-sm font-bold" htmlFor="accumulator-title">
+                Title
+              </label>
+              <Pecha.Input
+                id="accumulator-title"
+                value={form.title}
+                onChange={(e) =>
+                  setForm((prev) => ({ ...prev, title: e.target.value }))
+                }
+                placeholder="e.g. 100 Million Mani Retreat"
+                className="h-12 bg-white dark:bg-[#262626]"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-bold" htmlFor="accumulator-target">
+                Target count
+              </label>
+              <Pecha.Input
+                id="accumulator-target"
+                type="number"
+                min={1}
+                value={form.target_count}
+                onChange={(e) =>
+                  setForm((prev) => ({ ...prev, target_count: e.target.value }))
+                }
+                placeholder="e.g. 100000000"
+                className="h-12 bg-white dark:bg-[#262626]"
+              />
+            </div>
+
+            <div className="grid sm:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <p className="text-sm font-bold">Start date</p>
+                <Pecha.Popover
+                  open={startDateOpen}
+                  onOpenChange={setStartDateOpen}
+                >
+                  <Pecha.PopoverTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      className="h-12 w-full justify-start gap-2 px-3 font-normal"
+                    >
+                      <IoCalendarClearOutline className="h-4 w-4 text-muted-foreground" />
+                      <span
+                        className={
+                          form.start_date
+                            ? "text-foreground"
+                            : "text-muted-foreground"
+                        }
+                      >
+                        {form.start_date
+                          ? formatAccumulatorDate(form.start_date)
+                          : "Choose date"}
+                      </span>
+                    </Button>
+                  </Pecha.PopoverTrigger>
+                  <Pecha.PopoverContent className="w-auto p-0" align="start">
+                    <Pecha.Calendar
+                      mode="single"
+                      selected={
+                        form.start_date
+                          ? fromBackendISO(form.start_date)
+                          : undefined
+                      }
+                      onSelect={(d) => {
+                        setStartDateOpen(false);
+                        setForm((prev) => ({
+                          ...prev,
+                          start_date: d ? toBackendISO(d) : null,
+                        }));
+                      }}
+                    />
+                  </Pecha.PopoverContent>
+                </Pecha.Popover>
+              </div>
+
+              <div className="space-y-2">
+                <p className="text-sm font-bold">End date</p>
+                <Pecha.Popover open={endDateOpen} onOpenChange={setEndDateOpen}>
+                  <Pecha.PopoverTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      className="h-12 w-full justify-start gap-2 px-3 font-normal"
+                    >
+                      <IoCalendarClearOutline className="h-4 w-4 text-muted-foreground" />
+                      <span
+                        className={
+                          form.end_date
+                            ? "text-foreground"
+                            : "text-muted-foreground"
+                        }
+                      >
+                        {form.end_date
+                          ? formatAccumulatorDate(form.end_date)
+                          : "Choose date"}
+                      </span>
+                    </Button>
+                  </Pecha.PopoverTrigger>
+                  <Pecha.PopoverContent className="w-auto p-0" align="start">
+                    <Pecha.Calendar
+                      mode="single"
+                      selected={
+                        form.end_date
+                          ? fromBackendISO(form.end_date)
+                          : undefined
+                      }
+                      onSelect={(d) => {
+                        setEndDateOpen(false);
+                        setForm((prev) => ({
+                          ...prev,
+                          end_date: d ? toBackendISO(d) : null,
+                        }));
+                      }}
+                    />
+                  </Pecha.PopoverContent>
+                </Pecha.Popover>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <p className="text-sm font-bold">Linked preset</p>
+              <Pecha.Popover
+                open={presetSearchOpen}
+                onOpenChange={(open) => {
+                  setPresetSearchOpen(open);
+                  if (!open) setPresetQuery("");
+                }}
+              >
+                <Pecha.PopoverTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="h-12 w-full justify-between font-normal"
+                  >
+                    <span
+                      className={
+                        form.preset
+                          ? "text-foreground"
+                          : "text-muted-foreground"
+                      }
+                    >
+                      {presetTriggerLabel}
+                    </span>
+                  </Button>
+                </Pecha.PopoverTrigger>
+                <Pecha.PopoverContent
+                  className="w-[--radix-popover-trigger-width] p-0"
+                  align="start"
+                >
+                  <Pecha.Command shouldFilter={false}>
+                    <Pecha.CommandInput
+                      placeholder="Search presets…"
+                      value={presetQuery}
+                      onValueChange={setPresetQuery}
+                    />
+                    <Pecha.CommandList>
+                      <Pecha.CommandGroup>
+                        <Pecha.CommandItem
+                          value="__none__"
+                          onSelect={() => {
+                            setForm((prev) => ({ ...prev, preset: null }));
+                            setPresetSearchOpen(false);
+                          }}
+                        >
+                          None
+                        </Pecha.CommandItem>
+                        {presetLoading ? (
+                          <Pecha.CommandItem disabled value="__loading__">
+                            Searching…
+                          </Pecha.CommandItem>
+                        ) : (
+                          presetResults.map((preset) => (
+                            <Pecha.CommandItem
+                              key={preset.id}
+                              value={preset.id}
+                              onSelect={() => {
+                                setForm((prev) => ({ ...prev, preset }));
+                                setPresetSearchOpen(false);
+                              }}
+                            >
+                              {preset.title}
+                            </Pecha.CommandItem>
+                          ))
+                        )}
+                      </Pecha.CommandGroup>
+                    </Pecha.CommandList>
+                  </Pecha.Command>
+                </Pecha.PopoverContent>
+              </Pecha.Popover>
+              <p className="text-xs text-muted-foreground">
+                Optional link to a public mantra preset users count with.
+              </p>
+            </div>
+
+            <GroupImageField
+              label="Cover image"
+              displayUrl={form.image_preview}
+              hasStoredImage={Boolean(form.image_key)}
+              onUploadClick={() => setImageDialogOpen(true)}
+              imageClassName="w-full max-w-xs h-32 rounded object-cover border"
+            />
+
+            <div className="flex justify-end gap-2 pt-2">
+              <Button type="button" variant="outline" onClick={closeDialog}>
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                className="bg-[#A51C21] text-white hover:bg-[#A51C21]/90"
+                disabled={isSaving}
+              >
+                {isSaving ? "Saving…" : editing ? "Save changes" : "Create"}
+              </Button>
+            </div>
+          </form>
+        </Pecha.DialogContent>
+      </Pecha.Dialog>
+
+      <Pecha.Dialog open={imageDialogOpen} onOpenChange={setImageDialogOpen}>
+        <Pecha.DialogContent>
+          <Pecha.DialogHeader>
+            <Pecha.DialogTitle>Upload cover image</Pecha.DialogTitle>
+          </Pecha.DialogHeader>
+          <ImageContentData
+            onUpload={handleImageUpload}
+            isLoading={imageUploading}
+          />
+        </Pecha.DialogContent>
+      </Pecha.Dialog>
+
+      <Pecha.AlertDialog
+        open={deleteTarget != null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null);
+        }}
+      >
+        <Pecha.AlertDialogContent>
+          <Pecha.AlertDialogHeader>
+            <Pecha.AlertDialogTitle>Delete accumulator?</Pecha.AlertDialogTitle>
+            <Pecha.AlertDialogDescription>
+              This will remove &ldquo;
+              {deleteTarget?.title?.trim() || "Untitled accumulator"}&rdquo;
+              from the group. This action cannot be undone.
+            </Pecha.AlertDialogDescription>
+          </Pecha.AlertDialogHeader>
+          <Pecha.AlertDialogFooter>
+            <Pecha.AlertDialogCancel>Cancel</Pecha.AlertDialogCancel>
+            <Pecha.AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => {
+                if (deleteTarget) deleteMutation.mutate(deleteTarget.id);
+              }}
+            >
+              {deleteMutation.isPending ? "Deleting…" : "Delete"}
+            </Pecha.AlertDialogAction>
+          </Pecha.AlertDialogFooter>
+        </Pecha.AlertDialogContent>
+      </Pecha.AlertDialog>
+    </div>
+  );
+};
+
+export default GroupAccumulatorsPanel;
diff --git a/src/components/routes/groups/components/GroupContentSection.tsx b/src/components/routes/groups/components/GroupContentSection.tsx
new file mode 100644
index 00000000..45c8672c
--- /dev/null
+++ b/src/components/routes/groups/components/GroupContentSection.tsx
@@ -0,0 +1,81 @@
+import { Link } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { IoMdAdd } from "react-icons/io";
+import { Button } from "@/components/ui/atoms/button";
+import { fetchGroupContentRows } from "../api/groupContentApi";
+import { DashboardContentTable } from "@/components/routes/dashboard/DashboardContentTable";
+import { useTranslate } from "@tolgee/react";
+import { ROUTES } from "@/routes/paths";
+import { isReviewer } from "@/lib/platformAccess";
+import type { UserInfo } from "@/hooks/useUserInfo";
+import type { AuthorGroupMemberRole } from "../api/groupsApi";
+import { GroupDetailCard } from "./GroupSection";
+
+type GroupContentSectionProps = {
+  groupId: string;
+  userInfo?: UserInfo | null;
+  groupRole?: AuthorGroupMemberRole;
+  readOnlyPlatform?: boolean;
+};
+
+const GroupContentSection = ({
+  groupId,
+  userInfo,
+  groupRole,
+  readOnlyPlatform = false,
+}: GroupContentSectionProps) => {
+  const { t } = useTranslate();
+  const platformReadOnly =
+    readOnlyPlatform || isReviewer(userInfo?.platform_role);
+  const canCreate =
+    !platformReadOnly && groupRole != null && groupRole !== "VIEWER";
+
+  const { data, isLoading, isError, error } = useQuery({
+    queryKey: ["dashboard-items", "group", groupId],
+    queryFn: () => fetchGroupContentRows(groupId, { pageSize: 100 }),
+    refetchOnWindowFocus: false,
+  });
+
+  const rows = data ?? [];
+
+  return (
+    <GroupDetailCard title="Group content">
+      {canCreate ? (
+        <div className="mb-4 flex flex-wrap gap-2">
+          <Button variant="outline" size="sm" asChild>
+            <Link to={ROUTES.groupPlanNew(groupId)}>
+              <IoMdAdd className="h-4 w-4" /> Add plan
+            </Link>
+          </Button>
+          <Button variant="outline" size="sm" asChild>
+            <Link to={ROUTES.groupSeriesNew(groupId)}>
+              <IoMdAdd className="h-4 w-4" /> Add series
+            </Link>
+          </Button>
+        </div>
+      ) : null}
+
+      {isError ? (
+        <p className="text-sm text-destructive">{String(error)}</p>
+      ) : rows.length === 0 && !isLoading ? (
+        <p className="text-sm text-muted-foreground">
+          No plans or series in this group yet.
+          {canCreate ? " Use the buttons above to add content." : null}
+        </p>
+      ) : (
+        <div className="overflow-x-auto">
+          <DashboardContentTable
+            rows={rows}
+            t={t}
+            handleFeatured={() => {}}
+            platformRole={userInfo?.platform_role}
+            groupRolesByGroupId={new Map([[groupId, groupRole]])}
+            userInfo={userInfo}
+          />
+        </div>
+      )}
+    </GroupDetailCard>
+  );
+};
+
+export default GroupContentSection;
diff --git a/src/components/routes/groups/components/GroupFormAssociationsPanel.tsx b/src/components/routes/groups/components/GroupFormAssociationsPanel.tsx
new file mode 100644
index 00000000..168c9880
--- /dev/null
+++ b/src/components/routes/groups/components/GroupFormAssociationsPanel.tsx
@@ -0,0 +1,73 @@
+import PlanTagSearchInput from "@/components/routes/create-plan/PlanTagSearchInput";
+import type { TagSummaryDTO } from "../api/groupsApi";
+import { mapGroupTagsToPlanTagSummaries } from "../api/groupPickerApi";
+import { GroupEditableSection } from "./GroupSection";
+import GroupSocialLinksEditor from "./GroupSocialLinksEditor";
+import type { GroupSocialLinkDTO } from "../api/groupsApi";
+
+type GroupFormAssociationsPanelProps = {
+  tagIds: string[];
+  onTagIdsChange: (ids: string[]) => void;
+  initialTags: TagSummaryDTO[];
+  socialLinks: GroupSocialLinkDTO[];
+  onSocialLinksChange: (links: GroupSocialLinkDTO[]) => void;
+  onSaveTags: () => void;
+  onSaveSocial: () => void;
+  tagsSaving: boolean;
+  socialSaving: boolean;
+  tagsSaveDisabled?: boolean;
+  socialSaveDisabled?: boolean;
+  readOnly?: boolean;
+};
+
+const GroupFormAssociationsPanel = ({
+  tagIds,
+  onTagIdsChange,
+  initialTags,
+  socialLinks,
+  onSocialLinksChange,
+  onSaveTags,
+  onSaveSocial,
+  tagsSaving,
+  socialSaving,
+  tagsSaveDisabled = false,
+  socialSaveDisabled = false,
+  readOnly = false,
+}: GroupFormAssociationsPanelProps) => (
+  <div className="w-full xl:w-1/2 xl:min-w-0 xl:pl-8 space-y-10">
+    <GroupEditableSection
+      title="Tags"
+      onSave={onSaveTags}
+      isSaving={tagsSaving}
+      saveDisabled={tagsSaveDisabled}
+      saveLabel="Save tags"
+      savingLabel="Saving…"
+      readOnly={readOnly}
+    >
+      <PlanTagSearchInput
+        value={tagIds}
+        onChange={onTagIdsChange}
+        hideLabel
+        initialTags={mapGroupTagsToPlanTagSummaries(initialTags)}
+      />
+    </GroupEditableSection>
+
+    <GroupEditableSection
+      title="Social links"
+      onSave={onSaveSocial}
+      isSaving={socialSaving}
+      saveDisabled={socialSaveDisabled}
+      saveLabel="Save links"
+      savingLabel="Saving…"
+      readOnly={readOnly}
+    >
+      <GroupSocialLinksEditor
+        value={socialLinks}
+        onChange={onSocialLinksChange}
+        hideLabel
+      />
+    </GroupEditableSection>
+  </div>
+);
+
+export default GroupFormAssociationsPanel;
diff --git a/src/components/routes/groups/components/GroupImageField.tsx b/src/components/routes/groups/components/GroupImageField.tsx
new file mode 100644
index 00000000..aa153036
--- /dev/null
+++ b/src/components/routes/groups/components/GroupImageField.tsx
@@ -0,0 +1,42 @@
+import { Button } from "@/components/ui/atoms/button";
+
+type GroupImageFieldProps = {
+  label: string;
+  displayUrl: string | null;
+  hasStoredImage: boolean;
+  onUploadClick: () => void;
+  imageClassName: string;
+  readOnly?: boolean;
+};
+
+const GroupImageField = ({
+  label,
+  displayUrl,
+  hasStoredImage,
+  onUploadClick,
+  imageClassName,
+  readOnly = false,
+}: GroupImageFieldProps) => (
+  <div className="space-y-2">
+    <p className="text-sm font-bold">{label}</p>
+    <div className="flex flex-col gap-3">
+      {displayUrl ? (
+        <img src={displayUrl} alt={label} className={imageClassName} />
+      ) : null}
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        className="w-fit"
+        disabled={readOnly}
+        onClick={onUploadClick}
+      >
+        {hasStoredImage
+          ? `Change ${label.toLowerCase()}`
+          : `Upload ${label.toLowerCase()}`}
+      </Button>
+    </div>
+  </div>
+);
+
+export default GroupImageField;
diff --git a/src/components/routes/groups/components/GroupInviteRespondButtons.tsx b/src/components/routes/groups/components/GroupInviteRespondButtons.tsx
new file mode 100644
index 00000000..fd0a06b0
--- /dev/null
+++ b/src/components/routes/groups/components/GroupInviteRespondButtons.tsx
@@ -0,0 +1,93 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/atoms/button";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import { ROUTES } from "@/routes/paths";
+import {
+  acceptGroupInvite,
+  isGroupInviteExpired,
+  rejectGroupInvite,
+  type GroupInviteDTO,
+} from "../api/groupsApi";
+
+type GroupInviteRespondButtonsProps = {
+  invite: GroupInviteDTO;
+  size?: "sm" | "default";
+  align?: "start" | "center";
+  onSettled?: () => void;
+};
+
+const GroupInviteRespondButtons = ({
+  invite,
+  size = "sm",
+  align = "center",
+  onSettled,
+}: GroupInviteRespondButtonsProps) => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const expired = isGroupInviteExpired(invite);
+  const disabled = expired || invite.status !== "PENDING";
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: ["cms-my-group-invites"] });
+    queryClient.invalidateQueries({ queryKey: ["cms-notifications"] });
+    queryClient.invalidateQueries({ queryKey: ["cms-groups"] });
+    queryClient.invalidateQueries({
+      queryKey: ["cms-group", invite.group_id],
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["cms-group-invites", invite.group_id],
+    });
+  };
+
+  const acceptMutation = useMutation({
+    mutationFn: () => acceptGroupInvite(invite.id),
+    onSuccess: (group) => {
+      toast.success("Invitation accepted");
+      invalidate();
+      onSettled?.();
+      navigate(ROUTES.group(group.id));
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const rejectMutation = useMutation({
+    mutationFn: () => rejectGroupInvite(invite.id),
+    onSuccess: () => {
+      toast.success("Invitation declined");
+      invalidate();
+      onSettled?.();
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const pending = acceptMutation.isPending || rejectMutation.isPending;
+
+  return (
+    <div
+      className={`flex flex-wrap gap-2 ${align === "center" ? "justify-center" : "justify-start"}`}
+    >
+      <Button
+        type="button"
+        size={size}
+        className="bg-[#A51C21] text-white hover:bg-[#A51C21]/90"
+        disabled={disabled || pending}
+        onClick={() => acceptMutation.mutate()}
+      >
+        {acceptMutation.isPending ? "Accepting…" : "Accept"}
+      </Button>
+      <Button
+        type="button"
+        size={size}
+        variant="outline"
+        disabled={disabled || pending}
+        onClick={() => rejectMutation.mutate()}
+      >
+        {rejectMutation.isPending ? "Declining…" : "Reject"}
+      </Button>
+    </div>
+  );
+};
+
+export default GroupInviteRespondButtons;
diff --git a/src/components/routes/groups/components/GroupInviteStatusBadge.tsx b/src/components/routes/groups/components/GroupInviteStatusBadge.tsx
new file mode 100644
index 00000000..9937151f
--- /dev/null
+++ b/src/components/routes/groups/components/GroupInviteStatusBadge.tsx
@@ -0,0 +1,23 @@
+import type { AuthorGroupInviteStatus } from "../api/groupsApi";
+
+const STATUS_STYLES: Record<AuthorGroupInviteStatus, string> = {
+  PENDING: "bg-amber-100 text-amber-900 dark:bg-amber-950 dark:text-amber-200",
+  ACCEPTED: "bg-green-100 text-green-900 dark:bg-green-950 dark:text-green-200",
+  REJECTED: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
+  REVOKED: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
+  EXPIRED: "bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-200",
+};
+
+type GroupInviteStatusBadgeProps = {
+  status: AuthorGroupInviteStatus;
+};
+
+const GroupInviteStatusBadge = ({ status }: GroupInviteStatusBadgeProps) => (
+  <span
+    className={`inline-flex rounded px-2 py-0.5 text-xs font-medium ${STATUS_STYLES[status]}`}
+  >
+    {status}
+  </span>
+);
+
+export default GroupInviteStatusBadge;
diff --git a/src/components/routes/groups/components/GroupInvitesAdminSection.tsx b/src/components/routes/groups/components/GroupInvitesAdminSection.tsx
new file mode 100644
index 00000000..2e117129
--- /dev/null
+++ b/src/components/routes/groups/components/GroupInvitesAdminSection.tsx
@@ -0,0 +1,287 @@
+import { useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { Button } from "@/components/ui/atoms/button";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import { useUserInfo } from "@/hooks/useUserInfo";
+import { shouldShowCmsActionsColumn } from "@/lib/platformAccess";
+import {
+  createGroupInvite,
+  fetchGroupInvites,
+  revokeGroupInvite,
+  formatGroupInviteInviter,
+  type AuthorGroupInviteStatus,
+  type AuthorGroupMemberRole,
+} from "../api/groupsApi";
+import {
+  canRevokeInvite,
+  inviteRoleOptions,
+  normalizeMemberRole,
+} from "../lib/groupPermissions";
+import { GroupSectionHeader } from "./GroupSection";
+import GroupInviteStatusBadge from "./GroupInviteStatusBadge";
+import InviteExpiryLabel from "./InviteExpiryLabel";
+
+const STATUS_FILTER_OPTIONS: {
+  value: "all" | AuthorGroupInviteStatus;
+  label: string;
+}[] = [
+  { value: "all", label: "All statuses" },
+  { value: "PENDING", label: "Pending" },
+  { value: "ACCEPTED", label: "Accepted" },
+  { value: "REJECTED", label: "Rejected" },
+  { value: "REVOKED", label: "Revoked" },
+  { value: "EXPIRED", label: "Expired" },
+];
+
+type GroupInvitesAdminSectionProps = {
+  groupId: string;
+  myRole: AuthorGroupMemberRole | undefined;
+};
+
+const GroupInvitesAdminSection = ({
+  groupId,
+  myRole,
+}: GroupInvitesAdminSectionProps) => {
+  const { data: userInfo } = useUserInfo();
+  const showActionsColumn = shouldShowCmsActionsColumn(userInfo?.platform_role);
+  const inviteTableColSpan = showActionsColumn ? 6 : 5;
+  const queryClient = useQueryClient();
+  const [inviteOpen, setInviteOpen] = useState(false);
+  const [targetEmail, setTargetEmail] = useState("");
+  const [inviteRole, setInviteRole] = useState<AuthorGroupMemberRole>("AUTHOR");
+  const [statusFilter, setStatusFilter] = useState<
+    "all" | AuthorGroupInviteStatus
+  >("all");
+
+  const availableInviteRoles = useMemo(
+    () => inviteRoleOptions(myRole),
+    [myRole],
+  );
+
+  const statusParam = statusFilter === "all" ? undefined : statusFilter;
+
+  const { data: invitesData, isLoading } = useQuery({
+    queryKey: ["cms-group-invites", groupId, statusFilter],
+    queryFn: () => fetchGroupInvites(groupId, statusParam),
+    refetchOnWindowFocus: false,
+  });
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: ["cms-group", groupId] });
+    queryClient.invalidateQueries({ queryKey: ["cms-group-invites", groupId] });
+    queryClient.invalidateQueries({ queryKey: ["cms-my-group-invites"] });
+    queryClient.invalidateQueries({ queryKey: ["cms-notifications"] });
+  };
+
+  const inviteMutation = useMutation({
+    mutationFn: () =>
+      createGroupInvite(groupId, {
+        target_email: targetEmail.trim(),
+        role: inviteRole,
+      }),
+    onSuccess: () => {
+      toast.success("Invitation sent");
+      setInviteOpen(false);
+      setTargetEmail("");
+      setInviteRole(availableInviteRoles[0] ?? "AUTHOR");
+      invalidate();
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const revokeMutation = useMutation({
+    mutationFn: (inviteId: string) => revokeGroupInvite(groupId, inviteId),
+    onSuccess: () => {
+      toast.success("Invitation revoked");
+      invalidate();
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const invites = invitesData?.invites ?? [];
+
+  return (
+    <div className="space-y-4 border-t border-dashed border-gray-300 dark:border-input pt-8">
+      <GroupSectionHeader
+        title="Invitations"
+        action={
+          availableInviteRoles.length > 0 ? (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => setInviteOpen(true)}
+            >
+              Invite member
+            </Button>
+          ) : undefined
+        }
+      />
+
+      <div className="flex flex-wrap items-center gap-2">
+        <label className="text-sm text-muted-foreground">Status</label>
+        <Pecha.Select
+          value={statusFilter}
+          onValueChange={(v) =>
+            setStatusFilter(v as "all" | AuthorGroupInviteStatus)
+          }
+        >
+          <Pecha.SelectTrigger className="w-40 h-8">
+            <Pecha.SelectValue />
+          </Pecha.SelectTrigger>
+          <Pecha.SelectContent>
+            {STATUS_FILTER_OPTIONS.map((opt) => (
+              <Pecha.SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </Pecha.SelectItem>
+            ))}
+          </Pecha.SelectContent>
+        </Pecha.Select>
+      </div>
+
+      <div className="overflow-x-auto">
+        <Pecha.Table>
+          <Pecha.TableHeader>
+            <Pecha.TableRow>
+              <Pecha.TableHead>Email</Pecha.TableHead>
+              <Pecha.TableHead>Role</Pecha.TableHead>
+              <Pecha.TableHead>Status</Pecha.TableHead>
+              <Pecha.TableHead>Expires</Pecha.TableHead>
+              <Pecha.TableHead>Invited by</Pecha.TableHead>
+              {showActionsColumn ? (
+                <Pecha.TableHead className="text-right">
+                  Actions
+                </Pecha.TableHead>
+              ) : null}
+            </Pecha.TableRow>
+          </Pecha.TableHeader>
+          <Pecha.TableBody>
+            {isLoading ? (
+              <Pecha.TableRow>
+                <Pecha.TableCell
+                  colSpan={inviteTableColSpan}
+                  className="text-muted-foreground"
+                >
+                  Loading invitations…
+                </Pecha.TableCell>
+              </Pecha.TableRow>
+            ) : invites.length === 0 ? (
+              <Pecha.TableRow>
+                <Pecha.TableCell
+                  colSpan={inviteTableColSpan}
+                  className="text-muted-foreground"
+                >
+                  No invitations found
+                </Pecha.TableCell>
+              </Pecha.TableRow>
+            ) : (
+              invites.map((invite) => (
+                <Pecha.TableRow key={invite.id}>
+                  <Pecha.TableCell>{invite.target_email}</Pecha.TableCell>
+                  <Pecha.TableCell>
+                    {normalizeMemberRole(invite.role)}
+                  </Pecha.TableCell>
+                  <Pecha.TableCell>
+                    <GroupInviteStatusBadge status={invite.status} />
+                  </Pecha.TableCell>
+                  <Pecha.TableCell>
+                    <InviteExpiryLabel invite={invite} />
+                  </Pecha.TableCell>
+                  <Pecha.TableCell className="text-muted-foreground text-sm">
+                    {(() => {
+                      const inviter = formatGroupInviteInviter(invite);
+                      return inviter.name.toLowerCase() !==
+                        inviter.email.toLowerCase()
+                        ? `${inviter.name} (${inviter.email})`
+                        : inviter.email;
+                    })()}
+                  </Pecha.TableCell>
+                  {showActionsColumn ? (
+                    <Pecha.TableCell className="text-right">
+                      {invite.status === "PENDING" &&
+                        canRevokeInvite(myRole, invite) && (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="text-red-600 hover:text-red-700"
+                            disabled={revokeMutation.isPending}
+                            onClick={() => revokeMutation.mutate(invite.id)}
+                          >
+                            Revoke
+                          </Button>
+                        )}
+                    </Pecha.TableCell>
+                  ) : null}
+                </Pecha.TableRow>
+              ))
+            )}
+          </Pecha.TableBody>
+        </Pecha.Table>
+      </div>
+
+      <Pecha.Dialog open={inviteOpen} onOpenChange={setInviteOpen}>
+        <Pecha.DialogContent>
+          <Pecha.DialogHeader>
+            <Pecha.DialogTitle>Invite member</Pecha.DialogTitle>
+          </Pecha.DialogHeader>
+          <div className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              The invitee must already be a registered author. They will receive
+              an email and an in-app notification (valid for about 30 minutes).
+              Authors who previously left can be invited again if they are not
+              currently members and have no pending invite for this email.
+            </p>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Email</label>
+              <Pecha.Input
+                type="email"
+                value={targetEmail}
+                onChange={(e) => setTargetEmail(e.target.value)}
+                placeholder="author@example.org"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Role</label>
+              <Pecha.Select
+                value={inviteRole}
+                onValueChange={(v) => setInviteRole(v as AuthorGroupMemberRole)}
+              >
+                <Pecha.SelectTrigger>
+                  <Pecha.SelectValue />
+                </Pecha.SelectTrigger>
+                <Pecha.SelectContent>
+                  {availableInviteRoles.map((role) => (
+                    <Pecha.SelectItem key={role} value={role}>
+                      {role}
+                    </Pecha.SelectItem>
+                  ))}
+                </Pecha.SelectContent>
+              </Pecha.Select>
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setInviteOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                disabled={!targetEmail.trim() || inviteMutation.isPending}
+                onClick={() => inviteMutation.mutate()}
+              >
+                {inviteMutation.isPending ? "Sending…" : "Send invite"}
+              </Button>
+            </div>
+          </div>
+        </Pecha.DialogContent>
+      </Pecha.Dialog>
+    </div>
+  );
+};
+
+export default GroupInvitesAdminSection;
diff --git a/src/components/routes/groups/components/GroupMembersPanel.tsx b/src/components/routes/groups/components/GroupMembersPanel.tsx
new file mode 100644
index 00000000..de57bb92
--- /dev/null
+++ b/src/components/routes/groups/components/GroupMembersPanel.tsx
@@ -0,0 +1,268 @@
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { Button } from "@/components/ui/atoms/button";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import { useUserInfo } from "@/hooks/useUserInfo";
+import { isReviewer, shouldShowCmsActionsColumn } from "@/lib/platformAccess";
+import { ROUTES } from "@/routes/paths";
+import {
+  removeGroupMember,
+  updateGroupMemberRole,
+  type AuthorGroupMemberDTO,
+  type AuthorGroupMemberRole,
+} from "../api/groupsApi";
+import {
+  canManageGroupInvites,
+  canShowMemberRemovalAction,
+  canTransferOwnership,
+  getEffectiveGroupRole,
+  isCurrentGroupMember,
+  normalizeMemberRole,
+  roleChangeOptions,
+  transferOwnershipCandidates,
+} from "../lib/groupPermissions";
+import GroupInvitesAdminSection from "./GroupInvitesAdminSection";
+import { GroupSectionHeader } from "./GroupSection";
+import GroupTransferOwnershipDialog from "./GroupTransferOwnershipDialog";
+
+type GroupMembersPanelProps = {
+  groupId: string;
+  members: AuthorGroupMemberDTO[];
+};
+
+const GroupMembersPanel = ({ groupId, members }: GroupMembersPanelProps) => {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const { data: userInfo } = useUserInfo();
+  const actor = userInfo
+    ? {
+        id: userInfo.id,
+        email: userInfo.email,
+        platform_role: userInfo.platform_role,
+      }
+    : undefined;
+  const myRole = getEffectiveGroupRole(members, actor);
+  const platformReadOnly = isReviewer(userInfo?.platform_role);
+  const showActionsColumn = shouldShowCmsActionsColumn(userInfo?.platform_role);
+  const [removeTarget, setRemoveTarget] = useState<AuthorGroupMemberDTO | null>(
+    null,
+  );
+  const [transferOpen, setTransferOpen] = useState(false);
+
+  const showTransferOwnership =
+    !platformReadOnly && canTransferOwnership(members, actor);
+  const showInvitesSection = !platformReadOnly && canManageGroupInvites(myRole);
+  const transferCandidates = transferOwnershipCandidates(members, actor);
+
+  const leavingSelf =
+    removeTarget != null && isCurrentGroupMember(removeTarget, actor);
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: ["cms-group", groupId] });
+  };
+
+  const roleMutation = useMutation({
+    mutationFn: ({
+      authorId,
+      role,
+    }: {
+      authorId: string;
+      role: AuthorGroupMemberRole;
+    }) => updateGroupMemberRole(groupId, authorId, { role }),
+    onSuccess: () => {
+      toast.success("Member role updated");
+      invalidate();
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const removeMutation = useMutation({
+    mutationFn: ({ authorId }: { authorId: string; isSelf: boolean }) =>
+      removeGroupMember(groupId, authorId),
+    onSuccess: (_data, { isSelf }) => {
+      setRemoveTarget(null);
+      if (isSelf) {
+        toast.success("You left the group");
+        queryClient.invalidateQueries({ queryKey: ["cms-groups"] });
+        navigate(ROUTES.groups);
+        return;
+      }
+      toast.success("Member removed");
+      invalidate();
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <GroupSectionHeader
+          title={`Members (${members.length})`}
+          action={
+            showTransferOwnership ? (
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                onClick={() => setTransferOpen(true)}
+              >
+                Transfer ownership
+              </Button>
+            ) : undefined
+          }
+        />
+
+        <div className="overflow-x-auto">
+          <Pecha.Table>
+            <Pecha.TableHeader>
+              <Pecha.TableRow>
+                <Pecha.TableHead>Name</Pecha.TableHead>
+                <Pecha.TableHead>Email</Pecha.TableHead>
+                <Pecha.TableHead>Role</Pecha.TableHead>
+                {showActionsColumn ? (
+                  <Pecha.TableHead className="text-right">
+                    Actions
+                  </Pecha.TableHead>
+                ) : null}
+              </Pecha.TableRow>
+            </Pecha.TableHeader>
+            <Pecha.TableBody>
+              {members.map((member) => {
+                const isSelf = isCurrentGroupMember(member, actor);
+                const displayRole = normalizeMemberRole(member.role);
+                const assignableRoles = roleChangeOptions(
+                  myRole,
+                  member,
+                  actor,
+                );
+                const showRemoval = canShowMemberRemovalAction(
+                  members,
+                  myRole,
+                  member,
+                  actor,
+                );
+
+                return (
+                  <Pecha.TableRow key={member.author_id}>
+                    <Pecha.TableCell>
+                      {member.firstname} {member.lastname}
+                    </Pecha.TableCell>
+                    <Pecha.TableCell className="text-muted-foreground">
+                      {member.email}
+                    </Pecha.TableCell>
+                    <Pecha.TableCell>
+                      {assignableRoles && !platformReadOnly ? (
+                        <Pecha.Select
+                          value={displayRole}
+                          onValueChange={(role) =>
+                            roleMutation.mutate({
+                              authorId: member.author_id,
+                              role: role as AuthorGroupMemberRole,
+                            })
+                          }
+                          disabled={roleMutation.isPending}
+                        >
+                          <Pecha.SelectTrigger className="w-32 h-8">
+                            <Pecha.SelectValue />
+                          </Pecha.SelectTrigger>
+                          <Pecha.SelectContent>
+                            {assignableRoles.map((role) => (
+                              <Pecha.SelectItem key={role} value={role}>
+                                {role}
+                              </Pecha.SelectItem>
+                            ))}
+                          </Pecha.SelectContent>
+                        </Pecha.Select>
+                      ) : (
+                        <span className="text-sm">{displayRole}</span>
+                      )}
+                    </Pecha.TableCell>
+                    {showActionsColumn ? (
+                      <Pecha.TableCell className="text-right">
+                        {showRemoval && (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="text-red-600 hover:text-red-700"
+                            onClick={() => setRemoveTarget(member)}
+                          >
+                            {isSelf ? "Leave" : "Remove"}
+                          </Button>
+                        )}
+                      </Pecha.TableCell>
+                    ) : null}
+                  </Pecha.TableRow>
+                );
+              })}
+            </Pecha.TableBody>
+          </Pecha.Table>
+        </div>
+      </div>
+
+      {showInvitesSection ? (
+        <GroupInvitesAdminSection groupId={groupId} myRole={myRole} />
+      ) : null}
+
+      {showTransferOwnership && (
+        <GroupTransferOwnershipDialog
+          groupId={groupId}
+          open={transferOpen}
+          onOpenChange={setTransferOpen}
+          candidates={transferCandidates}
+          onSuccess={() => {
+            queryClient.invalidateQueries({ queryKey: ["cms-groups"] });
+            invalidate();
+          }}
+        />
+      )}
+
+      <Pecha.AlertDialog
+        open={!!removeTarget}
+        onOpenChange={(open) => !open && setRemoveTarget(null)}
+      >
+        <Pecha.AlertDialogContent>
+          <Pecha.AlertDialogHeader>
+            <Pecha.AlertDialogTitle>
+              {leavingSelf ? "Leave group?" : "Remove member?"}
+            </Pecha.AlertDialogTitle>
+            <Pecha.AlertDialogDescription>
+              {leavingSelf
+                ? "You will lose access to this group. You can rejoin only if invited again."
+                : `Remove ${removeTarget?.firstname} ${removeTarget?.lastname} from this group?`}
+            </Pecha.AlertDialogDescription>
+          </Pecha.AlertDialogHeader>
+          <Pecha.AlertDialogFooter>
+            <Pecha.AlertDialogCancel disabled={removeMutation.isPending}>
+              Cancel
+            </Pecha.AlertDialogCancel>
+            <Pecha.AlertDialogAction
+              className="bg-[#AD1B21] dark:text-white hover:bg-[#AD1B21]/90"
+              disabled={removeMutation.isPending}
+              onClick={() =>
+                removeTarget &&
+                removeMutation.mutate({
+                  authorId: removeTarget.author_id,
+                  isSelf: leavingSelf,
+                })
+              }
+            >
+              {removeMutation.isPending
+                ? leavingSelf
+                  ? "Leaving…"
+                  : "Removing…"
+                : leavingSelf
+                  ? "Leave"
+                  : "Remove"}
+            </Pecha.AlertDialogAction>
+          </Pecha.AlertDialogFooter>
+        </Pecha.AlertDialogContent>
+      </Pecha.AlertDialog>
+    </div>
+  );
+};
+
+export default GroupMembersPanel;
diff --git a/src/components/routes/groups/components/GroupMembersTable.tsx b/src/components/routes/groups/components/GroupMembersTable.tsx
new file mode 100644
index 00000000..53b56acf
--- /dev/null
+++ b/src/components/routes/groups/components/GroupMembersTable.tsx
@@ -0,0 +1,38 @@
+import { Pecha } from "@/components/ui/shadimport";
+import type { AuthorGroupMemberDTO } from "../api/groupsApi";
+import { normalizeMemberRole } from "../lib/groupPermissions";
+
+type GroupMembersTableProps = {
+  members: AuthorGroupMemberDTO[];
+};
+
+const GroupMembersTable = ({ members }: GroupMembersTableProps) => (
+  <div className="overflow-x-auto">
+    <Pecha.Table>
+      <Pecha.TableHeader>
+        <Pecha.TableRow>
+          <Pecha.TableHead>Name</Pecha.TableHead>
+          <Pecha.TableHead>Email</Pecha.TableHead>
+          <Pecha.TableHead>Role</Pecha.TableHead>
+        </Pecha.TableRow>
+      </Pecha.TableHeader>
+      <Pecha.TableBody>
+        {members.map((member) => (
+          <Pecha.TableRow key={member.author_id}>
+            <Pecha.TableCell>
+              {member.firstname} {member.lastname}
+            </Pecha.TableCell>
+            <Pecha.TableCell className="text-muted-foreground">
+              {member.email}
+            </Pecha.TableCell>
+            <Pecha.TableCell>
+              {normalizeMemberRole(member.role)}
+            </Pecha.TableCell>
+          </Pecha.TableRow>
+        ))}
+      </Pecha.TableBody>
+    </Pecha.Table>
+  </div>
+);
+
+export default GroupMembersTable;
diff --git a/src/components/routes/groups/components/GroupPageShell.tsx b/src/components/routes/groups/components/GroupPageShell.tsx
new file mode 100644
index 00000000..322e5069
--- /dev/null
+++ b/src/components/routes/groups/components/GroupPageShell.tsx
@@ -0,0 +1,76 @@
+import type { ReactNode } from "react";
+import { Button } from "@/components/ui/atoms/button";
+import AuthButton from "@/components/ui/molecules/auth-button/AuthButton";
+import GroupTitleWithAvatar from "./GroupTitleWithAvatar";
+
+const shellClassName =
+  "flex flex-col border h-[calc(100vh-40px)] overflow-hidden bg-[#F3F3F3] dark:bg-[#181818] my-4 rounded-l-2xl font-dynamic";
+
+type GroupPageShellProps = {
+  backLabel: string;
+  onBack: () => void;
+  title: string;
+  avatarUrl?: string | null;
+  subtitle?: ReactNode;
+  headerActions?: ReactNode;
+  nav?: ReactNode;
+  children: ReactNode;
+};
+
+export const GroupPageShell = ({
+  backLabel,
+  onBack,
+  title,
+  avatarUrl,
+  subtitle,
+  headerActions,
+  nav,
+  children,
+}: GroupPageShellProps) => (
+  <div className={shellClassName}>
+    <div className="shrink-0 mb-4 px-4 sm:px-8 pt-10 flex items-start justify-between gap-4">
+      <div className="min-w-0 flex-1">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="mb-2 -ml-2"
+          onClick={onBack}
+        >
+          {backLabel}
+        </Button>
+        <GroupTitleWithAvatar
+          title={title}
+          avatarUrl={avatarUrl}
+          size="md"
+          className="border-b border-dashed border-black dark:border-white pb-2"
+          titleClassName="text-xl font-bold"
+        />
+        {subtitle}
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        {headerActions}
+        <AuthButton />
+      </div>
+    </div>
+    <div className="border-b w-full border-dashed border-gray-300 dark:border-input shrink-0" />
+    {nav ? <div className="shrink-0">{nav}</div> : null}
+    <div className="flex-1 min-h-0 overflow-auto">{children}</div>
+  </div>
+);
+
+export const GroupListShell = ({
+  toolbar,
+  children,
+  footer,
+}: {
+  toolbar: ReactNode;
+  children: ReactNode;
+  footer?: ReactNode;
+}) => (
+  <div className={shellClassName}>
+    <div className="shrink-0">{toolbar}</div>
+    <div className="border-b w-full border-dashed border-gray-300 dark:border-input shrink-0" />
+    <div className="flex-1 min-h-0 overflow-auto">{children}</div>
+    {footer ? <div className="shrink-0">{footer}</div> : null}
+  </div>
+);
diff --git a/src/components/routes/groups/components/GroupSection.tsx b/src/components/routes/groups/components/GroupSection.tsx
new file mode 100644
index 00000000..b3dd29aa
--- /dev/null
+++ b/src/components/routes/groups/components/GroupSection.tsx
@@ -0,0 +1,76 @@
+import type { ReactNode } from "react";
+import { Button } from "@/components/ui/atoms/button";
+
+type GroupSectionHeaderProps = {
+  title: string;
+  action?: ReactNode;
+};
+
+export const GroupSectionHeader = ({
+  title,
+  action,
+}: GroupSectionHeaderProps) => (
+  <div className="flex items-center justify-between gap-3 border-b border-dashed pb-2">
+    <h2 className="text-base font-bold">{title}</h2>
+    {action}
+  </div>
+);
+
+type GroupEditableSectionProps = {
+  title: string;
+  onSave: () => void;
+  isSaving: boolean;
+  saveLabel: string;
+  savingLabel: string;
+  saveDisabled?: boolean;
+  readOnly?: boolean;
+  children: ReactNode;
+};
+
+export const GroupEditableSection = ({
+  title,
+  onSave,
+  isSaving,
+  saveLabel,
+  savingLabel,
+  saveDisabled = false,
+  readOnly = false,
+  children,
+}: GroupEditableSectionProps) => (
+  <section className="space-y-4">
+    <GroupSectionHeader
+      title={title}
+      action={
+        readOnly ? undefined : (
+          <Button
+            type="button"
+            size="sm"
+            disabled={isSaving || saveDisabled}
+            onClick={onSave}
+          >
+            {isSaving ? savingLabel : saveLabel}
+          </Button>
+        )
+      }
+    />
+    <fieldset
+      disabled={readOnly}
+      className="space-y-4 min-w-0 border-0 p-0 m-0"
+    >
+      {children}
+    </fieldset>
+  </section>
+);
+
+export const GroupDetailCard = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: ReactNode;
+}) => (
+  <section className="rounded-lg border bg-white dark:bg-[#1e1e1e] p-5 space-y-3">
+    <h2 className="text-sm font-bold border-b border-dashed pb-2">{title}</h2>
+    {children}
+  </section>
+);
diff --git a/src/components/routes/groups/components/GroupSocialLinksEditor.tsx b/src/components/routes/groups/components/GroupSocialLinksEditor.tsx
new file mode 100644
index 00000000..05c90675
--- /dev/null
+++ b/src/components/routes/groups/components/GroupSocialLinksEditor.tsx
@@ -0,0 +1,123 @@
+import { IoMdAdd, IoMdClose } from "react-icons/io";
+import { Pecha } from "@/components/ui/shadimport";
+import { Button } from "@/components/ui/atoms/button";
+import { SOCIAL_PLATFORMS, PLATFORM_PATTERNS } from "@/lib/constant";
+import type { GroupSocialLinkDTO } from "../api/groupsApi";
+
+type GroupSocialLinksEditorProps = {
+  value: GroupSocialLinkDTO[];
+  onChange: (links: GroupSocialLinkDTO[]) => void;
+  hideLabel?: boolean;
+};
+
+const getUrlError = (platform: string, url: string): string | null => {
+  if (!platform || !url || platform === "email") return null;
+  const pattern = PLATFORM_PATTERNS[platform];
+  if (pattern && !pattern.test(url)) {
+    return `URL must be a valid ${platform} link`;
+  }
+  return null;
+};
+
+const GroupSocialLinksEditor = ({
+  value,
+  onChange,
+  hideLabel = false,
+}: GroupSocialLinksEditorProps) => {
+  const addLink = () => {
+    onChange([...value, { platform: "website", url: "" }]);
+  };
+
+  const updateLink = (
+    index: number,
+    field: keyof GroupSocialLinkDTO,
+    fieldValue: string,
+  ) => {
+    const next = value.map((link, i) =>
+      i === index ? { ...link, [field]: fieldValue } : link,
+    );
+    onChange(next);
+  };
+
+  const removeLink = (index: number) => {
+    onChange(value.filter((_, i) => i !== index));
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        {!hideLabel ? (
+          <p className="text-sm font-bold">Social links</p>
+        ) : (
+          <span />
+        )}
+        <Button type="button" variant="outline" size="sm" onClick={addLink}>
+          <IoMdAdd className="w-4 h-4" /> Add link
+        </Button>
+      </div>
+
+      {value.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          No social links yet. Add platforms like website, X, or YouTube.
+        </p>
+      ) : (
+        <div className="space-y-3">
+          {value.map((link, index) => {
+            const urlError = getUrlError(link.platform, link.url);
+            return (
+              <div
+                key={index}
+                className="flex flex-col sm:flex-row gap-2 items-start sm:items-end border rounded-md p-3"
+              >
+                <div className="space-y-1 w-full sm:w-40">
+                  <label className="text-xs text-muted-foreground">
+                    Platform
+                  </label>
+                  <Pecha.Select
+                    value={link.platform}
+                    onValueChange={(v) => updateLink(index, "platform", v)}
+                  >
+                    <Pecha.SelectTrigger className="w-full">
+                      <Pecha.SelectValue placeholder="Platform" />
+                    </Pecha.SelectTrigger>
+                    <Pecha.SelectContent>
+                      <Pecha.SelectItem value="website">
+                        Website
+                      </Pecha.SelectItem>
+                      {SOCIAL_PLATFORMS.map((p) => (
+                        <Pecha.SelectItem key={p.value} value={p.value}>
+                          {p.label}
+                        </Pecha.SelectItem>
+                      ))}
+                    </Pecha.SelectContent>
+                  </Pecha.Select>
+                </div>
+                <div className="space-y-1 flex-1 w-full">
+                  <label className="text-xs text-muted-foreground">URL</label>
+                  <Pecha.Input
+                    value={link.url}
+                    onChange={(e) => updateLink(index, "url", e.target.value)}
+                    placeholder="https://…"
+                  />
+                  {urlError && (
+                    <p className="text-xs text-red-500">{urlError}</p>
+                  )}
+                </div>
+                <button
+                  type="button"
+                  onClick={() => removeLink(index)}
+                  className="p-2 text-muted-foreground hover:text-foreground shrink-0"
+                  aria-label="Remove link"
+                >
+                  <IoMdClose className="w-4 h-4" />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GroupSocialLinksEditor;
diff --git a/src/components/routes/groups/components/GroupTitleWithAvatar.tsx b/src/components/routes/groups/components/GroupTitleWithAvatar.tsx
new file mode 100644
index 00000000..f6267709
--- /dev/null
+++ b/src/components/routes/groups/components/GroupTitleWithAvatar.tsx
@@ -0,0 +1,39 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/atoms/avatar";
+import { cn } from "@/lib/utils";
+
+type GroupTitleWithAvatarProps = {
+  title: string;
+  avatarUrl?: string | null;
+  size?: "sm" | "md";
+  className?: string;
+  titleClassName?: string;
+};
+
+const sizeClasses = {
+  sm: "size-9",
+  md: "size-11",
+};
+
+const GroupTitleWithAvatar = ({
+  title,
+  avatarUrl,
+  size = "md",
+  className,
+  titleClassName,
+}: GroupTitleWithAvatarProps) => {
+  return (
+    <div className={cn("flex items-center gap-3 min-w-0", className)}>
+      <Avatar className={cn(sizeClasses[size], "shrink-0")}>
+        <AvatarImage src={avatarUrl ?? undefined} />
+        <AvatarFallback>{title.charAt(0)}</AvatarFallback>
+      </Avatar>
+      <span className={cn("truncate", titleClassName)}>{title}</span>
+    </div>
+  );
+};
+
+export default GroupTitleWithAvatar;
diff --git a/src/components/routes/groups/components/GroupTransferOwnershipDialog.tsx b/src/components/routes/groups/components/GroupTransferOwnershipDialog.tsx
new file mode 100644
index 00000000..f68702b7
--- /dev/null
+++ b/src/components/routes/groups/components/GroupTransferOwnershipDialog.tsx
@@ -0,0 +1,123 @@
+import { useEffect, useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { Button } from "@/components/ui/atoms/button";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import {
+  transferGroupOwnership,
+  type AuthorGroupMemberDTO,
+} from "../api/groupsApi";
+
+type GroupTransferOwnershipDialogProps = {
+  groupId: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  candidates: AuthorGroupMemberDTO[];
+  onSuccess: () => void;
+};
+
+const GroupTransferOwnershipDialog = ({
+  groupId,
+  open,
+  onOpenChange,
+  candidates,
+  onSuccess,
+}: GroupTransferOwnershipDialogProps) => {
+  const [selectedAuthorId, setSelectedAuthorId] = useState("");
+
+  useEffect(() => {
+    if (!open) {
+      setSelectedAuthorId("");
+      return;
+    }
+    setSelectedAuthorId(candidates[0]?.author_id ?? "");
+  }, [open, candidates]);
+
+  const transferMutation = useMutation({
+    mutationFn: () =>
+      transferGroupOwnership(groupId, {
+        new_owner_author_id: selectedAuthorId,
+      }),
+    onSuccess: () => {
+      toast.success("Ownership transferred");
+      onOpenChange(false);
+      onSuccess();
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const selectedMember = candidates.find(
+    (m) => m.author_id === selectedAuthorId,
+  );
+
+  return (
+    <Pecha.Dialog open={open} onOpenChange={onOpenChange}>
+      <Pecha.DialogContent>
+        <Pecha.DialogHeader>
+          <Pecha.DialogTitle>Transfer ownership</Pecha.DialogTitle>
+        </Pecha.DialogHeader>
+        <div className="space-y-4">
+          <p className="text-sm text-muted-foreground">
+            Choose a member to become the group owner. You will become an admin
+            and can still edit group settings.
+          </p>
+
+          {candidates.length === 0 ? (
+            <p className="text-sm text-muted-foreground">
+              Add another member before transferring ownership.
+            </p>
+          ) : (
+            <Pecha.Select
+              value={selectedAuthorId}
+              onValueChange={setSelectedAuthorId}
+            >
+              <Pecha.SelectTrigger className="w-full">
+                <Pecha.SelectValue placeholder="Select member" />
+              </Pecha.SelectTrigger>
+              <Pecha.SelectContent>
+                {candidates.map((member) => (
+                  <Pecha.SelectItem
+                    key={member.author_id}
+                    value={member.author_id}
+                  >
+                    {member.firstname} {member.lastname} ({member.email})
+                  </Pecha.SelectItem>
+                ))}
+              </Pecha.SelectContent>
+            </Pecha.Select>
+          )}
+
+          <div className="flex justify-end gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              disabled={transferMutation.isPending}
+              onClick={() => onOpenChange(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              className="bg-[#A51C21] text-white hover:bg-[#A51C21]/90"
+              disabled={
+                !selectedAuthorId ||
+                candidates.length === 0 ||
+                transferMutation.isPending
+              }
+              onClick={() => transferMutation.mutate()}
+            >
+              {transferMutation.isPending
+                ? "Transferring…"
+                : selectedMember
+                  ? `Transfer to ${selectedMember.firstname}`
+                  : "Transfer"}
+            </Button>
+          </div>
+        </div>
+      </Pecha.DialogContent>
+    </Pecha.Dialog>
+  );
+};
+
+export default GroupTransferOwnershipDialog;
diff --git a/src/components/routes/groups/components/GroupTransfersSection.tsx b/src/components/routes/groups/components/GroupTransfersSection.tsx
new file mode 100644
index 00000000..bb0e6122
--- /dev/null
+++ b/src/components/routes/groups/components/GroupTransfersSection.tsx
@@ -0,0 +1,389 @@
+import { useMemo } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/atoms/button";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import {
+  acceptTransferRequest,
+  fetchIncomingTransferRequests,
+  fetchOutgoingTransferRequests,
+  filterIncomingForGroup,
+  filterOutgoingForGroup,
+  isTransferRequestExpired,
+  rejectTransferRequest,
+  revokeTransferRequest,
+  type ContentTransferRequestDTO,
+} from "@/components/routes/content-transfer/api/transferApi";
+import { formatDistanceToNow } from "date-fns";
+import { GroupDetailCard } from "./GroupSection";
+
+type GroupTransfersSectionProps = {
+  groupId: string;
+  canManageIncoming: boolean;
+  canManageOutgoing: boolean;
+  alwaysVisible?: boolean;
+};
+
+function TransferRow({
+  req,
+  actions,
+}: {
+  req: ContentTransferRequestDTO;
+  actions: React.ReactNode;
+}) {
+  const expired = isTransferRequestExpired(req);
+  return (
+    <li className="flex flex-wrap items-center justify-between gap-2 border-b py-2 text-sm last:border-0">
+      <div>
+        <span className="font-medium capitalize">{req.content_type}</span>
+        {req.content_title ? `: ${req.content_title}` : null}
+        <span className="text-muted-foreground">
+          {" "}
+          · {req.status}
+          {req.source_group_title ||
+          req.target_group_title ||
+          req.source_group_id ||
+          req.target_group_id ? (
+            <>
+              {" "}
+              · {(req.source_group_title ?? req.source_group_id) || "—"} →{" "}
+              {(req.target_group_title ?? req.target_group_id) || "—"}
+            </>
+          ) : null}
+        </span>
+        {req.status === "PENDING" && req.expires_at && !expired ? (
+          <div className="mt-1 text-xs text-muted-foreground">
+            {formatDistanceToNow(new Date(req.expires_at))} left
+          </div>
+        ) : null}
+        {expired ? (
+          <div className="mt-1 text-xs text-muted-foreground">Expired</div>
+        ) : null}
+      </div>
+      <div className="flex gap-2">{expired ? null : actions}</div>
+    </li>
+  );
+}
+
+const GroupTransfersSection = ({
+  groupId,
+  canManageIncoming,
+  canManageOutgoing,
+  alwaysVisible = false,
+}: GroupTransfersSectionProps) => {
+  const queryClient = useQueryClient();
+
+  const {
+    data: incomingScoped,
+    isLoading: isIncomingScopedLoading,
+    isError: isIncomingScopedError,
+    error: incomingScopedError,
+  } = useQuery({
+    queryKey: ["transfer-requests", "incoming", "scoped", groupId],
+    queryFn: () => fetchIncomingTransferRequests(groupId),
+    refetchOnWindowFocus: true,
+  });
+
+  const {
+    data: incomingAll,
+    isLoading: isIncomingAllLoading,
+    isError: isIncomingAllError,
+    error: incomingAllError,
+  } = useQuery({
+    queryKey: ["transfer-requests", "incoming", "all"],
+    queryFn: () => fetchIncomingTransferRequests(),
+    refetchOnWindowFocus: true,
+  });
+
+  const {
+    data: outgoingScoped,
+    isLoading: isOutgoingScopedLoading,
+    isError: isOutgoingScopedError,
+    error: outgoingScopedError,
+  } = useQuery({
+    queryKey: ["transfer-requests", "outgoing", "scoped", groupId],
+    queryFn: () => fetchOutgoingTransferRequests(groupId),
+    refetchOnWindowFocus: true,
+  });
+
+  const {
+    data: outgoingAll,
+    isLoading: isOutgoingAllLoading,
+    isError: isOutgoingAllError,
+    error: outgoingAllError,
+  } = useQuery({
+    queryKey: ["transfer-requests", "outgoing", "all"],
+    queryFn: () => fetchOutgoingTransferRequests(),
+    refetchOnWindowFocus: true,
+  });
+
+  const incomingForGroup = useMemo(() => {
+    const all = incomingAll?.requests ?? [];
+    const scoped = incomingScoped?.requests ?? [];
+    const filtered = filterIncomingForGroup(all, groupId);
+    if (filtered.length > 0) return filtered;
+    if (scoped.length > 0) return scoped;
+    // API returned rows but group ids missing/wrong in JSON — still show them.
+    if (all.length > 0) return all;
+    return filterIncomingForGroup(scoped, groupId);
+  }, [incomingScoped?.requests, incomingAll?.requests, groupId]);
+
+  const outgoingForGroup = useMemo(() => {
+    const all = outgoingAll?.requests ?? [];
+    const scoped = outgoingScoped?.requests ?? [];
+    const filtered = filterOutgoingForGroup(all, groupId);
+    if (filtered.length > 0) return filtered;
+    if (scoped.length > 0) return scoped;
+    if (all.length > 0) return all;
+    return filterOutgoingForGroup(scoped, groupId);
+  }, [outgoingScoped?.requests, outgoingAll?.requests, groupId]);
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: ["transfer-requests"] });
+    queryClient.invalidateQueries({ queryKey: ["dashboard-items"] });
+    queryClient.invalidateQueries({ queryKey: ["cms-group", groupId] });
+    queryClient.invalidateQueries({ queryKey: ["cms-notifications"] });
+  };
+
+  const acceptMutation = useMutation({
+    mutationFn: acceptTransferRequest,
+    onSuccess: () => {
+      toast.success("Transfer accepted");
+      invalidate();
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const rejectMutation = useMutation({
+    mutationFn: rejectTransferRequest,
+    onSuccess: () => {
+      toast.success("Transfer rejected");
+      invalidate();
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const revokeMutation = useMutation({
+    mutationFn: revokeTransferRequest,
+    onSuccess: () => {
+      toast.success("Transfer revoked");
+      invalidate();
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const isLoading =
+    isIncomingScopedLoading ||
+    isIncomingAllLoading ||
+    isOutgoingScopedLoading ||
+    isOutgoingAllLoading;
+
+  const hasRequests =
+    incomingForGroup.length > 0 || outgoingForGroup.length > 0;
+
+  const hasApiData =
+    (incomingAll?.requests?.length ?? 0) > 0 ||
+    (outgoingAll?.requests?.length ?? 0) > 0;
+
+  const showCard = alwaysVisible || hasRequests || isLoading || hasApiData;
+
+  if (!showCard) {
+    return null;
+  }
+
+  const incomingError = isIncomingScopedError
+    ? incomingScopedError
+    : isIncomingAllError
+      ? incomingAllError
+      : null;
+
+  const outgoingError = isOutgoingScopedError
+    ? outgoingScopedError
+    : isOutgoingAllError
+      ? outgoingAllError
+      : null;
+
+  return (
+    <GroupDetailCard title="Content transfers">
+      {isLoading ? (
+        <p className="text-sm text-muted-foreground">Loading transfers…</p>
+      ) : null}
+
+      {incomingError ? (
+        <p className="text-sm text-destructive mb-3">
+          {getApiErrorMessage(
+            incomingError,
+            "Could not load incoming transfers",
+          )}
+        </p>
+      ) : null}
+
+      {outgoingError ? (
+        <p className="text-sm text-destructive mb-3">
+          {getApiErrorMessage(
+            outgoingError,
+            "Could not load outgoing transfers",
+          )}
+        </p>
+      ) : null}
+
+      {!isLoading && !hasRequests && hasApiData ? (
+        <>
+          <p className="text-sm text-amber-700 dark:text-amber-400 mb-3">
+            Transfer requests exist but could not be matched to this group ID.
+            Showing all incoming/outgoing for your account — accept from the
+            target group or use notifications.
+          </p>
+          {(incomingAll?.requests?.length ?? 0) > 0 ? (
+            <div className="mb-4">
+              <p className="text-xs font-semibold uppercase text-muted-foreground mb-2">
+                All incoming (account)
+              </p>
+              <ul>
+                {incomingAll!.requests.map((req) => (
+                  <TransferRow
+                    key={req.id}
+                    req={req}
+                    actions={
+                      canManageIncoming && req.status === "PENDING" ? (
+                        <>
+                          <Button
+                            size="sm"
+                            variant="default"
+                            disabled={
+                              acceptMutation.isPending ||
+                              rejectMutation.isPending
+                            }
+                            onClick={() => acceptMutation.mutate(req.id)}
+                          >
+                            Accept
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            disabled={
+                              acceptMutation.isPending ||
+                              rejectMutation.isPending
+                            }
+                            onClick={() => rejectMutation.mutate(req.id)}
+                          >
+                            Reject
+                          </Button>
+                        </>
+                      ) : null
+                    }
+                  />
+                ))}
+              </ul>
+            </div>
+          ) : null}
+          {(outgoingAll?.requests?.length ?? 0) > 0 ? (
+            <div>
+              <p className="text-xs font-semibold uppercase text-muted-foreground mb-2">
+                All outgoing (account)
+              </p>
+              <ul>
+                {outgoingAll!.requests.map((req) => (
+                  <TransferRow
+                    key={req.id}
+                    req={req}
+                    actions={
+                      canManageOutgoing && req.status === "PENDING" ? (
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          disabled={revokeMutation.isPending}
+                          onClick={() => revokeMutation.mutate(req.id)}
+                        >
+                          Revoke
+                        </Button>
+                      ) : null
+                    }
+                  />
+                ))}
+              </ul>
+            </div>
+          ) : null}
+        </>
+      ) : null}
+
+      {!isLoading && !hasRequests && !hasApiData ? (
+        <p className="text-sm text-muted-foreground">
+          No transfer requests for this group right now.
+        </p>
+      ) : null}
+
+      {incomingForGroup.length > 0 ? (
+        <div className="mb-4">
+          <p className="text-xs font-semibold uppercase text-muted-foreground mb-2">
+            Incoming
+          </p>
+          <ul>
+            {incomingForGroup.map((req) => (
+              <TransferRow
+                key={req.id}
+                req={req}
+                actions={
+                  canManageIncoming && req.status === "PENDING" ? (
+                    <>
+                      <Button
+                        size="sm"
+                        variant="default"
+                        disabled={
+                          acceptMutation.isPending || rejectMutation.isPending
+                        }
+                        onClick={() => acceptMutation.mutate(req.id)}
+                      >
+                        Accept
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        disabled={
+                          acceptMutation.isPending || rejectMutation.isPending
+                        }
+                        onClick={() => rejectMutation.mutate(req.id)}
+                      >
+                        Reject
+                      </Button>
+                    </>
+                  ) : null
+                }
+              />
+            ))}
+          </ul>
+        </div>
+      ) : null}
+
+      {outgoingForGroup.length > 0 ? (
+        <div>
+          <p className="text-xs font-semibold uppercase text-muted-foreground mb-2">
+            Outgoing
+          </p>
+          <ul>
+            {outgoingForGroup.map((req) => (
+              <TransferRow
+                key={req.id}
+                req={req}
+                actions={
+                  canManageOutgoing && req.status === "PENDING" ? (
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      disabled={revokeMutation.isPending}
+                      onClick={() => revokeMutation.mutate(req.id)}
+                    >
+                      Revoke
+                    </Button>
+                  ) : null
+                }
+              />
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </GroupDetailCard>
+  );
+};
+
+export default GroupTransfersSection;
diff --git a/src/components/routes/groups/components/InviteExpiryLabel.tsx b/src/components/routes/groups/components/InviteExpiryLabel.tsx
new file mode 100644
index 00000000..3f53977d
--- /dev/null
+++ b/src/components/routes/groups/components/InviteExpiryLabel.tsx
@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import { formatDistanceToNow } from "date-fns";
+import type { GroupInviteDTO } from "../api/groupsApi";
+import { isGroupInviteExpired } from "../api/groupsApi";
+
+type InviteExpiryLabelProps = {
+  invite: GroupInviteDTO;
+};
+
+const InviteExpiryLabel = ({ invite }: InviteExpiryLabelProps) => {
+  const [, setTick] = useState(0);
+
+  useEffect(() => {
+    if (isGroupInviteExpired(invite)) return;
+    const id = window.setInterval(() => setTick((t) => t + 1), 30_000);
+    return () => window.clearInterval(id);
+  }, [invite.expires_at, invite.status]);
+
+  if (isGroupInviteExpired(invite)) {
+    return <span className="text-muted-foreground">Expired</span>;
+  }
+
+  return (
+    <span className="text-muted-foreground">
+      {formatDistanceToNow(new Date(invite.expires_at), { addSuffix: false })}{" "}
+      left
+    </span>
+  );
+};
+
+export default InviteExpiryLabel;
diff --git a/src/components/routes/groups/components/PendingGroupInvitationsBlock.tsx b/src/components/routes/groups/components/PendingGroupInvitationsBlock.tsx
new file mode 100644
index 00000000..94590763
--- /dev/null
+++ b/src/components/routes/groups/components/PendingGroupInvitationsBlock.tsx
@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Pecha } from "@/components/ui/shadimport";
+import {
+  fetchMyPendingGroupInvites,
+  formatGroupInviteInviter,
+} from "../api/groupsApi";
+import GroupInviteRespondButtons from "./GroupInviteRespondButtons";
+import InviteExpiryLabel from "./InviteExpiryLabel";
+
+const PendingGroupInvitationsBlock = () => {
+  const [dismissed, setDismissed] = useState(false);
+
+  const { data: invitesData, isLoading } = useQuery({
+    queryKey: ["cms-my-group-invites"],
+    queryFn: fetchMyPendingGroupInvites,
+    refetchOnWindowFocus: true,
+  });
+
+  const invites = invitesData?.invites ?? [];
+  const open = !isLoading && invites.length > 0 && !dismissed;
+
+  if (isLoading || invites.length === 0) return null;
+
+  return (
+    <Pecha.Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) setDismissed(true);
+      }}
+    >
+      <Pecha.DialogContent className="max-w-md gap-0 p-0 overflow-hidden">
+        <div className="flex items-start justify-between gap-3 border-b px-4 py-3">
+          <div className="min-w-0">
+            <Pecha.DialogHeader className="space-y-1 p-0 text-left">
+              <Pecha.DialogTitle>Group invitations</Pecha.DialogTitle>
+            </Pecha.DialogHeader>
+            <p className="text-sm text-muted-foreground mt-1">
+              {invites.length === 1
+                ? "You have a pending invitation."
+                : `You have ${invites.length} pending invitations.`}
+            </p>
+          </div>
+        </div>
+
+        <ul className="max-h-[min(20rem,60vh)] overflow-y-auto divide-y">
+          {invites.map((invite) => {
+            const inviter = formatGroupInviteInviter(invite);
+            return (
+              <li key={invite.id} className="px-4 py-4 space-y-3">
+                <div>
+                  <p className="font-medium leading-snug">
+                    {invite.group_name?.trim() || "Untitled group"}
+                  </p>
+                  <p className="text-xs text-muted-foreground mt-1">
+                    Invited by {inviter.name}
+                    {inviter.name.toLowerCase() !==
+                      inviter.email.toLowerCase() && (
+                      <>
+                        <span className="mx-1">·</span>
+                        {inviter.email}
+                      </>
+                    )}
+                  </p>
+                  <p className="text-xs text-muted-foreground mt-1">
+                    Role: {invite.role}
+                    <span className="mx-1.5">·</span>
+                    <InviteExpiryLabel invite={invite} />
+                  </p>
+                </div>
+                <GroupInviteRespondButtons invite={invite} align="start" />
+              </li>
+            );
+          })}
+        </ul>
+      </Pecha.DialogContent>
+    </Pecha.Dialog>
+  );
+};
+
+export default PendingGroupInvitationsBlock;
diff --git a/src/components/routes/groups/components/events/EventDateSection.tsx b/src/components/routes/groups/components/events/EventDateSection.tsx
new file mode 100644
index 00000000..edb13edc
--- /dev/null
+++ b/src/components/routes/groups/components/events/EventDateSection.tsx
@@ -0,0 +1,119 @@
+import { useState } from "react";
+import type { UseFormReturn } from "react-hook-form";
+import { IoCalendarClearOutline } from "react-icons/io5";
+import { format } from "date-fns";
+import { Pecha } from "@/components/ui/shadimport";
+import { fromBackendISO, toBackendISO } from "@/lib/utils";
+import type { EventFormData } from "@/schema/EventSchema";
+
+type EventDateSectionProps = {
+  form: UseFormReturn<EventFormData>;
+  isOneDay: boolean;
+  readOnly: boolean;
+  onStartChange: (iso: string) => void;
+  onEndChange: (iso: string) => void;
+  onOneDayChange: (oneDay: boolean) => void;
+};
+
+const DatePickerButton = ({
+  value,
+  disabled,
+  onSelect,
+}: {
+  value: string;
+  disabled?: boolean;
+  onSelect: (iso: string) => void;
+}) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Pecha.Popover open={open} onOpenChange={setOpen}>
+      <Pecha.PopoverTrigger asChild>
+        <Pecha.Button
+          type="button"
+          variant="outline"
+          disabled={disabled}
+          className="h-12 w-full justify-start gap-2 px-3 font-normal rounded-md"
+        >
+          <IoCalendarClearOutline className="h-4 w-4 text-muted-foreground" />
+          <span className={value ? "text-foreground" : "text-muted-foreground"}>
+            {value
+              ? format(fromBackendISO(value), "MMM d, yyyy")
+              : "Choose date"}
+          </span>
+        </Pecha.Button>
+      </Pecha.PopoverTrigger>
+      <Pecha.PopoverContent className="w-auto p-0" align="start">
+        <Pecha.Calendar
+          className="cursor-pointer"
+          mode="single"
+          selected={value ? fromBackendISO(value) : undefined}
+          onSelect={(d) => {
+            setOpen(false);
+            if (d) onSelect(toBackendISO(d));
+          }}
+        />
+      </Pecha.PopoverContent>
+    </Pecha.Popover>
+  );
+};
+
+const EventDateSection = ({
+  form,
+  isOneDay,
+  readOnly,
+  onStartChange,
+  onEndChange,
+  onOneDayChange,
+}: EventDateSectionProps) => {
+  const startDate = form.watch("start_date");
+  const endDate = form.watch("end_date");
+  const { errors } = form.formState;
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-bold">Dates</h3>
+        <label className="flex items-center gap-2 text-sm">
+          <Pecha.Checkbox
+            checked={isOneDay}
+            disabled={readOnly}
+            onCheckedChange={(checked) => onOneDayChange(checked === true)}
+          />
+          One-day event
+        </label>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div className="space-y-1">
+          <span className="text-sm font-medium">Start date</span>
+          <DatePickerButton
+            value={startDate}
+            disabled={readOnly}
+            onSelect={onStartChange}
+          />
+          {errors.start_date ? (
+            <p className="text-sm text-destructive">
+              {errors.start_date.message}
+            </p>
+          ) : null}
+        </div>
+
+        <div className="space-y-1">
+          <span className="text-sm font-medium">End date</span>
+          <DatePickerButton
+            value={endDate}
+            disabled={readOnly || isOneDay}
+            onSelect={onEndChange}
+          />
+          {errors.end_date ? (
+            <p className="text-sm text-destructive">
+              {errors.end_date.message}
+            </p>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EventDateSection;
diff --git a/src/components/routes/groups/components/events/EventImageField.tsx b/src/components/routes/groups/components/events/EventImageField.tsx
new file mode 100644
index 00000000..64e42df1
--- /dev/null
+++ b/src/components/routes/groups/components/events/EventImageField.tsx
@@ -0,0 +1,81 @@
+import { IoMdAdd, IoMdClose } from "react-icons/io";
+import { Pecha } from "@/components/ui/shadimport";
+import ImageContentData from "@/components/ui/molecules/modals/image-upload/ImageContentData";
+
+type EventImageFieldProps = {
+  imagePreview: string | null;
+  selectedImage: File | null;
+  isDialogOpen: boolean;
+  isUploading: boolean;
+  readOnly: boolean;
+  onOpenDialog: () => void;
+  onDialogOpenChange: (open: boolean) => void;
+  onUpload: (file: File) => void;
+  onRemove: () => void;
+};
+
+const EventImageField = ({
+  imagePreview,
+  selectedImage,
+  isDialogOpen,
+  isUploading,
+  readOnly,
+  onOpenDialog,
+  onDialogOpenChange,
+  onUpload,
+  onRemove,
+}: EventImageFieldProps) => (
+  <div className="space-y-2">
+    <h3 className="text-sm font-bold">Cover image (optional)</h3>
+    <div className="mt-2 flex items-start gap-4">
+      {!imagePreview ? (
+        <button
+          type="button"
+          onClick={onOpenDialog}
+          disabled={readOnly}
+          className="flex h-40 w-56 items-center justify-center rounded-lg border border-dashed border-gray-300 bg-[#C7C7C7] transition-colors hover:border-gray-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-[#262626]"
+          aria-label="Upload cover image"
+        >
+          <IoMdAdd className="h-10 w-10 text-gray-400" />
+        </button>
+      ) : (
+        <div className="relative">
+          <img
+            src={imagePreview}
+            alt="Cover preview"
+            className="h-48 w-48 rounded-lg border object-cover"
+          />
+          {!readOnly ? (
+            <div className="absolute bottom-0 left-0 right-0 flex items-center justify-between rounded-b-lg bg-gradient-to-t from-black/60 to-transparent p-2">
+              {selectedImage ? (
+                <p className="max-w-32 truncate text-xs text-white">
+                  {selectedImage.name}
+                </p>
+              ) : null}
+              <button
+                aria-label="Remove image"
+                type="button"
+                onClick={onRemove}
+                className="ml-auto cursor-pointer rounded-full p-1 text-white transition-colors"
+                data-testid="event-image-remove"
+              >
+                <IoMdClose className="h-4 w-4" />
+              </button>
+            </div>
+          ) : null}
+        </div>
+      )}
+    </div>
+
+    <Pecha.Dialog open={isDialogOpen} onOpenChange={onDialogOpenChange}>
+      <Pecha.DialogContent showCloseButton={true}>
+        <Pecha.DialogHeader>
+          <Pecha.DialogTitle>Upload &amp; crop image</Pecha.DialogTitle>
+        </Pecha.DialogHeader>
+        <ImageContentData onUpload={onUpload} isLoading={isUploading} />
+      </Pecha.DialogContent>
+    </Pecha.Dialog>
+  </div>
+);
+
+export default EventImageField;
diff --git a/src/components/routes/groups/components/events/EventLinkPicker.tsx b/src/components/routes/groups/components/events/EventLinkPicker.tsx
new file mode 100644
index 00000000..2b5b360a
--- /dev/null
+++ b/src/components/routes/groups/components/events/EventLinkPicker.tsx
@@ -0,0 +1,170 @@
+import { useEffect, useState } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useInView } from "react-intersection-observer";
+import { IoMdClose } from "react-icons/io";
+import { FaMagnifyingGlass } from "react-icons/fa6";
+import { NO_PROFILE_IMAGE } from "@/lib/constant";
+import type { FkOption } from "../FkMultiSearchSelector";
+
+type SearchFn = (params: {
+  search?: string;
+  skip?: number;
+  limit?: number;
+}) => Promise<{
+  items: FkOption[];
+  skip: number;
+  limit: number;
+  total: number;
+}>;
+
+type EventLinkPickerProps = {
+  label: string;
+  value: FkOption | null;
+  onChange: (item: FkOption | null) => void;
+  searchFn: SearchFn;
+  queryKeyPrefix: string;
+  searchPlaceholder?: string;
+  disabled?: boolean;
+};
+
+const PAGE_SIZE = 20;
+const DEBOUNCE_MS = 600;
+
+const EventLinkPicker = ({
+  label,
+  value,
+  onChange,
+  searchFn,
+  queryKeyPrefix,
+  searchPlaceholder = "Search…",
+  disabled = false,
+}: EventLinkPickerProps) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedQuery, setDebouncedQuery] = useState("");
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(
+      () => setDebouncedQuery(searchQuery.trim()),
+      DEBOUNCE_MS,
+    );
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
+    useInfiniteQuery({
+      queryKey: [queryKeyPrefix, debouncedQuery],
+      queryFn: ({ pageParam = 0 }) =>
+        searchFn({
+          search: debouncedQuery || undefined,
+          skip: pageParam,
+          limit: PAGE_SIZE,
+        }),
+      getNextPageParam: (lastPage) => {
+        const fetched = lastPage.skip + lastPage.items.length;
+        return fetched < lastPage.total ? fetched : undefined;
+      },
+      initialPageParam: 0,
+      enabled: isDropdownOpen && !disabled,
+    });
+
+  const searchResults: FkOption[] =
+    data?.pages.flatMap((page) => page.items) ?? [];
+
+  const { ref: sentinelRef, inView } = useInView({ threshold: 0 });
+  useEffect(() => {
+    if (inView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  const handleSelect = (item: FkOption) => {
+    onChange(item);
+    setIsDropdownOpen(false);
+    setSearchQuery("");
+  };
+
+  return (
+    <div className="space-y-2">
+      <p className="text-sm font-medium">{label}</p>
+
+      {value ? (
+        <div className="flex items-center gap-2 rounded-md border border-input bg-white p-2 dark:bg-[#262626]">
+          <img
+            src={value.image_url || NO_PROFILE_IMAGE}
+            alt=""
+            className="h-9 w-9 shrink-0 rounded object-cover"
+          />
+          <span className="min-w-0 flex-1 truncate text-sm">{value.title}</span>
+          {!disabled ? (
+            <button
+              type="button"
+              onClick={() => onChange(null)}
+              aria-label={`Remove ${value.title}`}
+              className="shrink-0 cursor-pointer p-1 text-muted-foreground hover:text-foreground"
+            >
+              <IoMdClose className="h-4 w-4" />
+            </button>
+          ) : null}
+        </div>
+      ) : (
+        <div className="relative">
+          <FaMagnifyingGlass className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <input
+            type="text"
+            placeholder={searchPlaceholder}
+            value={searchQuery}
+            disabled={disabled}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            onFocus={() => setIsDropdownOpen(true)}
+            onBlur={() => setTimeout(() => setIsDropdownOpen(false), 150)}
+            className="h-11 w-full rounded-md border border-input bg-white pl-10 pr-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-[#262626] dark:text-white"
+          />
+
+          {isDropdownOpen && !disabled && (
+            <div className="absolute z-10 mt-1 max-h-52 w-full overflow-auto rounded-md border border-input bg-background shadow-md dark:bg-[#262626]">
+              {isLoading && searchResults.length === 0 && (
+                <div className="px-3 py-2 text-sm text-muted-foreground">
+                  Searching…
+                </div>
+              )}
+              {searchResults.map((item) => (
+                <button
+                  key={item.id}
+                  type="button"
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    handleSelect(item);
+                  }}
+                  className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-left hover:bg-gray-100 dark:hover:bg-[#333333]"
+                >
+                  <img
+                    src={item.image_url || NO_PROFILE_IMAGE}
+                    alt=""
+                    className="h-8 w-8 shrink-0 rounded object-cover"
+                  />
+                  <span className="flex-1 text-sm">{item.title}</span>
+                </button>
+              ))}
+              {hasNextPage && (
+                <div
+                  ref={sentinelRef}
+                  className="px-3 py-2 text-center text-xs text-muted-foreground"
+                >
+                  {isFetchingNextPage ? "Loading more…" : ""}
+                </div>
+              )}
+              {!isLoading && searchResults.length === 0 && (
+                <div className="px-3 py-2 text-sm text-muted-foreground">
+                  No results found
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EventLinkPicker;
diff --git a/src/components/routes/groups/components/events/EventLinksSection.tsx b/src/components/routes/groups/components/events/EventLinksSection.tsx
new file mode 100644
index 00000000..48d411f6
--- /dev/null
+++ b/src/components/routes/groups/components/events/EventLinksSection.tsx
@@ -0,0 +1,65 @@
+import type { UseFormReturn } from "react-hook-form";
+import type { EventFormData } from "@/schema/EventSchema";
+import type { FkOption } from "../FkMultiSearchSelector";
+import { searchPlansForPicker } from "@/components/routes/groups/api/groupPickerApi";
+import { searchAccumulatorPresets } from "@/components/routes/groups/api/accumulatorPresetSearchApi";
+import EventLinkPicker from "./EventLinkPicker";
+
+type EventLinksSectionProps = {
+  form: UseFormReturn<EventFormData>;
+  readOnly: boolean;
+  planValue: FkOption | null;
+  accumulatorValue: FkOption | null;
+  onPlanChange: (item: FkOption | null) => void;
+  onAccumulatorChange: (item: FkOption | null) => void;
+};
+
+const EventLinksSection = ({
+  form,
+  readOnly,
+  planValue,
+  accumulatorValue,
+  onPlanChange,
+  onAccumulatorChange,
+}: EventLinksSectionProps) => {
+  const makeSetter =
+    (
+      field: "plan_id" | "accumulator_id",
+      report: (item: FkOption | null) => void,
+    ) =>
+    (item: FkOption | null) => {
+      report(item);
+      form.setValue(field, item?.id ?? "", {
+        shouldDirty: true,
+        shouldValidate: true,
+      });
+    };
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-sm font-bold">Linked content (optional)</h3>
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <EventLinkPicker
+          label="Plan"
+          value={planValue}
+          onChange={makeSetter("plan_id", onPlanChange)}
+          searchFn={searchPlansForPicker}
+          queryKeyPrefix="event-plan-picker"
+          searchPlaceholder="Search plans…"
+          disabled={readOnly}
+        />
+        <EventLinkPicker
+          label="Accumulator"
+          value={accumulatorValue}
+          onChange={makeSetter("accumulator_id", onAccumulatorChange)}
+          searchFn={searchAccumulatorPresets}
+          queryKeyPrefix="event-accumulator-picker"
+          searchPlaceholder="Search accumulators…"
+          disabled={readOnly}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default EventLinksSection;
diff --git a/src/components/routes/groups/components/events/EventMetadataRows.tsx b/src/components/routes/groups/components/events/EventMetadataRows.tsx
new file mode 100644
index 00000000..599efe9e
--- /dev/null
+++ b/src/components/routes/groups/components/events/EventMetadataRows.tsx
@@ -0,0 +1,150 @@
+import type { UseFormReturn } from "react-hook-form";
+import { IoMdAdd, IoMdClose } from "react-icons/io";
+import { Pecha } from "@/components/ui/shadimport";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+import type { EventFormData, LanguageCode } from "@/schema/EventSchema";
+
+type EventMetadataRowsProps = {
+  form: UseFormReturn<EventFormData>;
+  fields: { id: string }[];
+  usedLanguages: LanguageCode[];
+  canAddLanguage: boolean;
+  readOnly: boolean;
+  onAdd: () => void;
+  onRemove: (index: number) => void;
+};
+
+const languageLabel = (code: string) =>
+  PLAN_LANGUAGE.find((l) => l.value === code)?.label ?? code;
+
+const EventMetadataRows = ({
+  form,
+  fields,
+  usedLanguages,
+  canAddLanguage,
+  readOnly,
+  onAdd,
+  onRemove,
+}: EventMetadataRowsProps) => {
+  const metadata = form.watch("metadata") ?? [];
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-bold">Name &amp; description</h3>
+        {!readOnly && canAddLanguage ? (
+          <Pecha.Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={onAdd}
+            className="gap-1"
+          >
+            <IoMdAdd className="h-4 w-4" /> Add language
+          </Pecha.Button>
+        ) : null}
+      </div>
+
+      {fields.map((field, index) => {
+        const currentLang = metadata[index]?.language;
+        return (
+          <div
+            key={field.id}
+            className="space-y-3 rounded-lg border border-border p-4"
+          >
+            <div className="flex items-start justify-between gap-3">
+              <Pecha.FormField
+                control={form.control}
+                name={`metadata.${index}.language`}
+                render={({ field: langField }) => (
+                  <Pecha.FormItem className="w-40">
+                    <Pecha.FormLabel>Language</Pecha.FormLabel>
+                    <Pecha.Select
+                      value={langField.value}
+                      onValueChange={langField.onChange}
+                      disabled={readOnly}
+                    >
+                      <Pecha.FormControl>
+                        <Pecha.SelectTrigger>
+                          <Pecha.SelectValue placeholder="Language" />
+                        </Pecha.SelectTrigger>
+                      </Pecha.FormControl>
+                      <Pecha.SelectContent>
+                        {PLAN_LANGUAGE.map((lang) => {
+                          const takenByAnother =
+                            usedLanguages.includes(
+                              lang.value as LanguageCode,
+                            ) && lang.value !== currentLang;
+                          return (
+                            <Pecha.SelectItem
+                              key={lang.value}
+                              value={lang.value}
+                              disabled={takenByAnother}
+                            >
+                              {lang.label}
+                            </Pecha.SelectItem>
+                          );
+                        })}
+                      </Pecha.SelectContent>
+                    </Pecha.Select>
+                    <Pecha.FormMessage />
+                  </Pecha.FormItem>
+                )}
+              />
+
+              {!readOnly && fields.length > 1 ? (
+                <button
+                  type="button"
+                  aria-label={`Remove ${languageLabel(currentLang ?? "")} row`}
+                  onClick={() => onRemove(index)}
+                  className="mt-8 text-muted-foreground hover:text-destructive"
+                >
+                  <IoMdClose className="h-5 w-5" />
+                </button>
+              ) : null}
+            </div>
+
+            <Pecha.FormField
+              control={form.control}
+              name={`metadata.${index}.name`}
+              render={({ field: nameField }) => (
+                <Pecha.FormItem>
+                  <Pecha.FormLabel>Name</Pecha.FormLabel>
+                  <Pecha.FormControl>
+                    <Pecha.Input
+                      {...nameField}
+                      placeholder="Event name"
+                      disabled={readOnly}
+                    />
+                  </Pecha.FormControl>
+                  <Pecha.FormMessage />
+                </Pecha.FormItem>
+              )}
+            />
+
+            <Pecha.FormField
+              control={form.control}
+              name={`metadata.${index}.description`}
+              render={({ field: descField }) => (
+                <Pecha.FormItem>
+                  <Pecha.FormLabel>Description (optional)</Pecha.FormLabel>
+                  <Pecha.FormControl>
+                    <Pecha.Textarea
+                      {...descField}
+                      placeholder="Description"
+                      disabled={readOnly}
+                      rows={3}
+                    />
+                  </Pecha.FormControl>
+                  <Pecha.FormMessage />
+                </Pecha.FormItem>
+              )}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default EventMetadataRows;
diff --git a/src/components/routes/groups/hooks/useEventForm.ts b/src/components/routes/groups/hooks/useEventForm.ts
new file mode 100644
index 00000000..99e7df75
--- /dev/null
+++ b/src/components/routes/groups/hooks/useEventForm.ts
@@ -0,0 +1,129 @@
+import { useCallback } from "react";
+import { useForm, useFieldArray, type UseFormReturn } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+import {
+  eventSchema,
+  defaultEventFormValues,
+  emptyMetadataRow,
+  type EventFormData,
+  type LanguageCode,
+} from "@/schema/EventSchema";
+
+export type UseEventFormReturn = {
+  form: UseFormReturn<EventFormData>;
+  metadataRows: ReturnType<typeof useFieldArray<EventFormData, "metadata">>;
+  usedLanguages: LanguageCode[];
+  availableLanguages: typeof PLAN_LANGUAGE;
+  addMetadataRow: () => void;
+  removeMetadataRow: (index: number) => void;
+  setImageUrl: (url: string) => void;
+  setOneDay: (oneDay: boolean) => void;
+  setStartDate: (iso: string) => void;
+  setEndDate: (iso: string) => void;
+};
+
+export const useEventForm = (): UseEventFormReturn => {
+  const form = useForm<EventFormData>({
+    resolver: zodResolver(eventSchema),
+    defaultValues: defaultEventFormValues(),
+    mode: "onChange",
+  });
+
+  const metadataRows = useFieldArray({
+    control: form.control,
+    name: "metadata",
+  });
+
+  const metadata = form.watch("metadata") ?? [];
+  const usedLanguages = metadata.map((m) => m.language);
+  const availableLanguages = PLAN_LANGUAGE.filter(
+    ({ value }) => !usedLanguages.includes(value as LanguageCode),
+  );
+
+  const addMetadataRow = useCallback(() => {
+    const current = form.getValues("metadata") ?? [];
+    const used = new Set(current.map((m) => m.language));
+    const next = PLAN_LANGUAGE.map((l) => l.value as LanguageCode).find(
+      (code) => !used.has(code),
+    );
+    if (!next) return;
+    metadataRows.append(emptyMetadataRow(next));
+  }, [form, metadataRows]);
+
+  const removeMetadataRow = useCallback(
+    (index: number) => {
+      if ((form.getValues("metadata") ?? []).length <= 1) return;
+      metadataRows.remove(index);
+    },
+    [form, metadataRows],
+  );
+
+  const setImageUrl = useCallback(
+    (url: string) => {
+      form.setValue("image_url", url, {
+        shouldDirty: true,
+        shouldValidate: true,
+      });
+    },
+    [form],
+  );
+
+  const setStartDate = useCallback(
+    (iso: string) => {
+      form.setValue("start_date", iso, {
+        shouldDirty: true,
+        shouldValidate: true,
+      });
+      if (form.getValues("is_one_day")) {
+        form.setValue("end_date", iso, {
+          shouldDirty: true,
+          shouldValidate: true,
+        });
+      }
+    },
+    [form],
+  );
+
+  const setEndDate = useCallback(
+    (iso: string) => {
+      form.setValue("end_date", iso, {
+        shouldDirty: true,
+        shouldValidate: true,
+      });
+    },
+    [form],
+  );
+
+  const setOneDay = useCallback(
+    (oneDay: boolean) => {
+      form.setValue("is_one_day", oneDay, {
+        shouldDirty: true,
+        shouldValidate: true,
+      });
+      if (oneDay) {
+        const start = form.getValues("start_date");
+        if (start) {
+          form.setValue("end_date", start, {
+            shouldDirty: true,
+            shouldValidate: true,
+          });
+        }
+      }
+    },
+    [form],
+  );
+
+  return {
+    form,
+    metadataRows,
+    usedLanguages,
+    availableLanguages,
+    addMetadataRow,
+    removeMetadataRow,
+    setImageUrl,
+    setOneDay,
+    setStartDate,
+    setEndDate,
+  };
+};
diff --git a/src/components/routes/groups/hooks/useEventImage.ts b/src/components/routes/groups/hooks/useEventImage.ts
new file mode 100644
index 00000000..4ac0800b
--- /dev/null
+++ b/src/components/routes/groups/hooks/useEventImage.ts
@@ -0,0 +1,83 @@
+import { useCallback, useRef, useState } from "react";
+import { toast } from "sonner";
+import { uploadEventImage } from "@/components/routes/groups/api/eventsApi";
+
+type UseEventImageParams = {
+  setImageUrl: (url: string) => void;
+};
+
+export type UseEventImageReturn = {
+  selectedImage: File | null;
+  imagePreview: string | null;
+  isImageDialogOpen: boolean;
+  isImageUploading: boolean;
+  fileInputRef: React.RefObject<HTMLInputElement | null>;
+  openImageDialog: () => void;
+  setImageDialogOpen: (open: boolean) => void;
+  setImagePreview: (preview: string | null) => void;
+  setSelectedImage: (file: File | null) => void;
+  uploadImage: (file: File) => Promise<void>;
+  removeImage: () => void;
+};
+
+export const useEventImage = ({
+  setImageUrl,
+}: UseEventImageParams): UseEventImageReturn => {
+  const [selectedImage, setSelectedImage] = useState<File | null>(null);
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [isImageDialogOpen, setImageDialogOpen] = useState(false);
+  const [isImageUploading, setIsImageUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const uploadImage = useCallback(
+    async (file: File) => {
+      setIsImageUploading(true);
+      try {
+        const key = await uploadEventImage(file);
+        setImagePreview(URL.createObjectURL(file));
+        setSelectedImage(file);
+        setImageUrl(key);
+        setImageDialogOpen(false);
+        toast.success("Image uploaded successfully!");
+      } catch (error: unknown) {
+        const err = error as { response?: { status?: number } };
+        if (err?.response?.status === 413) {
+          toast.error("Failed to upload image", {
+            description: "File exceeds the maximum size of 1MB",
+          });
+        } else {
+          console.error("Image upload failed:", error);
+          toast.error("Failed to upload image");
+        }
+      } finally {
+        setIsImageUploading(false);
+      }
+    },
+    [setImageUrl],
+  );
+
+  const removeImage = useCallback(() => {
+    setSelectedImage(null);
+    setImagePreview(null);
+    setImageUrl("");
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }, [setImageUrl]);
+
+  const openImageDialog = useCallback(() => setImageDialogOpen(true), []);
+
+  return {
+    selectedImage,
+    imagePreview,
+    isImageDialogOpen,
+    isImageUploading,
+    fileInputRef,
+    openImageDialog,
+    setImageDialogOpen,
+    setImagePreview,
+    setSelectedImage,
+    uploadImage,
+    removeImage,
+  };
+};
diff --git a/src/components/routes/groups/lib/eventPermissions.ts b/src/components/routes/groups/lib/eventPermissions.ts
new file mode 100644
index 00000000..376ae367
--- /dev/null
+++ b/src/components/routes/groups/lib/eventPermissions.ts
@@ -0,0 +1,25 @@
+import {
+  isReviewer,
+  isSuperAdmin,
+  type PlatformRole,
+} from "@/lib/platformAccess";
+import type { AuthorGroupMemberRole } from "@/components/routes/groups/api/groupsApi";
+
+const WRITE_MEMBER_ROLES: AuthorGroupMemberRole[] = [
+  "OWNER",
+  "ADMIN",
+  "AUTHOR",
+];
+
+export function canWriteEvents(
+  groupRole: AuthorGroupMemberRole | undefined,
+  platformRole?: PlatformRole | string,
+): boolean {
+  if (isReviewer(platformRole)) return false;
+  if (isSuperAdmin(platformRole)) return true;
+  return groupRole != null && WRITE_MEMBER_ROLES.includes(groupRole);
+}
+
+export const canCreateEvent = canWriteEvents;
+export const canEditEvent = canWriteEvents;
+export const canDeleteEvent = canWriteEvents;
diff --git a/src/components/routes/groups/lib/groupFormSectionDirty.ts b/src/components/routes/groups/lib/groupFormSectionDirty.ts
new file mode 100644
index 00000000..78cea345
--- /dev/null
+++ b/src/components/routes/groups/lib/groupFormSectionDirty.ts
@@ -0,0 +1,31 @@
+import type { GroupSocialLinkDTO } from "../api/groupsApi";
+
+export function sameSortedIds(a: string[], b: string[]): boolean {
+  if (a.length !== b.length) return false;
+  const sortedA = [...a].sort();
+  const sortedB = [...b].sort();
+  return sortedA.every((id, i) => id === sortedB[i]);
+}
+
+export function normalizeSocialLinksForCompare(
+  links: GroupSocialLinkDTO[],
+): GroupSocialLinkDTO[] {
+  return [...links]
+    .map((l) => ({ platform: l.platform, url: l.url.trim() }))
+    .sort(
+      (x, y) =>
+        x.platform.localeCompare(y.platform) || x.url.localeCompare(y.url),
+    );
+}
+
+export function sameSocialLinks(
+  a: GroupSocialLinkDTO[],
+  b: GroupSocialLinkDTO[],
+): boolean {
+  const na = normalizeSocialLinksForCompare(a);
+  const nb = normalizeSocialLinksForCompare(b);
+  if (na.length !== nb.length) return false;
+  return na.every(
+    (link, i) => link.platform === nb[i].platform && link.url === nb[i].url,
+  );
+}
diff --git a/src/components/routes/groups/lib/groupPermissions.ts b/src/components/routes/groups/lib/groupPermissions.ts
new file mode 100644
index 00000000..21b73169
--- /dev/null
+++ b/src/components/routes/groups/lib/groupPermissions.ts
@@ -0,0 +1,199 @@
+import type { PlatformRole } from "@/lib/platformAccess";
+import { isSuperAdmin } from "@/lib/platformAccess";
+import {
+  isGroupInviteExpired,
+  type AuthorGroupMemberDTO,
+  type AuthorGroupMemberRole,
+  type GroupInviteDTO,
+} from "../api/groupsApi";
+
+export const ALL_MEMBER_ROLES: AuthorGroupMemberRole[] = [
+  "OWNER",
+  "ADMIN",
+  "AUTHOR",
+  "VIEWER",
+];
+
+/** Roles assignable via invite or role change (never OWNER). */
+export const ASSIGNABLE_MEMBER_ROLES: AuthorGroupMemberRole[] = [
+  "ADMIN",
+  "AUTHOR",
+  "VIEWER",
+];
+
+const MEMBER_MANAGEMENT_ROLES: AuthorGroupMemberRole[] = ["OWNER", "ADMIN"];
+
+export type GroupActor = {
+  id?: string;
+  email?: string;
+  platform_role?: PlatformRole;
+};
+
+/** Legacy DB rows may still surface as ADMIN after EDITOR migration. */
+export function normalizeMemberRole(role: string): AuthorGroupMemberRole {
+  if (role === "EDITOR") return "ADMIN";
+  return role as AuthorGroupMemberRole;
+}
+
+function findMemberByEmail(
+  members: AuthorGroupMemberDTO[],
+  userEmail: string | undefined,
+): AuthorGroupMemberDTO | undefined {
+  if (!userEmail?.trim()) return undefined;
+  const normalized = userEmail.trim().toLowerCase();
+  return members.find((m) => m.email.trim().toLowerCase() === normalized);
+}
+
+export function getCurrentUserGroupRole(
+  members: AuthorGroupMemberDTO[],
+  user: GroupActor | string | undefined,
+): AuthorGroupMemberRole | undefined {
+  if (!user) return undefined;
+  if (typeof user === "string") {
+    const member = findMemberByEmail(members, user);
+    return member ? normalizeMemberRole(member.role) : undefined;
+  }
+  if (user.id) {
+    const byId = members.find((m) => m.author_id === user.id);
+    if (byId) return normalizeMemberRole(byId.role);
+  }
+  const member = findMemberByEmail(members, user.email);
+  return member ? normalizeMemberRole(member.role) : undefined;
+}
+
+/** SUPER_ADMIN bypass for CMS management actions (not ownership transfer). */
+export function getEffectiveGroupRole(
+  members: AuthorGroupMemberDTO[],
+  user: GroupActor | undefined,
+): AuthorGroupMemberRole | undefined {
+  if (isSuperAdmin(user?.platform_role)) return "OWNER";
+  return getCurrentUserGroupRole(members, user);
+}
+
+export function canEditGroupSettings(
+  role: AuthorGroupMemberRole | undefined,
+): boolean {
+  return role === "OWNER" || role === "ADMIN";
+}
+
+/** Owners and platform SUPER_ADMIN (via getEffectiveGroupRole) can delete a group. */
+export function canDeleteGroup(
+  role: AuthorGroupMemberRole | undefined,
+): boolean {
+  return role === "OWNER";
+}
+
+export function canManageGroupInvites(
+  role: AuthorGroupMemberRole | undefined,
+): boolean {
+  return role ? MEMBER_MANAGEMENT_ROLES.includes(role) : false;
+}
+
+export function inviteRoleOptions(
+  myRole: AuthorGroupMemberRole | undefined,
+): AuthorGroupMemberRole[] {
+  if (myRole === "OWNER") return [...ASSIGNABLE_MEMBER_ROLES];
+  if (myRole === "ADMIN") return ["AUTHOR", "VIEWER"];
+  return [];
+}
+
+export function roleChangeOptions(
+  myRole: AuthorGroupMemberRole | undefined,
+  target: AuthorGroupMemberDTO,
+  user: GroupActor | undefined,
+): AuthorGroupMemberRole[] | null {
+  if (!myRole || !MEMBER_MANAGEMENT_ROLES.includes(myRole)) return null;
+
+  const targetRole = normalizeMemberRole(target.role);
+  const isSelf = isCurrentGroupMember(target, user);
+
+  if (targetRole === "OWNER") return null;
+
+  if (myRole === "OWNER") return [...ASSIGNABLE_MEMBER_ROLES];
+
+  if (targetRole === "ADMIN" && !isSelf) return null;
+  if (isSelf) return ["ADMIN", "AUTHOR", "VIEWER"];
+  return ["AUTHOR", "VIEWER"];
+}
+
+/** True only for the actual group OWNER row (platform SUPER_ADMIN bypass does not apply). */
+export function canTransferOwnership(
+  members: AuthorGroupMemberDTO[],
+  user: GroupActor | undefined,
+): boolean {
+  return getCurrentUserGroupRole(members, user) === "OWNER";
+}
+
+export function transferOwnershipCandidates(
+  members: AuthorGroupMemberDTO[],
+  user: GroupActor | undefined,
+): AuthorGroupMemberDTO[] {
+  return members.filter(
+    (m) =>
+      normalizeMemberRole(m.role) !== "OWNER" && !isCurrentGroupMember(m, user),
+  );
+}
+
+export function canRevokeInvite(
+  myRole: AuthorGroupMemberRole | undefined,
+  invite: GroupInviteDTO,
+): boolean {
+  if (invite.status !== "PENDING" || isGroupInviteExpired(invite)) return false;
+  if (myRole === "OWNER") return true;
+  if (myRole === "ADMIN") {
+    return normalizeMemberRole(invite.role) !== "ADMIN";
+  }
+  return false;
+}
+
+export function isCurrentGroupMember(
+  member: AuthorGroupMemberDTO,
+  user?: GroupActor,
+): boolean {
+  if (!user) return false;
+  if (user.id && member.author_id === user.id) return true;
+  if (!user.email?.trim()) return false;
+  const normalized = user.email.trim().toLowerCase();
+  return member.email.trim().toLowerCase() === normalized;
+}
+
+export function isSoleOwner(
+  members: AuthorGroupMemberDTO[],
+  member: AuthorGroupMemberDTO,
+): boolean {
+  if (normalizeMemberRole(member.role) !== "OWNER") return false;
+  return (
+    members.filter((m) => normalizeMemberRole(m.role) === "OWNER").length <= 1
+  );
+}
+
+export function canRemoveMember(
+  myRole: AuthorGroupMemberRole | undefined,
+  target: AuthorGroupMemberDTO,
+  user: GroupActor | undefined,
+): boolean {
+  if (isCurrentGroupMember(target, user)) return true;
+  if (!myRole) return false;
+  const targetRole = normalizeMemberRole(target.role);
+  if (myRole === "OWNER") {
+    if (targetRole === "OWNER") return false;
+    return true;
+  }
+  if (myRole === "ADMIN") {
+    return targetRole === "AUTHOR" || targetRole === "VIEWER";
+  }
+  return false;
+}
+
+/** Show Leave (self) or Remove (other) action button. */
+export function canShowMemberRemovalAction(
+  members: AuthorGroupMemberDTO[],
+  myRole: AuthorGroupMemberRole | undefined,
+  target: AuthorGroupMemberDTO,
+  user: GroupActor | undefined,
+): boolean {
+  if (isCurrentGroupMember(target, user)) {
+    return !isSoleOwner(members, target);
+  }
+  return canRemoveMember(myRole, target, user);
+}
diff --git a/src/components/routes/notifications/api/notificationsApi.ts b/src/components/routes/notifications/api/notificationsApi.ts
new file mode 100644
index 00000000..0f45feff
--- /dev/null
+++ b/src/components/routes/notifications/api/notificationsApi.ts
@@ -0,0 +1,144 @@
+import axiosInstance from "@/config/axios-config";
+
+export type NotificationCategory =
+  | "group_invite"
+  | "content_transfer_incoming"
+  | (string & {});
+
+export interface NotificationDTO {
+  id: string;
+  title: string;
+  description?: string | null;
+  category: NotificationCategory;
+  reference_id?: string | null;
+  /** Target group for content_transfer_incoming (when provided by API). */
+  target_group_id?: string | null;
+  group_id?: string | null;
+  is_read: boolean;
+  read_at?: string | null;
+  created_at: string;
+}
+
+function normalizeNotification(raw: unknown): NotificationDTO | null {
+  if (!raw || typeof raw !== "object") return null;
+  const n = raw as Record<string, unknown>;
+  const id = typeof n.id === "string" ? n.id : undefined;
+  if (!id) return null;
+  const metadata =
+    n.metadata && typeof n.metadata === "object"
+      ? (n.metadata as Record<string, unknown>)
+      : null;
+  const targetFromMeta =
+    typeof metadata?.target_group_id === "string"
+      ? metadata.target_group_id
+      : typeof metadata?.group_id === "string"
+        ? metadata.group_id
+        : undefined;
+
+  return {
+    id,
+    title: typeof n.title === "string" ? n.title : "Notification",
+    description: typeof n.description === "string" ? n.description : null,
+    category: (typeof n.category === "string"
+      ? n.category
+      : "group_invite") as NotificationCategory,
+    reference_id: typeof n.reference_id === "string" ? n.reference_id : null,
+    target_group_id:
+      (typeof n.target_group_id === "string" ? n.target_group_id : null) ??
+      (typeof n.group_id === "string" ? n.group_id : null) ??
+      targetFromMeta ??
+      null,
+    group_id: typeof n.group_id === "string" ? n.group_id : null,
+    is_read: Boolean(n.is_read),
+    read_at: typeof n.read_at === "string" ? n.read_at : null,
+    created_at:
+      typeof n.created_at === "string"
+        ? n.created_at
+        : new Date().toISOString(),
+  };
+}
+
+function normalizeNotificationList(data: unknown): NotificationListResponse {
+  if (!data || typeof data !== "object") {
+    return { notifications: [], skip: 0, limit: 0, total: 0 };
+  }
+  const root = data as Record<string, unknown>;
+  const list = Array.isArray(root.notifications)
+    ? root.notifications
+    : Array.isArray(root.items)
+      ? root.items
+      : [];
+  const notifications = list
+    .map(normalizeNotification)
+    .filter((n): n is NotificationDTO => n != null);
+  return {
+    notifications,
+    skip: typeof root.skip === "number" ? root.skip : 0,
+    limit: typeof root.limit === "number" ? root.limit : notifications.length,
+    total: typeof root.total === "number" ? root.total : notifications.length,
+  };
+}
+
+export interface NotificationListResponse {
+  notifications: NotificationDTO[];
+  skip: number;
+  limit: number;
+  total: number;
+}
+
+export interface FetchNotificationsParams {
+  unread_only?: boolean;
+  skip?: number;
+  limit?: number;
+}
+
+const getAuthHeaders = () => ({
+  Authorization: `Bearer ${sessionStorage.getItem("accessToken")}`,
+});
+
+export const fetchNotifications = async (
+  params: FetchNotificationsParams = {},
+): Promise<NotificationListResponse> => {
+  const { data } = await axiosInstance.get(`/api/v1/cms/notifications`, {
+    headers: getAuthHeaders(),
+    params: {
+      unread_only: params.unread_only ?? false,
+      skip: params.skip ?? 0,
+      limit: params.limit ?? 20,
+    },
+  });
+  return normalizeNotificationList(data);
+};
+
+export const markNotificationRead = async (
+  notificationId: string,
+): Promise<NotificationDTO> => {
+  const { data } = await axiosInstance.patch<NotificationDTO>(
+    `/api/v1/cms/notifications/${notificationId}/read`,
+    {},
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const isGroupInviteNotification = (
+  notification: NotificationDTO,
+): boolean =>
+  notification.category === "group_invite" &&
+  Boolean(notification.reference_id);
+
+export const isContentTransferNotification = (
+  notification: NotificationDTO,
+): boolean =>
+  notification.category === "content_transfer_incoming" &&
+  Boolean(notification.reference_id);
+
+export function getTransferNotificationTargetGroupId(
+  notification: NotificationDTO,
+): string | undefined {
+  return (
+    notification.target_group_id?.trim() ||
+    notification.group_id?.trim() ||
+    undefined
+  );
+}
diff --git a/src/components/routes/profile/Profile.test.tsx b/src/components/routes/profile/Profile.test.tsx
index 84030b06..7c6018ed 100644
--- a/src/components/routes/profile/Profile.test.tsx
+++ b/src/components/routes/profile/Profile.test.tsx
@@ -19,6 +19,15 @@ const mockUserInfo = {
   ],
 };
 
+vi.mock("@/hooks/useUserInfo", () => ({
+  USER_INFO_QUERY_KEY: ["userInfo"],
+  fetchUserInfo: vi.fn(),
+  useUserInfo: () => ({
+    data: mockUserInfo,
+    isLoading: false,
+  }),
+}));
+
 vi.mock("@/components/ui/molecules/user-card/UserCard", () => ({
   default: ({ userInfo }: any) => (
     <div data-testid="user-card">
@@ -67,14 +76,10 @@ describe("Profile Component", () => {
     expect(screen.getByText("Edit")).toBeInTheDocument();
   });
 
-  it("fetches current user info from authors info endpoint", async () => {
-    const { default: axiosInstance } = await import("@/config/axios-config");
-    vi.mocked(axiosInstance.get).mockResolvedValue({
-      data: mockUserInfo,
-    });
-    renderWithProviders(<Profile />);
+  it("shows user info from shared userInfo query", async () => {
+    renderWithProviders(<Profile />, mockUserInfo);
     await waitFor(() => {
-      expect(axiosInstance.get).toHaveBeenCalledWith("/api/v1/authors/info");
+      expect(screen.getByText("Tenzin la")).toBeInTheDocument();
     });
   });
 });
diff --git a/src/components/routes/profile/Profile.tsx b/src/components/routes/profile/Profile.tsx
index f6a984bf..fd0e99f5 100644
--- a/src/components/routes/profile/Profile.tsx
+++ b/src/components/routes/profile/Profile.tsx
@@ -1,22 +1,12 @@
-import axiosInstance from "@/config/axios-config";
-import { useQuery } from "@tanstack/react-query";
 import { Pecha } from "@/components/ui/shadimport";
 import { useState } from "react";
 import UserCard from "@/components/ui/molecules/user-card/UserCard";
 import ProfileEditForm from "@/components/ui/molecules/profile-edit-form/ProfileEditForm";
-
-const fetchUserInfo = async () => {
-  const { data } = await axiosInstance.get(`/api/v1/authors/info`);
-  return data;
-};
+import { useUserInfo } from "@/hooks/useUserInfo";
 
 const Profile = () => {
   const [isEditing, setIsEditing] = useState(false);
-
-  const { data: userInfo, isLoading } = useQuery({
-    queryKey: ["userInfo"],
-    queryFn: fetchUserInfo,
-  });
+  const { data: userInfo, isLoading } = useUserInfo();
 
   const handleEdit = () => {
     setIsEditing(true);
diff --git a/src/components/routes/series-details/CloneLanguagePlansPanel.tsx b/src/components/routes/series-details/CloneLanguagePlansPanel.tsx
new file mode 100644
index 00000000..7a468042
--- /dev/null
+++ b/src/components/routes/series-details/CloneLanguagePlansPanel.tsx
@@ -0,0 +1,113 @@
+import { useMemo, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { IoMdCopy } from "react-icons/io";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+import type { LanguageCode } from "@/schema/SeriesSchema";
+import { cloneSeriesPlansFromLanguage } from "@/components/routes/create-series/api/seriesApi";
+
+type CloneLanguagePlansPanelProps = {
+  seriesId: string;
+  targetLanguage: LanguageCode;
+  sourceLanguages: LanguageCode[];
+  embedded?: boolean;
+};
+
+function languageLabel(code: LanguageCode): string {
+  return PLAN_LANGUAGE.find((l) => l.value === code)?.label ?? code;
+}
+
+export function CloneLanguagePlansPanel({
+  seriesId,
+  targetLanguage,
+  sourceLanguages,
+  embedded = false,
+}: Readonly<CloneLanguagePlansPanelProps>) {
+  const queryClient = useQueryClient();
+  const [sourceLanguage, setSourceLanguage] = useState<LanguageCode>(
+    sourceLanguages[0] ?? "EN",
+  );
+
+  const effectiveSource = useMemo(() => {
+    if (sourceLanguages.includes(sourceLanguage)) return sourceLanguage;
+    return sourceLanguages[0] ?? "EN";
+  }, [sourceLanguage, sourceLanguages]);
+
+  const cloneMutation = useMutation({
+    mutationFn: () =>
+      cloneSeriesPlansFromLanguage(seriesId, {
+        source_language: effectiveSource,
+        target_language: targetLanguage,
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["series", seriesId] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard-items"] });
+      toast.success(
+        `Cloned plans from ${languageLabel(effectiveSource)} to ${languageLabel(targetLanguage)}`,
+      );
+    },
+    onError: (err: unknown) => {
+      const message = (
+        err as {
+          response?: { data?: { detail?: string | { message?: string } } };
+        }
+      )?.response?.data?.detail;
+      const text =
+        typeof message === "string"
+          ? message
+          : (message?.message ?? "Could not clone plans");
+      toast.error(text);
+    },
+  });
+
+  if (sourceLanguages.length === 0) return null;
+
+  const content = (
+    <>
+      <p className="text-center text-sm text-muted-foreground">
+        No plans in {languageLabel(targetLanguage)} yet. Clone the full plan
+        structure from another language.
+      </p>
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        <Pecha.Select
+          value={effectiveSource}
+          onValueChange={(value) => setSourceLanguage(value as LanguageCode)}
+        >
+          <Pecha.SelectTrigger className="w-[180px] bg-background">
+            <Pecha.SelectValue placeholder="Source language" />
+          </Pecha.SelectTrigger>
+          <Pecha.SelectContent>
+            {sourceLanguages.map((code) => (
+              <Pecha.SelectItem key={code} value={code}>
+                {languageLabel(code)}
+              </Pecha.SelectItem>
+            ))}
+          </Pecha.SelectContent>
+        </Pecha.Select>
+        <Pecha.Button
+          type="button"
+          variant="outline"
+          className="gap-2"
+          disabled={cloneMutation.isPending}
+          onClick={() => cloneMutation.mutate()}
+        >
+          <IoMdCopy className="h-4 w-4" />
+          {cloneMutation.isPending ? "Cloning…" : "Clone plans"}
+        </Pecha.Button>
+      </div>
+    </>
+  );
+
+  if (embedded) {
+    return (
+      <div className="flex w-full flex-col items-center gap-4">{content}</div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 rounded-xl border border-dashed border-gray-300 bg-white/80 px-6 py-10 dark:border-input dark:bg-[#1d1d1f]/80">
+      {content}
+    </div>
+  );
+}
diff --git a/src/components/routes/series-details/SeriesDetailsPage.test.tsx b/src/components/routes/series-details/SeriesDetailsPage.test.tsx
new file mode 100644
index 00000000..4ec2fd4b
--- /dev/null
+++ b/src/components/routes/series-details/SeriesDetailsPage.test.tsx
@@ -0,0 +1,203 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { vi } from "vitest";
+import SeriesDetailsPage from "./SeriesDetailsPage";
+import * as seriesApi from "@/components/routes/create-series/api/seriesApi";
+
+vi.mock(
+  "@/components/routes/create-series/components/PlanSearchSelector",
+  () => ({
+    default: () => <div data-testid="plan-search-selector" />,
+  }),
+);
+
+const seriesFixture = {
+  id: "series-1",
+  group: { id: "group-1" },
+  metadata: [{ id: "m1", title: "Abhidhamma in a year", language: "EN" }],
+  featured: false,
+  status: "DRAFT",
+  plans: [
+    {
+      id: "plan-zh-1",
+      title: "示例计划",
+      language: "ZH",
+      status: "DRAFT",
+      total_days: 7,
+      featured: false,
+    },
+    {
+      id: "plan-en-1",
+      title: "English Plan",
+      language: "EN",
+      status: "PUBLISHED",
+      total_days: 5,
+      featured: true,
+      display_order: 0,
+      start_date: "2026-04-30T00:00:00Z",
+    },
+  ],
+};
+
+function renderPage(initialEntry = "/series/series-1") {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[initialEntry]}>
+        <Routes>
+          <Route path="/series/:seriesId" element={<SeriesDetailsPage />} />
+        </Routes>
+      </MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+function LocationProbe() {
+  const { search } = useLocation();
+  return <div data-testid="location-search">{search}</div>;
+}
+
+function SeriesDetailsWithLocation() {
+  return (
+    <>
+      <LocationProbe />
+      <SeriesDetailsPage />
+    </>
+  );
+}
+
+describe("SeriesDetailsPage", () => {
+  beforeEach(() => {
+    vi.spyOn(seriesApi, "getSeries").mockResolvedValue(seriesFixture as never);
+    vi.spyOn(seriesApi, "putSeriesPlans").mockResolvedValue(
+      seriesFixture as never,
+    );
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("navigates to plan new with series and active language in location state", async () => {
+    function PlanNewStateProbe() {
+      const { state, pathname } = useLocation();
+      return (
+        <>
+          <div data-testid="plan-new-location-state">
+            {JSON.stringify(state)}
+          </div>
+          <div data-testid="plan-new-pathname">{pathname}</div>
+        </>
+      );
+    }
+
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={["/series/series-1"]}>
+          <Routes>
+            <Route path="/series/:seriesId" element={<SeriesDetailsPage />} />
+            <Route
+              path="/groups/:groupId/plan/new"
+              element={<PlanNewStateProbe />}
+            />
+          </Routes>
+        </MemoryRouter>
+      </QueryClientProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Abhidhamma in a year")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: /中文/i }));
+    await user.click(screen.getByRole("link", { name: /Add New Plan/i }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("plan-new-location-state")).toHaveTextContent(
+        JSON.stringify({
+          seriesId: "series-1",
+          language: "ZH",
+          start_date: "2026-04-30T00:00:00Z",
+        }),
+      );
+      expect(screen.getByTestId("plan-new-pathname")).toHaveTextContent(
+        "/groups/group-1/plan/new",
+      );
+    });
+  });
+
+  it("renders series title and plans for selected language tab", async () => {
+    renderPage();
+
+    await waitFor(() => {
+      expect(screen.getByText("Abhidhamma in a year")).toBeInTheDocument();
+    });
+
+    expect(screen.getByText("English Plan")).toBeInTheDocument();
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: /中文/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText("示例计划")).toBeInTheDocument();
+    });
+    expect(screen.queryByText("English Plan")).not.toBeInTheDocument();
+  });
+
+  it("reads the active language from URL params", async () => {
+    renderPage("/series/series-1?language=ZH");
+
+    await waitFor(() => {
+      expect(screen.getByText("示例计划")).toBeInTheDocument();
+    });
+    expect(screen.queryByText("English Plan")).not.toBeInTheDocument();
+  });
+
+  it("updates URL params when selecting a language tab", async () => {
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={["/series/series-1"]}>
+          <Routes>
+            <Route
+              path="/series/:seriesId"
+              element={<SeriesDetailsWithLocation />}
+            />
+          </Routes>
+        </MemoryRouter>
+      </QueryClientProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("English Plan")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: /中文/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText("示例计划")).toBeInTheDocument();
+      expect(screen.getByTestId("location-search")).toHaveTextContent(
+        "?language=ZH",
+      );
+    });
+  });
+});
diff --git a/src/components/routes/series-details/SeriesDetailsPage.tsx b/src/components/routes/series-details/SeriesDetailsPage.tsx
new file mode 100644
index 00000000..cb4c5c3c
--- /dev/null
+++ b/src/components/routes/series-details/SeriesDetailsPage.tsx
@@ -0,0 +1,325 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  Link,
+  useNavigate,
+  useParams,
+  useSearchParams,
+} from "react-router-dom";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { IoMdArrowBack } from "react-icons/io";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import axiosInstance from "@/config/axios-config";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+import type { LanguageCode } from "@/schema/SeriesSchema";
+import { ROUTES } from "@/routes/paths";
+import {
+  getSeries,
+  putSeriesPlans,
+  resolveSeriesGroupId,
+} from "@/components/routes/create-series/api/seriesApi";
+import PlanSearchSelector from "@/components/routes/create-series/components/PlanSearchSelector";
+import type { SeriesPlan } from "@/schema/SeriesSchema";
+import { SeriesPlansTable } from "./SeriesPlansTable";
+import {
+  getLanguageTabCounts,
+  getLanguagesWithPlans,
+  getSeriesStartDateSettings,
+  getSeriesTitleForLanguage,
+  groupPlansByLanguage,
+  plansByLanguageToIdMap,
+  removePlanFromLanguage,
+  reorderPlansInLanguage,
+  seriesPlanRowsToSeriesPlans,
+  seriesPlansToRows,
+} from "./seriesDetailsMappers";
+import type { PlansByLanguage } from "./seriesDetailsTypes";
+import { useGroupContentPermissions } from "@/hooks/useGroupContentPermissions";
+import { DropdownButton } from "@/components/ui/molecules/dropdown-button/DropdownButton";
+import { SeriesLanguageActionsPanel } from "./SeriesLanguageActionsPanel";
+import {
+  buildSeriesLanguageParams,
+  parseSeriesLanguageParam,
+} from "./seriesDetailsUrlState";
+
+const togglePlanFeatured = async (planId: string) => {
+  const { data } = await axiosInstance.patch(
+    `/api/v1/cms/plans/${planId}/featured`,
+  );
+  return data;
+};
+
+const SeriesDetailsPage = () => {
+  const { seriesId } = useParams<{ seriesId: string }>();
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const queryClient = useQueryClient();
+  const [plansByLang, setPlansByLang] = useState<PlansByLanguage>({});
+
+  const activeLanguage = useMemo(
+    () => parseSeriesLanguageParam(searchParams),
+    [searchParams],
+  );
+
+  const setActiveLanguage = useCallback(
+    (code: LanguageCode) => {
+      setSearchParams(buildSeriesLanguageParams(searchParams, code), {
+        replace: true,
+      });
+    },
+    [searchParams, setSearchParams],
+  );
+
+  const {
+    data: seriesData,
+    isLoading,
+    isError,
+    error,
+  } = useQuery({
+    queryKey: ["series", seriesId],
+    queryFn: () => getSeries(seriesId!),
+    enabled: Boolean(seriesId),
+    refetchOnWindowFocus: false,
+  });
+
+  useEffect(() => {
+    if (!seriesData) return;
+    setPlansByLang(groupPlansByLanguage(seriesData.plans ?? []));
+  }, [seriesData]);
+
+  const tabCounts = useMemo(
+    () => getLanguageTabCounts(plansByLang),
+    [plansByLang],
+  );
+
+  const headerTitle = getSeriesTitleForLanguage(
+    seriesData?.metadata,
+    activeLanguage,
+  );
+
+  const activePlans = plansByLang[activeLanguage] ?? [];
+  const activeSeriesPlans = useMemo(
+    () => seriesPlanRowsToSeriesPlans(activePlans),
+    [activePlans],
+  );
+  const cloneSourceLanguages = useMemo(
+    () => getLanguagesWithPlans(tabCounts, activeLanguage),
+    [tabCounts, activeLanguage],
+  );
+  const seriesStartDate = useMemo(
+    () => getSeriesStartDateSettings(seriesData?.plans ?? []),
+    [seriesData?.plans],
+  );
+
+  const seriesGroupId = useMemo(
+    () => resolveSeriesGroupId(seriesData),
+    [seriesData],
+  );
+
+  const seriesStatus = seriesData?.status ?? "DRAFT";
+  const {
+    platformRole,
+    groupRole,
+    platformReadOnly,
+    canEdit: canEditSeries,
+    canChangeStatus: canFeaturePlans,
+    canTransfer: canTransferSeries,
+  } = useGroupContentPermissions(seriesGroupId, seriesStatus);
+
+  const canManageSeriesPlans = canEditSeries && !platformReadOnly;
+  const showClonePlansPanel =
+    canManageSeriesPlans &&
+    activePlans.length === 0 &&
+    cloneSourceLanguages.length > 0;
+
+  const persistPlansMutation = useMutation({
+    mutationFn: (grouped: PlansByLanguage) =>
+      putSeriesPlans(seriesId!, plansByLanguageToIdMap(grouped)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["series", seriesId] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard-items"] });
+    },
+    onError: (err: unknown) => {
+      const message =
+        (err as { response?: { data?: { detail?: { message?: string } } } })
+          ?.response?.data?.detail?.message ?? "Could not update series plans";
+      toast.error(message);
+    },
+  });
+
+  const featuredMutation = useMutation({
+    mutationFn: togglePlanFeatured,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["series", seriesId] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard-items"] });
+    },
+    onError: () => toast.error("Could not update featured"),
+  });
+
+  const applyGrouped = (next: PlansByLanguage) => {
+    setPlansByLang(next);
+    persistPlansMutation.mutate(next);
+  };
+
+  const handleActivePlansChange = (next: SeriesPlan[]) => {
+    if (!canManageSeriesPlans) return;
+    const nextRows = seriesPlansToRows(next, activeLanguage, activePlans);
+    applyGrouped({ ...plansByLang, [activeLanguage]: nextRows });
+  };
+
+  const handleRemove = (planId: string) => {
+    if (!canManageSeriesPlans) return;
+    applyGrouped(removePlanFromLanguage(plansByLang, activeLanguage, planId));
+  };
+
+  const handleReorder = (activeId: string, overId: string) => {
+    if (!canManageSeriesPlans) return;
+    applyGrouped(
+      reorderPlansInLanguage(plansByLang, activeLanguage, activeId, overId),
+    );
+  };
+
+  const tabClass = (active: boolean) =>
+    `border-b-2 px-1 pb-2 text-sm font-semibold transition-colors ${
+      active
+        ? "border-[#A51C21] text-foreground"
+        : "border-transparent text-muted-foreground hover:text-foreground"
+    }`;
+
+  if (!seriesId) {
+    return null;
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex h-[calc(100vh-40px)] items-center justify-center">
+        <p className="text-muted-foreground">Loading…</p>
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="flex h-[calc(100vh-40px)] flex-col items-center justify-center gap-4">
+        <p className="text-destructive">{String(error?.message ?? "Error")}</p>
+        <Pecha.Button
+          variant="outline"
+          onClick={() => navigate(ROUTES.dashboard)}
+        >
+          Back to dashboard
+        </Pecha.Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col border h-[calc(100vh-40px)] overflow-auto bg-[#F5F5F5] dark:bg-[#181818] my-4 rounded-l-2xl font-dynamic">
+      <div className="flex flex-wrap items-center gap-3 border-b border-dashed border-gray-300 px-4 py-4 dark:border-input">
+        <Pecha.Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          aria-label="Back to dashboard"
+          onClick={() => navigate("-1")}
+        >
+          <IoMdArrowBack className="h-4 w-4" />
+        </Pecha.Button>
+        <h1 className="text-lg font-semibold">{headerTitle}</h1>
+        {canEditSeries && !platformReadOnly ? (
+          <Link
+            to={ROUTES.seriesEdit(seriesId)}
+            className="text-sm text-muted-foreground hover:text-foreground underline-offset-2 hover:underline"
+          >
+            Edit series
+          </Link>
+        ) : null}
+        {canTransferSeries && seriesGroupId && !platformReadOnly ? (
+          <DropdownButton
+            id={seriesId}
+            entityType="series"
+            currentStatus={seriesStatus}
+            triggerVariant="icon"
+            platformRole={platformRole}
+            groupRole={groupRole}
+            sourceGroupId={seriesGroupId}
+            contentTitle={headerTitle}
+          />
+        ) : null}
+      </div>
+
+      {platformReadOnly ? (
+        <p className="mx-4 mt-2 text-sm text-muted-foreground">
+          You have read-only access to this series.
+        </p>
+      ) : !canEditSeries ? (
+        <p className="mx-4 mt-2 text-sm text-muted-foreground">
+          This series cannot be edited with your current role.
+        </p>
+      ) : null}
+
+      <div className="flex flex-wrap items-end justify-between gap-4 px-4 py-3">
+        <div className="flex flex-wrap gap-6">
+          {PLAN_LANGUAGE.map(({ label, value }) => {
+            const code = value as LanguageCode;
+            const count = tabCounts[code] ?? 0;
+            return (
+              <button
+                key={code}
+                type="button"
+                className={tabClass(activeLanguage === code)}
+                onClick={() => setActiveLanguage(code)}
+              >
+                {label} ({count})
+              </button>
+            );
+          })}
+        </div>
+        {canManageSeriesPlans ? (
+          <div className="w-full max-w-md min-w-[280px]">
+            <PlanSearchSelector
+              value={activeSeriesPlans}
+              onChange={handleActivePlansChange}
+              searchLanguage={activeLanguage}
+              groupId={seriesGroupId}
+              hideSelectedList
+              searchPlaceholder="Find Plans to add to series"
+            />
+          </div>
+        ) : null}
+      </div>
+
+      <div className="flex-1 px-4 pb-6">
+        {activePlans.length > 0 ? (
+          <div className="overflow-x-auto">
+            <SeriesPlansTable
+              plans={activePlans}
+              seriesId={seriesId}
+              sourceGroupId={seriesGroupId}
+              groupRole={groupRole}
+              platformRole={platformRole}
+              readOnly={platformReadOnly || !canManageSeriesPlans}
+              canFeature={canFeaturePlans}
+              onReorder={handleReorder}
+              onToggleFeatured={(planId) => featuredMutation.mutate(planId)}
+              onRemoveFromSeries={handleRemove}
+            />
+          </div>
+        ) : null}
+
+        {canManageSeriesPlans && seriesGroupId ? (
+          <SeriesLanguageActionsPanel
+            seriesId={seriesId}
+            groupId={seriesGroupId}
+            activeLanguage={activeLanguage}
+            hasActivePlans={activePlans.length > 0}
+            showClonePanel={showClonePlansPanel}
+            cloneSourceLanguages={cloneSourceLanguages}
+            seriesStartDate={seriesStartDate}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default SeriesDetailsPage;
diff --git a/src/components/routes/series-details/SeriesLanguageActionsPanel.tsx b/src/components/routes/series-details/SeriesLanguageActionsPanel.tsx
new file mode 100644
index 00000000..ecc60330
--- /dev/null
+++ b/src/components/routes/series-details/SeriesLanguageActionsPanel.tsx
@@ -0,0 +1,62 @@
+import { Link } from "react-router-dom";
+import { IoMdAdd } from "react-icons/io";
+import { Pecha } from "@/components/ui/shadimport";
+import { ROUTES } from "@/routes/paths";
+import type { LanguageCode } from "@/schema/SeriesSchema";
+import type { SeriesStartDateSettings } from "./seriesDetailsMappers";
+import { CloneLanguagePlansPanel } from "./CloneLanguagePlansPanel";
+
+type SeriesLanguageActionsPanelProps = {
+  seriesId: string;
+  groupId: string;
+  activeLanguage: LanguageCode;
+  hasActivePlans: boolean;
+  showClonePanel: boolean;
+  cloneSourceLanguages: LanguageCode[];
+  seriesStartDate: SeriesStartDateSettings | null;
+};
+
+export function SeriesLanguageActionsPanel({
+  seriesId,
+  groupId,
+  activeLanguage,
+  hasActivePlans,
+  showClonePanel,
+  cloneSourceLanguages,
+  seriesStartDate,
+}: Readonly<SeriesLanguageActionsPanelProps>) {
+  const planNewState = {
+    seriesId,
+    language: activeLanguage,
+    ...(seriesStartDate ? { start_date: seriesStartDate.start_date } : {}),
+  };
+
+  return (
+    <div className={hasActivePlans ? "mt-4" : "mt-0"}>
+      <div className="flex flex-col items-center gap-6 rounded-xl border border-dashed border-gray-300 bg-white/80 px-6 py-8 dark:border-input dark:bg-[#1d1d1f]/80">
+        {showClonePanel ? (
+          <CloneLanguagePlansPanel
+            seriesId={seriesId}
+            targetLanguage={activeLanguage}
+            sourceLanguages={cloneSourceLanguages}
+            embedded
+          />
+        ) : null}
+
+        {showClonePanel ? (
+          <div className="h-px w-full max-w-md border-t border-dashed border-gray-300 dark:border-input" />
+        ) : null}
+
+        <Link to={ROUTES.groupPlanNew(groupId)} state={planNewState}>
+          <Pecha.Button
+            type="button"
+            className="gap-2 bg-[#A51C21] hover:bg-[#8a171c] text-white"
+          >
+            <IoMdAdd className="h-4 w-4" />
+            Add New Plan
+          </Pecha.Button>
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/routes/series-details/SeriesPlanRowActions.tsx b/src/components/routes/series-details/SeriesPlanRowActions.tsx
new file mode 100644
index 00000000..16f63312
--- /dev/null
+++ b/src/components/routes/series-details/SeriesPlanRowActions.tsx
@@ -0,0 +1,53 @@
+import { DropdownButton } from "@/components/ui/molecules/dropdown-button/DropdownButton";
+import { DASHBOARD_TABLE_ICON_BTN } from "@/components/routes/dashboard/dashboardTable";
+import type { AuthorGroupMemberRole } from "@/components/routes/groups/api/groupsApi";
+import type { PlatformRole } from "@/lib/platformAccess";
+import { canEditContent } from "@/lib/contentPermissions";
+
+type SeriesPlanRowActionsProps = {
+  planId: string;
+  planTitle: string;
+  status: string;
+  seriesId: string;
+  sourceGroupId?: string | null;
+  groupRole?: AuthorGroupMemberRole;
+  platformRole?: PlatformRole;
+  readOnly?: boolean;
+  onRemoveFromSeries: () => void;
+};
+
+export function SeriesPlanRowActions({
+  planId,
+  planTitle,
+  status,
+  seriesId,
+  sourceGroupId,
+  groupRole,
+  platformRole,
+  readOnly = false,
+  onRemoveFromSeries,
+}: SeriesPlanRowActionsProps) {
+  const canRemove =
+    !readOnly && canEditContent(groupRole, status, platformRole);
+
+  const additionalMenuItems = canRemove
+    ? [{ label: "Remove from series", onClick: onRemoveFromSeries }]
+    : [];
+
+  return (
+    <DropdownButton
+      id={planId}
+      entityType="plan"
+      currentStatus={status}
+      triggerVariant="icon"
+      triggerClassName={DASHBOARD_TABLE_ICON_BTN}
+      invalidateSeriesId={seriesId}
+      platformRole={platformRole}
+      groupRole={groupRole}
+      sourceGroupId={sourceGroupId}
+      contentTitle={planTitle}
+      readOnly={readOnly}
+      additionalMenuItems={additionalMenuItems}
+    />
+  );
+}
diff --git a/src/components/routes/series-details/SeriesPlansTable.tsx b/src/components/routes/series-details/SeriesPlansTable.tsx
new file mode 100644
index 00000000..e3cbd708
--- /dev/null
+++ b/src/components/routes/series-details/SeriesPlansTable.tsx
@@ -0,0 +1,298 @@
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { CSS } from "@dnd-kit/utilities";
+import { Pecha } from "@/components/ui/shadimport";
+import { useNavigate } from "react-router-dom";
+import defaultCover from "/default-image.webp";
+import { PiDotsSixVertical } from "react-icons/pi";
+import { formatDistanceToNow } from "date-fns";
+import { ROUTES } from "@/routes/paths";
+import { DASHBOARD_TABLE_ICON_BTN } from "@/components/routes/dashboard/dashboardTable";
+import {
+  FeaturedStar,
+  languageChip,
+  statusChip,
+} from "@/components/routes/dashboard/dashboardTableUi";
+import type { AuthorGroupMemberRole } from "@/components/routes/groups/api/groupsApi";
+import {
+  canAccessPlanRoutes,
+  shouldShowCmsActionsColumn,
+  type PlatformRole,
+} from "@/lib/platformAccess";
+import type { SeriesPlanRow } from "./seriesDetailsTypes";
+import { SeriesPlanRowActions } from "./SeriesPlanRowActions";
+
+function formatPlanModified(modifiedAt: string | null): string {
+  if (!modifiedAt) return "—";
+  const d = new Date(modifiedAt);
+  if (Number.isNaN(d.getTime())) return "—";
+  return formatDistanceToNow(d, { addSuffix: true });
+}
+
+function SortablePlanRow({
+  plan,
+  seriesId,
+  sourceGroupId,
+  groupRole,
+  platformRole,
+  readOnly,
+  canFeature,
+  onToggleFeatured,
+  onRemoveFromSeries,
+  canReorder,
+  showActionsColumn,
+}: {
+  plan: SeriesPlanRow;
+  seriesId: string;
+  sourceGroupId?: string | null;
+  groupRole?: AuthorGroupMemberRole;
+  platformRole?: PlatformRole;
+  readOnly?: boolean;
+  canFeature?: boolean;
+  onToggleFeatured: (planId: string) => void;
+  onRemoveFromSeries: (planId: string) => void;
+  canReorder: boolean;
+  showActionsColumn: boolean;
+}) {
+  const navigate = useNavigate();
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: plan.id, disabled: !canReorder || readOnly });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const daysLabel = `${plan.total_days} ${plan.total_days === 1 ? "Day" : "Days"}`;
+  const featuredDisabled = plan.status !== "PUBLISHED";
+  const canOpenPlan = canAccessPlanRoutes(platformRole);
+
+  return (
+    <Pecha.TableRow
+      ref={setNodeRef}
+      style={style}
+      className="dark:bg-background"
+      {...attributes}
+    >
+      <Pecha.TableCell className="w-10">
+        <button
+          type="button"
+          className="shrink-0 rounded p-1 text-muted-foreground hover:text-foreground touch-none disabled:cursor-not-allowed disabled:opacity-30"
+          aria-label={`Reorder ${plan.title}`}
+          disabled={!canReorder}
+          {...listeners}
+        >
+          <PiDotsSixVertical className="h-4 w-4" />
+        </button>
+      </Pecha.TableCell>
+      <Pecha.TableCell>
+        {canOpenPlan ? (
+          <button
+            type="button"
+            className="flex w-full items-center gap-3 text-left"
+            onClick={() => navigate(ROUTES.plan(plan.id))}
+          >
+            <img
+              src={plan.image_url || defaultCover}
+              onError={(e) => {
+                e.currentTarget.src = defaultCover;
+              }}
+              alt=""
+              className="h-12 w-28 shrink-0 rounded border object-cover"
+            />
+            <div className="min-w-0">
+              <div className="text-sm font-semibold">{plan.title}</div>
+              <div className="mt-1.5 flex flex-wrap gap-1.5">
+                {languageChip(plan.language)}
+                {statusChip(plan.status)}
+                <span className="rounded-full bg-[#DEAD2D4D] px-2.5 py-0.5 text-xs font-medium text-[#020C1D] dark:bg-[#DEAD2D4D] dark:text-white">
+                  {daysLabel}
+                </span>
+              </div>
+            </div>
+          </button>
+        ) : (
+          <div className="flex w-full items-center gap-3 text-left">
+            <img
+              src={plan.image_url || defaultCover}
+              onError={(e) => {
+                e.currentTarget.src = defaultCover;
+              }}
+              alt=""
+              className="h-12 w-28 shrink-0 rounded border object-cover"
+            />
+            <div className="min-w-0">
+              <div className="text-sm font-semibold">{plan.title}</div>
+              <div className="mt-1.5 flex flex-wrap gap-1.5">
+                {languageChip(plan.language)}
+                {statusChip(plan.status)}
+                <span className="rounded-full bg-[#DEAD2D4D] px-2.5 py-0.5 text-xs font-medium text-[#020C1D] dark:bg-[#DEAD2D4D] dark:text-white">
+                  {daysLabel}
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+      </Pecha.TableCell>
+      <Pecha.TableCell className="text-center text-sm">
+        {plan.enrolled}
+      </Pecha.TableCell>
+      <Pecha.TableCell className="text-center text-sm text-muted-foreground">
+        {formatPlanModified(plan.modifiedAt)}
+      </Pecha.TableCell>
+      <Pecha.TableCell className="text-center">
+        {canFeature && !readOnly ? (
+          <Pecha.Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className={`${DASHBOARD_TABLE_ICON_BTN} disabled:bg-[#F3F4F6] disabled:hover:bg-[#F3F4F6] dark:disabled:bg-[#2a2a2a] dark:disabled:hover:bg-[#2a2a2a]`}
+            disabled={featuredDisabled}
+            aria-label={plan.featured ? "Featured" : "Not featured"}
+            onClick={() => onToggleFeatured(plan.id)}
+          >
+            <FeaturedStar
+              featured={plan.featured}
+              disabled={featuredDisabled}
+            />
+          </Pecha.Button>
+        ) : (
+          <span
+            className={`${DASHBOARD_TABLE_ICON_BTN} inline-flex items-center justify-center`}
+            aria-hidden
+          >
+            <FeaturedStar featured={plan.featured} disabled />
+          </span>
+        )}
+      </Pecha.TableCell>
+      {showActionsColumn ? (
+        <Pecha.TableCell className="text-center">
+          <SeriesPlanRowActions
+            planId={plan.id}
+            planTitle={plan.title}
+            status={plan.status}
+            seriesId={seriesId}
+            sourceGroupId={sourceGroupId}
+            groupRole={groupRole}
+            platformRole={platformRole}
+            readOnly={readOnly}
+            onRemoveFromSeries={() => onRemoveFromSeries(plan.id)}
+          />
+        </Pecha.TableCell>
+      ) : null}
+    </Pecha.TableRow>
+  );
+}
+
+type SeriesPlansTableProps = {
+  plans: SeriesPlanRow[];
+  seriesId: string;
+  sourceGroupId?: string | null;
+  groupRole?: AuthorGroupMemberRole;
+  platformRole?: PlatformRole;
+  readOnly?: boolean;
+  canFeature?: boolean;
+  onReorder: (activeId: string, overId: string) => void;
+  onToggleFeatured: (planId: string) => void;
+  onRemoveFromSeries: (planId: string) => void;
+};
+
+export function SeriesPlansTable({
+  plans,
+  seriesId,
+  sourceGroupId,
+  groupRole,
+  platformRole,
+  readOnly = false,
+  canFeature = false,
+  onReorder,
+  onToggleFeatured,
+  onRemoveFromSeries,
+}: SeriesPlansTableProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
+  );
+  const canReorder = !readOnly && plans.length > 1;
+  const showActionsColumn =
+    !readOnly && shouldShowCmsActionsColumn(platformRole);
+  const ids = plans.map((p) => p.id);
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    if (!canReorder) return;
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      onReorder(String(active.id), String(over.id));
+    }
+  };
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={handleDragEnd}
+      modifiers={[restrictToVerticalAxis]}
+    >
+      <Pecha.Table className="bg-white dark:bg-[#181818]">
+        <Pecha.TableHeader className="dark:bg-[#1d1d1f]">
+          <Pecha.TableRow className="font-dynamic">
+            <Pecha.TableHead className="w-10" />
+            <Pecha.TableHead className="font-bold">Title</Pecha.TableHead>
+            <Pecha.TableHead className="w-[100px] text-center font-bold">
+              Enrolled
+            </Pecha.TableHead>
+            <Pecha.TableHead className="w-[130px] text-center font-bold">
+              Date Modified
+            </Pecha.TableHead>
+            <Pecha.TableHead className="w-[72px] text-center font-bold">
+              Featured
+            </Pecha.TableHead>
+            {showActionsColumn ? (
+              <Pecha.TableHead className="w-[100px] text-center font-bold">
+                Actions
+              </Pecha.TableHead>
+            ) : null}
+          </Pecha.TableRow>
+        </Pecha.TableHeader>
+        <SortableContext items={ids} strategy={verticalListSortingStrategy}>
+          <Pecha.TableBody>
+            {plans.map((plan) => (
+              <SortablePlanRow
+                key={plan.id}
+                plan={plan}
+                seriesId={seriesId}
+                sourceGroupId={sourceGroupId}
+                groupRole={groupRole}
+                platformRole={platformRole}
+                readOnly={readOnly}
+                canFeature={canFeature}
+                onToggleFeatured={onToggleFeatured}
+                onRemoveFromSeries={onRemoveFromSeries}
+                canReorder={canReorder}
+                showActionsColumn={showActionsColumn}
+              />
+            ))}
+          </Pecha.TableBody>
+        </SortableContext>
+      </Pecha.Table>
+    </DndContext>
+  );
+}
diff --git a/src/components/routes/series-details/seriesDetailsMappers.test.ts b/src/components/routes/series-details/seriesDetailsMappers.test.ts
new file mode 100644
index 00000000..baf04e30
--- /dev/null
+++ b/src/components/routes/series-details/seriesDetailsMappers.test.ts
@@ -0,0 +1,95 @@
+import { describe, expect, it } from "vitest";
+import {
+  getSeriesStartDateSettings,
+  groupPlansByLanguage,
+  mapPlanDtoToRow,
+  plansByLanguageToIdMap,
+  reorderPlansInLanguage,
+} from "./seriesDetailsMappers";
+import type { SeriesPlanDTO } from "@/components/routes/create-series/api/seriesApi";
+
+const plans: SeriesPlanDTO[] = [
+  {
+    id: "p1",
+    title: "Plan 1",
+    language: "EN",
+    display_order: 2,
+  },
+  {
+    id: "p2",
+    title: "Plan 2",
+    language: "EN",
+    display_order: 1,
+  },
+  {
+    id: "p3",
+    title: "Plan ZH",
+    language: "ZH",
+  },
+];
+
+describe("seriesDetailsMappers", () => {
+  it("resolves plan cover from nested image object", () => {
+    const row = mapPlanDtoToRow({
+      id: "p1",
+      title: "Plan 1",
+      language: "EN",
+      image_url: null,
+      image: { medium: "https://example.com/cover-medium.jpg" },
+    });
+    expect(row?.image_url).toBe("https://example.com/cover-medium.jpg");
+  });
+
+  it("groups and sorts plans by display_order", () => {
+    const grouped = groupPlansByLanguage(plans);
+    expect(grouped.EN?.map((p) => p.id)).toEqual(["p2", "p1"]);
+    expect(grouped.ZH?.map((p) => p.id)).toEqual(["p3"]);
+  });
+
+  it("reorderPlansInLanguage updates id order", () => {
+    const grouped = groupPlansByLanguage(plans);
+    const next = reorderPlansInLanguage(grouped, "EN", "p1", "p2");
+    expect(next.EN?.map((p) => p.id)).toEqual(["p1", "p2"]);
+  });
+
+  it("plansByLanguageToIdMap preserves order", () => {
+    const grouped = groupPlansByLanguage(plans);
+    const reordered = reorderPlansInLanguage(grouped, "EN", "p1", "p2");
+    expect(plansByLanguageToIdMap(reordered)).toEqual({
+      EN: ["p1", "p2"],
+      ZH: ["p3"],
+    });
+  });
+
+  it("getSeriesStartDateSettings uses the first plan by display_order", () => {
+    expect(
+      getSeriesStartDateSettings([
+        {
+          id: "p2",
+          title: "Later",
+          language: "EN",
+          display_order: 2,
+          start_date: "2026-06-01T00:00:00Z",
+        },
+        {
+          id: "p1",
+          title: "First",
+          language: "BO",
+          display_order: 1,
+          start_date: "2026-04-30T00:00:00Z",
+        },
+      ]),
+    ).toEqual({
+      start_date: "2026-04-30T00:00:00Z",
+      mode: "specific",
+    });
+    expect(
+      getSeriesStartDateSettings([
+        { id: "p1", title: "Enroll", language: "EN", display_order: 0 },
+      ]),
+    ).toEqual({
+      start_date: null,
+      mode: "enroll",
+    });
+  });
+});
diff --git a/src/components/routes/series-details/seriesDetailsMappers.ts b/src/components/routes/series-details/seriesDetailsMappers.ts
new file mode 100644
index 00000000..5d028c19
--- /dev/null
+++ b/src/components/routes/series-details/seriesDetailsMappers.ts
@@ -0,0 +1,237 @@
+import type {
+  SeriesMetadataDTO,
+  SeriesPlanDTO,
+} from "@/components/routes/create-series/api/seriesApi";
+import type { LanguageCode } from "@/schema/SeriesSchema";
+import {
+  LANGUAGE_CODE_ORDER,
+  normalizeLanguageCode,
+} from "@/lib/languageCodes";
+import {
+  normalizeStatus,
+  resolveDashboardItemImageUrl,
+  type DashboardItemImageFields,
+} from "@/components/routes/dashboard/dashboardTable";
+import type { Plan } from "@/components/routes/create-series/api/planSearchApi";
+import type { SeriesPlan } from "@/schema/SeriesSchema";
+import type { PlansByLanguage, SeriesPlanRow } from "./seriesDetailsTypes";
+
+const LANG_ORDER: LanguageCode[] = [...LANGUAGE_CODE_ORDER];
+
+function normalizeLang(raw: string): LanguageCode | null {
+  return normalizeLanguageCode(raw);
+}
+
+export function mapPlanDtoToRow(plan: SeriesPlanDTO): SeriesPlanRow | null {
+  const language = normalizeLang(plan.language);
+  if (!language) return null;
+  const enrolledRaw = plan.enrolled_count ?? plan.subscription_count ?? 0;
+  const enrolled =
+    typeof enrolledRaw === "number"
+      ? enrolledRaw
+      : parseInt(String(enrolledRaw), 10) || 0;
+  const td = plan.total_days ?? 0;
+  const total_days =
+    typeof td === "number" ? td : parseInt(String(td ?? "0"), 10) || 0;
+  const mappedImageUrl = resolveDashboardItemImageUrl(
+    plan as DashboardItemImageFields,
+  );
+  return {
+    id: String(plan.id),
+    title: plan.title,
+    image_url: mappedImageUrl,
+    language,
+    status: normalizeStatus(plan.status),
+    total_days,
+    enrolled,
+    modifiedAt: plan.updated_at ?? null,
+    featured: !!plan.featured,
+  };
+}
+
+export function mapSearchPlanToRow(plan: Plan): SeriesPlanRow | null {
+  const language = normalizeLang(plan.language);
+  if (!language) return null;
+  return {
+    id: plan.id,
+    title: plan.title,
+    image_url: resolveDashboardItemImageUrl({
+      image_url: plan.image_url,
+      image_key: plan.image_key,
+    }),
+    language,
+    status: normalizeStatus(plan.status),
+    total_days: plan.total_days ?? 0,
+    enrolled: plan.subscription_count ?? 0,
+    modifiedAt: null,
+    featured: !!plan.featured,
+  };
+}
+
+export function groupPlansByLanguage(plans: SeriesPlanDTO[]): PlansByLanguage {
+  const buckets: Partial<
+    Record<LanguageCode, { row: SeriesPlanRow; ord: number }[]>
+  > = {};
+  for (const p of plans) {
+    const row = mapPlanDtoToRow(p);
+    if (!row) continue;
+    const ord =
+      typeof p.display_order === "number" && !Number.isNaN(p.display_order)
+        ? p.display_order
+        : 1_000_000;
+    if (!buckets[row.language]) buckets[row.language] = [];
+    buckets[row.language]!.push({ row, ord });
+  }
+  const out: PlansByLanguage = {};
+  for (const code of LANG_ORDER) {
+    const list = buckets[code];
+    if (!list?.length) continue;
+    out[code] = [...list].sort((a, b) => a.ord - b.ord).map((x) => x.row);
+  }
+  return out;
+}
+
+export function plansByLanguageToIdMap(
+  grouped: PlansByLanguage,
+): Partial<Record<LanguageCode, string[]>> {
+  const out: Partial<Record<LanguageCode, string[]>> = {};
+  for (const code of LANG_ORDER) {
+    const rows = grouped[code];
+    if (rows?.length) out[code] = rows.map((r) => r.id);
+  }
+  return out;
+}
+
+export function getLanguageTabCounts(
+  grouped: PlansByLanguage,
+): Record<LanguageCode, number> {
+  return {
+    EN: grouped.EN?.length ?? 0,
+    BO: grouped.BO?.length ?? 0,
+    ZH: grouped.ZH?.length ?? 0,
+    HI: grouped.HI?.length ?? 0,
+    NE: grouped.NE?.length ?? 0,
+    MN: grouped.MN?.length ?? 0,
+  };
+}
+
+export function getLanguagesWithPlans(
+  tabCounts: Record<LanguageCode, number>,
+  exclude?: LanguageCode,
+): LanguageCode[] {
+  return LANG_ORDER.filter(
+    (code) => code !== exclude && (tabCounts[code] ?? 0) > 0,
+  );
+}
+
+export function getSeriesTitleForLanguage(
+  metadata: SeriesMetadataDTO[] | undefined,
+  language: LanguageCode,
+  fallback = "Untitled series",
+): string {
+  if (!metadata?.length) return fallback;
+  const row = metadata.find(
+    (m) => normalizeLang(String(m.language ?? m.lang ?? "")) === language,
+  );
+  const title = row?.title?.trim();
+  if (title) return title;
+  const en = metadata.find(
+    (m) => normalizeLang(String(m.language ?? m.lang ?? "")) === "EN",
+  );
+  if (en?.title?.trim()) return en.title.trim();
+  return metadata[0]?.title?.trim() || fallback;
+}
+
+export function reorderPlansInLanguage(
+  grouped: PlansByLanguage,
+  language: LanguageCode,
+  activeId: string,
+  overId: string,
+): PlansByLanguage {
+  const list = [...(grouped[language] ?? [])];
+  const from = list.findIndex((p) => p.id === activeId);
+  const to = list.findIndex((p) => p.id === overId);
+  if (from < 0 || to < 0 || from === to) return grouped;
+  const [moved] = list.splice(from, 1);
+  list.splice(to, 0, moved);
+  return { ...grouped, [language]: list };
+}
+
+export function attachPlanToLanguage(
+  grouped: PlansByLanguage,
+  language: LanguageCode,
+  plan: SeriesPlanRow,
+): PlansByLanguage {
+  const list = grouped[language] ?? [];
+  if (list.some((p) => p.id === plan.id)) return grouped;
+  return { ...grouped, [language]: [...list, plan] };
+}
+
+export function seriesPlanRowsToSeriesPlans(
+  rows: SeriesPlanRow[],
+): SeriesPlan[] {
+  return rows.map(({ id, title, image_url }) => ({
+    id,
+    title,
+    image_url: image_url || undefined,
+  }));
+}
+
+export function seriesPlansToRows(
+  plans: SeriesPlan[],
+  language: LanguageCode,
+  existing: SeriesPlanRow[],
+): SeriesPlanRow[] {
+  return plans.map((sp) => {
+    const prev = existing.find((p) => p.id === sp.id);
+    if (prev) return prev;
+    return {
+      id: sp.id,
+      title: sp.title,
+      image_url: sp.image_url ?? "",
+      language,
+      status: "DRAFT",
+      total_days: 0,
+      enrolled: 0,
+      modifiedAt: null,
+      featured: false,
+    };
+  });
+}
+
+export function removePlanFromLanguage(
+  grouped: PlansByLanguage,
+  language: LanguageCode,
+  planId: string,
+): PlansByLanguage {
+  const list = grouped[language] ?? [];
+  return { ...grouped, [language]: list.filter((p) => p.id !== planId) };
+}
+
+export type SeriesStartDateSettings = {
+  start_date: string | null;
+  mode: "enroll" | "specific";
+};
+
+/** First plan in the series (by display_order) defines the shared start date settings. */
+export function getSeriesStartDateSettings(
+  plans: SeriesPlanDTO[],
+): SeriesStartDateSettings | null {
+  const sorted = [...plans].sort((a, b) => {
+    const aOrd =
+      typeof a.display_order === "number" && !Number.isNaN(a.display_order)
+        ? a.display_order
+        : 1_000_000;
+    const bOrd =
+      typeof b.display_order === "number" && !Number.isNaN(b.display_order)
+        ? b.display_order
+        : 1_000_000;
+    return aOrd - bOrd;
+  });
+  if (!sorted.length) return null;
+  const start_date = sorted[0].start_date ?? null;
+  return {
+    start_date,
+    mode: start_date ? "specific" : "enroll",
+  };
+}
diff --git a/src/components/routes/series-details/seriesDetailsTypes.ts b/src/components/routes/series-details/seriesDetailsTypes.ts
new file mode 100644
index 00000000..b4143fb2
--- /dev/null
+++ b/src/components/routes/series-details/seriesDetailsTypes.ts
@@ -0,0 +1,15 @@
+import type { LanguageCode } from "@/schema/SeriesSchema";
+
+export type SeriesPlanRow = {
+  id: string;
+  title: string;
+  image_url: string;
+  language: LanguageCode;
+  status: string;
+  total_days: number;
+  enrolled: number;
+  modifiedAt: string | null;
+  featured: boolean;
+};
+
+export type PlansByLanguage = Partial<Record<LanguageCode, SeriesPlanRow[]>>;
diff --git a/src/components/routes/series-details/seriesDetailsUrlState.test.ts b/src/components/routes/series-details/seriesDetailsUrlState.test.ts
new file mode 100644
index 00000000..d59c160d
--- /dev/null
+++ b/src/components/routes/series-details/seriesDetailsUrlState.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildSeriesLanguageParams,
+  parseSeriesLanguageParam,
+} from "./seriesDetailsUrlState";
+
+describe("seriesDetailsUrlState", () => {
+  it("defaults to EN when language param is missing or invalid", () => {
+    expect(parseSeriesLanguageParam(new URLSearchParams())).toBe("EN");
+    expect(parseSeriesLanguageParam(new URLSearchParams("language=xx"))).toBe(
+      "EN",
+    );
+  });
+
+  it("parses a valid language param", () => {
+    expect(parseSeriesLanguageParam(new URLSearchParams("language=zh"))).toBe(
+      "ZH",
+    );
+  });
+
+  it("removes language param for EN and sets it for other languages", () => {
+    const withZh = buildSeriesLanguageParams(
+      new URLSearchParams("language=ZH"),
+      "EN",
+    );
+    expect(withZh.get("language")).toBeNull();
+
+    const withBo = buildSeriesLanguageParams(new URLSearchParams(), "BO");
+    expect(withBo.get("language")).toBe("BO");
+  });
+});
diff --git a/src/components/routes/series-details/seriesDetailsUrlState.ts b/src/components/routes/series-details/seriesDetailsUrlState.ts
new file mode 100644
index 00000000..31dffa0c
--- /dev/null
+++ b/src/components/routes/series-details/seriesDetailsUrlState.ts
@@ -0,0 +1,26 @@
+import { normalizeLanguageCode } from "@/lib/languageCodes";
+import type { LanguageCode } from "@/schema/SeriesSchema";
+
+const DEFAULT_LANGUAGE: LanguageCode = "EN";
+
+export function parseSeriesLanguageParam(
+  searchParams: URLSearchParams,
+): LanguageCode {
+  return (
+    normalizeLanguageCode(searchParams.get("language") ?? "") ??
+    DEFAULT_LANGUAGE
+  );
+}
+
+export function buildSeriesLanguageParams(
+  searchParams: URLSearchParams,
+  language: LanguageCode,
+): URLSearchParams {
+  const next = new URLSearchParams(searchParams);
+  if (language === DEFAULT_LANGUAGE) {
+    next.delete("language");
+  } else {
+    next.set("language", language);
+  }
+  return next;
+}
diff --git a/src/components/routes/tags/TagFormDialog.tsx b/src/components/routes/tags/TagFormDialog.tsx
index 06a9d2a2..a4183bde 100644
--- a/src/components/routes/tags/TagFormDialog.tsx
+++ b/src/components/routes/tags/TagFormDialog.tsx
@@ -6,7 +6,15 @@ import { Button } from "@/components/ui/atoms/button";
 import ImageContentData from "@/components/ui/molecules/modals/image-upload/ImageContentData";
 import { uploadImageToS3 } from "@/components/routes/task/api/taskApi";
 import { toast } from "sonner";
-import type { PlanOption, Tag, TagPayload } from "./api/tagsApi";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+import { normalizeLanguageCode } from "@/lib/languageCodes";
+import type { LanguageCode } from "@/schema/SeriesSchema";
+import type {
+  PlanOption,
+  Tag,
+  TagPayload,
+  TagMetadataInput,
+} from "./api/tagsApi";
 
 interface TagFormDialogProps {
   open: boolean;
@@ -17,6 +25,11 @@ interface TagFormDialogProps {
   onSubmit: (payload: TagPayload) => void;
 }
 
+interface LanguageData {
+  name: string;
+  description: string;
+}
+
 const TagFormDialog = ({
   open,
   onOpenChange,
@@ -26,8 +39,19 @@ const TagFormDialog = ({
   onSubmit,
 }: TagFormDialogProps) => {
   const isEdit = !!tag;
-  const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
+  const [activeLanguages, setActiveLanguages] = useState<LanguageCode[]>([
+    "EN",
+  ]);
+  const [languageData, setLanguageData] = useState<
+    Record<LanguageCode, LanguageData>
+  >({
+    EN: { name: "", description: "" },
+    BO: { name: "", description: "" },
+    ZH: { name: "", description: "" },
+    HI: { name: "", description: "" },
+    NE: { name: "", description: "" },
+    MN: { name: "", description: "" },
+  });
   const [imageKey, setImageKey] = useState<string | null>(null);
   const [imagePreview, setImagePreview] = useState<string | null>(null);
   const [selectedPlanIds, setSelectedPlanIds] = useState<string[]>([]);
@@ -37,14 +61,75 @@ const TagFormDialog = ({
 
   useEffect(() => {
     if (!open) return;
-    setName(tag?.name ?? "");
-    setDescription(tag?.description ?? "");
+
+    if (tag?.metadata && tag.metadata.length > 0) {
+      const langs: LanguageCode[] = [];
+      const data: Record<LanguageCode, LanguageData> = {
+        EN: { name: "", description: "" },
+        BO: { name: "", description: "" },
+        ZH: { name: "", description: "" },
+        HI: { name: "", description: "" },
+        NE: { name: "", description: "" },
+        MN: { name: "", description: "" },
+      };
+
+      tag.metadata.forEach((meta) => {
+        const lang = normalizeLanguageCode(String(meta.language ?? ""));
+        if (!lang) return;
+        langs.push(lang);
+        data[lang] = {
+          name: meta.name,
+          description: meta.description || "",
+        };
+      });
+
+      setActiveLanguages(langs.length > 0 ? langs : ["EN"]);
+      setLanguageData(data);
+    } else {
+      setActiveLanguages(["EN"]);
+      setLanguageData({
+        EN: { name: "", description: "" },
+        BO: { name: "", description: "" },
+        ZH: { name: "", description: "" },
+        HI: { name: "", description: "" },
+        NE: { name: "", description: "" },
+        MN: { name: "", description: "" },
+      });
+    }
+
     setImageKey(tag?.image_key ?? null);
     setImagePreview(tag?.image ?? null);
     setSelectedPlanIds(tag?.plan_ids ?? []);
     setPlanSearch("");
   }, [open, tag]);
 
+  const availableLanguages = PLAN_LANGUAGE.filter(
+    (lang) => !activeLanguages.includes(lang.value as LanguageCode),
+  );
+
+  const addLanguage = (langCode: LanguageCode) => {
+    setActiveLanguages([...activeLanguages, langCode]);
+  };
+
+  const removeLanguage = (langCode: LanguageCode) => {
+    if (activeLanguages.length === 1) {
+      toast.error("At least one language is required");
+      return;
+    }
+    setActiveLanguages(activeLanguages.filter((l) => l !== langCode));
+  };
+
+  const updateLanguageField = (
+    lang: LanguageCode,
+    field: keyof LanguageData,
+    value: string,
+  ) => {
+    setLanguageData((prev) => ({
+      ...prev,
+      [lang]: { ...prev[lang], [field]: value },
+    }));
+  };
+
   const filteredPlans = plans.filter((plan) =>
     plan.title.toLowerCase().includes(planSearch.toLowerCase()),
   );
@@ -85,15 +170,26 @@ const TagFormDialog = ({
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    const trimmedName = name.trim();
-    if (!trimmedName) {
-      toast.error("Tag name is required");
-      return;
+
+    const metadata: TagMetadataInput[] = [];
+    for (const lang of activeLanguages) {
+      const data = languageData[lang];
+      if (!data.name.trim()) {
+        toast.error(
+          `Name is required for ${PLAN_LANGUAGE.find((l) => l.value === lang)?.label}`,
+        );
+        return;
+      }
+      metadata.push({
+        language: lang,
+        name: data.name.trim(),
+        description: data.description.trim() || null,
+      });
     }
+
     onSubmit({
-      name: trimmedName,
+      metadata,
       image_key: imageKey,
-      description: description.trim() || null,
       plan_ids: selectedPlanIds,
     });
   };
@@ -112,24 +208,89 @@ const TagFormDialog = ({
             className="flex min-h-0 flex-1 flex-col overflow-hidden"
           >
             <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-6 py-4">
-              <div className="space-y-2">
-                <label className="text-sm font-bold">Name</label>
-                <Pecha.Input
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  placeholder="Tag name"
-                  required
-                />
-              </div>
-
-              <div className="space-y-2">
-                <label className="text-sm font-bold">Description</label>
-                <Textarea
-                  value={description}
-                  onChange={(e) => setDescription(e.target.value)}
-                  placeholder="Optional description"
-                  className="field-sizing-fixed min-h-[80px] max-h-32 resize-none"
-                />
+              {/* Language Sections */}
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <label className="text-sm font-bold">Languages</label>
+                  {availableLanguages.length > 0 && (
+                    <Pecha.DropdownMenu>
+                      <Pecha.DropdownMenuTrigger asChild>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          className="h-7 text-xs"
+                        >
+                          <IoMdAdd className="h-3 w-3 mr-1" />
+                          Add Language
+                        </Button>
+                      </Pecha.DropdownMenuTrigger>
+                      <Pecha.DropdownMenuContent>
+                        {availableLanguages.map((lang) => (
+                          <Pecha.DropdownMenuItem
+                            key={lang.value}
+                            onClick={() =>
+                              addLanguage(lang.value as LanguageCode)
+                            }
+                          >
+                            {lang.label}
+                          </Pecha.DropdownMenuItem>
+                        ))}
+                      </Pecha.DropdownMenuContent>
+                    </Pecha.DropdownMenu>
+                  )}
+                </div>
+                {activeLanguages.map((lang) => {
+                  const langLabel =
+                    PLAN_LANGUAGE.find((l) => l.value === lang)?.label || lang;
+                  return (
+                    <div
+                      key={lang}
+                      className="relative rounded-lg border border-input bg-[#FAFAFA] dark:bg-[#262626] p-4 space-y-3"
+                    >
+                      {activeLanguages.length > 1 && (
+                        <button
+                          type="button"
+                          onClick={() => removeLanguage(lang)}
+                          className="absolute top-2 right-2 text-muted-foreground hover:text-foreground p-1 rounded"
+                          aria-label={`Remove ${langLabel}`}
+                        >
+                          <IoMdClose className="h-4 w-4" />
+                        </button>
+                      )}
+                      <div className="text-sm font-semibold text-muted-foreground mb-2">
+                        {langLabel}
+                      </div>
+                      <div className="space-y-2">
+                        <label className="text-sm font-bold">Name</label>
+                        <Pecha.Input
+                          value={languageData[lang].name}
+                          onChange={(e) =>
+                            updateLanguageField(lang, "name", e.target.value)
+                          }
+                          placeholder="Tag name"
+                          required
+                          className="bg-white dark:bg-[#181818]"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <label className="text-sm font-bold">Description</label>
+                        <Textarea
+                          value={languageData[lang].description}
+                          onChange={(e) =>
+                            updateLanguageField(
+                              lang,
+                              "description",
+                              e.target.value,
+                            )
+                          }
+                          placeholder="Optional description"
+                          className="field-sizing-fixed min-h-[80px] max-h-32 resize-none bg-white dark:bg-[#181818]"
+                        />
+                      </div>
+                    </div>
+                  );
+                })}
               </div>
 
               <div className="space-y-2">
diff --git a/src/components/routes/tags/Tags.tsx b/src/components/routes/tags/Tags.tsx
index 255955a7..80be3fbd 100644
--- a/src/components/routes/tags/Tags.tsx
+++ b/src/components/routes/tags/Tags.tsx
@@ -7,6 +7,7 @@ import { Pecha } from "@/components/ui/shadimport";
 import { Button } from "@/components/ui/atoms/button";
 import AuthButton from "@/components/ui/molecules/auth-button/AuthButton";
 import { Pagination } from "@/components/ui/molecules/pagination/Pagination";
+import { getApiErrorMessage } from "@/lib/apiErrors";
 import {
   createTag,
   deleteTag,
@@ -16,28 +17,16 @@ import {
   type Tag,
   type TagPayload,
 } from "./api/tagsApi";
+import { useUserInfo } from "@/hooks/useUserInfo";
+import { shouldShowCmsActionsColumn } from "@/lib/platformAccess";
 import TagFormDialog from "./TagFormDialog";
 import TagsTable from "./TagsTable";
 
 const PAGE_SIZE = 10;
 
-const getErrorMessage = (error: unknown): string => {
-  const err = error as { response?: { data?: { detail?: unknown } } };
-  const detail = err?.response?.data?.detail;
-  if (typeof detail === "string") return detail;
-  if (Array.isArray(detail) && detail[0]?.msg) return detail[0].msg;
-  if (
-    detail &&
-    typeof detail === "object" &&
-    "message" in detail &&
-    typeof (detail as { message: string }).message === "string"
-  ) {
-    return (detail as { message: string }).message;
-  }
-  return "Something went wrong";
-};
-
 const Tags = () => {
+  const { data: userInfo } = useUserInfo();
+  const showActionsColumn = shouldShowCmsActionsColumn(userInfo?.platform_role);
   const [search, setSearch] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
   const [debouncedSearch] = useDebounce(search, 500);
@@ -75,7 +64,7 @@ const Tags = () => {
       setFormOpen(false);
       invalidateTags();
     },
-    onError: (err) => toast.error(getErrorMessage(err)),
+    onError: (err) => toast.error(getApiErrorMessage(err)),
   });
 
   const updateMutation = useMutation({
@@ -87,7 +76,7 @@ const Tags = () => {
       setEditingTag(null);
       invalidateTags();
     },
-    onError: (err) => toast.error(getErrorMessage(err)),
+    onError: (err) => toast.error(getApiErrorMessage(err)),
   });
 
   const deleteMutation = useMutation({
@@ -97,7 +86,7 @@ const Tags = () => {
       setDeleteTarget(null);
       invalidateTags();
     },
-    onError: (err) => toast.error(getErrorMessage(err)),
+    onError: (err) => toast.error(getApiErrorMessage(err)),
   });
 
   const handleOpenCreate = () => {
@@ -137,13 +126,15 @@ const Tags = () => {
               }}
             />
           </div>
-          <Button
-            variant="outline"
-            className="bg-gray-100 hover:bg-gray-200"
-            onClick={handleOpenCreate}
-          >
-            <IoMdAdd /> Add Tag
-          </Button>
+          {showActionsColumn ? (
+            <Button
+              variant="outline"
+              className="bg-gray-100 hover:bg-gray-200"
+              onClick={handleOpenCreate}
+            >
+              <IoMdAdd /> Add Tag
+            </Button>
+          ) : null}
         </div>
         <AuthButton />
       </div>
@@ -153,23 +144,26 @@ const Tags = () => {
       <div className="px-4 pt-4 h-full flex flex-col items-center justify-between flex-1 min-h-0">
         {error ? (
           <p className="text-sm text-red-500 py-8">
-            Failed to load tags. {getErrorMessage(error)}
+            Failed to load tags. {getApiErrorMessage(error)}
           </p>
         ) : tagsData?.tags.length === 0 && !isLoading ? (
           <div className="flex flex-col h-full items-center justify-center">
             <p className="text-base text-muted-foreground">No tags found</p>
-            <Button
-              variant="outline"
-              className="mt-2"
-              onClick={handleOpenCreate}
-            >
-              <IoMdAdd /> Add Tag
-            </Button>
+            {showActionsColumn ? (
+              <Button
+                variant="outline"
+                className="mt-2"
+                onClick={handleOpenCreate}
+              >
+                <IoMdAdd /> Add Tag
+              </Button>
+            ) : null}
           </div>
         ) : (
           <TagsTable
             tags={tagsData?.tags ?? []}
             isLoading={isLoading}
+            showActionsColumn={showActionsColumn}
             onEdit={handleOpenEdit}
             onDelete={setDeleteTarget}
           />
diff --git a/src/components/routes/tags/TagsTable.tsx b/src/components/routes/tags/TagsTable.tsx
index 2c0b8f9b..fb321c81 100644
--- a/src/components/routes/tags/TagsTable.tsx
+++ b/src/components/routes/tags/TagsTable.tsx
@@ -6,11 +6,18 @@ import type { Tag } from "./api/tagsApi";
 interface TagsTableProps {
   tags: Tag[];
   isLoading?: boolean;
+  showActionsColumn?: boolean;
   onEdit: (tag: Tag) => void;
   onDelete: (tag: Tag) => void;
 }
 
-const TagsTable = ({ tags, isLoading, onEdit, onDelete }: TagsTableProps) => {
+const TagsTable = ({
+  tags,
+  isLoading,
+  showActionsColumn = true,
+  onEdit,
+  onDelete,
+}: TagsTableProps) => {
   if (isLoading) {
     return (
       <p className="text-sm text-muted-foreground py-8 text-center">
@@ -26,11 +33,12 @@ const TagsTable = ({ tags, isLoading, onEdit, onDelete }: TagsTableProps) => {
           <Pecha.TableRow>
             <Pecha.TableHead className="w-20">Image</Pecha.TableHead>
             <Pecha.TableHead>Name</Pecha.TableHead>
-            <Pecha.TableHead>Description</Pecha.TableHead>
             <Pecha.TableHead className="w-24">Plans</Pecha.TableHead>
-            <Pecha.TableHead className="w-28 text-right">
-              Actions
-            </Pecha.TableHead>
+            {showActionsColumn ? (
+              <Pecha.TableHead className="w-28 text-right">
+                Actions
+              </Pecha.TableHead>
+            ) : null}
           </Pecha.TableRow>
         </Pecha.TableHeader>
         <Pecha.TableBody>
@@ -43,33 +51,47 @@ const TagsTable = ({ tags, isLoading, onEdit, onDelete }: TagsTableProps) => {
                   className="w-12 h-12 object-cover rounded-md border"
                 />
               </Pecha.TableCell>
-              <Pecha.TableCell className="font-medium">
-                {tag.name}
-              </Pecha.TableCell>
-              <Pecha.TableCell className="text-muted-foreground max-w-xs truncate">
-                {tag.description || "—"}
-              </Pecha.TableCell>
-              <Pecha.TableCell>{tag.plan_ids.length}</Pecha.TableCell>
               <Pecha.TableCell>
-                <div className="flex justify-end gap-2">
-                  <button
-                    type="button"
-                    onClick={() => onEdit(tag)}
-                    className="p-2 rounded-md border hover:bg-muted/50 transition-colors"
-                    aria-label={`Edit ${tag.name}`}
-                  >
-                    <IoMdCreate className="w-4 h-4" />
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => onDelete(tag)}
-                    className="p-2 rounded-md border text-red-600 hover:bg-red-50 dark:hover:bg-red-950/30 transition-colors"
-                    aria-label={`Delete ${tag.name}`}
-                  >
-                    <IoMdTrash className="w-4 h-4" />
-                  </button>
+                <div className="flex flex-col gap-1">
+                  <span className="font-medium">{tag.name}</span>
+                  {tag.metadata && tag.metadata.length > 0 && (
+                    <div className="flex gap-1">
+                      {tag.metadata.map((meta) => (
+                        <span
+                          key={meta.id}
+                          className="text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
+                        >
+                          {meta.language}
+                        </span>
+                      ))}
+                    </div>
+                  )}
                 </div>
               </Pecha.TableCell>
+
+              <Pecha.TableCell>{tag.plan_ids.length}</Pecha.TableCell>
+              {showActionsColumn ? (
+                <Pecha.TableCell>
+                  <div className="flex justify-end gap-2">
+                    <button
+                      type="button"
+                      onClick={() => onEdit(tag)}
+                      className="p-2 rounded-md border hover:bg-muted/50 transition-colors"
+                      aria-label={`Edit ${tag.name}`}
+                    >
+                      <IoMdCreate className="w-4 h-4" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => onDelete(tag)}
+                      className="p-2 rounded-md border text-red-600 hover:bg-red-50 dark:hover:bg-red-950/30 transition-colors"
+                      aria-label={`Delete ${tag.name}`}
+                    >
+                      <IoMdTrash className="w-4 h-4" />
+                    </button>
+                  </div>
+                </Pecha.TableCell>
+              ) : null}
             </Pecha.TableRow>
           ))}
         </Pecha.TableBody>
diff --git a/src/components/routes/tags/api/tagsApi.ts b/src/components/routes/tags/api/tagsApi.ts
index 3eb39a5d..66502f2a 100644
--- a/src/components/routes/tags/api/tagsApi.ts
+++ b/src/components/routes/tags/api/tagsApi.ts
@@ -1,4 +1,18 @@
 import axiosInstance from "@/config/axios-config";
+import type { LanguageCode } from "@/schema/SeriesSchema";
+
+export interface TagMetadataDTO {
+  id: string;
+  language: string;
+  name: string;
+  description: string | null;
+}
+
+export interface TagMetadataInput {
+  language: LanguageCode;
+  name: string;
+  description?: string | null;
+}
 
 export interface Tag {
   id: string;
@@ -7,6 +21,7 @@ export interface Tag {
   image_key: string | null;
   description: string | null;
   plan_ids: string[];
+  metadata: TagMetadataDTO[];
 }
 
 /** Tag shape embedded on plan list/detail API responses */
@@ -27,10 +42,12 @@ export interface TagsListResponse {
 }
 
 export interface TagPayload {
-  name: string;
+  metadata: TagMetadataInput[];
   image_key?: string | null;
-  description?: string | null;
+  featured?: boolean;
+  display_order?: number | null;
   plan_ids: string[];
+  segment_ids?: string[];
 }
 
 export interface PlanOption {
diff --git a/src/components/routes/task/PlanDetailsPage.test.tsx b/src/components/routes/task/PlanDetailsPage.test.tsx
index 50dc48bf..dd089ca7 100644
--- a/src/components/routes/task/PlanDetailsPage.test.tsx
+++ b/src/components/routes/task/PlanDetailsPage.test.tsx
@@ -77,6 +77,10 @@ vi.mock("react-router-dom", async () => {
   return {
     ...actual,
     useParams: vi.fn().mockReturnValue({ planId: "test-plan-id" }),
+    useSearchParams: vi.fn().mockReturnValue([
+      new URLSearchParams(), // searchParams
+      vi.fn(), // setSearchParams
+    ]),
   };
 });
 
@@ -84,6 +88,22 @@ vi.mock("sonner", () => ({
   toast: { error: vi.fn(), success: vi.fn() },
 }));
 
+vi.mock("react-split-pane", () => ({
+  SplitPane: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="split-pane">{children}</div>
+  ),
+  Pane: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="pane">{children}</div>
+  ),
+}));
+
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
 Object.defineProperty(window, "sessionStorage", {
   value: {
     getItem: vi.fn((key) => {
@@ -119,7 +139,16 @@ describe("PlanDetailsPanel Component", () => {
     vi.clearAllMocks();
     const { default: axiosInstance } = await import("@/config/axios-config");
     const mockAxios = axiosInstance as any;
-    mockAxios.get.mockResolvedValue({ data: mockPlanData });
+    mockAxios.get.mockImplementation((url: string) => {
+      if (String(url).includes("/groups/")) {
+        return Promise.resolve({
+          data: { id: "g1", members: [], metadata: [], slug: "g" },
+        });
+      }
+      return Promise.resolve({
+        data: { ...mockPlanData, status: "DRAFT", group_id: "g1" },
+      });
+    });
     mockAxios.post.mockResolvedValue({
       data: { id: "new-day-id", day_number: 5, tasks: [] },
     });
@@ -161,11 +190,14 @@ describe("PlanDetailsPanel Component", () => {
     await waitFor(() => {
       expect(screen.getByText("Day 4")).toBeInTheDocument();
     });
+    // "Add New Day" now opens a dialog; submitting it triggers the request.
     fireEvent.click(screen.getByText("Add New Day"));
+    const submitButton = await screen.findByText("Add 1 Day");
+    fireEvent.click(submitButton);
     await waitFor(() => {
       expect(mockAxios.post).toHaveBeenCalledWith(
         expect.stringContaining("/api/v1/cms/plans/test-plan-id/days"),
-        {},
+        expect.objectContaining({ number_of_days: 1 }),
         expect.objectContaining({
           headers: expect.objectContaining({
             Authorization: "Bearer mock-token",
@@ -188,8 +220,10 @@ describe("PlanDetailsPanel Component", () => {
       expect(screen.getByText("Day 4")).toBeInTheDocument();
     });
     fireEvent.click(screen.getByText("Add New Day"));
+    const submitButton = await screen.findByText("Add 1 Day");
+    fireEvent.click(submitButton);
     await waitFor(() => {
-      expect(toast.error).toHaveBeenCalledWith("Failed to create new day", {
+      expect(toast.error).toHaveBeenCalledWith("Failed to create days", {
         description: "Cannot create day",
       });
     });
@@ -200,7 +234,7 @@ describe("PlanDetailsPanel Component", () => {
     await waitFor(() => {
       expect(screen.getByText(mockPlanData.title)).toBeInTheDocument();
     });
-    expect(screen.getByText("Add Task")).toBeInTheDocument();
+    expect(screen.getAllByText("Add Task").length).toBeGreaterThan(0);
     expect(screen.getByPlaceholderText("Task Title")).toBeInTheDocument();
   });
 
@@ -225,10 +259,10 @@ describe("PlanDetailsPanel Component", () => {
     await waitFor(() => {
       expect(screen.getByText(mockPlanData.title)).toBeInTheDocument();
     });
-    expect(screen.getByText("Add Task")).toBeInTheDocument();
+    expect(screen.getAllByText("Add Task").length).toBeGreaterThan(0);
     fireEvent.click(screen.getByText("Morning Intention Setting"));
     await waitFor(() => {
-      expect(screen.queryByText("Add Task")).not.toBeInTheDocument();
+      expect(screen.queryAllByText("Add Task")).toHaveLength(0);
     });
     await waitFor(() => {
       expect(screen.getByText("Task")).toBeInTheDocument();
@@ -312,7 +346,7 @@ describe("PlanDetailsPanel Component", () => {
     await user.click(deleteTaskBtn);
 
     await waitFor(() => {
-      expect(screen.getByText("Add Task")).toBeInTheDocument();
+      expect(screen.getAllByText("Add Task").length).toBeGreaterThan(0);
     });
   });
 
@@ -369,7 +403,7 @@ describe("PlanDetailsPanel Component", () => {
     await user.click(deleteTaskBtn);
 
     await waitFor(() => {
-      expect(screen.getByText("Add Task")).toBeInTheDocument();
+      expect(screen.getAllByText("Add Task").length).toBeGreaterThan(0);
     });
   });
 });
diff --git a/src/components/routes/task/PlanDetailsPage.tsx b/src/components/routes/task/PlanDetailsPage.tsx
index 0eedb9d7..fdb87fc5 100644
--- a/src/components/routes/task/PlanDetailsPage.tsx
+++ b/src/components/routes/task/PlanDetailsPage.tsx
@@ -1,29 +1,137 @@
-import { useState } from "react";
-import { useParams } from "react-router-dom";
+import { useState, useEffect, useMemo, useCallback } from "react";
+
+import { useParams, useNavigate, useSearchParams } from "react-router-dom";
+
 import { useQuery } from "@tanstack/react-query";
+
+import { SplitPane, Pane } from "react-split-pane";
+
 import TaskForm from "./components/view/TaskForm";
+
 import SideBar from "./components/sidebar-component/SideBar";
+
 import TaskView from "./components/view/TaskView";
+
+import MobileView from "./components/MobileView";
+
+import MobilePreviewSplitDivider from "./components/MobilePreviewSplitDivider";
+
 import { fetchPlanDetails } from "./api/planApi";
+import { useUserInfo } from "@/hooks/useUserInfo";
+import { fetchGroup } from "@/components/routes/groups/api/groupsApi";
+import { getCurrentUserGroupRole } from "@/components/routes/groups/lib/groupPermissions";
+import { canEditContent } from "@/lib/contentPermissions";
 
 const PlanDetailsPage = () => {
-  const [selectedDay, setSelectedDay] = useState<number>(1);
+  const [searchParams, setSearchParams] = useSearchParams();
+
   const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
+
   const [editingTask, setEditingTask] = useState<any>(null);
+
+  const [showMobilePreview, setShowMobilePreview] = useState<boolean>(true);
+
   const { planId } = useParams<{ planId: string }>();
 
+  const navigate = useNavigate();
+
+  // Get selected day from URL params, default to day 1
+
+  const selectedDay = useMemo(() => {
+    const dayParam = searchParams.get("day");
+
+    return dayParam ? Number.parseInt(dayParam, 10) : 1;
+  }, [searchParams]);
+
+  // Function to update search params
+
+  const updateSearchParams = useCallback(
+    (day: number) => {
+      const newParams = new URLSearchParams(searchParams);
+
+      if (day === 1) {
+        // Remove day param if it's the default (day 1)
+
+        newParams.delete("day");
+      } else {
+        newParams.set("day", day.toString());
+      }
+
+      setSearchParams(newParams, { replace: true });
+    },
+
+    [searchParams, setSearchParams],
+  );
+
+  // Use the specific plan ID from the URL or redirect if not provided
+
+  useEffect(() => {
+    if (!planId) {
+      // If no planId in URL but we want to use the specific one from the WeBuddhist plan viewer
+
+      const targetPlanId = "24e15ca6-ae54-4b5c-a12d-11355730158e";
+
+      navigate(`/plans/${targetPlanId}`, { replace: true });
+    }
+  }, [planId, navigate]);
+
+  // Clear selected task and editing task when day changes
+
+  useEffect(() => {
+    setSelectedTaskId(null);
+
+    setEditingTask(null);
+  }, [selectedDay]);
+
+  const { data: userInfo } = useUserInfo();
+
   const { data: planDetails } = useQuery({
     queryKey: ["planDetails", planId],
+
     queryFn: () => fetchPlanDetails(planId!),
+
     enabled: !!planId,
   });
 
-  const status = planDetails?.status || "DRAFT";
-  const isEditable = status === "DRAFT" || status === "ARCHIVED";
+  const groupId = planDetails?.group_id as string | undefined;
+
+  const { data: planGroup } = useQuery({
+    queryKey: ["cms-group", groupId],
+    queryFn: () => fetchGroup(groupId!),
+    enabled: Boolean(groupId),
+    refetchOnWindowFocus: false,
+  });
+
+  const groupRole = planGroup
+    ? getCurrentUserGroupRole(planGroup.members ?? [], userInfo)
+    : undefined;
+
+  const isEditable = canEditContent(
+    groupRole,
+    planDetails?.status ?? "DRAFT",
+    userInfo?.platform_role,
+  );
+  const isPlanPublished = planDetails?.status === "PUBLISHED";
+
+  useEffect(() => {
+    if (!isPlanPublished) {
+      setShowMobilePreview(false);
+    }
+  }, [isPlanPublished]);
+
+  const currentDayData = planDetails?.days?.find(
+    (day: { day_number: number }) => day.day_number === selectedDay,
+  );
+
+  // Get the selected day ID for passing to MobileView
+
+  const selectedDayId = currentDayData?.id;
 
   const handleDaySelect = (dayNumber: number) => {
-    setSelectedDay(dayNumber);
+    updateSearchParams(dayNumber);
+
     setSelectedTaskId(null);
+
     setEditingTask(null);
   };
 
@@ -31,12 +139,15 @@ const PlanDetailsPage = () => {
     if (!isEditable) {
       return;
     }
+
     setEditingTask(task);
+
     setSelectedTaskId(null);
   };
 
   const handleCancelTaskForm = (newlyCreatedTaskId?: string) => {
     setEditingTask(null);
+
     if (newlyCreatedTaskId) {
       setSelectedTaskId(newlyCreatedTaskId);
     }
@@ -46,37 +157,98 @@ const PlanDetailsPage = () => {
     if (selectedTaskId === taskId) {
       setSelectedTaskId(null);
     }
+
     if (editingTask?.id === taskId) {
       setEditingTask(null);
     }
   };
 
-  return (
-    <div className="flex flex-1 overflow-hidden">
-      <SideBar
-        selectedDay={selectedDay}
-        onDaySelect={handleDaySelect}
-        onTaskClick={(taskId) => {
-          setSelectedTaskId(taskId);
-        }}
-        onTaskDelete={handleTaskDelete}
-        isEditable={isEditable}
-      />
-      <div className=" w-full pl-4 rounded-l-2xl overflow-y-auto">
-        {selectedTaskId ? (
-          <TaskView
-            taskId={selectedTaskId}
-            onEditTask={handleEditTask}
-            isEditable={isEditable}
-          />
-        ) : (
-          <TaskForm
-            selectedDay={selectedDay}
-            editingTask={editingTask}
-            onCancel={handleCancelTaskForm}
-            isEditable={isEditable}
+  const toggleMobilePreview = useCallback(() => {
+    setShowMobilePreview((visible) => !visible);
+  }, []);
+
+  const editorContent = selectedTaskId ? (
+    <TaskView
+      taskId={selectedTaskId}
+      onEditTask={handleEditTask}
+      isEditable={isEditable}
+      dayAudioUrl={currentDayData?.audio_url}
+    />
+  ) : (
+    <TaskForm
+      selectedDay={selectedDay}
+      editingTask={editingTask}
+      onCancel={handleCancelTaskForm}
+      isEditable={isEditable}
+    />
+  );
+
+  const renderMainArea = () => {
+    if (isPlanPublished && showMobilePreview) {
+      return (
+        <SplitPane
+          direction="horizontal"
+          className="flex-1 min-h-0"
+          divider={(dividerProps) => (
+            <MobilePreviewSplitDivider
+              {...dividerProps}
+              showPreview={showMobilePreview}
+              onToggle={toggleMobilePreview}
+            />
+          )}
+        >
+          <Pane defaultSize="60%" minSize="300px">
+            <div className="h-full overflow-y-auto rounded-l-2xl pl-4">
+              {editorContent}
+            </div>
+          </Pane>
+
+          <Pane>
+            <div className="h-full">
+              <MobileView />
+            </div>
+          </Pane>
+        </SplitPane>
+      );
+    }
+
+    if (isPlanPublished && !showMobilePreview) {
+      return (
+        <div className="flex min-h-0 min-w-0 flex-1">
+          <div className="min-w-0 flex-1 overflow-y-auto rounded-l-2xl pl-4">
+            {editorContent}
+          </div>
+
+          <MobilePreviewSplitDivider
+            showPreview={showMobilePreview}
+            onToggle={toggleMobilePreview}
           />
-        )}
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex-1 overflow-y-auto rounded-l-2xl pl-4">
+        {editorContent}
+      </div>
+    );
+  };
+
+  return (
+    <div className="relative h-full">
+      <div className="flex h-full">
+        <SideBar
+          selectedDay={selectedDay}
+          selectedDayId={selectedDayId}
+          onDaySelect={handleDaySelect}
+          onTaskClick={(taskId) => {
+            setSelectedTaskId(taskId);
+          }}
+          onTaskDelete={handleTaskDelete}
+          isEditable={isEditable}
+        />
+
+        {renderMainArea()}
       </div>
     </div>
   );
diff --git a/src/components/routes/task/api/notificationApi.ts b/src/components/routes/task/api/notificationApi.ts
new file mode 100644
index 00000000..c158936e
--- /dev/null
+++ b/src/components/routes/task/api/notificationApi.ts
@@ -0,0 +1,76 @@
+import axiosInstance from "@/config/axios-config";
+
+const getAuthHeaders = () => ({
+  Authorization: `Bearer ${sessionStorage.getItem("accessToken")}`,
+});
+
+export interface NotificationResponse {
+  id: string;
+  day_id: string;
+  title: string;
+  body: string;
+  image_type: "PLAN" | "CUSTOM" | null;
+  image_url: string | null;
+  created_at: string;
+  updated_at: string | null;
+}
+
+export interface NotificationPayload {
+  title: string;
+  body: string;
+  image_type: "PLAN" | "CUSTOM" | null;
+  image_url: string | null;
+}
+
+export const getNotification = async (
+  day_id: string,
+): Promise<NotificationResponse | null> => {
+  try {
+    const { data } = await axiosInstance.get<NotificationResponse>(
+      `/api/v1/cms/notifications/${day_id}`,
+      {
+        headers: getAuthHeaders(),
+      },
+    );
+    return data;
+  } catch (error: any) {
+    if (error.response?.status === 404) {
+      return null;
+    }
+    throw error;
+  }
+};
+
+export const createNotification = async (
+  day_id: string,
+  payload: NotificationPayload,
+): Promise<NotificationResponse> => {
+  const { data } = await axiosInstance.post<NotificationResponse>(
+    `/api/v1/cms/notifications/${day_id}`,
+    payload,
+    {
+      headers: getAuthHeaders(),
+    },
+  );
+  return data;
+};
+
+export const updateNotification = async (
+  day_id: string,
+  payload: NotificationPayload,
+): Promise<NotificationResponse> => {
+  const { data } = await axiosInstance.put<NotificationResponse>(
+    `/api/v1/cms/notifications/${day_id}`,
+    payload,
+    {
+      headers: getAuthHeaders(),
+    },
+  );
+  return data;
+};
+
+export const deleteNotification = async (day_id: string): Promise<void> => {
+  await axiosInstance.delete(`/api/v1/cms/notifications/${day_id}`, {
+    headers: getAuthHeaders(),
+  });
+};
diff --git a/src/components/routes/task/api/planApi.ts b/src/components/routes/task/api/planApi.ts
index 82a4397f..489dad3d 100644
--- a/src/components/routes/task/api/planApi.ts
+++ b/src/components/routes/task/api/planApi.ts
@@ -4,6 +4,39 @@ const getAuthHeaders = () => ({
   Authorization: `Bearer ${sessionStorage.getItem("accessToken")}`,
 });
 
+export interface CmsPlanSummary {
+  id: string;
+  title: string;
+  language: string;
+  total_days: number;
+}
+
+export interface CmsPlansResponse {
+  plans: CmsPlanSummary[];
+  skip: number;
+  limit: number;
+  total: number;
+}
+
+export const searchCmsPlans = async (params?: {
+  search?: string;
+  skip?: number;
+  limit?: number;
+}) => {
+  const { data } = await axiosInstance.get<CmsPlansResponse>(
+    `/api/v1/cms/plans`,
+    {
+      params: {
+        search: params?.search?.trim() || undefined,
+        skip: params?.skip ?? 0,
+        limit: params?.limit ?? 10,
+      },
+      headers: getAuthHeaders(),
+    },
+  );
+  return data;
+};
+
 export const fetchPlanDetails = async (plan_id: string) => {
   const { data } = await axiosInstance.get(`/api/v1/cms/plans/${plan_id}`, {
     headers: getAuthHeaders(),
@@ -11,10 +44,9 @@ export const fetchPlanDetails = async (plan_id: string) => {
   return data;
 };
 
-export const createNewDay = async (plan_id: string) => {
-  const { data } = await axiosInstance.post(
+export const fetchPlanDays = async (plan_id: string) => {
+  const { data } = await axiosInstance.get(
     `/api/v1/cms/plans/${plan_id}/days`,
-    {},
     {
       headers: getAuthHeaders(),
     },
@@ -22,9 +54,24 @@ export const createNewDay = async (plan_id: string) => {
   return data;
 };
 
-export const deleteDay = async (plan_id: string, day_id: string) => {
-  const { data } = await axiosInstance.delete(
-    `/api/v1/cms/plans/${plan_id}/days/${day_id}`,
+export interface CreateDaysRequest {
+  number_of_days?: number;
+  source_day_id?: string;
+}
+
+export interface DayDTO {
+  id: string;
+  day_number: number;
+  tasks: Record<string, unknown>[];
+}
+
+export const createNewDays = async (
+  plan_id: string,
+  body?: CreateDaysRequest,
+) => {
+  const { data } = await axiosInstance.post<DayDTO[]>(
+    `/api/v1/cms/plans/${plan_id}/days`,
+    body ?? {},
     {
       headers: getAuthHeaders(),
     },
@@ -32,6 +79,13 @@ export const deleteDay = async (plan_id: string, day_id: string) => {
   return data;
 };
 
+export const deleteDays = async (plan_id: string, day_ids: string[]) => {
+  await axiosInstance.delete(`/api/v1/cms/plans/${plan_id}/days`, {
+    data: { day_ids },
+    headers: getAuthHeaders(),
+  });
+};
+
 export const deleteTask = async (task_id: string) => {
   const { data } = await axiosInstance.delete(`/api/v1/cms/tasks/${task_id}`, {
     headers: getAuthHeaders(),
@@ -54,3 +108,245 @@ export const reorderDays = async (
   );
   return data;
 };
+
+export interface PlanDayAudioUploadResponse {
+  plan_item_id: string;
+  audio_key: string;
+  audio_url: string;
+  duration_ms: number | null;
+  message: string;
+}
+
+export interface PlanAudioDTO {
+  id: string;
+  audio_key: string;
+  file_name: string;
+  audio_url: string;
+  duration_ms: number | null;
+  mime_type: string | null;
+  file_size_bytes: number | null;
+  plan_item_id: string;
+  plan_id: string;
+  day_number: number;
+  created_at: string;
+}
+
+export interface PlanAudioListResponse {
+  audio: PlanAudioDTO[];
+  skip: number;
+  limit: number;
+  total: number;
+}
+
+export const fetchPlanAudioList = async (params?: {
+  search?: string;
+  plan_id?: string;
+  skip?: number;
+  limit?: number;
+}) => {
+  const { data } = await axiosInstance.get<PlanAudioListResponse>(
+    `/api/v1/cms/plans/audio`,
+    {
+      params: {
+        search: params?.search?.trim() || undefined,
+        plan_id: params?.plan_id || undefined,
+        skip: params?.skip ?? 0,
+        limit: params?.limit ?? 10,
+      },
+      headers: getAuthHeaders(),
+    },
+  );
+  return data;
+};
+
+export const uploadDayAudio = async (
+  day_id: string,
+  file: File,
+  duration_ms?: number,
+) => {
+  const formData = new FormData();
+  formData.append("file", file);
+  if (duration_ms != null) {
+    formData.append("duration_ms", String(duration_ms));
+  }
+  const { data } = await axiosInstance.post<PlanDayAudioUploadResponse>(
+    `/api/v1/cms/media/upload/day-audio`,
+    formData,
+    {
+      params: { day_id },
+      headers: getAuthHeaders(),
+    },
+  );
+  return data;
+};
+
+export const attachDayAudio = async (
+  day_id: string,
+  audio_key: string,
+  duration_ms?: number | null,
+) => {
+  const { data } = await axiosInstance.patch<PlanDayAudioUploadResponse>(
+    `/api/v1/cms/plans/days/${day_id}/audio`,
+    {
+      audio_key,
+      ...(duration_ms != null ? { duration_ms } : {}),
+    },
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const deleteDayAudio = async (day_id: string) => {
+  await axiosInstance.delete(`/api/v1/cms/plans/days/${day_id}/audio`, {
+    headers: getAuthHeaders(),
+  });
+};
+
+export type DayShareableImageType = "thumbnail" | "shareable_image";
+
+export interface PlanDayShareableImageUploadResponse {
+  plan_item_id: string;
+  image_type: DayShareableImageType;
+  image_key: string;
+  image_url: string;
+  message: string;
+}
+
+export const uploadDayShareableImage = async (
+  day_id: string,
+  image_type: DayShareableImageType,
+  file: File,
+) => {
+  const formData = new FormData();
+  formData.append("file", file);
+  const { data } =
+    await axiosInstance.post<PlanDayShareableImageUploadResponse>(
+      `/api/v1/cms/media/upload/day-shareable-image`,
+      formData,
+      {
+        params: { day_id, image_type },
+        headers: getAuthHeaders(),
+      },
+    );
+  return data;
+};
+
+export const deleteDayShareableImage = async (
+  day_id: string,
+  image_type: DayShareableImageType,
+) => {
+  await axiosInstance.delete(
+    `/api/v1/cms/plans/days/${day_id}/shareable-images/${image_type}`,
+    { headers: getAuthHeaders() },
+  );
+};
+
+export interface DayVideo {
+  id: string;
+  day_id: string;
+  url: string;
+  video_id: string | null;
+  title: string | null;
+  display_order: number;
+  created_at: string;
+}
+
+export type DayVideoSummary = Pick<
+  DayVideo,
+  "id" | "url" | "video_id" | "title" | "display_order"
+>;
+
+export interface AddDayVideoPayload {
+  url: string;
+  title?: string | null;
+}
+
+export const addDayVideo = async (
+  day_id: string,
+  payload: AddDayVideoPayload,
+) => {
+  const { data } = await axiosInstance.post<DayVideo>(
+    `/api/v1/cms/plans/days/${day_id}/videos`,
+    payload,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const deleteDayVideo = async (day_id: string, video_id: string) => {
+  await axiosInstance.delete(
+    `/api/v1/cms/plans/days/${day_id}/videos/${video_id}`,
+    { headers: getAuthHeaders() },
+  );
+};
+
+export const reorderDayVideos = async (
+  day_id: string,
+  videos: Array<{ id: string; display_order: number }>,
+) => {
+  const { data } = await axiosInstance.put<{ videos: DayVideo[] }>(
+    `/api/v1/cms/plans/days/${day_id}/videos/order`,
+    { videos },
+    { headers: getAuthHeaders() },
+  );
+  return data.videos;
+};
+
+export interface PlanVideoDTO {
+  id: string;
+  plan_id: string;
+  url: string;
+  video_id: string | null;
+  title: string | null;
+  display_order: number;
+  created_at: string | null;
+}
+
+export type PlanVideoSummary = Pick<
+  PlanVideoDTO,
+  "id" | "url" | "video_id" | "title" | "display_order"
+>;
+
+export interface AddPlanVideoPayload {
+  url: string;
+  title?: string | null;
+}
+
+export const fetchPlanVideos = async (plan_id: string) => {
+  const { data } = await axiosInstance.get<{ videos: PlanVideoDTO[] }>(
+    `/api/v1/cms/plans/${plan_id}/videos`,
+    { headers: getAuthHeaders() },
+  );
+  return data.videos;
+};
+
+export const addPlanVideo = async (
+  plan_id: string,
+  payload: AddPlanVideoPayload,
+) => {
+  const { data } = await axiosInstance.post<PlanVideoDTO>(
+    `/api/v1/cms/plans/${plan_id}/videos`,
+    payload,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const deletePlanVideo = async (plan_id: string, video_id: string) => {
+  await axiosInstance.delete(
+    `/api/v1/cms/plans/${plan_id}/videos/${video_id}`,
+    { headers: getAuthHeaders() },
+  );
+};
+
+export const reorderPlanVideos = async (
+  plan_id: string,
+  videos: Array<{ id: string; display_order: number }>,
+) => {
+  const { data } = await axiosInstance.put<{ videos: PlanVideoDTO[] }>(
+    `/api/v1/cms/plans/${plan_id}/videos/order`,
+    { videos },
+    { headers: getAuthHeaders() },
+  );
+  return data.videos;
+};
diff --git a/src/components/routes/task/api/presetApi.ts b/src/components/routes/task/api/presetApi.ts
new file mode 100644
index 00000000..0b6e4bf4
--- /dev/null
+++ b/src/components/routes/task/api/presetApi.ts
@@ -0,0 +1,60 @@
+import axiosInstance from "@/config/axios-config";
+
+const getAuthHeaders = () => ({
+  Authorization: `Bearer ${sessionStorage.getItem("accessToken")}`,
+});
+
+export interface PresetRequest {
+  version_id: string;
+  language: string;
+}
+
+export interface PresetResponse {
+  id: string;
+  subtask_id: string;
+  version_id: string;
+  language: string;
+  created_at: string;
+  created_by: string;
+  updated_at?: string;
+  updated_by?: string;
+}
+
+export const createOrUpdatePreset = async (
+  subtaskId: string,
+  preset: PresetRequest,
+): Promise<PresetResponse> => {
+  const { data } = await axiosInstance.post(
+    `/api/v1/cms/sub-tasks/${subtaskId}/preset`,
+    preset,
+    {
+      headers: getAuthHeaders(),
+    },
+  );
+  return data;
+};
+
+export const getPreset = async (
+  subtaskId: string,
+): Promise<PresetResponse | null> => {
+  try {
+    const { data } = await axiosInstance.get(
+      `/api/v1/cms/sub-tasks/${subtaskId}/preset`,
+      {
+        headers: getAuthHeaders(),
+      },
+    );
+    return data;
+  } catch (error: any) {
+    if (error.response?.status === 404) {
+      return null;
+    }
+    throw error;
+  }
+};
+
+export const deletePreset = async (subtaskId: string): Promise<void> => {
+  await axiosInstance.delete(`/api/v1/cms/sub-tasks/${subtaskId}/preset`, {
+    headers: getAuthHeaders(),
+  });
+};
diff --git a/src/components/routes/task/api/taskApi.ts b/src/components/routes/task/api/taskApi.ts
index c4f5ce69..65a005a4 100644
--- a/src/components/routes/task/api/taskApi.ts
+++ b/src/components/routes/task/api/taskApi.ts
@@ -1,4 +1,9 @@
+import axios from "axios";
 import axiosInstance from "@/config/axios-config";
+import {
+  DEFAULT_MONLAM_VOICE,
+  planLanguageToTtsApiLanguage,
+} from "@/lib/ttsConstants";
 
 const getAuthHeaders = () => ({
   Authorization: `Bearer ${sessionStorage.getItem("accessToken")}`,
@@ -37,17 +42,22 @@ export const uploadImageToS3 = async (file: File, plan_id: string) => {
   return data;
 };
 
+export interface SubTaskPayload {
+  content: string | null;
+  content_type: string;
+  display_order: number;
+  duration?: string;
+  source_text_id?: string | null;
+  pecha_segment_id?: string | null;
+  segment_ids?: string[] | null;
+  segment_numbers?: number[] | null;
+  start_ms?: number | null;
+  end_ms?: number | null;
+}
+
 export const createSubTasks = async (
   task_id: string,
-  subTasksData: {
-    content: string | null;
-    content_type: string;
-    display_order: number;
-    duration?: string;
-    source_text_id?: string | null;
-    pecha_segment_id?: string | null;
-    segment_ids?: string[] | null;
-  }[],
+  subTasksData: SubTaskPayload[],
 ) => {
   const { data } = await axiosInstance.post(
     `/api/v1/cms/sub-tasks`,
@@ -62,18 +72,13 @@ export const createSubTasks = async (
   return data;
 };
 
+export interface SubTaskUpdatePayload extends SubTaskPayload {
+  id: string | null;
+}
+
 export const updateSubTasks = async (
   task_id: string,
-  subTasksData: {
-    id: string | null;
-    content: string | null;
-    content_type: string;
-    display_order: number;
-    duration?: string;
-    source_text_id?: string | null;
-    pecha_segment_id?: string | null;
-    segment_ids?: string[] | null;
-  }[],
+  subTasksData: SubTaskUpdatePayload[],
 ) => {
   await axiosInstance.put(
     `/api/v1/cms/sub-tasks`,
@@ -134,6 +139,232 @@ export const reorderTasks = async (
   return data;
 };
 
+export interface GenerateDayAudioOptions {
+  language: string;
+  type?: string;
+  voice_name?: string;
+}
+
+export type AudioJobStatus = "pending" | "processing" | "completed" | "failed";
+
+export interface AudioJobAcceptedResponse {
+  job_id: string;
+  status: AudioJobStatus;
+}
+
+export interface AudioJobStatusResponse {
+  job_id: string;
+  status: AudioJobStatus;
+  day_id?: string | null;
+  sub_task_id?: string | null;
+  language: string;
+  type: string;
+  voice_name: string;
+  audio_url?: string | null;
+  audio_duration_ms?: number | null;
+  s3_key?: string | null;
+  error_message?: string | null;
+  created_at: string;
+  updated_at: string;
+  started_at?: string | null;
+  completed_at?: string | null;
+}
+
+export interface SubTaskAudioUploadResponse {
+  sub_task_id: string;
+  task_id: string;
+  audio_key: string;
+  audio_url: string;
+  duration_ms: number | null;
+  message: string;
+}
+
+export const uploadSubTaskAudio = async (
+  sub_task_id: string,
+  file: File,
+  duration_ms?: number,
+) => {
+  const formData = new FormData();
+  formData.append("file", file);
+  if (duration_ms != null) {
+    formData.append("duration_ms", String(duration_ms));
+  }
+  const { data } = await axiosInstance.post<SubTaskAudioUploadResponse>(
+    `/api/v1/cms/media/upload/subtask-audio`,
+    formData,
+    {
+      params: { sub_task_id },
+      headers: getAuthHeaders(),
+    },
+  );
+  return data;
+};
+
+export const deleteSubTaskAudio = async (sub_task_id: string) => {
+  await axiosInstance.delete(`/api/v1/cms/sub-tasks/${sub_task_id}/audio`, {
+    headers: getAuthHeaders(),
+  });
+};
+
+export const deleteSubTaskTimestamp = async (sub_task_id: string) => {
+  await axiosInstance.delete(`/api/v1/cms/sub-tasks/${sub_task_id}/timestamp`, {
+    headers: getAuthHeaders(),
+  });
+};
+
+export const generateDayAudio = async (
+  params: { day_id: string } | { sub_task_id: string },
+  options: GenerateDayAudioOptions,
+): Promise<AudioJobAcceptedResponse> => {
+  const language = planLanguageToTtsApiLanguage(options.language);
+  const body: Record<string, string> = { ...params, language };
+
+  if (language !== "bo" && options.type) {
+    body.type = options.type;
+  }
+  if (language === "bo") {
+    body.voice_name = options.voice_name ?? DEFAULT_MONLAM_VOICE;
+  }
+
+  const { data } = await axiosInstance.post<AudioJobAcceptedResponse>(
+    `/api/v1/cms/plans/audio/generate`,
+    body,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+const AUDIO_JOB_POLL_INTERVAL_MS = 2500;
+const AUDIO_JOB_POLL_TIMEOUT_MS = 15 * 60 * 1000;
+const AUDIO_JOB_STATUS_REQUEST_TIMEOUT_MS = 30_000;
+
+export const fetchAudioJobStatus = async (
+  jobId: string,
+  options?: { signal?: AbortSignal },
+): Promise<AudioJobStatusResponse> => {
+  const { data } = await axiosInstance.get<AudioJobStatusResponse>(
+    `/api/v1/cms/plans/audio/jobs/${jobId}`,
+    {
+      headers: getAuthHeaders(),
+      signal: options?.signal,
+      timeout: AUDIO_JOB_STATUS_REQUEST_TIMEOUT_MS,
+    },
+  );
+  return data;
+};
+
+const abortError = () =>
+  new DOMException("Audio job polling aborted", "AbortError");
+
+const pollTimeoutError = () =>
+  new Error("Audio generation is taking longer than expected");
+
+const isAbortError = (error: unknown): boolean => {
+  if (!error || typeof error !== "object") {
+    return false;
+  }
+  const err = error as { name?: string; code?: string };
+  if (err.name === "AbortError" || err.name === "CanceledError") {
+    return true;
+  }
+  if (err.code === "ERR_CANCELED") {
+    return true;
+  }
+  return axios.isCancel(error);
+};
+
+const delay = (ms: number, signal?: AbortSignal) =>
+  new Promise<void>((resolve, reject) => {
+    if (signal?.aborted) {
+      reject(abortError());
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      signal?.removeEventListener("abort", onAbort);
+      resolve();
+    }, ms);
+
+    const onAbort = () => {
+      window.clearTimeout(timeoutId);
+      reject(abortError());
+    };
+
+    signal?.addEventListener("abort", onAbort, { once: true });
+  });
+
+export const waitForAudioJob = async (
+  jobId: string,
+  options?: { signal?: AbortSignal },
+): Promise<AudioJobStatusResponse> => {
+  if (options?.signal?.aborted) {
+    throw abortError();
+  }
+
+  const startedAt = Date.now();
+  const controller = new AbortController();
+  let timedOut = false;
+
+  const onExternalAbort = () => controller.abort();
+  options?.signal?.addEventListener("abort", onExternalAbort);
+
+  const overallTimeoutId = window.setTimeout(() => {
+    timedOut = true;
+    controller.abort();
+  }, AUDIO_JOB_POLL_TIMEOUT_MS);
+
+  try {
+    while (true) {
+      if (controller.signal.aborted) {
+        throw timedOut ? pollTimeoutError() : abortError();
+      }
+
+      try {
+        const status = await fetchAudioJobStatus(jobId, {
+          signal: controller.signal,
+        });
+        if (status.status === "completed" || status.status === "failed") {
+          return status;
+        }
+      } catch (error) {
+        if (timedOut) {
+          throw pollTimeoutError();
+        }
+        if (isAbortError(error) || options?.signal?.aborted) {
+          throw abortError();
+        }
+        // Stalled/timed-out status request: retry until the overall poll budget ends.
+        if (
+          axios.isAxiosError(error) &&
+          error.code === "ECONNABORTED" &&
+          Date.now() - startedAt < AUDIO_JOB_POLL_TIMEOUT_MS
+        ) {
+          await delay(AUDIO_JOB_POLL_INTERVAL_MS, controller.signal);
+          continue;
+        }
+        throw error;
+      }
+
+      if (Date.now() - startedAt >= AUDIO_JOB_POLL_TIMEOUT_MS) {
+        throw pollTimeoutError();
+      }
+
+      await delay(AUDIO_JOB_POLL_INTERVAL_MS, controller.signal);
+    }
+  } catch (error) {
+    if (timedOut) {
+      throw pollTimeoutError();
+    }
+    if (isAbortError(error)) {
+      throw abortError();
+    }
+    throw error;
+  } finally {
+    window.clearTimeout(overallTimeoutId);
+    options?.signal?.removeEventListener("abort", onExternalAbort);
+  }
+};
+
 export const reorderSubtasks = async (
   task_id: string,
   subtasks: Array<{ id: string; display_order: number }>,
diff --git a/src/components/routes/task/components/MobilePreviewSplitDivider.tsx b/src/components/routes/task/components/MobilePreviewSplitDivider.tsx
new file mode 100644
index 00000000..a65a25ff
--- /dev/null
+++ b/src/components/routes/task/components/MobilePreviewSplitDivider.tsx
@@ -0,0 +1,41 @@
+import type { ComponentProps } from "react";
+import { HiOutlineDeviceMobile } from "react-icons/hi";
+import { cn } from "@/lib/utils";
+
+type MobilePreviewSplitDividerProps = ComponentProps<"div"> & {
+  showPreview: boolean;
+  onToggle: () => void;
+};
+
+const MobilePreviewSplitDivider = ({
+  showPreview,
+  onToggle,
+  className,
+  ...props
+}: MobilePreviewSplitDividerProps) => {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "relative z-10 flex w-2 shrink-0 items-center justify-center border-l border-gray-200 bg-muted/40 dark:border-gray-700",
+        className,
+      )}
+    >
+      <button
+        type="button"
+        aria-label={showPreview ? "Hide mobile preview" : "Show mobile preview"}
+        title={showPreview ? "Hide Mobile Preview" : "Show Mobile Preview"}
+        onClick={(event) => {
+          event.stopPropagation();
+          onToggle();
+        }}
+        onPointerDown={(event) => event.stopPropagation()}
+        className="absolute left-1/2 top-1/2 z-20 flex h-8 w-8 -translate-x-6 -translate-y-1/2 items-center justify-center rounded-full border border-gray-200 bg-background shadow-md transition-colors hover:bg-muted dark:border-gray-600"
+      >
+        <HiOutlineDeviceMobile className="h-4 w-4 text-blue-600" />
+      </button>
+    </div>
+  );
+};
+
+export default MobilePreviewSplitDivider;
diff --git a/src/components/routes/task/components/MobileView.tsx b/src/components/routes/task/components/MobileView.tsx
new file mode 100644
index 00000000..c552ee92
--- /dev/null
+++ b/src/components/routes/task/components/MobileView.tsx
@@ -0,0 +1,77 @@
+import { useParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { fetchPlanDetails } from "../api/planApi";
+
+const MobileView = () => {
+  const { planId } = useParams<{ planId: string }>();
+  const { data: planDetails, isLoading } = useQuery({
+    queryKey: ["planDetails", planId],
+    queryFn: () => fetchPlanDetails(planId!),
+    enabled: !!planId,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 dark:border-white mx-auto"></div>
+          <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+            Loading plan...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!planDetails) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center">
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            Plan not found
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const isPlanPublished = planDetails.status === "PUBLISHED";
+  if (!isPlanPublished) {
+    return null;
+  }
+
+  const viewerBase =
+    import.meta.env.VITE_WEBUDDHIST_PLAN_VIEWER_URL ??
+    "https://plans.webuddhist.com";
+  const viewUrl = `${viewerBase}/plan/${planId}`;
+
+  return (
+    <div className="flex h-full items-center justify-center bg-muted/20 p-4">
+      <div
+        className="flex h-full max-h-[min(844px,100%)] w-full max-w-[390px] flex-col rounded-[2.75rem] border-[10px] border-gray-900 bg-gray-900 shadow-2xl dark:border-gray-600"
+        aria-label="Mobile plan preview"
+      >
+        <div
+          className="mx-auto mt-2 h-1.5 w-24 shrink-0 rounded-full bg-gray-700"
+          aria-hidden
+        />
+        <div className="min-h-0 flex-1 overflow-hidden rounded-[2rem] bg-white">
+          {planId && (
+            <iframe
+              src={viewUrl}
+              className="block h-full w-full border-0"
+              title={`WeBuddhist Plan Viewer - ${planId}`}
+              sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+            />
+          )}
+        </div>
+        <div
+          className="mx-auto mb-2 mt-1 h-1 w-28 shrink-0 rounded-full bg-gray-700"
+          aria-hidden
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MobileView;
diff --git a/src/components/routes/task/components/sidebar-component/SideBar.tsx b/src/components/routes/task/components/sidebar-component/SideBar.tsx
index 34b8d7c1..205241d7 100644
--- a/src/components/routes/task/components/sidebar-component/SideBar.tsx
+++ b/src/components/routes/task/components/sidebar-component/SideBar.tsx
@@ -1,11 +1,15 @@
 import { useState, Activity } from "react";
 import { IoCalendarClearOutline } from "react-icons/io5";
-import { IoMdAdd } from "react-icons/io";
 import { MdExpandMore } from "react-icons/md";
 import { BsThreeDots } from "react-icons/bs";
+import { FiTrash } from "react-icons/fi";
 import { Pecha } from "@/components/ui/shadimport";
 import TaskDeleteDialog from "@/components/ui/molecules/modals/task-delete/TaskDeleteDialog";
 import DayDeleteDialog from "@/components/ui/molecules/modals/day-delete/DayDeleteDialog";
+import DayAudioDialog from "@/components/ui/molecules/modals/day-audio/DayAudioDialog";
+import DayVideosDialog from "@/components/ui/molecules/modals/day-videos/DayVideosDialog";
+import DayShareableImagesDialog from "@/components/ui/molecules/modals/day-shareable-images/DayShareableImagesDialog";
+import DayCreateDialog from "@/components/ui/molecules/modals/day-create/DayCreateDialog";
 import { useParams } from "react-router-dom";
 import { SortableList, SortableItem } from "@/components/ui/atoms/sortable";
 import { PiDotsSixVertical } from "react-icons/pi";
@@ -14,8 +18,10 @@ import { fetchPlanDetails } from "../../api/planApi";
 import { usePlanMutations } from "../../hooks/usePlanMutations";
 import { useTaskReorder } from "../../hooks/useTaskReorder";
 import { useDayReorder } from "../../hooks/useDayReorder";
+
 interface SideBarProps {
   selectedDay: number;
+  selectedDayId?: string;
   onDaySelect: (dayNumber: number) => void;
   onTaskClick?: (taskId: string) => void;
   onTaskDelete?: (taskId: string) => void;
@@ -32,6 +38,11 @@ const SideBar = ({
   const [expandedDay, setExpandedDay] = useState<number>(selectedDay);
   const { planId } = useParams<{ planId: string }>();
   const queryClient = useQueryClient();
+
+  const [isSelectMode, setIsSelectMode] = useState(false);
+  const [selectedDayIds, setSelectedDayIds] = useState<Set<string>>(new Set());
+  const [showBulkDeleteConfirm, setShowBulkDeleteConfirm] = useState(false);
+
   const { data: currentPlan, isLoading } = useQuery({
     queryKey: ["planDetails", planId],
     queryFn: () => fetchPlanDetails(planId!),
@@ -51,6 +62,7 @@ const SideBar = ({
   const displayDays = getDisplayDays();
 
   const handleDayClick = (dayNumber: number) => {
+    if (isSelectMode) return;
     onDaySelect(dayNumber);
     setExpandedDay(dayNumber);
   };
@@ -64,19 +76,61 @@ const SideBar = ({
   };
 
   const handleDeleteDay = (day_id: string) => {
-    deleteDay.mutate(day_id);
+    deleteDay.mutate([day_id]);
   };
 
-  const addNewDay = () => {
-    if (!currentPlan || !planId) return;
-    createNewDay.mutate(undefined, {
-      onSuccess: (newDay) => {
-        onDaySelect(newDay.day_number);
-        setExpandedDay(newDay.day_number);
+  const toggleDaySelection = (day_id: string) => {
+    setSelectedDayIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(day_id)) {
+        next.delete(day_id);
+      } else {
+        next.add(day_id);
+      }
+      return next;
+    });
+  };
+
+  const exitSelectMode = () => {
+    setIsSelectMode(false);
+    setSelectedDayIds(new Set());
+  };
+
+  const handleBulkDelete = () => {
+    deleteDay.mutate(Array.from(selectedDayIds), {
+      onSuccess: () => {
+        exitSelectMode();
         queryClient.invalidateQueries({ queryKey: ["planDetails", planId] });
       },
     });
+    setShowBulkDeleteConfirm(false);
   };
+
+  const handleCreateDays = (req: {
+    number_of_days?: number;
+    source_day_id?: string;
+  }) => {
+    createNewDay.mutate(req, {
+      onSuccess: (newDays) => {
+        if (newDays && newDays.length > 0) {
+          onDaySelect(newDays[0].day_number);
+          setExpandedDay(newDays[0].day_number);
+        }
+        queryClient.invalidateQueries({ queryKey: ["planDetails", planId] });
+      },
+    });
+  };
+
+  const canEnterSelectMode =
+    isEditable && displayDays.length > 1 && !createNewDay.isPending;
+
+  const deleteBtnLabel = (() => {
+    if (deleteDay.isPending) return "Deleting…";
+    if (selectedDayIds.size === 0) return "Select days to delete";
+    const unit = selectedDayIds.size === 1 ? "Day" : "Days";
+    return `Delete ${selectedDayIds.size} ${unit}`;
+  })();
+
   return (
     <div className="w-full sm:w-80 lg:w-96 dark:bg-[#161616] border-r border-gray-200 dark:border-border h-screen flex flex-col">
       <div className="p-4 shrink-0">
@@ -95,7 +149,25 @@ const SideBar = ({
       <div className="flex-1 flex flex-col min-h-0">
         <div className="flex p-4 items-center border-b pb-3 gap-2 shrink-0">
           <IoCalendarClearOutline className="w-5 h-5 text-foreground" />
-          <span className="text-sm text-foreground">Days</span>
+          <span className="text-sm text-foreground flex-1">Days</span>
+          {canEnterSelectMode && !isSelectMode && (
+            <button
+              type="button"
+              className="text-xs text-muted-foreground hover:text-foreground transition-colors px-1"
+              onClick={() => setIsSelectMode(true)}
+            >
+              Select
+            </button>
+          )}
+          {isSelectMode && (
+            <button
+              type="button"
+              className="text-xs text-muted-foreground hover:text-foreground transition-colors px-1"
+              onClick={exitSelectMode}
+            >
+              Cancel
+            </button>
+          )}
         </div>
 
         <div className="flex-1 overflow-y-auto min-h-0 space-y-1">
@@ -116,36 +188,53 @@ const SideBar = ({
               onReorder={(activeId: any, overId: any) => {
                 handleDayReorder(activeId, overId);
               }}
-              disabled={!isEditable}
+              disabled={!isEditable || isSelectMode}
             >
               {displayDays.map((day: any) => (
                 <SortableItem key={day.id} id={day.id}>
                   {({ listeners }: any) => (
                     <div className="group space-y-2">
                       <div
-                        className="flex items-center justify-between px-4 py-2 border-b  border-dashed cursor-pointer transition-colors hover:bg-[#f6f6f6] dark:hover:bg-[#000000]/10"
+                        className={`flex items-center justify-between px-4 py-2 border-b border-dashed transition-colors cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#000000]/10 ${
+                          isSelectMode && selectedDayIds.has(day.id)
+                            ? "bg-[#fdf2f2] dark:bg-[#AD1B21]/10"
+                            : ""
+                        }`}
                         onClick={() => {
-                          handleDayClick(day.day_number);
+                          if (isSelectMode) {
+                            toggleDaySelection(day.id);
+                          } else {
+                            handleDayClick(day.day_number);
+                          }
                         }}
                       >
                         <div className="flex items-center gap-3">
-                          {isEditable && (
-                            <PiDotsSixVertical
-                              className="w-4 h-4 text-gray-400 dark:text-muted-foreground cursor-grab active:cursor-grabbing"
-                              {...listeners}
+                          {isSelectMode ? (
+                            <Pecha.Checkbox
+                              checked={selectedDayIds.has(day.id)}
+                              onCheckedChange={() => toggleDaySelection(day.id)}
                               onClick={(e) => e.stopPropagation()}
+                              className="shrink-0"
                             />
+                          ) : (
+                            isEditable && (
+                              <PiDotsSixVertical
+                                className="w-4 h-4 text-gray-400 dark:text-muted-foreground cursor-grab active:cursor-grabbing"
+                                {...listeners}
+                                onClick={(e) => e.stopPropagation()}
+                              />
+                            )
                           )}
                           <div
                             className={`w-4 h-4 rounded-full ${
-                              selectedDay === day.day_number
+                              !isSelectMode && selectedDay === day.day_number
                                 ? "bg-[#ba0909]"
                                 : "bg-input"
                             }`}
-                          ></div>
+                          />
                           <span
                             className={`text-sm ${
-                              selectedDay === day.day_number
+                              !isSelectMode && selectedDay === day.day_number
                                 ? "text-zinc-900 dark:text-zinc-100"
                                 : "text-zinc-400 dark:text-zinc-600"
                             }`}
@@ -154,131 +243,169 @@ const SideBar = ({
                           </span>
                         </div>
 
+                        {!isSelectMode && (
+                          <Activity
+                            mode={
+                              selectedDay === day.day_number
+                                ? "visible"
+                                : "hidden"
+                            }
+                          >
+                            <div className="flex items-center gap-2">
+                              <Activity
+                                mode={
+                                  day.tasks.length > 0 ? "visible" : "hidden"
+                                }
+                              >
+                                <MdExpandMore
+                                  className={`w-4 h-4 text-gray-400 dark:text-muted-foreground cursor-pointer transition-transform ${
+                                    expandedDay === day.day_number
+                                      ? "rotate-180"
+                                      : ""
+                                  }`}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    setExpandedDay(
+                                      expandedDay === day.day_number
+                                        ? 0
+                                        : day.day_number,
+                                    );
+                                  }}
+                                />
+                              </Activity>
+                              {isEditable && currentPlan?.days.length > 1 && (
+                                <Pecha.DropdownMenu>
+                                  <Pecha.DropdownMenuTrigger asChild>
+                                    <BsThreeDots className="w-3 h-3 text-gray-400 dark:text-muted-foreground cursor-pointer" />
+                                  </Pecha.DropdownMenuTrigger>
+                                  <Pecha.DropdownMenuContent side="right">
+                                    <Pecha.DropdownMenuItem
+                                      className="gap-2 cursor-pointer"
+                                      onSelect={(e) => e.preventDefault()}
+                                    >
+                                      <DayAudioDialog
+                                        planId={planId!}
+                                        planTitle={currentPlan?.title}
+                                        dayId={day.id}
+                                        dayNumber={day.day_number}
+                                        audioUrl={day.audio_url}
+                                        audioDurationMs={day.audio_duration_ms}
+                                        hasAudio={day.has_audio}
+                                        isEditable={isEditable}
+                                        language={currentPlan?.language}
+                                      />
+                                    </Pecha.DropdownMenuItem>
+                                    <Pecha.DropdownMenuItem
+                                      className="gap-2 cursor-pointer"
+                                      onSelect={(e) => e.preventDefault()}
+                                    >
+                                      <DayVideosDialog
+                                        planId={planId!}
+                                        dayId={day.id}
+                                        dayNumber={day.day_number}
+                                        videos={day.videos}
+                                        isEditable={isEditable}
+                                      />
+                                    </Pecha.DropdownMenuItem>
+                                    <Pecha.DropdownMenuItem
+                                      className="gap-2 cursor-pointer"
+                                      onSelect={(e) => e.preventDefault()}
+                                    >
+                                      <DayShareableImagesDialog
+                                        planId={planId!}
+                                        dayId={day.id}
+                                        dayNumber={day.day_number}
+                                        thumbnailUrl={day.thumbnail_url}
+                                        shareableImageUrl={
+                                          day.shareable_image_url
+                                        }
+                                        isEditable={isEditable}
+                                      />
+                                    </Pecha.DropdownMenuItem>
+                                    <Pecha.DropdownMenuItem className="gap-2 cursor-pointer">
+                                      <DayDeleteDialog
+                                        onDelete={() => handleDeleteDay(day.id)}
+                                      />
+                                    </Pecha.DropdownMenuItem>
+                                  </Pecha.DropdownMenuContent>
+                                </Pecha.DropdownMenu>
+                              )}
+                            </div>
+                          </Activity>
+                        )}
+                      </div>
+
+                      {!isSelectMode && (
                         <Activity
                           mode={
-                            selectedDay === day.day_number
+                            expandedDay === day.day_number &&
+                            day.tasks.length > 0
                               ? "visible"
                               : "hidden"
                           }
                         >
-                          <div className="flex items-center gap-2">
-                            <Activity
-                              mode={day.tasks.length > 0 ? "visible" : "hidden"}
-                            >
-                              <MdExpandMore
-                                className={`w-4 h-4 text-gray-400 dark:text-muted-foreground cursor-pointer transition-transform ${
-                                  expandedDay === day.day_number
-                                    ? "rotate-180"
-                                    : ""
-                                }`}
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  setExpandedDay(
-                                    expandedDay === day.day_number
-                                      ? 0
-                                      : day.day_number,
-                                  );
-                                }}
-                              />
-                            </Activity>
-                            <IoMdAdd
-                              className={`w-4 h-4 text-gray-400 dark:text-muted-foreground ${
-                                isEditable
-                                  ? "cursor-pointer"
-                                  : "cursor-not-allowed opacity-50"
-                              }`}
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                if (isEditable) {
-                                  handleDayClick(day.day_number);
-                                }
+                          <div className="mx-2 border h-44 overflow-y-auto dark:bg-accent/30 bg-[#F5F5F5]">
+                            <SortableList
+                              items={getDisplayTasks(day).map((task: any) => ({
+                                id: task.id,
+                                display_order: task.display_order,
+                              }))}
+                              onReorder={(activeId: any, overId: any) => {
+                                handleTaskReorder(activeId, overId);
                               }}
-                            />
-                            {isEditable && currentPlan?.days.length > 1 && (
-                              <Pecha.DropdownMenu>
-                                <Pecha.DropdownMenuTrigger asChild>
-                                  <BsThreeDots className="w-3 h-3 text-gray-400 dark:text-muted-foreground cursor-pointer" />
-                                </Pecha.DropdownMenuTrigger>
-                                <Pecha.DropdownMenuContent side="right">
-                                  <Pecha.DropdownMenuItem className="gap-2 cursor-pointer">
-                                    <DayDeleteDialog
-                                      dayId={day.id}
-                                      onDelete={handleDeleteDay}
-                                    />
-                                  </Pecha.DropdownMenuItem>
-                                </Pecha.DropdownMenuContent>
-                              </Pecha.DropdownMenu>
-                            )}
+                              disabled={!isEditable}
+                            >
+                              {getDisplayTasks(day).map((task: any) => (
+                                <SortableItem
+                                  key={task.id}
+                                  id={task.id}
+                                  className="flex items-center gap-x-2 bg-white dark:bg-[#161616] border-b border-gray-200 dark:border-input/40 justify-between py-2 pr-3 pl-1 text-sm text-foreground"
+                                >
+                                  {({ listeners }: any) => (
+                                    <>
+                                      {isEditable && (
+                                        <PiDotsSixVertical
+                                          className="w-4 h-4 text-gray-400 dark:text-muted-foreground cursor-grab active:cursor-grabbing"
+                                          {...listeners}
+                                        />
+                                      )}
+                                      <span
+                                        className="cursor-pointer w-full"
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          onTaskClick?.(task.id);
+                                        }}
+                                      >
+                                        {task.title}
+                                      </span>
+                                      {isEditable && (
+                                        <Pecha.DropdownMenu>
+                                          <Pecha.DropdownMenuTrigger asChild>
+                                            <BsThreeDots
+                                              className="w-3 h-3 text-gray-400 dark:text-muted-foreground cursor-pointer"
+                                              onClick={(e) =>
+                                                e.stopPropagation()
+                                              }
+                                            />
+                                          </Pecha.DropdownMenuTrigger>
+                                          <Pecha.DropdownMenuContent side="right">
+                                            <Pecha.DropdownMenuItem className="gap-2 cursor-pointer">
+                                              <TaskDeleteDialog
+                                                taskId={task.id}
+                                                onDelete={handleDeleteTask}
+                                              />
+                                            </Pecha.DropdownMenuItem>
+                                          </Pecha.DropdownMenuContent>
+                                        </Pecha.DropdownMenu>
+                                      )}
+                                    </>
+                                  )}
+                                </SortableItem>
+                              ))}
+                            </SortableList>
                           </div>
                         </Activity>
-                      </div>
-
-                      <Activity
-                        mode={
-                          expandedDay === day.day_number && day.tasks.length > 0
-                            ? "visible"
-                            : "hidden"
-                        }
-                      >
-                        <div className=" mx-2 border h-44 overflow-y-auto dark:bg-accent/30 bg-[#F5F5F5]">
-                          <SortableList
-                            items={getDisplayTasks(day).map((task: any) => ({
-                              id: task.id,
-                              display_order: task.display_order,
-                            }))}
-                            onReorder={(activeId: any, overId: any) => {
-                              handleTaskReorder(activeId, overId);
-                            }}
-                            disabled={!isEditable}
-                          >
-                            {getDisplayTasks(day).map((task: any) => (
-                              <SortableItem
-                                key={task.id}
-                                id={task.id}
-                                className="flex items-center gap-x-2 bg-white dark:bg-[#161616] border-b border-gray-200 dark:border-input/40 justify-between py-2 pr-3 pl-1 text-sm text-foreground"
-                              >
-                                {({ listeners }: any) => (
-                                  <>
-                                    {isEditable && (
-                                      <PiDotsSixVertical
-                                        className="w-4 h-4 text-gray-400 dark:text-muted-foreground cursor-grab active:cursor-grabbing"
-                                        {...listeners}
-                                      />
-                                    )}
-                                    <span
-                                      className="cursor-pointer w-full"
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-                                        onTaskClick?.(task.id);
-                                      }}
-                                    >
-                                      {task.title}
-                                    </span>
-                                    {isEditable && (
-                                      <Pecha.DropdownMenu>
-                                        <Pecha.DropdownMenuTrigger asChild>
-                                          <BsThreeDots
-                                            className="w-3 h-3 text-gray-400 dark:text-muted-foreground cursor-pointer"
-                                            onClick={(e) => e.stopPropagation()}
-                                          />
-                                        </Pecha.DropdownMenuTrigger>
-                                        <Pecha.DropdownMenuContent side="right">
-                                          <Pecha.DropdownMenuItem className="gap-2 cursor-pointer">
-                                            <TaskDeleteDialog
-                                              taskId={task.id}
-                                              onDelete={handleDeleteTask}
-                                            />
-                                          </Pecha.DropdownMenuItem>
-                                        </Pecha.DropdownMenuContent>
-                                      </Pecha.DropdownMenu>
-                                    )}
-                                  </>
-                                )}
-                              </SortableItem>
-                            ))}
-                          </SortableList>
-                        </div>
-                      </Activity>
+                      )}
                     </div>
                   )}
                 </SortableItem>
@@ -286,21 +413,71 @@ const SideBar = ({
             </SortableList>
           )}
         </div>
-        <div className="px-2 py-2 border-t shrink-0">
-          <Pecha.Button
-            type="button"
-            onClick={addNewDay}
-            disabled={!isEditable || createNewDay.isPending}
-            variant="destructive"
-            className="cursor-pointer w-full disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            <IoMdAdd className="w-4 h-4" />
-            <span className="text-sm font-medium">
-              {createNewDay.isPending ? "Adding..." : "Add New Day"}
-            </span>
-          </Pecha.Button>
+
+        {/* Footer */}
+        <div className="px-2 py-2 border-t shrink-0 space-y-2">
+          {isSelectMode ? (
+            <>
+              <Pecha.Button
+                type="button"
+                variant="outline"
+                className="w-full"
+                onClick={exitSelectMode}
+              >
+                Cancel
+              </Pecha.Button>
+              <Pecha.Button
+                type="button"
+                disabled={selectedDayIds.size === 0 || deleteDay.isPending}
+                className="w-full bg-[#AD1B21] dark:text-white hover:bg-[#AD1B21]/90 disabled:opacity-50 disabled:cursor-not-allowed"
+                onClick={() => setShowBulkDeleteConfirm(true)}
+              >
+                <FiTrash className="w-4 h-4" />
+                <span className="text-sm font-medium">{deleteBtnLabel}</span>
+              </Pecha.Button>
+            </>
+          ) : (
+            <DayCreateDialog
+              disabled={!isEditable}
+              isPending={createNewDay.isPending}
+              onSubmit={handleCreateDays}
+            />
+          )}
         </div>
       </div>
+
+      {/* Bulk delete confirmation */}
+      <Pecha.AlertDialog
+        open={showBulkDeleteConfirm}
+        onOpenChange={setShowBulkDeleteConfirm}
+      >
+        <Pecha.AlertDialogContent>
+          <Pecha.AlertDialogHeader>
+            <Pecha.AlertDialogTitle>
+              Delete {selectedDayIds.size}{" "}
+              {selectedDayIds.size === 1 ? "day" : "days"}?
+            </Pecha.AlertDialogTitle>
+            <Pecha.AlertDialogDescription>
+              This action cannot be undone. All tasks inside the selected{" "}
+              {selectedDayIds.size === 1 ? "day" : "days"} will be permanently
+              deleted and remaining days will be renumbered.
+            </Pecha.AlertDialogDescription>
+          </Pecha.AlertDialogHeader>
+          <Pecha.AlertDialogFooter>
+            <Pecha.AlertDialogCancel
+              onClick={() => setShowBulkDeleteConfirm(false)}
+            >
+              Cancel
+            </Pecha.AlertDialogCancel>
+            <Pecha.AlertDialogAction
+              className="bg-[#AD1B21] dark:text-white hover:bg-[#AD1B21]/90"
+              onClick={handleBulkDelete}
+            >
+              Delete
+            </Pecha.AlertDialogAction>
+          </Pecha.AlertDialogFooter>
+        </Pecha.AlertDialogContent>
+      </Pecha.AlertDialog>
     </div>
   );
 };
diff --git a/src/components/routes/task/components/view/EditorTabSwitcher.test.tsx b/src/components/routes/task/components/view/EditorTabSwitcher.test.tsx
new file mode 100644
index 00000000..7152f9ab
--- /dev/null
+++ b/src/components/routes/task/components/view/EditorTabSwitcher.test.tsx
@@ -0,0 +1,80 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { vi } from "vitest";
+import { EditorTabSwitcher } from "./EditorTabSwitcher";
+
+describe("EditorTabSwitcher Component", () => {
+  const mockOnTabChange = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders both tabs", () => {
+    render(
+      <EditorTabSwitcher activeTab="task" onTabChange={mockOnTabChange} />,
+    );
+    expect(screen.getByText("Add Task")).toBeInTheDocument();
+    expect(screen.getByText("Notification")).toBeInTheDocument();
+  });
+
+  it("calls onTabChange with 'task' when Add Task tab is clicked", () => {
+    render(
+      <EditorTabSwitcher
+        activeTab="notification"
+        onTabChange={mockOnTabChange}
+      />,
+    );
+    const taskTab = screen.getByText("Add Task");
+    fireEvent.click(taskTab);
+    expect(mockOnTabChange).toHaveBeenCalledWith("task");
+  });
+
+  it("calls onTabChange with 'notification' when Notification tab is clicked", () => {
+    render(
+      <EditorTabSwitcher activeTab="task" onTabChange={mockOnTabChange} />,
+    );
+    const notificationTab = screen.getByText("Notification");
+    fireEvent.click(notificationTab);
+    expect(mockOnTabChange).toHaveBeenCalledWith("notification");
+  });
+
+  it("applies active styling to task tab when activeTab is 'task'", () => {
+    render(
+      <EditorTabSwitcher activeTab="task" onTabChange={mockOnTabChange} />,
+    );
+    const taskTab = screen.getByText("Add Task");
+    expect(taskTab).toHaveClass("border-b-2", "border-red-500");
+  });
+
+  it("applies active styling to notification tab when activeTab is 'notification'", () => {
+    render(
+      <EditorTabSwitcher
+        activeTab="notification"
+        onTabChange={mockOnTabChange}
+      />,
+    );
+    const notificationTab = screen.getByText("Notification");
+    expect(notificationTab).toHaveClass("border-b-2", "border-red-500");
+  });
+
+  it("applies inactive styling to task tab when activeTab is 'notification'", () => {
+    render(
+      <EditorTabSwitcher
+        activeTab="notification"
+        onTabChange={mockOnTabChange}
+      />,
+    );
+    const taskTab = screen.getByText("Add Task");
+    expect(taskTab).toHaveClass("text-gray-500");
+    expect(taskTab).not.toHaveClass("border-b-2");
+  });
+
+  it("applies inactive styling to notification tab when activeTab is 'task'", () => {
+    render(
+      <EditorTabSwitcher activeTab="task" onTabChange={mockOnTabChange} />,
+    );
+    const notificationTab = screen.getByText("Notification");
+    expect(notificationTab).toHaveClass("text-gray-500");
+    expect(notificationTab).not.toHaveClass("border-b-2");
+  });
+});
diff --git a/src/components/routes/task/components/view/EditorTabSwitcher.tsx b/src/components/routes/task/components/view/EditorTabSwitcher.tsx
new file mode 100644
index 00000000..904869b3
--- /dev/null
+++ b/src/components/routes/task/components/view/EditorTabSwitcher.tsx
@@ -0,0 +1,36 @@
+interface EditorTabSwitcherProps {
+  activeTab: "task" | "notification";
+  onTabChange: (tab: "task" | "notification") => void;
+}
+
+export const EditorTabSwitcher = ({
+  activeTab,
+  onTabChange,
+}: EditorTabSwitcherProps) => {
+  return (
+    <div className="flex border-b border-gray-300 dark:border-input">
+      <button
+        type="button"
+        onClick={() => onTabChange("task")}
+        className={`px-6 py-3 text-lg font-semibold transition-colors ${
+          activeTab === "task"
+            ? "border-b-2 border-red-500 text-gray-900 dark:text-white"
+            : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+        }`}
+      >
+        Add Task
+      </button>
+      <button
+        type="button"
+        onClick={() => onTabChange("notification")}
+        className={`px-6 py-3 text-lg font-semibold transition-colors ${
+          activeTab === "notification"
+            ? "border-b-2 border-red-500 text-gray-900 dark:text-white"
+            : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+        }`}
+      >
+        Notification
+      </button>
+    </div>
+  );
+};
diff --git a/src/components/routes/task/components/view/NotificationForm.test.tsx b/src/components/routes/task/components/view/NotificationForm.test.tsx
new file mode 100644
index 00000000..6d930e7b
--- /dev/null
+++ b/src/components/routes/task/components/view/NotificationForm.test.tsx
@@ -0,0 +1,856 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { vi } from "vitest";
+import { NotificationForm } from "./NotificationForm";
+
+const mockExistingNotification = {
+  id: "notif-123",
+  day_id: "day-1",
+  title: "Test Title",
+  body: "Test Body",
+  image_type: "PLAN" as const,
+  image_url: "https://example.com/plan-cover.jpg",
+  created_at: "2026-06-15T09:00:00Z",
+  updated_at: null,
+};
+
+const mockCustomNotification = {
+  id: "notif-456",
+  day_id: "day-1",
+  title: "Custom Title",
+  body: "Custom Body",
+  image_type: "CUSTOM" as const,
+  image_url: "https://example.com/custom-image.jpg",
+  created_at: "2026-06-15T09:00:00Z",
+  updated_at: null,
+};
+
+const mockPlanCoverImage = "https://example.com/plan-cover.jpg";
+
+vi.mock("../../api/notificationApi", () => ({
+  getNotification: vi.fn(),
+  createNotification: vi.fn(),
+  updateNotification: vi.fn(),
+  deleteNotification: vi.fn(),
+}));
+
+vi.mock("../../api/taskApi", () => ({
+  uploadImageToS3: vi.fn(),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    error: vi.fn(),
+    success: vi.fn(),
+  },
+}));
+
+vi.mock("react-icons/md", () => ({
+  MdOutlineImage: () => <div data-testid="image-icon">Image Icon</div>,
+}));
+
+const renderWithProviders = (
+  component: React.ReactElement,
+  existingNotificationData?: any,
+) => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  });
+
+  if (existingNotificationData !== undefined) {
+    queryClient.setQueryData(
+      ["notification", "day-1"],
+      existingNotificationData,
+    );
+  }
+
+  return render(
+    <QueryClientProvider client={queryClient}>{component}</QueryClientProvider>,
+  );
+};
+
+describe("NotificationForm Component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("Rendering Tests", () => {
+    it("renders form with Title and Body fields", async () => {
+      const { getNotification } = await import("../../api/notificationApi");
+      vi.mocked(getNotification).mockResolvedValue(null);
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByLabelText("Title")).toBeInTheDocument();
+        expect(screen.getByLabelText("Body")).toBeInTheDocument();
+      });
+    });
+
+    it("shows character counters", async () => {
+      const { getNotification } = await import("../../api/notificationApi");
+      vi.mocked(getNotification).mockResolvedValue(null);
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("0 / 40")).toBeInTheDocument();
+        expect(screen.getByText("0 / 180")).toBeInTheDocument();
+      });
+    });
+
+    it("renders three image options", async () => {
+      const { getNotification } = await import("../../api/notificationApi");
+      vi.mocked(getNotification).mockResolvedValue(null);
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("Custom")).toBeInTheDocument();
+        expect(screen.getByText("Use plan cover")).toBeInTheDocument();
+        expect(screen.getByText("No image")).toBeInTheDocument();
+      });
+    });
+
+    it("shows loading state when fetching notification", () => {
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+      );
+
+      expect(screen.getByText("Loading...")).toBeInTheDocument();
+    });
+
+    it("shows Save button in create mode", async () => {
+      const { getNotification } = await import("../../api/notificationApi");
+      vi.mocked(getNotification).mockResolvedValue(null);
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("Save")).toBeInTheDocument();
+      });
+    });
+
+    it("shows Update button in edit mode", async () => {
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        mockExistingNotification,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("Update")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("Form Interaction Tests", () => {
+    it("updates title field and character counter", async () => {
+      const { getNotification } = await import("../../api/notificationApi");
+      vi.mocked(getNotification).mockResolvedValue(null);
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        const titleInput = screen.getByLabelText("Title");
+        fireEvent.change(titleInput, { target: { value: "New Title" } });
+        expect(titleInput).toHaveValue("New Title");
+        expect(screen.getByText("9 / 40")).toBeInTheDocument();
+      });
+    });
+
+    it("updates body field and character counter", async () => {
+      const { getNotification } = await import("../../api/notificationApi");
+      vi.mocked(getNotification).mockResolvedValue(null);
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        const bodyInput = screen.getByLabelText("Body");
+        fireEvent.change(bodyInput, { target: { value: "New Body Content" } });
+        expect(bodyInput).toHaveValue("New Body Content");
+        expect(screen.getByText("16 / 180")).toBeInTheDocument();
+      });
+    });
+
+    it("enforces title max length of 40 characters", async () => {
+      const { getNotification } = await import("../../api/notificationApi");
+      vi.mocked(getNotification).mockResolvedValue(null);
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        const titleInput = screen.getByLabelText("Title") as HTMLInputElement;
+        expect(titleInput.maxLength).toBe(40);
+      });
+    });
+
+    it("enforces body max length of 180 characters", async () => {
+      const { getNotification } = await import("../../api/notificationApi");
+      vi.mocked(getNotification).mockResolvedValue(null);
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        const bodyInput = screen.getByLabelText("Body") as HTMLTextAreaElement;
+        expect(bodyInput.maxLength).toBe(180);
+      });
+    });
+
+    it("selects CUSTOM image type", async () => {
+      const { getNotification } = await import("../../api/notificationApi");
+      vi.mocked(getNotification).mockResolvedValue(null);
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        const customRadio = screen.getByRole("radio", { name: /custom/i });
+        fireEvent.click(customRadio);
+        expect(customRadio).toBeChecked();
+      });
+    });
+
+    it("selects PLAN image type", async () => {
+      const { getNotification } = await import("../../api/notificationApi");
+      vi.mocked(getNotification).mockResolvedValue(null);
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        const planRadio = screen.getByRole("radio", {
+          name: /use plan cover/i,
+        });
+        fireEvent.click(planRadio);
+        expect(planRadio).toBeChecked();
+      });
+    });
+
+    it("selects no image option", async () => {
+      const { getNotification } = await import("../../api/notificationApi");
+      vi.mocked(getNotification).mockResolvedValue(null);
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        const noImageRadio = screen.getByRole("radio", { name: /no image/i });
+        fireEvent.click(noImageRadio);
+        expect(noImageRadio).toBeChecked();
+      });
+    });
+  });
+
+  describe("Image Upload Tests", () => {
+    it("rejects files over 5MB", async () => {
+      const { getNotification } = await import("../../api/notificationApi");
+      const { toast } = await import("sonner");
+      vi.mocked(getNotification).mockResolvedValue(null);
+
+      const { container } = renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        const fileInput = container.querySelector(
+          'input[type="file"]',
+        ) as HTMLInputElement;
+
+        const largeFile = new File(["x".repeat(6 * 1024 * 1024)], "large.jpg", {
+          type: "image/jpeg",
+        });
+
+        fireEvent.change(fileInput, { target: { files: [largeFile] } });
+
+        expect(toast.error).toHaveBeenCalledWith(
+          "File size exceeds 5MB limit. Please select a smaller image.",
+        );
+      });
+    });
+
+    it("rejects invalid file types", async () => {
+      const { getNotification } = await import("../../api/notificationApi");
+      const { toast } = await import("sonner");
+      vi.mocked(getNotification).mockResolvedValue(null);
+
+      const { container } = renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        const fileInput = container.querySelector(
+          'input[type="file"]',
+        ) as HTMLInputElement;
+
+        const invalidFile = new File(["content"], "file.pdf", {
+          type: "application/pdf",
+        });
+
+        fireEvent.change(fileInput, { target: { files: [invalidFile] } });
+
+        expect(toast.error).toHaveBeenCalledWith(
+          "Invalid file type. Please upload PNG, JPG, JPEG, or WebP.",
+        );
+      });
+    });
+
+    it("uploads valid image and sets CUSTOM type", async () => {
+      const { getNotification } = await import("../../api/notificationApi");
+      const { uploadImageToS3 } = await import("../../api/taskApi");
+      const { toast } = await import("sonner");
+
+      vi.mocked(getNotification).mockResolvedValue(null);
+      vi.mocked(uploadImageToS3).mockResolvedValue({
+        image: { original: "https://example.com/uploaded.jpg" },
+        key: "uploaded-key",
+      });
+
+      const { container } = renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(async () => {
+        const fileInput = container.querySelector(
+          'input[type="file"]',
+        ) as HTMLInputElement;
+
+        const validFile = new File(["content"], "image.jpg", {
+          type: "image/jpeg",
+        });
+
+        fireEvent.change(fileInput, { target: { files: [validFile] } });
+
+        await waitFor(() => {
+          expect(uploadImageToS3).toHaveBeenCalledWith(validFile, "plan-1");
+          expect(toast.success).toHaveBeenCalledWith(
+            "Image uploaded successfully!",
+          );
+        });
+      });
+    });
+  });
+
+  describe("API Integration Tests", () => {
+    it("calls createNotification when saving new notification", async () => {
+      const { getNotification, createNotification } = await import(
+        "../../api/notificationApi"
+      );
+      const { toast } = await import("sonner");
+
+      vi.mocked(getNotification).mockResolvedValue(null);
+      vi.mocked(createNotification).mockResolvedValue({
+        ...mockExistingNotification,
+        id: "new-notif",
+      });
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        const titleInput = screen.getByLabelText("Title");
+        const bodyInput = screen.getByLabelText("Body");
+
+        fireEvent.change(titleInput, { target: { value: "New Title" } });
+        fireEvent.change(bodyInput, { target: { value: "New Body" } });
+
+        const saveButton = screen.getByText("Save");
+        fireEvent.click(saveButton);
+      });
+
+      await waitFor(() => {
+        expect(createNotification).toHaveBeenCalledWith("day-1", {
+          title: "New Title",
+          body: "New Body",
+          image_type: null,
+          image_url: null,
+        });
+        expect(toast.success).toHaveBeenCalledWith(
+          "Notification created successfully!",
+        );
+      });
+    });
+
+    it("calls updateNotification when updating existing notification", async () => {
+      const { updateNotification } = await import("../../api/notificationApi");
+      const { toast } = await import("sonner");
+
+      vi.mocked(updateNotification).mockResolvedValue(mockExistingNotification);
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        mockExistingNotification,
+      );
+
+      await waitFor(() => {
+        const titleInput = screen.getByLabelText("Title");
+        fireEvent.change(titleInput, { target: { value: "Updated Title" } });
+
+        const updateButton = screen.getByText("Update");
+        fireEvent.click(updateButton);
+      });
+
+      await waitFor(() => {
+        expect(updateNotification).toHaveBeenCalledWith("day-1", {
+          title: "Updated Title",
+          body: "Test Body",
+          image_type: "PLAN",
+          image_url: mockPlanCoverImage,
+        });
+        expect(toast.success).toHaveBeenCalledWith(
+          "Notification updated successfully!",
+        );
+      });
+    });
+
+    it("calls deleteNotification when clearing existing notification", async () => {
+      const { deleteNotification } = await import("../../api/notificationApi");
+      const { toast } = await import("sonner");
+
+      vi.mocked(deleteNotification).mockResolvedValue(undefined);
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        mockExistingNotification,
+      );
+
+      await waitFor(() => {
+        const clearButton = screen.getByText("Clear");
+        fireEvent.click(clearButton);
+      });
+
+      await waitFor(() => {
+        expect(deleteNotification).toHaveBeenCalledWith("day-1");
+        expect(toast.success).toHaveBeenCalledWith(
+          "Notification deleted successfully!",
+        );
+      });
+    });
+
+    it("resets form when clearing new notification without API call", async () => {
+      const { getNotification, deleteNotification } = await import(
+        "../../api/notificationApi"
+      );
+
+      vi.mocked(getNotification).mockResolvedValue(null);
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        const titleInput = screen.getByLabelText("Title");
+        fireEvent.change(titleInput, { target: { value: "Some Title" } });
+
+        const clearButton = screen.getByText("Clear");
+        fireEvent.click(clearButton);
+
+        expect(deleteNotification).not.toHaveBeenCalled();
+        expect(titleInput).toHaveValue("");
+      });
+    });
+
+    it("shows error toast on save failure", async () => {
+      const { getNotification, createNotification } = await import(
+        "../../api/notificationApi"
+      );
+      const { toast } = await import("sonner");
+
+      vi.mocked(getNotification).mockResolvedValue(null);
+      vi.mocked(createNotification).mockRejectedValue(
+        new Error("Network error"),
+      );
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        const titleInput = screen.getByLabelText("Title");
+        fireEvent.change(titleInput, { target: { value: "Title" } });
+
+        const saveButton = screen.getByText("Save");
+        fireEvent.click(saveButton);
+      });
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith(
+          "Failed to save notification",
+          {
+            description: "Network error",
+          },
+        );
+      });
+    });
+  });
+
+  describe("Image Type Payload Tests", () => {
+    it("sends image_url: null when image_type is null", async () => {
+      const { getNotification, createNotification } = await import(
+        "../../api/notificationApi"
+      );
+
+      vi.mocked(getNotification).mockResolvedValue(null);
+      vi.mocked(createNotification).mockResolvedValue({
+        ...mockExistingNotification,
+        id: "new-notif",
+      });
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        const titleInput = screen.getByLabelText("Title");
+        fireEvent.change(titleInput, { target: { value: "Title" } });
+
+        const saveButton = screen.getByText("Save");
+        fireEvent.click(saveButton);
+      });
+
+      await waitFor(() => {
+        expect(createNotification).toHaveBeenCalledWith("day-1", {
+          title: "Title",
+          body: "",
+          image_type: null,
+          image_url: null,
+        });
+      });
+    });
+
+    it("sends image_url: customImageUrl when image_type is CUSTOM", async () => {
+      const { getNotification, createNotification } = await import(
+        "../../api/notificationApi"
+      );
+      const { uploadImageToS3 } = await import("../../api/taskApi");
+
+      vi.mocked(getNotification).mockResolvedValue(null);
+      vi.mocked(uploadImageToS3).mockResolvedValue({
+        image: { original: "https://example.com/custom.jpg" },
+        key: "custom-key",
+      });
+      vi.mocked(createNotification).mockResolvedValue({
+        ...mockExistingNotification,
+        id: "new-notif",
+      });
+
+      const { container } = renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByLabelText("Title")).toBeInTheDocument();
+      });
+
+      const fileInput = container.querySelector(
+        'input[type="file"]',
+      ) as HTMLInputElement;
+
+      const validFile = new File(["content"], "image.jpg", {
+        type: "image/jpeg",
+      });
+
+      fireEvent.change(fileInput, { target: { files: [validFile] } });
+
+      await waitFor(() => {
+        expect(uploadImageToS3).toHaveBeenCalledWith(validFile, "plan-1");
+      });
+
+      const titleInput = screen.getByLabelText("Title");
+      fireEvent.change(titleInput, { target: { value: "Title" } });
+
+      const saveButton = screen.getByText("Save");
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(createNotification).toHaveBeenCalledWith("day-1", {
+          title: "Title",
+          body: "",
+          image_type: "CUSTOM",
+          image_url: "custom-key",
+        });
+      });
+    });
+
+    it("sends image_url: planCoverImage when image_type is PLAN", async () => {
+      const { getNotification, createNotification } = await import(
+        "../../api/notificationApi"
+      );
+
+      vi.mocked(getNotification).mockResolvedValue(null);
+      vi.mocked(createNotification).mockResolvedValue({
+        ...mockExistingNotification,
+        id: "new-notif",
+      });
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        const planRadio = screen.getByRole("radio", {
+          name: /use plan cover/i,
+        });
+        fireEvent.click(planRadio);
+
+        const titleInput = screen.getByLabelText("Title");
+        fireEvent.change(titleInput, { target: { value: "Title" } });
+
+        const saveButton = screen.getByText("Save");
+        fireEvent.click(saveButton);
+      });
+
+      await waitFor(() => {
+        expect(createNotification).toHaveBeenCalledWith("day-1", {
+          title: "Title",
+          body: "",
+          image_type: "PLAN",
+          image_url: mockPlanCoverImage,
+        });
+      });
+    });
+  });
+
+  describe("Permission Tests", () => {
+    it("disables form fields when isEditable is false", async () => {
+      const { getNotification } = await import("../../api/notificationApi");
+      vi.mocked(getNotification).mockResolvedValue(null);
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+          isEditable={false}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        const titleInput = screen.getByLabelText("Title");
+        const bodyInput = screen.getByLabelText("Body");
+
+        expect(titleInput).toBeDisabled();
+        expect(bodyInput).toBeDisabled();
+      });
+    });
+
+    it("disables buttons when isEditable is false", async () => {
+      const { getNotification } = await import("../../api/notificationApi");
+      vi.mocked(getNotification).mockResolvedValue(null);
+
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+          isEditable={false}
+        />,
+        null,
+      );
+
+      await waitFor(() => {
+        const clearButton = screen.getByText("Clear");
+        const saveButton = screen.getByText("Save");
+
+        expect(clearButton).toBeDisabled();
+        expect(saveButton).toBeDisabled();
+      });
+    });
+  });
+
+  describe("Existing Notification Loading", () => {
+    it("populates form with existing notification data", async () => {
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        mockExistingNotification,
+      );
+
+      await waitFor(() => {
+        const titleInput = screen.getByLabelText("Title") as HTMLInputElement;
+        const bodyInput = screen.getByLabelText("Body") as HTMLTextAreaElement;
+
+        expect(titleInput.value).toBe("Test Title");
+        expect(bodyInput.value).toBe("Test Body");
+      });
+    });
+
+    it("sets PLAN image type for existing notification with PLAN type", async () => {
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        mockExistingNotification,
+      );
+
+      await waitFor(() => {
+        const planRadio = screen.getByRole("radio", {
+          name: /use plan cover/i,
+        });
+        expect(planRadio).toBeChecked();
+      });
+    });
+
+    it("sets CUSTOM image type and preview for existing notification with CUSTOM type", async () => {
+      renderWithProviders(
+        <NotificationForm
+          dayId="day-1"
+          planId="plan-1"
+          planCoverImage={mockPlanCoverImage}
+        />,
+        mockCustomNotification,
+      );
+
+      await waitFor(() => {
+        const customRadio = screen.getByRole("radio", { name: /custom/i });
+        expect(customRadio).toBeChecked();
+
+        const customImage = screen.getByAltText("Custom") as HTMLImageElement;
+        expect(customImage.src).toBe("https://example.com/custom-image.jpg");
+      });
+    });
+  });
+});
diff --git a/src/components/routes/task/components/view/NotificationForm.tsx b/src/components/routes/task/components/view/NotificationForm.tsx
new file mode 100644
index 00000000..fd907f60
--- /dev/null
+++ b/src/components/routes/task/components/view/NotificationForm.tsx
@@ -0,0 +1,368 @@
+import { useState, useEffect } from "react";
+import { Pecha } from "@/components/ui/shadimport";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import {
+  getNotification,
+  createNotification,
+  updateNotification,
+  deleteNotification,
+} from "../../api/notificationApi";
+import { uploadImageToS3 } from "../../api/taskApi";
+import { MdOutlineImage } from "react-icons/md";
+
+const notificationSchema = z.object({
+  title: z.string().max(40, "Title must be 40 characters or less"),
+  body: z.string().max(180, "Body must be 180 characters or less"),
+});
+
+type NotificationFormData = z.infer<typeof notificationSchema>;
+
+interface NotificationFormProps {
+  dayId: string;
+  planId: string;
+  planCoverImage?: string | null;
+  isEditable?: boolean;
+}
+
+export const NotificationForm = ({
+  dayId,
+  planId,
+  planCoverImage,
+  isEditable = true,
+}: NotificationFormProps) => {
+  const queryClient = useQueryClient();
+  const [imageType, setImageType] = useState<"PLAN" | "CUSTOM" | null>(null);
+  const [customImageUrl, setCustomImageUrl] = useState<string | null>(null);
+  const [customImagePreview, setCustomImagePreview] = useState<string | null>(
+    null,
+  );
+  const [uploadingImage, setUploadingImage] = useState(false);
+
+  const form = useForm<NotificationFormData>({
+    resolver: zodResolver(notificationSchema),
+    defaultValues: {
+      title: "",
+      body: "",
+    },
+  });
+
+  const { data: existingNotification, isLoading } = useQuery({
+    queryKey: ["notification", dayId],
+    queryFn: () => getNotification(dayId),
+    enabled: !!dayId,
+  });
+
+  useEffect(() => {
+    if (existingNotification) {
+      form.setValue("title", existingNotification.title || "");
+      form.setValue("body", existingNotification.body || "");
+      setImageType(existingNotification.image_type);
+      if (existingNotification.image_type === "CUSTOM") {
+        setCustomImageUrl(existingNotification.image_url);
+        setCustomImagePreview(existingNotification.image_url);
+      }
+    }
+  }, [existingNotification, form]);
+
+  const saveMutation = useMutation({
+    mutationFn: async (data: NotificationFormData) => {
+      let imageUrl = null;
+      if (imageType === "CUSTOM") {
+        imageUrl = customImageUrl;
+      } else if (imageType === "PLAN") {
+        imageUrl = planCoverImage || null;
+      }
+
+      const payload = {
+        title: data.title,
+        body: data.body,
+        image_type: imageType,
+        image_url: imageUrl,
+      };
+
+      if (existingNotification) {
+        return updateNotification(dayId, payload);
+      } else {
+        return createNotification(dayId, payload);
+      }
+    },
+    onSuccess: () => {
+      toast.success(
+        existingNotification
+          ? "Notification updated successfully!"
+          : "Notification created successfully!",
+      );
+      queryClient.invalidateQueries({ queryKey: ["notification", dayId] });
+    },
+    onError: (error: Error) => {
+      toast.error("Failed to save notification", {
+        description: error?.message || "Something went wrong",
+      });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: () => deleteNotification(dayId),
+    onSuccess: () => {
+      toast.success("Notification deleted successfully!");
+      form.reset();
+      setImageType(null);
+      setCustomImageUrl(null);
+      setCustomImagePreview(null);
+      queryClient.invalidateQueries({ queryKey: ["notification", dayId] });
+    },
+    onError: (error: Error) => {
+      toast.error("Failed to delete notification", {
+        description: error?.message || "Something went wrong",
+      });
+    },
+  });
+
+  const handleImageUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const fileSizeMB = file.size / (1024 * 1024);
+    if (fileSizeMB > 5) {
+      toast.error(
+        "File size exceeds 5MB limit. Please select a smaller image.",
+      );
+      return;
+    }
+
+    const validTypes = ["image/png", "image/jpg", "image/jpeg", "image/webp"];
+    if (!validTypes.includes(file.type)) {
+      toast.error("Invalid file type. Please upload PNG, JPG, JPEG, or WebP.");
+      return;
+    }
+
+    try {
+      setUploadingImage(true);
+      const { image, key } = await uploadImageToS3(file, planId);
+      setCustomImageUrl(key);
+      setCustomImagePreview(image.original);
+      setImageType("CUSTOM");
+      toast.success("Image uploaded successfully!");
+    } catch (error) {
+      toast.error("Failed to upload image");
+    } finally {
+      setUploadingImage(false);
+    }
+  };
+
+  const handleClear = () => {
+    if (existingNotification) {
+      deleteMutation.mutate();
+    } else {
+      form.reset();
+      setImageType(null);
+      setCustomImageUrl(null);
+      setCustomImagePreview(null);
+    }
+  };
+
+  const onSubmit = (data: NotificationFormData) => {
+    saveMutation.mutate(data);
+  };
+
+  const titleValue = form.watch("title");
+  const bodyValue = form.watch("body");
+
+  if (isLoading) {
+    return (
+      <div className="w-full my-4 h-[calc(100vh-40px)] bg-[#F5F5F5] dark:bg-[#181818] rounded-l-2xl border border-dashed flex items-center justify-center">
+        <p className="text-gray-500">Loading...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full my-4 h-[calc(100vh-40px)] bg-[#F5F5F5] dark:bg-[#181818] rounded-l-2xl border border-dashed overflow-y-auto">
+      <div className="p-4">
+        <Pecha.Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <Pecha.FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <Pecha.FormItem>
+                  <Pecha.FormLabel>Title</Pecha.FormLabel>
+                  <Pecha.FormControl>
+                    <Pecha.Input
+                      {...field}
+                      placeholder="What's the day about?"
+                      disabled={!isEditable}
+                      maxLength={40}
+                    />
+                  </Pecha.FormControl>
+                  <div className="flex justify-end text-xs text-gray-500">
+                    {titleValue.length} / 40
+                  </div>
+                  <Pecha.FormMessage />
+                </Pecha.FormItem>
+              )}
+            />
+
+            <Pecha.FormField
+              control={form.control}
+              name="body"
+              render={({ field }) => (
+                <Pecha.FormItem>
+                  <Pecha.FormLabel>Body</Pecha.FormLabel>
+                  <Pecha.FormControl>
+                    <Pecha.Textarea
+                      {...field}
+                      placeholder="Why open the app today?"
+                      disabled={!isEditable}
+                      maxLength={180}
+                      rows={4}
+                    />
+                  </Pecha.FormControl>
+                  <div className="flex justify-end text-xs text-gray-500">
+                    {bodyValue.length} / 180
+                  </div>
+                  <Pecha.FormMessage />
+                </Pecha.FormItem>
+              )}
+            />
+
+            <div className="space-y-3">
+              <Pecha.FormLabel>Image</Pecha.FormLabel>
+
+              <Pecha.RadioGroup
+                value={imageType || ""}
+                onValueChange={(value) =>
+                  setImageType(
+                    value === "" ? null : (value as "PLAN" | "CUSTOM"),
+                  )
+                }
+                disabled={!isEditable}
+              >
+                <div className="flex items-center space-x-3 border border-gray-300 dark:border-input rounded-md p-4">
+                  <Pecha.RadioGroupItem value="CUSTOM" id="custom" />
+                  <label
+                    htmlFor="custom"
+                    className="flex-1 cursor-pointer flex items-center gap-3"
+                  >
+                    <div className="flex items-center justify-center w-12 h-12 border-2 border-dashed border-gray-300 dark:border-input rounded">
+                      {customImagePreview ? (
+                        <img
+                          src={customImagePreview}
+                          alt="Custom"
+                          className="w-full h-full object-cover rounded"
+                        />
+                      ) : (
+                        <MdOutlineImage className="w-6 h-6 text-gray-400" />
+                      )}
+                    </div>
+                    <div className="flex-1">
+                      <p className="font-medium">Custom</p>
+                      <p className="text-xs text-gray-500">
+                        Up to 5 MB. PNG, JPG, JPEG or WebP
+                      </p>
+                      <p className="text-xs text-gray-500">
+                        Best in 3:4 ratio (cropping available)
+                      </p>
+                    </div>
+                    {isEditable && (
+                      <label className="cursor-pointer">
+                        <input
+                          type="file"
+                          accept="image/png,image/jpg,image/jpeg,image/webp"
+                          onChange={handleImageUpload}
+                          className="hidden"
+                          disabled={uploadingImage}
+                        />
+                        <Pecha.Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          disabled={uploadingImage}
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.currentTarget.previousElementSibling?.dispatchEvent(
+                              new MouseEvent("click", { bubbles: true }),
+                            );
+                          }}
+                        >
+                          {uploadingImage ? "Uploading..." : "Upload"}
+                        </Pecha.Button>
+                      </label>
+                    )}
+                  </label>
+                </div>
+
+                <div className="flex items-center space-x-3 border border-gray-300 dark:border-input rounded-md p-4">
+                  <Pecha.RadioGroupItem value="PLAN" id="plan" />
+                  <label
+                    htmlFor="plan"
+                    className="flex-1 cursor-pointer flex items-center gap-3"
+                  >
+                    <div className="flex items-center justify-center w-12 h-12 border border-gray-300 dark:border-input rounded overflow-hidden bg-gray-100 dark:bg-gray-800">
+                      {planCoverImage ? (
+                        <img
+                          src={planCoverImage}
+                          alt="Plan cover"
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <MdOutlineImage className="w-6 h-6 text-gray-400" />
+                      )}
+                    </div>
+                    <div>
+                      <p className="font-medium">Use plan cover</p>
+                    </div>
+                  </label>
+                </div>
+
+                <div className="flex items-center space-x-3 border border-gray-300 dark:border-input rounded-md p-4">
+                  <Pecha.RadioGroupItem value="" id="no-image" />
+                  <label htmlFor="no-image" className="flex-1 cursor-pointer">
+                    <p className="font-medium">No image</p>
+                  </label>
+                </div>
+              </Pecha.RadioGroup>
+            </div>
+
+            <div className="flex gap-3 pt-4">
+              <Pecha.Button
+                type="button"
+                variant="outline"
+                onClick={handleClear}
+                disabled={
+                  !isEditable ||
+                  saveMutation.isPending ||
+                  deleteMutation.isPending
+                }
+              >
+                Clear
+              </Pecha.Button>
+
+              <Pecha.Button
+                type="submit"
+                variant="destructive"
+                disabled={
+                  !isEditable ||
+                  saveMutation.isPending ||
+                  deleteMutation.isPending
+                }
+              >
+                {saveMutation.isPending
+                  ? "Saving..."
+                  : existingNotification
+                    ? "Update"
+                    : "Save"}
+              </Pecha.Button>
+            </div>
+          </form>
+        </Pecha.Form>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/routes/task/components/view/TaskForm.test.tsx b/src/components/routes/task/components/view/TaskForm.test.tsx
index 34090439..0eb6cdd2 100644
--- a/src/components/routes/task/components/view/TaskForm.test.tsx
+++ b/src/components/routes/task/components/view/TaskForm.test.tsx
@@ -223,7 +223,7 @@ describe("TaskForm Component", () => {
 
   it("renders task form with title input", async () => {
     renderWithProviders(<TaskForm selectedDay={1} onCancel={mockOnCancel} />);
-    expect(screen.getByText("Add Task")).toBeInTheDocument();
+    expect(screen.getAllByText("Add Task").length).toBeGreaterThan(0);
     expect(screen.getByPlaceholderText("Task Title")).toBeInTheDocument();
   });
 
diff --git a/src/components/routes/task/components/view/TaskForm.tsx b/src/components/routes/task/components/view/TaskForm.tsx
index e243ee08..6fa39d08 100644
--- a/src/components/routes/task/components/view/TaskForm.tsx
+++ b/src/components/routes/task/components/view/TaskForm.tsx
@@ -22,6 +22,13 @@ import {
   type SubTask,
 } from "@/components/ui/molecules/subtask-card/SubTaskCard";
 import DaySelector from "@/components/ui/molecules/day-selector/DaySelector";
+import {
+  buildSubTaskTimestampFields,
+  mapApiSubtaskTimestamps,
+  validateSubTaskTimestamps,
+} from "@/components/ui/molecules/subtask-card/subtaskTimestamps";
+import { EditorTabSwitcher } from "./EditorTabSwitcher";
+import { NotificationForm } from "./NotificationForm";
 
 interface TaskFormProps {
   selectedDay: number;
@@ -52,6 +59,7 @@ const TaskForm = ({
   const formValues = form.watch();
   const isEditMode = Boolean(editingTask);
   const [imageUploadError, setImageUploadError] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<"task" | "notification">("task");
 
   const currentPlan = queryClient.getQueryData<any>(["planDetails", planId]);
   const currentDayData = currentPlan?.days?.find(
@@ -85,7 +93,9 @@ const TaskForm = ({
             source_text_id: subTask.source_text_id || null,
             pecha_segment_id: subTask.pecha_segment_id || null,
             segment_ids: subTask.segment_ids || null,
+            segment_numbers: subTask.segment_numbers || null,
           }),
+          ...buildSubTaskTimestampFields(subTask, false),
         }));
         await createSubTasks(taskResponse.id, subTasksPayload);
       }
@@ -118,7 +128,9 @@ const TaskForm = ({
           source_text_id: subTask.source_text_id || null,
           pecha_segment_id: subTask.pecha_segment_id || null,
           segment_ids: subTask.segment_ids || null,
+          segment_numbers: subTask.segment_numbers || null,
         }),
+        ...buildSubTaskTimestampFields(subTask, true),
       }));
       await updateSubTasks(editingTask.id, subTasksPayload);
     },
@@ -156,6 +168,14 @@ const TaskForm = ({
     },
   });
 
+  useEffect(() => {
+    if (selectedDay && !isEditMode) {
+      // Reset form when day changes (only in create mode, not edit mode)
+      setSubTasks([]);
+      form.reset();
+    }
+  }, [selectedDay, isEditMode, form]);
+
   useEffect(() => {
     if (editingTask && taskDetails) {
       form.setValue("title", editingTask.title);
@@ -163,6 +183,15 @@ const TaskForm = ({
         (a: { display_order: number }, b: { display_order: number }) =>
           a.display_order - b.display_order,
       );
+      const timestamps = (data: {
+        start_ms?: number | null;
+        end_ms?: number | null;
+        audio_url?: string | null;
+      }) => ({
+        ...mapApiSubtaskTimestamps(data),
+        audio_url: data.audio_url ?? null,
+      });
+
       const subTasksData: SubTask[] = sorted.map((data: any) => {
         switch (data.content_type) {
           case "VIDEO":
@@ -171,18 +200,21 @@ const TaskForm = ({
               content_type: "VIDEO" as const,
               content: data.content,
               duration: data.duration,
+              ...timestamps(data),
             };
           case "TEXT":
             return {
               id: data.id,
               content_type: "TEXT" as const,
               content: data.content,
+              ...timestamps(data),
             };
           case "AUDIO":
             return {
               id: data.id,
               content_type: "AUDIO" as const,
               content: data.content,
+              ...timestamps(data),
             };
           case "IMAGE":
             return {
@@ -190,6 +222,7 @@ const TaskForm = ({
               content_type: "IMAGE" as const,
               imagePreview: data.content,
               content: data.image_url,
+              ...timestamps(data),
             };
           case "SOURCE_REFERENCE":
             return {
@@ -199,12 +232,15 @@ const TaskForm = ({
               source_text_id: data.source_text_id || null,
               pecha_segment_id: data.pecha_segment_id || null,
               segment_ids: data.segment_ids || null,
+              segment_numbers: data.segment_numbers || null,
+              ...timestamps(data),
             };
           default:
             return {
               id: data.id,
               content_type: "TEXT" as const,
               content: data.content,
+              ...timestamps(data),
             };
         }
       });
@@ -217,6 +253,7 @@ const TaskForm = ({
     pecha_segment_id: string;
     text_id: string;
     segment_ids: string[];
+    segment_numbers?: number[];
   }
 
   const handleAddSubTask = (content_type: any, sourceData?: SourceData) => {
@@ -261,6 +298,7 @@ const TaskForm = ({
           source_text_id: sourceData?.text_id || null,
           pecha_segment_id: sourceData?.pecha_segment_id || null,
           segment_ids: sourceData?.segment_ids || null,
+          segment_numbers: sourceData?.segment_numbers || null,
         };
         break;
     }
@@ -322,6 +360,15 @@ const TaskForm = ({
   };
 
   const onSubmit = async (data: TaskFormData) => {
+    const timestampError = validateSubTaskTimestamps(
+      subTasks,
+      currentDayData?.audio_duration_ms,
+    );
+    if (timestampError) {
+      toast.error(timestampError);
+      return;
+    }
+
     const taskData: any = {
       plan_id: planId!,
       day_id: currentDayData!.id,
@@ -336,88 +383,111 @@ const TaskForm = ({
   };
 
   return (
-    <div className="w-full my-4 h-[calc(100vh-40px)] bg-[#F5F5F5] dark:bg-[#181818] rounded-l-2xl border border-dashed xwspace-y-4 overflow-y-auto">
-      <h2 className="text-xl font-semibold p-4">
-        {isEditMode ? "Edit Task" : "Add Task"}
-      </h2>
-      <Pecha.Form {...form}>
-        <form className="space-y-6" onSubmit={form.handleSubmit(onSubmit)}>
-          <div className="flex w-full p-4 lg:w-2/3 justify-between items-center gap-4">
-            <TaskTitleField
-              isEditMode={isEditMode}
-              isTitleEditing={isTitleEditing}
-              formValue={formValues.title}
-              control={form.control}
-              onEdit={() => isEditable && setIsTitleEditing(true)}
-              onSave={handleSaveTitle}
-              onCancel={() => setIsTitleEditing(false)}
-              disabled={!isEditable}
-            />
-            {isEditMode && (
-              <DaySelector selectedDay={selectedDay} taskId={editingTask?.id} />
-            )}
-          </div>
-
-          <div className="border-b w-full border-dashed border-gray-300 dark:border-input" />
-          <div className=" px-4 flex items-center">
-            <h2 className="text-xl font-semibold">Add Subtask</h2>
-          </div>
-
-          {subTasks.length > 0 && (
-            <div className="space-y-4 p-4 w-full lg:w-2/3">
-              {subTasks.map((subTask, index) => (
-                <SubTaskCard
-                  key={index}
-                  subTask={subTask}
-                  index={index}
-                  onUpdate={updateSubTask}
-                  onRemove={removeSubTask}
-                  onImageUpload={handleSubTaskImageUpload}
-                  onRemoveImage={handleRemoveSubTaskImage}
+    <div className="w-full my-4 h-[calc(100vh-40px)] bg-[#F5F5F5] dark:bg-[#181818] rounded-l-2xl border border-dashed overflow-hidden flex flex-col">
+      <EditorTabSwitcher activeTab={activeTab} onTabChange={setActiveTab} />
+
+      {activeTab === "notification" ? (
+        <NotificationForm
+          dayId={currentDayData?.id || ""}
+          planId={planId || ""}
+          planCoverImage={currentPlan?.cover_image}
+          isEditable={isEditable}
+        />
+      ) : (
+        <div className="overflow-y-auto flex-1">
+          <h2 className="text-xl font-semibold p-4">
+            {isEditMode ? "Edit Task" : "Add Task"}
+          </h2>
+
+          <Pecha.Form {...form}>
+            <form className="space-y-6" onSubmit={form.handleSubmit(onSubmit)}>
+              <div className="flex w-full p-4 lg:w-2/3 justify-between items-center gap-4">
+                <TaskTitleField
+                  isEditMode={isEditMode}
+                  isTitleEditing={isTitleEditing}
+                  formValue={formValues.title}
+                  control={form.control}
+                  onEdit={() => isEditable && setIsTitleEditing(true)}
+                  onSave={handleSaveTitle}
+                  onCancel={() => setIsTitleEditing(false)}
+                  disabled={!isEditable}
                 />
-              ))}
-            </div>
-          )}
-          {imageUploadError && (
-            <div className="text-red-500 text-sm ml-4">{imageUploadError}</div>
-          )}
-          {isEditable && (
-            <ContentTypeSelector onSelectType={handleAddSubTask} />
-          )}
-
-          <div className="p-4 flex gap-3">
-            <Activity mode={isEditMode ? "visible" : "hidden"}>
-              <Pecha.Button
-                variant="outline"
-                type="button"
-                onClick={() => clearFormData()}
-              >
-                Cancel
-              </Pecha.Button>
-            </Activity>
-
-            <Pecha.Button
-              variant="destructive"
-              className="cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
-              type="submit"
-              disabled={
-                !isEditable ||
-                createTaskMutation.isPending ||
-                updateTaskMutation.isPending ||
-                subTasks.length === 0
-              }
-            >
-              {createTaskMutation.isPending || updateTaskMutation.isPending
-                ? isEditMode
-                  ? "Updating..."
-                  : "Creating..."
-                : isEditMode
-                  ? "Update"
-                  : "Submit"}
-            </Pecha.Button>
-          </div>
-        </form>
-      </Pecha.Form>
+                {isEditMode && (
+                  <DaySelector
+                    selectedDay={selectedDay}
+                    taskId={editingTask?.id}
+                  />
+                )}
+              </div>
+
+              <div className="border-b w-full border-dashed border-gray-300 dark:border-input" />
+              <div className=" px-4 flex items-center">
+                <h2 className="text-xl font-semibold">Add Subtask</h2>
+              </div>
+
+              {subTasks.length > 0 && (
+                <div className="space-y-4 p-4 w-full lg:w-2/3">
+                  {subTasks.map((subTask, index) => (
+                    <SubTaskCard
+                      key={index}
+                      subTask={subTask}
+                      index={index}
+                      onUpdate={updateSubTask}
+                      onRemove={removeSubTask}
+                      onImageUpload={handleSubTaskImageUpload}
+                      onRemoveImage={handleRemoveSubTaskImage}
+                      dayAudioUrl={currentDayData?.audio_url}
+                      dayAudioDurationMs={currentDayData?.audio_duration_ms}
+                      planLanguage={currentPlan?.language}
+                      taskId={editingTask?.id}
+                    />
+                  ))}
+                </div>
+              )}
+              {imageUploadError && (
+                <div className="text-red-500 text-sm ml-4">
+                  {imageUploadError}
+                </div>
+              )}
+              {isEditable && (
+                <ContentTypeSelector onSelectType={handleAddSubTask} />
+              )}
+
+              <div className="p-4 flex gap-3">
+                <Activity mode={isEditMode ? "visible" : "hidden"}>
+                  <Pecha.Button
+                    variant="outline"
+                    type="button"
+                    onClick={() => clearFormData()}
+                  >
+                    Cancel
+                  </Pecha.Button>
+                </Activity>
+
+                <Pecha.Button
+                  variant="destructive"
+                  className="cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+                  type="submit"
+                  disabled={
+                    !isEditable ||
+                    createTaskMutation.isPending ||
+                    updateTaskMutation.isPending ||
+                    subTasks.length === 0
+                  }
+                >
+                  {createTaskMutation.isPending || updateTaskMutation.isPending
+                    ? isEditMode
+                      ? "Updating..."
+                      : "Creating..."
+                    : isEditMode
+                      ? "Update"
+                      : "Submit"}
+                </Pecha.Button>
+              </div>
+            </form>
+          </Pecha.Form>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/routes/task/components/view/TaskView.test.tsx b/src/components/routes/task/components/view/TaskView.test.tsx
index 21f1502c..542104e8 100644
--- a/src/components/routes/task/components/view/TaskView.test.tsx
+++ b/src/components/routes/task/components/view/TaskView.test.tsx
@@ -111,4 +111,133 @@ describe("TaskView Component", () => {
     });
     expect(screen.getByText("Valid content")).toBeInTheDocument();
   });
+
+  it("renders subtask audio when audio_url is present without timestamps", async () => {
+    const mockTaskWithSubtaskAudio = {
+      id: "task-123",
+      title: "Task With Subtask Audio",
+      subtasks: [
+        {
+          id: "subtask-audio",
+          content: "Text with generated audio",
+          content_type: "TEXT",
+          audio_url: "https://example.com/subtask-audio.mp3",
+        },
+      ],
+    };
+    vi.mocked(axiosInstance.get).mockResolvedValueOnce({
+      data: mockTaskWithSubtaskAudio,
+    });
+    const { container } = renderWithProviders(
+      <TaskView onEditTask={mockOnEditTask} taskId="task-123" />,
+    );
+    await waitFor(() => {
+      expect(screen.getByText("Task With Subtask Audio")).toBeInTheDocument();
+    });
+    const audio = container.querySelector(
+      'audio[src="https://example.com/subtask-audio.mp3"]',
+    );
+    expect(audio).toBeInTheDocument();
+    expect(screen.queryByText(/Segment:/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Timeline:/)).not.toBeInTheDocument();
+  });
+
+  it("renders day audio segment player when timestamps and dayAudioUrl are present", async () => {
+    const mockTaskWithTimestamps = {
+      id: "task-123",
+      title: "Task With Timestamps",
+      subtasks: [
+        {
+          id: "subtask-timestamped",
+          content: "Timestamped text",
+          content_type: "TEXT",
+          start_ms: 60_000,
+          end_ms: 150_000,
+        },
+      ],
+    };
+    vi.mocked(axiosInstance.get).mockResolvedValueOnce({
+      data: mockTaskWithTimestamps,
+    });
+    renderWithProviders(
+      <TaskView
+        onEditTask={mockOnEditTask}
+        taskId="task-123"
+        dayAudioUrl="https://example.com/day-audio.mp3"
+      />,
+    );
+    await waitFor(() => {
+      expect(screen.getByText("Segment: 1:00 – 2:30")).toBeInTheDocument();
+    });
+    expect(
+      document.querySelector('audio[src="https://example.com/day-audio.mp3"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders timeline text when timestamps exist without audio sources", async () => {
+    const mockTaskWithTimestamps = {
+      id: "task-123",
+      title: "Task With Timeline Only",
+      subtasks: [
+        {
+          id: "subtask-timeline",
+          content: "Timeline only text",
+          content_type: "TEXT",
+          start_ms: 30_000,
+          end_ms: 90_000,
+        },
+      ],
+    };
+    vi.mocked(axiosInstance.get).mockResolvedValueOnce({
+      data: mockTaskWithTimestamps,
+    });
+    renderWithProviders(
+      <TaskView onEditTask={mockOnEditTask} taskId="task-123" />,
+    );
+    await waitFor(() => {
+      expect(screen.getByText("Timeline: 0:30 – 1:30")).toBeInTheDocument();
+    });
+    expect(document.querySelector("audio")).not.toBeInTheDocument();
+  });
+
+  it("prefers subtask audio_url over day audio timestamps", async () => {
+    const mockTaskWithBoth = {
+      id: "task-123",
+      title: "Task With Both Audio Sources",
+      subtasks: [
+        {
+          id: "subtask-both",
+          content: "Text with both audio sources",
+          content_type: "TEXT",
+          audio_url: "https://example.com/subtask-audio.mp3",
+          start_ms: 60_000,
+          end_ms: 150_000,
+        },
+      ],
+    };
+    vi.mocked(axiosInstance.get).mockResolvedValueOnce({
+      data: mockTaskWithBoth,
+    });
+    const { container } = renderWithProviders(
+      <TaskView
+        onEditTask={mockOnEditTask}
+        taskId="task-123"
+        dayAudioUrl="https://example.com/day-audio.mp3"
+      />,
+    );
+    await waitFor(() => {
+      expect(
+        screen.getByText("Task With Both Audio Sources"),
+      ).toBeInTheDocument();
+    });
+    expect(
+      container.querySelector(
+        'audio[src="https://example.com/subtask-audio.mp3"]',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('audio[src="https://example.com/day-audio.mp3"]'),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText(/Segment:/)).not.toBeInTheDocument();
+  });
 });
diff --git a/src/components/routes/task/components/view/TaskView.tsx b/src/components/routes/task/components/view/TaskView.tsx
index 1a0a67a8..6619d309 100644
--- a/src/components/routes/task/components/view/TaskView.tsx
+++ b/src/components/routes/task/components/view/TaskView.tsx
@@ -1,5 +1,9 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { getPreset } from "../../api/presetApi";
+import { fetchLanguageVersions } from "@/components/api/searchApi";
 import { Pecha } from "@/components/ui/shadimport";
+import { useState } from "react";
+import { VersionSelectorModal } from "@/components/ui/molecules/version-selector/VersionSelectorModal";
 import axiosInstance from "@/config/axios-config";
 import {
   ContentIcon,
@@ -13,6 +17,8 @@ import { SortableList, SortableItem } from "@/components/ui/atoms/sortable";
 import { PiDotsSixVertical } from "react-icons/pi";
 import { useSubtaskReorder } from "../../hooks/useSubtaskReorder";
 import { FaPen } from "react-icons/fa";
+import { formatMs } from "@/lib/utils";
+import { AudioSegmentPlayer } from "@/components/ui/molecules/audio-segment-player/AudioSegmentPlayer";
 
 type ContentType = "TEXT" | "IMAGE" | "AUDIO" | "VIDEO" | "SOURCE_REFERENCE";
 
@@ -20,6 +26,7 @@ interface TaskViewProps {
   taskId: string;
   onEditTask: (task: any) => void;
   isEditable?: boolean;
+  dayAudioUrl?: string | null;
 }
 
 const fetchTaskDetails = async (task_id: string) => {
@@ -53,36 +60,165 @@ const SubtaskContent = ({
   }
 };
 
+const SourceReferenceWithVersion = ({ subtask }: { subtask: any }) => {
+  const { data: preset } = useQuery({
+    queryKey: ["preset", subtask.id],
+    queryFn: () => getPreset(subtask.id),
+    enabled: !!subtask.id,
+  });
+
+  const { data: versionsData } = useQuery({
+    queryKey: ["languageVersions", subtask.source_text_id, preset?.language],
+    queryFn: () =>
+      fetchLanguageVersions(subtask.source_text_id, preset!.language),
+    enabled: !!preset && !!subtask.source_text_id && !!preset.language,
+  });
+
+  const versionTitle = versionsData?.available_versions?.find(
+    (v: any) => v.id === preset?.version_id,
+  )?.title;
+
+  return (
+    <div className="relative">
+      <SourceReferenceContent
+        content={subtask.content}
+        segmentNumbers={subtask.segment_numbers}
+      />
+      {preset && (
+        <div className="relative mt-2 ml-4">
+          {/* Connecting line */}
+          <div className="absolute -top-2 left-0 w-px h-2 bg-blue-400 dark:bg-blue-500" />
+          <div className="absolute top-0 left-0 w-3 h-px bg-blue-400 dark:bg-blue-500" />
+
+          {/* Version info box */}
+          <div className="ml-4 flex items-center gap-2 px-3 py-2 bg-blue-50 dark:bg-blue-900/20 rounded-md border border-blue-200 dark:border-blue-800">
+            <span className="text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase tracking-wide">
+              {preset.language}
+            </span>
+            <span className="text-xs text-gray-500 dark:text-gray-400">•</span>
+            <span
+              className="text-sm text-gray-700 dark:text-gray-300 truncate max-w-[300px]"
+              title={versionTitle || preset.version_id}
+            >
+              {versionTitle || preset.version_id.substring(0, 8) + "..."}
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
 const SubtaskCard = ({
   subtask,
   listeners,
   isEditable,
+  dayAudioUrl,
 }: {
   subtask: any;
   listeners?: any;
   isEditable?: boolean;
+  dayAudioUrl?: string | null;
 }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const queryClient = useQueryClient();
+
+  const { data: preset } = useQuery({
+    queryKey: ["preset", subtask.id],
+    queryFn: () => getPreset(subtask.id),
+    enabled: !!subtask.id && subtask.content_type === "SOURCE_REFERENCE",
+  });
+
   return (
-    <div
-      className={`border rounded-xl bg-[#ffffff] dark:bg-[#161616] border-gray-300 dark:border-input p-2 space-y-2`}
-    >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center border w-fit bg-[#F7F7F7] dark:bg-sidebar-secondary px-2 py-1 text-sm rounded-md border-dashed gap-2">
-          <ContentIcon type={subtask.content_type} /> {subtask.content_type}
+    <>
+      <div
+        className={`border rounded-xl bg-[#ffffff] dark:bg-[#161616] border-gray-300 dark:border-input p-2 space-y-2`}
+      >
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="flex items-center border w-fit bg-[#F7F7F7] dark:bg-sidebar-secondary px-2 py-1 text-sm rounded-md border-dashed gap-2">
+              <ContentIcon type={subtask.content_type} /> {subtask.content_type}
+            </div>
+            {subtask.content_type === "SOURCE_REFERENCE" &&
+              !preset &&
+              subtask.source_text_id && (
+                <Pecha.Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setIsModalOpen(true)}
+                  className="text-xs"
+                >
+                  Add Version
+                </Pecha.Button>
+              )}
+          </div>
+          {listeners && isEditable && (
+            <PiDotsSixVertical
+              className="w-5 h-5 text-gray-400 dark:text-muted-foreground cursor-grab active:cursor-grabbing"
+              {...listeners}
+            />
+          )}
         </div>
-        {listeners && isEditable && (
-          <PiDotsSixVertical
-            className="w-5 h-5 text-gray-400 dark:text-muted-foreground cursor-grab active:cursor-grabbing"
-            {...listeners}
+        {subtask.content_type === "SOURCE_REFERENCE" ? (
+          <SourceReferenceWithVersion subtask={subtask} />
+        ) : (
+          <SubtaskContent
+            type={subtask.content_type}
+            content={subtask.content}
           />
         )}
+        {subtask.audio_url ? (
+          <div className="border-t border-dashed pt-2">
+            <audio
+              controls
+              src={subtask.audio_url}
+              className="w-full"
+              preload="metadata"
+            />
+          </div>
+        ) : (
+          subtask.start_ms != null &&
+          subtask.end_ms != null &&
+          (dayAudioUrl ? (
+            <AudioSegmentPlayer
+              audioUrl={dayAudioUrl}
+              startMs={subtask.start_ms}
+              endMs={subtask.end_ms}
+            />
+          ) : (
+            <p className="text-xs text-muted-foreground border-t border-dashed pt-2">
+              Timeline: {formatMs(subtask.start_ms)} –{" "}
+              {formatMs(subtask.end_ms)}
+            </p>
+          ))
+        )}
       </div>
-      <SubtaskContent type={subtask.content_type} content={subtask.content} />
-    </div>
+
+      {subtask.content_type === "SOURCE_REFERENCE" &&
+        subtask.source_text_id && (
+          <VersionSelectorModal
+            isOpen={isModalOpen}
+            onOpenChange={setIsModalOpen}
+            textId={subtask.source_text_id}
+            subtaskId={subtask.id}
+            onSuccess={() => {
+              setIsModalOpen(false);
+              queryClient.invalidateQueries({
+                queryKey: ["preset", subtask.id],
+              });
+            }}
+          />
+        )}
+    </>
   );
 };
 
-const TaskView = ({ taskId, onEditTask, isEditable }: TaskViewProps) => {
+const TaskView = ({
+  taskId,
+  onEditTask,
+  isEditable,
+  dayAudioUrl,
+}: TaskViewProps) => {
   const { data: taskDetails, isLoading } = useQuery({
     queryKey: ["taskDetails", taskId],
     queryFn: () => fetchTaskDetails(taskId),
@@ -149,6 +285,7 @@ const TaskView = ({ taskId, onEditTask, isEditable }: TaskViewProps) => {
                       subtask={subtask}
                       listeners={listeners}
                       isEditable={isEditable}
+                      dayAudioUrl={dayAudioUrl}
                     />
                   )}
                 </SortableItem>
diff --git a/src/components/routes/task/hooks/usePlanMutations.ts b/src/components/routes/task/hooks/usePlanMutations.ts
index b8ac7a0c..8999671c 100644
--- a/src/components/routes/task/hooks/usePlanMutations.ts
+++ b/src/components/routes/task/hooks/usePlanMutations.ts
@@ -1,6 +1,11 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
-import { createNewDay, deleteDay, deleteTask } from "../api/planApi";
+import {
+  createNewDays,
+  deleteDays,
+  deleteTask,
+  type CreateDaysRequest,
+} from "../api/planApi";
 
 export const usePlanMutations = (plan_id: string | undefined) => {
   const queryClient = useQueryClient();
@@ -21,25 +26,27 @@ export const usePlanMutations = (plan_id: string | undefined) => {
     },
   });
 
-  const deleteDayMutation = useMutation({
-    mutationFn: (day_id: string) => deleteDay(plan_id!, day_id),
-    onSuccess: () => {
-      toast.success("Day deleted successfully!", {
-        description: "The day has been deleted.",
-      });
+  const deleteDaysMutation = useMutation({
+    mutationFn: (day_ids: string[]) => deleteDays(plan_id!, day_ids),
+    onSuccess: (_data, day_ids) => {
+      const count = day_ids.length;
+      toast.success(
+        count === 1 ? "Day deleted successfully!" : `${count} days deleted.`,
+        { description: "Remaining days have been renumbered." },
+      );
       queryClient.refetchQueries({ queryKey: ["planDetails", plan_id] });
     },
     onError: (error: any) => {
-      toast.error("Failed to delete day", {
+      toast.error("Failed to delete day(s)", {
         description: error.response?.data?.detail || "Something went wrong",
       });
     },
   });
 
-  const createNewDayMutation = useMutation({
-    mutationFn: () => createNewDay(plan_id!),
+  const createNewDaysMutation = useMutation({
+    mutationFn: (body?: CreateDaysRequest) => createNewDays(plan_id!, body),
     onError: (error: any) => {
-      toast.error("Failed to create new day", {
+      toast.error("Failed to create days", {
         description: error.response?.data?.detail || "Something went wrong",
       });
     },
@@ -47,7 +54,7 @@ export const usePlanMutations = (plan_id: string | undefined) => {
 
   return {
     deleteTask: deleteTaskMutation,
-    deleteDay: deleteDayMutation,
-    createNewDay: createNewDayMutation,
+    deleteDay: deleteDaysMutation,
+    createNewDay: createNewDaysMutation,
   };
 };
diff --git a/src/components/routes/verse-of-day/VerseOfDay.tsx b/src/components/routes/verse-of-day/VerseOfDay.tsx
new file mode 100644
index 00000000..5fa46ab3
--- /dev/null
+++ b/src/components/routes/verse-of-day/VerseOfDay.tsx
@@ -0,0 +1,202 @@
+import { useState } from "react";
+import { IoMdAdd, IoMdSearch } from "react-icons/io";
+import { useDebounce } from "use-debounce";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { Button } from "@/components/ui/atoms/button";
+import AuthButton from "@/components/ui/molecules/auth-button/AuthButton";
+import { Pagination } from "@/components/ui/molecules/pagination/Pagination";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import {
+  fetchVerseOfDayList,
+  deleteVerseOfDay,
+  type SortOrder,
+  type VerseOfDayItem,
+} from "./api/verseOfDayApi";
+import VerseOfDayList from "./VerseOfDayList";
+import VerseOfDayFormDialog from "./VerseOfDayFormDialog";
+
+const PAGE_SIZE = 10;
+
+const VerseOfDay = () => {
+  const [search, setSearch] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
+  const [debouncedSearch] = useDebounce(search, 500);
+  const [formOpen, setFormOpen] = useState(false);
+  const [editingItem, setEditingItem] = useState<VerseOfDayItem | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<VerseOfDayItem | null>(null);
+
+  const queryClient = useQueryClient();
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["verse-of-day-list", currentPage, debouncedSearch, sortOrder],
+    queryFn: () =>
+      fetchVerseOfDayList({
+        page: currentPage,
+        limit: PAGE_SIZE,
+        search: debouncedSearch,
+        sortOrder,
+      }),
+    refetchOnWindowFocus: false,
+    retry: false,
+  });
+
+  const invalidateVerses = () => {
+    queryClient.invalidateQueries({ queryKey: ["verse-of-day-list"] });
+  };
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteVerseOfDay,
+    onSuccess: () => {
+      toast.success("Verse of Day deleted successfully!");
+      setDeleteTarget(null);
+      if (data?.verses.length === 1 && currentPage > 1) {
+        setCurrentPage(currentPage - 1);
+      }
+      invalidateVerses();
+    },
+    onError: (err) => {
+      toast.error(getApiErrorMessage(err));
+      setDeleteTarget(null);
+    },
+  });
+
+  const handleOpenCreate = () => {
+    setEditingItem(null);
+    setFormOpen(true);
+  };
+
+  const handleOpenEdit = (item: VerseOfDayItem) => {
+    setEditingItem(item);
+    setFormOpen(true);
+  };
+
+  const handleFormSuccess = () => {
+    setFormOpen(false);
+    setEditingItem(null);
+    invalidateVerses();
+  };
+
+  const handleToggleSort = () => {
+    setSortOrder((prev) => (prev === "desc" ? "asc" : "desc"));
+    if (currentPage !== 1) setCurrentPage(1);
+  };
+
+  const verses = data?.verses ?? [];
+
+  const total = data?.total ?? 0;
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+
+  return (
+    <div className="flex flex-col h-screen overflow-hidden bg-[#F5F5F5] dark:bg-[#181818] font-dynamic">
+      <div className="px-6 py-4 flex items-center justify-between border-b border-gray-200 dark:border-[#313132] bg-white dark:bg-[#1E1E1E]">
+        <div className="flex items-center space-x-2">
+          <div className="border w-fit px-2 bg-white dark:bg-input/30 rounded-md border-gray-200 dark:border-[#313132] flex items-center">
+            <IoMdSearch className="w-4 h-4" />
+            <Pecha.Input
+              placeholder="Search verses..."
+              className="rounded-md border-none dark:bg-transparent px-4 shadow-none py-2"
+              value={search}
+              onChange={(e) => {
+                setSearch(e.target.value);
+                if (currentPage !== 1) setCurrentPage(1);
+              }}
+            />
+          </div>
+          <Button
+            variant="outline"
+            className="bg-gray-100 hover:bg-gray-200"
+            onClick={handleOpenCreate}
+          >
+            <IoMdAdd /> Add Verse
+          </Button>
+        </div>
+        <AuthButton />
+      </div>
+
+      <div className="flex-1 overflow-hidden px-6 py-4">
+        {error ? (
+          <p className="text-sm text-red-500 py-8">
+            Failed to load verses. {getApiErrorMessage(error)}
+          </p>
+        ) : verses.length === 0 && !isLoading ? (
+          <div className="flex flex-col h-full items-center justify-center">
+            <p className="text-base text-muted-foreground">No verses found</p>
+            <Button
+              variant="outline"
+              className="mt-2"
+              onClick={handleOpenCreate}
+            >
+              <IoMdAdd /> Add Verse
+            </Button>
+          </div>
+        ) : (
+          <div className="h-full overflow-auto">
+            <VerseOfDayList
+              verses={verses}
+              isLoading={isLoading}
+              sortOrder={sortOrder}
+              onToggleSort={handleToggleSort}
+              onEdit={handleOpenEdit}
+              onDelete={setDeleteTarget}
+            />
+          </div>
+        )}
+      </div>
+
+      {verses.length > 0 && (
+        <div className="border-t border-gray-200 dark:border-[#313132] px-6 py-4 bg-white dark:bg-[#1E1E1E]">
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={setCurrentPage}
+          />
+        </div>
+      )}
+
+      <VerseOfDayFormDialog
+        open={formOpen}
+        onOpenChange={(open: boolean) => {
+          setFormOpen(open);
+          if (!open) setEditingItem(null);
+        }}
+        editingItem={editingItem}
+        onSuccess={handleFormSuccess}
+        existingVerses={verses}
+      />
+
+      <Pecha.AlertDialog
+        open={!!deleteTarget}
+        onOpenChange={(open) => !open && setDeleteTarget(null)}
+      >
+        <Pecha.AlertDialogContent>
+          <Pecha.AlertDialogHeader>
+            <Pecha.AlertDialogTitle>Delete Verse of Day</Pecha.AlertDialogTitle>
+            <Pecha.AlertDialogDescription>
+              Are you sure you want to delete this verse? This action cannot be
+              undone.
+            </Pecha.AlertDialogDescription>
+          </Pecha.AlertDialogHeader>
+          <Pecha.AlertDialogFooter>
+            <Pecha.AlertDialogCancel disabled={deleteMutation.isPending}>
+              Cancel
+            </Pecha.AlertDialogCancel>
+            <Pecha.AlertDialogAction
+              className="bg-[#AD1B21] dark:text-white hover:bg-[#AD1B21]/90"
+              disabled={deleteMutation.isPending}
+              onClick={() =>
+                deleteTarget && deleteMutation.mutate(deleteTarget.id)
+              }
+            >
+              {deleteMutation.isPending ? "Deleting..." : "Delete"}
+            </Pecha.AlertDialogAction>
+          </Pecha.AlertDialogFooter>
+        </Pecha.AlertDialogContent>
+      </Pecha.AlertDialog>
+    </div>
+  );
+};
+
+export default VerseOfDay;
diff --git a/src/components/routes/verse-of-day/VerseOfDayButton.tsx b/src/components/routes/verse-of-day/VerseOfDayButton.tsx
new file mode 100644
index 00000000..7a1c8c21
--- /dev/null
+++ b/src/components/routes/verse-of-day/VerseOfDayButton.tsx
@@ -0,0 +1,27 @@
+import { IoBookOutline } from "react-icons/io5";
+import { Link } from "react-router-dom";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/atoms/tooltip";
+import { ROUTES } from "@/routes/paths";
+
+const VerseOfDayButton = () => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Link
+          to={ROUTES.verseOfDay}
+          className="border p-2 rounded-md text-zinc-400 dark:text-zinc-600 hover:text-black dark:hover:text-white transition-colors"
+          aria-label="Verse of Day"
+        >
+          <IoBookOutline className="w-4 h-4" />
+        </Link>
+      </TooltipTrigger>
+      <TooltipContent side="right">Verse of Day</TooltipContent>
+    </Tooltip>
+  );
+};
+
+export default VerseOfDayButton;
diff --git a/src/components/routes/verse-of-day/VerseOfDayForm.tsx b/src/components/routes/verse-of-day/VerseOfDayForm.tsx
new file mode 100644
index 00000000..e4347f48
--- /dev/null
+++ b/src/components/routes/verse-of-day/VerseOfDayForm.tsx
@@ -0,0 +1,446 @@
+import { useEffect, useState } from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { Textarea } from "@/components/ui/atoms/textarea";
+import { Button } from "@/components/ui/atoms/button";
+import { Calendar } from "@/components/ui/atoms/calendar";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import {
+  createVerseOfDay,
+  updateVerseOfDay,
+  type VerseOfDayPayload,
+  type VerseOfDayItem,
+} from "./api/verseOfDayApi";
+import { uploadImageToS3 } from "@/components/routes/task/api/taskApi";
+import ImageContentData from "@/components/ui/molecules/modals/image-upload/ImageContentData";
+import { IoMdAdd, IoMdClose } from "react-icons/io";
+import { FaCheck, FaChevronDown } from "react-icons/fa6";
+import { format, parse } from "date-fns";
+import {
+  fetchGroups,
+  pickGroupTitle,
+} from "@/components/routes/groups/api/groupsApi";
+
+interface VerseOfDayFormProps {
+  mode: "create" | "edit";
+  initialData?: VerseOfDayItem;
+  onSuccess: () => void;
+  onCancel: () => void;
+  existingVerses: VerseOfDayItem[];
+}
+
+type LanguageCode = "EN" | "BO" | "ZH" | "HI" | "NE" | "MN";
+
+const VerseOfDayForm = ({
+  mode,
+  initialData,
+  onSuccess,
+  onCancel,
+  existingVerses,
+}: VerseOfDayFormProps) => {
+  const [activeLanguage, setActiveLanguage] = useState<LanguageCode>("EN");
+  const [verses, setVerses] = useState({
+    en: "",
+    bo: "",
+    zh: "",
+    hi: "",
+    ne: "",
+    mn: "",
+  });
+  const [imageKey, setImageKey] = useState<string | null>(null);
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [isImageDialogOpen, setIsImageDialogOpen] = useState(false);
+  const [isImageUploading, setIsImageUploading] = useState(false);
+  const [groupId, setGroupId] = useState("");
+  const [date, setDate] = useState<Date | undefined>(new Date());
+  const [showCalendar, setShowCalendar] = useState(false);
+
+  useEffect(() => {
+    if (mode === "edit" && initialData) {
+      setVerses({
+        en: initialData.verses.en || "",
+        bo: initialData.verses.bo || "",
+        zh: initialData.verses.zh || "",
+        hi: initialData.verses.hi || "",
+        ne: initialData.verses.ne || "",
+        mn: initialData.verses.mn || "",
+      });
+      // Set image preview from existing data
+      setImageKey(null);
+      setImagePreview(initialData.image_url || null);
+      // Use group_id directly from the response
+      setGroupId(initialData.group_id || "");
+      setDate(parse(initialData.date, "yyyy-MM-dd", new Date()));
+    } else {
+      setActiveLanguage("EN");
+      setVerses({ en: "", bo: "", zh: "", hi: "", ne: "", mn: "" });
+      setImageKey(null);
+      setImagePreview(null);
+      setGroupId("");
+      setDate(new Date());
+    }
+  }, [mode, initialData]);
+
+  const createMutation = useMutation({
+    mutationFn: createVerseOfDay,
+    onSuccess: () => {
+      toast.success("Verse of Day created successfully!");
+      onSuccess();
+    },
+    onError: (err) => {
+      toast.error(getApiErrorMessage(err));
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, payload }: { id: string; payload: VerseOfDayPayload }) =>
+      updateVerseOfDay(id, payload),
+    onSuccess: () => {
+      toast.success("Verse of Day updated successfully!");
+      onSuccess();
+    },
+    onError: (err) => {
+      toast.error(getApiErrorMessage(err));
+    },
+  });
+
+  const handleImageUpload = async (file: File) => {
+    setIsImageUploading(true);
+    try {
+      const { image, key } = await uploadImageToS3(file, "");
+      setImagePreview(image.original);
+      setImageKey(key);
+      setIsImageDialogOpen(false);
+      toast.success("Image uploaded successfully!");
+    } catch (error: any) {
+      if (error?.response?.status === 413) {
+        toast.error("Failed to upload image", {
+          description: "File exceeds the maximum size of 1MB",
+        });
+      } else {
+        toast.error("Failed to upload image");
+      }
+    } finally {
+      setIsImageUploading(false);
+    }
+  };
+
+  const handleRemoveImage = () => {
+    setImageKey(null);
+    setImagePreview(null);
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (
+      !verses.en.trim() &&
+      !verses.bo.trim() &&
+      !verses.zh.trim() &&
+      !verses.hi.trim() &&
+      !verses.ne.trim() &&
+      !verses.mn.trim()
+    ) {
+      toast.error("At least one verse content is required");
+      return;
+    }
+
+    if (!groupId.trim()) {
+      toast.error("Please select a group");
+      return;
+    }
+
+    if (!date) {
+      toast.error("Date is required");
+      return;
+    }
+
+    // Check for duplicate date (only when creating or changing date in edit mode)
+    const selectedDate = format(date, "yyyy-MM-dd");
+    const isDuplicateDate = existingVerses.some((verse) => {
+      // When editing, exclude the current verse from the check
+      if (mode === "edit" && initialData && verse.id === initialData.id) {
+        return false;
+      }
+      return verse.date === selectedDate;
+    });
+
+    if (isDuplicateDate) {
+      toast.error(
+        `A verse already exists for ${format(date, "PPP")}. Please choose a different date.`,
+      );
+      return;
+    }
+
+    // For create, send all required fields
+    // For update, only send fields that have changed
+    if (mode === "edit" && initialData) {
+      const updatePayload: any = {
+        verses: {
+          en: verses.en.trim(),
+          bo: verses.bo.trim(),
+          zh: verses.zh.trim(),
+          hi: verses.hi.trim(),
+          ne: verses.ne.trim(),
+          mn: verses.mn.trim(),
+        },
+      };
+
+      // Only include date if it changed
+      const newDate = format(date, "yyyy-MM-dd");
+      if (newDate !== initialData.date) {
+        updatePayload.date = newDate;
+      }
+
+      // Only include image_urls if user uploaded a new image
+      if (imageKey) {
+        updatePayload.image_urls = [imageKey];
+      }
+
+      // Only include group_id if it's a valid UUID
+      const trimmedGroupId = String(groupId).trim();
+      if (
+        trimmedGroupId &&
+        trimmedGroupId.match(
+          /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i,
+        )
+      ) {
+        updatePayload.group_id = trimmedGroupId;
+      }
+
+      updateMutation.mutate({ id: initialData.id, payload: updatePayload });
+    } else {
+      const createPayload: any = {
+        verses: {
+          en: verses.en.trim(),
+          bo: verses.bo.trim(),
+          zh: verses.zh.trim(),
+          hi: verses.hi.trim(),
+          ne: verses.ne.trim(),
+          mn: verses.mn.trim(),
+        },
+        image_urls: imageKey ? [imageKey] : [],
+        group_id: groupId.trim() || null,
+        date: format(date, "yyyy-MM-dd"),
+      };
+      createMutation.mutate(createPayload);
+    }
+  };
+
+  const handleVerseChange = (value: string) => {
+    setVerses({
+      ...verses,
+      [activeLanguage.toLowerCase()]: value,
+    });
+  };
+
+  const isPending = createMutation.isPending || updateMutation.isPending;
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+      <div className="space-y-2">
+        <label className="text-sm font-bold">Verse Content</label>
+        <div className="flex gap-2 border-b">
+          {PLAN_LANGUAGE.map((lang) => (
+            <button
+              key={lang.value}
+              type="button"
+              onClick={() => setActiveLanguage(lang.value as LanguageCode)}
+              className={`px-4 py-2 text-sm font-medium transition-colors ${
+                activeLanguage === lang.value
+                  ? "border-b-2 border-[#A51C21] text-[#A51C21]"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              {lang.label}
+            </button>
+          ))}
+        </div>
+        <Textarea
+          value={verses[activeLanguage.toLowerCase() as keyof typeof verses]}
+          onChange={(e) => handleVerseChange(e.target.value)}
+          placeholder={`Enter verse content in ${PLAN_LANGUAGE.find((l) => l.value === activeLanguage)?.label}`}
+          className="min-h-[120px] resize-none"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <label className="text-sm font-bold">Image</label>
+        <div className="flex gap-4 items-start">
+          {!imagePreview && (
+            <button
+              type="button"
+              onClick={() => setIsImageDialogOpen(true)}
+              className="border w-32 h-24 border-dashed border-gray-300 rounded-lg flex items-center justify-center hover:border-gray-400 transition-colors"
+              aria-label="Upload verse image"
+            >
+              <IoMdAdd className="h-8 w-8 text-gray-400" />
+            </button>
+          )}
+          {imagePreview && (
+            <div className="relative">
+              <img
+                src={imagePreview}
+                alt="Verse preview"
+                className="w-32 h-24 object-cover rounded-lg border"
+              />
+              <button
+                type="button"
+                onClick={handleRemoveImage}
+                className="absolute top-1 right-1 bg-black/60 text-white rounded-full p-1"
+                aria-label="Remove image"
+              >
+                <IoMdClose className="h-4 w-4" />
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <GroupSelectField groupId={groupId} setGroupId={setGroupId} />
+
+      <div className="space-y-2">
+        <label className="text-sm font-bold">Date</label>
+        <Pecha.Popover open={showCalendar} onOpenChange={setShowCalendar}>
+          <Pecha.PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full justify-start text-left font-normal"
+            >
+              {date ? format(date, "PPP") : "Pick a date"}
+            </Button>
+          </Pecha.PopoverTrigger>
+          <Pecha.PopoverContent className="w-auto p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              onSelect={(newDate) => {
+                setDate(newDate);
+                setShowCalendar(false);
+              }}
+              initialFocus
+            />
+          </Pecha.PopoverContent>
+        </Pecha.Popover>
+      </div>
+
+      <div className="flex justify-end gap-2 pt-4">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={onCancel}
+          disabled={isPending}
+        >
+          Cancel
+        </Button>
+        <Button
+          type="submit"
+          className="bg-[#A51C21] text-white hover:bg-[#A51C21]/90"
+          disabled={isPending}
+        >
+          {isPending
+            ? mode === "edit"
+              ? "Updating..."
+              : "Creating..."
+            : mode === "edit"
+              ? "Update"
+              : "Create"}
+        </Button>
+      </div>
+
+      <Pecha.Dialog
+        open={isImageDialogOpen}
+        onOpenChange={setIsImageDialogOpen}
+      >
+        <Pecha.DialogContent showCloseButton>
+          <Pecha.DialogHeader>
+            <Pecha.DialogTitle>Upload & Crop Image</Pecha.DialogTitle>
+          </Pecha.DialogHeader>
+          <ImageContentData
+            onUpload={handleImageUpload}
+            isLoading={isImageUploading}
+          />
+        </Pecha.DialogContent>
+      </Pecha.Dialog>
+    </form>
+  );
+};
+
+export default VerseOfDayForm;
+
+export { VerseOfDayForm };
+
+interface GroupSelectFieldProps {
+  groupId: string;
+  setGroupId: (id: string) => void;
+}
+
+const GroupSelectField = ({ groupId, setGroupId }: GroupSelectFieldProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { data: groupsData, isLoading: isLoadingGroups } = useQuery({
+    queryKey: ["groups-list-for-verse"],
+    queryFn: () => fetchGroups({ page: 1, limit: 100 }),
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const groups = groupsData?.groups ?? [];
+  const selectedGroup = groups.find((g) => g.id === groupId);
+
+  return (
+    <div className="space-y-2">
+      <label className="text-sm font-bold">Group</label>
+      <Pecha.Popover open={open} onOpenChange={setOpen}>
+        <Pecha.PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-full justify-between font-normal"
+          >
+            {isLoadingGroups
+              ? "Loading groups..."
+              : selectedGroup
+                ? pickGroupTitle(selectedGroup.metadata)
+                : "Select a group..."}
+            <FaChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </Pecha.PopoverTrigger>
+        <Pecha.PopoverContent
+          className="w-[--radix-popover-trigger-width] p-0"
+          align="start"
+        >
+          <Pecha.Command>
+            <Pecha.CommandInput placeholder="Search groups..." />
+            <Pecha.CommandList>
+              <Pecha.CommandEmpty>No groups found.</Pecha.CommandEmpty>
+              <Pecha.CommandGroup>
+                {groups.map((group) => (
+                  <Pecha.CommandItem
+                    key={group.id}
+                    value={pickGroupTitle(group.metadata)}
+                    onSelect={() => {
+                      setGroupId(group.id);
+                      setOpen(false);
+                    }}
+                  >
+                    <FaCheck
+                      className={`mr-2 h-4 w-4 ${
+                        groupId === group.id ? "opacity-100" : "opacity-0"
+                      }`}
+                    />
+                    {pickGroupTitle(group.metadata)}
+                  </Pecha.CommandItem>
+                ))}
+              </Pecha.CommandGroup>
+            </Pecha.CommandList>
+          </Pecha.Command>
+        </Pecha.PopoverContent>
+      </Pecha.Popover>
+    </div>
+  );
+};
diff --git a/src/components/routes/verse-of-day/VerseOfDayFormDialog.tsx b/src/components/routes/verse-of-day/VerseOfDayFormDialog.tsx
new file mode 100644
index 00000000..dd95f176
--- /dev/null
+++ b/src/components/routes/verse-of-day/VerseOfDayFormDialog.tsx
@@ -0,0 +1,49 @@
+import { Pecha } from "@/components/ui/shadimport";
+import VerseOfDayForm from "./VerseOfDayForm";
+import type { VerseOfDayItem } from "./api/verseOfDayApi";
+
+interface VerseOfDayFormDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  editingItem: VerseOfDayItem | null;
+  onSuccess: () => void;
+  existingVerses: VerseOfDayItem[];
+}
+
+const VerseOfDayFormDialog = ({
+  open,
+  onOpenChange,
+  editingItem,
+  onSuccess,
+  existingVerses,
+}: VerseOfDayFormDialogProps) => {
+  const mode = editingItem ? "edit" : "create";
+
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+
+  return (
+    <Pecha.Dialog open={open} onOpenChange={onOpenChange}>
+      <Pecha.DialogContent className="flex max-h-[min(90dvh,90vh)] w-[calc(100%-2rem)] max-w-[1100px] flex-col gap-0 overflow-hidden p-0 sm:w-full">
+        <Pecha.DialogHeader className="shrink-0 border-b px-6 py-4">
+          <Pecha.DialogTitle>
+            {mode === "edit" ? "Edit Verse of Day" : "Create Verse of Day"}
+          </Pecha.DialogTitle>
+        </Pecha.DialogHeader>
+
+        <div className="min-h-0 flex-1 overflow-y-auto px-6 py-4">
+          <VerseOfDayForm
+            mode={mode}
+            initialData={editingItem || undefined}
+            onSuccess={onSuccess}
+            onCancel={handleCancel}
+            existingVerses={existingVerses}
+          />
+        </div>
+      </Pecha.DialogContent>
+    </Pecha.Dialog>
+  );
+};
+
+export default VerseOfDayFormDialog;
diff --git a/src/components/routes/verse-of-day/VerseOfDayList.tsx b/src/components/routes/verse-of-day/VerseOfDayList.tsx
new file mode 100644
index 00000000..f62ce4d2
--- /dev/null
+++ b/src/components/routes/verse-of-day/VerseOfDayList.tsx
@@ -0,0 +1,138 @@
+import { Pecha } from "@/components/ui/shadimport";
+import { Button } from "@/components/ui/atoms/button";
+import { type SortOrder, type VerseOfDayItem } from "./api/verseOfDayApi";
+import { format } from "date-fns";
+import { FaSortAmountDown, FaSortAmountUp } from "react-icons/fa";
+
+interface VerseOfDayListProps {
+  verses: VerseOfDayItem[];
+  isLoading?: boolean;
+  sortOrder: SortOrder;
+  onToggleSort: () => void;
+  onEdit: (item: VerseOfDayItem) => void;
+  onDelete: (item: VerseOfDayItem) => void;
+}
+
+const VerseOfDayList = ({
+  verses,
+  isLoading,
+  sortOrder,
+  onToggleSort,
+  onEdit,
+  onDelete,
+}: VerseOfDayListProps) => {
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <p className="text-muted-foreground">Loading...</p>
+      </div>
+    );
+  }
+
+  if (!verses.length) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <p className="text-muted-foreground">No verses found</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-md border bg-white dark:bg-[#1E1E1E]">
+      <Pecha.Table>
+        <Pecha.TableHeader>
+          <Pecha.TableRow>
+            <Pecha.TableHead className="w-[400px]">English</Pecha.TableHead>
+            <Pecha.TableHead className="w-[100px]">Image</Pecha.TableHead>
+            <Pecha.TableHead
+              className="w-[120px]"
+              aria-sort={sortOrder === "desc" ? "descending" : "ascending"}
+            >
+              <button
+                type="button"
+                onClick={onToggleSort}
+                aria-label={`Sort by date, currently ${
+                  sortOrder === "desc" ? "newest first" : "oldest first"
+                }`}
+                className="flex items-center gap-1 hover:text-foreground"
+              >
+                Date
+                {sortOrder === "desc" ? (
+                  <FaSortAmountDown className="h-3 w-3" />
+                ) : (
+                  <FaSortAmountUp className="h-3 w-3" />
+                )}
+              </button>
+            </Pecha.TableHead>
+            <Pecha.TableHead className="w-[150px]">Group</Pecha.TableHead>
+            <Pecha.TableHead className="w-[180px] text-right">
+              Actions
+            </Pecha.TableHead>
+          </Pecha.TableRow>
+        </Pecha.TableHeader>
+        <Pecha.TableBody>
+          {verses.map((verse) => (
+            <Pecha.TableRow key={verse.id}>
+              <Pecha.TableCell className="max-w-[400px]">
+                <p className="text-sm line-clamp-2">
+                  {verse.verses.en || (
+                    <span className="text-muted-foreground">—</span>
+                  )}
+                </p>
+              </Pecha.TableCell>
+              <Pecha.TableCell>
+                {verse.image_url ? (
+                  <img
+                    src={verse.image_url}
+                    alt="Verse"
+                    className="h-12 w-12 rounded object-cover"
+                    onError={(e) => {
+                      (e.target as HTMLImageElement).style.display = "none";
+                      (
+                        e.target as HTMLImageElement
+                      ).nextElementSibling?.classList.remove("hidden");
+                    }}
+                  />
+                ) : null}
+                <div
+                  className={`h-12 w-12 rounded bg-muted ${verse.image_url ? "hidden" : ""}`}
+                />
+              </Pecha.TableCell>
+              <Pecha.TableCell className="whitespace-nowrap">
+                {format(new Date(verse.date), "MMM dd, yyyy")}
+              </Pecha.TableCell>
+              <Pecha.TableCell>
+                <p className="truncate text-sm">
+                  {verse.group_info?.[0]?.title || "—"}
+                </p>
+              </Pecha.TableCell>
+              <Pecha.TableCell className="text-right">
+                <div className="flex justify-end gap-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => onEdit(verse)}
+                  >
+                    Edit
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => onDelete(verse)}
+                    className="text-red-600 hover:text-red-700"
+                  >
+                    Delete
+                  </Button>
+                </div>
+              </Pecha.TableCell>
+            </Pecha.TableRow>
+          ))}
+        </Pecha.TableBody>
+      </Pecha.Table>
+    </div>
+  );
+};
+
+export default VerseOfDayList;
diff --git a/src/components/routes/verse-of-day/api/verseOfDayApi.ts b/src/components/routes/verse-of-day/api/verseOfDayApi.ts
new file mode 100644
index 00000000..34a166b0
--- /dev/null
+++ b/src/components/routes/verse-of-day/api/verseOfDayApi.ts
@@ -0,0 +1,123 @@
+import axiosInstance from "@/config/axios-config";
+
+export interface VerseContent {
+  en: string;
+  bo: string;
+  zh: string;
+  hi: string;
+  ne: string;
+  mn: string;
+}
+
+export interface VerseOfDayPayload {
+  verses: VerseContent;
+  image_urls: string[];
+  verse_id: string;
+  ref_id: string;
+  ref_type: string;
+  group_id: string;
+  date: string;
+}
+
+export interface GroupInfo {
+  id: string;
+  title: string;
+  sub_title: string;
+  description: string;
+  language: string;
+}
+
+export interface VerseOfDayItem {
+  id: string;
+  verses: VerseContent;
+  verse: string | null;
+  image_url: string | null;
+  ref_id: string;
+  ref_type: string;
+  date: string;
+  group_id: string | null;
+  group_info: GroupInfo[];
+}
+
+export interface VerseOfDayListResponse {
+  verses: VerseOfDayItem[];
+  total: number;
+}
+
+export interface VerseOfDayResponse {
+  id: string;
+  verses: VerseContent;
+  image_urls: string[];
+  verse_id: string;
+  ref_id: string;
+  ref_type: string;
+  group_id: string;
+  date: string;
+  created_at: string;
+  updated_at: string;
+}
+
+const getAuthHeaders = () => ({
+  Authorization: `Bearer ${sessionStorage.getItem("accessToken")}`,
+});
+
+export type SortOrder = "asc" | "desc";
+
+export type FetchVerseOfDayParams = {
+  page?: number;
+  limit?: number;
+  search?: string;
+  sortOrder?: SortOrder;
+};
+
+export const fetchVerseOfDayList = async (
+  params: FetchVerseOfDayParams = {},
+): Promise<VerseOfDayListResponse> => {
+  const { page = 1, limit = 10, search = "", sortOrder = "desc" } = params;
+  const { data } = await axiosInstance.get<VerseOfDayListResponse>(
+    `/api/v1/cms/verse-of-day`,
+    {
+      headers: getAuthHeaders(),
+      params: {
+        skip: (page - 1) * limit,
+        limit,
+        sort_order: sortOrder,
+        ...(search.trim() && { search: search.trim() }),
+      },
+    },
+  );
+  return data;
+};
+
+export const createVerseOfDay = async (
+  payload: VerseOfDayPayload,
+): Promise<VerseOfDayResponse> => {
+  const { data } = await axiosInstance.post<VerseOfDayResponse>(
+    `/api/v1/cms/verse-of-day`,
+    payload,
+    {
+      headers: getAuthHeaders(),
+    },
+  );
+  return data;
+};
+
+export const updateVerseOfDay = async (
+  id: string,
+  payload: VerseOfDayPayload,
+): Promise<VerseOfDayResponse> => {
+  const { data } = await axiosInstance.put<VerseOfDayResponse>(
+    `/api/v1/cms/verse-of-day/${id}`,
+    payload,
+    {
+      headers: getAuthHeaders(),
+    },
+  );
+  return data;
+};
+
+export const deleteVerseOfDay = async (id: string): Promise<void> => {
+  await axiosInstance.delete(`/api/v1/cms/verse-of-day/${id}`, {
+    headers: getAuthHeaders(),
+  });
+};
diff --git a/src/components/ui/atoms/command.tsx b/src/components/ui/atoms/command.tsx
new file mode 100644
index 00000000..1c24b619
--- /dev/null
+++ b/src/components/ui/atoms/command.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { IoSearch } from "react-icons/io5";
+
+import { cn } from "@/lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/atoms/dialog";
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <IoSearch className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/src/components/ui/atoms/markdown-editor.tsx b/src/components/ui/atoms/markdown-editor.tsx
new file mode 100644
index 00000000..15116b8b
--- /dev/null
+++ b/src/components/ui/atoms/markdown-editor.tsx
@@ -0,0 +1,209 @@
+import { useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { Textarea } from "@/components/ui/atoms/textarea";
+import { MarkdownToolbar } from "@/components/ui/molecules/markdown-editor/MarkdownToolbar";
+import { MarkdownLinkDialog } from "@/components/ui/molecules/markdown-editor/MarkdownLinkDialog";
+import { MarkdownPreview } from "@/components/ui/molecules/markdown-editor/MarkdownPreview";
+import {
+  buildMarkdownLink,
+  getTextSelection,
+  insertAtSelection,
+  wrapSelection,
+} from "@/components/ui/molecules/markdown-editor/markdownEditorUtils";
+
+type MarkdownEditorProps = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  textareaClassName?: string;
+};
+
+const MarkdownEditor = ({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  className,
+  textareaClassName,
+}: MarkdownEditorProps) => {
+  const [activeTab, setActiveTab] = useState<"write" | "preview">(
+    disabled ? "preview" : "write",
+  );
+  const [isLinkDialogOpen, setIsLinkDialogOpen] = useState(false);
+  const [linkSelectionText, setLinkSelectionText] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const pendingSelection = useRef<{ start: number; end: number } | null>(null);
+  const savedSelection = useRef<{ start: number; end: number } | null>(null);
+
+  useEffect(() => {
+    if (!pendingSelection.current || !textareaRef.current) return;
+    const { start, end } = pendingSelection.current;
+    textareaRef.current.focus();
+    textareaRef.current.setSelectionRange(start, end);
+    pendingSelection.current = null;
+  }, [value]);
+
+  const applyEdit = (
+    nextValue: string,
+    cursorStart: number,
+    cursorEnd: number,
+  ) => {
+    pendingSelection.current = { start: cursorStart, end: cursorEnd };
+    onChange(nextValue);
+  };
+
+  const withSelection = (
+    edit: (
+      currentValue: string,
+      start: number,
+      end: number,
+    ) => { nextValue: string; cursorStart: number; cursorEnd: number },
+  ) => {
+    const textarea = textareaRef.current;
+    if (!textarea || disabled) return;
+    const { start, end } = getTextSelection(value, textarea);
+    const result = edit(value, start, end);
+    applyEdit(result.nextValue, result.cursorStart, result.cursorEnd);
+  };
+
+  const handleBold = () => {
+    withSelection((currentValue, start, end) =>
+      wrapSelection(currentValue, start, end, "**", "**"),
+    );
+  };
+
+  const handleItalic = () => {
+    withSelection((currentValue, start, end) =>
+      wrapSelection(currentValue, start, end, "*", "*"),
+    );
+  };
+
+  const handleHeading = () => {
+    withSelection((currentValue, start, end) => {
+      const lineStart = currentValue.lastIndexOf("\n", start - 1) + 1;
+      const prefix = "## ";
+      const insertText = `${prefix}${currentValue.slice(start, end)}`;
+      const nextValue =
+        currentValue.slice(0, lineStart) + insertText + currentValue.slice(end);
+      const cursorStart = lineStart + prefix.length;
+      const cursorEnd = cursorStart + (end - start);
+      return { nextValue, cursorStart, cursorEnd };
+    });
+  };
+
+  const handleBulletList = () => {
+    withSelection((currentValue, start, end) => {
+      const selected = currentValue.slice(start, end);
+      const lines = selected ? selected.split("\n") : [""];
+      const formatted = lines.map((line) => `- ${line}`).join("\n");
+      return insertAtSelection(currentValue, start, end, formatted);
+    });
+  };
+
+  const handleNumberedList = () => {
+    withSelection((currentValue, start, end) => {
+      const selected = currentValue.slice(start, end);
+      const lines = selected ? selected.split("\n") : [""];
+      const formatted = lines
+        .map((line, index) => `${index + 1}. ${line}`)
+        .join("\n");
+      return insertAtSelection(currentValue, start, end, formatted);
+    });
+  };
+
+  const handleOpenLinkDialog = () => {
+    const textarea = textareaRef.current;
+    if (!textarea || disabled) return;
+    const { start, end, text } = getTextSelection(value, textarea);
+    savedSelection.current = { start, end };
+    setLinkSelectionText(text);
+    setIsLinkDialogOpen(true);
+  };
+
+  const handleInsertLink = ({ label, url }: { label: string; url: string }) => {
+    const selection = savedSelection.current ?? {
+      start: value.length,
+      end: value.length,
+    };
+    const markdown = buildMarkdownLink(label, url);
+    const result = insertAtSelection(
+      value,
+      selection.start,
+      selection.end,
+      markdown,
+    );
+    applyEdit(result.nextValue, result.cursorStart, result.cursorEnd);
+    savedSelection.current = null;
+  };
+
+  return (
+    <div className={cn("rounded-md border border-input", className)}>
+      <div className="flex border-b border-input">
+        <button
+          type="button"
+          onClick={() => setActiveTab("write")}
+          disabled={disabled}
+          className={cn(
+            "px-4 py-2 text-sm font-medium transition-colors",
+            activeTab === "write"
+              ? "text-foreground border-b-2 border-foreground -mb-px"
+              : "text-muted-foreground hover:text-foreground",
+            disabled && "opacity-50 cursor-not-allowed",
+          )}
+        >
+          Write
+        </button>
+        <button
+          type="button"
+          onClick={() => setActiveTab("preview")}
+          className={cn(
+            "px-4 py-2 text-sm font-medium transition-colors",
+            activeTab === "preview"
+              ? "text-foreground border-b-2 border-foreground -mb-px"
+              : "text-muted-foreground hover:text-foreground",
+          )}
+        >
+          Preview
+        </button>
+      </div>
+
+      {activeTab === "write" ? (
+        <>
+          <MarkdownToolbar
+            disabled={disabled}
+            onBold={handleBold}
+            onItalic={handleItalic}
+            onHeading={handleHeading}
+            onBulletList={handleBulletList}
+            onNumberedList={handleNumberedList}
+            onLink={handleOpenLinkDialog}
+          />
+          <Textarea
+            ref={textareaRef}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+            disabled={disabled}
+            className={cn(
+              "min-h-[100px] w-full border-0 rounded-none rounded-b-md focus-visible:ring-0 focus-visible:ring-offset-0 resize-y",
+              textareaClassName,
+            )}
+          />
+        </>
+      ) : (
+        <MarkdownPreview value={value} />
+      )}
+
+      <MarkdownLinkDialog
+        open={isLinkDialogOpen}
+        onOpenChange={setIsLinkDialogOpen}
+        selectedText={linkSelectionText}
+        onConfirm={handleInsertLink}
+      />
+    </div>
+  );
+};
+
+export { MarkdownEditor };
diff --git a/src/components/ui/atoms/textarea.tsx b/src/components/ui/atoms/textarea.tsx
index f7f1c80d..5b73eee7 100644
--- a/src/components/ui/atoms/textarea.tsx
+++ b/src/components/ui/atoms/textarea.tsx
@@ -2,9 +2,13 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
   return (
     <textarea
+      ref={ref}
       data-slot="textarea"
       className={cn(
         "border-input placeholder:text-muted-foreground aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
@@ -13,6 +17,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
       {...props}
     />
   );
-}
+});
+Textarea.displayName = "Textarea";
 
 export { Textarea };
diff --git a/src/components/ui/molecules/audio-segment-player/AudioSegmentPlayer.tsx b/src/components/ui/molecules/audio-segment-player/AudioSegmentPlayer.tsx
new file mode 100644
index 00000000..e349ab47
--- /dev/null
+++ b/src/components/ui/molecules/audio-segment-player/AudioSegmentPlayer.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useRef } from "react";
+import { formatMs } from "@/lib/utils";
+
+interface AudioSegmentPlayerProps {
+  audioUrl: string;
+  startMs: number;
+  endMs: number;
+}
+
+export const AudioSegmentPlayer = ({
+  audioUrl,
+  startMs,
+  endMs,
+}: AudioSegmentPlayerProps) => {
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const onPlay = () => {
+      const currentMs = audio.currentTime * 1000;
+      if (currentMs < startMs || currentMs >= endMs) {
+        audio.currentTime = startMs / 1000;
+      }
+    };
+
+    const onTimeUpdate = () => {
+      if (audio.currentTime * 1000 >= endMs) {
+        audio.pause();
+        audio.currentTime = startMs / 1000;
+      }
+    };
+
+    audio.addEventListener("play", onPlay);
+    audio.addEventListener("timeupdate", onTimeUpdate);
+    return () => {
+      audio.removeEventListener("play", onPlay);
+      audio.removeEventListener("timeupdate", onTimeUpdate);
+    };
+  }, [audioUrl, startMs, endMs]);
+
+  return (
+    <div className="border-t border-dashed pt-2 space-y-2">
+      <p className="text-xs text-muted-foreground">
+        Segment: {formatMs(startMs)} – {formatMs(endMs)}
+      </p>
+      <audio
+        ref={audioRef}
+        controls
+        src={audioUrl}
+        preload="metadata"
+        className="w-full"
+      />
+    </div>
+  );
+};
diff --git a/src/components/ui/molecules/audio-trimmer/AudioTrimmer.tsx b/src/components/ui/molecules/audio-trimmer/AudioTrimmer.tsx
new file mode 100644
index 00000000..9040ef0e
--- /dev/null
+++ b/src/components/ui/molecules/audio-trimmer/AudioTrimmer.tsx
@@ -0,0 +1,214 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Pecha } from "@/components/ui/shadimport";
+import { formatMs } from "@/lib/utils";
+import { FaPlay, FaPause } from "react-icons/fa6";
+
+interface AudioTrimmerProps {
+  audioUrl: string;
+  maxDurationMs: number;
+  startMs: number | null;
+  endMs: number | null;
+  onChange: (startMs: number | null, endMs: number | null) => void;
+  onClear?: () => void | Promise<void>;
+  disabled?: boolean;
+}
+
+const MIN_SEGMENT_MS = 500;
+
+export const AudioTrimmer = ({
+  audioUrl,
+  maxDurationMs,
+  startMs,
+  endMs,
+  onChange,
+  onClear,
+  disabled = false,
+}: AudioTrimmerProps) => {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [localStart, setLocalStart] = useState(startMs ?? 0);
+  const [localEnd, setLocalEnd] = useState(endMs ?? maxDurationMs);
+
+  useEffect(() => {
+    setLocalStart(startMs ?? 0);
+    setLocalEnd(endMs ?? maxDurationMs);
+  }, [startMs, endMs, maxDurationMs]);
+
+  const commitRange = useCallback(
+    (start: number, end: number) => {
+      const clampedStart = Math.max(
+        0,
+        Math.min(start, maxDurationMs - MIN_SEGMENT_MS),
+      );
+      const clampedEnd = Math.max(
+        clampedStart + MIN_SEGMENT_MS,
+        Math.min(end, maxDurationMs),
+      );
+      setLocalStart(clampedStart);
+      setLocalEnd(clampedEnd);
+      onChange(clampedStart, clampedEnd);
+    },
+    [maxDurationMs, onChange],
+  );
+
+  const stopPlayback = useCallback(() => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.pause();
+    }
+    setIsPlaying(false);
+  }, []);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const onTimeUpdate = () => {
+      if (audio.currentTime * 1000 >= localEnd) {
+        audio.pause();
+        audio.currentTime = localStart / 1000;
+        setIsPlaying(false);
+      }
+    };
+
+    const onEnded = () => setIsPlaying(false);
+
+    audio.addEventListener("timeupdate", onTimeUpdate);
+    audio.addEventListener("ended", onEnded);
+    return () => {
+      audio.removeEventListener("timeupdate", onTimeUpdate);
+      audio.removeEventListener("ended", onEnded);
+    };
+  }, [localStart, localEnd]);
+
+  useEffect(() => {
+    stopPlayback();
+  }, [audioUrl, stopPlayback]);
+
+  const playSelection = async () => {
+    const audio = audioRef.current;
+    if (!audio || disabled) return;
+    audio.currentTime = localStart / 1000;
+    try {
+      await audio.play();
+      setIsPlaying(true);
+    } catch {
+      setIsPlaying(false);
+    }
+  };
+
+  const togglePlay = async () => {
+    const audio = audioRef.current;
+    if (!audio || disabled) return;
+    if (isPlaying) {
+      stopPlayback();
+      return;
+    }
+    await playSelection();
+  };
+
+  const handleClear = async () => {
+    stopPlayback();
+    if (onClear) {
+      await onClear();
+    } else {
+      onChange(null, null);
+    }
+  };
+
+  const startPercent =
+    maxDurationMs > 0 ? (localStart / maxDurationMs) * 100 : 0;
+  const endPercent = maxDurationMs > 0 ? (localEnd / maxDurationMs) * 100 : 100;
+
+  return (
+    <div className="space-y-3 rounded-md border border-dashed border-gray-300 dark:border-input bg-[#FAFAFA] dark:bg-sidebar-secondary p-3">
+      <audio
+        ref={audioRef}
+        src={audioUrl}
+        preload="metadata"
+        className="hidden"
+      />
+
+      <div className="flex items-center justify-between gap-2 text-sm text-muted-foreground">
+        <span>Day audio segment</span>
+        <span>
+          {formatMs(localStart)} – {formatMs(localEnd)} ({localEnd - localStart}{" "}
+          ms)
+        </span>
+      </div>
+
+      <div className="relative h-10 rounded-md bg-[#E8E8E8] dark:bg-[#2a2a2a] overflow-hidden">
+        <div
+          className="absolute inset-y-0 bg-[#A51C21]/25 border-x-2 border-[#A51C21]"
+          style={{ left: `${startPercent}%`, right: `${100 - endPercent}%` }}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <label className="text-xs text-muted-foreground flex justify-between">
+          <span>Start</span>
+          <span>{formatMs(localStart)}</span>
+        </label>
+        <input
+          type="range"
+          min={0}
+          max={maxDurationMs}
+          step={100}
+          value={localStart}
+          disabled={disabled}
+          className="w-full accent-[#A51C21]"
+          onChange={(e) => {
+            const next = Number(e.target.value);
+            commitRange(next, Math.max(next + MIN_SEGMENT_MS, localEnd));
+          }}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <label className="text-xs text-muted-foreground flex justify-between">
+          <span>End</span>
+          <span>{formatMs(localEnd)}</span>
+        </label>
+        <input
+          type="range"
+          min={0}
+          max={maxDurationMs}
+          step={100}
+          value={localEnd}
+          disabled={disabled}
+          className="w-full accent-[#A51C21]"
+          onChange={(e) => {
+            const next = Number(e.target.value);
+            commitRange(Math.min(next - MIN_SEGMENT_MS, localStart), next);
+          }}
+        />
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        <Pecha.Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={disabled}
+          onClick={togglePlay}
+        >
+          {isPlaying ? (
+            <FaPause className="w-3 h-3 mr-1" />
+          ) : (
+            <FaPlay className="w-3 h-3 mr-1" />
+          )}
+          {isPlaying ? "Pause" : "Play segment"}
+        </Pecha.Button>
+        <Pecha.Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          disabled={disabled}
+          onClick={handleClear}
+        >
+          Clear timestamps
+        </Pecha.Button>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/ui/molecules/auth-avatar/AuthAvatar.tsx b/src/components/ui/molecules/auth-avatar/AuthAvatar.tsx
index ba1e695b..b7188499 100644
--- a/src/components/ui/molecules/auth-avatar/AuthAvatar.tsx
+++ b/src/components/ui/molecules/auth-avatar/AuthAvatar.tsx
@@ -1,22 +1,13 @@
 import { Pecha } from "@/components/ui/shadimport";
 import { useAuth } from "@/config/auth-context";
-import axiosInstance from "@/config/axios-config";
 import { NO_PROFILE_IMAGE } from "@/lib/constant";
-import { useQuery } from "@tanstack/react-query";
 import { Link } from "react-router-dom";
 import { ROUTES } from "@/routes/paths";
-
-const fetchUserInfo = async () => {
-  const { data } = await axiosInstance.get(`/api/v1/authors/info`);
-  return data;
-};
+import { useUserInfo } from "@/hooks/useUserInfo";
 
 const AuthAvatar = () => {
   const { isLoggedIn } = useAuth();
-  const { data: userInfo } = useQuery({
-    queryKey: ["userInfo"],
-    queryFn: fetchUserInfo,
-  });
+  const { data: userInfo } = useUserInfo();
 
   if (isLoggedIn) {
     return (
diff --git a/src/components/ui/molecules/auth-button/AuthButton.tsx b/src/components/ui/molecules/auth-button/AuthButton.tsx
index 20c30f1e..5021cbb3 100644
--- a/src/components/ui/molecules/auth-button/AuthButton.tsx
+++ b/src/components/ui/molecules/auth-button/AuthButton.tsx
@@ -1,21 +1,12 @@
 import { useAuth } from "@/config/auth-context";
-import axiosInstance from "@/config/axios-config";
 import { NO_PROFILE_IMAGE } from "@/lib/constant";
-import { useQuery } from "@tanstack/react-query";
 import { Link } from "react-router-dom";
 import { ROUTES } from "@/routes/paths";
-
-const fetchUserInfo = async () => {
-  const { data } = await axiosInstance.get(`/api/v1/authors/info`);
-  return data;
-};
+import { useUserInfo } from "@/hooks/useUserInfo";
 
 const AuthButton = () => {
   const { isLoggedIn } = useAuth();
-  const { data: userInfo } = useQuery({
-    queryKey: ["userInfo"],
-    queryFn: fetchUserInfo,
-  });
+  const { data: userInfo } = useUserInfo();
 
   if (isLoggedIn) {
     return (
diff --git a/src/components/ui/molecules/content-sub/ContentComponents.tsx b/src/components/ui/molecules/content-sub/ContentComponents.tsx
index 0667d988..9ced677b 100644
--- a/src/components/ui/molecules/content-sub/ContentComponents.tsx
+++ b/src/components/ui/molecules/content-sub/ContentComponents.tsx
@@ -97,20 +97,28 @@ export const TextContent = ({ content }: { content: string }) => (
   </div>
 );
 
-export const SourceReferenceContent = ({ content }: { content: string }) => {
+export const SourceReferenceContent = ({
+  content,
+  segmentNumbers,
+}: {
+  content: string;
+  segmentNumbers?: number[] | null;
+}) => {
   const segments = content.split("\n").filter(Boolean);
-
   return (
     <div className="space-y-3">
-      {segments.map((text, index) => (
-        <div
-          key={index}
-          className="w-full min-h-12 bg-[#FAFAFA] dark:bg-sidebar-secondary whitespace-pre-wrap text-base p-3 border rounded-md border-dashed border-gray-300 dark:border-[#313132]"
-        >
-          <span className="font-medium">{index + 1}. </span>
-          <span dangerouslySetInnerHTML={{ __html: text }} />
-        </div>
-      ))}
+      {segments.map((text, index) => {
+        const label = segmentNumbers?.[index] ?? index + 1;
+        return (
+          <div
+            key={index}
+            className="w-full min-h-12 bg-[#FAFAFA] dark:bg-sidebar-secondary whitespace-pre-wrap text-base p-3 border rounded-md border-dashed border-gray-300 dark:border-[#313132]"
+          >
+            <span className="font-medium">{label}. </span>
+            <span dangerouslySetInnerHTML={{ __html: text }} />
+          </div>
+        );
+      })}
     </div>
   );
 };
diff --git a/src/components/ui/molecules/content-sub/ContentTypeSelector.tsx b/src/components/ui/molecules/content-sub/ContentTypeSelector.tsx
index ed145a5a..2b197ae5 100644
--- a/src/components/ui/molecules/content-sub/ContentTypeSelector.tsx
+++ b/src/components/ui/molecules/content-sub/ContentTypeSelector.tsx
@@ -11,6 +11,7 @@ interface SourceData {
   pecha_segment_id: string;
   text_id: string;
   segment_ids: string[];
+  segment_numbers?: number[];
 }
 
 interface ContentTypeSelectorProps {
diff --git a/src/components/ui/molecules/dashboard-table/DashBoardTable.tsx b/src/components/ui/molecules/dashboard-table/DashBoardTable.tsx
index ea12035a..4f9c51b4 100644
--- a/src/components/ui/molecules/dashboard-table/DashBoardTable.tsx
+++ b/src/components/ui/molecules/dashboard-table/DashBoardTable.tsx
@@ -5,6 +5,7 @@ import { ROUTES } from "@/routes/paths";
 import defaultCover from "/default-image.webp";
 import { DropdownButton } from "../dropdown-button/DropdownButton";
 import { FaStar } from "react-icons/fa";
+import type { useTranslate } from "@tolgee/react";
 
 export interface Plan {
   id: string;
@@ -20,13 +21,13 @@ export interface Plan {
 
 interface DashBoardTableProps {
   plans: Plan[];
-  t: (key: string, parameters?: any) => string;
+  t: ReturnType<typeof useTranslate>["t"];
   isLoading?: boolean;
-  error?: any;
+  error?: { message: string };
   sortBy: string;
   sortOrder: string;
   onSort: (column: string) => void;
-  handleFeatured: (planId: string) => void;
+  handleFeatured: (id: string) => void;
 }
 
 export function DashBoardTable({
@@ -177,7 +178,7 @@ export function DashBoardTable({
         </Pecha.TableCell>
         <Pecha.TableCell>
           <div className="flex items-center gap-2">
-            <DropdownButton planId={plan.id} currentStatus={plan.status} />
+            <DropdownButton id={plan.id} currentStatus={plan.status} />
           </div>
         </Pecha.TableCell>
       </Pecha.TableRow>
diff --git a/src/components/ui/molecules/day-audio-section/DayAudioSection.tsx b/src/components/ui/molecules/day-audio-section/DayAudioSection.tsx
new file mode 100644
index 00000000..fd3236de
--- /dev/null
+++ b/src/components/ui/molecules/day-audio-section/DayAudioSection.tsx
@@ -0,0 +1,244 @@
+import { useEffect, useState } from "react";
+import Dropzone from "react-dropzone";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { FiLoader, FiX } from "react-icons/fi";
+import { FaTrash } from "react-icons/fa6";
+import { formatMs, getAudioDurationMs } from "@/lib/utils";
+import {
+  deleteDayAudio,
+  uploadDayAudio,
+} from "@/components/routes/task/api/planApi";
+import { AiOutlineSound } from "react-icons/ai";
+import PlanAudioSearchInput from "@/components/ui/molecules/day-audio-section/PlanAudioSearchInput";
+
+interface DayAudioSectionProps {
+  planId: string;
+  planTitle?: string;
+  dayId: string;
+  dayNumber: number;
+  audioUrl?: string | null;
+  audioDurationMs?: number | null;
+  hasAudio?: boolean;
+  isEditable?: boolean;
+}
+
+const DayAudioSection = ({
+  planId,
+  planTitle,
+  dayId,
+  audioUrl,
+  audioDurationMs,
+  hasAudio,
+  isEditable = true,
+}: DayAudioSectionProps) => {
+  const queryClient = useQueryClient();
+  const [pendingFile, setPendingFile] = useState<File | null>(null);
+  const showExisting = Boolean(hasAudio && audioUrl);
+  const [isExpanded, setIsExpanded] = useState(showExisting);
+
+  useEffect(() => {
+    setPendingFile(null);
+    setIsExpanded(showExisting);
+  }, [dayId, showExisting]);
+
+  const uploadMutation = useMutation({
+    mutationFn: async (file: File) => {
+      const duration_ms = await getAudioDurationMs(file);
+      return uploadDayAudio(dayId, file, duration_ms);
+    },
+    onSuccess: () => {
+      setPendingFile(null);
+      toast.success("Day audio uploaded");
+      queryClient.invalidateQueries({ queryKey: ["planDetails", planId] });
+    },
+    onError: (error: Error) => {
+      toast.error("Failed to upload day audio", {
+        description: error.message,
+      });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: () => deleteDayAudio(dayId),
+    onSuccess: () => {
+      setPendingFile(null);
+      setIsExpanded(false);
+      toast.success("Day audio removed");
+      queryClient.invalidateQueries({ queryKey: ["planDetails", planId] });
+    },
+    onError: (error: Error) => {
+      toast.error("Failed to remove day audio", {
+        description: error.message,
+      });
+    },
+  });
+
+  const handleUpload = async () => {
+    if (!pendingFile) return;
+    uploadMutation.mutate(pendingFile);
+  };
+
+  const isBusy = uploadMutation.isPending || deleteMutation.isPending;
+
+  const handleClose = () => {
+    setPendingFile(null);
+    setIsExpanded(false);
+  };
+
+  if (!isExpanded) {
+    if (!isEditable) return null;
+    return (
+      <div className="mx-4 mb-4">
+        <Pecha.Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => setIsExpanded(true)}
+        >
+          <AiOutlineSound /> Add narration
+        </Pecha.Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className=" rounded-lg border border-dashed border-gray-300 dark:border-input bg-white dark:bg-[#161616] p-3 space-y-2">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2 shrink-0">
+          {showExisting && audioDurationMs != null && (
+            <span className="text-sm text-muted-foreground">
+              {formatMs(audioDurationMs)} total
+            </span>
+          )}
+          {!showExisting && isEditable && (
+            <Pecha.Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              disabled={isBusy}
+              title="Close"
+              onClick={handleClose}
+            >
+              <FiX className="w-4 h-4" />
+            </Pecha.Button>
+          )}
+        </div>
+      </div>
+
+      {showExisting && (
+        <div className="flex items-center gap-2 min-w-0">
+          <audio
+            controls
+            src={audioUrl!}
+            className="h-9 min-w-0 flex-1"
+            preload="metadata"
+          />
+          {isEditable && (
+            <Pecha.Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="shrink-0 h-9 w-9"
+              disabled={isBusy}
+              title="Remove audio"
+              onClick={() => deleteMutation.mutate()}
+            >
+              {deleteMutation.isPending ? (
+                <FiLoader className="w-4 h-4 animate-spin" />
+              ) : (
+                <FaTrash className="w-4 h-4" />
+              )}
+            </Pecha.Button>
+          )}
+        </div>
+      )}
+
+      {isEditable && (
+        <div className="space-y-3">
+          <PlanAudioSearchInput
+            dayId={dayId}
+            planId={planId}
+            planTitle={planTitle}
+            disabled={isBusy}
+            onAttached={() => {
+              queryClient.invalidateQueries({
+                queryKey: ["planDetails", planId],
+              });
+            }}
+          />
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-white dark:bg-[#161616] px-2 text-muted-foreground">
+                or upload new
+              </span>
+            </div>
+          </div>
+
+          <Dropzone
+            accept={{ "audio/*": [".mp3", ".m4a", ".wav", ".ogg"] }}
+            multiple={false}
+            disabled={isBusy}
+            onDrop={(files) => {
+              if (files[0]) setPendingFile(files[0]);
+            }}
+          >
+            {({ getRootProps, getInputProps }) => (
+              <div
+                {...getRootProps()}
+                className="border border-dashed rounded-lg py-2 px-3 text-center text-sm cursor-pointer hover:border-gray-400 dark:hover:border-gray-500 bg-[#FAFAFA] dark:bg-sidebar-secondary"
+              >
+                <input {...getInputProps()} />
+                {pendingFile
+                  ? `Selected: ${pendingFile.name}`
+                  : showExisting
+                    ? "Drop or click to replace day audio (MP3, etc.)"
+                    : "Drop or click to upload day narration audio"}
+              </div>
+            )}
+          </Dropzone>
+
+          {pendingFile && (
+            <div className="flex gap-2">
+              <Pecha.Button
+                type="button"
+                variant="default"
+                className="bg-[#A51C21] hover:bg-[#A51C21]/90 flex-1"
+                disabled={isBusy}
+                onClick={handleUpload}
+              >
+                {uploadMutation.isPending && (
+                  <FiLoader className="w-4 h-4 animate-spin mr-1" />
+                )}
+                {uploadMutation.isPending ? "Uploading..." : "Upload audio"}
+              </Pecha.Button>
+              <Pecha.Button
+                type="button"
+                variant="outline"
+                disabled={isBusy}
+                onClick={() => setPendingFile(null)}
+              >
+                Cancel
+              </Pecha.Button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {!showExisting && isEditable && (
+        <p className="text-xs text-muted-foreground">
+          Search for existing narration or upload a new file, then set subtask
+          timestamps against this track.
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default DayAudioSection;
diff --git a/src/components/ui/molecules/day-audio-section/PlanAudioSearchInput.tsx b/src/components/ui/molecules/day-audio-section/PlanAudioSearchInput.tsx
new file mode 100644
index 00000000..0b0fcf96
--- /dev/null
+++ b/src/components/ui/molecules/day-audio-section/PlanAudioSearchInput.tsx
@@ -0,0 +1,362 @@
+import { useEffect, useRef, useState } from "react";
+import { useDebounce } from "use-debounce";
+import { useInfiniteQuery, useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { FiLoader } from "react-icons/fi";
+import { IoMdClose } from "react-icons/io";
+import { Pecha } from "@/components/ui/shadimport";
+import { Input } from "@/components/ui/atoms/input";
+import { formatMs } from "@/lib/utils";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import {
+  attachDayAudio,
+  fetchPlanAudioList,
+  type PlanAudioDTO,
+} from "@/components/routes/task/api/planApi";
+import { searchPlans } from "@/components/routes/create-series/api/planSearchApi";
+
+const SEARCH_DEBOUNCE_MS = 400;
+const PLAN_SEARCH_DEBOUNCE_MS = 400;
+const PAGE_SIZE = 10;
+
+interface PlanAudioSearchInputProps {
+  dayId: string;
+  planId: string;
+  planTitle?: string;
+  disabled?: boolean;
+  onAttached: () => void;
+}
+
+const PlanAudioSearchInput = ({
+  dayId,
+  planId,
+  planTitle,
+  disabled = false,
+  onAttached,
+}: PlanAudioSearchInputProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const audioRefs = useRef<Map<string, HTMLAudioElement>>(new Map());
+  const [inputValue, setInputValue] = useState("");
+  const [debouncedSearch] = useDebounce(inputValue, SEARCH_DEBOUNCE_MS);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+
+  const [filterPlanId, setFilterPlanId] = useState<string | undefined>(planId);
+  const [filterPlanTitle, setFilterPlanTitle] = useState(
+    planTitle ?? "This plan",
+  );
+  const [planSearchInput, setPlanSearchInput] = useState("");
+  const [debouncedPlanSearch] = useDebounce(
+    planSearchInput,
+    PLAN_SEARCH_DEBOUNCE_MS,
+  );
+  const [showPlanPicker, setShowPlanPicker] = useState(false);
+
+  const searchTerm = debouncedSearch.trim();
+  const planSearchTerm = debouncedPlanSearch.trim();
+
+  useEffect(() => {
+    setFilterPlanId(planId);
+    setFilterPlanTitle(planTitle ?? "This plan");
+    setPlanSearchInput("");
+    setShowPlanPicker(false);
+  }, [planId, planTitle]);
+
+  const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
+    useInfiniteQuery({
+      queryKey: ["plan-audio-search", searchTerm, filterPlanId],
+      queryFn: ({ pageParam = 0 }) =>
+        fetchPlanAudioList({
+          search: searchTerm || undefined,
+          plan_id: filterPlanId,
+          skip: pageParam,
+          limit: PAGE_SIZE,
+        }),
+      getNextPageParam: (lastPage) => {
+        const fetched = lastPage.skip + lastPage.audio.length;
+        return fetched < lastPage.total ? fetched : undefined;
+      },
+      initialPageParam: 0,
+      enabled: showSuggestions && !disabled,
+      refetchOnWindowFocus: false,
+    });
+
+  const { data: planSearchData, isFetching: isPlanSearchFetching } =
+    useInfiniteQuery({
+      queryKey: ["plan-audio-plan-filter", planSearchTerm],
+      queryFn: ({ pageParam = 0 }) =>
+        searchPlans({
+          search: planSearchTerm || undefined,
+          skip: pageParam,
+          limit: PAGE_SIZE,
+        }),
+      getNextPageParam: (lastPage) => {
+        const fetched = lastPage.skip + lastPage.plans.length;
+        return fetched < lastPage.total ? fetched : undefined;
+      },
+      initialPageParam: 0,
+      enabled: showPlanPicker && !disabled,
+      refetchOnWindowFocus: false,
+    });
+
+  const attachMutation = useMutation({
+    mutationFn: (item: PlanAudioDTO) =>
+      attachDayAudio(dayId, item.audio_key, item.duration_ms),
+    onSuccess: () => {
+      setInputValue("");
+      setShowSuggestions(false);
+      toast.success("Day audio attached");
+      onAttached();
+    },
+    onError: (error: unknown) => {
+      toast.error("Failed to attach audio", {
+        description: getApiErrorMessage(error, "Could not attach this audio"),
+      });
+    },
+  });
+
+  const results = data?.pages.flatMap((page) => page.audio) ?? [];
+  const total = data?.pages[0]?.total ?? 0;
+  const planOptions = planSearchData?.pages.flatMap((page) => page.plans) ?? [];
+
+  const handleSelect = (item: PlanAudioDTO) => {
+    if (attachMutation.isPending) return;
+    attachMutation.mutate(item);
+  };
+
+  const pauseOtherPlayers = (playingId: string) => {
+    audioRefs.current.forEach((el, id) => {
+      if (id !== playingId && !el.paused) el.pause();
+    });
+  };
+
+  const selectPlanFilter = (id: string, title: string) => {
+    setFilterPlanId(id);
+    setFilterPlanTitle(title);
+    setPlanSearchInput("");
+    setShowPlanPicker(false);
+    setShowSuggestions(true);
+  };
+
+  const clearPlanFilter = () => {
+    setFilterPlanId(undefined);
+    setFilterPlanTitle("All plans");
+    setPlanSearchInput("");
+    setShowPlanPicker(false);
+    setShowSuggestions(true);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setShowSuggestions(false);
+        setShowPlanPicker(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const showDropdown = showSuggestions && !disabled;
+  const attachingKey = attachMutation.isPending
+    ? attachMutation.variables?.audio_key
+    : null;
+
+  const showPlanDropdown =
+    showPlanPicker &&
+    !disabled &&
+    (isPlanSearchFetching ||
+      planOptions.length > 0 ||
+      planSearchTerm.length > 0);
+
+  return (
+    <div ref={containerRef} className="space-y-2">
+      <p className="text-sm font-medium text-muted-foreground">
+        Search existing audio
+      </p>
+      <div className="flex items-center gap-2">
+        <div className="space-y-1">
+          <div className="relative">
+            <Input
+              placeholder="Search plans…"
+              className="border shadow-none bg-white dark:bg-sidebar-secondary pr-9"
+              value={showPlanPicker ? planSearchInput : filterPlanTitle}
+              disabled={disabled || attachMutation.isPending}
+              autoComplete="off"
+              onChange={(e) => {
+                setPlanSearchInput(e.target.value);
+                setShowPlanPicker(true);
+                setShowSuggestions(true);
+              }}
+              onFocus={() => {
+                setPlanSearchInput("");
+                setShowPlanPicker(true);
+                setShowSuggestions(true);
+              }}
+            />
+            {filterPlanId != null && !showPlanPicker && (
+              <button
+                type="button"
+                aria-label="Clear plan filter"
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                disabled={disabled || attachMutation.isPending}
+                onClick={clearPlanFilter}
+              >
+                <IoMdClose className="h-4 w-4" />
+              </button>
+            )}
+            {showPlanDropdown && (
+              <ul className="absolute z-50 mt-1 w-full max-h-48 overflow-y-auto rounded-md border bg-white dark:bg-[#1e1e1e] shadow-md py-1">
+                {filterPlanId != null && (
+                  <li>
+                    <button
+                      type="button"
+                      className="w-full px-3 py-2 text-left text-sm text-muted-foreground hover:bg-muted/50 border-b"
+                      onMouseDown={(e) => e.preventDefault()}
+                      onClick={clearPlanFilter}
+                    >
+                      All plans
+                    </button>
+                  </li>
+                )}
+                {isPlanSearchFetching && planOptions.length === 0 && (
+                  <li className="px-3 py-2 text-sm text-muted-foreground flex items-center gap-2">
+                    <FiLoader className="w-4 h-4 animate-spin" />
+                    Searching plans…
+                  </li>
+                )}
+                {planOptions.map((plan) => (
+                  <li key={plan.id}>
+                    <button
+                      type="button"
+                      className="w-full px-3 py-2 text-left text-sm hover:bg-muted/50 truncate"
+                      onMouseDown={(e) => e.preventDefault()}
+                      onClick={() => selectPlanFilter(plan.id, plan.title)}
+                    >
+                      {plan.title}
+                      {plan.id === planId ? " (current)" : ""}
+                    </button>
+                  </li>
+                ))}
+                {!isPlanSearchFetching &&
+                  planOptions.length === 0 &&
+                  planSearchTerm.length > 0 && (
+                    <li className="px-3 py-2 text-sm text-muted-foreground">
+                      No plans found
+                    </li>
+                  )}
+              </ul>
+            )}
+          </div>
+        </div>
+
+        <div className="relative w-full">
+          <Input
+            placeholder="Search by file name or path…"
+            className="border shadow-none bg-white dark:bg-sidebar-secondary"
+            value={inputValue}
+            disabled={disabled || attachMutation.isPending}
+            autoComplete="off"
+            aria-autocomplete="list"
+            aria-expanded={showDropdown}
+            onChange={(e) => {
+              setInputValue(e.target.value);
+              setShowSuggestions(true);
+            }}
+            onFocus={() => setShowSuggestions(true)}
+          />
+
+          {showDropdown && (
+            <ul className="absolute z-50 mt-1 w-full max-h-72 overflow-y-auto rounded-md border bg-white dark:bg-[#1e1e1e] shadow-md py-1">
+              {isFetching && results.length === 0 && (
+                <li className="px-3 py-2 text-sm text-muted-foreground flex items-center gap-2">
+                  <FiLoader className="w-4 h-4 animate-spin" />
+                  Searching…
+                </li>
+              )}
+
+              {results.map((item) => {
+                const isAttaching = attachingKey === item.audio_key;
+                const durationLabel =
+                  item.duration_ms != null ? formatMs(item.duration_ms) : null;
+                return (
+                  <li
+                    key={item.id}
+                    className="px-3 py-2 space-y-2 border-b border-border/50 last:border-b-0 hover:bg-muted/30"
+                  >
+                    <div className="flex items-start justify-between gap-2 min-w-0">
+                      <div className="min-w-0 flex-1">
+                        <p className="text-sm font-medium truncate">
+                          {item.file_name}
+                        </p>
+                        <p className="text-xs text-muted-foreground truncate">
+                          Day {item.day_number}
+                          {item.plan_id === planId ? " (this plan)" : ""}
+                          {durationLabel ? ` · ${durationLabel}` : ""}
+                        </p>
+                      </div>
+                      <Pecha.Button
+                        type="button"
+                        size="sm"
+                        variant="outline"
+                        className="shrink-0 h-8 text-xs"
+                        disabled={attachMutation.isPending}
+                        onClick={() => handleSelect(item)}
+                      >
+                        {isAttaching ? (
+                          <FiLoader className="w-3.5 h-3.5 animate-spin" />
+                        ) : (
+                          "Use"
+                        )}
+                      </Pecha.Button>
+                    </div>
+                    <audio
+                      ref={(el) => {
+                        if (el) audioRefs.current.set(item.id, el);
+                        else audioRefs.current.delete(item.id);
+                      }}
+                      controls
+                      src={item.audio_url}
+                      preload="none"
+                      className="h-8 w-full min-w-0"
+                      onClick={(e) => e.stopPropagation()}
+                      onPlay={() => pauseOtherPlayers(item.id)}
+                    />
+                  </li>
+                );
+              })}
+
+              {!isFetching && results.length === 0 && (
+                <li className="px-3 py-2 text-sm text-muted-foreground">
+                  {searchTerm
+                    ? "No audio found — upload a new file below"
+                    : "No audio in library yet — upload below"}
+                </li>
+              )}
+
+              {hasNextPage && (
+                <li className="border-t">
+                  <button
+                    type="button"
+                    className="w-full px-3 py-2 text-left text-sm text-[#A51C21] hover:bg-muted/50 disabled:opacity-50"
+                    disabled={isFetchingNextPage}
+                    onMouseDown={(e) => e.preventDefault()}
+                    onClick={() => fetchNextPage()}
+                  >
+                    {isFetchingNextPage
+                      ? "Loading more…"
+                      : `Load more (${results.length} of ${total})`}
+                  </button>
+                </li>
+              )}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PlanAudioSearchInput;
diff --git a/src/components/ui/molecules/day-shareable-images/DayShareableImageUpload.tsx b/src/components/ui/molecules/day-shareable-images/DayShareableImageUpload.tsx
new file mode 100644
index 00000000..359b7715
--- /dev/null
+++ b/src/components/ui/molecules/day-shareable-images/DayShareableImageUpload.tsx
@@ -0,0 +1,170 @@
+import { useEffect, useState } from "react";
+import Dropzone from "react-dropzone";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { FiLoader } from "react-icons/fi";
+import { FaTrash } from "react-icons/fa6";
+import {
+  deleteDayShareableImage,
+  uploadDayShareableImage,
+  type DayShareableImageType,
+} from "@/components/routes/task/api/planApi";
+
+interface DayShareableImageUploadProps {
+  planId: string;
+  dayId: string;
+  imageType: DayShareableImageType;
+  label: string;
+  imageUrl?: string | null;
+  isEditable?: boolean;
+}
+
+const DayShareableImageUpload = ({
+  planId,
+  dayId,
+  imageType,
+  label,
+  imageUrl,
+  isEditable = true,
+}: DayShareableImageUploadProps) => {
+  const queryClient = useQueryClient();
+  const [pendingFile, setPendingFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    setPendingFile(null);
+    setPreviewUrl(null);
+  }, [dayId, imageUrl]);
+
+  useEffect(() => {
+    if (!pendingFile) {
+      setPreviewUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(pendingFile);
+    setPreviewUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [pendingFile]);
+
+  const invalidatePlan = () =>
+    queryClient.invalidateQueries({ queryKey: ["planDetails", planId] });
+
+  const uploadMutation = useMutation({
+    mutationFn: (file: File) => uploadDayShareableImage(dayId, imageType, file),
+    onSuccess: () => {
+      setPendingFile(null);
+      toast.success(`${label} uploaded`);
+      invalidatePlan();
+    },
+    onError: (error: Error) => {
+      toast.error(`Failed to upload ${label.toLowerCase()}`, {
+        description: error.message,
+      });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: () => deleteDayShareableImage(dayId, imageType),
+    onSuccess: () => {
+      setPendingFile(null);
+      toast.success(`${label} removed`);
+      invalidatePlan();
+    },
+    onError: (error: Error) => {
+      toast.error(`Failed to remove ${label.toLowerCase()}`, {
+        description: error.message,
+      });
+    },
+  });
+
+  const isBusy = uploadMutation.isPending || deleteMutation.isPending;
+  const displayUrl = previewUrl || imageUrl;
+
+  return (
+    <div className="space-y-2 rounded-lg border border-dashed border-gray-300 dark:border-input bg-white dark:bg-[#161616] p-3">
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-sm font-medium">{label}</p>
+        {imageUrl && isEditable && (
+          <Pecha.Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="h-8 w-8 shrink-0"
+            disabled={isBusy}
+            title={`Remove ${label.toLowerCase()}`}
+            onClick={() => deleteMutation.mutate()}
+          >
+            {deleteMutation.isPending ? (
+              <FiLoader className="w-4 h-4 animate-spin" />
+            ) : (
+              <FaTrash className="w-4 h-4" />
+            )}
+          </Pecha.Button>
+        )}
+      </div>
+
+      {displayUrl && (
+        <img
+          src={displayUrl}
+          alt={label}
+          className="w-full max-h-40 object-contain rounded border border-gray-200 dark:border-input bg-[#FAFAFA] dark:bg-sidebar-secondary"
+        />
+      )}
+
+      {isEditable && (
+        <>
+          <Dropzone
+            accept={{ "image/*": [] }}
+            multiple={false}
+            disabled={isBusy}
+            onDrop={(files) => {
+              if (files[0]) setPendingFile(files[0]);
+            }}
+          >
+            {({ getRootProps, getInputProps }) => (
+              <div
+                {...getRootProps()}
+                className="border border-dashed rounded-lg py-2 px-3 text-center text-sm cursor-pointer hover:border-gray-400 dark:hover:border-gray-500 bg-[#FAFAFA] dark:bg-sidebar-secondary"
+              >
+                <input {...getInputProps()} />
+                {pendingFile
+                  ? `Selected: ${pendingFile.name}`
+                  : imageUrl
+                    ? `Drop or click to replace ${label.toLowerCase()}`
+                    : `Drop or click to upload ${label.toLowerCase()}`}
+              </div>
+            )}
+          </Dropzone>
+
+          {pendingFile && (
+            <div className="flex gap-2">
+              <Pecha.Button
+                type="button"
+                variant="default"
+                className="bg-[#A51C21] hover:bg-[#A51C21]/90 flex-1"
+                disabled={isBusy}
+                onClick={() => uploadMutation.mutate(pendingFile)}
+              >
+                {uploadMutation.isPending && (
+                  <FiLoader className="w-4 h-4 animate-spin mr-1" />
+                )}
+                {uploadMutation.isPending ? "Uploading..." : "Upload"}
+              </Pecha.Button>
+              <Pecha.Button
+                type="button"
+                variant="outline"
+                disabled={isBusy}
+                onClick={() => setPendingFile(null)}
+              >
+                Cancel
+              </Pecha.Button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default DayShareableImageUpload;
diff --git a/src/components/ui/molecules/dropdown-button/DropdownButton.tsx b/src/components/ui/molecules/dropdown-button/DropdownButton.tsx
index 3911892e..9a580ef3 100644
--- a/src/components/ui/molecules/dropdown-button/DropdownButton.tsx
+++ b/src/components/ui/molecules/dropdown-button/DropdownButton.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Pecha } from "@/components/ui/shadimport";
 import { FaPen } from "react-icons/fa";
 import { BsThreeDotsVertical } from "react-icons/bs";
@@ -5,13 +6,29 @@ import { IoMdTrash, IoMdArchive } from "react-icons/io";
 import { MdOutlineFileUpload } from "react-icons/md";
 import { IoEyeOffSharp } from "react-icons/io5";
 import { RiDraftLine } from "react-icons/ri";
+import { MdSwapHoriz } from "react-icons/md";
 import { toast } from "sonner";
 import { Link } from "react-router-dom";
 import { ROUTES } from "@/routes/paths";
 import PlanDeleteDialog from "@/components/ui/molecules/modals/plan-delete/PlanDeleteDialog";
+import ContentTransferDialog from "@/components/routes/content-transfer/components/ContentTransferDialog";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import axiosInstance from "@/config/axios-config";
 import { STATUS_TRANSITIONS, ALLOWED_TRANSITIONS } from "@/lib/constant";
+import { normalizeStatus } from "@/components/routes/dashboard/dashboardTable";
+import type { AuthorGroupMemberRole } from "@/components/routes/groups/api/groupsApi";
+import type { PlatformRole } from "@/lib/platformAccess";
+import {
+  canChangeContentStatus,
+  canDeleteContent,
+  canEditContent,
+  canInitiateContentTransfer,
+} from "@/lib/contentPermissions";
+
+export type DropdownAdditionalMenuItem = {
+  label: string;
+  onClick: () => void;
+};
 
 const STATUS_ICONS = {
   PUBLISHED: MdOutlineFileUpload,
@@ -20,116 +37,249 @@ const STATUS_ICONS = {
   DRAFT: RiDraftLine,
 };
 
+export type DropdownButtonEntityType = "plan" | "series";
+
 export function DropdownButton({
-  planId,
+  id,
   currentStatus,
+  triggerVariant = "default",
+  triggerClassName,
+  entityType = "plan",
+  additionalMenuItems,
+  invalidateSeriesId,
+  readOnly = false,
+  groupRole,
+  platformRole,
+  sourceGroupId,
+  contentTitle,
 }: {
-  planId: string;
+  id: string;
   currentStatus: string;
+  triggerVariant?: "default" | "icon";
+  triggerClassName?: string;
+  entityType?: DropdownButtonEntityType;
+  additionalMenuItems?: DropdownAdditionalMenuItem[];
+  /** When plan actions run on series details, refresh that series query too. */
+  invalidateSeriesId?: string;
+  readOnly?: boolean;
+  groupRole?: AuthorGroupMemberRole;
+  platformRole?: PlatformRole;
+  /** Current owning group; required to show transfer action. */
+  sourceGroupId?: string | null;
+  contentTitle?: string;
 }) {
   const queryClient = useQueryClient();
+  const [transferOpen, setTransferOpen] = useState(false);
+  const isSeries = entityType === "series";
+  const apiBase = isSeries ? "/api/v1/cms/series" : "/api/v1/cms/plans";
+  const editHref = isSeries ? ROUTES.seriesEdit(id) : ROUTES.planEdit(id);
+  const editLabel = isSeries ? "Edit Series" : "Edit Plan";
+  const deleteLabel = isSeries ? "Delete Series" : "Delete Plan";
+  const entityName = isSeries ? "Series" : "Plan";
 
-  const deletePlanMutation = useMutation({
-    mutationFn: async (plan_id: string) => {
-      const { data } = await axiosInstance.delete(
-        `/api/v1/cms/plans/${plan_id}`,
-        {
-          headers: {
-            Authorization: `Bearer ${sessionStorage.getItem("accessToken")}`,
-          },
-        },
-      );
+  const deleteMutation = useMutation({
+    mutationFn: async (id: string) => {
+      const { data } = await axiosInstance.delete(`${apiBase}/${id}`);
       return data;
     },
     onSuccess: () => {
-      toast.success("Plan deleted successfully!", {
-        description: "The plan has been deleted.",
+      toast.success(`${entityName} deleted successfully!`, {
+        description: `The ${entityName.toLowerCase()} has been deleted.`,
       });
-      queryClient.refetchQueries({ queryKey: ["dashboard-plans"] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard-items"] });
+      if (invalidateSeriesId) {
+        queryClient.invalidateQueries({
+          queryKey: ["series", invalidateSeriesId],
+        });
+      }
     },
-    onError: (error: any) => {
-      toast.error("Failed to delete plan", {
-        description: error.response.data.detail.message,
+    onError: (error: {
+      response?: { data?: { detail?: { message?: string } } };
+    }) => {
+      toast.error(`Failed to delete ${entityName.toLowerCase()}`, {
+        description: error.response?.data?.detail?.message,
       });
     },
   });
 
-  const handleDeletePlan = () => {
-    deletePlanMutation.mutate(planId);
+  const handleDelete = () => {
+    deleteMutation.mutate(id);
   };
 
   const handleStatusChange = async (newStatus: string) => {
     try {
-      const accessToken = sessionStorage.getItem("accessToken");
-      await axiosInstance.patch(
-        `/api/v1/cms/plans/${planId}/status`,
-        { status: newStatus },
-        {
-          headers: {
-            Authorization: `Bearer ${accessToken}`,
-          },
-        },
-      );
+      await axiosInstance.patch(`${apiBase}/${id}/status`, {
+        status: newStatus,
+      });
 
       toast.success(`Status updated to ${newStatus}`);
-      queryClient.refetchQueries({ queryKey: ["dashboard-plans"] });
-      queryClient.invalidateQueries({ queryKey: ["planDetails", planId] });
-    } catch (error: any) {
-      toast.error(error.response.data.detail.message);
+      queryClient.invalidateQueries({ queryKey: ["dashboard-items"] });
+      if (isSeries) {
+        queryClient.invalidateQueries({ queryKey: ["series", id] });
+      } else {
+        queryClient.invalidateQueries({ queryKey: ["planDetails", id] });
+        if (invalidateSeriesId) {
+          queryClient.invalidateQueries({
+            queryKey: ["series", invalidateSeriesId],
+          });
+        }
+      }
+    } catch (error: unknown) {
+      const message = (
+        error as { response?: { data?: { detail?: { message?: string } } } }
+      )?.response?.data?.detail?.message;
+      toast.error(message ?? "Status update failed");
     }
   };
 
-  const allowedStatuses =
-    ALLOWED_TRANSITIONS[currentStatus as keyof typeof ALLOWED_TRANSITIONS];
-  const availableTransitions = STATUS_TRANSITIONS.filter((status) =>
-    allowedStatuses.includes(status.value),
+  const status = normalizeStatus(
+    currentStatus,
+  ) as keyof typeof ALLOWED_TRANSITIONS;
+  const allowedStatuses = ALLOWED_TRANSITIONS[status] ?? [];
+  const availableTransitions = STATUS_TRANSITIONS.filter((statusOption) =>
+    allowedStatuses.includes(statusOption.value),
   );
 
-  const canDelete = currentStatus === "DRAFT" || currentStatus === "ARCHIVED";
+  const extraItems = additionalMenuItems ?? [];
+  const allowEdit =
+    !readOnly && canEditContent(groupRole, status, platformRole);
+  const allowDelete =
+    !readOnly && canDeleteContent(groupRole, status, platformRole);
+  const allowStatus =
+    !readOnly && canChangeContentStatus(groupRole, platformRole);
+  const allowTransfer =
+    !readOnly &&
+    Boolean(sourceGroupId) &&
+    canInitiateContentTransfer(groupRole, platformRole);
+
+  const invalidateAfterTransfer = () => {
+    queryClient.invalidateQueries({ queryKey: ["dashboard-items"] });
+    queryClient.invalidateQueries({ queryKey: ["transfer-requests"] });
+    if (isSeries) {
+      queryClient.invalidateQueries({ queryKey: ["series", id] });
+    } else {
+      queryClient.invalidateQueries({ queryKey: ["planDetails", id] });
+      if (invalidateSeriesId) {
+        queryClient.invalidateQueries({
+          queryKey: ["series", invalidateSeriesId],
+        });
+      }
+    }
+  };
+
+  if (readOnly) {
+    return (
+      <span className="text-xs text-muted-foreground" aria-hidden>
+        —
+      </span>
+    );
+  }
+
+  const hasMenuItems =
+    allowEdit ||
+    allowDelete ||
+    allowStatus ||
+    allowTransfer ||
+    extraItems.length > 0;
+
+  if (!hasMenuItems) {
+    return (
+      <span className="text-xs text-muted-foreground" aria-hidden>
+        —
+      </span>
+    );
+  }
 
   return (
-    <Pecha.ButtonGroup>
+    <Pecha.ButtonGroup className="mx-auto">
       <Pecha.DropdownMenu>
         <Pecha.DropdownMenuTrigger asChild>
-          <Pecha.Button variant="outline">
-            Status <BsThreeDotsVertical />
-          </Pecha.Button>
+          {triggerVariant === "icon" ? (
+            <Pecha.Button
+              variant="outline"
+              size="icon"
+              className={triggerClassName}
+              aria-label={`${entityName} actions`}
+            >
+              <BsThreeDotsVertical className="h-4 w-4" />
+            </Pecha.Button>
+          ) : (
+            <Pecha.Button variant="outline">
+              Status <BsThreeDotsVertical />
+            </Pecha.Button>
+          )}
         </Pecha.DropdownMenuTrigger>
         <Pecha.DropdownMenuContent align="end" className="[--radius:1rem]">
-          <>
+          {allowEdit ? (
             <Pecha.DropdownMenuGroup>
-              <Link to={ROUTES.planEdit(planId)}>
+              <Link to={editHref}>
                 <Pecha.DropdownMenuItem>
                   <FaPen className="h-4 w-4" />
-                  Edit Plan
+                  {editLabel}
                 </Pecha.DropdownMenuItem>
               </Link>
             </Pecha.DropdownMenuGroup>
-            <Pecha.DropdownMenuSeparator />
-          </>
-          <Pecha.DropdownMenuItem disabled>Status</Pecha.DropdownMenuItem>
-          <Pecha.DropdownMenuGroup>
-            {availableTransitions.map((status) => {
-              const IconComponent =
-                STATUS_ICONS[status.value as keyof typeof STATUS_ICONS];
-              return (
+          ) : null}
+          {allowStatus ? (
+            <>
+              <Pecha.DropdownMenuSeparator />
+              <Pecha.DropdownMenuItem disabled>Status</Pecha.DropdownMenuItem>
+              <Pecha.DropdownMenuGroup>
+                {availableTransitions.map((status) => {
+                  const IconComponent =
+                    STATUS_ICONS[status.value as keyof typeof STATUS_ICONS];
+                  return (
+                    <Pecha.DropdownMenuItem
+                      key={status.value}
+                      onClick={() => handleStatusChange(status.value)}
+                    >
+                      <IconComponent className="h-4 w-4" />
+                      {status.label}
+                    </Pecha.DropdownMenuItem>
+                  );
+                })}
+              </Pecha.DropdownMenuGroup>
+            </>
+          ) : null}
+          {allowTransfer && sourceGroupId ? (
+            <>
+              <Pecha.DropdownMenuSeparator />
+              <Pecha.DropdownMenuGroup>
                 <Pecha.DropdownMenuItem
-                  key={status.value}
-                  onClick={() => handleStatusChange(status.value)}
+                  onSelect={(e) => {
+                    e.preventDefault();
+                    setTransferOpen(true);
+                  }}
                 >
-                  <IconComponent className="h-4 w-4" />
-                  {status.label}
+                  <MdSwapHoriz className="h-4 w-4" />
+                  Transfer to group…
                 </Pecha.DropdownMenuItem>
-              );
-            })}
-          </Pecha.DropdownMenuGroup>
-          {canDelete && (
+              </Pecha.DropdownMenuGroup>
+            </>
+          ) : null}
+          {extraItems.length > 0 && (
+            <>
+              <Pecha.DropdownMenuSeparator />
+              <Pecha.DropdownMenuGroup>
+                {extraItems.map((item) => (
+                  <Pecha.DropdownMenuItem
+                    key={item.label}
+                    onClick={item.onClick}
+                  >
+                    {item.label}
+                  </Pecha.DropdownMenuItem>
+                ))}
+              </Pecha.DropdownMenuGroup>
+            </>
+          )}
+          {allowDelete && (
             <>
               <Pecha.DropdownMenuSeparator />
               <Pecha.DropdownMenuGroup>
                 <PlanDeleteDialog
-                  planId={planId}
-                  onDelete={handleDeletePlan}
+                  id={id}
+                  entityLabel={entityName}
+                  onDelete={handleDelete}
                   trigger={
                     <Pecha.DropdownMenuItem
                       variant="destructive"
@@ -137,9 +287,9 @@ export function DropdownButton({
                         e.preventDefault();
                       }}
                     >
-                      <span className="flex items-center gap-2 w-full">
+                      <span className="flex w-full items-center gap-2">
                         <IoMdTrash className="h-4 w-4" />
-                        Delete Plan
+                        {deleteLabel}
                       </span>
                     </Pecha.DropdownMenuItem>
                   }
@@ -149,6 +299,17 @@ export function DropdownButton({
           )}
         </Pecha.DropdownMenuContent>
       </Pecha.DropdownMenu>
+      {allowTransfer && sourceGroupId ? (
+        <ContentTransferDialog
+          open={transferOpen}
+          onOpenChange={setTransferOpen}
+          contentType={entityType}
+          contentId={id}
+          sourceGroupId={sourceGroupId}
+          contentTitle={contentTitle}
+          onSuccess={invalidateAfterTransfer}
+        />
+      ) : null}
     </Pecha.ButtonGroup>
   );
 }
diff --git a/src/components/ui/molecules/markdown-editor/MarkdownLinkDialog.tsx b/src/components/ui/molecules/markdown-editor/MarkdownLinkDialog.tsx
new file mode 100644
index 00000000..3a165652
--- /dev/null
+++ b/src/components/ui/molecules/markdown-editor/MarkdownLinkDialog.tsx
@@ -0,0 +1,509 @@
+import { useEffect, useMemo, useState } from "react";
+import { useQuery, useInfiniteQuery } from "@tanstack/react-query";
+import { useInView } from "react-intersection-observer";
+import { useDebounce } from "use-debounce";
+import { IoMdSearch } from "react-icons/io";
+import { Pecha } from "@/components/ui/shadimport";
+import { Button } from "@/components/ui/atoms/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/atoms/dialog";
+import {
+  fetchGroups,
+  pickGroupTitle,
+  type AuthorGroupListItem,
+} from "@/components/routes/groups/api/groupsApi";
+import {
+  fetchTextDetails,
+  searchSegments,
+  searchTitles,
+  type SegmentSearchResult,
+} from "@/components/api/searchApi";
+import { buildGroupLink, buildSegmentLink } from "@/lib/markdownLinks";
+import { flattenSegments, getLastSegmentId } from "@/lib/utils";
+import pechaIcon from "@/assets/icon/pecha_icon.png";
+
+type LinkType = "group" | "text" | "segment";
+
+export type MarkdownLinkSelection = {
+  label: string;
+  url: string;
+};
+
+type MarkdownLinkDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedText: string;
+  onConfirm: (selection: MarkdownLinkSelection) => void;
+};
+
+type TextTitleItem = {
+  id: string;
+  title: string;
+};
+
+type SegmentItem = {
+  segment_id: string;
+  pecha_segment_id?: string;
+  content: string;
+};
+
+const DEBOUNCE_MS = 500;
+
+const MarkdownLinkDialog = ({
+  open,
+  onOpenChange,
+  selectedText,
+  onConfirm,
+}: MarkdownLinkDialogProps) => {
+  const [linkType, setLinkType] = useState<LinkType>("group");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedQuery] = useDebounce(searchQuery.trim(), DEBOUNCE_MS);
+  const [selectedGroup, setSelectedGroup] =
+    useState<AuthorGroupListItem | null>(null);
+  const [selectedTextItem, setSelectedTextItem] =
+    useState<TextTitleItem | null>(null);
+  const [selectedSegment, setSelectedSegment] = useState<SegmentItem | null>(
+    null,
+  );
+  const [selectedSearchSegment, setSelectedSearchSegment] =
+    useState<SegmentSearchResult | null>(null);
+
+  useEffect(() => {
+    if (!open) {
+      setLinkType("group");
+      setSearchQuery("");
+      setSelectedGroup(null);
+      setSelectedTextItem(null);
+      setSelectedSegment(null);
+      setSelectedSearchSegment(null);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    setSelectedGroup(null);
+    setSelectedTextItem(null);
+    setSelectedSegment(null);
+    setSelectedSearchSegment(null);
+  }, [linkType, debouncedQuery]);
+
+  const { data: groupData, isLoading: isLoadingGroups } = useQuery({
+    queryKey: ["markdown-link-groups", debouncedQuery],
+    queryFn: () =>
+      fetchGroups({
+        page: 1,
+        limit: 20,
+        search: debouncedQuery || undefined,
+      }),
+    enabled: open && linkType === "group",
+  });
+
+  const groups = groupData?.groups ?? [];
+
+  const { data: titleData, isLoading: isLoadingTitles } = useQuery({
+    queryKey: ["markdown-link-text-titles", debouncedQuery],
+    queryFn: () =>
+      searchTitles({
+        title: debouncedQuery,
+        limit: 20,
+        offset: 0,
+      }),
+    enabled: open && linkType === "text" && debouncedQuery.length > 0,
+  });
+
+  const { data: segmentSearchData, isLoading: isLoadingSegmentSearch } =
+    useQuery({
+      queryKey: ["markdown-link-segment-search", debouncedQuery],
+      queryFn: () => searchSegments({ content: debouncedQuery }),
+      enabled: open && linkType === "segment" && debouncedQuery.length > 0,
+    });
+
+  const textTitles: TextTitleItem[] = titleData ?? [];
+  const searchedSegments: SegmentSearchResult[] =
+    segmentSearchData?.segments ?? [];
+
+  const {
+    data: detailsData,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    queryKey: ["markdown-link-text-details", selectedTextItem?.id],
+    initialPageParam: undefined as
+      | { segmentId: string; direction: "next" | "previous" }
+      | undefined,
+    queryFn: ({ pageParam }) => {
+      if (!selectedTextItem) {
+        throw new Error("Text item is required");
+      }
+      return fetchTextDetails({
+        textId: selectedTextItem.id,
+        segmentId: pageParam?.segmentId,
+        direction: pageParam?.direction as "next" | "previous" | undefined,
+        size: 20,
+      });
+    },
+    getNextPageParam: (lastPage: any) => {
+      if (lastPage?.current_segment_position >= lastPage?.total_segments) {
+        return undefined;
+      }
+      const lastSegmentId = getLastSegmentId(lastPage.content.sections);
+      if (!lastSegmentId) return undefined;
+      return { segmentId: lastSegmentId, direction: "next" };
+    },
+    enabled: open && linkType === "text" && !!selectedTextItem?.id,
+    refetchOnWindowFocus: false,
+  });
+
+  const { ref: bottomSentinelRef, inView: isBottomVisible } = useInView({
+    threshold: 0.1,
+    rootMargin: "50px",
+  });
+
+  useEffect(() => {
+    if (isBottomVisible && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [isBottomVisible, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  const segments = useMemo(() => {
+    if (!detailsData?.pages) return [];
+    const allSegments = detailsData.pages.flatMap((page) =>
+      flattenSegments(page.content.sections),
+    );
+    return Array.from(
+      new Map(allSegments.map((s: SegmentItem) => [s.segment_id, s])).values(),
+    );
+  }, [detailsData?.pages]);
+
+  const canConfirm =
+    linkType === "group"
+      ? !!selectedGroup
+      : linkType === "segment"
+        ? !!selectedSearchSegment
+        : !!selectedTextItem && !!selectedSegment;
+
+  const handleConfirm = () => {
+    if (linkType === "group" && selectedGroup) {
+      const label =
+        selectedText.trim() || pickGroupTitle(selectedGroup.metadata);
+      onConfirm({
+        label,
+        url: buildGroupLink(selectedGroup.id),
+      });
+      onOpenChange(false);
+      return;
+    }
+
+    if (linkType === "text" && selectedTextItem && selectedSegment) {
+      const label = selectedText.trim() || selectedTextItem.title;
+      const segmentId =
+        selectedSegment.pecha_segment_id || selectedSegment.segment_id;
+      onConfirm({
+        label,
+        url: buildSegmentLink(segmentId),
+      });
+      onOpenChange(false);
+      return;
+    }
+
+    if (linkType === "segment" && selectedSearchSegment) {
+      const segmentId =
+        selectedSearchSegment.pecha_segment_id || selectedSearchSegment.id;
+      onConfirm({
+        label: selectedText.trim() || selectedSearchSegment.content,
+        url: buildSegmentLink(segmentId),
+      });
+      onOpenChange(false);
+    }
+  };
+
+  const renderGroupResults = () => {
+    if (isLoadingGroups) {
+      return (
+        <p className="px-3 py-4 text-sm text-muted-foreground">
+          Searching groups…
+        </p>
+      );
+    }
+
+    if (groups.length === 0) {
+      return (
+        <p className="px-3 py-4 text-sm text-muted-foreground">
+          No groups found.
+        </p>
+      );
+    }
+
+    return (
+      <ul>
+        {groups.map((group) => {
+          const title = pickGroupTitle(group.metadata);
+          const isSelected = selectedGroup?.id === group.id;
+          return (
+            <li key={group.id}>
+              <button
+                type="button"
+                className={`w-full px-3 py-2 text-left text-sm hover:bg-muted/60 ${
+                  isSelected ? "bg-muted font-medium" : ""
+                }`}
+                onClick={() => setSelectedGroup(group)}
+              >
+                {title}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    );
+  };
+
+  const renderTextResults = () => {
+    if (!debouncedQuery) {
+      return (
+        <p className="px-3 py-4 text-sm text-muted-foreground">
+          Search for a text title to link a segment.
+        </p>
+      );
+    }
+
+    if (isLoadingTitles) {
+      return (
+        <p className="px-3 py-4 text-sm text-muted-foreground">
+          Searching texts…
+        </p>
+      );
+    }
+
+    if (textTitles.length === 0) {
+      return (
+        <p className="px-3 py-4 text-sm text-muted-foreground">
+          No texts found.
+        </p>
+      );
+    }
+
+    return (
+      <ul>
+        {textTitles.map((text) => {
+          const isSelected = selectedTextItem?.id === text.id;
+          return (
+            <li key={text.id}>
+              <button
+                type="button"
+                className={`w-full px-3 py-2 text-left text-sm hover:bg-muted/60 flex items-center justify-between gap-2 ${
+                  isSelected ? "bg-muted font-medium" : ""
+                }`}
+                onClick={() => {
+                  setSelectedTextItem(text);
+                  setSelectedSegment(null);
+                }}
+              >
+                <span>{text.title}</span>
+                <img src={pechaIcon} alt="" className="size-6 shrink-0" />
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    );
+  };
+
+  const renderDirectSegmentResults = () => {
+    if (!debouncedQuery) {
+      return (
+        <p className="px-3 py-4 text-sm text-muted-foreground">
+          Search for segment content to link directly.
+        </p>
+      );
+    }
+
+    if (isLoadingSegmentSearch) {
+      return (
+        <p className="px-3 py-4 text-sm text-muted-foreground">
+          Searching segments…
+        </p>
+      );
+    }
+
+    if (searchedSegments.length === 0) {
+      return (
+        <p className="px-3 py-4 text-sm text-muted-foreground">
+          No segments found.
+        </p>
+      );
+    }
+
+    return (
+      <ul>
+        {searchedSegments.map((segment) => {
+          const isSelected = selectedSearchSegment?.id === segment.id;
+          return (
+            <li key={segment.id}>
+              <button
+                type="button"
+                className={`w-full rounded-md border p-2 text-left text-sm hover:bg-muted/40 ${
+                  isSelected
+                    ? "border-[#801A1E] bg-muted/40"
+                    : "border-dashed border-gray-300 dark:border-[#313132]"
+                }`}
+                onClick={() => setSelectedSearchSegment(segment)}
+              >
+                <div
+                  className="line-clamp-3"
+                  dangerouslySetInnerHTML={{ __html: segment.content }}
+                />
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    );
+  };
+
+  const renderSegmentResults = () => {
+    if (!selectedTextItem) return null;
+
+    if (segments.length === 0) {
+      return (
+        <p className="px-3 py-2 text-sm text-muted-foreground">
+          Loading segments…
+        </p>
+      );
+    }
+
+    return (
+      <div className="space-y-2 border-t border-input px-3 py-3">
+        <p className="text-xs font-medium text-muted-foreground">
+          Select a segment from &ldquo;{selectedTextItem.title}&rdquo;
+        </p>
+        <div className="max-h-48 space-y-2 overflow-y-auto">
+          {segments.map((segment, index) => {
+            const isSelected =
+              selectedSegment?.segment_id === segment.segment_id;
+            return (
+              <button
+                key={segment.segment_id || index}
+                type="button"
+                className={`w-full rounded-md border p-2 text-left text-sm hover:bg-muted/40 ${
+                  isSelected
+                    ? "border-[#801A1E] bg-muted/40"
+                    : "border-dashed border-gray-300 dark:border-[#313132]"
+                }`}
+                onClick={() => setSelectedSegment(segment)}
+              >
+                <div
+                  className="line-clamp-3"
+                  dangerouslySetInnerHTML={{ __html: segment.content }}
+                />
+              </button>
+            );
+          })}
+          <div ref={bottomSentinelRef} className="h-1" />
+          {isFetchingNextPage && (
+            <p className="text-xs text-muted-foreground">Loading more…</p>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg gap-0 p-0 sm:max-w-lg">
+        <DialogHeader className="px-6 pt-6 pb-4">
+          <DialogTitle>Insert link</DialogTitle>
+          <DialogDescription>
+            {selectedText.trim()
+              ? `Link the selected text "${selectedText.trim()}".`
+              : "Choose a group or text segment to link."}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="px-6 pb-4 space-y-4">
+          <div className="flex rounded-md border border-input p-1">
+            <button
+              type="button"
+              className={`flex-1 rounded px-3 py-1.5 text-sm font-medium transition-colors ${
+                linkType === "group"
+                  ? "bg-muted text-foreground"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+              onClick={() => setLinkType("group")}
+            >
+              Group
+            </button>
+            <button
+              type="button"
+              className={`flex-1 rounded px-3 py-1.5 text-sm font-medium transition-colors ${
+                linkType === "text"
+                  ? "bg-muted text-foreground"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+              onClick={() => setLinkType("text")}
+            >
+              Text
+            </button>
+            <button
+              type="button"
+              className={`flex-1 rounded px-3 py-1.5 text-sm font-medium transition-colors ${
+                linkType === "segment"
+                  ? "bg-muted text-foreground"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+              onClick={() => setLinkType("segment")}
+            >
+              Segment
+            </button>
+          </div>
+
+          <div className="flex items-center rounded-md border border-input px-2">
+            <IoMdSearch className="size-4 shrink-0 text-muted-foreground" />
+            <Pecha.Input
+              placeholder={
+                linkType === "group"
+                  ? "Search groups…"
+                  : linkType === "text"
+                    ? "Search text titles…"
+                    : "Search segment content…"
+              }
+              className="border-0 shadow-none focus-visible:ring-0"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+
+          <div className="max-h-52 overflow-y-auto rounded-md border border-input">
+            {linkType === "group"
+              ? renderGroupResults()
+              : linkType === "text"
+                ? renderTextResults()
+                : renderDirectSegmentResults()}
+          </div>
+
+          {linkType === "text" && renderSegmentResults()}
+        </div>
+
+        <DialogFooter className="px-6 pb-6">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
+          <Button type="button" disabled={!canConfirm} onClick={handleConfirm}>
+            Insert link
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { MarkdownLinkDialog };
diff --git a/src/components/ui/molecules/markdown-editor/MarkdownPreview.tsx b/src/components/ui/molecules/markdown-editor/MarkdownPreview.tsx
new file mode 100644
index 00000000..80e889a5
--- /dev/null
+++ b/src/components/ui/molecules/markdown-editor/MarkdownPreview.tsx
@@ -0,0 +1,71 @@
+import ReactMarkdown from "react-markdown";
+import { isDrawerLink, parseDrawerLink } from "@/lib/markdownLinks";
+import { cn } from "@/lib/utils";
+
+type MarkdownPreviewProps = {
+  value: string;
+  className?: string;
+  emptyMessage?: string;
+};
+
+const MarkdownPreview = ({
+  value,
+  className,
+  emptyMessage = "Nothing to preview",
+}: MarkdownPreviewProps) => (
+  <div
+    className={cn(
+      "min-h-[100px] w-full px-3 py-2 text-base",
+      "prose prose-sm dark:prose-invert max-w-none",
+      className,
+    )}
+  >
+    {value ? (
+      <ReactMarkdown
+        components={{
+          a: ({ href, children }) => {
+            if (href && isDrawerLink(href)) {
+              const target = parseDrawerLink(href);
+              const badge =
+                target?.type === "group"
+                  ? "Group"
+                  : target?.type === "segment"
+                    ? "Text"
+                    : "Link";
+              return (
+                <span className="inline-flex items-center gap-1 not-prose">
+                  <a
+                    href={href}
+                    className="text-[#801A1E] underline underline-offset-2"
+                  >
+                    {children}
+                  </a>
+                  <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+                    {badge}
+                  </span>
+                </span>
+              );
+            }
+
+            return (
+              <a
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[#801A1E] underline underline-offset-2"
+              >
+                {children}
+              </a>
+            );
+          },
+        }}
+      >
+        {value}
+      </ReactMarkdown>
+    ) : (
+      <p className="text-muted-foreground italic">{emptyMessage}</p>
+    )}
+  </div>
+);
+
+export { MarkdownPreview };
diff --git a/src/components/ui/molecules/markdown-editor/MarkdownToolbar.tsx b/src/components/ui/molecules/markdown-editor/MarkdownToolbar.tsx
new file mode 100644
index 00000000..d5f8f1fb
--- /dev/null
+++ b/src/components/ui/molecules/markdown-editor/MarkdownToolbar.tsx
@@ -0,0 +1,108 @@
+import { Button } from "@/components/ui/atoms/button";
+import { cn } from "@/lib/utils";
+import {
+  LuBold,
+  LuHeading2,
+  LuItalic,
+  LuLink,
+  LuList,
+  LuListOrdered,
+} from "react-icons/lu";
+
+type MarkdownToolbarProps = {
+  disabled?: boolean;
+  onBold: () => void;
+  onItalic: () => void;
+  onHeading: () => void;
+  onBulletList: () => void;
+  onNumberedList: () => void;
+  onLink: () => void;
+  className?: string;
+};
+
+const MarkdownToolbar = ({
+  disabled,
+  onBold,
+  onItalic,
+  onHeading,
+  onBulletList,
+  onNumberedList,
+  onLink,
+  className,
+}: MarkdownToolbarProps) => (
+  <div
+    className={cn(
+      "flex flex-wrap items-center gap-1 border-b border-input px-2 py-1.5",
+      className,
+    )}
+  >
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className="size-8"
+      disabled={disabled}
+      onClick={onBold}
+      aria-label="Bold"
+    >
+      <LuBold />
+    </Button>
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className="size-8"
+      disabled={disabled}
+      onClick={onItalic}
+      aria-label="Italic"
+    >
+      <LuItalic />
+    </Button>
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className="size-8"
+      disabled={disabled}
+      onClick={onHeading}
+      aria-label="Heading"
+    >
+      <LuHeading2 />
+    </Button>
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className="size-8"
+      disabled={disabled}
+      onClick={onBulletList}
+      aria-label="Bullet list"
+    >
+      <LuList />
+    </Button>
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className="size-8"
+      disabled={disabled}
+      onClick={onNumberedList}
+      aria-label="Numbered list"
+    >
+      <LuListOrdered />
+    </Button>
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className="size-8"
+      disabled={disabled}
+      onClick={onLink}
+      aria-label="Insert link"
+    >
+      <LuLink />
+    </Button>
+  </div>
+);
+
+export { MarkdownToolbar };
diff --git a/src/components/ui/molecules/markdown-editor/markdownEditorUtils.ts b/src/components/ui/molecules/markdown-editor/markdownEditorUtils.ts
new file mode 100644
index 00000000..44d2902f
--- /dev/null
+++ b/src/components/ui/molecules/markdown-editor/markdownEditorUtils.ts
@@ -0,0 +1,48 @@
+export type TextSelection = {
+  start: number;
+  end: number;
+  text: string;
+};
+
+export function getTextSelection(
+  value: string,
+  textarea: HTMLTextAreaElement,
+): TextSelection {
+  const start = textarea.selectionStart;
+  const end = textarea.selectionEnd;
+  return {
+    start,
+    end,
+    text: value.slice(start, end),
+  };
+}
+
+export function insertAtSelection(
+  value: string,
+  start: number,
+  end: number,
+  insertText: string,
+): { nextValue: string; cursorStart: number; cursorEnd: number } {
+  const nextValue = value.slice(0, start) + insertText + value.slice(end);
+  const cursorStart = start + insertText.length;
+  return { nextValue, cursorStart, cursorEnd: cursorStart };
+}
+
+export function wrapSelection(
+  value: string,
+  start: number,
+  end: number,
+  before: string,
+  after: string,
+): { nextValue: string; cursorStart: number; cursorEnd: number } {
+  const selected = value.slice(start, end);
+  const insertText = `${before}${selected}${after}`;
+  const nextValue = value.slice(0, start) + insertText + value.slice(end);
+  const cursorStart = start + before.length;
+  const cursorEnd = cursorStart + selected.length;
+  return { nextValue, cursorStart, cursorEnd };
+}
+
+export function buildMarkdownLink(label: string, url: string): string {
+  return `[${label}](${url})`;
+}
diff --git a/src/components/ui/molecules/modals/day-add/DayAddDialog.tsx b/src/components/ui/molecules/modals/day-add/DayAddDialog.tsx
new file mode 100644
index 00000000..43f6e9a5
--- /dev/null
+++ b/src/components/ui/molecules/modals/day-add/DayAddDialog.tsx
@@ -0,0 +1,65 @@
+import { useState } from "react";
+import { Pecha } from "@/components/ui/shadimport";
+import { IoMdAdd } from "react-icons/io";
+
+interface DayAddDialogProps {
+  onAdd: () => void;
+  isPending?: boolean;
+  disabled?: boolean;
+}
+
+const DayAddDialog = ({ onAdd, isPending, disabled }: DayAddDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const handleAdd = () => {
+    onAdd();
+    setOpen(false);
+  };
+
+  return (
+    <Pecha.AlertDialog open={open} onOpenChange={setOpen}>
+      <Pecha.AlertDialogTrigger asChild>
+        <Pecha.Button
+          type="button"
+          disabled={disabled || isPending}
+          variant="destructive"
+          className="cursor-pointer w-full disabled:opacity-50 disabled:cursor-not-allowed"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (!disabled && !isPending) {
+              setOpen(true);
+            }
+          }}
+        >
+          <IoMdAdd className="w-4 h-4" />
+          <span className="text-sm font-medium">
+            {isPending ? "Adding..." : "Add New Day"}
+          </span>
+        </Pecha.Button>
+      </Pecha.AlertDialogTrigger>
+      <Pecha.AlertDialogContent>
+        <Pecha.AlertDialogHeader>
+          <Pecha.AlertDialogTitle>Add New Day</Pecha.AlertDialogTitle>
+          <Pecha.AlertDialogDescription>
+            This will create a new day in your plan. You can start adding tasks
+            to it right away.
+          </Pecha.AlertDialogDescription>
+        </Pecha.AlertDialogHeader>
+        <Pecha.AlertDialogFooter>
+          <Pecha.AlertDialogCancel onClick={() => setOpen(false)}>
+            Cancel
+          </Pecha.AlertDialogCancel>
+          <Pecha.AlertDialogAction
+            onClick={handleAdd}
+            disabled={isPending}
+            className="bg-[#AD1B21] dark:text-white hover:bg-[#AD1B21]/90"
+          >
+            {isPending ? "Adding..." : "Add Day"}
+          </Pecha.AlertDialogAction>
+        </Pecha.AlertDialogFooter>
+      </Pecha.AlertDialogContent>
+    </Pecha.AlertDialog>
+  );
+};
+
+export default DayAddDialog;
diff --git a/src/components/ui/molecules/modals/day-audio/DayAudioDialog.tsx b/src/components/ui/molecules/modals/day-audio/DayAudioDialog.tsx
new file mode 100644
index 00000000..68fc978e
--- /dev/null
+++ b/src/components/ui/molecules/modals/day-audio/DayAudioDialog.tsx
@@ -0,0 +1,128 @@
+import { useEffect, useRef, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { AiOutlineSound } from "react-icons/ai";
+import DayAudioSection from "@/components/ui/molecules/day-audio-section/DayAudioSection";
+import TtsGenerateControls from "@/components/ui/molecules/tts-generate-controls/TtsGenerateControls";
+import {
+  generateDayAudio,
+  waitForAudioJob,
+} from "@/components/routes/task/api/taskApi";
+
+interface DayAudioDialogProps {
+  planId: string;
+  planTitle?: string;
+  dayId: string;
+  dayNumber: number;
+  audioUrl?: string | null;
+  audioDurationMs?: number | null;
+  hasAudio?: boolean;
+  isEditable?: boolean;
+  language?: string;
+}
+
+const DayAudioDialog = ({
+  planId,
+  planTitle,
+  dayId,
+  dayNumber,
+  audioUrl,
+  audioDurationMs,
+  hasAudio,
+  isEditable,
+  language,
+}: DayAudioDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const queryClient = useQueryClient();
+  const pollAbortRef = useRef<AbortController | null>(null);
+
+  const abortPolling = () => {
+    pollAbortRef.current?.abort();
+    pollAbortRef.current = null;
+  };
+
+  useEffect(() => abortPolling, []);
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    setOpen(nextOpen);
+    if (!nextOpen) {
+      abortPolling();
+    }
+  };
+
+  const generateAudioMutation = useMutation({
+    mutationFn: async (options: { type?: string; voice_name?: string }) => {
+      abortPolling();
+      const controller = new AbortController();
+      pollAbortRef.current = controller;
+
+      const accepted = await generateDayAudio(
+        { day_id: dayId },
+        { language: language || "", ...options },
+      );
+      toast.success("Audio generation started", {
+        description: "Your audio will be ready soon.",
+      });
+      return waitForAudioJob(accepted.job_id, { signal: controller.signal });
+    },
+    onSuccess: (job) => {
+      if (job.status === "failed") {
+        toast.error("Failed to generate audio", {
+          description: job.error_message || "Something went wrong",
+        });
+        return;
+      }
+      toast.success("Audio generated successfully!");
+      queryClient.invalidateQueries({ queryKey: ["planDetails", planId] });
+    },
+    onError: (error: any) => {
+      if (error?.name === "AbortError") {
+        return;
+      }
+      toast.error("Failed to generate audio", {
+        description: error?.message || "Something went wrong",
+      });
+    },
+  });
+
+  return (
+    <>
+      <span
+        onClick={(e) => {
+          e.stopPropagation();
+          setOpen(true);
+        }}
+        className="flex items-center gap-2 cursor-pointer w-full"
+      >
+        <AiOutlineSound className="w-4 h-4" /> Narration
+      </span>
+      <Pecha.Dialog open={open} onOpenChange={handleOpenChange}>
+        <Pecha.DialogContent className="sm:max-w-lg">
+          <Pecha.DialogHeader>
+            <Pecha.DialogTitle>Day {dayNumber} Narration</Pecha.DialogTitle>
+          </Pecha.DialogHeader>
+          <DayAudioSection
+            planId={planId}
+            planTitle={planTitle}
+            dayId={dayId}
+            dayNumber={dayNumber}
+            audioUrl={audioUrl}
+            audioDurationMs={audioDurationMs}
+            hasAudio={hasAudio}
+            isEditable={isEditable}
+          />
+          {isEditable && (
+            <TtsGenerateControls
+              planLanguage={language || ""}
+              isPending={generateAudioMutation.isPending}
+              onGenerate={(options) => generateAudioMutation.mutate(options)}
+            />
+          )}
+        </Pecha.DialogContent>
+      </Pecha.Dialog>
+    </>
+  );
+};
+
+export default DayAudioDialog;
diff --git a/src/components/ui/molecules/modals/day-create/DayCreateDialog.tsx b/src/components/ui/molecules/modals/day-create/DayCreateDialog.tsx
new file mode 100644
index 00000000..b493f2a3
--- /dev/null
+++ b/src/components/ui/molecules/modals/day-create/DayCreateDialog.tsx
@@ -0,0 +1,372 @@
+import { useEffect, useRef, useState } from "react";
+import { useDebounce } from "use-debounce";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { IoMdAdd, IoMdClose, IoMdRemove } from "react-icons/io";
+import { FiLoader } from "react-icons/fi";
+import { Pecha } from "@/components/ui/shadimport";
+import { Input } from "@/components/ui/atoms/input";
+import {
+  DialogTrigger,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/atoms/dialog";
+import {
+  fetchPlanDetails,
+  searchCmsPlans,
+  type CreateDaysRequest,
+} from "@/components/routes/task/api/planApi";
+import { getNativeLanguageLabel } from "@/components/routes/create-series/utils/language";
+import { normalizeLanguageCode } from "@/lib/languageCodes";
+
+interface DayCreateDialogProps {
+  disabled?: boolean;
+  isPending?: boolean;
+  onSubmit: (req: CreateDaysRequest) => void;
+}
+
+const PLAN_SEARCH_DEBOUNCE_MS = 400;
+const PAGE_SIZE = 10;
+
+const DayCreateDialog = ({
+  disabled,
+  isPending,
+  onSubmit,
+}: DayCreateDialogProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+
+  const [numberOfDays, setNumberOfDays] = useState(1);
+
+  const [templatePlanId, setTemplatePlanId] = useState<string | undefined>();
+  const [templatePlanTitle, setTemplatePlanTitle] = useState("");
+  const [templatePlanLanguage, setTemplatePlanLanguage] = useState("");
+  const [sourceDayId, setSourceDayId] = useState<string | undefined>();
+
+  const [planSearch, setPlanSearch] = useState("");
+  const [debouncedPlanSearch] = useDebounce(
+    planSearch,
+    PLAN_SEARCH_DEBOUNCE_MS,
+  );
+  const [showPlanPicker, setShowPlanPicker] = useState(false);
+
+  const { data: planSearchData, isFetching: isPlanFetching } = useInfiniteQuery(
+    {
+      queryKey: ["day-create-cms-plan-search", debouncedPlanSearch],
+      queryFn: ({ pageParam = 0 }) =>
+        searchCmsPlans({
+          search: debouncedPlanSearch.trim() || undefined,
+          skip: pageParam,
+          limit: PAGE_SIZE,
+        }),
+      getNextPageParam: (lastPage) => {
+        const fetched = lastPage.skip + lastPage.plans.length;
+        return fetched < lastPage.total ? fetched : undefined;
+      },
+      initialPageParam: 0,
+      enabled: open && showPlanPicker,
+      refetchOnWindowFocus: false,
+    },
+  );
+
+  const { data: templatePlanData, isFetching: isTemplatePlanFetching } =
+    useQuery({
+      queryKey: ["day-create-template-plan", templatePlanId],
+      queryFn: () => fetchPlanDetails(templatePlanId!),
+      enabled: !!templatePlanId && open,
+      refetchOnWindowFocus: false,
+    });
+
+  const planOptions = planSearchData?.pages.flatMap((page) => page.plans) ?? [];
+  const templateDays: Array<{ id: string; day_number: number }> =
+    templatePlanData?.days ?? [];
+
+  const resetForm = () => {
+    setNumberOfDays(1);
+    setTemplatePlanId(undefined);
+    setTemplatePlanTitle("");
+    setTemplatePlanLanguage("");
+    setSourceDayId(undefined);
+    setPlanSearch("");
+    setShowPlanPicker(false);
+  };
+
+  const handleOpenChange = (o: boolean) => {
+    setOpen(o);
+    if (!o) resetForm();
+  };
+
+  const addLabel = `Add ${numberOfDays} ${numberOfDays === 1 ? "Day" : "Days"}`;
+
+  const handleSubmit = () => {
+    onSubmit({
+      number_of_days: numberOfDays,
+      source_day_id: sourceDayId,
+    });
+    setOpen(false);
+    resetForm();
+  };
+
+  const formatPlanLanguage = (language: string) => {
+    const code = normalizeLanguageCode(language);
+    return code ? getNativeLanguageLabel(code) : language;
+  };
+
+  const selectPlan = (id: string, title: string, language: string) => {
+    setTemplatePlanId(id);
+    setTemplatePlanTitle(title);
+    setTemplatePlanLanguage(language);
+    setSourceDayId(undefined);
+    setPlanSearch("");
+    setShowPlanPicker(false);
+  };
+
+  const clearPlan = () => {
+    setTemplatePlanId(undefined);
+    setTemplatePlanTitle("");
+    setTemplatePlanLanguage("");
+    setSourceDayId(undefined);
+    setPlanSearch("");
+    setShowPlanPicker(false);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setShowPlanPicker(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const showPlanDropdown =
+    showPlanPicker &&
+    (isPlanFetching ||
+      planOptions.length > 0 ||
+      debouncedPlanSearch.trim().length > 0);
+
+  const planInputValue = showPlanPicker
+    ? planSearch
+    : templatePlanLanguage
+      ? `${templatePlanTitle} (${formatPlanLanguage(templatePlanLanguage)})`
+      : templatePlanTitle;
+
+  return (
+    <Pecha.Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Pecha.Button
+          type="button"
+          disabled={disabled || isPending}
+          variant="destructive"
+          className="cursor-pointer w-full disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <IoMdAdd className="w-4 h-4" />
+          <span className="text-sm font-medium">
+            {isPending ? "Adding..." : "Add New Day"}
+          </span>
+        </Pecha.Button>
+      </DialogTrigger>
+
+      <Pecha.DialogContent className="max-w-md">
+        <Pecha.DialogHeader>
+          <Pecha.DialogTitle>Add Days</Pecha.DialogTitle>
+          <DialogDescription>
+            Add one or more new days to this plan. Optionally copy tasks from an
+            existing day.
+          </DialogDescription>
+        </Pecha.DialogHeader>
+
+        <div className="space-y-5 py-1">
+          {/* Number of days */}
+          <div className="space-y-2">
+            <label htmlFor="num-days-input" className="text-sm font-medium">
+              Number of days
+            </label>
+            <div className="flex items-center gap-3">
+              <button
+                type="button"
+                aria-label="Decrease"
+                disabled={numberOfDays <= 1}
+                className="w-8 h-8 rounded-md border flex items-center justify-center hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                onClick={() => setNumberOfDays((n) => Math.max(1, n - 1))}
+              >
+                <IoMdRemove className="w-4 h-4" />
+              </button>
+              <Input
+                id="num-days-input"
+                type="number"
+                min={1}
+                max={365}
+                value={numberOfDays}
+                onChange={(e) => {
+                  const v = Number.parseInt(e.target.value, 10);
+                  if (!Number.isNaN(v) && v >= 1)
+                    setNumberOfDays(Math.min(365, v));
+                }}
+                className="w-20 text-center"
+              />
+              <button
+                type="button"
+                aria-label="Increase"
+                disabled={numberOfDays >= 365}
+                className="w-8 h-8 rounded-md border flex items-center justify-center hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                onClick={() => setNumberOfDays((n) => Math.min(365, n + 1))}
+              >
+                <IoMdAdd className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+
+          {/* Template section */}
+          <div className="space-y-3 border rounded-lg p-3 bg-muted/30">
+            <p className="text-sm font-medium">
+              Copy tasks from a day{" "}
+              <span className="text-muted-foreground font-normal">
+                (optional)
+              </span>
+            </p>
+
+            {/* Plan search */}
+            <div ref={containerRef} className="space-y-2">
+              <p className="text-xs text-muted-foreground">Plan</p>
+              <div className="relative">
+                <Input
+                  placeholder="Search plans…"
+                  className="bg-background pr-8"
+                  value={planInputValue}
+                  autoComplete="off"
+                  onChange={(e) => {
+                    setPlanSearch(e.target.value);
+                    setShowPlanPicker(true);
+                  }}
+                  onFocus={() => {
+                    setPlanSearch("");
+                    setShowPlanPicker(true);
+                  }}
+                />
+                {templatePlanId && !showPlanPicker && (
+                  <button
+                    type="button"
+                    aria-label="Clear plan"
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                    onClick={clearPlan}
+                  >
+                    <IoMdClose className="h-4 w-4" />
+                  </button>
+                )}
+                {showPlanDropdown && (
+                  <ul className="absolute z-50 mt-1 w-full max-h-48 overflow-y-auto rounded-md border bg-white dark:bg-[#1e1e1e] shadow-md py-1">
+                    {isPlanFetching && planOptions.length === 0 && (
+                      <li className="px-3 py-2 text-sm text-muted-foreground flex items-center gap-2">
+                        <FiLoader className="w-4 h-4 animate-spin" />
+                        Searching plans…
+                      </li>
+                    )}
+                    {planOptions.map((plan) => (
+                      <li key={plan.id}>
+                        <button
+                          type="button"
+                          className="w-full px-3 py-2 text-left text-sm hover:bg-muted/50"
+                          onMouseDown={(e) => e.preventDefault()}
+                          onClick={() =>
+                            selectPlan(plan.id, plan.title, plan.language)
+                          }
+                        >
+                          <span className="block truncate">{plan.title}</span>
+                          <span className="text-xs text-muted-foreground">
+                            {formatPlanLanguage(plan.language)} ·{" "}
+                            {plan.total_days}{" "}
+                            {plan.total_days === 1 ? "day" : "days"}
+                          </span>
+                        </button>
+                      </li>
+                    ))}
+                    {!isPlanFetching &&
+                      planOptions.length === 0 &&
+                      debouncedPlanSearch.trim().length > 0 && (
+                        <li className="px-3 py-2 text-sm text-muted-foreground">
+                          No plans found
+                        </li>
+                      )}
+                    {!isPlanFetching &&
+                      planOptions.length === 0 &&
+                      debouncedPlanSearch.trim().length === 0 && (
+                        <li className="px-3 py-2 text-sm text-muted-foreground">
+                          Start typing to search plans
+                        </li>
+                      )}
+                  </ul>
+                )}
+              </div>
+
+              {/* Day selector */}
+              {templatePlanId && (
+                <div className="space-y-1">
+                  <p className="text-xs text-muted-foreground">Source day</p>
+                  {isTemplatePlanFetching ? (
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground py-1">
+                      <FiLoader className="w-4 h-4 animate-spin" />
+                      Loading days…
+                    </div>
+                  ) : (
+                    <Pecha.Select
+                      value={sourceDayId ?? ""}
+                      onValueChange={(v) =>
+                        setSourceDayId(v === "" ? undefined : v)
+                      }
+                    >
+                      <Pecha.SelectTrigger className="bg-background">
+                        <Pecha.SelectValue placeholder="Select a day…" />
+                      </Pecha.SelectTrigger>
+                      <Pecha.SelectContent>
+                        {templateDays.map((day) => {
+                          return (
+                            <Pecha.SelectItem key={day.id} value={day.id}>
+                              Day {day.day_number}
+                            </Pecha.SelectItem>
+                          );
+                        })}
+                        {templateDays.length === 0 && (
+                          <Pecha.SelectItem value="" disabled>
+                            No days in this plan
+                          </Pecha.SelectItem>
+                        )}
+                      </Pecha.SelectContent>
+                    </Pecha.Select>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Pecha.Button
+            type="button"
+            variant="outline"
+            onClick={() => handleOpenChange(false)}
+          >
+            Cancel
+          </Pecha.Button>
+          <Pecha.Button
+            type="button"
+            disabled={isPending}
+            className="bg-[#AD1B21] dark:text-white hover:bg-[#AD1B21]/90"
+            onClick={handleSubmit}
+          >
+            {isPending ? (
+              <FiLoader className="w-4 h-4 animate-spin" />
+            ) : (
+              addLabel
+            )}
+          </Pecha.Button>
+        </DialogFooter>
+      </Pecha.DialogContent>
+    </Pecha.Dialog>
+  );
+};
+
+export default DayCreateDialog;
diff --git a/src/components/ui/molecules/modals/day-delete/DayDeleteDialog.tsx b/src/components/ui/molecules/modals/day-delete/DayDeleteDialog.tsx
index 90c68eae..23216477 100644
--- a/src/components/ui/molecules/modals/day-delete/DayDeleteDialog.tsx
+++ b/src/components/ui/molecules/modals/day-delete/DayDeleteDialog.tsx
@@ -3,11 +3,10 @@ import { Pecha } from "@/components/ui/shadimport";
 import { FiTrash } from "react-icons/fi";
 
 interface DayDeleteDialogProps {
-  dayId: string;
-  onDelete: (dayId: string) => void;
+  onDelete: () => void;
 }
 
-const DayDeleteDialog = ({ dayId, onDelete }: DayDeleteDialogProps) => {
+const DayDeleteDialog = ({ onDelete }: DayDeleteDialogProps) => {
   const [open, setOpen] = useState(false);
   return (
     <Pecha.AlertDialog open={open} onOpenChange={setOpen}>
@@ -37,7 +36,7 @@ const DayDeleteDialog = ({ dayId, onDelete }: DayDeleteDialogProps) => {
           <Pecha.AlertDialogAction
             className="bg-[#AD1B21] dark:text-white hover:bg-[#AD1B21]/90"
             onClick={() => {
-              onDelete(dayId);
+              onDelete();
               setOpen(false);
             }}
           >
diff --git a/src/components/ui/molecules/modals/day-shareable-images/DayShareableImagesDialog.tsx b/src/components/ui/molecules/modals/day-shareable-images/DayShareableImagesDialog.tsx
new file mode 100644
index 00000000..bd1d0fbd
--- /dev/null
+++ b/src/components/ui/molecules/modals/day-shareable-images/DayShareableImagesDialog.tsx
@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { Pecha } from "@/components/ui/shadimport";
+import { MdImage } from "react-icons/md";
+import DayShareableImageUpload from "@/components/ui/molecules/day-shareable-images/DayShareableImageUpload";
+
+interface DayShareableImagesDialogProps {
+  planId: string;
+  dayId: string;
+  dayNumber: number;
+  thumbnailUrl?: string | null;
+  shareableImageUrl?: string | null;
+  isEditable?: boolean;
+}
+
+const DayShareableImagesDialog = ({
+  planId,
+  dayId,
+  dayNumber,
+  thumbnailUrl,
+  shareableImageUrl,
+  isEditable,
+}: DayShareableImagesDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const imageCount = [thumbnailUrl, shareableImageUrl].filter(Boolean).length;
+
+  return (
+    <>
+      <span
+        onClick={(e) => {
+          e.stopPropagation();
+          setOpen(true);
+        }}
+        className="flex items-center gap-2 cursor-pointer w-full"
+      >
+        <MdImage className="w-4 h-4" /> Shareable images
+        {imageCount > 0 && (
+          <span className="ml-auto text-xs text-muted-foreground">
+            {imageCount}/2
+          </span>
+        )}
+      </span>
+
+      <Pecha.Dialog open={open} onOpenChange={setOpen}>
+        <Pecha.DialogContent className="sm:max-w-lg">
+          <Pecha.DialogHeader>
+            <Pecha.DialogTitle>
+              Day {dayNumber} shareable images
+            </Pecha.DialogTitle>
+          </Pecha.DialogHeader>
+
+          <div className="space-y-4 max-h-[70vh] overflow-y-auto">
+            <DayShareableImageUpload
+              planId={planId}
+              dayId={dayId}
+              imageType="thumbnail"
+              label="Thumbnail"
+              imageUrl={thumbnailUrl}
+              isEditable={isEditable}
+            />
+            <DayShareableImageUpload
+              planId={planId}
+              dayId={dayId}
+              imageType="shareable_image"
+              label="Shareable image"
+              imageUrl={shareableImageUrl}
+              isEditable={isEditable}
+            />
+          </div>
+        </Pecha.DialogContent>
+      </Pecha.Dialog>
+    </>
+  );
+};
+
+export default DayShareableImagesDialog;
diff --git a/src/components/ui/molecules/modals/day-videos/DayVideosDialog.tsx b/src/components/ui/molecules/modals/day-videos/DayVideosDialog.tsx
new file mode 100644
index 00000000..5b28d0ae
--- /dev/null
+++ b/src/components/ui/molecules/modals/day-videos/DayVideosDialog.tsx
@@ -0,0 +1,269 @@
+import { useEffect, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { SortableList, SortableItem } from "@/components/ui/atoms/sortable";
+import { FaYoutube } from "react-icons/fa";
+import { FiLoader, FiPlus } from "react-icons/fi";
+import { FaTrash } from "react-icons/fa6";
+import { PiDotsSixVertical } from "react-icons/pi";
+import {
+  addDayVideo,
+  deleteDayVideo,
+  reorderDayVideos,
+  type DayVideoSummary,
+} from "@/components/routes/task/api/planApi";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import {
+  getYouTubeVideoId,
+  getYouTubeShortsId,
+  reorderArray,
+} from "@/lib/utils";
+
+interface DayVideosDialogProps {
+  planId: string;
+  dayId: string;
+  dayNumber: number;
+  videos?: DayVideoSummary[];
+  isEditable?: boolean;
+}
+
+const isYouTubeUrl = (url: string) =>
+  Boolean(getYouTubeVideoId(url) || getYouTubeShortsId(url));
+
+const sortByOrder = (videos: DayVideoSummary[]) =>
+  [...videos].sort((a, b) => a.display_order - b.display_order);
+
+const DayVideosDialog = ({
+  planId,
+  dayId,
+  dayNumber,
+  videos = [],
+  isEditable,
+}: DayVideosDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [url, setUrl] = useState("");
+  // Local copy so drag-reorder updates instantly before the server confirms.
+  const [orderedVideos, setOrderedVideos] = useState<DayVideoSummary[]>(
+    sortByOrder(videos),
+  );
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    setOrderedVideos(sortByOrder(videos));
+  }, [videos]);
+
+  const invalidatePlan = () =>
+    queryClient.invalidateQueries({ queryKey: ["planDetails", planId] });
+
+  const addMutation = useMutation({
+    mutationFn: (videoUrl: string) => addDayVideo(dayId, { url: videoUrl }),
+    onSuccess: () => {
+      setUrl("");
+      toast.success("Video added");
+      invalidatePlan();
+    },
+    onError: (error: unknown) => {
+      toast.error("Failed to add video", {
+        description: getApiErrorMessage(error),
+      });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (videoId: string) => deleteDayVideo(dayId, videoId),
+    onSuccess: () => {
+      toast.success("Video removed");
+      invalidatePlan();
+    },
+    onError: (error: unknown) => {
+      toast.error("Failed to remove video", {
+        description: getApiErrorMessage(error),
+      });
+    },
+  });
+
+  const reorderMutation = useMutation({
+    mutationFn: (payload: Array<{ id: string; display_order: number }>) =>
+      reorderDayVideos(dayId, payload),
+    onSuccess: () => {
+      invalidatePlan();
+    },
+    onError: (error: unknown) => {
+      setOrderedVideos(sortByOrder(videos)); // revert optimistic order
+      toast.error("Failed to reorder videos", {
+        description: getApiErrorMessage(error),
+      });
+    },
+  });
+
+  const trimmedUrl = url.trim();
+  const urlIsValid = isYouTubeUrl(trimmedUrl);
+  const isBusy =
+    addMutation.isPending ||
+    deleteMutation.isPending ||
+    reorderMutation.isPending;
+
+  const handleAdd = () => {
+    if (!trimmedUrl || !urlIsValid) return;
+    addMutation.mutate(trimmedUrl);
+  };
+
+  const handleReorder = (activeId: string, overId: string) => {
+    if (activeId === overId) return;
+    const next = reorderArray(orderedVideos, activeId, overId);
+    if (!next) return;
+    setOrderedVideos(next);
+    reorderMutation.mutate(
+      next.map((video, index) => ({ id: video.id, display_order: index })),
+    );
+  };
+
+  return (
+    <>
+      <span
+        onClick={(e) => {
+          e.stopPropagation();
+          setOpen(true);
+        }}
+        className="flex items-center gap-2 cursor-pointer w-full"
+      >
+        <FaYoutube className="w-4 h-4" /> YouTube videos
+        {orderedVideos.length > 0 && (
+          <span className="ml-auto text-xs text-muted-foreground">
+            {orderedVideos.length}
+          </span>
+        )}
+      </span>
+
+      <Pecha.Dialog open={open} onOpenChange={setOpen}>
+        <Pecha.DialogContent className="sm:max-w-lg">
+          <Pecha.DialogHeader>
+            <Pecha.DialogTitle>Day {dayNumber} videos</Pecha.DialogTitle>
+          </Pecha.DialogHeader>
+
+          {isEditable && (
+            <div className="space-y-1">
+              <div className="flex gap-2">
+                <Pecha.Input
+                  type="url"
+                  placeholder="Enter YouTube URL"
+                  value={url}
+                  disabled={isBusy}
+                  onChange={(e) => setUrl(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      handleAdd();
+                    }
+                  }}
+                />
+                <Pecha.Button
+                  type="button"
+                  className="bg-[#A51C21] hover:bg-[#A51C21]/90 shrink-0"
+                  disabled={isBusy || !trimmedUrl || !urlIsValid}
+                  onClick={handleAdd}
+                >
+                  {addMutation.isPending ? (
+                    <FiLoader className="w-4 h-4 animate-spin" />
+                  ) : (
+                    <FiPlus className="w-4 h-4" />
+                  )}
+                  Add
+                </Pecha.Button>
+              </div>
+              {trimmedUrl && !urlIsValid && (
+                <p className="text-xs text-[#A51C21]">
+                  Enter a valid YouTube URL.
+                </p>
+              )}
+            </div>
+          )}
+
+          <div className="max-h-[50vh] overflow-y-auto">
+            {orderedVideos.length === 0 ? (
+              <p className="text-sm text-muted-foreground py-4 text-center">
+                No videos added yet.
+              </p>
+            ) : (
+              <SortableList
+                items={orderedVideos.map((video) => ({ id: video.id }))}
+                onReorder={handleReorder}
+                disabled={!isEditable || isBusy}
+              >
+                <div className="space-y-3">
+                  {orderedVideos.map((video) => {
+                    const videoId =
+                      video.video_id ||
+                      getYouTubeVideoId(video.url) ||
+                      getYouTubeShortsId(video.url);
+                    return (
+                      <SortableItem
+                        key={video.id}
+                        id={video.id}
+                        disabled={!isEditable || isBusy}
+                        className="flex items-center gap-3 rounded-lg border border-dashed border-gray-300 dark:border-input p-2 bg-white dark:bg-[#161616]"
+                      >
+                        {({ listeners }: any) => (
+                          <>
+                            {isEditable && (
+                              <PiDotsSixVertical
+                                className="w-4 h-4 text-gray-400 dark:text-muted-foreground cursor-grab active:cursor-grabbing shrink-0"
+                                {...listeners}
+                              />
+                            )}
+                            {videoId && (
+                              <img
+                                src={`https://img.youtube.com/vi/${videoId}/default.jpg`}
+                                alt={video.title ?? "YouTube video"}
+                                className="w-20 h-14 object-cover rounded shrink-0"
+                              />
+                            )}
+                            <div className="min-w-0 flex-1">
+                              <a
+                                href={video.url}
+                                target="_blank"
+                                rel="noreferrer"
+                                className="text-sm text-foreground hover:underline block truncate"
+                                title={video.title ?? video.url}
+                              >
+                                {video.title || video.url}
+                              </a>
+                              <span className="text-xs text-muted-foreground truncate block">
+                                {video.url}
+                              </span>
+                            </div>
+                            {isEditable && (
+                              <Pecha.Button
+                                type="button"
+                                variant="outline"
+                                size="icon"
+                                className="shrink-0 h-9 w-9"
+                                disabled={isBusy}
+                                title="Remove video"
+                                onClick={() => deleteMutation.mutate(video.id)}
+                              >
+                                {deleteMutation.isPending &&
+                                deleteMutation.variables === video.id ? (
+                                  <FiLoader className="w-4 h-4 animate-spin" />
+                                ) : (
+                                  <FaTrash className="w-4 h-4" />
+                                )}
+                              </Pecha.Button>
+                            )}
+                          </>
+                        )}
+                      </SortableItem>
+                    );
+                  })}
+                </div>
+              </SortableList>
+            )}
+          </div>
+        </Pecha.DialogContent>
+      </Pecha.Dialog>
+    </>
+  );
+};
+
+export default DayVideosDialog;
diff --git a/src/components/ui/molecules/modals/plan-delete/PlanDeleteDialog.tsx b/src/components/ui/molecules/modals/plan-delete/PlanDeleteDialog.tsx
index 771da336..3955fa14 100644
--- a/src/components/ui/molecules/modals/plan-delete/PlanDeleteDialog.tsx
+++ b/src/components/ui/molecules/modals/plan-delete/PlanDeleteDialog.tsx
@@ -3,20 +3,22 @@ import { IoMdTrash } from "react-icons/io";
 import { useState } from "react";
 
 interface PlanDeleteDialogProps {
-  planId: string;
-  onDelete: (planId: string) => void;
+  id: string;
+  onDelete: (id: string) => void;
   trigger?: React.ReactNode;
+  entityLabel?: string;
 }
 
 const PlanDeleteDialog = ({
-  planId,
+  id,
   onDelete,
   trigger,
+  entityLabel = "Plan",
 }: PlanDeleteDialogProps) => {
   const [open, setOpen] = useState(false);
 
   const handleDelete = () => {
-    onDelete(planId);
+    onDelete(id);
     setOpen(false);
   };
 
@@ -31,7 +33,7 @@ const PlanDeleteDialog = ({
             }}
             className="flex items-center gap-2 cursor-pointer w-full"
           >
-            <IoMdTrash className="w-4 h-4" /> Delete Plan
+            <IoMdTrash className="w-4 h-4" /> Delete {entityLabel}
           </span>
         )}
       </Pecha.AlertDialogTrigger>
@@ -39,8 +41,8 @@ const PlanDeleteDialog = ({
         <Pecha.AlertDialogHeader>
           <Pecha.AlertDialogTitle>Are you sure?</Pecha.AlertDialogTitle>
           <Pecha.AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your plan
-            and remove all associated data.
+            This action cannot be undone. This will permanently delete your{" "}
+            {entityLabel.toLowerCase()} and remove all associated data.
           </Pecha.AlertDialogDescription>
         </Pecha.AlertDialogHeader>
         <Pecha.AlertDialogFooter>
@@ -51,7 +53,7 @@ const PlanDeleteDialog = ({
             className="bg-[#AD1B21] dark:text-white hover:bg-[#AD1B21]/90"
             onClick={handleDelete}
           >
-            Delete Plan
+            Delete {entityLabel}
           </Pecha.AlertDialogAction>
         </Pecha.AlertDialogFooter>
       </Pecha.AlertDialogContent>
diff --git a/src/components/ui/molecules/nav-bar/Navbar.tsx b/src/components/ui/molecules/nav-bar/Navbar.tsx
index a8cbf26b..6e417206 100644
--- a/src/components/ui/molecules/nav-bar/Navbar.tsx
+++ b/src/components/ui/molecules/nav-bar/Navbar.tsx
@@ -1,9 +1,12 @@
 import pechaIcon from "../../../../assets/icon/pecha_icon.png";
 import { Link, useLocation } from "react-router-dom";
 import { ModeToggle } from "../mode-toggle/modetoggle";
-// import { IoAnalytics } from "react-icons/io5";
-import { MdDashboard } from "react-icons/md";
-import { IoPricetags } from "react-icons/io5";
+import { IoAnalytics, IoPricetags, IoPeople } from "react-icons/io5";
+import {
+  MdDashboard,
+  MdAdminPanelSettings,
+  MdPublicOff,
+} from "react-icons/md";
 import { ROUTES } from "@/routes/paths";
 import { LanguageToggle } from "../language-toggle/languageToggle";
 import AuthLogout from "../auth-logout/AuthLogout";
@@ -14,6 +17,10 @@ import {
   TooltipTrigger,
 } from "../../atoms/tooltip";
 import AuthAvatar from "@/components/ui/molecules/auth-avatar/AuthAvatar";
+import NotificationBell from "@/components/ui/molecules/notification-bell/NotificationBell";
+import VerseOfDayButton from "@/components/routes/verse-of-day/VerseOfDayButton";
+import { useUserInfo } from "@/hooks/useUserInfo";
+import { canAccessAdminAuthors } from "@/lib/platformAccess";
 
 const navItems = [
   {
@@ -22,17 +29,24 @@ const navItems = [
     path: ROUTES.dashboard,
     tooltip: "Go to dashboard",
   },
+  {
+    icon: <IoAnalytics className="w-4 h-4" />,
+    label: "studio.nav.analytics",
+    path: ROUTES.analytics,
+    tooltip: "View analytics",
+  },
   {
     icon: <IoPricetags className="w-4 h-4" />,
     label: "Tags",
     path: ROUTES.tags,
     tooltip: "Manage tags",
   },
-  // {
-  //   icon: <IoAnalytics className="w-4 h-4" />,
-  //   label: "studio.nav.analytics",
-  //   path: "/analytics",
-  // },
+  {
+    icon: <IoPeople className="w-4 h-4" />,
+    label: "Groups",
+    path: ROUTES.groups,
+    tooltip: "Manage author groups",
+  },
 ];
 const tooltipItems = [
   {
@@ -63,6 +77,28 @@ const tooltipItems = [
 
 const Navbar = () => {
   const location = useLocation();
+  const { data: userInfo } = useUserInfo();
+  const showAdminAuthors = canAccessAdminAuthors(userInfo?.platform_role);
+
+  const allNavItems = [
+    ...navItems,
+    ...(showAdminAuthors
+      ? [
+          {
+            icon: <MdAdminPanelSettings className="w-4 h-4" />,
+            label: "Authors",
+            path: ROUTES.adminAuthors,
+            tooltip: "Author administration",
+          },
+          {
+            icon: <MdPublicOff className="w-4 h-4" />,
+            label: "China",
+            path: ROUTES.adminChinaRestrictions,
+            tooltip: "China content restrictions",
+          },
+        ]
+      : []),
+  ];
 
   return (
     <TooltipProvider>
@@ -79,12 +115,26 @@ const Navbar = () => {
             />
           </Link>
           <div className="flex flex-col space-y-4 items-center w-full">
-            {navItems.map((item, index) => (
+            {allNavItems.map((item, index) => (
               <Tooltip key={index}>
                 <TooltipTrigger asChild>
                   <Link
                     to={item.path}
-                    className={` border p-2 rounded-md dark:hover:text-white hover:text-black transition-all duration-300 hover:cursor-pointer ${location.pathname === item.path || (item.path === ROUTES.dashboard && location.pathname === "/") ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-400 dark:text-zinc-600"}`}
+                    className={` border p-2 rounded-md dark:hover:text-white hover:text-black transition-all duration-300 hover:cursor-pointer ${
+                      location.pathname === item.path ||
+                      (item.path === ROUTES.dashboard &&
+                        location.pathname === "/") ||
+                      (item.path === ROUTES.groups &&
+                        location.pathname.startsWith("/groups")) ||
+                      (item.path === ROUTES.adminAuthors &&
+                        location.pathname.startsWith(ROUTES.adminAuthors)) ||
+                      (item.path === ROUTES.adminChinaRestrictions &&
+                        location.pathname.startsWith(
+                          ROUTES.adminChinaRestrictions,
+                        ))
+                        ? "text-zinc-900 dark:text-zinc-100"
+                        : "text-zinc-400 dark:text-zinc-600"
+                    }`}
                   >
                     {item.icon}
                   </Link>
@@ -94,6 +144,8 @@ const Navbar = () => {
                 </TooltipContent>
               </Tooltip>
             ))}
+            <NotificationBell />
+            <VerseOfDayButton />
           </div>
         </div>
         <div className="flex flex-col items-center h-44 space-y-2 pb-2">
diff --git a/src/components/ui/molecules/notification-bell/NotificationBell.tsx b/src/components/ui/molecules/notification-bell/NotificationBell.tsx
new file mode 100644
index 00000000..8df1483d
--- /dev/null
+++ b/src/components/ui/molecules/notification-bell/NotificationBell.tsx
@@ -0,0 +1,299 @@
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { IoClose, IoNotificationsOutline } from "react-icons/io5";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { Button } from "@/components/ui/atoms/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/atoms/tooltip";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import { ROUTES } from "@/routes/paths";
+import {
+  acceptGroupInvite,
+  rejectGroupInvite,
+} from "@/components/routes/groups/api/groupsApi";
+import {
+  acceptTransferRequest,
+  rejectTransferRequest,
+} from "@/components/routes/content-transfer/api/transferApi";
+import {
+  fetchNotifications,
+  getTransferNotificationTargetGroupId,
+  isContentTransferNotification,
+  isGroupInviteNotification,
+  markNotificationRead,
+  type NotificationDTO,
+} from "@/components/routes/notifications/api/notificationsApi";
+
+const NotificationBell = () => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [open, setOpen] = useState(false);
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["cms-notifications", { unread_only: true }],
+    queryFn: () => fetchNotifications({ unread_only: true, limit: 30 }),
+    refetchInterval: 60_000,
+    refetchOnWindowFocus: true,
+  });
+
+  const unreadCount = data?.total ?? 0;
+
+  const invalidateNotifications = () => {
+    queryClient.invalidateQueries({ queryKey: ["cms-notifications"] });
+    queryClient.invalidateQueries({ queryKey: ["cms-my-group-invites"] });
+    queryClient.invalidateQueries({ queryKey: ["cms-groups"] });
+  };
+
+  const dismissMutation = useMutation({
+    mutationFn: (notificationId: string) =>
+      markNotificationRead(notificationId),
+    onSuccess: () => invalidateNotifications(),
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const inviteActionMutation = useMutation({
+    mutationFn: async ({
+      inviteId,
+      action,
+    }: {
+      inviteId: string;
+      action: "accept" | "reject";
+    }) => {
+      if (action === "accept") {
+        return acceptGroupInvite(inviteId);
+      }
+      await rejectGroupInvite(inviteId);
+      return null;
+    },
+    onSuccess: (group, { action }) => {
+      if (action === "accept") {
+        toast.success("Invitation accepted");
+        setOpen(false);
+        if (group) {
+          navigate(ROUTES.group(group.id));
+        }
+      } else {
+        toast.success("Invitation declined");
+      }
+      invalidateNotifications();
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const handleInviteAction = (
+    notification: NotificationDTO,
+    action: "accept" | "reject",
+  ) => {
+    const inviteId = notification.reference_id;
+    if (!inviteId) {
+      toast.error("Invalid invitation notification");
+      return;
+    }
+    inviteActionMutation.mutate({ inviteId, action });
+  };
+
+  const transferActionMutation = useMutation({
+    mutationFn: async ({
+      requestId,
+      action,
+    }: {
+      requestId: string;
+      action: "accept" | "reject";
+    }) => {
+      if (action === "accept") {
+        return acceptTransferRequest(requestId);
+      }
+      await rejectTransferRequest(requestId);
+      return null;
+    },
+    onSuccess: (_data, { action }) => {
+      toast.success(
+        action === "accept" ? "Transfer accepted" : "Transfer rejected",
+      );
+      invalidateNotifications();
+      queryClient.invalidateQueries({ queryKey: ["transfer-requests"] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard-items"] });
+    },
+    onError: (err) => toast.error(getApiErrorMessage(err)),
+  });
+
+  const handleTransferAction = (
+    notification: NotificationDTO,
+    action: "accept" | "reject",
+  ) => {
+    const requestId = notification.reference_id;
+    if (!requestId) {
+      toast.error("Invalid transfer notification");
+      return;
+    }
+    transferActionMutation.mutate({ requestId, action });
+  };
+
+  const invitePending =
+    inviteActionMutation.isPending || transferActionMutation.isPending;
+
+  const handleMenuOpenChange = (next: boolean) => {
+    setOpen(next);
+    setTooltipOpen(false);
+  };
+
+  return (
+    <Pecha.DropdownMenu open={open} onOpenChange={handleMenuOpenChange}>
+      <Tooltip open={open ? false : tooltipOpen} onOpenChange={setTooltipOpen}>
+        <TooltipTrigger asChild>
+          <Pecha.DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              className="relative border p-2 rounded-md text-zinc-400 dark:text-zinc-600 hover:text-black dark:hover:text-white transition-colors"
+              aria-label="Notifications"
+            >
+              <IoNotificationsOutline className="w-4 h-4" />
+              {unreadCount > 0 && (
+                <span className="absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[#A51C21] px-1 text-[10px] font-medium text-white">
+                  {unreadCount > 9 ? "9+" : unreadCount}
+                </span>
+              )}
+            </button>
+          </Pecha.DropdownMenuTrigger>
+        </TooltipTrigger>
+        <TooltipContent side="right">Notifications</TooltipContent>
+      </Tooltip>
+
+      <Pecha.DropdownMenuContent
+        side="right"
+        align="start"
+        className="w-80 max-h-[min(24rem,70vh)] overflow-auto p-0"
+        onCloseAutoFocus={(event) => event.preventDefault()}
+      >
+        <div className="border-b px-3 py-2 font-medium text-sm">
+          Notifications
+        </div>
+        {isLoading ? (
+          <p className="px-3 py-4 text-sm text-muted-foreground">Loading…</p>
+        ) : !data?.notifications.length ? (
+          <p className="px-3 py-4 text-sm text-muted-foreground">
+            No unread notifications
+          </p>
+        ) : (
+          <ul className="divide-y">
+            {data.notifications.map((notification) => (
+              <li key={notification.id} className="relative px-3 py-3 pr-9">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="absolute top-2 right-1 h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
+                  aria-label="Dismiss notification"
+                  disabled={invitePending || dismissMutation.isPending}
+                  onClick={() => dismissMutation.mutate(notification.id)}
+                >
+                  <IoClose className="h-4 w-4" />
+                </Button>
+                <div className="space-y-2">
+                  <p className="text-sm font-medium leading-snug pr-1">
+                    {notification.title}
+                  </p>
+                  {notification.description && (
+                    <p className="text-xs text-muted-foreground">
+                      {notification.description}
+                    </p>
+                  )}
+                  {isGroupInviteNotification(notification) && (
+                    <div className="flex flex-wrap gap-2">
+                      <Button
+                        type="button"
+                        size="sm"
+                        className="bg-[#A51C21] text-white hover:bg-[#A51C21]/90 h-7 text-xs"
+                        disabled={invitePending}
+                        onClick={() =>
+                          handleInviteAction(notification, "accept")
+                        }
+                      >
+                        {inviteActionMutation.isPending &&
+                        inviteActionMutation.variables?.action === "accept"
+                          ? "Accepting…"
+                          : "Accept"}
+                      </Button>
+                      <Button
+                        type="button"
+                        size="sm"
+                        variant="outline"
+                        className="h-7 text-xs"
+                        disabled={invitePending}
+                        onClick={() =>
+                          handleInviteAction(notification, "reject")
+                        }
+                      >
+                        {inviteActionMutation.isPending &&
+                        inviteActionMutation.variables?.action === "reject"
+                          ? "Declining…"
+                          : "Reject"}
+                      </Button>
+                    </div>
+                  )}
+                  {isContentTransferNotification(notification) && (
+                    <div className="flex flex-col gap-2">
+                      <div className="flex flex-wrap gap-2">
+                        <Button
+                          type="button"
+                          size="sm"
+                          className="bg-[#A51C21] text-white hover:bg-[#A51C21]/90 h-7 text-xs"
+                          disabled={invitePending}
+                          onClick={() =>
+                            handleTransferAction(notification, "accept")
+                          }
+                        >
+                          Accept
+                        </Button>
+                        <Button
+                          type="button"
+                          size="sm"
+                          variant="outline"
+                          className="h-7 text-xs"
+                          disabled={invitePending}
+                          onClick={() =>
+                            handleTransferAction(notification, "reject")
+                          }
+                        >
+                          Reject
+                        </Button>
+                      </div>
+                      {getTransferNotificationTargetGroupId(notification) ? (
+                        <Button
+                          type="button"
+                          size="sm"
+                          variant="link"
+                          className="h-auto p-0 text-xs text-[#A51C21]"
+                          onClick={() => {
+                            setOpen(false);
+                            navigate(
+                              ROUTES.groupTransfers(
+                                getTransferNotificationTargetGroupId(
+                                  notification,
+                                )!,
+                              ),
+                            );
+                          }}
+                        >
+                          View on group page
+                        </Button>
+                      ) : null}
+                    </div>
+                  )}
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </Pecha.DropdownMenuContent>
+    </Pecha.DropdownMenu>
+  );
+};
+
+export default NotificationBell;
diff --git a/src/components/ui/molecules/profile-edit-form/ProfileEditForm.tsx b/src/components/ui/molecules/profile-edit-form/ProfileEditForm.tsx
index 2ef038a0..2ac02c8d 100644
--- a/src/components/ui/molecules/profile-edit-form/ProfileEditForm.tsx
+++ b/src/components/ui/molecules/profile-edit-form/ProfileEditForm.tsx
@@ -13,6 +13,7 @@ import { profileSchema, type ProfileFormData } from "@/schema/ProfileSchema";
 import { toast } from "sonner";
 import ImageContentData from "@/components/ui/molecules/modals/image-upload/ImageContentData";
 import { uploadImageToS3 } from "@/components/routes/task/api/taskApi";
+import { USER_INFO_QUERY_KEY } from "@/hooks/useUserInfo";
 
 const getUrlError = (account: string, url: string): string | null => {
   if (!account || !url || account === "email") return null;
@@ -89,7 +90,7 @@ const ProfileEditForm = ({ userInfo, onSuccess }: ProfileEditFormProps) => {
       profileData: ProfileFormData & { social_profiles?: SocialProfile[] },
     ) => updateUserProfile(profileData),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["userInfo"] });
+      queryClient.invalidateQueries({ queryKey: USER_INFO_QUERY_KEY });
       onSuccess();
       toast.success("Profile updated successfully!");
     },
@@ -111,7 +112,7 @@ const ProfileEditForm = ({ userInfo, onSuccess }: ProfileEditFormProps) => {
       });
       setIsImageDialogOpen(false);
       toast.success("Image uploaded successfully!");
-    } catch (error) {
+    } catch {
       toast.error("Failed to upload image");
     } finally {
       setIsImageUploading(false);
diff --git a/src/components/ui/molecules/series-table/SeriesTable.tsx b/src/components/ui/molecules/series-table/SeriesTable.tsx
new file mode 100644
index 00000000..dd930066
--- /dev/null
+++ b/src/components/ui/molecules/series-table/SeriesTable.tsx
@@ -0,0 +1,198 @@
+import { Pecha } from "@/components/ui/shadimport";
+import { useState } from "react";
+import { FaChevronDown, FaChevronRight } from "react-icons/fa6";
+import { BsThreeDotsVertical } from "react-icons/bs";
+import { IoMdTrash } from "react-icons/io";
+import PlanDeleteDialog from "@/components/ui/molecules/modals/plan-delete/PlanDeleteDialog";
+
+export interface SeriesPlanSummary {
+  id: string;
+  title: string;
+}
+
+export interface SeriesRow {
+  id: string;
+  title: string;
+  total_days: number;
+  enrolled: number;
+  status: "PUBLISHED" | "UNPUBLISHED" | "DRAFT" | "ARCHIVED";
+  language: string;
+  featured: boolean;
+  plans: SeriesPlanSummary[];
+}
+
+interface SeriesTableProps {
+  series: SeriesRow[];
+  isLoading?: boolean;
+  error?: any;
+  onDeleteSeries: (seriesId: string) => void;
+}
+
+function StatusDot({ status }: { status: SeriesRow["status"] }) {
+  const color =
+    status === "PUBLISHED"
+      ? "bg-green-500"
+      : status === "UNPUBLISHED"
+        ? "bg-red-500"
+        : status === "ARCHIVED"
+          ? "bg-gray-500"
+          : "bg-sky-500";
+
+  return <span className={`inline-block h-2.5 w-2.5 rounded-full ${color}`} />;
+}
+
+export function SeriesTable({
+  series,
+  isLoading,
+  error,
+  onDeleteSeries,
+}: SeriesTableProps) {
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+
+  const toggleRow = (id: string) =>
+    setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
+
+  const renderBody = () => {
+    if (isLoading) {
+      return (
+        <Pecha.TableRow>
+          <Pecha.TableCell colSpan={7} className="text-center py-6">
+            Loading...
+          </Pecha.TableCell>
+        </Pecha.TableRow>
+      );
+    }
+
+    if (error) {
+      return (
+        <Pecha.TableRow>
+          <Pecha.TableCell
+            colSpan={7}
+            className="text-center py-6 text-red-500"
+          >
+            {error.message}
+          </Pecha.TableCell>
+        </Pecha.TableRow>
+      );
+    }
+
+    if (series.length === 0) {
+      return (
+        <Pecha.TableRow>
+          <Pecha.TableCell
+            colSpan={7}
+            className="text-center py-6 text-muted-foreground"
+          >
+            No series found.
+          </Pecha.TableCell>
+        </Pecha.TableRow>
+      );
+    }
+
+    return series.flatMap((s) => {
+      const isOpen = !!expanded[s.id];
+      const Chevron = isOpen ? FaChevronDown : FaChevronRight;
+
+      return [
+        <Pecha.TableRow key={s.id} className="dark:bg-background">
+          <Pecha.TableCell className="w-[44px]">
+            <Pecha.Button
+              variant="ghost"
+              size="icon"
+              onClick={() => toggleRow(s.id)}
+              aria-label={isOpen ? "Collapse row" : "Expand row"}
+            >
+              <Chevron size={14} />
+            </Pecha.Button>
+          </Pecha.TableCell>
+          <Pecha.TableCell className="font-semibold text-sm">
+            {s.title}
+          </Pecha.TableCell>
+          <Pecha.TableCell>{s.total_days} Days</Pecha.TableCell>
+          <Pecha.TableCell>{s.enrolled}</Pecha.TableCell>
+          <Pecha.TableCell>
+            <StatusDot status={s.status} />
+          </Pecha.TableCell>
+          <Pecha.TableCell>{s.language || "-"}</Pecha.TableCell>
+          <Pecha.TableCell>{s.featured ? "Yes" : "No"}</Pecha.TableCell>
+          <Pecha.TableCell className="w-[120px]">
+            <Pecha.DropdownMenu>
+              <Pecha.DropdownMenuTrigger asChild>
+                <Pecha.Button
+                  variant="outline"
+                  size="icon"
+                  aria-label="Actions"
+                >
+                  <BsThreeDotsVertical />
+                </Pecha.Button>
+              </Pecha.DropdownMenuTrigger>
+              <Pecha.DropdownMenuContent
+                align="end"
+                className="[--radius:1rem]"
+              >
+                <PlanDeleteDialog
+                  id={s.id}
+                  entityLabel="Series"
+                  onDelete={onDeleteSeries}
+                  trigger={
+                    <Pecha.DropdownMenuItem
+                      variant="destructive"
+                      onSelect={(e) => e.preventDefault()}
+                    >
+                      <span className="flex items-center gap-2 w-full">
+                        <IoMdTrash className="h-4 w-4" />
+                        Delete Series
+                      </span>
+                    </Pecha.DropdownMenuItem>
+                  }
+                />
+              </Pecha.DropdownMenuContent>
+            </Pecha.DropdownMenu>
+          </Pecha.TableCell>
+        </Pecha.TableRow>,
+        isOpen ? (
+          <Pecha.TableRow
+            key={`${s.id}__expanded`}
+            className="dark:bg-background"
+          >
+            <Pecha.TableCell />
+            <Pecha.TableCell colSpan={7} className="py-3">
+              <div className="text-sm">
+                <div className="font-semibold mb-2">Plans in this series</div>
+                {s.plans.length === 0 ? (
+                  <div className="text-muted-foreground">
+                    No plans added yet to this series.
+                  </div>
+                ) : (
+                  <ul className="list-disc pl-5 space-y-1">
+                    {s.plans.map((p) => (
+                      <li key={p.id}>{p.title}</li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            </Pecha.TableCell>
+          </Pecha.TableRow>
+        ) : null,
+      ].filter(Boolean) as any;
+    });
+  };
+
+  return (
+    <Pecha.Table className="bg-white dark:bg-[#181818]">
+      <Pecha.TableHeader className="dark:bg-[#1d1d1f]">
+        <Pecha.TableRow className="font-dynamic">
+          <Pecha.TableHead className="w-[44px]" />
+          <Pecha.TableHead className="font-bold">Title</Pecha.TableHead>
+          <Pecha.TableHead className="font-bold">No. of days</Pecha.TableHead>
+          <Pecha.TableHead className="font-bold">Enrolled</Pecha.TableHead>
+          <Pecha.TableHead className="font-bold">Status</Pecha.TableHead>
+          <Pecha.TableHead className="font-bold">Language</Pecha.TableHead>
+          <Pecha.TableHead className="font-bold">Featured</Pecha.TableHead>
+          <Pecha.TableHead className="font-bold">Actions</Pecha.TableHead>
+        </Pecha.TableRow>
+      </Pecha.TableHeader>
+      <Pecha.TableBody>{renderBody()}</Pecha.TableBody>
+    </Pecha.Table>
+  );
+}
diff --git a/src/components/ui/molecules/shared-form-fields/SharedFormFields.tsx b/src/components/ui/molecules/shared-form-fields/SharedFormFields.tsx
new file mode 100644
index 00000000..9e07c810
--- /dev/null
+++ b/src/components/ui/molecules/shared-form-fields/SharedFormFields.tsx
@@ -0,0 +1,171 @@
+import { IoMdAdd, IoMdClose } from "react-icons/io";
+import type { Control } from "react-hook-form";
+import { Textarea } from "@/components/ui/atoms/textarea";
+import { Pecha } from "@/components/ui/shadimport";
+import TagInput from "@/components/ui/molecules/tag-input/TagInput";
+
+type TitleFieldProps = {
+  control: Control<any>;
+  label: string;
+  placeholder: string;
+};
+
+export const TitleField = ({
+  control,
+  label,
+  placeholder,
+}: TitleFieldProps) => {
+  return (
+    <Pecha.FormField
+      control={control}
+      name="title"
+      render={({ field }) => (
+        <Pecha.FormItem>
+          <Pecha.FormLabel className="text-sm font-bold">
+            {label}
+          </Pecha.FormLabel>
+          <Pecha.FormControl>
+            <Pecha.Input
+              placeholder={placeholder}
+              className="h-12 text-base bg-white"
+              {...field}
+            />
+          </Pecha.FormControl>
+          <Pecha.FormMessage />
+        </Pecha.FormItem>
+      )}
+    />
+  );
+};
+
+type DescriptionFieldProps = {
+  control: Control<any>;
+  label: string;
+  placeholder: string;
+};
+
+export const DescriptionField = ({
+  control,
+  label,
+  placeholder,
+}: DescriptionFieldProps) => {
+  return (
+    <Pecha.FormField
+      control={control}
+      name="description"
+      render={({ field }) => (
+        <Pecha.FormItem>
+          <Pecha.FormLabel className="text-sm font-bold">
+            {label}
+          </Pecha.FormLabel>
+          <Pecha.FormControl>
+            <Textarea
+              placeholder={placeholder}
+              className="min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-base  placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 resize-none"
+              {...field}
+            />
+          </Pecha.FormControl>
+          <Pecha.FormMessage />
+        </Pecha.FormItem>
+      )}
+    />
+  );
+};
+
+type CoverImageFieldProps = {
+  control: Control<any>;
+  heading: string;
+  description: string;
+  imagePreview: string | null;
+  selectedImage: File | null;
+  onOpenUploadDialog: () => void;
+  onRemoveImage: () => void;
+};
+
+export const CoverImageField = ({
+  control,
+  heading,
+  description,
+  imagePreview,
+  selectedImage,
+  onOpenUploadDialog,
+  onRemoveImage,
+}: CoverImageFieldProps) => {
+  return (
+    <Pecha.FormField
+      control={control}
+      name="image_url"
+      render={({ field }) => (
+        <Pecha.FormItem>
+          <div>
+            <h3 className="text-sm font-bold">{heading}</h3>
+            <p className="text-sm text-muted-foreground">{description}</p>
+          </div>
+          <Pecha.FormControl>
+            <div className="flex gap-4 mt-4 items-start">
+              {!imagePreview && (
+                <button
+                  type="button"
+                  onClick={onOpenUploadDialog}
+                  className="border w-48 h-32 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors cursor-pointer focus:outline-none"
+                  aria-label="Upload cover image"
+                >
+                  <IoMdAdd className="mx-auto h-8 w-8 text-gray-400 mb-2" />
+                </button>
+              )}
+
+              {imagePreview && (
+                <div className="relative">
+                  <img
+                    src={imagePreview}
+                    alt="Cover preview"
+                    className="w-48 h-32 object-cover rounded-lg border"
+                  />
+                  <div className="flex items-center justify-between absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent rounded-b-lg p-2">
+                    {selectedImage && (
+                      <p className="text-xs text-white truncate max-w-32">
+                        {selectedImage.name}
+                      </p>
+                    )}
+                    <button
+                      aria-label="Remove image"
+                      type="button"
+                      onClick={onRemoveImage}
+                      className=" text-white cursor-pointer rounded-full p-1 transition-colors ml-2"
+                      data-testid="image-remove"
+                    >
+                      <IoMdClose className="h-4 w-4" />
+                    </button>
+                  </div>
+                </div>
+              )}
+              <input type="hidden" {...field} />
+            </div>
+          </Pecha.FormControl>
+          <Pecha.FormMessage />
+        </Pecha.FormItem>
+      )}
+    />
+  );
+};
+
+type TagsFieldProps = {
+  control: Control<any>;
+};
+
+export const TagsField = ({ control }: TagsFieldProps) => {
+  return (
+    <Pecha.FormField
+      control={control}
+      name="tags"
+      render={({ field }) => (
+        <Pecha.FormItem>
+          <Pecha.FormControl>
+            <TagInput value={field.value} onChange={field.onChange} />
+          </Pecha.FormControl>
+          <Pecha.FormMessage />
+        </Pecha.FormItem>
+      )}
+    />
+  );
+};
diff --git a/src/components/ui/molecules/subtask-card/SubTaskCard.tsx b/src/components/ui/molecules/subtask-card/SubTaskCard.tsx
index afccb502..db388fb9 100644
--- a/src/components/ui/molecules/subtask-card/SubTaskCard.tsx
+++ b/src/components/ui/molecules/subtask-card/SubTaskCard.tsx
@@ -1,6 +1,13 @@
+import { useEffect, useRef, useState } from "react";
+import Dropzone from "react-dropzone";
 import { Pecha } from "@/components/ui/shadimport";
+import { MarkdownEditor } from "@/components/ui/atoms/markdown-editor";
 import { IoMdClose } from "react-icons/io";
-import { FaMinus } from "react-icons/fa6";
+import { FaMinus, FaTrash } from "react-icons/fa6";
+import { FiLoader } from "react-icons/fi";
+import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
+import { useParams } from "react-router-dom";
+import { toast } from "sonner";
 import InlineImageUpload from "@/components/ui/molecules/form-upload/InlineImageUpload";
 import {
   VideoContent,
@@ -8,9 +15,25 @@ import {
   ContentIcon,
   SourceReferenceContent,
 } from "../content-sub/ContentComponents";
-import { getYouTubeDuration } from "@/lib/utils";
+import { getAudioDurationMs, getYouTubeDuration, formatMs } from "@/lib/utils";
+import { AudioTrimmer } from "@/components/ui/molecules/audio-trimmer/AudioTrimmer";
+import {
+  deleteSubTaskAudio,
+  deleteSubTaskTimestamp,
+  generateDayAudio,
+  uploadSubTaskAudio,
+  waitForAudioJob,
+} from "@/components/routes/task/api/taskApi";
+import TtsGenerateControls from "@/components/ui/molecules/tts-generate-controls/TtsGenerateControls";
+import { getPreset } from "@/components/routes/task/api/presetApi";
+
+interface SubTaskTimestamps {
+  start_ms?: number | null;
+  end_ms?: number | null;
+  audio_url?: string | null;
+}
 
-interface VideoSubTask {
+interface VideoSubTask extends SubTaskTimestamps {
   id?: string | null;
   content_type: "VIDEO";
   content: string;
@@ -18,21 +41,21 @@ interface VideoSubTask {
   duration?: string;
 }
 
-interface TextSubTask {
+interface TextSubTask extends SubTaskTimestamps {
   id?: string | null;
   content_type: "TEXT";
   content: string;
   display_order?: number;
 }
 
-interface AudioSubTask {
+interface AudioSubTask extends SubTaskTimestamps {
   id?: string | null;
   content_type: "AUDIO";
   content: string;
   display_order?: number;
 }
 
-interface ImageSubTask {
+interface ImageSubTask extends SubTaskTimestamps {
   id?: string | null;
   content_type: "IMAGE";
   content: string | null;
@@ -40,7 +63,7 @@ interface ImageSubTask {
   display_order?: number;
 }
 
-interface SourceSubTask {
+interface SourceSubTask extends SubTaskTimestamps {
   id?: string | null;
   content_type: "SOURCE_REFERENCE";
   content: string;
@@ -48,6 +71,7 @@ interface SourceSubTask {
   source_text_id?: string | null;
   pecha_segment_id?: string | null;
   segment_ids?: string[] | null;
+  segment_numbers?: number[] | null;
 }
 export type SubTask =
   | VideoSubTask
@@ -63,6 +87,10 @@ interface SubTaskCardProps {
   onRemove: (index: number) => void;
   onImageUpload: (index: number, file: File) => Promise<void> | void;
   onRemoveImage: (index: number) => void;
+  dayAudioUrl?: string | null;
+  dayAudioDurationMs?: number | null;
+  planLanguage?: string;
+  taskId?: string;
 }
 
 const VideoSubtask = ({
@@ -113,11 +141,12 @@ const TextSubtask = ({
   index: number;
   onUpdate: (index: number, updates: Partial<SubTask>) => void;
 }) => (
-  <Pecha.Textarea
-    placeholder="Enter your text content"
-    className="w-full min-h-64 resize-none text-base bg-[#FAFAFA] dark:bg-sidebar-secondary "
+  <MarkdownEditor
     value={subTask.content}
-    onChange={(e) => onUpdate(index, { content: e.target.value })}
+    onChange={(value) => onUpdate(index, { content: value })}
+    placeholder="Enter your text content"
+    className="bg-[#FAFAFA] dark:bg-sidebar-secondary"
+    textareaClassName="min-h-64 bg-[#FAFAFA] dark:bg-sidebar-secondary"
   />
 );
 
@@ -180,9 +209,353 @@ const ImageSubtask = ({
   </>
 );
 
-const SourceSubtask = ({ subTask }: { subTask: SourceSubTask }) => (
-  <SourceReferenceContent content={subTask.content} />
-);
+const SourceSubtask = ({ subTask }: { subTask: SourceSubTask }) => {
+  const { data: preset } = useQuery({
+    queryKey: ["preset", subTask.id],
+    queryFn: () => getPreset(subTask.id!),
+    enabled: !!subTask.id,
+  });
+
+  return (
+    <div className="relative">
+      <SourceReferenceContent
+        content={subTask.content}
+        segmentNumbers={subTask.segment_numbers}
+      />
+      {preset && (
+        <div className="relative mt-2 ml-4">
+          {/* Connecting line */}
+          <div className="absolute -top-2 left-0 w-px h-2 bg-blue-400 dark:bg-blue-500" />
+          <div className="absolute top-0 left-0 w-3 h-px bg-blue-400 dark:bg-blue-500" />
+
+          {/* Version info box */}
+          <div className="ml-4 flex items-center gap-2 px-3 py-2 bg-blue-50 dark:bg-blue-900/20 rounded-md border border-blue-200 dark:border-blue-800">
+            <span className="text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase tracking-wide">
+              {preset.language}
+            </span>
+            <span className="text-xs text-gray-500 dark:text-gray-400">•</span>
+            <span
+              className="text-sm text-gray-700 dark:text-gray-300 truncate max-w-[200px]"
+              title={preset.version_id}
+            >
+              {preset.version_id.substring(0, 8)}...
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const SubtaskAudioControls = ({
+  subTaskId,
+  taskId,
+  planLanguage = "",
+  audioUrl,
+}: {
+  subTaskId: string;
+  taskId?: string;
+  planLanguage?: string;
+  audioUrl?: string | null;
+}) => {
+  const queryClient = useQueryClient();
+  const { planId } = useParams<{ planId: string }>();
+  const [pendingFile, setPendingFile] = useState<File | null>(null);
+  const [localAudioUrl, setLocalAudioUrl] = useState(audioUrl ?? null);
+  const pollAbortRef = useRef<AbortController | null>(null);
+
+  const abortPolling = () => {
+    pollAbortRef.current?.abort();
+    pollAbortRef.current = null;
+  };
+
+  useEffect(() => {
+    setLocalAudioUrl(audioUrl ?? null);
+    setPendingFile(null);
+  }, [audioUrl, subTaskId]);
+
+  useEffect(() => abortPolling, []);
+
+  const revalidateSubtask = async (nextAudioUrl?: string | null) => {
+    if (nextAudioUrl !== undefined) {
+      setLocalAudioUrl(nextAudioUrl);
+    } else if (taskId) {
+      await queryClient.refetchQueries({ queryKey: ["taskDetails", taskId] });
+      const details = queryClient.getQueryData<{
+        subtasks?: Array<{ id: string; audio_url?: string | null }>;
+      }>(["taskDetails", taskId]);
+      const subtask = details?.subtasks?.find((item) => item.id === subTaskId);
+      setLocalAudioUrl(subtask?.audio_url ?? null);
+    }
+    if (taskId) {
+      queryClient.invalidateQueries({ queryKey: ["taskDetails", taskId] });
+    }
+    if (planId) {
+      queryClient.invalidateQueries({ queryKey: ["planDetails", planId] });
+    }
+  };
+
+  const generateMutation = useMutation({
+    mutationFn: async (options: { type?: string; voice_name?: string }) => {
+      abortPolling();
+      const controller = new AbortController();
+      pollAbortRef.current = controller;
+
+      const accepted = await generateDayAudio(
+        { sub_task_id: subTaskId },
+        { language: planLanguage, ...options },
+      );
+      toast.success("Audio generation started", {
+        description: "Your audio will be ready soon.",
+      });
+      return waitForAudioJob(accepted.job_id, { signal: controller.signal });
+    },
+    onSuccess: async (job) => {
+      if (job.status === "failed") {
+        toast.error("Failed to generate audio", {
+          description: job.error_message || "Something went wrong",
+        });
+        return;
+      }
+      toast.success("Audio generated successfully!");
+      // Refresh from content tables (sub_tasks.audio_url), not job log result
+      await revalidateSubtask();
+    },
+    onError: (error: Error) => {
+      if (error.name === "AbortError") {
+        return;
+      }
+      toast.error("Failed to generate audio", {
+        description: error.message,
+      });
+    },
+  });
+
+  const uploadMutation = useMutation({
+    mutationFn: async (file: File) => {
+      const duration_ms = await getAudioDurationMs(file);
+      return uploadSubTaskAudio(subTaskId, file, duration_ms);
+    },
+    onSuccess: async (data) => {
+      setPendingFile(null);
+      toast.success("Subtask audio uploaded");
+      await revalidateSubtask(data.audio_url);
+    },
+    onError: (error: Error) => {
+      toast.error("Failed to upload subtask audio", {
+        description: error.message,
+      });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: () => deleteSubTaskAudio(subTaskId),
+    onSuccess: async () => {
+      setPendingFile(null);
+      toast.success("Subtask audio removed");
+      await revalidateSubtask(null);
+    },
+    onError: (error: Error) => {
+      toast.error("Failed to remove subtask audio", {
+        description: error.message,
+      });
+    },
+  });
+
+  const isBusy =
+    generateMutation.isPending ||
+    uploadMutation.isPending ||
+    deleteMutation.isPending;
+
+  return (
+    <div className="space-y-3 pt-2 border-t border-dashed border-gray-200 dark:border-input">
+      <p className="text-sm font-medium">Subtask audio</p>
+
+      {localAudioUrl && (
+        <div className="flex items-center gap-2 min-w-0">
+          <audio
+            controls
+            src={localAudioUrl}
+            className="h-9 min-w-0 flex-1"
+            preload="metadata"
+          />
+          <Pecha.Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="shrink-0 h-9 w-9"
+            disabled={isBusy}
+            title="Remove audio"
+            onClick={() => deleteMutation.mutate()}
+          >
+            {deleteMutation.isPending ? (
+              <FiLoader className="w-4 h-4 animate-spin" />
+            ) : (
+              <FaTrash className="w-4 h-4" />
+            )}
+          </Pecha.Button>
+        </div>
+      )}
+
+      <TtsGenerateControls
+        planLanguage={planLanguage}
+        defaultAudioType="INSTRUCTION"
+        size="sm"
+        isPending={generateMutation.isPending}
+        disabled={isBusy}
+        onGenerate={(options) => generateMutation.mutate(options)}
+      />
+
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <span className="w-full border-t" />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-[#ffffff] dark:bg-[#161616] px-2 text-muted-foreground">
+            or upload
+          </span>
+        </div>
+      </div>
+
+      <Dropzone
+        accept={{ "audio/*": [".mp3", ".m4a", ".wav", ".aac", ".ogg"] }}
+        multiple={false}
+        disabled={isBusy}
+        onDrop={(files) => {
+          if (files[0]) setPendingFile(files[0]);
+        }}
+      >
+        {({ getRootProps, getInputProps }) => (
+          <div
+            {...getRootProps()}
+            className="border border-dashed rounded-lg py-2 px-3 text-center text-sm cursor-pointer hover:border-gray-400 dark:hover:border-gray-500 bg-[#FAFAFA] dark:bg-sidebar-secondary"
+          >
+            <input {...getInputProps()} />
+            {pendingFile
+              ? `Selected: ${pendingFile.name}`
+              : localAudioUrl
+                ? "Drop or click to replace subtask audio (MP3, etc.)"
+                : "Drop or click to upload subtask audio"}
+          </div>
+        )}
+      </Dropzone>
+
+      {pendingFile && (
+        <div className="flex gap-2">
+          <Pecha.Button
+            type="button"
+            variant="default"
+            className="bg-[#A51C21] hover:bg-[#A51C21]/90 flex-1"
+            disabled={isBusy}
+            onClick={() => uploadMutation.mutate(pendingFile)}
+          >
+            {uploadMutation.isPending && (
+              <FiLoader className="w-4 h-4 animate-spin mr-1" />
+            )}
+            {uploadMutation.isPending ? "Uploading..." : "Upload audio"}
+          </Pecha.Button>
+          <Pecha.Button
+            type="button"
+            variant="outline"
+            disabled={isBusy}
+            onClick={() => setPendingFile(null)}
+          >
+            Cancel
+          </Pecha.Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const SubtaskTimestampSection = ({
+  subTask,
+  index,
+  onUpdate,
+  dayAudioUrl,
+  dayAudioDurationMs,
+  taskId,
+}: {
+  subTask: SubTask;
+  index: number;
+  onUpdate: (index: number, updates: Partial<SubTask>) => void;
+  dayAudioUrl?: string | null;
+  dayAudioDurationMs?: number | null;
+  taskId?: string;
+}) => {
+  const queryClient = useQueryClient();
+  const { planId } = useParams<{ planId: string }>();
+  const hasPersistedTimestamps =
+    subTask.start_ms != null && subTask.end_ms != null;
+  const hasDayAudio =
+    !!dayAudioUrl && dayAudioDurationMs != null && dayAudioDurationMs > 0;
+
+  const deleteMutation = useMutation({
+    mutationFn: () => deleteSubTaskTimestamp(subTask.id as string),
+    onSuccess: async () => {
+      toast.success("Timestamps removed");
+      onUpdate(index, { start_ms: null, end_ms: null });
+      if (taskId) {
+        queryClient.invalidateQueries({ queryKey: ["taskDetails", taskId] });
+      }
+      if (planId) {
+        queryClient.invalidateQueries({ queryKey: ["planDetails", planId] });
+      }
+    },
+    onError: (error: Error) => {
+      toast.error("Failed to remove timestamps", {
+        description: error.message,
+      });
+    },
+  });
+
+  const handleClearTimestamps = async () => {
+    if (subTask.id && hasPersistedTimestamps) {
+      await deleteMutation.mutateAsync();
+      return;
+    }
+    onUpdate(index, { start_ms: null, end_ms: null });
+  };
+
+  return (
+    <div className="space-y-2 pt-2 border-t border-dashed border-gray-200 dark:border-input">
+      <p className="text-sm font-medium">Timeline (day audio)</p>
+      {hasDayAudio ? (
+        <AudioTrimmer
+          audioUrl={dayAudioUrl}
+          maxDurationMs={dayAudioDurationMs}
+          startMs={subTask.start_ms ?? null}
+          endMs={subTask.end_ms ?? null}
+          onChange={(start_ms, end_ms) => onUpdate(index, { start_ms, end_ms })}
+          onClear={handleClearTimestamps}
+          disabled={deleteMutation.isPending}
+        />
+      ) : (
+        <div className="space-y-2 rounded-md border border-dashed border-gray-300 dark:border-input bg-[#FAFAFA] dark:bg-sidebar-secondary p-3">
+          <p className="text-sm text-muted-foreground">
+            {formatMs(subTask.start_ms as number)} –{" "}
+            {formatMs(subTask.end_ms as number)}
+          </p>
+          <p className="text-xs text-muted-foreground">
+            Day audio is not available. You can remove these timestamps.
+          </p>
+          <Pecha.Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            disabled={deleteMutation.isPending}
+            onClick={handleClearTimestamps}
+          >
+            {deleteMutation.isPending ? (
+              <FiLoader className="w-3 h-3 mr-1 animate-spin" />
+            ) : null}
+            Clear timestamps
+          </Pecha.Button>
+        </div>
+      )}
+    </div>
+  );
+};
 
 export const SubTaskCard = ({
   subTask,
@@ -191,7 +564,16 @@ export const SubTaskCard = ({
   onRemove,
   onImageUpload,
   onRemoveImage,
+  dayAudioUrl,
+  dayAudioDurationMs,
+  planLanguage,
+  taskId,
 }: SubTaskCardProps) => {
+  const hasDayAudio =
+    !!dayAudioUrl && dayAudioDurationMs != null && dayAudioDurationMs > 0;
+  const hasTimestamps = subTask.start_ms != null && subTask.end_ms != null;
+  const showTimestampSection = hasDayAudio || hasTimestamps;
+
   const renderContent = () => {
     switch (subTask.content_type) {
       case "VIDEO":
@@ -239,6 +621,26 @@ export const SubTaskCard = ({
         </Pecha.Button>
       </div>
       {renderContent()}
+      {subTask.id &&
+        (subTask.content_type === "TEXT" ||
+          subTask.content_type === "SOURCE_REFERENCE") && (
+          <SubtaskAudioControls
+            subTaskId={subTask.id}
+            taskId={taskId}
+            planLanguage={planLanguage}
+            audioUrl={subTask.audio_url}
+          />
+        )}
+      {showTimestampSection && (
+        <SubtaskTimestampSection
+          subTask={subTask}
+          index={index}
+          onUpdate={onUpdate}
+          dayAudioUrl={dayAudioUrl}
+          dayAudioDurationMs={dayAudioDurationMs}
+          taskId={taskId}
+        />
+      )}
     </div>
   );
 };
diff --git a/src/components/ui/molecules/subtask-card/subtaskTimestamps.ts b/src/components/ui/molecules/subtask-card/subtaskTimestamps.ts
new file mode 100644
index 00000000..8f678dcc
--- /dev/null
+++ b/src/components/ui/molecules/subtask-card/subtaskTimestamps.ts
@@ -0,0 +1,59 @@
+import type { SubTask } from "./SubTaskCard";
+import { formatMs } from "@/lib/utils";
+
+export function buildSubTaskTimestampFields(
+  subTask: SubTask,
+  isUpdate: boolean,
+): { start_ms?: number | null; end_ms?: number | null } {
+  const { start_ms, end_ms } = subTask;
+  if (start_ms != null && end_ms != null) {
+    return { start_ms, end_ms };
+  }
+  if (isUpdate && start_ms === null && end_ms === null) {
+    return { start_ms: null, end_ms: null };
+  }
+  return {};
+}
+
+export function validateSubTaskTimestamps(
+  subTasks: SubTask[],
+  maxDurationMs?: number | null,
+): string | null {
+  for (let i = 0; i < subTasks.length; i++) {
+    const st = subTasks[i];
+    const hasStart = st.start_ms != null;
+    const hasEnd = st.end_ms != null;
+    if (hasStart !== hasEnd) {
+      return `Subtask ${i + 1}: provide both start and end times, or clear both.`;
+    }
+    if (
+      hasStart &&
+      hasEnd &&
+      (st.start_ms as number) >= (st.end_ms as number)
+    ) {
+      return `Subtask ${i + 1}: start must be before end.`;
+    }
+    if (
+      hasStart &&
+      hasEnd &&
+      maxDurationMs != null &&
+      (st.end_ms as number) > maxDurationMs
+    ) {
+      return `Subtask ${i + 1}: end time must be ≤ day audio (${formatMs(maxDurationMs)}).`;
+    }
+  }
+  return null;
+}
+
+export function mapApiSubtaskTimestamps(data: {
+  start_ms?: number | null;
+  end_ms?: number | null;
+}) {
+  const hasStart = data.start_ms != null;
+  const hasEnd = data.end_ms != null;
+  if (!hasStart && !hasEnd) return {};
+  return {
+    start_ms: data.start_ms ?? null,
+    end_ms: data.end_ms ?? null,
+  };
+}
diff --git a/src/components/ui/molecules/tag-input/TagInput.tsx b/src/components/ui/molecules/tag-input/TagInput.tsx
index 5c860010..7297ac4b 100644
--- a/src/components/ui/molecules/tag-input/TagInput.tsx
+++ b/src/components/ui/molecules/tag-input/TagInput.tsx
@@ -5,9 +5,10 @@ import { Input } from "../../atoms/input";
 interface TagInputProps {
   value?: string[];
   onChange?: (tags: string[]) => void;
+  size?: "sm" | "md";
 }
 
-const TagInput = ({ value = [], onChange }: TagInputProps) => {
+const TagInput = ({ value = [], onChange, size = "md" }: TagInputProps) => {
   const [inputValue, setInputValue] = useState("");
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -31,7 +32,11 @@ const TagInput = ({ value = [], onChange }: TagInputProps) => {
   return (
     <div className=" w-full space-y-2 h-full font-dynamic flex flex-col">
       <p className="text-sm font-bold">Tags</p>
-      <div className=" w-full border p-2 h-100 overflow-auto space-y-4 rounded-md">
+      <div
+        className={`w-full border p-2 overflow-auto space-y-4 rounded-md ${
+          size === "sm" ? "min-h-[100px]" : "h-100"
+        }`}
+      >
         <Input
           placeholder="Add a tag"
           className=" border-none shadow-none bg-white"
diff --git a/src/components/ui/molecules/tts-generate-controls/TtsGenerateControls.tsx b/src/components/ui/molecules/tts-generate-controls/TtsGenerateControls.tsx
new file mode 100644
index 00000000..2290c125
--- /dev/null
+++ b/src/components/ui/molecules/tts-generate-controls/TtsGenerateControls.tsx
@@ -0,0 +1,116 @@
+import { useState } from "react";
+import { Pecha } from "@/components/ui/shadimport";
+import { FiLoader } from "react-icons/fi";
+import { AiOutlineSound } from "react-icons/ai";
+import {
+  DEFAULT_MONLAM_VOICE,
+  DEFAULT_TTS_AUDIO_TYPE,
+  isGeminiTtsLanguage,
+  isTibetanTtsLanguage,
+  isTtsSupportedPlanLanguage,
+  MONLAM_VOICE_REGIONS,
+  type MonlamVoiceName,
+  type TtsAudioType,
+  TTS_AUDIO_TYPES,
+} from "@/lib/ttsConstants";
+
+interface TtsGenerateControlsProps {
+  planLanguage: string;
+  defaultAudioType?: TtsAudioType;
+  isPending?: boolean;
+  disabled?: boolean;
+  size?: "sm" | "default";
+  onGenerate: (options: {
+    type?: TtsAudioType;
+    voice_name?: MonlamVoiceName;
+  }) => void;
+}
+
+const TtsGenerateControls = ({
+  planLanguage,
+  defaultAudioType = DEFAULT_TTS_AUDIO_TYPE,
+  isPending = false,
+  disabled = false,
+  size = "default",
+  onGenerate,
+}: TtsGenerateControlsProps) => {
+  const [audioType, setAudioType] = useState<TtsAudioType>(defaultAudioType);
+  const [voiceName, setVoiceName] =
+    useState<MonlamVoiceName>(DEFAULT_MONLAM_VOICE);
+
+  const isSupported = isTtsSupportedPlanLanguage(planLanguage);
+  const showGeminiOptions = isGeminiTtsLanguage(planLanguage);
+  const showTibetanOptions = isTibetanTtsLanguage(planLanguage);
+  const isDisabled = disabled || isPending || !isSupported;
+  const triggerClassName =
+    size === "sm" ? "w-[160px] h-9" : "w-full sm:w-[200px]";
+
+  const handleGenerate = () => {
+    onGenerate({
+      ...(showGeminiOptions ? { type: audioType } : {}),
+      ...(showTibetanOptions ? { voice_name: voiceName } : {}),
+    });
+  };
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {showGeminiOptions && (
+        <Pecha.Select
+          value={audioType}
+          onValueChange={(value) => setAudioType(value as TtsAudioType)}
+        >
+          <Pecha.SelectTrigger className={triggerClassName}>
+            <Pecha.SelectValue />
+          </Pecha.SelectTrigger>
+          <Pecha.SelectContent>
+            {TTS_AUDIO_TYPES.map(({ value, label }) => (
+              <Pecha.SelectItem key={value} value={value}>
+                {label}
+              </Pecha.SelectItem>
+            ))}
+          </Pecha.SelectContent>
+        </Pecha.Select>
+      )}
+
+      {showTibetanOptions && (
+        <Pecha.Select
+          value={voiceName}
+          onValueChange={(value) => setVoiceName(value as MonlamVoiceName)}
+        >
+          <Pecha.SelectTrigger className={triggerClassName}>
+            <Pecha.SelectValue />
+          </Pecha.SelectTrigger>
+          <Pecha.SelectContent>
+            {MONLAM_VOICE_REGIONS.map((region) => (
+              <Pecha.SelectGroup key={region.label}>
+                <Pecha.SelectLabel>{region.label}</Pecha.SelectLabel>
+                {region.voices.map((voice) => (
+                  <Pecha.SelectItem key={voice.value} value={voice.value}>
+                    {voice.label}
+                  </Pecha.SelectItem>
+                ))}
+              </Pecha.SelectGroup>
+            ))}
+          </Pecha.SelectContent>
+        </Pecha.Select>
+      )}
+
+      <Pecha.Button
+        type="button"
+        variant="outline"
+        size={size === "sm" ? "sm" : "default"}
+        disabled={isDisabled}
+        onClick={handleGenerate}
+      >
+        {isPending ? (
+          <FiLoader className="w-4 h-4 animate-spin" />
+        ) : (
+          <AiOutlineSound className="w-4 h-4" />
+        )}
+        {isPending ? "Generating..." : "Generate Audio"}
+      </Pecha.Button>
+    </div>
+  );
+};
+
+export default TtsGenerateControls;
diff --git a/src/components/ui/molecules/version-selector/VersionSelectorModal.tsx b/src/components/ui/molecules/version-selector/VersionSelectorModal.tsx
new file mode 100644
index 00000000..76f326e4
--- /dev/null
+++ b/src/components/ui/molecules/version-selector/VersionSelectorModal.tsx
@@ -0,0 +1,180 @@
+import { Pecha } from "@/components/ui/shadimport";
+import { useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  fetchTextLanguages,
+  fetchLanguageVersions,
+} from "@/components/api/searchApi";
+import { createOrUpdatePreset } from "@/components/routes/task/api/presetApi";
+import { toast } from "sonner";
+
+interface VersionSelectorModalProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  textId: string;
+  subtaskId?: string;
+  onSuccess?: () => void;
+}
+
+export const VersionSelectorModal = ({
+  isOpen,
+  onOpenChange,
+  textId,
+  subtaskId,
+  onSuccess,
+}: VersionSelectorModalProps) => {
+  const queryClient = useQueryClient();
+  const [selectedLanguage, setSelectedLanguage] = useState<string>("");
+  const [selectedVersion, setSelectedVersion] = useState<string>("");
+  const [isSaving, setIsSaving] = useState(false);
+
+  const { data: languagesData, isLoading: isLoadingLanguages } = useQuery({
+    queryKey: ["textLanguages", textId],
+    queryFn: () => fetchTextLanguages(textId),
+    enabled: isOpen && !!textId,
+  });
+
+  const { data: versionsData, isLoading: isLoadingVersions } = useQuery({
+    queryKey: ["languageVersions", textId, selectedLanguage],
+    queryFn: () => fetchLanguageVersions(textId, selectedLanguage),
+    enabled: isOpen && !!selectedLanguage,
+  });
+
+  const handleSave = async () => {
+    if (!selectedVersion || !selectedLanguage) {
+      toast.error("Please select both language and version");
+      return;
+    }
+
+    if (!subtaskId || subtaskId.trim() === "") {
+      toast.error("Cannot save preset without subtask ID");
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      await createOrUpdatePreset(subtaskId, {
+        version_id: selectedVersion,
+        language: selectedLanguage,
+      });
+
+      // Invalidate preset query to refresh the display
+      queryClient.invalidateQueries({ queryKey: ["preset", subtaskId] });
+
+      toast.success("Version preset saved successfully!");
+      onOpenChange(false);
+      if (onSuccess) {
+        onSuccess();
+      }
+    } catch (error: any) {
+      toast.error(error?.response?.data?.detail || "Failed to save preset");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleClose = () => {
+    setSelectedLanguage("");
+    setSelectedVersion("");
+    onOpenChange(false);
+  };
+
+  const availableLanguages = languagesData?.available_languages || [];
+  const availableVersions = versionsData?.available_versions || [];
+
+  return (
+    <Pecha.Sheet open={isOpen} onOpenChange={handleClose}>
+      <Pecha.SheetContent className="sm:max-w-md p-6">
+        <Pecha.SheetHeader className="mb-6">
+          <Pecha.SheetTitle>Select Text Version</Pecha.SheetTitle>
+          <Pecha.SheetDescription>
+            Choose a language and version for this text reference
+          </Pecha.SheetDescription>
+        </Pecha.SheetHeader>
+
+        <div className="space-y-6">
+          {/* Language Selection */}
+          <div className="space-y-4">
+            <label className="text-sm font-medium block">Language</label>
+            {isLoadingLanguages ? (
+              <div className="text-sm text-gray-500">Loading languages...</div>
+            ) : availableLanguages.length === 0 ? (
+              <div className="text-sm text-gray-500">
+                No versions available for this text
+              </div>
+            ) : (
+              <Pecha.Select
+                value={selectedLanguage}
+                onValueChange={(value) => {
+                  setSelectedLanguage(value);
+                  setSelectedVersion("");
+                }}
+              >
+                <Pecha.SelectTrigger>
+                  <Pecha.SelectValue placeholder="Select a language" />
+                </Pecha.SelectTrigger>
+                <Pecha.SelectContent>
+                  {availableLanguages.map((lang: any) => (
+                    <Pecha.SelectItem
+                      key={lang.language_code}
+                      value={lang.language_code}
+                    >
+                      {lang.language} ({lang.version_count} version
+                      {lang.version_count !== 1 ? "s" : ""})
+                    </Pecha.SelectItem>
+                  ))}
+                </Pecha.SelectContent>
+              </Pecha.Select>
+            )}
+          </div>
+
+          {/* Version Selection */}
+          {selectedLanguage && (
+            <div className="space-y-4">
+              <label className="text-sm font-medium block">Version</label>
+              {isLoadingVersions ? (
+                <div className="text-sm text-gray-500">Loading versions...</div>
+              ) : (
+                <Pecha.Select
+                  value={selectedVersion}
+                  onValueChange={setSelectedVersion}
+                >
+                  <Pecha.SelectTrigger>
+                    <Pecha.SelectValue placeholder="Select a version" />
+                  </Pecha.SelectTrigger>
+                  <Pecha.SelectContent>
+                    {availableVersions.map((version: any) => (
+                      <Pecha.SelectItem key={version.id} value={version.id}>
+                        {version.title}
+                      </Pecha.SelectItem>
+                    ))}
+                  </Pecha.SelectContent>
+                </Pecha.Select>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="flex gap-3 pt-6 mt-8 border-t">
+          <Pecha.Button
+            type="button"
+            variant="outline"
+            onClick={handleClose}
+            disabled={isSaving}
+            className="flex-1"
+          >
+            Cancel
+          </Pecha.Button>
+          <Pecha.Button
+            type="button"
+            onClick={handleSave}
+            disabled={!selectedVersion || isSaving}
+            className="flex-1"
+          >
+            {isSaving ? "Saving..." : "Save"}
+          </Pecha.Button>
+        </div>
+      </Pecha.SheetContent>
+    </Pecha.Sheet>
+  );
+};
diff --git a/src/components/ui/molecules/webuddhist-source/SourceDetail.tsx b/src/components/ui/molecules/webuddhist-source/SourceDetail.tsx
index b6d84c5f..478327a9 100644
--- a/src/components/ui/molecules/webuddhist-source/SourceDetail.tsx
+++ b/src/components/ui/molecules/webuddhist-source/SourceDetail.tsx
@@ -1,12 +1,14 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Pecha } from "@/components/ui/shadimport";
-import { parseSelection } from "@/lib/utils";
+import { useDebounce } from "use-debounce";
+import { parseRangeBounds, parseSelection } from "@/lib/utils";
 
 export interface SourceData {
   content: string;
   pecha_segment_id: string;
   text_id: string;
   segment_ids: string[];
+  segment_numbers?: number[];
 }
 
 const SelectedSourceDetail = ({
@@ -14,30 +16,123 @@ const SelectedSourceDetail = ({
   selectedSource,
   onAdd,
   bottomRef,
+  topRef,
   isFetchingNextPage,
+  isFetchingPreviousPage,
+  isRangeLoading,
+  totalSegments = 0,
+  onRangeNavigate,
+  scrollToSegmentNumber,
 }: {
   segments: any[];
   selectedSource: any;
   onAdd: (sourceData: SourceData) => void;
   bottomRef?: (node?: Element | null) => void;
+  topRef?: (node?: Element | null) => void;
   isFetchingNextPage?: boolean;
+  isFetchingPreviousPage?: boolean;
+  /** True while a range jump request is in flight. */
+  isRangeLoading?: boolean;
+  totalSegments?: number;
+  onRangeNavigate?: (start: number, end: number) => void;
+  scrollToSegmentNumber?: number | null;
 }) => {
   const [rangeInput, setRangeInput] = useState("");
   const [selectAll, setSelectAll] = useState(false);
+  const [debouncedRangeInput] = useDebounce(rangeInput, 400);
+  const lastNavigatedRange = useRef<string | null>(null);
+  const scrolledToRef = useRef<number | null>(null);
 
-  const segmentCount = segments.length;
+  const selectionMax = totalSegments || segments.length;
 
   const selectedIndices = useMemo(() => {
-    if (!segmentCount) return null;
-    return parseSelection(rangeInput, segmentCount);
-  }, [rangeInput, segmentCount]);
+    if (!selectionMax) return null;
+    return parseSelection(rangeInput, selectionMax);
+  }, [rangeInput, selectionMax]);
 
-  const isAddDisabled = !selectedIndices;
+  const loadedSegmentNumbers = useMemo(() => {
+    const numbers = new Set<number>();
+    segments.forEach((seg: any, i: number) => {
+      numbers.add(seg.segment_number ?? i + 1);
+    });
+    return numbers;
+  }, [segments]);
+
+  const rangePending =
+    Boolean(parseRangeBounds(rangeInput)) &&
+    rangeInput.trim() !== debouncedRangeInput.trim();
+
+  const selectionFullyLoaded =
+    selectedIndices != null &&
+    [...selectedIndices].every((n) => loadedSegmentNumbers.has(n));
+
+  const isAddDisabled =
+    !selectedIndices ||
+    !selectionFullyLoaded ||
+    rangePending ||
+    Boolean(isRangeLoading);
+
+  useEffect(() => {
+    lastNavigatedRange.current = null;
+    scrolledToRef.current = null;
+    setRangeInput("");
+    setSelectAll(false);
+  }, [selectedSource?.id]);
+
+  useEffect(() => {
+    const bounds = parseRangeBounds(debouncedRangeInput);
+    if (!bounds || !onRangeNavigate) return;
+
+    const key = `${bounds.start}-${bounds.end}`;
+    if (lastNavigatedRange.current === key) return;
+    lastNavigatedRange.current = key;
+    scrolledToRef.current = null;
+    onRangeNavigate(bounds.start, bounds.end);
+  }, [debouncedRangeInput, onRangeNavigate]);
+
+  useEffect(() => {
+    if (scrollToSegmentNumber == null) {
+      scrolledToRef.current = null;
+      return;
+    }
+    // Only scroll once per range jump — not again when infinite-scroll appends pages.
+    if (scrolledToRef.current === scrollToSegmentNumber) return;
+    if (!loadedSegmentNumbers.has(scrollToSegmentNumber)) return;
+
+    scrolledToRef.current = scrollToSegmentNumber;
+    requestAnimationFrame(() => {
+      const el = document.querySelector(
+        `[data-segment-number="${scrollToSegmentNumber}"]`,
+      );
+      if (!el) {
+        scrolledToRef.current = null;
+        return;
+      }
+      const viewport = el.closest(
+        '[data-slot="scroll-area-viewport"]',
+      ) as HTMLElement | null;
+      if (viewport) {
+        const elRect = el.getBoundingClientRect();
+        const vpRect = viewport.getBoundingClientRect();
+        viewport.scrollTo({
+          top: viewport.scrollTop + (elRect.top - vpRect.top),
+          behavior: "smooth",
+        });
+        return;
+      }
+      el.scrollIntoView({ block: "start", behavior: "smooth" });
+    });
+  }, [scrollToSegmentNumber, loadedSegmentNumbers]);
 
   const handleSelectAll = (checked: boolean) => {
     setSelectAll(checked);
-    if (checked && segmentCount > 0) {
-      setRangeInput(`1-${segmentCount}`);
+    if (checked && segments.length > 0) {
+      const numbers = segments.map(
+        (s: any, i: number) => s.segment_number ?? i + 1,
+      );
+      const first = Math.min(...numbers);
+      const last = Math.max(...numbers);
+      setRangeInput(`${first}-${last}`);
     } else {
       setRangeInput("");
     }
@@ -46,7 +141,15 @@ const SelectedSourceDetail = ({
   const handleAdd = () => {
     if (!selectedIndices || !selectedSource) return;
     const sortedIndices = Array.from(selectedIndices).sort((a, b) => a - b);
-    const selected = sortedIndices.map((i) => segments[i - 1]).filter(Boolean);
+    const selected = sortedIndices
+      .map((n) =>
+        segments.find(
+          (seg: any, i: number) => (seg.segment_number ?? i + 1) === n,
+        ),
+      )
+      .filter(Boolean);
+    if (selected.length === 0) return;
+
     const content = selected.map((seg: any) => seg.content).join("\n");
     const segmentIds = selected.map((seg: any) => seg.segment_id);
     const pechaSegmentId = selected[0]?.pecha_segment_id || "";
@@ -58,6 +161,9 @@ const SelectedSourceDetail = ({
       pecha_segment_id: pechaSegmentId,
       text_id: textId,
       segment_ids: segmentIds,
+      segment_numbers: selected.map(
+        (seg: any, i: number) => seg.segment_number ?? i + 1,
+      ),
     });
   };
 
@@ -65,7 +171,7 @@ const SelectedSourceDetail = ({
     <div className="mt-3 space-y-3">
       <div className="flex items-center justify-between">
         <span className="text-sm text-muted-foreground">
-          Select Range (e.g. 1-{segmentCount})
+          Select Range (e.g. 1-{selectionMax || "N"})
         </span>
         <label className="flex items-center gap-1.5 cursor-pointer">
           <span
@@ -98,7 +204,11 @@ const SelectedSourceDetail = ({
           onClick={handleAdd}
           className="h-10 px-6 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
         >
-          Add
+          {isRangeLoading ||
+          rangePending ||
+          (selectedIndices && !selectionFullyLoaded)
+            ? "Loading…"
+            : "Add"}
         </Pecha.Button>
       </div>
 
@@ -115,18 +225,38 @@ const SelectedSourceDetail = ({
         className="border border-[#DEDEDE] dark:border-[#313132] rounded-[10px] h-[calc(100vh-380px)]"
       >
         <div className="p-4 space-y-4">
+          {segments.length === 0 &&
+            !isFetchingNextPage &&
+            !isFetchingPreviousPage && (
+              <p className="text-center text-sm text-gray-500">
+                Loading segments...
+              </p>
+            )}
+          {topRef && (
+            <div
+              ref={topRef}
+              className="h-5 w-full opacity-0 pointer-events-none"
+            />
+          )}
+          {isFetchingPreviousPage && (
+            <p className="text-center text-sm text-gray-500">
+              Loading earlier segments...
+            </p>
+          )}
           {segments.map((segment: any, segIndex: number) => {
-            const isSelected = selectedIndices?.has(segIndex + 1);
+            const segmentNumber = segment.segment_number ?? segIndex + 1;
+            const isSelected = selectedIndices?.has(segmentNumber);
             return (
               <div
                 key={segment.segment_id || segIndex}
+                data-segment-number={segmentNumber}
                 className={`border p-3 rounded-[10px] text-sm transition-colors bg-[#F9F9F9] dark:bg-sidebar-secondary  ${
                   isSelected
                     ? "border-solid border-foreground dark:border-foreground"
                     : "dark:bg-sidebar-secondary border-dashed border-[#E1E1E1] dark:border-[#313132]"
                 }`}
               >
-                <span className="font-medium">{segIndex + 1}. </span>
+                <span className="font-medium">{segmentNumber}. </span>
                 <span
                   dangerouslySetInnerHTML={{
                     __html: segment.content,
diff --git a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
index 3961af90..0d1d9bbc 100644
--- a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
+++ b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
@@ -1,5 +1,5 @@
 import { Pecha } from "@/components/ui/shadimport";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { IoMdSearch } from "react-icons/io";
 import { useTranslate } from "@tolgee/react";
 import { useDebounce } from "use-debounce";
@@ -14,9 +14,23 @@ import {
   searchTitles,
   fetchTextDetails,
 } from "@/components/api/searchApi";
-import { flattenSegments, getLastSegmentId } from "@/lib/utils";
+import {
+  flattenSegments,
+  getFirstSegmentId,
+  getLastSegmentId,
+} from "@/lib/utils";
 import type { SourceData } from "./SourceDetail";
 
+type TextDetailsPageParam =
+  | {
+      segmentId?: string;
+      direction?: "next" | "previous";
+      start?: number;
+      end?: number;
+      size?: number;
+    }
+  | undefined;
+
 interface SourceSelectorSheetProps {
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
@@ -33,6 +47,15 @@ export const SourceSelectorSheet = ({
   const [pagination, setPagination] = useState({ currentPage: 1, limit: 10 });
   const [searchOnlyTitles, setSearchOnlyTitles] = useState(true);
   const [selectedSource, setSelectedSource] = useState<any>(null);
+  const [segmentRange, setSegmentRange] = useState<{
+    start: number;
+    end: number;
+  } | null>(null);
+  const [scrollToSegmentNumber, setScrollToSegmentNumber] = useState<
+    number | null
+  >(null);
+  /** After a previous-page fetch (or initial/range load), wait until top leaves view before fetching again. */
+  const [blockPreviousUntilLeave, setBlockPreviousUntilLeave] = useState(true);
   const { t } = useTranslate();
 
   const skip = useMemo(
@@ -79,26 +102,64 @@ export const SourceSelectorSheet = ({
   const {
     data: detailsData,
     fetchNextPage,
+    fetchPreviousPage,
     hasNextPage,
+    hasPreviousPage,
+    isFetching,
     isFetchingNextPage,
-  } = useInfiniteQuery({
-    queryKey: ["textDetails", selectedSource?.id],
-    initialPageParam: undefined as
-      | { segmentId: string; direction: "next" | "previous" }
-      | undefined,
+    isFetchingPreviousPage,
+  } = useInfiniteQuery<
+    any,
+    Error,
+    any,
+    (string | { start: number; end: number } | null | undefined)[],
+    TextDetailsPageParam
+  >({
+    queryKey: ["textDetails", selectedSource?.id, segmentRange],
+    initialPageParam: (segmentRange
+      ? { start: segmentRange.start, end: segmentRange.end }
+      : { size: 20 }) as TextDetailsPageParam,
     queryFn: ({ pageParam }) =>
       fetchTextDetails({
         textId: selectedSource.id,
         segmentId: pageParam?.segmentId,
-        direction: pageParam?.direction as "next" | "previous" | undefined,
-        size: 20,
+        direction: pageParam?.direction,
+        size: pageParam?.size ?? 20,
+        start: pageParam?.start,
+        end: pageParam?.end,
       }),
-    getNextPageParam: (lastPage: any) => {
-      if (lastPage?.current_segment_position >= lastPage?.total_segments)
-        return undefined;
-      const lastSegmentId = getLastSegmentId(lastPage.content.sections);
-      if (!lastSegmentId) return undefined;
-      return { segmentId: lastSegmentId, direction: "next" };
+    getNextPageParam: (lastPage) => {
+      if (!lastPage?.has_more_down) return undefined;
+      const segments = flattenSegments(lastPage.content.sections);
+      const lastNumber = segments.at(-1)?.segment_number;
+      if (!lastNumber) {
+        const lastSegmentId = getLastSegmentId(lastPage.content.sections);
+        if (!lastSegmentId) return undefined;
+        return {
+          segmentId: lastSegmentId,
+          direction: "next" as const,
+          size: 20,
+        };
+      }
+      return { start: lastNumber + 1, end: lastNumber + 20 };
+    },
+    getPreviousPageParam: (firstPage) => {
+      if (!firstPage?.has_more_up) return undefined;
+      const segments = flattenSegments(firstPage.content.sections);
+      const firstNumber = segments[0]?.segment_number;
+      if (!firstNumber || firstNumber <= 1) {
+        const firstSegmentId = getFirstSegmentId(firstPage.content.sections);
+        if (!firstSegmentId) return undefined;
+        return {
+          segmentId: firstSegmentId,
+          direction: "previous" as const,
+          size: 20,
+        };
+      }
+      return {
+        start: Math.max(1, firstNumber - 20),
+        end: firstNumber - 1,
+      };
     },
     enabled: !!selectedSource?.id && searchOnlyTitles,
     refetchOnWindowFocus: false,
@@ -109,22 +170,70 @@ export const SourceSelectorSheet = ({
     rootMargin: "50px",
   });
 
+  const { ref: topSentinelRef, inView: isTopVisible } = useInView({
+    threshold: 0.1,
+    rootMargin: "50px",
+  });
+
   useEffect(() => {
     if (isBottomVisible && hasNextPage && !isFetchingNextPage) {
       fetchNextPage();
     }
   }, [isBottomVisible, hasNextPage, isFetchingNextPage, fetchNextPage]);
 
+  // While previous pages are loading/prepended, the top sentinel often stays in view —
+  // block further upward fetches until the user scrolls away from the top.
+  useEffect(() => {
+    if (isFetchingPreviousPage) {
+      setBlockPreviousUntilLeave(true);
+    }
+  }, [isFetchingPreviousPage]);
+
+  useEffect(() => {
+    if (blockPreviousUntilLeave && !isTopVisible) {
+      setBlockPreviousUntilLeave(false);
+    }
+  }, [blockPreviousUntilLeave, isTopVisible]);
+
+  useEffect(() => {
+    if (blockPreviousUntilLeave) return;
+    if (isTopVisible && hasPreviousPage && !isFetchingPreviousPage) {
+      void fetchPreviousPage();
+    }
+  }, [
+    blockPreviousUntilLeave,
+    isTopVisible,
+    hasPreviousPage,
+    isFetchingPreviousPage,
+    fetchPreviousPage,
+  ]);
+
   const detailSegments = useMemo(() => {
     if (!detailsData?.pages) return [];
-    const allSegments = detailsData.pages.flatMap((page) =>
+    const allSegments = detailsData.pages.flatMap((page: any) =>
       flattenSegments(page.content.sections),
     );
     return Array.from(
       new Map(allSegments.map((s: any) => [s.segment_id, s])).values(),
+    ).sort(
+      (a: any, b: any) => (a.segment_number ?? 0) - (b.segment_number ?? 0),
     );
   }, [detailsData?.pages]);
 
+  const totalSegments = detailsData?.pages?.[0]?.total_segments ?? 0;
+
+  const handleRangeNavigate = useCallback((start: number, end: number) => {
+    setBlockPreviousUntilLeave(true);
+    setSegmentRange({ start, end });
+    setScrollToSegmentNumber(start);
+  }, []);
+
+  const isRangeLoading =
+    Boolean(segmentRange) &&
+    isFetching &&
+    !isFetchingNextPage &&
+    !isFetchingPreviousPage;
+
   const isLoading = searchOnlyTitles ? isTitleLoading : isMultilingualLoading;
 
   const sources = searchOnlyTitles
@@ -135,8 +244,8 @@ export const SourceSelectorSheet = ({
     ? detailSegments
     : selectedSource?.segment_matches || [];
 
-  const totalSegments = multilingualData?.total || 0;
-  const totalPages = Math.ceil(totalSegments / pagination.limit);
+  const totalSearchResults = multilingualData?.total || 0;
+  const totalPages = Math.ceil(totalSearchResults / pagination.limit);
 
   const handlePageChange = (pageNumber: number) => {
     setPagination((prev) => ({ ...prev, currentPage: pageNumber }));
@@ -147,17 +256,25 @@ export const SourceSelectorSheet = ({
       onAddSource(sourceData);
       onOpenChange(false);
       setSelectedSource(null);
+      setSegmentRange(null);
+      setScrollToSegmentNumber(null);
     }
   };
 
   const handleTitleClick = (source: any) => {
-    setSelectedSource((prev: any) => (prev?.id === source.id ? null : source));
+    setSelectedSource((prev: any) => {
+      if (prev?.id === source.id) return null;
+      setSegmentRange(null);
+      setScrollToSegmentNumber(null);
+      setBlockPreviousUntilLeave(true);
+      return source;
+    });
   };
 
   const renderSegmentList = () => {
     if (sources.length === 0) {
       return (
-        <div className="text-center min-h-[400px] flex flex-col items-center justify-center">
+        <div className="text-center min-h-[400px] flex items-center justify-center flex-col">
           <img
             src={pechaIcon}
             alt="no data found"
@@ -192,13 +309,19 @@ export const SourceSelectorSheet = ({
                   <img src={pechaIcon} alt="source icon" className="w-8 h-8" />
                 </button>
 
-                {isSelected && segments.length > 0 && (
+                {isSelected && (
                   <SelectedSourceDetail
                     segments={segments}
                     selectedSource={selectedSource}
                     onAdd={handleAddSource}
                     bottomRef={bottomSentinelRef}
+                    topRef={topSentinelRef}
                     isFetchingNextPage={isFetchingNextPage}
+                    isFetchingPreviousPage={isFetchingPreviousPage}
+                    isRangeLoading={isRangeLoading}
+                    totalSegments={totalSegments}
+                    onRangeNavigate={handleRangeNavigate}
+                    scrollToSegmentNumber={scrollToSegmentNumber}
                   />
                 )}
               </div>
@@ -226,6 +349,8 @@ export const SourceSelectorSheet = ({
           setSelectedSource(null);
           setSearchFilter("");
           setPagination({ currentPage: 1, limit: 10 });
+          setSegmentRange(null);
+          setScrollToSegmentNumber(null);
         }
         onOpenChange(open);
       }}
@@ -255,6 +380,8 @@ export const SourceSelectorSheet = ({
                 setSearchOnlyTitles(!!checked);
                 setPagination({ currentPage: 1, limit: 10 });
                 setSelectedSource(null);
+                setSegmentRange(null);
+                setScrollToSegmentNumber(null);
               }}
               className="data-[state=checked]:bg-transparent data-[state=checked]:text-primary"
             />
diff --git a/src/components/ui/molecules/webuddhist-source/sourceItem.tsx b/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
index 30c1466f..d2e47e23 100644
--- a/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
+++ b/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
@@ -22,6 +22,7 @@ const SourceItem = ({ source, onSegment, searchQuery }: any) => {
                 pecha_segment_id: segment.pecha_segment_id,
                 text_id: source.text.text_id,
                 segment_ids: [segment.segment_id],
+                segment_numbers: [segment.segment_number ?? index + 1],
               })
             }
           >
diff --git a/src/components/ui/shadimport.ts b/src/components/ui/shadimport.ts
index 3be6fc19..9673d829 100644
--- a/src/components/ui/shadimport.ts
+++ b/src/components/ui/shadimport.ts
@@ -60,6 +60,17 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/atoms/popover";
+import {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+} from "@/components/ui/atoms/command";
 import { Calendar } from "@/components/ui/atoms/calendar";
 import {
   Pagination,
@@ -157,4 +168,13 @@ export const Pecha = {
   PopoverContent,
   PopoverTrigger,
   Calendar,
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
 };
diff --git a/src/config/userback-context.tsx b/src/config/userback-context.tsx
index e93b706f..a8b90ae8 100644
--- a/src/config/userback-context.tsx
+++ b/src/config/userback-context.tsx
@@ -1,18 +1,13 @@
 // UserbackProvider.tsx
 import { createContext, useContext, useEffect, useState, useMemo } from "react";
 import Userback from "@userback/widget";
-import { useQuery } from "@tanstack/react-query";
-import axiosInstance from "../config/axios-config";
 import { useAuth } from "./auth-context";
 import { USERBACK_ID } from "@/lib/constant";
-
-export const fetchUserInfo = async () => {
-  const { data } = await axiosInstance.get(`/api/v1/authors/info`);
-  return data;
-};
+import { useUserInfo } from "@/hooks/useUserInfo";
 
 const UserbackContext = createContext({ userback: null });
 const usebackId = import.meta.env.VITE_USERBACK_ID || USERBACK_ID;
+
 export const UserbackProvider = ({
   children,
 }: {
@@ -20,18 +15,13 @@ export const UserbackProvider = ({
 }) => {
   const [userback, setUserback] = useState(null);
   const { isLoggedIn } = useAuth();
-  const { data: userInfo } = useQuery({
-    queryKey: ["userInfo"],
-    queryFn: fetchUserInfo,
-    enabled: isLoggedIn,
-  });
+  const { data: userInfo } = useUserInfo({ enabled: isLoggedIn });
 
-  const mainUser = userInfo;
   useEffect(() => {
-    if (!mainUser) return;
-    const init = async (user: any) => {
+    if (!userInfo) return;
+    const init = async (user: typeof userInfo) => {
       const id = user?.id || user?.email || "anonymous";
-      const name = user?.name || user?.firstname || "Anonymous User";
+      const name = user?.firstname || "Anonymous User";
       const email = user?.email || "anonymous@pecha.io";
       try {
         const options = {
@@ -50,8 +40,9 @@ export const UserbackProvider = ({
         console.error("Failed to initialize Userback:", error);
       }
     };
-    init(mainUser);
-  }, [mainUser]);
+    init(userInfo);
+  }, [userInfo]);
+
   const contextValue = useMemo(() => ({ userback }), [userback]);
 
   return (
diff --git a/src/hooks/useDashboardGroupFilterOptions.ts b/src/hooks/useDashboardGroupFilterOptions.ts
new file mode 100644
index 00000000..45ba2b3d
--- /dev/null
+++ b/src/hooks/useDashboardGroupFilterOptions.ts
@@ -0,0 +1,79 @@
+import { useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import {
+  fetchAccessibleGroupsForDashboard,
+  pickGroupTitle,
+  type AuthorGroupListItem,
+  type AuthorGroupMemberRole,
+} from "@/components/routes/groups/api/groupsApi";
+import type { UserInfo } from "@/hooks/useUserInfo";
+import {
+  canUseDashboardGroupFilter,
+  usesStaffWideDashboardGroupList,
+} from "@/lib/platformAccess";
+
+export type DashboardGroupFilterOption = {
+  id: string;
+  title: string;
+  /** Dropdown label (includes membership role for creators when known). */
+  label: string;
+};
+
+function toFilterOptions(
+  groups: AuthorGroupListItem[],
+  showMemberRole: boolean,
+): DashboardGroupFilterOption[] {
+  return groups.map((group) => {
+    const title = pickGroupTitle(group.metadata);
+    const role = group.my_role;
+    const label = showMemberRole && role ? `${title} (${role})` : title;
+    return { id: group.id, title, label };
+  });
+}
+
+function rolesMapFromGroups(
+  groups: AuthorGroupListItem[],
+): Map<string, AuthorGroupMemberRole | undefined> {
+  const map = new Map<string, AuthorGroupMemberRole | undefined>();
+  for (const group of groups) {
+    if (group.my_role) map.set(group.id, group.my_role);
+  }
+  return map;
+}
+
+export function useDashboardGroupFilterOptions(userInfo?: UserInfo | null) {
+  const platformRole = userInfo?.platform_role;
+  const isStaffWideList = usesStaffWideDashboardGroupList(platformRole);
+  const canLoad = canUseDashboardGroupFilter(userInfo);
+
+  const query = useQuery({
+    queryKey: ["dashboard-group-filter", platformRole, userInfo?.has_group],
+    queryFn: () => fetchAccessibleGroupsForDashboard(userInfo),
+    enabled: canLoad,
+    staleTime: 5 * 60 * 1000,
+    refetchOnWindowFocus: false,
+  });
+
+  const options = useMemo(
+    () => toFilterOptions(query.data ?? [], !isStaffWideList),
+    [query.data, isStaffWideList],
+  );
+
+  const rolesByGroupId = useMemo(
+    () => rolesMapFromGroups(query.data ?? []),
+    [query.data],
+  );
+
+  return {
+    options,
+    rolesByGroupId,
+    isLoading: query.isLoading,
+    isStaffWideList,
+    showFilter: canLoad && (options.length > 0 || isStaffWideList),
+    /** Creators: only group_ids returned from the membership list API. */
+    allowedGroupIds: useMemo(
+      () => new Set(options.map((g) => g.id)),
+      [options],
+    ),
+  };
+}
diff --git a/src/hooks/useGroupContentPermissions.ts b/src/hooks/useGroupContentPermissions.ts
new file mode 100644
index 00000000..d0676582
--- /dev/null
+++ b/src/hooks/useGroupContentPermissions.ts
@@ -0,0 +1,47 @@
+import { useQuery } from "@tanstack/react-query";
+import { fetchGroup } from "@/components/routes/groups/api/groupsApi";
+import { getEffectiveGroupRole } from "@/components/routes/groups/lib/groupPermissions";
+import {
+  canChangeContentStatus,
+  canDeleteContent,
+  canEditContent,
+  canInitiateContentTransfer,
+  type ContentStatus,
+} from "@/lib/contentPermissions";
+import { isReviewer, type PlatformRole } from "@/lib/platformAccess";
+import { useUserInfo } from "@/hooks/useUserInfo";
+import type { AuthorGroupMemberRole } from "@/components/routes/groups/api/groupsApi";
+
+export function useGroupContentPermissions(
+  groupId: string | undefined,
+  contentStatus: ContentStatus = "DRAFT",
+) {
+  const { data: userInfo } = useUserInfo();
+
+  const { data: group, isLoading: isGroupLoading } = useQuery({
+    queryKey: ["cms-group", groupId],
+    queryFn: () => fetchGroup(groupId!),
+    enabled: Boolean(groupId),
+    refetchOnWindowFocus: false,
+  });
+
+  const groupRole: AuthorGroupMemberRole | undefined = group
+    ? getEffectiveGroupRole(group.members ?? [], userInfo)
+    : undefined;
+
+  const platformRole = userInfo?.platform_role as PlatformRole | undefined;
+  const platformReadOnly = isReviewer(platformRole);
+
+  return {
+    userInfo,
+    group,
+    groupRole,
+    platformRole,
+    platformReadOnly,
+    isGroupLoading,
+    canEdit: canEditContent(groupRole, contentStatus, platformRole),
+    canChangeStatus: canChangeContentStatus(groupRole, platformRole),
+    canDelete: canDeleteContent(groupRole, contentStatus, platformRole),
+    canTransfer: canInitiateContentTransfer(groupRole, platformRole),
+  };
+}
diff --git a/src/hooks/useGroupRolesMap.ts b/src/hooks/useGroupRolesMap.ts
new file mode 100644
index 00000000..e43a42ee
--- /dev/null
+++ b/src/hooks/useGroupRolesMap.ts
@@ -0,0 +1,42 @@
+import { useMemo } from "react";
+import { useQueries } from "@tanstack/react-query";
+import {
+  fetchGroup,
+  type AuthorGroupMemberRole,
+} from "@/components/routes/groups/api/groupsApi";
+import {
+  getCurrentUserGroupRole,
+  type GroupActor,
+} from "@/components/routes/groups/lib/groupPermissions";
+
+/**
+ * Sparse fallback: resolve membership role via group detail only for ids
+ * that are not already known from the list API (`my_role`).
+ */
+export function useGroupRolesMap(
+  groupIds: (string | null | undefined)[],
+  user: GroupActor | undefined,
+): Map<string, AuthorGroupMemberRole | undefined> {
+  const uniqueIds = useMemo(
+    () => [...new Set(groupIds.filter((id): id is string => Boolean(id)))],
+    [groupIds],
+  );
+
+  const queries = useQueries({
+    queries: uniqueIds.map((groupId) => ({
+      queryKey: ["cms-group", groupId],
+      queryFn: () => fetchGroup(groupId),
+      staleTime: 5 * 60 * 1000,
+      enabled: Boolean(groupId),
+    })),
+  });
+
+  return useMemo(() => {
+    const map = new Map<string, AuthorGroupMemberRole | undefined>();
+    uniqueIds.forEach((groupId, index) => {
+      const members = queries[index]?.data?.members ?? [];
+      map.set(groupId, getCurrentUserGroupRole(members, user));
+    });
+    return map;
+  }, [uniqueIds, queries, user]);
+}
diff --git a/src/hooks/useUserInfo.ts b/src/hooks/useUserInfo.ts
new file mode 100644
index 00000000..d2b099a0
--- /dev/null
+++ b/src/hooks/useUserInfo.ts
@@ -0,0 +1,61 @@
+import { useQuery } from "@tanstack/react-query";
+import axiosInstance from "@/config/axios-config";
+import { useAuth } from "@/config/auth-context";
+import { normalizePlatformRole, type PlatformRole } from "@/lib/platformAccess";
+
+export const USER_INFO_QUERY_KEY = ["userInfo"] as const;
+export type { PlatformRole };
+
+export type SocialMediaProfile = {
+  account: string;
+  url: string;
+};
+
+export type UserInfo = {
+  id: string;
+  firstname?: string;
+  lastname?: string;
+  email?: string;
+  platform_role?: PlatformRole;
+  is_verified?: boolean;
+  is_active?: boolean;
+  has_group?: boolean;
+  can_create_content?: boolean;
+  image_url?: string | null;
+  bio?: string | null;
+  image?: { thumbnail?: string; medium?: string; original?: string } | null;
+  social_profiles?: SocialMediaProfile[];
+};
+
+export const fetchUserInfo = async (): Promise<UserInfo> => {
+  const { data } = await axiosInstance.get<UserInfo>(`/api/v1/authors/info`);
+  const platform_role = normalizePlatformRole(data.platform_role);
+  const has_group =
+    data.has_group ??
+    (platform_role === "SUPER_ADMIN" || platform_role === "REVIEWER");
+
+  return {
+    ...data,
+    platform_role,
+    is_verified: data.is_verified ?? true,
+    is_active: data.is_active ?? true,
+    has_group,
+    can_create_content:
+      data.can_create_content ??
+      (platform_role === "SUPER_ADMIN" || has_group === true),
+  };
+};
+
+/** Shared author profile query — all consumers dedupe to one request via `USER_INFO_QUERY_KEY`. */
+export function useUserInfo(options?: { enabled?: boolean }) {
+  const { isLoggedIn } = useAuth();
+
+  return useQuery({
+    queryKey: USER_INFO_QUERY_KEY,
+    queryFn: fetchUserInfo,
+    enabled: options?.enabled ?? isLoggedIn,
+    refetchOnWindowFocus: true,
+    staleTime: 1 * 1000,
+    gcTime: 30 * 60 * 1000,
+  });
+}
diff --git a/src/index.css b/src/index.css
index bf343248..41c3c776 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,12 +1,13 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@plugin "@tailwindcss/typography";
 
 @custom-variant dark (&:is(.dark *));
 
 @theme {
   --font-instrument: "InstrumentSerif-Regular", serif;
   --font-noto: "NotoSans-Regular", sans-serif;
-  --font-jetbrains: "JetBrainsMono-Regular", monospace;
+  --font-jetbrains: "JetBrainuisMono-Regular", monospace;
   --font-monlam: "MonlamUniOuChan2", sans-serif;
   --font-inter: "InterRegular", sans-serif;
   --font-dutsa: "dutsa-regular", sans-serif;
diff --git a/src/lib/apiErrors.ts b/src/lib/apiErrors.ts
new file mode 100644
index 00000000..9b8ba837
--- /dev/null
+++ b/src/lib/apiErrors.ts
@@ -0,0 +1,51 @@
+import {
+  AUTHOR_NOT_ACTIVE_DETAIL,
+  isAuthorNotActiveDetail,
+} from "@/lib/platformAccess";
+
+export function getApiErrorDetail(error: unknown): string | undefined {
+  const err = error as { response?: { data?: { detail?: unknown } } };
+  const detail = err?.response?.data?.detail;
+  if (typeof detail === "string") return detail;
+  if (
+    detail &&
+    typeof detail === "object" &&
+    "message" in detail &&
+    typeof (detail as { message: string }).message === "string"
+  ) {
+    return (detail as { message: string }).message;
+  }
+  return undefined;
+}
+
+const FRIENDLY_MESSAGES: Record<string, string> = {
+  [AUTHOR_NOT_ACTIVE_DETAIL]: AUTHOR_NOT_ACTIVE_DETAIL,
+  CONTENT_PUBLISHED_READ_ONLY:
+    "Published content is read-only for your role in this group.",
+  STATUS_CHANGE_FORBIDDEN:
+    "You cannot change the status of this content with your current role.",
+  NO_GROUP_MEMBERSHIP: "You are not a member of this content's group.",
+  "Target group must differ from the current group":
+    "Choose a different group than the content's current group.",
+  "Target group not found": "That group could not be found.",
+  "A pending transfer request already exists for this content":
+    "A transfer request is already pending for this content.",
+  "Plan is attached to a series; transfer the series or detach the plan first":
+    "Transfer the series instead, or detach the plan from the series first.",
+};
+
+export function getApiErrorMessage(
+  error: unknown,
+  fallback = "Something went wrong",
+): string {
+  const detail = getApiErrorDetail(error);
+  if (detail) {
+    if (FRIENDLY_MESSAGES[detail]) return FRIENDLY_MESSAGES[detail];
+    if (isAuthorNotActiveDetail(detail)) return AUTHOR_NOT_ACTIVE_DETAIL;
+    return detail;
+  }
+  const err = error as { response?: { data?: { detail?: unknown } } };
+  const rawDetail = err?.response?.data?.detail;
+  if (Array.isArray(rawDetail) && rawDetail[0]?.msg) return rawDetail[0].msg;
+  return fallback;
+}
diff --git a/src/lib/cmsApiPath.ts b/src/lib/cmsApiPath.ts
new file mode 100644
index 00000000..1bd91a1e
--- /dev/null
+++ b/src/lib/cmsApiPath.ts
@@ -0,0 +1,8 @@
+/** Normalize CMS paths from notifications (e.g. `/cms/...`) for axios (`/api/v1/cms/...`). */
+export function resolveCmsApiPath(path: string): string {
+  const trimmed = path.trim();
+  if (trimmed.startsWith("/api/v1")) return trimmed;
+  if (trimmed.startsWith("/cms")) return `/api/v1${trimmed}`;
+  if (trimmed.startsWith("cms/")) return `/api/v1/${trimmed}`;
+  return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+}
diff --git a/src/lib/constant.ts b/src/lib/constant.ts
index 31f20f81..c0a5a8cd 100644
--- a/src/lib/constant.ts
+++ b/src/lib/constant.ts
@@ -16,9 +16,13 @@ export const PLAN_LANGUAGE = [
   { label: "English", value: "EN" },
   { label: "བོད་ཡིག", value: "BO" },
   { label: "中文", value: "ZH" },
+  { label: "Hindi", value: "HI" },
+  { label: "Nepali", value: "NE" },
+  { label: "Mongolian", value: "MN" },
 ];
 export const SOCIAL_PLATFORMS = [
   { value: "facebook", label: "Facebook", icon: "Facebook" },
+  { value: "SignIn", label: "SignIn", icon: "SignIn" },
   { value: "x.com", label: "X (Twitter)", icon: "Twitter" },
   { value: "linkedin", label: "LinkedIn", icon: "Linkedin" },
   { value: "youtube", label: "YouTube", icon: "Youtube" },
diff --git a/src/lib/contentPermissions.test.ts b/src/lib/contentPermissions.test.ts
new file mode 100644
index 00000000..da1ccf9e
--- /dev/null
+++ b/src/lib/contentPermissions.test.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { canDeleteContent, canEditContent } from "./contentPermissions";
+
+describe("contentPermissions", () => {
+  it("allows group AUTHOR to edit but not delete DRAFT content", () => {
+    expect(canEditContent("AUTHOR", "DRAFT")).toBe(true);
+    expect(canDeleteContent("AUTHOR", "DRAFT")).toBe(false);
+    expect(canDeleteContent("AUTHOR", "PUBLISHED")).toBe(false);
+  });
+
+  it("allows OWNER to delete DRAFT and ARCHIVED", () => {
+    expect(canDeleteContent("OWNER", "DRAFT")).toBe(true);
+    expect(canDeleteContent("OWNER", "ARCHIVED")).toBe(true);
+  });
+});
diff --git a/src/lib/contentPermissions.ts b/src/lib/contentPermissions.ts
new file mode 100644
index 00000000..b26821b0
--- /dev/null
+++ b/src/lib/contentPermissions.ts
@@ -0,0 +1,60 @@
+import type { PlatformRole } from "@/lib/platformAccess";
+import { isSuperAdmin } from "@/lib/platformAccess";
+import type { AuthorGroupMemberRole } from "@/components/routes/groups/api/groupsApi";
+
+export type ContentStatus =
+  | "DRAFT"
+  | "PUBLISHED"
+  | "UNPUBLISHED"
+  | "ARCHIVED"
+  | string;
+
+export function canEditContent(
+  groupRole: AuthorGroupMemberRole | undefined,
+  status: ContentStatus,
+  platformRole?: PlatformRole | string,
+): boolean {
+  if (isSuperAdmin(platformRole)) return true;
+  if (!groupRole || groupRole === "VIEWER") return false;
+  if (groupRole === "AUTHOR") {
+    return status === "DRAFT";
+  }
+  if (groupRole === "OWNER" || groupRole === "ADMIN") return true;
+  return false;
+}
+
+export function canChangeContentStatus(
+  groupRole: AuthorGroupMemberRole | undefined,
+  platformRole?: PlatformRole | string,
+): boolean {
+  if (isSuperAdmin(platformRole)) return true;
+  return groupRole === "OWNER" || groupRole === "ADMIN";
+}
+
+/** Only OWNER, ADMIN, or SUPER_ADMIN may delete group content (never group AUTHOR). */
+export function canDeleteContent(
+  groupRole: AuthorGroupMemberRole | undefined,
+  status: ContentStatus,
+  platformRole?: PlatformRole | string,
+): boolean {
+  if (isSuperAdmin(platformRole)) {
+    return (
+      status === "DRAFT" || status === "ARCHIVED" || status === "UNPUBLISHED"
+    );
+  }
+  if (!groupRole || groupRole === "VIEWER" || groupRole === "AUTHOR") {
+    return false;
+  }
+  if (groupRole === "OWNER" || groupRole === "ADMIN") {
+    return status === "DRAFT" || status === "ARCHIVED";
+  }
+  return false;
+}
+
+export function canInitiateContentTransfer(
+  groupRole: AuthorGroupMemberRole | undefined,
+  platformRole?: PlatformRole | string,
+): boolean {
+  if (isSuperAdmin(platformRole)) return true;
+  return groupRole === "OWNER" || groupRole === "ADMIN";
+}
diff --git a/src/lib/dashboardRowPermissions.test.ts b/src/lib/dashboardRowPermissions.test.ts
new file mode 100644
index 00000000..50d3e094
--- /dev/null
+++ b/src/lib/dashboardRowPermissions.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import { resolveDashboardRowGroupRole } from "./dashboardRowPermissions";
+import type { DashboardTableRow } from "@/components/routes/dashboard/dashboardTable";
+
+const baseRow: DashboardTableRow = {
+  kind: "plan",
+  id: "p1",
+  title: "Test",
+  image_url: "",
+  languages: ["EN"],
+  status: "DRAFT",
+  total_days: 1,
+  enrolled: 0,
+  modifiedAt: null,
+  featured: false,
+};
+
+describe("resolveDashboardRowGroupRole", () => {
+  it("uses map role when group_id is present", () => {
+    const map = new Map([["g1", "OWNER" as const]]);
+    expect(
+      resolveDashboardRowGroupRole({ ...baseRow, group_id: "g1" }, map, {
+        id: "u1",
+        platform_role: "CREATOR",
+        can_create_content: true,
+      }),
+    ).toBe("OWNER");
+  });
+
+  it("falls back to AUTHOR for CREATOR on DRAFT when group_id is missing", () => {
+    expect(
+      resolveDashboardRowGroupRole({ ...baseRow, group_id: null }, new Map(), {
+        id: "u1",
+        platform_role: "CREATOR",
+        can_create_content: true,
+        is_active: true,
+        has_group: true,
+      }),
+    ).toBe("AUTHOR");
+  });
+
+  it("does not invent a role when group_id is set but map has no my_role yet", () => {
+    expect(
+      resolveDashboardRowGroupRole({ ...baseRow, group_id: "g1" }, new Map(), {
+        id: "u1",
+        platform_role: "CREATOR",
+        can_create_content: true,
+      }),
+    ).toBeUndefined();
+  });
+});
diff --git a/src/lib/dashboardRowPermissions.ts b/src/lib/dashboardRowPermissions.ts
new file mode 100644
index 00000000..402cedf6
--- /dev/null
+++ b/src/lib/dashboardRowPermissions.ts
@@ -0,0 +1,29 @@
+import type { AuthorGroupMemberRole } from "@/components/routes/groups/api/groupsApi";
+import type { DashboardTableRow } from "@/components/routes/dashboard/dashboardTable";
+import type { UserInfo } from "@/hooks/useUserInfo";
+
+/**
+ * Resolves group role for a dashboard row.
+ * Prefer `my_role` / sparse membership map. Do not invent OWNER/ADMIN.
+ * When group_id is missing, CREATORs with can_create_content get AUTHOR on
+ * DRAFT only (edit, not delete / featured / transfer).
+ */
+export function resolveDashboardRowGroupRole(
+  row: DashboardTableRow,
+  rolesByGroupId: Map<string, AuthorGroupMemberRole | undefined>,
+  userInfo?: UserInfo | null,
+): AuthorGroupMemberRole | undefined {
+  if (row.group_id) {
+    return rolesByGroupId.get(row.group_id);
+  }
+
+  if (
+    userInfo?.can_create_content &&
+    userInfo.platform_role === "CREATOR" &&
+    row.status === "DRAFT"
+  ) {
+    return "AUTHOR";
+  }
+
+  return undefined;
+}
diff --git a/src/lib/languageCodes.ts b/src/lib/languageCodes.ts
new file mode 100644
index 00000000..51b3e629
--- /dev/null
+++ b/src/lib/languageCodes.ts
@@ -0,0 +1,15 @@
+import { PLAN_LANGUAGE } from "@/lib/constant";
+import type { LanguageCode } from "@/schema/SeriesSchema";
+
+export const LANGUAGE_CODE_ORDER = PLAN_LANGUAGE.map(
+  (l) => l.value,
+) as LanguageCode[];
+
+const LANGUAGE_CODE_SET = new Set<string>(
+  LANGUAGE_CODE_ORDER.map((code) => code.toUpperCase()),
+);
+
+export function normalizeLanguageCode(raw: string): LanguageCode | null {
+  const code = raw.trim().toUpperCase();
+  return LANGUAGE_CODE_SET.has(code) ? (code as LanguageCode) : null;
+}
diff --git a/src/lib/markdownLinks.ts b/src/lib/markdownLinks.ts
new file mode 100644
index 00000000..90f52ed4
--- /dev/null
+++ b/src/lib/markdownLinks.ts
@@ -0,0 +1,34 @@
+export const DRAWER_LINK_PREFIX = "drawer://";
+
+export function buildGroupLink(groupId: string): string {
+  return `${DRAWER_LINK_PREFIX}group/${groupId}`;
+}
+
+export function buildSegmentLink(segmentId: string): string {
+  return `${DRAWER_LINK_PREFIX}segment/${segmentId}`;
+}
+
+export function isDrawerLink(href: string): boolean {
+  return href.startsWith(DRAWER_LINK_PREFIX);
+}
+
+export type DrawerLinkTarget =
+  | { type: "group"; groupId: string }
+  | { type: "segment"; segmentId: string };
+
+export function parseDrawerLink(href: string): DrawerLinkTarget | null {
+  if (!isDrawerLink(href)) return null;
+
+  const path = href.slice(DRAWER_LINK_PREFIX.length);
+  const groupMatch = /^group\/([^/]+)$/.exec(path);
+  if (groupMatch) {
+    return { type: "group", groupId: groupMatch[1] };
+  }
+
+  const segmentMatch = /^segment\/([^/]+)$/.exec(path);
+  if (segmentMatch) {
+    return { type: "segment", segmentId: segmentMatch[1] };
+  }
+
+  return null;
+}
diff --git a/src/lib/platformAccess.test.ts b/src/lib/platformAccess.test.ts
new file mode 100644
index 00000000..46372154
--- /dev/null
+++ b/src/lib/platformAccess.test.ts
@@ -0,0 +1,102 @@
+import { describe, expect, it } from "vitest";
+import {
+  AUTHOR_NOT_ACTIVE_DETAIL,
+  canWriteCms,
+  isAuthorNotActiveDetail,
+  isPathAllowedWithoutGroup,
+  needsGroupOnboardingRedirect,
+  canAccessPlanRoutes,
+  normalizePlatformRole,
+  shouldShowCmsActionsColumn,
+} from "./platformAccess";
+
+describe("platformAccess", () => {
+  it("normalizes platform roles from API strings", () => {
+    expect(normalizePlatformRole("reviewer")).toBe("REVIEWER");
+    expect(normalizePlatformRole("SUPER_ADMIN")).toBe("SUPER_ADMIN");
+    expect(normalizePlatformRole(undefined)).toBe("CREATOR");
+    expect(normalizePlatformRole("unknown")).toBe("CREATOR");
+  });
+
+  it("hides CMS actions column for reviewers", () => {
+    expect(shouldShowCmsActionsColumn("REVIEWER")).toBe(false);
+    expect(shouldShowCmsActionsColumn("reviewer")).toBe(false);
+    expect(shouldShowCmsActionsColumn("CREATOR")).toBe(true);
+  });
+
+  it("blocks plan routes for reviewers", () => {
+    expect(canAccessPlanRoutes("REVIEWER")).toBe(false);
+    expect(canAccessPlanRoutes("CREATOR")).toBe(true);
+  });
+
+  it("detects author not active detail", () => {
+    expect(isAuthorNotActiveDetail(AUTHOR_NOT_ACTIVE_DETAIL)).toBe(true);
+    expect(isAuthorNotActiveDetail("other")).toBe(false);
+  });
+
+  it("canWriteCms respects role and group", () => {
+    expect(
+      canWriteCms({
+        platform_role: "SUPER_ADMIN",
+        is_active: true,
+        has_group: false,
+      }),
+    ).toBe(true);
+    expect(
+      canWriteCms({
+        platform_role: "REVIEWER",
+        is_active: true,
+        has_group: true,
+      }),
+    ).toBe(false);
+    expect(
+      canWriteCms({
+        platform_role: "CREATOR",
+        is_active: true,
+        has_group: true,
+      }),
+    ).toBe(true);
+    expect(
+      canWriteCms({
+        platform_role: "CREATOR",
+        is_active: false,
+        has_group: true,
+      }),
+    ).toBe(false);
+  });
+
+  it("gates routes without group for creators only", () => {
+    expect(isPathAllowedWithoutGroup("/groups")).toBe(true);
+    expect(isPathAllowedWithoutGroup("/groups/abc")).toBe(true);
+    expect(isPathAllowedWithoutGroup("/admin/authors")).toBe(true);
+    expect(isPathAllowedWithoutGroup("/dashboard")).toBe(false);
+    expect(
+      needsGroupOnboardingRedirect("/dashboard", {
+        is_active: true,
+        has_group: false,
+        platform_role: "CREATOR",
+      }),
+    ).toBe(true);
+    expect(
+      needsGroupOnboardingRedirect("/groups", {
+        is_active: true,
+        has_group: false,
+        platform_role: "CREATOR",
+      }),
+    ).toBe(false);
+    expect(
+      needsGroupOnboardingRedirect("/dashboard", {
+        is_active: true,
+        has_group: false,
+        platform_role: "SUPER_ADMIN",
+      }),
+    ).toBe(false);
+    expect(
+      needsGroupOnboardingRedirect("/tags", {
+        is_active: true,
+        has_group: false,
+        platform_role: "REVIEWER",
+      }),
+    ).toBe(false);
+  });
+});
diff --git a/src/lib/platformAccess.ts b/src/lib/platformAccess.ts
new file mode 100644
index 00000000..570e83c1
--- /dev/null
+++ b/src/lib/platformAccess.ts
@@ -0,0 +1,120 @@
+import type { UserInfo } from "@/hooks/useUserInfo";
+
+export type PlatformRole = "CREATOR" | "REVIEWER" | "SUPER_ADMIN";
+
+export const AUTHOR_NOT_ACTIVE_DETAIL = "Author not active";
+
+function normalizeRoleArg(
+  role?: PlatformRole | string | null,
+): string | undefined {
+  const raw = role?.toString().trim().toUpperCase();
+  return raw || undefined;
+}
+
+/** Maps API platform_role strings to a canonical role (defaults to CREATOR). */
+export function normalizePlatformRole(role?: string | null): PlatformRole {
+  const raw = normalizeRoleArg(role);
+  if (raw === "SUPER_ADMIN" || raw === "REVIEWER" || raw === "CREATOR") {
+    return raw;
+  }
+  return "CREATOR";
+}
+
+export function isSuperAdmin(role?: PlatformRole | string): boolean {
+  return normalizeRoleArg(role) === "SUPER_ADMIN";
+}
+
+export function isReviewer(role?: PlatformRole | string): boolean {
+  return normalizeRoleArg(role) === "REVIEWER";
+}
+
+/** Row menus (dashboard, series plans, tags, group members, etc.). */
+export function shouldShowCmsActionsColumn(
+  role?: PlatformRole | string,
+): boolean {
+  return !isReviewer(role);
+}
+
+/** Plan detail, edit, and create routes are not available to platform reviewers. */
+export function canAccessPlanRoutes(role?: PlatformRole | string): boolean {
+  return !isReviewer(role);
+}
+
+export function canWriteCms(
+  user?: Pick<UserInfo, "platform_role" | "is_active" | "has_group"> | null,
+): boolean {
+  if (!user?.is_active) return false;
+  if (isSuperAdmin(user.platform_role)) return true;
+  if (isReviewer(user.platform_role)) return false;
+  return Boolean(user.has_group);
+}
+
+export function isAuthorNotActiveDetail(detail: unknown): boolean {
+  if (typeof detail !== "string") return false;
+  return detail.trim().toLowerCase() === AUTHOR_NOT_ACTIVE_DETAIL.toLowerCase();
+}
+
+export function isAuthorNotActiveError(error: unknown): boolean {
+  const err = error as { response?: { data?: { detail?: unknown } } };
+  return isAuthorNotActiveDetail(err?.response?.data?.detail);
+}
+
+/** Routes allowed when a CREATOR has no group yet. */
+export const NO_GROUP_ALLOWED_PREFIXES = [
+  "/groups",
+  "/profile",
+  "/admin/authors",
+  "/admin/china-restrictions",
+] as const;
+
+export function isPathAllowedWithoutGroup(pathname: string): boolean {
+  return NO_GROUP_ALLOWED_PREFIXES.some(
+    (prefix) => pathname === prefix || pathname.startsWith(`${prefix}/`),
+  );
+}
+
+export function needsVerifyEmailRedirect(
+  user?: Pick<UserInfo, "is_verified"> | null,
+): boolean {
+  return user != null && user.is_verified === false;
+}
+
+export function needsInactiveLogout(
+  user?: Pick<UserInfo, "is_active"> | null,
+): boolean {
+  return user != null && user.is_active === false;
+}
+
+export function needsGroupOnboardingRedirect(
+  pathname: string,
+  user?: Pick<UserInfo, "is_active" | "has_group" | "platform_role"> | null,
+): boolean {
+  if (!user?.is_active) return false;
+  if (isSuperAdmin(user.platform_role) || isReviewer(user.platform_role)) {
+    return false;
+  }
+  if (user.has_group !== false) return false;
+  return !isPathAllowedWithoutGroup(pathname);
+}
+
+/** Admin authors + auth routes for platform staff. */
+export function canAccessAdminAuthors(role?: PlatformRole | string): boolean {
+  return isSuperAdmin(role) || isReviewer(role);
+}
+
+/** Whether dashboard group filter should load (staff-wide vs membership list). */
+export function canUseDashboardGroupFilter(
+  user?: Pick<UserInfo, "platform_role" | "has_group"> | null,
+): boolean {
+  if (!user) return false;
+  if (isSuperAdmin(user.platform_role) || isReviewer(user.platform_role)) {
+    return true;
+  }
+  return user.has_group !== false;
+}
+
+export function usesStaffWideDashboardGroupList(
+  role?: PlatformRole | string,
+): boolean {
+  return isSuperAdmin(role) || isReviewer(role);
+}
diff --git a/src/lib/ttsConstants.ts b/src/lib/ttsConstants.ts
new file mode 100644
index 00000000..105991fd
--- /dev/null
+++ b/src/lib/ttsConstants.ts
@@ -0,0 +1,74 @@
+export const TTS_AUDIO_TYPES = [
+  { value: "RECITATION", label: "Recitation" },
+  { value: "INSTRUCTION", label: "Instruction" },
+  { value: "TEXT_READING", label: "Text Reading" },
+] as const;
+
+export type TtsAudioType = (typeof TTS_AUDIO_TYPES)[number]["value"];
+
+export const MONLAM_VOICE_REGIONS = [
+  {
+    label: "Lhasa",
+    voices: [
+      { value: "dolkar_lhasa_female", label: "Dolkar" },
+      { value: "yangchen_lhasa_female", label: "Yangchen" },
+      { value: "darjeeyalphel_lhasa_male", label: "Darjeeyalphel" },
+      { value: "histry_lhasa_male", label: "Histry" },
+      { value: "sonamtsering_lhasa_male", label: "Sonamtsering" },
+    ],
+  },
+  {
+    label: "Amdo",
+    voices: [
+      { value: "dolma_amdo_female", label: "Dolma" },
+      { value: "kid_amdo_female", label: "Kid" },
+      { value: "buddhahistory_amdo_male", label: "Buddhahistory" },
+      { value: "history_amdo_male", label: "History" },
+      { value: "kalsang_gyatso_amdo_male", label: "Kalsang Gyatso" },
+    ],
+  },
+  {
+    label: "Kham",
+    voices: [
+      { value: "kotheke_kham_male", label: "Kotheke" },
+      { value: "tibet_tongue_kham_male", label: "Tibet Tongue" },
+      { value: "tsering_wangmo_kham_female", label: "Tsering Wangmo" },
+      { value: "wangdontso_kham_female", label: "Wangdontso" },
+    ],
+  },
+] as const;
+
+export type MonlamVoiceName =
+  (typeof MONLAM_VOICE_REGIONS)[number]["voices"][number]["value"];
+
+export const DEFAULT_MONLAM_VOICE: MonlamVoiceName = "dolkar_lhasa_female";
+export const DEFAULT_TTS_AUDIO_TYPE: TtsAudioType = "TEXT_READING";
+
+/** Map plan UI language codes (EN, BO, …) to TTS API language (en, bo, …). */
+export function planLanguageToTtsApiLanguage(language: string): string {
+  const normalized = language.trim().toUpperCase();
+  if (normalized === "EN" || normalized.startsWith("EN")) return "en";
+  if (normalized === "BO" || normalized.startsWith("BO")) return "bo";
+  if (normalized === "ZH" || normalized.startsWith("ZH")) return "zh";
+  if (normalized === "HI" || normalized.startsWith("HI")) return "hi";
+  if (normalized === "NE" || normalized.startsWith("NE")) return "ne";
+  if (normalized === "MN" || normalized.startsWith("MN")) return "mn";
+  return language.trim().toLowerCase();
+}
+
+export function isTtsSupportedPlanLanguage(language: string): boolean {
+  return Boolean(planLanguageToTtsApiLanguage(language));
+}
+
+/** Non-Tibetan plans use Gemini TTS (English, Chinese, Hindi, etc.). */
+export function isGeminiTtsLanguage(language: string): boolean {
+  return planLanguageToTtsApiLanguage(language) !== "bo";
+}
+
+export function isEnglishTtsLanguage(language: string): boolean {
+  return isGeminiTtsLanguage(language);
+}
+
+export function isTibetanTtsLanguage(language: string): boolean {
+  return planLanguageToTtsApiLanguage(language) === "bo";
+}
diff --git a/src/lib/utils.range.test.ts b/src/lib/utils.range.test.ts
new file mode 100644
index 00000000..fb3a9e41
--- /dev/null
+++ b/src/lib/utils.range.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import { parseRangeBounds, parseSelection } from "./utils";
+
+describe("parseRangeBounds", () => {
+  it("parses a range", () => {
+    expect(parseRangeBounds("50-60")).toEqual({ start: 50, end: 60 });
+  });
+
+  it("parses a single number", () => {
+    expect(parseRangeBounds("7")).toEqual({ start: 7, end: 7 });
+  });
+
+  it("rejects incomplete ranges", () => {
+    expect(parseRangeBounds("50-")).toBeNull();
+  });
+
+  it("rejects inverted ranges", () => {
+    expect(parseRangeBounds("60-50")).toBeNull();
+  });
+});
+
+describe("parseSelection", () => {
+  it("selects within max", () => {
+    expect(Array.from(parseSelection("50-60", 100) ?? [])).toEqual(
+      Array.from({ length: 11 }, (_, i) => 50 + i),
+    );
+  });
+
+  it("rejects start beyond max", () => {
+    expect(parseSelection("50-60", 20)).toBeNull();
+  });
+});
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 33156594..3406d8bf 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -168,6 +168,18 @@ export const getLastSegmentId = (sections: any[]): string | null => {
   );
 };
 
+export const getFirstSegmentId = (sections: any[]): string | null => {
+  if (!sections?.length) {
+    return null;
+  }
+  const firstSection = sections[0];
+  return (
+    firstSection.segments?.[0]?.segment_id ??
+    getFirstSegmentId(firstSection.sections) ??
+    null
+  );
+};
+
 export const flattenSegments = (sections: any[]): any[] => {
   if (!sections?.length) return [];
   const result: any[] = [];
@@ -182,33 +194,45 @@ export const flattenSegments = (sections: any[]): any[] => {
   return result;
 };
 
-export const parseSelection = (
+export const parseRangeBounds = (
   input: string,
-  max: number,
-): Set<number> | null => {
+): { start: number; end: number } | null => {
   const trimmed = input.trim();
-  if (!trimmed) return null;
+  if (!trimmed || trimmed.endsWith("-")) return null;
 
   const rangeMatch = RANGE_REGEX.exec(trimmed);
   if (rangeMatch) {
     const start = Number.parseInt(rangeMatch[1], 10);
     const end = Number.parseInt(rangeMatch[2], 10);
-    if (start < 1 || end < start || start > max) return null;
-    const selected = new Set<number>();
-    for (let i = start; i <= Math.min(end, max); i++) selected.add(i);
-    return selected;
+    if (start < 1 || end < start) return null;
+    return { start, end };
   }
 
   const singleMatch = SINGLE_REGEX.exec(trimmed);
   if (singleMatch) {
     const num = Number.parseInt(singleMatch[1], 10);
-    if (num < 1 || num > max) return null;
-    return new Set([num]);
+    if (num < 1) return null;
+    return { start: num, end: num };
   }
 
   return null;
 };
 
+export const parseSelection = (
+  input: string,
+  max: number,
+): Set<number> | null => {
+  const bounds = parseRangeBounds(input);
+  if (!bounds) return null;
+  if (bounds.start > max) return null;
+
+  const selected = new Set<number>();
+  for (let i = bounds.start; i <= Math.min(bounds.end, max); i++) {
+    selected.add(i);
+  }
+  return selected;
+};
+
 export const toBackendISO = (d: Date): string =>
   format(d, "yyyy-MM-dd") + "T00:00:00Z";
 
@@ -222,3 +246,28 @@ export const isPastDate = (d: Date): boolean => {
   today.setHours(0, 0, 0, 0);
   return d < today;
 };
+
+/** Format milliseconds as m:ss for audio timestamps */
+export const formatMs = (ms: number): string => {
+  const totalSec = Math.floor(ms / 1000);
+  const m = Math.floor(totalSec / 60);
+  const s = totalSec % 60;
+  return `${m}:${String(s).padStart(2, "0")}`;
+};
+
+/** Read duration from a local audio file before upload */
+export const getAudioDurationMs = (file: File): Promise<number> =>
+  new Promise((resolve, reject) => {
+    const audio = document.createElement("audio");
+    audio.preload = "metadata";
+    const url = URL.createObjectURL(file);
+    audio.onloadedmetadata = () => {
+      URL.revokeObjectURL(url);
+      resolve(Math.round(audio.duration * 1000));
+    };
+    audio.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("Failed to read audio duration"));
+    };
+    audio.src = url;
+  });
diff --git a/src/main.tsx b/src/main.tsx
index 7f0414f5..785113eb 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -23,20 +23,38 @@ import Signup from "./components/auth/signup/Signup";
 import Dashboard from "./components/routes/dashboard/Dashboard";
 import Analytics from "./components/routes/analytics/Analytics";
 import CreatePlan from "./components/routes/create-plan/CreatePlan";
+import PlanNewLegacyRedirect from "./components/routes/create-plan/PlanNewLegacyRedirect";
+import CreateSeries from "./components/routes/create-series/CreateSeries";
+import SeriesDetailsPage from "./components/routes/series-details/SeriesDetailsPage";
 import ProtectedRoute from "./components/auth/ProtectedRoute";
+import PlanRouteGuard from "./components/auth/PlanRouteGuard";
 import ResetPassword from "./components/auth/reset-password/ResetPassword.tsx";
 import PlanDetailsPage from "./components/routes/task/PlanDetailsPage.tsx";
 import Profile from "./components/routes/profile/Profile.tsx";
 import Tags from "./components/routes/tags/Tags.tsx";
+import VerseOfDay from "./components/routes/verse-of-day/VerseOfDay.tsx";
+import Groups from "./components/routes/groups/Groups.tsx";
+import GroupLayout from "./components/routes/groups/GroupLayout.tsx";
+import GroupAboutPage from "./components/routes/groups/GroupAboutPage.tsx";
+import GroupAboutEditPage from "./components/routes/groups/GroupAboutEditPage.tsx";
+import GroupContentPage from "./components/routes/groups/GroupContentPage.tsx";
+import GroupTransfersPage from "./components/routes/groups/GroupTransfersPage.tsx";
+import GroupMembersPage from "./components/routes/groups/GroupMembersPage.tsx";
+import GroupEventsPage from "./components/routes/groups/GroupEventsPage.tsx";
+import GroupEventFormPage from "./components/routes/groups/GroupEventFormPage.tsx";
+import GroupEventDetailPage from "./components/routes/groups/GroupEventDetailPage.tsx";
+import GroupFormPage from "./components/routes/groups/GroupFormPage.tsx";
+import AdminAuthorsPage from "./components/routes/admin-authors/AdminAuthorsPage.tsx";
+import ChinaRestrictionsPage from "./components/routes/china-restrictions/ChinaRestrictionsPage.tsx";
 import { UserbackProvider } from "./config/userback-context.tsx";
 import { Navigate } from "react-router-dom";
 import { ROUTES } from "./routes/paths.ts";
 
 const queryClient = new QueryClient();
 const defaultLanguage = import.meta.env.VITE_DEFAULT_LANGUAGE || "en";
-const tolgee = new (Tolgee as any)()
-  .use(DevTools)
-  .use(FormatSimple)
+const tolgee = Tolgee()
+  .use(DevTools())
+  .use(FormatSimple())
   .use(
     BackendFetch({
       prefix:
@@ -94,7 +112,19 @@ const router = createBrowserRouter([
         path: ROUTES.planNew,
         element: (
           <ProtectedRoute>
-            <CreatePlan />
+            <PlanRouteGuard>
+              <PlanNewLegacyRedirect />
+            </PlanRouteGuard>
+          </ProtectedRoute>
+        ),
+      },
+      {
+        path: "/groups/:groupId/plan/new",
+        element: (
+          <ProtectedRoute>
+            <PlanRouteGuard>
+              <CreatePlan />
+            </PlanRouteGuard>
           </ProtectedRoute>
         ),
       },
@@ -102,7 +132,9 @@ const router = createBrowserRouter([
         path: "/plan/:planId/edit",
         element: (
           <ProtectedRoute>
-            <CreatePlan />
+            <PlanRouteGuard>
+              <CreatePlan />
+            </PlanRouteGuard>
           </ProtectedRoute>
         ),
       },
@@ -110,12 +142,42 @@ const router = createBrowserRouter([
         path: "/plan/:planId",
         element: (
           <ProtectedRoute>
-            <PlanDetailsPage />
+            <PlanRouteGuard>
+              <PlanDetailsPage />
+            </PlanRouteGuard>
+          </ProtectedRoute>
+        ),
+      },
+      {
+        path: ROUTES.seriesNew,
+        element: <Navigate to={ROUTES.groups} replace />,
+      },
+      {
+        path: "/groups/:groupId/series/new",
+        element: (
+          <ProtectedRoute>
+            <CreateSeries />
           </ProtectedRoute>
         ),
       },
       {
-        path: "/analytics",
+        path: "/series/:seriesId/edit",
+        element: (
+          <ProtectedRoute>
+            <CreateSeries />
+          </ProtectedRoute>
+        ),
+      },
+      {
+        path: "/series/:seriesId",
+        element: (
+          <ProtectedRoute>
+            <SeriesDetailsPage />
+          </ProtectedRoute>
+        ),
+      },
+      {
+        path: ROUTES.analytics,
         element: (
           <ProtectedRoute>
             <Analytics />
@@ -138,6 +200,65 @@ const router = createBrowserRouter([
           </ProtectedRoute>
         ),
       },
+      {
+        path: ROUTES.verseOfDay,
+        element: (
+          <ProtectedRoute>
+            <VerseOfDay />
+          </ProtectedRoute>
+        ),
+      },
+      {
+        path: ROUTES.groups,
+        element: (
+          <ProtectedRoute>
+            <Groups />
+          </ProtectedRoute>
+        ),
+      },
+      {
+        path: ROUTES.groupNew,
+        element: (
+          <ProtectedRoute>
+            <GroupFormPage />
+          </ProtectedRoute>
+        ),
+      },
+      {
+        path: "/groups/:groupId",
+        element: (
+          <ProtectedRoute>
+            <GroupLayout />
+          </ProtectedRoute>
+        ),
+        children: [
+          { index: true, element: <GroupAboutPage /> },
+          { path: "edit", element: <GroupAboutEditPage /> },
+          { path: "content", element: <GroupContentPage /> },
+          { path: "transfers", element: <GroupTransfersPage /> },
+          { path: "members", element: <GroupMembersPage /> },
+          { path: "events", element: <GroupEventsPage /> },
+          { path: "events/new", element: <GroupEventFormPage /> },
+          { path: "events/:eventId", element: <GroupEventDetailPage /> },
+          { path: "events/:eventId/edit", element: <GroupEventFormPage /> },
+        ],
+      },
+      {
+        path: ROUTES.adminAuthors,
+        element: (
+          <ProtectedRoute>
+            <AdminAuthorsPage />
+          </ProtectedRoute>
+        ),
+      },
+      {
+        path: ROUTES.adminChinaRestrictions,
+        element: (
+          <ProtectedRoute>
+            <ChinaRestrictionsPage />
+          </ProtectedRoute>
+        ),
+      },
       {
         path: "*",
         element: (
diff --git a/src/routes/paths.ts b/src/routes/paths.ts
index 794f4c6a..b7fbc24e 100644
--- a/src/routes/paths.ts
+++ b/src/routes/paths.ts
@@ -6,12 +6,35 @@ export const ROUTES = {
   resetPassword: "/reset-password",
   verifyEmail: "/verify-email",
   dashboard: "/dashboard",
+  /** @deprecated use groupPlanNew */
   planNew: "/plan/new",
   plan: (planId: string) => `/plan/${planId}`,
   planEdit: (planId: string) => `/plan/${planId}/edit`,
+  /** @deprecated use groupSeriesNew */
+  seriesNew: "/series/new",
+  series: (seriesId: string) => `/series/${seriesId}`,
+  seriesEdit: (seriesId: string) => `/series/${seriesId}/edit`,
   analytics: "/analytics",
   profile: "/profile",
   tags: "/tags",
+  verseOfDay: "/verse-of-day",
+  groups: "/groups",
+  groupNew: "/groups/new",
+  group: (groupId: string) => `/groups/${groupId}`,
+  groupContent: (groupId: string) => `/groups/${groupId}/content`,
+  groupTransfers: (groupId: string) => `/groups/${groupId}/transfers`,
+  groupMembers: (groupId: string) => `/groups/${groupId}/members`,
+  groupEvents: (groupId: string) => `/groups/${groupId}/events`,
+  groupEventNew: (groupId: string) => `/groups/${groupId}/events/new`,
+  groupEvent: (groupId: string, eventId: string) =>
+    `/groups/${groupId}/events/${eventId}`,
+  groupEventEdit: (groupId: string, eventId: string) =>
+    `/groups/${groupId}/events/${eventId}/edit`,
+  groupEdit: (groupId: string) => `/groups/${groupId}/edit`,
+  groupPlanNew: (groupId: string) => `/groups/${groupId}/plan/new`,
+  groupSeriesNew: (groupId: string) => `/groups/${groupId}/series/new`,
+  adminAuthors: "/admin/authors",
+  adminChinaRestrictions: "/admin/china-restrictions",
 } as const;
 
 export const AUTH_ROUTE_PATHS: readonly string[] = [
diff --git a/src/schema/EventSchema.ts b/src/schema/EventSchema.ts
new file mode 100644
index 00000000..0dd9d52b
--- /dev/null
+++ b/src/schema/EventSchema.ts
@@ -0,0 +1,73 @@
+import { z } from "zod";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+
+const LANGUAGE_CODES = PLAN_LANGUAGE.map((l) => l.value) as [
+  "EN",
+  "BO",
+  "ZH",
+  "HI",
+  "NE",
+  "MN",
+];
+export type LanguageCode = (typeof LANGUAGE_CODES)[number];
+
+export const eventMetadataRowSchema = z.object({
+  language: z.enum(LANGUAGE_CODES),
+  name: z.string().trim().min(1, "Name is required"),
+  description: z.string().trim(),
+});
+
+export type EventMetadataRow = z.infer<typeof eventMetadataRowSchema>;
+
+export const eventSchema = z
+  .object({
+    start_date: z.string().trim().min(1, "Start date is required"),
+    end_date: z.string().trim().min(1, "End date is required"),
+    is_one_day: z.boolean(),
+    metadata: z
+      .array(eventMetadataRowSchema)
+      .min(1, "Add at least one language"),
+    image_url: z.string().trim(),
+    // Linked content — each is a single id chosen via a search picker.
+    plan_id: z.string().trim(),
+    accumulator_id: z.string().trim(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.start_date && data.end_date && data.end_date < data.start_date) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "End date must be on or after the start date",
+        path: ["end_date"],
+      });
+    }
+
+    const seen = new Set<string>();
+    data.metadata.forEach((row, index) => {
+      if (seen.has(row.language)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Each language can only be added once",
+          path: ["metadata", index, "language"],
+        });
+      }
+      seen.add(row.language);
+    });
+  });
+
+export type EventFormData = z.infer<typeof eventSchema>;
+
+export const emptyMetadataRow = (language: LanguageCode): EventMetadataRow => ({
+  language,
+  name: "",
+  description: "",
+});
+
+export const defaultEventFormValues = (): EventFormData => ({
+  start_date: "",
+  end_date: "",
+  is_one_day: false,
+  metadata: [emptyMetadataRow("EN")],
+  image_url: "",
+  plan_id: "",
+  accumulator_id: "",
+});
diff --git a/src/schema/GroupSchema.ts b/src/schema/GroupSchema.ts
new file mode 100644
index 00000000..7ee19ab7
--- /dev/null
+++ b/src/schema/GroupSchema.ts
@@ -0,0 +1,70 @@
+import { z } from "zod";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+
+const LANGUAGE_CODES = PLAN_LANGUAGE.map((l) => l.value) as [
+  "EN",
+  "BO",
+  "ZH",
+  "HI",
+  "NE",
+  "MN",
+];
+export type GroupLanguageCode = (typeof LANGUAGE_CODES)[number];
+
+export const groupLanguageBlockSchema = z.object({
+  title: z.string().trim().min(1, "Title is required"),
+  sub_title: z.string().trim().min(1, "Sub-title is required"),
+  description: z
+    .string()
+    .trim()
+    .min(1, "Description is required")
+    .max(200, "Description must be 200 characters or less"),
+  description_long: z.string().trim().optional(),
+});
+
+export const authorGroupTypeSchema = z.enum(["PAGE", "COMMUNITY"]);
+
+export type AuthorGroupType = z.infer<typeof authorGroupTypeSchema>;
+
+export const groupCoreSchema = z
+  .object({
+    slug: z
+      .string()
+      .trim()
+      .min(1, "Slug is required")
+      .regex(
+        /^[a-z0-9]+(?:-[a-z0-9]+)*$/,
+        "Use lowercase letters, numbers, and hyphens only",
+      ),
+    group_type: authorGroupTypeSchema,
+    is_public: z.boolean(),
+    languages: z.object({
+      EN: groupLanguageBlockSchema.optional(),
+      BO: groupLanguageBlockSchema.optional(),
+      ZH: groupLanguageBlockSchema.optional(),
+      HI: groupLanguageBlockSchema.optional(),
+      NE: groupLanguageBlockSchema.optional(),
+      MN: groupLanguageBlockSchema.optional(),
+    }),
+    avatar_key: z.string().optional(),
+    banner_key: z.string().optional(),
+  })
+  .superRefine((data, ctx) => {
+    const present = LANGUAGE_CODES.filter((c) => data.languages[c] != null);
+    if (present.length < 1) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Add at least one language",
+        path: ["languages"],
+      });
+    }
+  });
+
+export type GroupCoreFormData = z.infer<typeof groupCoreSchema>;
+
+export const groupSocialLinkSchema = z.object({
+  platform: z.string().min(1),
+  url: z.string().url("Enter a valid URL"),
+});
+
+export type GroupSocialLinkFormData = z.infer<typeof groupSocialLinkSchema>;
diff --git a/src/schema/PlanSchema.ts b/src/schema/PlanSchema.ts
index dd921318..93122004 100644
--- a/src/schema/PlanSchema.ts
+++ b/src/schema/PlanSchema.ts
@@ -9,4 +9,6 @@ export const planSchema = z.object({
   tags: z.array(z.string()),
   language: z.string().min(1, "Language is required"),
   start_date: z.iso.datetime().nullable().optional(),
+  series_id: z.string().nullable().optional(),
+  group_id: z.string().uuid().optional(),
 });
diff --git a/src/schema/SeriesSchema.ts b/src/schema/SeriesSchema.ts
new file mode 100644
index 00000000..50c1d1c3
--- /dev/null
+++ b/src/schema/SeriesSchema.ts
@@ -0,0 +1,59 @@
+import { z } from "zod";
+import { PLAN_LANGUAGE } from "@/lib/constant";
+
+const LANGUAGE_CODES = PLAN_LANGUAGE.map((l) => l.value) as [
+  "EN",
+  "BO",
+  "ZH",
+  "HI",
+  "NE",
+  "MN",
+];
+export type LanguageCode = (typeof LANGUAGE_CODES)[number];
+
+export const languageBlockSchema = z.object({
+  title: z.string().trim(),
+  sub_title: z.string().trim(),
+  description: z.string().trim(),
+});
+
+export const planItemSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  image_url: z.string().optional(),
+});
+
+export type SeriesPlan = z.infer<typeof planItemSchema>;
+
+export const seriesSchema = z
+  .object({
+    languages: z.object({
+      EN: languageBlockSchema.optional(),
+      BO: languageBlockSchema.optional(),
+      ZH: languageBlockSchema.optional(),
+      HI: languageBlockSchema.optional(),
+      NE: languageBlockSchema.optional(),
+      MN: languageBlockSchema.optional(),
+    }),
+    plans: z.object({
+      EN: z.array(planItemSchema).optional(),
+      BO: z.array(planItemSchema).optional(),
+      ZH: z.array(planItemSchema).optional(),
+      HI: z.array(planItemSchema).optional(),
+      NE: z.array(planItemSchema).optional(),
+      MN: z.array(planItemSchema).optional(),
+    }),
+    image_url: z.string().trim().min(1, "Cover image is required"),
+  })
+  .superRefine((data, ctx) => {
+    const present = LANGUAGE_CODES.filter((c) => data.languages[c] != null);
+    if (present.length < 1) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Add at least one language",
+        path: ["languages"],
+      });
+    }
+  });
+
+export type SeriesFormData = z.infer<typeof seriesSchema>;
diff --git a/src/test/setup.ts b/src/test/setup.ts
index c4fda88e..6470342b 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -1,5 +1,10 @@
 import "@testing-library/jest-dom";
-import { vi } from "vitest";
+import { afterEach, vi } from "vitest";
+
+afterEach(() => {
+  document.body.removeAttribute("data-scroll-locked");
+  document.body.style.pointerEvents = "";
+});
 
 vi.mock("@/config/auth-context", () => ({
   useAuth: () => ({
@@ -23,6 +28,27 @@ vi.mock("@tolgee/react", () => ({
   useTranslate: () => ({
     t: (key: string) => key,
   }),
+  useTolgee: () => ({
+    getLanguage: () => "en",
+    changeLanguage: vi.fn(),
+  }),
+}));
+
+vi.mock("@/hooks/useUserInfo", () => ({
+  USER_INFO_QUERY_KEY: ["userInfo"],
+  fetchUserInfo: vi.fn(),
+  useUserInfo: () => ({
+    data: {
+      id: "test-user-id",
+      email: "test@example.com",
+      platform_role: "SUPER_ADMIN",
+      is_verified: true,
+      is_active: true,
+      has_group: true,
+      can_create_content: true,
+    },
+    isLoading: false,
+  }),
 }));
 
 Object.defineProperty(global, "URL", {
@@ -32,3 +58,9 @@ Object.defineProperty(global, "URL", {
   },
   writable: true,
 });
+
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};