diff --git a/src/vue/components/PokemonPicture.vue b/src/vue/components/PokemonPicture.vue
new file mode 100644
index 0000000..3eec849
--- /dev/null
+++ b/src/vue/components/PokemonPicture.vue
@@ -0,0 +1,43 @@
+<template>
+	<section>
+		<img
+			v-if="!showPokemon"
+			:src="pokemonImage"
+			class="brightness-0 h-[200px]"
+		/>
+		<img
+			v-else
+			:src="pokemonImage"
+			class="fade-in h-[200px]"
+			alt="pokemon image"
+		/>
+	</section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+	pokemonId: number;
+	showPokemon?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	showPokemon: false,
+});
+
+const pokemonImage = computed(
+	() =>
+		`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/${props.pokemonId}.svg`,
+);
+</script>
+
+<style scoped>
+img {
+	user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	-webkit-user-drag: none;
+	-webkit-user-select: none;
+}
+</style>