diff --git a/java/com/android/dialer/main/impl/bottomnav/BottomNavItem.java b/java/com/android/dialer/main/impl/bottomnav/BottomNavItem.java
index 48cfc81..4794b88 100644
--- a/java/com/android/dialer/main/impl/bottomnav/BottomNavItem.java
+++ b/java/com/android/dialer/main/impl/bottomnav/BottomNavItem.java
@@ -20,18 +20,20 @@
 import android.content.res.ColorStateList;
 import android.support.annotation.DrawableRes;
 import android.support.annotation.Nullable;
+import android.support.annotation.Px;
 import android.support.annotation.StringRes;
 import android.util.AttributeSet;
 import android.view.View;
+import android.widget.FrameLayout;
 import android.widget.ImageView;
-import android.widget.RelativeLayout;
+import android.widget.LinearLayout;
 import android.widget.TextView;
 import com.android.dialer.common.Assert;
 import com.android.dialer.configprovider.ConfigProviderComponent;
 import com.android.dialer.theme.base.ThemeComponent;
 
 /** Navigation item in a bottom nav. */
-final class BottomNavItem extends RelativeLayout {
+final class BottomNavItem extends LinearLayout {
 
   private ImageView image;
   private TextView text;
@@ -55,7 +57,7 @@
     int colorId =
         selected
             ? ThemeComponent.get(getContext()).theme().getColorPrimary()
-            : ThemeComponent.get(getContext()).theme().getColorIcon();
+            : ThemeComponent.get(getContext()).theme().getTextColorSecondary();
     image.setImageTintList(ColorStateList.valueOf(colorId));
     text.setTextColor(colorId);
   }
@@ -85,6 +87,20 @@
       }
       notificationBadge.setVisibility(View.VISIBLE);
       notificationBadge.setText(countString);
+
+      @Px int margin;
+      if (countString.length() == 1) {
+        margin = getContext().getResources().getDimensionPixelSize(R.dimen.badge_margin_length_1);
+      } else if (countString.length() == 2) {
+        margin = getContext().getResources().getDimensionPixelSize(R.dimen.badge_margin_length_2);
+      } else {
+        margin = getContext().getResources().getDimensionPixelSize(R.dimen.badge_margin_length_3);
+      }
+
+      FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) image.getLayoutParams();
+      params.setMarginStart(margin);
+      params.setMarginEnd(margin);
+      image.setLayoutParams(params);
     }
   }
 }
diff --git a/java/com/android/dialer/main/impl/bottomnav/res/drawable/notification_badge.xml b/java/com/android/dialer/main/impl/bottomnav/res/drawable/notification_badge.xml
index e02d7c4..65bc8f9 100644
--- a/java/com/android/dialer/main/impl/bottomnav/res/drawable/notification_badge.xml
+++ b/java/com/android/dialer/main/impl/bottomnav/res/drawable/notification_badge.xml
@@ -16,6 +16,8 @@
   -->
 <shape
     xmlns:android="http://schemas.android.com/apk/res/android"
-    android:shape="oval">
-  <solid android:color="@color/dialer_red"/>
+    android:shape="rectangle">
+  <solid android:color="?android:attr/colorPrimary"/>
+  <corners android:radius="20dp"/>
+  <stroke android:color="?android:attr/colorBackgroundFloating" android:width="2dp"/>
 </shape>
\ No newline at end of file
diff --git a/java/com/android/dialer/main/impl/bottomnav/res/layout/bottom_nav_item.xml b/java/com/android/dialer/main/impl/bottomnav/res/layout/bottom_nav_item.xml
index 8c0705f..02874a9 100644
--- a/java/com/android/dialer/main/impl/bottomnav/res/layout/bottom_nav_item.xml
+++ b/java/com/android/dialer/main/impl/bottomnav/res/layout/bottom_nav_item.xml
@@ -16,41 +16,49 @@
   -->
 <com.android.dialer.main.impl.bottomnav.BottomNavItem
     xmlns:android="http://schemas.android.com/apk/res/android"
+    android:orientation="vertical"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
-    android:background="?android:attr/selectableItemBackgroundBorderless"
+    android:minWidth="80dp"
     android:minHeight="56dp"
-    android:minWidth="80dp">
+    android:gravity="center"
+    android:background="?android:attr/selectableItemBackgroundBorderless">
 
-  <ImageView
-      android:id="@+id/bottom_nav_item_image"
-      android:layout_width="24dp"
-      android:layout_height="24dp"
-      android:layout_marginTop="8dp"
-      android:layout_alignParentTop="true"
-      android:layout_centerHorizontal="true"/>
+  <FrameLayout
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content">
 
-  <TextView
-      android:id="@+id/notification_badge"
-      style="@style/Dialer.TextAppearance.OVERLINE"
-      android:layout_width="16dp"
-      android:layout_height="16dp"
-      android:layout_marginTop="2dp"
-      android:layout_marginStart="-8dp"
-      android:layout_alignParentTop="true"
-      android:layout_toEndOf="@id/bottom_nav_item_image"
-      android:background="@drawable/notification_badge"
-      android:gravity="center"
-      android:textColor="?android:attr/colorBackgroundFloating"
-      android:textSize="11dp"
-      android:visibility="invisible"/>
+    <ImageView
+        android:id="@+id/bottom_nav_item_image"
+        android:layout_width="24dp"
+        android:layout_height="24dp"
+        android:layout_marginTop="8dp"/>
+
+    <TextView
+        android:id="@+id/notification_badge"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="top|end"
+        android:layout_marginTop="2dp"
+        android:paddingStart="6dp"
+        android:paddingEnd="6dp"
+        android:paddingBottom="1dp"
+        android:minHeight="20dp"
+        android:minWidth="20dp"
+        android:gravity="center"
+        android:textSize="12sp"
+        android:textColor="?android:attr/textColorPrimaryInverse"
+        android:background="@drawable/notification_badge"
+        android:fontFamily="sans-serif-medium"
+        android:visibility="invisible"/>
+  </FrameLayout>
+
   <TextView
       android:id="@+id/bottom_nav_item_text"
-      style="@style/Dialer.TextAppearance.SubHeader2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginBottom="8dp"
-      android:layout_below="@id/bottom_nav_item_image"
-      android:layout_centerHorizontal="true"
-      android:gravity="center_horizontal"/>
+      android:gravity="center_horizontal"
+      android:textSize="12sp"
+      style="@style/Dialer.TextAppearance.Secondary"/>
 </com.android.dialer.main.impl.bottomnav.BottomNavItem>
\ No newline at end of file
diff --git a/java/com/android/dialer/main/impl/bottomnav/res/values/dimens.xml b/java/com/android/dialer/main/impl/bottomnav/res/values/dimens.xml
new file mode 100644
index 0000000..8fd376b
--- /dev/null
+++ b/java/com/android/dialer/main/impl/bottomnav/res/values/dimens.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (C) 2018 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License
+  -->
+<resources>
+  <dimen name="badge_margin_length_1">10dp</dimen>
+  <dimen name="badge_margin_length_2">14dp</dimen>
+  <dimen name="badge_margin_length_3">22dp</dimen>
+</resources>
\ No newline at end of file
diff --git a/java/com/android/dialer/theme/common/res/values/colors.xml b/java/com/android/dialer/theme/common/res/values/colors.xml
index 0af550f..207d29c 100644
--- a/java/com/android/dialer/theme/common/res/values/colors.xml
+++ b/java/com/android/dialer/theme/common/res/values/colors.xml
@@ -27,7 +27,7 @@
   <color name="notification_action_dismiss">#A52714</color>
   <color name="notification_action_answer_video">#097138</color>
 
-  <color name="dialer_red">#EA4335</color>
+  <color name="dialer_red">#C53929</color>
 
   <!-- Legacy -->
   <color name="blue_grey_100">#CFD8DC</color>
diff --git a/java/com/android/dialer/theme/common/res/values/text_styles.xml b/java/com/android/dialer/theme/common/res/values/text_styles.xml
index 1f2d6c7..df5dafa 100644
--- a/java/com/android/dialer/theme/common/res/values/text_styles.xml
+++ b/java/com/android/dialer/theme/common/res/values/text_styles.xml
@@ -37,12 +37,6 @@
     <item name="android:fontFamily">sans-serif-medium</item>
   </style>
 
-  <style name="Dialer.TextAppearance.SubHeader2" parent="TextAppearance.AppCompat">
-    <item name="android:textColor">?android:attr/textColorSecondary</item>
-    <item name="android:textSize">14sp</item>
-    <item name="android:fontFamily">sans-serif-medium</item>
-  </style>
-
   <style name="Dialer.TextAppearance.Primary" parent="TextAppearance.AppCompat">
     <item name="android:textColor">?android:attr/textColorPrimary</item>
     <item name="android:textSize">16sp</item>