From f354bd9c4d956d64bc9d86fe748a10660eeabe49 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Mon, 4 May 2026 17:22:50 +0200
Subject: [PATCH 01/18] POC - homepage widgets

---
 src/components/DevModePanel/DevModePanel.tsx  |   8 +-
 src/components/Sidebar/menu/utils.test.ts     |   2 +
 .../components/AppWidgets/AppWidgets.tsx      |  94 +----
 .../components/IframePost/IframePost.tsx      |  83 ++++
 ...app-extension-manifest-available-mounts.ts |   4 +
 .../app-extension-manifest-options.test.ts    |  84 ++++
 .../domain/app-extension-manifest-options.ts  |   6 +
 .../domain/app-extension-manifest.test.ts     |  53 +++
 .../domain/app-extension-manifest.ts          |  13 +
 .../InstalledExtensions.test.tsx              |  16 -
 .../InstalledExtensions.tsx                   |   8 +-
 src/fragments/orders.ts                       |  13 -
 src/graphql/hooks.generated.ts                | 166 +-------
 src/graphql/types.generated.ts                |  32 --
 src/home/HomePage.tsx                         |  59 +++
 src/home/HomeWidgetTabs.tsx                   |  37 ++
 src/home/HomeWidgetView.tsx                   |  55 +++
 src/home/filterHomeExtensions.test.ts         | 128 ++++++
 src/home/filterHomeExtensions.ts              |  25 ++
 src/home/urls.ts                              |   2 +
 src/index.tsx                                 |  18 +-
 src/orders/views/OrderList/OrderList.tsx      |   9 +-
 .../views/ProductCreate/ProductCreate.tsx     |   3 -
 src/staff/views/StaffList/StaffList.tsx       |   3 -
 src/welcomePage/WelcomePage.tsx               |  58 ---
 .../WelcomePageOnboarding.test.tsx            | 297 --------------
 .../WelcomePageOnboarding.tsx                 | 128 ------
 .../WelcomePageCheckGraphQLButton.tsx         |  25 --
 .../WelcomePageCreateProductButton.tsx        |  49 ---
 .../WelcomePageFakeDisabledButton.tsx         |  33 --
 .../WelcomePageInviteStaffButton.tsx          |  44 --
 .../WelcomePageOnboardingAccordion.tsx        |  97 -----
 .../components/WelcomePageOrdersButton.tsx    |  45 ---
 .../components/WelcomePageWebhooksButton.tsx  |  16 -
 .../WelcomePageOnboarding/components/type.ts  |   3 -
 .../hooks/useNewUserCheck.test.ts             |  95 -----
 .../hooks/useNewUserCheck.ts                  |  36 --
 .../hooks/useOnboardingData.tsx               | 231 -----------
 .../WelcomePageOnboarding/index.ts            |   1 -
 .../WelcomePageOnboarding/mocks.ts            |  14 -
 .../onboardingContext/OnboardingContext.tsx   | 140 -------
 .../onboardingContext/index.ts                |   2 -
 .../initialOnboardingState.ts                 |  56 ---
 .../onboardingContext/types.ts                |  43 --
 .../useExpandedOnboardingId.test.ts           | 186 ---------
 .../useExpandedOnboardingId.ts                |  53 ---
 .../useOnboardingStorage.test.ts              | 126 ------
 .../onboardingContext/useOnboardingStorage.ts |  60 ---
 .../onboardingContext/utils.test.ts           | 377 ------------------
 .../onboardingContext/utils.ts                | 137 -------
 .../WelcmePageSidebar.test.tsx                | 127 ------
 .../WelcomePageSidebar/WelcomePageSidebar.tsx |  53 ---
 .../WelcomePageActivities.tsx                 | 106 -----
 .../WelcomePageActivities/activityMessages.ts |  51 ---
 .../components/WelcomePageActivities/index.ts |   1 -
 .../useWelcomePageActivities.tsx              |  25 --
 .../components/WelcomePageAnalyticsCard.tsx   |  37 --
 .../WelcomePageSalesAnalytics.tsx             |  30 --
 .../WelcomePageSalesAnalytics/index.ts        |   1 -
 .../useWelcomePageSalesAnalytics.ts           |  28 --
 .../WelcomePageStocksAnalytics.tsx            |  28 --
 .../WelcomePageStocksAnalytics/index.ts       |   1 -
 .../useWelcomePageStocksAnalytics.ts          |  24 --
 .../WelcomePageSidebarContextProvider.tsx     |  36 --
 .../context/welcomePageSidebarContext.ts      |  24 --
 src/welcomePage/WelcomePageSidebar/index.ts   |   1 -
 .../WelcomePageSidebar/messages.ts            |  12 -
 .../WelcomePageInfoTile.tsx                   |  44 --
 .../WelcomePageTilesContainer.tsx             |  32 --
 .../WelcomePageTilesContainer/index.ts        |   1 -
 .../WelcomePageTilesContainer/tileData.tsx    | 231 -----------
 src/welcomePage/WelcomePageTitle.tsx          |  21 -
 src/welcomePage/fixtures.ts                   |  22 -
 src/welcomePage/index.ts                      |   1 -
 src/welcomePage/mutations.ts                  |  11 -
 src/welcomePage/queries.ts                    |  33 --
 76 files changed, 566 insertions(+), 3688 deletions(-)
 create mode 100644 src/extensions/components/IframePost/IframePost.tsx
 create mode 100644 src/home/HomePage.tsx
 create mode 100644 src/home/HomeWidgetTabs.tsx
 create mode 100644 src/home/HomeWidgetView.tsx
 create mode 100644 src/home/filterHomeExtensions.test.ts
 create mode 100644 src/home/filterHomeExtensions.ts
 create mode 100644 src/home/urls.ts
 delete mode 100644 src/welcomePage/WelcomePage.tsx
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.test.tsx
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.tsx
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/components/WelcomePageCheckGraphQLButton.tsx
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/components/WelcomePageCreateProductButton.tsx
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/components/WelcomePageFakeDisabledButton.tsx
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/components/WelcomePageInviteStaffButton.tsx
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/components/WelcomePageOnboardingAccordion.tsx
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/components/WelcomePageOrdersButton.tsx
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/components/WelcomePageWebhooksButton.tsx
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/components/type.ts
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/hooks/useNewUserCheck.test.ts
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/hooks/useNewUserCheck.ts
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/hooks/useOnboardingData.tsx
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/index.ts
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/mocks.ts
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/OnboardingContext.tsx
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/index.ts
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/initialOnboardingState.ts
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/types.ts
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/useExpandedOnboardingId.test.ts
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/useExpandedOnboardingId.ts
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/useOnboardingStorage.test.ts
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/useOnboardingStorage.ts
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/utils.test.ts
 delete mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/utils.ts
 delete mode 100644 src/welcomePage/WelcomePageSidebar/WelcmePageSidebar.test.tsx
 delete mode 100644 src/welcomePage/WelcomePageSidebar/WelcomePageSidebar.tsx
 delete mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/WelcomePageActivities.tsx
 delete mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/activityMessages.ts
 delete mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/index.ts
 delete mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/useWelcomePageActivities.tsx
 delete mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageAnalyticsCard.tsx
 delete mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/WelcomePageSalesAnalytics.tsx
 delete mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/index.ts
 delete mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/useWelcomePageSalesAnalytics.ts
 delete mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/WelcomePageStocksAnalytics.tsx
 delete mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/index.ts
 delete mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/useWelcomePageStocksAnalytics.ts
 delete mode 100644 src/welcomePage/WelcomePageSidebar/context/WelcomePageSidebarContextProvider.tsx
 delete mode 100644 src/welcomePage/WelcomePageSidebar/context/welcomePageSidebarContext.ts
 delete mode 100644 src/welcomePage/WelcomePageSidebar/index.ts
 delete mode 100644 src/welcomePage/WelcomePageSidebar/messages.ts
 delete mode 100644 src/welcomePage/WelcomePageTilesContainer/WelcomePageInfoTile.tsx
 delete mode 100644 src/welcomePage/WelcomePageTilesContainer/WelcomePageTilesContainer.tsx
 delete mode 100644 src/welcomePage/WelcomePageTilesContainer/index.ts
 delete mode 100644 src/welcomePage/WelcomePageTilesContainer/tileData.tsx
 delete mode 100644 src/welcomePage/WelcomePageTitle.tsx
 delete mode 100644 src/welcomePage/fixtures.ts
 delete mode 100644 src/welcomePage/index.ts
 delete mode 100644 src/welcomePage/mutations.ts
 delete mode 100644 src/welcomePage/queries.ts

diff --git a/src/components/DevModePanel/DevModePanel.tsx b/src/components/DevModePanel/DevModePanel.tsx
index 9b15ffc516f..30640e8dbd6 100644
--- a/src/components/DevModePanel/DevModePanel.tsx
+++ b/src/components/DevModePanel/DevModePanel.tsx
@@ -1,7 +1,6 @@
 // @ts-strict-ignore
 import { useDashboardTheme } from "@dashboard/components/GraphiQL/styles";
 import { DashboardModal } from "@dashboard/components/Modal";
-import { useOnboarding } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
 import { type FetcherOpts, type FetcherParams } from "@graphiql/toolkit";
 import { useIntl } from "react-intl";
 
@@ -16,16 +15,11 @@ export const DevModePanel = () => {
   const intl = useIntl();
   const subtitle = useContextualLink("dev_panel");
   const { rootStyle } = useDashboardTheme();
-  const { markOnboardingStepAsCompleted } = useOnboarding();
   const { isDevModeVisible, variables, devModeContent, setDevModeVisibility } = useDevModeContext();
   const fetcher = async (graphQLParams: FetcherParams, opts: FetcherOpts) => {
-    if (graphQLParams.operationName !== "IntrospectionQuery") {
-      markOnboardingStepAsCompleted("graphql-playground");
-    }
-
     const baseFetcher = getFetcher(opts);
 
-    const result = await baseFetcher(graphQLParams, opts); // Call the base fetcher
+    const result = await baseFetcher(graphQLParams, opts);
 
     return result;
   };
diff --git a/src/components/Sidebar/menu/utils.test.ts b/src/components/Sidebar/menu/utils.test.ts
index 35f9385ab6d..c9c04b049ad 100644
--- a/src/components/Sidebar/menu/utils.test.ts
+++ b/src/components/Sidebar/menu/utils.test.ts
@@ -275,6 +275,7 @@ describe("getMenuItemExtension", () => {
     DRAFT_ORDER_DETAILS_WIDGETS: [],
     GIFT_CARD_DETAILS_WIDGETS: [],
     TRANSLATIONS_MORE_ACTIONS: [],
+    HOMEPAGE_WIDGETS: [],
   };
 
   const emptyExtensionsRecord: Record<AllAppExtensionMounts, Extension[]> = {
@@ -328,6 +329,7 @@ describe("getMenuItemExtension", () => {
     DRAFT_ORDER_DETAILS_WIDGETS: [],
     GIFT_CARD_DETAILS_WIDGETS: [],
     TRANSLATIONS_MORE_ACTIONS: [],
+    HOMEPAGE_WIDGETS: [],
   };
 
   it("should return the corresponding Extension object when a menu item ID represents a registered extension", () => {
diff --git a/src/extensions/components/AppWidgets/AppWidgets.tsx b/src/extensions/components/AppWidgets/AppWidgets.tsx
index 6d1de0398d8..2da062b0479 100644
--- a/src/extensions/components/AppWidgets/AppWidgets.tsx
+++ b/src/extensions/components/AppWidgets/AppWidgets.tsx
@@ -1,7 +1,8 @@
 import { DashboardCard } from "@dashboard/components/Card";
 import Link from "@dashboard/components/Link";
-import { APP_VERSION, getAbsoluteApiUrl } from "@dashboard/config";
+import { APP_VERSION } from "@dashboard/config";
 import { AppAvatar } from "@dashboard/extensions/components/AppAvatar/AppAvatar";
+import { IframePost } from "@dashboard/extensions/components/IframePost/IframePost";
 import { appExtensionManifestOptionsSchema } from "@dashboard/extensions/domain/app-extension-manifest-options";
 import { isUrlAbsolute } from "@dashboard/extensions/isUrlAbsolute";
 import { extensionActions } from "@dashboard/extensions/messages";
@@ -10,9 +11,9 @@ import { type AppDetailsUrlMountQueryParams, ExtensionsUrls } from "@dashboard/e
 import { AppFrame } from "@dashboard/extensions/views/ViewManifestExtension/components/AppFrame/AppFrame";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { type ThemeType } from "@saleor/app-sdk/app-bridge";
-import { Box, Skeleton, Text } from "@saleor/macaw-ui-next";
+import { Box, Text } from "@saleor/macaw-ui-next";
 import { ExternalLink } from "lucide-react";
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
 import { useIntl } from "react-intl";
 
 type AppWidgetsProps = {
@@ -20,96 +21,9 @@ type AppWidgetsProps = {
   params: AppDetailsUrlMountQueryParams;
 };
 
-const hiddenStyle = { visibility: "hidden" } as const;
-
 // TODO We will add size negotiations after render
 const defaultIframeSize = 200;
 
-/**
- * Renders a form and iframe, the form is automatically submitted with POST action and <iframe> content is replaced
- */
-const IframePost = ({
-  extensionId,
-  extensionUrl,
-  appId,
-  accessToken,
-  params,
-}: {
-  extensionUrl: string;
-  extensionId: string;
-  accessToken: string;
-  appId: string;
-  params?: AppDetailsUrlMountQueryParams;
-}) => {
-  const formRef = useRef<HTMLFormElement | null>(null);
-  const iframeRef = useRef<HTMLFormElement | null>(null);
-  const loadingRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    if (formRef.current) {
-      formRef.current.submit();
-    }
-
-    if (iframeRef.current && loadingRef.current) {
-      const iframe = iframeRef.current;
-      const loading = loadingRef.current;
-
-      const onload = () => {
-        if (loading) {
-          loading.style.display = "none";
-        }
-
-        if (iframe) {
-          iframe.style.visibility = "visible";
-        }
-      };
-
-      iframe.addEventListener("load", onload);
-
-      return () => {
-        if (iframe) {
-          iframe.removeEventListener("load", onload);
-        }
-      };
-    }
-  }, []);
-
-  /**
-   * This form is rendered locally, but somewhere above there is another form. Since this is hidden, it is not visible to the user,
-   * but under the hood browser is changing the DOM
-   *
-   * TODO: We should either render form in JS directly in <body> directly or change the tree
-   */
-  return (
-    <Box>
-      <form ref={formRef} action={extensionUrl} method="POST" target={`ext-frame-${extensionId}`}>
-        <input type="hidden" name="saleorApiUrl" value={getAbsoluteApiUrl()} />
-        <input type="hidden" name="accessToken" value={accessToken} />
-        <input type="hidden" name="appId" value={appId} />
-        <>
-          {params &&
-            Object.entries(params).map(([key, value]) => (
-              <input type="hidden" key={key} name={key} value={value} />
-            ))}
-        </>
-      </form>
-      <Box ref={loadingRef} width={"100%"} __height={defaultIframeSize}>
-        <Skeleton __height={defaultIframeSize} />
-      </Box>
-      <Box
-        style={hiddenStyle}
-        ref={iframeRef}
-        as="iframe"
-        borderWidth={0}
-        __height={defaultIframeSize}
-        sandbox="allow-same-origin allow-forms allow-scripts allow-downloads"
-        name={`ext-frame-${extensionId}`}
-        width={"100%"}
-      />
-    </Box>
-  );
-};
-
 export const AppWidgets = ({ extensions, params }: AppWidgetsProps) => {
   const navigate = useNavigator();
   const themeRef = useRef<ThemeType>();
diff --git a/src/extensions/components/IframePost/IframePost.tsx b/src/extensions/components/IframePost/IframePost.tsx
new file mode 100644
index 00000000000..e3ce478f807
--- /dev/null
+++ b/src/extensions/components/IframePost/IframePost.tsx
@@ -0,0 +1,83 @@
+import { getAbsoluteApiUrl } from "@dashboard/config";
+import { type AppDetailsUrlMountQueryParams } from "@dashboard/extensions/urls";
+import { Box, Skeleton } from "@saleor/macaw-ui-next";
+import { type CSSProperties, useEffect, useRef } from "react";
+
+const hiddenStyle: CSSProperties = { visibility: "hidden" };
+
+interface IframePostProps {
+  extensionId: string;
+  extensionUrl: string;
+  appId: string;
+  accessToken: string;
+  params?: AppDetailsUrlMountQueryParams;
+  height?: number | string;
+}
+
+/**
+ * Renders a hidden form which auto-submits on mount with POST so the iframe
+ * receives credentials in the body instead of the URL.
+ */
+export const IframePost = ({
+  extensionId,
+  extensionUrl,
+  appId,
+  accessToken,
+  params,
+  height = 200,
+}: IframePostProps) => {
+  const formRef = useRef<HTMLFormElement | null>(null);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const loadingRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (formRef.current) {
+      formRef.current.submit();
+    }
+
+    const iframe = iframeRef.current;
+    const loading = loadingRef.current;
+
+    if (!iframe || !loading) {
+      return;
+    }
+
+    const onload = () => {
+      loading.style.display = "none";
+      iframe.style.visibility = "visible";
+    };
+
+    iframe.addEventListener("load", onload);
+
+    return () => {
+      iframe.removeEventListener("load", onload);
+    };
+  }, []);
+
+  return (
+    <Box width="100%" __height={height as number | string}>
+      <form ref={formRef} action={extensionUrl} method="POST" target={`ext-frame-${extensionId}`}>
+        <input type="hidden" name="saleorApiUrl" value={getAbsoluteApiUrl()} />
+        <input type="hidden" name="accessToken" value={accessToken} />
+        <input type="hidden" name="appId" value={appId} />
+        {params &&
+          Object.entries(params).map(([key, value]) => (
+            <input type="hidden" key={key} name={key} value={value} />
+          ))}
+      </form>
+      <Box ref={loadingRef} width="100%" __height={height as number | string}>
+        <Skeleton __height={height as number | string} />
+      </Box>
+      <Box
+        style={hiddenStyle}
+        ref={iframeRef}
+        as="iframe"
+        borderWidth={0}
+        __height={height as number | string}
+        sandbox="allow-same-origin allow-forms allow-scripts allow-downloads"
+        name={`ext-frame-${extensionId}`}
+        width="100%"
+      />
+    </Box>
+  );
+};
diff --git a/src/extensions/domain/app-extension-manifest-available-mounts.ts b/src/extensions/domain/app-extension-manifest-available-mounts.ts
index 9057145e6d2..996bb7b870d 100644
--- a/src/extensions/domain/app-extension-manifest-available-mounts.ts
+++ b/src/extensions/domain/app-extension-manifest-available-mounts.ts
@@ -87,6 +87,8 @@ const PAGE_TYPE_MOUNTS = [
 
 const TRANSLATIONS_MOUNTS = ["TRANSLATIONS_MORE_ACTIONS"] as const;
 
+const HOMEPAGE_MOUNTS = ["HOMEPAGE_WIDGETS"] as const;
+
 // Create a const array with all mounts to preserve literal types
 const ALL_MOUNTS_ARRAY = [
   ...CATEGORY_MOUNTS,
@@ -94,6 +96,7 @@ const ALL_MOUNTS_ARRAY = [
   ...CUSTOMER_MOUNTS,
   ...DISCOUNT_MOUNTS,
   ...GIFT_CARD_MOUNTS,
+  ...HOMEPAGE_MOUNTS,
   ...MENU_MOUNTS,
   ...NAVIGATION_MOUNTS,
   ...ORDER_MOUNTS,
@@ -118,4 +121,5 @@ export const WIDGET_AVAILABLE_MOUNTS = [
   "GIFT_CARD_DETAILS_WIDGETS",
   "CUSTOMER_DETAILS_WIDGETS",
   "COLLECTION_DETAILS_WIDGETS",
+  "HOMEPAGE_WIDGETS",
 ] as const;
diff --git a/src/extensions/domain/app-extension-manifest-options.test.ts b/src/extensions/domain/app-extension-manifest-options.test.ts
index 91fb8e4ed91..1df901779bd 100644
--- a/src/extensions/domain/app-extension-manifest-options.test.ts
+++ b/src/extensions/domain/app-extension-manifest-options.test.ts
@@ -240,6 +240,90 @@ describe("App Extension Manifest Options Schema", () => {
     });
   });
 
+  describe("homeWidget", () => {
+    it("should accept valid homeWidget with explicit fields", () => {
+      // Arrange
+      const validData = {
+        homeWidget: {
+          method: "GET",
+          fullscreen: true,
+        },
+      };
+
+      // Act
+      const result = appExtensionManifestOptionsSchema.safeParse(validData);
+
+      // Assert
+      expect(result.success).toBe(true);
+
+      if (result.success) {
+        expect(result.data).toEqual(validData);
+      }
+    });
+
+    it("should apply defaults (method=POST, fullscreen=true) when fields omitted", () => {
+      // Arrange
+      const validData = {
+        homeWidget: {},
+      };
+
+      // Act
+      const result = appExtensionManifestOptionsSchema.safeParse(validData);
+
+      // Assert
+      expect(result.success).toBe(true);
+
+      if (result.success) {
+        expect(result.data.homeWidget).toEqual({
+          method: "POST",
+          fullscreen: true,
+        });
+      }
+    });
+
+    it("should reject homeWidget with invalid method", () => {
+      // Arrange
+      const invalidData = {
+        homeWidget: {
+          method: "PATCH",
+        },
+      };
+
+      // Act
+      const result = appExtensionManifestOptionsSchema.safeParse(invalidData);
+
+      // Assert
+      expect(result.success).toBe(false);
+
+      if (!result.success) {
+        expect(result.error.issues[0].message).toBe("Method must be either GET or POST");
+      }
+    });
+
+    it("should allow homeWidget to coexist with widgetTarget", () => {
+      // Arrange
+      const validData = {
+        widgetTarget: {
+          method: "POST",
+        },
+        homeWidget: {
+          method: "GET",
+          fullscreen: false,
+        },
+      };
+
+      // Act
+      const result = appExtensionManifestOptionsSchema.safeParse(validData);
+
+      // Assert
+      expect(result.success).toBe(true);
+
+      if (result.success) {
+        expect(result.data).toEqual(validData);
+      }
+    });
+  });
+
   describe("Edge cases", () => {
     it("should reject null values", () => {
       // Arrange
diff --git a/src/extensions/domain/app-extension-manifest-options.ts b/src/extensions/domain/app-extension-manifest-options.ts
index 0bd1c54f424..51704d28c1e 100644
--- a/src/extensions/domain/app-extension-manifest-options.ts
+++ b/src/extensions/domain/app-extension-manifest-options.ts
@@ -12,10 +12,16 @@ const widgetTargetOptionsSchema = z.object({
   method: httpMethodSchema.optional().nullable(),
 });
 
+const homeWidgetOptionsSchema = z.object({
+  method: z.enum(["GET", "POST"], { message: "Method must be either GET or POST" }).default("POST"),
+  fullscreen: z.boolean().default(true),
+});
+
 export const appExtensionManifestOptionsSchema = z
   .object({
     newTabTarget: newTabTargetOptionsSchema.optional().nullable(),
     widgetTarget: widgetTargetOptionsSchema.optional().nullable(),
+    homeWidget: homeWidgetOptionsSchema.optional().nullable(),
   })
   .refine(
     data => {
diff --git a/src/extensions/domain/app-extension-manifest.test.ts b/src/extensions/domain/app-extension-manifest.test.ts
index 2c4d1754fcd..1f6b459430e 100644
--- a/src/extensions/domain/app-extension-manifest.test.ts
+++ b/src/extensions/domain/app-extension-manifest.test.ts
@@ -739,6 +739,59 @@ describe("App Extension Manifest Schema", () => {
       expect(result.success).toBe(false);
     });
 
+    it("should accept HOMEPAGE_WIDGETS target with homeWidget options", () => {
+      // Arrange
+      const validData: AppExtensionManifest = {
+        label: "Home Widget",
+        url: "https://example.com/home",
+        mountName: "HOMEPAGE_WIDGETS",
+        targetName: "WIDGET" as const,
+        permissions: [],
+        options: {
+          homeWidget: {
+            method: "POST" as const,
+            fullscreen: true,
+          },
+        },
+      };
+
+      // Act
+      const result = appExtensionManifest.safeParse(validData);
+
+      // Assert
+      expect(result.success).toBe(true);
+    });
+
+    it("should reject homeWidget options with non-HOMEPAGE_WIDGETS mount", () => {
+      // Arrange
+      const invalidData = {
+        label: "Home Widget",
+        url: "https://example.com/home",
+        mountName: "PRODUCT_DETAILS_WIDGETS",
+        targetName: "WIDGET" as const,
+        options: {
+          homeWidget: {
+            method: "POST" as const,
+            fullscreen: true,
+          },
+        },
+      };
+
+      // Act
+      const result = appExtensionManifest.safeParse(invalidData);
+
+      // Assert
+      expect(result.success).toBe(false);
+
+      if (!result.success) {
+        expect(
+          result.error.issues.some(issue =>
+            issue.message.includes("homeWidget options can only be set on HOMEPAGE_WIDGETS mount"),
+          ),
+        ).toBe(true);
+      }
+    });
+
     it("should reject manifest with multiple validation errors", () => {
       // Arrange
       const invalidData = {
diff --git a/src/extensions/domain/app-extension-manifest.ts b/src/extensions/domain/app-extension-manifest.ts
index 3a13c79bb5e..91fa0d82dbb 100644
--- a/src/extensions/domain/app-extension-manifest.ts
+++ b/src/extensions/domain/app-extension-manifest.ts
@@ -73,6 +73,19 @@ export const appExtensionManifest = z
     {
       message: `APP_PAGE type of extension must start with "/"`,
     },
+  )
+  .refine(
+    data => {
+      // homeWidget options can only be set when mount is HOMEPAGE_WIDGETS
+      if (data.options?.homeWidget && data.mountName !== "HOMEPAGE_WIDGETS") {
+        return false;
+      }
+
+      return true;
+    },
+    {
+      message: "homeWidget options can only be set on HOMEPAGE_WIDGETS mount",
+    },
   );
 
 export type AppExtensionManifest = z.infer<typeof appExtensionManifest>;
diff --git a/src/extensions/views/InstalledExtensions/InstalledExtensions.test.tsx b/src/extensions/views/InstalledExtensions/InstalledExtensions.test.tsx
index 6dbfa990672..b1071e53631 100644
--- a/src/extensions/views/InstalledExtensions/InstalledExtensions.test.tsx
+++ b/src/extensions/views/InstalledExtensions/InstalledExtensions.test.tsx
@@ -5,7 +5,6 @@ import { useInstalledExtensionsFilter } from "./hooks/useInstalledExtensionsFilt
 import { usePendingInstallation } from "./hooks/usePendingInstallation";
 import { InstalledExtensions, type InstalledExtensionsProps } from "./InstalledExtensions";
 
-const mockMarkOnboardingStepAsCompleted = jest.fn();
 const mockHandleRemoveInProgress = jest.fn();
 const mockCloseModal = jest.fn();
 const mockOpenModal = jest.fn();
@@ -20,13 +19,6 @@ const mockPendingInstallations = [
   { id: "pending1", name: "Pending App 1", manifestUrl: "pendingUrl1" },
 ];
 
-jest.mock("@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext", () => ({
-  useOnboarding: () => ({
-    markOnboardingStepAsCompleted: mockMarkOnboardingStepAsCompleted,
-    onboardingState: { stepsCompleted: [] },
-  }),
-}));
-
 jest.mock("@dashboard/utils/handlers/dialogActionHandlers", () => ({
   __esModule: true,
   default: () => [mockOpenModal, mockCloseModal],
@@ -85,14 +77,6 @@ describe("InstalledExtensions", () => {
     }));
   });
 
-  it("marks onboarding step as completed on mount", () => {
-    // Arrange & Act
-    render(<InstalledExtensions {...defaultProps} />);
-
-    // Assert
-    expect(mockMarkOnboardingStepAsCompleted).toHaveBeenCalledWith("view-extensions");
-  });
-
   it("displays installed and pending extensions in the list initially", () => {
     // Arrange & Act
     render(<InstalledExtensions {...defaultProps} />);
diff --git a/src/extensions/views/InstalledExtensions/InstalledExtensions.tsx b/src/extensions/views/InstalledExtensions/InstalledExtensions.tsx
index 31740e82009..c5278014cce 100644
--- a/src/extensions/views/InstalledExtensions/InstalledExtensions.tsx
+++ b/src/extensions/views/InstalledExtensions/InstalledExtensions.tsx
@@ -15,9 +15,8 @@ import { useHasManagedAppsPermission } from "@dashboard/hooks/useHasManagedAppsP
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { useNotifier } from "@dashboard/hooks/useNotifier";
 import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
-import { useOnboarding } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
 import { Box, Text } from "@saleor/macaw-ui-next";
-import { useCallback, useEffect } from "react";
+import { useCallback } from "react";
 import { useIntl } from "react-intl";
 
 import { AddExtensionDropdown } from "./components/AddExtensionDropdown/AddExtensionDropdown";
@@ -35,13 +34,8 @@ export const InstalledExtensions = ({ params }: InstalledExtensionsProps) => {
   const intl = useIntl();
   const navigate = useNavigator();
   const { hasManagedAppsPermission } = useHasManagedAppsPermission();
-  const { markOnboardingStepAsCompleted } = useOnboarding();
   const subtitle = useContextualLink("extensions");
 
-  useEffect(() => {
-    markOnboardingStepAsCompleted("view-extensions");
-  }, [markOnboardingStepAsCompleted]);
-
   const [openModal, closeModal] = createDialogActionHandlers<
     ExtensionsListUrlDialog,
     ExtensionsListUrlQueryParams
diff --git a/src/fragments/orders.ts b/src/fragments/orders.ts
index d520f0def74..763e6f3ab47 100644
--- a/src/fragments/orders.ts
+++ b/src/fragments/orders.ts
@@ -915,16 +915,3 @@ export const fragmentOrderDetailsGrantRefund = gql`
     }
   }
 `;
-
-export const fragmentActivities = gql`
-  fragment Activities on OrderEvent {
-    date
-    email
-    message
-    orderNumber
-    type
-    user {
-      email
-    }
-  }
-`;
diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts
index 036650f69d1..68934aa90e3 100644
--- a/src/graphql/hooks.generated.ts
+++ b/src/graphql/hooks.generated.ts
@@ -2529,18 +2529,6 @@ ${OrderFulfillmentGrantRefundFragmentDoc}
 ${MoneyFragmentDoc}
 ${OrderDetailsGrantedRefundFragmentDoc}
 ${TransactionItemFragmentDoc}`;
-export const ActivitiesFragmentDoc = gql`
-    fragment Activities on OrderEvent {
-  date
-  email
-  message
-  orderNumber
-  type
-  user {
-    email
-  }
-}
-    `;
 export const PageTypeFragmentDoc = gql`
     fragment PageType on PageType {
   id
@@ -21472,156 +21460,4 @@ export function useWarehousesCountLazyQuery(baseOptions?: ApolloReactHooks.LazyQ
         }
 export type WarehousesCountQueryHookResult = ReturnType<typeof useWarehousesCountQuery>;
 export type WarehousesCountLazyQueryHookResult = ReturnType<typeof useWarehousesCountLazyQuery>;
-export type WarehousesCountQueryResult = Apollo.QueryResult<Types.WarehousesCountQuery, Types.WarehousesCountQueryVariables>;
-export const SaveOnBoardingStateDocument = gql`
-    mutation SaveOnBoardingState($id: ID!, $input: [MetadataInput!]!) {
-  updateMetadata(id: $id, input: $input) {
-    errors {
-      ...MetadataError
-    }
-  }
-}
-    ${MetadataErrorFragmentDoc}`;
-export type SaveOnBoardingStateMutationFn = Apollo.MutationFunction<Types.SaveOnBoardingStateMutation, Types.SaveOnBoardingStateMutationVariables>;
-
-/**
- * __useSaveOnBoardingStateMutation__
- *
- * To run a mutation, you first call `useSaveOnBoardingStateMutation` within a React component and pass it any options that fit your needs.
- * When your component renders, `useSaveOnBoardingStateMutation` returns a tuple that includes:
- * - A mutate function that you can call at any time to execute the mutation
- * - An object with fields that represent the current status of the mutation's execution
- *
- * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
- *
- * @example
- * const [saveOnBoardingStateMutation, { data, loading, error }] = useSaveOnBoardingStateMutation({
- *   variables: {
- *      id: // value for 'id'
- *      input: // value for 'input'
- *   },
- * });
- */
-export function useSaveOnBoardingStateMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.SaveOnBoardingStateMutation, Types.SaveOnBoardingStateMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return ApolloReactHooks.useMutation<Types.SaveOnBoardingStateMutation, Types.SaveOnBoardingStateMutationVariables>(SaveOnBoardingStateDocument, options);
-      }
-export type SaveOnBoardingStateMutationHookResult = ReturnType<typeof useSaveOnBoardingStateMutation>;
-export type SaveOnBoardingStateMutationResult = Apollo.MutationResult<Types.SaveOnBoardingStateMutation>;
-export type SaveOnBoardingStateMutationOptions = Apollo.BaseMutationOptions<Types.SaveOnBoardingStateMutation, Types.SaveOnBoardingStateMutationVariables>;
-export const WelcomePageActivitiesDocument = gql`
-    query WelcomePageActivities($hasPermissionToManageOrders: Boolean!) {
-  activities: homepageEvents(last: 10) @include(if: $hasPermissionToManageOrders) {
-    edges {
-      node {
-        ...Activities
-      }
-    }
-  }
-}
-    ${ActivitiesFragmentDoc}`;
-
-/**
- * __useWelcomePageActivitiesQuery__
- *
- * To run a query within a React component, call `useWelcomePageActivitiesQuery` and pass it any options that fit your needs.
- * When your component renders, `useWelcomePageActivitiesQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useWelcomePageActivitiesQuery({
- *   variables: {
- *      hasPermissionToManageOrders: // value for 'hasPermissionToManageOrders'
- *   },
- * });
- */
-export function useWelcomePageActivitiesQuery(baseOptions: ApolloReactHooks.QueryHookOptions<Types.WelcomePageActivitiesQuery, Types.WelcomePageActivitiesQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return ApolloReactHooks.useQuery<Types.WelcomePageActivitiesQuery, Types.WelcomePageActivitiesQueryVariables>(WelcomePageActivitiesDocument, options);
-      }
-export function useWelcomePageActivitiesLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.WelcomePageActivitiesQuery, Types.WelcomePageActivitiesQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return ApolloReactHooks.useLazyQuery<Types.WelcomePageActivitiesQuery, Types.WelcomePageActivitiesQueryVariables>(WelcomePageActivitiesDocument, options);
-        }
-export type WelcomePageActivitiesQueryHookResult = ReturnType<typeof useWelcomePageActivitiesQuery>;
-export type WelcomePageActivitiesLazyQueryHookResult = ReturnType<typeof useWelcomePageActivitiesLazyQuery>;
-export type WelcomePageActivitiesQueryResult = Apollo.QueryResult<Types.WelcomePageActivitiesQuery, Types.WelcomePageActivitiesQueryVariables>;
-export const WelcomePageAnalyticsDocument = gql`
-    query WelcomePageAnalytics($channel: String!, $hasPermissionToManageOrders: Boolean!) {
-  salesToday: ordersTotal(period: TODAY, channel: $channel) @include(if: $hasPermissionToManageOrders) {
-    gross {
-      amount
-      currency
-    }
-  }
-}
-    `;
-
-/**
- * __useWelcomePageAnalyticsQuery__
- *
- * To run a query within a React component, call `useWelcomePageAnalyticsQuery` and pass it any options that fit your needs.
- * When your component renders, `useWelcomePageAnalyticsQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useWelcomePageAnalyticsQuery({
- *   variables: {
- *      channel: // value for 'channel'
- *      hasPermissionToManageOrders: // value for 'hasPermissionToManageOrders'
- *   },
- * });
- */
-export function useWelcomePageAnalyticsQuery(baseOptions: ApolloReactHooks.QueryHookOptions<Types.WelcomePageAnalyticsQuery, Types.WelcomePageAnalyticsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return ApolloReactHooks.useQuery<Types.WelcomePageAnalyticsQuery, Types.WelcomePageAnalyticsQueryVariables>(WelcomePageAnalyticsDocument, options);
-      }
-export function useWelcomePageAnalyticsLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.WelcomePageAnalyticsQuery, Types.WelcomePageAnalyticsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return ApolloReactHooks.useLazyQuery<Types.WelcomePageAnalyticsQuery, Types.WelcomePageAnalyticsQueryVariables>(WelcomePageAnalyticsDocument, options);
-        }
-export type WelcomePageAnalyticsQueryHookResult = ReturnType<typeof useWelcomePageAnalyticsQuery>;
-export type WelcomePageAnalyticsLazyQueryHookResult = ReturnType<typeof useWelcomePageAnalyticsLazyQuery>;
-export type WelcomePageAnalyticsQueryResult = Apollo.QueryResult<Types.WelcomePageAnalyticsQuery, Types.WelcomePageAnalyticsQueryVariables>;
-export const WelcomePageNotificationsDocument = gql`
-    query welcomePageNotifications($channel: String!) {
-  productsOutOfStock: products(
-    filter: {stockAvailability: OUT_OF_STOCK}
-    channel: $channel
-  ) {
-    totalCount
-  }
-}
-    `;
-
-/**
- * __useWelcomePageNotificationsQuery__
- *
- * To run a query within a React component, call `useWelcomePageNotificationsQuery` and pass it any options that fit your needs.
- * When your component renders, `useWelcomePageNotificationsQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useWelcomePageNotificationsQuery({
- *   variables: {
- *      channel: // value for 'channel'
- *   },
- * });
- */
-export function useWelcomePageNotificationsQuery(baseOptions: ApolloReactHooks.QueryHookOptions<Types.WelcomePageNotificationsQuery, Types.WelcomePageNotificationsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return ApolloReactHooks.useQuery<Types.WelcomePageNotificationsQuery, Types.WelcomePageNotificationsQueryVariables>(WelcomePageNotificationsDocument, options);
-      }
-export function useWelcomePageNotificationsLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.WelcomePageNotificationsQuery, Types.WelcomePageNotificationsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return ApolloReactHooks.useLazyQuery<Types.WelcomePageNotificationsQuery, Types.WelcomePageNotificationsQueryVariables>(WelcomePageNotificationsDocument, options);
-        }
-export type WelcomePageNotificationsQueryHookResult = ReturnType<typeof useWelcomePageNotificationsQuery>;
-export type WelcomePageNotificationsLazyQueryHookResult = ReturnType<typeof useWelcomePageNotificationsLazyQuery>;
-export type WelcomePageNotificationsQueryResult = Apollo.QueryResult<Types.WelcomePageNotificationsQuery, Types.WelcomePageNotificationsQueryVariables>;
\ No newline at end of file
+export type WarehousesCountQueryResult = Apollo.QueryResult<Types.WarehousesCountQuery, Types.WarehousesCountQueryVariables>;
\ No newline at end of file
diff --git a/src/graphql/types.generated.ts b/src/graphql/types.generated.ts
index 7e69768812b..5a217d6e94c 100644
--- a/src/graphql/types.generated.ts
+++ b/src/graphql/types.generated.ts
@@ -11697,8 +11697,6 @@ export type OrderFulfillmentGrantRefundFragment = { __typename: 'Fulfillment', i
 
 export type OrderDetailsGrantRefundFragment = { __typename: 'Order', id: string, number: string, lines: Array<{ __typename: 'OrderLine', id: string, productName: string, quantity: number, quantityToFulfill: number, variantName: string, thumbnail: { __typename: 'Image', url: string } | null, unitPrice: { __typename: 'TaxedMoney', gross: { __typename: 'Money', amount: number, currency: string } } }>, fulfillments: Array<{ __typename: 'Fulfillment', id: string, fulfillmentOrder: number, status: FulfillmentStatus, lines: Array<{ __typename: 'FulfillmentLine', id: string, quantity: number, orderLine: { __typename: 'OrderLine', id: string, productName: string, quantity: number, quantityToFulfill: number, variantName: string, thumbnail: { __typename: 'Image', url: string } | null, unitPrice: { __typename: 'TaxedMoney', gross: { __typename: 'Money', amount: number, currency: string } } } | null }> | null }>, shippingPrice: { __typename: 'TaxedMoney', gross: { __typename: 'Money', amount: number, currency: string } }, total: { __typename: 'TaxedMoney', gross: { __typename: 'Money', amount: number, currency: string } }, grantedRefunds: Array<{ __typename: 'OrderGrantedRefund', id: string, reason: string | null, shippingCostsIncluded: boolean, status: OrderGrantedRefundStatusEnum, reasonReference: { __typename: 'Page', id: string, title: string } | null, amount: { __typename: 'Money', amount: number, currency: string }, transaction: { __typename: 'TransactionItem', id: string } | null, lines: Array<{ __typename: 'OrderGrantedRefundLine', id: string, quantity: number, reason: string | null, orderLine: { __typename: 'OrderLine', id: string, isShippingRequired: boolean, productName: string, productSku: string | null, isGift: boolean | null, quantity: number, quantityFulfilled: number, quantityToFulfill: number, unitDiscountValue: any, unitDiscountReason: string | null, unitDiscountType: DiscountValueTypeEnum | null, allocations: Array<{ __typename: 'Allocation', id: string, quantity: number, warehouse: { __typename: 'Warehouse', id: string, name: string } }> | null, variant: { __typename: 'ProductVariant', id: string, name: string, quantityAvailable: number | null, preorder: { __typename: 'PreorderData', endDate: any | null } | null, stocks: Array<{ __typename: 'Stock', id: string, quantity: number, quantityAllocated: number, warehouse: { __typename: 'Warehouse', id: string, name: string } }> | null, product: { __typename: 'Product', id: string, isAvailableForPurchase: boolean | null } } | null, totalPrice: { __typename: 'TaxedMoney', net: { __typename: 'Money', amount: number, currency: string }, gross: { __typename: 'Money', amount: number, currency: string } }, undiscountedTotalPrice: { __typename: 'TaxedMoney', net: { __typename: 'Money', amount: number, currency: string }, gross: { __typename: 'Money', amount: number, currency: string } }, unitDiscount: { __typename: 'Money', amount: number, currency: string }, undiscountedUnitPrice: { __typename: 'TaxedMoney', currency: string, gross: { __typename: 'Money', amount: number, currency: string }, net: { __typename: 'Money', amount: number, currency: string } }, unitPrice: { __typename: 'TaxedMoney', gross: { __typename: 'Money', amount: number, currency: string }, net: { __typename: 'Money', amount: number, currency: string } }, thumbnail: { __typename: 'Image', url: string } | null, discounts: Array<{ __typename: 'OrderLineDiscount', id: string, type: OrderDiscountType, name: string | null, translatedName: string | null, valueType: DiscountValueTypeEnum, value: any, reason: string | null }> | null } }> | null }>, transactions: Array<{ __typename: 'TransactionItem', pspReference: string, externalUrl: string, createdAt: any, id: string, name: string, actions: Array<TransactionActionEnum>, createdBy: { __typename: 'App', name: string | null, brand: { __typename: 'AppBrand', logo: { __typename: 'AppBrandLogo', default: string } } | null } | { __typename: 'User' } | null, paymentMethodDetails: { __typename: 'CardPaymentMethodDetails', name: string, brand: string | null, expMonth: number | null, expYear: number | null, firstDigits: string | null, lastDigits: string | null } | { __typename: 'GiftCardPaymentMethodDetails', name: string, brand: string | null, lastChars: string | null, isSaleorGiftcard: boolean } | { __typename: 'OtherPaymentMethodDetails', name: string } | null, events: Array<{ __typename: 'TransactionEvent', externalUrl: string, id: string, pspReference: string, type: TransactionEventTypeEnum | null, message: string, createdAt: any, createdBy: { __typename: 'App', id: string, name: string | null, brand: { __typename: 'AppBrand', logo: { __typename: 'AppBrandLogo', default: string } } | null } | { __typename: 'User', id: string, email: string, firstName: string, isActive: boolean, lastName: string, avatar: { __typename: 'Image', url: string } | null } | null, amount: { __typename: 'Money', amount: number, currency: string }, reasonReference: { __typename: 'Page', id: string, title: string } | null }>, authorizedAmount: { __typename: 'Money', amount: number, currency: string }, chargedAmount: { __typename: 'Money', amount: number, currency: string }, refundedAmount: { __typename: 'Money', amount: number, currency: string }, canceledAmount: { __typename: 'Money', amount: number, currency: string }, authorizePendingAmount: { __typename: 'Money', amount: number, currency: string }, chargePendingAmount: { __typename: 'Money', amount: number, currency: string }, refundPendingAmount: { __typename: 'Money', amount: number, currency: string }, cancelPendingAmount: { __typename: 'Money', amount: number, currency: string } }> };
 
-export type ActivitiesFragment = { __typename: 'OrderEvent', date: any | null, email: string | null, message: string | null, orderNumber: string | null, type: OrderEventsEnum | null, user: { __typename: 'User', email: string } | null };
-
 export type PageInfoFragment = { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null };
 
 export type PageTypeFragment = { __typename: 'PageType', id: string, name: string, hasPages: boolean | null };
@@ -14029,33 +14027,3 @@ export type WarehousesCountQueryVariables = Exact<{ [key: string]: never; }>;
 
 
 export type WarehousesCountQuery = { __typename: 'Query', warehouses: { __typename: 'WarehouseCountableConnection', totalCount: number | null } | null };
-
-export type SaveOnBoardingStateMutationVariables = Exact<{
-  id: Scalars['ID'];
-  input: Array<MetadataInput> | MetadataInput;
-}>;
-
-
-export type SaveOnBoardingStateMutation = { __typename: 'Mutation', updateMetadata: { __typename: 'UpdateMetadata', errors: Array<{ __typename: 'MetadataError', code: MetadataErrorCode, field: string | null, message: string | null }> } | null };
-
-export type WelcomePageActivitiesQueryVariables = Exact<{
-  hasPermissionToManageOrders: Scalars['Boolean'];
-}>;
-
-
-export type WelcomePageActivitiesQuery = { __typename: 'Query', activities: { __typename: 'OrderEventCountableConnection', edges: Array<{ __typename: 'OrderEventCountableEdge', node: { __typename: 'OrderEvent', date: any | null, email: string | null, message: string | null, orderNumber: string | null, type: OrderEventsEnum | null, user: { __typename: 'User', email: string } | null } }> } | null };
-
-export type WelcomePageAnalyticsQueryVariables = Exact<{
-  channel: Scalars['String'];
-  hasPermissionToManageOrders: Scalars['Boolean'];
-}>;
-
-
-export type WelcomePageAnalyticsQuery = { __typename: 'Query', salesToday: { __typename: 'TaxedMoney', gross: { __typename: 'Money', amount: number, currency: string } } | null };
-
-export type WelcomePageNotificationsQueryVariables = Exact<{
-  channel: Scalars['String'];
-}>;
-
-
-export type WelcomePageNotificationsQuery = { __typename: 'Query', productsOutOfStock: { __typename: 'ProductCountableConnection', totalCount: number | null } | null };
diff --git a/src/home/HomePage.tsx b/src/home/HomePage.tsx
new file mode 100644
index 00000000000..f6d34ac2337
--- /dev/null
+++ b/src/home/HomePage.tsx
@@ -0,0 +1,59 @@
+import { useUser } from "@dashboard/auth/useUser";
+import { useExtensions } from "@dashboard/extensions/hooks/useExtensions";
+import { Box, Text } from "@saleor/macaw-ui-next";
+import { useParams } from "react-router";
+import { Redirect } from "react-router-dom";
+
+import { filterHomeExtensions } from "./filterHomeExtensions";
+import { HomeWidgetTabs } from "./HomeWidgetTabs";
+import { HomeWidgetView } from "./HomeWidgetView";
+import { homeWidgetUrl } from "./urls";
+
+const HOMEPAGE_MOUNT = ["HOMEPAGE_WIDGETS"] as const;
+
+export const HomePage = () => {
+  const { extensionId: rawExtensionId } = useParams<{ extensionId?: string }>();
+  const extensionId = rawExtensionId ? decodeURIComponent(rawExtensionId) : undefined;
+
+  const { user } = useUser();
+  const userPermissions = user?.userPermissions ?? [];
+
+  const { HOMEPAGE_WIDGETS: extensions } = useExtensions(HOMEPAGE_MOUNT);
+  const visibleExtensions = filterHomeExtensions(extensions, userPermissions);
+
+  if (visibleExtensions.length === 0) {
+    return (
+      <Box paddingX={8} paddingY={9}>
+        <Text size={6} fontWeight="bold">
+          Welcome
+        </Text>
+        <Box marginTop={4}>
+          <Text>Install an app that registers a HOMEPAGE_WIDGETS extension to see it here.</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  // No extension selected - redirect to first available
+  if (!extensionId) {
+    return <Redirect to={homeWidgetUrl(visibleExtensions[0].id)} />;
+  }
+
+  const activeExtension = visibleExtensions.find(extension => extension.id === extensionId);
+
+  // URL points to a missing or unauthorized extension - redirect to first available
+  if (!activeExtension) {
+    return <Redirect to={homeWidgetUrl(visibleExtensions[0].id)} />;
+  }
+
+  return (
+    <Box display="flex" flexDirection="column" height="100%">
+      <Box paddingX={6} paddingTop={4}>
+        <HomeWidgetTabs extensions={visibleExtensions} activeExtensionId={activeExtension.id} />
+      </Box>
+      <Box __flex="1" __minHeight={0}>
+        <HomeWidgetView extension={activeExtension} />
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/home/HomeWidgetTabs.tsx b/src/home/HomeWidgetTabs.tsx
new file mode 100644
index 00000000000..7667ff781a9
--- /dev/null
+++ b/src/home/HomeWidgetTabs.tsx
@@ -0,0 +1,37 @@
+import { Tab, TabContainer } from "@dashboard/components/Tab";
+import { type Extension } from "@dashboard/extensions/types";
+import useNavigator from "@dashboard/hooks/useNavigator";
+import { Box, Text } from "@saleor/macaw-ui-next";
+
+import { homeWidgetUrl } from "./urls";
+
+const HomeTab = Tab<string>("home-widget-tab");
+
+interface HomeWidgetTabsProps {
+  extensions: Extension[];
+  activeExtensionId: string | null;
+}
+
+export const HomeWidgetTabs = ({ extensions, activeExtensionId }: HomeWidgetTabsProps) => {
+  const navigate = useNavigator();
+
+  return (
+    <TabContainer>
+      {extensions.map(extension => (
+        <HomeTab
+          key={extension.id}
+          isActive={extension.id === activeExtensionId}
+          changeTab={() => navigate(homeWidgetUrl(extension.id))}
+          testId={`home-widget-tab-${extension.id}`}
+        >
+          <Box display="inline-flex" flexDirection="column">
+            <span>{extension.label}</span>
+            <Text size={1} color="default2">
+              {extension.app.name}
+            </Text>
+          </Box>
+        </HomeTab>
+      ))}
+    </TabContainer>
+  );
+};
diff --git a/src/home/HomeWidgetView.tsx b/src/home/HomeWidgetView.tsx
new file mode 100644
index 00000000000..58c0d95abc1
--- /dev/null
+++ b/src/home/HomeWidgetView.tsx
@@ -0,0 +1,55 @@
+import { borderHeight, topBarHeight } from "@dashboard/components/AppLayout/consts";
+import { APP_VERSION } from "@dashboard/config";
+import { IframePost } from "@dashboard/extensions/components/IframePost/IframePost";
+import { appExtensionManifestOptionsSchema } from "@dashboard/extensions/domain/app-extension-manifest-options";
+import { isUrlAbsolute } from "@dashboard/extensions/isUrlAbsolute";
+import { type Extension } from "@dashboard/extensions/types";
+import { AppFrame } from "@dashboard/extensions/views/ViewManifestExtension/components/AppFrame/AppFrame";
+import { Box, Text } from "@saleor/macaw-ui-next";
+
+interface HomeWidgetViewProps {
+  extension: Extension;
+}
+
+const fullscreenHeight = `calc(100vh - ${borderHeight} - ${topBarHeight})`;
+
+export const HomeWidgetView = ({ extension }: HomeWidgetViewProps) => {
+  const settings = appExtensionManifestOptionsSchema.safeParse(extension.settings);
+  const method = settings.success ? (settings.data.homeWidget?.method ?? "POST") : "POST";
+  const isAbsolute = isUrlAbsolute(extension.url);
+  const extensionUrl = isAbsolute ? extension.url : `${extension.app.appUrl ?? ""}${extension.url}`;
+
+  if (!extensionUrl) {
+    return (
+      <Box padding={6}>
+        <Text>Extension URL is not configured.</Text>
+      </Box>
+    );
+  }
+
+  if (method === "POST") {
+    return (
+      <Box position="relative" __height={fullscreenHeight} __minHeight={fullscreenHeight}>
+        <IframePost
+          appId={extension.app.id}
+          accessToken={extension.accessToken}
+          extensionId={extension.id}
+          extensionUrl={extensionUrl}
+          height="100%"
+        />
+      </Box>
+    );
+  }
+
+  return (
+    <Box position="relative" __lineHeight={0} height="100%" __minHeight={fullscreenHeight}>
+      <AppFrame
+        target="WIDGET"
+        src={extensionUrl}
+        appToken={extension.accessToken}
+        appId={extension.app.id}
+        dashboardVersion={APP_VERSION}
+      />
+    </Box>
+  );
+};
diff --git a/src/home/filterHomeExtensions.test.ts b/src/home/filterHomeExtensions.test.ts
new file mode 100644
index 00000000000..8f1da9d07d5
--- /dev/null
+++ b/src/home/filterHomeExtensions.test.ts
@@ -0,0 +1,128 @@
+import { type Extension } from "@dashboard/extensions/types";
+import { PermissionEnum, type UserPermissionFragment } from "@dashboard/graphql";
+
+import { filterHomeExtensions } from "./filterHomeExtensions";
+
+const userPermissions: UserPermissionFragment[] = [
+  { __typename: "UserPermission", code: PermissionEnum.MANAGE_PRODUCTS, name: "Manage products" },
+  { __typename: "UserPermission", code: PermissionEnum.MANAGE_ORDERS, name: "Manage orders" },
+];
+
+const buildExtension = (overrides: Partial<Extension>): Extension => ({
+  id: "ext-1",
+  app: {
+    __typename: "App",
+    id: "app-1",
+    appUrl: "https://app.example",
+    name: "App 1",
+    brand: null,
+  },
+  accessToken: "token",
+  permissions: [],
+  label: "Extension",
+  mountName: "HOMEPAGE_WIDGETS",
+  url: "https://app.example/widget",
+  open: () => undefined,
+  targetName: "WIDGET",
+  settings: null,
+  ...overrides,
+});
+
+describe("filterHomeExtensions", () => {
+  it("keeps HOMEPAGE_WIDGETS extensions with no settings (fullscreen default true)", () => {
+    // Arrange
+    const extensions = [buildExtension({})];
+
+    // Act
+    const result = filterHomeExtensions(extensions, userPermissions);
+
+    // Assert
+    expect(result).toHaveLength(1);
+  });
+
+  it("keeps HOMEPAGE_WIDGETS extensions with homeWidget.fullscreen=true", () => {
+    // Arrange
+    const extensions = [
+      buildExtension({
+        settings: { homeWidget: { fullscreen: true, method: "GET" } },
+      }),
+    ];
+
+    // Act
+    const result = filterHomeExtensions(extensions, userPermissions);
+
+    // Assert
+    expect(result).toHaveLength(1);
+  });
+
+  it("drops extensions with homeWidget.fullscreen=false", () => {
+    // Arrange
+    const extensions = [
+      buildExtension({
+        settings: { homeWidget: { fullscreen: false, method: "GET" } },
+      }),
+    ];
+
+    // Act
+    const result = filterHomeExtensions(extensions, userPermissions);
+
+    // Assert
+    expect(result).toHaveLength(0);
+  });
+
+  it("drops extensions with non-HOMEPAGE_WIDGETS mount", () => {
+    // Arrange
+    const extensions = [buildExtension({ mountName: "PRODUCT_DETAILS_WIDGETS" })];
+
+    // Act
+    const result = filterHomeExtensions(extensions, userPermissions);
+
+    // Assert
+    expect(result).toHaveLength(0);
+  });
+
+  it("drops extensions whose required permissions the user lacks", () => {
+    // Arrange
+    const extensions = [
+      buildExtension({
+        permissions: [PermissionEnum.MANAGE_USERS],
+      }),
+    ];
+
+    // Act
+    const result = filterHomeExtensions(extensions, userPermissions);
+
+    // Assert
+    expect(result).toHaveLength(0);
+  });
+
+  it("keeps extensions whose required permissions the user has", () => {
+    // Arrange
+    const extensions = [
+      buildExtension({
+        permissions: [PermissionEnum.MANAGE_PRODUCTS],
+      }),
+    ];
+
+    // Act
+    const result = filterHomeExtensions(extensions, userPermissions);
+
+    // Assert
+    expect(result).toHaveLength(1);
+  });
+
+  it("preserves input order", () => {
+    // Arrange
+    const extensions = [
+      buildExtension({ id: "a", label: "A" }),
+      buildExtension({ id: "b", label: "B" }),
+      buildExtension({ id: "c", label: "C" }),
+    ];
+
+    // Act
+    const result = filterHomeExtensions(extensions, userPermissions);
+
+    // Assert
+    expect(result.map(e => e.id)).toEqual(["a", "b", "c"]);
+  });
+});
diff --git a/src/home/filterHomeExtensions.ts b/src/home/filterHomeExtensions.ts
new file mode 100644
index 00000000000..35977f1b13f
--- /dev/null
+++ b/src/home/filterHomeExtensions.ts
@@ -0,0 +1,25 @@
+import { hasPermissions } from "@dashboard/components/RequirePermissions";
+import { appExtensionManifestOptionsSchema } from "@dashboard/extensions/domain/app-extension-manifest-options";
+import { type Extension } from "@dashboard/extensions/types";
+import { type UserPermissionFragment } from "@dashboard/graphql";
+
+export const filterHomeExtensions = (
+  extensions: Extension[],
+  userPermissions: UserPermissionFragment[],
+): Extension[] =>
+  extensions.filter(extension => {
+    if (extension.mountName !== "HOMEPAGE_WIDGETS") {
+      return false;
+    }
+
+    if (!hasPermissions(userPermissions, extension.permissions)) {
+      return false;
+    }
+
+    // fullscreen defaults to true when homeWidget is omitted or settings can't be parsed -
+    // extensions without explicit homeWidget config are still considered fullscreen home widgets
+    const settings = appExtensionManifestOptionsSchema.safeParse(extension.settings);
+    const fullscreen = settings.success ? (settings.data.homeWidget?.fullscreen ?? true) : true;
+
+    return fullscreen;
+  });
diff --git a/src/home/urls.ts b/src/home/urls.ts
new file mode 100644
index 00000000000..fd8133bd8b8
--- /dev/null
+++ b/src/home/urls.ts
@@ -0,0 +1,2 @@
+export const homeWidgetUrl = (extensionId: string) =>
+  `/home/widget/${encodeURIComponent(extensionId)}`;
diff --git a/src/index.tsx b/src/index.tsx
index d8ac5eba6c9..241e8d5b89b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,7 +13,6 @@ import { modelTypesPath } from "@dashboard/modelTypes/urls";
 import { refundsSettingsPath } from "@dashboard/refundsSettings/urls";
 import { structuresListPath } from "@dashboard/structures/urls";
 import { ThemeProvider } from "@dashboard/theme";
-import { OnboardingProvider } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
 import { ThemeProvider as LegacyThemeProvider } from "@saleor/macaw-ui";
 import { lazy, StrictMode, Suspense } from "react";
 import { createRoot } from "react-dom/client";
@@ -29,7 +28,7 @@ import SectionRoute from "./auth/components/SectionRoute";
 import { useAuthRedirection } from "./auth/hooks/useAuthRedirection";
 import { channelsSection } from "./channels/urls";
 import AppLayout from "./components/AppLayout";
-import useAppChannel, { AppChannelProvider } from "./components/AppLayout/AppChannelContext";
+import { AppChannelProvider } from "./components/AppLayout/AppChannelContext";
 import { DevModeProvider } from "./components/DevModePanel/DevModeProvider";
 import ErrorPage from "./components/ErrorPage";
 import ExitFormDialogProvider from "./components/Form/ExitFormDialogProvider";
@@ -84,7 +83,7 @@ const TaxesSection = lazy(() => import("./taxes"));
 const TranslationsSection = lazy(() => import("./translations"));
 const WarehouseSection = lazy(() => import("./warehouses"));
 const ConfigurationSection = lazy(() => import("./configuration"));
-const WelcomePage = lazy(() => import("./welcomePage").then(m => ({ default: m.WelcomePage })));
+const HomePage = lazy(() => import("./home/HomePage").then(m => ({ default: m.HomePage })));
 const RefundsSettingsRoute = lazy(() =>
   import("./refundsSettings/route").then(m => ({ default: m.RefundsSettingsRoute })),
 );
@@ -133,9 +132,7 @@ const App = (): JSX.Element => (
                                 <NavigatorSearchProvider>
                                   <SavebarRefProvider>
                                     <FeatureFlagsProviderWithUser>
-                                      <OnboardingProvider>
-                                        <Routes />
-                                      </OnboardingProvider>
+                                      <Routes />
                                     </FeatureFlagsProviderWithUser>
                                   </SavebarRefProvider>
                                 </NavigatorSearchProvider>
@@ -159,10 +156,8 @@ const Routes = () => {
   const intl = useIntl();
   const [, dispatchAppState] = useAppState();
   const { authenticated, authenticating } = useAuthRedirection();
-  const { channel } = useAppChannel(false);
-  const channelLoaded = typeof channel !== "undefined";
-  const homePageLoaded = channelLoaded && authenticated;
-  const homePageLoading = (authenticated && !channelLoaded) || authenticating;
+  const homePageLoaded = authenticated;
+  const homePageLoading = authenticating;
   const { isAppPath } = useLocationState();
 
   return (
@@ -190,7 +185,8 @@ const Routes = () => {
               <Suspense fallback={<LoginLoading />}>
                 <Switch>
                   {legacyRedirects}
-                  <SectionRoute exact path="/" component={WelcomePage} />
+                  <SectionRoute exact path="/" component={HomePage} />
+                  <SectionRoute exact path="/home/widget/:extensionId" component={HomePage} />
                   <SectionRoute
                     permissions={[
                       PermissionEnum.MANAGE_PRODUCTS,
diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx
index 9e851ee4c6e..073d39852a5 100644
--- a/src/orders/views/OrderList/OrderList.tsx
+++ b/src/orders/views/OrderList/OrderList.tsx
@@ -23,8 +23,7 @@ import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHa
 import createSortHandler from "@dashboard/utils/handlers/sortHandler";
 import { mapEdgesToItems, mapNodeToChoice } from "@dashboard/utils/maps";
 import { getSortParams } from "@dashboard/utils/sort";
-import { useOnboarding } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import { useIntl } from "react-intl";
 
 import OrderListPage from "../../components/OrderListPage/OrderListPage";
@@ -48,12 +47,6 @@ const OrderList = ({ params }: OrderListProps) => {
   const { updateListSettings, settings } = useListSettings(ListViews.ORDER_LIST);
   const { valueProvider } = useConditionalFilterContext();
 
-  const { markOnboardingStepAsCompleted } = useOnboarding();
-
-  useEffect(() => {
-    markOnboardingStepAsCompleted("explore-orders");
-  }, []);
-
   const {
     hasPresetsChanged,
     onPresetChange,
diff --git a/src/products/views/ProductCreate/ProductCreate.tsx b/src/products/views/ProductCreate/ProductCreate.tsx
index 12ef8d6538f..d914f5c8bb8 100644
--- a/src/products/views/ProductCreate/ProductCreate.tsx
+++ b/src/products/views/ProductCreate/ProductCreate.tsx
@@ -48,7 +48,6 @@ import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHa
 import createMetadataCreateHandler from "@dashboard/utils/handlers/metadataCreateHandler";
 import { mapEdgesToItems } from "@dashboard/utils/maps";
 import { warehouseAddPath } from "@dashboard/warehouses/urls";
-import { useOnboarding } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
 import { useEffect, useState } from "react";
 import { useIntl } from "react-intl";
 
@@ -64,7 +63,6 @@ const ProductCreateView = ({ params }: ProductCreateProps) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const shop = useShop();
-  const { markOnboardingStepAsCompleted } = useOnboarding();
   const intl = useIntl();
   const [productCreateComplete, setProductCreateComplete] = useState(false);
   const selectedProductTypeId = params["product-type-id"];
@@ -205,7 +203,6 @@ const ProductCreateView = ({ params }: ProductCreateProps) => {
     )(data);
 
     if (!errors?.length) {
-      markOnboardingStepAsCompleted("create-product");
       setProductCreateComplete(true);
     }
 
diff --git a/src/staff/views/StaffList/StaffList.tsx b/src/staff/views/StaffList/StaffList.tsx
index 3be462877a3..b480718c877 100644
--- a/src/staff/views/StaffList/StaffList.tsx
+++ b/src/staff/views/StaffList/StaffList.tsx
@@ -23,7 +23,6 @@ import createSortHandler from "@dashboard/utils/handlers/sortHandler";
 import { mapEdgesToItems } from "@dashboard/utils/maps";
 import { getSortParams } from "@dashboard/utils/sort";
 import { getAppMountUriForRedirect } from "@dashboard/utils/urls";
-import { useOnboarding } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
 import { useMemo } from "react";
 import { useIntl } from "react-intl";
 import urlJoin from "url-join";
@@ -50,7 +49,6 @@ const StaffList = ({ params }: StaffListProps) => {
   const notify = useNotifier();
   const { updateListSettings, settings } = useListSettings(ListViews.STAFF_MEMBERS_LIST);
   const intl = useIntl();
-  const { markOnboardingStepAsCompleted } = useOnboarding();
   const { valueProvider } = useConditionalFilterContext();
   const filters = createStaffMembersQueryVariables(valueProvider.value);
 
@@ -81,7 +79,6 @@ const StaffList = ({ params }: StaffListProps) => {
   const [addStaffMember, addStaffMemberData] = useStaffMemberAddMutation({
     onCompleted: data => {
       if (data?.staffCreate?.errors?.length === 0) {
-        markOnboardingStepAsCompleted("invite-staff");
         notify({
           status: "success",
           text: intl.formatMessage({ id: "8a7vg2", defaultMessage: "Staff member invited" }),
diff --git a/src/welcomePage/WelcomePage.tsx b/src/welcomePage/WelcomePage.tsx
deleted file mode 100644
index 0c1b0c0e68c..00000000000
--- a/src/welcomePage/WelcomePage.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useUser } from "@dashboard/auth/useUser";
-import useAppChannel from "@dashboard/components/AppLayout/AppChannelContext";
-import { hasPermissions } from "@dashboard/components/RequirePermissions";
-import { PermissionEnum } from "@dashboard/graphql";
-import { Box } from "@saleor/macaw-ui-next";
-
-import { WelcomePageOnboarding } from "./WelcomePageOnboarding";
-import { WelcomePageSidebar } from "./WelcomePageSidebar";
-import { WelcomePageTilesContainer } from "./WelcomePageTilesContainer";
-import { WelcomePageTitle } from "./WelcomePageTitle";
-
-export const WelcomePage = () => {
-  const { channel, setChannel } = useAppChannel(false);
-  const { user } = useUser();
-  const channels = user?.accessibleChannels ?? [];
-  const userPermissions = user?.userPermissions || [];
-  const hasPermissionToManageOrders = hasPermissions(userPermissions, [
-    PermissionEnum.MANAGE_ORDERS,
-  ]);
-
-  return (
-    <Box
-      display="grid"
-      gap={7}
-      gridTemplateColumns={{
-        mobile: 1,
-        tablet: 1,
-        desktop: 3,
-      }}
-      paddingX={8}
-      paddingY={6}
-      paddingTop={9}
-      __gridTemplateRows="auto 1fr"
-    >
-      <Box gridRowStart="1" __gridColumn="1/-1">
-        <WelcomePageTitle />
-      </Box>
-      <Box
-        gridColumn={{
-          mobile: "1",
-          tablet: "1",
-          desktop: "2",
-        }}
-      >
-        <WelcomePageOnboarding />
-        <WelcomePageTilesContainer />
-      </Box>
-      <Box gridColumn="1">
-        <WelcomePageSidebar
-          channel={channel}
-          setChannel={setChannel}
-          channels={channels}
-          hasPermissionToManageOrders={hasPermissionToManageOrders}
-        />
-      </Box>
-    </Box>
-  );
-};
diff --git a/src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.test.tsx b/src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.test.tsx
deleted file mode 100644
index 3102ef6be38..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.test.tsx
+++ /dev/null
@@ -1,297 +0,0 @@
-import { useUser } from "@dashboard/auth/useUser";
-import { useFlag } from "@dashboard/featureFlags";
-import { ApolloMockedProvider } from "@test/ApolloMockedProvider";
-import { act, render, screen, waitFor } from "@testing-library/react";
-import type * as React from "react";
-
-import { onboardingCompletedMock, onboardingInitState } from "./mocks";
-import { OnboardingProvider } from "./onboardingContext";
-import { useOnboardingStorage } from "./onboardingContext/useOnboardingStorage";
-import { WelcomePageOnboarding } from "./WelcomePageOnboarding";
-
-jest.mock("@dashboard/components/Router/useRouteChange", () => ({
-  useRouteChange: () => ({
-    register: jest.fn(),
-  }),
-}));
-jest.mock("@dashboard/auth/useUser");
-jest.mock("@dashboard/featureFlags", () => ({
-  useFlag: jest.fn().mockReturnValue({
-    enabled: false,
-  }),
-}));
-
-jest.mock("./onboardingContext/useOnboardingStorage");
-jest.useFakeTimers();
-jest.mock("@dashboard/components/DevModePanel/hooks", () => ({
-  useDevModeContext: jest.fn(),
-}));
-jest.mock("react-router-dom", () => ({
-  Link: jest.fn(({ to, ...props }) => <a href={to} {...props} />),
-}));
-
-const Wrapper = ({ children }: { children: React.ReactNode }) => (
-  <ApolloMockedProvider>
-    <OnboardingProvider>{children}</OnboardingProvider>
-  </ApolloMockedProvider>
-);
-
-const OLD_ACCOUNT_DATE = "2022-12-31";
-const NEW_ACCOUNT_DATE = "2024-12-31";
-const onboardingCompleteMessage = "Onboarding completed 🎉";
-const allMarkAsDoneStepsIds = [
-  "create-product",
-  "explore-orders",
-  "graphql-playground",
-  "view-extensions",
-  "invite-staff",
-];
-
-describe("WelcomePageOnboarding", () => {
-  it("should show collapsed accordion with 'Onboarding completed' when user's account is older than set date", () => {
-    // Arrange
-    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: OLD_ACCOUNT_DATE } });
-    (useOnboardingStorage as jest.Mock).mockReturnValue({
-      getOnboardingState: jest.fn(() => onboardingInitState),
-      saveOnboardingState: jest.fn(),
-    });
-
-    // Act
-    render(
-      <Wrapper>
-        <WelcomePageOnboarding />
-      </Wrapper>,
-    );
-
-    // Assert
-    expect(screen.getByText(onboardingCompleteMessage)).toBeInTheDocument();
-    expect(screen.getByTestId("onboarding-accordion-item")).toHaveAttribute("data-state", "closed");
-  });
-
-  it("should save onboarding expanded state to storage service", async () => {
-    // Arrange
-    const saveOnboardingState = jest.fn();
-
-    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: NEW_ACCOUNT_DATE } });
-    (useOnboardingStorage as jest.Mock).mockReturnValue({
-      getOnboardingState: jest.fn(() => onboardingInitState),
-      saveOnboardingState,
-    });
-
-    // Act
-    render(
-      <Wrapper>
-        <WelcomePageOnboarding />
-      </Wrapper>,
-    );
-
-    act(() => {
-      screen.getByTestId("onboarding-accordion-trigger").click();
-    });
-    act(() => {
-      jest.runAllTimers();
-    });
-
-    // Assert
-    expect(saveOnboardingState).toHaveBeenNthCalledWith(3, {
-      onboardingExpanded: false,
-      stepsCompleted: [],
-      stepsExpanded: {},
-    });
-    expect(screen.getByTestId("onboarding-accordion-item")).toHaveAttribute("data-state", "closed");
-  });
-
-  it("should show 'Onboarding completed' when 'Mark all as done' is clicked", () => {
-    // Arrange
-    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: NEW_ACCOUNT_DATE } });
-    (useOnboardingStorage as jest.Mock).mockReturnValue({
-      getOnboardingState: jest.fn(() => onboardingInitState),
-      saveOnboardingState: jest.fn(),
-    });
-
-    // Act
-    render(
-      <Wrapper>
-        <WelcomePageOnboarding />
-      </Wrapper>,
-    );
-
-    act(() => {
-      screen.getByTestId("mark-as-done").click();
-    });
-
-    // Assert
-    expect(screen.getByText(onboardingCompleteMessage)).toBeInTheDocument();
-    expect(screen.getByTestId("onboarding-accordion-item")).toHaveAttribute("data-state", "open");
-    expect(screen.queryByText("Mark all as done")).toBeNull();
-  });
-
-  it("should show 'Onboarding completed' after marking each steps as done", () => {
-    // Arrange
-    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: NEW_ACCOUNT_DATE } });
-    (useOnboardingStorage as jest.Mock).mockReturnValue({
-      getOnboardingState: jest.fn(() => onboardingInitState),
-      saveOnboardingState: jest.fn(),
-    });
-
-    // Act
-    render(
-      <Wrapper>
-        <WelcomePageOnboarding />
-      </Wrapper>,
-    );
-
-    // 'get-started' has only 'Next step' button
-    const getStartedNextStepBtn = screen.getByTestId("get-started-next-step-btn");
-
-    act(() => {
-      getStartedNextStepBtn.click();
-    });
-
-    for (const stepId of allMarkAsDoneStepsIds) {
-      const markAsDone = screen.getByTestId(stepId + "-mark-as-done");
-
-      act(() => {
-        markAsDone.click();
-      });
-    }
-
-    // Assert
-    expect(screen.getByText(onboardingCompleteMessage)).toBeInTheDocument();
-  });
-
-  it("should show 'Onboarding completed' when all steps were completed", () => {
-    // Arrange
-    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: NEW_ACCOUNT_DATE } });
-    (useOnboardingStorage as jest.Mock).mockReturnValue({
-      getOnboardingState: jest.fn(() => onboardingCompletedMock),
-      saveOnboardingState: jest.fn(),
-    });
-
-    // Act
-    render(
-      <Wrapper>
-        <WelcomePageOnboarding />
-      </Wrapper>,
-    );
-
-    // Assert
-    expect(screen.getByText(onboardingCompleteMessage)).toBeInTheDocument();
-  });
-
-  it("clicking 'Next step' should save the status to storage service", async () => {
-    // Arrange
-    const saveOnboardingState = jest.fn();
-
-    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: NEW_ACCOUNT_DATE } });
-    (useOnboardingStorage as jest.Mock).mockReturnValue({
-      getOnboardingState: jest.fn(() => onboardingInitState),
-      saveOnboardingState,
-    });
-
-    // Act
-    render(
-      <Wrapper>
-        <WelcomePageOnboarding />
-      </Wrapper>,
-    );
-
-    act(() => {
-      screen.getByTestId("get-started-next-step-btn").click();
-    });
-    act(() => {
-      jest.runAllTimers();
-    });
-
-    // Assert
-    expect(saveOnboardingState).toBeCalledWith({
-      onboardingExpanded: true,
-      stepsCompleted: ["get-started"],
-      stepsExpanded: {},
-    });
-  });
-
-  it("clicking any 'Mark as done' should save the status to storage service with 'get-started' step", async () => {
-    // Arrange
-    const saveOnboardingState = jest.fn();
-
-    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: NEW_ACCOUNT_DATE } });
-    (useOnboardingStorage as jest.Mock).mockReturnValue({
-      getOnboardingState: jest.fn(() => onboardingInitState),
-      saveOnboardingState,
-    });
-
-    // Act
-    render(
-      <Wrapper>
-        <WelcomePageOnboarding />
-      </Wrapper>,
-    );
-
-    // Any step:
-    const graphqlPlaygroundId = "graphql-playground";
-    const exploreGraphql = screen.getByTestId("accordion-step-trigger-" + graphqlPlaygroundId);
-
-    act(() => {
-      exploreGraphql.click();
-    });
-
-    const markAsDone = screen.getByTestId(graphqlPlaygroundId + "-mark-as-done");
-
-    act(() => {
-      markAsDone.click();
-    });
-
-    act(() => {
-      jest.runAllTimers();
-    });
-
-    // Assert
-    await waitFor(() => {
-      expect(saveOnboardingState).toHaveBeenCalledWith({
-        onboardingExpanded: true,
-        stepsCompleted: ["get-started", graphqlPlaygroundId],
-        stepsExpanded: {},
-      });
-    });
-  });
-
-  it("should show 'Discover extension capabilities' step when extensions flag is enabled", () => {
-    // Arrange
-    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: NEW_ACCOUNT_DATE } });
-    (useOnboardingStorage as jest.Mock).mockReturnValue({
-      getOnboardingState: jest.fn(() => onboardingInitState),
-      saveOnboardingState: jest.fn(),
-    });
-    // Override useFlag mock for this specific test
-    (useFlag as jest.Mock).mockImplementation((flag: string) => ({
-      enabled: flag === "extensions",
-    }));
-
-    // Act
-    render(
-      <Wrapper>
-        <WelcomePageOnboarding />
-      </Wrapper>,
-    );
-
-    // Click through the first step to reveal others
-    act(() => {
-      screen.getByTestId("get-started-next-step-btn").click();
-    });
-
-    // Open the relevant step accordion
-    act(() => {
-      screen.getByTestId("accordion-step-trigger-view-extensions").click();
-    });
-
-    // Assert
-    // Check for 'view-extensions' step
-    expect(screen.getByText("Discover extension capabilities")).toBeInTheDocument();
-    expect(screen.getByTestId("view-extensions-mark-as-done")).toBeInTheDocument();
-
-    // Check that 'view-webhooks' step is NOT present
-    expect(screen.queryByText("View webhooks functionalities")).not.toBeInTheDocument();
-    expect(screen.queryByTestId("view-webhooks-mark-as-done")).not.toBeInTheDocument();
-  });
-});
diff --git a/src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.tsx b/src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.tsx
deleted file mode 100644
index 0698ce08d4c..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { DashboardCard } from "@dashboard/components/Card";
-import { iconSize, iconStrokeWidth } from "@dashboard/components/icons";
-import { Accordion, Box, Button, Text } from "@saleor/macaw-ui-next";
-import { ChevronDown } from "lucide-react";
-import { FormattedMessage } from "react-intl";
-
-import { WelcomePageOnboardingAccordion } from "./components/WelcomePageOnboardingAccordion";
-import { useOnboarding } from "./onboardingContext/OnboardingContext";
-
-type TitleProps = {
-  isOnboardingCompleted: boolean;
-  status: {
-    done: number;
-    total: number;
-  };
-};
-
-export const WelcomePageOnboarding = () => {
-  const {
-    markAllAsCompleted,
-    isOnboardingCompleted,
-    toggleOnboarding,
-    onboardingState,
-    validCompletedStepsCount,
-    visibleSteps,
-  } = useOnboarding();
-
-  const isOnboardingExpanded = onboardingState.onboardingExpanded;
-  const status = {
-    done: validCompletedStepsCount,
-    total: visibleSteps.length,
-  };
-
-  const handleMarkAllAsCompleted = () => {
-    markAllAsCompleted();
-  };
-
-  return (
-    <DashboardCard borderRadius={3} borderColor="default1" borderWidth={1} borderStyle="solid">
-      <Accordion
-        value={isOnboardingExpanded ? "onboarding" : ""}
-        onValueChange={(value: string) => {
-          toggleOnboarding(value === "onboarding");
-        }}
-      >
-        <Accordion.Item value="onboarding" data-test-id="onboarding-accordion-item">
-          <DashboardCard.Header padding={6}>
-            <Box
-              display="flex"
-              flexWrap="wrap"
-              justifyContent="space-between"
-              gap={3}
-              width="100%"
-              marginRight={4}
-            >
-              <Title isOnboardingCompleted={isOnboardingCompleted} status={status} />
-
-              {!isOnboardingCompleted && (
-                <Button
-                  variant="secondary"
-                  onClick={handleMarkAllAsCompleted}
-                  data-test-id="mark-as-done"
-                >
-                  <FormattedMessage
-                    defaultMessage="Mark all as done"
-                    id="ipbT0Q"
-                    description="btn label"
-                  />
-                </Button>
-              )}
-            </Box>
-            <Accordion.Trigger>
-              <Button
-                display="flex"
-                alignItems="center"
-                transition="ease"
-                __transform={`${isOnboardingExpanded ? "rotate(180deg)" : "none"}`}
-                backgroundColor={{
-                  hover: "transparent",
-                  active: "transparent",
-                }}
-                variant="tertiary"
-                size="small"
-                data-test-id="onboarding-accordion-trigger"
-              >
-                <ChevronDown size={iconSize.medium} strokeWidth={iconStrokeWidth} />
-              </Button>
-            </Accordion.Trigger>
-          </DashboardCard.Header>
-
-          <Accordion.Content>
-            <DashboardCard.Content padding={6} paddingTop={0}>
-              <WelcomePageOnboardingAccordion />
-            </DashboardCard.Content>
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion>
-    </DashboardCard>
-  );
-};
-
-const Title = ({ isOnboardingCompleted, status }: TitleProps) => {
-  if (isOnboardingCompleted) {
-    return (
-      <Text size={7}>
-        <FormattedMessage
-          defaultMessage="Onboarding completed 🎉"
-          id="loEfAh"
-          description="onboarding completed message"
-        />
-      </Text>
-    );
-  }
-
-  return (
-    <Text size={7}>
-      <FormattedMessage
-        defaultMessage="Let’s Get Started ({count}/{total})"
-        id="iIPThY"
-        description="onboarding title"
-        values={{
-          count: status.done,
-          total: status.total,
-        }}
-      />
-    </Text>
-  );
-};
diff --git a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageCheckGraphQLButton.tsx b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageCheckGraphQLButton.tsx
deleted file mode 100644
index fd01154daec..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageCheckGraphQLButton.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useDevModeContext } from "@dashboard/components/DevModePanel/hooks";
-import { Button } from "@saleor/macaw-ui-next";
-import { FormattedMessage } from "react-intl";
-
-import { type PrimaryActionProps } from "./type";
-
-export const WelcomePageCheckGraphQLButton = ({ onClick }: PrimaryActionProps) => {
-  const context = useDevModeContext();
-
-  return (
-    <Button
-      variant="primary"
-      onClick={() => {
-        onClick();
-        context.setDevModeVisibility(true);
-      }}
-    >
-      <FormattedMessage
-        defaultMessage="Go to GraphQL Playground"
-        id="2xkzcr"
-        description="btn label"
-      />
-    </Button>
-  );
-};
diff --git a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageCreateProductButton.tsx b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageCreateProductButton.tsx
deleted file mode 100644
index c920ecda49b..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageCreateProductButton.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { useUser } from "@dashboard/auth/useUser";
-import { hasPermissions } from "@dashboard/components/RequirePermissions";
-import { PermissionEnum } from "@dashboard/graphql";
-import { productListUrl } from "@dashboard/products/urls";
-import { Button, Tooltip } from "@saleor/macaw-ui-next";
-import { FormattedMessage } from "react-intl";
-import { Link } from "react-router-dom";
-
-import { type PrimaryActionProps } from "./type";
-import { WelcomePageFakeDisabledButton } from "./WelcomePageFakeDisabledButton";
-
-export const WelcomePageCreateProductButton = ({ onClick }: PrimaryActionProps) => {
-  const { user } = useUser();
-  const userPermissions = user?.userPermissions || [];
-  const hasPermissionToManageProducts = hasPermissions(userPermissions, [
-    PermissionEnum.MANAGE_PRODUCTS,
-  ]);
-
-  if (!hasPermissionToManageProducts) {
-    return (
-      <Tooltip>
-        <Tooltip.Trigger>
-          <WelcomePageFakeDisabledButton>
-            <FormattedMessage
-              defaultMessage="Go to all products"
-              id="XZpRr8"
-              description="btn label"
-            />
-          </WelcomePageFakeDisabledButton>
-        </Tooltip.Trigger>
-        <Tooltip.Content>
-          <Tooltip.Arrow />
-          <FormattedMessage
-            defaultMessage="You don't have permission to manage products"
-            id="KHI/qv"
-          />
-        </Tooltip.Content>
-      </Tooltip>
-    );
-  }
-
-  return (
-    <Link to={productListUrl()} onClick={onClick}>
-      <Button variant="primary">
-        <FormattedMessage defaultMessage="Go to all products" id="XZpRr8" description="btn label" />
-      </Button>
-    </Link>
-  );
-};
diff --git a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageFakeDisabledButton.tsx b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageFakeDisabledButton.tsx
deleted file mode 100644
index 0996741de40..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageFakeDisabledButton.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Button, type ButtonProps, vars } from "@saleor/macaw-ui-next";
-import { forwardRef, useState } from "react";
-
-export const WelcomePageFakeDisabledButton = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, ...props }, ref) => {
-    const [isHovered, setIsHovered] = useState(false);
-
-    return (
-      <Button
-        ref={ref}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-        cursor="not-allowed"
-        variant="primary"
-        boxShadow="none"
-        aria-disabled
-        tabIndex={-1}
-        // I cannot override the background color of the button due to that existing styles were applied as last
-        style={{
-          backgroundColor: isHovered
-            ? vars.colors.background.buttonDefaultPrimaryHovered
-            : vars.colors.background.buttonDefaultDisabled,
-          color: vars.colors.text.defaultDisabled,
-        }}
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  },
-);
-
-WelcomePageFakeDisabledButton.displayName = "WelcomePageFakeDisabledButton";
diff --git a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageInviteStaffButton.tsx b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageInviteStaffButton.tsx
deleted file mode 100644
index 02b6183329f..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageInviteStaffButton.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useUser } from "@dashboard/auth/useUser";
-import { hasPermissions } from "@dashboard/components/RequirePermissions";
-import { PermissionEnum } from "@dashboard/graphql";
-import { staffListUrl } from "@dashboard/staff/urls";
-import { Button, Tooltip } from "@saleor/macaw-ui-next";
-import { FormattedMessage } from "react-intl";
-import { Link } from "react-router-dom";
-
-import { type PrimaryActionProps } from "./type";
-import { WelcomePageFakeDisabledButton } from "./WelcomePageFakeDisabledButton";
-
-export const WelcomePageInviteStaffButton = ({ onClick }: PrimaryActionProps) => {
-  const { user } = useUser();
-  const userPermissions = user?.userPermissions || [];
-  const hasPermissionToManageStaff = hasPermissions(userPermissions, [PermissionEnum.MANAGE_STAFF]);
-
-  if (!hasPermissionToManageStaff) {
-    return (
-      <Tooltip>
-        <Tooltip.Trigger>
-          <WelcomePageFakeDisabledButton variant="primary">
-            <FormattedMessage defaultMessage="Invite members" id="BBt3jD" description="btn label" />
-          </WelcomePageFakeDisabledButton>
-        </Tooltip.Trigger>
-        <Tooltip.Content>
-          <Tooltip.Arrow />
-          <FormattedMessage
-            defaultMessage="You don't have permission to manage staff"
-            id="gt05TH"
-            description="tooltip message"
-          />
-        </Tooltip.Content>
-      </Tooltip>
-    );
-  }
-
-  return (
-    <Link to={staffListUrl({ action: "add" })} onClick={onClick}>
-      <Button variant="primary">
-        <FormattedMessage defaultMessage="Invite members" id="BBt3jD" description="btn label" />
-      </Button>
-    </Link>
-  );
-};
diff --git a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageOnboardingAccordion.tsx b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageOnboardingAccordion.tsx
deleted file mode 100644
index f84ef16bbcd..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageOnboardingAccordion.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import completedIcon from "@assets/images/completed.svg";
-import uncompletedIcon from "@assets/images/uncompleted.svg";
-import { iconSize, iconStrokeWidth } from "@dashboard/components/icons";
-import { Accordion, Box, Skeleton, Text } from "@saleor/macaw-ui-next";
-import { ChevronDown } from "lucide-react";
-import SVG from "react-inlinesvg";
-
-import { useOnboardingData } from "../hooks/useOnboardingData";
-import { useOnboarding } from "../onboardingContext/OnboardingContext";
-
-export const WelcomePageOnboardingAccordion = () => {
-  const { toggleExpandedOnboardingStep, extendedStepId, loading } = useOnboarding();
-
-  const { steps } = useOnboardingData();
-
-  if (loading) {
-    return (
-      <Box display="grid" gap={3}>
-        <Skeleton __width="100%" height={6} />
-        <Skeleton __width="50%" height={6} />
-        <Skeleton __width="75%" height={6} />
-      </Box>
-    );
-  }
-
-  return (
-    <Accordion
-      display="grid"
-      gap={3}
-      value={extendedStepId}
-      onValueChange={(value: string) => {
-        toggleExpandedOnboardingStep(value, extendedStepId);
-      }}
-    >
-      {steps.map(step => (
-        <Accordion.Item
-          key={step.id}
-          value={step.id}
-          backgroundColor="default1"
-          padding={6}
-          borderWidth={1}
-          borderColor="default1"
-          borderStyle="solid"
-          borderRadius={3}
-          width="100%"
-          boxShadow={extendedStepId === step.id ? "defaultFocused" : "none"}
-        >
-          <Accordion.Trigger alignItems="center" data-test-id={`accordion-step-trigger-${step.id}`}>
-            <Box width="100%" display="flex" alignItems="center" justifyContent="space-between">
-              <Box display="flex" alignItems="center" gap={3.5}>
-                <StepIcon isComplete={step.isCompleted} />
-                <Text size={5} fontWeight="bold">
-                  {step.title}
-                </Text>
-              </Box>
-
-              <Box
-                display="flex"
-                alignItems="center"
-                transition="ease"
-                __transform={`${extendedStepId === step.id ? "rotate(180deg)" : "none"}`}
-              >
-                <ChevronDown size={iconSize.medium} strokeWidth={iconStrokeWidth} />
-              </Box>
-            </Box>
-          </Accordion.Trigger>
-          <Accordion.Content>
-            <Box marginTop={3} marginLeft={9}>
-              <Text>{step.description}</Text>
-              {step.actions && (
-                <Box display="flex" gap={4} marginTop={6} marginBottom={2} flexWrap="wrap">
-                  {step.actions}
-                </Box>
-              )}
-            </Box>
-          </Accordion.Content>
-        </Accordion.Item>
-      ))}
-    </Accordion>
-  );
-};
-
-function StepIcon({ isComplete }: { isComplete: boolean }) {
-  if (isComplete) {
-    return (
-      <Box color="accent1">
-        <SVG src={completedIcon} width={18} height={18} style={{ verticalAlign: "middle" }} />
-      </Box>
-    );
-  }
-
-  return (
-    <Box color="default1">
-      <SVG src={uncompletedIcon} width={18} height={18} style={{ verticalAlign: "middle" }} />
-    </Box>
-  );
-}
diff --git a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageOrdersButton.tsx b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageOrdersButton.tsx
deleted file mode 100644
index bef83f142a2..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageOrdersButton.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useUser } from "@dashboard/auth/useUser";
-import { hasPermissions } from "@dashboard/components/RequirePermissions";
-import { PermissionEnum } from "@dashboard/graphql";
-import { orderListUrl } from "@dashboard/orders/urls";
-import { Button, Tooltip } from "@saleor/macaw-ui-next";
-import { FormattedMessage } from "react-intl";
-import { Link } from "react-router-dom";
-
-import { type PrimaryActionProps } from "./type";
-import { WelcomePageFakeDisabledButton } from "./WelcomePageFakeDisabledButton";
-
-export const WelcomePageOrdersButton = ({ onClick }: PrimaryActionProps) => {
-  const { user } = useUser();
-  const userPermissions = user?.userPermissions || [];
-  const hasPermissionToManageOrders = hasPermissions(userPermissions, [
-    PermissionEnum.MANAGE_ORDERS,
-  ]);
-
-  if (!hasPermissionToManageOrders) {
-    return (
-      <Tooltip>
-        <Tooltip.Trigger>
-          <WelcomePageFakeDisabledButton>
-            <FormattedMessage defaultMessage="Go to orders" id="kv3FWU" description="btn label" />
-          </WelcomePageFakeDisabledButton>
-        </Tooltip.Trigger>
-        <Tooltip.Content>
-          <Tooltip.Arrow />
-          <FormattedMessage
-            defaultMessage="You don't have permission to manage orders"
-            id="xol6jX"
-          />
-        </Tooltip.Content>
-      </Tooltip>
-    );
-  }
-
-  return (
-    <Link to={orderListUrl()} onClick={onClick}>
-      <Button variant="primary">
-        <FormattedMessage defaultMessage="Go to orders" id="kv3FWU" description="btn label" />
-      </Button>
-    </Link>
-  );
-};
diff --git a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageWebhooksButton.tsx b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageWebhooksButton.tsx
deleted file mode 100644
index 8d6b886c62e..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageWebhooksButton.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ExtensionsPaths } from "@dashboard/extensions/urls";
-import { Button } from "@saleor/macaw-ui-next";
-import { FormattedMessage } from "react-intl";
-import { Link } from "react-router-dom";
-
-import { type PrimaryActionProps } from "./type";
-
-export const WelcomePageWebhooksButton = ({ onClick }: PrimaryActionProps) => {
-  return (
-    <Link to={ExtensionsPaths.installedExtensions} onClick={onClick}>
-      <Button variant="primary">
-        <FormattedMessage defaultMessage="Go to Extensions" id="8Mq3ku" description="btn label" />
-      </Button>
-    </Link>
-  );
-};
diff --git a/src/welcomePage/WelcomePageOnboarding/components/type.ts b/src/welcomePage/WelcomePageOnboarding/components/type.ts
deleted file mode 100644
index 826e981196c..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/components/type.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface PrimaryActionProps {
-  onClick: () => void;
-}
diff --git a/src/welcomePage/WelcomePageOnboarding/hooks/useNewUserCheck.test.ts b/src/welcomePage/WelcomePageOnboarding/hooks/useNewUserCheck.test.ts
deleted file mode 100644
index d0750a5c84e..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/hooks/useNewUserCheck.test.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { useUser } from "@dashboard/auth/useUser";
-import { renderHook } from "@testing-library/react";
-
-import { useNewUserCheck } from "./useNewUserCheck";
-
-jest.mock("@dashboard/auth/useUser");
-
-describe("useNewUserCheck", () => {
-  const originalEnv = process.env;
-
-  beforeEach(() => {
-    jest.resetModules(); // Clear the module cache to ensure no env conflicts.
-    process.env = { ...originalEnv }; // Reset the process.env before each test.
-  });
-
-  afterAll(() => {
-    process.env = originalEnv; // Restore original process.env.
-  });
-
-  it("should return isNewUser as false if user is not defined", () => {
-    // Arrange
-    (useUser as jest.Mock).mockReturnValue({ user: null });
-
-    process.env.ONBOARDING_USER_JOINED_DATE_THRESHOLD = "2023-01-01";
-
-    // Act
-    const { result } = renderHook(() => useNewUserCheck());
-
-    // Assert
-    expect(result.current).toEqual({ isNewUser: false, isUserLoading: true });
-  });
-
-  it("should return isNewUser as false if ONBOARDING_USER_JOINED_DATE_THRESHOLD is not set", () => {
-    // Arrange
-    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: "2023-02-01" } });
-
-    delete process.env.ONBOARDING_USER_JOINED_DATE_THRESHOLD;
-
-    // Act
-    const { result } = renderHook(() => useNewUserCheck());
-
-    // Assert
-    expect(result.current).toEqual({ isNewUser: false, isUserLoading: false });
-  });
-
-  it("should return isNewUser as true if user joined after the threshold date", () => {
-    // Arrange
-    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: "2023-02-01" } });
-
-    process.env.ONBOARDING_USER_JOINED_DATE_THRESHOLD = "2023-01-01";
-
-    // Act
-    const { result } = renderHook(() => useNewUserCheck());
-
-    // Assert
-    expect(result.current).toEqual({ isNewUser: true, isUserLoading: false });
-  });
-
-  it("should return isNewUser as false if user joined before the threshold date", () => {
-    // Arrange
-    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: "2022-12-31" } });
-
-    process.env.ONBOARDING_USER_JOINED_DATE_THRESHOLD = "2023-01-01";
-
-    // Act
-    const { result } = renderHook(() => useNewUserCheck());
-
-    // Assert
-    expect(result.current).toEqual({ isNewUser: false, isUserLoading: false });
-  });
-
-  it("should return isNewUser as false if threshold date is invalid", () => {
-    // Arrange
-    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: "2023-01-01" } });
-
-    process.env.ONBOARDING_USER_JOINED_DATE_THRESHOLD = "123456789";
-
-    // Act
-    const { result } = renderHook(() => useNewUserCheck());
-
-    // Assert
-    expect(result.current).toEqual({ isNewUser: false, isUserLoading: false });
-  });
-
-  it("should return isNewUser as false and isUserLoading true when uer is loading", () => {
-    // Arrange
-    (useUser as jest.Mock).mockReturnValue({ user: null, isUserLoading: true });
-
-    // Act
-    const { result } = renderHook(() => useNewUserCheck());
-
-    // Assert
-    expect(result.current).toEqual({ isNewUser: false, isUserLoading: true });
-  });
-});
diff --git a/src/welcomePage/WelcomePageOnboarding/hooks/useNewUserCheck.ts b/src/welcomePage/WelcomePageOnboarding/hooks/useNewUserCheck.ts
deleted file mode 100644
index 8503dfac87c..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/hooks/useNewUserCheck.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useUser } from "@dashboard/auth/useUser";
-
-export const useNewUserCheck = () => {
-  const { user } = useUser();
-  const thresholdDateString = process.env.ONBOARDING_USER_JOINED_DATE_THRESHOLD || "2024-11-29";
-
-  if (!user) {
-    return {
-      isNewUser: false,
-      isUserLoading: true,
-    };
-  }
-
-  if (!thresholdDateString) {
-    return {
-      isNewUser: false,
-      isUserLoading: false,
-    };
-  }
-
-  const userJoinedDate = new Date(user.dateJoined);
-  // Reset time, so timezone will not flip the day
-  const thresholdDate = new Date(`${thresholdDateString}T00:00:00`);
-
-  if (isNaN(userJoinedDate.getTime()) || isNaN(thresholdDate.getTime())) {
-    return {
-      isNewUser: false,
-      isUserLoading: false,
-    };
-  }
-
-  return {
-    isNewUser: userJoinedDate > thresholdDate,
-    isUserLoading: false,
-  };
-};
diff --git a/src/welcomePage/WelcomePageOnboarding/hooks/useOnboardingData.tsx b/src/welcomePage/WelcomePageOnboarding/hooks/useOnboardingData.tsx
deleted file mode 100644
index fde073ece36..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/hooks/useOnboardingData.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-import { useAnalytics } from "@dashboard/components/ProductAnalytics/useAnalytics";
-import { Button } from "@saleor/macaw-ui-next";
-import { type ReactNode } from "react";
-import { FormattedMessage, type IntlShape, useIntl } from "react-intl";
-
-import { WelcomePageCheckGraphQLButton } from "../components/WelcomePageCheckGraphQLButton";
-import { WelcomePageCreateProductButton } from "../components/WelcomePageCreateProductButton";
-import { WelcomePageInviteStaffButton } from "../components/WelcomePageInviteStaffButton";
-import { WelcomePageOrdersButton } from "../components/WelcomePageOrdersButton";
-import { WelcomePageWebhooksButton } from "../components/WelcomePageWebhooksButton";
-import { useOnboarding } from "../onboardingContext";
-import { type OnboardingStepsIDs } from "../onboardingContext/types";
-
-interface OnboardingStepData {
-  id: OnboardingStepsIDs;
-  title: string;
-  description: string;
-  actions: ReactNode;
-  isCompleted: boolean;
-}
-
-const getStepsData = ({
-  intl,
-  isStepCompleted,
-  onStepComplete,
-  trackOnboardingEvent,
-}: {
-  intl: IntlShape;
-  isStepCompleted: (step: OnboardingStepsIDs) => boolean;
-  onStepComplete: (step: OnboardingStepsIDs) => void;
-  trackOnboardingEvent: (event: OnboardingStepsIDs) => void;
-}): OnboardingStepData[] => {
-  const steps: OnboardingStepData[] = [
-    {
-      id: "get-started",
-      title: intl.formatMessage({
-        defaultMessage: "Welcome to Dashboard!",
-        id: "PaQFmR",
-        description: "onboarding step title",
-      }),
-      description: intl.formatMessage({
-        defaultMessage:
-          "We'll guide you through the main features so you can start customizing your store. Explore products, orders, collections, customers, and discounts to get familiar with key functions and concepts.",
-        id: "PrxZ/P",
-        description: "onboarding step description",
-      }),
-      isCompleted: isStepCompleted("get-started"),
-      actions: !isStepCompleted("get-started") ? (
-        <Button
-          variant="primary"
-          data-test-id="get-started-next-step-btn"
-          onClick={() => {
-            onStepComplete("get-started");
-            trackOnboardingEvent("get-started");
-          }}
-        >
-          <FormattedMessage defaultMessage="Next step" id="d+qgix" />
-        </Button>
-      ) : null,
-    },
-    {
-      id: "create-product",
-      title: intl.formatMessage({
-        defaultMessage: "Create a new product",
-        id: "IDwsCU",
-        description: "onboarding step title",
-      }),
-      description: intl.formatMessage({
-        defaultMessage:
-          "Go to all products from where you can create a new product and view it in all product list. View the product in GraphQL",
-        id: "l0a2tU",
-        description: "onboarding step description",
-      }),
-      isCompleted: isStepCompleted("create-product"),
-      actions: (
-        <>
-          <WelcomePageCreateProductButton onClick={() => trackOnboardingEvent("create-product")} />
-          {!isStepCompleted("create-product") && (
-            <Button
-              variant="secondary"
-              onClick={() => onStepComplete("create-product")}
-              data-test-id="create-product-mark-as-done"
-            >
-              <FormattedMessage defaultMessage="Mark as done" id="C5gcqL" description="btn label" />
-            </Button>
-          )}
-        </>
-      ),
-    },
-    {
-      id: "explore-orders",
-      title: intl.formatMessage({
-        defaultMessage: "Explore orders",
-        id: "HADMte",
-        description: "onboarding step title",
-      }),
-      description: intl.formatMessage({
-        defaultMessage:
-          "Go to all orders where you can create an fulfilment and refund and review corresponding statuses. View the order in GraphQL",
-        id: "4IawKc",
-        description: "onboarding step description",
-      }),
-      isCompleted: isStepCompleted("explore-orders"),
-      actions: (
-        <>
-          <WelcomePageOrdersButton onClick={() => trackOnboardingEvent("explore-orders")} />
-          {!isStepCompleted("explore-orders") && (
-            <Button
-              variant="secondary"
-              onClick={() => onStepComplete("explore-orders")}
-              data-test-id="explore-orders-mark-as-done"
-            >
-              <FormattedMessage defaultMessage="Mark as done" id="C5gcqL" description="btn label" />
-            </Button>
-          )}
-        </>
-      ),
-    },
-    {
-      id: "graphql-playground",
-      title: intl.formatMessage({
-        defaultMessage: "Check our GraphQL playground & make an API call",
-        id: "EQfaUv",
-        description: "onboarding step title",
-      }),
-      description: intl.formatMessage({
-        defaultMessage:
-          "Saleor includes a GraphQL Playground, an interactive GraphQL editor, allowing access to your Saleor instance's API through the web browser. The Playground lets you quickly familiarize yourself with the API, perform example operations, and send your first queries and mutations.",
-        id: "Nyxzpe",
-        description: "onboarding step description",
-      }),
-      isCompleted: isStepCompleted("graphql-playground"),
-      actions: (
-        <>
-          <WelcomePageCheckGraphQLButton
-            onClick={() => trackOnboardingEvent("graphql-playground")}
-          />
-          {!isStepCompleted("graphql-playground") && (
-            <Button
-              variant="secondary"
-              onClick={() => onStepComplete("graphql-playground")}
-              data-test-id="graphql-playground-mark-as-done"
-            >
-              <FormattedMessage defaultMessage="Mark as done" id="C5gcqL" description="btn label" />
-            </Button>
-          )}
-        </>
-      ),
-    },
-    {
-      id: "view-extensions" as OnboardingStepsIDs,
-      title: intl.formatMessage({
-        defaultMessage: "Discover extension capabilities",
-        id: "JTjg1r",
-        description: "onboarding step title",
-      }),
-      description: intl.formatMessage({
-        defaultMessage:
-          "Review the central hub for managing all available extensions. Here, you can easily oversee your extensions and enhance Saleor with custom solutions using webhooks and APIs.",
-        id: "zsz6LN",
-        description: "onboarding step description",
-      }),
-      isCompleted: isStepCompleted("view-extensions"),
-      actions: (
-        <>
-          <WelcomePageWebhooksButton onClick={() => trackOnboardingEvent("view-extensions")} />
-          {!isStepCompleted("view-extensions") && (
-            <Button
-              variant="secondary"
-              onClick={() => onStepComplete("view-extensions")}
-              data-test-id="view-extensions-mark-as-done"
-            >
-              <FormattedMessage defaultMessage="Mark as done" id="C5gcqL" description="btn label" />
-            </Button>
-          )}
-        </>
-      ),
-    },
-    {
-      id: "invite-staff",
-      title: intl.formatMessage({
-        defaultMessage: "Invite staff members",
-        id: "p/m4dD",
-        description: "onboarding step title",
-      }),
-      description: intl.formatMessage({
-        defaultMessage:
-          "Invite team members and assign permissions on Product Information Management (PIM), Order Management System (OMS), Promotions engine, Extensions (apps, plugins)",
-        id: "Z7vQSa",
-      }),
-      isCompleted: isStepCompleted("invite-staff"),
-      actions: (
-        <>
-          <WelcomePageInviteStaffButton onClick={() => trackOnboardingEvent("invite-staff")} />
-          {!isStepCompleted("invite-staff") && (
-            <Button
-              variant="secondary"
-              onClick={() => onStepComplete("invite-staff")}
-              data-test-id="invite-staff-mark-as-done"
-            >
-              <FormattedMessage defaultMessage="Mark as done" id="C5gcqL" description="btn label" />
-            </Button>
-          )}
-        </>
-      ),
-    },
-  ];
-
-  return steps;
-};
-
-export const useOnboardingData = () => {
-  const intl = useIntl();
-  const analytics = useAnalytics();
-  const { markOnboardingStepAsCompleted, onboardingState } = useOnboarding();
-
-  const steps = getStepsData({
-    intl,
-    isStepCompleted: (step: OnboardingStepsIDs) => onboardingState.stepsCompleted.includes(step),
-    onStepComplete: (step: OnboardingStepsIDs) => {
-      markOnboardingStepAsCompleted(step);
-      analytics.trackEvent("home_onboarding_step_complete_click", { step_id: step });
-    },
-    trackOnboardingEvent: (step_id: OnboardingStepsIDs) =>
-      analytics.trackEvent("home_onboarding_step_click", { step_id: step_id }),
-  });
-
-  return {
-    steps,
-  };
-};
diff --git a/src/welcomePage/WelcomePageOnboarding/index.ts b/src/welcomePage/WelcomePageOnboarding/index.ts
deleted file mode 100644
index 5d609acb608..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { WelcomePageOnboarding } from "./WelcomePageOnboarding";
diff --git a/src/welcomePage/WelcomePageOnboarding/mocks.ts b/src/welcomePage/WelcomePageOnboarding/mocks.ts
deleted file mode 100644
index fbb99f01507..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/mocks.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const onboardingCompletedMock = {
-  onboardingExpanded: true,
-  stepsCompleted: [
-    "get-started",
-    "invite-staff",
-    "view-extensions",
-    "explore-orders",
-    "graphql-playground",
-    "create-product",
-  ],
-  stepsExpanded: {},
-};
-
-export const onboardingInitState = undefined;
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/OnboardingContext.tsx b/src/welcomePage/WelcomePageOnboarding/onboardingContext/OnboardingContext.tsx
deleted file mode 100644
index 68c8bbd01d1..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/onboardingContext/OnboardingContext.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import { useAnalytics } from "@dashboard/components/ProductAnalytics/useAnalytics";
-import {
-  handleStateChangeAfterStepCompleted,
-  handleStateChangeAfterToggle,
-} from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext/utils";
-import { createContext, useContext, useEffect, useRef, useState } from "react";
-
-import { useNewUserCheck } from "../hooks/useNewUserCheck";
-import {
-  getInitialOnboardingState,
-  initialOnboardingSteps,
-  TOTAL_STEPS_COUNT,
-} from "./initialOnboardingState";
-import {
-  type OnboardingContextType,
-  type OnboardingProviderProps,
-  type OnboardingState,
-  type OnboardingStepsIDs,
-} from "./types";
-import { useExpandedOnboardingId } from "./useExpandedOnboardingId";
-import { useOnboardingStorage } from "./useOnboardingStorage";
-
-const OnboardingContext = createContext<OnboardingContextType | null>(null);
-
-export const OnboardingProvider = ({ children }: OnboardingProviderProps) => {
-  const analytics = useAnalytics();
-  const [onboardingState, setOnboardingState] = useState<OnboardingState>({
-    onboardingExpanded: true,
-    stepsCompleted: [],
-    stepsExpanded: {} as OnboardingState["stepsExpanded"],
-  });
-  const loaded = useRef(false);
-  const { isNewUser, isUserLoading } = useNewUserCheck();
-
-  const storageService = useOnboardingStorage();
-
-  useEffect(() => {
-    if (loaded.current || isUserLoading) return;
-
-    const onboardingStateFromUserMetadata = storageService.getOnboardingState();
-
-    // When first time load there is not data in local storage, so use initial state
-    if (!onboardingStateFromUserMetadata) {
-      setOnboardingState(getInitialOnboardingState(isNewUser));
-    } else {
-      setOnboardingState(onboardingStateFromUserMetadata);
-    }
-
-    loaded.current = true;
-  }, [isNewUser, isUserLoading, loaded, storageService]);
-
-  useEffect(() => {
-    if (loaded.current) {
-      storageService.saveOnboardingState(onboardingState);
-    }
-  }, [onboardingState]);
-
-  // Calculate the valid completed steps based on feature flag
-  const validCompletedSteps = onboardingState.stepsCompleted;
-
-  const validCompletedStepsCount = validCompletedSteps.length;
-
-  // For old users, onboarding is always completed, for new one we need to calculate it
-  const isOnboardingCompleted = isNewUser ? validCompletedStepsCount >= TOTAL_STEPS_COUNT : true;
-
-  const extendedStepId = useExpandedOnboardingId(
-    onboardingState,
-    loaded.current,
-    initialOnboardingSteps,
-  );
-
-  const markOnboardingStepAsCompleted = (id: OnboardingStepsIDs) => {
-    if (onboardingState.stepsCompleted.includes(id)) return;
-
-    setOnboardingState(prevOnboardingState =>
-      handleStateChangeAfterStepCompleted(prevOnboardingState, id),
-    );
-  };
-
-  const markAllAsCompleted = () => {
-    analytics.trackEvent("home_onboarding_mark_all_steps_completed");
-    setOnboardingState(prevOnboardingState => ({
-      ...prevOnboardingState,
-      stepsCompleted: initialOnboardingSteps.map(step => step.id),
-      stepsExpanded: {} as OnboardingState["stepsExpanded"],
-    }));
-  };
-
-  // In case accordion collapse, we get empty string as id and I need current expanded id to toggle it
-  const toggleExpandedOnboardingStep = (id: string, currentExpandedId: OnboardingStepsIDs | "") => {
-    // In case that step was collapse we get empty string as id
-    const expandedId = id || currentExpandedId;
-
-    setOnboardingState(prev =>
-      handleStateChangeAfterToggle(prev, expandedId as OnboardingStepsIDs, id),
-    );
-  };
-
-  const toggleOnboarding = (value: boolean) => {
-    setOnboardingState(prev => {
-      const newState = {
-        ...prev,
-        onboardingExpanded: value,
-      };
-
-      storageService.saveOnboardingState(newState);
-
-      return newState;
-    });
-  };
-
-  return (
-    <OnboardingContext.Provider
-      value={{
-        isOnboardingCompleted,
-        onboardingState,
-        extendedStepId,
-        loading: !loaded,
-        markOnboardingStepAsCompleted,
-        markAllAsCompleted,
-        toggleExpandedOnboardingStep,
-        toggleOnboarding,
-        validCompletedStepsCount,
-        visibleSteps: initialOnboardingSteps,
-      }}
-    >
-      {children}
-    </OnboardingContext.Provider>
-  );
-};
-
-export const useOnboarding = () => {
-  const context = useContext(OnboardingContext);
-
-  if (context === null) {
-    throw new Error("useOnboarding must be used within a OnboardingProvider");
-  }
-
-  return context;
-};
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/index.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/index.ts
deleted file mode 100644
index 59e1d92e990..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/onboardingContext/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./OnboardingContext";
-export * from "./types";
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/initialOnboardingState.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/initialOnboardingState.ts
deleted file mode 100644
index b5946367c83..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/onboardingContext/initialOnboardingState.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import {
-  type OnboardingState,
-  type OnboardingStep,
-} from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext/types";
-
-// We store state in metadata for all steps even these that are not shown to the user
-export const initialOnboardingSteps: OnboardingStep[] = [
-  {
-    id: "get-started",
-    completed: false,
-    expanded: undefined,
-  },
-  {
-    id: "create-product",
-    completed: false,
-    expanded: undefined,
-  },
-  {
-    id: "explore-orders",
-    completed: false,
-    expanded: undefined,
-  },
-  {
-    id: "graphql-playground",
-    completed: false,
-    expanded: undefined,
-  },
-  {
-    id: "view-extensions",
-    completed: false,
-    expanded: undefined,
-  },
-  {
-    id: "invite-staff",
-    completed: false,
-    expanded: undefined,
-  },
-];
-
-export const TOTAL_STEPS_COUNT = initialOnboardingSteps.length - 1; // we either show view-extensions or view-webhooks but not both
-
-export const getInitialOnboardingState = (isNewUser: boolean): OnboardingState => {
-  if (isNewUser) {
-    return {
-      onboardingExpanded: true,
-      stepsCompleted: [],
-      stepsExpanded: {} as OnboardingState["stepsExpanded"],
-    };
-  }
-
-  return {
-    onboardingExpanded: false,
-    stepsCompleted: initialOnboardingSteps.map(step => step.id),
-    stepsExpanded: {} as OnboardingState["stepsExpanded"],
-  };
-};
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/types.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/types.ts
deleted file mode 100644
index f0dd8637fd3..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/onboardingContext/types.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import type * as React from "react";
-
-export type OnboardingStepsIDs =
-  | "get-started"
-  | "create-product"
-  | "explore-orders"
-  | "graphql-playground"
-  | "view-extensions"
-  | "invite-staff";
-
-export type OnboardingStep = {
-  id: OnboardingStepsIDs;
-  completed: boolean;
-  expanded: boolean | undefined;
-};
-
-export type OnboardingState = {
-  stepsCompleted: OnboardingStepsIDs[];
-  stepsExpanded: Record<OnboardingStepsIDs, boolean>;
-  onboardingExpanded: boolean;
-};
-
-export interface StorageService {
-  getOnboardingState(): OnboardingState | undefined;
-  saveOnboardingState(onboardingState: OnboardingState): Promise<void>;
-}
-
-export interface OnboardingContextType {
-  isOnboardingCompleted: boolean;
-  loading: boolean;
-  extendedStepId: OnboardingStepsIDs | "";
-  onboardingState: OnboardingState;
-  markOnboardingStepAsCompleted: (id: OnboardingStepsIDs) => void;
-  markAllAsCompleted: () => void;
-  toggleExpandedOnboardingStep: (id: string, currentExpandedId: OnboardingStepsIDs | "") => void;
-  toggleOnboarding: (value: boolean) => void;
-  validCompletedStepsCount: number;
-  visibleSteps: OnboardingStep[];
-}
-
-export interface OnboardingProviderProps {
-  children: React.ReactNode;
-}
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/useExpandedOnboardingId.test.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/useExpandedOnboardingId.test.ts
deleted file mode 100644
index e13f910ab2a..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/onboardingContext/useExpandedOnboardingId.test.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-import {
-  type OnboardingState,
-  type OnboardingStep,
-} from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext/types";
-import { renderHook } from "@testing-library/react";
-
-import { useExpandedOnboardingId } from "./useExpandedOnboardingId";
-
-describe("useExpandedOnboardingId", () => {
-  it("should return first expanded step on init if exists", () => {
-    // Arrange
-    const onboardingState = {
-      stepsCompleted: ["get-started"],
-      stepsExpanded: {
-        "create-product": true,
-      },
-    } as OnboardingState;
-    const loaded = true;
-    const visibleSteps: OnboardingStep[] = [
-      { id: "get-started", completed: true, expanded: undefined },
-      { id: "create-product", completed: false, expanded: true },
-      { id: "explore-orders", completed: false, expanded: undefined },
-      { id: "graphql-playground", completed: false, expanded: undefined },
-      { id: "view-extensions", completed: false, expanded: undefined },
-      { id: "invite-staff", completed: false, expanded: undefined },
-    ];
-
-    // Act
-    const expandedStepId = renderHook(() =>
-      useExpandedOnboardingId(onboardingState, loaded, visibleSteps),
-    ).result.current;
-
-    // assert
-    expect(expandedStepId).toBe("create-product");
-  });
-
-  it("should return first not completed step when no one with expanded state", () => {
-    // Arrange
-    const onboardingState = {
-      stepsCompleted: ["get-started", "create-product"],
-      stepsExpanded: { "get-started": false },
-    } as OnboardingState;
-    const loaded = true;
-    const visibleSteps: OnboardingStep[] = [
-      { id: "get-started", completed: true, expanded: false },
-      { id: "create-product", completed: true, expanded: undefined },
-      { id: "explore-orders", completed: false, expanded: undefined },
-      { id: "graphql-playground", completed: false, expanded: undefined },
-      { id: "view-extensions", completed: false, expanded: undefined },
-      { id: "invite-staff", completed: false, expanded: undefined },
-    ];
-
-    // Act
-    const expandedStepId = renderHook(() =>
-      useExpandedOnboardingId(onboardingState, loaded, visibleSteps),
-    ).result.current;
-
-    // Assert
-    expect(expandedStepId).toBe("explore-orders");
-  });
-
-  it("should return empty string when all steps are collapsed", () => {
-    // Arrange
-    const onboardingState = {
-      onboardingExpanded: true,
-      stepsCompleted: [],
-      stepsExpanded: {
-        "get-started": false,
-        "create-product": false,
-        "explore-orders": false,
-        "graphql-playground": false,
-        "view-extensions": false,
-        "invite-staff": false,
-      },
-    } as OnboardingState;
-    const loaded = true;
-    const visibleSteps: OnboardingStep[] = [
-      { id: "get-started", completed: false, expanded: false },
-      { id: "create-product", completed: false, expanded: false },
-      { id: "explore-orders", completed: false, expanded: false },
-      { id: "graphql-playground", completed: false, expanded: false },
-      { id: "view-extensions", completed: false, expanded: false },
-      { id: "invite-staff", completed: false, expanded: false },
-    ];
-
-    // Act
-    const expandedStepId = renderHook(() =>
-      useExpandedOnboardingId(onboardingState, loaded, visibleSteps),
-    ).result.current;
-
-    // Assert
-    expect(expandedStepId).toBe("");
-  });
-
-  it("should return first not completed step after step competed", async () => {
-    // Arrange
-    const onboardingState = {
-      onboardingExpanded: true,
-      stepsCompleted: [],
-      stepsExpanded: {
-        "get-started": false,
-      },
-    } as unknown as OnboardingState;
-    const onboardingStateChanged = {
-      onboardingExpanded: true,
-      stepsCompleted: ["create-product"],
-      stepsExpanded: {
-        "get-started": false,
-      },
-    } as OnboardingState;
-    const loaded = true;
-    const visibleSteps: OnboardingStep[] = [
-      { id: "get-started", completed: false, expanded: false },
-      { id: "create-product", completed: false, expanded: undefined },
-      { id: "explore-orders", completed: false, expanded: undefined },
-      { id: "graphql-playground", completed: false, expanded: undefined },
-      { id: "view-extensions", completed: false, expanded: undefined },
-      { id: "invite-staff", completed: false, expanded: undefined },
-    ];
-
-    // Act
-    const { rerender, result } = renderHook(
-      ({ onboardingState, loaded, visibleSteps }) =>
-        useExpandedOnboardingId(onboardingState, loaded, visibleSteps),
-      {
-        initialProps: {
-          onboardingState,
-          loaded,
-          visibleSteps,
-        },
-      },
-    );
-
-    rerender({ onboardingState: onboardingStateChanged, loaded, visibleSteps });
-
-    // Assert
-    expect(result.current).toBe("explore-orders");
-  });
-
-  it("should return first expanded step after expand step toggle", async () => {
-    // Arrange
-    const onboardingState = {
-      onboardingExpanded: true,
-      stepsCompleted: ["get-started", "create-product"],
-      stepsExpanded: {
-        "get-started": false,
-      },
-    } as unknown as OnboardingState;
-
-    const onboardingStateChanged = {
-      onboardingExpanded: true,
-      stepsCompleted: ["get-started", "create-product"],
-      stepsExpanded: {
-        "get-started": false,
-        "explore-orders": true,
-      },
-    } as OnboardingState;
-    const loaded = true;
-    const visibleSteps: OnboardingStep[] = [
-      { id: "get-started", completed: true, expanded: false },
-      { id: "create-product", completed: true, expanded: undefined },
-      { id: "explore-orders", completed: false, expanded: undefined },
-      { id: "graphql-playground", completed: false, expanded: undefined },
-      { id: "view-extensions", completed: false, expanded: undefined },
-      { id: "invite-staff", completed: false, expanded: undefined },
-    ];
-
-    // Act
-    const { rerender, result } = renderHook(
-      ({ onboardingState, loaded, visibleSteps }) =>
-        useExpandedOnboardingId(onboardingState, loaded, visibleSteps),
-      {
-        initialProps: {
-          onboardingState,
-          loaded,
-          visibleSteps,
-        },
-      },
-    );
-
-    rerender({ onboardingState: onboardingStateChanged, loaded, visibleSteps });
-
-    // Assert
-    expect(result.current).toBe("explore-orders");
-  });
-});
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/useExpandedOnboardingId.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/useExpandedOnboardingId.ts
deleted file mode 100644
index 092de8b21c1..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/onboardingContext/useExpandedOnboardingId.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-import { type OnboardingState, type OnboardingStep, type OnboardingStepsIDs } from "./types";
-import {
-  getFirstExpanderStepId,
-  getFirstNotCompletedAndNotExpandedStep,
-  getNextStepToExpand,
-} from "./utils";
-
-export const useExpandedOnboardingId = (
-  onboardingState: OnboardingState,
-  loaded: boolean,
-  visibleSteps: OnboardingStep[],
-) => {
-  const hasBeenCalled = useRef(false);
-  const [expandedStepId, setExpandedStepId] = useState<OnboardingStepsIDs | "">("");
-
-  useEffect(() => {
-    if (hasBeenCalled.current) {
-      const firstExpandedStepId = getFirstExpanderStepId(onboardingState);
-
-      if (firstExpandedStepId) {
-        setExpandedStepId(firstExpandedStepId);
-      } else {
-        setExpandedStepId(getFirstNotCompletedAndNotExpandedStep(onboardingState, visibleSteps));
-      }
-    }
-  }, [onboardingState.stepsExpanded, visibleSteps]);
-
-  useEffect(() => {
-    // On every state change
-    if (hasBeenCalled.current) {
-      setExpandedStepId(getNextStepToExpand(onboardingState, visibleSteps));
-    }
-  }, [onboardingState.stepsCompleted, visibleSteps]);
-
-  useEffect(() => {
-    // On context first load
-    if (loaded && !hasBeenCalled.current) {
-      hasBeenCalled.current = true;
-
-      const firstExpandedStep = getFirstExpanderStepId(onboardingState);
-
-      if (firstExpandedStep) {
-        setExpandedStepId(firstExpandedStep);
-      } else {
-        setExpandedStepId(getFirstNotCompletedAndNotExpandedStep(onboardingState, visibleSteps));
-      }
-    }
-  }, [loaded, onboardingState, visibleSteps]);
-
-  return expandedStepId;
-};
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/useOnboardingStorage.test.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/useOnboardingStorage.test.ts
deleted file mode 100644
index 1346dea344f..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/onboardingContext/useOnboardingStorage.test.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import { useUser } from "@dashboard/auth/useUser";
-import { useSaveOnBoardingStateMutation } from "@dashboard/graphql";
-import { act, renderHook } from "@testing-library/react";
-
-import { type OnboardingStepsIDs } from "./types";
-import { useOnboardingStorage } from "./useOnboardingStorage";
-
-jest.mock("@dashboard/auth/useUser", () => ({
-  __esModule: true,
-  useUser: jest.fn(),
-}));
-
-jest.mock("@dashboard/graphql");
-
-jest.useFakeTimers();
-
-jest.mock("lodash/debounce", () => jest.fn(fn => fn));
-
-describe("useOnboardingStorage", () => {
-  describe("getOnboardingState", () => {
-    it("should return undefined when there is no onboarding in user metadata", () => {
-      // Arrange
-      (useUser as jest.Mock).mockImplementation(() => ({
-        user: { metadata: [{ key1: "value1" }, { key2: "value2" }] },
-      }));
-      (useSaveOnBoardingStateMutation as jest.Mock).mockReturnValue([jest.fn(), {}]);
-
-      const { getOnboardingState } = renderHook(() => useOnboardingStorage()).result.current;
-
-      // Act
-      const result = getOnboardingState();
-
-      // Assert
-      expect(result).toBeUndefined();
-    });
-
-    it("should return onboarding state from user metadata", () => {
-      // Arrange
-      (useUser as jest.Mock).mockImplementation(() => ({
-        user: {
-          metadata: [
-            {
-              key: "onboarding",
-              value: JSON.stringify({ steps: [], onboardingExpanded: true }),
-            },
-          ],
-        },
-      }));
-      (useSaveOnBoardingStateMutation as jest.Mock).mockReturnValue([jest.fn(), {}]);
-
-      const { getOnboardingState } = renderHook(() => useOnboardingStorage()).result.current;
-
-      // Act
-      const result = getOnboardingState();
-
-      // Assert
-      expect(result).toEqual({ steps: [], onboardingExpanded: true });
-    });
-  });
-
-  describe("saveOnboardingState", () => {
-    it("should not save onboarding state when there is no user", async () => {
-      // Arrange
-      (useUser as jest.Mock).mockImplementation(() => ({ user: null }));
-
-      const updateMetadataMock = jest.fn();
-
-      (useSaveOnBoardingStateMutation as jest.Mock).mockReturnValue([updateMetadataMock, {}]);
-
-      const { result } = renderHook(() => useOnboardingStorage());
-
-      // Act
-      const returnValue = await act(async () => {
-        return await result.current.saveOnboardingState({
-          stepsCompleted: [],
-          stepsExpanded: {} as Record<OnboardingStepsIDs, boolean>,
-          onboardingExpanded: true,
-        });
-      });
-
-      // Assert
-      expect(returnValue).toBeUndefined();
-      expect(updateMetadataMock).not.toHaveBeenCalled();
-    });
-
-    it("should save onboarding state to user metadata and be called only once", async () => {
-      // Arrange
-      (useUser as jest.Mock).mockImplementation(() => ({ user: { id: "1", metadata: [] } }));
-
-      const updateMetadataMock = jest.fn();
-
-      (useSaveOnBoardingStateMutation as jest.Mock).mockReturnValue([updateMetadataMock, {}]);
-
-      const { result } = renderHook(() => useOnboardingStorage());
-
-      // Act
-      await act(async () => {
-        await result.current.saveOnboardingState({
-          stepsCompleted: [],
-          stepsExpanded: {} as Record<OnboardingStepsIDs, boolean>,
-          onboardingExpanded: true,
-        });
-      });
-
-      jest.runAllTimers();
-
-      // Assert
-      expect(updateMetadataMock).toHaveBeenCalledTimes(1);
-      expect(updateMetadataMock).toHaveBeenCalledWith({
-        variables: {
-          id: "1",
-          input: [
-            {
-              key: "onboarding",
-              value: JSON.stringify({
-                stepsCompleted: [],
-                stepsExpanded: {} as Record<OnboardingStepsIDs, boolean>,
-                onboardingExpanded: true,
-              }),
-            },
-          ],
-        },
-      });
-    });
-  });
-});
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/useOnboardingStorage.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/useOnboardingStorage.ts
deleted file mode 100644
index dcd0cefc6ce..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/onboardingContext/useOnboardingStorage.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useUser } from "@dashboard/auth/useUser";
-import { useSaveOnBoardingStateMutation } from "@dashboard/graphql";
-import debounce from "lodash/debounce";
-import { useCallback, useMemo } from "react";
-
-import { type OnboardingState, type StorageService } from "../onboardingContext/types";
-import { METADATA_KEY, prepareUserMetadata } from "./utils";
-
-export const useOnboardingStorage = (): StorageService => {
-  const { user } = useUser();
-  const [saveOnboarding] = useSaveOnBoardingStateMutation({});
-
-  const getOnboardingState: StorageService["getOnboardingState"] = () => {
-    try {
-      const metadata = user?.metadata.find(m => m.key === METADATA_KEY);
-
-      if (!metadata) {
-        return undefined;
-      }
-
-      return JSON.parse(metadata.value);
-    } catch (error) {
-      console.warn("Could not get onboarding state from metadata", { error });
-
-      return undefined;
-    }
-  };
-
-  const saveOnboardingState: StorageService["saveOnboardingState"] = useCallback(
-    async (onboardingState: OnboardingState) => {
-      if (!user) {
-        return;
-      }
-
-      try {
-        const userMetadata = prepareUserMetadata(user?.metadata, onboardingState);
-
-        await saveOnboarding({
-          variables: {
-            id: user.id,
-            input: userMetadata,
-          },
-        });
-      } catch (error) {
-        console.warn("Could not save onboarding state to metadata");
-      }
-    },
-    [saveOnboarding, user],
-  );
-
-  const debouncedSaveOnboardingState = useMemo(
-    () => debounce(saveOnboardingState, 1000),
-    [saveOnboardingState],
-  ) as StorageService["saveOnboardingState"];
-
-  return {
-    getOnboardingState,
-    saveOnboardingState: debouncedSaveOnboardingState,
-  };
-};
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/utils.test.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/utils.test.ts
deleted file mode 100644
index 08213f2190c..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/onboardingContext/utils.test.ts
+++ /dev/null
@@ -1,377 +0,0 @@
-import { type MetadataInput } from "@dashboard/graphql";
-import {
-  type OnboardingState,
-  type OnboardingStep,
-  type OnboardingStepsIDs,
-} from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext/types";
-
-import {
-  getFirstExpanderStepId,
-  getFirstNotCompletedAndNotExpandedStep,
-  getNextStepToExpand,
-  handleStateChangeAfterStepCompleted,
-  handleStateChangeAfterToggle,
-  METADATA_KEY,
-  prepareUserMetadata,
-} from "./utils";
-
-describe("handleStateChangeAfterStepCompleted", () => {
-  it("should add the step to the completed steps", () => {
-    // Arrange
-    const state = {
-      onboardingExpanded: true,
-      stepsCompleted: [],
-      stepsExpanded: {},
-    } as unknown as OnboardingState;
-    const id = "get-started";
-
-    // Act
-    const newState = handleStateChangeAfterStepCompleted(state, id);
-
-    // Assert
-    expect(newState.stepsCompleted).toEqual(["get-started"]);
-  });
-
-  it("should add the step to the completed steps and add get-started if not already there", () => {
-    // Arrange
-    const state = {
-      onboardingExpanded: true,
-      stepsCompleted: [],
-      stepsExpanded: {},
-    } as unknown as OnboardingState;
-    const id = "create-product";
-
-    // Act
-    const newState = handleStateChangeAfterStepCompleted(state, id);
-
-    // Assert
-    expect(newState.stepsCompleted).toEqual(["get-started", "create-product"]);
-  });
-
-  it("should remove the step from stepsExpanded if it was expanded", () => {
-    // Arrange
-    const state = {
-      onboardingExpanded: true,
-      stepsCompleted: [],
-      stepsExpanded: { "create-product": true },
-    } as unknown as OnboardingState;
-    const id = "create-product";
-
-    // Act
-    const newState = handleStateChangeAfterStepCompleted(state, id);
-
-    // Assert
-    expect(newState.stepsCompleted).toEqual(["get-started", "create-product"]);
-    expect(newState.stepsExpanded["create-product"]).toBeUndefined();
-  });
-});
-
-describe("handleStateChangeAfterToggle", () => {
-  it("should set the expanded step id", () => {
-    // Arrange
-    const state = {
-      onboardingExpanded: true,
-      stepsCompleted: [],
-      stepsExpanded: {},
-    } as unknown as OnboardingState;
-    const expandedId = "get-started";
-    const id = "get-started";
-
-    // Act
-    const newState = handleStateChangeAfterToggle(state, expandedId, id);
-
-    // Assert
-    expect(newState.stepsExpanded).toEqual({ "get-started": true });
-  });
-
-  it("should toggle expanded step", () => {
-    // Arrange
-    const state = {
-      onboardingExpanded: true,
-      stepsCompleted: [],
-      stepsExpanded: { "get-started": true },
-    } as unknown as OnboardingState;
-    const expandedId = "get-started";
-    const id = "";
-
-    // Act
-    const newState = handleStateChangeAfterToggle(state, expandedId, id);
-
-    // Assert
-    expect(newState.stepsExpanded).toEqual({ "get-started": false });
-  });
-
-  it("should set the expanded step id and remove the previous one", () => {
-    // Arrange
-    const state = {
-      onboardingExpanded: true,
-      stepsCompleted: [],
-      stepsExpanded: { "get-started": true, "invite-staff": false },
-    } as unknown as OnboardingState;
-    const expandedId = "create-product";
-    const id = "create-product";
-
-    // Act
-    const newState = handleStateChangeAfterToggle(state, expandedId, id);
-
-    // Assert
-    expect(newState.stepsExpanded).toEqual({ "create-product": true, "invite-staff": false });
-  });
-
-  it("should clear other expanded steps when a new step is expanded", () => {
-    // Arrange
-    const state = {
-      onboardingExpanded: true,
-      stepsCompleted: [],
-      stepsExpanded: {
-        "get-started": true,
-        "explore-orders": true,
-      },
-    } as unknown as OnboardingState;
-    const expandedId = "create-product";
-    const id = "create-product";
-
-    // Act
-    const newState = handleStateChangeAfterToggle(state, expandedId, id);
-
-    // Assert
-    expect(newState.stepsExpanded).toEqual({ "create-product": true });
-  });
-});
-
-describe("getFirstExpanderStepId", () => {
-  it("should return the first expanded step id", () => {
-    // Arrange
-    const onboardingState = {
-      stepsCompleted: ["get-started"],
-      stepsExpanded: {
-        "create-product": true,
-      },
-    } as OnboardingState;
-
-    // Act
-    const firstExpandedStepId = getFirstExpanderStepId(onboardingState);
-
-    // Assert
-    expect(firstExpandedStepId).toBe("create-product");
-  });
-
-  it("should return empty string when no step is expanded", () => {
-    // Arrange
-    const onboardingState = {
-      stepsCompleted: ["get-started", "create-product"],
-      stepsExpanded: { "get-started": false },
-    } as OnboardingState;
-
-    // Act
-    const firstExpandedStepId = getFirstExpanderStepId(onboardingState);
-
-    // Assert
-    expect(firstExpandedStepId).toBe("");
-  });
-});
-
-describe("getFirstNotCompletedAndNotExpandedStep", () => {
-  it("should return the first not completed and not expanded step", () => {
-    // Arrange
-    const onboardingState = {
-      stepsCompleted: ["get-started"],
-      stepsExpanded: {
-        "create-product": false,
-      },
-    } as OnboardingState;
-    const visibleSteps: OnboardingStep[] = [
-      { id: "get-started", completed: true, expanded: undefined },
-      { id: "create-product", completed: false, expanded: false },
-      { id: "explore-orders", completed: false, expanded: undefined },
-      { id: "graphql-playground", completed: false, expanded: undefined },
-      { id: "view-extensions", completed: false, expanded: undefined },
-      { id: "invite-staff", completed: false, expanded: undefined },
-    ];
-
-    // Act
-    const firstNotCompletedStep = getFirstNotCompletedAndNotExpandedStep(
-      onboardingState,
-      visibleSteps,
-    );
-
-    // Assert
-    expect(firstNotCompletedStep).toEqual("explore-orders");
-  });
-
-  it("should return empty string when all steps are completed", () => {
-    // Arrange
-    const onboardingState = {
-      stepsCompleted: [
-        "get-started",
-        "create-product",
-        "explore-orders",
-        "graphql-playground",
-        "view-extensions",
-        "invite-staff",
-      ],
-      stepsExpanded: {},
-    } as OnboardingState;
-    const visibleSteps: OnboardingStep[] = [
-      { id: "get-started", completed: true, expanded: undefined },
-      { id: "create-product", completed: true, expanded: undefined },
-      { id: "explore-orders", completed: true, expanded: undefined },
-      { id: "graphql-playground", completed: true, expanded: undefined },
-      { id: "view-extensions", completed: true, expanded: undefined },
-      { id: "invite-staff", completed: true, expanded: undefined },
-    ];
-
-    // Act
-    const firstNotCompletedStep = getFirstNotCompletedAndNotExpandedStep(
-      onboardingState,
-      visibleSteps,
-    );
-
-    // Assert
-    expect(firstNotCompletedStep).toEqual("");
-  });
-});
-
-describe("getNextStepToExpand", () => {
-  it("should return the first step after last completed", () => {
-    // Arrange
-    const onboardingState = {
-      stepsCompleted: ["create-product"],
-      stepsExpanded: {},
-    } as OnboardingState;
-    const visibleSteps: OnboardingStep[] = [
-      { id: "get-started", completed: true, expanded: undefined },
-      { id: "create-product", completed: true, expanded: undefined },
-      { id: "explore-orders", completed: false, expanded: undefined },
-      { id: "graphql-playground", completed: false, expanded: undefined },
-      { id: "view-extensions", completed: false, expanded: undefined },
-      { id: "invite-staff", completed: false, expanded: undefined },
-    ];
-
-    // Act
-    const nextStep = getNextStepToExpand(onboardingState, visibleSteps);
-
-    // Assert
-    expect(nextStep).toEqual("explore-orders");
-  });
-
-  it("should return empty string when no next step after last completed", () => {
-    // Arrange
-    const onboardingState = {
-      stepsCompleted: ["invite-staff"],
-      stepsExpanded: {},
-    } as OnboardingState;
-    const visibleSteps: OnboardingStep[] = [
-      { id: "get-started", completed: true, expanded: undefined },
-      { id: "create-product", completed: true, expanded: undefined },
-      { id: "explore-orders", completed: true, expanded: undefined },
-      { id: "graphql-playground", completed: true, expanded: undefined },
-      { id: "view-extensions", completed: true, expanded: undefined },
-      { id: "invite-staff", completed: true, expanded: undefined },
-    ];
-
-    // Act
-    const nextStep = getNextStepToExpand(onboardingState, visibleSteps);
-
-    // Assert
-    expect(nextStep).toEqual("");
-  });
-
-  it("should return empty string if lastCompletedStepId is not in visibleSteps", () => {
-    // Arrange
-    const onboardingState = {
-      stepsCompleted: ["non-existent-step" as OnboardingStepsIDs],
-      stepsExpanded: {},
-    } as OnboardingState;
-    const visibleSteps: OnboardingStep[] = [
-      { id: "get-started", completed: true, expanded: undefined },
-      { id: "create-product", completed: true, expanded: undefined },
-    ];
-
-    // Act
-    const nextStep = getNextStepToExpand(onboardingState, visibleSteps);
-
-    // Assert
-    expect(nextStep).toEqual("");
-  });
-});
-
-describe("prepareUserMetadata", () => {
-  const onboardingState: OnboardingState = {
-    onboardingExpanded: true,
-    stepsCompleted: ["get-started"],
-    stepsExpanded: { "create-product": true } as unknown as Record<OnboardingStepsIDs, boolean>,
-  };
-  const onboardingStateString = JSON.stringify(onboardingState);
-
-  it("should add onboarding metadata if metadata is undefined", () => {
-    // Arrange
-    const metadata = undefined;
-
-    // Act
-    const result = prepareUserMetadata(metadata, onboardingState);
-
-    // Assert
-    expect(result).toEqual([
-      {
-        key: METADATA_KEY,
-        value: onboardingStateString,
-      },
-    ]);
-  });
-
-  it("should add onboarding metadata if key is not present", () => {
-    // Arrange
-    const metadata: MetadataInput[] = [{ key: "otherKey", value: "otherValue" }];
-
-    // Act
-    const result = prepareUserMetadata(metadata, onboardingState);
-
-    // Assert
-    expect(result).toEqual([
-      { key: "otherKey", value: "otherValue" },
-      {
-        key: METADATA_KEY,
-        value: onboardingStateString,
-      },
-    ]);
-  });
-
-  it("should update onboarding metadata if key is present", () => {
-    // Arrange
-    const metadata: MetadataInput[] = [
-      { key: "otherKey", value: "otherValue" },
-      { key: METADATA_KEY, value: "oldValue" },
-    ];
-
-    // Act
-    const result = prepareUserMetadata(metadata, onboardingState);
-
-    // Assert
-    expect(result).toEqual([
-      { key: "otherKey", value: "otherValue" },
-      {
-        key: METADATA_KEY,
-        value: onboardingStateString,
-      },
-    ]);
-    // Ensure the original position is updated, not appended
-    expect(result.findIndex(m => m.key === METADATA_KEY)).toBe(1);
-  });
-
-  it("should handle empty initial metadata array", () => {
-    // Arrange
-    const metadata: MetadataInput[] = [];
-
-    // Act
-    const result = prepareUserMetadata(metadata, onboardingState);
-
-    // Assert
-    expect(result).toEqual([
-      {
-        key: METADATA_KEY,
-        value: onboardingStateString,
-      },
-    ]);
-  });
-});
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/utils.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/utils.ts
deleted file mode 100644
index a74e3b12814..00000000000
--- a/src/welcomePage/WelcomePageOnboarding/onboardingContext/utils.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import { type MetadataInput } from "@dashboard/graphql";
-
-import { type OnboardingState, type OnboardingStep, type OnboardingStepsIDs } from "./types";
-
-// Helper functions
-const cloneMetadata = (data: MetadataInput): MetadataInput => ({
-  key: data.key,
-  value: data.value,
-});
-
-const byKey = (keyToFind: string) => (metadataItem: { key: string }) =>
-  metadataItem.key === keyToFind;
-
-const isEntryValueTrue = ([_id, value]: [string, boolean]): boolean => value;
-
-const toStepWithClientState =
-  (state: OnboardingState) =>
-  (
-    step: OnboardingStep,
-  ): OnboardingStep & { completed: boolean; expanded: boolean | undefined } => ({
-    ...step,
-    completed: state.stepsCompleted.includes(step.id),
-    expanded: state.stepsExpanded[step.id],
-  });
-
-const isStepNotCompletedAndNotCollapsed = (step: {
-  completed: boolean;
-  expanded: boolean | undefined;
-}): boolean => !step.completed && step.expanded !== false;
-
-const byStepId =
-  (idToFind: OnboardingStepsIDs) =>
-  (step: { id: OnboardingStepsIDs }): boolean =>
-    step.id === idToFind;
-
-export const handleStateChangeAfterStepCompleted = (
-  state: OnboardingState,
-  id: OnboardingStepsIDs,
-): OnboardingState => {
-  const newCompletedSteps = [...state.stepsCompleted];
-  const stepsExpanded = { ...state.stepsExpanded };
-
-  if (!newCompletedSteps.includes("get-started") && id !== "get-started") {
-    newCompletedSteps.push("get-started");
-  }
-
-  newCompletedSteps.push(id);
-
-  if (stepsExpanded[id]) {
-    delete stepsExpanded[id];
-  }
-
-  return {
-    ...state,
-    stepsExpanded,
-    stepsCompleted: newCompletedSteps,
-  };
-};
-
-export const handleStateChangeAfterToggle = (
-  state: OnboardingState,
-  expandedId: OnboardingStepsIDs,
-  id: string,
-): OnboardingState => {
-  const stepsExpanded = { ...state.stepsExpanded };
-
-  for (const key in stepsExpanded) {
-    if (stepsExpanded[key as OnboardingStepsIDs]) {
-      delete stepsExpanded[key as OnboardingStepsIDs];
-    }
-  }
-
-  stepsExpanded[expandedId as OnboardingStepsIDs] = id !== "";
-
-  return {
-    ...state,
-    stepsExpanded,
-  };
-};
-
-export const getFirstExpanderStepId = (onboardingState: OnboardingState) => {
-  const stepsExpandedEntries = Object.entries(onboardingState.stepsExpanded);
-
-  return (stepsExpandedEntries.find(isEntryValueTrue)?.[0] ?? "") as OnboardingStepsIDs;
-};
-
-export const getFirstNotCompletedAndNotExpandedStep = (
-  onboardingState: OnboardingState,
-  visibleSteps: OnboardingStep[],
-): OnboardingStepsIDs | "" => {
-  const stepsWithState = visibleSteps.map(toStepWithClientState(onboardingState));
-
-  return stepsWithState.find(isStepNotCompletedAndNotCollapsed)?.id ?? "";
-};
-
-export const getNextStepToExpand = (
-  onboardingState: OnboardingState,
-  visibleSteps: OnboardingStep[],
-): OnboardingStepsIDs | "" => {
-  const lastCompletedStepId =
-    onboardingState.stepsCompleted[onboardingState.stepsCompleted.length - 1];
-
-  const stepsWithState = visibleSteps.map(toStepWithClientState(onboardingState));
-
-  const stepIndex = stepsWithState.findIndex(byStepId(lastCompletedStepId));
-
-  if (stepIndex === -1 || stepIndex === stepsWithState.length - 1) {
-    return "";
-  }
-
-  return stepsWithState.slice(stepIndex + 1).find(isStepNotCompletedAndNotCollapsed)?.id ?? "";
-};
-
-export const METADATA_KEY = "onboarding";
-
-export const prepareUserMetadata = (
-  metadata: MetadataInput[] | undefined,
-  onboardingState: OnboardingState,
-) => {
-  const userMetadata: MetadataInput[] = metadata?.map(cloneMetadata) ?? [];
-  const metadataValue = JSON.stringify(onboardingState);
-  const metadataIndex = userMetadata.findIndex(byKey(METADATA_KEY));
-
-  if (metadataIndex !== -1) {
-    userMetadata[metadataIndex] = {
-      key: METADATA_KEY,
-      value: metadataValue,
-    };
-  } else {
-    userMetadata.push({
-      key: METADATA_KEY,
-      value: metadataValue,
-    });
-  }
-
-  return userMetadata;
-};
diff --git a/src/welcomePage/WelcomePageSidebar/WelcmePageSidebar.test.tsx b/src/welcomePage/WelcomePageSidebar/WelcmePageSidebar.test.tsx
deleted file mode 100644
index 7a0cb52dfc9..00000000000
--- a/src/welcomePage/WelcomePageSidebar/WelcmePageSidebar.test.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { useUserPermissions } from "@dashboard/auth/hooks/useUserPermissions";
-import { channelsList } from "@dashboard/channels/fixtures";
-import { type ChannelFragment, PermissionEnum } from "@dashboard/graphql";
-import { act, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { activities } from "../fixtures";
-import { WelcomePageSidebar } from "./WelcomePageSidebar";
-
-jest.mock("@dashboard/auth/hooks/useUserPermissions");
-jest.mock("./components/WelcomePageActivities/useWelcomePageActivities", () => ({
-  useWelcomePageActivities: jest.fn(() => ({ activities, loading: false })),
-}));
-jest.mock("./components/WelcomePageSalesAnalytics/useWelcomePageSalesAnalytics", () => ({
-  useWelcomePageSalesAnalytics: jest.fn(() => ({
-    analytics: {
-      sales: {
-        amount: 1000,
-        currency: "USD",
-      },
-    },
-    loading: false,
-  })),
-}));
-jest.mock("./components/WelcomePageStocksAnalytics/useWelcomePageStocksAnalytics", () => ({
-  useWelcomePageStocksAnalytics: jest.fn(() => ({
-    analytics: {
-      productsOutOfStock: 10,
-    },
-    loading: false,
-  })),
-}));
-
-jest.mock("@dashboard/hooks/useNotifier", () => ({
-  useNotifier: jest.fn(() => () => undefined),
-}));
-
-afterEach(() => {
-  jest.clearAllMocks();
-});
-
-describe("WelcomePageSidebar", () => {
-  it("should render chanel select, analytics and activities when user has permission to manage orders ", async () => {
-    // Arrange
-    (useUserPermissions as jest.Mock).mockReturnValue([{ code: PermissionEnum.MANAGE_ORDERS }]);
-
-    const channel = channelsList[0] as ChannelFragment;
-    const setChannel = jest.fn();
-
-    render(
-      <WelcomePageSidebar
-        channel={channel}
-        setChannel={setChannel}
-        channels={channelsList}
-        hasPermissionToManageOrders={true}
-      />,
-    );
-
-    // Assert
-    expect(screen.getByTestId("app-channel-select")).toBeInTheDocument();
-
-    // Check sales analytics
-    expect(screen.getByTestId("sales-analytics")).toHaveTextContent("1,000.00");
-    expect(screen.getByTestId("sales-analytics")).toHaveTextContent("USD");
-
-    // Check out-of-stock analytics
-    expect(screen.getByTestId("out-of-stock-analytics")).toHaveTextContent("10");
-
-    // Check activities
-    expect(screen.getByTestId("activity-card")).toBeInTheDocument();
-    expect(
-      screen.getByText("Order #{orderId} was placed from draft by {userEmail}"),
-    ).toBeInTheDocument();
-    expect(screen.getByText("Order #{orderId} was fully paid")).toBeInTheDocument();
-  });
-
-  it("should render only channel select when user has no permission to manage orders ", async () => {
-    // Arrange
-    (useUserPermissions as jest.Mock).mockReturnValue([]);
-
-    const channel = channelsList[0] as ChannelFragment;
-    const setChannel = jest.fn();
-
-    render(
-      <WelcomePageSidebar
-        channel={channel}
-        setChannel={setChannel}
-        channels={channelsList}
-        hasPermissionToManageOrders={false}
-      />,
-    );
-
-    // Assert
-    expect(screen.getByTestId("app-channel-select")).toBeInTheDocument();
-    expect(screen.queryByTestId("sales-analytics")).not.toBeInTheDocument();
-    expect(screen.queryByTestId("out-of-stock-analytics")).not.toBeInTheDocument();
-    expect(screen.queryByTestId("activity-card")).not.toBeInTheDocument();
-  });
-
-  it("should allow to change channel", async () => {
-    // Arrange
-    const channel = channelsList[0] as ChannelFragment;
-    const setChannel = jest.fn();
-
-    render(
-      <WelcomePageSidebar
-        channel={channel}
-        setChannel={setChannel}
-        channels={channelsList}
-        hasPermissionToManageOrders={true}
-      />,
-    );
-
-    // Act
-
-    await act(async () => {
-      await userEvent.click(screen.getByRole("combobox"));
-    });
-
-    await act(async () => {
-      await userEvent.click(screen.getAllByTestId("select-option")[1]);
-    });
-
-    // Assert
-    expect(setChannel).toHaveBeenCalledWith(channelsList[1].id);
-  });
-});
diff --git a/src/welcomePage/WelcomePageSidebar/WelcomePageSidebar.tsx b/src/welcomePage/WelcomePageSidebar/WelcomePageSidebar.tsx
deleted file mode 100644
index 658af9451f1..00000000000
--- a/src/welcomePage/WelcomePageSidebar/WelcomePageSidebar.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import AppChannelSelect from "@dashboard/components/AppLayout/AppChannelSelect";
-import { DashboardCard } from "@dashboard/components/Card";
-import RequirePermissions from "@dashboard/components/RequirePermissions";
-import { type ChannelFragment, PermissionEnum } from "@dashboard/graphql";
-import { Box, Text } from "@saleor/macaw-ui-next";
-import { FormattedMessage } from "react-intl";
-
-import { WelcomePageActivities } from "./components/WelcomePageActivities";
-import { WelcomePageSalesAnalytics } from "./components/WelcomePageSalesAnalytics";
-import { WelcomePageStocksAnalytics } from "./components/WelcomePageStocksAnalytics";
-import { WelcomePageSidebarContextProvider } from "./context/WelcomePageSidebarContextProvider";
-
-interface HomeSidebarProps {
-  channel: ChannelFragment | undefined;
-  setChannel: (channelId: string) => void;
-  channels: ChannelFragment[];
-  hasPermissionToManageOrders: boolean;
-}
-
-export const WelcomePageSidebar = (props: HomeSidebarProps) => {
-  return (
-    <WelcomePageSidebarContextProvider {...props}>
-      <DashboardCard borderRadius={3} borderWidth={1} borderStyle="solid" borderColor="default1">
-        <DashboardCard.Header gap={3} display="flex" flexWrap="wrap">
-          <DashboardCard.Title>
-            <Text size={8}>
-              <FormattedMessage
-                defaultMessage="Your store info"
-                id="x0wum5"
-                description="home sidebar card title"
-              />
-            </Text>
-          </DashboardCard.Title>
-
-          <AppChannelSelect
-            channels={props.channels}
-            selectedChannelId={props.channel?.id ?? ""}
-            onChannelSelect={props.setChannel}
-          />
-        </DashboardCard.Header>
-        <DashboardCard.Content>
-          <RequirePermissions requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}>
-            <Box display="grid" gap={5} marginBottom={7}>
-              <WelcomePageSalesAnalytics />
-              <WelcomePageStocksAnalytics />
-            </Box>
-          </RequirePermissions>
-          <WelcomePageActivities />
-        </DashboardCard.Content>
-      </DashboardCard>
-    </WelcomePageSidebarContextProvider>
-  );
-};
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/WelcomePageActivities.tsx b/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/WelcomePageActivities.tsx
deleted file mode 100644
index 39719665875..00000000000
--- a/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/WelcomePageActivities.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { DashboardCard } from "@dashboard/components/Card";
-import { DateTime } from "@dashboard/components/Date/DateTime";
-import { renderCollection } from "@dashboard/misc";
-import { Box, List, Skeleton, Text } from "@saleor/macaw-ui-next";
-import { FormattedMessage, useIntl } from "react-intl";
-
-import { useWelcomePageSidebarContext } from "../../context/welcomePageSidebarContext";
-import { getActivityMessage } from "./activityMessages";
-import { useWelcomePageActivities } from "./useWelcomePageActivities";
-
-export const WelcomePageActivities = () => {
-  const intl = useIntl();
-  const { hasPermissionToManageOrders } = useWelcomePageSidebarContext();
-  const { activities, loading, hasError } = useWelcomePageActivities();
-
-  const title = intl.formatMessage({
-    id: "BXkF8Z",
-    defaultMessage: "Activity",
-    description: "header",
-  });
-
-  if (!hasPermissionToManageOrders || !activities) {
-    return null;
-  }
-
-  if (hasError) {
-    return (
-      <DashboardCard data-test-id="activity-card">
-        <DashboardCard.Header paddingX={3}>
-          <DashboardCard.Title>{title}</DashboardCard.Title>
-        </DashboardCard.Header>
-        <DashboardCard.Content paddingX={3}>
-          <Text color="default2">
-            <FormattedMessage id="/U8FUp" defaultMessage="Couldn't load activities" />
-          </Text>
-        </DashboardCard.Content>
-      </DashboardCard>
-    );
-  }
-
-  if (loading) {
-    return (
-      <DashboardCard data-test-id="activity-card">
-        <DashboardCard.Header paddingX={3}>
-          <DashboardCard.Title>{title}</DashboardCard.Title>
-        </DashboardCard.Header>
-        <DashboardCard.Content paddingX={3} paddingBottom={6}>
-          <Box display="flex" flexDirection="column" gap={5}>
-            <Skeleton height={3} />
-            <Skeleton __width="80%" height={3} />
-            <Skeleton height={3} />
-          </Box>
-        </DashboardCard.Content>
-      </DashboardCard>
-    );
-  }
-
-  return (
-    <DashboardCard data-test-id="activity-card">
-      <DashboardCard.Header paddingX={3}>
-        <DashboardCard.Title>{title}</DashboardCard.Title>
-      </DashboardCard.Header>
-      <DashboardCard.Content paddingX={3} paddingBottom={5}>
-        <List>
-          {renderCollection(
-            activities,
-            (activity, activityId) => (
-              <List.Item
-                key={activityId}
-                flexDirection="column"
-                alignItems="flex-start"
-                cursor="auto"
-                paddingY={1}
-                marginBottom={3}
-                backgroundColor={{
-                  default: "transparent",
-                  hover: "default1Hovered",
-                }}
-              >
-                {activity ? (
-                  <>
-                    <Text size={3}>{getActivityMessage(activity, intl)}</Text>
-                    <Text size={3} color="default2">
-                      <DateTime date={activity.date} plain />
-                    </Text>
-                  </>
-                ) : (
-                  <Box paddingY={4}>
-                    <Skeleton />
-                  </Box>
-                )}
-              </List.Item>
-            ),
-            () => (
-              <Box paddingY={4}>
-                <Text size={3}>
-                  <FormattedMessage id="wWTUrM" defaultMessage="No activities found" />
-                </Text>
-              </Box>
-            ),
-          )}
-        </List>
-      </DashboardCard.Content>
-    </DashboardCard>
-  );
-};
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/activityMessages.ts b/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/activityMessages.ts
deleted file mode 100644
index 96dbeed3d8f..00000000000
--- a/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/activityMessages.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { OrderEventsEnum, type WelcomePageActivitiesQuery } from "@dashboard/graphql";
-import { defineMessages, type IntlShape } from "react-intl";
-
-const messages = defineMessages({
-  draft: {
-    id: "sjRXXz",
-    defaultMessage: "Order #{orderId} was placed from draft by {userEmail}",
-  },
-  draft_no_email: {
-    id: "BNTZLv",
-    defaultMessage: "Order #{orderId} was placed from draft",
-  },
-  paid: {
-    id: "5SPHkk",
-    defaultMessage: "Order #{orderId} was fully paid",
-  },
-  placed: {
-    id: "0dPP8O",
-    defaultMessage: "Order #{orderId} was placed",
-  },
-});
-
-export const getActivityMessage = (
-  activity: NonNullable<WelcomePageActivitiesQuery["activities"]>["edges"][0]["node"],
-  intl: IntlShape,
-) => {
-  switch (activity.type) {
-    case OrderEventsEnum.ORDER_FULLY_PAID:
-      return intl.formatMessage(messages.paid, {
-        orderId: activity.orderNumber,
-      });
-    case OrderEventsEnum.PLACED:
-      return intl.formatMessage(messages.placed, {
-        orderId: activity.orderNumber,
-      });
-    case OrderEventsEnum.PLACED_FROM_DRAFT:
-      if (activity.user?.email) {
-        return intl.formatMessage(messages.draft, {
-          orderId: activity.orderNumber,
-          userEmail: activity.user?.email,
-        });
-      } else {
-        return intl.formatMessage(messages.draft_no_email, {
-          orderId: activity.orderNumber,
-        });
-      }
-
-    default:
-      return activity.message;
-  }
-};
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/index.ts b/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/index.ts
deleted file mode 100644
index bc6f56a823c..00000000000
--- a/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { WelcomePageActivities } from "./WelcomePageActivities";
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/useWelcomePageActivities.tsx b/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/useWelcomePageActivities.tsx
deleted file mode 100644
index ff2fc837b7c..00000000000
--- a/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/useWelcomePageActivities.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useWelcomePageActivitiesQuery } from "@dashboard/graphql";
-import { mapEdgesToItems } from "@dashboard/utils/maps";
-
-import { useWelcomePageSidebarContext } from "../../context/welcomePageSidebarContext";
-
-export const useWelcomePageActivities = () => {
-  const { hasNoChannels, hasPermissionToManageOrders } = useWelcomePageSidebarContext();
-
-  const {
-    data: welcomePageActivities,
-    loading: welcomePageActivitiesLoading,
-    error: welcomePageActivitiesError,
-  } = useWelcomePageActivitiesQuery({
-    skip: hasNoChannels,
-    variables: {
-      hasPermissionToManageOrders,
-    },
-  });
-
-  return {
-    activities: mapEdgesToItems(welcomePageActivities?.activities)?.reverse(),
-    loading: welcomePageActivitiesLoading,
-    hasError: !!welcomePageActivitiesError,
-  };
-};
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageAnalyticsCard.tsx b/src/welcomePage/WelcomePageSidebar/components/WelcomePageAnalyticsCard.tsx
deleted file mode 100644
index d7fc0704db7..00000000000
--- a/src/welcomePage/WelcomePageSidebar/components/WelcomePageAnalyticsCard.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Box, Text } from "@saleor/macaw-ui-next";
-import type * as React from "react";
-import { FormattedMessage } from "react-intl";
-
-interface WelcomePageAnalyticsCardProps {
-  testId?: string;
-  title: string;
-  children?: React.ReactNode;
-}
-
-export const WelcomePageAnalyticsCard = ({
-  children,
-  title,
-  testId,
-}: WelcomePageAnalyticsCardProps) => (
-  <Box
-    borderWidth={1}
-    borderStyle="solid"
-    borderColor="default1"
-    borderRadius={3}
-    paddingX={3}
-    paddingY={5}
-    display="flex"
-    justifyContent="space-between"
-    data-test-id={testId}
-  >
-    <Box display="flex" flexDirection="column" gap={0.5}>
-      <Text size={5}>{title}</Text>
-      <Text size={2} color="default1">
-        <FormattedMessage id="zWgbGg" defaultMessage="Today" />
-      </Text>
-    </Box>
-    <Text as="h4" size={5} fontWeight="bold">
-      {children}
-    </Text>
-  </Box>
-);
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/WelcomePageSalesAnalytics.tsx b/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/WelcomePageSalesAnalytics.tsx
deleted file mode 100644
index 837b5075f7e..00000000000
--- a/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/WelcomePageSalesAnalytics.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import useAppChannel from "@dashboard/components/AppLayout/AppChannelContext";
-import Money from "@dashboard/components/Money";
-import { Skeleton } from "@saleor/macaw-ui-next";
-import { useIntl } from "react-intl";
-
-import { welcomePageMessages } from "../../messages";
-import { WelcomePageAnalyticsCard } from "../WelcomePageAnalyticsCard";
-import { useWelcomePageSalesAnalytics } from "./useWelcomePageSalesAnalytics";
-
-export const WelcomePageSalesAnalytics = () => {
-  const intl = useIntl();
-  const { channel } = useAppChannel();
-  const noChannel = !channel && typeof channel !== "undefined";
-  const { analytics, loading, hasError } = useWelcomePageSalesAnalytics();
-
-  return (
-    <WelcomePageAnalyticsCard
-      title={intl.formatMessage(welcomePageMessages.salesCardTitle)}
-      testId="sales-analytics"
-    >
-      {noChannel || hasError ? (
-        0
-      ) : !loading ? (
-        <Money money={analytics.sales} />
-      ) : (
-        <Skeleton width={10} height={3} />
-      )}
-    </WelcomePageAnalyticsCard>
-  );
-};
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/index.ts b/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/index.ts
deleted file mode 100644
index 58f709c886b..00000000000
--- a/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { WelcomePageSalesAnalytics } from "./WelcomePageSalesAnalytics";
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/useWelcomePageSalesAnalytics.ts b/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/useWelcomePageSalesAnalytics.ts
deleted file mode 100644
index ebf4ba06bc4..00000000000
--- a/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/useWelcomePageSalesAnalytics.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useWelcomePageAnalyticsQuery } from "@dashboard/graphql";
-
-import { useWelcomePageSidebarContext } from "../../context/welcomePageSidebarContext";
-
-export const useWelcomePageSalesAnalytics = () => {
-  const { selectedChannel, hasNoChannels, hasPermissionToManageOrders } =
-    useWelcomePageSidebarContext();
-
-  const {
-    data: welcomePageAnalyticsData,
-    loading: welcomePageAnalyticsLoading,
-    error: welcomePageAnalyticsError,
-  } = useWelcomePageAnalyticsQuery({
-    skip: hasNoChannels,
-    variables: {
-      channel: selectedChannel?.slug ?? "",
-      hasPermissionToManageOrders,
-    },
-  });
-
-  return {
-    analytics: {
-      sales: welcomePageAnalyticsData?.salesToday?.gross ?? null,
-    },
-    loading: welcomePageAnalyticsLoading,
-    hasError: !!welcomePageAnalyticsError,
-  };
-};
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/WelcomePageStocksAnalytics.tsx b/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/WelcomePageStocksAnalytics.tsx
deleted file mode 100644
index cc44e561f19..00000000000
--- a/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/WelcomePageStocksAnalytics.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Skeleton } from "@saleor/macaw-ui-next";
-import { useIntl } from "react-intl";
-
-import { useWelcomePageSidebarContext } from "../../context/welcomePageSidebarContext";
-import { welcomePageMessages } from "../../messages";
-import { WelcomePageAnalyticsCard } from "../WelcomePageAnalyticsCard";
-import { useWelcomePageStocksAnalytics } from "./useWelcomePageStocksAnalytics";
-
-export const WelcomePageStocksAnalytics = () => {
-  const intl = useIntl();
-  const { hasNoChannels } = useWelcomePageSidebarContext();
-  const { analytics, loading, hasError } = useWelcomePageStocksAnalytics();
-
-  return (
-    <WelcomePageAnalyticsCard
-      title={intl.formatMessage(welcomePageMessages.outOfStockCardTitle)}
-      testId="out-of-stock-analytics"
-    >
-      {hasNoChannels || hasError ? (
-        0
-      ) : !loading ? (
-        analytics.productsOutOfStock
-      ) : (
-        <Skeleton width={16} height={3} />
-      )}
-    </WelcomePageAnalyticsCard>
-  );
-};
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/index.ts b/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/index.ts
deleted file mode 100644
index b0a53756e1b..00000000000
--- a/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { WelcomePageStocksAnalytics } from "./WelcomePageStocksAnalytics";
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/useWelcomePageStocksAnalytics.ts b/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/useWelcomePageStocksAnalytics.ts
deleted file mode 100644
index 6c718d838c4..00000000000
--- a/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/useWelcomePageStocksAnalytics.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import useAppChannel from "@dashboard/components/AppLayout/AppChannelContext";
-import { useWelcomePageNotificationsQuery } from "@dashboard/graphql";
-
-export const useWelcomePageStocksAnalytics = () => {
-  const { channel } = useAppChannel();
-  const noChannel = !channel && typeof channel !== "undefined";
-
-  const {
-    data: welcomePageNotificationsData,
-    loading: welcomePageNotificationsLoading,
-    error: welcomePageNotificationsError,
-  } = useWelcomePageNotificationsQuery({
-    skip: noChannel,
-    variables: { channel: channel?.slug },
-  });
-
-  return {
-    analytics: {
-      productsOutOfStock: welcomePageNotificationsData?.productsOutOfStock?.totalCount ?? 0,
-    },
-    loading: welcomePageNotificationsLoading,
-    hasError: !!welcomePageNotificationsError,
-  };
-};
diff --git a/src/welcomePage/WelcomePageSidebar/context/WelcomePageSidebarContextProvider.tsx b/src/welcomePage/WelcomePageSidebar/context/WelcomePageSidebarContextProvider.tsx
deleted file mode 100644
index 929ab9e899c..00000000000
--- a/src/welcomePage/WelcomePageSidebar/context/WelcomePageSidebarContextProvider.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { type ChannelFragment } from "@dashboard/graphql";
-import type * as React from "react";
-
-import { WelcomePageSidebarContext } from "./welcomePageSidebarContext";
-
-interface WelcomePageSidebarContextProviderProps {
-  children: React.ReactNode;
-  channel: ChannelFragment | undefined;
-  setChannel: (channelId: string) => void;
-  channels: ChannelFragment[];
-  hasPermissionToManageOrders: boolean;
-}
-
-export const WelcomePageSidebarContextProvider = ({
-  children,
-  channel,
-  setChannel,
-  channels,
-  hasPermissionToManageOrders,
-}: WelcomePageSidebarContextProviderProps) => {
-  const hasNoChannels = !channel && typeof channel !== "undefined";
-
-  return (
-    <WelcomePageSidebarContext.Provider
-      value={{
-        selectedChannel: channel,
-        setChannel,
-        channels,
-        hasNoChannels,
-        hasPermissionToManageOrders,
-      }}
-    >
-      {children}
-    </WelcomePageSidebarContext.Provider>
-  );
-};
diff --git a/src/welcomePage/WelcomePageSidebar/context/welcomePageSidebarContext.ts b/src/welcomePage/WelcomePageSidebar/context/welcomePageSidebarContext.ts
deleted file mode 100644
index f1d4f07a06c..00000000000
--- a/src/welcomePage/WelcomePageSidebar/context/welcomePageSidebarContext.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { type ChannelFragment } from "@dashboard/graphql";
-import { createContext, useContext } from "react";
-
-export interface WelcomePageSidebarContext {
-  selectedChannel: ChannelFragment | undefined;
-  setChannel: (channelId: string) => void;
-  channels: ChannelFragment[];
-  hasNoChannels: boolean;
-  hasPermissionToManageOrders: boolean;
-}
-
-export const WelcomePageSidebarContext = createContext<WelcomePageSidebarContext | null>(null);
-
-export const useWelcomePageSidebarContext = () => {
-  const context = useContext(WelcomePageSidebarContext);
-
-  if (!context) {
-    throw new Error(
-      "WelcomePageSidebarContext is null. Make sure your component is wrapped in a <WelcomePageSidebarContext.Provider>",
-    );
-  }
-
-  return context;
-};
diff --git a/src/welcomePage/WelcomePageSidebar/index.ts b/src/welcomePage/WelcomePageSidebar/index.ts
deleted file mode 100644
index 7f2516cffdf..00000000000
--- a/src/welcomePage/WelcomePageSidebar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { WelcomePageSidebar } from "./WelcomePageSidebar";
diff --git a/src/welcomePage/WelcomePageSidebar/messages.ts b/src/welcomePage/WelcomePageSidebar/messages.ts
deleted file mode 100644
index 0e11eb8755f..00000000000
--- a/src/welcomePage/WelcomePageSidebar/messages.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { defineMessages } from "react-intl";
-
-export const welcomePageMessages = defineMessages({
-  salesCardTitle: {
-    defaultMessage: "Sales",
-    id: "c8nvms",
-  },
-  outOfStockCardTitle: {
-    defaultMessage: "Out of stock",
-    id: "WHgdsk",
-  },
-});
diff --git a/src/welcomePage/WelcomePageTilesContainer/WelcomePageInfoTile.tsx b/src/welcomePage/WelcomePageTilesContainer/WelcomePageInfoTile.tsx
deleted file mode 100644
index 89736d08ed1..00000000000
--- a/src/welcomePage/WelcomePageTilesContainer/WelcomePageInfoTile.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { DashboardCard } from "@dashboard/components/Card";
-import { type BoxProps } from "@saleor/macaw-ui-next";
-import type * as React from "react";
-
-export type WelcomePageInfoTileProps = {
-  id: string;
-  header: React.ReactNode;
-  content: React.ReactNode;
-  bottomActions: React.ReactNode;
-} & Omit<BoxProps, "content">;
-
-export const WelcomePageInfoTile = ({
-  id,
-  bottomActions,
-  content,
-  header,
-  ...props
-}: WelcomePageInfoTileProps) => (
-  <DashboardCard
-    backgroundColor="default1"
-    borderStyle="solid"
-    borderColor="default1"
-    borderRadius={3}
-    borderWidth={1}
-    display="flex"
-    flexDirection="column"
-    gap={4}
-    key={id}
-    margin={0}
-    {...props}
-  >
-    <DashboardCard.Header>
-      <DashboardCard.Title display="flex" alignItems="center" gap={3}>
-        {header}
-      </DashboardCard.Title>
-    </DashboardCard.Header>
-
-    <DashboardCard.Content>{content}</DashboardCard.Content>
-
-    <DashboardCard.BottomActions paddingTop={2} marginTop="auto">
-      {bottomActions}
-    </DashboardCard.BottomActions>
-  </DashboardCard>
-);
diff --git a/src/welcomePage/WelcomePageTilesContainer/WelcomePageTilesContainer.tsx b/src/welcomePage/WelcomePageTilesContainer/WelcomePageTilesContainer.tsx
deleted file mode 100644
index 3156c18f4a3..00000000000
--- a/src/welcomePage/WelcomePageTilesContainer/WelcomePageTilesContainer.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useAnalytics } from "@dashboard/components/ProductAnalytics/useAnalytics";
-import { Box } from "@saleor/macaw-ui-next";
-import { useIntl } from "react-intl";
-
-import { getTilesData } from "./tileData";
-import { WelcomePageInfoTile } from "./WelcomePageInfoTile";
-
-export const WelcomePageTilesContainer = () => {
-  const intl = useIntl();
-  const analytics = useAnalytics();
-
-  const handleTileButtonClick = (tileId: string) => {
-    analytics.trackEvent("home_tile_click", {
-      tile_id: tileId,
-    });
-  };
-
-  const tiles = getTilesData({ intl, onTileButtonClick: handleTileButtonClick });
-
-  return (
-    <Box
-      display="grid"
-      __gridTemplateColumns="repeat(auto-fill, minmax(min(100%, 400px), 1fr))"
-      gap={6}
-      marginTop={7}
-    >
-      {tiles.map(tile => (
-        <WelcomePageInfoTile key={tile.id} {...tile} />
-      ))}
-    </Box>
-  );
-};
diff --git a/src/welcomePage/WelcomePageTilesContainer/index.ts b/src/welcomePage/WelcomePageTilesContainer/index.ts
deleted file mode 100644
index 9cec726a45c..00000000000
--- a/src/welcomePage/WelcomePageTilesContainer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { WelcomePageTilesContainer } from "./WelcomePageTilesContainer";
diff --git a/src/welcomePage/WelcomePageTilesContainer/tileData.tsx b/src/welcomePage/WelcomePageTilesContainer/tileData.tsx
deleted file mode 100644
index aaac5fafc2e..00000000000
--- a/src/welcomePage/WelcomePageTilesContainer/tileData.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-import bag from "@assets/images/bag-icon.svg";
-import community from "@assets/images/community-icon.svg";
-import discord from "@assets/images/discord-icon.svg";
-import extension from "@assets/images/extension-icon.svg";
-import github from "@assets/images/github-logo.svg";
-import externalLink from "@assets/images/rounded-external-link-icon.svg";
-import star from "@assets/images/star-icon.svg";
-import { iconSize, iconStrokeWidth } from "@dashboard/components/icons";
-import {
-  APPS_OVERVIEW_DOCS_URL,
-  CHECKOUT_OVERVIEW_DOCS_URL,
-  DASHBOARD_DOCS_URL,
-  SALEOR_DISCORD_URL,
-  SALEOR_GITHUB_URL,
-  TECHNICAL_HELP_CTA_URL,
-} from "@dashboard/links";
-import { Button, Paragraph, sprinkles } from "@saleor/macaw-ui-next";
-import { HelpCircle } from "lucide-react";
-import SVG from "react-inlinesvg";
-import { FormattedMessage, type IntlShape } from "react-intl";
-
-import { type WelcomePageInfoTileProps } from "./WelcomePageInfoTile";
-
-const noShrink = sprinkles({ flexShrink: "0" });
-
-// Headings
-const CommunityIcon = () => <SVG src={community} className={noShrink} />;
-const StarIcon = () => <SVG src={star} className={noShrink} />;
-const ExtensionIcon = () => <SVG src={extension} className={noShrink} />;
-const BagIcon = () => <SVG src={bag} className={noShrink} />;
-
-// Bottom actions
-const GitHubIcon = () => <SVG src={github} className={noShrink} />;
-const DiscordIcon = () => <SVG src={discord} className={noShrink} />;
-const ExternalLinkIcon = () => <SVG src={externalLink} className={noShrink} />;
-
-export const getTilesData = ({
-  intl,
-  onTileButtonClick,
-}: {
-  intl: IntlShape;
-  onTileButtonClick: (tileId: string) => void;
-}): WelcomePageInfoTileProps[] => [
-  {
-    id: "technical-help",
-    header: (
-      <>
-        <HelpCircle size={iconSize.medium} strokeWidth={iconStrokeWidth} />
-        <FormattedMessage defaultMessage="Need technical help?" id="g9HrbF" />
-      </>
-    ),
-    content: (
-      <Paragraph>
-        <FormattedMessage
-          defaultMessage="Save hours of evaluating Saleor on your own by speaking with our solution engineer."
-          id="RABrGb"
-        />
-      </Paragraph>
-    ),
-    bottomActions: (
-      <Button
-        as="a"
-        target="_blank"
-        href={TECHNICAL_HELP_CTA_URL}
-        onClick={() => onTileButtonClick("technical-help")}
-        variant="primary"
-        alignSelf="start"
-      >
-        <FormattedMessage
-          defaultMessage="Get in touch"
-          id="HRXLYk"
-          description="cta button label"
-        />
-      </Button>
-    ),
-  },
-  {
-    id: "dashboard-updates",
-    header: (
-      <>
-        <StarIcon />
-        <FormattedMessage defaultMessage="Recent Dashboard Updates" id="z9f2oQ" />
-      </>
-    ),
-    content: (
-      <Paragraph>
-        <FormattedMessage
-          defaultMessage="Discover the latest enhancements, new features, fixes, and performance improvements that make your dashboard experience even better."
-          id="swOKYO"
-        />
-      </Paragraph>
-    ),
-    bottomActions: (
-      <Button
-        as="a"
-        target="_blank"
-        href={DASHBOARD_DOCS_URL}
-        onClick={() => onTileButtonClick("dashboard-updates")}
-        variant="secondary"
-        alignSelf="start"
-      >
-        <FormattedMessage
-          defaultMessage="Explore Updates"
-          id="zp9VHt"
-          description="cta button label"
-        />
-        <ExternalLinkIcon />
-      </Button>
-    ),
-  },
-  {
-    id: "saleor-app-store",
-    header: (
-      <>
-        <ExtensionIcon />
-        <FormattedMessage defaultMessage="Explore Saleor App Store" id="/H9LeU" />
-      </>
-    ),
-    content: (
-      <Paragraph>
-        <FormattedMessage
-          defaultMessage="Add new functionalities on top of Saleor and integrate it with third-party services. They can be installed, managed, and rendered in here in Saleor Dashboard."
-          id="XVQpjm"
-        />
-      </Paragraph>
-    ),
-    bottomActions: (
-      <Button
-        as="a"
-        target="_blank"
-        href={APPS_OVERVIEW_DOCS_URL}
-        variant="secondary"
-        alignSelf="start"
-        onClick={() => onTileButtonClick("saleor-app-store")}
-      >
-        <FormattedMessage
-          defaultMessage="View Documentation"
-          id="a+WuZg"
-          description="cta button label"
-        />
-        <ExternalLinkIcon />
-      </Button>
-    ),
-  },
-  {
-    id: "learn-checkout",
-    header: (
-      <>
-        <BagIcon />
-        <FormattedMessage defaultMessage="Learn Saleor checkout process flow" id="Cc3Z40" />
-      </>
-    ),
-    content: (
-      <Paragraph>
-        <FormattedMessage
-          defaultMessage="Full coverage of advanced checkout cases like split payments, split fulfillments, and orchestrated payments."
-          id="RBkNPr"
-        />
-      </Paragraph>
-    ),
-    bottomActions: (
-      <Button
-        as="a"
-        target="_blank"
-        href={CHECKOUT_OVERVIEW_DOCS_URL}
-        variant="secondary"
-        alignSelf="start"
-        onClick={() => onTileButtonClick("learn-checkout")}
-      >
-        <FormattedMessage
-          defaultMessage="View Documentation"
-          id="a+WuZg"
-          description="cta button label"
-        />
-        <ExternalLinkIcon />
-      </Button>
-    ),
-  },
-  {
-    id: "community",
-    header: (
-      <>
-        <CommunityIcon />
-        <FormattedMessage defaultMessage="Join the open source community" id="Wk00wL" />
-      </>
-    ),
-    content: (
-      <Paragraph>
-        <FormattedMessage
-          defaultMessage="Join our OS community of industry experts and learn more about open source at Saleor."
-          id="Tp5T7U"
-        />
-      </Paragraph>
-    ),
-    bottomActions: (
-      <>
-        <Button
-          as="a"
-          target="_blank"
-          href={SALEOR_GITHUB_URL}
-          onClick={() => onTileButtonClick("community-github")}
-          variant="secondary"
-          alignSelf="start"
-          marginTop="auto"
-        >
-          <GitHubIcon />
-          {intl.formatMessage({
-            defaultMessage: "GitHub",
-            id: "wO9wb5",
-          })}
-        </Button>
-
-        <Button
-          as="a"
-          target="_blank"
-          href={SALEOR_DISCORD_URL}
-          onClick={() => onTileButtonClick("community-discord")}
-          variant="secondary"
-          alignSelf="start"
-          marginTop="auto"
-        >
-          <DiscordIcon />
-          {intl.formatMessage({
-            defaultMessage: "Discord",
-            id: "FvmV6q",
-          })}
-        </Button>
-      </>
-    ),
-  },
-];
diff --git a/src/welcomePage/WelcomePageTitle.tsx b/src/welcomePage/WelcomePageTitle.tsx
deleted file mode 100644
index 262f7e6ba0b..00000000000
--- a/src/welcomePage/WelcomePageTitle.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useUser } from "@dashboard/auth/useUser";
-import { getUserName } from "@dashboard/misc";
-import { Text } from "@saleor/macaw-ui-next";
-import { FormattedMessage } from "react-intl";
-
-export const WelcomePageTitle = () => {
-  const { user } = useUser();
-  const userName = getUserName(user, true);
-
-  return (
-    <Text as="h1" size={9} data-test-id="home-header">
-      <FormattedMessage
-        defaultMessage="Hello {userName}, welcome to your Store Dashboard"
-        id="0+zatS"
-        values={{
-          userName,
-        }}
-      />
-    </Text>
-  );
-};
diff --git a/src/welcomePage/fixtures.ts b/src/welcomePage/fixtures.ts
deleted file mode 100644
index 241cd25671c..00000000000
--- a/src/welcomePage/fixtures.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { type ActivitiesFragment, OrderEventsEnum } from "@dashboard/graphql";
-
-export const activities = [
-  {
-    date: "2024-06-17T09:54:02.215733+00:00",
-    email: null,
-    message: null,
-    orderNumber: "3268",
-    type: OrderEventsEnum.PLACED_FROM_DRAFT,
-    user: {
-      email: "renata.gajzlerowicz@saleor.io",
-    },
-  },
-  {
-    date: "2024-06-17T09:56:22.893415+00:00",
-    email: null,
-    message: null,
-    orderNumber: "3268",
-    type: OrderEventsEnum.ORDER_FULLY_PAID,
-    user: null,
-  },
-] as ActivitiesFragment[];
diff --git a/src/welcomePage/index.ts b/src/welcomePage/index.ts
deleted file mode 100644
index f14245a9d75..00000000000
--- a/src/welcomePage/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { WelcomePage } from "./WelcomePage";
diff --git a/src/welcomePage/mutations.ts b/src/welcomePage/mutations.ts
deleted file mode 100644
index e25547b886d..00000000000
--- a/src/welcomePage/mutations.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { gql } from "@apollo/client";
-
-export const saveOnBoardingState = gql`
-  mutation SaveOnBoardingState($id: ID!, $input: [MetadataInput!]!) {
-    updateMetadata(id: $id, input: $input) {
-      errors {
-        ...MetadataError
-      }
-    }
-  }
-`;
diff --git a/src/welcomePage/queries.ts b/src/welcomePage/queries.ts
deleted file mode 100644
index d3e79838fb6..00000000000
--- a/src/welcomePage/queries.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { gql } from "@apollo/client";
-
-export const welcomePageActivities = gql`
-  query WelcomePageActivities($hasPermissionToManageOrders: Boolean!) {
-    activities: homepageEvents(last: 10) @include(if: $hasPermissionToManageOrders) {
-      edges {
-        node {
-          ...Activities
-        }
-      }
-    }
-  }
-`;
-
-export const welcomePageAnalytics = gql`
-  query WelcomePageAnalytics($channel: String!, $hasPermissionToManageOrders: Boolean!) {
-    salesToday: ordersTotal(period: TODAY, channel: $channel)
-      @include(if: $hasPermissionToManageOrders) {
-      gross {
-        amount
-        currency
-      }
-    }
-  }
-`;
-
-export const welcomePageNotifications = gql`
-  query welcomePageNotifications($channel: String!) {
-    productsOutOfStock: products(filter: { stockAvailability: OUT_OF_STOCK }, channel: $channel) {
-      totalCount
-    }
-  }
-`;

From dbbac1ef38c18a08073c34d26ef171ec8c993c8f Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Tue, 5 May 2026 10:39:37 +0200
Subject: [PATCH 02/18] ui improvements

---
 src/home/HomePage.tsx            | 15 ++++++++++++++-
 src/home/HomeWidgetView.tsx      | 22 ++++++----------------
 src/home/filterHomeExtensions.ts |  6 ++++++
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/home/HomePage.tsx b/src/home/HomePage.tsx
index f6d34ac2337..3244481308b 100644
--- a/src/home/HomePage.tsx
+++ b/src/home/HomePage.tsx
@@ -1,6 +1,8 @@
 import { useUser } from "@dashboard/auth/useUser";
 import { useExtensions } from "@dashboard/extensions/hooks/useExtensions";
+import { getUserName } from "@dashboard/misc";
 import { Box, Text } from "@saleor/macaw-ui-next";
+import { FormattedMessage } from "react-intl";
 import { useParams } from "react-router";
 import { Redirect } from "react-router-dom";
 
@@ -46,12 +48,23 @@ export const HomePage = () => {
     return <Redirect to={homeWidgetUrl(visibleExtensions[0].id)} />;
   }
 
+  const userName = getUserName(user, true);
+
   return (
     <Box display="flex" flexDirection="column" height="100%">
+      <Box paddingX={6} paddingTop={6}>
+        <Text size={6} fontWeight="bold" as="h1" data-test-id="welcome-header">
+          <FormattedMessage
+            id="0+zatS"
+            defaultMessage="Hello {userName}, welcome to your Store Dashboard"
+            values={{ userName }}
+          />
+        </Text>
+      </Box>
       <Box paddingX={6} paddingTop={4}>
         <HomeWidgetTabs extensions={visibleExtensions} activeExtensionId={activeExtension.id} />
       </Box>
-      <Box __flex="1" __minHeight={0}>
+      <Box padding={6} width="100%" __flex="1" __minHeight={0}>
         <HomeWidgetView extension={activeExtension} />
       </Box>
     </Box>
diff --git a/src/home/HomeWidgetView.tsx b/src/home/HomeWidgetView.tsx
index 58c0d95abc1..738de719725 100644
--- a/src/home/HomeWidgetView.tsx
+++ b/src/home/HomeWidgetView.tsx
@@ -1,35 +1,25 @@
-import { borderHeight, topBarHeight } from "@dashboard/components/AppLayout/consts";
 import { APP_VERSION } from "@dashboard/config";
 import { IframePost } from "@dashboard/extensions/components/IframePost/IframePost";
 import { appExtensionManifestOptionsSchema } from "@dashboard/extensions/domain/app-extension-manifest-options";
 import { isUrlAbsolute } from "@dashboard/extensions/isUrlAbsolute";
 import { type Extension } from "@dashboard/extensions/types";
 import { AppFrame } from "@dashboard/extensions/views/ViewManifestExtension/components/AppFrame/AppFrame";
-import { Box, Text } from "@saleor/macaw-ui-next";
+import { Box } from "@saleor/macaw-ui-next";
 
 interface HomeWidgetViewProps {
   extension: Extension;
 }
 
-const fullscreenHeight = `calc(100vh - ${borderHeight} - ${topBarHeight})`;
-
 export const HomeWidgetView = ({ extension }: HomeWidgetViewProps) => {
   const settings = appExtensionManifestOptionsSchema.safeParse(extension.settings);
   const method = settings.success ? (settings.data.homeWidget?.method ?? "POST") : "POST";
-  const isAbsolute = isUrlAbsolute(extension.url);
-  const extensionUrl = isAbsolute ? extension.url : `${extension.app.appUrl ?? ""}${extension.url}`;
-
-  if (!extensionUrl) {
-    return (
-      <Box padding={6}>
-        <Text>Extension URL is not configured.</Text>
-      </Box>
-    );
-  }
+  const extensionUrl = isUrlAbsolute(extension.url)
+    ? extension.url
+    : `${extension.app.appUrl}${extension.url}`;
 
   if (method === "POST") {
     return (
-      <Box position="relative" __height={fullscreenHeight} __minHeight={fullscreenHeight}>
+      <Box position="relative" width="100%" height="100%">
         <IframePost
           appId={extension.app.id}
           accessToken={extension.accessToken}
@@ -42,7 +32,7 @@ export const HomeWidgetView = ({ extension }: HomeWidgetViewProps) => {
   }
 
   return (
-    <Box position="relative" __lineHeight={0} height="100%" __minHeight={fullscreenHeight}>
+    <Box position="relative" __lineHeight={0} width="100%" height="100%">
       <AppFrame
         target="WIDGET"
         src={extensionUrl}
diff --git a/src/home/filterHomeExtensions.ts b/src/home/filterHomeExtensions.ts
index 35977f1b13f..90e8d579c18 100644
--- a/src/home/filterHomeExtensions.ts
+++ b/src/home/filterHomeExtensions.ts
@@ -1,5 +1,6 @@
 import { hasPermissions } from "@dashboard/components/RequirePermissions";
 import { appExtensionManifestOptionsSchema } from "@dashboard/extensions/domain/app-extension-manifest-options";
+import { isUrlAbsolute } from "@dashboard/extensions/isUrlAbsolute";
 import { type Extension } from "@dashboard/extensions/types";
 import { type UserPermissionFragment } from "@dashboard/graphql";
 
@@ -16,6 +17,11 @@ export const filterHomeExtensions = (
       return false;
     }
 
+    // Relative extension URLs require an appUrl to resolve against - skip when absent
+    if (!extension.url || (!isUrlAbsolute(extension.url) && !extension.app.appUrl)) {
+      return false;
+    }
+
     // fullscreen defaults to true when homeWidget is omitted or settings can't be parsed -
     // extensions without explicit homeWidget config are still considered fullscreen home widgets
     const settings = appExtensionManifestOptionsSchema.safeParse(extension.settings);

From 0a0f1d9a7a1bc33986ca720dcd3639b07004f4cb Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Tue, 5 May 2026 11:06:14 +0200
Subject: [PATCH 03/18] app logo

---
 .env.template                                 |  2 +
 src/config.ts                                 |  3 +
 .../components/IframePost/IframePost.tsx      | 18 +++-
 src/home/HomePage.tsx                         |  5 +-
 src/home/HomeWidgetTabs.tsx                   | 43 +++++----
 src/home/HomeWidgetView.tsx                   |  1 +
 src/home/isExternalAppUrl.test.ts             | 90 +++++++++++++++++++
 src/home/isExternalAppUrl.ts                  | 17 ++++
 src/home/ripples/homeWidgets.tsx              | 14 +++
 src/index.html                                |  1 +
 src/ripples/allRipples.ts                     |  4 +
 types.d.ts                                    |  1 +
 vite.config.js                                |  2 +
 13 files changed, 183 insertions(+), 18 deletions(-)
 create mode 100644 src/home/isExternalAppUrl.test.ts
 create mode 100644 src/home/isExternalAppUrl.ts
 create mode 100644 src/home/ripples/homeWidgets.tsx

diff --git a/.env.template b/.env.template
index 4a0d746dd09..e6a766f4ab1 100644
--- a/.env.template
+++ b/.env.template
@@ -2,6 +2,8 @@ API_URL=http://localhost:8000/graphql/
 APP_MOUNT_URI=/
 # Provides source for App Store / explore feature. Only for Saleor Cloud
 # EXTENSIONS_API_URL=https://apps.saleor.io/api/v1/extensions
+# Domain that hosts first-party Saleor Cloud apps. Extensions whose URL is not under this domain are considered external.
+SALEOR_CLOUD_APP_DOMAIN=saleor.app
 LOCALE_CODE="EN"
 
 # Multi-schema support (optional)
diff --git a/src/config.ts b/src/config.ts
index 0259f10f8c4..b461bd4a0d2 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -32,6 +32,9 @@ export const getAbsoluteApiUrl = () => new URL(getApiUrl(), window.location.orig
 export const SW_INTERVAL = parseInt(process.env.SW_INTERVAL ?? "300", 10);
 export const IS_CLOUD_INSTANCE = window.__SALEOR_CONFIG__.IS_CLOUD_INSTANCE === "true";
 
+export const getSaleorCloudAppDomain = (): string | null =>
+  window?.__SALEOR_CONFIG__?.SALEOR_CLOUD_APP_DOMAIN || null;
+
 export const getExtensionsConfig = () => ({
   extensionsApiUri: window.__SALEOR_CONFIG__.EXTENSIONS_API_URL,
 });
diff --git a/src/extensions/components/IframePost/IframePost.tsx b/src/extensions/components/IframePost/IframePost.tsx
index e3ce478f807..dbb19b7b73b 100644
--- a/src/extensions/components/IframePost/IframePost.tsx
+++ b/src/extensions/components/IframePost/IframePost.tsx
@@ -1,3 +1,4 @@
+import { SaleorThrobber } from "@dashboard/components/Throbber";
 import { getAbsoluteApiUrl } from "@dashboard/config";
 import { type AppDetailsUrlMountQueryParams } from "@dashboard/extensions/urls";
 import { Box, Skeleton } from "@saleor/macaw-ui-next";
@@ -12,6 +13,7 @@ interface IframePostProps {
   accessToken: string;
   params?: AppDetailsUrlMountQueryParams;
   height?: number | string;
+  loaderType?: "skeleton" | "throbber";
 }
 
 /**
@@ -25,6 +27,7 @@ export const IframePost = ({
   accessToken,
   params,
   height = 200,
+  loaderType = "skeleton",
 }: IframePostProps) => {
   const formRef = useRef<HTMLFormElement | null>(null);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
@@ -65,8 +68,19 @@ export const IframePost = ({
             <input type="hidden" key={key} name={key} value={value} />
           ))}
       </form>
-      <Box ref={loadingRef} width="100%" __height={height as number | string}>
-        <Skeleton __height={height as number | string} />
+      <Box
+        ref={loadingRef}
+        width="100%"
+        __height={height as number | string}
+        display={loaderType === "throbber" ? "flex" : "block"}
+        alignItems={loaderType === "throbber" ? "center" : undefined}
+        justifyContent={loaderType === "throbber" ? "center" : undefined}
+      >
+        {loaderType === "throbber" ? (
+          <SaleorThrobber />
+        ) : (
+          <Skeleton __height={height as number | string} />
+        )}
       </Box>
       <Box
         style={hiddenStyle}
diff --git a/src/home/HomePage.tsx b/src/home/HomePage.tsx
index 3244481308b..d75f7e74638 100644
--- a/src/home/HomePage.tsx
+++ b/src/home/HomePage.tsx
@@ -1,6 +1,7 @@
 import { useUser } from "@dashboard/auth/useUser";
 import { useExtensions } from "@dashboard/extensions/hooks/useExtensions";
 import { getUserName } from "@dashboard/misc";
+import { Ripple } from "@dashboard/ripples/components/Ripple";
 import { Box, Text } from "@saleor/macaw-ui-next";
 import { FormattedMessage } from "react-intl";
 import { useParams } from "react-router";
@@ -9,6 +10,7 @@ import { Redirect } from "react-router-dom";
 import { filterHomeExtensions } from "./filterHomeExtensions";
 import { HomeWidgetTabs } from "./HomeWidgetTabs";
 import { HomeWidgetView } from "./HomeWidgetView";
+import { rippleHomeWidgets } from "./ripples/homeWidgets";
 import { homeWidgetUrl } from "./urls";
 
 const HOMEPAGE_MOUNT = ["HOMEPAGE_WIDGETS"] as const;
@@ -52,7 +54,7 @@ export const HomePage = () => {
 
   return (
     <Box display="flex" flexDirection="column" height="100%">
-      <Box paddingX={6} paddingTop={6}>
+      <Box paddingX={6} paddingTop={6} display="flex" alignItems="center" gap={4}>
         <Text size={6} fontWeight="bold" as="h1" data-test-id="welcome-header">
           <FormattedMessage
             id="0+zatS"
@@ -60,6 +62,7 @@ export const HomePage = () => {
             values={{ userName }}
           />
         </Text>
+        <Ripple model={rippleHomeWidgets} />
       </Box>
       <Box paddingX={6} paddingTop={4}>
         <HomeWidgetTabs extensions={visibleExtensions} activeExtensionId={activeExtension.id} />
diff --git a/src/home/HomeWidgetTabs.tsx b/src/home/HomeWidgetTabs.tsx
index 7667ff781a9..588005bae4d 100644
--- a/src/home/HomeWidgetTabs.tsx
+++ b/src/home/HomeWidgetTabs.tsx
@@ -1,8 +1,11 @@
 import { Tab, TabContainer } from "@dashboard/components/Tab";
+import { isUrlAbsolute } from "@dashboard/extensions/isUrlAbsolute";
 import { type Extension } from "@dashboard/extensions/types";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { Box, Text } from "@saleor/macaw-ui-next";
+import { Blocks } from "lucide-react";
 
+import { isExternalAppUrl } from "./isExternalAppUrl";
 import { homeWidgetUrl } from "./urls";
 
 const HomeTab = Tab<string>("home-widget-tab");
@@ -12,26 +15,36 @@ interface HomeWidgetTabsProps {
   activeExtensionId: string | null;
 }
 
+const resolveExtensionUrl = (extension: Extension): string =>
+  isUrlAbsolute(extension.url) ? extension.url : `${extension.app.appUrl}${extension.url}`;
+
 export const HomeWidgetTabs = ({ extensions, activeExtensionId }: HomeWidgetTabsProps) => {
   const navigate = useNavigator();
 
   return (
     <TabContainer>
-      {extensions.map(extension => (
-        <HomeTab
-          key={extension.id}
-          isActive={extension.id === activeExtensionId}
-          changeTab={() => navigate(homeWidgetUrl(extension.id))}
-          testId={`home-widget-tab-${extension.id}`}
-        >
-          <Box display="inline-flex" flexDirection="column">
-            <span>{extension.label}</span>
-            <Text size={1} color="default2">
-              {extension.app.name}
-            </Text>
-          </Box>
-        </HomeTab>
-      ))}
+      {extensions.map(extension => {
+        const isExternal = isExternalAppUrl(resolveExtensionUrl(extension));
+
+        return (
+          <HomeTab
+            key={extension.id}
+            isActive={extension.id === activeExtensionId}
+            changeTab={() => navigate(homeWidgetUrl(extension.id))}
+            testId={`home-widget-tab-${extension.id}`}
+          >
+            <Box display="inline-flex" alignItems="center" gap={2}>
+              <Box display="inline-flex" flexDirection="column">
+                <span>{extension.label}</span>
+                <Text size={1} color="default2">
+                  {extension.app.name}
+                </Text>
+              </Box>
+              {isExternal && <Blocks />}
+            </Box>
+          </HomeTab>
+        );
+      })}
     </TabContainer>
   );
 };
diff --git a/src/home/HomeWidgetView.tsx b/src/home/HomeWidgetView.tsx
index 738de719725..93b0d4b72aa 100644
--- a/src/home/HomeWidgetView.tsx
+++ b/src/home/HomeWidgetView.tsx
@@ -26,6 +26,7 @@ export const HomeWidgetView = ({ extension }: HomeWidgetViewProps) => {
           extensionId={extension.id}
           extensionUrl={extensionUrl}
           height="100%"
+          loaderType="throbber"
         />
       </Box>
     );
diff --git a/src/home/isExternalAppUrl.test.ts b/src/home/isExternalAppUrl.test.ts
new file mode 100644
index 00000000000..9b6f310fc12
--- /dev/null
+++ b/src/home/isExternalAppUrl.test.ts
@@ -0,0 +1,90 @@
+import { isExternalAppUrl } from "./isExternalAppUrl";
+
+const setCloudDomain = (value: string | undefined): void => {
+  window.__SALEOR_CONFIG__ = { ...window.__SALEOR_CONFIG__, SALEOR_CLOUD_APP_DOMAIN: value };
+};
+
+describe("isExternalAppUrl", () => {
+  const originalConfig = window.__SALEOR_CONFIG__;
+
+  afterEach(() => {
+    window.__SALEOR_CONFIG__ = originalConfig;
+  });
+
+  it("returns true when cloud domain env var is not set", () => {
+    // Arrange
+    setCloudDomain(undefined);
+
+    // Act
+    const result = isExternalAppUrl("https://anything.example.com/widget");
+
+    // Assert
+    expect(result).toBe(true);
+  });
+
+  it("returns true when cloud domain env var is empty string", () => {
+    // Arrange
+    setCloudDomain("");
+
+    // Act
+    const result = isExternalAppUrl("https://app.saleor.app/widget");
+
+    // Assert
+    expect(result).toBe(true);
+  });
+
+  it("returns false for URL hosted exactly on the cloud domain", () => {
+    // Arrange
+    setCloudDomain("saleor.app");
+
+    // Act
+    const result = isExternalAppUrl("https://saleor.app/widget");
+
+    // Assert
+    expect(result).toBe(false);
+  });
+
+  it("returns false for URL hosted on a subdomain of the cloud domain", () => {
+    // Arrange
+    setCloudDomain("saleor.app");
+
+    // Act
+    const result = isExternalAppUrl("https://my-app.saleor.app/widget");
+
+    // Assert
+    expect(result).toBe(false);
+  });
+
+  it("returns true for URL hosted outside the cloud domain", () => {
+    // Arrange
+    setCloudDomain("saleor.app");
+
+    // Act
+    const result = isExternalAppUrl("https://example.com/widget");
+
+    // Assert
+    expect(result).toBe(true);
+  });
+
+  it("does not match a domain that merely ends with the cloud domain string", () => {
+    // Arrange
+    setCloudDomain("saleor.app");
+
+    // Act - "evilsaleor.app" must not be treated as a subdomain of "saleor.app"
+    const result = isExternalAppUrl("https://evilsaleor.app/widget");
+
+    // Assert
+    expect(result).toBe(true);
+  });
+
+  it("returns true when URL cannot be parsed", () => {
+    // Arrange
+    setCloudDomain("saleor.app");
+
+    // Act
+    const result = isExternalAppUrl("not-a-url");
+
+    // Assert
+    expect(result).toBe(true);
+  });
+});
diff --git a/src/home/isExternalAppUrl.ts b/src/home/isExternalAppUrl.ts
new file mode 100644
index 00000000000..f73703cdb32
--- /dev/null
+++ b/src/home/isExternalAppUrl.ts
@@ -0,0 +1,17 @@
+import { getSaleorCloudAppDomain } from "@dashboard/config";
+
+export const isExternalAppUrl = (url: string): boolean => {
+  const cloudDomain = getSaleorCloudAppDomain();
+
+  if (cloudDomain === null) {
+    return true;
+  }
+
+  try {
+    const { hostname } = new URL(url);
+
+    return hostname !== cloudDomain && !hostname.endsWith(`.${cloudDomain}`);
+  } catch {
+    return true;
+  }
+};
diff --git a/src/home/ripples/homeWidgets.tsx b/src/home/ripples/homeWidgets.tsx
new file mode 100644
index 00000000000..234ddf64040
--- /dev/null
+++ b/src/home/ripples/homeWidgets.tsx
@@ -0,0 +1,14 @@
+import { type Ripple } from "@dashboard/ripples/types";
+
+export const rippleHomeWidgets: Ripple = {
+  type: "feature",
+  ID: "home-widgets",
+  TTL_seconds: 60 * 60 * 24 * 7, // 7 days
+  content: {
+    oneLiner: "Home Page overhauled",
+    contextual: "New Home Page is now home for Apps.",
+    global:
+      "Home Page now mounts Apps, either Saleor official ones or external. Apps can be mounted in fullscreen mode or a widgets grid.",
+  },
+  dateAdded: new Date(2026, 4),
+};
diff --git a/src/index.html b/src/index.html
index d6c67f9dc09..472bf2b9ea4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -18,6 +18,7 @@
         STATIC_URL: "<%= STATIC_URL %>",
         EXTENSIONS_API_URL: "<%= EXTENSIONS_API_URL %>",
         IS_CLOUD_INSTANCE: "<%= IS_CLOUD_INSTANCE %>",
+        SALEOR_CLOUD_APP_DOMAIN: "<%= SALEOR_CLOUD_APP_DOMAIN %>",
         LOCALE_CODE: "<%= LOCALE_CODE %>",
       };
     </script>
diff --git a/src/ripples/allRipples.ts b/src/ripples/allRipples.ts
index 819c4aeaacd..87384e35af2 100644
--- a/src/ripples/allRipples.ts
+++ b/src/ripples/allRipples.ts
@@ -2,6 +2,7 @@ import { rippleAttributeValuesSearch } from "@dashboard/attributes/ripples/attri
 import { checkoutAutocompleteSettings } from "@dashboard/channels/ripples/checkoutAutocompleteSettings";
 import { rippleCloudEnvLink } from "@dashboard/components/Sidebar/ripples/cloudEnvLink";
 import { rippleAppProblems } from "@dashboard/extensions/ripples/appProblems";
+import { rippleHomeWidgets } from "@dashboard/home/ripples/homeWidgets";
 import { ripplePagesAreModels } from "@dashboard/modeling/ripples/pagesAreModels";
 import { rippleRefreshedOrderSections } from "@dashboard/orders/ripples/newOrderSummary";
 import { rippleNewRefundReasons } from "@dashboard/orders/ripples/newRefundReasons";
@@ -44,6 +45,9 @@ export const allRipples: Ripple[] = [
   // Extensions
   rippleAppProblems,
 
+  // Home
+  rippleHomeWidgets,
+
   // Channels
   checkoutAutocompleteSettings,
 
diff --git a/types.d.ts b/types.d.ts
index fbb249f66c2..3dd43132371 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -23,6 +23,7 @@ declare interface Window {
     LOCALE_CODE?: string;
     EXTENSIONS_API_URL?: string;
     IS_CLOUD_INSTANCE?: string;
+    SALEOR_CLOUD_APP_DOMAIN?: string;
   };
 }
 
diff --git a/vite.config.js b/vite.config.js
index 4a1bf27e0c5..9e958b86130 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -44,6 +44,7 @@ export default defineConfig(({ command, mode }) => {
     ENVIRONMENT,
     STATIC_URL,
     EXTENSIONS_API_URL,
+    SALEOR_CLOUD_APP_DOMAIN,
     SKIP_SOURCEMAPS,
     CUSTOM_VERSION,
     FLAGS_SERVICE_ENABLED,
@@ -83,6 +84,7 @@ export default defineConfig(({ command, mode }) => {
           APP_MOUNT_URI,
           STATIC_URL,
           EXTENSIONS_API_URL: EXTENSIONS_API_URL ?? "",
+          SALEOR_CLOUD_APP_DOMAIN: SALEOR_CLOUD_APP_DOMAIN ?? "",
           IS_CLOUD_INSTANCE,
           LOCALE_CODE,
           POSTHOG_KEY,

From b94b3453488a48904ab9359eb4961b5a6dd1dd4f Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Tue, 5 May 2026 11:23:11 +0200
Subject: [PATCH 04/18] story, official logo

---
 src/components/Sidebar/menu/utils.test.ts     |   2 +
 src/extensions/getExtensionsItems.test.ts     |   1 +
 src/extensions/hooks/useExtensions.ts         |   4 +
 .../isSaleorOfficialAppUrl.test.ts}           |  44 +++----
 src/extensions/isSaleorOfficialAppUrl.ts      |  23 ++++
 src/extensions/types.ts                       |   6 +
 src/home/HomeWidgetTabs.stories.tsx           | 117 ++++++++++++++++++
 src/home/HomeWidgetTabs.tsx                   |  54 ++++----
 src/home/filterHomeExtensions.test.ts         |   1 +
 src/home/isExternalAppUrl.ts                  |  17 ---
 10 files changed, 204 insertions(+), 65 deletions(-)
 rename src/{home/isExternalAppUrl.test.ts => extensions/isSaleorOfficialAppUrl.test.ts} (50%)
 create mode 100644 src/extensions/isSaleorOfficialAppUrl.ts
 create mode 100644 src/home/HomeWidgetTabs.stories.tsx
 delete mode 100644 src/home/isExternalAppUrl.ts

diff --git a/src/components/Sidebar/menu/utils.test.ts b/src/components/Sidebar/menu/utils.test.ts
index c9c04b049ad..602ccd1aaa8 100644
--- a/src/components/Sidebar/menu/utils.test.ts
+++ b/src/components/Sidebar/menu/utils.test.ts
@@ -41,6 +41,7 @@ describe("mapToExtensionsItems", () => {
     mountName: "NAVIGATION_CATALOG",
     targetName: "APP_PAGE",
     settings: {},
+    isSaleorOfficial: false,
   };
 
   const mockHeader: SidebarMenuItem = {
@@ -214,6 +215,7 @@ describe("getMenuItemExtension", () => {
     mountName: "NAVIGATION_CATALOG",
     settings: {},
     targetName: "POPUP",
+    isSaleorOfficial: false,
   };
 
   const mockExtension: Extension = {
diff --git a/src/extensions/getExtensionsItems.test.ts b/src/extensions/getExtensionsItems.test.ts
index 3428c054adf..451bc0419d0 100644
--- a/src/extensions/getExtensionsItems.test.ts
+++ b/src/extensions/getExtensionsItems.test.ts
@@ -52,6 +52,7 @@ const mockedExtension: ExtensionWithParams = {
   open: jest.fn(),
   targetName: "POPUP",
   settings: {},
+  isSaleorOfficial: false,
 };
 
 describe("getExtensionsItems", () => {
diff --git a/src/extensions/hooks/useExtensions.ts b/src/extensions/hooks/useExtensions.ts
index 53322042ff0..c822e36d0f1 100644
--- a/src/extensions/hooks/useExtensions.ts
+++ b/src/extensions/hooks/useExtensions.ts
@@ -6,6 +6,7 @@ import {
 } from "@dashboard/extensions/domain/app-extension-manifest-available-mounts";
 import { appExtensionManifestOptionsSchemaWithDefault } from "@dashboard/extensions/domain/app-extension-manifest-options";
 import { AppExtensionManifestTarget } from "@dashboard/extensions/domain/app-extension-manifest-target";
+import { isSaleorOfficialAppUrl } from "@dashboard/extensions/isSaleorOfficialAppUrl";
 import { isUrlAbsolute } from "@dashboard/extensions/isUrlAbsolute";
 import { newTabActions } from "@dashboard/extensions/new-tab-actions";
 import { type ExtensionListQuery, useExtensionListQuery } from "@dashboard/graphql";
@@ -35,6 +36,8 @@ const prepareExtensionsWithActions = ({
        */
       const newTabMethod = settingsValidation.data?.newTabTarget?.method ?? "GET";
 
+      const resolvedUrl = isUrlAbsolute(url) ? url : `${appUrl ?? ""}${url}`;
+
       return {
         id,
         app,
@@ -45,6 +48,7 @@ const prepareExtensionsWithActions = ({
         mountName: ALL_APP_EXTENSION_MOUNTS.parse(mountName),
         targetName: AppExtensionManifestTarget.parse(targetName),
         settings,
+        isSaleorOfficial: isSaleorOfficialAppUrl(resolvedUrl),
         /**
          * Only available for NEW_TAB, POPUP, APP_PAGE
          * TODO: Change interface to *not* contain this method if type is WIDGET
diff --git a/src/home/isExternalAppUrl.test.ts b/src/extensions/isSaleorOfficialAppUrl.test.ts
similarity index 50%
rename from src/home/isExternalAppUrl.test.ts
rename to src/extensions/isSaleorOfficialAppUrl.test.ts
index 9b6f310fc12..fe36bbfe13b 100644
--- a/src/home/isExternalAppUrl.test.ts
+++ b/src/extensions/isSaleorOfficialAppUrl.test.ts
@@ -1,69 +1,69 @@
-import { isExternalAppUrl } from "./isExternalAppUrl";
+import { isSaleorOfficialAppUrl } from "./isSaleorOfficialAppUrl";
 
 const setCloudDomain = (value: string | undefined): void => {
   window.__SALEOR_CONFIG__ = { ...window.__SALEOR_CONFIG__, SALEOR_CLOUD_APP_DOMAIN: value };
 };
 
-describe("isExternalAppUrl", () => {
+describe("isSaleorOfficialAppUrl", () => {
   const originalConfig = window.__SALEOR_CONFIG__;
 
   afterEach(() => {
     window.__SALEOR_CONFIG__ = originalConfig;
   });
 
-  it("returns true when cloud domain env var is not set", () => {
+  it("returns false when cloud domain env var is not set", () => {
     // Arrange
     setCloudDomain(undefined);
 
     // Act
-    const result = isExternalAppUrl("https://anything.example.com/widget");
+    const result = isSaleorOfficialAppUrl("https://app.saleor.app/widget");
 
     // Assert
-    expect(result).toBe(true);
+    expect(result).toBe(false);
   });
 
-  it("returns true when cloud domain env var is empty string", () => {
+  it("returns false when cloud domain env var is empty string", () => {
     // Arrange
     setCloudDomain("");
 
     // Act
-    const result = isExternalAppUrl("https://app.saleor.app/widget");
+    const result = isSaleorOfficialAppUrl("https://app.saleor.app/widget");
 
     // Assert
-    expect(result).toBe(true);
+    expect(result).toBe(false);
   });
 
-  it("returns false for URL hosted exactly on the cloud domain", () => {
+  it("returns true for URL hosted exactly on the cloud domain", () => {
     // Arrange
     setCloudDomain("saleor.app");
 
     // Act
-    const result = isExternalAppUrl("https://saleor.app/widget");
+    const result = isSaleorOfficialAppUrl("https://saleor.app/widget");
 
     // Assert
-    expect(result).toBe(false);
+    expect(result).toBe(true);
   });
 
-  it("returns false for URL hosted on a subdomain of the cloud domain", () => {
+  it("returns true for URL hosted on a subdomain of the cloud domain", () => {
     // Arrange
     setCloudDomain("saleor.app");
 
     // Act
-    const result = isExternalAppUrl("https://my-app.saleor.app/widget");
+    const result = isSaleorOfficialAppUrl("https://my-app.saleor.app/widget");
 
     // Assert
-    expect(result).toBe(false);
+    expect(result).toBe(true);
   });
 
-  it("returns true for URL hosted outside the cloud domain", () => {
+  it("returns false for URL hosted outside the cloud domain", () => {
     // Arrange
     setCloudDomain("saleor.app");
 
     // Act
-    const result = isExternalAppUrl("https://example.com/widget");
+    const result = isSaleorOfficialAppUrl("https://example.com/widget");
 
     // Assert
-    expect(result).toBe(true);
+    expect(result).toBe(false);
   });
 
   it("does not match a domain that merely ends with the cloud domain string", () => {
@@ -71,20 +71,20 @@ describe("isExternalAppUrl", () => {
     setCloudDomain("saleor.app");
 
     // Act - "evilsaleor.app" must not be treated as a subdomain of "saleor.app"
-    const result = isExternalAppUrl("https://evilsaleor.app/widget");
+    const result = isSaleorOfficialAppUrl("https://evilsaleor.app/widget");
 
     // Assert
-    expect(result).toBe(true);
+    expect(result).toBe(false);
   });
 
-  it("returns true when URL cannot be parsed", () => {
+  it("returns false when URL cannot be parsed", () => {
     // Arrange
     setCloudDomain("saleor.app");
 
     // Act
-    const result = isExternalAppUrl("not-a-url");
+    const result = isSaleorOfficialAppUrl("not-a-url");
 
     // Assert
-    expect(result).toBe(true);
+    expect(result).toBe(false);
   });
 });
diff --git a/src/extensions/isSaleorOfficialAppUrl.ts b/src/extensions/isSaleorOfficialAppUrl.ts
new file mode 100644
index 00000000000..4432846ab54
--- /dev/null
+++ b/src/extensions/isSaleorOfficialAppUrl.ts
@@ -0,0 +1,23 @@
+import { getSaleorCloudAppDomain } from "@dashboard/config";
+
+/**
+ * Returns true when the URL is hosted under the configured Saleor Cloud app
+ * domain (exact host or subdomain). When the domain is not configured or the
+ * URL cannot be parsed, the URL cannot be verified as official and the function
+ * returns false.
+ */
+export const isSaleorOfficialAppUrl = (url: string): boolean => {
+  const cloudDomain = getSaleorCloudAppDomain();
+
+  if (cloudDomain === null) {
+    return false;
+  }
+
+  try {
+    const { hostname } = new URL(url);
+
+    return hostname === cloudDomain || hostname.endsWith(`.${cloudDomain}`);
+  } catch {
+    return false;
+  }
+};
diff --git a/src/extensions/types.ts b/src/extensions/types.ts
index 22d1a076c41..0ec878c53fa 100644
--- a/src/extensions/types.ts
+++ b/src/extensions/types.ts
@@ -83,6 +83,12 @@ export interface Extension {
   open: () => void;
   targetName: AppExtensionManifestTarget;
   settings: RelayToFlat<NonNullable<ExtensionListQuery["appExtensions"]>>[0]["settings"];
+  /**
+   * True when the extension's resolved URL is hosted under the configured Saleor
+   * Cloud app domain (SALEOR_CLOUD_APP_DOMAIN). Resolved at the time the
+   * extension is mapped from the GraphQL response.
+   */
+  isSaleorOfficial: boolean;
 }
 
 export interface ExtensionWithParams extends Omit<Extension, "open"> {
diff --git a/src/home/HomeWidgetTabs.stories.tsx b/src/home/HomeWidgetTabs.stories.tsx
new file mode 100644
index 00000000000..19ead1356d9
--- /dev/null
+++ b/src/home/HomeWidgetTabs.stories.tsx
@@ -0,0 +1,117 @@
+import { type Extension } from "@dashboard/extensions/types";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { HomeWidgetTabs } from "./HomeWidgetTabs";
+
+const buildExtension = (overrides: Partial<Extension>): Extension => ({
+  id: "ext-1",
+  app: {
+    __typename: "App",
+    id: "app-1",
+    appUrl: "https://my-app.saleor.app",
+    name: "Saleor App",
+    brand: null,
+  },
+  accessToken: "token",
+  permissions: [],
+  label: "Widget",
+  mountName: "HOMEPAGE_WIDGETS",
+  url: "https://my-app.saleor.app/widget",
+  open: () => undefined,
+  targetName: "WIDGET",
+  settings: null,
+  isSaleorOfficial: true,
+  ...overrides,
+});
+
+const officialExtension = buildExtension({
+  id: "official",
+  label: "Sales Insights",
+  app: {
+    __typename: "App",
+    id: "saleor-app",
+    appUrl: "https://insights.saleor.app",
+    name: "Saleor Insights",
+    brand: null,
+  },
+  url: "https://insights.saleor.app/widget",
+  isSaleorOfficial: true,
+});
+
+const externalExtension = buildExtension({
+  id: "external",
+  label: "Third-party widget",
+  app: {
+    __typename: "App",
+    id: "external-app",
+    appUrl: "https://third-party.example.com",
+    name: "Acme Analytics",
+    brand: null,
+  },
+  url: "https://third-party.example.com/widget",
+  isSaleorOfficial: false,
+});
+
+const meta: Meta<typeof HomeWidgetTabs> = {
+  title: "Home/HomeWidgetTabs",
+  component: HomeWidgetTabs,
+  args: {
+    activeExtensionId: officialExtension.id,
+    extensions: [officialExtension, externalExtension],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof HomeWidgetTabs>;
+
+export const Default: Story = {};
+
+export const OnlyOfficialApps: Story = {
+  args: {
+    extensions: [
+      officialExtension,
+      buildExtension({
+        id: "official-2",
+        label: "Order Tools",
+        app: {
+          __typename: "App",
+          id: "saleor-orders",
+          appUrl: "https://orders.saleor.app",
+          name: "Saleor Orders",
+          brand: null,
+        },
+        url: "https://orders.saleor.app/widget",
+        isSaleorOfficial: true,
+      }),
+    ],
+  },
+};
+
+export const OnlyExternalApps: Story = {
+  args: {
+    activeExtensionId: externalExtension.id,
+    extensions: [
+      externalExtension,
+      buildExtension({
+        id: "external-2",
+        label: "Marketing Hub",
+        app: {
+          __typename: "App",
+          id: "marketing-app",
+          appUrl: "https://marketing.example.com",
+          name: "Marketing Co.",
+          brand: null,
+        },
+        url: "https://marketing.example.com/widget",
+        isSaleorOfficial: false,
+      }),
+    ],
+  },
+};
+
+export const SingleTab: Story = {
+  args: {
+    extensions: [officialExtension],
+  },
+};
diff --git a/src/home/HomeWidgetTabs.tsx b/src/home/HomeWidgetTabs.tsx
index 588005bae4d..1fc2eeb66ca 100644
--- a/src/home/HomeWidgetTabs.tsx
+++ b/src/home/HomeWidgetTabs.tsx
@@ -1,11 +1,9 @@
 import { Tab, TabContainer } from "@dashboard/components/Tab";
-import { isUrlAbsolute } from "@dashboard/extensions/isUrlAbsolute";
 import { type Extension } from "@dashboard/extensions/types";
+import { SaleorLogo } from "@dashboard/extensions/views/InstallCustomExtension/components/InstallSectionData/InstallExtensionManifestData/SaleorLogo";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { Box, Text } from "@saleor/macaw-ui-next";
-import { Blocks } from "lucide-react";
 
-import { isExternalAppUrl } from "./isExternalAppUrl";
 import { homeWidgetUrl } from "./urls";
 
 const HomeTab = Tab<string>("home-widget-tab");
@@ -15,36 +13,40 @@ interface HomeWidgetTabsProps {
   activeExtensionId: string | null;
 }
 
-const resolveExtensionUrl = (extension: Extension): string =>
-  isUrlAbsolute(extension.url) ? extension.url : `${extension.app.appUrl}${extension.url}`;
-
 export const HomeWidgetTabs = ({ extensions, activeExtensionId }: HomeWidgetTabsProps) => {
   const navigate = useNavigator();
 
   return (
     <TabContainer>
-      {extensions.map(extension => {
-        const isExternal = isExternalAppUrl(resolveExtensionUrl(extension));
-
-        return (
-          <HomeTab
-            key={extension.id}
-            isActive={extension.id === activeExtensionId}
-            changeTab={() => navigate(homeWidgetUrl(extension.id))}
-            testId={`home-widget-tab-${extension.id}`}
-          >
-            <Box display="inline-flex" alignItems="center" gap={2}>
-              <Box display="inline-flex" flexDirection="column">
-                <span>{extension.label}</span>
-                <Text size={1} color="default2">
-                  {extension.app.name}
-                </Text>
+      {extensions.map(extension => (
+        <HomeTab
+          key={extension.id}
+          isActive={extension.id === activeExtensionId}
+          changeTab={() => navigate(homeWidgetUrl(extension.id))}
+          testId={`home-widget-tab-${extension.id}`}
+        >
+          <Box display="inline-flex" alignItems="center" gap={2}>
+            {extension.isSaleorOfficial && (
+              <Box
+                __width={20}
+                __height={20}
+                display="inline-flex"
+                alignItems="center"
+                justifyContent="center"
+                data-test-id={`saleor-app-badge-${extension.id}`}
+              >
+                <SaleorLogo />
               </Box>
-              {isExternal && <Blocks />}
+            )}
+            <Box display="inline-flex" flexDirection="column">
+              <span>{extension.label}</span>
+              <Text size={1} color="default2">
+                {extension.app.name}
+              </Text>
             </Box>
-          </HomeTab>
-        );
-      })}
+          </Box>
+        </HomeTab>
+      ))}
     </TabContainer>
   );
 };
diff --git a/src/home/filterHomeExtensions.test.ts b/src/home/filterHomeExtensions.test.ts
index 8f1da9d07d5..95b5468a159 100644
--- a/src/home/filterHomeExtensions.test.ts
+++ b/src/home/filterHomeExtensions.test.ts
@@ -25,6 +25,7 @@ const buildExtension = (overrides: Partial<Extension>): Extension => ({
   open: () => undefined,
   targetName: "WIDGET",
   settings: null,
+  isSaleorOfficial: false,
   ...overrides,
 });
 
diff --git a/src/home/isExternalAppUrl.ts b/src/home/isExternalAppUrl.ts
deleted file mode 100644
index f73703cdb32..00000000000
--- a/src/home/isExternalAppUrl.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { getSaleorCloudAppDomain } from "@dashboard/config";
-
-export const isExternalAppUrl = (url: string): boolean => {
-  const cloudDomain = getSaleorCloudAppDomain();
-
-  if (cloudDomain === null) {
-    return true;
-  }
-
-  try {
-    const { hostname } = new URL(url);
-
-    return hostname !== cloudDomain && !hostname.endsWith(`.${cloudDomain}`);
-  } catch {
-    return true;
-  }
-};

From 187a57351be98f8456295590d134833a07f41320 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Tue, 5 May 2026 11:30:31 +0200
Subject: [PATCH 05/18] fix tabs

---
 src/home/HomeWidgetTabs.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/home/HomeWidgetTabs.tsx b/src/home/HomeWidgetTabs.tsx
index 1fc2eeb66ca..8adb1955c86 100644
--- a/src/home/HomeWidgetTabs.tsx
+++ b/src/home/HomeWidgetTabs.tsx
@@ -26,18 +26,18 @@ export const HomeWidgetTabs = ({ extensions, activeExtensionId }: HomeWidgetTabs
           testId={`home-widget-tab-${extension.id}`}
         >
           <Box display="inline-flex" alignItems="center" gap={2}>
-            {extension.isSaleorOfficial && (
-              <Box
-                __width={20}
-                __height={20}
-                display="inline-flex"
-                alignItems="center"
-                justifyContent="center"
-                data-test-id={`saleor-app-badge-${extension.id}`}
-              >
-                <SaleorLogo />
-              </Box>
-            )}
+            <Box
+              __width={extension.isSaleorOfficial ? 20 : 0}
+              __height={20}
+              display="inline-flex"
+              alignItems="center"
+              justifyContent="center"
+              data-test-id={
+                extension.isSaleorOfficial ? `saleor-app-badge-${extension.id}` : undefined
+              }
+            >
+              {extension.isSaleorOfficial && <SaleorLogo />}
+            </Box>
             <Box display="inline-flex" flexDirection="column">
               <span>{extension.label}</span>
               <Text size={1} color="default2">

From 8705b6643c180696f646d2cfd2dafe443f90ef2b Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Tue, 5 May 2026 13:07:35 +0200
Subject: [PATCH 06/18] grid

---
 .../app-extension-manifest-options.test.ts    |  4 +-
 .../domain/app-extension-manifest-options.ts  |  2 +-
 src/home/ExtensionIframe.tsx                  | 52 +++++++++++
 src/home/HomePage.tsx                         | 71 ++++++++++++---
 src/home/HomeWidgetCell.tsx                   | 58 ++++++++++++
 src/home/HomeWidgetTabs.stories.tsx           | 36 ++++++--
 src/home/HomeWidgetTabs.tsx                   | 42 +++++++--
 src/home/HomeWidgetView.tsx                   | 45 +--------
 src/home/HomeWidgetsGrid.tsx                  | 22 +++++
 src/home/filterHomeExtensions.test.ts         | 91 ++++++++++++++++---
 src/home/filterHomeExtensions.ts              | 33 ++++---
 src/home/urls.ts                              |  2 +
 src/index.tsx                                 |  1 +
 13 files changed, 365 insertions(+), 94 deletions(-)
 create mode 100644 src/home/ExtensionIframe.tsx
 create mode 100644 src/home/HomeWidgetCell.tsx
 create mode 100644 src/home/HomeWidgetsGrid.tsx

diff --git a/src/extensions/domain/app-extension-manifest-options.test.ts b/src/extensions/domain/app-extension-manifest-options.test.ts
index 1df901779bd..85778aba897 100644
--- a/src/extensions/domain/app-extension-manifest-options.test.ts
+++ b/src/extensions/domain/app-extension-manifest-options.test.ts
@@ -261,7 +261,7 @@ describe("App Extension Manifest Options Schema", () => {
       }
     });
 
-    it("should apply defaults (method=POST, fullscreen=true) when fields omitted", () => {
+    it("should apply defaults (method=POST, fullscreen=false) when fields omitted", () => {
       // Arrange
       const validData = {
         homeWidget: {},
@@ -276,7 +276,7 @@ describe("App Extension Manifest Options Schema", () => {
       if (result.success) {
         expect(result.data.homeWidget).toEqual({
           method: "POST",
-          fullscreen: true,
+          fullscreen: false,
         });
       }
     });
diff --git a/src/extensions/domain/app-extension-manifest-options.ts b/src/extensions/domain/app-extension-manifest-options.ts
index 51704d28c1e..c29e93cfc68 100644
--- a/src/extensions/domain/app-extension-manifest-options.ts
+++ b/src/extensions/domain/app-extension-manifest-options.ts
@@ -14,7 +14,7 @@ const widgetTargetOptionsSchema = z.object({
 
 const homeWidgetOptionsSchema = z.object({
   method: z.enum(["GET", "POST"], { message: "Method must be either GET or POST" }).default("POST"),
-  fullscreen: z.boolean().default(true),
+  fullscreen: z.boolean().default(false),
 });
 
 export const appExtensionManifestOptionsSchema = z
diff --git a/src/home/ExtensionIframe.tsx b/src/home/ExtensionIframe.tsx
new file mode 100644
index 00000000000..99a01a02ec9
--- /dev/null
+++ b/src/home/ExtensionIframe.tsx
@@ -0,0 +1,52 @@
+import { APP_VERSION } from "@dashboard/config";
+import { IframePost } from "@dashboard/extensions/components/IframePost/IframePost";
+import { appExtensionManifestOptionsSchema } from "@dashboard/extensions/domain/app-extension-manifest-options";
+import { isUrlAbsolute } from "@dashboard/extensions/isUrlAbsolute";
+import { type Extension } from "@dashboard/extensions/types";
+import { AppFrame } from "@dashboard/extensions/views/ViewManifestExtension/components/AppFrame/AppFrame";
+import { Box } from "@saleor/macaw-ui-next";
+
+interface ExtensionIframeProps {
+  extension: Extension;
+  height: string | number;
+  loaderType?: "skeleton" | "throbber";
+}
+
+export const ExtensionIframe = ({
+  extension,
+  height,
+  loaderType = "skeleton",
+}: ExtensionIframeProps) => {
+  const settings = appExtensionManifestOptionsSchema.safeParse(extension.settings);
+  const method = settings.success ? (settings.data.homeWidget?.method ?? "POST") : "POST";
+  const extensionUrl = isUrlAbsolute(extension.url)
+    ? extension.url
+    : `${extension.app.appUrl}${extension.url}`;
+
+  if (method === "POST") {
+    return (
+      <Box position="relative" width="100%" height="100%">
+        <IframePost
+          appId={extension.app.id}
+          accessToken={extension.accessToken}
+          extensionId={extension.id}
+          extensionUrl={extensionUrl}
+          height={height}
+          loaderType={loaderType}
+        />
+      </Box>
+    );
+  }
+
+  return (
+    <Box position="relative" __lineHeight={0} width="100%" height="100%">
+      <AppFrame
+        target="WIDGET"
+        src={extensionUrl}
+        appToken={extension.accessToken}
+        appId={extension.app.id}
+        dashboardVersion={APP_VERSION}
+      />
+    </Box>
+  );
+};
diff --git a/src/home/HomePage.tsx b/src/home/HomePage.tsx
index d75f7e74638..d4a9307ad8b 100644
--- a/src/home/HomePage.tsx
+++ b/src/home/HomePage.tsx
@@ -4,28 +4,45 @@ import { getUserName } from "@dashboard/misc";
 import { Ripple } from "@dashboard/ripples/components/Ripple";
 import { Box, Text } from "@saleor/macaw-ui-next";
 import { FormattedMessage } from "react-intl";
-import { useParams } from "react-router";
+import { useParams, useRouteMatch } from "react-router";
 import { Redirect } from "react-router-dom";
 
 import { filterHomeExtensions } from "./filterHomeExtensions";
-import { HomeWidgetTabs } from "./HomeWidgetTabs";
+import { HomeWidgetsGrid } from "./HomeWidgetsGrid";
+import { type HomeActiveTab, HomeWidgetTabs } from "./HomeWidgetTabs";
 import { HomeWidgetView } from "./HomeWidgetView";
 import { rippleHomeWidgets } from "./ripples/homeWidgets";
-import { homeWidgetUrl } from "./urls";
+import { homeWidgetsUrl, homeWidgetUrl } from "./urls";
 
 const HOMEPAGE_MOUNT = ["HOMEPAGE_WIDGETS"] as const;
 
+const resolveLeftmostTabUrl = (
+  fullscreen: ReturnType<typeof filterHomeExtensions>["fullscreen"],
+  widgets: ReturnType<typeof filterHomeExtensions>["widgets"],
+): string | null => {
+  if (fullscreen.length > 0) {
+    return homeWidgetUrl(fullscreen[0].id);
+  }
+
+  if (widgets.length > 0) {
+    return homeWidgetsUrl();
+  }
+
+  return null;
+};
+
 export const HomePage = () => {
   const { extensionId: rawExtensionId } = useParams<{ extensionId?: string }>();
   const extensionId = rawExtensionId ? decodeURIComponent(rawExtensionId) : undefined;
+  const widgetsRouteMatch = useRouteMatch({ path: "/home/widgets", exact: true });
 
   const { user } = useUser();
   const userPermissions = user?.userPermissions ?? [];
 
   const { HOMEPAGE_WIDGETS: extensions } = useExtensions(HOMEPAGE_MOUNT);
-  const visibleExtensions = filterHomeExtensions(extensions, userPermissions);
+  const { fullscreen, widgets } = filterHomeExtensions(extensions, userPermissions);
 
-  if (visibleExtensions.length === 0) {
+  if (fullscreen.length === 0 && widgets.length === 0) {
     return (
       <Box paddingX={8} paddingY={9}>
         <Text size={6} fontWeight="bold">
@@ -38,19 +55,35 @@ export const HomePage = () => {
     );
   }
 
-  // No extension selected - redirect to first available
-  if (!extensionId) {
-    return <Redirect to={homeWidgetUrl(visibleExtensions[0].id)} />;
+  const leftmostUrl = resolveLeftmostTabUrl(fullscreen, widgets);
+
+  // Root path - redirect to leftmost tab
+  if (!extensionId && !widgetsRouteMatch) {
+    return <Redirect to={leftmostUrl!} />;
+  }
+
+  // /home/widgets but no widget extensions - redirect away
+  if (widgetsRouteMatch && widgets.length === 0) {
+    return <Redirect to={leftmostUrl!} />;
   }
 
-  const activeExtension = visibleExtensions.find(extension => extension.id === extensionId);
+  let activeTab: HomeActiveTab;
 
-  // URL points to a missing or unauthorized extension - redirect to first available
-  if (!activeExtension) {
-    return <Redirect to={homeWidgetUrl(visibleExtensions[0].id)} />;
+  if (widgetsRouteMatch) {
+    activeTab = { kind: "widgets" };
+  } else {
+    const activeExtension = fullscreen.find(extension => extension.id === extensionId);
+
+    // URL points to a missing or unauthorized fullscreen extension - redirect to leftmost tab
+    if (!activeExtension) {
+      return <Redirect to={leftmostUrl!} />;
+    }
+
+    activeTab = { kind: "extension", id: activeExtension.id };
   }
 
   const userName = getUserName(user, true);
+  const showWidgetsTab = widgets.length > 0;
 
   return (
     <Box display="flex" flexDirection="column" height="100%">
@@ -65,10 +98,20 @@ export const HomePage = () => {
         <Ripple model={rippleHomeWidgets} />
       </Box>
       <Box paddingX={6} paddingTop={4}>
-        <HomeWidgetTabs extensions={visibleExtensions} activeExtensionId={activeExtension.id} />
+        <HomeWidgetTabs
+          fullscreenExtensions={fullscreen}
+          showWidgetsTab={showWidgetsTab}
+          activeTab={activeTab}
+        />
       </Box>
       <Box padding={6} width="100%" __flex="1" __minHeight={0}>
-        <HomeWidgetView extension={activeExtension} />
+        {activeTab.kind === "widgets" ? (
+          <HomeWidgetsGrid extensions={widgets} />
+        ) : (
+          <HomeWidgetView
+            extension={fullscreen.find(extension => extension.id === activeTab.id)!}
+          />
+        )}
       </Box>
     </Box>
   );
diff --git a/src/home/HomeWidgetCell.tsx b/src/home/HomeWidgetCell.tsx
new file mode 100644
index 00000000000..1310d60d90b
--- /dev/null
+++ b/src/home/HomeWidgetCell.tsx
@@ -0,0 +1,58 @@
+import { DashboardCard } from "@dashboard/components/Card";
+import { AppAvatar } from "@dashboard/extensions/components/AppAvatar/AppAvatar";
+import { type Extension } from "@dashboard/extensions/types";
+import { ExtensionsUrls } from "@dashboard/extensions/urls";
+import useNavigator from "@dashboard/hooks/useNavigator";
+import { Box, Text } from "@saleor/macaw-ui-next";
+
+import { ExtensionIframe } from "./ExtensionIframe";
+
+interface HomeWidgetCellProps {
+  extension: Extension;
+}
+
+const MIN_CELL_HEIGHT = 320;
+
+export const HomeWidgetCell = ({ extension }: HomeWidgetCellProps) => {
+  const navigate = useNavigator();
+  const logo = extension.app.brand?.logo.default;
+  const appPageUrl = ExtensionsUrls.resolveViewManifestExtensionUrl(extension.app.id, {});
+
+  return (
+    <DashboardCard>
+      <DashboardCard.Header>
+        <Box display="flex" alignItems="center" gap={2} width="100%">
+          <AppAvatar size={6} logo={logo ? { source: logo } : undefined} />
+          <Box display="flex" flexDirection="column" flexGrow="1" minWidth={0}>
+            <Text size={3} fontWeight="medium">
+              {extension.label}
+            </Text>
+            <Text
+              as="a"
+              size={2}
+              color="default2"
+              href={appPageUrl}
+              onClick={e => {
+                e.preventDefault();
+                navigate(appPageUrl);
+              }}
+            >
+              {extension.app.name}
+            </Text>
+          </Box>
+        </Box>
+      </DashboardCard.Header>
+      <DashboardCard.Content>
+        <Box
+          display="flex"
+          flexDirection="column"
+          width="100%"
+          height="100%"
+          __minHeight={MIN_CELL_HEIGHT}
+        >
+          <ExtensionIframe extension={extension} height="100%" loaderType="skeleton" />
+        </Box>
+      </DashboardCard.Content>
+    </DashboardCard>
+  );
+};
diff --git a/src/home/HomeWidgetTabs.stories.tsx b/src/home/HomeWidgetTabs.stories.tsx
index 19ead1356d9..fa0132109eb 100644
--- a/src/home/HomeWidgetTabs.stories.tsx
+++ b/src/home/HomeWidgetTabs.stories.tsx
@@ -56,8 +56,9 @@ const meta: Meta<typeof HomeWidgetTabs> = {
   title: "Home/HomeWidgetTabs",
   component: HomeWidgetTabs,
   args: {
-    activeExtensionId: officialExtension.id,
-    extensions: [officialExtension, externalExtension],
+    activeTab: { kind: "extension", id: officialExtension.id },
+    fullscreenExtensions: [officialExtension, externalExtension],
+    showWidgetsTab: false,
   },
 };
 
@@ -67,9 +68,24 @@ type Story = StoryObj<typeof HomeWidgetTabs>;
 
 export const Default: Story = {};
 
+export const WithWidgetsTab: Story = {
+  args: {
+    fullscreenExtensions: [officialExtension, externalExtension],
+    showWidgetsTab: true,
+  },
+};
+
+export const WidgetsTabActive: Story = {
+  args: {
+    fullscreenExtensions: [officialExtension, externalExtension],
+    showWidgetsTab: true,
+    activeTab: { kind: "widgets" },
+  },
+};
+
 export const OnlyOfficialApps: Story = {
   args: {
-    extensions: [
+    fullscreenExtensions: [
       officialExtension,
       buildExtension({
         id: "official-2",
@@ -90,8 +106,8 @@ export const OnlyOfficialApps: Story = {
 
 export const OnlyExternalApps: Story = {
   args: {
-    activeExtensionId: externalExtension.id,
-    extensions: [
+    activeTab: { kind: "extension", id: externalExtension.id },
+    fullscreenExtensions: [
       externalExtension,
       buildExtension({
         id: "external-2",
@@ -112,6 +128,14 @@ export const OnlyExternalApps: Story = {
 
 export const SingleTab: Story = {
   args: {
-    extensions: [officialExtension],
+    fullscreenExtensions: [officialExtension],
+  },
+};
+
+export const OnlyWidgetsTab: Story = {
+  args: {
+    fullscreenExtensions: [],
+    showWidgetsTab: true,
+    activeTab: { kind: "widgets" },
   },
 };
diff --git a/src/home/HomeWidgetTabs.tsx b/src/home/HomeWidgetTabs.tsx
index 8adb1955c86..2321f15041f 100644
--- a/src/home/HomeWidgetTabs.tsx
+++ b/src/home/HomeWidgetTabs.tsx
@@ -3,25 +3,43 @@ import { type Extension } from "@dashboard/extensions/types";
 import { SaleorLogo } from "@dashboard/extensions/views/InstallCustomExtension/components/InstallSectionData/InstallExtensionManifestData/SaleorLogo";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { Box, Text } from "@saleor/macaw-ui-next";
+import { Blocks } from "lucide-react";
+import { defineMessages, useIntl } from "react-intl";
 
-import { homeWidgetUrl } from "./urls";
+import { homeWidgetsUrl, homeWidgetUrl } from "./urls";
 
 const HomeTab = Tab<string>("home-widget-tab");
 
+const messages = defineMessages({
+  widgetsTab: {
+    id: "qkaF5G",
+    defaultMessage: "Widgets",
+    description: "Label of the home page tab grouping non-fullscreen widget extensions",
+  },
+});
+
+export type HomeActiveTab = { kind: "extension"; id: string } | { kind: "widgets" };
+
 interface HomeWidgetTabsProps {
-  extensions: Extension[];
-  activeExtensionId: string | null;
+  fullscreenExtensions: Extension[];
+  showWidgetsTab: boolean;
+  activeTab: HomeActiveTab;
 }
 
-export const HomeWidgetTabs = ({ extensions, activeExtensionId }: HomeWidgetTabsProps) => {
+export const HomeWidgetTabs = ({
+  fullscreenExtensions,
+  showWidgetsTab,
+  activeTab,
+}: HomeWidgetTabsProps) => {
   const navigate = useNavigator();
+  const intl = useIntl();
 
   return (
     <TabContainer>
-      {extensions.map(extension => (
+      {fullscreenExtensions.map(extension => (
         <HomeTab
           key={extension.id}
-          isActive={extension.id === activeExtensionId}
+          isActive={activeTab.kind === "extension" && activeTab.id === extension.id}
           changeTab={() => navigate(homeWidgetUrl(extension.id))}
           testId={`home-widget-tab-${extension.id}`}
         >
@@ -47,6 +65,18 @@ export const HomeWidgetTabs = ({ extensions, activeExtensionId }: HomeWidgetTabs
           </Box>
         </HomeTab>
       ))}
+      {showWidgetsTab && (
+        <HomeTab
+          isActive={activeTab.kind === "widgets"}
+          changeTab={() => navigate(homeWidgetsUrl())}
+          testId="home-widgets-tab"
+        >
+          <Box display="inline-flex" alignItems="center" gap={2}>
+            <Blocks size={16} />
+            <span>{intl.formatMessage(messages.widgetsTab)}</span>
+          </Box>
+        </HomeTab>
+      )}
     </TabContainer>
   );
 };
diff --git a/src/home/HomeWidgetView.tsx b/src/home/HomeWidgetView.tsx
index 93b0d4b72aa..2ed559ad9cd 100644
--- a/src/home/HomeWidgetView.tsx
+++ b/src/home/HomeWidgetView.tsx
@@ -1,46 +1,11 @@
-import { APP_VERSION } from "@dashboard/config";
-import { IframePost } from "@dashboard/extensions/components/IframePost/IframePost";
-import { appExtensionManifestOptionsSchema } from "@dashboard/extensions/domain/app-extension-manifest-options";
-import { isUrlAbsolute } from "@dashboard/extensions/isUrlAbsolute";
 import { type Extension } from "@dashboard/extensions/types";
-import { AppFrame } from "@dashboard/extensions/views/ViewManifestExtension/components/AppFrame/AppFrame";
-import { Box } from "@saleor/macaw-ui-next";
+
+import { ExtensionIframe } from "./ExtensionIframe";
 
 interface HomeWidgetViewProps {
   extension: Extension;
 }
 
-export const HomeWidgetView = ({ extension }: HomeWidgetViewProps) => {
-  const settings = appExtensionManifestOptionsSchema.safeParse(extension.settings);
-  const method = settings.success ? (settings.data.homeWidget?.method ?? "POST") : "POST";
-  const extensionUrl = isUrlAbsolute(extension.url)
-    ? extension.url
-    : `${extension.app.appUrl}${extension.url}`;
-
-  if (method === "POST") {
-    return (
-      <Box position="relative" width="100%" height="100%">
-        <IframePost
-          appId={extension.app.id}
-          accessToken={extension.accessToken}
-          extensionId={extension.id}
-          extensionUrl={extensionUrl}
-          height="100%"
-          loaderType="throbber"
-        />
-      </Box>
-    );
-  }
-
-  return (
-    <Box position="relative" __lineHeight={0} width="100%" height="100%">
-      <AppFrame
-        target="WIDGET"
-        src={extensionUrl}
-        appToken={extension.accessToken}
-        appId={extension.app.id}
-        dashboardVersion={APP_VERSION}
-      />
-    </Box>
-  );
-};
+export const HomeWidgetView = ({ extension }: HomeWidgetViewProps) => (
+  <ExtensionIframe extension={extension} height="100%" loaderType="throbber" />
+);
diff --git a/src/home/HomeWidgetsGrid.tsx b/src/home/HomeWidgetsGrid.tsx
new file mode 100644
index 00000000000..73d6098d0aa
--- /dev/null
+++ b/src/home/HomeWidgetsGrid.tsx
@@ -0,0 +1,22 @@
+import { type Extension } from "@dashboard/extensions/types";
+import { Box } from "@saleor/macaw-ui-next";
+
+import { HomeWidgetCell } from "./HomeWidgetCell";
+
+interface HomeWidgetsGridProps {
+  extensions: Extension[];
+}
+
+export const HomeWidgetsGrid = ({ extensions }: HomeWidgetsGridProps) => (
+  <Box
+    display="grid"
+    gap={6}
+    width="100%"
+    __gridTemplateColumns="1fr 1fr"
+    data-test-id="home-widgets-grid"
+  >
+    {extensions.map(extension => (
+      <HomeWidgetCell key={extension.id} extension={extension} />
+    ))}
+  </Box>
+);
diff --git a/src/home/filterHomeExtensions.test.ts b/src/home/filterHomeExtensions.test.ts
index 95b5468a159..dc43225c40a 100644
--- a/src/home/filterHomeExtensions.test.ts
+++ b/src/home/filterHomeExtensions.test.ts
@@ -30,7 +30,7 @@ const buildExtension = (overrides: Partial<Extension>): Extension => ({
 });
 
 describe("filterHomeExtensions", () => {
-  it("keeps HOMEPAGE_WIDGETS extensions with no settings (fullscreen default true)", () => {
+  it("treats HOMEPAGE_WIDGETS extensions with no settings as widget (fullscreen default false)", () => {
     // Arrange
     const extensions = [buildExtension({})];
 
@@ -38,10 +38,11 @@ describe("filterHomeExtensions", () => {
     const result = filterHomeExtensions(extensions, userPermissions);
 
     // Assert
-    expect(result).toHaveLength(1);
+    expect(result.fullscreen).toHaveLength(0);
+    expect(result.widgets).toHaveLength(1);
   });
 
-  it("keeps HOMEPAGE_WIDGETS extensions with homeWidget.fullscreen=true", () => {
+  it("treats explicit homeWidget.fullscreen=true as fullscreen", () => {
     // Arrange
     const extensions = [
       buildExtension({
@@ -53,10 +54,11 @@ describe("filterHomeExtensions", () => {
     const result = filterHomeExtensions(extensions, userPermissions);
 
     // Assert
-    expect(result).toHaveLength(1);
+    expect(result.fullscreen).toHaveLength(1);
+    expect(result.widgets).toHaveLength(0);
   });
 
-  it("drops extensions with homeWidget.fullscreen=false", () => {
+  it("treats explicit homeWidget.fullscreen=false as widget", () => {
     // Arrange
     const extensions = [
       buildExtension({
@@ -68,7 +70,24 @@ describe("filterHomeExtensions", () => {
     const result = filterHomeExtensions(extensions, userPermissions);
 
     // Assert
-    expect(result).toHaveLength(0);
+    expect(result.fullscreen).toHaveLength(0);
+    expect(result.widgets).toHaveLength(1);
+  });
+
+  it("treats homeWidget without explicit fullscreen as widget (default false)", () => {
+    // Arrange
+    const extensions = [
+      buildExtension({
+        settings: { homeWidget: { method: "POST" } },
+      }),
+    ];
+
+    // Act
+    const result = filterHomeExtensions(extensions, userPermissions);
+
+    // Assert
+    expect(result.fullscreen).toHaveLength(0);
+    expect(result.widgets).toHaveLength(1);
   });
 
   it("drops extensions with non-HOMEPAGE_WIDGETS mount", () => {
@@ -79,7 +98,8 @@ describe("filterHomeExtensions", () => {
     const result = filterHomeExtensions(extensions, userPermissions);
 
     // Assert
-    expect(result).toHaveLength(0);
+    expect(result.fullscreen).toHaveLength(0);
+    expect(result.widgets).toHaveLength(0);
   });
 
   it("drops extensions whose required permissions the user lacks", () => {
@@ -94,7 +114,8 @@ describe("filterHomeExtensions", () => {
     const result = filterHomeExtensions(extensions, userPermissions);
 
     // Assert
-    expect(result).toHaveLength(0);
+    expect(result.fullscreen).toHaveLength(0);
+    expect(result.widgets).toHaveLength(0);
   });
 
   it("keeps extensions whose required permissions the user has", () => {
@@ -102,6 +123,7 @@ describe("filterHomeExtensions", () => {
     const extensions = [
       buildExtension({
         permissions: [PermissionEnum.MANAGE_PRODUCTS],
+        settings: { homeWidget: { fullscreen: true, method: "GET" } },
       }),
     ];
 
@@ -109,21 +131,62 @@ describe("filterHomeExtensions", () => {
     const result = filterHomeExtensions(extensions, userPermissions);
 
     // Assert
-    expect(result).toHaveLength(1);
+    expect(result.fullscreen).toHaveLength(1);
   });
 
-  it("preserves input order", () => {
+  it("preserves input order within each split", () => {
     // Arrange
     const extensions = [
-      buildExtension({ id: "a", label: "A" }),
-      buildExtension({ id: "b", label: "B" }),
-      buildExtension({ id: "c", label: "C" }),
+      buildExtension({
+        id: "a",
+        label: "A",
+        settings: { homeWidget: { fullscreen: true, method: "GET" } },
+      }),
+      buildExtension({
+        id: "b",
+        label: "B",
+        settings: { homeWidget: { fullscreen: false, method: "GET" } },
+      }),
+      buildExtension({
+        id: "c",
+        label: "C",
+        settings: { homeWidget: { fullscreen: true, method: "GET" } },
+      }),
+      buildExtension({
+        id: "d",
+        label: "D",
+        settings: { homeWidget: { fullscreen: false, method: "GET" } },
+      }),
+    ];
+
+    // Act
+    const result = filterHomeExtensions(extensions, userPermissions);
+
+    // Assert
+    expect(result.fullscreen.map(e => e.id)).toEqual(["a", "c"]);
+    expect(result.widgets.map(e => e.id)).toEqual(["b", "d"]);
+  });
+
+  it("drops extensions with relative url and missing app appUrl", () => {
+    // Arrange
+    const extensions = [
+      buildExtension({
+        url: "/widget",
+        app: {
+          __typename: "App",
+          id: "app-1",
+          appUrl: null,
+          name: "App 1",
+          brand: null,
+        },
+      }),
     ];
 
     // Act
     const result = filterHomeExtensions(extensions, userPermissions);
 
     // Assert
-    expect(result.map(e => e.id)).toEqual(["a", "b", "c"]);
+    expect(result.fullscreen).toHaveLength(0);
+    expect(result.widgets).toHaveLength(0);
   });
 });
diff --git a/src/home/filterHomeExtensions.ts b/src/home/filterHomeExtensions.ts
index 90e8d579c18..cc1a51f649f 100644
--- a/src/home/filterHomeExtensions.ts
+++ b/src/home/filterHomeExtensions.ts
@@ -4,28 +4,39 @@ import { isUrlAbsolute } from "@dashboard/extensions/isUrlAbsolute";
 import { type Extension } from "@dashboard/extensions/types";
 import { type UserPermissionFragment } from "@dashboard/graphql";
 
+export interface HomeExtensionsSplit {
+  fullscreen: Extension[];
+  widgets: Extension[];
+}
+
 export const filterHomeExtensions = (
   extensions: Extension[],
   userPermissions: UserPermissionFragment[],
-): Extension[] =>
-  extensions.filter(extension => {
+): HomeExtensionsSplit => {
+  const result: HomeExtensionsSplit = { fullscreen: [], widgets: [] };
+
+  for (const extension of extensions) {
     if (extension.mountName !== "HOMEPAGE_WIDGETS") {
-      return false;
+      continue;
     }
 
     if (!hasPermissions(userPermissions, extension.permissions)) {
-      return false;
+      continue;
     }
 
-    // Relative extension URLs require an appUrl to resolve against - skip when absent
     if (!extension.url || (!isUrlAbsolute(extension.url) && !extension.app.appUrl)) {
-      return false;
+      continue;
     }
 
-    // fullscreen defaults to true when homeWidget is omitted or settings can't be parsed -
-    // extensions without explicit homeWidget config are still considered fullscreen home widgets
     const settings = appExtensionManifestOptionsSchema.safeParse(extension.settings);
-    const fullscreen = settings.success ? (settings.data.homeWidget?.fullscreen ?? true) : true;
+    const fullscreen = settings.success ? (settings.data.homeWidget?.fullscreen ?? false) : false;
+
+    if (fullscreen) {
+      result.fullscreen.push(extension);
+    } else {
+      result.widgets.push(extension);
+    }
+  }
 
-    return fullscreen;
-  });
+  return result;
+};
diff --git a/src/home/urls.ts b/src/home/urls.ts
index fd8133bd8b8..b28fdd5d52b 100644
--- a/src/home/urls.ts
+++ b/src/home/urls.ts
@@ -1,2 +1,4 @@
 export const homeWidgetUrl = (extensionId: string) =>
   `/home/widget/${encodeURIComponent(extensionId)}`;
+
+export const homeWidgetsUrl = () => "/home/widgets";
diff --git a/src/index.tsx b/src/index.tsx
index 241e8d5b89b..7f1cb14b274 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -187,6 +187,7 @@ const Routes = () => {
                   {legacyRedirects}
                   <SectionRoute exact path="/" component={HomePage} />
                   <SectionRoute exact path="/home/widget/:extensionId" component={HomePage} />
+                  <SectionRoute exact path="/home/widgets" component={HomePage} />
                   <SectionRoute
                     permissions={[
                       PermissionEnum.MANAGE_PRODUCTS,

From d0f77eb1cf3f53df978c6bc5cca17957caf73c7a Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Tue, 5 May 2026 15:24:58 +0200
Subject: [PATCH 07/18] fix ui

---
 src/home/HomeWidgetTabs.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/home/HomeWidgetTabs.tsx b/src/home/HomeWidgetTabs.tsx
index 2321f15041f..faba8084dad 100644
--- a/src/home/HomeWidgetTabs.tsx
+++ b/src/home/HomeWidgetTabs.tsx
@@ -72,8 +72,18 @@ export const HomeWidgetTabs = ({
           testId="home-widgets-tab"
         >
           <Box display="inline-flex" alignItems="center" gap={2}>
-            <Blocks size={16} />
-            <span>{intl.formatMessage(messages.widgetsTab)}</span>
+            <Box
+              __width={20}
+              __height={20}
+              display="inline-flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Blocks size={16} />
+            </Box>
+            <Box display="inline-flex" flexDirection="column">
+              <span>{intl.formatMessage(messages.widgetsTab)}</span>
+            </Box>
           </Box>
         </HomeTab>
       )}

From b386bd0e58b069ab08c2c176aed12a3ccf0ed071 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Tue, 5 May 2026 17:18:38 +0200
Subject: [PATCH 08/18] restore onboarding

---
 src/components/DevModePanel/DevModePanel.tsx  |  6 ++
 .../InstalledExtensions.test.tsx              | 15 +++++
 .../InstalledExtensions.tsx                   |  8 ++-
 src/graphql/hooks.generated.ts                | 36 ++++++++++++
 src/graphql/types.generated.ts                |  8 +++
 src/index.tsx                                 |  5 +-
 src/onboarding/OnboardingContext.tsx          | 35 ++++++++++++
 src/onboarding/mutations.ts                   | 11 ++++
 src/onboarding/types.ts                       | 15 +++++
 src/onboarding/useOnboardingStorage.ts        | 39 +++++++++++++
 src/onboarding/utils.ts                       | 55 +++++++++++++++++++
 src/orders/views/OrderList/OrderList.tsx      |  9 ++-
 .../views/ProductCreate/ProductCreate.tsx     |  3 +
 src/staff/views/StaffList/StaffList.tsx       |  3 +
 14 files changed, 245 insertions(+), 3 deletions(-)
 create mode 100644 src/onboarding/OnboardingContext.tsx
 create mode 100644 src/onboarding/mutations.ts
 create mode 100644 src/onboarding/types.ts
 create mode 100644 src/onboarding/useOnboardingStorage.ts
 create mode 100644 src/onboarding/utils.ts

diff --git a/src/components/DevModePanel/DevModePanel.tsx b/src/components/DevModePanel/DevModePanel.tsx
index 30640e8dbd6..42f89be12d0 100644
--- a/src/components/DevModePanel/DevModePanel.tsx
+++ b/src/components/DevModePanel/DevModePanel.tsx
@@ -1,6 +1,7 @@
 // @ts-strict-ignore
 import { useDashboardTheme } from "@dashboard/components/GraphiQL/styles";
 import { DashboardModal } from "@dashboard/components/Modal";
+import { useOnboarding } from "@dashboard/onboarding/OnboardingContext";
 import { type FetcherOpts, type FetcherParams } from "@graphiql/toolkit";
 import { useIntl } from "react-intl";
 
@@ -15,8 +16,13 @@ export const DevModePanel = () => {
   const intl = useIntl();
   const subtitle = useContextualLink("dev_panel");
   const { rootStyle } = useDashboardTheme();
+  const { markOnboardingStepAsCompleted } = useOnboarding();
   const { isDevModeVisible, variables, devModeContent, setDevModeVisibility } = useDevModeContext();
   const fetcher = async (graphQLParams: FetcherParams, opts: FetcherOpts) => {
+    if (graphQLParams.operationName !== "IntrospectionQuery") {
+      markOnboardingStepAsCompleted("graphql-playground");
+    }
+
     const baseFetcher = getFetcher(opts);
 
     const result = await baseFetcher(graphQLParams, opts);
diff --git a/src/extensions/views/InstalledExtensions/InstalledExtensions.test.tsx b/src/extensions/views/InstalledExtensions/InstalledExtensions.test.tsx
index b1071e53631..e032ebde114 100644
--- a/src/extensions/views/InstalledExtensions/InstalledExtensions.test.tsx
+++ b/src/extensions/views/InstalledExtensions/InstalledExtensions.test.tsx
@@ -5,6 +5,7 @@ import { useInstalledExtensionsFilter } from "./hooks/useInstalledExtensionsFilt
 import { usePendingInstallation } from "./hooks/usePendingInstallation";
 import { InstalledExtensions, type InstalledExtensionsProps } from "./InstalledExtensions";
 
+const mockMarkOnboardingStepAsCompleted = jest.fn();
 const mockHandleRemoveInProgress = jest.fn();
 const mockCloseModal = jest.fn();
 const mockOpenModal = jest.fn();
@@ -51,6 +52,12 @@ jest.mock("@dashboard/featureFlags", () => ({
   useFlags: () => ({}),
 }));
 
+jest.mock("@dashboard/onboarding/OnboardingContext", () => ({
+  useOnboarding: () => ({
+    markOnboardingStepAsCompleted: mockMarkOnboardingStepAsCompleted,
+  }),
+}));
+
 const mockUsePendingInstallation = usePendingInstallation as jest.Mock;
 const mockUseInstalledExtensionsFilter = useInstalledExtensionsFilter as jest.Mock;
 
@@ -77,6 +84,14 @@ describe("InstalledExtensions", () => {
     }));
   });
 
+  it("marks onboarding step as completed on mount", () => {
+    // Arrange & Act
+    render(<InstalledExtensions {...defaultProps} />);
+
+    // Assert
+    expect(mockMarkOnboardingStepAsCompleted).toHaveBeenCalledWith("view-extensions");
+  });
+
   it("displays installed and pending extensions in the list initially", () => {
     // Arrange & Act
     render(<InstalledExtensions {...defaultProps} />);
diff --git a/src/extensions/views/InstalledExtensions/InstalledExtensions.tsx b/src/extensions/views/InstalledExtensions/InstalledExtensions.tsx
index c5278014cce..db081d9ea4d 100644
--- a/src/extensions/views/InstalledExtensions/InstalledExtensions.tsx
+++ b/src/extensions/views/InstalledExtensions/InstalledExtensions.tsx
@@ -14,9 +14,10 @@ import { useAppAllProblemsLazyQuery, useAppProblemDismissMutation } from "@dashb
 import { useHasManagedAppsPermission } from "@dashboard/hooks/useHasManagedAppsPermission";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { useNotifier } from "@dashboard/hooks/useNotifier";
+import { useOnboarding } from "@dashboard/onboarding/OnboardingContext";
 import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
 import { Box, Text } from "@saleor/macaw-ui-next";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import { useIntl } from "react-intl";
 
 import { AddExtensionDropdown } from "./components/AddExtensionDropdown/AddExtensionDropdown";
@@ -34,8 +35,13 @@ export const InstalledExtensions = ({ params }: InstalledExtensionsProps) => {
   const intl = useIntl();
   const navigate = useNavigator();
   const { hasManagedAppsPermission } = useHasManagedAppsPermission();
+  const { markOnboardingStepAsCompleted } = useOnboarding();
   const subtitle = useContextualLink("extensions");
 
+  useEffect(() => {
+    markOnboardingStepAsCompleted("view-extensions");
+  }, [markOnboardingStepAsCompleted]);
+
   const [openModal, closeModal] = createDialogActionHandlers<
     ExtensionsListUrlDialog,
     ExtensionsListUrlQueryParams
diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts
index 68934aa90e3..7687d4ba71b 100644
--- a/src/graphql/hooks.generated.ts
+++ b/src/graphql/hooks.generated.ts
@@ -11574,6 +11574,42 @@ export function useModelsOfTypeLazyQuery(baseOptions?: ApolloReactHooks.LazyQuer
 export type ModelsOfTypeQueryHookResult = ReturnType<typeof useModelsOfTypeQuery>;
 export type ModelsOfTypeLazyQueryHookResult = ReturnType<typeof useModelsOfTypeLazyQuery>;
 export type ModelsOfTypeQueryResult = Apollo.QueryResult<Types.ModelsOfTypeQuery, Types.ModelsOfTypeQueryVariables>;
+export const SaveOnBoardingStateDocument = gql`
+    mutation SaveOnBoardingState($id: ID!, $input: [MetadataInput!]!) {
+  updateMetadata(id: $id, input: $input) {
+    errors {
+      ...MetadataError
+    }
+  }
+}
+    ${MetadataErrorFragmentDoc}`;
+export type SaveOnBoardingStateMutationFn = Apollo.MutationFunction<Types.SaveOnBoardingStateMutation, Types.SaveOnBoardingStateMutationVariables>;
+
+/**
+ * __useSaveOnBoardingStateMutation__
+ *
+ * To run a mutation, you first call `useSaveOnBoardingStateMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useSaveOnBoardingStateMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [saveOnBoardingStateMutation, { data, loading, error }] = useSaveOnBoardingStateMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *      input: // value for 'input'
+ *   },
+ * });
+ */
+export function useSaveOnBoardingStateMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.SaveOnBoardingStateMutation, Types.SaveOnBoardingStateMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useMutation<Types.SaveOnBoardingStateMutation, Types.SaveOnBoardingStateMutationVariables>(SaveOnBoardingStateDocument, options);
+      }
+export type SaveOnBoardingStateMutationHookResult = ReturnType<typeof useSaveOnBoardingStateMutation>;
+export type SaveOnBoardingStateMutationResult = Apollo.MutationResult<Types.SaveOnBoardingStateMutation>;
+export type SaveOnBoardingStateMutationOptions = Apollo.BaseMutationOptions<Types.SaveOnBoardingStateMutation, Types.SaveOnBoardingStateMutationVariables>;
 export const OrderCancelDocument = gql`
     mutation OrderCancel($id: ID!) {
   orderCancel(id: $id) {
diff --git a/src/graphql/types.generated.ts b/src/graphql/types.generated.ts
index 5a217d6e94c..fb4bdbe7678 100644
--- a/src/graphql/types.generated.ts
+++ b/src/graphql/types.generated.ts
@@ -12157,6 +12157,14 @@ export type ModelsOfTypeQueryVariables = Exact<{
 
 export type ModelsOfTypeQuery = { __typename: 'Query', pages: { __typename: 'PageCountableConnection', edges: Array<{ __typename: 'PageCountableEdge', node: { __typename: 'Page', id: string, title: string } }> } | null };
 
+export type SaveOnBoardingStateMutationVariables = Exact<{
+  id: Scalars['ID'];
+  input: Array<MetadataInput> | MetadataInput;
+}>;
+
+
+export type SaveOnBoardingStateMutation = { __typename: 'Mutation', updateMetadata: { __typename: 'UpdateMetadata', errors: Array<{ __typename: 'MetadataError', code: MetadataErrorCode, field: string | null, message: string | null }> } | null };
+
 export type OrderCancelMutationVariables = Exact<{
   id: Scalars['ID'];
 }>;
diff --git a/src/index.tsx b/src/index.tsx
index 7f1cb14b274..483f7edcbcf 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -50,6 +50,7 @@ import { apolloClient, saleorClient } from "./graphql/client";
 import { useLocationState } from "./hooks/useLocationState";
 import { commonMessages } from "./intl";
 import { NotFound } from "./NotFound";
+import { OnboardingProvider } from "./onboarding/OnboardingContext";
 import { errorTracker } from "./services/errorTracking";
 import { paletteOverrides, themeOverrides } from "./themeOverrides";
 import { warehouseSection } from "./warehouses/urls";
@@ -132,7 +133,9 @@ const App = (): JSX.Element => (
                                 <NavigatorSearchProvider>
                                   <SavebarRefProvider>
                                     <FeatureFlagsProviderWithUser>
-                                      <Routes />
+                                      <OnboardingProvider>
+                                        <Routes />
+                                      </OnboardingProvider>
                                     </FeatureFlagsProviderWithUser>
                                   </SavebarRefProvider>
                                 </NavigatorSearchProvider>
diff --git a/src/onboarding/OnboardingContext.tsx b/src/onboarding/OnboardingContext.tsx
new file mode 100644
index 00000000000..bf3625c3a90
--- /dev/null
+++ b/src/onboarding/OnboardingContext.tsx
@@ -0,0 +1,35 @@
+import { createContext, type ReactNode, useContext, useMemo } from "react";
+
+import { type OnboardingContextType, type OnboardingStepsIDs } from "./types";
+import { useOnboardingStorage } from "./useOnboardingStorage";
+
+const OnboardingContext = createContext<OnboardingContextType | null>(null);
+
+interface OnboardingProviderProps {
+  children: ReactNode;
+}
+
+export const OnboardingProvider = ({ children }: OnboardingProviderProps) => {
+  const { markStepCompleted } = useOnboardingStorage();
+
+  const value = useMemo<OnboardingContextType>(
+    () => ({
+      markOnboardingStepAsCompleted: (id: OnboardingStepsIDs) => {
+        void markStepCompleted(id);
+      },
+    }),
+    [markStepCompleted],
+  );
+
+  return <OnboardingContext.Provider value={value}>{children}</OnboardingContext.Provider>;
+};
+
+export const useOnboarding = () => {
+  const context = useContext(OnboardingContext);
+
+  if (context === null) {
+    throw new Error("useOnboarding must be used within a OnboardingProvider");
+  }
+
+  return context;
+};
diff --git a/src/onboarding/mutations.ts b/src/onboarding/mutations.ts
new file mode 100644
index 00000000000..e25547b886d
--- /dev/null
+++ b/src/onboarding/mutations.ts
@@ -0,0 +1,11 @@
+import { gql } from "@apollo/client";
+
+export const saveOnBoardingState = gql`
+  mutation SaveOnBoardingState($id: ID!, $input: [MetadataInput!]!) {
+    updateMetadata(id: $id, input: $input) {
+      errors {
+        ...MetadataError
+      }
+    }
+  }
+`;
diff --git a/src/onboarding/types.ts b/src/onboarding/types.ts
new file mode 100644
index 00000000000..c5c4e20b4c9
--- /dev/null
+++ b/src/onboarding/types.ts
@@ -0,0 +1,15 @@
+export type OnboardingStepsIDs =
+  | "get-started"
+  | "create-product"
+  | "explore-orders"
+  | "graphql-playground"
+  | "view-extensions"
+  | "invite-staff";
+
+export interface OnboardingMetadataState {
+  stepsCompleted: OnboardingStepsIDs[];
+}
+
+export interface OnboardingContextType {
+  markOnboardingStepAsCompleted: (id: OnboardingStepsIDs) => void;
+}
diff --git a/src/onboarding/useOnboardingStorage.ts b/src/onboarding/useOnboardingStorage.ts
new file mode 100644
index 00000000000..2836c3b1cb5
--- /dev/null
+++ b/src/onboarding/useOnboardingStorage.ts
@@ -0,0 +1,39 @@
+import { useUser } from "@dashboard/auth/useUser";
+import { useSaveOnBoardingStateMutation } from "@dashboard/graphql";
+import { useCallback } from "react";
+
+import { type OnboardingStepsIDs } from "./types";
+import { appendCompletedStepToMetadata } from "./utils";
+
+export const useOnboardingStorage = () => {
+  const { user } = useUser();
+  const [saveOnboarding] = useSaveOnBoardingStateMutation();
+
+  const markStepCompleted = useCallback(
+    async (stepId: OnboardingStepsIDs) => {
+      if (!user) {
+        return;
+      }
+
+      const { input, changed } = appendCompletedStepToMetadata(user.metadata, stepId);
+
+      if (!changed) {
+        return;
+      }
+
+      try {
+        await saveOnboarding({
+          variables: {
+            id: user.id,
+            input,
+          },
+        });
+      } catch (error) {
+        console.warn("Could not save onboarding state to metadata", { error });
+      }
+    },
+    [saveOnboarding, user],
+  );
+
+  return { markStepCompleted };
+};
diff --git a/src/onboarding/utils.ts b/src/onboarding/utils.ts
new file mode 100644
index 00000000000..299ada2f96e
--- /dev/null
+++ b/src/onboarding/utils.ts
@@ -0,0 +1,55 @@
+import { type MetadataInput } from "@dashboard/graphql";
+
+import { type OnboardingMetadataState, type OnboardingStepsIDs } from "./types";
+
+export const METADATA_KEY = "onboarding";
+
+const cloneMetadata = (data: MetadataInput): MetadataInput => ({
+  key: data.key,
+  value: data.value,
+});
+
+const parseExistingState = (metadata: MetadataInput[] | undefined): OnboardingMetadataState => {
+  const entry = metadata?.find(m => m.key === METADATA_KEY);
+
+  if (!entry) {
+    return { stepsCompleted: [] };
+  }
+
+  try {
+    const parsed = JSON.parse(entry.value);
+
+    return {
+      stepsCompleted: Array.isArray(parsed?.stepsCompleted) ? parsed.stepsCompleted : [],
+    };
+  } catch {
+    return { stepsCompleted: [] };
+  }
+};
+
+export const appendCompletedStepToMetadata = (
+  metadata: MetadataInput[] | undefined,
+  stepId: OnboardingStepsIDs,
+): { input: MetadataInput[]; changed: boolean } => {
+  const existing = parseExistingState(metadata);
+
+  if (existing.stepsCompleted.includes(stepId)) {
+    return { input: metadata?.map(cloneMetadata) ?? [], changed: false };
+  }
+
+  const newState: OnboardingMetadataState = {
+    ...existing,
+    stepsCompleted: [...existing.stepsCompleted, stepId],
+  };
+  const newValue = JSON.stringify(newState);
+  const userMetadata: MetadataInput[] = metadata?.map(cloneMetadata) ?? [];
+  const index = userMetadata.findIndex(m => m.key === METADATA_KEY);
+
+  if (index !== -1) {
+    userMetadata[index] = { key: METADATA_KEY, value: newValue };
+  } else {
+    userMetadata.push({ key: METADATA_KEY, value: newValue });
+  }
+
+  return { input: userMetadata, changed: true };
+};
diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx
index 073d39852a5..65afeb3b904 100644
--- a/src/orders/views/OrderList/OrderList.tsx
+++ b/src/orders/views/OrderList/OrderList.tsx
@@ -18,12 +18,13 @@ import usePaginator, {
   createPaginationState,
   PaginatorContext,
 } from "@dashboard/hooks/usePaginator";
+import { useOnboarding } from "@dashboard/onboarding/OnboardingContext";
 import { ListViews } from "@dashboard/types";
 import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
 import createSortHandler from "@dashboard/utils/handlers/sortHandler";
 import { mapEdgesToItems, mapNodeToChoice } from "@dashboard/utils/maps";
 import { getSortParams } from "@dashboard/utils/sort";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { useIntl } from "react-intl";
 
 import OrderListPage from "../../components/OrderListPage/OrderListPage";
@@ -47,6 +48,12 @@ const OrderList = ({ params }: OrderListProps) => {
   const { updateListSettings, settings } = useListSettings(ListViews.ORDER_LIST);
   const { valueProvider } = useConditionalFilterContext();
 
+  const { markOnboardingStepAsCompleted } = useOnboarding();
+
+  useEffect(() => {
+    markOnboardingStepAsCompleted("explore-orders");
+  }, []);
+
   const {
     hasPresetsChanged,
     onPresetChange,
diff --git a/src/products/views/ProductCreate/ProductCreate.tsx b/src/products/views/ProductCreate/ProductCreate.tsx
index d914f5c8bb8..58eba2da70a 100644
--- a/src/products/views/ProductCreate/ProductCreate.tsx
+++ b/src/products/views/ProductCreate/ProductCreate.tsx
@@ -24,6 +24,7 @@ import useNavigator from "@dashboard/hooks/useNavigator";
 import { useNotifier } from "@dashboard/hooks/useNotifier";
 import useShop from "@dashboard/hooks/useShop";
 import { getMutationErrors } from "@dashboard/misc";
+import { useOnboarding } from "@dashboard/onboarding/OnboardingContext";
 import ProductCreatePage, {
   type ProductCreateData,
 } from "@dashboard/products/components/ProductCreatePage";
@@ -63,6 +64,7 @@ const ProductCreateView = ({ params }: ProductCreateProps) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const shop = useShop();
+  const { markOnboardingStepAsCompleted } = useOnboarding();
   const intl = useIntl();
   const [productCreateComplete, setProductCreateComplete] = useState(false);
   const selectedProductTypeId = params["product-type-id"];
@@ -203,6 +205,7 @@ const ProductCreateView = ({ params }: ProductCreateProps) => {
     )(data);
 
     if (!errors?.length) {
+      markOnboardingStepAsCompleted("create-product");
       setProductCreateComplete(true);
     }
 
diff --git a/src/staff/views/StaffList/StaffList.tsx b/src/staff/views/StaffList/StaffList.tsx
index b480718c877..356550cc96a 100644
--- a/src/staff/views/StaffList/StaffList.tsx
+++ b/src/staff/views/StaffList/StaffList.tsx
@@ -15,6 +15,7 @@ import usePaginator, {
   createPaginationState,
   PaginatorContext,
 } from "@dashboard/hooks/usePaginator";
+import { useOnboarding } from "@dashboard/onboarding/OnboardingContext";
 import usePermissionGroupSearch from "@dashboard/searches/usePermissionGroupSearch";
 import { ListViews } from "@dashboard/types";
 import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
@@ -49,6 +50,7 @@ const StaffList = ({ params }: StaffListProps) => {
   const notify = useNotifier();
   const { updateListSettings, settings } = useListSettings(ListViews.STAFF_MEMBERS_LIST);
   const intl = useIntl();
+  const { markOnboardingStepAsCompleted } = useOnboarding();
   const { valueProvider } = useConditionalFilterContext();
   const filters = createStaffMembersQueryVariables(valueProvider.value);
 
@@ -79,6 +81,7 @@ const StaffList = ({ params }: StaffListProps) => {
   const [addStaffMember, addStaffMemberData] = useStaffMemberAddMutation({
     onCompleted: data => {
       if (data?.staffCreate?.errors?.length === 0) {
+        markOnboardingStepAsCompleted("invite-staff");
         notify({
           status: "success",
           text: intl.formatMessage({ id: "8a7vg2", defaultMessage: "Staff member invited" }),

From 61a669ca9a978c410baa719335e997cd35153e55 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Thu, 7 May 2026 08:44:10 +0200
Subject: [PATCH 09/18] restore onboarding

---
 src/components/DevModePanel/DevModePanel.tsx  |   2 +-
 .../InstalledExtensions.test.tsx              |   2 +-
 .../InstalledExtensions.tsx                   |   2 +-
 src/fragments/orders.ts                       |  13 +
 src/graphql/hooks.generated.ts                | 202 ++++++++--
 src/graphql/types.generated.ts                |  40 +-
 src/index.tsx                                 |  13 +-
 src/onboarding/OnboardingContext.tsx          |  35 --
 src/onboarding/types.ts                       |  15 -
 src/onboarding/useOnboardingStorage.ts        |  39 --
 src/onboarding/utils.ts                       |  55 ---
 src/orders/views/OrderList/OrderList.tsx      |   2 +-
 .../views/ProductCreate/ProductCreate.tsx     |   2 +-
 src/staff/views/StaffList/StaffList.tsx       |   2 +-
 src/welcomePage/WelcomePage.tsx               |  58 +++
 .../WelcomePageOnboarding.test.tsx            | 297 ++++++++++++++
 .../WelcomePageOnboarding.tsx                 | 128 ++++++
 .../WelcomePageCheckGraphQLButton.tsx         |  25 ++
 .../WelcomePageCreateProductButton.tsx        |  49 +++
 .../WelcomePageFakeDisabledButton.tsx         |  33 ++
 .../WelcomePageInviteStaffButton.tsx          |  44 ++
 .../WelcomePageOnboardingAccordion.tsx        |  97 +++++
 .../components/WelcomePageOrdersButton.tsx    |  45 +++
 .../components/WelcomePageWebhooksButton.tsx  |  16 +
 .../WelcomePageOnboarding/components/type.ts  |   3 +
 .../hooks/useNewUserCheck.test.ts             |  95 +++++
 .../hooks/useNewUserCheck.ts                  |  36 ++
 .../hooks/useOnboardingData.tsx               | 231 +++++++++++
 .../WelcomePageOnboarding/index.ts            |   1 +
 .../WelcomePageOnboarding/mocks.ts            |  14 +
 .../onboardingContext/OnboardingContext.tsx   | 140 +++++++
 .../onboardingContext/index.ts                |   2 +
 .../initialOnboardingState.ts                 |  56 +++
 .../onboardingContext/types.ts                |  43 ++
 .../useExpandedOnboardingId.test.ts           | 186 +++++++++
 .../useExpandedOnboardingId.ts                |  53 +++
 .../useOnboardingStorage.test.ts              | 126 ++++++
 .../onboardingContext/useOnboardingStorage.ts |  60 +++
 .../onboardingContext/utils.test.ts           | 377 ++++++++++++++++++
 .../onboardingContext/utils.ts                | 137 +++++++
 .../WelcmePageSidebar.test.tsx                | 127 ++++++
 .../WelcomePageSidebar/WelcomePageSidebar.tsx |  53 +++
 .../WelcomePageActivities.tsx                 | 106 +++++
 .../WelcomePageActivities/activityMessages.ts |  51 +++
 .../components/WelcomePageActivities/index.ts |   1 +
 .../useWelcomePageActivities.tsx              |  25 ++
 .../components/WelcomePageAnalyticsCard.tsx   |  37 ++
 .../WelcomePageSalesAnalytics.tsx             |  30 ++
 .../WelcomePageSalesAnalytics/index.ts        |   1 +
 .../useWelcomePageSalesAnalytics.ts           |  28 ++
 .../WelcomePageStocksAnalytics.tsx            |  28 ++
 .../WelcomePageStocksAnalytics/index.ts       |   1 +
 .../useWelcomePageStocksAnalytics.ts          |  24 ++
 .../WelcomePageSidebarContextProvider.tsx     |  36 ++
 .../context/welcomePageSidebarContext.ts      |  24 ++
 src/welcomePage/WelcomePageSidebar/index.ts   |   1 +
 .../WelcomePageSidebar/messages.ts            |  12 +
 .../WelcomePageInfoTile.tsx                   |  44 ++
 .../WelcomePageTilesContainer.tsx             |  32 ++
 .../WelcomePageTilesContainer/index.ts        |   1 +
 .../WelcomePageTilesContainer/tileData.tsx    | 231 +++++++++++
 src/welcomePage/WelcomePageTitle.tsx          |  21 +
 src/welcomePage/fixtures.ts                   |  22 +
 src/welcomePage/index.ts                      |   1 +
 src/{onboarding => welcomePage}/mutations.ts  |   0
 src/welcomePage/queries.ts                    |  33 ++
 66 files changed, 3546 insertions(+), 200 deletions(-)
 delete mode 100644 src/onboarding/OnboardingContext.tsx
 delete mode 100644 src/onboarding/types.ts
 delete mode 100644 src/onboarding/useOnboardingStorage.ts
 delete mode 100644 src/onboarding/utils.ts
 create mode 100644 src/welcomePage/WelcomePage.tsx
 create mode 100644 src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.test.tsx
 create mode 100644 src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.tsx
 create mode 100644 src/welcomePage/WelcomePageOnboarding/components/WelcomePageCheckGraphQLButton.tsx
 create mode 100644 src/welcomePage/WelcomePageOnboarding/components/WelcomePageCreateProductButton.tsx
 create mode 100644 src/welcomePage/WelcomePageOnboarding/components/WelcomePageFakeDisabledButton.tsx
 create mode 100644 src/welcomePage/WelcomePageOnboarding/components/WelcomePageInviteStaffButton.tsx
 create mode 100644 src/welcomePage/WelcomePageOnboarding/components/WelcomePageOnboardingAccordion.tsx
 create mode 100644 src/welcomePage/WelcomePageOnboarding/components/WelcomePageOrdersButton.tsx
 create mode 100644 src/welcomePage/WelcomePageOnboarding/components/WelcomePageWebhooksButton.tsx
 create mode 100644 src/welcomePage/WelcomePageOnboarding/components/type.ts
 create mode 100644 src/welcomePage/WelcomePageOnboarding/hooks/useNewUserCheck.test.ts
 create mode 100644 src/welcomePage/WelcomePageOnboarding/hooks/useNewUserCheck.ts
 create mode 100644 src/welcomePage/WelcomePageOnboarding/hooks/useOnboardingData.tsx
 create mode 100644 src/welcomePage/WelcomePageOnboarding/index.ts
 create mode 100644 src/welcomePage/WelcomePageOnboarding/mocks.ts
 create mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/OnboardingContext.tsx
 create mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/index.ts
 create mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/initialOnboardingState.ts
 create mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/types.ts
 create mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/useExpandedOnboardingId.test.ts
 create mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/useExpandedOnboardingId.ts
 create mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/useOnboardingStorage.test.ts
 create mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/useOnboardingStorage.ts
 create mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/utils.test.ts
 create mode 100644 src/welcomePage/WelcomePageOnboarding/onboardingContext/utils.ts
 create mode 100644 src/welcomePage/WelcomePageSidebar/WelcmePageSidebar.test.tsx
 create mode 100644 src/welcomePage/WelcomePageSidebar/WelcomePageSidebar.tsx
 create mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/WelcomePageActivities.tsx
 create mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/activityMessages.ts
 create mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/index.ts
 create mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/useWelcomePageActivities.tsx
 create mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageAnalyticsCard.tsx
 create mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/WelcomePageSalesAnalytics.tsx
 create mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/index.ts
 create mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/useWelcomePageSalesAnalytics.ts
 create mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/WelcomePageStocksAnalytics.tsx
 create mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/index.ts
 create mode 100644 src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/useWelcomePageStocksAnalytics.ts
 create mode 100644 src/welcomePage/WelcomePageSidebar/context/WelcomePageSidebarContextProvider.tsx
 create mode 100644 src/welcomePage/WelcomePageSidebar/context/welcomePageSidebarContext.ts
 create mode 100644 src/welcomePage/WelcomePageSidebar/index.ts
 create mode 100644 src/welcomePage/WelcomePageSidebar/messages.ts
 create mode 100644 src/welcomePage/WelcomePageTilesContainer/WelcomePageInfoTile.tsx
 create mode 100644 src/welcomePage/WelcomePageTilesContainer/WelcomePageTilesContainer.tsx
 create mode 100644 src/welcomePage/WelcomePageTilesContainer/index.ts
 create mode 100644 src/welcomePage/WelcomePageTilesContainer/tileData.tsx
 create mode 100644 src/welcomePage/WelcomePageTitle.tsx
 create mode 100644 src/welcomePage/fixtures.ts
 create mode 100644 src/welcomePage/index.ts
 rename src/{onboarding => welcomePage}/mutations.ts (100%)
 create mode 100644 src/welcomePage/queries.ts

diff --git a/src/components/DevModePanel/DevModePanel.tsx b/src/components/DevModePanel/DevModePanel.tsx
index 42f89be12d0..0049296e8b9 100644
--- a/src/components/DevModePanel/DevModePanel.tsx
+++ b/src/components/DevModePanel/DevModePanel.tsx
@@ -1,7 +1,7 @@
 // @ts-strict-ignore
 import { useDashboardTheme } from "@dashboard/components/GraphiQL/styles";
 import { DashboardModal } from "@dashboard/components/Modal";
-import { useOnboarding } from "@dashboard/onboarding/OnboardingContext";
+import { useOnboarding } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
 import { type FetcherOpts, type FetcherParams } from "@graphiql/toolkit";
 import { useIntl } from "react-intl";
 
diff --git a/src/extensions/views/InstalledExtensions/InstalledExtensions.test.tsx b/src/extensions/views/InstalledExtensions/InstalledExtensions.test.tsx
index e032ebde114..b8b39e411c1 100644
--- a/src/extensions/views/InstalledExtensions/InstalledExtensions.test.tsx
+++ b/src/extensions/views/InstalledExtensions/InstalledExtensions.test.tsx
@@ -52,7 +52,7 @@ jest.mock("@dashboard/featureFlags", () => ({
   useFlags: () => ({}),
 }));
 
-jest.mock("@dashboard/onboarding/OnboardingContext", () => ({
+jest.mock("@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext", () => ({
   useOnboarding: () => ({
     markOnboardingStepAsCompleted: mockMarkOnboardingStepAsCompleted,
   }),
diff --git a/src/extensions/views/InstalledExtensions/InstalledExtensions.tsx b/src/extensions/views/InstalledExtensions/InstalledExtensions.tsx
index db081d9ea4d..31740e82009 100644
--- a/src/extensions/views/InstalledExtensions/InstalledExtensions.tsx
+++ b/src/extensions/views/InstalledExtensions/InstalledExtensions.tsx
@@ -14,8 +14,8 @@ import { useAppAllProblemsLazyQuery, useAppProblemDismissMutation } from "@dashb
 import { useHasManagedAppsPermission } from "@dashboard/hooks/useHasManagedAppsPermission";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { useNotifier } from "@dashboard/hooks/useNotifier";
-import { useOnboarding } from "@dashboard/onboarding/OnboardingContext";
 import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
+import { useOnboarding } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
 import { Box, Text } from "@saleor/macaw-ui-next";
 import { useCallback, useEffect } from "react";
 import { useIntl } from "react-intl";
diff --git a/src/fragments/orders.ts b/src/fragments/orders.ts
index 763e6f3ab47..d520f0def74 100644
--- a/src/fragments/orders.ts
+++ b/src/fragments/orders.ts
@@ -915,3 +915,16 @@ export const fragmentOrderDetailsGrantRefund = gql`
     }
   }
 `;
+
+export const fragmentActivities = gql`
+  fragment Activities on OrderEvent {
+    date
+    email
+    message
+    orderNumber
+    type
+    user {
+      email
+    }
+  }
+`;
diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts
index 7687d4ba71b..036650f69d1 100644
--- a/src/graphql/hooks.generated.ts
+++ b/src/graphql/hooks.generated.ts
@@ -2529,6 +2529,18 @@ ${OrderFulfillmentGrantRefundFragmentDoc}
 ${MoneyFragmentDoc}
 ${OrderDetailsGrantedRefundFragmentDoc}
 ${TransactionItemFragmentDoc}`;
+export const ActivitiesFragmentDoc = gql`
+    fragment Activities on OrderEvent {
+  date
+  email
+  message
+  orderNumber
+  type
+  user {
+    email
+  }
+}
+    `;
 export const PageTypeFragmentDoc = gql`
     fragment PageType on PageType {
   id
@@ -11574,42 +11586,6 @@ export function useModelsOfTypeLazyQuery(baseOptions?: ApolloReactHooks.LazyQuer
 export type ModelsOfTypeQueryHookResult = ReturnType<typeof useModelsOfTypeQuery>;
 export type ModelsOfTypeLazyQueryHookResult = ReturnType<typeof useModelsOfTypeLazyQuery>;
 export type ModelsOfTypeQueryResult = Apollo.QueryResult<Types.ModelsOfTypeQuery, Types.ModelsOfTypeQueryVariables>;
-export const SaveOnBoardingStateDocument = gql`
-    mutation SaveOnBoardingState($id: ID!, $input: [MetadataInput!]!) {
-  updateMetadata(id: $id, input: $input) {
-    errors {
-      ...MetadataError
-    }
-  }
-}
-    ${MetadataErrorFragmentDoc}`;
-export type SaveOnBoardingStateMutationFn = Apollo.MutationFunction<Types.SaveOnBoardingStateMutation, Types.SaveOnBoardingStateMutationVariables>;
-
-/**
- * __useSaveOnBoardingStateMutation__
- *
- * To run a mutation, you first call `useSaveOnBoardingStateMutation` within a React component and pass it any options that fit your needs.
- * When your component renders, `useSaveOnBoardingStateMutation` returns a tuple that includes:
- * - A mutate function that you can call at any time to execute the mutation
- * - An object with fields that represent the current status of the mutation's execution
- *
- * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
- *
- * @example
- * const [saveOnBoardingStateMutation, { data, loading, error }] = useSaveOnBoardingStateMutation({
- *   variables: {
- *      id: // value for 'id'
- *      input: // value for 'input'
- *   },
- * });
- */
-export function useSaveOnBoardingStateMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.SaveOnBoardingStateMutation, Types.SaveOnBoardingStateMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return ApolloReactHooks.useMutation<Types.SaveOnBoardingStateMutation, Types.SaveOnBoardingStateMutationVariables>(SaveOnBoardingStateDocument, options);
-      }
-export type SaveOnBoardingStateMutationHookResult = ReturnType<typeof useSaveOnBoardingStateMutation>;
-export type SaveOnBoardingStateMutationResult = Apollo.MutationResult<Types.SaveOnBoardingStateMutation>;
-export type SaveOnBoardingStateMutationOptions = Apollo.BaseMutationOptions<Types.SaveOnBoardingStateMutation, Types.SaveOnBoardingStateMutationVariables>;
 export const OrderCancelDocument = gql`
     mutation OrderCancel($id: ID!) {
   orderCancel(id: $id) {
@@ -21496,4 +21472,156 @@ export function useWarehousesCountLazyQuery(baseOptions?: ApolloReactHooks.LazyQ
         }
 export type WarehousesCountQueryHookResult = ReturnType<typeof useWarehousesCountQuery>;
 export type WarehousesCountLazyQueryHookResult = ReturnType<typeof useWarehousesCountLazyQuery>;
-export type WarehousesCountQueryResult = Apollo.QueryResult<Types.WarehousesCountQuery, Types.WarehousesCountQueryVariables>;
\ No newline at end of file
+export type WarehousesCountQueryResult = Apollo.QueryResult<Types.WarehousesCountQuery, Types.WarehousesCountQueryVariables>;
+export const SaveOnBoardingStateDocument = gql`
+    mutation SaveOnBoardingState($id: ID!, $input: [MetadataInput!]!) {
+  updateMetadata(id: $id, input: $input) {
+    errors {
+      ...MetadataError
+    }
+  }
+}
+    ${MetadataErrorFragmentDoc}`;
+export type SaveOnBoardingStateMutationFn = Apollo.MutationFunction<Types.SaveOnBoardingStateMutation, Types.SaveOnBoardingStateMutationVariables>;
+
+/**
+ * __useSaveOnBoardingStateMutation__
+ *
+ * To run a mutation, you first call `useSaveOnBoardingStateMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useSaveOnBoardingStateMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [saveOnBoardingStateMutation, { data, loading, error }] = useSaveOnBoardingStateMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *      input: // value for 'input'
+ *   },
+ * });
+ */
+export function useSaveOnBoardingStateMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.SaveOnBoardingStateMutation, Types.SaveOnBoardingStateMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useMutation<Types.SaveOnBoardingStateMutation, Types.SaveOnBoardingStateMutationVariables>(SaveOnBoardingStateDocument, options);
+      }
+export type SaveOnBoardingStateMutationHookResult = ReturnType<typeof useSaveOnBoardingStateMutation>;
+export type SaveOnBoardingStateMutationResult = Apollo.MutationResult<Types.SaveOnBoardingStateMutation>;
+export type SaveOnBoardingStateMutationOptions = Apollo.BaseMutationOptions<Types.SaveOnBoardingStateMutation, Types.SaveOnBoardingStateMutationVariables>;
+export const WelcomePageActivitiesDocument = gql`
+    query WelcomePageActivities($hasPermissionToManageOrders: Boolean!) {
+  activities: homepageEvents(last: 10) @include(if: $hasPermissionToManageOrders) {
+    edges {
+      node {
+        ...Activities
+      }
+    }
+  }
+}
+    ${ActivitiesFragmentDoc}`;
+
+/**
+ * __useWelcomePageActivitiesQuery__
+ *
+ * To run a query within a React component, call `useWelcomePageActivitiesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useWelcomePageActivitiesQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useWelcomePageActivitiesQuery({
+ *   variables: {
+ *      hasPermissionToManageOrders: // value for 'hasPermissionToManageOrders'
+ *   },
+ * });
+ */
+export function useWelcomePageActivitiesQuery(baseOptions: ApolloReactHooks.QueryHookOptions<Types.WelcomePageActivitiesQuery, Types.WelcomePageActivitiesQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<Types.WelcomePageActivitiesQuery, Types.WelcomePageActivitiesQueryVariables>(WelcomePageActivitiesDocument, options);
+      }
+export function useWelcomePageActivitiesLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.WelcomePageActivitiesQuery, Types.WelcomePageActivitiesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<Types.WelcomePageActivitiesQuery, Types.WelcomePageActivitiesQueryVariables>(WelcomePageActivitiesDocument, options);
+        }
+export type WelcomePageActivitiesQueryHookResult = ReturnType<typeof useWelcomePageActivitiesQuery>;
+export type WelcomePageActivitiesLazyQueryHookResult = ReturnType<typeof useWelcomePageActivitiesLazyQuery>;
+export type WelcomePageActivitiesQueryResult = Apollo.QueryResult<Types.WelcomePageActivitiesQuery, Types.WelcomePageActivitiesQueryVariables>;
+export const WelcomePageAnalyticsDocument = gql`
+    query WelcomePageAnalytics($channel: String!, $hasPermissionToManageOrders: Boolean!) {
+  salesToday: ordersTotal(period: TODAY, channel: $channel) @include(if: $hasPermissionToManageOrders) {
+    gross {
+      amount
+      currency
+    }
+  }
+}
+    `;
+
+/**
+ * __useWelcomePageAnalyticsQuery__
+ *
+ * To run a query within a React component, call `useWelcomePageAnalyticsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useWelcomePageAnalyticsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useWelcomePageAnalyticsQuery({
+ *   variables: {
+ *      channel: // value for 'channel'
+ *      hasPermissionToManageOrders: // value for 'hasPermissionToManageOrders'
+ *   },
+ * });
+ */
+export function useWelcomePageAnalyticsQuery(baseOptions: ApolloReactHooks.QueryHookOptions<Types.WelcomePageAnalyticsQuery, Types.WelcomePageAnalyticsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<Types.WelcomePageAnalyticsQuery, Types.WelcomePageAnalyticsQueryVariables>(WelcomePageAnalyticsDocument, options);
+      }
+export function useWelcomePageAnalyticsLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.WelcomePageAnalyticsQuery, Types.WelcomePageAnalyticsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<Types.WelcomePageAnalyticsQuery, Types.WelcomePageAnalyticsQueryVariables>(WelcomePageAnalyticsDocument, options);
+        }
+export type WelcomePageAnalyticsQueryHookResult = ReturnType<typeof useWelcomePageAnalyticsQuery>;
+export type WelcomePageAnalyticsLazyQueryHookResult = ReturnType<typeof useWelcomePageAnalyticsLazyQuery>;
+export type WelcomePageAnalyticsQueryResult = Apollo.QueryResult<Types.WelcomePageAnalyticsQuery, Types.WelcomePageAnalyticsQueryVariables>;
+export const WelcomePageNotificationsDocument = gql`
+    query welcomePageNotifications($channel: String!) {
+  productsOutOfStock: products(
+    filter: {stockAvailability: OUT_OF_STOCK}
+    channel: $channel
+  ) {
+    totalCount
+  }
+}
+    `;
+
+/**
+ * __useWelcomePageNotificationsQuery__
+ *
+ * To run a query within a React component, call `useWelcomePageNotificationsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useWelcomePageNotificationsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useWelcomePageNotificationsQuery({
+ *   variables: {
+ *      channel: // value for 'channel'
+ *   },
+ * });
+ */
+export function useWelcomePageNotificationsQuery(baseOptions: ApolloReactHooks.QueryHookOptions<Types.WelcomePageNotificationsQuery, Types.WelcomePageNotificationsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<Types.WelcomePageNotificationsQuery, Types.WelcomePageNotificationsQueryVariables>(WelcomePageNotificationsDocument, options);
+      }
+export function useWelcomePageNotificationsLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.WelcomePageNotificationsQuery, Types.WelcomePageNotificationsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<Types.WelcomePageNotificationsQuery, Types.WelcomePageNotificationsQueryVariables>(WelcomePageNotificationsDocument, options);
+        }
+export type WelcomePageNotificationsQueryHookResult = ReturnType<typeof useWelcomePageNotificationsQuery>;
+export type WelcomePageNotificationsLazyQueryHookResult = ReturnType<typeof useWelcomePageNotificationsLazyQuery>;
+export type WelcomePageNotificationsQueryResult = Apollo.QueryResult<Types.WelcomePageNotificationsQuery, Types.WelcomePageNotificationsQueryVariables>;
\ No newline at end of file
diff --git a/src/graphql/types.generated.ts b/src/graphql/types.generated.ts
index fb4bdbe7678..7e69768812b 100644
--- a/src/graphql/types.generated.ts
+++ b/src/graphql/types.generated.ts
@@ -11697,6 +11697,8 @@ export type OrderFulfillmentGrantRefundFragment = { __typename: 'Fulfillment', i
 
 export type OrderDetailsGrantRefundFragment = { __typename: 'Order', id: string, number: string, lines: Array<{ __typename: 'OrderLine', id: string, productName: string, quantity: number, quantityToFulfill: number, variantName: string, thumbnail: { __typename: 'Image', url: string } | null, unitPrice: { __typename: 'TaxedMoney', gross: { __typename: 'Money', amount: number, currency: string } } }>, fulfillments: Array<{ __typename: 'Fulfillment', id: string, fulfillmentOrder: number, status: FulfillmentStatus, lines: Array<{ __typename: 'FulfillmentLine', id: string, quantity: number, orderLine: { __typename: 'OrderLine', id: string, productName: string, quantity: number, quantityToFulfill: number, variantName: string, thumbnail: { __typename: 'Image', url: string } | null, unitPrice: { __typename: 'TaxedMoney', gross: { __typename: 'Money', amount: number, currency: string } } } | null }> | null }>, shippingPrice: { __typename: 'TaxedMoney', gross: { __typename: 'Money', amount: number, currency: string } }, total: { __typename: 'TaxedMoney', gross: { __typename: 'Money', amount: number, currency: string } }, grantedRefunds: Array<{ __typename: 'OrderGrantedRefund', id: string, reason: string | null, shippingCostsIncluded: boolean, status: OrderGrantedRefundStatusEnum, reasonReference: { __typename: 'Page', id: string, title: string } | null, amount: { __typename: 'Money', amount: number, currency: string }, transaction: { __typename: 'TransactionItem', id: string } | null, lines: Array<{ __typename: 'OrderGrantedRefundLine', id: string, quantity: number, reason: string | null, orderLine: { __typename: 'OrderLine', id: string, isShippingRequired: boolean, productName: string, productSku: string | null, isGift: boolean | null, quantity: number, quantityFulfilled: number, quantityToFulfill: number, unitDiscountValue: any, unitDiscountReason: string | null, unitDiscountType: DiscountValueTypeEnum | null, allocations: Array<{ __typename: 'Allocation', id: string, quantity: number, warehouse: { __typename: 'Warehouse', id: string, name: string } }> | null, variant: { __typename: 'ProductVariant', id: string, name: string, quantityAvailable: number | null, preorder: { __typename: 'PreorderData', endDate: any | null } | null, stocks: Array<{ __typename: 'Stock', id: string, quantity: number, quantityAllocated: number, warehouse: { __typename: 'Warehouse', id: string, name: string } }> | null, product: { __typename: 'Product', id: string, isAvailableForPurchase: boolean | null } } | null, totalPrice: { __typename: 'TaxedMoney', net: { __typename: 'Money', amount: number, currency: string }, gross: { __typename: 'Money', amount: number, currency: string } }, undiscountedTotalPrice: { __typename: 'TaxedMoney', net: { __typename: 'Money', amount: number, currency: string }, gross: { __typename: 'Money', amount: number, currency: string } }, unitDiscount: { __typename: 'Money', amount: number, currency: string }, undiscountedUnitPrice: { __typename: 'TaxedMoney', currency: string, gross: { __typename: 'Money', amount: number, currency: string }, net: { __typename: 'Money', amount: number, currency: string } }, unitPrice: { __typename: 'TaxedMoney', gross: { __typename: 'Money', amount: number, currency: string }, net: { __typename: 'Money', amount: number, currency: string } }, thumbnail: { __typename: 'Image', url: string } | null, discounts: Array<{ __typename: 'OrderLineDiscount', id: string, type: OrderDiscountType, name: string | null, translatedName: string | null, valueType: DiscountValueTypeEnum, value: any, reason: string | null }> | null } }> | null }>, transactions: Array<{ __typename: 'TransactionItem', pspReference: string, externalUrl: string, createdAt: any, id: string, name: string, actions: Array<TransactionActionEnum>, createdBy: { __typename: 'App', name: string | null, brand: { __typename: 'AppBrand', logo: { __typename: 'AppBrandLogo', default: string } } | null } | { __typename: 'User' } | null, paymentMethodDetails: { __typename: 'CardPaymentMethodDetails', name: string, brand: string | null, expMonth: number | null, expYear: number | null, firstDigits: string | null, lastDigits: string | null } | { __typename: 'GiftCardPaymentMethodDetails', name: string, brand: string | null, lastChars: string | null, isSaleorGiftcard: boolean } | { __typename: 'OtherPaymentMethodDetails', name: string } | null, events: Array<{ __typename: 'TransactionEvent', externalUrl: string, id: string, pspReference: string, type: TransactionEventTypeEnum | null, message: string, createdAt: any, createdBy: { __typename: 'App', id: string, name: string | null, brand: { __typename: 'AppBrand', logo: { __typename: 'AppBrandLogo', default: string } } | null } | { __typename: 'User', id: string, email: string, firstName: string, isActive: boolean, lastName: string, avatar: { __typename: 'Image', url: string } | null } | null, amount: { __typename: 'Money', amount: number, currency: string }, reasonReference: { __typename: 'Page', id: string, title: string } | null }>, authorizedAmount: { __typename: 'Money', amount: number, currency: string }, chargedAmount: { __typename: 'Money', amount: number, currency: string }, refundedAmount: { __typename: 'Money', amount: number, currency: string }, canceledAmount: { __typename: 'Money', amount: number, currency: string }, authorizePendingAmount: { __typename: 'Money', amount: number, currency: string }, chargePendingAmount: { __typename: 'Money', amount: number, currency: string }, refundPendingAmount: { __typename: 'Money', amount: number, currency: string }, cancelPendingAmount: { __typename: 'Money', amount: number, currency: string } }> };
 
+export type ActivitiesFragment = { __typename: 'OrderEvent', date: any | null, email: string | null, message: string | null, orderNumber: string | null, type: OrderEventsEnum | null, user: { __typename: 'User', email: string } | null };
+
 export type PageInfoFragment = { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null };
 
 export type PageTypeFragment = { __typename: 'PageType', id: string, name: string, hasPages: boolean | null };
@@ -12157,14 +12159,6 @@ export type ModelsOfTypeQueryVariables = Exact<{
 
 export type ModelsOfTypeQuery = { __typename: 'Query', pages: { __typename: 'PageCountableConnection', edges: Array<{ __typename: 'PageCountableEdge', node: { __typename: 'Page', id: string, title: string } }> } | null };
 
-export type SaveOnBoardingStateMutationVariables = Exact<{
-  id: Scalars['ID'];
-  input: Array<MetadataInput> | MetadataInput;
-}>;
-
-
-export type SaveOnBoardingStateMutation = { __typename: 'Mutation', updateMetadata: { __typename: 'UpdateMetadata', errors: Array<{ __typename: 'MetadataError', code: MetadataErrorCode, field: string | null, message: string | null }> } | null };
-
 export type OrderCancelMutationVariables = Exact<{
   id: Scalars['ID'];
 }>;
@@ -14035,3 +14029,33 @@ export type WarehousesCountQueryVariables = Exact<{ [key: string]: never; }>;
 
 
 export type WarehousesCountQuery = { __typename: 'Query', warehouses: { __typename: 'WarehouseCountableConnection', totalCount: number | null } | null };
+
+export type SaveOnBoardingStateMutationVariables = Exact<{
+  id: Scalars['ID'];
+  input: Array<MetadataInput> | MetadataInput;
+}>;
+
+
+export type SaveOnBoardingStateMutation = { __typename: 'Mutation', updateMetadata: { __typename: 'UpdateMetadata', errors: Array<{ __typename: 'MetadataError', code: MetadataErrorCode, field: string | null, message: string | null }> } | null };
+
+export type WelcomePageActivitiesQueryVariables = Exact<{
+  hasPermissionToManageOrders: Scalars['Boolean'];
+}>;
+
+
+export type WelcomePageActivitiesQuery = { __typename: 'Query', activities: { __typename: 'OrderEventCountableConnection', edges: Array<{ __typename: 'OrderEventCountableEdge', node: { __typename: 'OrderEvent', date: any | null, email: string | null, message: string | null, orderNumber: string | null, type: OrderEventsEnum | null, user: { __typename: 'User', email: string } | null } }> } | null };
+
+export type WelcomePageAnalyticsQueryVariables = Exact<{
+  channel: Scalars['String'];
+  hasPermissionToManageOrders: Scalars['Boolean'];
+}>;
+
+
+export type WelcomePageAnalyticsQuery = { __typename: 'Query', salesToday: { __typename: 'TaxedMoney', gross: { __typename: 'Money', amount: number, currency: string } } | null };
+
+export type WelcomePageNotificationsQueryVariables = Exact<{
+  channel: Scalars['String'];
+}>;
+
+
+export type WelcomePageNotificationsQuery = { __typename: 'Query', productsOutOfStock: { __typename: 'ProductCountableConnection', totalCount: number | null } | null };
diff --git a/src/index.tsx b/src/index.tsx
index 483f7edcbcf..8038a65727f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -28,7 +28,7 @@ import SectionRoute from "./auth/components/SectionRoute";
 import { useAuthRedirection } from "./auth/hooks/useAuthRedirection";
 import { channelsSection } from "./channels/urls";
 import AppLayout from "./components/AppLayout";
-import { AppChannelProvider } from "./components/AppLayout/AppChannelContext";
+import useAppChannel, { AppChannelProvider } from "./components/AppLayout/AppChannelContext";
 import { DevModeProvider } from "./components/DevModePanel/DevModeProvider";
 import ErrorPage from "./components/ErrorPage";
 import ExitFormDialogProvider from "./components/Form/ExitFormDialogProvider";
@@ -50,10 +50,10 @@ import { apolloClient, saleorClient } from "./graphql/client";
 import { useLocationState } from "./hooks/useLocationState";
 import { commonMessages } from "./intl";
 import { NotFound } from "./NotFound";
-import { OnboardingProvider } from "./onboarding/OnboardingContext";
 import { errorTracker } from "./services/errorTracking";
 import { paletteOverrides, themeOverrides } from "./themeOverrides";
 import { warehouseSection } from "./warehouses/urls";
+import { OnboardingProvider } from "./welcomePage/WelcomePageOnboarding/onboardingContext";
 
 // Lazy-loaded page sections for code splitting
 const AttributeSection = lazy(() => import("./attributes"));
@@ -84,6 +84,7 @@ const TaxesSection = lazy(() => import("./taxes"));
 const TranslationsSection = lazy(() => import("./translations"));
 const WarehouseSection = lazy(() => import("./warehouses"));
 const ConfigurationSection = lazy(() => import("./configuration"));
+const WelcomePage = lazy(() => import("./welcomePage").then(m => ({ default: m.WelcomePage })));
 const HomePage = lazy(() => import("./home/HomePage").then(m => ({ default: m.HomePage })));
 const RefundsSettingsRoute = lazy(() =>
   import("./refundsSettings/route").then(m => ({ default: m.RefundsSettingsRoute })),
@@ -159,8 +160,10 @@ const Routes = () => {
   const intl = useIntl();
   const [, dispatchAppState] = useAppState();
   const { authenticated, authenticating } = useAuthRedirection();
-  const homePageLoaded = authenticated;
-  const homePageLoading = authenticating;
+  const { channel } = useAppChannel(false);
+  const channelLoaded = typeof channel !== "undefined";
+  const homePageLoaded = channelLoaded && authenticated;
+  const homePageLoading = (authenticated && !channelLoaded) || authenticating;
   const { isAppPath } = useLocationState();
 
   return (
@@ -188,7 +191,7 @@ const Routes = () => {
               <Suspense fallback={<LoginLoading />}>
                 <Switch>
                   {legacyRedirects}
-                  <SectionRoute exact path="/" component={HomePage} />
+                  <SectionRoute exact path="/" component={WelcomePage} />
                   <SectionRoute exact path="/home/widget/:extensionId" component={HomePage} />
                   <SectionRoute exact path="/home/widgets" component={HomePage} />
                   <SectionRoute
diff --git a/src/onboarding/OnboardingContext.tsx b/src/onboarding/OnboardingContext.tsx
deleted file mode 100644
index bf3625c3a90..00000000000
--- a/src/onboarding/OnboardingContext.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { createContext, type ReactNode, useContext, useMemo } from "react";
-
-import { type OnboardingContextType, type OnboardingStepsIDs } from "./types";
-import { useOnboardingStorage } from "./useOnboardingStorage";
-
-const OnboardingContext = createContext<OnboardingContextType | null>(null);
-
-interface OnboardingProviderProps {
-  children: ReactNode;
-}
-
-export const OnboardingProvider = ({ children }: OnboardingProviderProps) => {
-  const { markStepCompleted } = useOnboardingStorage();
-
-  const value = useMemo<OnboardingContextType>(
-    () => ({
-      markOnboardingStepAsCompleted: (id: OnboardingStepsIDs) => {
-        void markStepCompleted(id);
-      },
-    }),
-    [markStepCompleted],
-  );
-
-  return <OnboardingContext.Provider value={value}>{children}</OnboardingContext.Provider>;
-};
-
-export const useOnboarding = () => {
-  const context = useContext(OnboardingContext);
-
-  if (context === null) {
-    throw new Error("useOnboarding must be used within a OnboardingProvider");
-  }
-
-  return context;
-};
diff --git a/src/onboarding/types.ts b/src/onboarding/types.ts
deleted file mode 100644
index c5c4e20b4c9..00000000000
--- a/src/onboarding/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export type OnboardingStepsIDs =
-  | "get-started"
-  | "create-product"
-  | "explore-orders"
-  | "graphql-playground"
-  | "view-extensions"
-  | "invite-staff";
-
-export interface OnboardingMetadataState {
-  stepsCompleted: OnboardingStepsIDs[];
-}
-
-export interface OnboardingContextType {
-  markOnboardingStepAsCompleted: (id: OnboardingStepsIDs) => void;
-}
diff --git a/src/onboarding/useOnboardingStorage.ts b/src/onboarding/useOnboardingStorage.ts
deleted file mode 100644
index 2836c3b1cb5..00000000000
--- a/src/onboarding/useOnboardingStorage.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useUser } from "@dashboard/auth/useUser";
-import { useSaveOnBoardingStateMutation } from "@dashboard/graphql";
-import { useCallback } from "react";
-
-import { type OnboardingStepsIDs } from "./types";
-import { appendCompletedStepToMetadata } from "./utils";
-
-export const useOnboardingStorage = () => {
-  const { user } = useUser();
-  const [saveOnboarding] = useSaveOnBoardingStateMutation();
-
-  const markStepCompleted = useCallback(
-    async (stepId: OnboardingStepsIDs) => {
-      if (!user) {
-        return;
-      }
-
-      const { input, changed } = appendCompletedStepToMetadata(user.metadata, stepId);
-
-      if (!changed) {
-        return;
-      }
-
-      try {
-        await saveOnboarding({
-          variables: {
-            id: user.id,
-            input,
-          },
-        });
-      } catch (error) {
-        console.warn("Could not save onboarding state to metadata", { error });
-      }
-    },
-    [saveOnboarding, user],
-  );
-
-  return { markStepCompleted };
-};
diff --git a/src/onboarding/utils.ts b/src/onboarding/utils.ts
deleted file mode 100644
index 299ada2f96e..00000000000
--- a/src/onboarding/utils.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { type MetadataInput } from "@dashboard/graphql";
-
-import { type OnboardingMetadataState, type OnboardingStepsIDs } from "./types";
-
-export const METADATA_KEY = "onboarding";
-
-const cloneMetadata = (data: MetadataInput): MetadataInput => ({
-  key: data.key,
-  value: data.value,
-});
-
-const parseExistingState = (metadata: MetadataInput[] | undefined): OnboardingMetadataState => {
-  const entry = metadata?.find(m => m.key === METADATA_KEY);
-
-  if (!entry) {
-    return { stepsCompleted: [] };
-  }
-
-  try {
-    const parsed = JSON.parse(entry.value);
-
-    return {
-      stepsCompleted: Array.isArray(parsed?.stepsCompleted) ? parsed.stepsCompleted : [],
-    };
-  } catch {
-    return { stepsCompleted: [] };
-  }
-};
-
-export const appendCompletedStepToMetadata = (
-  metadata: MetadataInput[] | undefined,
-  stepId: OnboardingStepsIDs,
-): { input: MetadataInput[]; changed: boolean } => {
-  const existing = parseExistingState(metadata);
-
-  if (existing.stepsCompleted.includes(stepId)) {
-    return { input: metadata?.map(cloneMetadata) ?? [], changed: false };
-  }
-
-  const newState: OnboardingMetadataState = {
-    ...existing,
-    stepsCompleted: [...existing.stepsCompleted, stepId],
-  };
-  const newValue = JSON.stringify(newState);
-  const userMetadata: MetadataInput[] = metadata?.map(cloneMetadata) ?? [];
-  const index = userMetadata.findIndex(m => m.key === METADATA_KEY);
-
-  if (index !== -1) {
-    userMetadata[index] = { key: METADATA_KEY, value: newValue };
-  } else {
-    userMetadata.push({ key: METADATA_KEY, value: newValue });
-  }
-
-  return { input: userMetadata, changed: true };
-};
diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx
index 65afeb3b904..9e851ee4c6e 100644
--- a/src/orders/views/OrderList/OrderList.tsx
+++ b/src/orders/views/OrderList/OrderList.tsx
@@ -18,12 +18,12 @@ import usePaginator, {
   createPaginationState,
   PaginatorContext,
 } from "@dashboard/hooks/usePaginator";
-import { useOnboarding } from "@dashboard/onboarding/OnboardingContext";
 import { ListViews } from "@dashboard/types";
 import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
 import createSortHandler from "@dashboard/utils/handlers/sortHandler";
 import { mapEdgesToItems, mapNodeToChoice } from "@dashboard/utils/maps";
 import { getSortParams } from "@dashboard/utils/sort";
+import { useOnboarding } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
 import { useEffect, useMemo } from "react";
 import { useIntl } from "react-intl";
 
diff --git a/src/products/views/ProductCreate/ProductCreate.tsx b/src/products/views/ProductCreate/ProductCreate.tsx
index 58eba2da70a..12ef8d6538f 100644
--- a/src/products/views/ProductCreate/ProductCreate.tsx
+++ b/src/products/views/ProductCreate/ProductCreate.tsx
@@ -24,7 +24,6 @@ import useNavigator from "@dashboard/hooks/useNavigator";
 import { useNotifier } from "@dashboard/hooks/useNotifier";
 import useShop from "@dashboard/hooks/useShop";
 import { getMutationErrors } from "@dashboard/misc";
-import { useOnboarding } from "@dashboard/onboarding/OnboardingContext";
 import ProductCreatePage, {
   type ProductCreateData,
 } from "@dashboard/products/components/ProductCreatePage";
@@ -49,6 +48,7 @@ import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHa
 import createMetadataCreateHandler from "@dashboard/utils/handlers/metadataCreateHandler";
 import { mapEdgesToItems } from "@dashboard/utils/maps";
 import { warehouseAddPath } from "@dashboard/warehouses/urls";
+import { useOnboarding } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
 import { useEffect, useState } from "react";
 import { useIntl } from "react-intl";
 
diff --git a/src/staff/views/StaffList/StaffList.tsx b/src/staff/views/StaffList/StaffList.tsx
index 356550cc96a..3be462877a3 100644
--- a/src/staff/views/StaffList/StaffList.tsx
+++ b/src/staff/views/StaffList/StaffList.tsx
@@ -15,7 +15,6 @@ import usePaginator, {
   createPaginationState,
   PaginatorContext,
 } from "@dashboard/hooks/usePaginator";
-import { useOnboarding } from "@dashboard/onboarding/OnboardingContext";
 import usePermissionGroupSearch from "@dashboard/searches/usePermissionGroupSearch";
 import { ListViews } from "@dashboard/types";
 import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
@@ -24,6 +23,7 @@ import createSortHandler from "@dashboard/utils/handlers/sortHandler";
 import { mapEdgesToItems } from "@dashboard/utils/maps";
 import { getSortParams } from "@dashboard/utils/sort";
 import { getAppMountUriForRedirect } from "@dashboard/utils/urls";
+import { useOnboarding } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
 import { useMemo } from "react";
 import { useIntl } from "react-intl";
 import urlJoin from "url-join";
diff --git a/src/welcomePage/WelcomePage.tsx b/src/welcomePage/WelcomePage.tsx
new file mode 100644
index 00000000000..0c1b0c0e68c
--- /dev/null
+++ b/src/welcomePage/WelcomePage.tsx
@@ -0,0 +1,58 @@
+import { useUser } from "@dashboard/auth/useUser";
+import useAppChannel from "@dashboard/components/AppLayout/AppChannelContext";
+import { hasPermissions } from "@dashboard/components/RequirePermissions";
+import { PermissionEnum } from "@dashboard/graphql";
+import { Box } from "@saleor/macaw-ui-next";
+
+import { WelcomePageOnboarding } from "./WelcomePageOnboarding";
+import { WelcomePageSidebar } from "./WelcomePageSidebar";
+import { WelcomePageTilesContainer } from "./WelcomePageTilesContainer";
+import { WelcomePageTitle } from "./WelcomePageTitle";
+
+export const WelcomePage = () => {
+  const { channel, setChannel } = useAppChannel(false);
+  const { user } = useUser();
+  const channels = user?.accessibleChannels ?? [];
+  const userPermissions = user?.userPermissions || [];
+  const hasPermissionToManageOrders = hasPermissions(userPermissions, [
+    PermissionEnum.MANAGE_ORDERS,
+  ]);
+
+  return (
+    <Box
+      display="grid"
+      gap={7}
+      gridTemplateColumns={{
+        mobile: 1,
+        tablet: 1,
+        desktop: 3,
+      }}
+      paddingX={8}
+      paddingY={6}
+      paddingTop={9}
+      __gridTemplateRows="auto 1fr"
+    >
+      <Box gridRowStart="1" __gridColumn="1/-1">
+        <WelcomePageTitle />
+      </Box>
+      <Box
+        gridColumn={{
+          mobile: "1",
+          tablet: "1",
+          desktop: "2",
+        }}
+      >
+        <WelcomePageOnboarding />
+        <WelcomePageTilesContainer />
+      </Box>
+      <Box gridColumn="1">
+        <WelcomePageSidebar
+          channel={channel}
+          setChannel={setChannel}
+          channels={channels}
+          hasPermissionToManageOrders={hasPermissionToManageOrders}
+        />
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.test.tsx b/src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.test.tsx
new file mode 100644
index 00000000000..3102ef6be38
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.test.tsx
@@ -0,0 +1,297 @@
+import { useUser } from "@dashboard/auth/useUser";
+import { useFlag } from "@dashboard/featureFlags";
+import { ApolloMockedProvider } from "@test/ApolloMockedProvider";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import type * as React from "react";
+
+import { onboardingCompletedMock, onboardingInitState } from "./mocks";
+import { OnboardingProvider } from "./onboardingContext";
+import { useOnboardingStorage } from "./onboardingContext/useOnboardingStorage";
+import { WelcomePageOnboarding } from "./WelcomePageOnboarding";
+
+jest.mock("@dashboard/components/Router/useRouteChange", () => ({
+  useRouteChange: () => ({
+    register: jest.fn(),
+  }),
+}));
+jest.mock("@dashboard/auth/useUser");
+jest.mock("@dashboard/featureFlags", () => ({
+  useFlag: jest.fn().mockReturnValue({
+    enabled: false,
+  }),
+}));
+
+jest.mock("./onboardingContext/useOnboardingStorage");
+jest.useFakeTimers();
+jest.mock("@dashboard/components/DevModePanel/hooks", () => ({
+  useDevModeContext: jest.fn(),
+}));
+jest.mock("react-router-dom", () => ({
+  Link: jest.fn(({ to, ...props }) => <a href={to} {...props} />),
+}));
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <ApolloMockedProvider>
+    <OnboardingProvider>{children}</OnboardingProvider>
+  </ApolloMockedProvider>
+);
+
+const OLD_ACCOUNT_DATE = "2022-12-31";
+const NEW_ACCOUNT_DATE = "2024-12-31";
+const onboardingCompleteMessage = "Onboarding completed 🎉";
+const allMarkAsDoneStepsIds = [
+  "create-product",
+  "explore-orders",
+  "graphql-playground",
+  "view-extensions",
+  "invite-staff",
+];
+
+describe("WelcomePageOnboarding", () => {
+  it("should show collapsed accordion with 'Onboarding completed' when user's account is older than set date", () => {
+    // Arrange
+    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: OLD_ACCOUNT_DATE } });
+    (useOnboardingStorage as jest.Mock).mockReturnValue({
+      getOnboardingState: jest.fn(() => onboardingInitState),
+      saveOnboardingState: jest.fn(),
+    });
+
+    // Act
+    render(
+      <Wrapper>
+        <WelcomePageOnboarding />
+      </Wrapper>,
+    );
+
+    // Assert
+    expect(screen.getByText(onboardingCompleteMessage)).toBeInTheDocument();
+    expect(screen.getByTestId("onboarding-accordion-item")).toHaveAttribute("data-state", "closed");
+  });
+
+  it("should save onboarding expanded state to storage service", async () => {
+    // Arrange
+    const saveOnboardingState = jest.fn();
+
+    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: NEW_ACCOUNT_DATE } });
+    (useOnboardingStorage as jest.Mock).mockReturnValue({
+      getOnboardingState: jest.fn(() => onboardingInitState),
+      saveOnboardingState,
+    });
+
+    // Act
+    render(
+      <Wrapper>
+        <WelcomePageOnboarding />
+      </Wrapper>,
+    );
+
+    act(() => {
+      screen.getByTestId("onboarding-accordion-trigger").click();
+    });
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    // Assert
+    expect(saveOnboardingState).toHaveBeenNthCalledWith(3, {
+      onboardingExpanded: false,
+      stepsCompleted: [],
+      stepsExpanded: {},
+    });
+    expect(screen.getByTestId("onboarding-accordion-item")).toHaveAttribute("data-state", "closed");
+  });
+
+  it("should show 'Onboarding completed' when 'Mark all as done' is clicked", () => {
+    // Arrange
+    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: NEW_ACCOUNT_DATE } });
+    (useOnboardingStorage as jest.Mock).mockReturnValue({
+      getOnboardingState: jest.fn(() => onboardingInitState),
+      saveOnboardingState: jest.fn(),
+    });
+
+    // Act
+    render(
+      <Wrapper>
+        <WelcomePageOnboarding />
+      </Wrapper>,
+    );
+
+    act(() => {
+      screen.getByTestId("mark-as-done").click();
+    });
+
+    // Assert
+    expect(screen.getByText(onboardingCompleteMessage)).toBeInTheDocument();
+    expect(screen.getByTestId("onboarding-accordion-item")).toHaveAttribute("data-state", "open");
+    expect(screen.queryByText("Mark all as done")).toBeNull();
+  });
+
+  it("should show 'Onboarding completed' after marking each steps as done", () => {
+    // Arrange
+    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: NEW_ACCOUNT_DATE } });
+    (useOnboardingStorage as jest.Mock).mockReturnValue({
+      getOnboardingState: jest.fn(() => onboardingInitState),
+      saveOnboardingState: jest.fn(),
+    });
+
+    // Act
+    render(
+      <Wrapper>
+        <WelcomePageOnboarding />
+      </Wrapper>,
+    );
+
+    // 'get-started' has only 'Next step' button
+    const getStartedNextStepBtn = screen.getByTestId("get-started-next-step-btn");
+
+    act(() => {
+      getStartedNextStepBtn.click();
+    });
+
+    for (const stepId of allMarkAsDoneStepsIds) {
+      const markAsDone = screen.getByTestId(stepId + "-mark-as-done");
+
+      act(() => {
+        markAsDone.click();
+      });
+    }
+
+    // Assert
+    expect(screen.getByText(onboardingCompleteMessage)).toBeInTheDocument();
+  });
+
+  it("should show 'Onboarding completed' when all steps were completed", () => {
+    // Arrange
+    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: NEW_ACCOUNT_DATE } });
+    (useOnboardingStorage as jest.Mock).mockReturnValue({
+      getOnboardingState: jest.fn(() => onboardingCompletedMock),
+      saveOnboardingState: jest.fn(),
+    });
+
+    // Act
+    render(
+      <Wrapper>
+        <WelcomePageOnboarding />
+      </Wrapper>,
+    );
+
+    // Assert
+    expect(screen.getByText(onboardingCompleteMessage)).toBeInTheDocument();
+  });
+
+  it("clicking 'Next step' should save the status to storage service", async () => {
+    // Arrange
+    const saveOnboardingState = jest.fn();
+
+    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: NEW_ACCOUNT_DATE } });
+    (useOnboardingStorage as jest.Mock).mockReturnValue({
+      getOnboardingState: jest.fn(() => onboardingInitState),
+      saveOnboardingState,
+    });
+
+    // Act
+    render(
+      <Wrapper>
+        <WelcomePageOnboarding />
+      </Wrapper>,
+    );
+
+    act(() => {
+      screen.getByTestId("get-started-next-step-btn").click();
+    });
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    // Assert
+    expect(saveOnboardingState).toBeCalledWith({
+      onboardingExpanded: true,
+      stepsCompleted: ["get-started"],
+      stepsExpanded: {},
+    });
+  });
+
+  it("clicking any 'Mark as done' should save the status to storage service with 'get-started' step", async () => {
+    // Arrange
+    const saveOnboardingState = jest.fn();
+
+    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: NEW_ACCOUNT_DATE } });
+    (useOnboardingStorage as jest.Mock).mockReturnValue({
+      getOnboardingState: jest.fn(() => onboardingInitState),
+      saveOnboardingState,
+    });
+
+    // Act
+    render(
+      <Wrapper>
+        <WelcomePageOnboarding />
+      </Wrapper>,
+    );
+
+    // Any step:
+    const graphqlPlaygroundId = "graphql-playground";
+    const exploreGraphql = screen.getByTestId("accordion-step-trigger-" + graphqlPlaygroundId);
+
+    act(() => {
+      exploreGraphql.click();
+    });
+
+    const markAsDone = screen.getByTestId(graphqlPlaygroundId + "-mark-as-done");
+
+    act(() => {
+      markAsDone.click();
+    });
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    // Assert
+    await waitFor(() => {
+      expect(saveOnboardingState).toHaveBeenCalledWith({
+        onboardingExpanded: true,
+        stepsCompleted: ["get-started", graphqlPlaygroundId],
+        stepsExpanded: {},
+      });
+    });
+  });
+
+  it("should show 'Discover extension capabilities' step when extensions flag is enabled", () => {
+    // Arrange
+    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: NEW_ACCOUNT_DATE } });
+    (useOnboardingStorage as jest.Mock).mockReturnValue({
+      getOnboardingState: jest.fn(() => onboardingInitState),
+      saveOnboardingState: jest.fn(),
+    });
+    // Override useFlag mock for this specific test
+    (useFlag as jest.Mock).mockImplementation((flag: string) => ({
+      enabled: flag === "extensions",
+    }));
+
+    // Act
+    render(
+      <Wrapper>
+        <WelcomePageOnboarding />
+      </Wrapper>,
+    );
+
+    // Click through the first step to reveal others
+    act(() => {
+      screen.getByTestId("get-started-next-step-btn").click();
+    });
+
+    // Open the relevant step accordion
+    act(() => {
+      screen.getByTestId("accordion-step-trigger-view-extensions").click();
+    });
+
+    // Assert
+    // Check for 'view-extensions' step
+    expect(screen.getByText("Discover extension capabilities")).toBeInTheDocument();
+    expect(screen.getByTestId("view-extensions-mark-as-done")).toBeInTheDocument();
+
+    // Check that 'view-webhooks' step is NOT present
+    expect(screen.queryByText("View webhooks functionalities")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("view-webhooks-mark-as-done")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.tsx b/src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.tsx
new file mode 100644
index 00000000000..0698ce08d4c
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.tsx
@@ -0,0 +1,128 @@
+import { DashboardCard } from "@dashboard/components/Card";
+import { iconSize, iconStrokeWidth } from "@dashboard/components/icons";
+import { Accordion, Box, Button, Text } from "@saleor/macaw-ui-next";
+import { ChevronDown } from "lucide-react";
+import { FormattedMessage } from "react-intl";
+
+import { WelcomePageOnboardingAccordion } from "./components/WelcomePageOnboardingAccordion";
+import { useOnboarding } from "./onboardingContext/OnboardingContext";
+
+type TitleProps = {
+  isOnboardingCompleted: boolean;
+  status: {
+    done: number;
+    total: number;
+  };
+};
+
+export const WelcomePageOnboarding = () => {
+  const {
+    markAllAsCompleted,
+    isOnboardingCompleted,
+    toggleOnboarding,
+    onboardingState,
+    validCompletedStepsCount,
+    visibleSteps,
+  } = useOnboarding();
+
+  const isOnboardingExpanded = onboardingState.onboardingExpanded;
+  const status = {
+    done: validCompletedStepsCount,
+    total: visibleSteps.length,
+  };
+
+  const handleMarkAllAsCompleted = () => {
+    markAllAsCompleted();
+  };
+
+  return (
+    <DashboardCard borderRadius={3} borderColor="default1" borderWidth={1} borderStyle="solid">
+      <Accordion
+        value={isOnboardingExpanded ? "onboarding" : ""}
+        onValueChange={(value: string) => {
+          toggleOnboarding(value === "onboarding");
+        }}
+      >
+        <Accordion.Item value="onboarding" data-test-id="onboarding-accordion-item">
+          <DashboardCard.Header padding={6}>
+            <Box
+              display="flex"
+              flexWrap="wrap"
+              justifyContent="space-between"
+              gap={3}
+              width="100%"
+              marginRight={4}
+            >
+              <Title isOnboardingCompleted={isOnboardingCompleted} status={status} />
+
+              {!isOnboardingCompleted && (
+                <Button
+                  variant="secondary"
+                  onClick={handleMarkAllAsCompleted}
+                  data-test-id="mark-as-done"
+                >
+                  <FormattedMessage
+                    defaultMessage="Mark all as done"
+                    id="ipbT0Q"
+                    description="btn label"
+                  />
+                </Button>
+              )}
+            </Box>
+            <Accordion.Trigger>
+              <Button
+                display="flex"
+                alignItems="center"
+                transition="ease"
+                __transform={`${isOnboardingExpanded ? "rotate(180deg)" : "none"}`}
+                backgroundColor={{
+                  hover: "transparent",
+                  active: "transparent",
+                }}
+                variant="tertiary"
+                size="small"
+                data-test-id="onboarding-accordion-trigger"
+              >
+                <ChevronDown size={iconSize.medium} strokeWidth={iconStrokeWidth} />
+              </Button>
+            </Accordion.Trigger>
+          </DashboardCard.Header>
+
+          <Accordion.Content>
+            <DashboardCard.Content padding={6} paddingTop={0}>
+              <WelcomePageOnboardingAccordion />
+            </DashboardCard.Content>
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+    </DashboardCard>
+  );
+};
+
+const Title = ({ isOnboardingCompleted, status }: TitleProps) => {
+  if (isOnboardingCompleted) {
+    return (
+      <Text size={7}>
+        <FormattedMessage
+          defaultMessage="Onboarding completed 🎉"
+          id="loEfAh"
+          description="onboarding completed message"
+        />
+      </Text>
+    );
+  }
+
+  return (
+    <Text size={7}>
+      <FormattedMessage
+        defaultMessage="Let’s Get Started ({count}/{total})"
+        id="iIPThY"
+        description="onboarding title"
+        values={{
+          count: status.done,
+          total: status.total,
+        }}
+      />
+    </Text>
+  );
+};
diff --git a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageCheckGraphQLButton.tsx b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageCheckGraphQLButton.tsx
new file mode 100644
index 00000000000..fd01154daec
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageCheckGraphQLButton.tsx
@@ -0,0 +1,25 @@
+import { useDevModeContext } from "@dashboard/components/DevModePanel/hooks";
+import { Button } from "@saleor/macaw-ui-next";
+import { FormattedMessage } from "react-intl";
+
+import { type PrimaryActionProps } from "./type";
+
+export const WelcomePageCheckGraphQLButton = ({ onClick }: PrimaryActionProps) => {
+  const context = useDevModeContext();
+
+  return (
+    <Button
+      variant="primary"
+      onClick={() => {
+        onClick();
+        context.setDevModeVisibility(true);
+      }}
+    >
+      <FormattedMessage
+        defaultMessage="Go to GraphQL Playground"
+        id="2xkzcr"
+        description="btn label"
+      />
+    </Button>
+  );
+};
diff --git a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageCreateProductButton.tsx b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageCreateProductButton.tsx
new file mode 100644
index 00000000000..c920ecda49b
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageCreateProductButton.tsx
@@ -0,0 +1,49 @@
+import { useUser } from "@dashboard/auth/useUser";
+import { hasPermissions } from "@dashboard/components/RequirePermissions";
+import { PermissionEnum } from "@dashboard/graphql";
+import { productListUrl } from "@dashboard/products/urls";
+import { Button, Tooltip } from "@saleor/macaw-ui-next";
+import { FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
+
+import { type PrimaryActionProps } from "./type";
+import { WelcomePageFakeDisabledButton } from "./WelcomePageFakeDisabledButton";
+
+export const WelcomePageCreateProductButton = ({ onClick }: PrimaryActionProps) => {
+  const { user } = useUser();
+  const userPermissions = user?.userPermissions || [];
+  const hasPermissionToManageProducts = hasPermissions(userPermissions, [
+    PermissionEnum.MANAGE_PRODUCTS,
+  ]);
+
+  if (!hasPermissionToManageProducts) {
+    return (
+      <Tooltip>
+        <Tooltip.Trigger>
+          <WelcomePageFakeDisabledButton>
+            <FormattedMessage
+              defaultMessage="Go to all products"
+              id="XZpRr8"
+              description="btn label"
+            />
+          </WelcomePageFakeDisabledButton>
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          <Tooltip.Arrow />
+          <FormattedMessage
+            defaultMessage="You don't have permission to manage products"
+            id="KHI/qv"
+          />
+        </Tooltip.Content>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Link to={productListUrl()} onClick={onClick}>
+      <Button variant="primary">
+        <FormattedMessage defaultMessage="Go to all products" id="XZpRr8" description="btn label" />
+      </Button>
+    </Link>
+  );
+};
diff --git a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageFakeDisabledButton.tsx b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageFakeDisabledButton.tsx
new file mode 100644
index 00000000000..0996741de40
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageFakeDisabledButton.tsx
@@ -0,0 +1,33 @@
+import { Button, type ButtonProps, vars } from "@saleor/macaw-ui-next";
+import { forwardRef, useState } from "react";
+
+export const WelcomePageFakeDisabledButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, ...props }, ref) => {
+    const [isHovered, setIsHovered] = useState(false);
+
+    return (
+      <Button
+        ref={ref}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        cursor="not-allowed"
+        variant="primary"
+        boxShadow="none"
+        aria-disabled
+        tabIndex={-1}
+        // I cannot override the background color of the button due to that existing styles were applied as last
+        style={{
+          backgroundColor: isHovered
+            ? vars.colors.background.buttonDefaultPrimaryHovered
+            : vars.colors.background.buttonDefaultDisabled,
+          color: vars.colors.text.defaultDisabled,
+        }}
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  },
+);
+
+WelcomePageFakeDisabledButton.displayName = "WelcomePageFakeDisabledButton";
diff --git a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageInviteStaffButton.tsx b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageInviteStaffButton.tsx
new file mode 100644
index 00000000000..02b6183329f
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageInviteStaffButton.tsx
@@ -0,0 +1,44 @@
+import { useUser } from "@dashboard/auth/useUser";
+import { hasPermissions } from "@dashboard/components/RequirePermissions";
+import { PermissionEnum } from "@dashboard/graphql";
+import { staffListUrl } from "@dashboard/staff/urls";
+import { Button, Tooltip } from "@saleor/macaw-ui-next";
+import { FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
+
+import { type PrimaryActionProps } from "./type";
+import { WelcomePageFakeDisabledButton } from "./WelcomePageFakeDisabledButton";
+
+export const WelcomePageInviteStaffButton = ({ onClick }: PrimaryActionProps) => {
+  const { user } = useUser();
+  const userPermissions = user?.userPermissions || [];
+  const hasPermissionToManageStaff = hasPermissions(userPermissions, [PermissionEnum.MANAGE_STAFF]);
+
+  if (!hasPermissionToManageStaff) {
+    return (
+      <Tooltip>
+        <Tooltip.Trigger>
+          <WelcomePageFakeDisabledButton variant="primary">
+            <FormattedMessage defaultMessage="Invite members" id="BBt3jD" description="btn label" />
+          </WelcomePageFakeDisabledButton>
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          <Tooltip.Arrow />
+          <FormattedMessage
+            defaultMessage="You don't have permission to manage staff"
+            id="gt05TH"
+            description="tooltip message"
+          />
+        </Tooltip.Content>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Link to={staffListUrl({ action: "add" })} onClick={onClick}>
+      <Button variant="primary">
+        <FormattedMessage defaultMessage="Invite members" id="BBt3jD" description="btn label" />
+      </Button>
+    </Link>
+  );
+};
diff --git a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageOnboardingAccordion.tsx b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageOnboardingAccordion.tsx
new file mode 100644
index 00000000000..f84ef16bbcd
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageOnboardingAccordion.tsx
@@ -0,0 +1,97 @@
+import completedIcon from "@assets/images/completed.svg";
+import uncompletedIcon from "@assets/images/uncompleted.svg";
+import { iconSize, iconStrokeWidth } from "@dashboard/components/icons";
+import { Accordion, Box, Skeleton, Text } from "@saleor/macaw-ui-next";
+import { ChevronDown } from "lucide-react";
+import SVG from "react-inlinesvg";
+
+import { useOnboardingData } from "../hooks/useOnboardingData";
+import { useOnboarding } from "../onboardingContext/OnboardingContext";
+
+export const WelcomePageOnboardingAccordion = () => {
+  const { toggleExpandedOnboardingStep, extendedStepId, loading } = useOnboarding();
+
+  const { steps } = useOnboardingData();
+
+  if (loading) {
+    return (
+      <Box display="grid" gap={3}>
+        <Skeleton __width="100%" height={6} />
+        <Skeleton __width="50%" height={6} />
+        <Skeleton __width="75%" height={6} />
+      </Box>
+    );
+  }
+
+  return (
+    <Accordion
+      display="grid"
+      gap={3}
+      value={extendedStepId}
+      onValueChange={(value: string) => {
+        toggleExpandedOnboardingStep(value, extendedStepId);
+      }}
+    >
+      {steps.map(step => (
+        <Accordion.Item
+          key={step.id}
+          value={step.id}
+          backgroundColor="default1"
+          padding={6}
+          borderWidth={1}
+          borderColor="default1"
+          borderStyle="solid"
+          borderRadius={3}
+          width="100%"
+          boxShadow={extendedStepId === step.id ? "defaultFocused" : "none"}
+        >
+          <Accordion.Trigger alignItems="center" data-test-id={`accordion-step-trigger-${step.id}`}>
+            <Box width="100%" display="flex" alignItems="center" justifyContent="space-between">
+              <Box display="flex" alignItems="center" gap={3.5}>
+                <StepIcon isComplete={step.isCompleted} />
+                <Text size={5} fontWeight="bold">
+                  {step.title}
+                </Text>
+              </Box>
+
+              <Box
+                display="flex"
+                alignItems="center"
+                transition="ease"
+                __transform={`${extendedStepId === step.id ? "rotate(180deg)" : "none"}`}
+              >
+                <ChevronDown size={iconSize.medium} strokeWidth={iconStrokeWidth} />
+              </Box>
+            </Box>
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <Box marginTop={3} marginLeft={9}>
+              <Text>{step.description}</Text>
+              {step.actions && (
+                <Box display="flex" gap={4} marginTop={6} marginBottom={2} flexWrap="wrap">
+                  {step.actions}
+                </Box>
+              )}
+            </Box>
+          </Accordion.Content>
+        </Accordion.Item>
+      ))}
+    </Accordion>
+  );
+};
+
+function StepIcon({ isComplete }: { isComplete: boolean }) {
+  if (isComplete) {
+    return (
+      <Box color="accent1">
+        <SVG src={completedIcon} width={18} height={18} style={{ verticalAlign: "middle" }} />
+      </Box>
+    );
+  }
+
+  return (
+    <Box color="default1">
+      <SVG src={uncompletedIcon} width={18} height={18} style={{ verticalAlign: "middle" }} />
+    </Box>
+  );
+}
diff --git a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageOrdersButton.tsx b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageOrdersButton.tsx
new file mode 100644
index 00000000000..bef83f142a2
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageOrdersButton.tsx
@@ -0,0 +1,45 @@
+import { useUser } from "@dashboard/auth/useUser";
+import { hasPermissions } from "@dashboard/components/RequirePermissions";
+import { PermissionEnum } from "@dashboard/graphql";
+import { orderListUrl } from "@dashboard/orders/urls";
+import { Button, Tooltip } from "@saleor/macaw-ui-next";
+import { FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
+
+import { type PrimaryActionProps } from "./type";
+import { WelcomePageFakeDisabledButton } from "./WelcomePageFakeDisabledButton";
+
+export const WelcomePageOrdersButton = ({ onClick }: PrimaryActionProps) => {
+  const { user } = useUser();
+  const userPermissions = user?.userPermissions || [];
+  const hasPermissionToManageOrders = hasPermissions(userPermissions, [
+    PermissionEnum.MANAGE_ORDERS,
+  ]);
+
+  if (!hasPermissionToManageOrders) {
+    return (
+      <Tooltip>
+        <Tooltip.Trigger>
+          <WelcomePageFakeDisabledButton>
+            <FormattedMessage defaultMessage="Go to orders" id="kv3FWU" description="btn label" />
+          </WelcomePageFakeDisabledButton>
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          <Tooltip.Arrow />
+          <FormattedMessage
+            defaultMessage="You don't have permission to manage orders"
+            id="xol6jX"
+          />
+        </Tooltip.Content>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Link to={orderListUrl()} onClick={onClick}>
+      <Button variant="primary">
+        <FormattedMessage defaultMessage="Go to orders" id="kv3FWU" description="btn label" />
+      </Button>
+    </Link>
+  );
+};
diff --git a/src/welcomePage/WelcomePageOnboarding/components/WelcomePageWebhooksButton.tsx b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageWebhooksButton.tsx
new file mode 100644
index 00000000000..8d6b886c62e
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/components/WelcomePageWebhooksButton.tsx
@@ -0,0 +1,16 @@
+import { ExtensionsPaths } from "@dashboard/extensions/urls";
+import { Button } from "@saleor/macaw-ui-next";
+import { FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
+
+import { type PrimaryActionProps } from "./type";
+
+export const WelcomePageWebhooksButton = ({ onClick }: PrimaryActionProps) => {
+  return (
+    <Link to={ExtensionsPaths.installedExtensions} onClick={onClick}>
+      <Button variant="primary">
+        <FormattedMessage defaultMessage="Go to Extensions" id="8Mq3ku" description="btn label" />
+      </Button>
+    </Link>
+  );
+};
diff --git a/src/welcomePage/WelcomePageOnboarding/components/type.ts b/src/welcomePage/WelcomePageOnboarding/components/type.ts
new file mode 100644
index 00000000000..826e981196c
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/components/type.ts
@@ -0,0 +1,3 @@
+export interface PrimaryActionProps {
+  onClick: () => void;
+}
diff --git a/src/welcomePage/WelcomePageOnboarding/hooks/useNewUserCheck.test.ts b/src/welcomePage/WelcomePageOnboarding/hooks/useNewUserCheck.test.ts
new file mode 100644
index 00000000000..d0750a5c84e
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/hooks/useNewUserCheck.test.ts
@@ -0,0 +1,95 @@
+import { useUser } from "@dashboard/auth/useUser";
+import { renderHook } from "@testing-library/react";
+
+import { useNewUserCheck } from "./useNewUserCheck";
+
+jest.mock("@dashboard/auth/useUser");
+
+describe("useNewUserCheck", () => {
+  const originalEnv = process.env;
+
+  beforeEach(() => {
+    jest.resetModules(); // Clear the module cache to ensure no env conflicts.
+    process.env = { ...originalEnv }; // Reset the process.env before each test.
+  });
+
+  afterAll(() => {
+    process.env = originalEnv; // Restore original process.env.
+  });
+
+  it("should return isNewUser as false if user is not defined", () => {
+    // Arrange
+    (useUser as jest.Mock).mockReturnValue({ user: null });
+
+    process.env.ONBOARDING_USER_JOINED_DATE_THRESHOLD = "2023-01-01";
+
+    // Act
+    const { result } = renderHook(() => useNewUserCheck());
+
+    // Assert
+    expect(result.current).toEqual({ isNewUser: false, isUserLoading: true });
+  });
+
+  it("should return isNewUser as false if ONBOARDING_USER_JOINED_DATE_THRESHOLD is not set", () => {
+    // Arrange
+    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: "2023-02-01" } });
+
+    delete process.env.ONBOARDING_USER_JOINED_DATE_THRESHOLD;
+
+    // Act
+    const { result } = renderHook(() => useNewUserCheck());
+
+    // Assert
+    expect(result.current).toEqual({ isNewUser: false, isUserLoading: false });
+  });
+
+  it("should return isNewUser as true if user joined after the threshold date", () => {
+    // Arrange
+    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: "2023-02-01" } });
+
+    process.env.ONBOARDING_USER_JOINED_DATE_THRESHOLD = "2023-01-01";
+
+    // Act
+    const { result } = renderHook(() => useNewUserCheck());
+
+    // Assert
+    expect(result.current).toEqual({ isNewUser: true, isUserLoading: false });
+  });
+
+  it("should return isNewUser as false if user joined before the threshold date", () => {
+    // Arrange
+    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: "2022-12-31" } });
+
+    process.env.ONBOARDING_USER_JOINED_DATE_THRESHOLD = "2023-01-01";
+
+    // Act
+    const { result } = renderHook(() => useNewUserCheck());
+
+    // Assert
+    expect(result.current).toEqual({ isNewUser: false, isUserLoading: false });
+  });
+
+  it("should return isNewUser as false if threshold date is invalid", () => {
+    // Arrange
+    (useUser as jest.Mock).mockReturnValue({ user: { dateJoined: "2023-01-01" } });
+
+    process.env.ONBOARDING_USER_JOINED_DATE_THRESHOLD = "123456789";
+
+    // Act
+    const { result } = renderHook(() => useNewUserCheck());
+
+    // Assert
+    expect(result.current).toEqual({ isNewUser: false, isUserLoading: false });
+  });
+
+  it("should return isNewUser as false and isUserLoading true when uer is loading", () => {
+    // Arrange
+    (useUser as jest.Mock).mockReturnValue({ user: null, isUserLoading: true });
+
+    // Act
+    const { result } = renderHook(() => useNewUserCheck());
+
+    // Assert
+    expect(result.current).toEqual({ isNewUser: false, isUserLoading: true });
+  });
+});
diff --git a/src/welcomePage/WelcomePageOnboarding/hooks/useNewUserCheck.ts b/src/welcomePage/WelcomePageOnboarding/hooks/useNewUserCheck.ts
new file mode 100644
index 00000000000..8503dfac87c
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/hooks/useNewUserCheck.ts
@@ -0,0 +1,36 @@
+import { useUser } from "@dashboard/auth/useUser";
+
+export const useNewUserCheck = () => {
+  const { user } = useUser();
+  const thresholdDateString = process.env.ONBOARDING_USER_JOINED_DATE_THRESHOLD || "2024-11-29";
+
+  if (!user) {
+    return {
+      isNewUser: false,
+      isUserLoading: true,
+    };
+  }
+
+  if (!thresholdDateString) {
+    return {
+      isNewUser: false,
+      isUserLoading: false,
+    };
+  }
+
+  const userJoinedDate = new Date(user.dateJoined);
+  // Reset time, so timezone will not flip the day
+  const thresholdDate = new Date(`${thresholdDateString}T00:00:00`);
+
+  if (isNaN(userJoinedDate.getTime()) || isNaN(thresholdDate.getTime())) {
+    return {
+      isNewUser: false,
+      isUserLoading: false,
+    };
+  }
+
+  return {
+    isNewUser: userJoinedDate > thresholdDate,
+    isUserLoading: false,
+  };
+};
diff --git a/src/welcomePage/WelcomePageOnboarding/hooks/useOnboardingData.tsx b/src/welcomePage/WelcomePageOnboarding/hooks/useOnboardingData.tsx
new file mode 100644
index 00000000000..fde073ece36
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/hooks/useOnboardingData.tsx
@@ -0,0 +1,231 @@
+import { useAnalytics } from "@dashboard/components/ProductAnalytics/useAnalytics";
+import { Button } from "@saleor/macaw-ui-next";
+import { type ReactNode } from "react";
+import { FormattedMessage, type IntlShape, useIntl } from "react-intl";
+
+import { WelcomePageCheckGraphQLButton } from "../components/WelcomePageCheckGraphQLButton";
+import { WelcomePageCreateProductButton } from "../components/WelcomePageCreateProductButton";
+import { WelcomePageInviteStaffButton } from "../components/WelcomePageInviteStaffButton";
+import { WelcomePageOrdersButton } from "../components/WelcomePageOrdersButton";
+import { WelcomePageWebhooksButton } from "../components/WelcomePageWebhooksButton";
+import { useOnboarding } from "../onboardingContext";
+import { type OnboardingStepsIDs } from "../onboardingContext/types";
+
+interface OnboardingStepData {
+  id: OnboardingStepsIDs;
+  title: string;
+  description: string;
+  actions: ReactNode;
+  isCompleted: boolean;
+}
+
+const getStepsData = ({
+  intl,
+  isStepCompleted,
+  onStepComplete,
+  trackOnboardingEvent,
+}: {
+  intl: IntlShape;
+  isStepCompleted: (step: OnboardingStepsIDs) => boolean;
+  onStepComplete: (step: OnboardingStepsIDs) => void;
+  trackOnboardingEvent: (event: OnboardingStepsIDs) => void;
+}): OnboardingStepData[] => {
+  const steps: OnboardingStepData[] = [
+    {
+      id: "get-started",
+      title: intl.formatMessage({
+        defaultMessage: "Welcome to Dashboard!",
+        id: "PaQFmR",
+        description: "onboarding step title",
+      }),
+      description: intl.formatMessage({
+        defaultMessage:
+          "We'll guide you through the main features so you can start customizing your store. Explore products, orders, collections, customers, and discounts to get familiar with key functions and concepts.",
+        id: "PrxZ/P",
+        description: "onboarding step description",
+      }),
+      isCompleted: isStepCompleted("get-started"),
+      actions: !isStepCompleted("get-started") ? (
+        <Button
+          variant="primary"
+          data-test-id="get-started-next-step-btn"
+          onClick={() => {
+            onStepComplete("get-started");
+            trackOnboardingEvent("get-started");
+          }}
+        >
+          <FormattedMessage defaultMessage="Next step" id="d+qgix" />
+        </Button>
+      ) : null,
+    },
+    {
+      id: "create-product",
+      title: intl.formatMessage({
+        defaultMessage: "Create a new product",
+        id: "IDwsCU",
+        description: "onboarding step title",
+      }),
+      description: intl.formatMessage({
+        defaultMessage:
+          "Go to all products from where you can create a new product and view it in all product list. View the product in GraphQL",
+        id: "l0a2tU",
+        description: "onboarding step description",
+      }),
+      isCompleted: isStepCompleted("create-product"),
+      actions: (
+        <>
+          <WelcomePageCreateProductButton onClick={() => trackOnboardingEvent("create-product")} />
+          {!isStepCompleted("create-product") && (
+            <Button
+              variant="secondary"
+              onClick={() => onStepComplete("create-product")}
+              data-test-id="create-product-mark-as-done"
+            >
+              <FormattedMessage defaultMessage="Mark as done" id="C5gcqL" description="btn label" />
+            </Button>
+          )}
+        </>
+      ),
+    },
+    {
+      id: "explore-orders",
+      title: intl.formatMessage({
+        defaultMessage: "Explore orders",
+        id: "HADMte",
+        description: "onboarding step title",
+      }),
+      description: intl.formatMessage({
+        defaultMessage:
+          "Go to all orders where you can create an fulfilment and refund and review corresponding statuses. View the order in GraphQL",
+        id: "4IawKc",
+        description: "onboarding step description",
+      }),
+      isCompleted: isStepCompleted("explore-orders"),
+      actions: (
+        <>
+          <WelcomePageOrdersButton onClick={() => trackOnboardingEvent("explore-orders")} />
+          {!isStepCompleted("explore-orders") && (
+            <Button
+              variant="secondary"
+              onClick={() => onStepComplete("explore-orders")}
+              data-test-id="explore-orders-mark-as-done"
+            >
+              <FormattedMessage defaultMessage="Mark as done" id="C5gcqL" description="btn label" />
+            </Button>
+          )}
+        </>
+      ),
+    },
+    {
+      id: "graphql-playground",
+      title: intl.formatMessage({
+        defaultMessage: "Check our GraphQL playground & make an API call",
+        id: "EQfaUv",
+        description: "onboarding step title",
+      }),
+      description: intl.formatMessage({
+        defaultMessage:
+          "Saleor includes a GraphQL Playground, an interactive GraphQL editor, allowing access to your Saleor instance's API through the web browser. The Playground lets you quickly familiarize yourself with the API, perform example operations, and send your first queries and mutations.",
+        id: "Nyxzpe",
+        description: "onboarding step description",
+      }),
+      isCompleted: isStepCompleted("graphql-playground"),
+      actions: (
+        <>
+          <WelcomePageCheckGraphQLButton
+            onClick={() => trackOnboardingEvent("graphql-playground")}
+          />
+          {!isStepCompleted("graphql-playground") && (
+            <Button
+              variant="secondary"
+              onClick={() => onStepComplete("graphql-playground")}
+              data-test-id="graphql-playground-mark-as-done"
+            >
+              <FormattedMessage defaultMessage="Mark as done" id="C5gcqL" description="btn label" />
+            </Button>
+          )}
+        </>
+      ),
+    },
+    {
+      id: "view-extensions" as OnboardingStepsIDs,
+      title: intl.formatMessage({
+        defaultMessage: "Discover extension capabilities",
+        id: "JTjg1r",
+        description: "onboarding step title",
+      }),
+      description: intl.formatMessage({
+        defaultMessage:
+          "Review the central hub for managing all available extensions. Here, you can easily oversee your extensions and enhance Saleor with custom solutions using webhooks and APIs.",
+        id: "zsz6LN",
+        description: "onboarding step description",
+      }),
+      isCompleted: isStepCompleted("view-extensions"),
+      actions: (
+        <>
+          <WelcomePageWebhooksButton onClick={() => trackOnboardingEvent("view-extensions")} />
+          {!isStepCompleted("view-extensions") && (
+            <Button
+              variant="secondary"
+              onClick={() => onStepComplete("view-extensions")}
+              data-test-id="view-extensions-mark-as-done"
+            >
+              <FormattedMessage defaultMessage="Mark as done" id="C5gcqL" description="btn label" />
+            </Button>
+          )}
+        </>
+      ),
+    },
+    {
+      id: "invite-staff",
+      title: intl.formatMessage({
+        defaultMessage: "Invite staff members",
+        id: "p/m4dD",
+        description: "onboarding step title",
+      }),
+      description: intl.formatMessage({
+        defaultMessage:
+          "Invite team members and assign permissions on Product Information Management (PIM), Order Management System (OMS), Promotions engine, Extensions (apps, plugins)",
+        id: "Z7vQSa",
+      }),
+      isCompleted: isStepCompleted("invite-staff"),
+      actions: (
+        <>
+          <WelcomePageInviteStaffButton onClick={() => trackOnboardingEvent("invite-staff")} />
+          {!isStepCompleted("invite-staff") && (
+            <Button
+              variant="secondary"
+              onClick={() => onStepComplete("invite-staff")}
+              data-test-id="invite-staff-mark-as-done"
+            >
+              <FormattedMessage defaultMessage="Mark as done" id="C5gcqL" description="btn label" />
+            </Button>
+          )}
+        </>
+      ),
+    },
+  ];
+
+  return steps;
+};
+
+export const useOnboardingData = () => {
+  const intl = useIntl();
+  const analytics = useAnalytics();
+  const { markOnboardingStepAsCompleted, onboardingState } = useOnboarding();
+
+  const steps = getStepsData({
+    intl,
+    isStepCompleted: (step: OnboardingStepsIDs) => onboardingState.stepsCompleted.includes(step),
+    onStepComplete: (step: OnboardingStepsIDs) => {
+      markOnboardingStepAsCompleted(step);
+      analytics.trackEvent("home_onboarding_step_complete_click", { step_id: step });
+    },
+    trackOnboardingEvent: (step_id: OnboardingStepsIDs) =>
+      analytics.trackEvent("home_onboarding_step_click", { step_id: step_id }),
+  });
+
+  return {
+    steps,
+  };
+};
diff --git a/src/welcomePage/WelcomePageOnboarding/index.ts b/src/welcomePage/WelcomePageOnboarding/index.ts
new file mode 100644
index 00000000000..5d609acb608
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/index.ts
@@ -0,0 +1 @@
+export { WelcomePageOnboarding } from "./WelcomePageOnboarding";
diff --git a/src/welcomePage/WelcomePageOnboarding/mocks.ts b/src/welcomePage/WelcomePageOnboarding/mocks.ts
new file mode 100644
index 00000000000..fbb99f01507
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/mocks.ts
@@ -0,0 +1,14 @@
+export const onboardingCompletedMock = {
+  onboardingExpanded: true,
+  stepsCompleted: [
+    "get-started",
+    "invite-staff",
+    "view-extensions",
+    "explore-orders",
+    "graphql-playground",
+    "create-product",
+  ],
+  stepsExpanded: {},
+};
+
+export const onboardingInitState = undefined;
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/OnboardingContext.tsx b/src/welcomePage/WelcomePageOnboarding/onboardingContext/OnboardingContext.tsx
new file mode 100644
index 00000000000..68c8bbd01d1
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/onboardingContext/OnboardingContext.tsx
@@ -0,0 +1,140 @@
+import { useAnalytics } from "@dashboard/components/ProductAnalytics/useAnalytics";
+import {
+  handleStateChangeAfterStepCompleted,
+  handleStateChangeAfterToggle,
+} from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext/utils";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+
+import { useNewUserCheck } from "../hooks/useNewUserCheck";
+import {
+  getInitialOnboardingState,
+  initialOnboardingSteps,
+  TOTAL_STEPS_COUNT,
+} from "./initialOnboardingState";
+import {
+  type OnboardingContextType,
+  type OnboardingProviderProps,
+  type OnboardingState,
+  type OnboardingStepsIDs,
+} from "./types";
+import { useExpandedOnboardingId } from "./useExpandedOnboardingId";
+import { useOnboardingStorage } from "./useOnboardingStorage";
+
+const OnboardingContext = createContext<OnboardingContextType | null>(null);
+
+export const OnboardingProvider = ({ children }: OnboardingProviderProps) => {
+  const analytics = useAnalytics();
+  const [onboardingState, setOnboardingState] = useState<OnboardingState>({
+    onboardingExpanded: true,
+    stepsCompleted: [],
+    stepsExpanded: {} as OnboardingState["stepsExpanded"],
+  });
+  const loaded = useRef(false);
+  const { isNewUser, isUserLoading } = useNewUserCheck();
+
+  const storageService = useOnboardingStorage();
+
+  useEffect(() => {
+    if (loaded.current || isUserLoading) return;
+
+    const onboardingStateFromUserMetadata = storageService.getOnboardingState();
+
+    // When first time load there is not data in local storage, so use initial state
+    if (!onboardingStateFromUserMetadata) {
+      setOnboardingState(getInitialOnboardingState(isNewUser));
+    } else {
+      setOnboardingState(onboardingStateFromUserMetadata);
+    }
+
+    loaded.current = true;
+  }, [isNewUser, isUserLoading, loaded, storageService]);
+
+  useEffect(() => {
+    if (loaded.current) {
+      storageService.saveOnboardingState(onboardingState);
+    }
+  }, [onboardingState]);
+
+  // Calculate the valid completed steps based on feature flag
+  const validCompletedSteps = onboardingState.stepsCompleted;
+
+  const validCompletedStepsCount = validCompletedSteps.length;
+
+  // For old users, onboarding is always completed, for new one we need to calculate it
+  const isOnboardingCompleted = isNewUser ? validCompletedStepsCount >= TOTAL_STEPS_COUNT : true;
+
+  const extendedStepId = useExpandedOnboardingId(
+    onboardingState,
+    loaded.current,
+    initialOnboardingSteps,
+  );
+
+  const markOnboardingStepAsCompleted = (id: OnboardingStepsIDs) => {
+    if (onboardingState.stepsCompleted.includes(id)) return;
+
+    setOnboardingState(prevOnboardingState =>
+      handleStateChangeAfterStepCompleted(prevOnboardingState, id),
+    );
+  };
+
+  const markAllAsCompleted = () => {
+    analytics.trackEvent("home_onboarding_mark_all_steps_completed");
+    setOnboardingState(prevOnboardingState => ({
+      ...prevOnboardingState,
+      stepsCompleted: initialOnboardingSteps.map(step => step.id),
+      stepsExpanded: {} as OnboardingState["stepsExpanded"],
+    }));
+  };
+
+  // In case accordion collapse, we get empty string as id and I need current expanded id to toggle it
+  const toggleExpandedOnboardingStep = (id: string, currentExpandedId: OnboardingStepsIDs | "") => {
+    // In case that step was collapse we get empty string as id
+    const expandedId = id || currentExpandedId;
+
+    setOnboardingState(prev =>
+      handleStateChangeAfterToggle(prev, expandedId as OnboardingStepsIDs, id),
+    );
+  };
+
+  const toggleOnboarding = (value: boolean) => {
+    setOnboardingState(prev => {
+      const newState = {
+        ...prev,
+        onboardingExpanded: value,
+      };
+
+      storageService.saveOnboardingState(newState);
+
+      return newState;
+    });
+  };
+
+  return (
+    <OnboardingContext.Provider
+      value={{
+        isOnboardingCompleted,
+        onboardingState,
+        extendedStepId,
+        loading: !loaded,
+        markOnboardingStepAsCompleted,
+        markAllAsCompleted,
+        toggleExpandedOnboardingStep,
+        toggleOnboarding,
+        validCompletedStepsCount,
+        visibleSteps: initialOnboardingSteps,
+      }}
+    >
+      {children}
+    </OnboardingContext.Provider>
+  );
+};
+
+export const useOnboarding = () => {
+  const context = useContext(OnboardingContext);
+
+  if (context === null) {
+    throw new Error("useOnboarding must be used within a OnboardingProvider");
+  }
+
+  return context;
+};
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/index.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/index.ts
new file mode 100644
index 00000000000..59e1d92e990
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/onboardingContext/index.ts
@@ -0,0 +1,2 @@
+export * from "./OnboardingContext";
+export * from "./types";
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/initialOnboardingState.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/initialOnboardingState.ts
new file mode 100644
index 00000000000..b5946367c83
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/onboardingContext/initialOnboardingState.ts
@@ -0,0 +1,56 @@
+import {
+  type OnboardingState,
+  type OnboardingStep,
+} from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext/types";
+
+// We store state in metadata for all steps even these that are not shown to the user
+export const initialOnboardingSteps: OnboardingStep[] = [
+  {
+    id: "get-started",
+    completed: false,
+    expanded: undefined,
+  },
+  {
+    id: "create-product",
+    completed: false,
+    expanded: undefined,
+  },
+  {
+    id: "explore-orders",
+    completed: false,
+    expanded: undefined,
+  },
+  {
+    id: "graphql-playground",
+    completed: false,
+    expanded: undefined,
+  },
+  {
+    id: "view-extensions",
+    completed: false,
+    expanded: undefined,
+  },
+  {
+    id: "invite-staff",
+    completed: false,
+    expanded: undefined,
+  },
+];
+
+export const TOTAL_STEPS_COUNT = initialOnboardingSteps.length - 1; // we either show view-extensions or view-webhooks but not both
+
+export const getInitialOnboardingState = (isNewUser: boolean): OnboardingState => {
+  if (isNewUser) {
+    return {
+      onboardingExpanded: true,
+      stepsCompleted: [],
+      stepsExpanded: {} as OnboardingState["stepsExpanded"],
+    };
+  }
+
+  return {
+    onboardingExpanded: false,
+    stepsCompleted: initialOnboardingSteps.map(step => step.id),
+    stepsExpanded: {} as OnboardingState["stepsExpanded"],
+  };
+};
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/types.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/types.ts
new file mode 100644
index 00000000000..f0dd8637fd3
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/onboardingContext/types.ts
@@ -0,0 +1,43 @@
+import type * as React from "react";
+
+export type OnboardingStepsIDs =
+  | "get-started"
+  | "create-product"
+  | "explore-orders"
+  | "graphql-playground"
+  | "view-extensions"
+  | "invite-staff";
+
+export type OnboardingStep = {
+  id: OnboardingStepsIDs;
+  completed: boolean;
+  expanded: boolean | undefined;
+};
+
+export type OnboardingState = {
+  stepsCompleted: OnboardingStepsIDs[];
+  stepsExpanded: Record<OnboardingStepsIDs, boolean>;
+  onboardingExpanded: boolean;
+};
+
+export interface StorageService {
+  getOnboardingState(): OnboardingState | undefined;
+  saveOnboardingState(onboardingState: OnboardingState): Promise<void>;
+}
+
+export interface OnboardingContextType {
+  isOnboardingCompleted: boolean;
+  loading: boolean;
+  extendedStepId: OnboardingStepsIDs | "";
+  onboardingState: OnboardingState;
+  markOnboardingStepAsCompleted: (id: OnboardingStepsIDs) => void;
+  markAllAsCompleted: () => void;
+  toggleExpandedOnboardingStep: (id: string, currentExpandedId: OnboardingStepsIDs | "") => void;
+  toggleOnboarding: (value: boolean) => void;
+  validCompletedStepsCount: number;
+  visibleSteps: OnboardingStep[];
+}
+
+export interface OnboardingProviderProps {
+  children: React.ReactNode;
+}
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/useExpandedOnboardingId.test.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/useExpandedOnboardingId.test.ts
new file mode 100644
index 00000000000..e13f910ab2a
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/onboardingContext/useExpandedOnboardingId.test.ts
@@ -0,0 +1,186 @@
+import {
+  type OnboardingState,
+  type OnboardingStep,
+} from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext/types";
+import { renderHook } from "@testing-library/react";
+
+import { useExpandedOnboardingId } from "./useExpandedOnboardingId";
+
+describe("useExpandedOnboardingId", () => {
+  it("should return first expanded step on init if exists", () => {
+    // Arrange
+    const onboardingState = {
+      stepsCompleted: ["get-started"],
+      stepsExpanded: {
+        "create-product": true,
+      },
+    } as OnboardingState;
+    const loaded = true;
+    const visibleSteps: OnboardingStep[] = [
+      { id: "get-started", completed: true, expanded: undefined },
+      { id: "create-product", completed: false, expanded: true },
+      { id: "explore-orders", completed: false, expanded: undefined },
+      { id: "graphql-playground", completed: false, expanded: undefined },
+      { id: "view-extensions", completed: false, expanded: undefined },
+      { id: "invite-staff", completed: false, expanded: undefined },
+    ];
+
+    // Act
+    const expandedStepId = renderHook(() =>
+      useExpandedOnboardingId(onboardingState, loaded, visibleSteps),
+    ).result.current;
+
+    // assert
+    expect(expandedStepId).toBe("create-product");
+  });
+
+  it("should return first not completed step when no one with expanded state", () => {
+    // Arrange
+    const onboardingState = {
+      stepsCompleted: ["get-started", "create-product"],
+      stepsExpanded: { "get-started": false },
+    } as OnboardingState;
+    const loaded = true;
+    const visibleSteps: OnboardingStep[] = [
+      { id: "get-started", completed: true, expanded: false },
+      { id: "create-product", completed: true, expanded: undefined },
+      { id: "explore-orders", completed: false, expanded: undefined },
+      { id: "graphql-playground", completed: false, expanded: undefined },
+      { id: "view-extensions", completed: false, expanded: undefined },
+      { id: "invite-staff", completed: false, expanded: undefined },
+    ];
+
+    // Act
+    const expandedStepId = renderHook(() =>
+      useExpandedOnboardingId(onboardingState, loaded, visibleSteps),
+    ).result.current;
+
+    // Assert
+    expect(expandedStepId).toBe("explore-orders");
+  });
+
+  it("should return empty string when all steps are collapsed", () => {
+    // Arrange
+    const onboardingState = {
+      onboardingExpanded: true,
+      stepsCompleted: [],
+      stepsExpanded: {
+        "get-started": false,
+        "create-product": false,
+        "explore-orders": false,
+        "graphql-playground": false,
+        "view-extensions": false,
+        "invite-staff": false,
+      },
+    } as OnboardingState;
+    const loaded = true;
+    const visibleSteps: OnboardingStep[] = [
+      { id: "get-started", completed: false, expanded: false },
+      { id: "create-product", completed: false, expanded: false },
+      { id: "explore-orders", completed: false, expanded: false },
+      { id: "graphql-playground", completed: false, expanded: false },
+      { id: "view-extensions", completed: false, expanded: false },
+      { id: "invite-staff", completed: false, expanded: false },
+    ];
+
+    // Act
+    const expandedStepId = renderHook(() =>
+      useExpandedOnboardingId(onboardingState, loaded, visibleSteps),
+    ).result.current;
+
+    // Assert
+    expect(expandedStepId).toBe("");
+  });
+
+  it("should return first not completed step after step competed", async () => {
+    // Arrange
+    const onboardingState = {
+      onboardingExpanded: true,
+      stepsCompleted: [],
+      stepsExpanded: {
+        "get-started": false,
+      },
+    } as unknown as OnboardingState;
+    const onboardingStateChanged = {
+      onboardingExpanded: true,
+      stepsCompleted: ["create-product"],
+      stepsExpanded: {
+        "get-started": false,
+      },
+    } as OnboardingState;
+    const loaded = true;
+    const visibleSteps: OnboardingStep[] = [
+      { id: "get-started", completed: false, expanded: false },
+      { id: "create-product", completed: false, expanded: undefined },
+      { id: "explore-orders", completed: false, expanded: undefined },
+      { id: "graphql-playground", completed: false, expanded: undefined },
+      { id: "view-extensions", completed: false, expanded: undefined },
+      { id: "invite-staff", completed: false, expanded: undefined },
+    ];
+
+    // Act
+    const { rerender, result } = renderHook(
+      ({ onboardingState, loaded, visibleSteps }) =>
+        useExpandedOnboardingId(onboardingState, loaded, visibleSteps),
+      {
+        initialProps: {
+          onboardingState,
+          loaded,
+          visibleSteps,
+        },
+      },
+    );
+
+    rerender({ onboardingState: onboardingStateChanged, loaded, visibleSteps });
+
+    // Assert
+    expect(result.current).toBe("explore-orders");
+  });
+
+  it("should return first expanded step after expand step toggle", async () => {
+    // Arrange
+    const onboardingState = {
+      onboardingExpanded: true,
+      stepsCompleted: ["get-started", "create-product"],
+      stepsExpanded: {
+        "get-started": false,
+      },
+    } as unknown as OnboardingState;
+
+    const onboardingStateChanged = {
+      onboardingExpanded: true,
+      stepsCompleted: ["get-started", "create-product"],
+      stepsExpanded: {
+        "get-started": false,
+        "explore-orders": true,
+      },
+    } as OnboardingState;
+    const loaded = true;
+    const visibleSteps: OnboardingStep[] = [
+      { id: "get-started", completed: true, expanded: false },
+      { id: "create-product", completed: true, expanded: undefined },
+      { id: "explore-orders", completed: false, expanded: undefined },
+      { id: "graphql-playground", completed: false, expanded: undefined },
+      { id: "view-extensions", completed: false, expanded: undefined },
+      { id: "invite-staff", completed: false, expanded: undefined },
+    ];
+
+    // Act
+    const { rerender, result } = renderHook(
+      ({ onboardingState, loaded, visibleSteps }) =>
+        useExpandedOnboardingId(onboardingState, loaded, visibleSteps),
+      {
+        initialProps: {
+          onboardingState,
+          loaded,
+          visibleSteps,
+        },
+      },
+    );
+
+    rerender({ onboardingState: onboardingStateChanged, loaded, visibleSteps });
+
+    // Assert
+    expect(result.current).toBe("explore-orders");
+  });
+});
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/useExpandedOnboardingId.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/useExpandedOnboardingId.ts
new file mode 100644
index 00000000000..092de8b21c1
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/onboardingContext/useExpandedOnboardingId.ts
@@ -0,0 +1,53 @@
+import { useEffect, useRef, useState } from "react";
+
+import { type OnboardingState, type OnboardingStep, type OnboardingStepsIDs } from "./types";
+import {
+  getFirstExpanderStepId,
+  getFirstNotCompletedAndNotExpandedStep,
+  getNextStepToExpand,
+} from "./utils";
+
+export const useExpandedOnboardingId = (
+  onboardingState: OnboardingState,
+  loaded: boolean,
+  visibleSteps: OnboardingStep[],
+) => {
+  const hasBeenCalled = useRef(false);
+  const [expandedStepId, setExpandedStepId] = useState<OnboardingStepsIDs | "">("");
+
+  useEffect(() => {
+    if (hasBeenCalled.current) {
+      const firstExpandedStepId = getFirstExpanderStepId(onboardingState);
+
+      if (firstExpandedStepId) {
+        setExpandedStepId(firstExpandedStepId);
+      } else {
+        setExpandedStepId(getFirstNotCompletedAndNotExpandedStep(onboardingState, visibleSteps));
+      }
+    }
+  }, [onboardingState.stepsExpanded, visibleSteps]);
+
+  useEffect(() => {
+    // On every state change
+    if (hasBeenCalled.current) {
+      setExpandedStepId(getNextStepToExpand(onboardingState, visibleSteps));
+    }
+  }, [onboardingState.stepsCompleted, visibleSteps]);
+
+  useEffect(() => {
+    // On context first load
+    if (loaded && !hasBeenCalled.current) {
+      hasBeenCalled.current = true;
+
+      const firstExpandedStep = getFirstExpanderStepId(onboardingState);
+
+      if (firstExpandedStep) {
+        setExpandedStepId(firstExpandedStep);
+      } else {
+        setExpandedStepId(getFirstNotCompletedAndNotExpandedStep(onboardingState, visibleSteps));
+      }
+    }
+  }, [loaded, onboardingState, visibleSteps]);
+
+  return expandedStepId;
+};
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/useOnboardingStorage.test.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/useOnboardingStorage.test.ts
new file mode 100644
index 00000000000..1346dea344f
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/onboardingContext/useOnboardingStorage.test.ts
@@ -0,0 +1,126 @@
+import { useUser } from "@dashboard/auth/useUser";
+import { useSaveOnBoardingStateMutation } from "@dashboard/graphql";
+import { act, renderHook } from "@testing-library/react";
+
+import { type OnboardingStepsIDs } from "./types";
+import { useOnboardingStorage } from "./useOnboardingStorage";
+
+jest.mock("@dashboard/auth/useUser", () => ({
+  __esModule: true,
+  useUser: jest.fn(),
+}));
+
+jest.mock("@dashboard/graphql");
+
+jest.useFakeTimers();
+
+jest.mock("lodash/debounce", () => jest.fn(fn => fn));
+
+describe("useOnboardingStorage", () => {
+  describe("getOnboardingState", () => {
+    it("should return undefined when there is no onboarding in user metadata", () => {
+      // Arrange
+      (useUser as jest.Mock).mockImplementation(() => ({
+        user: { metadata: [{ key1: "value1" }, { key2: "value2" }] },
+      }));
+      (useSaveOnBoardingStateMutation as jest.Mock).mockReturnValue([jest.fn(), {}]);
+
+      const { getOnboardingState } = renderHook(() => useOnboardingStorage()).result.current;
+
+      // Act
+      const result = getOnboardingState();
+
+      // Assert
+      expect(result).toBeUndefined();
+    });
+
+    it("should return onboarding state from user metadata", () => {
+      // Arrange
+      (useUser as jest.Mock).mockImplementation(() => ({
+        user: {
+          metadata: [
+            {
+              key: "onboarding",
+              value: JSON.stringify({ steps: [], onboardingExpanded: true }),
+            },
+          ],
+        },
+      }));
+      (useSaveOnBoardingStateMutation as jest.Mock).mockReturnValue([jest.fn(), {}]);
+
+      const { getOnboardingState } = renderHook(() => useOnboardingStorage()).result.current;
+
+      // Act
+      const result = getOnboardingState();
+
+      // Assert
+      expect(result).toEqual({ steps: [], onboardingExpanded: true });
+    });
+  });
+
+  describe("saveOnboardingState", () => {
+    it("should not save onboarding state when there is no user", async () => {
+      // Arrange
+      (useUser as jest.Mock).mockImplementation(() => ({ user: null }));
+
+      const updateMetadataMock = jest.fn();
+
+      (useSaveOnBoardingStateMutation as jest.Mock).mockReturnValue([updateMetadataMock, {}]);
+
+      const { result } = renderHook(() => useOnboardingStorage());
+
+      // Act
+      const returnValue = await act(async () => {
+        return await result.current.saveOnboardingState({
+          stepsCompleted: [],
+          stepsExpanded: {} as Record<OnboardingStepsIDs, boolean>,
+          onboardingExpanded: true,
+        });
+      });
+
+      // Assert
+      expect(returnValue).toBeUndefined();
+      expect(updateMetadataMock).not.toHaveBeenCalled();
+    });
+
+    it("should save onboarding state to user metadata and be called only once", async () => {
+      // Arrange
+      (useUser as jest.Mock).mockImplementation(() => ({ user: { id: "1", metadata: [] } }));
+
+      const updateMetadataMock = jest.fn();
+
+      (useSaveOnBoardingStateMutation as jest.Mock).mockReturnValue([updateMetadataMock, {}]);
+
+      const { result } = renderHook(() => useOnboardingStorage());
+
+      // Act
+      await act(async () => {
+        await result.current.saveOnboardingState({
+          stepsCompleted: [],
+          stepsExpanded: {} as Record<OnboardingStepsIDs, boolean>,
+          onboardingExpanded: true,
+        });
+      });
+
+      jest.runAllTimers();
+
+      // Assert
+      expect(updateMetadataMock).toHaveBeenCalledTimes(1);
+      expect(updateMetadataMock).toHaveBeenCalledWith({
+        variables: {
+          id: "1",
+          input: [
+            {
+              key: "onboarding",
+              value: JSON.stringify({
+                stepsCompleted: [],
+                stepsExpanded: {} as Record<OnboardingStepsIDs, boolean>,
+                onboardingExpanded: true,
+              }),
+            },
+          ],
+        },
+      });
+    });
+  });
+});
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/useOnboardingStorage.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/useOnboardingStorage.ts
new file mode 100644
index 00000000000..dcd0cefc6ce
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/onboardingContext/useOnboardingStorage.ts
@@ -0,0 +1,60 @@
+import { useUser } from "@dashboard/auth/useUser";
+import { useSaveOnBoardingStateMutation } from "@dashboard/graphql";
+import debounce from "lodash/debounce";
+import { useCallback, useMemo } from "react";
+
+import { type OnboardingState, type StorageService } from "../onboardingContext/types";
+import { METADATA_KEY, prepareUserMetadata } from "./utils";
+
+export const useOnboardingStorage = (): StorageService => {
+  const { user } = useUser();
+  const [saveOnboarding] = useSaveOnBoardingStateMutation({});
+
+  const getOnboardingState: StorageService["getOnboardingState"] = () => {
+    try {
+      const metadata = user?.metadata.find(m => m.key === METADATA_KEY);
+
+      if (!metadata) {
+        return undefined;
+      }
+
+      return JSON.parse(metadata.value);
+    } catch (error) {
+      console.warn("Could not get onboarding state from metadata", { error });
+
+      return undefined;
+    }
+  };
+
+  const saveOnboardingState: StorageService["saveOnboardingState"] = useCallback(
+    async (onboardingState: OnboardingState) => {
+      if (!user) {
+        return;
+      }
+
+      try {
+        const userMetadata = prepareUserMetadata(user?.metadata, onboardingState);
+
+        await saveOnboarding({
+          variables: {
+            id: user.id,
+            input: userMetadata,
+          },
+        });
+      } catch (error) {
+        console.warn("Could not save onboarding state to metadata");
+      }
+    },
+    [saveOnboarding, user],
+  );
+
+  const debouncedSaveOnboardingState = useMemo(
+    () => debounce(saveOnboardingState, 1000),
+    [saveOnboardingState],
+  ) as StorageService["saveOnboardingState"];
+
+  return {
+    getOnboardingState,
+    saveOnboardingState: debouncedSaveOnboardingState,
+  };
+};
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/utils.test.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/utils.test.ts
new file mode 100644
index 00000000000..08213f2190c
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/onboardingContext/utils.test.ts
@@ -0,0 +1,377 @@
+import { type MetadataInput } from "@dashboard/graphql";
+import {
+  type OnboardingState,
+  type OnboardingStep,
+  type OnboardingStepsIDs,
+} from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext/types";
+
+import {
+  getFirstExpanderStepId,
+  getFirstNotCompletedAndNotExpandedStep,
+  getNextStepToExpand,
+  handleStateChangeAfterStepCompleted,
+  handleStateChangeAfterToggle,
+  METADATA_KEY,
+  prepareUserMetadata,
+} from "./utils";
+
+describe("handleStateChangeAfterStepCompleted", () => {
+  it("should add the step to the completed steps", () => {
+    // Arrange
+    const state = {
+      onboardingExpanded: true,
+      stepsCompleted: [],
+      stepsExpanded: {},
+    } as unknown as OnboardingState;
+    const id = "get-started";
+
+    // Act
+    const newState = handleStateChangeAfterStepCompleted(state, id);
+
+    // Assert
+    expect(newState.stepsCompleted).toEqual(["get-started"]);
+  });
+
+  it("should add the step to the completed steps and add get-started if not already there", () => {
+    // Arrange
+    const state = {
+      onboardingExpanded: true,
+      stepsCompleted: [],
+      stepsExpanded: {},
+    } as unknown as OnboardingState;
+    const id = "create-product";
+
+    // Act
+    const newState = handleStateChangeAfterStepCompleted(state, id);
+
+    // Assert
+    expect(newState.stepsCompleted).toEqual(["get-started", "create-product"]);
+  });
+
+  it("should remove the step from stepsExpanded if it was expanded", () => {
+    // Arrange
+    const state = {
+      onboardingExpanded: true,
+      stepsCompleted: [],
+      stepsExpanded: { "create-product": true },
+    } as unknown as OnboardingState;
+    const id = "create-product";
+
+    // Act
+    const newState = handleStateChangeAfterStepCompleted(state, id);
+
+    // Assert
+    expect(newState.stepsCompleted).toEqual(["get-started", "create-product"]);
+    expect(newState.stepsExpanded["create-product"]).toBeUndefined();
+  });
+});
+
+describe("handleStateChangeAfterToggle", () => {
+  it("should set the expanded step id", () => {
+    // Arrange
+    const state = {
+      onboardingExpanded: true,
+      stepsCompleted: [],
+      stepsExpanded: {},
+    } as unknown as OnboardingState;
+    const expandedId = "get-started";
+    const id = "get-started";
+
+    // Act
+    const newState = handleStateChangeAfterToggle(state, expandedId, id);
+
+    // Assert
+    expect(newState.stepsExpanded).toEqual({ "get-started": true });
+  });
+
+  it("should toggle expanded step", () => {
+    // Arrange
+    const state = {
+      onboardingExpanded: true,
+      stepsCompleted: [],
+      stepsExpanded: { "get-started": true },
+    } as unknown as OnboardingState;
+    const expandedId = "get-started";
+    const id = "";
+
+    // Act
+    const newState = handleStateChangeAfterToggle(state, expandedId, id);
+
+    // Assert
+    expect(newState.stepsExpanded).toEqual({ "get-started": false });
+  });
+
+  it("should set the expanded step id and remove the previous one", () => {
+    // Arrange
+    const state = {
+      onboardingExpanded: true,
+      stepsCompleted: [],
+      stepsExpanded: { "get-started": true, "invite-staff": false },
+    } as unknown as OnboardingState;
+    const expandedId = "create-product";
+    const id = "create-product";
+
+    // Act
+    const newState = handleStateChangeAfterToggle(state, expandedId, id);
+
+    // Assert
+    expect(newState.stepsExpanded).toEqual({ "create-product": true, "invite-staff": false });
+  });
+
+  it("should clear other expanded steps when a new step is expanded", () => {
+    // Arrange
+    const state = {
+      onboardingExpanded: true,
+      stepsCompleted: [],
+      stepsExpanded: {
+        "get-started": true,
+        "explore-orders": true,
+      },
+    } as unknown as OnboardingState;
+    const expandedId = "create-product";
+    const id = "create-product";
+
+    // Act
+    const newState = handleStateChangeAfterToggle(state, expandedId, id);
+
+    // Assert
+    expect(newState.stepsExpanded).toEqual({ "create-product": true });
+  });
+});
+
+describe("getFirstExpanderStepId", () => {
+  it("should return the first expanded step id", () => {
+    // Arrange
+    const onboardingState = {
+      stepsCompleted: ["get-started"],
+      stepsExpanded: {
+        "create-product": true,
+      },
+    } as OnboardingState;
+
+    // Act
+    const firstExpandedStepId = getFirstExpanderStepId(onboardingState);
+
+    // Assert
+    expect(firstExpandedStepId).toBe("create-product");
+  });
+
+  it("should return empty string when no step is expanded", () => {
+    // Arrange
+    const onboardingState = {
+      stepsCompleted: ["get-started", "create-product"],
+      stepsExpanded: { "get-started": false },
+    } as OnboardingState;
+
+    // Act
+    const firstExpandedStepId = getFirstExpanderStepId(onboardingState);
+
+    // Assert
+    expect(firstExpandedStepId).toBe("");
+  });
+});
+
+describe("getFirstNotCompletedAndNotExpandedStep", () => {
+  it("should return the first not completed and not expanded step", () => {
+    // Arrange
+    const onboardingState = {
+      stepsCompleted: ["get-started"],
+      stepsExpanded: {
+        "create-product": false,
+      },
+    } as OnboardingState;
+    const visibleSteps: OnboardingStep[] = [
+      { id: "get-started", completed: true, expanded: undefined },
+      { id: "create-product", completed: false, expanded: false },
+      { id: "explore-orders", completed: false, expanded: undefined },
+      { id: "graphql-playground", completed: false, expanded: undefined },
+      { id: "view-extensions", completed: false, expanded: undefined },
+      { id: "invite-staff", completed: false, expanded: undefined },
+    ];
+
+    // Act
+    const firstNotCompletedStep = getFirstNotCompletedAndNotExpandedStep(
+      onboardingState,
+      visibleSteps,
+    );
+
+    // Assert
+    expect(firstNotCompletedStep).toEqual("explore-orders");
+  });
+
+  it("should return empty string when all steps are completed", () => {
+    // Arrange
+    const onboardingState = {
+      stepsCompleted: [
+        "get-started",
+        "create-product",
+        "explore-orders",
+        "graphql-playground",
+        "view-extensions",
+        "invite-staff",
+      ],
+      stepsExpanded: {},
+    } as OnboardingState;
+    const visibleSteps: OnboardingStep[] = [
+      { id: "get-started", completed: true, expanded: undefined },
+      { id: "create-product", completed: true, expanded: undefined },
+      { id: "explore-orders", completed: true, expanded: undefined },
+      { id: "graphql-playground", completed: true, expanded: undefined },
+      { id: "view-extensions", completed: true, expanded: undefined },
+      { id: "invite-staff", completed: true, expanded: undefined },
+    ];
+
+    // Act
+    const firstNotCompletedStep = getFirstNotCompletedAndNotExpandedStep(
+      onboardingState,
+      visibleSteps,
+    );
+
+    // Assert
+    expect(firstNotCompletedStep).toEqual("");
+  });
+});
+
+describe("getNextStepToExpand", () => {
+  it("should return the first step after last completed", () => {
+    // Arrange
+    const onboardingState = {
+      stepsCompleted: ["create-product"],
+      stepsExpanded: {},
+    } as OnboardingState;
+    const visibleSteps: OnboardingStep[] = [
+      { id: "get-started", completed: true, expanded: undefined },
+      { id: "create-product", completed: true, expanded: undefined },
+      { id: "explore-orders", completed: false, expanded: undefined },
+      { id: "graphql-playground", completed: false, expanded: undefined },
+      { id: "view-extensions", completed: false, expanded: undefined },
+      { id: "invite-staff", completed: false, expanded: undefined },
+    ];
+
+    // Act
+    const nextStep = getNextStepToExpand(onboardingState, visibleSteps);
+
+    // Assert
+    expect(nextStep).toEqual("explore-orders");
+  });
+
+  it("should return empty string when no next step after last completed", () => {
+    // Arrange
+    const onboardingState = {
+      stepsCompleted: ["invite-staff"],
+      stepsExpanded: {},
+    } as OnboardingState;
+    const visibleSteps: OnboardingStep[] = [
+      { id: "get-started", completed: true, expanded: undefined },
+      { id: "create-product", completed: true, expanded: undefined },
+      { id: "explore-orders", completed: true, expanded: undefined },
+      { id: "graphql-playground", completed: true, expanded: undefined },
+      { id: "view-extensions", completed: true, expanded: undefined },
+      { id: "invite-staff", completed: true, expanded: undefined },
+    ];
+
+    // Act
+    const nextStep = getNextStepToExpand(onboardingState, visibleSteps);
+
+    // Assert
+    expect(nextStep).toEqual("");
+  });
+
+  it("should return empty string if lastCompletedStepId is not in visibleSteps", () => {
+    // Arrange
+    const onboardingState = {
+      stepsCompleted: ["non-existent-step" as OnboardingStepsIDs],
+      stepsExpanded: {},
+    } as OnboardingState;
+    const visibleSteps: OnboardingStep[] = [
+      { id: "get-started", completed: true, expanded: undefined },
+      { id: "create-product", completed: true, expanded: undefined },
+    ];
+
+    // Act
+    const nextStep = getNextStepToExpand(onboardingState, visibleSteps);
+
+    // Assert
+    expect(nextStep).toEqual("");
+  });
+});
+
+describe("prepareUserMetadata", () => {
+  const onboardingState: OnboardingState = {
+    onboardingExpanded: true,
+    stepsCompleted: ["get-started"],
+    stepsExpanded: { "create-product": true } as unknown as Record<OnboardingStepsIDs, boolean>,
+  };
+  const onboardingStateString = JSON.stringify(onboardingState);
+
+  it("should add onboarding metadata if metadata is undefined", () => {
+    // Arrange
+    const metadata = undefined;
+
+    // Act
+    const result = prepareUserMetadata(metadata, onboardingState);
+
+    // Assert
+    expect(result).toEqual([
+      {
+        key: METADATA_KEY,
+        value: onboardingStateString,
+      },
+    ]);
+  });
+
+  it("should add onboarding metadata if key is not present", () => {
+    // Arrange
+    const metadata: MetadataInput[] = [{ key: "otherKey", value: "otherValue" }];
+
+    // Act
+    const result = prepareUserMetadata(metadata, onboardingState);
+
+    // Assert
+    expect(result).toEqual([
+      { key: "otherKey", value: "otherValue" },
+      {
+        key: METADATA_KEY,
+        value: onboardingStateString,
+      },
+    ]);
+  });
+
+  it("should update onboarding metadata if key is present", () => {
+    // Arrange
+    const metadata: MetadataInput[] = [
+      { key: "otherKey", value: "otherValue" },
+      { key: METADATA_KEY, value: "oldValue" },
+    ];
+
+    // Act
+    const result = prepareUserMetadata(metadata, onboardingState);
+
+    // Assert
+    expect(result).toEqual([
+      { key: "otherKey", value: "otherValue" },
+      {
+        key: METADATA_KEY,
+        value: onboardingStateString,
+      },
+    ]);
+    // Ensure the original position is updated, not appended
+    expect(result.findIndex(m => m.key === METADATA_KEY)).toBe(1);
+  });
+
+  it("should handle empty initial metadata array", () => {
+    // Arrange
+    const metadata: MetadataInput[] = [];
+
+    // Act
+    const result = prepareUserMetadata(metadata, onboardingState);
+
+    // Assert
+    expect(result).toEqual([
+      {
+        key: METADATA_KEY,
+        value: onboardingStateString,
+      },
+    ]);
+  });
+});
diff --git a/src/welcomePage/WelcomePageOnboarding/onboardingContext/utils.ts b/src/welcomePage/WelcomePageOnboarding/onboardingContext/utils.ts
new file mode 100644
index 00000000000..a74e3b12814
--- /dev/null
+++ b/src/welcomePage/WelcomePageOnboarding/onboardingContext/utils.ts
@@ -0,0 +1,137 @@
+import { type MetadataInput } from "@dashboard/graphql";
+
+import { type OnboardingState, type OnboardingStep, type OnboardingStepsIDs } from "./types";
+
+// Helper functions
+const cloneMetadata = (data: MetadataInput): MetadataInput => ({
+  key: data.key,
+  value: data.value,
+});
+
+const byKey = (keyToFind: string) => (metadataItem: { key: string }) =>
+  metadataItem.key === keyToFind;
+
+const isEntryValueTrue = ([_id, value]: [string, boolean]): boolean => value;
+
+const toStepWithClientState =
+  (state: OnboardingState) =>
+  (
+    step: OnboardingStep,
+  ): OnboardingStep & { completed: boolean; expanded: boolean | undefined } => ({
+    ...step,
+    completed: state.stepsCompleted.includes(step.id),
+    expanded: state.stepsExpanded[step.id],
+  });
+
+const isStepNotCompletedAndNotCollapsed = (step: {
+  completed: boolean;
+  expanded: boolean | undefined;
+}): boolean => !step.completed && step.expanded !== false;
+
+const byStepId =
+  (idToFind: OnboardingStepsIDs) =>
+  (step: { id: OnboardingStepsIDs }): boolean =>
+    step.id === idToFind;
+
+export const handleStateChangeAfterStepCompleted = (
+  state: OnboardingState,
+  id: OnboardingStepsIDs,
+): OnboardingState => {
+  const newCompletedSteps = [...state.stepsCompleted];
+  const stepsExpanded = { ...state.stepsExpanded };
+
+  if (!newCompletedSteps.includes("get-started") && id !== "get-started") {
+    newCompletedSteps.push("get-started");
+  }
+
+  newCompletedSteps.push(id);
+
+  if (stepsExpanded[id]) {
+    delete stepsExpanded[id];
+  }
+
+  return {
+    ...state,
+    stepsExpanded,
+    stepsCompleted: newCompletedSteps,
+  };
+};
+
+export const handleStateChangeAfterToggle = (
+  state: OnboardingState,
+  expandedId: OnboardingStepsIDs,
+  id: string,
+): OnboardingState => {
+  const stepsExpanded = { ...state.stepsExpanded };
+
+  for (const key in stepsExpanded) {
+    if (stepsExpanded[key as OnboardingStepsIDs]) {
+      delete stepsExpanded[key as OnboardingStepsIDs];
+    }
+  }
+
+  stepsExpanded[expandedId as OnboardingStepsIDs] = id !== "";
+
+  return {
+    ...state,
+    stepsExpanded,
+  };
+};
+
+export const getFirstExpanderStepId = (onboardingState: OnboardingState) => {
+  const stepsExpandedEntries = Object.entries(onboardingState.stepsExpanded);
+
+  return (stepsExpandedEntries.find(isEntryValueTrue)?.[0] ?? "") as OnboardingStepsIDs;
+};
+
+export const getFirstNotCompletedAndNotExpandedStep = (
+  onboardingState: OnboardingState,
+  visibleSteps: OnboardingStep[],
+): OnboardingStepsIDs | "" => {
+  const stepsWithState = visibleSteps.map(toStepWithClientState(onboardingState));
+
+  return stepsWithState.find(isStepNotCompletedAndNotCollapsed)?.id ?? "";
+};
+
+export const getNextStepToExpand = (
+  onboardingState: OnboardingState,
+  visibleSteps: OnboardingStep[],
+): OnboardingStepsIDs | "" => {
+  const lastCompletedStepId =
+    onboardingState.stepsCompleted[onboardingState.stepsCompleted.length - 1];
+
+  const stepsWithState = visibleSteps.map(toStepWithClientState(onboardingState));
+
+  const stepIndex = stepsWithState.findIndex(byStepId(lastCompletedStepId));
+
+  if (stepIndex === -1 || stepIndex === stepsWithState.length - 1) {
+    return "";
+  }
+
+  return stepsWithState.slice(stepIndex + 1).find(isStepNotCompletedAndNotCollapsed)?.id ?? "";
+};
+
+export const METADATA_KEY = "onboarding";
+
+export const prepareUserMetadata = (
+  metadata: MetadataInput[] | undefined,
+  onboardingState: OnboardingState,
+) => {
+  const userMetadata: MetadataInput[] = metadata?.map(cloneMetadata) ?? [];
+  const metadataValue = JSON.stringify(onboardingState);
+  const metadataIndex = userMetadata.findIndex(byKey(METADATA_KEY));
+
+  if (metadataIndex !== -1) {
+    userMetadata[metadataIndex] = {
+      key: METADATA_KEY,
+      value: metadataValue,
+    };
+  } else {
+    userMetadata.push({
+      key: METADATA_KEY,
+      value: metadataValue,
+    });
+  }
+
+  return userMetadata;
+};
diff --git a/src/welcomePage/WelcomePageSidebar/WelcmePageSidebar.test.tsx b/src/welcomePage/WelcomePageSidebar/WelcmePageSidebar.test.tsx
new file mode 100644
index 00000000000..7a0cb52dfc9
--- /dev/null
+++ b/src/welcomePage/WelcomePageSidebar/WelcmePageSidebar.test.tsx
@@ -0,0 +1,127 @@
+import { useUserPermissions } from "@dashboard/auth/hooks/useUserPermissions";
+import { channelsList } from "@dashboard/channels/fixtures";
+import { type ChannelFragment, PermissionEnum } from "@dashboard/graphql";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { activities } from "../fixtures";
+import { WelcomePageSidebar } from "./WelcomePageSidebar";
+
+jest.mock("@dashboard/auth/hooks/useUserPermissions");
+jest.mock("./components/WelcomePageActivities/useWelcomePageActivities", () => ({
+  useWelcomePageActivities: jest.fn(() => ({ activities, loading: false })),
+}));
+jest.mock("./components/WelcomePageSalesAnalytics/useWelcomePageSalesAnalytics", () => ({
+  useWelcomePageSalesAnalytics: jest.fn(() => ({
+    analytics: {
+      sales: {
+        amount: 1000,
+        currency: "USD",
+      },
+    },
+    loading: false,
+  })),
+}));
+jest.mock("./components/WelcomePageStocksAnalytics/useWelcomePageStocksAnalytics", () => ({
+  useWelcomePageStocksAnalytics: jest.fn(() => ({
+    analytics: {
+      productsOutOfStock: 10,
+    },
+    loading: false,
+  })),
+}));
+
+jest.mock("@dashboard/hooks/useNotifier", () => ({
+  useNotifier: jest.fn(() => () => undefined),
+}));
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+describe("WelcomePageSidebar", () => {
+  it("should render chanel select, analytics and activities when user has permission to manage orders ", async () => {
+    // Arrange
+    (useUserPermissions as jest.Mock).mockReturnValue([{ code: PermissionEnum.MANAGE_ORDERS }]);
+
+    const channel = channelsList[0] as ChannelFragment;
+    const setChannel = jest.fn();
+
+    render(
+      <WelcomePageSidebar
+        channel={channel}
+        setChannel={setChannel}
+        channels={channelsList}
+        hasPermissionToManageOrders={true}
+      />,
+    );
+
+    // Assert
+    expect(screen.getByTestId("app-channel-select")).toBeInTheDocument();
+
+    // Check sales analytics
+    expect(screen.getByTestId("sales-analytics")).toHaveTextContent("1,000.00");
+    expect(screen.getByTestId("sales-analytics")).toHaveTextContent("USD");
+
+    // Check out-of-stock analytics
+    expect(screen.getByTestId("out-of-stock-analytics")).toHaveTextContent("10");
+
+    // Check activities
+    expect(screen.getByTestId("activity-card")).toBeInTheDocument();
+    expect(
+      screen.getByText("Order #{orderId} was placed from draft by {userEmail}"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Order #{orderId} was fully paid")).toBeInTheDocument();
+  });
+
+  it("should render only channel select when user has no permission to manage orders ", async () => {
+    // Arrange
+    (useUserPermissions as jest.Mock).mockReturnValue([]);
+
+    const channel = channelsList[0] as ChannelFragment;
+    const setChannel = jest.fn();
+
+    render(
+      <WelcomePageSidebar
+        channel={channel}
+        setChannel={setChannel}
+        channels={channelsList}
+        hasPermissionToManageOrders={false}
+      />,
+    );
+
+    // Assert
+    expect(screen.getByTestId("app-channel-select")).toBeInTheDocument();
+    expect(screen.queryByTestId("sales-analytics")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("out-of-stock-analytics")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("activity-card")).not.toBeInTheDocument();
+  });
+
+  it("should allow to change channel", async () => {
+    // Arrange
+    const channel = channelsList[0] as ChannelFragment;
+    const setChannel = jest.fn();
+
+    render(
+      <WelcomePageSidebar
+        channel={channel}
+        setChannel={setChannel}
+        channels={channelsList}
+        hasPermissionToManageOrders={true}
+      />,
+    );
+
+    // Act
+
+    await act(async () => {
+      await userEvent.click(screen.getByRole("combobox"));
+    });
+
+    await act(async () => {
+      await userEvent.click(screen.getAllByTestId("select-option")[1]);
+    });
+
+    // Assert
+    expect(setChannel).toHaveBeenCalledWith(channelsList[1].id);
+  });
+});
diff --git a/src/welcomePage/WelcomePageSidebar/WelcomePageSidebar.tsx b/src/welcomePage/WelcomePageSidebar/WelcomePageSidebar.tsx
new file mode 100644
index 00000000000..658af9451f1
--- /dev/null
+++ b/src/welcomePage/WelcomePageSidebar/WelcomePageSidebar.tsx
@@ -0,0 +1,53 @@
+import AppChannelSelect from "@dashboard/components/AppLayout/AppChannelSelect";
+import { DashboardCard } from "@dashboard/components/Card";
+import RequirePermissions from "@dashboard/components/RequirePermissions";
+import { type ChannelFragment, PermissionEnum } from "@dashboard/graphql";
+import { Box, Text } from "@saleor/macaw-ui-next";
+import { FormattedMessage } from "react-intl";
+
+import { WelcomePageActivities } from "./components/WelcomePageActivities";
+import { WelcomePageSalesAnalytics } from "./components/WelcomePageSalesAnalytics";
+import { WelcomePageStocksAnalytics } from "./components/WelcomePageStocksAnalytics";
+import { WelcomePageSidebarContextProvider } from "./context/WelcomePageSidebarContextProvider";
+
+interface HomeSidebarProps {
+  channel: ChannelFragment | undefined;
+  setChannel: (channelId: string) => void;
+  channels: ChannelFragment[];
+  hasPermissionToManageOrders: boolean;
+}
+
+export const WelcomePageSidebar = (props: HomeSidebarProps) => {
+  return (
+    <WelcomePageSidebarContextProvider {...props}>
+      <DashboardCard borderRadius={3} borderWidth={1} borderStyle="solid" borderColor="default1">
+        <DashboardCard.Header gap={3} display="flex" flexWrap="wrap">
+          <DashboardCard.Title>
+            <Text size={8}>
+              <FormattedMessage
+                defaultMessage="Your store info"
+                id="x0wum5"
+                description="home sidebar card title"
+              />
+            </Text>
+          </DashboardCard.Title>
+
+          <AppChannelSelect
+            channels={props.channels}
+            selectedChannelId={props.channel?.id ?? ""}
+            onChannelSelect={props.setChannel}
+          />
+        </DashboardCard.Header>
+        <DashboardCard.Content>
+          <RequirePermissions requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}>
+            <Box display="grid" gap={5} marginBottom={7}>
+              <WelcomePageSalesAnalytics />
+              <WelcomePageStocksAnalytics />
+            </Box>
+          </RequirePermissions>
+          <WelcomePageActivities />
+        </DashboardCard.Content>
+      </DashboardCard>
+    </WelcomePageSidebarContextProvider>
+  );
+};
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/WelcomePageActivities.tsx b/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/WelcomePageActivities.tsx
new file mode 100644
index 00000000000..39719665875
--- /dev/null
+++ b/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/WelcomePageActivities.tsx
@@ -0,0 +1,106 @@
+import { DashboardCard } from "@dashboard/components/Card";
+import { DateTime } from "@dashboard/components/Date/DateTime";
+import { renderCollection } from "@dashboard/misc";
+import { Box, List, Skeleton, Text } from "@saleor/macaw-ui-next";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import { useWelcomePageSidebarContext } from "../../context/welcomePageSidebarContext";
+import { getActivityMessage } from "./activityMessages";
+import { useWelcomePageActivities } from "./useWelcomePageActivities";
+
+export const WelcomePageActivities = () => {
+  const intl = useIntl();
+  const { hasPermissionToManageOrders } = useWelcomePageSidebarContext();
+  const { activities, loading, hasError } = useWelcomePageActivities();
+
+  const title = intl.formatMessage({
+    id: "BXkF8Z",
+    defaultMessage: "Activity",
+    description: "header",
+  });
+
+  if (!hasPermissionToManageOrders || !activities) {
+    return null;
+  }
+
+  if (hasError) {
+    return (
+      <DashboardCard data-test-id="activity-card">
+        <DashboardCard.Header paddingX={3}>
+          <DashboardCard.Title>{title}</DashboardCard.Title>
+        </DashboardCard.Header>
+        <DashboardCard.Content paddingX={3}>
+          <Text color="default2">
+            <FormattedMessage id="/U8FUp" defaultMessage="Couldn't load activities" />
+          </Text>
+        </DashboardCard.Content>
+      </DashboardCard>
+    );
+  }
+
+  if (loading) {
+    return (
+      <DashboardCard data-test-id="activity-card">
+        <DashboardCard.Header paddingX={3}>
+          <DashboardCard.Title>{title}</DashboardCard.Title>
+        </DashboardCard.Header>
+        <DashboardCard.Content paddingX={3} paddingBottom={6}>
+          <Box display="flex" flexDirection="column" gap={5}>
+            <Skeleton height={3} />
+            <Skeleton __width="80%" height={3} />
+            <Skeleton height={3} />
+          </Box>
+        </DashboardCard.Content>
+      </DashboardCard>
+    );
+  }
+
+  return (
+    <DashboardCard data-test-id="activity-card">
+      <DashboardCard.Header paddingX={3}>
+        <DashboardCard.Title>{title}</DashboardCard.Title>
+      </DashboardCard.Header>
+      <DashboardCard.Content paddingX={3} paddingBottom={5}>
+        <List>
+          {renderCollection(
+            activities,
+            (activity, activityId) => (
+              <List.Item
+                key={activityId}
+                flexDirection="column"
+                alignItems="flex-start"
+                cursor="auto"
+                paddingY={1}
+                marginBottom={3}
+                backgroundColor={{
+                  default: "transparent",
+                  hover: "default1Hovered",
+                }}
+              >
+                {activity ? (
+                  <>
+                    <Text size={3}>{getActivityMessage(activity, intl)}</Text>
+                    <Text size={3} color="default2">
+                      <DateTime date={activity.date} plain />
+                    </Text>
+                  </>
+                ) : (
+                  <Box paddingY={4}>
+                    <Skeleton />
+                  </Box>
+                )}
+              </List.Item>
+            ),
+            () => (
+              <Box paddingY={4}>
+                <Text size={3}>
+                  <FormattedMessage id="wWTUrM" defaultMessage="No activities found" />
+                </Text>
+              </Box>
+            ),
+          )}
+        </List>
+      </DashboardCard.Content>
+    </DashboardCard>
+  );
+};
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/activityMessages.ts b/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/activityMessages.ts
new file mode 100644
index 00000000000..96dbeed3d8f
--- /dev/null
+++ b/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/activityMessages.ts
@@ -0,0 +1,51 @@
+import { OrderEventsEnum, type WelcomePageActivitiesQuery } from "@dashboard/graphql";
+import { defineMessages, type IntlShape } from "react-intl";
+
+const messages = defineMessages({
+  draft: {
+    id: "sjRXXz",
+    defaultMessage: "Order #{orderId} was placed from draft by {userEmail}",
+  },
+  draft_no_email: {
+    id: "BNTZLv",
+    defaultMessage: "Order #{orderId} was placed from draft",
+  },
+  paid: {
+    id: "5SPHkk",
+    defaultMessage: "Order #{orderId} was fully paid",
+  },
+  placed: {
+    id: "0dPP8O",
+    defaultMessage: "Order #{orderId} was placed",
+  },
+});
+
+export const getActivityMessage = (
+  activity: NonNullable<WelcomePageActivitiesQuery["activities"]>["edges"][0]["node"],
+  intl: IntlShape,
+) => {
+  switch (activity.type) {
+    case OrderEventsEnum.ORDER_FULLY_PAID:
+      return intl.formatMessage(messages.paid, {
+        orderId: activity.orderNumber,
+      });
+    case OrderEventsEnum.PLACED:
+      return intl.formatMessage(messages.placed, {
+        orderId: activity.orderNumber,
+      });
+    case OrderEventsEnum.PLACED_FROM_DRAFT:
+      if (activity.user?.email) {
+        return intl.formatMessage(messages.draft, {
+          orderId: activity.orderNumber,
+          userEmail: activity.user?.email,
+        });
+      } else {
+        return intl.formatMessage(messages.draft_no_email, {
+          orderId: activity.orderNumber,
+        });
+      }
+
+    default:
+      return activity.message;
+  }
+};
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/index.ts b/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/index.ts
new file mode 100644
index 00000000000..bc6f56a823c
--- /dev/null
+++ b/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/index.ts
@@ -0,0 +1 @@
+export { WelcomePageActivities } from "./WelcomePageActivities";
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/useWelcomePageActivities.tsx b/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/useWelcomePageActivities.tsx
new file mode 100644
index 00000000000..ff2fc837b7c
--- /dev/null
+++ b/src/welcomePage/WelcomePageSidebar/components/WelcomePageActivities/useWelcomePageActivities.tsx
@@ -0,0 +1,25 @@
+import { useWelcomePageActivitiesQuery } from "@dashboard/graphql";
+import { mapEdgesToItems } from "@dashboard/utils/maps";
+
+import { useWelcomePageSidebarContext } from "../../context/welcomePageSidebarContext";
+
+export const useWelcomePageActivities = () => {
+  const { hasNoChannels, hasPermissionToManageOrders } = useWelcomePageSidebarContext();
+
+  const {
+    data: welcomePageActivities,
+    loading: welcomePageActivitiesLoading,
+    error: welcomePageActivitiesError,
+  } = useWelcomePageActivitiesQuery({
+    skip: hasNoChannels,
+    variables: {
+      hasPermissionToManageOrders,
+    },
+  });
+
+  return {
+    activities: mapEdgesToItems(welcomePageActivities?.activities)?.reverse(),
+    loading: welcomePageActivitiesLoading,
+    hasError: !!welcomePageActivitiesError,
+  };
+};
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageAnalyticsCard.tsx b/src/welcomePage/WelcomePageSidebar/components/WelcomePageAnalyticsCard.tsx
new file mode 100644
index 00000000000..d7fc0704db7
--- /dev/null
+++ b/src/welcomePage/WelcomePageSidebar/components/WelcomePageAnalyticsCard.tsx
@@ -0,0 +1,37 @@
+import { Box, Text } from "@saleor/macaw-ui-next";
+import type * as React from "react";
+import { FormattedMessage } from "react-intl";
+
+interface WelcomePageAnalyticsCardProps {
+  testId?: string;
+  title: string;
+  children?: React.ReactNode;
+}
+
+export const WelcomePageAnalyticsCard = ({
+  children,
+  title,
+  testId,
+}: WelcomePageAnalyticsCardProps) => (
+  <Box
+    borderWidth={1}
+    borderStyle="solid"
+    borderColor="default1"
+    borderRadius={3}
+    paddingX={3}
+    paddingY={5}
+    display="flex"
+    justifyContent="space-between"
+    data-test-id={testId}
+  >
+    <Box display="flex" flexDirection="column" gap={0.5}>
+      <Text size={5}>{title}</Text>
+      <Text size={2} color="default1">
+        <FormattedMessage id="zWgbGg" defaultMessage="Today" />
+      </Text>
+    </Box>
+    <Text as="h4" size={5} fontWeight="bold">
+      {children}
+    </Text>
+  </Box>
+);
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/WelcomePageSalesAnalytics.tsx b/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/WelcomePageSalesAnalytics.tsx
new file mode 100644
index 00000000000..837b5075f7e
--- /dev/null
+++ b/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/WelcomePageSalesAnalytics.tsx
@@ -0,0 +1,30 @@
+import useAppChannel from "@dashboard/components/AppLayout/AppChannelContext";
+import Money from "@dashboard/components/Money";
+import { Skeleton } from "@saleor/macaw-ui-next";
+import { useIntl } from "react-intl";
+
+import { welcomePageMessages } from "../../messages";
+import { WelcomePageAnalyticsCard } from "../WelcomePageAnalyticsCard";
+import { useWelcomePageSalesAnalytics } from "./useWelcomePageSalesAnalytics";
+
+export const WelcomePageSalesAnalytics = () => {
+  const intl = useIntl();
+  const { channel } = useAppChannel();
+  const noChannel = !channel && typeof channel !== "undefined";
+  const { analytics, loading, hasError } = useWelcomePageSalesAnalytics();
+
+  return (
+    <WelcomePageAnalyticsCard
+      title={intl.formatMessage(welcomePageMessages.salesCardTitle)}
+      testId="sales-analytics"
+    >
+      {noChannel || hasError ? (
+        0
+      ) : !loading ? (
+        <Money money={analytics.sales} />
+      ) : (
+        <Skeleton width={10} height={3} />
+      )}
+    </WelcomePageAnalyticsCard>
+  );
+};
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/index.ts b/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/index.ts
new file mode 100644
index 00000000000..58f709c886b
--- /dev/null
+++ b/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/index.ts
@@ -0,0 +1 @@
+export { WelcomePageSalesAnalytics } from "./WelcomePageSalesAnalytics";
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/useWelcomePageSalesAnalytics.ts b/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/useWelcomePageSalesAnalytics.ts
new file mode 100644
index 00000000000..ebf4ba06bc4
--- /dev/null
+++ b/src/welcomePage/WelcomePageSidebar/components/WelcomePageSalesAnalytics/useWelcomePageSalesAnalytics.ts
@@ -0,0 +1,28 @@
+import { useWelcomePageAnalyticsQuery } from "@dashboard/graphql";
+
+import { useWelcomePageSidebarContext } from "../../context/welcomePageSidebarContext";
+
+export const useWelcomePageSalesAnalytics = () => {
+  const { selectedChannel, hasNoChannels, hasPermissionToManageOrders } =
+    useWelcomePageSidebarContext();
+
+  const {
+    data: welcomePageAnalyticsData,
+    loading: welcomePageAnalyticsLoading,
+    error: welcomePageAnalyticsError,
+  } = useWelcomePageAnalyticsQuery({
+    skip: hasNoChannels,
+    variables: {
+      channel: selectedChannel?.slug ?? "",
+      hasPermissionToManageOrders,
+    },
+  });
+
+  return {
+    analytics: {
+      sales: welcomePageAnalyticsData?.salesToday?.gross ?? null,
+    },
+    loading: welcomePageAnalyticsLoading,
+    hasError: !!welcomePageAnalyticsError,
+  };
+};
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/WelcomePageStocksAnalytics.tsx b/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/WelcomePageStocksAnalytics.tsx
new file mode 100644
index 00000000000..cc44e561f19
--- /dev/null
+++ b/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/WelcomePageStocksAnalytics.tsx
@@ -0,0 +1,28 @@
+import { Skeleton } from "@saleor/macaw-ui-next";
+import { useIntl } from "react-intl";
+
+import { useWelcomePageSidebarContext } from "../../context/welcomePageSidebarContext";
+import { welcomePageMessages } from "../../messages";
+import { WelcomePageAnalyticsCard } from "../WelcomePageAnalyticsCard";
+import { useWelcomePageStocksAnalytics } from "./useWelcomePageStocksAnalytics";
+
+export const WelcomePageStocksAnalytics = () => {
+  const intl = useIntl();
+  const { hasNoChannels } = useWelcomePageSidebarContext();
+  const { analytics, loading, hasError } = useWelcomePageStocksAnalytics();
+
+  return (
+    <WelcomePageAnalyticsCard
+      title={intl.formatMessage(welcomePageMessages.outOfStockCardTitle)}
+      testId="out-of-stock-analytics"
+    >
+      {hasNoChannels || hasError ? (
+        0
+      ) : !loading ? (
+        analytics.productsOutOfStock
+      ) : (
+        <Skeleton width={16} height={3} />
+      )}
+    </WelcomePageAnalyticsCard>
+  );
+};
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/index.ts b/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/index.ts
new file mode 100644
index 00000000000..b0a53756e1b
--- /dev/null
+++ b/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/index.ts
@@ -0,0 +1 @@
+export { WelcomePageStocksAnalytics } from "./WelcomePageStocksAnalytics";
diff --git a/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/useWelcomePageStocksAnalytics.ts b/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/useWelcomePageStocksAnalytics.ts
new file mode 100644
index 00000000000..6c718d838c4
--- /dev/null
+++ b/src/welcomePage/WelcomePageSidebar/components/WelcomePageStocksAnalytics/useWelcomePageStocksAnalytics.ts
@@ -0,0 +1,24 @@
+import useAppChannel from "@dashboard/components/AppLayout/AppChannelContext";
+import { useWelcomePageNotificationsQuery } from "@dashboard/graphql";
+
+export const useWelcomePageStocksAnalytics = () => {
+  const { channel } = useAppChannel();
+  const noChannel = !channel && typeof channel !== "undefined";
+
+  const {
+    data: welcomePageNotificationsData,
+    loading: welcomePageNotificationsLoading,
+    error: welcomePageNotificationsError,
+  } = useWelcomePageNotificationsQuery({
+    skip: noChannel,
+    variables: { channel: channel?.slug },
+  });
+
+  return {
+    analytics: {
+      productsOutOfStock: welcomePageNotificationsData?.productsOutOfStock?.totalCount ?? 0,
+    },
+    loading: welcomePageNotificationsLoading,
+    hasError: !!welcomePageNotificationsError,
+  };
+};
diff --git a/src/welcomePage/WelcomePageSidebar/context/WelcomePageSidebarContextProvider.tsx b/src/welcomePage/WelcomePageSidebar/context/WelcomePageSidebarContextProvider.tsx
new file mode 100644
index 00000000000..929ab9e899c
--- /dev/null
+++ b/src/welcomePage/WelcomePageSidebar/context/WelcomePageSidebarContextProvider.tsx
@@ -0,0 +1,36 @@
+import { type ChannelFragment } from "@dashboard/graphql";
+import type * as React from "react";
+
+import { WelcomePageSidebarContext } from "./welcomePageSidebarContext";
+
+interface WelcomePageSidebarContextProviderProps {
+  children: React.ReactNode;
+  channel: ChannelFragment | undefined;
+  setChannel: (channelId: string) => void;
+  channels: ChannelFragment[];
+  hasPermissionToManageOrders: boolean;
+}
+
+export const WelcomePageSidebarContextProvider = ({
+  children,
+  channel,
+  setChannel,
+  channels,
+  hasPermissionToManageOrders,
+}: WelcomePageSidebarContextProviderProps) => {
+  const hasNoChannels = !channel && typeof channel !== "undefined";
+
+  return (
+    <WelcomePageSidebarContext.Provider
+      value={{
+        selectedChannel: channel,
+        setChannel,
+        channels,
+        hasNoChannels,
+        hasPermissionToManageOrders,
+      }}
+    >
+      {children}
+    </WelcomePageSidebarContext.Provider>
+  );
+};
diff --git a/src/welcomePage/WelcomePageSidebar/context/welcomePageSidebarContext.ts b/src/welcomePage/WelcomePageSidebar/context/welcomePageSidebarContext.ts
new file mode 100644
index 00000000000..f1d4f07a06c
--- /dev/null
+++ b/src/welcomePage/WelcomePageSidebar/context/welcomePageSidebarContext.ts
@@ -0,0 +1,24 @@
+import { type ChannelFragment } from "@dashboard/graphql";
+import { createContext, useContext } from "react";
+
+export interface WelcomePageSidebarContext {
+  selectedChannel: ChannelFragment | undefined;
+  setChannel: (channelId: string) => void;
+  channels: ChannelFragment[];
+  hasNoChannels: boolean;
+  hasPermissionToManageOrders: boolean;
+}
+
+export const WelcomePageSidebarContext = createContext<WelcomePageSidebarContext | null>(null);
+
+export const useWelcomePageSidebarContext = () => {
+  const context = useContext(WelcomePageSidebarContext);
+
+  if (!context) {
+    throw new Error(
+      "WelcomePageSidebarContext is null. Make sure your component is wrapped in a <WelcomePageSidebarContext.Provider>",
+    );
+  }
+
+  return context;
+};
diff --git a/src/welcomePage/WelcomePageSidebar/index.ts b/src/welcomePage/WelcomePageSidebar/index.ts
new file mode 100644
index 00000000000..7f2516cffdf
--- /dev/null
+++ b/src/welcomePage/WelcomePageSidebar/index.ts
@@ -0,0 +1 @@
+export { WelcomePageSidebar } from "./WelcomePageSidebar";
diff --git a/src/welcomePage/WelcomePageSidebar/messages.ts b/src/welcomePage/WelcomePageSidebar/messages.ts
new file mode 100644
index 00000000000..0e11eb8755f
--- /dev/null
+++ b/src/welcomePage/WelcomePageSidebar/messages.ts
@@ -0,0 +1,12 @@
+import { defineMessages } from "react-intl";
+
+export const welcomePageMessages = defineMessages({
+  salesCardTitle: {
+    defaultMessage: "Sales",
+    id: "c8nvms",
+  },
+  outOfStockCardTitle: {
+    defaultMessage: "Out of stock",
+    id: "WHgdsk",
+  },
+});
diff --git a/src/welcomePage/WelcomePageTilesContainer/WelcomePageInfoTile.tsx b/src/welcomePage/WelcomePageTilesContainer/WelcomePageInfoTile.tsx
new file mode 100644
index 00000000000..89736d08ed1
--- /dev/null
+++ b/src/welcomePage/WelcomePageTilesContainer/WelcomePageInfoTile.tsx
@@ -0,0 +1,44 @@
+import { DashboardCard } from "@dashboard/components/Card";
+import { type BoxProps } from "@saleor/macaw-ui-next";
+import type * as React from "react";
+
+export type WelcomePageInfoTileProps = {
+  id: string;
+  header: React.ReactNode;
+  content: React.ReactNode;
+  bottomActions: React.ReactNode;
+} & Omit<BoxProps, "content">;
+
+export const WelcomePageInfoTile = ({
+  id,
+  bottomActions,
+  content,
+  header,
+  ...props
+}: WelcomePageInfoTileProps) => (
+  <DashboardCard
+    backgroundColor="default1"
+    borderStyle="solid"
+    borderColor="default1"
+    borderRadius={3}
+    borderWidth={1}
+    display="flex"
+    flexDirection="column"
+    gap={4}
+    key={id}
+    margin={0}
+    {...props}
+  >
+    <DashboardCard.Header>
+      <DashboardCard.Title display="flex" alignItems="center" gap={3}>
+        {header}
+      </DashboardCard.Title>
+    </DashboardCard.Header>
+
+    <DashboardCard.Content>{content}</DashboardCard.Content>
+
+    <DashboardCard.BottomActions paddingTop={2} marginTop="auto">
+      {bottomActions}
+    </DashboardCard.BottomActions>
+  </DashboardCard>
+);
diff --git a/src/welcomePage/WelcomePageTilesContainer/WelcomePageTilesContainer.tsx b/src/welcomePage/WelcomePageTilesContainer/WelcomePageTilesContainer.tsx
new file mode 100644
index 00000000000..3156c18f4a3
--- /dev/null
+++ b/src/welcomePage/WelcomePageTilesContainer/WelcomePageTilesContainer.tsx
@@ -0,0 +1,32 @@
+import { useAnalytics } from "@dashboard/components/ProductAnalytics/useAnalytics";
+import { Box } from "@saleor/macaw-ui-next";
+import { useIntl } from "react-intl";
+
+import { getTilesData } from "./tileData";
+import { WelcomePageInfoTile } from "./WelcomePageInfoTile";
+
+export const WelcomePageTilesContainer = () => {
+  const intl = useIntl();
+  const analytics = useAnalytics();
+
+  const handleTileButtonClick = (tileId: string) => {
+    analytics.trackEvent("home_tile_click", {
+      tile_id: tileId,
+    });
+  };
+
+  const tiles = getTilesData({ intl, onTileButtonClick: handleTileButtonClick });
+
+  return (
+    <Box
+      display="grid"
+      __gridTemplateColumns="repeat(auto-fill, minmax(min(100%, 400px), 1fr))"
+      gap={6}
+      marginTop={7}
+    >
+      {tiles.map(tile => (
+        <WelcomePageInfoTile key={tile.id} {...tile} />
+      ))}
+    </Box>
+  );
+};
diff --git a/src/welcomePage/WelcomePageTilesContainer/index.ts b/src/welcomePage/WelcomePageTilesContainer/index.ts
new file mode 100644
index 00000000000..9cec726a45c
--- /dev/null
+++ b/src/welcomePage/WelcomePageTilesContainer/index.ts
@@ -0,0 +1 @@
+export { WelcomePageTilesContainer } from "./WelcomePageTilesContainer";
diff --git a/src/welcomePage/WelcomePageTilesContainer/tileData.tsx b/src/welcomePage/WelcomePageTilesContainer/tileData.tsx
new file mode 100644
index 00000000000..aaac5fafc2e
--- /dev/null
+++ b/src/welcomePage/WelcomePageTilesContainer/tileData.tsx
@@ -0,0 +1,231 @@
+import bag from "@assets/images/bag-icon.svg";
+import community from "@assets/images/community-icon.svg";
+import discord from "@assets/images/discord-icon.svg";
+import extension from "@assets/images/extension-icon.svg";
+import github from "@assets/images/github-logo.svg";
+import externalLink from "@assets/images/rounded-external-link-icon.svg";
+import star from "@assets/images/star-icon.svg";
+import { iconSize, iconStrokeWidth } from "@dashboard/components/icons";
+import {
+  APPS_OVERVIEW_DOCS_URL,
+  CHECKOUT_OVERVIEW_DOCS_URL,
+  DASHBOARD_DOCS_URL,
+  SALEOR_DISCORD_URL,
+  SALEOR_GITHUB_URL,
+  TECHNICAL_HELP_CTA_URL,
+} from "@dashboard/links";
+import { Button, Paragraph, sprinkles } from "@saleor/macaw-ui-next";
+import { HelpCircle } from "lucide-react";
+import SVG from "react-inlinesvg";
+import { FormattedMessage, type IntlShape } from "react-intl";
+
+import { type WelcomePageInfoTileProps } from "./WelcomePageInfoTile";
+
+const noShrink = sprinkles({ flexShrink: "0" });
+
+// Headings
+const CommunityIcon = () => <SVG src={community} className={noShrink} />;
+const StarIcon = () => <SVG src={star} className={noShrink} />;
+const ExtensionIcon = () => <SVG src={extension} className={noShrink} />;
+const BagIcon = () => <SVG src={bag} className={noShrink} />;
+
+// Bottom actions
+const GitHubIcon = () => <SVG src={github} className={noShrink} />;
+const DiscordIcon = () => <SVG src={discord} className={noShrink} />;
+const ExternalLinkIcon = () => <SVG src={externalLink} className={noShrink} />;
+
+export const getTilesData = ({
+  intl,
+  onTileButtonClick,
+}: {
+  intl: IntlShape;
+  onTileButtonClick: (tileId: string) => void;
+}): WelcomePageInfoTileProps[] => [
+  {
+    id: "technical-help",
+    header: (
+      <>
+        <HelpCircle size={iconSize.medium} strokeWidth={iconStrokeWidth} />
+        <FormattedMessage defaultMessage="Need technical help?" id="g9HrbF" />
+      </>
+    ),
+    content: (
+      <Paragraph>
+        <FormattedMessage
+          defaultMessage="Save hours of evaluating Saleor on your own by speaking with our solution engineer."
+          id="RABrGb"
+        />
+      </Paragraph>
+    ),
+    bottomActions: (
+      <Button
+        as="a"
+        target="_blank"
+        href={TECHNICAL_HELP_CTA_URL}
+        onClick={() => onTileButtonClick("technical-help")}
+        variant="primary"
+        alignSelf="start"
+      >
+        <FormattedMessage
+          defaultMessage="Get in touch"
+          id="HRXLYk"
+          description="cta button label"
+        />
+      </Button>
+    ),
+  },
+  {
+    id: "dashboard-updates",
+    header: (
+      <>
+        <StarIcon />
+        <FormattedMessage defaultMessage="Recent Dashboard Updates" id="z9f2oQ" />
+      </>
+    ),
+    content: (
+      <Paragraph>
+        <FormattedMessage
+          defaultMessage="Discover the latest enhancements, new features, fixes, and performance improvements that make your dashboard experience even better."
+          id="swOKYO"
+        />
+      </Paragraph>
+    ),
+    bottomActions: (
+      <Button
+        as="a"
+        target="_blank"
+        href={DASHBOARD_DOCS_URL}
+        onClick={() => onTileButtonClick("dashboard-updates")}
+        variant="secondary"
+        alignSelf="start"
+      >
+        <FormattedMessage
+          defaultMessage="Explore Updates"
+          id="zp9VHt"
+          description="cta button label"
+        />
+        <ExternalLinkIcon />
+      </Button>
+    ),
+  },
+  {
+    id: "saleor-app-store",
+    header: (
+      <>
+        <ExtensionIcon />
+        <FormattedMessage defaultMessage="Explore Saleor App Store" id="/H9LeU" />
+      </>
+    ),
+    content: (
+      <Paragraph>
+        <FormattedMessage
+          defaultMessage="Add new functionalities on top of Saleor and integrate it with third-party services. They can be installed, managed, and rendered in here in Saleor Dashboard."
+          id="XVQpjm"
+        />
+      </Paragraph>
+    ),
+    bottomActions: (
+      <Button
+        as="a"
+        target="_blank"
+        href={APPS_OVERVIEW_DOCS_URL}
+        variant="secondary"
+        alignSelf="start"
+        onClick={() => onTileButtonClick("saleor-app-store")}
+      >
+        <FormattedMessage
+          defaultMessage="View Documentation"
+          id="a+WuZg"
+          description="cta button label"
+        />
+        <ExternalLinkIcon />
+      </Button>
+    ),
+  },
+  {
+    id: "learn-checkout",
+    header: (
+      <>
+        <BagIcon />
+        <FormattedMessage defaultMessage="Learn Saleor checkout process flow" id="Cc3Z40" />
+      </>
+    ),
+    content: (
+      <Paragraph>
+        <FormattedMessage
+          defaultMessage="Full coverage of advanced checkout cases like split payments, split fulfillments, and orchestrated payments."
+          id="RBkNPr"
+        />
+      </Paragraph>
+    ),
+    bottomActions: (
+      <Button
+        as="a"
+        target="_blank"
+        href={CHECKOUT_OVERVIEW_DOCS_URL}
+        variant="secondary"
+        alignSelf="start"
+        onClick={() => onTileButtonClick("learn-checkout")}
+      >
+        <FormattedMessage
+          defaultMessage="View Documentation"
+          id="a+WuZg"
+          description="cta button label"
+        />
+        <ExternalLinkIcon />
+      </Button>
+    ),
+  },
+  {
+    id: "community",
+    header: (
+      <>
+        <CommunityIcon />
+        <FormattedMessage defaultMessage="Join the open source community" id="Wk00wL" />
+      </>
+    ),
+    content: (
+      <Paragraph>
+        <FormattedMessage
+          defaultMessage="Join our OS community of industry experts and learn more about open source at Saleor."
+          id="Tp5T7U"
+        />
+      </Paragraph>
+    ),
+    bottomActions: (
+      <>
+        <Button
+          as="a"
+          target="_blank"
+          href={SALEOR_GITHUB_URL}
+          onClick={() => onTileButtonClick("community-github")}
+          variant="secondary"
+          alignSelf="start"
+          marginTop="auto"
+        >
+          <GitHubIcon />
+          {intl.formatMessage({
+            defaultMessage: "GitHub",
+            id: "wO9wb5",
+          })}
+        </Button>
+
+        <Button
+          as="a"
+          target="_blank"
+          href={SALEOR_DISCORD_URL}
+          onClick={() => onTileButtonClick("community-discord")}
+          variant="secondary"
+          alignSelf="start"
+          marginTop="auto"
+        >
+          <DiscordIcon />
+          {intl.formatMessage({
+            defaultMessage: "Discord",
+            id: "FvmV6q",
+          })}
+        </Button>
+      </>
+    ),
+  },
+];
diff --git a/src/welcomePage/WelcomePageTitle.tsx b/src/welcomePage/WelcomePageTitle.tsx
new file mode 100644
index 00000000000..262f7e6ba0b
--- /dev/null
+++ b/src/welcomePage/WelcomePageTitle.tsx
@@ -0,0 +1,21 @@
+import { useUser } from "@dashboard/auth/useUser";
+import { getUserName } from "@dashboard/misc";
+import { Text } from "@saleor/macaw-ui-next";
+import { FormattedMessage } from "react-intl";
+
+export const WelcomePageTitle = () => {
+  const { user } = useUser();
+  const userName = getUserName(user, true);
+
+  return (
+    <Text as="h1" size={9} data-test-id="home-header">
+      <FormattedMessage
+        defaultMessage="Hello {userName}, welcome to your Store Dashboard"
+        id="0+zatS"
+        values={{
+          userName,
+        }}
+      />
+    </Text>
+  );
+};
diff --git a/src/welcomePage/fixtures.ts b/src/welcomePage/fixtures.ts
new file mode 100644
index 00000000000..241cd25671c
--- /dev/null
+++ b/src/welcomePage/fixtures.ts
@@ -0,0 +1,22 @@
+import { type ActivitiesFragment, OrderEventsEnum } from "@dashboard/graphql";
+
+export const activities = [
+  {
+    date: "2024-06-17T09:54:02.215733+00:00",
+    email: null,
+    message: null,
+    orderNumber: "3268",
+    type: OrderEventsEnum.PLACED_FROM_DRAFT,
+    user: {
+      email: "renata.gajzlerowicz@saleor.io",
+    },
+  },
+  {
+    date: "2024-06-17T09:56:22.893415+00:00",
+    email: null,
+    message: null,
+    orderNumber: "3268",
+    type: OrderEventsEnum.ORDER_FULLY_PAID,
+    user: null,
+  },
+] as ActivitiesFragment[];
diff --git a/src/welcomePage/index.ts b/src/welcomePage/index.ts
new file mode 100644
index 00000000000..f14245a9d75
--- /dev/null
+++ b/src/welcomePage/index.ts
@@ -0,0 +1 @@
+export { WelcomePage } from "./WelcomePage";
diff --git a/src/onboarding/mutations.ts b/src/welcomePage/mutations.ts
similarity index 100%
rename from src/onboarding/mutations.ts
rename to src/welcomePage/mutations.ts
diff --git a/src/welcomePage/queries.ts b/src/welcomePage/queries.ts
new file mode 100644
index 00000000000..d3e79838fb6
--- /dev/null
+++ b/src/welcomePage/queries.ts
@@ -0,0 +1,33 @@
+import { gql } from "@apollo/client";
+
+export const welcomePageActivities = gql`
+  query WelcomePageActivities($hasPermissionToManageOrders: Boolean!) {
+    activities: homepageEvents(last: 10) @include(if: $hasPermissionToManageOrders) {
+      edges {
+        node {
+          ...Activities
+        }
+      }
+    }
+  }
+`;
+
+export const welcomePageAnalytics = gql`
+  query WelcomePageAnalytics($channel: String!, $hasPermissionToManageOrders: Boolean!) {
+    salesToday: ordersTotal(period: TODAY, channel: $channel)
+      @include(if: $hasPermissionToManageOrders) {
+      gross {
+        amount
+        currency
+      }
+    }
+  }
+`;
+
+export const welcomePageNotifications = gql`
+  query welcomePageNotifications($channel: String!) {
+    productsOutOfStock: products(filter: { stockAvailability: OUT_OF_STOCK }, channel: $channel) {
+      totalCount
+    }
+  }
+`;

From 853fa2611b85aeae196b9b42b2c322337210a919 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Thu, 7 May 2026 08:58:45 +0200
Subject: [PATCH 10/18] fix validation

---
 .../app-extension-manifest-options.test.ts    | 39 ++++++++++++++++---
 .../domain/app-extension-manifest-options.ts  | 12 ++++++
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/src/extensions/domain/app-extension-manifest-options.test.ts b/src/extensions/domain/app-extension-manifest-options.test.ts
index 85778aba897..49397d79f64 100644
--- a/src/extensions/domain/app-extension-manifest-options.test.ts
+++ b/src/extensions/domain/app-extension-manifest-options.test.ts
@@ -300,9 +300,9 @@ describe("App Extension Manifest Options Schema", () => {
       }
     });
 
-    it("should allow homeWidget to coexist with widgetTarget", () => {
+    it("should reject homeWidget when set together with widgetTarget", () => {
       // Arrange
-      const validData = {
+      const invalidData = {
         widgetTarget: {
           method: "POST",
         },
@@ -313,13 +313,40 @@ describe("App Extension Manifest Options Schema", () => {
       };
 
       // Act
-      const result = appExtensionManifestOptionsSchema.safeParse(validData);
+      const result = appExtensionManifestOptionsSchema.safeParse(invalidData);
 
       // Assert
-      expect(result.success).toBe(true);
+      expect(result.success).toBe(false);
 
-      if (result.success) {
-        expect(result.data).toEqual(validData);
+      if (!result.success) {
+        expect(result.error.issues[0].message).toBe(
+          "When 'homeWidget' is set, 'newTabTarget' and 'widgetTarget' cannot be set.",
+        );
+      }
+    });
+
+    it("should reject homeWidget when set together with newTabTarget", () => {
+      // Arrange
+      const invalidData = {
+        newTabTarget: {
+          method: "GET",
+        },
+        homeWidget: {
+          method: "GET",
+          fullscreen: false,
+        },
+      };
+
+      // Act
+      const result = appExtensionManifestOptionsSchema.safeParse(invalidData);
+
+      // Assert
+      expect(result.success).toBe(false);
+
+      if (!result.success) {
+        expect(result.error.issues[0].message).toBe(
+          "When 'homeWidget' is set, 'newTabTarget' and 'widgetTarget' cannot be set.",
+        );
       }
     });
   });
diff --git a/src/extensions/domain/app-extension-manifest-options.ts b/src/extensions/domain/app-extension-manifest-options.ts
index c29e93cfc68..46573ec117b 100644
--- a/src/extensions/domain/app-extension-manifest-options.ts
+++ b/src/extensions/domain/app-extension-manifest-options.ts
@@ -31,6 +31,18 @@ export const appExtensionManifestOptionsSchema = z
     {
       message: "Only one of 'newTabTarget' or 'widgetTarget' can be set.",
     },
+  )
+  .refine(
+    data => {
+      if (data.homeWidget && (data.newTabTarget || data.widgetTarget)) {
+        return false;
+      }
+
+      return true;
+    },
+    {
+      message: "When 'homeWidget' is set, 'newTabTarget' and 'widgetTarget' cannot be set.",
+    },
   );
 
 export const appExtensionManifestOptionsSchemaWithDefault =

From 92c61deec843c06f7fa0fabbf4679e577442427a Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Thu, 7 May 2026 09:12:18 +0200
Subject: [PATCH 11/18] locales

---
 locale/defaultMessages.json | 12 ++++++++++++
 src/home/HomePage.tsx       | 14 ++++++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index 7bb5fac6bdb..8f2d00dc861 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -7383,6 +7383,10 @@
     "context": "fulfillment status refunded",
     "string": "Refunded"
   },
+  "cxUBO1": {
+    "context": "empty home page description",
+    "string": "Install an app that registers a HOMEPAGE_WIDGETS extension to see it here."
+  },
   "cy8sV7": {
     "context": "volume units types",
     "string": "Volume"
@@ -7708,6 +7712,10 @@
     "context": "tooltip for taxes amount",
     "string": "Tax amount"
   },
+  "fTLvHX": {
+    "context": "empty home page title",
+    "string": "Welcome"
+  },
   "fU+a9k": {
     "context": "date attribute type",
     "string": "Date"
@@ -9731,6 +9739,10 @@
   "qkUBLC": {
     "string": "See logs"
   },
+  "qkaF5G": {
+    "context": "Label of the home page tab grouping non-fullscreen widget extensions",
+    "string": "Widgets"
+  },
   "qkt/Km": {
     "context": "bulk delete label",
     "string": "Delete"
diff --git a/src/home/HomePage.tsx b/src/home/HomePage.tsx
index d4a9307ad8b..7ced08b892f 100644
--- a/src/home/HomePage.tsx
+++ b/src/home/HomePage.tsx
@@ -46,10 +46,20 @@ export const HomePage = () => {
     return (
       <Box paddingX={8} paddingY={9}>
         <Text size={6} fontWeight="bold">
-          Welcome
+          <FormattedMessage
+            id="fTLvHX"
+            defaultMessage="Welcome"
+            description="empty home page title"
+          />
         </Text>
         <Box marginTop={4}>
-          <Text>Install an app that registers a HOMEPAGE_WIDGETS extension to see it here.</Text>
+          <Text>
+            <FormattedMessage
+              id="cxUBO1"
+              defaultMessage="Install an app that registers a HOMEPAGE_WIDGETS extension to see it here."
+              description="empty home page description"
+            />
+          </Text>
         </Box>
       </Box>
     );

From 2b16d28e8eb3b5dde7c92619fa84016a40d80837 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Thu, 7 May 2026 10:07:30 +0200
Subject: [PATCH 12/18] fix route

---
 src/home/HomePage.test.tsx | 87 ++++++++++++++++++++++++++++++++++++++
 src/home/HomePage.tsx      | 25 ++++++++---
 2 files changed, 106 insertions(+), 6 deletions(-)
 create mode 100644 src/home/HomePage.test.tsx

diff --git a/src/home/HomePage.test.tsx b/src/home/HomePage.test.tsx
new file mode 100644
index 00000000000..789b0b570c7
--- /dev/null
+++ b/src/home/HomePage.test.tsx
@@ -0,0 +1,87 @@
+import { renderHook } from "@testing-library/react";
+import type React from "react";
+import { MemoryRouter, Route } from "react-router-dom";
+
+import { useHomeRouteParams } from "./HomePage";
+import { homeWidgetsUrl, homeWidgetUrl } from "./urls";
+
+const renderRouteHook = (initialPath: string) =>
+  renderHook(() => useHomeRouteParams(), {
+    wrapper: ({ children }: { children?: React.ReactNode }) => (
+      <MemoryRouter initialEntries={[initialPath]}>
+        <Route path={["/home/widget/:extensionId", "/home/widgets", "/home"]}>{children}</Route>
+      </MemoryRouter>
+    ),
+  });
+
+describe("useHomeRouteParams", () => {
+  it("returns undefined extensionId and isWidgetsRoute=false on bare /home", () => {
+    // Arrange & Act
+    const { result } = renderRouteHook("/home");
+
+    // Assert
+    expect(result.current.extensionId).toBeUndefined();
+    expect(result.current.isWidgetsRoute).toBe(false);
+  });
+
+  it("flags isWidgetsRoute=true on /home/widgets", () => {
+    // Arrange & Act
+    const { result } = renderRouteHook(homeWidgetsUrl());
+
+    // Assert
+    expect(result.current.isWidgetsRoute).toBe(true);
+    expect(result.current.extensionId).toBeUndefined();
+  });
+
+  it("decodes a plain extensionId from the URL", () => {
+    // Arrange
+    const id = "app-123";
+
+    // Act
+    const { result } = renderRouteHook(homeWidgetUrl(id));
+
+    // Assert
+    expect(result.current.extensionId).toBe(id);
+    expect(result.current.isWidgetsRoute).toBe(false);
+  });
+
+  it("round-trips a base64-style global ID containing '+', '/', and '='", () => {
+    // Arrange - shape of a typical Saleor global ID. These chars are URI-reserved,
+    // so the history library's decodeURI does not touch them; the hook's
+    // decodeURIComponent has to finish the job.
+    const id = "QXBwRXh0ZW5zaW9uOjE+/=";
+
+    // Act
+    const { result } = renderRouteHook(homeWidgetUrl(id));
+
+    // Assert
+    expect(result.current.extensionId).toBe(id);
+  });
+
+  it("decodes URL-encoded spaces correctly without double-decoding", () => {
+    // Arrange - guards against decoding twice. A single space "%20" should
+    // come back as " ", not as something else.
+    const id = "app id with spaces";
+
+    // Act
+    const { result } = renderRouteHook(homeWidgetUrl(id));
+
+    // Assert
+    expect(result.current.extensionId).toBe(id);
+    expect(result.current.extensionId).not.toContain("%20");
+  });
+
+  it("does not strip the encoded portion of a base64 global ID (single decode pass)", () => {
+    // Arrange - regression guard: if we accidentally skipped decoding, the ID
+    // would still contain "%2B" / "%3D" sequences instead of "+"/"=".
+    const id = "QXBwRXh0ZW5zaW9uOjE=";
+
+    // Act
+    const { result } = renderRouteHook(homeWidgetUrl(id));
+
+    // Assert
+    expect(result.current.extensionId).toBe(id);
+    expect(result.current.extensionId).not.toContain("%3D");
+    expect(result.current.extensionId).not.toContain("%2B");
+  });
+});
diff --git a/src/home/HomePage.tsx b/src/home/HomePage.tsx
index 7ced08b892f..b97a1a34e36 100644
--- a/src/home/HomePage.tsx
+++ b/src/home/HomePage.tsx
@@ -16,6 +16,21 @@ import { homeWidgetsUrl, homeWidgetUrl } from "./urls";
 
 const HOMEPAGE_MOUNT = ["HOMEPAGE_WIDGETS"] as const;
 
+export const useHomeRouteParams = () => {
+  // The URL is built with encodeURIComponent (see homeWidgetUrl). The history library
+  // applies decodeURI to the pathname, which leaves URI-reserved chars (+ / = etc.)
+  // still percent-encoded — those are exactly what Saleor base64 global IDs contain.
+  // We finish the decode here. Assumes IDs never contain a literal '%'.
+  const { extensionId: rawExtensionId } = useParams<{ extensionId?: string }>();
+  const extensionId = rawExtensionId ? decodeURIComponent(rawExtensionId) : undefined;
+  const widgetsRouteMatch = useRouteMatch({ path: "/home/widgets", exact: true });
+
+  return {
+    extensionId,
+    isWidgetsRoute: Boolean(widgetsRouteMatch),
+  };
+};
+
 const resolveLeftmostTabUrl = (
   fullscreen: ReturnType<typeof filterHomeExtensions>["fullscreen"],
   widgets: ReturnType<typeof filterHomeExtensions>["widgets"],
@@ -32,9 +47,7 @@ const resolveLeftmostTabUrl = (
 };
 
 export const HomePage = () => {
-  const { extensionId: rawExtensionId } = useParams<{ extensionId?: string }>();
-  const extensionId = rawExtensionId ? decodeURIComponent(rawExtensionId) : undefined;
-  const widgetsRouteMatch = useRouteMatch({ path: "/home/widgets", exact: true });
+  const { extensionId, isWidgetsRoute } = useHomeRouteParams();
 
   const { user } = useUser();
   const userPermissions = user?.userPermissions ?? [];
@@ -68,18 +81,18 @@ export const HomePage = () => {
   const leftmostUrl = resolveLeftmostTabUrl(fullscreen, widgets);
 
   // Root path - redirect to leftmost tab
-  if (!extensionId && !widgetsRouteMatch) {
+  if (!extensionId && !isWidgetsRoute) {
     return <Redirect to={leftmostUrl!} />;
   }
 
   // /home/widgets but no widget extensions - redirect away
-  if (widgetsRouteMatch && widgets.length === 0) {
+  if (isWidgetsRoute && widgets.length === 0) {
     return <Redirect to={leftmostUrl!} />;
   }
 
   let activeTab: HomeActiveTab;
 
-  if (widgetsRouteMatch) {
+  if (isWidgetsRoute) {
     activeTab = { kind: "widgets" };
   } else {
     const activeExtension = fullscreen.find(extension => extension.id === extensionId);

From a7ceda420cf5ef9b7d58f3dc1fafcf9109c451f8 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Thu, 7 May 2026 10:09:23 +0200
Subject: [PATCH 13/18] remove comment

---
 src/home/HomePage.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/home/HomePage.tsx b/src/home/HomePage.tsx
index b97a1a34e36..8358aa5553a 100644
--- a/src/home/HomePage.tsx
+++ b/src/home/HomePage.tsx
@@ -17,10 +17,6 @@ import { homeWidgetsUrl, homeWidgetUrl } from "./urls";
 const HOMEPAGE_MOUNT = ["HOMEPAGE_WIDGETS"] as const;
 
 export const useHomeRouteParams = () => {
-  // The URL is built with encodeURIComponent (see homeWidgetUrl). The history library
-  // applies decodeURI to the pathname, which leaves URI-reserved chars (+ / = etc.)
-  // still percent-encoded — those are exactly what Saleor base64 global IDs contain.
-  // We finish the decode here. Assumes IDs never contain a literal '%'.
   const { extensionId: rawExtensionId } = useParams<{ extensionId?: string }>();
   const extensionId = rawExtensionId ? decodeURIComponent(rawExtensionId) : undefined;
   const widgetsRouteMatch = useRouteMatch({ path: "/home/widgets", exact: true });

From 4d538e807622ef3f1ed3c005541820704b15ca93 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Thu, 7 May 2026 10:12:39 +0200
Subject: [PATCH 14/18] handle non widget target

---
 .../domain/app-extension-manifest.test.ts     | 30 +++++++++++++++++++
 .../domain/app-extension-manifest.ts          | 13 ++++++++
 2 files changed, 43 insertions(+)

diff --git a/src/extensions/domain/app-extension-manifest.test.ts b/src/extensions/domain/app-extension-manifest.test.ts
index 1f6b459430e..c80eb2f806f 100644
--- a/src/extensions/domain/app-extension-manifest.test.ts
+++ b/src/extensions/domain/app-extension-manifest.test.ts
@@ -762,6 +762,36 @@ describe("App Extension Manifest Schema", () => {
       expect(result.success).toBe(true);
     });
 
+    it("should reject homeWidget options with non-WIDGET target", () => {
+      // Arrange
+      const invalidData = {
+        label: "Home Widget",
+        url: "https://example.com/home",
+        mountName: "HOMEPAGE_WIDGETS",
+        targetName: "POPUP" as const,
+        options: {
+          homeWidget: {
+            method: "POST" as const,
+            fullscreen: true,
+          },
+        },
+      };
+
+      // Act
+      const result = appExtensionManifest.safeParse(invalidData);
+
+      // Assert
+      expect(result.success).toBe(false);
+
+      if (!result.success) {
+        expect(
+          result.error.issues.some(issue =>
+            issue.message.includes("homeWidget options can only be set on WIDGET target"),
+          ),
+        ).toBe(true);
+      }
+    });
+
     it("should reject homeWidget options with non-HOMEPAGE_WIDGETS mount", () => {
       // Arrange
       const invalidData = {
diff --git a/src/extensions/domain/app-extension-manifest.ts b/src/extensions/domain/app-extension-manifest.ts
index 91fa0d82dbb..e2a0226e326 100644
--- a/src/extensions/domain/app-extension-manifest.ts
+++ b/src/extensions/domain/app-extension-manifest.ts
@@ -86,6 +86,19 @@ export const appExtensionManifest = z
     {
       message: "homeWidget options can only be set on HOMEPAGE_WIDGETS mount",
     },
+  )
+  .refine(
+    data => {
+      // homeWidget options can only be set when target is WIDGET
+      if (data.options?.homeWidget && data.targetName !== "WIDGET") {
+        return false;
+      }
+
+      return true;
+    },
+    {
+      message: "homeWidget options can only be set on WIDGET target",
+    },
   );
 
 export type AppExtensionManifest = z.infer<typeof appExtensionManifest>;

From 4f57baf875bd3d9408909aaa1bcc4ab56b889e1e Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Thu, 7 May 2026 10:40:27 +0200
Subject: [PATCH 15/18] change name

---
 .../app-extension-manifest-options.test.ts    | 16 +++++++-------
 .../domain/app-extension-manifest-options.ts  |  8 +++----
 .../domain/app-extension-manifest.test.ts     | 12 +++++-----
 .../domain/app-extension-manifest.ts          | 12 +++++-----
 src/home/ExtensionIframe.tsx                  |  2 +-
 src/home/filterHomeExtensions.test.ts         | 22 +++++++++----------
 src/home/filterHomeExtensions.ts              |  4 +++-
 7 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/src/extensions/domain/app-extension-manifest-options.test.ts b/src/extensions/domain/app-extension-manifest-options.test.ts
index 49397d79f64..29da780c9aa 100644
--- a/src/extensions/domain/app-extension-manifest-options.test.ts
+++ b/src/extensions/domain/app-extension-manifest-options.test.ts
@@ -244,7 +244,7 @@ describe("App Extension Manifest Options Schema", () => {
     it("should accept valid homeWidget with explicit fields", () => {
       // Arrange
       const validData = {
-        homeWidget: {
+        homeWidgetTarget: {
           method: "GET",
           fullscreen: true,
         },
@@ -264,7 +264,7 @@ describe("App Extension Manifest Options Schema", () => {
     it("should apply defaults (method=POST, fullscreen=false) when fields omitted", () => {
       // Arrange
       const validData = {
-        homeWidget: {},
+        homeWidgetTarget: {},
       };
 
       // Act
@@ -274,7 +274,7 @@ describe("App Extension Manifest Options Schema", () => {
       expect(result.success).toBe(true);
 
       if (result.success) {
-        expect(result.data.homeWidget).toEqual({
+        expect(result.data.homeWidgetTarget).toEqual({
           method: "POST",
           fullscreen: false,
         });
@@ -284,7 +284,7 @@ describe("App Extension Manifest Options Schema", () => {
     it("should reject homeWidget with invalid method", () => {
       // Arrange
       const invalidData = {
-        homeWidget: {
+        homeWidgetTarget: {
           method: "PATCH",
         },
       };
@@ -306,7 +306,7 @@ describe("App Extension Manifest Options Schema", () => {
         widgetTarget: {
           method: "POST",
         },
-        homeWidget: {
+        homeWidgetTarget: {
           method: "GET",
           fullscreen: false,
         },
@@ -320,7 +320,7 @@ describe("App Extension Manifest Options Schema", () => {
 
       if (!result.success) {
         expect(result.error.issues[0].message).toBe(
-          "When 'homeWidget' is set, 'newTabTarget' and 'widgetTarget' cannot be set.",
+          "When 'homeWidgetTarget' is set, 'newTabTarget' and 'widgetTarget' cannot be set.",
         );
       }
     });
@@ -331,7 +331,7 @@ describe("App Extension Manifest Options Schema", () => {
         newTabTarget: {
           method: "GET",
         },
-        homeWidget: {
+        homeWidgetTarget: {
           method: "GET",
           fullscreen: false,
         },
@@ -345,7 +345,7 @@ describe("App Extension Manifest Options Schema", () => {
 
       if (!result.success) {
         expect(result.error.issues[0].message).toBe(
-          "When 'homeWidget' is set, 'newTabTarget' and 'widgetTarget' cannot be set.",
+          "When 'homeWidgetTarget' is set, 'newTabTarget' and 'widgetTarget' cannot be set.",
         );
       }
     });
diff --git a/src/extensions/domain/app-extension-manifest-options.ts b/src/extensions/domain/app-extension-manifest-options.ts
index 46573ec117b..22a6c6807ee 100644
--- a/src/extensions/domain/app-extension-manifest-options.ts
+++ b/src/extensions/domain/app-extension-manifest-options.ts
@@ -12,7 +12,7 @@ const widgetTargetOptionsSchema = z.object({
   method: httpMethodSchema.optional().nullable(),
 });
 
-const homeWidgetOptionsSchema = z.object({
+const homeWidgetTargetOptionsSchema = z.object({
   method: z.enum(["GET", "POST"], { message: "Method must be either GET or POST" }).default("POST"),
   fullscreen: z.boolean().default(false),
 });
@@ -21,7 +21,7 @@ export const appExtensionManifestOptionsSchema = z
   .object({
     newTabTarget: newTabTargetOptionsSchema.optional().nullable(),
     widgetTarget: widgetTargetOptionsSchema.optional().nullable(),
-    homeWidget: homeWidgetOptionsSchema.optional().nullable(),
+    homeWidgetTarget: homeWidgetTargetOptionsSchema.optional().nullable(),
   })
   .refine(
     data => {
@@ -34,14 +34,14 @@ export const appExtensionManifestOptionsSchema = z
   )
   .refine(
     data => {
-      if (data.homeWidget && (data.newTabTarget || data.widgetTarget)) {
+      if (data.homeWidgetTarget && (data.newTabTarget || data.widgetTarget)) {
         return false;
       }
 
       return true;
     },
     {
-      message: "When 'homeWidget' is set, 'newTabTarget' and 'widgetTarget' cannot be set.",
+      message: "When 'homeWidgetTarget' is set, 'newTabTarget' and 'widgetTarget' cannot be set.",
     },
   );
 
diff --git a/src/extensions/domain/app-extension-manifest.test.ts b/src/extensions/domain/app-extension-manifest.test.ts
index c80eb2f806f..d82b5f48755 100644
--- a/src/extensions/domain/app-extension-manifest.test.ts
+++ b/src/extensions/domain/app-extension-manifest.test.ts
@@ -748,7 +748,7 @@ describe("App Extension Manifest Schema", () => {
         targetName: "WIDGET" as const,
         permissions: [],
         options: {
-          homeWidget: {
+          homeWidgetTarget: {
             method: "POST" as const,
             fullscreen: true,
           },
@@ -770,7 +770,7 @@ describe("App Extension Manifest Schema", () => {
         mountName: "HOMEPAGE_WIDGETS",
         targetName: "POPUP" as const,
         options: {
-          homeWidget: {
+          homeWidgetTarget: {
             method: "POST" as const,
             fullscreen: true,
           },
@@ -786,7 +786,7 @@ describe("App Extension Manifest Schema", () => {
       if (!result.success) {
         expect(
           result.error.issues.some(issue =>
-            issue.message.includes("homeWidget options can only be set on WIDGET target"),
+            issue.message.includes("homeWidgetTarget options can only be set on WIDGET target"),
           ),
         ).toBe(true);
       }
@@ -800,7 +800,7 @@ describe("App Extension Manifest Schema", () => {
         mountName: "PRODUCT_DETAILS_WIDGETS",
         targetName: "WIDGET" as const,
         options: {
-          homeWidget: {
+          homeWidgetTarget: {
             method: "POST" as const,
             fullscreen: true,
           },
@@ -816,7 +816,9 @@ describe("App Extension Manifest Schema", () => {
       if (!result.success) {
         expect(
           result.error.issues.some(issue =>
-            issue.message.includes("homeWidget options can only be set on HOMEPAGE_WIDGETS mount"),
+            issue.message.includes(
+              "homeWidgetTarget options can only be set on HOMEPAGE_WIDGETS mount",
+            ),
           ),
         ).toBe(true);
       }
diff --git a/src/extensions/domain/app-extension-manifest.ts b/src/extensions/domain/app-extension-manifest.ts
index e2a0226e326..8a10ae83574 100644
--- a/src/extensions/domain/app-extension-manifest.ts
+++ b/src/extensions/domain/app-extension-manifest.ts
@@ -76,28 +76,28 @@ export const appExtensionManifest = z
   )
   .refine(
     data => {
-      // homeWidget options can only be set when mount is HOMEPAGE_WIDGETS
-      if (data.options?.homeWidget && data.mountName !== "HOMEPAGE_WIDGETS") {
+      // homeWidgetTarget options can only be set when mount is HOMEPAGE_WIDGETS
+      if (data.options?.homeWidgetTarget && data.mountName !== "HOMEPAGE_WIDGETS") {
         return false;
       }
 
       return true;
     },
     {
-      message: "homeWidget options can only be set on HOMEPAGE_WIDGETS mount",
+      message: "homeWidgetTarget options can only be set on HOMEPAGE_WIDGETS mount",
     },
   )
   .refine(
     data => {
-      // homeWidget options can only be set when target is WIDGET
-      if (data.options?.homeWidget && data.targetName !== "WIDGET") {
+      // homeWidgetTarget options can only be set when target is WIDGET
+      if (data.options?.homeWidgetTarget && data.targetName !== "WIDGET") {
         return false;
       }
 
       return true;
     },
     {
-      message: "homeWidget options can only be set on WIDGET target",
+      message: "homeWidgetTarget options can only be set on WIDGET target",
     },
   );
 
diff --git a/src/home/ExtensionIframe.tsx b/src/home/ExtensionIframe.tsx
index 99a01a02ec9..fecc1e7d80e 100644
--- a/src/home/ExtensionIframe.tsx
+++ b/src/home/ExtensionIframe.tsx
@@ -18,7 +18,7 @@ export const ExtensionIframe = ({
   loaderType = "skeleton",
 }: ExtensionIframeProps) => {
   const settings = appExtensionManifestOptionsSchema.safeParse(extension.settings);
-  const method = settings.success ? (settings.data.homeWidget?.method ?? "POST") : "POST";
+  const method = settings.success ? (settings.data.homeWidgetTarget?.method ?? "POST") : "POST";
   const extensionUrl = isUrlAbsolute(extension.url)
     ? extension.url
     : `${extension.app.appUrl}${extension.url}`;
diff --git a/src/home/filterHomeExtensions.test.ts b/src/home/filterHomeExtensions.test.ts
index dc43225c40a..1a15735454f 100644
--- a/src/home/filterHomeExtensions.test.ts
+++ b/src/home/filterHomeExtensions.test.ts
@@ -42,11 +42,11 @@ describe("filterHomeExtensions", () => {
     expect(result.widgets).toHaveLength(1);
   });
 
-  it("treats explicit homeWidget.fullscreen=true as fullscreen", () => {
+  it("treats explicit homeWidgetTarget.fullscreen=true as fullscreen", () => {
     // Arrange
     const extensions = [
       buildExtension({
-        settings: { homeWidget: { fullscreen: true, method: "GET" } },
+        settings: { homeWidgetTarget: { fullscreen: true, method: "GET" } },
       }),
     ];
 
@@ -58,11 +58,11 @@ describe("filterHomeExtensions", () => {
     expect(result.widgets).toHaveLength(0);
   });
 
-  it("treats explicit homeWidget.fullscreen=false as widget", () => {
+  it("treats explicit homeWidgetTarget.fullscreen=false as widget", () => {
     // Arrange
     const extensions = [
       buildExtension({
-        settings: { homeWidget: { fullscreen: false, method: "GET" } },
+        settings: { homeWidgetTarget: { fullscreen: false, method: "GET" } },
       }),
     ];
 
@@ -74,11 +74,11 @@ describe("filterHomeExtensions", () => {
     expect(result.widgets).toHaveLength(1);
   });
 
-  it("treats homeWidget without explicit fullscreen as widget (default false)", () => {
+  it("treats homeWidgetTarget without explicit fullscreen as widget (default false)", () => {
     // Arrange
     const extensions = [
       buildExtension({
-        settings: { homeWidget: { method: "POST" } },
+        settings: { homeWidgetTarget: { method: "POST" } },
       }),
     ];
 
@@ -123,7 +123,7 @@ describe("filterHomeExtensions", () => {
     const extensions = [
       buildExtension({
         permissions: [PermissionEnum.MANAGE_PRODUCTS],
-        settings: { homeWidget: { fullscreen: true, method: "GET" } },
+        settings: { homeWidgetTarget: { fullscreen: true, method: "GET" } },
       }),
     ];
 
@@ -140,22 +140,22 @@ describe("filterHomeExtensions", () => {
       buildExtension({
         id: "a",
         label: "A",
-        settings: { homeWidget: { fullscreen: true, method: "GET" } },
+        settings: { homeWidgetTarget: { fullscreen: true, method: "GET" } },
       }),
       buildExtension({
         id: "b",
         label: "B",
-        settings: { homeWidget: { fullscreen: false, method: "GET" } },
+        settings: { homeWidgetTarget: { fullscreen: false, method: "GET" } },
       }),
       buildExtension({
         id: "c",
         label: "C",
-        settings: { homeWidget: { fullscreen: true, method: "GET" } },
+        settings: { homeWidgetTarget: { fullscreen: true, method: "GET" } },
       }),
       buildExtension({
         id: "d",
         label: "D",
-        settings: { homeWidget: { fullscreen: false, method: "GET" } },
+        settings: { homeWidgetTarget: { fullscreen: false, method: "GET" } },
       }),
     ];
 
diff --git a/src/home/filterHomeExtensions.ts b/src/home/filterHomeExtensions.ts
index cc1a51f649f..42374043140 100644
--- a/src/home/filterHomeExtensions.ts
+++ b/src/home/filterHomeExtensions.ts
@@ -29,7 +29,9 @@ export const filterHomeExtensions = (
     }
 
     const settings = appExtensionManifestOptionsSchema.safeParse(extension.settings);
-    const fullscreen = settings.success ? (settings.data.homeWidget?.fullscreen ?? false) : false;
+    const fullscreen = settings.success
+      ? (settings.data.homeWidgetTarget?.fullscreen ?? false)
+      : false;
 
     if (fullscreen) {
       result.fullscreen.push(extension);

From b97921c69813df54fef910cb6cc98027b2cd25dd Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Thu, 7 May 2026 18:01:15 +0200
Subject: [PATCH 16/18] missing route

---
 .github/workflows/deploy-cloud.yaml | 3 +--
 src/index.tsx                       | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/deploy-cloud.yaml b/.github/workflows/deploy-cloud.yaml
index eebfd923a7e..e06536fa0dd 100644
--- a/.github/workflows/deploy-cloud.yaml
+++ b/.github/workflows/deploy-cloud.yaml
@@ -52,7 +52,6 @@ jobs:
       ENABLED_SERVICE_NAME_HEADER: true
       ONBOARDING_USER_JOINED_DATE_THRESHOLD: ${{ vars.CLOUD_ONBOARDING_USER_JOINED_DATE_THRESHOLD }}
     steps:
-
       - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: refs/tags/${{ github.event.client_payload.ref }}
@@ -94,7 +93,7 @@ jobs:
   deploy:
     runs-on: ubuntu-24.04
     needs: [build]
-    
+
     environment:
       deployment: false
       name: deploy-cloud
diff --git a/src/index.tsx b/src/index.tsx
index 8038a65727f..d89f956e6e9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -192,6 +192,7 @@ const Routes = () => {
                 <Switch>
                   {legacyRedirects}
                   <SectionRoute exact path="/" component={WelcomePage} />
+                  <SectionRoute exact path="/home" component={HomePage} />
                   <SectionRoute exact path="/home/widget/:extensionId" component={HomePage} />
                   <SectionRoute exact path="/home/widgets" component={HomePage} />
                   <SectionRoute

From dcb331c9b786ccd3642b0cd1333f5ac9be193444 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Thu, 7 May 2026 18:05:17 +0200
Subject: [PATCH 17/18] add env

---
 .github/workflows/deploy-cloud.yaml                       | 1 +
 .github/workflows/deploy-dev.yaml                         | 1 +
 .github/workflows/deploy-master-staging.yaml              | 1 +
 .github/workflows/deploy-staging-and-prepare-release.yaml | 1 +
 .github/workflows/pr-automation.yml                       | 1 +
 5 files changed, 5 insertions(+)

diff --git a/.github/workflows/deploy-cloud.yaml b/.github/workflows/deploy-cloud.yaml
index e06536fa0dd..9a6bb988eec 100644
--- a/.github/workflows/deploy-cloud.yaml
+++ b/.github/workflows/deploy-cloud.yaml
@@ -45,6 +45,7 @@ jobs:
       SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       EXTENSIONS_API_URL: "https://apps.saleor.io/api/v1/extensions"
+      SALEOR_CLOUD_APP_DOMAIN: saleor.app
       IS_CLOUD_INSTANCE: true
       POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
       POSTHOG_HOST: ${{ secrets.POSTHOG_HOST }}
diff --git a/.github/workflows/deploy-dev.yaml b/.github/workflows/deploy-dev.yaml
index 676613e62c6..69cf255336c 100644
--- a/.github/workflows/deploy-dev.yaml
+++ b/.github/workflows/deploy-dev.yaml
@@ -24,6 +24,7 @@ jobs:
       SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       EXTENSIONS_API_URL: "https://apps.staging.saleor.io/api/v1/extensions"
+      SALEOR_CLOUD_APP_DOMAIN: saleor.app
       ENABLED_SERVICE_NAME_HEADER: true
       ONBOARDING_USER_JOINED_DATE_THRESHOLD: ${{ vars.DEV_ONBOARDING_USER_JOINED_DATE_THRESHOLD }}
       IS_CLOUD_INSTANCE: true
diff --git a/.github/workflows/deploy-master-staging.yaml b/.github/workflows/deploy-master-staging.yaml
index a082fdbab64..3f929251b99 100644
--- a/.github/workflows/deploy-master-staging.yaml
+++ b/.github/workflows/deploy-master-staging.yaml
@@ -24,6 +24,7 @@ jobs:
       SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       EXTENSIONS_API_URL: "https://apps.staging.saleor.io/api/v1/extensions"
+      SALEOR_CLOUD_APP_DOMAIN: saleor.app
       IS_CLOUD_INSTANCE: true
       ENABLED_SERVICE_NAME_HEADER: true
       ONBOARDING_USER_JOINED_DATE_THRESHOLD: ${{ vars.STAGING_ONBOARDING_USER_JOINED_DATE_THRESHOLD }}
diff --git a/.github/workflows/deploy-staging-and-prepare-release.yaml b/.github/workflows/deploy-staging-and-prepare-release.yaml
index 2f8b233b59d..b53df7d89b2 100644
--- a/.github/workflows/deploy-staging-and-prepare-release.yaml
+++ b/.github/workflows/deploy-staging-and-prepare-release.yaml
@@ -146,6 +146,7 @@ jobs:
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       SENTRY_RELEASE: ${{ needs.prepare-release.outputs.SENTRY_RELEASE }}
       EXTENSIONS_API_URL: "https://apps.staging.saleor.io/api/v1/extensions"
+      SALEOR_CLOUD_APP_DOMAIN: saleor.app
       VERSION: ${{ github.ref_name }}
       IS_CLOUD_INSTANCE: true
       ENABLED_SERVICE_NAME_HEADER: true
diff --git a/.github/workflows/pr-automation.yml b/.github/workflows/pr-automation.yml
index 554604a0fc4..dd9a7deb3d1 100644
--- a/.github/workflows/pr-automation.yml
+++ b/.github/workflows/pr-automation.yml
@@ -135,6 +135,7 @@ jobs:
         env:
           API_URL: ${{ needs.initialize-cloud.outputs.API_URL }}
           EXTENSIONS_API_URL: "https://apps.staging.saleor.io/api/v1/extensions"
+          SALEOR_CLOUD_APP_DOMAIN: saleor.app
           APP_MOUNT_URI: /
           STATIC_URL: /
           IS_CLOUD_INSTANCE: true

From af0724ce92cf6b2af77f1cb6673c44bce8a5e849 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Mon, 11 May 2026 09:06:23 +0200
Subject: [PATCH 18/18] Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 src/extensions/components/IframePost/IframePost.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/extensions/components/IframePost/IframePost.tsx b/src/extensions/components/IframePost/IframePost.tsx
index dbb19b7b73b..6153b61b99b 100644
--- a/src/extensions/components/IframePost/IframePost.tsx
+++ b/src/extensions/components/IframePost/IframePost.tsx
@@ -88,7 +88,7 @@ export const IframePost = ({
         as="iframe"
         borderWidth={0}
         __height={height as number | string}
-        sandbox="allow-same-origin allow-forms allow-scripts allow-downloads"
+        sandbox="allow-same-origin allow-forms allow-scripts allow-downloads allow-popups"
         name={`ext-frame-${extensionId}`}
         width="100%"
       />