diff --git a/src/components/Focus.vue b/src/components/Focus.vue
index 0574783..8541b9c 100644
--- a/src/components/Focus.vue
+++ b/src/components/Focus.vue
@@ -3,20 +3,20 @@
     <button
       class="button is-fullwidth button-focus"
       :aria-expanded="isOpen"
-      :class="{ 'is-success': !filteredModuleNames.length }"
+      :class="{ 'is-success': !filteredModules.length }"
       type="button"
       @click="toggleFocus()"
     >
       <div class="focus-main">
         <span>{{ name }}</span>
         <span
-          v-if="filteredModuleNames.length"
+          v-if="filteredModules.length"
           class="tag is-info is-light"
         >
-          {{ filteredModuleNames.length }} Module werden noch benötigt
+          {{ filteredModules.length }} Module werden noch benötigt
         </span>
         <span
-          v-if="!filteredModuleNames.length"
+          v-if="!filteredModules.length"
           class="tag is-success is-light"
         >
           Vertiefung geplant
@@ -33,18 +33,22 @@
       class="column is-full column-focus"
     >
       <div class="box box-focus">
-        <p v-if="!filteredModuleNames.length">
+        <p v-if="!filteredModules.length">
           Alle benötigten Module sind bestanden/geplant.
         </p>
-        <p v-if="filteredModuleNames.length">
+        <p v-if="filteredModules.length">
           Für die Vertiefung müssen folgende Module noch geplant werden:
         </p>
         <ul class="focus-missing-modules-list">
           <li
-            v-for="filteredModuleName in filteredModuleNames"
-            :key="filteredModuleName"
+            v-for="module in filteredModules"
+            :key="module.id"
           >
-            {{ filteredModuleName }}
+            <a
+              target="_blank"
+              :href="'https://studien.rj.ost.ch/' + module.url.replace('.json', '.html')"
+            >{{ module.name }}
+            </a>
           </li>
         </ul>
       </div>
@@ -69,9 +73,9 @@ export default defineComponent({
       type: Array<Module>,
       default: () => [],
     },
-    filteredModuleNames: {
+    filteredModules: {
       required: true,
-      type: Array<string>,
+      type: Array<Module>,
       default: () => [],
     },
   },
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 9a99989..5c07e53 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -143,7 +143,7 @@
             <FocusComponent
               :name="focus.name"
               :all-modules="focus.modules"
-              :filtered-module-names="focus.filteredModuleNames"
+              :filtered-modules="focus.filteredModules"
             />
           </div>
         </div>
@@ -203,9 +203,8 @@ export default defineComponent({
       const plannedModuleIds = this.plannedModules.map((module) => module.id);
       return this.focuses.map((focus) => ({
         ...focus,
-        filteredModuleNames: focus.modules
-          .filter((module) => !plannedModuleIds.includes(module.id))
-          .map((module) => module.name),
+        filteredModules: focus.modules
+          .filter((module) => !plannedModuleIds.includes(module.id)),
       }));
     },
     totalPlannedEcts() {
diff --git a/styles/main.scss b/styles/main.scss
index 6249fb3..53d3b97 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -86,8 +86,14 @@
   color: white;
 }
 
-.module a:hover {
-  text-decoration: underline;
+.focus-missing-modules-list a {
+  color: inherit;
+}
+
+.module, .focus-missing-modules-list {
+  a:hover {
+    text-decoration: underline;
+  }
 }
 
 @include desktop {