diff --git a/_data/cards.yml b/_data/cards.yml
new file mode 100644
index 0000000..dc94d73
--- /dev/null
+++ b/_data/cards.yml
@@ -0,0 +1,32 @@
+---
+- src: /assets/img/1.gif
+  title: "Researching All Layers"
+  text: "Concerned with all layers in the stack including underlying
+    transports, p2p overlays and routing, initial trust establishment, and
+    semantics for things like group chat."
+
+- src: /assets/img/3.gif
+  title: "Peer-to-Peer"
+  text: "The protocols we work on are pure peer-to-peer, and aim to minimize
+    centralization. This too is in opposition to many initiatives in the
+    secure messaging space."
+
+- src: /assets/img/4.gif
+  title: "Security, Privacy, Censorship Resistance"
+  text: "Assumes the basics such as end-to-end encryption, forward secrecy,
+    avoiding MITM-attacks. Vac also places a premium on privacy and
+    censorship resistance from port blocking, traffic analysis, and
+    similar."
+
+- src: /assets/img/5.gif
+  title: "Modular System"
+  text: "Provide options at each layer in the stack, instead of having a
+    tightly coupled set of protocols. Allowing developers to choose what
+    they use and ensure they know each choice comes with different
+    trade-offs."
+
+- src: /assets/img/2.gif
+  title: "Generalized Messaging"
+  text: " This includes both human to human communication, as well as machine to
+    machine communication. Texting, data transfer, financial transactions,
+    state channels and more."
diff --git a/_data/join.yml b/_data/join.yml
new file mode 100644
index 0000000..048acb3
--- /dev/null
+++ b/_data/join.yml
@@ -0,0 +1,21 @@
+---
+- link: https://status.im/our_team/jobs.html
+  src: /assets/img/logo.svg
+  title: "Join the team"
+  text: "We are a remote team of researchers dedicated to building a fair
+    internet."
+  link-text: "View open roles"
+
+- link: https://discord.com/
+  src: /assets/img/discord.svg
+  title: "Join the convo"
+  text: " Ask questions or speak with us about our work as we research new
+    means of communication."
+  link-text: "Join our Discord"
+
+- link: https://github.com/vacp2p
+  src: /assets/img/github.svg
+  title: "Contribute on Github"
+  text: " Our work is open source and free for anyone to contribute to, use,
+    and modify for their needs."
+  link-text: "Contribute"
diff --git a/index.html b/index.html
index 77790d6..72682d5 100644
--- a/index.html
+++ b/index.html
@@ -289,7 +289,9 @@ layout: default
     max-w-screen-xl
     flex flex-col
     sm:flex-row
-    py-10
+    pt-10
+    pb-5
+    lg:pb-2
     border-b
   "
 >
@@ -313,6 +315,7 @@ layout: default
         sm:flex-row
       "
     >
+      {% for card in site.data.cards %}
       <div
         class="
           about__card
@@ -326,7 +329,7 @@ layout: default
         "
       >
         <img
-          src="/assets/img/1.gif"
+          src="{{ card.src }}"
           class="about__gif self-center"
           alt="Gif animation"
           width="210"
@@ -335,135 +338,13 @@ layout: default
         <p
           class="about__heading mb-4 font-semibold text-s lg:text-sm text-left"
         >
-          Researching All Layers
+          {{ card.title }}
         </p>
-        <p class="about__text text-s lg:text-base opacity-75">
-          Concerned with all layers in the stack including underlying
-          transports, p2p overlays and routing, initial trust establishment, and
-          semantics for things like group chat.
-        </p>
-      </div>
-      <div
-        class="
-          about__card
-          flex flex-col
-          w-full
-          sm:w-1/2
-          lm:max-w-screen-xscard
-          sm:pl-5
-          lm:pl-0
-          mb-6
-          lg:mb-10
-        "
-      >
-        <img
-          src="/assets/img/3.gif"
-          class="about__gif self-center"
-          alt="Gif animation"
-          width="210"
-          height="210"
-        />
-        <p
-          class="about__heading mb-4 font-semibold text-s lg:text-sm text-left"
-        >
-          Peer-to-Peer
-        </p>
-        <p class="about__text text-s lg:text-base opacity-75">
-          The protocols we work on are pure peer-to-peer, and aim to minimize
-          centralization. This too is in opposition to many initiatives in the
-          secure messaging space.
-        </p>
-      </div>
-      <div
-        class="
-          about__card
-          flex flex-col
-          w-full
-          sm:w-1/2
-          lm:max-w-screen-xscard
-          mb-6
-          lg:mb-10
-          lm:mr-5
-        "
-      >
-        <img
-          src="/assets/img/4.gif"
-          class="about__gif self-center"
-          alt="Gif animation"
-          width="210"
-          height="210"
-        />
-        <p
-          class="about__heading mb-4 font-semibold text-s lg:text-sm text-left"
-        >
-          Security, Privacy, Censorship Resistance
-        </p>
-        <p class="about__text text-s lg:text-base opacity-75">
-          Assumes the basics such as end-to-end encryption, forward secrecy,
-          avoiding MITM-attacks. Vac also places a premium on privacy and
-          censorship resistance from port blocking, traffic analysis, and
-          similar.
-        </p>
-      </div>
-      <div
-        class="
-          about__card
-          flex flex-col
-          w-full
-          sm:w-1/2
-          lm:max-w-screen-xscard
-          sm:pl-5
-          lm:pl-0
-          mb-6
-          lg:mb-10
-        "
-      >
-        <img
-          src="/assets/img/5.gif"
-          class="about__gif self-center"
-          alt="Gif animation"
-          width="210"
-          height="210"
-        />
-        <p
-          class="about__heading mb-4 font-semibold text-s lg:text-sm text-left"
-        >
-          Modular System
-        </p>
-        <p class="about__text text-s lg:text-base opacity-75">
-          Provide options at each layer in the stack, instead of having a
-          tightly coupled set of protocols. Allowing developers to choose what
-          they use and ensure they know each choice comes with different
-          trade-offs.
-        </p>
-      </div>
-      <div
-        class="
-          about__card
-          flex flex-col
-          w-full
-          sm:w-1/2
-          lm:max-w-screen-xscard lm:mr-5
-        "
-      >
-        <img
-          src="/assets/img/2.gif"
-          class="about__gif self-center"
-          alt="Gif animation"
-          width="210"
-          height="210"
-        />
-        <p
-          class="about__heading mb-4 font-semibold text-s lg:text-sm text-left"
-        >
-          Generalized Messaging
-        </p>
-        <p class="about__text text-s lg:text-base opacity-75">
-          This includes both human to human communication, as well as machine to
-          machine communication. Texting, data transfer, financial transactions,
-          state channels and more.
+        <p class="about__text text-s lg:text-base opacity-75 md:mr-5 lg:mr-0">
+          {{ card.text }}
         </p>
       </div>
+      {% endfor %}
     </div>
   </div>
 </section>
@@ -480,11 +361,11 @@ layout: default
 
   <div class="info-block w-full sm:w-10/12 lg:w-9/12">
     <div class="flex flex-col">
-      <ul class="mb-5 container s:mx-auto flex-row hidden flex-wrap sm:flex">
+      <ul class="container s:mx-auto flex-row hidden flex-wrap sm:flex">
         {% for post in site.posts limit:8 %} {% include post-preview.html %} {%
         endfor %}
       </ul>
-      <ul class="mb-5 container s:mx-auto flex flex-col sm:hidden">
+      <ul class="container s:mx-auto flex flex-col sm:hidden">
         {% for post in site.posts limit:4 %} {% include post-preview.html %} {%
         endfor %}
       </ul>
@@ -520,11 +401,11 @@ layout: default
 
   <div class="info-block w-full sm:w-10/12 lg:w-9/12">
     <div class="flex flex-col">
-      <ul class="mb-5 container s:mx-auto flex-row hidden flex-wrap sm:flex">
+      <ul class="container s:mx-auto flex-row hidden flex-wrap sm:flex">
         {% for mediapost in site.data.media limit:8 %} {% include
         media-preview.html %} {% endfor %}
       </ul>
-      <ul class="mb-5 container s:mx-auto flex flex-col sm:hidden">
+      <ul class="container s:mx-auto flex flex-col sm:hidden">
         {% for mediapost in site.data.media limit:4 %} {% include
         media-preview.html %} {% endfor %}
       </ul>
@@ -542,7 +423,15 @@ layout: default
 
 <section
   id="join"
-  class="join container max-w-screen-xl flex flex-col sm:flex-row py-10"
+  class="
+    join
+    container
+    max-w-screen-xl
+    flex flex-col
+    sm:flex-row
+    pt-10
+    sl:py-10
+  "
 >
   <div class="heading-block w-full sm:w-2/12 lg:w-3/12">
     <h2 class="text-sm font-semibold mb-5 s:text-center lg:text-center">
@@ -554,164 +443,30 @@ layout: default
     <div
       class="flex flex-col sl:flex-row sl:justify-between lg:max-w-screen-ml"
     >
-      <div class="join__option w-full sl:w-4/12 flex sl:flex-col mb-16 sl:mb-0">
+      {% for card in site.data.join %}
+      <div class="join__option w-full sl:w-4/12 flex sl:flex-col mb-10 sl:mb-0">
         <div
           class="flex justify-center items-center h-8 mr-6 sl:mr-0 mb-5 lg:mb-8"
         >
-          <a href="https://status.im/our_team/jobs.html" target="_blank"
-            ><svg
-              width="28"
-              height="32"
-              viewBox="0 0 28 32"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              class="hover:opacity-50"
-            >
-              <g clip-path="url(#clip0)">
-                <path
-                  d="M19.5182 11.0373C19.4653 8.40252 18.4029 5.87248 17.0234 3.62007C17.7793 3.15911 18.6408 2.90244 19.5129 3.07006C20.385 3.23768 21.1831 3.80864 21.5583 4.60485C21.8807 5.30152 21.8649 6.09772 21.812 6.8625C21.7856 7.20298 21.7539 7.5487 21.6429 7.87347C21.5689 8.08299 21.4685 8.2768 21.3522 8.46014C21.2042 8.7011 21.0351 8.92634 20.8659 9.15158C20.4167 9.76444 19.9674 10.4245 19.5182 11.0373Z"
-                  fill="#999999"
-                />
-                <path
-                  d="M13.4133 5.63666C12.6152 4.47379 12.1078 3.61996 10.612 2.81328C9.11621 2.00661 9.11621 2.01184 9.11621 2.01184C9.11621 2.01184 10.8498 -0.581051 13.0274 0.126102C15.205 0.833256 14.5126 5.51618 14.0686 7.3024"
-                  fill="#4D4D4D"
-                />
-                <path
-                  d="M6.07715 0.942742C6.07715 0.942742 8.42916 0.869408 11.0771 2.81801C12.4831 3.85517 14.1374 6.02377 14.0687 7.30188C14 8.58 10.9767 14.7768 10.7706 18.3335C10.5645 21.8902 10.7812 26.4055 11.9175 27.4846C13.0539 28.5636 13.9418 30.0879 16.1036 30.9889C19.0158 32.2042 17.1289 32.0313 13.9154 30.8213C12.6945 30.3603 12.4038 30.5698 10.6702 28.8989C5.9873 24.3993 7.43021 22.5869 7.45136 16.2644C7.46721 11.6758 7.69448 6.42187 7.84248 4.65661C7.99047 2.95944 8.22831 2.7342 7.19766 1.87514C6.07715 0.942742 6.07715 0.942742 6.07715 0.942742Z"
-                  fill="#1A1A1A"
-                />
-                <path
-                  d="M14.359 5.26469C14.1846 7.15567 13.3865 8.90522 12.6677 10.6391C11.9383 12.4043 11.1984 14.2534 10.6962 16.0972C9.92458 18.9258 9.84001 21.9116 10.173 24.8293C10.2893 25.8298 10.4584 26.8564 10.9922 27.7155C11.4521 28.4541 12.1392 29.0198 12.8316 29.5541C14.3273 30.7065 15.9711 31.8222 17.858 32.0056C15.913 30.4917 14.5229 28.3336 13.8622 25.9817C13.1381 23.4045 13.3337 20.9268 14.6075 18.5592C14.951 17.9254 15.3421 17.3177 15.7385 16.7153C16.8908 14.9501 18.043 13.1848 19.1899 11.4195C19.3485 11.1786 19.5123 10.9272 19.5757 10.6443C19.6445 10.3457 19.5969 10.0367 19.544 9.73285C19.0683 7.07709 17.9214 4.54706 16.2406 2.43084C15.2523 1.17891 13.9098 0.000322679 12.3136 0.000322679C13.043 -0.0153918 13.6349 0.545093 13.9573 1.19463C14.2798 1.84416 14.3379 2.58798 14.3696 3.31085C14.4013 3.96038 14.4225 4.61515 14.359 5.26469Z"
-                  fill="#808080"
-                />
-                <path
-                  d="M26.9758 16.1599C26.8278 15.8142 26.6428 15.4842 26.4156 15.1804C26.2887 15.0075 26.1513 14.8451 26.0191 14.6775C25.6967 14.2532 25.591 13.6927 25.1893 13.347C24.7771 12.9961 24.6397 12.3675 24.8564 11.8698C24.9462 11.6656 25.0942 11.4875 25.1841 11.2884C25.4483 10.7174 25.2686 10.047 25.0149 9.47077C24.6608 8.66409 24.1693 7.9255 23.6513 7.20787C22.9483 6.22834 22.1978 5.28547 21.405 4.37402C21.5477 5.15975 21.479 5.91928 21.2887 6.69977C21.183 7.1293 21.035 7.54836 20.8447 7.9517C20.6122 8.44408 20.3162 8.91028 20.0202 9.37124C18.2866 12.0689 16.5001 14.7351 14.6608 17.3647C13.609 18.868 13.2443 20.8481 13.1227 22.671C13.0012 24.4938 13.3553 26.3691 14.2644 27.9615C14.7929 28.8887 15.5012 29.7058 16.22 30.502C16.6745 31.0049 17.2031 31.7801 17.8532 32.0001C17.9378 31.2301 18.0752 30.193 18.1809 29.4282C18.3606 28.1815 18.7676 26.961 19.386 25.861C19.8035 25.1119 20.369 24.3734 21.1883 24.101C21.7433 23.9176 22.3669 23.991 22.9536 24.0434C23.2813 24.0172 23.6143 24.0643 23.942 24.0643C24.2697 24.0643 24.6185 24.0172 24.8828 23.8286C25.1788 23.6191 25.3373 23.2681 25.3902 22.9119C25.443 22.5557 25.4008 22.1838 25.3796 21.8276C25.3638 21.5919 25.3532 21.3457 25.4642 21.1362C25.665 20.7485 26.2359 20.5652 26.2676 20.1304C26.2834 19.9314 26.1724 19.7481 26.0931 19.5595C26.0139 19.3709 25.9769 19.1404 26.1143 18.9885C26.183 18.9152 26.2781 18.8785 26.3416 18.8052C26.4737 18.648 26.3997 18.4123 26.2834 18.2447C26.1671 18.0771 26.0086 17.9252 25.9769 17.7261C25.9399 17.5323 26.035 17.3333 26.1724 17.1866C26.3098 17.0399 26.4843 16.9404 26.6587 16.8356C26.8225 16.7361 26.9969 16.6052 27.0128 16.4166C27.0181 16.3328 26.9917 16.249 26.9652 16.1704C26.8542 15.8666 26.701 15.5785 26.5054 15.3166"
-                  fill="#CCCCCC"
-                />
-                <path
-                  d="M14.5393 31.0468C14.1271 30.8529 2.68417 28.8886 1.03512 11.896C0.585859 7.27069 2.86916 2.93348 2.86916 2.93348C2.86916 2.93348 4.58692 0.387729 6.78036 1.04774C9.36493 1.82299 7.82687 12.0165 7.73174 13.8551C7.73174 13.8551 7.15563 18.8418 8.51398 24.8762C9.50235 29.2448 14.5393 31.0468 14.5393 31.0468Z"
-                  fill="#151512"
-                />
-              </g>
-              <defs>
-                <clipPath id="clip0">
-                  <rect
-                    width="26.0465"
-                    height="32"
-                    fill="white"
-                    transform="translate(0.976562)"
-                  />
-                </clipPath>
-              </defs>
-            </svg>
+          <a href="{{ card.link }}" target="_blank" class="hover:opacity-50">
+            <img src="{{ card.src }}" alt="Join option logo" />
           </a>
         </div>
         <div class="flex flex-col justify-between flex-1">
           <div>
             <h2 class="text-xs lg:text-sm font-semibold mb-3 text-left">
-              Join the team
+              {{ card.title }}
             </h2>
-            <p class="w-full text-s lg:text-base mb-3">
-              We are a remote team of researchers dedicated to building a fair
-              internet.
-            </p>
+            <p class="w-full text-s lg:text-base mb-3">{{ card.text }}</p>
           </div>
           <div class="media__link container flex justify-start">
             <a class="link link--external" href="https://discord.com/"
-              >View open roles</a
-            >
-          </div>
-        </div>
-      </div>
-
-      <div
-        class="
-          join__option
-          w-full
-          sl:w-4/12
-          flex
-          sl:flex-col
-          mb-16
-          sl:mb-0 sl:ml-2
-          lg:ml-5
-        "
-      >
-        <div
-          class="flex justify-center items-center h-8 mr-6 sl:mr-0 mb-5 lg:mb-8"
-        >
-          <a href="https://discord.com/" target="_blank"
-            ><svg
-              width="25"
-              height="21"
-              viewBox="0 0 25 21"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              class="hover:opacity-50"
-            >
-              <path
-                d="M22.7861 9.04256C21.8482 5.74455 20.7799 4.04048 20.7627 4.00991C20.7017 3.93459 19.189 2.104 15.5271 0.75L15.0353 2.0764C16.7774 2.72057 18.0116 3.50643 18.6899 4.01419C16.6599 3.40408 14.2431 3.03041 12.1008 3.03041C9.95851 3.03041 7.53775 3.40408 5.50128 4.01419C6.18496 3.50648 7.42744 2.72057 9.17631 2.0764L8.69846 0.75C5.02238 2.104 3.49044 3.93459 3.42863 4.00991C3.41108 4.04048 2.32479 5.74455 1.35221 9.04256C0.414855 12.2208 0.0415214 16.7045 0.027872 16.8843C0.109225 17.0131 1.97891 20.25 7.12077 20.25L8.43406 18.3536C6.97595 17.964 5.58693 17.3357 4.31689 16.4832L5.10228 15.3069C7.15122 16.6822 9.54509 17.4092 12.0251 17.4092C14.5051 17.4092 16.9067 16.6822 18.9701 15.3069L19.7431 16.4832C18.4641 17.3357 17.0684 17.964 15.6062 18.3536L16.8995 20.25C22.0414 20.25 23.9452 17.0131 24.0279 16.8843C24.0161 16.7045 23.69 12.2208 22.7861 9.04256ZM8.79853 12.7392H7.39228L7.40468 10.3841H8.81093L8.79853 12.7392ZM16.7071 12.7392H15.3008L15.3132 10.3841H16.7195L16.7071 12.7392Z"
-                fill="#151512"
-              />
-            </svg>
-          </a>
-        </div>
-        <div class="flex flex-col justify-between flex-1">
-          <div>
-            <h2 class="text-xs lg:text-sm font-semibold mb-3 text-left">
-              Join the convo
-            </h2>
-            <p class="w-full text-s lg:text-base mb-3">
-              Ask questions or speak with us about our work as we research new
-              means of communication.
-            </p>
-          </div>
-          <div class="media__link container flex justify-start">
-            <a class="link link--external" href="https://discord.com/"
-              >Join our Discord</a
-            >
-          </div>
-        </div>
-      </div>
-
-      <div
-        class="join__option w-full sl:w-4/12 flex sl:flex-col sl:ml-2 lg:ml-5"
-      >
-        <div
-          class="flex justify-center items-center h-8 mr-6 sl:mr-0 mb-5 lg:mb-8"
-        >
-          <a href="https://github.com/vacp2p" target="_blank"
-            ><svg
-              width="26"
-              height="25"
-              viewBox="0 0 26 25"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              class="hover:opacity-50"
-            >
-              <path
-                d="M12.8857 0.856567C6.26021 0.856567 0.915339 6.20154 0.950043 12.7951C0.9778 18.0687 4.43935 22.5427 9.21766 24.1227C9.81824 24.2327 10.0353 23.864 10.0336 23.5474C10.0321 23.2635 10.0177 22.5129 10.0065 21.5171C6.67274 22.238 5.95552 19.9163 5.95552 19.9163C5.40376 18.5369 4.61433 18.1698 4.61433 18.1698C3.51994 17.4296 4.69151 17.4444 4.69151 17.4444C5.89646 17.5291 6.53549 18.6751 6.53549 18.6751C7.61609 20.4989 9.35182 19.9727 10.0342 19.6665C10.1382 18.8951 10.4459 18.3689 10.7878 18.0702C8.12222 17.7684 5.31483 16.7443 5.29076 12.1708C5.2839 10.8672 5.74629 9.80152 6.50989 8.96619C6.3838 8.66445 5.96641 7.45009 6.61027 5.80766C6.61027 5.80766 7.61658 5.4866 9.9167 7.03094C10.8723 6.76636 11.8976 6.63408 12.9191 6.62962C13.9376 6.63556 14.9658 6.76636 15.9257 7.03242C18.2081 5.48809 19.2163 5.80914 19.2163 5.80914C19.8789 7.45306 19.4743 8.66594 19.3529 8.96767C20.1268 9.80301 20.5959 10.8687 20.6028 12.1723C20.6269 16.7577 17.8272 17.767 15.1558 18.0628C15.5882 18.4314 15.976 19.1597 15.9819 20.273C15.9903 21.8693 15.9821 23.1565 15.9841 23.5474C15.9858 23.867 16.2038 24.2386 16.8122 24.1212C21.5663 22.5397 24.9778 18.0672 24.95 12.7951C24.9153 6.20154 19.5142 0.856567 12.8857 0.856567Z"
-                fill="#151512"
-              />
-            </svg>
-          </a>
-        </div>
-        <div class="flex flex-col justify-between flex-1">
-          <div>
-            <h2 class="text-xs lg:text-sm font-semibold mb-3 text-left">
-              Contribute on Github
-            </h2>
-            <p class="w-full text-s lg:text-base mb-3">
-              Our work is open source and free for anyone to contribute to, use,
-              and modify for their needs.
-            </p>
-          </div>
-          <div class="media__link container flex justify-start">
-            <a class="link link--external" href="https://discord.com/"
-              >Contribute</a
+              >{{ card.link-text }}</a
             >
           </div>
         </div>
       </div>
+      {% endfor %}
     </div>
   </div>
 </section>