diff --git a/CHANGELOG.md b/CHANGELOG.md
index 33616ef..6a1b488 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.4.8](https://github.com/inference-gateway/docs/compare/0.4.7...0.4.8) (2025-06-08)
+
+### ♻️ Improvements
+
+* **docs:** Add content components and metadata for API reference, architecture overview, authentication, configuration, deployment, examples, getting started, IDEs, MCP, observability, SDKs, supported providers, and UI ([557ca1f](https://github.com/inference-gateway/docs/commit/557ca1f2b651a478540f354c9027872206289214))
+
 ## [0.4.7](https://github.com/inference-gateway/docs/compare/0.4.6...0.4.7) (2025-06-08)
 
 ### 📚 Documentation
diff --git a/app/api-reference/APIReferenceContent.tsx b/app/api-reference/APIReferenceContent.tsx
new file mode 100644
index 0000000..cbbb216
--- /dev/null
+++ b/app/api-reference/APIReferenceContent.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import APIReference from '@/markdown/api-reference.mdx';
+
+export default function APIReferenceContent() {
+  return (
+    <div className="prose max-w-none">
+      <APIReference />
+    </div>
+  );
+}
diff --git a/app/api-reference/page.tsx b/app/api-reference/page.tsx
index eb0c5aa..498f49c 100644
--- a/app/api-reference/page.tsx
+++ b/app/api-reference/page.tsx
@@ -1,11 +1,12 @@
-'use client';
+import type { Metadata } from 'next';
+import APIReferenceContent from './APIReferenceContent';
 
-import APIReference from '@/markdown/api-reference.mdx';
+export const metadata: Metadata = {
+  title: 'API Reference - Inference Gateway',
+  description:
+    'Complete API reference for Inference Gateway including endpoints, request/response formats, and authentication methods.',
+};
 
 export default function Page() {
-  return (
-    <div className="prose max-w-none">
-      <APIReference />
-    </div>
-  );
+  return <APIReferenceContent />;
 }
diff --git a/app/architecture-overview/ArchitectureOverviewContent.tsx b/app/architecture-overview/ArchitectureOverviewContent.tsx
new file mode 100644
index 0000000..7eac9e7
--- /dev/null
+++ b/app/architecture-overview/ArchitectureOverviewContent.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import ArchitectureOverview from '@/markdown/architecture-overview.mdx';
+
+export default function ArchitectureOverviewContent() {
+  return (
+    <div className="prose max-w-none">
+      <ArchitectureOverview />
+    </div>
+  );
+}
diff --git a/app/architecture-overview/page.tsx b/app/architecture-overview/page.tsx
index 111b6b1..f590c74 100644
--- a/app/architecture-overview/page.tsx
+++ b/app/architecture-overview/page.tsx
@@ -1,11 +1,12 @@
-'use client';
+import type { Metadata } from 'next';
+import ArchitectureOverviewContent from './ArchitectureOverviewContent';
 
-import ArchitectureOverview from '@/markdown/architecture-overview.mdx';
+export const metadata: Metadata = {
+  title: 'Architecture Overview - Inference Gateway',
+  description:
+    'Learn about the architecture and design principles of Inference Gateway, including core components and system organization.',
+};
 
 export default function Page() {
-  return (
-    <div className="prose max-w-none">
-      <ArchitectureOverview />
-    </div>
-  );
+  return <ArchitectureOverviewContent />;
 }
diff --git a/app/authentication/AuthenticationContent.tsx b/app/authentication/AuthenticationContent.tsx
new file mode 100644
index 0000000..ceba88c
--- /dev/null
+++ b/app/authentication/AuthenticationContent.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import Authentication from '@/markdown/authentication.mdx';
+
+export default function AuthenticationContent() {
+  return (
+    <div className="prose max-w-none">
+      <Authentication />
+    </div>
+  );
+}
diff --git a/app/authentication/page.tsx b/app/authentication/page.tsx
index dc584f8..8696508 100644
--- a/app/authentication/page.tsx
+++ b/app/authentication/page.tsx
@@ -1,11 +1,12 @@
-'use client';
+import type { Metadata } from 'next';
+import AuthenticationContent from './AuthenticationContent';
 
-import Authentication from '@/markdown/authentication.mdx';
+export const metadata: Metadata = {
+  title: 'Authentication - Inference Gateway',
+  description:
+    'Configure authentication for Inference Gateway including API keys, OAuth, and other security methods.',
+};
 
 export default function Page() {
-  return (
-    <div className="prose max-w-none">
-      <Authentication />;
-    </div>
-  );
+  return <AuthenticationContent />;
 }
diff --git a/app/configuration/ConfigurationContent.tsx b/app/configuration/ConfigurationContent.tsx
new file mode 100644
index 0000000..34f6e2f
--- /dev/null
+++ b/app/configuration/ConfigurationContent.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import Configuration from '@/markdown/configuration.mdx';
+
+export default function ConfigurationContent() {
+  return (
+    <div className="prose max-w-none">
+      <Configuration />
+    </div>
+  );
+}
diff --git a/app/configuration/page.tsx b/app/configuration/page.tsx
index fdb13dc..6b5337c 100644
--- a/app/configuration/page.tsx
+++ b/app/configuration/page.tsx
@@ -1,11 +1,12 @@
-'use client';
+import type { Metadata } from 'next';
+import ConfigurationContent from './ConfigurationContent';
 
-import Configuration from '@/markdown/configuration.mdx';
+export const metadata: Metadata = {
+  title: 'Configuration - Inference Gateway',
+  description:
+    'Learn how to configure Inference Gateway settings, environment variables, and deployment options.',
+};
 
 export default function Page() {
-  return (
-    <div className="prose max-w-none">
-      <Configuration />
-    </div>
-  );
+  return <ConfigurationContent />;
 }
diff --git a/app/deployment/DeploymentContent.tsx b/app/deployment/DeploymentContent.tsx
new file mode 100644
index 0000000..d59f739
--- /dev/null
+++ b/app/deployment/DeploymentContent.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import Deployment from '@/markdown/deployment.mdx';
+
+export default function DeploymentContent() {
+  return (
+    <div className="prose max-w-none">
+      <Deployment />
+    </div>
+  );
+}
diff --git a/app/deployment/page.tsx b/app/deployment/page.tsx
index 18b4d0f..7d9106d 100644
--- a/app/deployment/page.tsx
+++ b/app/deployment/page.tsx
@@ -1,11 +1,12 @@
-'use client';
+import type { Metadata } from 'next';
+import DeploymentContent from './DeploymentContent';
 
-import Deployment from '@/markdown/deployment.mdx';
+export const metadata: Metadata = {
+  title: 'Deployment - Inference Gateway',
+  description:
+    'Deploy Inference Gateway in production environments including Docker, Kubernetes, and cloud platforms.',
+};
 
 export default function Page() {
-  return (
-    <div className="prose max-w-none">
-      <Deployment />
-    </div>
-  );
+  return <DeploymentContent />;
 }
diff --git a/app/examples/ExamplesContent.tsx b/app/examples/ExamplesContent.tsx
new file mode 100644
index 0000000..4a1ba82
--- /dev/null
+++ b/app/examples/ExamplesContent.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import Examples from '@/markdown/examples.mdx';
+
+export default function ExamplesContent() {
+  return (
+    <div className="prose max-w-none">
+      <Examples />
+    </div>
+  );
+}
diff --git a/app/examples/page.tsx b/app/examples/page.tsx
index e6be82a..0f471ee 100644
--- a/app/examples/page.tsx
+++ b/app/examples/page.tsx
@@ -1,11 +1,12 @@
-'use client';
+import type { Metadata } from 'next';
+import ExamplesContent from './ExamplesContent';
 
-import Examples from '@/markdown/examples.mdx';
+export const metadata: Metadata = {
+  title: 'Examples - Inference Gateway',
+  description:
+    'Explore practical examples and use cases for implementing Inference Gateway in various scenarios.',
+};
 
 export default function Page() {
-  return (
-    <div className="prose max-w-none">
-      <Examples />
-    </div>
-  );
+  return <ExamplesContent />;
 }
diff --git a/app/getting-started/GettingStartedContent.tsx b/app/getting-started/GettingStartedContent.tsx
new file mode 100644
index 0000000..621c70a
--- /dev/null
+++ b/app/getting-started/GettingStartedContent.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import GettingStarted from '@/markdown/getting-started.mdx';
+
+export default function GettingStartedContent() {
+  return (
+    <div className="prose max-w-none">
+      <GettingStarted />
+    </div>
+  );
+}
diff --git a/app/getting-started/page.tsx b/app/getting-started/page.tsx
index 1e62fc1..4818882 100644
--- a/app/getting-started/page.tsx
+++ b/app/getting-started/page.tsx
@@ -1,11 +1,12 @@
-'use client';
+import type { Metadata } from 'next';
+import GettingStartedContent from './GettingStartedContent';
 
-import GettingStarted from '@/markdown/getting-started.mdx';
+export const metadata: Metadata = {
+  title: 'Getting Started - Inference Gateway',
+  description:
+    'Get started with Inference Gateway quickly with installation guides, quick start examples, and first steps.',
+};
 
 export default function Page() {
-  return (
-    <div className="prose max-w-none">
-      <GettingStarted />
-    </div>
-  );
+  return <GettingStartedContent />;
 }
diff --git a/app/ides/IDEsContent.tsx b/app/ides/IDEsContent.tsx
new file mode 100644
index 0000000..4230d78
--- /dev/null
+++ b/app/ides/IDEsContent.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import IDEs from '@/markdown/ides.mdx';
+
+export default function IDEsContent() {
+  return (
+    <div className="prose max-w-none">
+      <IDEs />
+    </div>
+  );
+}
diff --git a/app/ides/page.tsx b/app/ides/page.tsx
index 2eb07a4..e6e792e 100644
--- a/app/ides/page.tsx
+++ b/app/ides/page.tsx
@@ -1,11 +1,12 @@
-'use client';
+import type { Metadata } from 'next';
+import IDEsContent from './IDEsContent';
 
-import IDEs from '@/markdown/ides.mdx';
+export const metadata: Metadata = {
+  title: 'IDE Integration - Inference Gateway',
+  description:
+    'Integrate Inference Gateway with popular IDEs and development environments for enhanced developer experience.',
+};
 
 export default function Page() {
-  return (
-    <div className="prose max-w-none">
-      <IDEs />
-    </div>
-  );
+  return <IDEsContent />;
 }
diff --git a/app/mcp/MCPContent.tsx b/app/mcp/MCPContent.tsx
new file mode 100644
index 0000000..673f421
--- /dev/null
+++ b/app/mcp/MCPContent.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import MCP from '@/markdown/mcp.mdx';
+
+export default function MCPContent() {
+  return (
+    <div className="prose max-w-none">
+      <MCP />
+    </div>
+  );
+}
diff --git a/app/mcp/page.tsx b/app/mcp/page.tsx
index e6f5d44..51be35a 100644
--- a/app/mcp/page.tsx
+++ b/app/mcp/page.tsx
@@ -1,11 +1,12 @@
-'use client';
+import type { Metadata } from 'next';
+import MCPContent from './MCPContent';
 
-import MCP from '@/markdown/mcp.mdx';
+export const metadata: Metadata = {
+  title: 'Model Context Protocol (MCP) - Inference Gateway',
+  description:
+    'Learn how to use Model Context Protocol (MCP) with Inference Gateway to extend LLM capabilities and integrate external data sources.',
+};
 
 export default function Page() {
-  return (
-    <div className="prose max-w-none">
-      <MCP />
-    </div>
-  );
+  return <MCPContent />;
 }
diff --git a/app/observability/ObservabilityContent.tsx b/app/observability/ObservabilityContent.tsx
new file mode 100644
index 0000000..3f54655
--- /dev/null
+++ b/app/observability/ObservabilityContent.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import Observability from '@/markdown/observability.mdx';
+
+export default function ObservabilityContent() {
+  return (
+    <div className="prose max-w-none">
+      <Observability />
+    </div>
+  );
+}
diff --git a/app/observability/page.tsx b/app/observability/page.tsx
index 1834d2f..98d3a01 100644
--- a/app/observability/page.tsx
+++ b/app/observability/page.tsx
@@ -1,11 +1,12 @@
-'use client';
+import type { Metadata } from 'next';
+import ObservabilityContent from './ObservabilityContent';
 
-import Observability from '@/markdown/observability.mdx';
+export const metadata: Metadata = {
+  title: 'Observability - Inference Gateway',
+  description:
+    'Monitor and observe Inference Gateway with logging, metrics, tracing, and performance monitoring tools.',
+};
 
 export default function Page() {
-  return (
-    <div className="prose max-w-none">
-      <Observability />
-    </div>
-  );
+  return <ObservabilityContent />;
 }
diff --git a/app/sdks/SDKsContent.tsx b/app/sdks/SDKsContent.tsx
new file mode 100644
index 0000000..6162dc5
--- /dev/null
+++ b/app/sdks/SDKsContent.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import SDKs from '@/markdown/sdks.mdx';
+
+export default function SDKsContent() {
+  return (
+    <div className="prose max-w-full">
+      <SDKs />
+    </div>
+  );
+}
diff --git a/app/sdks/page.tsx b/app/sdks/page.tsx
index 9b50e05..8fe0e40 100644
--- a/app/sdks/page.tsx
+++ b/app/sdks/page.tsx
@@ -1,11 +1,12 @@
-'use client';
+import type { Metadata } from 'next';
+import SDKsContent from './SDKsContent';
 
-import SDKs from '@/markdown/sdks.mdx';
+export const metadata: Metadata = {
+  title: 'SDKs - Inference Gateway',
+  description:
+    'Explore official SDKs for Inference Gateway including TypeScript, Python, Go, and Rust implementations.',
+};
 
 export default function Page() {
-  return (
-    <div className="prose max-w-full">
-      <SDKs />
-    </div>
-  );
+  return <SDKsContent />;
 }
diff --git a/app/supported-providers/SupportedProvidersContent.tsx b/app/supported-providers/SupportedProvidersContent.tsx
new file mode 100644
index 0000000..420a45a
--- /dev/null
+++ b/app/supported-providers/SupportedProvidersContent.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import SupportedProviders from '@/markdown/supported-providers.mdx';
+
+export default function SupportedProvidersContent() {
+  return (
+    <div className="prose max-w-none">
+      <SupportedProviders />
+    </div>
+  );
+}
diff --git a/app/supported-providers/page.tsx b/app/supported-providers/page.tsx
index 4dd4374..7806deb 100644
--- a/app/supported-providers/page.tsx
+++ b/app/supported-providers/page.tsx
@@ -1,11 +1,12 @@
-'use client';
+import type { Metadata } from 'next';
+import SupportedProvidersContent from './SupportedProvidersContent';
 
-import SupportedProviders from '@/markdown/supported-providers.mdx';
+export const metadata: Metadata = {
+  title: 'Supported Providers - Inference Gateway',
+  description:
+    'Discover all supported AI model providers and services that work with Inference Gateway including OpenAI, Anthropic, and more.',
+};
 
 export default function Page() {
-  return (
-    <div className="prose max-w-none">
-      <SupportedProviders />
-    </div>
-  );
+  return <SupportedProvidersContent />;
 }
diff --git a/app/ui/UIContent.tsx b/app/ui/UIContent.tsx
new file mode 100644
index 0000000..0de6cff
--- /dev/null
+++ b/app/ui/UIContent.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import UI from '@/markdown/ui.mdx';
+
+export default function UIContent() {
+  return (
+    <div className="prose max-w-none">
+      <UI />
+    </div>
+  );
+}
diff --git a/app/ui/page.tsx b/app/ui/page.tsx
index 1e41bcf..b70ebab 100644
--- a/app/ui/page.tsx
+++ b/app/ui/page.tsx
@@ -1,11 +1,12 @@
-'use client';
+import type { Metadata } from 'next';
+import UIContent from './UIContent';
 
-import UI from '@/markdown/ui.mdx';
+export const metadata: Metadata = {
+  title: 'User Interface - Inference Gateway',
+  description:
+    'Learn about the Inference Gateway UI, its features, and how to interact with the web-based management interface.',
+};
 
 export default function Page() {
-  return (
-    <div className="prose max-w-none">
-      <UI />
-    </div>
-  );
+  return <UIContent />;
 }