diff --git a/.vs/LEARNIHON/FileContentIndex/2534c58f-9ae7-4767-b67f-77259d1f0725.vsidx b/.vs/LEARNIHON/FileContentIndex/2534c58f-9ae7-4767-b67f-77259d1f0725.vsidx
deleted file mode 100644
index afbf465..0000000
Binary files a/.vs/LEARNIHON/FileContentIndex/2534c58f-9ae7-4767-b67f-77259d1f0725.vsidx and /dev/null differ
diff --git a/.vs/LEARNIHON/FileContentIndex/a3ee16d6-10b2-47d0-b6f8-b16c60e10714.vsidx b/.vs/LEARNIHON/FileContentIndex/a3ee16d6-10b2-47d0-b6f8-b16c60e10714.vsidx
new file mode 100644
index 0000000..81648ef
Binary files /dev/null and b/.vs/LEARNIHON/FileContentIndex/a3ee16d6-10b2-47d0-b6f8-b16c60e10714.vsidx differ
diff --git a/.vs/LEARNIHON/FileContentIndex/cb72c0c1-899a-4487-9b4a-3c7b70c1694e.vsidx b/.vs/LEARNIHON/FileContentIndex/cb72c0c1-899a-4487-9b4a-3c7b70c1694e.vsidx
deleted file mode 100644
index 19022fe..0000000
Binary files a/.vs/LEARNIHON/FileContentIndex/cb72c0c1-899a-4487-9b4a-3c7b70c1694e.vsidx and /dev/null differ
diff --git a/.vs/LEARNIHON/v17/.wsuo b/.vs/LEARNIHON/v17/.wsuo
index 548254f..b094042 100644
Binary files a/.vs/LEARNIHON/v17/.wsuo and b/.vs/LEARNIHON/v17/.wsuo differ
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
index 6578fc5..25ace1b 100644
Binary files a/.vs/slnx.sqlite and b/.vs/slnx.sqlite differ
diff --git a/assets/animations/answerAnimation.ts b/assets/animations/answerAnimation.ts
deleted file mode 100644
index 9cd181c..0000000
--- a/assets/animations/answerAnimation.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-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/2]
-            }),
-        },
-    ],
-};
diff --git a/components/KanjiListSearchPanel.tsx b/components/GradeChipList.tsx
similarity index 59%
rename from components/KanjiListSearchPanel.tsx
rename to components/GradeChipList.tsx
index df34709..460e7a7 100644
--- a/components/KanjiListSearchPanel.tsx
+++ b/components/GradeChipList.tsx
@@ -7,44 +7,31 @@ interface kanjiListSeachPanelProps {
     onSelect: (item: string, isSelected: Boolean) => void;
 }
 
-const KanjiListSearchPanel = (props: kanjiListSeachPanelProps) => {
+const GradeChipList = (props: kanjiListSeachPanelProps) => {
 
     const navigator = useNavigation();
 
     return (
         <View style={panelStyle.container}>
-            <TextInput style={panelStyle.input} />
             <FlatList
                 data={[1, 2, 3, 4, 5, 6]}
                 renderItem={(item) => <GradeChip grade={item.item} onSelect={props.onSelect} />}
                 horizontal={true}
-                showsHorizontalScrollIndicator={false}
-
-            >
-            </FlatList>
+                showsHorizontalScrollIndicator={false}/>
         </View>
     );
 };
 
 
 const panelStyle = StyleSheet.create({
-    input: {
-        height: 40,
-        margin: 12,
-        borderWidth: 1,
-        padding: 10,
-        width: 200,
-        backgroundColor: "white",
-        borderRadius: 20,
-        borderColor: "black",
-        width: "80%"
-    },
     container: {
         justifyContent: "center",
         alignItems: "center",
-        height: "20%"
+        height: "10%",
+        marginTop: 5,
+        marginBottom: 5
     }
 })
 
 
-export default KanjiListSearchPanel;
\ No newline at end of file
+export default GradeChipList;
\ No newline at end of file
diff --git a/components/Header.tsx b/components/Header.tsx
index e7d9411..6f06e55 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -21,7 +21,7 @@ const headerStyle = StyleSheet.create({
         color: 'white',
         textAlign: 'center',
         fontWeight: 'bold',
-        fontSize: 30,
+        fontSize: 40,
     }
 })
 
diff --git a/components/KanjiAnswerField.tsx b/components/KanjiAnswerField.tsx
index b97647b..d9f92aa 100644
--- a/components/KanjiAnswerField.tsx
+++ b/components/KanjiAnswerField.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Animated, StyleSheet, TextInput } from 'react-native';
-import { startAnimation, stopAnimation, animatedStyles } from '../assets/animations/answerAnimation'
+import { StyleSheet, TextInput, View } from 'react-native';
 
 interface kanjiAnswerFieldProps { 
     answer: string,
@@ -11,14 +10,14 @@ const KanjiAnswerField = (props: kanjiAnswerFieldProps) => {
 
 
     return (
-        <Animated.View style={[animatedStyles]}>
+        <View>
             <TextInput
                 style={answerFieldStyle.input}
                 onChangeText={props.setAnswer}
                 value={props.answer}
                 placeholder="Answer here"
             />
-        </Animated.View>
+        </View>
     );
 };
 
diff --git a/components/KanjiList.tsx b/components/KanjiList.tsx
index 8ead142..64e50a6 100644
--- a/components/KanjiList.tsx
+++ b/components/KanjiList.tsx
@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Kanji } from '../model/kanji';
 import { KanjiListByGrade } from '../model/kanjiListByGrades';
 import KanjiListCell from './KanjiListCell';
-import KanjiListSearchPanel from './KanjiListSearchPanel';
+import GradeChipList from './GradeChipList';
 
 
 const KanjiList = () => {
@@ -37,12 +37,11 @@ const KanjiList = () => {
     }, [dispatch]);
 
     return (
-
-
-
         <View>
-            <KanjiListSearchPanel onSelect={updateSelectedItems} />
-            <SectionList 
+            <GradeChipList onSelect={updateSelectedItems} />
+
+            {selectedItems.length ?
+            (<SectionList
                 sections={selectedItems}
                 renderItem={
                     ({ item }) => <KanjiListCell kanji={item} />
@@ -50,13 +49,12 @@ const KanjiList = () => {
                 renderSectionHeader={({ section }) => (
                     <Text style={kanjiListStyle.sectionHeader}>{section.title}</Text>
                 )}
-                keyExtractor={item => `basicListEntry-${item.character}`
-                }
-                style={kanjiListStyle.list}
-            >
-            </SectionList>
-            
-
+                keyExtractor={item => `basicListEntry-${item.character}`}/>) 
+                : (
+                    <View style={kanjiListStyle.container}>
+                        <Text style={kanjiListStyle.text}>Select a grade</Text>
+                    </View>
+                )}
         </View>
     );
 }; 
@@ -72,34 +70,20 @@ const kanjiListStyle_light = StyleSheet.create({
         color: "black",
         backgroundColor: '#d5d5d5',
     },
-    item: {
-        padding: 10,
-        fontSize: 18,
-        height: 44,
+    text: {
+        textAlign: "center",
+        fontWeight: "bold",
+        color: "black",
+        opacity: 0.5
     },
-    input: {
-        height: 40,
-        margin: 12,
-        borderWidth: 1,
-        padding: 10,
-        width: 200,
-        backgroundColor: "white",
-        borderRadius: 20,
-        borderColor: "black"
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
     },
 })
 
 const kanjiListStyle_dark = StyleSheet.create({
-    list: {
-    },
-    chipList: {
-        height: 10
-    },
-    container: {
-        width: '100%',
-        height: '100%',
-        padding: 10
-    },
     sectionHeader: {
         paddingTop: 2,
         paddingLeft: 10,
@@ -110,19 +94,16 @@ const kanjiListStyle_dark = StyleSheet.create({
         color: "white",
         backgroundColor: '#0d0d0d',
     },
-    item: {
-        padding: 10,
-        fontSize: 18,
-        height: 44,
+    text: {
+        textAlign: "center",
+        fontWeight: "bold",
+        color: "white",
+        opacity: 0.5
     },
-    input: {
-        height: 40,
-        margin: 12,
-        borderWidth: 1,
-        padding: 10,
-        backgroundColor: "white",
-        borderRadius: 20,
-        borderColor: "black"
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
     },
 })
 
diff --git a/components/KanjiPlaygroundList.tsx b/components/KanjiPlaygroundList.tsx
index 158610a..d3cb91c 100644
--- a/components/KanjiPlaygroundList.tsx
+++ b/components/KanjiPlaygroundList.tsx
@@ -28,9 +28,10 @@ const KanjiPlaygroundList = (props: kanjiPlaygroundListProps) => {
         <View style={kanjiPlaygroundListStyle.container}>
             <TextInput style={kanjiPlaygroundListStyle.input}
                 placeholder="Search kanji here"
+                placeholderTextColor="gray"
                 value={search}
                 onChangeText={setSearch}
-                onBlur={async () => await (await searchKanjis(search))(dispatch)}
+                onBlur={async () => await (await searchKanjis(search.toLowerCase()))(dispatch)}
             ></TextInput>
             <FlatList 
                 numColumns={4}
@@ -74,7 +75,7 @@ const kanjiPlaygroundListStyle_light = StyleSheet.create({
         width: "75%",
         backgroundColor: "white",
         borderRadius: 20,
-        alignSelf: "center"
+        alignSelf: "center",
     },
 })
 
@@ -105,7 +106,8 @@ const kanjiPlaygroundListStyle_dark = StyleSheet.create({
         width: "75%",
         backgroundColor: "white",
         borderRadius: 20,
-        alignSelf: "center"
+        alignSelf: "center",
+
     },
 })