diff --git a/src/components/AppLoading.tsx b/src/components/AppLoading.tsx
index 33526997..17ea7c8e 100644
--- a/src/components/AppLoading.tsx
+++ b/src/components/AppLoading.tsx
@@ -1,17 +1,15 @@
-import { Loader, Center } from '@baca/design-system/components'
-import { useCachedResources, useNavigationTheme } from '@baca/hooks'
+import { Loader, Center, Box } from '@baca/design-system/components'
+import { useCachedResources } from '@baca/hooks'
 import { useCheckForAppUpdate } from '@baca/hooks/useCheckForAppUpdate'
 import { isSignedInAtom } from '@baca/store/auth'
 import * as SplashScreen from 'expo-splash-screen'
 import { useAtomValue } from 'jotai'
 import { FC, PropsWithChildren, useCallback, useEffect, useState } from 'react'
-import { View, StyleSheet } from 'react-native'
 
 // Keep the splash screen visible while we fetch resources
 SplashScreen.preventAutoHideAsync()
 
 export const AppLoading: FC<PropsWithChildren> = ({ children }) => {
-  const { navigationTheme } = useNavigationTheme()
   const isLoadingComplete = useCachedResources()
   const isSignedIn = useAtomValue(isSignedInAtom)
 
@@ -38,10 +36,7 @@ export const AppLoading: FC<PropsWithChildren> = ({ children }) => {
   }, [isLoading])
 
   return (
-    <View
-      {...{ onLayout }}
-      style={[styles.container, { backgroundColor: navigationTheme.colors.background }]}
-    >
+    <Box {...{ onLayout }} flex={1}>
       {!isSplashHidden ? (
         <Center bg="bg.primary" flexGrow={1}>
           <Loader type="bubbles" />
@@ -49,12 +44,6 @@ export const AppLoading: FC<PropsWithChildren> = ({ children }) => {
       ) : (
         children
       )}
-    </View>
+    </Box>
   )
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-})
diff --git a/src/components/CompanyLogo.tsx b/src/components/CompanyLogo.tsx
index 99ffbc52..84a81079 100644
--- a/src/components/CompanyLogo.tsx
+++ b/src/components/CompanyLogo.tsx
@@ -1,6 +1,8 @@
 import { darkBinarLogo, darkLogoSygnet, lightBinarLogo, lightLogoSygnet } from '@baca/constants'
 import { ColorSchemeName, useColorScheme } from '@baca/contexts'
 import { Image, ImageStyle, ImageProps } from 'expo-image'
+import { Link } from 'expo-router'
+import { Platform, StyleSheet } from 'react-native'
 
 type LogoTypes = 'binarSygnet' | 'binar'
 
@@ -16,15 +18,43 @@ export const CompanyLogo = ({
   type = 'binar',
   width = '100%',
   style,
+  asImage = false,
 }: {
   height?: ImageStyle['height']
   type?: LogoTypes
   width?: ImageStyle['width']
   style?: ImageStyle
+  asImage?: boolean
 }) => {
   const { colorScheme } = useColorScheme()
 
   const source = LOGO[colorScheme][type]
 
-  return <Image contentFit="scale-down" source={source} style={[{ height, width }, style]} />
+  if (Platform.OS !== 'web' || asImage) {
+    return <Image contentFit="scale-down" source={source} style={[{ height, width }, style]} />
+  }
+
+  return (
+    <Link
+      href="/"
+      style={[
+        {
+          height,
+          width,
+        },
+        styles.image,
+      ]}
+    >
+      <Image contentFit="scale-down" source={source} style={[{ height, width }, style]} />
+    </Link>
+  )
 }
+
+const styles = StyleSheet.create({
+  image: {
+    alignItems: 'center',
+    display: 'flex',
+    // flex: 1,
+    justifyContent: 'center',
+  },
+})
diff --git a/src/components/ThemeSwitcherButton.tsx b/src/components/ThemeSwitcherButton.tsx
new file mode 100644
index 00000000..6cf9d6d2
--- /dev/null
+++ b/src/components/ThemeSwitcherButton.tsx
@@ -0,0 +1,42 @@
+import { useColorScheme } from '@baca/contexts'
+import { Icon } from '@baca/design-system'
+import { useTheme } from '@baca/hooks'
+import { MotiPressable } from 'moti/interactions'
+import { useCallback } from 'react'
+import { StyleSheet } from 'react-native'
+
+export const ThemeSwitcherButton = () => {
+  const { setColorSchemeSetting, colorSchemeSetting } = useColorScheme()
+  const { colors } = useTheme()
+
+  const handleColorSchemeSettingChange = useCallback(() => {
+    const scheme = colorSchemeSetting === 'light' ? 'dark' : 'light'
+    setColorSchemeSetting(scheme)
+  }, [colorSchemeSetting, setColorSchemeSetting])
+
+  const icon = colorSchemeSetting === 'light' ? 'moon-line' : 'sun-line'
+
+  return (
+    <MotiPressable
+      onPress={handleColorSchemeSettingChange}
+      style={styles.iconContainter}
+      animate={({ hovered }) => {
+        'worklet'
+
+        return {
+          scale: hovered ? 1.1 : 1,
+          backgroundColor: hovered ? colors.bg.tertiary : 'transparent',
+        }
+      }}
+    >
+      <Icon name={icon} size={24} color="text.primary" />
+    </MotiPressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  iconContainter: {
+    borderRadius: 8,
+    padding: 8,
+  },
+})
diff --git a/src/components/molecules/Field/RadioGroup.tsx b/src/components/molecules/Field/RadioGroup.tsx
index 5c6615c3..551e623b 100644
--- a/src/components/molecules/Field/RadioGroup.tsx
+++ b/src/components/molecules/Field/RadioGroup.tsx
@@ -43,3 +43,5 @@ export const RadioGroup = <T extends string>({
     </Box>
   )
 }
+
+RadioGroup.displayName = 'RadioGroup'
diff --git a/src/components/molecules/SocialButtons/SocialButton.tsx b/src/components/molecules/SocialButtons/SocialButton.tsx
index 25715f71..8e43aeb3 100644
--- a/src/components/molecules/SocialButtons/SocialButton.tsx
+++ b/src/components/molecules/SocialButtons/SocialButton.tsx
@@ -75,3 +75,5 @@ export const SocialButton: FC<SocialButtonProps> = ({ type = 'google', ...rest }
     </Button>
   )
 }
+
+SocialButton.displayName = 'SocialButton'
diff --git a/src/design-system/components/Box.tsx b/src/design-system/components/Box.tsx
index a66fb2c6..538f96ff 100644
--- a/src/design-system/components/Box.tsx
+++ b/src/design-system/components/Box.tsx
@@ -7,3 +7,5 @@ import { generateStyledComponent } from '../utils/generateStyledComponent'
 export type BoxProps = StyledProps & ViewProps
 
 export const Box = memo(generateStyledComponent<BoxProps, View>(View))
+
+Box.displayName = 'Box'
diff --git a/src/design-system/components/BubblesLoader.tsx b/src/design-system/components/BubblesLoader.tsx
index e9ba85a6..bdc76493 100644
--- a/src/design-system/components/BubblesLoader.tsx
+++ b/src/design-system/components/BubblesLoader.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@baca/hooks'
 import { useBubblesLoader } from '@baca/hooks/loaders'
 import React from 'react'
 import Animated from 'react-native-reanimated'
@@ -9,12 +10,15 @@ export type BubblesLoaderType = {
   size?: number
 }
 
-const FullCircle = ({ size = 10, color = 'black' }: BubblesLoaderType): JSX.Element => (
+const FullCircle = ({ size = 10, color }: BubblesLoaderType): JSX.Element => (
   <Box style={{ backgroundColor: color, borderRadius: size / 2, width: size, height: size }} />
 )
 
-export const BubblesLoader = ({ size = 40, color = 'black' }: BubblesLoaderType): JSX.Element => {
+export const BubblesLoader = ({ size = 40, color }: BubblesLoaderType): JSX.Element => {
   const { animatedHeight, animatedRotate, animatedWidth } = useBubblesLoader()
+  const theme = useTheme()
+
+  const loaderColor = color || theme.colors.text.primary
 
   const containerStyle = {
     width: size,
@@ -37,12 +41,12 @@ export const BubblesLoader = ({ size = 40, color = 'black' }: BubblesLoaderType)
   return (
     <Animated.View style={[containerStyle, animatedRotate]}>
       <Animated.View style={[rowStyle, animatedWidth]}>
-        <FullCircle color={color} />
-        <FullCircle color={color} />
+        <FullCircle color={loaderColor} />
+        <FullCircle color={loaderColor} />
       </Animated.View>
       <Animated.View style={[absoluteStyle, animatedHeight]}>
-        <FullCircle color={color} />
-        <FullCircle color={color} />
+        <FullCircle color={loaderColor} />
+        <FullCircle color={loaderColor} />
       </Animated.View>
     </Animated.View>
   )
diff --git a/src/design-system/components/Button/Button.tsx b/src/design-system/components/Button/Button.tsx
index ab5b7451..34cce16a 100644
--- a/src/design-system/components/Button/Button.tsx
+++ b/src/design-system/components/Button/Button.tsx
@@ -329,19 +329,42 @@ const Button = generateStyledComponent<ButtonProps, typeof Pressable>(
   RawButton
 ) as ButtonComposition
 
+Button.displayName = 'Button'
+
 const generateButtonVariant = (variant: ButtonVariant) =>
   forwardRef<View, ButtonProps>((props, ref) => <Button {...{ ...props, ref, variant }} />)
 
 Button.Primary = generateButtonVariant('Primary')
+Button.Primary.displayName = 'Button.Primary'
+
 Button.PrimaryDestructive = generateButtonVariant('PrimaryDestructive')
+Button.PrimaryDestructive.displayName = 'Button.PrimaryDestructive'
+
 Button.SecondaryColor = generateButtonVariant('SecondaryColor')
+Button.SecondaryColor.displayName = 'Button.SecondaryColor'
+
 Button.SecondaryGray = generateButtonVariant('SecondaryGray')
+Button.SecondaryGray.displayName = 'Button.SecondaryGray'
+
 Button.SecondaryDestructive = generateButtonVariant('SecondaryDestructive')
+Button.SecondaryDestructive.displayName = 'Button.SecondaryDestructive'
+
 Button.TertiaryColor = generateButtonVariant('TertiaryColor')
+Button.TertiaryColor.displayName = 'Button.TertiaryColor'
+
 Button.TertiaryGray = generateButtonVariant('TertiaryGray')
+Button.TertiaryGray.displayName = 'Button.TertiaryGray'
+
 Button.TertiaryDestructive = generateButtonVariant('TertiaryDestructive')
+Button.TertiaryDestructive.displayName = 'Button.TertiaryDestructive'
+
 Button.LinkColor = generateButtonVariant('LinkColor')
+Button.LinkColor.displayName = 'Button.LinkColor'
+
 Button.LinkGray = generateButtonVariant('LinkGray')
+Button.LinkGray.displayName = 'Button.LinkGray'
+
 Button.LinkDestructive = generateButtonVariant('LinkDestructive')
+Button.LinkDestructive.displayName = 'Button.LinkDestructive'
 
 export { Button }
diff --git a/src/design-system/components/CheckboxButton.tsx b/src/design-system/components/CheckboxButton.tsx
index b8bdcca1..c89077b6 100644
--- a/src/design-system/components/CheckboxButton.tsx
+++ b/src/design-system/components/CheckboxButton.tsx
@@ -103,3 +103,5 @@ export const CheckboxButton = ({
     </Box>
   )
 }
+
+CheckboxButton.displayName = 'CheckboxButton'
diff --git a/src/design-system/components/CircleLoader.tsx b/src/design-system/components/CircleLoader.tsx
index 3836dcb0..2fd53a9b 100644
--- a/src/design-system/components/CircleLoader.tsx
+++ b/src/design-system/components/CircleLoader.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@baca/hooks'
 import { useCircleLoader } from '@baca/hooks/loaders'
 import React from 'react'
 import Animated, {
@@ -102,9 +103,10 @@ const HalfCircle = ({
 export const CircleLoader = ({
   size = 32,
   thickness = 2,
-  color = 'black',
+  color,
 }: CircleLoaderType): JSX.Element => {
   const { animatedRotate, progress } = useCircleLoader()
+  const theme = useTheme()
 
   const fullCircleStyle = {
     width: size,
@@ -114,7 +116,7 @@ export const CircleLoader = ({
   } as const
 
   const circleStyleProps = {
-    color,
+    color: color || theme.colors.text.primary,
     size,
     thickness,
   }
diff --git a/src/design-system/components/Loader.tsx b/src/design-system/components/Loader.tsx
index bf32271b..f5cf12db 100644
--- a/src/design-system/components/Loader.tsx
+++ b/src/design-system/components/Loader.tsx
@@ -55,3 +55,5 @@ export const Loader = ({ type, ...props }: LoaderType): JSX.Element => {
 
   return renderLoader
 }
+
+Loader.displayName = 'Loader'
diff --git a/src/design-system/components/RenderComponentWithExample.tsx b/src/design-system/components/RenderComponentWithExample.tsx
new file mode 100644
index 00000000..045efe36
--- /dev/null
+++ b/src/design-system/components/RenderComponentWithExample.tsx
@@ -0,0 +1,139 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Box } from '@baca/design-system/components/Box'
+import { Center } from '@baca/design-system/components/Center'
+import { Icon } from '@baca/design-system/components/Icon'
+import { Row } from '@baca/design-system/components/Row'
+import { Text } from '@baca/design-system/components/Text'
+import { Touchable } from '@baca/design-system/components/Touchables'
+import { useWeb } from '@baca/hooks'
+import { showSuccessToast } from '@baca/utils'
+import * as Clipboard from 'expo-clipboard'
+
+type RenderExampleProps = {
+  Component: React.FC<any> | React.ForwardRefExoticComponent<any> | string
+  ComponentWithProps?: JSX.Element
+  propsToOmmit?: string[]
+}
+
+const RenderExample = ({ Component, ComponentWithProps, propsToOmmit }: RenderExampleProps) => {
+  const componentName =
+    typeof Component === 'string'
+      ? Component
+      : Component.displayName || Component.name || 'Component'
+
+  const componentProps = ComponentWithProps?.props || {}
+
+  // Function to generate props as string
+  const generatePropsString = (props: Record<string, any>) => {
+    const filteredProps = Object.entries(props).filter(([key]) => {
+      // Exclude 'children' from props
+      if (key === 'children') {
+        return false
+      }
+
+      // Exclude props that are not needed
+      if (propsToOmmit && propsToOmmit.includes(key)) {
+        return false
+      }
+
+      return true
+    })
+
+    return filteredProps
+
+      .map(([key, value]) => {
+        if (typeof value === 'string') {
+          // Check if value is a code expression (e.g., starts with 't(')
+          if (/^\s*t\(.+\)\s*$/.test(value)) {
+            return `\n    ${key}={${value}}`
+          } else {
+            return `\n    ${key}="${value}"`
+          }
+        }
+        if (typeof value === 'function') {
+          return `\n    ${key}={() => {}}`
+        }
+
+        return `\n    ${key}={${JSON.stringify(value)}}`
+      })
+      .join('')
+  }
+
+  const propsString = generatePropsString(componentProps)
+
+  // Handle children
+  const hasChildren = 'children' in componentProps
+  const childrenContent = componentProps.children
+
+  let componentExample = ''
+
+  if (hasChildren) {
+    if (propsString) {
+      componentExample = `<${componentName}${propsString}
+ >
+     ${childrenContent}
+ </${componentName}>`
+    } else {
+      componentExample = `<${componentName}>
+     ${childrenContent}
+ </${componentName}>`
+    }
+  } else {
+    if (propsString) {
+      componentExample = `<${componentName}${propsString}
+ />`
+    } else {
+      componentExample = `<${componentName} />`
+    }
+  }
+
+  // Function to handle copying code to clipboard
+  const handleCopyCode = () => {
+    Clipboard.setStringAsync(componentExample)
+    // Optionally, display a confirmation to the user
+
+    showSuccessToast({
+      title: 'Code copied to clipboard!',
+      description: 'You can paste it in your code editor now.',
+    })
+  }
+
+  return (
+    <Box borderRadius={8} borderColor="utility.gray.100" borderWidth={1} minWidth={400}>
+      <Row
+        borderTopEndRadius={6}
+        borderTopLeftRadius={6}
+        justifyContent="space-between"
+        alignItems="center"
+        bg="utility.gray.100"
+        p={2}
+      >
+        <Text.SmMedium>tsx</Text.SmMedium>
+        <Touchable flexDirection="row" gap={1}>
+          <Icon name="file-copy-2-fill" size={16} />
+          <Text.SmMedium onPress={handleCopyCode}>Copy Code</Text.SmMedium>
+        </Touchable>
+      </Row>
+      <Box bg="bg.primary" borderRadius={6} p={4}>
+        <Text.SmMedium>{componentExample}</Text.SmMedium>
+      </Box>
+    </Box>
+  )
+}
+
+export const RenderComponentWithExample = ({ ComponentWithProps, ...rest }: RenderExampleProps) => {
+  const { shouldApplyMobileStyles } = useWeb()
+
+  return (
+    <Row gap={2}>
+      <Center p={4} bg="utility.gray.100" borderRadius={8}>
+        {ComponentWithProps}
+      </Center>
+      <Box />
+      {/* Show only on tablet and web */}
+      {!shouldApplyMobileStyles && (
+        <RenderExample ComponentWithProps={ComponentWithProps} {...rest} />
+      )}
+    </Row>
+  )
+}
diff --git a/src/design-system/components/Text/Text.tsx b/src/design-system/components/Text/Text.tsx
index d3fcea7c..6b50590e 100644
--- a/src/design-system/components/Text/Text.tsx
+++ b/src/design-system/components/Text/Text.tsx
@@ -221,33 +221,81 @@ const generateTextVariant = (variant: TextVariant) =>
   forwardRef<BaseText, TextProps>((props, ref) => <Text {...{ ...props, ref, variant }} />)
 
 Text.LgBold = generateTextVariant('LgBold')
+Text.LgBold.displayName = 'Text.LgBold'
+
 Text.LgMedium = generateTextVariant('LgMedium')
+Text.LgMedium.displayName = 'Text.LgMedium'
+
 Text.LgRegular = generateTextVariant('LgRegular')
+Text.LgRegular.displayName = 'Text.LgRegular'
+
 Text.LgSemibold = generateTextVariant('LgSemibold')
+Text.LgSemibold.displayName = 'Text.LgSemibold'
+
 Text.MdBold = generateTextVariant('MdBold')
+Text.MdBold.displayName = 'Text.MdBold'
+
 Text.MdMedium = generateTextVariant('MdMedium')
+Text.MdMedium.displayName = 'Text.MdMedium'
+
 Text.MdRegular = generateTextVariant('MdRegular')
+Text.MdRegular.displayName = 'Text.MdRegular'
+
 Text.MdSemibold = generateTextVariant('MdSemibold')
+Text.MdSemibold.displayName = 'Text.MdSemibold'
+
 Text.SmBold = generateTextVariant('SmBold')
+Text.SmBold.displayName = 'Text.SmBold'
+
 Text.SmMedium = generateTextVariant('SmMedium')
+Text.SmMedium.displayName = 'Text.SmMedium'
+
 Text.SmRegular = generateTextVariant('SmRegular')
+Text.SmRegular.displayName = 'Text.SmRegular'
+
 Text.SmSemibold = generateTextVariant('SmSemibold')
+Text.SmSemibold.displayName = 'Text.SmSemibold'
+
 Text.XsBold = generateTextVariant('XsBold')
+Text.XsBold.displayName = 'Text.XsBold'
+
 Text.XsMedium = generateTextVariant('XsMedium')
+Text.XsMedium.displayName = 'Text.XsMedium'
+
 Text.XsRegular = generateTextVariant('XsRegular')
+Text.XsRegular.displayName = 'Text.XsRegular'
+
 Text.XsSemibold = generateTextVariant('XsSemibold')
+Text.XsSemibold.displayName = 'Text.XsSemibold'
+
 Text.XlBold = generateTextVariant('XlBold')
+Text.XlBold.displayName = 'Text.XlBold'
+
 Text.XlMedium = generateTextVariant('XlMedium')
+Text.XlMedium.displayName = 'Text.XlMedium'
+
 Text.XlRegular = generateTextVariant('XlRegular')
+Text.XlRegular.displayName = 'Text.XlRegular'
+
 Text.XlSemibold = generateTextVariant('XlSemibold')
+Text.XlSemibold.displayName = 'Text.XlSemibold'
+
 Text.XxlBold = generateTextVariant('XxlBold')
+Text.XxlBold.displayName = 'Text.XxlBold'
+
 Text.XxlMedium = generateTextVariant('XxlMedium')
+Text.XxlMedium.displayName = 'Text.XxlMedium'
+
 Text.XxlRegular = generateTextVariant('XxlRegular')
+Text.XxlRegular.displayName = 'Text.XxlRegular'
+
 Text.XxlSemibold = generateTextVariant('XxlSemibold')
+Text.XxlSemibold.displayName = 'Text.XxlSemibold'
 
 export { Display, Text }
 
 const Display = generateStyledComponent(RawText) as TextComposition<DisplayVariant>
+Display.displayName = 'Display'
 
 const generateDisplayVariant = (variant: DisplayVariant = 'MdRegular') =>
   forwardRef<BaseText, TextProps>((props, ref) => {
@@ -255,29 +303,73 @@ const generateDisplayVariant = (variant: DisplayVariant = 'MdRegular') =>
   })
 
 Display.LgMedium = generateDisplayVariant('LgMedium')
+Display.LgMedium.displayName = 'Display.LgMedium'
+
 Display.LgRegular = generateDisplayVariant('LgRegular')
+Display.LgRegular.displayName = 'Display.LgRegular'
+
 Display.LgSemibold = generateDisplayVariant('LgSemibold')
+Display.LgSemibold.displayName = 'Display.LgSemibold'
+
 Display.LgBold = generateDisplayVariant('LgBold')
-Display.LgMedium = generateDisplayVariant('LgMedium')
-Display.LgRegular = generateDisplayVariant('LgRegular')
-Display.LgSemibold = generateDisplayVariant('LgSemibold')
+Display.LgBold.displayName = 'Display.LgBold'
+
 Display.MdBold = generateDisplayVariant('MdBold')
+Display.MdBold.displayName = 'Display.MdBold'
+
 Display.MdMedium = generateDisplayVariant('MdMedium')
+Display.MdMedium.displayName = 'Display.MdMedium'
+
 Display.MdRegular = generateDisplayVariant('MdRegular')
+Display.MdRegular.displayName = 'Display.MdRegular'
+
 Display.MdSemibold = generateDisplayVariant('MdSemibold')
+Display.MdSemibold.displayName = 'Display.MdSemibold'
+
 Display.SmBold = generateDisplayVariant('SmBold')
+Display.SmBold.displayName = 'Display.SmBold'
+
 Display.SmMedium = generateDisplayVariant('SmMedium')
+Display.SmMedium.displayName = 'Display.SmMedium'
+
 Display.SmRegular = generateDisplayVariant('SmRegular')
+Display.SmRegular.displayName = 'Display.SmRegular'
+
 Display.SmSemibold = generateDisplayVariant('SmSemibold')
+Display.SmSemibold.displayName = 'Display.SmSemibold'
+
 Display.XsBold = generateDisplayVariant('XsBold')
+Display.XsBold.displayName = 'Display.XsBold'
+
 Display.XsMedium = generateDisplayVariant('XsMedium')
+Display.XsMedium.displayName = 'Display.XsMedium'
+
 Display.XsRegular = generateDisplayVariant('XsRegular')
+Display.XsRegular.displayName = 'Display.XsRegular'
+
 Display.XsSemibold = generateDisplayVariant('XsSemibold')
+Display.XsSemibold.displayName = 'Display.XsSemibold'
+
 Display.XlBold = generateDisplayVariant('XlBold')
+Display.XlBold.displayName = 'Display.XlBold'
+
 Display.XlMedium = generateDisplayVariant('XlMedium')
+Display.XlMedium.displayName = 'Display.XlMedium'
+
 Display.XlRegular = generateDisplayVariant('XlRegular')
+Display.XlRegular.displayName = 'Display.XlRegular'
+
 Display.XlSemibold = generateDisplayVariant('XlSemibold')
+Display.XlSemibold.displayName = 'Display.XlSemibold'
+
 Display.XxlBold = generateDisplayVariant('XxlBold')
+Display.XxlBold.displayName = 'Display.XxlBold'
+
 Display.XxlMedium = generateDisplayVariant('XxlMedium')
+Display.XxlMedium.displayName = 'Display.XxlMedium'
+
 Display.XxlRegular = generateDisplayVariant('XxlRegular')
+Display.XxlRegular.displayName = 'Display.XxlRegular'
+
 Display.XxlSemibold = generateDisplayVariant('XxlSemibold')
+Display.XxlSemibold.displayName = 'Display.XxlSemibold'
diff --git a/src/design-system/components/index.ts b/src/design-system/components/index.ts
index c72d01aa..9446cdfa 100644
--- a/src/design-system/components/index.ts
+++ b/src/design-system/components/index.ts
@@ -21,3 +21,4 @@ export * from './RadioButton'
 export * from './Loader'
 export * from './Select'
 export * from './types'
+export * from './RenderComponentWithExample'
diff --git a/src/design-system/utils/generateStyledSystem.ts b/src/design-system/utils/generateStyledSystem.ts
index 9398fb5a..87db4b63 100644
--- a/src/design-system/utils/generateStyledSystem.ts
+++ b/src/design-system/utils/generateStyledSystem.ts
@@ -88,6 +88,8 @@ const generateBgStyle = (
   if (color && (typeof bgOpacity === 'number' || typeof backgroundOpacity === 'number')) {
     return { backgroundColor: hex2rgba(color, (bgOpacity || backgroundOpacity) as number) }
   }
+
+  return { backgroundColor: bg }
 }
 
 const generateSizingStyle = ({
diff --git a/src/navigation/tabNavigator/components/AppHeader.tsx b/src/navigation/tabNavigator/components/AppHeader.tsx
index ce31c2c2..c16f7550 100644
--- a/src/navigation/tabNavigator/components/AppHeader.tsx
+++ b/src/navigation/tabNavigator/components/AppHeader.tsx
@@ -1,7 +1,9 @@
 import { CompanyLogo } from '@baca/components'
+import { ThemeSwitcherButton } from '@baca/components/ThemeSwitcherButton'
 import { isWeb } from '@baca/constants'
+import { Box } from '@baca/design-system'
 import { useTheme } from '@baca/hooks'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export function AppHeader() {
@@ -13,14 +15,19 @@ export function AppHeader() {
   const height = 60 + top
 
   return (
-    <View
+    <Box
+      justifyContent="space-around"
       style={[
         { borderBottomColor: colors.border.secondary, height, paddingTop: top },
         jsStyles.appHeader,
       ]}
     >
+      <Box w="56px" h="24px" />
+      <Box flex={1} />
       <CompanyLogo height={60} width={150} />
-    </View>
+      <Box flex={1} />
+      <ThemeSwitcherButton />
+    </Box>
   )
 }
 
diff --git a/src/navigation/tabNavigator/components/HeaderLogo.tsx b/src/navigation/tabNavigator/components/HeaderLogo.tsx
index 4a97f325..35a72369 100644
--- a/src/navigation/tabNavigator/components/HeaderLogo.tsx
+++ b/src/navigation/tabNavigator/components/HeaderLogo.tsx
@@ -1,6 +1,7 @@
 import { CompanyLogo } from '@baca/components'
 import { useTheme } from '@baca/hooks'
 import cssStyles from '@baca/styles'
+import { makeBigerOnHover } from '@baca/utils/webStyling'
 import { Pressable } from '@bacons/react-views'
 import { Link } from 'expo-router'
 import { Platform, StyleSheet, View } from 'react-native'
@@ -13,46 +14,47 @@ export function HeaderLogo() {
   const isLargeHorizontal = useUniversalWidth(1264)
 
   return (
-    <View
-      style={Platform.select({
-        default: jsStyles.headerContainer,
-        web: cns(cssStyles.headerContainer),
-      })}
-    >
-      <Link style={jsStyles.headerLink} href="/" asChild>
-        <Pressable>
-          {({ hovered }) => (
+    <Link style={jsStyles.headerLink} href="/home">
+      <Pressable>
+        {({ hovered }) => (
+          <View
+            style={[
+              jsStyles.headerLogo,
+              makeBigerOnHover(hovered),
+              {
+                backgroundColor: hovered ? colors.bg.tertiary : colors.Base.transparent,
+              },
+            ]}
+          >
             <View
-              style={[
-                jsStyles.headerLogo,
-                {
-                  backgroundColor: hovered ? colors.bg.tertiary : colors.Base.transparent,
-                },
-              ]}
+              style={Platform.select({
+                default: jsStyles.headerContainer,
+                web: cns(cssStyles.headerContainer),
+              })}
             >
               <CompanyLogo
+                asImage
                 height={40}
                 style={Platform.select({
                   default: !isLargeHorizontal ? { display: 'none' } : {},
-                  web: cns(cssStyles.wideVisible),
                 })}
                 type="binar"
                 width={120}
               />
               <CompanyLogo
+                asImage
                 height={40}
                 style={Platform.select({
                   default: isLargeHorizontal ? { display: 'none' } : {},
-                  web: cns(cssStyles.wideHidden),
                 })}
                 type="binarSygnet"
                 width={40}
               />
             </View>
-          )}
-        </Pressable>
-      </Link>
-    </View>
+          </View>
+        )}
+      </Pressable>
+    </Link>
   )
 }
 
@@ -67,6 +69,5 @@ const jsStyles = StyleSheet.create({
   headerLogo: {
     alignItems: 'center',
     borderRadius: 8,
-    padding: 8,
   },
 })
diff --git a/src/navigation/tabNavigator/components/SideBarTabItem.tsx b/src/navigation/tabNavigator/components/SideBarTabItem.tsx
index fde2f692..13d6e6e8 100644
--- a/src/navigation/tabNavigator/components/SideBarTabItem.tsx
+++ b/src/navigation/tabNavigator/components/SideBarTabItem.tsx
@@ -1,6 +1,7 @@
 import { Icon, Row, Text } from '@baca/design-system'
 import { IconNames } from '@baca/types'
-import { Platform, StyleSheet } from 'react-native'
+import { makeBigerOnHover } from '@baca/utils/webStyling'
+import { StyleSheet } from 'react-native'
 
 import { TabBarItemWrapper } from './TabBarItemWrapper'
 import { useUniversalWidth } from '../hooks'
@@ -32,18 +33,7 @@ export function SideBarTabItem({
           p={2}
           gap={4}
           bg={hovered ? 'bg.tertiary' : undefined}
-          style={[
-            Platform.select({
-              web: {
-                transitionDuration: '200ms',
-                transitionProperty: ['background-color', 'box-shadow', 'transform'],
-                transitionTimingFunction: 'cubic-bezier(0.17, 0.17, 0, 1)',
-              },
-            }),
-            hovered && {
-              transform: [{ scale: 1.1 }],
-            },
-          ]}
+          style={makeBigerOnHover(hovered)}
         >
           <Icon color={getTabColor(focused)} name={focused ? iconFocused : icon} size={30} />
           {isLarge ? (
diff --git a/src/screens/ColorsScreen.tsx b/src/screens/ColorsScreen.tsx
index 3c0f0ea2..5b85d001 100644
--- a/src/screens/ColorsScreen.tsx
+++ b/src/screens/ColorsScreen.tsx
@@ -1,42 +1,112 @@
-import { Text, Center, ScrollView } from '@baca/design-system'
-import { useScreenOptions, useTranslation } from '@baca/hooks'
-
-const colorsVariants: NestedKeys<Colors>[] = [
-  'utility.success.500',
-  'utility.warning.500',
-  'utility.orange.500',
-  'utility.error.500',
-  'utility.pink.500',
-  'utility.fuchsia.500',
-  'utility.brand.500',
-  'utility.purple.500',
-  'utility.indigo.500',
-  'utility.blue.500',
-  'utility.blue.dark.500',
-  'utility.gray.500',
-]
+import {
+  ScrollView,
+  Box,
+  RenderComponentWithExample,
+  Row,
+  Display,
+  CheckboxButton,
+  Spacer,
+} from '@baca/design-system'
+import { useBoolean, useScreenOptions, useTheme, useTranslation } from '@baca/hooks'
+
+const RecursiveColorList = ({
+  data,
+  parentKey = '',
+  recursiveLevel = 0,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data: Record<string, any>
+  parentKey?: string
+  recursiveLevel?: number
+}) => {
+  const sortedArray = Object.entries(data).sort(([keyA, valueA], [keyB, valueB]) => {
+    const aIsString = typeof valueA === 'string'
+    const bIsString = typeof valueB === 'string'
+
+    if (aIsString && !bIsString) return -1 // `a` comes before `b`
+    if (!aIsString && bIsString) return 1 // `b` comes before `a`
+    return 0 // No change in order
+  })
+
+  return sortedArray.map(([key, value]) => {
+    const currentKey = parentKey ? `${parentKey}.${key}` : key
+
+    if (typeof value === 'string') {
+      // It's a color
+      return (
+        <RenderComponentWithExample
+          key={currentKey}
+          Component={Box}
+          ComponentWithProps={
+            <Box
+              borderWidth={1}
+              borderRadius={8}
+              borderColor="text.primary"
+              width={20}
+              height={20}
+              bg={currentKey as ColorNames}
+            />
+          }
+        />
+      )
+    } else if (typeof value === 'object') {
+      // It's a nested category
+      return (
+        <Box key={currentKey} gap={2} width="100%" mt={`${16 - 2 * recursiveLevel}px`}>
+          <Display.LgBold
+            fontSize={36 - recursiveLevel * 2.5}
+            color="text.primary"
+            capitalize={recursiveLevel === 0}
+          >
+            {currentKey}
+          </Display.LgBold>
+
+          <Row flexWrap="wrap" gap={4}>
+            <RecursiveColorList
+              data={value}
+              parentKey={currentKey}
+              recursiveLevel={recursiveLevel + 1}
+            />
+          </Row>
+        </Box>
+      )
+    } else {
+      return null
+    }
+  })
+}
 
 export const ColorsScreen = (): JSX.Element => {
   const { t } = useTranslation()
 
+  const [shouldDisplayAll, setShouldDisplayAll] = useBoolean(false)
+
   useScreenOptions({
     title: t('navigation.screen_titles.colors'),
   })
 
+  const theme = useTheme()
+
+  const colorsToRender = shouldDisplayAll
+    ? theme.colors
+    : {
+        text: theme.colors.text,
+        bg: theme.colors.bg,
+        Base: theme.colors.Base,
+        Error: theme.colors.Error,
+        Warning: theme.colors.Warning,
+        Success: theme.colors.Success,
+      }
+
   return (
     <ScrollView flexGrow={1} p={4}>
-      {colorsVariants.map((colorVariant) => (
-        <Center
-          alignSelf="stretch"
-          backgroundColor={colorVariant}
-          height={8}
-          key={colorVariant}
-          mb={4}
-          width="full"
-        >
-          <Text color="text.primary">{colorVariant}</Text>
-        </Center>
-      ))}
+      <CheckboxButton
+        onChange={setShouldDisplayAll.toggle}
+        isSelected={shouldDisplayAll}
+        label="Display all colors"
+      />
+      <Spacer y={4} />
+      <RecursiveColorList data={colorsToRender} />
     </ScrollView>
   )
 }
diff --git a/src/screens/ComponentsScreen.tsx b/src/screens/ComponentsScreen.tsx
index 21f74b54..4bc31397 100644
--- a/src/screens/ComponentsScreen.tsx
+++ b/src/screens/ComponentsScreen.tsx
@@ -5,10 +5,9 @@ import {
   Box,
   Text,
   Button,
-  Center,
   ScrollView,
-  Display,
   CheckboxButton,
+  RenderComponentWithExample,
 } from '@baca/design-system'
 import { useBoolean, useCallback, useScreenOptions, useState, useTranslation } from '@baca/hooks'
 import { noop, showInformationToast } from '@baca/utils'
@@ -42,10 +41,15 @@ const TestCheckbox = () => {
   const [isChecked, setIsChecked] = useBoolean()
 
   return (
-    <CheckboxButton
-      onChange={setIsChecked.toggle}
-      isSelected={isChecked}
-      label={t('form.checkbox.remember_me')}
+    <RenderComponentWithExample
+      Component={CheckboxButton}
+      ComponentWithProps={
+        <CheckboxButton
+          onChange={setIsChecked.toggle}
+          isSelected={isChecked}
+          label={t('form.checkbox.remember_me')}
+        />
+      }
     />
   )
 }
@@ -61,13 +65,18 @@ const TextRadioButtons = () => {
   const [selectedRadio, setSelectedRadio] = useState<string | undefined>()
 
   return (
-    <RadioGroup
-      onSelectItem={setSelectedRadio}
-      selectedItem={selectedRadio}
-      isRequired
-      name="age"
-      items={agesMap}
-      label={t('test_form.age')}
+    <RenderComponentWithExample
+      Component={RadioGroup}
+      ComponentWithProps={
+        <RadioGroup
+          onSelectItem={setSelectedRadio}
+          selectedItem={selectedRadio}
+          isRequired
+          name="age"
+          items={agesMap}
+          label={t('test_form.age')}
+        />
+      }
     />
   )
 }
@@ -91,52 +100,143 @@ export const ComponentsScreen = (): JSX.Element => {
 
   return (
     <ScrollView flexGrow={1} p={4}>
-      <Button.Primary alignSelf="center" onPress={testNotification}>
-        {t('components_screen.test_notification')}
-      </Button.Primary>
-      <Box alignItems="center" gap={6} mt={8}>
+      <Box gap={6} mt={8}>
+        <Text.LgRegular>Toast:</Text.LgRegular>
+        <RenderComponentWithExample
+          Component={Button.Primary}
+          ComponentWithProps={
+            <Button.Primary alignSelf="center" onPress={testNotification}>
+              {t('components_screen.test_notification')}
+            </Button.Primary>
+          }
+        />
+
         <Text.LgRegular>{t('components_screen.button_variants.header')}:</Text.LgRegular>
-        <Button.Primary title={t('components_screen.button_variants.primary')} />
-        <Button.Primary
-          leftIconName="ancient-gate-fill"
-          rightIconName="alarm-fill"
-          title={t('components_screen.button_variants.with_icons')}
-        />
-        <Button.PrimaryDestructive
-          title={t('components_screen.button_variants.primary_destructive')}
-        />
-        <Button.SecondaryColor title={t('components_screen.button_variants.secondary_color')} />
-        <Button.SecondaryGray title={t('components_screen.button_variants.secondary_gray')} />
-        <Button.SecondaryDestructive
-          title={t('components_screen.button_variants.secondary_destructive')}
-        />
-        <Button.TertiaryColor title={t('components_screen.button_variants.tertiary_color')} />
-        <Button.TertiaryGray title={t('components_screen.button_variants.tertiary_gray')} />
-        <Button.TertiaryDestructive
-          title={t('components_screen.button_variants.tertiary_destructive')}
-        />
-        <Button.LinkColor title={t('components_screen.button_variants.link_color')} />
-        <Button.LinkGray title={t('components_screen.button_variants.link_gray')} />
-        <Button.LinkDestructive title={t('components_screen.button_variants.link_destructive')} />
-        <Button disabled>{t('components_screen.button_variants.disabled')}</Button>
-        <SocialButton onPress={noop} type="google" />
-        <SocialButton onPress={noop} type="facebook" />
-        <SocialButton onPress={noop} type="apple" />
+        <RenderComponentWithExample
+          Component={Button.Primary}
+          ComponentWithProps={
+            <Button.Primary title={t('components_screen.button_variants.primary')} />
+          }
+        />
+
+        <RenderComponentWithExample
+          Component={Button.Primary}
+          ComponentWithProps={
+            <Button.Primary
+              leftIconName="ancient-gate-fill"
+              rightIconName="alarm-fill"
+              title={t('components_screen.button_variants.with_icons')}
+            />
+          }
+        />
+        <RenderComponentWithExample
+          Component={Button.PrimaryDestructive}
+          ComponentWithProps={
+            <Button.PrimaryDestructive
+              title={t('components_screen.button_variants.primary_destructive')}
+            />
+          }
+        />
+        <RenderComponentWithExample
+          Component={Button.SecondaryColor}
+          ComponentWithProps={
+            <Button.SecondaryColor title={t('components_screen.button_variants.secondary_color')} />
+          }
+        />
+        <RenderComponentWithExample
+          Component={Button.SecondaryGray}
+          ComponentWithProps={
+            <Button.SecondaryGray title={t('components_screen.button_variants.secondary_gray')} />
+          }
+        />
+
+        <RenderComponentWithExample
+          Component={Button.SecondaryDestructive}
+          ComponentWithProps={
+            <Button.SecondaryDestructive
+              title={t('components_screen.button_variants.secondary_destructive')}
+            />
+          }
+        />
+        <RenderComponentWithExample
+          Component={Button.TertiaryColor}
+          ComponentWithProps={
+            <Button.TertiaryColor title={t('components_screen.button_variants.tertiary_color')} />
+          }
+        />
+
+        <RenderComponentWithExample
+          Component={Button.TertiaryGray}
+          ComponentWithProps={
+            <Button.TertiaryGray title={t('components_screen.button_variants.tertiary_gray')} />
+          }
+        />
+        <RenderComponentWithExample
+          Component={Button.TertiaryDestructive}
+          ComponentWithProps={
+            <Button.TertiaryDestructive
+              title={t('components_screen.button_variants.tertiary_destructive')}
+            />
+          }
+        />
+        <RenderComponentWithExample
+          Component={Button.LinkColor}
+          ComponentWithProps={
+            <Button.LinkColor title={t('components_screen.button_variants.link_color')} />
+          }
+        />
+        <RenderComponentWithExample
+          Component={Button.LinkGray}
+          ComponentWithProps={
+            <Button.LinkGray title={t('components_screen.button_variants.link_gray')} />
+          }
+        />
+        <RenderComponentWithExample
+          Component={Button.LinkDestructive}
+          ComponentWithProps={
+            <Button.LinkDestructive
+              title={t('components_screen.button_variants.link_destructive')}
+            />
+          }
+        />
+        <RenderComponentWithExample
+          Component="Button"
+          ComponentWithProps={
+            <Button disabled>{t('components_screen.button_variants.disabled')}</Button>
+          }
+        />
+        <RenderComponentWithExample
+          Component="Button"
+          ComponentWithProps={<Button loading size="lg" />}
+        />
+
+        <RenderComponentWithExample
+          Component={SocialButton}
+          ComponentWithProps={<SocialButton onPress={noop} type="google" />}
+        />
+        <RenderComponentWithExample
+          Component={SocialButton}
+          ComponentWithProps={<SocialButton onPress={noop} type="facebook" />}
+        />
+        <RenderComponentWithExample
+          Component={SocialButton}
+          ComponentWithProps={<SocialButton onPress={noop} type="apple" />}
+        />
+
         <Box w="full" gap={6}>
           <TestCheckbox />
           <TextRadioButtons />
         </Box>
-        <Button loading size="lg" />
+
         <Text.LgRegular>{t('components_screen.loader_variants.header')}</Text.LgRegular>
         {loaderVariants?.map((loader) => (
           <Box flex={1} gap={6} key={loader.type}>
-            <Text.SmRegular>{t(loader?.headerText)}</Text.SmRegular>
-            <Center>
-              <Loader type={loader?.type} />
-            </Center>
+            <RenderComponentWithExample
+              Component={Loader}
+              ComponentWithProps={<Loader type={loader?.type} />}
+            />
           </Box>
         ))}
-        <Display.LgBold>TEST</Display.LgBold>
       </Box>
     </ScrollView>
   )
diff --git a/src/screens/ExamplesScreen.tsx b/src/screens/ExamplesScreen.tsx
index caba6d66..2d80e429 100644
--- a/src/screens/ExamplesScreen.tsx
+++ b/src/screens/ExamplesScreen.tsx
@@ -1,4 +1,4 @@
-import { Button, ScrollView } from '@baca/design-system'
+import { Button, Display, ScrollView } from '@baca/design-system'
 import { useCallback, useTranslation, useScreenOptions } from '@baca/hooks'
 import { useRouter } from 'expo-router'
 
@@ -25,35 +25,25 @@ export const ExamplesScreen = () => {
   const goToHomeStackDetails = useCallback(() => push('/home/details'), [push])
 
   return (
-    <ScrollView p={4}>
-      <Button mb={2} onPress={goToApplicationInfo}>
-        {t('examples_screen.go_to_application_info')}
-      </Button>
-      <Button mb={2} onPress={goToColors}>
-        {t('examples_screen.go_to_colors')}
-      </Button>
-      <Button mb={2} onPress={goToComponents}>
-        {t('examples_screen.go_to_components')}
-      </Button>
-      <Button mb={2} onPress={goToTypography}>
-        {t('examples_screen.go_to_typography')}
-      </Button>
-      <Button mb={2} onPress={goToHomeStackDetails}>
+    <ScrollView p={4} gap={4}>
+      <Display.SmBold>App logic</Display.SmBold>
+      <Button onPress={goToApplicationInfo}>{t('examples_screen.go_to_application_info')}</Button>
+      <Button onPress={goToPushNotificationsHelpers}>Go to push notifications helpers</Button>
+      <Button onPress={goToUserSession}>{t('examples_screen.go_to_user_session')}</Button>
+
+      <Display.SmBold>UI Examples</Display.SmBold>
+      <Button onPress={goToColors}>{t('examples_screen.go_to_colors')}</Button>
+      <Button onPress={goToComponents}>{t('examples_screen.go_to_components')}</Button>
+      <Button onPress={goToTypography}>{t('examples_screen.go_to_typography')}</Button>
+
+      <Display.SmBold>Navigation</Display.SmBold>
+      <Button onPress={goToHomeStackDetails}>
         {t('examples_screen.go_to_home_stack_details')}
       </Button>
-      <Button mb={2} onPress={goToCityListScreen_EXAMPLE}>
+      <Button onPress={goToCityListScreen_EXAMPLE}>
         {t('examples_screen.go_to_screen_with_BEdata')}
       </Button>
-      <Button mb={2} onPress={goToTestForm}>
-        {t('examples_screen.go_to_screen_test_form')}
-      </Button>
-      {/* TODO: Add translations */}
-      <Button mb={2} onPress={goToPushNotificationsHelpers}>
-        Go to push notifications helpers
-      </Button>
-      <Button mb={2} onPress={goToUserSession}>
-        {t('examples_screen.go_to_user_session')}
-      </Button>
+      <Button onPress={goToTestForm}>{t('examples_screen.go_to_screen_test_form')}</Button>
     </ScrollView>
   )
 }
diff --git a/src/screens/LandingScreen.tsx b/src/screens/LandingScreen.tsx
index 52f5b661..4b60c723 100644
--- a/src/screens/LandingScreen.tsx
+++ b/src/screens/LandingScreen.tsx
@@ -45,7 +45,7 @@ export const LandingScreen = () => {
   }, [screenWidth])
 
   const renderItem = (item: ImageSourcePropType, index: number) => (
-    <Box key={index} width={imageWidth} px={paddingBetweenImages} pb={paddingBetweenImages}>
+    <Box key={index} width={imageWidth} px={paddingBetweenImages}>
       <Box style={{ aspectRatio: 9 / 16 }} height="100%" borderRadius={16} bg="bg.active">
         <Image source={item} resizeMode="contain" style={styles.imageSize} />
       </Box>
@@ -59,7 +59,7 @@ export const LandingScreen = () => {
   return (
     <KeyboardAwareScrollView>
       <LandingHeader />
-      <Center bg="bg.brand.section" flex={1} px={4}>
+      <Center bg="bg.brand.section" flex={1} px={4} pb={8}>
         <Text.XxlBold fontSize={40} mt={20} color="text.white" textAlign="center">
           {t('home_screen.header_title')}
         </Text.XxlBold>
diff --git a/src/screens/TypographyScreen.tsx b/src/screens/TypographyScreen.tsx
index cfa686db..aa9a66f2 100644
--- a/src/screens/TypographyScreen.tsx
+++ b/src/screens/TypographyScreen.tsx
@@ -1,9 +1,36 @@
-import { useColorScheme } from '@baca/contexts'
-import { Column, Row, Box, Text, Display, DisplayVariant, TextVariant } from '@baca/design-system'
+import {
+  Box,
+  Text,
+  Display,
+  DisplayVariant,
+  TextVariant,
+  RenderComponentWithExample,
+  ScrollView,
+} from '@baca/design-system'
 import { useTranslation } from '@baca/hooks'
-import { ScrollView, Switch, Platform } from 'react-native'
 
-export const textVariants: TextVariant[] = [
+const generateTextVariantsToRender = <T extends string[]>(variants: T, component: React.FC) => {
+  const originalVariants = Object.keys(component).filter(
+    (key) => key !== '$$typeof' && key !== 'render'
+  )
+
+  // Step 1: Extract elements from array1 that are also in array2
+  const commonElements = variants.filter((element) => originalVariants.includes(element))
+
+  // Step 2: Extract elements from array2 that are not in array1
+  const remainingElements = originalVariants.filter((element) => !variants.includes(element))
+
+  // Step 3: Combine both parts to form the third array
+  const combinedArray = [...commonElements, ...remainingElements]
+
+  return combinedArray as T
+}
+
+export const textVariantsStrings: TextVariant[] = [
+  'XxlBold',
+  'XxlMedium',
+  'XxlRegular',
+  'XxlSemibold',
   'XlBold',
   'XlSemibold',
   'XlMedium',
@@ -26,7 +53,7 @@ export const textVariants: TextVariant[] = [
   'XsRegular',
 ] as const
 
-const displayTextVariants: DisplayVariant[] = [
+const displayTextVariantsStrings: DisplayVariant[] = [
   'XxlBold',
   'XxlSemibold',
   'XxlMedium',
@@ -52,56 +79,44 @@ const displayTextVariants: DisplayVariant[] = [
   'XsMedium',
   'XsRegular',
 ] as const
-const isWeb = Platform.OS === 'web'
+
+const textVariants = generateTextVariantsToRender(textVariantsStrings, Text)
+const displayTextVariants = generateTextVariantsToRender(displayTextVariantsStrings, Display)
 
 export const TypographyScreen = (): JSX.Element => {
   const { t } = useTranslation()
-  const { setColorSchemeSetting, colorScheme } = useColorScheme()
 
   return (
-    <ScrollView>
-      <Row>
-        <Column flex={1} alignItems="center" justifyContent="center">
-          <Row alignItems="center" flex={1}>
-            <Text>🌞</Text>
-            {/* 
-            Investigate the issue about using `useCallback` on `onChange`
-            https://github.com/adobe/react-spectrum/issues/2320
-          */}
-            <Box mx={4} my={8}>
-              <Switch
-                value={colorScheme === 'dark'}
-                {...(isWeb
-                  ? {
-                      onValueChange: () =>
-                        setColorSchemeSetting(colorScheme === 'dark' ? 'light' : 'dark'),
-                    }
-                  : {
-                      onChange: () =>
-                        setColorSchemeSetting(colorScheme === 'dark' ? 'light' : 'dark'),
-                    })}
-              />
-            </Box>
-            <Text>🌚</Text>
-          </Row>
-          <Text color="text.error.primary" variant="XlBold">
-            {t('typography_screen.display_font_size')}
-          </Text>
-          {displayTextVariants.map((variant) => (
-            <Display type="display" key={variant} p={8} variant={variant}>
-              Display - {variant}
-            </Display>
-          ))}
-          <Text color="text.error.primary" my={4} variant="XlBold">
-            {t('typography_screen.text_font_size')}
-          </Text>
-          {textVariants.map((variant) => (
-            <Text key={variant} p={8} variant={variant}>
-              Text - {variant}
-            </Text>
-          ))}
-        </Column>
-      </Row>
+    <ScrollView flexGrow={1} p={4}>
+      <Box gap={6}>
+        <Display.XxlBold color="text.error.primary" py={4}>
+          {t('typography_screen.display_font_size')}
+        </Display.XxlBold>
+        {displayTextVariants.map((variant) => (
+          <RenderComponentWithExample
+            key={variant}
+            Component={`Display.${variant}`}
+            propsToOmmit={['variant', 'type']}
+            ComponentWithProps={
+              <Display type="display" variant={variant}>
+                {'Display - ' + variant}
+              </Display>
+            }
+          />
+        ))}
+        <Display.XxlBold color="text.error.primary" py={4}>
+          {t('typography_screen.text_font_size')}
+        </Display.XxlBold>
+
+        {textVariants.map((variant) => (
+          <RenderComponentWithExample
+            key={variant}
+            Component={`Text.${variant}`}
+            propsToOmmit={['variant', 'type']}
+            ComponentWithProps={<Text variant={variant}>{'Text - ' + variant}</Text>}
+          />
+        ))}
+      </Box>
     </ScrollView>
   )
 }
diff --git a/src/screens/auth/SignInScreen.tsx b/src/screens/auth/SignInScreen.tsx
index c81bcb5c..22e253da 100644
--- a/src/screens/auth/SignInScreen.tsx
+++ b/src/screens/auth/SignInScreen.tsx
@@ -6,6 +6,7 @@ import {
   SocialButtons,
   Version,
 } from '@baca/components'
+import { ThemeSwitcherButton } from '@baca/components/ThemeSwitcherButton'
 import { REGEX, isWeb } from '@baca/constants'
 import { Box, Button, Center, Display, Row, Spacer, Text } from '@baca/design-system'
 import { useCallback, useSignInForm, useState, useTranslation } from '@baca/hooks'
@@ -31,20 +32,13 @@ export const SignInScreen = (): JSX.Element => {
 
   return (
     <FormWrapper keyboardAwareProps={{ contentContainerStyle: { maxWidth: 'auto' } }}>
-      {isWeb ? (
-        <Box mr={4}>
-          <Spacer y={4} />
-          <Box alignItems="flex-end" h={8} w="full">
-            <LanguagePicker isWeb pickerPlacement="bottomRight" />
-          </Box>
-        </Box>
-      ) : null}
+      <Box flexDirection="row" alignItems="center" w="full" p={4}>
+        <Box flex={1} />
+        <ThemeSwitcherButton />
+        <Spacer x={2} />
+        <LanguagePicker isWeb={isWeb} pickerPlacement="bottomRight" />
+      </Box>
       <Center alignSelf="center" maxWidth={360} w="full">
-        {!isWeb ? (
-          <Box alignItems="flex-end" h={8} w="full">
-            <LanguagePicker pickerPlacement="bottomRight" />
-          </Box>
-        ) : null}
         <Spacer y={isWeb ? 4 : 8} />
         <CompanyLogo height={50} type="binar" />
         <Spacer y={8} />
diff --git a/src/styles/root-layout.module.scss b/src/styles/root-layout.module.scss
index 1906f0df..44729550 100644
--- a/src/styles/root-layout.module.scss
+++ b/src/styles/root-layout.module.scss
@@ -15,6 +15,9 @@ $ui-sidebar: 244px;
 // Header Logo
 .headerContainer {
   padding-top: 0px;
+  @media (min-width: $size-l) {
+    padding: 8px;
+  }
 }
 
 .headerLogo {
diff --git a/src/utils/getColorValue.ts b/src/utils/getColorValue.ts
index 0771fdf9..8c4f944b 100644
--- a/src/utils/getColorValue.ts
+++ b/src/utils/getColorValue.ts
@@ -14,7 +14,7 @@ export const getColorValue = ({ color, colors }: GetColorValueProps): string =>
 
   const colorToReturn = getPropertyByKeys(colors, keys)
 
-  return colorToReturn || color
+  return colorToReturn
 }
 
 interface NestedObject {
diff --git a/src/utils/webStyling.ts b/src/utils/webStyling.ts
new file mode 100644
index 00000000..8f3860d6
--- /dev/null
+++ b/src/utils/webStyling.ts
@@ -0,0 +1,16 @@
+import { Platform, StyleProp, ViewStyle } from 'react-native'
+
+export const makeBigerOnHover = (hovered: boolean): StyleProp<ViewStyle> => {
+  return [
+    Platform.select({
+      web: {
+        transitionDuration: '200ms',
+        transitionProperty: ['background-color', 'box-shadow', 'transform'],
+        transitionTimingFunction: 'cubic-bezier(0.17, 0.17, 0, 1)',
+      },
+    }),
+    hovered && {
+      transform: [{ scale: 1.1 }],
+    },
+  ]
+}