diff --git a/components/Elements/Dropdown.vue b/components/Elements/Dropdown.vue
index e1885c6..ae0bded 100644
--- a/components/Elements/Dropdown.vue
+++ b/components/Elements/Dropdown.vue
@@ -66,7 +66,7 @@
   }
 
   .dropdown-link {
-    @apply w-full flex flex-row flex-no-wrap items-center justify-start;
+    @apply w-full h-full flex flex-row flex-no-wrap items-center justify-start;
   }
 
   .dropdown-link:hover>* {
@@ -84,7 +84,6 @@
   .dropdown-menu {
     @apply absolute z-10 overflow-y-auto py-4 my-4 bg-white;
     top: 100%;
-    left: 40px;
     background-clip: padding-box;
   }
 
diff --git a/components/Lists/AppAll.vue b/components/Lists/AppAll.vue
index 4b8ad9c..9fe610e 100644
--- a/components/Lists/AppAll.vue
+++ b/components/Lists/AppAll.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="grid-list container">
     <div class="flex flex-row flex-wrap justify-between items-center mb-8">
-      <h2 v-if="title" class="mb-4 flex-grow">{{ title }}</h2>
-      <div class="flex flex-row flex-no-wrap justify-start items-center mb-4">
+      <h2 v-if="title" class="mb-4">{{ title }}</h2>
+      <div class="flex flex-grow flex-row flex-no-wrap justify-end items-center mb-4">
         <!-- Sort -->
         <div class="inline-block relative">
           <select name="sortMembers" id="sortMembers" v-model="sortValue"
diff --git a/lang/ar.js b/lang/ar.js
index 2fc2668..ed1acf8 100644
--- a/lang/ar.js
+++ b/lang/ar.js
@@ -5,6 +5,7 @@ export default {
   popularApps: 'التطبيقات الأكثر شعبية',
   allGuides: 'جميع الأدلة الإرشادية',
   allApps: 'جميع التطبيقات',
+  apps: 'التطبيقات',
   all: 'الجميع',
   content: 'المحتوى',
   weeklyRecommendations: 'تطبيقات مقترحة أسبوعياً',
@@ -13,7 +14,8 @@ export default {
   allHelpdesks: 'جميع مكاتب المساعدة',
   helpdesk: 'مكتب المساعدة',
   noResults: 'لا توجد نتائج',
-  search: 'بحث في',
+  searchIn: 'بحث في',
+  search: 'بحث',
   searchResults: 'البحث عن:',
   stepByStep: 'خطوة بخطوة',
   submit: 'إرسال',
diff --git a/lang/en.js b/lang/en.js
index 726bf28..7574096 100644
--- a/lang/en.js
+++ b/lang/en.js
@@ -5,6 +5,7 @@ export default {
   popularApps: 'Popular Apps',
   allGuides: 'All Guides',
   allApps: 'All Apps',
+  apps: 'Apps',
   all: 'All',
   content: 'Content',
   weeklyRecommendations: 'Weekly Recommendations',
@@ -13,7 +14,8 @@ export default {
   allHelpdesks: 'All Helpdesks',
   helpdesk: 'Helpdesk',
   noResults: 'No results',
-  search: 'Search in',
+  searchIn: 'Search in',
+  search: 'Search',
   searchResults: 'Searching for:',
   stepByStep: 'Step-by-step',
   submit: 'Submit',
diff --git a/pages/apps/category/_slug.vue b/pages/apps/category/_slug.vue
new file mode 100644
index 0000000..c2b6668
--- /dev/null
+++ b/pages/apps/category/_slug.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <UIBanner :title="pageInfo['title_' + $i18n.locale]" :description="pageInfo['description_' + $i18n.locale]" />
+    <div class="container flex flex-col-reverse lg:flex-row justify-between py-6">
+      <ElementsDropdown :items="categories" :active="activeCat" @setActive="setActiveCat" class="min-w-xs" />
+      <ElementsControlInput v-model="searchString" :placeholder="$t('searchIn') + ' ' + activeCatTitle"
+        class="search-bar mb-8 lg:mb-0 rounded-full flex-grow w-full lg:w-auto rtl:mr-8 ltr:ml-8" />
+    </div>
+    <ListsAppAll v-if="allApps.length" :title="searchString ? $t('searchResults') + ' ' + searchString : ''"
+      :contentList="filterBy(allApps, searchString, 'name_en', 'name_ar')" class="my-10" />
+  </div>
+</template>
+<script>
+  import Vue2Filters from 'vue2-filters';
+  export default {
+    mixins: [Vue2Filters.mixin],
+    data() {
+      return {
+        active: '',
+        activeCatTitle: '',
+        searchString: ''
+      }
+    },
+    mounted() {
+      let category = this.$route.params.slug
+      let categories = this.categories
+      try {
+        let activeCat = categories.find((cat) => {
+          return cat.name == category
+        })
+        this.active = activeCat.name
+        this.activeCatTitle = activeCat['title_' + this.$i18n.locale]
+      } catch (err) {
+        return this.$nuxt.error({
+          statusCode: 404,
+          message: '404 Page Not Found'
+        })
+      }
+    },
+    computed: {
+      pageInfo() {
+        return this.$store.getters.getPages.find((page) => page.page_id == 'apps')
+      },
+      allApps() {
+        let list = this.$store.state.apps.list
+        let filteredList = list.filter((item) => {
+          return item.category.name == this.active
+        })
+        return filteredList
+      },
+      categories() {
+        return this.$store.state.apps.categories
+      },
+      activeCat() {
+        return this.active
+      }
+    },
+    async fetch() {
+      let list = this.$store.state.apps.list
+      let categories = this.$store.state.apps.categories
+      if (list.length < 1) {
+        await this.$store.dispatch("apps/fetch")
+      }
+      if (categories.length < 1) {
+        await this.$store.dispatch('apps/fetchCategories')
+      }
+    },
+    methods: {
+      setActiveCat(value) {
+        let path
+        if (value == 'all') {
+          path = this.localePath('/apps')
+        } else {
+          path = this.localePath('/apps/category/' + value)
+        }
+        this.$router.push(path)
+      }
+    }
+  }
+
+</script>
diff --git a/pages/apps/index.vue b/pages/apps/index.vue
index 8fa078a..cbe77c5 100644
--- a/pages/apps/index.vue
+++ b/pages/apps/index.vue
@@ -3,15 +3,15 @@
     <UIBanner :title="pageInfo['title_' + $i18n.locale]" :description="pageInfo['description_' + $i18n.locale]" />
     <div class="container flex flex-col-reverse lg:flex-row justify-between py-6">
       <ElementsDropdown :items="categories" :active="activeCat" @setActive="setActiveCat" class="min-w-xs" />
-      <ElementsControlInput v-model="searchString" :placeholder="$t('search') + ' ' + activeCatTitle"
-        class="search-bar mb-8 lg:mb-0 rounded-full flex-grow w-full lg:w-auto" />
+      <ElementsControlInput v-model="searchString" :placeholder="$t('search')"
+        class="search-bar mb-8 lg:mb-0 rounded-full flex-grow w-full lg:w-auto rtl:mr-8 ltr:ml-8" />
     </div>
     <ListsAppSpotlight v-if="spotlightApps.length && !searchString" :title="$t('spotlightApp')"
       :content="orderBy(spotlightApps, 'published_at', -1)[0]" class="mt-10" />
     <ListsAppGrid v-if="popularApps.length && !searchString" :title="$t('popularApps')" :contentList="popularApps"
       :count="3" class="mt-10" />
     <ListsAppAll v-if="allApps.length" :title="searchString ? $t('searchResults') + ' ' + searchString : $t('allApps')"
-      :contentList="filterBy(allApps, searchString, 'name_en', 'description_en', 'name_ar', 'description_ar')"
+      :contentList="filterBy(allApps, searchString, 'name_en', 'name_ar')"
       class="my-10" />
   </div>
 </template>
@@ -31,81 +31,36 @@
         return this.$store.getters.getPages.find((page) => page.page_id == 'apps')
       },
       allApps() {
-        let list = this.$store.state.apps.list
-        if (this.active != 'all') {
-          let filteredList = list.filter((item) => {
-            return item.category.name == this.active
-          })
-          return filteredList
-        } else {
-          return list
-        }
+        return this.$store.state.apps.list
       },
       popularApps() {
-        let list = this.$store.state.apps.popular
-        if (this.active != 'all') {
-          let filteredList = list.filter((item) => {
-            return item.category.name == this.active
-          })
-          return filteredList
-        } else {
-          return list
-        }
+        return this.$store.state.apps.popular
       },
       spotlightApps() {
-        let list = this.$store.state.apps.spotlight
-        if (this.active != 'all') {
-          let filteredList = list.filter((item) => {
-            return item.category.name == this.active
-          })
-          return filteredList
-        } else {
-          return list
-        }
-      },
-      publishers() {
-        return this.$store.state.apps.publishers
+        return this.$store.state.apps.spotlight
       },
       categories() {
         return this.$store.state.apps.categories
       },
       activeCat() {
-        let hash = this.$route.hash.replace('#', '')
-        let cat = this.categories.find((cat) => {
-          return cat.name == hash
-        })
-        if (cat && hash != '#all') {
-          this.active = hash
-          this.activeCatTitle = cat['title_' + this.$i18n.locale]
-        } else {
-          this.active = 'all'
-          this.activeCatTitle = this.$t('all')
-        }
         return this.active
       }
     },
     async fetch() {
       let list = this.$store.state.apps.list
       let categories = this.$store.state.apps.categories
-      let publishers = this.$store.state.apps.publishers
       if (list.length < 1) {
         await this.$store.dispatch("apps/fetch")
       }
       if (categories.length < 1) {
         await this.$store.dispatch('apps/fetchCategories')
       }
-      if (publishers.length < 1) {
-        await this.$store.dispatch('apps/fetchPublishers')
-      }
     },
     methods: {
-      setActiveCat(value, title) {
-        this.active = value
-        this.activeCatTitle = title
-        if (value == 'all') {
-          this.$router.push('')
-        } else {
-          this.$router.push('#' + value)
+      setActiveCat(value) {
+        if (value != 'all') {
+          let path = this.localePath('/apps/category/' + value)
+          this.$router.push(path)
         }
       }
     }