diff --git a/src/components/basicHeader/view/basicHeaderView.js b/src/components/basicHeader/view/basicHeaderView.js
index 8ce5f0f3d..876937a95 100644
--- a/src/components/basicHeader/view/basicHeaderView.js
+++ b/src/components/basicHeader/view/basicHeaderView.js
@@ -87,8 +87,8 @@ class BasicHeaderView extends Component {
           <View style={styles.backWrapper}>
             <IconButton
               iconStyle={[styles.backIcon, isModalHeader && styles.closeIcon]}
-              iconType={isModalHeader && 'FontAwesome'}
-              name={isModalHeader ? 'close' : 'md-arrow-back'}
+              iconType="MaterialIcons"
+              name={isModalHeader ? 'arrow-back' : 'arrow-back'}
               onPress={() => (isModalHeader ? handleOnPressClose() : handleOnPressBackButton())}
             />
             {isHasIcons && !isReply && (
@@ -96,8 +96,9 @@ class BasicHeaderView extends Component {
                 {!isDraftSaving ? (
                   <IconButton
                     iconStyle={[styles.saveIcon, isDraftSaved && styles.savedIcon]}
-                    iconType="FontAwesome"
+                    iconType="MaterialIcons"
                     name="save"
+                    size={25}
                     onPress={() => handleOnSaveButtonPress && handleOnSaveButtonPress()}
                   />
                 ) : (
@@ -173,14 +174,16 @@ class BasicHeaderView extends Component {
                 style={styles.iconButton}
                 iconStyle={styles.rightIcon}
                 size={20}
-                name="ios-timer"
+                iconType="MaterialIcons"
+                name="timer"
               />
               <IconButton
                 style={styles.iconButton}
                 size={25}
                 onPress={() => handleOnPressPreviewButton()}
                 iconStyle={styles.rightIcon}
-                name={isPreviewActive ? 'ios-eye' : 'ios-eye-off'}
+                iconType="MaterialIcons"
+                name={isPreviewActive ? 'remove-red-eye' : 'remove-red-eye'}
               />
               {!isLoading ? (
                 <TextButton
diff --git a/src/components/basicUIElements/view/tag/tagStyles.js b/src/components/basicUIElements/view/tag/tagStyles.js
index 7b9eff8be..dc1a010b5 100644
--- a/src/components/basicUIElements/view/tag/tagStyles.js
+++ b/src/components/basicUIElements/view/tag/tagStyles.js
@@ -2,14 +2,15 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
   text: {
-    color: '$primaryBackgroundColor',
+    color: '$pureWhite',
     fontSize: 10,
+    fontWeight: 'bold',
   },
   isPin: {
     backgroundColor: '$primaryBlue',
   },
   isPostCardTag: {
-    backgroundColor: '$iconColor',
+    backgroundColor: '$tagColor',
   },
   textWrapper: {
     paddingHorizontal: 10,
diff --git a/src/components/collapsibleCard/view/collapsibleCardView.js b/src/components/collapsibleCard/view/collapsibleCardView.js
index b610cd3f8..c11df4bf5 100644
--- a/src/components/collapsibleCard/view/collapsibleCardView.js
+++ b/src/components/collapsibleCard/view/collapsibleCardView.js
@@ -88,7 +88,7 @@ class CollapsibleCardView extends PureComponent {
               title={title}
               defaultTitle={defaultTitle}
               isBoldTitle={isBoldTitle}
-              iconName={expanded ? 'md-arrow-dropdown' : 'md-arrow-dropup'}
+              iconName={expanded ? 'arrow-drop-down' : 'arrow-drop-up'}
             />
           )}
         </TouchableHighlight>
diff --git a/src/components/commentsDisplay/view/commentsDisplayView.js b/src/components/commentsDisplay/view/commentsDisplayView.js
index a5af186a0..173239d1a 100644
--- a/src/components/commentsDisplay/view/commentsDisplayView.js
+++ b/src/components/commentsDisplay/view/commentsDisplayView.js
@@ -38,7 +38,7 @@ class CommentsDisplayView extends PureComponent {
         {commentCount > 0 && (
           <Fragment>
             <FilterBar
-              dropdownIconName="md-arrow-dropdown"
+              dropdownIconName="arrow-drop-down"
               options={['NEW COMMENTS']}
               defaultText="NEW COMMENTS"
               onDropdownSelect={this._handleOnDropdownSelect}
diff --git a/src/components/containerHeader/view/containerHeaderStyles.js b/src/components/containerHeader/view/containerHeaderStyles.js
index 834cb0f52..2e2efbe47 100644
--- a/src/components/containerHeader/view/containerHeaderStyles.js
+++ b/src/components/containerHeader/view/containerHeaderStyles.js
@@ -27,7 +27,7 @@ export default EStyleSheet.create({
   icon: {
     alignSelf: 'center',
     color: '$iconColor',
-    fontSize: 18,
+    fontSize: 22,
     marginRight: 32,
   },
 });
diff --git a/src/components/containerHeader/view/containerHeaderView.js b/src/components/containerHeader/view/containerHeaderView.js
index d51874597..f040cb9d5 100644
--- a/src/components/containerHeader/view/containerHeaderView.js
+++ b/src/components/containerHeader/view/containerHeaderView.js
@@ -1,10 +1,10 @@
 import React, { PureComponent } from 'react';
 import { View, Text } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
 
 // Constants
 
 // Components
+import { Icon } from '../../icon';
 
 // Styles
 import styles from './containerHeaderStyles';
@@ -51,7 +51,7 @@ class ContainerHeaderView extends PureComponent {
         >
           {title || defaultTitle}
         </Text>
-        {iconName && <Ionicons style={styles.icon} name={iconName} />}
+        {iconName && <Icon style={styles.icon} iconType="MaterialIcons" name={iconName} />}
       </View>
     );
   }
diff --git a/src/components/dropdownButton/view/dropdownButtonStyles.js b/src/components/dropdownButton/view/dropdownButtonStyles.js
index 966c09090..2e9979414 100644
--- a/src/components/dropdownButton/view/dropdownButtonStyles.js
+++ b/src/components/dropdownButton/view/dropdownButtonStyles.js
@@ -14,10 +14,9 @@ export default EStyleSheet.create({
   //   marginLeft: 25,
   // },
   dropdownIcon: {
-    fontSize: 18,
-    color: '$iconColor',
-    marginLeft: 7,
-    marginTop: 1,
+    fontSize: 22,
+    color: '$primaryDarkText',
+    marginLeft: -10,
   },
   dropdown: {
     marginTop: 5,
@@ -40,7 +39,7 @@ export default EStyleSheet.create({
   },
   dropdownText: {
     fontSize: 10,
-    color: '$primaryDarkGray',
+    color: '$primaryDarkText',
     padding: 5,
     borderColor: '#e7e7e7',
   },
@@ -52,10 +51,10 @@ export default EStyleSheet.create({
     marginLeft: 25,
   },
   buttonText: {
-    fontSize: 9,
+    fontSize: 10,
     alignSelf: 'center',
-    color: '$primaryDarkGray',
-    fontWeight: 'normal',
+    color: '$primaryDarkText',
+    fontWeight: 'bold',
   },
   rowWrapper: {
     height: 35,
diff --git a/src/components/dropdownButton/view/dropdownButtonView.js b/src/components/dropdownButton/view/dropdownButtonView.js
index fc7bcc8a7..d136fc09d 100644
--- a/src/components/dropdownButton/view/dropdownButtonView.js
+++ b/src/components/dropdownButton/view/dropdownButtonView.js
@@ -3,7 +3,7 @@ import { View, Text, TouchableHighlight } from 'react-native';
 
 // External components
 import ModalDropdown from 'react-native-modal-dropdown';
-import Ionicons from 'react-native-vector-icons/Ionicons';
+import { Icon } from '../../icon';
 
 // Styles
 import styles from './dropdownButtonStyles';
@@ -67,16 +67,21 @@ const DropdownButtonView = ({
     >
       {isHasChildIcon && (
         <View style={[styles.iconWrapper, childIconWrapperStyle && childIconWrapperStyle]}>
-          <Ionicons
+          <Icon
             style={[styles.dropdownIcon, iconStyle]}
-            name={!iconName ? 'md-arrow-dropdown' : iconName}
+            iconType="MaterialIcons"
+            name={!iconName ? 'arrow-drop-down' : iconName}
           />
         </View>
       )}
     </ModalDropdown>
     {!children && !isHasChildIcon && (
       <View style={styles.iconWrapper}>
-        <Ionicons style={styles.dropdownIcon} name={!iconName ? 'md-arrow-dropdown' : iconName} />
+        <Icon
+          style={styles.dropdownIcon}
+          iconType="MaterialIcons"
+          name={!iconName ? 'arrow-drop-down' : iconName}
+        />
       </View>
     )}
   </View>
diff --git a/src/components/filterBar/view/filterBarStyles.js b/src/components/filterBar/view/filterBarStyles.js
index 78f357c03..18f6fef65 100644
--- a/src/components/filterBar/view/filterBarStyles.js
+++ b/src/components/filterBar/view/filterBarStyles.js
@@ -10,11 +10,11 @@ export default EStyleSheet.create({
     justifyContent: 'space-between',
   },
   rightIconWrapper: {
-    marginRight: 32,
+    marginRight: 16,
     alignSelf: 'center',
   },
   rightIcon: {
-    color: '$iconColor',
+    color: '$primaryDarkText',
     textAlign: 'center',
   },
 });
diff --git a/src/components/filterBar/view/filterBarView.js b/src/components/filterBar/view/filterBarView.js
index ea3672d96..1b1c7ddd9 100644
--- a/src/components/filterBar/view/filterBarView.js
+++ b/src/components/filterBar/view/filterBarView.js
@@ -30,7 +30,7 @@ const FilterBarView = ({
 }) => (
   <View style={styles.container}>
     {!isHide && (
-      <LineBreak height={35}>
+      <LineBreak height={38}>
         <View style={styles.filterBarWrapper}>
           <DropdownButton
             iconName={dropdownIconName}
@@ -46,7 +46,7 @@ const FilterBarView = ({
             >
               <Icon
                 style={styles.rightIcon}
-                size={iconSize || 32}
+                size={iconSize || 28}
                 iconType={rightIconType}
                 name={rightIconName}
               />
diff --git a/src/components/formInput/view/formInputView.js b/src/components/formInput/view/formInputView.js
index 6e9f49ed6..4e29300c5 100644
--- a/src/components/formInput/view/formInputView.js
+++ b/src/components/formInput/view/formInputView.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { View } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
 import FastImage from 'react-native-fast-image';
+import { Icon } from '../../icon';
 
 // Constants
 
@@ -76,6 +76,7 @@ class FormInputView extends Component {
       leftIconName,
       rightIconName,
       secureTextEntry,
+      iconType,
     } = this.props;
     return (
       <View
@@ -98,7 +99,7 @@ class FormInputView extends Component {
             />
           </View>
         ) : (
-          <Ionicons name={rightIconName} style={styles.icon} />
+          <Icon iconType={iconType || 'MaterialIcons'} name={rightIconName} style={styles.icon} />
         )}
         <View style={styles.textInput}>
           <TextInput
@@ -115,7 +116,8 @@ class FormInputView extends Component {
         </View>
 
         {value && value.length > 0 ? (
-          <Ionicons
+          <Icon
+            iconType={iconType || 'MaterialIcons'}
             onPress={() => this.setState({ value: '' })}
             name={leftIconName}
             style={styles.icon}
diff --git a/src/components/header/container/headerContainer.js b/src/components/header/container/headerContainer.js
index e99f424eb..7d189514e 100644
--- a/src/components/header/container/headerContainer.js
+++ b/src/components/header/container/headerContainer.js
@@ -41,7 +41,12 @@ class HeaderContainer extends PureComponent {
 
   render() {
     const {
-      isLoggedIn, currentAccount, selectedUser, isReverse, isLoginDone,
+      isLoggedIn,
+      currentAccount,
+      selectedUser,
+      isReverse,
+      isLoginDone,
+      isDarkTheme,
     } = this.props;
     let displayName;
     let username;
@@ -67,6 +72,7 @@ class HeaderContainer extends PureComponent {
         displayName={displayName}
         username={username}
         reputation={reputation}
+        isDarkTheme={isDarkTheme}
       />
     );
   }
@@ -75,6 +81,7 @@ class HeaderContainer extends PureComponent {
 const mapStateToProps = state => ({
   isLoggedIn: state.application.isLoggedIn,
   isLoginDone: state.application.isLoginDone,
+  isDarkTheme: state.application.isDarkTheme,
 
   currentAccount: state.account.currentAccount,
 });
diff --git a/src/components/header/view/headerStyles.js b/src/components/header/view/headerStyles.js
index f9c245caf..246263b82 100644
--- a/src/components/header/view/headerStyles.js
+++ b/src/components/header/view/headerStyles.js
@@ -39,14 +39,14 @@ export default EStyleSheet.create({
   title: {
     fontSize: 14,
     fontWeight: 'bold',
-    color: '$primaryDarkGray',
+    color: '$primaryDarkText',
   },
   noAuthTitle: {
     fontSize: 14,
     color: '$iconColor',
   },
   subTitle: {
-    color: '$primaryDarkGray',
+    color: '$primaryDarkText',
     fontSize: 12,
   },
   avatar: {
diff --git a/src/components/header/view/headerView.js b/src/components/header/view/headerView.js
index c33731ecb..ecd3ad9c7 100644
--- a/src/components/header/view/headerView.js
+++ b/src/components/header/view/headerView.js
@@ -45,8 +45,16 @@ class HeaderView extends Component {
       isReverse,
       reputation,
       username,
+      isDarkTheme,
     } = this.props;
     const { isSearchModalOpen } = this.state;
+    let gredientColor = isDarkTheme ? ['#081c36', '#43638e'] : ['#2d5aa0', '#357ce6'];
+
+    if (isReverse) {
+      gredientColor = isDarkTheme ? ['#43638e', '#081c36'] : ['#357ce6', '#2d5aa0'];
+    } else {
+      gredientColor = isDarkTheme ? ['#081c36', '#43638e'] : ['#2d5aa0', '#357ce6'];
+    }
 
     return (
       <SafeAreaView style={[styles.container, isReverse && styles.containerReverse]}>
@@ -64,7 +72,7 @@ class HeaderView extends Component {
           <LinearGradient
             start={{ x: 0, y: 0 }}
             end={{ x: 1, y: 0 }}
-            colors={['#2d5aa0', '#357ce6']}
+            colors={gredientColor}
             style={[
               styles.avatarButtonWrapper,
               isReverse ? styles.avatarButtonWrapperReverse : styles.avatarDefault,
diff --git a/src/components/icon/view/iconView.js b/src/components/icon/view/iconView.js
index 221faae28..cd47acaec 100644
--- a/src/components/icon/view/iconView.js
+++ b/src/components/icon/view/iconView.js
@@ -55,11 +55,7 @@ class IconView extends PureComponent {
       case 'MaterialIcons':
         return <MaterialIcons {...this.props}>{children}</MaterialIcons>;
       case 'MaterialCommunityIcons':
-        return (
-          <MaterialCommunityIcons name={_name} {...this.props}>
-            {children}
-          </MaterialCommunityIcons>
-        );
+        return <MaterialCommunityIcons {...this.props}>{children}</MaterialCommunityIcons>;
       default:
         return <Ionicons name={_name} {...this.props} />;
     }
diff --git a/src/components/loginHeader/view/loginHeaderStyles.js b/src/components/loginHeader/view/loginHeaderStyles.js
index 30ba585f2..7e4cb5b48 100644
--- a/src/components/loginHeader/view/loginHeaderStyles.js
+++ b/src/components/loginHeader/view/loginHeaderStyles.js
@@ -33,9 +33,8 @@ export default EStyleSheet.create({
   mascot: {
     position: 'absolute',
     width: 160,
-
     height: 227,
-    marginTop: 10,
+    marginTop: 40,
     right: -20,
   },
   titleText: {
diff --git a/src/components/markdownEditor/view/formats/applyWebLinkFormat.js b/src/components/markdownEditor/view/formats/applyWebLinkFormat.js
index 83fb15332..801a5cbc7 100644
--- a/src/components/markdownEditor/view/formats/applyWebLinkFormat.js
+++ b/src/components/markdownEditor/view/formats/applyWebLinkFormat.js
@@ -19,7 +19,7 @@ export default ({
       newText = replaceBetween(text, selection, `${imagePrefix}[${itemText}](${selectedText})`);
       newSelection = {
         start: selection.start + 1,
-        end: selection.start + 1 + itemText.length,
+        end: selection.start + 1 + itemText && itemText.length,
       };
     } else {
       newText = replaceBetween(text, selection, `${imagePrefix}[${selectedText}](${itemUrl})`);
@@ -32,7 +32,7 @@ export default ({
     newText = replaceBetween(text, selection, `${imagePrefix}[${itemText}](${itemUrl})`);
     newSelection = {
       start: selection.start + 1,
-      end: selection.start + 1 + itemText.length,
+      end: selection.start + 1 + itemText && itemText.length,
     };
   }
   setState({ text: newText }, () => {
diff --git a/src/components/notification/view/notificationView.js b/src/components/notification/view/notificationView.js
index 2bdff3016..2917e668e 100644
--- a/src/components/notification/view/notificationView.js
+++ b/src/components/notification/view/notificationView.js
@@ -75,7 +75,7 @@ class NotificationView extends PureComponent {
     return (
       <View style={styles.container}>
         <FilterBar
-          dropdownIconName="md-arrow-dropdown"
+          dropdownIconName="arrow-drop-down"
           options={filters.map(item => item.value)}
           defaultText="ALL ACTIVITIES"
           onDropdownSelect={this._handleOnDropdownSelect}
diff --git a/src/components/notificationLine/view/notificationLineStyles.js b/src/components/notificationLine/view/notificationLineStyles.js
index 3c5a401e9..a754be87e 100644
--- a/src/components/notificationLine/view/notificationLineStyles.js
+++ b/src/components/notificationLine/view/notificationLineStyles.js
@@ -48,8 +48,8 @@ export default EStyleSheet.create({
   },
   isNewNotification: {
     backgroundColor: '$primaryLightBlue',
-    borderTopWidth: 0.3,
-    borderBottomWidth: 0.3,
+    borderBottomWidth: 0.5,
+    borderBottomColor: '$notificationBorder',
   },
   hasNoAvatar: {
     backgroundColor: '#d8d8d8',
diff --git a/src/components/notificationLine/view/notificationLineView.js b/src/components/notificationLine/view/notificationLineView.js
index 2c55100bd..231845cda 100644
--- a/src/components/notificationLine/view/notificationLineView.js
+++ b/src/components/notificationLine/view/notificationLineView.js
@@ -3,7 +3,7 @@ import {
   View, Text, Image, TouchableHighlight,
 } from 'react-native';
 import { injectIntl } from 'react-intl';
-
+import FastImage from 'react-native-fast-image';
 // Constants
 
 // Components
@@ -14,9 +14,9 @@ import styles from './notificationLineStyles';
 
 class NotificationLineView extends PureComponent {
   /* Props
-    * ------------------------------------------------
-    *   @prop { type }    name                - Description....
-    */
+   * ------------------------------------------------
+   *   @prop { type }    name                - Description....
+   */
 
   constructor(props) {
     super(props);
@@ -40,7 +40,7 @@ class NotificationLineView extends PureComponent {
           key={Math.random()}
           style={[styles.notificationWrapper, !notification.read && styles.isNewNotification]}
         >
-          <Image
+          <FastImage
             style={[styles.avatar, !notification.avatar && styles.hasNoAvatar]}
             source={{
               uri: `https://steemitimages.com/u/${notification.source}/avatar/small`,
diff --git a/src/components/postCard/view/postCardStyles.js b/src/components/postCard/view/postCardStyles.js
index 17c930849..9d190da05 100644
--- a/src/components/postCard/view/postCardStyles.js
+++ b/src/components/postCard/view/postCardStyles.js
@@ -2,14 +2,16 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
   post: {
-    shadowColor: '$white',
     padding: 0,
     marginRight: 0,
     marginLeft: 0,
-    marginTop: 10,
-    marginBottom: 0,
+    marginTop: 5,
+    marginBottom: 10,
     borderRadius: 5,
     backgroundColor: '$primaryBackgroundColor',
+    shadowOpacity: 0.2,
+    shadowColor: '$shadowColor',
+    elevation: 3,
   },
   avatar: {
     width: 30,
@@ -161,15 +163,13 @@ export default EStyleSheet.create({
     backgroundColor: '$primaryBackgroundColor',
   },
   title: {
-    fontSize: 14,
+    fontSize: 16,
     fontWeight: 'bold',
     marginVertical: 12,
     color: '$primaryBlack',
   },
   summary: {
-    fontSize: 12,
-    fontWeight: '200',
-    overflow: 'hidden',
+    fontSize: 13,
     color: '$primaryDarkGray',
   },
   bodyFooter: {
@@ -181,6 +181,7 @@ export default EStyleSheet.create({
   bodyHeader: {
     backgroundColor: '$primaryBackgroundColor',
     flexDirection: 'row',
+    marginTop: 16,
     marginHorizontal: 12,
     marginBottom: 12,
   },
diff --git a/src/components/postCard/view/postCardView.js b/src/components/postCard/view/postCardView.js
index 3da2f4fce..44f4cdae3 100644
--- a/src/components/postCard/view/postCardView.js
+++ b/src/components/postCard/view/postCardView.js
@@ -4,7 +4,6 @@ import FastImage from 'react-native-fast-image';
 import { PostHeaderDescription } from '../../postElements';
 import { PostDropdown } from '../../postDropdown';
 import { Icon } from '../../icon';
-import { LineBreak } from '../../basicUIElements';
 
 // STEEM
 import { Upvote } from '../../upvote';
@@ -112,7 +111,6 @@ class PostCard extends Component {
             <Text style={styles.comment}>{content.children}</Text>
           </TouchableOpacity>
         </View>
-        <LineBreak height={8} />
       </View>
     );
   }
diff --git a/src/components/postDropdown/container/postDropdownContainer.js b/src/components/postDropdown/container/postDropdownContainer.js
index 3eb81488a..df081a047 100644
--- a/src/components/postDropdown/container/postDropdownContainer.js
+++ b/src/components/postDropdown/container/postDropdownContainer.js
@@ -96,7 +96,6 @@ class PostDropdownContainer extends PureComponent {
 }
 
 const mapStateToProps = state => ({
-  selectedApi: state.application.api,
   isLoggedIn: state.application.isLoggedIn,
   currentAccount: state.account.currentAccount,
 });
diff --git a/src/components/postDropdown/view/postDropdownStyles.js b/src/components/postDropdown/view/postDropdownStyles.js
new file mode 100644
index 000000000..89045fbff
--- /dev/null
+++ b/src/components/postDropdown/view/postDropdownStyles.js
@@ -0,0 +1,8 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  icon: {
+    color: '$iconColor',
+    marginRight: 2.7,
+  },
+});
diff --git a/src/components/postDropdown/view/postDropdownView.js b/src/components/postDropdown/view/postDropdownView.js
index 4f963d932..da1131a86 100644
--- a/src/components/postDropdown/view/postDropdownView.js
+++ b/src/components/postDropdown/view/postDropdownView.js
@@ -3,6 +3,7 @@ import React, { PureComponent } from 'react';
 // Constants
 // Components
 import { DropdownButton } from '../../dropdownButton';
+import styles from './postDropdownStyles';
 
 class PostDropdownView extends PureComponent {
   /* Props
@@ -25,11 +26,11 @@ class PostDropdownView extends PureComponent {
     return (
       <DropdownButton
         isHasChildIcon
-        iconName="md-more"
-        // options={['BOOKMARK', 'REBLOG', 'REPLY']}
+        iconName="more-vert"
         options={options}
         onSelect={handleOnDropdownSelect}
         noHighlight
+        iconStyle={styles.icon}
       />
     );
   }
diff --git a/src/components/postElements/headerDescription/view/postHeaderDescriptionStyles.js b/src/components/postElements/headerDescription/view/postHeaderDescriptionStyles.js
index bf9f9a1f7..7148bb897 100644
--- a/src/components/postElements/headerDescription/view/postHeaderDescriptionStyles.js
+++ b/src/components/postElements/headerDescription/view/postHeaderDescriptionStyles.js
@@ -8,17 +8,18 @@ export default EStyleSheet.create({
   avatar: {
     borderColor: '$borderColor',
     borderWidth: 1,
+    marginRight: 5,
   },
   name: {
     marginHorizontal: 3,
-    fontSize: 10,
+    fontSize: 11,
     color: '$primaryBlack',
     fontFamily: '$primaryFont',
     fontWeight: 'bold',
     alignSelf: 'center',
   },
   reputation: {
-    fontSize: 10,
+    fontSize: 11,
     color: '$primaryDarkGray',
     marginRight: 8,
     alignSelf: 'center',
diff --git a/src/components/posts/view/postsStyles.js b/src/components/posts/view/postsStyles.js
index f68093739..1d1f9a70f 100644
--- a/src/components/posts/view/postsStyles.js
+++ b/src/components/posts/view/postsStyles.js
@@ -1,7 +1,9 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
-  container: {},
+  container: {
+    backgroundColor: '$primaryLightBackground',
+  },
   placeholder: {
     backgroundColor: '$primaryBackgroundColor',
     padding: 20,
diff --git a/src/components/posts/view/postsView.js b/src/components/posts/view/postsView.js
index 002ccab73..7d54217be 100644
--- a/src/components/posts/view/postsView.js
+++ b/src/components/posts/view/postsView.js
@@ -178,10 +178,10 @@ class PostsView extends Component {
     } = this.props;
 
     return (
-      <Fragment>
+      <View style={styles.container}>
         {filterOptions && (
           <FilterBar
-            dropdownIconName="md-arrow-dropdown"
+            dropdownIconName="arrow-drop-down"
             options={filterOptions}
             selectedOptionIndex={0}
             defaultText={filterOptions[0]}
@@ -237,7 +237,7 @@ class PostsView extends Component {
             <PostCardPlaceHolder />
           </Fragment>
         )}
-      </Fragment>
+      </View>
     );
   }
 }
diff --git a/src/components/tabBar/view/tabBarStyles.js b/src/components/tabBar/view/tabBarStyles.js
index 3fa0801e9..62b5f9ff7 100644
--- a/src/components/tabBar/view/tabBarStyles.js
+++ b/src/components/tabBar/view/tabBarStyles.js
@@ -19,4 +19,9 @@ export default EStyleSheet.create({
   tabButton: {
     flex: 1,
   },
+  text: {
+    fontSize: 16,
+    fontFamily: '$primaryFont',
+    marginBottom: 12,
+  },
 });
diff --git a/src/components/tabBar/view/tabBarView.js b/src/components/tabBar/view/tabBarView.js
index a96108379..ff1d62294 100644
--- a/src/components/tabBar/view/tabBarView.js
+++ b/src/components/tabBar/view/tabBarView.js
@@ -15,18 +15,18 @@ import styles from './tabBarStyles';
 
 class TabBar extends PureComponent {
   /* Props
-    * ------------------------------------------------ TODO: Fill fallowlines
-    *   @prop { type }    name            - Description.
-    *   @prop { type }    name            - Description.
-    *
-    */
+   * ------------------------------------------------ TODO: Fill fallowlines
+   *   @prop { type }    name            - Description.
+   *   @prop { type }    name            - Description.
+   *
+   */
 
   constructor(props) {
     super(props);
 
     this.state = {
-      activeColor: !props.isDarkTheme ? '#357ce6' : '#357ce6',
-      inactiveColor: !props.isDarkTheme ? '#788187' : '#eaf2fc',
+      activeColor: !props.isDarkTheme ? '#357ce6' : '#96c0ff',
+      inactiveColor: !props.isDarkTheme ? '#788187' : '#526d91',
     };
   }
 
@@ -47,7 +47,7 @@ class TabBar extends PureComponent {
         onPress={() => onPressHandler(page)}
       >
         <View style={styles.tab}>
-          <Text style={[{ color: textColor, fontWeight }]}>{name}</Text>
+          <Text style={[{ color: textColor, fontWeight }, styles.text]}>{name}</Text>
         </View>
       </Button>
     );
diff --git a/src/components/transaction/view/transactionView.js b/src/components/transaction/view/transactionView.js
index 949936e94..7b903be06 100644
--- a/src/components/transaction/view/transactionView.js
+++ b/src/components/transaction/view/transactionView.js
@@ -37,7 +37,7 @@ class TransactionView extends PureComponent {
       <Fragment>
         {/* this feature not implemented yet */}
         {/* <FilterBar
-          dropdownIconName="md-arrow-dropdown"
+          dropdownIconName="arrow-drop-down"
           options={['ALL TRANSACTIONS', 'VOTES', 'REPLIES']}
           defaultText="ALL TRANSACTIONS"
           onDropdownSelect={() => this._handleOnDropdownSelect()}
diff --git a/src/navigation/baseNavigator.js b/src/navigation/baseNavigator.js
index 921c773d9..82b3731d7 100644
--- a/src/navigation/baseNavigator.js
+++ b/src/navigation/baseNavigator.js
@@ -19,11 +19,11 @@ const BaseNavigator = createBottomTabNavigator(
       navigationOptions: () => ({
         tabBarIcon: ({ tintColor }) => (
           <Icon
-            iconType="FontAwesome"
-            style={{ padding: 20 }}
-            name="list"
+            iconType="MaterialIcons"
+            style={{ padding: 15 }}
+            name="menu"
             color={tintColor}
-            size={20}
+            size={26}
           />
         ),
       }),
@@ -35,11 +35,11 @@ const BaseNavigator = createBottomTabNavigator(
           <IconContainer
             isBadge
             badgeType="notification"
-            iconType="FontAwesome"
-            name="bell-o"
+            iconType="MaterialIcons"
+            name="notifications"
             color={tintColor}
-            size={20}
-            style={{ padding: 20 }}
+            size={26}
+            style={{ padding: 15 }}
           />
         ),
       }),
@@ -55,11 +55,11 @@ const BaseNavigator = createBottomTabNavigator(
       navigationOptions: () => ({
         tabBarIcon: ({ tintColor }) => (
           <Icon
-            iconType="FontAwesome"
-            style={{ padding: 20 }}
-            name="envelope-o"
+            iconType="MaterialIcons"
+            style={{ padding: 15 }}
+            name="mail-outline"
             color={tintColor}
-            size={20}
+            size={26}
           />
         ),
       }),
@@ -69,11 +69,11 @@ const BaseNavigator = createBottomTabNavigator(
       navigationOptions: () => ({
         tabBarIcon: ({ tintColor }) => (
           <Icon
-            iconType="FontAwesome"
-            style={{ padding: 20 }}
+            iconType="MaterialIcons"
+            style={{ padding: 15 }}
             name="credit-card"
             color={tintColor}
-            size={20}
+            size={26}
           />
         ),
       }),
diff --git a/src/screens/home/screen/homeScreen.js b/src/screens/home/screen/homeScreen.js
index 96018f6c1..b60c65a94 100644
--- a/src/screens/home/screen/homeScreen.js
+++ b/src/screens/home/screen/homeScreen.js
@@ -23,7 +23,7 @@ class HomeScreen extends PureComponent {
       currentAccount, intl, isLoggedIn, isLoginDone,
     } = this.props;
     const _filterOptions = [
-      'FEED',
+      'NEW POSTS',
       'TRENDING',
       'HOT',
       'NEW',
diff --git a/src/screens/home/screen/homeStyles.js b/src/screens/home/screen/homeStyles.js
index 7159b8989..b2256c5fa 100644
--- a/src/screens/home/screen/homeStyles.js
+++ b/src/screens/home/screen/homeStyles.js
@@ -19,6 +19,10 @@ export default EStyleSheet.create({
     alignSelf: 'center',
     height: 40,
     backgroundColor: '$primaryBackgroundColor',
+    shadowOpacity: 0.2,
+    shadowColor: '$shadowColor',
+    shadowOffset: { height: 4 },
+    zIndex: 99,
   },
   tabbarItem: {
     flex: 1,
diff --git a/src/screens/login/screen/loginScreen.js b/src/screens/login/screen/loginScreen.js
index 36d33d028..dcb663b80 100644
--- a/src/screens/login/screen/loginScreen.js
+++ b/src/screens/login/screen/loginScreen.js
@@ -24,7 +24,6 @@ import { MainButton } from '../../../components/mainButton';
 import { Modal } from '../../../components';
 import { TabBar } from '../../../components/tabBar';
 import { TextButton } from '../../../components/buttons';
-import STEEM_CONNECT_LOGO from '../../../assets/steem_connect.png';
 import SteemConnect from '../../steem-connect/steemConnect';
 
 // Constants
@@ -32,6 +31,7 @@ import { default as ROUTES } from '../../../constants/routeNames';
 
 // Styles
 import styles from './loginStyles';
+import STEEM_CONNECT_LOGO from '../../../assets/steem_connect.png';
 
 class LoginScreen extends PureComponent {
   constructor(props) {
@@ -87,16 +87,20 @@ class LoginScreen extends PureComponent {
     Linking.openURL('https://signup.steemit.com/?ref=esteem').catch(err => alert('An error occurred', err));
   };
 
-
   _handleOnModalToggle = () => {
     const { isModalOpen } = this.state;
     this.setState({ isModalOpen: !isModalOpen });
-  }
+  };
 
   render() {
     const { navigation, intl, setPinCodeState } = this.props;
     const {
-      isLoading, username, isUsernameValid, keyboardIsOpen, password, isModalOpen,
+      isLoading,
+      username,
+      isUsernameValid,
+      keyboardIsOpen,
+      password,
+      isModalOpen,
     } = this.state;
 
     return (
@@ -141,8 +145,9 @@ class LoginScreen extends PureComponent {
               contentContainerStyle={{ flexGrow: 1 }}
             >
               <FormInput
-                rightIconName="md-at"
-                leftIconName="md-close-circle"
+                rightIconName="at"
+                leftIconName="close"
+                iconType="MaterialCommunityIcons"
                 isValid={isUsernameValid}
                 onChange={value => this._handleUsernameChange(value)}
                 placeholder={intl.formatMessage({
@@ -154,8 +159,8 @@ class LoginScreen extends PureComponent {
                 value={username}
               />
               <FormInput
-                rightIconName="md-lock"
-                leftIconName="md-close-circle"
+                rightIconName="lock"
+                leftIconName="close"
                 isValid={isUsernameValid}
                 onChange={value => this._handleOnPasswordChange(value)}
                 placeholder={intl.formatMessage({
@@ -217,7 +222,10 @@ class LoginScreen extends PureComponent {
           handleOnModalClose={this._handleOnModalToggle}
           title="Steemconnect Login"
         >
-          <SteemConnect handleOnModalClose={this._handleOnModalToggle} setPinCodeState={setPinCodeState} />
+          <SteemConnect
+            handleOnModalClose={this._handleOnModalToggle}
+            setPinCodeState={setPinCodeState}
+          />
         </Modal>
       </View>
     );
diff --git a/src/screens/voters/screen/votersScreen.js b/src/screens/voters/screen/votersScreen.js
index 19ec70988..5f6a91b99 100644
--- a/src/screens/voters/screen/votersScreen.js
+++ b/src/screens/voters/screen/votersScreen.js
@@ -82,7 +82,7 @@ class VotersScreen extends PureComponent {
           handleOnSearch={this._handleSearch}
         />
         <FilterBar
-          dropdownIconName="md-arrow-dropdown"
+          dropdownIconName="arrow-drop-down"
           options={['REWARDS', 'PERCENT', 'TIME']}
           defaultText="REWARDS"
           onDropdownSelect={this._handleOnDropdownSelect}
diff --git a/src/themes/darkTheme.js b/src/themes/darkTheme.js
index 5e7683bc3..63f81f612 100644
--- a/src/themes/darkTheme.js
+++ b/src/themes/darkTheme.js
@@ -16,20 +16,24 @@ export default {
   $primaryLightGray: '#f6f6f6',
   $primaryRed: '#e63535',
   $primaryBlack: '#c1c5c7',
+  $primaryDarkText: '#526d91',
 
   // General Colors
   $borderColor: '#c5c5c5',
+  $tagColor: '#2e3d51',
   $bubblesBlue: '#5CCDFF',
   $borderTopColor: '#757575',
-  $iconColor: '#c1c5c7',
+  $iconColor: '#788187',
   $dangerColor: '#fff',
   $warningColor: '#fff',
   $successColor: '#fff',
   $disableButton: '#fff',
-  $shadowColor: '#b0b0b0',
+  $shadowColor: '#80000000',
   $disableGray: '#fff',
   $editorButtonColor: '#fff',
   $pureWhite: '#ffffff',
+  $notificationBorder: '#1e2835',
+
   // Devices Sizes
   $deviceHeight: Dimensions.get('window').height,
   $deviceWidth: Dimensions.get('window').width,
diff --git a/src/themes/lightTheme.js b/src/themes/lightTheme.js
index a0700434a..f2e91fdaf 100644
--- a/src/themes/lightTheme.js
+++ b/src/themes/lightTheme.js
@@ -16,9 +16,10 @@ export default {
   $primaryLightGray: '#f6f6f6',
   $primaryRed: '#e63535',
   $primaryBlack: '#3c4449',
-
+  $primaryDarkText: '#788187',
   // General Colors
   $borderColor: '#c5c5c5',
+  $tagColor: '#c1c5c7',
   $bubblesBlue: '#5CCDFF',
   $iconColor: '#c1c5c7',
   $borderTopColor: '#cfcfcf',
@@ -30,6 +31,7 @@ export default {
   $disableGray: '#fff',
   $editorButtonColor: '#3c4449',
   $pureWhite: '#ffffff',
+  $notificationBorder: '#fff',
 
   // Devices Sizes
   $deviceHeight: Dimensions.get('window').height,
diff --git a/src/utils/postParser.js b/src/utils/postParser.js
index 19b6459bf..c1871aae6 100644
--- a/src/utils/postParser.js
+++ b/src/utils/postParser.js
@@ -19,7 +19,7 @@ export const parsePost = (post, currentUserName) => {
   post.author_reputation = getReputation(post.author_reputation);
   post.avatar = `https://steemitimages.com/u/${post.author}/avatar/small`;
   post.body = markDown2Html(post.body);
-  post.summary = getPostSummary(post.body, 100);
+  post.summary = getPostSummary(post.body, 150);
   post.raw_body = post.body;
   post.active_votes.sort((a, b) => b.rshares - a.rshares);
   const totalPayout = parseFloat(post.pending_payout_value)