diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
index 4a937161..6e2e672d 100644
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -317,6 +317,7 @@
     "watchTriggerable": true,
     "watchWithFilter": true,
     "whenever": true,
-    "getFileBytes": true
+    "getFileBytes": true,
+    "CreateQuoteSchema": true
   }
 }
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 52a2d1ce..9c324e4b 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -10,6 +10,7 @@ declare global {
   const CreateInvoiceSchema: typeof import('./src/schemas/invoice.schema')['CreateInvoiceSchema']
   const CreateOrderSchema: typeof import('./src/schemas/order.schema')['CreateOrderSchema']
   const CreateProductSchema: typeof import('./src/schemas/products.schema')['CreateProductSchema']
+  const CreateQuoteSchema: typeof import('./src/schemas/quote.schema')['CreateQuoteSchema']
   const CreateSupplierSchema: typeof import('./src/schemas/supplier.schema')['CreateSupplierSchema']
   const EffectScope: typeof import('vue')['EffectScope']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
diff --git a/src-tauri/service/src/query.rs b/src-tauri/service/src/query.rs
index a42bcf63..0bda741b 100644
--- a/src-tauri/service/src/query.rs
+++ b/src-tauri/service/src/query.rs
@@ -927,7 +927,6 @@ impl QueriesService {
             None => Err(DbErr::RecordNotFound(String::from("no invoice"))),
         }
     }
-
     //
     pub async fn list_inventory(db: &DbConn, args: ListArgs) -> Result<JsonValue, DbErr> {
         let count = InventoryMouvements::find()
diff --git a/src/components/InvoiceCreate.vue b/src/components/InvoiceCreate.vue
index 9ee349f8..5c1f9936 100644
--- a/src/components/InvoiceCreate.vue
+++ b/src/components/InvoiceCreate.vue
@@ -162,9 +162,15 @@ const hideModal = () => {
                 <SelectValue placeholder="Select a status" />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="PAID"> Paid </SelectItem>
-                <SelectItem value="CANCELED"> Cancelled </SelectItem>
-                <SelectItem value="PENDING"> Pending </SelectItem>
+                <SelectItem value="PAID">
+                  {{ t("g.status.paid") }}
+                </SelectItem>
+                <SelectItem value="CANCELED">
+                  {{ t("g.status.cancelled") }}
+                </SelectItem>
+                <SelectItem value="PENDING">
+                  {{ t("g.status.pending") }}
+                </SelectItem>
               </SelectContent>
             </Select>
           </div>
diff --git a/src/components/InvoiceUpdate.vue b/src/components/InvoiceUpdate.vue
index 70be52d3..ece85180 100644
--- a/src/components/InvoiceUpdate.vue
+++ b/src/components/InvoiceUpdate.vue
@@ -199,9 +199,15 @@ const deleteInvoiceItem = (index: number) => {
                 <SelectValue placeholder="Select a status" />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="PAID"> Paid </SelectItem>
-                <SelectItem value="CANCELED"> Cancelled </SelectItem>
-                <SelectItem value="PENDING"> Pending </SelectItem>
+                <SelectItem value="PAID">
+                  {{ t("g.status.paid") }}
+                </SelectItem>
+                <SelectItem value="CANCELED">
+                  {{ t("g.status.cancelled") }}
+                </SelectItem>
+                <SelectItem value="PENDING">
+                  {{ t("g.status.pending") }}
+                </SelectItem>
               </SelectContent>
             </Select>
           </div>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 8d6befb0..694e5510 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -20,10 +20,18 @@ const { t } = useI18n();
       class="w-full h-full flex items-center py-3 px-2 bg-white justify-between"
     >
       <div class="text-black flex items-center justify-center gap-2">
-        <ChevronLeft class="cursor-pointer" @click="$router.back()" />
-        <ChevronRight class="cursor-pointer" @click="$router.forward()" />
+        <ChevronLeft
+          :size="20"
+          class="cursor-pointer"
+          @click="$router.back()"
+        />
+        <ChevronRight
+          :size="20"
+          class="cursor-pointer"
+          @click="$router.forward()"
+        />
         <RouterLink to="/">
-          <HomeIcon :size="22" class="bg-white" />
+          <HomeIcon :size="18" class="bg-white" />
         </RouterLink>
         <!-- <span class="pb-[3px] text-gray-700 flex items-center"> -->
         <!-- <span v-if="route.fullPath !== '/'" class="flex items-center">
diff --git a/src/components/OrderCreate.vue b/src/components/OrderCreate.vue
index fdfb2e80..1ec176d1 100644
--- a/src/components/OrderCreate.vue
+++ b/src/components/OrderCreate.vue
@@ -158,9 +158,15 @@ const hideModal = () => {
                 <SelectValue placeholder="Select a status" />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="DELIVERED"> Delivered </SelectItem>
-                <SelectItem value="CANCELED"> Cancelled </SelectItem>
-                <SelectItem value="PENDING"> Pending </SelectItem>
+                <SelectItem value="DELIVERED">
+                  {{ t("g.status.delivered") }}
+                </SelectItem>
+                <SelectItem value="CANCELED">
+                  {{ t("g.status.cancelled") }}
+                </SelectItem>
+                <SelectItem value="PENDING">
+                  {{ t("g.status.pending") }}
+                </SelectItem>
               </SelectContent>
             </Select>
           </div>
diff --git a/src/components/OrderUpdate.vue b/src/components/OrderUpdate.vue
index 576ad980..619af1c0 100644
--- a/src/components/OrderUpdate.vue
+++ b/src/components/OrderUpdate.vue
@@ -195,9 +195,15 @@ const deleteOrderItem = (index: number) => {
                 <SelectValue placeholder="Select a status" />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="DELIVERED"> Delivered </SelectItem>
-                <SelectItem value="CANCELED"> Cancelled </SelectItem>
-                <SelectItem value="PENDING"> Pending </SelectItem>
+                <SelectItem value="DELIVERED">
+                  {{ t("g.status.delivered") }}
+                </SelectItem>
+                <SelectItem value="CANCELED">
+                  {{ t("g.status.cancelled") }}
+                </SelectItem>
+                <SelectItem value="PENDING">
+                  {{ t("g.status.pending") }}
+                </SelectItem>
               </SelectContent>
             </Select>
           </div>
diff --git a/src/components/QuoteCreate.vue b/src/components/QuoteCreate.vue
new file mode 100644
index 00000000..398d92b1
--- /dev/null
+++ b/src/components/QuoteCreate.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useUpdateRouteQueryParams } from "@/composables/useUpdateQuery";
+import type { QuoteForCreateT } from "@/schemas/quote.schema";
+import { store } from "@/store";
+import type { Res } from "@/types";
+import { invoke } from "@tauri-apps/api";
+import { Trash2 } from "lucide-vue-next";
+import { error, info } from "tauri-plugin-log-api";
+import { reactive, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { toast } from "vue-sonner";
+import SearchableItems from "./ui/UISearchableItems.vue";
+import UiModalCard from "./ui/UiModalCard.vue";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { Separator } from "./ui/separator";
+
+const { t } = useI18n();
+const { updateQueryParams } = useUpdateRouteQueryParams();
+const clients = ref<{ label: string; value: string }[]>([]);
+const products = ref<{ label: string; value: string }[]>([]);
+const isLoading = ref<boolean>(false);
+const quote = reactive<QuoteForCreateT>({
+  clientId: "",
+  items: [
+    {
+      product_id: undefined,
+      quantity: undefined,
+      price: undefined,
+    },
+  ],
+});
+
+const addQuoteItem = () => {
+  quote.items?.push({
+    product_id: undefined,
+    quantity: undefined,
+    price: undefined,
+  });
+};
+
+const deleteQuoteItem = (index: number) => {
+  quote.items?.splice(index, 1);
+};
+
+const searchClients = async (search: string | number) => {
+  const res = await invoke<Res<{ label: string; value: string }[]>>(
+    "search_clients",
+    {
+      search,
+    },
+  );
+  if (!res.error) {
+    clients.value = res.data;
+  }
+};
+
+const searchProducts = async (search: string | number) => {
+  const res = await invoke<Res<{ label: string; value: string }[]>>(
+    "search_products",
+    {
+      search,
+    },
+  );
+  if (!res.error) {
+    products.value = res.data;
+  }
+};
+
+const createQuote = async () => {
+  isLoading.value = true;
+  if (quote?.clientId && quote.items?.length !== 0) {
+    try {
+      const quoteRes = await invoke<Res<String>>("create_quote", {
+        quote: {
+          client_id: quote.clientId,
+        },
+      });
+      for await (const item of quote.items) {
+        const invRes = await invoke<Res<string>>("create_inventory", {
+          mvm: {
+            mvm_type: "OUT",
+            product_id: item.product_id,
+            quantity: item.quantity,
+          },
+        });
+        await invoke<Res<string>>("create_quote_item", {
+          item: {
+            quote_id: quoteRes.data,
+            inventory_id: invRes.data,
+            price: item.price,
+          },
+        });
+      }
+      //
+      info(`CREATE QUOTE: ${JSON.stringify(quote)}`);
+      //
+      toast(t("notifications.quote.created"), {
+        closeButton: true,
+      });
+      // toggle refresh
+      updateQueryParams({
+        refresh: "refresh-create-" + Math.random() * 9999,
+      });
+    } catch (err: any) {
+      error("CREATE QUOTE: " + err.error);
+    } finally {
+      isLoading.value = false;
+      hideModal();
+    }
+    return;
+  }
+
+  isLoading.value = false;
+};
+
+const hideModal = () => {
+  store.setters.updateStore({ key: "show", value: false });
+};
+</script>
+
+<template>
+  <UiModalCard
+    class="w-5/6 lg:w-1/2 rounded-md relative h-fit z-50 gap-3 flex flex-col bg-white p-2 min-w-[350px]"
+  >
+    <template #title>
+      {{ t("o.c.title") }}
+    </template>
+    <template #content>
+      <div class="h-full w-full grid grid-cols-1 gap-2">
+        <div class="flex w-full h-fit gap-1">
+          <div class="w-full h-full flex flex-col gap-1">
+            <Label for="client_id">
+              {{ t("o.c.d.s.title") }}
+            </Label>
+            <SearchableItems
+              :items="clients"
+              @update:items="(s) => searchClients(s)"
+              @on:select="(id) => (quote.clientId = id)"
+            />
+          </div>
+        </div>
+        <Separator />
+        <div class="w-full h-full flex flex-col gap-1">
+          <Label for="products">
+            {{ t("o.c.d.o.products") }}
+          </Label>
+          <Button @click="addQuoteItem">
+            {{ t("o.c.d.o.add") }}
+          </Button>
+          <div
+            class="products w-full grid pt-1 grid-cols-[1fr_1fr_1fr_36px] items-center overflow-auto scrollbar-thin scrollbar-thumb-transparent max-h-64 gap-1"
+          >
+            <template v-for="(item, index) in quote.items" :key="index">
+              <SearchableItems
+                :items="products"
+                @update:items="(s) => searchProducts(s)"
+                @on:select="
+                  (id, price) => ((item.product_id = id), (item.price = price))
+                "
+              />
+              <Input
+                class="border-r-0"
+                :placeHolder="t('o.c.d.o.placeholder[0]')"
+                type="number"
+                v-model="item.quantity"
+              >
+                <template #unite> Item </template>
+              </Input>
+              <Input
+                class="border-r-0"
+                :placeHolder="t('o.c.d.o.placeholder[1]')"
+                type="number"
+                v-model="item.price"
+              >
+                <template #unite> DH </template>
+              </Input>
+              <Trash2
+                @click="deleteQuoteItem(index)"
+                class="cursor-pointer"
+                :size="22"
+              />
+            </template>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="grid w-full grid-cols-3 gap-2">
+        <Button @click="hideModal" variant="outline">
+          {{ t("g.b.no") }}
+        </Button>
+        <Button class="col-span-2" @click="createQuote()">
+          {{ t("g.b.c") }}
+        </Button>
+      </div>
+    </template>
+  </UiModalCard>
+</template>
diff --git a/src/components/QuoteDelete.vue b/src/components/QuoteDelete.vue
new file mode 100644
index 00000000..077a9fb0
--- /dev/null
+++ b/src/components/QuoteDelete.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useUpdateRouteQueryParams } from "@/composables/useUpdateQuery";
+import { useI18n } from "vue-i18n";
+import { invoke } from "@tauri-apps/api";
+import { Button } from "./ui/button";
+import { store } from "@/store";
+import UiModalCard from "./ui/UiModalCard.vue";
+import { error, info } from "tauri-plugin-log-api";
+import type { Res } from "@/types";
+import { toast } from "vue-sonner";
+
+const { t } = useI18n();
+const { updateQueryParams } = useUpdateRouteQueryParams();
+
+const deleteTheQuotes = async (id: string) => {
+  try {
+    await invoke<Res<any>>("delete_quote", { id });
+    //
+    info(`DELETE QUOTE: ${id}`);
+    //
+    toast(t("notifications.quote.deleted"), {
+      closeButton: true,
+    });
+    // toggle refresh
+    updateQueryParams({
+      refresh: "refresh-delete-" + Math.random() * 9999,
+    });
+  } catch (err: any) {
+    error("DELETE QUOTE: " + err.error);
+  } finally {
+    store.setters.updateStore({ key: "show", value: false });
+  }
+};
+
+const cancelDelete = () => {
+  store.setters.updateStore({ key: "show", value: false });
+};
+</script>
+
+<template>
+  <UiModalCard>
+    <template #title>
+      {{ t("o.d.title") }}n° {{ $route.query?.id }} ?
+    </template>
+    <template #footer>
+      <div class="grid grid-cols-3 gap-2">
+        <Button variant="outline" @click="cancelDelete">
+          {{ t("g.b.no") }}
+        </Button>
+        <Button
+          class="col-span-2"
+          @click="deleteTheQuotes($route.query?.id as string)"
+        >
+          {{ t("g.b.d") }}
+        </Button>
+      </div>
+    </template>
+  </UiModalCard>
+</template>
diff --git a/src/components/QuoteUpdate.vue b/src/components/QuoteUpdate.vue
new file mode 100644
index 00000000..2d8f92c9
--- /dev/null
+++ b/src/components/QuoteUpdate.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { ref, reactive, onBeforeMount } from "vue";
+import { useUpdateRouteQueryParams } from "@/composables/useUpdateQuery";
+import { useI18n } from "vue-i18n";
+import { invoke } from "@tauri-apps/api";
+import { Button } from "./ui/button";
+import { Trash2 } from "lucide-vue-next";
+import { Input } from "./ui/input";
+import { store } from "@/store";
+import UiModalCard from "./ui/UiModalCard.vue";
+import { Label } from "./ui/label";
+import { Separator } from "./ui/separator";
+import { useRoute } from "vue-router";
+import type { Res } from "@/types";
+import type { QuoteForUpdateT } from "@/schemas/quote.schema";
+import SearchableItems from "./ui/UISearchableItems.vue";
+import { error, info } from "tauri-plugin-log-api";
+import { toast } from "vue-sonner";
+
+const { updateQueryParams } = useUpdateRouteQueryParams();
+const { t } = useI18n();
+const route = useRoute();
+
+const clients = ref<{ label: string; value: string }[]>([]);
+const products = ref<{ label: string; value: string }[]>([]);
+const quote = reactive<QuoteForUpdateT>({
+  id: "",
+  clientId: "",
+  fullname: "",
+  createdAt: "",
+  items: [],
+});
+
+onBeforeMount(async () => {
+  // @ts-ignore
+  const res = await invoke<Res<QuoteForUpdateT>>("get_quote", {
+    id: route.query.id,
+  });
+
+  if (!res.error) {
+    quote.id = res.data.id;
+    quote.clientId = res.data.clientId;
+    quote.createdAt = res.data.createdAt;
+    quote.fullname = res.data.fullname;
+    quote.items = res.data.items;
+  }
+});
+
+const searchClients = async (search: string | number) => {
+  const res = await invoke<Res<{ label: string; value: string }[]>>(
+    "search_clients",
+    {
+      search,
+    },
+  );
+  if (!res.error) {
+    clients.value = res.data;
+  }
+};
+
+const searchProducts = async (search: string | number) => {
+  const res = await invoke<Res<{ label: string; value: string }[]>>(
+    "search_products",
+    {
+      search,
+    },
+  );
+  if (!res.error) {
+    products.value = res.data;
+  }
+};
+
+const addQuoteItem = () => {
+  quote.items?.push({
+    product_id: undefined,
+    quantity: undefined,
+    price: undefined,
+  });
+};
+
+const updateTheQuotes = async () => {
+  try {
+    await invoke<Res<String>>("update_quote", {
+      quote: {
+        id: quote.id,
+        client_id: quote.clientId,
+      },
+    });
+    for await (const item of quote.items) {
+      if (!item.id) {
+        const invRes = await invoke<Res<string>>("create_inventory", {
+          mvm: {
+            mvm_type: "OUT",
+            product_id: item.product_id,
+            quantity: item.quantity,
+          },
+        });
+        await invoke<Res<string>>("create_quote_item", {
+          item: {
+            quote_id: quote.id,
+            inventory_id: invRes.data,
+            price: item.price,
+          },
+        });
+      } else {
+        await invoke<Res<string>>("update_inventory", {
+          mvm: {
+            id: item.inventory_id,
+            mvm_type: "OUT",
+            product_id: item.product_id,
+            quantity: item.quantity,
+          },
+        });
+        await invoke<Res<string>>("update_quote_item", {
+          item: {
+            id: item.id,
+            quote_id: quote.id,
+            inventory_id: item.inventory_id,
+            price: item.price,
+          },
+        });
+      }
+    }
+    //
+    info(`UPDATE QUOTE: ${JSON.stringify(quote)}`);
+    //
+    toast(t("notifications.invoice.updated"), {
+      closeButton: true,
+    });
+    // toggle refresh
+    updateQueryParams({
+      refresh: "refresh-update-" + Math.random() * 9999,
+    });
+  } catch (err: any) {
+    error("UPDATE QUOTE: " + err.error);
+  } finally {
+    hideModal();
+  }
+};
+
+const hideModal = () => {
+  store.setters.updateStore({ key: "show", value: false });
+};
+
+async function deleteOneQuoteItem(id: string) {
+  try {
+    await invoke("delete_quote_item", { id });
+  } catch (err: any) {
+    error("Error creating client : " + err.error);
+  }
+}
+
+const deleteQuoteItem = (index: number) => {
+  const item = quote.items?.splice(index, 1)[0];
+  if (item?.id) deleteOneQuoteItem(item.id);
+};
+</script>
+
+<template>
+  <UiModalCard
+    class="w-5/6 lg:w-1/2 relative h-fit rounded-md z-50 gap-3 flex flex-col bg-white p-2 min-w-[350px]"
+  >
+    <template #title> {{ t("o.u.title") }} N° {{ quote?.id }} </template>
+    <template #content>
+      <div class="h-full w-full grid grid-cols-1 gap-2">
+        <div class="flex w-full h-fit gap-1">
+          <div class="w-full h-full flex flex-col gap-1">
+            <Label for="client_id">
+              {{ t("o.u.d.o.title") }}
+            </Label>
+            <SearchableItems
+              v-if="quote.fullname"
+              :defaultValue="quote.fullname"
+              :items="clients"
+              @update:items="(s) => searchClients(s)"
+              @on:select="(id) => (quote.clientId = id)"
+            />
+          </div>
+        </div>
+        <Separator />
+        <div class="w-full h-full flex flex-col gap-1">
+          <Button @click="addQuoteItem">
+            {{ t("o.u.d.o.add") }}
+          </Button>
+          <div
+            class="w-full pt-1 grid grid-cols-[1fr_1fr_1fr_36px] items-center overflow-auto scrollbar-thin scrollbar-thumb-transparent max-h-64 gap-1"
+          >
+            <template v-for="(item, index) in quote.items" :key="index">
+              <SearchableItems
+                :defaultValue="item.name"
+                :items="products"
+                @update:items="(s) => searchProducts(s)"
+                @on:select="
+                  (id, price) => ((item.product_id = id), (item.price = price))
+                "
+              />
+              <Input
+                v-model="item.quantity"
+                class="order-r-0"
+                :placeHolder="t('o.c.d.o.placeholder[0]')"
+                type="number"
+              >
+                <template #unite> Item </template>
+              </Input>
+              <Input
+                v-model="item.price"
+                class="order-r-0"
+                :placeHolder="t('o.c.d.o.placeholder[1]')"
+                type="number"
+              >
+                <template #unite> DH </template>
+              </Input>
+              <Trash2
+                @click="deleteQuoteItem(index)"
+                class="cursor-pointer"
+                :size="22"
+              />
+            </template>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="grid grid-cols-3 gap-2">
+        <Button variant="outline" @click="hideModal">
+          {{ t("g.b.no") }}
+        </Button>
+        <Button class="col-span-2" @click="updateTheQuotes">
+          {{ t("g.b.d") }}
+        </Button>
+      </div>
+    </template>
+  </UiModalCard>
+</template>
diff --git a/src/components/QuotesTable.vue b/src/components/QuotesTable.vue
new file mode 100644
index 00000000..5c5cb138
--- /dev/null
+++ b/src/components/QuotesTable.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import UiPagination from "./ui/UiPagination.vue";
+import { RouterLink } from "vue-router";
+import { store } from "@/store";
+import type {
+  QuoteForUpdateT,
+  QuoteProductT,
+  QuoteT,
+} from "@/schemas/quote.schema";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { cn } from "@/utils/shadcn";
+import { useUpdateRouteQueryParams } from "@/composables/useUpdateQuery";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { invoke } from "@tauri-apps/api";
+import { error, info } from "tauri-plugin-log-api";
+import {
+  FilePenLine,
+  Printer,
+  Trash2,
+  GripHorizontal,
+  NotepadText,
+} from "lucide-vue-next";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { Res } from "@/types";
+import { toast } from "vue-sonner";
+import { h } from "vue";
+
+const { updateQueryParams } = useUpdateRouteQueryParams();
+const { t, d } = useI18n();
+
+defineProps<{ quotes: QuoteT[]; quoteProducts: QuoteProductT[] }>();
+defineEmits<{
+  (e: "listQuoteProducts", id?: string): void;
+  (e: "cancelQuoteProducts"): void;
+}>();
+
+const toggleThisQuotes = (Quote: QuoteT, name: string) => {
+  updateQueryParams({
+    id: Quote.id,
+  });
+  store.setters.updateStore({ key: "name", value: name });
+  store.setters.updateStore({ key: "show", value: true });
+};
+
+const createInvoiceFromQuote = async (id: string) => {
+  try {
+    const res = await invoke<Res<QuoteForUpdateT>>("get_quote", {
+      id: id,
+    });
+    if (!res.error) {
+      const invoiceRes = await invoke<Res<String>>("create_invoice", {
+        invoice: {
+          client_id: res.data.clientId,
+          status: "PAID",
+          paid_amount: 0,
+          quote_id: id,
+        },
+      });
+      //
+      for await (const item of res.data.items) {
+        const invRes = await invoke<Res<string>>("create_inventory", {
+          mvm: {
+            mvm_type: "OUT",
+            product_id: item.product_id,
+            quantity: item.quantity,
+          },
+        });
+
+        await invoke<Res<string>>("create_invoice_item", {
+          item: {
+            invoice_id: invoiceRes.data,
+            inventory_id: invRes.data,
+            price: item.price,
+          },
+        });
+      }
+      info(`CREATE INVOICE FROM QUOTE: ${id}`);
+      //
+      toast.success(t("notifications.invoice.created"), {
+        closeButton: true,
+        description: h(RouterLink, {
+          to: "/invoices/?page=1&id=" + invoiceRes.data,
+          class: "underline",
+          innerHTML: "go to invoice",
+        }),
+      });
+    }
+  } catch (err: any) {
+    error("GET QUOTE FOR INVOICE: " + err.error);
+  }
+};
+</script>
+
+<template>
+  <div>
+    <table>
+      <thead>
+        <tr>
+          <th>{{ t("g.fields.fullname") }}</th>
+          <th>{{ t("g.fields.items") }}</th>
+          <th>{{ t("g.fields.date") }}</th>
+          <th>{{ t("g.fields.total") }}</th>
+          <th class="small">{{ t("g.fields.actions") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(quote, index) in quotes" v-fade="index" :key="quote.id">
+          <td class="p-2">
+            <RouterLink
+              class="font-medium"
+              :to="{
+                path: '/clients/' + quote.clientId,
+              }"
+            >
+              {{ quote.fullname }}
+            </RouterLink>
+          </td>
+          <td class="p-2">
+            <HoverCard v-if="quote.products && quote.products > 0">
+              <HoverCardTrigger as-child>
+                <Button
+                  @mouseenter.passive="$emit('listQuoteProducts', quote.id)"
+                  @mouseleave.passive="$emit('cancelQuoteProducts')"
+                  size="sm"
+                  variant="link"
+                  class="underline px-0"
+                >
+                  {{ t("g.plrz.p", { n: quote.products }) }}
+                </Button>
+              </HoverCardTrigger>
+              <HoverCardContent class="min-w-[13rem] p-2">
+                <table class="w-full not-default">
+                  <thead>
+                    <tr>
+                      <th v-for="index in 3" :key="index"></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="(quoteProduct, index) in quoteProducts"
+                      :key="index"
+                      class="space-y-1 text-sm flex justify-between w-full items-center"
+                    >
+                      <td class="underline w-1/2">{{ quoteProduct.name }}</td>
+                      <td class="w-1/4 text-end">
+                        {{ quoteProduct.price }} Dh
+                      </td>
+                      <td class="w-1/4 text-slate-700 text-end">
+                        <i> x{{ quoteProduct.quantity }} </i>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </HoverCardContent>
+            </HoverCard>
+            <template v-else>
+              {{ t("g.plrz.p", { n: quote.products }) }}
+            </template>
+          </td>
+          <td class="p-2">
+            {{ quote.createdAt ? d(new Date(quote.createdAt), "long") : "" }}
+          </td>
+          <td class="p-2">{{ quote.total?.toFixed(2) }} DH</td>
+          <td class="p-2">
+            <div class="flex justify-center items-center gap-3">
+              <DropdownMenu>
+                <DropdownMenuTrigger>
+                  <GripHorizontal class="text-slate-800 inline" />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <!-- <DropdownMenuLabel>My Account</DropdownMenuLabel> -->
+                  <DropdownMenuItem
+                    @click="toggleThisQuotes(quote, 'QuoteDelete')"
+                  >
+                    <Trash2 :size="20" class="text-slate-800 inline mr-2" />
+                    Delete
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    @click="toggleThisQuotes(quote, 'QuoteUpdate')"
+                  >
+                    <FilePenLine
+                      :size="20"
+                      class="text-slate-800 inline mr-2"
+                    />
+                    Edit
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <RouterLink
+                      :to="{
+                        path: '/quotes/' + quote.id,
+                      }"
+                    >
+                      <Printer
+                        :size="20"
+                        class="text-slate-800 inline mr-2"
+                      />Print
+                    </RouterLink>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem @click="createInvoiceFromQuote(quote.id!)">
+                    <NotepadText
+                      :size="20"
+                      class="text-slate-800 inline mr-2"
+                    />Create invoice
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <UiPagination />
+  </div>
+</template>
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index d9fdba43..5815ca44 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -46,8 +46,11 @@ const openTranslationModal = () => {
         </span>
         <ChevronsLeft
           @click="collapse = !collapse"
-          class="transition-all duration-200 cursor-pointer transform"
-          :class="{ 'rotate-180': collapse }"
+          :size="22"
+          :class="{
+            'rotate-180': collapse,
+            'transition-all duration-200 cursor-pointer transform': true,
+          }"
         />
       </div>
     </div>
@@ -60,12 +63,12 @@ const openTranslationModal = () => {
           <span class="w-8 min-w-[30px] max-w-[30px]">
             <Contact
               class="m-auto text-gray-700 group-hover:text-black"
-              :size="22"
+              :size="20"
             />
           </span>
           <span
             v-if="!collapse"
-            class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden"
+            class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden font-medium"
           >
             {{ t("g.r.Clients") }}
           </span>
@@ -77,12 +80,12 @@ const openTranslationModal = () => {
           <span class="w-8 min-w-[30px] max-w-[30px]">
             <Contact
               class="m-auto text-gray-700 group-hover:text-black"
-              :size="22"
+              :size="20"
             />
           </span>
           <span
             v-if="!collapse"
-            class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden"
+            class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden font-medium"
           >
             {{ t("g.r.Suppliers") }}
           </span>
@@ -94,12 +97,12 @@ const openTranslationModal = () => {
           <span class="w-8 min-w-[30px] max-w-[30px]">
             <Package
               class="m-auto text-gray-700 group-hover:text-black"
-              :size="22"
+              :size="20"
             />
           </span>
           <span
             v-if="!collapse"
-            class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden"
+            class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden font-medium"
           >
             {{ t("g.r.Products") }}
           </span>
@@ -111,12 +114,12 @@ const openTranslationModal = () => {
           <span class="w-8 min-w-[30px] max-w-[30px]">
             <Truck
               class="m-auto text-gray-700 group-hover:text-black"
-              :size="22"
+              :size="20"
             />
           </span>
           <span
             v-if="!collapse"
-            class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden"
+            class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden font-medium"
           >
             {{ t("g.r.Orders") }}
           </span>
@@ -128,12 +131,12 @@ const openTranslationModal = () => {
           <span class="w-8 min-w-[30px] max-w-[30px]">
             <NotepadText
               class="m-auto text-gray-700 group-hover:text-black"
-              :size="22"
+              :size="20"
             />
           </span>
           <span
             v-if="!collapse"
-            class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden"
+            class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden font-medium"
           >
             {{ t("g.r.Invoices") }}
           </span>
@@ -145,12 +148,12 @@ const openTranslationModal = () => {
           <span class="w-8 min-w-[30px] max-w-[30px]">
             <Archive
               class="m-auto text-gray-700 group-hover:text-black"
-              :size="22"
+              :size="20"
             />
           </span>
           <span
             v-if="!collapse"
-            class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden"
+            class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden font-medium"
           >
             {{ t("g.r.Inventory") }}
           </span>
@@ -162,12 +165,12 @@ const openTranslationModal = () => {
           <span class="w-8 min-w-[30px] max-w-[30px]">
             <BarChartBig
               class="m-auto text-gray-700 group-hover:text-black"
-              :size="22"
+              :size="20"
             />
           </span>
           <span
             v-if="!collapse"
-            class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden"
+            class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden font-medium"
           >
             {{ t("g.r.Dashboard") }}
           </span>
@@ -180,12 +183,12 @@ const openTranslationModal = () => {
         <span class="w-8 min-w-[30px] max-w-[30px]">
           <Languages
             class="m-auto text-gray-700 group-hover:text-black"
-            :size="22"
+            :size="20"
           />
         </span>
         <span
           v-if="!collapse"
-          class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden"
+          class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden font-medium"
         >
           {{ locale.text }}
         </span>
@@ -197,12 +200,12 @@ const openTranslationModal = () => {
         <span class="w-8 min-w-[30px] max-w-[30px]">
           <Settings
             class="m-auto text-gray-700 group-hover:text-black"
-            :size="22"
+            :size="20"
           />
         </span>
         <span
           v-if="!collapse"
-          class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden"
+          class="text-gray-500 ml-1 text-sm group-hover:text-primary overflow-hidden font-medium"
         >
           {{ t("g.r.Settings") }}
         </span>
diff --git a/src/pages/index/clients/index.vue b/src/pages/index/clients/index.vue
index da97d3cf..3bd923f7 100644
--- a/src/pages/index/clients/index.vue
+++ b/src/pages/index/clients/index.vue
@@ -114,8 +114,11 @@ const updateModal = (name: string) => {
                 </svg>
               </span>
             </Button>
-            <Button class="gap-2 w-fit" @click="updateModal('ClientCreate')">
-              <PlusCircleIcon :size="22" />
+            <Button
+              class="gap-2 w-fit font-medium text-sm"
+              @click="updateModal('ClientCreate')"
+            >
+              <PlusCircleIcon :size="20" />
 
               {{ t("c.i.addButton") }}
             </Button>
diff --git a/src/pages/index/invoices/index.vue b/src/pages/index/invoices/index.vue
index 9219258c..5db49eb5 100644
--- a/src/pages/index/invoices/index.vue
+++ b/src/pages/index/invoices/index.vue
@@ -163,9 +163,15 @@ const updateModal = (name: string) => {
                 <SelectValue placeholder="Select a status" />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="PAID"> Paid </SelectItem>
-                <SelectItem value="CANCELED"> Cancelled </SelectItem>
-                <SelectItem value="PENDING"> Pending </SelectItem>
+                <SelectItem value="PAID">
+                  {{ t("g.status.paid") }}
+                </SelectItem>
+                <SelectItem value="CANCELED">
+                  {{ t("g.status.cancelled") }}
+                </SelectItem>
+                <SelectItem value="PENDING">
+                  {{ t("g.status.pending") }}
+                </SelectItem>
               </SelectContent>
             </Select>
           </div>
@@ -186,8 +192,11 @@ const updateModal = (name: string) => {
                 </svg>
               </span>
             </Button>
-            <Button class="gap-2 w-fit" @click="updateModal('InvoiceCreate')">
-              <PlusCircleIcon :size="22" />
+            <Button
+              class="gap-2 w-fit font-medium text-sm"
+              @click="updateModal('InvoiceCreate')"
+            >
+              <PlusCircleIcon :size="20" />
 
               {{ t("i.i.addButton") }}
             </Button>
diff --git a/src/pages/index/orders/index.vue b/src/pages/index/orders/index.vue
index 4adb97c8..a7bd4d9d 100644
--- a/src/pages/index/orders/index.vue
+++ b/src/pages/index/orders/index.vue
@@ -163,9 +163,15 @@ const updateModal = (name: string) => {
                 <SelectValue placeholder="Select a status" />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="DELIVERED"> Delivered </SelectItem>
-                <SelectItem value="CANCELED"> Cancelled </SelectItem>
-                <SelectItem value="PENDING"> Pending </SelectItem>
+                <SelectItem value="DELIVERED">
+                  {{ t("g.status.delivered") }}
+                </SelectItem>
+                <SelectItem value="CANCELED">
+                  {{ t("g.status.cancelled") }}
+                </SelectItem>
+                <SelectItem value="PENDING">
+                  {{ t("g.status.pending") }}
+                </SelectItem>
               </SelectContent>
             </Select>
           </div>
@@ -186,8 +192,11 @@ const updateModal = (name: string) => {
                 </svg>
               </span>
             </Button>
-            <Button class="gap-2 w-fit" @click="updateModal('OrderCreate')">
-              <PlusCircleIcon :size="22" />
+            <Button
+              class="gap-2 w-fit font-medium text-sm"
+              @click="updateModal('OrderCreate')"
+            >
+              <PlusCircleIcon :size="20" />
 
               {{ t("o.i.addButton") }}
             </Button>
diff --git a/src/pages/index/products.vue b/src/pages/index/products.vue
index bb5da837..1c5ed9f5 100644
--- a/src/pages/index/products.vue
+++ b/src/pages/index/products.vue
@@ -113,8 +113,11 @@ const updateModal = (name: string) => {
                 </svg>
               </span>
             </Button>
-            <Button class="gap-2 w-fit" @click="updateModal('ProductCreate')">
-              <PlusCircleIcon :size="22" />
+            <Button
+              class="gap-2 w-fit font-medium text-sm"
+              @click="updateModal('ProductCreate')"
+            >
+              <PlusCircleIcon :size="20" />
               {{ t("p.i.addButton") }}
             </Button>
           </div>
diff --git a/src/pages/index/quotes/[id].vue b/src/pages/index/quotes/[id].vue
new file mode 100644
index 00000000..9e2e50cf
--- /dev/null
+++ b/src/pages/index/quotes/[id].vue
@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { onBeforeMount, ref } from "vue";
+import { useRoute } from "vue-router";
+import { invoke } from "@tauri-apps/api";
+import { useI18n } from "vue-i18n";
+import { error } from "tauri-plugin-log-api";
+import type { Res } from "@/types";
+import {
+  PDFDocument,
+  StandardFonts,
+  rgb,
+  PageSizes,
+  PDFPage,
+  PDFFont,
+  type RGB,
+} from "pdf-lib";
+import fontkit from "@pdf-lib/fontkit";
+import { onMounted } from "vue";
+import CairoRegular from "@/assets/fonts/Cairo-Regular.ttf";
+
+const { t, d, locale } = useI18n();
+const id = useRoute().params.id;
+const order = ref<any | null>(null);
+const pdfRef = ref<HTMLIFrameElement | null>();
+//
+let resolveWaitForFetch: (value?: unknown) => void;
+let waitForFetch = new Promise((r) => (resolveWaitForFetch = r));
+let pdfDoc: PDFDocument;
+let font: PDFFont;
+let color: RGB;
+
+onBeforeMount(async () => {
+  try {
+    const res = await invoke<Res<any>>("get_order_details", {
+      id,
+    });
+    order.value = res.data;
+    resolveWaitForFetch();
+  } catch (err: any) {
+    console.log(err);
+    error("Error creating supplier : " + err.error);
+  }
+});
+
+onMounted(async () => {
+  try {
+    await waitForFetch;
+    pdfDoc = await PDFDocument.create();
+    pdfDoc.registerFontkit(fontkit);
+    if (locale.value == "ar-AE") {
+      const res = await fetch(CairoRegular);
+      const fontBytes = await res.arrayBuffer();
+      font = await pdfDoc.embedFont(fontBytes);
+    } else {
+      font = await pdfDoc.embedFont(StandardFonts.Helvetica);
+    }
+    color = rgb(0.34, 0.34, 0.34);
+    generatePdf();
+  } catch (error) {
+    console.log(error);
+  }
+});
+
+const generatePdf = async () => {
+  const page = pdfDoc.addPage();
+  page.setSize(...PageSizes.A4);
+  const { width, height } = page.getSize();
+
+  drawOrderHeader(page, width, height, order.value);
+
+  page.drawLine({
+    start: { x: 20, y: height - 200 },
+    end: { x: width - 20, y: height - 200 },
+    thickness: 1,
+    color,
+    opacity: 0.75,
+  });
+
+  const items = [...order.value.items];
+  drawOrderItems(page, width, height, items, 210);
+
+  const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
+  pdfRef.value?.setAttribute("src", pdfDataUri);
+};
+
+const drawOrderHeader = (
+  page: PDFPage,
+  width: number,
+  height: number,
+  order: any,
+) => {
+  page.drawText("O R D E R", {
+    x: width - 190,
+    y: height - 40,
+    font,
+    size: 30,
+    color,
+  });
+  page.drawText(order.createdAt.split(" ")[0], {
+    x: width - 190,
+    y: height - 70,
+    font,
+    size: 13,
+    color,
+  });
+  page.drawText(t("g.status." + order.status.toLowerCase()), {
+    x: width - 190,
+    y: height - 90,
+    font,
+    size: 13,
+    color,
+  });
+  //
+  page.drawText(t("i.u.d.c.title").toUpperCase(), {
+    x: 20,
+    y: height - 70,
+    font,
+    size: 14,
+    color,
+  });
+  page.drawText(order.supplier.fullname, {
+    x: 20,
+    y: height - 90,
+    font,
+    size: 13,
+    color,
+  });
+  page.drawText(order.supplier.address, {
+    x: 20,
+    y: height - 110,
+    font,
+    size: 13,
+    color,
+  });
+  page.drawText(order.supplier.phoneNumber, {
+    x: 20,
+    y: height - 130,
+    font,
+    size: 13,
+    color,
+  });
+  page.drawText(order.supplier.email, {
+    x: 20,
+    y: height - 150,
+    font,
+    size: 13,
+    color,
+  });
+  //
+  page.drawLine({
+    start: { x: 20, y: height - 170 },
+    end: { x: width - 20, y: height - 170 },
+    thickness: 1,
+    color,
+    opacity: 0.75,
+  });
+  page.drawText(t("g.fields.name"), {
+    x: 25,
+    y: height - 190,
+    font,
+    size: 14,
+    color,
+  });
+  page.drawText(t("g.fields.price"), {
+    x: 25 + width / 4,
+    y: height - 190,
+    font,
+    size: 14,
+    color,
+  });
+
+  page.drawText(t("g.fields.quantity"), {
+    x: 25 + width / 2,
+    y: height - 190,
+    font,
+    size: 14,
+    color,
+  });
+
+  page.drawText(t("g.fields.total"), {
+    x: 25 + (width * 3) / 4,
+    y: height - 190,
+    font,
+    size: 14,
+    color,
+  });
+};
+
+const drawOrderItems = (
+  page: PDFPage,
+  width: number,
+  height: number,
+  items: any[],
+  currentY: number,
+) => {
+  if (items.length === 0) {
+    drawSummary(page, width, height, currentY);
+    return;
+  }
+
+  const item = items.shift();
+  page.drawText(item.name, {
+    x: 25,
+    y: height - currentY - 10,
+    font,
+    size: 12,
+    color,
+  });
+  page.drawText("DH " + item.price.toFixed(2), {
+    x: 25 + width / 4,
+    y: height - currentY - 10,
+    font,
+    size: 12,
+    color,
+  });
+  page.drawText(item.quantity.toFixed(0), {
+    x: 25 + width / 2,
+    y: height - currentY - 10,
+    font,
+    size: 12,
+    color,
+  });
+  page.drawText("DH " + (item.price * item.quantity).toFixed(2), {
+    x: 25 + (width * 3) / 4,
+    y: height - currentY - 10,
+    font,
+    size: 12,
+    color,
+  });
+  page.drawLine({
+    start: { x: 20, y: height - currentY - 20 },
+    end: { x: width - 20, y: height - currentY - 20 },
+    thickness: 1,
+    color,
+    opacity: 0.75,
+  });
+
+  const lineHeight = 30; // Assuming a line height for each item
+  const remainingHeight = height - currentY - lineHeight;
+  if (remainingHeight < lineHeight + 30) {
+    // Not enough space, create a new page and continue
+    const newPage = pdfDoc.addPage();
+    drawOrderItems(newPage, width, height, items, lineHeight);
+  } else {
+    // Enough space, continue drawing on current page
+    drawOrderItems(page, width, height, items, currentY + lineHeight);
+  }
+};
+
+const drawSummary = (
+  page: PDFPage,
+  width: number,
+  height: number,
+  currentY: number,
+) => {
+  page.drawText("DH " + order.value.total.toFixed(2), {
+    x: 25 + (width * 3) / 4,
+    y: height - currentY - 10,
+    font,
+    size: 12,
+    color,
+  });
+
+  page.drawText(t("g.fields.total"), {
+    x: 100 + (width * 2) / 4,
+    y: height - currentY - 10,
+    font,
+    size: 12,
+    color,
+  });
+  page.drawLine({
+    start: { x: 90 + (width * 2) / 4, y: height - currentY - 20 },
+    end: { x: width - 20, y: height - currentY - 20 },
+    thickness: 1,
+    color,
+    opacity: 0.75,
+  });
+};
+</script>
+
+<template>
+  <main class="w-full h-screen">
+    <iframe ref="pdfRef" style="width: 100%; height: 100%" />
+  </main>
+</template>
diff --git a/src/pages/index/quotes/index.vue b/src/pages/index/quotes/index.vue
new file mode 100644
index 00000000..58151f78
--- /dev/null
+++ b/src/pages/index/quotes/index.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { useUpdateRouteQueryParams } from "@/composables/useUpdateQuery";
+import { useRoute } from "vue-router";
+import { invoke } from "@tauri-apps/api";
+import { useI18n } from "vue-i18n";
+import { store } from "@/store";
+import QuotesTable from "@/components/QuotesTable.vue";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import type { Res } from "@/types";
+import type { QuoteProductT, QuoteT } from "@/schemas/quote.schema";
+import {
+  SelectContent,
+  SelectTrigger,
+  SelectValue,
+  SelectItem,
+  Select,
+} from "@/components/ui/select";
+import {
+  type WatchStopHandle,
+  onUnmounted,
+  onMounted,
+  computed,
+  provide,
+  watch,
+  ref,
+} from "vue";
+import { Calendar as CalendarIcon } from "lucide-vue-next";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/utils/shadcn";
+import { error } from "tauri-plugin-log-api";
+import { PlusCircleIcon } from "lucide-vue-next";
+
+const { t } = useI18n();
+const route = useRoute();
+const { updateQueryParams } = useUpdateRouteQueryParams();
+//
+const searchQuery = ref<string>("");
+const page = computed(() => Number(route.query.page));
+const refresh = computed(() => route.query.refresh);
+const quotes = ref<QuoteT[]>([]);
+const totalRows = ref<number>(0);
+const status = ref<string | undefined>(undefined);
+const createdAt = ref<string | number | undefined>(undefined);
+const quoteProducts = ref<QuoteProductT[]>([]);
+//
+provide("count", totalRows);
+provide("itemsCount", 17);
+//
+onUnmounted(() => {
+  if (unwatch) unwatch();
+});
+
+let timer: any;
+let unwatch: WatchStopHandle | null = null;
+onMounted(() => {
+  unwatch = watch(
+    [searchQuery, page, refresh, createdAt, status],
+    ([search, p], [oldSearch]) => {
+      clearTimeout(timer);
+      timer = setTimeout(
+        () => {
+          if (p && p > 0) getQuotes(search, p);
+        },
+        search != oldSearch && oldSearch ? 500 : 0,
+      );
+    },
+    {
+      immediate: true,
+    },
+  );
+});
+
+const getQuotes = async (search: string, page = 1) => {
+  try {
+    const res = await invoke<Res<any>>("list_quotes", {
+      args: {
+        page,
+        search,
+        limit: 17,
+        status: status.value,
+        created_at: createdAt.value
+          ? new Date(createdAt.value).toISOString().slice(0, 10)
+          : null,
+      },
+    });
+
+    quotes.value = res.data.quotes;
+    totalRows.value = res.data.count;
+  } catch (err: any) {
+    error("LIST ORDERS: " + err.error);
+  }
+};
+
+let quoteProductsTimer: any;
+const listQuoteProduct = (id?: string) => {
+  clearTimeout(quoteProductsTimer);
+  quoteProductsTimer = setTimeout(async () => {
+    try {
+      const res = await invoke<Res<any>>("list_quote_products", {
+        id,
+      });
+      //
+      quoteProducts.value = res.data;
+    } catch (err: any) {
+      error("LIST ORDER PRODUCTS: " + err.error);
+    }
+  }, 300);
+};
+
+const cancelQuoteProducts = () => clearInterval(quoteProductsTimer);
+
+const uploadCSV = () => {
+  store.setters.updateStore({ key: "name", value: "CsvUploader" });
+  store.setters.updateStore({ key: "show", value: true });
+  updateQueryParams({ table: "quotes" });
+};
+
+const updateModal = (name: string) => {
+  store.setters.updateStore({ key: "show", value: true });
+  store.setters.updateStore({ key: "name", value: name });
+};
+</script>
+
+<template>
+  <main class="w-full h-full">
+    <div class="w-full h-full flex flex-col items-start justify-start">
+      <Transition appear>
+        <div class="flex justify-between w-full gap-9 mb-2">
+          <div class="w-2/3 lg:max-w-[50%] grid grid-cols-3 gap-2">
+            <Input v-model="searchQuery" type="text" :placeHolder="t('g.s')" />
+
+            <Popover>
+              <PopoverTrigger as-child>
+                <Button
+                  variant="outline"
+                  :class="
+                    cn(
+                      'w-full justify-start text-left font-normal',
+                      !createdAt && 'text-muted-foreground',
+                    )
+                  "
+                >
+                  <CalendarIcon class="mr-2 h-4 w-4" />
+                  <span>{{
+                    createdAt
+                      ? new Date(createdAt).toLocaleDateString("fr-fr")
+                      : "Pick a date"
+                  }}</span>
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent class="w-auto p-0">
+                <Calendar v-model="createdAt" />
+              </PopoverContent>
+            </Popover>
+            <Select v-model="status">
+              <SelectTrigger>
+                <SelectValue placeholder="Select a status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="DELIVERED">
+                  {{ t("g.status.delivered") }}
+                </SelectItem>
+                <SelectItem value="CANCELED">
+                  {{ t("g.status.cancelled") }}
+                </SelectItem>
+                <SelectItem value="PENDING">
+                  {{ t("g.status.pending") }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div class="w-fit flex gap-1">
+            <Button variant="ghost" @click="uploadCSV">
+              <span
+                class="text-sky-400 transition-all duration-200 scale-[0.8] group-hover:fill-sky-600"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="32"
+                  height="32"
+                  viewBox="0 0 256 256"
+                >
+                  <path
+                    d="m217.5 170.3l-20 48a5.9 5.9 0 0 1-11 0l-20-48a6 6 0 0 1 11-4.6l14.5 34.7l14.5-34.7a6 6 0 1 1 11 4.6ZM76 206.1a15.1 15.1 0 0 1-10 3.9c-8.8 0-16-8.1-16-18s7.2-18 16-18a15.1 15.1 0 0 1 10 3.9a5.9 5.9 0 0 0 8.5-.4a6 6 0 0 0-.5-8.5a26.9 26.9 0 0 0-18-7c-15.4 0-28 13.5-28 30s12.6 30 28 30a26.9 26.9 0 0 0 18-7a6 6 0 0 0 .5-8.5a5.9 5.9 0 0 0-8.5-.4Zm53.2-20.4c-7.8-2-11.2-3.3-11.2-5.7c0-6.1 5.6-7 9-7a19.7 19.7 0 0 1 11.2 3.6a6 6 0 0 0 7.6-9.2A30 30 0 0 0 127 161c-12.4 0-21 7.8-21 19s11.6 15.1 20.1 17.3S138 201 138 204s0 7-11 7a20 20 0 0 1-11.2-3.6a6 6 0 1 0-7.6 9.2A30 30 0 0 0 127 223c14.4 0 23-7.1 23-19s-12.5-16.1-20.8-18.3ZM202 94h-50a6 6 0 0 1-6-6V38H56a2 2 0 0 0-2 2v88a6 6 0 0 1-12 0V40a14 14 0 0 1 14-14h96a5.6 5.6 0 0 1 4.2 1.8l56 55.9A6 6 0 0 1 214 88v40a6 6 0 0 1-12 0Zm-44-12h35.5L158 46.5Z"
+                  />
+                </svg>
+              </span>
+            </Button>
+            <Button
+              class="gap-2 w-fit font-medium text-sm"
+              @click="updateModal('QuoteCreate')"
+            >
+              <PlusCircleIcon :size="20" />
+
+              {{ t("o.i.addButton") }}
+            </Button>
+          </div>
+        </div>
+      </Transition>
+      <Transition appear>
+        <QuotesTable
+          @listQuoteProducts="listQuoteProduct"
+          @cancelQuoteProducts="cancelQuoteProducts"
+          :quotes="quotes"
+          :quoteProducts="quoteProducts"
+        />
+      </Transition>
+    </div>
+  </main>
+</template>
diff --git a/src/pages/index/suppliers/index.vue b/src/pages/index/suppliers/index.vue
index fac4a5f9..c4036e7c 100644
--- a/src/pages/index/suppliers/index.vue
+++ b/src/pages/index/suppliers/index.vue
@@ -116,8 +116,11 @@ const updateModal = (name: string) => {
                 </svg>
               </span>
             </Button>
-            <Button class="gap-2 w-fit" @click="updateModal('SupplierCreate')">
-              <PlusCircleIcon :size="22" />
+            <Button
+              class="gap-2 w-fit font-medium text-sm"
+              @click="updateModal('SupplierCreate')"
+            >
+              <PlusCircleIcon :size="20" />
 
               {{ t("s.i.addButton") }}
             </Button>
diff --git a/src/schemas/quote.schema.ts b/src/schemas/quote.schema.ts
new file mode 100644
index 00000000..10e58142
--- /dev/null
+++ b/src/schemas/quote.schema.ts
@@ -0,0 +1,43 @@
+import { z } from "zod";
+
+export const CreateQuoteSchema = z.object({
+  id: z.string().optional(),
+  clientId: z.string().optional(),
+});
+
+export type QuoteT = z.infer<typeof CreateQuoteSchema> & {
+  fullname?: string;
+  products?: number;
+  total?: number;
+  createdAt?: string;
+};
+
+export type QuoteForUpdateT = {
+  id: string;
+  clientId: string;
+  fullname: string;
+  createdAt: string;
+  items: {
+    id?: string;
+    inventory_id?: string;
+    name?: string;
+    product_id?: string;
+    quantity?: number;
+    price?: number;
+  }[];
+};
+
+export type QuoteForCreateT = {
+  clientId: string;
+  items: {
+    product_id?: string;
+    quantity?: number;
+    price?: number;
+  }[];
+};
+
+export type QuoteProductT = {
+  price: number;
+  name: string;
+  quantity: number;
+};
diff --git a/typed-router.d.ts b/typed-router.d.ts
index 7ba8545d..314859dc 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -29,6 +29,8 @@ declare module 'vue-router/auto-routes' {
     '//orders/': RouteRecordInfo<'//orders/', '/orders', Record<never, never>, Record<never, never>>,
     '//orders/[id]': RouteRecordInfo<'//orders/[id]', '/orders/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '//products': RouteRecordInfo<'//products', '/products', Record<never, never>, Record<never, never>>,
+    '//quotes/': RouteRecordInfo<'//quotes/', '/quotes', Record<never, never>, Record<never, never>>,
+    '//quotes/[id]': RouteRecordInfo<'//quotes/[id]', '/quotes/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '//settings': RouteRecordInfo<'//settings', '/settings', Record<never, never>, Record<never, never>>,
     '//suppliers/': RouteRecordInfo<'//suppliers/', '/suppliers', Record<never, never>, Record<never, never>>,
     '//suppliers/[id]': RouteRecordInfo<'//suppliers/[id]', '/suppliers/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,