diff --git a/CHANGELOGS.md b/CHANGELOGS.md
index faf4896d..76e5f17a 100644
--- a/CHANGELOGS.md
+++ b/CHANGELOGS.md
@@ -1,6 +1,15 @@
 ## Changelogs
 
-## 0.0.43
+## 0.0.44
+
+[EditText]
+
+- Added missing callBack props `onSubmitEditing`.
+- Set default `placeholderTextColor`.
+- Added `labelColor`.
+- Dark mode example in story.
+
+- ## 0.0.43
 
 [EditText]
 
diff --git a/lib/package.json b/lib/package.json
index 194fefeb..a16eb975 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dooboo-ui",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "main": "index.js",
   "types": "index.d.ts",
   "author": "dooboolab",
diff --git a/main/EditText.tsx b/main/EditText.tsx
index 6c9d1188..91d85dfa 100644
--- a/main/EditText.tsx
+++ b/main/EditText.tsx
@@ -43,6 +43,7 @@ export type EditTextProps = {
   hoverColor?: string;
   errorColor?: string;
   disableColor?: string;
+  labelColor?: string;
   type?: 'row' | 'column';
 };
 
@@ -56,18 +57,20 @@ const Component: FC<EditTextProps & {theme: Theme}> = ({
   errorText = '',
   value = '',
   placeholder,
-  placeholderTextColor,
   onChange,
   onChangeText,
   onFocus,
   onBlur,
+  onSubmitEditing,
   autoCapitalize = 'none',
   secureTextEntry = false,
   editable = true,
+  placeholderTextColor = theme.placeholder,
   focusColor = theme.primary,
   hoverColor = theme.primaryDark,
   errorColor = theme.negative,
   disableColor = theme.disabled,
+  labelColor = theme.secondaryText,
   type = 'row',
 }) => {
   const [focused, setFocused] = useState(false);
@@ -75,7 +78,6 @@ const Component: FC<EditTextProps & {theme: Theme}> = ({
   const hovered = useHover(ref);
 
   const borderColor = disableColor;
-  const labelColor = disableColor;
   const hoveredColor = theme.primary;
   const textColor = theme.text;
 
@@ -257,6 +259,7 @@ const Component: FC<EditTextProps & {theme: Theme}> = ({
           placeholderTextColor={placeholderTextColor}
           onChange={onChange}
           onChangeText={onChangeText}
+          onSubmitEditing={onSubmitEditing}
         />
       </View>
       {errorText ? (
diff --git a/main/__tests__/__snapshots__/EditText.test.tsx.snap b/main/__tests__/__snapshots__/EditText.test.tsx.snap
index 7e494651..29310146 100644
--- a/main/__tests__/__snapshots__/EditText.test.tsx.snap
+++ b/main/__tests__/__snapshots__/EditText.test.tsx.snap
@@ -40,6 +40,7 @@ exports[`[EditText] interactions Type: [column] renders custom styles without cr
       editable={true}
       onBlur={[Function]}
       onFocus={[Function]}
+      placeholderTextColor="#CFCED0"
       rejectResponderTermination={true}
       secureTextEntry={false}
       style={
@@ -104,6 +105,7 @@ exports[`[EditText] interactions Type: [column] renders without crashing 1`] = `
       editable={true}
       onBlur={[Function]}
       onFocus={[Function]}
+      placeholderTextColor="#CFCED0"
       rejectResponderTermination={true}
       secureTextEntry={false}
       style={
@@ -169,6 +171,7 @@ exports[`[EditText] interactions Type: [row] - default should render without cra
       editable={true}
       onBlur={[Function]}
       onFocus={[Function]}
+      placeholderTextColor="#CFCED0"
       rejectResponderTermination={true}
       secureTextEntry={false}
       style={
@@ -235,6 +238,7 @@ exports[`[EditText] interactions web renders without crashing 1`] = `
       editable={true}
       onBlur={[Function]}
       onFocus={[Function]}
+      placeholderTextColor="#CFCED0"
       rejectResponderTermination={true}
       secureTextEntry={false}
       style={
diff --git a/stories/dooboo-ui/Button.stories.tsx b/stories/dooboo-ui/Button.stories.tsx
index ad69da4b..130a1a72 100644
--- a/stories/dooboo-ui/Button.stories.tsx
+++ b/stories/dooboo-ui/Button.stories.tsx
@@ -1,145 +1,10 @@
-import 'react-native-get-random-values';
+import React, {ReactElement} from 'react';
 
-import {IC_FACEBOOK, IC_GOOGLE} from '../Icon';
-import {Image, View} from 'react-native';
-import React, {ReactElement, useState} from 'react';
-import {ThemeType, light} from '../../main/theme';
-
-import {Button} from '../../main';
+import ButtonDefault from './ButtonStories/ButtonDefaultStory';
 import {ContainerDeco} from '../../storybook/decorators';
 import {ThemeProvider} from '../../main/theme/ThemeProvider';
-import {action} from '@storybook/addon-actions';
+import {ThemeType} from '../../main/theme';
 import {storiesOf} from '@storybook/react-native';
-import styled from 'styled-components/native';
-import {text} from '@storybook/addon-knobs';
-
-const ScrollContainer = styled.ScrollView`
-  width: 100%;
-`;
-
-const Container = styled.View`
-  background-color: transparent;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  flex-direction: column;
-`;
-
-function Default(): React.ReactElement {
-  const [facebookLoading, setFacebookLoading] = useState<boolean>(false);
-  const [googleLoading, setGoogleLoading] = useState<boolean>(false);
-
-  return (
-    <ScrollContainer>
-      <Container>
-        <Button
-          loading={false}
-          text="😀 😎 👍 💯"
-          onPress={action('Clicked')}
-          style={{marginVertical: 40}}
-          styles={{
-            container: {
-              borderRadius: 20,
-              borderWidth: 0.5,
-              backgroundColor: 'white',
-            },
-          }}
-        />
-        <Button
-          styles={{
-            container: {
-              borderRadius: 20,
-              paddingVertical: 11,
-              paddingHorizontal: 52,
-            },
-            text: {
-              fontSize: 16,
-            },
-          }}
-          onPress={action('Clicked')}
-          text={'Hovered button in web'}
-        />
-
-        <Button
-          style={{marginVertical: 40}}
-          styles={{
-            container: {
-              borderWidth: 0.5,
-            },
-          }}
-          onPress={action('Clicked')}
-          text={'Outlined button'}
-        />
-        <Button
-          disabled={true}
-          text={text('button text', 'this is disabled')}
-        />
-        <Button
-          leftElement={
-            <View style={{marginRight: 12}}>
-              <Image style={{width: 20, height: 20}} source={IC_GOOGLE} />
-            </View>
-          }
-          loading={googleLoading}
-          style={{marginBottom: 20, marginTop: 30}}
-          styles={{
-            container: {
-              height: 52,
-              width: 300,
-              borderWidth: 0.5,
-              borderColor: light.dialog,
-              borderRadius: 40,
-              backgroundColor: light.googleBackground,
-            },
-          }}
-          onPress={(): void => {
-            setGoogleLoading(true);
-
-            const timeout = setTimeout(() => {
-              setGoogleLoading(false);
-              clearTimeout(timeout);
-            }, 2000);
-          }}
-          text="GOOGLE SIGN IN"
-        />
-        <Button
-          testID="btnFacebook"
-          leftElement={
-            <View
-              style={{
-                position: 'absolute',
-                left: 24,
-              }}>
-              <Image style={{width: 15, height: 28}} source={IC_FACEBOOK} />
-            </View>
-          }
-          loading={facebookLoading}
-          styles={{
-            container: {
-              height: 52,
-              width: 300,
-              borderWidth: 0.5,
-              borderColor: light.dialog,
-              borderRadius: 40,
-              backgroundColor: light.secondary,
-            },
-          }}
-          onPress={(): void => {
-            setFacebookLoading(true);
-
-            const timeout = setTimeout(() => {
-              setFacebookLoading(false);
-              clearTimeout(timeout);
-            }, 2000);
-          }}
-          text="FACEBOOK SIGN IN"
-        />
-      </Container>
-    </ScrollContainer>
-  );
-}
 
 /**
  * Below are stories for web
@@ -148,7 +13,7 @@ export default {
   title: 'Button',
 };
 
-export const toStorybook = (): ReactElement => <Default />;
+export const toStorybook = (): ReactElement => <ButtonDefault />;
 
 toStorybook.story = {
   name: 'default',
@@ -161,11 +26,11 @@ storiesOf('Button', module)
   .addDecorator(ContainerDeco)
   .add('default', () => (
     <>
-      <Default />
+      <ButtonDefault />
     </>
   ))
   .add('with dark theme', () => (
     <ThemeProvider initialThemeType={ThemeType.DARK}>
-      <Default />
+      <ButtonDefault />
     </ThemeProvider>
   ));
diff --git a/stories/dooboo-ui/ButtonStories/ButtonDefaultStory.tsx b/stories/dooboo-ui/ButtonStories/ButtonDefaultStory.tsx
new file mode 100644
index 00000000..164d5902
--- /dev/null
+++ b/stories/dooboo-ui/ButtonStories/ButtonDefaultStory.tsx
@@ -0,0 +1,140 @@
+import {IC_FACEBOOK, IC_GOOGLE} from '../../Icon';
+import {Image, View} from 'react-native';
+import React, {useState} from 'react';
+
+import {Button} from '../../../main';
+import type {FC} from 'react';
+import {action} from '@storybook/addon-actions';
+import {light} from '../../../main/theme';
+import styled from 'styled-components/native';
+import {text} from '@storybook/addon-knobs';
+
+const ScrollContainer = styled.ScrollView`
+  width: 100%;
+`;
+
+const Container = styled.View`
+  background-color: transparent;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  flex-direction: column;
+`;
+
+const Default: FC = () => {
+  const [facebookLoading, setFacebookLoading] = useState<boolean>(false);
+  const [googleLoading, setGoogleLoading] = useState<boolean>(false);
+
+  return (
+    <ScrollContainer>
+      <Container>
+        <Button
+          loading={false}
+          text="😀 😎 👍 💯"
+          onPress={action('Clicked')}
+          style={{marginVertical: 40}}
+          styles={{
+            container: {
+              borderRadius: 20,
+              borderWidth: 0.5,
+              backgroundColor: 'white',
+            },
+          }}
+        />
+        <Button
+          styles={{
+            container: {
+              borderRadius: 20,
+              paddingVertical: 11,
+              paddingHorizontal: 52,
+            },
+            text: {
+              fontSize: 16,
+            },
+          }}
+          onPress={action('Clicked')}
+          text={'Hovered button in web'}
+        />
+
+        <Button
+          style={{marginVertical: 40}}
+          styles={{
+            container: {
+              borderWidth: 0.5,
+            },
+          }}
+          onPress={action('Clicked')}
+          text={'Outlined button'}
+        />
+        <Button
+          disabled={true}
+          text={text('button text', 'this is disabled')}
+        />
+        <Button
+          leftElement={
+            <View style={{marginRight: 12}}>
+              <Image style={{width: 20, height: 20}} source={IC_GOOGLE} />
+            </View>
+          }
+          loading={googleLoading}
+          style={{marginBottom: 20, marginTop: 30}}
+          styles={{
+            container: {
+              height: 52,
+              width: 300,
+              borderWidth: 0.5,
+              borderColor: light.dialog,
+              borderRadius: 40,
+              backgroundColor: light.googleBackground,
+            },
+          }}
+          onPress={(): void => {
+            setGoogleLoading(true);
+
+            const timeout = setTimeout(() => {
+              setGoogleLoading(false);
+              clearTimeout(timeout);
+            }, 2000);
+          }}
+          text="GOOGLE SIGN IN"
+        />
+        <Button
+          testID="btnFacebook"
+          leftElement={
+            <View
+              style={{
+                position: 'absolute',
+                left: 24,
+              }}>
+              <Image style={{width: 15, height: 28}} source={IC_FACEBOOK} />
+            </View>
+          }
+          loading={facebookLoading}
+          styles={{
+            container: {
+              height: 52,
+              width: 300,
+              borderWidth: 0.5,
+              borderColor: light.dialog,
+              borderRadius: 40,
+              backgroundColor: light.secondary,
+            },
+          }}
+          onPress={(): void => {
+            setFacebookLoading(true);
+
+            const timeout = setTimeout(() => {
+              setFacebookLoading(false);
+              clearTimeout(timeout);
+            }, 2000);
+          }}
+          text="FACEBOOK SIGN IN"
+        />
+      </Container>
+    </ScrollContainer>
+  );
+};
+
+export default Default;
diff --git a/stories/dooboo-ui/EditText.stories.tsx b/stories/dooboo-ui/EditText.stories.tsx
index 6cf99b50..a7bbfcaf 100644
--- a/stories/dooboo-ui/EditText.stories.tsx
+++ b/stories/dooboo-ui/EditText.stories.tsx
@@ -1,272 +1,13 @@
-import {Button, EditText} from '../../main';
-import {
-  Platform,
-  SafeAreaView,
-  ScrollView,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import React, {ReactElement, useState} from 'react';
+import React, {ReactElement} from 'react';
 
 import {ContainerDeco} from '../../storybook/decorators';
+import EditTextColumn from './EditTextStories/EditTextColumnStory';
+import EditTextRow from './EditTextStories/EditTextRowStory';
+import EditTextRowWithTheme from './EditTextStories/EditTextWithThemeStory';
 import {ThemeProvider} from '../../main/theme/ThemeProvider';
+import {ThemeType} from '../../main/theme';
 import {storiesOf} from '@storybook/react-native';
 
-const ColumnEditText = (): React.ReactElement => {
-  const validateEmail = (email: string): boolean => {
-    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-
-    return re.test(email);
-  };
-
-  const [email, setEmail] = useState<string>('');
-  const [password, setPassword] = useState<string>('');
-  const [errorEmail, setErrorEmail] = useState<string>('');
-
-  const onSignIn = (): void => {
-    if (!validateEmail(email)) setErrorEmail('Not a valid email address');
-  };
-
-  const onTextChanged = (type: string, text: string): void => {
-    type === 'EMAIL' ? setEmail(text) : setPassword(text);
-
-    if (type === 'EMAIL' && text === '') setErrorEmail('');
-  };
-
-  return (
-    <SafeAreaView style={{width: '100%'}}>
-      <ScrollView
-        contentContainerStyle={{
-          alignSelf: 'stretch',
-          paddingHorizontal: 40,
-          paddingVertical: 80,
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}>
-        <View
-          style={{
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            width: Platform.OS === 'web' ? 438 : '100%',
-          }}>
-          <Text
-            style={{
-              fontWeight: 'bold',
-              fontSize: 24,
-              lineHeight: 35,
-              color: '#495057',
-            }}>
-            Sign in with Email
-          </Text>
-          <EditText
-            type="column"
-            labelText="email"
-            placeholder="your@email.com"
-            placeholderTextColor="#ADB5BD"
-            value={email}
-            onChangeText={(text: string): void => onTextChanged('EMAIL', text)}
-            style={{marginTop: 50}}
-            styles={{
-              errorText: {
-                color: '#661111',
-              },
-            }}
-            errorText={errorEmail}
-            onSubmitEditing={onSignIn}
-          />
-          <EditText
-            type="column"
-            secureTextEntry={true}
-            labelText="Password"
-            placeholder="Write your password"
-            placeholderTextColor="#ADB5BD"
-            value={password}
-            onChangeText={(text: string): void =>
-              onTextChanged('PASSWORD', text)
-            }
-            style={{marginTop: 20}}
-            onSubmitEditing={onSignIn}
-          />
-          <Button
-            styles={{
-              container: {
-                borderRadius: 6,
-                borderWidth: 0,
-                marginTop: 40,
-                width: 184,
-                height: 48,
-                backgroundColor: '#6DA6FC',
-              },
-              text: {
-                color: '#FFFFFF',
-              },
-            }}
-            testID="btn-default"
-            onPress={(): void => onSignIn()}
-            text="Login"
-          />
-          {/* Email SignUp text */}
-          <View
-            style={{
-              marginTop: 20,
-              flexDirection: 'row',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}>
-            <Text
-              testID="no-account"
-              style={{
-                fontSize: 14,
-                color: '#495057',
-              }}>
-              Do not have and account?{' '}
-            </Text>
-            <TouchableOpacity onPress={(): null => null} style={{padding: 4}}>
-              <Text
-                style={{
-                  color: '#6772e5',
-                  fontWeight: 'bold',
-                }}>
-                Find
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-};
-
-const RowEditText = (): React.ReactElement => {
-  const validateEmail = (email: string): boolean => {
-    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-
-    return re.test(email);
-  };
-
-  const [email, setEmail] = useState<string>('');
-  const [password, setPassword] = useState<string>('');
-  const [errorEmail, setErrorEmail] = useState<string>('');
-
-  const onSignIn = (): void => {
-    if (!validateEmail(email)) setErrorEmail('Not a valid email address');
-  };
-
-  const onTextChanged = (type: string, text: string): void => {
-    type === 'EMAIL' ? setEmail(text) : setPassword(text);
-
-    if (type === 'EMAIL' && text === '') setErrorEmail('');
-  };
-
-  return (
-    <SafeAreaView style={{width: '100%'}}>
-      <ScrollView
-        contentContainerStyle={{
-          alignSelf: 'stretch',
-          paddingHorizontal: 40,
-          paddingVertical: 80,
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}>
-        <View
-          style={{
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            width: Platform.OS === 'web' ? 438 : '100%',
-          }}>
-          <Text
-            style={{
-              fontWeight: 'bold',
-              fontSize: 24,
-              lineHeight: 35,
-              color: '#495057',
-            }}>
-            Sign in with Email
-          </Text>
-          <EditText
-            type="row"
-            labelText="email"
-            placeholder="your@email.com"
-            placeholderTextColor="#ADB5BD"
-            value={email}
-            onChangeText={(text: string): void => onTextChanged('EMAIL', text)}
-            style={{marginTop: 50}}
-            styles={{
-              errorText: {
-                color: '#661111',
-              },
-            }}
-            errorText={errorEmail}
-            onSubmitEditing={onSignIn}
-          />
-          <EditText
-            type="row"
-            secureTextEntry={true}
-            labelText="Password"
-            placeholder="Write your password"
-            placeholderTextColor="#ADB5BD"
-            value={password}
-            onChangeText={(text: string): void =>
-              onTextChanged('PASSWORD', text)
-            }
-            style={{marginTop: 20}}
-            onSubmitEditing={onSignIn}
-          />
-          <Button
-            styles={{
-              container: {
-                borderRadius: 6,
-                borderWidth: 0,
-                marginTop: 40,
-                width: 184,
-                height: 48,
-                backgroundColor: '#6DA6FC',
-              },
-              text: {
-                color: '#FFFFFF',
-              },
-            }}
-            testID="btn-default"
-            onPress={(): void => onSignIn()}
-            text="Login"
-          />
-          {/* Email SignUp text */}
-          <View
-            style={{
-              marginTop: 20,
-              flexDirection: 'row',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}>
-            <Text
-              testID="no-account"
-              style={{
-                fontSize: 14,
-                color: '#495057',
-              }}>
-              Do not have and account?{' '}
-            </Text>
-            <TouchableOpacity onPress={(): null => null} style={{padding: 4}}>
-              <Text
-                style={{
-                  color: '#6772e5',
-                  fontWeight: 'bold',
-                }}>
-                Find
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-};
-
 /**
  * Below are stories for web
  */
@@ -274,8 +15,8 @@ export default {
   title: 'EditText',
 };
 
-export const toStorybook1 = (): ReactElement => <ColumnEditText />;
-export const toStorybook2 = (): ReactElement => <RowEditText />;
+export const toStorybook1 = (): ReactElement => <EditTextColumn />;
+export const toStorybook2 = (): ReactElement => <EditTextRow />;
 
 toStorybook1.story = {
   name: 'column (default)',
@@ -295,14 +36,19 @@ storiesOf('EditText', module)
   .add(
     toStorybook1.story.name,
     () => (
-      <ThemeProvider>
-        <ColumnEditText />
+      <ThemeProvider initialThemeType={ThemeType.LIGHT}>
+        <EditTextColumn />
       </ThemeProvider>
     ),
     {
       notes: toStorybook1.story.notes,
     },
   )
-  .add(toStorybook2.story.name, () => <RowEditText />, {
+  .add(toStorybook2.story.name, () => <EditTextRow />, {
     notes: toStorybook2.story.notes,
-  });
+  })
+  .add('with dark theme', () => (
+    <ThemeProvider initialThemeType={ThemeType.DARK}>
+      <EditTextRowWithTheme />
+    </ThemeProvider>
+  ));
diff --git a/stories/dooboo-ui/EditTextStories/EditTextColumnStory.tsx b/stories/dooboo-ui/EditTextStories/EditTextColumnStory.tsx
new file mode 100644
index 00000000..33e4f0f4
--- /dev/null
+++ b/stories/dooboo-ui/EditTextStories/EditTextColumnStory.tsx
@@ -0,0 +1,139 @@
+import {Button, EditText} from '../../../main';
+import {
+  Platform,
+  SafeAreaView,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import React, {useState} from 'react';
+
+const EditTextColumn = (): React.ReactElement => {
+  const validateEmail = (email: string): boolean => {
+    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+    return re.test(email);
+  };
+
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [errorEmail, setErrorEmail] = useState<string>('');
+
+  const onSignIn = (): void => {
+    if (!validateEmail(email)) setErrorEmail('Not a valid email address');
+  };
+
+  const onTextChanged = (type: string, text: string): void => {
+    type === 'EMAIL' ? setEmail(text) : setPassword(text);
+
+    if (type === 'EMAIL' && text === '') setErrorEmail('');
+  };
+
+  return (
+    <SafeAreaView style={{width: '100%'}}>
+      <ScrollView
+        contentContainerStyle={{
+          alignSelf: 'stretch',
+          paddingHorizontal: 40,
+          paddingVertical: 80,
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        <View
+          style={{
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: Platform.OS === 'web' ? 438 : '100%',
+          }}>
+          <Text
+            style={{
+              fontWeight: 'bold',
+              fontSize: 24,
+              lineHeight: 35,
+              color: '#495057',
+            }}>
+            Sign in with Email
+          </Text>
+          <EditText
+            type="column"
+            labelText="email"
+            placeholder="your@email.com"
+            placeholderTextColor="#ADB5BD"
+            value={email}
+            onChangeText={(text: string): void => onTextChanged('EMAIL', text)}
+            style={{marginTop: 50}}
+            styles={{
+              errorText: {
+                color: '#661111',
+              },
+            }}
+            errorText={errorEmail}
+            onSubmitEditing={onSignIn}
+          />
+          <EditText
+            type="column"
+            secureTextEntry={true}
+            labelText="Password"
+            placeholder="Write your password"
+            placeholderTextColor="#ADB5BD"
+            value={password}
+            onChangeText={(text: string): void =>
+              onTextChanged('PASSWORD', text)
+            }
+            style={{marginTop: 20}}
+            onSubmitEditing={onSignIn}
+          />
+          <Button
+            styles={{
+              container: {
+                borderRadius: 6,
+                borderWidth: 0,
+                marginTop: 40,
+                width: 184,
+                height: 48,
+                backgroundColor: '#6DA6FC',
+              },
+              text: {
+                color: '#FFFFFF',
+              },
+            }}
+            testID="btn-default"
+            onPress={(): void => onSignIn()}
+            text="Login"
+          />
+          {/* Email SignUp text */}
+          <View
+            style={{
+              marginTop: 20,
+              flexDirection: 'row',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+            <Text
+              testID="no-account"
+              style={{
+                fontSize: 14,
+                color: '#495057',
+              }}>
+              Do not have and account?{' '}
+            </Text>
+            <TouchableOpacity onPress={(): null => null} style={{padding: 4}}>
+              <Text
+                style={{
+                  color: '#6772e5',
+                  fontWeight: 'bold',
+                }}>
+                Find
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default EditTextColumn;
diff --git a/stories/dooboo-ui/EditTextStories/EditTextRowStory.tsx b/stories/dooboo-ui/EditTextStories/EditTextRowStory.tsx
new file mode 100644
index 00000000..a6ee4233
--- /dev/null
+++ b/stories/dooboo-ui/EditTextStories/EditTextRowStory.tsx
@@ -0,0 +1,139 @@
+import {Button, EditText} from '../../../main';
+import {
+  Platform,
+  SafeAreaView,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import React, {useState} from 'react';
+
+const EditTextRow = (): React.ReactElement => {
+  const validateEmail = (email: string): boolean => {
+    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+    return re.test(email);
+  };
+
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [errorEmail, setErrorEmail] = useState<string>('');
+
+  const onSignIn = (): void => {
+    if (!validateEmail(email)) setErrorEmail('Not a valid email address');
+  };
+
+  const onTextChanged = (type: string, text: string): void => {
+    type === 'EMAIL' ? setEmail(text) : setPassword(text);
+
+    if (type === 'EMAIL' && text === '') setErrorEmail('');
+  };
+
+  return (
+    <SafeAreaView style={{width: '100%'}}>
+      <ScrollView
+        contentContainerStyle={{
+          alignSelf: 'stretch',
+          paddingHorizontal: 40,
+          paddingVertical: 80,
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        <View
+          style={{
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: Platform.OS === 'web' ? 438 : '100%',
+          }}>
+          <Text
+            style={{
+              fontWeight: 'bold',
+              fontSize: 24,
+              lineHeight: 35,
+              color: '#495057',
+            }}>
+            Sign in with Email
+          </Text>
+          <EditText
+            type="row"
+            labelText="email"
+            placeholder="your@email.com"
+            placeholderTextColor="#ADB5BD"
+            value={email}
+            onChangeText={(text: string): void => onTextChanged('EMAIL', text)}
+            style={{marginTop: 50}}
+            styles={{
+              errorText: {
+                color: '#661111',
+              },
+            }}
+            errorText={errorEmail}
+            onSubmitEditing={onSignIn}
+          />
+          <EditText
+            type="row"
+            secureTextEntry={true}
+            labelText="Password"
+            placeholder="Write your password"
+            placeholderTextColor="#ADB5BD"
+            value={password}
+            onChangeText={(text: string): void =>
+              onTextChanged('PASSWORD', text)
+            }
+            style={{marginTop: 20}}
+            onSubmitEditing={onSignIn}
+          />
+          <Button
+            styles={{
+              container: {
+                borderRadius: 6,
+                borderWidth: 0,
+                marginTop: 40,
+                width: 184,
+                height: 48,
+                backgroundColor: '#6DA6FC',
+              },
+              text: {
+                color: '#FFFFFF',
+              },
+            }}
+            testID="btn-default"
+            onPress={(): void => onSignIn()}
+            text="Login"
+          />
+          {/* Email SignUp text */}
+          <View
+            style={{
+              marginTop: 20,
+              flexDirection: 'row',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+            <Text
+              testID="no-account"
+              style={{
+                fontSize: 14,
+                color: '#495057',
+              }}>
+              Do not have and account?{' '}
+            </Text>
+            <TouchableOpacity onPress={(): null => null} style={{padding: 4}}>
+              <Text
+                style={{
+                  color: '#6772e5',
+                  fontWeight: 'bold',
+                }}>
+                Find
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default EditTextRow;
diff --git a/stories/dooboo-ui/EditTextStories/EditTextWithThemeStory.tsx b/stories/dooboo-ui/EditTextStories/EditTextWithThemeStory.tsx
new file mode 100644
index 00000000..95906ce1
--- /dev/null
+++ b/stories/dooboo-ui/EditTextStories/EditTextWithThemeStory.tsx
@@ -0,0 +1,146 @@
+import {Button, EditText} from '../../../main';
+import {
+  Platform,
+  SafeAreaView,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import React, {useState} from 'react';
+
+import {useTheme} from '../../../main/theme/ThemeProvider';
+
+const EditTextRowWithTheme = (): React.ReactElement => {
+  const {theme} = useTheme();
+
+  const validateEmail = (email: string): boolean => {
+    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+    return re.test(email);
+  };
+
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [errorEmail, setErrorEmail] = useState<string>('');
+
+  const onSignIn = (): void => {
+    if (!validateEmail(email)) setErrorEmail('Not a valid email address');
+  };
+
+  const onTextChanged = (type: string, text: string): void => {
+    type === 'EMAIL' ? setEmail(text) : setPassword(text);
+
+    if (type === 'EMAIL' && text === '') setErrorEmail('');
+  };
+
+  return (
+    <SafeAreaView
+      style={{
+        flex: 1,
+        alignSelf: 'stretch',
+        backgroundColor: theme.background,
+      }}>
+      <ScrollView
+        contentContainerStyle={{
+          alignSelf: 'stretch',
+          paddingHorizontal: 40,
+          paddingVertical: 80,
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        <View
+          style={{
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: Platform.OS === 'web' ? 438 : '100%',
+          }}>
+          <Text
+            style={{
+              fontWeight: 'bold',
+              fontSize: 24,
+              lineHeight: 35,
+              color: theme.text,
+            }}>
+            Sign in with Email
+          </Text>
+          <EditText
+            type="row"
+            labelText="email"
+            placeholder="your@email.com"
+            value={email}
+            onChangeText={(text: string): void => onTextChanged('EMAIL', text)}
+            style={{marginTop: 50}}
+            styles={{
+              errorText: {
+                color: '#661111',
+              },
+            }}
+            errorText={errorEmail}
+            onSubmitEditing={onSignIn}
+          />
+          <EditText
+            type="row"
+            secureTextEntry={true}
+            labelText="Password"
+            placeholder="Write your password"
+            value={password}
+            onChangeText={(text: string): void =>
+              onTextChanged('PASSWORD', text)
+            }
+            style={{marginTop: 20}}
+            onSubmitEditing={onSignIn}
+          />
+          <Button
+            styles={{
+              container: {
+                borderRadius: 6,
+                borderWidth: 0,
+                marginTop: 40,
+                width: 184,
+                height: 48,
+                backgroundColor: '#6DA6FC',
+              },
+              text: {
+                color: '#FFFFFF',
+              },
+            }}
+            testID="btn-default"
+            onPress={(): void => onSignIn()}
+            text="Login"
+          />
+          {/* Email SignUp text */}
+          <View
+            style={{
+              marginTop: 20,
+              flexDirection: 'row',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+            <Text
+              testID="no-account"
+              style={{
+                fontSize: 14,
+                color: '#495057',
+              }}>
+              Do not have and account?{' '}
+            </Text>
+            <TouchableOpacity onPress={(): null => null} style={{padding: 4}}>
+              <Text
+                style={{
+                  color: '#6772e5',
+                  fontWeight: 'bold',
+                }}>
+                Find
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default EditTextRowWithTheme;