diff --git a/package-lock.json b/package-lock.json
index 96e2b4ac6..ff39ecb0e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@next/font": "13.1.6",
         "@preact/signals": "^1.2.2",
         "@primer/css": "^20.8.2",
+        "@radix-ui/react-collapsible": "^1.1.0",
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-toast": "^1.2.1",
         "@sinclair/typebox": "^0.28.14",
@@ -46,12 +47,14 @@
         "react-dom": "18.2.0",
         "react-icons": "^4.8.0",
         "react-modal": "^3.16.1",
+        "recharts": "^2.13.0-alpha.5",
         "reflect-metadata": "^0.1.13",
         "swr": "^2.0.3",
         "tailwind-merge": "^1.14.0",
         "tailwindcss": "^3.2.7",
         "typescript": "4.9.5",
-        "util": "^0.12.5"
+        "util": "^0.12.5",
+        "zod": "^3.23.8"
       },
       "devDependencies": {
         "@babel/core": "^7.20.12",
@@ -2334,7 +2337,6 @@
       "version": "7.23.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.6.tgz",
       "integrity": "sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -4296,6 +4298,169 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.0.tgz",
+      "integrity": "sha512-zQY7Epa8sTL0mq4ajSJpjgn2YmCgyrG7RsQgLp3C0LQVkG7+Tf6Pv1CeNWZLyqMjhdPkBa5Lx7wYBeSu7uCSTA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
@@ -8109,6 +8274,60 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg=="
+    },
+    "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=="
+    },
+    "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=="
+    },
+    "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==",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ=="
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
+      "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
+      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz",
+      "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw=="
+    },
+    "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=="
+    },
     "node_modules/@types/detect-port": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/detect-port/-/detect-port-1.3.5.tgz",
@@ -11157,6 +11376,116 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
       "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
+    "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==",
+      "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==",
+      "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==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "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==",
+      "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==",
+      "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==",
+      "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==",
+      "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==",
+      "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==",
+      "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==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -11220,6 +11549,11 @@
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
       "dev": true
     },
+    "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=="
+    },
     "node_modules/decompress-response": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -11592,6 +11926,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -12667,6 +13010,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -12871,6 +13219,14 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "node_modules/fast-equals": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz",
+      "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fast-fifo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
@@ -14187,6 +14543,14 @@
         "node": ">= 0.4"
       }
     },
+    "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==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -16112,8 +16476,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -18678,6 +19041,20 @@
         "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-smooth": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.1.tgz",
+      "integrity": "sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -18720,6 +19097,21 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
       "dev": true
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -18878,6 +19270,41 @@
         "node": ">= 4"
       }
     },
+    "node_modules/recharts": {
+      "version": "2.13.0-alpha.5",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.13.0-alpha.5.tgz",
+      "integrity": "sha512-mm8ORfDusDhyWlrY/2NntUAsNeYukteplvRqKGkBEmqNPwqYq9GoEzaVsVDYj8bjGSKJynWGhjEO1NFcntl29g==",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.0",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
+    "node_modules/recharts/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -18917,8 +19344,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
-      "dev": true
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.2",
@@ -20611,8 +21037,7 @@
     "node_modules/tiny-invariant": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
-      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
-      "dev": true
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
     },
     "node_modules/tmpl": {
       "version": "1.0.5",
@@ -21309,6 +21734,27 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "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/vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -21884,6 +22330,14 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   },
   "dependencies": {
@@ -23461,7 +23915,6 @@
       "version": "7.23.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.6.tgz",
       "integrity": "sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.14.0"
       }
@@ -24811,6 +25264,80 @@
         }
       }
     },
+    "@radix-ui/react-collapsible": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.0.tgz",
+      "integrity": "sha512-zQY7Epa8sTL0mq4ajSJpjgn2YmCgyrG7RsQgLp3C0LQVkG7+Tf6Pv1CeNWZLyqMjhdPkBa5Lx7wYBeSu7uCSTA==",
+      "requires": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "dependencies": {
+        "@radix-ui/primitive": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+          "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+        },
+        "@radix-ui/react-compose-refs": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+          "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw=="
+        },
+        "@radix-ui/react-context": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+          "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A=="
+        },
+        "@radix-ui/react-id": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+          "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+          "requires": {
+            "@radix-ui/react-use-layout-effect": "1.1.0"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+          "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+          "requires": {
+            "@radix-ui/react-slot": "1.1.0"
+          }
+        },
+        "@radix-ui/react-slot": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+          "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+          "requires": {
+            "@radix-ui/react-compose-refs": "1.1.0"
+          }
+        },
+        "@radix-ui/react-use-callback-ref": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+          "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw=="
+        },
+        "@radix-ui/react-use-controllable-state": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+          "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+          "requires": {
+            "@radix-ui/react-use-callback-ref": "1.1.0"
+          }
+        },
+        "@radix-ui/react-use-layout-effect": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+          "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w=="
+        }
+      }
+    },
     "@radix-ui/react-collection": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
@@ -27113,6 +27640,60 @@
         "@types/node": "*"
       }
     },
+    "@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg=="
+    },
+    "@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=="
+    },
+    "@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=="
+    },
+    "@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==",
+      "requires": {
+        "@types/d3-color": "*"
+      }
+    },
+    "@types/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ=="
+    },
+    "@types/d3-scale": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
+      "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
+      "requires": {
+        "@types/d3-time": "*"
+      }
+    },
+    "@types/d3-shape": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
+      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
+      "requires": {
+        "@types/d3-path": "*"
+      }
+    },
+    "@types/d3-time": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz",
+      "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw=="
+    },
+    "@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=="
+    },
     "@types/detect-port": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/detect-port/-/detect-port-1.3.5.tgz",
@@ -29573,6 +30154,83 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
       "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
+    "d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "requires": {
+        "internmap": "1 - 2"
+      }
+    },
+    "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=="
+    },
+    "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=="
+    },
+    "d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="
+    },
+    "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==",
+      "requires": {
+        "d3-color": "1 - 3"
+      }
+    },
+    "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=="
+    },
+    "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==",
+      "requires": {
+        "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"
+      }
+    },
+    "d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "requires": {
+        "d3-path": "^3.1.0"
+      }
+    },
+    "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==",
+      "requires": {
+        "d3-array": "2 - 3"
+      }
+    },
+    "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==",
+      "requires": {
+        "d3-time": "1 - 3"
+      }
+    },
+    "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=="
+    },
     "damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -29615,6 +30273,11 @@
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
       "dev": true
     },
+    "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=="
+    },
     "decompress-response": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -29900,6 +30563,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -30731,6 +31403,11 @@
       "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
       "dev": true
     },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -30906,6 +31583,11 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "fast-equals": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz",
+      "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ=="
+    },
     "fast-fifo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
@@ -31898,6 +32580,11 @@
         "side-channel": "^1.0.4"
       }
     },
+    "internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -33316,8 +34003,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -35214,6 +35900,16 @@
         "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "react-smooth": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.1.tgz",
+      "integrity": "sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==",
+      "requires": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      }
+    },
     "react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -35243,6 +35939,17 @@
         }
       }
     },
+    "react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -35365,6 +36072,36 @@
         "tslib": "^2.0.1"
       }
     },
+    "recharts": {
+      "version": "2.13.0-alpha.5",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.13.0-alpha.5.tgz",
+      "integrity": "sha512-mm8ORfDusDhyWlrY/2NntUAsNeYukteplvRqKGkBEmqNPwqYq9GoEzaVsVDYj8bjGSKJynWGhjEO1NFcntl29g==",
+      "requires": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.0",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.3.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+          "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+        }
+      }
+    },
+    "recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "requires": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
     "redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -35398,8 +36135,7 @@
     "regenerator-runtime": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
-      "dev": true
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
     "regenerator-transform": {
       "version": "0.15.2",
@@ -36659,8 +37395,7 @@
     "tiny-invariant": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
-      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
-      "dev": true
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
     },
     "tmpl": {
       "version": "1.0.5",
@@ -37161,6 +37896,27 @@
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
       "dev": true
     },
+    "victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "requires": {
+        "@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"
+      }
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -37582,6 +38338,11 @@
       "resolved": "https://registry.npmjs.org/yoctocolors-cjs/-/yoctocolors-cjs-2.1.2.tgz",
       "integrity": "sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==",
       "dev": true
+    },
+    "zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g=="
     }
   }
 }
diff --git a/package.json b/package.json
index ee8701a54..8e9db9164 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@next/font": "13.1.6",
     "@preact/signals": "^1.2.2",
     "@primer/css": "^20.8.2",
+    "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-toast": "^1.2.1",
     "@sinclair/typebox": "^0.28.14",
@@ -60,12 +61,14 @@
     "react-dom": "18.2.0",
     "react-icons": "^4.8.0",
     "react-modal": "^3.16.1",
+    "recharts": "^2.13.0-alpha.5",
     "reflect-metadata": "^0.1.13",
     "swr": "^2.0.3",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.2.7",
     "typescript": "4.9.5",
-    "util": "^0.12.5"
+    "util": "^0.12.5",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
diff --git a/public/streamWorker.js b/public/streamWorker.js
index eba27258f..604c1f122 100644
--- a/public/streamWorker.js
+++ b/public/streamWorker.js
@@ -101,6 +101,8 @@ async function getResponseError(response) {
             if (response.status === 404) {
                 error.type = 'not_found';
             }
+        } else if (jsonResponse.error) {
+            error.message = jsonResponse.error;
         }
     } catch (e) {
     }
diff --git a/src/app/(rucio)/dashboard/page.tsx b/src/app/(rucio)/dashboard/page.tsx
index e77e55048..eaaf686f7 100644
--- a/src/app/(rucio)/dashboard/page.tsx
+++ b/src/app/(rucio)/dashboard/page.tsx
@@ -1,24 +1,5 @@
 'use client';
-import { fixtureOngoingrules, fixtureUsedquota } from 'test/fixtures/widget-fixtures';
-import { Dashboard as DashboardStory } from '@/component-library/pages/legacy/Dashboard/Dashboard';
-import { Role } from '@/lib/core/entity/account';
-import { SiteHeaderViewModel } from '@/lib/infrastructure/data/view-model/site-header';
-import { useEffect, useState } from 'react';
-import { getSiteHeader } from '../queries';
-import { Loading } from '@/component-library/pages/legacy/Helpers/Loading';
-import { User } from '@/lib/core/entity/auth-models';
+import { Dashboard } from '@/component-library/pages/Dashboard/Dashboard';
 export default function Page() {
-    const [siteHeader, setSiteHeader] = useState<SiteHeaderViewModel>({ status: 'pending' } as SiteHeaderViewModel);
-    useEffect(() => {
-        getSiteHeader().then((vm: SiteHeaderViewModel) => setSiteHeader(vm));
-    }, []);
-    if (siteHeader.status === 'pending') return <Loading title="Dashboard" />;
-    return (
-        <DashboardStory
-            accountname={(siteHeader.activeAccount as User).rucioAccount}
-            accountrole={(siteHeader.activeAccount as User).role === 'admin' ? Role.ADMIN : Role.USER}
-            inputOngoingrules={Array.from({ length: 20 }, (v, k) => fixtureOngoingrules())}
-            inputUsedquota={Array.from({ length: 20 }, (v, k) => fixtureUsedquota())}
-        />
-    );
+    return <Dashboard />;
 }
diff --git a/src/app/(rucio)/queries.ts b/src/app/(rucio)/queries.ts
index bdccd6756..9679934dd 100644
--- a/src/app/(rucio)/queries.ts
+++ b/src/app/(rucio)/queries.ts
@@ -1,20 +1,11 @@
 import { SiteHeaderViewModel } from '@/lib/infrastructure/data/view-model/site-header';
 
 export async function getSiteHeader(): Promise<SiteHeaderViewModel> {
-    const req: any = {
+    const res = await fetch('/api/feature/get-site-header', {
         method: 'GET',
-        url: new URL(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/get-site-header`),
         headers: {
             'Content-Type': 'application/json',
         },
-        params: {},
-    };
-
-    const res = await fetch(req.url, {
-        method: 'GET',
-        headers: new Headers({
-            'Content-Type': 'application/json',
-        } as HeadersInit),
     });
 
     return await res.json();
diff --git a/src/app/(rucio)/rse/list/page.tsx b/src/app/(rucio)/rse/list/page.tsx
index bceb6f566..83bd3567b 100644
--- a/src/app/(rucio)/rse/list/page.tsx
+++ b/src/app/(rucio)/rse/list/page.tsx
@@ -8,5 +8,5 @@ export default function Page() {
 
     // TODO: fetch initial data
 
-    return <ListRSE firstExpression={firstExpression ?? undefined} />;
+    return <ListRSE initialExpression={firstExpression ?? undefined} />;
 }
diff --git a/src/app/(rucio)/rule/create/page.tsx b/src/app/(rucio)/rule/create/page.tsx
index 7265dbb82..cbe2d9b43 100644
--- a/src/app/(rucio)/rule/create/page.tsx
+++ b/src/app/(rucio)/rule/create/page.tsx
@@ -1,119 +1,58 @@
 'use client';
-import { CreateRule as CreateRuleStory } from '@/component-library/pages/legacy/Rule/CreateRule';
-import { RSEAccountUsageLimitViewModel } from '@/lib/infrastructure/data/view-model/rse';
-import {
-    CreateRulesViewModel,
-    generateEmptyCreateRulesViewModel,
-    TypedDIDValidationQuery,
-    TypedDIDValidationResponse,
-} from '@/lib/infrastructure/data/view-model/create-rule';
-import useComDOM from '@/lib/infrastructure/hooks/useComDOM';
-import { RuleSummaryViewModel } from '@/lib/infrastructure/data/view-model/rule';
-import { BatchResponse } from '@/lib/infrastructure/web-worker/comdom-wrapper';
-import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
-import { useEffect, useState } from 'react';
-import { AccountInfo } from '@/lib/core/entity/rucio';
-import { generateEmptyAccountInfoViewModel } from '@/lib/infrastructure/data/view-model/account';
-import { TCreateRuleFeatureRequestParams } from '@/pages/api/feature/create-rule';
-
-export default function CreateRule() {
-    const onSubmit = async (query: TCreateRuleFeatureRequestParams) => {
-        let viewModel: CreateRulesViewModel = generateEmptyCreateRulesViewModel();
-        viewModel.status = 'pending';
-
-        try {
-            const response = await fetch(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/create-rule`, {
-                method: 'POST',
-                headers: new Headers({
-                    'Content-Type': 'application/json',
-                } as HeadersInit),
-                body: JSON.stringify(query),
-            });
-
-            if (response.ok) {
-                const data: CreateRulesViewModel = await response.json();
-                viewModel = data;
-            } else {
-                throw new Error(`Error creating rule. HTTP Status Code: ${response.status}`);
+import { CreateRule } from '@/component-library/pages/Rule/create/CreateRule';
+import { parameters } from '../../../../../.storybook/preview';
+import { CreateRuleParameters } from '@/lib/infrastructure/data/view-model/rule';
+
+const PARAMS_KEY = 'create_rule_parameters';
+const ACTIVE_KEY = 'create_rule_active';
+
+export default function Page() {
+    const getSavedParameters = () => {
+        const initialParametersString = localStorage.getItem(PARAMS_KEY);
+        // TODO: check with zod
+        if (initialParametersString) {
+            try {
+                return JSON.parse(initialParametersString);
+            } catch (e) {
+                return undefined;
             }
-        } catch (error: any) {
-            viewModel.status = 'error';
-            viewModel.message = error.message;
         }
-
-        return viewModel;
+        return undefined;
     };
 
-    const didValidation = (query: TypedDIDValidationQuery) => {
-        // if the DID contains the string "error", it will be added to the error list
-        var localErrorDIDs: TypedDIDValidationResponse = { ErrorList: [] };
-        query.DIDList.map((DID: string, index: number) => {
-            if (DID.includes('error')) {
-                localErrorDIDs.ErrorList.push({ DID: DID, ErrorCodes: [421], Message: 'This DID is invalid' });
-            }
-        });
-        // if the error list is empty, the promise will resolve, otherwise it will reject
-        if (localErrorDIDs.ErrorList.length === 0) {
-            return Promise.resolve(localErrorDIDs);
-        } else {
-            return Promise.reject(localErrorDIDs);
+    const getSavedIndex = () => {
+        const initialActiveString = localStorage.getItem(ACTIVE_KEY);
+
+        if (initialActiveString) {
+            const numberValue = parseInt(initialActiveString);
+            return isNaN(numberValue) ? undefined : numberValue;
         }
     };
 
-    const DIDSearchComDOM = useComDOM<ListDIDsViewModel>('create-rule-page-did-query', [], false, Infinity, 50, true);
+    const setSavedParameters = (parameters: CreateRuleParameters) => {
+        localStorage.setItem(PARAMS_KEY, JSON.stringify(parameters));
+    };
 
-    const processRSEAccountUsageLimitViewModelBatchResponse = (batch: BatchResponse<RSEAccountUsageLimitViewModel>) => {
-        // The feature replaces Infinity with -1 for the bytes_limit and bytes_remaining fields
-        // This is done because Infinity is not a valid JSON value
-        // This code replaces -1 with Infinity for the bytes_limit and bytes_remaining fields
-        batch.data.forEach((rseAccountUsageLimitViewModel: RSEAccountUsageLimitViewModel) => {
-            if (rseAccountUsageLimitViewModel.status === 'success') {
-                if (rseAccountUsageLimitViewModel.bytes_limit === -1) {
-                    rseAccountUsageLimitViewModel.bytes_limit = Infinity;
-                }
-                if (rseAccountUsageLimitViewModel.bytes_remaining === -1) {
-                    rseAccountUsageLimitViewModel.bytes_remaining = Infinity;
-                }
-            }
-        });
-        return batch;
+    const setSavedIndex = (activeIndex: number) => {
+        localStorage.setItem(ACTIVE_KEY, activeIndex.toString());
     };
 
-    const RSEComDOM = useComDOM<RSEAccountUsageLimitViewModel>(
-        'create-rule-page-rse-query',
-        [],
-        false,
-        Infinity,
-        50,
-        true,
-        processRSEAccountUsageLimitViewModelBatchResponse,
-    );
+    const removeSavedParameters = () => {
+        localStorage.removeItem(PARAMS_KEY);
+    };
 
-    const [accountInfo, setAccountInfo] = useState<AccountInfo>(generateEmptyAccountInfoViewModel());
-    useEffect(() => {
-        fetch(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/account-info`)
-            .then(response => {
-                if (response.ok) {
-                    return response.json();
-                } else {
-                    throw new Error(`Error fetching account info. Are you logged in? HTTP Status Code: ${response.status}`);
-                }
-            })
-            .then((data: AccountInfo) => {
-                setAccountInfo(data);
-            })
-            .catch(error => {
-                console.error(error);
-            });
-    }, []);
+    const removeSavedIndex = () => {
+        localStorage.removeItem(ACTIVE_KEY);
+    };
 
     return (
-        <CreateRuleStory
-            accountInfo={accountInfo}
-            onSubmit={onSubmit}
-            didValidation={didValidation}
-            didListComDOM={DIDSearchComDOM}
-            rseListComDOM={RSEComDOM}
+        <CreateRule
+            getSavedIndex={getSavedIndex}
+            getSavedParameters={getSavedParameters}
+            setSavedIndex={setSavedIndex}
+            setSavedParameters={setSavedParameters}
+            removeSavedParameters={removeSavedParameters}
+            removeSavedIndex={removeSavedIndex}
         />
     );
 }
diff --git a/src/component-library/atoms/form/button.tsx b/src/component-library/atoms/form/button.tsx
index 88a382da1..17ac8a8dd 100644
--- a/src/component-library/atoms/form/button.tsx
+++ b/src/component-library/atoms/form/button.tsx
@@ -13,15 +13,17 @@ const buttonVariants = cva(
     {
         variants: {
             variant: {
-                default: 'bg-brand-600 text-neutral-100 hover:bg-brand-700 dark:hover:bg-brand-500',
+                default: 'bg-opacity-80 bg-brand-600 text-neutral-100 hover:bg-brand-700 dark:hover:bg-brand-500',
                 success: 'bg-base-success-600 text-neutral-100 hover:bg-base-success-700 dark:hover:bg-base-success-500',
                 error: 'bg-base-error-600 text-neutral-100 hover:bg-base-error-700 dark:hover:bg-base-error-500',
+                neutral:
+                    'bg-neutral-300 text-neutral-900 dark:bg-opacity-90 dark:bg-neutral-700 dark:text-neutral-100 hover:bg-neutral-200 dark:hover:bg-neutral-800',
             },
             size: {
                 default: 'h-10 px-4 py-2',
                 sm: 'h-9 rounded-md px-3',
                 lg: 'h-11 rounded-md px-8',
-                icon: 'h-10 w-10',
+                icon: 'h-6 w-6 rounded',
             },
         },
         defaultVariants: {
diff --git a/src/component-library/atoms/form/input.tsx b/src/component-library/atoms/form/input.tsx
index e78d5fe95..8bdfba09f 100644
--- a/src/component-library/atoms/form/input.tsx
+++ b/src/component-library/atoms/form/input.tsx
@@ -2,6 +2,19 @@ import * as React from 'react';
 
 import { cn } from '@/component-library/utils';
 
+const commonClasses = cn(
+    'flex w-full rounded-md',
+    'border border-neutral-900 dark:border-neutral-100 border-opacity-10 dark:border-opacity-10',
+    'rounded-md',
+    'bg-neutral-100 dark:bg-neutral-800',
+    'px-3 py-2',
+    'text-neutral-900 dark:text-neutral-100',
+    'placeholder:text-neutral-500',
+    'focus:ring-0 focus:shadow-brand',
+    'focus:outline-none focus:border-1 focus:border-brand-500',
+    'dark:focus:border-1 dark:focus:border-brand-500',
+);
+
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     onEnterKey?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
@@ -17,29 +30,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
         }
     };
 
-    return (
-        <input
-            type={type}
-            className={cn(
-                'flex w-full rounded-md',
-                'h-10',
-                'border border-neutral-900 dark:border-neutral-100 border-opacity-10 dark:border-opacity-10',
-                'rounded-md',
-                'bg-neutral-100 dark:bg-neutral-800',
-                'px-3 py-2',
-                'text-neutral-900 dark:text-neutral-100',
-                'placeholder:text-neutral-500',
-                'focus:ring-0 focus:shadow-brand',
-                'focus:outline-none focus:border-1 focus:border-brand-500',
-                'dark:focus:border-1 dark:focus:border-brand-500',
-                className,
-            )}
-            ref={ref}
-            onKeyDown={handleKeyDown}
-            {...props}
-        />
-    );
+    return <input type={type} className={cn(commonClasses, 'h-10', className)} ref={ref} onKeyDown={handleKeyDown} {...props} />;
 });
 Input.displayName = 'Input';
 
-export { Input };
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, onKeyDown, ...props }, ref) => {
+    return <textarea className={cn('h-40', commonClasses, className)} ref={ref} {...props} />;
+});
+Textarea.displayName = 'Textarea';
+
+export { Input, Textarea };
diff --git a/src/component-library/atoms/misc/CircleWithText.tsx b/src/component-library/atoms/misc/CircleWithText.tsx
new file mode 100644
index 000000000..86007ab37
--- /dev/null
+++ b/src/component-library/atoms/misc/CircleWithText.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { cn } from '@/component-library/utils';
+
+const CircleWithText = ({ text, className, onClick }: { text: string; onClick?: () => void; className?: string }) => {
+    const classes = cn(
+        'flex items-center justify-center',
+        'w-12 h-12 rounded-full',
+        'text-neutral-100',
+        'border border-neutral-900 dark:border-neutral-100 border-opacity-10 dark:border-opacity-10',
+        className,
+        onClick ? 'cursor-pointer' : '',
+    );
+
+    return (
+        <div className={classes} onClick={onClick}>
+            <span className="text-lg">{text}</span>
+        </div>
+    );
+};
+
+export default CircleWithText;
diff --git a/src/component-library/atoms/misc/Divider.tsx b/src/component-library/atoms/misc/Divider.tsx
index f7a4ee13f..1d47752e9 100644
--- a/src/component-library/atoms/misc/Divider.tsx
+++ b/src/component-library/atoms/misc/Divider.tsx
@@ -6,15 +6,22 @@ export const Divider = ({
     thickness = 'border',
     color = 'border-neutral-100 dark:border-neutral-700',
     margin = 'my-2',
+    className = '',
 }) => {
     const isHorizontal = orientation === 'horizontal';
 
-    const classNames = cn(color, thickness, margin, {
-        'w-full': isHorizontal,
-        'h-full': !isHorizontal,
-        'border-t': isHorizontal,
-        'border-l': !isHorizontal,
-    });
+    const classNames = cn(
+        color,
+        thickness,
+        margin,
+        {
+            'w-full': isHorizontal,
+            'h-full': !isHorizontal,
+            'border-t': isHorizontal,
+            'border-l': !isHorizontal,
+        },
+        className,
+    );
 
     return <div className={classNames}></div>;
 };
diff --git a/src/component-library/atoms/misc/Heading.tsx b/src/component-library/atoms/misc/Heading.tsx
index feeadc34a..88903cc9d 100644
--- a/src/component-library/atoms/misc/Heading.tsx
+++ b/src/component-library/atoms/misc/Heading.tsx
@@ -1,9 +1,29 @@
 import * as React from 'react';
 import { cn } from '@/component-library/utils';
+import { cva } from 'class-variance-authority';
 
-export const Heading = ({ text, className, ...props }: { text: string; className?: string }) => {
+const headingStyles = cva('text-neutral-900 dark:text-neutral-100 font-bold', {
+    variants: {
+        size: {
+            sm: 'text-xl font-medium',
+            md: 'text-2xl',
+            lg: 'text-4xl',
+        },
+    },
+    defaultVariants: {
+        size: 'lg',
+    },
+});
+
+interface HeadingProps {
+    text: string;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+
+export const Heading = ({ text, size, className, ...props }: HeadingProps) => {
     return (
-        <h1 className={cn('text-4xl text-neutral-900 dark:text-neutral-100 font-bold', className)} {...props}>
+        <h1 className={cn(headingStyles({ size }), className)} {...props}>
             {text}
         </h1>
     );
diff --git a/src/component-library/atoms/misc/collapsible.tsx b/src/component-library/atoms/misc/collapsible.tsx
new file mode 100644
index 000000000..86ab87d88
--- /dev/null
+++ b/src/component-library/atoms/misc/collapsible.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/src/component-library/demos/02_1_Dashboard.stories.tsx b/src/component-library/demos/02_1_Dashboard.stories.tsx
deleted file mode 100644
index 9b2af4d5c..000000000
--- a/src/component-library/demos/02_1_Dashboard.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Role } from '@/lib/core/entity/account';
-import { Meta, StoryObj } from '@storybook/react';
-import { fixtureOngoingrules, fixtureUsedquota } from 'test/fixtures/widget-fixtures';
-import { Dashboard as D } from '@/component-library/pages/legacy/Dashboard/Dashboard';
-
-export default {
-    title: 'Demos/02_Dashboard',
-    component: D,
-} as Meta<typeof D>;
-
-type Story = StoryObj<typeof D>;
-
-export const SampleUserDashboard: Story = {
-    args: {
-        accountname: 'mayank',
-        accountrole: Role.USER,
-        inputOngoingrules: Array.from({ length: 20 }, (v, k) => fixtureOngoingrules()),
-        inputUsedquota: Array.from({ length: 20 }, (v, k) => fixtureUsedquota()),
-    },
-};
diff --git a/src/component-library/demos/02_2_Dashboard_admin.stories.tsx b/src/component-library/demos/02_2_Dashboard_admin.stories.tsx
deleted file mode 100644
index 763c3029c..000000000
--- a/src/component-library/demos/02_2_Dashboard_admin.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Role } from '@/lib/core/entity/account';
-import { Meta, StoryObj } from '@storybook/react';
-import { fixtureOngoingrules, fixtureUsedquota } from 'test/fixtures/widget-fixtures';
-import { Dashboard as D } from '@/component-library/pages/legacy/Dashboard/Dashboard';
-
-export default {
-    title: 'Demos/02_Dashboard',
-    component: D,
-} as Meta<typeof D>;
-
-type Story = StoryObj<typeof D>;
-
-export const SampleAdminDashboard: Story = {
-    args: {
-        accountname: 'ddmadmin',
-        accountrole: Role.ADMIN,
-        inputOngoingrules: Array.from({ length: 20 }, (v, k) => fixtureOngoingrules()),
-        inputUsedquota: Array.from({ length: 20 }, (v, k) => fixtureUsedquota()),
-    },
-};
diff --git a/src/component-library/demos/03_1_Create_Rules.stories.tsx b/src/component-library/demos/03_1_Create_Rules.stories.tsx
deleted file mode 100644
index 1af04d858..000000000
--- a/src/component-library/demos/03_1_Create_Rules.stories.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { CreateRulesViewModel, TypedDIDValidationQuery, TypedDIDValidationResponse } from '@/lib/infrastructure/data/view-model/create-rule';
-import { TCreateRuleFeatureRequestParams } from '@/pages/api/feature/create-rule';
-import { Meta, StoryObj } from '@storybook/react';
-import { fixtureListDIDViewModel, fixtureRSEAccountUsageLimitViewModel, mockUseComDOM } from 'test/fixtures/table-fixtures';
-import { CreateRule as CR } from '@/component-library/pages/legacy/Rule/CreateRule.stories';
-
-export default {
-    title: 'Demos/03_CreateRule',
-    component: CR,
-} as Meta<typeof CR>;
-
-type Story = StoryObj<typeof CR>;
-
-export const CreateRule: Story = {
-    args: {
-        onSubmit: (query: TCreateRuleFeatureRequestParams): Promise<CreateRulesViewModel> => {
-            return Promise.resolve({
-                status: 'success',
-                rules: [
-                    {
-                        RuleID: '123123143243',
-                        DID: 'scope:dataset1',
-                    },
-                    {
-                        RuleID: '127849dsgs',
-                        DID: 'scope:dataset2',
-                    },
-                ],
-            });
-        },
-        didListComDOM: mockUseComDOM(Array.from({ length: 100 }, () => fixtureListDIDViewModel())),
-        didValidation: (query: TypedDIDValidationQuery) => {
-            // if the DID contains the string "error", it will be added to the error list
-            var localErrorDIDs: TypedDIDValidationResponse = { ErrorList: [] };
-            query.DIDList.map((DID: string, index: number) => {
-                if (DID.includes('error')) {
-                    localErrorDIDs.ErrorList.push({ DID: DID, ErrorCodes: [421], Message: 'This DID is invalid' });
-                }
-            });
-            // if the error list is empty, the promise will resolve, otherwise it will reject
-            if (localErrorDIDs.ErrorList.length === 0) {
-                return Promise.resolve(localErrorDIDs);
-            } else {
-                return Promise.reject(localErrorDIDs);
-            }
-        },
-        rseListComDOM: mockUseComDOM(Array.from({ length: 100 }, () => fixtureRSEAccountUsageLimitViewModel())),
-    },
-};
diff --git a/src/component-library/demos/03_3_Page_Rule.stories.tsx b/src/component-library/demos/03_3_Page_Rule.stories.tsx
deleted file mode 100644
index 990594e5d..000000000
--- a/src/component-library/demos/03_3_Page_Rule.stories.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { RulePageLockEntryViewModel } from '@/lib/infrastructure/data/view-model/rule';
-import { Meta, StoryObj } from '@storybook/react';
-import { fixtureRuleMetaViewModel, fixtureRulePageLockEntryViewModel, fixtureRuleViewModel, mockUseComDOM } from 'test/fixtures/table-fixtures';
-import { PageRule as PR } from '@/component-library/pages/legacy/Rule/PageRule';
-
-export default {
-    title: 'Demos/05_PageRule',
-    component: PR,
-} as Meta<typeof PR>;
-
-type Story = StoryObj<typeof PR>;
-
-export const PageRule: Story = {
-    args: {
-        ruleMeta: fixtureRuleMetaViewModel(),
-        ruleLocks: mockUseComDOM<RulePageLockEntryViewModel>(Array.from({ length: 100 }, () => fixtureRulePageLockEntryViewModel())),
-        ruleBoostFunc: () => {
-            console.log('boosted rule');
-        },
-        ruleBoostShow: true,
-    },
-};
diff --git a/src/component-library/demos/04_1_List_Subscriptions.stories.tsx b/src/component-library/demos/04_1_List_Subscriptions.stories.tsx
deleted file mode 100644
index 71ff9bbfa..000000000
--- a/src/component-library/demos/04_1_List_Subscriptions.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { fixtureSubscriptionRuleStatesViewModel, mockUseComDOM } from 'test/fixtures/table-fixtures';
-import { ListSubscription as L } from '@/component-library/pages/legacy/Subscriptions/ListSubscription';
-
-export default {
-    title: 'Demos/06_ListSubscriptions',
-    component: L,
-} as Meta<typeof L>;
-
-type Story = StoryObj<typeof L>;
-
-export const ListSubscription: Story = {
-    args: {
-        accountname: 'test',
-        comdom: mockUseComDOM(Array.from({ length: 100 }, () => fixtureSubscriptionRuleStatesViewModel())),
-    },
-};
diff --git a/src/component-library/demos/04_2_Page_Subscriptions.stories.tsx b/src/component-library/demos/04_2_Page_Subscriptions.stories.tsx
deleted file mode 100644
index 9d10873b6..000000000
--- a/src/component-library/demos/04_2_Page_Subscriptions.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { fixtureSubscriptionViewModel } from 'test/fixtures/table-fixtures';
-import { PageSubscription as P } from '@/component-library/pages/legacy/Subscriptions/PageSubscription';
-
-export default {
-    title: 'Demos/07_PageSubscription',
-    component: P,
-} as Meta<typeof P>;
-
-type Story = StoryObj<typeof P>;
-
-export const ListSubscription: Story = {
-    args: {
-        subscriptionViewModel: fixtureSubscriptionViewModel(),
-    },
-};
diff --git a/src/component-library/features/Timeline.tsx b/src/component-library/features/Timeline.tsx
new file mode 100644
index 000000000..066d9eb12
--- /dev/null
+++ b/src/component-library/features/Timeline.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { cn } from '@/component-library/utils';
+import CircleWithText from '@/component-library/atoms/misc/CircleWithText';
+import { Divider } from '@/component-library/atoms/misc/Divider';
+
+interface TimelineProps {
+    steps: string[];
+    activeIndex: number;
+    onSwitch?: (idx: number) => void;
+}
+
+const Timeline = ({ steps, activeIndex, onSwitch }: TimelineProps) => {
+    return (
+        <div className="flex flex-row justify-between items-center overflow-x-auto">
+            {steps.map((step, index) => {
+                const indexStr = (index + 1).toString();
+                let color: string;
+                if (index === activeIndex) {
+                    color = 'bg-brand-500';
+                } else if (index < activeIndex) {
+                    color = 'bg-base-success-500';
+                } else {
+                    color = 'bg-neutral-0 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100';
+                }
+
+                const isClickable = index < activeIndex && onSwitch;
+
+                return (
+                    <React.Fragment key={step}>
+                        <div className="flex flex-row items-center space-x-2">
+                            <CircleWithText
+                                className={cn('bg-opacity-80 font-semibold', color)}
+                                text={indexStr}
+                                onClick={isClickable ? () => onSwitch(index) : undefined}
+                            />
+                            <span className="text-neutral-900 dark:text-neutral-100 hidden md:inline">{step}</span>
+                        </div>
+                        {index < steps.length - 1 && <Divider className="height-fit mx-3" color="bg-neutral-300 dark:bg-neutral-700" />}
+                    </React.Fragment>
+                );
+            })}
+        </div>
+    );
+};
+
+export default Timeline;
diff --git a/src/component-library/features/badges/DID/DIDTypeBadge.tsx b/src/component-library/features/badges/DID/DIDTypeBadge.tsx
index 494d652f5..36c9c26d5 100644
--- a/src/component-library/features/badges/DID/DIDTypeBadge.tsx
+++ b/src/component-library/features/badges/DID/DIDTypeBadge.tsx
@@ -4,13 +4,13 @@ import { Badge } from '@/component-library/atoms/misc/Badge';
 import { twMerge } from 'tailwind-merge';
 
 const typeColorClasses: Record<DIDType, string> = {
-    All: 'bg-neutral-500',
+    All: 'bg-neutral-0 dark:bg-neutral-900',
     Collection: 'bg-base-info-500',
     Container: 'bg-extra-emerald-500',
     Dataset: 'bg-extra-yellow-400',
-    Derived: 'bg-neutral-500',
+    Derived: 'bg-neutral-0 dark:bg-neutral-900',
     File: 'bg-extra-rose-500',
-    Unknown: 'bg-neutral-500',
+    Unknown: 'bg-neutral-0 dark:bg-neutral-900',
 };
 
 export const DIDTypeBadge = (props: { value: DIDType; className?: string }) => {
diff --git a/src/component-library/features/badges/Rule/LockStateBadge.tsx b/src/component-library/features/badges/Rule/LockStateBadge.tsx
new file mode 100644
index 000000000..12ba56a1f
--- /dev/null
+++ b/src/component-library/features/badges/Rule/LockStateBadge.tsx
@@ -0,0 +1,23 @@
+import { LockState } from '@/lib/core/entity/rucio';
+import React from 'react';
+import { Badge } from '@/component-library/atoms/misc/Badge';
+import { cn } from '@/component-library/utils';
+
+const stateString: Record<LockState, string> = {
+    O: 'OK',
+    R: 'Replicating',
+    S: 'Stuck',
+    U: 'Unknown',
+};
+
+const stateColorClasses: Record<LockState, string> = {
+    O: 'bg-base-success-500',
+    R: 'bg-base-warning-400',
+    S: 'bg-base-error-500',
+    U: 'bg-neutral-0 dark:bg-neutral-900',
+};
+
+export const LockStateBadge = (props: { value: LockState; className?: string }) => {
+    const classes = cn(stateColorClasses[props.value], props.className);
+    return <Badge value={stateString[props.value]} className={classes} />;
+};
diff --git a/src/component-library/features/badges/account/AccountRoleBadge.tsx b/src/component-library/features/badges/account/AccountRoleBadge.tsx
new file mode 100644
index 000000000..2a37f078e
--- /dev/null
+++ b/src/component-library/features/badges/account/AccountRoleBadge.tsx
@@ -0,0 +1,15 @@
+import { RuleState } from '@/lib/core/entity/rucio';
+import React from 'react';
+import { Badge } from '@/component-library/atoms/misc/Badge';
+import { cn } from '@/component-library/utils';
+import { Role } from '@/lib/core/entity/account';
+
+const stateColorClasses: Record<Role, string> = {
+    Admin: 'bg-base-success-500',
+    User: 'bg-base-neutral-0 dark:bg-base-neutral-900',
+};
+
+export const AccountRoleBadge = (props: { value: Role; className?: string }) => {
+    const classes = cn(stateColorClasses[props.value], props.className);
+    return <Badge value={props.value.toString()} className={classes} />;
+};
diff --git a/src/component-library/features/fields/InfoField.tsx b/src/component-library/features/fields/InfoField.tsx
new file mode 100644
index 000000000..8d5a98caa
--- /dev/null
+++ b/src/component-library/features/fields/InfoField.tsx
@@ -0,0 +1,13 @@
+import { Field } from '@/component-library/atoms/misc/Field';
+import { cn } from '@/component-library/utils';
+import { HiInformationCircle } from 'react-icons/hi';
+import React, { ReactNode } from 'react';
+
+export const InfoField = ({ children, className, ...props }: { children: ReactNode; className?: string }) => {
+    return (
+        <Field className={cn('bg-neutral-100 dark:bg-neutral-800', 'items-center py-2 space-x-2', 'whitespace-normal', className)} {...props}>
+            <HiInformationCircle className="h-6 w-6 flex-shrink-0" />
+            {children}
+        </Field>
+    );
+};
diff --git a/src/component-library/features/fields/WarningField.tsx b/src/component-library/features/fields/WarningField.tsx
new file mode 100644
index 000000000..0f39585c6
--- /dev/null
+++ b/src/component-library/features/fields/WarningField.tsx
@@ -0,0 +1,21 @@
+import { Field } from '@/component-library/atoms/misc/Field';
+import { cn } from '@/component-library/utils';
+import React, { ReactNode } from 'react';
+import { HiExclamationCircle } from 'react-icons/hi';
+
+export const WarningField = ({ children, className, ...props }: { children: ReactNode; className?: string }) => {
+    return (
+        <Field
+            className={cn(
+                'bg-base-error-500 dark:bg-base-error-500 bg-opacity-60 dark:bg-opacity-60',
+                'items-center py-2 space-x-2',
+                'whitespace-normal',
+                className,
+            )}
+            {...props}
+        >
+            <HiExclamationCircle className="h-6 w-6 flex-shrink-0" />
+            {children}
+        </Field>
+    );
+};
diff --git a/src/component-library/features/form/LabeledCheckbox.tsx b/src/component-library/features/form/LabeledCheckbox.tsx
new file mode 100644
index 000000000..54185fa31
--- /dev/null
+++ b/src/component-library/features/form/LabeledCheckbox.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { cn } from '@/component-library/utils';
+import Checkbox from '@/component-library/atoms/form/Checkbox';
+
+interface LabeledCheckboxProps {
+    checked: boolean;
+    onChange: () => void;
+    label: string;
+    className?: string; // Optional className prop
+}
+
+export const LabeledCheckbox: React.FC<LabeledCheckboxProps> = ({ checked, onChange, label, className }) => {
+    return (
+        <div className={cn('flex flex-row items-center space-x-3 w-fit cursor-pointer', className)} onClick={onChange}>
+            <Checkbox checked={checked} />
+            <span className="select-none text-neutral-900 dark:text-neutral-100">{label}</span>
+        </div>
+    );
+};
diff --git a/src/component-library/features/key-value/KeyValueRow.tsx b/src/component-library/features/key-value/KeyValueRow.tsx
new file mode 100644
index 000000000..4011b1d75
--- /dev/null
+++ b/src/component-library/features/key-value/KeyValueRow.tsx
@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { cn } from '@/component-library/utils';
+
+export const KeyValueRow = (props: { name: string; children: ReactNode }) => {
+    return (
+        <div className="flex w-full items-center h-12">
+            <span className={cn('text-neutral-700 dark:text-neutral-300', 'min-w-[10rem] pr-3', 'font-medium text-right text-sm')}>{props.name}</span>
+            <span className="flex items-center">{props.children}</span>
+        </div>
+    );
+};
diff --git a/src/component-library/features/key-value/KeyValueWrapper.tsx b/src/component-library/features/key-value/KeyValueWrapper.tsx
new file mode 100644
index 000000000..15e8f965f
--- /dev/null
+++ b/src/component-library/features/key-value/KeyValueWrapper.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { cn } from '@/component-library/utils';
+
+export const KeyValueWrapper = ({ children, className }: { children: ReactNode; className?: string }) => {
+    return (
+        <div
+            className={cn(
+                'bg-neutral-0 dark:bg-neutral-800',
+                'rounded-md border border-neutral-900 dark:border-neutral-100 border-opacity-10 dark:border-opacity-10',
+                className,
+            )}
+        >
+            {children}
+        </div>
+    );
+};
diff --git a/src/component-library/features/key-value/headers.tsx b/src/component-library/features/key-value/headers.tsx
new file mode 100644
index 000000000..6505ebf28
--- /dev/null
+++ b/src/component-library/features/key-value/headers.tsx
@@ -0,0 +1,26 @@
+import { cn } from '@/component-library/utils';
+import Link from 'next/link';
+import { HiExternalLink } from 'react-icons/hi';
+import { ReactNode } from 'react';
+
+const headerCommonClasses = cn(
+    'h-[52px] px-4 py-2 space-x-2',
+    'bg-neutral-200 dark:bg-neutral-700',
+    'border-b border-neutral-900 dark:border-neutral-100 border-opacity-10 dark:border-opacity-10',
+    'text-neutral-700 dark:text-neutral-300 font-medium',
+    'flex grow items-center w-full',
+    'whitespace-nowrap',
+);
+
+export const KeyValueLinkHeader = ({ href, children }: { href: string; children: ReactNode }) => {
+    return (
+        <Link href={href} className={cn(headerCommonClasses, 'hover:text-brand-600 dark:hover:text-brand-400')}>
+            <HiExternalLink className="h-5 w-5" />
+            {children}
+        </Link>
+    );
+};
+
+export const KeyValueHeader = ({ href, children }: { href: string; children: ReactNode }) => {
+    return <div className={headerCommonClasses}>{children}</div>;
+};
diff --git a/src/component-library/features/search/DIDSearchPanel.tsx b/src/component-library/features/search/DIDSearchPanel.tsx
new file mode 100644
index 000000000..500206869
--- /dev/null
+++ b/src/component-library/features/search/DIDSearchPanel.tsx
@@ -0,0 +1,140 @@
+import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
+import { DIDType } from '@/lib/core/entity/rucio';
+import { useToast } from '@/lib/infrastructure/hooks/useToast';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/component-library/atoms/form/select';
+import { Input } from '@/component-library/atoms/form/input';
+import { SearchButton } from '@/component-library/features/search/SearchButton';
+
+const SCOPE_DELIMITER = ':';
+const emptyToastMessage = 'Please specify both scope and name before the search.';
+const delimiterToastMessage = 'Neither scope nor name should contain ":".';
+
+interface SearchPanelProps {
+    startStreaming: (url: string) => void;
+    stopStreaming: () => void;
+    initialPattern?: string;
+    isRunning: boolean;
+}
+
+export const DIDSearchPanel = (props: SearchPanelProps) => {
+    // Try retrieving initial search parameters
+    let initialScope: string | undefined, initialName: string | undefined;
+    const initialPatternParts = props.initialPattern?.split(SCOPE_DELIMITER);
+    if (initialPatternParts && initialPatternParts.length === 2) {
+        [initialScope, initialName] = initialPatternParts;
+    }
+
+    // Check the validity of the initial pattern
+    useEffect(() => {
+        // A short timeout is required for the toast context to initialize
+        const timeout = setTimeout(() => {
+            if (props.initialPattern && !initialScope && !initialName) {
+                toast({
+                    variant: 'warning',
+                    title: 'Invalid initial pattern',
+                    description: `Could not resolve "${props.initialPattern}"`,
+                });
+            }
+        }, 0);
+
+        return () => clearTimeout(timeout);
+    }, []);
+
+    const [scope, setScope] = useState<string | null>(initialScope ?? null);
+    const [name, setName] = useState<string | null>(initialName ?? null);
+    const [type, setType] = useState<DIDType>(DIDType.DATASET);
+
+    const scopeInputRef = useRef<HTMLInputElement>(null);
+    const nameInputRef = useRef<HTMLInputElement>(null);
+
+    const { toast } = useToast();
+
+    const showToastAndFocus = (title: string, description: string, inputRef: React.RefObject<HTMLInputElement>) => {
+        toast({
+            variant: 'warning',
+            title,
+            description,
+        });
+        inputRef.current?.focus();
+    };
+
+    const validateField = (value: string | null, fieldName: string, inputRef: React.RefObject<HTMLInputElement>): boolean => {
+        if (!value) {
+            showToastAndFocus(`Empty ${fieldName}`, emptyToastMessage, inputRef);
+            return false;
+        } else if (value.includes(SCOPE_DELIMITER)) {
+            showToastAndFocus(`":" in ${fieldName}`, delimiterToastMessage, inputRef);
+            return false;
+        }
+        return true;
+    };
+
+    const validateScope = (): boolean => {
+        return validateField(scope, 'scope', scopeInputRef);
+    };
+
+    const validateName = (): boolean => {
+        return validateField(name, 'name', nameInputRef);
+    };
+
+    const onSearch = (event: any) => {
+        event.preventDefault();
+
+        if (!validateScope() || !validateName()) return;
+
+        const params = new URLSearchParams({
+            query: `${scope}${SCOPE_DELIMITER}${name}`,
+            type: type,
+        });
+
+        const url = '/api/feature/list-dids?' + params;
+        props.startStreaming(url);
+    };
+
+    const onStop = (event: any) => {
+        event.preventDefault();
+        props.stopStreaming();
+    };
+
+    return (
+        <div className="flex flex-col space-y-2 w-full md:items-start md:flex-row md:space-y-0 md:space-x-2">
+            <div className="flex flex-col grow sm:flex-row space-y-2 sm:space-x-2 sm:space-y-0">
+                <Select onValueChange={value => setType(value as DIDType)} defaultValue={type}>
+                    <SelectTrigger className="w-full sm:w-48">
+                        <SelectValue placeholder="Type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectGroup>
+                            <SelectItem value={DIDType.CONTAINER}>Container</SelectItem>
+                            <SelectItem value={DIDType.DATASET}>Dataset</SelectItem>
+                            <SelectItem value={DIDType.FILE}>File</SelectItem>
+                        </SelectGroup>
+                    </SelectContent>
+                </Select>
+                <div className="w-full flex flex-row space-x-2 items-center">
+                    <Input
+                        ref={scopeInputRef}
+                        placeholder="scope"
+                        className="max-w-[250px]"
+                        defaultValue={initialScope}
+                        onInput={(event: ChangeEvent<HTMLInputElement>) => {
+                            setScope(event.target.value);
+                        }}
+                        onEnterKey={onSearch}
+                    />
+                    <span className="text-neutral-900 dark:text-neutral-100 font-bold">:</span>
+                    <Input
+                        ref={nameInputRef}
+                        placeholder="name"
+                        defaultValue={initialName}
+                        onInput={(event: ChangeEvent<HTMLInputElement>) => {
+                            setName(event.target.value);
+                        }}
+                        onEnterKey={onSearch}
+                    />
+                </div>
+            </div>
+            <SearchButton isRunning={props.isRunning} onStop={onStop} onSearch={onSearch} />
+        </div>
+    );
+};
diff --git a/src/component-library/features/search/RSESearchPanel.tsx b/src/component-library/features/search/RSESearchPanel.tsx
new file mode 100644
index 000000000..fe65923db
--- /dev/null
+++ b/src/component-library/features/search/RSESearchPanel.tsx
@@ -0,0 +1,59 @@
+import { HintLink } from '@/component-library/atoms/misc/HintLink';
+import { Input } from '@/component-library/atoms/form/input';
+import { SearchButton } from '@/component-library/features/search/SearchButton';
+import { ChangeEvent, Ref, useEffect, useState } from 'react';
+import { GridApi } from 'ag-grid-community';
+
+const DEFAULT_EXPRESSION = '*';
+
+interface SearchPanelProps {
+    onSearch: (expression: string) => void;
+    stopStreaming: () => void;
+    initialExpression?: string;
+    isRunning: boolean;
+    gridApi?: GridApi;
+}
+
+export const RSESearchPanel = (props: SearchPanelProps) => {
+    const [expression, setExpression] = useState<string | null>(props.initialExpression ?? DEFAULT_EXPRESSION);
+
+    const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const value = event.target.value;
+        setExpression(value !== '' ? value : DEFAULT_EXPRESSION);
+    };
+
+    useEffect(() => {
+        if (props.gridApi) {
+            props.onSearch(expression ?? DEFAULT_EXPRESSION);
+        }
+    }, [props.gridApi]);
+
+    const onSearch = (event: any) => {
+        event.preventDefault();
+        props.onSearch(expression ?? DEFAULT_EXPRESSION);
+    };
+
+    const onStop = (event: any) => {
+        event.preventDefault();
+        props.stopStreaming();
+    };
+
+    return (
+        <div className="space-y-2">
+            <div className="text-neutral-900 dark:text-neutral-100">
+                Expression
+                <HintLink href="https://rucio.github.io/documentation/started/concepts/rse_expressions" className="pl-2" />
+            </div>
+            <div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2 items-center sm:items-start">
+                <Input
+                    className="w-full sm:flex-grow"
+                    onChange={onInputChange}
+                    onEnterKey={onSearch}
+                    placeholder={DEFAULT_EXPRESSION}
+                    defaultValue={props.initialExpression ?? ''}
+                />
+                <SearchButton isRunning={props.isRunning} onStop={onStop} onSearch={onSearch} />
+            </div>
+        </div>
+    );
+};
diff --git a/src/component-library/features/search/ToggleHeader.tsx b/src/component-library/features/search/ToggleHeader.tsx
new file mode 100644
index 000000000..1da1ff096
--- /dev/null
+++ b/src/component-library/features/search/ToggleHeader.tsx
@@ -0,0 +1,32 @@
+import { HiChevronUp, HiChevronDown } from 'react-icons/hi';
+import React from 'react';
+import { Heading } from '@/component-library/atoms/misc/Heading';
+import { cn } from '@/component-library/utils';
+
+interface ToggleHeaderProps {
+    text: string;
+    isOpen: boolean;
+    onClick: () => void;
+}
+
+const ToggleHeader: React.FC<ToggleHeaderProps> = ({ text, isOpen, onClick }) => {
+    const chevronSize = 'h-7 w-7';
+
+    return (
+        <div
+            className={cn(
+                'flex w-full justify-between items-center',
+                'cursor-pointer select-none',
+                'px-3 py-2',
+                'rounded-md border border-neutral-900 dark:border-neutral-100 border-opacity-10 dark:border-opacity-10',
+                'text-neutral-900 dark:text-neutral-100',
+            )}
+            onClick={onClick}
+        >
+            <Heading text={text} size="sm" />
+            {isOpen ? <HiChevronUp className={chevronSize} /> : <HiChevronDown className={chevronSize} />}
+        </div>
+    );
+};
+
+export default ToggleHeader;
diff --git a/src/component-library/features/table/RegularTable/RegularTable.tsx b/src/component-library/features/table/RegularTable/RegularTable.tsx
index 52b82137a..662d56c9e 100644
--- a/src/component-library/features/table/RegularTable/RegularTable.tsx
+++ b/src/component-library/features/table/RegularTable/RegularTable.tsx
@@ -2,21 +2,15 @@ import React, { RefObject, useEffect, useRef, useState } from 'react';
 import { HiOutlineChevronDoubleLeft, HiOutlineChevronDoubleRight, HiOutlineChevronLeft, HiOutlineChevronRight } from 'react-icons/hi';
 import { twMerge } from 'tailwind-merge';
 import { Skeleton } from '@/component-library/atoms/loading/Skeleton';
-import { AgGridReact } from 'ag-grid-react';
-import { ColDef, ColGroupDef } from 'ag-grid-community/dist/types/core/entities/colDef';
+import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
 import { NoDataYetOverlay } from '@/component-library/features/table/overlays/NoDataYetOverlay';
-import { GridReadyEvent, SelectionChangedEvent } from 'ag-grid-community';
+import { AgGridEvent, GridReadyEvent } from 'ag-grid-community';
 import useDarkMode from '@/lib/infrastructure/hooks/useDarkMode';
 import '@/component-library/features/table/RegularTable/styles/agGridThemeRucioDark.css';
 import '@/component-library/features/table/RegularTable/styles/agGridThemeRucioLight.css';
 
-export interface RegularTableProps {
+export interface RegularTableProps extends AgGridReactProps {
     tableRef: RefObject<AgGridReact>;
-    columnDefs: (ColDef | ColGroupDef)[];
-    noRowsOverlayComponent?: any;
-    rowSelection?: 'single' | 'multiple';
-    onSelectionChanged?: (event: SelectionChangedEvent) => void;
-    onGridReady?: (event: GridReadyEvent) => void;
 }
 
 // This implementation of the pagination panel uses refs to prevent excessive state updates
@@ -137,20 +131,13 @@ export const RegularTable = (props: RegularTableProps) => {
         }
     };
 
-    // Resize the columns to fit the grid on changing the window dimensions
     useEffect(() => {
-        const handleResize = () => {
-            if (props.tableRef.current?.api) {
-                props.tableRef.current!.api.sizeColumnsToFit();
-            }
-        };
+        onPaginationChanged();
+    }, [isTableLoaded]);
 
-        window.addEventListener('resize', handleResize);
-
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, [props.tableRef]);
+    const handleResize = (event: AgGridEvent) => {
+        event.api.sizeColumnsToFit();
+    };
 
     const isDarkMode = useDarkMode();
 
@@ -168,19 +155,18 @@ export const RegularTable = (props: RegularTableProps) => {
             >
                 {!isTableLoaded && <Skeleton className="absolute flex items-center justify-center w-full h-full rounded-b-none" />}
                 <AgGridReact
+                    {...props}
                     pagination={true}
                     paginationAutoPageSize={true}
                     ref={props.tableRef}
                     loadingOverlayComponent={NoDataYetOverlay}
-                    noRowsOverlayComponent={props.noRowsOverlayComponent}
-                    columnDefs={props.columnDefs}
                     onGridReady={onGridReady}
                     domLayout="normal" // Ensures the grid fits within the flex container
                     suppressPaginationPanel={true}
                     onPaginationChanged={onPaginationChanged}
                     suppressMovableColumns={true}
-                    rowSelection={props.rowSelection}
-                    onSelectionChanged={props.onSelectionChanged}
+                    rowMultiSelectWithClick={true}
+                    onGridSizeChanged={handleResize}
                     //asyncTransactionWaitMillis={500}
                 />
             </div>
diff --git a/src/component-library/features/table/StreamedTable/StreamedTable.tsx b/src/component-library/features/table/StreamedTable/StreamedTable.tsx
index 082002e93..690b07863 100644
--- a/src/component-library/features/table/StreamedTable/StreamedTable.tsx
+++ b/src/component-library/features/table/StreamedTable/StreamedTable.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect } from 'react';
 import { RegularTable, RegularTableProps } from '@/component-library/features/table/RegularTable/RegularTable';
-import { StreamingErrorType, StreamingStatus, UseChunkedStream } from '@/lib/infrastructure/hooks/useChunkedStream';
+import { StreamingErrorType, StreamingStatus, UseStreamReader } from '@/lib/infrastructure/hooks/useStreamReader';
 import { NoLoadedRowsOverlay } from '@/component-library/features/table/overlays/NoLoadedRowsOverlay';
 import { useToast } from '@/lib/infrastructure/hooks/useToast';
 
 export interface StreamedTableProps extends RegularTableProps {
-    streamingHook: UseChunkedStream<any>;
+    streamingHook: UseStreamReader<any>;
 }
 
 export const StreamedTable = (props: StreamedTableProps) => {
@@ -33,8 +33,10 @@ export const StreamedTable = (props: StreamedTableProps) => {
     // Ensure the overlay updates when streaming faces an error
     useEffect(() => {
         const gridApi = props.tableRef.current?.api;
-        if (status === StreamingStatus.RUNNING || error || gridApi?.getDisplayedRowCount() === 0) {
+        if (status === StreamingStatus.RUNNING || error) {
             gridApi?.showNoRowsOverlay();
+        } else {
+            gridApi?.hideOverlay();
         }
         showErrorToast();
     }, [error, status]);
diff --git a/src/component-library/features/table/cells/selection-cells.tsx b/src/component-library/features/table/cells/selection-cells.tsx
new file mode 100644
index 000000000..9342afb79
--- /dev/null
+++ b/src/component-library/features/table/cells/selection-cells.tsx
@@ -0,0 +1,23 @@
+import { HiCheck, HiMinus, HiPlus } from 'react-icons/hi';
+import React from 'react';
+
+const containerStyles = 'flex flex-row items-center space-x-2';
+const iconSize = 'h-5 w-5';
+
+export const SelectableCell = (props: { onSelect: () => void; selected: boolean; value: string }) => {
+    return (
+        <div className={containerStyles} onClick={props.onSelect}>
+            {props.selected ? <HiCheck className={`text-base-success-600 ${iconSize}`} /> : <HiPlus className={`text-brand-500 ${iconSize}`} />}
+            <span>{props.value}</span>
+        </div>
+    );
+};
+
+export const RemovableCell = (props: { onClick: () => void; value: string }) => {
+    return (
+        <div className={containerStyles} onClick={props.onClick}>
+            <HiMinus className={`text-base-error-500 ${iconSize}`} />
+            <span>{props.value}</span>
+        </div>
+    );
+};
diff --git a/src/component-library/features/table/overlays/NoLoadedRowsOverlay.tsx b/src/component-library/features/table/overlays/NoLoadedRowsOverlay.tsx
index 5df55b5d1..f0c5e2fd8 100644
--- a/src/component-library/features/table/overlays/NoLoadedRowsOverlay.tsx
+++ b/src/component-library/features/table/overlays/NoLoadedRowsOverlay.tsx
@@ -1,4 +1,4 @@
-import { StreamingError, StreamingErrorType, StreamingStatus } from '@/lib/infrastructure/hooks/useChunkedStream';
+import { StreamingError, StreamingErrorType, StreamingStatus } from '@/lib/infrastructure/hooks/useStreamReader';
 import { LoadingSpinner } from '@/component-library/atoms/loading/LoadingSpinner';
 import React from 'react';
 import { NoDataYetOverlay } from '@/component-library/features/table/overlays/NoDataYetOverlay';
diff --git a/src/component-library/features/utils/text-formatters.ts b/src/component-library/features/utils/text-formatters.ts
index 7f84a37b9..ac9c74076 100644
--- a/src/component-library/features/utils/text-formatters.ts
+++ b/src/component-library/features/utils/text-formatters.ts
@@ -14,11 +14,16 @@ export const formatDate = (isoString: string): string => {
 };
 
 export const formatFileSize = (bytes: number): string => {
-    if (isNaN(bytes) || bytes < 0) return DEFAULT_VALUE;
+    if (isNaN(bytes)) return DEFAULT_VALUE;
     if (bytes === 0) return '0 Bytes';
+
+    const sign = bytes < 0 ? '-' : ''; // Check if the number is negative
+    bytes = Math.abs(bytes); // Use the absolute value of the bytes
+
     const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
     const i = Math.floor(Math.log(bytes) / Math.log(1024));
-    return `${parseFloat((bytes / Math.pow(1024, i)).toFixed(2))} ${sizes[i]}`;
+
+    return `${sign}${parseFloat((bytes / Math.pow(1024, i)).toFixed(2))} ${sizes[i]}`;
 };
 
 export const formatSeconds = (seconds: number): string => {
diff --git a/src/component-library/outputtailwind.css b/src/component-library/outputtailwind.css
index a4ff46e28..b6b341a9b 100644
--- a/src/component-library/outputtailwind.css
+++ b/src/component-library/outputtailwind.css
@@ -677,13 +677,24 @@ html {
   margin-right: 0.5rem;
 }
 
+.mx-3 {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-.-mb-2 {
-  margin-bottom: -0.5rem;
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
 }
 
 .mb-1 {
@@ -718,6 +729,10 @@ html {
   margin-left: 1rem;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
 .mr-1 {
   margin-right: 0.25rem;
 }
@@ -818,6 +833,10 @@ html {
   height: 3rem;
 }
 
+.h-14 {
+  height: 3.5rem;
+}
+
 .h-16 {
   height: 4rem;
 }
@@ -830,10 +849,6 @@ html {
   height: 0.625rem;
 }
 
-.h-24 {
-  height: 6rem;
-}
-
 .h-3 {
   height: 0.75rem;
 }
@@ -846,6 +861,10 @@ html {
   height: 1rem;
 }
 
+.h-40 {
+  height: 10rem;
+}
+
 .h-48 {
   height: 12rem;
 }
@@ -862,6 +881,10 @@ html {
   height: 1.5rem;
 }
 
+.h-7 {
+  height: 1.75rem;
+}
+
 .h-8 {
   height: 2rem;
 }
@@ -870,16 +893,29 @@ html {
   height: 2.25rem;
 }
 
+.h-\[450px\] {
+  height: 450px;
+}
+
+.h-\[500px\] {
+  height: 500px;
+}
+
 .h-\[52px\] {
   height: 52px;
 }
 
+.h-\[740px\] {
+  height: 740px;
+}
+
 .h-\[var\(--radix-select-trigger-height\)\] {
   height: var(--radix-select-trigger-height);
 }
 
-.h-auto {
-  height: auto;
+.h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
 }
 
 .h-full {
@@ -954,10 +990,6 @@ html {
   width: 8rem;
 }
 
-.w-36 {
-  width: 9rem;
-}
-
 .w-4 {
   width: 1rem;
 }
@@ -966,10 +998,6 @@ html {
   width: 10rem;
 }
 
-.w-44 {
-  width: 11rem;
-}
-
 .w-48 {
   width: 12rem;
 }
@@ -978,10 +1006,6 @@ html {
   width: 1.25rem;
 }
 
-.w-56 {
-  width: 14rem;
-}
-
 .w-6 {
   width: 1.5rem;
 }
@@ -990,12 +1014,12 @@ html {
   width: 16rem;
 }
 
-.w-72 {
-  width: 18rem;
+.w-7 {
+  width: 1.75rem;
 }
 
-.w-8 {
-  width: 2rem;
+.w-72 {
+  width: 18rem;
 }
 
 .w-\[35rem\] {
@@ -1020,6 +1044,14 @@ html {
   min-width: 10rem;
 }
 
+.min-w-\[300px\] {
+  min-width: 300px;
+}
+
+.min-w-\[700px\] {
+  min-width: 700px;
+}
+
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -1119,12 +1151,6 @@ html {
           user-select: none;
 }
 
-.select-all {
-  -webkit-user-select: all;
-     -moz-user-select: all;
-          user-select: all;
-}
-
 .resize {
   resize: both;
 }
@@ -1217,8 +1243,8 @@ html {
   gap: 1rem;
 }
 
-.gap-y-0 {
-  row-gap: 0px;
+.gap-y-2 {
+  row-gap: 0.5rem;
 }
 
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
@@ -1227,6 +1253,12 @@ html {
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-10 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(2.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-16 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(4rem * var(--tw-space-x-reverse));
@@ -1239,6 +1271,12 @@ html {
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -1275,6 +1313,12 @@ html {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.space-y-5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1293,6 +1337,10 @@ html {
   overflow: hidden;
 }
 
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -1305,6 +1353,16 @@ html {
   overflow-y: scroll;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.whitespace-normal {
+  white-space: normal;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1453,11 +1511,6 @@ html {
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
-.border-gray-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
-}
-
 .border-gray-700 {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
@@ -1706,11 +1759,6 @@ html {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-.bg-gray-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
-
 .bg-gray-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
@@ -1736,10 +1784,6 @@ html {
   background-color: rgb(22 101 52 / var(--tw-bg-opacity));
 }
 
-.bg-inherit {
-  background-color: inherit;
-}
-
 .bg-neutral-0 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1838,6 +1882,14 @@ html {
   --tw-bg-opacity: 0.5;
 }
 
+.bg-opacity-60 {
+  --tw-bg-opacity: 0.6;
+}
+
+.bg-opacity-70 {
+  --tw-bg-opacity: 0.7;
+}
+
 .bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
@@ -1858,10 +1910,18 @@ html {
   padding: 0.5rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .p-4 {
   padding: 1rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .p-6 {
   padding: 1.5rem;
 }
@@ -1953,10 +2013,6 @@ html {
   padding-left: 0.5rem;
 }
 
-.pl-5 {
-  padding-left: 1.25rem;
-}
-
 .pl-8 {
   padding-left: 2rem;
 }
@@ -1989,6 +2045,10 @@ html {
   padding-top: 0.5rem;
 }
 
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2118,6 +2178,11 @@ html {
   color: rgb(7 89 133 / var(--tw-text-opacity));
 }
 
+.text-base-success-600 {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
 .text-base-success-700 {
   --tw-text-opacity: 1;
   color: rgb(21 128 61 / var(--tw-text-opacity));
@@ -2148,11 +2213,6 @@ html {
   color: rgb(120 53 15 / var(--tw-text-opacity));
 }
 
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
 .text-blue-100 {
   --tw-text-opacity: 1;
   color: rgb(219 234 254 / var(--tw-text-opacity));
@@ -2479,11 +2539,6 @@ html {
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
 }
 
-.odd\:bg-stone-100:nth-child(odd) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
-}
-
 .hover\:cursor-default:hover {
   cursor: default;
 }
@@ -2650,11 +2705,6 @@ html {
   color: rgb(124 58 237 / var(--tw-text-opacity));
 }
 
-.hover\:text-brand-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(109 40 217 / var(--tw-text-opacity));
-}
-
 .hover\:text-red-700:hover {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity));
@@ -2924,10 +2974,6 @@ html {
   border-width: 1px;
 }
 
-.dark .dark\:border-0 {
-  border-width: 0px;
-}
-
 .dark .dark\:border-2 {
   border-width: 2px;
 }
@@ -3019,6 +3065,11 @@ html {
   --tw-border-opacity: 0.2;
 }
 
+.dark .dark\:bg-base-error-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:bg-base-error-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
@@ -3144,10 +3195,6 @@ html {
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-inherit {
-  background-color: inherit;
-}
-
 .dark .dark\:bg-neutral-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
@@ -3191,6 +3238,10 @@ html {
   --tw-bg-opacity: 0.7;
 }
 
+.dark .dark\:bg-opacity-90 {
+  --tw-bg-opacity: 0.9;
+}
+
 .dark .dark\:bg-clip-content {
   background-clip: content-box;
 }
@@ -3204,11 +3255,6 @@ html {
   color: rgb(252 165 165 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-base-error-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
-
 .dark .dark\:text-base-success-200 {
   --tw-text-opacity: 1;
   color: rgb(187 247 208 / var(--tw-text-opacity));
@@ -3234,11 +3280,6 @@ html {
   color: rgb(221 214 254 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-brand-400 {
-  --tw-text-opacity: 1;
-  color: rgb(167 139 250 / var(--tw-text-opacity));
-}
-
 .dark .dark\:text-extra-emerald-300 {
   --tw-text-opacity: 1;
   color: rgb(110 231 183 / var(--tw-text-opacity));
@@ -3335,11 +3376,6 @@ html {
   background-color: rgb(139 92 246 / var(--tw-bg-opacity));
 }
 
-.dark .odd\:dark\:bg-neutral-800:nth-child(odd) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
-}
-
 .dark .dark\:hover\:bg-base-error-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -3395,6 +3431,11 @@ html {
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:hover\:bg-neutral-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:hover\:bg-neutral-900:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(15 23 42 / var(--tw-bg-opacity));
@@ -3429,23 +3470,18 @@ html {
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
 }
 
-.dark .hover\:dark\:bg-neutral-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
-}
-
 .dark .dark\:hover\:bg-opacity-70:hover {
   --tw-bg-opacity: 0.7;
 }
 
-.dark .dark\:hover\:text-brand-300:hover {
+.dark .dark\:hover\:text-brand-400:hover {
   --tw-text-opacity: 1;
-  color: rgb(196 181 253 / var(--tw-text-opacity));
+  color: rgb(167 139 250 / var(--tw-text-opacity));
 }
 
-.dark .dark\:hover\:text-brand-400:hover {
+.dark .dark\:hover\:text-brand-500:hover {
   --tw-text-opacity: 1;
-  color: rgb(167 139 250 / var(--tw-text-opacity));
+  color: rgb(139 92 246 / var(--tw-text-opacity));
 }
 
 .dark .hover\:dark\:text-brand-500:hover {
@@ -3529,18 +3565,6 @@ html {
     top: auto;
   }
 
-  .sm\:ml-2 {
-    margin-left: 0.5rem;
-  }
-
-  .sm\:mt-2 {
-    margin-top: 0.5rem;
-  }
-
-  .sm\:mt-2\.5 {
-    margin-top: 0.625rem;
-  }
-
   .sm\:block {
     display: block;
   }
@@ -3553,14 +3577,6 @@ html {
     display: none;
   }
 
-  .sm\:w-24 {
-    width: 6rem;
-  }
-
-  .sm\:w-36 {
-    width: 9rem;
-  }
-
   .sm\:w-48 {
     width: 12rem;
   }
@@ -3586,10 +3602,6 @@ html {
     flex-grow: 1;
   }
 
-  .sm\:grow-0 {
-    flex-grow: 0;
-  }
-
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -3602,10 +3614,6 @@ html {
     align-items: flex-start;
   }
 
-  .sm\:items-end {
-    align-items: flex-end;
-  }
-
   .sm\:justify-between {
     justify-content: space-between;
   }
@@ -3674,10 +3682,6 @@ html {
     display: flex;
   }
 
-  .md\:table {
-    display: table;
-  }
-
   .md\:grid {
     display: grid;
   }
@@ -3738,18 +3742,10 @@ html {
     width: 1.5rem;
   }
 
-  .md\:w-60 {
-    width: 15rem;
-  }
-
   .md\:w-\[400px\] {
     width: 400px;
   }
 
-  .md\:w-full {
-    width: 100%;
-  }
-
   .md\:max-w-\[600px\] {
     max-width: 600px;
   }
@@ -3852,8 +3848,13 @@ html {
     width: 50rem;
   }
 
-  .lg\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .lg\:gap-x-2 {
+    -moz-column-gap: 0.5rem;
+         column-gap: 0.5rem;
   }
 
   .lg\:px-24 {
diff --git a/src/component-library/pages/DID/list/ListDID.tsx b/src/component-library/pages/DID/list/ListDID.tsx
index 10202b3d9..70b26496f 100644
--- a/src/component-library/pages/DID/list/ListDID.tsx
+++ b/src/component-library/pages/DID/list/ListDID.tsx
@@ -1,150 +1,15 @@
 import { DIDMetaViewModel, DIDViewModel } from '@/lib/infrastructure/data/view-model/did';
-import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
-import { DIDType } from '@/lib/core/entity/rucio';
-import useChunkedStream, { StreamingStatus } from '@/lib/infrastructure/hooks/useChunkedStream';
-import { GridApi, GridReadyEvent, SelectionChangedEvent } from 'ag-grid-community';
+import React, { useEffect, useState } from 'react';
+import { StreamingStatus } from '@/lib/infrastructure/hooks/useStreamReader';
+import { SelectionChangedEvent } from 'ag-grid-community';
 import { Heading } from '@/component-library/atoms/misc/Heading';
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/component-library/atoms/form/select';
-import { Input } from '@/component-library/atoms/form/input';
 import { useToast } from '@/lib/infrastructure/hooks/useToast';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { ListDIDTable } from '@/component-library/pages/DID/list/ListDIDTable';
 import { BaseViewModelValidator } from '@/component-library/features/utils/BaseViewModelValidator';
-import { SearchButton } from '@/component-library/features/search/SearchButton';
-import { alreadyStreamingToast, noApiToast } from '@/component-library/features/utils/list-toasts';
 import { ListDIDMeta } from '@/component-library/pages/DID/list/meta/ListDIDMeta';
-
-const SCOPE_DELIMITER = ':';
-const emptyToastMessage = 'Please specify both scope and name before the search.';
-const delimiterToastMessage = 'Neither scope nor name should contain ":".';
-
-interface SearchPanelProps {
-    startStreaming: (pattern: string, type: DIDType) => void;
-    stopStreaming: () => void;
-    initialPattern?: string;
-    isRunning: boolean;
-}
-
-const SearchPanel = (props: SearchPanelProps) => {
-    // Try retrieving initial search parameters
-    let initialScope: string | undefined, initialName: string | undefined;
-    const initialPatternParts = props.initialPattern?.split(SCOPE_DELIMITER);
-    if (initialPatternParts && initialPatternParts.length === 2) {
-        [initialScope, initialName] = initialPatternParts;
-    }
-
-    // Check the validity of the initial pattern
-    useEffect(() => {
-        // A short timeout is required for the toast context to initialize
-        const timeout = setTimeout(() => {
-            if (props.initialPattern && !initialScope && !initialName) {
-                toast({
-                    variant: 'warning',
-                    title: 'Invalid initial pattern',
-                    description: `Could not resolve "${props.initialPattern}"`,
-                });
-            }
-        }, 0);
-
-        return () => clearTimeout(timeout);
-    }, []);
-
-    const [scope, setScope] = useState<string | null>(initialScope ?? null);
-    const [name, setName] = useState<string | null>(initialName ?? null);
-    const [type, setType] = useState<DIDType>(DIDType.DATASET);
-
-    const scopeInputRef = useRef<HTMLInputElement>(null);
-    const nameInputRef = useRef<HTMLInputElement>(null);
-
-    const { toast } = useToast();
-
-    const showToastAndFocus = (title: string, description: string, inputRef: React.RefObject<HTMLInputElement>) => {
-        toast({
-            variant: 'warning',
-            title,
-            description,
-        });
-        inputRef.current?.focus();
-    };
-
-    const validateField = (value: string | null, fieldName: string, inputRef: React.RefObject<HTMLInputElement>): boolean => {
-        if (!value) {
-            showToastAndFocus(`Empty ${fieldName}`, emptyToastMessage, inputRef);
-            return false;
-        } else if (value.includes(SCOPE_DELIMITER)) {
-            showToastAndFocus(`":" in ${fieldName}`, delimiterToastMessage, inputRef);
-            return false;
-        }
-        return true;
-    };
-
-    const validateScope = (): boolean => {
-        return validateField(scope, 'scope', scopeInputRef);
-    };
-
-    const validateName = (): boolean => {
-        return validateField(name, 'name', nameInputRef);
-    };
-
-    const onSearch = (event: any) => {
-        event.preventDefault();
-
-        if (!validateScope() || !validateName()) return;
-
-        if (!props.isRunning) {
-            props.startStreaming(`${scope}${SCOPE_DELIMITER}${name}`, type);
-        } else {
-            toast(alreadyStreamingToast);
-        }
-    };
-
-    const onStop = (event: any) => {
-        event.preventDefault();
-        props.stopStreaming();
-    };
-
-    return (
-        <div className="flex flex-col space-y-2 w-full md:items-start md:flex-row md:space-y-0 md:space-x-2">
-            <div className="flex flex-col grow sm:flex-row space-y-2 sm:space-x-2 sm:space-y-0">
-                <Select onValueChange={value => setType(value as DIDType)} defaultValue={type}>
-                    <SelectTrigger className="w-full sm:w-48">
-                        <SelectValue placeholder="Type" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectGroup>
-                            <SelectItem value={DIDType.CONTAINER}>Container</SelectItem>
-                            <SelectItem value={DIDType.DATASET}>Dataset</SelectItem>
-                            <SelectItem value={DIDType.FILE}>File</SelectItem>
-                        </SelectGroup>
-                    </SelectContent>
-                </Select>
-                <div className="w-full flex flex-row space-x-2 items-center">
-                    <Input
-                        ref={scopeInputRef}
-                        placeholder="scope"
-                        className="max-w-[250px]"
-                        defaultValue={initialScope}
-                        onInput={(event: ChangeEvent<HTMLInputElement>) => {
-                            setScope(event.target.value);
-                        }}
-                        onEnterKey={onSearch}
-                    />
-                    <span className="text-neutral-900 dark:text-neutral-100 font-bold">:</span>
-                    <Input
-                        ref={nameInputRef}
-                        placeholder="name"
-                        defaultValue={initialName}
-                        onInput={(event: ChangeEvent<HTMLInputElement>) => {
-                            setName(event.target.value);
-                        }}
-                        onEnterKey={onSearch}
-                    />
-                </div>
-            </div>
-            <SearchButton isRunning={props.isRunning} onStop={onStop} onSearch={onSearch} />
-        </div>
-    );
-};
+import useTableStreaming from '@/lib/infrastructure/hooks/useTableStreaming';
+import { DIDSearchPanel } from '@/component-library/features/search/DIDSearchPanel';
 
 export interface ListDIDProps {
     firstPattern?: string;
@@ -152,56 +17,12 @@ export interface ListDIDProps {
 }
 
 export const ListDID = (props: ListDIDProps) => {
-    const { toast, dismiss } = useToast();
+    const { toast } = useToast();
     // A shared validator
     const validator = new BaseViewModelValidator(toast);
 
     // List handling
-
-    const streamingHook = useChunkedStream<DIDViewModel>();
-    const [gridApi, setGridApi] = useState<GridApi<DIDViewModel> | null>(null);
-
-    const onGridReady = (event: GridReadyEvent) => {
-        setGridApi(event.api);
-    };
-
-    useEffect(() => {
-        if (props.initialData) {
-            onData(props.initialData);
-        }
-    }, [gridApi]);
-
-    const onData = (data: DIDViewModel[]) => {
-        const validData = data.filter(element => validator.isValid(element));
-        gridApi?.applyTransactionAsync({ add: validData });
-    };
-
-    const startStreaming = (pattern: string, type: DIDType) => {
-        if (gridApi) {
-            // Hide active toasts
-            dismiss();
-            gridApi.flushAsyncTransactions();
-            gridApi.setGridOption('rowData', []);
-            validator.reset();
-            removeMeta();
-
-            const params = new URLSearchParams({
-                query: pattern,
-                type: type,
-            });
-
-            const url = '/api/feature/list-dids?' + params;
-            streamingHook.start({ url, onData });
-        } else {
-            toast(noApiToast);
-        }
-    };
-
-    const stopStreaming = () => {
-        if (streamingHook.status === StreamingStatus.RUNNING) {
-            streamingHook.stop();
-        }
-    };
+    const { onGridReady, streamingHook, startStreaming, stopStreaming } = useTableStreaming<DIDViewModel>(props.initialData);
 
     // Meta handling
 
@@ -237,7 +58,6 @@ export const ListDID = (props: ListDIDProps) => {
         error: metaError,
         isFetching: isMetaFetching,
         refetch: refetchMeta,
-        remove: removeMeta,
     } = useQuery<DIDMetaViewModel>({
         queryKey: metaQueryKey,
         queryFn: queryMeta,
@@ -254,7 +74,7 @@ export const ListDID = (props: ListDIDProps) => {
             refetchMeta();
         };
 
-        if (selectedItem !== null) refetch();
+        refetch();
     }, [selectedItem]);
 
     // Handle errors with loading the meta
@@ -270,7 +90,7 @@ export const ListDID = (props: ListDIDProps) => {
     return (
         <div className="flex flex-col space-y-3 w-full grow">
             <Heading text="DIDs" />
-            <SearchPanel
+            <DIDSearchPanel
                 isRunning={streamingHook.status === StreamingStatus.RUNNING}
                 startStreaming={startStreaming}
                 stopStreaming={stopStreaming}
diff --git a/src/component-library/pages/DID/list/ListDIDTable.tsx b/src/component-library/pages/DID/list/ListDIDTable.tsx
index 7ff3f5943..19111db9f 100644
--- a/src/component-library/pages/DID/list/ListDIDTable.tsx
+++ b/src/component-library/pages/DID/list/ListDIDTable.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { UseChunkedStream } from '@/lib/infrastructure/hooks/useChunkedStream';
+import { UseStreamReader } from '@/lib/infrastructure/hooks/useStreamReader';
 import { StreamedTable } from '@/component-library/features/table/StreamedTable/StreamedTable';
 import { DefaultTextFilterParams } from '@/component-library/features/utils/filter-parameters';
 import { DIDViewModel } from '@/lib/infrastructure/data/view-model/did';
@@ -8,7 +8,7 @@ import { AgGridReact } from 'ag-grid-react';
 import { ClickableCell } from '@/component-library/features/table/cells/ClickableCell';
 
 type ListDIDTableProps = {
-    streamingHook: UseChunkedStream<DIDViewModel>;
+    streamingHook: UseStreamReader<DIDViewModel>;
     onSelectionChanged: (event: SelectionChangedEvent) => void;
     onGridReady: (event: GridReadyEvent) => void;
 };
@@ -22,6 +22,7 @@ export const ListDIDTable = (props: ListDIDTableProps) => {
             valueGetter: (params: ValueGetterParams<DIDViewModel>) => {
                 return params.data?.scope + ':' + params.data?.name;
             },
+            flex: 1,
             minWidth: 250,
             filter: true,
             filterParams: DefaultTextFilterParams,
diff --git a/src/component-library/pages/DID/list/meta/ListDIDMeta.tsx b/src/component-library/pages/DID/list/meta/ListDIDMeta.tsx
index 7b7713cde..5e9e05cfb 100644
--- a/src/component-library/pages/DID/list/meta/ListDIDMeta.tsx
+++ b/src/component-library/pages/DID/list/meta/ListDIDMeta.tsx
@@ -1,8 +1,5 @@
 import { DIDMetaViewModel } from '@/lib/infrastructure/data/view-model/did';
 import { cn } from '@/component-library/utils';
-import { HiExternalLink } from 'react-icons/hi';
-import Link from 'next/link';
-import { ReactNode } from 'react';
 import { Field } from '@/component-library/atoms/misc/Field';
 import { formatDate, formatFileSize } from '@/component-library/features/utils/text-formatters';
 import { Divider } from '@/component-library/atoms/misc/Divider';
@@ -12,35 +9,17 @@ import { DIDTypeBadge } from '@/component-library/features/badges/DID/DIDTypeBad
 import { CopyableField } from '@/component-library/features/fields/CopyableField';
 import { DIDAvailabilityBadge } from '@/component-library/features/badges/DID/DIDAvailabilityBadge';
 import { LoadingSpinner } from '@/component-library/atoms/loading/LoadingSpinner';
-
-const MetaRow = (props: { name: string; children: ReactNode }) => {
-    return (
-        <div className="flex w-full items-center h-12">
-            <span className={cn('text-neutral-700 dark:text-neutral-300', 'min-w-[10rem] pr-3', 'font-medium text-right text-sm')}>{props.name}</span>
-            <span className="flex items-center">{props.children}</span>
-        </div>
-    );
-};
+import { KeyValueLinkHeader } from '@/component-library/features/key-value/headers';
+import { KeyValueRow } from '@/component-library/features/key-value/KeyValueRow';
+import { KeyValueWrapper } from '@/component-library/features/key-value/KeyValueWrapper';
 
 const MetaHeader = ({ scope, name }: { scope: string; name: string }) => {
     return (
-        <Link
-            href={`/did/page/${scope}/${name}`}
-            className={cn(
-                'h-[52px] px-4 py-2 space-x-2',
-                'bg-neutral-200 dark:bg-neutral-700',
-                'border-b border-neutral-900 dark:border-neutral-100 border-opacity-10 dark:border-opacity-10',
-                'text-neutral-700 dark:text-neutral-300 font-medium',
-                'flex grow items-center w-full',
-                'hover:text-brand-600 dark:hover:text-brand-400',
-                'whitespace-nowrap',
-            )}
-        >
-            <HiExternalLink className="h-5 w-5" />
+        <KeyValueLinkHeader href={`/did/page/${scope}/${name}`}>
             <span>
                 {scope}:{name}
             </span>
-        </Link>
+        </KeyValueLinkHeader>
     );
 };
 
@@ -49,24 +28,24 @@ const MetaContents = ({ meta }: { meta: DIDMetaViewModel }) => {
         return (
             <>
                 {meta.bytes && (
-                    <MetaRow name="Size">
+                    <KeyValueRow name="Size">
                         <Field>{formatFileSize(meta.bytes)}</Field>
-                    </MetaRow>
+                    </KeyValueRow>
                 )}
                 {meta.guid && (
-                    <MetaRow name="GUID">
+                    <KeyValueRow name="GUID">
                         <CopyableField text={meta.guid} />
-                    </MetaRow>
+                    </KeyValueRow>
                 )}
                 {meta.adler32 && (
-                    <MetaRow name="Adler32">
+                    <KeyValueRow name="Adler32">
                         <CopyableField text={meta.adler32} />
-                    </MetaRow>
+                    </KeyValueRow>
                 )}
                 {meta.md5 && (
-                    <MetaRow name="MD5">
+                    <KeyValueRow name="MD5">
                         <CopyableField text={meta.md5} />
-                    </MetaRow>
+                    </KeyValueRow>
                 )}
                 <Divider />
             </>
@@ -77,44 +56,44 @@ const MetaContents = ({ meta }: { meta: DIDMetaViewModel }) => {
         <div className="min-w-full w-fit md:max-h-[0px]">
             <MetaHeader scope={meta.scope} name={meta.name} />
             <div className="flex flex-col px-4 py-2 w-full">
-                <MetaRow name="Type">
+                <KeyValueRow name="Type">
                     <DIDTypeBadge value={meta.did_type} />
-                </MetaRow>
-                <MetaRow name="Account">
+                </KeyValueRow>
+                <KeyValueRow name="Account">
                     <Field>{meta.account}</Field>
-                </MetaRow>
-                {meta.is_open && (
-                    <MetaRow name="Is Open">
+                </KeyValueRow>
+                {meta.is_open !== null && (
+                    <KeyValueRow name="Is Open">
                         <Checkbox checked={meta.is_open} />
-                    </MetaRow>
+                    </KeyValueRow>
                 )}
-                <MetaRow name="Monotonic">
+                <KeyValueRow name="Monotonic">
                     <Checkbox checked={meta.monotonic} />
-                </MetaRow>
+                </KeyValueRow>
                 <Divider />
-                <MetaRow name="Created At">
+                <KeyValueRow name="Created At">
                     <Field>{formatDate(meta.created_at)}</Field>
-                </MetaRow>
-                <MetaRow name="Updated At">
+                </KeyValueRow>
+                <KeyValueRow name="Updated At">
                     <Field>{formatDate(meta.updated_at)}</Field>
-                </MetaRow>
+                </KeyValueRow>
                 <Divider />
                 {meta.did_type === DIDType.FILE && getFileInformation()}
-                <MetaRow name="Obsolete">
+                <KeyValueRow name="Obsolete">
                     <Checkbox checked={meta.obsolete} />
-                </MetaRow>
-                <MetaRow name="Hidden">
+                </KeyValueRow>
+                <KeyValueRow name="Hidden">
                     <Checkbox checked={meta.hidden} />
-                </MetaRow>
-                <MetaRow name="Suppressed">
+                </KeyValueRow>
+                <KeyValueRow name="Suppressed">
                     <Checkbox checked={meta.suppressed} />
-                </MetaRow>
-                <MetaRow name="Purge Replicas">
+                </KeyValueRow>
+                <KeyValueRow name="Purge Replicas">
                     <Checkbox checked={meta.purge_replicas} />
-                </MetaRow>
-                <MetaRow name="Availability">
+                </KeyValueRow>
+                <KeyValueRow name="Availability">
                     <DIDAvailabilityBadge value={meta.availability} />
-                </MetaRow>
+                </KeyValueRow>
             </div>
         </div>
     );
@@ -138,15 +117,8 @@ export const ListDIDMeta = ({ meta, isLoading, hasError }: ListDIDMetaProps) =>
     const showMeta = meta && !isLoading && !hasError;
 
     return (
-        <div
-            className={cn(
-                showMeta ? 'flex-none' : 'flex grow items-center min-h-[10rem]',
-                'md:flex-1 overflow-auto',
-                'bg-neutral-0 dark:bg-neutral-800',
-                'rounded-md border border-neutral-900 dark:border-neutral-100 border-opacity-10 dark:border-opacity-10',
-            )}
-        >
+        <KeyValueWrapper className={cn(showMeta ? 'flex-none' : 'flex grow items-center min-h-[10rem]', 'md:flex-1 overflow-auto')}>
             {showMeta ? <MetaContents meta={meta} /> : <MetaStub isLoading={isLoading} hasError={hasError} />}
-        </div>
+        </KeyValueWrapper>
     );
 };
diff --git a/src/component-library/pages/Dashboard/Dashboard.tsx b/src/component-library/pages/Dashboard/Dashboard.tsx
new file mode 100644
index 000000000..088303f02
--- /dev/null
+++ b/src/component-library/pages/Dashboard/Dashboard.tsx
@@ -0,0 +1,127 @@
+import { useQuery } from '@tanstack/react-query';
+import { SiteHeaderViewModel } from '@/lib/infrastructure/data/view-model/site-header';
+import { getSiteHeader } from '@/app/(rucio)/queries';
+import { LoadingSpinner } from '@/component-library/atoms/loading/LoadingSpinner';
+import { Heading } from '@/component-library/atoms/misc/Heading';
+import { WarningField } from '@/component-library/features/fields/WarningField';
+import { AccountRoleBadge } from '@/component-library/features/badges/account/AccountRoleBadge';
+import { TopRulesWidget } from '@/component-library/pages/Dashboard/widgets/TopRulesWidget';
+import { useEffect, useRef, useState } from 'react';
+import { RuleViewModel } from '@/lib/infrastructure/data/view-model/rule';
+import useStreamReader, { StreamingStatus } from '@/lib/infrastructure/hooks/useStreamReader';
+import { RSEAccountUsageViewModel } from '@/lib/infrastructure/data/view-model/rse';
+import { TopStorageUsageWidget } from '@/component-library/pages/Dashboard/widgets/TopStorageUsageWidget';
+
+const AccountHeading = () => {
+    const querySiteHeader = async () => {
+        const viewModel = await getSiteHeader();
+        if (viewModel.status !== 'success') throw new Error(viewModel.message);
+        return viewModel;
+    };
+
+    const headerQueryKey = ['site_header'];
+    const {
+        data: header,
+        error: headerError,
+        isFetching: isHeaderFetching,
+    } = useQuery<SiteHeaderViewModel, Error>({
+        queryKey: headerQueryKey,
+        queryFn: querySiteHeader,
+        enabled: true,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+        refetchOnMount: false,
+        retry: false,
+    });
+
+    if (isHeaderFetching) return <LoadingSpinner />;
+
+    if (headerError || !header?.activeAccount) {
+        return (
+            <WarningField>
+                <span>Error loading information about the account: {headerError?.message}</span>
+            </WarningField>
+        );
+    }
+
+    return (
+        <div className="flex space-x-2 items-center">
+            <Heading text={`Hello, ${header.activeAccount.rucioAccount}!`} />
+            <AccountRoleBadge className="text-xl" value={header.activeAccount.role} />
+        </div>
+    );
+};
+
+const UsageView = () => {
+    const usageBuffer = useRef<RSEAccountUsageViewModel[] | undefined>([]);
+    const [usages, setUsages] = useState<RSEAccountUsageViewModel[]>();
+    const { start, stop, error, status } = useStreamReader<RSEAccountUsageViewModel>();
+
+    useEffect(() => {
+        // TODO: handle error view models
+        start({
+            url: '/api/feature/list-account-rse-usage',
+            onData: data => {
+                if (!usageBuffer.current) {
+                    usageBuffer.current = data;
+                } else {
+                    usageBuffer.current.push(...data);
+                }
+            },
+        });
+        usageBuffer.current = [];
+    }, []);
+
+    useEffect(() => {
+        if (status === StreamingStatus.STOPPED && usageBuffer.current) {
+            setUsages(usageBuffer.current);
+        }
+    }, [status]);
+
+    const isLoading = (!usages && !error) || status === StreamingStatus.RUNNING;
+
+    return <TopStorageUsageWidget usages={usages} isLoading={isLoading} errorMessage={error?.message} />;
+};
+
+const RulesView = () => {
+    const rulesBuffer = useRef<RuleViewModel[] | undefined>([]);
+    const [rules, setRules] = useState<RuleViewModel[]>();
+    const { start, stop, error, status } = useStreamReader<RuleViewModel>();
+
+    useEffect(() => {
+        // TODO: handle error view models
+        start({
+            url: '/api/feature/list-rules?scope=*',
+            onData: data => {
+                if (!rulesBuffer.current) {
+                    rulesBuffer.current = data;
+                } else {
+                    rulesBuffer.current.push(...data);
+                }
+            },
+        });
+        rulesBuffer.current = [];
+    }, []);
+
+    useEffect(() => {
+        if (status === StreamingStatus.STOPPED && rulesBuffer.current) {
+            setRules(rulesBuffer.current);
+        }
+    }, [status]);
+
+    const isLoading = (!rules && !error) || status === StreamingStatus.RUNNING;
+
+    return <TopRulesWidget rules={rules} isLoading={isLoading} errorMessage={error?.message} />;
+};
+
+export const Dashboard = () => {
+    return (
+        <div className="flex flex-col space-y-3 w-full">
+            <div className="h-14">
+                <AccountHeading />
+            </div>
+            <RulesView />
+            <UsageView />
+        </div>
+    );
+};
diff --git a/src/component-library/pages/Dashboard/widgets/CustomLegend.tsx b/src/component-library/pages/Dashboard/widgets/CustomLegend.tsx
new file mode 100644
index 000000000..de67a7caf
--- /dev/null
+++ b/src/component-library/pages/Dashboard/widgets/CustomLegend.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import cn from 'classnames';
+import CircleWithText from '@/component-library/atoms/misc/CircleWithText';
+
+export type LegendOption = {
+    label: string;
+    color: string;
+};
+
+interface CustomLegendProps {
+    legendOptions: LegendOption[];
+}
+
+const CustomLegend: React.FC<CustomLegendProps> = ({ legendOptions }) => {
+    const commonCircleClasses = 'bg-opacity-70 h-6 w-6';
+
+    return (
+        <div className="flex space-x-10 text-sm text-neutral-900 dark:text-neutral-100 py-3">
+            {legendOptions.map((option, index) => (
+                <div key={index} className="flex space-x-2 items-center">
+                    <CircleWithText text="" className={cn(commonCircleClasses, option.color)} />
+                    <span>{option.label}</span>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default CustomLegend;
diff --git a/src/component-library/pages/Dashboard/widgets/TopRulesWidget.stories.tsx b/src/component-library/pages/Dashboard/widgets/TopRulesWidget.stories.tsx
new file mode 100644
index 000000000..df08fd94b
--- /dev/null
+++ b/src/component-library/pages/Dashboard/widgets/TopRulesWidget.stories.tsx
@@ -0,0 +1,19 @@
+import { StoryFn, Meta } from '@storybook/react';
+import { fixtureRuleViewModel } from '@/test/fixtures/table-fixtures';
+import { TopRulesWidget } from '@/component-library/pages/Dashboard/widgets/TopRulesWidget';
+
+export default {
+    title: 'Components/Pages/Dashboard/Widgets',
+    component: TopRulesWidget,
+    parameters: {
+        docs: { disable: true },
+    },
+} as Meta<typeof TopRulesWidget>;
+
+const Template: StoryFn<typeof TopRulesWidget> = args => <TopRulesWidget {...args} />;
+
+export const TopRules = Template.bind({});
+TopRules.args = {
+    rules: Array.from({ length: 100 }, fixtureRuleViewModel),
+    isLoading: false,
+};
diff --git a/src/component-library/pages/Dashboard/widgets/TopRulesWidget.tsx b/src/component-library/pages/Dashboard/widgets/TopRulesWidget.tsx
new file mode 100644
index 000000000..4ae3dc7d4
--- /dev/null
+++ b/src/component-library/pages/Dashboard/widgets/TopRulesWidget.tsx
@@ -0,0 +1,199 @@
+import { KeyValueWrapper } from '@/component-library/features/key-value/KeyValueWrapper';
+import { RuleViewModel } from '@/lib/infrastructure/data/view-model/rule';
+import { Heading } from '@/component-library/atoms/misc/Heading';
+import { LoadingSpinner } from '@/component-library/atoms/loading/LoadingSpinner';
+import { Bar, BarChart, ResponsiveContainer, Text, Tooltip, XAxis, YAxis } from 'recharts';
+import { HiExternalLink } from 'react-icons/hi';
+import { LockStateBadge } from '@/component-library/features/badges/Rule/LockStateBadge';
+import { LockState } from '@/lib/core/entity/rucio';
+import useDarkMode from '@/lib/infrastructure/hooks/useDarkMode';
+import { InfoField } from '@/component-library/features/fields/InfoField';
+import { WarningField } from '@/component-library/features/fields/WarningField';
+import CustomLegend, { LegendOption } from './CustomLegend';
+
+const openRule = (id: string) => {
+    window.open(`/rule/page/${id}`, '_blank');
+};
+
+const LinkTick = (props: any) => {
+    const id = props.payload.value;
+    const fill = props.fill;
+
+    return (
+        <g onClick={() => openRule(id)} className="cursor-pointer">
+            <Text {...props} fill={fill}>
+                {id}
+            </Text>
+        </g>
+    );
+};
+
+const CustomTooltip = ({ active, payload, label }: any) => {
+    if (active && payload && payload.length) {
+        const { locksOk, locksReplicating, locksStuck, name, scope, rseExpression } = payload[0].payload;
+
+        return (
+            <KeyValueWrapper className="p-3 space-y-2 text-neutral-900 dark:text-neutral-100">
+                <div className="mb-2">
+                    <div className="flex space-x-2 items-center">
+                        <HiExternalLink />
+                        <span>{label}</span>
+                    </div>
+                    <p className="text-sm text-neutral-600 dark:text-neutral-400">
+                        For {scope}:{name}
+                    </p>
+                    <p className="text-sm text-neutral-600 dark:text-neutral-400">On {rseExpression}</p>
+                </div>
+
+                <div>
+                    <LockStateBadge value={LockState.OK} />: {locksOk}
+                </div>
+                <div>
+                    <LockStateBadge value={LockState.REPLICATING} />: {locksReplicating}
+                </div>
+                <div>
+                    <LockStateBadge value={LockState.STUCK} />: {locksStuck}
+                </div>
+            </KeyValueWrapper>
+        );
+    }
+
+    return null;
+};
+
+const RuleBarChart = ({ rules }: { rules: RuleViewModel[] }) => {
+    const data = rules.map(rule => {
+        const totalLocks = rule.locks_stuck_cnt + rule.locks_replicating_cnt + rule.locks_ok_cnt;
+
+        // Calculate initial percentages
+        let locksOkPercentage = (rule.locks_ok_cnt / totalLocks) * 100;
+        let locksReplicatingPercentage = (rule.locks_replicating_cnt / totalLocks) * 100;
+        let locksStuckPercentage = (rule.locks_stuck_cnt / totalLocks) * 100;
+
+        // Adjust locks_stuck to ensure the total is exactly 100
+        const totalPercentage = locksOkPercentage + locksReplicatingPercentage + locksStuckPercentage;
+        if (totalPercentage !== 100) {
+            locksStuckPercentage = locksStuckPercentage + (100 - totalPercentage);
+        }
+
+        return {
+            id: rule.id,
+            scope: rule.scope,
+            name: rule.name,
+            rseExpression: rule.rse_expression,
+            locksOkPercentage: locksOkPercentage,
+            locksOk: rule.locks_ok_cnt,
+            locksReplicatingPercentage: locksReplicatingPercentage,
+            locksReplicating: rule.locks_replicating_cnt,
+            locksStuckPercentage: locksStuckPercentage,
+            locksStuck: rule.locks_stuck_cnt,
+        };
+    });
+
+    const isDarkMode = useDarkMode();
+    // Tailwind neutral-100 or neutral-900
+    const fillColor = isDarkMode ? '#f1f5f9' : '#0f172a';
+    const borderColor = isDarkMode ? 'rgba(241,245,249,0.15)' : 'rgba(15,23,42,0.15)';
+
+    const barColors: Record<string, any> = {
+        locksOkPercentage: {
+            fill: 'rgba(34,197,94,0.8)', // Tailwind base-success-500
+            stroke: borderColor,
+        },
+        locksReplicatingPercentage: {
+            fill: 'rgba(251,191,36,0.8)', // Tailwind base-warning-400
+            stroke: borderColor,
+        },
+        locksStuckPercentage: {
+            fill: 'rgba(239,68,68,0.8)', // Tailwind base-error-500
+            stroke: borderColor,
+        },
+    };
+
+    const getStyledBar = (dataKey: string) => {
+        return (
+            <Bar
+                dataKey={dataKey}
+                stackId="locks"
+                fill={barColors[dataKey].fill}
+                maxBarSize={35}
+                stroke={barColors[dataKey].stroke}
+                strokeWidth={1}
+            />
+        );
+    };
+
+    return (
+        <ResponsiveContainer>
+            <BarChart
+                layout="vertical"
+                data={data}
+                onClick={event => {
+                    openRule(event.activePayload?.[0].payload.id);
+                }}
+            >
+                <XAxis
+                    type="number"
+                    domain={[0, 100]}
+                    tickFormatter={value => {
+                        return `${value}%`;
+                    }}
+                    stroke={fillColor}
+                />
+                <YAxis dataKey="id" type="category" tick={<LinkTick fill={fillColor} />} width={315} stroke={fillColor} />
+                <Tooltip content={<CustomTooltip />} cursor={{ fill: borderColor }} />
+                {getStyledBar('locksOkPercentage')}
+                {getStyledBar('locksReplicatingPercentage')}
+                {getStyledBar('locksStuckPercentage')}
+            </BarChart>
+        </ResponsiveContainer>
+    );
+};
+
+const legendOptions: LegendOption[] = [
+    { label: 'OK', color: 'bg-base-success-500' },
+    { label: 'Replicating', color: 'bg-base-warning-400' },
+    { label: 'Error', color: 'bg-base-error-500' },
+];
+
+interface TopRulesWidgetProps {
+    rules?: RuleViewModel[];
+    isLoading: boolean;
+    errorMessage?: string;
+}
+
+export const TopRulesWidget = ({ rules, isLoading, errorMessage }: TopRulesWidgetProps) => {
+    // Take top 10 latest rules
+    const displayedRules = rules
+        ?.filter(rule => rule.locks_stuck_cnt + rule.locks_replicating_cnt + rule.locks_ok_cnt > 0)
+        .sort((a, b) => {
+            const dateA = new Date(a.created_at);
+            const dateB = new Date(b.created_at);
+            return dateA.getTime() - dateB.getTime(); // Sort in ascending order
+        })
+        .slice(0, 10);
+
+    const hasRules = displayedRules && displayedRules.length !== 0;
+    const isResultEmpty = !hasRules && !errorMessage && !isLoading;
+
+    return (
+        <KeyValueWrapper className="w-full p-5 overflow-x-auto">
+            <Heading text="Locks of latest rules" size="md" />
+            <div className="flex min-w-[700px] h-[500px] items-center justify-center my-5">
+                {isResultEmpty && (
+                    <InfoField>
+                        <span>No rules to show</span>
+                    </InfoField>
+                )}
+                {errorMessage && (
+                    <WarningField>
+                        <span>{errorMessage}</span>
+                    </WarningField>
+                )}
+                {hasRules && <RuleBarChart rules={displayedRules} />}
+                {isLoading && <LoadingSpinner />}
+            </div>
+            {hasRules && <CustomLegend legendOptions={legendOptions} />}
+        </KeyValueWrapper>
+    );
+};
diff --git a/src/component-library/pages/Dashboard/widgets/TopStorageUsageWidget.stories.tsx b/src/component-library/pages/Dashboard/widgets/TopStorageUsageWidget.stories.tsx
new file mode 100644
index 000000000..2c48e03a8
--- /dev/null
+++ b/src/component-library/pages/Dashboard/widgets/TopStorageUsageWidget.stories.tsx
@@ -0,0 +1,19 @@
+import { StoryFn, Meta } from '@storybook/react';
+import { fixtureRSEAccountUsageViewModel } from '@/test/fixtures/table-fixtures';
+import { TopStorageUsageWidget } from '@/component-library/pages/Dashboard/widgets/TopStorageUsageWidget';
+
+export default {
+    title: 'Components/Pages/Dashboard/Widgets',
+    component: TopStorageUsageWidget,
+    parameters: {
+        docs: { disable: true },
+    },
+} as Meta<typeof TopStorageUsageWidget>;
+
+const Template: StoryFn<typeof TopStorageUsageWidget> = args => <TopStorageUsageWidget {...args} />;
+
+export const TopStorageUsage = Template.bind({});
+TopStorageUsage.args = {
+    usages: Array.from({ length: 10 }, fixtureRSEAccountUsageViewModel),
+    isLoading: false,
+};
diff --git a/src/component-library/pages/Dashboard/widgets/TopStorageUsageWidget.tsx b/src/component-library/pages/Dashboard/widgets/TopStorageUsageWidget.tsx
new file mode 100644
index 000000000..1870d1d6f
--- /dev/null
+++ b/src/component-library/pages/Dashboard/widgets/TopStorageUsageWidget.tsx
@@ -0,0 +1,132 @@
+import { KeyValueWrapper } from '@/component-library/features/key-value/KeyValueWrapper';
+import { Heading } from '@/component-library/atoms/misc/Heading';
+import { InfoField } from '@/component-library/features/fields/InfoField';
+import { WarningField } from '@/component-library/features/fields/WarningField';
+import { LoadingSpinner } from '@/component-library/atoms/loading/LoadingSpinner';
+import { RSEAccountUsageViewModel } from '@/lib/infrastructure/data/view-model/rse';
+import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
+import { HiExternalLink } from 'react-icons/hi';
+import Link from 'next/link';
+import { Field } from '@/component-library/atoms/misc/Field';
+import { formatFileSize } from '@/component-library/features/utils/text-formatters';
+import CustomLegend, { LegendOption } from '@/component-library/pages/Dashboard/widgets/CustomLegend';
+import useDarkMode from '@/lib/infrastructure/hooks/useDarkMode';
+
+const CustomTooltip = ({ active, payload, totalBytes }: any) => {
+    if (active && payload && payload.length) {
+        const { name, value } = payload[0];
+        const percentage = ((value / totalBytes) * 100).toFixed(2);
+        return (
+            <KeyValueWrapper className="p-3 text-neutral-900 dark:text-neutral-100">
+                <p className="text-sm text-neutral-700 dark:text-neutral-300">{name}</p>
+                <p>
+                    {formatFileSize(value)} ({percentage}%)
+                </p>
+            </KeyValueWrapper>
+        );
+    }
+    return null;
+};
+
+const UsagePieChart = ({ usage }: { usage: RSEAccountUsageViewModel }) => {
+    const COLORS = [
+        // Used
+        'rgba(239,68,68,0.8)', // Tailwind base-success-500
+        // Remaining
+        'rgba(34,197,94,0.8)', // Tailwind base-error-500
+    ];
+
+    const isDarkMode = useDarkMode();
+    // Tailwind neutral-100 or neutral-900
+    const borderColor = isDarkMode ? 'rgba(241,245,249,0.15)' : 'rgba(15,23,42,0.15)';
+
+    const { rse, used_bytes, bytes_limit } = usage;
+    const remainingBytes = bytes_limit - used_bytes;
+
+    const pieData = [
+        { name: 'Used', value: used_bytes },
+        { name: 'Remaining', value: remainingBytes > 0 ? remainingBytes : 0 },
+    ];
+
+    return (
+        <div className="flex flex-col justify-center h-fit w-full mx-3 my-5 overflow-hidden">
+            <Link
+                href={`/rse/page/${rse}`}
+                className="flex space-x-2 justify-center items-center text-neutral-900 dark:text-neutral-100 hover:text-brand-500 dark:hover:text-brand-500 font-medium"
+            >
+                <HiExternalLink className="flex-shrink-0" />
+                <span className="truncate">{rse}</span>
+            </Link>
+            <ResponsiveContainer height={275}>
+                <PieChart>
+                    <Pie data={pieData} dataKey="value" nameKey="name" stroke={borderColor}>
+                        {pieData.map((entry, index) => (
+                            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} className="outline-none" />
+                        ))}
+                    </Pie>
+                    <Tooltip content={<CustomTooltip totalBytes={bytes_limit} />} />
+                </PieChart>
+            </ResponsiveContainer>
+            <div className="w-full flex flex-col items-center space-y-3">
+                <div className="flex items-center space-x-2">
+                    <span className="text-sm text-neutral-700 dark:text-neutral-300">Quota</span>
+                    <Field>{formatFileSize(bytes_limit)}</Field>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const legendOptions: LegendOption[] = [
+    { label: 'Used', color: 'bg-base-error-500' },
+    { label: 'Remaining', color: 'bg-base-success-500' },
+];
+
+interface TopStorageUsageWidgetProps {
+    usages?: RSEAccountUsageViewModel[];
+    isLoading: boolean;
+    errorMessage?: string;
+}
+
+export const TopStorageUsageWidget = ({ usages, isLoading, errorMessage }: TopStorageUsageWidgetProps) => {
+    // Take top 10 RSEs with most usage
+    const displayedUsages = usages?.sort((a, b) => b.used_bytes - a.used_bytes).slice(0, 10);
+
+    const hasUsages = displayedUsages && displayedUsages.length !== 0;
+    const isResultEmpty = !hasUsages && !errorMessage && !isLoading;
+
+    const getCharts = () => {
+        return (
+            <div className="flex flex-wrap justify-center gap-4 w-full h-full">
+                {displayedUsages?.map(usage => {
+                    return (
+                        <div key={usage.rse_id} className="flex justify-center items-center flex-1 min-w-[300px]">
+                            <UsagePieChart usage={usage} />
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    };
+
+    return (
+        <KeyValueWrapper className="w-full p-5 overflow-x-auto space-y-2">
+            <Heading text="RSE Usage" size="md" />
+            {hasUsages && <CustomLegend legendOptions={legendOptions} />}
+            <div className="flex min-w-[700px] h-[740px] items-center justify-center">
+                {isResultEmpty && (
+                    <InfoField>
+                        <span>No RSEs with quota</span>
+                    </InfoField>
+                )}
+                {errorMessage && (
+                    <WarningField>
+                        <span>{errorMessage}</span>
+                    </WarningField>
+                )}
+                {hasUsages && getCharts()}
+                {isLoading && <LoadingSpinner />}
+            </div>
+        </KeyValueWrapper>
+    );
+};
diff --git a/src/component-library/pages/RSE/list/ListRSE.stories.tsx b/src/component-library/pages/RSE/list/ListRSE.stories.tsx
index e079e74fe..230aa0733 100644
--- a/src/component-library/pages/RSE/list/ListRSE.stories.tsx
+++ b/src/component-library/pages/RSE/list/ListRSE.stories.tsx
@@ -79,7 +79,7 @@ InstantStreaming.decorators = [
 
 export const InitialValidatedExpression = Template.bind({});
 InitialValidatedExpression.args = {
-    firstExpression: 'test',
+    initialExpression: 'test',
 };
 InitialValidatedExpression.decorators = [
     getDecoratorWithWorker([
diff --git a/src/component-library/pages/RSE/list/ListRSE.tsx b/src/component-library/pages/RSE/list/ListRSE.tsx
index 18424291c..5530b1c32 100644
--- a/src/component-library/pages/RSE/list/ListRSE.tsx
+++ b/src/component-library/pages/RSE/list/ListRSE.tsx
@@ -1,110 +1,31 @@
 import { RSEViewModel } from '@/lib/infrastructure/data/view-model/rse';
-import { ChangeEvent, useEffect, useState } from 'react';
-import useChunkedStream, { StreamingStatus } from '@/lib/infrastructure/hooks/useChunkedStream';
+import { StreamingStatus } from '@/lib/infrastructure/hooks/useStreamReader';
 import { ListRSETable } from '@/component-library/pages/RSE/list/ListRSETable';
-import { useToast } from '@/lib/infrastructure/hooks/useToast';
-import { GridApi, GridReadyEvent } from 'ag-grid-community';
 import { Heading } from '@/component-library/atoms/misc/Heading';
-import { Input } from '@/component-library/atoms/form/input';
-import { HintLink } from '@/component-library/atoms/misc/HintLink';
-import { BaseViewModelValidator } from '@/component-library/features/utils/BaseViewModelValidator';
-import { SearchButton } from '@/component-library/features/search/SearchButton';
-import { alreadyStreamingToast, noApiToast } from '@/component-library/features/utils/list-toasts';
+import useTableStreaming from '@/lib/infrastructure/hooks/useTableStreaming';
+import { RSESearchPanel } from '@/component-library/features/search/RSESearchPanel';
 
 type ListRSEProps = {
-    firstExpression?: string;
+    initialExpression?: string;
     initialData?: RSEViewModel[];
 };
 
-const DEFAULT_EXPRESSION = '*';
-
 export const ListRSE = (props: ListRSEProps) => {
-    const streamingHook = useChunkedStream<RSEViewModel>();
-    const [expression, setExpression] = useState<string | null>(props.firstExpression ?? DEFAULT_EXPRESSION);
-
-    const [gridApi, setGridApi] = useState<GridApi<RSEViewModel> | null>(null);
-
-    const { toast, dismiss } = useToast();
-    const validator = new BaseViewModelValidator(toast);
-
-    const onGridReady = (event: GridReadyEvent) => {
-        setGridApi(event.api);
-    };
-
-    useEffect(() => {
-        if (props.initialData) {
-            onData(props.initialData);
-        }
-    }, [gridApi]);
-
-    const onData = (data: RSEViewModel[]) => {
-        const validData = data.filter(element => validator.isValid(element));
-        gridApi?.applyTransactionAsync({ add: validData });
-    };
-
-    const startStreaming = () => {
-        if (gridApi) {
-            // Hide active toasts
-            dismiss();
-
-            // Make sure there are no pending transactions
-            gridApi.flushAsyncTransactions();
-
-            // Empty the grid
-            gridApi.setGridOption('rowData', []);
-
-            // Reset the validator
-            validator.reset();
-
-            const url = `/api/feature/list-rses?rseExpression=${expression ?? DEFAULT_EXPRESSION}`;
-            streamingHook.start({ url, onData });
-        } else {
-            toast(noApiToast);
-        }
-    };
-
-    const isRunning = streamingHook.status === StreamingStatus.RUNNING;
-
-    const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
-        const value = event.target.value;
-        setExpression(value !== '' ? value : DEFAULT_EXPRESSION);
-    };
-
-    const onSearch = (event: any) => {
-        event.preventDefault();
-        if (!isRunning) {
-            startStreaming();
-        } else {
-            toast(alreadyStreamingToast);
-        }
-    };
+    const { onGridReady, streamingHook, startStreaming, stopStreaming } = useTableStreaming<RSEViewModel>(props.initialData);
 
-    const onStop = (event: any) => {
-        event.preventDefault();
-        if (isRunning) {
-            streamingHook.stop();
-        }
+    const onSearch = (expression: string) => {
+        startStreaming(`/api/feature/list-rses?rseExpression=${expression}`);
     };
 
     return (
         <div className="flex flex-col space-y-3 w-full grow">
             <Heading text="RSEs" />
-            <div className="space-y-2">
-                <div className="text-neutral-900 dark:text-neutral-100">
-                    Expression
-                    <HintLink href="https://rucio.github.io/documentation/started/concepts/rse_expressions" className="pl-2" />
-                </div>
-                <div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2 items-center sm:items-start">
-                    <Input
-                        className="w-full sm:flex-grow"
-                        onChange={onInputChange}
-                        onEnterKey={onSearch}
-                        defaultValue={props.firstExpression ?? ''}
-                        placeholder={DEFAULT_EXPRESSION}
-                    />
-                    <SearchButton isRunning={isRunning} onStop={onStop} onSearch={onSearch} />
-                </div>
-            </div>
+            <RSESearchPanel
+                onSearch={onSearch}
+                stopStreaming={stopStreaming}
+                isRunning={streamingHook.status === StreamingStatus.RUNNING}
+                initialExpression={props.initialExpression}
+            />
             <ListRSETable streamingHook={streamingHook} onGridReady={onGridReady} />
         </div>
     );
diff --git a/src/component-library/pages/RSE/list/ListRSETable.tsx b/src/component-library/pages/RSE/list/ListRSETable.tsx
index 16a7bcb99..1cd6ba575 100644
--- a/src/component-library/pages/RSE/list/ListRSETable.tsx
+++ b/src/component-library/pages/RSE/list/ListRSETable.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { AgGridReact } from 'ag-grid-react';
-import { UseChunkedStream } from '@/lib/infrastructure/hooks/useChunkedStream';
+import { UseStreamReader } from '@/lib/infrastructure/hooks/useStreamReader';
 import { RSEViewModel } from '@/lib/infrastructure/data/view-model/rse';
 import { StreamedTable } from '@/component-library/features/table/StreamedTable/StreamedTable';
 import { ClickableCell } from '@/component-library/features/table/cells/ClickableCell';
@@ -12,7 +12,7 @@ import { RSETypeBadge } from '@/component-library/features/badges/RSE/RSETypeBad
 import { RSEType } from '@/lib/core/entity/rucio';
 
 type ListRSETableProps = {
-    streamingHook: UseChunkedStream<RSEViewModel>;
+    streamingHook: UseStreamReader<RSEViewModel>;
     onGridReady: (event: GridReadyEvent) => void;
 };
 
diff --git a/src/component-library/pages/Rule/create/CreateRule.stories.tsx b/src/component-library/pages/Rule/create/CreateRule.stories.tsx
new file mode 100644
index 000000000..218811700
--- /dev/null
+++ b/src/component-library/pages/Rule/create/CreateRule.stories.tsx
@@ -0,0 +1,145 @@
+import { StoryFn, Meta } from '@storybook/react';
+import { ToastedTemplate } from '@/component-library/templates/ToastedTemplate/ToastedTemplate';
+import { CreateRule } from '@/component-library/pages/Rule/create/CreateRule';
+import { getDecoratorWithWorker } from '@/test/mocks/handlers/story-decorators';
+import { getMockStreamEndpoint } from '@/test/mocks/handlers/streaming-handlers';
+import {
+    fixtureDIDLongViewModel,
+    fixtureListDIDViewModel,
+    fixtureRSEAccountUsageLimitViewModel,
+    fixtureRSEViewModel,
+} from '@/test/fixtures/table-fixtures';
+import { RSEAccountUsageLimitViewModel } from '@/lib/infrastructure/data/view-model/rse';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { getMockSingleEndpoint } from '@/test/mocks/handlers/single-handlers';
+import { CreateRuleParameters, CreateRuleViewModel } from '@/lib/infrastructure/data/view-model/rule';
+
+export default {
+    title: 'Components/Pages/Rule/Create',
+    component: CreateRule,
+    parameters: {
+        docs: { disable: true },
+    },
+} as Meta<typeof CreateRule>;
+
+const Template: StoryFn<typeof CreateRule> = args => {
+    const queryClient = new QueryClient();
+    return (
+        <QueryClientProvider client={queryClient}>
+            <ToastedTemplate>
+                <CreateRule {...args} />
+            </ToastedTemplate>
+        </QueryClientProvider>
+    );
+};
+
+const staticRses: RSEAccountUsageLimitViewModel[] = [
+    {
+        account: '',
+        bytes_limit: -1,
+        bytes_remaining: -1,
+        files: -1,
+        has_quota: false,
+        rse: 'OOPS',
+        rse_id: 'oops',
+        status: 'success',
+        total_expected_usage: -1,
+        used_bytes: -1,
+    },
+    {
+        account: '',
+        // ~ 10 TB
+        bytes_limit: 10 ** 13,
+        bytes_remaining: 10 ** 13,
+        files: -1,
+        has_quota: true,
+        rse: 'RSE-FULL',
+        rse_id: 'rse-full',
+        status: 'success',
+        total_expected_usage: 0,
+        used_bytes: 0,
+    },
+    {
+        account: '',
+        bytes_limit: 1000,
+        bytes_remaining: -100,
+        files: -1,
+        has_quota: false,
+        rse: 'RSE-LACKING',
+        rse_id: 'rse-lacking',
+        status: 'success',
+        total_expected_usage: 900,
+        used_bytes: 800,
+    },
+];
+
+export const Regular = Template.bind({});
+Regular.args = {
+    getSavedParameters: () => undefined,
+    getSavedIndex: () => undefined,
+    setSavedIndex: () => {},
+    setSavedParameters: () => {},
+    removeSavedParameters: () => {},
+    removeSavedIndex: () => {},
+};
+Regular.decorators = [
+    getDecoratorWithWorker([
+        getMockStreamEndpoint('/api/feature/list-dids', {
+            data: Array.from({ length: 200 }, fixtureDIDLongViewModel),
+            delay: 1,
+        }),
+        getMockStreamEndpoint('/api/feature/list-account-rse-quotas', {
+            data: staticRses,
+            delay: 1,
+            method: 'POST',
+        }),
+        getMockSingleEndpoint('/api/feature/create-rule', {
+            getDelay: () => 500,
+            method: 'POST',
+            getData: () => {
+                const viewModel: CreateRuleViewModel = {
+                    rule_ids: ['test'],
+                    status: 'success',
+                };
+                return viewModel;
+            },
+        }),
+    ]),
+];
+
+export const FromOptions = Template.bind({});
+FromOptions.args = {
+    getSavedParameters: () => undefined,
+    getSavedIndex: () => 2,
+    setSavedIndex: () => {},
+    setSavedParameters: () => {},
+    removeSavedParameters: () => {},
+    removeSavedIndex: () => {},
+};
+
+export const FromSummary = Template.bind({});
+FromSummary.args = {
+    getSavedParameters: () => {
+        const parameters: CreateRuleParameters = {
+            askApproval: false,
+            asynchronous: false,
+            comments: '',
+            copies: 3,
+            daysLifetime: undefined,
+            dids: Array.from({ length: 3 }, fixtureListDIDViewModel),
+            grouping: undefined,
+            sample: false,
+            needsApproval: false,
+            notify: false,
+            rseExpression: '',
+            rses: [fixtureRSEAccountUsageLimitViewModel()],
+            sampleFileCount: 0,
+        };
+        return parameters;
+    },
+    getSavedIndex: () => 3,
+    setSavedIndex: () => {},
+    setSavedParameters: () => {},
+    removeSavedParameters: () => {},
+    removeSavedIndex: () => {},
+};
diff --git a/src/component-library/pages/Rule/create/CreateRule.tsx b/src/component-library/pages/Rule/create/CreateRule.tsx
new file mode 100644
index 000000000..61c8598c8
--- /dev/null
+++ b/src/component-library/pages/Rule/create/CreateRule.tsx
@@ -0,0 +1,227 @@
+import React, { useEffect, useState } from 'react';
+import {
+    CreateRuleGrouping,
+    CreateRuleOptions,
+    CreateRuleParameters,
+    CreateRuleStorage,
+    getEmptyCreateRuleParameters,
+} from '@/lib/infrastructure/data/view-model/rule';
+import { Heading } from '@/component-library/atoms/misc/Heading';
+import Timeline from '@/component-library/features/Timeline';
+import { HiArrowLeft, HiArrowRight } from 'react-icons/hi';
+import { Button } from '@/component-library/atoms/form/button';
+import { CreateRuleStageData } from '@/component-library/pages/Rule/create/stage-dids/CreateRuleStageData';
+import { CreateRuleStageStorage } from '@/component-library/pages/Rule/create/stage-rses/CreateRuleStageStorage';
+import { LoadingSpinner } from '@/component-library/atoms/loading/LoadingSpinner';
+import {
+    CreateRuleOptionsErrors,
+    CreateRuleStageOptions,
+    getEmptyOptionsErrors,
+} from '@/component-library/pages/Rule/create/stage-options/CreateRuleStageOptions';
+import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
+import { CreateRuleStageSummary } from '@/component-library/pages/Rule/create/stage-summary/CreateRuleStageSummary';
+import { CreateRuleStageSubmission } from '@/component-library/pages/Rule/create/stage-submission/CreateRuleStageSubmission';
+
+const PreviousButton = ({ activeIndex, setActiveIndex }: { activeIndex: number; setActiveIndex: React.Dispatch<React.SetStateAction<number>> }) => {
+    const disabled = activeIndex === 0;
+
+    return (
+        <Button variant="neutral" className="w-full sm:w-48 justify-between" disabled={disabled} onClick={() => setActiveIndex(prev => prev - 1)}>
+            <HiArrowLeft />
+            <span>Previous</span>
+        </Button>
+    );
+};
+
+const NextButton = ({
+    activeIndex,
+    setActiveIndex,
+    stepsLength,
+    isStepIncomplete,
+}: {
+    activeIndex: number;
+    setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
+    stepsLength: number;
+    isStepIncomplete: boolean;
+}) => {
+    const isSubmit = activeIndex === stepsLength - 2;
+    const disabled = activeIndex === stepsLength - 1 || isStepIncomplete;
+
+    return (
+        <Button
+            variant={isSubmit ? 'success' : 'neutral'}
+            className="w-full sm:w-48 ml-auto justify-between"
+            disabled={disabled}
+            onClick={() => setActiveIndex(prev => prev + 1)}
+        >
+            <span>{isSubmit ? 'Submit' : 'Next'}</span>
+            <HiArrowRight />
+        </Button>
+    );
+};
+
+interface CreateRuleProps {
+    getSavedParameters: () => CreateRuleParameters | undefined;
+    getSavedIndex: () => number | undefined;
+    setSavedParameters: (parameters: CreateRuleParameters) => void;
+    setSavedIndex: (activeIndex: number) => void;
+    removeSavedParameters: () => void;
+    removeSavedIndex: () => void;
+}
+
+export const CreateRule = (props: CreateRuleProps) => {
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [parameters, setParameters] = useState<CreateRuleParameters>(getEmptyCreateRuleParameters());
+    const [activeIndex, setActiveIndex] = useState<number>(0);
+    const [optionsErrors, setOptionsErrors] = useState<CreateRuleOptionsErrors>(getEmptyOptionsErrors());
+
+    const checkOptionsErrors = () => {
+        const totalDataSize = parameters.dids.reduce((accumulator, current) => accumulator + current.bytes, 0);
+
+        const newOptionErrors = getEmptyOptionsErrors();
+        const { copies, daysLifetime, grouping, comments } = parameters;
+
+        newOptionErrors.copiesInvalid = isNaN(copies) || copies < 1 || copies > parameters.rses.length;
+        newOptionErrors.tooManyCopies =
+            !parameters.askApproval && parameters.rses.filter(rse => rse.bytes_remaining >= totalDataSize).length < copies;
+
+        newOptionErrors.lifetimeInvalid = daysLifetime !== undefined && (isNaN(daysLifetime) || daysLifetime < 1);
+
+        newOptionErrors.commentsEmpty = parameters.askApproval && !comments;
+        newOptionErrors.groupingInvalid =
+            grouping !== undefined &&
+            grouping !== CreateRuleGrouping.DATASET &&
+            grouping !== CreateRuleGrouping.ALL &&
+            grouping !== CreateRuleGrouping.NONE;
+
+        newOptionErrors.sampleCountInvalid =
+            parameters.sample && (!parameters.sampleFileCount || isNaN(parameters.sampleFileCount) || parameters.sampleFileCount < 1);
+
+        setOptionsErrors(newOptionErrors);
+    };
+
+    useEffect(() => {
+        const savedParameters = props.getSavedParameters();
+        if (savedParameters) setParameters(savedParameters);
+
+        const savedIndex = props.getSavedIndex();
+        // TODO: check for range
+        if (savedIndex) setActiveIndex(savedIndex);
+
+        setIsLoading(false);
+    }, []);
+
+    // Effects to sync parameters and activeIndex with localStorage
+    useEffect(() => {
+        if (isLoading) return;
+        props.setSavedParameters(parameters);
+        checkOptionsErrors();
+    }, [parameters]);
+    useEffect(() => {
+        // Don't save submission
+        if (isLoading || activeIndex === 4) return;
+        props.setSavedIndex(activeIndex);
+    }, [activeIndex]);
+
+    // Utility to partially update parameters
+    const updateParameters = (newParams: Partial<CreateRuleParameters>) => {
+        setParameters(prevState => ({ ...prevState, ...newParams }));
+    };
+
+    const updateStorage = (storage: CreateRuleStorage) => updateParameters(storage);
+    const updateNeedsApproval = (needsApproval: boolean) => updateParameters({ needsApproval });
+    const updateAskApproval = (askApproval: boolean) => updateParameters({ askApproval });
+    const updateOptionValue = (key: keyof CreateRuleOptions, value: any) => {
+        setParameters(prevState => ({
+            ...prevState,
+            [key]: value,
+        }));
+    };
+
+    const addDID = (did: ListDIDsViewModel) => {
+        setParameters(prevState => {
+            const didExists = prevState.dids.some(element => element.scope === did.scope && element.name === did.name);
+            if (didExists) return prevState;
+
+            return { ...prevState, dids: [...prevState.dids, did] };
+        });
+    };
+
+    const removeDID = (did: ListDIDsViewModel) => {
+        setParameters(prevState => ({
+            ...prevState,
+            dids: prevState.dids.filter(element => element.scope !== did.scope || element.name !== did.name),
+        }));
+    };
+
+    const isStepIncomplete = (): boolean => {
+        let isIncomplete = false;
+
+        if (activeIndex >= 0) {
+            isIncomplete = isIncomplete || parameters.dids.length === 0;
+        }
+        if (activeIndex >= 1) {
+            isIncomplete = isIncomplete || parameters.rses.length === 0 || (parameters.needsApproval && !parameters.askApproval);
+        }
+        if (activeIndex >= 2) {
+            isIncomplete = isIncomplete || Object.values(optionsErrors).some(error => error);
+        }
+
+        return isIncomplete;
+    };
+
+    const steps = ['DIDs', 'RSEs', 'Options', 'Summary', 'Results'];
+
+    if (isLoading) {
+        return (
+            <div className="flex w-full grow items-center justify-center">
+                <LoadingSpinner />
+            </div>
+        );
+    }
+
+    const getPaginationPanel = () => {
+        return (
+            <div className="flex flex-col sm:flex-row sm:justify-between space-y-2 sm:space-y-0">
+                <PreviousButton activeIndex={activeIndex} setActiveIndex={setActiveIndex} />
+                <NextButton
+                    activeIndex={activeIndex}
+                    setActiveIndex={setActiveIndex}
+                    stepsLength={steps.length}
+                    isStepIncomplete={isStepIncomplete()}
+                />
+            </div>
+        );
+    };
+
+    // Keep stage DIDs rendered, as it may contain large streamed data
+    return (
+        <div className="flex flex-col space-y-3 w-full grow">
+            <Heading text="New Rule" />
+            <Timeline steps={steps} activeIndex={activeIndex} onSwitch={activeIndex !== 4 ? setActiveIndex : undefined} />
+            <div>
+                <CreateRuleStageData visible={activeIndex === 0} parameters={parameters} addDID={addDID} removeDID={removeDID} />
+                {activeIndex === 1 && (
+                    <CreateRuleStageStorage
+                        parameters={parameters}
+                        updateStorage={updateStorage}
+                        updateNeedsApproval={updateNeedsApproval}
+                        updateAskApproval={updateAskApproval}
+                    />
+                )}
+                {activeIndex === 2 && <CreateRuleStageOptions parameters={parameters} updateOptionValue={updateOptionValue} errors={optionsErrors} />}
+                {activeIndex === 3 && <CreateRuleStageSummary parameters={parameters} />}
+            </div>
+            {activeIndex === 4 && (
+                <CreateRuleStageSubmission
+                    parameters={parameters}
+                    removeSaved={() => {
+                        props.removeSavedIndex();
+                        props.removeSavedParameters();
+                    }}
+                />
+            )}
+            {activeIndex !== 4 && getPaginationPanel()}
+        </div>
+    );
+};
diff --git a/src/component-library/pages/Rule/create/CreateRuleTableWrapper.tsx b/src/component-library/pages/Rule/create/CreateRuleTableWrapper.tsx
new file mode 100644
index 000000000..0ed3c392f
--- /dev/null
+++ b/src/component-library/pages/Rule/create/CreateRuleTableWrapper.tsx
@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+
+export const CreateRuleTableWrapper = ({ children }: { children: ReactNode }) => {
+    return <div className="h-[450px] flex flex-col">{children}</div>;
+};
diff --git a/src/component-library/pages/Rule/create/stage-dids/CreateRuleStageData.tsx b/src/component-library/pages/Rule/create/stage-dids/CreateRuleStageData.tsx
new file mode 100644
index 000000000..9db5c84b9
--- /dev/null
+++ b/src/component-library/pages/Rule/create/stage-dids/CreateRuleStageData.tsx
@@ -0,0 +1,70 @@
+import useTableStreaming from '@/lib/infrastructure/hooks/useTableStreaming';
+import { StreamingStatus } from '@/lib/infrastructure/hooks/useStreamReader';
+import { DIDSearchPanel } from '@/component-library/features/search/DIDSearchPanel';
+import { CreateRuleParameters } from '@/lib/infrastructure/data/view-model/rule';
+import { CreateRuleStageDataTable } from '@/component-library/pages/Rule/create/stage-dids/CreateRuleStageDataTable';
+import { cn } from '@/component-library/utils';
+import { formatFileSize } from '@/component-library/features/utils/text-formatters';
+import { CreateRuleStageDataSelectedTable } from '@/component-library/pages/Rule/create/stage-dids/CreateRuleStageDataSelectedTable';
+import { InfoField } from '@/component-library/features/fields/InfoField';
+import { CreateRuleTableWrapper } from '@/component-library/pages/Rule/create/CreateRuleTableWrapper';
+import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
+import { useState } from 'react';
+import ToggleHeader from '@/component-library/features/search/ToggleHeader';
+
+type CreateRuleStageDataProps = {
+    visible: boolean;
+    parameters: CreateRuleParameters;
+    addDID: (did: ListDIDsViewModel) => void;
+    removeDID: (did: ListDIDsViewModel) => void;
+};
+
+export const CreateRuleStageData = (props: CreateRuleStageDataProps) => {
+    const selectedItems = props.parameters.dids;
+    const totalSize = selectedItems.reduce((accumulator, current) => accumulator + current.bytes, 0);
+
+    const { onGridReady, streamingHook, startStreaming, stopStreaming } = useTableStreaming<ListDIDsViewModel>();
+    const [isSearchOpen, setIsSearchOpen] = useState<boolean>(selectedItems.length === 0);
+
+    const getInfoField = () => {
+        let text;
+        if (selectedItems.length === 0) {
+            text = <span>Please select at least one identifier</span>;
+        } else {
+            text = (
+                <span>
+                    {selectedItems.length} chosen, {formatFileSize(totalSize)} in total
+                </span>
+            );
+        }
+        return <InfoField>{text}</InfoField>;
+    };
+
+    return (
+        <div className={cn('flex flex-col space-y-3 w-full grow', props.visible ? 'visible' : 'hidden')}>
+            <ToggleHeader text="Search" isOpen={isSearchOpen} onClick={() => setIsSearchOpen(prevState => !prevState)} />
+            <div className={`space-y-3 ${isSearchOpen ? 'visible' : 'hidden'}`}>
+                <DIDSearchPanel
+                    startStreaming={startStreaming}
+                    stopStreaming={stopStreaming}
+                    isRunning={streamingHook.status === StreamingStatus.RUNNING}
+                />
+                <CreateRuleTableWrapper>
+                    <CreateRuleStageDataTable
+                        streamingHook={streamingHook}
+                        onGridReady={onGridReady}
+                        addDID={did => props.addDID(did)}
+                        removeDID={did => props.removeDID(did)}
+                        selectedItems={selectedItems}
+                    />
+                </CreateRuleTableWrapper>
+            </div>
+            {selectedItems.length !== 0 && (
+                <CreateRuleTableWrapper>
+                    <CreateRuleStageDataSelectedTable rowData={selectedItems} removeDID={did => props.removeDID(did)} />
+                </CreateRuleTableWrapper>
+            )}
+            {getInfoField()}
+        </div>
+    );
+};
diff --git a/src/component-library/pages/Rule/create/stage-dids/CreateRuleStageDataSelectedTable.tsx b/src/component-library/pages/Rule/create/stage-dids/CreateRuleStageDataSelectedTable.tsx
new file mode 100644
index 000000000..d62cdc8ac
--- /dev/null
+++ b/src/component-library/pages/Rule/create/stage-dids/CreateRuleStageDataSelectedTable.tsx
@@ -0,0 +1,56 @@
+import React, { useRef, useState } from 'react';
+import { ICellRendererParams, ValueFormatterParams, ValueGetterParams } from 'ag-grid-community';
+import { AgGridReact } from 'ag-grid-react';
+import { formatFileSize } from '@/component-library/features/utils/text-formatters';
+import { RegularTable } from '@/component-library/features/table/RegularTable/RegularTable';
+import { DIDTypeBadge } from '@/component-library/features/badges/DID/DIDTypeBadge';
+import { badgeCellClasses, badgeCellWrapperStyle } from '@/component-library/features/table/cells/badge-cell';
+import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
+import { RemovableCell } from '@/component-library/features/table/cells/selection-cells';
+
+type StageDataTableProps = {
+    rowData: ListDIDsViewModel[];
+    removeDID: (item: ListDIDsViewModel) => void;
+};
+
+export const CreateRuleStageDataSelectedTable = (props: StageDataTableProps) => {
+    const tableRef = useRef<AgGridReact<ListDIDsViewModel>>(null);
+
+    const [columnDefs] = useState([
+        {
+            headerName: 'Identifier',
+            flex: 1,
+            valueGetter: (params: ValueGetterParams<ListDIDsViewModel>) => `${params.data?.scope}:${params.data?.name}`,
+            cellRenderer: (params: ICellRendererParams<ListDIDsViewModel>) => {
+                const did = params.data!;
+                return <RemovableCell onClick={() => props.removeDID(did)} {...params} />;
+            },
+            minWidth: 250,
+            sortable: false,
+        },
+        {
+            headerName: 'Type',
+            field: 'did_type',
+            cellRenderer: DIDTypeBadge,
+            minWidth: 180,
+            maxWidth: 180,
+            cellStyle: badgeCellWrapperStyle,
+            cellRendererParams: {
+                className: badgeCellClasses,
+            },
+            sortable: false,
+        },
+        {
+            headerName: 'Size',
+            field: 'bytes',
+            valueFormatter: (params: ValueFormatterParams) => {
+                return formatFileSize(params.value);
+            },
+            minWidth: 200,
+            maxWidth: 200,
+            sortable: false,
+        },
+    ]);
+
+    return <RegularTable columnDefs={columnDefs} tableRef={tableRef} {...props} />;
+};
diff --git a/src/component-library/pages/Rule/create/stage-dids/CreateRuleStageDataTable.tsx b/src/component-library/pages/Rule/create/stage-dids/CreateRuleStageDataTable.tsx
new file mode 100644
index 000000000..d554777b5
--- /dev/null
+++ b/src/component-library/pages/Rule/create/stage-dids/CreateRuleStageDataTable.tsx
@@ -0,0 +1,64 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { UseStreamReader } from '@/lib/infrastructure/hooks/useStreamReader';
+import { StreamedTable } from '@/component-library/features/table/StreamedTable/StreamedTable';
+import { DefaultTextFilterParams } from '@/component-library/features/utils/filter-parameters';
+import { DIDLongViewModel } from '@/lib/infrastructure/data/view-model/did';
+import { GridReadyEvent, ICellRendererParams, ValueFormatterParams, ValueGetterParams } from 'ag-grid-community';
+import { AgGridReact } from 'ag-grid-react';
+import { formatFileSize } from '@/component-library/features/utils/text-formatters';
+import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
+import { SelectableCell } from '@/component-library/features/table/cells/selection-cells';
+
+interface SelectableDIDViewModel extends ListDIDsViewModel {
+    selected?: boolean;
+}
+
+type StageDataTableProps = {
+    streamingHook: UseStreamReader<ListDIDsViewModel>;
+    addDID: (item: SelectableDIDViewModel) => void;
+    removeDID: (item: SelectableDIDViewModel) => void;
+    onGridReady: (event: GridReadyEvent) => void;
+    selectedItems: ListDIDsViewModel[];
+};
+
+export const CreateRuleStageDataTable: React.FC<StageDataTableProps> = ({ addDID, removeDID, selectedItems, ...props }) => {
+    const tableRef = useRef<AgGridReact<SelectableDIDViewModel>>(null);
+
+    const [columnDefs] = useState([
+        {
+            headerName: 'Identifier',
+            flex: 1,
+            valueGetter: (params: ValueGetterParams<ListDIDsViewModel>) => `${params.data?.scope}:${params.data?.name}`,
+            cellRenderer: (params: ICellRendererParams<SelectableDIDViewModel>) => {
+                const did = params.data!;
+                did.selected = did.selected ?? selectedItems.some(item => item.scope === did.scope && item.name === did.name);
+                const onSelect = () => (did.selected ? removeDID(did) : addDID(did));
+                return <SelectableCell selected={did.selected} onSelect={onSelect} {...params} />;
+            },
+            minWidth: 250,
+            filter: true,
+            filterParams: DefaultTextFilterParams,
+        },
+        {
+            headerName: 'Size',
+            field: 'bytes',
+            valueFormatter: (params: ValueFormatterParams) => formatFileSize(params.value),
+            minWidth: 200,
+            maxWidth: 200,
+        },
+    ]);
+
+    const updateSelection = () => {
+        tableRef.current?.api?.forEachNode(node => {
+            const did: DIDLongViewModel = node.data;
+            const selected = selectedItems.some(element => element.scope === did.scope && element.name === did.name);
+            node.setData({ ...did, selected });
+        });
+    };
+
+    useEffect(() => {
+        updateSelection();
+    }, [selectedItems]);
+
+    return <StreamedTable columnDefs={columnDefs} tableRef={tableRef} onAsyncTransactionsFlushed={() => updateSelection()} {...props} />;
+};
diff --git a/src/component-library/pages/Rule/create/stage-options/CreateRuleStageOptions.tsx b/src/component-library/pages/Rule/create/stage-options/CreateRuleStageOptions.tsx
new file mode 100644
index 000000000..754b7aca6
--- /dev/null
+++ b/src/component-library/pages/Rule/create/stage-options/CreateRuleStageOptions.tsx
@@ -0,0 +1,288 @@
+import { CreateRuleGrouping, CreateRuleOptions, CreateRuleParameters } from '@/lib/infrastructure/data/view-model/rule';
+import { cn } from '@/component-library/utils';
+import React, { ChangeEvent, FormEvent, useRef } from 'react';
+import { Input, Textarea } from '@/component-library/atoms/form/input';
+import { LabeledCheckbox } from '@/component-library/features/form/LabeledCheckbox';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/component-library/atoms/form/select';
+import { WarningField } from '@/component-library/features/fields/WarningField';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/component-library/atoms/misc/collapsible';
+import { HiChevronUpDown } from 'react-icons/hi2';
+
+interface FieldWithLabelProps {
+    label: string;
+    children: React.ReactNode;
+    className?: string;
+    required?: boolean;
+}
+
+const InputWithLabel: React.FC<FieldWithLabelProps> = ({ label, children, className, required }) => {
+    return (
+        <div className={cn('space-y-1', className)}>
+            <label className="text-neutral-900 dark:text-neutral-100">
+                {label}
+                {required && <span className="text-base-error-500 font-medium ml-1">*</span>}
+            </label>
+            {children}
+        </div>
+    );
+};
+
+export type CreateRuleOptionsErrors = {
+    tooManyCopies: boolean;
+    copiesInvalid: boolean;
+    lifetimeInvalid: boolean;
+    commentsEmpty: boolean;
+    groupingInvalid: boolean;
+    sampleCountInvalid: boolean;
+};
+
+export const getEmptyOptionsErrors = (): CreateRuleOptionsErrors => {
+    return {
+        commentsEmpty: false,
+        copiesInvalid: false,
+        groupingInvalid: false,
+        lifetimeInvalid: false,
+        tooManyCopies: false,
+        sampleCountInvalid: false,
+    };
+};
+
+interface OptionsCollapsibleTriggerProps {
+    label: string;
+    className?: string;
+}
+
+const OptionsCollapsibleTrigger: React.FC<OptionsCollapsibleTriggerProps> = ({ label, className }) => {
+    return (
+        <CollapsibleTrigger
+            className={cn(
+                'flex w-full items-center justify-between space-x-2',
+                'py-2 px-3',
+                'text-neutral-900 dark:text-neutral-100',
+                'rounded-md border border-neutral-900 dark:border-neutral-100 border-opacity-10 dark:border-opacity-10',
+                className,
+            )}
+        >
+            <span>{label}</span>
+            <HiChevronUpDown className="h-6 w-6" />
+        </CollapsibleTrigger>
+    );
+};
+
+const collapsibleContentStyle = 'pt-3 space-y-5';
+
+const LifetimeInput = ({
+    parameters,
+    updateOptionValue,
+}: {
+    parameters: CreateRuleParameters;
+    updateOptionValue: (key: keyof CreateRuleOptions, value: any) => void;
+}) => {
+    const lifetimeInputRef = useRef<HTMLInputElement>(null);
+
+    const onLifetimeInput = (event: FormEvent<HTMLInputElement>) => {
+        let value;
+        if (event.currentTarget.validity.valid) {
+            value = event.currentTarget.value === '' ? undefined : parseInt(event.currentTarget.value, 10);
+        } else {
+            value = NaN;
+        }
+        updateOptionValue('daysLifetime', value);
+    };
+
+    const onDateInput = (event: FormEvent<HTMLInputElement>) => {
+        const selectedDate = new Date(event.currentTarget.value);
+        const currentDate = new Date();
+        const differenceInDays = Math.ceil((selectedDate.getTime() - currentDate.getTime()) / (1000 * 60 * 60 * 24));
+        updateOptionValue('daysLifetime', differenceInDays);
+        if (lifetimeInputRef.current) {
+            lifetimeInputRef.current.value = differenceInDays.toString();
+        }
+    };
+
+    const getExpiryDate = () => {
+        const currentDate = new Date();
+        if (parameters.daysLifetime) {
+            const expiryDate = new Date(currentDate.setDate(currentDate.getDate() + parameters.daysLifetime));
+            // Returns date in yyyy-mm-dd format
+            return expiryDate.toISOString().split('T')[0];
+        }
+        return '';
+    };
+
+    const getDefaultLifetime = () => {
+        if (parameters.daysLifetime === undefined) return '';
+        if (isNaN(parameters.daysLifetime)) return -1;
+        return parameters.daysLifetime;
+    };
+
+    return (
+        <Collapsible>
+            <OptionsCollapsibleTrigger label="Lifetime" />
+            <CollapsibleContent className={collapsibleContentStyle}>
+                <InputWithLabel label="Days">
+                    <Input onInput={onLifetimeInput} type="number" min="1" max="1000" defaultValue={getDefaultLifetime()} ref={lifetimeInputRef} />
+                </InputWithLabel>
+
+                <InputWithLabel label="Expires on">
+                    <Input type="date" value={getExpiryDate()} onInput={onDateInput} />
+                </InputWithLabel>
+            </CollapsibleContent>
+        </Collapsible>
+    );
+};
+
+const AdvancedInput = ({
+    parameters,
+    updateOptionValue,
+}: {
+    parameters: CreateRuleParameters;
+    updateOptionValue: (key: keyof CreateRuleOptions, value: any) => void;
+}) => {
+    const onFileCountInput = (event: FormEvent<HTMLInputElement>) => {
+        let value;
+        if (event.currentTarget.validity.valid) {
+            value = event.currentTarget.value === '' ? undefined : parseInt(event.currentTarget.value, 10);
+        } else {
+            value = NaN;
+        }
+        updateOptionValue('sampleFileCount', value);
+    };
+
+    const getDefaultFileCount = () => {
+        if (parameters.sampleFileCount === undefined) return '';
+        if (isNaN(parameters.sampleFileCount)) return -1;
+        return parameters.sampleFileCount;
+    };
+
+    return (
+        <Collapsible>
+            <OptionsCollapsibleTrigger label="Advanced" />
+            <CollapsibleContent className={collapsibleContentStyle}>
+                <InputWithLabel label="Grouping">
+                    <Select
+                        onValueChange={value => {
+                            const grouping = value === UNDEFINED_GROUPING ? undefined : (value as CreateRuleGrouping);
+                            updateOptionValue('grouping', grouping);
+                        }}
+                        defaultValue={parameters.grouping ?? UNDEFINED_GROUPING}
+                    >
+                        <SelectTrigger>
+                            <SelectValue placeholder="Grouping" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectGroup>
+                                <SelectItem value={UNDEFINED_GROUPING}>Undefined</SelectItem>
+                                <SelectItem value={CreateRuleGrouping.ALL}>All</SelectItem>
+                                <SelectItem value={CreateRuleGrouping.DATASET}>Dataset</SelectItem>
+                                <SelectItem value={CreateRuleGrouping.NONE}>None</SelectItem>
+                            </SelectGroup>
+                        </SelectContent>
+                    </Select>
+                </InputWithLabel>
+                <LabeledCheckbox
+                    checked={parameters.asynchronous}
+                    onChange={() => updateOptionValue('asynchronous', !parameters.asynchronous)}
+                    label="Asynchronous"
+                />
+                <LabeledCheckbox
+                    checked={parameters.sample}
+                    onChange={() => updateOptionValue('sample', !parameters.sample)}
+                    label="Create a sample"
+                />
+                {parameters.sample && (
+                    <InputWithLabel label="Number of files">
+                        <Input type="number" min="1" onInput={onFileCountInput} defaultValue={getDefaultFileCount()} />
+                    </InputWithLabel>
+                )}
+            </CollapsibleContent>
+        </Collapsible>
+    );
+};
+
+type CreateRuleStageOptionsProps = {
+    parameters: CreateRuleParameters;
+    updateOptionValue: (key: keyof CreateRuleOptions, value: any) => void;
+    errors: CreateRuleOptionsErrors;
+};
+
+const UNDEFINED_GROUPING = 'undefined';
+
+export const CreateRuleStageOptions = ({ parameters, updateOptionValue, errors }: CreateRuleStageOptionsProps) => {
+    const onCopiesInput = (event: ChangeEvent<HTMLInputElement>) => {
+        const value = parseInt(event.target.value, 10);
+        updateOptionValue('copies', value);
+    };
+
+    const defaultCopies = isNaN(parameters.copies) ? '' : parameters.copies;
+
+    return (
+        <div className="flex flex-col space-y-5 w-full grow">
+            <InputWithLabel label="Copies" required>
+                <Input onChange={onCopiesInput} type="number" min="1" max={parameters.rses.length} defaultValue={defaultCopies} />
+            </InputWithLabel>
+
+            <LifetimeInput parameters={parameters} updateOptionValue={updateOptionValue} />
+
+            <InputWithLabel label="Comments" required={parameters.askApproval}>
+                <Textarea onChange={event => updateOptionValue('comments', event.target.value)} defaultValue={parameters.comments} />
+            </InputWithLabel>
+            <LabeledCheckbox
+                checked={parameters.notify}
+                onChange={() => updateOptionValue('notify', !parameters.notify)}
+                label="Receive notifications"
+            />
+            <AdvancedInput parameters={parameters} updateOptionValue={updateOptionValue} />
+
+            {/* Error handling */}
+            {errors.copiesInvalid && (
+                <WarningField>
+                    <span>
+                        Invalid value for <b>copies</b>. It should range from 1 to the number of chosen RSEs.
+                    </span>
+                </WarningField>
+            )}
+
+            {!errors.copiesInvalid && errors.tooManyCopies && (
+                <WarningField>
+                    <span>
+                        There are less than <b>{parameters.copies}</b> chosen RSEs with enough quota left. Please change the number of <b>copies</b>{' '}
+                        or mark the rule as needing approval.
+                    </span>
+                </WarningField>
+            )}
+
+            {errors.lifetimeInvalid && (
+                <WarningField>
+                    <span>
+                        Invalid value for <b>lifetime</b>. It should be greater than 1 or not specified.
+                    </span>
+                </WarningField>
+            )}
+
+            {errors.commentsEmpty && (
+                <WarningField>
+                    <span>
+                        A <b>comment</b> should be specified if there is a need for rule approval.
+                    </span>
+                </WarningField>
+            )}
+
+            {errors.groupingInvalid && (
+                <WarningField>
+                    <span>
+                        The value of <b>grouping</b> is invalid.
+                    </span>
+                </WarningField>
+            )}
+
+            {errors.sampleCountInvalid && (
+                <WarningField>
+                    <span>
+                        Invalid value for <b>number of files</b>. It should be greater than 1 or not specified.
+                    </span>
+                </WarningField>
+            )}
+        </div>
+    );
+};
diff --git a/src/component-library/pages/Rule/create/stage-rses/CreateRuleStageStorage.tsx b/src/component-library/pages/Rule/create/stage-rses/CreateRuleStageStorage.tsx
new file mode 100644
index 000000000..f10e2cb65
--- /dev/null
+++ b/src/component-library/pages/Rule/create/stage-rses/CreateRuleStageStorage.tsx
@@ -0,0 +1,119 @@
+import useTableStreaming from '@/lib/infrastructure/hooks/useTableStreaming';
+import { StreamingStatus } from '@/lib/infrastructure/hooks/useStreamReader';
+import { CreateRuleParameters, CreateRuleStorage } from '@/lib/infrastructure/data/view-model/rule';
+import { cn } from '@/component-library/utils';
+import { HintLink } from '@/component-library/atoms/misc/HintLink';
+import { Input } from '@/component-library/atoms/form/input';
+import { SearchButton } from '@/component-library/features/search/SearchButton';
+import { ChangeEvent, useEffect, useState } from 'react';
+import { RSEAccountUsageLimitViewModel } from '@/lib/infrastructure/data/view-model/rse';
+import { CreateRuleStageStorageTable } from '@/component-library/pages/Rule/create/stage-rses/CreateRuleStageStorageTable';
+import { GridReadyEvent, SelectionChangedEvent } from 'ag-grid-community';
+import { InfoField } from '@/component-library/features/fields/InfoField';
+import { WarningField } from '@/component-library/features/fields/WarningField';
+import Checkbox from '@/component-library/atoms/form/Checkbox';
+import { CreateRuleTableWrapper } from '@/component-library/pages/Rule/create/CreateRuleTableWrapper';
+import { LabeledCheckbox } from '@/component-library/features/form/LabeledCheckbox';
+import { RSESearchPanel } from '@/component-library/features/search/RSESearchPanel';
+
+const DEFAULT_EXPRESSION = '*';
+
+type CreateRuleStageStorageProps = {
+    parameters: CreateRuleParameters;
+    updateStorage: (storage: CreateRuleStorage) => void;
+    updateNeedsApproval: (needsApproval: boolean) => void;
+    updateAskApproval: (askApproval: boolean) => void;
+};
+
+export const CreateRuleStageStorage = (props: CreateRuleStageStorageProps) => {
+    const totalDataSize = props.parameters.dids.reduce((accumulator, current) => accumulator + current.bytes, 0);
+    const selectedItems = props.parameters.rses;
+
+    const [needsApproval, setNeedsApproval] = useState<boolean>(props.parameters.needsApproval);
+    const [askApproval, setAskApproval] = useState<boolean>(props.parameters.askApproval);
+
+    const { onGridReady, streamingHook, startStreaming, stopStreaming, gridApi } = useTableStreaming<RSEAccountUsageLimitViewModel>();
+
+    const onSearch = (expression: string) => {
+        startStreaming('/api/feature/list-account-rse-quotas', {
+            method: 'POST',
+            // TODO: redo the endpoint to only accept the rseExpression via GET
+            body: JSON.stringify({
+                rseExpression: expression ?? DEFAULT_EXPRESSION,
+                requestedDIDs: props.parameters.dids,
+            }),
+        });
+    };
+
+    const onSelectionChanged = (event: SelectionChangedEvent) => {
+        const selected: RSEAccountUsageLimitViewModel[] = event.api.getSelectedRows();
+        // TODO: determine if all rows are picked and simplify the request to the rseExpression
+        props.updateStorage({
+            rses: selected,
+        });
+    };
+
+    useEffect(() => {
+        const hasSingleSufficient = selectedItems.some(element => element.bytes_remaining >= totalDataSize);
+        const changeNeedsApproval = selectedItems.length > 0 && !hasSingleSufficient;
+        setNeedsApproval(changeNeedsApproval);
+        props.updateNeedsApproval(changeNeedsApproval);
+    }, [selectedItems]);
+
+    useEffect(() => {
+        props.updateAskApproval(askApproval);
+    }, [askApproval]);
+
+    const isChoiceInvalid = needsApproval && !askApproval;
+
+    const getInfoField = () => {
+        let text;
+        if (selectedItems.length === 0) {
+            text = <span>Please select at least one RSE</span>;
+        } else {
+            text = (
+                <span>
+                    <b>{selectedItems.length}</b> chosen
+                </span>
+            );
+        }
+        return <InfoField>{text}</InfoField>;
+    };
+
+    const getWarningField = () => {
+        let text;
+        if (selectedItems.length === 1) {
+            text = <span>The chosen RSE does not have enough quota left. Please choose different RSEs or mark the rule as in need of approval.</span>;
+        } else {
+            text = (
+                <span>
+                    Out of <b>{selectedItems.length}</b> chosen RSEs, none have enough quota left. Please choose different RSEs or mark the rule as
+                    needing approval.
+                </span>
+            );
+        }
+        return <WarningField>{text}</WarningField>;
+    };
+
+    return (
+        <div className="flex flex-col space-y-3 w-full grow">
+            <RSESearchPanel
+                onSearch={onSearch}
+                stopStreaming={stopStreaming}
+                isRunning={streamingHook.status === StreamingStatus.RUNNING}
+                gridApi={gridApi ?? undefined}
+            />
+            <CreateRuleTableWrapper>
+                <CreateRuleStageStorageTable
+                    streamingHook={streamingHook}
+                    onSelectionChanged={onSelectionChanged}
+                    onGridReady={onGridReady}
+                    totalDataSize={totalDataSize}
+                    selectedItems={selectedItems}
+                />
+            </CreateRuleTableWrapper>
+            {isChoiceInvalid ? getWarningField() : getInfoField()}
+            <LabeledCheckbox checked={askApproval} onChange={() => setAskApproval(prevState => !prevState)} label="Ask for approval" />
+        </div>
+    );
+};
diff --git a/src/component-library/pages/Rule/create/stage-rses/CreateRuleStageStorageTable.tsx b/src/component-library/pages/Rule/create/stage-rses/CreateRuleStageStorageTable.tsx
new file mode 100644
index 000000000..307493397
--- /dev/null
+++ b/src/component-library/pages/Rule/create/stage-rses/CreateRuleStageStorageTable.tsx
@@ -0,0 +1,104 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { StreamingStatus, UseStreamReader } from '@/lib/infrastructure/hooks/useStreamReader';
+import { StreamedTable } from '@/component-library/features/table/StreamedTable/StreamedTable';
+import { DefaultTextFilterParams } from '@/component-library/features/utils/filter-parameters';
+import { ColSpanParams, GridReadyEvent, ICellRendererParams, SelectionChangedEvent, ValueFormatterParams } from 'ag-grid-community';
+import { AgGridReact } from 'ag-grid-react';
+import { formatFileSize } from '@/component-library/features/utils/text-formatters';
+import { RSEAccountUsageLimitViewModel, RSEAccountUsageViewModel } from '@/lib/infrastructure/data/view-model/rse';
+
+type StageStorageTableProps = {
+    streamingHook: UseStreamReader<RSEAccountUsageViewModel>;
+    onSelectionChanged: (event: SelectionChangedEvent) => void;
+    onGridReady: (event: GridReadyEvent) => void;
+    totalDataSize: number;
+    selectedItems: RSEAccountUsageLimitViewModel[];
+};
+
+const WarningCell = (props: { value: string; warn: boolean }) => {
+    const textColor = props.warn ? 'text-base-error-500 font-semibold' : '';
+    return <span className={textColor}>{props.value}</span>;
+};
+
+export const CreateRuleStageStorageTable: React.FC<StageStorageTableProps> = ({ ...props }) => {
+    const tableRef = useRef<AgGridReact<RSEAccountUsageLimitViewModel>>(null);
+
+    // TODO: these should be calculated on the client side
+    const [columnDefs] = useState([
+        {
+            headerName: 'Name',
+            field: 'rse',
+            minWidth: 250,
+            flex: 1,
+            filter: true,
+            filterParams: DefaultTextFilterParams,
+        },
+        {
+            headerName: 'Quota',
+            field: 'bytes_limit',
+            cellRenderer: (params: ICellRendererParams) => {
+                const item: RSEAccountUsageLimitViewModel = params.data;
+                const value = params.value < 0 ? 'No quota' : formatFileSize(params.value);
+                return <WarningCell warn={!item.has_quota} {...params} value={value} />;
+            },
+            colSpan: (params: ColSpanParams) => {
+                // Take up all the subsequent columns
+                return params.data.bytes_limit < 0 ? 3 : 1;
+            },
+            minWidth: 200,
+            maxWidth: 200,
+        },
+        {
+            headerName: 'Total usage',
+            // TODO: for some reason total expected usage doesn't include the passed DIDs...
+            field: 'used_bytes',
+            cellRenderer: (params: ICellRendererParams) => {
+                const item: RSEAccountUsageLimitViewModel = params.data;
+                // Aggregating usage
+                const value = formatFileSize(item.used_bytes + props.totalDataSize);
+                return <WarningCell warn={!item.has_quota} {...params} value={value} />;
+            },
+            minWidth: 200,
+            maxWidth: 200,
+        },
+        {
+            headerName: 'Remaining',
+            field: 'bytes_remaining',
+            cellRenderer: (params: ICellRendererParams) => {
+                const item: RSEAccountUsageLimitViewModel = params.data;
+                const value = formatFileSize(item.bytes_remaining - props.totalDataSize);
+                return <WarningCell warn={!item.has_quota} {...params} value={value} />;
+            },
+            minWidth: 200,
+            maxWidth: 200,
+        },
+    ]);
+
+    const onGridReady = (event: GridReadyEvent) => {
+        props.onGridReady(event);
+        event.api.applyColumnState({
+            state: [
+                {
+                    colId: 'bytes_remaining',
+                    sort: 'desc',
+                },
+            ],
+        });
+    };
+
+    useEffect(() => {
+        if (props.streamingHook.status === StreamingStatus.STOPPED) {
+            const updateSelection = () => {
+                tableRef.current?.api?.forEachNode(node => {
+                    const model: RSEAccountUsageLimitViewModel = node.data;
+                    const selected = props.selectedItems.some(element => element.rse === model.rse);
+                    node.setSelected(selected);
+                });
+            };
+
+            setTimeout(updateSelection, 100);
+        }
+    }, [props.streamingHook.status]);
+
+    return <StreamedTable columnDefs={columnDefs} rowSelection="multiple" tableRef={tableRef} {...props} onGridReady={onGridReady} />;
+};
diff --git a/src/component-library/pages/Rule/create/stage-submission/CreateRuleStageSubmission.tsx b/src/component-library/pages/Rule/create/stage-submission/CreateRuleStageSubmission.tsx
new file mode 100644
index 000000000..b7ab28dbd
--- /dev/null
+++ b/src/component-library/pages/Rule/create/stage-submission/CreateRuleStageSubmission.tsx
@@ -0,0 +1,121 @@
+import { CreateRuleParameters, CreateRuleViewModel } from '@/lib/infrastructure/data/view-model/rule';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { useToast } from '@/lib/infrastructure/hooks/useToast';
+import Link from 'next/link';
+
+type CreateRuleStageSubmissionProps = {
+    parameters: CreateRuleParameters;
+    removeSaved: () => void;
+};
+
+const OR_SYMBOL = '|';
+
+export const CreateRuleStageSubmission = ({ parameters, removeSaved }: CreateRuleStageSubmissionProps) => {
+    const queryCreateRule = async () => {
+        const rseExpression = parameters.rses.map(rse => rse.rse).join(OR_SYMBOL);
+        const body = JSON.stringify({
+            dids: parameters.dids.map(did => ({
+                scope: did.scope,
+                name: did.name,
+            })),
+            copies: parameters.copies,
+            rse_expression: rseExpression,
+            grouping: parameters.grouping?.toUpperCase(),
+            lifetime_days: parameters.daysLifetime,
+            notify: parameters.notify,
+            comments: parameters.comments,
+            ask_approval: parameters.askApproval,
+            asynchronous: parameters.asynchronous,
+            sample: parameters.sample,
+            sample_file_count: parameters.sampleFileCount,
+        });
+        const url = '/api/feature/create-rule';
+
+        const res = await fetch(url, {
+            method: 'POST',
+            body: body,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+
+        let json;
+
+        try {
+            json = await res.json();
+        } catch (e) {
+            throw new Error(res.statusText);
+        }
+
+        if (json.error) {
+            throw new Error(json.error);
+        }
+
+        if (json.status !== 'success' || json.rule_ids.length === 0) {
+            throw new Error(json.message);
+        }
+
+        return json;
+    };
+
+    const createQueryKey = ['create_rule'];
+    const { data, error, isFetching } = useQuery<CreateRuleViewModel, string>({
+        queryKey: createQueryKey,
+        queryFn: queryCreateRule,
+        enabled: true,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+        refetchOnMount: false,
+        retry: false,
+    });
+
+    const { toast } = useToast();
+
+    useEffect(() => {
+        if (error) {
+            toast({
+                variant: 'error',
+                title: 'Fatal error',
+                description: error.toString(),
+            });
+        }
+    }, [error]);
+
+    const getErrorComponent = () => {
+        const button = (
+            <span
+                className="cursor-pointer hover:text-brand-500"
+                onClick={() => {
+                    location.reload();
+                }}
+            >
+                <b>review the previous steps</b>
+            </span>
+        );
+        return <span className="text-neutral-900 dark:text-neutral-100">Could not create the rule. Please {button} and try again.</span>;
+    };
+
+    useEffect(() => {
+        if (data) {
+            removeSaved();
+        }
+    }, [data]);
+
+    const getDataComponent = () => {
+        const button = (
+            <Link href="/rule/list" className="cursor-pointer hover:text-brand-500">
+                <b>rules list</b>
+            </Link>
+        );
+        return <span className="text-neutral-900 dark:text-neutral-100">Successfully requested the rule. Proceed to the {button} to view it.</span>;
+    };
+
+    return (
+        <div className="flex flex-col w-full grow justify-center items-center">
+            {isFetching && <span>Creating...</span>}
+            {error && getErrorComponent()}
+            {data && getDataComponent()}
+        </div>
+    );
+};
diff --git a/src/component-library/pages/Rule/create/stage-summary/CreateRuleStageSummary.tsx b/src/component-library/pages/Rule/create/stage-summary/CreateRuleStageSummary.tsx
new file mode 100644
index 000000000..d98073351
--- /dev/null
+++ b/src/component-library/pages/Rule/create/stage-summary/CreateRuleStageSummary.tsx
@@ -0,0 +1,130 @@
+import { CreateRuleParameters } from '@/lib/infrastructure/data/view-model/rule';
+import { InfoField } from '@/component-library/features/fields/InfoField';
+import { CreateRuleTableWrapper } from '@/component-library/pages/Rule/create/CreateRuleTableWrapper';
+import { CreateRuleStageSummaryDataTable } from '@/component-library/pages/Rule/create/stage-summary/CreateRuleStageSummaryDataTable';
+import { CreateRuleStageSummaryStorageTable } from '@/component-library/pages/Rule/create/stage-summary/CreateRuleStageSummaryStorageTable';
+import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
+import { KeyValueRow } from '@/component-library/features/key-value/KeyValueRow';
+import { Field } from '@/component-library/atoms/misc/Field';
+import { KeyValueWrapper } from '@/component-library/features/key-value/KeyValueWrapper';
+import { formatFileSize } from '@/component-library/features/utils/text-formatters';
+import Checkbox from '@/component-library/atoms/form/Checkbox';
+import { Heading } from '@/component-library/atoms/misc/Heading';
+
+const KeyValueDIDs = ({ dids }: { dids: ListDIDsViewModel[] }) => {
+    const totalFiles = dids.reduce((previous, current) => previous + current.length, 0);
+    const totalBytes = dids.reduce((previous, current) => previous + current.bytes, 0);
+
+    return (
+        <KeyValueWrapper className="overflow-x-auto py-2">
+            <KeyValueRow name="Total files">
+                <Field>{totalFiles}</Field>
+            </KeyValueRow>
+            <KeyValueRow name="Total size">
+                <Field>{formatFileSize(totalBytes)}</Field>
+            </KeyValueRow>
+        </KeyValueWrapper>
+    );
+};
+
+const KeyValueOptions = ({ parameters }: { parameters: CreateRuleParameters }) => {
+    const hasSampling = parameters.sample && parameters.sampleFileCount;
+
+    return (
+        <KeyValueWrapper className="overflow-x-auto py-2">
+            {parameters.daysLifetime && (
+                <KeyValueRow name="Lifetime">
+                    <Field>{parameters.daysLifetime} days</Field>
+                </KeyValueRow>
+            )}
+            <KeyValueRow name="Notifications">
+                <Checkbox checked={parameters.notify} />
+            </KeyValueRow>
+            <KeyValueRow name="Asynchronous">
+                <Checkbox checked={parameters.asynchronous} />
+            </KeyValueRow>
+            {parameters.grouping && (
+                <KeyValueRow name="Group by">
+                    <Field>{parameters.grouping}</Field>
+                </KeyValueRow>
+            )}
+            {parameters.comments && (
+                <KeyValueRow name="Comment">
+                    <Field>{parameters.comments}</Field>
+                </KeyValueRow>
+            )}
+            {hasSampling && (
+                <KeyValueRow name="Files to sample">
+                    <Field>{parameters.sampleFileCount}</Field>
+                </KeyValueRow>
+            )}
+        </KeyValueWrapper>
+    );
+};
+
+type CreateRuleStageSummaryProps = {
+    parameters: CreateRuleParameters;
+};
+
+export const CreateRuleStageSummary = ({ parameters }: CreateRuleStageSummaryProps) => {
+    const getDefaultDataInfoField = () => {
+        const plural = parameters.dids.length > 1 ? 's' : '';
+        const sample = parameters.sample ? <b>samples of</b> : '';
+
+        let text;
+        if (parameters.askApproval) {
+            text = (
+                <span>
+                    This request will <b>ask for approval</b> to create a rule for {sample} the following DID{plural}.
+                </span>
+            );
+        } else {
+            text = (
+                <span>
+                    This request will create a rule for {sample} the following DID{plural}.
+                </span>
+            );
+        }
+
+        return <InfoField>{text}</InfoField>;
+    };
+
+    const getDefaultStorageInfoField = () => {
+        const pluralRules = parameters.dids.length > 1 ? 's' : '';
+        const pluralStorage = parameters.rses.length > 1 ? 's' : '';
+
+        return (
+            <InfoField>
+                <span>
+                    The rule{pluralRules} will replicate to one of the following RSE{pluralStorage}.
+                </span>
+            </InfoField>
+        );
+    };
+
+    return (
+        <div className="flex flex-col space-y-3 w-full grow">
+            <Heading text="DIDs" size="md" />
+            {getDefaultDataInfoField()}
+            {parameters.dids.some(did => did.open) && (
+                <InfoField>
+                    <span>
+                        There are open DIDs present in your request. Everything that will be added to them after you created the rule will also be
+                        transferred to the selected RSEs.
+                    </span>
+                </InfoField>
+            )}
+            <CreateRuleTableWrapper>
+                <CreateRuleStageSummaryDataTable rowData={parameters.dids} copies={parameters.copies} />
+            </CreateRuleTableWrapper>
+            <KeyValueDIDs dids={parameters.dids} />
+            <Heading text="RSEs" size="md" />
+            {getDefaultStorageInfoField()}
+            <CreateRuleTableWrapper>
+                <CreateRuleStageSummaryStorageTable rowData={parameters.rses} />
+            </CreateRuleTableWrapper>
+            <Heading text="Options" size="md" />
+            <KeyValueOptions parameters={parameters} />
+        </div>
+    );
+};
diff --git a/src/component-library/pages/Rule/create/stage-summary/CreateRuleStageSummaryDataTable.tsx b/src/component-library/pages/Rule/create/stage-summary/CreateRuleStageSummaryDataTable.tsx
new file mode 100644
index 000000000..e2f9cb9f4
--- /dev/null
+++ b/src/component-library/pages/Rule/create/stage-summary/CreateRuleStageSummaryDataTable.tsx
@@ -0,0 +1,88 @@
+import React, { useRef, useState } from 'react';
+import { ValueFormatterParams, ValueGetterParams } from 'ag-grid-community';
+import { AgGridReact } from 'ag-grid-react';
+import { formatFileSize } from '@/component-library/features/utils/text-formatters';
+import { RegularTable } from '@/component-library/features/table/RegularTable/RegularTable';
+import { DIDTypeBadge } from '@/component-library/features/badges/DID/DIDTypeBadge';
+import { badgeCellClasses, badgeCellWrapperStyle } from '@/component-library/features/table/cells/badge-cell';
+import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
+import { CheckboxCell, checkboxCellWrapperStyle } from '@/component-library/features/table/cells/CheckboxCell';
+
+type StageSummaryDataTableProps = {
+    rowData: ListDIDsViewModel[];
+    copies: number;
+};
+
+export const CreateRuleStageSummaryDataTable = (props: StageSummaryDataTableProps) => {
+    const tableRef = useRef<AgGridReact<ListDIDsViewModel>>(null);
+
+    const [columnDefs] = useState([
+        {
+            headerName: 'Identifier',
+            valueGetter: (params: ValueGetterParams<ListDIDsViewModel>) => `${params.data?.scope}:${params.data?.name}`,
+            minWidth: 250,
+            flex: 1,
+            sortable: false,
+        },
+        {
+            headerName: 'Type',
+            field: 'did_type',
+            cellRenderer: DIDTypeBadge,
+            minWidth: 180,
+            maxWidth: 180,
+            cellStyle: badgeCellWrapperStyle,
+            cellRendererParams: {
+                className: badgeCellClasses,
+            },
+            sortable: false,
+        },
+        {
+            headerName: 'Copies',
+            valueGetter: () => props.copies,
+            minWidth: 100,
+            maxWidth: 100,
+            sortable: false,
+        },
+        {
+            headerName: 'Files',
+            field: 'length',
+            minWidth: 100,
+            maxWidth: 100,
+            sortable: false,
+        },
+        {
+            headerName: 'Size',
+            field: 'bytes',
+            valueFormatter: (params: ValueFormatterParams) => {
+                return formatFileSize(params.value);
+            },
+            minWidth: 200,
+            maxWidth: 200,
+            sortable: false,
+        },
+        {
+            headerName: 'Requested Size',
+            valueGetter: (params: ValueGetterParams<ListDIDsViewModel>) => {
+                if (params.data?.bytes) {
+                    return formatFileSize(params.data?.bytes * props.copies);
+                } else {
+                    return formatFileSize(NaN);
+                }
+            },
+            minWidth: 200,
+            maxWidth: 200,
+            sortable: false,
+        },
+        {
+            headerName: 'Is Open',
+            field: 'open',
+            cellStyle: checkboxCellWrapperStyle,
+            cellRenderer: CheckboxCell,
+            minWidth: 100,
+            maxWidth: 100,
+            sortable: false,
+        },
+    ]);
+
+    return <RegularTable columnDefs={columnDefs} tableRef={tableRef} {...props} />;
+};
diff --git a/src/component-library/pages/Rule/create/stage-summary/CreateRuleStageSummaryStorageTable.tsx b/src/component-library/pages/Rule/create/stage-summary/CreateRuleStageSummaryStorageTable.tsx
new file mode 100644
index 000000000..ad009bdac
--- /dev/null
+++ b/src/component-library/pages/Rule/create/stage-summary/CreateRuleStageSummaryStorageTable.tsx
@@ -0,0 +1,60 @@
+import React, { useRef, useState } from 'react';
+import { DefaultTextFilterParams } from '@/component-library/features/utils/filter-parameters';
+import { ColSpanParams, ICellRendererParams } from 'ag-grid-community';
+import { AgGridReact } from 'ag-grid-react';
+import { formatFileSize } from '@/component-library/features/utils/text-formatters';
+import { RSEAccountUsageLimitViewModel } from '@/lib/infrastructure/data/view-model/rse';
+import { RegularTable } from '@/component-library/features/table/RegularTable/RegularTable';
+
+type StageSummaryStageTableProps = {
+    rowData: RSEAccountUsageLimitViewModel[];
+};
+
+const WarningCell = (props: { value: string; warn: boolean }) => {
+    const textColor = props.warn ? 'text-base-error-500 font-semibold' : '';
+    return <span className={textColor}>{props.value}</span>;
+};
+
+export const CreateRuleStageSummaryStorageTable: React.FC<StageSummaryStageTableProps> = ({ ...props }) => {
+    const tableRef = useRef<AgGridReact<RSEAccountUsageLimitViewModel>>(null);
+
+    // TODO: these should be calculated on the client side
+    const [columnDefs] = useState([
+        {
+            headerName: 'Name',
+            field: 'rse',
+            minWidth: 250,
+            flex: 1,
+            filter: true,
+            filterParams: DefaultTextFilterParams,
+        },
+        {
+            headerName: 'Quota',
+            field: 'bytes_limit',
+            cellRenderer: (params: ICellRendererParams) => {
+                const item: RSEAccountUsageLimitViewModel = params.data;
+                const value = params.value < 0 ? 'No quota' : formatFileSize(params.value);
+                return <WarningCell warn={!item.has_quota} {...params} value={value} />;
+            },
+            colSpan: (params: ColSpanParams) => {
+                // Take up all the subsequent columns
+                return params.data.bytes_limit < 0 ? 2 : 1;
+            },
+            minWidth: 200,
+            maxWidth: 200,
+        },
+        {
+            headerName: 'Remaining',
+            field: 'bytes_remaining',
+            cellRenderer: (params: ICellRendererParams) => {
+                const item: RSEAccountUsageLimitViewModel = params.data;
+                const value = formatFileSize(item.bytes_remaining);
+                return <WarningCell warn={!item.has_quota} {...params} value={value} />;
+            },
+            minWidth: 200,
+            maxWidth: 200,
+        },
+    ]);
+
+    return <RegularTable tableRef={tableRef} columnDefs={columnDefs} {...props} />;
+};
diff --git a/src/component-library/pages/Rule/list/ListRule.stories.tsx b/src/component-library/pages/Rule/list/ListRule.stories.tsx
index 14624ffdd..8281c5dd7 100644
--- a/src/component-library/pages/Rule/list/ListRule.stories.tsx
+++ b/src/component-library/pages/Rule/list/ListRule.stories.tsx
@@ -8,6 +8,9 @@ import { getMockStreamEndpoint } from '@/test/mocks/handlers/streaming-handlers'
 export default {
     title: 'Components/Pages/Rule/List',
     component: ListRule,
+    parameters: {
+        docs: { disable: true },
+    },
 } as Meta<typeof ListRule>;
 
 const Template: StoryFn<typeof ListRule> = args => (
diff --git a/src/component-library/pages/Rule/list/ListRule.tsx b/src/component-library/pages/Rule/list/ListRule.tsx
index b8e9da80b..53a2f5838 100644
--- a/src/component-library/pages/Rule/list/ListRule.tsx
+++ b/src/component-library/pages/Rule/list/ListRule.tsx
@@ -1,14 +1,11 @@
-import { ChangeEvent, useEffect, useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import { RuleViewModel } from '@/lib/infrastructure/data/view-model/rule';
-import useChunkedStream, { StreamingStatus } from '@/lib/infrastructure/hooks/useChunkedStream';
-import { GridApi, GridReadyEvent } from 'ag-grid-community';
-import { useToast } from '@/lib/infrastructure/hooks/useToast';
-import { BaseViewModelValidator } from '@/component-library/features/utils/BaseViewModelValidator';
-import { alreadyStreamingToast, noApiToast } from '@/component-library/features/utils/list-toasts';
+import { StreamingStatus } from '@/lib/infrastructure/hooks/useStreamReader';
 import { Heading } from '@/component-library/atoms/misc/Heading';
 import { Input } from '@/component-library/atoms/form/input';
 import { SearchButton } from '@/component-library/features/search/SearchButton';
 import { ListRuleTable } from '@/component-library/pages/Rule/list/ListRuleTable';
+import useTableStreaming from '@/lib/infrastructure/hooks/useTableStreaming';
 
 type ListRuleProps = {
     initialData?: RuleViewModel[];
@@ -17,63 +14,23 @@ type ListRuleProps = {
 const DEFAULT_SCOPE = '*';
 
 export const ListRule = (props: ListRuleProps) => {
-    const streamingHook = useChunkedStream<RuleViewModel>();
     const [scope, setScope] = useState<string>(DEFAULT_SCOPE);
-    const [gridApi, setGridApi] = useState<GridApi<RuleViewModel> | null>(null);
-
-    const { toast, dismiss } = useToast();
-    const validator = new BaseViewModelValidator(toast);
-
-    const onGridReady = (event: GridReadyEvent) => {
-        setGridApi(event.api);
-    };
-
-    useEffect(() => {
-        if (props.initialData) {
-            onData(props.initialData);
-        }
-    }, [gridApi]);
-
-    const onData = (data: RuleViewModel[]) => {
-        const validData = data.filter(element => validator.isValid(element));
-        gridApi?.applyTransactionAsync({ add: validData });
-    };
-
-    const startStreaming = () => {
-        if (gridApi) {
-            dismiss();
-            gridApi.flushAsyncTransactions();
-            gridApi.setGridOption('rowData', []);
-            validator.reset();
-
-            const url = `/api/feature/list-rules?scope=${scope}`;
-            streamingHook.start({ url, onData });
-        } else {
-            toast(noApiToast);
-        }
-    };
-
-    const isRunning = streamingHook.status === StreamingStatus.RUNNING;
 
     const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
         const value = event.target.value;
         setScope(value !== '' ? value : DEFAULT_SCOPE);
     };
 
+    const { onGridReady, streamingHook, startStreaming, stopStreaming } = useTableStreaming<RuleViewModel>(props.initialData);
+
     const onSearch = (event: any) => {
         event.preventDefault();
-        if (!isRunning) {
-            startStreaming();
-        } else {
-            toast(alreadyStreamingToast);
-        }
+        startStreaming(`/api/feature/list-rules?scope=${scope}`);
     };
 
     const onStop = (event: any) => {
         event.preventDefault();
-        if (isRunning) {
-            streamingHook.stop();
-        }
+        stopStreaming();
     };
 
     return (
@@ -83,7 +40,7 @@ export const ListRule = (props: ListRuleProps) => {
                 <div className="text-neutral-900 dark:text-neutral-100">Scope</div>
                 <div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2 items-center sm:items-start">
                     <Input className="w-full sm:flex-grow" onChange={onInputChange} onEnterKey={onSearch} placeholder={DEFAULT_SCOPE} />
-                    <SearchButton isRunning={isRunning} onStop={onStop} onSearch={onSearch} />
+                    <SearchButton isRunning={streamingHook.status === StreamingStatus.RUNNING} onStop={onStop} onSearch={onSearch} />
                 </div>
             </div>
             <ListRuleTable streamingHook={streamingHook} onGridReady={onGridReady} />
diff --git a/src/component-library/pages/Rule/list/ListRuleTable.tsx b/src/component-library/pages/Rule/list/ListRuleTable.tsx
index 8321f6ebb..5c4b66a35 100644
--- a/src/component-library/pages/Rule/list/ListRuleTable.tsx
+++ b/src/component-library/pages/Rule/list/ListRuleTable.tsx
@@ -1,18 +1,18 @@
 import React, { useRef, useState } from 'react';
 import { AgGridReact } from 'ag-grid-react';
-import { UseChunkedStream } from '@/lib/infrastructure/hooks/useChunkedStream';
+import { UseStreamReader } from '@/lib/infrastructure/hooks/useStreamReader';
 import { StreamedTable } from '@/component-library/features/table/StreamedTable/StreamedTable';
 import { ClickableCell } from '@/component-library/features/table/cells/ClickableCell';
 import { badgeCellClasses, badgeCellWrapperStyle } from '@/component-library/features/table/cells/badge-cell';
 import { DefaultTextFilterParams, DefaultDateFilterParams, buildDiscreteFilterParams } from '@/component-library/features/utils/filter-parameters';
-import { GridReadyEvent, ValueFormatterParams } from 'ag-grid-community';
+import { GridReadyEvent, ValueFormatterParams, ValueGetterParams } from 'ag-grid-community';
 import { RuleViewModel } from '@/lib/infrastructure/data/view-model/rule';
 import { formatDate, formatSeconds } from '@/component-library/features/utils/text-formatters';
 import { RuleStateBadge } from '@/component-library/features/badges/Rule/RuleStateBadge';
 import { RuleState } from '@/lib/core/entity/rucio';
 
 type ListRuleTableProps = {
-    streamingHook: UseChunkedStream<RuleViewModel>;
+    streamingHook: UseStreamReader<RuleViewModel>;
     onGridReady: (event: GridReadyEvent) => void;
 };
 
@@ -33,9 +33,12 @@ export const ListRuleTable = (props: ListRuleTableProps) => {
             cellRenderer: ClickableId,
         },
         {
-            headerName: 'Name',
-            field: 'name',
+            headerName: 'DID',
+            valueGetter: (params: ValueGetterParams<RuleViewModel>) => {
+                return params.data?.scope + ':' + params.data?.name;
+            },
             minWidth: 150,
+            flex: 1,
             filter: true,
             filterParams: DefaultTextFilterParams,
         },
@@ -50,6 +53,7 @@ export const ListRuleTable = (props: ListRuleTableProps) => {
             headerName: 'RSE',
             field: 'rse_expression',
             minWidth: 150,
+            flex: 1,
             filter: true,
             filterParams: DefaultTextFilterParams,
         },
diff --git a/src/component-library/pages/legacy/Dashboard/Dashboard.stories.tsx b/src/component-library/pages/legacy/Dashboard/Dashboard.stories.tsx
deleted file mode 100644
index aecb40654..000000000
--- a/src/component-library/pages/legacy/Dashboard/Dashboard.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Role } from '@/lib/core/entity/account';
-import { StoryFn, Meta } from '@storybook/react';
-import { fixtureOngoingrules, fixtureUsedquota } from '@/test/fixtures/widget-fixtures';
-import { Dashboard as D } from './Dashboard';
-
-export default {
-    title: 'Components/Pages/Dashboard',
-    component: D,
-} as Meta<typeof D>;
-
-const Template: StoryFn<typeof D> = args => <D {...args} />;
-
-export const Dashboard = Template.bind({});
-Dashboard.args = {
-    accountname: 'test',
-    accountrole: Role.ADMIN,
-    inputOngoingrules: Array.from({ length: 20 }, (v, k) => fixtureOngoingrules()),
-    inputUsedquota: Array.from({ length: 20 }, (v, k) => fixtureUsedquota()),
-};
diff --git a/src/component-library/pages/legacy/Dashboard/Dashboard.tsx b/src/component-library/pages/legacy/Dashboard/Dashboard.tsx
deleted file mode 100644
index eae43fb11..000000000
--- a/src/component-library/pages/legacy/Dashboard/Dashboard.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { twMerge } from 'tailwind-merge';
-import { H3 } from '../../../atoms/legacy/text/headings/H3/H3';
-import { H4 } from '../../../atoms/legacy/text/headings/H4/H4';
-import { P } from '../../../atoms/legacy/text/content/P/P';
-import { Checkbox } from '../../../atoms/legacy/Checkbox/Checkbox';
-import { WidgetOngoingrules } from './Widgets/WidgetOngoingrules';
-import { RoleTag } from '@/component-library/features/legacy/Tags/RoleTag';
-import { Role } from '@/lib/core/entity/account';
-import { Ongoingrules, Usedquota } from '@/lib/core/entity/widgets';
-import { WidgetUsedquota } from './Widgets/WidgetUsedquota';
-import { useState, useEffect } from 'react';
-import { Heading } from '@/component-library/pages/legacy/Helpers/Heading';
-import { Body } from '@/component-library/pages/legacy/Helpers/Body';
-
-interface PageDashboardProps {
-    accountname: string;
-    accountrole: Role;
-    inputOngoingrules: Ongoingrules[];
-    inputUsedquota: Usedquota[];
-}
-
-type WidgetVisibility = {
-    ongoingrules: boolean;
-    usedquota: boolean;
-};
-
-export const Dashboard = (props: PageDashboardProps) => {
-    const [widgetVisibility, setWidgetVisibility] = useState<WidgetVisibility>({
-        ongoingrules: true,
-        usedquota: true,
-    });
-    return (
-        <div className={twMerge('flex flex-col space-y-2 w-full')}>
-            <Heading title="Dashboard" subtitle={`Overview for ${props.accountname}`} tag={<RoleTag role={props.accountrole} />} />
-            <div className={twMerge('flex flex-col space-y-2', 'rounded-md p-2 border', 'bg-neutral-0 dark:bg-neutral-800')}>
-                <div aria-label="Widgets" className="flex flex-col space-y-2">
-                    <WidgetOngoingrules input={props.inputOngoingrules} className={widgetVisibility.ongoingrules ? '' : 'hidden'} />
-                    <WidgetUsedquota input={props.inputUsedquota} className={widgetVisibility.usedquota ? '' : 'hidden'} />
-                </div>
-                <form className={twMerge('bg-neutral-200 dark:bg-neutral-900 p-2 rounded-md')} aria-label="Select Widgets" id="select-widgets-panel">
-                    <label htmlFor="select-widget-panel">
-                        <P className="font-bold text-text-1000 dark:text-text-0">Select Widgets</P>
-                    </label>
-                    <div className={twMerge('grid gap-y-0', 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3')}>
-                        <Checkbox
-                            label="Ongoing Rules"
-                            checked={widgetVisibility.ongoingrules}
-                            onChange={e => {
-                                setWidgetVisibility({ ...widgetVisibility, ongoingrules: e.target.checked });
-                            }}
-                        />
-                        <Checkbox
-                            label="Top Quota Overview"
-                            checked={widgetVisibility.usedquota}
-                            onChange={e => {
-                                setWidgetVisibility({ ...widgetVisibility, usedquota: e.target.checked });
-                            }}
-                        />
-                    </div>
-                </form>
-            </div>
-        </div>
-    );
-};
diff --git a/src/component-library/pages/legacy/Dashboard/Widgets/WidgetOngoingrules.stories.tsx b/src/component-library/pages/legacy/Dashboard/Widgets/WidgetOngoingrules.stories.tsx
deleted file mode 100644
index 55a5e8293..000000000
--- a/src/component-library/pages/legacy/Dashboard/Widgets/WidgetOngoingrules.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { StoryFn, Meta } from '@storybook/react';
-import { fixtureOngoingrules } from '@/test/fixtures/widget-fixtures';
-import { WidgetOngoingrules as W } from './WidgetOngoingrules';
-
-export default {
-    title: 'Components/Pages/Dashboard/Widgets',
-    component: W,
-} as Meta<typeof W>;
-
-const Template: StoryFn<typeof W> = args => <W {...args} />;
-
-export const WidgetOngoingrules = Template.bind({});
-WidgetOngoingrules.args = {
-    input: Array.from({ length: 10 }, (v, k) => fixtureOngoingrules()),
-};
diff --git a/src/component-library/pages/legacy/Dashboard/Widgets/WidgetOngoingrules.tsx b/src/component-library/pages/legacy/Dashboard/Widgets/WidgetOngoingrules.tsx
deleted file mode 100644
index 72ceeed33..000000000
--- a/src/component-library/pages/legacy/Dashboard/Widgets/WidgetOngoingrules.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import { H3 } from '@/component-library/atoms/legacy/text/headings/H3/H3.stories';
-import { P } from '@/component-library/atoms/legacy/text/content/P/P';
-import { twMerge } from 'tailwind-merge';
-import { Bar } from 'react-chartjs-2';
-import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
-import { ChartData } from '../types';
-import { Ongoingrules } from '@/lib/core/entity/widgets';
-import { createColumnHelper, getCoreRowModel, getPaginationRowModel, useReactTable, Row, Column, getSortedRowModel } from '@tanstack/react-table';
-import { useEffect, useState } from 'react';
-import { TableSortUpDown } from '@/component-library/features/legacy/StreamedTables/TableSortUpDown.stories';
-import tailwind from '@/tailwind';
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
-
-ChartJS.defaults.font.size = 14;
-ChartJS.defaults.font.family = 'mono';
-
-type ChartDataNumeric = {
-    label: string;
-    backgroundColor: string; // Hex
-    data: number[];
-};
-
-export const WidgetColourLabel: React.FC<
-    JSX.IntrinsicElements['div'] & {
-        name: string;
-        colour: string; // needs to be valid Tailwind Classname
-    }
-> = ({ name, colour, ...props }) => {
-    const { className, ...otherprops } = props;
-    return (
-        <div className={twMerge('flex flex-row space-x-1 items-center', className ?? '')} {...otherprops}>
-            <div className={twMerge('w-6 h-4', colour)} />
-            <P>{name}</P>
-        </div>
-    );
-};
-
-export const WidgetOngoingrules: React.FC<
-    JSX.IntrinsicElements['div'] & {
-        input: Ongoingrules[];
-    }
-> = ({ input, ...props }) => {
-    /*
-     * This is a widget that displays the ongoing rules in a stacked bar chart.
-     * The input is an array of Ongoingrules objects, containing the rulename
-     * as well as the absolute amount of locks in each state.
-     * The widget displays the percentage of locks in each state for each rule.
-     * The colours correspond to those used in the LockStateTag.
-     */
-    const { className, ...otherprops } = props;
-    const [data, setData] = useState<ChartData<ChartDataNumeric>>({
-        labels: [],
-        datasets: [],
-    });
-    const isDarkMode = () => window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-        location.reload();
-    });
-
-    const options = {
-        indexAxis: 'y' as const,
-        responsive: true,
-        scales: {
-            x: {
-                display: true,
-                title: {
-                    display: true,
-                    text: 'Percentage [%]',
-                    color: isDarkMode() ? tailwind.theme.extend.colors.text[200] : tailwind.theme.extend.colors.text[900],
-                },
-                stacked: true,
-                min: 0,
-                max: 100,
-                ticks: {
-                    color: isDarkMode() ? tailwind.theme.extend.colors.text[200] : tailwind.theme.extend.colors.text[900],
-                },
-            },
-            y: {
-                stacked: true,
-                ticks: {
-                    autoSkip: false,
-                    color: isDarkMode() ? tailwind.theme.extend.colors.text[200] : tailwind.theme.extend.colors.text[900],
-                },
-            },
-        },
-        plugins: {
-            legend: {
-                display: false,
-            },
-            title: {
-                display: false,
-                text: 'Locks of Ongoing Rules',
-                font: {
-                    size: 18,
-                },
-                color: '#000',
-            },
-            tooltip: {
-                enabled: true,
-            },
-        },
-    };
-    const percentify = (v: number, row: Row<Ongoingrules>) => {
-        const totalLocks = (row.getValue('replicating') as number) + (row.getValue('ok') as number) + (row.getValue('stuck') as number);
-        return (v / totalLocks) * 100;
-    };
-
-    // TABLE
-    const columnHelper = createColumnHelper<Ongoingrules>();
-    const table = useReactTable<Ongoingrules>({
-        data: input || [],
-        columns: [
-            columnHelper.accessor('rulename', {
-                id: 'rulename',
-            }),
-            columnHelper.accessor(row => (100 * row.ok) / (row.ok + row.replicating + row.stuck), {
-                id: 'ok',
-            }),
-            columnHelper.accessor(row => (100 * row.replicating) / (row.ok + row.replicating + row.stuck), {
-                id: 'replicating',
-            }),
-            columnHelper.accessor(row => (100 * row.stuck) / (row.ok + row.replicating + row.stuck), {
-                id: 'stuck',
-            }),
-        ],
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-    });
-
-    const tableToChart = () => {
-        const rows = table.getRowModel().rows;
-        return {
-            labels: rows.map(row => row.getValue('rulename')),
-            datasets: [
-                {
-                    label: 'OK',
-                    data: rows.map(row => percentify(row.getValue('ok'), row)),
-                    backgroundColor: tailwind.theme.extend.colors.base.success[300],
-                },
-                {
-                    label: 'Replicating',
-                    data: rows.map(row => percentify(row.getValue('replicating'), row)),
-                    backgroundColor: tailwind.theme.extend.colors.base.warning[300],
-                },
-                {
-                    label: 'Stuck',
-                    data: rows.map(row => percentify(row.getValue('stuck'), row)),
-                    backgroundColor: tailwind.theme.extend.colors.base.error[400],
-                },
-            ],
-        } as ChartData<ChartDataNumeric>;
-    };
-
-    useEffect(() => {
-        setData(tableToChart());
-    }, [table, table.getRowModel()]);
-
-    return (
-        <div className={twMerge('flex flex-col items-center')}>
-            <div className={twMerge('flex flex-col items-center space-y-2')}>
-                <H3 className="font-bold text-text-1000 dark:text-text-100">Locks of Ongoing Rules</H3>
-                <div className={twMerge('flex flex-row space-x-2')}>
-                    <TableSortUpDown
-                        name="OK"
-                        column={table.getColumn('ok') as Column<Ongoingrules, number>}
-                        element={<WidgetColourLabel name="OK" colour="bg-base-success-300" />}
-                    />
-                    <TableSortUpDown
-                        name="Replicating"
-                        column={table.getColumn('ok') as Column<Ongoingrules, number>}
-                        element={<WidgetColourLabel name="Replicating" colour="bg-base-warning-300" />}
-                    />
-                    <TableSortUpDown
-                        name="Stuck"
-                        column={table.getColumn('stuck') as Column<Ongoingrules, number>}
-                        element={<WidgetColourLabel name="Stuck" colour="bg-base-error-400" />}
-                    />
-                </div>
-            </div>
-            <Bar options={options} data={data} aria-label="Ongoing Rules Widget" />
-        </div>
-    );
-};
diff --git a/src/component-library/pages/legacy/Dashboard/Widgets/WidgetUsedquota.stories.tsx b/src/component-library/pages/legacy/Dashboard/Widgets/WidgetUsedquota.stories.tsx
deleted file mode 100644
index 8cc32ca40..000000000
--- a/src/component-library/pages/legacy/Dashboard/Widgets/WidgetUsedquota.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { StoryFn, Meta } from '@storybook/react';
-import { WidgetUsedquota as W } from './WidgetUsedquota';
-import { fixtureUsedquota } from '@/test/fixtures/widget-fixtures';
-
-export default {
-    title: 'Components/Pages/Dashboard/Widgets',
-    component: W,
-} as Meta<typeof W>;
-
-const Template: StoryFn<typeof W> = args => <W {...args} />;
-
-export const WidgetUsedquota = Template.bind({});
-WidgetUsedquota.args = {
-    input: Array.from({ length: 20 }, (v, k) => fixtureUsedquota()),
-};
diff --git a/src/component-library/pages/legacy/Dashboard/Widgets/WidgetUsedquota.tsx b/src/component-library/pages/legacy/Dashboard/Widgets/WidgetUsedquota.tsx
deleted file mode 100644
index 6cf1f28d7..000000000
--- a/src/component-library/pages/legacy/Dashboard/Widgets/WidgetUsedquota.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { H4 } from '@/component-library/atoms/legacy/text/headings/H4/H4';
-import { Usedquota } from '@/lib/core/entity/widgets';
-import { twMerge } from 'tailwind-merge';
-import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
-import { Pie } from 'react-chartjs-2';
-import { BoolTag } from '@/component-library/features/legacy/Tags/BoolTag';
-import { FileSize } from '@/component-library/atoms/legacy/text/content/FileSize/FileSize';
-import { Contenttd, Generaltable, Titleth } from '@/component-library/atoms/legacy/helpers/Metatable/Metatable';
-import tailwind from '@/tailwind';
-ChartJS.register(ArcElement, Tooltip, Legend);
-
-const RSEPie: React.FC<
-    JSX.IntrinsicElements['div'] & {
-        input: Usedquota;
-        small?: boolean;
-        hideWhenSmall?: boolean;
-    }
-> = ({ input, hideWhenSmall, small, ...props }) => {
-    const { className, id, ...otherprops } = props;
-    const data = {
-        labels: ['Used', 'Free'],
-        datasets: [
-            {
-                data: [input.used, input.quota - input.used],
-                backgroundColor: [tailwind.theme.extend.colors.brand[400], tailwind.theme.extend.colors.extra.emerald[400]],
-            },
-        ],
-    };
-
-    const isDarkMode = () => window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-    const options = {
-        plugins: {
-            legend: {
-                display: true,
-                labels: {
-                    color: isDarkMode() ? tailwind.theme.extend.colors.text[200] : tailwind.theme.extend.colors.text[900],
-                },
-            },
-        },
-    };
-    const customid = input.rse + '-piediv';
-    return (
-        <div
-            className={twMerge('h-auto', 'flex flex-col justify-start items-center', hideWhenSmall ? 'hidden md:flex' : '', className ?? '')}
-            id={customid}
-            {...otherprops}
-        >
-            <label className={twMerge('w-max')} htmlFor={customid}>
-                {input.rse}
-            </label>
-            <div className="relative flex w-full">
-                <Pie data={data} options={options} />
-            </div>
-            <Generaltable className="hidden md:table">
-                <tr>
-                    <Titleth>May Exceed Quota?</Titleth>
-                    <Contenttd>
-                        <BoolTag val={input.exceedPermission} />
-                    </Contenttd>
-                </tr>
-                <tr>
-                    <Titleth>Total Space</Titleth>
-                    <Contenttd>
-                        <FileSize bytesNumber={input.total} />
-                    </Contenttd>
-                </tr>
-                <tr>
-                    <Titleth>Space Used</Titleth>
-                    <Contenttd>
-                        <FileSize bytesNumber={input.used} />
-                    </Contenttd>
-                </tr>
-                <tr>
-                    <Titleth>Quota</Titleth>
-                    <Contenttd>
-                        <FileSize bytesNumber={input.quota} />
-                    </Contenttd>
-                </tr>
-            </Generaltable>
-        </div>
-    );
-};
-
-export const WidgetUsedquota: React.FC<
-    JSX.IntrinsicElements['div'] & {
-        input: Usedquota[];
-    }
-> = ({ input, ...props }) => {
-    const { className, ...otherprops } = props;
-
-    return (
-        <div className={twMerge('flex flex-col justify-center items-center space-y-2 p-2', className ?? '')} {...otherprops}>
-            <div>
-                <H4 className="font-bold dark:text-text-0 text-text-1000">Top Used RSEs</H4>
-            </div>
-            <div className={twMerge('grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4', 'dark:text-text-0 text-text-1000')}>
-                <RSEPie input={input[0]} />
-                <RSEPie input={input[1]} />
-                <RSEPie input={input[2]} />
-                <RSEPie input={input[3]} hideWhenSmall />
-                <RSEPie input={input[4]} hideWhenSmall />
-                <RSEPie input={input[5]} hideWhenSmall />
-            </div>
-        </div>
-    );
-};
diff --git a/src/component-library/pages/legacy/Dashboard/types.d.ts b/src/component-library/pages/legacy/Dashboard/types.d.ts
deleted file mode 100644
index 92b2bf7d2..000000000
--- a/src/component-library/pages/legacy/Dashboard/types.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
- * Widget Generics
- * These types are used to type a generic widget -> think of them as table column defs.
- */
-export type ChartBasicDataset = {
-    label: string;
-    data: any[];
-    backgroundColor?: string; // Hex
-};
-
-export type ChartData<T extends ChartBasicDataset> = {
-    labels: string[];
-    datasets: T[];
-};
diff --git a/src/component-library/pages/legacy/Layout/AccountDropdown.tsx b/src/component-library/pages/legacy/Layout/AccountDropdown.tsx
index cc757cee0..6bf1c9c42 100644
--- a/src/component-library/pages/legacy/Layout/AccountDropdown.tsx
+++ b/src/component-library/pages/legacy/Layout/AccountDropdown.tsx
@@ -120,7 +120,7 @@ export const AccountDropdown = forwardRef(function AccountDropdown(
                 <div className={twMerge('bg-neutral-200 hover:bg-base-warning-600', 'p-1', 'rounded-md')}>
                     {/* Using the <a> tag here prevents a bug with response caching */}
                     {/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
-                    <a href="/src/pages/api/auth/logout?callbackUrl=/dashboard">
+                    <a href="/api/auth/logout?callbackUrl=/dashboard">
                         <HiLogout className="text-2xl text-text-900 shrink-0" />
                     </a>
                 </div>
diff --git a/src/component-library/pages/legacy/Rule/1_DIDs/CreateRuleDIDTable.stories.tsx b/src/component-library/pages/legacy/Rule/1_DIDs/CreateRuleDIDTable.stories.tsx
deleted file mode 100644
index a4e7f123e..000000000
--- a/src/component-library/pages/legacy/Rule/1_DIDs/CreateRuleDIDTable.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { StoryFn, Meta } from '@storybook/react';
-import { CreateRuleDIDTable as C } from './CreateRuleDIDTable';
-import { fixtureListDIDViewModel, mockUseComDOM } from '@/test/fixtures/table-fixtures';
-import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
-
-export default {
-    title: 'Components/Pages/Rule',
-    component: C,
-} as Meta<typeof C>;
-
-const Template: StoryFn<typeof C> = args => <C {...args} />;
-
-export const CreateRuleDIDTable = Template.bind({});
-CreateRuleDIDTable.args = {
-    comdom: mockUseComDOM(Array.from({ length: 100 }, () => fixtureListDIDViewModel())),
-    handleChange: (data: ListDIDsViewModel[]) => {
-        console.info(data);
-    },
-};
diff --git a/src/component-library/pages/legacy/Rule/1_DIDs/CreateRuleDIDTable.tsx b/src/component-library/pages/legacy/Rule/1_DIDs/CreateRuleDIDTable.tsx
deleted file mode 100644
index 7eb6fe4e8..000000000
--- a/src/component-library/pages/legacy/Rule/1_DIDs/CreateRuleDIDTable.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { DIDType } from '@/lib/core/entity/rucio';
-import { createColumnHelper } from '@tanstack/react-table';
-import { DIDTypeTag } from '@/component-library/features/legacy/Tags/DIDTypeTag';
-import { FileSize } from '../../../../atoms/legacy/text/content/FileSize/FileSize';
-import { P } from '../../../../atoms/legacy/text/content/P/P';
-import { StreamedTable } from '@/component-library/features/legacy/StreamedTables/StreamedTable';
-import { TableFilterString } from '@/component-library/features/legacy/StreamedTables/TableFilterString';
-import { TableFilterDiscrete } from '@/component-library/features/legacy/StreamedTables/TableFilterDiscrete';
-import { HiDotsHorizontal } from 'react-icons/hi';
-import { TableSortUpDown } from '@/component-library/features/legacy/StreamedTables/TableSortUpDown';
-import { UseComDOM } from '@/lib/infrastructure/hooks/useComDOM';
-import { DIDLongViewModel } from '@/lib/infrastructure/data/view-model/did';
-import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
-
-export const CreateRuleDIDTable = (props: { comdom: UseComDOM<ListDIDsViewModel>; handleChange: (data: ListDIDsViewModel[]) => void }) => {
-    const columnHelper = createColumnHelper<DIDLongViewModel>();
-    const tablecolumns: any[] = [
-        columnHelper.display({
-            id: 'selection',
-            header: info => <span className="w-8" />,
-            cell: info => {
-                return (
-                    <span className="ml-1 w-6 sm:ml-2 sm:w-8">
-                        <input
-                            type="checkbox"
-                            disabled={!info.row.getCanSelect()}
-                            checked={info.row.getIsSelected()}
-                            onChange={e => {
-                                info.row.toggleSelected();
-                            }}
-                        />
-                    </span>
-                );
-            },
-            meta: {
-                style: 'w-6 sm:w-8',
-            },
-        }),
-        columnHelper.accessor(row => `${row.scope}:${row.name}`, {
-            id: 'did',
-            header: info => {
-                return <TableFilterString column={info.column} name="DID" />;
-            },
-            cell: info => <P className="break-all pr-1">{info.getValue()}</P>,
-        }),
-        columnHelper.accessor('did_type', {
-            id: 'did_type',
-            header: info => {
-                return (
-                    <TableFilterDiscrete<DIDType>
-                        name="DID Type"
-                        keys={[DIDType.CONTAINER, DIDType.DATASET, DIDType.FILE]}
-                        renderFunc={state =>
-                            state === undefined ? (
-                                <HiDotsHorizontal className="text-xl text-text-500 dark:text-text-200" />
-                            ) : (
-                                <DIDTypeTag didtype={state} forcesmall />
-                            )
-                        }
-                        column={info.column}
-                    />
-                );
-            },
-            cell: info => <DIDTypeTag didtype={info.row.original.did_type} />,
-            meta: {
-                style: 'w-6 sm:w-8 md:w-36',
-            },
-        }),
-        columnHelper.accessor('bytes', {
-            id: 'bytes',
-            header: info => {
-                return <TableSortUpDown name="Bytes" column={info.column} />;
-            },
-            cell: info => {
-                return (
-                    <p className="font-mono dark:text-text-200 text-text-800">
-                        <FileSize bytesNumber={info.getValue()} />
-                    </p>
-                );
-            },
-            meta: {
-                style: 'w-36',
-            },
-        }),
-    ];
-    return (
-        <StreamedTable
-            tablecomdom={props.comdom}
-            tablecolumns={tablecolumns}
-            tableselecting={{
-                handleChange: props.handleChange,
-                enableRowSelection: true,
-                enableMultiRowSelection: true,
-            }}
-        />
-    );
-};
diff --git a/src/component-library/pages/legacy/Rule/1_DIDs/CreateRuleDIDsPage.tsx b/src/component-library/pages/legacy/Rule/1_DIDs/CreateRuleDIDsPage.tsx
deleted file mode 100644
index 133939ada..000000000
--- a/src/component-library/pages/legacy/Rule/1_DIDs/CreateRuleDIDsPage.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import { Button } from '@/component-library/atoms/legacy/Button/Button';
-import { Collapsible } from '@/component-library/atoms/legacy/helpers/Collapsible/Collapsible';
-import { TextInput } from '@/component-library/atoms/legacy/input/TextInput/TextInput';
-import { Tabs } from '@/component-library/atoms/legacy/Tabs/Tabs';
-import { Label } from '@/component-library/atoms/legacy/text/content/Label/Label';
-import { P } from '@/component-library/atoms/legacy/text/content/P/P';
-import { DIDName, TypedDIDValidationResponse, TypedDIDValidationQuery } from '@/lib/infrastructure/data/view-model/create-rule';
-import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
-import { CreateRuleDIDTable } from './CreateRuleDIDTable';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { HTTPRequest } from '@/lib/sdk/http';
-import { DIDType } from '@/lib/core/entity/rucio';
-import { RulePage } from '../RulePage';
-import { CreateRulePageProps } from '../CreateRule';
-
-interface PageDIDsStateType {
-    page0progressBlocked: boolean;
-
-    // Subpage 0: DID Search Pattern
-    selectDIDMethod: number;
-    // selection by search
-    selectDIDDataPattern: string;
-    searchDIDSelection: Array<ListDIDsViewModel>;
-
-    // Subpage 1: List of DIDs
-    // selection via typing
-    typedDIDs: Array<DIDName>;
-    errorDIDs: TypedDIDValidationResponse; // validation of typed DIDs
-}
-
-export const CreateRuleDIDsPage = (props: {
-    setDIDS: any;
-    activePage: number;
-    setActivePage: Dispatch<SetStateAction<number>>;
-    CreateRulePageProps: CreateRulePageProps;
-    pagePrevFunction: (event: any) => void;
-}) => {
-    // set state to store the DID page information
-    const [PageDIDsState, setPageDIDsState] = useState<PageDIDsStateType>({
-        selectDIDMethod: 0,
-        selectDIDDataPattern: '',
-        searchDIDSelection: [],
-        typedDIDs: [],
-        errorDIDs: { ErrorList: [] },
-        page0progressBlocked: true,
-    });
-
-    useEffect(() => {
-        // set page0progressblocked to true if DID selections are empty
-        if (PageDIDsState.searchDIDSelection.length === 0 && PageDIDsState.typedDIDs.length === 0) {
-            setPageDIDsState({ ...PageDIDsState, page0progressBlocked: true });
-        } else {
-            setPageDIDsState({ ...PageDIDsState, page0progressBlocked: false });
-        }
-    }, [PageDIDsState.typedDIDs, PageDIDsState.searchDIDSelection]);
-
-    const pageDIDsSearch = async (event: any, explicitDIDSearchExpression?: string) => {
-        let DIDSearchString = explicitDIDSearchExpression ? explicitDIDSearchExpression : PageDIDsState.selectDIDDataPattern;
-        // build request for comdom
-        const request: HTTPRequest = {
-            url: new URL(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/list-dids`),
-            method: 'GET',
-            headers: new Headers({
-                'Content-Type': 'application/json',
-            } as HeadersInit),
-            params: {
-                query: DIDSearchString,
-                type: DIDType.ALL,
-            },
-        };
-        // run query
-        await props.CreateRulePageProps.didListComDOM.setRequest(request);
-        await props.CreateRulePageProps.didListComDOM.start();
-    };
-
-    const pageDIDsnextFunction = (event: any) => {
-        if (PageDIDsState.typedDIDs.length === 0) {
-            // no validation, just next page
-            props.setDIDS(PageDIDsState.searchDIDSelection);
-            props.setActivePage(props.activePage + 1);
-            return;
-        }
-        // if typedDIDs is not empty, then we need to validate the DIDs
-        var splitDIDs = PageDIDsState.typedDIDs;
-        const TypedDIDValidationQuery: TypedDIDValidationQuery = {
-            DIDList: splitDIDs,
-        };
-
-        // execute query
-        const typedDIDValidationResponse = props.CreateRulePageProps.didValidation(TypedDIDValidationQuery);
-        typedDIDValidationResponse.then(response => {
-            setPageDIDsState({ ...PageDIDsState, errorDIDs: response });
-            // need to implement a transformation to list of long dids to set in the props.setDIDS()
-            props.setActivePage(props.activePage + 1);
-        });
-        typedDIDValidationResponse.catch(error => {
-            setPageDIDsState({ ...PageDIDsState, errorDIDs: error });
-        });
-    };
-
-    return (
-        <>
-            <RulePage
-                pagenum={0}
-                allowNext={true}
-                allowPrev={false}
-                activePage={props.activePage}
-                progressBlocked={PageDIDsState.page0progressBlocked}
-                onNext={(event: any) => {
-                    pageDIDsnextFunction(event);
-                }}
-                onPrev={props.pagePrevFunction}
-            >
-                <Tabs
-                    tabs={['DID Search Pattern', 'List of DIDs']}
-                    active={PageDIDsState.selectDIDMethod}
-                    updateActive={(active: number) => {
-                        setPageDIDsState({
-                            ...PageDIDsState,
-                            selectDIDMethod: active,
-                        });
-                    }}
-                />
-                <Collapsible showIf={PageDIDsState.selectDIDMethod === 0}>
-                    <div className="flex flex-col space-y-2 m-2">
-                        <div className="flex flex-col sm:flex-row sm:items-end w-full space-y-2 sm:space-x-2">
-                            <label className="w-fit" htmlFor="did-search-pattern">
-                                <P>DID Search Pattern</P>
-                            </label>
-                            <div className="grow">
-                                <TextInput
-                                    onBlur={(event: any) => {
-                                        setPageDIDsState({
-                                            ...PageDIDsState,
-                                            selectDIDDataPattern: event.target.value,
-                                        });
-                                    }}
-                                    onEnterkey={(event: any) => {
-                                        setPageDIDsState({
-                                            ...PageDIDsState,
-                                            selectDIDDataPattern: event.target.value,
-                                        });
-                                        pageDIDsSearch(event.target.value, event.target.value);
-                                    }}
-                                    id="did-search-pattern"
-                                />
-                            </div>
-                            <div className="w-full sm:w-24 sm:grow-0">
-                                <Button type="submit" label="Search" onClick={pageDIDsSearch} id="page0-search" />
-                            </div>
-                        </div>
-                        <CreateRuleDIDTable
-                            comdom={props.CreateRulePageProps.didListComDOM}
-                            handleChange={(data: ListDIDsViewModel[]) => {
-                                setPageDIDsState({
-                                    ...PageDIDsState,
-                                    searchDIDSelection: data,
-                                });
-                            }}
-                        />
-                    </div>
-                </Collapsible>
-                <Collapsible showIf={PageDIDsState.selectDIDMethod === 1}>
-                    {/* TODO: Beta */}
-                    <div className="flex flex-col space-y-2 m-2">
-                        <Label label="dids">This feature will be released soon!</Label>
-                        {/* <Label label="dids">Data Identifiers to select:</Label>
-                            <ListInput
-                                id="dids"
-                                onAdd={(value: string) => {
-                                    setPage0State({ ...Page0State, typedDIDs: Page0State.typedDIDs.concat(value) })
-                                }}
-                                onRemove={(value: string) => {
-                                    setPage0State({ ...Page0State, typedDIDs: Page0State.typedDIDs.filter((item) => item !== value) })
-                                }}
-                                value={Page0State.typedDIDs}
-                                placeholder="Type your DIDs here"
-                            />
-                            <label htmlFor="didErrors">Errors:</label>
-                            <div
-                                id="didErrors"
-                                className="h-24 overflow-y-auto w-full border rounded-md p-2 dark:text-white dark:border-2"
-                            >
-                                <Collapsible showIf={Page0State.errorDIDs.ErrorList.length === 0}>
-                                    <p className="font-mono">{"Validate DIDs by pressing \"Next\"."}</p>
-                                </Collapsible>
-                                {Page0State.errorDIDs.ErrorList.map((element, index) => {
-                                    return (
-                                        <P mono key={index}>DID {element.DID} has Errorcodes {element.ErrorCodes}</P>
-                                    )
-                                })}
-                            </div> */}
-                    </div>
-                </Collapsible>
-            </RulePage>
-        </>
-    );
-};
diff --git a/src/component-library/pages/legacy/Rule/2_RSEs/CreateRuleRSETable.stories.tsx b/src/component-library/pages/legacy/Rule/2_RSEs/CreateRuleRSETable.stories.tsx
deleted file mode 100644
index c1e235487..000000000
--- a/src/component-library/pages/legacy/Rule/2_RSEs/CreateRuleRSETable.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { RSEAccountUsage } from '@/lib/core/entity/rucio';
-import { StoryFn, Meta } from '@storybook/react';
-import { fixtureRSEAccountUsageLimitViewModel, mockUseComDOM } from '@/test/fixtures/table-fixtures';
-import { CreateRuleRSETable as C } from './CreateRuleRSETable';
-
-export default {
-    title: 'Components/Pages/Rule',
-    component: C,
-} as Meta<typeof C>;
-
-const Template: StoryFn<typeof C> = args => <C {...args} />;
-
-export const CreateRuleRSETable = Template.bind({});
-CreateRuleRSETable.args = {
-    comdom: mockUseComDOM(Array.from({ length: 100 }, () => fixtureRSEAccountUsageLimitViewModel())),
-    handleChange: (data: RSEAccountUsage[]) => {
-        console.info(data);
-    },
-};
diff --git a/src/component-library/pages/legacy/Rule/2_RSEs/CreateRuleRSETable.tsx b/src/component-library/pages/legacy/Rule/2_RSEs/CreateRuleRSETable.tsx
deleted file mode 100644
index aed6f38ae..000000000
--- a/src/component-library/pages/legacy/Rule/2_RSEs/CreateRuleRSETable.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import { twMerge } from 'tailwind-merge';
-import { StreamedTable } from '@/component-library/features/legacy/StreamedTables/StreamedTable';
-import { createColumnHelper, Row } from '@tanstack/react-table';
-import { H3 } from '../../../../atoms/legacy/text/headings/H3/H3';
-import { P } from '../../../../atoms/legacy/text/content/P/P';
-import { FileSize } from '../../../../atoms/legacy/text/content/FileSize/FileSize';
-import { TableSortUpDown } from '@/component-library/features/legacy/StreamedTables/TableSortUpDown';
-import { useState, useEffect } from 'react';
-import { TableFilterString } from '@/component-library/features/legacy/StreamedTables/TableFilterString';
-import { UseComDOM } from '@/lib/infrastructure/hooks/useComDOM';
-import { RSEAccountUsageLimitViewModel } from '@/lib/infrastructure/data/view-model/rse';
-
-export const CreateRuleRSETable = (props: {
-    comdom: UseComDOM<RSEAccountUsageLimitViewModel>;
-    handleChange: (data: RSEAccountUsageLimitViewModel[]) => void;
-    askApproval?: boolean;
-}) => {
-    const columnHelper = createColumnHelper<RSEAccountUsageLimitViewModel>();
-    const isNoQuotaLeftFunction = (row: Row<RSEAccountUsageLimitViewModel>) => {
-        let noQuota = !row.original.has_quota;
-        return props.askApproval ? false : noQuota;
-    };
-    const tablecolumns = [
-        columnHelper.display({
-            id: 'selection',
-            header: info => <span className="w-8" />,
-            cell: info => {
-                return (
-                    <span className="ml-1 w-6 sm:ml-2 sm:w-8">
-                        <input
-                            type="checkbox"
-                            disabled={!info.row.getCanSelect()}
-                            checked={info.row.getIsSelected()}
-                            onChange={e => {
-                                info.row.toggleSelected();
-                            }}
-                        />
-                    </span>
-                );
-            },
-            meta: {
-                style: 'w-6 sm:w-8',
-            },
-        }),
-        columnHelper.accessor('rse_id', {
-            id: 'rse_id',
-            header: info => <H3 className="text-left text-text-2 dark:text-text-0">RSE ID</H3>,
-            cell: info => <P mono>{info.getValue()}</P>,
-        }),
-        columnHelper.accessor('rse', {
-            id: 'rse',
-            header: info => {
-                return <TableFilterString column={info.column} name="RSE Name" />;
-            },
-            cell: info => (
-                <P mono className="break-all text-text-1000 dark:text-text-0">
-                    {info.getValue()}
-                </P>
-            ),
-        }),
-        columnHelper.accessor('used_bytes', {
-            id: 'used_bytes',
-            header: info => {
-                return <TableSortUpDown name="Used" column={info.column} className="pl-2" stack />;
-            },
-            cell: info => {
-                // if value is greater than quota bytes, print in red
-                return (
-                    <P
-                        mono
-                        className={twMerge(
-                            isNoQuotaLeftFunction(info.row)
-                                ? 'text-base-error-500 dark:text-base-error-500 font-bold'
-                                : 'text-text-1000 dark:text-text-0',
-                            'text-right',
-                        )}
-                    >
-                        <FileSize bytesNumber={info.getValue()} />
-                    </P>
-                );
-            },
-            meta: {
-                style: 'w-24',
-            },
-        }),
-        columnHelper.accessor(row => row.bytes_remaining, {
-            id: 'remaining_bytes',
-            header: info => {
-                return <TableSortUpDown name="Remaining" column={info.column} className="pl-2" stack nocollapse />;
-            },
-            cell: info => {
-                // if value is greater than quota bytes, print in red
-                return (
-                    <P
-                        mono
-                        className={twMerge(
-                            isNoQuotaLeftFunction(info.row)
-                                ? 'text-base-error-500 dark:text-base-error-500 font-bold'
-                                : 'text-text-1000 dark:text-text-0',
-                            'text-right',
-                        )}
-                    >
-                        <FileSize bytesNumber={info.getValue()} />
-                    </P>
-                );
-            },
-            meta: {
-                style: 'w-24',
-            },
-        }),
-        columnHelper.accessor('bytes_limit', {
-            id: 'bytes_limit',
-            header: info => {
-                return <TableSortUpDown name="Quota" column={info.column} className="pl-2" stack />;
-            },
-            cell: props => {
-                return (
-                    <P mono className="text-right text-text-1000 dark:text-text-0">
-                        <FileSize bytesNumber={props.row.original.bytes_limit} />
-                    </P>
-                );
-            },
-            meta: {
-                style: 'w-24',
-            },
-        }),
-    ];
-
-    const [windowSize, setWindowSize] = useState([1920, 1080]);
-
-    useEffect(() => {
-        setWindowSize([window.innerWidth, window.innerHeight]);
-
-        const handleWindowResize = () => {
-            setWindowSize([window.innerWidth, window.innerHeight]);
-        };
-
-        window.addEventListener('resize', handleWindowResize);
-
-        return () => {
-            window.removeEventListener('resize', handleWindowResize);
-        };
-    }, []);
-    const isMd = () => windowSize[0] > 768; // 768px is the breakpoint for md => is minimum md sized
-
-    return (
-        <StreamedTable
-            tablecomdom={props.comdom}
-            tablecolumns={tablecolumns}
-            tableselecting={{
-                handleChange: props.handleChange,
-                enableRowSelection: true,
-                enableMultiRowSelection: true,
-            }}
-            tablestyling={{
-                visibility: {
-                    rse_id: false,
-                    used_bytes: isMd(),
-                    bytes_limit: isMd(),
-                },
-            }}
-        />
-    );
-};
diff --git a/src/component-library/pages/legacy/Rule/2_RSEs/CreateRuleRSEsPage.tsx b/src/component-library/pages/legacy/Rule/2_RSEs/CreateRuleRSEsPage.tsx
deleted file mode 100644
index 73ac1b1cf..000000000
--- a/src/component-library/pages/legacy/Rule/2_RSEs/CreateRuleRSEsPage.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import { RSEAccountUsageLimitViewModel } from '@/lib/infrastructure/data/view-model/rse';
-import { HTTPRequest } from '@/lib/sdk/http';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { CreateRulePageProps } from '../CreateRule';
-import { Button } from '@/component-library/atoms/legacy/Button/Button';
-import { Checkbox } from '@/component-library/atoms/legacy/Checkbox/Checkbox';
-import { TextInput } from '@/component-library/atoms/legacy/input/TextInput/TextInput';
-import { P } from '@/component-library/atoms/legacy/text/content/P/P';
-import { CreateRuleRSETable } from './CreateRuleRSETable';
-import { RulePage } from '../RulePage';
-import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
-
-interface PageRSEsState {
-    page1progressBlocked: boolean;
-    RSEExpression: string;
-    RSESelection: Array<RSEAccountUsageLimitViewModel>;
-    askForApproval: boolean;
-}
-
-export const CreateRuleRSEsPage = (props: {
-    activePage: number;
-    setActivePage: Dispatch<SetStateAction<number>>;
-    CreateRulePageProps: CreateRulePageProps;
-    selectedDIDs: ListDIDsViewModel[];
-    setRses: Dispatch<
-        SetStateAction<{
-            selectedRSEs: RSEAccountUsageLimitViewModel[];
-            askForApproval: boolean;
-        }>
-    >;
-    pagePrevFunction: (event: any) => void;
-}) => {
-    // set state to store the RSE page information
-    const [PageRSEsState, setPageRSEsState] = useState<PageRSEsState>({
-        RSEExpression: '',
-        RSESelection: [],
-        askForApproval: false,
-        page1progressBlocked: true,
-    });
-
-    useEffect(() => {
-        // set page1progressblocked to true if RSESelection is empty
-        if (PageRSEsState.RSESelection.length === 0) {
-            setPageRSEsState({ ...PageRSEsState, page1progressBlocked: true });
-        }
-        // set page1progressblocked to true if any selected RSE needs quota and Ask for Approval is not checked
-        else if (!PageRSEsState.askForApproval) {
-            let needsApproval = false;
-            PageRSEsState.RSESelection.forEach(element => {
-                if (!element.has_quota) {
-                    needsApproval = true;
-                    return;
-                }
-            });
-            if (needsApproval) {
-                setPageRSEsState({ ...PageRSEsState, page1progressBlocked: true });
-            } else {
-                setPageRSEsState({ ...PageRSEsState, page1progressBlocked: false });
-            }
-        } else if (PageRSEsState.askForApproval) {
-            setPageRSEsState({ ...PageRSEsState, page1progressBlocked: false });
-        } else {
-            setPageRSEsState({ ...PageRSEsState, page1progressBlocked: false });
-        }
-    }, [PageRSEsState.RSESelection, PageRSEsState.askForApproval]);
-
-    const pageRSESearch = async (event: any, explicitRSEExpression?: string) => {
-        // sometimes the state has not updated yet, so use explicitly passed RSEExpr
-        var RSEExpression = explicitRSEExpression ? explicitRSEExpression : PageRSEsState.RSEExpression;
-        // build request for comdom
-        const request: HTTPRequest = {
-            url: new URL(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/list-account-rse-quotas`),
-            method: 'POST',
-            headers: new Headers({
-                'Content-Type': 'application/json',
-            } as HeadersInit),
-            body: {
-                requestedDIDs: props.selectedDIDs,
-                rseExpression: RSEExpression,
-            },
-        };
-        // run query
-        await props.CreateRulePageProps.rseListComDOM.setRequest(request);
-        await props.CreateRulePageProps.rseListComDOM.start();
-    };
-
-    // function that sets RSEs information before going to the next page
-    const NextPage = (event: any) => {
-        props.setRses({ selectedRSEs: PageRSEsState.RSESelection, askForApproval: PageRSEsState.askForApproval });
-        props.setActivePage(props.activePage + 1);
-        return;
-    };
-
-    return (
-        <>
-            <RulePage
-                pagenum={1}
-                allowNext
-                allowPrev
-                activePage={props.activePage}
-                progressBlocked={PageRSEsState.page1progressBlocked}
-                onNext={NextPage}
-                onPrev={props.pagePrevFunction}
-            >
-                <div className="flex flex-col space-y-2 m-2">
-                    <div className="flex w-full flex-col space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
-                        <label className="-mb-2 sm:mt-2.5 sm:w-36" htmlFor="rse-expression">
-                            <P>RSE Expression</P>
-                        </label>
-                        <div className="grow">
-                            <TextInput
-                                id="rse-expression"
-                                onBlur={event => {
-                                    setPageRSEsState({ ...PageRSEsState, RSEExpression: event.target.value });
-                                }}
-                                onEnterkey={event => {
-                                    setPageRSEsState({ ...PageRSEsState, RSEExpression: event.target.value });
-                                    pageRSESearch(event, event.target.value);
-                                }}
-                            />
-                        </div>
-                        <div className="w-full sm:w-24">
-                            <Button type="submit" label="Search" onClick={pageRSESearch} />
-                        </div>
-                    </div>
-                    <CreateRuleRSETable
-                        comdom={props.CreateRulePageProps.rseListComDOM}
-                        handleChange={(data: RSEAccountUsageLimitViewModel[]) => {
-                            setPageRSEsState({ ...PageRSEsState, RSESelection: data });
-                        }}
-                        askApproval={PageRSEsState.askForApproval}
-                    />
-                    <div>
-                        <Checkbox
-                            label="Ask for Approval"
-                            type="checkbox"
-                            onChange={(event: any) => {
-                                setPageRSEsState({ ...PageRSEsState, askForApproval: event.target.checked });
-                            }}
-                            checked={PageRSEsState.askForApproval}
-                        />
-                    </div>
-                </div>
-            </RulePage>
-        </>
-    );
-};
diff --git a/src/component-library/pages/legacy/Rule/3_Options/CreateRuleOptionsPage.tsx b/src/component-library/pages/legacy/Rule/3_Options/CreateRuleOptionsPage.tsx
deleted file mode 100644
index a42497b16..000000000
--- a/src/component-library/pages/legacy/Rule/3_Options/CreateRuleOptionsPage.tsx
+++ /dev/null
@@ -1,244 +0,0 @@
-import { DIDType } from '@/lib/core/entity/rucio';
-import { Dispatch, SetStateAction, useState } from 'react';
-import { CreateRulePageProps } from '../CreateRule';
-import { Button } from '@/component-library/atoms/legacy/Button/Button';
-import { Checkbox } from '@/component-library/atoms/legacy/Checkbox/Checkbox';
-import { Collapsible } from '@/component-library/atoms/legacy/helpers/Collapsible/Collapsible';
-import { AreaInput } from '@/component-library/atoms/legacy/input/AreaInput/AreaInput';
-import { NumInput } from '@/component-library/atoms/legacy/input/NumInput/NumInput';
-import { SamplingTag } from '@/component-library/features/legacy/Tags/SamplingTag';
-import { Label } from '@/component-library/atoms/legacy/text/content/Label/Label';
-import { twMerge } from 'tailwind-merge';
-import { Dropdown } from '../GroupingDropdown';
-import { LifetimeWithExpirationDateInput } from '../LifetimeWithExpiryDateInput';
-import { RulePage } from '../RulePage';
-import { RuleSummaryViewModel } from '@/lib/infrastructure/data/view-model/rule';
-import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
-import { RSEAccountUsageLimitViewModel } from '@/lib/infrastructure/data/view-model/rse';
-
-interface PageOptionsState {
-    page2progressBlocked: boolean;
-    expiryDate: Date;
-    lifetime: number;
-    enableNotifications: boolean;
-    showAdvanced: boolean;
-    groupBy: DIDType;
-    asynchronousMode: boolean;
-    numcopies: number;
-    takesamples: boolean;
-    numsamples: number;
-    freeComment: string;
-}
-
-export const CreateRuleOptionsPage = (props: {
-    setSummaryViewModel: Dispatch<SetStateAction<RuleSummaryViewModel | undefined>>;
-    activePage: number;
-    setActivePage: Dispatch<SetStateAction<number>>;
-    CreateRulePageProps: CreateRulePageProps;
-    pagePrevFunction: (event: any) => void;
-    selectedDIDs: ListDIDsViewModel[];
-    RSEsInformation: {
-        selectedRSEs: RSEAccountUsageLimitViewModel[];
-        askForApproval: boolean;
-    };
-    setOptions: Dispatch<
-        SetStateAction<{
-            lifetime: number;
-            expiryDate: Date;
-            enableNotifications: boolean;
-            asynchronousMode: boolean;
-            numcopies: number;
-            takesamples: boolean;
-            numsamples: number;
-            freeComment: string;
-            groupBy: DIDType;
-        }>
-    >;
-}) => {
-    // set state to store Options page information
-    const [PageOptionsState, setPageOptionsState] = useState<PageOptionsState>({
-        expiryDate: new Date(2025, 1, 1),
-        lifetime: 0,
-        takesamples: false,
-        numsamples: -1,
-        enableNotifications: false,
-        showAdvanced: false,
-        groupBy: DIDType.DATASET,
-        asynchronousMode: false,
-        numcopies: 1,
-        freeComment: '',
-        page2progressBlocked: false,
-    });
-
-    // Load the Summary view model
-    const loadRuleSummaryPage = () => {
-        const fetchSummaryRequest: RuleSummaryViewModel = {
-            status: 'success',
-            RSEViewModels: props.RSEsInformation.selectedRSEs,
-            DIDViewModels: props.selectedDIDs,
-            expirydate: PageOptionsState.expiryDate,
-            lifetime: PageOptionsState.lifetime,
-            notifications: PageOptionsState.enableNotifications,
-            asynchronousMode: PageOptionsState.asynchronousMode,
-            numcopies: PageOptionsState.numcopies,
-            takeSamples: PageOptionsState.takesamples,
-            numsamples: PageOptionsState.numsamples,
-            groupby: PageOptionsState.groupBy,
-            comment: PageOptionsState.freeComment,
-            approval: props.RSEsInformation.askForApproval,
-            accountInfo: props.CreateRulePageProps.accountInfo,
-        };
-        console.log(fetchSummaryRequest);
-        props.setOptions({
-            lifetime: PageOptionsState.lifetime,
-            expiryDate: PageOptionsState.expiryDate,
-            enableNotifications: PageOptionsState.enableNotifications,
-            asynchronousMode: PageOptionsState.asynchronousMode,
-            numcopies: PageOptionsState.numcopies,
-            takesamples: PageOptionsState.takesamples,
-            numsamples: PageOptionsState.numsamples,
-            groupBy: PageOptionsState.groupBy,
-            freeComment: PageOptionsState.freeComment,
-        });
-        props.setSummaryViewModel(fetchSummaryRequest);
-        props.setActivePage(3);
-    };
-
-    return (
-        <>
-            <RulePage
-                pagenum={2}
-                allowNext
-                allowPrev
-                activePage={props.activePage}
-                progressBlocked={PageOptionsState.page2progressBlocked}
-                onNext={() => {
-                    loadRuleSummaryPage();
-                }}
-                onPrev={props.pagePrevFunction}
-            >
-                <div className="flex md:flex-row md:space-x-2 flex-col space-y-2 m-2">
-                    <div className="flex flex-col space-y-2 md:w-60 w-full">
-                        <div className="w-full">
-                            <Label label="expiryDate">Lifetime and Expiry Date</Label>
-                            <LifetimeWithExpirationDateInput
-                                initialdate={PageOptionsState.expiryDate}
-                                placeholder="Rule Expiry Date"
-                                onChange={(date: Date, lifetime: number) => {
-                                    setPageOptionsState({ ...PageOptionsState, expiryDate: date, lifetime: lifetime });
-                                }}
-                            />
-                        </div>
-                        <div className="w-full">
-                            <Label label="numCopies">Number of Copies</Label>
-                            <NumInput
-                                value={PageOptionsState.numcopies}
-                                min={1}
-                                onChange={(event: any) => {
-                                    setPageOptionsState({ ...PageOptionsState, numcopies: event.target.value });
-                                }}
-                                id="numCopies"
-                            />
-                        </div>
-                        <div className="w-full">
-                            <Checkbox
-                                type="checkbox"
-                                label="Enable Notifications"
-                                onChange={(event: any) => {
-                                    setPageOptionsState({ ...PageOptionsState, enableNotifications: event.target.checked });
-                                }}
-                                checked={PageOptionsState.enableNotifications}
-                            />
-                        </div>
-                    </div>
-                    <div className="border rounded-md p-2 grow">
-                        <div className="flex w-full justify-start space-x-2">
-                            <div className="w-24">
-                                <Button
-                                    label="Advanced"
-                                    onClick={() => {
-                                        setPageOptionsState({ ...PageOptionsState, showAdvanced: !PageOptionsState.showAdvanced });
-                                    }}
-                                />
-                            </div>
-                            <SamplingTag sampling={PageOptionsState.takesamples} />
-                        </div>
-                        <Collapsible showIf={PageOptionsState.showAdvanced}>
-                            <div className="flex flex-col space-y-2 mt-2">
-                                <div className="w-full">
-                                    <label className="hidden" htmlFor="item-grouping-dropdown">
-                                        Item Grouping
-                                    </label>
-                                    <Dropdown
-                                        handleChange={(element: any) => {
-                                            setPageOptionsState({ ...PageOptionsState, groupBy: element });
-                                        }}
-                                        id="item-grouping-dropdown"
-                                    />
-                                </div>
-                                <div className="">
-                                    <Checkbox
-                                        type="checkbox"
-                                        label="Asynchronous Mode"
-                                        onChange={(event: any) => {
-                                            setPageOptionsState({ ...PageOptionsState, asynchronousMode: event.target.checked });
-                                        }}
-                                        checked={PageOptionsState.asynchronousMode}
-                                    />
-                                </div>
-                                <div className="w-full">
-                                    <Label label="freecomment">Add free comment</Label>
-                                    <AreaInput
-                                        id="freecomment"
-                                        rows={3}
-                                        onChange={event => {
-                                            setPageOptionsState({ ...PageOptionsState, freeComment: event.target.value });
-                                        }}
-                                        content={PageOptionsState.freeComment}
-                                    />
-                                </div>
-                                <div
-                                    className={twMerge(
-                                        'flex flex-col border rounded-sm p-2',
-                                        PageOptionsState.takesamples ? 'bg-brand-300 dark:bg-brand-600' : 'bg-neutral-100 dark:bg-neutral-800',
-                                    )}
-                                >
-                                    <div className="flex flex-row justify-start space-x-2">
-                                        <input
-                                            type="checkbox"
-                                            className="cursor-pointer"
-                                            checked={PageOptionsState.takesamples}
-                                            onChange={event => {
-                                                if (PageOptionsState.takesamples) {
-                                                    setPageOptionsState({ ...PageOptionsState, numsamples: -1, takesamples: false });
-                                                } else {
-                                                    setPageOptionsState({ ...PageOptionsState, numsamples: 1, takesamples: true });
-                                                }
-                                            }}
-                                            id="create-sample"
-                                        />
-                                        <label htmlFor="create-sample" className="text-text-1000 dark:text-text-100">
-                                            Create Sample
-                                        </label>
-                                    </div>
-                                    <div className="grow flex flex-col justify-end">
-                                        <Label label="numSamples">Number of Samples</Label>
-                                        <NumInput
-                                            value={PageOptionsState.numsamples}
-                                            onChange={(event: any) => {
-                                                setPageOptionsState({ ...PageOptionsState, numsamples: event.target.value });
-                                            }}
-                                            id="numSamples"
-                                            min={1}
-                                            disabled={!PageOptionsState.takesamples}
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-                        </Collapsible>
-                    </div>
-                </div>
-            </RulePage>
-        </>
-    );
-};
diff --git a/src/component-library/pages/legacy/Rule/4_Summary/CreateRuleSummaryPage.tsx b/src/component-library/pages/legacy/Rule/4_Summary/CreateRuleSummaryPage.tsx
deleted file mode 100644
index d26f80c8c..000000000
--- a/src/component-library/pages/legacy/Rule/4_Summary/CreateRuleSummaryPage.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { DIDType } from '@/lib/core/entity/rucio';
-import { Dispatch, SetStateAction } from 'react';
-import { RulePage } from '../RulePage';
-import { SummaryPage } from './SummaryPage';
-import { RuleSummaryViewModel } from '@/lib/infrastructure/data/view-model/rule';
-import { CreateRulePageProps } from '../CreateRule';
-import { TCreateRuleFeatureRequestParams } from '@/pages/api/feature/create-rule';
-import { RSEAccountUsageLimitViewModel } from '@/lib/infrastructure/data/view-model/rse';
-import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
-
-export const CreateRuleSummaryPage = (props: {
-    activePage: number;
-    setActivePage: Dispatch<SetStateAction<number>>;
-    summaryViewModel: RuleSummaryViewModel | undefined;
-    CreateRulePageProps: CreateRulePageProps;
-    selectedDIDs: ListDIDsViewModel[];
-    RSEsInformation: {
-        selectedRSEs: RSEAccountUsageLimitViewModel[];
-        askForApproval: boolean;
-    };
-    Options: {
-        lifetime: number;
-        expiryDate: Date;
-        enableNotifications: boolean;
-        asynchronousMode: boolean;
-        numcopies: number;
-        takesamples: boolean;
-        numsamples: number;
-        freeComment: string;
-        groupBy: DIDType;
-    };
-    pagePrevFunction: (event: any) => void;
-    setQueryResults: any;
-}) => {
-    // Submits the Rule request and loads the query status
-    const submitRuleRequestAndLoadStatus = async (event: any) => {
-        props.setQueryResults({ rules: [], status: 'pending' });
-        props.setActivePage(4);
-        const createRulesRequest: TCreateRuleFeatureRequestParams = {
-            RSEViewModels: props.RSEsInformation.selectedRSEs,
-            DIDViewModels: props.selectedDIDs,
-            lifetime: props.Options.lifetime,
-            expirydate: props.Options.expiryDate,
-            notifications: props.Options.enableNotifications,
-            asynchronousMode: props.Options.asynchronousMode,
-            numcopies: props.Options.numcopies,
-            numsamples: props.Options.numsamples,
-            groupby: props.Options.groupBy,
-            comment: props.Options.freeComment,
-            approval: props.RSEsInformation.askForApproval,
-        };
-
-        const response = await props.CreateRulePageProps.onSubmit(createRulesRequest);
-        props.setQueryResults(response);
-    };
-
-    return (
-        <>
-            <RulePage
-                pagenum={3}
-                activePage={props.activePage}
-                allowNext
-                allowPrev
-                onNext={submitRuleRequestAndLoadStatus}
-                onPrev={props.pagePrevFunction}
-                submit
-            >
-                <SummaryPage
-                    data={
-                        props.summaryViewModel
-                            ? props.summaryViewModel
-                            : {
-                                  status: 'error',
-                                  message: 'Please check your inputs on previous pages! Cannot retrieve summary from the server',
-                                  RSEViewModels: [],
-                                  DIDViewModels: [],
-                                  expirydate: new Date(2025, 1, 1),
-                                  lifetime: 0,
-                                  notifications: false,
-                                  asynchronousMode: false,
-                                  numcopies: 0,
-                                  takeSamples: false,
-                                  numsamples: 0,
-                                  groupby: DIDType.UNKNOWN,
-                                  comment: '',
-                                  approval: false,
-                                  accountInfo: props.CreateRulePageProps.accountInfo,
-                              }
-                    }
-                />
-            </RulePage>
-        </>
-    );
-};
diff --git a/src/component-library/pages/legacy/Rule/4_Summary/DIDSummaryTable.stories.tsx b/src/component-library/pages/legacy/Rule/4_Summary/DIDSummaryTable.stories.tsx
deleted file mode 100644
index 87827a102..000000000
--- a/src/component-library/pages/legacy/Rule/4_Summary/DIDSummaryTable.stories.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { AccountStatus, AccountType, DIDType } from '@/lib/core/entity/rucio';
-import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
-import { Meta, StoryFn } from '@storybook/react';
-import { DIDSummaryTable } from './DIDSummaryTable';
-
-export default {
-    title: 'Components/Pages/Rule/DIDSummaryTable',
-    component: DIDSummaryTable,
-} as Meta<typeof DIDSummaryTable>;
-
-const template: StoryFn<typeof DIDSummaryTable> = args => <DIDSummaryTable {...args} />;
-
-export const DIDSummaryTableStory = template.bind({});
-
-DIDSummaryTableStory.args = {
-    numSamples: 1,
-    takeSamples: false,
-    accountInfo: {
-        account: 'test',
-        accountType: AccountType.USER,
-        accountStatus: AccountStatus.ACTIVE,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-        email: '',
-    },
-    numcopies: 1,
-    userAskedForApproval: false,
-    listDIDViewModels: [
-        {
-            status: 'success',
-            scope: 'test',
-            name: 'test',
-            did_type: DIDType.DATASET,
-            bytes: 123123123123,
-            length: 4,
-            open: false,
-        } as ListDIDsViewModel,
-    ],
-};
diff --git a/src/component-library/pages/legacy/Rule/4_Summary/DIDSummaryTable.tsx b/src/component-library/pages/legacy/Rule/4_Summary/DIDSummaryTable.tsx
deleted file mode 100644
index 04c662c8c..000000000
--- a/src/component-library/pages/legacy/Rule/4_Summary/DIDSummaryTable.tsx
+++ /dev/null
@@ -1,309 +0,0 @@
-import { NormalTable } from '@/component-library/features/legacy/StreamedTables/NormalTable';
-import { createColumnHelper } from '@tanstack/react-table';
-import { BasicStatusTag, BasicStatusTagProps } from '@/component-library/features/legacy/Tags/BasicStatusTag';
-import { P } from '@/component-library/atoms/legacy/text/content/P/P';
-import { TableSortUpDown } from '@/component-library/features/legacy/StreamedTables/TableSortUpDown';
-import { FileSize } from '@/component-library/atoms/legacy/text/content/FileSize/FileSize';
-import { twMerge } from 'tailwind-merge';
-import { generateDerivedDIDName, generateNewScope } from '@/lib/core/utils/did-utils';
-import { AccountInfo, DID } from '@/lib/core/entity/rucio';
-import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
-import { SamplingTag } from '@/component-library/features/legacy/Tags/SamplingTag';
-
-export type TDIDSummaryTableRowProps = {
-    name: string;
-    copies: number;
-    files: number;
-    size: number | '-';
-    requestedSize: number | '-';
-    tags: BasicStatusTagProps[];
-};
-export const DIDSummaryTable = (props: {
-    numSamples: number;
-    takeSamples: boolean;
-    userAskedForApproval: boolean;
-    listDIDViewModels: ListDIDsViewModel[];
-    numcopies: number;
-    accountInfo: AccountInfo;
-}) => {
-    const generateDIDSummaryTableData = (): TDIDSummaryTableRowProps[] => {
-        if (!props.takeSamples) {
-            return props.listDIDViewModels.map((did: ListDIDsViewModel, index) => {
-                const showOpenBadge = did.open;
-                const badges: BasicStatusTagProps[] = [];
-                if (showOpenBadge) {
-                    badges.push({
-                        text: 'Open',
-                        status: 'warning',
-                    });
-                }
-                return {
-                    name: `${did.scope}:${did.name}`,
-                    copies: props.numcopies,
-                    size: did.bytes,
-                    files: did.length,
-                    requestedSize: props.numcopies * did.bytes,
-                    tags: badges,
-                } as TDIDSummaryTableRowProps;
-            });
-        }
-        const accountType = props.accountInfo.accountType;
-        const account = props.accountInfo.account;
-        const newScope = generateNewScope(account, accountType);
-        const tableData: TDIDSummaryTableRowProps[] = [];
-        props.listDIDViewModels.forEach((did: ListDIDsViewModel, index) => {
-            const derivedDID: DID = generateDerivedDIDName(newScope, did);
-            tableData.push({
-                name: `${derivedDID.scope}:${derivedDID.name}`,
-                copies: props.numcopies,
-                files: props.numSamples,
-                size: '-',
-                requestedSize: `-`,
-                tags: [
-                    {
-                        text: 'Derived',
-                        status: 'info',
-                    },
-                ],
-            });
-        });
-        return tableData;
-    };
-    const generateMessages = () => {
-        const messages: string[] = [];
-        const multiDID = props.listDIDViewModels.length > 1;
-        const openDIDs = props.listDIDViewModels.filter(did => did.open);
-        if (props.takeSamples) {
-            if (props.userAskedForApproval) {
-                messages.push(`You have asked for approval to create a rule for the following sample dataset(s) with ${props.numSamples} file(s).`);
-            } else {
-                messages.push(`This will create a rule for following sample dataset(s) with ${props.numSamples} file(s).`);
-            }
-        } else {
-            messages.push('This  will create a rule for' + (multiDID ? ' the DIDs listed below' : ' the DID shown below.'));
-            if (openDIDs.length > 0) {
-                messages.push(
-                    'There are open DIDs present in your request. Everything that will be added to them after you created the rule will also be transferred to the selected RSE.',
-                );
-            }
-        }
-        if (props.userAskedForApproval) {
-            if (multiDID) {
-                messages.push(
-                    'You have asked for approval for Multiple DIDs. This request will create a new container and will put all of the following DIDs into it. The rule will be created on the new container.',
-                );
-            } else {
-                messages.push('You have asked for approval to create this rule.');
-            }
-        }
-
-        return messages;
-    };
-
-    const tabledata = generateDIDSummaryTableData();
-    const messages = generateMessages();
-
-    const totalFiles: number = tabledata.reduce((sum, row) => {
-        if (typeof row.files !== 'number') {
-            return parseInt(row.files) + sum; // For some reason, the type of row.files is string | number
-        }
-        return sum + row.files;
-    }, 0);
-
-    const totalSize: number | '-' = props.takeSamples
-        ? '-'
-        : tabledata.reduce((sum, row) => {
-              return typeof row.size === 'number' ? sum + row.size : sum;
-          }, 0);
-    const totalRequestedSize: number | '-' = props.takeSamples
-        ? '-'
-        : tabledata.reduce((sum, row) => {
-              return typeof row.requestedSize === 'number' ? sum + row.requestedSize : sum;
-          }, 0);
-
-    const columnHelper = createColumnHelper<TDIDSummaryTableRowProps>();
-    const tablecolumns: any[] = [
-        columnHelper.accessor('name', {
-            id: 'did',
-            header: info => {
-                return (
-                    <div className="text-xl text-left text-text-100">
-                        <span>DID</span>
-                    </div>
-                );
-            },
-            cell: info => (
-                <div className="flex flex-col items-left px-2">
-                    <P className="break-all pr-1 text-text-1000 dark:text-text-100">{info.getValue()}</P>
-                </div>
-            ),
-            meta: {
-                style: 'min-w-100',
-            },
-        }),
-        columnHelper.accessor('copies', {
-            id: 'copies',
-            header: info => {
-                return (
-                    <div className="text-left text-xl text-text-100">
-                        <span>Copies</span>
-                    </div>
-                );
-            },
-            cell: info => (
-                <div className="flex flex-col items-center w-36 px-2">
-                    <span className="text-left w-36 text-text-1000 dark:text-text-100">{info.getValue()}</span>
-                </div>
-            ),
-            meta: {
-                style: 'w-36',
-            },
-        }),
-        columnHelper.accessor('files', {
-            id: 'files',
-            header: info => {
-                return <TableSortUpDown name="Files" column={info.column} className="px-2 text-text-100" />;
-            },
-            cell: info => (
-                <div className={twMerge('flex flex-col items-left', 'text-left dark:text-text-100 text-text-1000', 'w-24 px-2')}>
-                    <span>{info.getValue()}</span>
-                </div>
-            ),
-            meta: {
-                style: 'w-24',
-            },
-        }),
-        columnHelper.accessor('size', {
-            id: 'size',
-            header: info => {
-                return <TableSortUpDown name="Size" column={info.column} className="px-2 text-text-100" />;
-            },
-            cell: info => {
-                const value = info.getValue();
-                if (value === '-') {
-                    return (
-                        <div className="flex flex-col items-justify text-center text-text-1000 dark:text-text-100 px-2">
-                            <span className="">-</span>
-                        </div>
-                    );
-                }
-                return (
-                    <div className={twMerge('flex flex-col items-left', 'text-right text-text-1000 dark:text-text-100')}>
-                        <FileSize bytesNumber={value} />
-                    </div>
-                );
-            },
-            meta: {
-                style: 'w-24',
-            },
-        }),
-        columnHelper.accessor('requestedSize', {
-            id: 'requestedSize',
-            header: info => {
-                return (
-                    <div className="flex flex-row items-justify">
-                        <TableSortUpDown name="Requested Size" column={info.column} className="px-2 text-text-100" />
-                    </div>
-                );
-            },
-            cell: info => {
-                const value = info.getValue();
-                if (value === '-') {
-                    return (
-                        <div className="flex flex-col items-justify text-center text-text-1000 dark:text-text-100 px-2">
-                            <span className="">-</span>
-                        </div>
-                    );
-                }
-                return (
-                    <div className={twMerge('flex flex-col items-left', 'text-right text-text-1000 dark:text-text-100')}>
-                        <FileSize bytesNumber={value} />
-                    </div>
-                );
-            },
-            meta: {
-                style: 'w-64',
-            },
-        }),
-        columnHelper.accessor('tags', {
-            id: 'tags',
-            header: info => {
-                return <span className="text-xl text-text-100">Tags</span>;
-            },
-            cell: info => {
-                return (
-                    <div className="flex flex-col items-center">
-                        {info.getValue().map((tagProps, idx) => {
-                            return <BasicStatusTag key={idx} {...tagProps} />;
-                        })}
-                    </div>
-                );
-            },
-        }),
-    ];
-
-    return (
-        <div className="flex flex-col space-y-4">
-            <div className="flex justify-start space-x-2">
-                <h1 className={twMerge('text-2xl font-bold text-black dark:text-white')}>DID Overview</h1>
-                <SamplingTag sampling={props.takeSamples} />
-            </div>
-            <div>
-                <div className={twMerge('px-2 mx-2 rounded border dark:border-0', 'bg-neutral-200 dark:bg-neutral-800', 'dark:text-text-100')}>
-                    <ul className="">
-                        {messages.map((message, index) => {
-                            return (
-                                <li key={index} className="pl-5 list-disc">
-                                    {message}
-                                </li>
-                            );
-                        })}
-                    </ul>
-                </div>
-            </div>
-            <NormalTable<TDIDSummaryTableRowProps>
-                className="w-full rounded-md"
-                tabledata={tabledata}
-                tablecolumns={tablecolumns}
-                tablestyling={{
-                    tableHeadRowStyle: 'border-b border-neutral-300 bg-neutral-700 dark:bg-neutral-800 text-text-1000',
-                    tableBodyRowStyle: twMerge(
-                        'bg-white odd:bg-stone-100 text-black',
-                        'dark:bg-neutral-700 odd:dark:bg-neutral-800 dark:text-text-100',
-                        'border-b border-neutral-300',
-                    ),
-                }}
-            />
-            <div className="">
-                <table
-                    className={twMerge(
-                        'w-full rounded-md table-fixed relative',
-                        'bg-neutral-0 dark:bg-neutral-700',
-                        'text-text-800 dark:text-text-100',
-                    )}
-                >
-                    <tbody>
-                        <tr className="text-text-1000 dark:text-text-0">
-                            <th className="w-56 pl-2 py-2 text-left text-text-1000 dark:text-text-0">Parameter</th>
-                            <th className="pl-2 py-2 text-left">Value</th>
-                        </tr>
-                        <tr className="border-t dark:border-neutral-400 text-text-1000 dark:text-text-0">
-                            <td className="w-56 pl-2 py-1">Total Files</td>
-                            <td className="pl-2 py-1">{totalFiles}</td>
-                        </tr>
-                        <tr className="border-t dark:border-neutral-400 text-text-1000 dark:text-text-0">
-                            <td className="w-56 pl-2 py-1">Total Size</td>
-                            <td className="pl-2 py-1">{typeof totalSize === 'number' ? <FileSize bytesNumber={totalSize} /> : totalSize}</td>
-                        </tr>
-                        <tr className="border-t dark:border-neutral-400 text-text-1000 dark:text-text-0">
-                            <td className="w-56 pl-2 py-1">Total Requested Size</td>
-                            <td className="pl-2 py-1">
-                                {typeof totalRequestedSize === 'number' ? <FileSize bytesNumber={totalRequestedSize} /> : totalRequestedSize}
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    );
-};
diff --git a/src/component-library/pages/legacy/Rule/4_Summary/RSESummaryTable.tsx b/src/component-library/pages/legacy/Rule/4_Summary/RSESummaryTable.tsx
deleted file mode 100644
index 55cbb0288..000000000
--- a/src/component-library/pages/legacy/Rule/4_Summary/RSESummaryTable.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { NormalTable } from '@/component-library/features/legacy/StreamedTables/NormalTable';
-import { TableSortUpDown } from '@/component-library/features/legacy/StreamedTables/TableSortUpDown';
-import { BasicStatusTag, BasicStatusTagProps } from '@/component-library/features/legacy/Tags/BasicStatusTag';
-import { P } from '@/component-library/atoms/legacy/text/content/P/P';
-import { RSEAccountUsageLimitViewModel } from '@/lib/infrastructure/data/view-model/rse';
-import { createColumnHelper } from '@tanstack/react-table';
-import { twMerge } from 'tailwind-merge';
-import { FileSize } from '@/component-library/atoms/legacy/text/content/FileSize/FileSize';
-
-type TRSESummaryTableRow = {
-    rseName: string;
-    remainingBytes: number;
-    quota: number;
-    hasQuota: boolean;
-    tags: BasicStatusTagProps[];
-};
-
-export const RSESummaryTable = (props: { rseAccountUsageLimitViewModels: RSEAccountUsageLimitViewModel[] }) => {
-    const generateTableData = () => {
-        return props.rseAccountUsageLimitViewModels.map((rseAccountUsageLimitViewModel: RSEAccountUsageLimitViewModel) => {
-            const badges: BasicStatusTagProps[] = [];
-            if (!rseAccountUsageLimitViewModel.has_quota) {
-                badges.push({
-                    text: 'No Quota',
-                    status: 'error',
-                });
-            }
-            return {
-                rseName: rseAccountUsageLimitViewModel.rse,
-                hasQuota: rseAccountUsageLimitViewModel.has_quota,
-                remainingBytes: rseAccountUsageLimitViewModel.bytes_remaining,
-                quota: rseAccountUsageLimitViewModel.bytes_limit,
-                tags: badges,
-            } as TRSESummaryTableRow;
-        });
-    };
-    const generateMessages = () => {
-        const messages: string[] = [];
-        const multiRSE: boolean = props.rseAccountUsageLimitViewModels.length > 1;
-        if (multiRSE) {
-            messages.push('The rule will replicate on one of the following RSEs.');
-        } else {
-            messages.push('The rule will replicate on the following RSE.');
-        }
-        return messages;
-    };
-
-    const tableData = generateTableData();
-    const messages = generateMessages();
-    const columnHelper = createColumnHelper<TRSESummaryTableRow>();
-    const tablecolumns: any[] = [
-        columnHelper.accessor('rseName', {
-            id: 'rseName',
-            header: info => {
-                return <div className={twMerge('text-xl text-left', 'text-text-0')}>RSE</div>;
-            },
-            cell: info => {
-                return (
-                    <div className={twMerge('text-left', 'dark:text-text-0 text-text-1000')}>
-                        <P>{info.getValue()}</P>
-                    </div>
-                );
-            },
-            meta: {
-                style: 'w-64',
-            },
-        }),
-        columnHelper.accessor('remainingBytes', {
-            id: 'remainingBytes',
-            header: info => {
-                return <TableSortUpDown name="Remaining" column={info.column} className="px-2 text-cente text-text-0" />;
-            },
-            cell: info => {
-                const value = info.getValue();
-                return (
-                    <div className={twMerge('flex flex-col items-left', 'text-left dark:text-text-0 text-text-1000')}>
-                        <FileSize bytesNumber={value} />
-                    </div>
-                );
-            },
-            meta: {
-                style: 'w-48',
-            },
-        }),
-        columnHelper.accessor('quota', {
-            id: 'quota',
-            header: info => {
-                return <TableSortUpDown name="Quota" column={info.column} className="px-2 text-text-0" />;
-            },
-            cell: info => {
-                const value = info.getValue();
-                return (
-                    <div className={twMerge('flex flex-col items-left', 'text-left', 'dark:text-text-0 text-text-1000')}>
-                        <FileSize bytesNumber={value} />
-                    </div>
-                );
-            },
-            meta: {
-                style: 'w-48',
-            },
-        }),
-        columnHelper.accessor('tags', {
-            id: 'tags',
-            header: info => {
-                return <span className="text-xl text-text-0">Tags</span>;
-            },
-            cell: info => {
-                return (
-                    <div className="flex flex-col items-center">
-                        {info.getValue().map((tagProps, idx) => {
-                            return <BasicStatusTag key={idx} {...tagProps} />;
-                        })}
-                    </div>
-                );
-            },
-            meta: {
-                style: 'w-48',
-            },
-        }),
-    ];
-    return (
-        <div className="flex flex-col space-y-4">
-            <div className="flex justify-start space-x-2">
-                <h1 className={twMerge('text-2xl font-bold dark:text-text-0 text-text-1000')}>RSE Overview</h1>
-            </div>
-            <div
-                className={twMerge('px-2 mx-2 rounded border dark:border-0', 'bg-neutral-200 dark:bg-neutral-800', 'dark:text-text-0 text-text-1000')}
-            >
-                <ul className="">
-                    {messages.map((message, index) => {
-                        return (
-                            <li key={index} className="pl-5 list-disc">
-                                {message}
-                            </li>
-                        );
-                    })}
-                </ul>
-            </div>
-            <NormalTable<TRSESummaryTableRow>
-                tablecolumns={tablecolumns}
-                tabledata={tableData}
-                tablestyling={{
-                    tableHeadRowStyle: 'border-b border-gray-300 bg-gray-700 dark:bg-gray-800',
-                    tableBodyRowStyle: twMerge(
-                        'bg-neutral-0 odd:bg-neutral-100 text-text-1000',
-                        'dark:bg-neutral-700 odd:dark:bg-neutral-800 dark:text-text-100',
-                        'border-b border-neutral-300',
-                    ),
-                }}
-            />
-        </div>
-    );
-};
diff --git a/src/component-library/pages/legacy/Rule/4_Summary/SummaryPage.stories.tsx b/src/component-library/pages/legacy/Rule/4_Summary/SummaryPage.stories.tsx
deleted file mode 100644
index 36d24f7a7..000000000
--- a/src/component-library/pages/legacy/Rule/4_Summary/SummaryPage.stories.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { AccountStatus, AccountType } from '@/lib/core/entity/rucio';
-import { RuleSummaryViewModel } from '@/lib/infrastructure/data/view-model/rule';
-import { Meta, StoryFn } from '@storybook/react';
-import { fixtureListDIDViewModel, fixtureRSEAccountUsageLimitViewModel } from '@/test/fixtures/table-fixtures';
-import { SummaryPage as SP } from './SummaryPage';
-
-export default {
-    title: 'Components/Pages/Rule/Components',
-    component: SP,
-} as Meta<typeof SP>;
-
-const Template: StoryFn<typeof SP> = args => <SP {...args} />;
-
-export const SummaryPage = Template.bind({});
-SummaryPage.args = {
-    data: {
-        status: 'success',
-        DIDViewModels: [fixtureListDIDViewModel(), fixtureListDIDViewModel()],
-        RSEViewModels: [fixtureRSEAccountUsageLimitViewModel()],
-        expirydate: new Date(),
-        notifications: false,
-        asynchronousMode: false,
-        numcopies: 0,
-        numsamples: -1,
-        groupby: 'File',
-        comment: '',
-        accountInfo: {
-            account: 'root',
-            accountType: AccountType.USER,
-            email: '',
-            createdAt: new Date().toISOString(),
-            updatedAt: new Date().toISOString(),
-            accountStatus: AccountStatus.ACTIVE,
-        },
-        lifetime: 100,
-        takeSamples: false,
-        approval: true,
-    } as RuleSummaryViewModel,
-};
diff --git a/src/component-library/pages/legacy/Rule/4_Summary/SummaryPage.tsx b/src/component-library/pages/legacy/Rule/4_Summary/SummaryPage.tsx
deleted file mode 100644
index e8b7297fc..000000000
--- a/src/component-library/pages/legacy/Rule/4_Summary/SummaryPage.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { BoolTag } from '@/component-library/features/legacy/Tags/BoolTag';
-import { twMerge } from 'tailwind-merge';
-import { DIDTypeTag } from '@/component-library/features/legacy/Tags/DIDTypeTag';
-import { RuleSummaryViewModel } from '@/lib/infrastructure/data/view-model/rule';
-import { DIDSummaryTable, TDIDSummaryTableRowProps } from './DIDSummaryTable';
-import { RSESummaryTable } from './RSESummaryTable';
-import { DIDLong } from '@/lib/core/entity/rucio';
-import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
-
-var format = require('date-format');
-
-const OptionTD = (props: { children: any }): JSX.Element => <td className="pl-2 py-1">{props.children}</td>;
-
-export const SummaryPage = (props: { data: RuleSummaryViewModel }) => {
-    const sampleFiles = props.data.numsamples;
-    const lifetime = (props.data.expirydate.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24);
-    const lifetimeDays = Math.floor(lifetime) > 0 ? Math.floor(lifetime) : 1;
-    const userAskedForApproval = props.data.approval;
-
-    return (
-        <div className={twMerge('flex flex-col space-y-4', 'p-2', 'bg-neutral-0 dark:bg-neutral-800')}>
-            <div className={twMerge('flex flex-row space-x-2', 'p-2', 'rounded-md border', 'dark:border-2')}>
-                <DIDSummaryTable
-                    listDIDViewModels={props.data.DIDViewModels as ListDIDsViewModel[]}
-                    numSamples={sampleFiles}
-                    takeSamples={props.data.takeSamples}
-                    accountInfo={props.data.accountInfo}
-                    numcopies={props.data.numcopies}
-                    userAskedForApproval={userAskedForApproval}
-                />
-            </div>
-
-            <div className={twMerge('flex flex-row space-x-2', 'p-2', 'rounded-md border', 'dark:border-2')}>
-                <RSESummaryTable rseAccountUsageLimitViewModels={props.data.RSEViewModels} />
-            </div>
-            <div className={twMerge('bg-neutral-100 dark:bg-neutral-800', 'border dark:border-2', 'rounded-md', 'flex flex-col', 'pb-2')}>
-                <div className="flex flex-row">
-                    <h3 className="text-2xl font-bold p-2 text-text-800 dark:text-text-0">Options</h3>
-                </div>
-                <div className="px-2">
-                    <table
-                        className={twMerge('w-full rounded-md table-fixed', 'bg-neutral-0 dark:bg-neutral-700', 'text-text-800 dark:text-text-100')}
-                    >
-                        <tbody>
-                            <tr className="text-text-1000 dark:text-text-0">
-                                <th className="w-56 pl-2 py-2 text-left">Parameter</th>
-                                <th className="pl-2 py-2 text-left">Value</th>
-                            </tr>
-                            <tr className="border-t dark:border-neutral-400">
-                                <OptionTD>Expiry Date</OptionTD>
-                                <td className="select-all py-1">{format('yyyy-MM-dd', props.data.expirydate)}</td>
-                            </tr>
-                            <tr className="border-t dark:border-neutral-400">
-                                <OptionTD>Lifetime</OptionTD>
-                                <td className="select-all py-1">{lifetimeDays} days</td>
-                            </tr>
-                            <tr className="border-t dark:border-neutral-400">
-                                <OptionTD>Enable Notifications</OptionTD>
-                                <td>
-                                    <BoolTag val={props.data.notifications} />
-                                </td>
-                            </tr>
-                            <tr className="border-t dark:border-neutral-400">
-                                <OptionTD>Asynchronous Mode</OptionTD>
-                                <td>
-                                    <BoolTag val={props.data.asynchronousMode} />
-                                </td>
-                            </tr>
-                            <tr className="border-t dark:border-neutral-400">
-                                <OptionTD>Group By</OptionTD>
-                                <td>
-                                    <DIDTypeTag didtype={props.data.groupby} />
-                                </td>
-                            </tr>
-                            <tr className="border-t dark:border-neutral-400">
-                                <OptionTD>Number of Copies</OptionTD>
-                                <td className="select-all py-1">{props.data.numcopies}</td>
-                            </tr>
-                            <tr className="border-t dark:border-neutral-400">
-                                <OptionTD>Comment</OptionTD>
-                                <td className="select-all py-1">{props.data.comment}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-
-                <div>
-                    <h3 className="text-xl font-bold p-2 dark:text-text-0 text-text-1000">Samples</h3>
-                    <div
-                        className={twMerge(
-                            'px-2 mx-2 rounded border dark:border-0',
-                            props.data.numsamples >= 0 ? 'bg-brand-300 dark:bg-brand-600' : 'bg-neutral-200 dark:bg-neutral-600',
-                            'dark:text-white',
-                        )}
-                    >
-                        {props.data.numsamples < 0 ? 'Disabled' : 'Sampling ' + props.data.numsamples + ' files from the selected DIDs.'}
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
diff --git a/src/component-library/pages/legacy/Rule/5_Status/CreateRuleStatusPage.stories.tsx b/src/component-library/pages/legacy/Rule/5_Status/CreateRuleStatusPage.stories.tsx
deleted file mode 100644
index 4a5557b9b..000000000
--- a/src/component-library/pages/legacy/Rule/5_Status/CreateRuleStatusPage.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { StoryFn, Meta } from '@storybook/react';
-import React from 'react';
-
-import { CreateRuleStatusPage, TCreateRuleStatusPageProps } from './CreateRuleStatusPage';
-
-export default {
-    title: 'Components/Pages/Rule/CreateRuleStatusPage',
-    component: CreateRuleStatusPage,
-} as Meta<typeof CreateRuleStatusPage>;
-
-const Template: StoryFn<typeof CreateRuleStatusPage> = args => <CreateRuleStatusPage {...args} />;
-
-export const Story = Template.bind({});
-Story.args = {
-    createRuleViewModel: {
-        status: 'success',
-        message: 'There has been an error my ser!',
-        rules: [
-            {
-                RuleID: '1234567890',
-                DID: 'scope:name',
-            },
-            {
-                RuleID: '1234567890',
-                DID: 'scope:name',
-            },
-        ],
-    },
-} as TCreateRuleStatusPageProps;
diff --git a/src/component-library/pages/legacy/Rule/5_Status/CreateRuleStatusPage.tsx b/src/component-library/pages/legacy/Rule/5_Status/CreateRuleStatusPage.tsx
deleted file mode 100644
index f96f8a690..000000000
--- a/src/component-library/pages/legacy/Rule/5_Status/CreateRuleStatusPage.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { Alert } from '@/component-library/atoms/legacy/Alert/Alert';
-import { NormalTable } from '@/component-library/features/legacy/StreamedTables/NormalTable';
-import { CreateRulesViewModel, TRuleIDDIDPair } from '@/lib/infrastructure/data/view-model/create-rule';
-import { createColumnHelper } from '@tanstack/react-table';
-import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-
-export type TCreateRuleStatusPageProps = {
-    createRuleViewModel: CreateRulesViewModel | undefined;
-};
-
-export const CreateRuleStatusPage = ({ createRuleViewModel }: TCreateRuleStatusPageProps) => {
-    const columnHelper = createColumnHelper<TRuleIDDIDPair>();
-    const tablecolumns: any[] = [
-        columnHelper.accessor('RuleID', {
-            id: 'RuleID',
-            header: info => {
-                return (
-                    <div className="text-xl text-left text-text-100">
-                        <span>Rule ID</span>
-                    </div>
-                );
-            },
-            cell: info => {
-                return (
-                    <div className="flex flex-col text-left dark:text-text-0 text-text-1000">
-                        <Link
-                            className={twMerge('text-brand-500 hover:text-brand-700', 'dark:text-brand-400 dark:hover:text-brand-300')}
-                            href={`/rule/page/${info.getValue()}`}
-                        >
-                            {info.getValue()}
-                        </Link>
-                    </div>
-                );
-            },
-        }),
-        columnHelper.accessor('DID', {
-            id: 'DID',
-            header: info => {
-                return (
-                    <div className="text-xl text-left text-text-100 ">
-                        <span>DID</span>
-                    </div>
-                );
-            },
-            cell: info => {
-                return (
-                    <div className="flex flex-col text-left dark:text-text-0 text-text-1000">
-                        <span>{info.getValue()}</span>
-                    </div>
-                );
-            },
-        }),
-    ];
-    // Handle Loading State
-    if (!createRuleViewModel || createRuleViewModel.status === 'pending')
-        return (
-            <div
-                className={twMerge(
-                    'flex flex-col items-center space-y-4',
-                    'w-full h-full',
-                    'p-2',
-                    'bg-neutral-0 dark:bg-neutral-800',
-                    'dark:text-text-0 text-text-1000',
-                )}
-            >
-                <div className="flex items-center justify-center w-56 h-56 ">
-                    <div className="px-3 py-1 text-xs font-medium leading-none text-center text-brand-800 bg-neutral-200 rounded-full animate-pulse dark:bg-neutral-900 dark:text-brand-200">
-                        loading...
-                    </div>
-                </div>
-            </div>
-        );
-    // Handle errors
-    if (createRuleViewModel.status === 'error') {
-        const errorMessage = createRuleViewModel.message;
-        return (
-            <div
-                className={twMerge(
-                    'flex flex-col space-y-4',
-                    'w-full h-full',
-                    'p-2',
-                    'bg-neutral-0 dark:bg-neutral-800',
-                    'dark:text-text-0 text-text-1000 ',
-                )}
-            >
-                <Alert variant="error" message="Oops! Something went wrong." />
-                <div className={twMerge('border rounded-md p-1', 'bg-neutral-0 dark:bg-neutral-800', 'text-base-error-500')}>{errorMessage}</div>
-            </div>
-        );
-    }
-    // Handle Success
-    return (
-        <div
-            className={twMerge(
-                'flex flex-col space-y-4',
-                'w-full h-full',
-                'p-2',
-                'bg-neutral-0 dark:bg-neutral-800',
-                'dark:text-text-0 text-text-1000',
-            )}
-        >
-            <Alert variant="success" message="Your rule(s) have been created. " />
-            <NormalTable
-                tablecolumns={tablecolumns}
-                tabledata={createRuleViewModel.rules}
-                tablestyling={{
-                    tableHeadRowStyle: 'border-b border-neutral-300 bg-neutral-700 dark:bg-neutral-800',
-                    tableBodyRowStyle: twMerge(
-                        'bg-neutral-0 odd:bg-neutral-100 text-text-1000',
-                        'dark:bg-neutral-700 odd:dark:bg-neutral-800 dark:text-text-100',
-                        'border-b border-neutral-300',
-                    ),
-                }}
-            />
-            <div>
-                You can also view all your rules by clicking&nbsp;
-                <Link className={twMerge('text-brand-500 hover:text-brand-700', 'dark:text-brand-400 dark:hover:text-brand-300')} href="/rule/list">
-                    here.
-                </Link>
-            </div>
-        </div>
-    );
-};
diff --git a/src/component-library/pages/legacy/Rule/5_Status/CreateRuleStatusTabPage.tsx b/src/component-library/pages/legacy/Rule/5_Status/CreateRuleStatusTabPage.tsx
deleted file mode 100644
index 90ea5e24c..000000000
--- a/src/component-library/pages/legacy/Rule/5_Status/CreateRuleStatusTabPage.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { TRuleIDDIDPair } from '@/lib/infrastructure/data/view-model/create-rule';
-import { RulePage } from '../RulePage';
-import { CreateRuleStatusPage } from './CreateRuleStatusPage';
-
-export const CreateRuleStatusTabPage = (props: {
-    activePage: number;
-    pagePrevFunction: (event: any) => void;
-    QueryStatus: {
-        status: 'success' | 'error' | 'pending';
-        message?: string | undefined;
-        rules: TRuleIDDIDPair[];
-    };
-}) => {
-    return (
-        <RulePage
-            pagenum={4}
-            activePage={props.activePage}
-            onPrev={props.pagePrevFunction}
-            onNext={() => {}}
-            allowNext={false}
-            allowPrev={props.QueryStatus.status === 'error'}
-        >
-            <CreateRuleStatusPage createRuleViewModel={props.QueryStatus} />
-        </RulePage>
-    );
-};
diff --git a/src/component-library/pages/legacy/Rule/CreateRule.stories.tsx b/src/component-library/pages/legacy/Rule/CreateRule.stories.tsx
deleted file mode 100644
index ac6dc0dfd..000000000
--- a/src/component-library/pages/legacy/Rule/CreateRule.stories.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { StoryFn, Meta } from '@storybook/react';
-import {
-    fixtureListDIDViewModel as fixtureListDIDsViewModel,
-    fixtureRSEAccountUsageLimitViewModel,
-    mockUseComDOM,
-} from '@/test/fixtures/table-fixtures';
-
-import { CreateRule as CR } from './CreateRule';
-import { CreateRulesViewModel, TypedDIDValidationQuery, TypedDIDValidationResponse } from '@/lib/infrastructure/data/view-model/create-rule';
-import { TCreateRuleFeatureRequestParams } from '@/pages/api/feature/create-rule';
-
-export default {
-    title: 'Components/Pages/Rule',
-    component: CR,
-} as Meta<typeof CR>;
-
-const Template: StoryFn<typeof CR> = args => <CR {...args} />;
-
-export const CreateRule = Template.bind({});
-CreateRule.args = {
-    onSubmit: (query: TCreateRuleFeatureRequestParams): Promise<CreateRulesViewModel> => {
-        return Promise.resolve({
-            status: 'success',
-            rules: [
-                {
-                    RuleID: '123123143243',
-                    DID: 'scope:dataset1',
-                },
-                {
-                    RuleID: '127849dsgs',
-                    DID: 'scope:dataset2',
-                },
-            ],
-        });
-    },
-    didListComDOM: mockUseComDOM(Array.from({ length: 100 }, () => fixtureListDIDsViewModel())),
-    didValidation: (query: TypedDIDValidationQuery) => {
-        // if the DID contains the string "error", it will be added to the error list
-        var localErrorDIDs: TypedDIDValidationResponse = { ErrorList: [] };
-        query.DIDList.map((DID: string, index: number) => {
-            if (DID.includes('error')) {
-                localErrorDIDs.ErrorList.push({ DID: DID, ErrorCodes: [421], Message: 'This DID is invalid' });
-            }
-        });
-        // if the error list is empty, the promise will resolve, otherwise it will reject
-        if (localErrorDIDs.ErrorList.length === 0) {
-            return Promise.resolve(localErrorDIDs);
-        } else {
-            return Promise.reject(localErrorDIDs);
-        }
-    },
-    rseListComDOM: mockUseComDOM(Array.from({ length: 100 }, () => fixtureRSEAccountUsageLimitViewModel())),
-};
diff --git a/src/component-library/pages/legacy/Rule/CreateRule.tsx b/src/component-library/pages/legacy/Rule/CreateRule.tsx
deleted file mode 100644
index b542c9ed8..000000000
--- a/src/component-library/pages/legacy/Rule/CreateRule.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { useState } from 'react';
-import { Timeline } from '../../../atoms/legacy/Timeline/Timeline';
-import { UseComDOM } from '@/lib/infrastructure/hooks/useComDOM';
-import { Heading } from '@/component-library/pages/legacy/Helpers/Heading';
-import { Body } from '@/component-library/pages/legacy/Helpers/Body';
-
-/* =================================================
- *  Importing Types and Interfaces
- *  ================================================= */
-import { TypedDIDValidationQuery, TypedDIDValidationResponse, CreateRulesViewModel } from '@/lib/infrastructure/data/view-model/create-rule';
-import { AccountInfo, DIDType } from '@/lib/core/entity/rucio';
-import { twMerge } from 'tailwind-merge';
-import { RSEAccountUsageLimitViewModel } from '@/lib/infrastructure/data/view-model/rse';
-import { RuleSummaryViewModel } from '@/lib/infrastructure/data/view-model/rule';
-import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
-import { TCreateRuleFeatureRequestParams } from '@/pages/api/feature/create-rule';
-import { CreateRuleDIDsPage } from './1_DIDs/CreateRuleDIDsPage';
-import { CreateRuleRSEsPage } from './2_RSEs/CreateRuleRSEsPage';
-import { CreateRuleOptionsPage } from './3_Options/CreateRuleOptionsPage';
-import { CreateRuleSummaryPage } from './4_Summary/CreateRuleSummaryPage';
-import { CreateRuleStatusTabPage } from './5_Status/CreateRuleStatusTabPage';
-
-export interface CreateRulePageProps {
-    accountInfo: AccountInfo;
-    // Page 0.0 - DID Search`
-    didListComDOM: UseComDOM<ListDIDsViewModel>;
-    // Page 0.1 - DID Validation
-    didValidation: (didValidationQuery: TypedDIDValidationQuery) => Promise<TypedDIDValidationResponse>;
-    // Page 1 - RSE Selection
-    rseListComDOM: UseComDOM<RSEAccountUsageLimitViewModel>;
-    // Page 3 - Sendoff
-    onSubmit: (createRuleQuery: TCreateRuleFeatureRequestParams) => Promise<CreateRulesViewModel>;
-}
-
-interface QueryResults extends CreateRulesViewModel {}
-
-export const CreateRule = (props: CreateRulePageProps) => {
-    /* =================================================
-     *  Relevant for the CreateRule page
-     *  ================================================= */
-
-    // state to store active page
-    const [activePage, setActivePage] = useState<number>(0);
-    const pagePrevFunction = (event: any) => {
-        setActivePage(activePage - 1);
-    };
-
-    // state to store the selected DIDs
-    const [selectedDIDs, setSelectedDID] = useState<Array<ListDIDsViewModel>>([]);
-
-    // state to store the RSE Information : the selected RSEs and if the user asks for approval
-    const [RSEsInformation, setRSEsInformation] = useState<{
-        selectedRSEs: RSEAccountUsageLimitViewModel[];
-        askForApproval: boolean;
-    }>({
-        selectedRSEs: [],
-        askForApproval: false,
-    });
-
-    // state to store the options
-    const [Options, setOptions] = useState<{
-        lifetime: number;
-        expiryDate: Date;
-        enableNotifications: boolean;
-        asynchronousMode: boolean;
-        numcopies: number;
-        takesamples: boolean;
-        numsamples: number;
-        freeComment: string;
-        groupBy: DIDType;
-    }>({
-        expiryDate: new Date(2025, 1, 1),
-        lifetime: 0,
-        takesamples: false,
-        numsamples: -1,
-        enableNotifications: false,
-        groupBy: DIDType.DATASET,
-        asynchronousMode: false,
-        numcopies: 1,
-        freeComment: '',
-    });
-
-    // state to store the summary view model
-    const [summaryViewModel, setSummaryViewModel] = useState<RuleSummaryViewModel>();
-
-    // state to store query results
-    const [QueryResults, setQueryResults] = useState<QueryResults>({
-        status: 'pending',
-        rules: [],
-    });
-
-    /* =================================================
-     *  Building the page
-     *  ================================================= */
-    return (
-        <div data-testid="create-rule-root" className={twMerge('flex flex-col space-y-2 w-full')}>
-            <Heading title="Create Rule">
-                <Timeline
-                    steps={['DIDs', 'RSEs', 'Options', 'Summary', 'Status']}
-                    active={activePage}
-                    onJump={(goal: number) => {
-                        setActivePage(goal);
-                    }}
-                />
-            </Heading>
-            <Body>
-                <CreateRuleDIDsPage
-                    setDIDS={setSelectedDID}
-                    activePage={activePage}
-                    setActivePage={setActivePage}
-                    CreateRulePageProps={props}
-                    pagePrevFunction={pagePrevFunction}
-                ></CreateRuleDIDsPage>
-
-                <CreateRuleRSEsPage
-                    setRses={setRSEsInformation}
-                    activePage={activePage}
-                    setActivePage={setActivePage}
-                    CreateRulePageProps={props}
-                    pagePrevFunction={pagePrevFunction}
-                    selectedDIDs={selectedDIDs}
-                ></CreateRuleRSEsPage>
-
-                <CreateRuleOptionsPage
-                    setOptions={setOptions}
-                    activePage={activePage}
-                    setActivePage={setActivePage}
-                    CreateRulePageProps={props}
-                    pagePrevFunction={pagePrevFunction}
-                    selectedDIDs={selectedDIDs}
-                    RSEsInformation={RSEsInformation}
-                    setSummaryViewModel={setSummaryViewModel}
-                ></CreateRuleOptionsPage>
-
-                <CreateRuleSummaryPage
-                    activePage={activePage}
-                    setActivePage={setActivePage}
-                    CreateRulePageProps={props}
-                    pagePrevFunction={pagePrevFunction}
-                    selectedDIDs={selectedDIDs}
-                    RSEsInformation={RSEsInformation}
-                    summaryViewModel={summaryViewModel}
-                    setQueryResults={setQueryResults}
-                    Options={Options}
-                ></CreateRuleSummaryPage>
-
-                <CreateRuleStatusTabPage
-                    activePage={activePage}
-                    QueryStatus={QueryResults}
-                    pagePrevFunction={pagePrevFunction}
-                ></CreateRuleStatusTabPage>
-            </Body>
-        </div>
-    );
-};
diff --git a/src/component-library/pages/legacy/Rule/GroupingDropdown.stories.tsx b/src/component-library/pages/legacy/Rule/GroupingDropdown.stories.tsx
deleted file mode 100644
index 0bbee02aa..000000000
--- a/src/component-library/pages/legacy/Rule/GroupingDropdown.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { StoryFn, Meta } from '@storybook/react';
-
-import { Dropdown as D } from './GroupingDropdown';
-
-export default {
-    title: 'Components/Pages/Rule/Components',
-    component: D,
-} as Meta<typeof D>;
-
-const Template: StoryFn<typeof D> = args => <D {...args} />;
-
-export const Dropdown = Template.bind({});
-Dropdown.args = {
-    handleChange: (args: any) => {},
-};
diff --git a/src/component-library/pages/legacy/Rule/GroupingDropdown.tsx b/src/component-library/pages/legacy/Rule/GroupingDropdown.tsx
deleted file mode 100644
index 359abb89f..000000000
--- a/src/component-library/pages/legacy/Rule/GroupingDropdown.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { useEffect, useState, forwardRef, useRef } from 'react';
-import { Collapsible } from '../../../atoms/legacy/helpers/Collapsible/Collapsible';
-import { HiChevronDown } from 'react-icons/hi';
-import { twMerge } from 'tailwind-merge';
-import { DIDTypeTag } from '@/component-library/features/legacy/Tags/DIDTypeTag';
-import { DIDType } from '@/lib/core/entity/rucio';
-
-export const Dropdown = forwardRef(function Dropdown(
-    props: {
-        handleChange: (args: any) => void;
-        id?: string;
-    },
-    outsideref?: React.ForwardedRef<HTMLDivElement>,
-) {
-    const options: DIDType[] = Object.values(DIDType);
-    const nodes: React.ReactNode[] = [
-        <DIDTypeTag didtype={DIDType.DATASET} neversmall key={0} className="w-full md:w-full" />,
-        <DIDTypeTag didtype={DIDType.CONTAINER} neversmall key={1} className="w-full md:w-full" />,
-        <DIDTypeTag didtype={DIDType.COLLECTION} neversmall key={2} className="w-full md:w-full" />,
-        <DIDTypeTag didtype={DIDType.FILE} neversmall key={3} className="w-full md:w-full" />,
-    ];
-
-    const [isActive, setActive] = useState<boolean>(false);
-    const [selectedLabel, setSelectedLabel] = useState<DIDType>(DIDType.DATASET);
-
-    const ref = useRef<HTMLDivElement>(null);
-    const buttonRef = useRef<HTMLButtonElement>(null);
-    useEffect(() => {
-        const handleClickOutside = (event: any) => {
-            if (!ref.current?.contains(event.target) && !buttonRef.current?.contains(event.target)) {
-                setActive(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-    }, [ref]);
-
-    return (
-        <div className="w-full relative">
-            <button
-                onClick={() => {
-                    setActive(!isActive);
-                }}
-                ref={buttonRef}
-                className={twMerge(
-                    'py-1 px-3 rounded w-full',
-                    'bg-brand-500 hover:bg-brand-600 text-text-0',
-                    'cursor-pointer',
-                    'font-bold',
-                    'flex justify-center space-x-2',
-                )}
-            >
-                <span>Group Items By</span>
-                <DIDTypeTag didtype={selectedLabel} />
-                <div className="flex items-center">{<HiChevronDown />}</div>
-            </button>
-            <Collapsible showIf={isActive}>
-                <div className="absolute right-0 mt-2 w-56 rounded border dark:border-2 z-[100]" ref={ref}>
-                    <div className="p-1 flex flex-col bg-neutral-0 dark:bg-neutral-700">
-                        <ol>
-                            {options.map((element: any, index: number) => {
-                                return (
-                                    <li
-                                        key={index}
-                                        onClick={() => {
-                                            setActive(!isActive);
-                                            props.handleChange(element);
-                                            setSelectedLabel(element);
-                                        }}
-                                        className={twMerge(
-                                            'p-1 rounded select-none cursor-pointer',
-                                            'bg-neutral-0 hover:bg-neutral-200',
-                                            'dark:bg-neutral-700 hover:dark:bg-neutral-900 dark:text-text-100',
-                                        )}
-                                    >
-                                        {nodes[index]}
-                                    </li>
-                                );
-                            })}
-                        </ol>
-                    </div>
-                </div>
-            </Collapsible>
-        </div>
-    );
-});
diff --git a/src/component-library/pages/legacy/Rule/LifetimeWithExpirationDateInput.stories.tsx b/src/component-library/pages/legacy/Rule/LifetimeWithExpirationDateInput.stories.tsx
deleted file mode 100644
index ad4fb02a1..000000000
--- a/src/component-library/pages/legacy/Rule/LifetimeWithExpirationDateInput.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Meta, StoryFn } from '@storybook/react';
-import { LifetimeWithExpirationDateInput } from './LifetimeWithExpiryDateInput';
-
-export default {
-    title: 'Components/Pages/Rule/Components',
-    component: LifetimeWithExpirationDateInput,
-} as Meta<typeof LifetimeWithExpirationDateInput>;
-
-const Template: StoryFn<typeof LifetimeWithExpirationDateInput> = args => <LifetimeWithExpirationDateInput {...args} />;
-
-export const LifeTimeWithExpirationDateInputStory = Template.bind({});
-
-LifeTimeWithExpirationDateInputStory.args = {
-    onChange: (date, lifetime) => {
-        console.log(date, lifetime);
-    },
-    initialdate: new Date(),
-    disabled: false,
-    placeholder: 'Select a date',
-};
diff --git a/src/component-library/pages/legacy/Rule/LifetimeWithExpiryDateInput.tsx b/src/component-library/pages/legacy/Rule/LifetimeWithExpiryDateInput.tsx
deleted file mode 100644
index 8f4f8fafd..000000000
--- a/src/component-library/pages/legacy/Rule/LifetimeWithExpiryDateInput.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { DateInput } from '@/component-library/atoms/legacy/input/DateInput/DateInput';
-import { NumInput } from '@/component-library/atoms/legacy/input/NumInput/NumInput';
-import { calculateDateFromLifetime, calculateLifetimeInDays } from '@/lib/core/utils/lifetime-utils';
-import { useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-
-type LifetimeWithExpirationDateInputProps = {
-    onChange(date: Date, lifetime: number): void; // communicate back to parent
-    initialdate?: Date; // the current value, set by the parent
-    disabled?: boolean;
-    placeholder?: string;
-};
-export const LifetimeWithExpirationDateInput: React.FC<LifetimeWithExpirationDateInputProps> = ({
-    onChange,
-    initialdate,
-    disabled = false,
-    placeholder = 'Select a date',
-}: LifetimeWithExpirationDateInputProps) => {
-    const [lifetimeInDays, setLifetimeInDays] = useState<number>(() => {
-        if (initialdate) {
-            return calculateLifetimeInDays(initialdate);
-        }
-        return 0;
-    });
-    const [date, setDate] = useState<Date | undefined>(initialdate);
-    const onDateChange = (date: Date) => {
-        console.log(date);
-        const newLifetime = calculateLifetimeInDays(date);
-        setLifetimeInDays(newLifetime);
-    };
-    return (
-        <div className={twMerge('p-2 space-y-4', 'rounded-md border', 'dark:border-2', 'bg-neutral-0 dark:bg-neutral-800')}>
-            <div className="flex flex-col space-y-2">
-                <span className="text-xl dark:text-text-0 text-text-1000">Lifetime (days)</span>
-                <NumInput
-                    value={lifetimeInDays}
-                    onChange={event => {
-                        const value = event.target.value;
-                        if (value === undefined || value === null) {
-                            return;
-                        }
-                        if (value === '') {
-                            setLifetimeInDays(0);
-                            setDate(new Date());
-                            return;
-                        }
-                        if (typeof value === 'string') {
-                            try {
-                                const intValue = parseInt(value);
-                                setLifetimeInDays(intValue);
-                                const newDate = calculateDateFromLifetime(parseInt(value));
-                                setDate(newDate);
-                            } catch (error) {
-                                console.error(error);
-                            }
-                        }
-                    }}
-                />
-            </div>
-            <div className="flex flex-col space-y-2">
-                <span className="text-xl dark:text-text-0 text-text-1000">Expiry Date</span>
-                <DateInput onchange={onDateChange} initialdate={date} disabled={disabled} placeholder={placeholder} />
-            </div>
-        </div>
-    );
-};
diff --git a/src/component-library/pages/legacy/Rule/RulePage.stories.tsx b/src/component-library/pages/legacy/Rule/RulePage.stories.tsx
deleted file mode 100644
index 13c9d103f..000000000
--- a/src/component-library/pages/legacy/Rule/RulePage.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { StoryFn, Meta } from '@storybook/react';
-import { RulePage } from './RulePage';
-
-export default {
-    title: 'Components/Pages/Rule/Components',
-    component: RulePage,
-} as Meta<typeof RulePage>;
-
-const Template: StoryFn<typeof RulePage> = args => <RulePage {...args} />;
-
-export const RulePageComponent = Template.bind({});
-RulePageComponent.args = {
-    pagenum: 0,
-    activePage: 0,
-    onNext: () => {},
-    onPrev: () => {},
-    submit: false,
-    progressBlocked: false,
-    children: 'Rule Page',
-};
diff --git a/src/component-library/pages/legacy/Rule/RulePage.tsx b/src/component-library/pages/legacy/Rule/RulePage.tsx
deleted file mode 100644
index 82c16d6c1..000000000
--- a/src/component-library/pages/legacy/Rule/RulePage.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Collapsible } from '../../../atoms/legacy/helpers/Collapsible/Collapsible';
-import { Button } from '../../../atoms/legacy/Button/Button';
-import { twMerge } from 'tailwind-merge';
-
-export const RulePage = (props: {
-    pagenum: number;
-    activePage: number;
-    onNext: (event: any) => void;
-    onPrev: (event: any) => void;
-    allowNext: boolean;
-    allowPrev: boolean;
-    submit?: boolean;
-    progressBlocked?: boolean;
-    children?: any;
-}) => {
-    return (
-        <Collapsible showIf={props.activePage === props.pagenum}>
-            <div className={twMerge('flex flex-col space-y-2', 'bg-neutral-0 dark:bg-neutral-800')} data-testid={`rule-page-${props.pagenum}`}>
-                <div>{props.children}</div>
-                <div className="relative w-full h-8">
-                    <Collapsible showIf={props.activePage !== 0 && props.allowPrev}>
-                        <span className="absolute bottom-0 left-0 w-24">
-                            <Button label="Previous" onClick={props.onPrev} />
-                        </span>
-                    </Collapsible>
-                    {!props.submit ? (
-                        <Collapsible showIf={props.allowNext}>
-                            <span className="absolute bottom-0 right-0 w-24">
-                                <Button label="Next" disabled={props.progressBlocked} onClick={props.onNext} />
-                            </span>
-                        </Collapsible>
-                    ) : (
-                        <span className="absolute bottom-0 right-0 w-24">
-                            <Button label="Submit" disabled={props.progressBlocked} type="submit" onClick={props.onNext} />
-                        </span>
-                    )}
-                </div>
-            </div>
-        </Collapsible>
-    );
-};
diff --git a/src/lib/core/dto/rule-dto.ts b/src/lib/core/dto/rule-dto.ts
index 47b1030cd..516074387 100644
--- a/src/lib/core/dto/rule-dto.ts
+++ b/src/lib/core/dto/rule-dto.ts
@@ -17,3 +17,7 @@ export interface RuleReplicaLockStateDTO extends BaseDTO {
 }
 
 export interface ListRulesDTO extends BaseStreamableDTO {}
+
+export interface CreateRuleDTO extends BaseDTO {
+    rule_ids: string[];
+}
diff --git a/src/lib/core/entity/rucio.ts b/src/lib/core/entity/rucio.ts
index f5063fcb7..b5e43dc86 100644
--- a/src/lib/core/entity/rucio.ts
+++ b/src/lib/core/entity/rucio.ts
@@ -31,10 +31,14 @@ export type AccountInfo = {
     suspendedAt?: DateISO;
 };
 
-// results of core::did::list_dids (with `long` option)
-export type DID = {
-    name: string;
+// Sent to certain endpoints
+export type DIDShort = {
     scope: string;
+    name: string;
+};
+
+// results of core::did::list_dids (with `long` option)
+export type DID = DIDShort & {
     did_type: DIDType;
 };
 
@@ -167,6 +171,7 @@ export type RulePageLockEntry = {
 
 export type Rule = {
     id: string;
+    scope: string;
     name: string;
     account: string;
     rse_expression: string;
@@ -179,6 +184,31 @@ export type Rule = {
     locks_stuck_cnt: number;
 };
 
+// TODO: add explanatory comments
+export type RuleCreationParameters = {
+    dids: DIDShort[];
+    copies: number;
+    rse_expression: string;
+    account: string;
+    grouping?: 'ALL' | 'DATASET' | 'NONE';
+    weight?: number;
+    // In seconds
+    lifetime?: number;
+    locked?: boolean;
+    subscription_id?: string;
+    source_replica_expression?: string;
+    activity?: string;
+    notify?: 'Y' | 'N' | 'C' | 'P';
+    purge_replicas?: boolean;
+    ignore_availability?: boolean;
+    comments?: string;
+    ask_approval?: boolean;
+    asynchronous?: boolean;
+    priority?: number;
+    split_container?: boolean;
+    meta?: string;
+};
+
 /**
  * Represents the replication rule metadata avilable for a rule in a subscription.
  */
diff --git a/src/lib/core/port/primary/add-did-ports.ts b/src/lib/core/port/primary/add-did-ports.ts
new file mode 100644
index 000000000..d8c9a50b8
--- /dev/null
+++ b/src/lib/core/port/primary/add-did-ports.ts
@@ -0,0 +1,12 @@
+import { BaseAuthenticatedInputPort, BaseOutputPort } from '@/lib/sdk/primary-ports';
+import { AddDIDError, AddDIDRequest, AddDIDResponse } from '@/lib/core/usecase-models/add-did-usecase-models';
+
+/**
+ * @interface AddDIDInputPort representing the AddDID usecase.
+ */
+export interface AddDIDInputPort extends BaseAuthenticatedInputPort<AddDIDRequest> {}
+
+/**
+ * @interface AddDIDOutputPort representing the AddDID presenter.
+ */
+export interface AddDIDOutputPort extends BaseOutputPort<AddDIDResponse, AddDIDError> {}
diff --git a/src/lib/core/port/primary/attach-dids-ports.ts b/src/lib/core/port/primary/attach-dids-ports.ts
new file mode 100644
index 000000000..5f7d878cd
--- /dev/null
+++ b/src/lib/core/port/primary/attach-dids-ports.ts
@@ -0,0 +1,12 @@
+import { BaseAuthenticatedInputPort, BaseOutputPort } from '@/lib/sdk/primary-ports';
+import { AttachDIDsError, AttachDIDsRequest, AttachDIDsResponse } from '@/lib/core/usecase-models/attach-dids-usecase-models';
+
+/**
+ * @interface AttachDIDsInputPort representing the AttachDIDs usecase.
+ */
+export interface AttachDIDsInputPort extends BaseAuthenticatedInputPort<AttachDIDsRequest> {}
+
+/**
+ * @interface AttachDIDsOutputPort representing the AttachDIDs presenter.
+ */
+export interface AttachDIDsOutputPort extends BaseOutputPort<AttachDIDsResponse, AttachDIDsError> {}
diff --git a/src/lib/core/port/primary/create-rule-ports.ts b/src/lib/core/port/primary/create-rule-ports.ts
new file mode 100644
index 000000000..c6ad704ec
--- /dev/null
+++ b/src/lib/core/port/primary/create-rule-ports.ts
@@ -0,0 +1,11 @@
+import { BaseAuthenticatedInputPort, BaseOutputPort } from '@/lib/sdk/primary-ports';
+import { CreateRuleResponse, CreateRuleRequest, CreateRuleError } from '@/lib/core/usecase-models/create-rule-usecase-models';
+/**
+ * @interface CreateRuleInputPort that abstracts the usecase.
+ */
+export interface CreateRuleInputPort extends BaseAuthenticatedInputPort<CreateRuleRequest> {}
+
+/**
+ * @interface CreateRuleOutputPort that abtrsacts the presenter
+ */
+export interface CreateRuleOutputPort extends BaseOutputPort<CreateRuleResponse, CreateRuleError> {}
diff --git a/src/lib/core/port/primary/set-did-status-ports.ts b/src/lib/core/port/primary/set-did-status-ports.ts
new file mode 100644
index 000000000..b78233cea
--- /dev/null
+++ b/src/lib/core/port/primary/set-did-status-ports.ts
@@ -0,0 +1,12 @@
+import { BaseAuthenticatedInputPort, BaseOutputPort } from '@/lib/sdk/primary-ports';
+import { SetDIDStatusError, SetDIDStatusRequest, SetDIDStatusResponse } from '@/lib/core/usecase-models/set-did-status-usecase-models';
+
+/**
+ * @interface SetDIDStatusInputPort representing the SetDIDStatus usecase.
+ */
+export interface SetDIDStatusInputPort extends BaseAuthenticatedInputPort<SetDIDStatusRequest> {}
+
+/**
+ * @interface SetDIDStatusOutputPort representing the SetDIDStatus presenter.
+ */
+export interface SetDIDStatusOutputPort extends BaseOutputPort<SetDIDStatusResponse, SetDIDStatusError> {}
diff --git a/src/lib/core/port/secondary/did-gateway-output-port.ts b/src/lib/core/port/secondary/did-gateway-output-port.ts
index de1af9e1c..59a3da562 100644
--- a/src/lib/core/port/secondary/did-gateway-output-port.ts
+++ b/src/lib/core/port/secondary/did-gateway-output-port.ts
@@ -9,7 +9,7 @@ import {
     AttachDIDDTO as AttachDIDsDTO,
     SetDIDStatusDTO,
 } from '../../dto/did-dto';
-import { DID, DIDType } from '../../entity/rucio';
+import { DIDShort, DIDType } from '../../entity/rucio';
 
 /**
  * Output port for the DID Gateway, responsible for defining the methods that the Gateway will use to interact with the Rucio Server.
@@ -50,7 +50,7 @@ export default interface DIDGatewayOutputPort {
      * @param name The name of the parent DID
      * @param dids A list of DIDs to attach to the parent DID
      */
-    attachDIDs(rucioAuthToken: string, scope: string, name: string, dids: DID[]): Promise<AttachDIDsDTO>;
+    attachDIDs(rucioAuthToken: string, scope: string, name: string, dids: DIDShort[]): Promise<AttachDIDsDTO>;
 
     /**
      * Retrieves a DID from the Rucio Server.
diff --git a/src/lib/core/port/secondary/rule-gateway-output-port.ts b/src/lib/core/port/secondary/rule-gateway-output-port.ts
index b344b756a..d8d3af0b6 100644
--- a/src/lib/core/port/secondary/rule-gateway-output-port.ts
+++ b/src/lib/core/port/secondary/rule-gateway-output-port.ts
@@ -1,6 +1,7 @@
 import { BaseStreamableDTO } from '@/lib/sdk/dto';
-import { ListRulesDTO, RuleDTO } from '../../dto/rule-dto';
+import { CreateRuleDTO, ListRulesDTO, RuleDTO } from '../../dto/rule-dto';
 import { ListRulesFilter } from '@/lib/infrastructure/gateway/rule-gateway/rule-gateway-utils';
+import { RuleCreationParameters } from '@/lib/core/entity/rucio';
 
 export default interface RuleGatewayOutputPort {
     /**
@@ -23,4 +24,11 @@ export default interface RuleGatewayOutputPort {
      * @param ruleId The rule to list locks for.
      */
     listRuleReplicaLockStates(rucioAuthToken: string, ruleId: string): Promise<BaseStreamableDTO>;
+
+    /**
+     * Create a new rule.
+     * @param rucioAuthToken A valid Rucio Auth Token.
+     * @param params An object containing parameters for rule creation.
+     */
+    createRule(rucioAuthToken: string, params: RuleCreationParameters): Promise<CreateRuleDTO>;
 }
diff --git a/src/lib/core/use-case/add-did-usecase.ts b/src/lib/core/use-case/add-did-usecase.ts
new file mode 100644
index 000000000..e15ffd3fb
--- /dev/null
+++ b/src/lib/core/use-case/add-did-usecase.ts
@@ -0,0 +1,60 @@
+import { injectable } from 'inversify';
+import { BaseSingleEndpointUseCase } from '@/lib/sdk/usecase';
+import { AuthenticatedRequestModel } from '@/lib/sdk/usecase-models';
+
+import { AddDIDError, AddDIDRequest, AddDIDResponse } from '@/lib/core/usecase-models/add-did-usecase-models';
+import { AddDIDInputPort, type AddDIDOutputPort } from '@/lib/core/port/primary/add-did-ports';
+
+import { AddDIDDTO } from '@/lib/core/dto/did-dto';
+import type DIDGatewayOutputPort from '@/lib/core/port/secondary/did-gateway-output-port';
+import { DIDType } from '@/lib/core/entity/rucio';
+
+@injectable()
+export default class AddDIDUseCase
+    extends BaseSingleEndpointUseCase<AuthenticatedRequestModel<AddDIDRequest>, AddDIDResponse, AddDIDError, AddDIDDTO>
+    implements AddDIDInputPort
+{
+    constructor(protected readonly presenter: AddDIDOutputPort, private readonly gateway: DIDGatewayOutputPort) {
+        super(presenter);
+    }
+
+    validateRequestModel(requestModel: AuthenticatedRequestModel<AddDIDRequest>): AddDIDError | undefined {
+        if (requestModel.type !== 'Dataset' && requestModel.type !== 'Container') {
+            return {
+                code: 400,
+                message: `Cannot add a did with ${requestModel.type}`,
+                status: 'error',
+                name: 'Invalid type',
+            };
+        }
+        return undefined;
+    }
+
+    async makeGatewayRequest(requestModel: AuthenticatedRequestModel<AddDIDRequest>): Promise<AddDIDDTO> {
+        const { rucioAuthToken, scope, name, type } = requestModel;
+        const dto: AddDIDDTO = await this.gateway.addDID(rucioAuthToken, scope, name, type as DIDType);
+        return dto;
+    }
+
+    handleGatewayError(error: AddDIDDTO): AddDIDError {
+        return {
+            status: 'error',
+            message: error.errorMessage ? error.errorMessage : 'Gateway Error',
+            name: `Gateway Error`,
+            code: error.errorCode,
+        } as AddDIDError;
+    }
+
+    processDTO(dto: AddDIDDTO): { data: AddDIDResponse | AddDIDError; status: 'success' | 'error' } {
+        // copy all fields from dto to response model except success
+        const responseModel: AddDIDResponse = {
+            ...dto,
+            status: 'success',
+        };
+
+        return {
+            status: 'success',
+            data: responseModel,
+        };
+    }
+}
diff --git a/src/lib/core/use-case/attach-dids-usecase.ts b/src/lib/core/use-case/attach-dids-usecase.ts
new file mode 100644
index 000000000..7d832dee1
--- /dev/null
+++ b/src/lib/core/use-case/attach-dids-usecase.ts
@@ -0,0 +1,51 @@
+import { injectable } from 'inversify';
+import { BaseSingleEndpointUseCase } from '@/lib/sdk/usecase';
+import { AuthenticatedRequestModel } from '@/lib/sdk/usecase-models';
+
+import { AttachDIDsError, AttachDIDsRequest, AttachDIDsResponse } from '@/lib/core/usecase-models/attach-dids-usecase-models';
+import { AttachDIDsInputPort, type AttachDIDsOutputPort } from '@/lib/core/port/primary/attach-dids-ports';
+
+import { AttachDIDDTO } from '@/lib/core/dto/did-dto';
+import type DIDGatewayOutputPort from '@/lib/core/port/secondary/did-gateway-output-port';
+import { DID } from '@/lib/core/entity/rucio';
+
+@injectable()
+export default class AttachDIDsUseCase
+    extends BaseSingleEndpointUseCase<AuthenticatedRequestModel<AttachDIDsRequest>, AttachDIDsResponse, AttachDIDsError, AttachDIDDTO>
+    implements AttachDIDsInputPort
+{
+    constructor(protected readonly presenter: AttachDIDsOutputPort, private readonly gateway: DIDGatewayOutputPort) {
+        super(presenter);
+    }
+
+    validateRequestModel(requestModel: AuthenticatedRequestModel<AttachDIDsRequest>): AttachDIDsError | undefined {
+        return undefined;
+    }
+
+    async makeGatewayRequest(requestModel: AuthenticatedRequestModel<AttachDIDsRequest>): Promise<AttachDIDDTO> {
+        const { rucioAuthToken, scope, name, dids } = requestModel;
+        const dto: AttachDIDDTO = await this.gateway.attachDIDs(rucioAuthToken, scope, name, dids as DID[]);
+        return dto;
+    }
+    handleGatewayError(error: AttachDIDDTO): AttachDIDsError {
+        return {
+            status: 'error',
+            message: error.errorMessage ? error.errorMessage : 'Gateway Error',
+            name: `Gateway Error`,
+            code: error.errorCode,
+        } as AttachDIDsError;
+    }
+
+    processDTO(dto: AttachDIDDTO): { data: AttachDIDsResponse | AttachDIDsError; status: 'success' | 'error' } {
+        // copy all fields from dto to response model except success
+        const responseModel: AttachDIDsResponse = {
+            ...dto,
+            status: 'success',
+        };
+
+        return {
+            status: 'success',
+            data: responseModel,
+        };
+    }
+}
diff --git a/src/lib/core/use-case/create-rule-usecase.ts b/src/lib/core/use-case/create-rule-usecase.ts
new file mode 100644
index 000000000..0b2491e1d
--- /dev/null
+++ b/src/lib/core/use-case/create-rule-usecase.ts
@@ -0,0 +1,197 @@
+import { injectable } from 'inversify';
+import { BaseSingleEndpointUseCase } from '@/lib/sdk/usecase';
+import { AuthenticatedRequestModel } from '@/lib/sdk/usecase-models';
+
+import { CreateRuleError, CreateRuleRequest, CreateRuleResponse } from '@/lib/core/usecase-models/create-rule-usecase-models';
+import { CreateRuleInputPort, type CreateRuleOutputPort } from '@/lib/core/port/primary/create-rule-ports';
+
+import { CreateRuleDTO } from '@/lib/core/dto/rule-dto';
+import type RuleGatewayOutputPort from '@/lib/core/port/secondary/rule-gateway-output-port';
+import type AccountGatewayOutputPort from '@/lib/core/port/secondary/account-gateway-output-port';
+import type DIDGatewayOutputPort from '@/lib/core/port/secondary/did-gateway-output-port';
+import { AccountInfoDTO } from '@/lib/core/dto/account-dto';
+import { generateNewScope, generateRequestDIDName, generateSampleDIDName } from '@/lib/core/utils/did-utils';
+import { DIDExtendedDTO, SetDIDStatusDTO } from '@/lib/core/dto/did-dto';
+import { DID, DIDShort, DIDType } from '@/lib/core/entity/rucio';
+import { buildIntermediateCreateRuleError, buildIntermediateSetStatusError } from '@/lib/core/utils/create-rule-utils';
+
+@injectable()
+export default class CreateRuleUseCase
+    extends BaseSingleEndpointUseCase<AuthenticatedRequestModel<CreateRuleRequest>, CreateRuleResponse, CreateRuleError, CreateRuleDTO>
+    implements CreateRuleInputPort
+{
+    constructor(
+        protected readonly presenter: CreateRuleOutputPort,
+        private readonly ruleGateway: RuleGatewayOutputPort,
+        private readonly accountGateway: AccountGatewayOutputPort,
+        private readonly didGateway: DIDGatewayOutputPort,
+    ) {
+        super(presenter);
+    }
+
+    validateRequestModel(requestModel: AuthenticatedRequestModel<CreateRuleRequest>): CreateRuleError | undefined {
+        return undefined;
+    }
+
+    private async classifyDIDs(requestModel: AuthenticatedRequestModel<CreateRuleRequest>): Promise<DID[]> {
+        const classifiedDIDs: DID[] = [];
+
+        for (const did of requestModel.dids) {
+            const extendedDTO: DIDExtendedDTO = await this.didGateway.getDID(requestModel.rucioAuthToken, did.scope, did.name, undefined);
+            if (extendedDTO.status === 'error') throw new Error();
+            classifiedDIDs.push({
+                scope: did.scope,
+                name: did.name,
+                did_type: extendedDTO.did_type,
+            });
+        }
+
+        return classifiedDIDs;
+    }
+
+    private async createRequestCollection(
+        requestModel: AuthenticatedRequestModel<CreateRuleRequest>,
+        params: { newScope: string; classifiedDIDs: DID[] },
+    ): Promise<SetDIDStatusDTO> {
+        const { newScope, classifiedDIDs: dids } = params;
+
+        const datasets: DIDShort[] = [];
+        const files: DIDShort[] = [];
+
+        for (const did of dids) {
+            if (did.did_type === DIDType.FILE) {
+                files.push(did);
+            } else if (did.did_type === DIDType.DATASET) {
+                datasets.push(did);
+            } else {
+                return {
+                    status: 'error',
+                    errorMessage: `Cannot ask for approving multiple DIDs when one of them has unsupported type ${did.did_type}`,
+                    errorType: 'Request Type',
+                    scope: '',
+                    name: '',
+                    open: false,
+                };
+            }
+        }
+
+        // Add and populate the request dataset/container
+        const initializeCollection = async (dids: DIDShort[], type: DIDType.DATASET | DIDType.CONTAINER): Promise<SetDIDStatusDTO> => {
+            const newName = generateRequestDIDName(newScope);
+            const addDTO = await this.didGateway.addDID(requestModel.rucioAuthToken, newScope, newName, type);
+            if (addDTO.status === 'error') return buildIntermediateSetStatusError(addDTO, 'Request Add');
+            const attachDTO = await this.didGateway.attachDIDs(requestModel.rucioAuthToken, newScope, newName, dids);
+            if (attachDTO.status === 'error') return buildIntermediateSetStatusError(attachDTO, 'Request Attach');
+            return this.didGateway.setDIDStatus(requestModel.rucioAuthToken, newScope, newName, false);
+        };
+
+        // Pack chosen files in a dataset
+        if (files.length > 0) {
+            const requestDatasetDTO = await initializeCollection(files, DIDType.DATASET);
+            // Check if no other datasets are chosen
+            if (requestDatasetDTO.status === 'error' || datasets.length === 0) {
+                return requestDatasetDTO;
+            } else {
+                // Forward it to be packed in a container
+                datasets.push({
+                    scope: requestDatasetDTO.scope,
+                    name: requestDatasetDTO.name,
+                });
+            }
+        }
+
+        // Pack chosen datasets in a container
+        if (datasets.length > 0) {
+            return await initializeCollection(datasets, DIDType.CONTAINER);
+        }
+
+        return {
+            status: 'error',
+            errorMessage: 'Received no valid DIDs',
+            errorType: 'Request Empty',
+            scope: '',
+            name: '',
+            open: false,
+        };
+    }
+
+    async makeGatewayRequest(requestModel: AuthenticatedRequestModel<CreateRuleRequest>): Promise<CreateRuleDTO> {
+        // TODO: decompose
+
+        if (requestModel.sample && requestModel.sample_file_count) {
+            const accountInfoDTO: AccountInfoDTO = await this.accountGateway.getAccountInfo(requestModel.account, requestModel.rucioAuthToken);
+            if (accountInfoDTO.status === 'error') return buildIntermediateCreateRuleError(accountInfoDTO, 'Account Info');
+            const newScope = generateNewScope(requestModel.account, accountInfoDTO.accountType);
+
+            const sampled: DIDShort[] = [];
+            for (const did of requestModel.dids) {
+                const newName = generateSampleDIDName(newScope, did.name);
+                const sampleDTO = await this.didGateway.createDIDSample(
+                    requestModel.rucioAuthToken,
+                    did.scope,
+                    did.name,
+                    newScope,
+                    newName,
+                    requestModel.sample_file_count,
+                );
+                if (sampleDTO.status === 'error' || !sampleDTO.created) {
+                    return buildIntermediateCreateRuleError(sampleDTO, 'Create Sample');
+                }
+                sampled.push({ scope: newScope, name: newName });
+            }
+            requestModel.dids = sampled;
+        }
+
+        const classifiedDIDs = await this.classifyDIDs(requestModel);
+
+        if (requestModel.ask_approval && requestModel.dids.length > 1) {
+            const accountInfoDTO: AccountInfoDTO = await this.accountGateway.getAccountInfo(requestModel.account, requestModel.rucioAuthToken);
+            if (accountInfoDTO.status === 'error') return buildIntermediateCreateRuleError(accountInfoDTO, 'Account Info');
+            const newScope = generateNewScope(requestModel.account, accountInfoDTO.accountType);
+
+            const requestCollectionDTO = await this.createRequestCollection(requestModel, {
+                newScope,
+                classifiedDIDs,
+            });
+            if (requestCollectionDTO.status === 'error' || requestCollectionDTO.open) {
+                return buildIntermediateCreateRuleError(requestCollectionDTO, requestCollectionDTO.errorType ?? 'Request Status');
+            }
+            requestModel.dids = [{ scope: requestCollectionDTO.scope, name: requestCollectionDTO.name }];
+
+            // If datasets were chosen, they got packed in a container
+            // Containers are usually huge, so the request should be asynchronous regardless
+            if (classifiedDIDs.some(did => did.did_type === DIDType.DATASET)) {
+                requestModel.asynchronous = true;
+            }
+        }
+
+        if (classifiedDIDs.some(did => did.did_type === DIDType.CONTAINER)) {
+            requestModel.asynchronous = true;
+        }
+
+        const { rucioAuthToken, sample, sample_file_count, ...gatewayParams } = requestModel;
+        const dto: CreateRuleDTO = await this.ruleGateway.createRule(rucioAuthToken, gatewayParams);
+        return dto;
+    }
+
+    handleGatewayError(error: CreateRuleDTO): CreateRuleError {
+        const type = error.errorType ? `${error.errorType}: ` : '';
+        return {
+            status: 'error',
+            error: `Gateway retuned with ${error.errorCode}: ${error.errorMessage}`,
+            message: error.errorMessage ? error.errorMessage : `${type}Gateway Error`,
+            name: `${type}Gateway Error`,
+            code: error.errorCode,
+        } as CreateRuleError;
+    }
+
+    processDTO(dto: CreateRuleDTO): { data: CreateRuleResponse | CreateRuleError; status: 'success' | 'error' } {
+        return {
+            status: 'success',
+            data: {
+                status: 'success',
+                rule_ids: dto.rule_ids,
+            },
+        };
+    }
+}
diff --git a/src/lib/core/use-case/set-did-status-usecase.ts b/src/lib/core/use-case/set-did-status-usecase.ts
new file mode 100644
index 000000000..3ead5a8e6
--- /dev/null
+++ b/src/lib/core/use-case/set-did-status-usecase.ts
@@ -0,0 +1,50 @@
+import { injectable } from 'inversify';
+import { BaseSingleEndpointUseCase } from '@/lib/sdk/usecase';
+import { AuthenticatedRequestModel } from '@/lib/sdk/usecase-models';
+
+import { SetDIDStatusError, SetDIDStatusRequest, SetDIDStatusResponse } from '@/lib/core/usecase-models/set-did-status-usecase-models';
+import { SetDIDStatusInputPort, type SetDIDStatusOutputPort } from '@/lib/core/port/primary/set-did-status-ports';
+
+import { SetDIDStatusDTO } from '@/lib/core/dto/did-dto';
+import type DIDGatewayOutputPort from '@/lib/core/port/secondary/did-gateway-output-port';
+
+@injectable()
+export default class SetDIDStatusUseCase
+    extends BaseSingleEndpointUseCase<AuthenticatedRequestModel<SetDIDStatusRequest>, SetDIDStatusResponse, SetDIDStatusError, SetDIDStatusDTO>
+    implements SetDIDStatusInputPort
+{
+    constructor(protected readonly presenter: SetDIDStatusOutputPort, private readonly gateway: DIDGatewayOutputPort) {
+        super(presenter);
+    }
+
+    validateRequestModel(requestModel: AuthenticatedRequestModel<SetDIDStatusRequest>): SetDIDStatusError | undefined {
+        return undefined;
+    }
+
+    async makeGatewayRequest(requestModel: AuthenticatedRequestModel<SetDIDStatusRequest>): Promise<SetDIDStatusDTO> {
+        const { rucioAuthToken, scope, name, open } = requestModel;
+        const dto: SetDIDStatusDTO = await this.gateway.setDIDStatus(rucioAuthToken, scope, name, open);
+        return dto;
+    }
+    handleGatewayError(error: SetDIDStatusDTO): SetDIDStatusError {
+        return {
+            status: 'error',
+            message: error.errorMessage ? error.errorMessage : 'Gateway Error',
+            name: `Gateway Error`,
+            code: error.errorCode,
+        } as SetDIDStatusError;
+    }
+
+    processDTO(dto: SetDIDStatusDTO): { data: SetDIDStatusResponse | SetDIDStatusError; status: 'success' | 'error' } {
+        // copy all fields from dto to response model except success
+        const responseModel: SetDIDStatusResponse = {
+            ...dto,
+            status: 'success',
+        };
+
+        return {
+            status: 'success',
+            data: responseModel,
+        };
+    }
+}
diff --git a/src/lib/core/usecase-models/add-did-usecase-models.ts b/src/lib/core/usecase-models/add-did-usecase-models.ts
new file mode 100644
index 000000000..0129aac64
--- /dev/null
+++ b/src/lib/core/usecase-models/add-did-usecase-models.ts
@@ -0,0 +1,21 @@
+import { BaseErrorResponseModel, BaseResponseModel } from '@/lib/sdk/usecase-models';
+/**
+ * @interface AddDIDRequest represents the RequestModel for add_did usecase
+ */
+export interface AddDIDRequest {
+    scope: string;
+    name: string;
+    type: string;
+}
+
+/**
+ * @interface AddDIDResponse represents the ResponseModel for add_did usecase
+ */
+export interface AddDIDResponse extends BaseResponseModel {
+    created: boolean;
+}
+
+/**
+ * @interface AddDIDError represents the ErrorModel for add_did usecase
+ */
+export interface AddDIDError extends BaseErrorResponseModel {}
diff --git a/src/lib/core/usecase-models/attach-dids-usecase-models.ts b/src/lib/core/usecase-models/attach-dids-usecase-models.ts
new file mode 100644
index 000000000..5ee275f44
--- /dev/null
+++ b/src/lib/core/usecase-models/attach-dids-usecase-models.ts
@@ -0,0 +1,25 @@
+import { BaseErrorResponseModel, BaseResponseModel } from '@/lib/sdk/usecase-models';
+
+/**
+ * @interface AttachDIDsRequest represents the RequestModel for attach_dids usecase
+ */
+export interface AttachDIDsRequest {
+    scope: string;
+    name: string;
+    dids: {
+        scope: string;
+        name: string;
+    }[];
+}
+
+/**
+ * @interface AttachDIDsResponse represents the ResponseModel for attach_dids usecase
+ */
+export interface AttachDIDsResponse extends BaseResponseModel {
+    created: boolean;
+}
+
+/**
+ * @interface AttachDIDsError represents the ErrorModel for attach_dids usecase
+ */
+export interface AttachDIDsError extends BaseErrorResponseModel {}
diff --git a/src/lib/core/usecase-models/create-rule-usecase-models.ts b/src/lib/core/usecase-models/create-rule-usecase-models.ts
new file mode 100644
index 000000000..ea783445f
--- /dev/null
+++ b/src/lib/core/usecase-models/create-rule-usecase-models.ts
@@ -0,0 +1,22 @@
+import { BaseErrorResponseModel, BaseResponseModel } from '@/lib/sdk/usecase-models';
+import { RuleCreationParameters } from '@/lib/core/entity/rucio';
+
+/**
+ * @interface CreateRuleRequest represents the RequestModel for create_rule usecase
+ */
+export interface CreateRuleRequest extends RuleCreationParameters {
+    sample: boolean;
+    sample_file_count?: number;
+}
+
+/**
+ * @interface CreateRuleResponse represents the ResponseModel for create_rule usecase
+ */
+export interface CreateRuleResponse extends BaseResponseModel {
+    rule_ids: string[];
+}
+
+/**
+ * @interface CreateRuleError represents the ErrorModel for create_rule usecase
+ */
+export interface CreateRuleError extends BaseErrorResponseModel {}
diff --git a/src/lib/core/usecase-models/set-did-status-usecase-models.ts b/src/lib/core/usecase-models/set-did-status-usecase-models.ts
new file mode 100644
index 000000000..6571a9830
--- /dev/null
+++ b/src/lib/core/usecase-models/set-did-status-usecase-models.ts
@@ -0,0 +1,19 @@
+import { BaseErrorResponseModel, BaseResponseModel } from '@/lib/sdk/usecase-models';
+/**
+ * @interface SetDIDStatusRequest represents the RequestModel for set_did_status usecase
+ */
+export interface SetDIDStatusRequest {
+    scope: string;
+    name: string;
+    open: boolean;
+}
+
+/**
+ * @interface SetDIDStatusResponse represents the ResponseModel for set_did_status usecase
+ */
+export interface SetDIDStatusResponse extends BaseResponseModel {}
+
+/**
+ * @interface SetDIDStatusError represents the ErrorModel for set_did_status usecase
+ */
+export interface SetDIDStatusError extends BaseErrorResponseModel {}
diff --git a/src/lib/core/utils/create-rule-utils.ts b/src/lib/core/utils/create-rule-utils.ts
index e2e6527b4..7b4f36f32 100644
--- a/src/lib/core/utils/create-rule-utils.ts
+++ b/src/lib/core/utils/create-rule-utils.ts
@@ -3,6 +3,9 @@ import { AccountRSELimitDTO, AccountRSEUsageDTO } from '../dto/account-dto';
 import { RSEDTO } from '../dto/rse-dto';
 import { DIDLong, DIDType, RSEAccountUsage } from '../entity/rucio';
 import { TAccountRSEUsageAndLimits, TDIDSummaryRow, TRSESummaryRow } from '../entity/rule-summary';
+import { BaseDTO } from '@/lib/sdk/dto';
+import { CreateRuleDTO } from '@/lib/core/dto/rule-dto';
+import { SetDIDStatusDTO } from '@/lib/core/dto/did-dto';
 
 /**
  * Creates a DID Summary Row for the DID Summary Table used to Create New Rules. bytes and requested_bytes are set to -1 if the DID is a derived DID.
@@ -84,36 +87,35 @@ export const getQuotaInfo = (
     account: string,
     accountRSEUsageAndLimits: TAccountRSEUsageAndLimits,
     totalDIDBytesRequested: number,
-): (TRSESummaryRow & { status: 'success' }) | BaseErrorResponseModel => {
+):
+    | (TRSESummaryRow & {
+          status: 'success';
+      })
+    | BaseErrorResponseModel => {
     const rseName = rse.name;
-    if (!accountRSEUsageAndLimits[rseName]) {
-        const errorModel: BaseErrorResponseModel = {
-            status: 'error',
-            code: 500,
-            message: `Could not get usage and quota for ${rseName}`,
-            name: 'UseCase Stream Error',
+    const data = accountRSEUsageAndLimits[rseName];
+
+    if (!data || !data.limit) {
+        return {
+            status: 'success',
+            rse: rse.name,
+            rse_id: rse.id,
+            account: account,
+            files: -1,
+            used_bytes: -1,
+            bytes_limit: -1,
+            bytes_remaining: -1,
+            has_quota: false,
+            total_expected_usage: -1,
         };
-        return errorModel;
-    }
-
-    const accountRSEUsageAndLimit = accountRSEUsageAndLimits[rseName];
-
-    let bytesLimit = accountRSEUsageAndLimit.limit;
-    if (bytesLimit === undefined) {
-        const errorModel: BaseErrorResponseModel = {
-            status: 'error',
-            code: 500,
-            message: `Could not get usage and quota for ${rseName}. Account has no limits specified!`,
-            name: 'UseCase Stream Error',
-        };
-        return errorModel;
     }
 
+    let bytesLimit = data.limit;
     if (bytesLimit < 0) {
         bytesLimit = 0;
     }
 
-    let bytesRemaining = accountRSEUsageAndLimit.bytesRemaining ? accountRSEUsageAndLimit.bytesRemaining : 0;
+    let bytesRemaining = data.bytesRemaining ? data.bytesRemaining : 0;
 
     let bytesUsed = bytesLimit - bytesRemaining;
 
@@ -148,3 +150,27 @@ export const getQuotaInfo = (
         total_expected_usage: totalExpectedUsage,
     };
 };
+
+export const buildIntermediateCreateRuleError = (errorDTO: BaseDTO, type: string): CreateRuleDTO => {
+    return {
+        status: 'error',
+        errorCode: errorDTO.errorCode,
+        errorMessage: errorDTO.errorMessage,
+        errorName: errorDTO.errorName,
+        errorType: type,
+        rule_ids: [],
+    };
+};
+
+export const buildIntermediateSetStatusError = (errorDTO: BaseDTO, type: string): SetDIDStatusDTO => {
+    return {
+        status: 'error',
+        errorCode: errorDTO.errorCode,
+        errorMessage: errorDTO.errorMessage,
+        errorName: errorDTO.errorName,
+        errorType: type,
+        scope: '',
+        name: '',
+        open: false,
+    };
+};
diff --git a/src/lib/core/utils/did-utils.ts b/src/lib/core/utils/did-utils.ts
index e6e8139a9..d37c2fb8a 100644
--- a/src/lib/core/utils/did-utils.ts
+++ b/src/lib/core/utils/did-utils.ts
@@ -31,3 +31,27 @@ export const generateDerivedDIDName = (newScope: string, selectedDID: DID): DID
         did_type: DIDType.DERIVED,
     } as DID;
 };
+
+export const generateSampleDIDName = (newScope: string, name: string) => {
+    return `${newScope}.${name}_der${Math.floor(Date.now() / 1000)}`;
+};
+
+/**
+ * Generates a DID name by appending the current date and time
+ * to a given scope in the format: `scope.r2d2_request.YYYY-MM-DD_HH-MM-SS`.
+ */
+export const generateRequestDIDName = (scope: string) => {
+    const now = new Date();
+
+    const year = now.getFullYear();
+    const month = (now.getMonth() + 1).toString().padStart(2, '0');
+    const day = now.getDate().toString().padStart(2, '0');
+
+    const hours = now.getHours().toString().padStart(2, '0');
+    const minutes = now.getMinutes().toString().padStart(2, '0');
+    const seconds = now.getSeconds().toString().padStart(2, '0');
+
+    const formattedDate = `${year}-${month}-${day}_${hours}-${minutes}-${seconds}`;
+
+    return `${scope}.r2d2_request.${formattedDate}`;
+};
diff --git a/src/lib/infrastructure/controller/add-did-controller.ts b/src/lib/infrastructure/controller/add-did-controller.ts
new file mode 100644
index 000000000..9497f1dd4
--- /dev/null
+++ b/src/lib/infrastructure/controller/add-did-controller.ts
@@ -0,0 +1,31 @@
+import { injectable, inject } from 'inversify';
+import { NextApiResponse } from 'next';
+
+import { AuthenticatedRequestModel } from '@/lib/sdk/usecase-models';
+import { BaseController, TAuthenticatedControllerParameters } from '@/lib/sdk/controller';
+import { AddDIDRequest } from '@/lib/core/usecase-models/add-did-usecase-models';
+import { AddDIDInputPort } from '@/lib/core/port/primary/add-did-ports';
+import USECASE_FACTORY from '@/lib/infrastructure/ioc/ioc-symbols-usecase-factory';
+
+export type AddDIDControllerParameters = TAuthenticatedControllerParameters & {
+    scope: string;
+    name: string;
+    type: string;
+};
+
+@injectable()
+class AddDIDController extends BaseController<AddDIDControllerParameters, AuthenticatedRequestModel<AddDIDRequest>> {
+    constructor(@inject(USECASE_FACTORY.ADD_DID) addDIDUseCaseFactory: (response: NextApiResponse) => AddDIDInputPort) {
+        super(addDIDUseCaseFactory);
+    }
+    prepareRequestModel(parameters: AddDIDControllerParameters): AuthenticatedRequestModel<AddDIDRequest> {
+        return {
+            rucioAuthToken: parameters.rucioAuthToken,
+            scope: parameters.scope,
+            name: parameters.name,
+            type: parameters.type,
+        };
+    }
+}
+
+export default AddDIDController;
diff --git a/src/lib/infrastructure/controller/attach-dids-controller.ts b/src/lib/infrastructure/controller/attach-dids-controller.ts
new file mode 100644
index 000000000..212f863c3
--- /dev/null
+++ b/src/lib/infrastructure/controller/attach-dids-controller.ts
@@ -0,0 +1,34 @@
+import { injectable, inject } from 'inversify';
+import { NextApiResponse } from 'next';
+
+import { AuthenticatedRequestModel } from '@/lib/sdk/usecase-models';
+import { BaseController, TAuthenticatedControllerParameters } from '@/lib/sdk/controller';
+import { AttachDIDsRequest } from '@/lib/core/usecase-models/attach-dids-usecase-models';
+import { AttachDIDsInputPort } from '@/lib/core/port/primary/attach-dids-ports';
+import USECASE_FACTORY from '@/lib/infrastructure/ioc/ioc-symbols-usecase-factory';
+
+export type AttachDIDsControllerParameters = TAuthenticatedControllerParameters & {
+    scope: string;
+    name: string;
+    dids: {
+        scope: string;
+        name: string;
+    }[];
+};
+
+@injectable()
+class AttachDIDsController extends BaseController<AttachDIDsControllerParameters, AuthenticatedRequestModel<AttachDIDsRequest>> {
+    constructor(@inject(USECASE_FACTORY.ATTACH_DIDS) attachDIDsUseCaseFactory: (response: NextApiResponse) => AttachDIDsInputPort) {
+        super(attachDIDsUseCaseFactory);
+    }
+    prepareRequestModel(parameters: AttachDIDsControllerParameters): AuthenticatedRequestModel<AttachDIDsRequest> {
+        return {
+            rucioAuthToken: parameters.rucioAuthToken,
+            scope: parameters.scope,
+            name: parameters.name,
+            dids: parameters.dids,
+        };
+    }
+}
+
+export default AttachDIDsController;
diff --git a/src/lib/infrastructure/controller/create-rule-controller.ts b/src/lib/infrastructure/controller/create-rule-controller.ts
new file mode 100644
index 000000000..f727a33e4
--- /dev/null
+++ b/src/lib/infrastructure/controller/create-rule-controller.ts
@@ -0,0 +1,54 @@
+import { injectable, inject } from 'inversify';
+import { NextApiResponse } from 'next';
+
+import { AuthenticatedRequestModel } from '@/lib/sdk/usecase-models';
+import { BaseController, TAuthenticatedControllerParameters } from '@/lib/sdk/controller';
+import { CreateRuleRequest } from '@/lib/core/usecase-models/create-rule-usecase-models';
+import { CreateRuleInputPort } from '@/lib/core/port/primary/create-rule-ports';
+import USECASE_FACTORY from '@/lib/infrastructure/ioc/ioc-symbols-usecase-factory';
+import { z } from 'zod';
+
+export type CreateRuleControllerParameters = TAuthenticatedControllerParameters & {
+    dids: {
+        scope: string;
+        name: string;
+    }[];
+    copies: number;
+    rse_expression: string;
+    account: string;
+    grouping?: 'ALL' | 'DATASET' | 'NONE';
+    lifetime_days?: number;
+    notify?: boolean;
+    comments?: string;
+    ask_approval?: boolean;
+    asynchronous?: boolean;
+    sample?: boolean;
+    sample_file_count?: number;
+};
+
+@injectable()
+class CreateRuleController extends BaseController<CreateRuleControllerParameters, AuthenticatedRequestModel<CreateRuleRequest>> {
+    constructor(@inject(USECASE_FACTORY.CREATE_RULE) createRuleUseCaseFactory: (response: NextApiResponse) => CreateRuleInputPort) {
+        super(createRuleUseCaseFactory);
+    }
+    prepareRequestModel(parameters: CreateRuleControllerParameters): AuthenticatedRequestModel<CreateRuleRequest> {
+        return {
+            rucioAuthToken: parameters.rucioAuthToken,
+            dids: parameters.dids,
+            copies: parameters.copies,
+            rse_expression: parameters.rse_expression,
+            account: parameters.account,
+            grouping: parameters.grouping,
+            // Convert to seconds
+            lifetime: parameters.lifetime_days ? parameters.lifetime_days * 86400 : undefined,
+            notify: parameters.notify ? 'Y' : 'N',
+            comments: parameters.comments,
+            asynchronous: parameters.asynchronous,
+            ask_approval: parameters.ask_approval,
+            sample: parameters.sample ?? false,
+            sample_file_count: parameters.sample_file_count,
+        };
+    }
+}
+
+export default CreateRuleController;
diff --git a/src/lib/infrastructure/controller/set-did-status-controller.ts b/src/lib/infrastructure/controller/set-did-status-controller.ts
new file mode 100644
index 000000000..b03dc6fc6
--- /dev/null
+++ b/src/lib/infrastructure/controller/set-did-status-controller.ts
@@ -0,0 +1,31 @@
+import { injectable, inject } from 'inversify';
+import { NextApiResponse } from 'next';
+
+import { AuthenticatedRequestModel } from '@/lib/sdk/usecase-models';
+import { BaseController, TAuthenticatedControllerParameters } from '@/lib/sdk/controller';
+import { SetDIDStatusRequest } from '@/lib/core/usecase-models/set-did-status-usecase-models';
+import { SetDIDStatusInputPort } from '@/lib/core/port/primary/set-did-status-ports';
+import USECASE_FACTORY from '@/lib/infrastructure/ioc/ioc-symbols-usecase-factory';
+
+export type SetDIDStatusControllerParameters = TAuthenticatedControllerParameters & {
+    scope: string;
+    name: string;
+    open: boolean;
+};
+
+@injectable()
+class SetDIDStatusController extends BaseController<SetDIDStatusControllerParameters, AuthenticatedRequestModel<SetDIDStatusRequest>> {
+    constructor(@inject(USECASE_FACTORY.SET_DID_STATUS) setDIDStatusUseCaseFactory: (response: NextApiResponse) => SetDIDStatusInputPort) {
+        super(setDIDStatusUseCaseFactory);
+    }
+    prepareRequestModel(parameters: SetDIDStatusControllerParameters): AuthenticatedRequestModel<SetDIDStatusRequest> {
+        return {
+            rucioAuthToken: parameters.rucioAuthToken,
+            scope: parameters.scope,
+            name: parameters.name,
+            open: parameters.open,
+        };
+    }
+}
+
+export default SetDIDStatusController;
diff --git a/src/lib/infrastructure/data/view-model/did.ts b/src/lib/infrastructure/data/view-model/did.ts
index 9be42afeb..f0ce37db2 100644
--- a/src/lib/infrastructure/data/view-model/did.ts
+++ b/src/lib/infrastructure/data/view-model/did.ts
@@ -14,13 +14,19 @@ import {
 import { BaseViewModel } from '@/lib/sdk/view-models';
 
 export interface DIDViewModel extends DID, BaseViewModel {}
+
 export interface DIDLongViewModel extends DIDLong, BaseViewModel {}
 
 export interface DIDMetaViewModel extends DIDMeta, BaseViewModel {}
+
 export interface DIDKeyValuePairsDataViewModel extends DIDKeyValuePairsData, BaseViewModel {}
+
 export interface DIDRulesViewModel extends DIDRules, BaseViewModel {}
+
 export interface DIDDatasetReplicasViewModel extends DIDDatasetReplicas, BaseViewModel {}
+
 export interface FileReplicaStateViewModel extends FileReplicaState, BaseViewModel {}
+
 export interface FilereplicaStateDViewModel extends FileReplicaStateD, BaseViewModel {}
 
 export function generateEmptyDIDRulesViewModel(): DIDRulesViewModel {
@@ -62,3 +68,32 @@ export function generateEmptyDIDDatasetReplicasViewModel(): DIDDatasetReplicasVi
         last_accessed: '',
     } as DIDDatasetReplicasViewModel;
 }
+
+export interface AddDIDViewModel extends BaseViewModel {
+    created: boolean;
+}
+
+export const getEmptyAddDIDViewModel = (): AddDIDViewModel => {
+    return {
+        status: 'error',
+        created: false,
+    };
+};
+
+export interface AttachDIDsViewModel extends BaseViewModel {
+    created: boolean;
+}
+
+export const getEmptyAttachDIDsViewModel = (): AttachDIDsViewModel => {
+    return {
+        status: 'error',
+        created: false,
+    };
+};
+
+// auto-generated by meow-maker
+export interface SetDIDStatusViewModel extends BaseViewModel {}
+
+export const getEmptySetDIDStatusViewModel = (): SetDIDStatusViewModel => {
+    return { status: 'error' };
+};
diff --git a/src/lib/infrastructure/data/view-model/rule.ts b/src/lib/infrastructure/data/view-model/rule.ts
index cdb846960..20737cfc7 100644
--- a/src/lib/infrastructure/data/view-model/rule.ts
+++ b/src/lib/infrastructure/data/view-model/rule.ts
@@ -1,6 +1,7 @@
-import { AccountInfo, DIDLong, DIDType, Rule, RuleMeta, RulePageLockEntry, RuleState } from '@/lib/core/entity/rucio';
+import { Rule, RuleMeta, RulePageLockEntry, RuleState } from '@/lib/core/entity/rucio';
 import { BaseViewModel } from '@/lib/sdk/view-models';
 import { RSEAccountUsageLimitViewModel } from '@/lib/infrastructure/data/view-model/rse';
+import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
 
 export interface RuleViewModel extends Rule, BaseViewModel {}
 
@@ -8,27 +9,58 @@ export interface RulePageLockEntryViewModel extends RulePageLockEntry, BaseViewM
 
 export interface RuleMetaViewModel extends RuleMeta, BaseViewModel {}
 
-export interface RuleSummaryViewModel extends BaseViewModel {
-    RSEViewModels: Array<RSEAccountUsageLimitViewModel>;
-    DIDViewModels: Array<DIDLong>;
-    expirydate: Date;
-    lifetime: number;
-    notifications: boolean;
-    asynchronousMode: boolean;
-    numcopies: number;
-    takeSamples: boolean;
-    numsamples: number;
-    groupby: DIDType;
-    comment: string;
-    approval: boolean;
-    accountInfo: AccountInfo;
+export enum CreateRuleGrouping {
+    ALL = 'All',
+    DATASET = 'Dataset',
+    NONE = 'None',
 }
 
+export interface CreateRuleOptions {
+    copies: number;
+
+    daysLifetime?: number;
+    notify: boolean;
+    asynchronous: boolean;
+    grouping?: CreateRuleGrouping;
+
+    sample: boolean;
+    sampleFileCount?: number;
+
+    comments?: string;
+}
+
+export interface CreateRuleStorage {
+    rses: RSEAccountUsageLimitViewModel[];
+    rseExpression?: string;
+}
+
+export interface CreateRuleParameters extends CreateRuleOptions, CreateRuleStorage {
+    dids: ListDIDsViewModel[];
+    needsApproval: boolean;
+    askApproval: boolean;
+}
+
+export const getEmptyCreateRuleParameters = (): CreateRuleParameters => {
+    return {
+        askApproval: false,
+        needsApproval: false,
+        asynchronous: false,
+        copies: 1,
+        daysLifetime: undefined,
+        dids: [],
+        grouping: undefined,
+        sample: false,
+        notify: false,
+        rses: [],
+    };
+};
+
 export const generateEmptyRuleViewModel = (): RuleViewModel => {
     return {
         account: '',
         created_at: '',
         id: '',
+        scope: '',
         locks_ok_cnt: 0,
         locks_replicating_cnt: 0,
         locks_stuck_cnt: 0,
@@ -39,3 +71,14 @@ export const generateEmptyRuleViewModel = (): RuleViewModel => {
         status: 'error',
     };
 };
+
+export interface CreateRuleViewModel extends BaseViewModel {
+    rule_ids: string[];
+}
+
+export const getEmptyCreateRuleViewModel = (): CreateRuleViewModel => {
+    return {
+        status: 'error',
+        rule_ids: [],
+    };
+};
diff --git a/src/lib/infrastructure/gateway/did-gateway/endpoints/add-did-endpoint.ts b/src/lib/infrastructure/gateway/did-gateway/endpoints/add-did-endpoint.ts
index ed20d614a..7a3c5a3ed 100644
--- a/src/lib/infrastructure/gateway/did-gateway/endpoints/add-did-endpoint.ts
+++ b/src/lib/infrastructure/gateway/did-gateway/endpoints/add-did-endpoint.ts
@@ -26,8 +26,6 @@ export default class AddDIDEndpoint extends BaseEndpoint<AddDIDDTO> {
                 'Content-Type': 'application/json',
             },
             body: {
-                scope: this.scope,
-                name: this.name,
                 type: this.didType.toUpperCase(),
             },
         };
diff --git a/src/lib/infrastructure/gateway/did-gateway/endpoints/attach-dids-endpoint.ts b/src/lib/infrastructure/gateway/did-gateway/endpoints/attach-dids-endpoint.ts
index 39220be64..d46c18e9c 100644
--- a/src/lib/infrastructure/gateway/did-gateway/endpoints/attach-dids-endpoint.ts
+++ b/src/lib/infrastructure/gateway/did-gateway/endpoints/attach-dids-endpoint.ts
@@ -1,15 +1,15 @@
 import { AttachDIDDTO } from '@/lib/core/dto/did-dto';
-import { DID } from '@/lib/core/entity/rucio';
 import { BaseEndpoint, extractErrorMessage } from '@/lib/sdk/gateway-endpoints';
 import { HTTPRequest } from '@/lib/sdk/http';
 import { Response } from 'node-fetch';
+import { DIDShort } from '@/lib/core/entity/rucio';
 
 export default class AttachDIDsEndpoint extends BaseEndpoint<AttachDIDDTO> {
     constructor(
         private readonly rucioAuthToken: string,
         private readonly scope: string,
         private readonly name: string,
-        private readonly dids: DID[],
+        private readonly dids: DIDShort[],
     ) {
         super(true);
     }
@@ -26,8 +26,6 @@ export default class AttachDIDsEndpoint extends BaseEndpoint<AttachDIDDTO> {
                 'Content-Type': 'application/json',
             },
             body: {
-                scope: this.scope,
-                name: this.name,
                 dids: this.dids.map(did => {
                     return {
                         scope: did.scope,
diff --git a/src/lib/infrastructure/gateway/did-gateway/endpoints/set-did-status-endpoints.ts b/src/lib/infrastructure/gateway/did-gateway/endpoints/set-did-status-endpoints.ts
index c2afbf59c..0e0de3b8a 100644
--- a/src/lib/infrastructure/gateway/did-gateway/endpoints/set-did-status-endpoints.ts
+++ b/src/lib/infrastructure/gateway/did-gateway/endpoints/set-did-status-endpoints.ts
@@ -22,7 +22,7 @@ export default class SetDIDStatusEndpoint extends BaseEndpoint<SetDIDStatusDTO>
                 'Content-Type': 'application/json',
             },
             body: {
-                open: open,
+                open: this.open,
             },
             params: undefined,
         };
diff --git a/src/lib/infrastructure/gateway/rule-gateway/endpoints/create-rule-endpoint.ts b/src/lib/infrastructure/gateway/rule-gateway/endpoints/create-rule-endpoint.ts
new file mode 100644
index 000000000..19e247fcb
--- /dev/null
+++ b/src/lib/infrastructure/gateway/rule-gateway/endpoints/create-rule-endpoint.ts
@@ -0,0 +1,58 @@
+import { CreateRuleDTO } from '@/lib/core/dto/rule-dto';
+import { BaseEndpoint } from '@/lib/sdk/gateway-endpoints';
+import { HTTPRequest } from '@/lib/sdk/http';
+import { Response } from 'node-fetch';
+import { RuleCreationParameters } from '@/lib/core/entity/rucio';
+
+export default class CreateRuleEndpoint extends BaseEndpoint<CreateRuleDTO> {
+    constructor(private readonly rucioAuthToken: string, private readonly params: RuleCreationParameters) {
+        super();
+    }
+
+    async initialize(): Promise<void> {
+        await super.initialize();
+        const rucioHost = await this.envConfigGateway.rucioHost();
+        const endpoint = `${rucioHost}/rules/`;
+
+        this.params.activity = 'User Subscriptions';
+
+        const request: HTTPRequest = {
+            method: 'POST',
+            url: endpoint,
+            headers: {
+                'X-Rucio-Auth-Token': this.rucioAuthToken,
+                'Content-Type': 'application/json',
+            },
+            body: this.params,
+        };
+        this.request = request;
+        this.initialized = true;
+    }
+
+    /**
+     * If this method is called, it means that the response from Rucio was not in any of the error types in ${@link handleCommonGatewayEndpointErrors}
+     * @param statusCode The status code returned from Rucio
+     * @param response The reponse containing error data
+     * @returns
+     */
+    async reportErrors(statusCode: number, response: Response): Promise<CreateRuleDTO | undefined> {
+        const data = await response.json();
+        const errorDTO: CreateRuleDTO = {
+            rule_ids: [],
+            status: 'error',
+            errorMessage: data,
+            errorCode: statusCode,
+            errorName: 'Unknown Error',
+            errorType: 'gateway-endpoint-error',
+        };
+        return Promise.resolve(errorDTO);
+    }
+
+    createDTO(data: string[]): CreateRuleDTO {
+        const dto: CreateRuleDTO = {
+            status: 'success',
+            rule_ids: data,
+        };
+        return dto;
+    }
+}
diff --git a/src/lib/infrastructure/gateway/rule-gateway/rule-gateway-utils.ts b/src/lib/infrastructure/gateway/rule-gateway/rule-gateway-utils.ts
index aea605057..cbd60e462 100644
--- a/src/lib/infrastructure/gateway/rule-gateway/rule-gateway-utils.ts
+++ b/src/lib/infrastructure/gateway/rule-gateway/rule-gateway-utils.ts
@@ -81,14 +81,18 @@ function getReplicaLockState(state: string): LockState {
 }
 
 export function convertToRuleDTO(rule: TRucioRule): RuleDTO {
+    const millisecondsRemaining = rule.expires_at ? new Date(rule.expires_at).getTime() - Date.now() : 0;
+
     return {
         status: 'success',
         id: rule.id,
+        scope: rule.scope,
         name: rule.name,
         account: rule.account,
         rse_expression: rule.rse_expression,
         created_at: rule.created_at,
-        remaining_lifetime: rule.expires_at ? new Date(rule.expires_at).getTime() - Date.now() : 0,
+        // Convert to seconds
+        remaining_lifetime: millisecondsRemaining / 1000,
         state: getRuleState(rule.state),
         locks_ok_cnt: rule.locks_ok_cnt,
         locks_replicating_cnt: rule.locks_replicating_cnt,
@@ -108,6 +112,7 @@ export function convertToRuleReplicaLockDTO(ruleReplicaLockState: TRucioRuleRepl
 export function getEmptyRuleDTO(): RuleDTO {
     return {
         status: 'error',
+        scope: '',
         id: '',
         name: '',
         account: '',
diff --git a/src/lib/infrastructure/gateway/rule-gateway/rule-gateway.ts b/src/lib/infrastructure/gateway/rule-gateway/rule-gateway.ts
index 3f4f7dd00..4b7d06e06 100644
--- a/src/lib/infrastructure/gateway/rule-gateway/rule-gateway.ts
+++ b/src/lib/infrastructure/gateway/rule-gateway/rule-gateway.ts
@@ -1,4 +1,4 @@
-import { ListRulesDTO, RuleDTO } from '@/lib/core/dto/rule-dto';
+import { CreateRuleDTO, ListRulesDTO, RuleDTO } from '@/lib/core/dto/rule-dto';
 import RuleGatewayOutputPort from '@/lib/core/port/secondary/rule-gateway-output-port';
 import { BaseStreamableDTO } from '@/lib/sdk/dto';
 import { injectable } from 'inversify';
@@ -6,6 +6,8 @@ import GetRuleEndpoint from './endpoints/get-rule-endpoints';
 import ListRuleReplicaLockStatesEndpoint from './endpoints/list-rule-replica-lock-states-endpoint';
 import ListRulesEndpoint from './endpoints/list-rules-endpoint';
 import { ListRulesFilter } from '@/lib/infrastructure/gateway/rule-gateway/rule-gateway-utils';
+import { RuleCreationParameters } from '@/lib/core/entity/rucio';
+import CreateRuleEndpoint from '@/lib/infrastructure/gateway/rule-gateway/endpoints/create-rule-endpoint';
 
 @injectable()
 export default class RuleGateway implements RuleGatewayOutputPort {
@@ -58,4 +60,10 @@ export default class RuleGateway implements RuleGatewayOutputPort {
             return Promise.resolve(errorDTO);
         }
     }
+
+    async createRule(rucioAuthToken: string, params: RuleCreationParameters): Promise<CreateRuleDTO> {
+        const endpoint = new CreateRuleEndpoint(rucioAuthToken, params);
+        const dto = await endpoint.fetch();
+        return dto;
+    }
 }
diff --git a/src/lib/infrastructure/hooks/useChunkedStream.ts b/src/lib/infrastructure/hooks/useStreamReader.ts
similarity index 96%
rename from src/lib/infrastructure/hooks/useChunkedStream.ts
rename to src/lib/infrastructure/hooks/useStreamReader.ts
index cac94e532..7d8155702 100644
--- a/src/lib/infrastructure/hooks/useChunkedStream.ts
+++ b/src/lib/infrastructure/hooks/useStreamReader.ts
@@ -35,7 +35,7 @@ export type StreamingSettings<TData> = {
     maxUpdateLength?: number;
 };
 
-export interface UseChunkedStream<TData> {
+export interface UseStreamReader<TData> {
     status: StreamingStatus;
     error: StreamingError | undefined;
     start: (options: StreamingSettings<TData>) => void;
@@ -50,7 +50,7 @@ export interface UseChunkedStream<TData> {
  * @returns stop - A function which interrupts the fetching while deleting its state
  * @returns error - A string with explanation of the error
  */
-export default function useChunkedStream<TData>(): UseChunkedStream<TData> {
+export default function useStreamReader<TData>(): UseStreamReader<TData> {
     const [status, setStatus] = useState<StreamingStatus>(StreamingStatus.STOPPED);
     const [error, setError] = useState<StreamingError | undefined>(undefined);
     // These refs are required for the correct state handling during fetching
diff --git a/src/lib/infrastructure/hooks/useTableStreaming.ts b/src/lib/infrastructure/hooks/useTableStreaming.ts
new file mode 100644
index 000000000..ecebbb367
--- /dev/null
+++ b/src/lib/infrastructure/hooks/useTableStreaming.ts
@@ -0,0 +1,76 @@
+import { BaseViewModel } from '@/lib/sdk/view-models';
+import useStreamReader, { StreamingStatus } from '@/lib/infrastructure/hooks/useStreamReader';
+import { useEffect, useState } from 'react';
+import { GridApi, GridReadyEvent } from 'ag-grid-community';
+import { useToast } from '@/lib/infrastructure/hooks/useToast';
+import { BaseViewModelValidator } from '@/component-library/features/utils/BaseViewModelValidator';
+import { alreadyStreamingToast, noApiToast } from '@/component-library/features/utils/list-toasts';
+
+/**
+ * Custom hook to handle streaming data into an AG Grid table.
+ *
+ * @template T - The type of data model to be used in the grid, extending {@link BaseViewModel}.
+ * @param {T[]} [initialData] - Optional initial data to populate the grid with.
+ * @returns {Object} An object containing the following properties:
+ * - `streamingHook` - The hook used for streaming data.
+ * - `onGridReady` - Callback function to be used as an event handler for when the grid is ready.
+ * - `startStreaming` - Function to start streaming data from a specified URL.
+ * - `stopStreaming` - Function to stop the streaming of data.
+ */
+export default function useTableStreaming<T extends BaseViewModel>(initialData?: T[]) {
+    const streamingHook = useStreamReader<T>();
+    const [gridApi, setGridApi] = useState<GridApi<T> | null>(null);
+
+    const { toast, dismiss } = useToast();
+    const validator = new BaseViewModelValidator(toast);
+
+    const onGridReady = (event: GridReadyEvent) => {
+        setGridApi(event.api);
+    };
+
+    useEffect(() => {
+        if (gridApi && initialData) {
+            onData(initialData);
+        }
+    }, [gridApi]);
+
+    const onData = (data: T[]) => {
+        const validData = data.filter(element => validator.isValid(element));
+        gridApi?.applyTransactionAsync({ add: validData });
+    };
+
+    const isRunning = streamingHook.status === StreamingStatus.RUNNING;
+
+    const startStreaming = (url: string, fetchOptions?: RequestInit) => {
+        if (isRunning) {
+            toast(alreadyStreamingToast);
+            return;
+        }
+
+        if (gridApi) {
+            // Hide active toasts
+            dismiss();
+
+            // Make sure there are no pending transactions
+            gridApi.flushAsyncTransactions();
+
+            // Empty the grid
+            gridApi.setGridOption('rowData', []);
+
+            // Reset the validator
+            validator.reset();
+
+            streamingHook.start({ url, onData, fetchOptions });
+        } else {
+            toast(noApiToast);
+        }
+    };
+
+    const stopStreaming = () => {
+        if (isRunning) {
+            streamingHook.stop();
+        }
+    };
+
+    return { streamingHook, onGridReady, startStreaming, stopStreaming, gridApi };
+}
diff --git a/src/lib/infrastructure/ioc/container-config.ts b/src/lib/infrastructure/ioc/container-config.ts
index 7127c3c8b..a13bb7bc5 100644
--- a/src/lib/infrastructure/ioc/container-config.ts
+++ b/src/lib/infrastructure/ioc/container-config.ts
@@ -65,6 +65,10 @@ import GetAccountInfoFeature from './features/get-account-info-feature';
 import GetRSEUsageFeature from '@/lib/infrastructure/ioc/features/get-rse-usage-feature';
 import ListRulesFeature from '@/lib/infrastructure/ioc/features/list-rules-feature';
 import ListAccountRSEUsageFeature from '@/lib/infrastructure/ioc/features/list-account-rse-usage-feature';
+import CreateRuleFeature from '@/lib/infrastructure/ioc/features/create-rule-feature';
+import AddDIDFeature from '@/lib/infrastructure/ioc/features/add-did-feature';
+import AttachDIDsFeature from '@/lib/infrastructure/ioc/features/attach-dids-feature';
+import SetDIDStatusFeature from '@/lib/infrastructure/ioc/features/set-did-status-feature';
 
 /**
  * IoC Container configuration for the application.
@@ -116,6 +120,10 @@ loadFeaturesSync(appContainer, [
     new ListAllRSEsFeature(appContainer),
     new ListAccountRSEQuotasFeature(appContainer),
     new GetAccountInfoFeature(appContainer),
+    new CreateRuleFeature(appContainer),
+    new AddDIDFeature(appContainer),
+    new AttachDIDsFeature(appContainer),
+    new SetDIDStatusFeature(appContainer),
 ]);
 
 //Features: List Subscriptions
diff --git a/src/lib/infrastructure/ioc/features/add-did-feature.ts b/src/lib/infrastructure/ioc/features/add-did-feature.ts
new file mode 100644
index 000000000..5dfef3d74
--- /dev/null
+++ b/src/lib/infrastructure/ioc/features/add-did-feature.ts
@@ -0,0 +1,29 @@
+import DIDGatewayOutputPort from '@/lib/core/port/secondary/did-gateway-output-port';
+import { AddDIDError, AddDIDRequest, AddDIDResponse } from '@/lib/core/usecase-models/add-did-usecase-models';
+import { AddDIDControllerParameters } from '@/lib/infrastructure/controller/add-did-controller';
+import AddDIDController from '@/lib/infrastructure/controller/add-did-controller';
+import { AddDIDViewModel } from '@/lib/infrastructure/data/view-model/did';
+import { BaseFeature, IOCSymbols } from '@/lib/sdk/ioc-helpers';
+import GATEWAYS from '@/lib/infrastructure/ioc/ioc-symbols-gateway';
+import CONTROLLERS from '@/lib/infrastructure/ioc/ioc-symbols-controllers';
+import INPUT_PORT from '@/lib/infrastructure/ioc/ioc-symbols-input-port';
+import USECASE_FACTORY from '@/lib/infrastructure/ioc/ioc-symbols-usecase-factory';
+import { Container } from 'inversify';
+
+import AddDIDUseCase from '@/lib/core/use-case/add-did-usecase';
+
+import AddDIDPresenter from '@/lib/infrastructure/presenter/add-did-presenter';
+
+export default class AddDIDFeature extends BaseFeature<AddDIDControllerParameters, AddDIDRequest, AddDIDResponse, AddDIDError, AddDIDViewModel> {
+    constructor(appContainer: Container) {
+        const rucioDIDGateway = appContainer.get<DIDGatewayOutputPort>(GATEWAYS.DID);
+
+        const symbols: IOCSymbols = {
+            CONTROLLER: CONTROLLERS.ADD_DID,
+            USECASE_FACTORY: USECASE_FACTORY.ADD_DID,
+            INPUT_PORT: INPUT_PORT.ADD_DID,
+        };
+        const useCaseConstructorArgs = [rucioDIDGateway];
+        super('AddDID', AddDIDController, AddDIDUseCase, useCaseConstructorArgs, AddDIDPresenter, false, symbols);
+    }
+}
diff --git a/src/lib/infrastructure/ioc/features/attach-dids-feature.ts b/src/lib/infrastructure/ioc/features/attach-dids-feature.ts
new file mode 100644
index 000000000..954be9c5f
--- /dev/null
+++ b/src/lib/infrastructure/ioc/features/attach-dids-feature.ts
@@ -0,0 +1,35 @@
+import DIDGatewayOutputPort from '@/lib/core/port/secondary/did-gateway-output-port';
+import { AttachDIDsError, AttachDIDsRequest, AttachDIDsResponse } from '@/lib/core/usecase-models/attach-dids-usecase-models';
+import { AttachDIDsControllerParameters } from '@/lib/infrastructure/controller/attach-dids-controller';
+import AttachDIDsController from '@/lib/infrastructure/controller/attach-dids-controller';
+import { AttachDIDsViewModel } from '@/lib/infrastructure/data/view-model/did';
+import { BaseFeature, IOCSymbols } from '@/lib/sdk/ioc-helpers';
+import GATEWAYS from '@/lib/infrastructure/ioc/ioc-symbols-gateway';
+import CONTROLLERS from '@/lib/infrastructure/ioc/ioc-symbols-controllers';
+import INPUT_PORT from '@/lib/infrastructure/ioc/ioc-symbols-input-port';
+import USECASE_FACTORY from '@/lib/infrastructure/ioc/ioc-symbols-usecase-factory';
+import { Container } from 'inversify';
+
+import AttachDIDsUseCase from '@/lib/core/use-case/attach-dids-usecase';
+
+import AttachDIDsPresenter from '@/lib/infrastructure/presenter/attach-dids-presenter';
+
+export default class AttachDIDsFeature extends BaseFeature<
+    AttachDIDsControllerParameters,
+    AttachDIDsRequest,
+    AttachDIDsResponse,
+    AttachDIDsError,
+    AttachDIDsViewModel
+> {
+    constructor(appContainer: Container) {
+        const rucioDIDGateway = appContainer.get<DIDGatewayOutputPort>(GATEWAYS.DID);
+
+        const symbols: IOCSymbols = {
+            CONTROLLER: CONTROLLERS.ATTACH_DIDS,
+            USECASE_FACTORY: USECASE_FACTORY.ATTACH_DIDS,
+            INPUT_PORT: INPUT_PORT.ATTACH_DIDS,
+        };
+        const useCaseConstructorArgs = [rucioDIDGateway];
+        super('AttachDIDs', AttachDIDsController, AttachDIDsUseCase, useCaseConstructorArgs, AttachDIDsPresenter, false, symbols);
+    }
+}
diff --git a/src/lib/infrastructure/ioc/features/create-rule-feature.ts b/src/lib/infrastructure/ioc/features/create-rule-feature.ts
new file mode 100644
index 000000000..62079b3a6
--- /dev/null
+++ b/src/lib/infrastructure/ioc/features/create-rule-feature.ts
@@ -0,0 +1,39 @@
+import RuleGatewayOutputPort from '@/lib/core/port/secondary/rule-gateway-output-port';
+import { CreateRuleError, CreateRuleRequest, CreateRuleResponse } from '@/lib/core/usecase-models/create-rule-usecase-models';
+import { CreateRuleControllerParameters } from '@/lib/infrastructure/controller/create-rule-controller';
+import CreateRuleController from '@/lib/infrastructure/controller/create-rule-controller';
+import { CreateRuleViewModel } from '@/lib/infrastructure/data/view-model/rule';
+import { BaseFeature, IOCSymbols } from '@/lib/sdk/ioc-helpers';
+import GATEWAYS from '@/lib/infrastructure/ioc/ioc-symbols-gateway';
+import CONTROLLERS from '@/lib/infrastructure/ioc/ioc-symbols-controllers';
+import INPUT_PORT from '@/lib/infrastructure/ioc/ioc-symbols-input-port';
+import USECASE_FACTORY from '@/lib/infrastructure/ioc/ioc-symbols-usecase-factory';
+import { Container } from 'inversify';
+
+import CreateRuleUseCase from '@/lib/core/use-case/create-rule-usecase';
+
+import CreateRulePresenter from '@/lib/infrastructure/presenter/create-rule-presenter';
+import AccountGatewayOutputPort from '@/lib/core/port/secondary/account-gateway-output-port';
+import DIDGatewayOutputPort from '@/lib/core/port/secondary/did-gateway-output-port';
+
+export default class CreateRuleFeature extends BaseFeature<
+    CreateRuleControllerParameters,
+    CreateRuleRequest,
+    CreateRuleResponse,
+    CreateRuleError,
+    CreateRuleViewModel
+> {
+    constructor(appContainer: Container) {
+        const ruleGateway = appContainer.get<RuleGatewayOutputPort>(GATEWAYS.RULE);
+        const accountGateway = appContainer.get<AccountGatewayOutputPort>(GATEWAYS.ACCOUNT);
+        const didGateway = appContainer.get<DIDGatewayOutputPort>(GATEWAYS.DID);
+
+        const symbols: IOCSymbols = {
+            CONTROLLER: CONTROLLERS.CREATE_RULE,
+            USECASE_FACTORY: USECASE_FACTORY.CREATE_RULE,
+            INPUT_PORT: INPUT_PORT.CREATE_RULE,
+        };
+        const useCaseConstructorArgs = [ruleGateway, accountGateway, didGateway];
+        super('CreateRule', CreateRuleController, CreateRuleUseCase, useCaseConstructorArgs, CreateRulePresenter, false, symbols);
+    }
+}
diff --git a/src/lib/infrastructure/ioc/features/set-did-status-feature.ts b/src/lib/infrastructure/ioc/features/set-did-status-feature.ts
new file mode 100644
index 000000000..3c659d56e
--- /dev/null
+++ b/src/lib/infrastructure/ioc/features/set-did-status-feature.ts
@@ -0,0 +1,35 @@
+import DIDGatewayOutputPort from '@/lib/core/port/secondary/did-gateway-output-port';
+import { SetDIDStatusError, SetDIDStatusRequest, SetDIDStatusResponse } from '@/lib/core/usecase-models/set-did-status-usecase-models';
+import { SetDIDStatusControllerParameters } from '@/lib/infrastructure/controller/set-did-status-controller';
+import SetDIDStatusController from '@/lib/infrastructure/controller/set-did-status-controller';
+import { SetDIDStatusViewModel } from '@/lib/infrastructure/data/view-model/did';
+import { BaseFeature, IOCSymbols } from '@/lib/sdk/ioc-helpers';
+import GATEWAYS from '@/lib/infrastructure/ioc/ioc-symbols-gateway';
+import CONTROLLERS from '@/lib/infrastructure/ioc/ioc-symbols-controllers';
+import INPUT_PORT from '@/lib/infrastructure/ioc/ioc-symbols-input-port';
+import USECASE_FACTORY from '@/lib/infrastructure/ioc/ioc-symbols-usecase-factory';
+import { Container } from 'inversify';
+
+import SetDIDStatusUseCase from '@/lib/core/use-case/set-did-status-usecase';
+
+import SetDIDStatusPresenter from '@/lib/infrastructure/presenter/set-did-status-presenter';
+
+export default class SetDIDStatusFeature extends BaseFeature<
+    SetDIDStatusControllerParameters,
+    SetDIDStatusRequest,
+    SetDIDStatusResponse,
+    SetDIDStatusError,
+    SetDIDStatusViewModel
+> {
+    constructor(appContainer: Container) {
+        const rucioDIDGateway = appContainer.get<DIDGatewayOutputPort>(GATEWAYS.DID);
+
+        const symbols: IOCSymbols = {
+            CONTROLLER: CONTROLLERS.SET_DID_STATUS,
+            USECASE_FACTORY: USECASE_FACTORY.SET_DID_STATUS,
+            INPUT_PORT: INPUT_PORT.SET_DID_STATUS,
+        };
+        const useCaseConstructorArgs = [rucioDIDGateway];
+        super('SetDIDStatus', SetDIDStatusController, SetDIDStatusUseCase, useCaseConstructorArgs, SetDIDStatusPresenter, false, symbols);
+    }
+}
diff --git a/src/lib/infrastructure/ioc/ioc-symbols-controllers.ts b/src/lib/infrastructure/ioc/ioc-symbols-controllers.ts
index 9624ffc7f..5e513e83b 100644
--- a/src/lib/infrastructure/ioc/ioc-symbols-controllers.ts
+++ b/src/lib/infrastructure/ioc/ioc-symbols-controllers.ts
@@ -32,6 +32,10 @@ const CONTROLLERS = {
     GET_RSE_USAGE: Symbol.for('GetRSEUsageController'),
     LIST_RULES: Symbol.for('ListRulesController'),
     LIST_ACCOUNT_RSE_USAGE: Symbol.for('ListAccountRSEUsageController'),
+    CREATE_RULE: Symbol.for('CreateRuleController'),
+    ADD_DID: Symbol.for('AddDIDController'),
+    ATTACH_DIDS: Symbol.for('AttachDIDsController'),
+    SET_DID_STATUS: Symbol.for('SetDIDStatusController'),
 };
 
 export default CONTROLLERS;
diff --git a/src/lib/infrastructure/ioc/ioc-symbols-input-port.ts b/src/lib/infrastructure/ioc/ioc-symbols-input-port.ts
index ef6e7c52e..12645e1dc 100644
--- a/src/lib/infrastructure/ioc/ioc-symbols-input-port.ts
+++ b/src/lib/infrastructure/ioc/ioc-symbols-input-port.ts
@@ -31,6 +31,10 @@ const INPUT_PORT = {
     GET_RSE_USAGE: Symbol.for('GetRSEUsageInputPort'),
     LIST_RULES: Symbol.for('ListRulesInputPort'),
     LIST_ACCOUNT_RSE_USAGE: Symbol.for('ListAccountRSEUsageInputPort'),
+    CREATE_RULE: Symbol.for('CreateRuleInputPort'),
+    ADD_DID: Symbol.for('AddDIDInputPort'),
+    ATTACH_DIDS: Symbol.for('AttachDIDsInputPort'),
+    SET_DID_STATUS: Symbol.for('SetDIDStatusInputPort'),
 };
 
 export default INPUT_PORT;
diff --git a/src/lib/infrastructure/ioc/ioc-symbols-usecase-factory.ts b/src/lib/infrastructure/ioc/ioc-symbols-usecase-factory.ts
index cc7a5a4c5..0773a0ef6 100644
--- a/src/lib/infrastructure/ioc/ioc-symbols-usecase-factory.ts
+++ b/src/lib/infrastructure/ioc/ioc-symbols-usecase-factory.ts
@@ -32,6 +32,10 @@ const USECASE_FACTORY = {
     GET_RSE_USAGE: Symbol.for('Factory<GetRSEUsageUseCase>'),
     LiST_RULES: Symbol.for('Factory<ListRulesUseCase>'),
     LIST_ACCOUNT_RSE_USAGE: Symbol.for('Factory<ListAccountRSEUsageUseCase>'),
+    CREATE_RULE: Symbol.for('Factory<CreateRuleUseCase>'),
+    ADD_DID: Symbol.for('Factory<AddDIDUseCase>'),
+    ATTACH_DIDS: Symbol.for('Factory<AttachDIDsUseCase>'),
+    SET_DID_STATUS: Symbol.for('Factory<SetDIDStatus>'),
 };
 
 export default USECASE_FACTORY;
diff --git a/src/lib/infrastructure/presenter/add-did-presenter.ts b/src/lib/infrastructure/presenter/add-did-presenter.ts
new file mode 100644
index 000000000..0b756f81b
--- /dev/null
+++ b/src/lib/infrastructure/presenter/add-did-presenter.ts
@@ -0,0 +1,27 @@
+import { BasePresenter } from '@/lib/sdk/presenter';
+import { AddDIDError, AddDIDResponse } from '@/lib/core/usecase-models/add-did-usecase-models';
+import { AddDIDViewModel, getEmptyAddDIDViewModel } from '@/lib/infrastructure/data/view-model/did';
+
+export default class AddDIDPresenter extends BasePresenter<AddDIDResponse, AddDIDError, AddDIDViewModel> {
+    convertResponseModelToViewModel(responseModel: AddDIDResponse): { viewModel: AddDIDViewModel; status: number } {
+        const viewModel: AddDIDViewModel = {
+            ...responseModel,
+        };
+        return {
+            status: 200,
+            viewModel: viewModel,
+        };
+    }
+
+    convertErrorModelToViewModel(errorModel: AddDIDError): { viewModel: AddDIDViewModel; status: number } {
+        const viewModel: AddDIDViewModel = getEmptyAddDIDViewModel();
+        // gateway errors
+        const message = errorModel.message || errorModel.name;
+        viewModel.message = message;
+        const errorCode = errorModel.code || 500;
+        return {
+            status: errorCode,
+            viewModel: viewModel,
+        };
+    }
+}
diff --git a/src/lib/infrastructure/presenter/attach-dids-presenter.ts b/src/lib/infrastructure/presenter/attach-dids-presenter.ts
new file mode 100644
index 000000000..941a2a3c8
--- /dev/null
+++ b/src/lib/infrastructure/presenter/attach-dids-presenter.ts
@@ -0,0 +1,28 @@
+import { BasePresenter } from '@/lib/sdk/presenter';
+import { AttachDIDsError, AttachDIDsResponse } from '@/lib/core/usecase-models/attach-dids-usecase-models';
+import { AttachDIDsViewModel, getEmptyAttachDIDsViewModel } from '@/lib/infrastructure/data/view-model/did';
+
+export default class AttachDIDsPresenter extends BasePresenter<AttachDIDsResponse, AttachDIDsError, AttachDIDsViewModel> {
+    convertResponseModelToViewModel(responseModel: AttachDIDsResponse): { viewModel: AttachDIDsViewModel; status: number } {
+        const viewModel: AttachDIDsViewModel = {
+            ...responseModel,
+        };
+        return {
+            status: 200,
+            viewModel: viewModel,
+        };
+    }
+
+    convertErrorModelToViewModel(errorModel: AttachDIDsError): { viewModel: AttachDIDsViewModel; status: number } {
+        const viewModel: AttachDIDsViewModel = getEmptyAttachDIDsViewModel();
+
+        // gateway errors
+        const message = errorModel.message || errorModel.name;
+        viewModel.message = message;
+        const errorCode = errorModel.code || 500;
+        return {
+            status: errorCode,
+            viewModel: viewModel,
+        };
+    }
+}
diff --git a/src/lib/infrastructure/presenter/create-rule-presenter.ts b/src/lib/infrastructure/presenter/create-rule-presenter.ts
new file mode 100644
index 000000000..96a936932
--- /dev/null
+++ b/src/lib/infrastructure/presenter/create-rule-presenter.ts
@@ -0,0 +1,59 @@
+import { CreateRuleError, CreateRuleResponse } from '@/lib/core/usecase-models/create-rule-usecase-models';
+import { NextApiResponse } from 'next';
+import { CreateRuleViewModel, getEmptyCreateRuleViewModel } from '@/lib/infrastructure/data/view-model/rule';
+import { BasePresenter } from '@/lib/sdk/presenter';
+import { CreateRuleOutputPort } from '@/lib/core/port/primary/create-rule-ports';
+
+export default class CreateRulePresenter
+    extends BasePresenter<CreateRuleResponse, CreateRuleError, CreateRuleViewModel>
+    implements CreateRuleOutputPort
+{
+    response: NextApiResponse<any>;
+
+    constructor(response: NextApiResponse) {
+        super(response);
+        this.response = response;
+    }
+
+    convertResponseModelToViewModel(responseModel: CreateRuleResponse): { viewModel: CreateRuleViewModel; status: number } {
+        return {
+            status: 200,
+            viewModel: {
+                status: responseModel.status,
+                rule_ids: responseModel.rule_ids,
+            },
+        };
+    }
+
+    streamResponseModelToViewModel(responseModel: CreateRuleResponse): CreateRuleViewModel {
+        const viewModel: CreateRuleViewModel = {
+            ...responseModel,
+        };
+        return viewModel;
+    }
+
+    streamErrorModelToViewModel(error: CreateRuleError): CreateRuleViewModel {
+        const errorViewModel: CreateRuleViewModel = getEmptyCreateRuleViewModel();
+        errorViewModel.status = 'error';
+        errorViewModel.message = `${error.name}: ${error.message}`;
+        return errorViewModel;
+    }
+
+    /**
+     * Converts an error model to an error view model.
+     * @param errorModel The error model to convert.
+     * @returns The error view model that represents the error model.
+     */
+    convertErrorModelToViewModel(errorModel: CreateRuleError): { viewModel: CreateRuleViewModel; status: number } {
+        const viewModel: CreateRuleViewModel = getEmptyCreateRuleViewModel();
+        // gateway errors
+        const message = errorModel.message ? errorModel.message.toString() : errorModel.name;
+        const name = errorModel.name ? errorModel.name : '';
+        viewModel.message = message;
+        const errorCode = errorModel.code ? errorModel.code : 500;
+        return {
+            status: errorCode,
+            viewModel: viewModel,
+        };
+    }
+}
diff --git a/src/lib/infrastructure/presenter/set-did-status-presenter.ts b/src/lib/infrastructure/presenter/set-did-status-presenter.ts
new file mode 100644
index 000000000..1651b31db
--- /dev/null
+++ b/src/lib/infrastructure/presenter/set-did-status-presenter.ts
@@ -0,0 +1,28 @@
+import { BasePresenter } from '@/lib/sdk/presenter';
+import { SetDIDStatusError, SetDIDStatusResponse } from '@/lib/core/usecase-models/set-did-status-usecase-models';
+import { getEmptySetDIDStatusViewModel, SetDIDStatusViewModel } from '@/lib/infrastructure/data/view-model/did';
+
+export default class SetDIDStatusPresenter extends BasePresenter<SetDIDStatusResponse, SetDIDStatusError, SetDIDStatusViewModel> {
+    convertResponseModelToViewModel(responseModel: SetDIDStatusResponse): { viewModel: SetDIDStatusViewModel; status: number } {
+        const viewModel: SetDIDStatusViewModel = {
+            ...responseModel,
+        };
+        return {
+            status: 200,
+            viewModel: viewModel,
+        };
+    }
+
+    convertErrorModelToViewModel(errorModel: SetDIDStatusError): { viewModel: SetDIDStatusViewModel; status: number } {
+        const viewModel: SetDIDStatusViewModel = getEmptySetDIDStatusViewModel();
+
+        // gateway errors
+        const message = errorModel.message || errorModel.name;
+        viewModel.message = message;
+        const errorCode = errorModel.code || 500;
+        return {
+            status: errorCode,
+            viewModel: viewModel,
+        };
+    }
+}
diff --git a/src/pages/api/feature/add-did.ts b/src/pages/api/feature/add-did.ts
new file mode 100644
index 000000000..78130beec
--- /dev/null
+++ b/src/pages/api/feature/add-did.ts
@@ -0,0 +1,41 @@
+import { SessionUser } from '@/lib/core/entity/auth-models';
+
+import { withAuthenticatedSessionRoute } from '@/lib/infrastructure/auth/session-utils';
+import { AddDIDControllerParameters } from '@/lib/infrastructure/controller/add-did-controller';
+import appContainer from '@/lib/infrastructure/ioc/container-config';
+import { AddDIDRequest } from '@/lib/core/usecase-models/add-did-usecase-models';
+import CONTROLLERS from '@/lib/infrastructure/ioc/ioc-symbols-controllers';
+import { BaseController } from '@/lib/sdk/controller';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { z } from 'zod';
+
+const schema = z.object({
+    scope: z.string().min(1),
+    name: z.string().min(1),
+    type: z.enum(['Dataset', 'Container']),
+});
+
+async function addDID(req: NextApiRequest, res: NextApiResponse, rucioAuthToken: string, sessionUser?: SessionUser) {
+    if (req.method !== 'POST') {
+        res.status(405).json({ error: 'Method Not Allowed' });
+        return;
+    }
+
+    const params = schema.safeParse(req.body);
+    if (!params.success) {
+        // TODO: more detailed response
+        res.status(400).json({ error: 'Missing required parameters or provided parameters are invalid' });
+        return;
+    }
+
+    const controllerParameters: AddDIDControllerParameters = {
+        response: res,
+        rucioAuthToken: rucioAuthToken,
+        ...params.data,
+    };
+
+    const controller = appContainer.get<BaseController<AddDIDControllerParameters, AddDIDRequest>>(CONTROLLERS.ADD_DID);
+    await controller.execute(controllerParameters);
+}
+
+export default withAuthenticatedSessionRoute(addDID);
diff --git a/src/pages/api/feature/attach-dids.ts b/src/pages/api/feature/attach-dids.ts
new file mode 100644
index 000000000..a46eedc89
--- /dev/null
+++ b/src/pages/api/feature/attach-dids.ts
@@ -0,0 +1,48 @@
+import { SessionUser } from '@/lib/core/entity/auth-models';
+
+import { withAuthenticatedSessionRoute } from '@/lib/infrastructure/auth/session-utils';
+import { AttachDIDsControllerParameters } from '@/lib/infrastructure/controller/attach-dids-controller';
+import appContainer from '@/lib/infrastructure/ioc/container-config';
+import { AttachDIDsRequest } from '@/lib/core/usecase-models/attach-dids-usecase-models';
+import CONTROLLERS from '@/lib/infrastructure/ioc/ioc-symbols-controllers';
+import { BaseController } from '@/lib/sdk/controller';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { z } from 'zod';
+
+const schema = z.object({
+    dids: z
+        .array(
+            z.object({
+                scope: z.string().min(1),
+                name: z.string().min(1),
+            }),
+        )
+        .nonempty(),
+    scope: z.string().min(1),
+    name: z.string().min(1),
+});
+
+async function attachDIDs(req: NextApiRequest, res: NextApiResponse, rucioAuthToken: string, sessionUser?: SessionUser) {
+    if (req.method !== 'POST') {
+        res.status(405).json({ error: 'Method Not Allowed' });
+        return;
+    }
+
+    const params = schema.safeParse(req.body);
+    if (!params.success) {
+        // TODO: more detailed response
+        res.status(400).json({ error: 'Missing required parameters or provided parameters are invalid' });
+        return;
+    }
+
+    const controllerParameters: AttachDIDsControllerParameters = {
+        response: res,
+        rucioAuthToken: rucioAuthToken,
+        ...params.data,
+    };
+
+    const controller = appContainer.get<BaseController<AttachDIDsControllerParameters, AttachDIDsRequest>>(CONTROLLERS.ATTACH_DIDS);
+    await controller.execute(controllerParameters);
+}
+
+export default withAuthenticatedSessionRoute(attachDIDs);
diff --git a/src/pages/api/feature/create-rule.ts b/src/pages/api/feature/create-rule.ts
index 6eaf76c70..46ff21ea2 100644
--- a/src/pages/api/feature/create-rule.ts
+++ b/src/pages/api/feature/create-rule.ts
@@ -1,41 +1,62 @@
-import { DIDType } from '@/lib/core/entity/rucio';
+import { SessionUser } from '@/lib/core/entity/auth-models';
+
 import { withAuthenticatedSessionRoute } from '@/lib/infrastructure/auth/session-utils';
-import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
-import { RSEAccountUsageLimitViewModel } from '@/lib/infrastructure/data/view-model/rse';
+import { CreateRuleControllerParameters } from '@/lib/infrastructure/controller/create-rule-controller';
+import appContainer from '@/lib/infrastructure/ioc/container-config';
+import { CreateRuleRequest } from '@/lib/core/usecase-models/create-rule-usecase-models';
+import CONTROLLERS from '@/lib/infrastructure/ioc/ioc-symbols-controllers';
+import { BaseController } from '@/lib/sdk/controller';
+import { z } from 'zod';
 import { NextApiRequest, NextApiResponse } from 'next';
 
-/**
- * Data structure that represents the HTTP request body to invoke the CreateRule Feature
- * on the NextJS server.
- */
-export type TCreateRuleFeatureRequestParams = {
-    RSEViewModels: Array<RSEAccountUsageLimitViewModel>;
-    DIDViewModels: Array<ListDIDsViewModel>;
-    expirydate: Date;
-    lifetime: number;
-    notifications: boolean;
-    asynchronousMode: boolean;
-    numcopies: number;
-    numsamples: number;
-    groupby: DIDType;
-    comment: string;
-    approval: boolean;
-};
-
-async function endpoint(req: NextApiRequest, res: NextApiResponse, rucioAuthToken: string) {
+const schema = z.object({
+    dids: z
+        .array(
+            z.object({
+                scope: z.string().min(1),
+                name: z.string().min(1),
+            }),
+        )
+        .nonempty(),
+    copies: z.number().min(1),
+    rse_expression: z.string().min(1),
+    grouping: z.enum(['ALL', 'DATASET', 'NONE']).optional(),
+    lifetime_days: z.number().int().positive().optional(),
+    notify: z.boolean().optional(),
+    comments: z.string().optional(),
+    ask_approval: z.boolean().optional(),
+    asynchronous: z.boolean().optional(),
+    sample: z.boolean().optional(),
+    sample_file_count: z.number().int().positive().optional(),
+});
+
+async function createRule(req: NextApiRequest, res: NextApiResponse, rucioAuthToken: string, sessionUser?: SessionUser) {
     if (req.method !== 'POST') {
         res.status(405).json({ error: 'Method Not Allowed' });
         return;
     }
 
-    const data = req.body;
+    if (!sessionUser) {
+        res.status(401).json({ error: 'Unauthorized' });
+        return;
+    }
 
-    if (!data) {
-        res.status(400).json({ error: 'Missing body' });
+    const params = schema.safeParse(req.body);
+    if (!params.success) {
+        // TODO: more detailed response
+        res.status(400).json({ error: 'Missing required parameters or provided parameters are invalid' });
         return;
     }
 
-    res.status(200).json(req.body);
+    const controllerParameters: CreateRuleControllerParameters = {
+        response: res,
+        rucioAuthToken: rucioAuthToken,
+        account: sessionUser.rucioAccount,
+        ...params.data,
+    };
+
+    const controller = appContainer.get<BaseController<CreateRuleControllerParameters, CreateRuleRequest>>(CONTROLLERS.CREATE_RULE);
+    await controller.execute(controllerParameters);
 }
 
-export default withAuthenticatedSessionRoute(endpoint);
+export default withAuthenticatedSessionRoute(createRule);
diff --git a/src/pages/api/feature/list-account-rse-quotas.ts b/src/pages/api/feature/list-account-rse-quotas.ts
index d33e4179f..d283a1a77 100644
--- a/src/pages/api/feature/list-account-rse-quotas.ts
+++ b/src/pages/api/feature/list-account-rse-quotas.ts
@@ -18,13 +18,14 @@ async function endpoint(req: NextApiRequest, res: NextApiResponse, rucioAuthToke
         return;
     }
 
-    const requestedDIDs: DIDLong[] = req.body.requestedDIDs;
+    const jsonBody = JSON.parse(req.body);
+    const requestedDIDs: DIDLong[] = jsonBody.requestedDIDs;
     if (requestedDIDs === undefined || requestedDIDs === null || requestedDIDs.length === 0) {
         res.status(400).json({ error: 'Bad Request. List of DIDs must be provided in request body.' });
         return;
     }
 
-    let rseExpression: string = req.body.rseExpression;
+    let rseExpression: string = jsonBody.rseExpression;
     if (rseExpression === undefined || rseExpression === null || rseExpression.length === 0) {
         rseExpression = '';
     }
diff --git a/src/pages/api/feature/set-did-status.ts b/src/pages/api/feature/set-did-status.ts
new file mode 100644
index 000000000..3934c62d9
--- /dev/null
+++ b/src/pages/api/feature/set-did-status.ts
@@ -0,0 +1,41 @@
+import { SessionUser } from '@/lib/core/entity/auth-models';
+
+import { withAuthenticatedSessionRoute } from '@/lib/infrastructure/auth/session-utils';
+import { SetDIDStatusControllerParameters } from '@/lib/infrastructure/controller/set-did-status-controller';
+import appContainer from '@/lib/infrastructure/ioc/container-config';
+import { SetDIDStatusRequest } from '@/lib/core/usecase-models/set-did-status-usecase-models';
+import CONTROLLERS from '@/lib/infrastructure/ioc/ioc-symbols-controllers';
+import { BaseController } from '@/lib/sdk/controller';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { z } from 'zod';
+
+const schema = z.object({
+    scope: z.string().min(1),
+    name: z.string().min(1),
+    open: z.boolean(),
+});
+
+async function setDIDStatus(req: NextApiRequest, res: NextApiResponse, rucioAuthToken: string, sessionUser?: SessionUser) {
+    if (req.method !== 'PUT') {
+        res.status(405).json({ error: 'Method Not Allowed' });
+        return;
+    }
+
+    const params = schema.safeParse(req.body);
+    if (!params.success) {
+        // TODO: more detailed response
+        res.status(400).json({ error: 'Missing required parameters or provided parameters are invalid' });
+        return;
+    }
+
+    const controllerParameters: SetDIDStatusControllerParameters = {
+        response: res,
+        rucioAuthToken: rucioAuthToken,
+        ...params.data,
+    };
+
+    const controller = appContainer.get<BaseController<SetDIDStatusControllerParameters, SetDIDStatusRequest>>(CONTROLLERS.SET_DID_STATUS);
+    await controller.execute(controllerParameters);
+}
+
+export default withAuthenticatedSessionRoute(setDIDStatus);
diff --git a/test/api/did/add-did.test.ts b/test/api/did/add-did.test.ts
new file mode 100644
index 000000000..39f8cb8be
--- /dev/null
+++ b/test/api/did/add-did.test.ts
@@ -0,0 +1,67 @@
+import { DIDMetaRequest } from '@/lib/core/usecase-models/did-meta-usecase-models';
+import { DIDMetaControllerParameters } from '@/lib/infrastructure/controller/did-meta-controller';
+import appContainer from '@/lib/infrastructure/ioc/container-config';
+import CONTROLLERS from '@/lib/infrastructure/ioc/ioc-symbols-controllers';
+import { BaseController } from '@/lib/sdk/controller';
+import { NextApiResponse } from 'next';
+import { createHttpMocks } from 'test/fixtures/http-fixtures';
+import MockRucioServerFactory, { MockEndpoint } from 'test/fixtures/rucio-server';
+import { AddDIDControllerParameters } from '@/lib/infrastructure/controller/add-did-controller';
+import { AddDIDRequest } from '@/lib/core/usecase-models/add-did-usecase-models';
+
+describe('Add DID API Tests', () => {
+    beforeEach(() => {
+        fetchMock.doMock();
+        const addDIDMockEndpoint: MockEndpoint = {
+            url: `${MockRucioServerFactory.RUCIO_HOST}/dids/test/dataset1`,
+            method: 'POST',
+            response: {
+                status: 200,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: 'Created',
+            },
+            requestValidator: async req => {
+                const jsonBody = await req.json();
+                return jsonBody.type !== undefined;
+            },
+        };
+        MockRucioServerFactory.createMockRucioServer(true, [addDIDMockEndpoint]);
+    });
+    afterEach(() => {
+        fetchMock.dontMock();
+    });
+    it('should return a base view model signifying success', async () => {
+        const { req, res, session } = await createHttpMocks('/api/add-did', 'POST', {});
+
+        const addDIDController = appContainer.get<BaseController<AddDIDControllerParameters, AddDIDRequest>>(CONTROLLERS.ADD_DID);
+        const addDIDControllerParams: AddDIDControllerParameters = {
+            name: 'dataset1',
+            scope: 'test',
+            type: 'Dataset',
+            rucioAuthToken: MockRucioServerFactory.VALID_RUCIO_TOKEN,
+            response: res as unknown as NextApiResponse,
+        };
+        await addDIDController.execute(addDIDControllerParams);
+        expect(res._getStatusCode()).toBe(200);
+        const data = JSON.parse(res._getData());
+        expect(data.status).toBe('success');
+    });
+    it('should discard requests with wrong type', async () => {
+        const { req, res, session } = await createHttpMocks('/api/add-did', 'POST', {});
+
+        const addDIDController = appContainer.get<BaseController<AddDIDControllerParameters, AddDIDRequest>>(CONTROLLERS.ADD_DID);
+        const addDIDControllerParams: AddDIDControllerParameters = {
+            name: 'dataset1',
+            scope: 'test',
+            type: 'Wrong',
+            rucioAuthToken: MockRucioServerFactory.VALID_RUCIO_TOKEN,
+            response: res as unknown as NextApiResponse,
+        };
+        await addDIDController.execute(addDIDControllerParams);
+        expect(res._getStatusCode()).toBe(400);
+        const data = JSON.parse(res._getData());
+        expect(data.status).toBe('error');
+    });
+});
diff --git a/test/api/did/attach-dids.test.ts b/test/api/did/attach-dids.test.ts
new file mode 100644
index 000000000..fe48ee2bf
--- /dev/null
+++ b/test/api/did/attach-dids.test.ts
@@ -0,0 +1,59 @@
+import appContainer from '@/lib/infrastructure/ioc/container-config';
+import CONTROLLERS from '@/lib/infrastructure/ioc/ioc-symbols-controllers';
+import { BaseController } from '@/lib/sdk/controller';
+import { NextApiResponse } from 'next';
+import { createHttpMocks } from 'test/fixtures/http-fixtures';
+import MockRucioServerFactory, { MockEndpoint } from 'test/fixtures/rucio-server';
+import { AttachDIDsControllerParameters } from '@/lib/infrastructure/controller/attach-dids-controller';
+import { AttachDIDsRequest } from '@/lib/core/usecase-models/attach-dids-usecase-models';
+
+describe('Attach DIDs API Tests', () => {
+    beforeEach(() => {
+        fetchMock.doMock();
+        const addDIDMockEndpoint: MockEndpoint = {
+            url: `${MockRucioServerFactory.RUCIO_HOST}/dids/test/dataset1/dids`,
+            method: 'POST',
+            response: {
+                status: 200,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: 'Created',
+            },
+            requestValidator: async req => {
+                const jsonBody = await req.json();
+                return jsonBody.dids !== undefined;
+            },
+        };
+        MockRucioServerFactory.createMockRucioServer(true, [addDIDMockEndpoint]);
+    });
+    afterEach(() => {
+        fetchMock.dontMock();
+    });
+    it('should return a base view model signifying success', async () => {
+        const { req, res, session } = await createHttpMocks('/api/attach-dids', 'POST', {});
+
+        const attachDIDsController = appContainer.get<BaseController<AttachDIDsControllerParameters, AttachDIDsRequest>>(CONTROLLERS.ATTACH_DIDS);
+        const attachDIDsControllerParams: AttachDIDsControllerParameters = {
+            name: 'dataset1',
+            scope: 'test',
+            dids: [
+                {
+                    scope: 'test',
+                    name: 'file1',
+                },
+                {
+                    scope: 'test',
+                    name: 'file2',
+                },
+            ],
+            rucioAuthToken: MockRucioServerFactory.VALID_RUCIO_TOKEN,
+            response: res as unknown as NextApiResponse,
+        };
+        await attachDIDsController.execute(attachDIDsControllerParams);
+        expect(res._getStatusCode()).toBe(200);
+        const data = JSON.parse(res._getData());
+        expect(data.status).toBe('success');
+        expect(data.created).toBe(true);
+    });
+});
diff --git a/test/api/did/set-did-status.test.ts b/test/api/did/set-did-status.test.ts
new file mode 100644
index 000000000..331e949e8
--- /dev/null
+++ b/test/api/did/set-did-status.test.ts
@@ -0,0 +1,52 @@
+import appContainer from '@/lib/infrastructure/ioc/container-config';
+import CONTROLLERS from '@/lib/infrastructure/ioc/ioc-symbols-controllers';
+import { BaseController } from '@/lib/sdk/controller';
+import { NextApiResponse } from 'next';
+import { createHttpMocks } from 'test/fixtures/http-fixtures';
+import MockRucioServerFactory, { MockEndpoint } from 'test/fixtures/rucio-server';
+import { SetDIDStatusRequest } from '@/lib/core/usecase-models/set-did-status-usecase-models';
+import { SetDIDStatusControllerParameters } from '@/lib/infrastructure/controller/set-did-status-controller';
+
+describe('Set DID status API Tests', () => {
+    beforeEach(() => {
+        fetchMock.doMock();
+        const addDIDMockEndpoint: MockEndpoint = {
+            url: `${MockRucioServerFactory.RUCIO_HOST}/dids/test/dataset1/status`,
+            method: 'PUT',
+            response: {
+                status: 200,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: '',
+            },
+            requestValidator: async req => {
+                const jsonBody = await req.json();
+                console.log(jsonBody);
+                return jsonBody.open !== undefined;
+            },
+        };
+        MockRucioServerFactory.createMockRucioServer(true, [addDIDMockEndpoint]);
+    });
+    afterEach(() => {
+        fetchMock.dontMock();
+    });
+    it('should return a base view model signifying success', async () => {
+        const { req, res, session } = await createHttpMocks('/api/set-did-status', 'PUT', {});
+
+        const setDIDStatusController = appContainer.get<BaseController<SetDIDStatusControllerParameters, SetDIDStatusRequest>>(
+            CONTROLLERS.SET_DID_STATUS,
+        );
+        const setDIDStatusControllerParams: SetDIDStatusControllerParameters = {
+            name: 'dataset1',
+            scope: 'test',
+            open: true,
+            rucioAuthToken: MockRucioServerFactory.VALID_RUCIO_TOKEN,
+            response: res as unknown as NextApiResponse,
+        };
+        await setDIDStatusController.execute(setDIDStatusControllerParams);
+        expect(res._getStatusCode()).toBe(200);
+        const data = JSON.parse(res._getData());
+        expect(data.status).toBe('success');
+    });
+});
diff --git a/test/api/rule/create-rule.test.ts b/test/api/rule/create-rule.test.ts
new file mode 100644
index 000000000..21294a4d5
--- /dev/null
+++ b/test/api/rule/create-rule.test.ts
@@ -0,0 +1,599 @@
+import appContainer from '@/lib/infrastructure/ioc/container-config';
+import CONTROLLERS from '@/lib/infrastructure/ioc/ioc-symbols-controllers';
+
+import { NextApiResponse } from 'next';
+import { MockHttpStreamableResponseFactory } from 'test/fixtures/http-fixtures';
+import MockRucioServerFactory, { MockEndpoint } from '../../fixtures/rucio-server';
+import { BaseController } from '@/lib/sdk/controller';
+import { CreateRuleControllerParameters } from '@/lib/infrastructure/controller/create-rule-controller';
+import { CreateRuleRequest } from '@/lib/core/usecase-models/create-rule-usecase-models';
+import { CreateRuleViewModel } from '@/lib/infrastructure/data/view-model/rule';
+import { AccountType, DIDType } from '@/lib/core/entity/rucio';
+
+describe('Feature: CreateRule', () => {
+    const account = 'test_account';
+    const approvalUserScope = 'user.test_account';
+    const approvalGroupScope = 'group.test_account';
+    const approvalDIDName = 'user.test_account.r2d2_request.YYYY-MM-DD_HH-MM-SS';
+
+    const commonControllerParameters = {
+        copies: 1,
+        rse_expression: 'rse_expression_value',
+        account: account,
+        // Days
+        lifetime_days: 2,
+        notify: true,
+        comments: 'Test comment',
+        asynchronous: false,
+    };
+
+    const ruleIds = ['817b3030097446a38b3b842bf528e112'];
+
+    const getValidatedCreateRuleEndpoint = (gatewayParameters: any): MockEndpoint => ({
+        url: `${MockRucioServerFactory.RUCIO_HOST}/rules/`,
+        method: 'POST',
+        response: {
+            status: 200,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(ruleIds),
+        },
+        requestValidator: async req => {
+            const bodyJson = await req.text();
+            return bodyJson === JSON.stringify(gatewayParameters);
+        },
+    });
+
+    const createRuleEndpoint: MockEndpoint = {
+        url: `${MockRucioServerFactory.RUCIO_HOST}/rules/`,
+        method: 'POST',
+        response: {
+            status: 200,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(ruleIds),
+        },
+    };
+
+    const getAccountInfoEndpoint = (type: AccountType): MockEndpoint => ({
+        url: `${MockRucioServerFactory.RUCIO_HOST}/accounts/${account}`,
+        method: 'GET',
+        response: {
+            status: 200,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                email: null,
+                suspended_at: null,
+                deleted_at: null,
+                updated_at: Date.now(),
+                status: 'ACTIVE',
+                account: account,
+                account_type: type,
+                created_at: Date.now(),
+            }),
+        },
+    });
+
+    const getDIDInfoEndpoint = (scope: string, name: string, type: DIDType): MockEndpoint => ({
+        url: `${MockRucioServerFactory.RUCIO_HOST}/dids/${scope}/${name}/status`,
+        method: 'GET',
+        response: {
+            status: 200,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                scope: scope,
+                name: name,
+                type: type.toUpperCase(),
+                account: 'root',
+                bytes: 10485760,
+                length: 1,
+                md5: '273586f5e521dda4be1ba0a9bd31b35a',
+                adler32: '447957af',
+            }),
+        },
+    });
+
+    const genericDIDInfoEndpoint: MockEndpoint = {
+        url: `${MockRucioServerFactory.RUCIO_HOST}/dids/scope/name/status`,
+        includes: '/status',
+        method: 'GET',
+        response: {
+            status: 200,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                scope: 'test',
+                name: 'name',
+                type: DIDType.DATASET.toUpperCase(),
+                account: 'root',
+                bytes: 10485760,
+                length: 1,
+                md5: '273586f5e521dda4be1ba0a9bd31b35a',
+                adler32: '447957af',
+            }),
+        },
+    };
+
+    const getAddAttachDIDEndpoint = (scope: string): MockEndpoint => ({
+        url: `${MockRucioServerFactory.RUCIO_HOST}/dids/${scope}/name`,
+        includes: `/dids/${scope}`,
+        method: 'POST',
+        response: {
+            status: 200,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: 'Created',
+        },
+    });
+
+    const getSetStatusDIDEndpoint = (scope: string, name: string): MockEndpoint => ({
+        url: `${MockRucioServerFactory.RUCIO_HOST}/dids/${scope}/name/status`,
+        includes: `/dids/${scope}`,
+        method: 'PUT',
+        response: {
+            status: 200,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                scope: scope,
+                name: name,
+                open: false,
+            }),
+        },
+        requestValidator: async req => {
+            return req.url.includes('r2d2_request');
+        },
+    });
+
+    const createSampleDIDEndpoint: MockEndpoint = {
+        url: `${MockRucioServerFactory.RUCIO_HOST}/dids/sample`,
+        includes: `/dids/sample`,
+        method: 'POST',
+        response: {
+            status: 200,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: 'Created',
+        },
+    };
+
+    afterEach(() => {
+        fetchMock.dontMock();
+    });
+
+    it('Should correctly pass and transform parameters with no approval need and no sampling', async () => {
+        const dids = [{ scope: 'scope1', name: 'name1' }];
+
+        const gatewayParameters = {
+            dids: dids,
+            copies: commonControllerParameters.copies,
+            rse_expression: commonControllerParameters.rse_expression,
+            account: commonControllerParameters.account,
+            grouping: 'ALL',
+            // Seconds
+            lifetime: 172800,
+            notify: 'Y',
+            comments: commonControllerParameters.comments,
+            asynchronous: commonControllerParameters.asynchronous,
+            ask_approval: false,
+            activity: 'User Subscriptions',
+        };
+
+        MockRucioServerFactory.createMockRucioServer(true, [
+            getValidatedCreateRuleEndpoint(gatewayParameters),
+            getDIDInfoEndpoint('scope1', 'name1', DIDType.DATASET),
+        ]);
+
+        const res = MockHttpStreamableResponseFactory.getMockResponse();
+
+        const createRuleController = appContainer.get<BaseController<CreateRuleControllerParameters, CreateRuleRequest>>(CONTROLLERS.CREATE_RULE);
+        const createRuleControllerParams: CreateRuleControllerParameters = {
+            rucioAuthToken: MockRucioServerFactory.VALID_RUCIO_TOKEN,
+            response: res as unknown as NextApiResponse,
+            dids,
+            ...commonControllerParameters,
+            ask_approval: false,
+            grouping: 'ALL',
+        };
+
+        await createRuleController.execute(createRuleControllerParams);
+
+        const viewModel: CreateRuleViewModel = res._getJSONData();
+        expect(viewModel.status).toEqual('success');
+        expect(viewModel.rule_ids.length).toEqual(1);
+    });
+
+    it('On approval need, should try to address account gateway and fail', async () => {
+        const dids = [
+            { scope: 'scope1', name: 'name1' },
+            { scope: 'scope2', name: 'name2' },
+        ];
+
+        MockRucioServerFactory.createMockRucioServer(true, [createRuleEndpoint]);
+
+        const res = MockHttpStreamableResponseFactory.getMockResponse();
+
+        const createRuleController = appContainer.get<BaseController<CreateRuleControllerParameters, CreateRuleRequest>>(CONTROLLERS.CREATE_RULE);
+        const createRuleControllerParams: CreateRuleControllerParameters = {
+            rucioAuthToken: MockRucioServerFactory.VALID_RUCIO_TOKEN,
+            response: res as unknown as NextApiResponse,
+            ...commonControllerParameters,
+            dids,
+            ask_approval: true,
+            grouping: 'ALL',
+        };
+
+        await createRuleController.execute(createRuleControllerParams);
+
+        const viewModel: CreateRuleViewModel = res._getJSONData();
+        expect(viewModel.status).toEqual('error');
+    });
+
+    it('On approval need, should try to add request dataset and fail', async () => {
+        const dids = [
+            { scope: 'scope1', name: 'name1' },
+            { scope: 'scope2', name: 'name2' },
+        ];
+
+        MockRucioServerFactory.createMockRucioServer(true, [
+            createRuleEndpoint,
+            getAccountInfoEndpoint(AccountType.USER),
+            getDIDInfoEndpoint('scope1', 'name1', DIDType.FILE),
+            getDIDInfoEndpoint('scope2', 'name2', DIDType.FILE),
+        ]);
+
+        const res = MockHttpStreamableResponseFactory.getMockResponse();
+
+        const createRuleController = appContainer.get<BaseController<CreateRuleControllerParameters, CreateRuleRequest>>(CONTROLLERS.CREATE_RULE);
+        const createRuleControllerParams: CreateRuleControllerParameters = {
+            rucioAuthToken: MockRucioServerFactory.VALID_RUCIO_TOKEN,
+            response: res as unknown as NextApiResponse,
+            ...commonControllerParameters,
+            dids,
+            ask_approval: true,
+            grouping: 'ALL',
+        };
+
+        await createRuleController.execute(createRuleControllerParams);
+
+        const viewModel: CreateRuleViewModel = res._getJSONData();
+        expect(viewModel.status).toEqual('error');
+    });
+
+    it('On approval need, should try to set status of the request dataset and fail', async () => {
+        const dids = [
+            { scope: 'scope1', name: 'name1' },
+            { scope: 'scope2', name: 'name2' },
+        ];
+
+        MockRucioServerFactory.createMockRucioServer(true, [
+            createRuleEndpoint,
+            getAccountInfoEndpoint(AccountType.USER),
+            getDIDInfoEndpoint('scope1', 'name1', DIDType.FILE),
+            getDIDInfoEndpoint('scope2', 'name2', DIDType.FILE),
+            getAddAttachDIDEndpoint(approvalUserScope),
+        ]);
+
+        const res = MockHttpStreamableResponseFactory.getMockResponse();
+
+        const createRuleController = appContainer.get<BaseController<CreateRuleControllerParameters, CreateRuleRequest>>(CONTROLLERS.CREATE_RULE);
+        const createRuleControllerParams: CreateRuleControllerParameters = {
+            rucioAuthToken: MockRucioServerFactory.VALID_RUCIO_TOKEN,
+            response: res as unknown as NextApiResponse,
+            ...commonControllerParameters,
+            dids,
+            ask_approval: true,
+            grouping: 'ALL',
+        };
+
+        await createRuleController.execute(createRuleControllerParams);
+
+        const viewModel: CreateRuleViewModel = res._getJSONData();
+        expect(viewModel.status).toEqual('error');
+    });
+
+    it('On approval need, should pass if all endpoints return a valid response, packing the files in a dataset', async () => {
+        const dids = [
+            { scope: 'scope1', name: 'name1' },
+            { scope: 'scope2', name: 'name2' },
+        ];
+
+        // Should create one dataset to include all the files
+        const validatedCreateRuleEndpoint: MockEndpoint = {
+            url: `${MockRucioServerFactory.RUCIO_HOST}/rules/`,
+            method: 'POST',
+            response: {
+                status: 200,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(ruleIds),
+            },
+            requestValidator: async req => {
+                const parameters = await req.json();
+                return parameters.dids.length === 1 && parameters.dids[0].scope === approvalUserScope;
+            },
+        };
+
+        MockRucioServerFactory.createMockRucioServer(true, [
+            validatedCreateRuleEndpoint,
+            getAccountInfoEndpoint(AccountType.USER),
+            getDIDInfoEndpoint('scope1', 'name1', DIDType.FILE),
+            getDIDInfoEndpoint('scope2', 'name2', DIDType.FILE),
+            getAddAttachDIDEndpoint(approvalUserScope),
+            getSetStatusDIDEndpoint(approvalUserScope, approvalDIDName),
+        ]);
+
+        const res = MockHttpStreamableResponseFactory.getMockResponse();
+
+        const createRuleController = appContainer.get<BaseController<CreateRuleControllerParameters, CreateRuleRequest>>(CONTROLLERS.CREATE_RULE);
+        const createRuleControllerParams: CreateRuleControllerParameters = {
+            rucioAuthToken: MockRucioServerFactory.VALID_RUCIO_TOKEN,
+            response: res as unknown as NextApiResponse,
+            ...commonControllerParameters,
+            dids,
+            ask_approval: true,
+            grouping: 'ALL',
+        };
+
+        await createRuleController.execute(createRuleControllerParams);
+
+        const viewModel: CreateRuleViewModel = res._getJSONData();
+        expect(viewModel.status).toEqual('success');
+    });
+
+    it('Should set asynchronous request if there is a DID with container type', async () => {
+        const dids = [{ scope: 'scope1', name: 'name1' }];
+
+        // Should create one dataset to include all the files
+        const validatedCreateRuleEndpoint: MockEndpoint = {
+            url: `${MockRucioServerFactory.RUCIO_HOST}/rules/`,
+            method: 'POST',
+            response: {
+                status: 200,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(ruleIds),
+            },
+            requestValidator: async req => {
+                const parameters = await req.json();
+                return parameters.asynchronous;
+            },
+        };
+
+        MockRucioServerFactory.createMockRucioServer(true, [
+            validatedCreateRuleEndpoint,
+            getAccountInfoEndpoint(AccountType.USER),
+            getDIDInfoEndpoint('scope1', 'name1', DIDType.CONTAINER),
+        ]);
+
+        const res = MockHttpStreamableResponseFactory.getMockResponse();
+
+        const createRuleController = appContainer.get<BaseController<CreateRuleControllerParameters, CreateRuleRequest>>(CONTROLLERS.CREATE_RULE);
+        const createRuleControllerParams: CreateRuleControllerParameters = {
+            rucioAuthToken: MockRucioServerFactory.VALID_RUCIO_TOKEN,
+            response: res as unknown as NextApiResponse,
+            ...commonControllerParameters,
+            dids,
+            ask_approval: false,
+            grouping: 'ALL',
+        };
+
+        await createRuleController.execute(createRuleControllerParams);
+
+        const viewModel: CreateRuleViewModel = res._getJSONData();
+        expect(viewModel.status).toEqual('success');
+    });
+
+    it('On approval need, should create a container with a request dataset if there is another dataset and set asynchronous mode', async () => {
+        const dids = [
+            { scope: 'scope', name: 'file1' },
+            { scope: 'scope', name: 'file2' },
+            { scope: 'scope', name: 'dataset' },
+        ];
+
+        // Should create one dataset to include all the files, and then a container to contain this dataset
+        const validatedCreateRuleEndpoint: MockEndpoint = {
+            url: `${MockRucioServerFactory.RUCIO_HOST}/rules/`,
+            method: 'POST',
+            response: {
+                status: 200,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(ruleIds),
+            },
+            requestValidator: async req => {
+                const parameters = await req.json();
+                if (parameters.dids.length !== 1 || parameters.dids[0].scope !== approvalUserScope) {
+                    return false;
+                }
+                return parameters.asynchronous;
+            },
+        };
+
+        MockRucioServerFactory.createMockRucioServer(true, [
+            validatedCreateRuleEndpoint,
+            getAccountInfoEndpoint(AccountType.USER),
+            getDIDInfoEndpoint('scope', 'file1', DIDType.FILE),
+            getDIDInfoEndpoint('scope', 'file2', DIDType.FILE),
+            getDIDInfoEndpoint('scope', 'dataset', DIDType.DATASET),
+            getAddAttachDIDEndpoint(approvalUserScope),
+            getSetStatusDIDEndpoint(approvalUserScope, approvalDIDName),
+        ]);
+
+        const res = MockHttpStreamableResponseFactory.getMockResponse();
+
+        const createRuleController = appContainer.get<BaseController<CreateRuleControllerParameters, CreateRuleRequest>>(CONTROLLERS.CREATE_RULE);
+        const createRuleControllerParams: CreateRuleControllerParameters = {
+            rucioAuthToken: MockRucioServerFactory.VALID_RUCIO_TOKEN,
+            response: res as unknown as NextApiResponse,
+            ...commonControllerParameters,
+            dids,
+            ask_approval: true,
+            grouping: 'ALL',
+        };
+
+        await createRuleController.execute(createRuleControllerParams);
+
+        const viewModel: CreateRuleViewModel = res._getJSONData();
+        expect(viewModel.status).toEqual('success');
+    });
+
+    it('Should not support multiple containers with approval', async () => {
+        const dids = [
+            { scope: 'scope', name: 'container1' },
+            { scope: 'scope', name: 'container2' },
+        ];
+
+        MockRucioServerFactory.createMockRucioServer(true, [
+            createRuleEndpoint,
+            getAccountInfoEndpoint(AccountType.USER),
+            getDIDInfoEndpoint('scope', 'container1', DIDType.CONTAINER),
+            getDIDInfoEndpoint('scope', 'container2', DIDType.CONTAINER),
+            getAddAttachDIDEndpoint(approvalUserScope),
+            getSetStatusDIDEndpoint(approvalUserScope, approvalDIDName),
+        ]);
+
+        const res = MockHttpStreamableResponseFactory.getMockResponse();
+
+        const createRuleController = appContainer.get<BaseController<CreateRuleControllerParameters, CreateRuleRequest>>(CONTROLLERS.CREATE_RULE);
+        const createRuleControllerParams: CreateRuleControllerParameters = {
+            rucioAuthToken: MockRucioServerFactory.VALID_RUCIO_TOKEN,
+            response: res as unknown as NextApiResponse,
+            ...commonControllerParameters,
+            dids,
+            ask_approval: true,
+            grouping: 'ALL',
+        };
+
+        await createRuleController.execute(createRuleControllerParams);
+
+        const viewModel: CreateRuleViewModel = res._getJSONData();
+        expect(viewModel.status).toEqual('error');
+        expect(viewModel.message).toContain('Container');
+    });
+
+    it('Should be able to create samples', async () => {
+        const dids = [
+            { scope: 'scope1', name: 'name1' },
+            { scope: 'scope2', name: 'name2' },
+        ];
+
+        const validatedCreateRuleEndpoint: MockEndpoint = {
+            url: `${MockRucioServerFactory.RUCIO_HOST}/rules/`,
+            method: 'POST',
+            response: {
+                status: 200,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(ruleIds),
+            },
+            requestValidator: async req => {
+                const parameters = await req.json();
+                if (parameters.dids.length !== 2) {
+                    return false;
+                }
+                for (const did of parameters.dids) {
+                    if (did.scope !== approvalUserScope || !did.name.includes('der')) {
+                        return false;
+                    }
+                }
+                return true;
+            },
+        };
+
+        MockRucioServerFactory.createMockRucioServer(true, [
+            validatedCreateRuleEndpoint,
+            getAccountInfoEndpoint(AccountType.USER),
+            getDIDInfoEndpoint('scope1', 'name1', DIDType.DATASET),
+            getDIDInfoEndpoint('scope2', 'name2', DIDType.DATASET),
+            genericDIDInfoEndpoint,
+            createSampleDIDEndpoint,
+        ]);
+
+        const res = MockHttpStreamableResponseFactory.getMockResponse();
+
+        const createRuleController = appContainer.get<BaseController<CreateRuleControllerParameters, CreateRuleRequest>>(CONTROLLERS.CREATE_RULE);
+        const createRuleControllerParams: CreateRuleControllerParameters = {
+            rucioAuthToken: MockRucioServerFactory.VALID_RUCIO_TOKEN,
+            response: res as unknown as NextApiResponse,
+            ...commonControllerParameters,
+            dids,
+            ask_approval: false,
+            grouping: 'ALL',
+            sample: true,
+            sample_file_count: 5,
+        };
+
+        await createRuleController.execute(createRuleControllerParams);
+
+        const viewModel: CreateRuleViewModel = res._getJSONData();
+        expect(viewModel.status).toEqual('success');
+    });
+
+    it('Should be able to ask for approval with sampled DIDs', async () => {
+        const dids = [
+            { scope: 'scope1', name: 'name1' },
+            { scope: 'scope2', name: 'name2' },
+        ];
+
+        const validatedCreateRuleEndpoint: MockEndpoint = {
+            url: `${MockRucioServerFactory.RUCIO_HOST}/rules/`,
+            method: 'POST',
+            response: {
+                status: 200,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(ruleIds),
+            },
+            requestValidator: async req => {
+                const parameters = await req.json();
+                return parameters.dids.length === 1 && parameters.dids[0].scope === approvalUserScope;
+            },
+        };
+
+        MockRucioServerFactory.createMockRucioServer(true, [
+            validatedCreateRuleEndpoint,
+            getAccountInfoEndpoint(AccountType.USER),
+            getDIDInfoEndpoint('scope1', 'name1', DIDType.DATASET),
+            getDIDInfoEndpoint('scope2', 'name2', DIDType.DATASET),
+            genericDIDInfoEndpoint,
+            createSampleDIDEndpoint,
+            getAddAttachDIDEndpoint(approvalUserScope),
+            getSetStatusDIDEndpoint(approvalUserScope, approvalDIDName),
+        ]);
+
+        const res = MockHttpStreamableResponseFactory.getMockResponse();
+
+        const createRuleController = appContainer.get<BaseController<CreateRuleControllerParameters, CreateRuleRequest>>(CONTROLLERS.CREATE_RULE);
+        const createRuleControllerParams: CreateRuleControllerParameters = {
+            rucioAuthToken: MockRucioServerFactory.VALID_RUCIO_TOKEN,
+            response: res as unknown as NextApiResponse,
+            ...commonControllerParameters,
+            dids,
+            ask_approval: true,
+            grouping: 'ALL',
+            sample: true,
+            sample_file_count: 5,
+        };
+
+        await createRuleController.execute(createRuleControllerParams);
+
+        const viewModel: CreateRuleViewModel = res._getJSONData();
+        expect(viewModel.status).toEqual('success');
+    });
+});
diff --git a/test/component/CreateRule.test.tsx b/test/component/CreateRule.test.tsx
index 2e4a9d76e..1dd195ee5 100644
--- a/test/component/CreateRule.test.tsx
+++ b/test/component/CreateRule.test.tsx
@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 
-import { CreateRule } from '@/component-library/pages/legacy/Rule/CreateRule';
+import { CreateRule } from '@/component-library/pages/Rule/create/CreateRule';
 import {
     DIDSearchQuery,
     TypedDIDValidationQuery,
diff --git a/test/fixtures/http-fixtures.ts b/test/fixtures/http-fixtures.ts
index fb4fc4332..8ba753dbc 100644
--- a/test/fixtures/http-fixtures.ts
+++ b/test/fixtures/http-fixtures.ts
@@ -12,7 +12,7 @@ import MockRucioServerFactory from './rucio-server';
  * @param body The request body.
  * @returns An object containing the mock request, response, and session objects.
  */
-export async function createHttpMocks(url?: string, method?: 'GET' | 'POST', body: any = {}) {
+export async function createHttpMocks(url?: string, method?: 'GET' | 'POST' | 'PUT', body: any = {}) {
     const { req, res } = createMocks({
         url: url ? url : 'http://testhost:3000/',
         method: method ? method : 'GET',
diff --git a/test/fixtures/rucio-server.ts b/test/fixtures/rucio-server.ts
index 3944fa27f..662e9b803 100644
--- a/test/fixtures/rucio-server.ts
+++ b/test/fixtures/rucio-server.ts
@@ -3,6 +3,7 @@ import { Headers } from 'node-fetch';
 import { Readable } from 'stream';
 import { Response } from 'node-fetch';
 import { BaseViewModel } from '@/lib/sdk/view-models';
+
 /**
  * Represents a mock HTTP request endpoint.
  */
@@ -25,10 +26,9 @@ export interface MockEndpoint extends HTTPRequest {
     /**
      * Validate the request parameters, body, and headers.
      * @param req The request to validate.
-     * @returns undefined if the request is valid
-     * @throws Error if the request is invalid
+     * @returns whether the request is valid
      */
-    requestValidator?: (req: Request) => Promise<void>;
+    requestValidator?: (req: Request) => Promise<boolean>;
 }
 
 /**
@@ -72,7 +72,7 @@ export default class MockRucioServerFactory {
      */
     static createMockRucioServer(checkAuth: boolean = true, endpoints: MockEndpoint[]) {
         // @ts-ignore
-        fetchMock.mockIf(/^https?:\/\/rucio-host.com.*$/, req => {
+        fetchMock.mockIf(/^https?:\/\/rucio-host.com.*$/, async req => {
             if (checkAuth) {
                 const rucioToken = req.headers.get('X-Rucio-Auth-Token');
                 if (rucioToken !== MockRucioServerFactory.VALID_RUCIO_TOKEN) {
@@ -102,7 +102,13 @@ export default class MockRucioServerFactory {
                 } as MockGatewayResponse);
             }
             if (endpoint.requestValidator) {
-                endpoint.requestValidator(req);
+                const isValid = await endpoint.requestValidator(req);
+                if (!isValid) {
+                    return Promise.resolve({
+                        status: 400,
+                        body: JSON.stringify('Bad request'),
+                    } as MockGatewayResponse);
+                }
             }
             return Promise.resolve(endpoint.response);
         });
diff --git a/test/fixtures/table-fixtures.ts b/test/fixtures/table-fixtures.ts
index cae677798..be76af2b8 100644
--- a/test/fixtures/table-fixtures.ts
+++ b/test/fixtures/table-fixtures.ts
@@ -13,7 +13,13 @@ import {
     RuleState,
     SubscriptionState,
 } from '@/lib/core/entity/rucio';
-import { RSEAccountUsageLimitViewModel, RSEAttributeViewModel, RSEProtocolViewModel, RSEViewModel } from '@/lib/infrastructure/data/view-model/rse';
+import {
+    RSEAccountUsageLimitViewModel,
+    RSEAccountUsageViewModel,
+    RSEAttributeViewModel,
+    RSEProtocolViewModel,
+    RSEViewModel,
+} from '@/lib/infrastructure/data/view-model/rse';
 import { UseComDOM } from '@/lib/infrastructure/hooks/useComDOM';
 import { SubscriptionRuleStatesViewModel, SubscriptionViewModel } from '@/lib/infrastructure/data/view-model/subscriptions';
 import { BaseViewModel } from '@/lib/sdk/view-models';
@@ -29,7 +35,7 @@ import {
 } from '@/lib/infrastructure/data/view-model/did';
 import { RuleMetaViewModel, RulePageLockEntryViewModel, RuleViewModel } from '@/lib/infrastructure/data/view-model/rule';
 import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
-import useChunkedStream, { StreamingSettings, StreamingStatus } from '@/lib/infrastructure/hooks/useChunkedStream';
+import useStreamReader, { StreamingSettings, StreamingStatus } from '@/lib/infrastructure/hooks/useStreamReader';
 
 export function mockUseComDOM<T extends BaseViewModel>(data: T[]): UseComDOM<T> {
     return {
@@ -47,7 +53,7 @@ export function mockUseComDOM<T extends BaseViewModel>(data: T[]): UseComDOM<T>
     } as UseComDOM<T>;
 }
 
-export function mockUseChunkedStream<T>(data: T[]): ReturnType<typeof useChunkedStream<T>> {
+export function mockUseChunkedStream<T>(data: T[]): ReturnType<typeof useStreamReader<T>> {
     return {
         start: (settings: StreamingSettings<T>) => {
             settings.onData(data);
@@ -200,6 +206,20 @@ export function fixtureRSEAccountUsageLimitViewModel(): RSEAccountUsageLimitView
     };
 }
 
+export function fixtureRSEAccountUsageViewModel(): RSEAccountUsageViewModel {
+    const bytes_limit = faker.number.int({ min: 1e6, max: 1e9 });
+    const used_bytes = faker.number.int({ min: 1e6, max: 1e9 });
+    return {
+        ...mockBaseVM(),
+        rse_id: faker.string.uuid(),
+        rse: createRSEName(),
+        account: faker.internet.userName(),
+        files: faker.number.int({ min: 0, max: 1e6 }),
+        used_bytes: used_bytes,
+        bytes_limit: bytes_limit,
+    };
+}
+
 export function fixtureRSEViewModel(): RSEViewModel {
     return {
         ...mockBaseVM(),
@@ -268,7 +288,8 @@ export function fixtureRSEAttributeViewModel(): RSEAttributeViewModel {
 export function fixtureRuleViewModel(): RuleViewModel {
     return {
         ...mockBaseVM(),
-        id: faker.string.uuid(),
+        id: faker.string.uuid().replace(/-/g, ''),
+        scope: createRandomScope(),
         name: faker.lorem.words(3).replace(/\s/g, '.'),
         account: faker.internet.userName(),
         rse_expression: createRSEExpression(),
diff --git a/test/gateway/did/did-gateway-add-attach-status.test.ts b/test/gateway/did/did-gateway-add-attach-status.test.ts
index cf0964757..99a4438cf 100644
--- a/test/gateway/did/did-gateway-add-attach-status.test.ts
+++ b/test/gateway/did/did-gateway-add-attach-status.test.ts
@@ -14,9 +14,7 @@ describe('DID Gateway Tests: Add DID, Attach DIDs, Set DIDStatus', () => {
             method: 'POST',
             requestValidator: async (req: Request) => {
                 const body = await req.json();
-                if (body.type !== 'CONTAINER') {
-                    throw new Error('Invalid DID Type');
-                }
+                return body.type === 'CONTAINER';
             },
             response: {
                 status: 201,
diff --git a/test/gateway/rule/rule-gateway-create-rule.test.ts b/test/gateway/rule/rule-gateway-create-rule.test.ts
new file mode 100644
index 000000000..8d6cd47ed
--- /dev/null
+++ b/test/gateway/rule/rule-gateway-create-rule.test.ts
@@ -0,0 +1,61 @@
+import { CreateRuleDTO } from '@/lib/core/dto/rule-dto';
+import { RuleCreationParameters } from '@/lib/core/entity/rucio';
+import RuleGatewayOutputPort from '@/lib/core/port/secondary/rule-gateway-output-port';
+import appContainer from '@/lib/infrastructure/ioc/container-config';
+import GATEWAYS from '@/lib/infrastructure/ioc/ioc-symbols-gateway';
+import MockRucioServerFactory, { MockEndpoint } from 'test/fixtures/rucio-server';
+
+describe('Rule Gateway', () => {
+    const creationParams: RuleCreationParameters = {
+        dids: [{ scope: 'scope1', name: 'name1' }],
+        copies: 1,
+        rse_expression: 'rse_expression_value',
+        account: 'account_value',
+        grouping: 'ALL',
+        weight: 10,
+        lifetime: 3600,
+        locked: true,
+        subscription_id: 'sub_id',
+        source_replica_expression: 'source_replica',
+        activity: 'activity_name',
+        notify: 'Y',
+        purge_replicas: false,
+        ignore_availability: true,
+        comments: 'Test comment',
+        ask_approval: true,
+        asynchronous: false,
+        priority: 3,
+        split_container: false,
+        meta: 'some_meta_data',
+    };
+
+    beforeEach(() => {
+        fetchMock.doMock();
+        const createRuleEndpoint: MockEndpoint = {
+            url: `${MockRucioServerFactory.RUCIO_HOST}/rules/`,
+            method: 'POST',
+            response: {
+                status: 200,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(['817b3030097446a38b3b842bf528e112']),
+            },
+            requestValidator: async req => {
+                const bodyJson = await req.text();
+                return bodyJson === JSON.stringify(creationParams);
+            },
+        };
+        MockRucioServerFactory.createMockRucioServer(true, [createRuleEndpoint]);
+    });
+    afterEach(() => {
+        fetchMock.dontMock();
+    });
+
+    it('Should pass all of the parameters on rule creation', async () => {
+        const ruleGateway: RuleGatewayOutputPort = appContainer.get<RuleGatewayOutputPort>(GATEWAYS.RULE);
+        const createRuleDTO: CreateRuleDTO = await ruleGateway.createRule(MockRucioServerFactory.VALID_RUCIO_TOKEN, creationParams);
+        expect(createRuleDTO.status).toEqual('success');
+        expect(createRuleDTO.rule_ids.length).toEqual(1);
+    });
+});
diff --git a/test/gateway/rule/rule-gateway-list-rules.test.ts b/test/gateway/rule/rule-gateway-list-rules.test.ts
index f5fbffdba..c64f46b72 100644
--- a/test/gateway/rule/rule-gateway-list-rules.test.ts
+++ b/test/gateway/rule/rule-gateway-list-rules.test.ts
@@ -206,10 +206,8 @@ describe('RuleGateway', () => {
                 },
                 body: mockRuleStream,
             },
-            requestValidator: req => {
-                if (!req.url.includes('account=tester')) {
-                    throw Error('Account is not specified or is specified incorrectly');
-                }
+            requestValidator: async req => {
+                return req.url.includes('account=tester');
             },
         };
 
@@ -276,10 +274,8 @@ describe('RuleGateway', () => {
                 },
                 body: mockRuleStream,
             },
-            requestValidator: req => {
-                if (!req.url.includes('scope=test')) {
-                    throw Error('Scope is not specified or is specified incorrectly');
-                }
+            requestValidator: async req => {
+                return req.url.includes('scope=test');
             },
         };
 
@@ -346,10 +342,8 @@ describe('RuleGateway', () => {
                 },
                 body: mockRuleStream,
             },
-            requestValidator: req => {
-                if (!req.url.includes('account=*') || !req.url.includes('scope=*')) {
-                    throw Error('Filter parameters do not default to *');
-                }
+            requestValidator: async req => {
+                return req.url.includes('account=*') && req.url.includes('scope=*');
             },
         };
 
diff --git a/test/mocks/handlers/single-handlers.ts b/test/mocks/handlers/single-handlers.ts
index 04639c7ac..13a2fd6d1 100644
--- a/test/mocks/handlers/single-handlers.ts
+++ b/test/mocks/handlers/single-handlers.ts
@@ -3,6 +3,7 @@ import { DefaultBodyType, http, HttpResponse, StrictRequest } from 'msw';
 export interface MockSingleOptions {
     getData: () => any;
     getDelay?: () => number;
+    method?: 'GET' | 'POST';
     isRequestValid?: (request: StrictRequest<DefaultBodyType>) => boolean;
 }
 
@@ -11,7 +12,7 @@ const singleHeaders = {
 };
 
 export const getMockSingleEndpoint = (url: string, options: MockSingleOptions) => {
-    return http.get(url, async ({ request }) => {
+    const resolver = async ({ request }: { request: StrictRequest<DefaultBodyType> }) => {
         const { getData, getDelay, isRequestValid } = options;
         if (isRequestValid && !isRequestValid(request)) {
             return HttpResponse.json(
@@ -26,6 +27,13 @@ export const getMockSingleEndpoint = (url: string, options: MockSingleOptions) =
         if (getDelay) {
             await new Promise(resolve => setTimeout(resolve, getDelay()));
         }
+
         return new Response(responseJson, { headers: singleHeaders });
-    });
+    };
+
+    if (options.method === 'POST') {
+        return http.post(url, resolver);
+    } else {
+        return http.get(url, resolver);
+    }
 };
diff --git a/test/mocks/handlers/streaming-handlers.ts b/test/mocks/handlers/streaming-handlers.ts
index b72c2bb4e..d0837c368 100644
--- a/test/mocks/handlers/streaming-handlers.ts
+++ b/test/mocks/handlers/streaming-handlers.ts
@@ -4,6 +4,7 @@ export interface MockStreamOptions {
     data: any[];
     delay?: number;
     isRequestValid?: (request: StrictRequest<DefaultBodyType>) => boolean;
+    method?: 'GET' | 'POST';
 }
 
 const encoder = new TextEncoder();
@@ -20,7 +21,7 @@ const getBadRequestResponse = () =>
     );
 
 export const getMockStreamEndpoint = (url: string, options: MockStreamOptions) => {
-    return http.get(url, async ({ request }) => {
+    const resolver = async ({ request }: { request: StrictRequest<DefaultBodyType> }) => {
         const { data, delay, isRequestValid } = options;
         if (isRequestValid && !isRequestValid(request)) {
             return getBadRequestResponse();
@@ -41,7 +42,13 @@ export const getMockStreamEndpoint = (url: string, options: MockStreamOptions) =
         });
 
         return new Response(stream, { headers: streamHeaders });
-    });
+    };
+
+    if (options.method === 'POST') {
+        return http.post(url, resolver);
+    } else {
+        return http.get(url, resolver);
+    }
 };
 
 export const getMockInvalidStreamEndpoint = (url: string) => {