rate design change

-{
-  "devToolsPort": 19002,
-  "expoServerPort": 19000,
-  "packagerPort": 19001,
-  "packagerPid": 2240,
-  "expoServerNgrokUrl": "https://bm-jd7.anonymous.searchguide.exp.direct",
-  "packagerNgrokUrl": "https://packager.bm-jd7.anonymous.searchguide.exp.direct",
-  "ngrokPid": 21352
-}

-{
-  "hostType": "lan",
-  "lanType": "ip",
-  "dev": true,
-  "minify": false,
-  "urlRandomness": "bm-jd7",
-  "https": false
-}

 import React,{ useState } from 'react';
 import { Surface, Text ,HelperText} from 'react-native-paper';
 import { StyleSheet,View } from 'react-native';
-import { StackedBarChart, PieChart  } from 'react-native-svg-charts';
+import { PieChart } from 'react-native-svg-charts';
 import PromptSearchRate from '../PromptSearch/PromptSearchRate';
 
 export default RateBar = (props) => {
@@ -50,7 +50,7 @@ export default RateBar = (props) => {
                                 key : ""
                                 }
                         ]}
-                        innerRadius={"60%"}
+                        innerRadius={"50%"}
                     />
                 </View>                
                 <View style={styles.colorContainer}>
@@ -76,10 +76,11 @@ const styles = StyleSheet.create({
         width: '100%',
         flexDirection:'row',
         justifyContent:'center',
+        marginTop : 8,
     },
     colorContainer:{
         position:"absolute",
-        right:10,
+        right:20,
     },
     colorA:{
         backgroundColor:'#e85a71',
@@ -103,8 +104,8 @@ const styles = StyleSheet.create({
         alignItems:'flex-start',
     },
     chart:{
-        height: 120, 
-        width:"90%",
+        height: 125, 
+        width:"100%",
         position:"absolute",
     },
     textContainer:{
@@ -120,9 +121,9 @@ const styles = StyleSheet.create({
         width: '100%'
     },
     surface: {
-        paddingTop: 8,
-        paddingBottom:5,
-        flex: 0.45,
+        paddingTop: 10,
+        paddingBottom:0,
+        flex: 0.55,
         width: '95%',
         flexDirection:'column',
         alignItems: "center",

@@ -15,16 +15,22 @@ const RateLine = ({load,pastRecords }) => {
         <Surface style={styles.surface}>
             {pastRecords.length ? 
             <>
-                <Text style={styles.info}>점수 변화</Text>
+                <Text style={styles.message}>당신의 점수 변화를 확인하세요!</Text>
                 <View style={styles.scoreContainer}>
                 {pastRecords.map((past,index)=> (
+                    pastRecords.length - 1 > index  ?
                     <View  key={index} style={styles.past}>
-                        <Text style={styles.score}>{past.score}</Text>
-                        <Text style={styles.date}>{past.date.substring(5,7)+'/'+past.date.substring(8,10)}</Text>
+                        <Text style={styles.date, {fontSize:11}}>{past.date.substring(5,7)+'/'+past.date.substring(8,10)}</Text>
+                        <Text style={styles.score}>{past.score}</Text>                        
                     </View>
-                ))} 
+                    :
+                    <View  key={index} style={styles.past}>
+                    <Text style={styles.date, {fontSize:15}}>{past.date.substring(5,7)+'/'+past.date.substring(8,10)}</Text>
+                    <Text style={styles.score, {fontFamily:"ExtraBold", fontSize:25, color: "#4ea1d3"}}>{past.score}</Text>                        
                 </View>
-                <Text style={styles.message}>당신의 점수 변화를 확인하세요!</Text>
+                ))} 
+                
+                </View>                
             </>
              : <PromptSearchRate />
             }
@@ -32,11 +38,11 @@ const RateLine = ({load,pastRecords }) => {
     );
 }
 const styles = StyleSheet.create({
-    surface: {
-        paddingTop: 5,
-        paddingBottom:5,
+    surface: {        
+        padding :5,
         flex: 0.3,
         width: '95%',
+        flexDirection:'column',
         alignItems: 'center',
         justifyContent: 'center',
         elevation: 2,
@@ -45,34 +51,39 @@ const styles = StyleSheet.create({
         borderRadius: 5,
     },
     info:{
-        fontSize:22,
+        fontSize:21,
         marginBottom: 10,
         fontFamily:"Bold",
     },
-    score:{
-        fontSize:20,
-        fontFamily:"Bold",
-    },
     scoreContainer:{
         flexDirection:'row',
+        alignItems : 'center',
         justifyContent: 'space-around',
         width:'100%',
         backgroundColor :'#ececf8',
+        padding : 5,
+        marginTop : 10,
+        marginBottom : 10,
+        borderRadius:5,
     },
     data:{ 
-        fontSize:10,
-        textAlign:'center',
-        fontFamily:"Regular",
+        fontFamily:"Son",
+        textAlign:'center', 
+        marginBottom:10,      
+    },
+    score:{
+        fontSize:20,
+        fontFamily:"Bold"
     },
     past:{
-        backgroundColor :'#ececf8',
         alignItems:'center',
         marginBottom:5
     },
     message:{
         fontFamily:"Son",
-        marginTop : 10,
-        fontSize: 20,
+        margin : 5,
+        fontSize: 25,
+        justifyContent: 'flex-start',
     }
 });
 const RateLineContainer = ( {load,pastRecords } ) => (

@@ -35,7 +35,7 @@ const RateMessage = ({keywordText, score }) => {
  const styles = StyleSheet.create({
     surface: {
         padding: 8,
-        flex: 0.2,
+        flex: 0.225,
         width: '95%',
         alignItems: 'center',
         justifyContent: 'center',

@@ -43,7 +43,7 @@ const RateSentence = ({originalText, fixedText, keywordText }) => {
  const styles = StyleSheet.create({
     surface: {
         padding: 8,
-        flex: 0.2,
+        flex: 0.225,
         width: '95%',
         alignItems: 'center',
         justifyContent: 'center',