diff --git a/src/app/[lang]/dashboard/module/dashboard-app-module.ts b/src/app/[lang]/dashboard/module/dashboard-app-module.ts
index 323a2f2..ffd92a1 100644
--- a/src/app/[lang]/dashboard/module/dashboard-app-module.ts
+++ b/src/app/[lang]/dashboard/module/dashboard-app-module.ts
@@ -1,11 +1,12 @@
 import CreateRandomInvoiceButtonVM from "@/app/[lang]/dashboard/vm/create-random-invoice-button-vm";
 import di from "@/bootstrap/di/init-di";
-import createInvoiceUsecase from "@/feature/core/invoice/domain/usecase/create-invoice-usecase";
+import createInvoiceUsecase from "@/feature/core/invoice/domain/usecase/create-invoice/create-invoice-impl.usecase";
+import { createInvoiceUsecaseKey } from "@/feature/core/invoice/domain/usecase/create-invoice/create-invoice.usecase";
 
 export default function dashboardAppModule() {
   const dashboardDi = di.createChildContainer();
 
-  dashboardDi.register(createInvoiceUsecase.name, {
+  dashboardDi.register(createInvoiceUsecaseKey, {
     useValue: createInvoiceUsecase,
   });
   dashboardDi.register(
diff --git a/src/app/[lang]/dashboard/vm/create-random-invoice-button-vm.ts b/src/app/[lang]/dashboard/vm/create-random-invoice-button-vm.ts
index 44abdcb..ed42813 100644
--- a/src/app/[lang]/dashboard/vm/create-random-invoice-button-vm.ts
+++ b/src/app/[lang]/dashboard/vm/create-random-invoice-button-vm.ts
@@ -4,17 +4,20 @@ import useThrottle from "@/bootstrap/helpers/hooks/use-throttle";
 import BaseVM from "@/bootstrap/helpers/vm/base-vm";
 import langKey from "@/bootstrap/i18n/dictionaries/lang-key";
 import { InvoiceParam } from "@/feature/core/invoice/domain/param/invoice-param";
-import createInvoiceUsecase from "@/feature/core/invoice/domain/usecase/create-invoice-usecase";
+import {
+  CreateInvoiceUsecase,
+  createInvoiceUsecaseKey,
+} from "@/feature/core/invoice/domain/usecase/create-invoice/create-invoice.usecase";
 import { faker } from "@faker-js/faker";
 import { useRouter } from "next/navigation";
 import { useTranslation } from "react-i18next";
 
 export default class CreateRandomInvoiceButtonVM extends BaseVM<ButtonVm> {
-  private createInvoice: typeof createInvoiceUsecase;
+  private createInvoice: CreateInvoiceUsecase;
 
   constructor() {
     super();
-    this.createInvoice = this.di.resolve(createInvoiceUsecase.name);
+    this.createInvoice = this.di.resolve(createInvoiceUsecaseKey);
   }
 
   useVM(): ButtonVm {
diff --git a/src/app/components/button/stories/Button.stories.tsx b/src/app/components/button/stories/Button.stories.tsx
index d7739ae..a68137b 100644
--- a/src/app/components/button/stories/Button.stories.tsx
+++ b/src/app/components/button/stories/Button.stories.tsx
@@ -4,7 +4,7 @@ import { DiContext, useDI } from "@/bootstrap/di/di-context";
 import mockedModuleDi from "@/bootstrap/di/mocked-module-di";
 import Story from "@/bootstrap/helpers/view/storybook-base-template-type";
 import getArgVM from "@/bootstrap/helpers/view/storybook-with-arg-vm";
-import createInvoiceUsecase from "@/feature/core/invoice/domain/usecase/create-invoice-usecase";
+import { createInvoiceUsecaseKey } from "@/feature/core/invoice/domain/usecase/create-invoice/create-invoice.usecase";
 import type { Meta } from "@storybook/react";
 import { useRef } from "react";
 
@@ -36,30 +36,32 @@ export const Primary: Story = {
 export const WithVM: Story = {
   decorators: [
     (Story) => {
-      const di = mockedModuleDi([
-        {
-          token: CreateRandomInvoiceButtonVM,
-          provider: CreateRandomInvoiceButtonVM,
-        },
-        {
-          token: createInvoiceUsecase.name,
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-console
-          provider: (args: any) => console.log("clicked", args),
-        },
-      ]);
-      return <Story di={di} />;
+      const di = useRef(
+        mockedModuleDi([
+          {
+            token: CreateRandomInvoiceButtonVM,
+            provider: CreateRandomInvoiceButtonVM,
+          },
+          {
+            token: createInvoiceUsecaseKey,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-console
+            provider: (args: any) => console.log("clicked", args),
+          },
+        ]),
+      );
+      return (
+        <DiContext.Provider value={di.current}>
+          <Story di={di.current} />
+        </DiContext.Provider>
+      );
     },
   ],
-  render: (_, globalProps) => {
+  render: () => {
     function Child() {
       const di = useDI();
       const vm = useRef(di.resolve(CreateRandomInvoiceButtonVM));
       return <Button vm={vm.current} memoizedByVM={false} />;
     }
-    return (
-      <DiContext.Provider value={globalProps.di}>
-        <Child />
-      </DiContext.Provider>
-    );
+    return <Child />;
   },
 };
diff --git a/src/feature/core/invoice/domain/usecase/create-invoice-usecase.ts b/src/feature/core/invoice/domain/usecase/create-invoice/create-invoice-impl.usecase.ts
similarity index 81%
rename from src/feature/core/invoice/domain/usecase/create-invoice-usecase.ts
rename to src/feature/core/invoice/domain/usecase/create-invoice/create-invoice-impl.usecase.ts
index 7c2f136..269ae3b 100644
--- a/src/feature/core/invoice/domain/usecase/create-invoice-usecase.ts
+++ b/src/feature/core/invoice/domain/usecase/create-invoice/create-invoice-impl.usecase.ts
@@ -1,5 +1,3 @@
-"use server";
-
 import { ApiEither } from "@/feature/common/data/api-task";
 import ParamsFailure from "@/feature/common/failures/params-failure";
 import serverDi from "@/feature/common/server-di";
@@ -10,13 +8,14 @@ import {
   InvoiceParam,
   invoiceSchema,
 } from "@/feature/core/invoice/domain/param/invoice-param";
+import { CreateInvoiceUsecase } from "@/feature/core/invoice/domain/usecase/create-invoice/create-invoice.usecase";
 import { invoiceModuleKey } from "@/feature/core/invoice/invoice-module-key";
 import { pipe } from "fp-ts/lib/function";
 import { chain, fromNullable, left, map, right } from "fp-ts/lib/TaskEither";
 
-export default async function createInvoiceUsecase(
+const createInvoiceUsecase: CreateInvoiceUsecase = async (
   params: InvoiceParam,
-): Promise<ApiEither<string>> {
+): Promise<ApiEither<string>> => {
   const repo = serverDi(invoiceModuleKey).resolve<InvoiceRepo>(invoiceRepoKey);
 
   return pipe(
@@ -29,4 +28,6 @@ export default async function createInvoiceUsecase(
     }),
     chain((params) => repo.createInvoice(params)),
   )();
-}
+};
+
+export default createInvoiceUsecase;
diff --git a/src/feature/core/invoice/domain/usecase/create-invoice/create-invoice.usecase.ts b/src/feature/core/invoice/domain/usecase/create-invoice/create-invoice.usecase.ts
new file mode 100644
index 0000000..98fcbce
--- /dev/null
+++ b/src/feature/core/invoice/domain/usecase/create-invoice/create-invoice.usecase.ts
@@ -0,0 +1,8 @@
+import { ApiEither } from "@/feature/common/data/api-task";
+import { InvoiceParam } from "@/feature/core/invoice/domain/param/invoice-param";
+
+export type CreateInvoiceUsecase = (
+  param: InvoiceParam,
+) => Promise<ApiEither<string>>;
+
+export const createInvoiceUsecaseKey = "createInvoiceUsecaseKey";