diff --git a/.env.development b/.env.development
index b7fe60a..873fca7 100644
--- a/.env.development
+++ b/.env.development
@@ -1 +1,2 @@
- NEXT_PUBLIC_API_URL=http://127.0.0.1:4000
\ No newline at end of file
+#  NEXT_PUBLIC_API_URL=http://127.0.0.1:4000
+NEXT_PUBLIC_API_URL=https://nest-api-service.vercel.app
\ No newline at end of file
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
index ed67e90..438941f 100644
--- a/app/dashboard/layout.tsx
+++ b/app/dashboard/layout.tsx
@@ -3,6 +3,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import {
+  Coins,
   File,
   Home,
   LineChart,
@@ -92,7 +93,7 @@ function Dashboard({ children }: BaseComponentProps) {
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Link
-                    href="#"
+                    href="/dashboard/home"
                     className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
                   >
                     <Home className="h-5 w-5" />
@@ -101,7 +102,7 @@ function Dashboard({ children }: BaseComponentProps) {
                 </TooltipTrigger>
                 <TooltipContent side="right">Dashboard</TooltipContent>
               </Tooltip>
-              <Tooltip>
+              {/* <Tooltip>
                 <TooltipTrigger asChild>
                   <Link
                     href="#"
@@ -112,42 +113,30 @@ function Dashboard({ children }: BaseComponentProps) {
                   </Link>
                 </TooltipTrigger>
                 <TooltipContent side="right">Orders</TooltipContent>
-              </Tooltip>
+              </Tooltip> */}
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Link
-                    href="#"
+                    href="/dashboard/product"
                     className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
                   >
                     <Package className="h-5 w-5" />
-                    <span className="sr-only">Products</span>
-                  </Link>
-                </TooltipTrigger>
-                <TooltipContent side="right">Products</TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Link
-                    href="#"
-                    className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-                  >
-                    <Users2 className="h-5 w-5" />
-                    <span className="sr-only">Customers</span>
+                    <span className="sr-only">Product</span>
                   </Link>
                 </TooltipTrigger>
-                <TooltipContent side="right">Customers</TooltipContent>
+                <TooltipContent side="right">Product</TooltipContent>
               </Tooltip>
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Link
-                    href="#"
+                    href="/dashboard/token"
                     className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
                   >
-                    <LineChart className="h-5 w-5" />
-                    <span className="sr-only">Analytics</span>
+                    <Coins className="h-5 w-5" />
+                    <span className="sr-only">Token</span>
                   </Link>
                 </TooltipTrigger>
-                <TooltipContent side="right">Analytics</TooltipContent>
+                <TooltipContent side="right">Cropto token</TooltipContent>
               </Tooltip>
             </nav>
             <nav className="mt-auto flex flex-col items-center gap-4 px-2 py-4">
@@ -168,7 +157,7 @@ function Dashboard({ children }: BaseComponentProps) {
         </aside>
         <div className="flex flex-col sm:py-4 sm:pl-14">
           <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-            <Sheet>
+            {/* <Sheet>
               <SheetTrigger asChild>
                 <Button size="icon" variant="outline" className="sm:hidden">
                   <PanelLeft className="h-5 w-5" />
@@ -243,7 +232,7 @@ function Dashboard({ children }: BaseComponentProps) {
                   <BreadcrumbPage>All Products</BreadcrumbPage>
                 </BreadcrumbItem>
               </BreadcrumbList>
-            </Breadcrumb>
+            </Breadcrumb> */}
             <div className="relative ml-auto flex-1 md:grow-0">
               <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
               <Input
@@ -259,13 +248,14 @@ function Dashboard({ children }: BaseComponentProps) {
                   size="icon"
                   className="overflow-hidden rounded-full"
                 >
-                  <Image
+                  {/* <Image
                     src="/placeholder-user.jpg"
                     width={36}
                     height={36}
                     alt="Avatar"
                     className="overflow-hidden rounded-full"
-                  />
+                  /> */}
+                  avatar
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
diff --git a/app/dashboard/product/columns.tsx b/app/dashboard/product/columns.tsx
index eceafcf..e01207c 100644
--- a/app/dashboard/product/columns.tsx
+++ b/app/dashboard/product/columns.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import ConfirmDialog from "@/components/confirm";
+import ConfirmDialog from "@/components/Confirm";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
diff --git a/app/dashboard/product/form/page.tsx b/app/dashboard/product/form/page.tsx
index 75ce7af..bb2ed1a 100644
--- a/app/dashboard/product/form/page.tsx
+++ b/app/dashboard/product/form/page.tsx
@@ -22,6 +22,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { useToast } from "@/components/ui/use-toast";
 import { request } from "@/lib/request";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft } from "lucide-react";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import React from "react";
 import { useForm } from "react-hook-form";
@@ -39,7 +40,7 @@ const formSchema = object({
 
 async function updateProduct(url: string, { arg }: { arg: any }) {
   const { id, ...restData } = arg;
-  await fetch(url, {
+  await fetch(process.env.NEXT_PUBLIC_API_URL + url, {
     body: JSON.stringify(restData),
     method: "PUT",
     headers: {
@@ -64,15 +65,16 @@ const ProductForm = () => {
   const { replace } = useRouter();
   const searchParams = useSearchParams();
   const id = searchParams.get("id");
-  const { data } = useSWR(() => `/platform/${id}`);
+  const isEditMode = !!id;
+  const { data } = useSWR(() => (isEditMode ? `/platform/${id}` : null));
   const { trigger } = useSWRMutation(
-    id ? () => `/platform/${id}` : "/platform",
-    !!id ? updateProduct : createProduct,
+    isEditMode ? () => `/platform/${id}` : "/platform",
+    isEditMode ? updateProduct : createProduct,
     {
       onSuccess() {
         toast({
           duration: 300,
-          description: !!id
+          description: isEditMode
             ? "Record successful update"
             : "Record created successfully",
         });
@@ -92,7 +94,7 @@ const ProductForm = () => {
   });
 
   React.useEffect(() => {
-    if (!!id) {
+    if (isEditMode) {
       console.log(data);
       form.setValue("name", data?.name);
       form.setValue("url", data?.url);
@@ -107,119 +109,127 @@ const ProductForm = () => {
   };
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Product</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(handleSubmit)}
-            className="space-y-4"
-          >
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Name</FormLabel>
-                  <FormControl>
-                    <Input placeholder="Please input name" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="url"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Url</FormLabel>
-                  <FormControl>
-                    <Input placeholder="Please input url" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="type"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Type</FormLabel>
-                  <FormControl>
-                    <Select
-                      onValueChange={field.onChange}
-                      defaultValue={field.value}
-                    >
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="database">database</SelectItem>
-                        <SelectItem value="design">design</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="tag"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Tag</FormLabel>
-                  <FormControl>
-                    <Select
-                      onValueChange={field.onChange}
-                      defaultValue={field.value}
-                    >
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="mongodb">mongodb</SelectItem>
-                        <SelectItem value="postgres">postgres</SelectItem>
-                        <SelectItem value="ui">ui</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Description</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      rows={6}
-                      placeholder="Please input description"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <div className="flex justify-end">
-              <Button type="submit">submit</Button>
-            </div>
-          </form>
-        </Form>
-      </CardContent>
-    </Card>
+    <div className="flex flex-col gap-y-2">
+      <ArrowLeft
+        className="cursor-pointer"
+        onClick={() => {
+          replace("/dashboard/product");
+        }}
+      />
+      <Card>
+        <CardHeader>
+          <CardTitle>Product</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(handleSubmit)}
+              className="space-y-4"
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Please input name" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="url"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Url</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Please input url" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="type"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Type</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <FormControl>
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          <SelectItem value="database">database</SelectItem>
+                          <SelectItem value="design">design</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="tag"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Tag</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <FormControl>
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          <SelectItem value="mongodb">mongodb</SelectItem>
+                          <SelectItem value="postgres">postgres</SelectItem>
+                          <SelectItem value="ui">ui</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        rows={6}
+                        placeholder="Please input description"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex justify-end">
+                <Button type="submit">Submit</Button>
+              </div>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+    </div>
   );
 };
 
diff --git a/app/dashboard/product/page.tsx b/app/dashboard/product/page.tsx
index f1f3a8e..e26f1d5 100644
--- a/app/dashboard/product/page.tsx
+++ b/app/dashboard/product/page.tsx
@@ -34,10 +34,10 @@ import { columns } from "./columns";
 import { revalidateTag } from "next/cache";
 import useSWR from "swr";
 import useSWRMutation from "swr/mutation";
-import ConfirmDialog from "@/components/confirm";
+import ConfirmDialog from "@/components/Confirm";
 import { CoreRow, Row } from "@tanstack/react-table";
 import Link from "next/link";
-import Dropdown from "@/components/dropdown";
+import Dropdown from "@/components/Dropdown";
 import QueryString from "qs";
 import { serializateUrlWithQuery } from "@/lib/utils";
 
@@ -98,7 +98,7 @@ const ProductPage = () => {
   return (
     <React.Fragment>
       <div className="ml-auto flex items-center gap-2">
-        <Dropdown
+        {/* <Dropdown
           options={[
             { label: "database", value: "database" },
             { label: "design", value: "design" },
@@ -116,13 +116,13 @@ const ProductPage = () => {
               </span>
             </Button>
           }
-        />
-        <Button size="sm" variant="outline" className="h-7 gap-1">
+        /> */}
+        {/* <Button size="sm" variant="outline" className="h-7 gap-1">
           <File className="h-3.5 w-3.5" />
           <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
             Export
           </span>
-        </Button>
+        </Button> */}
         <Link href="/dashboard/product/form">
           <Button size="sm" className="h-7 gap-1">
             <PlusCircle className="h-3.5 w-3.5" />
diff --git a/app/dashboard/token/page.tsx b/app/dashboard/token/page.tsx
new file mode 100644
index 0000000..06e05a2
--- /dev/null
+++ b/app/dashboard/token/page.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const TokenPage = () => {
+  return <div>TokenPage</div>;
+};
+
+export default TokenPage;
diff --git a/components/DataTable.tsx b/components/DataTable.tsx
index 0170368..e03dd5a 100644
--- a/components/DataTable.tsx
+++ b/components/DataTable.tsx
@@ -2,8 +2,11 @@
 
 import {
   ColumnDef,
+  ColumnFiltersState,
   flexRender,
   getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
   useReactTable,
 } from "@tanstack/react-table";
 
@@ -16,6 +19,9 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { capitalize } from "@/lib/utils";
+import { Button } from "./ui/button";
+import React from "react";
+import { Input } from "./ui/input";
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -26,17 +32,32 @@ export function DataTable<TData, TValue>({
   columns,
   data,
 }: DataTableProps<TData, TValue>) {
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+
   const table = useReactTable({
     data: data != null ? data : [],
     columns,
+    getPaginationRowModel: getPaginationRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
     getCoreRowModel: getCoreRowModel(),
-    onRowSelectionChange(state) {
-      console.log(state);
-    },
   });
 
   return (
     <div className="rounded-md border">
+      {/* <div className="flex items-center py-4">
+        <Input
+          placeholder="Filter emails..."
+          value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
+          onChange={(event) => {
+            console.log(event.target.value);
+            return table.getColumn("name")?.setFilterValue(event.target.value);
+          }}
+          className="max-w-sm"
+        />
+      </div> */}
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -79,6 +100,24 @@ export function DataTable<TData, TValue>({
           )}
         </TableBody>
       </Table>
+      {/* <div className="flex items-center justify-end space-x-2 py-4">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+        </Button>
+      </div> */}
     </div>
   );
 }