diff --git a/package.json b/package.json
index 1512468..1c2eb2f 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "react": "^19.0.0-rc-09111202-20241011",
     "react-dom": "^19.0.0-rc-09111202-20241011",
     "react-hook-form": "7.45.4",
+    "react-masonry-css": "^1.0.16",
     "react-share": "^5.1.0",
     "react-youtube": "^10.1.0",
     "sharp": "0.32.6",
diff --git a/src/app/_blocks/HubContentGrid/index.tsx b/src/app/_blocks/HubContentGrid/index.tsx
index e831f66..23668ed 100644
--- a/src/app/_blocks/HubContentGrid/index.tsx
+++ b/src/app/_blocks/HubContentGrid/index.tsx
@@ -7,6 +7,7 @@ import { ContentTypeArrays } from "../../_interfaces/ContentTypeArrays";
 import { filterContent } from "../../_utilities/filterContent";
 import ContentNavBar from "./NavBar";
 import styles from "./styles.module.css";
+import Masonry from "react-masonry-css";
 
 const colorMap = {
   All: "var(--dark-rock-800)",
@@ -32,18 +33,28 @@ export default function HubContentGrid({ content }) {
 
   const filteredContent = filterContent({ articles: content, filter: activeButton });
 
+  const breakpointColumns = {
+    default: 4,
+    1280: 3,
+    1024: 2,
+    720: 1,
+  }
 
   return (
     <div>
       <ContentNavBar activeButton={activeButton} onActiveButtonChange={handleActiveButtonChange} />
       <div className={styles.contentGridContainer} style={dynamicStyles}>
-        <div className={styles.contentGrid}>
+        <Masonry
+          breakpointCols={breakpointColumns}
+          className={styles.contentGrid}
+          columnClassName={styles.contentGridColumn}
+        >
           {filteredContent.map((article, i) => (
             <div className={styles.contentCard}>
               <ContentCard contentType={article.contentType} content={article.content} rounded={false} />
             </div>
           ))}
-        </div>
+        </Masonry>
       </div>
     </div>
   );
diff --git a/src/app/_blocks/HubContentGrid/styles.module.css b/src/app/_blocks/HubContentGrid/styles.module.css
index 74f064d..098a96a 100644
--- a/src/app/_blocks/HubContentGrid/styles.module.css
+++ b/src/app/_blocks/HubContentGrid/styles.module.css
@@ -31,7 +31,14 @@
 
 @media(min-width: 1024px) {
   .contentGrid {
-    grid-template-columns: repeat(3, 1fr);
+    display: flex;
+    max-height: 1200px;
+    overflow: scroll;
+  }
+
+  .contentGridColumn {
+    background-clip: padding-box;
+
   }
 
   .contentGridContainer {
diff --git a/src/app/_components/ArchiveButton/styles.module.css b/src/app/_components/ArchiveButton/styles.module.css
index f174d0e..d8a80ba 100644
--- a/src/app/_components/ArchiveButton/styles.module.css
+++ b/src/app/_components/ArchiveButton/styles.module.css
@@ -3,4 +3,6 @@
   gap: 10px;
   align-items: center;
   padding-top: 10px;
+  font-size: 16px;
+  margin-bottom: 16px;
 }
diff --git a/src/app/_components/ContentCard/styles.module.css b/src/app/_components/ContentCard/styles.module.css
index 59d38a4..3469d72 100644
--- a/src/app/_components/ContentCard/styles.module.css
+++ b/src/app/_components/ContentCard/styles.module.css
@@ -1,8 +1,19 @@
 .contentCard {
+  display: flex;
   padding: 30px 20px;
-  height: min-content;
   border: 1px solid var(--dark-rock-800);
   border-radius: var(--dynamic-border);
+  gap: 20px;
+}
+
+.contentCard p {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-height: 1.2em;
+  max-height: calc(1.2em * 3);
+  text-overflow: ellipsis;
 }
 
 .contentMetaContainer {
@@ -12,6 +23,7 @@
 }
 
 .contentMetaContainer h6 {
+  margin-bottom: 10px;
   text-decoration: none;
   transition: text-decoration 0.3s ease;
 }
@@ -34,8 +46,9 @@
 
 .imageContainer {
   position: relative;
-  width: 280px;
-  height: 280px;
+  max-width: 280px;
+  max-height: 280px;
+  aspect-ratio: 1 / 1;
   margin: auto;
 }
 
diff --git a/yarn.lock b/yarn.lock
index 426500a..a442bd9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8990,6 +8990,11 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-masonry-css@^1.0.16:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/react-masonry-css/-/react-masonry-css-1.0.16.tgz#72b28b4ae3484e250534700860597553a10f1a2c"
+  integrity sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==
+
 react-onclickoutside@^6.13.0:
   version "6.13.1"
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz#1f5e0241c08784b6e65745d91aca0d700c548a89"