diff --git a/client-app/ui-kit/components/organisms/add-to-cart/vc-add-to-cart.stories.ts b/client-app/ui-kit/components/organisms/add-to-cart/vc-add-to-cart.stories.ts
index d75647ce71..f4ba30cdb2 100644
--- a/client-app/ui-kit/components/organisms/add-to-cart/vc-add-to-cart.stories.ts
+++ b/client-app/ui-kit/components/organisms/add-to-cart/vc-add-to-cart.stories.ts
@@ -1,23 +1,12 @@
 import { VcAddToCart } from "..";
-import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-const SIZES = ["xs", "sm", "md"];
-const TYPES = ["text", "password", "number"];
+const SIZES = ["sm", "md"];
 
-export default {
+const meta: Meta<typeof VcAddToCart> = {
   title: "Components/Organisms/VcAddToCart",
   component: VcAddToCart,
   argTypes: {
-    /**
-     * Docs:
-     *  https://storybook.js.org/docs/vue/essentials/controls#annotation
-     *  https://storybook.js.org/docs/vue/api/argtypes#manual-specification
-     */
-    type: {
-      control: "radio",
-      options: TYPES,
-      table: { type: { summary: TYPES.join(" | ") } },
-    },
     size: {
       control: "radio",
       options: SIZES,
@@ -28,31 +17,60 @@ export default {
         },
       },
     },
-    min: { table: { type: { summary: "string|number" } } },
-    max: { table: { type: { summary: "string|number" } } },
-    step: { table: { type: { summary: "string|number" } } },
-    minlength: { table: { type: { summary: "string|number" } } },
-    maxlength: { table: { type: { summary: "string|number" } } },
-    modelValue: { table: { type: { summary: "string|number" } } },
+    modelValue: { table: { type: { summary: "number" } } },
+    loading: { control: "boolean" },
+    disabled: { control: "boolean" },
+    readonly: { control: "boolean" },
+    hideButton: { control: "boolean" },
   },
   args: {
     readonly: false,
     disabled: false,
-    required: false,
-    noBorder: false,
-    center: false,
-    hidePasswordSwitcher: false,
-    error: false,
-    showEmptyDetails: false,
-    type: "text",
+    loading: false,
+    isActive: true,
+    hideButton: false,
     size: "md",
+    modelValue: 1,
   },
-} as Meta<typeof VcAddToCart>;
+  render: (args) => ({
+    setup: () => ({ args }),
+    template: '<VcAddToCart v-bind="args" v-model="args.modelValue" />',
+  }),
+};
+
+export default meta;
+type StoryType = StoryObj<typeof meta>;
 
-const Template: StoryFn = (args) => ({
-  components: { VcAddToCart },
-  setup: () => ({ args }),
-  template: '<VcAddToCart v-bind="args" v-model="args.modelValue" />',
-});
+export const Basic: StoryType = {};
+
+export const Loading: StoryType = {
+  args: {
+    loading: true,
+  },
+};
+
+export const Disabled: StoryType = {
+  args: {
+    disabled: true,
+  },
+};
 
-export const Basic = Template.bind({});
+export const OutOfStock: StoryType = {
+  args: {
+    isInStock: false,
+    isAvailable: false,
+  },
+};
+
+export const WithError: StoryType = {
+  args: {
+    error: true,
+    message: "Error message",
+  },
+};
+
+export const HideButton: StoryType = {
+  args: {
+    hideButton: true,
+  },
+};
diff --git a/client-app/ui-kit/components/organisms/pagination/vc-pagination.stories.ts b/client-app/ui-kit/components/organisms/pagination/vc-pagination.stories.ts
index 5147dbba4d..db222958cd 100644
--- a/client-app/ui-kit/components/organisms/pagination/vc-pagination.stories.ts
+++ b/client-app/ui-kit/components/organisms/pagination/vc-pagination.stories.ts
@@ -1,80 +1,92 @@
 import { VcPagination } from "..";
-import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-export default {
+const meta: Meta<typeof VcPagination> = {
   title: "Components/Organisms/VcPagination",
   component: VcPagination,
-} as Meta<typeof VcPagination>;
+  render: (args) => ({
+    setup: () => ({ args }),
+    template: '<VcPagination v-bind="args" />',
+  }),
+};
 
-const Template: StoryFn = (args) => ({
-  components: { VcPagination },
-  setup: () => ({ args }),
-  template: '<VcPagination v-bind="args" />',
-});
+export default meta;
+type StoryType = StoryObj<typeof meta>;
 
-export const Page1 = Template.bind({});
-Page1.args = {
-  page: 1,
-  pages: 147,
+export const Page1: StoryType = {
+  args: {
+    page: 1,
+    pages: 147,
+  },
 };
 
-export const Page5 = Template.bind({});
-Page5.args = {
-  page: 5,
-  pages: 147,
+export const Page5: StoryType = {
+  args: {
+    page: 5,
+    pages: 147,
+  },
 };
 
-export const Page6 = Template.bind({});
-Page6.args = {
-  page: 6,
-  pages: 147,
+export const Page6: StoryType = {
+  args: {
+    page: 6,
+    pages: 147,
+  },
 };
 
-export const Page55 = Template.bind({});
-Page55.args = {
-  page: 55,
-  pages: 147,
+export const Page55: StoryType = {
+  args: {
+    page: 55,
+    pages: 147,
+  },
 };
 
-export const Page142 = Template.bind({});
-Page142.args = {
-  page: 142,
-  pages: 147,
+export const Page142: StoryType = {
+  args: {
+    page: 142,
+    pages: 147,
+  },
 };
 
-export const Page143 = Template.bind({});
-Page143.args = {
-  page: 143,
-  pages: 147,
+export const Page143: StoryType = {
+  args: {
+    page: 143,
+    pages: 147,
+  },
 };
 
-export const Page147 = Template.bind({});
-Page147.args = {
-  page: 147,
-  pages: 147,
+export const Page147: StoryType = {
+  args: {
+    page: 147,
+    pages: 147,
+  },
 };
 
-export const FewPages = Template.bind({});
-FewPages.args = {
-  page: 1,
-  pages: 9,
+export const FewPages: StoryType = {
+  args: {
+    page: 1,
+    pages: 9,
+  },
 };
 
-export const OnePage = Template.bind({});
-OnePage.args = {
-  page: 1,
-  pages: 1,
+export const OnePage: StoryType = {
+  args: {
+    page: 1,
+    pages: 1,
+  },
 };
 
-export const ThreePages = Template.bind({});
-ThreePages.args = {
-  page: 2,
-  pages: 3,
+export const ThreePages: StoryType = {
+  args: {
+    page: 2,
+    pages: 3,
+  },
 };
 
-export const Compact = Template.bind({});
-Compact.args = {
-  page: 1,
-  pages: 9,
-  compact: true,
+export const Compact: StoryType = {
+  args: {
+    page: 1,
+    pages: 9,
+    compact: true,
+  },
 };
diff --git a/client-app/ui-kit/components/organisms/product-card/vc-product-card.stories.ts b/client-app/ui-kit/components/organisms/product-card/vc-product-card.stories.ts
index 4ece589314..8888bf7cc2 100644
--- a/client-app/ui-kit/components/organisms/product-card/vc-product-card.stories.ts
+++ b/client-app/ui-kit/components/organisms/product-card/vc-product-card.stories.ts
@@ -1,19 +1,10 @@
 import { getMoney } from "@/ui-kit/mocks";
-import { VcProductCard, VcProductImage, VcAddToCart, VcQuantityStepper } from "..";
-import {
-  VcProductVendor,
-  VcProductProperties,
-  VcProductTitle,
-  VcProductActions,
-  VcRadioButton,
-  VcProperty,
-} from "../../atoms";
-import { VcChip, VcProductPrice, VcProductActionsButton, VcProductTotal } from "../../molecules";
-import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import { VcProductCard } from "..";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
 const VIEW_MODES = ["grid", "list", "item"];
 
-export default {
+const meta: Meta<typeof VcProductCard> = {
   title: "Components/Organisms/VcProductCard",
   component: VcProductCard,
   argTypes: {
@@ -36,7 +27,16 @@ export default {
       type: { name: "boolean", required: false },
     },
   },
-} as Meta<typeof VcProductCard>;
+  render: (args) => ({
+    setup: () => ({ args, title }),
+    template: `<VcProductCard v-bind="args">
+      <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+    </VcProductCard>`,
+  }),
+};
+
+export default meta;
+type StoryType = StoryObj<typeof meta>;
 
 const image = {
   imgSrc: "https://vcst-dev.govirto.com/cms-content/assets/catalog/SAUN65JS9500/1426804677000_1122018.jpg",
@@ -90,392 +90,384 @@ const actionsButton = {
   active: true,
 };
 
-const BasicTemplate: StoryFn = (args) => ({
-  components: { VcProductCard, VcProductTitle },
-  setup: () => ({ args, title }),
-  template: `<VcProductCard v-bind="args">
-    <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
-  </VcProductCard>`,
-});
-
-export const Basic = BasicTemplate.bind({});
-
-const ImageTemplate: StoryFn = (args) => ({
-  components: { VcProductCard, VcProductImage, VcProductTitle },
-  setup: () => ({ args, title, image }),
-  template: `<VcProductCard v-bind="args">
-    <VcProductImage v-bind="image" />
-
-    <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
-  </VcProductCard>`,
-});
-
-export const Image = ImageTemplate.bind({});
-
-const ImageVendorTemplate: StoryFn = (args) => ({
-  components: { VcProductCard, VcProductImage, VcProductVendor, VcProductTitle },
-  setup: () => ({ args, title, image }),
-  template: `<VcProductCard v-bind="args">
-    <VcProductImage v-bind="image" />
-    <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
-    <VcProductVendor>Product Vendor</VcProductVendor>
-  </VcProductCard>`,
-});
-
-export const ImageVendor = ImageVendorTemplate.bind({});
-
-const ImageVendorPropertiesTemplate: StoryFn = (args) => ({
-  components: { VcProductCard, VcProductImage, VcProductVendor, VcProductProperties, VcProductTitle, VcProperty },
-  setup: () => ({ args, title, image }),
-  template: `<VcProductCard v-bind="args">
-    <VcProductImage v-bind="image" />
-    <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
-    <VcProductVendor>Product Vendor</VcProductVendor>
-
-    <VcProductProperties>
-      <VcProperty label="Label">Value</VcProperty>
-      <VcProperty label="Label">Value</VcProperty>
-      <VcProperty label="Label">Value</VcProperty>
-    </VcProductProperties>
-  </VcProductCard>`,
-});
-
-export const ImageVendorProperties = ImageVendorPropertiesTemplate.bind({});
-
-const ImagePriceTemplate: StoryFn = (args) => ({
-  components: { VcProductCard, VcProductImage, VcProductTitle, VcProductPrice, VcProductVendor },
-  setup: () => ({ args, title, price, image }),
-  template: `<VcProductCard v-bind="args">
-    <VcProductImage v-bind="image" />
-    <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
-    <VcProductPrice v-bind="{ ...price, singleLine: false }" />
-  </VcProductCard>`,
-});
-
-export const ImagePriceCard = ImagePriceTemplate.bind({});
-ImagePriceCard.args = {
-  viewMode: "grid",
+const commonData = {
+  title,
+  price,
+  chip1,
+  chip2,
+  image,
+  availabilityData,
+  actions,
+  actionsButton,
 };
 
-export const ImagePriceList = ImagePriceTemplate.bind({});
-ImagePriceList.args = {
-  viewMode: "list",
+// Общая render функция для избежания дублирования
+const renderCard =
+  (template: string, additionalData = {}) =>
+  (args: Record<string, unknown>) => ({
+    setup: () => ({ args, ...commonData, ...additionalData }),
+    template,
+  });
+
+export const Basic: StoryType = {
+  render: renderCard(`
+    <VcProductCard v-bind="args">
+      <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+    </VcProductCard>
+  `),
 };
 
-const ImageVendorPriceTemplate: StoryFn = (args) => ({
-  components: { VcProductCard, VcProductImage, VcProductTitle, VcProductPrice, VcProductVendor },
-  setup: () => ({ args, title, price, image }),
-  template: `<VcProductCard v-bind="args">
-    <VcProductImage v-bind="image" />
-    <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
-    <VcProductPrice v-bind="price" />
-    <VcProductVendor>Product Vendor</VcProductVendor>
-  </VcProductCard>`,
-});
-
-export const ImageVendorPriceCard = ImageVendorPriceTemplate.bind({});
-ImageVendorPriceCard.args = {
-  viewMode: "grid",
+export const Image: StoryType = {
+  render: renderCard(`
+    <VcProductCard v-bind="args">
+      <VcProductImage v-bind="image" />
+      <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+    </VcProductCard>
+  `),
 };
 
-export const ImageVendorPriceList = ImageVendorPriceTemplate.bind({});
-ImageVendorPriceList.args = {
-  viewMode: "list",
+export const ImageVendor: StoryType = {
+  render: renderCard(`
+    <VcProductCard v-bind="args">
+      <VcProductImage v-bind="image" />
+      <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+      <VcProductVendor>Product Vendor</VcProductVendor>
+    </VcProductCard>
+  `),
 };
 
-const FullTemplate: StoryFn = (args) => ({
-  components: {
-    VcProductCard,
-    VcProductActions,
-    VcProductActionsButton,
-    VcProductImage,
-    VcProductTitle,
-    VcProductVendor,
-    VcProductProperties,
-    VcProperty,
-    VcProductPrice,
-    VcAddToCart,
-    VcChip,
-  },
-  setup: () => ({ args, title, price, chip1, chip2, image, availabilityData, actions, actionsButton }),
-  template: `<VcProductCard v-bind="args">
-    <VcProductImage v-bind="image" />
-
-    <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
-    <VcProductVendor>Product Vendor</VcProductVendor>
-
-    <VcProductProperties>
-      <VcProperty label="Label">Value</VcProperty>
-      <VcProperty label="Label">Value</VcProperty>
-      <VcProperty label="Label">Value</VcProperty>
-    </VcProductProperties>
-
-    <VcProductPrice v-bind="price" />
-
-    <VcAddToCart v-bind="availabilityData">
-      <VcChip v-bind="chip1">1230</VcChip>
-      <VcChip v-bind="chip2">23</VcChip>
-    </VcAddToCart>
-
-    <VcProductActions v-bind="args.viewMode === 'grid' ? actions : {}">
-      <VcProductActionsButton />
-      <VcProductActionsButton v-bind="actionsButton" />
-    </VcProductActions>
-  </VcProductCard>`,
-});
-
-export const FullCard = FullTemplate.bind({});
-FullCard.args = {
-  viewMode: "grid",
+export const ImageVendorProperties: StoryType = {
+  render: renderCard(`
+    <VcProductCard v-bind="args">
+      <VcProductImage v-bind="image" />
+      <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+      <VcProductVendor>Product Vendor</VcProductVendor>
+
+      <VcProductProperties>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+      </VcProductProperties>
+    </VcProductCard>
+  `),
 };
 
-export const FullList = FullTemplate.bind({});
-FullList.args = {
-  viewMode: "list",
+export const ImagePriceCard: StoryType = {
+  args: {
+    viewMode: "grid",
+  },
+  render: renderCard(`
+    <VcProductCard v-bind="args">
+      <VcProductImage v-bind="image" />
+      <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+      <VcProductPrice v-bind="{ ...price, singleLine: false }" />
+    </VcProductCard>
+  `),
 };
 
-const FullGridTemplateRecommended: StoryFn = (args) => ({
-  components: {
-    VcProductCard,
-    VcProductActions,
-    VcProductActionsButton,
-    VcProductImage,
-    VcProductTitle,
-    VcProductVendor,
-    VcProductProperties,
-    VcProperty,
-    VcProductPrice,
-    VcAddToCart,
-    VcChip,
+export const ImagePriceList: StoryType = {
+  args: {
+    viewMode: "list",
   },
-  setup: () => ({ args, title, price, chip1, chip2, image, availabilityData, actions, actionsButton }),
-  template: `<VcProductCard v-bind="args">
-    <template #media>
+  render: renderCard(`
+    <VcProductCard v-bind="args">
       <VcProductImage v-bind="image" />
-
-      <VcProductActions v-bind="actions">
-        <VcProductActionsButton />
-        <VcProductActionsButton v-bind="actionsButton" />
-      </VcProductActions>
-    </template>
-
-    <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
-
-    <VcProductVendor>Product Vendor</VcProductVendor>
-
-    <VcProductProperties>
-      <VcProperty label="Label">Value</VcProperty>
-      <VcProperty label="Label">Value</VcProperty>
-      <VcProperty label="Label">Value</VcProperty>
-    </VcProductProperties>
-
-    <VcAddToCart v-bind="availabilityData">
-      <VcChip v-bind="chip1">1230</VcChip>
-      <VcChip v-bind="chip2">23</VcChip>
-    </VcAddToCart>
-
-    <VcProductPrice v-bind="price" />
-  </VcProductCard>`,
-});
-
-export const FullCardRecommendedWay = FullGridTemplateRecommended.bind({});
-FullCardRecommendedWay.args = {
-  viewMode: "grid",
+      <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+      <VcProductPrice v-bind="{ ...price, singleLine: false }" />
+    </VcProductCard>
+  `),
 };
 
-const FullListTemplateRecommended: StoryFn = (args) => ({
-  components: {
-    VcProductCard,
-    VcProductActions,
-    VcProductActionsButton,
-    VcProductImage,
-    VcProductTitle,
-    VcProductVendor,
-    VcProductProperties,
-    VcProperty,
-    VcProductPrice,
-    VcAddToCart,
-    VcChip,
+export const ImageVendorPriceCard: StoryType = {
+  args: {
+    viewMode: "grid",
   },
-  setup: () => ({ args, title, price, chip1, chip2, image, availabilityData, actions, actionsButton }),
-  template: `<VcProductCard v-bind="args">
-    <template #media>
+  render: renderCard(`
+    <VcProductCard v-bind="args">
       <VcProductImage v-bind="image" />
-
-      <VcProductActions>
-        <VcProductActionsButton />
-        <VcProductActionsButton v-bind="actionsButton" />
-      </VcProductActions>
-    </template>
-
-    <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
-
-    <VcProductVendor>Product Vendor</VcProductVendor>
-
-    <VcProductProperties>
-      <VcProperty label="Label">Value</VcProperty>
-      <VcProperty label="Label">Value</VcProperty>
-      <VcProperty label="Label">Value</VcProperty>
-    </VcProductProperties>
-
-    <VcAddToCart v-bind="availabilityData">
-      <VcChip v-bind="chip1">1230</VcChip>
-      <VcChip v-bind="chip2">23</VcChip>
-    </VcAddToCart>
-
-    <VcProductPrice v-bind="{ ...price, singleLine: false }" />
-  </VcProductCard>`,
-});
-
-export const FullListRecommendedWay = FullListTemplateRecommended.bind({});
-FullListRecommendedWay.args = {
-  viewMode: "list",
+      <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+      <VcProductPrice v-bind="price" />
+      <VcProductVendor>Product Vendor</VcProductVendor>
+    </VcProductCard>
+  `),
 };
 
-const LineItemTemplate: StoryFn = (args) => ({
-  components: {
-    VcProductCard,
-    VcProductActions,
-    VcProductActionsButton,
-    VcProductImage,
-    VcProductTitle,
-    VcProductVendor,
-    VcProductProperties,
-    VcProperty,
-    VcProductPrice,
-    VcProductTotal,
-    VcAddToCart,
-    VcChip,
-    VcRadioButton,
+export const ImageVendorPriceList: StoryType = {
+  args: {
+    viewMode: "list",
   },
-  setup: () => ({ args, title, price, chip1, chip2, image, availabilityData, actions, actionsButton }),
-  template: `<VcProductCard v-bind="args">
-    <template #media>
+  render: renderCard(`
+    <VcProductCard v-bind="args">
       <VcProductImage v-bind="image" />
-      <VcRadioButton value="option1" />
-    </template>
-
-    <VcProductTitle v-bind="{ ...title, linesNumber: 3}">Product title Product title</VcProductTitle>
-
-    <VcProductProperties>
-      <VcProperty label="Label">Value</VcProperty>
-      <VcProperty label="Label">Value</VcProperty>
-      <VcProperty label="Label">Value</VcProperty>
-      <VcProperty label="Price per item" class="@4xl:hidden">$1,000</VcProperty>
-    </VcProductProperties>
+      <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+      <VcProductPrice v-bind="price" />
+      <VcProductVendor>Product Vendor</VcProductVendor>
+    </VcProductCard>
+  `),
+};
 
-    <VcAddToCart v-bind="{availabilityData, hideButton: true}">
-      <VcChip v-bind="chip1">1230</VcChip>
-    </VcAddToCart>
+export const FullCard: StoryType = {
+  args: {
+    viewMode: "grid",
+  },
+  render: renderCard(`
+    <VcProductCard v-bind="args">
+      <VcProductImage v-bind="image" />
 
-    <VcProductPrice v-bind="{ ...price, singleLine: false }" />
+      <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+      <VcProductVendor>Product Vendor</VcProductVendor>
 
-    <VcProductTotal v-bind="{ ...price, singleLine: false }" />
-  </VcProductCard>`,
-});
+      <VcProductProperties>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+      </VcProductProperties>
 
-export const LineItem = LineItemTemplate.bind({});
-LineItem.args = {
-  viewMode: "item",
-};
+      <VcProductPrice v-bind="price" />
 
-const FullListQuantityStepperTemplate: StoryFn = (args) => ({
-  components: {
-    VcProductCard,
-    VcProductActions,
-    VcProductActionsButton,
-    VcProductImage,
-    VcProductTitle,
-    VcProductVendor,
-    VcProductProperties,
-    VcProperty,
-    VcProductPrice,
-    VcQuantityStepper,
-    VcChip,
-  },
-  setup: () => ({ args, title, price, chip1, chip2, image, actions, actionsButton }),
-  template: `<VcProductCard v-bind="args">
-    <template #media>
-      <VcProductImage v-bind="image" />
+      <VcAddToCart v-bind="availabilityData">
+        <VcChip v-bind="chip1">1230</VcChip>
+        <VcChip v-bind="chip2">23</VcChip>
+      </VcAddToCart>
 
       <VcProductActions v-bind="args.viewMode === 'grid' ? actions : {}">
         <VcProductActionsButton />
         <VcProductActionsButton v-bind="actionsButton" />
       </VcProductActions>
-    </template>
+    </VcProductCard>
+  `),
+};
 
-    <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+export const FullList: StoryType = {
+  args: {
+    viewMode: "list",
+  },
+  render: renderCard(`
+    <VcProductCard v-bind="args">
+      <VcProductImage v-bind="image" />
 
-    <VcProductVendor>Product Vendor</VcProductVendor>
+      <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+      <VcProductVendor>Product Vendor</VcProductVendor>
 
-    <VcProductProperties>
-      <VcProperty label="Label">Value</VcProperty>
-      <VcProperty label="Label">Value</VcProperty>
-      <VcProperty label="Label">Value</VcProperty>
-    </VcProductProperties>
+      <VcProductProperties>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+      </VcProductProperties>
 
-    <VcQuantityStepper>
-      <VcChip v-bind="chip1">1230</VcChip>
-      <VcChip v-bind="chip2">23</VcChip>
-    </VcQuantityStepper>
+      <VcProductPrice v-bind="price" />
 
-    <VcProductPrice v-bind="{ ...price, singleLine: false }" />
-  </VcProductCard>`,
-});
+      <VcAddToCart v-bind="availabilityData">
+        <VcChip v-bind="chip1">1230</VcChip>
+        <VcChip v-bind="chip2">23</VcChip>
+      </VcAddToCart>
 
-export const FullListQuantityStepper = FullListQuantityStepperTemplate.bind({});
-FullListQuantityStepper.args = {
-  viewMode: "list",
+      <VcProductActions v-bind="args.viewMode === 'grid' ? actions : {}">
+        <VcProductActionsButton />
+        <VcProductActionsButton v-bind="actionsButton" />
+      </VcProductActions>
+    </VcProductCard>
+  `),
 };
 
-export const FullGridQuantityStepper = FullListQuantityStepperTemplate.bind({});
-FullGridQuantityStepper.args = {
-  viewMode: "grid",
+export const FullCardRecommendedWay: StoryType = {
+  args: {
+    viewMode: "grid",
+  },
+  render: renderCard(`
+    <VcProductCard v-bind="args">
+      <template #media>
+        <VcProductImage v-bind="image" />
+
+        <VcProductActions v-bind="actions">
+          <VcProductActionsButton />
+          <VcProductActionsButton v-bind="actionsButton" />
+        </VcProductActions>
+      </template>
+
+      <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+
+      <VcProductVendor>Product Vendor</VcProductVendor>
+
+      <VcProductProperties>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+      </VcProductProperties>
+
+      <VcAddToCart v-bind="availabilityData">
+        <VcChip v-bind="chip1">1230</VcChip>
+        <VcChip v-bind="chip2">23</VcChip>
+      </VcAddToCart>
+
+      <VcProductPrice v-bind="price" />
+    </VcProductCard>
+  `),
 };
 
-const LineItemQuantityStepperTemplate: StoryFn = (args) => ({
-  components: {
-    VcProductCard,
-    VcProductActions,
-    VcProductActionsButton,
-    VcProductImage,
-    VcProductTitle,
-    VcProductVendor,
-    VcProductProperties,
-    VcProperty,
-    VcProductPrice,
-    VcProductTotal,
-    VcQuantityStepper,
-    VcChip,
-    VcRadioButton,
+export const FullListRecommendedWay: StoryType = {
+  args: {
+    viewMode: "list",
   },
-  setup: () => ({ args, title, price, chip1, image }),
-  template: `<VcProductCard v-bind="args">
-    <template #media>
-      <VcProductImage v-bind="image" />
-      <VcRadioButton value="option1" />
-    </template>
-
-    <VcProductTitle v-bind="{ ...title, linesNumber: 3}">Product title Product title</VcProductTitle>
-
-    <VcProductProperties>
-      <VcProperty label="Label">Value</VcProperty>
-      <VcProperty label="Label">Value</VcProperty>
-      <VcProperty label="Label">Value</VcProperty>
-      <VcProperty label="Price per item" class="@4xl:hidden">$1,000</VcProperty>
-    </VcProductProperties>
+  render: renderCard(`
+    <VcProductCard v-bind="args">
+      <template #media>
+        <VcProductImage v-bind="image" />
+
+        <VcProductActions>
+          <VcProductActionsButton />
+          <VcProductActionsButton v-bind="actionsButton" />
+        </VcProductActions>
+      </template>
+
+      <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+
+      <VcProductVendor>Product Vendor</VcProductVendor>
+
+      <VcProductProperties>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+      </VcProductProperties>
+
+      <VcAddToCart v-bind="availabilityData">
+        <VcChip v-bind="chip1">1230</VcChip>
+        <VcChip v-bind="chip2">23</VcChip>
+      </VcAddToCart>
+
+      <VcProductPrice v-bind="{ ...price, singleLine: false }" />
+    </VcProductCard>
+  `),
+};
 
-    <VcQuantityStepper v-bind="{ value: 0 }">
-      <VcChip v-bind="chip1">1230</VcChip>
-    </VcQuantityStepper>
+export const LineItem: StoryType = {
+  args: {
+    viewMode: "item",
+  },
+  render: renderCard(`
+    <VcProductCard v-bind="args">
+      <template #media>
+        <VcProductImage v-bind="image" />
+        <VcRadioButton value="option1" />
+      </template>
+
+      <VcProductTitle v-bind="{ ...title, linesNumber: 3}">Product title Product title</VcProductTitle>
+
+      <VcProductProperties>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Price per item" class="@4xl:hidden">$1,000</VcProperty>
+      </VcProductProperties>
+
+      <VcAddToCart v-bind="{availabilityData, hideButton: true}">
+        <VcChip v-bind="chip1">1230</VcChip>
+      </VcAddToCart>
+
+      <VcProductPrice v-bind="{ ...price, singleLine: false }" />
+
+      <VcProductTotal v-bind="{ ...price, singleLine: false }" />
+    </VcProductCard>
+  `),
+};
 
-    <VcProductPrice v-bind="{ ...price, singleLine: false }" />
+export const FullListQuantityStepper: StoryType = {
+  args: {
+    viewMode: "list",
+  },
+  render: renderCard(`
+    <VcProductCard v-bind="args">
+      <template #media>
+        <VcProductImage v-bind="image" />
+
+        <VcProductActions v-bind="args.viewMode === 'grid' ? actions : {}">
+          <VcProductActionsButton />
+          <VcProductActionsButton v-bind="actionsButton" />
+        </VcProductActions>
+      </template>
+
+      <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+
+      <VcProductVendor>Product Vendor</VcProductVendor>
+
+      <VcProductProperties>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+      </VcProductProperties>
+
+      <VcQuantityStepper>
+        <VcChip v-bind="chip1">1230</VcChip>
+        <VcChip v-bind="chip2">23</VcChip>
+      </VcQuantityStepper>
+
+      <VcProductPrice v-bind="{ ...price, singleLine: false }" />
+    </VcProductCard>
+  `),
+};
 
-    <VcProductTotal v-bind="{ ...price, singleLine: false }" />
-  </VcProductCard>`,
-});
+export const FullGridQuantityStepper: StoryType = {
+  args: {
+    viewMode: "grid",
+  },
+  render: renderCard(`
+    <VcProductCard v-bind="args">
+      <template #media>
+        <VcProductImage v-bind="image" />
+
+        <VcProductActions v-bind="args.viewMode === 'grid' ? actions : {}">
+          <VcProductActionsButton />
+          <VcProductActionsButton v-bind="actionsButton" />
+        </VcProductActions>
+      </template>
+
+      <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+
+      <VcProductVendor>Product Vendor</VcProductVendor>
+
+      <VcProductProperties>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+      </VcProductProperties>
+
+      <VcQuantityStepper>
+        <VcChip v-bind="chip1">1230</VcChip>
+        <VcChip v-bind="chip2">23</VcChip>
+      </VcQuantityStepper>
+
+      <VcProductPrice v-bind="{ ...price, singleLine: false }" />
+    </VcProductCard>
+  `),
+};
 
-export const LineItemQuantityStepper = LineItemQuantityStepperTemplate.bind({});
-LineItemQuantityStepper.args = {
-  viewMode: "item",
+export const LineItemQuantityStepper: StoryType = {
+  args: {
+    viewMode: "item",
+  },
+  render: renderCard(`
+    <VcProductCard v-bind="args">
+      <template #media>
+        <VcProductImage v-bind="image" />
+        <VcRadioButton value="option1" />
+      </template>
+
+      <VcProductTitle v-bind="{ ...title, linesNumber: 3 }">Product title Product title</VcProductTitle>
+
+      <VcProductProperties>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Label">Value</VcProperty>
+        <VcProperty label="Price per item" class="@4xl:hidden">$1,000</VcProperty>
+      </VcProductProperties>
+
+      <VcQuantityStepper v-bind="{ value: 0 }">
+        <VcChip v-bind="chip1">1230</VcChip>
+      </VcQuantityStepper>
+
+      <VcProductPrice v-bind="{ ...price, singleLine: false }" />
+
+      <VcProductTotal v-bind="{ ...price, singleLine: false }" />
+    </VcProductCard>
+  `),
 };
diff --git a/client-app/ui-kit/components/organisms/product-image/vc-product-image.stories.ts b/client-app/ui-kit/components/organisms/product-image/vc-product-image.stories.ts
index f671b615fb..becfd9b8c4 100644
--- a/client-app/ui-kit/components/organisms/product-image/vc-product-image.stories.ts
+++ b/client-app/ui-kit/components/organisms/product-image/vc-product-image.stories.ts
@@ -1,43 +1,47 @@
 import { VcProductImage } from "..";
-import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-export default {
+const meta: Meta<typeof VcProductImage> = {
   title: "Components/Organisms/VcProductImage",
   component: VcProductImage,
-} as Meta<typeof VcProductImage>;
+  render: (args) => ({
+    setup: () => ({ args }),
+    template: '<VcProductImage class="w-32 h-32" v-bind="args" />',
+  }),
+};
 
-const Template: StoryFn = (args) => ({
-  components: { VcProductImage },
-  setup: () => ({ args }),
-  template: '<VcProductImage class="w-32 h-32" v-bind="args" />',
-});
+export default meta;
+type StoryType = StoryObj<typeof meta>;
 
-export const Basic = Template.bind({});
-Basic.args = {
-  imgSrc: "product-example-1.webp",
-  alt: "Product",
+export const Basic: StoryType = {
+  args: {
+    imgSrc: "product-example-1.webp",
+    alt: "Product",
+  },
 };
 
-export const Lazy = Template.bind({});
-Lazy.args = {
-  imgSrc: "product-example-1.webp",
-  alt: "Product",
+export const Lazy: StoryType = {
+  args: {
+    ...Basic.args,
+    lazy: true,
+  },
 };
 
-export const NoImage = Template.bind({});
-NoImage.args = {
-  alt: "Product",
+export const NoImage: StoryType = {
+  args: {
+    alt: "Product",
+  },
 };
 
-export const Carousel = Template.bind({});
-Carousel.args = {
-  imgSrc: "product-example-1.webp",
-  alt: "Product",
-  images: [
-    { id: "1", url: "product-example-1.webp", sortOrder: 1 },
-    { id: "2", url: "product-example-2.webp", sortOrder: 2 },
-    { id: "3", url: "product-example-3.webp", sortOrder: 3 },
-    { id: "4", url: "product-example-4.webp", sortOrder: 4 },
-    { id: "5", url: "product-example-5.webp", sortOrder: 5 },
-  ],
+export const Carousel: StoryType = {
+  args: {
+    ...Basic.args,
+    images: [
+      { id: "1", url: "product-example-1.webp", sortOrder: 1 },
+      { id: "2", url: "product-example-2.webp", sortOrder: 2 },
+      { id: "3", url: "product-example-3.webp", sortOrder: 3 },
+      { id: "4", url: "product-example-4.webp", sortOrder: 4 },
+      { id: "5", url: "product-example-5.webp", sortOrder: 5 },
+    ],
+  },
 };
diff --git a/client-app/ui-kit/components/organisms/quantity-stepper/vc-quantity-stepper.stories.ts b/client-app/ui-kit/components/organisms/quantity-stepper/vc-quantity-stepper.stories.ts
index f366fbd4a6..375a2f61d4 100644
--- a/client-app/ui-kit/components/organisms/quantity-stepper/vc-quantity-stepper.stories.ts
+++ b/client-app/ui-kit/components/organisms/quantity-stepper/vc-quantity-stepper.stories.ts
@@ -1,18 +1,13 @@
 import { ref } from "vue";
 import { VcQuantityStepper } from "..";
-import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
 const SIZES = ["sm", "md"];
 
-export default {
+const meta: Meta<typeof VcQuantityStepper> = {
   title: "Components/Organisms/VcQuantityStepper",
   component: VcQuantityStepper,
   argTypes: {
-    /**
-     * Docs:
-     *  https://storybook.js.org/docs/vue/essentials/controls#annotation
-     *  https://storybook.js.org/docs/vue/api/argtypes#manual-specification
-     */
     size: {
       control: "radio",
       options: SIZES,
@@ -24,52 +19,65 @@ export default {
       },
     },
   },
-} as Meta<typeof VcQuantityStepper>;
-
-const Template: StoryFn = (args) => ({
-  components: { VcQuantityStepper },
-  setup: () => {
-    const localValue = ref(args.value ?? 0);
-    return { args, localValue };
-  },
-  template: `
+  render: (args) => ({
+    setup: () => {
+      const localValue = ref(args.value ?? 0);
+      return { args, localValue };
+    },
+    template: `
     <VcQuantityStepper
       v-bind="args"
       v-model="localValue"
     />
   `,
-});
+  }),
+};
 
-export const Basic = Template.bind({});
+export default meta;
+type StoryType = StoryObj<typeof meta>;
 
-export const MinMax = Template.bind({});
-MinMax.args = {
-  min: 3,
-  max: 10,
-  value: 3,
+export const Basic: StoryType = {
+  args: {},
 };
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-  value: 0,
+export const MinMax: StoryType = {
+  args: {
+    min: 3,
+    max: 10,
+    value: 3,
+  },
 };
 
-export const Readonly = Template.bind({});
-Readonly.args = {
-  readonly: true,
-  value: 5,
+export const Disabled: StoryType = {
+  args: {
+    disabled: true,
+    value: 0,
+  },
 };
 
-export const Errored = Template.bind({});
-Errored.args = {
-  error: true,
-  message: "Error message",
-  value: 5,
+export const Readonly: StoryType = {
+  args: {
+    readonly: true,
+    value: 5,
+  },
 };
 
-export const SelectOnClick = Template.bind({});
-SelectOnClick.args = {
-  selectOnClick: true,
-  value: 5,
+export const Errored: StoryType = {
+  args: {
+    error: true,
+    message: "Error message",
+    value: 5,
+  },
+  decorators: [
+    () => ({
+      template: '<div id="popover-host"></div><story />',
+    }),
+  ],
+};
+
+export const SelectOnClick: StoryType = {
+  args: {
+    selectOnClick: true,
+    value: 5,
+  },
 };