diff --git a/apps/docs/next.config.mjs b/apps/docs/next.config.mjs
index 74395b213a..b089e0e4d3 100644
--- a/apps/docs/next.config.mjs
+++ b/apps/docs/next.config.mjs
@@ -39,7 +39,9 @@ const ContentSecurityPolicy = `
     https://kit.fontawesome.com
     https://raw.githubusercontent.com
     https://hcaptcha.com
-    https://*.hcaptcha.com;
+    https://*.hcaptcha.com
+    https://ka-f.fontawesome.com
+    https://ka-p.fontawesome.com;
 
   style-src 'self' 'unsafe-inline'
     https://fonts.googleapis.com
@@ -51,8 +53,10 @@ const ContentSecurityPolicy = `
 
   font-src 'self' data:
     https://fonts.gstatic.com
-    https://vercel.live https://assets.vercel.com
-    https://ka-f.fontawesome.com;
+    https://vercel.live
+    https://assets.vercel.com
+    https://ka-f.fontawesome.com
+    https://ka-p.fontawesome.com;
 
   img-src 'self' data:
     https://cdn.sanity.io
@@ -77,6 +81,7 @@ const ContentSecurityPolicy = `
     https://vercel.live https://vercel.com data: blob:
     https://td.doubleclick.net
     https://raw.githubusercontent.com;
+
   connect-src 'self'
     https://api.github.com
     https://p2zxqf70.api.sanity.io
@@ -122,7 +127,10 @@ const ContentSecurityPolicy = `
     https://unpkg.com
     https://proxy.kapa.ai
     https://hcaptcha.com
-    https://*.hcaptcha.com;
+    https://*.hcaptcha.com
+    https://kit.fontawesome.com
+    https://ka-f.fontawesome.com
+    https://ka-p.fontawesome.com;
 
   media-src 'self'
     https://*.prisma.io
@@ -148,7 +156,6 @@ const ContentSecurityPolicy = `
     https://hcaptcha.com
     https://*.hcaptcha.com;
 
-
   child-src 'self'
     https://www.youtube.com
     https://youtube.com
@@ -202,7 +209,6 @@ const allowedDevOrigins = (
 
 /** @type {import('next').NextConfig} */
 const config = {
-
   async redirects() {
     return [
       {
@@ -216,10 +222,10 @@ const config = {
   async rewrites() {
     return [
       {
-        source: '/:path*.mdx',
-        destination: '/llms.mdx/:path*',
+        source: "/:path*.mdx",
+        destination: "/llms.mdx/:path*",
       },
-    ]
+    ];
   },
   basePath: "/docs",
   assetPrefix: "/docs-static",
@@ -241,41 +247,15 @@ const config = {
 };
 
 export default withSentryConfig(withMDX(config), {
-  // For all available options, see:
-  // https://www.npmjs.com/package/@sentry/webpack-plugin#options
-
   org: "prisma-ch",
-
   project: "javascript-nextjs",
-
   authToken: process.env.SENTRY_AUTH_TOKEN,
   tunnelRoute: "/monitoring",
-
-  // Only print logs for uploading source maps in CI\
   silent: !process.env.CI,
-
-  // For all available options, see:
-  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
-
-  // Upload a larger set of source maps for prettier stack traces (increases build time)
   widenClientFileUpload: true,
-
-  // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-  // This can increase your server load as well as your hosting bill.
-  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-  // side errors will fail.
-  // tunnelRoute: "/monitoring",
-
   webpack: {
-    // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
-    // See the following for more information:
-    // https://docs.sentry.io/product/crons/
-    // https://vercel.com/docs/cron-jobs
     automaticVercelMonitors: true,
-
-    // Tree-shaking options for reducing bundle size
     treeshake: {
-      // Automatically tree-shake Sentry logger statements to reduce bundle size
       removeDebugLogging: true,
     },
   },
diff --git a/apps/docs/source.config.ts b/apps/docs/source.config.ts
index f96f5d0a6a..6f86aa778f 100644
--- a/apps/docs/source.config.ts
+++ b/apps/docs/source.config.ts
@@ -1,7 +1,15 @@
 import remarkDirective from "remark-directive";
-import { remarkDirectiveAdmonition, remarkMdxFiles } from "fumadocs-core/mdx-plugins";
+import {
+  remarkDirectiveAdmonition,
+  remarkMdxFiles,
+} from "fumadocs-core/mdx-plugins";
 import { remarkImage } from "fumadocs-core/mdx-plugins";
-import { defineConfig, defineDocs, frontmatterSchema, metaSchema } from "fumadocs-mdx/config";
+import {
+  defineConfig,
+  defineDocs,
+  frontmatterSchema,
+  metaSchema,
+} from "fumadocs-mdx/config";
 import lastModified from "fumadocs-mdx/plugins/last-modified";
 import { z } from "zod";
 import convert from "npm-to-yarn";
@@ -34,7 +42,7 @@ export const docsV6 = defineDocs({
   docs: {
     schema: frontmatterSchema.extend({
       image: z.string().optional(),
-      badge: z.enum(['early-access', 'deprecated', 'preview']).optional(),
+      badge: z.enum(["early-access", "deprecated", "preview"]).optional(),
       url: z.string().optional(),
       metaTitle: z.string().optional(),
       metaDescription: z.string().optional(),
@@ -54,7 +62,22 @@ export default defineConfig({
   mdxOptions: {
     remarkPlugins: [
       remarkDirective,
-      remarkDirectiveAdmonition,
+      [
+        remarkDirectiveAdmonition,
+        {
+          types: {
+            note: "info",
+            tip: "info",
+            info: "info",
+            warn: "warning",
+            warning: "warning",
+            danger: "error",
+            success: "success",
+            ppg: "ppg",
+            error: "error",
+          },
+        },
+      ],
       [remarkImage, { useImport: false }],
       remarkMdxFiles,
     ],
diff --git a/apps/docs/src/app/layout.tsx b/apps/docs/src/app/layout.tsx
index 97d5a9a6af..00736576da 100644
--- a/apps/docs/src/app/layout.tsx
+++ b/apps/docs/src/app/layout.tsx
@@ -5,6 +5,7 @@ import { Inter, Barlow } from "next/font/google";
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
 import Script from "next/script";
+import { FontAwesomeScript as EclipseFA } from "@prisma-docs/eclipse";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -34,6 +35,9 @@ export default function Layout({ children }: { children: ReactNode }) {
       className={`${inter.variable} ${barlow.variable}`}
       suppressHydrationWarning
     >
+      <head>
+        <Script src={EclipseFA} crossOrigin="anonymous" async />
+      </head>
       <body className="flex flex-col min-h-screen">
         <Provider>{children}</Provider>
         <Script
diff --git a/apps/docs/src/mdx-components.tsx b/apps/docs/src/mdx-components.tsx
index 5fb5cc817b..695dac918c 100644
--- a/apps/docs/src/mdx-components.tsx
+++ b/apps/docs/src/mdx-components.tsx
@@ -29,6 +29,7 @@ import {
   TableCell,
   TableCaption,
   Input,
+  Admonition,
 } from "@prisma-docs/eclipse";
 
 function withDocsBasePathForImageSrc(src: unknown): unknown {
@@ -39,7 +40,9 @@ function withDocsBasePathForImageSrc(src: unknown): unknown {
 }
 
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
-  const mdxComponents = {
+  const pageContext = (components as any)?._pageContext;
+
+  return {
     ...(icons as unknown as MDXComponents),
     ...defaultMdxComponents,
     // Fumadocs tabs for manual usage (with items prop)
@@ -59,15 +62,12 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     APIPage,
     Youtube,
     img: (props: any) => (
-      <ImageZoom {...(props as any)} src={withDocsBasePathForImageSrc((props as any).src)} />
+      <ImageZoom
+        {...(props as any)}
+        src={withDocsBasePathForImageSrc((props as any).src)}
+      />
     ),
     input: (props: any) => <Input {...props} />,
-  };
-
-  const pageContext = (components as any)?._pageContext;
-
-  return {
-    ...mdxComponents,
     pre: ({ ref: _ref, ...props }) => (
       <CodeBlock {...props}>
         <Pre>{props.children}</Pre>
@@ -81,5 +81,29 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     th: ({ ref: _ref, ...props }) => <TableHead {...props} />,
     td: ({ ref: _ref, ...props }) => <TableCell {...props} />,
     caption: ({ ref: _ref, ...props }) => <TableCaption {...props} />,
+    // Override Fumadocs Callout components with Eclipse Alert for admonitions (:::ppg, :::error, :::success, :::warning)
+    CalloutTitle: ({ children }: any) => <>{children}</>,
+    CalloutDescription: ({ children }: any) => <>{children}</>,
+    CalloutContainer: ({ type, children, icon, ...props }: any) => {
+      const variantMap: Record<
+        string,
+        "ppg" | "error" | "success" | "warning"
+      > = {
+        ppg: "ppg",
+        error: "error",
+        success: "success",
+        warning: "warning",
+        info: "ppg",
+        note: "ppg",
+        tip: "success",
+        danger: "error",
+      };
+
+      return (
+        <Admonition variant={variantMap[type] || "ppg"} icon={icon} {...props}>
+          {children}
+        </Admonition>
+      );
+    },
   };
 }
diff --git a/apps/eclipse/content/design-system/molecules/admonition.mdx b/apps/eclipse/content/design-system/molecules/admonition.mdx
new file mode 100644
index 0000000000..70013ae89e
--- /dev/null
+++ b/apps/eclipse/content/design-system/molecules/admonition.mdx
@@ -0,0 +1,366 @@
+---
+title: Admonition
+description: A versatile admonition component for displaying important messages and contextual information with support for different severity levels and custom icons.
+---
+
+import { Admonition } from "@prisma-docs/eclipse";
+
+### Usage
+
+**Basic Admonition**
+
+The Admonition component displays important information with a default info icon and the PPG variant.
+
+```tsx
+import { Admonition } from "@prisma-docs/eclipse";
+
+export function BasicAdmonition() {
+  return (
+    <Admonition>
+      This is a basic admonition message with regular content.
+    </Admonition>
+  );
+}
+```
+
+<div className="not-prose my-6">
+  <p className="text-sm font-semibold mb-4">Live Example:</p>
+</div>
+
+<Admonition>
+  This is a basic admonition message with regular content.
+</Admonition>
+
+**Admonition Variants**
+
+The Admonition component supports four variants: `ppg`, `error`, `success`, and `warning`.
+
+```tsx
+import { Admonition } from "@prisma-docs/eclipse";
+
+export function AdmonitionVariants() {
+  return (
+    <>
+      <Admonition variant="ppg">
+        PPG variant - for general information and tips.
+      </Admonition>
+
+      <Admonition variant="success">
+        Success variant - for positive confirmations.
+      </Admonition>
+
+      <Admonition variant="warning">
+        Warning variant - for important notices.
+      </Admonition>
+
+      <Admonition variant="error">
+        Error variant - for errors and critical information.
+      </Admonition>
+    </>
+  );
+}
+```
+
+<div className="not-prose my-6 space-y-4">
+  <p className="text-sm font-semibold mb-4">Live Examples:</p>
+
+  <Admonition variant="ppg">
+    PPG variant - for general information and tips.
+  </Admonition>
+
+  <Admonition variant="success">
+    Success variant - for positive confirmations.
+  </Admonition>
+
+  <Admonition variant="warning">
+    Warning variant - for important notices.
+  </Admonition>
+
+  <Admonition variant="error">
+    Error variant - for errors and critical information.
+  </Admonition>
+</div>
+
+**Custom Icons**
+
+You can customize the icon by passing a custom icon component or pass `null` to hide the icon.
+
+```tsx
+import { Admonition } from "@prisma-docs/eclipse";
+
+export function CustomIconAdmonitions() {
+  return (
+    <>
+      <Admonition variant="ppg" icon={<i className="fa-regular fa-terminal h-4 w-4 mt-0.5" />}>
+        Admonition with a custom terminal icon.
+      </Admonition>
+
+      <Admonition variant="error" icon={<i className="fa-regular fa-circle-exclamation h-4 w-4 mt-0.5" />}>
+        Admonition with a custom error icon.
+      </Admonition>
+
+      <Admonition variant="success" icon={<i className="fa-regular fa-check h-4 w-4 mt-0.5" />}>
+        Admonition with a custom success icon.
+      </Admonition>
+
+      <Admonition variant="warning" icon={<i className="fa-regular fa-triangle-exclamation h-4 w-4 mt-0.5" />}>
+        Admonition with a custom warning icon.
+      </Admonition>
+
+      <Admonition variant="ppg" icon={null}>
+        Admonition without an icon.
+      </Admonition>
+    </>
+  );
+}
+```
+
+<div className="not-prose my-6 space-y-4">
+  <p className="text-sm font-semibold mb-4">Live Examples:</p>
+    <Admonition variant="ppg" icon={<i className="fa-regular fa-terminal h-4 w-4 mt-0.5" />}>
+      Admonition with a custom terminal icon.
+    </Admonition>
+
+    <Admonition variant="error" icon={<i className="fa-regular fa-circle-exclamation h-4 w-4 mt-0.5" />}>
+      Admonition with a custom error icon.
+    </Admonition>
+
+    <Admonition variant="success" icon={<i className="fa-regular fa-check h-4 w-4 mt-0.5" />}>
+      Admonition with a custom success icon.
+    </Admonition>
+
+    <Admonition variant="warning" icon={<i className="fa-regular fa-triangle-exclamation h-4 w-4 mt-0.5" />}>
+      Admonition with a custom warning icon.
+    </Admonition>
+
+    <Admonition variant="ppg" icon={null}>
+      Admonition without an icon.
+    </Admonition>
+</div>
+
+**Rich MDX Content**
+
+The Admonition component accepts and renders any MDX content including headings, paragraphs, lists, links, and code.
+
+```tsx
+import { Admonition } from "@prisma-docs/eclipse";
+
+export function RichContentAdmonition() {
+  return (
+    <Admonition variant="ppg">
+      **Getting Started**
+      
+      Follow these steps to get started:
+      
+      1. Install the package: `npm install @prisma/client`
+      2. Initialize Prisma: `npx prisma init`
+      3. Define your schema and run migrations
+      
+      For more information, visit the [documentation](https://prisma.io/docs).
+    </Admonition>
+  );
+}
+```
+
+:::ppg
+**Getting Started**
+
+Follow these steps to get started:
+
+ 1. Install the package: `npm install @prisma/client`
+ 2. Initialize Prisma: `npx prisma init`
+ 3. Define your schema and run migrations
+
+For more information, visit the [documentation](https://prisma.io/docs).
+:::
+
+**Complex Content Examples**
+
+```tsx
+import { Admonition } from "@prisma-docs/eclipse";
+
+export function ComplexAdmonitions() {
+  return (
+    <>
+      <Admonition variant="warning">
+        ### Important Update
+        
+        This feature will be deprecated in version 6.0. Please migrate to the new API:
+        
+        - Old: `prisma.user.findMany()`
+        - New: `prisma.user.findMany({ where: {} })`
+      </Admonition>
+
+      <Admonition variant="error">
+        **Connection Error**
+        
+        Unable to connect to the database. Please check:
+        
+        - Database credentials in `.env`
+        - Database server is running
+        - Network connectivity
+      </Admonition>
+
+      <Admonition variant="success">
+        Your migration was successful! The following changes were applied:
+        
+        - Created table `User`
+        - Added index on `email` column
+        - Updated foreign key constraints
+      </Admonition>
+    </>
+  );
+}
+```
+
+<div className="not-prose my-6 space-y-4">
+  <p className="text-sm font-semibold mb-4">Live Examples:</p>
+
+  <Admonition variant="warning">
+    <div>
+      <h3 className="text-base font-semibold mb-2">Important Update</h3>
+      <p className="mb-2">This feature will be deprecated in version 6.0. Please migrate to the new API:</p>
+      <ul className="list-disc list-inside space-y-1">
+        <li>Old: <code>prisma.user.findMany()</code></li>
+        <li>New: <code>prisma.user.findMany({`{ where: {} }`})</code></li>
+      </ul>
+    </div>
+  </Admonition>
+
+  <Admonition variant="error">
+    <div>
+      <p className="font-bold mb-2">Connection Error</p>
+      <p className="mb-2">Unable to connect to the database. Please check:</p>
+      <ul className="list-disc list-inside space-y-1">
+        <li>Database credentials in <code>.env</code></li>
+        <li>Database server is running</li>
+        <li>Network connectivity</li>
+      </ul>
+    </div>
+  </Admonition>
+
+  <Admonition variant="success">
+    <div>
+      <p className="mb-2">Your migration was successful! The following changes were applied:</p>
+      <ul className="list-disc list-inside space-y-1">
+        <li>Created table <code>User</code></li>
+        <li>Added index on <code>email</code> column</li>
+        <li>Updated foreign key constraints</li>
+      </ul>
+    </div>
+  </Admonition>
+</div>
+
+### Admonition Props
+
+- `variant` - Visual style: `"ppg"`, `"error"`, `"success"`, or `"warning"` (optional, default: "ppg")
+- `icon` - Custom icon component or `null` to hide icon (ReactNode | null, optional, default: InfoIcon)
+- `className` - Additional CSS classes (optional)
+- `children` - Admonition content (any valid MDX/React content) (ReactNode, required)
+- Standard HTML div attributes
+
+### Features
+
+- ✅ Four semantic variants: ppg, error, success, warning
+- ✅ Default info icon with customization support
+- ✅ Accepts any MDX content (headings, paragraphs, lists, code, etc.)
+- ✅ Supports rich formatting and links
+- ✅ Accessible with proper ARIA roles
+- ✅ Dark mode support for all variants
+- ✅ Fully customizable with className prop
+- ✅ Built with class-variance-authority for type-safe variants
+
+### Best Practices
+
+- Use `variant="ppg"` for general information, tips, and product-specific notes
+- Use `variant="success"` for positive confirmations and successful operations
+- Use `variant="warning"` for important notices that require attention
+- Use `variant="error"` for errors, failures, and critical information
+- Choose icons that match the message type and variant
+- Pass `icon={null}` if the message is self-explanatory without an icon
+- Use headings (`##`, `###`) to structure complex admonition content
+- Include actionable information or next steps when appropriate
+- Keep admonitions concise but informative
+- Don't overuse admonitions - reserve them for important information
+
+### Common Use Cases
+
+The Admonition component is perfect for:
+
+- **Documentation callouts** - Highlight important information in docs
+- **Feature announcements** - Announce new or beta features
+- **Deprecation notices** - Warn about deprecated features
+- **Prerequisites** - List requirements before proceeding
+- **Success confirmations** - Confirm successful actions or operations
+- **Error messages** - Display error details and troubleshooting steps
+- **Warning messages** - Alert users to important considerations
+- **Tips and notes** - Provide helpful tips and additional context
+
+### MDX Admonition Syntax
+
+This Admonition component is automatically used for MDX admonition blocks when configured in your MDX components. The following syntaxes are supported:
+
+```mdx
+:::ppg
+This is a PPG admonition using MDX admonition syntax.
+
+## You can use any MDX content
+
+Including lists, code, and more!
+:::
+
+:::error
+This is an error admonition.
+:::
+
+:::success
+This is a success admonition.
+:::
+
+:::warning
+This is a warning admonition.
+:::
+
+:::info
+Maps to PPG variant.
+:::
+
+:::note
+Maps to PPG variant.
+:::
+
+:::tip
+Maps to success variant.
+:::
+
+:::danger
+Maps to error variant.
+:::
+```
+
+
+
+<div className="not-prose my-6 space-y-4">
+  <p className="text-sm font-semibold mb-4">Live Example:</p>
+</div>
+
+:::ppg
+
+This demonstrates how the `:::ppg` syntax renders as an Admonition component.
+
+You can include:
+
+- Lists
+- **Bold text**
+- `inline code`
+- And more!
+
+:::
+
+### Accessibility
+
+- The Admonition component includes `role="alert"` for screen readers
+- Icons are decorative and don't convey meaning alone - always include descriptive text
+- Color is not the only indicator of admonition type (icons and context provide additional cues)
+- All variants maintain appropriate color contrast ratios
+- Admonition content is keyboard accessible and screen reader friendly
\ No newline at end of file
diff --git a/apps/eclipse/content/design-system/molecules/meta.json b/apps/eclipse/content/design-system/molecules/meta.json
index 8b2b471a87..a2b33b70b8 100644
--- a/apps/eclipse/content/design-system/molecules/meta.json
+++ b/apps/eclipse/content/design-system/molecules/meta.json
@@ -3,7 +3,9 @@
   "description": "Compound UI components in the Eclipse Design System",
   "icon": "Component",
   "pages": [
+    "admonition",
     "accordion",
+    "alert",
     "banner",
     "breadcrumb",
     "card",
diff --git a/apps/eclipse/src/app/layout.tsx b/apps/eclipse/src/app/layout.tsx
index f6c60ecbc1..85a04f1f65 100644
--- a/apps/eclipse/src/app/layout.tsx
+++ b/apps/eclipse/src/app/layout.tsx
@@ -2,6 +2,7 @@ import { Provider } from "@/components/provider";
 import Script from "next/script";
 import "./global.css";
 import { Inter, Barlow } from "next/font/google";
+import { FontAwesomeScript as EclipseFA } from "@prisma-docs/eclipse";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -22,6 +23,7 @@ export default function Layout({ children }: LayoutProps<"/">) {
       suppressHydrationWarning
     >
       <head>
+        <Script src={EclipseFA} crossOrigin="anonymous" async />
         <Script
           src="https://widget.kapa.ai/kapa-widget.bundle.js"
           data-website-id="1b51bb03-43cc-4ef4-95f1-93288a91b560"
diff --git a/packages/eclipse/src/components/admonition.tsx b/packages/eclipse/src/components/admonition.tsx
new file mode 100644
index 0000000000..4934672fbe
--- /dev/null
+++ b/packages/eclipse/src/components/admonition.tsx
@@ -0,0 +1,58 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { CircleAlert } from "lucide-react";
+
+import { cn } from "../lib/cn";
+
+const admonitionVariants = cva(
+  "relative w-full rounded-md border p-4 gap-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg]:w-5 [&>svg]:h-5 alert-admonition flex items-start",
+  {
+    variants: {
+      variant: {
+        ppg: "bg-background-ppg text-foreground-ppg border-none [&>svg]:text-foreground-ppg",
+        error:
+          "bg-background-error border-none text-foreground-error [&>svg]:text-foreground-error",
+        success:
+          "bg-background-success border-none text-foreground-success [&>svg]:text-foreground-success",
+        warning:
+          "bg-background-warning border-none text-foreground-warning [&>svg]:text-foreground-warning",
+      },
+    },
+    defaultVariants: {
+      variant: "ppg",
+    },
+  },
+);
+
+type AdmonitionProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof admonitionVariants> & {
+    icon?: React.ReactNode;
+  };
+
+const Admonition = React.forwardRef<HTMLDivElement, AdmonitionProps>(
+  ({ className, variant, icon, children, ...props }, ref) => {
+    const IconComponent =
+      icon !== undefined ? (
+        icon
+      ) : (
+        <i className="fa-duotone fa-solid fa-circle-exclamation mt-1"></i>
+      );
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(admonitionVariants({ variant }), className)}
+        {...props}
+      >
+        {IconComponent}
+        <div className="[&>*]:first:mt-0 [&>*]:last:mb-0 [& strong]:text-inherit">
+          {children}
+        </div>
+      </div>
+    );
+  },
+);
+Admonition.displayName = "Admonition";
+
+export { Admonition };
diff --git a/packages/eclipse/src/components/fontawesome-eclipse.tsx b/packages/eclipse/src/components/fontawesome-eclipse.tsx
new file mode 100644
index 0000000000..5cc7c313dd
--- /dev/null
+++ b/packages/eclipse/src/components/fontawesome-eclipse.tsx
@@ -0,0 +1 @@
+export const FontAwesomeScript = "https://kit.fontawesome.com/c1448b716e.js";
diff --git a/packages/eclipse/src/components/index.ts b/packages/eclipse/src/components/index.ts
index 646e6422a8..a2d750afc0 100644
--- a/packages/eclipse/src/components/index.ts
+++ b/packages/eclipse/src/components/index.ts
@@ -10,6 +10,7 @@ export {
   useChart,
 } from "./chart";
 export type { ChartConfig } from "./chart";
+export { FontAwesomeScript } from "./fontawesome-eclipse";
 
 export { Accordion, Accordions } from "./accordion";
 
@@ -151,4 +152,5 @@ export {
   PaginationInput,
 } from "./pagination";
 
+export { Admonition } from "./admonition";
 export { Switch } from "./switch";
diff --git a/packages/ui/src/components/web-navigation.tsx b/packages/ui/src/components/web-navigation.tsx
index 0450daeb75..179fa44d66 100644
--- a/packages/ui/src/components/web-navigation.tsx
+++ b/packages/ui/src/components/web-navigation.tsx
@@ -15,7 +15,7 @@ import {
   Socials,
 } from "./navigation-menu";
 import { useEffect, useState } from "react";
-import { FontAwesomeScript } from "./fontawesome-web";
+import { FontAwesomeScript as WebFA } from "./fontawesome-web";
 import { cn } from "../lib/cn";
 
 interface Link {
@@ -45,7 +45,7 @@ export function WebNavigation({ links }: WebNavigationProps) {
   }, [mobileView]);
   return (
     <>
-      <FontAwesomeScript />
+      <WebFA />
       <NavigationMenu mobileOpen={mobileView}>
         <NavigationWrapper mobileOpen={mobileView}>
           <NavigationMenuList>