diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index 11ed5e7..0df7143 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -26,6 +26,7 @@
     "@vercel/speed-insights": "^1.0.10",
     "clsx": "^2.1.1",
     "fuse.js": "^7.0.0",
+    "htmlparser2": "^9.1.0",
     "next": "15.0.3",
     "next-themes": "^0.3.0",
     "oslo": "^1.2.1",
diff --git a/apps/dashboard/src/app/(splash)/login/page.tsx b/apps/dashboard/src/app/(splash)/login/page.tsx
index 71743bc..47e7498 100644
--- a/apps/dashboard/src/app/(splash)/login/page.tsx
+++ b/apps/dashboard/src/app/(splash)/login/page.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Text } from "@radix-ui/themes";
+import { Button, Flex, Heading, Text } from "@radix-ui/themes";
 import Link from "next/link";
 import { GitHubIcon } from "../../../components/icons/GitHubIcon";
 import { GoogleIcon } from "../../../components/icons/GoogleIcon";
@@ -13,7 +13,9 @@ export default function Page() {
   return (
     <Flex align="center" direction="column" gap="6" justify="center" mx="9">
       <Flex align="center" direction="column" gap="2">
-        <Text size="5">Sign in</Text>
+        <Heading as="h1" size="5" weight="regular">
+          Sign in
+        </Heading>
         <Text align="center" as="p" size="2">
           Create an account to export your images to URLs <br /> and make them
           available in all your devices.
diff --git a/apps/dashboard/src/app/(splash)/templates/page.tsx b/apps/dashboard/src/app/(splash)/templates/page.tsx
index 2345a9b..0e7d084 100644
--- a/apps/dashboard/src/app/(splash)/templates/page.tsx
+++ b/apps/dashboard/src/app/(splash)/templates/page.tsx
@@ -2,7 +2,7 @@ import { TemplatesSplash } from "../../../components/Splash/TemplatesSplash";
 
 export const metadata = {
   title: "Templates - OG Studio",
-  description: "Pre-made Open Graph image templates.",
+  description: "Free, pre-made Open Graph image templates.",
 };
 
 export const dynamic = "force-static";
diff --git a/apps/dashboard/src/app/(splash)/tools/open-graph-image-checker/page.tsx b/apps/dashboard/src/app/(splash)/tools/open-graph-image-checker/page.tsx
new file mode 100644
index 0000000..8ab18ff
--- /dev/null
+++ b/apps/dashboard/src/app/(splash)/tools/open-graph-image-checker/page.tsx
@@ -0,0 +1,13 @@
+import { type Metadata } from "next";
+import { OpenGraphImageChecker } from "../../../../components/Splash/Tools/OpenGraphImageChecker";
+
+export const dynamic = "force-static";
+
+export const metadata: Metadata = {
+  title: "Open Graph Image Checker - OG Studio",
+  description: "Free tool to check Open Graph meta tags of any website.",
+};
+
+export default function Page() {
+  return <OpenGraphImageChecker />;
+}
diff --git a/apps/dashboard/src/app/layout.tsx b/apps/dashboard/src/app/layout.tsx
index 9151ffc..29466bb 100644
--- a/apps/dashboard/src/app/layout.tsx
+++ b/apps/dashboard/src/app/layout.tsx
@@ -2,14 +2,16 @@ import { Inter } from "next/font/google";
 import { Toaster } from "sonner";
 import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/next";
+import { type Metadata } from "next";
 import { Providers } from "../components/Providers";
 import "./globals.css";
 
-export const metadata = {
+export const metadata: Metadata = {
   title: "OG Studio",
   description:
     "Create static or dynamic OG (Open Graph) images with an intuitive, Figma-like visual editor. Browse ready-to-use templates, and export your images to SVG/PNG or to a dynamic URL.",
   openGraph: {
+    siteName: "OG Studio",
     images:
       "https://github.com/QuiiBz/ogstudio/blob/main/assets/builder.jpeg?raw=true",
   },
diff --git a/apps/dashboard/src/app/sitemap.ts b/apps/dashboard/src/app/sitemap.ts
index d690d28..3a2e718 100644
--- a/apps/dashboard/src/app/sitemap.ts
+++ b/apps/dashboard/src/app/sitemap.ts
@@ -41,5 +41,11 @@ export default function sitemap(): MetadataRoute.Sitemap {
       changeFrequency: "monthly",
       priority: 0.5,
     },
+    {
+      url: "https://ogstudio.app/tools/open-graph-image-checker",
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.8,
+    },
   ];
 }
diff --git a/apps/dashboard/src/components/ExportModal/Download.tsx b/apps/dashboard/src/components/ExportModal/Download.tsx
index eabe2fc..7f312b5 100644
--- a/apps/dashboard/src/components/ExportModal/Download.tsx
+++ b/apps/dashboard/src/components/ExportModal/Download.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Text } from "@radix-ui/themes";
+import { Button, Flex, Heading } from "@radix-ui/themes";
 import { useState } from "react";
 import { flushSync } from "react-dom";
 import { PngIcon } from "../icons/PngIcon";
@@ -57,7 +57,9 @@ export function Download({ dynamicTexts }: DownloadProps) {
 
   return (
     <Flex direction="column" gap="4">
-      <Text size="5">Download</Text>
+      <Heading as="h2" size="5" weight="regular">
+        Download
+      </Heading>
       <Flex gap="2" mt="2">
         <Button
           color="green"
diff --git a/apps/dashboard/src/components/ExportModal/ExportURL.tsx b/apps/dashboard/src/components/ExportModal/ExportURL.tsx
index ee64170..2e0d880 100644
--- a/apps/dashboard/src/components/ExportModal/ExportURL.tsx
+++ b/apps/dashboard/src/components/ExportModal/ExportURL.tsx
@@ -2,13 +2,13 @@ import type { ReactNode } from "react";
 import { startTransition, useState } from "react";
 import Link from "next/link";
 import {
-  Text,
   Flex,
   Dialog,
   SegmentedControl,
   Code,
   Tooltip,
   IconButton,
+  Heading,
 } from "@radix-ui/themes";
 import { toast } from "sonner";
 import { useUser } from "../../lib/hooks/useUser";
@@ -78,7 +78,9 @@ export function ExportURL({ exportedKey, dynamicTexts }: ExportURLProps) {
   return (
     <Flex direction="column" gap="4" maxWidth="60%">
       <Flex align="center" justify="between">
-        <Text size="5">Export to URL</Text>
+        <Heading as="h2" size="5" weight="regular">
+          Export to URL
+        </Heading>
         <Flex align="center" gap="4">
           <Tooltip content="Copy">
             <IconButton color="gray" onClick={copy} size="2" variant="ghost">
diff --git a/apps/dashboard/src/components/ExportModal/Preview.tsx b/apps/dashboard/src/components/ExportModal/Preview.tsx
index ba440fb..31a5fbe 100644
--- a/apps/dashboard/src/components/ExportModal/Preview.tsx
+++ b/apps/dashboard/src/components/ExportModal/Preview.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text, TextField } from "@radix-ui/themes";
+import { Flex, Heading, Text, TextField } from "@radix-ui/themes";
 import { startTransition } from "react";
 import { OgImage } from "../OgImage";
 import { useElementsStore } from "../../stores/elementsStore";
@@ -15,7 +15,9 @@ export function Preview({ dynamicTexts, setDynamicTexts }: PreviewProps) {
 
   return (
     <Flex direction="column" gap="4">
-      <Text size="5">Live Preview</Text>
+      <Heading as="h2" size="5" weight="regular">
+        Live preview
+      </Heading>
       <Flex gap="6" justify="between" align="start" minHeight="353px">
         <Flex direction="column" gap="2">
           <PreviewControls />
diff --git a/apps/dashboard/src/components/OgImage.tsx b/apps/dashboard/src/components/OgImage.tsx
index 99b6622..1ca8e0e 100644
--- a/apps/dashboard/src/components/OgImage.tsx
+++ b/apps/dashboard/src/components/OgImage.tsx
@@ -2,7 +2,7 @@ import type { MouseEvent, ReactNode } from "react";
 import { Suspense, use, useMemo } from "react";
 import Link from "next/link";
 import { clsx } from "clsx";
-import { IconButton, Skeleton, Text } from "@radix-ui/themes";
+import { Flex, IconButton, Skeleton, Text } from "@radix-ui/themes";
 import type { OGElement } from "../lib/types";
 import { renderToImg } from "../lib/export";
 import { getDynamicTextKeys } from "../lib/elements";
@@ -81,7 +81,12 @@ interface OgImageProps {
   size?: "small" | "medium";
   client?: boolean;
   preview?: "x" | "slack" | "linkedin";
+  previewTitle?: string;
+  previewDescription?: string;
+  previewUrl?: string;
+  previewSite?: string;
   className?: string;
+  src?: string;
 }
 
 export function OgImage({
@@ -94,117 +99,166 @@ export function OgImage({
   name,
   copiable,
   deletable,
-  size,
+  size = "small",
   client,
   preview,
+  previewTitle = "Your page title",
+  previewDescription = "Your page description.",
+  previewUrl = "website.com",
+  previewSite = "Your site",
   className,
+  src,
 }: OgImageProps) {
   const Tag = href ? Link : onClick ? "button" : "div";
 
+  const WrapperComponent = useMemo(() => {
+    if (preview === "slack") {
+      return function Wrapper(props: { children: ReactNode }) {
+        return (
+          <Flex gap="3" className="w-[480px]">
+            <div className="bg-[#35373B] min-w-1 h-full rounded" />
+            <Flex direction="column" className="gap-0.5">
+              <p className="text-[#D1D2D3] text-[15px] font-black">
+                {previewSite}
+              </p>
+              <p className="text-[#1D9BD1] text-[15px] font-bold break-words">
+                {previewTitle}
+              </p>
+              <p className="text-[#D1D2D3] text-[15px]">{previewDescription}</p>
+              {props.children}
+            </Flex>
+          </Flex>
+        );
+      };
+    }
+
+    return function Wrapper(props: { children: ReactNode }) {
+      return <>{props.children}</>;
+    };
+  }, [preview, previewDescription, previewSite, previewTitle]);
+
+  const from = useMemo(() => {
+    try {
+      const url = new URL(previewUrl);
+      return url.hostname;
+    } catch {
+      return previewUrl;
+    }
+  }, [previewUrl]);
+
   return (
-    <Tag
-      className={clsx(
-        className,
-        "min-h-[157px] w-[300px] min-w-[300px] flex flex-col items-center justify-center rounded relative group overflow-hidden",
-        {
-          "min-h-[157px] w-[300px] min-w-[300px]": size === "small",
-          "min-h-[252px] w-[480px] min-w-[480px]": size === "medium",
-          "rounded-2xl": preview === "x",
-          "rounded-lg": preview === "slack",
-          "rounded-md": preview === "linkedin",
-        },
-      )}
-      // @ts-expect-error - href is not a valid prop for button
-      href={href}
-      onClick={onClick}
-      style={{ border: "1px solid var(--gray-6)" }}
-    >
-      {elements && client ? (
-        <Suspense fallback={<Skeleton height="10%" width="60%" />}>
-          <OgImageInnerClient
+    <WrapperComponent>
+      <Tag
+        className={clsx(
+          className,
+          "min-h-[157px] w-[300px] min-w-[300px] flex flex-col items-center justify-center rounded relative group overflow-hidden",
+          {
+            "min-h-[157px] w-[300px] min-w-[300px]": size === "small",
+            "min-h-[252px] w-[480px] min-w-[480px]": size === "medium",
+            "rounded-2xl h-[252px]": preview === "x",
+            "rounded-lg min-h-[189px] w-[360px] min-w-[360px]":
+              preview === "slack",
+            "rounded-md": preview === "linkedin",
+          },
+        )}
+        // @ts-expect-error - href is not a valid prop for button
+        href={href}
+        onClick={onClick}
+        style={{ border: "1px solid var(--gray-6)" }}
+      >
+        {elements && client ? (
+          <Suspense fallback={<Skeleton height="10%" width="60%" />}>
+            <OgImageInnerClient
+              dynamicTexts={dynamicTexts}
+              elements={elements}
+              mockDynamicTexts={mockDynamicTexts}
+            />
+          </Suspense>
+        ) : null}
+        {elements && !client ? (
+          <OgImageInnerServer
             dynamicTexts={dynamicTexts}
             elements={elements}
             mockDynamicTexts={mockDynamicTexts}
           />
-        </Suspense>
-      ) : null}
-      {elements && !client ? (
-        <OgImageInnerServer
-          dynamicTexts={dynamicTexts}
-          elements={elements}
-          mockDynamicTexts={mockDynamicTexts}
-        />
-      ) : null}
-      {children}
-      {name ? (
-        <Text
-          as="span"
-          className="absolute left-1 top-1 p-1 hidden group-hover:block max-w-[70%]"
-          size="1"
-          style={{
-            backgroundColor: "var(--gray-12)",
-            color: "var(--gray-1)",
-            borderRadius: "var(--radius-1)",
-          }}
-          truncate
-        >
-          {name}
-        </Text>
-      ) : null}
-      {copiable ? (
-        <IconButton
-          className="absolute right-8 top-1 hidden group-hover:flex"
-          color="gray"
-          highContrast
-          onClick={(event) => {
-            event.preventDefault();
-            copiable(event);
-          }}
-          size="1"
-          variant="solid"
-        >
-          <CopyIcon />
-        </IconButton>
-      ) : null}
-      {deletable ? (
-        <IconButton
-          className="absolute right-1 top-1 hidden group-hover:flex"
-          color="gray"
-          highContrast
-          onClick={(event) => {
-            event.preventDefault();
-            deletable(event);
-          }}
-          size="1"
-          variant="solid"
-        >
-          <DeleteIcon />
-        </IconButton>
-      ) : null}
-      {preview === "x" ? (
-        <span
-          className="absolute bottom-3 left-3 text-white h-5 px-2 rounded text-[13px]"
-          style={{ backgroundColor: "rgba(0, 0, 0, 0.77)" }}
-        >
-          Your page title
-        </span>
-      ) : null}
-      {preview === "linkedin" ? (
-        <div
-          className="px-3 py-2 w-full flex flex-col gap-2"
-          style={{ backgroundColor: "rgb(237, 243, 248)" }}
-        >
+        ) : null}
+        {src ? <img alt="" src={src} /> : null}
+        {children}
+        {name ? (
+          <Text
+            as="span"
+            className="absolute left-1 top-1 p-1 hidden group-hover:block max-w-[70%]"
+            size="1"
+            style={{
+              backgroundColor: "var(--gray-12)",
+              color: "var(--gray-1)",
+              borderRadius: "var(--radius-1)",
+            }}
+            truncate
+          >
+            {name}
+          </Text>
+        ) : null}
+        {copiable ? (
+          <IconButton
+            className="absolute right-8 top-1 hidden group-hover:flex"
+            color="gray"
+            highContrast
+            onClick={(event) => {
+              event.preventDefault();
+              copiable(event);
+            }}
+            size="1"
+            variant="solid"
+          >
+            <CopyIcon />
+          </IconButton>
+        ) : null}
+        {deletable ? (
+          <IconButton
+            className="absolute right-1 top-1 hidden group-hover:flex"
+            color="gray"
+            highContrast
+            onClick={(event) => {
+              event.preventDefault();
+              deletable(event);
+            }}
+            size="1"
+            variant="solid"
+          >
+            <DeleteIcon />
+          </IconButton>
+        ) : null}
+        {preview === "x" ? (
           <span
-            className="text-sm font-semibold"
-            style={{ color: "rgba(0, 0, 0, 0.9)" }}
+            className="absolute bottom-2.5 left-2.5 text-white h-5 px-2 rounded text-[12px]"
+            style={{ backgroundColor: "rgba(0, 0, 0, 0.77)" }}
           >
-            Your page title
-          </span>
-          <span className="text-xs" style={{ color: "rgba(0, 0, 0, 0.6)" }}>
-            website.com
+            {previewTitle}
           </span>
-        </div>
+        ) : null}
+        {preview === "linkedin" ? (
+          <div
+            className="px-3 py-2 w-full flex flex-col gap-2"
+            style={{ backgroundColor: "rgb(237, 243, 248)" }}
+          >
+            <span
+              className="text-sm font-semibold"
+              style={{ color: "rgba(0, 0, 0, 0.9)" }}
+            >
+              {previewTitle}
+            </span>
+            <span className="text-xs" style={{ color: "rgba(0, 0, 0, 0.6)" }}>
+              {previewUrl}
+            </span>
+          </div>
+        ) : null}
+      </Tag>
+      {preview === "x" ? (
+        <span className="text-[#8b98a5] text-[12px] -mt-1.5 relative">
+          From {from}
+        </span>
       ) : null}
-    </Tag>
+    </WrapperComponent>
   );
 }
diff --git a/apps/dashboard/src/components/Splash/HomeSplash.tsx b/apps/dashboard/src/components/Splash/HomeSplash.tsx
index 9a0eb35..2bb9f3d 100644
--- a/apps/dashboard/src/components/Splash/HomeSplash.tsx
+++ b/apps/dashboard/src/components/Splash/HomeSplash.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Separator, Text } from "@radix-ui/themes";
+import { Button, Flex, Heading, Separator } from "@radix-ui/themes";
 import Link from "next/link";
 import { ArrowRightIcon } from "../icons/ArrowRightIcon";
 import { TEMPLATES, toTemplateSlug } from "../../lib/templates";
@@ -10,7 +10,9 @@ export function HomeSplash() {
     <>
       <Flex direction="column" gap="4">
         <Flex align="center" justify="between">
-          <Text size="5">Templates</Text>
+          <Heading as="h2" size="5" weight="regular">
+            Templates
+          </Heading>
           <Button asChild color="gray" radius="full" variant="ghost">
             <Link href="/templates">
               See all ({TEMPLATES.length})
diff --git a/apps/dashboard/src/components/Splash/HomeSplashMyImages.tsx b/apps/dashboard/src/components/Splash/HomeSplashMyImages.tsx
index bb248af..bb83a17 100644
--- a/apps/dashboard/src/components/Splash/HomeSplashMyImages.tsx
+++ b/apps/dashboard/src/components/Splash/HomeSplashMyImages.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { Button, Flex, Text } from "@radix-ui/themes";
+import { Button, Flex, Heading, Text } from "@radix-ui/themes";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { type OGImage, useImagesStore } from "../../stores/imagesStore";
@@ -16,7 +16,9 @@ export function HomeSplashMyImages() {
   return (
     <Flex direction="column" gap="4">
       <Flex align="center" justify="between">
-        <Text size="5">My images</Text>
+        <Heading as="h2" size="5" weight="regular">
+          My images
+        </Heading>
         <Button asChild color="gray" radius="full" variant="ghost">
           <Link href="/my-images">
             See all ({images.length})
diff --git a/apps/dashboard/src/components/Splash/MyImagesSplash.tsx b/apps/dashboard/src/components/Splash/MyImagesSplash.tsx
index fb42f2f..8e0b027 100644
--- a/apps/dashboard/src/components/Splash/MyImagesSplash.tsx
+++ b/apps/dashboard/src/components/Splash/MyImagesSplash.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { useRouter } from "next/navigation";
-import { Button, Flex, Grid, Text } from "@radix-ui/themes";
+import { Button, Flex, Grid, Heading, Text } from "@radix-ui/themes";
 import Link from "next/link";
 import { ArrowLeftIcon } from "../icons/ArrowLeftIcon";
 import { AddIcon } from "../icons/AddIcon";
@@ -16,7 +16,9 @@ export function MyImagesSplash() {
   return (
     <Flex direction="column" gap="4">
       <Flex align="center" justify="between">
-        <Text size="5">My images</Text>
+        <Heading as="h1" size="5" weight="regular">
+          My images
+        </Heading>
         <Button asChild color="gray" radius="full" variant="ghost">
           <Link href="/">
             <ArrowLeftIcon />
diff --git a/apps/dashboard/src/components/Splash/TemplatesSplash.tsx b/apps/dashboard/src/components/Splash/TemplatesSplash.tsx
index e652681..d5377e9 100644
--- a/apps/dashboard/src/components/Splash/TemplatesSplash.tsx
+++ b/apps/dashboard/src/components/Splash/TemplatesSplash.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Grid, Text } from "@radix-ui/themes";
+import { Button, Flex, Grid, Heading } from "@radix-ui/themes";
 import Link from "next/link";
 import { ArrowLeftIcon } from "../icons/ArrowLeftIcon";
 import { TEMPLATES, toTemplateSlug } from "../../lib/templates";
@@ -8,7 +8,9 @@ export function TemplatesSplash() {
   return (
     <Flex direction="column" gap="4">
       <Flex align="center" justify="between">
-        <Text size="5">All templates</Text>
+        <Heading as="h1" size="5" weight="regular">
+          All templates
+        </Heading>
         <Button asChild color="gray" radius="full" variant="ghost">
           <Link href="/">
             <ArrowLeftIcon />
diff --git a/apps/dashboard/src/components/Splash/Tools/OpenGraphImageChecker.tsx b/apps/dashboard/src/components/Splash/Tools/OpenGraphImageChecker.tsx
new file mode 100644
index 0000000..17f7613
--- /dev/null
+++ b/apps/dashboard/src/components/Splash/Tools/OpenGraphImageChecker.tsx
@@ -0,0 +1,157 @@
+"use client";
+import {
+  Flex,
+  Heading,
+  Skeleton,
+  Table,
+  Text,
+  TextField,
+  Tooltip,
+} from "@radix-ui/themes";
+import { useEffect, useState } from "react";
+import * as htmlparser2 from "htmlparser2";
+import { usePreviewControls } from "../../../lib/hooks/usePreviewControls";
+import { InfoIcon } from "../../icons/InfoIcon";
+import { OgImage } from "../../OgImage";
+
+const META_TAGS = {
+  "og:title": "The title of your object as it should appear within the graph.",
+  "og:description": "A one to two sentence description of your object.",
+  "og:site_name": "The name which should be displayed for the overall site.",
+  "og:url":
+    "The canonical URL of your object that will be used as its permanent ID in the graph.",
+  "og:image":
+    "An image URL which should represent your object within the graph.",
+} as const;
+
+const META_KEYS = Object.keys(META_TAGS) as MetaTags[];
+
+type MetaTags = keyof typeof META_TAGS;
+
+export function OpenGraphImageChecker() {
+  const [url, setUrl] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState<Record<MetaTags, string> | undefined>();
+  const { preview, PreviewControls } = usePreviewControls();
+
+  useEffect(() => {
+    try {
+      let finalUrl = url;
+
+      if (!url.startsWith("http")) {
+        finalUrl = `https://${url}`;
+      }
+
+      if (!finalUrl.includes("://") || !finalUrl.includes(".")) {
+        throw new Error("Invalid URL");
+      }
+
+      const maybeUrl = new URL(finalUrl);
+
+      setLoading(true);
+
+      fetch(maybeUrl)
+        .then(async (response) => {
+          const text = await response.text();
+          // @ts-expect-error missing values
+          const tempData: Record<MetaTags, string> = {};
+
+          const parser = new htmlparser2.Parser({
+            onopentag(name, attributes) {
+              if (
+                name === "meta" &&
+                META_KEYS.includes(
+                  (attributes.name || attributes.property) as MetaTags,
+                )
+              ) {
+                tempData[(attributes.name || attributes.property) as MetaTags] =
+                  attributes.content;
+              }
+            },
+          });
+
+          parser.write(text);
+          parser.end();
+
+          setLoading(false);
+          setData(tempData);
+        })
+        .catch(() => {
+          setLoading(false);
+          setData(undefined);
+        });
+    } catch {
+      // Ignore invalid URLs
+      setLoading(false);
+      setData(undefined);
+    }
+  }, [url]);
+
+  return (
+    <Flex direction="column" gap="4">
+      <Heading size="5" weight="regular">
+        Open Graph Image Checker
+      </Heading>
+      <Text as="p" className="lg:w-2/3" size="2">
+        Free tool to check Open Graph meta tags of any website. Enter a URL to
+        get started:
+      </Text>
+      <Flex direction="column" gap="6">
+        <TextField.Root
+          onChange={(event) => {
+            setUrl(event.target.value);
+          }}
+          placeholder="https://ogstudio.app"
+        />
+        {data ?? loading ? (
+          <Flex gap="6" justify="between">
+            <Table.Root size="1">
+              <Table.Header>
+                <Table.Row>
+                  <Table.ColumnHeaderCell>Property</Table.ColumnHeaderCell>
+                  <Table.ColumnHeaderCell>Value</Table.ColumnHeaderCell>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {META_KEYS.map((tag) => (
+                  <Table.Row key={tag}>
+                    <Table.RowHeaderCell>
+                      <Flex align="center" gap="1">
+                        <Tooltip content={META_TAGS[tag]}>
+                          <InfoIcon />
+                        </Tooltip>
+                        {tag}
+                      </Flex>
+                    </Table.RowHeaderCell>
+                    <Table.Cell className="break-all">
+                      {loading ? (
+                        <Skeleton width="300px" />
+                      ) : (
+                        data?.[tag] ?? "⚠️ Missing value"
+                      )}
+                    </Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table.Root>
+            {data?.["og:image"] ? (
+              <Flex direction="column" gap="2">
+                <PreviewControls />
+                <OgImage
+                  src={data["og:image"]}
+                  preview={preview}
+                  previewTitle={data["og:title"]}
+                  previewDescription={data["og:description"]}
+                  previewUrl={data["og:url"]}
+                  previewSite={data["og:site_name"]}
+                  size="medium"
+                />
+              </Flex>
+            ) : null}
+            {loading ? <Skeleton width="480px" height="252px" /> : null}
+          </Flex>
+        ) : null}
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/apps/dashboard/src/components/Splash/index.tsx b/apps/dashboard/src/components/Splash/index.tsx
index 885b7aa..8753853 100644
--- a/apps/dashboard/src/components/Splash/index.tsx
+++ b/apps/dashboard/src/components/Splash/index.tsx
@@ -11,9 +11,11 @@ import {
   Separator,
   Text,
 } from "@radix-ui/themes";
+import { usePathname } from "next/navigation";
 import { OgEditor } from "../OgEditor";
 import { GitHubIcon } from "../icons/GitHubIcon";
 import { useUser } from "../../lib/hooks/useUser";
+import { ImageIcon } from "../icons/ImageIcon";
 
 interface OgSplashProps {
   children: ReactNode;
@@ -21,6 +23,7 @@ interface OgSplashProps {
 
 export function Splash({ children }: OgSplashProps) {
   const { data } = useUser();
+  const largeSplash = usePathname() === "/tools/open-graph-image-checker";
 
   return (
     <>
@@ -37,7 +40,7 @@ export function Splash({ children }: OgSplashProps) {
         width="100vw"
       >
         <Box
-          height="680px"
+          height={largeSplash ? "740px" : "680px"}
           p="6"
           style={{
             boxShadow: "var(--shadow-6)",
@@ -45,7 +48,7 @@ export function Splash({ children }: OgSplashProps) {
             borderRadius: "var(--radius-5)",
           }}
           maxWidth="100vw"
-          width="980px"
+          width={largeSplash ? "1160px" : "980px"}
         >
           <Flex align="center" justify="between" className="-mt-2">
             <Flex align="center" gap="6">
@@ -74,6 +77,12 @@ export function Splash({ children }: OgSplashProps) {
                   GitHub
                 </Link>
               </Button>
+              <Button asChild color="gray" radius="full" variant="ghost">
+                <Link href="/tools/open-graph-image-checker">
+                  <ImageIcon />
+                  Open Graph Checker
+                </Link>
+              </Button>
             </Flex>
             <Button asChild color="gray" mr="2" radius="full" variant="ghost">
               <Link href={data?.user ? "/profile" : "/login"}>
diff --git a/apps/dashboard/src/components/icons/InfoIcon.tsx b/apps/dashboard/src/components/icons/InfoIcon.tsx
new file mode 100644
index 0000000..2ff4e9a
--- /dev/null
+++ b/apps/dashboard/src/components/icons/InfoIcon.tsx
@@ -0,0 +1,20 @@
+import { type SVGProps } from "react";
+
+export function InfoIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 15 15"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M7.5.877a6.623 6.623 0 1 0 0 13.246A6.623 6.623 0 0 0 7.5.877ZM1.827 7.5a5.673 5.673 0 1 1 11.346 0a5.673 5.673 0 0 1-11.346 0Zm6.423-3a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0ZM6 6h1.5a.5.5 0 0 1 .5.5V10h1v1H6v-1h1V7H6V6Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
diff --git a/apps/dashboard/src/lib/hooks/usePreviewControls.tsx b/apps/dashboard/src/lib/hooks/usePreviewControls.tsx
index ba04d59..7a34a15 100644
--- a/apps/dashboard/src/lib/hooks/usePreviewControls.tsx
+++ b/apps/dashboard/src/lib/hooks/usePreviewControls.tsx
@@ -19,7 +19,7 @@ export function usePreviewControls() {
           <SegmentedControl.Item value="x">
             <Flex align="center" gap="1">
               <Image
-                alt="X (Twitter) logo"
+                alt="X logo"
                 height="16"
                 src={
                   resolvedTheme === "dark"
@@ -28,7 +28,7 @@ export function usePreviewControls() {
                 }
                 width="16"
               />
-              X (Twitter)
+              X
             </Flex>
           </SegmentedControl.Item>
           <SegmentedControl.Item value="slack">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a77b260..158d257 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -69,6 +69,9 @@ importers:
       fuse.js:
         specifier: ^7.0.0
         version: 7.0.0
+      htmlparser2:
+        specifier: ^9.1.0
+        version: 9.1.0
       next:
         specifier: 15.0.3
         version: 15.0.3(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106)
@@ -2643,6 +2646,19 @@ packages:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
 
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domutils@3.1.0:
+    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
+
   dotenv@16.0.3:
     resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
     engines: {node: '>=12'}
@@ -3306,6 +3322,9 @@ packages:
   hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
 
+  htmlparser2@9.1.0:
+    resolution: {integrity: sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==}
+
   human-signals@2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
@@ -7093,6 +7112,24 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@3.1.0:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
   dotenv@16.0.3: {}
 
   dotenv@16.4.5: {}
@@ -7967,6 +8004,13 @@ snapshots:
 
   hosted-git-info@2.8.9: {}
 
+  htmlparser2@9.1.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+      entities: 4.5.0
+
   human-signals@2.1.0: {}
 
   human-signals@4.3.1: {}