diff --git a/docs/scos/dev/front-end-development/202212.0/oryx/building-applications/oryx-presets.md b/docs/scos/dev/front-end-development/202212.0/oryx/building-applications/oryx-presets.md
index 41abda94b32..71ce688f820 100644
--- a/docs/scos/dev/front-end-development/202212.0/oryx/building-applications/oryx-presets.md
+++ b/docs/scos/dev/front-end-development/202212.0/oryx/building-applications/oryx-presets.md
@@ -7,9 +7,9 @@ redirect_from:
   - /docs/scos/dev/front-end-development/202212.0/oryx/oryx-presets.html
 ---
 
-The [presets package](https://www.npmjs.com/package/@spryker-oryx/oryx-presets.html) contains standard feature sets and resources that are used to create sample applications without writing [boilerplate](/docs/scos/dev/front-end-development/{{page.version}}/oryx/getting-started/oryx-boilerplate.html). Presets might be too opinionated to use for a production application, but they let you get started quickly.
+The [presets package](https://www.npmjs.com/package/@spryker-oryx/presets) contains standard feature sets and resources that are used to create sample applications without writing [boilerplate](/docs/scos/dev/front-end-development/{{page.version}}/oryx/getting-started/oryx-boilerplate.html). Presets might be too opinionated to use for a production application, but they let you get started quickly.
 
-Presets are typically used to demonstrate or try out Oryx applications. In product applications, the boilerplate is set up in more optimized way, by leaving out the features that are not used.
+Presets are typically used to demonstrate or try out Oryx applications. In production applications, the boilerplate is set up in a more optimized way, by leaving out the features that are not used.
 
 ## Dependencies
 
@@ -23,15 +23,15 @@ A feature set contains a group of features that can be added with a single refer
 
 ```ts
 import { appBuilder } from "@spryker-oryx/core";
-import { b2cFeatures } from "@spryker-oryx/oryx-presets";
+import { storefrontFeatures } from "@spryker-oryx/presets/storefront";
 
-export const app = appBuilder().withFeature(b2cFeatures).create();
+export const app = appBuilder().withFeature(storefrontFeatures).create();
 ```
 
-The `b2cFeatures` feature set contains a list of features that exposes all the available B2C features:
+The `storefrontFeatures` feature set contains a list of features that exposes all the available storefront features:
 
 ```ts
-export const b2cFeatures: AppFeature[] = [
+export const storefrontFeatures: AppFeature[] = [
   productFeature,
   cartFeature,
   checkoutFeature,
@@ -51,11 +51,12 @@ To apply a theme to your Oryx application, you can import it from the preset pac
 
 ```ts
 import { appBuilder } from "@spryker-oryx/core";
-import { b2cFeatures, b2cTheme } from "@spryker-oryx/oryx-presets";
+import { storefrontFeatures } from "@spryker-oryx/presets/storefront";
+import { storefrontTheme } from '@spryker-oryx/themes';
 
 export const app = appBuilder()
-  .withFeature(b2cFeatures)
-  .withTheme(b2cTheme)
+  .withFeature(storefrontFeatures)
+  .withTheme(storefrontTheme)
   .create();
 ```
 
@@ -83,22 +84,14 @@ const app = appBuilder()
 As an application developer, you might want to create your own resources.
 
 ```ts
-import { Resources } from "@spryker-oryx/core";
+import { ResourceGraphic } from '@spryker-oryx/experience';
 
 const myResources: Resources = {
-  graphics: {
-    logo: {
-      source: () =>
-        import(
-          "/docs/scos/dev/front-end-development/{{page.version}}/oryx/my-logo"
-        ).then((m) => m.default),
-    },
-    otherImg: {
-      source: () =>
-        import(
-          "/docs/scos/dev/front-end-development/{{page.version}}/oryx/my-other-img"
-        ).then((m) => m.default),
-    },
+  logo: {
+    source: () => import('my-logo').then((m) => m.default),
+  },
+  otherImg: {
+    source: () => import('my-other-img').then((m) => m.default),
   },
 };
 ```
diff --git a/docs/scos/dev/front-end-development/202307.0/oryx/building-applications/oryx-presets.md b/docs/scos/dev/front-end-development/202307.0/oryx/building-applications/oryx-presets.md
index c34ceca85d3..155a88fbdc3 100644
--- a/docs/scos/dev/front-end-development/202307.0/oryx/building-applications/oryx-presets.md
+++ b/docs/scos/dev/front-end-development/202307.0/oryx/building-applications/oryx-presets.md
@@ -24,15 +24,15 @@ A feature set contains a group of features that can be added with a single refer
 
 ```ts
 import { appBuilder } from "@spryker-oryx/core";
-import { b2cFeatures } from "@spryker-oryx/oryx-presets";
+import { storefrontFeatures } from "@spryker-oryx/presets/storefront";
 
-export const app = appBuilder().withFeature(b2cFeatures).create();
+export const app = appBuilder().withFeature(storefrontFeatures).create();
 ```
 
-The `b2cFeatures` feature set contains a list of features that exposes all the available B2C features:
+The `storefrontFeatures` feature set contains a list of features that exposes all the available storefront features:
 
 ```ts
-export const b2cFeatures: AppFeature[] = [
+export const storefrontFeatures: AppFeature[] = [
   productFeature,
   cartFeature,
   checkoutFeature,
@@ -52,11 +52,12 @@ To apply a theme to your Oryx application, you can import it from the preset pac
 
 ```ts
 import { appBuilder } from "@spryker-oryx/core";
-import { b2cFeatures, b2cTheme } from "@spryker-oryx/oryx-presets";
+import { storefrontFeatures } from "@spryker-oryx/presets/storefront";
+import { storefrontTheme } from '@spryker-oryx/themes';
 
 export const app = appBuilder()
-  .withFeature(b2cFeatures)
-  .withTheme(b2cTheme)
+  .withFeature(storefrontFeatures)
+  .withTheme(storefrontTheme)
   .create();
 ```
 
@@ -84,22 +85,14 @@ const app = appBuilder()
 As an application developer, you might want to create your own resources.
 
 ```ts
-import { Resources } from "@spryker-oryx/core";
+import { ResourceGraphic } from '@spryker-oryx/experience';
 
 const myResources: Resources = {
-  graphics: {
-    logo: {
-      source: () =>
-        import(
-          "/docs/scos/dev/front-end-development/{{page.version}}/oryx/my-logo"
-        ).then((m) => m.default),
-    },
-    otherImg: {
-      source: () =>
-        import(
-          "/docs/scos/dev/front-end-development/{{page.version}}/oryx/my-other-img"
-        ).then((m) => m.default),
-    },
+  logo: {
+    source: () => import('my-logo').then((m) => m.default),
+  },
+  otherImg: {
+    source: () => import('my-other-img').then((m) => m.default),
   },
 };
 ```
diff --git a/docs/scos/dev/front-end-development/202311.0/oryx/building-applications/oryx-presets.md b/docs/scos/dev/front-end-development/202311.0/oryx/building-applications/oryx-presets.md
index 04b16f36d50..5cc002fccc3 100644
--- a/docs/scos/dev/front-end-development/202311.0/oryx/building-applications/oryx-presets.md
+++ b/docs/scos/dev/front-end-development/202311.0/oryx/building-applications/oryx-presets.md
@@ -24,15 +24,15 @@ A feature set contains a group of features that can be added with a single refer
 
 ```ts
 import { appBuilder } from "@spryker-oryx/core";
-import { b2cFeatures } from "@spryker-oryx/oryx-presets";
+import { storefrontFeatures } from "@spryker-oryx/presets/storefront";
 
-export const app = appBuilder().withFeature(b2cFeatures).create();
+export const app = appBuilder().withFeature(storefrontFeatures).create();
 ```
 
-The `b2cFeatures` feature set contains a list of features that exposes all the available B2C features:
+The `storefrontFeatures` feature set contains a list of features that exposes all the available storefront features:
 
 ```ts
-export const b2cFeatures: AppFeature[] = [
+export const storefrontFeatures: AppFeature[] = [
   productFeature,
   cartFeature,
   checkoutFeature,
@@ -52,11 +52,12 @@ To apply a theme to your Oryx application, you can import it from the preset pac
 
 ```ts
 import { appBuilder } from "@spryker-oryx/core";
-import { b2cFeatures, b2cTheme } from "@spryker-oryx/oryx-presets";
+import { storefrontFeatures } from "@spryker-oryx/presets/storefront";
+import { storefrontTheme } from '@spryker-oryx/themes';
 
 export const app = appBuilder()
-  .withFeature(b2cFeatures)
-  .withTheme(b2cTheme)
+  .withFeature(storefrontFeatures)
+  .withTheme(storefrontTheme)
   .create();
 ```
 
@@ -84,22 +85,14 @@ const app = appBuilder()
 As an application developer, you might want to create your own resources.
 
 ```ts
-import { Resources } from "@spryker-oryx/core";
+import { ResourceGraphic } from '@spryker-oryx/experience';
 
 const myResources: Resources = {
-  graphics: {
-    logo: {
-      source: () =>
-        import(
-          "/docs/scos/dev/front-end-development/{{page.version}}/oryx/my-logo"
-        ).then((m) => m.default),
-    },
-    otherImg: {
-      source: () =>
-        import(
-          "/docs/scos/dev/front-end-development/{{page.version}}/oryx/my-other-img"
-        ).then((m) => m.default),
-    },
+  logo: {
+    source: () => import('my-logo').then((m) => m.default),
+  }, 
+  otherImg: {
+    source: () => import('my-other-img').then((m) => m.default),
   },
 };
 ```