diff --git a/components/Content-container.tsx b/components/Content-container.tsx
new file mode 100644
index 00000000..2a5edd6f
--- /dev/null
+++ b/components/Content-container.tsx
@@ -0,0 +1,12 @@
+import { Container } from "@mantine/core";
+
+interface ContentContainerProps {
+  children: React.ReactNode;
+}
+
+// Do we need any media queries here for responsiveness?
+const ContentContainer: React.FC<ContentContainerProps> = ({ children }) => (
+  <Container size={1250}>{children}</Container>
+);
+
+export default ContentContainer;
diff --git a/pages/_app.tsx b/pages/_app.tsx
index b4be5afe..68853cdb 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -13,6 +13,7 @@ import CustomSpotlightProvider from "../components/customSpotlightProvider";
 import { useEffect, useRef } from "react";
 import NProgress from "nprogress";
 import "../components/other/nprogress.css";
+import ContentContainer from "../components/Content-container";
 
 webFirebase.init();
 
@@ -80,7 +81,10 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
   const contentWithLayout = (
     <>
       <Header />
-      <Component {...pageProps} />
+      <ContentContainer>
+        {" "}
+        <Component {...pageProps} />
+      </ContentContainer>
       <Footer />
     </>
   );
diff --git a/pages/index.tsx b/pages/index.tsx
index fc990396..8fc66cc2 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,7 +6,7 @@ import { Discord } from "../components/icon/discord";
 
 const Home: NextPage = () => {
   return (
-    <Container size={"lg"}>
+    <Container fluid>
       <Image
         src="/coming-soon/coh3-background.jpg"
         alt={"coh3-background"}
diff --git a/pages/leaderboards.tsx b/pages/leaderboards.tsx
index b132b94f..9867793c 100644
--- a/pages/leaderboards.tsx
+++ b/pages/leaderboards.tsx
@@ -179,7 +179,7 @@ const Leaderboards = ({
           content={`COH3 Ranked leaderboards for faction ${localizedRace} and game type ${localizedType}.`}
         />
       </Head>
-      <Container size={"lg"}>
+      <Container fluid>
         <Container fluid>
           <Group position={"apart"}>
             <Group>
diff --git a/pages/players/[playerID].tsx b/pages/players/[playerID].tsx
index 241453a4..a96d3f28 100644
--- a/pages/players/[playerID].tsx
+++ b/pages/players/[playerID].tsx
@@ -67,7 +67,7 @@ const PlayerCard = ({
           content={`COH3 Stats - player card for player ${playerData.info.name}.`}
         />
       </Head>
-      <Container size={"lg"}>
+      <Container fluid>
         <Container fluid>
           <Group>
             <Avatar
diff --git a/pages/unit-example.tsx b/pages/unit-example.tsx
index 94e49799..7167f74a 100644
--- a/pages/unit-example.tsx
+++ b/pages/unit-example.tsx
@@ -21,7 +21,7 @@ import { UnitUpgradeCard } from "../components/unit-cards/unit-upgrade-card";
  */
 const UnitExample = () => {
   return (
-    <Container size="lg">
+    <Container fluid>
       <Title order={3} mb={8}>
         <Text fw={700}>This is an example Unit Stats Page.</Text>
       </Title>