diff --git a/.gitignore b/.gitignore
index 2b1f2d8a..e9b719b4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,7 @@ coverage
 
 .yarn/*
 .yarn/cache
+packages/components/.yarn/install-state.gz
 packages/components/.yarn/cache
 
 !.yarn/patches
diff --git a/packages/components/.storybook/web/main.ts b/packages/components/.storybook/web/main.ts
index 3f41f6c2..cd898f26 100644
--- a/packages/components/.storybook/web/main.ts
+++ b/packages/components/.storybook/web/main.ts
@@ -13,4 +13,5 @@ module.exports = {
     builder: 'webpack5',
   },
   framework: '@storybook/react',
+  staticDirs: ['../../src/assets'],
 }
diff --git a/packages/components/.storybook/web/preview-head.html b/packages/components/.storybook/web/preview-head.html
new file mode 100644
index 00000000..80cad802
--- /dev/null
+++ b/packages/components/.storybook/web/preview-head.html
@@ -0,0 +1,12 @@
+<style>
+  @font-face {
+    font-family: 'SourceSansPro-Regular';
+    src: url('fonts/SourceSansPro/SourceSansPro-Regular.ttf');
+  }
+
+  @font-face {
+    font-family: 'SourceSansPro-Bold';
+    src: url('fonts/SourceSansPro/SourceSansPro-Bold.ttf');
+  }
+
+</style>
diff --git a/packages/components/.yarn/install-state.gz b/packages/components/.yarn/install-state.gz
deleted file mode 100644
index 58651092..00000000
Binary files a/packages/components/.yarn/install-state.gz and /dev/null differ
diff --git a/packages/components/package.json b/packages/components/package.json
index a789827a..0d30a49e 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -12,7 +12,7 @@
     "storybook:deploy": "yarn storybook:build && gh-pages -d storybook-static",
     "storybook:generate": "sb-rn-get-stories --config-path .storybook/native",
     "storybook:watch": "sb-rn-watcher --config-path .storybook/native",
-    "storybook:web": "start-storybook --config-dir .storybook/web -p 6006",
+    "storybook:web": "STORYBOOK_WEB=true start-storybook --config-dir .storybook/web -p 6006",
     "test": "jest --coverage",
     "test:watch": "jest --watch"
   },
diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx
index 24b43297..eac22413 100644
--- a/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx
+++ b/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx
@@ -18,7 +18,7 @@ const meta: Meta<SegmentedControlProps> = {
   decorators: [
     (Story) => (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-        <Story />
+        {Story()}
       </View>
     ),
   ],
diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
index a844bf6c..f742eaab 100644
--- a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
+++ b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
@@ -8,7 +8,7 @@ import {
 } from 'react-native'
 import { useTranslation } from 'react-i18next'
 import React, { FC, useEffect } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/native'
 
 import { ComponentWrapper } from '../../wrapper'
 
@@ -83,7 +83,7 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
   }
 
   const viewStyle: ViewStyle = {
-    alignSelf: 'baseline',
+    alignSelf: 'stretch',
     backgroundColor: inactiveBgColor,
     borderRadius: 8,
     flexDirection: 'row',
@@ -134,7 +134,8 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
         accessibilityHint={a11yHints ? a11yHints[index] : ''}
         accessibilityValue={accessibilityValue}
         accessibilityRole={'tab'}
-        accessibilityState={{ selected: isSelected }}>
+        accessibilityState={{ selected: isSelected }}
+      >
         <Text allowFontScaling={false} style={textStyle}>
           {label}
         </Text>
diff --git a/packages/components/src/utils/translation/i18n.ts b/packages/components/src/utils/translation/i18n.ts
index d0ca09f7..9a3bdc5b 100644
--- a/packages/components/src/utils/translation/i18n.ts
+++ b/packages/components/src/utils/translation/i18n.ts
@@ -9,8 +9,14 @@ export const resources = {
 }
 
 // Initialize the internationalization library
+
+// Use RNLanguageDetector only if mobile
+if (process.env.STORYBOOK_WEB !== 'true') {
+  i18n.use(RNLanguageDetector)
+}
+
+
 i18n
-  .use(RNLanguageDetector)
   .use(initReactI18next)
   .init({
     resources,
@@ -26,5 +32,4 @@ i18n
       useSuspense: true,
     },
   })
-
 export default i18n