diff --git a/apps/mobile/src/components/EditorMenu/index.js b/apps/mobile/src/components/EditorMenu/index.js
index b92e1ae3f..72fc207fa 100644
--- a/apps/mobile/src/components/EditorMenu/index.js
+++ b/apps/mobile/src/components/EditorMenu/index.js
@@ -246,7 +246,7 @@ export const EditorMenu = ({
                 height: 2,
                 width: '100%',
                 marginBottom: 5,
-                marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03,
+                marginTop: Platform.OS == 'ios' ? 0 : 45,
               }}
             />
             <FlatList
diff --git a/apps/mobile/src/components/Menu/index.js b/apps/mobile/src/components/Menu/index.js
index e8eeaac06..8c7855b47 100644
--- a/apps/mobile/src/components/Menu/index.js
+++ b/apps/mobile/src/components/Menu/index.js
@@ -39,7 +39,7 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
           height: 2,
           width: '100%',
           marginBottom: 5,
-          marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03,
+          marginTop: Platform.OS == 'ios' ? 0 : 45,
         }}
       />
 
diff --git a/apps/mobile/src/components/NoteItem/index.js b/apps/mobile/src/components/NoteItem/index.js
index f7a7b6b5b..e9c3fa53d 100644
--- a/apps/mobile/src/components/NoteItem/index.js
+++ b/apps/mobile/src/components/NoteItem/index.js
@@ -290,7 +290,6 @@ const NoteItem = props => {
                 }}
                 textStyle={{
                   color: colors.pri,
-
                   fontFamily: WEIGHT.regular,
                   fontSize: SIZE.sm,
                 }}>
@@ -304,7 +303,7 @@ const NoteItem = props => {
                   color: colors.pri,
 
                   fontFamily: WEIGHT.regular,
-                  fontSize: SIZE.xs,
+                  fontSize: SIZE.sm,
                 }}>
                 Pin
               </MenuItem>
@@ -323,7 +322,7 @@ const NoteItem = props => {
                   color: colors.pri,
 
                   fontFamily: WEIGHT.regular,
-                  fontSize: SIZE.xs,
+                  fontSize: SIZE.sm,
                 }}>
                 Favorite
               </MenuItem>
@@ -333,7 +332,7 @@ const NoteItem = props => {
                   color: colors.pri,
 
                   fontFamily: WEIGHT.regular,
-                  fontSize: SIZE.xs,
+                  fontSize: SIZE.sm,
                 }}>
                 Share
               </MenuItem>
@@ -353,9 +352,9 @@ const NoteItem = props => {
                   color: colors.pri,
 
                   fontFamily: WEIGHT.regular,
-                  fontSize: SIZE.xs,
+                  fontSize: SIZE.sm,
                 }}>
-                Move
+                Add to Notebook
               </MenuItem>
               <MenuItem
                 onPress={() => {
@@ -367,9 +366,9 @@ const NoteItem = props => {
                   color: colors.pri,
 
                   fontFamily: WEIGHT.regular,
-                  fontSize: SIZE.xs,
+                  fontSize: SIZE.sm,
                 }}>
-                {item.locked ? 'Remove from vault' : ' Add to Vault'}
+                {item.locked ? 'Remove from vault' : 'Add to Vault'}
               </MenuItem>
 
               <MenuItem
@@ -380,7 +379,7 @@ const NoteItem = props => {
                 textStyle={{
                   color: colors.pri,
                   fontFamily: WEIGHT.regular,
-                  fontSize: SIZE.xs,
+                  fontSize: SIZE.sm,
                 }}>
                 Delete
               </MenuItem>
diff --git a/apps/mobile/src/components/NotebookItem/index.js b/apps/mobile/src/components/NotebookItem/index.js
index 9a01b0947..a65a23a2b 100644
--- a/apps/mobile/src/components/NotebookItem/index.js
+++ b/apps/mobile/src/components/NotebookItem/index.js
@@ -287,8 +287,7 @@ export const NotebookItem = ({
                     fontFamily: WEIGHT.regular,
                     fontSize: SIZE.sm,
                   }}>
-                  <Icon name="arrow-left" size={SIZE.sm} color={colors.icon} />
-                  {'  '}Restore
+                  Restore
                 </MenuItem>
                 <MenuItem
                   onPress={() => {
@@ -301,8 +300,7 @@ export const NotebookItem = ({
                     fontFamily: WEIGHT.regular,
                     fontSize: SIZE.sm,
                   }}>
-                  <Icon name="trash" size={SIZE.sm} color={colors.icon} />
-                  {'  '}Remove
+                  Remove
                 </MenuItem>
               </>
             ) : (
@@ -318,8 +316,7 @@ export const NotebookItem = ({
                     fontFamily: WEIGHT.regular,
                     fontSize: SIZE.sm,
                   }}>
-                  <Icon name="edit-2" size={SIZE.sm} color={colors.icon} />
-                  {'  '}Edit
+                  Edit
                 </MenuItem>
 
                 <MenuItem
@@ -329,8 +326,7 @@ export const NotebookItem = ({
                     fontFamily: WEIGHT.regular,
                     fontSize: SIZE.sm,
                   }}>
-                  <Icon name="star" size={SIZE.sm} color={colors.icon} />
-                  {'  '}Pin
+                  Pin
                 </MenuItem>
                 <MenuItem
                   onPress={() => {
@@ -349,8 +345,7 @@ export const NotebookItem = ({
                     fontFamily: WEIGHT.regular,
                     fontSize: SIZE.sm,
                   }}>
-                  <Icon name="star" size={SIZE.sm} color={colors.icon} />
-                  {'  '}Favorite
+                  Favorite
                 </MenuItem>
 
                 <MenuItem
@@ -364,8 +359,7 @@ export const NotebookItem = ({
                     fontFamily: WEIGHT.regular,
                     fontSize: SIZE.sm,
                   }}>
-                  <Icon name="trash" size={SIZE.sm} color={colors.icon} />
-                  {'  '}Delete
+                  Delete
                 </MenuItem>
               </>
             )}
diff --git a/apps/mobile/src/components/NotesList/index.js b/apps/mobile/src/components/NotesList/index.js
index 8880d4b30..fff5e3d24 100644
--- a/apps/mobile/src/components/NotesList/index.js
+++ b/apps/mobile/src/components/NotesList/index.js
@@ -261,6 +261,14 @@ export const NotesList = ({
             }}>
             Notes you write will appear here.
           </Text>
+          <Text
+            style={{
+              fontSize: SIZE.sm,
+              color: colors.icon,
+              marginTop: 20,
+            }}>
+            No notes found
+          </Text>
         </View>
       }
       ListHeaderComponent={
@@ -593,6 +601,14 @@ export const NotesList = ({
             }}>
             {emptyPlaceholderText}
           </Text>
+          <Text
+            style={{
+              fontSize: SIZE.sm,
+              color: colors.icon,
+              marginTop: 20,
+            }}>
+            No Notes found
+          </Text>
         </View>
       }
       onScroll={event => {
diff --git a/apps/mobile/src/components/header/index.js b/apps/mobile/src/components/header/index.js
index 5da05dc6b..3a0102a2d 100644
--- a/apps/mobile/src/components/header/index.js
+++ b/apps/mobile/src/components/header/index.js
@@ -27,7 +27,7 @@ export const Header = ({
         flexDirection: 'row',
         zIndex: 10,
         height: 50,
-        marginTop: Platform.OS === 'ios' ? 10 : 45,
+        marginTop: Platform.OS === 'ios' ? 0 : 45,
         marginBottom: 10,
         justifyContent: 'space-between',
         alignItems: 'center',
diff --git a/apps/mobile/src/views/Folders/index.js b/apps/mobile/src/views/Folders/index.js
index fb4d2ac4b..9ffacff92 100644
--- a/apps/mobile/src/views/Folders/index.js
+++ b/apps/mobile/src/views/Folders/index.js
@@ -57,6 +57,29 @@ export const Folders = ({navigation}) => {
   let searchHeight = 0;
   let marginSet = false;
 
+  const slideRight = {
+    0: {
+      transform: [{translateX: -4}],
+    },
+    0.5: {
+      transform: [{translateX: 0}],
+    },
+    1: {
+      transform: [{translateX: 4}],
+    },
+  };
+  const slideLeft = {
+    0: {
+      transform: [{translateX: 4}],
+    },
+    0.5: {
+      transform: [{translateX: 0}],
+    },
+    1: {
+      transform: [{translateX: -4}],
+    },
+  };
+
   const setMarginTop = () => {
     return;
     if (headerHeight < 30 || searchHeight < 30) {
@@ -124,15 +147,17 @@ export const Folders = ({navigation}) => {
             heading={params.title}
             canGoBack={false}
           />
-          <Search
-            sendHeight={height => {
-              searchHeight = height;
-              console.log(searchHeight + '' + headerHeight);
-              setMarginTop();
-            }}
-            placeholder="Search your notebook"
-            hide={hideHeader}
-          />
+          {notebooks.length == 0 ? null : (
+            <Search
+              sendHeight={height => {
+                searchHeight = height;
+                console.log(searchHeight + '' + headerHeight);
+                setMarginTop();
+              }}
+              placeholder="Search your notebook"
+              hide={hideHeader}
+            />
+          )}
         </Animatable.View>
 
         <FlatList
@@ -165,6 +190,287 @@ export const Folders = ({navigation}) => {
           }
           numColumns={numColumns}
           key={numColumns}
+          ListEmptyComponent={
+            <View
+              style={{
+                height: '80%',
+                width: '100%',
+                alignItems: 'center',
+                alignSelf: 'center',
+                justifyContent: 'center',
+                opacity: 0.8,
+              }}>
+              <Animatable.View
+                animation={slideRight}
+                iterationCount="infinite"
+                duration={3000}
+                iterationDelay={0}
+                direction="alternate"
+                easing="ease-in"
+                useNativeDriver={true}
+                style={{
+                  backgroundColor: colors.shade,
+                  width: '50%',
+                  padding: 5,
+                  borderRadius: 5,
+                  marginBottom: 10,
+                }}>
+                <View
+                  style={{
+                    width: '50%',
+                    height: 15,
+                    borderRadius: 100,
+                    backgroundColor: colors.accent,
+                    marginBottom: 8,
+                  }}
+                />
+                <View
+                  style={{
+                    width: '70%',
+                    height: 10,
+
+                    marginBottom: 8,
+                    flexDirection: 'row',
+                  }}>
+                  <View
+                    style={{
+                      width: '30%',
+                      height: 10,
+                      borderRadius: 5,
+                      backgroundColor: colors.accent,
+                      marginRight: 8,
+                    }}
+                  />
+                  <View
+                    style={{
+                      width: '30%',
+                      height: 10,
+                      borderRadius: 5,
+                      backgroundColor: colors.accent,
+                      marginRight: 8,
+                    }}
+                  />
+                  <View
+                    style={{
+                      width: '30%',
+                      height: 10,
+                      borderRadius: 5,
+                      backgroundColor: colors.accent,
+                      marginRight: 8,
+                    }}
+                  />
+                </View>
+                <View
+                  style={{
+                    flexDirection: 'row',
+                  }}>
+                  <View
+                    style={{
+                      width: '15%',
+                      height: 8,
+                      borderRadius: 5,
+                      backgroundColor: colors.icon,
+                      marginRight: '5%',
+                    }}
+                  />
+                  <View
+                    style={{
+                      width: '15%',
+                      height: 8,
+                      borderRadius: 5,
+                      backgroundColor: colors.icon,
+                    }}
+                  />
+                </View>
+              </Animatable.View>
+
+              <Animatable.View
+                animation={slideLeft}
+                iterationCount="infinite"
+                duration={3000}
+                iterationDelay={0}
+                direction="alternate"
+                easing="ease-in"
+                useNativeDriver={true}
+                style={{
+                  backgroundColor: colors.shade,
+                  width: '50%',
+                  padding: 5,
+                  borderRadius: 5,
+                  marginBottom: 10,
+                }}>
+                <View
+                  style={{
+                    width: '50%',
+                    height: 15,
+                    borderRadius: 100,
+                    backgroundColor: colors.accent,
+                    marginBottom: 8,
+                  }}
+                />
+                <View
+                  style={{
+                    width: '70%',
+                    height: 10,
+
+                    marginBottom: 8,
+                    flexDirection: 'row',
+                  }}>
+                  <View
+                    style={{
+                      width: '30%',
+                      height: 10,
+                      borderRadius: 5,
+                      backgroundColor: colors.accent,
+                      marginRight: 8,
+                    }}
+                  />
+                  <View
+                    style={{
+                      width: '30%',
+                      height: 10,
+                      borderRadius: 5,
+                      backgroundColor: colors.accent,
+                      marginRight: 8,
+                    }}
+                  />
+                  <View
+                    style={{
+                      width: '30%',
+                      height: 10,
+                      borderRadius: 5,
+                      backgroundColor: colors.accent,
+                      marginRight: 8,
+                    }}
+                  />
+                </View>
+                <View
+                  style={{
+                    flexDirection: 'row',
+                  }}>
+                  <View
+                    style={{
+                      width: '15%',
+                      height: 8,
+                      borderRadius: 5,
+                      backgroundColor: colors.icon,
+                      marginRight: '5%',
+                    }}
+                  />
+                  <View
+                    style={{
+                      width: '15%',
+                      height: 8,
+                      borderRadius: 5,
+                      backgroundColor: colors.icon,
+                    }}
+                  />
+                </View>
+              </Animatable.View>
+
+              <Animatable.View
+                animation={slideRight}
+                iterationCount="infinite"
+                duration={3000}
+                iterationDelay={0}
+                direction="alternate"
+                easing="ease-in"
+                useNativeDriver={true}
+                style={{
+                  backgroundColor: colors.shade,
+                  width: '50%',
+                  padding: 5,
+                  borderRadius: 5,
+                  marginBottom: 10,
+                }}>
+                <View
+                  style={{
+                    width: '50%',
+                    height: 15,
+                    borderRadius: 100,
+                    backgroundColor: colors.accent,
+                    marginBottom: 8,
+                  }}
+                />
+                <View
+                  style={{
+                    width: '70%',
+                    height: 10,
+
+                    marginBottom: 8,
+                    flexDirection: 'row',
+                  }}>
+                  <View
+                    style={{
+                      width: '30%',
+                      height: 10,
+                      borderRadius: 5,
+                      backgroundColor: colors.accent,
+                      marginRight: 8,
+                    }}
+                  />
+                  <View
+                    style={{
+                      width: '30%',
+                      height: 10,
+                      borderRadius: 5,
+                      backgroundColor: colors.accent,
+                      marginRight: 8,
+                    }}
+                  />
+                  <View
+                    style={{
+                      width: '30%',
+                      height: 10,
+                      borderRadius: 5,
+                      backgroundColor: colors.accent,
+                      marginRight: 8,
+                    }}
+                  />
+                </View>
+                <View
+                  style={{
+                    flexDirection: 'row',
+                  }}>
+                  <View
+                    style={{
+                      width: '15%',
+                      height: 8,
+                      borderRadius: 5,
+                      backgroundColor: colors.icon,
+                      marginRight: '5%',
+                    }}
+                  />
+                  <View
+                    style={{
+                      width: '15%',
+                      height: 8,
+                      borderRadius: 5,
+                      backgroundColor: colors.icon,
+                    }}
+                  />
+                </View>
+              </Animatable.View>
+
+              <Text
+                style={{
+                  color: colors.icon,
+                  fontSize: SIZE.md,
+                  fontFamily: WEIGHT.regular,
+                  marginTop: 20,
+                }}>
+                Notebooks you add will appear here
+              </Text>
+              <Text
+                style={{
+                  fontSize: SIZE.sm,
+                  color: colors.icon,
+                  marginTop: 20,
+                }}>
+                No Notebooks found
+              </Text>
+            </View>
+          }
           contentContainerStyle={{
             width: '100%',
             alignSelf: 'center',
diff --git a/apps/mobile/src/views/Tags/index.js b/apps/mobile/src/views/Tags/index.js
index da3a5f24c..d6de93c23 100644
--- a/apps/mobile/src/views/Tags/index.js
+++ b/apps/mobile/src/views/Tags/index.js
@@ -1,158 +1,374 @@
 import React, {useEffect, useState} from 'react';
-import {
-  ScrollView,
-  View,
-  Text,
-  TouchableOpacity,
-  Dimensions,
-  Image,
-  SafeAreaView,
-  Platform,
-  FlatList,
-} from 'react-native';
-import NavigationService from '../../services/NavigationService';
-import {
-  COLOR_SCHEME,
-  SIZE,
-  br,
-  ph,
-  pv,
-  opacity,
-  FONT,
-  WEIGHT,
-  onThemeUpdate,
-  clearThemeUpdateListener,
-} from '../../common/common';
-import Icon from 'react-native-vector-icons/Ionicons';
-import {Reminder} from '../../components/Reminder';
-import {ListItem} from '../../components/ListItem';
-import {Header} from '../../components/header';
-import NoteItem from '../../components/NoteItem';
-import {useForceUpdate} from '../ListsEditor';
-import {useAppContext} from '../../provider/useAppContext';
+import {View, Text, Dimensions, SafeAreaView, FlatList} from 'react-native';
 
+import {SIZE, pv, WEIGHT} from '../../common/common';
+import {Header} from '../../components/header';
+import {useAppContext} from '../../provider/useAppContext';
+import * as Animatable from 'react-native-animatable';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
 export const Tags = ({navigation}) => {
   const {colors} = useAppContext();
+  const slideRight = {
+    0: {
+      transform: [{scale: 1}, {translateX: -2}],
+    },
+    0.5: {
+      transform: [{scale: 0.98}, {translateX: 0}],
+    },
+    1: {
+      transform: [{scale: 1.02}, {translateX: 2}],
+    },
+  };
+  const slideLeft = {
+    0: {
+      transform: [{scale: 1.02}, {translateX: 2}],
+    },
+    0.5: {
+      transform: [{scale: 0.98}, {translateX: 0}],
+    },
+    1: {
+      transform: [{scale: 1}, {translateX: -2}],
+    },
+  };
+
   return (
     <SafeAreaView
       style={{
         height: '100%',
-        justifyContent: 'center',
+        backgroundColor: colors.bg,
       }}>
-      <View
-        style={{
-          height: '100%',
-          marginTop: h * 0.1,
-          width: '100%',
-          justifyContent: 'center',
-          flexDirection: 'row',
-          alignItems: 'center',
-        }}>
-        <ScrollView
-          contentContainerStyle={{
-            width: '90%',
+      <Header canGoBack={false} heading="Tags" menu={true} />
 
-            alignSelf: 'center',
-            flexDirection: 'row',
-            justifyContent: 'center',
-            alignItems: 'center',
-            flexWrap: 'wrap',
-          }}>
-          {[
-            '#home',
-            '#school',
-            '#water',
-            '#love',
-            '#hope',
-            '#music',
-            '#notesforbook',
-            '#hate',
-            '#worldofwonders',
-            '#home',
-            '#school',
-            '#water',
-            '#love',
-            '#hope',
-            '#music',
-            '#notesforbook',
-            '#hate',
-            '#worldofwonders',
-            '#home',
-            '#school',
-            '#water',
-            '#love',
-            '#hope',
-            '#music',
-            '#notesforbook',
-            '#hate',
-            '#worldofwonders',
-            '#home',
-            '#school',
-            '#water',
-            '#love',
-            '#hope',
-            '#music',
-            '#notesforbook',
-            '#hate',
-            '#worldofwonders',
-            '#home',
-            '#school',
-            '#water',
-            '#love',
-            '#hope',
-            '#music',
-            '#notesforbook',
-            '#hate',
-            '#worldofwonders',
-            '#home',
-            '#school',
-            '#water',
-            '#love',
-            '#hope',
-            '#music',
-            '#notesforbook',
-            '#hate',
-            '#worldofwonders',
-            '#home',
-            '#school',
-            '#water',
-            '#love',
-            '#hope',
-            '#music',
-            '#notesforbook',
-            '#hate',
-            '#worldofwonders',
-          ].map(item => (
-            <TouchableOpacity
-              onPress={() => {
-                NavigationService.navigate('Notes', {
-                  heading: item,
-                });
-              }}
+      <View style={{width: '90%', alignSelf: 'center', height: '100%'}}>
+        <FlatList
+          style={{
+            height: '100%',
+          }}
+          contentContainerStyle={{
+            height: '100%',
+          }}
+          data={[]}
+          ListEmptyComponent={
+            <View
+              style={{
+                height: '80%',
+                width: '100%',
+                alignItems: 'center',
+                alignSelf: 'center',
+                justifyContent: 'center',
+                opacity: 0.8,
+              }}>
+              <View
+                style={{
+                  width: w * 0.6,
+                  height: 200,
+
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}>
+                <Animatable.View
+                  animation={slideRight}
+                  iterationCount="infinite"
+                  duration={3000}
+                  iterationDelay={0}
+                  direction="alternate"
+                  easing="ease-in"
+                  useNativeDriver={true}
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    position: 'absolute',
+                    left: 50,
+                    top: 60,
+                  }}>
+                  <View
+                    style={{
+                      backgroundColor: colors.shade,
+
+                      borderRadius: 5,
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      padding: 4,
+                    }}>
+                    <Text
+                      style={{
+                        color: colors.accent,
+                        fontSize: SIZE.sm,
+                      }}>
+                      #
+                    </Text>
+                    <View
+                      style={{
+                        width: 40,
+                        backgroundColor: colors.accent,
+                        height: 12,
+                        borderRadius: 100,
+                      }}
+                    />
+                  </View>
+                </Animatable.View>
+                <Animatable.View
+                  animation={slideLeft}
+                  iterationCount="infinite"
+                  duration={3000}
+                  iterationDelay={0}
+                  direction="alternate"
+                  easing="ease-in"
+                  useNativeDriver={true}
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    position: 'absolute',
+                    left: 70,
+                    top: 100,
+                  }}>
+                  <View
+                    style={{
+                      backgroundColor: colors.shade,
+
+                      borderRadius: 5,
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      padding: 4,
+                    }}>
+                    <Text
+                      style={{
+                        color: colors.accent,
+                        fontSize: SIZE.sm,
+                      }}>
+                      #
+                    </Text>
+                    <View
+                      style={{
+                        width: 40,
+                        backgroundColor: colors.accent,
+                        height: 12,
+                        borderRadius: 100,
+                      }}
+                    />
+                  </View>
+                </Animatable.View>
+                <Animatable.View
+                  animation={slideRight}
+                  iterationCount="infinite"
+                  duration={3000}
+                  iterationDelay={0}
+                  direction="alternate"
+                  easing="ease-in"
+                  useNativeDriver={true}
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    position: 'absolute',
+                    left: 120,
+                    top: 60,
+                  }}>
+                  <View
+                    style={{
+                      backgroundColor: colors.shade,
+
+                      borderRadius: 5,
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      padding: 4,
+                    }}>
+                    <Text
+                      style={{
+                        color: colors.accent,
+                        fontSize: SIZE.sm,
+                      }}>
+                      #
+                    </Text>
+                    <View
+                      style={{
+                        width: 40,
+                        backgroundColor: colors.accent,
+                        height: 12,
+                        borderRadius: 100,
+                      }}
+                    />
+                  </View>
+                </Animatable.View>
+                <Animatable.View
+                  animation={slideLeft}
+                  iterationCount="infinite"
+                  duration={3000}
+                  iterationDelay={0}
+                  direction="alternate"
+                  easing="ease-in"
+                  useNativeDriver={true}
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    position: 'absolute',
+                    left: 140,
+                    top: 100,
+                  }}>
+                  <View
+                    style={{
+                      backgroundColor: colors.shade,
+
+                      borderRadius: 5,
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      padding: 4,
+                    }}>
+                    <Text
+                      style={{
+                        color: colors.accent,
+                        fontSize: SIZE.sm,
+                      }}>
+                      #
+                    </Text>
+                    <View
+                      style={{
+                        width: 40,
+                        backgroundColor: colors.accent,
+                        height: 12,
+                        borderRadius: 100,
+                      }}
+                    />
+                  </View>
+                </Animatable.View>
+                <Animatable.View
+                  animation={slideRight}
+                  iterationCount="infinite"
+                  duration={3000}
+                  iterationDelay={0}
+                  direction="alternate"
+                  easing="ease-in"
+                  useNativeDriver={true}
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    position: 'absolute',
+                    left: 50,
+                    top: 140,
+                  }}>
+                  <View
+                    style={{
+                      backgroundColor: colors.shade,
+
+                      borderRadius: 5,
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      padding: 4,
+                    }}>
+                    <Text
+                      style={{
+                        color: colors.accent,
+                        fontSize: SIZE.sm,
+                      }}>
+                      #
+                    </Text>
+                    <View
+                      style={{
+                        width: 40,
+                        backgroundColor: colors.accent,
+                        height: 12,
+                        borderRadius: 100,
+                      }}
+                    />
+                  </View>
+                </Animatable.View>
+                <Animatable.View
+                  animation={slideLeft}
+                  iterationCount="infinite"
+                  duration={3000}
+                  iterationDelay={0}
+                  direction="alternate"
+                  easing="ease-in"
+                  useNativeDriver={true}
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    position: 'absolute',
+                    left: 120,
+                    top: 140,
+                  }}>
+                  <View
+                    style={{
+                      backgroundColor: colors.shade,
+
+                      borderRadius: 5,
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      padding: 4,
+                    }}>
+                    <Text
+                      style={{
+                        color: colors.accent,
+                        fontSize: SIZE.sm,
+                      }}>
+                      #
+                    </Text>
+                    <View
+                      style={{
+                        width: 40,
+                        backgroundColor: colors.accent,
+                        height: 12,
+                        borderRadius: 100,
+                      }}
+                    />
+                  </View>
+                </Animatable.View>
+              </View>
+              <Text
+                style={{
+                  fontSize: SIZE.md,
+                  color: colors.icon,
+                }}>
+                Tags added to notes appear here
+              </Text>
+              <Text
+                style={{
+                  fontSize: SIZE.sm,
+                  color: colors.icon,
+                  marginTop: 20,
+                }}>
+                No tags found
+              </Text>
+            </View>
+          }
+          renderItem={({item, index}) => (
+            <View
               style={{
                 flexDirection: 'row',
                 justifyContent: 'flex-start',
                 alignItems: 'center',
                 margin: 5,
-                backgroundColor: colors.accent,
-                paddingVertical: pv - 5,
-                paddingHorizontal: ph + 10,
-                borderRadius: 30,
+                paddingVertical: pv,
+                borderBottomWidth: 1.5,
+                borderBottomColor: colors.navbg,
               }}>
               <Text
                 style={{
                   fontFamily: WEIGHT.regular,
                   fontSize: SIZE.md,
-                  color: 'white',
+                  color: colors.pri,
                 }}>
-                {item}
+                <Text
+                  style={{
+                    color: colors.accent,
+                  }}>
+                  #
+                </Text>
+                {item.slice(1)}
+
+                {'\n'}
+                <Text
+                  style={{
+                    fontSize: SIZE.xs,
+                    color: colors.icon,
+                  }}>
+                  10 notes
+                </Text>
               </Text>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
+            </View>
+          )}
+        />
       </View>
     </SafeAreaView>
   );