diff --git a/packages/dashboard/src/components/Layout.js b/packages/dashboard/src/components/Layout.js
index b9cebf39..4968629f 100644
--- a/packages/dashboard/src/components/Layout.js
+++ b/packages/dashboard/src/components/Layout.js
@@ -136,13 +136,11 @@ export default function Layout({ title, children }) {
                               Settings
                             </a>
                           </Link>
-                          <a
-                            href="#"
-                            className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                            role="menuitem"
-                          >
-                            Payments (coming soon)
-                          </a>
+                          {/* <Link href="/payments">
+                            <a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
+                              Payments
+                            </a>
+                          </Link> */}
                           <a
                             href="#"
                             className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
@@ -245,12 +243,11 @@ export default function Layout({ title, children }) {
                     Settings
                   </a>
                 </Link>
-                <a
-                  href="#"
-                  className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700"
-                >
-                  Payments (coming soon)
-                </a>
+                {/* <Link href="/payments">
+                  <a className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">
+                    Payments
+                  </a>
+                </Link> */}
                 <a
                   href="#"
                   onClick={handleSignOut}
diff --git a/packages/dashboard/src/pages/api/stubs/user.js b/packages/dashboard/src/pages/api/stubs/user.js
new file mode 100644
index 00000000..409bf333
--- /dev/null
+++ b/packages/dashboard/src/pages/api/stubs/user.js
@@ -0,0 +1,5 @@
+import user from "./user.json";
+
+export default (req, res) => {
+  res.json(user);
+};
diff --git a/packages/dashboard/src/pages/api/stubs/user.json b/packages/dashboard/src/pages/api/stubs/user.json
new file mode 100644
index 00000000..3b591617
--- /dev/null
+++ b/packages/dashboard/src/pages/api/stubs/user.json
@@ -0,0 +1,5 @@
+{
+  "sub": "ab776d6d-f324-4fa7-a728-7587d5215481",
+  "tier": 1,
+  "subscribedUntil": "0001-01-01T00:00:00Z"
+}
diff --git a/packages/dashboard/src/pages/api/stubs/user/downloads.js b/packages/dashboard/src/pages/api/stubs/user/downloads.js
index a364a381..c4a24c03 100644
--- a/packages/dashboard/src/pages/api/stubs/user/downloads.js
+++ b/packages/dashboard/src/pages/api/stubs/user/downloads.js
@@ -1,5 +1,4 @@
-// import items from "./downloads.json";
-const items = [];
+import items from "./downloads.json";
 
 export default (req, res) => {
   const offset = parseInt(req.query?.offset ?? 0, 10);
diff --git a/packages/dashboard/src/pages/api/stubs/user/stats.js b/packages/dashboard/src/pages/api/stubs/user/stats.js
new file mode 100644
index 00000000..81a65545
--- /dev/null
+++ b/packages/dashboard/src/pages/api/stubs/user/stats.js
@@ -0,0 +1,5 @@
+import stats from "./stats.json";
+
+export default (req, res) => {
+  res.json(stats);
+};
diff --git a/packages/dashboard/src/pages/api/stubs/user/stats.json b/packages/dashboard/src/pages/api/stubs/user/stats.json
new file mode 100644
index 00000000..29696ca2
--- /dev/null
+++ b/packages/dashboard/src/pages/api/stubs/user/stats.json
@@ -0,0 +1,13 @@
+{
+  "storageUsed": 809500672,
+  "numRegReads": 0,
+  "numRegWrites": 0,
+  "numUploads": 13,
+  "numDownloads": 78,
+  "totalUploadsSize": 618649028,
+  "totalDownloadsSize": 32307956843,
+  "bwUploads": 2810183680,
+  "bwDownloads": 32323934976,
+  "bwRegReads": 0,
+  "bwRegWrites": 0
+}
diff --git a/packages/dashboard/src/pages/index.js b/packages/dashboard/src/pages/index.js
index d0bd884a..c7f6b0d5 100644
--- a/packages/dashboard/src/pages/index.js
+++ b/packages/dashboard/src/pages/index.js
@@ -92,7 +92,7 @@ function SkylinkList({ items = [] }) {
 }
 
 export default function Home() {
-  const { data: user } = useSWR("/user", fetcher);
+  const { data: stats } = useSWR(`${apiPrefix}/user/stats`, fetcher);
   const { data: downloads } = useSWR(`${apiPrefix}/user/downloads?pageSize=3&offset=0`, fetcher);
   const { data: uploads } = useSWR(`${apiPrefix}/user/uploads?pageSize=3&offset=0`, fetcher);
 
@@ -155,7 +155,7 @@ export default function Home() {
                 <div className="ml-5 w-0 flex-1">
                   <dt className="text-sm font-medium text-gray-500 truncate">Storage used</dt>
                   <dd className="flex items-baseline">
-                    <div className="text-2xl font-semibold text-grey-900">{prettyBytes(user?.storageUsed ?? 0)}</div>
+                    <div className="text-2xl font-semibold text-grey-900">{prettyBytes(stats?.storageUsed ?? 0)}</div>
                   </dd>
                 </div>
               </div>
@@ -190,7 +190,7 @@ export default function Home() {
                 <div className="ml-5 w-0 flex-1">
                   <dt className="text-sm font-medium text-gray-500 truncate">Bandwidth used</dt>
                   <dd className="flex items-baseline">
-                    <div className="text-2xl font-semibold text-grey-900">{prettyBytes(user?.bandwidthUsed ?? 0)}</div>
+                    <div className="text-2xl font-semibold text-grey-900">{prettyBytes(stats?.bwDownloads ?? 0)}</div>
                   </dd>
                 </div>
               </div>
diff --git a/packages/dashboard/src/pages/payments.js b/packages/dashboard/src/pages/payments.js
index 78f96697..f61e0a8c 100644
--- a/packages/dashboard/src/pages/payments.js
+++ b/packages/dashboard/src/pages/payments.js
@@ -1,14 +1,19 @@
-import Link from "next/link";
+import dayjs from "dayjs";
 import Layout from "../components/Layout";
 import useSWR from "swr";
 
-const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "/api";
+const plans = [
+  { id: "initial_free", name: "Free", price: 0, description: "Unlimited bandwidth with throttled speed" },
+  { id: "initial_plus", name: "Skynet Plus", price: 5, description: "1 TB premium bandwidth with full speed" },
+  { id: "initial_pro", name: "Skynet Pro", price: 20, description: "5 TB premium bandwidth with full speed" },
+  { id: "initial_extreme", name: "Skynet Extreme", price: 80, description: "20 TB premium bandwidth with full speed" },
+];
+const currentlyActivePlan = "initial_free";
+
 const fetcher = (url) => fetch(url).then((r) => r.json());
 
 export default function Payments() {
-  const { data: invoices, error } = useSWR(`${apiPrefix}/square/invoices`, fetcher);
-
-  console.log(invoices);
+  const { data: invoices, error } = useSWR("/api/square/invoices", fetcher);
 
   return (
     <Layout title="Payments">
@@ -19,12 +24,12 @@ export default function Payments() {
             <div className="bg-white overflow-hidden shadow rounded-lg">
               <div className="px-4 py-5 sm:p-6">
                 <dt className="text-sm font-medium text-gray-500 truncate">Current plan</dt>
-                <dd className="mt-1 text-3xl font-semibold text-gray-900">Free Plan</dd>
+                <dd className="mt-1 text-3xl font-semibold text-gray-900">Free</dd>
               </div>
             </div>
             <div className="bg-white overflow-hidden shadow rounded-lg">
               <div className="px-4 py-5 sm:p-6">
-                <dt className="text-sm font-medium text-gray-500 truncate">Next invoice</dt>
+                <dt className="text-sm font-medium text-gray-500 truncate">Current payment</dt>
                 <dd className="mt-1 text-3xl font-semibold text-gray-900">&mdash;</dd>
               </div>
             </div>
@@ -36,135 +41,6 @@ export default function Payments() {
             </div>
           </dl>
 
-          <section aria-labelledby="payment_details_heading">
-            <form action="#" method="POST">
-              <div className="shadow sm:rounded-md sm:overflow-hidden">
-                <div className="bg-white py-6 px-4 sm:p-6">
-                  <div>
-                    <h2 id="payment_details_heading" className="text-lg leading-6 font-medium text-gray-900">
-                      Payment details
-                    </h2>
-                    <p className="mt-1 text-sm text-gray-500">
-                      Update your billing information. Please note that updating your location could affect your tax
-                      rates.
-                    </p>
-                  </div>
-                  <div className="mt-6 grid grid-cols-4 gap-6">
-                    <div className="col-span-4 sm:col-span-2">
-                      <label htmlFor="first_name" className="block text-sm font-medium text-gray-700">
-                        First name
-                      </label>
-                      <input
-                        type="text"
-                        name="first_name"
-                        id="first_name"
-                        autoComplete="cc-given-name"
-                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
-                      />
-                    </div>
-                    <div className="col-span-4 sm:col-span-2">
-                      <label htmlFor="last_name" className="block text-sm font-medium text-gray-700">
-                        Last name
-                      </label>
-                      <input
-                        type="text"
-                        name="last_name"
-                        id="last_name"
-                        autoComplete="cc-family-name"
-                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
-                      />
-                    </div>
-                    <div className="col-span-4 sm:col-span-2">
-                      <label htmlFor="email_address" className="block text-sm font-medium text-gray-700">
-                        Email address
-                      </label>
-                      <input
-                        type="text"
-                        name="email_address"
-                        id="email_address"
-                        autoComplete="email"
-                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
-                      />
-                    </div>
-                    <div className="col-span-4 sm:col-span-1">
-                      <label htmlFor="expiration_date" className="block text-sm font-medium text-gray-700">
-                        Expration date
-                      </label>
-                      <input
-                        type="text"
-                        name="expiration_date"
-                        id="expiration_date"
-                        autoComplete="cc-exp"
-                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
-                        placeholder="MM / YY"
-                      />
-                    </div>
-                    <div className="col-span-4 sm:col-span-1">
-                      <label htmlFor="security_code" className="flex items-center text-sm font-medium text-gray-700">
-                        <span>Security code</span>
-                        {/* Heroicon name: solid/question-mark-circle */}
-                        <svg
-                          className="ml-1 flex-shrink-0 h-5 w-5 text-gray-300"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 20 20"
-                          fill="currentColor"
-                          aria-hidden="true"
-                        >
-                          <path
-                            fillRule="evenodd"
-                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
-                            clipRule="evenodd"
-                          />
-                        </svg>
-                      </label>
-                      <input
-                        type="text"
-                        name="security_code"
-                        id="security_code"
-                        autoComplete="cc-csc"
-                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
-                      />
-                    </div>
-                    <div className="col-span-4 sm:col-span-2">
-                      <label htmlFor="country" className="block text-sm font-medium text-gray-700">
-                        Country / Region
-                      </label>
-                      <select
-                        id="country"
-                        name="country"
-                        autoComplete="country"
-                        className="mt-1 block w-full bg-white border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
-                      >
-                        <option>United States</option>
-                        <option>Canada</option>
-                        <option>Mexico</option>
-                      </select>
-                    </div>
-                    <div className="col-span-4 sm:col-span-2">
-                      <label htmlFor="postal_code" className="block text-sm font-medium text-gray-700">
-                        ZIP / Postal
-                      </label>
-                      <input
-                        type="text"
-                        name="postal_code"
-                        id="postal_code"
-                        autoComplete="postal-code"
-                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div className="px-4 py-3 bg-gray-50 text-right sm:px-6">
-                  <button
-                    type="submit"
-                    className="bg-gray-800 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
-                  >
-                    Save
-                  </button>
-                </div>
-              </div>
-            </form>
-          </section>
           {/* Plan */}
           <section aria-labelledby="plan_heading">
             <form action="#" method="POST">
@@ -176,129 +52,55 @@ export default function Payments() {
                         Plan
                       </h3>
                     </div>
-                    <div className="ml-4 mt-2 flex-shrink-0">
-                      <Link href="/plans">
-                        <a className="font-medium text-green-600 hover:text-green-500">help me choose a plan</a>
-                      </Link>
-                    </div>
                   </div>
                   <fieldset>
                     <legend className="sr-only">Pricing plans</legend>
                     <ul className="relative bg-white rounded-md -space-y-px">
-                      <li>
-                        {/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
-                        <div className="relative border rounded-tl-md rounded-tr-md p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
-                          <label className="flex items-center text-sm cursor-pointer">
-                            <input
-                              name="pricing_plan"
-                              type="radio"
-                              className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
-                              aria-describedby="plan-option-pricing-0 plan-option-limit-0"
-                              defaultChecked
-                            />
-                            <span className="ml-3 font-medium text-gray-900">Free</span>
-                          </label>
-                          <p id="plan-option-pricing-0" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
-                            {/* On: "text-orange-900", Off: "text-gray-900" */}
-                            <span className="font-medium">&mdash;</span>
+                      {plans.map((plan, index) => (
+                        <li key={plan.id}>
+                          {/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
+                          <div
+                            className={`relative border ${index === 0 ? "rounded-tl-md rounded-tr-md" : ""} ${
+                              index === plans.length - 1 ? "rounded-bl-md rounded-br-md" : ""
+                            } p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3`}
+                          >
+                            <label className="flex items-center text-sm cursor-pointer">
+                              <input
+                                name="pricing_plan"
+                                type="radio"
+                                className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
+                                aria-describedby="plan-option-pricing-0 plan-option-limit-0"
+                                defaultChecked
+                              />
+                              <span className="ml-3 font-medium text-gray-900">{plan.name}</span>
+                            </label>
+                            <p id="plan-option-pricing-0" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
+                              {/* On: "text-orange-900", Off: "text-gray-900" */}
+                              <span className="font-medium">{plan.price ? `$${plan.price} / mo` : "no cost"}</span>
+                              {/* On: "text-orange-700", Off: "text-gray-500" */}
+                              {/* <span>($290 / yr)</span> */}
+                            </p>
                             {/* On: "text-orange-700", Off: "text-gray-500" */}
-                            {/* <span>($290 / yr)</span> */}
-                          </p>
-                          {/* On: "text-orange-700", Off: "text-gray-500" */}
-                          <p id="plan-option-limit-0" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
-                            Unlimited bandwidth with throttled speed
-                          </p>
-                        </div>
-                      </li>
-                      <li>
-                        {/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
-                        <div className="relative border border-gray-200 p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
-                          <label className="flex items-center text-sm cursor-pointer">
-                            <input
-                              name="pricing_plan"
-                              type="radio"
-                              className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
-                              aria-describedby="plan-option-pricing-1 plan-option-limit-1"
-                            />
-                            <span className="ml-3 font-medium text-gray-900">Skynet Plus</span>
-                          </label>
-                          <p id="plan-option-pricing-1" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
-                            {/* On: "text-orange-900", Off: "text-gray-900" */}
-                            <span className="font-medium">$5 / mo</span>
-                            {/* On: "text-orange-700", Off: "text-gray-500" */} <span>($50 / yr)</span>
-                          </p>
-                          {/* On: "text-orange-700", Off: "text-gray-500" */}
-                          <p id="plan-option-limit-1" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
-                            1 TB premium bandwidth with full speed
-                          </p>
-                        </div>
-                      </li>
-                      <li>
-                        {/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
-                        <div className="relative border border-gray-200 rounded-bl-md rounded-br-md p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
-                          <label className="flex items-center text-sm cursor-pointer">
-                            <input
-                              name="pricing_plan"
-                              type="radio"
-                              className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
-                              aria-describedby="plan-option-pricing-2 plan-option-limit-2"
-                            />
-                            <span className="ml-3 font-medium text-gray-900">Skynet Pro</span>
-                          </label>
-                          <p id="plan-option-pricing-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
-                            {/* On: "text-orange-900", Off: "text-gray-900" */}
-                            <span className="font-medium">$20 / mo</span>
-                            {/* On: "text-orange-700", Off: "text-gray-500" */} <span>($200 / yr)</span>
-                          </p>
-                          {/* On: "text-orange-700", Off: "text-gray-500" */}
-                          <p id="plan-option-limit-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
-                            5 TB premium bandwidth with full speed
-                          </p>
-                        </div>
-                      </li>
-                      <li>
-                        {/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
-                        <div className="relative border border-gray-200 rounded-bl-md rounded-br-md p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
-                          <label className="flex items-center text-sm cursor-pointer">
-                            <input
-                              name="pricing_plan"
-                              type="radio"
-                              className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
-                              aria-describedby="plan-option-pricing-2 plan-option-limit-2"
-                            />
-                            <span className="ml-3 font-medium text-gray-900">Skynet Extreme</span>
-                          </label>
-                          <p id="plan-option-pricing-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
-                            {/* On: "text-orange-900", Off: "text-gray-900" */}
-                            <span className="font-medium">$80 / mo</span>
-                            {/* On: "text-orange-700", Off: "text-gray-500" */} <span>($800 / yr)</span>
-                          </p>
-                          {/* On: "text-orange-700", Off: "text-gray-500" */}
-                          <p id="plan-option-limit-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
-                            20 TB premium bandwidth with full speed
-                          </p>
-                        </div>
-                      </li>
+                            <p id="plan-option-limit-0" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
+                              {plan.description}
+                            </p>
+                          </div>
+                        </li>
+                      ))}
                     </ul>
                   </fieldset>
                   <div className="flex items-center">
-                    {/* Enabled: "bg-orange-500", Not Enabled: "bg-gray-200" */}
-                    <button
-                      type="button"
-                      className="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors ease-in-out duration-200"
-                      aria-pressed="true"
-                      aria-labelledby="annual-billing-label"
-                    >
-                      <span className="sr-only">Use setting</span>
-                      {/* Enabled: "translate-x-5", Not Enabled: "translate-x-0" */}
-                      <span
-                        aria-hidden="true"
-                        className="translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
-                      />
-                    </button>
-                    <span className="ml-3" id="annual-billing-label">
-                      <span className="text-sm font-medium text-gray-900">Annual billing </span>
-                      <span className="text-sm text-gray-500">(Save 10%)</span>
+                    <span className="text-sm font-medium text-gray-900">Currently active plan:</span>
+                    <span className="text-sm ml-3">Free</span>
+                    <span className="text-sm text-gray-500 ml-3">
+                      (next payment $5 on 10/10/2020 -{" "}
+                      <a
+                        href="/api/square/subscriptions/cancel"
+                        className="text-sm text-green-600 hover:text-green-900"
+                      >
+                        cancel
+                      </a>
+                      )
                     </span>
                   </div>
                 </div>
@@ -307,7 +109,7 @@ export default function Payments() {
                     type="submit"
                     className="bg-gray-800 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
                   >
-                    Save
+                    Subscribe to selected plan
                   </button>
                 </div>
               </div>
@@ -334,6 +136,12 @@ export default function Payments() {
                             >
                               Date
                             </th>
+                            <th
+                              scope="col"
+                              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                            >
+                              Invoice
+                            </th>
                             <th
                               scope="col"
                               className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
@@ -344,7 +152,7 @@ export default function Payments() {
                               scope="col"
                               className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                             >
-                              Amount
+                              Status
                             </th>
                             {/*
                     `relative` is added here due to a weird bug in Safari that causes `sr-only` headings to introduce overflow on the body on mobile.
@@ -358,19 +166,29 @@ export default function Payments() {
                           </tr>
                         </thead>
                         <tbody className="bg-white divide-y divide-gray-200">
-                          <tr>
-                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1/1/2020</td>
-                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                              Business Plan - Annual Billing
-                            </td>
-                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">CA$109.00</td>
-                            <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                              <a href="#" className="text-orange-600 hover:text-orange-900">
-                                View receipt
-                              </a>
-                            </td>
-                          </tr>
-                          {/* More items... */}
+                          {invoices &&
+                            invoices.map((invoice) => (
+                              <tr key={invoice.id}>
+                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                                  {dayjs(invoice.createdAt).format("DD/MM/YYYY")}
+                                </td>
+                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                  {invoice.invoiceNumber}
+                                </td>
+                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{invoice.title}</td>
+                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{invoice.status}</td>
+                                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                  <a
+                                    href={invoice.publicUrl}
+                                    className="text-green-600 hover:text-green-900"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                  >
+                                    View invoice
+                                  </a>
+                                </td>
+                              </tr>
+                            ))}
                         </tbody>
                       </table>
                     </div>