diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index e4aca4b..f6a508f 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -51,6 +51,7 @@ export const load: PageServerLoad = async () => {
                 seo_name
                 seo_title
                 seo_description
+                seo_image { id }
                 description
                 explore_list
                 limit_new
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2a64635..3f56e03 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,6 +9,7 @@
     import { timeline, stagger } from 'motion'
     import { DELAY } from '$utils/contants'
     import { smoothScroll } from '$utils/functions'
+    import { getAssetUrlKey } from '$utils/api'
     import reveal from '$animations/reveal'
     import { quartOut } from '$animations/easings'
     // Components
@@ -75,9 +76,9 @@
 <svelte:window bind:scrollY bind:innerHeight />
 
 <Metas
-    title="{settings.seo_name} — {settings.seo_title}"
+    title={settings.seo_title}
     description={settings.seo_description}
-    image=""
+    image={getAssetUrlKey(settings.seo_image.id, 'share-image')}
 />
 
 <PageTransition name="homepage">