diff --git a/src/circular-progress/stories/CircularProgressBasic.component.tsx b/src/circular-progress/stories/CircularProgressBasic.component.tsx
index 64c7ba84..12158ebb 100644
--- a/src/circular-progress/stories/CircularProgressBasic.component.tsx
+++ b/src/circular-progress/stories/CircularProgressBasic.component.tsx
@@ -9,7 +9,7 @@ export const CircularProgressBasic: React.FC<
 > = props => {
   return (
     <div className="flex flex-col items-center">
-      <CircularProgress value={50} {...props} />
+      <CircularProgress {...props} />
     </div>
   );
 };
diff --git a/src/circular-progress/stories/CircularProgressBasic.stories.tsx b/src/circular-progress/stories/CircularProgressBasic.stories.tsx
index be27ba87..90dc2fcc 100644
--- a/src/circular-progress/stories/CircularProgressBasic.stories.tsx
+++ b/src/circular-progress/stories/CircularProgressBasic.stories.tsx
@@ -24,7 +24,7 @@ export default {
 } as Meta;
 
 export const Default: Story = {
-  args: { size: "md", themeColor: "base" },
+  args: { size: "md", themeColor: "base", value: 50 },
 };
 
 export const Small: Story = {
diff --git a/src/meter/MeterBar.tsx b/src/meter/MeterBar.tsx
index 9360a807..d008076c 100644
--- a/src/meter/MeterBar.tsx
+++ b/src/meter/MeterBar.tsx
@@ -12,12 +12,26 @@ import { cx } from "../utils";
 import { MeterUIProps } from "./MeterProps";
 
 export const useMeterBar = createHook<MeterBarOptions>(
-  ({ state, size, intervals, flatBorders, label, hint, ...props }) => {
-    console.log("%cstate", "color: #408059", state);
+  ({
+    state,
+    size,
+    themeColor,
+    intervals,
+    flatBorders,
+    label,
+    hint,
+    ...props
+  }) => {
     const theme = useTheme("meter");
     const className = cx(
-      theme.bar.common,
-      flatBorders ? theme.bar.flatBorders : "",
+      theme.bar,
+      size
+        ? cx(
+            theme.size[size]?.bar.base,
+            !flatBorders ? theme.size[size]?.bar.roundedBorders : "",
+          )
+        : "",
+      themeColor ? theme.themeColor[themeColor]?.bar : "",
       props.className,
     );
     const style = { width: `${state?.percent}%`, ...props.style };
diff --git a/src/meter/MeterBarWrapper.tsx b/src/meter/MeterBarWrapper.tsx
index 5b187d3b..4a53fff4 100644
--- a/src/meter/MeterBarWrapper.tsx
+++ b/src/meter/MeterBarWrapper.tsx
@@ -12,10 +12,20 @@ import { cx } from "../utils";
 import { MeterUIProps } from "./MeterProps";
 
 export const useMeterBarWrapper = createHook<MeterBarWrapperOptions>(
-  ({ state, size, intervals, flatBorders, label, hint, ...props }) => {
+  ({
+    state,
+    size,
+    themeColor,
+    intervals,
+    flatBorders,
+    label,
+    hint,
+    ...props
+  }) => {
     const theme = useTheme("meter");
     const className = cx(
-      theme.barWrapper.common,
+      theme.barWrapper.base,
+      size ? theme.size[size]?.barWrapper : "",
       flatBorders ? theme.barWrapper.flatBorders : "",
       props.className,
     );
diff --git a/src/meter/MeterHint.tsx b/src/meter/MeterHint.tsx
index e08cac67..f0cee01b 100644
--- a/src/meter/MeterHint.tsx
+++ b/src/meter/MeterHint.tsx
@@ -12,11 +12,21 @@ import { cx } from "../utils";
 import { MeterUIProps } from "./MeterProps";
 
 export const useMeterHint = createHook<MeterHintOptions>(
-  ({ state, size, intervals, flatBorders, label, hint, ...props }) => {
+  ({
+    state,
+    size,
+    themeColor,
+    intervals,
+    flatBorders,
+    label,
+    hint,
+    ...props
+  }) => {
     const theme = useTheme("meter");
     const className = cx(
-      theme.hint.common,
-      size ? theme.hint.size[size] : "",
+      theme.hint,
+      size ? theme.size[size]?.hint : "",
+      themeColor ? theme.themeColor[themeColor]?.hint : "",
       props.className,
     );
 
diff --git a/src/meter/MeterLabel.tsx b/src/meter/MeterLabel.tsx
index 1a02d389..919b7d7f 100644
--- a/src/meter/MeterLabel.tsx
+++ b/src/meter/MeterLabel.tsx
@@ -12,11 +12,21 @@ import { tcm } from "../utils";
 import { MeterUIProps } from "./MeterProps";
 
 export const useMeterLabel = createHook<MeterLabelOptions>(
-  ({ state, size, intervals, flatBorders, label, hint, ...props }) => {
+  ({
+    state,
+    size,
+    themeColor,
+    intervals,
+    flatBorders,
+    label,
+    hint,
+    ...props
+  }) => {
     const theme = useTheme("meter");
     const className = tcm(
-      theme.label.common,
-      size ? theme.label.size[size] : "",
+      theme.label,
+      size ? theme.size[size]?.label : "",
+      themeColor ? theme.themeColor[themeColor]?.label : "",
       props.className,
     );
 
diff --git a/src/meter/MeterProps.ts b/src/meter/MeterProps.ts
index b374499e..0c3484ec 100644
--- a/src/meter/MeterProps.ts
+++ b/src/meter/MeterProps.ts
@@ -30,6 +30,7 @@ export function useMeterProps(props: MeterProps): MeterPropsReturn {
     min,
     max,
     size,
+    themeColor,
     intervals,
     flatBorders,
     label,
@@ -44,6 +45,7 @@ export function useMeterProps(props: MeterProps): MeterPropsReturn {
   });
   const uiState = useMeterUIState({
     size,
+    themeColor,
     flatBorders,
     intervals,
     label,
@@ -98,7 +100,7 @@ export function useMeterProps(props: MeterProps): MeterPropsReturn {
 
   const hintProps: MeterHintProps = {
     ...uiProps,
-    ...componentProps.trackProps,
+    ...componentProps.hintProps,
     children: runIfFn(_hint, uiProps),
   };
 
diff --git a/src/meter/MeterTrack.tsx b/src/meter/MeterTrack.tsx
index 61c42ac0..c59f4e0a 100644
--- a/src/meter/MeterTrack.tsx
+++ b/src/meter/MeterTrack.tsx
@@ -12,11 +12,22 @@ import { cx } from "../utils";
 import { MeterUIProps } from "./MeterProps";
 
 export const useMeterTrack = createHook<MeterTrackOptions>(
-  ({ state, size, intervals, flatBorders, label, hint, ...props }) => {
+  ({
+    state,
+    size,
+    themeColor,
+    intervals,
+    flatBorders,
+    label,
+    hint,
+    ...props
+  }) => {
     const theme = useTheme("meter");
     const className = cx(
-      theme.track.common,
-      size ? theme.track.size[size] : "",
+      theme.track,
+      size ? theme.size[size]?.track : "",
+      // flatBorders ? theme.bar.flatBorders : "",
+      themeColor ? theme.themeColor[themeColor]?.track : "",
       props.className,
     );
 
diff --git a/src/meter/MeterUIState.ts b/src/meter/MeterUIState.ts
index 6fff2fc5..79b25d06 100644
--- a/src/meter/MeterUIState.ts
+++ b/src/meter/MeterUIState.ts
@@ -3,10 +3,18 @@ import { RenderProp } from "../utils";
 import { MeterUIProps } from "./MeterProps";
 
 export const useMeterUIState = (props: MeterUIStateProps): MeterUIState => {
-  const { size = "md", intervals = 1, flatBorders = true, label, hint } = props;
+  const {
+    size = "md",
+    themeColor = "base",
+    intervals = 1,
+    flatBorders = true,
+    label,
+    hint,
+  } = props;
 
   return {
     size,
+    themeColor,
     intervals,
     flatBorders: intervals === 1 ? false : flatBorders,
     label,
@@ -20,7 +28,14 @@ export type MeterUIState = {
    *
    * @default md
    */
-  size: keyof AdaptUI.GetThemeValue<"meter", "track", "size">;
+  size: keyof AdaptUI.GetThemeValue<"meter", "size">;
+
+  /**
+   * How the progress should be themed?
+   *
+   * @default base
+   */
+  themeColor: keyof AdaptUI.GetThemeValue<"meter", "themeColor">;
 
   /**
    * No of intervals for the meter.
@@ -46,5 +61,8 @@ export type MeterUIState = {
 };
 
 export type MeterUIStateProps = Partial<
-  Pick<MeterUIState, "size" | "intervals" | "flatBorders" | "label" | "hint">
+  Pick<
+    MeterUIState,
+    "size" | "intervals" | "flatBorders" | "label" | "hint" | "themeColor"
+  >
 > & {};
diff --git a/src/meter/MeterWrapper.tsx b/src/meter/MeterWrapper.tsx
index d7779c67..3ccb2e0e 100644
--- a/src/meter/MeterWrapper.tsx
+++ b/src/meter/MeterWrapper.tsx
@@ -13,7 +13,16 @@ import { tcm } from "../utils";
 import { MeterUIProps } from "./MeterProps";
 
 export const useMeterWrapper = createHook<MeterWrapperOptions>(
-  ({ state, size, intervals, flatBorders, label, hint, ...props }) => {
+  ({
+    state,
+    size,
+    themeColor,
+    intervals,
+    flatBorders,
+    label,
+    hint,
+    ...props
+  }) => {
     const theme = useTheme("meter");
     const className = tcm(theme.wrapper, props.className);
 
diff --git a/src/meter/stories/MeterBasic.component.tsx b/src/meter/stories/MeterBasic.component.tsx
index 7ef2a496..ff857c8e 100644
--- a/src/meter/stories/MeterBasic.component.tsx
+++ b/src/meter/stories/MeterBasic.component.tsx
@@ -1,52 +1,15 @@
 import * as React from "react";
 
-import { Button, Meter, MeterProps } from "../../index";
+import { Meter, MeterProps } from "../../index";
 
 export type MeterBasicProps = MeterProps & {};
 
 export const MeterBasic: React.FC<MeterBasicProps> = props => {
-  const [value, setValue] = useMeterState();
-
   return (
     <div className="w-80">
-      <Meter value={value} max={100} {...props} />
-      <ActionButtons setValue={setValue} />
+      <Meter {...props} />
     </div>
   );
 };
 
 export default MeterBasic;
-
-const useMeterState = (initialValue: number = 0) => {
-  const [value, setValue] = React.useState<number>(initialValue);
-
-  React.useEffect(() => {
-    const clearId = setInterval(() => {
-      setValue(prevValue => {
-        return prevValue + 50;
-      });
-    }, 500);
-
-    if (value === 100) {
-      clearInterval(clearId);
-    }
-
-    return () => {
-      clearInterval(clearId);
-    };
-  }, [setValue, value]);
-
-  return [value, setValue] as const;
-};
-
-const ActionButtons: React.FC<{
-  setValue: React.Dispatch<React.SetStateAction<number>>;
-}> = ({ setValue }) => {
-  return (
-    <>
-      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
-        Restart Meter
-      </Button>
-    </>
-  );
-};
diff --git a/src/meter/stories/MeterBasic.stories.tsx b/src/meter/stories/MeterBasic.stories.tsx
index 39f77075..9cc002ec 100644
--- a/src/meter/stories/MeterBasic.stories.tsx
+++ b/src/meter/stories/MeterBasic.stories.tsx
@@ -1,9 +1,6 @@
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
-import {
-  createPreviewTabs,
-  createUnionControl,
-} from "../../../.storybook/utils";
+import { createControls, createPreviewTabs } from "../../../.storybook/utils";
 
 import js from "./templates/MeterBasicJsx";
 import ts from "./templates/MeterBasicTsx";
@@ -15,9 +12,9 @@ type Story = ComponentStoryObj<typeof MeterBasic>;
 export default {
   title: "Feedback/Meter/Basic",
   component: MeterBasic,
-  argTypes: {
-    size: createUnionControl(["sm", "md", "lg", "xl"]),
-  },
+  argTypes: createControls("meter", {
+    ignore: ["wrapElement", "as", "ref", "label", "hint"],
+  }),
   parameters: {
     layout: "centered",
     options: { showPanel: true },
@@ -25,7 +22,55 @@ export default {
   },
 } as Meta;
 
-export const Small: Story = { args: { size: "sm" } };
-export const Medium: Story = { args: { size: "md" } };
-export const Large: Story = { args: { size: "lg" } };
-export const ExtraLarge: Story = { args: { size: "xl" } };
+export const Default: Story = {
+  args: { size: "md", themeColor: "base", max: 100, value: 50 },
+};
+
+export const Small: Story = {
+  ...Default,
+  args: { ...Default.args, size: "sm" },
+};
+export const Medium: Story = { ...Default };
+export const Large: Story = {
+  ...Default,
+  args: { ...Default.args, size: "lg" },
+};
+export const ExtraLarge: Story = {
+  ...Default,
+  args: { ...Default.args, size: "xl" },
+};
+
+export const Base: Story = {
+  ...Default,
+  args: { ...Default.args, themeColor: "base" },
+};
+export const Primary: Story = {
+  ...Default,
+  args: { ...Default.args, themeColor: "primary" },
+};
+
+export const Label: Story = {
+  ...Default,
+  args: { ...Default.args, label: "Meter" },
+};
+
+export const Hint: Story = {
+  ...Default,
+  args: { ...Default.args, label: "Meter", hint: "50%" },
+};
+
+export const Intervals: Story = {
+  ...Default,
+  args: { ...Default.args, label: "Meter", hint: "50%", intervals: 2 },
+};
+
+export const RoundedBorders: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    label: "Meter",
+    hint: "50%",
+    intervals: 4,
+    flatBorders: false,
+  },
+};
diff --git a/src/meter/stories/MeterCustom.component.tsx b/src/meter/stories/MeterCustom.component.tsx
index 227b8445..cfd34d9e 100644
--- a/src/meter/stories/MeterCustom.component.tsx
+++ b/src/meter/stories/MeterCustom.component.tsx
@@ -9,7 +9,17 @@ export const MeterCustom: React.FC<MeterCustomProps> = props => {
 
   return (
     <div className="w-80">
-      <Meter value={value} max={100} {...props}>
+      <Meter
+        value={value}
+        max={100}
+        label="Charging..."
+        hint={props =>
+          props.state?.percent === null
+            ? undefined
+            : `${Math.ceil(props.state?.percent)}%`
+        }
+        {...props}
+      >
         <MeterTrack className="bg-red-300" />
         <MeterBar className="bg-red-800" />
       </Meter>
@@ -26,7 +36,7 @@ const useMeterState = (initialValue: number = 0) => {
   React.useEffect(() => {
     const clearId = setInterval(() => {
       setValue(prevValue => {
-        return prevValue + 50;
+        return prevValue + 5;
       });
     }, 500);
 
diff --git a/src/meter/stories/MeterCustom.stories.tsx b/src/meter/stories/MeterCustom.stories.tsx
index eb856a5f..1a1ddb3f 100644
--- a/src/meter/stories/MeterCustom.stories.tsx
+++ b/src/meter/stories/MeterCustom.stories.tsx
@@ -1,9 +1,6 @@
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
-import {
-  createPreviewTabs,
-  createUnionControl,
-} from "../../../.storybook/utils";
+import { createControls, createPreviewTabs } from "../../../.storybook/utils";
 
 import js from "./templates/MeterCustomJsx";
 import ts from "./templates/MeterCustomTsx";
@@ -15,9 +12,9 @@ type Story = ComponentStoryObj<typeof MeterCustom>;
 export default {
   title: "Feedback/Meter/Custom",
   component: MeterCustom,
-  argTypes: {
-    size: createUnionControl(["sm", "md", "lg", "xl"]),
-  },
+  argTypes: createControls("meter", {
+    ignore: ["wrapElement", "as", "ref", "label", "hint"],
+  }),
   parameters: {
     layout: "centered",
     options: { showPanel: true },
@@ -25,7 +22,43 @@ export default {
   },
 } as Meta;
 
-export const Small: Story = { args: { size: "sm" } };
-export const Medium: Story = { args: { size: "md" } };
-export const Large: Story = { args: { size: "lg" } };
-export const ExtraLarge: Story = { args: { size: "xl" } };
+export const Default: Story = {
+  args: { size: "md", themeColor: "base" },
+};
+
+export const Small: Story = {
+  ...Default,
+  args: { ...Default.args, size: "sm" },
+};
+export const Medium: Story = { ...Default };
+export const Large: Story = {
+  ...Default,
+  args: { ...Default.args, size: "lg" },
+};
+export const ExtraLarge: Story = {
+  ...Default,
+  args: { ...Default.args, size: "xl" },
+};
+
+export const Base: Story = {
+  ...Default,
+  args: { ...Default.args, themeColor: "base" },
+};
+export const Primary: Story = {
+  ...Default,
+  args: { ...Default.args, themeColor: "primary" },
+};
+
+export const Intervals: Story = {
+  ...Default,
+  args: { ...Default.args, intervals: 4 },
+};
+
+export const RoundedBorders: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    intervals: 4,
+    flatBorders: false,
+  },
+};
diff --git a/src/meter/stories/MeterHint.component.tsx b/src/meter/stories/MeterHint.component.tsx
deleted file mode 100644
index dc52de6b..00000000
--- a/src/meter/stories/MeterHint.component.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from "react";
-
-import { Button, Meter, MeterProps } from "../../index";
-
-export type MeterHintProps = MeterProps & {};
-
-export const MeterHint: React.FC<MeterHintProps> = props => {
-  const [value, setValue] = useMeterState();
-
-  return (
-    <div className="w-80">
-      <Meter
-        value={value}
-        max={75}
-        label="Charging..."
-        hint={props =>
-          props.state?.percent === null
-            ? undefined
-            : `${Math.ceil(props.state?.percent)}%`
-        }
-        {...props}
-      />
-      <ActionButtons setValue={setValue} />
-    </div>
-  );
-};
-
-export default MeterHint;
-
-const useMeterState = (initialValue: number = 0) => {
-  const [value, setValue] = React.useState<number>(initialValue);
-
-  React.useEffect(() => {
-    const clearId = setInterval(() => {
-      setValue(prevValue => {
-        return prevValue + 1;
-      });
-    }, 500);
-
-    if (value === 100) {
-      clearInterval(clearId);
-    }
-
-    return () => {
-      clearInterval(clearId);
-    };
-  }, [setValue, value]);
-
-  return [value, setValue] as const;
-};
-
-const ActionButtons: React.FC<{
-  setValue: React.Dispatch<React.SetStateAction<number>>;
-}> = ({ setValue }) => {
-  return (
-    <>
-      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
-        Restart Meter
-      </Button>
-    </>
-  );
-};
diff --git a/src/meter/stories/MeterHint.stories.tsx b/src/meter/stories/MeterHint.stories.tsx
deleted file mode 100644
index 28519553..00000000
--- a/src/meter/stories/MeterHint.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
-
-import {
-  createPreviewTabs,
-  createUnionControl,
-} from "../../../.storybook/utils";
-
-import js from "./templates/MeterHintJsx";
-import ts from "./templates/MeterHintTsx";
-import MeterHint from "./MeterHint.component";
-
-type Meta = ComponentMeta<typeof MeterHint>;
-type Story = ComponentStoryObj<typeof MeterHint>;
-
-export default {
-  title: "Feedback/Meter/Hint",
-  component: MeterHint,
-  argTypes: {
-    size: createUnionControl(["sm", "md", "lg", "xl"]),
-  },
-  parameters: {
-    layout: "centered",
-    options: { showPanel: true },
-    preview: createPreviewTabs({ js, ts }),
-  },
-} as Meta;
-
-export const Small: Story = { args: { size: "sm" } };
-export const Medium: Story = { args: { size: "md" } };
-export const Large: Story = { args: { size: "lg" } };
-export const ExtraLarge: Story = { args: { size: "xl" } };
diff --git a/src/meter/stories/MeterInterval.stories.tsx b/src/meter/stories/MeterInterval.stories.tsx
index 06d7c76a..a2c54d1d 100644
--- a/src/meter/stories/MeterInterval.stories.tsx
+++ b/src/meter/stories/MeterInterval.stories.tsx
@@ -1,9 +1,6 @@
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
-import {
-  createPreviewTabs,
-  createUnionControl,
-} from "../../../.storybook/utils";
+import { createControls, createPreviewTabs } from "../../../.storybook/utils";
 
 import js from "./templates/MeterIntervalJsx";
 import ts from "./templates/MeterIntervalTsx";
@@ -15,9 +12,9 @@ type Story = ComponentStoryObj<typeof MeterInterval>;
 export default {
   title: "Feedback/Meter/Interval",
   component: MeterInterval,
-  argTypes: {
-    size: createUnionControl(["sm", "md", "lg", "xl"]),
-  },
+  argTypes: createControls("meter", {
+    ignore: ["wrapElement", "as", "ref", "label", "hint"],
+  }),
   parameters: {
     layout: "centered",
     options: { showPanel: true },
@@ -25,8 +22,37 @@ export default {
   },
 } as Meta;
 
-export const Small: Story = { args: { size: "sm" } };
-export const Medium: Story = { args: { size: "md" } };
-export const Large: Story = { args: { size: "lg" } };
-export const ExtraLarge: Story = { args: { size: "xl" } };
-export const RoundedBars: Story = { args: { flatBorders: false } };
+export const Default: Story = {
+  args: { size: "md", themeColor: "base" },
+};
+
+export const Small: Story = {
+  ...Default,
+  args: { ...Default.args, size: "sm" },
+};
+export const Medium: Story = { ...Default };
+export const Large: Story = {
+  ...Default,
+  args: { ...Default.args, size: "lg" },
+};
+export const ExtraLarge: Story = {
+  ...Default,
+  args: { ...Default.args, size: "xl" },
+};
+
+export const Base: Story = {
+  ...Default,
+  args: { ...Default.args, themeColor: "base" },
+};
+export const Primary: Story = {
+  ...Default,
+  args: { ...Default.args, themeColor: "primary" },
+};
+
+export const RoundedBorders: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    flatBorders: false,
+  },
+};
diff --git a/src/meter/stories/MeterLabel.component.tsx b/src/meter/stories/MeterLabel.component.tsx
deleted file mode 100644
index 4a563fd6..00000000
--- a/src/meter/stories/MeterLabel.component.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as React from "react";
-
-import { Button, Meter, MeterProps } from "../../index";
-
-export type MeterLabelProps = MeterProps & {};
-
-export const MeterLabel: React.FC<MeterLabelProps> = props => {
-  const [value, setValue] = useMeterState();
-
-  return (
-    <div className="w-80">
-      <Meter value={value} max={100} label="Charging..." {...props} />
-      <ActionButtons setValue={setValue} />
-    </div>
-  );
-};
-
-export default MeterLabel;
-
-const useMeterState = (initialValue: number = 0) => {
-  const [value, setValue] = React.useState<number>(initialValue);
-
-  React.useEffect(() => {
-    const clearId = setInterval(() => {
-      setValue(prevValue => {
-        return prevValue + 50;
-      });
-    }, 500);
-
-    if (value === 100) {
-      clearInterval(clearId);
-    }
-
-    return () => {
-      clearInterval(clearId);
-    };
-  }, [setValue, value]);
-
-  return [value, setValue] as const;
-};
-
-const ActionButtons: React.FC<{
-  setValue: React.Dispatch<React.SetStateAction<number>>;
-}> = ({ setValue }) => {
-  return (
-    <>
-      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
-        Restart Meter
-      </Button>
-    </>
-  );
-};
diff --git a/src/meter/stories/MeterLabel.stories.tsx b/src/meter/stories/MeterLabel.stories.tsx
deleted file mode 100644
index 603595cd..00000000
--- a/src/meter/stories/MeterLabel.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
-
-import {
-  createPreviewTabs,
-  createUnionControl,
-} from "../../../.storybook/utils";
-
-import js from "./templates/MeterLabelJsx";
-import ts from "./templates/MeterLabelTsx";
-import MeterLabel from "./MeterLabel.component";
-
-type Meta = ComponentMeta<typeof MeterLabel>;
-type Story = ComponentStoryObj<typeof MeterLabel>;
-
-export default {
-  title: "Feedback/Meter/Label",
-  component: MeterLabel,
-  argTypes: {
-    size: createUnionControl(["sm", "md", "lg", "xl"]),
-  },
-  parameters: {
-    layout: "centered",
-    options: { showPanel: true },
-    preview: createPreviewTabs({ js, ts }),
-  },
-} as Meta;
-
-export const Small: Story = { args: { size: "sm" } };
-export const Medium: Story = { args: { size: "md" } };
-export const Large: Story = { args: { size: "lg" } };
-export const ExtraLarge: Story = { args: { size: "xl" } };
diff --git a/src/progress/stories/ProgressBasic.component.tsx b/src/progress/stories/ProgressBasic.component.tsx
index 3c556a4b..7098b804 100644
--- a/src/progress/stories/ProgressBasic.component.tsx
+++ b/src/progress/stories/ProgressBasic.component.tsx
@@ -7,7 +7,7 @@ export type ProgressBasicProps = ProgressProps & {};
 export const ProgressBasic: React.FC<ProgressBasicProps> = props => {
   return (
     <div className="w-80">
-      <Progress value={50} {...props} />
+      <Progress {...props} />
     </div>
   );
 };
diff --git a/src/progress/stories/ProgressBasic.stories.tsx b/src/progress/stories/ProgressBasic.stories.tsx
index d63e2b65..f370114b 100644
--- a/src/progress/stories/ProgressBasic.stories.tsx
+++ b/src/progress/stories/ProgressBasic.stories.tsx
@@ -23,7 +23,7 @@ export default {
 } as Meta;
 
 export const Default: Story = {
-  args: { size: "md", themeColor: "base" },
+  args: { size: "md", themeColor: "base", value: 50 },
 };
 
 export const Small: Story = {
diff --git a/src/theme/defaultTheme/meter.ts b/src/theme/defaultTheme/meter.ts
index dafdc266..d1a45bf9 100644
--- a/src/theme/defaultTheme/meter.ts
+++ b/src/theme/defaultTheme/meter.ts
@@ -1,39 +1,56 @@
 export const meter = {
   wrapper:
     "inline-flex flex-row flex-wrap justify-between items-center align-top w-full",
-  label: {
-    common: "flex-1 text-left mb-3 text-gray-700 font-medium",
-    size: {
-      sm: "text-cxs",
-      md: "text-sm",
-      lg: "text-sm",
-      xl: "text-sm",
+  size: {
+    sm: {
+      label: "mb-3 text-cxs font-medium",
+      hint: "ml-3 mb-3 text-cxs font-medium",
+      barWrapper: "w-full space-x-1",
+      track: "w-full h-0.5 rounded-[20px] z-10",
+      bar: { base: "h-full", roundedBorders: "rounded-[20px]" },
+    },
+    md: {
+      label: "mb-3 text-sm font-medium",
+      hint: "ml-3 mb-3 text-sm font-medium",
+      barWrapper: "w-full space-x-1",
+      track: "w-full h-1 rounded-[20px] z-10",
+      bar: { base: "h-full", roundedBorders: "rounded-[20px]" },
+    },
+    lg: {
+      label: "mb-3 text-sm font-medium",
+      hint: "ml-3 mb-3 text-sm font-medium",
+      barWrapper: "w-full space-x-1",
+      track: "w-full h-2 rounded-[20px] z-10",
+      bar: { base: "h-full", roundedBorders: "rounded-[20px]" },
+    },
+    xl: {
+      label: "mb-3 text-sm font-medium",
+      hint: "ml-3 mb-3 text-sm font-medium",
+      barWrapper: "w-full space-x-1",
+      track: "w-full h-3 rounded-[20px] z-10",
+      bar: { base: "h-full", roundedBorders: "rounded-[20px]" },
     },
   },
-  hint: {
-    common: "ml-3 mb-3 text-gray-500 ",
-    size: {
-      sm: "text-cxs",
-      md: "text-sm",
-      lg: "text-sm",
-      xl: "text-sm",
+  themeColor: {
+    base: {
+      label: "text-gray-900",
+      hint: "text-gray-600",
+      track: "bg-gray-100",
+      bar: "bg-gray-900",
+    },
+    primary: {
+      label: "text-gray-900",
+      hint: "text-gray-600",
+      track: "bg-blue-100",
+      bar: "bg-blue-600",
     },
   },
+  label: "flex-1 text-left",
+  hint: "",
   barWrapper: {
-    common: "flex w-full space-x-1",
+    base: "flex",
     flatBorders: "meter-radius",
   },
-  track: {
-    common: "w-full relative overflow-hidden bg-gray-200 rounded-2xl z-10",
-    size: {
-      sm: "h-0.5",
-      md: "h-1",
-      lg: "h-2",
-      xl: "h-3",
-    },
-  },
-  bar: {
-    common: "h-full bg-gray-800 rounded-2xl transition-all",
-    flatBorders: "rounded-none",
-  },
+  track: "overflow-hidden",
+  bar: "transition-all",
 };
diff --git a/src/theme/defaultTheme/progress.ts b/src/theme/defaultTheme/progress.ts
index c217928d..0ef7f041 100644
--- a/src/theme/defaultTheme/progress.ts
+++ b/src/theme/defaultTheme/progress.ts
@@ -31,19 +31,19 @@ export const progress = {
     base: {
       label: "text-gray-900",
       hint: "text-gray-600",
-      bar: "bg-gray-900",
       track: "bg-gray-100",
+      bar: "bg-gray-900",
     },
     primary: {
       label: "text-gray-900",
       hint: "text-gray-600",
-      bar: "bg-blue-600",
       track: "bg-blue-100",
+      bar: "bg-blue-600",
     },
   },
-  label: "flex-1",
+  label: "flex-1 text-left",
   hint: "",
-  track: "overflow-hidden ",
+  track: "relative overflow-hidden ",
   bar: {
     base: "transition-all",
     indeterminate: "min-w-[50%] animate-progress",