diff --git a/src/Playground.vue b/src/Playground.vue
index b62d5b2416f9db9f2f582ae4d61feaca47f9d9f3..4a7b48a07de92af50e498a4f1b645029abf335c0 100644
--- a/src/Playground.vue
+++ b/src/Playground.vue
@@ -204,14 +204,17 @@ const openDrawer = () => (visibleDrawer.value = true);
   <ProgressBar v-model="pbValue" />
   <Carousel
     style="margin: 20px"
+    theme="rose"
     :itemsProps="[
       {
         index: 1,
         text: 'This is SPARTA!',
+        src: 'storybook.svg',
       },
       {
         index: 2,
         text: 'This is the second item!',
+        src: 'https://www.industrialempathy.com/img/remote/ZiClJf-640w.avif',
       },
       {
         index: 3,
@@ -224,8 +227,9 @@ const openDrawer = () => (visibleDrawer.value = true);
   >
     <template v-slot="item: unknown">
       <h2 style="text-align: center; margin-bottom: 20px">Element {{ item?.index }}</h2>
-      <p>{{ item?.text }}</p></template
-    >
+      <p>{{ item?.text }}</p>
+      <img :src="item.src" :style="`width: ${item.index === 1 ? '30px' : '100%'}`"
+    /></template>
   </Carousel>
   {{ tableData[1] }}
   <Table
diff --git a/src/components/Carousel/Carousel.stories.ts b/src/components/Carousel/Carousel.stories.ts
index 0bd8f47e32defcae329d66169b6a3669750f555a..6cf11b24337c949776ec89b85d9b32dbecaf8b92 100644
--- a/src/components/Carousel/Carousel.stories.ts
+++ b/src/components/Carousel/Carousel.stories.ts
@@ -58,6 +58,7 @@ export const Half: Story = {
     circular: true,
     perView: 2,
     perScroll: 1,
+
     itemsProps: [
       {
         header: 'First',
@@ -76,6 +77,8 @@ export const Half: Story = {
         text: 'Some text',
       },
     ],
+
+    theme: 'sky',
   },
 };
 
@@ -109,6 +112,8 @@ export const Full: Story = {
     ],
 
     buttonsBelow: true,
-    theme: 'sky',
+    theme: 'green',
+    size: 'large',
+    innerWidth: '500px',
   },
 };
diff --git a/src/components/Carousel/Carousel.vue b/src/components/Carousel/Carousel.vue
index 526f35e25ed941f72726a0368ee67237633b358a..e246121462c69d1434ca29884c4b422cdf20e47e 100644
--- a/src/components/Carousel/Carousel.vue
+++ b/src/components/Carousel/Carousel.vue
@@ -25,20 +25,21 @@ const isStartDisabled = computed(() => (props.circular ? false : current.value =
 const isEndDisabled = computed(() =>
   props.circular ? false : current.value === Math.ceil(itemsLength.value / props.perView) || !itemsLength.value,
 );
-const iconSize = computed(() => {
+const sizeCoefficient = computed(() => {
   const size = props.size;
-  if (size === 'normal') return '10';
-  if (size === 'large') return '15';
-  if (size === 'huge') return '18';
-  return '7';
+  if (size === 'normal') return 1;
+  if (size === 'large') return 2;
+  if (size === 'huge') return 3;
+  return 0.75;
 });
+const iconSize = computed(() => 10 * sizeCoefficient.value);
 const itemWidth = computed(() => `calc(${props.innerWidth} / ${props.perView}`);
 const buttonSize = computed(() => {
   const size = props.size;
-  if (size === 'normal') return '13px';
-  if (size === 'large') return '19px';
-  if (size === 'huge') return '24px';
-  return '9px';
+  if (size === 'normal') return 12 * sizeCoefficient.value + 'px';
+  if (size === 'large') return 12 * sizeCoefficient.value + 'px';
+  if (size === 'huge') return 15 * sizeCoefficient.value + 'px';
+  return 9 * sizeCoefficient.value + 'px';
 });
 const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props.perView} * ${current.value - 1}))`);
 </script>
@@ -47,13 +48,13 @@ const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props
   <section class="carouselContainer">
     <CarouselButtonContainer
       @click="!isStartDisabled ? (current = getNewValue('-', current, itemsLength, perScroll, perView)) : null"
-      width="50px"
-      borderRadius="5px"
+      :width="50 * sizeCoefficient + 'px'"
+      :borderRadius="5 * sizeCoefficient + 'px'"
       :textColor="textColor"
-      :color="color"
+      :color="!isStartDisabled ? color : '#aaa'"
       :disable="isStartDisabled"
     >
-      <ArrowLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" />
+      <ArrowLeftShortIcon :size="iconSize" />
     </CarouselButtonContainer>
     <div class="content">
       <ul class="list">
@@ -76,13 +77,13 @@ const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props
     </div>
     <CarouselButtonContainer
       @click="!isEndDisabled ? (current = getNewValue('+', current, itemsLength, perScroll, perView)) : null"
-      width="50px"
-      borderRadius="5px"
+      :width="50 * sizeCoefficient + 'px'"
+      :borderRadius="5 * sizeCoefficient + 'px'"
       :textColor="textColor"
-      :color="color"
+      :color="!isEndDisabled ? color : '#aaa'"
       :disable="isEndDisabled"
     >
-      <ArrowRightShortIcon :color="isEndDisabled ? '#aaa' : textColor" :size="iconSize" />
+      <ArrowRightShortIcon :size="iconSize" />
     </CarouselButtonContainer>
     <div class="buttons" v-if="buttonsBelow">
       <CarouselButtonContainer
@@ -92,7 +93,8 @@ const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props
         borderRadius="50%"
         :textColor="textColor"
         :color="color"
-        ><div @click="current = item + 1" class="button"></div
+        @click="current = item + 1"
+        ><div class="button" :style="`border-width: ${size === 'large' || size === 'huge' ? '2px' : '1px'}`"></div
       ></CarouselButtonContainer>
     </div>
   </section>
@@ -127,7 +129,7 @@ const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props
 }
 .button {
   background-color: v-bind(color);
-  border: 1px solid black;
+  border: solid black;
   border-radius: 50%;
   cursor: pointer;
   width: v-bind(buttonSize);