diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
index e7f7ae1..a815d2e 100644
--- a/.claude/CLAUDE.md
+++ b/.claude/CLAUDE.md
@@ -2,3 +2,4 @@
 @rules/aiworkers/skills-format.md
 @rules/aiworkers/jsx-style.md
 @rules/aiworkers/conventional-commits.md
+@rules/component-patterns.md
diff --git a/.claude/rules/component-patterns.md b/.claude/rules/component-patterns.md
new file mode 100644
index 0000000..8a7ddf4
--- /dev/null
+++ b/.claude/rules/component-patterns.md
@@ -0,0 +1,38 @@
+# Component patterns
+
+## Before implementing a new component
+
+Always read an existing component of the same category before writing any code. Do not guess the structure — read the actual code.
+
+- New Atom → read another existing Atom
+- New Molecule → read another existing Molecule
+- Component uses Reanimated → read the `useReanimatedStyles` hook of a component that already uses it (e.g. `CheckBox`)
+
+This ensures hooks, file structure, test patterns, and import style are consistent with the rest of the library.
+
+## Fixed values
+
+No hardcoded numeric values in code. Always use design system tokens:
+
+- Spacing and sizes: `Tokens.spacer({ key: '...' })`
+- Border radii: `Tokens.radii({ key: '...' })`
+
+Component-specific layout values (e.g. a Switch track width) belong in the component's `constants/` folder — one file per constant, all exported via `index.ts`:
+
+```
+constants/
+├── NAME_OF_CONSTANT.ts    ← one constant per file
+└── index.ts               ← export * from each file
+```
+
+Never define layout constants directly in `styles.ts` or in the component file.
+
+## Storybook
+
+Every new component needs a story at `example/.rnstorybook/stories/<Category>/<Component>/`.
+
+Minimum variants to cover:
+- Default state (off / false / empty)
+- Active state (on / true / filled)
+- Disabled (when applicable)
+- `Interactive` — with `useState` to test the real animation in Storybook
diff --git a/__mocks__/react-native-gesture-handler.ts b/__mocks__/react-native-gesture-handler.ts
new file mode 100644
index 0000000..a101230
--- /dev/null
+++ b/__mocks__/react-native-gesture-handler.ts
@@ -0,0 +1,29 @@
+import React from 'react';
+import { View } from 'react-native';
+
+const makePanGesture = () => {
+  const gesture = {
+    onUpdate: () => gesture,
+    onEnd: () => gesture,
+    onStart: () => gesture,
+    onBegin: () => gesture,
+    onFinalize: () => gesture,
+    enabled: () => gesture,
+    minDistance: () => gesture,
+    activeOffsetX: () => gesture,
+    activeOffsetY: () => gesture,
+  };
+  return gesture;
+};
+
+const Gesture = {
+  Pan: makePanGesture,
+};
+
+const GestureDetector = ({ children }: { children: React.ReactNode }) =>
+  React.createElement(View, null, children);
+
+module.exports = {
+  Gesture,
+  GestureDetector,
+};
diff --git a/__mocks__/react-native-reanimated.ts b/__mocks__/react-native-reanimated.ts
index 5c916ae..d8ff5f3 100644
--- a/__mocks__/react-native-reanimated.ts
+++ b/__mocks__/react-native-reanimated.ts
@@ -5,6 +5,8 @@ const useSharedValue = (init: unknown) => ({ value: init });
 const useAnimatedStyle = (fn: () => object) => fn();
 const withTiming = (value: unknown) => value;
 const withSpring = (value: unknown) => value;
+const interpolate = (_value: unknown, _input: unknown, output: number[]) =>
+  output[0];
 const interpolateColor = (_value: unknown, _range: unknown, colors: string[]) =>
   colors[0];
 const runOnJS = (fn: (...args: unknown[]) => unknown) => fn;
@@ -42,6 +44,7 @@ module.exports = {
   useAnimatedGestureHandler,
   withTiming,
   withSpring,
+  interpolate,
   interpolateColor,
   runOnJS,
   runOnUI,
diff --git a/docs/migration-font-sizes-v0.3.0.md b/docs/migration-font-sizes-v0.3.0.md
new file mode 100644
index 0000000..3680375
--- /dev/null
+++ b/docs/migration-font-sizes-v0.3.0.md
@@ -0,0 +1,72 @@
+# Migration: Font Size Scale — v0.3.0
+
+## O que mudou
+
+A escala `FONT_SIZES` foi rebalanceada seguindo a regra dos múltiplos de 4/8, com `md` agora valendo **16px** (era 14px).
+
+### Escala anterior → nova
+
+| Key | Antes | Depois |
+|-----|-------|--------|
+| `xs` | 10 | 12 |
+| `sm` | 12 | 14 |
+| `md` | 14 | **16** |
+| `lg` | 16 | 20 |
+| `xl` | 20 | 24 |
+| `xxl` | 24 | 32 |
+| `xxxl` | 32 | 40 |
+| `display` | 40 | 48 |
+
+---
+
+## Impacto no seu app
+
+Se você usa o componente `<Text>` do DS **sem passar `size`**, o tamanho padrão era `md=14px` e agora passa a ser `md=16px`. Seu texto vai aparecer **maior** do que antes.
+
+### Como corrigir
+
+Passe `size` explicitamente onde quiser manter o visual anterior:
+
+```tsx
+// Antes — recebia 14px via default
+<Text>Meu texto</Text>
+
+// Depois — para manter 14px, passe size="sm" explicitamente
+<Text size="sm">Meu texto</Text>
+```
+
+### Tabela de remapeamento
+
+Use esta tabela para converter os valores que você já passava explicitamente:
+
+| Você passava | Valor visual | Passe agora |
+|---|---|---|
+| `size="sm"` | 12px | `size="xs"` |
+| `size="md"` ou nada | 14px | `size="sm"` |
+| `size="lg"` | 16px | `size="md"` |
+| `size="xl"` | 20px | `size="lg"` |
+| `size="xxl"` | 24px | `size="xl"` |
+| `size="xxxl"` | 32px | `size="xxl"` |
+| `size="display"` | 40px | `size="xxxl"` |
+
+---
+
+## O que já foi ajustado internamente no DS
+
+Os componentes internos do DS já foram atualizados para manter seus tamanhos visuais. Você não precisa fazer nada em relação a:
+
+- `Button` (todas as variantes: `sm`, `md`, `lg`)
+- `CheckBox`
+- `RadioButton`
+- `SimpleText`, `NumberField`, `MultilineText`, `MoneyField`
+- `Toaster`
+- `Avatar`
+- `BottomListModal`
+
+Esses componentes continuam com a mesma aparência de antes.
+
+---
+
+## Se você quer aproveitar a nova escala
+
+Se preferir que seus textos cresçam proporcionalmente com a nova escala (ao invés de preservar o tamanho antigo), basta **não passar `size`** e deixar o novo default `md=16px` agir.
diff --git a/example/.rnstorybook/stories/Atoms/Switch/Switch.stories.tsx b/example/.rnstorybook/stories/Atoms/Switch/Switch.stories.tsx
new file mode 100644
index 0000000..01bafdc
--- /dev/null
+++ b/example/.rnstorybook/stories/Atoms/Switch/Switch.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react-native';
+import React, { useState } from 'react';
+import { Switch } from 'rubber-duck-ui';
+
+const meta = {
+  title: 'Atoms/Switch',
+  component: Switch,
+  args: {
+    isOn: false,
+    onPress: () => {},
+  },
+  argTypes: {
+    isOn: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const On: Story = {
+  args: {
+    isOn: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const DisabledOn: Story = {
+  args: {
+    isOn: true,
+    disabled: true,
+  },
+};
+
+const InteractiveSwitch = (args: React.ComponentProps<typeof Switch>) => {
+  const [isOn, setIsOn] = useState(false);
+
+  return (
+    <Switch
+      {...args}
+      isOn={isOn}
+      onPress={() => setIsOn((prev) => !prev)}
+    />
+  );
+};
+
+export const Interactive: Story = {
+  render: (args) => <InteractiveSwitch {...args} />,
+};
diff --git a/example/.rnstorybook/stories/Atoms/Text/Text.stories.tsx b/example/.rnstorybook/stories/Atoms/Text/Text.stories.tsx
index 538d7d3..418f94e 100644
--- a/example/.rnstorybook/stories/Atoms/Text/Text.stories.tsx
+++ b/example/.rnstorybook/stories/Atoms/Text/Text.stories.tsx
@@ -139,3 +139,20 @@ export const Truncated: Story = {
       'This is a very long text that should be truncated after one line because numberOfLines is set to 1',
   },
 };
+
+export const InlineBold: Story = {
+  args: {
+    children: 'I agree to the **Terms & Privacy Policy**',
+  },
+};
+
+export const InlineBoldVariants: Story = {
+  render: () => (
+    <View style={styles.container}>
+      <Text>{'I agree to the **Terms & Privacy Policy**'}</Text>
+      <Text size="lg">{'**Bold** at the start of the sentence'}</Text>
+      <Text size="sm" color="textSecondary">{'Mix of **bold** and regular text here'}</Text>
+      <Text>{'**Multiple** bold **segments** in one text'}</Text>
+    </View>
+  ),
+};
diff --git a/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx b/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx
new file mode 100644
index 0000000..838095c
--- /dev/null
+++ b/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx
@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react-native';
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { Button } from 'rubber-duck-ui';
+import { styles } from './Button.styles';
+
+const meta = {
+  title: 'Molecules/Button',
+  component: Button,
+  args: {
+    label: 'Button',
+    variant: 'primary',
+    size: 'md',
+    disabled: false,
+    isLoading: false,
+    onPress: () => {},
+  },
+  argTypes: {
+    label: { control: 'text' },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'outline', 'ghost', 'destructive'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    disabled: { control: 'boolean' },
+    isLoading: { control: 'boolean' },
+    leftIcon: {
+      control: 'select',
+      options: [undefined, 'ArrowLeft', 'Plus', 'Check', 'Trash2'],
+    },
+    rightIcon: {
+      control: 'select',
+      options: [undefined, 'ArrowRight', 'Plus', 'Check', 'Trash2'],
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: (args) => (
+    <View style={styles.container}>
+      <Button {...args} variant="primary" label="Primary" />
+      <Button {...args} variant="secondary" label="Secondary" />
+      <Button {...args} variant="outline" label="Outline" />
+      <Button {...args} variant="ghost" label="Ghost" />
+      <Button {...args} variant="destructive" label="Destructive" />
+    </View>
+  ),
+};
+
+export const Sizes: Story = {
+  render: (args) => (
+    <View style={styles.container}>
+      <Button {...args} size="sm" label="Small" />
+      <Button {...args} size="md" label="Medium" />
+      <Button {...args} size="lg" label="Large" />
+    </View>
+  ),
+};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const WithIcons: Story = {
+  render: (args) => (
+    <View style={styles.container}>
+      <Button {...args} leftIcon="ArrowLeft" label="Back" />
+      <Button {...args} rightIcon="ArrowRight" label="Next" />
+      <Button {...args} leftIcon="Plus" rightIcon="ArrowRight" label="Add item" />
+    </View>
+  ),
+};
+
+export const Inline: Story = {
+  render: (args) => (
+    <View style={styles.inline}>
+      <Button {...args} />
+    </View>
+  ),
+};
+
+const InteractiveButton = (args: React.ComponentProps<typeof Button>) => {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <Button
+      {...args}
+      isLoading={loading}
+      onPress={() => {
+        setLoading(true);
+        setTimeout(() => setLoading(false), 2000);
+      }}
+    />
+  );
+};
+
+export const Interactive: Story = {
+  render: (args) => <InteractiveButton {...args} />,
+};
diff --git a/example/.rnstorybook/stories/Molecules/Button/Button.styles.ts b/example/.rnstorybook/stories/Molecules/Button/Button.styles.ts
new file mode 100644
index 0000000..48d498c
--- /dev/null
+++ b/example/.rnstorybook/stories/Molecules/Button/Button.styles.ts
@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    gap: 16,
+  },
+  
+  inline: {
+    alignSelf: 'flex-start',
+  },
+});
diff --git a/example/.rnstorybook/stories/Molecules/Inputs/SimpleText/SimpleText.stories.tsx b/example/.rnstorybook/stories/Molecules/Inputs/SimpleText/SimpleText.stories.tsx
index 85a5d29..eae50b8 100644
--- a/example/.rnstorybook/stories/Molecules/Inputs/SimpleText/SimpleText.stories.tsx
+++ b/example/.rnstorybook/stories/Molecules/Inputs/SimpleText/SimpleText.stories.tsx
@@ -107,3 +107,28 @@ export const Form_: Story = {
   name: 'Form',
   render: () => <Form />,
 };
+
+const PasswordField = () => {
+  const [password, setPassword] = useState('');
+  const [isSecure, setIsSecure] = useState(true);
+
+  return (
+    <SimpleText
+      title="Password"
+      placeholder="Type your password"
+      value={password}
+      onChangeValue={setPassword}
+      isRequired
+      secureTextEntry={isSecure}
+      autoCapitalize="none"
+      rightIcon={{
+        icon: isSecure ? 'EyeOff' : 'Eye',
+        onPress: () => setIsSecure((prev) => !prev),
+      }}
+    />
+  );
+};
+
+export const Password: Story = {
+  render: () => <PasswordField />,
+};
diff --git a/example/.rnstorybook/stories/Organisms/Toaster/Toaster.stories.tsx b/example/.rnstorybook/stories/Organisms/Toaster/Toaster.stories.tsx
new file mode 100644
index 0000000..e95bf80
--- /dev/null
+++ b/example/.rnstorybook/stories/Organisms/Toaster/Toaster.stories.tsx
@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '@storybook/react-native';
+import type { IToasterApi } from 'rubber-duck-ui';
+import React, { useRef, useState } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { BottomSheetView } from '@gorhom/bottom-sheet';
+import { BottomModalApi, Toaster, ToasterApi } from 'rubber-duck-ui';
+import { styles } from './Toaster.styles';
+
+const Trigger = ({ label, onPress }: { label: string; onPress: () => void }) => (
+  <TouchableOpacity style={styles.trigger} onPress={onPress}>
+    <Text style={styles.triggerText}>{label}</Text>
+  </TouchableOpacity>
+);
+
+const DefaultDemo = () => (
+  <View style={styles.container}>
+    <Trigger
+      label="Show Success"
+      onPress={() =>
+        ToasterApi.show({
+          type: 'success',
+          title: 'Success!',
+          description: 'Your action was completed.',
+        })
+      }
+    />
+    <Trigger
+      label="Show Error"
+      onPress={() =>
+        ToasterApi.show({
+          type: 'error',
+          title: 'Error!',
+          description: 'Something went wrong.',
+        })
+      }
+    />
+    <Trigger
+      label="Show Warning"
+      onPress={() =>
+        ToasterApi.show({
+          type: 'warning',
+          title: 'Warning!',
+          description: 'Please check your input.',
+        })
+      }
+    />
+    <Trigger
+      label="Show Info"
+      onPress={() =>
+        ToasterApi.show({
+          type: 'info',
+          title: 'Info',
+          description: 'Here is some information.',
+        })
+      }
+    />
+  </View>
+);
+
+type ToasterType = 'success' | 'error' | 'warning' | 'info';
+
+const TYPES: ToasterType[] = ['success', 'error', 'warning', 'info'];
+
+const InteractiveDemo = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const showNext = () => {
+    const type = TYPES[currentIndex % TYPES.length];
+    ToasterApi.show({
+      type,
+      title: `${type.charAt(0).toUpperCase()}${type.slice(1)} toast`,
+      description: `This is a ${type} notification.`,
+    });
+    setCurrentIndex((prev) => (prev + 1) % TYPES.length);
+  };
+
+  return (
+    <View style={styles.container}>
+      <Trigger label="Cycle through types" onPress={showNext} />
+    </View>
+  );
+};
+
+const ModalContent = () => {
+  const toasterRef = useRef<IToasterApi>(null);
+
+  return (
+    <BottomSheetView style={styles.modalContent}>
+      <Toaster ref={toasterRef} />
+      <Trigger
+        label="Show Success"
+        onPress={() => toasterRef.current?.show({ type: 'success', title: 'Saved!', description: 'Action completed inside modal.' })}
+      />
+      <Trigger
+        label="Show Error"
+        onPress={() => toasterRef.current?.show({ type: 'error', title: 'Failed!', description: 'Something went wrong.' })}
+      />
+      <Trigger
+        label="Show Warning"
+        onPress={() => toasterRef.current?.show({ type: 'warning', title: 'Warning!', description: 'Please review your input.' })}
+      />
+      <Trigger
+        label="Show Info"
+        onPress={() => toasterRef.current?.show({ type: 'info', title: 'Info', description: 'Local toaster, not global.' })}
+      />
+    </BottomSheetView>
+  );
+};
+
+const InsideModalDemo = () => (
+  <View style={styles.container}>
+    <Trigger
+      label="Open modal with local Toaster"
+      onPress={() => BottomModalApi.open({ content: <ModalContent /> })}
+    />
+  </View>
+);
+
+const meta = {
+  title: 'Organisms/Toaster',
+  component: View,
+} satisfies Meta<typeof View>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <DefaultDemo />,
+};
+
+export const Interactive: Story = {
+  render: () => <InteractiveDemo />,
+};
+
+export const InsideModal: Story = {
+  render: () => <InsideModalDemo />,
+};
diff --git a/example/.rnstorybook/stories/Organisms/Toaster/Toaster.styles.ts b/example/.rnstorybook/stories/Organisms/Toaster/Toaster.styles.ts
new file mode 100644
index 0000000..360d366
--- /dev/null
+++ b/example/.rnstorybook/stories/Organisms/Toaster/Toaster.styles.ts
@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 12,
+    padding: 24,
+  },
+  trigger: {
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    borderRadius: 8,
+    backgroundColor: '#FFD600',
+    alignItems: 'center',
+    width: '100%',
+  },
+  triggerText: {
+    color: '#000',
+    fontWeight: '600',
+    fontSize: 14,
+  },
+  modalContent: {
+    gap: 12,
+    padding: 24,
+    paddingBottom: 40,
+  },
+});
diff --git a/example/App.tsx b/example/App.tsx
new file mode 100644
index 0000000..6000249
--- /dev/null
+++ b/example/App.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { useFonts } from 'expo-font';
+import StorybookUI from './.rnstorybook';
+
+export default function App() {
+  const [loaded] = useFonts({
+    'Geist-Light': require('./assets/fonts/Geist/ttf/Geist-Light.ttf'),
+    'Geist-Regular': require('./assets/fonts/Geist/ttf/Geist-Regular.ttf'),
+    'Geist-Medium': require('./assets/fonts/Geist/ttf/Geist-Medium.ttf'),
+    'Geist-SemiBold': require('./assets/fonts/Geist/ttf/Geist-SemiBold.ttf'),
+    'Geist-Bold': require('./assets/fonts/Geist/ttf/Geist-Bold.ttf'),
+    'GeistMono-Regular': require('./assets/fonts/GeistMono/ttf/GeistMono-Regular.ttf'),
+  });
+
+  if (!loaded) return null;
+
+  return <StorybookUI />;
+}
diff --git a/example/assets/fonts/Geist/ttf/Geist-Bold.ttf b/example/assets/fonts/Geist/ttf/Geist-Bold.ttf
new file mode 100644
index 0000000..fa18a85
Binary files /dev/null and b/example/assets/fonts/Geist/ttf/Geist-Bold.ttf differ
diff --git a/example/assets/fonts/Geist/ttf/Geist-Light.ttf b/example/assets/fonts/Geist/ttf/Geist-Light.ttf
new file mode 100644
index 0000000..57c3192
Binary files /dev/null and b/example/assets/fonts/Geist/ttf/Geist-Light.ttf differ
diff --git a/example/assets/fonts/Geist/ttf/Geist-Medium.ttf b/example/assets/fonts/Geist/ttf/Geist-Medium.ttf
new file mode 100644
index 0000000..4fe8124
Binary files /dev/null and b/example/assets/fonts/Geist/ttf/Geist-Medium.ttf differ
diff --git a/example/assets/fonts/Geist/ttf/Geist-Regular.ttf b/example/assets/fonts/Geist/ttf/Geist-Regular.ttf
new file mode 100644
index 0000000..bd8775f
Binary files /dev/null and b/example/assets/fonts/Geist/ttf/Geist-Regular.ttf differ
diff --git a/example/assets/fonts/Geist/ttf/Geist-SemiBold.ttf b/example/assets/fonts/Geist/ttf/Geist-SemiBold.ttf
new file mode 100644
index 0000000..a81032e
Binary files /dev/null and b/example/assets/fonts/Geist/ttf/Geist-SemiBold.ttf differ
diff --git a/example/assets/fonts/GeistMono/ttf/GeistMono-Regular.ttf b/example/assets/fonts/GeistMono/ttf/GeistMono-Regular.ttf
new file mode 100644
index 0000000..ba09031
Binary files /dev/null and b/example/assets/fonts/GeistMono/ttf/GeistMono-Regular.ttf differ
diff --git a/example/assets/fonts/OFL.txt b/example/assets/fonts/OFL.txt
new file mode 100644
index 0000000..61f6f4b
--- /dev/null
+++ b/example/assets/fonts/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font.git)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
\ No newline at end of file
diff --git a/example/index.ts b/example/index.ts
index fb2c867..5fd059f 100644
--- a/example/index.ts
+++ b/example/index.ts
@@ -1,4 +1,4 @@
 import { registerRootComponent } from 'expo';
-import StorybookUI from './.rnstorybook';
+import App from './App';
 
-registerRootComponent(StorybookUI);
+registerRootComponent(App);
diff --git a/example/package.json b/example/package.json
index 3be3e75..a544715 100644
--- a/example/package.json
+++ b/example/package.json
@@ -18,6 +18,7 @@
     "@storybook/addon-ondevice-controls": "^10.2.3",
     "@storybook/react-native": "^10.2.3",
     "expo": "~54.0.33",
+    "expo-font": "^55.0.6",
     "expo-status-bar": "~3.0.9",
     "lottie-react-native": "^7.3.6",
     "react": "19.1.0",
diff --git a/package.json b/package.json
index be0e3ec..217afe4 100644
--- a/package.json
+++ b/package.json
@@ -110,7 +110,8 @@
       "node_modules/(?!(react-native|@react-native|lucide-react-native)/)"
     ],
     "moduleNameMapper": {
-      "^react-native-reanimated$": "<rootDir>/__mocks__/react-native-reanimated.ts"
+      "^react-native-reanimated$": "<rootDir>/__mocks__/react-native-reanimated.ts",
+      "^react-native-gesture-handler$": "<rootDir>/__mocks__/react-native-gesture-handler.ts"
     },
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
diff --git a/src/components/Atoms/Switch/__tests__/Switch.test.tsx b/src/components/Atoms/Switch/__tests__/Switch.test.tsx
new file mode 100644
index 0000000..e82cfed
--- /dev/null
+++ b/src/components/Atoms/Switch/__tests__/Switch.test.tsx
@@ -0,0 +1,44 @@
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { Switch } from '../index';
+
+const baseProps = {
+  onPress: jest.fn(),
+};
+
+describe('Switch', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('Renders correctly when isOn is true', () => {
+      const { toJSON } = render(<Switch {...baseProps} isOn />);
+      expect(toJSON()).not.toBeNull();
+    });
+
+    it('Renders correctly when isOn is false', () => {
+      const { toJSON } = render(<Switch {...baseProps} isOn={false} />);
+      expect(toJSON()).not.toBeNull();
+    });
+  });
+
+  describe('Press behavior', () => {
+    it('Calls onPress when pressed', () => {
+      const onPress = jest.fn();
+      render(<Switch onPress={onPress} />);
+
+      fireEvent.press(screen.getByRole('switch'));
+
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('Does NOT call onPress when disabled is true', () => {
+      const onPress = jest.fn();
+      render(<Switch onPress={onPress} disabled />);
+
+      fireEvent.press(screen.getByRole('switch'));
+
+      expect(onPress).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/components/Atoms/Switch/constants/SWITCH_PADDING.ts b/src/components/Atoms/Switch/constants/SWITCH_PADDING.ts
new file mode 100644
index 0000000..f66ddb7
--- /dev/null
+++ b/src/components/Atoms/Switch/constants/SWITCH_PADDING.ts
@@ -0,0 +1,3 @@
+import { Tokens } from '../../../../tokens/Tokens.class';
+
+export const SWITCH_PADDING = Tokens.spacer({ key: 'xxs' });
diff --git a/src/components/Atoms/Switch/constants/SWITCH_THUMB_SIZE.ts b/src/components/Atoms/Switch/constants/SWITCH_THUMB_SIZE.ts
new file mode 100644
index 0000000..576d1eb
--- /dev/null
+++ b/src/components/Atoms/Switch/constants/SWITCH_THUMB_SIZE.ts
@@ -0,0 +1,3 @@
+import { Tokens } from '../../../../tokens/Tokens.class';
+
+export const SWITCH_THUMB_SIZE = Tokens.spacer({ key: 'lg' });
diff --git a/src/components/Atoms/Switch/constants/SWITCH_TRACK_HEIGHT.ts b/src/components/Atoms/Switch/constants/SWITCH_TRACK_HEIGHT.ts
new file mode 100644
index 0000000..d99fcbc
--- /dev/null
+++ b/src/components/Atoms/Switch/constants/SWITCH_TRACK_HEIGHT.ts
@@ -0,0 +1,3 @@
+import { Tokens } from '../../../../tokens/Tokens.class';
+
+export const SWITCH_TRACK_HEIGHT = Tokens.spacer({ key: 'xl' });
diff --git a/src/components/Atoms/Switch/constants/SWITCH_TRACK_WIDTH.ts b/src/components/Atoms/Switch/constants/SWITCH_TRACK_WIDTH.ts
new file mode 100644
index 0000000..854ca50
--- /dev/null
+++ b/src/components/Atoms/Switch/constants/SWITCH_TRACK_WIDTH.ts
@@ -0,0 +1,3 @@
+import { Tokens } from '../../../../tokens/Tokens.class';
+
+export const SWITCH_TRACK_WIDTH = Tokens.spacer({ key: 'xxl' });
diff --git a/src/components/Atoms/Switch/constants/index.ts b/src/components/Atoms/Switch/constants/index.ts
new file mode 100644
index 0000000..37203d5
--- /dev/null
+++ b/src/components/Atoms/Switch/constants/index.ts
@@ -0,0 +1,4 @@
+export * from './SWITCH_TRACK_WIDTH';
+export * from './SWITCH_TRACK_HEIGHT';
+export * from './SWITCH_THUMB_SIZE';
+export * from './SWITCH_PADDING';
diff --git a/src/components/Atoms/Switch/hooks/index.ts b/src/components/Atoms/Switch/hooks/index.ts
new file mode 100644
index 0000000..416cc49
--- /dev/null
+++ b/src/components/Atoms/Switch/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from './useSwitchViewModel';
+export * from './useReanimatedStyles';
diff --git a/src/components/Atoms/Switch/hooks/useReanimatedStyles/index.ts b/src/components/Atoms/Switch/hooks/useReanimatedStyles/index.ts
new file mode 100644
index 0000000..bf46d64
--- /dev/null
+++ b/src/components/Atoms/Switch/hooks/useReanimatedStyles/index.ts
@@ -0,0 +1,32 @@
+import type { IMountReanimatedStylesProps } from './types';
+import { useEffect } from 'react';
+import {
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { SWITCH_TRACK_WIDTH, SWITCH_THUMB_SIZE, SWITCH_PADDING } from '../../constants';
+
+export const useReanimatedStyles = (props: IMountReanimatedStylesProps) => {
+  const { isOn, accentColor, borderDefaultColor } = props;
+
+  const progress = useSharedValue(isOn ? 1 : 0);
+
+  useEffect(() => {
+    progress.value = withTiming(isOn ? 1 : 0, { duration: 200 });
+  }, [isOn, progress]);
+
+  const track = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(progress.value, [0, 1], [borderDefaultColor, accentColor]),
+  }), [borderDefaultColor, accentColor]);
+
+  const thumb = useAnimatedStyle(() => ({
+    transform: [{ translateX: progress.value * (SWITCH_TRACK_WIDTH - SWITCH_THUMB_SIZE - 2 * SWITCH_PADDING) }],
+  }), []);
+
+  return {
+    track,
+    thumb,
+  };
+};
diff --git a/src/components/Atoms/Switch/hooks/useReanimatedStyles/types/IMountReanimatedStylesProps.ts b/src/components/Atoms/Switch/hooks/useReanimatedStyles/types/IMountReanimatedStylesProps.ts
new file mode 100644
index 0000000..b776861
--- /dev/null
+++ b/src/components/Atoms/Switch/hooks/useReanimatedStyles/types/IMountReanimatedStylesProps.ts
@@ -0,0 +1,5 @@
+export type IMountReanimatedStylesProps = {
+  isOn: boolean;
+  accentColor: string;
+  borderDefaultColor: string;
+};
diff --git a/src/components/Atoms/Switch/hooks/useReanimatedStyles/types/index.ts b/src/components/Atoms/Switch/hooks/useReanimatedStyles/types/index.ts
new file mode 100644
index 0000000..eca5fcd
--- /dev/null
+++ b/src/components/Atoms/Switch/hooks/useReanimatedStyles/types/index.ts
@@ -0,0 +1 @@
+export * from './IMountReanimatedStylesProps';
diff --git a/src/components/Atoms/Switch/hooks/useSwitchViewModel/__tests__/useSwitchViewModel.test.ts b/src/components/Atoms/Switch/hooks/useSwitchViewModel/__tests__/useSwitchViewModel.test.ts
new file mode 100644
index 0000000..3e9b7e9
--- /dev/null
+++ b/src/components/Atoms/Switch/hooks/useSwitchViewModel/__tests__/useSwitchViewModel.test.ts
@@ -0,0 +1,26 @@
+import { renderHook } from '@testing-library/react-native';
+import { useSwitchViewModel } from '../index';
+
+describe('useSwitchViewModel', () => {
+  describe('onToggle', () => {
+    it('Calls onPress when not disabled', () => {
+      const onPress = jest.fn();
+      const { result } = renderHook(() => useSwitchViewModel({ onPress }));
+
+      result.current.onToggle();
+
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('Does NOT call onPress when disabled', () => {
+      const onPress = jest.fn();
+      const { result } = renderHook(() =>
+        useSwitchViewModel({ onPress, disabled: true }),
+      );
+
+      result.current.onToggle();
+
+      expect(onPress).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/components/Atoms/Switch/hooks/useSwitchViewModel/index.ts b/src/components/Atoms/Switch/hooks/useSwitchViewModel/index.ts
new file mode 100644
index 0000000..e345eba
--- /dev/null
+++ b/src/components/Atoms/Switch/hooks/useSwitchViewModel/index.ts
@@ -0,0 +1,15 @@
+import type { ISwitchProps } from '../../types';
+
+export const useSwitchViewModel = (props: ISwitchProps) => {
+  const { onPress, disabled } = props;
+
+  function onToggle() {
+    if (!disabled) {
+      onPress();
+    }
+  }
+
+  return {
+    onToggle,
+  };
+};
diff --git a/src/components/Atoms/Switch/index.tsx b/src/components/Atoms/Switch/index.tsx
new file mode 100644
index 0000000..69a665d
--- /dev/null
+++ b/src/components/Atoms/Switch/index.tsx
@@ -0,0 +1,36 @@
+import type { ISwitchProps } from './types';
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { useStyles } from './styles';
+import { SWITCH_PADDING } from './constants';
+import { useRubberDuckStore } from '../../../store';
+import { useSwitchViewModel, useReanimatedStyles } from './hooks';
+
+export const Switch: React.FC<ISwitchProps> = (props) => {
+  const { isOn, disabled } = props;
+
+  const colors = useRubberDuckStore((s) => s.colors);
+  const styles = useStyles();
+  const reanimatedStyles = useReanimatedStyles({
+    isOn: !!isOn,
+    accentColor: colors.accent,
+    borderDefaultColor: colors.borderDefault,
+  });
+  const { onToggle } = useSwitchViewModel(props);
+
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={onToggle}
+      disabled={!!disabled}
+      hitSlop={SWITCH_PADDING}
+      style={{ padding: SWITCH_PADDING }}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: !!isOn, disabled: !!disabled }}>
+      <Animated.View style={[styles.track, reanimatedStyles.track]}>
+        <Animated.View style={[styles.thumb, reanimatedStyles.thumb]} />
+      </Animated.View>
+    </TouchableOpacity>
+  );
+};
diff --git a/src/components/Atoms/Switch/styles.ts b/src/components/Atoms/Switch/styles.ts
new file mode 100644
index 0000000..a09d9e9
--- /dev/null
+++ b/src/components/Atoms/Switch/styles.ts
@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+import { useRubberDuckStore } from '../../../store';
+import { Tokens } from '../../../tokens/Tokens.class';
+import { SWITCH_TRACK_WIDTH, SWITCH_TRACK_HEIGHT, SWITCH_THUMB_SIZE, SWITCH_PADDING } from './constants';
+
+export const useStyles = () => {
+  const colors = useRubberDuckStore((s) => s.colors);
+
+  return StyleSheet.create({
+    track: {
+      width: SWITCH_TRACK_WIDTH,
+      height: SWITCH_TRACK_HEIGHT,
+      borderRadius: Tokens.radii({ key: 'full' }),
+      padding: SWITCH_PADDING,
+      justifyContent: 'center',
+    },
+
+    thumb: {
+      width: SWITCH_THUMB_SIZE,
+      height: SWITCH_THUMB_SIZE,
+      borderRadius: Tokens.radii({ key: 'full' }),
+      backgroundColor: colors.background,
+    },
+  });
+};
diff --git a/src/components/Atoms/Switch/types/ISwitchProps.ts b/src/components/Atoms/Switch/types/ISwitchProps.ts
new file mode 100644
index 0000000..7f3cfc0
--- /dev/null
+++ b/src/components/Atoms/Switch/types/ISwitchProps.ts
@@ -0,0 +1,5 @@
+export interface ISwitchProps {
+  isOn?: boolean;
+  onPress: () => void;
+  disabled?: boolean;
+}
diff --git a/src/components/Atoms/Switch/types/index.ts b/src/components/Atoms/Switch/types/index.ts
new file mode 100644
index 0000000..19f62c9
--- /dev/null
+++ b/src/components/Atoms/Switch/types/index.ts
@@ -0,0 +1 @@
+export * from './ISwitchProps';
diff --git a/src/components/Atoms/Text/__tests__/Text.test.tsx b/src/components/Atoms/Text/__tests__/Text.test.tsx
index ad6e5dd..89cf5b5 100644
--- a/src/components/Atoms/Text/__tests__/Text.test.tsx
+++ b/src/components/Atoms/Text/__tests__/Text.test.tsx
@@ -16,4 +16,27 @@ describe('Text', () => {
     const { toJSON } = render(<Text>content</Text>);
     expect(toJSON()).not.toBeNull();
   });
+
+  describe('Inline bold', () => {
+    it('Renders plain text without bold segments', () => {
+      render(<Text>Hello world</Text>);
+      expect(screen.getByText('Hello world')).toBeTruthy();
+    });
+
+    it('Renders bold segment with bold style', () => {
+      render(<Text>{'I agree to the **Terms & Privacy Policy**'}</Text>);
+      expect(screen.getByText('Terms & Privacy Policy')).toBeTruthy();
+    });
+
+    it('Renders plain segments alongside bold segments', () => {
+      render(<Text>{'I agree to the **Terms & Privacy Policy**'}</Text>);
+      expect(screen.getByText('I agree to the ')).toBeTruthy();
+      expect(screen.getByText('Terms & Privacy Policy')).toBeTruthy();
+    });
+
+    it('Renders non-string children as-is', () => {
+      render(<Text>{42}</Text>);
+      expect(screen.getByText('42')).toBeTruthy();
+    });
+  });
 });
diff --git a/src/components/Atoms/Text/hooks/index.ts b/src/components/Atoms/Text/hooks/index.ts
new file mode 100644
index 0000000..596d6ae
--- /dev/null
+++ b/src/components/Atoms/Text/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useTextViewModel';
diff --git a/src/components/Atoms/Text/hooks/useTextViewModel/__tests__/useTextViewModel.test.ts b/src/components/Atoms/Text/hooks/useTextViewModel/__tests__/useTextViewModel.test.ts
new file mode 100644
index 0000000..f7f73b5
--- /dev/null
+++ b/src/components/Atoms/Text/hooks/useTextViewModel/__tests__/useTextViewModel.test.ts
@@ -0,0 +1,25 @@
+import { renderHook } from '@testing-library/react-native';
+import { useTextViewModel } from '../index';
+
+describe('useTextViewModel', () => {
+  describe('content', () => {
+    it('Returns children as-is when there are no bold markers', () => {
+      const { result } = renderHook(() =>
+        useTextViewModel({ children: 'Hello world' }),
+      );
+      expect(result.current.content).toBe('Hello world');
+    });
+
+    it('Returns children as-is when children is not a string', () => {
+      const { result } = renderHook(() => useTextViewModel({ children: 42 }));
+      expect(result.current.content).toBe(42);
+    });
+
+    it('Returns an array of segments when children has bold markers', () => {
+      const { result } = renderHook(() =>
+        useTextViewModel({ children: 'I agree to the **Terms & Privacy Policy**' }),
+      );
+      expect(Array.isArray(result.current.content)).toBe(true);
+    });
+  });
+});
diff --git a/src/components/Atoms/Text/hooks/useTextViewModel/index.ts b/src/components/Atoms/Text/hooks/useTextViewModel/index.ts
new file mode 100644
index 0000000..306137e
--- /dev/null
+++ b/src/components/Atoms/Text/hooks/useTextViewModel/index.ts
@@ -0,0 +1,24 @@
+import type { ITextProps } from '../../types';
+import type { PropsWithChildren, ReactNode } from 'react';
+import React, { useMemo } from 'react';
+import { Text as TextRN } from 'react-native';
+import { useStyles } from '../../styles';
+import { parseInlineBold } from '../../library';
+
+export const useTextViewModel = (props: PropsWithChildren<ITextProps>) => {
+  const { children } = props;
+
+  const styles = useStyles(props);
+
+  const content = useMemo((): ReactNode => {
+    if (typeof children !== 'string' || !children.includes('**')) return children as ReactNode;
+    
+    return parseInlineBold(children).map(({ text, bold, key }) =>
+      React.createElement(TextRN, { key, style: bold ? styles.boldText : undefined }, text)
+    );
+  }, [children, styles.boldText]);
+
+  return {
+    content,
+  };
+};
diff --git a/src/components/Atoms/Text/index.tsx b/src/components/Atoms/Text/index.tsx
index 4bc44cc..1173c23 100644
--- a/src/components/Atoms/Text/index.tsx
+++ b/src/components/Atoms/Text/index.tsx
@@ -2,16 +2,18 @@ import type { ITextProps } from './types';
 import type { PropsWithChildren } from 'react';
 import React from 'react';
 import { Text as TextRN } from 'react-native';
+import { useTextViewModel } from './hooks';
 import { useStyles } from './styles';
 
 export const Text: React.FC<PropsWithChildren<ITextProps>> = (props) => {
-  const { children, numberOfLines } = props;
-
-  const styles = useStyles(props);
+  const { numberOfLines } = props;
   
+  const styles = useStyles(props);
+  const { content } = useTextViewModel(props);
+
   return (
     <TextRN style={styles.text} numberOfLines={numberOfLines}>
-      {children}
+      {content}
     </TextRN>
   );
 };
diff --git a/src/components/Atoms/Text/library/__tests__/parseInlineBold.test.ts b/src/components/Atoms/Text/library/__tests__/parseInlineBold.test.ts
new file mode 100644
index 0000000..e2fd326
--- /dev/null
+++ b/src/components/Atoms/Text/library/__tests__/parseInlineBold.test.ts
@@ -0,0 +1,42 @@
+import { parseInlineBold } from '../parseInlineBold';
+
+describe('Text/parseInlineBold', () => {
+  it('Returns a single plain segment when there is no bold marker', () => {
+    const result = parseInlineBold('Hello world');
+    expect(result).toEqual([{ text: 'Hello world', bold: false, key: 0 }]);
+  });
+
+  it('Returns a bold segment when the entire string is wrapped', () => {
+    const result = parseInlineBold('**Hello world**');
+    expect(result).toEqual([
+      { text: '', bold: false, key: 0 },
+      { text: 'Hello world', bold: true, key: 1 },
+      { text: '', bold: false, key: 2 },
+    ]);
+  });
+
+  it('Splits plain and bold segments correctly', () => {
+    const result = parseInlineBold('I agree to the **Terms & Privacy Policy**');
+    expect(result).toEqual([
+      { text: 'I agree to the ', bold: false, key: 0 },
+      { text: 'Terms & Privacy Policy', bold: true, key: 1 },
+      { text: '', bold: false, key: 2 },
+    ]);
+  });
+
+  it('Handles multiple bold segments', () => {
+    const result = parseInlineBold('**Hello** and **world**');
+    expect(result).toEqual([
+      { text: '', bold: false, key: 0 },
+      { text: 'Hello', bold: true, key: 1 },
+      { text: ' and ', bold: false, key: 2 },
+      { text: 'world', bold: true, key: 3 },
+      { text: '', bold: false, key: 4 },
+    ]);
+  });
+
+  it('Returns plain segment when markers are incomplete', () => {
+    const result = parseInlineBold('Hello **world');
+    expect(result).toEqual([{ text: 'Hello **world', bold: false, key: 0 }]);
+  });
+});
diff --git a/src/components/Atoms/Text/library/index.ts b/src/components/Atoms/Text/library/index.ts
new file mode 100644
index 0000000..e7055e1
--- /dev/null
+++ b/src/components/Atoms/Text/library/index.ts
@@ -0,0 +1 @@
+export * from './parseInlineBold';
diff --git a/src/components/Atoms/Text/library/parseInlineBold.ts b/src/components/Atoms/Text/library/parseInlineBold.ts
new file mode 100644
index 0000000..b526b01
--- /dev/null
+++ b/src/components/Atoms/Text/library/parseInlineBold.ts
@@ -0,0 +1,9 @@
+export function parseInlineBold(text: string) {
+  return text.split(/(\*\*[^*]+\*\*)/g).map((segment, index) => {
+    const match = segment.match(/^\*\*(.+)\*\*$/);
+    if (match) {
+      return { text: match[1], bold: true, key: index };
+    }
+    return { text: segment, bold: false, key: index };
+  });
+}
diff --git a/src/components/Atoms/Text/styles.ts b/src/components/Atoms/Text/styles.ts
index 2b43e8f..80a201b 100644
--- a/src/components/Atoms/Text/styles.ts
+++ b/src/components/Atoms/Text/styles.ts
@@ -15,6 +15,7 @@ export const useStyles = (props: ITextProps) => {
 
   const fontFamily = Tokens.fontFamily({ key: 'sans' })[weight];
   const fontSize = Tokens.fontSize({ key: size });
+  const boldFontFamily = Tokens.fontFamily({ key: 'sans' }).semibold;
 
   return StyleSheet.create({
     text: {
@@ -23,5 +24,9 @@ export const useStyles = (props: ITextProps) => {
       textAlign: align,
       color: colors[color],
     },
+    
+    boldText: {
+      fontFamily: boldFontFamily,
+    },
   });
 };
diff --git a/src/components/Atoms/index.ts b/src/components/Atoms/index.ts
index af6e204..54b60f4 100644
--- a/src/components/Atoms/index.ts
+++ b/src/components/Atoms/index.ts
@@ -1,3 +1,4 @@
 export * from './Text';
 export * from './Icon';
 export * from './Loading';
+export * from './Switch';
diff --git a/src/components/Molecules/Avatar/index.tsx b/src/components/Molecules/Avatar/index.tsx
index 72eb55d..c7d98cd 100644
--- a/src/components/Molecules/Avatar/index.tsx
+++ b/src/components/Molecules/Avatar/index.tsx
@@ -65,8 +65,8 @@ export const Avatar: React.FC<IAvatarProps> = (props) => {
             align="center"
             color="white"
             size={size === 'medium_40' || size === 'small_32'
-              ? 'lg'
-              : 'xxl'
+              ? 'md'
+              : 'xl'
             }>
             {letters}
           </Text>
diff --git a/src/components/Molecules/Button/__tests__/Button.test.tsx b/src/components/Molecules/Button/__tests__/Button.test.tsx
new file mode 100644
index 0000000..92ab995
--- /dev/null
+++ b/src/components/Molecules/Button/__tests__/Button.test.tsx
@@ -0,0 +1,70 @@
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { Button } from '../index';
+
+jest.mock('lucide-react-native', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+  const mockIcon = (name: string) => (props: object) =>
+    React.createElement(View, { testID: `icon-${name}`, ...props });
+  return new Proxy({}, { get: (_t: object, name: string) => mockIcon(name) });
+});
+
+const baseProps = {
+  label: 'Press me',
+  onPress: jest.fn(),
+};
+
+describe('Button', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Label', () => {
+    it('renders the label', () => {
+      render(<Button {...baseProps} />);
+      expect(screen.getByText('Press me')).toBeTruthy();
+    });
+  });
+
+  describe('Press behavior', () => {
+    it('calls onPress when pressed', () => {
+      const onPress = jest.fn();
+      render(<Button label="Press me" onPress={onPress} />);
+      fireEvent.press(screen.getByText('Press me'));
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onPress when disabled', () => {
+      const onPress = jest.fn();
+      render(<Button label="Press me" onPress={onPress} disabled />);
+      fireEvent.press(screen.getByText('Press me'));
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
+    it('does not call onPress when isLoading', () => {
+      const onPress = jest.fn();
+      render(<Button label="Press me" onPress={onPress} isLoading testID="btn" />);
+      fireEvent.press(screen.getByTestId('btn'));
+      expect(onPress).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Loading state', () => {
+    it('hides the label when isLoading is true', () => {
+      render(<Button {...baseProps} isLoading />);
+      expect(screen.queryByText('Press me')).toBeNull();
+    });
+  });
+
+  describe('Icons', () => {
+    it('renders the leftIcon when provided', () => {
+      render(<Button {...baseProps} leftIcon="ArrowLeft" />);
+      expect(screen.getByTestId('icon-ArrowLeft')).toBeTruthy();
+    });
+
+    it('renders the rightIcon when provided', () => {
+      render(<Button {...baseProps} rightIcon="ArrowRight" />);
+      expect(screen.getByTestId('icon-ArrowRight')).toBeTruthy();
+    });
+  });
+});
diff --git a/src/components/Molecules/Button/hooks/index.ts b/src/components/Molecules/Button/hooks/index.ts
new file mode 100644
index 0000000..872add6
--- /dev/null
+++ b/src/components/Molecules/Button/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useButtonViewModel';
diff --git a/src/components/Molecules/Button/hooks/useButtonViewModel/__tests__/useButtonViewModel.test.ts b/src/components/Molecules/Button/hooks/useButtonViewModel/__tests__/useButtonViewModel.test.ts
new file mode 100644
index 0000000..d19e08d
--- /dev/null
+++ b/src/components/Molecules/Button/hooks/useButtonViewModel/__tests__/useButtonViewModel.test.ts
@@ -0,0 +1,135 @@
+import { renderHook } from '@testing-library/react-native';
+import { useButtonViewModel } from '../index';
+
+const baseProps = {
+  label: 'Press me',
+  onPress: jest.fn(),
+};
+
+describe('useButtonViewModel', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('onPressButton', () => {
+    it('Calls onPress when not disabled and not loading', () => {
+      const onPress = jest.fn();
+      const { result } = renderHook(() => useButtonViewModel({ ...baseProps, onPress }));
+
+      result.current.onPressButton();
+
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('Does not call onPress when disabled is true', () => {
+      const onPress = jest.fn();
+      const { result } = renderHook(() =>
+        useButtonViewModel({ ...baseProps, onPress, disabled: true }),
+      );
+
+      result.current.onPressButton();
+
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
+    it('Does not call onPress when isLoading is true', () => {
+      const onPress = jest.fn();
+      const { result } = renderHook(() =>
+        useButtonViewModel({ ...baseProps, onPress, isLoading: true }),
+      );
+
+      result.current.onPressButton();
+
+      expect(onPress).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('sizes', () => {
+    it('Returns sm config for size sm', () => {
+      const { result } = renderHook(() => useButtonViewModel({ ...baseProps, size: 'sm' }));
+
+      expect(result.current.sizes.height).toBe(36);
+      expect(result.current.sizes.fontSize).toBe('xs');
+      expect(result.current.sizes.iconSize).toBe('small_16');
+      expect(result.current.sizes.loadingSize).toBe('tiny_48');
+    });
+
+    it('Returns md config for size md', () => {
+      const { result } = renderHook(() => useButtonViewModel({ ...baseProps, size: 'md' }));
+
+      expect(result.current.sizes.height).toBe(44);
+      expect(result.current.sizes.fontSize).toBe('sm');
+      expect(result.current.sizes.iconSize).toBe('tiny_20');
+      expect(result.current.sizes.loadingSize).toBe('small_64');
+    });
+
+    it('Returns lg config for size lg', () => {
+      const { result } = renderHook(() => useButtonViewModel({ ...baseProps, size: 'lg' }));
+
+      expect(result.current.sizes.height).toBe(52);
+      expect(result.current.sizes.fontSize).toBe('md');
+      expect(result.current.sizes.iconSize).toBe('tiny_20');
+      expect(result.current.sizes.loadingSize).toBe('small_64');
+    });
+
+    it('Defaults to md when size is not provided', () => {
+      const { result } = renderHook(() => useButtonViewModel(baseProps));
+
+      expect(result.current.sizes.height).toBe(44);
+      expect(result.current.sizes.fontSize).toBe('sm');
+    });
+  });
+
+  describe('variantColors', () => {
+    it('Returns correct text and iconColor for primary variant', () => {
+      const { result } = renderHook(() =>
+        useButtonViewModel({ ...baseProps, variant: 'primary' }),
+      );
+
+      expect(result.current.variantColors.text).toBe('black');
+      expect(result.current.variantColors.iconColor).toBe('black');
+    });
+
+    it('Returns correct text and iconColor for secondary variant', () => {
+      const { result } = renderHook(() =>
+        useButtonViewModel({ ...baseProps, variant: 'secondary' }),
+      );
+
+      expect(result.current.variantColors.text).toBe('textPrimary');
+      expect(result.current.variantColors.iconColor).toBe('textPrimary');
+    });
+
+    it('Returns transparent background for outline variant', () => {
+      const { result } = renderHook(() =>
+        useButtonViewModel({ ...baseProps, variant: 'outline' }),
+      );
+
+      expect(result.current.variantColors.background).toBe('transparent');
+      expect(result.current.variantColors.text).toBe('textPrimary');
+    });
+
+    it('Returns transparent background and border for ghost variant', () => {
+      const { result } = renderHook(() =>
+        useButtonViewModel({ ...baseProps, variant: 'ghost' }),
+      );
+
+      expect(result.current.variantColors.background).toBe('transparent');
+      expect(result.current.variantColors.border).toBe('transparent');
+    });
+
+    it('Returns correct text for destructive variant', () => {
+      const { result } = renderHook(() =>
+        useButtonViewModel({ ...baseProps, variant: 'destructive' }),
+      );
+
+      expect(result.current.variantColors.text).toBe('textInverse');
+      expect(result.current.variantColors.iconColor).toBe('textInverse');
+    });
+
+    it('Defaults to primary variant when variant is not provided', () => {
+      const { result } = renderHook(() => useButtonViewModel(baseProps));
+
+      expect(result.current.variantColors.text).toBe('black');
+    });
+  });
+});
diff --git a/src/components/Molecules/Button/hooks/useButtonViewModel/index.ts b/src/components/Molecules/Button/hooks/useButtonViewModel/index.ts
new file mode 100644
index 0000000..793e8d3
--- /dev/null
+++ b/src/components/Molecules/Button/hooks/useButtonViewModel/index.ts
@@ -0,0 +1,28 @@
+import type { IButtonProps } from '../../types';
+import { useRubberDuckStore } from '../../../../../store';
+import { buildSize, buildVariantColors } from '../../library';
+
+export const useButtonViewModel = (props: IButtonProps) => {
+  const {
+    onPress,
+    disabled,
+    isLoading,
+    variant = 'primary',
+    size = 'md',
+  } = props;
+
+  const colors = useRubberDuckStore((s) => s.colors);
+  const sizes = buildSize(size);
+  const variantColors = buildVariantColors(variant, colors);
+
+  function onPressButton() {
+    if (disabled || isLoading) return;
+    onPress();
+  }
+
+  return { 
+    onPressButton, 
+    sizes, 
+    variantColors,
+  };
+};
diff --git a/src/components/Molecules/Button/index.tsx b/src/components/Molecules/Button/index.tsx
new file mode 100644
index 0000000..ecb4463
--- /dev/null
+++ b/src/components/Molecules/Button/index.tsx
@@ -0,0 +1,68 @@
+import type { IButtonProps } from './types';
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { useStyles } from './styles';
+import { useButtonViewModel } from './hooks';
+import { Text } from '../../Atoms/Text';
+import { Icon } from '../../Atoms/Icon';
+import { Loading } from '../../Atoms/Loading';
+
+export const Button: React.FC<IButtonProps> = (props) => {
+  const {
+    label,
+    leftIcon,
+    rightIcon,
+    isLoading,
+    disabled,
+    testID,
+  } = props;
+
+  const { onPressButton, sizes, variantColors } = useButtonViewModel(props);
+  const styles = useStyles(props, sizes, variantColors);
+
+  return (
+    <TouchableOpacity
+      testID={testID}
+      activeOpacity={disabled ? 1 : 0.8}
+      disabled={disabled || isLoading}
+      onPress={onPressButton}
+      style={styles.button}>
+      {isLoading
+        ?
+        <Loading 
+          size={sizes.loadingSize} 
+          color={variantColors.iconColor} 
+        />
+        :
+        <View style={styles.content}>
+          {leftIcon
+            ?
+            <Icon
+              icon={leftIcon}
+              size={sizes.iconSize}
+              color={variantColors.iconColor}
+            />
+            : null
+          }
+
+          <Text
+            size={sizes.fontSize}
+            weight="semibold"
+            color={variantColors.text}>
+            {label}
+          </Text>
+
+          {rightIcon
+            ?
+            <Icon
+              icon={rightIcon}
+              size={sizes.iconSize}
+              color={variantColors.iconColor}
+            />
+            : null
+          }
+        </View>
+      }
+    </TouchableOpacity>
+  );
+};
diff --git a/src/components/Molecules/Button/library/buildSize.ts b/src/components/Molecules/Button/library/buildSize.ts
new file mode 100644
index 0000000..b70c1c7
--- /dev/null
+++ b/src/components/Molecules/Button/library/buildSize.ts
@@ -0,0 +1,45 @@
+import type { IconSize } from '../../../Atoms/Icon/types';
+import type { LoadingSize } from '../../../Atoms/Loading/types';
+import type { FONT_SIZES } from '../../../../tokens/typography';
+import type { ButtonSize } from '../types';
+import { Tokens } from '../../../../tokens/Tokens.class';
+
+export type ButtonSizeConfig = {
+  height: number;
+  paddingHorizontal: number;
+  fontSize: keyof typeof FONT_SIZES;
+  iconSize: IconSize;
+  loadingSize: LoadingSize;
+};
+
+export const buildSize = (size: ButtonSize): ButtonSizeConfig => {
+  switch (size) {
+    case 'sm':
+      return {
+        height: 36,
+        paddingHorizontal: Tokens.spacer({ key: 'sm' }),
+        fontSize: 'xs',
+        iconSize: 'small_16',
+        loadingSize: 'tiny_48',
+      };
+
+    case 'md':
+      return {
+        height: 44,
+        paddingHorizontal: Tokens.spacer({ key: 'md' }),
+        fontSize: 'sm',
+        iconSize: 'tiny_20',
+        loadingSize: 'small_64',
+      };
+
+    case 'lg':
+    default:
+      return {
+        height: 52,
+        paddingHorizontal: Tokens.spacer({ key: 'lg' }),
+        fontSize: 'md',
+        iconSize: 'tiny_20',
+        loadingSize: 'small_64',
+      };
+  }
+};
diff --git a/src/components/Molecules/Button/library/buildVariantColors.ts b/src/components/Molecules/Button/library/buildVariantColors.ts
new file mode 100644
index 0000000..a283b41
--- /dev/null
+++ b/src/components/Molecules/Button/library/buildVariantColors.ts
@@ -0,0 +1,54 @@
+import type { IColors } from '../../../../tokens/colors';
+import type { ButtonVariant } from '../types';
+
+export type ButtonVariantColors = {
+  background: string;
+  border: string;
+  text: keyof IColors;
+  iconColor: keyof IColors;
+};
+
+export const buildVariantColors = (variant: ButtonVariant, colors: IColors): ButtonVariantColors => {
+  switch (variant) {
+    case 'primary':
+      return {
+        background: colors.accent,
+        border: colors.accent,
+        text: 'black',
+        iconColor: 'black',
+      };
+
+    case 'secondary':
+      return {
+        background: colors.surface,
+        border: colors.borderDefault,
+        text: 'textPrimary',
+        iconColor: 'textPrimary',
+      };
+
+    case 'outline':
+      return {
+        background: 'transparent',
+        border: colors.borderDefault,
+        text: 'textPrimary',
+        iconColor: 'textPrimary',
+      };
+
+    case 'ghost':
+      return {
+        background: 'transparent',
+        border: 'transparent',
+        text: 'textPrimary',
+        iconColor: 'textPrimary',
+      };
+
+    case 'destructive':
+    default:
+      return {
+        background: colors.error,
+        border: colors.error,
+        text: 'textInverse',
+        iconColor: 'textInverse',
+      };
+  }
+};
diff --git a/src/components/Molecules/Button/library/index.ts b/src/components/Molecules/Button/library/index.ts
new file mode 100644
index 0000000..203a95b
--- /dev/null
+++ b/src/components/Molecules/Button/library/index.ts
@@ -0,0 +1,2 @@
+export * from './buildSize';
+export * from './buildVariantColors';
diff --git a/src/components/Molecules/Button/styles.ts b/src/components/Molecules/Button/styles.ts
new file mode 100644
index 0000000..cca9210
--- /dev/null
+++ b/src/components/Molecules/Button/styles.ts
@@ -0,0 +1,33 @@
+import type { IButtonProps } from './types';
+import type { ButtonSizeConfig, ButtonVariantColors } from './library';
+import { StyleSheet } from 'react-native';
+import { Tokens } from '../../../tokens/Tokens.class';
+
+export const useStyles = (
+  props: IButtonProps,
+  sizes: ButtonSizeConfig,
+  variantColors: ButtonVariantColors,
+) => {
+  const { variant = 'primary', disabled } = props;
+
+  return StyleSheet.create({
+    button: {
+      height: sizes.height,
+      paddingHorizontal: sizes.paddingHorizontal,
+      borderRadius: Tokens.radii({ key: 'lg' }),
+      backgroundColor: variantColors.background,
+      borderWidth: variant === 'outline' ? 1 : 0,
+      borderColor: variantColors.border,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      opacity: disabled ? 0.5 : 1,
+    },
+    
+    content: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: Tokens.spacer({ key: 'xs' }),
+    },
+  });
+};
diff --git a/src/components/Molecules/Button/types/ButtonSize.ts b/src/components/Molecules/Button/types/ButtonSize.ts
new file mode 100644
index 0000000..a052696
--- /dev/null
+++ b/src/components/Molecules/Button/types/ButtonSize.ts
@@ -0,0 +1 @@
+export type ButtonSize = 'sm' | 'md' | 'lg';
diff --git a/src/components/Molecules/Button/types/ButtonVariant.ts b/src/components/Molecules/Button/types/ButtonVariant.ts
new file mode 100644
index 0000000..b1dc08c
--- /dev/null
+++ b/src/components/Molecules/Button/types/ButtonVariant.ts
@@ -0,0 +1,6 @@
+export type ButtonVariant = 
+  | 'primary' 
+  | 'secondary' 
+  | 'outline' 
+  | 'ghost' 
+  | 'destructive';
diff --git a/src/components/Molecules/Button/types/IButtonProps.ts b/src/components/Molecules/Button/types/IButtonProps.ts
new file mode 100644
index 0000000..fa21d1e
--- /dev/null
+++ b/src/components/Molecules/Button/types/IButtonProps.ts
@@ -0,0 +1,15 @@
+import type { IconName } from '../../../Atoms/Icon/types';
+import type { ButtonVariant } from './ButtonVariant';
+import type { ButtonSize } from './ButtonSize';
+
+export interface IButtonProps {
+  label: string;
+  onPress: () => void;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  isLoading?: boolean;
+  leftIcon?: IconName;
+  rightIcon?: IconName;
+  testID?: string;
+}
diff --git a/src/components/Molecules/Button/types/index.ts b/src/components/Molecules/Button/types/index.ts
new file mode 100644
index 0000000..1b72ae9
--- /dev/null
+++ b/src/components/Molecules/Button/types/index.ts
@@ -0,0 +1,3 @@
+export * from './ButtonSize';
+export * from './ButtonVariant';
+export * from './IButtonProps';
diff --git a/src/components/Molecules/CheckBox/index.tsx b/src/components/Molecules/CheckBox/index.tsx
index e51796e..3f050b1 100644
--- a/src/components/Molecules/CheckBox/index.tsx
+++ b/src/components/Molecules/CheckBox/index.tsx
@@ -35,9 +35,9 @@ export const CheckBox: React.FC<ICheckBoxProps> = (props) => {
 
       {title || subTitle ? (
         <View style={styles.titles}>
-          {title ? <Text>{title}</Text> : null}
+          {title ? <Text size="sm">{title}</Text> : null}
 
-          {subTitle ? <Text weight="light">{subTitle}</Text> : null}
+          {subTitle ? <Text size="sm" weight="light">{subTitle}</Text> : null}
         </View>
       ) : null}
     </TouchableOpacity>
diff --git a/src/components/Molecules/Inputs/MoneyField/index.tsx b/src/components/Molecules/Inputs/MoneyField/index.tsx
index 1372498..6136fb6 100644
--- a/src/components/Molecules/Inputs/MoneyField/index.tsx
+++ b/src/components/Molecules/Inputs/MoneyField/index.tsx
@@ -41,7 +41,7 @@ export const MoneyField: React.FC<IMoneyFieldProps> = (props) => {
       {title || isRequired
         ?
         <View style={styles.headerWrapper}>
-          {title ? <Text weight="semibold" align="left">{title}</Text> : null}
+          {title ? <Text size="sm" weight="semibold" align="left">{title}</Text> : null}
 
           {isRequired
             ?
diff --git a/src/components/Molecules/Inputs/MoneyField/styles.ts b/src/components/Molecules/Inputs/MoneyField/styles.ts
index 5e346dc..76eab75 100644
--- a/src/components/Molecules/Inputs/MoneyField/styles.ts
+++ b/src/components/Molecules/Inputs/MoneyField/styles.ts
@@ -23,7 +23,7 @@ export const useStyles = (props: IMoneyFieldProps) => {
     inputWrapper: {
       borderWidth: 2,
       borderColor: colors.borderDefault,
-      borderRadius: Tokens.radii({ key: 'xs' }),
+      borderRadius: Tokens.radii({ key: 'lg' }),
       backgroundColor: colors.background,
     },
 
diff --git a/src/components/Molecules/Inputs/MultilineText/index.tsx b/src/components/Molecules/Inputs/MultilineText/index.tsx
index e3a662a..0fed200 100644
--- a/src/components/Molecules/Inputs/MultilineText/index.tsx
+++ b/src/components/Molecules/Inputs/MultilineText/index.tsx
@@ -40,7 +40,7 @@ export const MultilineText: React.FC<IMultilineTextProps> = (props) => {
       {title || isRequired
         ?
         <View style={styles.headerWrapper}>
-          {title ? <Text weight="semibold" align="left">{title}</Text> : null}
+          {title ? <Text size="sm" weight="semibold" align="left">{title}</Text> : null}
 
           {isRequired
             ?
diff --git a/src/components/Molecules/Inputs/MultilineText/styles.ts b/src/components/Molecules/Inputs/MultilineText/styles.ts
index 5e56ee5..e8d3cb1 100644
--- a/src/components/Molecules/Inputs/MultilineText/styles.ts
+++ b/src/components/Molecules/Inputs/MultilineText/styles.ts
@@ -23,7 +23,7 @@ export const useStyles = (props: IMultilineTextProps) => {
     inputWrapper: {
       borderWidth: 2,
       borderColor: colors.borderDefault,
-      borderRadius: Tokens.radii({ key: 'xs' }),
+      borderRadius: Tokens.radii({ key: 'lg' }),
       backgroundColor: colors.background,
       minHeight: 24 * numberOfLines,
     },
diff --git a/src/components/Molecules/Inputs/NumberField/index.tsx b/src/components/Molecules/Inputs/NumberField/index.tsx
index 974d333..898d536 100644
--- a/src/components/Molecules/Inputs/NumberField/index.tsx
+++ b/src/components/Molecules/Inputs/NumberField/index.tsx
@@ -40,7 +40,7 @@ export const NumberField: React.FC<INumberFieldProps> = (props) => {
       {title || isRequired
         ?
         <View style={styles.headerWrapper}>
-          {title ? <Text weight="semibold" align="left">{title}</Text> : null}
+          {title ? <Text size="sm" weight="semibold" align="left">{title}</Text> : null}
 
           {isRequired
             ?
@@ -75,7 +75,7 @@ export const NumberField: React.FC<INumberFieldProps> = (props) => {
         {rightLabel
           ?
           <View style={styles.rightLabel}>
-            <Text size="sm" color="textSecondary">{rightLabel}</Text>
+            <Text size="xs" color="textSecondary">{rightLabel}</Text>
           </View>
           : null
         }
diff --git a/src/components/Molecules/Inputs/NumberField/styles.ts b/src/components/Molecules/Inputs/NumberField/styles.ts
index 52983ab..7f95f5d 100644
--- a/src/components/Molecules/Inputs/NumberField/styles.ts
+++ b/src/components/Molecules/Inputs/NumberField/styles.ts
@@ -25,7 +25,7 @@ export const useStyles = (props: INumberFieldProps) => {
       alignItems: 'center',
       borderWidth: 2,
       borderColor: colors.borderDefault,
-      borderRadius: Tokens.radii({ key: 'xs' }),
+      borderRadius: Tokens.radii({ key: 'lg' }),
       backgroundColor: colors.background,
     },
 
diff --git a/src/components/Molecules/Inputs/SimpleText/index.tsx b/src/components/Molecules/Inputs/SimpleText/index.tsx
index 51ef0ca..6635242 100644
--- a/src/components/Molecules/Inputs/SimpleText/index.tsx
+++ b/src/components/Molecules/Inputs/SimpleText/index.tsx
@@ -1,6 +1,6 @@
 import type { ISimpleTextProps } from './types';
 import React from 'react';
-import { TextInput, View } from 'react-native';
+import { TextInput, TouchableOpacity, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useStyles } from './styles';
 import { useRubberDuckStore } from '../../../../store';
@@ -16,6 +16,9 @@ export const SimpleText: React.FC<ISimpleTextProps> = (props) => {
     isRequired,
     isReadOnly,
     isDisabled,
+    rightIcon,
+    secureTextEntry,
+    autoCapitalize,
   } = props;
 
   const colors = useRubberDuckStore((s) => s.colors);
@@ -39,7 +42,7 @@ export const SimpleText: React.FC<ISimpleTextProps> = (props) => {
       {title || isRequired
         ?
         <View style={styles.headerWrapper}>
-          {title ? <Text weight="semibold" align="left">{title}</Text> : null}
+          {title ? <Text size="sm" weight="semibold" align="left">{title}</Text> : null}
 
           {isRequired
             ?
@@ -65,10 +68,24 @@ export const SimpleText: React.FC<ISimpleTextProps> = (props) => {
           placeholder={placeholder}
           placeholderTextColor={colors.textSecondary}
           autoCorrect={false}
+          autoCapitalize={autoCapitalize}
           autoComplete="off"
           readOnly={isReadOnly}
           editable={!isDisabled}
+          secureTextEntry={secureTextEntry}
         />
+
+        {rightIcon
+          ?
+          <TouchableOpacity
+            style={styles.rightIconWrapper}
+            onPress={rightIcon.onPress}
+            hitSlop={8}
+            activeOpacity={0.8}>
+            <Icon icon={rightIcon.icon} size="small_16" color="textSecondary" />
+          </TouchableOpacity>
+          : null
+        }
       </Animated.View>
     </View>
   );
diff --git a/src/components/Molecules/Inputs/SimpleText/styles.ts b/src/components/Molecules/Inputs/SimpleText/styles.ts
index acd28ed..bb7a2bf 100644
--- a/src/components/Molecules/Inputs/SimpleText/styles.ts
+++ b/src/components/Molecules/Inputs/SimpleText/styles.ts
@@ -21,18 +21,25 @@ export const useStyles = (props: ISimpleTextProps) => {
     },
 
     inputWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
       borderWidth: 2,
       borderColor: colors.borderDefault,
-      borderRadius: Tokens.radii({ key: 'xs' }),
+      borderRadius: Tokens.radii({ key: 'lg' }),
       backgroundColor: colors.background,
     },
 
     textInput: {
+      flex: 1,
       minHeight: 48,
       paddingVertical: Tokens.spacer({ key: 'sm' }),
       paddingHorizontal: Tokens.spacer({ key: 'sm' }),
       fontSize: Tokens.fontSize({ key: 'md' }),
       color: colors.textPrimary,
     },
+
+    rightIconWrapper: {
+      paddingRight: Tokens.spacer({ key: 'sm' }),
+    },
   });
 };
diff --git a/src/components/Molecules/Inputs/SimpleText/types/ISimpleTextProps.ts b/src/components/Molecules/Inputs/SimpleText/types/ISimpleTextProps.ts
index a698008..4f2b147 100644
--- a/src/components/Molecules/Inputs/SimpleText/types/ISimpleTextProps.ts
+++ b/src/components/Molecules/Inputs/SimpleText/types/ISimpleTextProps.ts
@@ -1,3 +1,5 @@
+import type { IconName } from "../../../../Atoms/Icon/types";
+
 export interface ISimpleTextProps {
   title?: string;
   value: string;
@@ -6,4 +8,10 @@ export interface ISimpleTextProps {
   isRequired?: boolean;
   isReadOnly?: boolean;
   isDisabled?: boolean;
+  rightIcon?: {
+    icon: IconName;
+    onPress: () => void;
+  };
+  secureTextEntry?: boolean;
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
 }
diff --git a/src/components/Molecules/RadioButton/index.tsx b/src/components/Molecules/RadioButton/index.tsx
index 8e474db..7e097c1 100644
--- a/src/components/Molecules/RadioButton/index.tsx
+++ b/src/components/Molecules/RadioButton/index.tsx
@@ -36,17 +36,17 @@ export const RadioButton: React.FC<IRadioButtonProps> = (props) => {
     <TouchableOpacity
       onPress={onPress}
       style={styles.wrapper}
-      activeOpacity={0.7}>
+      activeOpacity={0.8}>
       <View style={styles.leftCheckWrapper}>
         <Animated.View style={[styles.leftCheck, leftCheckStyle]} />
       </View>
 
       {title || subTitle ? (
         <View>
-          {title ? <Text numberOfLines={1}>{title}</Text> : null}
+          {title ? <Text size="sm" numberOfLines={1}>{title}</Text> : null}
 
           {subTitle ? (
-            <Text color="textSecondary" numberOfLines={1}>
+            <Text size="sm" color="textSecondary" numberOfLines={1}>
               {subTitle}
             </Text>
           ) : null}
diff --git a/src/components/Molecules/index.ts b/src/components/Molecules/index.ts
index 68528a4..5e5613a 100644
--- a/src/components/Molecules/index.ts
+++ b/src/components/Molecules/index.ts
@@ -1,3 +1,4 @@
+export * from './Button';
 export * from './CheckBox';
 export * from './RadioButton';
 export * from './Avatar';
diff --git a/src/components/Organisms/BottomListModal/components/ModalList/index.tsx b/src/components/Organisms/BottomListModal/components/ModalList/index.tsx
index b9ca3e6..8d16705 100644
--- a/src/components/Organisms/BottomListModal/components/ModalList/index.tsx
+++ b/src/components/Organisms/BottomListModal/components/ModalList/index.tsx
@@ -24,7 +24,7 @@ export const ModalList: React.FC<IModalListProps> = (props) => {
   const renderHeader = useCallback(() => {
     return (
       <View style={styles.header}>
-        <Text weight="semibold" size="xl">{title}</Text>
+        <Text weight="semibold" size="lg">{title}</Text>
       </View>
     )
   }, [styles.header, title]);
diff --git a/src/components/Organisms/BottomListModal/components/ModalList/library/mountRenderItem.tsx b/src/components/Organisms/BottomListModal/components/ModalList/library/mountRenderItem.tsx
index 26978ac..451ff2c 100644
--- a/src/components/Organisms/BottomListModal/components/ModalList/library/mountRenderItem.tsx
+++ b/src/components/Organisms/BottomListModal/components/ModalList/library/mountRenderItem.tsx
@@ -55,11 +55,11 @@ export const mountRenderItem = (params: IMountRenderItemParams): ListRenderItem<
 
       case 'avatar':
         return (
-          <TouchableOpacity style={styles.itemWrapper} onPress={onPressItem}>
+          <TouchableOpacity activeOpacity={0.8} style={styles.itemWrapper} onPress={onPressItem}>
             <Avatar source={item.avatarSource} size="small_32" />
             <View style={styles.textWrapper}>
-              <Text>{item.title}</Text>
-              {item.subTitle ? <Text size="sm" color="textSecondary">{item.subTitle}</Text> : null}
+              <Text size="sm">{item.title}</Text>
+              {item.subTitle ? <Text size="xs" color="textSecondary">{item.subTitle}</Text> : null}
             </View>
           </TouchableOpacity>
         );
@@ -67,13 +67,13 @@ export const mountRenderItem = (params: IMountRenderItemParams): ListRenderItem<
       case 'icon':
         if (!item.iconName) { return null; }
         return (
-          <TouchableOpacity style={styles.itemWrapper} onPress={onPressItem}>
+          <TouchableOpacity activeOpacity={0.8} style={styles.itemWrapper} onPress={onPressItem}>
             <Icon
               icon={item.iconName}
               size="tiny_20"
               color={item.isDanger ? 'error' : 'textPrimary'}
             />
-            <Text color={item.isDanger ? 'error' : 'textPrimary'}>{item.title}</Text>
+            <Text size="sm" color={item.isDanger ? 'error' : 'textPrimary'}>{item.title}</Text>
           </TouchableOpacity>
         );
 
diff --git a/src/components/Organisms/Toaster/__tests__/Toaster.test.tsx b/src/components/Organisms/Toaster/__tests__/Toaster.test.tsx
new file mode 100644
index 0000000..e8dc4c2
--- /dev/null
+++ b/src/components/Organisms/Toaster/__tests__/Toaster.test.tsx
@@ -0,0 +1,70 @@
+import { render, screen, act } from '@testing-library/react-native';
+import { Toaster } from '../index';
+import { ToasterApi } from '../controllers';
+
+describe('Toaster', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    ToasterApi.setRef({ current: null });
+  });
+
+  it('Renders without crashing', () => {
+    const { toJSON } = render(<Toaster />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('Shows title after ToasterApi.show is called', () => {
+    render(<Toaster />);
+
+    act(() => {
+      ToasterApi.show({ type: 'success', title: 'Hello World' });
+    });
+
+    expect(screen.getByText('Hello World')).toBeTruthy();
+  });
+
+  it('Shows both title and description when description is provided', () => {
+    render(<Toaster />);
+
+    act(() => {
+      ToasterApi.show({
+        type: 'info',
+        title: 'Info Title',
+        description: 'Info Description',
+      });
+    });
+
+    expect(screen.getByText('Info Title')).toBeTruthy();
+    expect(screen.getByText('Info Description')).toBeTruthy();
+  });
+
+  it('Replaces content when show is called twice', () => {
+    render(<Toaster />);
+
+    act(() => {
+      ToasterApi.show({ type: 'success', title: 'First' });
+    });
+
+    act(() => {
+      ToasterApi.show({ type: 'error', title: 'Second' });
+      jest.advanceTimersByTime(100);
+    });
+
+    expect(screen.queryByText('First')).toBeNull();
+    expect(screen.getByText('Second')).toBeTruthy();
+  });
+
+  it('ToasterApi.hide does not throw', () => {
+    render(<Toaster />);
+
+    expect(() => {
+      act(() => {
+        ToasterApi.hide();
+      });
+    }).not.toThrow();
+  });
+});
diff --git a/src/components/Organisms/Toaster/constants/DEFAULT_TOAST_DURATION_MS.ts b/src/components/Organisms/Toaster/constants/DEFAULT_TOAST_DURATION_MS.ts
new file mode 100644
index 0000000..06cbaa9
--- /dev/null
+++ b/src/components/Organisms/Toaster/constants/DEFAULT_TOAST_DURATION_MS.ts
@@ -0,0 +1 @@
+export const DEFAULT_TOAST_DURATION_MS = 3000;
diff --git a/src/components/Organisms/Toaster/constants/TOAST_DRAG_DISMISS_THRESHOLD.ts b/src/components/Organisms/Toaster/constants/TOAST_DRAG_DISMISS_THRESHOLD.ts
new file mode 100644
index 0000000..ce1dad9
--- /dev/null
+++ b/src/components/Organisms/Toaster/constants/TOAST_DRAG_DISMISS_THRESHOLD.ts
@@ -0,0 +1 @@
+export const TOAST_DRAG_DISMISS_THRESHOLD = 40;
diff --git a/src/components/Organisms/Toaster/constants/TOAST_SLIDE_OFFSET.ts b/src/components/Organisms/Toaster/constants/TOAST_SLIDE_OFFSET.ts
new file mode 100644
index 0000000..044fd8c
--- /dev/null
+++ b/src/components/Organisms/Toaster/constants/TOAST_SLIDE_OFFSET.ts
@@ -0,0 +1,3 @@
+import { Tokens } from '../../../../tokens/Tokens.class';
+
+export const TOAST_SLIDE_OFFSET = Tokens.spacer({ key: 'xl' });
diff --git a/src/components/Organisms/Toaster/constants/TOAST_SLINGSHOT_MAX_OFFSET.ts b/src/components/Organisms/Toaster/constants/TOAST_SLINGSHOT_MAX_OFFSET.ts
new file mode 100644
index 0000000..5b3a1b2
--- /dev/null
+++ b/src/components/Organisms/Toaster/constants/TOAST_SLINGSHOT_MAX_OFFSET.ts
@@ -0,0 +1,3 @@
+import { Tokens } from '../../../../tokens/Tokens.class';
+
+export const TOAST_SLINGSHOT_MAX_OFFSET = Tokens.spacer({ key: 'lg' });
diff --git a/src/components/Organisms/Toaster/constants/TYPE_ICON_MAP.ts b/src/components/Organisms/Toaster/constants/TYPE_ICON_MAP.ts
new file mode 100644
index 0000000..0af9be8
--- /dev/null
+++ b/src/components/Organisms/Toaster/constants/TYPE_ICON_MAP.ts
@@ -0,0 +1,9 @@
+import type { ToasterType } from '../types';
+import type { IconName } from '../../../Atoms/Icon/types/IconName';
+
+export const TYPE_ICON_MAP: Record<ToasterType, IconName> = {
+  success: 'CircleCheck',
+  error: 'CircleX',
+  warning: 'TriangleAlert',
+  info: 'CircleAlert',
+};
diff --git a/src/components/Organisms/Toaster/constants/index.ts b/src/components/Organisms/Toaster/constants/index.ts
new file mode 100644
index 0000000..26ae8df
--- /dev/null
+++ b/src/components/Organisms/Toaster/constants/index.ts
@@ -0,0 +1,5 @@
+export * from './DEFAULT_TOAST_DURATION_MS';
+export * from './TOAST_DRAG_DISMISS_THRESHOLD';
+export * from './TOAST_SLINGSHOT_MAX_OFFSET';
+export * from './TOAST_SLIDE_OFFSET';
+export * from './TYPE_ICON_MAP';
diff --git a/src/components/Organisms/Toaster/controllers/ToasterApi/__tests__/ToasterApi.test.ts b/src/components/Organisms/Toaster/controllers/ToasterApi/__tests__/ToasterApi.test.ts
new file mode 100644
index 0000000..6104649
--- /dev/null
+++ b/src/components/Organisms/Toaster/controllers/ToasterApi/__tests__/ToasterApi.test.ts
@@ -0,0 +1,76 @@
+import { ToasterApi } from '../index';
+
+const makeRef = (overrides: Partial<{ show: jest.Mock; hide: jest.Mock }> = {}) => ({
+  current: {
+    show: jest.fn(),
+    hide: jest.fn(),
+    ...overrides,
+  },
+});
+
+describe('ToasterApi', () => {
+  afterEach(() => {
+    ToasterApi.setRef({ current: null });
+    jest.clearAllMocks();
+  });
+
+  describe('show', () => {
+    it('Does not throw when no ref has been set', () => {
+      expect(() =>
+        ToasterApi.show({ type: 'success', title: 'Test' }),
+      ).not.toThrow();
+    });
+
+    it('Does not throw when ref.current is null', () => {
+      ToasterApi.setRef({ current: null });
+      expect(() =>
+        ToasterApi.show({ type: 'success', title: 'Test' }),
+      ).not.toThrow();
+    });
+
+    it('Calls ref.current.show with the provided props', () => {
+      const ref = makeRef();
+      ToasterApi.setRef(ref);
+
+      const props = { type: 'success' as const, title: 'Hello' };
+      ToasterApi.show(props);
+
+      expect(ref.current.show).toHaveBeenCalledTimes(1);
+      expect(ref.current.show).toHaveBeenCalledWith(props);
+    });
+  });
+
+  describe('hide', () => {
+    it('Does not throw when no ref has been set', () => {
+      expect(() => ToasterApi.hide()).not.toThrow();
+    });
+
+    it('Does not throw when ref.current is null', () => {
+      ToasterApi.setRef({ current: null });
+      expect(() => ToasterApi.hide()).not.toThrow();
+    });
+
+    it('Calls ref.current.hide', () => {
+      const ref = makeRef();
+      ToasterApi.setRef(ref);
+
+      ToasterApi.hide();
+
+      expect(ref.current.hide).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('setRef', () => {
+    it('Replaces the previous ref', () => {
+      const first = makeRef();
+      const second = makeRef();
+
+      ToasterApi.setRef(first);
+      ToasterApi.setRef(second);
+      ToasterApi.hide();
+
+      expect(first.current.hide).not.toHaveBeenCalled();
+      expect(second.current.hide).toHaveBeenCalledTimes(1);
+    });
+  });
+});
diff --git a/src/components/Organisms/Toaster/controllers/ToasterApi/index.ts b/src/components/Organisms/Toaster/controllers/ToasterApi/index.ts
new file mode 100644
index 0000000..2e7644b
--- /dev/null
+++ b/src/components/Organisms/Toaster/controllers/ToasterApi/index.ts
@@ -0,0 +1,18 @@
+import type { RefObject } from 'react';
+import type { IToasterApi } from './types';
+import type { IToasterRefProps } from '../../types';
+
+export class ToasterApi {
+  private static ref: RefObject<IToasterApi | null> | null = null;
+
+  static setRef(ref: RefObject<IToasterApi | null>) {
+    this.ref = ref;
+  }
+
+  static show = (props: IToasterRefProps) =>
+    this.ref?.current?.show(props);
+
+  static hide = () => {
+    this.ref?.current?.hide();
+  };
+}
diff --git a/src/components/Organisms/Toaster/controllers/ToasterApi/types/IToasterApi.ts b/src/components/Organisms/Toaster/controllers/ToasterApi/types/IToasterApi.ts
new file mode 100644
index 0000000..424c35e
--- /dev/null
+++ b/src/components/Organisms/Toaster/controllers/ToasterApi/types/IToasterApi.ts
@@ -0,0 +1,6 @@
+import type { IToasterRefProps } from '../../../types';
+
+export interface IToasterApi {
+  show: (props: IToasterRefProps) => void;
+  hide: () => void;
+}
diff --git a/src/components/Organisms/Toaster/controllers/ToasterApi/types/index.ts b/src/components/Organisms/Toaster/controllers/ToasterApi/types/index.ts
new file mode 100644
index 0000000..aa3236a
--- /dev/null
+++ b/src/components/Organisms/Toaster/controllers/ToasterApi/types/index.ts
@@ -0,0 +1 @@
+export * from './IToasterApi';
diff --git a/src/components/Organisms/Toaster/controllers/index.ts b/src/components/Organisms/Toaster/controllers/index.ts
new file mode 100644
index 0000000..1efc333
--- /dev/null
+++ b/src/components/Organisms/Toaster/controllers/index.ts
@@ -0,0 +1,2 @@
+export * from './ToasterApi';
+export * from './ToasterApi/types';
diff --git a/src/components/Organisms/Toaster/hooks/index.ts b/src/components/Organisms/Toaster/hooks/index.ts
new file mode 100644
index 0000000..8a50dc4
--- /dev/null
+++ b/src/components/Organisms/Toaster/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from './useToasterViewModel';
+export * from './useReanimatedStyles';
diff --git a/src/components/Organisms/Toaster/hooks/useReanimatedStyles/index.ts b/src/components/Organisms/Toaster/hooks/useReanimatedStyles/index.ts
new file mode 100644
index 0000000..7f5eed8
--- /dev/null
+++ b/src/components/Organisms/Toaster/hooks/useReanimatedStyles/index.ts
@@ -0,0 +1,57 @@
+import { useEffect } from 'react';
+import { Gesture } from 'react-native-gesture-handler';
+import {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import {
+  TOAST_DRAG_DISMISS_THRESHOLD,
+  TOAST_SLINGSHOT_MAX_OFFSET,
+  TOAST_SLIDE_OFFSET,
+} from '../../constants';
+
+export const useReanimatedStyles = (isVisible: boolean, onDismiss: () => void) => {
+  const opacity = useSharedValue(0);
+  const translateY = useSharedValue(TOAST_SLIDE_OFFSET);
+  const dragY = useSharedValue(0);
+
+  useEffect(() => {
+    if (isVisible) {
+      dragY.value = 0;
+      opacity.value = withTiming(1, { duration: 200 });
+      translateY.value = withSpring(0, { damping: 18, stiffness: 180 });
+    } else {
+      opacity.value = withTiming(0, { duration: 200 });
+      translateY.value = withTiming(TOAST_SLIDE_OFFSET, { duration: 200 });
+    }
+  }, [isVisible, opacity, translateY, dragY]);
+
+  const gesture = Gesture.Pan()
+    .onUpdate((e) => {
+      if (e.translationY < 0) {
+        dragY.value = Math.max(e.translationY, -TOAST_SLINGSHOT_MAX_OFFSET);
+      } else {
+        dragY.value = e.translationY;
+      }
+    })
+    .onEnd((e) => {
+      if (e.translationY > TOAST_DRAG_DISMISS_THRESHOLD) {
+        runOnJS(onDismiss)();
+      } else {
+        dragY.value = withSpring(0);
+      }
+    });
+
+  const wrapper = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ translateY: translateY.value + dragY.value }],
+  }), []);
+
+  return {
+    wrapper,
+    gesture,
+  };
+};
diff --git a/src/components/Organisms/Toaster/hooks/useToasterViewModel/__tests__/useToasterViewModel.test.ts b/src/components/Organisms/Toaster/hooks/useToasterViewModel/__tests__/useToasterViewModel.test.ts
new file mode 100644
index 0000000..8ea6e3c
--- /dev/null
+++ b/src/components/Organisms/Toaster/hooks/useToasterViewModel/__tests__/useToasterViewModel.test.ts
@@ -0,0 +1,127 @@
+import { renderHook, act } from '@testing-library/react-native';
+import { useToasterViewModel } from '../index';
+import { ToasterApi } from '../../../controllers';
+
+jest.spyOn(ToasterApi, 'setRef');
+
+describe('useToasterViewModel', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    ToasterApi.setRef({ current: null });
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  describe('Initial state', () => {
+    it('toasterProps starts as undefined', () => {
+      const { result } = renderHook(() => useToasterViewModel(null));
+      expect(result.current.toasterProps).toBeUndefined();
+    });
+
+    it('isVisible starts as false', () => {
+      const { result } = renderHook(() => useToasterViewModel(null));
+      expect(result.current.isVisible).toBe(false);
+    });
+
+    it('Registers with ToasterApi on mount', () => {
+      renderHook(() => useToasterViewModel(null));
+      expect(ToasterApi.setRef).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('show', () => {
+    it('Sets toasterProps and isVisible to true', () => {
+      const { result } = renderHook(() => useToasterViewModel(null));
+
+      act(() => {
+        ToasterApi.show({ type: 'success', title: 'Hello' });
+      });
+
+      expect(result.current.toasterProps).toEqual({ type: 'success', title: 'Hello' });
+      expect(result.current.isVisible).toBe(true);
+    });
+
+    it('Auto-dismisses after default 3000ms', () => {
+      const { result } = renderHook(() => useToasterViewModel(null));
+
+      act(() => {
+        ToasterApi.show({ type: 'info', title: 'Auto-dismiss' });
+      });
+
+      expect(result.current.isVisible).toBe(true);
+
+      act(() => {
+        jest.advanceTimersByTime(3000);
+      });
+
+      expect(result.current.isVisible).toBe(false);
+    });
+
+    it('Honors custom duration', () => {
+      const { result } = renderHook(() => useToasterViewModel(null));
+
+      act(() => {
+        ToasterApi.show({ type: 'warning', title: 'Custom', duration: 1000 });
+      });
+
+      act(() => {
+        jest.advanceTimersByTime(999);
+      });
+
+      expect(result.current.isVisible).toBe(true);
+
+      act(() => {
+        jest.advanceTimersByTime(1);
+      });
+
+      expect(result.current.isVisible).toBe(false);
+    });
+
+    it('Calling show twice resets the timer', () => {
+      const { result } = renderHook(() => useToasterViewModel(null));
+
+      act(() => {
+        ToasterApi.show({ type: 'success', title: 'First' });
+      });
+
+      act(() => {
+        jest.advanceTimersByTime(2000);
+      });
+
+      act(() => {
+        ToasterApi.show({ type: 'error', title: 'Second' });
+      });
+
+      act(() => {
+        jest.advanceTimersByTime(2000);
+      });
+
+      expect(result.current.isVisible).toBe(true);
+
+      act(() => {
+        jest.advanceTimersByTime(1000);
+      });
+
+      expect(result.current.isVisible).toBe(false);
+    });
+  });
+
+  describe('hide', () => {
+    it('Sets isVisible to false and clears timer', () => {
+      const { result } = renderHook(() => useToasterViewModel(null));
+
+      act(() => {
+        ToasterApi.show({ type: 'success', title: 'Hello' });
+      });
+
+      act(() => {
+        ToasterApi.hide();
+      });
+
+      expect(result.current.isVisible).toBe(false);
+    });
+  });
+});
diff --git a/src/components/Organisms/Toaster/hooks/useToasterViewModel/index.ts b/src/components/Organisms/Toaster/hooks/useToasterViewModel/index.ts
new file mode 100644
index 0000000..5e9931c
--- /dev/null
+++ b/src/components/Organisms/Toaster/hooks/useToasterViewModel/index.ts
@@ -0,0 +1,58 @@
+import type { Ref } from 'react';
+import type { IToasterApi } from '../../controllers/ToasterApi/types';
+import type { IToasterRefProps } from '../../types';
+import { useState, useRef, useEffect, useImperativeHandle } from 'react';
+import { ToasterApi } from '../../controllers';
+import { DEFAULT_TOAST_DURATION_MS } from '../../constants';
+
+export const useToasterViewModel = (ref: Ref<IToasterApi> | null) => {
+  const [toasterProps, setToasterPropsState] = useState<IToasterRefProps | undefined>();
+  const [isVisible, setIsVisible] = useState(false);
+
+  const isGlobal = useRef(ref === null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const imperativeRef = useRef<IToasterApi | null>(null);
+
+  const clearTimer = () => {
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+
+  const show = (props: IToasterRefProps) => {
+    clearTimer();
+    setToasterPropsState(props);
+    setIsVisible(true);
+    timeoutRef.current = setTimeout(() => setIsVisible(false), props.duration ?? DEFAULT_TOAST_DURATION_MS);
+  };
+
+  const hide = () => {
+    clearTimer();
+    setIsVisible(false);
+  };
+
+  imperativeRef.current = { show, hide };
+
+  useImperativeHandle(ref, () => ({
+    show: (props) => imperativeRef.current?.show(props),
+    hide: () => imperativeRef.current?.hide(),
+  }), []);
+
+  useEffect(() => {
+    if (isGlobal.current) {
+      ToasterApi.setRef(imperativeRef);
+      return () => {
+        clearTimer();
+        ToasterApi.setRef({ current: null });
+      };
+    }
+    return () => clearTimer();
+  }, []);
+
+  return {
+    toasterProps,
+    isVisible,
+    hide,
+  };
+};
diff --git a/src/components/Organisms/Toaster/index.tsx b/src/components/Organisms/Toaster/index.tsx
new file mode 100644
index 0000000..57c1d65
--- /dev/null
+++ b/src/components/Organisms/Toaster/index.tsx
@@ -0,0 +1,60 @@
+import type { IToasterProps } from './types';
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { GestureDetector } from 'react-native-gesture-handler';
+import { useStyles } from './styles';
+import { useToasterViewModel, useReanimatedStyles } from './hooks';
+import { TYPE_ICON_MAP } from './constants';
+import { Text } from '../../Atoms/Text';
+import { Icon } from '../../Atoms/Icon';
+
+export const Toaster: React.FC<IToasterProps> = ({ ref }) => {
+  const { toasterProps, isVisible, hide } = useToasterViewModel(ref ?? null);
+  const styles = useStyles(toasterProps?.type);
+  const reanimatedStyles = useReanimatedStyles(isVisible, hide);
+
+  return (
+    <GestureDetector gesture={reanimatedStyles.gesture}>
+      <Animated.View
+        pointerEvents={isVisible ? 'box-none' : 'none'}
+        style={[styles.wrapper, reanimatedStyles.wrapper]}>
+        {toasterProps
+          ?
+          <>
+            <Icon
+              icon={TYPE_ICON_MAP[toasterProps.type]}
+              size="small_16"
+              color="white"
+            />
+            <View style={styles.textWrapper}>
+              <Text size="sm" weight="semibold" color="textInverse">
+                {toasterProps.title}
+              </Text>
+              {toasterProps.description
+                ?
+                <Text size="sm" color="textInverse">
+                  {toasterProps.description}
+                </Text>
+                : null
+              }
+            </View>
+
+            <TouchableOpacity
+              activeOpacity={0.8}
+              onPress={hide}
+              style={styles.closeButton}
+              hitSlop={8}>
+              <Icon icon="X" size="small_16" color="white" />
+            </TouchableOpacity>
+          </>
+          : null
+        }
+      </Animated.View>
+    </GestureDetector>
+  );
+};
+
+export type { IToasterApi } from './controllers/ToasterApi/types';
+export type { IToasterRefProps, ToasterType } from './types';
+export { ToasterApi } from './controllers';
diff --git a/src/components/Organisms/Toaster/styles.ts b/src/components/Organisms/Toaster/styles.ts
new file mode 100644
index 0000000..7d18a3e
--- /dev/null
+++ b/src/components/Organisms/Toaster/styles.ts
@@ -0,0 +1,41 @@
+import type { ToasterType } from './types';
+import { StyleSheet } from 'react-native';
+import { useRubberDuckStore } from '../../../store';
+import { Tokens } from '../../../tokens/Tokens.class';
+
+export const useStyles = (type: ToasterType | undefined) => {
+  const colors = useRubberDuckStore((s) => s.colors);
+
+  const backgroundColorMap: Record<ToasterType, string> = {
+    success: colors.success,
+    error: colors.error,
+    warning: colors.warning,
+    info: colors.info,
+  };
+
+  const backgroundColor = type ? backgroundColorMap[type] : colors.info;
+
+  return StyleSheet.create({
+    wrapper: {
+      position: 'absolute',
+      bottom: Tokens.spacer({ key: 'lg' }),
+      left: Tokens.spacer({ key: 'md' }),
+      right: Tokens.spacer({ key: 'md' }),
+      padding: Tokens.spacer({ key: 'md' }),
+      borderRadius: Tokens.radii({ key: 'lg' }),
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: Tokens.spacer({ key: 'sm' }),
+      backgroundColor,
+      zIndex: 999,
+    },
+
+    textWrapper: {
+      flex: 1,
+    },
+
+    closeButton: {
+      padding: Tokens.spacer({ key: 'xxs' }),
+    },
+  });
+};
diff --git a/src/components/Organisms/Toaster/types/IToasterProps.ts b/src/components/Organisms/Toaster/types/IToasterProps.ts
new file mode 100644
index 0000000..fe215ba
--- /dev/null
+++ b/src/components/Organisms/Toaster/types/IToasterProps.ts
@@ -0,0 +1,6 @@
+import type { Ref } from 'react';
+import type { IToasterApi } from '../controllers/ToasterApi/types';
+
+export interface IToasterProps {
+  ref?: Ref<IToasterApi>;
+}
diff --git a/src/components/Organisms/Toaster/types/IToasterRefProps.ts b/src/components/Organisms/Toaster/types/IToasterRefProps.ts
new file mode 100644
index 0000000..85f5bed
--- /dev/null
+++ b/src/components/Organisms/Toaster/types/IToasterRefProps.ts
@@ -0,0 +1,8 @@
+import type { ToasterType } from './ToasterType';
+
+export interface IToasterRefProps {
+  type: ToasterType;
+  title: string;
+  description?: string;
+  duration?: number;
+}
diff --git a/src/components/Organisms/Toaster/types/ToasterType.ts b/src/components/Organisms/Toaster/types/ToasterType.ts
new file mode 100644
index 0000000..1cfa1a4
--- /dev/null
+++ b/src/components/Organisms/Toaster/types/ToasterType.ts
@@ -0,0 +1 @@
+export type ToasterType = 'success' | 'error' | 'warning' | 'info';
diff --git a/src/components/Organisms/Toaster/types/index.ts b/src/components/Organisms/Toaster/types/index.ts
new file mode 100644
index 0000000..5661fb8
--- /dev/null
+++ b/src/components/Organisms/Toaster/types/index.ts
@@ -0,0 +1,3 @@
+export * from './ToasterType';
+export * from './IToasterRefProps';
+export * from './IToasterProps';
diff --git a/src/components/Organisms/index.ts b/src/components/Organisms/index.ts
index a1e9f50..61e0858 100644
--- a/src/components/Organisms/index.ts
+++ b/src/components/Organisms/index.ts
@@ -1,2 +1,3 @@
 export * from './BottomModal';
 export * from './BottomListModal';
+export * from './Toaster';
diff --git a/src/provider/index.tsx b/src/provider/index.tsx
index db5dfb8..9d878db 100644
--- a/src/provider/index.tsx
+++ b/src/provider/index.tsx
@@ -4,7 +4,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import { useStyles } from './styles';
 import { RubberDuckUI } from '../RubberDuckUI.class';
-import { BottomModal } from '../components';
+import { BottomModal, Toaster } from '../components';
 
 export const RubberDuckUIProvider: React.FC<IRubberDuckUIProviderProps> = (props) => {
   const {
@@ -30,6 +30,7 @@ export const RubberDuckUIProvider: React.FC<IRubberDuckUIProviderProps> = (props
       <BottomSheetModalProvider>
         {children}
         <BottomModal />
+        <Toaster />
       </BottomSheetModalProvider>
     </GestureHandlerRootView>
   );
diff --git a/src/store/index.ts b/src/store/index.ts
index 6d9878c..c23561f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -13,7 +13,7 @@ export const useRubberDuckStore = create<IStoreState>((set) => ({
       const isDarkMode = config.darkMode ?? state.isDarkMode;
       return {
         isDarkMode,
-        colors: config.colors ?? (isDarkMode ? dark : light),
+        colors: { ...(isDarkMode ? dark : light), ...config.colors },
       };
     });
   },
diff --git a/src/store/types/IConfigureStore.ts b/src/store/types/IConfigureStore.ts
index 1846fc7..afefd6b 100644
--- a/src/store/types/IConfigureStore.ts
+++ b/src/store/types/IConfigureStore.ts
@@ -2,5 +2,5 @@ import type { IColors } from '../../tokens/colors';
 
 export interface IConfigureStore {
   darkMode?: boolean;
-  colors?: IColors;
+  colors?: Partial<IColors>;
 }
diff --git a/src/tokens/typography/constants/FONT_SIZES.ts b/src/tokens/typography/constants/FONT_SIZES.ts
index 21446b6..8d26eef 100644
--- a/src/tokens/typography/constants/FONT_SIZES.ts
+++ b/src/tokens/typography/constants/FONT_SIZES.ts
@@ -1,10 +1,10 @@
 export const FONT_SIZES = {
-  xs: 10,
-  sm: 12,
-  md: 14,
-  lg: 16,
-  xl: 20,
-  xxl: 24,
-  xxxl: 32,
-  display: 40,
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 20,
+  xl: 24,
+  xxl: 32,
+  xxxl: 40,
+  display: 48,
 } as const;
diff --git a/yarn.lock b/yarn.lock
index e185328..91c19ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6863,6 +6863,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-font@npm:^55.0.6":
+  version: 55.0.6
+  resolution: "expo-font@npm:55.0.6"
+  dependencies:
+    fontfaceobserver: "npm:^2.1.0"
+  peerDependencies:
+    expo: "*"
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/accd823ca5ab4fb8ab3faf665414a22a0e991119ee2f99a35acf06b55b0dc0436d426515edf889114d1b7ebe5cd79094ef711ec052fc5f176e0abe56453d175d
+  languageName: node
+  linkType: hard
+
 "expo-font@npm:~14.0.11":
   version: 14.0.11
   resolution: "expo-font@npm:14.0.11"
@@ -11765,6 +11778,7 @@ __metadata:
     "@storybook/react-native": "npm:^10.2.3"
     "@types/react": "npm:~19.1.0"
     expo: "npm:~54.0.33"
+    expo-font: "npm:^55.0.6"
     expo-status-bar: "npm:~3.0.9"
     lottie-react-native: "npm:^7.3.6"
     react: "npm:19.1.0"