diff --git a/core_lib/bindings/State.ts b/core_lib/bindings/State.ts
index 6ad3ef0..64bc894 100644
--- a/core_lib/bindings/State.ts
+++ b/core_lib/bindings/State.ts
@@ -1,3 +1,3 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 
-export type State = "Initial" | "ReceivedConnectionRequest" | "SentUkeyServerInit" | "SentUkeyClientInit" | "SentUkeyClientFinish" | "SentPairedKeyEncryption" | "ReceivedUkeyClientFinish" | "SentConnectionResponse" | "SentPairedKeyResult" | "SentIntroduction" | "ReceivedPairedKeyResult" | "WaitingForUserConsent" | "ReceivingFiles" | "SendingFiles" | "Disconnected" | "Finished";
\ No newline at end of file
+export type State = "Initial" | "ReceivedConnectionRequest" | "SentUkeyServerInit" | "SentUkeyClientInit" | "SentUkeyClientFinish" | "SentPairedKeyEncryption" | "ReceivedUkeyClientFinish" | "SentConnectionResponse" | "SentPairedKeyResult" | "SentIntroduction" | "ReceivedPairedKeyResult" | "WaitingForUserConsent" | "ReceivingFiles" | "SendingFiles" | "Disconnected" | "Cancelled" | "Finished";
\ No newline at end of file
diff --git a/core_lib/src/hdl/inbound.rs b/core_lib/src/hdl/inbound.rs
index 9e712e8..eb2b8ab 100644
--- a/core_lib/src/hdl/inbound.rs
+++ b/core_lib/src/hdl/inbound.rs
@@ -96,7 +96,14 @@ impl InboundRequest {
                                 )).await?;
                             },
                             Some(ChannelAction::CancelTransfer) => {
-                                todo!()
+                                self.update_state(
+                                    |e| {
+                                        e.state = State::Cancelled;
+                                    },
+                                    true,
+                                );
+                                self.disconnection().await?;
+                                return Err(anyhow!(crate::errors::AppError::NotAnError));
                             },
                             None => {
                                 trace!("inbound: nothing to do")
@@ -634,7 +641,14 @@ impl InboundRequest {
 
         if v1_frame.r#type() == sharing_nearby::v1_frame::FrameType::Cancel {
             info!("Transfer canceled");
-            return self.disconnection().await;
+            self.update_state(
+                |e| {
+                    e.state = State::Disconnected;
+                },
+                true,
+            );
+            self.disconnection().await?;
+            return Err(anyhow!(crate::errors::AppError::NotAnError));
         }
 
         match self.state.state {
diff --git a/core_lib/src/hdl/mod.rs b/core_lib/src/hdl/mod.rs
index 144cbaa..d17c99b 100644
--- a/core_lib/src/hdl/mod.rs
+++ b/core_lib/src/hdl/mod.rs
@@ -38,6 +38,7 @@ pub enum State {
     ReceivingFiles,
     SendingFiles,
     Disconnected,
+    Cancelled,
     Finished,
 }
 
diff --git a/core_lib/src/hdl/outbound.rs b/core_lib/src/hdl/outbound.rs
index 46157e3..043e22b 100644
--- a/core_lib/src/hdl/outbound.rs
+++ b/core_lib/src/hdl/outbound.rs
@@ -121,10 +121,17 @@ impl OutboundRequest {
                             return Ok(());
                         }
 
-                        debug!("inbound: got: {:?}", channel_msg);
+                        debug!("outbound: got: {:?}", channel_msg);
                         match channel_msg.action {
                             Some(ChannelAction::CancelTransfer) => {
-                                todo!()
+                                self.update_state(
+                                    |e| {
+                                        e.state = State::Cancelled;
+                                    },
+                                    true,
+                                );
+                                self.disconnection().await?;
+                                return Err(anyhow!(crate::errors::AppError::NotAnError));
                             },
                             None => {
                                 trace!("inbound: nothing to do")
@@ -551,7 +558,14 @@ impl OutboundRequest {
 
         if v1_frame.r#type() == sharing_nearby::v1_frame::FrameType::Cancel {
             info!("Transfer canceled");
-            return self.disconnection().await;
+            self.update_state(
+                |e| {
+                    e.state = State::Disconnected;
+                },
+                true,
+            );
+            self.disconnection().await?;
+            return Err(anyhow!(crate::errors::AppError::NotAnError));
         }
 
         match self.state.state {
@@ -750,13 +764,14 @@ impl OutboundRequest {
                         Some(i) => i,
                         None => {
                             info!("All files have been transferred");
-                            self.disconnection().await?;
                             self.update_state(
                                 |e| {
                                     e.state = State::Finished;
                                 },
                                 true,
                             );
+                            self.disconnection().await?;
+                            // Breaking instead of NotAnError to allow peacefull termination
                             break;
                         }
                     };
@@ -892,11 +907,23 @@ impl OutboundRequest {
                     "Cannot process: consent denied: {:?}",
                     v1_frame.connection_response.as_ref().unwrap().status()
                 );
+                self.update_state(
+                    |e| {
+                        e.state = State::Disconnected;
+                    },
+                    true,
+                );
                 self.disconnection().await?;
                 return Err(anyhow!(crate::errors::AppError::NotAnError));
             }
             sharing_nearby::connection_response_frame::Status::Unknown => {
                 error!("Unknown consent type: aborting");
+                self.update_state(
+                    |e| {
+                        e.state = State::Disconnected;
+                    },
+                    true,
+                );
                 self.disconnection().await?;
                 return Err(anyhow!(crate::errors::AppError::NotAnError));
             }
diff --git a/core_lib/src/manager.rs b/core_lib/src/manager.rs
index 49faa59..463fc3a 100644
--- a/core_lib/src/manager.rs
+++ b/core_lib/src/manager.rs
@@ -152,7 +152,7 @@ impl TcpServer {
                                     break;
                                 }
 
-                                if or.state.state != State::Finished {
+                                if or.state.state != State::Finished && or.state.state != State::Cancelled {
                                     let _ = self.sender.clone().send(ChannelMessage {
                                         id: si.addr,
                                         direction: ChannelDirection::LibToFront,
diff --git a/frontend/src/components/HomePage.vue b/frontend/src/components/HomePage.vue
index 045d90e..995b2ad 100644
--- a/frontend/src/components/HomePage.vue
+++ b/frontend/src/components/HomePage.vue
@@ -1,177 +1,3 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { listen } from '@tauri-apps/api/event'
-import { invoke } from '@tauri-apps/api/tauri'
-import { appWindow } from "@tauri-apps/api/window";
-import { isPermissionGranted, requestPermission, sendNotification } from '@tauri-apps/api/notification'
-
-import { ChannelMessage } from '../../../core_lib/bindings/ChannelMessage';
-import { ChannelAction } from '../../../core_lib/bindings/ChannelAction';
-import { EndpointInfo } from '../../../core_lib/dist/EndpointInfo';
-import { OutboundPayload } from '../../../core_lib/bindings/OutboundPayload';
-import { SendInfo } from '../../../core_lib/bindings/SendInfo';
-
-let discoveryRunning = false;
-let isAppInForeground = false;
-// Do you have permission to send a notification?
-let permissionGranted = await isPermissionGranted();
-
-// If not we need to request it
-if (!permissionGranted) {
-	const permission = await requestPermission();
-	permissionGranted = permission === 'granted';
-}
-
-const _stateToDisplay = ["ReceivedPairedKeyResult", "WaitingForUserConsent", "ReceivingFiles", "Disconnected", "Finished", "SentIntroduction", "SendingFiles"]
-
-interface ToDelete {
-	id: string,
-	triggered: number
-}
-
-const isDragHovering = ref(false);
-const requests = ref<ChannelMessage[]>([]);
-const endpointsInfo = ref<EndpointInfo[]>([]);
-const toDelete = ref<ToDelete[]>([]);
-const outboundPayload = ref<OutboundPayload | undefined>();
-const requestIsEmpty = computed(() => {
-	return requests.value.filter((el) => _stateToDisplay.includes(el.state ?? 'Initial')).length == 0
-});
-
-async function sendCmd(id: string, action: ChannelAction) {
-	const cm: ChannelMessage = {
-		id: id,
-		direction: 'FrontToLib',
-		action: action,
-		meta: null,
-		state: null,
-		rtype: null,
-	};
-	console.log("js2rs:", cm);
-
-	await invoke('js2rs', { message: cm });
-}
-
-async function sendInfo(ei: EndpointInfo) {
-	if (outboundPayload.value === undefined) return;
-
-	const msg: SendInfo = {
-		id: ei.id,
-		name: ei.name ?? 'Unknown',
-		addr: ei.ip + ":" + ei.port,
-		ob: outboundPayload.value,
-	};
-
-	await invoke('send_payload', { message: msg });
-}
-
-function removeRequest(id: string) {
-	const idx = requests.value.findIndex((el) => el.id === id);
-
-	if (idx !== -1) {
-		requests.value.splice(idx, 1);
-	}
-}
-
-async function clearSending() {
-	outboundPayload.value = undefined;
-	await invoke('stop_discovery');
-	discoveryRunning = false;
-	endpointsInfo.value = [];
-}
-
-await listen('rs2js', (event) => {
-	const cm = event.payload as ChannelMessage;
-	console.log("rs2js:", cm);
-
-	const idx = requests.value.findIndex((el) => el.id === cm.id);
-
-	if (cm.state === "Disconnected") {
-		toDelete.value.push({
-			id: cm.id,
-			triggered: new Date().getTime()
-		});
-	}
-
-	if (idx !== -1) {
-		const prev = requests.value.at(idx);
-		// Update the existing message at index 'idx'
-		requests.value.splice(idx, 1, {
-			...cm,
-			state: cm.state ?? prev!.state,
-			meta: cm.meta ?? prev!.meta,
-		});
-	} else {
-		if (isAppInForeground && permissionGranted && cm.state === 'WaitingForUserConsent') {
-			sendNotification({ title: 'New transfer request', body: (cm.meta?.source?.name ?? 'Unknown') + ' want to initiate a transfer.' });
-		}
-
-		// Push the new message if not found
-		requests.value.push(cm);
-	}
-})
-
-await listen('rs2js_discovery', (event) => {
-	const ei = event.payload as EndpointInfo;
-	console.log("rs2js:", ei);
-
-	const idx = endpointsInfo.value.findIndex((el) => el.id === ei.id);
-	if (!ei.present) {
-		if (idx !== -1) {
-			endpointsInfo.value.splice(idx, 1);
-		}
-
-		return;
-	}
-
-	if (idx !== -1) {
-		endpointsInfo.value.splice(idx, 1, ei);
-	} else {
-		endpointsInfo.value.push(ei);
-	}
-});
-
-await appWindow.onFileDropEvent(async (event) => {
-	if (event.payload.type === 'hover') {
-		isDragHovering.value = true;
-	} else if (event.payload.type === 'drop') {
-		console.log("Dropped");
-		isDragHovering.value = false;
-		outboundPayload.value = {
-			Files: event.payload.paths
-		} as OutboundPayload;
-		if (!discoveryRunning) await invoke('start_discovery');
-		discoveryRunning = true;
-	} else {
-		isDragHovering.value = false;
-	}
-});
-
-setInterval(() => {
-	toDelete.value.forEach((itemToDelete) => {
-		const now = new Date();
-		const timeDifference = now.getTime() - itemToDelete.triggered;
-
-		// Check if at least 30 seconds have passed (30000 milliseconds)
-		if (timeDifference >= 30000) removeRequest(itemToDelete.id);
-	});
-
-	// Clear only elements that have been processed (more than 30s old)
-	toDelete.value = toDelete.value.filter((item) => {
-		const now = new Date();
-		return now.getTime() - item.triggered < 30000;
-	});
-}, 30000);
-
-window.addEventListener('focus', () => {
-	isAppInForeground = true;
-});
-
-window.addEventListener('blur', () => {
-	isAppInForeground = false;
-});
-</script>
-
 <template>
 	<div class="flex flex-col bg-green-50 w-full h-full max-w-full max-h-full">
 		<div class="flex flex-row justify-between items-center px-6 py-4">
@@ -242,20 +68,20 @@ window.addEventListener('blur', () => {
 			</div>
 			<div
 				class="flex-1 flex flex-col h-full rounded-tl-[3rem] bg-white p-12"
-				:class="{'items-center': requestIsEmpty}">
+				:class="{'items-center': displayedIsEmpty}">
 				<h3 class="mb-4 font-medium text-xl">
-					<span v-if="requestIsEmpty">Ready to receive</span>
+					<span v-if="displayedIsEmpty">Ready to receive{{ outboundPayload != undefined ? ' / send' : '' }}</span>
 					<span v-else>Nearby devices</span>
 				</h3>
 
-				<div v-if="requestIsEmpty && endpointsInfo.length === 0" class="my-auto status-indicator status-indicator--success status-indicator--xl">
+				<div v-if="displayedIsEmpty && endpointsInfo.length === 0" class="my-auto status-indicator status-indicator--success status-indicator--xl">
 					<div class="circle circle--animated circle-main" />
 					<div class="circle circle--animated circle-secondary" />
 					<div class="circle circle--animated circle-tertiary" />
 				</div>
 
 				<div
-					v-if="requestIsEmpty && outboundPayload === undefined" class="w-full border-dashed border-2 border-gray-300 rounded-2xl p-6 flex flex-col
+					v-if="displayedIsEmpty && outboundPayload === undefined" class="w-full border-dashed border-2 border-gray-300 rounded-2xl p-6 flex flex-col
 						justify-center items-center transition duration-150 ease-in-out"
 					:class="{'border-green-200': isDragHovering, 'bg-green-100': isDragHovering, 'scale-105': isDragHovering}">
 					<svg
@@ -270,72 +96,31 @@ window.addEventListener('blur', () => {
 				</div>
 
 				<div
-					v-for="ei in endpointsInfo"
-					:key="ei.id"
-					class="w-full bg-green-200 bg-opacity-65 rounded-3xl flex flex-row gap-6 p-4 mb-4 cursor-pointer"
-					@click="sendInfo(ei)">
-					<div>
-						<div class="h-16 w-16 rounded-full bg-green-50">
-							<svg
-								v-if="ei.rtype === 'Laptop'" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
-								width="24" class="w-full h-full p-4 fill-gray-900">
-								<!-- eslint-disable-next-line -->
-								<path d="M0-160v-80h160v-40q-33 0-56.5-23.5T80-360v-400q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v400q0 33-23.5 56.5T800-280v40h160v80H0Zm160-200h640v-400H160v400Zm0 0v-400 400Z" />
-							</svg>
-							<svg
-								v-else-if="ei.rtype === 'Phone'" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
-								width="24" class="w-full h-full p-4 fill-gray-900">
-								<!-- eslint-disable-next-line -->
-								<path d="M280-40q-33 0-56.5-23.5T200-120v-720q0-33 23.5-56.5T280-920h400q33 0 56.5 23.5T760-840v720q0 33-23.5 56.5T680-40H280Zm0-120v40h400v-40H280Zm0-80h400v-480H280v480Zm0-560h400v-40H280v40Zm0 0v-40 40Zm0 640v40-40Z" />
-							</svg>
-							<svg
-								v-else-if="ei.rtype === 'Tablet'" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
-								width="24" class="w-full h-full p-4 fill-gray-900">
-								<!-- eslint-disable-next-line -->
-								<path d="M120-160q-33 0-56.5-23.5T40-240v-480q0-33 23.5-56.5T120-800h720q33 0 56.5 23.5T920-720v480q0 33-23.5 56.5T840-160H120Zm40-560h-40v480h40v-480Zm80 480h480v-480H240v480Zm560-480v480h40v-480h-40Zm0 0h40-40Zm-640 0h-40 40Z" />
-							</svg>
-							<svg
-								v-else xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
-								width="24" class="w-full h-full p-4 fill-gray-900">
-								<!-- eslint-disable-next-line -->
-								<path d="M280-160H160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640v80H160v480h120v80Zm160-100q25 0 42.5-17.5T500-320q0-25-17.5-42.5T440-380q-25 0-42.5 17.5T380-320q0 25 17.5 42.5T440-260Zm-80 100v-71q-19-17-29.5-40T320-320q0-26 10.5-49t29.5-40v-71h160v71q19 17 29.5 40t10.5 49q0 26-10.5 49T520-231v71H360Zm480 0H640q-17 0-28.5-11.5T600-200v-360q0-17 11.5-28.5T640-600h200q17 0 28.5 11.5T880-560v360q0 17-11.5 28.5T840-160Zm-160-80h120v-280H680v280Zm0 0h120-120Z" />
-							</svg>
-						</div>
-					</div>
-					<div class="flex-1 flex flex-col text-sm justify-center">
-						<h4 class="text-base font-medium">
-							{{ ei.name ?? 'Unknown' }}
-						</h4>
-					</div>
-				</div>
-
-				<div
-					v-for="request in requests.filter((el) => _stateToDisplay.includes(el.state ?? 'Initial'))"
-					:key="request.id"
+					v-for="item in displayedItems" :key="item.id"
 					class="w-full bg-green-200 bg-opacity-65 rounded-3xl flex flex-row gap-6 p-4 mb-4"
-					:class="{'pb-4': ['WaitingForUserConsent', 'Finished'].includes(request.state ?? '')}">
+					:class="{'cursor-pointer': item.endpoint}" @click="item.endpoint && sendInfo(item.id)">
 					<div>
-						<div class="h-16 w-16 rounded-full bg-green-50" :class="{'!bg-green-400': request.state === 'Finished'}">
+						<div class="h-16 w-16 rounded-full bg-green-50" :class="{'!bg-green-400': item.state === 'Finished'}">
 							<svg
-								v-if="request.state === 'Finished'" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
+								v-if="item.state === 'Finished'" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
 								width="24" class="w-full h-full p-4 fill-white">
 								<!-- eslint-disable-next-line -->
 								<path d="M268-240 42-466l57-56 170 170 56 56-57 56Zm226 0L268-466l56-57 170 170 368-368 56 57-424 424Zm0-226-57-56 198-198 57 56-198 198Z" />
 							</svg>
 							<svg
-								v-else-if="request.meta?.source?.device_type === 'Laptop'" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
+								v-else-if="item.deviceType === 'Laptop'" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
 								width="24" class="w-full h-full p-4 fill-gray-900">
 								<!-- eslint-disable-next-line -->
 								<path d="M0-160v-80h160v-40q-33 0-56.5-23.5T80-360v-400q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v400q0 33-23.5 56.5T800-280v40h160v80H0Zm160-200h640v-400H160v400Zm0 0v-400 400Z" />
 							</svg>
 							<svg
-								v-else-if="request.meta?.source?.device_type === 'Phone'" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
+								v-else-if="item.deviceType === 'Phone'" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
 								width="24" class="w-full h-full p-4 fill-gray-900">
 								<!-- eslint-disable-next-line -->
 								<path d="M280-40q-33 0-56.5-23.5T200-120v-720q0-33 23.5-56.5T280-920h400q33 0 56.5 23.5T760-840v720q0 33-23.5 56.5T680-40H280Zm0-120v40h400v-40H280Zm0-80h400v-480H280v480Zm0-560h400v-40H280v40Zm0 0v-40 40Zm0 640v40-40Z" />
 							</svg>
 							<svg
-								v-else-if="request.meta?.source?.device_type === 'Tablet'" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
+								v-else-if="item.deviceType === 'Tablet'" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
 								width="24" class="w-full h-full p-4 fill-gray-900">
 								<!-- eslint-disable-next-line -->
 								<path d="M120-160q-33 0-56.5-23.5T40-240v-480q0-33 23.5-56.5T120-800h720q33 0 56.5 23.5T920-720v480q0 33-23.5 56.5T840-160H120Zm40-560h-40v480h40v-480Zm80 480h480v-480H240v480Zm560-480v480h40v-480h-40Zm0 0h40-40Zm-640 0h-40 40Z" />
@@ -347,8 +132,9 @@ window.addEventListener('blur', () => {
 								<path d="M280-160H160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640v80H160v480h120v80Zm160-100q25 0 42.5-17.5T500-320q0-25-17.5-42.5T440-380q-25 0-42.5 17.5T380-320q0 25 17.5 42.5T440-260Zm-80 100v-71q-19-17-29.5-40T320-320q0-26 10.5-49t29.5-40v-71h160v71q19 17 29.5 40t10.5 49q0 26-10.5 49T520-231v71H360Zm480 0H640q-17 0-28.5-11.5T600-200v-360q0-17 11.5-28.5T640-600h200q17 0 28.5 11.5T880-560v360q0 17-11.5 28.5T840-160Zm-160-80h120v-280H680v280Zm0 0h120-120Z" />
 							</svg>
 						</div>
+
 						<p
-							v-if="request.state === 'WaitingForUserConsent' || request.state === 'SentIntroduction'"
+							v-if="(item.state === 'WaitingForUserConsent' || item.state === 'SentIntroduction') && item.pin_code"
 							class="text-center inline-flex gap-1 mt-4 text-sm items-center">
 							<svg
 								xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"
@@ -356,78 +142,99 @@ window.addEventListener('blur', () => {
 								<!-- eslint-disable-next-line -->
 								<path d="M420-360h120l-23-129q20-10 31.5-29t11.5-42q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 23 11.5 42t31.5 29l-23 129Zm60 280q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q104-33 172-132t68-220v-189l-240-90-240 90v189q0 121 68 220t172 132Zm0-316Z" />
 							</svg>
-							{{ request.meta?.pin_code }}
+							{{ item.pin_code }}
 						</p>
 					</div>
-					<div class="flex-1 flex flex-col text-sm">
+					<div class="flex-1 flex flex-col text-sm" :class="{'justify-center': item.state === undefined}">
 						<h4 class="text-base font-medium">
-							{{ request.meta?.source?.name ?? 'Unknown' }}
+							{{ item.name }}
 						</h4>
-						<div v-if="request.state === 'WaitingForUserConsent'" class="flex-1 flex flex-col justify-between">
+
+						<div v-if="item.state === 'WaitingForUserConsent'" class="flex-1 flex flex-col justify-between">
 							<p class="mt-4">
-								Wants to share {{ request.meta?.files?.join(', ') ?? request.meta?.text_description ?? 'some file(s).' }}
+								Wants to share {{ item.files?.join(', ') ?? item.text_description ?? 'some file(s).' }}
 							</p>
 							<div class="flex flex-row justify-end gap-4 mt-1">
 								<p
-									@click="sendCmd(request.id, 'AcceptTransfer')"
+									@click="sendCmd(item.id, 'AcceptTransfer')"
 									class="my-0 cursor-pointer p-2 px-3 hover:bg-green-50 rounded-full
 									font-medium active:scale-105 transition duration-150 ease-in-out">
 									Accept
 								</p>
 								<p
-									@click="sendCmd(request.id, 'RejectTransfer')"
+									@click="sendCmd(item.id, 'RejectTransfer')"
 									class="my-0 cursor-pointer p-2 px-3 hover:bg-green-50 rounded-full
 									font-medium active:scale-105 transition duration-150 ease-in-out">
 									Decline
 								</p>
 							</div>
 						</div>
-						<div v-else-if="request.state === 'SentIntroduction'">
-							<p class="mt-2">
-								Sending
-							</p>
-							<p v-for="f in request.meta?.files ?? []" :key="f">
-								{{ f }}
+
+						<div v-else-if="['SentIntroduction', 'ReceivingFiles'].includes(item.state ?? 'Initial')">
+							<p class="mt-2" v-if="item.state === 'SentIntroduction'">
+								Sending...
 							</p>
-						</div>
-						<div v-else-if="request.state === 'ReceivingFiles'">
-							<p class="mt-2">
+							<p class="mt-2" v-else>
 								Receiving...
 							</p>
-							<p v-for="f in request.meta?.files ?? []" :key="f">
+							<p v-for="f in item.files ?? []" :key="f">
 								{{ f }}
 							</p>
+							<div class="flex flex-row justify-end gap-4 mt-1">
+								<p
+									@click="sendCmd(item.id, 'CancelTransfer')"
+									class="my-0 cursor-pointer p-2 px-3 hover:bg-green-50 rounded-full
+									font-medium active:scale-105 transition duration-150 ease-in-out">
+									Cancel
+								</p>
+							</div>
 						</div>
-						<div v-else-if="request.state === 'Finished'">
+
+						<div v-else-if="item.state === 'Finished'">
 							<p class="mt-2">
 								Received
 							</p>
-							<p v-if="request.meta?.destination !== null">
-								Saved to {{ request.meta?.destination }}
+							<p v-if="item.destination">
+								Saved to {{ item.destination }}
 							</p>
 							<div class="flex flex-row justify-end gap-4 mt-1">
 								<p
-									v-if="request.meta?.destination"
-									@click="invoke('open', { message: request.meta?.destination })"
+									v-if="item.destination"
+									@click="invoke('open', { message: item.destination })"
 									class="my-0 cursor-pointer p-2 px-3 hover:bg-green-50 rounded-full
 									font-medium active:scale-105 transition duration-150 ease-in-out">
 									Open
 								</p>
 								<p
-									@click="removeRequest(request.id)"
+									@click="removeRequest(item.id)"
 									class="my-0 cursor-pointer p-2 px-3 hover:bg-green-50 rounded-full
 									font-medium active:scale-105 transition duration-150 ease-in-out">
 									Clear
 								</p>
 							</div>
 						</div>
-						<div v-else-if="request.state === 'Disconnected'">
+
+						<div v-else-if="item.state === 'Cancelled'">
+							<p class="mt-2">
+								Transfer cancelled
+							</p>
+							<div class="flex flex-row justify-end gap-4 mt-1">
+								<p
+									@click="removeRequest(item.id)"
+									class="my-0 cursor-pointer p-2 px-3 hover:bg-green-50 rounded-full
+									font-medium active:scale-105 transition duration-150 ease-in-out">
+									Clear
+								</p>
+							</div>
+						</div>
+
+						<div v-else-if="item.state === 'Disconnected'">
 							<p class="mt-2">
 								Unexpected disconnection
 							</p>
 							<div class="flex flex-row justify-end gap-4 mt-1">
 								<p
-									@click="removeRequest(request.id)"
+									@click="removeRequest(item.id)"
 									class="my-0 cursor-pointer p-2 px-3 hover:bg-green-50 rounded-full
 									font-medium active:scale-105 transition duration-150 ease-in-out">
 									Clear
@@ -435,7 +242,8 @@ window.addEventListener('blur', () => {
 							</div>
 						</div>
 					</div>
-					<div v-if="request.state === 'ReceivingFiles'" class="my-auto">
+
+					<div v-if="item.state === 'ReceivingFiles'" class="my-auto">
 						<div class="hover:bg-gray-200 cursor-pointer p-2 rounded-full active:scale-105 transition duration-150 ease-in-out">
 							<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
 								<path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
@@ -447,3 +255,265 @@ window.addEventListener('blur', () => {
 		</div>
 	</div>
 </template>
+
+<script lang="ts">
+import { ref, nextTick } from 'vue'
+import { listen } from '@tauri-apps/api/event'
+import { invoke } from '@tauri-apps/api/tauri'
+import { appWindow } from "@tauri-apps/api/window";
+import { isPermissionGranted, requestPermission, sendNotification } from '@tauri-apps/api/notification'
+
+import { opt } from '../utils';
+import { ChannelMessage } from '../../../core_lib/bindings/ChannelMessage';
+import { ChannelAction } from '../../../core_lib/bindings/ChannelAction';
+import { EndpointInfo } from '../../../core_lib/dist/EndpointInfo';
+import { OutboundPayload } from '../../../core_lib/bindings/OutboundPayload';
+import { SendInfo } from '../../../core_lib/bindings/SendInfo';
+import { State } from '../../../core_lib/bindings/State';
+import { DeviceType } from '../../../core_lib/bindings/DeviceType';
+
+interface ToDelete {
+	id: string,
+	triggered: number
+}
+
+interface DisplayedItem {
+	id: string,
+	name: string,
+	deviceType: DeviceType,
+	endpoint: boolean,
+
+	state?: State,
+	pin_code?: string,
+	files?: string[],
+	text_description?: string,
+	destination?: string,
+}
+
+const _stateToDisplay: Array<Partial<State>> = ["ReceivedPairedKeyResult", "WaitingForUserConsent", "ReceivingFiles", "Disconnected", "Finished", "SentIntroduction", "SendingFiles", "Cancelled"]
+
+export default {
+	name: "HomePage",
+
+	setup() {
+		return {_stateToDisplay, invoke};
+	},
+
+	data() {
+		return {
+			isAppInForeground: false,
+			discoveryRunning: ref(false),
+			isDragHovering: ref(false),
+
+			requests: ref<ChannelMessage[]>([]),
+			endpointsInfo: ref<EndpointInfo[]>([]),
+			toDelete: ref<ToDelete[]>([]),
+			outboundPayload: ref<OutboundPayload | undefined>(),
+
+			cleanupInterval: opt<NodeJS.Timeout>(),
+		};
+	},
+
+	mounted: function () {
+		nextTick(async () => {
+			let permissionGranted = await isPermissionGranted();
+
+			// If not granted we need to request it
+			if (!permissionGranted) {
+				const permission = await requestPermission();
+				permissionGranted = permission === 'granted';
+			}
+
+			window.addEventListener('focus', this._handleFocus);
+			window.addEventListener('blur', this._handleBlur);
+
+			this.cleanupInterval = setInterval(() => {
+				this.toDelete.forEach((itemToDelete) => {
+					const now = new Date();
+					const timeDifference = now.getTime() - itemToDelete.triggered;
+
+					// Check if at least 30 seconds have passed (30000 milliseconds)
+					if (timeDifference >= 30000) this.removeRequest(itemToDelete.id);
+				});
+
+				// Clear only elements that have been processed (more than 30s old)
+				this.toDelete = this.toDelete.filter((item) => {
+					const now = new Date();
+					return now.getTime() - item.triggered < 30000;
+				});
+			}, 30000);
+
+			await listen('rs2js', (event) => {
+				const cm = event.payload as ChannelMessage;
+				console.log("rs2js:", cm);
+
+				const idx = this.requests.findIndex((el) => el.id === cm.id);
+
+				if (cm.state === "Disconnected") {
+					this.toDelete.push({
+						id: cm.id,
+						triggered: new Date().getTime()
+					});
+				}
+
+				if (idx !== -1) {
+					const prev = this.requests.at(idx);
+					// Update the existing message at index 'idx'
+					this.requests.splice(idx, 1, {
+						...cm,
+						state: cm.state ?? prev!.state,
+						meta: cm.meta ?? prev!.meta,
+					});
+				} else {
+					if (this.isAppInForeground && permissionGranted && cm.state === 'WaitingForUserConsent') {
+						sendNotification({ title: 'New transfer request', body: (cm.meta?.source?.name ?? 'Unknown') + ' want to initiate a transfer.' });
+					}
+
+					// Push the new message if not found
+					this.requests.push(cm);
+				}
+			})
+
+			await listen('rs2js_discovery', (event) => {
+				const ei = event.payload as EndpointInfo;
+				console.log("rs2js:", ei);
+
+				const idx = this.endpointsInfo.findIndex((el) => el.id === ei.id);
+				if (!ei.present) {
+					if (idx !== -1) {
+						this.endpointsInfo.splice(idx, 1);
+					}
+
+					return;
+				}
+
+				if (idx !== -1) {
+					this.endpointsInfo.splice(idx, 1, ei);
+				} else {
+					this.endpointsInfo.push(ei);
+				}
+			});
+
+			await appWindow.onFileDropEvent(async (event) => {
+				if (event.payload.type === 'hover') {
+					this.isDragHovering = true;
+				} else if (event.payload.type === 'drop') {
+					console.log("Dropped");
+					this.isDragHovering = false;
+					this.outboundPayload = {
+						Files: event.payload.paths
+					} as OutboundPayload;
+					if (!this.discoveryRunning) await invoke('start_discovery');
+					this.discoveryRunning = true;
+				} else {
+					this.isDragHovering = false;
+				}
+			});
+		});
+	},
+
+	unmounted: function() {
+		window.removeEventListener('focus', this._handleFocus);
+		window.removeEventListener('blur', this._handleBlur);
+
+		if (this.cleanupInterval && this.cleanupInterval[Symbol.dispose]) {
+			this.cleanupInterval[Symbol.dispose]();
+		}
+	},
+
+	computed: {
+		displayedIsEmpty(): boolean {
+			return this.displayedItems.length == 0
+		},
+		displayedItems(): Array<DisplayedItem> {
+			const ndisplayed = new Array<DisplayedItem>();
+
+			this.endpointsInfo.forEach((el) => {
+				const idx = ndisplayed.findIndex((nel) => el.id == nel.id);
+				if (idx !== -1) return;
+
+				ndisplayed.push({
+					id: el.id,
+					name: el.name ?? 'Unknown',
+					deviceType: el.rtype ?? 'Unknown',
+					endpoint: true,
+				})
+			});
+
+			this.requests.filter((el) => _stateToDisplay.includes(el.state ?? 'Initial')).forEach((el) => {
+				const idx = ndisplayed.findIndex((nel) => el.id == nel.id);
+				const elem: DisplayedItem = {
+					id: el.id,
+					name: el.meta?.source?.name ?? 'Unknown',
+					deviceType: el.meta?.source?.device_type ?? 'Unknown',
+					endpoint: false,
+
+					state: el.state ?? undefined,
+					pin_code: el.meta?.pin_code ?? undefined,
+					destination: el.meta?.destination ?? undefined,
+					files: el.meta?.files ?? undefined,
+					text_description: el.meta?.text_description ?? undefined,
+				};
+
+				if (idx !== -1) {
+					ndisplayed.splice(idx, 1, elem);
+				} else {
+					ndisplayed.push(elem)
+				}
+			});
+
+			return ndisplayed;
+		}
+	},
+
+	methods: {
+		clearSending: async function() {
+			await invoke('stop_discovery');
+			this.outboundPayload = undefined;
+			this.discoveryRunning = false;
+			this.endpointsInfo = [];
+		},
+		removeRequest: function(id: string) {
+			const idx = this.requests.findIndex((el) => el.id === id);
+
+			if (idx !== -1) {
+				this.requests.splice(idx, 1);
+			}
+		},
+		sendInfo: async function(eid: string) {
+			if (this.outboundPayload === undefined) return;
+
+			const ei = this.endpointsInfo.find((el) => el.id === eid);
+			if (!ei) return;
+
+			const msg: SendInfo = {
+				id: ei.id,
+				name: ei.name ?? 'Unknown',
+				addr: ei.ip + ":" + ei.port,
+				ob: this.outboundPayload,
+			};
+
+			await invoke('send_payload', { message: msg });
+		},
+		sendCmd: async function(id: string, action: ChannelAction) {
+			const cm: ChannelMessage = {
+				id: id,
+				direction: 'FrontToLib',
+				action: action,
+				meta: null,
+				state: null,
+				rtype: null,
+			};
+			console.log("js2rs:", cm);
+
+			await invoke('js2rs', { message: cm });
+		},
+		_handleFocus: function() {
+			this.isAppInForeground = true;
+		},
+		_handleBlur: function() {
+			this.isAppInForeground = false;
+		}
+	},
+}
+</script>
\ No newline at end of file
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
new file mode 100644
index 0000000..4c3a7df
--- /dev/null
+++ b/frontend/src/utils.ts
@@ -0,0 +1,3 @@
+export function opt<T>(v?: T) {
+	return v ?? null;
+}
\ No newline at end of file