diff --git a/src/static/app/src/components/configurationComponents/peerList.vue b/src/static/app/src/components/configurationComponents/peerList.vue
index c75637c..fb9572d 100644
--- a/src/static/app/src/components/configurationComponents/peerList.vue
+++ b/src/static/app/src/components/configurationComponents/peerList.vue
@@ -35,6 +35,7 @@ import dayjs from "dayjs";
 import {defineAsyncComponent, ref} from "vue";
 import LocaleText from "@/components/text/localeText.vue";
 import PeerRow from "@/components/configurationComponents/peerRow.vue";
+import {GetLocale} from "@/utilities/locale.js";
 export default {
 	name: "peerList",
 	components: {
@@ -148,7 +149,9 @@ export default {
 			},
 			deleteConfiguration: {
 				modalOpen: false
-			}
+			},
+			searchStringTimeout: undefined,
+			searchString: "",
 		}
 	},
 	mounted() {
@@ -194,6 +197,18 @@ export default {
 				this.configurationToggling = false;
 			})
 		},
+		debounce(){
+			if (!this.searchStringTimeout){
+				this.searchStringTimeout = setTimeout(() => {
+					this.wireguardConfigurationStore.searchString = this.searchString;
+				}, 300)
+			}else{
+				clearTimeout(this.searchStringTimeout)
+				this.searchStringTimeout = setTimeout(() => {
+					this.wireguardConfigurationStore.searchString = this.searchString;
+				}, 300)
+			}
+		},
 		getPeers(id = this.$route.params.id){
 			fetchGet("/api/getWireguardConfigurationInfo",
 				{
@@ -372,6 +387,9 @@ export default {
 				}
 			}
 		},
+		searchBarPlaceholder(){
+			return GetLocale("Search Peers...")
+		},
 		searchPeers(){
 			const fuse = new Fuse(this.configurationPeers, {
 				keys: ["name", "id", "allowed_ip"]
@@ -426,7 +444,7 @@ export default {
 				</div>
 			</div>
 			<div class="ms-sm-auto d-flex gap-2 flex-column">
-				<div class="card rounded-3 bg-transparent shadow-sm">
+				<div class="card rounded-3 bg-transparent ">
 					<div class="card-body py-2 d-flex align-items-center">
 						<small class="text-muted">
 							<LocaleText t="Status"></LocaleText>
@@ -454,28 +472,23 @@ export default {
 				<div class="d-flex gap-2">
 					<RouterLink
 						to="create"
-						class="titleBtn py-2 text-decoration-none btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm">
+						class="titleBtn py-2 text-decoration-none btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle ">
 						<i class="bi bi-plus-lg me-2"></i>
 						<LocaleText t="Peer"></LocaleText>
 					</RouterLink>
-					<button class="titleBtn py-2 text-decoration-none btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm"
+					<button class="titleBtn py-2 text-decoration-none btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle "
 					        @click="editConfiguration.modalOpen = true"
 					        type="button" aria-expanded="false">
 						<i class="bi bi-gear-fill me-2"></i>
 						<LocaleText t="Configuration Settings"></LocaleText>
 					</button>
-<!--					<button-->
-<!--						class="titleBtn btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm py-2">-->
-<!--						<i class="bi bi-download me-2"></i>-->
-<!--						<LocaleText t="Download All"></LocaleText>-->
-<!--					</button>-->
 				</div>
 			</div>
 		</div>
 		<hr>
 		<div class="row mt-3 gy-2 gx-2 mb-2">
 			<div class="col-12 col-lg-3">
-				<div class="card rounded-3 bg-transparent shadow-sm h-100">
+				<div class="card rounded-3 bg-transparent  h-100">
 					<div class="card-body py-2 d-flex flex-column justify-content-center">
 						<p class="mb-0 text-muted"><small>
 							<LocaleText t="Address"></LocaleText>
@@ -485,7 +498,7 @@ export default {
 				</div>
 			</div>
 			<div class="col-12 col-lg-3">
-				<div class="card rounded-3 bg-transparent shadow-sm  h-100">
+				<div class="card rounded-3 bg-transparent   h-100">
 					<div class="card-body py-2 d-flex flex-column justify-content-center">
 						<p class="mb-0 text-muted"><small>
 							<LocaleText t="Listen Port"></LocaleText>
@@ -495,7 +508,7 @@ export default {
 				</div>
 			</div>
 			<div style="word-break: break-all" class="col-12 col-lg-6">
-				<div class="card rounded-3 bg-transparent shadow-sm  h-100">
+				<div class="card rounded-3 bg-transparent   h-100">
 					<div class="card-body py-2 d-flex flex-column justify-content-center">
 						<p class="mb-0 text-muted"><small>
 							<LocaleText t="Public Key"></LocaleText>
@@ -507,7 +520,7 @@ export default {
 		</div>
 		<div class="row gx-2 gy-2 mb-2">
 			<div class="col-12 col-lg-3">
-				<div class="card rounded-3 bg-transparent shadow-sm h-100">
+				<div class="card rounded-3 bg-transparent  h-100">
 					<div class="card-body d-flex">
 						<div>
 							<p class="mb-0 text-muted"><small>
@@ -522,7 +535,7 @@ export default {
 				</div>
 			</div>
 			<div class="col-12 col-lg-3">
-				<div class="card rounded-3 bg-transparent shadow-sm h-100">
+				<div class="card rounded-3 bg-transparent  h-100">
 					<div class="card-body d-flex">
 						<div>
 							<p class="mb-0 text-muted"><small>
@@ -535,7 +548,7 @@ export default {
 				</div>
 			</div>
 			<div class="col-12 col-lg-3">
-				<div class="card rounded-3 bg-transparent shadow-sm h-100">
+				<div class="card rounded-3 bg-transparent  h-100">
 					<div class="card-body d-flex">
 						<div>
 							<p class="mb-0 text-muted"><small>
@@ -548,7 +561,7 @@ export default {
 				</div>
 			</div>
 			<div class="col-12 col-lg-3">
-				<div class="card rounded-3 bg-transparent shadow-sm h-100">
+				<div class="card rounded-3 bg-transparent  h-100">
 					<div class="card-body d-flex">
 						<div>
 							<p class="mb-0 text-muted"><small>
@@ -563,7 +576,7 @@ export default {
 		</div>
 		<div class="row gx-2 gy-2 mb-3">
 			<div class="col-12 col-lg-6">
-				<div class="card rounded-3 bg-transparent shadow-sm" style="height: 270px">
+				<div class="card rounded-3 bg-transparent " style="height: 270px">
 					<div class="card-header bg-transparent border-0">
 						<small class="text-muted">
 							<LocaleText t="Peers Data Usage"></LocaleText>
@@ -577,7 +590,7 @@ export default {
 				</div>
 			</div>
 			<div class="col-sm col-lg-3">
-				<div class="card rounded-3 bg-transparent shadow-sm" style="height: 270px">
+				<div class="card rounded-3 bg-transparent " style="height: 270px">
 					<div class="card-header bg-transparent border-0"><small class="text-muted">
 						<LocaleText t="Real Time Received Data Usage"></LocaleText>
 					</small></div>
@@ -591,7 +604,7 @@ export default {
 				</div>
 			</div>
 			<div class="col-sm col-lg-3">
-				<div class="card rounded-3 bg-transparent shadow-sm" style="height: 270px">
+				<div class="card rounded-3 bg-transparent " style="height: 270px">
 					<div class="card-header bg-transparent border-0"><small class="text-muted">
 						<LocaleText t="Real Time Sent Data Usage"></LocaleText>
 					</small></div>
@@ -606,7 +619,7 @@ export default {
 			</div>
 		</div>
 		<hr>
-		<div class="mb-3">
+		<div style="margin-bottom: 80px">
 			<PeerSearch
 				@jobsAll="this.peerScheduleJobsAll.modalOpen = true"
 				@jobLogs="this.peerScheduleJobsLogs.modalOpen = true"
@@ -629,8 +642,31 @@ export default {
 					></Peer>
 				</div>
 			</TransitionGroup>
-			
 		</div>
+		<div class="fixed-bottom w-100 bottom-0 z-2 animate__animated animate__slideInUp" style="z-index: 1; animation-delay: 0.5s">
+			<div class="container-fluid">
+				<div class="row g-0">
+					<div class="col-md-3 col-lg-2"></div>
+					<div class="col-md-9 col-lg-10 d-flex justify-content-center py-2">
+						<div class="rounded-3 p-2 border shadow searchPeersContainer">
+							<div class="d-flex gap-3 align-items-center ps-2">
+								<h6 class="mb-0 ms-auto">
+									<label for="searchPeers">
+										<i class="bi bi-search"></i>
+									</label>
+								</h6>
+								<input class="form-control rounded-3 bg-secondary-subtle border-1 border-secondary-subtle "
+								       :placeholder="searchBarPlaceholder"
+								       id="searchPeers"
+								       @keyup="this.debounce()"
+								       v-model="this.searchString">
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		
 		<Transition name="zoom">
 			<PeerSettings v-if="this.peerSetting.modalOpen"
 			              key="settings"
@@ -733,4 +769,15 @@ th, td{
 		flex-basis: 100%;
 	}
 }
+
+.searchPeersContainer{
+	width: 100%;
+	backdrop-filter: blur(10px);
+}
+
+@media screen and (min-width: 768px){
+	.searchPeersContainer{
+		width: 400px;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/src/static/app/src/components/configurationComponents/peerSearch.vue b/src/static/app/src/components/configurationComponents/peerSearch.vue
index fee8b98..426beda 100644
--- a/src/static/app/src/components/configurationComponents/peerSearch.vue
+++ b/src/static/app/src/components/configurationComponents/peerSearch.vue
@@ -89,30 +89,30 @@ export default {
 </script>
 
 <template>
-	<div class="d-flex flex-column gap-2 mb-3">
-		<div class="d-flex gap-3 align-items-center">
-			<h6 class="mb-0 ms-auto">
-				<label for="searchPeers">
-					<i class="bi bi-search"></i>
-				</label>
-			</h6>
-			<input class="form-control form-control-sm rounded-3 bg-secondary-subtle border-1 border-secondary-subtle shadow-sm"
-			       :placeholder="searchBarPlaceholder"
-			       id="searchPeers"
-			       @keyup="this.debounce()"
-			       v-model="this.searchString">
-		</div>
-		<div class="d-flex gap-2 z-3 peerSearchContainer">
+	<div class="d-flex flex-column gap-2 my-4">
+<!--		<div class="d-flex gap-3 align-items-center">-->
+<!--			<h6 class="mb-0 ms-auto">-->
+<!--				<label for="searchPeers">-->
+<!--					<i class="bi bi-search"></i>-->
+<!--				</label>-->
+<!--			</h6>-->
+<!--			<input class="form-control form-control-sm rounded-3 bg-secondary-subtle border-1 border-secondary-subtle "-->
+<!--			       :placeholder="searchBarPlaceholder"-->
+<!--			       id="searchPeers"-->
+<!--			       @keyup="this.debounce()"-->
+<!--			       v-model="this.searchString">-->
+<!--		</div>-->
+		<div class="d-flex gap-2 peerSearchContainer">
 			
 			<div class="dropdown">
 				<button
 					data-bs-toggle="dropdown"
-					class="btn w-100 btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm position-relative">
+					class="btn w-100 btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle  position-relative">
 					<i class="bi bi-sort-up me-2"></i>
 					<LocaleText t="Sort By"></LocaleText>
 					<span class="badge text-bg-primary ms-2">{{this.sort[store.Configuration.Server.dashboard_sort]}}</span>
 				</button>
-				<ul class="dropdown-menu rounded-3 shadow">
+				<ul class="dropdown-menu rounded-3 ">
 					<li v-for="(value, key) in this.sort" >
 						<button class="dropdown-item d-flex align-items-center" @click="this.updateSort(key)">
 							<small>
@@ -129,12 +129,12 @@ export default {
 			<div class="dropdown">
 				<button
 					data-bs-toggle="dropdown"
-					class="btn btn-sm w-100 text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm position-relative">
+					class="btn btn-sm w-100 text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle  position-relative">
 					<i class="bi bi-arrow-repeat me-2"></i>
 					<LocaleText t="Refresh Interval"></LocaleText>
 					<span class="badge text-bg-primary ms-2">{{this.interval[store.Configuration.Server.dashboard_refresh_interval]}}</span>
 				</button>
-				<ul class="dropdown-menu rounded-3 shadow">
+				<ul class="dropdown-menu rounded-3 ">
 					<li v-for="(value, key) in this.interval" >
 						<button class="dropdown-item d-flex align-items-center" @click="this.updateRefreshInterval(key)">
 							<small>
@@ -149,17 +149,17 @@ export default {
 
 				</ul>
 			</div>
-			<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm ms-lg-auto"
+			<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle  ms-lg-auto"
 			        @click="this.downloadAllPeer()">
 				<i class="bi bi-download me-2"></i>
 				<LocaleText t="Download All"></LocaleText>
 			</button>
-			<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm"
+			<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle "
 			        @click="this.$emit('selectPeers')">
 				<i class="bi bi-check2-all me-2"></i>
 				<LocaleText t="Select Peers"></LocaleText>
 			</button>
-			<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm"
+			<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle "
 			        @click="this.$emit('jobsAll')"
 			        type="button" aria-expanded="false">
 				<i class="bi bi-person-walking me-2"></i>
@@ -206,7 +206,7 @@ export default {
 }
 
 
-button{
+.peerSearchContainer > button, .peerSearchContainer .dropdown > button{
 	text-align: left;
 	display: flex;
 	align-items: center;