diff --git a/src/screens/coinDetails/children/children.styles.ts b/src/screens/coinDetails/children/children.styles.ts
index de3dc92bd..f3355157f 100644
--- a/src/screens/coinDetails/children/children.styles.ts
+++ b/src/screens/coinDetails/children/children.styles.ts
@@ -43,5 +43,20 @@ export default EStyleSheet.create({
     color: '$primaryDarkText',
     fontSize: 14,
     marginBottom:24,
+  } as TextStyle,
+
+  rangeContainer:{
+    flexDirection:'row',
+    alignItems:'center',
+    justifyContent:'space-between',
+    borderRadius:32,
+  } as ViewStyle,
+  rangeOptionWrapper:{
+    borderRadius:32,
+    paddingVertical:16,
+    paddingHorizontal:24
+  } as ViewStyle,
+  textRange:{
+    fontSize:18,
   } as TextStyle
 });
diff --git a/src/screens/coinDetails/children/coinBasics.tsx b/src/screens/coinDetails/children/coinBasics.tsx
index 61c2c6986..9bc2d242b 100644
--- a/src/screens/coinDetails/children/coinBasics.tsx
+++ b/src/screens/coinDetails/children/coinBasics.tsx
@@ -10,7 +10,7 @@ export const CoinBasics = () => {
              <Text style={styles.textCoinTitle}>HIVE</Text>
             </View>
          
-            <Text style={styles.textHeaderChange}>Change <Text style={styles.textPositive}>+10.13</Text></Text>
+            <Text style={styles.textHeaderChange}>Change <Text style={styles.textPositive}>+10.13%</Text></Text>
         </>
     )
 
diff --git a/src/screens/coinDetails/children/rangeSelector.tsx b/src/screens/coinDetails/children/rangeSelector.tsx
index 3e8d32247..2bb2e7041 100644
--- a/src/screens/coinDetails/children/rangeSelector.tsx
+++ b/src/screens/coinDetails/children/rangeSelector.tsx
@@ -1,11 +1,72 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { View, Text } from 'react-native'
+import EStyleSheet from 'react-native-extended-stylesheet'
+import { TouchableOpacity } from 'react-native-gesture-handler'
 import styles from './children.styles'
 
+interface RangeOption {
+    label:string;
+    value:number;
+}
+
 export const RangeSelector = () => {
+
+    const [selectedRange, setSelectedRange] = useState(1);
+
+    const _onSelection = (range:number) => {
+        console.log('selection', range)
+        setSelectedRange(range);
+        //TODO: implement on range change prop
+    }
+
+    const _renderRangeButtons = FILTERS.map((item:RangeOption)=>(
+        <TouchableOpacity onPress={()=>_onSelection(item.value)} >
+            <View style={{
+                ...styles.rangeOptionWrapper, 
+                backgroundColor: EStyleSheet.value(
+                        item.value === selectedRange ? 
+                            '$primaryDarkText':'$primaryLightBackground'
+                    ) 
+                }}>
+                <Text style={{
+                     ...styles.textRange, 
+                     color: EStyleSheet.value(
+                             item.value === selectedRange ? 
+                                 '$white':'$primaryDarkText'
+                         ) 
+                     }}>
+                    {item.label}
+                </Text>
+            </View>
+        </TouchableOpacity>
+    ))
+
     return (
-        <View style={styles.card}>
-            <Text>Range Selector</Text>
+        <View style={[styles.card, styles.rangeContainer]}>
+            {_renderRangeButtons}
         </View>
     )
 }
+
+const FILTERS = [
+    {
+        label:'24H',
+        value:1
+    },
+    {
+        label:'1W',
+        value:7
+    },
+    {
+        label:'1M',
+        value:20
+    },
+    {
+        label:'1Y',
+        value:365
+    },
+    {
+        label:'All',
+        value:0
+    },
+] as RangeOption[]