diff --git a/src/views/Abilities.vue b/src/views/Abilities.vue
deleted file mode 100644
index 574e72d..0000000
--- a/src/views/Abilities.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <prose>
-    <h2>Abilities</h2>
-
-    <p>
-      Since Sebin is a fire dragon there's a myriad of abilities he has at his
-      disposal to defend himself.
-    </p>
-
-    <h3>Attacks</h3>
-
-    <attack-list>
-      <attack-item>
-        <template #image>
-          <img
-            src="@/assets/refs/attacks/sebin-fire_breath-hires.png"
-            alt="Sebin Fire Breath"
-          />
-        </template>
-        <template #name>Fire Breath</template>
-        <template #desc>
-          Like most fire dragons, Sebin can breathe fire. In order to do this,
-          he takes a deep breath to enrich the oxygen in his lungs with gases,
-          which, together with special glands in his mouth, produce a
-          combustible mixture. The resulting jet of fire, reaching several
-          hundred degrees Celsius, spreads out on its way to its target,
-          scorching everything in its path.
-        </template>
-      </attack-item>
-
-      <attack-item>
-        <template #image>
-          <img
-            src="@/assets/refs/attacks/sebin-flame_toss-hires.png"
-            alt="Sebin Flame Toss"
-          />
-        </template>
-        <template #name>Flame Toss</template>
-        <template #desc>
-          By spitting fire into his hands, Sebin can form it into a ball and use
-          it as a projectile. His scales are fireproof and can withstand the
-          high temperatures. Due to their high concentration, the projectiles
-          explode upon impact. By combining two fireballs the explosion radius
-          increases dramatically.
-        </template>
-      </attack-item>
-
-      <attack-item>
-        <template #image>
-          <img
-            src="@/assets/refs/attacks/sebin-kindled_fist-hires.png"
-            alt="Sebin Kindled Fist"
-          />
-        </template>
-        <template #name>Kindled Fist</template>
-        <template #desc>
-          Apart from throwing projectiles, Sebin can also use the fireballs to
-          wrap his fists in fire. This allows him to inflict severe burns on his
-          opponent with each blow. In addition, he can release the fire from his
-          fists with aimed blows and hurl it at his opponents.
-        </template>
-      </attack-item>
-
-      <attack-item>
-        <template #image>
-          <img
-            src="@/assets/refs/attacks/sebin-burning_twister-hires.png"
-            alt="Sebin Burning Twister"
-          />
-        </template>
-        <template #name>Burning Twister</template>
-        <template #desc>
-          A technique used in aerial combat, Sebin uses his fire breath to
-          engulf his body in flames while spinning to become a fire tornado that
-          singes opponents.
-        </template>
-      </attack-item>
-    </attack-list>
-
-    <p>
-      Image Credit:
-      <a href="https://twitter.com/GafreitasArt">Gabriel Freitas</a>
-    </p>
-  </prose>
-</template>
-
-<script>
-import Prose from "@/components/Prose.vue";
-import AttackList from "@/components/AttackList.vue";
-import AttackItem from "@/components/AttackItem.vue";
-
-export default {
-  components: { Prose, AttackList, AttackItem },
-};
-</script>
diff --git a/src/views/AbilitiesView.vue b/src/views/AbilitiesView.vue
new file mode 100644
index 0000000..dcce45a
--- /dev/null
+++ b/src/views/AbilitiesView.vue
@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import AttackItem from "@/components/AttackItem.vue";
+import AttackList from "@/components/AttackList.vue";
+</script>
+
+<template>
+  <section>
+    <h1>{{ $route.name }}</h1>
+
+    <p>
+      Since Sebin is a fire dragon there's a myriad of abilities he has at his
+      disposal to defend himself.
+    </p>
+  </section>
+
+  <section>
+    <h2>Attacks</h2>
+  </section>
+
+  <AttackList>
+    <AttackItem>
+      <!-- max 2000px -->
+      <template #image>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
+            alt="Sebin Fire Breath"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+      <template #name>Fire Breath</template>
+      <template #desc>
+        Like most fire dragons, Sebin can breathe fire. In order to do this, he
+        takes a deep breath to enrich the oxygen in his lungs with gases, which,
+        together with special glands in his mouth, produce a combustible
+        mixture. The resulting jet of fire, reaching several hundred degrees
+        Celsius, spreads out on its way to its target, scorching everything in
+        its path.
+      </template>
+    </AttackItem>
+
+    <AttackItem>
+      <!-- max 2000px -->
+      <template #image>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
+            alt="Sebin Fire Breath"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+      <template #name>Flame Toss</template>
+      <template #desc>
+        By spitting fire into his hands, Sebin can form it into a ball and use
+        it as a projectile. His scales are fireproof and can withstand the high
+        temperatures. Due to their high concentration, the projectiles explode
+        upon impact. By combining two fireballs the explosion radius increases
+        dramatically.
+      </template>
+    </AttackItem>
+
+    <AttackItem>
+      <!-- max 2000px -->
+      <template #image>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
+            alt="Sebin Kindled Fist"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+      <template #name>Kindled Fist</template>
+      <template #desc>
+        Apart from throwing projectiles, Sebin can also use the fireballs to
+        wrap his fists in fire. This allows him to inflict severe burns on his
+        opponent with each blow. In addition, he can release the fire from his
+        fists with aimed blows and hurl it at his opponents.
+      </template>
+    </AttackItem>
+
+    <AttackItem>
+      <!-- max 2000px -->
+      <template #image>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
+            alt="Sebin Burning Twister"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+      <template #name>Burning Twister</template>
+      <template #desc>
+        A technique used in aerial combat, Sebin uses his fire breath to engulf
+        his body in flames while spinning to become a fire tornado that singes
+        opponents.
+      </template>
+    </AttackItem>
+  </AttackList>
+</template>
+
+<style lang="scss"></style>