diff --git a/frontend/src/assets/toolbar/google-logo.png b/frontend/src/assets/toolbar/google-logo.png
new file mode 100644
index 00000000..09fd0a61
Binary files /dev/null and b/frontend/src/assets/toolbar/google-logo.png differ
diff --git a/frontend/src/components/enrichment/PathwayList.vue b/frontend/src/components/enrichment/PathwayList.vue
index 88ec8ed9..75a2b78a 100644
--- a/frontend/src/components/enrichment/PathwayList.vue
+++ b/frontend/src/components/enrichment/PathwayList.vue
@@ -279,7 +279,7 @@ export default {
         transform: translateY(-50%);
         margin-left: 0.28%;
         border-radius: 10px;
-        z-index: 999;
+        z-index: 997;
         cursor: default;
         font-family: 'ABeeZee', sans-serif;
 
@@ -451,7 +451,7 @@ export default {
         text-decoration:none;
     }
 
-    .results {
+    .list-section .results {
         height: 90%;
         overflow: scroll;
     }
diff --git a/frontend/src/components/interface/SearchField.vue b/frontend/src/components/interface/SearchField.vue
new file mode 100644
index 00000000..89a2005f
--- /dev/null
+++ b/frontend/src/components/interface/SearchField.vue
@@ -0,0 +1,189 @@
+<template>
+    <div id="search-menu">
+        <div id="search" class="search-field" :class="{ full: search_raw.length >= 3 }">
+            <img class="search-field-icon" src="@/assets/toolbar/search.png">
+            <input type="text" v-model="search_raw" class="empty" placeholder="Find your protein" @keyup.enter="select_node(filt_search[0])"/>
+        </div>
+        <div class="check-active" v-if="search_raw.length >= 3 && filt_search.length > 0" v-on:click="search_raw=''"></div>
+        <div class="results" v-if="search_raw.length >= 3 && filt_search.length > 0" >
+            <div class="result-label">proteins 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>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'SearchField',
+    props: ['gephi_data'],
+    emits: ['active_node_changed'],
+    data() {
+        return {
+            search_raw: "",
+        }
+    },
+    methods: {
+
+        select_node(node) {
+            if (node) this.$emit("active_node_changed", node);
+        },
+        google_search(protein, index){
+            document.getElementById("results-"+ index).setAttribute("href","https://www.google.com/search?q=" + protein)
+        },
+
+    },
+    computed: {
+        regex() {
+            var com = this;
+            return RegExp(com.search_raw.toLowerCase());
+        },
+        filt_search() {
+            var com = this;
+            var matches = [];
+
+            if (com.search_raw.length >= 3) {
+                var regex = new RegExp(com.regex, 'i');
+                matches = com.gephi_data.nodes.filter(function(node) {
+                    return regex.test(node.label);
+                });
+            }
+            return matches
+        }
+    }
+}
+</script>
+
+<style>
+#search-menu {
+    width: 19.84%;
+    height: 3.98%;
+    display: flex;
+    position: absolute;
+    backdrop-filter: blur(7.5px);
+    align-content: center;
+    justify-content: center;
+}
+
+.search-field{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    border-radius: 5px;
+    background: rgba(222, 222, 222, 0.3);
+    position: absolute;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    z-index: 999;
+}
+
+.full {
+    border-radius: 5px 5px 0 0;
+}
+
+
+.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: fixed;
+    width: 19.84%;
+    max-height: 20%;
+    top: 5.78%;
+    padding: 0.3% 0 0.3% 0;
+    border-radius: 0 0 5px 5px;
+    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;
+
+}
+
+
+
+</style>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 4d2fff7e..2db14466 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -561,25 +561,6 @@ html,body{
 	margin-top: 100px;
 }
 
-.toolbar-search{
-	display: block;
-	border-radius: 20px;
-
-}
-
-.toolbar-search input[type=text]{
-	font-family: 'Roboto Mono', monospace;
-	background-color: rgba(0, 0, 0, 0.9);
-	border: none;
-	border-radius: 20px;
-	color: #fff;
-	height: 20px;
-	line-height: 20px;
-	border-style: outset;
-	border-width: 1px;
-	text-align: center;
-}
-
 .minimize {	
  display: block;
  position:absolute;
@@ -1063,25 +1044,6 @@ padding: 0px;
 	padding-bottom:15px;
 }
 
-.search-field {
-	z-index: 999;
-	padding: 5px;
-	border-radius: 20px;
-}
-
-#search .results {
-	display: none;
-	background-color: rgba(0, 0, 0, 0.9);
-	color: white;
-	border-radius: 20px;
-	text-align: center;
-	margin: 6px;
-	max-height: 75px;
-	overflow-y: scroll;
-	overflow-x: hidden;
-}
-
-
 .tool-pane .results {
 	height: 200px;
 	display: block;
@@ -1288,18 +1250,6 @@ padding: 0px;
 	}
   }
 
-#search .results b {
-padding-left: 2px;
-}
-
-#search .results a {
-padding: 1px 2px;
-display: block;
-cursor: pointer;
-text-decoration: none;
-color: white;
-}
-
 #attributeselect {
 margin: 20px 0 13px 0 ;
 -webkit-touch-callout: none;
diff --git a/frontend/src/views/ProteinView.vue b/frontend/src/views/ProteinView.vue
index bf3cd942..70e44b67 100644
--- a/frontend/src/views/ProteinView.vue
+++ b/frontend/src/views/ProteinView.vue
@@ -48,12 +48,10 @@
     </keep-alive>
       <keep-alive>
       <div class="header-menu">
-        <!-- <ModularityClass
+        <SearchField
         :gephi_data='gephi_data'
-        :type='type'
-        :active_subset='active_subset' @active_subset_changed = 'active_subset = $event'
-        :subactive_subset='subactive_subset' @subactive_subset_changed = 'subactive_subset = $event'
-        > </ModularityClass> -->
+        :active_node='active_node' @active_node_changed = 'active_node = $event'
+        ></SearchField>
       </div>
     </keep-alive>
       <keep-alive>
@@ -74,7 +72,7 @@
 import MainVis from '@/components/visualization/MainVis.vue'
 import PaneSystem from '@/components/pane/PaneSystem.vue'
 import PathwayMenu from '@/components/enrichment/PathwayMenu.vue'
-// import ModularityClass from '../components/interface/ModularityClass.vue'
+import SearchField from '../components/interface/SearchField.vue'
 // import ToggleLabel from '../components/interface/ToggleLabel.vue'
 // import ConnectedGraph from '../components/interface/ConnectedGraph.vue'
 import MainToolBar from '../components/toolbar/MainToolBar.vue'
@@ -85,7 +83,7 @@ export default {
     MainVis,
     PaneSystem,
     PathwayMenu,
-    // ModularityClass,
+    SearchField,
     MainToolBar,
     // ToggleLabel,
     // ConnectedGraph