diff --git a/package.json b/package.json
index 21ff2265..9af4431f 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "less": "^4.2.0",
     "less-loader": "^12.1.0",
     "markdown-loader": "^8.0.0",
+    "pug": "^3.0.3",
     "storybook": "^8.0.9",
     "storybook-css-modules-preset": "^1.1.1",
     "storybook-dark-mode": "^4.0.1",
@@ -52,7 +53,8 @@
     "typescript": "^4.9.4",
     "vue-loader": "^17.4.2",
     "vue-template-compiler": "^2.7.14",
-    "webpack": "^5.75.0"
+    "webpack": "^5.75.0",
+    "webpack-dev-middleware": "^5.3.4"
   },
   "files": [
     "dist/*",
diff --git a/yarn.lock b/yarn.lock
index b0e2f727..4091cd20 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1654,6 +1654,7 @@ __metadata:
     less: ^4.2.0
     less-loader: ^12.1.0
     markdown-loader: ^8.0.0
+    pug: ^3.0.3
     screenfull: ^6.0.2
     storybook: ^8.0.9
     storybook-css-modules-preset: ^1.1.1
@@ -1668,6 +1669,7 @@ __metadata:
     vue-template-compiler: ^2.7.14
     vuetify: ^3.3.3
     webpack: ^5.75.0
+    webpack-dev-middleware: ^5.3.4
   languageName: unknown
   linkType: soft
 
@@ -12221,6 +12223,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pug-code-gen@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "pug-code-gen@npm:3.0.3"
+  dependencies:
+    constantinople: ^4.0.1
+    doctypes: ^1.1.0
+    js-stringify: ^1.0.2
+    pug-attrs: ^3.0.0
+    pug-error: ^2.1.0
+    pug-runtime: ^3.0.1
+    void-elements: ^3.1.0
+    with: ^7.0.0
+  checksum: 7a494887eb2cbe88c90cd45f818729046d3cb186d5101770e158cc14be9cd5e664809c600182756ebbcab2b27caba87ac8b743e0ad0789799b1925a850612947
+  languageName: node
+  linkType: hard
+
 "pug-error@npm:^2.0.0":
   version: 2.0.0
   resolution: "pug-error@npm:2.0.0"
@@ -12228,6 +12246,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pug-error@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "pug-error@npm:2.1.0"
+  checksum: e084890365f1c03a828437c1dcf641598f5754bc0fdde625a8b2529c52fbda0caa89e0e29e9124d665cfd3915bb8916011787861930a0dcf250d46e1a33c1e5c
+  languageName: node
+  linkType: hard
+
 "pug-filters@npm:^4.0.0":
   version: 4.0.0
   resolution: "pug-filters@npm:4.0.0"
@@ -12321,6 +12346,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pug@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "pug@npm:3.0.3"
+  dependencies:
+    pug-code-gen: ^3.0.3
+    pug-filters: ^4.0.0
+    pug-lexer: ^5.0.1
+    pug-linker: ^4.0.0
+    pug-load: ^3.0.0
+    pug-parser: ^6.0.0
+    pug-runtime: ^3.0.1
+    pug-strip-comments: ^2.0.0
+  checksum: b825497b44fb373625680c0279199f964fd7446351f5570087d4b7f73e7855434ff075d3085fd11c08473dc355719b0613d20e3d44f197b1809736c1d5f8370b
+  languageName: node
+  linkType: hard
+
 "pump@npm:^2.0.0":
   version: 2.0.1
   resolution: "pump@npm:2.0.1"
@@ -14941,6 +14982,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack-dev-middleware@npm:^5.3.4":
+  version: 5.3.4
+  resolution: "webpack-dev-middleware@npm:5.3.4"
+  dependencies:
+    colorette: ^2.0.10
+    memfs: ^3.4.3
+    mime-types: ^2.1.31
+    range-parser: ^1.2.1
+    schema-utils: ^4.0.0
+  peerDependencies:
+    webpack: ^4.0.0 || ^5.0.0
+  checksum: 90cf3e27d0714c1a745454a1794f491b7076434939340605b9ee8718ba2b85385b120939754e9fdbd6569811e749dee53eec319e0d600e70e0b0baffd8e3fb13
+  languageName: node
+  linkType: hard
+
 "webpack-dev-middleware@npm:^6.1.2":
   version: 6.1.3
   resolution: "webpack-dev-middleware@npm:6.1.3"