diff --git a/.vs/LEARNIHON/FileContentIndex/1eeda7fc-d197-451b-929d-8228474d4307.vsidx b/.vs/LEARNIHON/FileContentIndex/1eeda7fc-d197-451b-929d-8228474d4307.vsidx
new file mode 100644
index 0000000..3823cc3
Binary files /dev/null and b/.vs/LEARNIHON/FileContentIndex/1eeda7fc-d197-451b-929d-8228474d4307.vsidx differ
diff --git a/.vs/LEARNIHON/FileContentIndex/213f307e-f081-4fb3-9ac0-4054a8ed3e37.vsidx b/.vs/LEARNIHON/FileContentIndex/213f307e-f081-4fb3-9ac0-4054a8ed3e37.vsidx
deleted file mode 100644
index a4d44d3..0000000
Binary files a/.vs/LEARNIHON/FileContentIndex/213f307e-f081-4fb3-9ac0-4054a8ed3e37.vsidx and /dev/null differ
diff --git a/.vs/LEARNIHON/FileContentIndex/2b0208b9-9a28-4375-82d1-eb4bab1547be.vsidx b/.vs/LEARNIHON/FileContentIndex/2b0208b9-9a28-4375-82d1-eb4bab1547be.vsidx
deleted file mode 100644
index cace8c7..0000000
Binary files a/.vs/LEARNIHON/FileContentIndex/2b0208b9-9a28-4375-82d1-eb4bab1547be.vsidx and /dev/null differ
diff --git a/.vs/LEARNIHON/FileContentIndex/f55ad326-8870-45ff-ae39-c7eafff83a9c.vsidx b/.vs/LEARNIHON/FileContentIndex/a2a34223-0396-4194-ae0e-7d689c47646f.vsidx
similarity index 100%
rename from .vs/LEARNIHON/FileContentIndex/f55ad326-8870-45ff-ae39-c7eafff83a9c.vsidx
rename to .vs/LEARNIHON/FileContentIndex/a2a34223-0396-4194-ae0e-7d689c47646f.vsidx
diff --git a/.vs/LEARNIHON/FileContentIndex/dc430ff2-049b-4973-aec7-e9397b07acd7.vsidx b/.vs/LEARNIHON/FileContentIndex/dc430ff2-049b-4973-aec7-e9397b07acd7.vsidx
new file mode 100644
index 0000000..44132b9
Binary files /dev/null and b/.vs/LEARNIHON/FileContentIndex/dc430ff2-049b-4973-aec7-e9397b07acd7.vsidx differ
diff --git a/.vs/LEARNIHON/v17/.wsuo b/.vs/LEARNIHON/v17/.wsuo
index eb4cc5a..41f17cf 100644
Binary files a/.vs/LEARNIHON/v17/.wsuo and b/.vs/LEARNIHON/v17/.wsuo differ
diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json
index d63fa1d..edff1fc 100644
--- a/.vs/VSWorkspaceState.json
+++ b/.vs/VSWorkspaceState.json
@@ -3,14 +3,9 @@
     "",
     "\\assets",
     "\\components",
-    "\\model",
     "\\navigation",
-    "\\pages",
-    "\\redux",
-    "\\redux\\actions",
-    "\\redux\\reducers",
-    "\\redux\\thunks"
+    "\\pages"
   ],
-  "SelectedNode": "\\components\\KanjiPlaygroundList.tsx",
+  "SelectedNode": "\\pages\\List.tsx",
   "PreviewInSolutionExplorer": false
 }
\ No newline at end of file
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
index a8523a0..9885928 100644
Binary files a/.vs/slnx.sqlite and b/.vs/slnx.sqlite differ
diff --git a/app.json b/app.json
index 93e4368..fb7981b 100644
--- a/app.json
+++ b/app.json
@@ -4,10 +4,10 @@
     "slug": "Learnihon",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./src/assets/icon.png",
+    "icon": "./assets/icon.png",
     "userInterfaceStyle": "automatic",
     "splash": {
-      "image": "./src/assets/splash.png",
+      "image": "./assets/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
@@ -22,12 +22,12 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./src/assets/adaptive-icon.png",
-        "backgroundColor": "#FFFFFF",
+        "foregroundImage": "./assets/icon.png",
+        "backgroundColor": "#FFFFFF"
       }
     },
     "web": {
-      "favicon": "./src/assets/favicon.png"
+      "favicon": "./assets/favicon.png"
     }
   }
 }
diff --git a/assets/favicon.png b/assets/favicon.png
index e75f697..d882d68 100644
Binary files a/assets/favicon.png and b/assets/favicon.png differ
diff --git a/assets/icon.png b/assets/icon.png
index a0b1526..d882d68 100644
Binary files a/assets/icon.png and b/assets/icon.png differ
diff --git a/components/DrawingCanva.tsx b/components/DrawingCanva.tsx
index 8b404ef..0e28c61 100644
--- a/components/DrawingCanva.tsx
+++ b/components/DrawingCanva.tsx
@@ -11,11 +11,7 @@ import { KanjiMapper } from '../model/kanjiMapper';
 import { Eye, EyeOff } from "react-native-feather";
 import { learnihonColors } from '../assets/colors';
 
-type DrawingCanvaProps = {
-    backgroundImage: string;
-} 
-
-const DrawingCanva = (props: DrawingCanvaProps) => {
+const DrawingCanva = () => {
 
     const style = useColorScheme()  == 'light' ? style_light : style_dark;
 
diff --git a/components/KanjiList.tsx b/components/KanjiList.tsx
index 12e39fa..43d3eab 100644
--- a/components/KanjiList.tsx
+++ b/components/KanjiList.tsx
@@ -27,21 +27,21 @@ const KanjiList = () => {
     };
 
     return (
-        <View>
+        <View style={kanjiListStyle.container}>
             <GradeChipList onSelect={updateSelectedItems} />
 
             {selectedItems.length ?
             (<SectionList
-                sections={selectedItems}
-                windowSize={50}
-                renderItem={
-                    ({ item }) => <KanjiListCell kanji={item} />
-                }
-                renderSectionHeader={({ section }) => (
-                    <Text style={kanjiListStyle.sectionHeader}>{section.title}</Text>
-                )}
-                keyExtractor={item => `basicListEntry-${item.character}`}/>) 
-                : (
+                    sections={selectedItems}
+                    windowSize={50}
+                    renderItem={
+                        ({ item }) => <KanjiListCell kanji={item} />
+                    }
+                    renderSectionHeader={({ section }) => (
+                        <Text style={kanjiListStyle.sectionHeader}>{section.title}</Text>
+                    )}
+                    keyExtractor={item => `basicListEntry-${item.character}`}/>
+                ) : (
                     <View style={kanjiListStyle.container}>
                         <Text style={kanjiListStyle.text}>Select a grade</Text>
                     </View>
@@ -68,9 +68,7 @@ const kanjiListStyle_light = StyleSheet.create({
         opacity: 0.5
     },
     container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
+        flex: 1
     },
 })
 
@@ -92,9 +90,7 @@ const kanjiListStyle_dark = StyleSheet.create({
         opacity: 0.5
     },
     container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
+        flex: 1
     },
 })
 
diff --git a/model/kanjiGuess.ts b/model/kanjiGuess.ts
index 6f221d9..1932811 100644
--- a/model/kanjiGuess.ts
+++ b/model/kanjiGuess.ts
@@ -6,7 +6,7 @@ export type KanjiGuess = {
 }
 
 export const calcCorrectGuessesRatio = (guess: KanjiGuess): number => {
-    return (guess.totalCorrectGuesses / guess.totalGuesses) * 100;
+    return Math.round((guess.totalCorrectGuesses / guess.totalGuesses) * 100);
 }
 
 export const getColorByRatio = (ratio: number): string => {
diff --git a/navigation/TabBar.tsx b/navigation/TabBar.tsx
index 703be28..a58fa68 100644
--- a/navigation/TabBar.tsx
+++ b/navigation/TabBar.tsx
@@ -76,13 +76,9 @@ const TabBar = () => {
 
     const Tab = createBottomTabNavigator();
     return (
-        <>
-        <Header/>
         <Tab.Navigator
         screenOptions={tabOptions}
-        initialRouteName="Learn"
-                
-        >
+        initialRouteName="Learn">
             <Tab.Screen
                 options={{
                     tabBarIcon: ({ color }) => (
@@ -90,9 +86,8 @@ const TabBar = () => {
                     )
                 }}
                 name="List"
-            component={KanjiStackNavigator}
-            />
-        <Tab.Screen
+            component={KanjiStackNavigator}/>
+            <Tab.Screen
             options={{
                 tabBarIcon: ({ color }) => (
                     <LearnIcon color={color} width={32} height={32} />
@@ -111,8 +106,7 @@ const TabBar = () => {
                 }}
                 name="Playground"
                 component={Playground} />
-            </Tab.Navigator>
-        </>
+        </Tab.Navigator>
     );
 }
 
diff --git a/pages/Detail.tsx b/pages/Detail.tsx
index 94e0ab1..58bc8d3 100644
--- a/pages/Detail.tsx
+++ b/pages/Detail.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, Text, useColorScheme, View } from 'react-native';
+import { ActivityIndicator, StyleSheet, Text, useColorScheme, View } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import { learnihonColors } from '../assets/colors';
 import DetailExamples from '../components/DetailExamples';
@@ -11,6 +11,8 @@ const Detail = ({route}) => {
     const kanji:Kanji = route.params.kanji;
     const detailStyle = useColorScheme() == 'light' ? detailStyle_light : detailStyle_dark;
 
+
+    const [loadingImg, setLoadingImg] = useState(false);
     const [iconXml, setIconXml] = useState('<svg></svg>');
     const [imgXml, setImgXml] = useState('<svg></svg>');
 
@@ -25,8 +27,10 @@ const Detail = ({route}) => {
 
     useEffect(() => {
         console.log(kanji)
-
-        fetchXml();
+        setLoadingImg(true);
+        fetchXml().then(_ => {
+            setLoadingImg(false);
+        });
     }, []);
 
 
@@ -36,11 +40,16 @@ const Detail = ({route}) => {
                 <Text style={detailStyle.text}>{kanji.onyomi}</Text>
                 <Text style={detailStyle.text}>{kanji.kunyomi}</Text>
             </View>
-            <SvgXml
+            {loadingImg ? 
+                (
+                    <View style={detailStyle.loader}>
+                        <ActivityIndicator size="large" color={learnihonColors.main} />
+                    </View>
+                ):(<SvgXml
                 xml={imgXml
                     .replace(/fill="#[0-9a-f]{6}"/g, `fill=${detailStyle.svg.color}`)}
                 width="100"
-                height="100"/>
+                height="100" />)}
 
             <Text style={detailStyle.tinyText}>{kanji.strokes + " strokes"}</Text>
             <Text style={detailStyle.meaningText}>{kanji.meaning}</Text>
@@ -92,6 +101,12 @@ const detailStyle_light = StyleSheet.create({
         color: learnihonColors.main,
         fontWeight: "900",
         textAlign: "center"
+    },
+    loader: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 100,
+        height: 100
     }
 })
 
@@ -127,6 +142,12 @@ const detailStyle_dark = StyleSheet.create({
         fontWeight: "900",
         textAlign: "center"
 
+    },
+    loader: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 100,
+        height: 100
     }
 });
 
diff --git a/pages/Learn.tsx b/pages/Learn.tsx
index 96f86f5..efbea3a 100644
--- a/pages/Learn.tsx
+++ b/pages/Learn.tsx
@@ -1,38 +1,14 @@
 import React from 'react';
-import { StyleSheet, useColorScheme, View } from 'react-native';
-import { learnihonColors } from '../assets/colors';
 import KanjiCard from '../components/KanjiCard';
+import LearnihonPage from './LearnihonPage';
 
 
 const Learn = () => {
 
-    const learnStyle = useColorScheme() == 'light' ? learnStyle_light : learnStyle_dark;
-
     return (
-        <View style={learnStyle.container}>
+        <LearnihonPage>
             <KanjiCard></KanjiCard>
-        </View>
+        </LearnihonPage>
     );
 };
-
-
-const learnStyle_light = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: learnihonColors.light
-    }
-})
-
-
-const learnStyle_dark = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: learnihonColors.dark,
-    },
-});
-
 export default Learn;
\ No newline at end of file
diff --git a/pages/LearnihonPage.tsx b/pages/LearnihonPage.tsx
new file mode 100644
index 0000000..e899361
--- /dev/null
+++ b/pages/LearnihonPage.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { StyleSheet, useColorScheme, View } from 'react-native';
+import { learnihonColors } from '../assets/colors';
+import Header from '../components/Header';
+
+
+const LearnihonPage = ({ children }: React.PropsWithChildren<{}>) => {
+
+    const style = useColorScheme() == 'light' ? style_light : style_dark;
+
+    return (
+        <View style={style.container}>
+            <Header/>
+            {children}
+        </View>
+    );
+};
+
+
+const style_light = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: learnihonColors.light
+    }
+})
+
+
+const style_dark = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: learnihonColors.dark,
+    },
+});
+
+export default LearnihonPage;
\ No newline at end of file
diff --git a/pages/List.tsx b/pages/List.tsx
index cdc3c09..8d6b62e 100644
--- a/pages/List.tsx
+++ b/pages/List.tsx
@@ -2,37 +2,14 @@
 import { StyleSheet, useColorScheme, View } from 'react-native';
 import { learnihonColors } from '../assets/colors';
 import KanjiList from '../components/KanjiList';
+import LearnihonPage from './LearnihonPage';
 
 
 const List = () => {
-    
-    const listStyle = useColorScheme() == 'light' ? listStyle_light : listStyle_dark;
-
     return (
-        <View style={listStyle.container}>
+        <LearnihonPage>
             <KanjiList/>
-        </View>
+        </LearnihonPage>
     );
 };
-
-
-const listStyle_light = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: learnihonColors.light,
-    }
-})
-
-
-const listStyle_dark = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: learnihonColors.dark,
-    },
-});
-
 export default List;
\ No newline at end of file
diff --git a/pages/Playground.tsx b/pages/Playground.tsx
index df22a17..44a81c0 100644
--- a/pages/Playground.tsx
+++ b/pages/Playground.tsx
@@ -3,40 +3,15 @@ import { StyleSheet, useColorScheme, View } from 'react-native';
 import { learnihonColors } from '../assets/colors';
 import DrawingCanva from '../components/DrawingCanva';
 import KanjiPlaygroundList from '../components/KanjiPlaygroundList';
+import LearnihonPage from './LearnihonPage';
 
 
 const Playground = () => {
-    const playgroundStyle = useColorScheme() == 'light' ? playgroundStyle_light : playgroundStyle_dark;
-
     return (
-        <View style={playgroundStyle.container}>
+        <LearnihonPage>
             <KanjiPlaygroundList/>
-            <DrawingCanva backgroundImage="https://media.kanjialive.com/kanji_strokes/otozu(reru)_11.svg"/>
-        </View>
+            <DrawingCanva/>
+        </LearnihonPage>
     );
 };
-
-const playgroundStyle_light = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: learnihonColors.light
-
-    }
-})
-
-
-const playgroundStyle_dark = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: learnihonColors.dark,
-    },
-});
-
-
-
-
 export default Playground; 
\ No newline at end of file