diff --git a/frontend/src/assets/toolbar/proteinselect.png b/frontend/src/assets/toolbar/proteinselect.png
new file mode 100644
index 00000000..38039dc4
Binary files /dev/null and b/frontend/src/assets/toolbar/proteinselect.png differ
diff --git a/frontend/src/components/term_graph/TermToolBar.vue b/frontend/src/components/term_graph/TermToolBar.vue
index eb5bed92..cfa1ff52 100644
--- a/frontend/src/components/term_graph/TermToolBar.vue
+++ b/frontend/src/components/term_graph/TermToolBar.vue
@@ -65,13 +65,13 @@
 
 <script>
 
-import ExportScreen from '@/components/toolbar/ExportScreen.vue'
-import NodeLabelSelect from '@/components/toolbar/NodeLabelSelect.vue'
+import ExportScreen from '@/components/toolbar/modules/ExportScreen.vue'
+import NodeLabelSelect from '@/components/toolbar/modules/NodeLabelSelect.vue'
 import TermConnectedGraph from '@/components/term_graph/TermConnectedGraph.vue'
 import TermSearch from '@/components/term_graph/TermSearch.vue'
 import FDRValue from '@/components/term_graph/FDRValue.vue'
-import SelectionWindow from '@/components/toolbar/SelectionWindow.vue'
-import SelectionList from '@/components/toolbar/SelectionList.vue'
+import SelectionWindow from '@/components/toolbar/modules/SelectionWindow.vue'
+import SelectionList from '@/components/toolbar/modules/SelectionList.vue'
 
 
 export default {
diff --git a/frontend/src/components/toolbar/MainToolBar.vue b/frontend/src/components/toolbar/MainToolBar.vue
index b4fc0483..99d40c0e 100644
--- a/frontend/src/components/toolbar/MainToolBar.vue
+++ b/frontend/src/components/toolbar/MainToolBar.vue
@@ -1,19 +1,19 @@
 <template >
     <div>
-        <ul class="menu-bar">
+        <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:mouseover="search_active=true"
-                v-on:mouseleave="search_active=false">
-                <img src="@/assets/toolbar/search.png" alt="Search Icon">
+            <li v-on:click="protein_active=true">
+                <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="switch_terms()">
-                <img src="@/assets/toolbar/share.png" alt="Graph Icon">
+            <li v-on:mouseover="tools_active=true"
+                v-on:mouseleave="tools_active=false">
+                <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">
@@ -22,109 +22,35 @@
                 <img src="@/assets/toolbar/3d-icon.png" alt="3D Icon">
             </li>
         </ul>
-        <div class="menu-window" v-show="tools_active == true" 
-            v-on:mouseleave="tools_active = false;"
-            v-on:mouseover="tools_active=true;">
-
-            <div class="menu-items">
-                <ExportScreen
-                :type="screen_type"
-                ></ExportScreen>
-                <ExportGraph></ExportGraph>
-                <NodeLabelSelect
-                :type="screen_type"
-                ></NodeLabelSelect>
-                <ProteinList
-                :protein_list='protein_list'
-                @status_changed = 'status = $event'
-                ></ProteinList>
-                <SelectionWindow
-                @selection_status_changed = 'selection_status = $event'
-                ></SelectionWindow>
-                <EdgeOpacity></EdgeOpacity>
-                <DEValue></DEValue>
-
-            </div>
-
-
-
-        </div>
-        <div class="search-window" v-show="search_active == true" 
-            v-on:mouseleave="search_active = false;"
-            v-on:mouseover="search_active=true;">
-
-            <div class="search-item">
-                <SearchBar
-                :gephi_data='gephi_data'
-                ></SearchBar>
-            </div>
-        </div>
-        <div id="protein_highlight" v-show="status === true " class="highlight_list">
-            <div id="protein_highlight_header">
-                <div class="text">
-                    <div class="headertext">
-                        <span>Highlight Proteins</span>
-                        <button v-on:click="status=false" id="highlight-btn-min"></button>
-                    </div>
-                </div>
-            </div>
-            <div class="highlight_main">
-                <textarea v-model="raw_text" rows="10" cols="30" autofocus></textarea>
-                <button v-on:click="highlight(raw_text)" id="highlight_protein">Go</button>
-            </div>
-        </div>
-        <div id="selection_highlight" v-show="selection_status === true " class="highlight_list">
-            <div id="selection_highlight_header">
-                <div class="text">
-                    <div class="headertext">
-                        <span>Selection Window</span>
-                        <button v-on:click="selection_status=false" id="highlight-btn-min"></button>
-                    </div>
-                </div>
-            </div>
-            <div class="highlight_main">
-                <SelectionList
-                :gephi_data='gephi_data'
-                ></SelectionList>
-
-            </div>
-        </div>
+        <MenuWindow v-if="tools_active"
+        :tools_active = 'tools_active'
+        @tools_active_changed = 'tools_active = $event'
+        ></MenuWindow>
+        <ProteinList v-if="protein_active"
+        @protein_active_changed = 'protein_active = $event'>
+        </ProteinList>
 
     </div>
 </template>
 
 <script>
 
-import ExportScreen from '@/components/toolbar/ExportScreen.vue'
-import DEValue from '@/components/toolbar/DEValue.vue'
-import ExportGraph from '@/components/toolbar/ExportGraph.vue'
-import NodeLabelSelect from '@/components/toolbar/NodeLabelSelect.vue'
-import ProteinList from '@/components/toolbar/ProteinList.vue'
-import SelectionWindow from '@/components/toolbar/SelectionWindow.vue'
-import SearchBar from '@/components/toolbar/SearchBar.vue'
-import EdgeOpacity from '@/components/toolbar/EdgeOpacity.vue'
-import SelectionList from '@/components/toolbar/SelectionList.vue'
+import MenuWindow from '@/components/toolbar/windows/MenuWindow.vue'
+// import ProteinList from '@/components/toolbar/ProteinList.vue'
+import ProteinList from '@/components/toolbar/modules/ProteinList.vue'
 
 export default {
     name: 'MainToolBar',
     props: ['gephi_data'],
     emits:['active_subset_changed'],
     components: {
-        ExportScreen,
-        DEValue,
-        ExportGraph,
+        MenuWindow,
         ProteinList,
-        SelectionWindow,
-        SearchBar,
-        EdgeOpacity,
-        SelectionList,
-        NodeLabelSelect
-
     },
     data() {
         return {
             tools_active: false,
-            search_active: false,
+            protein_active: false,
             screen_type: "protein",
             snapshot: null,
             status: false,
@@ -162,6 +88,9 @@ export default {
         },
         threeview() {
             this.emitter.emit("threeView");
+        },
+        open_proteinlist() {
+
         }
     }
 }
@@ -169,24 +98,30 @@ export default {
 
 <style>
 .menu-bar {
-    position: fixed;
-	border-radius: 25px;
-	height: fit-content;
-	display: inline-flex;
-	background-color: hsla(0,0%,100%,.15);
-    backdrop-filter: blur(10px);  
-	-webkit-backdrop-filter: blur(10px);
-	align-items: center;
-	padding: 0 10px;
-	margin: 10px 0 0 0;
+    position: absolute;
+    left: 3.515%;
+    border-radius: 5px;
+    height: 3.98%;
+    width: 22%;
+    display: inline-flex;
+    background: #D9D9D9;
+    backdrop-filter: blur(7.5px);
+    -webkit-backdrop-filter: blur(7.5px);
+    align-items: center;
+    padding: 0 10px;
     z-index: 99;
 }
+
+.full {
+    border-radius: 5px 5px 0 0;
+}
+
 .menu-bar li {
     list-style: none;
-    color: white;
+    color:  #0A0A1A;
     font-family: sans-serif;
     font-weight: bold;
-    padding: 12px;
+    padding: 10px;
     margin: 0 8px;
     position: relative;
     cursor: pointer;
@@ -206,7 +141,7 @@ export default {
 	width: 100%;
 	z-index:-1;
 	transition: .2s;
-	border-radius: 25px;
+	border-radius: 5px;
 }
 .menu-bar li:hover::before {
 	background: linear-gradient(to bottom, #e8edec, #d2d1d3);
@@ -224,52 +159,4 @@ export default {
 	color: black;
 }
 
-.menu-window {
-    background-color: hsla(0,0%,100%,.1);
-	-webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);  
-    width: 280px;
-    margin: 10px 0 0 17.5px;
-    height: 600px;
-    position: fixed;
-    border-radius: 20px;
-    justify-content: center;
-}
-
-.search-window {
-    background-color: hsla(0,0%,100%,.1);
-	-webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);  
-    width: 280px;
-    margin: 10px 0 0 17.5px;
-    height: 400px;
-    position: fixed;
-    border-radius: 20px;
-    justify-content: center;
-}
-
-.menu-items {
-    margin-top: 50px;
-    width: 100%;
-    text-align: center;
-    color: white;
-}
-
-.search-item {
-    display: flex;
-    position: relative;
-    margin-top: 50px;
-    width: 100%;
-    align-content: center;
-    justify-content: center;
-}
-
-.menu-bar li img {
-    width: 30px;
-    filter: invert(1);
-}
-
-.menu-bar li:hover img {
-    filter: invert(0);
-}
 </style>
diff --git a/frontend/src/components/toolbar/SearchBar.vue b/frontend/src/components/toolbar/SearchBar.vue
deleted file mode 100644
index 76945a5f..00000000
--- a/frontend/src/components/toolbar/SearchBar.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-    <div id="search" class="toolbar-search">
-        <div class="search-field">
-        <input type="text" value="Search nodes by name" class="search_empty"/>
-        </div>
-        <div class="results">
-            <i v-if="message.length > 0">{{message}}</i>
-            <div v-for="entry in matches" :key="entry">
-                <a href="#" v-on:click="select_node(entry)">{{entry.attributes['Name']}}</a>
-            </div>
-            <div v-if="matches.length == 0">
-                <i>No results found.</i>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'SearchBar',
-    props: ['gephi_data'],
-    emits: ['active_node_changed'],
-    data() {
-        return {
-            input: null,
-            state: null,
-            results: null,
-            exactMatch: false,
-            lastSearch: "",
-            searching: false,
-            matches: [],
-            message: "",
-            search_check: false
-        }
-    },
-    methods: {
-
-        select_node(node) {
-
-            this.emitter.emit("searchNode", node);
-        },
-        close() {
-            var com = this
-
-            com.results.style.display = "none";
-            com.searching = false;
-            com.input.value = "";
-            com.select_node(null);
-        },
-        clean() {
-            var com = this;
-
-            com.results.style.display = "none";
-            com.input.value = "";
-        },
-        search(query) {
-            var com = this;
-
-                com.matches = [];
-                com.message = "";
-                com.searching = true;
-                com.lastSearch = query;
-                com.results.style.display = "block";
-
-                const regex = new RegExp(com.exactMatch ? ("^" + query + "$").toLowerCase() : query.toLowerCase());
-
-                if (query.length < 3) {
-                    com.message = "Minimum 3 letters required.";
-                    return;
-                }
-
-                com.gephi_data.nodes.forEach((n) => {
-                    if (regex.test(n.attributes['Name'].toLowerCase())) {
-                        com.matches.push(n);
-                    }
-                });
-
-                if (com.matches.length == 1) {
-                    this.emitter.emit("searchNode", com.matches[0]);
-                }
-            }
-
-    },
-    mounted() {
-        var com = this;
-
-        var a = document.querySelector("#search");
-        com.input = a.querySelector("input");
-        com.state = a.querySelector(".state");
-        com.results = a.querySelector(".results");
-
-        var debounceTimer;
-
-        com.input.addEventListener('focus', function () {
-            var a = this;
-            a.dataset.focus || (a.dataset.focus = true, a.classList.remove("empty"));
-            com.clean()
-        });
-
-        com.input.addEventListener('keydown', function (a) {
-            if (13 == a.which) {
-                clearTimeout(debounceTimer);
-                debounceTimer = setTimeout(function() {
-                    com.search(com.input.value);
-                }, 500);
-                return false;
-            }
-        });
-
-
-    },
-}
-</script>
-
-<style>
-
-</style>
diff --git a/frontend/src/components/toolbar/DEValue.vue b/frontend/src/components/toolbar/modules/DEValue.vue
similarity index 100%
rename from frontend/src/components/toolbar/DEValue.vue
rename to frontend/src/components/toolbar/modules/DEValue.vue
diff --git a/frontend/src/components/toolbar/EdgeOpacity.vue b/frontend/src/components/toolbar/modules/EdgeOpacity.vue
similarity index 100%
rename from frontend/src/components/toolbar/EdgeOpacity.vue
rename to frontend/src/components/toolbar/modules/EdgeOpacity.vue
diff --git a/frontend/src/components/toolbar/ExportGraph.vue b/frontend/src/components/toolbar/modules/ExportGraph.vue
similarity index 91%
rename from frontend/src/components/toolbar/ExportGraph.vue
rename to frontend/src/components/toolbar/modules/ExportGraph.vue
index 70ba4358..e88a6307 100644
--- a/frontend/src/components/toolbar/ExportGraph.vue
+++ b/frontend/src/components/toolbar/modules/ExportGraph.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="tool-item">
-        <li v-on:click="export_graph">Save Network... </li>
+        <span v-on:click="export_graph">Export graph as .js </span>
     </div>
 </template>
 
diff --git a/frontend/src/components/toolbar/ExportScreen.vue b/frontend/src/components/toolbar/modules/ExportScreen.vue
similarity index 59%
rename from frontend/src/components/toolbar/ExportScreen.vue
rename to frontend/src/components/toolbar/modules/ExportScreen.vue
index 354ab793..044bacb0 100644
--- a/frontend/src/components/toolbar/ExportScreen.vue
+++ b/frontend/src/components/toolbar/modules/ExportScreen.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="tool-item">
-        <li v-on:click="take_screen('white', 'png')">Save PNG (White)</li>
-        <li v-on:click="take_screen('black', 'png')">Save PNG (Black)</li>
-        <li v-on:click="take_screen('white', 'svg')">Save SVG (White)</li>
-        <li v-on:click="take_screen('black', 'svg')">Save SVG (Black)</li>
+        <span v-on:click="take_screen('white', 'png')">Save graph as</span>
+        <!-- <span v-on:click="take_screen('black', 'png')">Save PNG (Black)</span>
+        <span v-on:click="take_screen('white', 'svg')">Save SVG (White)</span>
+        <span v-on:click="take_screen('black', 'svg')">Save SVG (Black)</span> -->
     </div>
 </template>
 
diff --git a/frontend/src/components/toolbar/NodeLabelSelect.vue b/frontend/src/components/toolbar/modules/NodeLabelSelect.vue
similarity index 87%
rename from frontend/src/components/toolbar/NodeLabelSelect.vue
rename to frontend/src/components/toolbar/modules/NodeLabelSelect.vue
index 1ed49662..22f6f5a7 100644
--- a/frontend/src/components/toolbar/NodeLabelSelect.vue
+++ b/frontend/src/components/toolbar/modules/NodeLabelSelect.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="tool-item">
-        <li v-on:click="reset_labels">Reset Label...</li>
+        <span v-on:click="reset_labels">Reset Label...</span>
     </div>
 </template>
 
diff --git a/frontend/src/components/toolbar/ProteinList.vue b/frontend/src/components/toolbar/modules/ProteinList.vue
similarity index 70%
rename from frontend/src/components/toolbar/ProteinList.vue
rename to frontend/src/components/toolbar/modules/ProteinList.vue
index 3c573fb1..2aa504f3 100644
--- a/frontend/src/components/toolbar/ProteinList.vue
+++ b/frontend/src/components/toolbar/modules/ProteinList.vue
@@ -1,6 +1,19 @@
 <template>
     <div class="tool-item">
-        <li v-on:click="visible_list()">Protein List... </li>
+        <div id="protein_highlight"  class="highlight_list">
+                <div id="protein_highlight_header">
+                    <div class="text">
+                        <div class="headertext">
+                            <span>Highlight Proteins</span>
+                            <button v-on:click="unactive_proteinlist()" id="highlight-btn-min"></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="highlight_main">
+                    <textarea v-model="raw_text" rows="10" cols="30" autofocus></textarea>
+                    <button v-on:click="highlight(raw_text)" id="highlight_protein">Go</button>
+                </div>
+        </div>
     </div>
 </template>
 
@@ -9,7 +22,7 @@
 export default {
     name: 'ProteinList',
     props: [''],
-    emits: ['status_changed'],
+    emits: ['protein_active_changed'],
     data() {
         return {
         }
@@ -56,8 +69,8 @@ export default {
                 document.onmousemove = null;
             }
         },
-        visible_list(){
-            this.$emit("status_changed", true);
+        unactive_proteinlist(){
+            this.$emit("protein_active_changed", false);
         }
     },
     mounted(){
diff --git a/frontend/src/components/toolbar/SelectionList.vue b/frontend/src/components/toolbar/modules/SelectionList.vue
similarity index 100%
rename from frontend/src/components/toolbar/SelectionList.vue
rename to frontend/src/components/toolbar/modules/SelectionList.vue
diff --git a/frontend/src/components/toolbar/SelectionWindow.vue b/frontend/src/components/toolbar/modules/SelectionWindow.vue
similarity index 100%
rename from frontend/src/components/toolbar/SelectionWindow.vue
rename to frontend/src/components/toolbar/modules/SelectionWindow.vue
diff --git a/frontend/src/components/toolbar/windows/MenuWindow.vue b/frontend/src/components/toolbar/windows/MenuWindow.vue
new file mode 100644
index 00000000..c48eb079
--- /dev/null
+++ b/frontend/src/components/toolbar/windows/MenuWindow.vue
@@ -0,0 +1,104 @@
+<template >
+    <div>
+        <div class="menu-window" 
+            v-on:mouseleave="active_window(false);"
+            v-on:mouseover="active_window(true);">
+
+            <div class="window-label">graph settings</div>
+            <div class="menu-items">
+                <NodeLabelSelect
+                :type="screen_type"
+                ></NodeLabelSelect>
+                <!-- <EdgeOpacity></EdgeOpacity> -->
+            </div>
+            <div class="window-label">visualize de-value</div>
+            <div class="menu-items">
+                <!-- <DEValue></DEValue> -->
+            </div>
+            <div class="window-label">export graph</div>
+            <div class="menu-items">
+                <ExportScreen
+                :type="screen_type"
+                ></ExportScreen>
+                <ExportGraph></ExportGraph>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import ExportScreen from '@/components/toolbar/modules/ExportScreen.vue'
+// import DEValue from '@/components/toolbar/DEValue.vue'
+import ExportGraph from '@/components/toolbar/modules/ExportGraph.vue'
+import NodeLabelSelect from '@/components/toolbar/modules/NodeLabelSelect.vue'
+// import EdgeOpacity from '@/components/toolbar/EdgeOpacity.vue'
+
+export default {
+    name: 'MenuWindow',
+    props: ['tools_active'],
+    emits:['tools_active_changed'],
+    components: {
+        ExportScreen,
+        // DEValue,
+        ExportGraph,
+        // EdgeOpacity,
+        NodeLabelSelect
+
+    },
+    data() {
+        return {
+        }
+    },
+    methods: {
+        active_window(state) {
+            this.$emit("tools_active_changed", state);
+        }
+    }
+}
+</script>
+
+<style>
+
+.menu-window {
+    position: absolute;
+    left: 3.515%;
+    height: fit-content;
+    width: 22%;
+    top: 5.78%;
+    padding: 0.3% 0 0.3% 0;
+    border-radius: 0 0 5px 5px;
+    background: rgba(222, 222, 222, 0.61);
+    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;
+}
+
+.menu-items {
+    margin: 1% 0 1% 6%;
+    width: 100%;
+    color:  white;
+}
+
+.window-label {
+    margin-left: 3%;
+    width: 93%;
+    font-family: 'ABeeZee', sans-serif;
+    color: rgba(255, 255, 255, 50%);
+    font-size: 0.9vw;
+    border-bottom: 1px solid;
+    border-color: rgba(255, 255, 255, 50%);
+    cursor: default;
+}
+
+.tool-item {
+    font-family: 'ABeeZee', sans-serif;
+    font-size: 1vw;
+
+}
+
+</style>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 2db14466..00b44d7e 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1756,19 +1756,6 @@ display: none;
 	margin: 40px 0 0 0;
 }
 
-.tool-item {
-	padding: 5px;
-}
-.tool-item li {
-	list-style-type: none;
-}
-.tool-item li:hover {
-	background-color: white;
-	color: black;
-	border-radius: 20px;
-	cursor: pointer;
-}
-
 .boundary {
 	border-radius: 20px;
 	background: rgba(255, 255, 255, 0.5);
diff --git a/frontend/src/views/ProteinView.vue b/frontend/src/views/ProteinView.vue
index da3b443b..58f7941b 100644
--- a/frontend/src/views/ProteinView.vue
+++ b/frontend/src/views/ProteinView.vue
@@ -41,13 +41,11 @@
       ></PathwayMenu>
     </keep-alive>
       <keep-alive>
-      <MainToolBar
-        :gephi_data='gephi_data'
-        @active_subset_changed = 'active_subset = $event'
-      ></MainToolBar>
-    </keep-alive>
-      <keep-alive>
-      <div class="header-menu">
+        <div class="header-menu">
+        <MainToolBar
+          :gephi_data='gephi_data'
+          @active_subset_changed = 'active_subset = $event'
+        ></MainToolBar>
         <SearchField
         :gephi_data='gephi_data'
         :active_node='active_node' @active_node_changed = 'active_node = $event'