diff --git a/src/app/builder/page.tsx b/src/app/builder/page.tsx
index f93e894..4407036 100644
--- a/src/app/builder/page.tsx
+++ b/src/app/builder/page.tsx
@@ -1,5 +1,4 @@
-import Image from 'next/image'
-
+import { AppLogo } from '@/components/app-logo'
 import { BuilderSections } from '@/components/builder-sections'
 import { CopyCodeButton } from '@/components/copy-code-button'
 import { GenerationInfo } from '@/components/generation-info'
@@ -11,10 +10,7 @@ export default function Builder() {
       <Header>
         <div className='flex flex-col sm:flex-row pb-2 sm:items-center sm:justify-between gap-2 sm:gap-0 w-full'>
           <div className='hidden sm:flex items-center cursor-pointer text-white'>
-            <Image src='/extension_icon.png' alt='Application logo' width={30} height={30} />
-            <h1 className='text-lg ml-2 hover:text-violet-200 transition-colors duration-300'>
-              easyreadme
-            </h1>
+            <AppLogo />
           </div>
           <div className='flex gap-2 w-full sm:max-w-80'>
             <GenerationInfo />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a61aa4d..72bf5b7 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,6 @@
-import Image from 'next/image'
 import Link from 'next/link'
 
+import { AppLogo } from '@/components/app-logo'
 import { Hero } from '@/components/hero'
 import { GitIc } from '@/components/icons'
 import { ListFeatures } from '@/components/list-features'
@@ -14,12 +14,7 @@ export default function Home() {
         <header className='sticky top-0 px-8 xl:px-20 py-2'>
           <div className='flex h-14 items-center justify-between'>
             <div className='flex items-center cursor-pointer text-white'>
-              <Link className='flex ' href='/'>
-                <Image src='/logo.png' alt='Application logo' width={30} height={30} />
-                <h1 className='text-base sm:text-xl ml-2 hover:text-violet-200 transition-colors duration-300'>
-                  easyreadme
-                </h1>
-              </Link>
+              <AppLogo />
             </div>
             <div className='flex gap-2 items-center'>
               <Link
diff --git a/src/components/app-logo.tsx b/src/components/app-logo.tsx
new file mode 100644
index 0000000..6bac0cf
--- /dev/null
+++ b/src/components/app-logo.tsx
@@ -0,0 +1,13 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+export function AppLogo() {
+  return (
+    <Link className='flex ' href='/'>
+      <Image src='/logo.png' alt='Application logo' width={30} height={30} />
+      <span className='text-base sm:text-xl ml-2 hover:text-violet-200 transition-colors duration-300'>
+        easyreadme
+      </span>
+    </Link>
+  )
+}