diff --git a/packages/bedrock-components/package.json b/packages/bedrock-components/package.json
index 334d597e0c..6f6dd75899 100644
--- a/packages/bedrock-components/package.json
+++ b/packages/bedrock-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/bedrock-components",
   "title": "Bedrock Components",
-  "version": "1.5.1",
+  "version": "1.5.2-0",
   "description": "Component library that adds advanced logic to your widgets and pages. Built and maintained by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Bedrock.svg",
   "main": "dist/index.cjs.js",
diff --git a/packages/bedrock-components/stencil.config.ts b/packages/bedrock-components/stencil.config.ts
index c7b42e6a49..39f3bb8888 100644
--- a/packages/bedrock-components/stencil.config.ts
+++ b/packages/bedrock-components/stencil.config.ts
@@ -1,43 +1,44 @@
-import { Config } from '@stencil/core';
-import alias from '@rollup/plugin-alias';
-import { grapesJsOutput } from '@saasquatch/stencil-grapes-plugin';
-import { OutputTarget } from '@stencil/core/internal';
-import { string } from 'rollup-plugin-string';
-import path from 'path';
-import plugin from '@raisins/stencil-docs-target';
+import { Config } from "@stencil/core";
+import alias from "@rollup/plugin-alias";
+import { grapesJsOutput } from "@saasquatch/stencil-grapes-plugin";
+import { OutputTarget } from "@stencil/core/internal";
+import { string } from "rollup-plugin-string";
+import path from "path";
+import plugin from "@raisins/stencil-docs-target";
 
 const useGrapesjs: OutputTarget = grapesJsOutput({
-  outDir: 'grapesjs',
+  outDir: "grapesjs",
 });
 
 export const config: Config = {
-  namespace: 'bedrock-components',
+  namespace: "bedrock-components",
   buildEs5: true,
-  globalScript: 'src/global/global.ts',
+  globalScript: "src/global/global.ts",
+  hydratedFlag: null,
   outputTargets: [
     {
-      type: 'dist',
+      type: "dist",
     },
     {
-      type: 'docs-readme',
+      type: "docs-readme",
     },
     {
-      type: 'www',
+      type: "www",
       serviceWorker: null, // disable service workers
     },
     useGrapesjs,
     plugin({
-      outDir: 'docs',
+      outDir: "docs",
     }),
   ],
-  plugins: [string({ include: '**/*.feature' })],
+  plugins: [string({ include: "**/*.feature" })],
   rollupPlugins: {
     before: [
       alias({
         entries: [
           {
-            find: '@saasquatch/universal-hooks',
-            replacement: path.resolve(__dirname, 'node_modules', '@saasquatch/stencil-hooks'),
+            find: "@saasquatch/universal-hooks",
+            replacement: path.resolve(__dirname, "node_modules", "@saasquatch/stencil-hooks"),
           },
         ],
       }),
diff --git a/packages/mint-components/package.json b/packages/mint-components/package.json
index f1436ade44..f2d1f994c4 100644
--- a/packages/mint-components/package.json
+++ b/packages/mint-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "2.1.0",
+  "version": "2.1.1-1",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",
@@ -36,7 +36,7 @@
     "postinstall": "patch-package"
   },
   "devDependencies": {
-    "@formatjs/intl": "1.8.4",
+    "@formatjs/intl": "^3.1.8",
     "@formatjs/intl-pluralrules": "^1.5.8",
     "@formatjs/intl-relativetimeformat": "4.5.15",
     "@formatjs/intl-utils": "^2.2.5",
@@ -107,4 +107,4 @@
   },
   "homepage": "https://github.com/saasquatch/program-tools",
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/packages/mint-components/src/components.d.ts b/packages/mint-components/src/components.d.ts
index 75da42fab4..cb52dfa07b 100644
--- a/packages/mint-components/src/components.d.ts
+++ b/packages/mint-components/src/components.d.ts
@@ -34,7 +34,7 @@ import { NavigationMenuViewProps } from "./components/sqm-navigation-menu/sqm-na
 import { NavigationSidebarViewProps } from "./components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
 import { NavigationSidebarItemViewProps } from "./components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
 import { UsePagination } from "./components/sqm-pagination/usePagination";
-import { PasswordFieldViewDemoProps } from "./components/sqm-password-field/sqm-password-field";
+import { PasswordFieldViewDemoProps } from "./components/sqm-password-field/usePasswordField";
 import { PayoutButtonScrollViewProps } from "./components/sqm-payout-button-scroll/sqm-payout-button-scroll-view";
 import { PayoutStatusAlertViewProps } from "./components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view";
 import { ChangeMarketingViewProps } from "./components/sqm-portal-change-marketing/sqm-portal-change-marketing-view";
@@ -985,6 +985,11 @@ export namespace Components {
           * @uiName Icon
          */
         "icon"?: string;
+        /**
+          * Loading state for the alert.
+          * @uiName Loading
+         */
+        "loading": boolean;
         /**
           * Render the alert with transparent styles
          */
@@ -4957,6 +4962,16 @@ export namespace Components {
          */
         "tooltiptext": string;
     }
+    interface SqmSkeleton {
+        /**
+          * @uiName Height (in pixels or %)
+         */
+        "height"?: string;
+        /**
+          * @uiName Width (in pixels or %)
+         */
+        "width"?: string;
+    }
     interface SqmStatContainer {
         /**
           * Controls the alignment of the flexbox
@@ -7707,6 +7722,12 @@ declare global {
         prototype: HTMLSqmShareLinkElement;
         new (): HTMLSqmShareLinkElement;
     };
+    interface HTMLSqmSkeletonElement extends Components.SqmSkeleton, HTMLStencilElement {
+    }
+    var HTMLSqmSkeletonElement: {
+        prototype: HTMLSqmSkeletonElement;
+        new (): HTMLSqmSkeletonElement;
+    };
     interface HTMLSqmStatContainerElement extends Components.SqmStatContainer, HTMLStencilElement {
     }
     var HTMLSqmStatContainerElement: {
@@ -7925,6 +7946,7 @@ declare global {
         "sqm-share-button": HTMLSqmShareButtonElement;
         "sqm-share-code": HTMLSqmShareCodeElement;
         "sqm-share-link": HTMLSqmShareLinkElement;
+        "sqm-skeleton": HTMLSqmSkeletonElement;
         "sqm-stat-container": HTMLSqmStatContainerElement;
         "sqm-stencilbook": HTMLSqmStencilbookElement;
         "sqm-tab": HTMLSqmTabElement;
@@ -8870,6 +8892,11 @@ declare namespace LocalJSX {
           * @uiName Icon
          */
         "icon"?: string;
+        /**
+          * Loading state for the alert.
+          * @uiName Loading
+         */
+        "loading"?: boolean;
         /**
           * Render the alert with transparent styles
          */
@@ -12813,6 +12840,16 @@ declare namespace LocalJSX {
          */
         "tooltiptext"?: string;
     }
+    interface SqmSkeleton {
+        /**
+          * @uiName Height (in pixels or %)
+         */
+        "height"?: string;
+        /**
+          * @uiName Width (in pixels or %)
+         */
+        "width"?: string;
+    }
     interface SqmStatContainer {
         /**
           * Controls the alignment of the flexbox
@@ -15016,6 +15053,7 @@ declare namespace LocalJSX {
         "sqm-share-button": SqmShareButton;
         "sqm-share-code": SqmShareCode;
         "sqm-share-link": SqmShareLink;
+        "sqm-skeleton": SqmSkeleton;
         "sqm-stat-container": SqmStatContainer;
         "sqm-stencilbook": SqmStencilbook;
         "sqm-tab": SqmTab;
@@ -15149,6 +15187,7 @@ declare module "@stencil/core" {
             "sqm-share-button": LocalJSX.SqmShareButton & JSXBase.HTMLAttributes<HTMLSqmShareButtonElement>;
             "sqm-share-code": LocalJSX.SqmShareCode & JSXBase.HTMLAttributes<HTMLSqmShareCodeElement>;
             "sqm-share-link": LocalJSX.SqmShareLink & JSXBase.HTMLAttributes<HTMLSqmShareLinkElement>;
+            "sqm-skeleton": LocalJSX.SqmSkeleton & JSXBase.HTMLAttributes<HTMLSqmSkeletonElement>;
             "sqm-stat-container": LocalJSX.SqmStatContainer & JSXBase.HTMLAttributes<HTMLSqmStatContainerElement>;
             "sqm-stencilbook": LocalJSX.SqmStencilbook & JSXBase.HTMLAttributes<HTMLSqmStencilbookElement>;
             "sqm-tab": LocalJSX.SqmTab & JSXBase.HTMLAttributes<HTMLSqmTabElement>;
diff --git a/packages/mint-components/src/components/sqm-coupon-code/readme.md b/packages/mint-components/src/components/sqm-coupon-code/readme.md
index 1539432b7d..9c1e88c497 100644
--- a/packages/mint-components/src/components/sqm-coupon-code/readme.md
+++ b/packages/mint-components/src/components/sqm-coupon-code/readme.md
@@ -45,6 +45,7 @@
 ```mermaid
 graph TD;
   sqm-coupon-code --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-coupon-code
   style sqm-coupon-code fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-edit-profile/readme.md b/packages/mint-components/src/components/sqm-edit-profile/readme.md
index 8f3d353967..14597103a4 100644
--- a/packages/mint-components/src/components/sqm-edit-profile/readme.md
+++ b/packages/mint-components/src/components/sqm-edit-profile/readme.md
@@ -37,6 +37,7 @@
 ```mermaid
 graph TD;
   sqm-edit-profile --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-edit-profile
   style sqm-edit-profile fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-edit-profile/sqm-edit-profile-view.tsx b/packages/mint-components/src/components/sqm-edit-profile/sqm-edit-profile-view.tsx
index 0c9682dfc4..5fa944ce00 100644
--- a/packages/mint-components/src/components/sqm-edit-profile/sqm-edit-profile-view.tsx
+++ b/packages/mint-components/src/components/sqm-edit-profile/sqm-edit-profile-view.tsx
@@ -61,7 +61,11 @@ const EditProfileView = (props: EditProfileViewProps) => {
         <form class="FormWrapper" onSubmit={callbacks.onSubmit}>
           <div class="FormSection">
             {states.formState.error && (
-              <sqm-form-message type="error" exportparts="erroralert-icon">
+              <sqm-form-message
+                loading={states.loading}
+                type="error"
+                exportparts="erroralert-icon"
+              >
                 <div part="erroralert-text">{states.formState.error}</div>
               </sqm-form-message>
             )}
diff --git a/packages/mint-components/src/components/sqm-empty/EmptyState.stories.tsx b/packages/mint-components/src/components/sqm-empty/EmptyState.stories.tsx
index b5f1da2ab1..cde9b09944 100644
--- a/packages/mint-components/src/components/sqm-empty/EmptyState.stories.tsx
+++ b/packages/mint-components/src/components/sqm-empty/EmptyState.stories.tsx
@@ -47,7 +47,7 @@ const defaultElements = {
           return (
             <tr>
               <td>
-                <sl-skeleton></sl-skeleton>
+                <sqm-skeleton></sqm-skeleton>
               </td>
             </tr>
           );
diff --git a/packages/mint-components/src/components/sqm-form-message/FormMessage.stories.tsx b/packages/mint-components/src/components/sqm-form-message/FormMessage.stories.tsx
index d88863d889..79d4a41b43 100644
--- a/packages/mint-components/src/components/sqm-form-message/FormMessage.stories.tsx
+++ b/packages/mint-components/src/components/sqm-form-message/FormMessage.stories.tsx
@@ -69,3 +69,12 @@ export const InfoAlertTransparent = () => (
     <p part="alert-description">This is the description</p>
   </sqm-form-message>
 );
+
+export const Loading = () => {
+  return (
+    <sqm-form-message type="success" loading={true}>
+      <p part="alert-title">This is the title</p>
+      <p part="alert-description">This is the description</p>
+    </sqm-form-message>
+  );
+};
diff --git a/packages/mint-components/src/components/sqm-form-message/readme.md b/packages/mint-components/src/components/sqm-form-message/readme.md
index 4f4f94974c..c49c5aa8ec 100644
--- a/packages/mint-components/src/components/sqm-form-message/readme.md
+++ b/packages/mint-components/src/components/sqm-form-message/readme.md
@@ -8,6 +8,7 @@
 | Property      | Attribute     | Description                                                                                                            | Type      | Default     |
 | ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
 | `icon`        | `icon`        | Icon to use in alert. Use icon values from Shoelace (e.g. "star" or "heart") at https://shoelace.style/components/icon | `string`  | `undefined` |
+| `loading`     | `loading`     | Loading state for the alert.                                                                                           | `boolean` | `false`     |
 | `transparent` | `transparent` | Render the alert with transparent styles                                                                               | `boolean` | `false`     |
 | `type`        | `type`        | Options include "success", "info", "warning", and "error"                                                              | `string`  | `undefined` |
 
@@ -45,9 +46,14 @@
  - [sqm-tax-and-cash-dashboard](../tax-and-cash/sqm-tax-and-cash-dashboard)
  - [sqm-user-info-form](../tax-and-cash/sqm-user-info-form)
 
+### Depends on
+
+- [sqm-skeleton](../sqm-skeleton)
+
 ### Graph
 ```mermaid
 graph TD;
+  sqm-form-message --> sqm-skeleton
   sqm-banking-info-form --> sqm-form-message
   sqm-code-verification --> sqm-form-message
   sqm-coupon-code --> sqm-form-message
diff --git a/packages/mint-components/src/components/sqm-form-message/sqm-form-message.tsx b/packages/mint-components/src/components/sqm-form-message/sqm-form-message.tsx
index a985016539..20298c3b10 100644
--- a/packages/mint-components/src/components/sqm-form-message/sqm-form-message.tsx
+++ b/packages/mint-components/src/components/sqm-form-message/sqm-form-message.tsx
@@ -20,6 +20,13 @@ export class FormMessage {
    * @uiName Alert type
    */
   @Prop() type: string;
+
+  /**
+   * Loading state for the alert.
+   *
+   * @uiName Loading
+   */
+  @Prop() loading: boolean = false;
   /**
    * Icon to use in alert. Use icon values from Shoelace (e.g. "star" or "heart") at https://shoelace.style/components/icon
    *
@@ -39,6 +46,10 @@ export class FormMessage {
   disconnectedCallback() {}
 
   render() {
+    if (this.loading) {
+      return <sqm-skeleton height="90px" width="100%"></sqm-skeleton>;
+    }
+
     if (this.type === "error") {
       return (
         <sl-alert
diff --git a/packages/mint-components/src/components/sqm-instant-access-registration/readme.md b/packages/mint-components/src/components/sqm-instant-access-registration/readme.md
index d3fc12fc8a..849754029f 100644
--- a/packages/mint-components/src/components/sqm-instant-access-registration/readme.md
+++ b/packages/mint-components/src/components/sqm-instant-access-registration/readme.md
@@ -37,6 +37,7 @@
 ```mermaid
 graph TD;
   sqm-instant-access-registration --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   style sqm-instant-access-registration fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/mint-components/src/components/sqm-invoice-table/InvoiceTable.stories.tsx b/packages/mint-components/src/components/sqm-invoice-table/InvoiceTable.stories.tsx
index 08e54c71cf..000d73a7ef 100644
--- a/packages/mint-components/src/components/sqm-invoice-table/InvoiceTable.stories.tsx
+++ b/packages/mint-components/src/components/sqm-invoice-table/InvoiceTable.stories.tsx
@@ -18,27 +18,27 @@ const loadingElement = (
   <div slot="loading" style={{ display: "contents" }}>
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
   </div>
diff --git a/packages/mint-components/src/components/sqm-invoice-table/readme.md b/packages/mint-components/src/components/sqm-invoice-table/readme.md
index 06117e376d..7cd1bec240 100644
--- a/packages/mint-components/src/components/sqm-invoice-table/readme.md
+++ b/packages/mint-components/src/components/sqm-invoice-table/readme.md
@@ -36,6 +36,7 @@
 - [sqm-empty](../sqm-empty)
 - [sqm-table-row](../sqm-table-row)
 - [sqm-table-cell](../sqm-table-cell)
+- [sqm-skeleton](../sqm-skeleton)
 
 ### Graph
 ```mermaid
@@ -43,6 +44,7 @@ graph TD;
   sqm-invoice-table --> sqm-empty
   sqm-invoice-table --> sqm-table-row
   sqm-invoice-table --> sqm-table-cell
+  sqm-invoice-table --> sqm-skeleton
   sqm-empty --> sqm-portal-container
   sqm-empty --> sqm-titled-section
   sqm-empty --> sqm-text
diff --git a/packages/mint-components/src/components/sqm-invoice-table/sqm-invoice-table.tsx b/packages/mint-components/src/components/sqm-invoice-table/sqm-invoice-table.tsx
index 4ba9c1e1dc..e3e3251724 100644
--- a/packages/mint-components/src/components/sqm-invoice-table/sqm-invoice-table.tsx
+++ b/packages/mint-components/src/components/sqm-invoice-table/sqm-invoice-table.tsx
@@ -150,7 +150,7 @@ function LoadingRow() {
   return (
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
   );
diff --git a/packages/mint-components/src/components/sqm-lead-form/sqm-lead-form-view.tsx b/packages/mint-components/src/components/sqm-lead-form/sqm-lead-form-view.tsx
index 8c55b69851..28b9fddf39 100644
--- a/packages/mint-components/src/components/sqm-lead-form/sqm-lead-form-view.tsx
+++ b/packages/mint-components/src/components/sqm-lead-form/sqm-lead-form-view.tsx
@@ -137,7 +137,7 @@ export function LeadFormView(props: LeadFormViewProps) {
             {styleString}
           </style>
           <TextSpanView type="h3">{content.pageLabel}</TextSpanView>
-          <sqm-form-message exportparts="success-icon">
+          <sqm-form-message loading={states.loading} exportparts="success-icon">
             <b>{content.submitSuccessHeader}</b>
             <br />
             <div part="successalert-text">
@@ -174,29 +174,27 @@ export function LeadFormView(props: LeadFormViewProps) {
           {states.error && (
             <sl-alert
               exportparts="base: alert-base, icon:alert-icon"
-              type="danger"
-              class={sheet.classes.ErrorAlertContainer}
-              open
+              type="error"
             >
-              <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
-              <b>{content.submitErrorHeader}</b>
-              <br />
-              {intl.formatMessage(
-                {
-                  id: "submitErrorDescription",
-                  defaultMessage: content.submitErrorDescription,
-                },
-                {
-                  supportLink: (
-                    <a
-                      target="_blank"
-                      href={`mailto:advocate-support@impact.com`}
-                    >
-                      {content.supportLinkText}
-                    </a>
-                  ),
-                }
-              )}
+              <p part="alert-title">{content.submitErrorHeader}</p>
+              <p part="alert-text">
+                {intl.formatMessage(
+                  {
+                    id: "submitErrorDescription",
+                    defaultMessage: content.submitErrorDescription,
+                  },
+                  {
+                    supportLink: (
+                      <a
+                        target="_blank"
+                        href={`mailto:advocate-support@impact.com`}
+                      >
+                        {content.supportLinkText}
+                      </a>
+                    ),
+                  }
+                )}
+              </p>
             </sl-alert>
           )}
           <div class={sheet.classes.NameFieldWrapper}>
diff --git a/packages/mint-components/src/components/sqm-leaderboard-rank/useLeaderboardRank.tsx b/packages/mint-components/src/components/sqm-leaderboard-rank/useLeaderboardRank.tsx
index b5982cb898..c7f4ab9af7 100644
--- a/packages/mint-components/src/components/sqm-leaderboard-rank/useLeaderboardRank.tsx
+++ b/packages/mint-components/src/components/sqm-leaderboard-rank/useLeaderboardRank.tsx
@@ -68,7 +68,7 @@ export function useLeaderboardRank(
 
   return {
     data: {
-      rank: fullRankText,
+      rank: fullRankText as string,
     },
   };
 }
diff --git a/packages/mint-components/src/components/sqm-leaderboard/readme.md b/packages/mint-components/src/components/sqm-leaderboard/readme.md
index d0d038b1e9..6661bb94be 100644
--- a/packages/mint-components/src/components/sqm-leaderboard/readme.md
+++ b/packages/mint-components/src/components/sqm-leaderboard/readme.md
@@ -42,11 +42,13 @@
 ### Depends on
 
 - [sqm-empty](../sqm-empty)
+- [sqm-skeleton](../sqm-skeleton)
 
 ### Graph
 ```mermaid
 graph TD;
   sqm-leaderboard --> sqm-empty
+  sqm-leaderboard --> sqm-skeleton
   sqm-empty --> sqm-portal-container
   sqm-empty --> sqm-titled-section
   sqm-empty --> sqm-text
diff --git a/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx b/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx
index 59605e8cf3..c2ea4eacfa 100644
--- a/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx
+++ b/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx
@@ -142,11 +142,11 @@ export function LeaderboardView(props: LeaderboardViewProps) {
           {vanillaStyle}
         </style>
         <table>
-          {[...Array(10)].map(() => {
+          {[...Array(5)].map(() => {
             return (
               <tr>
                 <td>
-                  <sl-skeleton></sl-skeleton>
+                  <sqm-skeleton></sqm-skeleton>
                 </td>
               </tr>
             );
diff --git a/packages/mint-components/src/components/sqm-navigation-menu/useNavigationMenu.tsx b/packages/mint-components/src/components/sqm-navigation-menu/useNavigationMenu.tsx
index cbd2991706..f8a573df55 100644
--- a/packages/mint-components/src/components/sqm-navigation-menu/useNavigationMenu.tsx
+++ b/packages/mint-components/src/components/sqm-navigation-menu/useNavigationMenu.tsx
@@ -3,9 +3,8 @@ import {
   useTick,
   useUserIdentity,
 } from "@saasquatch/component-boilerplate";
-import { useRef } from "@saasquatch/universal-hooks";
+import { useEffect, useRef } from "@saasquatch/universal-hooks";
 import { SlMenu, SlMenuItem } from "@saasquatch/shoelace";
-import { useEffect } from "haunted";
 import { NavigationMenu } from "./sqm-navigation-menu";
 import { NavigationMenuViewProps } from "./sqm-navigation-menu-view";
 
diff --git a/packages/mint-components/src/components/sqm-password-field/sqm-password-field.tsx b/packages/mint-components/src/components/sqm-password-field/sqm-password-field.tsx
index 68c33277c1..e2a82a1fdd 100644
--- a/packages/mint-components/src/components/sqm-password-field/sqm-password-field.tsx
+++ b/packages/mint-components/src/components/sqm-password-field/sqm-password-field.tsx
@@ -4,24 +4,15 @@ import { useState } from "@saasquatch/universal-hooks";
 import { Component, h, Prop, State, VNode } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { getProps } from "../../utils/utils";
-import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
 import { validateNewPassword } from "./passwordValidation";
 import {
   PortalPasswordFieldViewProps,
   PortalResetPasswordView,
 } from "./sqm-password-field-view";
-import { usePasswordField } from "./usePasswordField";
-
-export interface PasswordFieldViewDemoProps {
-  initValue: string;
-  states: {
-    enableValidation: boolean;
-    registrationFormState: RegistrationFormState;
-    content: {
-      fieldLabel: string;
-    };
-  };
-}
+import {
+  PasswordFieldViewDemoProps,
+  usePasswordField,
+} from "./usePasswordField";
 
 /**
  * @uiName Form Password Field
diff --git a/packages/mint-components/src/components/sqm-password-field/usePasswordField.tsx b/packages/mint-components/src/components/sqm-password-field/usePasswordField.tsx
index c8b24b8a74..1041d15206 100644
--- a/packages/mint-components/src/components/sqm-password-field/usePasswordField.tsx
+++ b/packages/mint-components/src/components/sqm-password-field/usePasswordField.tsx
@@ -9,6 +9,17 @@ import {
   REGISTRATION_FORM_STATE_CONTEXT,
 } from "../sqm-portal-registration-form/useRegistrationFormState";
 
+export interface PasswordFieldViewDemoProps {
+  initValue: string;
+  states: {
+    enableValidation: boolean;
+    registrationFormState: RegistrationFormState;
+    content: {
+      fieldLabel: string;
+    };
+  };
+}
+
 export function usePasswordField(
   props: PortalPasswordField
 ): PortalPasswordFieldViewProps {
diff --git a/packages/mint-components/src/components/sqm-portal-change-marketing/readme.md b/packages/mint-components/src/components/sqm-portal-change-marketing/readme.md
index 18667924e9..70d0af02c0 100644
--- a/packages/mint-components/src/components/sqm-portal-change-marketing/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-change-marketing/readme.md
@@ -31,6 +31,7 @@
 ```mermaid
 graph TD;
   sqm-portal-change-marketing --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-portal-change-marketing
   style sqm-portal-change-marketing fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-portal-change-password/readme.md b/packages/mint-components/src/components/sqm-portal-change-password/readme.md
index b19c246fb2..6062e5c30c 100644
--- a/packages/mint-components/src/components/sqm-portal-change-password/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-change-password/readme.md
@@ -44,6 +44,7 @@
 graph TD;
   sqm-portal-change-password --> sqm-form-message
   sqm-portal-change-password --> sqm-password-field
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-portal-change-password
   style sqm-portal-change-password fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-portal-container/sqm-portal-container-view.tsx b/packages/mint-components/src/components/sqm-portal-container/sqm-portal-container-view.tsx
index cd67591dcf..73c9bce8b7 100644
--- a/packages/mint-components/src/components/sqm-portal-container/sqm-portal-container-view.tsx
+++ b/packages/mint-components/src/components/sqm-portal-container/sqm-portal-container-view.tsx
@@ -1,4 +1,4 @@
-import { h, VNode } from "@stencil/core";
+import { h, Host, VNode } from "@stencil/core";
 import { Spacing } from "../../global/mixins";
 import { createStyleSheet } from "../../styling/JSS";
 
@@ -55,12 +55,14 @@ export function PortalContainerView(
   const styleString = sheet.toString();
 
   return (
-    <div class={sheet.classes.Container} part={"sqm-base"}>
-      <style type="text/css">
-        {vanillaStyle}
-        {styleString}
-      </style>
-      {children}
-    </div>
+    <Host>
+      <div class={sheet.classes.Container} part={"sqm-base"}>
+        <style type="text/css">
+          {vanillaStyle}
+          {styleString}
+        </style>
+        {children}
+      </div>
+    </Host>
   );
 }
diff --git a/packages/mint-components/src/components/sqm-portal-email-verification/PortalEmailVerification.stories.tsx b/packages/mint-components/src/components/sqm-portal-email-verification/PortalEmailVerification.stories.tsx
index a732036c02..ac2ed7888d 100644
--- a/packages/mint-components/src/components/sqm-portal-email-verification/PortalEmailVerification.stories.tsx
+++ b/packages/mint-components/src/components/sqm-portal-email-verification/PortalEmailVerification.stories.tsx
@@ -16,7 +16,7 @@ const defaultCallbacks = {
   submit: async (e) => await e,
 };
 
-const defaultContent = {
+const defaultContent: PortalEmailVerificationViewProps["content"] = {
   email: "email@example.com",
   verifyMessage:
     "A verification email was sent to {email}. Please verify your email to continue to the portal.",
@@ -24,6 +24,7 @@ const defaultContent = {
   resendEmailButtonText: "Re-send Email",
   verificationStatusMessage: "Checking verification status in {countdown}",
   verificationLoadingMessage: "Checking verification status",
+  verificationResentMessage: "Verification email resent to {email}",
 };
 
 const defaultStates = {
diff --git a/packages/mint-components/src/components/sqm-portal-email-verification/readme.md b/packages/mint-components/src/components/sqm-portal-email-verification/readme.md
index 6383c5ff5c..c9d705e380 100644
--- a/packages/mint-components/src/components/sqm-portal-email-verification/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-email-verification/readme.md
@@ -30,6 +30,7 @@
 ```mermaid
 graph TD;
   sqm-portal-email-verification --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/mint-components/src/components/sqm-portal-email-verification/sqm-portal-email-verification-view.tsx b/packages/mint-components/src/components/sqm-portal-email-verification/sqm-portal-email-verification-view.tsx
index 2694878e82..0230c70337 100644
--- a/packages/mint-components/src/components/sqm-portal-email-verification/sqm-portal-email-verification-view.tsx
+++ b/packages/mint-components/src/components/sqm-portal-email-verification/sqm-portal-email-verification-view.tsx
@@ -41,7 +41,7 @@ const style = {
   },
   ButtonLinkLoading: {
     fontSize: "14px",
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     opacity: "0.6",
     display: "inline-block !important",
     textDecoration: "underline",
@@ -114,7 +114,7 @@ export function PortalEmailVerificationView(
           )}
         </TextSpanView>
         {
-          <p style={{ color: "var(--sl-color-gray-500)", fontSize: "14px" }}>
+          <p style={{ color: "var(--sqm-text-subdued)", fontSize: "14px" }}>
             {intl.formatMessage(
               {
                 id: `verificationStatus`,
@@ -132,16 +132,14 @@ export function PortalEmailVerificationView(
             )}
           </p>
         }
-        <a
-          class={
-            states.loading
-              ? sheet.classes.ButtonLinkLoading
-              : sheet.classes.ButtonLink
-          }
+        <sl-button
+          type="primary"
+          exportparts="base: primarybutton-base"
           onClick={callbacks.submit}
+          loading={states.loading}
         >
           {resendEmailButtonText}
-        </a>
+        </sl-button>
       </sl-form>
     </div>
   );
diff --git a/packages/mint-components/src/components/sqm-portal-forgot-password/readme.md b/packages/mint-components/src/components/sqm-portal-forgot-password/readme.md
index 4c39aaba57..06f52dbd61 100644
--- a/packages/mint-components/src/components/sqm-portal-forgot-password/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-forgot-password/readme.md
@@ -37,6 +37,7 @@
 ```mermaid
 graph TD;
   sqm-portal-forgot-password --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-portal-forgot-password
   style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-portal-google-login/readme.md b/packages/mint-components/src/components/sqm-portal-google-login/readme.md
index ec9d7dc5f7..cca4cf9ea1 100644
--- a/packages/mint-components/src/components/sqm-portal-google-login/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-google-login/readme.md
@@ -40,6 +40,7 @@
 graph TD;
   sqm-portal-google-login --> sqm-google-sign-in
   sqm-portal-google-login --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-portal-google-login
   style sqm-portal-google-login fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-portal-google-registration-form/readme.md b/packages/mint-components/src/components/sqm-portal-google-registration-form/readme.md
index 99b64114e6..99685212cd 100644
--- a/packages/mint-components/src/components/sqm-portal-google-registration-form/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-google-registration-form/readme.md
@@ -57,6 +57,7 @@ graph TD;
   sqm-portal-google-registration-form --> sqm-google-sign-in
   sqm-portal-google-registration-form --> sqm-form-message
   sqm-portal-google-registration-form --> sqm-password-field
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-portal-google-registration-form
   style sqm-portal-google-registration-form fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-portal-login/readme.md b/packages/mint-components/src/components/sqm-portal-login/readme.md
index 3b2904daa6..5bf7485133 100644
--- a/packages/mint-components/src/components/sqm-portal-login/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-login/readme.md
@@ -36,6 +36,7 @@
 ```mermaid
 graph TD;
   sqm-portal-login --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-portal-login
   style sqm-portal-login fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-portal-profile/readme.md b/packages/mint-components/src/components/sqm-portal-profile/readme.md
index 7ffb69bedb..62db804ad1 100644
--- a/packages/mint-components/src/components/sqm-portal-profile/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-profile/readme.md
@@ -34,6 +34,7 @@
 ```mermaid
 graph TD;
   sqm-portal-profile --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/mint-components/src/components/sqm-portal-protected-route/usePortalProtectedRoute.tsx b/packages/mint-components/src/components/sqm-portal-protected-route/usePortalProtectedRoute.tsx
index d3cf0f4e7d..9cc6939fa1 100644
--- a/packages/mint-components/src/components/sqm-portal-protected-route/usePortalProtectedRoute.tsx
+++ b/packages/mint-components/src/components/sqm-portal-protected-route/usePortalProtectedRoute.tsx
@@ -3,7 +3,7 @@ import {
   navigation,
   useCurrentPage,
 } from "@saasquatch/component-boilerplate";
-import { useEffect } from "haunted";
+import { useEffect } from "@saasquatch/universal-hooks";
 
 interface PortalProtectedRouteProps {
   redirectTo: string;
@@ -40,6 +40,6 @@ export function usePortalProtectedRoute({
       });
     }
   }, []);
-  
+
   return !!userIdent;
 }
diff --git a/packages/mint-components/src/components/sqm-portal-register/readme.md b/packages/mint-components/src/components/sqm-portal-register/readme.md
index cfa1aa2680..49f364a41e 100644
--- a/packages/mint-components/src/components/sqm-portal-register/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-register/readme.md
@@ -50,6 +50,7 @@
 graph TD;
   sqm-portal-register --> sqm-form-message
   sqm-portal-register --> sqm-password-field
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-portal-register
   style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-portal-registration-form/readme.md b/packages/mint-components/src/components/sqm-portal-registration-form/readme.md
index 5fabd259be..19ca5ffed1 100644
--- a/packages/mint-components/src/components/sqm-portal-registration-form/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-registration-form/readme.md
@@ -46,6 +46,7 @@
 graph TD;
   sqm-portal-registration-form --> sqm-form-message
   sqm-portal-registration-form --> sqm-password-field
+  sqm-form-message --> sqm-skeleton
   style sqm-portal-registration-form fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/mint-components/src/components/sqm-portal-reset-password/readme.md b/packages/mint-components/src/components/sqm-portal-reset-password/readme.md
index 87754a376f..d8c33c5b72 100644
--- a/packages/mint-components/src/components/sqm-portal-reset-password/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-reset-password/readme.md
@@ -43,6 +43,7 @@
 graph TD;
   sqm-portal-reset-password --> sqm-form-message
   sqm-portal-reset-password --> sqm-password-field
+  sqm-form-message --> sqm-skeleton
   style sqm-portal-reset-password fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/mint-components/src/components/sqm-portal-reset-password/sqm-portal-reset-password-view.tsx b/packages/mint-components/src/components/sqm-portal-reset-password/sqm-portal-reset-password-view.tsx
index f206d429d4..f9a2a5d0af 100644
--- a/packages/mint-components/src/components/sqm-portal-reset-password/sqm-portal-reset-password-view.tsx
+++ b/packages/mint-components/src/components/sqm-portal-reset-password/sqm-portal-reset-password-view.tsx
@@ -5,8 +5,8 @@ import {
   AuthWrapper,
 } from "../../global/mixins";
 import { createStyleSheet } from "../../styling/JSS";
-import { PasswordFieldViewDemoProps } from "../sqm-password-field/sqm-password-field";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
+import { PasswordFieldViewDemoProps } from "../sqm-password-field/usePasswordField";
 
 export interface PortalResetPasswordViewProps {
   states: {
diff --git a/packages/mint-components/src/components/sqm-portal-verify-email/readme.md b/packages/mint-components/src/components/sqm-portal-verify-email/readme.md
index de05c6f176..ef0358ea14 100644
--- a/packages/mint-components/src/components/sqm-portal-verify-email/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-verify-email/readme.md
@@ -29,6 +29,7 @@
 ```mermaid
 graph TD;
   sqm-portal-verify-email --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/mint-components/src/components/sqm-portal-verify-email/usePortalVerifyEmail.tsx b/packages/mint-components/src/components/sqm-portal-verify-email/usePortalVerifyEmail.tsx
index 34be6c1243..e041d3fba2 100644
--- a/packages/mint-components/src/components/sqm-portal-verify-email/usePortalVerifyEmail.tsx
+++ b/packages/mint-components/src/components/sqm-portal-verify-email/usePortalVerifyEmail.tsx
@@ -4,8 +4,8 @@ import {
   useUserIdentity,
   useVerifyEmailMutation,
 } from "@saasquatch/component-boilerplate";
-import { useEffect, useState } from "@saasquatch/stencil-hooks";
 import { sanitizeUrlPath } from "../../utils/utils";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
 
 let globalPromise: null | Promise<any | Error> = null;
 
diff --git a/packages/mint-components/src/components/sqm-qr-code/readme.md b/packages/mint-components/src/components/sqm-qr-code/readme.md
index d9727eda37..0214bf9d64 100644
--- a/packages/mint-components/src/components/sqm-qr-code/readme.md
+++ b/packages/mint-components/src/components/sqm-qr-code/readme.md
@@ -24,12 +24,15 @@
 
 ### Depends on
 
+- [sqm-skeleton](../sqm-skeleton)
 - [sqm-form-message](../sqm-form-message)
 
 ### Graph
 ```mermaid
 graph TD;
+  sqm-qr-code --> sqm-skeleton
   sqm-qr-code --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   style sqm-qr-code fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code-view.tsx b/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code-view.tsx
index 40ec6c359e..29f889b3a4 100644
--- a/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code-view.tsx
+++ b/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code-view.tsx
@@ -107,17 +107,7 @@ export function QrCodeView({
         />
       );
     } else if (loading) {
-      return (
-        <sl-skeleton
-          className={sheet.classes.LoadingSkeleton}
-          effect="sheen"
-          style={{
-            width: "100px",
-            height: "100px",
-            borderRadius: "0px !important",
-          }}
-        ></sl-skeleton>
-      );
+      return <sqm-skeleton height="100px" width="100px"></sqm-skeleton>;
     } else if (qrLink) {
       return (
         <svg width="100" height="100">
@@ -145,6 +135,7 @@ export function QrCodeView({
         {codeContent}
         <div class={sheet.classes.ButtonContainer}>
           <sl-button
+            loading={loading}
             size="small"
             exportparts="base: primarybutton-base"
             type="primary"
@@ -153,6 +144,7 @@ export function QrCodeView({
             {downloadCodeText}
           </sl-button>
           <sl-button
+            loading={loading}
             size="small"
             exportparts="base: secondarybutton-base"
             type="text"
diff --git a/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code.tsx b/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code.tsx
index 29407217b4..8a4a36c869 100644
--- a/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code.tsx
+++ b/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code.tsx
@@ -87,6 +87,7 @@ function useDemoQRCode(props: QrCode): QRCodeViewProps {
       hideTitle: props.hideTitle,
       showDialog: () => setDialog(true),
       hideDialog: () => setDialog(false),
+      loading: true,
       titleText: props.titleText,
       viewCodeText: props.viewCodeText,
       downloadCodeText: props.downloadCodeText,
diff --git a/packages/mint-components/src/components/sqm-referral-codes/readme.md b/packages/mint-components/src/components/sqm-referral-codes/readme.md
index 91b60cec83..e059cf3119 100644
--- a/packages/mint-components/src/components/sqm-referral-codes/readme.md
+++ b/packages/mint-components/src/components/sqm-referral-codes/readme.md
@@ -27,11 +27,13 @@
 ### Depends on
 
 - [sqm-empty](../sqm-empty)
+- [sqm-skeleton](../sqm-skeleton)
 
 ### Graph
 ```mermaid
 graph TD;
   sqm-referral-codes --> sqm-empty
+  sqm-referral-codes --> sqm-skeleton
   sqm-empty --> sqm-portal-container
   sqm-empty --> sqm-titled-section
   sqm-empty --> sqm-text
diff --git a/packages/mint-components/src/components/sqm-referral-codes/sqm-referral-codes.tsx b/packages/mint-components/src/components/sqm-referral-codes/sqm-referral-codes.tsx
index d145823002..77dd7d796c 100644
--- a/packages/mint-components/src/components/sqm-referral-codes/sqm-referral-codes.tsx
+++ b/packages/mint-components/src/components/sqm-referral-codes/sqm-referral-codes.tsx
@@ -131,7 +131,7 @@ function LoadingSlot() {
   );
 }
 function LoadingRow() {
-  return <sl-skeleton style={{ width: "100%" }}></sl-skeleton>;
+  return <sqm-skeleton></sqm-skeleton>;
 }
 
 function useDemoReferralCodes(props: ReferralCodes) {
diff --git a/packages/mint-components/src/components/sqm-referral-table/ReferralTable.stories.tsx b/packages/mint-components/src/components/sqm-referral-table/ReferralTable.stories.tsx
index b39ed7a9a4..7acb343e81 100644
--- a/packages/mint-components/src/components/sqm-referral-table/ReferralTable.stories.tsx
+++ b/packages/mint-components/src/components/sqm-referral-table/ReferralTable.stories.tsx
@@ -36,27 +36,27 @@ const loadingElement = (
   <div slot="loading" style={{ display: "contents" }}>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
   </div>
diff --git a/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-user-column.tsx b/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-user-column.tsx
index 5844bd424e..431d9d6c12 100644
--- a/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-user-column.tsx
+++ b/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-user-column.tsx
@@ -8,7 +8,7 @@ import { ReferralTableColumn } from "./ReferralTableColumn";
  * @uiName Referral Table User Column
  * @validParents ["sqm-referral-table"]
  * @exampleGroup Referrals
- * @example Referral Table User Column - <sqm-referral-table-user-column column-title="Customer" anonymous-user="Anonymous User" deleted-user="Deleted User"></sqm-referral-table-user-column>
+ * @example Referral Table User Column - <sqm-referral-table-user-column column-title="Customer" anonymous-user="Your Friend" deleted-user="Deleted User"></sqm-referral-table-user-column>
  */
 @Component({
   tag: "sqm-referral-table-user-column",
@@ -24,7 +24,7 @@ export class ReferralTableUserColumn implements ReferralTableColumn {
    *
    * @uiName Anonymous user text
    */
-  @Prop() anonymousUser: string = "Anonymous User";
+  @Prop() anonymousUser: string = "Your Friend";
   /**
    * Name displayed for deleted users
    *
diff --git a/packages/mint-components/src/components/sqm-referral-table/readme.md b/packages/mint-components/src/components/sqm-referral-table/readme.md
index 8ec5c88d29..326ddf114f 100644
--- a/packages/mint-components/src/components/sqm-referral-table/readme.md
+++ b/packages/mint-components/src/components/sqm-referral-table/readme.md
@@ -32,6 +32,7 @@
 - [sqm-empty](../sqm-empty)
 - [sqm-table-row](../sqm-table-row)
 - [sqm-table-cell](../sqm-table-cell)
+- [sqm-skeleton](../sqm-skeleton)
 
 ### Graph
 ```mermaid
@@ -39,6 +40,7 @@ graph TD;
   sqm-referral-table --> sqm-empty
   sqm-referral-table --> sqm-table-row
   sqm-referral-table --> sqm-table-cell
+  sqm-referral-table --> sqm-skeleton
   sqm-empty --> sqm-portal-container
   sqm-empty --> sqm-titled-section
   sqm-empty --> sqm-text
diff --git a/packages/mint-components/src/components/sqm-referral-table/sqm-referral-table.tsx b/packages/mint-components/src/components/sqm-referral-table/sqm-referral-table.tsx
index a9ae7b79fa..b099645585 100644
--- a/packages/mint-components/src/components/sqm-referral-table/sqm-referral-table.tsx
+++ b/packages/mint-components/src/components/sqm-referral-table/sqm-referral-table.tsx
@@ -23,7 +23,7 @@ import { tryMethod, useReferralTable } from "./useReferralTable";
  * @validChildren ["sqm-referral-table-column","sqm-referral-table-date-column","sqm-referral-table-rewards-column","sqm-referral-table-status-column","sqm-referral-table-user-column","sqm-empty"]
  * @exampleGroup Referrals
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
- * @example Referral Table - <sqm-referral-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" sm-breakpoint="599" md-breakpoint="799" > <sqm-referral-table-user-column column-title="Customer" anonymous-user="Anonymous User" deleted-user="Deleted User" ></sqm-referral-table-user-column> <sqm-referral-table-rewards-column column-title="Rewards" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PROCESSING {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }" fuel-tank-text="Your code is" reward-received-text="Reward received on" expiring-text="Expiring in" pending-for-text="{status} for {date}" denied-help-text="Contact support if you think this is a mistake." ></sqm-referral-table-rewards-column> <sqm-referral-table-date-column column-title="Date converted" date-shown="dateConverted" ></sqm-referral-table-date-column> <sqm-referral-table-status-column column-title="Status" converted-status-text="Converted" in-progress-status-text="In Progress" pending-review-status-text="Pending" denied-status-text="Denied" pending-review-status-sub-text="Awaiting review" denied-status-sub-text="Detected self-referral" ></sqm-referral-table-status-column> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png" empty-state-header="View your referral details" empty-state-text="Refer a friend to view the status of your referrals and rewards earned" slot="empty" ></sqm-empty> </sqm-referral-table>
+ * @example Referral Table - <sqm-referral-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" sm-breakpoint="599" md-breakpoint="799" > <sqm-referral-table-user-column column-title="Customer" anonymous-user="Your Friend" deleted-user="Deleted User" ></sqm-referral-table-user-column> <sqm-referral-table-rewards-column column-title="Rewards" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PROCESSING {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }" fuel-tank-text="Your code is" reward-received-text="Reward received on" expiring-text="Expiring in" pending-for-text="{status} for {date}" denied-help-text="Contact support if you think this is a mistake." ></sqm-referral-table-rewards-column> <sqm-referral-table-date-column column-title="Date converted" date-shown="dateConverted" ></sqm-referral-table-date-column> <sqm-referral-table-status-column column-title="Status" converted-status-text="Converted" in-progress-status-text="In Progress" pending-review-status-text="Pending" denied-status-text="Denied" pending-review-status-sub-text="Awaiting review" denied-status-sub-text="Detected self-referral" ></sqm-referral-table-status-column> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png" empty-state-header="View your referral details" empty-state-text="Refer a friend to view the status of your referrals and rewards earned" slot="empty" ></sqm-empty> </sqm-referral-table>
  */
 @Component({
   tag: "sqm-referral-table",
@@ -137,7 +137,7 @@ function LoadingRow() {
   return (
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
   );
diff --git a/packages/mint-components/src/components/sqm-referred-registration/readme.md b/packages/mint-components/src/components/sqm-referred-registration/readme.md
index 5e895d9521..5ef204c03c 100644
--- a/packages/mint-components/src/components/sqm-referred-registration/readme.md
+++ b/packages/mint-components/src/components/sqm-referred-registration/readme.md
@@ -43,6 +43,7 @@
 ```mermaid
 graph TD;
   sqm-referred-registration --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-referred-registration
   style sqm-referred-registration fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-reward-exchange-list/readme.md b/packages/mint-components/src/components/sqm-reward-exchange-list/readme.md
index c520cd9670..fe0c030c22 100644
--- a/packages/mint-components/src/components/sqm-reward-exchange-list/readme.md
+++ b/packages/mint-components/src/components/sqm-reward-exchange-list/readme.md
@@ -47,11 +47,13 @@
 ### Depends on
 
 - [sqm-empty](../sqm-empty)
+- [sqm-skeleton](../sqm-skeleton)
 
 ### Graph
 ```mermaid
 graph TD;
   sqm-reward-exchange-list --> sqm-empty
+  sqm-reward-exchange-list --> sqm-skeleton
   sqm-empty --> sqm-portal-container
   sqm-empty --> sqm-titled-section
   sqm-empty --> sqm-text
diff --git a/packages/mint-components/src/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.tsx b/packages/mint-components/src/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.tsx
index acf39ae9e6..e59bca5156 100644
--- a/packages/mint-components/src/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.tsx
+++ b/packages/mint-components/src/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.tsx
@@ -877,14 +877,13 @@ export function RewardExchangeView(props: RewardExchangeViewProps) {
               <sl-card class={sheet.classes.Card}>
                 <div class={sheet.classes.CardLayout}>
                   <div>
-                    <sl-skeleton
+                    <sqm-skeleton
                       style={{
-                        width: "100px",
-                        height: "100px",
                         margin: "9px",
-                        "--border-radius": "var(--sqm-border-radius-normal)",
                       }}
-                    ></sl-skeleton>
+                      width="100px"
+                      height="100px"
+                    ></sqm-skeleton>
                   </div>
 
                   <div
@@ -892,15 +891,14 @@ export function RewardExchangeView(props: RewardExchangeViewProps) {
                       margin:
                         "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
                       width: "100%",
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "var(--sl-spacing-small)",
                     }}
                   >
-                    <sl-skeleton
-                      style={{ marginBottom: "var(--sl-spacing-small)" }}
-                    ></sl-skeleton>
-                    <sl-skeleton
-                      style={{ marginBottom: "var(--sl-spacing-small)" }}
-                    ></sl-skeleton>
-                    <sl-skeleton style={{ width: "45%" }}></sl-skeleton>
+                    <sqm-skeleton></sqm-skeleton>
+                    <sqm-skeleton></sqm-skeleton>
+                    <sqm-skeleton width="45%"></sqm-skeleton>
                   </div>
                 </div>
               </sl-card>
diff --git a/packages/mint-components/src/components/sqm-rewards-table/RewardsTable.stories.tsx b/packages/mint-components/src/components/sqm-rewards-table/RewardsTable.stories.tsx
index dea3029f7f..3da05da4b1 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/RewardsTable.stories.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/RewardsTable.stories.tsx
@@ -37,27 +37,27 @@ const loadingElement = (
   <div slot="loading" style={{ display: "contents" }}>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
   </div>
diff --git a/packages/mint-components/src/components/sqm-rewards-table/RewardsTableCell.stories.tsx b/packages/mint-components/src/components/sqm-rewards-table/RewardsTableCell.stories.tsx
index 451d0927f5..a8d3655d1d 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/RewardsTableCell.stories.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/RewardsTableCell.stories.tsx
@@ -433,7 +433,7 @@ export const SourceCellAnonymousUser = () => {
     <sqm-rewards-table-source-cell
       reward={{ ...rewardsData, ...referral(anon) }}
       referralText="Referral to"
-      anonymousUserText="Anonymous User"
+      anonymousUserText="Your Friend"
     ></sqm-rewards-table-source-cell>
   );
 };
diff --git a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.feature b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.feature
index f70413f5da..d0e2b59b76 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.feature
+++ b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.feature
@@ -1,6 +1,6 @@
 @author:derek @owner:derek
 Feature: Reward Table Source Column
-    Shows the source of each reward
+  Shows the source of each reward
 
   @motivating @ui
   Scenario Outline: The title of the source column is configurable
@@ -71,14 +71,14 @@ Feature: Reward Table Source Column
       | last.name  | first.name |
 
   @motivating @ui
-  Scenario Outline: The source column displays referral as "Anonymous User" if the referral user has no names
+  Scenario Outline: The source column displays referral as "Your Friend" if the referral user has no names
     Given a user with a referral reward
     And that reward has <rewardSource>
     And the <referralUser> has no first name
     And the <referralUser> has no last name
     When they view the rewards table
     Then then source displays <sourceText>
-    And under it displays "Anonymous User"
+    And under it displays "Your Friend"
 
     Examples:
       | rewardSource  | referralUser  | sourceText  |
diff --git a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.tsx b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.tsx
index 9b43e98426..cb48ac5166 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.tsx
@@ -8,7 +8,7 @@ import { RewardTableColumn } from "./RewardTableColumn";
  * @uiName Reward Table Source Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Source Column - <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column>
+ * @example Reward Table Source Column - <sqm-rewards-table-source-column column-title="Source" anonymous-user="Your Friend" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column>
  */
 @Component({
   tag: "sqm-rewards-table-source-column",
@@ -25,7 +25,7 @@ export class RewardTableUserColumn implements RewardTableColumn {
    *
    * @uiName Anonymous user text
    */
-  @Prop() anonymousUser: string = "Anonymous User";
+  @Prop() anonymousUser: string = "Your Friend";
   /**
    * Name displayed for deleted users
    *
diff --git a/packages/mint-components/src/components/sqm-rewards-table/readme.md b/packages/mint-components/src/components/sqm-rewards-table/readme.md
index 16f7062f3c..2aca999959 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/readme.md
+++ b/packages/mint-components/src/components/sqm-rewards-table/readme.md
@@ -31,6 +31,7 @@
 - [sqm-empty](../sqm-empty)
 - [sqm-table-row](../sqm-table-row)
 - [sqm-table-cell](../sqm-table-cell)
+- [sqm-skeleton](../sqm-skeleton)
 
 ### Graph
 ```mermaid
@@ -38,6 +39,7 @@ graph TD;
   sqm-rewards-table --> sqm-empty
   sqm-rewards-table --> sqm-table-row
   sqm-rewards-table --> sqm-table-cell
+  sqm-rewards-table --> sqm-skeleton
   sqm-empty --> sqm-portal-container
   sqm-empty --> sqm-titled-section
   sqm-empty --> sqm-text
diff --git a/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx b/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx
index cc436a3f31..2e030923a7 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx
@@ -23,7 +23,7 @@ import { tryMethod, useRewardsTable } from "./useRewardsTable";
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @exampleGroup Rewards
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
- * @example Reward Table - <sqm-rewards-table per-page="4" prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799" ><sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is currently being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward was scheduled for payment based on your settings, barring any account holds." ></sqm-rewards-table-status-column> <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" ></sqm-rewards-table-source-column ><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!" ></sqm-rewards-table-reward-column ><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven" ></sqm-rewards-table-date-column ><sqm-rewards-table-customer-note-column column-title="Note" ></sqm-rewards-table-customer-note-column ><sqm-empty slot="empty" empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png" empty-state-header="View your rewards" empty-state-text="Complete program tasks to view the details of your rewards" ></sqm-empty ></sqm-rewards-table>
+ * @example Reward Table - <sqm-rewards-table per-page="4" prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799" ><sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is currently being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward was scheduled for payment based on your settings, barring any account holds." ></sqm-rewards-table-status-column> <sqm-rewards-table-source-column column-title="Source" anonymous-user="Your Friend" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" ></sqm-rewards-table-source-column ><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!" ></sqm-rewards-table-reward-column ><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven" ></sqm-rewards-table-date-column ><sqm-rewards-table-customer-note-column column-title="Note" ></sqm-rewards-table-customer-note-column ><sqm-empty slot="empty" empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png" empty-state-header="View your rewards" empty-state-text="Complete program tasks to view the details of your rewards" ></sqm-empty ></sqm-rewards-table>
  */
 @Component({
   tag: "sqm-rewards-table",
@@ -123,7 +123,7 @@ function LoadingRow() {
   return (
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
   );
diff --git a/packages/mint-components/src/components/sqm-skeleton/Skeleton.stories.tsx b/packages/mint-components/src/components/sqm-skeleton/Skeleton.stories.tsx
new file mode 100644
index 0000000000..0a50d305a6
--- /dev/null
+++ b/packages/mint-components/src/components/sqm-skeleton/Skeleton.stories.tsx
@@ -0,0 +1,21 @@
+import { h } from "@stencil/core";
+
+export default {
+  title: "Components/Skeleton",
+};
+
+export const Default = () => {
+  return <sqm-skeleton></sqm-skeleton>;
+};
+
+export const CustomWidth = () => {
+  return <sqm-skeleton width="100px"></sqm-skeleton>;
+};
+
+export const CustomHeight = () => {
+  return <sqm-skeleton height="100px"></sqm-skeleton>;
+};
+
+export const CustomWidthAndHeight = () => {
+  return <sqm-skeleton width="150px" height="50px"></sqm-skeleton>;
+};
diff --git a/packages/mint-components/src/components/sqm-skeleton/readme.md b/packages/mint-components/src/components/sqm-skeleton/readme.md
new file mode 100644
index 0000000000..935e7c0455
--- /dev/null
+++ b/packages/mint-components/src/components/sqm-skeleton/readme.md
@@ -0,0 +1,59 @@
+# sqm-skeleton
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type     | Default  |
+| -------- | --------- | ----------- | -------- | -------- |
+| `height` | `height`  |             | `string` | `"100%"` |
+| `width`  | `width`   |             | `string` | `"100%"` |
+
+
+## Dependencies
+
+### Used by
+
+ - [sqm-email-verification](../sqm-widget-verification/sqm-email-verification)
+ - [sqm-form-message](../sqm-form-message)
+ - [sqm-invoice-table](../sqm-invoice-table)
+ - [sqm-leaderboard](../sqm-leaderboard)
+ - [sqm-payout-details-card](../tax-and-cash/sqm-payout-details-card)
+ - [sqm-qr-code](../sqm-qr-code)
+ - [sqm-referral-codes](../sqm-referral-codes)
+ - [sqm-referral-table](../sqm-referral-table)
+ - [sqm-reward-exchange-list](../sqm-reward-exchange-list)
+ - [sqm-rewards-table](../sqm-rewards-table)
+ - [sqm-stencilbook](../sqm-stencilbook)
+ - [sqm-task-card](../sqm-task-card)
+ - [sqm-tax-and-cash](../tax-and-cash/sqm-tax-and-cash)
+ - [sqm-tax-and-cash-dashboard](../tax-and-cash/sqm-tax-and-cash-dashboard)
+ - [sqm-user-info-form](../tax-and-cash/sqm-user-info-form)
+
+### Graph
+```mermaid
+graph TD;
+  sqm-email-verification --> sqm-skeleton
+  sqm-form-message --> sqm-skeleton
+  sqm-invoice-table --> sqm-skeleton
+  sqm-leaderboard --> sqm-skeleton
+  sqm-payout-details-card --> sqm-skeleton
+  sqm-qr-code --> sqm-skeleton
+  sqm-referral-codes --> sqm-skeleton
+  sqm-referral-table --> sqm-skeleton
+  sqm-reward-exchange-list --> sqm-skeleton
+  sqm-rewards-table --> sqm-skeleton
+  sqm-stencilbook --> sqm-skeleton
+  sqm-task-card --> sqm-skeleton
+  sqm-tax-and-cash --> sqm-skeleton
+  sqm-tax-and-cash-dashboard --> sqm-skeleton
+  sqm-user-info-form --> sqm-skeleton
+  style sqm-skeleton fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx b/packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx
new file mode 100644
index 0000000000..21cad72a45
--- /dev/null
+++ b/packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx
@@ -0,0 +1,51 @@
+import { h, Component, State, Prop, Host } from "@stencil/core";
+
+@Component({
+  tag: "sqm-skeleton",
+  shadow: true,
+})
+export class Skeleton {
+  @State()
+  ignored = true;
+
+  /**
+   * @uiName Height (in pixels or %)
+   */
+  @Prop() height?: string = "100%";
+
+  /**
+   * @uiName Width (in pixels or %)
+   */
+  @Prop() width?: string = "100%";
+
+  disconnectedCallback() {}
+
+  vanillaStyle = `
+  sl-skeleton::part(indicator) {
+    --sheen-color: var(--sqm-skeleton-animation-background);
+    --color: var(--sqm-skeleton-background);
+    border-radius: var(--sqm-border-radius-normal);
+  }
+
+  sl-skeleton::part(base) {
+    height:${this.height};
+    width:${this.width};
+  }
+
+  :host{
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+  `;
+  render() {
+    return (
+      <div>
+        <style type="text/css">{this.vanillaStyle}</style>
+        <sl-skeleton></sl-skeleton>
+      </div>
+    );
+  }
+}
diff --git a/packages/mint-components/src/components/sqm-stencilbook/Themes.tsx b/packages/mint-components/src/components/sqm-stencilbook/Themes.tsx
index d8f2b6512c..c5d7279eb7 100644
--- a/packages/mint-components/src/components/sqm-stencilbook/Themes.tsx
+++ b/packages/mint-components/src/components/sqm-stencilbook/Themes.tsx
@@ -26,6 +26,10 @@ export const Netflix: BrandingConfiguration = {
     borderThickness: 1,
   },
   color: {
+    loadingSkeleton: {
+      background: "#272727",
+      animationBackground: "#E50914",
+    },
     textColorShades: {
       mainText: "white",
       subduedText: "#B3B3B3",
@@ -118,6 +122,10 @@ export const Amazon: BrandingConfiguration = {
   },
   color: {
     backgroundColor: "#ffffff",
+    loadingSkeleton: {
+      background: "hsl(240 4.8% 95.9%)",
+      animationBackground: "#FF9900",
+    },
     textColorShades: {
       mainText: "#2f2f2f",
       subduedText: "#565959",
@@ -207,6 +215,10 @@ export const Spotify: BrandingConfiguration = {
     borderThickness: 1,
   },
   color: {
+    loadingSkeleton: {
+      background: "#282928",
+      animationBackground: "#1ed760",
+    },
     textColorShades: {
       mainText: "white",
       subduedText: "white",
diff --git a/packages/mint-components/src/components/sqm-stencilbook/readme.md b/packages/mint-components/src/components/sqm-stencilbook/readme.md
index abd9f334fb..ea883e9018 100644
--- a/packages/mint-components/src/components/sqm-stencilbook/readme.md
+++ b/packages/mint-components/src/components/sqm-stencilbook/readme.md
@@ -16,6 +16,7 @@
 - [sqm-big-stat](../sqm-big-stat)
 - [sqm-stat-container](../sqm-stat-container)
 - [sqm-brand](../sqm-brand)
+- [sqm-skeleton](../sqm-skeleton)
 - [sqm-checkbox-field](../sqm-checkbox-field)
 - [sqm-portal-register](../sqm-portal-register)
 - [sqm-name-fields](../sqm-name-fields)
@@ -116,6 +117,7 @@ graph TD;
   sqm-stencilbook --> sqm-big-stat
   sqm-stencilbook --> sqm-stat-container
   sqm-stencilbook --> sqm-brand
+  sqm-stencilbook --> sqm-skeleton
   sqm-stencilbook --> sqm-checkbox-field
   sqm-stencilbook --> sqm-portal-register
   sqm-stencilbook --> sqm-name-fields
@@ -203,6 +205,7 @@ graph TD;
   sqm-stencilbook --> sqm-lead-input-field
   sqm-stencilbook --> sqm-lead-dropdown-field
   sqm-stencilbook --> sqm-lead-form
+  sqm-form-message --> sqm-skeleton
   sqm-portal-register --> sqm-form-message
   sqm-portal-register --> sqm-password-field
   sqm-coupon-code --> sqm-form-message
@@ -217,10 +220,12 @@ graph TD;
   sqm-invoice-table --> sqm-empty
   sqm-invoice-table --> sqm-table-row
   sqm-invoice-table --> sqm-table-cell
+  sqm-invoice-table --> sqm-skeleton
   sqm-invoice-table-download-column --> sqm-invoice-table-download-cell
   sqm-invoice-table-date-column --> sqm-invoice-table-date-cell
   sqm-invoice-table-data-column --> sqm-invoice-table-data-cell
   sqm-leaderboard --> sqm-empty
+  sqm-leaderboard --> sqm-skeleton
   sqm-payout-button-scroll --> sqm-scroll
   sqm-portal-change-marketing --> sqm-form-message
   sqm-portal-forgot-password --> sqm-form-message
@@ -230,30 +235,39 @@ graph TD;
   sqm-portal-google-login --> sqm-google-sign-in
   sqm-portal-google-login --> sqm-form-message
   sqm-referral-codes --> sqm-empty
+  sqm-referral-codes --> sqm-skeleton
   sqm-referral-table --> sqm-empty
   sqm-referral-table --> sqm-table-row
   sqm-referral-table --> sqm-table-cell
+  sqm-referral-table --> sqm-skeleton
   sqm-referral-table-user-column --> sqm-referral-table-user-cell
   sqm-referral-table-status-column --> sqm-referral-table-status-cell
   sqm-referral-table-date-column --> sqm-referral-table-date-cell
   sqm-referral-table-rewards-column --> sqm-referral-table-rewards-cell
   sqm-reward-exchange-list --> sqm-empty
+  sqm-reward-exchange-list --> sqm-skeleton
   sqm-rewards-table --> sqm-empty
   sqm-rewards-table --> sqm-table-row
   sqm-rewards-table --> sqm-table-cell
+  sqm-rewards-table --> sqm-skeleton
   sqm-rewards-table-reward-column --> sqm-rewards-table-reward-cell
   sqm-rewards-table-source-column --> sqm-rewards-table-source-cell
   sqm-rewards-table-status-column --> sqm-rewards-table-status-cell
   sqm-rewards-table-date-column --> sqm-rewards-table-date-cell
+  sqm-task-card --> sqm-skeleton
   sqm-code-verification --> sqm-form-message
+  sqm-email-verification --> sqm-skeleton
   sqm-email-verification --> sqm-form-message
   sqm-banking-info-form --> sqm-code-verification
   sqm-banking-info-form --> sqm-form-message
+  sqm-payout-details-card --> sqm-skeleton
   sqm-user-info-form --> sqm-form-message
+  sqm-user-info-form --> sqm-skeleton
   sqm-indirect-tax-form --> sqm-form-message
   sqm-docusign-form --> sqm-form-message
   sqm-tax-and-cash-dashboard --> sqm-payout-details-card
   sqm-tax-and-cash-dashboard --> sqm-form-message
+  sqm-tax-and-cash-dashboard --> sqm-skeleton
   sqm-tax-and-cash-dashboard --> sqm-invoice-table
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-download-column
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-date-column
@@ -264,6 +278,7 @@ graph TD;
   sqm-tax-and-cash --> sqm-banking-info-form
   sqm-tax-and-cash --> sqm-tax-and-cash-dashboard
   sqm-tax-and-cash --> sqm-form-message
+  sqm-tax-and-cash --> sqm-skeleton
   sqm-payout-status-alert --> sqm-scroll
   sqm-payout-status-alert --> sqm-form-message
   sqm-lead-form --> sqm-form-message
diff --git a/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx b/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx
index c793521e42..b52a78359a 100644
--- a/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx
+++ b/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx
@@ -106,6 +106,7 @@ import * as LeadForm from "../sqm-lead-form/LeadForm.stories";
 import * as LeadInputField from "../sqm-lead-form/LeadInputField.stories";
 import * as LeadFormDropdownField from "../sqm-lead-form/LeadFormDropdownField.stories";
 import * as LeadCheckboxField from "../sqm-lead-form/LeadCheckboxField.stories";
+import * as Skeleton from "../sqm-skeleton/Skeleton.stories";
 import * as UserInfoFormView from "../tax-and-cash/sqm-user-info-form/UserInfoFormView.stories";
 
 import { ShadowViewAddon } from "../../ShadowViewAddon";
@@ -215,6 +216,7 @@ const stories = [
   LeadInputField,
   LeadFormDropdownField,
   LeadCheckboxField,
+  Skeleton,
   TaxAndCashRewardsTableCell,
   TaxAndCashRewardsTable,
   TaxAndCashReferralTableRewardsCell,
diff --git a/packages/mint-components/src/components/sqm-tabs/Tabs.stories.tsx b/packages/mint-components/src/components/sqm-tabs/Tabs.stories.tsx
index d90ab8a009..61c7bb1911 100644
--- a/packages/mint-components/src/components/sqm-tabs/Tabs.stories.tsx
+++ b/packages/mint-components/src/components/sqm-tabs/Tabs.stories.tsx
@@ -80,7 +80,7 @@ export const ReferralProgram = () => (
       <sqm-referral-table>
         <sqm-referral-table-user-column
           column-title="User"
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           deleted-user="Deleted User"
         >
         </sqm-referral-table-user-column>
@@ -123,7 +123,7 @@ export const ReferralProgram = () => (
         >
         </sqm-rewards-table-reward-column>
         <sqm-rewards-table-source-column
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           column-title="Source"
           deleted-user="Deleted User"
           referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
@@ -176,7 +176,7 @@ export const LoyaltyProgram = () => (
       <sqm-referral-table>
         <sqm-referral-table-user-column
           column-title="User"
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           deleted-user="Deleted User"
         >
         </sqm-referral-table-user-column>
@@ -219,7 +219,7 @@ export const LoyaltyProgram = () => (
         >
         </sqm-rewards-table-reward-column>
         <sqm-rewards-table-source-column
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           column-title="Source"
           deleted-user="Deleted User"
           referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
@@ -275,7 +275,7 @@ export const BottomTabs = () => (
       <sqm-referral-table
         ><sqm-referral-table-user-column
           column-title="User"
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           deleted-user="Deleted User"
         >
         </sqm-referral-table-user-column>
@@ -318,7 +318,7 @@ export const BottomTabs = () => (
         >
         </sqm-rewards-table-reward-column>
         <sqm-rewards-table-source-column
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           column-title="Source"
           deleted-user="Deleted User"
           referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
@@ -374,7 +374,7 @@ export const LeftTabs = () => (
       <sqm-referral-table
         ><sqm-referral-table-user-column
           column-title="User"
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           deleted-user="Deleted User"
         >
         </sqm-referral-table-user-column>
@@ -417,7 +417,7 @@ export const LeftTabs = () => (
         >
         </sqm-rewards-table-reward-column>
         <sqm-rewards-table-source-column
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           column-title="Source"
           deleted-user="Deleted User"
           referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
@@ -473,7 +473,7 @@ export const RightTabs = () => (
       <sqm-referral-table
         ><sqm-referral-table-user-column
           column-title="User"
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           deleted-user="Deleted User"
         >
         </sqm-referral-table-user-column>
@@ -516,7 +516,7 @@ export const RightTabs = () => (
         >
         </sqm-rewards-table-reward-column>
         <sqm-rewards-table-source-column
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           column-title="Source"
           deleted-user="Deleted User"
           referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
diff --git a/packages/mint-components/src/components/sqm-task-card/readme.md b/packages/mint-components/src/components/sqm-task-card/readme.md
index 4c81bef199..f7c7b4fdc7 100644
--- a/packages/mint-components/src/components/sqm-task-card/readme.md
+++ b/packages/mint-components/src/components/sqm-task-card/readme.md
@@ -46,9 +46,14 @@
 
  - [sqm-stencilbook](../sqm-stencilbook)
 
+### Depends on
+
+- [sqm-skeleton](../sqm-skeleton)
+
 ### Graph
 ```mermaid
 graph TD;
+  sqm-task-card --> sqm-skeleton
   sqm-stencilbook --> sqm-task-card
   style sqm-task-card fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-task-card/sqm-task-card-view.tsx b/packages/mint-components/src/components/sqm-task-card/sqm-task-card-view.tsx
index c0a0f1aa62..758d4820a0 100644
--- a/packages/mint-components/src/components/sqm-task-card/sqm-task-card-view.tsx
+++ b/packages/mint-components/src/components/sqm-task-card/sqm-task-card-view.tsx
@@ -314,7 +314,7 @@ export function TaskCardView(props: TaskCardViewProps): VNode {
             style={{ opacity: taskComplete || taskUnavailable ? "0.45" : "1" }}
           >
             {states.loading ? (
-              <sl-skeleton style={{ width: "22%", margin: "0" }} />
+              <sqm-skeleton style={{ width: "22%", margin: "0" }} />
             ) : (
               <div>
                 {showComplete && (
@@ -333,7 +333,7 @@ export function TaskCardView(props: TaskCardViewProps): VNode {
           </div>
 
           {states.loading ? (
-            <sl-skeleton
+            <sqm-skeleton
               style={{ width: "42%", margin: "var(--sl-spacing-medium) 0" }}
             />
           ) : (
@@ -355,7 +355,7 @@ export function TaskCardView(props: TaskCardViewProps): VNode {
             </div>
           )}
           {states.loading ? (
-            <sl-skeleton style={{ margin: "var(--sl-spacing-medium) 0" }} />
+            <sqm-skeleton style={{ margin: "var(--sl-spacing-medium) 0" }} />
           ) : (
             content.description && (
               <Details
@@ -365,7 +365,7 @@ export function TaskCardView(props: TaskCardViewProps): VNode {
             )
           )}
           {content.showProgressBar && states.loading ? (
-            <sl-skeleton style={{ margin: "var(--sl-spacing-medium) 0" }} />
+            <sqm-skeleton style={{ margin: "var(--sl-spacing-medium) 0" }} />
           ) : (
             content.showProgressBar && (
               <ProgressBarView
@@ -382,7 +382,7 @@ export function TaskCardView(props: TaskCardViewProps): VNode {
             data-subdue={taskComplete || taskUnavailable}
           >
             {states.loading ? (
-              <sl-skeleton style={{ width: "25%", marginLeft: "auto" }} />
+              <sqm-skeleton style={{ width: "25%", marginLeft: "auto" }} />
             ) : (
               <div style={{ display: "contents" }}>
                 <span class="text">
diff --git a/packages/mint-components/src/components/sqm-widget-verification/sqm-code-verification/readme.md b/packages/mint-components/src/components/sqm-widget-verification/sqm-code-verification/readme.md
index 0e3b2042bf..202714151c 100644
--- a/packages/mint-components/src/components/sqm-widget-verification/sqm-code-verification/readme.md
+++ b/packages/mint-components/src/components/sqm-widget-verification/sqm-code-verification/readme.md
@@ -37,6 +37,7 @@
 ```mermaid
 graph TD;
   sqm-code-verification --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-banking-info-form --> sqm-code-verification
   sqm-stencilbook --> sqm-code-verification
   sqm-widget-verification --> sqm-code-verification
diff --git a/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/readme.md b/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/readme.md
index f025bea793..9f01209af6 100644
--- a/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/readme.md
+++ b/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/readme.md
@@ -28,12 +28,15 @@
 
 ### Depends on
 
+- [sqm-skeleton](../../sqm-skeleton)
 - [sqm-form-message](../../sqm-form-message)
 
 ### Graph
 ```mermaid
 graph TD;
+  sqm-email-verification --> sqm-skeleton
   sqm-email-verification --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-email-verification
   sqm-widget-verification --> sqm-email-verification
   style sqm-email-verification fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx b/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx
index 35c8ef7082..ce8d1b7735 100644
--- a/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx
+++ b/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx
@@ -221,9 +221,20 @@ export function WidgetEmailVerificationView(
   const renderLoadingSkeleton = () => {
     return (
       <div class={sheet.classes.Wrapper}>
-        <sl-skeleton class={sheet.classes.SkeletonOne}></sl-skeleton>
-        <sl-skeleton class={sheet.classes.SkeletonTwo}></sl-skeleton>
-        <sl-skeleton class={sheet.classes.SkeletonThree}></sl-skeleton>
+        <sqm-skeleton height="16px" width="50%"></sqm-skeleton>
+        <sqm-skeleton height="16px" width="50%"></sqm-skeleton>
+        <sqm-skeleton height="16px" width="50%"></sqm-skeleton>
+        <sqm-skeleton height="34px" width="30%"></sqm-skeleton>
+        <sqm-skeleton height="24px" width="15%"></sqm-skeleton>
+        <sl-button
+          submit
+          class={sheet.classes.ContinueButton}
+          loading={true}
+          exportparts="base: primarybutton-base"
+          type="primary"
+        >
+          {text.sendCodeText}
+        </sl-button>
       </div>
     );
   };
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/readme.md
index 98f2fd336e..53516c5e15 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/readme.md
@@ -88,6 +88,7 @@ graph TD;
   sqm-banking-info-form --> sqm-code-verification
   sqm-banking-info-form --> sqm-form-message
   sqm-code-verification --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-banking-info-form
   sqm-tax-and-cash --> sqm-banking-info-form
   style sqm-banking-info-form fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-docusign-form/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-docusign-form/readme.md
index fdd69dd222..d654d729c2 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-docusign-form/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-docusign-form/readme.md
@@ -50,6 +50,7 @@
 ```mermaid
 graph TD;
   sqm-docusign-form --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-docusign-form
   sqm-tax-and-cash --> sqm-docusign-form
   style sqm-docusign-form fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/readme.md
index c76346fde8..373cb90e2e 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/readme.md
@@ -55,6 +55,7 @@
 ```mermaid
 graph TD;
   sqm-indirect-tax-form --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-indirect-tax-form
   sqm-tax-and-cash --> sqm-indirect-tax-form
   style sqm-indirect-tax-form fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.tsx
index b50e2fa835..f97bfc7747 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.tsx
@@ -272,7 +272,7 @@ export const IndirectTaxFormView = (props: IndirectTaxFormViewProps) => {
           </sqm-form-message>
         )}
         {states.isPartner && (
-          <sqm-form-message type="info">
+          <sqm-form-message loading={states.loading} type="info">
             <p part="alert-title">{text.isPartnerAlertHeader}</p>
             {intl.formatMessage(
               {
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/readme.md
index 48f9003c6f..0cf1076bd4 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/readme.md
@@ -24,9 +24,14 @@
  - [sqm-stencilbook](../../sqm-stencilbook)
  - [sqm-tax-and-cash-dashboard](../sqm-tax-and-cash-dashboard)
 
+### Depends on
+
+- [sqm-skeleton](../../sqm-skeleton)
+
 ### Graph
 ```mermaid
 graph TD;
+  sqm-payout-details-card --> sqm-skeleton
   sqm-stencilbook --> sqm-payout-details-card
   sqm-tax-and-cash-dashboard --> sqm-payout-details-card
   style sqm-payout-details-card fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.tsx
index 6deb396346..640f3449f2 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.tsx
@@ -174,12 +174,16 @@ export function PayoutDetailsCardView(props: PayoutDetailsCardViewProps) {
   const renderLoadingSkeleton = () => {
     return (
       <div class={classes.CardContainer}>
-        <div class={classes.StatusContainer}>
-          <sl-skeleton class={classes.SkeletonOne}></sl-skeleton>
-          <sl-skeleton class={classes.SkeletonTwo}></sl-skeleton>
+        <div class={classes.StatusContainer} style={{ display: "block" }}>
+          <sqm-skeleton
+            style={{ marginBottom: "var(--sl-spacing-medium)" }}
+            width="25%"
+            height="16px"
+          ></sqm-skeleton>
+          <sqm-skeleton width="25%" height="24px"></sqm-skeleton>
         </div>
-        <sl-skeleton class={classes.SkeletonThree}></sl-skeleton>
-        <sl-skeleton class={classes.SkeletonOne}></sl-skeleton>
+        <sqm-skeleton width="50%" height="34px"></sqm-skeleton>
+        <sqm-skeleton width="25%" height="16px"></sqm-skeleton>
       </div>
     );
   };
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/readme.md
index 8f7a321ad3..495dac0c8d 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/readme.md
@@ -67,6 +67,7 @@
 graph TD;
   sqm-payout-status-alert --> sqm-scroll
   sqm-payout-status-alert --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-payout-status-alert
   style sqm-payout-status-alert fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx
index 43265de172..5247a16788 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx
@@ -310,13 +310,15 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
               <sl-button
                 disabled={states.loading}
                 type="primary"
+                exportparts="base: primarybutton-base"
                 onClick={callbacks.onPaymentInfoClick}
               >
                 {text.editPaymentInformationButton}
               </sl-button>
               <sl-button
                 disabled={states.loading}
-                type="default"
+                type="secondary"
+                exportparts="base: secondarybutton-base"
                 onClick={callbacks.onNewFormClick}
               >
                 {text.newFormButton}
@@ -347,13 +349,15 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
               <sl-button
                 disabled={states.loading}
                 type="primary"
+                exportparts="base: primarybutton-base"
                 onClick={callbacks.onPaymentInfoClick}
               >
                 {text.editPaymentInformationButton}
               </sl-button>
               <sl-button
                 disabled={states.loading}
-                type="default"
+                type="secondary"
+                exportparts="base: secondarybutton-base"
                 onClick={callbacks.onNewFormClick}
               >
                 {text.newFormButton}
@@ -384,13 +388,15 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
               <sl-button
                 disabled={states.loading}
                 type="primary"
+                exportparts="base: primarybutton-base"
                 onClick={callbacks.onPaymentInfoClick}
               >
                 {text.editPaymentInformationButton}
               </sl-button>
               <sl-button
                 disabled={states.loading}
-                type="default"
+                type="secondary"
+                exportparts="base: secondarybutton-base"
                 onClick={callbacks.onNewFormClick}
               >
                 {text.newFormButton}
@@ -421,6 +427,7 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
               <sl-button
                 disabled={states.loading}
                 type="primary"
+                exportparts="base: primarybutton-base"
                 onClick={callbacks.onPaymentInfoClick}
               >
                 {text.editPaymentInformationButton}
@@ -451,6 +458,7 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
               <sl-button
                 disabled={states.loading}
                 type="primary"
+                exportparts="base: primarybutton-base"
                 onClick={callbacks.onPaymentInfoClick}
               >
                 {text.editPaymentInformationButton}
@@ -496,12 +504,18 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
             scroll-animation="smooth"
           ></sqm-scroll>
         ) : data.type === "SquatchPortal" ? (
-          <sl-button type="default" onClick={callbacks.onTermsClick}>
+          <sl-button
+            type="primary"
+            exportparts="base: primarybutton-base"
+            onClick={callbacks.onTermsClick}
+          >
             {text.w9RequiredButtonText}
           </sl-button>
         ) : (
           // Demo case
-          <sl-button type="default">{text.w9RequiredButtonText}</sl-button>
+          <sl-button type="primary" exportparts="base: primarybutton-base">
+            {text.w9RequiredButtonText}
+          </sl-button>
         );
       case "INFORMATION_REQUIRED":
         return data.type === "SquatchJS2" ? (
@@ -553,10 +567,6 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
     }
   }
 
-  if (states.loading) {
-    return <sl-skeleton class={sheet.classes.SkeletonOne}></sl-skeleton>;
-  }
-
   const alertDetails = getAlert(states.status);
 
   if (states.status === "DONE" || !alertDetails) {
@@ -567,7 +577,7 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
     <div part="sqm-base">
       <style type="text/css">{styleString}</style>
       <style type="text/css">{vanillaStyle}</style>
-      <sqm-form-message type={alertDetails.alertType}>
+      <sqm-form-message loading={states.loading} type={alertDetails.alertType}>
         <p part="alert-title">{alertDetails.header}</p>
         <p part="alert-description">{alertDetails.description}</p>
         {getButton(states.status)}
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md
index a8d72e895b..bde46d7389 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md
@@ -104,6 +104,7 @@
 
 - [sqm-payout-details-card](../sqm-payout-details-card)
 - [sqm-form-message](../../sqm-form-message)
+- [sqm-skeleton](../../sqm-skeleton)
 - [sqm-invoice-table](../../sqm-invoice-table)
 - [sqm-invoice-table-download-column](../../sqm-invoice-table/columns)
 - [sqm-invoice-table-date-column](../../sqm-invoice-table/columns)
@@ -114,13 +115,17 @@
 graph TD;
   sqm-tax-and-cash-dashboard --> sqm-payout-details-card
   sqm-tax-and-cash-dashboard --> sqm-form-message
+  sqm-tax-and-cash-dashboard --> sqm-skeleton
   sqm-tax-and-cash-dashboard --> sqm-invoice-table
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-download-column
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-date-column
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-data-column
+  sqm-payout-details-card --> sqm-skeleton
+  sqm-form-message --> sqm-skeleton
   sqm-invoice-table --> sqm-empty
   sqm-invoice-table --> sqm-table-row
   sqm-invoice-table --> sqm-table-cell
+  sqm-invoice-table --> sqm-skeleton
   sqm-empty --> sqm-portal-container
   sqm-empty --> sqm-titled-section
   sqm-empty --> sqm-text
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx
index e0a8ba8a02..6bb7fe4981 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx
@@ -240,16 +240,6 @@ const style = {
   EditBankDetailsButton: {
     marginTop: "var(--sl-spacing-large)",
   },
-  SkeletonOne: {
-    width: "15%",
-    height: "10px",
-  },
-  SkeletonTwo: {
-    width: "25%",
-    height: "24px",
-    top: "var(--sl-spacing-small)",
-    marginBottom: "var(--sl-spacing-x-small)",
-  },
   TaxSectionSkeletonContainer: {
     display: "flex",
     flexDirection: "column",
@@ -1050,6 +1040,7 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => {
         )}
         {alertInfo && (
           <sqm-form-message
+            loading={states.loading}
             exportparts="base: alert-base, icon:alert-icon"
             type={alertInfo?.alertType}
             class={alertInfo?.class}
@@ -1129,8 +1120,8 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => {
             <div>
               {states.loading ? (
                 <div class={sheet.classes.TaxSectionSkeletonContainer}>
-                  <sl-skeleton class={sheet.classes.SkeletonOne}></sl-skeleton>
-                  <sl-skeleton class={sheet.classes.SkeletonTwo}></sl-skeleton>
+                  <sqm-skeleton width="15%" height="10px"></sqm-skeleton>
+                  <sqm-skeleton width="25%" height="24px"></sqm-skeleton>
                 </div>
               ) : (
                 <div>
@@ -1175,8 +1166,8 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => {
         <div class={sheet.classes.IndirectTaxPreviewContainer}>
           {states.loading ? (
             <div class={sheet.classes.TaxSectionSkeletonContainer}>
-              <sl-skeleton class={sheet.classes.SkeletonOne}></sl-skeleton>
-              <sl-skeleton class={sheet.classes.SkeletonTwo}></sl-skeleton>
+              <sqm-skeleton width="15%" height="10px"></sqm-skeleton>
+              <sqm-skeleton width="25%" height="24px"></sqm-skeleton>
             </div>
           ) : (
             <div>
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/LoadingView.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/LoadingView.tsx
index 32d41db753..23fbb27dd1 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/LoadingView.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/LoadingView.tsx
@@ -5,32 +5,14 @@ const style = {
   Container: {
     display: "flex",
     flexDirection: "column",
-    gap: "24px",
+    gap: "35px",
   },
   HeaderContainer: {
     display: "flex",
     flexDirection: "column",
     gap: "10px",
   },
-
-  TitleSkeleton: {
-    width: "45%",
-    height: "40px !important",
-  },
-  StepSkeleton: {
-    width: "15%",
-  },
-  HeaderSkeleton: {
-    width: "25%",
-    height: "30px !important",
-  },
-  InputSkeleton: {
-    width: "75%",
-  },
-  ButtonSkeleton: {
-    width: "80px",
-    height: "30px !important",
-  },
+  // Skeleton styles removed as they are now inlined props
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -39,18 +21,33 @@ const LoadingView = () => {
   return (
     <div class={sheet.classes.Container}>
       <style type="text/css">{styleString}</style>
-      <sl-skeleton class={sheet.classes.TitleSkeleton}></sl-skeleton>
+      {/* TitleSkeleton */}
+      <sqm-skeleton width="45%" height="40px !important"></sqm-skeleton>
+
       <div class={sheet.classes.HeaderContainer}>
-        <sl-skeleton class={sheet.classes.StepSkeleton}></sl-skeleton>
-        <sl-skeleton class={sheet.classes.HeaderSkeleton}></sl-skeleton>
+        {/* StepSkeleton */}
+        <sqm-skeleton width="15%"></sqm-skeleton>
+        {/* HeaderSkeleton */}
+        <sqm-skeleton width="25%" height="30px !important"></sqm-skeleton>
       </div>
-      <sl-skeleton class={sheet.classes.InputSkeleton}></sl-skeleton>
-      <sl-skeleton class={sheet.classes.InputSkeleton}></sl-skeleton>
-      <sl-skeleton class={sheet.classes.InputSkeleton}></sl-skeleton>
-      <sl-skeleton class={sheet.classes.InputSkeleton}></sl-skeleton>
-      <sl-skeleton class={sheet.classes.InputSkeleton}></sl-skeleton>
-      <sl-skeleton class={sheet.classes.StepSkeleton}></sl-skeleton>
-      <sl-skeleton class={sheet.classes.ButtonSkeleton}></sl-skeleton>
+
+      {/* InputSkeletons */}
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+
+      {/* StepSkeleton */}
+      <sqm-skeleton width="15%"></sqm-skeleton>
+      {/* ButtonSkeleton */}
+      <sqm-skeleton width="80px" height="30px !important"></sqm-skeleton>
     </div>
   );
 };
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/readme.md
index 26ab8d6616..68f4733144 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/readme.md
@@ -214,6 +214,7 @@
 - [sqm-banking-info-form](../sqm-banking-info-form)
 - [sqm-tax-and-cash-dashboard](../sqm-tax-and-cash-dashboard)
 - [sqm-form-message](../../sqm-form-message)
+- [sqm-skeleton](../../sqm-skeleton)
 
 ### Graph
 ```mermaid
@@ -224,7 +225,10 @@ graph TD;
   sqm-tax-and-cash --> sqm-banking-info-form
   sqm-tax-and-cash --> sqm-tax-and-cash-dashboard
   sqm-tax-and-cash --> sqm-form-message
+  sqm-tax-and-cash --> sqm-skeleton
   sqm-user-info-form --> sqm-form-message
+  sqm-user-info-form --> sqm-skeleton
+  sqm-form-message --> sqm-skeleton
   sqm-indirect-tax-form --> sqm-form-message
   sqm-docusign-form --> sqm-form-message
   sqm-banking-info-form --> sqm-code-verification
@@ -232,13 +236,16 @@ graph TD;
   sqm-code-verification --> sqm-form-message
   sqm-tax-and-cash-dashboard --> sqm-payout-details-card
   sqm-tax-and-cash-dashboard --> sqm-form-message
+  sqm-tax-and-cash-dashboard --> sqm-skeleton
   sqm-tax-and-cash-dashboard --> sqm-invoice-table
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-download-column
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-date-column
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-data-column
+  sqm-payout-details-card --> sqm-skeleton
   sqm-invoice-table --> sqm-empty
   sqm-invoice-table --> sqm-table-row
   sqm-invoice-table --> sqm-table-cell
+  sqm-invoice-table --> sqm-skeleton
   sqm-empty --> sqm-portal-container
   sqm-empty --> sqm-titled-section
   sqm-empty --> sqm-text
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.tsx
index 3a7aed457f..785612c682 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.tsx
@@ -1370,22 +1370,24 @@ export class TaxAndCashMonolith {
         return (
           <ErrorView
             loadingErrorAlertHeader={this.loadingErrorAlertHeader}
-            loadingErrorAlertDescription={intl.formatMessage(
-              {
-                id: "loadingErrorAlertDescription",
-                defaultMessage: this.loadingErrorAlertDescription,
-              },
-              {
-                supportLink: (
-                  <a
-                    target="_blank"
-                    href={`mailto:advocate-support@impact.com`}
-                  >
-                    {this.supportLink}
-                  </a>
-                ),
-              }
-            )}
+            loadingErrorAlertDescription={
+              intl.formatMessage(
+                {
+                  id: "loadingErrorAlertDescription",
+                  defaultMessage: this.loadingErrorAlertDescription,
+                },
+                {
+                  supportLink: (
+                    <a
+                      target="_blank"
+                      href={`mailto:advocate-support@impact.com`}
+                    >
+                      {this.supportLink}
+                    </a>
+                  ),
+                }
+              ) as string
+            }
           />
         );
     }
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/readme.md
index 9358be96d5..c9c8b69af4 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/readme.md
@@ -54,11 +54,14 @@
 ### Depends on
 
 - [sqm-form-message](../../sqm-form-message)
+- [sqm-skeleton](../../sqm-skeleton)
 
 ### Graph
 ```mermaid
 graph TD;
   sqm-user-info-form --> sqm-form-message
+  sqm-user-info-form --> sqm-skeleton
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-user-info-form
   sqm-tax-and-cash --> sqm-user-info-form
   style sqm-user-info-form fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.tsx
index 345886bd76..07897c630f 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.tsx
@@ -525,7 +525,7 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
           )}
 
           {(states.isPartner || states.isUser) && (
-            <sqm-form-message type="info">
+            <sqm-form-message loading={states.loading} type="info">
               <p part="alert-title">{text.isPartnerAlertHeader}</p>
               <p part="alert-description">
                 {intl.formatMessage(
diff --git a/packages/mint-components/src/global/styles.ts b/packages/mint-components/src/global/styles.ts
index 38637a4ead..4db1f82edf 100644
--- a/packages/mint-components/src/global/styles.ts
+++ b/packages/mint-components/src/global/styles.ts
@@ -586,7 +586,12 @@ html {
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
-  --sqm-skeleton-background: hsl(240, 4%, 91%);
+  --sqm-skeleton-background: ${
+    config?.color?.loadingSkeleton?.background || "hsl(240 5.9% 90%)"
+  };
+  --sqm-skeleton-animation-background: ${
+    config?.color?.loadingSkeleton?.animationBackground || "hsl(240 4.8% 95.9%)"
+  };
   --sqm-text: ${
     config?.color?.textColorShades?.mainText || "hsl(240, 4%, 16%)"
   };
diff --git a/packages/mint-components/src/index.html b/packages/mint-components/src/index.html
index 9730b63139..974237ff31 100644
--- a/packages/mint-components/src/index.html
+++ b/packages/mint-components/src/index.html
@@ -1,23 +1,45 @@
-<!DOCTYPE html>
-<html dir="ltr" lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-  <title>Mint Components Stencilbook</title>
-  <script type="module" src="build/mint-components.esm.js"></script>
-  <script nomodule src="build/mint-components.js"></script>
-
-  <script>
-    const brandConfig = localStorage.getItem("localStorageBrandConfigKey");
-    if (brandConfig) {
-      const parsedConfig = JSON.parse(brandConfig);
-      window.SquatchBrandingConfig = parsedConfig;
-    }
-  </script>
-
-<body>
-  <sqm-stencilbook></sqm-stencilbook>
-</body>
-
-</html>
\ No newline at end of file
+<html>
+  <head>
+    <script>
+      !(function (a, b) {
+        a("squatch", "http://localhost:3333/squatch.min.js", b);
+      })(function (a, b, c) {
+        var d, e, f;
+        (c["_" + a] = {}),
+          (c[a] = {}),
+          (c[a].ready = function (b) {
+            c["_" + a].ready = c["_" + a].ready || [];
+            c["_" + a].ready.push(b);
+          }),
+          (e = document.createElement("script")),
+          (e.async = 1),
+          (e.src = b),
+          (f = document.getElementsByTagName("script")[0]),
+          f.parentNode.insertBefore(e, f);
+      }, this);
+    </script>
+    <script>
+      window.squatchTenant = "ac52kfybp1tkr";
+      window.squatchConfig = {
+        domain: "https://staging.referralsaasquatch.com",
+      };
+      window.squatchToken =
+        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IklSTVhzWXk2WVlxcTQ2OTQzN21HOEVSUXQ4UW9LRkJhRzEifQ.eyJ1c2VyIjp7ImlkIjoidGVzdHVzZXIiLCJhY2NvdW50SWQiOiJ0ZXN0dXNlciIsImVtYWlsIjoidGVzdHVzZXJAZXhhbXBsZS5jb20ifX0.tegzTaLms4g47rwcWoyhk1WW4hqB16PulQV9zouJNfU";
+      window.widgetIdent = {
+        programId: "41863",
+        userId: "testuser",
+        accountId: "testuser",
+        token:
+          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IklSTVhzWXk2WVlxcTQ2OTQzN21HOEVSUXQ4UW9LRkJhRzEifQ.eyJ1c2VyIjp7ImlkIjoidGVzdHVzZXIiLCJhY2NvdW50SWQiOiJ0ZXN0dXNlciIsImVtYWlsIjoidGVzdHVzZXJAZXhhbXBsZS5jb20ifX0.tegzTaLms4g47rwcWoyhk1WW4hqB16PulQV9zouJNfU",
+        tenantAlias: "ac52kfybp1tkr",
+        engagementMedium: "EMBED",
+        appDomain: "https://staging.referralsaasquatch.com",
+      };
+    </script>
+  </head>
+  <body>
+    <impact-embed widget="p/41863/w/referrerWidget"
+      ><div>Loading...</div></impact-embed
+    >
+  </body>
+</html>
diff --git a/packages/mint-components/src/saasquatch.d.ts b/packages/mint-components/src/saasquatch.d.ts
index 77d06a0da5..c66ea758b6 100644
--- a/packages/mint-components/src/saasquatch.d.ts
+++ b/packages/mint-components/src/saasquatch.d.ts
@@ -216,6 +216,10 @@ export interface BrandingConfiguration {
   };
   color?: {
     backgroundColor?: string;
+    loadingSkeleton?: {
+      background?: string;
+      animationBackground?: string;
+    };
     textColorShades?: {
       mainText: string;
       subduedText: string;
diff --git a/packages/mint-components/src/tables/TableSlots.tsx b/packages/mint-components/src/tables/TableSlots.tsx
index 4789795804..8161542c35 100644
--- a/packages/mint-components/src/tables/TableSlots.tsx
+++ b/packages/mint-components/src/tables/TableSlots.tsx
@@ -1,7 +1,5 @@
 import { h } from "@stencil/core";
 
-
-
 export function LoadingSlot() {
   return (
     <slot name="loading">
@@ -16,7 +14,7 @@ export function LoadingRow() {
   return (
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
   );
@@ -25,22 +23,22 @@ export function LoadingRow() {
 export function LoadingSkeleton() {
   return (
     <div style={{ width: "100%" }}>
-      <sl-skeleton style={{ marginBottom: "28px" }}></sl-skeleton>
-      <sl-skeleton style={{ marginBottom: "28px" }}></sl-skeleton>
-      <sl-skeleton style={{ marginBottom: "28px" }}></sl-skeleton>
-      <sl-skeleton style={{ marginBottom: "28px" }}></sl-skeleton>
-      <sl-skeleton></sl-skeleton>
+      <sqm-skeleton style={{ marginBottom: "28px" }}></sqm-skeleton>
+      <sqm-skeleton style={{ marginBottom: "28px" }}></sqm-skeleton>
+      <sqm-skeleton style={{ marginBottom: "28px" }}></sqm-skeleton>
+      <sqm-skeleton style={{ marginBottom: "28px" }}></sqm-skeleton>
+      <sqm-skeleton></sqm-skeleton>
     </div>
   );
 }
-export function EmptySlot({ label }: { label: string; }) {
+export function EmptySlot({ label }: { label: string }) {
   return (
     <slot name="empty">
       <EmptySkeleton label={label} />
     </slot>
   );
 }
-export function EmptySkeleton({ label }: { label: string; }) {
+export function EmptySkeleton({ label }: { label: string }) {
   return (
     <div style={{ width: "100%" }}>
       <sqm-text>
diff --git a/packages/mint-components/src/templates/CashPayoutsReferralWidget.html b/packages/mint-components/src/templates/CashPayoutsReferralWidget.html
index 4265bf44fa..128f8a8b8f 100644
--- a/packages/mint-components/src/templates/CashPayoutsReferralWidget.html
+++ b/packages/mint-components/src/templates/CashPayoutsReferralWidget.html
@@ -76,7 +76,7 @@ <h3 slot="label">
                 </sqm-tab>
                 <sqm-tab header="Referral History"><sqm-referral-table per-page="4" hidden-columns="2" more-label="Next"
                         prev-label="Prev" sm-breakpoint="599" md-breakpoint="799">
-                        <sqm-referral-table-user-column column-title="Customer" anonymous-user="Anonymous User"
+                        <sqm-referral-table-user-column column-title="Customer" anonymous-user="Your Friend"
                             deleted-user="Deleted User"></sqm-referral-table-user-column>
                         <sqm-referral-table-rewards-column column-title="Rewards"
                             status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" 
diff --git a/packages/mint-components/src/templates/LoyaltyWidget.html b/packages/mint-components/src/templates/LoyaltyWidget.html
index 3ce592def0..cc01d9470a 100644
--- a/packages/mint-components/src/templates/LoyaltyWidget.html
+++ b/packages/mint-components/src/templates/LoyaltyWidget.html
@@ -184,7 +184,7 @@ <h3 slot="label">Reward History</h3>
               >
               </sqm-rewards-table-reward-column>
               <sqm-rewards-table-source-column
-                anonymous-user="Anonymous User"
+                anonymous-user="Your Friend"
                 column-title="Source"
                 deleted-user="Deleted User"
                 referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
diff --git a/packages/mint-components/src/templates/MonoWidget.html b/packages/mint-components/src/templates/MonoWidget.html
index e902af5083..933864eed1 100644
--- a/packages/mint-components/src/templates/MonoWidget.html
+++ b/packages/mint-components/src/templates/MonoWidget.html
@@ -255,7 +255,7 @@ <h3 slot="label">Earn more rewards</h3>
             >
               <sqm-referral-table-user-column
                 column-title="User"
-                anonymous-user="Anonymous User"
+                anonymous-user="Your Friend"
                 deleted-user="Deleted User"
               >
               </sqm-referral-table-user-column>
@@ -307,7 +307,7 @@ <h3 slot="label">Earn more rewards</h3>
               >
               </sqm-rewards-table-reward-column>
               <sqm-rewards-table-source-column
-                anonymous-user="Anonymous User"
+                anonymous-user="Your Friend"
                 column-title="Source"
                 deleted-user="Deleted User"
                 referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
diff --git a/packages/mint-components/src/templates/PaypalMonoWidget.html b/packages/mint-components/src/templates/PaypalMonoWidget.html
index f2efe5ef91..0573f18718 100644
--- a/packages/mint-components/src/templates/PaypalMonoWidget.html
+++ b/packages/mint-components/src/templates/PaypalMonoWidget.html
@@ -280,7 +280,7 @@ <h3 slot="label">Earn more rewards</h3>
             >
               <sqm-referral-table-user-column
                 column-title="User"
-                anonymous-user="Anonymous User"
+                anonymous-user="Your Friend"
                 deleted-user="Deleted User"
               >
               </sqm-referral-table-user-column>
@@ -340,7 +340,7 @@ <h3 slot="label">Earn more rewards</h3>
               >
               </sqm-rewards-table-reward-column>
               <sqm-rewards-table-source-column
-                anonymous-user="Anonymous User"
+                anonymous-user="Your Friend"
                 column-title="Source"
                 deleted-user="Deleted User"
                 referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
diff --git a/packages/mint-components/src/templates/PaypalReferralWidget.html b/packages/mint-components/src/templates/PaypalReferralWidget.html
index d582d969e8..59ab9a06e2 100644
--- a/packages/mint-components/src/templates/PaypalReferralWidget.html
+++ b/packages/mint-components/src/templates/PaypalReferralWidget.html
@@ -197,7 +197,7 @@ <h3 slot="label">Referral History</h3>
         >
           <sqm-referral-table-user-column
             column-title="User"
-            anonymous-user="Anonymous User"
+            anonymous-user="Your Friend"
             deleted-user="Deleted User"
           >
           </sqm-referral-table-user-column>
diff --git a/packages/mint-components/src/templates/PromoCodeReferralWidget.html b/packages/mint-components/src/templates/PromoCodeReferralWidget.html
index a00870db85..727fb5ba8d 100644
--- a/packages/mint-components/src/templates/PromoCodeReferralWidget.html
+++ b/packages/mint-components/src/templates/PromoCodeReferralWidget.html
@@ -142,7 +142,7 @@ <h3 slot="label">Referral History</h3>
         >
           <sqm-referral-table-user-column
             column-title="User"
-            anonymous-user="Anonymous User"
+            anonymous-user="Your Friend"
             deleted-user="Deleted User"
           >
           </sqm-referral-table-user-column>
diff --git a/packages/mint-components/src/templates/ReferralWidget.html b/packages/mint-components/src/templates/ReferralWidget.html
index 9366b72805..7527837b06 100644
--- a/packages/mint-components/src/templates/ReferralWidget.html
+++ b/packages/mint-components/src/templates/ReferralWidget.html
@@ -172,7 +172,7 @@ <h3 slot="label">Referral History</h3>
         >
           <sqm-referral-table-user-column
             column-title="User"
-            anonymous-user="Anonymous User"
+            anonymous-user="Your Friend"
             deleted-user="Deleted User"
           >
           </sqm-referral-table-user-column>
diff --git a/packages/mint-components/stencil.config.ts b/packages/mint-components/stencil.config.ts
index ed126e4ff0..178a442236 100644
--- a/packages/mint-components/stencil.config.ts
+++ b/packages/mint-components/stencil.config.ts
@@ -28,6 +28,13 @@ const useGrapesjs: OutputTarget = grapesJsOutput({
 
 export const config: Config = {
   namespace: "mint-components",
+  hydratedFlag: {
+    hydratedValue: "inherit!important",
+    initialValue: "hidden",
+    name: "hydrated",
+    property: "visibility",
+    selector: "class",
+  },
   devServer: {
     // startupTimeout: 0,
   },
@@ -66,6 +73,16 @@ export const config: Config = {
     {
       components: ["sqm-referral-code", "sqm-referral-codes", "sqm-pagination"],
     },
+    {
+      components: [
+        "sqm-portal-login",
+        "sqm-portal-register",
+        "sqm-portal-registration-form",
+        "sqm-portal-forgot-password",
+        "sqm-portal-verify-email",
+        "sqm-portal-google-login",
+      ],
+    },
   ],
   outputTargets:
     //@ts-ignore
diff --git a/packages/paypal-components/src/components/sqp-rewards-column/ReferralRewardColumn.stories.tsx b/packages/paypal-components/src/components/sqp-rewards-column/ReferralRewardColumn.stories.tsx
index 4114ab2128..8172d84881 100644
--- a/packages/paypal-components/src/components/sqp-rewards-column/ReferralRewardColumn.stories.tsx
+++ b/packages/paypal-components/src/components/sqp-rewards-column/ReferralRewardColumn.stories.tsx
@@ -90,7 +90,7 @@ export const FullReferralTable = () => (
   >
     <sqm-referral-table-user-column
       column-title="User"
-      anonymous-user="Anonymous User"
+      anonymous-user="Your Friend"
       deleted-user="Deleted User"
     ></sqm-referral-table-user-column>
     <sqm-referral-table-status-column
@@ -143,7 +143,7 @@ export const MockDataTable = () => {
         >
           <sqm-referral-table-user-column
             column-title="User"
-            anonymous-user="Anonymous User"
+            anonymous-user="Your Friend"
             deleted-user="Deleted User"
           ></sqm-referral-table-user-column>
           <sqm-referral-table-status-column
diff --git a/packages/paypal-components/src/components/sqp-status-column/StatusColumn.stories.tsx b/packages/paypal-components/src/components/sqp-status-column/StatusColumn.stories.tsx
index c2dbc88d64..40b0da93d3 100644
--- a/packages/paypal-components/src/components/sqp-status-column/StatusColumn.stories.tsx
+++ b/packages/paypal-components/src/components/sqp-status-column/StatusColumn.stories.tsx
@@ -114,7 +114,7 @@ export const FullRewardsTable = () => (
       redeemed-text="{redeemedAmount} redeemed"
     ></sqm-rewards-table-reward-column>
     <sqm-rewards-table-source-column
-      anonymous-user="Anonymous User"
+      anonymous-user="Your Friend"
       column-title="Source"
       deleted-user="Deleted User"
       referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
@@ -170,7 +170,7 @@ export const MockDataTable = () => {
             redeemed-text="{redeemedAmount} redeemed"
           ></sqm-rewards-table-reward-column>
           <sqm-rewards-table-source-column
-            anonymous-user="Anonymous User"
+            anonymous-user="Your Friend"
             column-title="Source"
             deleted-user="Deleted User"
             referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"