diff --git a/src/components/Main.tsx b/src/components/Main.tsx
index e298b4bb9c3..3786f374aa5 100644
--- a/src/components/Main.tsx
+++ b/src/components/Main.tsx
@@ -33,6 +33,8 @@ import { ChangeMiningFeeScene } from './scenes/ChangeMiningFeeScene'
 import { ChangeMiningFeeScene2 } from './scenes/ChangeMiningFeeScene2'
 import { ChangePasswordScene } from './scenes/ChangePasswordScene'
 import { ChangePinScene } from './scenes/ChangePinScene'
+import { CoinRankingDetailsScene } from './scenes/CoinRankingDetailsScene'
+import { CoinRankingScene } from './scenes/CoinRankingScene'
 import { CreateWalletAccountSelectScene } from './scenes/CreateWalletAccountSelectScene'
 import { CreateWalletAccountSetupScene } from './scenes/CreateWalletAccountSetupScene'
 import { CreateWalletCompletionScene } from './scenes/CreateWalletCompletionScene'
@@ -641,6 +643,13 @@ const EdgeAppStack = () => {
         }}
       />
       <Stack.Screen name="loanStatus" component={ifLoggedIn(LoanStatusScene)} />
+      <Stack.Screen
+        name="coinRankingDetails"
+        component={ifLoggedIn(CoinRankingDetailsScene)}
+        options={{
+          headerTitle: () => <EdgeLogoHeader />
+        }}
+      />
     </Stack.Navigator>
   )
 }
@@ -688,6 +697,13 @@ const EdgeTabs = () => {
           focus: () => dispatch(checkEnabledExchanges())
         }}
       />
+      <Tab.Screen
+        name="coinRanking"
+        component={ifLoggedIn(CoinRankingScene)}
+        listeners={{
+          focus: () => dispatch(checkEnabledExchanges())
+        }}
+      />
       <Tab.Screen name="extraTab" component={ifLoggedIn(ExtraTabScene)} />
     </Tab.Navigator>
   )
diff --git a/src/components/data/row/CoinRankRow.tsx b/src/components/data/row/CoinRankRow.tsx
index dd802b21893..10e5ecb7348 100644
--- a/src/components/data/row/CoinRankRow.tsx
+++ b/src/components/data/row/CoinRankRow.tsx
@@ -137,23 +137,21 @@ const CoinRankRowComponent = (props: Props) => {
   return (
     <TouchableOpacity style={styles.container} onPress={handlePress}>
       <View style={styles.rank}>
-        <EdgeText>{rank}</EdgeText>
+        <EdgeText numberOfLines={1} disableFontScaling>
+          {rank}
+        </EdgeText>
       </View>
       <View style={styles.iconRowDataContainer}>
         <FastImage style={styles.icon} source={imageUrlObject} />
         <View style={styles.leftColumn}>
-          <View style={styles.row}>
-            <EdgeText style={styles.currencyCode}>{currencyCode.toUpperCase()}</EdgeText>
-            <EdgeText style={priceStyle}>{percentString}</EdgeText>
-          </View>
+          <EdgeText style={styles.currencyCode}>{currencyCode.toUpperCase()}</EdgeText>
           <EdgeText style={styles.assetSubText}>{assetSubTextString}</EdgeText>
         </View>
+        <View style={styles.middleColumn}>
+          <EdgeText style={priceStyle}>{percentString}</EdgeText>
+        </View>
         <View style={styles.rightColumn}>
           <EdgeText style={priceStyle}>{priceString}</EdgeText>
-          <View style={styles.row}>
-            {/* This is needed to add proper amount of vertical spacing  */}
-            <EdgeText style={styles.invisibleText}>INVIS_TEXT</EdgeText>
-          </View>
         </View>
       </View>
     </TouchableOpacity>
@@ -167,21 +165,22 @@ const getStyles = cacheStyles((theme: Theme) => ({
     flexDirection: 'row'
   },
   iconRowDataContainer: {
-    paddingLeft: theme.rem(0),
-    paddingRight: theme.rem(0),
+    padding: theme.rem(0.75),
+    paddingLeft: theme.rem(0.25),
     flex: 1,
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'center',
-    margin: theme.rem(0.75)
+    margin: theme.rem(0)
   },
   currencyCode: {
     width: theme.rem(5)
   },
   rank: {
+    alignItems: 'flex-start',
     justifyContent: 'center',
-    width: theme.rem(2),
-    paddingLeft: theme.rem(1)
+    marginLeft: theme.rem(1),
+    width: theme.rem(2.5)
   },
   icon: {
     width: theme.rem(1.5),
@@ -200,14 +199,21 @@ const getStyles = cacheStyles((theme: Theme) => ({
   },
   rightColumn: {
     alignItems: 'flex-end',
+    justifyContent: 'center',
+    flexDirection: 'row'
+  },
+  middleColumn: {
+    flexGrow: 1,
+    flexShrink: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
     flexDirection: 'column'
   },
   leftColumn: {
     flexDirection: 'column',
-    flexGrow: 1,
     flexShrink: 1,
-    marginRight: theme.rem(0.25),
-    marginLeft: theme.rem(1)
+    marginLeft: theme.rem(1),
+    width: theme.rem(4.5)
   },
   row: {
     flexDirection: 'row',
@@ -217,10 +223,6 @@ const getStyles = cacheStyles((theme: Theme) => ({
   assetSubText: {
     fontSize: theme.rem(0.75),
     color: theme.secondaryText
-  },
-  invisibleText: {
-    fontSize: theme.rem(0.75),
-    color: '#0000'
   }
 }))
 
diff --git a/src/components/scenes/CoinRankingDetailsScene.tsx b/src/components/scenes/CoinRankingDetailsScene.tsx
index be79cd5bb3b..5378318d046 100644
--- a/src/components/scenes/CoinRankingDetailsScene.tsx
+++ b/src/components/scenes/CoinRankingDetailsScene.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import { ScrollView, View } from 'react-native'
 import FastImage from 'react-native-fast-image'
 
+import { USD_FIAT } from '../../constants/WalletAndCurrencyConstants'
 import { formatFiatString } from '../../hooks/useFiatText'
 import { toLocaleDate, toPercentString } from '../../locales/intl'
 import s from '../../locales/strings'
@@ -104,7 +105,7 @@ const CoinRankingDetailsSceneComponent = (props: Props) => {
         return data == null ? 'N/A' : toPercentString(Number(data) / 100)
       case 'price':
       case 'priceChange24h':
-        return formatFiatString({ fiatAmount: baseString })
+        return `${formatFiatString({ fiatAmount: baseString })} ${USD_FIAT.replace('iso:', '')}`
       case 'rank':
         return `#${baseString}`
       case 'marketCapChange24h':
diff --git a/src/components/scenes/CoinRankingScene.tsx b/src/components/scenes/CoinRankingScene.tsx
index 7d19f68cca3..9987b38aa32 100644
--- a/src/components/scenes/CoinRankingScene.tsx
+++ b/src/components/scenes/CoinRankingScene.tsx
@@ -269,7 +269,7 @@ const getStyles = cacheStyles((theme: Theme) => {
     rankView: {
       ...baseTextView,
       justifyContent: 'center',
-      width: theme.rem(4.25)
+      width: theme.rem(5.25)
     },
     rankText: {
       ...baseTextStyle
@@ -277,7 +277,7 @@ const getStyles = cacheStyles((theme: Theme) => {
     assetView: {
       ...baseTextView,
       justifyContent: 'center',
-      width: theme.rem(5)
+      width: theme.rem(4.75)
     },
     assetText: {
       ...baseTextStyle,