diff --git a/servers/nextjs/app/(presentation-generator)/context/LayoutContext.tsx b/servers/nextjs/app/(presentation-generator)/context/LayoutContext.tsx
index d1612d74..71fa5f87 100644
--- a/servers/nextjs/app/(presentation-generator)/context/LayoutContext.tsx
+++ b/servers/nextjs/app/(presentation-generator)/context/LayoutContext.tsx
@@ -69,6 +69,7 @@ export interface LayoutContextType {
   isPreloading: boolean;
   cacheSize: number;
   refetch: () => Promise<void>;
+  getCustomTemplateFonts: (presentationId: string) => string[] | null;
 }
 
 const LayoutContext = createContext<LayoutContextType | undefined>(undefined);
@@ -129,6 +130,7 @@ export const LayoutProvider: React.FC<{
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [isPreloading, setIsPreloading] = useState(false);
+  const [customTemplateFonts, setCustomTemplateFonts] = useState<Map<string, string[]>>(new Map());
   const dispatch = useDispatch();
 
   const buildData = async (groupedLayoutsData: GroupedLayoutsResponse[]) => {
@@ -336,7 +338,6 @@ export const LayoutProvider: React.FC<{
 
   const LoadCustomLayouts = async () => {
     const layouts: LayoutInfo[] = [];
-
     const layoutsById = new Map<string, LayoutInfo>();
     const layoutsByGroup = new Map<string, Set<string>>();
     const groupSettingsMap = new Map<string, GroupSetting>();
@@ -348,9 +349,9 @@ export const LayoutProvider: React.FC<{
         "/api/v1/ppt/layout-management/summary"
       );
       const customGroupData = await customGroupResponse.json();
-
+      
+      const customFonts = new Map<string, string[]>();
       const customGroup = customGroupData.presentations;
-
       for (const group of customGroup) {
         const groupName = `custom-${group.presentation_id}`;
         fullDataByGroup.set(groupName, []);
@@ -363,6 +364,9 @@ export const LayoutProvider: React.FC<{
         );
         const customLayoutsData = await customLayoutResponse.json();
         const allLayout = customLayoutsData.layouts;
+        
+      
+        
 
         const settings = {
           description: `Custom presentation layouts`,
@@ -402,6 +406,8 @@ export const LayoutProvider: React.FC<{
             layoutCache.set(cacheKey, module.default);
           }
 
+          customFonts.set(presentationId, i.fonts);
+
           const originalLayoutId =
             module.layoutId ||
             i.layout_name.toLowerCase().replace(/layout$/, "");
@@ -447,6 +453,7 @@ export const LayoutProvider: React.FC<{
           groupLayouts.push(layout);
           layouts.push(layout);
         }
+    setCustomTemplateFonts(customFonts);
         // Cache grouped layouts
         groupedLayouts.set(groupName, groupLayouts);
         fullDataByGroup.set(groupName, groupFullData);
@@ -454,6 +461,7 @@ export const LayoutProvider: React.FC<{
     } catch (err: any) {
       console.error("Compilation error:", err);
     }
+ 
 
     return {
       layoutsById,
@@ -548,6 +556,9 @@ export const LayoutProvider: React.FC<{
   const getFullDataByGroup = (groupName: string): FullDataInfo[] => {
     return layoutData?.fullDataByGroup.get(groupName) || [];
   };
+  const getCustomTemplateFonts = (presentationId: string): string[] | null => {
+    return customTemplateFonts.get(presentationId) || null;
+  };
 
   // Load layouts on mount
   useEffect(() => {
@@ -562,6 +573,7 @@ export const LayoutProvider: React.FC<{
     getAllGroups,
     getAllLayouts,
     getFullDataByGroup,
+    getCustomTemplateFonts,
     loading,
     error,
     getLayout,
diff --git a/servers/nextjs/app/(presentation-generator)/outline/components/GroupLayouts.tsx b/servers/nextjs/app/(presentation-generator)/outline/components/GroupLayouts.tsx
index 860304bf..eadcaf93 100644
--- a/servers/nextjs/app/(presentation-generator)/outline/components/GroupLayouts.tsx
+++ b/servers/nextjs/app/(presentation-generator)/outline/components/GroupLayouts.tsx
@@ -13,8 +13,29 @@ const GroupLayouts: React.FC<GroupLayoutsProps> = ({
   onSelectLayoutGroup,
   selectedLayoutGroup,
 }) => {
-  const { getFullDataByGroup } = useLayout();
+  const { getFullDataByGroup,getCustomTemplateFonts } = useLayout();
   const layoutGroup = getFullDataByGroup(group.id);
+  const fonts = getCustomTemplateFonts(group.id.split("custom-")[1]);
+  console.log("fonts here", fonts);
+if(fonts){
+  const injectFonts = (fontUrls: string[]) => {
+    fontUrls.forEach((fontUrl) => {
+      if (!fontUrl) return;
+      const existingStyle = document.querySelector(`style[data-font-url="${fontUrl}"]`);
+      if (existingStyle) return;
+      const fileName = fontUrl.split("/").pop() || "CustomFont";
+      const baseName = fileName.replace(/\.[a-zA-Z0-9]+$/, "");
+      const fontFamily = baseName.replace(/[^A-Za-z0-9_-]/g, "_");
+      const ext = (fileName.split(".").pop() || "ttf").toLowerCase();
+      const format = ext === "otf" ? "opentype" : ext === "woff" ? "woff" : ext === "woff2" ? "woff2" : "truetype";
+      const style = document.createElement("style");
+      style.setAttribute("data-font-url", fontUrl);
+      style.textContent = `@font-face { font-family: '${fontFamily}'; src: url('${fontUrl}') format('${format}'); font-display: swap; }`;
+      document.head.appendChild(style);
+    });
+  };
+  injectFonts(fonts);
+}
   return (
     <div
       onClick={() => onSelectLayoutGroup(group)}
diff --git a/servers/nextjs/app/(presentation-generator)/outline/components/LayoutSelection.tsx b/servers/nextjs/app/(presentation-generator)/outline/components/LayoutSelection.tsx
index f80674ae..c10b5422 100644
--- a/servers/nextjs/app/(presentation-generator)/outline/components/LayoutSelection.tsx
+++ b/servers/nextjs/app/(presentation-generator)/outline/components/LayoutSelection.tsx
@@ -99,6 +99,7 @@ const LayoutSelection: React.FC<LayoutSelectionProps> = ({
       }
     
   }, []);
+   
 
     if (loading) {
         return (
diff --git a/servers/nextjs/app/(presentation-generator)/template-preview/[slug]/page.tsx b/servers/nextjs/app/(presentation-generator)/template-preview/[slug]/page.tsx
index 6b634900..1b9f5d20 100644
--- a/servers/nextjs/app/(presentation-generator)/template-preview/[slug]/page.tsx
+++ b/servers/nextjs/app/(presentation-generator)/template-preview/[slug]/page.tsx
@@ -1,20 +1,86 @@
 "use client";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 // import { useGroupLayoutLoader } from '../hooks/useGroupLayoutLoader'
 import LoadingStates from "../components/LoadingStates";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { ArrowLeft, Home, Trash2 } from "lucide-react";
+import { ArrowLeft, Home, Trash2, Code, Save, X, Pencil } from "lucide-react";
 import { useLayout } from "@/app/(presentation-generator)/context/LayoutContext";
+import Editor from "react-simple-code-editor";
+import { highlight, languages } from "prismjs";
+import "prismjs/components/prism-clike";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-markup";
+import "prismjs/components/prism-jsx";
+import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+
 const GroupLayoutPreview = () => {
   const params = useParams();
   const router = useRouter();
   const slug = params.slug as string;
 
-  const { getFullDataByGroup, loading,refetch } = useLayout();
+  const { getFullDataByGroup, loading, refetch } = useLayout();
   const layoutGroup = getFullDataByGroup(slug);
 
+  const presentationId = slug.replace("custom-", "");
+  const isCustom = slug.includes("custom-");
+
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [currentCode, setCurrentCode] = useState("");
+  const [currentLayoutName, setCurrentLayoutName] = useState("");
+  const [currentLayoutId, setCurrentLayoutId] = useState("");
+  const [currentFonts, setCurrentFonts] = useState<string[] | undefined>(undefined);
+  const [isSaving, setIsSaving] = useState(false);
+  const [layoutsMap, setLayoutsMap] = useState<Record<string, { layout_id: string; layout_name: string; layout_code: string; fonts?: string[] }>>({});
+
+  const injectFonts = (fontUrls: string[]) => {
+    fontUrls.forEach((fontUrl) => {
+      if (!fontUrl) return;
+      const existingStyle = document.querySelector(`style[data-font-url="${fontUrl}"]`);
+      if (existingStyle) return;
+      const fileName = fontUrl.split("/").pop() || "CustomFont";
+      const baseName = fileName.replace(/\.[a-zA-Z0-9]+$/, "");
+      const fontFamily = baseName.replace(/[^A-Za-z0-9_-]/g, "_");
+      const ext = (fileName.split(".").pop() || "ttf").toLowerCase();
+      const format = ext === "otf" ? "opentype" : ext === "woff" ? "woff" : ext === "woff2" ? "woff2" : "truetype";
+      const style = document.createElement("style");
+      style.setAttribute("data-font-url", fontUrl);
+      style.textContent = `@font-face { font-family: '${fontFamily}'; src: url('${fontUrl}') format('${format}'); font-display: swap; }`;
+      document.head.appendChild(style);
+    });
+  };
+
+  useEffect(() => {
+    const loadCustomLayouts = async () => {
+      if (!isCustom) return;
+      try {
+        const res = await fetch(`/api/v1/ppt/layout-management/get-layouts/${presentationId}`);
+        if (!res.ok) return;
+        const data = await res.json();
+        const map: Record<string, { layout_id: string; layout_name: string; layout_code: string; fonts?: string[] }> = {};
+        for (const l of data.layouts || []) {
+          map[l.layout_name] = {
+            layout_id: l.layout_id,
+            layout_name: l.layout_name,
+            layout_code: l.layout_code,
+            fonts: l.fonts,
+          };
+        }
+        setLayoutsMap(map);
+        // Inject all fonts used by this custom group's layouts
+        // const allFonts: string[] = [];
+        // Object.values(map).forEach((entry) => {
+        //   (entry.fonts || []).forEach((f) => allFonts.push(f));
+        // });
+        injectFonts(map[0].fonts || []);
+      } catch (e) {
+        // noop
+      }
+    };
+    loadCustomLayouts();
+  }, [isCustom, presentationId]);
+
   useEffect(() => {
     const existingScript = document.querySelector(
       'script[src*="tailwindcss.com"]'
@@ -27,6 +93,16 @@ const GroupLayoutPreview = () => {
     }
   }, [slug]);
 
+  // Ensure fonts are injected if layoutsMap changes dynamically
+  useEffect(() => {
+    if (!isCustom) return;
+    const allFonts: string[] = [];
+    Object.values(layoutsMap).forEach((entry) => {
+      (entry.fonts || []).forEach((f) => allFonts.push(f));
+    });
+    if (allFonts.length) injectFonts(allFonts);
+  }, [layoutsMap, isCustom]);
+
   // Handle loading state
   if (loading) {
     return <LoadingStates type="loading" />;
@@ -47,6 +123,63 @@ const GroupLayoutPreview = () => {
       router.push("/layout-preview");
     }
   }
+
+  const openEditor = (layoutName: string) => {
+    const entry = layoutsMap[layoutName];
+    if (!entry) return;
+    setCurrentLayoutName(entry.layout_name);
+    setCurrentLayoutId(entry.layout_id);
+    setCurrentCode(entry.layout_code || "");
+    setCurrentFonts(entry.fonts);
+    // Make sure fonts for this layout are loaded before editing
+    injectFonts(entry.fonts || []);
+    setEditorOpen(true);
+  };
+
+  const handleCancel = () => {
+    // reset to original code
+    const entry = layoutsMap[currentLayoutName];
+    if (entry) setCurrentCode(entry.layout_code || "");
+    setEditorOpen(false);
+  };
+
+  const handleSave = async () => {
+    try {
+      setIsSaving(true);
+      const payload = {
+        layouts: [
+          {
+            presentation_id: presentationId,
+            layout_id: currentLayoutId,
+            layout_name: currentLayoutName,
+            layout_code: currentCode,
+            fonts: currentFonts,
+          },
+        ],
+      };
+      const res = await fetch(`/api/v1/ppt/layout-management/save-layouts`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      if (!res.ok) return;
+      // update cache map
+      setLayoutsMap((prev) => ({
+        ...prev,
+        [currentLayoutName]: {
+          layout_id: currentLayoutId,
+          layout_name: currentLayoutName,
+          layout_code: currentCode,
+          fonts: currentFonts,
+        },
+      }));
+      await refetch();
+      setEditorOpen(false);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
   return (
     <div className="min-h-screen bg-gray-50">
       {/* Header */}
@@ -122,10 +255,22 @@ const GroupLayoutPreview = () => {
                         </span>
                       </div>
                     </div>
-                    <div className="text-right">
+                    <div className="flex items-center gap-2">
                       <div className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-700">
                         Layout #{index + 1}
                       </div>
+                      {isCustom && (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="flex items-center gap-2 bg-blue-50 border border-blue-400 text-blue-700"
+                          onClick={() => openEditor(fileName)}
+                          disabled={!layoutsMap[fileName]}
+                          title={!layoutsMap[fileName] ? "Loading layout code..." : "Edit layout code"}
+                        >
+                          <Pencil className="w-4 h-4" /> Edit
+                        </Button>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -150,6 +295,61 @@ const GroupLayoutPreview = () => {
           </div>
         </div>
       </footer>
+
+      {/* Right-side Sheet Editor */}
+      {isCustom && (
+        <Sheet open={editorOpen} onOpenChange={(open) => { if (!open) handleCancel(); }}>
+          <SheetContent side="right" className="w-full sm:max-w-[860px] p-0">
+            <SheetHeader className="px-6 py-4 border-b">
+              <SheetTitle className="flex items-center justify-between w-full">
+                <span className="flex items-center gap-2 text-purple-800">
+                  <Code className="w-5 h-5 text-purple-600" />
+                  HTML Editor
+                </span>
+              </SheetTitle>
+            </SheetHeader>
+            <div className="space-y-4 px-2 overflow-y-auto h-[85%]">
+              <div className="container__content_area">
+                <Editor
+                  value={currentCode}
+                  onValueChange={(code) => setCurrentCode(code)}
+                  highlight={(code) => highlight(code, languages.jsx!, "jsx")}
+                  padding={10}
+                  id="layout-code-editor"
+                  name="layout-code-editor"
+                  className="container__editor"
+                />
+              </div>
+            </div>
+            <SheetFooter className="px-6 py-4 border-b">
+              <SheetTitle className="flex items-center justify-between w-full">
+                <div></div>
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleCancel}
+                    className="flex items-center gap-1"
+                    disabled={isSaving}
+                  >
+                    <X size={14} />
+                    Cancel
+                  </Button>
+                  <Button
+                    onClick={handleSave}
+                    className="flex items-center gap-1 bg-purple-600 hover:bg-purple-700"
+                    size="sm"
+                    disabled={isSaving}
+                  >
+                    <Save size={14} />
+                    Save HTML
+                  </Button>
+                </div>
+              </SheetTitle>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      )}
     </div>
   );
 };