diff --git a/package-lock.json b/package-lock.json
index 46ee5c5..ebc67a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4777,9 +4777,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001583",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001583.tgz",
-      "integrity": "sha512-acWTYaha8xfhA/Du/z4sNZjHUWjkiuoAi2LM+T/aL+kemKQgPT1xBb/YKjlQ0Qo8gvbHsGNplrEJ+9G3gL7i4Q==",
+      "version": "1.0.30001666",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001666.tgz",
+      "integrity": "sha512-gD14ICmoV5ZZM1OdzPWmpx+q4GyefaK06zi8hmfHV5xe4/2nOQX3+Dw5o+fSqOws2xVwL9j+anOPFwHzdEdV4g==",
       "dev": true,
       "funding": [
         {
@@ -4794,7 +4794,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 1e85d55..9accf81 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -286,5 +286,11 @@
     },
     "alertHostPermissionsRequiredButtonAllUrls": {
         "message": "All URLs to ensure full support"
+    },
+    "pluginListEnabledPlugins": {
+        "message": "Enabled plugins"
+    },
+    "pluginListDisabledPlugins": {
+        "message": "Disabled plugins"
     }
 }
diff --git a/src/popup/App.vue b/src/popup/App.vue
index cf490d1..8db7f93 100644
--- a/src/popup/App.vue
+++ b/src/popup/App.vue
@@ -12,23 +12,14 @@
     <section class="section options">
       <SectionOptions> </SectionOptions>
     </section>
-    <section class="section plugins">
-      <SectionPlugins
-        v-bind:category_name="category_name"
-        v-bind:plugins="plugins"
-        v-bind:categories="categories"
-      >
-      </SectionPlugins>
-    </section>
     <Message></Message>
     <Alert></Alert>
   </div>
 </template>
 
 <script>
-import SectionMainMenu from "./components/SectionMainMenu.vue";
+import SectionMainMenu from "./components/SectionMainMenu/SectionMainMenu.vue";
 import SectionOptions from "./components/SectionOptions.vue";
-import SectionPlugins from "./components/SectionPlugins.vue";
 
 import Message from "./components/Message";
 import Alert from "./components/Alert";
@@ -51,7 +42,6 @@ export default {
   components: {
     SectionMainMenu,
     SectionOptions,
-    SectionPlugins,
     Message,
     Alert,
   },
@@ -105,19 +95,6 @@ object {
   pointer-events: none;
 }
 
-/*
- * item-wrapper
- */
-.item-wrapper {
-  border-bottom: 1px solid var(--color-white);
-}
-.item-wrapper:last-child {
-  border-bottom: 0;
-}
-.categories .item-wrapper:last-child {
-  border-bottom: 1px solid var(--color-white);
-}
-
 /*
  * section
  */
@@ -138,8 +115,7 @@ body#main-menu .section.main-menu {
   margin-left: 0;
   z-index: 1;
 }
-body#options .section.options,
-body#plugins .section.plugins {
+body#options .section.options {
   margin-left: 0;
 }
 
@@ -156,8 +132,7 @@ body#main-menu #app.is_safari .section.main-menu {
   display: block;
 }
 
-body#options #app.is_safari .section.options,
-body#plugins #app.is_safari .section.plugins {
+body#options #app.is_safari .section.options {
   display: block;
 }
 
@@ -190,7 +165,7 @@ body#plugins #app.is_safari .section.plugins {
   --color-red: #ff4136;
   --color-black: #111;
   --color-gray: #aaa;
-  --color-silver: #eee;
+  --color-silver: #f4f4f4;
   --state-on: #43a047;
   --state-off: #e53935;
   --state-off2: #6c3939;
diff --git a/src/popup/components/Element.vue b/src/popup/components/Element.vue
deleted file mode 100644
index c57584e..0000000
--- a/src/popup/components/Element.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<!-- @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3 -->
-<template>
-  <div
-    class="element item-wrapper list__item"
-    v-bind:class="item_class"
-    v-bind:title="description"
-    v-on:click="item_onclick"
-  >
-    <i
-      class="element__action material-icons"
-      v-bind:class="{ icon_right: this.icon_position_is_right }"
-      v-html="icon_name"
-    ></i>
-    <span class="element__text">{{ text }}</span>
-    <span class="element__counter" v-html="counter"></span>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Element",
-  props: {
-    item_class: String,
-    text: String,
-    description: String,
-    counter: String,
-    icon_name: String,
-    icon_position_is_right: Boolean,
-  },
-  methods: {
-    item_onclick() {
-      this.$emit("item_onclick");
-    },
-  },
-};
-</script>
-
-<style scoped>
-.element {
-  display: flex;
-  cursor: pointer;
-  padding: 4px 10px 4px 10px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background: var(--color-white);
-}
-.element:hover,
-.element:active,
-.element:focus {
-  background: var(--color-silver);
-}
-.element__text {
-  flex: auto;
-  line-height: 24px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.element__counter {
-  line-height: 24px;
-  font-weight: 300;
-}
-.element__action {
-  padding: 2px;
-  margin-right: 8px;
-}
-.icon_right {
-  order: 1;
-  margin-right: 0;
-  margin-left: 8px;
-}
-</style>
diff --git a/src/popup/components/SectionMainMenu.vue b/src/popup/components/SectionMainMenu.vue
deleted file mode 100644
index 7cae6d9..0000000
--- a/src/popup/components/SectionMainMenu.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<!-- @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3 -->
-<template>
-  <div class="list">
-    <Title></Title>
-    <SearchBar v-model="search_query"></SearchBar>
-    <div class="search-results" v-if="search_query">
-      <ElementPlugin
-        v-for="(plugin, index) in search_results"
-        v-bind:key="index"
-        v-bind:category_name="plugin['category']"
-        v-bind:plugin="plugin"
-        v-bind:search_result_id="index"
-        v-bind:search_results="search_results"
-        @update-results="updateSearchResults"
-      ></ElementPlugin>
-      <Element
-        v-if="objIsEmpty(search_results)"
-        v-bind:text="_('noData')"
-      ></Element>
-    </div>
-    <ElementPlugin
-      v-bind:plugin="iitc_core"
-      v-if="!search_query"
-    ></ElementPlugin>
-    <div class="categories" v-if="!search_query">
-      <template
-        v-for="(cat, index) in sortIITCObj(
-          countPlugins(categories, plugins_flat)
-        )"
-      >
-        <Element
-          v-if="cat.name && cat.count_plugins"
-          v-bind:key="index"
-          v-bind:text="__('name', cat)"
-          v-bind:description="__('description', cat)"
-          v-bind:icon_name="'keyboard_arrow_right'"
-          v-bind:icon_position_is_right="true"
-          v-bind:counter="
-            cat.count_plugins_active + '&nbsp;/&nbsp;' + cat.count_plugins
-          "
-          v-on:item_onclick="openCategory(cat.name)"
-        ></Element>
-      </template>
-      <Element
-        v-if="objIsEmpty(categories)"
-        v-bind:text="_('noData')"
-      ></Element>
-    </div>
-  </div>
-</template>
-
-<script>
-import Title from "./Title";
-import SearchBar from "./SearchBar";
-import Element from "./Element";
-import ElementPlugin from "./ElementPlugin";
-import { mixin } from "./mixins.js";
-import { searchPlugins } from "@/popup/search";
-
-export default {
-  name: "SectionMainMenu",
-  props: {
-    categories: Object,
-    plugins_flat: Object,
-    iitc_core: Object,
-  },
-  data() {
-    return {
-      search_query: "",
-      search_results: {},
-    };
-  },
-  mixins: [mixin],
-  methods: {
-    openCategory: function (category_name) {
-      document.body.id = "plugins";
-      this.$parent.$data.category_name = category_name;
-
-      this.$parent.$data.plugins = Object.entries(
-        this.$parent.$data.plugins_flat
-      ).reduce((category_plugins, plugin_pair) => {
-        const [plugin_uid, plugin_obj] = plugin_pair;
-        if (plugin_obj["category"] === category_name) {
-          category_plugins[plugin_uid] = plugin_obj;
-        }
-        return category_plugins;
-      }, {});
-    },
-    countPlugins: function (categories, plugins) {
-      if (categories === undefined) return {};
-
-      Object.keys(categories).forEach((cat) => {
-        const [count_plugins, count_plugins_active] = Object.entries(
-          plugins
-        ).reduce(
-          (counter_pair, plugin_pair) => {
-            const [, plugin_obj] = plugin_pair;
-            let [total, active] = counter_pair;
-            if (plugin_obj["category"] === cat) {
-              total += 1;
-              if (plugin_obj["status"] === "on") {
-                active += 1;
-              }
-            }
-            return [total, active];
-          },
-          [0, 0]
-        );
-
-        categories[cat]["count_plugins"] = count_plugins;
-        categories[cat]["count_plugins_active"] = count_plugins_active;
-      });
-      return categories;
-    },
-    updateSearchResults(updatedResults) {
-      this.search_results = updatedResults;
-    },
-  },
-  watch: {
-    search_query: function (val) {
-      if (val === "*") {
-        this.search_results = this.sortIITCObj(this.plugins_flat);
-      } else {
-        this.search_results = searchPlugins(val, this.plugins_flat);
-      }
-    },
-  },
-  components: { Title, SearchBar, Element, ElementPlugin },
-};
-</script>
-
-<style scoped>
-.list {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.categories,
-.search-results {
-  height: 390px;
-  overflow-y: auto;
-}
-</style>
diff --git a/src/popup/components/SectionMainMenu/PluginList/NoData.vue b/src/popup/components/SectionMainMenu/PluginList/NoData.vue
new file mode 100644
index 0000000..84d6550
--- /dev/null
+++ b/src/popup/components/SectionMainMenu/PluginList/NoData.vue
@@ -0,0 +1,33 @@
+<!-- @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3 -->
+<template>
+  <div class="element item-wrapper list__item">
+    <span class="element__text">{{ _("noData") }}</span>
+  </div>
+</template>
+
+<script>
+import { mixin } from "@/popup/components/mixins.js";
+
+export default {
+  name: "NoData",
+  mixins: [mixin],
+};
+</script>
+
+<style scoped>
+.element {
+  display: flex;
+  cursor: pointer;
+  padding: 4px 4px 4px 40px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: var(--color-white);
+}
+
+.element__text {
+  flex: auto;
+  line-height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/popup/components/ElementPlugin.vue b/src/popup/components/SectionMainMenu/PluginList/Plugin.vue
similarity index 53%
rename from src/popup/components/ElementPlugin.vue
rename to src/popup/components/SectionMainMenu/PluginList/Plugin.vue
index ba46775..82edea3 100644
--- a/src/popup/components/ElementPlugin.vue
+++ b/src/popup/components/SectionMainMenu/PluginList/Plugin.vue
@@ -1,58 +1,66 @@
 <!-- @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3 -->
 <template>
-  <div
-    class="plugin item-wrapper"
-    :class="plugin.status"
-    :title="pluginDescription()"
-    :data-category="category_name"
-    :data-uid="plugin.uid"
-    v-if="plugin.uid"
-  >
-    <i
-      class="plugin__action material-icons"
-      @click="managePlugin"
-      v-if="plugin.status"
-      >{{ toggleIcon() }}
-    </i>
-    <img
-      class="plugin__icon"
-      :src="getIcon"
-      @click="managePlugin"
-      v-if="getIcon"
-    />
-    <span class="plugin__text" @click="managePlugin">{{
-      __("name", plugin)
-    }}</span>
-    <span v-if="plugin.override" class="plugin__user">{{
-      _("badgeOverride")
-    }}</span>
-    <template v-if="plugin.user">
+  <div class="element">
+    <div
+      class="plugin item-wrapper"
+      :class="plugin.status"
+      :title="pluginDescription()"
+      :data-uid="plugin.uid"
+      v-if="plugin.uid"
+    >
       <i
-        v-if="plugin.supportURL"
-        class="plugin__action___extra material-icons"
-        @click="openLink(plugin.supportURL)"
-        :title="[_('openSupport'), plugin.supportURL].join(' ')"
-        >home</i
-      >
+        class="plugin__action material-icons"
+        @click="managePlugin"
+        v-if="plugin.status"
+        >{{ toggleIcon() }}
+      </i>
       <i
-        class="plugin__action___extra material-icons"
-        @click="savePlugin"
-        :title="_('pluginSave')"
-        >save</i
-      >
-      <i
-        class="plugin__action___extra plugin__action___extra-delete material-icons"
-        @click="deletePlugin"
-        :title="_('pluginDelete')"
-        >delete</i
-      >
-    </template>
+        class="plugin__action disabled material-icons"
+        @click="managePlugin"
+        v-if="!plugin.status"
+        >toggle_on
+      </i>
+      <img
+        class="plugin__icon"
+        :src="getIcon"
+        @click="managePlugin"
+        v-if="getIcon"
+      />
+      <span class="plugin__text" @click="managePlugin">{{
+        __("name", plugin)
+      }}</span>
+      <span v-if="plugin.override" class="plugin__user">{{
+        _("badgeOverride")
+      }}</span>
+      <template v-if="plugin.user">
+        <i
+          v-if="plugin.supportURL"
+          class="plugin__action___extra material-icons"
+          @click="openLink(plugin.supportURL)"
+          :title="[_('openSupport'), plugin.supportURL].join(' ')"
+          >home</i
+        >
+        <i
+          class="plugin__action___extra material-icons"
+          @click="savePlugin"
+          :title="_('pluginSave')"
+          >save</i
+        >
+        <i
+          class="plugin__action___extra plugin__action___extra-delete material-icons"
+          @click="deletePlugin"
+          :title="_('pluginDelete')"
+          >delete</i
+        >
+      </template>
+    </div>
+    <div class="border"></div>
   </div>
 </template>
 
 <script>
 import browser from "webextension-polyfill";
-import { mixin } from "./mixins.js";
+import { mixin } from "@/popup/components/mixins.js";
 import { sanitizeFileName } from "lib-iitc-manager/src/helpers";
 
 const saveJS = (function () {
@@ -72,7 +80,6 @@ const saveJS = (function () {
 export default {
   name: "ElementPlugin",
   props: {
-    category_name: String,
     plugin: Object,
     search_result_id: Number,
     search_results: Object,
@@ -82,6 +89,7 @@ export default {
     pluginDescription: function () {
       return (
         (this.plugin["user"] ? `[v${this.plugin["version"]}] ` : "") +
+        (this.plugin["category"] ? `[${this.plugin["category"]}] ` : "") +
         this.__("description", this.plugin)
       );
     },
@@ -95,43 +103,22 @@ export default {
       }
 
       const action = this.plugin.status === "on" ? "off" : "on";
-      // eslint-disable-next-line vue/no-mutating-props
-      this.plugin.status = action;
-
-      this.showMessage(this._("needRebootIntel"));
-      await browser.runtime.sendMessage({
-        type: "managePlugin",
-        uid: this.plugin.uid,
-        action: action,
-      });
+      const updatedPlugin = { ...this.plugin, status: action };
+      this.$emit("update-plugin", updatedPlugin);
     },
     deletePlugin: async function () {
       const uid = this.plugin.uid;
-      const cat = this.category_name;
-      const category_plugins = this.$parent.$props.plugins;
 
-      if (cat && category_plugins) {
-        if (!category_plugins[uid]["override"]) delete category_plugins[uid];
-        const count_plugins = Object.entries(category_plugins).reduce(
-          (total, plugin_pair) => {
-            const [, plugin_obj] = plugin_pair;
-            if (plugin_obj["category"] === cat) total += 1;
-            return total;
-          },
-          0
-        );
-        if (count_plugins <= 0) {
-          this.back();
-        }
-      } else if (this.search_result_id !== undefined) {
-        const updatedResults = { ...this.search_results };
-        if (updatedResults[this.search_result_id]["override"] === true) {
-          updatedResults[this.search_result_id]["override"] = false;
-          updatedResults[this.search_result_id]["user"] = false;
-        } else {
-          delete updatedResults[this.search_result_id];
-        }
-        this.$emit("update-results", updatedResults);
+      if (this.plugin["override"] === true) {
+        const updatedPlugin = {
+          ...this.plugin,
+          override: false,
+          user: false,
+          status: "off",
+        };
+        this.$emit("update-plugin", updatedPlugin);
+      } else {
+        this.$emit("delete-plugin", this.plugin.uid);
       }
 
       this.showMessage(this._("needRebootIntel"));
@@ -161,13 +148,22 @@ export default {
 </script>
 
 <style scoped>
+.border {
+  border-bottom: 1px solid var(--color-silver);
+  width: calc(100% - 75px);
+  margin-left: 75px;
+}
+.element:hover .border {
+  border-bottom: 1px solid transparent;
+}
 .plugin {
   display: flex;
   cursor: pointer;
-  padding: 4px 10px 4px 10px;
+  padding: 5px 10px 4px 10px;
+  margin-top: -1px;
   text-overflow: ellipsis;
   white-space: nowrap;
-  background: var(--color-white);
+  background: transparent;
 }
 .plugin:hover,
 .plugin:active,
diff --git a/src/popup/components/SectionMainMenu/PluginList/PluginList.vue b/src/popup/components/SectionMainMenu/PluginList/PluginList.vue
new file mode 100644
index 0000000..95fba79
--- /dev/null
+++ b/src/popup/components/SectionMainMenu/PluginList/PluginList.vue
@@ -0,0 +1,81 @@
+<!-- @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3 -->
+<template>
+  <div class="list">
+    <template v-if="plugins">
+      <Title :text="_('pluginListEnabledPlugins')"></Title>
+      <Plugin :plugin="iitc_core" v-if="search_query === ''"></Plugin>
+      <Plugin
+        v-for="(plugin, index) in enabledPlugins"
+        :key="index"
+        :plugin="plugin"
+        @update-plugin="handlePluginUpdate"
+        @delete-plugin="handlePluginDelete"
+      ></Plugin>
+      <NoData v-if="objIsEmpty(enabledPlugins) && search_query !== ''"></NoData>
+    </template>
+    <template v-if="plugins">
+      <Title v-bind:text="_('pluginListDisabledPlugins')"></Title>
+      <Plugin
+        v-for="(plugin, index) in disabledPlugins"
+        :key="index"
+        :plugin="plugin"
+        @update-plugin="handlePluginUpdate"
+        @delete-plugin="handlePluginDelete"
+      ></Plugin>
+      <NoData v-if="objIsEmpty(disabledPlugins)"></NoData>
+    </template>
+  </div>
+</template>
+
+<script>
+import Title from "./Title.vue";
+import Plugin from "./Plugin.vue";
+import { mixin } from "@/popup/components/mixins.js";
+import NoData from "@/popup/components/SectionMainMenu/PluginList/NoData.vue";
+
+export default {
+  name: "ListPlugins",
+  props: {
+    plugins: Object,
+    iitc_core: Object,
+    search_query: String,
+  },
+  data() {
+    return {};
+  },
+  mixins: [mixin],
+  methods: {
+    handlePluginUpdate(updatedPlugin) {
+      this.$emit("update-plugin", updatedPlugin);
+    },
+    handlePluginDelete(pluginUID) {
+      this.$emit("delete-plugin", pluginUID);
+    },
+  },
+  computed: {
+    enabledPlugins() {
+      const obj = Object.fromEntries(
+        Object.entries(this.plugins).filter(
+          ([, plugin]) => plugin.status === "on"
+        )
+      );
+      return this.sortIITCObj(obj);
+    },
+    disabledPlugins() {
+      const obj = Object.fromEntries(
+        Object.entries(this.plugins).filter(
+          ([, plugin]) => plugin.status !== "on"
+        )
+      );
+      return this.sortIITCObj(obj);
+    },
+  },
+  components: { NoData, Title, Plugin },
+};
+</script>
+
+<style scoped>
+.list {
+  overflow-y: scroll;
+}
+</style>
diff --git a/src/popup/components/SectionMainMenu/PluginList/Title.vue b/src/popup/components/SectionMainMenu/PluginList/Title.vue
new file mode 100644
index 0000000..2ad9e37
--- /dev/null
+++ b/src/popup/components/SectionMainMenu/PluginList/Title.vue
@@ -0,0 +1,47 @@
+<!-- @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3 -->
+<template>
+  <div class="element">
+    <div class="title" v-bind:title="description" v-on:click="item_onclick">
+      <span class="title__text">{{ text }}</span>
+    </div>
+    <div class="border"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Title",
+  props: {
+    text: String,
+    description: String,
+  },
+  methods: {
+    item_onclick() {
+      this.$emit("item_onclick");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.border {
+  border-bottom: 1px solid var(--color-silver);
+  width: calc(100% - 40px);
+  margin-left: 40px;
+}
+
+.title {
+  display: flex;
+  padding: 6px 4px 4px 40px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.title__text {
+  flex: auto;
+  line-height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-black);
+}
+</style>
diff --git a/src/popup/components/ProgressBar.vue b/src/popup/components/SectionMainMenu/ProgressBar.vue
similarity index 100%
rename from src/popup/components/ProgressBar.vue
rename to src/popup/components/SectionMainMenu/ProgressBar.vue
diff --git a/src/popup/components/SearchBar.vue b/src/popup/components/SectionMainMenu/SearchBar.vue
similarity index 97%
rename from src/popup/components/SearchBar.vue
rename to src/popup/components/SectionMainMenu/SearchBar.vue
index d5a1a92..d1229c1 100644
--- a/src/popup/components/SearchBar.vue
+++ b/src/popup/components/SectionMainMenu/SearchBar.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { mixin } from "./mixins.js";
+import { mixin } from "../mixins.js";
 
 export default {
   name: "SearchBar",
diff --git a/src/popup/components/SectionMainMenu/SectionMainMenu.vue b/src/popup/components/SectionMainMenu/SectionMainMenu.vue
new file mode 100644
index 0000000..a3e33df
--- /dev/null
+++ b/src/popup/components/SectionMainMenu/SectionMainMenu.vue
@@ -0,0 +1,112 @@
+<!-- @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3 -->
+<template>
+  <div class="list">
+    <Title></Title>
+    <SearchBar v-model="search_query"></SearchBar>
+    <Tags :categories="categories" :all_plugins="plugins_flat"></Tags>
+    <PluginList
+      :plugins="pluginsToDisplay"
+      :iitc_core="iitc_core"
+      :search_query="search_query"
+      @update-plugin="updatePlugin"
+      @delete-plugin="deletePlugin"
+    ></PluginList>
+  </div>
+</template>
+
+<script>
+import Title from "./Title.vue";
+import SearchBar from "./SearchBar.vue";
+import { mixin } from "../mixins.js";
+import { searchPlugins } from "@/popup/search";
+import PluginList from "./PluginList/PluginList.vue";
+import Tags from "./Tags/Tags.vue";
+import browser from "webextension-polyfill";
+
+export default {
+  name: "SectionMainMenu",
+  props: {
+    categories: Object,
+    plugins_flat: Object,
+    iitc_core: Object,
+  },
+  data() {
+    return {
+      search_query: "",
+      search_results: {},
+      activeTag: "All",
+    };
+  },
+  mixins: [mixin],
+  computed: {
+    pluginsToDisplay() {
+      let plugins = { ...this.plugins_flat };
+      if (this.search_query) {
+        plugins = this.search_results;
+      }
+      return this.filteredPlugins(plugins);
+    },
+  },
+  watch: {
+    search_query: function (val) {
+      this.search_results = searchPlugins(val, this.plugins_flat);
+    },
+  },
+  methods: {
+    filteredPlugins(plugins) {
+      if (this.activeTag === "All") {
+        return plugins;
+      }
+      if (typeof plugins !== "object" || plugins === null) {
+        return {};
+      }
+      return Object.fromEntries(
+        Object.entries(plugins).filter(
+          ([, plugin]) => plugin.category === this.activeTag
+        )
+      );
+    },
+    async updatePlugin(updatedPlugin) {
+      this.$set(this.plugins_flat, updatedPlugin.uid, updatedPlugin);
+
+      if (this.search_query) {
+        this.search_results = searchPlugins(
+          this.search_query,
+          this.plugins_flat
+        );
+      }
+
+      this.showMessage(this._("needRebootIntel"));
+      await browser.runtime.sendMessage({
+        type: "managePlugin",
+        uid: updatedPlugin.uid,
+        action: updatedPlugin.status,
+      });
+    },
+    deletePlugin(pluginUID) {
+      this.$delete(this.plugins_flat, pluginUID);
+
+      if (this.search_query) {
+        this.search_results = searchPlugins(
+          this.search_query,
+          this.plugins_flat
+        );
+      }
+    },
+  },
+  mounted() {
+    this.$root.$on("tag:active", (activeTag) => {
+      this.activeTag = activeTag;
+    });
+  },
+  components: { Tags, PluginList, Title, SearchBar },
+};
+</script>
+
+<style scoped>
+.list {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/src/popup/components/SectionMainMenu/Tags/Tag.vue b/src/popup/components/SectionMainMenu/Tags/Tag.vue
new file mode 100644
index 0000000..f197d19
--- /dev/null
+++ b/src/popup/components/SectionMainMenu/Tags/Tag.vue
@@ -0,0 +1,65 @@
+<!-- @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3 -->
+<template>
+  <div
+    class="tag"
+    :class="{ active: isActive }"
+    :style="{ '--tag-color': getTagColor(tag.name) }"
+    @click="handleClick"
+  >
+    {{ tag.name }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Tag",
+  props: {
+    tag: Object,
+    isActive: Boolean,
+  },
+  methods: {
+    handleClick() {
+      this.$root.$emit("tag:active", this.tag.name);
+    },
+    getTagColor(tag) {
+      const hash = this.hashString(tag);
+      const hue = hash % 360;
+      const lightness = 1;
+      const chroma = 0.03;
+
+      return `oklch(${lightness} ${chroma} ${hue}deg)`;
+    },
+    hashString(str) {
+      let hash = 0;
+      for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+      }
+      return Math.abs(hash);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.tag {
+  --tag-color: #eee;
+  display: flex;
+  cursor: pointer;
+  padding: 4px 10px;
+  margin: 2px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: 4px;
+  border: 1px solid oklch(from var(--tag-color) calc(l - 0.1) calc(c - 0.01) h);
+  background-color: var(--tag-color);
+  box-shadow: none;
+  transition: border 0.1s ease, background-color 0.1s ease, box-shadow 0.1s ease;
+}
+.tag.active,
+.tag:hover {
+  border-color: oklch(from var(--tag-color) calc(l - 0.2) calc(c + 0.05) h);
+  background-color: oklch(from var(--tag-color) l calc(c + 0.2) h);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  z-index: 1;
+}
+</style>
diff --git a/src/popup/components/SectionMainMenu/Tags/Tags.vue b/src/popup/components/SectionMainMenu/Tags/Tags.vue
new file mode 100644
index 0000000..cde4d13
--- /dev/null
+++ b/src/popup/components/SectionMainMenu/Tags/Tags.vue
@@ -0,0 +1,73 @@
+<!-- @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3 -->
+<template>
+  <div class="element">
+    <Tag
+      v-for="(tag, key) in tags"
+      :key="key"
+      :tag="tag"
+      :isActive="tag.name === activeTag"
+    ></Tag>
+  </div>
+</template>
+
+<script>
+import Tag from "./Tag.vue";
+
+export default {
+  name: "Tags",
+  props: {
+    categories: Object,
+    all_plugins: Object,
+  },
+  data() {
+    return {
+      activeTag: "All",
+    };
+  },
+  mounted() {
+    this.$root.$on("tag:active", (activeTag) => {
+      this.activeTag = activeTag;
+    });
+  },
+  computed: {
+    tags() {
+      if (this.all_plugins === undefined) {
+        return {};
+      }
+
+      const sortedTags = Object.entries(this.categories)
+        .filter(([, category]) => {
+          return Object.values(this.all_plugins).some(
+            (plugin) => plugin.category === category.name
+          );
+        })
+        .sort((a, b) => a[1].name.localeCompare(b[1].name));
+
+      return {
+        All: { name: "All" },
+        ...Object.fromEntries(sortedTags),
+      };
+    },
+  },
+  watch: {
+    categories: {
+      handler(newTags) {
+        if (!newTags[this.activeTag] && this.activeTag !== "All") {
+          this.activeTag = "All";
+          this.$root.$emit("tag:active", this.activeTag);
+        }
+      },
+      deep: true,
+    },
+  },
+  components: { Tag },
+};
+</script>
+
+<style scoped>
+.element {
+  display: flex;
+  padding: 4px 6px;
+  flex-wrap: wrap;
+}
+</style>
diff --git a/src/popup/components/Title.vue b/src/popup/components/SectionMainMenu/Title.vue
similarity index 92%
rename from src/popup/components/Title.vue
rename to src/popup/components/SectionMainMenu/Title.vue
index 583767b..7c3f291 100644
--- a/src/popup/components/Title.vue
+++ b/src/popup/components/SectionMainMenu/Title.vue
@@ -27,9 +27,9 @@
 
 <script>
 import browser from "webextension-polyfill";
-import { mixin } from "./mixins.js";
-import ProgressBar from "./ProgressBar";
-import ToggleIITC from "./ToggleIITC";
+import { mixin } from "../mixins.js";
+import ProgressBar from "./ProgressBar.vue";
+import ToggleIITC from "./ToggleIITC.vue";
 
 export default {
   name: "Title",
diff --git a/src/popup/components/ToggleIITC.vue b/src/popup/components/SectionMainMenu/ToggleIITC.vue
similarity index 97%
rename from src/popup/components/ToggleIITC.vue
rename to src/popup/components/SectionMainMenu/ToggleIITC.vue
index f290fae..7d9d5ea 100644
--- a/src/popup/components/ToggleIITC.vue
+++ b/src/popup/components/SectionMainMenu/ToggleIITC.vue
@@ -31,7 +31,6 @@ export default {
         return this.iitc_is_enabled;
       },
       set: async function (newValue) {
-        this.$emit("update:iitc_is_enabled", newValue);
         await browser.runtime.sendMessage({
           type: "toggleIITC",
           value: newValue,
diff --git a/src/popup/components/SectionOptions.vue b/src/popup/components/SectionOptions.vue
index 94a3e95..5221f91 100644
--- a/src/popup/components/SectionOptions.vue
+++ b/src/popup/components/SectionOptions.vue
@@ -112,7 +112,6 @@ export default {
         return this.channel;
       },
       set: async function (channel) {
-        this.$emit("update:channel", channel);
         this.channel = channel;
         this.$root.channel = channel;
         await browser.runtime.sendMessage({
diff --git a/src/popup/components/SectionPlugins.vue b/src/popup/components/SectionPlugins.vue
deleted file mode 100644
index 296a3fc..0000000
--- a/src/popup/components/SectionPlugins.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<!-- @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3 -->
-<template>
-  <div class="window">
-    <Header v-bind:header_text="__('name', categories[category_name])"></Header>
-    <div class="plugins-list">
-      <ElementPlugin
-        v-for="(plugin, index) in sortIITCObj(plugins)"
-        v-bind:key="index"
-        v-bind:category_name="category_name"
-        v-bind:plugin="plugin"
-      ></ElementPlugin>
-      <Element v-if="objIsEmpty(plugins)" v-bind:text="_('noData')"></Element>
-    </div>
-  </div>
-</template>
-
-<script>
-import Header from "./Header";
-import Element from "./Element";
-import ElementPlugin from "./ElementPlugin";
-
-import { mixin } from "./mixins.js";
-
-export default {
-  name: "SectionPlugins",
-  props: {
-    category_name: String,
-    categories: Object,
-    plugins: Object,
-  },
-  mixins: [mixin],
-  components: { Header, Element, ElementPlugin },
-};
-</script>
-
-<style scoped>
-.window {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.plugins-list {
-  overflow-y: auto;
-}
-.plugins-list .item-wrapper:last-child {
-  margin-bottom: 5px;
-}
-</style>
diff --git a/src/popup/components/mixins.js b/src/popup/components/mixins.js
index 49a86cd..b1d16d3 100644
--- a/src/popup/components/mixins.js
+++ b/src/popup/components/mixins.js
@@ -30,7 +30,7 @@ export const mixin = {
     __: function (key, item) {
       if (item === undefined || !(key in item)) return "";
       const lang = browser.i18n.getUILanguage();
-      return key + ":" + lang in item ? item[key + ":" + lang] : item[key];
+      return `${key}:${lang}` in item ? item[`${key}:${lang}`] : item[key];
     },
     objIsEmpty: function (obj) {
       return typeof obj !== "object" || Object.keys(obj).length === 0;
@@ -47,22 +47,14 @@ export const mixin = {
         return {};
       }
 
-      const arr = Object.keys(obj).map((key) => obj[key]);
+      const arr = Object.entries(obj);
+      arr.sort((a, b) => {
+        const nameA = this.__("name", a[1]).toLowerCase();
+        const nameB = this.__("name", b[1]).toLowerCase();
+        return nameA > nameB ? 1 : -1;
+      });
 
-      for (let i = 0; i < arr.length; i++) {
-        for (let j = i + 1; j < arr.length; j++) {
-          if (
-            this.__("name", arr[i]).toLowerCase() >
-            this.__("name", arr[j]).toLowerCase()
-          ) {
-            let swap = arr[i];
-            arr[i] = arr[j];
-            arr[j] = swap;
-          }
-        }
-      }
-
-      return arr;
+      return Object.fromEntries(arr);
     },
     showMessage: function (msg) {
       this.$root.$emit("message", msg);