diff --git a/guides/directory-sync/overview.md b/guides/directory-sync/overview.md
index 2d91d526..01734819 100644
--- a/guides/directory-sync/overview.md
+++ b/guides/directory-sync/overview.md
@@ -8,20 +8,10 @@ slug: /directory-sync
 
 This guide describes how to add Directory Sync to different languages & frameworks.
 
-import GuideSection from '../../src/components/GuideSection.js';
-const frameworks = [
-  {
-    name: 'Next.js',
-    href: '/guides/directory-sync/frameworks/nextjs',
-  },
-  {
-    name: 'Express.js',
-    href: '/guides/directory-sync/frameworks/express',
-  }
-];
+import FrameworksGuide from '../../src/components/guides/dsync/FrameworksGuide.js';
 
 <div className="container" style={{ padding: 0 }}>
   <div className="row is-multiline">
-    <GuideSection items={frameworks} />
+    <FrameworksGuide />
   </div>
 </div>
diff --git a/guides/jackson/overview.mdx b/guides/jackson/overview.mdx
index 5e49a478..33269572 100644
--- a/guides/jackson/overview.mdx
+++ b/guides/jackson/overview.mdx
@@ -8,73 +8,9 @@ slug: /jackson
 
 The documentation is divided into 3 sections.
 
-import GuideSection from '../../src/components/GuideSection.js';
-const frameworks = [
-  {
-    name: 'AdonisJS',
-    href: '/guides/jackson/frameworks/adonis',
-  },
-  {
-    name: 'Express.js',
-    href: '/guides/jackson/frameworks/express',
-  },
-  {
-    name: 'Next.js',
-    href: '/guides/jackson/frameworks/nextjs',
-  },
-  {
-    name: 'React',
-    href: '/guides/jackson/frameworks/react',
-  },
-  {
-    name: 'Remix',
-    href: '/guides/jackson/frameworks/remix',
-  },
-  {
-    name: 'Laravel',
-    href: '/guides/jackson/frameworks/laravel',
-  },
-  {
-    name: 'Ruby on Rails',
-    href: '/guides/jackson/frameworks/rails',
-  },
-];
-const integrations = [
-  {
-    name: 'Auth0',
-    href: '/guides/jackson/integrations/auth0',
-  },
-  {
-    name: 'Firebase',
-    href: '/guides/jackson/integrations/firebase',
-  },
-  {
-    name: 'NextAuth',
-    href: '/guides/jackson/integrations/nextauth',
-  },
-  {
-    name: 'SuperTokens',
-    href: '/guides/jackson/integrations/supertokens',
-  },
-  {
-    name: 'Bubble.io',
-    href: '/guides/jackson/integrations/bubble',
-  },
-];
-const deployments = [
-  {
-    name: 'Heroku',
-    href: '/guides/jackson/deployments/heroku',
-  },
-  {
-    name: 'Vercel',
-    href: '/guides/jackson/deployments/vercel',
-  },
-  {
-    name: 'mogenius',
-    href: '/guides/jackson/deployments/mogenius',
-  },
-];
+import DeploymentsGuide from '../../src/components/guides/jackson/DeploymentsGuide.js';
+import IntegrationsGuide from '../../src/components/guides/jackson/IntegrationsGuide.js';
+import FrameworksGuide from '../../src/components/guides/jackson/FrameworksGuide.js';
 
 ## Deployment Guides
 
@@ -82,7 +18,7 @@ If you want to self host SAML Jackson, the recommended approach is to use one of
 
 <div className="container" style={{ padding: 0 }}>
   <div className="row is-multiline">
-    <GuideSection items={deployments} />
+    <DeploymentsGuide />
   </div>
 </div>
 
@@ -92,7 +28,7 @@ Step-by-step guides to quickly integrate SAML SSO into your application.
 
 <div className="container" style={{ padding: 0 }}>
   <div className="row is-multiline">
-    <GuideSection items={frameworks} />
+    <FrameworksGuide />
   </div>
 </div>
 
@@ -102,6 +38,6 @@ SAML Jackson works with a large number of Open source tools.
 
 <div className="container" style={{ padding: 0 }}>
   <div className="row is-multiline">
-    <GuideSection items={integrations} />
+    <IntegrationsGuide />
   </div>
 </div>
diff --git a/src/components/guides/dsync/FrameworksGuide.js b/src/components/guides/dsync/FrameworksGuide.js
new file mode 100644
index 00000000..85216773
--- /dev/null
+++ b/src/components/guides/dsync/FrameworksGuide.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import GuideSection from '../../GuideSection.js';
+
+const frameworks = [
+  {
+    name: 'Next.js',
+    href: '/guides/directory-sync/frameworks/nextjs',
+  },
+  {
+    name: 'Express.js',
+    href: '/guides/directory-sync/frameworks/express',
+  },
+];
+
+export default function FrameworksGuide() {
+  return <GuideSection items={frameworks} />;
+}
diff --git a/src/components/guides/jackson/DeploymentsGuide.js b/src/components/guides/jackson/DeploymentsGuide.js
new file mode 100644
index 00000000..a14622d3
--- /dev/null
+++ b/src/components/guides/jackson/DeploymentsGuide.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import GuideSection from '../../GuideSection.js';
+
+const deployments = [
+  {
+    name: 'Heroku',
+    href: '/guides/jackson/deployments/heroku',
+  },
+  {
+    name: 'Vercel',
+    href: '/guides/jackson/deployments/vercel',
+  },
+  {
+    name: 'mogenius',
+    href: '/guides/jackson/deployments/mogenius',
+  },
+];
+
+export default function DeploymentsGuide() {
+  return <GuideSection items={deployments} />;
+}
diff --git a/src/components/guides/jackson/FrameworksGuide.js b/src/components/guides/jackson/FrameworksGuide.js
new file mode 100644
index 00000000..a4273973
--- /dev/null
+++ b/src/components/guides/jackson/FrameworksGuide.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import GuideSection from '../../GuideSection.js';
+
+const frameworks = [
+  {
+    name: 'AdonisJS',
+    href: '/guides/jackson/frameworks/adonis',
+  },
+  {
+    name: 'Express.js',
+    href: '/guides/jackson/frameworks/express',
+  },
+  {
+    name: 'Next.js',
+    href: '/guides/jackson/frameworks/nextjs',
+  },
+  {
+    name: 'React',
+    href: '/guides/jackson/frameworks/react',
+  },
+  {
+    name: 'Remix',
+    href: '/guides/jackson/frameworks/remix',
+  },
+  {
+    name: 'Laravel',
+    href: '/guides/jackson/frameworks/laravel',
+  },
+  {
+    name: 'Ruby on Rails',
+    href: '/guides/jackson/frameworks/rails',
+  },
+];
+
+export default function FrameworksGuide() {
+  return <GuideSection items={frameworks} />;
+}
diff --git a/src/components/guides/jackson/IntegrationsGuide.js b/src/components/guides/jackson/IntegrationsGuide.js
new file mode 100644
index 00000000..858d106b
--- /dev/null
+++ b/src/components/guides/jackson/IntegrationsGuide.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import GuideSection from '../../GuideSection.js';
+
+const integrations = [
+  {
+    name: 'Auth0',
+    href: '/guides/jackson/integrations/auth0',
+  },
+  {
+    name: 'Firebase',
+    href: '/guides/jackson/integrations/firebase',
+  },
+  {
+    name: 'NextAuth',
+    href: '/guides/jackson/integrations/nextauth',
+  },
+  {
+    name: 'SuperTokens',
+    href: '/guides/jackson/integrations/supertokens',
+  },
+  {
+    name: 'Bubble.io',
+    href: '/guides/jackson/integrations/bubble',
+  },
+];
+
+export default function IntegrationsGuide() {
+  return <GuideSection items={integrations} />;
+}