diff --git a/components/dashboard/src/components/UsageBasedBillingConfig.tsx b/components/dashboard/src/components/UsageBasedBillingConfig.tsx
index 717c981a56a674..52c6843ad53e1a 100644
--- a/components/dashboard/src/components/UsageBasedBillingConfig.tsx
+++ b/components/dashboard/src/components/UsageBasedBillingConfig.tsx
@@ -19,6 +19,7 @@ import { getGitpodService } from "../service/service";
 import DropDown from "../components/DropDown";
 import Modal from "../components/Modal";
 import Alert from "./Alert";
+import dayjs from "dayjs";
 
 const BASE_USAGE_LIMIT_FOR_STRIPE_USERS = 1000;
 
@@ -43,9 +44,9 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
     const [billingError, setBillingError] = useState<string | undefined>();
 
     const localStorageKey = `pendingStripeSubscriptionFor${attributionId}`;
-    const billingPeriodFrom = new Date(new Date().toISOString().slice(0, 7) + "-01"); // First day of this month: YYYY-MM-01T00:00:00.000Z
-    const billingPeriodTo = new Date(billingPeriodFrom.getUTCFullYear(), billingPeriodFrom.getMonth() + 1); // First day of next month
-    billingPeriodTo.setMilliseconds(billingPeriodTo.getMilliseconds() - 1); // Last millisecond of this month
+    const now = dayjs().utc(true);
+    const billingPeriodFrom = now.startOf("month");
+    const billingPeriodTo = now.endOf("month");
 
     useEffect(() => {
         if (!attributionId) {
@@ -176,7 +177,7 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
             const response = await getGitpodService().server.listUsage({
                 attributionId,
                 order: Ordering.ORDERING_DESCENDING,
-                from: billingPeriodFrom.getTime(),
+                from: billingPeriodFrom.toDate().getTime(),
                 to: Date.now(),
             });
             setCurrentUsage(response.creditsUsed);
@@ -253,12 +254,8 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
                             <div className="flex-grow">
                                 <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Current Period</div>
                                 <div className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                                    <span className="font-semibold">
-                                        {billingPeriodFrom.toLocaleString("default", { month: "long" })}{" "}
-                                        {billingPeriodFrom.getFullYear()}
-                                    </span>{" "}
-                                    ({billingPeriodFrom.toLocaleString("default", { month: "short", day: "numeric" })} -{" "}
-                                    {billingPeriodTo.toLocaleString("default", { month: "short", day: "numeric" })})
+                                    <span className="font-semibold">{`${billingPeriodFrom.format("MMMM YYYY")}`}</span>{" "}
+                                    {`(${billingPeriodFrom.format("MMM D")}` + ` - ${billingPeriodTo.format("MMM D")})`}
                                 </div>
                             </div>
                             <div>
@@ -279,7 +276,8 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
                             <Check className="m-0.5 w-5 h-5" />
                             <div className="flex flex-col">
                                 <span>
-                                    {currency === "EUR" ? "€" : "$"}0.36 for 10 credits or 1 hour of Standard workspace usage.{" "}
+                                    {currency === "EUR" ? "€" : "$"}0.36 for 10 credits or 1 hour of Standard workspace
+                                    usage.{" "}
                                     <a
                                         className="gp-link"
                                         href="https://www.gitpod.io/docs/configure/billing/usage-based-billing"
@@ -330,7 +328,10 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
                                 <Check className="m-0.5 w-5 h-5" />
                                 <div className="flex flex-col">
                                     <span className="font-bold">Pay-as-you-go after 1,000 credits</span>
-                                    <span>{currency === "EUR" ? "€" : "$"}0.36 for 10 credits or 1 hour of Standard workspace usage.</span>
+                                    <span>
+                                        {currency === "EUR" ? "€" : "$"}0.36 for 10 credits or 1 hour of Standard
+                                        workspace usage.
+                                    </span>
                                 </div>
                             </div>
                             <div className="mt-5 flex flex-col">
@@ -373,7 +374,10 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
                                             <span className="font-bold text-gray-500 dark:text-gray-400">
                                                 Pay-as-you-go after 1,000 credits
                                             </span>
-                                            <span>{currency === "EUR" ? "€" : "$"}0.36 for 10 credits or 1 hour of Standard workspace usage.</span>
+                                            <span>
+                                                {currency === "EUR" ? "€" : "$"}0.36 for 10 credits or 1 hour of
+                                                Standard workspace usage.
+                                            </span>
                                         </div>
                                     </div>
                                 </>
@@ -386,7 +390,8 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
                                         <Check className="m-0.5 w-5 h-5 text-orange-500" />
                                         <div className="flex flex-col">
                                             <span>
-                                                {currency === "EUR" ? "€" : "$"}0.36 for 10 credits or 1 hour of Standard workspace usage.{" "}
+                                                {currency === "EUR" ? "€" : "$"}0.36 for 10 credits or 1 hour of
+                                                Standard workspace usage.{" "}
                                                 <a
                                                     className="gp-link"
                                                     href="https://www.gitpod.io/docs/configure/billing/usage-based-billing"
diff --git a/components/dashboard/src/index.tsx b/components/dashboard/src/index.tsx
index ad71c7e95def8f..f002e8f8d606a5 100644
--- a/components/dashboard/src/index.tsx
+++ b/components/dashboard/src/index.tsx
@@ -19,10 +19,12 @@ import { StartWorkspaceModalContextProvider } from "./workspaces/start-workspace
 import { BrowserRouter } from "react-router-dom";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
+import utc from "dayjs/plugin/utc";
 
 import "./index.css";
 
 dayjs.extend(relativeTime);
+dayjs.extend(utc);
 
 ReactDOM.render(
     <React.StrictMode>