diff --git a/apps/embed-v1/next.config.js b/apps/embed-v1/next.config.js
index 861c526..02049ca 100644
--- a/apps/embed-v1/next.config.js
+++ b/apps/embed-v1/next.config.js
@@ -1,8 +1,8 @@
 import { fileURLToPath } from "url";
-import createJiti from "jiti";
+import { createJiti } from "jiti";
 
 // Import env files to validate at build time. Use jiti so we can load .ts files in here.
-createJiti(fileURLToPath(import.meta.url))("./src/env");
+await createJiti(fileURLToPath(import.meta.url)).import("./src/env");
 
 /** @type {import("next").NextConfig} */
 const config = {
@@ -20,6 +20,17 @@ const config = {
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "loremflickr.com",
+        port: "",
+        pathname: "/**",
+      },
+    ],
+    unoptimized: true,
+  },
 };
 
 export default config;
diff --git a/apps/embed-v1/src/actions/getOrgTestimonials.tsx b/apps/embed-v1/src/actions/getOrgTestimonials.tsx
new file mode 100644
index 0000000..6bd22e3
--- /dev/null
+++ b/apps/embed-v1/src/actions/getOrgTestimonials.tsx
@@ -0,0 +1,31 @@
+"use server";
+
+import { eq } from "@acme/db";
+import { db } from "@acme/db/client";
+
+import type {
+  OrganizationTestimonialType,
+  TestimonialTableType,
+} from "~/types/schema-types";
+
+export async function getOrgTestimonials(org: string) {
+  try {
+    const data = (await db.query.organizationTable.findMany({
+      where: (organizationTable, { eq }) =>
+        eq(organizationTable.organizationName, org),
+      with: {
+        testimonials: {
+          where: (testimonialsTable: TestimonialTableType) =>
+            eq(testimonialsTable.wallOfFame, true),
+        },
+      },
+    })) as OrganizationTestimonialType[];
+
+    if (data.length === 0) {
+      return "Project not found";
+    }
+    return data[0];
+  } catch (error) {
+    return (error as Error).message;
+  }
+}
diff --git a/apps/embed-v1/src/app/[orgName]/page.tsx b/apps/embed-v1/src/app/[orgName]/page.tsx
deleted file mode 100644
index f4ce82e..0000000
--- a/apps/embed-v1/src/app/[orgName]/page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from "react";
-
-export default function page({ params }: { params: { orgName: string } }) {
-  const { orgName } = params;
-  return <div>{orgName}</div>;
-}
diff --git a/apps/embed-v1/src/app/globals.css b/apps/embed-v1/src/app/globals.css
index b9d992f..6137683 100644
--- a/apps/embed-v1/src/app/globals.css
+++ b/apps/embed-v1/src/app/globals.css
@@ -5,46 +5,62 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+    --foreground: 250 10% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+    --card-foreground: 250 10% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 327 66% 69%;
-    --primary-foreground: 337 65.5% 17.1%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
+    --popover-foreground: 250 10% 3.9%;
+    --primary: 267 75% 64%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 250 4.8% 95.9%;
+    --secondary-foreground: 250 5.9% 10%;
+    --muted: 250 4.8% 95.9%;
+    --muted-foreground: 250 3.8% 46.1%;
+    --accent: 267 75% 95.9%;
+    --accent-foreground: 250 5.9% 10%;
     --destructive: 0 72.22% 50.59%;
     --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5% 64.9%;
+    --border: 250 5.9% 90%;
+    --input: 250 5.9% 90%;
+    --ring: 267 75% 64%;
     --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   .dark {
-    --background: 240 10% 3.9%;
+    --background: 250 10% 3.9%;
     --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
+    --card: 250 10% 3.9%;
     --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
+    --popover: 250 10% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --primary: 327 66% 69%;
-    --primary-foreground: 337 65.5% 17.1%;
-    --secondary: 240 3.7% 15.9%;
+    --primary: 267 75% 64%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 250 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
+    --muted: 250 3.7% 15.9%;
+    --muted-foreground: 250 5% 64.9%;
+    --accent: 267 75% 35%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 85.7% 97.3%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
+    --border: 250 3.7% 15.9%;
+    --input: 250 3.7% 15.9%;
+    --ring: 267 75% 64%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
diff --git a/apps/embed-v1/src/app/layout.tsx b/apps/embed-v1/src/app/layout.tsx
index e5bc6a5..dcb17aa 100644
--- a/apps/embed-v1/src/app/layout.tsx
+++ b/apps/embed-v1/src/app/layout.tsx
@@ -1,9 +1,9 @@
 import type { Metadata, Viewport } from "next";
 import { GeistMono } from "geist/font/mono";
 import { GeistSans } from "geist/font/sans";
+import { ThemeProvider } from "next-themes";
 
 import { cn } from "@acme/ui";
-import { ThemeProvider } from "@acme/ui/theme";
 import { Toaster } from "@acme/ui/toast";
 
 import { TRPCReactProvider } from "~/trpc/react";
@@ -50,7 +50,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
           GeistMono.variable,
         )}
       >
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <ThemeProvider attribute="class" defaultTheme="white">
           <TRPCReactProvider>{props.children}</TRPCReactProvider>
           <Toaster />
         </ThemeProvider>
diff --git a/apps/embed-v1/src/app/m/[orgName]/page.tsx b/apps/embed-v1/src/app/m/[orgName]/page.tsx
new file mode 100644
index 0000000..9eb6094
--- /dev/null
+++ b/apps/embed-v1/src/app/m/[orgName]/page.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+import NotFound from "@acme/ui/components/404-not-found";
+
+import { getOrgTestimonials } from "~/actions/getOrgTestimonials";
+import MarqueeMain from "~/components/marquee-main";
+import { ReviewCard } from "~/components/review-card";
+
+export default async function TestimonialsPage({
+  params,
+}: {
+  params: { orgName: string };
+}) {
+  const { orgName } = params;
+  const data = await getOrgTestimonials(orgName);
+
+  if (!data || typeof data === "string") return <NotFound />;
+  if (data.testimonials.length === 0) return <NotFound />;
+
+  if (data.testimonials.length < 4) {
+    return (
+      <div className="h-svh columns-[300px] overflow-hidden">
+        {data.testimonials.map((testimonial, index) => (
+          <ReviewCard key={index} data={testimonial} />
+        ))}
+      </div>
+    );
+  }
+
+  // Split testimonials into 5 columns for marquee effect
+  const testimonialsData = data.testimonials.reduce<JSX.Element[][]>(
+    (acc, testimonial, index) => {
+      const columnIndex = index % 5;
+
+      if (!acc[columnIndex]) {
+        acc[columnIndex] = [];
+      }
+
+      acc[columnIndex].push(
+        <ReviewCard
+          key={`testimonial-${columnIndex}-${index}`}
+          data={testimonial}
+        />,
+      );
+      return acc;
+    },
+    [],
+  );
+
+  return (
+    <MarqueeMain data={data.testimonials} testmonials={testimonialsData} />
+  );
+}
diff --git a/apps/embed-v1/src/app/page.tsx b/apps/embed-v1/src/app/page.tsx
index e83ea92..8d9bfbf 100644
--- a/apps/embed-v1/src/app/page.tsx
+++ b/apps/embed-v1/src/app/page.tsx
@@ -1,3 +1,7 @@
 export default function HomePage() {
-  return <main className="">=</main>;
+  return (
+    <main className="flex h-svh items-center justify-center">
+      Nothing to see here
+    </main>
+  );
 }
diff --git a/apps/embed-v1/src/components/marquee-main.tsx b/apps/embed-v1/src/components/marquee-main.tsx
new file mode 100644
index 0000000..fef161a
--- /dev/null
+++ b/apps/embed-v1/src/components/marquee-main.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import React from "react";
+import { useSearchParams } from "next/navigation";
+import { useTheme } from "next-themes";
+
+import { cn } from "@acme/ui";
+
+import type { TestimonialType } from "~/types/schema-types";
+import { Marquee } from "./marquee";
+import { ReviewCard } from "./review-card";
+
+export default function MarqueeMain({
+  testmonials,
+  data,
+}: {
+  testmonials: JSX.Element[][];
+  data: TestimonialType[];
+}) {
+  const searchParams = useSearchParams();
+  const noMarquee = searchParams.get("no-marquee");
+  const cantainerClassName = searchParams.get("container-classname");
+  const darkTheme = searchParams.get("darktheme");
+
+  const { theme, setTheme } = useTheme();
+
+  // http://localhost:3001/m/zenstream?classname=df%20sdf&theme=dark&marquee=%22true%22
+
+  React.useEffect(() => {
+    if (darkTheme) {
+      setTheme("dark");
+    } else {
+      setTheme("light");
+    }
+  }, [theme, setTheme, darkTheme]);
+
+  if (noMarquee) {
+    return (
+      <>
+        <div className="h-svh w-full columns-[450px] gap-4">
+          {data.map((item) => (
+            <ReviewCard
+              key={item.id}
+              data={item}
+              className="mb-4 break-inside-avoid"
+            />
+          ))}
+          {data.map((item) => (
+            <ReviewCard
+              key={item.id}
+              data={item}
+              className="mb-4 break-inside-avoid"
+            />
+          ))}
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "h-svh columns-[350px] overflow-hidden",
+        cantainerClassName,
+      )}
+    >
+      {testmonials.map((columnData, columnIndex) => (
+        <Marquee
+          key={`marquee-${columnIndex}`}
+          vertical
+          reverse={columnIndex % 2 === 1}
+          className="overflow-hidden [--duration:80s]"
+        >
+          {columnData}
+        </Marquee>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/embed-v1/src/components/marquee.tsx b/apps/embed-v1/src/components/marquee.tsx
new file mode 100644
index 0000000..5574d0e
--- /dev/null
+++ b/apps/embed-v1/src/components/marquee.tsx
@@ -0,0 +1,51 @@
+import { cn } from "@acme/ui";
+
+interface MarqueeProps {
+  className?: string;
+  reverse?: boolean;
+  pauseOnHover?: boolean;
+  children?: React.ReactNode;
+  vertical?: boolean;
+  repeat?: number;
+  [key: string]: unknown;
+}
+
+export function Marquee({
+  className,
+  reverse,
+  pauseOnHover = false,
+  children,
+  vertical = false,
+  repeat = 4,
+  ...props
+}: MarqueeProps) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
+        {
+          "flex-row": !vertical,
+          "flex-col": vertical,
+        },
+        className,
+      )}
+    >
+      {Array(repeat)
+        .fill(0)
+        .map((_, i) => (
+          <div
+            key={i}
+            className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
+              "animate-marquee flex-row": !vertical,
+              "animate-marquee-vertical flex-col": vertical,
+              "group-hover:[animation-play-state:paused]": pauseOnHover,
+              "[animation-direction:reverse]": reverse,
+            })}
+          >
+            {children}
+          </div>
+        ))}
+    </div>
+  );
+}
diff --git a/apps/embed-v1/src/components/review-card.tsx b/apps/embed-v1/src/components/review-card.tsx
new file mode 100644
index 0000000..e2cbf32
--- /dev/null
+++ b/apps/embed-v1/src/components/review-card.tsx
@@ -0,0 +1,54 @@
+import Image from "next/image";
+
+import { cn } from "@acme/ui";
+
+import type { TestimonialType } from "~/types/schema-types";
+
+export const ReviewCard = ({
+  data,
+  className,
+}: {
+  data: TestimonialType;
+  className?: string;
+}) => {
+  return (
+    <figure
+      className={cn(
+        "relative mb-2 cursor-pointer break-before-avoid overflow-hidden rounded-xl border p-4",
+        "border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]",
+        "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]",
+        className,
+      )}
+    >
+      <div className="flex flex-row items-center gap-2">
+        <Image
+          className="rounded-full"
+          width="32"
+          height="32"
+          alt=""
+          src={data.profileImages ?? ""}
+        />
+        <div className="flex flex-col">
+          <figcaption className="text-sm font-medium dark:text-white">
+            {data.authorName}
+          </figcaption>
+          <p className="text-xs font-medium dark:text-white/40">
+            {data.authorEmail}
+          </p>
+        </div>
+      </div>
+      <blockquote className="mt-2 text-sm">{data.message}</blockquote>
+      <div className="mt-4 flex items-center justify-center">
+        {data.reviewImages && (
+          <Image
+            className="mt-4"
+            width="128"
+            height="128"
+            alt=""
+            src={data.reviewImages}
+          />
+        )}
+      </div>
+    </figure>
+  );
+};
diff --git a/apps/embed-v1/src/types/schema-types.tsx b/apps/embed-v1/src/types/schema-types.tsx
new file mode 100644
index 0000000..20b5d9b
--- /dev/null
+++ b/apps/embed-v1/src/types/schema-types.tsx
@@ -0,0 +1,20 @@
+import type { organizationTable, testimonialTable } from "@acme/db/schema";
+
+export interface OrganizationTestimonialType {
+  id: string;
+  ownerId: string;
+  website: string;
+  logo: string | null;
+  organizationName: string;
+  createdAt: Date;
+  updatedAt: Date;
+  headerTitle: string;
+  customMessage: string;
+  testimonials: TestimonialType[];
+}
+
+export type OrganizationType = typeof organizationTable.$inferSelect;
+
+export type TestimonialType = typeof testimonialTable.$inferSelect;
+
+export type TestimonialTableType = typeof testimonialTable;
diff --git a/apps/embed-v1/tailwind.config.ts b/apps/embed-v1/tailwind.config.ts
index 17602f6..f3d7063 100644
--- a/apps/embed-v1/tailwind.config.ts
+++ b/apps/embed-v1/tailwind.config.ts
@@ -14,6 +14,20 @@ export default {
         sans: ["var(--font-geist-sans)", ...fontFamily.sans],
         mono: ["var(--font-geist-mono)", ...fontFamily.mono],
       },
+      animation: {
+        marquee: "marquee var(--duration) linear infinite",
+        "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
+      },
+      keyframes: {
+        marquee: {
+          from: { transform: "translateX(0)" },
+          to: { transform: "translateX(calc(-100% - var(--gap)))" },
+        },
+        "marquee-vertical": {
+          from: { transform: "translateY(0)" },
+          to: { transform: "translateY(calc(-100% - var(--gap)))" },
+        },
+      },
     },
   },
 } satisfies Config;
diff --git a/apps/www/src/app/(main)/(dashborad)/products/[id]/(Settings)/delete-this-space/page.tsx b/apps/www/src/app/(main)/(dashborad)/products/[id]/(Settings)/delete-this-space/page.tsx
index 213e487..ca27d0d 100644
--- a/apps/www/src/app/(main)/(dashborad)/products/[id]/(Settings)/delete-this-space/page.tsx
+++ b/apps/www/src/app/(main)/(dashborad)/products/[id]/(Settings)/delete-this-space/page.tsx
@@ -13,7 +13,7 @@ export default async function page({ params }: { params: { id: string } }) {
   }
 
   return (
-    <div>
+    <div className="w-full">
       <div className="rounded-lg border border-red-700 bg-zinc-900/50">
         <div className="p-3 md:p-6">
           <div className="mb-4 text-2xl font-semibold">Delete my account</div>
diff --git a/apps/www/src/app/(main)/(dashborad)/products/[id]/(Settings)/edit-this-space/page.tsx b/apps/www/src/app/(main)/(dashborad)/products/[id]/(Settings)/edit-this-space/page.tsx
index bbad24c..eb9a4f2 100644
--- a/apps/www/src/app/(main)/(dashborad)/products/[id]/(Settings)/edit-this-space/page.tsx
+++ b/apps/www/src/app/(main)/(dashborad)/products/[id]/(Settings)/edit-this-space/page.tsx
@@ -13,7 +13,7 @@ export default async function page({ params }: { params: { id: string } }) {
   }
 
   return (
-    <div>
+    <div className="w-full">
       <EditSpace data={data} />
     </div>
   );
diff --git a/apps/www/src/app/(main)/(dashborad)/products/[id]/(embeddings)/embed-doc/page.tsx b/apps/www/src/app/(main)/(dashborad)/products/[id]/(embeddings)/embed-doc/page.tsx
new file mode 100644
index 0000000..88d710d
--- /dev/null
+++ b/apps/www/src/app/(main)/(dashborad)/products/[id]/(embeddings)/embed-doc/page.tsx
@@ -0,0 +1,129 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@acme/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@acme/ui/table";
+
+export default function TestimonialEmbedDocs() {
+  const queryParams = [
+    {
+      name: "no-marquee",
+      type: "boolean",
+      description:
+        "When set, displays testimonials in a static grid layout instead of a marquee.",
+      example: "?no-marquee=true",
+    },
+    {
+      name: "container-classname",
+      type: "string",
+      description: "Applies additional CSS classes to the container div.",
+      example: "?container-classname=my-custom-class",
+    },
+    {
+      name: "darktheme",
+      type: "boolean",
+      description: "Forces the dark theme when set.",
+      example: "?darktheme=true",
+    },
+    {
+      name: "theme",
+      type: "string",
+      description: "Sets the theme explicitly. Can be 'light' or 'dark'.",
+      example: "?theme=dark",
+    },
+    {
+      name: "marquee",
+      type: "string",
+      description: "Controls marquee behavior. Set to 'true' to enable.",
+      example: '?marquee="true"',
+    },
+  ];
+
+  return (
+    <div className="w-full p-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>Testimonial Embed Documentation</CardTitle>
+          <CardDescription>
+            Customize your testimonial embed using these query parameters
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Parameter</TableHead>
+                <TableHead>Type</TableHead>
+                <TableHead>Description</TableHead>
+                <TableHead>Example</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {queryParams.map((param) => (
+                <TableRow key={param.name}>
+                  <TableCell className="font-medium">{param.name}</TableCell>
+                  <TableCell>{param.type}</TableCell>
+                  <TableCell>{param.description}</TableCell>
+                  <TableCell>
+                    <code>{param.example}</code>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+
+          <div className="mt-6">
+            <h3 className="mb-2 text-lg font-semibold">Usage Examples</h3>
+            <ul className="list-inside list-disc space-y-2">
+              <li className="rounded-md bg-zinc-900 p-2">
+                <code>http://localhost:3001/m/zenstream?no-marquee=true</code>
+                <p className="ml-6 text-sm text-gray-400">
+                  Displays testimonials in a static grid layout
+                </p>
+              </li>
+              <li className="rounded-md bg-zinc-900 p-2">
+                <code>http://localhost:3001/m/zenstream?darktheme=true</code>
+                <p className="ml-6 text-sm text-gray-400">
+                  Forces the dark theme
+                </p>
+              </li>
+              <li className="rounded-md bg-zinc-900 p-2">
+                <code>
+                  http://localhost:3001/m/zenstream?container-classname=custom-container&theme=dark&marquee="true"
+                </code>
+                <p className="ml-6 text-sm text-gray-400">
+                  Applies a custom class, sets dark theme, and enables marquee
+                </p>
+              </li>
+            </ul>
+          </div>
+
+          <div className="mt-6">
+            <h3 className="mb-2 text-lg font-semibold">Notes</h3>
+            <ul className="list-inside list-disc space-y-2">
+              <li>Parameters can be combined using the & symbol.</li>
+              <li>
+                Boolean parameters are considered true when present, regardless
+                of their value.
+              </li>
+              <li>
+                The 'theme' parameter takes precedence over 'darktheme' if both
+                are provided.
+              </li>
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/www/src/app/(main)/(dashborad)/products/[id]/(embeddings)/embed/page.tsx b/apps/www/src/app/(main)/(dashborad)/products/[id]/(embeddings)/embed/page.tsx
new file mode 100644
index 0000000..3d20cfc
--- /dev/null
+++ b/apps/www/src/app/(main)/(dashborad)/products/[id]/(embeddings)/embed/page.tsx
@@ -0,0 +1,5 @@
+import Embedding from "~/components/embeddings/embedding";
+
+export default function page({ params }: { params: { id: string } }) {
+  return <Embedding website={params.id} />;
+}
diff --git a/apps/www/src/app/(main)/(dashborad)/products/[id]/(pages)/_components/show-case-links.tsx b/apps/www/src/app/(main)/(dashborad)/products/[id]/(pages)/_components/show-case-links.tsx
index 5a52634..5fca490 100644
--- a/apps/www/src/app/(main)/(dashborad)/products/[id]/(pages)/_components/show-case-links.tsx
+++ b/apps/www/src/app/(main)/(dashborad)/products/[id]/(pages)/_components/show-case-links.tsx
@@ -16,7 +16,7 @@ export default function ShowCaseLink({
   const domain = document.location.origin;
   return (
     <div>
-      <div className="font-bold">On our hosted page</div>
+      <div className="w-full font-bold">On our hosted page</div>
       <div className="mt-2 flex items-center justify-between gap-2 rounded-md bg-zinc-700/30">
         <div className="flex w-full items-center justify-between p-1 font-mono text-white">
           <div className="cursor-pointer text-primary">{`${domain}/${name}/${page}`}</div>
diff --git a/apps/www/src/app/(main)/(dashborad)/products/[id]/(pages)/request-testimonial/page.tsx b/apps/www/src/app/(main)/(dashborad)/products/[id]/(pages)/request-testimonial/page.tsx
index 0b61ef4..8a8092a 100644
--- a/apps/www/src/app/(main)/(dashborad)/products/[id]/(pages)/request-testimonial/page.tsx
+++ b/apps/www/src/app/(main)/(dashborad)/products/[id]/(pages)/request-testimonial/page.tsx
@@ -4,7 +4,7 @@ import ShowCaseLink from "../_components/show-case-links";
 
 export default function page({ params }: { params: { id: string } }) {
   return (
-    <div className="p-5">
+    <div className="w-full p-5">
       <h1 className="text-3xl font-bold">Request Testimonial</h1>
       <div className="mt-2 text-sm">
         Share this link with your clients or customers to request testimonials
diff --git a/apps/www/src/app/(main)/(dashborad)/products/[id]/(pages)/wall-of-fame/page.tsx b/apps/www/src/app/(main)/(dashborad)/products/[id]/(pages)/wall-of-fame/page.tsx
index a7a77b8..524c279 100644
--- a/apps/www/src/app/(main)/(dashborad)/products/[id]/(pages)/wall-of-fame/page.tsx
+++ b/apps/www/src/app/(main)/(dashborad)/products/[id]/(pages)/wall-of-fame/page.tsx
@@ -4,7 +4,7 @@ import ShowCaseLink from "../_components/show-case-links";
 
 export default function page({ params }: { params: { id: string } }) {
   return (
-    <div className="p-5">
+    <div className="w-full p-5">
       <h1 className="text-3xl font-bold">Wall 0f Fame</h1>
       <div className="mt-2 text-sm">share you wall of fame</div>
       <div className="mt-4 flex flex-col gap-4 rounded-md bg-zinc-800/50 p-6">
diff --git a/apps/www/src/app/(main)/(dashborad)/products/[id]/layout.tsx b/apps/www/src/app/(main)/(dashborad)/products/[id]/layout.tsx
index 54ea282..ae54672 100644
--- a/apps/www/src/app/(main)/(dashborad)/products/[id]/layout.tsx
+++ b/apps/www/src/app/(main)/(dashborad)/products/[id]/layout.tsx
@@ -17,9 +17,9 @@ export default async function Layout({
   }
   return (
     <div className="max-w-screen-2xl p-2 md:p-0">
-      <SidebarProvider defaultOpen className="min-h-fit">
-        <AppSidebar className="h-[calc(100svh-3rem)] md:inset-y-12 2xl:inset-x-48" />
-        <main className="min-h-[calc(100svh-4rem)] w-full rounded-md border-[1px] bg-zinc-100/60 p-2 shadow-xl dark:bg-zinc-900/40">
+      <SidebarProvider defaultOpen className="flex">
+        <main className="flex min-h-[calc(100svh-4rem)] w-full rounded-md border-[1px] bg-zinc-100/60 p-2 shadow-xl dark:bg-zinc-900/40">
+          <AppSidebar className="fixed h-[calc(100svh-3rem)] md:inset-y-14 2xl:inset-x-48" />
           <div className="md:hidden">
             <SidebarTrigger />
           </div>
diff --git a/apps/www/src/components/embeddings/embedding.tsx b/apps/www/src/components/embeddings/embedding.tsx
new file mode 100644
index 0000000..1f37049
--- /dev/null
+++ b/apps/www/src/components/embeddings/embedding.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import React, { useState } from "react";
+
+import { Button } from "@acme/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@acme/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@acme/ui/tabs";
+
+const HighlightedCode = ({ code }: { code: string }) => (
+  <pre className="overflow-x-auto rounded-md bg-zinc-800 p-4 text-blue-200">
+    <code>{code}</code>
+  </pre>
+);
+
+export default function Embedding({ website }: { website: string }) {
+  const [showEmbed, setShowEmbed] = useState<boolean>(true);
+
+  const embedCode = `<iframe
+  src="http://localhost:3001/m/${website}"
+  width="1000px"
+  height="500px"
+  style={{
+    border: "none",
+    borderRadius: "10px",
+    backgroundColor: "white",
+  }}
+/>`;
+  return (
+    <div className="w-full p-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>Testimonial Embed Demo</CardTitle>
+          <CardDescription>
+            See how to embed testimonials in your website
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Tabs defaultValue="preview">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="preview">Preview</TabsTrigger>
+              <TabsTrigger value="code">Code</TabsTrigger>
+            </TabsList>
+            <TabsContent value="preview" className="space-y-4">
+              <div className="flex items-center justify-between">
+                <h3 className="text-lg font-semibold">Live Preview</h3>
+                <Button onClick={() => setShowEmbed(!showEmbed)}>
+                  {showEmbed ? "Hide Embed" : "Show Embed"}
+                </Button>
+              </div>
+              {showEmbed && (
+                <iframe
+                  src={`http://localhost:3001/m/${website}`}
+                  width="100%"
+                  height="610px"
+                  style={{
+                    border: "none",
+                    borderRadius: "10px",
+                    backgroundColor: "white",
+                  }}
+                />
+              )}
+            </TabsContent>
+            <TabsContent value="code" className="space-y-4">
+              <h3 className="text-lg font-semibold">Embed Code</h3>
+              <HighlightedCode code={embedCode} />
+              <div className="mt-4 space-y-2">
+                <h4 className="font-semibold">How to use:</h4>
+                <ol className="list-inside list-decimal space-y-1">
+                  <li>Copy the code above</li>
+                  <li>
+                    Paste it into your HTML where you want the testimonials to
+                    appear
+                  </li>
+                  <li>Adjust the width and height as needed</li>
+                  <li>
+                    Replace 'http://localhost:3001' with your actual domain if
+                    different
+                  </li>
+                </ol>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/www/src/components/products/app-sidebar.tsx b/apps/www/src/components/products/app-sidebar.tsx
index 8d4e610..24ce1f6 100644
--- a/apps/www/src/components/products/app-sidebar.tsx
+++ b/apps/www/src/components/products/app-sidebar.tsx
@@ -5,12 +5,14 @@ import { usePathname } from "next/navigation";
 import {
   ArchiveIcon,
   ArrowBigLeft,
+  Book,
   Calendar,
   Edit,
   Heart,
   Home,
   Inbox,
   LucideDelete,
+  Pin,
   TicketsPlane,
 } from "lucide-react";
 
@@ -75,6 +77,19 @@ const spaceSettings = [
   },
 ];
 
+const embeddings = [
+  {
+    title: "embed",
+    url: "embed",
+    icon: Pin,
+  },
+  {
+    title: "embed-doc",
+    url: "embed-doc",
+    icon: Book,
+  },
+];
+
 export function AppSidebar({ className }: { className?: string }) {
   const path = usePathname().split("/");
   return (
@@ -114,6 +129,23 @@ export function AppSidebar({ className }: { className?: string }) {
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroupLabel>Embeddings</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {embeddings.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <Link href={`/products/${path[2]}/${item.url}`}>
+                      <item.icon className="mr-2 h-4 w-4" />
+                      <span>{item.title}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
         <SidebarGroup>
           <SidebarGroupLabel>Settings</SidebarGroupLabel>
           <SidebarGroupContent>
diff --git a/packages/api/src/types/database-type.ts b/packages/api/src/types/database-type.ts
new file mode 100644
index 0000000..20b5d9b
--- /dev/null
+++ b/packages/api/src/types/database-type.ts
@@ -0,0 +1,20 @@
+import type { organizationTable, testimonialTable } from "@acme/db/schema";
+
+export interface OrganizationTestimonialType {
+  id: string;
+  ownerId: string;
+  website: string;
+  logo: string | null;
+  organizationName: string;
+  createdAt: Date;
+  updatedAt: Date;
+  headerTitle: string;
+  customMessage: string;
+  testimonials: TestimonialType[];
+}
+
+export type OrganizationType = typeof organizationTable.$inferSelect;
+
+export type TestimonialType = typeof testimonialTable.$inferSelect;
+
+export type TestimonialTableType = typeof testimonialTable;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index ad1da57..a368231 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -38,6 +38,7 @@
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
     "class-variance-authority": "^0.7.0",
     "next-themes": "^0.3.0",
diff --git a/packages/ui/src/sidebar.tsx b/packages/ui/src/sidebar.tsx
index 6eaa9a0..ed2e494 100644
--- a/packages/ui/src/sidebar.tsx
+++ b/packages/ui/src/sidebar.tsx
@@ -245,7 +245,7 @@ const Sidebar = React.forwardRef<
         />
         <div
           className={cn(
-            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            "inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
             side === "left"
               ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
               : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
diff --git a/packages/ui/src/table.tsx b/packages/ui/src/table.tsx
new file mode 100644
index 0000000..7f9ef5e
--- /dev/null
+++ b/packages/ui/src/table.tsx
@@ -0,0 +1,120 @@
+import * as React from "react";
+
+import { cn } from "@acme/ui";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
diff --git a/packages/ui/src/tabs.tsx b/packages/ui/src/tabs.tsx
new file mode 100644
index 0000000..5d96fc7
--- /dev/null
+++ b/packages/ui/src/tabs.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@acme/ui";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/packages/ui/src/theme.tsx b/packages/ui/src/theme.tsx
index 4585c67..d827616 100644
--- a/packages/ui/src/theme.tsx
+++ b/packages/ui/src/theme.tsx
@@ -59,4 +59,4 @@ function ThemeToggle() {
   );
 }
 
-export { ThemeProvider, ThemeToggle };
+export { ThemeProvider, ThemeToggle, useTheme };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 53ce1d4..e6dd48e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -440,6 +440,9 @@ importers:
       '@radix-ui/react-slot':
         specifier: ^1.1.0
         version: 1.1.0(@types/react@18.3.11)(react@18.3.1)
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tooltip':
         specifier: ^1.1.3
         version: 1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1741,6 +1744,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-tabs@1.1.1':
+    resolution: {integrity: sha512-3GBUDmP2DvzmtYLMsHmpA1GtR46ZDZ+OreXM/N+kkQJOPIgytFWWTfDQmBQKBvaFS0Vno0FktdbVzN28KGrMdw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-tooltip@1.1.3':
     resolution: {integrity: sha512-Z4w1FIS0BqVFI2c1jZvb/uDVJijJjJ2ZMuPV81oVgTZ7g3BZxobplnMVvXtFWgtozdvYJ+MFWtwkM5S2HnAong==}
     peerDependencies:
@@ -5524,6 +5540,22 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.11
 
+  '@radix-ui/react-tabs@1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.11)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.11)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.11)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.11)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.11
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/react-tooltip@1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.0