diff --git a/app/components/card-expense.tsx b/app/components/card-expense.tsx
index 21e0173..d38c759 100644
--- a/app/components/card-expense.tsx
+++ b/app/components/card-expense.tsx
@@ -34,21 +34,24 @@ export function CardExpense({
         <ul>
           {expenses.map((expense) => (
             <li className="my-2" key={expense.transaction_code}>
-              <div className="flex justify-between">
-                <h3 className="text-lg font-medium">{expense.description}</h3>
-                <h3 className="text-lg font-medium">
-                  {new Intl.NumberFormat("id-ID", {
-                    style: "currency",
-                    currency: "IDR",
-                  }).format(expense.idr_amount.toNumber())}
-                </h3>
-              </div>
+              {/* TODO: use whatever we use for detail links. Eg: tx code, unique id, uuid, etc. */}
+              <a href={`/expenses/123`}>
+                <div className="flex justify-between">
+                  <h3 className="text-lg font-medium">{expense.description}</h3>
+                  <h3 className="text-lg font-medium">
+                    {new Intl.NumberFormat("id-ID", {
+                      style: "currency",
+                      currency: "IDR",
+                    }).format(expense.idr_amount.toNumber())}
+                  </h3>
+                </div>
 
-              <p className="text-sm font-light">Category: {expense.category}</p>
-              <p className="text-sm font-light">
-                To: {expense.payout.recipient_name} -{" "}
-                {expense.timestamp.toDateString()}
-              </p>
+                <p className="text-sm font-light">Category: {expense.category}</p>
+                <p className="text-sm font-light">
+                  To: {expense.payout.recipient_name} -{" "}
+                  {expense.timestamp.toDateString()}
+                </p>
+              </a>
               <Separator className="my-2" />
             </li>
           ))}
diff --git a/app/components/ui/badge.tsx b/app/components/ui/badge.tsx
new file mode 100644
index 0000000..9b213de
--- /dev/null
+++ b/app/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "~/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/app/routes/expenses_.$expenseId.tsx b/app/routes/expenses_.$expenseId.tsx
new file mode 100644
index 0000000..de35aab
--- /dev/null
+++ b/app/routes/expenses_.$expenseId.tsx
@@ -0,0 +1,109 @@
+import Navbar from "~/components/navbar";
+import ExpenseSidebar from "~/components/expense-sidebar";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "~/components/ui/card";
+import { Separator } from "~/components/ui/separator";
+import { AccountEntry } from "~/dto/accountEntry";
+import Decimal from "decimal.js";
+import { Badge } from "~/components/ui/badge";
+
+const expense: AccountEntry = {
+  transaction_code: "EXP-001",
+  description: "Sponsorship to Volar.js",
+  category: "server",
+  timestamp: new Date("2024-05-08"),
+  original_amount: new Decimal(5000),
+  original_currency: "usd",
+  idr_amount: new Decimal(70000),
+  type: "expense",
+  payout: {
+    recipient_name: "Volar.js",
+    method: "paypal",
+  },
+}
+
+const Index = () => {
+  return (
+    <div>
+      <Navbar />
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="font-semibold text-2xl">Invoice {expense.transaction_code} to {expense.payout.recipient_name}</h1>
+        <div className="flex space-x-8 mt-6">
+          <div className="flex-grow">
+          <Card>
+            <CardHeader>
+              <CardTitle className="mb-2">
+                {expense.description}
+              </CardTitle>
+              <CardDescription className="flex flex-col">
+                <div className="flex mb-2">
+                  <Badge className="bg-gray-200 text-slate-900">{expense.type}</Badge>
+                  <Separator orientation='vertical' className="bg-red mx-2" decorative />
+                  <div className="flex gap-2">
+                    <Badge className="bg-gray-300 text-slate-900">{expense.transaction_code}</Badge>
+                    <Badge className="bg-gray-200 text-gray-600">{expense.category}</Badge>
+                  </div>
+                </div>
+                <span>{expense.timestamp.toLocaleDateString()}</span>
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="mb-4">
+                <h2 className="mb-2">Invoice Items</h2>
+                <Separator className="mb-8" />
+                <div className="mb-4 flex items-center">
+                  <div className="grow">
+                    <p className="mb-2">{expense.description}</p>
+                    <span className="text-xs">Date: {expense.timestamp.toLocaleDateString()}</span>
+                  </div>
+                  <h3>
+                    {new Intl.NumberFormat("id-ID", {
+                      style: "currency",
+                      currency: "IDR",
+                    }).format(expense.idr_amount.toNumber())}
+                  </h3>
+                </div>
+                <Separator />
+                <div className="flex m-4 w-full">
+                  <div className="ml-auto mr-4 flex">
+                    <h2 className="mr-6 font-bold text-lg">Total Amount</h2>
+                    <h2 className="font-bold text-lg">
+                      {new Intl.NumberFormat("id-ID", {
+                        style: "currency",
+                        currency: "IDR",
+                      }).format(expense.idr_amount.toNumber())}
+                    </h2>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <h2 className="mb-2">Additional Information</h2>
+                <Separator className="mb-8" />
+                <div className="flex gap-4">
+                  <Card className="w-3/12 border-0 bg-slate-50">
+                    <CardHeader>
+                      <h2 className="mb-2 text-gray-600">Paid To</h2>
+                    </CardHeader>
+                    <CardContent>
+                      <h4>{expense.payout.recipient_name}</h4>
+                      <h4 className="pt-2 capitalize">{expense.payout.method}</h4>
+                    </CardContent>
+                  </Card>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+          </div>
+          <ExpenseSidebar />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Index;