Dev

frontend/src/app/[username]/page.tsx

@@ -24,6 +24,7 @@ import {
   ShareProfileBox,
   PresentationsGrid,
   SharedPresentationsGrid,
+  TemplatesGrid,
 } from "@/features/profile";
 import type {
   ProfileUser,
@@ -65,6 +66,11 @@ export default function UserProfilePage() {
     Presentation[]
   >([]);
 
+  // Templates
+  // Note: setTemplates will be used when backend API is implemented
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [templates, setTemplates] = useState<Presentation[]>([]);
+
   // Presentation modals
   const [deleteModal, setDeleteModal] = useState<DeleteModalState>({
     isOpen: false,
@@ -510,6 +516,32 @@ export default function UserProfilePage() {
 
             {/* Shared Presentations - only for own profile */}
             {isOwnProfile && (
+              <>
+                <SharedPresentationsGrid
+                  presentations={sharedPresentations}
+                  username={username}
+                  shareMenuOpen={shareMenuOpen}
+                  presentationLinkCopied={presentationLinkCopied}
+                  onShare={handleSharePresentation}
+                  onView={handleOpenViewPopup}
+                  onEdit={handleOpenEditModal}
+                  onDelete={openDeleteModal}
+                  menuRefs={shareMenuRefs.current}
+                />
+
+                {/* Templates */}
+                <TemplatesGrid
+                  templates={templates}
+                  username={username}
+                  shareMenuOpen={shareMenuOpen}
+                  presentationLinkCopied={presentationLinkCopied}
+                  onShare={handleSharePresentation}
+                  onView={handleOpenViewPopup}
+                  onEdit={handleOpenEditModal}
+                  onDelete={openDeleteModal}
+                  menuRefs={shareMenuRefs.current}
+                />
+              </>
               <SharedPresentationsGrid
                 presentations={sharedPresentations}
                 username={username}

frontend/src/features/profile/components/SharedPresentationsGrid.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ContactRound, Users } from "lucide-react";
+import { FileUser, Users } from "lucide-react";
 import type { Presentation } from "@/features/presentation/services/presentationService";
 import type { SharePlatform } from "../types";
 import { PresentationCard } from "./PresentationCard";
@@ -69,7 +69,7 @@ export function SharedPresentationsGrid({
       ) : (
         <div className="py-12 px-4 text-center">
           <div className="w-16 h-16 bg-muted/50 rounded-full flex items-center justify-center mx-auto mb-4">
-            <ContactRound className="w-8 h-8 text-muted-foreground" />
+            <FileUser className="w-8 h-8 text-muted-foreground" />
           </div>
           <h3 className="text-lg font-semibold text-foreground mb-2">
             No shared presentations

frontend/src/features/profile/components/TemplatesGrid.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { FileSymlink } from "lucide-react";
+import type { Presentation } from "@/features/presentation/services/presentationService";
+import type { SharePlatform } from "../types";
+import { PresentationCard } from "./PresentationCard";
+
+interface TemplatesGridProps {
+  templates: Presentation[];
+  username: string;
+  shareMenuOpen: string | null;
+  presentationLinkCopied: string | null;
+  onShare: (slug: string, name: string, platform?: SharePlatform) => void;
+  onView: (slug: string) => void;
+  onEdit: (presentation: Presentation) => void;
+  onDelete: (slug: string, name: string) => void;
+  menuRefs: Record<string, HTMLDivElement | null>;
+}
+
+export function TemplatesGrid({
+  templates,
+  username,
+  shareMenuOpen,
+  presentationLinkCopied,
+  onShare,
+  onView,
+  onEdit,
+  onDelete,
+  menuRefs,
+}: TemplatesGridProps) {
+  return (
+    <div className="bg-background border border-input rounded-sm p-6 mt-6">
+      {/* Header */}
+      <div className="flex items-center gap-3 mb-6">
+        <div className="p-2 bg-primary/10 rounded-md">
+          <FileSymlink className="w-5 h-5 text-primary" />
+        </div>
+        <div>
+          <h3 className="text-base font-semibold text-foreground">Templates</h3>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            Browse and use presentation templates
+          </p>
+        </div>
+      </div>
+
+      {/* Templates Grid */}
+      {templates.length > 0 ? (
+        <div className="grid grid-cols-2 gap-4 2xl:grid-cols-4">
+          {templates.map((template) => (
+            <PresentationCard
+              key={template.presentationId}
+              presentation={template}
+              username={username}
+              isOwnProfile={false}
+              shareMenuOpen={shareMenuOpen}
+              presentationLinkCopied={presentationLinkCopied}
+              onShare={onShare}
+              onView={onView}
+              onEdit={onEdit}
+              onDelete={onDelete}
+              menuRef={(el) => {
+                menuRefs[template.slug] = el;
+              }}
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="py-12 px-4 text-center">
+          <div className="w-16 h-16 bg-muted/50 rounded-full flex items-center justify-center mx-auto mb-4">
+            <FileSymlink className="w-8 h-8 text-muted-foreground" />
+          </div>
+          <h3 className="text-lg font-semibold text-foreground mb-2">
+            No templates available
+          </h3>
+          <p className="text-sm text-muted-foreground max-w-md mx-auto">
+            Templates will appear here when they become available
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/features/profile/components/index.ts

@@ -2,5 +2,6 @@ export { ProfileCard } from "./ProfileCard";
 export { ShareProfileBox } from "./ShareProfileBox";
 export { PresentationsGrid } from "./PresentationsGrid";
 export { SharedPresentationsGrid } from "./SharedPresentationsGrid";
+export { TemplatesGrid } from "./TemplatesGrid";
 export { PresentationCard } from "./PresentationCard";
 export { ShareMenu } from "./ShareMenu";