diff --git a/src/app/app/dashboard/templates/page.tsx b/src/app/app/dashboard/templates/page.tsx
index e98be61..65ff8cf 100644
--- a/src/app/app/dashboard/templates/page.tsx
+++ b/src/app/app/dashboard/templates/page.tsx
@@ -1,12 +1,14 @@
 "use client";
+import { useState } from "react";
 import { useTranslations } from "next-intl";
 import { motion } from "framer-motion";
 import { useRouter } from "next/navigation";
-import Image from "next/image";
+import Image, { StaticImageData } from "next/image";
 
 import { useResumeStore } from "@/store/useResumeStore";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 
 import classic from "@/assets/images/template-cover/classic.png";
 import modern from "@/assets/images/template-cover/modern.png";
@@ -16,11 +18,11 @@ import timeline from "@/assets/images/template-cover/timeline.png";
 import { cn } from "@/lib/utils";
 import { DEFAULT_TEMPLATES } from "@/config";
 
-const templateImages: { [key: string]: any } = {
+const templateImages: Record<string, StaticImageData> = {
   classic,
   modern,
   "left-right": leftRight,
-  timeline
+  timeline,
 };
 
 const container = {
@@ -28,20 +30,24 @@ const container = {
   show: {
     opacity: 1,
     transition: {
-      staggerChildren: 0.1
-    }
-  }
+      staggerChildren: 0.1,
+    },
+  },
 };
 
 const item = {
   hidden: { opacity: 0, y: 20 },
-  show: { opacity: 1, y: 0 }
+  show: { opacity: 1, y: 0 },
 };
 
-export default function TemplatesPage() {
+const TemplatesPage = () => {
   const t = useTranslations("dashboard.templates");
   const router = useRouter();
   const createResume = useResumeStore((state) => state.createResume);
+  const [previewTemplate, setPreviewTemplate] = useState<{
+    id: string;
+    open: boolean;
+  } | null>(null);
 
   const handleCreateResume = (templateId: string) => {
     const template = DEFAULT_TEMPLATES.find((t) => t.id === templateId);
@@ -58,12 +64,12 @@ export default function TemplatesPage() {
           themeColor: template.colorScheme.primary,
           sectionSpacing: template.spacing.sectionGap,
           paragraphSpacing: template.spacing.itemGap,
-          pagePadding: template.spacing.contentPadding
+          pagePadding: template.spacing.contentPadding,
         },
         basic: {
           ...resume.basic,
-          layout: template.basic.layout
-        }
+          layout: template.basic.layout,
+        },
       });
     }
 
@@ -81,7 +87,7 @@ export default function TemplatesPage() {
           variants={container}
           initial="hidden"
           animate="show"
-          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
         >
           {DEFAULT_TEMPLATES.map((template) => {
             const templateKey =
@@ -90,34 +96,59 @@ export default function TemplatesPage() {
               <motion.div key={template.id} variants={item}>
                 <Card
                   className={cn(
-                    "group cursor-pointer overflow-hidden transition-all hover:shadow-lg max-w-[280px] mx-auto",
-                    "border-2 hover:border-primary"
+                    "group cursor-pointer overflow-hidden transition-all hover:shadow-md max-w-[300px] mx-auto",
+                    "border border-gray-200 hover:border-primary/40 dark:border-gray-800 rounded-xl"
                   )}
                 >
-                  <CardContent className="p-4">
-                    <div className="relative aspect-[210/297] w-full overflow-hidden rounded-lg bg-gray-100">
-                      <Image
-                        src={templateImages[template.id]}
-                        alt={t(`${templateKey}.name`)}
-                        fill
-                        className="object-contain transition-transform duration-300 group-hover:scale-105 p-1"
-                        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-                        priority
-                      />
-                      <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+                  <CardContent className="p-0">
+                    <div className="relative aspect-[210/297] w-full overflow-hidden bg-gray-50 dark:bg-gray-900">
+                      <div className="absolute top-0 right-0 z-10">
+                        <div className="flex items-center px-3 py-1.5 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm border-l border-b border-gray-200 dark:border-gray-700 rounded-bl-md">
+                          <span className="text-xs font-medium text-gray-700 dark:text-gray-200">
+                            {t(`${templateKey}.name`)}
+                          </span>
+                        </div>
+                      </div>
+
+                      <div className="h-full w-full p-3 transition-all duration-300 group-hover:scale-[1.01]">
+                        <div className="relative h-full w-full overflow-hidden rounded-lg shadow-sm">
+                          <Image
+                            src={templateImages[template.id]}
+                            alt={t(`${templateKey}.name`)}
+                            fill
+                            className="object-contain"
+                            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                            priority
+                          />
+                        </div>
+                      </div>
+
+                      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+
                       <div className="absolute bottom-0 left-0 right-0 p-4 text-white transform translate-y-full transition-transform duration-300 group-hover:translate-y-0">
-                        <h3 className="text-lg font-semibold">
-                          {t(`${templateKey}.name`)}
-                        </h3>
-                        <p className="text-sm text-gray-200 mt-1">
+                        <p className="text-sm text-gray-100 leading-snug">
                           {t(`${templateKey}.description`)}
                         </p>
                       </div>
                     </div>
-                    <div className="mt-4">
+
+                    <div className="p-3 bg-white dark:bg-gray-950 flex space-x-2 border-t border-gray-100 dark:border-gray-800">
                       <Button
-                        className="w-full"
-                        onClick={() => handleCreateResume(template.id)}
+                        variant="outline"
+                        className="flex-1 text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-800"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setPreviewTemplate({ id: template.id, open: true });
+                        }}
+                      >
+                        {t("preview")}
+                      </Button>
+                      <Button
+                        className="flex-1 text-sm font-medium shadow-sm"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleCreateResume(template.id);
+                        }}
                       >
                         {t("useTemplate")}
                       </Button>
@@ -128,7 +159,63 @@ export default function TemplatesPage() {
             );
           })}
         </motion.div>
+
+        <Dialog
+          open={previewTemplate?.open || false}
+          onOpenChange={(open) => {
+            if (!open) setPreviewTemplate(null);
+          }}
+        >
+          {previewTemplate && (
+            <DialogContent className="max-w-[680px] p-0 overflow-hidden border-0 shadow-lg rounded-xl bg-white dark:bg-gray-900">
+              <div className="flex flex-col">
+                <div className="border-b border-gray-100 dark:border-gray-800 px-4 py-4">
+                  <DialogTitle className="text-lg font-medium">
+                    {t(
+                      `${
+                        previewTemplate.id === "left-right"
+                          ? "leftRight"
+                          : previewTemplate.id
+                      }.name`
+                    )}
+                  </DialogTitle>
+                </div>
+                <div className="overflow-hidden flex items-center justify-center bg-gray-50 dark:bg-gray-950 p-4">
+                  <div className="relative">
+                    <Image
+                      src={templateImages[previewTemplate.id]}
+                      alt={t(
+                        `${
+                          previewTemplate.id === "left-right"
+                            ? "leftRight"
+                            : previewTemplate.id
+                        }.name`
+                      )}
+                      width={600}
+                      height={848}
+                      className="rounded-md shadow-sm"
+                      priority
+                    />
+                  </div>
+                </div>
+                <div className="p-3 pt-2 border-t border-gray-100 dark:border-gray-800 flex justify-center">
+                  <Button
+                    className="w-full"
+                    onClick={() => {
+                      setPreviewTemplate(null);
+                      handleCreateResume(previewTemplate.id);
+                    }}
+                  >
+                    {t("useTemplate")}
+                  </Button>
+                </div>
+              </div>
+            </DialogContent>
+          )}
+        </Dialog>
       </div>
     </div>
   );
-}
+};
+
+export default TemplatesPage;
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index c704df3..501fe23 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -147,6 +147,7 @@
     "templates": {
       "title": "Templates",
       "useTemplate": "Use Template",
+      "preview": "Preview",
       "switchTemplate": "Switch Template",
       "classic": {
         "name": "Classic",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index ddb7365..b41ec11 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -150,6 +150,7 @@
     "templates": {
       "title": "模板",
       "useTemplate": "使用此模板",
+      "preview": "预览",
       "switchTemplate": "切换模版",
       "classic": {
         "name": "经典模板",