diff --git a/src/pages/Dashboard/DashboardPage.tsx b/src/pages/Dashboard/DashboardPage.tsx
index 0c6fecac..eb4f0618 100644
--- a/src/pages/Dashboard/DashboardPage.tsx
+++ b/src/pages/Dashboard/DashboardPage.tsx
@@ -1,68 +1,74 @@
 import { styled } from "@mui/material/styles";
 import Text, { typographyClasses } from "@mui/material/Typography";
+import { WidgetContainer, widgetClassNames } from "@/components/Widgets";
 import { DashboardDataContextProvider } from "./DashboardDataContext";
-import { DashboardWidgetContainer } from "./DashboardWidgetContainer";
 import { InvoiceAmountTotalsWidget } from "./InvoiceAmountTotalsWidget";
-import { WorkOrdersPerMonthChart, InvoicesPerMonthChart } from "./ItemsPerMonthCharts";
-import { WorkOrdersByStatusCounter, InvoicesByStatusCounter } from "./StatusCountWidgets";
+import { InvoicesByStatusCounter } from "./InvoicesByStatusCounter";
+import { InvoicesPerMonthChart } from "./InvoicesPerMonthChart";
 import { WorkOrderUpcomingEventsWidget } from "./WorkOrderUpcomingEventsWidget";
+import { WorkOrdersByStatusCounter } from "./WorkOrdersByStatusCounter";
+import { WorkOrdersPerMonthChart } from "./WorkOrdersPerMonthChart";
 import { dashboardPageClassNames } from "./classNames";
 
-// IDEA Idea for new widget: count number of overdue work orders, and/or how many are due/scheduled in x days
-// IDEA Idea for new widget/page: CALENDAR VIEW, for due/scheduled dates
-// IDEA Idea for new widget/page: Colored layout of WOs, highlighted by priority
-
-export const DashboardPage = () => {
-  return (
-    <DashboardDataContextProvider>
-      <StyledDiv className={dashboardPageClassNames.root}>
-        {/* TOP ROW VIEW HEADER */}
-
-        <Text variant="h1">Dashboard</Text>
-
-        {/* WIDGETS AREA: flex row of WorkOrder-widgets then Invoice-widgets */}
+/**
+ * **DashboardPage** - renders when path is "/home" and user is both authenticated and authorized.
+ *
+ * // IDEA Idea for new widget: count number of overdue work orders, and/or how many are due/scheduled in x days.
+ * // IDEA Idea for new widget/page: CALENDAR VIEW, for due/scheduled dates of WOs and INVs.
+ * // IDEA Idea for new widget/page: Colored layout of WOs, highlighted by priority.
+ */
+export const DashboardPage = () => (
+  <DashboardDataContextProvider>
+    <StyledDiv className={dashboardPageClassNames.root}>
+      {/* TOP ROW VIEW HEADER */}
+
+      <Text variant="h1">Dashboard</Text>
+
+      {/* WIDGETS AREA: flex row of WorkOrder-widgets then Invoice-widgets */}
+
+      <div className={dashboardPageClassNames.widgetsArea}>
+        {/* Work Order Widgets */}
+
+        <div className={dashboardPageClassNames.widgetsGroup}>
+          <div className={dashboardPageClassNames.widgetsSubGroup}>
+            <WidgetContainer size="small">
+              <WorkOrdersByStatusCounter />
+            </WidgetContainer>
+            <WidgetContainer size="small">
+              <WorkOrderUpcomingEventsWidget />
+            </WidgetContainer>
+          </div>
 
-        <div className={dashboardPageClassNames.widgetsArea}>
-          {/* Work Order Widgets */}
+          <WidgetContainer size="large">
+            <WorkOrdersPerMonthChart />
+          </WidgetContainer>
+        </div>
 
-          <div className={dashboardPageClassNames.widgetsGroup}>
-            <div className={dashboardPageClassNames.widgetsSubGroup}>
-              <DashboardWidgetContainer size="small">
-                <WorkOrdersByStatusCounter />
-              </DashboardWidgetContainer>
-              <DashboardWidgetContainer size="small">
-                <WorkOrderUpcomingEventsWidget />
-              </DashboardWidgetContainer>
-            </div>
+        {/* Invoice Widgets */}
 
-            <DashboardWidgetContainer size="large">
-              <WorkOrdersPerMonthChart />
-            </DashboardWidgetContainer>
+        <div className={dashboardPageClassNames.widgetsGroup}>
+          <div className={dashboardPageClassNames.widgetsSubGroup}>
+            <WidgetContainer size="small">
+              <InvoicesByStatusCounter />
+            </WidgetContainer>
+            <WidgetContainer size="small">
+              <InvoiceAmountTotalsWidget />
+            </WidgetContainer>
           </div>
 
-          {/* Invoice Widgets */}
-
-          <div className={dashboardPageClassNames.widgetsGroup}>
-            <div className={dashboardPageClassNames.widgetsSubGroup}>
-              <DashboardWidgetContainer size="small">
-                <InvoicesByStatusCounter />
-              </DashboardWidgetContainer>
-              <DashboardWidgetContainer size="small">
-                <InvoiceAmountTotalsWidget />
-              </DashboardWidgetContainer>
-            </div>
-
-            <DashboardWidgetContainer size="large">
-              <InvoicesPerMonthChart />
-            </DashboardWidgetContainer>
-          </div>
+          <WidgetContainer size="large">
+            <InvoicesPerMonthChart />
+          </WidgetContainer>
         </div>
-      </StyledDiv>
-    </DashboardDataContextProvider>
-  );
-};
+      </div>
+    </StyledDiv>
+  </DashboardDataContextProvider>
+);
+
+// Exported as "Component" for react-router-dom lazy loading
+export const Component = DashboardPage;
 
-const StyledDiv = styled("div")(({ theme }) => {
+const StyledDiv = styled("div")(({ theme: { breakpoints } }) => {
   const viewPadding = "0.75rem";
 
   const headerHeight = "2rem";
@@ -70,6 +76,7 @@ const StyledDiv = styled("div")(({ theme }) => {
 
   return {
     height: "100%",
+    minHeight: "100%",
     padding: viewPadding,
     overflowY: "auto",
 
@@ -82,10 +89,10 @@ const StyledDiv = styled("div")(({ theme }) => {
 
     /* The widgets' layout is defined by three levels of nested containers:
 
-    1. widgets-area       col < 1200px < row   Contains two widget groups, 1 for WOs, 1 for INVs.
-    2. widgets-group      col                  Contains 1 large widget and 2 small ones.
-    3. widgets-subgroup   col < 600px < row    Container for 2 small widgets' layout.
-  */
+      1. widgets-area       col < 1200px < row   Contains two widget groups, 1 for WOs, 1 for INVs.
+      2. widgets-group      col                  Contains 1 large widget and 2 small ones.
+      3. widgets-subgroup   col < 600px < row    Container for 2 small widgets' layout.
+    */
 
     [`& > .${dashboardPageClassNames.widgetsArea}`]: {
       minHeight: `calc( 100% - (${viewPadding} * 2 + ${headerHeight}))`,
@@ -93,7 +100,7 @@ const StyledDiv = styled("div")(({ theme }) => {
       display: "flex",
       flexDirection: "column",
 
-      [theme.breakpoints.up("xl")]: {
+      [breakpoints.up("xl")]: {
         height: `calc( 100% - (${viewPadding} * 2 + ${headerHeight}))`,
         flexDirection: "row",
       },
@@ -105,14 +112,14 @@ const StyledDiv = styled("div")(({ theme }) => {
         flexDirection: "column",
         justifyContent: "space-between",
 
-        [theme.breakpoints.up("xl")]: {
+        [breakpoints.up("xl")]: {
           height: "100%",
           width: "50%",
         },
 
         // LARGE widgets:
 
-        [`& > .${dashboardPageClassNames.widgetLarge}`]: {
+        [`& > .${widgetClassNames.sizeLarge}`]: {
           height: "27rem",
         },
 
@@ -122,7 +129,7 @@ const StyledDiv = styled("div")(({ theme }) => {
           display: "flex",
           flexDirection: "column",
 
-          [theme.breakpoints.up(700)]: {
+          [breakpoints.up(700)]: {
             flexDirection: "row",
             flexGrow: 1,
             alignItems: "center",
@@ -130,10 +137,10 @@ const StyledDiv = styled("div")(({ theme }) => {
 
           // SMALL widgets:
 
-          [`& > .${dashboardPageClassNames.widgetSmall}`]: {
+          [`& > .${widgetClassNames.sizeSmall}`]: {
             height: "20rem",
 
-            [theme.breakpoints.up(700)]: {
+            [breakpoints.up(700)]: {
               width: "calc( 50% - 1.5rem )",
             },
           },
diff --git a/src/pages/Dashboard/classNames.ts b/src/pages/Dashboard/classNames.ts
index b1a1f19e..e09e4b74 100644
--- a/src/pages/Dashboard/classNames.ts
+++ b/src/pages/Dashboard/classNames.ts
@@ -1,14 +1,9 @@
+/**
+ * Class names for `Dashboard` page components (src/pages/Dashboard/).
+ */
 export const dashboardPageClassNames = {
-  root: "dashboard-page-root",
-  widgetsArea: "dashboard-page-widgets-area",
-  widgetsGroup: "dashboard-page-widgets-group",
-  widgetsSubGroup: "dashboard-page-widgets-sub-group",
-  widgetLarge: "dashboard-page-widget-size-large",
-  widgetSmall: "dashboard-page-widget-size-small",
-  // status widget classNames
-  statusWidgetRow: "dashboard-status-widget-row",
-  statusWidgetHeaderRow: "dashboard-status-widget-header-row",
-  statusWidgetLeftCol: "dashboard-status-widget-left-col",
-  statusWidgetMiddleCol: "dashboard-status-widget-middle-col",
-  statusWidgetRightCol: "dashboard-status-widget-right-col",
-};
+  root: "dashboard-page__root",
+  widgetsArea: "dashboard-page__widgets-area",
+  widgetsGroup: "dashboard-page__widgets-group",
+  widgetsSubGroup: "dashboard-page__widgets-sub-group",
+} as const;