diff --git a/frontend/public/contract.png b/frontend/public/contract.png
new file mode 100644
index 0000000..ee20c06
Binary files /dev/null and b/frontend/public/contract.png differ
diff --git a/frontend/src/_mocks/data-form-library.ts b/frontend/src/_mocks/data-form-library.ts
index 458c8fd..2e0b4fe 100644
--- a/frontend/src/_mocks/data-form-library.ts
+++ b/frontend/src/_mocks/data-form-library.ts
@@ -6,26 +6,29 @@ type Template = {
   usageCount: number
   isNew: boolean
   isVip: boolean
+  thumbnail?: string
 }
 
 export const mockTemplates: Template[] = [
   {
     id: '1',
-    title: 'Biểu mẫu hợp đồng',
-    description: 'Tìm và chọn mẫu hợp đồng pháp lý để bắt đầu soạn thảo.',
+    title: 'Hợp đồng thỏa thuận',
+    description: 'Hợp đồng thoả thuận giá trị được hiểu là thống nhất ý chí trên cơ sở tự nguyện về việc xác nhận .',
     category: 'Hợp đồng',
     usageCount: 1200,
     isNew: true,
-    isVip: true
+    isVip: true,
+    thumbnail: '/contract.png'
   },
   {
     id: '2',
-    title: 'Biểu mẫu hợp đồng',
+    title: 'Hợp đồng thỏa thuận',
     description: 'Tìm và chọn mẫu hợp đồng pháp lý để bắt đầu soạn thảo.',
     category: 'Hợp đồng',
     usageCount: 1200,
     isNew: false,
-    isVip: false
+    isVip: false,
+    thumbnail: '/contract.png'
   },
   {
     id: '3',
@@ -34,7 +37,8 @@ export const mockTemplates: Template[] = [
     category: 'Hợp đồng',
     usageCount: 1200,
     isNew: true,
-    isVip: true
+    isVip: true,
+    thumbnail: '/contract.png'
   },
   {
     id: '4',
@@ -43,7 +47,8 @@ export const mockTemplates: Template[] = [
     category: 'Hợp đồng',
     usageCount: 1200,
     isNew: false,
-    isVip: true
+    isVip: true,
+    thumbnail: '/contract.png'
   },
   {
     id: '5',
@@ -52,7 +57,8 @@ export const mockTemplates: Template[] = [
     category: 'Hợp đồng',
     usageCount: 950,
     isNew: true,
-    isVip: false
+    isVip: false,
+    thumbnail: '/contract.png'
   },
   {
     id: '6',
@@ -61,7 +67,8 @@ export const mockTemplates: Template[] = [
     category: 'Hợp đồng',
     usageCount: 1100,
     isNew: false,
-    isVip: false
+    isVip: false,
+    thumbnail: '/contract.png'
   },
   {
     id: '7',
@@ -70,7 +77,8 @@ export const mockTemplates: Template[] = [
     category: 'Hợp đồng',
     usageCount: 850,
     isNew: false,
-    isVip: true
+    isVip: true,
+    thumbnail: '/contract.png'
   },
   {
     id: '8',
@@ -79,6 +87,7 @@ export const mockTemplates: Template[] = [
     category: 'Hợp đồng',
     usageCount: 1350,
     isNew: true,
-    isVip: true
+    isVip: true,
+    thumbnail: '/contract.png'
   }
 ]
diff --git a/frontend/src/components/ui/FormCard.tsx b/frontend/src/components/ui/FormCard.tsx
index 3fde6c4..aa5b4e5 100644
--- a/frontend/src/components/ui/FormCard.tsx
+++ b/frontend/src/components/ui/FormCard.tsx
@@ -1,7 +1,19 @@
 import { motion } from 'framer-motion'
 import { FileText } from 'lucide-react'
 
-import { Badge, Button, Card, CardContent, CardFooter } from '@/components/ui'
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardFooter,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogClose
+} from '@/components/ui'
 import { cn } from '@/core/lib/utils'
 import { type Template, type ViewMode } from '@/models/types/form-library'
 
@@ -25,7 +37,7 @@ export default function FormCard({ template, viewMode, index }: FormCardProps) {
   }
 
   const cardClasses = cn(
-    'h-full border border-border-primary bg-background-primary transition-all duration-300 hover:shadow-lg hover:scale-[1.02]',
+    'h-full border border-border-primary bg-background-primary shadow-200 transition-all duration-300 hover:shadow-300 hover:scale-105',
     viewMode === 'list' && 'flex flex-col gap-4'
   )
 
@@ -50,16 +62,16 @@ export default function FormCard({ template, viewMode, index }: FormCardProps) {
             </div>
 
             <div className='space-y-3'>
-              <h3 className='text-lg font-semibold text-text-main line-clamp-2'>{template.title}</h3>
-              <p className='text-sm text-text-secondary line-clamp-2'>{template.description}</p>
+              <h3 className='text-h5 font-semibold text-text-main line-clamp-2'>{template.title}</h3>
+              <p className='text-p text-text-secondary line-clamp-2'>{template.description}</p>
             </div>
 
             <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
-              <span className='inline-flex items-center rounded-full bg-background-secondary px-3 py-1 text-xs font-medium text-text-secondary'>
+              <span className='inline-flex items-center rounded-full bg-background-secondary px-3 py-1 text-small font-medium text-text-secondary'>
                 {template.category}
               </span>
 
-              <div className='inline-flex items-center gap-2 text-xs text-text-secondary'>
+              <div className='inline-flex items-center gap-2 text-small text-text-secondary'>
                 <FileText size={14} />
                 <span>{template.usageCount.toLocaleString('vi-VN')} người dùng</span>
               </div>
@@ -67,10 +79,67 @@ export default function FormCard({ template, viewMode, index }: FormCardProps) {
           </div>
         </CardContent>
 
-        <CardFooter className='flex flex-col gap-2 p-6 pt-0 sm:flex-row'>
-          <Button variant='outline' size='sm' className='w-full sm:w-auto'>
-            Xem trước
-          </Button>
+        <CardFooter className='flex flex-col gap-3 p-6 pt-0 sm:flex-row sm:items-center sm:justify-between'>
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant='outline' size='sm' className='w-full sm:w-auto'>
+                Xem trước
+              </Button>
+            </DialogTrigger>
+            <DialogContent className='max-w-5xl bg-background-primary p-0 overflow-hidden rounded-3xl shadow-300'>
+              <div className='grid gap-6 md:grid-cols-2'>
+                <div className='min-h-96 rounded-3xl border border-border-secondary bg-background-secondary overflow-hidden shadow-200'>
+                  {template.thumbnail ? (
+                    <img src={template.thumbnail} alt={template.title} className='h-full w-full object-cover' />
+                  ) : (
+                    <div className='flex h-full items-center justify-center bg-background-secondary text-small text-text-description'>
+                      Ảnh xem trước biểu mẫu
+                    </div>
+                  )}
+                </div>
+
+                <div className='space-y-6 p-6'>
+                  <DialogHeader>
+                    <DialogTitle className='text-h3 font-semibold text-text-main'>{template.title}</DialogTitle>
+                  </DialogHeader>
+
+                  <div className='space-y-5 rounded-3xl border border-border-secondary bg-background-tertiary p-5'>
+                    <div className='space-y-3'>
+                      <div className='flex items-center justify-between'>
+                        <span className='text-p font-semibold text-text-main'>Mô tả</span>
+                      </div>
+                      <p className='text-p text-text-secondary leading-7'>{template.description}</p>
+                    </div>
+
+                    <div className='space-y-3'>
+                      <div className='flex items-center justify-between rounded-xl border border-border-secondary bg-background-primary p-4'>
+                        <span className='text-p text-text-description'>Phân loại</span>
+                        <span className='text-p font-semibold text-text-main'>{template.category}</span>
+                      </div>
+                      <div className='flex items-center justify-between rounded-xl border border-border-secondary bg-background-primary p-4'>
+                        <span className='text-p text-text-description'>Số lượt sử dụng</span>
+                        <span className='text-p font-semibold text-text-main'>
+                          {template.usageCount.toLocaleString('vi-VN')}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className='grid gap-3 sm:grid-cols-2'>
+                    <DialogClose asChild>
+                      <Button variant='outline' className='w-full'>
+                        Đóng
+                      </Button>
+                    </DialogClose>
+                    <Button variant='default' className='w-full'>
+                      Sử dụng biểu mẫu
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </DialogContent>
+          </Dialog>
+
           <Button variant='default' size='sm' className='w-full sm:w-auto'>
             Sử dụng biểu mẫu
           </Button>
diff --git a/frontend/src/pages/users/template/Template.tsx b/frontend/src/pages/users/template/Template.tsx
index 3c7ad0a..365b2f3 100644
--- a/frontend/src/pages/users/template/Template.tsx
+++ b/frontend/src/pages/users/template/Template.tsx
@@ -35,8 +35,8 @@ export default function Template() {
       {/* Header */}
       <motion.div variants={headerVariants} initial='hidden' animate='visible' className='space-y-6'>
         <div>
-          <h1 className='text-4xl font-bold text-slate-900 dark:text-white'>Thư viện biểu mẫu</h1>
-          <p className='mt-2 text-slate-600 dark:text-slate-400'>
+          <h1 className='text-h1 font-semibold text-text-main'>Thư viện biểu mẫu</h1>
+          <p className='mt-2 text-p text-text-secondary'>
             Khám phá hàng trăm biểu mẫu pháp lý được tạo bởi các chuyên gia
           </p>
         </div>
@@ -45,19 +45,12 @@ export default function Template() {
         <div className='flex flex-col sm:flex-row sm:items-center gap-4'>
           {/* Search Bar */}
           <div className='relative flex-1'>
-            <Search
-              className='absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 dark:text-slate-500'
-              size={20}
-            />
+            <Search className='absolute left-3 top-1/2 transform -translate-y-1/2 text-text-tertiary' size={20} />
             <Input
               placeholder='Tìm kiếm biểu mẫu, luật pháp hoặc từ khóa...'
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className={cn(
-                'pl-10 w-full',
-                'border-slate-200 dark:border-slate-700',
-                'placeholder:text-slate-400 dark:placeholder:text-slate-500'
-              )}
+              className={cn('pl-10 w-full', 'border-border-primary', 'placeholder:text-text-tertiary')}
             />
           </div>
 
@@ -66,9 +59,8 @@ export default function Template() {
         </div>
 
         {/* Results count */}
-        <div className='text-sm text-slate-600 dark:text-slate-400'>
-          Tìm thấy <span className='font-semibold text-slate-900 dark:text-white'>{filteredTemplates.length}</span> biểu
-          mẫu
+        <div className='text-small text-text-secondary'>
+          Tìm thấy <span className='font-semibold text-text-main'>{filteredTemplates.length}</span> biểu mẫu
         </div>
       </motion.div>