diff --git a/App.tsx b/App.tsx
index f4fbf280..f1ae54b8 100644
--- a/App.tsx
+++ b/App.tsx
@@ -46,11 +46,20 @@ import SwitchDemo from "./demo/components/switch-demo";
 import TextareaDemo from "./demo/components/textarea-demo";
 import CheckboxDemo from "./demo/components/checkbox-demo";
 import RadioDemo from "./demo/components/radio-demo";
-import Stack, { HStack, VStack } from "./src/components/atoms/stack/stack";
+import SpinnerDemo from "./demo/components/spinner-demo";
+import SkeletonDemo from "./demo/components/skeleton-demo";
+import BadgeDemo from "./demo/components/badge-demo";
+import ProgressDemo from "./demo/components/progress-demo";
+import FadeDemo from "./demo/components/fade-demo";
+import ScaleFadeDemo from "./demo/components/scale-fade-demo";
+import SlideDemo from "./demo/components/slide-demo";
+import SlideFadeDemo from "./demo/components/slide-fade-demo";
+import CollapseDemo from "./demo/components/collapse-demo";
+import Stack, { HStack } from "./src/components/atoms/stack/stack";
 import IconButton from "./src/components/molecules/icon-button/icon-button";
 import Box from "./src/components/atoms/box/box";
 import { FlatList, ScrollView } from "react-native";
-import { CheckBox, Radio, useTheme } from "./src";
+import { useTheme } from "./src";
 
 const App = () => {
   const [haveFontsLoaded] = useFonts({
@@ -191,38 +200,47 @@ const componentList: {
   {
     label: "Spinner",
     imageSrc: require("./demo/assets/spinner.png"),
+    component: <SpinnerDemo />,
   },
   {
     label: "Skeleton",
     imageSrc: require("./demo/assets/skeleton.png"),
+    component: <SkeletonDemo />,
   },
   {
     label: "Badge",
     imageSrc: require("./demo/assets/badge.png"),
+    component: <BadgeDemo />,
   },
   {
     label: "Progress",
     imageSrc: require("./demo/assets/progress.png"),
+    component: <ProgressDemo />,
   },
   {
     label: "Fade",
     imageSrc: require("./demo/assets/fade.png"),
+    component: <FadeDemo />,
   },
   {
     label: "Scale Fade",
     imageSrc: require("./demo/assets/scale-fade.png"),
+    component: <ScaleFadeDemo />,
   },
   {
     label: "Slide",
     imageSrc: require("./demo/assets/slide.png"),
+    component: <SlideDemo />,
   },
   {
     label: "Slide Fade",
     imageSrc: require("./demo/assets/slide-fade.png"),
+    component: <SlideFadeDemo />,
   },
   {
     label: "Collapse",
     imageSrc: require("./demo/assets/collapse.png"),
+    component: <CollapseDemo />,
   },
 ];
 
@@ -231,27 +249,6 @@ const Index = () => {
   const [activeComponent, setActiveComponent] = useState<string | undefined>(
     undefined
   );
-  const [radioGroupValue, setRadioGroupValue] = React.useState("B");
-  const [checkboxGroupValue, setCheckboxGroupValue] = React.useState(["B"]);
-  const [checked, setChecked] = React.useState(false);
-  const [isLoaded, setIsLoaded] = React.useState(false);
-  const [progress, setProgress] = React.useState(0);
-  const [text, setText] = React.useState("");
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  React.useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsLoaded(true);
-    }, 2000);
-    return () => clearTimeout(timer);
-  }, []);
-
-  React.useEffect(() => {
-    const progressTimer = setInterval(() => {
-      if (progress < 100) setProgress(progress + 10);
-    }, 500);
-    return () => clearInterval(progressTimer);
-  }, [progress]);
 
   const renderMainComponent = () => {
     if (!activeComponent)
@@ -365,316 +362,6 @@ const Index = () => {
       </Stack>
     </Screen>
   );
-
-  return (
-    <Screen>
-      {/* <Button>Save</Button>
-      <Stack>
-        <Spinner size="xs" />
-        <Spinner size="s" />
-        <Spinner size="m" />
-        <Spinner size="l" />
-
-        <Switch isChecked={checked} onPress={() => setChecked(!checked)} />
-
-        <IconButton
-          size="xs"
-          icon={<Icon iconFamily="AntDesign" iconName="heart" />}
-          onPress={() => setIsOpen(!isOpen)}
-        >
-          Save
-        </IconButton>
-
-        <SlideFade show={isOpen}>
-          <Box mb="4" p="4" bgColor="teal" borderRadius="m" boxShadow="l">
-            <Text color="white" fontWeight="500">
-              alskdnalskndalknsdad
-            </Text>
-          </Box>
-        </SlideFade>
-
-        <Stack direction="vertical">
-          <Text variant="h5">Controlled Checkbox group</Text>
-          <CheckBoxGroup
-            value={checkboxGroupValue}
-            onChange={(newVal) => setCheckboxGroupValue(newVal)}
-          >
-            <CheckBox value="A">A</CheckBox>
-            <CheckBox value="B">B</CheckBox>
-            <CheckBox value="C">C</CheckBox>
-          </CheckBoxGroup>
-        </Stack>
-      </Stack> */}
-
-      {/* <Stack direction="vertical" spacing="6">
-        <Video
-          w="100%"
-          aspectRatio={16 / 9}
-          loaderType="progressive"
-          source={{
-            uri: "https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
-          }}
-          useNativeControls
-          resizeMode={ResizeMode.CONTAIN}
-          fallbackComponent={
-            <Icon
-              iconFamily="MaterialIcons"
-              iconName="error-outline"
-              size="l"
-              color="neutral.50"
-            />
-          }
-          previewSource={{
-            uri: "https://www.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png",
-          }}
-        />
-
-        <Box>
-          <Text variant="h5">Image with preview color loading</Text>
-          <Image
-            mt="4"
-            width="30%"
-            height={100}
-            loaderType="progressive"
-            previewColor="blue"
-            isCached={false}
-            source={{
-              uri: "https://wallpaperaccess.com/full/1713248.jpg",
-            }}
-            previewSource={{
-              uri: "https://www.logolynx.com/images/logolynx/43/430c07f27af3fda19373042528edbe3d.jpeg",
-            }}
-          />
-        </Box>
-
-        <Box>
-          <Text variant="h5">Image with progressive loading</Text>
-          <Image
-            mt="4"
-            width="100%"
-            height={100}
-            loaderType="progressive"
-            isCached={false}
-            source={{
-              uri: "https://wallpaperaccess.com/full/1713248.jpg",
-            }}
-            previewSource={{
-              uri: "https://www.logolynx.com/images/logolynx/43/430c07f27af3fda19373042528edbe3d.jpeg",
-            }}
-          />
-        </Box>
-
-        <Box>
-          <Text variant="h5">Image with spinner loading</Text>
-          <Image
-            mt="4"
-            width={100}
-            height={200}
-            boxShadow="2xl"
-            loaderType="spinner"
-            isCached={false}
-            source={{
-              uri: "https://www.pixel4k.com/wp-content/uploads/2020/08/the-valley-minimal-4k_1596932776.jpg",
-            }}
-          />
-        </Box>
-
-        <Box>
-          <Text variant="h5">Image with error fallback</Text>
-          <Image
-            mt="4"
-            width={100}
-            height={100}
-            loaderType="progressive"
-            fallbackComponent={
-              <Icon
-                iconFamily="MaterialIcons"
-                iconName="error-outline"
-                size="l"
-                color="neutral.50"
-              />
-            }
-            source={{
-              uri: "https://4kwallpapers.com/imas/wallpapers/macos-big-sur-apple-layers-fluidic-colorful-wwdc-stock-2560x1440-1455.jpg",
-            }}
-            previewSource={{
-              uri: "https://www.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png",
-            }}
-          />
-        </Box>
-      </Stack>
-
-      <Stack direction="vertical" spacing="4">
-        <Skeleton isLoaded={isLoaded}>
-          <Stack direction="vertical">
-            <Radio isChecked={checked} onPress={() => setChecked(true)}>
-              Default Radio
-            </Radio>
-            <Radio isDisabled>Disabled Radio</Radio>
-            <Radio isChecked>Checked Radio</Radio>
-            <Radio isInvalid>Error Radio</Radio>
-          </Stack>
-        </Skeleton>
-
-        <Progress variant="filled" value={progress} />
-
-        <Stack direction="vertical">
-          <Radio isChecked={checked} onPress={() => setChecked(true)}>
-            Default Radio
-          </Radio>
-          <Radio isDisabled>Disabled Radio</Radio>
-          <Radio isChecked>Checked Radio</Radio>
-          <Radio isInvalid>Error Radio</Radio>
-        </Stack>
-
-        <Stack direction="vertical">
-          <Text variant="h5">Controlled Radio group</Text>
-          <RadioGroup
-            size="s"
-            spacing="1"
-            value={radioGroupValue}
-            onChange={(newVal) => setRadioGroupValue(newVal)}
-          >
-            <Radio value="A">A</Radio>
-            <Radio value="B">B</Radio>
-            <Radio value="C">C</Radio>
-          </RadioGroup>
-        </Stack>
-
-        <Stack direction="vertical">
-          <Text variant="h5">Controlled Checkbox group</Text>
-          <CheckBoxGroup
-            value={checkboxGroupValue}
-            onChange={(newVal) => setCheckboxGroupValue(newVal)}
-          >
-            <CheckBox value="A">A</CheckBox>
-            <CheckBox value="B">B</CheckBox>
-            <CheckBox value="C">C</CheckBox>
-          </CheckBoxGroup>
-        </Stack>
-
-        <ButtonGroup variant="outline" isAttached>
-          <Button colorScheme="primary">Save</Button>
-          <Button
-            colorScheme="danger"
-            rightIcon={<Icon iconFamily="Ionicons" iconName="md-lock-closed" />}
-          >
-            Lock
-          </Button>
-        </ButtonGroup>
-
-        <Video
-          w="100%"
-          aspectRatio={16 / 9}
-          borderRadius="m"
-          source={{
-            uri: "https://static.videezy.com/system/resources/previews/000/000/080/original/CoffeeCup.mp4",
-          }}
-          useNativeControls
-          resizeMode={ResizeMode.CONTAIN}
-        />
-
-        <Button size="xs">Save</Button>
-        <Button size="s">Save</Button>
-        <Button size="m">Save</Button>
-        <Button size="l">Save</Button>
-
-        <ButtonGroup variant="outline" isAttached>
-          <IconButton
-            icon={<Icon iconFamily="AntDesign" iconName="heart" />}
-            colorScheme="primary"
-          />
-          <IconButton
-            colorScheme="danger"
-            icon={<Icon iconFamily="AntDesign" iconName="pause" />}
-          />
-        </ButtonGroup>
-
-        <IconButton
-          icon={<Icon iconFamily="AntDesign" iconName="heart" />}
-          size="xs"
-        >
-          Save
-        </IconButton>
-        <IconButton
-          icon={<Icon iconFamily="AntDesign" iconName="heart" />}
-          size="s"
-        >
-          Save
-        </IconButton>
-        <IconButton
-          icon={<Icon iconFamily="AntDesign" iconName="heart" />}
-          size="m"
-        >
-          Save
-        </IconButton>
-        <IconButton
-          isLoading
-          icon={<Icon iconFamily="AntDesign" iconName="heart" />}
-          size="l"
-        >
-          Save
-        </IconButton>
-
-        <Textarea
-          value={text}
-          placeholder="Default Textrea"
-          onChangeText={(val) => setText(val)}
-        />
-
-        <Input
-          value={text}
-          variant="filled"
-          placeholder="Default Filled Input"
-          onChangeText={(val) => setText(val)}
-        />
-
-        <Input
-          size="xs"
-          variant="outline"
-          placeholder="Small Outline Input"
-          leftIcon={<Icon iconFamily="Ionicons" iconName="md-lock-closed" />}
-          hasClearButton
-          value={text}
-          onChangeText={(val) => setText(val)}
-        />
-
-        <Input
-          size="s"
-          variant="outline"
-          placeholder="Small Outline Input"
-          // leftIcon={<Icon iconFamily="Ionicons" iconName="md-lock-closed" />}
-          hasClearButton
-          value={text}
-          onChangeText={(val) => setText(val)}
-        />
-
-        <Input
-          size="m"
-          variant="outline"
-          placeholder="Small Outline Input"
-          leftIcon={<Icon iconFamily="Ionicons" iconName="md-lock-closed" />}
-          hasClearButton
-          value={text}
-          onChangeText={(val) => setText(val)}
-        />
-
-        <Input
-          size="l"
-          variant="outline"
-          placeholder="Small Outline Input"
-          rightIcon={<Icon iconFamily="Ionicons" iconName="md-lock-closed" />}
-          hasClearButton
-          value={text}
-          onChangeText={(val) => setText(val)}
-        />
-
-        <Input isFullWidth placeholder="Focused Input" autoFocus />
-        <Input isFullWidth isDisabled placeholder="Disabled Input" />
-        <Input isFullWidth placeholder="Error Input" isInvalid />
-      </Stack> */}
-    </Screen>
-  );
 };
 
 export default App;
diff --git a/demo/components/badge-demo.tsx b/demo/components/badge-demo.tsx
new file mode 100644
index 00000000..f0200f71
--- /dev/null
+++ b/demo/components/badge-demo.tsx
@@ -0,0 +1,169 @@
+import {
+  Text,
+  Stack,
+  HStack,
+  VStack,
+  Icon,
+  Badge,
+  IconProps,
+  withBadge,
+  AvatarProps,
+  Avatar,
+  Box,
+} from "../../src";
+import DemoSection from "./demo-section";
+
+const BadgedIcon = withBadge<IconProps>(1, {
+  size: "s",
+  placement: "topRight",
+  colorScheme: "danger",
+})(Icon);
+
+const BadgedIconTwo = withBadge<IconProps>(
+  <Icon iconFamily="Ionicons" iconName="pencil" size="xs" color="white" />,
+  {
+    size: "s",
+    placement: "bottomRight",
+  }
+)(Icon);
+
+const OnlineAvatar = withBadge<AvatarProps>(undefined, {
+  placement: "bottomRight",
+  backgroundColor: "success.500",
+  size: "s",
+  minW: 15,
+  h: 15,
+  offset: -1,
+})(Avatar);
+
+const BadgeDemo = () => {
+  return (
+    <Stack spacing="6">
+      <DemoSection label="Badge Sizes">
+        <HStack w="100%" justifyContent="space-between">
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              xs
+            </Text>
+            <Badge size="xs">Go</Badge>
+          </Stack>
+
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              s
+            </Text>
+            <Badge size="s">Go</Badge>
+          </Stack>
+
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              m
+            </Text>
+            <Badge size="m">Go</Badge>
+          </Stack>
+
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              l
+            </Text>
+            <Badge size="l">Go</Badge>
+          </Stack>
+        </HStack>
+      </DemoSection>
+
+      <DemoSection label="Badge Sizes">
+        <HStack w="100%" justifyContent="space-between">
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Rounded
+            </Text>
+            <Badge variant="rounded">Go</Badge>
+          </Stack>
+
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Square
+            </Text>
+            <Badge variant="square">Go</Badge>
+          </Stack>
+        </HStack>
+      </DemoSection>
+
+      <DemoSection label="Color Schemes">
+        <HStack w="100%" justifyContent="space-between">
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Primary
+            </Text>
+            <Badge colorScheme="primary">Start</Badge>
+          </Stack>
+
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Warning
+            </Text>
+            <Badge colorScheme="warning">Wait</Badge>
+          </Stack>
+
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Danger
+            </Text>
+            <Badge colorScheme="danger">Stop</Badge>
+          </Stack>
+        </HStack>
+      </DemoSection>
+
+      <DemoSection label="Badge Content">
+        <VStack spacing="4">
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Empty
+            </Text>
+            <Badge />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Text/Number
+            </Text>
+            <Badge>123</Badge>
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Custom Component
+            </Text>
+            <Badge>
+              <Icon
+                size="xs"
+                iconName="edit"
+                iconFamily="Entypo"
+                color="neutral.50"
+              />
+            </Badge>
+          </Stack>
+        </VStack>
+      </DemoSection>
+
+      <DemoSection label="Attached Badges">
+        <Box
+          w="100%"
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <BadgedIcon size="l" iconFamily="FontAwesome" iconName="bell" />
+          <OnlineAvatar
+            size="s"
+            isCached={false}
+            src="https://pbs.twimg.com/profile_images/1419369145058041856/eshLFaDy_400x400.jpg"
+          />
+          <BadgedIconTwo size="l" iconFamily="FontAwesome" iconName="inbox" />
+        </Box>
+      </DemoSection>
+    </Stack>
+  );
+};
+
+export default BadgeDemo;
diff --git a/demo/components/collapse-demo.tsx b/demo/components/collapse-demo.tsx
new file mode 100644
index 00000000..28b81500
--- /dev/null
+++ b/demo/components/collapse-demo.tsx
@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { VStack, Box, Button, Text, Collapse } from "../../src";
+
+const CollapseDemo = () => {
+  const [show, setShow] = useState(true);
+
+  return (
+    <VStack spacing="6">
+      <Button
+        size="s"
+        variant="outline"
+        alignSelf="flex-end"
+        onPress={() => setShow(!show)}
+      >
+        {show ? "Hide" : "Show"}
+      </Button>
+
+      <Collapse show={show}>
+        <Box mb="4" p="4" bgColor="primary.500" borderRadius="m">
+          <Text variant="p3" color="white">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla purus
+            mi, aliquet sed augue ac, ullamcorper vulputate nisi.
+          </Text>
+        </Box>
+      </Collapse>
+    </VStack>
+  );
+};
+
+export default CollapseDemo;
diff --git a/demo/components/fade-demo.tsx b/demo/components/fade-demo.tsx
new file mode 100644
index 00000000..06d2d450
--- /dev/null
+++ b/demo/components/fade-demo.tsx
@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { VStack, Box, Button, Text, Fade } from "../../src";
+
+const FadeDemo = () => {
+  const [show, setShow] = useState(true);
+
+  return (
+    <VStack spacing="6">
+      <Button
+        size="s"
+        variant="outline"
+        alignSelf="flex-end"
+        onPress={() => setShow(!show)}
+      >
+        {show ? "Hide" : "Show"}
+      </Button>
+
+      <Fade show={show}>
+        <Box mb="4" p="4" bgColor="primary.500" borderRadius="m">
+          <Text variant="p3" color="white">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla purus
+            mi, aliquet sed augue ac, ullamcorper vulputate nisi.
+          </Text>
+        </Box>
+      </Fade>
+    </VStack>
+  );
+};
+
+export default FadeDemo;
diff --git a/demo/components/progress-demo.tsx b/demo/components/progress-demo.tsx
new file mode 100644
index 00000000..522007b1
--- /dev/null
+++ b/demo/components/progress-demo.tsx
@@ -0,0 +1,95 @@
+import { useEffect, useState } from "react";
+import { Text, Stack, VStack, Progress } from "../../src";
+import DemoSection from "./demo-section";
+
+const ProgressDemo = () => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const progressTimer = setInterval(() => {
+      if (progress < 100) setProgress(progress + 10);
+    }, 500);
+    return () => clearInterval(progressTimer);
+  }, [progress]);
+
+  return (
+    <Stack spacing="6">
+      <DemoSection label="Progress Sizes">
+        <VStack spacing="4">
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              xs
+            </Text>
+            <Progress size="xs" value={progress} />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              s
+            </Text>
+            <Progress size="s" value={progress} />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              m
+            </Text>
+            <Progress size="m" value={progress} />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              l
+            </Text>
+            <Progress size="l" value={progress} />
+          </Stack>
+        </VStack>
+      </DemoSection>
+
+      <DemoSection label="Progress Variants">
+        <VStack spacing="4">
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Filled
+            </Text>
+            <Progress variant="filled" value={progress} />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Outline
+            </Text>
+            <Progress variant="outline" value={progress} />
+          </Stack>
+        </VStack>
+      </DemoSection>
+
+      <DemoSection label="Color Schemes">
+        <VStack spacing="4">
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Primary
+            </Text>
+            <Progress value={progress} colorScheme="primary" />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Warning
+            </Text>
+            <Progress value={progress} colorScheme="warning" />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Danger
+            </Text>
+            <Progress value={progress} colorScheme="danger" />
+          </Stack>
+        </VStack>
+      </DemoSection>
+    </Stack>
+  );
+};
+
+export default ProgressDemo;
diff --git a/demo/components/scale-fade-demo.tsx b/demo/components/scale-fade-demo.tsx
new file mode 100644
index 00000000..174a4608
--- /dev/null
+++ b/demo/components/scale-fade-demo.tsx
@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { VStack, Box, Button, Text, ScaleFade } from "../../src";
+
+const ScaleFadeDemo = () => {
+  const [show, setShow] = useState(true);
+
+  return (
+    <VStack spacing="6">
+      <Button
+        size="s"
+        variant="outline"
+        alignSelf="flex-end"
+        onPress={() => setShow(!show)}
+      >
+        {show ? "Hide" : "Show"}
+      </Button>
+
+      <ScaleFade show={show}>
+        <Box mb="4" p="4" bgColor="primary.500" borderRadius="m">
+          <Text variant="p3" color="white">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla purus
+            mi, aliquet sed augue ac, ullamcorper vulputate nisi.
+          </Text>
+        </Box>
+      </ScaleFade>
+    </VStack>
+  );
+};
+
+export default ScaleFadeDemo;
diff --git a/demo/components/skeleton-demo.tsx b/demo/components/skeleton-demo.tsx
new file mode 100644
index 00000000..bbf0f348
--- /dev/null
+++ b/demo/components/skeleton-demo.tsx
@@ -0,0 +1,86 @@
+import { useEffect, useState } from "react";
+import {
+  Text,
+  Stack,
+  VStack,
+  Skeleton,
+  SkeletonCircle,
+  SkeletonText,
+  Radio,
+  Button,
+  Icon,
+} from "../../src";
+import DemoSection from "./demo-section";
+
+const SkeletonDemo = () => {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    if (!isLoaded) {
+      const timer = setTimeout(() => {
+        setIsLoaded(true);
+      }, 2000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [isLoaded]);
+
+  return (
+    <Stack spacing="6">
+      <Button
+        size="s"
+        alignSelf="flex-end"
+        isLoading={!isLoaded}
+        leftIcon={<Icon iconFamily="Ionicons" iconName="reload" />}
+        onPress={() => setIsLoaded(false)}
+      >
+        Reload
+      </Button>
+
+      <DemoSection label="Controlled Loading">
+        <VStack spacing="4">
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Basic
+            </Text>
+            <Skeleton isLoaded={isLoaded}>
+              <Stack direction="vertical">
+                <Radio isChecked>Default Radio</Radio>
+                <Radio isDisabled>Disabled Radio</Radio>
+                <Radio isChecked>Checked Radio</Radio>
+                <Radio isInvalid>Error Radio</Radio>
+              </Stack>
+            </Skeleton>
+          </Stack>
+        </VStack>
+      </DemoSection>
+
+      <DemoSection label="Skeleton Types">
+        <VStack spacing="4">
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Basic
+            </Text>
+            <Skeleton w="100%" h={100} />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Circle
+            </Text>
+            <SkeletonCircle boxSize={100} />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Text
+            </Text>
+            <SkeletonText noOfLines={4} />
+          </Stack>
+        </VStack>
+      </DemoSection>
+    </Stack>
+  );
+};
+
+export default SkeletonDemo;
diff --git a/demo/components/slide-demo.tsx b/demo/components/slide-demo.tsx
new file mode 100644
index 00000000..8f50bc4a
--- /dev/null
+++ b/demo/components/slide-demo.tsx
@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { VStack, Box, Button, Text, Slide } from "../../src";
+
+const SlideDemo = () => {
+  const [show, setShow] = useState(true);
+
+  return (
+    <VStack spacing="6">
+      <Button
+        size="s"
+        variant="outline"
+        alignSelf="flex-end"
+        onPress={() => setShow(!show)}
+      >
+        {show ? "Hide" : "Show"}
+      </Button>
+
+      <Slide show={show}>
+        <Box mb="4" p="4" bgColor="primary.500" borderRadius="m">
+          <Text variant="p3" color="white">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla purus
+            mi, aliquet sed augue ac, ullamcorper vulputate nisi.
+          </Text>
+        </Box>
+      </Slide>
+    </VStack>
+  );
+};
+
+export default SlideDemo;
diff --git a/demo/components/slide-fade-demo.tsx b/demo/components/slide-fade-demo.tsx
new file mode 100644
index 00000000..5876a4e2
--- /dev/null
+++ b/demo/components/slide-fade-demo.tsx
@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { VStack, Box, Button, Text, SlideFade } from "../../src";
+
+const SlideFadeDemo = () => {
+  const [show, setShow] = useState(true);
+
+  return (
+    <VStack spacing="6">
+      <Button
+        size="s"
+        variant="outline"
+        alignSelf="flex-end"
+        onPress={() => setShow(!show)}
+      >
+        {show ? "Hide" : "Show"}
+      </Button>
+
+      <SlideFade show={show}>
+        <Box mb="4" p="4" bgColor="primary.500" borderRadius="m">
+          <Text variant="p3" color="white">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla purus
+            mi, aliquet sed augue ac, ullamcorper vulputate nisi.
+          </Text>
+        </Box>
+      </SlideFade>
+    </VStack>
+  );
+};
+
+export default SlideFadeDemo;
diff --git a/demo/components/spinner-demo.tsx b/demo/components/spinner-demo.tsx
new file mode 100644
index 00000000..76bffd33
--- /dev/null
+++ b/demo/components/spinner-demo.tsx
@@ -0,0 +1,142 @@
+import { Text, Stack, VStack, Spinner, HStack, Box } from "../../src";
+import DemoSection from "./demo-section";
+
+const SpinnerDemo = () => {
+  return (
+    <Stack spacing="6">
+      <DemoSection label="Spinner Sizes">
+        <HStack w="100%" justifyContent="space-between">
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              xs
+            </Text>
+            <Spinner size="xs" />
+          </Stack>
+
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              s
+            </Text>
+            <Spinner size="s" />
+          </Stack>
+
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              m
+            </Text>
+            <Spinner size="m" />
+          </Stack>
+
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              l
+            </Text>
+            <Spinner size="l" />
+          </Stack>
+        </HStack>
+      </DemoSection>
+
+      <DemoSection label="Spinner Variants">
+        <VStack spacing="4">
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Activity
+            </Text>
+            <Spinner variant="activity" />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Ball
+            </Text>
+            <Spinner variant="ball" />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Bar
+            </Text>
+            <Spinner variant="bar" />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Dot
+            </Text>
+            <Spinner variant="dot" />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Pacman
+            </Text>
+            <Spinner variant="pacman" />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Pulse
+            </Text>
+            <Spinner variant="pulse" />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Skype
+            </Text>
+            <Spinner variant="skype" />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Spinner
+            </Text>
+            <Spinner variant="spinner" />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Wave
+            </Text>
+            <Spinner variant="wave" />
+          </Stack>
+        </VStack>
+      </DemoSection>
+
+      <DemoSection label="Color Schemes">
+        <HStack w="100%" justifyContent="space-between">
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Primary
+            </Text>
+            <Spinner colorScheme="primary">Start</Spinner>
+          </Stack>
+
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Warning
+            </Text>
+            <Spinner colorScheme="warning">Wait</Spinner>
+          </Stack>
+
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Danger
+            </Text>
+            <Spinner colorScheme="danger">Stop</Spinner>
+          </Stack>
+        </HStack>
+      </DemoSection>
+
+      <DemoSection label="Expanded Spinner">
+        <Stack spacing="3.5">
+          <Box w={200} h={200} backgroundColor="neutral.200" borderRadius="m">
+            <Spinner isExpanded />
+          </Box>
+        </Stack>
+      </DemoSection>
+    </Stack>
+  );
+};
+
+export default SpinnerDemo;
diff --git a/docs/docs/components/feedback/Skeleton.mdx b/docs/docs/components/feedback/Skeleton.mdx
index e31003b4..11414934 100644
--- a/docs/docs/components/feedback/Skeleton.mdx
+++ b/docs/docs/components/feedback/Skeleton.mdx
@@ -159,4 +159,4 @@ Here is a list of additional properties that the `SkeletonText` component suppor
 | ---------------- | -------- | ----------------------- | ------- | -------------------------------------------- |
 | `spacing`        | No       | <t>string \| number</t> | `3`     | Spacing between the individual skeleton text |
 | `noOfLines`      | No       | <t>number</t>           | `3`     | Number of lines in the skeleton text         |
-| `skeletonHeight` | No       | <t>number</t>           | `20`    | Height of the each individual skeleton text  |
+| `skeletonHeight` | No       | <t>number</t>           | `15`    | Height of the each individual skeleton text  |
diff --git a/docs/docs/components/transitions/Scale Fade.mdx b/docs/docs/components/transitions/Scale Fade.mdx
index 1745ef41..3c066374 100644
--- a/docs/docs/components/transitions/Scale Fade.mdx	
+++ b/docs/docs/components/transitions/Scale Fade.mdx	
@@ -79,4 +79,4 @@ The `ScaleFade` component also accepts the following additional props:
 | Name           | Required | Type           | Default | Description                             |
 | -------------- | -------- | -------------- | ------- | --------------------------------------- |
 | `show`         | Yes      | <t>boolean</t> |         | If `true`, the content will be visible. |
-| `initialScale` | No       | <t>number</t>  | `0.9`   | The initial scale of the element.       |
+| `initialScale` | No       | <t>number</t>  | `0.7`   | The initial scale of the element.       |
diff --git a/docs/docs/components/typography/Text.mdx b/docs/docs/components/typography/Text.mdx
index 7f9bade6..2f7fbc80 100644
--- a/docs/docs/components/typography/Text.mdx
+++ b/docs/docs/components/typography/Text.mdx
@@ -100,5 +100,5 @@ The `Text` component supports animation properties from the [Moti](https://moti.
 | Name            | Required | Type                                          | Default | Description                                                             |
 | --------------- | -------- | --------------------------------------------- | ------- | ----------------------------------------------------------------------- |
 | `size`          | No       | <t>PearlTheme.components.Text["sizes"]</t>    |         | Size variant to use as defined in the active theme.                     |
-| `variant`       | No       | <t>PearlTheme.components.Text["variants"]</t> | `"p1"`  | Typography variant to use as defined in the active theme.               |
+| `variant`       | No       | <t>PearlTheme.components.Text["variants"]</t> | `"p3"`  | Typography variant to use as defined in the active theme.               |
 | `scaleFontSize` | No       | <t>boolean</t>                                | `true`  | Whether to slightly scale the font size based on the screen dimensions. |
diff --git a/src/components/Atoms/Spinner/Spinner.tsx b/src/components/Atoms/Spinner/Spinner.tsx
index 29322aca..452b300d 100644
--- a/src/components/Atoms/Spinner/Spinner.tsx
+++ b/src/components/Atoms/Spinner/Spinner.tsx
@@ -16,15 +16,19 @@ import {
 } from "../../../theme/src/types";
 import { AccessibilityRoles } from "../../../hooks/utils/types";
 import { StyleSheet, View } from "react-native";
-import BallIndicator from "./indicators/ball";
-import BarIndicator from "./indicators/bar";
-import DotIndicator from "./indicators/dot";
-import MaterialIndicator from "./indicators/material";
-import PacmanIndicator from "./indicators/pacman";
-import PulseIndicator from "./indicators/pulse";
-import SkypeIndicator from "./indicators/skype";
-import ActivityIndicator from "./indicators/activity";
-import WaveIndicator from "./indicators/wave";
+import BallIndicator, { BallIndicatorProps } from "./indicators/ball";
+import BarIndicator, { BarIndicatorProps } from "./indicators/bar";
+import DotIndicator, { DotIndicatorProps } from "./indicators/dot";
+import MaterialIndicator, {
+  MaterialIndicatorProps,
+} from "./indicators/material";
+import PacmanIndicator, { PacmanIndicatorProps } from "./indicators/pacman";
+import PulseIndicator, { PulseIndicatorProps } from "./indicators/pulse";
+import SkypeIndicator, { SkypeIndicatorProps } from "./indicators/skype";
+import ActivityIndicator, {
+  ActivityIndicatorProps,
+} from "./indicators/activity";
+import WaveIndicator, { WaveIndicatorProps } from "./indicators/wave";
 import { useResponsiveProp } from "../../../hooks/useResponsiveProp";
 import { useMotiWithStyleProps } from "../../../hooks/useMotiWithStyleProps";
 
@@ -97,7 +101,16 @@ const Spinner = React.memo(
         animationDuration = 1200,
         colorScheme = "primary",
         ...rest
-      }: AtomComponentProps<"Spinner", BaseSpinnerProps, SpinnerStyleProps>,
+      }: AtomComponentProps<"Spinner", BaseSpinnerProps, SpinnerStyleProps> &
+        Omit<BallIndicatorProps, "size" | "color"> &
+        Omit<BarIndicatorProps, "size" | "color"> &
+        Omit<DotIndicatorProps, "size" | "color"> &
+        Omit<MaterialIndicatorProps, "size" | "color"> &
+        Omit<PacmanIndicatorProps, "size" | "color"> &
+        Omit<PulseIndicatorProps, "size" | "color"> &
+        Omit<SkypeIndicatorProps, "size" | "color"> &
+        Omit<ActivityIndicatorProps, "size" | "color"> &
+        Omit<WaveIndicatorProps, "size" | "color">,
       ref: any
     ) => {
       // Set default variant to "spinner"
diff --git a/src/components/Atoms/Stack/Stack.tsx b/src/components/Atoms/Stack/Stack.tsx
index 98463f8b..777f5120 100644
--- a/src/components/Atoms/Stack/Stack.tsx
+++ b/src/components/Atoms/Stack/Stack.tsx
@@ -60,7 +60,6 @@ const Stack = React.memo(
           return (
             <Box
               key={index}
-              h={direction === "horizontal" ? "100%" : undefined}
               flexDirection={direction === "horizontal" ? "row" : "column"}
               mr={
                 !isLast
diff --git a/src/components/Atoms/Text/Text.config.ts b/src/components/Atoms/Text/Text.config.ts
index 7443e342..b280ab5b 100644
--- a/src/components/Atoms/Text/Text.config.ts
+++ b/src/components/Atoms/Text/Text.config.ts
@@ -73,7 +73,7 @@ const TextConfig: AtomicComponentConfig<TextProps> = {
     },
   },
   defaults: {
-    variant: "p2",
+    variant: "p3",
   },
 };
 
diff --git a/src/components/Molecules/Badge/withBadge.tsx b/src/components/Molecules/Badge/withBadge.tsx
index 9512ce4d..f2d44c70 100644
--- a/src/components/Molecules/Badge/withBadge.tsx
+++ b/src/components/Molecules/Badge/withBadge.tsx
@@ -98,7 +98,7 @@ const withBadge =
 
     // Render the wrapped component with the badge
     return (
-      <Box alignSelf="flex-start">
+      <Box>
         <WrappedComponent
           {...(props as P)}
           onLayout={onBaseComponentLayoutChange}
diff --git a/src/components/atoms/fade/fade.tsx b/src/components/atoms/fade/fade.tsx
index 1468be23..0edba5fc 100644
--- a/src/components/atoms/fade/fade.tsx
+++ b/src/components/atoms/fade/fade.tsx
@@ -30,7 +30,6 @@ const Fade = React.memo(
         () => ({
           dampingRatio: 1,
           duration: 100,
-          easing: Easing.inOut,
           type: "spring",
           ...(transition as any),
         }),
@@ -40,7 +39,6 @@ const Fade = React.memo(
         () => ({
           dampingRatio: 1,
           duration: 100,
-          easing: Easing.inOut,
           type: "spring",
           ...(exitTransition as any),
         }),
diff --git a/src/components/atoms/scale-fade/scale-fade.tsx b/src/components/atoms/scale-fade/scale-fade.tsx
index 67db970b..0401c224 100644
--- a/src/components/atoms/scale-fade/scale-fade.tsx
+++ b/src/components/atoms/scale-fade/scale-fade.tsx
@@ -8,7 +8,7 @@ export type ScaleFadeProps = BoxProps & {
   /**
    * The initial scale of the element.
    *
-   * @default 0.9
+   * @default 0.7
    */
   initialScale?: number;
 };
@@ -22,7 +22,7 @@ const ScaleFade = React.memo(
       {
         children,
         show,
-        initialScale = 0.9,
+        initialScale = 0.7,
         transition = {},
         exitTransition = {},
         ...rest
diff --git a/src/components/atoms/skeleton/skeleton-text.tsx b/src/components/atoms/skeleton/skeleton-text.tsx
index 3283d797..330df94a 100644
--- a/src/components/atoms/skeleton/skeleton-text.tsx
+++ b/src/components/atoms/skeleton/skeleton-text.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { FinalPearlTheme, ResponsiveValue } from "../../../theme/src/types";
 import Skeleton, { SkeletonProps } from "./skeleton";
 import Stack from "../stack/stack";
+import { useTheme } from "../../../hooks/useTheme";
 
 export type SkeletonTextProps = SkeletonProps & {
   /**
@@ -13,7 +14,7 @@ export type SkeletonTextProps = SkeletonProps & {
   /**
    * The height of each individual skeleton
    *
-   * @default 20
+   * @default 15
    */
   skeletonHeight?: number;
   /**
@@ -48,13 +49,31 @@ const SkeletonText = React.memo(
         spacing = "3",
         noOfLines = 3,
         isLoaded = false,
-        skeletonHeight = 20,
+        skeletonHeight = 15,
         ...rest
       }: SkeletonTextProps,
       ref: any
     ) => {
+      const { colorMode } = useTheme();
       const numbers = React.useMemo(() => range(noOfLines), [noOfLines]);
 
+      const keyPrefix = React.useMemo(
+        () => `${colorMode}-${Math.random()}`,
+        [
+          isLoaded,
+          colorMode,
+          startColor,
+          endColor,
+          speed,
+          fadeDuration,
+          speed,
+          colorScheme,
+          skeletonHeight,
+          spacing,
+          rest,
+        ]
+      );
+
       const getWidth = React.useCallback(
         (index: number): any => {
           if (noOfLines > 1) {
@@ -80,7 +99,7 @@ const SkeletonText = React.memo(
 
             return (
               <Skeleton
-                key={numbers.length.toString() + number}
+                key={`${keyPrefix}-${number}`}
                 startColor={startColor}
                 endColor={endColor}
                 isLoaded={isLoaded}
diff --git a/src/components/atoms/skeleton/skeleton.config.ts b/src/components/atoms/skeleton/skeleton.config.ts
index a0b3ca9d..732b6e56 100644
--- a/src/components/atoms/skeleton/skeleton.config.ts
+++ b/src/components/atoms/skeleton/skeleton.config.ts
@@ -5,7 +5,7 @@ const SkeletonConfig: AtomicComponentConfig<SkeletonProps> = {
   baseStyle: {
     borderRadius: "m",
     startColor: {
-      light: "neutral.200",
+      light: "neutral.100",
       dark: "neutral.700",
     },
     endColor: {
diff --git a/src/components/atoms/skeleton/skeleton.tsx b/src/components/atoms/skeleton/skeleton.tsx
index f642782f..481eafb7 100644
--- a/src/components/atoms/skeleton/skeleton.tsx
+++ b/src/components/atoms/skeleton/skeleton.tsx
@@ -4,6 +4,7 @@ import { ResponsiveValue, PaletteColors } from "../../../theme";
 import { pearl } from "../../../pearl";
 import { BoxStyleProps } from "../../../theme/src/style-functions";
 import { View } from "react-native";
+import { useTheme } from "../../../hooks";
 
 type BaseSkeletonProps = BoxProps & {
   /**
@@ -47,7 +48,12 @@ const BaseSkeleton = React.memo(
       }: BaseSkeletonProps,
       ref: any
     ) => {
-      const key = React.useMemo(() => Math.random(), [isLoaded]);
+      const { colorMode } = useTheme();
+
+      const key = React.useMemo(
+        () => `${colorMode}-${Math.random()}`,
+        [isLoaded, colorMode, startColor, endColor, speed, fadeDuration, rest]
+      );
 
       if (isLoaded) {
         return (
@@ -69,8 +75,8 @@ const BaseSkeleton = React.memo(
 
       return (
         <Box
-          {...rest}
           key={key}
+          {...rest}
           ref={ref}
           from={{ bgColor: startColor }}
           animate={{ bgColor: endColor }}
diff --git a/src/components/atoms/slide/slide.tsx b/src/components/atoms/slide/slide.tsx
index 61b412b8..d360199f 100644
--- a/src/components/atoms/slide/slide.tsx
+++ b/src/components/atoms/slide/slide.tsx
@@ -32,13 +32,13 @@ const Slide = React.memo(
       const from = React.useMemo(() => {
         switch (direction) {
           case "bottom":
-            return { translateY: -10000 };
+            return { translateY: -500 };
           case "top":
-            return { translateY: 10000 };
+            return { translateY: 500 };
           case "right":
-            return { translateX: -10000 };
+            return { translateX: -500 };
           case "left":
-            return { translateX: 10000 };
+            return { translateX: 500 };
           default:
             return {};
         }
@@ -48,9 +48,10 @@ const Slide = React.memo(
         switch (direction) {
           case "bottom":
           case "top":
+            return { translateY: 0 };
           case "right":
           case "left":
-            return { translateX: 0, translateY: 0 };
+            return { translateX: 0 };
           default:
             return {};
         }
@@ -59,13 +60,13 @@ const Slide = React.memo(
       const exit = React.useMemo(() => {
         switch (direction) {
           case "bottom":
-            return { translateY: -10000 };
+            return { translateY: -500 };
           case "top":
-            return { translateY: 10000 };
+            return { translateY: 500 };
           case "right":
-            return { translateX: -10000 };
+            return { translateX: -500 };
           case "left":
-            return { translateX: 10000 };
+            return { translateX: 500 };
           default:
             return {};
         }
diff --git a/src/components/molecules/progress/progress.config.ts b/src/components/molecules/progress/progress.config.ts
index 276b8935..c9adc8c3 100644
--- a/src/components/molecules/progress/progress.config.ts
+++ b/src/components/molecules/progress/progress.config.ts
@@ -28,14 +28,14 @@ const ProgressConfig: MolecularComponentConfig<ProgressAtoms> = {
     xs: {
       container: (variant) => {
         const baseStyle = {
-          height: 10,
+          height: 5,
           borderRadius: "s",
         };
 
         if (variant === "outline")
           return {
             ...baseStyle,
-            p: "0.5",
+            p: "0.25",
           };
 
         return baseStyle;
@@ -48,7 +48,7 @@ const ProgressConfig: MolecularComponentConfig<ProgressAtoms> = {
     s: {
       container: (variant) => {
         const baseStyle = {
-          height: 15,
+          height: 8,
           borderRadius: "m",
         };
 
@@ -68,14 +68,14 @@ const ProgressConfig: MolecularComponentConfig<ProgressAtoms> = {
     m: {
       container: (variant) => {
         const baseStyle = {
-          height: 20,
+          height: 12,
           borderRadius: "m",
         };
 
         if (variant === "outline")
           return {
             ...baseStyle,
-            p: "1",
+            p: "0.75",
           };
 
         return baseStyle;
@@ -88,7 +88,7 @@ const ProgressConfig: MolecularComponentConfig<ProgressAtoms> = {
     l: {
       container: (variant) => {
         const baseStyle = {
-          height: 25,
+          height: 15,
           borderRadius: "m",
         };