diff --git a/web/src/app/icons/[icon]/page.tsx b/web/src/app/icons/[icon]/page.tsx
index 2785acbc..5e80d4d3 100644
--- a/web/src/app/icons/[icon]/page.tsx
+++ b/web/src/app/icons/[icon]/page.tsx
@@ -1,4 +1,5 @@
 import { IconDetails } from "@/components/icon-details"
+import { StructuredData } from "@/components/structured-data"
 import { BASE_URL, GITHUB_URL, ICON_DETAIL_KEYWORDS, SITE_NAME, SITE_TAGLINE, TITLE_SEPARATOR, WEB_URL, getIconDescription, getIconSchema } from "@/constants"
 import { getAllIcons, getAuthorData } from "@/lib/api"
 import type { Metadata, ResolvingMetadata } from "next"
@@ -118,9 +119,7 @@ export default async function IconPage({ params }: { params: Promise<{ icon: str
 
 	return (
 		<>
-			<Script id="image-schema" type="application/ld+json">
-				{JSON.stringify(imageSchema)}
-			</Script>
+			<StructuredData data={imageSchema} id="image-schema" />
 			<IconDetails icon={icon} iconData={originalIconData} authorData={authorData} />
 		</>
 	)
diff --git a/web/src/app/icons/page.tsx b/web/src/app/icons/page.tsx
index 8d70726a..5a8bf78d 100644
--- a/web/src/app/icons/page.tsx
+++ b/web/src/app/icons/page.tsx
@@ -2,6 +2,7 @@ import { BASE_URL, BROWSE_KEYWORDS, DEFAULT_OG_IMAGE, GITHUB_URL, ORGANIZATION_N
 import { getIconsArray } from "@/lib/api"
 import type { Metadata } from "next"
 import { IconSearch } from "./components/icon-search"
+import { StructuredData } from "@/components/structured-data"
 
 export async function generateMetadata(): Promise<Metadata> {
 	const icons = await getIconsArray()
@@ -41,30 +42,23 @@ export const dynamic = "force-static"
 export default async function IconsPage() {
 	const icons = await getIconsArray()
 
+	const gallerySchema = {
+		"@context": "https://schema.org",
+		"@type": "ImageGallery",
+		"name": `${SITE_NAME} - Browse ${icons.length} Icons - ${SITE_TAGLINE}`,
+		"description": getBrowseDescription(icons.length),
+		"url": `${WEB_URL}/icons`,
+		"numberOfItems": icons.length,
+		"creator": {
+			"@type": "Organization",
+			"name": ORGANIZATION_NAME,
+			"url": GITHUB_URL
+		}
+	}
+
 	return (
 		<>
-			<script
-				id="gallery-schema"
-				type="application/ld+json"
-				dangerouslySetInnerHTML={{ __html: JSON.stringify({
-					"@context": "https://schema.org",
-					"@type": "ImageGallery",
-					"name": `${SITE_NAME} - Browse ${icons.length} Icons - ${SITE_TAGLINE}`,
-					"description": getBrowseDescription(icons.length),
-					"url": `${WEB_URL}/icons`,
-					"numberOfItems": icons.length,
-					"creator": {
-						"@type": "Organization",
-						"name": ORGANIZATION_NAME,
-						"url": GITHUB_URL
-					}
-				}) }}
-			/>
-			<script
-				id="org-schema"
-				type="application/ld+json"
-				dangerouslySetInnerHTML={{ __html: JSON.stringify(ORGANIZATION_SCHEMA) }}
-			/>
+			<StructuredData data={gallerySchema} id="gallery-schema" />
 			<div className="isolate overflow-hidden">
 				<div className="py-8">
 					<div className="space-y-4 mb-8 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index aec3e3e4..f9bc53b4 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -2,6 +2,7 @@ import { PostHogProvider } from "@/components/PostHogProvider"
 import { Footer } from "@/components/footer"
 import { HeaderWrapper } from "@/components/header-wrapper"
 import { LicenseNotice } from "@/components/license-notice"
+import { WebsiteStructuredData } from "@/components/structured-data"
 import { getTotalIcons } from "@/lib/api"
 import type { Metadata, Viewport } from "next"
 import { Inter } from "next/font/google"
@@ -9,7 +10,6 @@ import { Toaster } from "sonner"
 import "./globals.css"
 import { DEFAULT_KEYWORDS, DEFAULT_OG_IMAGE, GITHUB_URL, ORGANIZATION_NAME, ORGANIZATION_SCHEMA, SITE_NAME, SITE_TAGLINE, WEB_URL, getDescription, getWebsiteSchema, websiteFullTitle, websiteTitle } from "@/constants"
 import { ThemeProvider } from "./theme-provider"
-import Script from "next/script"
 
 const inter = Inter({
 	variable: "--font-inter",
@@ -98,16 +98,12 @@ export default async function RootLayout({ children }: Readonly<{ children: Reac
 
 	return (
 		<html lang="en" suppressHydrationWarning>
-			<head>
-				<Script id="schema-org" type="application/ld+json">
-					{JSON.stringify(websiteSchema)}
-				</Script>
-				<Script id="org-schema" type="application/ld+json">
-					{JSON.stringify(ORGANIZATION_SCHEMA)}
-				</Script>
-			</head>
 			<body className={`${inter.variable} antialiased bg-background flex flex-col min-h-screen`}>
 				<PostHogProvider>
+					<WebsiteStructuredData
+						websiteSchema={websiteSchema}
+						organizationSchema={ORGANIZATION_SCHEMA}
+					/>
 					<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
 						<HeaderWrapper />
 						<main className="flex-grow">{children}</main>
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index c498d9f3..f6f634ed 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -1,9 +1,9 @@
 import { HeroSection } from "@/components/hero"
 import { RecentlyAddedIcons } from "@/components/recently-added-icons"
+import { StructuredData } from "@/components/structured-data"
 import { BASE_URL, DEFAULT_KEYWORDS, DEFAULT_OG_IMAGE, GITHUB_URL, ORGANIZATION_NAME, ORGANIZATION_SCHEMA, SITE_NAME, SITE_TAGLINE, WEB_URL, REPO_NAME, getHomeDescription, websiteFullTitle, websiteTitle } from "@/constants"
 import { getRecentlyAddedIcons, getTotalIcons } from "@/lib/api"
 import type { Metadata } from "next"
-import Script from "next/script"
 
 export async function generateMetadata(): Promise<Metadata> {
 	const { totalIcons } = await getTotalIcons()
@@ -70,12 +70,7 @@ export default async function Home() {
 
 	return (
 		<>
-			<Script id="collection-schema" type="application/ld+json">
-				{JSON.stringify(collectionSchema)}
-			</Script>
-			<Script id="org-schema" type="application/ld+json">
-				{JSON.stringify(ORGANIZATION_SCHEMA)}
-			</Script>
+			<StructuredData data={collectionSchema} id="collection-schema" />
 			<div className="flex flex-col min-h-screen">
 				<HeroSection totalIcons={totalIcons} stars={stars} />
 				<RecentlyAddedIcons icons={recentIcons} />
diff --git a/web/src/components/structured-data.tsx b/web/src/components/structured-data.tsx
new file mode 100644
index 00000000..dce485cd
--- /dev/null
+++ b/web/src/components/structured-data.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+type StructuredDataProps = {
+  data: any
+  id?: string
+}
+
+export const StructuredData = ({ data, id }: StructuredDataProps) => {
+  return (
+    <script
+      id={id}
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
+    />
+  )
+}
+
+type WebsiteStructuredDataProps = {
+  websiteSchema: any
+  organizationSchema: any
+}
+
+export const WebsiteStructuredData = ({
+  websiteSchema,
+  organizationSchema
+}: WebsiteStructuredDataProps) => {
+  return (
+    <>
+      <StructuredData data={websiteSchema} id="website-schema" />
+      <StructuredData data={organizationSchema} id="organization-schema" />
+    </>
+  )
+}
\ No newline at end of file