diff --git a/desktop/src-tauri/src/main.rs b/desktop/src-tauri/src/main.rs
index af1fdce..06214af 100644
--- a/desktop/src-tauri/src/main.rs
+++ b/desktop/src-tauri/src/main.rs
@@ -29,6 +29,9 @@ fn press(controller: State<'_, Controller>, key: &str) {
         "PG_DN" => {
             controller.key_down(Key::PageDown);
         },
+        "F5" => {
+            controller.key_down(Key::F5);
+        }
         _ => {}
     }
 }
diff --git a/desktop/src/App.tsx b/desktop/src/App.tsx
index e5bb25b..c80e290 100644
--- a/desktop/src/App.tsx
+++ b/desktop/src/App.tsx
@@ -13,6 +13,7 @@ enum Action {
   VOL_DN,
   PG_UP,
   PG_DN,
+  F5
 }
 
 interface Message {
diff --git a/web/package-lock.json b/web/package-lock.json
index 4521791..8a78507 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -12,6 +12,7 @@
         "peerjs": "^1.5.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "use-long-press": "^3.2.0",
         "uuid": "^9.0.1"
       },
       "devDependencies": {
@@ -3456,6 +3457,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-long-press": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/use-long-press/-/use-long-press-3.2.0.tgz",
+      "integrity": "sha512-uq5o2qFR1VRjHn8Of7Fl344/AGvgk7C5Mcb4aSb1ZRVp6PkgdXJJLdRrlSTJQVkkQcDuqFbFc3mDX4COg7mRTA==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/web/package.json b/web/package.json
index c024649..5ce19bd 100644
--- a/web/package.json
+++ b/web/package.json
@@ -14,6 +14,7 @@
     "peerjs": "^1.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "use-long-press": "^3.2.0",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 2f14716..ec9ec0d 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -2,7 +2,7 @@ import Peer, { DataConnection } from "peerjs";
 import { useEffect, useState } from "react";
 import NoSleep from "nosleep.js";
 import { v4 as uuidv4 } from 'uuid';
-
+import { useLongPress } from 'use-long-press';
 const noSleep = new NoSleep();
 
 
@@ -11,6 +11,7 @@ enum Action {
   VOL_DN,
   PG_UP,
   PG_DN,
+  F5
 }
 interface Message {
   action: Action;
@@ -19,6 +20,8 @@ interface Message {
 
 
 function App() {
+
+
   const params = new URLSearchParams(window.location.search);
   const [loading, setLoading] = useState(true);
   const [id,] = useState(uuidv4())
@@ -27,7 +30,7 @@ function App() {
   const [conn, setConn] = useState<DataConnection | null>(null);
 
   function sendMessage(data: Message) {
-    navigator.vibrate(100)
+    navigator.vibrate(300)
     if (!noSleep.isEnabled) {
       console.log('No sleep enabled')
       noSleep.enable()
@@ -47,6 +50,10 @@ function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const nextButtonBind = useLongPress(() => {
+    sendMessage({ action: Action.F5 })
+  });
+
   if (loading) {
     return (
       <div className="flex flex-col gap-5 w-[100vw] h-[100vh] items-center justify-center">
@@ -59,7 +66,7 @@ function App() {
   return (
     <div className="w-full h-[100vh]">
       <div className="flex flex-col gap-1 items-center h-full">
-        <div className="flex gap-3 items-center mt-52">
+        <div className="flex gap-3 items-center mt-20">
           <button
             className="btn btn-circle w-[100px] h-[100px]"
             onClick={() => sendMessage({ action: Action.VOL_UP })}
@@ -100,7 +107,11 @@ function App() {
           </button>
         </div>
         <div className="flex flex-col gap-5 mt-auto items-center mb-[35%]">
+
+
+
           <button
+            {...nextButtonBind()}
             onClick={() => sendMessage({ action: Action.PG_DN })} // next
             className="btn btn-circle w-[150px] h-[150px]"
           >