diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
new file mode 100644
index 0000000..a8baea7
--- /dev/null
+++ b/.github/workflows/publish.yml
@@ -0,0 +1,60 @@
+name: 'Publish'
+on: workflow_dispatch
+
+env:
+  CARGO_INCREMENTAL: 0
+  RUST_BACKTRACE: short
+  RUSTFLAGS: '-W unreachable-pub -W rust-2021-compatibility'
+
+jobs:
+  publish-tauri:
+    strategy:
+      fail-fast: false
+      matrix:
+        settings:
+          - platform: 'macos-latest'
+            args: '--target universal-apple-darwin'
+          - platform: 'ubuntu-22.04'
+            args: ''
+          - platform: 'windows-latest'
+            args: '--target x86_64-pc-windows-msvc'
+    runs-on: ${{ matrix.settings.platform }}
+    steps:
+      - uses: actions/checkout@v3
+      - name: setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: aarch64-apple-darwin
+      - name: install dependencies (ubuntu only)
+        if: matrix.settings.platform == 'ubuntu-22.04'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y build-essential libssl-dev javascriptcoregtk-4.1 libayatana-appindicator3-dev libsoup-3.0-dev libgtk-3-dev libwebkit2gtk-4.1-dev webkit2gtk-4.1 librsvg2-dev patchelf
+      - name: Install bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+      - name: Setup node and cache for package data
+        uses: actions/setup-node@v3
+        with:
+          node-version: 'lts/*'
+          cache: 'bun'
+          cache-dependency-path: bun.lockb
+      - uses: Swatinem/rust-cache@v2
+        with:
+          cache-on-failure: true
+      - run: bun install
+      - uses: tauri-apps/tauri-action@dev
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tagName: v__VERSION__
+          releaseName: 'v__VERSION__'
+          releaseBody: 'See the assets to download this version and install.'
+          releaseDraft: true
+          prerelease: false
+          args: ${{ matrix.settings.args }}
+          includeDebug: false
\ No newline at end of file
diff --git a/src/bindings.ts b/src/bindings.ts
index 1e0205e..50260a0 100644
--- a/src/bindings.ts
+++ b/src/bindings.ts
@@ -16,10 +16,21 @@ export type GetInvoiceData = {
   status: string;
 };
 
+export type GetClientData = {
+  id: number;
+  name: string;
+  email: string;
+  phoneNumber: string;
+};
+
 export function getInvoices(indicies: Indicies) {
   return invoke<GetInvoiceData[]>("get_invoices", { companyId: StateService().state.companyId, indicies });
 }
 
+export function getClients(indicies: Indicies) {
+  return invoke<GetClientData[]>("get_clients", { companyId: StateService().state.companyId, indicies });
+}
+
 export function getCompany(id: number | null) {
   return invoke<Company | null>("get_company", { id });
 }
@@ -31,6 +42,7 @@ export function createCompany(data: CreateCompanyData) {
 export function migrateAndPopulate() {
   return invoke("migrate_and_populate");
 }
+
 export async function getCompanies(exclude?: number) {
   return await invoke<Company[]>("get_companies", { exclude });
 }
diff --git a/src/screens/Dashboard/components/Box.tsx b/src/screens/Dashboard/components/Box.tsx
index 6a63506..6281f22 100644
--- a/src/screens/Dashboard/components/Box.tsx
+++ b/src/screens/Dashboard/components/Box.tsx
@@ -2,9 +2,7 @@ import type { ParentComponent } from "solid-js";
 
 const Box: ParentComponent<{ class: string }> = (props) => {
   return (
-    <div class={`rounded-lg border p-3 bg-[#E6E6E6] border-default dark:bg-[#282828] h-full w-full ${props.class}`}>
-      {props.children}
-    </div>
+    <div class={`rounded-lg border p-3 bg-element border-default h-full w-full ${props.class}`}>{props.children}</div>
   );
 };
 
diff --git a/src/screens/Dashboard/components/Form/Dropdown.tsx b/src/screens/Dashboard/components/Form/Dropdown.tsx
index e69de29..165eb97 100644
--- a/src/screens/Dashboard/components/Form/Dropdown.tsx
+++ b/src/screens/Dashboard/components/Form/Dropdown.tsx
@@ -0,0 +1,95 @@
+import type { Component, JSX } from "solid-js";
+import { For, createSignal } from "solid-js";
+import { DisclosureStateChild, Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from "terracotta";
+import { TbSelector } from "solid-icons/tb";
+import { FiCheck } from "solid-icons/fi";
+
+interface DropdownItem {
+  id: number;
+  name: string;
+}
+
+interface DropdownProps {
+  data: DropdownItem[];
+  onSelect: (value: DropdownItem) => void;
+}
+
+const Dropdown: Component<DropdownProps> = (props) => {
+  const [selected, setSelected] = createSignal(props.data[0]);
+
+  const handleSelect = (value: DropdownItem | undefined) => {
+    if (!value) return;
+    setSelected(value);
+    props.onSelect(value);
+  };
+
+  return (
+    <div class="w-full">
+      <Listbox defaultOpen={false} value={selected()} onSelectChange={handleSelect}>
+        <div class="relative mt-1">
+          <ListboxButton class="relative w-full py-2 pl-3 pr-10 text-left bg-element border-default border-1 rounded-lg cursor-default focus:outline-none sm:text-sm">
+            <span class="block truncate">{selected().name}</span>
+            <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+              <TbSelector class="w-5 h-5 text-primary" aria-hidden="true" />
+            </span>
+          </ListboxButton>
+          <DisclosureStateChild>
+            {({ isOpen }): JSX.Element => (
+              <Transition
+                show={isOpen()}
+                enter="transition ease-in duration-100"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="transition ease-out duration-100"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <ListboxOptions
+                  unmount={false}
+                  class="absolute w-full py-1 mt-1 overflow-auto text-base bg-element border-default border-1 rounded-md shadow-lg max-h-60 focus:outline-none sm:text-sm"
+                >
+                  <For each={props.data}>
+                    {(item): JSX.Element => (
+                      <ListboxOption class="focus:outline-none group" value={item}>
+                        {({ isActive, isSelected }): JSX.Element => (
+                          <div
+                            classList={{
+                              "bg-default": isActive(),
+                              "cursor-default select-none relative py-2 pl-10 pr-4": true,
+                            }}
+                          >
+                            <span
+                              classList={{
+                                "font-medium": isSelected(),
+                                "font-normal": !isSelected(),
+                                "block truncate": true,
+                              }}
+                            >
+                              {item.name}
+                            </span>
+                            {isSelected() ? (
+                              <span
+                                classList={{
+                                  "text-primary": true,
+                                  "absolute inset-y-0 left-0 flex items-center pl-3": true,
+                                }}
+                              >
+                                <FiCheck class="w-5 h-5" />
+                              </span>
+                            ) : null}
+                          </div>
+                        )}
+                      </ListboxOption>
+                    )}
+                  </For>
+                </ListboxOptions>
+              </Transition>
+            )}
+          </DisclosureStateChild>
+        </div>
+      </Listbox>
+    </div>
+  );
+};
+
+export default Dropdown;
diff --git a/src/screens/Dashboard/components/Form/Input.tsx b/src/screens/Dashboard/components/Form/Input.tsx
index e69de29..f4c9fd8 100644
--- a/src/screens/Dashboard/components/Form/Input.tsx
+++ b/src/screens/Dashboard/components/Form/Input.tsx
@@ -0,0 +1,40 @@
+import type { Component } from "solid-js";
+
+type TextInputProps = {
+  type: "text" | "date";
+  onChange: (value: string) => void;
+  label: string;
+  defaultValue?: string;
+};
+
+type NumberInputProps = {
+  type: "number";
+  onChange: (value: number) => void;
+  label: string;
+  defaultValue?: number;
+};
+
+type InputProps = TextInputProps | NumberInputProps;
+
+const Input: Component<InputProps> = (props) => {
+  const handleInput = (e: Event) => {
+    const value = (e.target as HTMLInputElement).value;
+    if (props.type === "number") {
+      props.onChange(Number(value) as never);
+    } else {
+      props.onChange(value as never);
+    }
+  };
+
+  return (
+    <input
+      type={props.type}
+      class="w-full px-2 py-1 border border-default rounded-lg bg-element border-default"
+      onInput={handleInput}
+      placeholder={props.label}
+      value={props.defaultValue}
+    />
+  );
+};
+
+export default Input;
diff --git a/src/screens/Dashboard/components/Form/Table.tsx b/src/screens/Dashboard/components/Form/Table.tsx
index e69de29..35edd76 100644
--- a/src/screens/Dashboard/components/Form/Table.tsx
+++ b/src/screens/Dashboard/components/Form/Table.tsx
@@ -0,0 +1,7 @@
+import type { Component } from "solid-js";
+
+const Table: Component<{}> = (props) => {
+  return <div></div>;
+};
+
+export default Table;
diff --git a/src/screens/Dashboard/components/StatBox.tsx b/src/screens/Dashboard/components/StatBox.tsx
index 1488351..3ae58b5 100644
--- a/src/screens/Dashboard/components/StatBox.tsx
+++ b/src/screens/Dashboard/components/StatBox.tsx
@@ -12,7 +12,7 @@ const StatBox: Component<{
   };
 
   return (
-    <div class="p-2.5 rounded-lg border bg-[#E6E6E6] border-default dark-(bg-[#282828]) h-25 w-full relative overflow-hidden">
+    <div class="p-2.5 rounded-lg border bg-element border-default h-25 w-full relative overflow-hidden">
       <div class="absolute top-0 right-0 w-14 h-8 rounded-lg bg-green-500/30 blur-md" />
       <div class="flex flex-col justify-between items-stretch w-full h-full">
         <div class="flex flex-row justify-between items-start">
diff --git a/src/screens/Dashboard/pages/Sales/Clients/ClientDetail.tsx b/src/screens/Dashboard/pages/Sales/Clients/ClientDetail.tsx
index 91bdacf..d199d4c 100644
--- a/src/screens/Dashboard/pages/Sales/Clients/ClientDetail.tsx
+++ b/src/screens/Dashboard/pages/Sales/Clients/ClientDetail.tsx
@@ -4,6 +4,7 @@ import Container from "@/screens/Dashboard/components/Container";
 import PageHeader from "@/screens/Dashboard/components/PageHeader";
 import HeaderButton from "@/screens/Dashboard/components/PageHeader/HeaderButton";
 import StatBox from "@/screens/Dashboard/components/StatBox";
+import Table from "@/screens/Dashboard/components/Table";
 import { useNavigate, useParams } from "@solidjs/router";
 import type { Component } from "solid-js";
 
@@ -28,7 +29,16 @@ const ClientDetail: Component = () => {
         <StatBox title={t("overview.stats.tax")} value={120} />
       </div>
       <div class="grid grid-cols-6 h-full mt-4 gap-4">
-        <div class="bg-red col-span-4"></div>
+        <div class="bg-red col-span-4">
+          <Table
+            columns={[
+              { field: "id", header: "ID" },
+              { field: "name", header: "Name" },
+            ]}
+            totalItems={10}
+            loadPage={() => {}}
+          />
+        </div>
         <Box class="col-span-2">ddd</Box>
       </div>
     </Container>
diff --git a/src/screens/Dashboard/pages/Sales/Clients/ManageClient.tsx b/src/screens/Dashboard/pages/Sales/Clients/ManageClient.tsx
index 5d8a74c..05d1a3b 100644
--- a/src/screens/Dashboard/pages/Sales/Clients/ManageClient.tsx
+++ b/src/screens/Dashboard/pages/Sales/Clients/ManageClient.tsx
@@ -1,12 +1,25 @@
+import { useI18n } from "@/i18n";
+import Container from "@/screens/Dashboard/components/Container";
+import PageHeader from "@/screens/Dashboard/components/PageHeader";
+import HeaderButton from "@/screens/Dashboard/components/PageHeader/HeaderButton";
 import { useParams } from "@solidjs/router";
 import type { Component } from "solid-js";
 
 const ManageClient: Component = () => {
   const params = useParams<{ readonly id?: string }>();
+  const [t] = useI18n();
+
   return (
-    <div>
-      <h1 class="text-4xl font-bold">Create Client</h1>
-    </div>
+    <Container>
+      <PageHeader
+        title={[t("sidebar.section.sales"), t("sidebar.button.clients"), params.id ? params.id : t("pageHeaader.new")]}
+        actionElements={[
+          <HeaderButton onClick={() => {}} buttonType="primary">
+            Save
+          </HeaderButton>,
+        ]}
+      />
+    </Container>
   );
 };
 
diff --git a/src/screens/Dashboard/pages/Sales/Clients/index.tsx b/src/screens/Dashboard/pages/Sales/Clients/index.tsx
index 3685b4e..c96b480 100644
--- a/src/screens/Dashboard/pages/Sales/Clients/index.tsx
+++ b/src/screens/Dashboard/pages/Sales/Clients/index.tsx
@@ -1,50 +1,37 @@
-import { type Template, getTemplates } from "@/bindings";
+import { getClients } from "@/bindings";
 import { useI18n } from "@/i18n";
 import Table, { type Indicies } from "@/screens/Dashboard/components/Table";
-import { FiEdit, FiPlus, FiTrash } from "solid-icons/fi";
+import { FiEdit, FiPlus } from "solid-icons/fi";
 import type { Component } from "solid-js";
 import { useNavigate } from "@solidjs/router";
 import PageHeader from "@/screens/Dashboard/components/PageHeader";
 import HeaderButton from "@/screens/Dashboard/components/PageHeader/HeaderButton";
 import Container from "@/screens/Dashboard/components/Container";
-import { Button } from "@/shared/components/Button";
 
 const Clients: Component = () => {
   const [t] = useI18n();
   const navigate = useNavigate();
 
   const loadPage = async (indices: Indicies) => {
-    const data = await getTemplates(indices);
-    console.log(data);
-    return data;
+    return await getClients(indices);
   };
 
-  const handleEdit = (item: Template) => {
+  const handleEdit = (item) => {
     navigate(`detail/${item.id}`);
   };
 
-  const handleDelete = (item: Template) => {
-    console.log("Delete:", item);
-    // Handle delete action
-  };
-
   const rowActions = [
     {
       label: "Edit",
       onClick: handleEdit,
       icon: FiEdit,
     },
-    {
-      label: "Delete",
-      onClick: handleDelete,
-      icon: FiTrash,
-    },
   ];
 
   return (
     <Container>
       <PageHeader
-        title={[t("sidebar.section.other"), t("sidebar.button.templates")]}
+        title={[t("sidebar.section.sales"), t("sidebar.button.clients")]}
         actionElements={[
           <HeaderButton onClick={() => navigate("new")} buttonType="primary">
             <FiPlus class="stroke-2" />
@@ -55,7 +42,8 @@ const Clients: Component = () => {
         columns={[
           { field: "id", header: "ID" },
           { field: "name", header: "Name" },
-          { field: "templateType", header: "Type" },
+          { field: "email", header: "Email" },
+          { field: "phoneNumber", header: "Phone" },
         ]}
         totalItems={10}
         loadPage={loadPage}
diff --git a/src/screens/Dashboard/pages/Sales/Invoices/ManageInvoice.tsx b/src/screens/Dashboard/pages/Sales/Invoices/ManageInvoice.tsx
index 633c111..9c03a14 100644
--- a/src/screens/Dashboard/pages/Sales/Invoices/ManageInvoice.tsx
+++ b/src/screens/Dashboard/pages/Sales/Invoices/ManageInvoice.tsx
@@ -8,6 +8,8 @@ import { useParams } from "@solidjs/router";
 import Form from "@/screens/Dashboard/components/Form";
 import type { Invoice } from "@/bindings";
 import Container from "@/screens/Dashboard/components/Container";
+import Input from "@/screens/Dashboard/components/Form/Input";
+import Dropdown from "@/screens/Dashboard/components/Form/Dropdown";
 
 const ManageInvoice: Component = () => {
   const params = useParams<{ readonly id?: string }>();
@@ -54,33 +56,24 @@ const ManageInvoice: Component = () => {
           <Form form={form}>
             <form.Field name="number">
               {(field) => (
-                <div>
-                  <label>
-                    <div>Invoice Number</div>
-                    <input
-                      value={field().state.value}
-                      onInput={(e) => {
-                        field().handleChange(e.currentTarget.value);
-                      }}
-                    />
-                  </label>
-                </div>
+                <Input
+                  type="text"
+                  label="Number"
+                  defaultValue={field().state.value}
+                  onChange={(data) => field().handleChange(data)}
+                />
               )}
             </form.Field>
             <form.Field name="clientId">
               {(field) => (
-                <div>
-                  <label>
-                    <div>Client ID</div>
-                    <input
-                      type="number"
-                      value={field().state.value}
-                      onInput={(e) => {
-                        field().handleChange(Number(e.currentTarget.value));
-                      }}
-                    />
-                  </label>
-                </div>
+                <Dropdown
+                  data={[
+                    { name: "Alice", id: 1 },
+                    { name: "Bob", id: 2 },
+                    { name: "Carol", id: 3 },
+                  ]}
+                  onSelect={(data) => field().handleChange(data.id)}
+                />
               )}
             </form.Field>
             <form.Field name="templateId">
diff --git a/src/styles/index.css b/src/styles/index.css
index 79e1e6d..41fd1b2 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -41,6 +41,7 @@ input[type=number] {
     --color-secondary: #52525b;
     --bg-primary: #EAEAEB;
     --bg-secondary: #FFFFFF;
+    --bg-element: #E6E6E6;
     --color-lightgrey: #E5E7E7;
     --color-danger: #b91c1c;
     --color-warning: #f97316;
@@ -61,6 +62,7 @@ input[type=number] {
     --color-secondary: #a1a1aa;
     --bg-primary: #262626;
     --bg-secondary: #636366;
+    --bg-element: #282828;
     --color-lightgrey: #E5E7E7;
     --color-danger: #f87171;
     --color-warning: #facc15;
diff --git a/unocss.config.ts b/unocss.config.ts
index 1ee88cb..0efb1dc 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -32,6 +32,7 @@ export default defineConfig({
     },
     backgroundColor: {
       primary: "var(--bg-primary)",
+      element: "var(--bg-element)",
       secondary: "var(--bg-secondary)",
       default: "var(--color-default)",
       fills: {