diff --git a/www/js/components/BarChart.tsx b/www/js/components/BarChart.tsx
index 6da3d2a2b..764719ad6 100644
--- a/www/js/components/BarChart.tsx
+++ b/www/js/components/BarChart.tsx
@@ -20,13 +20,13 @@ Chart.register(
 );
 
 const BarChart = ({ chartData, axisTitle, lineAnnotations=null, isHorizontal=false }) => {
-
+ 
   const { colors } = useTheme();
   const [ numVisibleDatasets, setNumVisibleDatasets ] = useState(1);
 
   const barChartRef = useRef<Chart>(null);
 
-  const defaultPalette = [
+  const defaultPalette = [ 
     '#c95465', // red oklch(60% 0.15 14)
     '#4a71b1', // blue oklch(55% 0.11 260)
     '#d2824e', // orange oklch(68% 0.12 52)
diff --git a/www/js/components/MetricDetails.tsx b/www/js/components/MetricDetails.tsx
new file mode 100644
index 000000000..6a195875f
--- /dev/null
+++ b/www/js/components/MetricDetails.tsx
@@ -0,0 +1,43 @@
+
+import React, { useRef, useState } from 'react';
+import { array, string, bool } from 'prop-types';
+import { angularize } from '../angular-react-helper';
+import { View } from 'react-native';
+import { useTheme, Card } from 'react-native-paper';
+
+const MetricsDetails = ({ chartData}) => {
+ 
+  const { colors } = useTheme();
+  const [ numVisibleDatasets, setNumVisibleDatasets ] = useState(1);
+
+  const defaultPalette = [
+    '#c95465', // red oklch(60% 0.15 14)
+    '#4a71b1', // blue oklch(55% 0.11 260)
+    '#d2824e', // orange oklch(68% 0.12 52)
+    '#856b5d', // brown oklch(55% 0.04 50)
+    '#59894f', // green oklch(58% 0.1 140)
+    '#e0cc55', // yellow oklch(84% 0.14 100)
+    '#b273ac', // purple oklch(64% 0.11 330)
+    '#f09da6', // pink oklch(78% 0.1 12)
+    '#b3aca8', // grey oklch(75% 0.01 55)
+    '#80afad', // teal oklch(72% 0.05 192)
+  ]
+
+  
+
+  return (
+    <View>
+      <div>
+        25 
+        miles
+      </div>
+    </View>
+  )
+}
+
+MetricsDetails.propTypes = {
+  chartData: array,
+};
+
+angularize(MetricsDetails, 'MetricsDetails', 'emission.main.metricsdetails');
+export default MetricsDetails;
diff --git a/www/js/components/MetricsCard.tsx b/www/js/components/MetricsCard.tsx
new file mode 100644
index 000000000..ddd792235
--- /dev/null
+++ b/www/js/components/MetricsCard.tsx
@@ -0,0 +1,55 @@
+
+import React, { useState } from 'react';
+import { array, } from 'prop-types';
+import { angularize } from '../angular-react-helper';
+import { Card, IconButton, Surface} from 'react-native-paper';
+import BarChart from './BarChart';
+import MetricsDetails from './MetricDetails';
+import { StyleSheet } from 'react-native';
+
+
+const MetricsCard = ({chartData, axisTitle}) => {
+  
+  const [state, setState] = useState({detailsView : false})
+  return (
+    <Card style={{width:"90%", alignSelf:"center", height:"280px" }}>
+      <Surface style={{backgroundColor: 'rgba(0, 136, 206, 1)', height: "60px"}}>
+        <Card.Title 
+          titleStyle={{textAlign:"center", color:"white", fontSize:"20px"}}
+          title="My Distance"
+          right={state.detailsView ?
+            (()=><IconButton icon="chart-bar" mode="contained" onPress={()=> setState({detailsView : false})}/>
+            ):
+            (
+             ()=> <IconButton icon="abacus" mode="contained" onPress={()=> setState({detailsView : true})}/>
+            )}
+        />
+        </Surface>
+      
+      {state.detailsView ? (
+        <>
+          <Card.Content>
+            <MetricsDetails chartData={chartData}/>
+          </Card.Content>
+       </>
+
+      ) : (
+        <>
+          <Card.Content>
+            <BarChart chartData={chartData} axisTitle={axisTitle} isHorizontal={true}/>
+          </Card.Content>
+        </>
+      )
+      }
+      
+      
+    </Card>
+  )
+}
+
+MetricsCard.propTypes = {
+  chartData: array,
+};
+
+angularize(MetricsCard, 'MetricsCard', 'emission.main.metricscard');
+export default MetricsCard;
diff --git a/www/js/metrics.js b/www/js/metrics.js
index ef1b26891..1e65b5bdd 100644
--- a/www/js/metrics.js
+++ b/www/js/metrics.js
@@ -3,7 +3,7 @@
 import angular from 'angular';
 import 'nvd3';
 import BarChart from './components/BarChart';
-
+import MetricsCard from './components/MetricsCard';
 angular.module('emission.main.metrics',['emission.services',
                                         'ionic-datepicker',
                                         'emission.config.imperial',
@@ -12,6 +12,7 @@ angular.module('emission.main.metrics',['emission.services',
                                         'emission.stats.clientstats',
                                         'emission.plugin.kvstore',
                                         'emission.plugin.logger',
+                                        MetricsCard.module,
                                         BarChart.module])
 
 .controller('MetricsCtrl', function($scope, $ionicActionSheet, $ionicLoading,
diff --git a/www/templates/main-metrics.html b/www/templates/main-metrics.html
index 40e731d91..925f390f7 100644
--- a/www/templates/main-metrics.html
+++ b/www/templates/main-metrics.html
@@ -131,26 +131,8 @@ <h4 class="dashboard-headers" ng-i18next>{{'main-metrics.calories'}} </h4>
         </div>
         <ion-slide-box show-pager="false" id="modes">
           <ion-slide id="modes">
-            <div id="dashboard-bottom" class="card">
-              <h4 class="dashboard-headers" ng-i18next>{{'main-metrics.distance'}}</h4>
-                <div ng-if="summaryData.defaultSummary.distance.length == 0" style="margin-top: 20px;color: #008acf;font-weight: 700;" ng-i18next>{{'main-metrics.no-summary-data'}}</div>
-                <div class="row" ng-repeat="d in summaryData.defaultSummary.distance" ng-if="$index % 2 == 0" ng-init="dIndex = $index" style="padding-top: 5px !important;">
-                  <div ng-repeat="i in [0,1]" ng-if="(dIndex + i)<summaryData.defaultSummary.distance.length" class="col-50" style="margin-bottom: 10px;">
-                    
-                    <div class="metric-summary-left">
-                      <i ng-class="'icon ' + modeIcon(summaryData.defaultSummary.distance[dIndex + i].key)" style="font-size: 30px !important; color: #008acf;"></i>
-                    </div>
-                    <div class="metric-summary-right">
-                      <div class="metric-summary-title">
-                        {{ summaryData.defaultSummary.distance[dIndex + i].key }}
-                      </div>
-                      <div class="metric-summary-content">
-                        {{ formatDistance(summaryData.defaultSummary.distance[dIndex + i].values).slice(-1)[0] }}
-                      </div>
-                    </div>
-                  </div> 
-                </div>
-            </div>
+            <metrics-card chart-data="data.distance" axis-title="distanceOptions.chart.yAxis.axisLabel"></metrics-card>
+            
           </ion-slide>
           <ion-slide id="modes">
             <div id="dashboard-bottom" class="card">