diff --git a/app/components/App.vue b/app/components/App.vue
index 0ff23d4a..a9332569 100644
--- a/app/components/App.vue
+++ b/app/components/App.vue
@@ -55,7 +55,9 @@
               :key="index"
               orientation="horizontal"
               class="drawer-item orkm"
-              :class="{ 'selected-drawer-item': selectedCategory == item }"
+              :class="{
+                'selected-drawer-item': selectedCategory == item,
+              }"
             >
               <Label class="bx" :text="icon.label" margin="0 24 0 0" />
               <Label :text="item" />
@@ -71,7 +73,9 @@
             :key="index"
             orientation="horizontal"
             class="drawer-item orkm"
-            :class="{ 'selected-drawer-item': currentComponent == item.title }"
+            :class="{
+              'selected-drawer-item': currentComponent == item.title,
+            }"
           >
             <Label class="bx" :text="item.icon" margin="0 24 0 0" />
             <Label :text="item.title" />
@@ -127,7 +131,7 @@
                   col="1"
                 />
                 <Label
-                  v-if="!filterFavorites && currentComponent == 'EnRecipes'"
+                  v-if="currentComponent == 'EnRecipes'"
                   color="#000000"
                   class="bx"
                   :text="icon.search"
@@ -156,6 +160,7 @@
                 :selectedCategory="selectedCategory"
                 :searchQuery="searchQuery"
                 :filterFavorites="filterFavorites"
+                :highlight="highlight"
               />
             </GridLayout>
           </Page>
@@ -288,6 +293,14 @@ export default {
     },
   },
   methods: {
+    highlight(args) {
+      console.log(args.object.className)
+      let temp = args.object.className
+      args.object.className = `${temp} option-highlight`
+      setTimeout(() => {
+        args.object.className = temp
+      }, 100)
+    },
     setSelectedCategory(e) {
       this.selectedCategory = e.item
       console.log(e)
diff --git a/app/components/EnRecipes.vue b/app/components/EnRecipes.vue
index 812f947a..ec3f484b 100644
--- a/app/components/EnRecipes.vue
+++ b/app/components/EnRecipes.vue
@@ -1,7 +1,50 @@
 <template>
   <AbsoluteLayout>
     <ScrollView scrollBarIndicatorVisible="false" width="100%" height="100%">
-      <StackLayout>
+      <StackLayout v-if="filteredRecipes.length">
+        <!-- <RadListView
+          ref="listView"
+          for="item in filteredRecipes"
+          swipeActions="true"
+          @itemSwipeProgressStarted="onSwipeStarted"
+        >
+          <v-template>
+            <StackLayout class="item p-t-10" orientation="vertical">
+              <Label :text="item.name" class="nameLabel"></Label>
+              <Label :text="item.description" class="descriptionLabel"></Label>
+            </StackLayout>
+          </v-template>
+          <v-template name="itemswipe">
+            <GridLayout columns="auto, *, auto" backgroundColor="White">
+              <StackLayout
+                id="mark-view"
+                col="0"
+                class="swipe-item left"
+                orientation="horizontal"
+                @tap="onLeftSwipeClick"
+              >
+                <Label
+                  text="mark"
+                  verticalAlignment="center"
+                  horizontalAlignment="center"
+                />
+              </StackLayout>
+              <StackLayout
+                id="delete-view"
+                col="2"
+                class="swipe-item right"
+                orientation="horizontal"
+                @tap="onRightSwipeClick"
+              >
+                <Label
+                  text="delete"
+                  verticalAlignment="center"
+                  horizontalAlignment="center"
+                />
+              </StackLayout>
+            </GridLayout>
+          </v-template>
+        </RadListView>-->
         <GridLayout
           v-for="recipe in filteredRecipes"
           :key="recipe.id"
@@ -24,6 +67,16 @@
         </GridLayout>
         <StackLayout height="128"></StackLayout>
       </StackLayout>
+      <Label
+        v-else
+        class="recipe-list-item"
+        horizontalAlignment="center"
+        :text="
+          `Your search '${searchQuery}' did not match any recipes in this category.`
+        "
+        textAlignment="center"
+        textWrap="true"
+      />
     </ScrollView>
     <GridLayout id="btnFabContainer" rows="*,88" columns="*,88">
       <Label
@@ -58,16 +111,21 @@ export default {
       }, {})
     },
     filteredRecipes() {
-      if (this.selectedCategory)
-        return this.recipesByCategory[this.selectedCategory]
-      else {
+      if (this.selectedCategory) {
+        return this.recipesByCategory[this.selectedCategory].filter((e) => {
+          if (e.title.toLowerCase().includes(this.searchQuery)) return e
+        })
+      } else if (this.filterFavorites) {
+        console.log("fav")
         return this.recipes.filter((e) => {
-          if (this.filterFavorites) {
-            if (e.isFavorite) return e
-          } else {
+          if (e.isFavorite) {
             if (e.title.toLowerCase().includes(this.searchQuery)) return e
           }
         })
+      } else {
+        return this.recipes.filter((e) => {
+          if (e.title.toLowerCase().includes(this.searchQuery)) return e
+        })
       }
     },
   },
diff --git a/app/components/Favorites.vue b/app/components/Favorites.vue
deleted file mode 100644
index b882a63e..00000000
--- a/app/components/Favorites.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <AbsoluteLayout>
-    <Label text="Favorites" textWrap="true" />
-  </AbsoluteLayout>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/app/components/Settings.vue b/app/components/Settings.vue
index fc1ade7f..03395985 100644
--- a/app/components/Settings.vue
+++ b/app/components/Settings.vue
@@ -35,6 +35,7 @@
 import { Menu } from "nativescript-menu"
 import * as permissions from "nativescript-permissions"
 export default {
+  props: ["highlight"],
   data() {
     return {
       icon: {
@@ -75,6 +76,7 @@ export default {
   },
   methods: {
     selectThemes(args) {
+      this.highlight(args)
       let btn = args.object
       Menu.popup({
         view: btn,
@@ -89,6 +91,7 @@ export default {
         .catch(console.log)
     },
     selectBackupDir(args) {
+      this.highlight(args)
       let btn = args.object
       permissions
         .requestPermission(android.Manifest.permission.WRITE_EXTERNAL_STORAGE)
@@ -101,6 +104,7 @@ export default {
     },
     backupData(args) {
       let btn = args.object
+      this.highlight(args)
       permissions
         .requestPermission(android.Manifest.permission.WRITE_EXTERNAL_STORAGE)
         .then(() => {
@@ -112,6 +116,7 @@ export default {
     },
     restoreData(args) {
       let btn = args.object
+      this.highlight(args)
       permissions
         .requestPermission(android.Manifest.permission.WRITE_EXTERNAL_STORAGE)
         .then(() => {
@@ -125,6 +130,9 @@ export default {
 }
 </script>
 <style lang="scss">
+.option-highlight {
+  background-color: #eeeeee;
+}
 .group-header {
   padding: 12;
   color: #ff7043;
diff --git a/app/main.js b/app/main.js
index 57da9727..a6c33081 100644
--- a/app/main.js
+++ b/app/main.js
@@ -1,5 +1,6 @@
 import Vue from "nativescript-vue"
 import App from "./components/App"
+// import RadListView from "nativescript-ui-listview/vue"
 
 Vue.registerElement(
   "CheckBox",
@@ -11,6 +12,7 @@ Vue.registerElement(
     },
   }
 )
+// Vue.use('RadListView')
 // import VueDevtools from 'nativescript-vue-devtools'
 
 // import { TNSFontIcon, fonticon } from 'nativescript-fonticon'
diff --git a/package-lock.json b/package-lock.json
index 69cf36b4..90659c52 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1515,6 +1515,11 @@
         "readable-stream": "^2.0.6"
       }
     },
+    "arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
+    },
     "arity-n": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/arity-n/-/arity-n-1.0.4.tgz",
@@ -2079,8 +2084,7 @@
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
-      "dev": true
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
     },
     "buffer-xor": {
       "version": "1.0.3",
@@ -2919,6 +2923,11 @@
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
       "dev": true
     },
+    "diff": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A=="
+    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -4638,6 +4647,11 @@
         }
       }
     },
+    "make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
+    },
     "map-age-cleaner": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
@@ -5191,11 +5205,6 @@
         "mkdirp": "^0.5.1"
       }
     },
-    "nativescript-material-icons": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/nativescript-material-icons/-/nativescript-material-icons-1.0.3.tgz",
-      "integrity": "sha1-d/qP23jsCR3EpqeFTnaF6iiVAIw="
-    },
     "nativescript-menu": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/nativescript-menu/-/nativescript-menu-1.1.6.tgz",
@@ -5216,6 +5225,15 @@
       "resolved": "https://registry.npmjs.org/nativescript-ui-core/-/nativescript-ui-core-4.0.0.tgz",
       "integrity": "sha512-YbGZApyI84RGSevCmXVD18yGov7/RJyLcIXXx6p2y4WM41hL+uRxyUak/9qLP2vwSSy0bCZKXFoyYwsIcf8EoA=="
     },
+    "nativescript-ui-listview": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/nativescript-ui-listview/-/nativescript-ui-listview-9.0.2.tgz",
+      "integrity": "sha512-FoybUHhD+cHsxQKf9EVyY1f/UWBkqb/B77+aSR6dwyPvRGSYymiEKRemsjBosWwgbOH3oy6gBaHOioYhxHE0AA==",
+      "requires": {
+        "nativescript-ui-core": "~4.0.0",
+        "ts-node": "^8.10.2"
+      }
+    },
     "nativescript-ui-sidedrawer": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/nativescript-ui-sidedrawer/-/nativescript-ui-sidedrawer-8.0.1.tgz",
@@ -7182,7 +7200,6 @@
       "version": "0.5.19",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
       "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
-      "dev": true,
       "requires": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -7755,6 +7772,18 @@
         }
       }
     },
+    "ts-node": {
+      "version": "8.10.2",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.10.2.tgz",
+      "integrity": "sha512-ISJJGgkIpDdBhWVu3jufsWpK3Rzo7bdiIXJjQc0ynKxVOVcg2oIrf2H2cejminGrptVc6q6/uynAHNCuWGbpVA==",
+      "requires": {
+        "arg": "^4.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "source-map-support": "^0.5.17",
+        "yn": "3.1.1"
+      }
+    },
     "tslib": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
@@ -8484,6 +8513,11 @@
         "camelcase": "^5.0.0",
         "decamelize": "^1.2.0"
       }
+    },
+    "yn": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q=="
     }
   }
 }
diff --git a/package.json b/package.json
index e787181f..6b6d8ba9 100644
--- a/package.json
+++ b/package.json
@@ -18,10 +18,10 @@
     "@nativescript/theme": "^2.2.1",
     "@nstudio/nativescript-checkbox": "^1.0.0",
     "nativescript-fonticon": "^2.0.2",
-    "nativescript-material-icons": "^1.0.3",
     "nativescript-menu": "^1.1.6",
     "nativescript-permissions": "^1.3.9",
     "nativescript-popup": "^1.5.0",
+    "nativescript-ui-listview": "^9.0.2",
     "nativescript-ui-sidedrawer": "^8.0.1",
     "nativescript-vue": "^2.6.1",
     "tns-core-modules": "^6.5.1",
diff --git a/tsconfig.json b/tsconfig.json
deleted file mode 100644
index 9938d717..00000000
--- a/tsconfig.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
-    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    "lib": [
-      "dom", "es2015"
-    ],                             /* Specify library files to be included in the compilation. */
-    "sourceMap": true,                     /* Generates corresponding '.map' file. */
-    "noEmitHelpers": true,
-    "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
-    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    "baseUrl": ".",                       /* Base directory to resolve non-absolute module names. */
-    "paths": {
-      "@/*": [
-        "app/*"
-      ]
-     },                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-    "typeRoots": [
-      "types"
-    ],                       /* List of folders to include type definitions from. */
-    "types": [
-      "node"
-    ],                           /* Type declaration files to be included in compilation. */
-    "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true,                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-    "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
-    "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
-
-    "skipLibCheck": true
-  },
-  "include": [
-    "app",
-    "types"
-  ],
-  "exclude": [
-    "node_modules",
-    "platforms"
-  ]
-}
\ No newline at end of file