diff --git a/servers/nextjs/app/(presentation-generator)/presentation/components/SlideContent.tsx b/servers/nextjs/app/(presentation-generator)/presentation/components/SlideContent.tsx
index aa8a1e8b..aa268726 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/components/SlideContent.tsx
+++ b/servers/nextjs/app/(presentation-generator)/presentation/components/SlideContent.tsx
@@ -115,7 +115,13 @@ const SlideContent = ({
   // }, [presentationData?.slides, isStreaming]);
 
   const renderLayout = (slide: any) => {
-    const layoutName = idMapFileNames[slide.layoutId];
+    console.log(slide)
+    console.log(idMapFileNames)
+    const layoutName = idMapFileNames[slide.layout];
+    if (!layoutName) {
+      return <div>Layout not found</div>
+    }
+    console.log(layoutName)
     const Layout = dynamic(() => import(`@/components/layouts/${layoutName}`)) as React.ComponentType<{ data: any }>;
     return <Layout data={slide.content} />
   };
diff --git a/servers/nextjs/components/layouts/BulletPointSlideLayout.tsx b/servers/nextjs/components/layouts/BulletPointSlideLayout.tsx
index b5f5e660..b44e039b 100644
--- a/servers/nextjs/components/layouts/BulletPointSlideLayout.tsx
+++ b/servers/nextjs/components/layouts/BulletPointSlideLayout.tsx
@@ -1,23 +1,16 @@
 import React from 'react'
 import * as z from "zod";
+import { imageSchema } from './defaultSchemes';
 
 export const layoutId = 'bullet-point-slide'
 export const layoutName = 'Bullet Point Slide'
 export const layoutDescription = 'A slide with a title, subtitle, and a list of bullet points.'
 
-const imageSchema = z.object({
-    url: z.url().meta({
-        description: "URL to image",
-    }),
-    prompt: z.string().meta({
-        description: "Prompt used to generate the image",
-    }),
-})
 
 const bulletPointSlideSchema = z.object({
     title: z.string().min(3).max(100).default('Key Points').meta({
         description: "Title of the slide",
-        badu: "'badf"
+
     }),
     subtitle: z.string().min(3).max(150).optional().meta({
         description: "Optional subtitle or description",
@@ -47,8 +40,8 @@ interface BulletPointSlideLayoutProps {
     accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
 }
 
-const BulletPointSlideLayout: React.FC<BulletPointSlideLayoutProps> = ({ data, accentColor = 'blue' }) => {
-    const slideData = bulletPointSlideSchema.parse(data || {})
+const BulletPointSlideLayout: React.FC<BulletPointSlideLayoutProps> = ({ data: slideData, accentColor = 'blue' }) => {
+
 
     const accentColors = {
         blue: 'from-blue-600 to-blue-800',
@@ -77,7 +70,7 @@ const BulletPointSlideLayout: React.FC<BulletPointSlideLayoutProps> = ({ data, a
     return (
         <div
             className="relative w-full aspect-[16/9] flex flex-col bg-gradient-to-br from-slate-50 via-white to-slate-100 overflow-hidden shadow-2xl border border-slate-200"
-            style={slideData.backgroundImage ? {
+            style={slideData?.backgroundImage ? {
                 backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData.backgroundImage})`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center'
@@ -92,21 +85,21 @@ const BulletPointSlideLayout: React.FC<BulletPointSlideLayoutProps> = ({ data, a
             <div className="relative z-10 flex flex-col h-full px-8 py-8">
                 {/* Professional Header */}
                 <header className="mb-6">
-                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData.backgroundImage
+                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData?.backgroundImage
                         ? 'text-white drop-shadow-lg'
                         : 'text-slate-900'
                         }`}>
                         <span className={`bg-gradient-to-r ${accentColors[accentColor]} bg-clip-text text-transparent`}>
-                            {slideData.title}
+                            {slideData?.title}
                         </span>
                     </h1>
 
-                    {slideData.subtitle && (
-                        <p className={`text-xl font-light leading-relaxed break-words ${slideData.backgroundImage
+                    {slideData?.subtitle && (
+                        <p className={`text-xl font-light leading-relaxed break-words ${slideData?.backgroundImage
                             ? 'text-slate-200 drop-shadow-md'
                             : 'text-slate-600'
                             }`}>
-                            {slideData.subtitle}
+                            {slideData?.subtitle}
                         </p>
                     )}
 
@@ -122,8 +115,8 @@ const BulletPointSlideLayout: React.FC<BulletPointSlideLayoutProps> = ({ data, a
                         {/* Content background accent */}
                         <div className={`absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl ${accentColors[accentColor]} opacity-5 rounded-bl-full`} />
 
-                        <ul className={`space-y-${slideData.bulletPoints.length <= 4 ? '6' : slideData.bulletPoints.length <= 6 ? '4' : '3'} relative z-10`}>
-                            {slideData.bulletPoints.map((point, index) => (
+                        <ul className={`space-y-${slideData?.bulletPoints?.length && slideData?.bulletPoints?.length <= 4 ? '6' : slideData?.bulletPoints?.length && slideData?.bulletPoints?.length <= 6 ? '4' : '3'} relative z-10`}>
+                            {slideData?.bulletPoints?.map((point, index) => (
                                 <li key={index} className="flex items-start group hover:transform hover:translateX-2 transition-all duration-200">
                                     {/* Enhanced bullet point icon */}
                                     <div className="relative mr-6 mt-1 flex-shrink-0">
@@ -132,7 +125,7 @@ const BulletPointSlideLayout: React.FC<BulletPointSlideLayoutProps> = ({ data, a
                                     </div>
 
                                     {/* Enhanced bullet text */}
-                                    <span className={`text-lg md:text-xl leading-relaxed break-words font-medium ${slideData.backgroundImage
+                                    <span className={`text-lg md:text-xl leading-relaxed break-words font-medium ${slideData?.backgroundImage
                                         ? 'text-slate-700'
                                         : 'text-slate-700'
                                         } group-hover:text-slate-900 transition-colors duration-200`}>
diff --git a/servers/nextjs/components/layouts/ConclusionSlideLayout.tsx b/servers/nextjs/components/layouts/ConclusionSlideLayout.tsx
index a817dde7..9d7e4a3e 100644
--- a/servers/nextjs/components/layouts/ConclusionSlideLayout.tsx
+++ b/servers/nextjs/components/layouts/ConclusionSlideLayout.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import * as z from "zod";
+import { imageSchema } from './defaultSchemes';
 
 export const layoutId = 'conclusion-slide'
 export const layoutName = 'Conclusion Slide'
@@ -36,8 +37,8 @@ const conclusionSlideSchema = z.object({
     }).optional().meta({
         description: "Optional contact information",
     }),
-    backgroundImage: z.string().optional().meta({
-        description: "URL to background image for the slide",
+    backgroundImage: imageSchema.optional().meta({
+        description: "Background image for the slide",
     })
 })
 
@@ -50,8 +51,7 @@ interface ConclusionSlideLayoutProps {
     accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
 }
 
-const ConclusionSlideLayout: React.FC<ConclusionSlideLayoutProps> = ({ data, accentColor = 'blue' }) => {
-    const slideData = conclusionSlideSchema.parse(data || {})
+const ConclusionSlideLayout: React.FC<ConclusionSlideLayoutProps> = ({ data: slideData, accentColor = 'blue' }) => {
 
     const accentColors = {
         blue: 'from-blue-600 to-blue-800',
@@ -80,7 +80,7 @@ const ConclusionSlideLayout: React.FC<ConclusionSlideLayoutProps> = ({ data, acc
     return (
         <div
             className="relative w-full aspect-[16/9] flex flex-col bg-gradient-to-br from-slate-50 via-white to-slate-100 overflow-hidden shadow-2xl border border-slate-200"
-            style={slideData.backgroundImage ? {
+            style={slideData?.backgroundImage ? {
                 backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData.backgroundImage})`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center'
@@ -95,21 +95,21 @@ const ConclusionSlideLayout: React.FC<ConclusionSlideLayoutProps> = ({ data, acc
             <div className="relative z-10 flex flex-col h-full px-8 py-8">
                 {/* Professional Header */}
                 <header className="mb-6">
-                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData.backgroundImage
+                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData?.backgroundImage
                         ? 'text-white drop-shadow-lg'
                         : 'text-slate-900'
                         }`}>
                         <span className={`bg-gradient-to-r ${accentColors[accentColor]} bg-clip-text text-transparent`}>
-                            {slideData.title}
+                            {slideData?.title}
                         </span>
                     </h1>
 
-                    {slideData.subtitle && (
-                        <p className={`text-xl font-light leading-relaxed break-words ${slideData.backgroundImage
+                    {slideData?.subtitle && (
+                        <p className={`text-xl font-light leading-relaxed break-words ${slideData?.backgroundImage
                             ? 'text-slate-200 drop-shadow-md'
                             : 'text-slate-600'
                             }`}>
-                            {slideData.subtitle}
+                            {slideData?.subtitle}
                         </p>
                     )}
 
@@ -130,7 +130,7 @@ const ConclusionSlideLayout: React.FC<ConclusionSlideLayoutProps> = ({ data, acc
                             <h2 className="text-2xl font-bold text-slate-900 mb-6 relative z-10">Key Takeaways</h2>
 
                             <ul className={`space-y-4 relative z-10`}>
-                                {slideData.keyTakeaways.map((takeaway, index) => (
+                                {slideData?.keyTakeaways?.map((takeaway, index) => (
                                     <li key={index} className="flex items-start group hover:transform hover:translateX-2 transition-all duration-200">
                                         {/* Enhanced bullet point */}
                                         <div className="relative mr-4 mt-1.5 flex-shrink-0">
@@ -153,7 +153,7 @@ const ConclusionSlideLayout: React.FC<ConclusionSlideLayoutProps> = ({ data, acc
                     {/* Call to Action & Contact Info - Takes up 1/3 of space */}
                     <div className="space-y-6">
                         {/* Call to Action */}
-                        {slideData.callToAction && (
+                        {slideData?.callToAction && (
                             <div className="bg-white/95 backdrop-blur-lg rounded-2xl p-6 shadow-2xl border border-white/50 text-center relative overflow-hidden">
                                 {/* CTA accent */}
                                 <div className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${accentColors[accentColor]}`} />
@@ -167,13 +167,13 @@ const ConclusionSlideLayout: React.FC<ConclusionSlideLayoutProps> = ({ data, acc
 
                                 <h3 className="text-lg font-bold text-slate-900 mb-3">Next Steps</h3>
                                 <p className="text-sm text-slate-600 leading-relaxed break-words font-medium">
-                                    {slideData.callToAction}
+                                    {slideData?.callToAction}
                                 </p>
                             </div>
                         )}
 
                         {/* Contact Information */}
-                        {slideData.contactInfo && Object.values(slideData.contactInfo).some(Boolean) && (
+                        {slideData?.contactInfo && Object.values(slideData?.contactInfo).some(Boolean) && (
                             <div className="bg-white/95 backdrop-blur-lg rounded-2xl p-6 shadow-2xl border border-white/50 relative overflow-hidden">
                                 {/* Contact accent */}
                                 <div className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${accentColors[accentColor]}`} />
@@ -181,9 +181,9 @@ const ConclusionSlideLayout: React.FC<ConclusionSlideLayoutProps> = ({ data, acc
                                 <h3 className="text-lg font-bold text-slate-900 mb-4 text-center">Get in Touch</h3>
 
                                 <div className="space-y-3">
-                                    {slideData.contactInfo.email && (
+                                    {slideData?.contactInfo?.email && (
                                         <a
-                                            href={`mailto:${slideData.contactInfo.email}`}
+                                            href={`mailto:${slideData?.contactInfo?.email}`}
                                             className="flex items-center space-x-3 p-3 rounded-xl bg-slate-50 hover:bg-slate-100 transition-colors duration-200 group"
                                         >
                                             <div className={`w-8 h-8 rounded-full ${accentSolids[accentColor]} flex items-center justify-center group-hover:scale-110 transition-transform duration-200`}>
@@ -192,13 +192,13 @@ const ConclusionSlideLayout: React.FC<ConclusionSlideLayoutProps> = ({ data, acc
                                                     <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                                                 </svg>
                                             </div>
-                                            <span className="text-sm font-medium text-slate-700 break-all">{slideData.contactInfo.email}</span>
+                                            <span className="text-sm font-medium text-slate-700 break-all">{slideData?.contactInfo?.email}</span>
                                         </a>
                                     )}
 
-                                    {slideData.contactInfo.phone && (
+                                    {slideData?.contactInfo?.phone && (
                                         <a
-                                            href={`tel:${slideData.contactInfo.phone}`}
+                                            href={`tel:${slideData?.contactInfo?.phone}`}
                                             className="flex items-center space-x-3 p-3 rounded-xl bg-slate-50 hover:bg-slate-100 transition-colors duration-200 group"
                                         >
                                             <div className={`w-8 h-8 rounded-full ${accentSolids[accentColor]} flex items-center justify-center group-hover:scale-110 transition-transform duration-200`}>
@@ -210,9 +210,9 @@ const ConclusionSlideLayout: React.FC<ConclusionSlideLayoutProps> = ({ data, acc
                                         </a>
                                     )}
 
-                                    {slideData.contactInfo.website && (
+                                    {slideData?.contactInfo?.website && (
                                         <a
-                                            href={slideData.contactInfo.website}
+                                            href={slideData?.contactInfo?.website}
                                             target="_blank"
                                             rel="noopener noreferrer"
                                             className="flex items-center space-x-3 p-3 rounded-xl bg-slate-50 hover:bg-slate-100 transition-colors duration-200 group"
diff --git a/servers/nextjs/components/layouts/ContentSlideLayout.tsx b/servers/nextjs/components/layouts/ContentSlideLayout.tsx
index c862f152..5ad058d8 100644
--- a/servers/nextjs/components/layouts/ContentSlideLayout.tsx
+++ b/servers/nextjs/components/layouts/ContentSlideLayout.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import * as z from "zod";
+import { imageSchema } from './defaultSchemes';
 
 
 export const layoutId = 'content-slide'
@@ -16,8 +17,8 @@ const contentSlideSchema = z.object({
     content: z.string().min(10).max(1000).default('Your slide content goes here. This is where you can add detailed information, explanations, or any other text content that supports your presentation.').meta({
         description: "Main content text",
     }),
-    backgroundImage: z.string().optional().meta({
-        description: "URL to background image for the slide",
+    backgroundImage: imageSchema.optional().meta({
+        description: "Background image for the slide",
     })
 })
 
@@ -30,8 +31,7 @@ interface ContentSlideLayoutProps {
     accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
 }
 
-const ContentSlideLayout: React.FC<ContentSlideLayoutProps> = ({ data, accentColor = 'blue' }) => {
-    const slideData = contentSlideSchema.parse(data || {})
+const ContentSlideLayout: React.FC<ContentSlideLayoutProps> = ({ data: slideData, accentColor = 'blue' }) => {
 
     const accentColors = {
         blue: 'from-blue-600 to-blue-800',
@@ -52,8 +52,8 @@ const ContentSlideLayout: React.FC<ContentSlideLayoutProps> = ({ data, accentCol
     return (
         <div
             className="relative w-full aspect-[16/9] flex flex-col bg-gradient-to-br from-slate-50 via-white to-slate-100 overflow-hidden shadow-2xl border border-slate-200"
-            style={slideData.backgroundImage ? {
-                backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData.backgroundImage})`,
+            style={slideData?.backgroundImage ? {
+                backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData?.backgroundImage})`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center'
             } : {}}
@@ -74,21 +74,21 @@ const ContentSlideLayout: React.FC<ContentSlideLayoutProps> = ({ data, accentCol
             <div className="relative z-10 flex flex-col h-full px-8 py-8">
                 {/* Professional Header */}
                 <header className="mb-6">
-                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData.backgroundImage
+                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData?.backgroundImage
                         ? 'text-white drop-shadow-lg'
                         : 'text-slate-900'
                         }`}>
                         <span className={`bg-gradient-to-r ${accentColors[accentColor]} bg-clip-text text-transparent`}>
-                            {slideData.title}
+                            {slideData?.title}
                         </span>
                     </h1>
 
-                    {slideData.subtitle && (
-                        <p className={`text-xl font-light leading-relaxed break-words ${slideData.backgroundImage
+                    {slideData?.subtitle && (
+                        <p className={`text-xl font-light leading-relaxed break-words ${slideData?.backgroundImage
                             ? 'text-slate-200 drop-shadow-md'
                             : 'text-slate-600'
                             }`}>
-                            {slideData.subtitle}
+                            {slideData?.subtitle}
                         </p>
                     )}
 
@@ -104,11 +104,11 @@ const ContentSlideLayout: React.FC<ContentSlideLayoutProps> = ({ data, accentCol
                         {/* Content background accent */}
                         <div className={`absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl ${accentColors[accentColor]} opacity-5 rounded-bl-full`} />
 
-                        <div className={`text-lg md:text-xl leading-relaxed break-words relative z-10 ${slideData.backgroundImage
+                        <div className={`text-lg md:text-xl leading-relaxed break-words relative z-10 ${slideData?.backgroundImage
                             ? 'text-slate-700'
                             : 'text-slate-700'
                             }`}>
-                            {slideData.content.split('\n').map((paragraph, index) => (
+                            {slideData?.content?.split('\n').map((paragraph, index) => (
                                 paragraph.trim() && (
                                     <p key={index} className="mb-5 last:mb-0 font-medium leading-relaxed">
                                         {paragraph}
diff --git a/servers/nextjs/components/layouts/FirstSlideLayout.tsx b/servers/nextjs/components/layouts/FirstSlideLayout.tsx
index fcb87d57..a65f8d8e 100644
--- a/servers/nextjs/components/layouts/FirstSlideLayout.tsx
+++ b/servers/nextjs/components/layouts/FirstSlideLayout.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import * as z from "zod";
+import { imageSchema } from './defaultSchemes';
 
 
 export const layoutId = 'first-slide'
@@ -13,17 +14,17 @@ const firstSlideSchema = z.object({
     subtitle: z.string().min(10).max(200).default('Subtitle for the slide').optional().meta({
         description: "Optional subtitle or tagline",
     }),
-    author: z.string().min(2).max(100).default('John Doe').optional().meta({
+    author: z.string().max(100).default('John Doe').optional().meta({
         description: "Author or presenter name",
     }),
     date: z.string().optional().meta({
         description: "Presentation date",
     }),
-    company: z.string().min(2).max(100).default('Company Name').optional().meta({
+    company: z.string().max(100).default('Company Name').optional().meta({
         description: "Company or organization name",
     }),
-    backgroundImage: z.string().optional().meta({
-        description: "URL to background image for the slide",
+    backgroundImage: imageSchema.optional().meta({
+        description: "Background image for the slide",
     })
 })
 
@@ -36,8 +37,8 @@ interface FirstSlideLayoutProps {
     accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
 }
 
-const FirstSlideLayout: React.FC<FirstSlideLayoutProps> = ({ data, accentColor = 'blue' }) => {
-    const slideData = firstSlideSchema.parse(data || {})
+const FirstSlideLayout: React.FC<FirstSlideLayoutProps> = ({ data: slideData, accentColor = 'blue' }) => {
+
 
     const accentColors = {
         blue: 'from-blue-600 to-blue-800',
@@ -58,7 +59,7 @@ const FirstSlideLayout: React.FC<FirstSlideLayoutProps> = ({ data, accentColor =
     return (
         <div
             className="relative w-full aspect-[16/9] flex flex-col bg-gradient-to-br from-slate-50 via-white to-slate-100 overflow-hidden shadow-2xl border border-slate-200"
-            style={slideData.backgroundImage ? {
+            style={slideData?.backgroundImage ? {
                 backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData.backgroundImage})`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center'
@@ -82,22 +83,22 @@ const FirstSlideLayout: React.FC<FirstSlideLayoutProps> = ({ data, accentColor =
                 {/* Main Content */}
                 <main className="flex-1 flex flex-col justify-center items-center max-w-5xl">
                     {/* Title */}
-                    <h1 className={`text-5xl md:text-6xl font-black mb-6 tracking-tight leading-[0.9] break-words ${slideData.backgroundImage
+                    <h1 className={`text-5xl md:text-6xl font-black mb-6 tracking-tight leading-[0.9] break-words ${slideData?.backgroundImage
                         ? 'text-white drop-shadow-2xl'
                         : 'text-slate-900'
                         }`}>
                         <span className={`bg-gradient-to-r ${accentColors[accentColor]} bg-clip-text text-transparent`}>
-                            {slideData.title}
+                            {slideData?.title}
                         </span>
                     </h1>
 
                     {/* Subtitle */}
-                    {slideData.subtitle && (
-                        <p className={`text-xl md:text-2xl font-light leading-relaxed mb-8 break-words max-w-4xl ${slideData.backgroundImage
+                    {slideData?.subtitle && (
+                        <p className={`text-xl md:text-2xl font-light leading-relaxed mb-8 break-words max-w-4xl ${slideData?.backgroundImage
                             ? 'text-slate-200 drop-shadow-lg'
                             : 'text-slate-600'
                             }`}>
-                            {slideData.subtitle}
+                            {slideData?.subtitle}
                         </p>
                     )}
 
@@ -110,21 +111,21 @@ const FirstSlideLayout: React.FC<FirstSlideLayoutProps> = ({ data, accentColor =
                     {/* Professional Metadata Container */}
                     <div className="bg-white/90 backdrop-blur-md rounded-2xl px-8 py-6 shadow-xl border border-white/40">
                         <div className="space-y-3">
-                            {slideData.author && (
+                            {slideData?.author && (
                                 <p className={`text-lg font-semibold break-words text-slate-800`}>
-                                    {slideData.author}
+                                    {slideData?.author}
                                 </p>
                             )}
 
-                            {slideData.company && (
+                            {slideData?.company && (
                                 <p className={`text-base font-medium break-words ${accentColors[accentColor]} bg-gradient-to-r bg-clip-text text-transparent`}>
-                                    {slideData.company}
+                                    {slideData?.company}
                                 </p>
                             )}
 
-                            {slideData.date && (
+                            {slideData?.date && (
                                 <p className={`text-sm break-words text-slate-600 font-medium tracking-wide`}>
-                                    {slideData.date}
+                                    {slideData?.date}
                                 </p>
                             )}
                         </div>
diff --git a/servers/nextjs/components/layouts/ImageSlideLayout.tsx b/servers/nextjs/components/layouts/ImageSlideLayout.tsx
deleted file mode 100644
index ffa65293..00000000
--- a/servers/nextjs/components/layouts/ImageSlideLayout.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import React from 'react'
-import * as z from "zod";
-
-
-export const layoutId = 'image-slide'
-export const layoutName = 'Image Slide'
-export const layoutDescription = 'A slide with a title, subtitle, image, and content'
-
-const imageSlideSchema = z.object({
-    title: z.string().min(3).max(100).default('Image Showcase').meta({
-        description: "Title of the slide",
-    }),
-    subtitle: z.string().min(3).max(150).default('Subtitle for the slide').optional().meta({
-        description: "Optional subtitle or description",
-    }),
-    image: z.string().default('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop').meta({
-        description: "Main image URL",
-    }),
-    imageCaption: z.string().min(5).max(200).default('Image caption').optional().meta({
-        description: "Optional image caption or description",
-    }),
-    content: z.string().min(10).max(600).optional().meta({
-        description: "Optional supporting content text",
-    }),
-    backgroundImage: z.string().optional().meta({
-        description: "URL to background image for the slide",
-    })
-})
-
-export const Schema = imageSlideSchema
-
-export type ImageSlideData = z.infer<typeof imageSlideSchema>
-
-interface ImageSlideLayoutProps {
-    data?: Partial<ImageSlideData>
-    accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
-}
-
-const ImageSlideLayout: React.FC<ImageSlideLayoutProps> = ({ data, accentColor = 'blue' }) => {
-    const slideData = imageSlideSchema.parse(data || {})
-
-    const accentColors = {
-        blue: 'from-blue-600 to-blue-800',
-        green: 'from-emerald-600 to-emerald-800',
-        purple: 'from-violet-600 to-violet-800',
-        orange: 'from-orange-600 to-orange-800',
-        red: 'from-red-600 to-red-800'
-    }
-
-    const accentSolids = {
-        blue: 'bg-blue-600',
-        green: 'bg-emerald-600',
-        purple: 'bg-violet-600',
-        orange: 'bg-orange-600',
-        red: 'bg-red-600'
-    }
-
-
-
-    return (
-        <div
-            className="relative w-full aspect-[16/9] flex flex-col bg-gradient-to-br from-slate-50 via-white to-slate-100 overflow-hidden shadow-2xl border border-slate-200"
-            style={slideData.backgroundImage ? {
-                backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData.backgroundImage})`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'center'
-            } : {}}
-        >
-            {/* Enhanced geometric background decoration */}
-            <div className="absolute inset-0 opacity-[0.03]">
-                <div className={`absolute top-0 right-0 w-96 h-96 ${accentSolids[accentColor]} rounded-full transform translate-x-32 -translate-y-32 blur-3xl`} />
-                <div className={`absolute bottom-0 left-0 w-64 h-64 ${accentSolids[accentColor]} rounded-full transform -translate-x-16 translate-y-16 blur-2xl`} />
-            </div>
-
-            <div className="relative z-10 flex flex-col h-full px-8 py-8">
-                {/* Professional Header */}
-                <header className="mb-6">
-                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData.backgroundImage
-                        ? 'text-white drop-shadow-lg'
-                        : 'text-slate-900'
-                        }`}>
-                        <span className={`bg-gradient-to-r ${accentColors[accentColor]} bg-clip-text text-transparent`}>
-                            {slideData.title}
-                        </span>
-                    </h1>
-
-                    {slideData.subtitle && (
-                        <p className={`text-xl font-light leading-relaxed break-words ${slideData.backgroundImage
-                            ? 'text-slate-200 drop-shadow-md'
-                            : 'text-slate-600'
-                            }`}>
-                            {slideData.subtitle}
-                        </p>
-                    )}
-
-                    <div className="relative mt-4">
-                        <div className={`w-32 h-1 bg-gradient-to-r ${accentColors[accentColor]} rounded-full shadow-lg`} />
-                        <div className={`absolute inset-0 w-32 h-1 bg-gradient-to-r ${accentColors[accentColor]} rounded-full blur-sm opacity-50`} />
-                    </div>
-                </header>
-
-                {/* Enhanced Content Layout */}
-                <main className="flex-1 flex items-center min-h-0">
-                    <div className=" ">
-
-
-                        <div className={`text-lg md:text-xl leading-relaxed break-words font-medium relative z-10 ${slideData.backgroundImage
-                            ? 'text-slate-700'
-                            : 'text-slate-700'
-                            }`}>
-                            {slideData.content?.split('\n').map((paragraph, index) => (
-                                paragraph.trim() && (
-                                    <p key={index} className="mb-5 last:mb-0">
-                                        {paragraph}
-                                    </p>
-                                )
-                            ))}
-                        </div>
-
-                        {/* Background decoration */}
-                        <div className={`absolute bottom-0 right-0 w-16 h-16 bg-gradient-to-tl ${accentColors[accentColor]} opacity-5 rounded-tl-full`} />
-                    </div>
-                    <div className="flex flex-col h-full">
-                        <div className="relative flex-1 group overflow-hidden rounded-2xl shadow-2xl">
-                            <img
-                                src={slideData.image}
-                                alt={slideData.imageCaption || slideData.title}
-                                className="w-full h-full object-cover transition-transform duration-300 "
-                            />
-                            <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-                        </div>
-                        {slideData.imageCaption && (
-                            <p className={`text-sm mt-4 text-center italic break-words font-medium ${slideData.backgroundImage
-                                ? 'text-slate-300'
-                                : 'text-slate-600'
-                                }`}>
-                                {slideData.imageCaption}
-                            </p>
-                        )}
-                    </div>
-                </main>
-            </div>
-
-            {/* Enhanced decorative accent */}
-            <div className={`absolute bottom-0 left-0 right-0 h-3 bg-gradient-to-r ${accentColors[accentColor]} shadow-lg`}>
-                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent" />
-                <div className={`absolute inset-0 bg-gradient-to-r ${accentColors[accentColor]} blur-sm opacity-50`} />
-            </div>
-
-            {/* Professional corner accents */}
-            <div className={`absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl ${accentColors[accentColor]} opacity-5 rounded-bl-full`} />
-        </div>
-    )
-}
-
-export default ImageSlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/components/layouts/ProcessSlideLayout.tsx b/servers/nextjs/components/layouts/ProcessSlideLayout.tsx
index ec342e76..2bb03eae 100644
--- a/servers/nextjs/components/layouts/ProcessSlideLayout.tsx
+++ b/servers/nextjs/components/layouts/ProcessSlideLayout.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import * as z from "zod";
+import { imageSchema } from './defaultSchemes';
 
 
 export const layoutId = 'process-slide'
@@ -45,8 +46,8 @@ const processSlideSchema = z.object({
             description: 'Final delivery and ongoing support'
         }
     ]).describe('Process steps (2-6 items)'),
-    backgroundImage: z.string().optional().meta({
-        description: "URL to background image for the slide",
+    backgroundImage: imageSchema.optional().meta({
+        description: "Background image for the slide",
     })
 })
 
@@ -59,8 +60,7 @@ interface ProcessSlideLayoutProps {
     accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
 }
 
-const ProcessSlideLayout: React.FC<ProcessSlideLayoutProps> = ({ data, accentColor = 'blue' }) => {
-    const slideData = processSlideSchema.parse(data || {})
+const ProcessSlideLayout: React.FC<ProcessSlideLayoutProps> = ({ data: slideData, accentColor = 'blue' }) => {
 
     const accentColors = {
         blue: 'from-blue-600 to-blue-800',
@@ -89,8 +89,8 @@ const ProcessSlideLayout: React.FC<ProcessSlideLayoutProps> = ({ data, accentCol
     return (
         <div
             className="relative w-full aspect-[16/9] flex flex-col bg-gradient-to-br from-slate-50 via-white to-slate-100 overflow-hidden shadow-2xl border border-slate-200"
-            style={slideData.backgroundImage ? {
-                backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData.backgroundImage})`,
+            style={slideData?.backgroundImage ? {
+                backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData?.backgroundImage})`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center'
             } : {}}
@@ -104,21 +104,21 @@ const ProcessSlideLayout: React.FC<ProcessSlideLayoutProps> = ({ data, accentCol
             <div className="relative z-10 flex flex-col h-full px-8 py-8">
                 {/* Professional Header */}
                 <header className="mb-6">
-                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData.backgroundImage
+                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData?.backgroundImage
                         ? 'text-white drop-shadow-lg'
                         : 'text-slate-900'
                         }`}>
                         <span className={`bg-gradient-to-r ${accentColors[accentColor]} bg-clip-text text-transparent`}>
-                            {slideData.title}
+                            {slideData?.title}
                         </span>
                     </h1>
 
-                    {slideData.subtitle && (
-                        <p className={`text-xl font-light leading-relaxed break-words ${slideData.backgroundImage
+                    {slideData?.subtitle && (
+                        <p className={`text-xl font-light leading-relaxed break-words ${slideData?.backgroundImage
                             ? 'text-slate-200 drop-shadow-md'
                             : 'text-slate-600'
                             }`}>
-                            {slideData.subtitle}
+                            {slideData?.subtitle}
                         </p>
                     )}
 
@@ -132,10 +132,10 @@ const ProcessSlideLayout: React.FC<ProcessSlideLayoutProps> = ({ data, accentCol
                 <main className="flex-1 flex items-center justify-center">
                     <div className="w-full max-w-6xl">
                         <div className="flex items-center justify-between">
-                            {slideData.processSteps.map((step, index) => (
+                            {slideData?.processSteps?.map((step, index) => (
                                 <React.Fragment key={index}>
                                     {/* Process Step */}
-                                    <div className="flex flex-col items-center text-center group" style={{ width: `${100 / slideData.processSteps.length}%` }}>
+                                    <div className="flex flex-col items-center text-center group" style={{ width: `${100 / (slideData?.processSteps?.length || 0)}%` }}>
                                         {/* Step Number Circle */}
                                         <div className={`w-16 h-16 rounded-full ${stepColors[accentColor]} flex items-center justify-center text-2xl font-bold mb-4 shadow-2xl border-4 group-hover:scale-110 transition-all duration-300 relative`}>
                                             <span className="relative z-10">{step.step}</span>
@@ -163,7 +163,7 @@ const ProcessSlideLayout: React.FC<ProcessSlideLayoutProps> = ({ data, accentCol
                                     </div>
 
                                     {/* Arrow Between Steps */}
-                                    {index < slideData.processSteps.length - 1 && (
+                                    {index < (slideData?.processSteps?.length || 0) - 1 && (
                                         <div className="flex items-center justify-center mx-4">
                                             <div className={`w-8 h-1 bg-gradient-to-r ${accentColors[accentColor]} relative`}>
                                                 <div className={`absolute -right-2 -top-1 w-0 h-0 border-l-4 border-t-2 border-b-2 ${accentSolids[accentColor]} border-t-transparent border-b-transparent`}
diff --git a/servers/nextjs/components/layouts/QuoteSlideLayout.tsx b/servers/nextjs/components/layouts/QuoteSlideLayout.tsx
index 634756f4..0f1f5715 100644
--- a/servers/nextjs/components/layouts/QuoteSlideLayout.tsx
+++ b/servers/nextjs/components/layouts/QuoteSlideLayout.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import * as z from "zod";
+import { imageSchema } from './defaultSchemes';
 
 
 export const layoutId = 'quote-slide'
@@ -28,8 +29,8 @@ const quoteSlideSchema = z.object({
     authorImage: z.string().optional().meta({
         description: "URL to author photo",
     }),
-    backgroundImage: z.string().optional().meta({
-        description: "URL to background image for the slide",
+    backgroundImage: imageSchema.optional().meta({
+        description: "Background image for the slide",
     })
 })
 
@@ -42,8 +43,7 @@ interface QuoteSlideLayoutProps {
     accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
 }
 
-const QuoteSlideLayout: React.FC<QuoteSlideLayoutProps> = ({ data, accentColor = 'blue' }) => {
-    const slideData = quoteSlideSchema.parse(data || {})
+const QuoteSlideLayout: React.FC<QuoteSlideLayoutProps> = ({ data: slideData, accentColor = 'blue' }) => {
 
     const accentColors = {
         blue: 'from-blue-600 to-blue-800',
@@ -64,8 +64,8 @@ const QuoteSlideLayout: React.FC<QuoteSlideLayoutProps> = ({ data, accentColor =
     return (
         <div
             className="relative w-full aspect-[16/9] flex flex-col bg-gradient-to-br from-slate-50 via-white to-slate-100 overflow-hidden shadow-2xl border border-slate-200"
-            style={slideData.backgroundImage ? {
-                backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData.backgroundImage})`,
+            style={slideData?.backgroundImage ? {
+                backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData?.backgroundImage})`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center'
             } : {}}
@@ -79,21 +79,21 @@ const QuoteSlideLayout: React.FC<QuoteSlideLayoutProps> = ({ data, accentColor =
             <div className="relative z-10 flex flex-col h-full px-8 py-8">
                 {/* Professional Header */}
                 <header className="mb-6">
-                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData.backgroundImage
+                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData?.backgroundImage
                         ? 'text-white drop-shadow-lg'
                         : 'text-slate-900'
                         }`}>
                         <span className={`bg-gradient-to-r ${accentColors[accentColor]} bg-clip-text text-transparent`}>
-                            {slideData.title}
+                            {slideData?.title}
                         </span>
                     </h1>
 
-                    {slideData.subtitle && (
-                        <p className={`text-xl font-light leading-relaxed break-words ${slideData.backgroundImage
+                    {slideData?.subtitle && (
+                        <p className={`text-xl font-light leading-relaxed break-words ${slideData?.backgroundImage
                             ? 'text-slate-200 drop-shadow-md'
                             : 'text-slate-600'
                             }`}>
-                            {slideData.subtitle}
+                            {slideData?.subtitle}
                         </p>
                     )}
 
@@ -115,26 +115,26 @@ const QuoteSlideLayout: React.FC<QuoteSlideLayoutProps> = ({ data, accentColor =
                         </div>
 
                         {/* Quote Text */}
-                        <blockquote className={`text-2xl md:text-3xl leading-relaxed mb-8 italic break-words relative z-10 font-light ${slideData.backgroundImage
+                        <blockquote className={`text-2xl md:text-3xl leading-relaxed mb-8 italic break-words relative z-10 font-light ${slideData?.backgroundImage
                             ? 'text-slate-700'
                             : 'text-slate-700'
                             }`}>
-                            "{slideData.quote}"
+                            "{slideData?.quote}"
                         </blockquote>
 
                         {/* Professional Author Attribution */}
                         <div className="flex items-center justify-center space-x-4 relative z-10">
                             {/* Author Avatar */}
                             <div className="flex-shrink-0">
-                                {slideData.authorImage ? (
+                                {slideData?.authorImage ? (
                                     <img
-                                        src={slideData.authorImage}
-                                        alt={slideData.author}
+                                        src={slideData?.authorImage}
+                                        alt={slideData?.author}
                                         className="w-16 h-16 rounded-full object-cover shadow-xl border-4 border-white"
                                     />
                                 ) : (
                                     <div className={`w-16 h-16 rounded-full ${accentSolids[accentColor]} flex items-center justify-center text-white font-bold text-xl shadow-xl border-4 border-white`}>
-                                        {slideData.author.split(' ').map(n => n[0]).join('')}
+                                        {slideData?.author?.split(' ').map(n => n[0]).join('')}
                                     </div>
                                 )}
                             </div>
@@ -142,18 +142,18 @@ const QuoteSlideLayout: React.FC<QuoteSlideLayoutProps> = ({ data, accentColor =
                             {/* Author Details */}
                             <div className="text-left">
                                 <p className="text-xl font-bold text-slate-900 break-words">
-                                    {slideData.author}
+                                    {slideData?.author}
                                 </p>
 
-                                {slideData.authorTitle && (
+                                {slideData?.authorTitle && (
                                     <p className={`text-base font-semibold bg-gradient-to-r ${accentColors[accentColor]} bg-clip-text text-transparent break-words`}>
-                                        {slideData.authorTitle}
+                                        {slideData?.authorTitle}
                                     </p>
                                 )}
 
-                                {slideData.company && (
+                                {slideData?.company && (
                                     <p className="text-sm text-slate-600 font-medium break-words">
-                                        {slideData.company}
+                                        {slideData?.company}
                                     </p>
                                 )}
                             </div>
diff --git a/servers/nextjs/components/layouts/StatisticsSlideLayout.tsx b/servers/nextjs/components/layouts/StatisticsSlideLayout.tsx
index da7498f2..d9eea523 100644
--- a/servers/nextjs/components/layouts/StatisticsSlideLayout.tsx
+++ b/servers/nextjs/components/layouts/StatisticsSlideLayout.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import * as z from "zod";
+import { imageSchema } from './defaultSchemes';
 
 
 export const layoutId = 'statistics-slide'
@@ -52,8 +53,8 @@ const statisticsSlideSchema = z.object({
             context: 'Customer service'
         }
     ]).describe('List of statistics (2-6 items)'),
-    backgroundImage: z.string().optional().meta({
-        description: "URL to background image for the slide",
+    backgroundImage: imageSchema.optional().meta({
+        description: "Background image for the slide",
     })
 })
 
@@ -66,9 +67,9 @@ interface StatisticsSlideLayoutProps {
     accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
 }
 
-const StatisticsSlideLayout: React.FC<StatisticsSlideLayoutProps> = ({ data, accentColor = 'blue' }) => {
-    const slideData = statisticsSlideSchema.parse(data || {})
-    const statsCount = slideData.statistics.length
+const StatisticsSlideLayout: React.FC<StatisticsSlideLayoutProps> = ({ data: slideData, accentColor = 'blue' }) => {
+
+    const statsCount = slideData?.statistics?.length || 0
 
     const accentColors = {
         blue: 'from-blue-600 to-blue-800',
@@ -121,8 +122,8 @@ const StatisticsSlideLayout: React.FC<StatisticsSlideLayoutProps> = ({ data, acc
     return (
         <div
             className="relative w-full aspect-[16/9] flex flex-col bg-gradient-to-br from-slate-50 via-white to-slate-100 overflow-hidden shadow-2xl border border-slate-200"
-            style={slideData.backgroundImage ? {
-                backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData.backgroundImage})`,
+            style={slideData?.backgroundImage ? {
+                backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData?.backgroundImage})`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center'
             } : {}}
@@ -136,21 +137,21 @@ const StatisticsSlideLayout: React.FC<StatisticsSlideLayoutProps> = ({ data, acc
             <div className="relative z-10 flex flex-col h-full px-8 py-8">
                 {/* Professional Header */}
                 <header className="mb-6">
-                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData.backgroundImage
+                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData?.backgroundImage
                         ? 'text-white drop-shadow-lg'
                         : 'text-slate-900'
                         }`}>
                         <span className={`bg-gradient-to-r ${accentColors[accentColor]} bg-clip-text text-transparent`}>
-                            {slideData.title}
+                            {slideData?.title}
                         </span>
                     </h1>
 
-                    {slideData.subtitle && (
-                        <p className={`text-xl font-light leading-relaxed break-words ${slideData.backgroundImage
+                    {slideData?.subtitle && (
+                        <p className={`text-xl font-light leading-relaxed break-words ${slideData?.backgroundImage
                             ? 'text-slate-200 drop-shadow-md'
                             : 'text-slate-600'
                             }`}>
-                            {slideData.subtitle}
+                            {slideData?.subtitle}
                         </p>
                     )}
 
@@ -163,25 +164,25 @@ const StatisticsSlideLayout: React.FC<StatisticsSlideLayoutProps> = ({ data, acc
                 {/* Enhanced Statistics Grid */}
                 <main className="flex-1 flex items-center justify-center">
                     <div className={`grid ${getGridCols()} gap-6 w-full max-w-6xl`}>
-                        {slideData.statistics.map((stat, index) => (
+                        {slideData?.statistics?.map((stat, index) => (
                             <div key={index} className="bg-white/95 backdrop-blur-lg rounded-2xl p-6 shadow-2xl border border-white/50 text-center relative overflow-hidden group hover:transform hover:scale-105 transition-all duration-300">
                                 {/* Card accent */}
                                 <div className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${accentColors[accentColor]}`} />
 
                                 {/* Statistic Value */}
                                 <div className={`text-4xl md:text-5xl font-black mb-2 bg-gradient-to-r ${accentColors[accentColor]} bg-clip-text text-transparent`}>
-                                    {stat.value}
+                                    {stat?.value}
                                 </div>
 
                                 {/* Statistic Label */}
                                 <h3 className="text-lg md:text-xl font-bold text-slate-900 mb-2 break-words">
-                                    {stat.label}
+                                    {stat?.label}
                                 </h3>
 
                                 {/* Trend Indicator */}
-                                {stat.trend && (
-                                    <div className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold border ${stat.trend === 'up' ? trendColors.up[accentColor] :
-                                        stat.trend === 'down' ? trendColors.down :
+                                {stat?.trend && (
+                                    <div className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold border ${stat?.trend === 'up' ? trendColors.up[accentColor] :
+                                        stat?.trend === 'down' ? trendColors.down :
                                             trendColors.neutral
                                         } mb-2`}>
                                         <span className="mr-1">{getTrendIcon(stat.trend)}</span>
diff --git a/servers/nextjs/components/layouts/TeamSlideLayout.tsx b/servers/nextjs/components/layouts/TeamSlideLayout.tsx
index 64eb6cef..dbf018eb 100644
--- a/servers/nextjs/components/layouts/TeamSlideLayout.tsx
+++ b/servers/nextjs/components/layouts/TeamSlideLayout.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import * as z from "zod";
+import { imageSchema } from './defaultSchemes';
 
 export const layoutId = 'team-slide'
 export const layoutName = 'Team Slide'
@@ -57,7 +58,9 @@ const teamSlideSchema = z.object({
             linkedin: 'https://linkedin.com/in/emmarodriguez'
         }
     ]).describe('Team members (1-6 people)'),
-    backgroundImage: z.string().optional().describe('URL to background image for the slide')
+    backgroundImage: imageSchema.optional().meta({
+        description: "Background image for the slide",
+    }),
 })
 
 export const Schema = teamSlideSchema
@@ -69,8 +72,7 @@ interface TeamSlideLayoutProps {
     accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
 }
 
-const TeamSlideLayout: React.FC<TeamSlideLayoutProps> = ({ data, accentColor = 'blue' }) => {
-    const slideData = teamSlideSchema.parse(data || {})
+const TeamSlideLayout: React.FC<TeamSlideLayoutProps> = ({ data: slideData, accentColor = 'blue' }) => {
 
     const accentColors = {
         blue: 'from-blue-600 to-blue-800',
@@ -99,8 +101,8 @@ const TeamSlideLayout: React.FC<TeamSlideLayoutProps> = ({ data, accentColor = '
     return (
         <div
             className="relative w-full aspect-[16/9] flex flex-col bg-gradient-to-br from-slate-50 via-white to-slate-100 overflow-hidden shadow-2xl border border-slate-200"
-            style={slideData.backgroundImage ? {
-                backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData.backgroundImage})`,
+            style={slideData?.backgroundImage ? {
+                backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData?.backgroundImage})`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center'
             } : {}}
@@ -114,21 +116,21 @@ const TeamSlideLayout: React.FC<TeamSlideLayoutProps> = ({ data, accentColor = '
             <div className="relative z-10 flex flex-col h-full px-8 py-8">
                 {/* Professional Header */}
                 <header className="mb-6">
-                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData.backgroundImage
+                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData?.backgroundImage
                         ? 'text-white drop-shadow-lg'
                         : 'text-slate-900'
                         }`}>
                         <span className={`bg-gradient-to-r ${accentColors[accentColor]} bg-clip-text text-transparent`}>
-                            {slideData.title}
+                            {slideData?.title}
                         </span>
                     </h1>
 
-                    {slideData.subtitle && (
-                        <p className={`text-xl font-light leading-relaxed break-words ${slideData.backgroundImage
+                    {slideData?.subtitle && (
+                        <p className={`text-xl font-light leading-relaxed break-words ${slideData?.backgroundImage
                             ? 'text-slate-200 drop-shadow-md'
                             : 'text-slate-600'
                             }`}>
-                            {slideData.subtitle}
+                            {slideData?.subtitle}
                         </p>
                     )}
 
@@ -140,12 +142,12 @@ const TeamSlideLayout: React.FC<TeamSlideLayoutProps> = ({ data, accentColor = '
 
                 {/* Enhanced Team Grid */}
                 <main className="flex-1 flex items-center justify-center">
-                    <div className={`grid gap-6 w-full max-w-6xl ${slideData.teamMembers.length <= 2 ? 'grid-cols-2' :
-                        slideData.teamMembers.length <= 3 ? 'grid-cols-3' :
-                            slideData.teamMembers.length <= 4 ? 'grid-cols-2 lg:grid-cols-4' :
+                    <div className={`grid gap-6 w-full max-w-6xl ${slideData?.teamMembers?.length && slideData?.teamMembers?.length <= 2 ? 'grid-cols-2' :
+                        slideData?.teamMembers?.length && slideData?.teamMembers?.length <= 3 ? 'grid-cols-3' :
+                            slideData?.teamMembers?.length && slideData?.teamMembers?.length <= 4 ? 'grid-cols-2 lg:grid-cols-4' :
                                 'grid-cols-2 lg:grid-cols-3'
                         }`}>
-                        {slideData.teamMembers.map((member, index) => (
+                        {slideData?.teamMembers?.map((member, index) => (
                             <div key={index} className="bg-white/95 backdrop-blur-lg rounded-2xl p-6 shadow-2xl border border-white/50 text-center relative overflow-hidden group hover:transform hover:scale-105 transition-all duration-300">
                                 {/* Card accent */}
                                 <div className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${accentColors[accentColor]}`} />
diff --git a/servers/nextjs/components/layouts/TimelineSlideLayout.tsx b/servers/nextjs/components/layouts/TimelineSlideLayout.tsx
index 471d7733..aca68146 100644
--- a/servers/nextjs/components/layouts/TimelineSlideLayout.tsx
+++ b/servers/nextjs/components/layouts/TimelineSlideLayout.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import * as z from "zod";
+import { imageSchema } from './defaultSchemes';
 
 
 export const layoutId = 'timeline-slide'
@@ -54,8 +55,8 @@ const timelineSlideSchema = z.object({
     ]).meta({
         description: "Timeline events (2-6 items)",
     }),
-    backgroundImage: z.string().optional().meta({
-        description: "URL to background image for the slide",
+    backgroundImage: imageSchema.optional().meta({
+        description: "Background image for the slide",
     })
 })
 
@@ -68,8 +69,7 @@ interface TimelineSlideLayoutProps {
     accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
 }
 
-const TimelineSlideLayout: React.FC<TimelineSlideLayoutProps> = ({ data, accentColor = 'blue' }) => {
-    const slideData = timelineSlideSchema.parse(data || {})
+const TimelineSlideLayout: React.FC<TimelineSlideLayoutProps> = ({ data: slideData, accentColor = 'blue' }) => {
 
     const accentColors = {
         blue: 'from-blue-600 to-blue-800',
@@ -122,8 +122,8 @@ const TimelineSlideLayout: React.FC<TimelineSlideLayoutProps> = ({ data, accentC
     return (
         <div
             className="relative w-full aspect-[16/9] flex flex-col bg-gradient-to-br from-slate-50 via-white to-slate-100 overflow-hidden shadow-2xl border border-slate-200"
-            style={slideData.backgroundImage ? {
-                backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData.backgroundImage})`,
+            style={slideData?.backgroundImage ? {
+                backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData?.backgroundImage})`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center'
             } : {}}
@@ -137,21 +137,21 @@ const TimelineSlideLayout: React.FC<TimelineSlideLayoutProps> = ({ data, accentC
             <div className="relative z-10 flex flex-col h-full px-8 py-8">
                 {/* Professional Header */}
                 <header className="mb-6">
-                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData.backgroundImage
+                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData?.backgroundImage
                         ? 'text-white drop-shadow-lg'
                         : 'text-slate-900'
                         }`}>
                         <span className={`bg-gradient-to-r ${accentColors[accentColor]} bg-clip-text text-transparent`}>
-                            {slideData.title}
+                            {slideData?.title}
                         </span>
                     </h1>
 
-                    {slideData.subtitle && (
-                        <p className={`text-xl font-light leading-relaxed break-words ${slideData.backgroundImage
+                    {slideData?.subtitle && (
+                        <p className={`text-xl font-light leading-relaxed break-words ${slideData?.backgroundImage
                             ? 'text-slate-200 drop-shadow-md'
                             : 'text-slate-600'
                             }`}>
-                            {slideData.subtitle}
+                            {slideData?.subtitle}
                         </p>
                     )}
 
@@ -169,8 +169,8 @@ const TimelineSlideLayout: React.FC<TimelineSlideLayoutProps> = ({ data, accentC
                             <div className={`absolute top-8 left-0 right-0 h-1 ${lineColors[accentColor]} rounded-full`} />
                             <div className={`absolute top-8 left-0 right-0 h-1 bg-gradient-to-r ${accentColors[accentColor]} rounded-full opacity-20`} />
 
-                            {slideData.timelineItems.map((item, index) => (
-                                <div key={index} className="relative flex flex-col items-center" style={{ width: `${100 / slideData.timelineItems.length}%` }}>
+                            {slideData?.timelineItems?.map((item, index) => (
+                                <div key={index} className="relative flex flex-col items-center" style={{ width: `${100 / (slideData?.timelineItems?.length || 0)}%` }}>
                                     {/* Timeline node */}
                                     <div className={`w-6 h-6 rounded-full border-4 shadow-lg ${statusColors[item.status][accentColor]} relative z-10 mb-4 transition-all duration-300 hover:scale-110`}>
                                         {item.status === 'completed' && (
diff --git a/servers/nextjs/components/layouts/TwoColumnSlideLayout.tsx b/servers/nextjs/components/layouts/TwoColumnSlideLayout.tsx
deleted file mode 100644
index 6501cc31..00000000
--- a/servers/nextjs/components/layouts/TwoColumnSlideLayout.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import React from 'react'
-import * as z from "zod";
-
-
-export const layoutId = 'two-column-slide'
-export const layoutName = 'Two Column Slide'
-export const layoutDescription = 'A slide with a title, subtitle, and two columns of content'
-
-const twoColumnSlideSchema = z.object({
-    title: z.string().min(3).max(100).default('Two Column Layout').meta({
-        description: "Title of the slide",
-    }),
-    subtitle: z.string().min(3).max(150).optional().meta({
-        description: "Optional subtitle or description",
-    }),
-    leftColumn: z.object({
-        title: z.string().min(3).max(100).default('Left Column').meta({
-            description: "Left column title",
-        }),
-        content: z.string().min(10).max(800).default('Content for the left column goes here. This can include detailed information, explanations, or supporting details.').meta({
-            description: "Left column content",
-        })
-    }).default({
-        title: 'Left Column',
-        content: 'Content for the left column goes here. This can include detailed information, explanations, or supporting details.'
-    }),
-    rightColumn: z.object({
-        title: z.string().min(3).max(100).default('Right Column').meta({
-            description: "Right column title",
-        }),
-        content: z.string().min(10).max(800).default('Content for the right column goes here. This can include additional information, comparisons, or contrasting details.').meta({
-            description: "Right column content",
-        })
-    }).default({
-        title: 'Right Column',
-        content: 'Content for the right column goes here. This can include additional information, comparisons, or contrasting details.'
-    }),
-    backgroundImage: z.string().optional().meta({
-        description: "URL to background image for the slide",
-    })
-})
-
-export const Schema = twoColumnSlideSchema
-
-
-export type TwoColumnSlideData = z.infer<typeof twoColumnSlideSchema>
-
-interface TwoColumnSlideLayoutProps {
-    data?: Partial<TwoColumnSlideData>
-    accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
-}
-
-const TwoColumnSlideLayout: React.FC<TwoColumnSlideLayoutProps> = ({ data, accentColor = 'blue' }) => {
-
-    const slideData = twoColumnSlideSchema.parse(data || {})
-
-    const accentColors = {
-        blue: 'from-blue-600 to-blue-800',
-        green: 'from-emerald-600 to-emerald-800',
-        purple: 'from-violet-600 to-violet-800',
-        orange: 'from-orange-600 to-orange-800',
-        red: 'from-red-600 to-red-800'
-    }
-
-    const accentSolids = {
-        blue: 'bg-blue-600',
-        green: 'bg-emerald-600',
-        purple: 'bg-violet-600',
-        orange: 'bg-orange-600',
-        red: 'bg-red-600'
-    }
-
-    return (
-        <div
-            className="relative w-full aspect-[16/9] flex flex-col bg-gradient-to-br from-slate-50 via-white to-slate-100 overflow-hidden shadow-2xl border border-slate-200"
-            style={slideData.backgroundImage ? {
-                backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData.backgroundImage})`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'center'
-            } : {}}
-        >
-            {/* Enhanced geometric background decoration */}
-            <div className="absolute inset-0 opacity-[0.03]">
-                <div className={`absolute top-0 right-0 w-96 h-96 ${accentSolids[accentColor]} rounded-full transform translate-x-32 -translate-y-32 blur-3xl`} />
-                <div className={`absolute bottom-0 left-0 w-64 h-64 ${accentSolids[accentColor]} rounded-full transform -translate-x-16 translate-y-16 blur-2xl`} />
-            </div>
-
-            <div className="relative z-10 flex flex-col h-full px-8 py-8">
-                {/* Professional Header */}
-                <header className="mb-6">
-                    <h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData.backgroundImage
-                        ? 'text-white drop-shadow-lg'
-                        : 'text-slate-900'
-                        }`}>
-                        <span className={`bg-gradient-to-r ${accentColors[accentColor]} bg-clip-text text-transparent`}>
-                            {slideData.title}
-                        </span>
-                    </h1>
-
-                    {slideData.subtitle && (
-                        <p className={`text-xl font-light leading-relaxed break-words ${slideData.backgroundImage
-                            ? 'text-slate-200 drop-shadow-md'
-                            : 'text-slate-600'
-                            }`}>
-                            {slideData.subtitle}
-                        </p>
-                    )}
-
-                    <div className="relative mt-4">
-                        <div className={`w-32 h-1 bg-gradient-to-r ${accentColors[accentColor]} rounded-full shadow-lg`} />
-                        <div className={`absolute inset-0 w-32 h-1 bg-gradient-to-r ${accentColors[accentColor]} rounded-full blur-sm opacity-50`} />
-                    </div>
-                </header>
-
-                {/* Two Column Content with Enhanced Styling */}
-                <main className="flex-1 grid grid-cols-2 gap-6">
-                    {/* Left Column */}
-                    <div className="bg-white/95 backdrop-blur-lg rounded-2xl p-8 shadow-2xl border border-white/50 flex flex-col relative overflow-hidden hover:shadow-3xl transition-shadow duration-300">
-                        {/* Column accent */}
-                        <div className={`absolute top-0 left-0 w-full h-1 bg-gradient-to-r ${accentColors[accentColor]}`} />
-
-                        <h2 className={`text-2xl md:text-3xl font-bold mb-5 break-words ${slideData.backgroundImage
-                            ? 'text-slate-900'
-                            : 'text-slate-900'
-                            }`}>
-                            {slideData.leftColumn.title}
-                        </h2>
-                        <div className={`text-base md:text-lg leading-relaxed break-words flex-1 ${slideData.backgroundImage
-                            ? 'text-slate-700'
-                            : 'text-slate-700'
-                            }`}>
-                            {slideData.leftColumn.content.split('\n').map((paragraph, index) => (
-                                paragraph.trim() && (
-                                    <p key={index} className="mb-4 last:mb-0 font-medium">
-                                        {paragraph}
-                                    </p>
-                                )
-                            ))}
-                        </div>
-                    </div>
-
-                    {/* Right Column */}
-                    <div className="bg-white/95 backdrop-blur-lg rounded-2xl p-8 shadow-2xl border border-white/50 flex flex-col relative overflow-hidden hover:shadow-3xl transition-shadow duration-300">
-                        {/* Column accent */}
-                        <div className={`absolute top-0 left-0 w-full h-1 bg-gradient-to-r ${accentColors[accentColor]}`} />
-
-                        <h2 className={`text-2xl md:text-3xl font-bold mb-5 break-words ${slideData.backgroundImage
-                            ? 'text-slate-900'
-                            : 'text-slate-900'
-                            }`}>
-                            {slideData.rightColumn.title}
-                        </h2>
-                        <div className={`text-base md:text-lg leading-relaxed break-words flex-1 ${slideData.backgroundImage
-                            ? 'text-slate-700'
-                            : 'text-slate-700'
-                            }`}>
-                            {slideData.rightColumn.content.split('\n').map((paragraph, index) => (
-                                paragraph.trim() && (
-                                    <p key={index} className="mb-4 last:mb-0 font-medium">
-                                        {paragraph}
-                                    </p>
-                                )
-                            ))}
-                        </div>
-                    </div>
-                </main>
-            </div>
-
-            {/* Enhanced decorative accent */}
-            <div className={`absolute bottom-0 left-0 right-0 h-3 bg-gradient-to-r ${accentColors[accentColor]} shadow-lg`}>
-                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent" />
-                <div className={`absolute inset-0 bg-gradient-to-r ${accentColors[accentColor]} blur-sm opacity-50`} />
-            </div>
-
-            {/* Professional corner accents */}
-            <div className={`absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl ${accentColors[accentColor]} opacity-5 rounded-bl-full`} />
-        </div>
-    )
-}
-
-export default TwoColumnSlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/components/layouts/defaultSchemes.ts b/servers/nextjs/components/layouts/defaultSchemes.ts
new file mode 100644
index 00000000..c6ea594b
--- /dev/null
+++ b/servers/nextjs/components/layouts/defaultSchemes.ts
@@ -0,0 +1,23 @@
+import * as z from "zod";
+
+export const imageSchema = z.object({
+    url: z.url().meta({
+        description: "URL to image",
+    }),
+    prompt: z.string().meta({
+        description: "Prompt used to generate the image",
+    }),
+}).meta({
+    imageType: 'image',
+})
+
+export const IconSchema = z.object({
+    url: z.string().meta({
+        description: "URL to icon",
+    }),
+    prompt: z.string().meta({
+        description: "Prompt used to generate the icon",
+    }),
+}).meta({
+    imageType: 'icon',
+})
\ No newline at end of file