diff --git a/src/static/app/src/components/configurationComponents/peerListComponents/peerListModals.vue b/src/static/app/src/components/configurationComponents/peerListComponents/peerListModals.vue
index b25c78d..d0b4b99 100644
--- a/src/static/app/src/components/configurationComponents/peerListComponents/peerListModals.vue
+++ b/src/static/app/src/components/configurationComponents/peerListComponents/peerListModals.vue
@@ -22,13 +22,21 @@ const PeerSettingsModal = defineAsyncComponent(() => import("@/components/config
 
 <template>
 	<Transition name="zoom">
-		<PeerSettingsModal v-if="configurationModals.peerSetting.modalOpen"
-		              key="settings"
-		              :selectedPeer="configurationModalSelectedPeer"
-		              @refresh="emits('refresh')"
-		              @close="configurationModals.peerSetting.modalOpen = false">
+		<PeerSettingsModal 
+			v-if="configurationModals.peerSetting.modalOpen"
+			key="settings"
+			:selectedPeer="configurationModalSelectedPeer"
+			@refresh="emits('refresh')"
+			@close="configurationModals.peerSetting.modalOpen = false">
 		</PeerSettingsModal>
 	</Transition>
+	<Transition name="zoom">
+		<PeerQRCodeModal 
+			v-if="configurationModals.peerQRCode.modalOpen"
+			:selectedPeer="configurationModalSelectedPeer"
+			@close="configurationModals.peerQRCode.modalOpen = false">
+		</PeerQRCodeModal>
+	</Transition>
 </template>
 
 <style scoped>
diff --git a/src/static/app/src/components/configurationComponents/peerListNew.vue b/src/static/app/src/components/configurationComponents/peerListNew.vue
index 3654f6e..d3baf85 100644
--- a/src/static/app/src/components/configurationComponents/peerListNew.vue
+++ b/src/static/app/src/components/configurationComponents/peerListNew.vue
@@ -20,7 +20,7 @@ const route = useRoute()
 const configurationInfo = ref({})
 const configurationPeers = ref([])
 const configurationToggling = ref(false)
-const configurationModalSelectedPeer = ref("")
+const configurationModalSelectedPeer = ref({})
 const configurationModals = ref({
 	peerSetting: {
 		modalOpen: false,
@@ -345,7 +345,7 @@ const searchPeers = computed(() => {
 				      @refresh="fetchPeerList()"
 				      @jobs="configurationModals.peerScheduleJobs.modalOpen = true; configurationModals.peerScheduleJobs.selectedPeer = this.configurationPeers.find(x => x.id === peer.id)"
 				      @setting="configurationModals.peerSetting.modalOpen = true; configurationModalSelectedPeer = peer"
-				      @qrcode="(file) => {configurationModals.peerQRCode.peerConfigData = file; configurationModals.peerQRCode.modalOpen = true;}"
+				      @qrcode="(file) => {configurationModalSelectedPeer = peer; configurationModals.peerQRCode.modalOpen = true;}"
 				      @configurationFile="(file) => {configurationModals.peerConfigurationFile.peerConfigData = file; configurationModals.peerConfigurationFile.modalOpen = true;}"
 				></Peer>
 			</div>
diff --git a/src/static/app/src/components/configurationComponents/peerQRCode.vue b/src/static/app/src/components/configurationComponents/peerQRCode.vue
index 77c2949..4780378 100644
--- a/src/static/app/src/components/configurationComponents/peerQRCode.vue
+++ b/src/static/app/src/components/configurationComponents/peerQRCode.vue
@@ -1,15 +1,35 @@
 <script>
 import QRCode from "qrcode";
 import LocaleText from "@/components/text/localeText.vue";
+import {fetchGet} from "@/utilities/fetch.js";
+import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
 export default {
 	name: "peerQRCode",
 	components: {LocaleText},
 	props: {
-		peerConfigData: String
+		selectedPeer: Object
+	},
+	setup(){
+		const dashboardStore = DashboardConfigurationStore();
+		return {dashboardStore}
+	},
+	data(){
+		return{
+			loading: true
+		}
 	},
 	mounted() {
-		QRCode.toCanvas(document.querySelector("#qrcode"), this.peerConfigData ,  (error) => {
-			if (error) console.error(error)
+		fetchGet("/api/downloadPeer/"+this.$route.params.id, {
+			id: this.selectedPeer.id
+		}, (res) => {
+			this.loading = false;
+			if (res.status){
+				QRCode.toCanvas(document.querySelector("#qrcode"), res.data.file,  (error) => {
+					if (error) console.error(error)
+				})
+			}else{
+				this.dashboardStore.newMessage("Server", res.message, "danger")
+			}
 		})
 	}
 }
@@ -26,8 +46,13 @@ export default {
 						</h4>
 						<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
 					</div>
-					<div class="card-body">
-						<canvas id="qrcode" class="rounded-3 shadow" ref="qrcode"></canvas>
+					<div class="card-body p-4">
+						<div style="width: 292px; height: 292px;" class="d-flex">
+							<canvas id="qrcode" class="rounded-3 shadow animate__animated animate__fadeIn animate__faster" :class="{'d-none': loading}"></canvas>
+							<div class="spinner-border m-auto" role="status" v-if="loading">
+								<span class="visually-hidden">Loading...</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>