diff --git a/servers/nextjs/app/api/layouts/route.ts b/servers/nextjs/app/api/layouts/route.ts
index a179122e..6fe1a392 100644
--- a/servers/nextjs/app/api/layouts/route.ts
+++ b/servers/nextjs/app/api/layouts/route.ts
@@ -47,8 +47,10 @@ export async function GET() {
                         ordered: false,
                         isDefault: false
                     }
+                    // write the settings to the file
+                    fs.writeFile(settingsPath, JSON.stringify(settings, null, 2))
                 }
-                
+
                 if (layoutFiles.length > 0) {
                     allLayouts.push({
                         groupName: groupName,
diff --git a/servers/nextjs/app/layout-preview/hooks/useGroupLayoutLoader.ts b/servers/nextjs/app/layout-preview/hooks/useGroupLayoutLoader.ts
index 278607f5..7825bc3c 100644
--- a/servers/nextjs/app/layout-preview/hooks/useGroupLayoutLoader.ts
+++ b/servers/nextjs/app/layout-preview/hooks/useGroupLayoutLoader.ts
@@ -76,8 +76,9 @@ export const useGroupLayoutLoader = (groupSlug: string): UseGroupLayoutLoaderRet
                         toast.error(`${layoutName} has no default export`, {
                             description: 'Please ensure the layout file exports a default component',
                         })
+
                         console.warn(`${layoutName} has no default export`)
-                        continue
+                        return;
                     }
 
                     if (!module.Schema) {
@@ -85,7 +86,7 @@ export const useGroupLayoutLoader = (groupSlug: string): UseGroupLayoutLoaderRet
                             description: 'Please ensure the layout file exports a Schema',
                         })
                         console.error(`${layoutName} is missing required Schema export`)
-                        continue
+                        return;
                     }
 
                     // Use empty object to let schema apply its default values
@@ -114,6 +115,7 @@ export const useGroupLayoutLoader = (groupSlug: string): UseGroupLayoutLoaderRet
 
                         if (module.default && module.Schema) {
                             const sampleData = module.Schema.parse({})
+                            // if layoutId is not provided, use the layoutName
                             const layoutId = module.layoutId || layoutName.toLowerCase().replace(/layout$/, '')
                             const layoutInfo: LayoutInfo = {
                                 name: layoutName,
diff --git a/servers/nextjs/app/layout-preview/hooks/useLayoutLoader.ts b/servers/nextjs/app/layout-preview/hooks/useLayoutLoader.ts
index 3d4e3a2d..8154f07e 100644
--- a/servers/nextjs/app/layout-preview/hooks/useLayoutLoader.ts
+++ b/servers/nextjs/app/layout-preview/hooks/useLayoutLoader.ts
@@ -53,7 +53,7 @@ export const useLayoutLoader = (): UseLayoutLoaderReturn => {
                                 description: 'Please ensure the layout file exports a default component',
                             })
                             console.warn(`${layoutName} has no default export`)
-                            continue
+                            throw new Error(`${layoutName} has no default export`)
                         }
 
                         if (!module.Schema) {
@@ -61,7 +61,7 @@ export const useLayoutLoader = (): UseLayoutLoaderReturn => {
                                 description: 'Please ensure the layout file exports a Schema',
                             })
                             console.error(`${layoutName} is missing required Schema export`)
-                            continue
+                            throw new Error(`${layoutName} is missing required Schema export`)
                         }
 
                         // Use empty object to let schema apply its default values
@@ -93,7 +93,9 @@ export const useLayoutLoader = (): UseLayoutLoaderReturn => {
                             if (module.default && module.Schema) {
                                 // Use empty object to let schema apply its default values
                                 const sampleData = module.Schema.parse({})
+                                // if layoutId is not provided, use the layoutName
                                 const layoutId = module.layoutId || layoutName.toLowerCase().replace(/layout$/, '')
+
                                 const layoutInfo: LayoutInfo = {
                                     name: layoutName,
                                     component: module.default,
diff --git a/servers/nextjs/presentation-layouts/default/Type10SlideLayout.tsx b/servers/nextjs/presentation-layouts/default/Type10SlideLayout.tsx
new file mode 100644
index 00000000..d124c960
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/default/Type10SlideLayout.tsx
@@ -0,0 +1,274 @@
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';
+import React from 'react'
+import { BarChart, Bar, LineChart, Line, PieChart, Pie, AreaChart, Area, ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Cell, ResponsiveContainer } from "recharts";
+import * as z from "zod";
+import { IconSchema } from '../defaultSchemes';
+
+export const layoutId = 'type4-slide'
+export const layoutName = 'Type4 Slide'
+export const layoutDescription = 'A chart-focused layout with title, chart visualization, and description text.'
+
+const chartDataSchema = z.object({
+    name: z.string().meta({ description: "Data point name" }),
+    value: z.number().meta({ description: "Data point value" }),
+    category: z.string().optional().meta({ description: "Category for grouping" }),
+    x: z.number().optional().meta({ description: "X coordinate for scatter plots" }),
+    y: z.number().optional().meta({ description: "Y coordinate for scatter plots" }),
+});
+
+
+const type10SlideSchema = z.object({
+    title: z.string().min(3).max(50).default('Chart Analysis').meta({
+        description: "Main title of the slide",
+    }),
+    description: z.string().min(8).max(40).default('This is a description of the chart analysis').meta({
+        description: " Short description of the chart analysis",
+    }),
+    items: z.array(z.object({
+        icon: IconSchema.meta({
+            description: "Item icon",
+        }),
+        heading: z.string().min(2).max(50).meta({
+            description: "Item heading",
+        }),
+        description: z.string().min(10).max(130).meta({
+            description: "Item description",
+        })
+    })).min(2).max(3).default(() => [
+        {
+            icon: {
+                __icon_url__: 'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_1280.jpg',
+                __icon_query__: 'A beautiful road in the mountains'
+            },
+            heading: 'First Key Point',
+            description: 'Detailed explanation of the first important point that supports the main topic'
+        },
+        {
+            icon: {
+                __icon_url__: 'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_1280.jpg',
+                __icon_query__: 'A beautiful road in the mountains'
+            },
+            heading: 'Second Key Point',
+            description: 'Detailed explanation of the second important point with relevant information'
+        }
+    ]).meta({
+        description: "List of numbered items (2-3 items)",
+    }),
+    chartData: z.any().optional().meta({
+        description: "Chart data object",
+    }),
+    isFullSizeChart: z.boolean().default(false).meta({
+        description: "Whether to display chart in full size mode",
+    }),
+    chartType: z.enum(['bar', 'line', 'pie', 'area', 'scatter']).default('line').meta({
+        description: "Type of chart to display",
+    }),
+    data: z.array(chartDataSchema).min(2).max(10).default([
+        { name: '2021', value: 5 },
+        { name: '2022', value: 12 },
+        { name: '2023', value: 18 },
+        { name: '2024', value: 23 },
+        { name: '2025', value: 26 },
+    ]).meta({
+        description: "Chart data points",
+    }),
+    dataKey: z.string().default('value').meta({
+        description: "Key field for chart values",
+    }),
+    categoryKey: z.string().default('name').meta({
+        description: "Key field for chart categories",
+    }),
+    color: z.string().default('#3b82f6').meta({
+        description: "Primary color for chart elements",
+    }),
+    showLegend: z.boolean().default(false).meta({
+        description: "Whether to show chart legend",
+    }),
+    showTooltip: z.boolean().default(true).meta({
+        description: "Whether to show chart tooltip",
+    }),
+})
+
+
+const chartConfig = {
+    value: {
+        label: "Value",
+    },
+    name: {
+        label: "Name",
+    },
+};
+const CHART_COLORS = [
+    '#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6',
+    '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6366f1'
+];
+
+export const Schema = type10SlideSchema
+
+export type Type10SlideData = z.infer<typeof type10SlideSchema>
+
+interface Type10SlideLayoutProps {
+    data?: Partial<Type10SlideData>
+}
+
+const Type10SlideLayout: React.FC<Type10SlideLayoutProps> = ({ data: slideData }) => {
+    const chartData = slideData?.data || [];
+    const chartType = slideData?.chartType || 'line';
+    const color = slideData?.color || '#3b82f6';
+    const dataKey = slideData?.dataKey || 'value';
+    const categoryKey = slideData?.categoryKey || 'name';
+    const showLegend = slideData?.showLegend || false;
+    const showTooltip = slideData?.showTooltip || true;
+    const renderChart = () => {
+        const commonProps = {
+            data: chartData,
+            margin: { top: 10, right: 20, left: 0, bottom: 30 },
+        };
+
+        switch (chartType) {
+            case 'bar':
+                return (
+                    <BarChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={categoryKey} />
+                        <YAxis />
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Bar dataKey={dataKey} fill={color} radius={[4, 4, 0, 0]} />
+                    </BarChart>
+                );
+
+            case 'line':
+                return (
+                    <LineChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={categoryKey} />
+                        <YAxis />
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Line
+                            type="monotone"
+                            dataKey={dataKey}
+                            stroke={color}
+                            strokeWidth={3}
+                            dot={{ fill: color, strokeWidth: 2, r: 4 }}
+                        />
+                    </LineChart>
+                );
+
+            case 'area':
+                return (
+                    <AreaChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={categoryKey} />
+                        <YAxis />
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Area
+                            type="monotone"
+                            dataKey={dataKey}
+                            stroke={color}
+                            fill={color}
+                            fillOpacity={0.6}
+                        />
+                    </AreaChart>
+                );
+
+            case 'pie':
+                return (
+                    <PieChart margin={{ top: 20, right: 30, left: 40, bottom: 60 }}>
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Pie
+                            data={chartData}
+                            cx="50%"
+                            cy="40%"
+                            outerRadius={70}
+                            fill={color}
+                            dataKey={dataKey}
+                            label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
+                        >
+                            {chartData.map((entry, index) => (
+                                <Cell key={`cell-${index}`} fill={CHART_COLORS[index % CHART_COLORS.length]} />
+                            ))}
+                        </Pie>
+                    </PieChart>
+                );
+
+            case 'scatter':
+                return (
+                    <ScatterChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey="x" type="number" />
+                        <YAxis dataKey="y" type="number" />
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Scatter dataKey="value" fill={color} />
+                    </ScatterChart>
+                );
+
+            default:
+                return <div>Unsupported chart type</div>;
+        }
+    };
+
+    return (
+        <div
+            className=" rounded-sm w-full max-w-[1280px] px-3 py-[10px] sm:px-12 lg:px-20 sm:py-[40px] lg:py-[86px] shadow-lg max-h-[720px] flex flex-col items-center justify-center aspect-video bg-white relative z-20 mx-auto"
+
+        >
+            <div className='w-full flex flex-col items-start justify-start'>
+
+                <h1 className="text-2xl text-start sm:text-3xl lg:text-4xl xl:text-5xl font-bold text-gray-900 leading-tight mb-4 lg:mb-8">
+                    {slideData?.title || 'Chart Analysis'}
+                </h1>
+
+            </div>
+            <div className={`flex gap-6 w-full  items-center  `}>
+                <div className="w-1/2">
+                    <div className="flex-1 bg-white rounded-lg shadow-sm border border-gray-100 p-4">
+                        <ChartContainer config={chartConfig} className="h-full w-full">
+                            {renderChart()}
+                        </ChartContainer>
+                    </div>
+                </div>
+                <div className="lg:w-1/2 relative">
+                    <div className="space-y-3 lg:space-y-6">
+                        {slideData?.items?.map((item, index) => (
+                            <div
+                                key={index}
+                                style={{
+                                    boxShadow: "0 2px 10px 0 rgba(43, 43, 43, 0.2)",
+                                }}
+                                className="rounded-lg p-3 lg:p-6 relative"
+                            >
+                                <div className="flex gap-6">
+                                    <div className="w-[48px] h-[48px]">
+                                        <div className="w-full h-full bg-blue-600 rounded-lg flex items-center justify-center overflow-hidden">
+                                            <img
+                                                src={item.icon?.__icon_url__ || ''}
+                                                alt={item.icon?.__icon_query__ || item.heading}
+                                                className="w-full h-full object-cover"
+                                            />
+                                        </div>
+                                    </div>
+                                    <div className="w-[calc(100%-55px)] space-y-1">
+                                        <h3 className="text-gray-900 text-base sm:text-lg lg:text-[24px] leading-[26px] lg:leading-[32px] font-bold">
+                                            {item.heading}
+                                        </h3>
+                                        <p className="text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal">
+                                            {item.description}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Type10SlideLayout
+
diff --git a/servers/nextjs/presentation-layouts/default/Type1SlideLayout.tsx b/servers/nextjs/presentation-layouts/default/Type1SlideLayout.tsx
new file mode 100644
index 00000000..df4c74f2
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/default/Type1SlideLayout.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import * as z from "zod";
+import { ImageSchema } from '@/presentation-layouts/defaultSchemes';
+
+export const layoutId = 'type1-slide'
+export const layoutName = 'Type1 Slide'
+export const layoutDescription = 'A clean two-column layout with title and description on the left and a featured image on the right.'
+
+const type1SlideSchema = z.object({
+    title: z.string().min(3).max(50).default('Hot NOT Reload Working!').meta({
+        description: "Main title of the slide",
+    }),
+    description: z.string().min(10).max(130).default('This is a test of the hot reload system! If you can see this text, hot reload is working perfectly. Changes should appear instantly without page refresh.').meta({
+        description: "Main description text",
+    }),
+    image: ImageSchema.default({
+        __image_url__: 'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_1280.jpg',
+        __image_prompt__: 'A beautiful road in the mountains'
+    }).meta({
+        description: "Main slide image",
+    })
+})
+
+export const Schema = type1SlideSchema
+
+export type Type1SlideData = z.infer<typeof type1SlideSchema>
+
+interface Type1SlideLayoutProps {
+    data?: Partial<Type1SlideData>
+}
+
+const Type1SlideLayout: React.FC<Type1SlideLayoutProps> = ({ data: slideData }) => {
+    return (
+        <div
+            className=" w-full rounded-sm max-w-[1280px] shadow-lg px-3 sm:px-12 lg:px-20 py-[10px] sm:py-[40px] lg:py-[86px] max-h-[720px] flex items-center aspect-video bg-white relative z-20 mx-auto"
+
+        >
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-8 md:gap-12 lg:gap-16 w-full">
+                <div className="flex flex-col w-full items-start justify-center space-y-1 md:space-y-2 lg:space-y-6">
+                    {/* Title */}
+                    <h1 className=" text-xl sm:text-2xl lg:text-[40px] leading-[36px] lg:leading-[48px] font-bold">
+                        {slideData?.title || ' This is the title of slide'}
+                    </h1>
+
+                    {/* Description */}
+                    <p className="text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal">
+                        {slideData?.description || 'This is a test of the hot reload system! If you can see this text, hot reload is working perfectly. Changes should appear instantly without page refresh.'}
+                    </p>
+                </div>
+
+                {/* Image */}
+                <div className="w-full h-full min-h-[200px] lg:min-h-[300px]">
+                    <img
+                        src={slideData?.image?.__image_url__ || ''}
+                        alt={slideData?.image?.__image_prompt__ || slideData?.title || ''}
+                        className="w-full h-full object-cover rounded-lg shadow-md"
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Type1SlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/default/Type2NumberedSlideLayout.tsx b/servers/nextjs/presentation-layouts/default/Type2NumberedSlideLayout.tsx
new file mode 100644
index 00000000..3a2dacdc
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/default/Type2NumberedSlideLayout.tsx
@@ -0,0 +1,124 @@
+import React from 'react'
+import * as z from "zod";
+
+export const layoutId = 'type2-numbered-slide'
+export const layoutName = 'Type2 Numbered Slide'
+export const layoutDescription = 'A content layout with title and numbered content items with large numerals and shadow boxes.'
+
+const type2NumberedSlideSchema = z.object({
+    title: z.string().min(3).max(50).default('Main Title').meta({
+        description: "Main title of the slide",
+    }),
+    items: z.array(z.object({
+        heading: z.string().min(2).max(100).meta({
+            description: "Item heading",
+        }),
+        description: z.string().min(10).max(130).meta({
+            description: "Item description",
+        })
+    })).min(2).max(4).default([
+        {
+            heading: 'First Point',
+            description: 'Description for the first key point that explains important details'
+        },
+        {
+            heading: 'Second Point',
+            description: 'Description for the second key point with relevant information'
+        },
+        {
+            heading: 'Third Point',
+            description: 'Description for the third key point highlighting crucial aspects'
+        }
+    ]).meta({
+        description: "List of content items (2-4 items)",
+    })
+})
+
+export const Schema = type2NumberedSlideSchema
+
+export type Type2NumberedSlideData = z.infer<typeof type2NumberedSlideSchema>
+
+interface Type2NumberedSlideLayoutProps {
+    data?: Partial<Type2NumberedSlideData>
+}
+
+const Type2NumberedSlideLayout: React.FC<Type2NumberedSlideLayoutProps> = ({ data: slideData }) => {
+    const items = slideData?.items || []
+    const isGridLayout = items.length >= 4
+    const numberTranslations: string[] = ['01', '02', '03', '04', '05', '06']
+
+    const renderGridContent = () => {
+        return (
+            <div className="grid grid-cols-1 bg-white lg:grid-cols-2 relative gap-4 lg:gap-8 mt-4 lg:mt-12">
+                {items.map((item, index) => (
+                    <div
+                        key={index}
+                        style={{
+                            boxShadow: "0 2px 10px 0 rgba(43, 43, 43, 0.2)",
+                        }}
+                        className="w-full relative shadow-lg rounded-lg p-3 lg:p-6"
+                    >
+                        <div className="flex gap-3">
+                            <div className="text-[32px] leading-[40px] px-1 font-bold mb-4 text-blue-600">
+                                {numberTranslations[index] || `0${index + 1}`}
+                            </div>
+                            <div className="space-y-2">
+                                <h3 className="text-gray-900 text-base sm:text-lg lg:text-[24px] leading-[26px] lg:leading-[32px] font-bold">
+                                    {item.heading}
+                                </h3>
+                                <p className="text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal">
+                                    {item.description}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        )
+    }
+
+    const renderHorizontalContent = () => {
+        return (
+            <div className="flex flex-col lg:flex-row bg-white mt-4 lg:mt-12 w-full relative gap-4 lg:gap-8">
+                {items.map((item, index) => (
+                    <div
+                        key={index}
+                        style={{
+                            boxShadow: "0 2px 10px 0 rgba(43, 43, 43, 0.2)",
+                        }}
+                        className="w-full relative shadow-lg rounded-lg p-3 lg:p-6"
+                    >
+                        <div className="text-[32px] leading-[40px] font-semibold lg:mb-4 text-blue-600">
+                            {numberTranslations[index] || `0${index + 1}`}
+                        </div>
+                        <div className="space-y-2 lg:space-y-4">
+                            <h3 className=" text-gray-900 text-base sm:text-lg lg:text-[24px] leading-[26px] lg:leading-[32px] font-bold">
+                                {item.heading}
+                            </h3>
+                            <p className=" text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal">
+                                {item.description}
+                            </p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        )
+    }
+
+    return (
+        <div
+            className=" rounded-sm max-w-[1280px] w-full shadow-lg px-3 sm:px-12 lg:px-20 py-[10px] sm:py-[40px] flex flex-col items-center justify-center max-h-[720px] aspect-video bg-white relative z-20 mx-auto"
+
+        >
+            <div className="text-center lg:pb-8 w-full">
+                <h1 className="text-gray-900 text-xl sm:text-2xl lg:text-[40px] leading-[36px] lg:leading-[48px] font-bold">
+                    {slideData?.title || 'Main Title'}
+                </h1>
+            </div>
+
+            {isGridLayout ? renderGridContent() : renderHorizontalContent()}
+        </div>
+    )
+}
+
+export default Type2NumberedSlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/default/Type2SlideLayout.tsx b/servers/nextjs/presentation-layouts/default/Type2SlideLayout.tsx
new file mode 100644
index 00000000..30c875e5
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/default/Type2SlideLayout.tsx
@@ -0,0 +1,111 @@
+import React from 'react'
+import * as z from "zod";
+
+export const layoutId = 'type2-slide'
+export const layoutName = 'Type2 Slide'
+export const layoutDescription = 'A flexible content layout with title and multiple content items in default presentation style.'
+
+const type2SlideSchema = z.object({
+    title: z.string().min(3).max(50).default('Main Title').meta({
+        description: "Main title of the slide",
+    }),
+    items: z.array(z.object({
+        heading: z.string().min(2).max(50).meta({
+            description: "Item heading",
+        }),
+        description: z.string().min(10).max(130).meta({
+            description: "Item description",
+        })
+    })).min(2).max(4).default([
+        {
+            heading: 'First Point',
+            description: 'Description for the first key point that explains important details'
+        },
+        {
+            heading: 'Second Point',
+            description: 'Description for the second key point with relevant information'
+        },
+        {
+            heading: 'Third Point',
+            description: 'Description for the third key point highlighting crucial aspects'
+        }
+    ]).meta({
+        description: "List of content items (2-4 items)",
+    })
+})
+
+export const Schema = type2SlideSchema
+
+export type Type2SlideData = z.infer<typeof type2SlideSchema>
+
+interface Type2SlideLayoutProps {
+    data?: Partial<Type2SlideData>
+}
+
+const Type2SlideLayout: React.FC<Type2SlideLayoutProps> = ({ data: slideData }) => {
+    const items = slideData?.items || []
+    const isGridLayout = items.length >= 4
+
+    const renderGridContent = () => {
+        return (
+            <div className="grid grid-cols-1 lg:grid-cols-2 relative gap-6 md:gap-12 mt-4 lg:mt-12">
+                {items.map((item, index) => (
+                    <div key={index} className="w-full relative p-3 lg:p-6 rounded-md"
+                        style={{
+                            boxShadow: "0 2px 10px 0 rgba(43, 43, 43, 0.2)",
+                        }}
+                    >
+                        <div className="space-y-2">
+                            <h3 className="text-gray-900 text-base sm:text-lg lg:text-[24px] leading-[26px] lg:leading-[32px] font-bold">
+                                {item.heading}
+                            </h3>
+                            <p className="text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal">
+                                {item.description}
+                            </p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        )
+    }
+
+    const renderHorizontalContent = () => {
+        return (
+            <div className="flex flex-col lg:flex-row mt-4 lg:mt-12 w-full relative gap-12">
+                {items.map((item, index) => (
+                    <div key={index} className="w-full relative p-3 lg:p-6 rounded-md"
+                        style={{
+                            boxShadow: "0 2px 10px 0 rgba(43, 43, 43, 0.2)",
+                        }}
+                    >
+                        <div className="space-y-2 lg:space-y-4">
+                            <h3 className="text-gray-900 text-base sm:text-lg lg:text-[24px] leading-[26px] lg:leading-[32px] font-bold">
+                                {item.heading}
+                            </h3>
+                            <p className="text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal">
+                                {item.description}
+                            </p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        )
+    }
+
+    return (
+        <div
+            className=" rounded-sm max-w-[1280px] w-full shadow-lg px-3 sm:px-12 lg:px-20 py-[10px] sm:py-[40px] flex flex-col items-center justify-center max-h-[720px] aspect-video bg-white relative z-20 mx-auto"
+
+        >
+            <div className="text-center lg:pb-8 w-full">
+                <h1 className="text-gray-900 text-xl sm:text-2xl lg:text-[40px] leading-[36px] lg:leading-[48px] font-bold">
+                    {slideData?.title || 'Main Title'}
+                </h1>
+            </div>
+
+            {isGridLayout ? renderGridContent() : renderHorizontalContent()}
+        </div>
+    )
+}
+
+export default Type2SlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/default/Type2TimelineSlideLayout.tsx b/servers/nextjs/presentation-layouts/default/Type2TimelineSlideLayout.tsx
new file mode 100644
index 00000000..f29d3b39
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/default/Type2TimelineSlideLayout.tsx
@@ -0,0 +1,102 @@
+import React from 'react'
+import * as z from "zod";
+
+export const layoutId = 'type2-timeline-slide'
+export const layoutName = 'Type2 Timeline Slide'
+export const layoutDescription = 'A timeline layout with title and content items arranged horizontally with numbered circles and connecting line.'
+
+const type2TimelineSlideSchema = z.object({
+    title: z.string().min(3).max(50).default('Main Title').meta({
+        description: "Main title of the slide",
+    }),
+    items: z.array(z.object({
+        heading: z.string().min(2).max(50).meta({
+            description: "Item heading",
+        }),
+        description: z.string().min(10).max(130).meta({
+            description: "Item description",
+        })
+    })).min(2).max(4).default([
+        {
+            heading: 'First Point',
+            description: 'Description for the first key point that explains important details'
+        },
+        {
+            heading: 'Second Point',
+            description: 'Description for the second key point with relevant information'
+        },
+        {
+            heading: 'Third Point',
+            description: 'Description for the third key point highlighting crucial aspects'
+        }
+    ]).meta({
+        description: "List of content items (2-4 items)",
+    })
+})
+
+export const Schema = type2TimelineSlideSchema
+
+export type Type2TimelineSlideData = z.infer<typeof type2TimelineSlideSchema>
+
+interface Type2TimelineSlideLayoutProps {
+    data?: Partial<Type2TimelineSlideData>
+}
+
+const Type2TimelineSlideLayout: React.FC<Type2TimelineSlideLayoutProps> = ({ data: slideData }) => {
+    const items = slideData?.items || []
+    const numberTranslations: string[] = ['01', '02', '03', '04', '05', '06']
+
+    const renderTimelineContent = () => {
+        return (
+            <div className="w-full flex flex-col relative mt-4 lg:mt-16">
+                {/* Timeline Header with Numbers and Line */}
+                <div className="relative flex justify-between w-[85%] mx-auto items-center mb-8 px-8">
+                    {/* Horizontal Line */}
+                    <div className="absolute z-10 top-1/2 w-[87%] left-1/2 -translate-x-1/2 h-[2px] bg-blue-600" />
+
+                    {/* Timeline Numbers */}
+                    {items.map((_, index) => (
+                        <div
+                            key={`timeline-${index}`}
+                            className="relative z-10 w-12 h-12 rounded-full bg-blue-600 px-1 text-white flex items-center justify-center font-bold text-lg"
+                        >
+                            <span>{numberTranslations[index] || `0${index + 1}`}</span>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Timeline Content */}
+                <div className="flex justify-between gap-8">
+                    {items.map((item, index) => (
+                        <div key={index} className="flex-1 text-center relative">
+                            <div className="space-y-4">
+                                <h3 className="text-gray-900 text-base sm:text-lg lg:text-[24px] leading-[26px] lg:leading-[32px] font-bold">
+                                    {item.heading}
+                                </h3>
+                                <p className="text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal">
+                                    {item.description}
+                                </p>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div
+            className=" rounded-sm max-w-[1280px] w-full shadow-lg px-3 sm:px-12 lg:px-20 py-[10px] sm:py-[40px] flex flex-col items-center justify-center max-h-[720px] aspect-video bg-white relative z-20 mx-auto"
+        >
+            <div className="text-center lg:pb-8 w-full">
+                <h1 className="text-gray-900 text-xl sm:text-2xl lg:text-[40px] leading-[36px] lg:leading-[48px] font-bold">
+                    {slideData?.title || 'Main Title'}
+                </h1>
+            </div>
+
+            {renderTimelineContent()}
+        </div>
+    )
+}
+
+export default Type2TimelineSlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/default/Type3SlideLayout.tsx b/servers/nextjs/presentation-layouts/default/Type3SlideLayout.tsx
new file mode 100644
index 00000000..c860b9b5
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/default/Type3SlideLayout.tsx
@@ -0,0 +1,119 @@
+import React from 'react'
+import * as z from "zod";
+import { ImageSchema } from '@/presentation-layouts/defaultSchemes';
+
+export const layoutId = 'type3-slide'
+export const layoutName = 'Type3 Slide'
+export const layoutDescription = 'A centered title with a grid of image cards, each containing a heading and description.'
+
+const type3SlideSchema = z.object({
+    title: z.string().min(3).max(50).default('Featured Content').meta({
+        description: "Main title of the slide",
+    }),
+    items: z.array(z.object({
+        heading: z.string().min(2).max(50).meta({
+            description: "Item heading",
+        }),
+        description: z.string().min(10).max(130).meta({
+            description: "Item description",
+        }),
+        image: ImageSchema.meta({
+            description: "Item image",
+        })
+    })).min(2).max(4).default([
+        {
+            heading: 'First Feature',
+            description: 'Description for the first featured item with detailed information',
+            image: {
+                __image_url__: 'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_1280.jpg',
+                __image_prompt__: 'A beautiful road in the mountains'
+            }
+        },
+        {
+            heading: 'Second Feature',
+            description: 'Description for the second featured item with relevant details',
+            image: {
+                __image_url__: 'https://cdn.pixabay.com/photo/2016/02/19/11/19/office-1209640_1280.jpg',
+                __image_prompt__: 'Modern office workspace'
+            }
+        },
+        {
+            heading: 'Third Feature',
+            description: 'Description for the third featured item with important points',
+            image: {
+                __image_url__: 'https://cdn.pixabay.com/photo/2017/08/10/08/47/laptop-2619235_1280.jpg',
+                __image_prompt__: 'Laptop with code on screen'
+            }
+        }
+    ]).meta({
+        description: "List of featured items (2-4 items)",
+    })
+})
+
+export const Schema = type3SlideSchema
+
+export type Type3SlideData = z.infer<typeof type3SlideSchema>
+
+interface Type3SlideLayoutProps {
+    data?: Partial<Type3SlideData>
+}
+
+const Type3SlideLayout: React.FC<Type3SlideLayoutProps> = ({ data: slideData }) => {
+    const items = slideData?.items || []
+
+    const getGridCols = (length: number) => {
+        switch (length) {
+            case 1: return 'lg:grid-cols-1';
+            case 2: return 'lg:grid-cols-2';
+            case 3: return 'lg:grid-cols-3';
+            case 4: return 'lg:grid-cols-4';
+            default: return 'lg:grid-cols-1';
+        }
+    }
+
+    return (
+        <div
+            className=" shadow-lg rounded-sm w-full max-w-[1280px] px-3 sm:px-12 lg:px-20 py-[10px] sm:py-[40px] lg:py-[86px] font-inter flex flex-col items-center justify-center max-h-[720px] aspect-video bg-white relative z-20 mx-auto"
+
+        >
+            <div className="text-center mb-4 lg:mb-16 w-full">
+                <h1 className="text-gray-900 text-xl sm:text-2xl lg:text-[40px] leading-[36px] lg:leading-[48px] font-bold">
+                    {slideData?.title || 'Featured Content'}
+                </h1>
+            </div>
+
+            <div className={`grid grid-cols-1 lg:grid-cols-2 ${getGridCols(items.length)} gap-3 lg:gap-6 w-full`}>
+                {items.map((item, index) => (
+                    <div
+                        key={index}
+                        style={{
+                            boxShadow: "0 2px 10px 0 rgba(43, 43, 43, 0.2)",
+                        }}
+                        className="flex flex-col w-full rounded-lg overflow-hidden relative"
+                    >
+                        {/* Image */}
+                        <div className="max-md:h-[140px] max-lg:h-[180px] h-48 w-full">
+                            <img
+                                src={item.image?.__image_url__ || ''}
+                                alt={item.image?.__image_prompt__ || item.heading}
+                                className="w-full h-full object-cover"
+                            />
+                        </div>
+
+                        {/* Content */}
+                        <div className="space-y-2 p-3 lg:p-6">
+                            <h3 className="text-gray-900 text-base sm:text-lg lg:text-[24px] leading-[26px] lg:leading-[32px] font-bold">
+                                {item.heading}
+                            </h3>
+                            <p className="text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal">
+                                {item.description}
+                            </p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default Type3SlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/default/Type4SlideLayout.tsx b/servers/nextjs/presentation-layouts/default/Type4SlideLayout.tsx
new file mode 100644
index 00000000..d103b18a
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/default/Type4SlideLayout.tsx
@@ -0,0 +1,212 @@
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';
+import React from 'react'
+import { BarChart, Bar, LineChart, Line, PieChart, Pie, AreaChart, Area, ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Cell, ResponsiveContainer } from "recharts";
+import * as z from "zod";
+
+export const layoutId = 'type4-slide'
+export const layoutName = 'Type4 Slide'
+export const layoutDescription = 'A chart-focused layout with title, chart visualization, and description text.'
+
+const chartDataSchema = z.object({
+    name: z.string().meta({ description: "Data point name" }),
+    value: z.number().meta({ description: "Data point value" }),
+    category: z.string().optional().meta({ description: "Category for grouping" }),
+    x: z.number().optional().meta({ description: "X coordinate for scatter plots" }),
+    y: z.number().optional().meta({ description: "Y coordinate for scatter plots" }),
+});
+
+
+const type4SlideSchema = z.object({
+    title: z.string().min(3).max(50).default('Chart Analysis').meta({
+        description: "Main title of the slide",
+    }),
+    description: z.string().min(10).max(130).default('This chart shows important data trends and insights that help understand the current situation and make informed decisions.').meta({
+        description: "Description text for the chart",
+    }),
+    chartData: z.any().optional().meta({
+        description: "Chart data object",
+    }),
+    isFullSizeChart: z.boolean().default(false).meta({
+        description: "Whether to display chart in full size mode",
+    }),
+    chartType: z.enum(['bar', 'line', 'pie', 'area', 'scatter']).default('bar').meta({
+        description: "Type of chart to display",
+    }),
+    data: z.array(chartDataSchema).min(2).max(10).default([
+        { name: '2021', value: 5 },
+        { name: '2022', value: 12 },
+        { name: '2023', value: 18 },
+        { name: '2024', value: 23 },
+        { name: '2025', value: 26 },
+    ]).meta({
+        description: "Chart data points",
+    }),
+    dataKey: z.string().default('value').meta({
+        description: "Key field for chart values",
+    }),
+    categoryKey: z.string().default('name').meta({
+        description: "Key field for chart categories",
+    }),
+    color: z.string().default('#3b82f6').meta({
+        description: "Primary color for chart elements",
+    }),
+    showLegend: z.boolean().default(false).meta({
+        description: "Whether to show chart legend",
+    }),
+    showTooltip: z.boolean().default(true).meta({
+        description: "Whether to show chart tooltip",
+    }),
+})
+
+
+const chartConfig = {
+    value: {
+        label: "Value",
+    },
+    name: {
+        label: "Name",
+    },
+};
+const CHART_COLORS = [
+    '#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6',
+    '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6366f1'
+];
+
+export const Schema = type4SlideSchema
+
+export type Type4SlideData = z.infer<typeof type4SlideSchema>
+
+interface Type4SlideLayoutProps {
+    data?: Partial<Type4SlideData>
+}
+
+const Type4SlideLayout: React.FC<Type4SlideLayoutProps> = ({ data: slideData }) => {
+    const chartData = slideData?.data || [];
+    const chartType = slideData?.chartType || 'line';
+    const color = slideData?.color || '#3b82f6';
+    const dataKey = slideData?.dataKey || 'value';
+    const categoryKey = slideData?.categoryKey || 'name';
+    const showLegend = slideData?.showLegend || false;
+    const showTooltip = slideData?.showTooltip || true;
+    const renderChart = () => {
+        const commonProps = {
+            data: chartData,
+            margin: { top: 10, right: 20, left: 0, bottom: 30 },
+        };
+
+        switch (chartType) {
+            case 'bar':
+                return (
+                    <BarChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={categoryKey} />
+                        <YAxis />
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Bar dataKey={dataKey} fill={color} radius={[4, 4, 0, 0]} />
+                    </BarChart>
+                );
+
+            case 'line':
+                return (
+                    <LineChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={categoryKey} />
+                        <YAxis />
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Line
+                            type="monotone"
+                            dataKey={dataKey}
+                            stroke={color}
+                            strokeWidth={3}
+                            dot={{ fill: color, strokeWidth: 2, r: 4 }}
+                        />
+                    </LineChart>
+                );
+
+            case 'area':
+                return (
+                    <AreaChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={categoryKey} />
+                        <YAxis />
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Area
+                            type="monotone"
+                            dataKey={dataKey}
+                            stroke={color}
+                            fill={color}
+                            fillOpacity={0.6}
+                        />
+                    </AreaChart>
+                );
+
+            case 'pie':
+                return (
+                    <PieChart margin={{ top: 20, right: 30, left: 40, bottom: 60 }}>
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Pie
+                            data={chartData}
+                            cx="50%"
+                            cy="40%"
+                            outerRadius={70}
+                            fill={color}
+                            dataKey={dataKey}
+                            label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
+                        >
+                            {chartData.map((entry, index) => (
+                                <Cell key={`cell-${index}`} fill={CHART_COLORS[index % CHART_COLORS.length]} />
+                            ))}
+                        </Pie>
+                    </PieChart>
+                );
+
+            case 'scatter':
+                return (
+                    <ScatterChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey="x" type="number" />
+                        <YAxis dataKey="y" type="number" />
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Scatter dataKey="value" fill={color} />
+                    </ScatterChart>
+                );
+
+            default:
+                return <div>Unsupported chart type</div>;
+        }
+    };
+
+    return (
+        <div
+            className=" rounded-sm w-full max-w-[1280px] px-3 py-[10px] sm:px-12 lg:px-20 sm:py-[40px] lg:py-[86px] shadow-lg max-h-[720px] flex flex-col items-center justify-center aspect-video bg-white relative z-20 mx-auto"
+
+        >
+            <h1 className="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold text-gray-900 leading-tight mb-4 lg:mb-8">
+                {slideData?.title || 'Chart Analysis'}
+            </h1>
+
+            <div className={`flex w-full  items-center  `}>
+                <div className="w-full">
+                    <div className="flex-1 bg-white rounded-lg shadow-sm border border-gray-100 p-4">
+                        <ChartContainer config={chartConfig} className="h-full w-full">
+                            {renderChart()}
+                        </ChartContainer>
+                    </div>
+                </div>
+                <div className="w-full text-center">
+                    <p className={`text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal`}>
+                        {slideData?.description || 'This chart shows important data trends and insights that help understand the current situation and make informed decisions.'}
+                    </p>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Type4SlideLayout
+
diff --git a/servers/nextjs/presentation-layouts/default/Type5SlideLayout.tsx b/servers/nextjs/presentation-layouts/default/Type5SlideLayout.tsx
new file mode 100644
index 00000000..3ba077f1
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/default/Type5SlideLayout.tsx
@@ -0,0 +1,100 @@
+import React from 'react'
+import * as z from "zod";
+
+export const layoutId = 'type5-slide'
+export const layoutName = 'Type5 Slide'
+export const layoutDescription = 'A two-column layout with title and description on the left, and numbered items with large numerals on the right.'
+
+const type5SlideSchema = z.object({
+    title: z.string().min(3).max(50).default('Key Points').meta({
+        description: "Main title of the slide",
+    }),
+    description: z.string().min(10).max(130).default('Here is the main description that provides context and introduction to the numbered points on the right side.').meta({
+        description: "Main description text",
+    }),
+    items: z.array(z.object({
+        heading: z.string().min(2).max(50).meta({
+            description: "Item heading",
+        }),
+        description: z.string().min(10).max(130).meta({
+            description: "Item description",
+        })
+    })).min(2).max(3).default([
+        {
+            heading: 'First Key Point',
+            description: 'Detailed explanation of the first important point that supports the main topic'
+        },
+        {
+            heading: 'Second Key Point',
+            description: 'Detailed explanation of the second important point with relevant information'
+        },
+        {
+            heading: 'Third Key Point',
+            description: 'Detailed explanation of the third important point that concludes the discussion'
+        }
+    ]).meta({
+        description: "List of numbered items (2-3 items)",
+    })
+})
+
+export const Schema = type5SlideSchema
+
+export type Type5SlideData = z.infer<typeof type5SlideSchema>
+
+interface Type5SlideLayoutProps {
+    data?: Partial<Type5SlideData>
+}
+
+const Type5SlideLayout: React.FC<Type5SlideLayoutProps> = ({ data: slideData }) => {
+
+    return (
+        <div
+            className="rounded-sm w-full max-w-[1280px] font-inter shadow-lg px-3 sm:px-12 lg:px-20 py-[10px] sm:py-[40px] lg:py-[86px] flex flex-col items-center justify-center max-h-[720px] aspect-video bg-white relative z-20 mx-auto"
+
+        >
+            <div className="flex flex-col lg:flex-row gap-4 sm:gap-18 md:gap-16 items-center w-full">
+                {/* Left section - Title and Description */}
+                <div className="lg:w-1/2 lg:space-y-8 ">
+                    <h1 className="text-gray-900 text-xl sm:text-2xl lg:text-[40px] leading-[36px] lg:leading-[48px] font-bold">
+                        {slideData?.title || 'Key Points'}
+                    </h1>
+
+                    <p className="text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal">
+                        {slideData?.description || 'Here is the main description that provides context and introduction to the numbered points on the right side.'}
+                    </p>
+                </div>
+
+                {/* Right section - Numbered items */}
+                <div className="lg:w-1/2 relative">
+                    <div className="space-y-3 lg:space-y-6">
+                        {slideData?.items?.map((item, index) => (
+                            <div
+                                key={index}
+                                style={{
+                                    boxShadow: "0 2px 10px 0 rgba(43, 43, 43, 0.2)",
+                                }}
+                                className="rounded-lg p-3 lg:p-6 relative"
+                            >
+                                <div className="flex gap-6">
+                                    <div className="text-[26px] lg:text-[32px] leading-[40px] px-1 font-bold mb-4 text-blue-600">
+                                        {`0${index + 1}`}
+                                    </div>
+                                    <div className="space-y-1">
+                                        <h3 className="text-gray-900 text-base sm:text-lg lg:text-[24px] leading-[26px] lg:leading-[32px] font-bold">
+                                            {item.heading}
+                                        </h3>
+                                        <p className="text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal">
+                                            {item.description}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Type5SlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/default/Type6SlideLayout.tsx b/servers/nextjs/presentation-layouts/default/Type6SlideLayout.tsx
new file mode 100644
index 00000000..f7e4a517
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/default/Type6SlideLayout.tsx
@@ -0,0 +1,161 @@
+import React from 'react'
+import * as z from "zod";
+import { IconSchema } from '@/presentation-layouts/defaultSchemes';
+
+export const layoutId = 'type6-slide'
+export const layoutName = 'Type6 Slide'
+export const layoutDescription = 'A centered title with a flexible grid of icon-based content items, adapting layout based on item count.'
+
+const type6SlideSchema = z.object({
+    title: z.string().min(3).max(50).default('Our Services').meta({
+        description: "Main title of the slide",
+    }),
+    items: z.array(z.object({
+        heading: z.string().min(2).max(50).meta({
+            description: "Item heading",
+        }),
+        description: z.string().min(10).max(130).meta({
+            description: "Item description",
+        }),
+        icon: IconSchema,
+    })).min(2).max(6).default([
+        {
+            heading: 'Professional Service',
+            description: 'High-quality professional services tailored to your specific needs and requirements',
+            icon: {
+                __icon_url__: 'https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css',
+                __icon_query__: 'Professional Service'
+            }
+        },
+        {
+            heading: 'Expert Consultation',
+            description: 'Expert advice and consultation from experienced professionals in the field',
+            icon: {
+                __icon_url__: 'https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css',
+                __icon_query__: 'Expert Consultation'
+            }
+        },
+        {
+            heading: 'Quality Assurance',
+            description: 'Comprehensive quality assurance processes to ensure excellent results',
+            icon: {
+                __icon_url__: 'https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css',
+                __icon_query__: 'Quality Assurance'
+            }
+        },
+        {
+            heading: 'Customer Support',
+            description: 'Dedicated customer support available to assist you throughout the process',
+            icon: {
+                __icon_url__: 'https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css',
+                __icon_query__: 'Customer Support'
+            }
+        }
+    ]).meta({
+        description: "List of service items (2-6 items)",
+    })
+})
+
+export const Schema = type6SlideSchema
+
+export type Type6SlideData = z.infer<typeof type6SlideSchema>
+
+interface Type6SlideLayoutProps {
+    data?: Partial<Type6SlideData>
+}
+
+const Type6SlideLayout: React.FC<Type6SlideLayoutProps> = ({ data: slideData }) => {
+    const items = slideData?.items || []
+    const isGridLayout = items.length >= 4
+
+    const getGridCols = (length: number) => {
+        switch (length) {
+            case 1: return 'lg:grid-cols-1';
+            case 2: return 'lg:grid-cols-2';
+            case 3: return 'lg:grid-cols-3';
+            case 4: return 'lg:grid-cols-4';
+            case 5: return 'lg:grid-cols-5';
+            case 6: return 'lg:grid-cols-6';
+            default: return 'lg:grid-cols-1';
+        }
+    }
+
+    const renderGridContent = () => {
+        return (
+            <div className={`grid grid-cols-1 ${items.length > 4 ? 'md:grid-cols-3' : 'md:grid-cols-2'} gap-4 sm:gap-6 lg:gap-8 mt-4 lg:mt-12 w-full`}>
+                {items.map((item, index) => (
+                    <div
+                        key={index}
+                        style={{
+                            boxShadow: "0 2px 10px 0 rgba(43, 43, 43, 0.2)",
+                        }}
+                        className="w-full rounded-lg p-3 lg:p-6 relative"
+                    >
+                        <div className="flex items-start gap-2 mg:gap-4">
+                            <div className="flex-shrink-0 lg:w-16">
+                                <div className="w-12 h-12 lg:w-16 lg:h-16 bg-blue-600 rounded-lg flex items-center justify-center text-white text-xl lg:text-2xl">
+                                    <img src={item.icon.__icon_url__} className='w-full h-full object-contain' alt={item.icon.__icon_query__} />
+                                </div>
+                            </div>
+                            <div>
+                                <h3 className="text-gray-900 text-base sm:text-lg lg:text-[24px] leading-[26px] lg:leading-[32px] font-bold mb-2">
+                                    {item.heading}
+                                </h3>
+                                <p className="text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal">
+                                    {item.description}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        )
+    }
+
+    const renderHorizontalContent = () => {
+        return (
+            <div className={`grid grid-cols-1 sm:grid-cols-2 ${getGridCols(items.length)} w-full gap-3 lg:gap-8 mt-4 lg:mt-12`}>
+                {items.map((item, index) => (
+                    <div
+                        key={index}
+                        style={{
+                            boxShadow: "0 2px 10px 0 rgba(43, 43, 43, 0.2)",
+                        }}
+                        className="w-full rounded-lg p-3 lg:p-6 relative"
+                    >
+                        <div className="text-center mb-4">
+                            <div className="w-16 h-16 lg:w-20 lg:h-20 bg-blue-600 rounded-lg flex items-center justify-center text-white text-2xl lg:text-3xl mx-auto mb-4">
+                                <img src={item.icon.__icon_url__} className='w-full h-full object-contain' alt={item.icon.__icon_query__} />
+                            </div>
+                        </div>
+                        <div className="lg:space-y-4 mt-2 lg:mt-4">
+                            <h3 className="text-gray-900 text-base sm:text-lg lg:text-[24px] leading-[26px] lg:leading-[32px] font-bold text-center">
+                                {item.heading}
+                            </h3>
+                            <p className="text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal text-center">
+                                {item.description}
+                            </p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        )
+    }
+
+    return (
+        <div
+            className=" rounded-sm w-full max-w-[1280px] font-inter shadow-lg px-3 sm:px-12 lg:px-20 py-[10px] sm:py-[40px] lg:py-[86px] flex flex-col items-center justify-center max-h-[720px] aspect-video bg-white relative z-20 mx-auto"
+
+        >
+            <div className="text-center sm:pb-2 lg:pb-8 w-full">
+                <h1 className="text-gray-900 text-xl sm:text-2xl lg:text-[40px] leading-[36px] lg:leading-[48px] font-bold">
+                    {slideData?.title || 'Our Services'}
+                </h1>
+            </div>
+
+            {isGridLayout ? renderGridContent() : renderHorizontalContent()}
+        </div>
+    )
+}
+
+export default Type6SlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/default/Type7SlideLayout.tsx b/servers/nextjs/presentation-layouts/default/Type7SlideLayout.tsx
new file mode 100644
index 00000000..c802e405
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/default/Type7SlideLayout.tsx
@@ -0,0 +1,173 @@
+import React from 'react'
+import * as z from "zod";
+import { IconSchema } from '@/presentation-layouts/defaultSchemes';
+
+export const layoutId = 'type7-slide'
+export const layoutName = 'Type7 Slide'
+export const layoutDescription = 'A centered title with a flexible grid of icon-based content items, adapting layout based on item count.'
+
+const type7SlideSchema = z.object({
+    title: z.string().min(3).max(50).default('Our Services').meta({
+        description: "Main title of the slide",
+    }),
+    items: z.array(z.object({
+        heading: z.string().min(2).max(50).meta({
+            description: "Item heading",
+        }),
+        description: z.string().min(10).max(130).meta({
+            description: "Item description",
+        }),
+        icon: IconSchema.default({
+            __icon_url__: 'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_1280.jpg',
+            __icon_query__: 'Default icon'
+        }).meta({
+            description: "Icon for the item",
+        })
+    })).min(2).max(6).default([
+        {
+            heading: 'Professional Service',
+            description: 'High-quality professional services tailored to your specific needs and requirements',
+            icon: {
+                __icon_url__: 'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_1280.jpg',
+                __icon_query__: 'Professional service icon'
+            }
+        },
+        {
+            heading: 'Expert Consultation',
+            description: 'Expert advice and consultation from experienced professionals in the field',
+            icon: {
+                __icon_url__: 'https://cdn.pixabay.com/photo/2016/02/19/11/19/office-1209640_1280.jpg',
+                __icon_query__: 'Expert consultation icon'
+            }
+        },
+        {
+            heading: 'Quality Assurance',
+            description: 'Comprehensive quality assurance processes to ensure excellent results',
+            icon: {
+                __icon_url__: 'https://cdn.pixabay.com/photo/2017/08/10/08/47/laptop-2619235_1280.jpg',
+                __icon_query__: 'Quality assurance icon'
+            }
+        },
+        {
+            heading: 'Customer Support',
+            description: 'Dedicated customer support available to assist you throughout the process',
+            icon: {
+                __icon_url__: 'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_1280.jpg',
+                __icon_query__: 'Customer support icon'
+            }
+        }
+    ]).meta({
+        description: "List of service items (2-6 items)",
+    })
+})
+
+export const Schema = type7SlideSchema
+
+export type Type7SlideData = z.infer<typeof type7SlideSchema>
+
+interface Type7SlideLayoutProps {
+    data?: Partial<Type7SlideData>
+}
+
+const Type7SlideLayout: React.FC<Type7SlideLayoutProps> = ({ data: slideData }) => {
+    const items = slideData?.items || []
+    const isGridLayout = items.length >= 4
+
+    const getGridCols = (length: number) => {
+        switch (length) {
+            case 1: return 'lg:grid-cols-1';
+            case 2: return 'lg:grid-cols-2';
+            case 3: return 'lg:grid-cols-3';
+            case 4: return 'lg:grid-cols-4';
+            case 5: return 'lg:grid-cols-5';
+            case 6: return 'lg:grid-cols-6';
+            default: return 'lg:grid-cols-1';
+        }
+    }
+
+    const renderGridContent = () => {
+        return (
+            <div className={`grid grid-cols-1 ${items.length > 4 ? 'md:grid-cols-3' : 'md:grid-cols-2'} gap-4 sm:gap-6 lg:gap-8 mt-4 lg:mt-12 w-full`}>
+                {items.map((item, index) => (
+                    <div
+                        key={index}
+                        style={{
+                            boxShadow: "0 2px 10px 0 rgba(43, 43, 43, 0.2)",
+                        }}
+                        className="w-full rounded-lg p-3 lg:p-6 relative"
+                    >
+                        <div className="flex items-start gap-2 md:gap-4">
+                            <div className="flex-shrink-0 lg:w-16">
+                                <div className="w-12 h-12 lg:w-16 lg:h-16 bg-blue-600 rounded-lg flex items-center justify-center overflow-hidden">
+                                    <img
+                                        src={item.icon?.__icon_url__ || ''}
+                                        alt={item.icon?.__icon_query__ || item.heading}
+                                        className="w-full h-full object-cover"
+                                    />
+                                </div>
+                            </div>
+                            <div>
+                                <h3 className="text-gray-900 text-base sm:text-lg lg:text-[24px] leading-[26px] lg:leading-[32px] font-bold mb-2">
+                                    {item.heading}
+                                </h3>
+                                <p className="text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal">
+                                    {item.description}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        )
+    }
+
+    const renderHorizontalContent = () => {
+        return (
+            <div className={`grid grid-cols-1 sm:grid-cols-2 ${getGridCols(items.length)} w-full gap-3 lg:gap-8 mt-4 lg:mt-12`}>
+                {items.map((item, index) => (
+                    <div
+                        key={index}
+                        style={{
+                            boxShadow: "0 2px 10px 0 rgba(43, 43, 43, 0.2)",
+                        }}
+                        className="w-full rounded-lg p-3 lg:p-6 relative"
+                    >
+                        <div className="text-center mb-4">
+                            <div className="w-16 h-16 lg:w-20 lg:h-20 bg-blue-600 rounded-lg flex items-center justify-center mx-auto mb-4 overflow-hidden">
+                                <img
+                                    src={item.icon?.__icon_url__ || ''}
+                                    alt={item.icon?.__icon_query__ || item.heading}
+                                    className="w-full h-full object-cover"
+                                />
+                            </div>
+                        </div>
+                        <div className="lg:space-y-4 mt-2 lg:mt-4">
+                            <h3 className="text-lg sm:text-xl lg:text-2xl font-bold text-gray-900 leading-tight text-center">
+                                {item.heading}
+                            </h3>
+                            <p className="text-sm sm:text-base lg:text-lg text-gray-700 leading-relaxed text-center">
+                                {item.description}
+                            </p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        )
+    }
+
+    return (
+        <div
+            className=" rounded-sm w-full max-w-[1280px] font-inter shadow-lg px-3 sm:px-12 lg:px-20 py-[10px] sm:py-[40px] lg:py-[86px] flex flex-col items-center justify-center max-h-[720px] aspect-video bg-white relative z-20 mx-auto"
+        >
+            <div className="text-center sm:pb-2 lg:pb-8 w-full">
+                <h1 className="text-gray-900 text-xl sm:text-2xl lg:text-[40px] leading-[36px] lg:leading-[48px] font-bold">
+                    {slideData?.title || 'Our Services'}
+                </h1>
+            </div>
+
+            {isGridLayout ? renderGridContent() : renderHorizontalContent()}
+        </div>
+    )
+}
+
+export default Type7SlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/default/Type8SlideLayout.tsx b/servers/nextjs/presentation-layouts/default/Type8SlideLayout.tsx
new file mode 100644
index 00000000..d234a0c7
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/default/Type8SlideLayout.tsx
@@ -0,0 +1,167 @@
+import React from 'react'
+import * as z from "zod";
+import { IconSchema } from '@/presentation-layouts/defaultSchemes';
+
+export const layoutId = 'type8-slide'
+export const layoutName = 'Type8 Slide'
+export const layoutDescription = 'A two-column layout with title and description on the left, and icon-based items on the right.'
+
+const type8SlideSchema = z.object({
+    title: z.string().min(3).max(50).default('Key Features').meta({
+        description: "Main title of the slide",
+    }),
+    description: z.string().min(10).max(130).default('Here is the main description that provides context and introduces the key features outlined on the right side.').meta({
+        description: "Main description text",
+    }),
+    items: z.array(z.object({
+        heading: z.string().min(2).max(50).meta({
+            description: "Item heading",
+        }),
+        description: z.string().min(10).max(130).meta({
+            description: "Item description",
+        }),
+        icon: IconSchema.default({
+            __icon_url__: 'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_1280.jpg',
+            __icon_query__: 'Default icon'
+        }).meta({
+            description: "Icon for the item",
+        })
+    })).min(2).max(3).default([
+        {
+            heading: 'Advanced Features',
+            description: 'Cutting-edge functionality designed to enhance productivity and user experience',
+            icon: {
+                __icon_url__: 'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_1280.jpg',
+                __icon_query__: 'Advanced features icon'
+            }
+        },
+        {
+            heading: 'Reliable Performance',
+            description: 'Consistent and dependable performance across all platforms and devices',
+            icon: {
+                __icon_url__: 'https://cdn.pixabay.com/photo/2016/02/19/11/19/office-1209640_1280.jpg',
+                __icon_query__: 'Reliable performance icon'
+            }
+        },
+        {
+            heading: 'Secure Environment',
+            description: 'Enterprise-grade security measures to protect your data and privacy',
+            icon: {
+                __icon_url__: 'https://cdn.pixabay.com/photo/2017/08/10/08/47/laptop-2619235_1280.jpg',
+                __icon_query__: 'Secure environment icon'
+            }
+        }
+    ]).meta({
+        description: "List of featured items (2-3 items)",
+    })
+})
+
+export const Schema = type8SlideSchema
+
+export type Type8SlideData = z.infer<typeof type8SlideSchema>
+
+interface Type8SlideLayoutProps {
+    data?: Partial<Type8SlideData>
+}
+
+const Type8SlideLayout: React.FC<Type8SlideLayoutProps> = ({ data: slideData }) => {
+    const items = slideData?.items || []
+
+    const renderItems = () => {
+        if (items.length === 2) {
+            // Vertical stacked layout for 2 items
+            return (
+                <div className="space-y-4 lg:space-y-8">
+                    {items.map((item, index) => (
+                        <div
+                            key={index}
+                            style={{
+                                boxShadow: "0 2px 10px 0 rgba(43, 43, 43, 0.2)",
+                            }}
+                            className="rounded-lg p-3 lg:p-6 relative"
+                        >
+                            <div className="text-center mb-4">
+                                <div className="w-16 h-16 lg:w-20 lg:h-20 bg-blue-600 rounded-lg flex items-center justify-center mx-auto mb-4 overflow-hidden">
+                                    <img
+                                        src={item.icon?.__icon_url__ || ''}
+                                        alt={item.icon?.__icon_query__ || item.heading}
+                                        className="w-full h-full object-cover"
+                                    />
+                                </div>
+                            </div>
+                            <div className="space-y-1 lg:space-y-3">
+                                <h3 className="text-gray-900 text-base sm:text-lg lg:text-[24px] leading-[26px] lg:leading-[32px] font-bold text-center">
+                                    {item.heading}
+                                </h3>
+                                <p className="text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal text-center">
+                                    {item.description}
+                                </p>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )
+        } else {
+            // Horizontal layout with side icons for 3+ items
+            return (
+                <div className="space-y-4 lg:space-y-8">
+                    {items.map((item, index) => (
+                        <div
+                            key={index}
+                            style={{
+                                boxShadow: "0 2px 10px 0 rgba(43, 43, 43, 0.2)",
+                            }}
+                            className="rounded-lg p-3 lg:p-6 relative"
+                        >
+                            <div className="flex items-start gap-4">
+                                <div className="w-[64px] h-[64px]">
+                                    <div className="w-full h-full bg-blue-600 rounded-lg flex items-center justify-center overflow-hidden">
+                                        <img
+                                            src={item.icon?.__icon_url__ || ''}
+                                            alt={item.icon?.__icon_query__ || item.heading}
+                                            className="w-full h-full object-cover"
+                                        />
+                                    </div>
+                                </div>
+                                <div className="w-[calc(100%-70px)] lg:space-y-3">
+                                    <h3 className="text-gray-900 text-base sm:text-lg lg:text-[24px] leading-[26px] lg:leading-[32px] font-bold">
+                                        {item.heading}
+                                    </h3>
+                                    <p className="text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal">
+                                        {item.description}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )
+        }
+    }
+
+    return (
+        <div
+            className=" shadow-lg w-full max-w-[1280px] rounded-sm font-inter px-3 sm:px-12 lg:px-20 py-[10px] sm:py-[40px] lg:py-[86px] flex items-center justify-center max-h-[720px] aspect-video bg-white relative z-20 mx-auto"
+        >
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-8 lg:gap-16 items-center w-full">
+                {/* Left section - Title and Description */}
+                <div className="space-y-2 lg:space-y-6">
+                    <h1 className="text-gray-900 text-xl sm:text-2xl lg:text-[40px] leading-[36px] lg:leading-[48px] font-bold">
+                        {slideData?.title || 'Key Features'}
+                    </h1>
+
+                    <p className="text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal">
+                        {slideData?.description || 'Here is the main description that provides context and introduces the key features outlined on the right side.'}
+                    </p>
+                </div>
+
+                {/* Right section - Items */}
+                <div className="relative">
+                    {renderItems()}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Type8SlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/default/Type9SlideLayout.tsx b/servers/nextjs/presentation-layouts/default/Type9SlideLayout.tsx
new file mode 100644
index 00000000..61d1d71d
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/default/Type9SlideLayout.tsx
@@ -0,0 +1,254 @@
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';
+import React from 'react'
+import { BarChart, Bar, LineChart, Line, PieChart, Pie, AreaChart, Area, ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Cell, ResponsiveContainer } from "recharts";
+import * as z from "zod";
+
+export const layoutId = 'type4-slide'
+export const layoutName = 'Type4 Slide'
+export const layoutDescription = 'A chart-focused layout with title, chart visualization, and description text.'
+
+const chartDataSchema = z.object({
+    name: z.string().meta({ description: "Data point name" }),
+    value: z.number().meta({ description: "Data point value" }),
+    category: z.string().optional().meta({ description: "Category for grouping" }),
+    x: z.number().optional().meta({ description: "X coordinate for scatter plots" }),
+    y: z.number().optional().meta({ description: "Y coordinate for scatter plots" }),
+});
+
+
+const type9SlideSchema = z.object({
+    title: z.string().min(3).max(50).default('Chart Analysis').meta({
+        description: "Main title of the slide",
+    }),
+    items: z.array(z.object({
+        heading: z.string().min(2).max(50).meta({
+            description: "Item heading",
+        }),
+        description: z.string().min(10).max(130).meta({
+            description: "Item description",
+        })
+    })).min(2).max(3).default([
+        {
+            heading: 'First Key Point',
+            description: 'Detailed explanation of the first important point that supports the main topic'
+        },
+        {
+            heading: 'Second Key Point',
+            description: 'Detailed explanation of the second important point with relevant information'
+        },
+        {
+            heading: 'Third Key Point',
+            description: 'Detailed explanation of the third important point that concludes the discussion'
+        }
+    ]).meta({
+        description: "List of numbered items (2-3 items)",
+    }),
+    chartData: z.any().optional().meta({
+        description: "Chart data object",
+    }),
+    isFullSizeChart: z.boolean().default(false).meta({
+        description: "Whether to display chart in full size mode",
+    }),
+    chartType: z.enum(['bar', 'line', 'pie', 'area', 'scatter']).default('pie').meta({
+        description: "Type of chart to display",
+    }),
+    data: z.array(chartDataSchema).min(2).max(10).default([
+        { name: '2021', value: 5 },
+        { name: '2022', value: 12 },
+        { name: '2023', value: 18 },
+        { name: '2024', value: 23 },
+        { name: '2025', value: 26 },
+    ]).meta({
+        description: "Chart data points",
+    }),
+    dataKey: z.string().default('value').meta({
+        description: "Key field for chart values",
+    }),
+    categoryKey: z.string().default('name').meta({
+        description: "Key field for chart categories",
+    }),
+    color: z.string().default('#3b82f6').meta({
+        description: "Primary color for chart elements",
+    }),
+    showLegend: z.boolean().default(false).meta({
+        description: "Whether to show chart legend",
+    }),
+    showTooltip: z.boolean().default(true).meta({
+        description: "Whether to show chart tooltip",
+    }),
+})
+
+
+const chartConfig = {
+    value: {
+        label: "Value",
+    },
+    name: {
+        label: "Name",
+    },
+};
+const CHART_COLORS = [
+    '#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6',
+    '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6366f1'
+];
+
+export const Schema = type9SlideSchema
+
+export type Type9SlideData = z.infer<typeof type9SlideSchema>
+
+interface Type9SlideLayoutProps {
+    data?: Partial<Type9SlideData>
+}
+
+const Type9SlideLayout: React.FC<Type9SlideLayoutProps> = ({ data: slideData }) => {
+    const chartData = slideData?.data || [];
+    const chartType = slideData?.chartType || 'line';
+    const color = slideData?.color || '#3b82f6';
+    const dataKey = slideData?.dataKey || 'value';
+    const categoryKey = slideData?.categoryKey || 'name';
+    const showLegend = slideData?.showLegend || false;
+    const showTooltip = slideData?.showTooltip || true;
+    const renderChart = () => {
+        const commonProps = {
+            data: chartData,
+            margin: { top: 10, right: 20, left: 0, bottom: 30 },
+        };
+
+        switch (chartType) {
+            case 'bar':
+                return (
+                    <BarChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={categoryKey} />
+                        <YAxis />
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Bar dataKey={dataKey} fill={color} radius={[4, 4, 0, 0]} />
+                    </BarChart>
+                );
+
+            case 'line':
+                return (
+                    <LineChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={categoryKey} />
+                        <YAxis />
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Line
+                            type="monotone"
+                            dataKey={dataKey}
+                            stroke={color}
+                            strokeWidth={3}
+                            dot={{ fill: color, strokeWidth: 2, r: 4 }}
+                        />
+                    </LineChart>
+                );
+
+            case 'area':
+                return (
+                    <AreaChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={categoryKey} />
+                        <YAxis />
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Area
+                            type="monotone"
+                            dataKey={dataKey}
+                            stroke={color}
+                            fill={color}
+                            fillOpacity={0.6}
+                        />
+                    </AreaChart>
+                );
+
+            case 'pie':
+                return (
+                    <PieChart margin={{ top: 20, right: 30, left: 40, bottom: 60 }}>
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Pie
+                            data={chartData}
+                            cx="50%"
+                            cy="40%"
+                            outerRadius={70}
+                            fill={color}
+                            dataKey={dataKey}
+                            label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
+                        >
+                            {chartData.map((entry, index) => (
+                                <Cell key={`cell-${index}`} fill={CHART_COLORS[index % CHART_COLORS.length]} />
+                            ))}
+                        </Pie>
+                    </PieChart>
+                );
+
+            case 'scatter':
+                return (
+                    <ScatterChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey="x" type="number" />
+                        <YAxis dataKey="y" type="number" />
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Scatter dataKey="value" fill={color} />
+                    </ScatterChart>
+                );
+
+            default:
+                return <div>Unsupported chart type</div>;
+        }
+    };
+
+    return (
+        <div
+            className=" rounded-sm w-full max-w-[1280px] px-3 py-[10px] sm:px-12 lg:px-20 sm:py-[40px] lg:py-[86px] shadow-lg max-h-[720px] flex flex-col items-center justify-center aspect-video bg-white relative z-20 mx-auto"
+
+        >
+            <h1 className="text-2xl text-start sm:text-3xl lg:text-4xl xl:text-5xl font-bold text-gray-900 leading-tight mb-4 lg:mb-8">
+                {slideData?.title || 'Chart Analysis'}
+            </h1>
+
+            <div className={`flex gap-6 w-full  items-center  `}>
+                <div className="w-1/2">
+                    <div className="flex-1 bg-white rounded-lg shadow-sm border border-gray-100 p-4">
+                        <ChartContainer config={chartConfig} className="h-full w-full">
+                            {renderChart()}
+                        </ChartContainer>
+                    </div>
+                </div>
+                <div className="lg:w-1/2 relative">
+                    <div className="space-y-3 lg:space-y-6">
+                        {slideData?.items?.map((item, index) => (
+                            <div
+                                key={index}
+                                style={{
+                                    boxShadow: "0 2px 10px 0 rgba(43, 43, 43, 0.2)",
+                                }}
+                                className="rounded-lg p-3 lg:p-6 relative"
+                            >
+                                <div className="flex gap-6">
+                                    <div className="text-[26px] lg:text-[32px] leading-[40px] px-1 font-bold mb-4 text-blue-600">
+                                        {`0${index + 1}`}
+                                    </div>
+                                    <div className="space-y-1">
+                                        <h3 className="text-gray-900 text-base sm:text-lg lg:text-[24px] leading-[26px] lg:leading-[32px] font-bold">
+                                            {item.heading}
+                                        </h3>
+                                        <p className="text-gray-700 text-sm sm:text-base lg:text-[20px] leading-[20px] lg:leading-[30px] font-normal">
+                                            {item.description}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Type9SlideLayout
+
diff --git a/servers/nextjs/presentation-layouts/default/setting.json b/servers/nextjs/presentation-layouts/default/setting.json
new file mode 100644
index 00000000..d6a15682
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/default/setting.json
@@ -0,0 +1,5 @@
+{
+    "description": "Default layout for presentations",
+    "ordered": false,
+    "isDefault": true
+}
\ No newline at end of file