diff --git a/apps/mobile/src/components/ListPlaceholders/index.js b/apps/mobile/src/components/ListPlaceholders/index.js
index ccec99b45..83008a3dc 100644
--- a/apps/mobile/src/components/ListPlaceholders/index.js
+++ b/apps/mobile/src/components/ListPlaceholders/index.js
@@ -1,961 +1,39 @@
 import React from 'react';
-import {Platform, Text, View} from 'react-native';
-import * as Animatable from 'react-native-animatable';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {normalize, SIZE, WEIGHT} from '../../common/common';
-import {deleteItems, opacity, rotate} from '../../utils/animations';
-import {getElevation, hexToRGBA, w} from '../../utils/utils';
-
-export const NotebookPlaceHolder = ({colors, animation}) => {
-  const slideRight = {
-    0: {
-      transform: [
-        {translateX: -2},
-        {
-          translateY: -2,
-        },
-      ],
-    },
-    0.5: {
-      transform: [
-        {translateX: 0},
-        {
-          translateY: 0,
-        },
-      ],
-    },
-    1: {
-      transform: [
-        {translateX: 2},
-        {
-          translateY: 2,
-        },
-      ],
-    },
-  };
-
-  const slideLeft = {
-    0: {
-      transform: [
-        {translateX: 2},
-        {
-          translateY: 2,
-        },
-      ],
-    },
-    0.5: {
-      transform: [
-        {translateX: 0},
-        {
-          translateY: 0,
-        },
-      ],
-    },
-    1: {
-      transform: [
-        {translateX: -2},
-        {
-          translateY: -2,
-        },
-      ],
-    },
+import {View} from 'react-native';
+import {SvgXml} from 'react-native-svg';
+import {
+  NOTE_SVG,
+  NOTEBOOK_SVG,
+  TAG_SVG,
+  FAV_SVG,
+  TRASH_SVG,
+} from '../../assets/images/assets';
+import { useTracked } from '../../provider';
+export const Placeholder = ({type}) => {
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
+  const getSVG = () => {
+    switch (type) {
+      case 'notes':
+        return NOTE_SVG(colors.accent);
+      case 'notebooks':
+        return NOTEBOOK_SVG(colors.accent);
+      case 'tags':
+        return TAG_SVG(colors.accent);
+      case 'favorites':
+        return FAV_SVG(colors.accent);
+      case 'trash':
+        return TRASH_SVG(colors.accent);
+    }
   };
 
   return (
     <View
       style={{
-        height: 200,
+        height: 250,
+        width: 250,
       }}>
-      <Animatable.View
-        animation={slideLeft}
-        iterationCount="infinite"
-        duration={3000}
-        iterationDelay={0}
-        direction="alternate"
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          ...getElevation(5),
-          backgroundColor: '#a9a9a9',
-          width: 130,
-          borderRadius: 5,
-          height: 150,
-          zIndex: 10,
-        }}>
-        <View
-          style={{
-            ...getElevation(3),
-            backgroundColor: colors.accent,
-            width: 120,
-            borderRadius: 5,
-            height: 150,
-            alignSelf: 'flex-start',
-            justifyContent: 'center',
-          }}>
-          <View
-            style={{
-              width: '100%',
-              height: 8,
-              backgroundColor: 'white',
-              marginBottom: 15,
-            }}
-          />
-          <Text
-            style={{
-              fontFamily: WEIGHT.bold,
-              fontSize: SIZE.xs,
-              color: 'white',
-              textAlign: 'center',
-            }}>
-            My Notebook
-          </Text>
-          <Text
-            style={{
-              fontFamily: WEIGHT.regular,
-              fontSize: SIZE.xxs,
-              color: 'white',
-              textAlign: 'center',
-            }}>
-            Keep it orgainzed
-          </Text>
-        </View>
-      </Animatable.View>
-      <Animatable.View
-        animation={slideRight}
-        iterationCount="infinite"
-        duration={3000}
-        iterationDelay={0}
-        direction="alternate"
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          ...getElevation(5),
-          backgroundColor: '#a9a9a9',
-          width: 130,
-          borderRadius: 5,
-          height: 150,
-          position: 'absolute',
-          left: 35,
-          top: 60,
-        }}>
-        <View
-          style={{
-            ...getElevation(3),
-            backgroundColor: colors.accent,
-            width: 120,
-            borderRadius: 5,
-            height: 150,
-            alignSelf: 'flex-start',
-            justifyContent: 'center',
-          }}>
-          <View
-            style={{
-              width: '100%',
-              height: 8,
-              backgroundColor: 'white',
-              marginBottom: 15,
-            }}
-          />
-          <Text
-            style={{
-              fontFamily: WEIGHT.bold,
-              fontSize: SIZE.xs,
-              color: 'white',
-              textAlign: 'center',
-            }}>
-            My Notebook
-          </Text>
-          <Text
-            style={{
-              fontFamily: WEIGHT.regular,
-              fontSize: SIZE.xxs,
-              color: 'white',
-              textAlign: 'center',
-            }}>
-            Keep it orgainzed
-          </Text>
-        </View>
-      </Animatable.View>
-    </View>
-  );
-};
-
-export const NotesPlaceHolder = ({colors, animation, right, top}) => {
-  const slideRight = {
-    0: {
-      transform: [
-        {translateX: -2},
-        {
-          translateY: -2,
-        },
-      ],
-    },
-    0.5: {
-      transform: [
-        {translateX: 0},
-        {
-          translateY: 0,
-        },
-      ],
-    },
-    1: {
-      transform: [
-        {translateX: 2},
-        {
-          translateY: 2,
-        },
-      ],
-    },
-  };
-
-  const slideLeft = {
-    0: {
-      transform: [
-        {translateX: 2},
-        {
-          translateY: 2,
-        },
-      ],
-    },
-    0.5: {
-      transform: [
-        {translateX: 0},
-        {
-          translateY: 0,
-        },
-      ],
-    },
-    1: {
-      transform: [
-        {translateX: -2},
-        {
-          translateY: -2,
-        },
-      ],
-    },
-  };
-
-  return (
-    <View
-      style={{
-        width: '50%',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <Animatable.View
-        animation={slideLeft}
-        iterationCount="infinite"
-        duration={3000}
-        iterationDelay={0}
-        direction="alternate"
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          backgroundColor: colors.bg,
-          width: '100%',
-          borderRadius: 5,
-          opacity: 0.5,
-          elevation: 5,
-          position: 'absolute',
-          left: -normalize(50),
-          top: -normalize(50),
-        }}>
-        <View
-          style={{
-            width: normalize(10),
-            height: '100%',
-            opacity: 1,
-            elevation: 1,
-            borderRadius: 5,
-            backgroundColor: colors.accent,
-            position: 'absolute',
-            left: 0,
-          }}
-        />
-        <View
-          style={{
-            backgroundColor: colors.nav,
-            borderRadius: 5,
-            padding: normalize(5),
-            paddingBottom: normalize(10),
-            paddingLeft: normalize(15),
-          }}>
-          <Text
-            style={{
-              color: colors.accent,
-              fontFamily: WEIGHT.bold,
-              fontSize: SIZE.md,
-            }}>
-            Title
-          </Text>
-
-          <View
-            style={{
-              width: '100%',
-              height: normalize(8),
-              opacity: 0.5,
-              borderRadius: 5,
-              backgroundColor: colors.accent,
-              marginBottom: normalize(8),
-            }}
-          />
-          <View
-            style={{
-              width: '100%',
-              height: normalize(8),
-              opacity: 0.5,
-              borderRadius: 5,
-              backgroundColor: colors.accent,
-              marginBottom: normalize(8),
-            }}
-          />
-          <View
-            style={{
-              width: '100%',
-              height: normalize(8),
-              opacity: 0.5,
-              borderRadius: 5,
-              backgroundColor: colors.accent,
-              marginBottom: normalize(8),
-            }}
-          />
-          <View
-            style={{
-              width: '100%',
-              height: normalize(8),
-              opacity: 0.5,
-              borderRadius: 5,
-              backgroundColor: colors.accent,
-              marginBottom: normalize(8),
-            }}
-          />
-          <View
-            style={{
-              width: '100%',
-              height: normalize(8),
-              opacity: 0.5,
-              borderRadius: 5,
-              backgroundColor: colors.accent,
-              marginBottom: normalize(8),
-            }}
-          />
-          <View
-            style={{
-              flexDirection: 'row',
-            }}>
-            <View
-              style={{
-                width: '15%',
-                height: normalize(8),
-                borderRadius: 5,
-                backgroundColor: colors.icon,
-                marginRight: '5%',
-              }}
-            />
-            <View
-              style={{
-                width: '15%',
-                height: normalize(8),
-                borderRadius: 5,
-                backgroundColor: colors.icon,
-              }}
-            />
-          </View>
-        </View>
-      </Animatable.View>
-
-      <Animatable.View
-        animation={slideRight}
-        iterationCount="infinite"
-        duration={3000}
-        iterationDelay={0}
-        direction="alternate"
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          backgroundColor: colors.bg,
-          width: '100%',
-          borderRadius: 5,
-          elevation: 10,
-        }}>
-        <View
-          style={{
-            width: normalize(10),
-            height: '100%',
-            opacity: 1,
-            elevation: 1,
-            borderRadius: 5,
-            backgroundColor: colors.accent,
-            position: 'absolute',
-            left: 0,
-          }}
-        />
-        <View
-          style={{
-            backgroundColor: colors.nav,
-            borderRadius: 5,
-            padding: normalize(5),
-            paddingBottom: normalize(10),
-            paddingLeft: normalize(15),
-          }}>
-          <Text
-            style={{
-              color: colors.accent,
-              fontFamily: WEIGHT.bold,
-              fontSize: SIZE.md,
-            }}>
-            Title
-          </Text>
-
-          <View
-            style={{
-              width: '100%',
-              height: normalize(8),
-              opacity: 0.5,
-              borderRadius: 5,
-              backgroundColor: colors.accent,
-              marginBottom: normalize(8),
-            }}
-          />
-          <View
-            style={{
-              width: '100%',
-              height: normalize(8),
-              opacity: 0.5,
-              borderRadius: 5,
-              backgroundColor: colors.accent,
-              marginBottom: normalize(8),
-            }}
-          />
-          <View
-            style={{
-              width: '100%',
-              height: normalize(8),
-              opacity: 0.5,
-              borderRadius: 5,
-              backgroundColor: colors.accent,
-              marginBottom: normalize(8),
-            }}
-          />
-          <View
-            style={{
-              width: '100%',
-              height: normalize(8),
-              opacity: 0.5,
-              borderRadius: 5,
-              backgroundColor: colors.accent,
-              marginBottom: normalize(8),
-            }}
-          />
-          <View
-            style={{
-              width: '100%',
-              height: normalize(8),
-              opacity: 0.5,
-              borderRadius: 5,
-              backgroundColor: colors.accent,
-              marginBottom: normalize(8),
-            }}
-          />
-          <View
-            style={{
-              flexDirection: 'row',
-            }}>
-            <View
-              style={{
-                width: '15%',
-                height: normalize(8),
-                borderRadius: 5,
-                backgroundColor: colors.icon,
-                marginRight: '5%',
-              }}
-            />
-            <View
-              style={{
-                width: '15%',
-                height: normalize(8),
-                borderRadius: 5,
-                backgroundColor: colors.icon,
-              }}
-            />
-          </View>
-        </View>
-      </Animatable.View>
-    </View>
-  );
-};
-
-export const TrashPlaceHolder = ({colors, animation}) => {
-  return (
-    <View
-      style={{
-        alignItems: 'center',
-      }}>
-      <View
-        style={{
-          width: 100,
-          height: 15,
-          backgroundColor: colors.accent,
-          borderRadius: 100,
-          marginBottom: 2,
-          alignItems: 'center',
-          zIndex: 10,
-        }}>
-        <View
-          style={{
-            width: 25,
-            height: 10,
-            backgroundColor: colors.accent,
-            borderTopRightRadius: 5,
-            borderTopLeftRadius: 5,
-            marginBottom: 2,
-            marginTop: -9,
-          }}
-        />
-      </View>
-
-      <View
-        style={{
-          backgroundColor: 'white',
-        }}>
-        <View
-          style={{
-            width: 80,
-            height: 100,
-            backgroundColor: Platform.ios
-              ? hexToRGBA(colors.accent + '19')
-              : hexToRGBA(colors.shade),
-            borderRadius: 5,
-            zIndex: 10,
-          }}>
-          <View
-            style={{
-              flexDirection: 'row',
-              width: '90%',
-              alignSelf: 'center',
-              justifyContent: 'space-around',
-              alignItems: 'center',
-              height: '100%',
-            }}>
-            <View
-              style={{
-                width: 12,
-                height: 80,
-                backgroundColor: colors.accent,
-                borderRadius: 5,
-                zIndex: 10,
-              }}
-            />
-            <View
-              style={{
-                width: 12,
-                height: 80,
-                backgroundColor: colors.accent,
-                borderRadius: 5,
-                zIndex: 10,
-              }}
-            />
-            <View
-              style={{
-                width: 12,
-                height: 80,
-                backgroundColor: colors.accent,
-                borderRadius: 5,
-                zIndex: 10,
-              }}
-            />
-          </View>
-        </View>
-      </View>
-    </View>
-  );
-};
-
-export const FavoritesPlaceHolder = ({colors, animation}) => {
-  const slideRight = {
-    0: {
-      transform: [
-        {scaleX: 0.5},
-        {
-          scaleY: 0.5,
-        },
-        {
-          translateX: 2,
-        },
-        {
-          translateY: 2,
-        },
-      ],
-      opacity: 0,
-    },
-    0.6: {
-      transform: [
-        {scaleX: 0.7},
-        {
-          scaleY: 0.7,
-        },
-        {
-          translateX: 0,
-        },
-        {
-          translateY: 0,
-        },
-      ],
-
-      opacity: 1,
-    },
-    1: {
-      transform: [
-        {scaleX: 1},
-        {
-          scaleY: 1,
-        },
-        {
-          translateX: -2,
-        },
-        {
-          translateY: -2,
-        },
-      ],
-      opacity: 0,
-    },
-  };
-
-  return (
-    <View
-      style={{
-        flexDirection: 'row',
-        alignSelf: 'center',
-        justifyContent: 'space-around',
-      }}>
-      <Animatable.View
-        animation={slideRight}
-        iterationCount="infinite"
-        duration={5000}
-        delay={3000}
-        iterationDelay={1000}
-        direction="normal"
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          padding: 5,
-          borderRadius: 5,
-          marginBottom: 10,
-          marginTop: -30,
-        }}>
-        <Icon name="star" size={SIZE.xl} color="orange" />
-      </Animatable.View>
-
-      <Animatable.View
-        animation={slideRight}
-        iterationCount="infinite"
-        duration={6000}
-        iterationDelay={0}
-        direction="normal"
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          padding: 5,
-          borderRadius: 5,
-          marginBottom: 10,
-        }}>
-        <Icon name="star" size={SIZE.xl} color="orange" />
-      </Animatable.View>
-
-      <Animatable.View
-        animation={slideRight}
-        iterationCount="infinite"
-        duration={7000}
-        delay={1500}
-        iterationDelay={500}
-        direction="normal"
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          padding: 5,
-          borderRadius: 5,
-          marginBottom: 10,
-          marginTop: -30,
-        }}>
-        <Icon name="star" size={SIZE.xxl} color="orange" />
-      </Animatable.View>
-
-      <Animatable.View
-        animation={slideRight}
-        iterationCount="infinite"
-        duration={5000}
-        delay={3000}
-        iterationDelay={1000}
-        direction="normal"
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          padding: 5,
-          borderRadius: 5,
-          marginBottom: 10,
-        }}>
-        <Icon name="star" size={SIZE.xl} color="orange" />
-      </Animatable.View>
-
-      <Animatable.View
-        animation={slideRight}
-        iterationCount="infinite"
-        duration={5000}
-        delay={3000}
-        iterationDelay={1000}
-        direction="normal"
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          padding: 5,
-          borderRadius: 5,
-          marginBottom: 10,
-          marginTop: -30,
-        }}>
-        <Icon name="star" size={SIZE.xl} color="orange" />
-      </Animatable.View>
-    </View>
-  );
-};
-
-export const TagsPlaceHolder = ({colors, animation}) => {
-  const slideRight = {
-    0: {
-      transform: [
-        {scaleX: 0.8},
-        {
-          scaleY: 0.8,
-        },
-        {
-          translateX: 2,
-        },
-        {
-          translateY: 2,
-        },
-      ],
-      opacity: 0,
-    },
-    0.6: {
-      transform: [
-        {scaleX: 0.9},
-        {
-          scaleY: 0.9,
-        },
-        {
-          translateX: 0,
-        },
-        {
-          translateY: 0,
-        },
-      ],
-
-      opacity: 1,
-    },
-    1: {
-      transform: [
-        {scaleX: 1},
-        {
-          scaleY: 1,
-        },
-        {
-          translateX: -2,
-        },
-        {
-          translateY: -2,
-        },
-      ],
-      opacity: 0,
-    },
-  };
-
-  return (
-    <View
-      style={{
-        width: w * 0.6,
-        height: 200,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      <Animatable.View
-        animation={slideRight}
-        iterationCount="infinite"
-        duration={11000}
-        iterationDelay={500}
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          position: 'absolute',
-          left: 10,
-          top: 60,
-        }}>
-        <View
-          style={{
-            borderRadius: 5,
-            flexDirection: 'row',
-            alignItems: 'center',
-            padding: 4,
-          }}>
-          <Text
-            style={{
-              color: colors.accent,
-              fontSize: SIZE.sm,
-            }}>
-            #presentations
-          </Text>
-        </View>
-      </Animatable.View>
-      <Animatable.View
-        animation={slideRight}
-        iterationCount="infinite"
-        duration={10000}
-        iterationDelay={1000}
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          position: 'absolute',
-          left: 0,
-          top: 100,
-        }}>
-        <View
-          style={{
-            borderRadius: 5,
-            flexDirection: 'row',
-            alignItems: 'center',
-            padding: 4,
-          }}>
-          <Text
-            style={{
-              color: colors.accent,
-              fontSize: SIZE.sm,
-            }}>
-            #morningcoffee
-          </Text>
-        </View>
-      </Animatable.View>
-      <Animatable.View
-        animation={slideRight}
-        iterationCount="infinite"
-        duration={15000}
-        iterationDelay={1500}
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          position: 'absolute',
-          left: 120,
-          top: 60,
-        }}>
-        <View
-          style={{
-            borderRadius: 5,
-            flexDirection: 'row',
-            alignItems: 'center',
-            padding: 4,
-          }}>
-          <Text
-            style={{
-              color: colors.accent,
-              fontSize: SIZE.sm,
-            }}>
-            #quotesonlife
-          </Text>
-        </View>
-      </Animatable.View>
-      <Animatable.View
-        animation={slideRight}
-        iterationCount="infinite"
-        duration={8000}
-        iterationDelay={1500}
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          position: 'absolute',
-          left: 140,
-          top: 100,
-        }}>
-        <View
-          style={{
-            borderRadius: 5,
-            flexDirection: 'row',
-            alignItems: 'center',
-            padding: 4,
-          }}>
-          <Text
-            style={{
-              color: colors.accent,
-              fontSize: SIZE.sm,
-            }}>
-            #workinprogress
-          </Text>
-        </View>
-      </Animatable.View>
-      <Animatable.View
-        animation={slideRight}
-        iterationCount="infinite"
-        duration={12000}
-        iterationDelay={2000}
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          position: 'absolute',
-          left: 20,
-          top: 140,
-        }}>
-        <View
-          style={{
-            borderRadius: 5,
-            flexDirection: 'row',
-            alignItems: 'center',
-            padding: 4,
-          }}>
-          <Text
-            style={{
-              color: colors.accent,
-              fontSize: SIZE.sm,
-            }}>
-            #todolists
-          </Text>
-        </View>
-      </Animatable.View>
-      <Animatable.View
-        animation={slideRight}
-        iterationCount="infinite"
-        duration={10000}
-        iterationDelay={0}
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          position: 'absolute',
-          left: 120,
-          top: 140,
-        }}>
-        <View
-          style={{
-            borderRadius: 5,
-            flexDirection: 'row',
-            alignItems: 'center',
-            padding: 4,
-          }}>
-          <Text
-            style={{
-              color: colors.accent,
-              fontSize: SIZE.sm,
-            }}>
-            #myschoolwork
-          </Text>
-        </View>
-      </Animatable.View>
+      <SvgXml xml={getSVG()} width="100%" height="100%" />
     </View>
   );
 };