diff --git a/src/static/app/src/components/configurationComponents/newPeersComponents/presharedKeyInput.vue b/src/static/app/src/components/configurationComponents/newPeersComponents/presharedKeyInput.vue
index a8c7d56..25f8e85 100644
--- a/src/static/app/src/components/configurationComponents/newPeersComponents/presharedKeyInput.vue
+++ b/src/static/app/src/components/configurationComponents/newPeersComponents/presharedKeyInput.vue
@@ -4,17 +4,38 @@ export default {
 	props: {
 		data: Object,
 		saving: Boolean
+	},
+	data(){
+		return{
+			enable: false
+		}
+	},
+	watch:{
+		enable(){
+			if (this.enable){
+				this.data.preshared_key = window.wireguard.generateKeypair().presharedKey
+			}else {
+				this.data.preshared_key = ""
+			}
+		}
 	}
 }
 </script>
 
 <template>
 <div>
-	<label for="peer_preshared_key_textbox" class="form-label">
-		<small class="text-muted">Pre-Shared Key</small>
-	</label>
+	<div class="d-flex align-items-start">
+		<label for="peer_preshared_key_textbox" class="form-label">
+			<small class="text-muted">Pre-Shared Key</small>
+		</label>
+		<div class="form-check form-switch ms-auto">
+			<input class="form-check-input" type="checkbox" role="switch" 
+			       v-model="this.enable"
+			       id="peer_preshared_key_switch">
+		</div>
+	</div>
 	<input type="text" class="form-control form-control-sm rounded-3"
-	       :disabled="this.saving"
+	       :disabled="this.saving || !this.enable"
 	       v-model="this.data.preshared_key"
 	       id="peer_preshared_key_textbox">
 </div>