diff --git a/src/assets/mini_joker.png b/src/assets/mini_joker.png
new file mode 100644
index 0000000..c5f2e68
Binary files /dev/null and b/src/assets/mini_joker.png differ
diff --git a/src/assets/space_race.png b/src/assets/space_race.png
new file mode 100644
index 0000000..311ab45
Binary files /dev/null and b/src/assets/space_race.png differ
diff --git a/src/assets/weather_station.png b/src/assets/weather_station.png
new file mode 100644
index 0000000..ab16fb2
Binary files /dev/null and b/src/assets/weather_station.png differ
diff --git a/src/components/App.vue b/src/components/App.vue
index 829b825..e526a12 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -1,20 +1,20 @@
 <template>
   <Header :dark-mode="darkMode" />
-  <GoogleForm/>
+  <CardContainer/>
   <Footer :darkMode="darkMode" @update:darkMode="toggleDarkMode" />
 </template>
 
 <script>
 import Header from './Header'
 import Footer from './Footer'
-import GoogleForm from './GoogleForm'
+import CardContainer from './CardContainer'
 
 export default {
   name: 'App',
   components: {
     Header,
     Footer,
-    GoogleForm
+    CardContainer
   },
   data() {
     return {
diff --git a/src/components/Card.vue b/src/components/Card.vue
new file mode 100644
index 0000000..711595e
--- /dev/null
+++ b/src/components/Card.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="main">
+
+    <img :src="require(`@/assets/${image_name}`)"/>
+
+    <div class="body">
+      <h2 class="title"> {{ title }} </h2>
+      <slot></slot>
+      <br/>
+    </div>
+    <br/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Card",
+  props: ["title", "image_name", "website"]
+}
+</script>
+
+<style scoped>
+.main {
+  background-color: white;
+  text-align: left;
+}
+
+.body {
+  margin: 0 2em;
+}
+
+@media screen and (orientation: landscape) {
+  .main {
+    min-height: 40vh;
+  }
+
+  .body {
+    float: left;
+    max-width: 60vw;
+  }
+
+  img {
+    float: right;
+    height: 40vh;
+    max-width: 30vw;
+  }
+}
+
+@media screen and (orientation: portrait) {
+  img {
+    max-height: 50vh;
+    max-width: 80vw;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+</style>
diff --git a/src/components/CardContainer.vue b/src/components/CardContainer.vue
new file mode 100644
index 0000000..cb2ad93
--- /dev/null
+++ b/src/components/CardContainer.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="flex-container">
+    <hr/>
+
+    <Card class="flex-item" title="Mini Joker" image_name="mini_joker.png" website="https://github.com/codi-hacks/space-race">
+      It's the mini joker!!!!!!!
+    </Card>
+
+    <Card class="flex-item" title="Space Race" image_name="space_race.png" website="https://github.com/codi-hacks/space-race">
+      Spaceship racer! A spaceship racing game created with the Lua framework <a href="https://love2d.org/">Love2D</a>.
+      It is mostly complete, yet it lacks levels!
+      If you are interested in helping, please open an issue on our GitHub.
+    </Card>
+
+    <Card class="flex-item" title="Weather Station" image_name="weather_station.png" website="https://weather.codihacks.org/">
+      A <a href="https://github.com/codi-hacks/weather-station">weather station web app</a>.
+      It features a physical weather station, an API server written in Rust, and a web app frontend written in Vue.
+    </Card>
+  </div>
+</template>
+
+<script>
+import Card from '@/components/Card.vue'
+export default {
+  name: "Card Container",
+  components: {
+    Card
+  }
+}
+</script>
+
+<style scoped>
+.flex-container {
+  display: flex;
+  flex-flow: column wrap;
+  gap: 1em;
+  margin: 0 2em;
+  justify-content: center;
+}
+
+.flex-item {
+  border-top: solid black 2px;
+  flex-basis: 100%;
+  flex-grow: 1;
+  flex-shrink: 0;
+  min-height: 20em;
+}
+
+.flex-item:last-child {
+  padding-bottom: 30px;
+}
+</style>
diff --git a/src/components/GoogleForm.vue b/src/components/GoogleForm.vue
deleted file mode 100644
index 8891148..0000000
--- a/src/components/GoogleForm.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div class="form-container">
-    <p>If you are interested in joining, please fill out your contact info in the form below and our club president will get back to you.</p>
-    <br />
-    <p>Programmers of <b>all</b> skill levels welcome!</p>
-    <iframe
-      frameborder="0"
-      height="1050"
-      marginheight="0"
-      marginwidth="0"
-      src="https://docs.google.com/forms/d/e/1FAIpQLSd1__tmuMPAw5j3uKujuDw1ibA2vSBYvu3Ww50eGQJIj6EejA/viewform?embedded=true"
-      width="100%">
-      Sign-up form is loading...
-    </iframe>
-  </div>
-</template>
-
-<style scoped>
-iframe {
-  max-width: 100%;
-  min-width: 200px;
-  max-height: auto;
-}
-
-.form-container, .form-header, p {
-  margin: auto;
-}
-
-@media screen and (min-width: 0px) {
-  .form-container, p {
-    max-width: 100%;
-  }
-}
-@media screen and (min-width: 700px) {
-  .form-container, p {
-    max-width: 85%;
-  }
-}
-@media screen and (min-width: 950px) {
-  .form-container, p {
-    max-width: 75%;
-  }
-}
-</style>
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
index dbdd9ba..9078b2c 100644
--- a/src/stylesheets/main.css
+++ b/src/stylesheets/main.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Comfortaa|Patua+One');
+
 :root {
   --link-color: #27a1f0;
 }
@@ -8,13 +10,18 @@ body {
 }
 
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Comfortaa', Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  margin-top: 60px;
+  font-size: 1.2em;
+  margin-top: 40px;
   text-align: center;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Patua One';
+}
+
 a {
   color: var(--link-color);
 }