diff --git a/apps/api/.env.example b/apps/api/.env.example
index 12e24a40..3deafe1e 100644
--- a/apps/api/.env.example
+++ b/apps/api/.env.example
@@ -30,3 +30,6 @@ ZEPTOMAIL_TOKEN=zeptomail-token
 # key for the encryption
 # can be created by running this: echo "$(openssl rand -hex 32)opensox$(openssl rand -hex 16)"
 ENCRYPTION_KEY=encryption-key
+
+
+REDIS_URL=redis://localhost:6379
\ No newline at end of file
diff --git a/apps/api/package.json b/apps/api/package.json
index 628886a5..d22dc57b 100644
--- a/apps/api/package.json
+++ b/apps/api/package.json
@@ -39,4 +39,4 @@
     "zeptomail": "^6.2.1",
     "zod": "^4.1.9"
   }
-}
+}
\ No newline at end of file
diff --git a/apps/api/prisma/schema.prisma b/apps/api/prisma/schema.prisma
index 2bf9695f..10b1c062 100644
--- a/apps/api/prisma/schema.prisma
+++ b/apps/api/prisma/schema.prisma
@@ -42,6 +42,19 @@ model User {
   accounts       Account[]
   payments       Payment[]
   subscriptions  Subscription[]
+  testimonial    Testimonial?
+}
+
+model Testimonial {
+  id         String   @id @default(cuid())
+  userId     String   @unique
+  content    String
+  name       String
+  avatar     String
+  socialLink String?
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+  user       User     @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
 
 model Account {
diff --git a/apps/api/src/routers/_app.ts b/apps/api/src/routers/_app.ts
index 782b4361..dde653c5 100644
--- a/apps/api/src/routers/_app.ts
+++ b/apps/api/src/routers/_app.ts
@@ -4,6 +4,7 @@ import { userRouter } from "./user.js";
 import { projectRouter } from "./projects.js";
 import { authRouter } from "./auth.js";
 import { paymentRouter } from "./payment.js";
+import { testimonialRouter } from "./testimonial.js";
 import { z } from "zod";
 
 const testRouter = router({
@@ -21,6 +22,7 @@ export const appRouter = router({
   project: projectRouter,
   auth: authRouter,
   payment: paymentRouter,
+  testimonial: testimonialRouter,
 });
 
 export type AppRouter = typeof appRouter;
diff --git a/apps/api/src/routers/testimonial.ts b/apps/api/src/routers/testimonial.ts
new file mode 100644
index 00000000..ca2d59bc
--- /dev/null
+++ b/apps/api/src/routers/testimonial.ts
@@ -0,0 +1,106 @@
+import { router, protectedProcedure, publicProcedure } from "../trpc.js";
+import { z } from "zod";
+import { userService } from "../services/user.service.js";
+import { TRPCError } from "@trpc/server";
+import { validateAvatarUrl } from "../utils/avatar-validator.js";
+
+export const testimonialRouter = router({
+    getAll: publicProcedure.query(async ({ ctx }: any) => {
+        // Fetch testimonials directly from database without caching
+        const testimonials = await ctx.db.prisma.testimonial.findMany({
+            orderBy: {
+                createdAt: 'desc',
+            },
+        });
+
+        return testimonials;
+    }),
+
+    getMyTestimonial: protectedProcedure.query(async ({ ctx }: any) => {
+        const userId = ctx.user.id;
+
+        // Check subscription
+        const { isPaidUser } = await userService.checkSubscriptionStatus(ctx.db.prisma, userId);
+
+        if (!isPaidUser) {
+            throw new TRPCError({
+                code: "FORBIDDEN",
+                message: "Only premium users can submit testimonials",
+            });
+        }
+
+        const testimonial = await ctx.db.prisma.testimonial.findUnique({
+            where: { userId },
+        });
+
+        return {
+            testimonial,
+        };
+    }),
+
+    submit: protectedProcedure
+        .input(z.object({
+            name: z.string().min(1, "Name is required").max(40, "Name must be at most 40 characters"),
+            content: z.string().min(10, "Testimonial must be at least 10 characters").max(1000, "Testimonial must be at most 1000 characters"),
+            avatar: z.string().url("Invalid avatar URL"),
+            socialLink: z.string().url("Invalid social link URL").refine((url) => {
+                const supportedPlatforms = [
+                    'twitter.com',
+                    'x.com',
+                    'linkedin.com',
+                    'instagram.com',
+                    'youtube.com',
+                    'youtu.be',
+                ];
+                try {
+                    const parsedUrl = new URL(url);
+                    return supportedPlatforms.some(platform => 
+                        parsedUrl.hostname === platform || 
+                        parsedUrl.hostname.endsWith('.' + platform)
+                    );
+                } catch {
+                    return false;
+                }
+            }, "Only Twitter/X, LinkedIn, Instagram, and YouTube links are supported").optional().or(z.literal('')),
+        }))
+        .mutation(async ({ ctx, input }: any) => {
+            const userId = ctx.user.id;
+
+            const { isPaidUser } = await userService.checkSubscriptionStatus(ctx.db.prisma, userId);
+            if (!isPaidUser) {
+                throw new TRPCError({
+                    code: "FORBIDDEN",
+                    message: "Only premium users can submit testimonials",
+                });
+            }
+
+
+
+            // Check if testimonial already exists - prevent updates
+            const existingTestimonial = await ctx.db.prisma.testimonial.findUnique({
+                where: { userId },
+            });
+
+            if (existingTestimonial) {
+                throw new TRPCError({
+                    code: "BAD_REQUEST",
+                    message: "You have already submitted a testimonial. Testimonials cannot be edited once submitted.",
+                });
+            }
+
+            // Validate avatar URL with strict security checks
+            await validateAvatarUrl(input.avatar);
+
+            const result = await ctx.db.prisma.testimonial.create({
+                data: {
+                    userId,
+                    name: input.name,
+                    content: input.content,
+                    avatar: input.avatar,
+                    socialLink: input.socialLink || null,
+                },
+            });
+
+            return result;
+        }),
+});
diff --git a/apps/api/src/routers/user.ts b/apps/api/src/routers/user.ts
index 94205d01..051cd2f6 100644
--- a/apps/api/src/routers/user.ts
+++ b/apps/api/src/routers/user.ts
@@ -34,5 +34,5 @@ export const userRouter = router({
         userId,
         input.completedSteps
       );
-  }),
+    }),
 });
diff --git a/apps/api/src/services/payment.service.ts b/apps/api/src/services/payment.service.ts
index 85afa82a..b3f99324 100644
--- a/apps/api/src/services/payment.service.ts
+++ b/apps/api/src/services/payment.service.ts
@@ -15,7 +15,7 @@ interface CreateOrderInput {
   notes?: Record<string, string>;
 }
 
-interface RazorpayOrderSuccess {
+export interface RazorpayOrderSuccess {
   amount: number;
   amount_due: number;
   amount_paid: number;
diff --git a/apps/api/src/trpc.ts b/apps/api/src/trpc.ts
index d9049676..c11611bc 100644
--- a/apps/api/src/trpc.ts
+++ b/apps/api/src/trpc.ts
@@ -2,12 +2,16 @@ import { initTRPC, TRPCError } from "@trpc/server";
 import superjson from "superjson";
 import type { Context } from "./context.js";
 import { verifyToken } from "./utils/auth.js";
+import type { User } from "@prisma/client";
+
+// Type for context after authentication middleware
+type ProtectedContext = Context & { user: User };
 
 const t = initTRPC.context<Context>().create({
   transformer: superjson,
 });
 
-const isAuthed = t.middleware(async ({ ctx, next }) => {
+const isAuthed = t.middleware<{ ctx: ProtectedContext }>(async ({ ctx, next }) => {
   const authHeader = ctx.req.headers.authorization;
 
   if (!authHeader || !authHeader.startsWith("Bearer ")) {
@@ -25,7 +29,7 @@ const isAuthed = t.middleware(async ({ ctx, next }) => {
       ctx: {
         ...ctx,
         user,
-      },
+      } as ProtectedContext,
     });
   } catch (error) {
     throw new TRPCError({
@@ -37,4 +41,4 @@ const isAuthed = t.middleware(async ({ ctx, next }) => {
 
 export const router = t.router;
 export const publicProcedure = t.procedure;
-export const protectedProcedure:any = t.procedure.use(isAuthed);
+export const protectedProcedure = t.procedure.use(isAuthed);
diff --git a/apps/api/src/utils/avatar-validator.ts b/apps/api/src/utils/avatar-validator.ts
new file mode 100644
index 00000000..ddeee55f
--- /dev/null
+++ b/apps/api/src/utils/avatar-validator.ts
@@ -0,0 +1,172 @@
+import { TRPCError } from "@trpc/server";
+import { isIP } from "net";
+
+// Configuration
+const ALLOWED_IMAGE_HOSTS = [
+    "avatars.githubusercontent.com",
+    "lh3.googleusercontent.com",
+    "graph.facebook.com",
+    "pbs.twimg.com",
+    "cdn.discordapp.com",
+    "i.imgur.com",
+    "res.cloudinary.com",
+    "ik.imagekit.io",
+    "images.unsplash.com",
+    "ui-avatars.com",
+];
+
+const MAX_IMAGE_SIZE_BYTES = 5 * 1024 * 1024; // 5MB
+const REQUEST_TIMEOUT_MS = 5000; // 5 seconds
+
+// Private IP ranges
+const PRIVATE_IP_RANGES = [
+    /^127\./,                    // 127.0.0.0/8 (localhost)
+    /^10\./,                     // 10.0.0.0/8
+    /^172\.(1[6-9]|2[0-9]|3[0-1])\./, // 172.16.0.0/12
+    /^192\.168\./,               // 192.168.0.0/16
+    /^169\.254\./,               // 169.254.0.0/16 (link-local)
+    /^::1$/,                     // IPv6 localhost
+    /^fe80:/,                    // IPv6 link-local
+    /^fc00:/,                    // IPv6 unique local
+    /^fd00:/,                    // IPv6 unique local
+];
+
+/**
+ * Validates if an IP address is private or localhost
+ */
+function isPrivateOrLocalIP(ip: string): boolean {
+    return PRIVATE_IP_RANGES.some((range) => range.test(ip));
+}
+
+/**
+ * Validates avatar URL with strict security checks
+ * @param avatarUrl - The URL to validate
+ * @throws TRPCError if validation fails
+ */
+export async function validateAvatarUrl(avatarUrl: string): Promise<void> {
+    // Step 1: Basic URL format validation
+    let parsedUrl: URL;
+    try {
+        parsedUrl = new URL(avatarUrl);
+    } catch (error) {
+        throw new TRPCError({
+            code: "BAD_REQUEST",
+            message: "Invalid avatar URL format",
+        });
+    }
+
+    // Step 2: Require HTTPS scheme
+    if (parsedUrl.protocol !== "https:") {
+        throw new TRPCError({
+            code: "BAD_REQUEST",
+            message: "Avatar URL must use HTTPS protocol",
+        });
+    }
+
+    // Step 3: Extract and validate hostname
+    const hostname = parsedUrl.hostname;
+
+    // Step 4: Reject direct IP addresses
+    if (isIP(hostname)) {
+        throw new TRPCError({
+            code: "BAD_REQUEST",
+            message: "Avatar URL cannot be a direct IP address. Please use a trusted image hosting service.",
+        });
+    }
+
+    // Step 5: Check for localhost or private IP ranges
+    if (isPrivateOrLocalIP(hostname)) {
+        throw new TRPCError({
+            code: "BAD_REQUEST",
+            message: "Avatar URL cannot point to localhost or private network addresses",
+        });
+    }
+
+    // Step 6: Validate against allowlist of trusted hosts
+    const isAllowedHost = ALLOWED_IMAGE_HOSTS.some((allowedHost) => {
+        return hostname === allowedHost || hostname.endsWith(`.${allowedHost}`);
+    });
+
+    if (!isAllowedHost) {
+        throw new TRPCError({
+            code: "BAD_REQUEST",
+            message: `Avatar URL must be from a trusted image hosting service. Allowed hosts: ${ALLOWED_IMAGE_HOSTS.join(", ")}`,
+        });
+    }
+
+    // Step 7: Perform server-side HEAD request to validate the resource
+    try {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
+
+        const response = await fetch(avatarUrl, {
+            method: "HEAD",
+            signal: controller.signal,
+            redirect: "error",
+            headers: {
+                "User-Agent": "OpenSox-Avatar-Validator/1.0",
+            },
+        });
+
+        clearTimeout(timeoutId);
+
+        // Check if request was successful
+        if (!response.ok) {
+            throw new TRPCError({
+                code: "BAD_REQUEST",
+                message: `Avatar URL is not accessible (HTTP ${response.status})`,
+            });
+        }
+
+        // Step 8: Validate Content-Type is an image
+        const contentType = response.headers.get("content-type");
+        if (!contentType || !contentType.startsWith("image/")) {
+            throw new TRPCError({
+                code: "BAD_REQUEST",
+                message: `Avatar URL must point to an image file. Received content-type: ${contentType || "unknown"}`,
+            });
+        }
+
+        // Step 9: Validate Content-Length is within limits
+        const contentLength = response.headers.get("content-length");
+        if (contentLength) {
+            const sizeBytes = parseInt(contentLength, 10);
+            if (sizeBytes > MAX_IMAGE_SIZE_BYTES) {
+                throw new TRPCError({
+                    code: "BAD_REQUEST",
+                    message: `Avatar image is too large. Maximum size: ${MAX_IMAGE_SIZE_BYTES / 1024 / 1024}MB`,
+                });
+            }
+        }
+    } catch (error) {
+        // Handle fetch errors
+        if (error instanceof TRPCError) {
+            throw error;
+        }
+
+        if ((error as Error).name === "AbortError") {
+            throw new TRPCError({
+                code: "BAD_REQUEST",
+                message: "Avatar URL validation timed out. The image may be too large or the server is unresponsive.",
+            });
+        }
+
+        throw new TRPCError({
+            code: "BAD_REQUEST",
+            message: `Failed to validate avatar URL: ${(error as Error).message}`,
+        });
+    }
+}
+
+/**
+ * Zod custom refinement for avatar URL validation
+ * Use this with .refine() on a z.string().url() schema
+ */
+export async function avatarUrlRefinement(url: string): Promise<boolean> {
+    try {
+        await validateAvatarUrl(url);
+        return true;
+    } catch (error) {
+        return false;
+    }
+}
diff --git a/apps/api/tsconfig.json b/apps/api/tsconfig.json
index 977def00..697c56dd 100644
--- a/apps/api/tsconfig.json
+++ b/apps/api/tsconfig.json
@@ -4,7 +4,6 @@
     // File Layout
     "rootDir": "./src",
     "outDir": "./dist",
-
     // Environment Settings
     // See also https://aka.ms/tsconfig/module
     "module": "nodenext",
@@ -13,16 +12,13 @@
     // "lib": ["esnext"],
     // "types": ["node"],
     // and npm install -D @types/node
-
     // Other Outputs
     "sourceMap": true,
     "declaration": true,
     "declarationMap": true,
-
     // Stricter Typechecking Options
     "noUncheckedIndexedAccess": true,
     "exactOptionalPropertyTypes": true,
-
     // Style Options
     // "noImplicitReturns": true,
     // "noImplicitOverride": true,
@@ -30,7 +26,6 @@
     // "noUnusedParameters": true,
     // "noFallthroughCasesInSwitch": true,
     // "noPropertyAccessFromIndexSignature": true,
-
     // Recommended Options
     "strict": true,
     "jsx": "react-jsx",
@@ -40,4 +35,4 @@
     "moduleDetection": "force",
     "skipLibCheck": true,
   }
-}
+}
\ No newline at end of file
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index dc6d8137..c021acb8 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -14,6 +14,18 @@ const nextConfig = {
         protocol: "https",
         hostname: "img.youtube.com",
       },
+      {
+        protocol: "https",
+        hostname: "i.pravatar.cc",
+      },
+      {
+        protocol: "https",
+        hostname: "picsum.photos",
+      },
+      {
+        protocol: "https",
+        hostname: "standardcoldpressedoil.com",
+      },
     ],
   },
   experimental: {
diff --git a/apps/web/package.json b/apps/web/package.json
index aaa18cbc..f9bb407d 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.5",
+    "@hookform/resolvers": "^5.2.2",
     "@opensox/shared": "workspace:*",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-checkbox": "^1.1.2",
@@ -36,12 +37,14 @@
     "posthog-js": "^1.203.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.68.0",
     "react-qr-code": "^2.0.18",
     "react-tweet": "^3.2.1",
     "sanitize-html": "^2.11.0",
     "superjson": "^2.2.5",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
+    "zod": "^4.1.9",
     "zustand": "^5.0.1"
   },
   "devDependencies": {
diff --git a/apps/web/src/app/(main)/(landing)/pitch/page.tsx b/apps/web/src/app/(main)/(landing)/pitch/page.tsx
index 21b82b72..e3eb9333 100644
--- a/apps/web/src/app/(main)/(landing)/pitch/page.tsx
+++ b/apps/web/src/app/(main)/(landing)/pitch/page.tsx
@@ -106,7 +106,10 @@ const Pitch = () => {
                 }}
                 className="max-w-4xl mx-auto space-y-4"
               >
-                <h3 id="mission-statement" className="text-2xl lg:text-3xl font-medium text-brand-purple-light font-mono">
+                <h3
+                  id="mission-statement"
+                  className="text-2xl lg:text-3xl font-medium text-brand-purple-light font-mono"
+                >
                   mission statement
                 </h3>
                 <p className="text-text-secondary font-medium text-lg lg:text-xl lowercase">
@@ -134,7 +137,10 @@ const Pitch = () => {
                 }}
                 className="max-w-4xl mx-auto space-y-6"
               >
-                <h3 id="my-goal" className="text-2xl lg:text-3xl font-medium text-brand-purple-light font-mono">
+                <h3
+                  id="my-goal"
+                  className="text-2xl lg:text-3xl font-medium text-brand-purple-light font-mono"
+                >
                   my goal
                 </h3>
                 <p className="text-text-secondary font-medium text-lg lg:text-xl lowercase">
@@ -190,7 +196,10 @@ const Pitch = () => {
                 }}
                 className="max-w-4xl mx-auto space-y-6"
               >
-                <h3 id="the-plan" className="text-2xl lg:text-3xl font-medium text-brand-purple-light font-mono">
+                <h3
+                  id="the-plan"
+                  className="text-2xl lg:text-3xl font-medium text-brand-purple-light font-mono"
+                >
                   the plan
                 </h3>
                 <p className="text-text-secondary font-medium text-lg lg:text-xl lowercase">
@@ -258,13 +267,19 @@ const Pitch = () => {
                 }}
                 className="max-w-4xl mx-auto space-y-8"
               >
-                <h3 id="philosophies" className="text-2xl lg:text-3xl font-medium text-brand-purple-light font-mono">
+                <h3
+                  id="philosophies"
+                  className="text-2xl lg:text-3xl font-medium text-brand-purple-light font-mono"
+                >
                   philosophies i follow
                 </h3>
 
                 {/* Philosophy #1 */}
                 <div className="space-y-4">
-                  <h4 id="stay-small-stay-effective" className="text-xl lg:text-2xl font-medium text-brand-purple-light font-mono">
+                  <h4
+                    id="stay-small-stay-effective"
+                    className="text-xl lg:text-2xl font-medium text-brand-purple-light font-mono"
+                  >
                     #1 stay small. stay effective.
                   </h4>
                   <div className="space-y-4 text-text-secondary font-medium text-lg lowercase">
@@ -303,9 +318,9 @@ const Pitch = () => {
                         </span>
                       </p>
                       <p>
-                        if i go with this approach, i'll have to sacrifice those
-                        fancy dreams of raising millions, being on the front
-                        page of magazines, having millions of users, etc.
+                        if i go with this approach, i&apos;ll have to sacrifice
+                        those fancy dreams of raising millions, being on the
+                        front page of magazines, having millions of users, etc.
                         <br></br>
                         <br></br>
                         but the good part is i&apos;ll be able to stay genuine
@@ -341,7 +356,10 @@ const Pitch = () => {
 
                 {/* Philosophy #2 */}
                 <div className="space-y-4">
-                  <h4 id="go-beyond-what-you-promise" className="text-xl lg:text-2xl font-medium text-brand-purple-light font-mono">
+                  <h4
+                    id="go-beyond-what-you-promise"
+                    className="text-xl lg:text-2xl font-medium text-brand-purple-light font-mono"
+                  >
                     #2 go beyond what you promise.
                   </h4>
                   <div className="space-y-4 text-text-secondary font-medium text-lg lowercase">
@@ -374,7 +392,10 @@ const Pitch = () => {
                 }}
                 className="max-w-4xl mx-auto space-y-6"
               >
-                <h3 id="so-how-small" className="text-2xl lg:text-3xl font-medium text-brand-purple-light font-mono">
+                <h3
+                  id="so-how-small"
+                  className="text-2xl lg:text-3xl font-medium text-brand-purple-light font-mono"
+                >
                   so how small?
                 </h3>
                 <p className="text-text-secondary font-medium text-lg lowercase">
@@ -425,7 +446,10 @@ const Pitch = () => {
                 }}
                 className="max-w-4xl mx-auto space-y-6"
               >
-                <h3 id="testimonials" className="text-2xl lg:text-3xl font-medium text-brand-purple-light font-mono">
+                <h3
+                  id="testimonials"
+                  className="text-2xl lg:text-3xl font-medium text-brand-purple-light font-mono"
+                >
                   what existing investors said about me?
                 </h3>
                 <div className="space-y-4 text-text-secondary font-medium text-lg lowercase">
@@ -458,13 +482,19 @@ const Pitch = () => {
                 }}
                 className="max-w-4xl mx-auto space-y-8"
               >
-                <h3 id="questions" className="text-2xl lg:text-3xl font-medium text-brand-purple-light font-mono">
+                <h3
+                  id="questions"
+                  className="text-2xl lg:text-3xl font-medium text-brand-purple-light font-mono"
+                >
                   questions you may have
                 </h3>
 
                 <div className="space-y-8">
                   <div className="space-y-3">
-                    <h4 id="not-beginner" className="text-xl font-medium text-brand-purple-light font-mono">
+                    <h4
+                      id="not-beginner"
+                      className="text-xl font-medium text-brand-purple-light font-mono"
+                    >
                       i&apos;m not an absolute beginner, so how does subscribing
                       to opensox.ai make sense to me?
                     </h4>
@@ -485,7 +515,10 @@ const Pitch = () => {
                   </div>
 
                   <div className="space-y-3">
-                    <h4 id="quality-reduce" className="text-xl font-medium text-brand-purple-light font-mono">
+                    <h4
+                      id="quality-reduce"
+                      className="text-xl font-medium text-brand-purple-light font-mono"
+                    >
                       will the quality of your service reduce as you grow?
                     </h4>
                     <p className="text-text-secondary font-medium text-lg lowercase">
@@ -496,7 +529,10 @@ const Pitch = () => {
                   </div>
 
                   <div className="space-y-3">
-                    <h4 id="how-opensox-pro-helps" className="text-xl font-medium text-brand-purple-light font-mono">
+                    <h4
+                      id="how-opensox-pro-helps"
+                      className="text-xl font-medium text-brand-purple-light font-mono"
+                    >
                       how does opensox.ai pro help me?
                     </h4>
                     <ul className="space-y-2 text-text-secondary font-medium text-lg pl-4 lowercase">
@@ -555,7 +591,10 @@ const Pitch = () => {
                   </div>
 
                   <div className="space-y-3">
-                    <h4 id="time-to-results" className="text-xl font-medium text-brand-purple-light font-mono">
+                    <h4
+                      id="time-to-results"
+                      className="text-xl font-medium text-brand-purple-light font-mono"
+                    >
                       how much time does it take to get the results?
                     </h4>
                     <p className="text-text-secondary font-medium text-lg lowercase">
@@ -572,7 +611,10 @@ const Pitch = () => {
                   </div>
 
                   <div className="space-y-3">
-                    <h4 id="why-trust" className="text-xl font-medium text-brand-purple-light font-mono">
+                    <h4
+                      id="why-trust"
+                      className="text-xl font-medium text-brand-purple-light font-mono"
+                    >
                       why should i trust you?
                     </h4>
                     <p className="text-text-secondary font-medium text-lg lowercase">
@@ -599,7 +641,10 @@ const Pitch = () => {
                   </div>
 
                   <div className="space-y-3">
-                    <h4 id="alternatives" className="text-xl font-medium text-brand-purple-light font-mono">
+                    <h4
+                      id="alternatives"
+                      className="text-xl font-medium text-brand-purple-light font-mono"
+                    >
                       are there any alternatives to what you provide?
                     </h4>
                     <p className="text-text-secondary font-medium text-lg lowercase">
@@ -611,7 +656,10 @@ const Pitch = () => {
                   </div>
 
                   <div className="space-y-3">
-                    <h4 id="difference-from-course" className="text-xl font-medium text-brand-purple-light font-mono">
+                    <h4
+                      id="difference-from-course"
+                      className="text-xl font-medium text-brand-purple-light font-mono"
+                    >
                       what&apos;s the difference between opensox pro and a
                       course?
                     </h4>
@@ -624,7 +672,10 @@ const Pitch = () => {
                   </div>
 
                   <div className="space-y-3">
-                    <h4 id="for-beginners" className="text-xl font-medium text-brand-purple-light font-mono">
+                    <h4
+                      id="for-beginners"
+                      className="text-xl font-medium text-brand-purple-light font-mono"
+                    >
                       is it for an absolute beginner?
                     </h4>
                     <p className="text-text-secondary font-medium text-lg lowercase">
@@ -633,7 +684,10 @@ const Pitch = () => {
                   </div>
 
                   <div className="space-y-3">
-                    <h4 id="when-not-to-invest" className="text-xl font-medium text-brand-purple-light font-mono">
+                    <h4
+                      id="when-not-to-invest"
+                      className="text-xl font-medium text-brand-purple-light font-mono"
+                    >
                       in what cases shouldn&apos;t i invest in opensox pro?
                     </h4>
                     <p className="text-text-secondary font-medium text-lg lowercase">
@@ -649,7 +703,7 @@ const Pitch = () => {
                       </li>
                       <li className="flex items-start gap-3">
                         <CornerDownRight className="size-4 flex-shrink-0 text-[#a472ea] mt-1" />
-                        <span>you don't wanna do it fast</span>
+                        <span>you don&apos;t wanna do it fast</span>
                       </li>
                       <li className="flex items-start gap-3">
                         <CornerDownRight className="size-4 flex-shrink-0 text-[#a472ea] mt-1" />
@@ -663,7 +717,10 @@ const Pitch = () => {
                   </div>
 
                   <div className="space-y-3">
-                    <h4 id="best-in-market" className="text-xl font-medium text-brand-purple-light font-mono">
+                    <h4
+                      id="best-in-market"
+                      className="text-xl font-medium text-brand-purple-light font-mono"
+                    >
                       are you the best in the market?
                     </h4>
                     <p className="text-text-secondary font-medium text-lg lowercase">
diff --git a/apps/web/src/app/(main)/dashboard/pro/dashboard/page.tsx b/apps/web/src/app/(main)/dashboard/pro/dashboard/page.tsx
index fae7f9ba..95fe21ea 100644
--- a/apps/web/src/app/(main)/dashboard/pro/dashboard/page.tsx
+++ b/apps/web/src/app/(main)/dashboard/pro/dashboard/page.tsx
@@ -4,6 +4,7 @@ import { useSubscription } from "@/hooks/useSubscription";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useSession } from "next-auth/react";
+import { trpc } from "@/lib/trpc";
 
 export default function ProDashboardPage() {
   const { isPaidUser, isLoading } = useSubscription();
@@ -12,6 +13,19 @@ export default function ProDashboardPage() {
   const [error, setError] = useState<string | null>(null);
   const [isJoining, setIsJoining] = useState(false);
 
+  // Check if user has already submitted a testimonial
+  const { data: testimonialData } = (
+    trpc as any
+  ).testimonial.getMyTestimonial.useQuery(undefined, {
+    enabled: !!isPaidUser,
+    retry: false,
+    refetchOnWindowFocus: true,
+    refetchOnMount: true,
+    staleTime: 0, // Always fetch fresh data
+  });
+
+  const hasSubmittedTestimonial = !!testimonialData?.testimonial;
+
   useEffect(() => {
     if (!isLoading && !isPaidUser) {
       router.push("/pricing");
@@ -110,13 +124,23 @@ export default function ProDashboardPage() {
         </h1>
         {isPaidUser && (
           <div className="mt-6">
-            <button
-              onClick={handleJoinSlack}
-              disabled={isJoining}
-              className="px-4 py-2 bg-brand-purple hover:bg-brand-purple-light text-text-primary font-medium rounded-lg transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-            >
-              {isJoining ? "Joining..." : "Join Slack"}
-            </button>
+            <div className="flex flex-wrap gap-4 justify-center">
+              <button
+                onClick={handleJoinSlack}
+                disabled={isJoining}
+                className="px-4 py-2 bg-brand-purple hover:bg-brand-purple-light text-text-primary font-medium rounded-lg transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+              >
+                {isJoining ? "Joining..." : "Join Slack"}
+              </button>
+              {!hasSubmittedTestimonial && (
+                <button
+                  onClick={() => router.push("/testimonials/submit")}
+                  className="px-4 py-2 bg-brand-purple hover:bg-brand-purple-light text-text-primary font-medium rounded-lg transition-colors duration-200 text-sm"
+                >
+                  Submit Testimonial
+                </button>
+              )}
+            </div>
             {error && <p className="text-error-text text-sm mt-2">{error}</p>}
           </div>
         )}
diff --git a/apps/web/src/app/(main)/testimonials/page.tsx b/apps/web/src/app/(main)/testimonials/page.tsx
new file mode 100644
index 00000000..81d52139
--- /dev/null
+++ b/apps/web/src/app/(main)/testimonials/page.tsx
@@ -0,0 +1,246 @@
+"use client";
+import React, { useMemo } from "react";
+import Navbar from "@/components/landing-sections/navbar";
+import Footer from "@/components/landing-sections/footer";
+import Image from "next/image";
+import { Twitter, Linkedin, Instagram, Youtube } from "lucide-react";
+
+import { trpc } from "@/lib/trpc";
+import { imageTestimonials } from "@/data/testimonials";
+import { Skeleton } from "@/components/ui/skeleton";
+
+type TestimonialBase = {
+  id: string;
+  type: "text" | "image";
+};
+
+type TextTestimonial = TestimonialBase & {
+  type: "text";
+  content: string;
+  user: {
+    name: string;
+    username?: string; // e.g. @username
+    avatar: string;
+    socialLink?: string;
+  };
+};
+
+type ImageTestimonial = TestimonialBase & {
+  type: "image";
+  imageUrl: string;
+  alt: string;
+};
+
+type Testimonial = TextTestimonial | ImageTestimonial;
+
+// Helper function to get social icon based on URL
+const getSocialIcon = (url: string) => {
+  try {
+    const hostname = new URL(url).hostname;
+    if (hostname.includes("twitter.com") || hostname.includes("x.com")) {
+      return <Twitter className="h-4 w-4" />;
+    }
+    if (hostname.includes("linkedin.com")) {
+      return <Linkedin className="h-4 w-4" />;
+    }
+    if (hostname.includes("instagram.com")) {
+      return <Instagram className="h-4 w-4" />;
+    }
+    if (hostname.includes("youtube.com") || hostname.includes("youtu.be")) {
+      return <Youtube className="h-4 w-4" />;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+};
+
+const TestimonialCard = ({ item }: { item: Testimonial }) => {
+  if (item.type === "image") {
+    return (
+      <div className="mb-4 break-inside-avoid rounded-xl border border-[#252525] bg-neutral-900/50 overflow-hidden hover:border-neutral-700 transition-colors">
+        <div className="relative w-full">
+          <Image
+            src={item.imageUrl}
+            alt={item.alt}
+            width={600}
+            height={400}
+            className="w-full h-auto object-cover"
+          />
+        </div>
+      </div>
+    );
+  }
+
+  const socialIcon = item.user.socialLink
+    ? getSocialIcon(item.user.socialLink)
+    : null;
+
+  return (
+    <div className="mb-4 break-inside-avoid rounded-xl border border-[#252525] bg-neutral-900/50 p-6 hover:border-neutral-700 transition-colors flex flex-col gap-4">
+      <div className="flex items-center gap-3">
+        <div className="relative w-10 h-10 rounded-full overflow-hidden border border-white/10">
+          <Image
+            src={item.user.avatar}
+            alt={item.user.name}
+            fill
+            className="object-cover"
+          />
+        </div>
+        <div className="flex flex-col flex-1">
+          <span className="text-sm font-medium text-white">
+            {item.user.name}
+          </span>
+          {item.user.username && (
+            <span className="text-xs text-neutral-400">
+              {item.user.username}
+            </span>
+          )}
+        </div>
+        {socialIcon && item.user.socialLink && (
+          <a
+            href={item.user.socialLink}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-neutral-400 hover:text-white transition-colors"
+            aria-label="Social profile"
+          >
+            {socialIcon}
+          </a>
+        )}
+      </div>
+      <p className="text-neutral-300 text-sm leading-relaxed">{item.content}</p>
+    </div>
+  );
+};
+
+const TestimonialsPage = () => {
+  // Fetch text testimonials from tRPC
+  const { data: textTestimonialsData, isLoading } =
+    trpc.testimonial.getAll.useQuery();
+
+  // Combine text testimonials from backend with image testimonials from data file
+  const allTestimonials = useMemo(() => {
+    const textTestimonials: TextTestimonial[] = (
+      textTestimonialsData || []
+    ).map(
+      (t: {
+        id: string;
+        content: string;
+        name: string;
+        avatar: string;
+        socialLink?: string;
+      }) => ({
+        id: t.id,
+        type: "text" as const,
+        content: t.content,
+        user: {
+          name: t.name,
+          avatar: t.avatar,
+          socialLink: t.socialLink,
+        },
+      })
+    );
+
+    // Interleave text and image testimonials for better visual distribution
+    const combined: Testimonial[] = [];
+    let imageIndex = 0;
+
+    // Add text testimonials and interleave images every 2-3 items
+    for (let i = 0; i < textTestimonials.length; i++) {
+      combined.push(textTestimonials[i]);
+
+      // Add an image every 2-3 text testimonials
+      if ((i + 1) % 3 === 0 && imageIndex < imageTestimonials.length) {
+        combined.push(imageTestimonials[imageIndex]);
+        imageIndex++;
+      }
+    }
+
+    // Add any remaining image testimonials at the end
+    while (imageIndex < imageTestimonials.length) {
+      combined.push(imageTestimonials[imageIndex]);
+      imageIndex++;
+    }
+
+    return combined;
+  }, [textTestimonialsData]);
+
+  return (
+    <main className="min-h-screen w-full bg-[#101010] text-white font-sans overflow-hidden relative">
+      <Navbar />
+
+      <div className="min-h-screen w-full max-w-[2000px] mx-auto border-x border-[#252525] overflow-hidden pt-32 pb-20 px-4 md:px-6 lg:px-10">
+        {/* Header */}
+        <div className="max-w-2xl mx-auto text-center mb-16 space-y-4">
+          <h1 className="text-4xl md:text-6xl font-semibold tracking-tighter text-white">
+            Loved by <span className="text-purple-500">Developers</span>
+          </h1>
+          <p className="text-lg text-neutral-400">
+            See what the community is saying about how Opensox is changing their
+            open source workflow.
+          </p>
+        </div>
+
+        {/* Loading State */}
+        {isLoading && (
+          <div className="columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-4 space-y-4 mx-auto max-w-7xl">
+            {/* Text testimonial skeleton */}
+            {[...Array(8)].map((_, i) => (
+              <div
+                key={i}
+                className="mb-4 break-inside-avoid rounded-xl border border-[#252525] bg-neutral-900/50 p-6 flex flex-col gap-4"
+              >
+                <div className="flex items-center gap-3">
+                  <Skeleton className="w-10 h-10 rounded-full" />
+                  <div className="flex flex-col gap-2 flex-1">
+                    <Skeleton className="h-4 w-24" />
+                    <Skeleton className="h-3 w-16" />
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <Skeleton className="h-3 w-full" />
+                  <Skeleton className="h-3 w-full" />
+                  <Skeleton className="h-3 w-3/4" />
+                </div>
+              </div>
+            ))}
+            {/* Image testimonial skeleton */}
+            {[...Array(3)].map((_, i) => (
+              <div
+                key={`img-${i}`}
+                className="mb-4 break-inside-avoid rounded-xl border border-[#252525] bg-neutral-900/50 overflow-hidden"
+              >
+                <Skeleton className="w-full h-64" />
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Masonry/Bento Grid */}
+        {!isLoading && allTestimonials.length > 0 && (
+          <div className="columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-4 space-y-4 mx-auto max-w-7xl">
+            {allTestimonials.map((testimonial) => (
+              <TestimonialCard key={testimonial.id} item={testimonial} />
+            ))}
+          </div>
+        )}
+
+        {/* Empty State */}
+        {!isLoading && allTestimonials.length === 0 && (
+          <div className="flex flex-col items-center justify-center min-h-[400px] text-center">
+            <p className="text-neutral-400 text-lg">
+              No testimonials yet. Be the first to share your experience!
+            </p>
+          </div>
+        )}
+      </div>
+
+      <div className="max-w-[2000px] w-full mx-auto">
+        <Footer />
+      </div>
+    </main>
+  );
+};
+
+export default TestimonialsPage;
diff --git a/apps/web/src/app/(main)/testimonials/submit/page.tsx b/apps/web/src/app/(main)/testimonials/submit/page.tsx
new file mode 100644
index 00000000..5b82740b
--- /dev/null
+++ b/apps/web/src/app/(main)/testimonials/submit/page.tsx
@@ -0,0 +1,451 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { trpc } from "@/lib/trpc";
+import { useSubscription } from "@/hooks/useSubscription";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Skeleton } from "@/components/ui/skeleton";
+import Image from "next/image";
+import Navbar from "@/components/landing-sections/navbar";
+import Footer from "@/components/landing-sections/footer";
+import { Loader2, Link as LinkIcon, ArrowLeft } from "lucide-react";
+import { useSession } from "next-auth/react";
+
+// Supported social platforms for validation
+const SUPPORTED_PLATFORMS = [
+  "twitter.com",
+  "x.com",
+  "linkedin.com",
+  "instagram.com",
+  "youtube.com",
+  "youtu.be",
+];
+
+const validateSocialLink = (url: string) => {
+  if (!url) return true; // Empty is allowed (optional)
+  try {
+    const parsedUrl = new URL(url);
+    return SUPPORTED_PLATFORMS.some((platform) =>
+      parsedUrl.hostname.includes(platform)
+    );
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * Schema for testimonial submission
+ */
+const formSchema = z.object({
+  name: z
+    .string()
+    .min(1, "Name is required")
+    .max(40, "Name must be at most 40 characters"),
+  content: z
+    .string()
+    .min(10, "Testimonial must be at least 10 characters")
+    .max(1000, "Testimonial must be at most 1000 characters"),
+  socialLink: z
+    .string()
+    .refine(
+      (val) => !val || validateSocialLink(val),
+      "Only Twitter/X, LinkedIn, Instagram, and YouTube links are supported"
+    )
+    .optional()
+    .or(z.literal("")),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+export default function SubmitTestimonialPage() {
+  const router = useRouter();
+  const { data: session, status: sessionStatus } = useSession();
+  const { isPaidUser, isLoading: isSubscriptionLoading } = useSubscription();
+
+  // Fetch existing testimonial data to check if already submitted
+  const { data, isLoading: isDataLoading } = (
+    trpc as any
+  ).testimonial.getMyTestimonial.useQuery(undefined, {
+    enabled: !!isPaidUser,
+    retry: false,
+    refetchOnWindowFocus: true,
+    refetchOnMount: true,
+    staleTime: 0, // Always fetch fresh data
+  });
+
+  // Check if user already submitted a testimonial
+  const hasSubmittedTestimonial = !!data?.testimonial;
+
+  const [error, setError] = useState<string | null>(null);
+
+  const submitMutation = (trpc as any).testimonial.submit.useMutation({
+    onSuccess: async () => {
+      // Redirect to testimonials page
+      router.push("/testimonials");
+    },
+    onError: (error: any) => {
+      setError(error.message || "Error submitting testimonial");
+    },
+  });
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    watch,
+    formState: { errors, isSubmitting },
+  } = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      content: "",
+      socialLink: "",
+    },
+  });
+
+  const nameValue = watch("name");
+  const contentValue = watch("content");
+  const socialLinkValue = watch("socialLink");
+
+  const displayAvatar = data?.testimonial?.avatar || session?.user?.image;
+
+  // Effect to populate form with user session data (not existing testimonial since editing is disabled)
+  useEffect(() => {
+    if (session?.user && !hasSubmittedTestimonial) {
+      reset({
+        name: session.user.name || "",
+        content: "",
+        socialLink: "",
+      });
+    }
+  }, [session, reset, hasSubmittedTestimonial]);
+
+  const onSubmit = (values: FormValues) => {
+    setError(null); // Clear previous errors
+    if (!displayAvatar) {
+      setError("Profile picture not found. Please log in again.");
+      return;
+    }
+
+    submitMutation.mutate({
+      name: values.name,
+      content: values.content,
+      avatar: displayAvatar,
+      socialLink: values.socialLink || undefined,
+    });
+  };
+
+  // Loading State
+  if (
+    sessionStatus === "loading" ||
+    isSubscriptionLoading ||
+    (isPaidUser && isDataLoading)
+  ) {
+    return (
+      <main className="min-h-screen w-full bg-[#101010] text-white font-sans overflow-hidden flex flex-col relative">
+        <Navbar />
+        <div className="flex-1 w-full max-w-[2000px] mx-auto border-x border-[#252525] flex flex-col pt-32 pb-20 px-4 md:px-6 lg:px-10 mt-10">
+          <div className="max-w-2xl mx-auto w-full space-y-8">
+            <div className="text-center space-y-2">
+              <Skeleton className="h-10 w-3/4 mx-auto bg-neutral-800" />
+              <Skeleton className="h-5 w-1/2 mx-auto bg-neutral-800" />
+            </div>
+
+            <div className="bg-neutral-900/50 border border-[#252525] rounded-2xl p-6 md:p-8 space-y-6">
+              {/* Profile & Name Skeleton */}
+              <div className="space-y-2">
+                <Skeleton className="h-4 w-40 bg-neutral-800" />
+                <div className="flex gap-4 items-start">
+                  <Skeleton className="w-16 h-16 rounded-full bg-neutral-800" />
+                  <div className="flex-1 space-y-2">
+                    <Skeleton className="h-10 w-full bg-neutral-800" />
+                    <Skeleton className="h-3 w-16 bg-neutral-800" />
+                  </div>
+                </div>
+              </div>
+
+              {/* Content Skeleton */}
+              <div className="space-y-2">
+                <Skeleton className="h-4 w-24 bg-neutral-800" />
+                <Skeleton className="h-32 w-full bg-neutral-800" />
+                <Skeleton className="h-3 w-20 bg-neutral-800" />
+              </div>
+
+              {/* Social Link Skeleton */}
+              <div className="space-y-2">
+                <Skeleton className="h-4 w-32 bg-neutral-800" />
+                <Skeleton className="h-10 w-full bg-neutral-800" />
+                <Skeleton className="h-3 w-48 bg-neutral-800" />
+              </div>
+
+              {/* Submit Button Skeleton */}
+              <Skeleton className="h-10 w-full bg-neutral-800" />
+            </div>
+          </div>
+        </div>
+        <div className="max-w-[2000px] w-full mx-auto">
+          <Footer />
+        </div>
+      </main>
+    );
+  }
+
+  // Not Logged In State
+  if (sessionStatus === "unauthenticated") {
+    return (
+      <main className="min-h-screen w-full bg-[#101010] text-white font-sans overflow-hidden flex flex-col relative">
+        <Navbar />
+        <div className="flex-1 flex flex-col items-center justify-center space-y-6 px-4 text-center z-10 pt-24">
+          <div className="w-16 h-16 rounded-full bg-neutral-800 flex items-center justify-center border border-neutral-700 mb-4">
+            <span className="text-2xl">👤</span>
+          </div>
+          <h1 className="text-3xl font-bold tracking-tight">Login Required</h1>
+          <p className="text-neutral-400 max-w-md">
+            You need to be logged in to submit a testimonial. Please log in to
+            your account to continue.
+          </p>
+          <div className="flex gap-4">
+            <Button
+              onClick={() => router.push("/login")}
+              className="bg-purple-600 hover:bg-purple-700 text-white"
+            >
+              Login
+            </Button>
+            <Button
+              onClick={() => router.push("/testimonials")}
+              variant="outline"
+              className="border-[#252525] bg-transparent hover:bg-white/5 text-white"
+            >
+              Back to Testimonials
+            </Button>
+          </div>
+        </div>
+        <div className="w-full max-w-[2000px] mx-auto border-t border-[#252525]">
+          <Footer />
+        </div>
+      </main>
+    );
+  }
+
+  // Access Denied State (Logged in but not paid)
+  if (!isPaidUser) {
+    return (
+      <main className="min-h-screen w-full bg-[#101010] text-white font-sans overflow-hidden flex flex-col relative">
+        <Navbar />
+        <div className="flex-1 flex flex-col items-center justify-center space-y-6 px-4 text-center z-10 pt-24">
+          <div className="w-16 h-16 rounded-full bg-purple-500/10 flex items-center justify-center border border-purple-500/20 mb-4">
+            <span className="text-2xl">🔒</span>
+          </div>
+          <h1 className="text-3xl font-bold tracking-tight">Premium Feature</h1>
+          <p className="text-neutral-400 max-w-md">
+            This feature is exclusively for premium users. Please upgrade your
+            plan to submit a testimonial.
+          </p>
+          <div className="flex gap-4">
+            <Button
+              onClick={() => router.push("/pricing")}
+              className="bg-purple-600 hover:bg-purple-700 text-white"
+            >
+              View Plans
+            </Button>
+            <Button
+              onClick={() => router.push("/testimonials")}
+              variant="outline"
+              className="border-[#252525] bg-transparent hover:bg-white/5 text-white"
+            >
+              Back to Testimonials
+            </Button>
+          </div>
+        </div>
+        <div className="w-full max-w-[2000px] mx-auto border-t border-[#252525]">
+          <Footer />
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen w-full bg-[#101010] text-white font-sans overflow-hidden relative flex flex-col">
+      <Navbar />
+
+      <div className="flex-1 w-full max-w-[2000px] mx-auto border-x border-[#252525] flex flex-col pt-32 pb-20 px-4 md:px-6 lg:px-10 mt-10">
+        <div className="max-w-2xl mx-auto w-full space-y-8">
+          <div className="text-center space-y-2">
+            <h1 className="text-3xl md:text-4xl font-bold tracking-tight">
+              What you think about me?
+            </h1>
+            <p className="text-neutral-400">
+              Share your experience with the community.
+            </p>
+          </div>
+
+          <button
+            onClick={() => router.push("/dashboard/home")}
+            className="flex items-center gap-2 text-sm text-neutral-400 hover:text-white transition-colors mb-4"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            <span>Home</span>
+          </button>
+
+          <div className="bg-neutral-900/50 border border-[#252525] rounded-2xl p-6 md:p-8 space-y-6">
+            {/* Already Submitted State */}
+            {hasSubmittedTestimonial ? (
+              <div className="text-center space-y-4">
+                <div className="w-16 h-16 rounded-full bg-green-500/10 flex items-center justify-center border border-green-500/20 mx-auto">
+                  <span className="text-2xl">✓</span>
+                </div>
+                <h2 className="text-xl font-semibold">
+                  Testimonial Already Submitted
+                </h2>
+                <p className="text-neutral-400">
+                  Thank you! You have already submitted your testimonial.
+                  Testimonials cannot be edited once submitted.
+                </p>
+                <Button
+                  onClick={() => router.push("/testimonials")}
+                  className="bg-purple-600 hover:bg-purple-700 text-white"
+                >
+                  View Testimonials
+                </Button>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+                {/* Profile Picture and Display Name in Same Row */}
+                <div className="space-y-2">
+                  <Label className="text-neutral-300">
+                    Profile & Display Name
+                  </Label>
+                  <div className="flex gap-4 items-start">
+                    <div className="relative w-16 h-16 rounded-full overflow-hidden border border-[#252525] bg-neutral-800 flex-shrink-0">
+                      {displayAvatar ? (
+                        <Image
+                          src={displayAvatar}
+                          alt="Profile Picture"
+                          fill
+                          className="object-cover"
+                          onError={(e) => {
+                            (e.target as HTMLImageElement).src =
+                              `https://i.pravatar.cc/150?u=error`;
+                          }}
+                        />
+                      ) : (
+                        <div className="w-full h-full flex items-center justify-center text-xs text-neutral-500">
+                          No Img
+                        </div>
+                      )}
+                    </div>
+                    <div className="flex-1 space-y-2">
+                      <Input
+                        {...register("name")}
+                        id="name"
+                        placeholder="Your Name"
+                        maxLength={40}
+                        className="bg-neutral-950 border-[#252525] focus:border-purple-500 text-white placeholder:text-neutral-600"
+                      />
+                      <div className="flex justify-between items-center">
+                        {errors.name && (
+                          <p className="text-red-500 text-xs">
+                            {errors.name.message}
+                          </p>
+                        )}
+                        <p className="text-xs text-neutral-500 ml-auto">
+                          {nameValue?.length || 0}/40
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Content Field */}
+                <div className="space-y-2">
+                  <Label htmlFor="content" className="text-neutral-300">
+                    Testimonial
+                  </Label>
+                  <Textarea
+                    {...register("content")}
+                    id="content"
+                    placeholder="Tell us what you think about Opensox..."
+                    maxLength={1000}
+                    className="bg-neutral-950 border-[#252525] focus:border-purple-500 text-white placeholder:text-neutral-600 min-h-[120px]"
+                  />
+                  <div className="flex justify-between items-center">
+                    {errors.content && (
+                      <p className="text-red-500 text-xs">
+                        {errors.content.message}
+                      </p>
+                    )}
+                    <p className="text-xs text-neutral-500 ml-auto">
+                      {contentValue?.length || 0}/1000
+                    </p>
+                  </div>
+                </div>
+
+                {/* Social Link Field (Optional) */}
+                <div className="space-y-2">
+                  <Label htmlFor="socialLink" className="text-neutral-300">
+                    Social Link{" "}
+                    <span className="text-neutral-500">(Optional)</span>
+                  </Label>
+                  <div className="relative">
+                    <div className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500">
+                      <LinkIcon className="h-4 w-4" />
+                    </div>
+                    <Input
+                      {...register("socialLink")}
+                      id="socialLink"
+                      placeholder="https://twitter.com/username"
+                      className="bg-neutral-950 border-[#252525] focus:border-purple-500 text-white placeholder:text-neutral-600 pl-10"
+                    />
+                  </div>
+                  {errors.socialLink && (
+                    <p className="text-red-500 text-xs">
+                      {errors.socialLink.message}
+                    </p>
+                  )}
+                  <p className="text-xs text-neutral-500">
+                    {socialLinkValue
+                      ? "Supported: Twitter/X, LinkedIn, Instagram, YouTube"
+                      : "Add your Twitter, LinkedIn, Instagram, or YouTube profile"}
+                  </p>
+                </div>
+
+                {/* Error Message */}
+                {error && (
+                  <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-lg text-sm text-red-400">
+                    {error}
+                  </div>
+                )}
+
+                <Button
+                  type="submit"
+                  disabled={isSubmitting || submitMutation.isPending}
+                  className="w-full bg-white text-black hover:bg-neutral-200 font-medium"
+                >
+                  {submitMutation.isPending ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Submitting...
+                    </>
+                  ) : (
+                    "Submit Testimonial"
+                  )}
+                </Button>
+              </form>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-[2000px] w-full mx-auto">
+        <Footer />
+      </div>
+    </main>
+  );
+}
diff --git a/apps/web/src/components/checkout/CheckoutWrapper.tsx b/apps/web/src/components/checkout/CheckoutWrapper.tsx
index 2b983016..78c2085b 100644
--- a/apps/web/src/components/checkout/CheckoutWrapper.tsx
+++ b/apps/web/src/components/checkout/CheckoutWrapper.tsx
@@ -1,31 +1,47 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useSubscription } from "@/hooks/useSubscription";
-import { useRouter } from "next/navigation";
+import { redirect } from "next/navigation";
 import CheckoutConfirmation from "./checkout-confirmation";
 
 export default function CheckoutWrapper() {
-  const { isPaidUser, isLoading } = useSubscription();
-  const router = useRouter();
+  const { isPaidUser, isLoading, refetch } = useSubscription();
+  const [retryCount, setRetryCount] = useState(0);
+  const [shouldRedirect, setShouldRedirect] = useState(false);
 
-  // Show loading state while checking subscription
-  if (isLoading) {
+  // Retry fetching subscription status after payment
+  // Payment processing might take a few seconds
+  useEffect(() => {
+    if (!isLoading && !isPaidUser && retryCount < 3) {
+      const timer = setTimeout(() => {
+        refetch?.();
+        setRetryCount((prev) => prev + 1);
+      }, 2000); // Retry every 2 seconds
+
+      return () => clearTimeout(timer);
+    }
+
+    // After 3 retries (6 seconds), if still not paid, redirect
+    if (!isLoading && !isPaidUser && retryCount >= 3) {
+      setShouldRedirect(true);
+    }
+  }, [isPaidUser, isLoading, retryCount, refetch]);
+
+  // Show loading state while checking subscription or retrying
+  if (isLoading || (!isPaidUser && retryCount < 3)) {
     return (
       <div className="flex flex-col h-screen w-full justify-center items-center">
-        <div className="text-white text-xl">Loading...</div>
+        <div className="text-white text-xl">
+          {retryCount > 0 ? "Verifying payment..." : "Loading..."}
+        </div>
       </div>
     );
   }
 
-  // Redirect to pricing if not a paid user
-  if (!isPaidUser) {
-    router.push("/pricing");
-    return (
-      <div className="flex flex-col h-screen w-full justify-center items-center">
-        <div className="text-white text-xl">Redirecting...</div>
-      </div>
-    );
+  // Redirect to pricing if not a paid user after retries
+  if (shouldRedirect && !isPaidUser) {
+    redirect("/pricing");
   }
 
   // Show checkout confirmation for paid users
diff --git a/apps/web/src/components/checkout/checkout-confirmation.tsx b/apps/web/src/components/checkout/checkout-confirmation.tsx
index f3988ca8..dc294ae7 100644
--- a/apps/web/src/components/checkout/checkout-confirmation.tsx
+++ b/apps/web/src/components/checkout/checkout-confirmation.tsx
@@ -74,9 +74,9 @@ const CheckoutConfirmation: React.FC<CheckoutConfirmationProps> = ({
         {/* Main Message */}
         <div className="text-center space-y-6">
           <p className="text-lg lg:text-xl text-white/90 leading-relaxed font-light max-w-3xl mx-auto">
-            Hell yeah, you&apos;ve made it! Congratulations on becoming the
-            Pro member of Opensox AI. Very soon you&apos;ll receive an email
-            with the next steps from our side.
+            Hell yeah, you&apos;ve made it! Congratulations on becoming the Pro
+            member of Opensox AI. Very soon you&apos;ll receive an email with
+            the next steps from our side.
           </p>
 
           <p className="text-lg lg:text-xl text-white/90 leading-relaxed font-light max-w-3xl mx-auto">
diff --git a/apps/web/src/data/testimonials.ts b/apps/web/src/data/testimonials.ts
new file mode 100644
index 00000000..d5996b5a
--- /dev/null
+++ b/apps/web/src/data/testimonials.ts
@@ -0,0 +1,40 @@
+// Image testimonials data
+export type ImageTestimonial = {
+    id: string;
+    type: "image";
+    imageUrl: string;
+    alt: string;
+};
+
+export const imageTestimonials: ImageTestimonial[] = [
+    {
+        id: "img-1",
+        type: "image",
+        imageUrl: "https://picsum.photos/id/101/600/400",
+        alt: "User tweet about Opensox",
+    },
+    {
+        id: "img-2",
+        type: "image",
+        imageUrl: "https://picsum.photos/id/103/500/500",
+        alt: "Screenshot of dashboard stats",
+    },
+    {
+        id: "img-3",
+        type: "image",
+        imageUrl: "https://picsum.photos/id/104/600/350",
+        alt: "Social media shoutout",
+    },
+    {
+        id: "img-4",
+        type: "image",
+        imageUrl: "https://picsum.photos/id/106/400/600",
+        alt: "Mobile view screenshot",
+    },
+    {
+        id: "img-5",
+        type: "image",
+        imageUrl: "https://standardcoldpressedoil.com/wp-content/uploads/2023/04/Loyal-Customer-Strongly-Recommends-Standard-Cold-Pressed-Oil.png",
+        alt: "Mobile view screenshot",
+    },
+];
\ No newline at end of file
diff --git a/apps/web/src/hooks/useSubscription.ts b/apps/web/src/hooks/useSubscription.ts
index 943c3794..8893f4b5 100644
--- a/apps/web/src/hooks/useSubscription.ts
+++ b/apps/web/src/hooks/useSubscription.ts
@@ -25,6 +25,7 @@ export function useSubscription() {
     isLoading: isFetching,
     isError,
     isFetched,
+    refetch,
   } = (trpc.user as any).subscriptionStatus.useQuery(undefined, {
     enabled: !!session?.user && status === "authenticated",
     refetchOnWindowFocus: false,
@@ -73,5 +74,6 @@ export function useSubscription() {
     isPaidUser,
     subscription,
     isLoading,
+    refetch,
   };
 }
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 99459b8f..81635876 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
diff --git a/packages/shared/package.json b/packages/shared/package.json
index ba33c668..08c89ca2 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -8,7 +8,11 @@
     "clean": "rm -rf dist",
     "prepublishOnly": "pnpm run build"
   },
+  "dependencies": {
+    "ioredis": "^5.4.1"
+  },
   "devDependencies": {
+    "@types/node": "^20.0.0",
     "typescript": "^4.9.5"
   }
 }
\ No newline at end of file
diff --git a/packages/shared/types/index.ts b/packages/shared/types/index.ts
index 69a43270..c99b7fb5 100644
--- a/packages/shared/types/index.ts
+++ b/packages/shared/types/index.ts
@@ -1,2 +1,3 @@
 export * from './filter';
-export * from './projects'
\ No newline at end of file
+export * from './projects';
+export * from './redis';
\ No newline at end of file
diff --git a/packages/shared/types/redis.ts b/packages/shared/types/redis.ts
new file mode 100644
index 00000000..6bf6b23b
--- /dev/null
+++ b/packages/shared/types/redis.ts
@@ -0,0 +1,148 @@
+import Redis from "ioredis";
+
+declare global {
+    // eslint-disable-next-line no-var
+    var redis: Redis | undefined;
+}
+
+let redis: Redis | undefined;
+
+/**
+ * Get or create a Redis client instance
+ * Uses singleton pattern in development to prevent multiple connections
+ */
+export function getRedisClient(): Redis | null {
+    // If Redis URL is not configured, return null (graceful degradation)
+    const redisUrl = process.env.REDIS_URL;
+
+    if (!redisUrl) {
+        console.warn("REDIS_URL not configured. Redis caching is disabled.");
+        return null;
+    }
+
+    try {
+        // In development, use global to prevent multiple instances
+        if (process.env.NODE_ENV === "development") {
+            if (!global.redis) {
+                global.redis = new Redis(redisUrl, {
+                    maxRetriesPerRequest: 3,
+                    retryStrategy(times) {
+                        const delay = Math.min(times * 50, 2000);
+                        return delay;
+                    },
+                    lazyConnect: true,
+                });
+
+                global.redis.on("error", (err) => {
+                    console.error("Redis connection error:", err);
+                });
+
+                global.redis.on("connect", () => {
+                    console.log("Redis connected successfully");
+                });
+            }
+            redis = global.redis;
+        } else {
+            // In production, create a new instance if not exists
+            if (!redis) {
+                redis = new Redis(redisUrl, {
+                    maxRetriesPerRequest: 3,
+                    retryStrategy(times) {
+                        const delay = Math.min(times * 50, 2000);
+                        return delay;
+                    },
+                });
+
+                redis.on("error", (err) => {
+                    console.error("Redis connection error:", err);
+                });
+            }
+        }
+
+        return redis;
+    } catch (error) {
+        console.error("Failed to create Redis client:", error);
+        return null;
+    }
+}
+
+/**
+ * Cache helper functions
+ */
+export const redisCache = {
+    /**
+     * Get a value from cache
+     */
+    async get<T>(key: string): Promise<T | null> {
+        const client = getRedisClient();
+        if (!client) return null;
+
+        try {
+            const value = await client.get(key);
+            if (!value) return null;
+            return JSON.parse(value) as T;
+        } catch (error) {
+            console.error(`Redis GET error for key ${key}:`, error);
+            return null;
+        }
+    },
+
+    /**
+     * Set a value in cache with optional TTL (in seconds)
+     */
+    async set(key: string, value: any, ttl?: number): Promise<boolean> {
+        const client = getRedisClient();
+        if (!client) return false;
+
+        try {
+            const serialized = JSON.stringify(value);
+            if (ttl) {
+                await client.setex(key, ttl, serialized);
+            } else {
+                await client.set(key, serialized);
+            }
+            return true;
+        } catch (error) {
+            console.error(`Redis SET error for key ${key}:`, error);
+            return false;
+        }
+    },
+
+    /**
+     * Delete a value from cache
+     * Use this to invalidate a specific cache key after mutations (create, update, delete)
+     * Example: await redisCache.del('testimonials:all') after creating/updating a testimonial
+     */
+    async del(key: string): Promise<boolean> {
+        const client = getRedisClient();
+        if (!client) return false;
+
+        try {
+            await client.del(key);
+            console.log(`Cache invalidated for key: ${key}`);
+            return true;
+        } catch (error) {
+            console.error(`Redis DEL error for key ${key}:`, error);
+            return false;
+        }
+    },
+
+    /**
+     * Delete multiple keys matching a pattern
+     */
+    async delPattern(pattern: string): Promise<boolean> {
+        const client = getRedisClient();
+        if (!client) return false;
+
+        try {
+            const keys = await client.keys(pattern);
+            if (keys.length > 0) {
+                await client.del(...keys);
+            }
+            return true;
+        } catch (error) {
+            console.error(`Redis DEL pattern error for ${pattern}:`, error);
+            return false;
+        }
+    },
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b8a1bf1f..7978ba94 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -130,6 +130,9 @@ importers:
       '@heroicons/react':
         specifier: ^2.1.5
         version: 2.2.0(react@18.3.1)
+      '@hookform/resolvers':
+        specifier: ^5.2.2
+        version: 5.2.2(react-hook-form@7.68.0(react@18.3.1))
       '@opensox/shared':
         specifier: workspace:*
         version: link:../../packages/shared
@@ -208,6 +211,9 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
+      react-hook-form:
+        specifier: ^7.68.0
+        version: 7.68.0(react@18.3.1)
       react-qr-code:
         specifier: ^2.0.18
         version: 2.0.18(react@18.3.1)
@@ -226,6 +232,9 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.18(ts-node@10.9.2(@types/node@20.19.25)(typescript@5.9.3)))
+      zod:
+        specifier: ^4.1.9
+        version: 4.1.13
       zustand:
         specifier: ^5.0.1
         version: 5.0.9(@types/react@18.3.27)(react@18.3.1)(use-sync-external-store@1.5.0(react@18.3.1))
@@ -295,7 +304,14 @@ importers:
         version: 5.9.3
 
   packages/shared:
+    dependencies:
+      ioredis:
+        specifier: ^5.4.1
+        version: 5.8.2
     devDependencies:
+      '@types/node':
+        specifier: ^20.0.0
+        version: 20.19.25
       typescript:
         specifier: ^4.9.5
         version: 4.9.5
@@ -682,6 +698,11 @@ packages:
     peerDependencies:
       react: '>= 16 || ^19.0.0-rc'
 
+  '@hookform/resolvers@5.2.2':
+    resolution: {integrity: sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==}
+    peerDependencies:
+      react-hook-form: ^7.55.0
+
   '@humanwhocodes/config-array@0.13.0':
     resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
     engines: {node: '>=10.10.0'}
@@ -832,6 +853,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@ioredis/commands@1.4.0':
+    resolution: {integrity: sha512-aFT2yemJJo+TZCmieA7qnYGQooOS7QfNmYrzGtsYd3g9j5iDP8AimYYAesf79ohjbLG12XxC4nG5DyEnC88AsQ==}
+
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -1324,6 +1348,9 @@ packages:
   '@rushstack/eslint-patch@1.11.0':
     resolution: {integrity: sha512-zxnHvoMQVqewTJr/W4pKjF0bMGiKJv1WX7bSrkl46Hg0QjESbzBROWK0Wg4RphzSOS5Jiy7eFimmM3UgMrMZbQ==}
 
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
   '@swc/counter@0.1.3':
     resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
 
@@ -2218,6 +2245,10 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  cluster-key-slot@1.1.2:
+    resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
+    engines: {node: '>=0.10.0'}
+
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -2391,6 +2422,10 @@ packages:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
 
+  denque@2.1.0:
+    resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
+    engines: {node: '>=0.10'}
+
   depcheck@1.4.7:
     resolution: {integrity: sha512-1lklS/bV5chOxwNKA/2XUUk/hPORp8zihZsXflr8x0kLwmcZ9Y9BsS6Hs3ssvA+2wUVbG0U2Ciqvm1SokNjPkA==}
     engines: {node: '>=10'}
@@ -3239,6 +3274,10 @@ packages:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
+  ioredis@5.8.2:
+    resolution: {integrity: sha512-C6uC+kleiIMmjViJINWk80sOQw5lEzse1ZmvD+S/s8p8CWapftSaC+kocGTx6xrbrJ4WmYQGC08ffHLr6ToR6Q==}
+    engines: {node: '>=12.22.0'}
+
   ip-address@9.0.5:
     resolution: {integrity: sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==}
     engines: {node: '>= 12'}
@@ -3536,6 +3575,9 @@ packages:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
+  lodash.defaults@4.2.0:
+    resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
+
   lodash.get@4.4.2:
     resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
     deprecated: This package is deprecated. Use the optional chaining (?.) operator instead.
@@ -3543,6 +3585,9 @@ packages:
   lodash.includes@4.3.0:
     resolution: {integrity: sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==}
 
+  lodash.isarguments@3.1.0:
+    resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
+
   lodash.isboolean@3.0.3:
     resolution: {integrity: sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==}
 
@@ -4163,6 +4208,12 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-hook-form@7.68.0:
+    resolution: {integrity: sha512-oNN3fjrZ/Xo40SWlHf1yCjlMK417JxoSJVUXQjGdvdRCU07NTFei1i1f8ApUAts+IVh14e4EdakeLEA+BEAs/Q==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -4200,6 +4251,14 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  redis-errors@1.2.0:
+    resolution: {integrity: sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==}
+    engines: {node: '>=4'}
+
+  redis-parser@3.0.0:
+    resolution: {integrity: sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==}
+    engines: {node: '>=4'}
+
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -4455,6 +4514,9 @@ packages:
   stable-hash@0.0.5:
     resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
 
+  standard-as-callback@2.1.0:
+    resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
+
   statuses@2.0.1:
     resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
     engines: {node: '>= 0.8'}
@@ -5340,6 +5402,11 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  '@hookform/resolvers@5.2.2(react-hook-form@7.68.0(react@18.3.1))':
+    dependencies:
+      '@standard-schema/utils': 0.3.0
+      react-hook-form: 7.68.0(react@18.3.1)
+
   '@humanwhocodes/config-array@0.13.0':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
@@ -5449,6 +5516,8 @@ snapshots:
   '@img/sharp-win32-x64@0.34.5':
     optional: true
 
+  '@ioredis/commands@1.4.0': {}
+
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
@@ -5887,6 +5956,8 @@ snapshots:
 
   '@rushstack/eslint-patch@1.11.0': {}
 
+  '@standard-schema/utils@0.3.0': {}
+
   '@swc/counter@0.1.3': {}
 
   '@swc/helpers@0.5.15':
@@ -5984,11 +6055,11 @@ snapshots:
   '@types/body-parser@1.19.6':
     dependencies:
       '@types/connect': 3.4.38
-      '@types/node': 24.10.1
+      '@types/node': 20.19.25
 
   '@types/connect@3.4.38':
     dependencies:
-      '@types/node': 24.10.1
+      '@types/node': 20.19.25
 
   '@types/cors@2.8.19':
     dependencies:
@@ -6003,7 +6074,7 @@ snapshots:
 
   '@types/express-serve-static-core@4.19.6':
     dependencies:
-      '@types/node': 24.10.1
+      '@types/node': 20.19.25
       '@types/qs': 6.14.0
       '@types/range-parser': 1.2.7
       '@types/send': 0.17.5
@@ -6084,12 +6155,12 @@ snapshots:
   '@types/send@0.17.5':
     dependencies:
       '@types/mime': 1.3.5
-      '@types/node': 24.10.1
+      '@types/node': 20.19.25
 
   '@types/serve-static@1.15.8':
     dependencies:
       '@types/http-errors': 2.0.5
-      '@types/node': 24.10.1
+      '@types/node': 20.19.25
       '@types/send': 0.17.5
 
   '@types/through@0.0.33':
@@ -6928,6 +6999,8 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  cluster-key-slot@1.1.2: {}
+
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -7081,6 +7154,8 @@ snapshots:
 
   delayed-stream@1.0.0: {}
 
+  denque@2.1.0: {}
+
   depcheck@1.4.7:
     dependencies:
       '@babel/parser': 7.27.5
@@ -7360,7 +7435,7 @@ snapshots:
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.5(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
@@ -7377,7 +7452,7 @@ snapshots:
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.48.1(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1)
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.48.1(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.48.1(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.48.1(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.5(eslint@8.57.1)
       eslint-plugin-react-hooks: 7.0.1(eslint@8.57.1)
@@ -7424,7 +7499,7 @@ snapshots:
       tinyglobby: 0.2.15
       unrs-resolver: 1.11.1
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -7454,7 +7529,7 @@ snapshots:
       tinyglobby: 0.2.15
       unrs-resolver: 1.11.1
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.48.1(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.48.1(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.48.1(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -7525,7 +7600,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -7554,7 +7629,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.48.1(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.48.1(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.48.1(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -8295,6 +8370,20 @@ snapshots:
       hasown: 2.0.2
       side-channel: 1.1.0
 
+  ioredis@5.8.2:
+    dependencies:
+      '@ioredis/commands': 1.4.0
+      cluster-key-slot: 1.1.2
+      debug: 4.4.1
+      denque: 2.1.0
+      lodash.defaults: 4.2.0
+      lodash.isarguments: 3.1.0
+      redis-errors: 1.2.0
+      redis-parser: 3.0.0
+      standard-as-callback: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+
   ip-address@9.0.5:
     dependencies:
       jsbn: 1.1.0
@@ -8583,10 +8672,14 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
+  lodash.defaults@4.2.0: {}
+
   lodash.get@4.4.2: {}
 
   lodash.includes@4.3.0: {}
 
+  lodash.isarguments@3.1.0: {}
+
   lodash.isboolean@3.0.3: {}
 
   lodash.isinteger@4.0.4: {}
@@ -9210,6 +9303,10 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-hook-form@7.68.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   react-is@16.13.1: {}
 
   react-qr-code@2.0.18(react@18.3.1):
@@ -9257,6 +9354,12 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  redis-errors@1.2.0: {}
+
+  redis-parser@3.0.0:
+    dependencies:
+      redis-errors: 1.2.0
+
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8
@@ -9589,6 +9692,8 @@ snapshots:
 
   stable-hash@0.0.5: {}
 
+  standard-as-callback@2.1.0: {}
+
   statuses@2.0.1: {}
 
   stop-iteration-iterator@1.1.0: