diff --git a/frontend/src/components/interface/SearchField.vue b/frontend/src/components/interface/SearchField.vue
index e02fe37d..807af768 100644
--- a/frontend/src/components/interface/SearchField.vue
+++ b/frontend/src/components/interface/SearchField.vue
@@ -1,63 +1,35 @@
 <template>
-  <IconField>
-    <InputIcon class="z-10 pi pi-search" />
-    <AutoComplete
-      placeholder="Find your node"
-      v-model="search_raw"
-      optionLabel="attributes['Name']"
-      :suggestions="filt_search"
-      :pt="{
-        pcInputText: { root: { class: 'w-[450px] !pr-0 !pl-11 !rounded-3xl !text-center indent-[-2.75rem]' } },
-      }"
-      @complete="select_node(filt_search[0])"
-    >
-      <template #option="slotProps">
-        <div class="flex items-center w-[100%]">
-          <div v-on:click="select_node(slotProps.option)">{{ slotProps.option.attributes["Name"] }}</div>
-          <Button class="ml-auto" icon="pi pi-google" text plain></Button>
-        </div>
-      </template>
-    </AutoComplete>
-  </IconField>
-
-  <fieldset id="search-menu" class="!hidden">
-    <div id="search" class="search-field">
-      <img class="search-field-icon" src="@/assets/toolbar/search.png" />
-      <input
-        type="text"
-        v-model="search_raw"
-        class="empty"
-        placeholder="Find your node"
-        @keyup.enter="select_node(filt_search[0])"
-      />
-    </div>
-    <div
-      class="check-active"
-      v-if="search_raw.length >= 2 && filt_search.length > 0"
-      v-on:click="search_raw = ''"
-    ></div>
-    <div
-      class="search-background"
-      v-if="search_raw.length >= 2 && filt_search.length > 0"
-    ></div>
-    <div class="results" v-if="search_raw.length >= 2 && filt_search.length > 0">
-      <div class="result-label">nodes in network</div>
-      <div v-for="(entry, index) in filt_search" :key="index" class="network-search">
-        <a href="#" v-on:click="select_node(entry)">{{ entry.attributes["Name"] }}</a>
-      </div>
-      <div class="result-label">search google</div>
-      <div v-for="(entry, index) in filt_search" :key="index" class="google-search">
-        <img class="google-logo" src="@/assets/toolbar/google-logo.png" />
-        <a
-          :id="'results-' + index"
-          href=""
-          v-on:click="google_search(entry.attributes['Name'], index)"
-          target="_blank"
-          >{{ entry.attributes["Name"] }}</a
-        >
-      </div>
-    </div>
-  </fieldset>
+  <Button label="Find your node" icon="pi pi-search" severity="secondary" class="w-[220px] dark:!bg-[#020617]"
+    :pt="{ label: { class: 'mx-auto' } }" @click="show_search = !show_search" />
+
+  <Dialog v-model:visible="show_search" position="top" :minY="60" :minX="60" :closable="true" :pt="{
+    root: { class: 'w-[25rem] !mt-[60px] !ml-[60px]' },
+    headerActions: { class: '!hidden' },
+    header: { class: '!p-3 order-1 cursor-move' },
+    content: { class: 'order-2 !px-0' },
+  }">
+    <h6 v-if="filt_search.length === 0" class="text-center text-slate-300">No available options</h6>
+
+    <ul class="divide-y border-slate-200 dark:divide-slate-100/10"
+      v-if="search_raw.length >= 2 && filt_search.length > 0">
+      <li class="flex !justify-between items-center px-4 hover:dark:bg-slate-100/10 hover:bg-slate-100"
+        v-for="(entry, index) in filt_search" :key="index">
+        <a class="flex-1 py-2.5" href="#" v-on:click="select_node(entry)">{{ entry.label }}</a>
+        <Divider layout="vertical" />
+        <a :id="'results-' + index" href="" v-on:click="google_search(entry.attributes['Name'], index)" target="_blank">
+          <img :alt="entry.label" src="@/assets/toolbar/google-logo.png" class="w-4" />
+        </a>
+      </li>
+    </ul>
+
+    <template #header>
+      <IconField class="w-full !mt-[10px]">
+        <InputIcon class="z-10 pi pi-search" />
+        <InputText v-model="search_raw" placeholder="Find your node" class="w-full"
+          v-on:keyup.enter="select_node(filt_search[0])" autofocus />
+      </IconField>
+    </template>
+  </Dialog>
 </template>
 
 <script>
@@ -66,6 +38,7 @@ export default {
   props: ["data", "mode"],
   data() {
     return {
+      show_search: false,
       search_raw: "",
     };
   },
@@ -96,142 +69,4 @@ export default {
     },
   },
 };
-</script>
-
-<style>
-#search-menu {
-  height: 5%;
-  display: flex;
-  width: 100%;
-  position: relative;
-  align-content: center;
-  justify-content: center;
-  z-index: 9999;
-  margin-bottom: 2%;
-}
-
-#search-menu:after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  backdrop-filter: blur(7.5px);
-}
-
-.search-field {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  background: rgba(222, 222, 222, 0.3);
-  position: absolute;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-  z-index: 999;
-}
-
-.search-field-icon {
-  position: absolute;
-  left: 3%;
-  height: 0.9vw;
-  width: 0.9vw;
-  filter: invert(100%);
-}
-
-.search-field input[type="text"] {
-  margin-left: 2%;
-  font-size: 0.85vw;
-  width: 83%;
-  background: none;
-  color: white;
-  cursor: default;
-  font-family: "ABeeZee", sans-serif;
-  border: none;
-}
-
-.search-field [type="text"]::-webkit-input-placeholder {
-  opacity: 70%;
-}
-
-#search-menu .results {
-  position: absolute;
-  width: 100%;
-  left: 0%;
-  top: 100%;
-  padding: 0.3% 0 0.3% 0;
-  background: rgba(222, 222, 222, 0.3);
-  backdrop-filter: blur(7.5px);
-  overflow-y: scroll;
-  overflow-x: hidden;
-  color: white;
-  border-top-color: rgba(255, 255, 255, 30%);
-  border-top-width: 1px;
-  border-top-style: solid;
-  z-index: 999;
-}
-
-#search-menu .results a {
-  margin-top: 1%;
-  margin-bottom: 1%;
-  display: block;
-  cursor: pointer;
-  text-decoration: none;
-  color: white;
-  font-family: "ABeeZee", sans-serif;
-  font-size: 0.85vw;
-}
-
-.network-search {
-  margin-left: 3%;
-}
-
-.result-label {
-  margin-left: 3%;
-  width: 93%;
-  font-family: "ABeeZee", sans-serif;
-  color: rgba(255, 255, 255, 50%);
-  font-size: 0.73vw;
-  border-bottom: 1px solid;
-  border-color: rgba(255, 255, 255, 50%);
-  cursor: default;
-}
-
-.google-search {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-}
-
-.google-search a {
-  margin-left: 1%;
-}
-
-.google-logo {
-  margin-left: 3%;
-  height: 0.8vw;
-  width: 0.8vw;
-}
-
-.check-active {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 998;
-}
-
-.search-background {
-  position: fixed;
-  width: 25%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 998;
-  -webkit-backdrop-filter: blur(4vw);
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/toolbar/MainToolBar.vue b/frontend/src/components/toolbar/MainToolBar.vue
index a78c09d4..05d1f37c 100644
--- a/frontend/src/components/toolbar/MainToolBar.vue
+++ b/frontend/src/components/toolbar/MainToolBar.vue
@@ -1,117 +1,85 @@
 <template>
-  <aside class="py-4">
-    <!-- <ul class="menu-bar" :class="{ full: tools_active == true }">
-      <li v-on:click="switch_home()">
-        <img src="@/assets/toolbar/home.png" alt="Home Icon" />
-      </li>
-      <li v-on:click="protein_active = !protein_active">
-        <img src="@/assets/toolbar/proteinselect.png" alt="Search Icon" />
-      </li>
-      <li
-        v-on:mouseover="tools_active = true"
-        v-on:mouseleave="tools_active = false"
-      >
-        <img src="@/assets/toolbar/menu-burger.png" alt="Tool Icon" />
-      </li>
-      <li v-on:click="selection_active = !selection_active">
-        <img src="@/assets/toolbar/settings-sliders.png" alt="Graph Icon" />
-      </li>
-      <li v-on:click="center()">
-        <img src="@/assets/toolbar/expand.png" alt="Center Icon" />
-      </li>
-      <li v-on:click="threeview()">
-        <img src="@/assets/toolbar/3d-icon.png" alt="3D Icon">
-      </li>
-      <li v-on:click="chatbot()">
-        <img src="@/assets/toolbar/bote.png" alt="bot Icon" />
-      </li>
-      <li v-on:click="word()">
-        <img src="@/assets/toolbar/word.png" alt="word Icon" />
-      </li>
-      <li
-        v-on:click="hide_labels(label_check)"
-        :class="{ crossed: label_check }"
-      >
-        <div class="label-container">
-          <img src="@/assets/toolbar/label.png" alt="label Icon" />
-          <span v-if="label_check" class="cross-line"></span>
-        </div>
-      </li>
-    </ul> -->
-
+  <aside :class="`py-4 animate__animated animate__faster ${widget ? 'animate__fadeInDown' : 'w-0 animate__fadeOutUp'}`">
     <nav class="w-[64px] flex flex-col items-center gap-4 overflow-auto">
-      <Button icon="material-icons" text plain @click="switch_home">
+      <Button icon="material-icons" text plain v-tooltip="'Home'" @click="switch_home">
         <span class="material-icons">home</span>
       </Button>
 
-      <Button icon="material-icons" text plain @click="protein_active = !protein_active">
+      <Button icon="material-icons" text plain v-tooltip="'Highlight nodes'" @click="protein_active = !protein_active">
         <span class="material-icons">hub</span>
       </Button>
 
-      <!-- <Button icon="material-icons" v-on:mouseover="tools_active = true" v-on:mouseleave="tools_active = false"> -->
-      <Button icon="material-icons" text plain @click="showWindow">
+      <Button icon="material-icons" text plain v-tooltip="'Graph settings'" @click="tools_active = !tools_active">
         <span class="material-icons">tune</span>
       </Button>
 
-      <Button icon="material-icons" text plain @click="selection_active = !selection_active">
+      <Button icon="material-icons" text plain v-tooltip="'Export graph'" @click="export_active = !export_active">
+        <span class="material-icons">download</span>
+      </Button>
+
+      <Button icon="material-icons" text plain v-tooltip="'Graph parameter'"
+        @click="selection_active = !selection_active">
         <span class="material-icons">settings_applications</span>
       </Button>
 
-      <Button icon="material-icons" text plain @click="center">
+      <Button icon="material-icons" text plain v-tooltip="'Re-center'" @click="center">
         <span class="material-icons">fullscreen</span>
       </Button>
 
-      <Button icon="material-icons" text plain @click="chatbot">
+      <Button icon="material-icons" text plain v-tooltip="'Chat bot'" @click="chatbot">
         <span class="material-icons">chat</span>
       </Button>
 
-      <Button icon="material-icons" text plain @click="hide_labels(label_check)">
+      <Button icon="material-icons" text plain v-tooltip="'Show label'" @click="hide_labels(label_check)">
         <span v-if="!label_check" class="material-icons">visibility</span>
         <span v-if="label_check" class="material-icons">visibility_off</span>
       </Button>
     </nav>
-    <!-- <MenuWindow
-      v-show="tools_active"
-      v-on:mouseover="tools_active = true"
-      v-on:mouseleave="tools_active = false"
-      :gephi_data="gephi_data"
-      :ensembl_name_index="ensembl_name_index"
-      :tools_active="tools_active"
-      :mode="mode"
-      @tools_active_changed="tools_active = $event"
-    ></MenuWindow> -->
-    <SelectionList
-      v-show="selection_active"
-      :data="gephi_data"
-      :selection_active="selection_active"
-      :active_subset="active_subset"
-      :active_term="active_term"
-      :mode="mode"
-      @selection_active_changed="selection_active = $event"
-    >
-    </SelectionList>
-    <ProteinList
-      v-show="protein_active"
-      :gephi_data="gephi_data"
-      :mode="mode"
-      @protein_active_changed="protein_active = $event"
-    >
-    </ProteinList>
+
+    <Dialog v-model:visible="selection_active" header="Graph parameter" position="topleft" :minY="60" :minX="60" :pt="{
+      root: { class: 'w-[25rem] !mt-[60px] !ml-[60px]' },
+      header: { class: '!py-2.5' },
+      title: { class: '!text-base' },
+    }">
+      <SelectionList v-show="selection_active" :data="gephi_data" :selection_active="selection_active"
+        :active_subset="active_subset" :active_term="active_term" :mode="mode"
+        @selection_active_changed="selection_active = $event">
+      </SelectionList>
+    </Dialog>
+
+    <Dialog v-model:visible="protein_active" header="Highlight nodes" position="topleft" :minY="60" :minX="60" :pt="{
+      root: { class: 'w-[32rem] !mt-[60px] !ml-[60px]' },
+      header: { class: '!py-2.5' },
+      title: { class: '!text-base' },
+    }">
+      <ProteinList v-show="protein_active" :gephi_data="gephi_data" :mode="mode"
+        @protein_active_changed="protein_active = $event">
+      </ProteinList>
+    </Dialog>
+
+    <Dialog v-model:visible="tools_active" header="Graph settings" position="topleft" :minY="60" :minX="60" :pt="{
+      root: { class: 'w-[25rem] !mt-[60px] !ml-[60px]' },
+      header: { class: '!py-2.5' },
+      title: { class: '!text-base' },
+    }">
+      <MenuWindow v-show="tools_active" :gephi_data="gephi_data" :ensembl_name_index="ensembl_name_index"
+        :tools_active="tools_active" :mode="mode" @tools_active_changed="tools_active = $event"></MenuWindow>
+    </Dialog>
+
+    <Dialog v-model:visible="export_active" header="Export graph" position="topleft" :minY="60" :minX="60" :pt="{
+      root: { class: 'w-[25rem] !mt-[60px] !ml-[60px]' },
+      header: { class: '!py-2.5' },
+      title: { class: '!text-base' },
+    }">
+      <ExportWindow v-show="export_active" :gephi_data="gephi_data" :ensembl_name_index="ensembl_name_index"
+        :mode="mode"></ExportWindow>
+    </Dialog>
   </aside>
 </template>
 
-<script setup>
-import { ref } from "vue";
-
-const windowRef = ref();
-
-const showWindow = (event) => {
-  windowRef.value.toggle(event);
-};
-</script>
-
 <script>
-// import MenuWindow from "@/components/toolbar/windows/MenuWindow.vue";
+import MenuWindow from "@/components/toolbar/windows/MenuWindow.vue";
+import ExportWindow from "@/components/toolbar/windows/ExportWindow.vue";
 import ProteinList from "@/components/toolbar/modules/ProteinList.vue";
 import SelectionList from "@/components/toolbar/modules/SelectionList.vue";
 
@@ -119,13 +87,15 @@ export default {
   name: "MainToolBar",
   props: ["gephi_data", "term_data", "active_subset", "active_term", "ensembl_name_index", "widget"],
   components: {
-    // MenuWindow,
+    MenuWindow,
+    ExportWindow,
     ProteinList,
     SelectionList,
   },
   data() {
     return {
-      // tools_active: false,
+      tools_active: false,
+      export_active: false,
       protein_active: false,
       selection_active: false,
       label_check: true,
@@ -159,84 +129,4 @@ export default {
     },
   },
 };
-</script>
-
-<style>
-.menu-bar {
-  position: relative;
-  border-radius: 5px;
-  width: 3vw;
-  display: inline-block;
-  backdrop-filter: blur(7.5px);
-  -webkit-backdrop-filter: blur(7.5px);
-  align-items: center;
-  padding: 5% 0;
-  z-index: 99;
-  margin: 0.5vw 0 0 0.5vw;
-}
-
-.menu-bar li {
-  list-style: none;
-  color: #0a0a1a;
-  font-family: sans-serif;
-  font-weight: bold;
-  padding: 0.5vw;
-  margin: 0 2%;
-  position: relative;
-  cursor: pointer;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-
-.menu-bar li img {
-  max-width: none;
-  width: 60%;
-  filter: invert(100%);
-}
-
-.menu-bar li::before {
-  content: " ";
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: -1;
-  transition: 0.2s;
-  border-radius: 5px;
-}
-.menu-bar li:hover::before {
-  background: linear-gradient(to bottom, #e8edec, #d2d1d3);
-  box-shadow: 0px 3px 20px 0px black;
-  transform: scale(1.2);
-}
-.menu-bar li:hover {
-  color: black;
-}
-.menu-bar li:hover img {
-  color: black;
-  filter: none;
-}
-/* Use ::v-deep to apply styles to nested child components */
-::v-deep .menu-bar li {
-  color: white;
-}
-::v-deep .menu-bar li:hover {
-  color: black;
-}
-.label-container {
-  position: relative;
-  display: contents;
-  text-align: center;
-}
-
-.cross-line {
-  position: absolute;
-  border-top: 1px solid rgba(255, 255, 255, 0.883); /* Red cross line, adjust thickness/color as needed */
-  transform: rotate(-45deg); /* Optional: Diagonal cross */
-  width: 60%;
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/toolbar/windows/ExportWindow.vue b/frontend/src/components/toolbar/windows/ExportWindow.vue
new file mode 100644
index 00000000..e8e515b1
--- /dev/null
+++ b/frontend/src/components/toolbar/windows/ExportWindow.vue
@@ -0,0 +1,38 @@
+<template>
+  <ul class="list-none p-0 m-0 flex flex-col divide-y dark:divide-[#343b4c]">
+    <li class="flex items-center justify-between gap-2 py-2 dark:text-[#c3c3c3]">
+      <ExportingButton :mode="mode"></ExportingButton>
+    </li>
+    <li v-if="mode == 'protein'" class="flex items-center justify-between gap-2 py-2 dark:text-[#c3c3c3]">
+      <ExportGraph></ExportGraph>
+    </li>
+    <li v-if="mode == 'protein'" class="flex items-center justify-between gap-2 py-2 dark:text-[#c3c3c3]">
+      <ExportProteins :gephi_data="gephi_data"></ExportProteins>
+    </li>
+    <li v-if="mode == 'protein'" class="flex items-center justify-between gap-2 py-2 dark:text-[#c3c3c3]">
+      <ExportEdges :gephi_data="gephi_data" :ensembl_name_index="ensembl_name_index">
+      </ExportEdges>
+    </li>
+  </ul>
+</template>
+
+<script>
+import ExportProteins from "@/components/toolbar/modules/ExportProteins.vue";
+import ExportEdges from "@/components/toolbar/modules/ExportEdges.vue";
+import ExportingButton from "@/components/toolbar/modules/ExportingButton.vue";
+import ExportGraph from "@/components/toolbar/modules/ExportGraph.vue";
+
+export default {
+  name: "ExportWindow",
+  props: ["mode", "gephi_data", "ensembl_name_index"],
+  components: {
+    ExportingButton,
+    ExportGraph,
+    ExportProteins,
+    ExportEdges,
+  },
+  data() {
+    return {};
+  },
+};
+</script>