diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json
index fc83e70..4a9b40e 100644
--- a/.vs/VSWorkspaceState.json
+++ b/.vs/VSWorkspaceState.json
@@ -1,14 +1,14 @@
 {
   "ExpandedNodes": [
     "",
-    "\\assets",
     "\\components",
     "\\model",
+    "\\navigation",
     "\\pages",
     "\\redux",
     "\\redux\\actions",
     "\\redux\\reducers"
   ],
-  "SelectedNode": "\\components\\DrawingCanva.tsx",
+  "SelectedNode": "\\navigation\\TabBar.tsx",
   "PreviewInSolutionExplorer": false
 }
\ No newline at end of file
diff --git a/.vs/iut-expo-starter/FileContentIndex/1da72723-62e4-400a-9980-caea1803fa8c.vsidx b/.vs/iut-expo-starter/FileContentIndex/1da72723-62e4-400a-9980-caea1803fa8c.vsidx
deleted file mode 100644
index 118e588..0000000
Binary files a/.vs/iut-expo-starter/FileContentIndex/1da72723-62e4-400a-9980-caea1803fa8c.vsidx and /dev/null differ
diff --git a/.vs/iut-expo-starter/FileContentIndex/f414478a-b19d-43e9-93d2-7485192e5b4e.vsidx b/.vs/iut-expo-starter/FileContentIndex/b65e6914-0860-41bd-a713-13518de330f7.vsidx
similarity index 100%
rename from .vs/iut-expo-starter/FileContentIndex/f414478a-b19d-43e9-93d2-7485192e5b4e.vsidx
rename to .vs/iut-expo-starter/FileContentIndex/b65e6914-0860-41bd-a713-13518de330f7.vsidx
diff --git a/.vs/iut-expo-starter/FileContentIndex/e4ce64ef-2df9-48a4-bd5a-ea4f897087fd.vsidx b/.vs/iut-expo-starter/FileContentIndex/e4ce64ef-2df9-48a4-bd5a-ea4f897087fd.vsidx
new file mode 100644
index 0000000..8d67679
Binary files /dev/null and b/.vs/iut-expo-starter/FileContentIndex/e4ce64ef-2df9-48a4-bd5a-ea4f897087fd.vsidx differ
diff --git a/.vs/iut-expo-starter/v17/.wsuo b/.vs/iut-expo-starter/v17/.wsuo
index c2b8a93..869ada2 100644
Binary files a/.vs/iut-expo-starter/v17/.wsuo and b/.vs/iut-expo-starter/v17/.wsuo differ
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
index 44b6a62..16df30d 100644
Binary files a/.vs/slnx.sqlite and b/.vs/slnx.sqlite differ
diff --git a/App.tsx b/App.tsx
index 84219ba..b9c4b88 100644
--- a/App.tsx
+++ b/App.tsx
@@ -26,17 +26,6 @@ export default function App() {
   );
 }
 
-const tabOptions = {
-    tabBarShowLabel: false,
-    tabBarStyle: {
-        backgroundColor: "#FF5C5C"
-    },
-    tabBarActiveTintColor: "white",
-    tabBarInactiveTintColor: "black"
-};
-
-
-
 const styles = StyleSheet.create({
     container: {
         flex: 1,
diff --git a/components/DrawingCanva.tsx b/components/DrawingCanva.tsx
index a581c00..c58c186 100644
--- a/components/DrawingCanva.tsx
+++ b/components/DrawingCanva.tsx
@@ -24,15 +24,17 @@ const DrawingCanva = (props: DrawingCanvaProps) => {
 
 
     useEffect(() => {
+        fetchXml();
         if (canvasRef.current) {
-            fetchXml();
             setIsCanvasReady(true);
         }
-    }, [canvasRef.current]);
+    }, [canvasRef.current, selectedKanji]);
 
     const fetchXml = async () => {
-        const xml = await (await fetch(selectedKanji.image)).text();
-        setImgXml(xml);
+        if (selectedKanji instanceof Kanji) {
+            const xml = await (await fetch(selectedKanji.image)).text();
+            setImgXml(xml);
+        }
     }
 
 
diff --git a/components/KanjiCard.tsx b/components/KanjiCard.tsx
index f7fdb2a..7b8addd 100644
--- a/components/KanjiCard.tsx
+++ b/components/KanjiCard.tsx
@@ -43,7 +43,6 @@ const KanjiCard = (props: KanjiProps) => {
     }, []);
 
 
-
     return (
             <View style={kanjiCardStyle.container}>
 
diff --git a/components/KanjiList.tsx b/components/KanjiList.tsx
index f711518..0bb146e 100644
--- a/components/KanjiList.tsx
+++ b/components/KanjiList.tsx
@@ -1,23 +1,35 @@
-import React from 'react';
-import { Text, SectionList, View, StyleSheet } from 'react-native';
+import React from 'react';
+import { Text, SectionList, View, StyleSheet, useColorScheme } from 'react-native';
+import { Kanji } from '../model/kanji';
+import KanjiListCell from './KanjiListCell';
 
 
 const KanjiList = () => {
 
+    const kanjiListStyle = useColorScheme() == 'light' ? kanjiListStyle_light : kanjiListStyle_dark;
+
     return (
         <View style={kanjiListStyle.container}>
             <SectionList sections={[
                 {
                     title: "N5",
-                    data: ["aa", "aaa"]
+                    data: [
+                        new Kanji("親", "parent", "https://media.kanjialive.com/kanji_strokes/shita(shii)_16.svg"),
+                        new Kanji("雨", "rain", "https://media.kanjialive.com/kanji_strokes/u-ame_8.svg"),
+                        new Kanji("貴", "noble", "https://media.kanjialive.com/kanji_strokes/ki-touto(i)_12.svg")
+                    ]
                 },
                 {
                     title: "N4",
-                    data: ["b", "bbb"]
+                    data: [
+                        new Kanji("親", "parent", "https://media.kanjialive.com/kanji_strokes/shita(shii)_16.svg"),
+                        new Kanji("雨", "rain", "https://media.kanjialive.com/kanji_strokes/u-ame_8.svg"),
+                        new Kanji("貴", "noble", "https://media.kanjialive.com/kanji_strokes/ki-touto(i)_12.svg")
+                    ]
                 }
             ]}
                 renderItem={
-                    ({ item }) => <Text style={kanjiListStyle.item}>{item}</Text>
+                    ({ item }) => <KanjiListCell kanji={item} />
                 }
                 renderSectionHeader={({ section }) => (
                     <Text style={kanjiListStyle.sectionHeader}>{section.title}</Text>
@@ -29,7 +41,7 @@ const KanjiList = () => {
     );
 };
 
-const kanjiListStyle = StyleSheet.create({
+const kanjiListStyle_light = StyleSheet.create({
     container: {
         width: '100%',
         height: '100%',
@@ -40,9 +52,10 @@ const kanjiListStyle = StyleSheet.create({
         paddingLeft: 10,
         paddingRight: 10,
         paddingBottom: 2,
-        fontSize: 14,
+        fontSize: 20,
         fontWeight: 'bold',
-        backgroundColor: '#e6e6e6',
+        color: "black",
+        backgroundColor: '#d5d5d5',
     },
     item: {
         padding: 10,
@@ -51,4 +64,28 @@ const kanjiListStyle = StyleSheet.create({
     },
 })
 
+const kanjiListStyle_dark = StyleSheet.create({
+    container: {
+        width: '100%',
+        height: '100%',
+        padding: 10
+    },
+    sectionHeader: {
+        paddingTop: 2,
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingBottom: 2,
+        fontSize: 20,
+        fontWeight: 'bold',
+        color: "white",
+        backgroundColor: '#0d0d0d',
+    },
+    item: {
+        padding: 10,
+        fontSize: 18,
+        height: 44,
+    },
+})
+
+
 export default KanjiList;
\ No newline at end of file
diff --git a/components/KanjiListCell.tsx b/components/KanjiListCell.tsx
index e69de29..a3c1a8d 100644
--- a/components/KanjiListCell.tsx
+++ b/components/KanjiListCell.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Text, View, StyleSheet, TouchableOpacity, useColorScheme } from 'react-native';
+import { Kanji } from '../model/kanji';
+
+interface kanjiListCellProps {
+    kanji: Kanji;
+}
+
+const KanjiListCell = (props: kanjiListCellProps) => {
+
+    const cellStyle = useColorScheme() == 'light' ? cellStyle_light : cellStyle_dark;
+
+
+    return (
+        <TouchableOpacity onPress={() => console.log(props.kanji)} style={cellStyle.item}>
+            <Text style={cellStyle.kanji}>{props.kanji.character}</Text>
+            <Text style={cellStyle.text}>{props.kanji.meaning}</Text>
+        </TouchableOpacity>
+    );
+};
+
+const cellStyle_light = StyleSheet.create({
+    item: {
+        padding: 10,
+        fontSize: 18,
+        height: 44,
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: '#e6e6e6',
+    },
+    text: {
+        color: "black",
+    },
+    kanji: {
+        fontWeight: "bold",
+        color: "black",
+        fontSize: "20em",
+        width: "50%"
+    }
+})
+
+const cellStyle_dark = StyleSheet.create({
+    item: {
+        padding: 10,
+        fontSize: 18,
+        height: 44,
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: '#1c1c1c',
+    },
+    text: {
+        color: "white",
+    },
+    kanji: {
+        fontWeight: "bold",
+        color: "white",
+        fontSize: "20em",
+        width: "50%"
+    },
+})
+
+export default KanjiListCell;
\ No newline at end of file
diff --git a/components/KanjiPlaygroundList.tsx b/components/KanjiPlaygroundList.tsx
index 79e7ba1..eb35f3e 100644
--- a/components/KanjiPlaygroundList.tsx
+++ b/components/KanjiPlaygroundList.tsx
@@ -27,7 +27,7 @@ const KanjiPlaygroundList = (props: kanjiPlaygroundListProps) => {
                 data={props.data}
                 renderItem={
                     ({ item }) => (
-                        <TouchableOpacity onPress={() => dispatch(setSelectedKanji(item))} style={kanjiPlaygroundList.entry}>
+                        <TouchableOpacity onPress={() => { dispatch(setSelectedKanji(item)); console.log(item) }} style={kanjiPlaygroundList.entry}>
                             <Text style={kanjiPlaygroundList.entryText}>{item.character}</Text>
                         </TouchableOpacity>
                     )
diff --git a/navigation/TabBar.tsx b/navigation/TabBar.tsx
index f38f197..719df2d 100644
--- a/navigation/TabBar.tsx
+++ b/navigation/TabBar.tsx
@@ -25,6 +25,11 @@ const LearnButton = (props: BottomTabBarButtonProps) => {
             justifyContent: 'center',
             alignItems: 'center',
         }}>
+
+            <View
+                style={learnButtonStyle.button2}>
+            </View>
+
             <TouchableNativeFeedback onPress={props.onPress}>
                 <View
                     style={learnButtonStyle.button}>
@@ -42,9 +47,14 @@ const learnButtonStyle_light = StyleSheet.create({
         width: 80,
         height: 80,
         borderRadius: 40,
-        borderColor: "#f5f5f4",
-        borderWidth: 5
-    }
+    },
+    button2: {
+        backgroundColor: "#f5f5f4",
+        width: 90,
+        height: 90,
+        borderRadius: 45,
+        position: "absolute"
+    },
 });
 
 const learnButtonStyle_dark = StyleSheet.create({
@@ -53,9 +63,14 @@ const learnButtonStyle_dark = StyleSheet.create({
         width: 80,
         height: 80,
         borderRadius: 40,
-        borderColor: "#2b2b2b",
-        borderWidth: 5
-    }
+    },
+    button2: {
+        backgroundColor: "#2b2b2b",
+        width: 90,
+        height: 90,
+        borderRadius: 45,
+        position: "absolute"
+    },
 });
 
 const TabBar = () => {
@@ -104,7 +119,7 @@ const tabOptions: BottomTabNavigationOptions = {
     tabBarShowLabel: false,
     headerShown: false,
     tabBarStyle: {
-        backgroundColor: "#FF5C5C"
+        backgroundColor: "#FF5C5C",
     },
     tabBarActiveTintColor: "white",
     tabBarInactiveTintColor: "black",
diff --git a/pages/Learn.tsx b/pages/Learn.tsx
index 89dac0a..08733ed 100644
--- a/pages/Learn.tsx
+++ b/pages/Learn.tsx
@@ -21,7 +21,7 @@ const learnStyle_light = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: "#f5f5f4"
+        backgroundColor: "#f5f5f5"
     }
 })
 
diff --git a/pages/List.tsx b/pages/List.tsx
index ae40fc1..11e8a82 100644
--- a/pages/List.tsx
+++ b/pages/List.tsx
@@ -20,7 +20,7 @@ const listStyle_light = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: "#f5f5f4"
+        backgroundColor: "#f5f5f5"
     }
 })
 
diff --git a/pages/Playground.tsx b/pages/Playground.tsx
index 448e902..2a988cc 100644
--- a/pages/Playground.tsx
+++ b/pages/Playground.tsx
@@ -27,7 +27,7 @@ const playgroundStyle_light = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: "#f5f5f4"
+        backgroundColor: "#f5f5f5"
 
     }
 })
diff --git a/redux/reducers/kanjiReducer.ts b/redux/reducers/kanjiReducer.ts
index 172cd2d..a0d7ba1 100644
--- a/redux/reducers/kanjiReducer.ts
+++ b/redux/reducers/kanjiReducer.ts
@@ -13,6 +13,7 @@ export default function kanjiReducer(state = initialState, action) {
             return { ...state, kanjis: state.kanjis.push(action.payload) };
         case c.SET_SELECTED_KANJI:
             // @ts-ignore
+            console.log("select" + action.payload.meaning);
             return { ...state, selectedKanji: action.payload };
         default:
             return state;