diff --git a/src/components/molecules/LearningResourceWrapper.vue b/src/components/molecules/LearningResourceWrapper.vue
new file mode 100644
index 0000000..f2cacac
--- /dev/null
+++ b/src/components/molecules/LearningResourceWrapper.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="box m-3 p-3 columns">
+    <div class="column is-one-quarter" v-if="image">
+      <figure class="image">
+        <img :src="image" :alt="alt" />
+      </figure>
+    </div>
+    <div class="column">
+      <h2 class="title">{{ title }}</h2>
+      <p class="has-text-white is-size-4 mb-4">{{ desc }}</p>
+      <h3 class="is-size-3"><a href="{{ link }}">{{ link }}</a></h3>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: String,
+  desc: String,
+  link: String,
+  image: { type: String, required: false },
+  alt: { type: String, required: false },
+})
+</script>
\ No newline at end of file
diff --git a/src/locales/en_US.ts b/src/locales/en_US.ts
index 02c11b6..f234bb3 100644
--- a/src/locales/en_US.ts
+++ b/src/locales/en_US.ts
@@ -16,5 +16,14 @@ export default {
       "title": "Community",
       "text": "The Viossa community is rich and colourful, drawing from many global traditions due to its worldwide online membership. Since the teaching culture puts an emphasis on linguistic immersion, and discourages prescriptivism, the culture of Viossa is as diverse and varied as the language and the people who speak it. For many, their personal dialect is a key form of identity and expression. The fluid nature of Viossa and lack of defined meanings makes Viossa popular for creative purposes, such as poetry and songwriting.",
     }
+  ],
+  "resources": [
+    {
+      "title": "Discord Server",
+      "desc": "This is where most of the action happens! Hop on in!",
+      "link": "https://discord.gg/g3mG2gYjZD",
+      "image": "discord.png",
+      "alt": "Discord logo"
+    }
   ]
 }
\ No newline at end of file
diff --git a/src/routes/resources.vue b/src/routes/resources.vue
index 38957cb..d71181b 100644
--- a/src/routes/resources.vue
+++ b/src/routes/resources.vue
@@ -1,3 +1,42 @@
 <template>
-	<h1>Resources</h1>
+	<div class="min-h-screen flex flex-col" style="gap: 4rem">
+		<!-- Main application wrapper -->
+    <section class="section">
+      <h1 class="title has-text-black p-6">Learning Resources</h1>
+    </section>
+
+    <section class="section">
+      <LearningResourceWrapper class="is-one-quarter" 
+        v-for="(resource, index) in resourcesWithImages" 
+        :key="index"
+        :title="resource.title"
+        :desc="resource.desc"
+				:link="resource.link"
+        :image="resource.image"
+        :alt="resource.alt"
+      />
+    </section>
+	</div>
 </template>
+
+<script setup lang="ts">
+import LearningResourceWrapper from '@/components/molecules/LearningResourceWrapper.vue'
+import '@/assets/style.scss'
+import 'bulma/css/bulma.css'
+import { useI18n } from 'vue-i18n'
+import type { MessageSchema } from '../i18n/types'
+import { computed } from 'vue'
+
+const { tm } = useI18n()
+const resourceList = computed<MessageSchema['resources']>(() => tm('resources'))
+const resourcesWithImages = computed(() =>
+  resourceList.value.map(resource => {
+    if (!resource.image) return resource
+
+    return {
+      ...resource,
+      image: new URL(`../assets/${resource.image}`, import.meta.url).href
+    }
+  })
+)
+</script>