diff --git a/design-system-docs/Gemfile b/design-system-docs/Gemfile
index 4c977fb3f..64e82e471 100644
--- a/design-system-docs/Gemfile
+++ b/design-system-docs/Gemfile
@@ -16,7 +16,7 @@ gem "citizens_advice_components", path: "../engine"
 # citizens_advice_components bundles view component but we
 # also use this to write docs components so explicitly
 # name it as a dependency.
-gem "view_component", "~> 3.16"
+gem "view_component", "~> 3.20"
 
 group :development, :test do
   gem "citizens-advice-style",
diff --git a/design-system-docs/Gemfile.lock b/design-system-docs/Gemfile.lock
index 9a41d87e9..86689ce10 100644
--- a/design-system-docs/Gemfile.lock
+++ b/design-system-docs/Gemfile.lock
@@ -231,8 +231,8 @@ GEM
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.5.0)
     uri (0.13.0)
-    view_component (3.17.0)
-      activesupport (>= 5.2.0, < 8.0)
+    view_component (3.20.0)
+      activesupport (>= 5.2.0, < 8.1)
       concurrent-ruby (~> 1.0)
       method_source (~> 1.0)
     webrick (1.8.2)
@@ -251,7 +251,7 @@ DEPENDENCIES
   htmlbeautifier
   nokogiri
   puma
-  view_component (~> 3.16)
+  view_component (~> 3.20)
 
 BUNDLED WITH
    2.5.9