diff --git a/src/pages/theme/List.tsx b/src/pages/theme/List.tsx
index 5d5498a..98a1e21 100644
--- a/src/pages/theme/List.tsx
+++ b/src/pages/theme/List.tsx
@@ -5,11 +5,18 @@ import Button from '@/components/Button';
 import { Link } from 'react-router-dom';
 import { Pages } from '@/config/Pages';
 import { Plus } from 'lucide-react';
+import Td from '@/components/Td';
+import TrashWithConfrim from '@/components/TrashWithConfrim';
+import { Eye } from 'iconsax-react';
 
 const ThemeList: FC = () => {
 
     const { data, isLoading } = useGetThemes();
 
+    if (isLoading) {
+        return <div className="flex justify-center items-center h-64">در حال بارگذاری...</div>;
+    }
+
     return (
         <div>
             <PageTitle title1='تم ها' />
@@ -24,6 +31,41 @@ const ThemeList: FC = () => {
                     </Button>
                 </Link>
             </div>
+
+            <div className='relative overflow-x-auto rounded-3xl mt-5 w-full'>
+                <table className='w-full text-sm '>
+                    <thead className='thead'>
+                        <tr>
+                            <Td text={'عنوان'} />
+                            <Td text={'نوع ورودی'} />
+                            <Td text={'عملیات'} />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {
+                            data?.results?.data?.map((item) => {
+                                return (
+                                    <tr className='tr' key={item._id}>
+                                        <Td text={item.title} />
+                                        <Td text={item.inputType} />
+                                        <Td text=''>
+                                            <div className='flex gap-2'>
+                                                <Link to={`${Pages.products.theme.update}/${item._id}`}>
+                                                    <Eye size={16} color='#8C90A3' />
+                                                </Link>
+                                                <TrashWithConfrim
+                                                    onDelete={() => null}
+                                                    isLoading={false}
+                                                />
+                                            </div>
+                                        </Td>
+                                    </tr>
+                                )
+                            })
+                        }
+                    </tbody>
+                </table>
+            </div>
         </div>
     )
 }
diff --git a/src/pages/theme/service/ThemeService.ts b/src/pages/theme/service/ThemeService.ts
index 8dfe5f4..517c091 100644
--- a/src/pages/theme/service/ThemeService.ts
+++ b/src/pages/theme/service/ThemeService.ts
@@ -1,8 +1,10 @@
 import axios from "@/config/axios";
-import type { CreateThemeType } from "../type/Types";
+import type { CreateThemeType, GetThemesResponseType } from "../type/Types";
 
-export const getThemes = async () => {
-  const { data } = await axios.get("/admin/category/theme");
+export const getThemes = async (): Promise<GetThemesResponseType> => {
+  const { data } = await axios.get<GetThemesResponseType>(
+    "/admin/category/theme"
+  );
   return data;
 };
 
diff --git a/src/pages/theme/type/Types.ts b/src/pages/theme/type/Types.ts
index e369715..7755277 100644
--- a/src/pages/theme/type/Types.ts
+++ b/src/pages/theme/type/Types.ts
@@ -4,3 +4,19 @@ export type CreateThemeType = {
   title: string;
   inputType: ThemeInputType;
 };
+
+export type ThemeType = {
+  _id: string;
+  title: string;
+  inputType: ThemeInputType;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type GetThemesResponseType = {
+  status: number;
+  success: boolean;
+  results: {
+    data: ThemeType[];
+  };
+};