diff --git a/docs/learn/astar.md b/docs/learn/astar.md
index d17ae7cbede..582c89cb3e2 100644
--- a/docs/learn/astar.md
+++ b/docs/learn/astar.md
@@ -1,13 +1,19 @@
 ---
 sidebar_position: 1
+description: Learn what is the Astar Collective.
+image: /img/astar-preview.png
 ---
 
+import Figure from '/src/components/figure'
+
 # About Astar Network
 
 [Astar Network]: https://astar.network/
 
 ## I. A Web3 Collective
 
+<Figure caption="Astar Collective Social Card" src={require('/img/astar-preview.png').default} width="100%" />
+
 Astar is a web3 collective focused on building products that bring users onchain while creating sustainable value for ASTR holders. Rather than operating as a traditional single-chain ecosystem, Astar coordinates multiple products and contributors across different blockchain networks through a unified economic and governance structure.
 
 At the foundation of this collective sits Astar Network, which serves as the anchor point for governance decisions, security mechanisms, and economic coordination across the entire ecosystem. The network ensures that all activities, whether occurring on Ethereum, Base, or other integrated chains, remain connected to a common framework that benefits the broader Astar community.
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index a14a7b86abd..bb1e1e9fbc5 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -6,7 +6,7 @@ import rehypeKatex from 'rehype-katex';
 
 const config: Config = {
   title: 'Welcome to Astar',
-  tagline: 'Here you will find documentation on how to develop dApps on Astar.',
+  tagline: 'Here you can find documentation about the Astar Collective and its ecosystem.',
   favicon: 'img/fav.png',
 
   future: {
@@ -42,6 +42,13 @@ const config: Config = {
         content: 'strict-origin-when-cross-origin',
       },
     },
+    {
+      tagName: 'meta',
+      attributes: {
+        name: 'twitter:card',
+        content: 'summary_large_image',
+      },
+    },
   ],
 
   stylesheets: [
@@ -81,7 +88,7 @@ const config: Config = {
   ],
 
   themeConfig: {
-    image: 'img/astar-logo-text.svg',
+    image: 'img/astar-preview.png',
     navbar: {
       logo: {
         alt: 'Astar',
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 898f7cb3ca0..10e880cb2fd 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -11,7 +11,7 @@ export default function Home(): JSX.Element {
   return (
     <Layout
       title={`${siteConfig.title}`}
-      description="Astar Network Official Documentation Portal - User Guides, Tutorials, and Tools for Developers."
+      description="Astar Collective Official Documentation with user guides, tutorials, technical information, and tools for developers."
     >
       <div className={styles.contentWrapper}>
         <Hero />
diff --git a/static/img/astar-preview.png b/static/img/astar-preview.png
new file mode 100644
index 00000000000..73f13977de4
Binary files /dev/null and b/static/img/astar-preview.png differ