diff --git a/content/assets/js/random_vereniging.js b/content/assets/js/random_vereniging.js
new file mode 100644
index 0000000..5aed751
--- /dev/null
+++ b/content/assets/js/random_vereniging.js
@@ -0,0 +1,16 @@
+window.addEventListener('load', function() {
+  let options = document.getElementsByClassName('randomVerenigingWrapper');
+  let selected = Array.from(options).map(x => ({ x, r: Math.random() + -0.5 * x.hasAttribute('data-iszeus')}))
+   .sort((a, b) => a.r - b.r)
+   .map(a => a.x)
+   .slice(0, 3)
+   .map(x => ({ x, r: Math.random()}))
+   .sort((a, b) => a.r - b.r)
+   .map(a => a.x);
+
+  let destination = document.getElementById("display_repo");
+  for (node of selected) {
+    node.getElementsByTagName("img")[0].setAttribute("loading", "eager");
+    destination.appendChild(node);
+  }
+});
\ No newline at end of file
diff --git a/content/homepage.md b/content/homepage.md
index 46b0c31..bafc650 100644
--- a/content/homepage.md
+++ b/content/homepage.md
@@ -2,4 +2,5 @@
 naam: Home
 navigable: false
 order: 1
+head: <script src="/assets/js/random_vereniging.js"></script>
 ---
diff --git a/content/stylesheets/main.css b/content/stylesheets/main.css
index f32ea01..842c348 100644
--- a/content/stylesheets/main.css
+++ b/content/stylesheets/main.css
@@ -131,6 +131,46 @@ footer {
   outline: none;
 }
 
+.randomVerenigingen p:nth-child(odd) {
+    -webkit-text-stroke-width: 2px;
+    -webkit-text-stroke-color: var(--lightblue);
+    color: transparent;
+}
+
+.randomVerenigingen p {
+    text-transform: uppercase;
+}
+
+.randomVereniging{
+    border: 2px solid var(--yellow);
+    padding: 1rem;
+    margin: 1rem;
+}
+
+.randomVerenigingWrapper{
+    min-width: 20rem;
+    flex: 1;
+}
+
+.randomVerenigingenWrapper {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.randomVerenigingWrapper:nth-child(1){
+    padding-top: 4rem;
+}
+.randomVerenigingWrapper:nth-child(2){
+    padding-top: 2rem;
+}
+
+.randomVereniging_imageWrapper{
+    display: flex;
+    justify-content: center;
+    margin-bottom: 2rem;
+    margin-top: 1rem;
+}
+
 /* Small screens */
 @media only screen and (max-width: 600px) {
   .navbar {
@@ -358,16 +398,6 @@ h2 {
   top: 20%;
 }
 
-.randomVerenigingen p:nth-child(odd) {
-  -webkit-text-stroke-width: 2px;
-  -webkit-text-stroke-color: var(--lightblue);
-  color: transparent;
-}
-
-.randomVerenigingen p {
-  text-transform: uppercase;
-}
-
 .underline,
 .active_link {
   box-shadow: inset 0 -0.15em 0 var(--yellow);
@@ -590,6 +620,12 @@ fieldset p label input {
   }
 }
 
+@media only screen and (max-width: 1024px) {
+  .randomVerenigingWrapper:nth-child(1), .randomVerenigingWrapper:nth-child(2){ /* Dit heeft hogere prioriteit dan elk kind. */
+        padding-top: 0;
+  }
+}
+
 @media only screen and (max-width: 300px) {
   .tile-grid {
     grid-template-columns: auto;
diff --git a/layouts/homepage.erb b/layouts/homepage.erb
index 9f76a67..3127eb4 100644
--- a/layouts/homepage.erb
+++ b/layouts/homepage.erb
@@ -34,10 +34,19 @@
 <main id="main" class="align">
   <article>
     <h2>Kende je bijvoorbeeld deze vereniging al?</h2>
-
-    <section class="randomVereniging">
-      <h3>Weus ZPI</h3>
-      <p>Weus ZPI is de studentenvereniging voor InFoRmAtIcA aan de UGent. Ons doel is een bullshitty omgeving te bullshitten voor bullshitted studenten die hun bullshit willen uitbreiden door zich te engageren voor bullshitprojecten.</p>
-    </section>
+    <div class="randomVerenigingenWrapper" id="display_repo"></div>
+    <div class="randomVerenigingenWrapper hidden" id="hidden_repo">
+      <% for item in verenigingen %>
+        <div class="randomVerenigingWrapper" <%= (item['id'] == "zeus") ? "data-iszeus" : "" %> >
+          <a href="<%= item['path'] || test %>">
+            <section class="randomVereniging">
+             <div class="randomVereniging_imageWrapper"><img loading=lazy src="<%= image_url(item) %>" alt="logo van <%= item['naam'] %>" height="100"></div>
+              <hr class="randomVereniging_hr">
+              <h3><%= item['naam'] %></h3>
+            </section>
+          </a>
+        </div>
+      <% end %>
+    </div>
   </article>
 </main>
diff --git a/lib/helpers/verenigingen.rb b/lib/helpers/verenigingen.rb
index 92b9c6c..ccb5aa4 100644
--- a/lib/helpers/verenigingen.rb
+++ b/lib/helpers/verenigingen.rb
@@ -47,6 +47,8 @@ module VerenigingenHelper
         "konvent" => x[:konvent],
         "themas" => x[:themas],
         "postcodes" => x[:postcodes].to_a,
+        "id" => x[:id],
+        "path" => x.path
     } }.to_a
   end
 
@@ -59,7 +61,7 @@ module VerenigingenHelper
 
 
   def abbreviation(item)
-    item.identifier.without_ext.split('/').last
+    item['id']
   end
 
   def all_groups
@@ -74,15 +76,6 @@ module VerenigingenHelper
     end
   end
 
-  def verenigingen_random(amount)
-    @items.find_all("**/verenigingen/*").map { |x| {
-        "titel" => x[:titel],
-        "naam" => x[:naam],
-        "konvent" => x[:konvent],
-        "themas" => x[:themas]
-    } }.to_a.shuffle[0..amount]
-  end
-
   def image_tag(item)
     "<img src='#{ image_url item }' alt='#{ item[:naam] } logo' />"
   end