diff --git a/.storybook/stories/other/Example/DotsExample.tsx b/.storybook/stories/other/Example/DotsExample.tsx
index 46cff5241..255951efb 100644
--- a/.storybook/stories/other/Example/DotsExample.tsx
+++ b/.storybook/stories/other/Example/DotsExample.tsx
@@ -5,7 +5,7 @@ import {Button, Dots, rem, View} from '@lad-tech/mobydick-core';
 const DotsExample = ({length}: {length: number}) => {
   const [activeDot, setActiveDot] = useState(0);
   const [activeDotFirstHalf, setActiveDotFirstHalf] = useState(2);
-  const [activeDotSecondHalf, setActiveDotSecondHalf] = useState(7);
+  const [activeDotSecondHalf, setActiveDotSecondHalf] = useState(3);
 
   const onPressPrevFirstHalf = useCallback(() => {
     if (activeDotFirstHalf !== 0) {
@@ -68,7 +68,12 @@ const DotsExample = ({length}: {length: number}) => {
           paddingHorizontal: rem(20),
         }}>
         <Button text={'Prev'} onPress={onPressPrevSecondHalf} />
-        <Dots length={length} activeDot={activeDotSecondHalf} />
+        <Dots
+          length={length}
+          activeDot={activeDotSecondHalf}
+          fixedSize={6}
+          activeDotColor={'red'}
+        />
         <Button text={'Next'} onPress={onPressNextSecondHalf} />
       </View>
     </View>
diff --git a/packages/core/src/other/README.md b/packages/core/src/other/README.md
index 42319265e..d35eb7dca 100644
--- a/packages/core/src/other/README.md
+++ b/packages/core/src/other/README.md
@@ -25,3 +25,7 @@ maxLength —— по default 2, отображает максимальное 
 
 isLoop – бесконечная карусель, вы должны понимать, что элементов в ней лучше немного использовать
 isDots – не использовать, они еще в работе
+
+
+## ***Dots***
+fixedSize – будет работать, если элементов меньше 7
diff --git a/packages/core/src/other/components/Carousel/Carousel.tsx b/packages/core/src/other/components/Carousel/Carousel.tsx
index f8c3f0f93..f600c726b 100644
--- a/packages/core/src/other/components/Carousel/Carousel.tsx
+++ b/packages/core/src/other/components/Carousel/Carousel.tsx
@@ -42,6 +42,9 @@ const Carousel = <T,>({
   isScrolling = false,
   ms = 2000,
   indexScroll,
+  dotSize,
+  activeDotColor,
+  passiveDotColor,
   ...otherProps
 }: ICarouselProps<T>): JSX.Element => {
   const ref = useRef<FlatList>(null);
@@ -231,6 +234,9 @@ const Carousel = <T,>({
           length={data.length}
           activeDot={currIndex}
           animateAutoScroll={animateAutoScroll}
+          fixedSize={dotSize}
+          activeDotColor={activeDotColor}
+          passiveDotColor={passiveDotColor}
         />
       )}
     </>
diff --git a/packages/core/src/other/components/Carousel/__tests__/Carousel.test.tsx b/packages/core/src/other/components/Carousel/__tests__/Carousel.test.tsx
index eaf1e3ca1..4e80f3436 100644
--- a/packages/core/src/other/components/Carousel/__tests__/Carousel.test.tsx
+++ b/packages/core/src/other/components/Carousel/__tests__/Carousel.test.tsx
@@ -207,6 +207,25 @@ describe('Carousel', () => {
       },
     });
   });
+  it('render Carousel isDots with props', () => {
+    const {toJSON} = render(
+      <SafeAreaProvider>
+        <Carousel
+          data={data}
+          sliderItem={sliderItem}
+          keyExtractor={keyExtractor}
+          isDots={true}
+          activeItemId={'1'}
+          itemWidth={itemWidth}
+          align={ICarouselAlign.start}
+          dotSize={4}
+          activeDotColor={'red'}
+          passiveDotColor={'black'}
+        />
+      </SafeAreaProvider>,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
   it('render Carousel onActiveChange', () => {
     const {toJSON} = render(
       <SafeAreaProvider>
diff --git a/packages/core/src/other/components/Carousel/__tests__/__snapshots__/Carousel.test.tsx.snap b/packages/core/src/other/components/Carousel/__tests__/__snapshots__/Carousel.test.tsx.snap
index dca4ba0dd..0ac3ca539 100644
--- a/packages/core/src/other/components/Carousel/__tests__/__snapshots__/Carousel.test.tsx.snap
+++ b/packages/core/src/other/components/Carousel/__tests__/__snapshots__/Carousel.test.tsx.snap
@@ -3749,13 +3749,680 @@ exports[`Carousel render Carousel isDots 1`] = `
         <View
           style={
             [
+              {
+                "borderRadius": 6,
+                "height": 12,
+                "marginHorizontal": 7.5,
+                "width": 12,
+              },
               {
                 "backgroundColor": "#5E6678",
+              },
+            ]
+          }
+        />
+        <View
+          style={
+            [
+              {
+                "borderRadius": 6,
+                "height": 12,
+                "marginHorizontal": 7.5,
+                "width": 12,
+              },
+              {
+                "backgroundColor": "#B6BBC6",
+              },
+            ]
+          }
+        />
+        <View
+          style={
+            [
+              {
+                "borderRadius": 6,
+                "height": 12,
+                "marginHorizontal": 7.5,
+                "width": 12,
+              },
+              {
+                "backgroundColor": "#B6BBC6",
+              },
+            ]
+          }
+        />
+        <View
+          style={
+            [
+              {
+                "borderRadius": 4.5,
+                "height": 9,
+                "marginHorizontal": 7.5,
+                "width": 9,
+              },
+              {
+                "backgroundColor": "#B6BBC6",
+              },
+            ]
+          }
+        />
+        <View
+          style={
+            [
+              {
+                "borderRadius": 3,
+                "height": 6,
+                "marginHorizontal": 7.5,
+                "width": 6,
+              },
+              {
+                "backgroundColor": "#B6BBC6",
+              },
+            ]
+          }
+        />
+        <View
+          style={
+            [
+              {
+                "borderRadius": 3,
+                "height": 6,
+                "marginHorizontal": 7.5,
+                "width": 6,
+              },
+              {
+                "backgroundColor": "#B6BBC6",
+              },
+            ]
+          }
+        />
+        <View
+          style={
+            [
+              {
+                "borderRadius": 3,
+                "height": 6,
+                "marginHorizontal": 7.5,
+                "width": 6,
+              },
+              {
+                "backgroundColor": "#B6BBC6",
+              },
+            ]
+          }
+        />
+      </View>
+    </RCTScrollView>
+  </View>,
+]
+`;
+
+exports[`Carousel render Carousel isDots with props 1`] = `
+[
+  <RCTScrollView
+    accessibilityLabel="carousel"
+    bounces={false}
+    data={
+      [
+        {
+          "id": "0",
+          "name": "icon-starfill",
+        },
+        {
+          "id": "1",
+          "name": "icon-starfill",
+        },
+        {
+          "id": "2",
+          "name": "icon-starfill",
+        },
+        {
+          "id": "3",
+          "name": "icon-starfill",
+        },
+        {
+          "id": "4",
+          "name": "icon-starfill",
+        },
+        {
+          "id": "5",
+          "name": "icon-starfill",
+        },
+        {
+          "id": "6",
+          "name": "icon-starfill",
+        },
+      ]
+    }
+    decelerationRate={0}
+    extraData={false}
+    getItem={[Function]}
+    getItemCount={[Function]}
+    horizontal={true}
+    initialNumToRender={10}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onEndReachedThreshold={0.5}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    onScrollToIndexFailed={[Function]}
+    onViewableItemsChanged={[Function]}
+    pagingEnabled={true}
+    removeClippedSubviews={true}
+    renderItem={[Function]}
+    scrollEventThrottle={16}
+    showsHorizontalScrollIndicator={false}
+    snapToAlignment="start"
+    snapToInterval={130}
+    stickyHeaderIndices={[]}
+    viewabilityConfig={
+      {
+        "itemVisiblePercentThreshold": 80,
+        "waitForInteraction": true,
+      }
+    }
+    viewabilityConfigCallbackPairs={
+      [
+        {
+          "onViewableItemsChanged": [Function],
+          "viewabilityConfig": {
+            "itemVisiblePercentThreshold": 80,
+            "waitForInteraction": true,
+          },
+        },
+      ]
+    }
+  >
+    <View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="carouselItem"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "marginHorizontal": 15,
+              "opacity": 1,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={true}
+            style={
+              {
+                "color": "#5E6678",
+                "fontFamily": "Neotis",
+                "fontSize": 36,
+              }
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="carouselItem"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "marginHorizontal": 15,
+              "opacity": 1,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={true}
+            style={
+              {
+                "color": "#5E6678",
+                "fontFamily": "Neotis",
+                "fontSize": 36,
+              }
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="carouselItem"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "marginHorizontal": 15,
+              "opacity": 1,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={true}
+            style={
+              {
+                "color": "#5E6678",
+                "fontFamily": "Neotis",
+                "fontSize": 36,
+              }
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="carouselItem"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "marginHorizontal": 15,
+              "opacity": 1,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={true}
+            style={
+              {
+                "color": "#5E6678",
+                "fontFamily": "Neotis",
+                "fontSize": 36,
+              }
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="carouselItem"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "marginHorizontal": 15,
+              "opacity": 1,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={true}
+            style={
+              {
+                "color": "#5E6678",
+                "fontFamily": "Neotis",
+                "fontSize": 36,
+              }
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="carouselItem"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "marginHorizontal": 15,
+              "opacity": 1,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={true}
+            style={
+              {
+                "color": "#5E6678",
+                "fontFamily": "Neotis",
+                "fontSize": 36,
+              }
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="carouselItem"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "marginHorizontal": 15,
+              "opacity": 1,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={true}
+            style={
+              {
+                "color": "#5E6678",
+                "fontFamily": "Neotis",
+                "fontSize": 36,
+              }
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+    </View>
+  </RCTScrollView>,
+  <View
+    accessibilityLabel="dotsAnimatedView"
+    collapsable={false}
+    onLayout={[Function]}
+    style={
+      {
+        "width": 150,
+      }
+    }
+  >
+    <RCTScrollView
+      accessibilityLabel="dotsScrollView"
+      bounces={false}
+      contentContainerStyle={
+        {
+          "alignItems": "center",
+        }
+      }
+      horizontal={true}
+      scrollEnabled={false}
+      showsHorizontalScrollIndicator={false}
+    >
+      <View>
+        <View
+          style={
+            [
+              {
                 "borderRadius": 6,
                 "height": 12,
                 "marginHorizontal": 7.5,
                 "width": 12,
               },
+              {
+                "backgroundColor": "red",
+              },
             ]
           }
         />
@@ -3763,12 +4430,14 @@ exports[`Carousel render Carousel isDots 1`] = `
           style={
             [
               {
-                "backgroundColor": "#B6BBC6",
                 "borderRadius": 6,
                 "height": 12,
                 "marginHorizontal": 7.5,
                 "width": 12,
               },
+              {
+                "backgroundColor": "black",
+              },
             ]
           }
         />
@@ -3776,12 +4445,14 @@ exports[`Carousel render Carousel isDots 1`] = `
           style={
             [
               {
-                "backgroundColor": "#B6BBC6",
                 "borderRadius": 6,
                 "height": 12,
                 "marginHorizontal": 7.5,
                 "width": 12,
               },
+              {
+                "backgroundColor": "black",
+              },
             ]
           }
         />
@@ -3789,12 +4460,14 @@ exports[`Carousel render Carousel isDots 1`] = `
           style={
             [
               {
-                "backgroundColor": "#B6BBC6",
                 "borderRadius": 4.5,
                 "height": 9,
                 "marginHorizontal": 7.5,
                 "width": 9,
               },
+              {
+                "backgroundColor": "black",
+              },
             ]
           }
         />
@@ -3802,12 +4475,14 @@ exports[`Carousel render Carousel isDots 1`] = `
           style={
             [
               {
-                "backgroundColor": "#B6BBC6",
                 "borderRadius": 3,
                 "height": 6,
                 "marginHorizontal": 7.5,
                 "width": 6,
               },
+              {
+                "backgroundColor": "black",
+              },
             ]
           }
         />
@@ -3815,12 +4490,14 @@ exports[`Carousel render Carousel isDots 1`] = `
           style={
             [
               {
-                "backgroundColor": "#B6BBC6",
                 "borderRadius": 3,
                 "height": 6,
                 "marginHorizontal": 7.5,
                 "width": 6,
               },
+              {
+                "backgroundColor": "black",
+              },
             ]
           }
         />
@@ -3828,12 +4505,14 @@ exports[`Carousel render Carousel isDots 1`] = `
           style={
             [
               {
-                "backgroundColor": "#B6BBC6",
                 "borderRadius": 3,
                 "height": 6,
                 "marginHorizontal": 7.5,
                 "width": 6,
               },
+              {
+                "backgroundColor": "black",
+              },
             ]
           }
         />
diff --git a/packages/core/src/other/components/Carousel/types.ts b/packages/core/src/other/components/Carousel/types.ts
index d922912f6..daa72fea4 100644
--- a/packages/core/src/other/components/Carousel/types.ts
+++ b/packages/core/src/other/components/Carousel/types.ts
@@ -23,4 +23,7 @@ export interface ICarouselProps<T>
   isScrolling?: boolean;
   ms?: number;
   indexScroll?: number;
+  dotSize?: number;
+  activeDotColor?: string;
+  passiveDotColor?: string;
 }
diff --git a/packages/core/src/other/components/Dots/Dot.tsx b/packages/core/src/other/components/Dots/Dot.tsx
index 5b1a8da3f..ac3436a59 100644
--- a/packages/core/src/other/components/Dots/Dot.tsx
+++ b/packages/core/src/other/components/Dots/Dot.tsx
@@ -1,19 +1,40 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 
 import useStyles from '../../../styles/theme/hooks/useStyles';
 import View from '../../../basic/components/View/View';
+import {useTheme} from '../../../styles';
 
 import stylesCreate from './stylesCreate';
 
 interface IDot {
   active: boolean;
   size: number;
+  activeDotColor?: string | undefined;
+  passiveDotColor?: string | undefined;
 }
 
-const Dot = ({active, size}: IDot): JSX.Element => {
-  const [styles] = useStyles(stylesCreate, size, active);
+const Dot = ({
+  active,
+  size,
+  activeDotColor,
+  passiveDotColor,
+}: IDot): JSX.Element => {
+  const [styles] = useStyles(stylesCreate, size);
+  const {colors} = useTheme();
 
-  return <View style={[styles.dot]} />;
+  const backgroundColor = useMemo(() => {
+    return active
+      ? activeDotColor || colors.ElementNeutral
+      : passiveDotColor || colors.ElementMuted;
+  }, [
+    active,
+    activeDotColor,
+    colors.ElementMuted,
+    colors.ElementNeutral,
+    passiveDotColor,
+  ]);
+
+  return <View style={[styles.dot, {backgroundColor: backgroundColor}]} />;
 };
 
 export default Dot;
diff --git a/packages/core/src/other/components/Dots/Dots.tsx b/packages/core/src/other/components/Dots/Dots.tsx
index d6039a112..02def7151 100644
--- a/packages/core/src/other/components/Dots/Dots.tsx
+++ b/packages/core/src/other/components/Dots/Dots.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {ScrollView, Animated} from 'react-native';
 
 import View from '../../../basic/components/View/View';
@@ -22,7 +22,14 @@ function getDirection(newIdx: number, prevIdx: number): number {
   return newIdx < prevIdx ? -1 : 1;
 }
 
-const Dots = ({length, activeDot, animateAutoScroll = true}: IDotsProps) => {
+const Dots = ({
+  length,
+  activeDot,
+  animateAutoScroll = true,
+  fixedSize,
+  activeDotColor,
+  passiveDotColor,
+}: IDotsProps) => {
   const refScrollView = useRef<ScrollView>(null);
   const dots = [...Array(length).keys()];
   const [prevIndex, setPrevIndex] = useState(activeDot - 1);
@@ -98,7 +105,7 @@ const Dots = ({length, activeDot, animateAutoScroll = true}: IDotsProps) => {
 
   useEffect(() => {
     isDynamicDots ? setIndexes() : isMiddleDotActive && scrollTo(activeDot);
-  }, [activeDot]);
+  }, [activeDot, isDynamicDots, isMiddleDotActive]);
 
   const size = useCallback(
     (k: number) => {
@@ -124,7 +131,13 @@ const Dots = ({length, activeDot, animateAutoScroll = true}: IDotsProps) => {
 
   const renderDot = () => {
     return dots.map(dot => (
-      <Dot key={dot} active={dot === activeDot} size={size(dot)} />
+      <Dot
+        key={dot}
+        active={dot === activeDot}
+        size={isDynamicDots ? fixedSize || size(dot) : size(dot)}
+        activeDotColor={activeDotColor}
+        passiveDotColor={passiveDotColor}
+      />
     ));
   };
 
@@ -133,6 +146,12 @@ const Dots = ({length, activeDot, animateAutoScroll = true}: IDotsProps) => {
     scrollTo(activeDot);
   }, [activeDot]);
 
+  const width = useMemo(() => {
+    return isDynamicDots
+      ? (fixedSize && (fixedSize + MARGIN_DOT) * 8) || WIDTH_MEDIUM
+      : WIDTH_MEDIUM;
+  }, [fixedSize, isDynamicDots]);
+
   if (isDynamicDots) {
     return (
       <View
@@ -149,7 +168,7 @@ const Dots = ({length, activeDot, animateAutoScroll = true}: IDotsProps) => {
     <Animated.View
       style={[
         {
-          width: WIDTH_MEDIUM,
+          width: width,
         },
       ]}
       onLayout={onLayout}
diff --git a/packages/core/src/other/components/Dots/__tests__/Dots.test.tsx b/packages/core/src/other/components/Dots/__tests__/Dots.test.tsx
index b5111e40c..549dcfaf0 100644
--- a/packages/core/src/other/components/Dots/__tests__/Dots.test.tsx
+++ b/packages/core/src/other/components/Dots/__tests__/Dots.test.tsx
@@ -17,6 +17,18 @@ describe('Dots', () => {
     const {toJSON} = render(<Dots length={16} activeDot={2} />);
     expect(toJSON()).toMatchSnapshot();
   });
+  test('render dots activeDot=2 fixedSize', () => {
+    const {toJSON} = render(
+      <Dots
+        length={5}
+        activeDot={2}
+        fixedSize={4}
+        passiveDotColor={'black'}
+        activeDotColor={'red'}
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
   test('render dots activeDot=10', () => {
     const {toJSON} = render(
       <Dots length={10} activeDot={9} animateAutoScroll={false} />,
diff --git a/packages/core/src/other/components/Dots/__tests__/__snapshots__/Dots.test.tsx.snap b/packages/core/src/other/components/Dots/__tests__/__snapshots__/Dots.test.tsx.snap
index 78a147acd..7aecf1c0a 100644
--- a/packages/core/src/other/components/Dots/__tests__/__snapshots__/Dots.test.tsx.snap
+++ b/packages/core/src/other/components/Dots/__tests__/__snapshots__/Dots.test.tsx.snap
@@ -39,12 +39,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -52,12 +54,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -65,12 +69,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -78,12 +84,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -91,12 +99,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -104,12 +114,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -117,12 +129,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -130,12 +144,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -143,12 +159,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -156,12 +174,14 @@ exports[`Dots render dots activeDot left 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -198,12 +218,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -211,12 +233,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -224,12 +248,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -237,12 +263,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -250,12 +278,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -263,12 +293,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -276,12 +308,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -289,12 +323,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -302,12 +338,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -315,12 +353,14 @@ exports[`Dots render dots activeDot left 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -357,12 +397,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -370,12 +412,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -383,12 +427,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -396,12 +442,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -409,12 +457,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -422,12 +472,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -435,12 +487,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -448,12 +502,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -461,12 +517,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -474,12 +532,14 @@ exports[`Dots render dots activeDot left 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -516,12 +576,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -529,12 +591,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -542,12 +606,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -555,12 +621,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -568,12 +636,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -581,12 +651,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -594,12 +666,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -607,12 +681,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -620,12 +696,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -633,12 +711,14 @@ exports[`Dots render dots activeDot left 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -675,12 +755,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -688,12 +770,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -701,12 +785,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -714,12 +800,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -727,12 +815,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -740,12 +830,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -753,12 +845,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -766,12 +860,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -779,12 +875,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -792,12 +890,14 @@ exports[`Dots render dots activeDot right 1`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -834,12 +934,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -847,12 +949,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -860,12 +964,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -873,12 +979,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -886,12 +994,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -899,12 +1009,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -912,12 +1024,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -925,12 +1039,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -938,12 +1054,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -951,12 +1069,14 @@ exports[`Dots render dots activeDot right 2`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -993,12 +1113,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1006,12 +1128,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -1019,12 +1143,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1032,12 +1158,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1045,12 +1173,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1058,12 +1188,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1071,12 +1203,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1084,12 +1218,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1097,12 +1233,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1110,12 +1248,14 @@ exports[`Dots render dots activeDot right 3`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1152,12 +1292,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -1165,12 +1307,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1178,12 +1322,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1191,12 +1337,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1204,12 +1352,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1217,12 +1367,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1230,12 +1382,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1243,12 +1397,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1256,12 +1412,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1269,12 +1427,14 @@ exports[`Dots render dots activeDot right 4`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1311,12 +1471,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1324,12 +1486,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1337,12 +1501,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -1350,12 +1516,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1363,12 +1531,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1376,12 +1546,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1389,12 +1561,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1402,12 +1576,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1415,12 +1591,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1428,12 +1606,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1441,12 +1621,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1454,12 +1636,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1467,12 +1651,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1480,12 +1666,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1493,12 +1681,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1506,12 +1696,14 @@ exports[`Dots render dots activeDot=2 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1520,6 +1712,93 @@ exports[`Dots render dots activeDot=2 1`] = `
 </View>
 `;
 
+exports[`Dots render dots activeDot=2 fixedSize 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 2,
+          "height": 4,
+          "marginHorizontal": 7.5,
+          "width": 4,
+        },
+        {
+          "backgroundColor": "black",
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "borderRadius": 2,
+          "height": 4,
+          "marginHorizontal": 7.5,
+          "width": 4,
+        },
+        {
+          "backgroundColor": "black",
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "borderRadius": 2,
+          "height": 4,
+          "marginHorizontal": 7.5,
+          "width": 4,
+        },
+        {
+          "backgroundColor": "red",
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "borderRadius": 2,
+          "height": 4,
+          "marginHorizontal": 7.5,
+          "width": 4,
+        },
+        {
+          "backgroundColor": "black",
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "borderRadius": 2,
+          "height": 4,
+          "marginHorizontal": 7.5,
+          "width": 4,
+        },
+        {
+          "backgroundColor": "black",
+        },
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`Dots render dots activeDot=10 1`] = `
 <View
   accessibilityLabel="dotsAnimatedView"
@@ -1548,12 +1827,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1561,12 +1842,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1574,12 +1857,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1587,12 +1872,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1600,12 +1887,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1613,12 +1902,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1626,12 +1917,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1639,12 +1932,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1652,12 +1947,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1665,12 +1962,14 @@ exports[`Dots render dots activeDot=10 1`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -1707,12 +2006,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1720,12 +2021,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1733,12 +2036,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1746,12 +2051,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1759,12 +2066,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1772,12 +2081,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1785,12 +2096,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1798,12 +2111,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1811,12 +2126,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1824,12 +2141,14 @@ exports[`Dots render dots activeDot=10 animateAutoScroll 1`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -1851,12 +2170,14 @@ exports[`Dots render dots length < 7 1`] = `
     style={
       [
         {
-          "backgroundColor": "#5E6678",
           "borderRadius": 6,
           "height": 12,
           "marginHorizontal": 7.5,
           "width": 12,
         },
+        {
+          "backgroundColor": "#5E6678",
+        },
       ]
     }
   />
@@ -1864,12 +2185,14 @@ exports[`Dots render dots length < 7 1`] = `
     style={
       [
         {
-          "backgroundColor": "#B6BBC6",
           "borderRadius": 6,
           "height": 12,
           "marginHorizontal": 7.5,
           "width": 12,
         },
+        {
+          "backgroundColor": "#B6BBC6",
+        },
       ]
     }
   />
@@ -1877,12 +2200,14 @@ exports[`Dots render dots length < 7 1`] = `
     style={
       [
         {
-          "backgroundColor": "#B6BBC6",
           "borderRadius": 6,
           "height": 12,
           "marginHorizontal": 7.5,
           "width": 12,
         },
+        {
+          "backgroundColor": "#B6BBC6",
+        },
       ]
     }
   />
@@ -1890,12 +2215,14 @@ exports[`Dots render dots length < 7 1`] = `
     style={
       [
         {
-          "backgroundColor": "#B6BBC6",
           "borderRadius": 4.5,
           "height": 9,
           "marginHorizontal": 7.5,
           "width": 9,
         },
+        {
+          "backgroundColor": "#B6BBC6",
+        },
       ]
     }
   />
@@ -1903,12 +2230,14 @@ exports[`Dots render dots length < 7 1`] = `
     style={
       [
         {
-          "backgroundColor": "#B6BBC6",
           "borderRadius": 3,
           "height": 6,
           "marginHorizontal": 7.5,
           "width": 6,
         },
+        {
+          "backgroundColor": "#B6BBC6",
+        },
       ]
     }
   />
@@ -1916,12 +2245,14 @@ exports[`Dots render dots length < 7 1`] = `
     style={
       [
         {
-          "backgroundColor": "#B6BBC6",
           "borderRadius": 3,
           "height": 6,
           "marginHorizontal": 7.5,
           "width": 6,
         },
+        {
+          "backgroundColor": "#B6BBC6",
+        },
       ]
     }
   />
@@ -1956,12 +2287,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -1969,12 +2302,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1982,12 +2317,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -1995,12 +2332,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2008,12 +2347,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2021,12 +2362,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2034,12 +2377,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2047,12 +2392,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2060,12 +2407,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2073,12 +2422,14 @@ exports[`Dots render dots length > 7 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2115,12 +2466,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#5E6678",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#5E6678",
+            },
           ]
         }
       />
@@ -2128,12 +2481,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2141,12 +2496,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 6,
               "height": 12,
               "marginHorizontal": 7.5,
               "width": 12,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2154,12 +2511,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 4.5,
               "height": 9,
               "marginHorizontal": 7.5,
               "width": 9,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2167,12 +2526,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2180,12 +2541,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2193,12 +2556,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2206,12 +2571,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2219,12 +2586,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
@@ -2232,12 +2601,14 @@ exports[`Dots render dots onLayout 1`] = `
         style={
           [
             {
-              "backgroundColor": "#B6BBC6",
               "borderRadius": 3,
               "height": 6,
               "marginHorizontal": 7.5,
               "width": 6,
             },
+            {
+              "backgroundColor": "#B6BBC6",
+            },
           ]
         }
       />
diff --git a/packages/core/src/other/components/Dots/__tests__/stylesCreate.test.ts b/packages/core/src/other/components/Dots/__tests__/stylesCreate.test.ts
index 522765abb..f90c3e810 100644
--- a/packages/core/src/other/components/Dots/__tests__/stylesCreate.test.ts
+++ b/packages/core/src/other/components/Dots/__tests__/stylesCreate.test.ts
@@ -14,7 +14,6 @@ describe('dots/stylesCreate', () => {
         height: rem(8),
         marginHorizontal: rem(5),
         borderRadius: rem(8) / 2,
-        backgroundColor: '#B6BBC6',
       },
       dots: {
         flexDirection: 'row',
diff --git a/packages/core/src/other/components/Dots/stylesCreate.ts b/packages/core/src/other/components/Dots/stylesCreate.ts
index 02fe1a4b4..776191c5d 100644
--- a/packages/core/src/other/components/Dots/stylesCreate.ts
+++ b/packages/core/src/other/components/Dots/stylesCreate.ts
@@ -3,18 +3,13 @@ import {StyleSheet} from 'react-native';
 import {IThemeContext} from '../../../styles';
 import rem from '../../../styles/spaces/rem';
 
-const stylesCreate = (
-  {colors, spaces}: IThemeContext,
-  size = spaces.Space8,
-  active = false,
-) => {
+const stylesCreate = ({spaces}: IThemeContext, size = spaces.Space8) => {
   return StyleSheet.create({
     dot: {
       width: size,
       height: size,
       marginHorizontal: rem(5),
       borderRadius: size / 2,
-      backgroundColor: active ? colors.ElementNeutral : colors.ElementMuted,
     },
     dots: {
       flexDirection: 'row',
diff --git a/packages/core/src/other/components/Dots/types.ts b/packages/core/src/other/components/Dots/types.ts
index c538b58fa..863813dd1 100644
--- a/packages/core/src/other/components/Dots/types.ts
+++ b/packages/core/src/other/components/Dots/types.ts
@@ -3,4 +3,7 @@ export interface IDotsProps {
   activeDot: number;
   maxDots?: number;
   animateAutoScroll?: boolean;
+  fixedSize?: number | undefined;
+  activeDotColor?: string | undefined;
+  passiveDotColor?: string | undefined;
 }