diff --git a/examples/client/Locomotion/src/Components/BusinessAccountText/index.tsx b/examples/client/Locomotion/src/Components/BusinessAccountText/index.tsx
index 33049655a..01d3cd986 100644
--- a/examples/client/Locomotion/src/Components/BusinessAccountText/index.tsx
+++ b/examples/client/Locomotion/src/Components/BusinessAccountText/index.tsx
@@ -1,25 +1,6 @@
 import React from 'react';
-import { Text, View } from 'react-native';
-import styled from 'styled-components';
+import { BoldTitle, SubTitle, TitleWithSubTitle } from './styled';
 
-const TitleWithSubTitle = styled(View)`
-  display: flex;
-  flex-direction: column;
-  flex: 1 0 0;
-`;
-const BaseText = styled(Text)`
-color: #212229;
-font-family: Montserrat;
-font-size: 14px;
-font-style: normal;
-line-height: 20px;
-`;
-const SubTitle = styled(BaseText)`
-font-weight: 500;
-`;
-const BoldTitle = styled(BaseText)`
-font-weight: 700;
-`;
 interface BusinessAccountTextProps {
     title: string;
     subTitle: string;
diff --git a/examples/client/Locomotion/src/Components/BusinessAccountText/styled.ts b/examples/client/Locomotion/src/Components/BusinessAccountText/styled.ts
new file mode 100644
index 000000000..f83310911
--- /dev/null
+++ b/examples/client/Locomotion/src/Components/BusinessAccountText/styled.ts
@@ -0,0 +1,21 @@
+import { Text, View } from 'react-native';
+import styled from 'styled-components';
+
+export const TitleWithSubTitle = styled(View)`
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 0;
+`;
+export const BaseText = styled(Text)`
+color: #212229;
+font-family: Montserrat;
+font-size: 14px;
+font-style: normal;
+line-height: 20px;
+`;
+export const SubTitle = styled(BaseText)`
+font-weight: 500;
+`;
+export const BoldTitle = styled(BaseText)`
+font-weight: 700;
+`;
diff --git a/examples/client/Locomotion/src/Components/TabSwitch/index.tsx b/examples/client/Locomotion/src/Components/TabSwitch/index.tsx
index b40ed49e2..c95db56e7 100644
--- a/examples/client/Locomotion/src/Components/TabSwitch/index.tsx
+++ b/examples/client/Locomotion/src/Components/TabSwitch/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import styled from 'styled-components/native';
 import SvgIcon from '../SvgIcon';
 import i18n from '../../I18n';
+import {
+  Container, SELECTED_COLOR, Tab, TabInner, TextContainer, UNSELECTED_COLOR,
+} from './styled';
 
-const SELECTED_COLOR = '#212229';
-const UNSELECTED_COLOR = '#666975';
 interface ITabSwitchProps {
     onUnselectedClick: (tab) => void
     activeTabId: string;
@@ -14,57 +14,6 @@ interface ITabSwitchProps {
         Svg: any;
     }[];
 }
-interface TabStyled {
-    isSelected: boolean;
-}
-const Container = styled.View`
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
-  border-color: rgba(125, 139, 172, 0.32)
-  border-bottom-width: 1px;
-  border-bottom-color: #7D8BAC52;
-  margin-bottom: 16px;
-  padding-left: 8px;
-  padding-right: 8px;
-`;
-
-const Tab = styled.TouchableOpacity`
-  height: 40px;
-  justify-content: center;
-  align-items: center;
-  flex: 1 0 0;
-  text-align: center; 
-  ${({ isSelected }: TabStyled) => isSelected && `border-bottom-width: 2px; border-bottom-color: ${SELECTED_COLOR};`}
-  margin-left: 8px;
-  margin-right: 8px;
-`;
-const TabInner = styled.View`
-display: flex;
-flex-direction: row;
-height: 32px;
-padding: 4px;
-justify-content: center;
-align-items: center;
-color: ${({ isSelected }: TabStyled) => (isSelected ? SELECTED_COLOR : UNSELECTED_COLOR)};
-font-family: Montserrat;
-font-size: 16px;
-font-style: normal;
-font-weight: 500;
-line-height: 24px;
-`;
-const TextContainer = styled.Text`
-color: #666975;
-color: ${({ isSelected }: TabStyled) => (isSelected ? SELECTED_COLOR : UNSELECTED_COLOR)};
-font-family: Montserrat;
-font-size: 16px;
-font-style: normal;
-font-weight: 500;
-line-height: 24px;
-padding-left: 4px;
-`;
-
 
 const TabSwitch = ({ onUnselectedClick, tabs, activeTabId }: ITabSwitchProps) => (
   <Container>
diff --git a/examples/client/Locomotion/src/Components/TabSwitch/styled.ts b/examples/client/Locomotion/src/Components/TabSwitch/styled.ts
new file mode 100644
index 000000000..76bfa2bc5
--- /dev/null
+++ b/examples/client/Locomotion/src/Components/TabSwitch/styled.ts
@@ -0,0 +1,56 @@
+import styled from 'styled-components/native';
+
+interface TabStyled {
+    isSelected: boolean;
+}
+
+export const SELECTED_COLOR = '#212229';
+export const UNSELECTED_COLOR = '#666975';
+
+export const Container = styled.View`
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  border-color: rgba(125, 139, 172, 0.32)
+  border-bottom-width: 1px;
+  border-bottom-color: #7D8BAC52;
+  margin-bottom: 16px;
+  padding-left: 8px;
+  padding-right: 8px;
+`;
+
+export const Tab = styled.TouchableOpacity`
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 0;
+  text-align: center; 
+  ${({ isSelected }: TabStyled) => isSelected && `border-bottom-width: 2px; border-bottom-color: ${SELECTED_COLOR};`}
+  margin-left: 8px;
+  margin-right: 8px;
+`;
+export const TabInner = styled.View`
+display: flex;
+flex-direction: row;
+height: 32px;
+padding: 4px;
+justify-content: center;
+align-items: center;
+color: ${({ isSelected }: TabStyled) => (isSelected ? SELECTED_COLOR : UNSELECTED_COLOR)};
+font-family: Montserrat;
+font-size: 16px;
+font-style: normal;
+font-weight: 500;
+line-height: 24px;
+`;
+export const TextContainer = styled.Text`
+color: #666975;
+color: ${({ isSelected }: TabStyled) => (isSelected ? SELECTED_COLOR : UNSELECTED_COLOR)};
+font-family: Montserrat;
+font-size: 16px;
+font-style: normal;
+font-weight: 500;
+line-height: 24px;
+padding-left: 4px;
+`;