diff --git a/app/webpacker/css/darkswarm/all.scss b/app/webpacker/css/darkswarm/all.scss
index 3b6316fadb..ad896c008b 100644
--- a/app/webpacker/css/darkswarm/all.scss
+++ b/app/webpacker/css/darkswarm/all.scss
@@ -9,8 +9,7 @@
    *= require_self
 */
 @import 'variables';
-//@import 'foundation';
-//@import 'foundation-icons';
+@import "~foundation-sites/scss/foundation";
 
 @import 'base/colors';
 @import 'layout/offcanvas';
diff --git a/app/webpacker/css/darkswarm/variables.scss b/app/webpacker/css/darkswarm/variables.scss
index aff23bdc85..d34f80593f 100644
--- a/app/webpacker/css/darkswarm/variables.scss
+++ b/app/webpacker/css/darkswarm/variables.scss
@@ -1,5 +1,4 @@
-//@import "foundation/functions";
-//@import "foundation/components/global";
+@import "~foundation-sites/scss/foundation/components/global";
 @import "branding";
 
 // Brand guide colours:
diff --git a/package.json b/package.json
index 15b29aae65..965c7a2fdd 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "babel-loader": "^8.2.3",
     "cable_ready": "^5.0.0-pre2",
     "flatpickr": "^4.6.9",
+    "foundation-sites": "^5.5.2",
     "moment": "^2.29.1",
     "mrujs": "^0.7.2",
     "shortcut-buttons-flatpickr": "^0.3.1",
diff --git a/yarn.lock b/yarn.lock
index 3127e3391e..277f1bd2db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6164,6 +6164,11 @@ forwarded@~0.1.2:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
   integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
+foundation-sites@^5.5.2:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/foundation-sites/-/foundation-sites-5.5.2.tgz#99c387ce3cd79672f79cb31745b39b5b1c782c03"
+  integrity sha1-mcOHzjzXlnL3nLMXRbObWxx4LAM=
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"