diff --git a/.gitignore b/.gitignore
index c68ec6d..c3af3a2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,6 +19,7 @@ package-lock.json
 # [build] Built files
 *.*.map
 /static/js/dist/*.js
+/templates/_macros
 
 # [env] Local environment settings
 .*.hash
diff --git a/Dockerfile b/Dockerfile
index bcd9974..e0fd193 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -44,6 +44,7 @@ COPY --from=python-dependencies /root/.local/bin /root/.local/bin
 COPY . .
 RUN rm -rf package.json yarn.lock .babelrc webpack.config.js requirements.txt Dockerfile .stylelintrc .gitignore .djlintrc  
 COPY --from=build-css /srv/static/css static/css
+COPY --from=build-js /srv/node_modules/vanilla-framework/templates/_macros templates/_macros
 COPY --from=build-js /srv/static/js/dist static/js/dist
 
 # Set build ID
diff --git a/package.json b/package.json
index cb302ee..e24179f 100644
--- a/package.json
+++ b/package.json
@@ -7,10 +7,11 @@
     "watch": "yarn run watch-css && yarn run watch-js",
     "watch-js": "webpack --watch",
     "watch-css": "watch -p 'static/sass/**/*.scss' -c 'yarn run build'",
-    "build": "yarn run build-css && yarn run build-js",
+    "build": "yarn run build-css && yarn run build-js && yarn run copy-macros",
     "build-js": "yarn run webpack && yarn run build-latest-news",
     "build-latest-news": "cp node_modules/@canonical/latest-news/dist/latest-news.js static/js/dist",
     "build-css": "sass static/sass/styles.scss static/css/styles.css --load-path=node_modules --style=compressed && postcss --map false --use autoprefixer --replace 'static/css/**/*.css'",
+    "copy-macros": "rm -rf templates/_macros && cp -r node_modules/vanilla-framework/templates/_macros templates/_macros",
     "lint-python": "flake8 --extend-ignore=E203 webapp && black --check --line-length 79 webapp",
     "lint-scss": "stylelint static/**/*.scss",
     "lint-js": "prettier -c 'static/js/*.{js,jsx,ts,tsx}'",
@@ -33,7 +34,7 @@
     "postcss": "8.4.49",
     "postcss-cli": "11.0.0",
     "sass": "1.81.0",
-    "vanilla-framework": "4.18.3",
+    "vanilla-framework": "4.20.3",
     "webpack": "^5.97.1"
   },
   "devDependencies": {
@@ -44,4 +45,4 @@
     "watch-cli": "0.2.3",
     "webpack-cli": "^5.1.4"
   }
-}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 3730cc4..27ea612 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2000,10 +2000,10 @@ util-deprecate@^1.0.2:
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-vanilla-framework@4.18.3:
-  version "4.18.3"
-  resolved "https://registry.npmjs.org/vanilla-framework/-/vanilla-framework-4.18.3.tgz"
-  integrity sha512-WsOgD/iI27de80cMS9IYFq1X4nbsEOFfqUmTT7V57k5C20WHwshUA0ocw4R21ThN+A7amh4+c7i0mtcr9a/+uQ==
+vanilla-framework@4.20.3:
+  version "4.20.3"
+  resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-4.20.3.tgz#a306e80f32f5c6b6f107c02e64cc642c6eb32148"
+  integrity sha512-8nE8BxHRckdjo8VYW0jVLK9JMz1XAoTZcKGweg0jM8cV+/D313pPyomEeODAD1qq66yf/W0RfHTXv/wp0AaYfQ==
 
 verbalize@^0.1.2:
   version "0.1.2"