diff --git a/index.html b/index.html
index 1807213..f3b171b 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="has-navbar-fixed-top">
+<html lang="en" class="has-background-black has-navbar-fixed-top">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/viossa_circle.svg"/>
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Viossa.net</title>
   </head>
-  <body class="has-background-black">
+  <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/src/components/molecules/LearningResourceWrapper.vue b/src/components/molecules/LearningResourceWrapper.vue
index f572203..83c6285 100644
--- a/src/components/molecules/LearningResourceWrapper.vue
+++ b/src/components/molecules/LearningResourceWrapper.vue
@@ -1,20 +1,39 @@
 <template>
-  <div class="box columns is-vcentered">
+  <div class="box columns is-vcentered is-gap-4">
     <div class="column is-one-quarter" v-if="image">
       <figure class="image">
-        <img :src="image" :alt="alt" :title="alt"/>
+        <img :src="image" :alt="alt" :title="alt" />
       </figure>
     </div>
     <div class="column">
       <h4 class="title">{{ title }}</h4>
-      <p class="">{{ desc }}</p>
-      <a
-        :href="link"
-        target="_blank"
-        rel="noopener noreferrer nofollow"
-        class="button is-link is-medium"
-        :text="linkText">
-      </a>
+      <p class="subtitle">{{ subtitle }}</p>
+      <p class="content">{{ desc }}</p>
+
+      <div class="level">
+        <a :href="link" 
+          target="_blank" 
+          rel="noopener noreferrer nofollow" 
+          class="button is-primary is-medium"
+          :text="joinText">
+        </a>
+
+        <a :href="link" 
+          target="_blank" 
+          rel="noopener noreferrer nofollow"
+          class="button is-info is-outlined is-medium" 
+          :text="rulesText">
+        </a>
+
+        <a :href="link" 
+          target="_blank" 
+          rel="noopener noreferrer nofollow"
+          class="button is-warning is-outlined is-medium" 
+          :text="rulesText">
+        </a>
+      </div>
+
+
     </div>
   </div>
 </template>
@@ -22,9 +41,12 @@
 <script setup lang="ts">
 defineProps({
   title: String,
+  subtitle: String,
   desc: String,
   link: String,
-  linkText: String,
+  rulesLink: String,
+  joinText: String,
+  rulesText: String,
   image: { type: String, required: false },
   alt: { type: String, required: false },
 })
diff --git a/src/components/pages/HomePage.vue b/src/components/pages/HomePage.vue
index 0167295..86e9e35 100644
--- a/src/components/pages/HomePage.vue
+++ b/src/components/pages/HomePage.vue
@@ -1,6 +1,5 @@
 <template>
-	<div class="min-h-screen flex flex-col">
-		<!-- Main application wrapper -->
+	<div>
     <section class="hero is-primary">
       <div class="hero-body">
         <div class="title">BRÅTULA VIOSSA.NET MÅDE</div>
@@ -8,7 +7,7 @@
       </div>
     </section>
 
-    <section class="section">
+    <section class="section container">
       <HomeSectionWrapper 
         v-for="(section, index) in sectionsWithImages" 
         :key="index"
diff --git a/src/components/pages/ResourcesPage.vue b/src/components/pages/ResourcesPage.vue
index cdf5c67..9bcbc1c 100644
--- a/src/components/pages/ResourcesPage.vue
+++ b/src/components/pages/ResourcesPage.vue
@@ -1,20 +1,22 @@
 <template>
-	<div class="min-h-screen flex flex-col" style="gap: 4rem">
-		<!-- Main application wrapper -->
+	<div>
     <section class="section">
       <h1 class="title">Learning Resources</h1>
     </section>
 
-    <section class="section">
-      <LearningResourceWrapper class="is-one-quarter" 
+    <section class="section container">
+      <LearningResourceWrapper 
         v-for="(resource, index) in resourcesWithImages" 
         :key="index"
         :title="resource.title"
+        :subtitle="resource.subtitle"
         :desc="resource.desc"
 				:link="resource.link"
+				:rulesLink="resource.rulesLink"
         :image="resource.image"
         :alt="resource.alt"
-        :linkText="resource.linkText"
+        :joinText="resource.joinText"
+        :rulesText="resource.rulesText"
       />
     </section>
 	</div>
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 47577e2..cf37d03 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -1,13 +1,15 @@
 import { createI18n } from 'vue-i18n'
 import en_US from '../locales/en_US'
+import vp_VL from '../locales/vp_VL'
 import type { MessageSchema } from './types'
 
-const i18n = createI18n<[MessageSchema], 'en_US'>({
+const i18n = createI18n<[MessageSchema], 'en_US' | 'vp_VL'>({
   legacy: false,
-  locale: 'en_US',
+  locale: 'vp_VL',
   fallbackLocale: 'en_US',
   messages: {
-    en_US: en_US
+    en_US,
+    vp_VL
   }
 })
 
diff --git a/src/locales/en_US.ts b/src/locales/en_US.ts
index 3bb0169..8b220e2 100644
--- a/src/locales/en_US.ts
+++ b/src/locales/en_US.ts
@@ -20,11 +20,14 @@ export default {
   "resources": [
     {
       "title": "Discord Server",
-      "desc": "This is where most of the action happens! Hop on in!",
+      "subtitle": "This is where most of the action happens! Hop on in!",
+      "desc": "Originally started in 2015 something something read the rules here, then click the link below to join!",
       "link": "https://discord.gg/g3mG2gYjZD",
+      "rulesLink": "https://discord.gg/g3mG2gYjZD",
       "image": "discord.png",
       "alt": "Discord logo",
-      "linkText": "Join"
+      "joinText": "Join",
+      "rulesText": "Rules"
     }
   ]
 }
\ No newline at end of file
diff --git a/src/locales/vp_VL.ts b/src/locales/vp_VL.ts
new file mode 100644
index 0000000..925fc34
--- /dev/null
+++ b/src/locales/vp_VL.ts
@@ -0,0 +1,33 @@
+export default {
+  "sections": [
+    {
+      "title": "Kafaen afto Viossa",
+      "text": "Viossa tte glossa mahena grun vi nai vil fshtojena na bakadjin, grun vi svinnur ja! De aldjin zovti lera ne",
+      "image": "flakka.png",
+      "alt": "Flag of the Viossa Language"
+    },
+    {
+      "title": "History of Viossa",
+      "text": "Viossa began as a Skype group in 2014, created by members of the r/conlangs community on Reddit, as an experiment to simulate the formation of a pidgin language. Pidgins are simplified languages resulting from contact between populations with no shared common language. Unlike most pidgins, which usually have two to three contributor languages, Viossa comes from many diverse languages. This is because people from all around the world helped to contribute to Viossa's vocabulary.",
+      "image": "flakka.png",
+      "alt": "Flag of the Viossa Language"
+    },
+    {
+      "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",
+      "subtitle": "This is where most of the action happens! Hop on in!",
+      "desc": "Originally started in 2015 something something read the rules here, then click the link below to join!",
+      "link": "https://discord.gg/g3mG2gYjZD",
+      "rulesLink": "https://discord.gg/g3mG2gYjZD",
+      "image": "discord.png",
+      "alt": "Discord logo",
+      "joinText": "Join",
+      "rulesText": "Rules"
+    }
+  ]
+}
\ No newline at end of file
