diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json
index 09e5c40..de64c1d 100644
--- a/.vs/VSWorkspaceState.json
+++ b/.vs/VSWorkspaceState.json
@@ -6,6 +6,6 @@
     "\\data",
     "\\pages"
   ],
-  "SelectedNode": "\\pages\\Playground.tsx",
+  "SelectedNode": "\\components\\KanjiCard.tsx",
   "PreviewInSolutionExplorer": false
 }
\ No newline at end of file
diff --git a/.vs/iut-expo-starter/FileContentIndex/1f524106-5e23-4fac-8bbf-0c15e7476c35.vsidx b/.vs/iut-expo-starter/FileContentIndex/1f524106-5e23-4fac-8bbf-0c15e7476c35.vsidx
deleted file mode 100644
index e202305..0000000
Binary files a/.vs/iut-expo-starter/FileContentIndex/1f524106-5e23-4fac-8bbf-0c15e7476c35.vsidx and /dev/null differ
diff --git a/.vs/iut-expo-starter/FileContentIndex/214d182e-dac1-487e-bd68-1cc9400bd316.vsidx b/.vs/iut-expo-starter/FileContentIndex/214d182e-dac1-487e-bd68-1cc9400bd316.vsidx
deleted file mode 100644
index e0ab7ea..0000000
Binary files a/.vs/iut-expo-starter/FileContentIndex/214d182e-dac1-487e-bd68-1cc9400bd316.vsidx and /dev/null differ
diff --git a/.vs/iut-expo-starter/FileContentIndex/8f4a65f3-5489-4d1b-88c1-c7835e2024fb.vsidx b/.vs/iut-expo-starter/FileContentIndex/57eaa9c3-72cb-4bc5-a6d7-8a7f3513fafc.vsidx
similarity index 99%
rename from .vs/iut-expo-starter/FileContentIndex/8f4a65f3-5489-4d1b-88c1-c7835e2024fb.vsidx
rename to .vs/iut-expo-starter/FileContentIndex/57eaa9c3-72cb-4bc5-a6d7-8a7f3513fafc.vsidx
index 1ab7dc9..fc7c96b 100644
Binary files a/.vs/iut-expo-starter/FileContentIndex/8f4a65f3-5489-4d1b-88c1-c7835e2024fb.vsidx and b/.vs/iut-expo-starter/FileContentIndex/57eaa9c3-72cb-4bc5-a6d7-8a7f3513fafc.vsidx differ
diff --git a/.vs/iut-expo-starter/FileContentIndex/96ad2cb2-fbcb-4d26-a619-e41bd8b27c2f.vsidx b/.vs/iut-expo-starter/FileContentIndex/96ad2cb2-fbcb-4d26-a619-e41bd8b27c2f.vsidx
new file mode 100644
index 0000000..079ec74
Binary files /dev/null and b/.vs/iut-expo-starter/FileContentIndex/96ad2cb2-fbcb-4d26-a619-e41bd8b27c2f.vsidx differ
diff --git a/.vs/iut-expo-starter/FileContentIndex/c52f95f9-f04c-4016-b700-f38c1fc9073c.vsidx b/.vs/iut-expo-starter/FileContentIndex/c52f95f9-f04c-4016-b700-f38c1fc9073c.vsidx
new file mode 100644
index 0000000..d10a75e
Binary files /dev/null and b/.vs/iut-expo-starter/FileContentIndex/c52f95f9-f04c-4016-b700-f38c1fc9073c.vsidx differ
diff --git a/.vs/iut-expo-starter/FileContentIndex/e764a80d-e03a-436c-82d3-f160e33e6c50.vsidx b/.vs/iut-expo-starter/FileContentIndex/e764a80d-e03a-436c-82d3-f160e33e6c50.vsidx
new file mode 100644
index 0000000..20bd09a
Binary files /dev/null and b/.vs/iut-expo-starter/FileContentIndex/e764a80d-e03a-436c-82d3-f160e33e6c50.vsidx differ
diff --git a/.vs/iut-expo-starter/FileContentIndex/fc1252a8-cd5b-4d59-ae09-a21d47acf89f.vsidx b/.vs/iut-expo-starter/FileContentIndex/fc1252a8-cd5b-4d59-ae09-a21d47acf89f.vsidx
deleted file mode 100644
index 463ed84..0000000
Binary files a/.vs/iut-expo-starter/FileContentIndex/fc1252a8-cd5b-4d59-ae09-a21d47acf89f.vsidx and /dev/null differ
diff --git a/.vs/iut-expo-starter/v17/.wsuo b/.vs/iut-expo-starter/v17/.wsuo
index b9f838f..c1c472c 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 42dbaa6..72d3d2d 100644
Binary files a/.vs/slnx.sqlite and b/.vs/slnx.sqlite differ
diff --git a/assets/answerAnimation.tsx b/assets/answerAnimation.tsx
new file mode 100644
index 0000000..3ac01fc
--- /dev/null
+++ b/assets/answerAnimation.tsx
@@ -0,0 +1,31 @@
+import { Dimensions, Animated } from 'react-native';
+
+export const animation = new Animated.Value(0);
+
+
+export const startAnimation = () => {
+    Animated.timing(animation, {
+        toValue: 1,
+        duration: 400,
+        useNativeDriver: true,
+    }).start();
+};
+
+export const stopAnimation = () => {
+    Animated.timing(animation, {
+        toValue: 0,
+        duration: 400,
+        useNativeDriver: true,
+    }).start();
+};
+
+export const animatedStyles = {
+    transform: [
+        {
+            translateY: animation.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, -Dimensions.get('window').height / 1.9]
+            }),
+        },
+    ],
+};
diff --git a/components/KanjiAnswerField.tsx b/components/KanjiAnswerField.tsx
new file mode 100644
index 0000000..1e5aaa1
--- /dev/null
+++ b/components/KanjiAnswerField.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Animated, StyleSheet, TextInput } from 'react-native';
+import { startAnimation, stopAnimation, animatedStyles } from '../assets/answerAnimation'
+
+const KanjiAnswerField = () => {
+
+    const options = {
+        method: 'GET',
+        headers: {
+            'X-RapidAPI-Key': '19516a9900mshce10de76f99976bp10f192jsn8c8d82222baa',
+            'X-RapidAPI-Host': 'kanjialive-api.p.rapidapi.com'
+        }
+    }
+
+    const [answer, onChangeText] = React.useState("");
+
+    return (
+        <Animated.View style={[animatedStyles]}>
+            <TextInput
+                style={answerFieldStyle.input}
+                onChangeText={onChangeText}
+                value={answer}
+                onFocus={startAnimation}
+                onBlur={stopAnimation}
+            />
+        </Animated.View>
+    );
+};
+
+const answerFieldStyle = StyleSheet.create({
+    input: {
+        height: 40,
+        margin: 12,
+        borderWidth: 1,
+        padding: 10,
+        width: 200,
+        backgroundColor: "white"
+    },
+})
+
+export default KanjiAnswerField;
\ No newline at end of file
diff --git a/components/KanjiCard.tsx b/components/KanjiCard.tsx
index 732be95..a6f9306 100644
--- a/components/KanjiCard.tsx
+++ b/components/KanjiCard.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, Text, TextInput, View, Button } from 'react-native';
+import { StyleSheet, Text, TouchableWithoutFeedback, View, Button, Keyboard } from 'react-native';
 import { SvgUri } from 'react-native-svg';
-import { Kanji } from '../data/stub';
+import KanjiAnswerField from './KanjiAnswerField';
 
 type KanjiProps = {
     kanji: string;
@@ -19,8 +19,6 @@ const KanjiCard = (props: KanjiProps) => {
 
     const [loading, setLoading] = useState(true);
     const [res, setData] = useState(null);
-    const [answer, onChangeText] = React.useState();
-
 
     const fetchData = async () => {
         await fetch(`https://kanjialive-api.p.rapidapi.com/api/public/kanji/${props.kanji}`, options)
@@ -38,22 +36,19 @@ const KanjiCard = (props: KanjiProps) => {
     }, []);
 
     return (
-        <View style={kanjiCardStyle.container}>
-            <Text> {loading ? <Text>Loading...</Text> : <Text>{res.kanji.onyomi.katakana}</Text>}</Text>
-            {!loading && (<SvgUri
-                width="200"
-                uri={res.kanji.video.poster}
-
-            />)}
-            <Text> {loading ? <Text>Loading...</Text> : <Text>{res.kanji.meaning.english}</Text>}</Text>
-            <TextInput
-                style={kanjiCardStyle.input}
-                onChange={onChangeText}
-                value={answer}
-            > </TextInput>
+        <TouchableWithoutFeedback onPress={() => { Keyboard.dismiss(); }} accessible={false}>
+            <View style={kanjiCardStyle.container}>
 
-            <Button title="OK" color="#FF5C5C"></Button>
-        </View>
+                <Text> {loading ? <Text>Loading...</Text> : <Text>{res.kanji.onyomi.katakana}</Text>}</Text>
+                {!loading && (<SvgUri
+                    width="200"
+                    uri={res.kanji.video.poster}
+                />)}
+                <Text> {loading ? <Text/> : <Text>{res.kanji.meaning.english}</Text>}</Text>
+                <KanjiAnswerField/>
+                <Button title="OK" color="#FF5C5C" />
+            </View>
+        </TouchableWithoutFeedback >
     );
 };
 
@@ -62,13 +57,16 @@ const kanjiCardStyle = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
+        width: "100%",
+        height: "100%"
     },
     input: {
         height: 40,
         margin: 12,
         borderWidth: 1,
         padding: 10,
-        width: 200
+        width: 200,
+        backgroundColor: "white"
     },
 })
 
diff --git a/components/KanjiList.tsx b/components/KanjiList.tsx
new file mode 100644
index 0000000..fa45f20
--- /dev/null
+++ b/components/KanjiList.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import { Text, SectionList, View, StyleSheet } from 'react-native';
+
+
+const KanjiList = () => {
+
+    return (
+        <View style={kanjiListStyle.container}>
+            <SectionList sections={[
+                {
+                    title: "N5",
+                    data: ["aa", "aaa"]
+                },
+                {
+                    title: "N4",
+                    data: ["b", "bbb"]
+                }
+            ]}
+                renderItem={
+                    ({item}) => <Text style={kanjiListStyle.item}>{item}</Text>
+                }
+                renderSectionHeader={({ section }) => (
+                    <Text style={kanjiListStyle.sectionHeader}>{section.title}</Text>
+                )}
+                keyExtractor={item => `basicListEntry-${item}`}
+            >
+            </SectionList>
+        </View>
+    );
+};
+
+const kanjiListStyle = StyleSheet.create({
+    container: {
+        width: '100%',
+        height: '100%',
+        padding: 10
+    },
+    sectionHeader: {
+        paddingTop: 2,
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingBottom: 2,
+        fontSize: 14,
+        fontWeight: 'bold',
+        backgroundColor: '#e6e6e6',
+    },
+    item: {
+        padding: 10,
+        fontSize: 18,
+        height: 44,
+    },
+})
+
+export default KanjiList;
\ No newline at end of file
diff --git a/components/TabBar.tsx b/components/TabBar.tsx
index e66ff1a..f00d939 100644
--- a/components/TabBar.tsx
+++ b/components/TabBar.tsx
@@ -44,15 +44,14 @@ const learnButtonStyle = StyleSheet.create({
     }
 });
 
-const TabBar  = () => {
+const TabBar = () => {
 
     const Tab = createBottomTabNavigator();
-
     return (
             <NavigationContainer >
                 <Tab.Navigator
-                    screenOptions={tabOptions}
-
+                screenOptions={tabOptions}
+                initialRouteName="Learn"
                 >
                     <Tab.Screen
                         options={{
diff --git a/pages/List.tsx b/pages/List.tsx
index e7d7b15..60654d8 100644
--- a/pages/List.tsx
+++ b/pages/List.tsx
@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { Text, View, StyleSheet } from 'react-native';
-import KanjiCard from '../components/KanjiCard';
+import KanjiList from '../components/KanjiList';
 
 
 const List = () => {
 
     return (
         <View style={listStyle.container}>
-            <Text>Some list</Text>
+            <KanjiList/>
         </View>
     );
 };