diff --git a/src/components/Container/Container.jsx b/src/components/Container/Container.jsx
index 25e070c9b917..df884c4ef159 100644
--- a/src/components/Container/Container.jsx
+++ b/src/components/Container/Container.jsx
@@ -1,11 +1,13 @@
 import PropTypes from "prop-types";
 
-import "./Container.scss";
-
 export default function Container(props = {}) {
   const { className = "" } = props;
 
-  return <div className={`container ${className}`}>{props.children}</div>;
+  return (
+    <div className={`w-full max-w-5xl mx-auto ${className}`}>
+      {props.children}
+    </div>
+  );
 }
 
 Container.propTypes = {
diff --git a/src/components/Container/Container.scss b/src/components/Container/Container.scss
deleted file mode 100644
index d6a533edbb1b..000000000000
--- a/src/components/Container/Container.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use "../../styles/partials/vars" as *;
-@use "../../styles/partials/mixins" as *;
-@use "sass:map";
-
-.container {
-  width: 100%;
-  max-width: map.get($screens, large);
-  margin: 0 auto;
-}
diff --git a/src/components/Container/__snapshots__/Container.test.jsx.snap b/src/components/Container/__snapshots__/Container.test.jsx.snap
index 389c2266dbb6..0a13faac3733 100644
--- a/src/components/Container/__snapshots__/Container.test.jsx.snap
+++ b/src/components/Container/__snapshots__/Container.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Container renders correctly with children and className 1`] = `
 <div
-  class="container test-class"
+  class="w-full max-w-5xl mx-auto test-class"
 >
   <p>
     Child content
@@ -12,7 +12,7 @@ exports[`Container renders correctly with children and className 1`] = `
 
 exports[`Container renders correctly without className 1`] = `
 <div
-  class="container "
+  class="w-full max-w-5xl mx-auto "
 >
   <span>
     Simple child
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index d0550f6579d1..8528d3aff7dd 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -10,7 +10,7 @@ const footerLinkClasses =
 
 const Footer = () => (
   <footer className="w-full flex-[0_0_auto] print:hidden">
-    <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[#3b7eb5]">
+    <Container className="mx-auto max-w-5xl px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[#3b7eb5]">
       <div className="mb-[24px] flex justify-center">
         <a href="https://openjsf.org" target="_blank" rel="noopener noreferrer">
           <img