diff --git a/docs/src/App.vue b/docs/src/App.vue
index b75758b..5b61313 100755
--- a/docs/src/App.vue
+++ b/docs/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import pkg from '../../package.json';
-import HelloWorld from './components/HelloWorld.vue'
+import Title from './components/Title.vue'
 import VueTechsLogos from 'vue-techs-logos'
 import DarkModeVue from 'darkmode-vue'
 
@@ -12,7 +12,7 @@ const appVersion: string = pkg.version;
     <DarkModeVue class="darkmode-button" :hiddenLabel="true"/>
     <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
     <div class="wrapper">
-      <HelloWorld :msg="`vue-techs-logos@${appVersion}`" />
+      <Title :title="`vue-techs-logos@${appVersion}`" />
       <div class="code-content">
         <div>
           <h1>Install</h1>
diff --git a/docs/src/components/HelloWorld.vue b/docs/src/components/HelloWorld.vue
deleted file mode 100644
index e62878e..0000000
--- a/docs/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  msg: string
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully run this project
-      <a href="https://github.com/criar-art/vue-techs-logos" target="_blank" rel="noopener">criart.art/vue-techs-logos</a>
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-size: 2rem;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-h1,
-h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  h1 {
-    font-weight: 500;
-    font-size: 2.8rem;
-  }
-
-  h1,
-  h3 {
-    text-align: left;
-  }
-}
-</style>
diff --git a/docs/src/components/Title.vue b/docs/src/components/Title.vue
new file mode 100644
index 0000000..0a1ad2b
--- /dev/null
+++ b/docs/src/components/Title.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+}>()
+</script>
+
+<template>
+  <div class="title">
+    <h1 class="green">{{ title }}</h1>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-size: 2rem;
+  top: -10px;
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  h1 {
+    font-weight: 500;
+    font-size: 2.8rem;
+    text-align: left;
+  }
+}
+</style>
diff --git a/docs/src/components/__tests__/HelloWorld.spec.ts b/docs/src/components/__tests__/HelloWorld.spec.ts
deleted file mode 100644
index 2533202..0000000
--- a/docs/src/components/__tests__/HelloWorld.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { describe, it, expect } from 'vitest'
-
-import { mount } from '@vue/test-utils'
-import HelloWorld from '../HelloWorld.vue'
-
-describe('HelloWorld', () => {
-  it('renders properly', () => {
-    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
-    expect(wrapper.text()).toContain('Hello Vitest')
-  })
-})
diff --git a/docs/src/components/__tests__/Title.spec.ts b/docs/src/components/__tests__/Title.spec.ts
new file mode 100644
index 0000000..bb87218
--- /dev/null
+++ b/docs/src/components/__tests__/Title.spec.ts
@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+
+import { mount } from '@vue/test-utils'
+import Title from '../Title.vue'
+
+describe('Title', () => {
+  it('renders properly', () => {
+    const wrapper = mount(Title, { props: { title: 'VueTechsLogos' } })
+    expect(wrapper.text()).toContain('VueTechsLogos')
+  })
+})