diff --git a/frontend/src/components/citation/CitationGraph.vue b/frontend/src/components/citation/CitationGraph.vue
index 57b5fd19..6b7d230f 100644
--- a/frontend/src/components/citation/CitationGraph.vue
+++ b/frontend/src/components/citation/CitationGraph.vue
@@ -5,7 +5,7 @@
   <section v-if="citation_graphs.size != 0" class="grid grid-cols-2 gap-2.5 pt-3">
     <Card v-for="(entry, index) in filt_graphs" :class="`group relative overflow-hidden border ${active_citation_id === entry.id
       ? 'border-primary-600 !bg-primary-600/25'
-      : 'dark:!bg-slate-300/25 border-transparent'
+      : 'dark:!bg-slate-300/25 !bg-slate-300/10 border-transparent'
       }`" :key="index" :pt="{
         header: { class: 'h-26 relative rounded-md mt-[6px] mx-[6px] overflow-hidden' },
         body: { class: '!p-0 !gap-0' },
@@ -33,12 +33,13 @@
       </template>
 
       <template #title>
-        <h6 :class="`w-full h-full flex items-center gap-2 absolute top-0 left-0 py-2 px-2 text-sm font-medium cursor-text z-[1]
+        <h6 :class="`w-full h-full absolute top-0 left-0 flex items-center gap-2 py-2 px-2 text-sm font-medium cursor-text z-[1]
           ${focus_citation_id === entry.id ? '!hidden' : ''}`" v-on:click="setFocus(entry.id, index)">
-          {{ entry.label }} <span class="text-lg material-symbols-rounded dark:text-slate-200"> edit </span>
+          <span class="line-clamp-1">{{ entry.label }}</span> <span
+            class="flex-shrink-0 text-lg material-symbols-rounded dark:text-slate-200"> edit </span>
         </h6>
         <input ref="citationInputs" type="text" v-model="entry.label"
-          :class="`bg-transparent py-2 px-2 text-sm font-medium ${focus_citation_id === entry.id ? '' : 'opacity-0'}`"
+          :class="`w-full bg-transparent py-2 px-2 text-sm font-medium ${focus_citation_id === entry.id ? '' : 'opacity-0'}`"
           @click.stop @blur="clearFocus" />
       </template>
 
@@ -49,47 +50,6 @@
       </template>
     </Card>
   </section>
-  
-  <!-- <div class="loading-section">
-    <div class="loading-text" v-if="citation_graphs.size == 0">
-      <span>There is no generated citation graph.</span>
-    </div>
-    <div class="slider" tabindex="0" v-if="citation_graphs.size != 0">
-      <div
-        v-for="(entry, index) in filt_graphs"
-        :key="index"
-        class="graph"
-        v-on:click="switch_graph(entry)"
-        @mouseover="activeGraphIndex = index"
-        @mouseout="activeGraphIndex = -1"
-      >
-        <SnapshotCitation :propValue="entry" :index="entry.id" />
-        <div class="graph-options">
-          <div
-            class="bookmark-graph"
-            v-show="activeGraphIndex == index"
-            v-on:click.stop="add_graph(entry)"
-            :class="{ checked: favourite_graphs.has(entry.id) }"
-            ref="checkboxStatesGraph"
-          ></div>
-          <img
-            class="remove-graph"
-            v-show="activeGraphIndex == index"
-            src="@/assets/pathwaybar/cross.png"
-            v-on:click.stop="remove_graph(entry)"
-          />
-          <div class="graph-citation-name">
-            <input
-              type="text"
-              v-model="entry.label"
-              class="empty"
-              @click.stop
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div> -->
 </template>
 
 <script>
@@ -107,7 +67,6 @@ export default {
   },
   data() {
     return {
-      // activeGraphIndex: -1,
       focus_citation_id: null,
       active_citation_id: null
     };
@@ -172,26 +131,4 @@ export default {
     },
   },
 };
-</script>
-
-<!-- <style>
-.graph-citation-name {
-  position: fixed;
-  display: flex;
-  bottom: 5%;
-  width: 100%;
-  height: 20%;
-  -webkit-backdrop-filter: blur(7.5px);
-  text-align-last: center;
-  justify-content: center;
-}
-
-.graph-citation-name input[type="text"] {
-  font-size: 0.5vw;
-  background: none;
-  color: white;
-  cursor: default;
-  font-family: "ABeeZee", sans-serif;
-  border: none;
-}
-</style> -->
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/citation/CitationMenu.vue b/frontend/src/components/citation/CitationMenu.vue
index 48b605e4..8ae0acfb 100644
--- a/frontend/src/components/citation/CitationMenu.vue
+++ b/frontend/src/components/citation/CitationMenu.vue
@@ -15,32 +15,6 @@
   <CitationGraph :citation_graphs="citation_graphs" :favourite_graphs="favourite_graphs" :bookmark_off="bookmark_off"
     @loading_state_changed="loading_state = $event" @favourite_graphs_changed="favourite_graphs = $event">
   </CitationGraph>
-
-  <!-- <div id="citation-tools" class="pathways">
-    <div class="pathwaybar">
-      <div id="citation-graphs">
-        <div class="tool-section-graph">
-          <div class="coloumn-button">
-            <button class="tool-buttons" v-on:click="get_citation_graph(context_raw)">
-              <img class="buttons-img" src="@/assets/plus-1.png" v-if="!loading_state" />
-              <div v-if="loading_state" class="loading_button"></div>
-            </button>
-          </div>
-          <div class="coloumn-button">
-            <button class="tool-buttons" :class="{ recolor_filter: bookmark_off == false }"
-              v-on:click="bookmark_off = !bookmark_off">
-              <img class="buttons-img" src="@/assets/star.png" />
-            </button>
-          </div>
-        </div>
-        <div class="graph-section">
-          <CitationGraph :citation_graphs="citation_graphs" :favourite_graphs="favourite_graphs"
-            :bookmark_off="bookmark_off" @loading_state_changed="loading_state = $event"
-            @favourite_graphs_changed="favourite_graphs = $event"></CitationGraph>
-        </div>
-      </div>
-    </div>
-  </div> -->
 </template>
 
 <script>
@@ -162,112 +136,3 @@ export default {
   },
 };
 </script>
-
-<!-- <style>
-#citation-graphs {
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  font-family: "ABeeZee", sans-serif;
-}
-
-.citation-search {
-  background: rgba(222, 222, 222, 0.3);
-  padding: 0 0 0 0.3vw;
-  height: 1.4vw;
-  display: flex;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-}
-
-.citation-search-icon {
-  margin-left: 3%;
-  position: relative;
-  height: 0.9vw;
-  width: 0.9vw;
-  filter: invert(100%);
-}
-
-.citation-search input[type="text"] {
-  margin-left: 0.5vw;
-  width: 16vw;
-  font-size: 0.85vw;
-  background: none;
-  color: white;
-  cursor: default;
-  border: none;
-  font-family: "ABeeZee", sans-serif;
-}
-
-.citation-search [type="text"]::-webkit-input-placeholder {
-  opacity: 70%;
-}
-
-.context-check {
-  margin-top: 0.2vw;
-  margin-bottom: 0.2vw;
-}
-
-.context-confirm {
-  font-family: "ABeeZee", sans-serif;
-  color: white;
-  font-size: 0.7vw;
-  display: flex;
-}
-
-.context-confirm [type="checkbox"]+label {
-  display: block;
-  cursor: pointer;
-  font-family: sans-serif;
-  font-size: 24px;
-  line-height: 1.3;
-  position: absolute;
-  left: 7vw;
-  margin-top: 0.7%;
-}
-
-.context-confirm [type="checkbox"]+label:before {
-  width: 1.2vw;
-  height: 0.6vw;
-  border-radius: 30px;
-  background-color: #ddd;
-  content: "";
-  transition: background-color 0.5s linear;
-  z-index: 5;
-  position: absolute;
-}
-
-.context-confirm [type="checkbox"]+label:after {
-  width: 0.4vw;
-  height: 0.4vw;
-  border-radius: 30px;
-  background-color: #fff;
-  content: "";
-  transition: margin 0.1s linear;
-  box-shadow: 0px 0px 5px #aaa;
-  position: absolute;
-  top: 10%;
-  margin: 0.09vw 0 0 0.09vw;
-  z-index: 10;
-}
-
-.context-confirm [type="checkbox"]:checked+label:after {
-  margin: 0.09vw 0 0 0.69vw;
-}
-
-.loading_pane_citation {
-  content: "";
-  position: absolute;
-  width: 1vw;
-  height: 1vw;
-  border: 4px solid transparent;
-  border-top-color: #ffffff;
-  border-radius: 50%;
-  right: 1vw;
-  animation: button-loading-spinner 1s ease infinite;
-}
-</style> -->
diff --git a/frontend/src/components/enrichment/HeatmapTool.vue b/frontend/src/components/enrichment/HeatmapTool.vue
index 1392e559..d137b4f7 100644
--- a/frontend/src/components/enrichment/HeatmapTool.vue
+++ b/frontend/src/components/enrichment/HeatmapTool.vue
@@ -17,33 +17,6 @@
   </ListActionHeader>
 
   <PathwayHeatmap :bookmark_off="bookmark_off"></PathwayHeatmap>
-
-  <!-- <div id="heatmap-graphs">
-    <div class="tool-section-graph">
-      <div class="coloumn-button">
-        <button class="tool-buttons" v-on:click="get_heatmap()">
-          <img class="buttons-img" src="@/assets/plus-1.png" />
-        </button>
-      </div>
-      <div class="coloumn-button">
-        <button
-          class="tool-buttons"
-          :class="{ recolor_filter: bookmark_off == false }"
-          v-on:click="bookmark_off = !bookmark_off"
-        >
-          <img class="buttons-img" src="@/assets/star.png" />
-        </button>
-      </div>
-      <div class="coloumn-button">
-        <button class="tool-buttons" v-on:click="get_svg()">
-          <img class="buttons-img" src="@/assets/toolbar/download.png" />
-        </button>
-      </div>
-    </div>
-    <div class="graph-section">
-      <PathwayHeatmap :bookmark_off="bookmark_off"></PathwayHeatmap>
-    </div>
-  </div> -->
 </template>
 
 <script>
@@ -60,9 +33,7 @@ export default {
   },
   data() {
     return {
-      // favourite_graphs: new Set(),
       bookmark_off: true,
-      // tool_selecting: false
     };
   },
   mounted() {
@@ -82,15 +53,3 @@ export default {
   },
 };
 </script>
-
-<!-- <style>
-#heatmap-graphs {
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  font-family: "ABeeZee", sans-serif;
-}
-</style> -->
diff --git a/frontend/src/components/enrichment/PathwayList.vue b/frontend/src/components/enrichment/PathwayList.vue
index e2e1fb56..243bba66 100644
--- a/frontend/src/components/enrichment/PathwayList.vue
+++ b/frontend/src/components/enrichment/PathwayList.vue
@@ -1,34 +1,43 @@
 <template>
-  <ProgressSpinner v-if="await_load == true" class="!flex" style="width: 30px; height: 30px;" strokeWidth="5"
-    fill="transparent" animationDuration="1s" aria-label="ProgressSpinner" />
-
-  <Listbox v-if="terms !== null && await_load === false" v-model="selected_pathway" optionLabel="name"
-    :options="filt_terms" :pt="{
-      header: { class: 'sticky top-0 flex-1 !px-0 bg-[var(--card-bg)] z-[1] order-1' },
-      listContainer: { class: 'order-3' },
-      list: { class: '!p-0' },
-      emptyMessage: { class: '!flex !justify-center !items-center !text-sm !text-slate-500 dark:!text-slate-300' },
-      option: {
-        class:
-          '!px-0 !py-1.5 !text-slate-500 dark:!text-slate-300 leading-tight transition-all duration-300 ease-in-out',
-      },
-    }" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0"
+  <div v-if="await_load" class="flex flex-col items-center justify-center h-full gap-3">
+    <h6 class="flex items-center gap-2 dark:text-slate-300">Fetching data
+      <span class="relative flex">
+        <span class="absolute inline-flex w-full h-full rounded-full opacity-75 animate-ping bg-primary-500"></span>
+        <span
+          class="material-symbols-rounded text-primary-500 animate animate-[spin_1s_ease-in-out_infinite]">scatter_plot</span>
+      </span>
+    </h6>
+  </div>
+
+  <EmptyState v-if="terms?.length == 0" message="There is no generated terms.">
+  </EmptyState>
+
+  <Listbox v-if="terms !== null && !await_load" v-model="selected_pathway" optionLabel="name" :options="filt_terms" :pt="{
+    header: { class: 'sticky top-0 flex-1 !px-0 bg-[var(--card-bg)] z-[1] order-1' },
+    listContainer: { class: 'order-3' },
+    list: { class: '!p-0' },
+    emptyMessage: { class: '!flex !justify-center !items-center !text-sm !text-slate-500 dark:!text-slate-300' },
+    option: {
+      class:
+        '!px-0 !py-1.5 !text-slate-500 dark:!text-slate-300 leading-tight transition-all duration-300 ease-in-out',
+    },
+  }" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0"
     @update:modelValue="select_term" :tabindex="0" emptyMessage="No terms available.">
 
     <template #footer>
       <header class="sticky top-0 bg-[var(--card-bg)] pt-3 items-center gap-2 z-[1] order-1">
         <!-- filter -->
         <InputGroup>
-          <InputGroupAddon>
+          <InputGroupAddon class="!px-3">
             <MultiSelect v-model="selected_categories" optionLabel="label" placeholder="Filter" showClear
-              resetFilterOnClear filterPlaceholder="Search categories" filter class="!w-56 !p-0 !border-0"
+              resetFilterOnClear filterPlaceholder="Search categories" filter class="!w-60 !p-0 !border-0"
               emptyMessage="No categories available" emptyFilterMessage="No categories available"
               :selectedItemsLabel="`${selected_categories?.length} categories`" :options="filter_terms"
               :maxSelectedLabels="1" :pt="{
-                clearIcon: { class: '!w-[.8rem] !absolute !right-6' },
+                clearIcon: { class: '!w-3.5 !h-3.5 !absolute !right-5 rounded-full z-[1]' },
                 overlay: { class: '!w-[18rem]' },
-                label: { class: 'max-w-[100px] !py-0 !px-0 !line-clamp-1' },
-                dropdown: { class: '!w-auto' },
+                label: { class: 'max-w-[100px] !py-0 !px-0 text-[15px] !line-clamp-1' },
+                dropdown: { class: '!w-auto ml-6' },
                 optionLabel: { class: 'whitespace-normal' }
               }" />
           </InputGroupAddon>
@@ -104,146 +113,6 @@
       Export terms as csv
     </Button>
   </Popover>
-
-  <!-- <div id="pathways-list">
-    <div class="tool-section-term">
-      <div class="pathway-search">
-        <img class="pathway-search-icon" src="@/assets/toolbar/search.png" />
-        <input
-          type="text"
-          v-model="search_raw"
-          class="empty"
-          placeholder="search pathway"
-        />
-      </div>
-      <div class="filter-section">
-        <div
-          id="pathway-filter"
-          class="pre-full"
-          v-on:click="handling_filter_menu()"
-          :class="{ full: category_filtering == true }"
-        >
-          <span>{{ category }}</span>
-          <img
-            class="remove-filter"
-            src="@/assets/pathwaybar/cross.png"
-            v-on:click.stop="active_categories(null)"
-            v-if="category !== 'Filter'"
-          />
-        </div>
-        <div
-          id="list-filter-categories"
-          v-show="category_filtering == true && terms !== null"
-        >
-          <div
-            class="element"
-            v-for="(entry, index) in filter_terms"
-            :key="index"
-            v-on:click="active_categories(entry.label)"
-            :class="{ active_cat: active_categories_set.has(entry.label) }"
-          >
-            <a>{{ entry.label }}</a>
-          </div>
-        </div>
-      </div>
-      <div class="function-section">
-        <div
-          id="function-filter"
-          class="pre-full"
-          @mouseover="functions_active = true"
-          @mouseleave="functions_active = false"
-          :class="{ full: category_filtering == true }"
-        >
-          <img class="bookmark-image" src="@/assets/toolbar/menu-burger.png" />
-        </div>
-        <div
-          id="function-filter-categories"
-          v-show="functions_active == true"
-          @mouseover="functions_active = true"
-          @mouseleave="functions_active = false"
-        >
-          <div
-            class="bookmark-button"
-            v-on:click="bookmark_off = !bookmark_off"
-          >
-            <img
-              class="bookmark-image"
-              src="@/assets/pathwaybar/favorite.png"
-              :class="{ recolor_filter: bookmark_off == false }"
-            />
-          </div>
-          <div class="export-button" v-on:click="export_enrichment()">
-            <img class="bookmark-image" src="@/assets/pathwaybar/csv.png" />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="list-section">
-      <div class="sorting">
-        <a
-          class="enrichment_filter"
-          v-on:click="
-            sort_alph = sort_alph === 'asc' ? 'dsc' : 'asc';
-            sort_fdr = '';
-          "
-          >functional enrichment pathways ({{ filt_terms.size }})</a
-        >
-        <a
-          class="fdr_filter"
-          v-on:click="
-            sort_fdr = sort_fdr === 'asc' ? 'dsc' : 'asc';
-            sort_alph = '';
-          "
-          >fdr rate</a
-        >
-      </div>
-
-      <div v-if="await_load == true" class="loading_pane"></div>
-      <div
-        class="results"
-        v-if="terms !== null && await_load == false"
-        tabindex="0"
-        @keydown="handleKeyDown"
-        ref="resultsContainer"
-      >
-        <table>
-          <tbody>
-            <tr
-              v-for="(entry, index) in filt_terms"
-              :key="index"
-              class="option"
-              :class="{ selected: selectedIndex === index }"
-              v-on:click="select_term(entry, index)"
-            >
-              <td>
-                <div class="favourite-symbol">
-                  <label class="custom-checkbox">
-                    <div
-                      class="checkbox-image"
-                      v-on:click.stop="add_enrichment(entry)"
-                      :class="{ checked: favourite_tab.has(entry) }"
-                      ref="checkboxStates"
-                    ></div>
-                  </label>
-                </div>
-              </td>
-              <td>
-                <div class="pathway-text">
-                  <a href="#" ref="selectedNodes">{{ entry.name }}</a>
-                </div>
-              </td>
-              <td>
-                <a class="fdr-class">{{ entry.fdr_rate.toExponential(2) }}</a>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <div v-if="terms.length == 0">
-          <i>No terms available.</i>
-        </div>
-      </div>
-    </div>
-  </div> -->
 </template>
 
 <script setup>
@@ -257,6 +126,7 @@ const toggle = (event) => {
 </script>
 
 <script>
+import EmptyState from "@/components/verticalpane/EmptyState.vue";
 export default {
   name: "PathwayList",
   props: [
@@ -266,6 +136,9 @@ export default {
     "filtered_terms",
     "favourite_pathways",
   ],
+  components: {
+    EmptyState
+  },
   emits: ["favourite_pathways_changed", "filtered_terms_changed"],
   data() {
     return {
@@ -273,14 +146,9 @@ export default {
       sort_fdr: "",
       sort_alph: "",
       selected_categories: [],
-      // category: "Filter",
-      // active_categories_set: new Set(),
-      // category_filtering: false,
       filter_terms: [],
       bookmark_off: true,
       favourite_tab: new Set(),
-      // selectedIndex: -1,
-      // functions_active: false,
       selected_pathway: "",
     };
   },
@@ -312,9 +180,6 @@ export default {
 
       if (com.selected_categories?.length) {
         // If category is selected, filter by category
-        // filtered = filtered.filter(function (term) {
-        //   return com.active_categories_set.has(term.category);
-        // });
         filtered = filtered.filter(function (term) {
           return com.selected_categories.some(el => el.label === term.category);
         });
@@ -365,28 +230,7 @@ export default {
     },
   },
   methods: {
-    // active_categories(category) {
-    //   if (!category) {
-    //     this.reset_categories();
-    //     return;
-    //   }
-    //   if (this.active_categories_set.has(category)) {
-    //     if (this.active_categories_set.size == 1) {
-    //       this.reset_categories();
-    //       return;
-    //     }
-    //     this.active_categories_set.delete(category);
-    //   } else {
-    //     this.active_categories_set.add(category);
-    //   }
-    //   this.category = [...this.active_categories_set].join(", ");
-    // },
-    // reset_categories() {
-    //   this.category = "Filter";
-    //   this.active_categories_set = new Set();
-    // },
     init_categories() {
-      // this.reset_categories();
       for (let element of this.filter_terms) {
         let checkCategory = element.label;
         if (
@@ -395,67 +239,21 @@ export default {
           checkCategory !== "GOBP"
         ) {
           this.selected_categories.push({ label: checkCategory });
-          // this.active_categories(checkCategory);
         }
       }
-      // this.category = [...this.active_categories_set].join(", ");
     },
     filter_options(terms) {
       var com = this;
       com.filter_terms = [];
-      var remove_duplicates = [...new Set(terms.map((term) => term.category))];
+      var remove_duplicates = [...new Set(terms?.map((term) => term.category))];
       remove_duplicates.forEach((term) => {
         com.filter_terms.push({ label: term });
       });
     },
     select_term(term) {
       var com = this;
-      // this.selectedIndex = index;
       com.emitter.emit("searchEnrichment", term);
     },
-    // scrollToSelected(selectedDiv) {
-    //   const parent = this.$refs.resultsContainer; // Updated line to use this.$refs
-
-    //   if (!selectedDiv) {
-    //     return;
-    //   }
-
-    //   const selectedDivPosition = selectedDiv.getBoundingClientRect();
-    //   const parentBorders = parent.getBoundingClientRect();
-
-    //   if (selectedDivPosition.bottom >= parentBorders.bottom) {
-    //     selectedDiv.scrollIntoView(false);
-    //   }
-
-    //   if (selectedDivPosition.top <= parentBorders.top) {
-    //     selectedDiv.scrollIntoView(true);
-    //   }
-    // },
-    // handleKeyDown(event) {
-    //   const keyCode = event.keyCode;
-
-    //   if (keyCode === 38) {
-    //     event.preventDefault();
-    //     if (this.selectedIndex > 0) {
-    //       this.selectedIndex--;
-    //       this.scrollToSelected(this.$refs.selectedNodes[this.selectedIndex]);
-    //       this.clickNode();
-    //     }
-    //   } else if (keyCode === 40) {
-    //     event.preventDefault();
-    //     if (this.selectedIndex < this.filt_terms.size - 1) {
-    //       this.selectedIndex++;
-    //       this.scrollToSelected(this.$refs.selectedNodes[this.selectedIndex]);
-    //       this.clickNode();
-    //     }
-    //   }
-    // },
-    // clickNode() {
-    //   const selectedNode = this.$refs.selectedNodes[this.selectedIndex];
-    //   if (selectedNode) {
-    //     selectedNode.click();
-    //   }
-    // },
     add_enrichment(enrichment) {
       if (!this.favourite_tab.has(enrichment)) {
         // Checkbox is checked, add its state to the object
@@ -502,395 +300,6 @@ export default {
       hiddenElement.download = "Terms.csv";
       hiddenElement.click();
     },
-    // handling_filter_menu() {
-    //   var com = this;
-    //   if (!com.category_filtering) {
-    //     com.category_filtering = true;
-
-    //     // Add the event listener
-    //     document.addEventListener("mouseup", com.handleMouseUp);
-    //   } else {
-    //     com.category_filtering = false;
-    //     document.removeEventListener("mouseup", com.handleMouseUp);
-    //   }
-    // },
-    // handleMouseUp(e) {
-    //   var com = this;
-
-    //   var container = document.getElementById("list-filter-categories");
-    //   var container_button = document.getElementById("pathway-filter");
-    //   if (
-    //     !container.contains(e.target) &&
-    //     !container_button.contains(e.target)
-    //   ) {
-    //     com.category_filtering = false;
-
-    //     // Remove the event listener
-    //     document.removeEventListener("mouseup", com.handleMouseUp);
-    //   }
-    // },
   },
 };
-</script>
-
-<!-- <style>
-.pathways #pathways-list {
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  font-family: "ABeeZee", sans-serif;
-}
-
-.pathwaybar-small #pathways-list {
-  width: 99%;
-  height: 96.92%;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: 0.5%;
-  border-radius: 5px;
-  z-index: 997;
-  cursor: default;
-  font-family: "ABeeZee", sans-serif;
-}
-
-.pathway-search {
-  background: rgba(222, 222, 222, 0.3);
-  padding: 0 0 0 0.3vw;
-  height: 1.4vw;
-  display: flex;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-}
-
-.pathway-search-icon {
-  margin-left: 3%;
-  position: relative;
-  height: 0.9vw;
-  width: 0.9vw;
-  filter: invert(100%);
-}
-
-.pathway-search input[type="text"] {
-  margin-left: 0.5vw;
-  width: 8vw;
-  font-size: 0.85vw;
-  background: none;
-  color: white;
-  cursor: default;
-  border: none;
-  font-family: "ABeeZee", sans-serif;
-}
-
-.pathway-search [type="text"]::-webkit-input-placeholder {
-  opacity: 70%;
-}
-
-.filter-section {
-  background: rgba(222, 222, 222, 0.3);
-  height: 1.4vw;
-  width: 8vw;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-}
-
-#pathway-filter {
-  width: 100%;
-  height: 100%;
-  padding: 0.7vw;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-#function-filter {
-  width: 100%;
-  height: 100%;
-  padding: 0.5vw;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pre-full {
-  border-radius: 5px;
-}
-
-#pathway-filter span {
-  display: block;
-  width: 90%;
-  font-size: 0.85vw;
-  color: white;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: default;
-  text-align: center;
-}
-
-#pathway-filter .remove-filter {
-  width: 0.8vw;
-  filter: invert(100%);
-}
-
-#pathway-filter-categories,
-#list-filter-categories {
-  position: absolute;
-  width: 8vw;
-  max-height: 60%;
-  padding: 0.3% 0 0.3% 0;
-  -webkit-backdrop-filter: blur(7.5px);
-  backdrop-filter: blur(7.5px);
-  overflow-y: scroll;
-  overflow-x: hidden;
-  color: white;
-  border-color: rgba(255, 255, 255, 30%);
-  border-width: 1px;
-  border-style: solid;
-  z-index: 9999;
-}
-#function-filter-categories {
-  position: absolute;
-  width: 2vw;
-  max-height: 60%;
-  padding: 0.3% 0 0.3% 0;
-  background: rgba(222, 222, 222, 0.3);
-  -webkit-backdrop-filter: blur(7.5px);
-  backdrop-filter: blur(7.5px);
-  overflow-y: scroll;
-  overflow-x: hidden;
-  color: white;
-  z-index: 9999;
-}
-
-.function-section {
-  background: rgba(222, 222, 222, 0.3);
-  height: 1.4vw;
-  width: 2vw;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-}
-
-.list-section {
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  font-family: "ABeeZee", sans-serif;
-  padding: 0% 2% 2% 2%;
-}
-
-.visualize-button,
-.bookmark-button,
-.export-button {
-  width: 100%;
-  height: 3vw;
-  padding: 0.5vw;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.export-button .export-text {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 0.95vw;
-}
-
-.list-section a {
-  color: white;
-  text-decoration: none;
-}
-
-.list-section .results {
-  flex-grow: 1;
-  overflow-y: auto;
-  position: relative;
-}
-
-.option {
-  display: -webkit-flex;
-}
-
-.sorting {
-  font-size: 0.73vw;
-  border-bottom: 1px solid;
-  border-color: white;
-  cursor: default;
-}
-
-#pathways-list .sorting,
-#pathways-set .sorting {
-  margin-top: 0.1vw;
-  margin-left: 1vw;
-  padding-bottom: 0.1vw;
-  width: 90%;
-}
-
-.sorting a {
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.fdr_filter {
-  position: absolute;
-  left: 77.6%;
-}
-
-.pathway-text {
-  width: 92%;
-  white-space: nowrap;
-  overflow: hidden; /* Hide overflow content */
-  text-overflow: ellipsis;
-  margin-left: 2%;
-}
-
-.pathway-text a {
-  cursor: default;
-}
-
-/* bookmark styles */
-
-table {
-  display: flex;
-  width: 100%;
-}
-
-:focus {
-  outline: 0 !important;
-}
-
-table tbody {
-  width: 100%;
-}
-td:first-child {
-  width: 3.41%;
-  align-self: center;
-}
-td:nth-child(2) {
-  color: #fff;
-  font-size: 0.9vw;
-  width: 91.55%;
-  overflow: hidden;
-  align-self: center;
-}
-td:last-child {
-  font-size: 0.7vw;
-  color: white;
-  width: 26.04%;
-  align-self: center;
-}
-
-.favourite-symbol {
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  text-align: center;
-  position: relative;
-  display: flex;
-}
-.custom-checkbox {
-  position: relative;
-  display: inline-block;
-  cursor: default;
-}
-
-.checkbox-image {
-  display: block;
-  width: 0.9vw;
-  height: 0.9vw;
-  background-color: white;
-  -webkit-mask: url(@/assets/pathwaybar/star-solid.svg) no-repeat center;
-  mask: url(@/assets/pathwaybar/star-solid.svg) no-repeat center;
-  mask-size: 0.9vw;
-  background-repeat: no-repeat;
-}
-
-.checked {
-  background-color: #ffa500;
-}
-
-.selected {
-  background-color: rgba(255, 0, 0, 0.7);
-}
-
-.bookmark-image {
-  -webkit-filter: invert(100%);
-  filter: invert(100%);
-}
-
-.visualize-logo {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-/* .visualize-logo .bookmark-image {
-    } */
-.visualize-text {
-  font-size: 0.95vw;
-  color: white;
-}
-
-.recolor_filter {
-  filter: invert(71%) sepia(19%) saturate(7427%) hue-rotate(360deg)
-    brightness(104%) contrast(105%);
-}
-
-/* Hide scrollbar for Chrome, Safari and Opera */
-#pathway-filter-categories::-webkit-scrollbar,
-#home-filter-categories::-webkit-scrollbar
-  #list-filter-categories::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-#pathway-filter-categories,
-#home-filter-categories,
-#list-filter-categories {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-
-#pathway-filter-categories .element,
-#home-filter-categories .element,
-#list-filter-categories .element {
-  position: relative;
-  padding: 5%;
-  flex-shrink: 0;
-  border-top-color: rgba(255, 255, 255, 30%);
-  border-top-width: 1px;
-  border-top-style: solid;
-  transform-origin: center center;
-  transform: scale(1);
-  scroll-snap-align: center;
-  display: flex;
-}
-
-.element a {
-  width: 100%;
-  color: white;
-  padding: 5%;
-  font-size: 0.6vw;
-  align-self: center;
-  text-align: center;
-}
-
-#pathway-filter-categories .active_cat,
-#home-filter-categories .active_cat,
-#list-filter-categories .active_cat {
-  background: #ffa500;
-}
-</style> -->
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/enrichment/PathwayMenu.vue b/frontend/src/components/enrichment/PathwayMenu.vue
index 77e0971e..8b5d90e7 100644
--- a/frontend/src/components/enrichment/PathwayMenu.vue
+++ b/frontend/src/components/enrichment/PathwayMenu.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
   <div
     id="menu-tools"
     :class="{
@@ -235,4 +235,4 @@ export default {
   top: 50%;
   transform: translateY(-50%);
 }
-</style>
+</style> -->
diff --git a/frontend/src/components/enrichment/PathwaySet.vue b/frontend/src/components/enrichment/PathwaySet.vue
index 499a5448..ba4fa471 100644
--- a/frontend/src/components/enrichment/PathwaySet.vue
+++ b/frontend/src/components/enrichment/PathwaySet.vue
@@ -5,8 +5,8 @@
       <InputIcon class="z-10 pi pi-search" />
     </IconField>
 
-    <Button class="flex-shrink-0" severity="primary" label="Add subset" icon="pi pi-plus" size="small" raised
-      @click="toggle" />
+    <SplitButton class="flex-shrink-0" label="Add subset" severity="primary" icon="pi pi-plus" size="small" raised
+      @click="save_subset" :model="subset_options" />
 
     <div class="grid w-full grid-cols-12 gap-x-2">
       <a class="flex items-center justify-start col-span-4 gap-1 cursor-pointer" v-on:click="
@@ -28,21 +28,21 @@
     </div>
   </ListActionHeader>
 
-  <Panel v-for="(entry, index) in filt_abstracts" class="!bg-transparent !border-0 mb-1.5" :collapsed="true" toggleable
-    :key="index" :pt="{
+  <Panel v-for="(entry, index) in filt_abstracts" class="!bg-transparent !border-0 mb-1.5" :collapsed="true"
+    :toggleable="entry.view == 'protein'" :key="index" :pt="{
       header: { class: 'relative !p-0 !rounded hover:bg-slate-300/50 dark:hover:bg-slate-700/50' },
       content: { class: '!p-3 !rounded-b-lg bg-slate-200 dark:bg-slate-800' },
       headerActions: { class: 'absolute right-0' },
     }">
     <template #header>
       <div
-        class="w-full grid grid-cols-12 items-center gap-2 !py-0 !px-0 !font-normal !text-slate-500 dark:!text-slate-300 !leading-tight">
+        class="w-full h-full grid grid-cols-12 items-center gap-2 !py-0 !px-0 !font-normal !text-slate-500 dark:!text-slate-300 !leading-tight">
         <label class="relative col-span-4">
-          <span :class="`w-full h-full flex items-center gap-2 border border-transparent hover:border-slate-500/50 dark:hover:border-slate-300/50 rounded absolute top-0 left-0 py-2 px-1 text-sm font-medium cursor-text z-[1]
+          <span :class="`w-full h-full flex items-center absolute top-0 left-0 gap-2 border border-transparent hover:border-slate-500/50 dark:hover:border-slate-300/50 rounded py-2 px-1 text-sm font-medium cursor-text z-[1]
               ${focus_subset_id === index ? '!hidden' : ''}`" v-on:click="setFocus(entry.id, index)">
-            {{ entry.name }} <span class="text-lg material-symbols-rounded dark:text-slate-200"> edit </span>
-          </span>
-          <input ref="subsetInputs" type="text" v-model="entry.name" :class="`w-full border rounded border-primary-400 bg-transparent py-2 px-1 text-sm font-medium ${focus_subset_id === index ? '' : 'opacity-0'
+            <span class="max-w-[calc(100%-24px)] line-clamp-1">{{ entry.name }}</span> <span
+              class="text-lg material-symbols-rounded dark:text-slate-200"> edit </span></span>
+          <input ref="subsetInputs" type="text" v-model="entry.name" :class="`w-full h-full border rounded border-primary-400 bg-transparent py-2 px-1 text-sm font-medium ${focus_subset_id === index ? '' : 'opacity-0'
             }`" @click.stop @blur="clearFocus" />
         </label>
 
@@ -83,120 +83,10 @@
       :loading="loading_state" @click="apply_enrichment(entry)" />
   </Panel>
 
-  <EmptyState v-if="filt_abstracts.size === 0" message="There is no generated subsets">
+  <EmptyState v-if="filt_abstracts.size === 0" message="There is no generated subsets.">
   </EmptyState>
-
-  <Popover ref="op" class="w-[14rem]" :pt="{ content: { class: '!flex !flex-col' } }">
-    <Button text plain severity="secondary" type="button" label="From active subset" class="!justify-start !py-1"
-      @click="save_subset(); toggle();" />
-    <Button text plain severity="secondary" type="button" label="By searching in genes" class="!justify-start !py-1"
-      @click="active_protein(); toggle();" />
-    <Button text plain severity="secondary" type="button" label="By searching in keywords" class="!justify-start !py-1"
-      @click="active_keyword_protein(); toggle();" />
-    <Button text plain severity="secondary" type="button" label="By parameter filtering" class="!justify-start !py-1"
-      @click="active_selection(); toggle();" />
-  </Popover>
-
-  <!-- <div id="pathways-set">
-    <div class="tool-set-section-graph">
-      <div class="coloumn-set-button">
-        <button class="tool-buttons" v-on:click="save_subset()">
-          <img class="buttons-img" src="@/assets/plus-1.png" />
-        </button>
-      </div>
-      <div class="citation-search">
-        <img class="citation-search-icon" src="@/assets/toolbar/search.png" />
-        <input type="text" v-model="search_raw" class="empty" placeholder="search in sets" />
-      </div>
-    </div>
-    <div class="list-section">
-      <div class="sorting">
-        <a class="pubid_filter" v-on:click="
-          sort_alph = sort_alph === 'asc' ? 'dsc' : 'asc';
-        sort_pr = '';
-        sort_cb = '';
-        sort_y = '';
-        ">subset</a>
-        <a class="nodes_filter">nodes</a>
-        <a class="view_filter">view</a>
-      </div>
-
-      <div class="results" tabindex="0" @keydown="handleKeyDown" ref="resultsContainer">
-        <table>
-          <tbody>
-            <span v-for="(entry, index) in filt_abstracts" :key="index">
-              <tr class="set-table">
-                <td>
-                  <div class="favourite-symbol" v-on:click="set_active(entry)">
-                    <label class="custom-checkbox">
-                      <div class="active-image" :class="{ checked: entry.status }"></div>
-                    </label>
-                  </div>
-                </td>
-                <td>
-                  <div class="pathway-text">
-                    <input type="text" v-model="entry.name" class="empty" />
-                  </div>
-                </td>
-                <td>
-                  <div class="pathway-text">
-                    <span>({{ entry.genes.length }})</span>
-                  </div>
-                </td>
-                <td>
-                  <div class="pathway-text">
-                    <span>{{ entry.view }}</span>
-                  </div>
-                </td>
-                <td>
-                  <label class="custom-icons" v-if="entry.view == 'protein'">
-                    <div class="functions-image" v-on:click="entry.information = !entry.information"></div>
-                  </label>
-                  <label class="custom-icons" v-if="entry.view == 'protein'">
-                    <div class="expand-image" v-on:click="entry.actions = !entry.actions"></div>
-                  </label>
-                </td>
-                <td>
-                  <label class="custom-icons">
-                    <div class="delete-image" v-on:click="remove_set(entry)"></div>
-                  </label>
-                  <label class="custom-icons">
-                    <div class="chatbot-image" v-on:click="addToChatbot(entry)"></div>
-                  </label>
-                </td>
-              </tr>
-              <tr v-if="entry.information" class="expanded">
-                <td v-for="element in entry.stats" :key="element">
-                  <div class="information-set">{{ element }}</div>
-                </td>
-              </tr>
-              <tr v-if="entry.actions" class="expanded">
-                <div class="actions-tab">
-                  <button class="tool-buttons" v-on:click="apply_enrichment(entry)">
-                    <img class="buttons-img" src="@/assets/plus-1.png" />
-                    <div v-if="loading_state" class="loading_button"></div>
-                  </button>
-                  <span> apply enrichment {{ entry.enriched }} </span>
-                </div>
-              </tr>
-            </span>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div> -->
 </template>
 
-<script setup>
-import { ref } from "vue";
-
-const op = ref();
-
-const toggle = (event) => {
-  op.value.toggle(event);
-};
-</script>
-
 <script>
 import ListActionHeader from "@/components/verticalpane/ListActionHeader.vue";
 import EmptyState from "@/components/verticalpane/EmptyState.vue";
@@ -217,7 +107,27 @@ export default {
       set_dict: new Set(),
       search_raw: "",
       loading_state: false,
-      focus_subset_id: null
+      focus_subset_id: null,
+      subset_options: [
+        {
+          label: 'By searching in genes',
+          command: () => {
+            this.active_protein();
+          }
+        },
+        {
+          label: 'By searching in keywords',
+          command: () => {
+            this.active_keyword_protein();
+          }
+        },
+        {
+          label: 'By parameter filtering',
+          command: () => {
+            this.active_selection();
+          }
+        },
+      ]
     };
   },
   mounted() {
@@ -293,7 +203,7 @@ export default {
     },
     apply_enrichment(subset) {
       var com = this;
-      
+
       if (!subset.genes || com.loading_state) {
         this.toast.add({ severity: 'error', summary: 'Error', detail: 'Please select a subset or pathway to apply enrichment.', life: 4000 });
         return;
@@ -582,323 +492,4 @@ export default {
     },
   },
 };
-</script>
-
-<!-- <style>
-#pathways-set {
-  width: 100%;
-  height: 100%;
-  cursor: default;
-  font-family: "ABeeZee", sans-serif;
-}
-
-.pathway-apply-section {
-  width: 100%;
-  height: 87.65%;
-  border-radius: 5px;
-  position: absolute;
-}
-
-.generate-set-button {
-  display: inline-flex;
-  margin: 1vw 0 1vw 0;
-  height: 1vw;
-  width: 100%;
-  padding: 0 2vw 0 2vw;
-}
-
-.generate-set-button .export-text {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #0a0a1a;
-  font-size: 0.7vw;
-}
-
-.pathway-apply-section a {
-  color: white;
-  text-decoration: none;
-}
-
-.pathway-apply-section .results {
-  height: 100%;
-  overflow: scroll;
-}
-
-.pathway-apply-section .sorting a {
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.set-table {
-  display: -webkit-flex;
-  padding-top: 0.4vw;
-}
-
-#pathways-set .pathway-text {
-  width: 80%;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  overflow: hidden;
-  /* Hide overflow content */
-  text-overflow: ellipsis;
-  margin-left: 2%;
-}
-
-.nodes_filter {
-  position: absolute;
-  left: 35%;
-}
-
-.view_filter {
-  position: absolute;
-  left: 50%;
-}
-
-#pathways-set .pathway-text input[type="text"] {
-  width: 100%;
-  font-size: 0.85vw;
-  background: none;
-  color: white;
-  cursor: default;
-  font-family: "ABeeZee", sans-serif;
-  border: none;
-}
-
-#pathways-set .pathway-text span {
-  font-size: 0.7vw;
-  margin-left: 4%;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-#pathways-set .pathway-text a {
-  cursor: default;
-}
-
-/* bookmark styles */
-
-table {
-  display: flex;
-  width: 100%;
-}
-
-:focus {
-  outline: 0 !important;
-}
-
-table tbody {
-  width: 100%;
-}
-
-.set-table td:first-child {
-  width: 3.41%;
-  align-self: center;
-}
-
-.set-table td:nth-child(2) {
-  color: #fff;
-  font-size: 0.9vw;
-  width: 30%;
-  padding: 0 0 0 2px;
-  overflow: hidden;
-  align-self: center;
-}
-
-.set-table td:nth-child(3) {
-  color: #fff;
-  font-size: 0.9vw;
-  width: 15%;
-  padding: 0 0 0 2px;
-  overflow: hidden;
-  align-self: center;
-}
-
-.set-table td:nth-child(4) {
-  color: #fff;
-  font-size: 0.9vw;
-  width: 23%;
-  padding: 0 0 0 2px;
-  overflow: hidden;
-  align-self: center;
-}
-
-.set-table td:nth-child(5) {
-  font-size: 0.7vw;
-  color: white;
-  width: 13%;
-  align-self: center;
-}
-
-.set-table td:last-child {
-  font-size: 0.7vw;
-  color: white;
-  width: 13%;
-  align-self: center;
-}
-
-.favourite-symbol {
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  text-align: center;
-  position: relative;
-  display: flex;
-}
-
-.custom-checkbox {
-  position: relative;
-  display: inline-block;
-  cursor: default;
-}
-
-.checked {
-  background-color: #ffa500;
-}
-
-.expanded td:first-child,
-.expanded td:nth-child(2),
-.expanded td:nth-child(3),
-.expanded td:nth-child(4),
-.expanded td:last-child {
-  color: #fff;
-  width: 20%;
-  overflow: hidden;
-  align-self: center;
-}
-
-.custom-icons {
-  position: relative;
-  display: inline-block;
-  cursor: default;
-  padding-right: 0.5vw;
-}
-
-.active-image {
-  display: block;
-  width: 0.9vw;
-  height: 0.9vw;
-  background-color: white;
-  -webkit-mask: url(@/assets/pathwaybar/star-solid.svg) no-repeat center;
-  mask: url(@/assets/pathwaybar/star-solid.svg) no-repeat center;
-  mask-size: 0.9vw;
-  background-repeat: no-repeat;
-}
-
-.delete-image {
-  display: block;
-  width: 0.9vw;
-  height: 0.9vw;
-  background-color: white;
-  -webkit-mask: url(@/assets/pathwaybar/delete.png) no-repeat center;
-  mask: url(@/assets/pathwaybar/delete.png) no-repeat center;
-  mask-size: 0.9vw;
-  background-repeat: no-repeat;
-}
-
-.expand-image {
-  display: block;
-  width: 0.9vw;
-  height: 0.9vw;
-  background-color: white;
-  -webkit-mask: url(@/assets/toolbar/menu-burger.png) no-repeat center;
-  mask: url(@/assets/toolbar/menu-burger.png) no-repeat center;
-  mask-size: 0.9vw;
-  background-repeat: no-repeat;
-}
-
-.functions-image {
-  display: block;
-  width: 0.9vw;
-  height: 0.9vw;
-  background-color: white;
-  -webkit-mask: url(@/assets/toolbar/settings-sliders.png) no-repeat center;
-  mask: url(@/assets/toolbar/settings-sliders.png) no-repeat center;
-  mask-size: 0.9vw;
-  background-repeat: no-repeat;
-}
-
-.chatbot-image {
-  display: block;
-  width: 0.9vw;
-  height: 0.9vw;
-  background-color: white;
-  -webkit-mask: url(@/assets/toolbar/bote.png) no-repeat center;
-  mask: url(@/assets/toolbar/bote.png) no-repeat center;
-  mask-size: 0.9vw;
-  background-repeat: no-repeat;
-}
-
-.checked {
-  background-color: #ffa500;
-}
-
-.selected {
-  background-color: rgba(255, 0, 0, 0.7);
-}
-
-.tool-set-section-graph {
-  display: grid;
-  grid-template-columns: 0.5fr 0.5fr;
-  padding: 1vw 1vw 1vw 1vw;
-  width: 100%;
-  flex-shrink: 0;
-}
-
-.coloumn-set-button {
-  padding-right: 0.5vw;
-  display: grid;
-  row-gap: 1vw;
-  z-index: 9999;
-}
-
-.information-set {
-  font-size: 0.5vw;
-  display: flex;
-  justify-content: center;
-  text-align: center;
-  padding: 0.2vw;
-}
-
-.actions-tab {
-  font-size: 0.5vw;
-  display: flex;
-  justify-content: center;
-  text-align: center;
-  padding: 0.2vw;
-  color: white;
-}
-
-.expanded {
-  display: -webkit-flex;
-  padding: 0 2vw 0 2vw;
-  background: rgba(255, 255, 255, 0.1);
-  background-clip: content-box;
-}
-
-.actions-tab span {
-  align-self: center;
-  margin-left: 0.2rem;
-}
-
-.actions-tab .loading-button {
-  position: absolute;
-}
-
-.actions-tab .tool-buttons {
-  padding: 0.2vw 0.2vw 0.2vw 0.2vw;
-  border-radius: 0;
-  cursor: pointer;
-  display: flex;
-  font-size: 0.7vw;
-  align-items: center;
-  color: rgba(255, 255, 255, 0.8);
-  justify-content: center;
-  border: 0.05vw solid rgba(255, 255, 255, 0.6);
-  box-shadow: 0 2px 6px -3px rgba(255, 255, 255, 0.23);
-  transition: transform 0.25s cubic-bezier(0.7, 0.98, 0.86, 0.98),
-    box-shadow 0.25s cubic-bezier(0.7, 0.98, 0.86, 0.98);
-  background-color: #0a0a1a;
-}
-</style> -->
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/enrichment/PathwayTools.vue b/frontend/src/components/enrichment/PathwayTools.vue
index 8164609a..8685a4a3 100644
--- a/frontend/src/components/enrichment/PathwayTools.vue
+++ b/frontend/src/components/enrichment/PathwayTools.vue
@@ -14,27 +14,6 @@
 
   <PathwayGraph :mode="mode" :gephi_data="gephi_data" :filtered_terms="filtered_terms" :bookmark_off="bookmark_off"
     @loading_state_changed="loading_state = $event"></PathwayGraph>
-
-  <!-- <div id="pathways-graphs">
-    <div class="tool-section-graph">
-      <div class="coloumn-button">
-        <button class="tool-buttons" v-show="tool == 'Termgraph'" v-on:click="get_term_graph()">
-          <img class="buttons-img" src="@/assets/plus-1.png" v-if="!loading_state" />
-          <div v-if="loading_state" class="loading_button"></div>
-        </button>
-      </div>
-      <div class="coloumn-button">
-        <button class="tool-buttons" :class="{ recolor_filter: bookmark_off == false }"
-          v-on:click="bookmark_off = !bookmark_off">
-          <img class="buttons-img" src="@/assets/star.png" />
-        </button>
-      </div>
-    </div>
-    <div class="graph-section">
-      <PathwayGraph v-show="tool == 'Termgraph'" :mode="mode" :gephi_data="gephi_data" :filtered_terms="filtered_terms"
-        :bookmark_off="bookmark_off" @loading_state_changed="loading_state = $event"></PathwayGraph>
-    </div>
-  </div> -->
 </template>
 
 <script>
@@ -50,11 +29,7 @@ export default {
   },
   data() {
     return {
-      // tool: "Termgraph",
-      // favourite_graphs: new Set(),
       bookmark_off: true,
-      // tool_selecting: false,
-      // tools: [{ id: "Termgraph" }, { id: "Heatmap" }],
       loading_state: false,
     };
   },
@@ -69,192 +44,4 @@ export default {
     },
   },
 };
-</script>
-
-<!-- <style>
-#pathways-graphs {
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  font-family: "ABeeZee", sans-serif;
-}
-
-.generate {
-  width: 50%;
-  cursor: default;
-  background: #d9d9d9;
-}
-
-.generate .generate-text {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #0a0a1a;
-  font-size: 0.7vw;
-}
-
-.export-heatmap {
-  position: absolute;
-  cursor: default;
-}
-
-.export-heatmap .generate-text {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 0.95vw;
-}
-
-.bookmark-button-graph {
-  background: #d9d9d9;
-  width: 2.5vw;
-  align-content: center;
-  justify-content: center;
-}
-
-#pathway-tools-filter {
-  width: 17.81%;
-  height: 11.16%;
-  display: flex;
-  position: absolute;
-  border-radius: 5px;
-  align-items: center;
-  justify-content: center;
-}
-
-#pathway-tools-filter span {
-  display: block;
-  width: 90%;
-  font-size: 0.95vw;
-  color: white;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: default;
-  text-align: center;
-}
-
-#pathway-tools-filter-categories {
-  display: flex;
-  position: fixed;
-  width: 20%;
-  height: 30.32%;
-  left: -1.5%;
-  top: 15%;
-  padding: 1% 0% 1% 0%;
-  border-radius: 5px;
-  border: 1px solid #fff;
-  z-index: 1;
-  justify-content: center;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  cursor: default;
-}
-
-#pathway-tools-filter-categories .element {
-  border-radius: 5px;
-  background: rgba(217, 217, 217, 0.17);
-  display: flex;
-  width: 36.88%;
-  height: 100%;
-  margin: 0% 2% 0% 2%;
-  overflow: hidden;
-}
-
-#pathway-tools-filter-categories .element:hover {
-  background: rgba(217, 217, 217, 0.47);
-}
-
-.tool-section-graph {
-  display: grid;
-  grid-template-columns: 0.5fr 0.5fr 0.7fr 0.7fr 0.7fr 0.7fr;
-  padding: 0.5vw 1vw 0.5vw 1vw;
-  width: 100%;
-  flex-shrink: 0;
-  /* Prevents the tool-section-graph from shrinking */
-}
-
-.tool-section-term {
-  display: inline-flex;
-  margin: 1vw 0 1vw 0;
-  height: 1vw;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-}
-
-.coloumn-button {
-  padding: 0.5vw;
-  display: grid;
-  row-gap: 1vw;
-  z-index: 9999;
-}
-
-.tool-buttons {
-  min-width: 2rem;
-  padding: 0.2vw 0 0.2vw 0;
-  border-radius: 0;
-  cursor: pointer;
-  display: flex;
-  font-size: 0.7vw;
-  align-items: center;
-  color: rgba(255, 255, 255, 0.8);
-  justify-content: center;
-  border: 0.05vw solid rgba(255, 255, 255, 0.6);
-  box-shadow: 0 2px 6px -3px rgba(255, 255, 255, 0.23);
-  transition: transform 0.25s cubic-bezier(0.7, 0.98, 0.86, 0.98),
-    box-shadow 0.25s cubic-bezier(0.7, 0.98, 0.86, 0.98);
-  background-color: #0a0a1a;
-}
-
-.tool-buttons:hover {
-  transform: scale(1.05);
-  box-shadow: 0 4px 6px -1.5px rgba(255, 255, 255, 0.23);
-}
-
-.loading_button {
-  position: relative;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  justify-content: center;
-}
-
-.loading_button::after {
-  content: "";
-  position: absolute;
-  width: 12px;
-  height: 12px;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  border: 4px solid transparent;
-  border-top-color: #ffffff;
-  border-radius: 50%;
-  animation: button-loading-spinner 1s ease infinite;
-}
-
-.graph-section {
-  flex-grow: 1;
-  overflow-y: auto;
-  position: relative;
-  padding: 0.5vw;
-}
-
-.buttons-img {
-  width: 0.6vw;
-  height: 0.6vw;
-  filter: invert(80%);
-}
-</style> -->
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/enrichment/graph/PathwayGraph.vue b/frontend/src/components/enrichment/graph/PathwayGraph.vue
index 31099409..a40a61cd 100644
--- a/frontend/src/components/enrichment/graph/PathwayGraph.vue
+++ b/frontend/src/components/enrichment/graph/PathwayGraph.vue
@@ -1,32 +1,11 @@
 <template>
-  <EmptyState v-if="term_graphs.size == 0" message="There is no generated enrichment graph">
+  <EmptyState v-if="term_graphs.size == 0" message="There is no generated enrichment graph.">
   </EmptyState>
 
-  <!-- <div class="loading-section">
-    <div class="loading-text" v-if="term_graphs.size == 0">
-      <span>There is no generated pathway graph.</span>
-    </div>
-    <div class="slider" tabindex="0" v-if="term_graphs.size != 0">
-      <div v-for="(entry, index) in filt_graphs" :key="index" class="graph" v-on:click="switch_graph(entry)"
-        @mouseover="activeGraphIndex = index" @mouseout="activeGraphIndex = -1">
-        <SnapshotGraph :propValue="entry" :index="entry.id" />
-        <div class="graph-options">
-          <div class="bookmark-graph" v-show="activeGraphIndex == index" v-on:click.stop="add_graph(entry)"
-            :class="{ checked: favourite_graphs.has(entry.id) }" ref="checkboxStatesGraph"></div>
-          <img class="remove-graph" v-show="activeGraphIndex == index" src="@/assets/pathwaybar/cross.png"
-            v-on:click.stop="remove_graph(entry)" />
-          <div class="graph-name">
-            <input type="text" v-model="entry.label" class="empty" @click.stop />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div> -->
-
   <section v-if="term_graphs.size != 0" class="grid grid-cols-2 gap-2.5 pt-3">
     <Card v-for="(entry, index) in filt_graphs" :class="`group relative overflow-hidden border ${active_enrichment_id === entry.id
       ? 'border-primary-600 !bg-primary-600/25'
-      : 'dark:!bg-slate-300/25 border-transparent'
+      : 'dark:!bg-slate-300/25 !bg-slate-300/10 border-transparent'
       }`" :key="index" :pt="{
         header: { class: 'h-30 relative rounded-md mt-[6px] mx-[6px] overflow-hidden' },
         body: { class: '!p-0 !gap-0' },
@@ -54,12 +33,13 @@
       </template>
 
       <template #title>
-        <h6 :class="`w-full h-full flex items-center gap-2 absolute top-0 left-0 py-2 px-2 text-sm font-medium cursor-text z-[1]
+        <h6 :class="`w-full  h-full absolute top-0 left-0 flex items-center gap-2 py-2 px-2 text-sm font-medium cursor-text z-[1]
           ${focus_enrichment_id === entry.id ? '!hidden' : ''}`" v-on:click="setFocus(entry.id, index)">
-          {{ entry.label }} <span class="text-lg material-symbols-rounded dark:text-slate-200"> edit </span>
+          <span class="max-w-[calc(100%-24px)] line-clamp-1">{{ entry.label }}</span> <span
+            class="text-lg material-symbols-rounded dark:text-slate-200"> edit </span>
         </h6>
         <input ref="enrichmentInputs" type="text" v-model="entry.label"
-          :class="`bg-transparent py-2 px-2 text-sm font-medium ${focus_enrichment_id === entry.id ? '' : 'opacity-0'}`"
+          :class="`w-full bg-transparent py-2 px-2 text-sm font-medium ${focus_enrichment_id === entry.id ? '' : 'opacity-0'}`"
           @click.stop @blur="clearFocus" />
       </template>
 
@@ -93,9 +73,7 @@ export default {
       term_graphs: [],
       term_graphs_array: [],
       favourite_graphs: new Set(),
-      // activeGraphIndex: -1,
       graph_number: -1,
-      // species: null,
       focus_enrichment_id: null,
       active_enrichment_id: null
     };
@@ -226,126 +204,3 @@ export default {
   },
 };
 </script>
-
-<!-- <style>
-.graph-section .slider {
-  width: 100%;
-  max-height: 100%;
-  display: flex;
-  padding: 0.5vw 1vw 0.5vw 1vw;
-  flex-wrap: wrap;
-  overflow-y: scroll;
-  scroll-behavior: smooth;
-  scroll-snap-type: x mandatory;
-}
-
-/* Hide scrollbar for Chrome, Safari and Opera */
-.graph-section .slider::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.graph-section .slider {
-  -ms-overflow-style: none;
-  /* IE and Edge */
-  scrollbar-width: none;
-  /* Firefox */
-}
-
-.graph-section .slider .graph {
-  position: relative;
-  width: 33%;
-  height: 7.5vw;
-  padding: 0.5vw;
-  flex-shrink: 0;
-  transform-origin: center center;
-  transform: scale(1);
-  scroll-snap-align: center;
-  display: flex;
-}
-
-.graph-section .slider .graph:hover {
-  background: rgba(217, 217, 217, 0.12);
-}
-
-.bookmark-graph {
-  display: block;
-  width: 0.9vw;
-  height: 0.9vw;
-  margin: 1% 1% 0 0;
-  background-color: rgba(255, 255, 255, 0.62);
-  -webkit-mask: url(@/assets/pathwaybar/star-solid.svg) no-repeat center;
-  mask: url(@/assets/pathwaybar/star-solid.svg) no-repeat center;
-  mask-size: 0.9vw;
-  background-repeat: no-repeat;
-}
-
-.remove-graph {
-  width: 0.9vw;
-  height: 0.9vw;
-  -webkit-filter: invert(100%);
-  /* Safari/Chrome */
-  filter: invert(100%);
-  margin: 1% 1% 0 0;
-}
-
-.graph-options {
-  position: absolute;
-  width: 100%;
-  padding: 0 0.5vw 0 0.5vw;
-  display: flex;
-  align-items: center;
-  justify-content: end;
-}
-
-.graph-name {
-  position: fixed;
-  display: flex;
-  bottom: 5%;
-  width: 100%;
-  height: 20%;
-  -webkit-backdrop-filter: blur(7.5px);
-  text-align-last: center;
-  justify-content: center;
-}
-
-.graph-name input[type="text"] {
-  font-size: 0.85vw;
-  background: none;
-  color: white;
-  cursor: default;
-  font-family: "ABeeZee", sans-serif;
-  border: none;
-  padding: 0 0.5vw 0 0.5vw;
-  overflow: hidden;
-}
-
-.checked {
-  background-color: #ffa500;
-}
-
-.slider span {
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  color: white;
-  font-size: 0.7vw;
-}
-
-.loading-section {
-  height: 100%;
-  width: 100%;
-  padding: 0.5vw;
-  border: solid 0.01vw rgba(255, 255, 255, 0.5);
-}
-
-.loading-text {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 0.7vw;
-}
-</style> -->
diff --git a/frontend/src/components/enrichment/heatmap/PathwayHeatmap.vue b/frontend/src/components/enrichment/heatmap/PathwayHeatmap.vue
index 20e5adc0..0b386858 100644
--- a/frontend/src/components/enrichment/heatmap/PathwayHeatmap.vue
+++ b/frontend/src/components/enrichment/heatmap/PathwayHeatmap.vue
@@ -1,5 +1,5 @@
 <template>
-  <EmptyState v-if="filt_heatmap.size == 0" message="There is no generated heatmap">
+  <EmptyState v-if="filt_heatmap.size == 0" message="There is no generated heatmap.">
     <ul class="flex flex-col gap-2 text-sm">
       <li>Add favorite from <strong>Pathways</strong> tab and click <strong>Generate heatmap</strong>.</li>
     </ul>
@@ -7,7 +7,7 @@
   <section v-if="filt_heatmap.size > 0" class="grid grid-cols-2 gap-2.5 pt-3">
     <Card v-for="(entry, index) in filt_heatmap" :class="`group relative overflow-hidden border ${active_heatmap_id === entry.id
       ? 'border-primary-600 !bg-primary-600/25'
-      : 'dark:!bg-slate-300/25 border-transparent'
+      : 'dark:!bg-slate-300/25 !bg-slate-300/10 border-transparent'
       }`" :key="index" :pt="{
         header: { class: 'h-24 relative rounded-md mt-[6px] mx-[6px] overflow-hidden' },
         body: { class: '!p-0 !gap-0' },
@@ -35,12 +35,13 @@
       </template>
 
       <template #title>
-        <h6 :class="`w-full h-full flex items-center gap-2 absolute top-0 left-0 py-2 px-2 text-sm font-medium cursor-text z-[1]
+        <h6 :class="`w-full  h-full absolute top-0 left-0 flex items-center gap-2 py-2 px-2 text-sm font-medium cursor-text z-[1]
           ${focus_heatmap_id === entry.id ? '!hidden' : ''}`" v-on:click="setFocus(entry.id, index)">
-          {{ entry.label }} <span class="text-lg material-symbols-rounded dark:text-slate-200"> edit </span>
+          <span class="max-w-[calc(100%-24px)] line-clamp-1">{{ entry.label }}</span> <span
+            class="text-lg material-symbols-rounded dark:text-slate-200"> edit </span>
         </h6>
         <input ref="heatmapInputs" type="text" v-model="entry.label"
-          :class="`bg-transparent py-2 px-2 text-sm font-medium ${focus_heatmap_id === entry.id ? '' : 'opacity-0'}`"
+          :class="`w-full bg-transparent py-2 px-2 text-sm font-medium ${focus_heatmap_id === entry.id ? '' : 'opacity-0'}`"
           @click.stop @blur="clearFocus" />
       </template>
 
@@ -51,26 +52,6 @@
       </template>
     </Card>
   </section>
-  <!-- <div class="loading-section">
-    <div class="loading-text" v-if="filt_heatmap.size == 0">
-      <span>There is no generated heatmap.</span>
-    </div>
-    <div class="slider" tabindex="0" v-if="filt_heatmap.size != 0">
-      <div v-for="(entry, index) in filt_heatmap" :key="index" class="graph" v-on:click="switch_heatmap(entry)"
-        @mouseover="activeHeatmapIndex = index" @mouseout="activeHeatmapIndex = -1">
-        <SnapshotHeatmap :propValue="entry" :index="entry.id" />
-        <div class="graph-options">
-          <div class="bookmark-graph" v-show="activeHeatmapIndex == index" v-on:click.stop="add_graph(entry)"
-            :class="{ checked: favourite_heatmaps.has(entry.id) }" ref="checkboxStatesHeatmap"></div>
-          <img class="remove-graph" v-show="activeHeatmapIndex == index" src="@/assets/pathwaybar/cross.png"
-            v-on:click.stop="remove_graph(entry)" />
-          <div class="graph-name">
-            <input type="text" v-model="entry.label" class="empty" @click.stop />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div> -->
 </template>
 
 <script>
@@ -91,7 +72,6 @@ export default {
   data() {
     return {
       favourite_heatmaps: new Set(),
-      // activeHeatmapIndex: -1,
       heatmap_number: 0,
       heatmap_dict: [],
       heatmap_dict_array: [],
@@ -403,38 +383,6 @@ export default {
 </script>
 
 <style>
-/* #sigma-heatmap {
-  display: block;
-  position: absolute;
-  cursor: default;
-  position: absolute;
-  height: 100%;
-  width: 75%;
-  left: 25%;
-  box-sizing: border-box;
-  overflow: hidden;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-} 
-
-#d3tooltip {
-  position: absolute;
-  width: 200px;
-  height: auto;
-  padding: 10px;
-  background-color: #fafafa;
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
-  border-radius: 10px;
-  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-  pointer-events: none;
-  opacity: 0;
-  z-index: 999;
-}
-*/
-
 #d3tooltip.hidden {
   display: none;
 }
diff --git a/frontend/src/components/pane/modules/difexp/DifExpMenu.vue b/frontend/src/components/pane/modules/difexp/DifExpMenu.vue
index eb7d232a..cbb9fe77 100644
--- a/frontend/src/components/pane/modules/difexp/DifExpMenu.vue
+++ b/frontend/src/components/pane/modules/difexp/DifExpMenu.vue
@@ -4,7 +4,7 @@
       class="flex-1" @update:modelValue="active_categories($event)" />
   </ListActionHeader>
 
-  <EmptyState v-if="active_decoloumn === null" message="There is no active dcoloumn">
+  <EmptyState v-if="active_decoloumn === null" message="There is no active dcoloumn.">
   </EmptyState>
 
   <div v-if="active_decoloumn !== null" class="pt-2 mt-10 overflow-hidden">
@@ -14,37 +14,6 @@
     </div>
     <svg id="demo1" class="transform translate-x-[10%] translate-y-[-10%]" width="250" height="80"></svg>
   </div>
-
-  <!-- <div id="colorbar-difexp">
-    <div class="tool-set-section-graph">
-      <div class="coloumn-set-button">
-        <button class="tool-buttons">
-          <img class="buttons-img" src="@/assets/plus-1.png" />
-          /* <div v-if="loading_state" class="loading_button"></div> */
-        </button>
-      </div>
-      <div id="pathway-filter" v-on:click="handling_filter_menu()" :class="{ full: category_filtering == true }">
-        <span>{{ category }}</span>
-        <img class="remove-filter" src="@/assets/pathwaybar/cross.png" v-on:click.stop="active_categories(null)"
-          v-if="category !== 'Selection'" />
-      </div>
-      <div id="pathway-filter-categories" v-show="category_filtering == true">
-        <div class="element" v-for="(entry, index) in dcoloumns" :key="index" v-on:click="active_categories(entry)"
-          :class="{ active_cat: category == entry }">
-          <a>{{ entry }}</a>
-        </div>
-      </div>
-    </div>
-    <div class="graph-section">
-      <div class="loading-section">
-        <div v-if="active_decoloumn !== null">
-          <svg id="demo1" width="250" height="120"></svg>
-          <input id="legend" type="range" v-bind:min="dboundary.min" v-bind:max="dboundary.max"
-            v-bind:step="dboundary.step" v-model="dboundary.value" v-on:change="check_boundary()" />
-        </div>
-      </div>
-    </div>
-  </div> -->
 </template>
 
 <script>
@@ -60,18 +29,13 @@ export default {
     return {
       selected_category: null,
       active_section: "",
-      // links: null,
-      // hide: true,
       dcoloumns: this.$store.state.dcoloumns,
-      // category: "selection",
-      // category_filtering: false,
       dboundary: {
         value: 1,
         min: 1,
         max: 10,
         step: 1,
       },
-      // expand_selected: true,
     };
   },
   watch: {
@@ -170,33 +134,6 @@ export default {
       com.draw_legend();
       com.emitter.emit("adjustDE", this.dboundary.value);
     },
-    // handling_filter_menu() {
-    //   var com = this;
-    //   if (!com.category_filtering) {
-    //     com.category_filtering = true;
-
-    //     // Add the event listener
-    //     document.addEventListener("mouseup", com.handleMouseUp);
-    //   } else {
-    //     com.category_filtering = false;
-    //     document.removeEventListener("mouseup", com.handleMouseUp);
-    //   }
-    // },
-    // handleMouseUp(e) {
-    //   var com = this;
-
-    //   var container = document.getElementById("pathway-filter-categories");
-    //   var container_button = document.getElementById("pathway-filter");
-    //   if (
-    //     !container.contains(e.target) &&
-    //     !container_button.contains(e.target)
-    //   ) {
-    //     com.category_filtering = false;
-
-    //     // Remove the event listener
-    //     document.removeEventListener("mouseup", com.handleMouseUp);
-    //   }
-    // },
   },
   mounted() {
     console.log(this.active_decoloumn);
@@ -207,74 +144,4 @@ export default {
     }
   },
 };
-</script>
-
-<!-- <style>
-#colorbar-difexp {
-  z-index: 999;
-  width: 100%;
-  height: 100%;
-  overflow-y: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-#colorbar-difexp .colorbar-text {
-  width: 100%;
-  background: rgb(74, 45, 255);
-  background: linear-gradient(90deg,
-      rgba(74, 45, 255, 1) 0%,
-      rgba(255, 0, 0, 1) 100%);
-  border-radius: 5px;
-} 
-  
-#colorbar-difexp #pathway-filter {
-  background: rgba(222, 222, 222, 0.3);
-  padding: 0 0 0 0.3vw;
-  height: 1.4vw;
-  width: 16.8vw;
-  display: flex;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-}
-
-#colorbar-difexp #pathway-filter-categories {
-  width: 16.8vw;
-  left: 3vw;
-  top: 4vw;
-}
-
-#colorbar-difexp #pathway-filter-categories .element {
-  padding: 0;
-}
-
-#legend {
-  position: absolute;
-  top: 7%;
-  left: 30%;
-  appearance: none;
-  outline: none;
-  width: 40%;
-  height: 0.3vw;
-  border-radius: 5px;
-  background-color: #ccc;
-}
-
-#legend::-webkit-slider-thumb {
-  background: #fafafa;
-  appearance: none;
-  box-shadow: 1px 2px 26px 1px #bdbdbd;
-  width: 0.8vw;
-  height: 0.8vw;
-  border-radius: 50%;
-}
-
-#demo1 {
-  position: absolute;
-  display: block;
-  width: 100%;
-  height: 20%;
-  left: 21%;
-}
-</style> -->
+</script>
\ No newline at end of file