diff --git a/launcher/public/output.css b/launcher/public/output.css
index 88d7fde67..b9f637fad 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -887,6 +887,10 @@ video {
   left: 40%;
 }
 
+.left-\[50\%\]{
+  left: 50%;
+}
+
 .left-\[920px\]{
   left: 920px;
 }
@@ -983,6 +987,10 @@ video {
   top: 1px;
 }
 
+.top-\[25\%\]{
+  top: 25%;
+}
+
 .top-\[33\%\]{
   top: 33%;
 }
@@ -991,6 +999,10 @@ video {
   top: 42%;
 }
 
+.top-\[50\%\]{
+  top: 50%;
+}
+
 .top-\[56px\]{
   top: 56px;
 }
@@ -1035,6 +1047,10 @@ video {
   grid-column: span 10 / span 10;
 }
 
+.col-span-12{
+  grid-column: span 12 / span 12;
+}
+
 .col-span-2{
   grid-column: span 2 / span 2;
 }
@@ -1616,6 +1632,14 @@ video {
   height: 33.333333%;
 }
 
+.h-1\/4{
+  height: 25%;
+}
+
+.h-1\/5{
+  height: 20%;
+}
+
 .h-1\/6{
   height: 16.666667%;
 }
@@ -1844,6 +1868,10 @@ video {
   height: 80px;
 }
 
+.h-\[90\%\]{
+  height: 90%;
+}
+
 .h-\[90px\]{
   height: 90px;
 }
@@ -2086,6 +2114,10 @@ video {
   width: 25%;
 }
 
+.w-1\/5{
+  width: 20%;
+}
+
 .w-1\/6{
   width: 16.666667%;
 }
@@ -2098,6 +2130,10 @@ video {
   width: 83.333333%;
 }
 
+.w-11{
+  width: 2.75rem;
+}
+
 .w-11\/12{
   width: 91.666667%;
 }
@@ -2126,6 +2162,14 @@ video {
   width: 50%;
 }
 
+.w-2\/5{
+  width: 40%;
+}
+
+.w-2\/6{
+  width: 33.333333%;
+}
+
 .w-20{
   width: 5rem;
 }
@@ -2218,6 +2262,10 @@ video {
   width: 2rem;
 }
 
+.w-8\/12{
+  width: 66.666667%;
+}
+
 .w-9{
   width: 2.25rem;
 }
@@ -2226,6 +2274,10 @@ video {
   width: 75%;
 }
 
+.w-\[10\%\]{
+  width: 10%;
+}
+
 .w-\[100px\]{
   width: 100px;
 }
@@ -2278,6 +2330,10 @@ video {
   width: 200px;
 }
 
+.w-\[24\%\]{
+  width: 24%;
+}
+
 .w-\[27px\]{
   width: 27px;
 }
@@ -2346,6 +2402,10 @@ video {
   width: 8rem;
 }
 
+.w-\[90\%\]{
+  width: 90%;
+}
+
 .w-fit{
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -2473,6 +2533,18 @@ video {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-90{
+  --tw-rotate: 90deg;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-\[270deg\]{
+  --tw-rotate: 270deg;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-100{
   --tw-scale-x: 1;
   --tw-scale-y: 1;
@@ -2866,6 +2938,12 @@ video {
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -4244,6 +4322,14 @@ video {
   padding: 2rem;
 }
 
+.p-\[\.10rem\]{
+  padding: .10rem;
+}
+
+.p-\[0\.10rem\]{
+  padding: 0.10rem;
+}
+
 .p-\[1px\]{
   padding: 1px;
 }
@@ -4422,6 +4508,10 @@ video {
   padding-top: 2rem;
 }
 
+.pr-3{
+  padding-right: 0.75rem;
+}
+
 .text-left{
   text-align: left;
 }
@@ -4460,6 +4550,10 @@ video {
   line-height: 2.25rem;
 }
 
+.text-\[100\%\]{
+  font-size: 100%;
+}
+
 .text-\[10px\]{
   font-size: 10px;
 }
@@ -4492,10 +4586,42 @@ video {
   font-size: 26px;
 }
 
+.text-\[30\%\]{
+  font-size: 30%;
+}
+
+.text-\[40\%\]{
+  font-size: 40%;
+}
+
+.text-\[45\%\]{
+  font-size: 45%;
+}
+
+.text-\[50\%\]{
+  font-size: 50%;
+}
+
+.text-\[55\%\]{
+  font-size: 55%;
+}
+
+.text-\[60\%\]{
+  font-size: 60%;
+}
+
+.text-\[7px\]{
+  font-size: 7px;
+}
+
 .text-\[8px\]{
   font-size: 8px;
 }
 
+.text-\[90\%\]{
+  font-size: 90%;
+}
+
 .text-\[9px\]{
   font-size: 9px;
 }
@@ -4558,6 +4684,10 @@ video {
   font-weight: 600;
 }
 
+.font-thin{
+  font-weight: 100;
+}
+
 .uppercase{
   text-transform: uppercase;
 }
@@ -4654,6 +4784,11 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-blue-300{
+  --tw-text-opacity: 1;
+  color: rgb(147 197 253 / var(--tw-text-opacity));
+}
+
 .text-blue-400{
   --tw-text-opacity: 1;
   color: rgb(96 165 250 / var(--tw-text-opacity));
@@ -4744,6 +4879,11 @@ video {
   color: rgb(249 115 22 / var(--tw-text-opacity));
 }
 
+.text-orange-600{
+  --tw-text-opacity: 1;
+  color: rgb(234 88 12 / var(--tw-text-opacity));
+}
+
 .text-red-400{
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
@@ -5092,6 +5232,12 @@ video {
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.sepia{
+  --tw-sepia: sepia(100%);
+  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter{
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
diff --git a/launcher/src/backend/Monitoring.js b/launcher/src/backend/Monitoring.js
index cf4ecc44d..59a9dd73d 100755
--- a/launcher/src/backend/Monitoring.js
+++ b/launcher/src/backend/Monitoring.js
@@ -9,6 +9,7 @@ import * as crypto from "crypto";
 import * as fs from "fs";
 import * as os from "os";
 import * as path from "path";
+const { powerMonitor } = require("electron");
 
 const globalMonitoringCache = {
   intervalHandler: null,
@@ -16,6 +17,9 @@ const globalMonitoringCache = {
   refreshIntervalSeconds: 5,
   nodestatsInitialized: false,
   storagestatus: {},
+  setTime: 300,
+  idleTimerRunning: false,
+  idleTimerStop: false,
 };
 
 export class Monitoring {
@@ -39,6 +43,8 @@ export class Monitoring {
   async cleanup() {
     this.isLoggedIn = false;
     this.triedCurlInstall = false;
+    this.idleTimerRunning = false;
+    this.idleTimerStop = false;
     this.rpcTunnel = {};
     this.wsTunnel = {};
     this.beaconTunnel = {};
@@ -3516,4 +3522,28 @@ rm -rf diskoutput
     }
     return [];
   }
+
+  async setIdleTime(setTime) {
+    this.globalMonitoringCache.setTime = setTime;
+  }
+
+  async idleTimerCheck(timerStop, win) {
+    if (!this.globalMonitoringCache.idleTimerRunning) {
+      this.globalMonitoringCache.idleTimerRunning = true;
+      await this.idleTimerLoop(win);
+    }
+    this.globalMonitoringCache.idleTimerStop = timerStop;
+  }
+
+  async idleTimerLoop(win) {
+    if (powerMonitor.getSystemIdleTime() >= this.globalMonitoringCache.setTime * 60) {
+      win.send("IdleLogout");
+    } else if (this.isLoggedIn && !this.globalMonitoringCache.idleTimerStop) {
+      await new Promise((resolve) => setTimeout(resolve, 60000));
+      await this.idleTimerLoop(win);
+    } else {
+      this.globalMonitoringCache.idleTimerStop = false;
+      this.globalMonitoringCache.idleTimerRunning = false;
+    }
+  }
 }
diff --git a/launcher/src/background.js b/launcher/src/background.js
index 4e5e04da4..04fa82ddd 100755
--- a/launcher/src/background.js
+++ b/launcher/src/background.js
@@ -103,6 +103,15 @@ ipcMain.handle("logout", async () => {
   return await nodeConnection.logout();
 });
 
+ipcMain.handle("idleTimerCheck", async (event, args) => {
+  const current_window = event.sender;
+  return await monitoring.idleTimerCheck(args.timerStop, current_window);
+});
+
+ipcMain.handle("setIdleTime", async (event, arg) => {
+  return await monitoring.setIdleTime(arg);
+});
+
 // userData storage
 ipcMain.handle("readConfig", async () => {
   return storageService.readConfig();
diff --git a/launcher/src/components/UI/setting-page/SettingScreen.vue b/launcher/src/components/UI/setting-page/SettingScreen.vue
index 49c86ddfb..b4104c6df 100644
--- a/launcher/src/components/UI/setting-page/SettingScreen.vue
+++ b/launcher/src/components/UI/setting-page/SettingScreen.vue
@@ -34,6 +34,8 @@ import VolumeSlider from "./components/VolumeSlider";
 import OutputOptions from "./components/OutputOptions.vue";
 import LanguageBtn from "./components/LanguageBtn.vue";
 import CreditButtons from "./section/CreditButtons.vue";
+import IdleTimer from "./components/IdleTimer.vue";
+import IdleTimerTime from "./components/IdleTimerTime.vue";
 import { ref, computed, onMounted } from "vue";
 import CreditBtn from "./components/CreditBtn.vue";
 import { useRouter } from "vue-router";
@@ -101,6 +103,8 @@ const itemConfigurations = computed(() => {
     items = [
       { title: "Language Selection", component: LanguageBtn },
       { title: "Credits", component: CreditButtons },
+      { title: "Idle Timeout", component: IdleTimer },
+      { title: "Idle Timeout Time (in minutes)", component: IdleTimerTime },
     ];
   } else if (mainBox.value === "audio") {
     items = [
diff --git a/launcher/src/components/UI/setting-page/components/IdleTimer.vue b/launcher/src/components/UI/setting-page/components/IdleTimer.vue
new file mode 100644
index 000000000..c9f2e19a3
--- /dev/null
+++ b/launcher/src/components/UI/setting-page/components/IdleTimer.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="toggle-container">
+    <label class="switch relative">
+      <input type="checkbox" :checked="footerStore.idleTimer" @click="toggleIdleTimer" />
+      <div class="slider round w-full h-full cursor-pointer bg-gray-400"></div>
+    </label>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from "vue";
+import ControlService from "@/store/ControlService";
+import { useFooter } from "@/store/theFooter";
+
+const footerStore = useFooter();
+
+let idleTimer = false;
+
+const checkSettings = async () => {
+  try {
+    const savedConfig = await ControlService.readConfig();
+    if (typeof savedConfig.idleTimer.enabled !== "undefined") {
+      footerStore.idleTimer = savedConfig.idleTimer.enabled;
+    } else {
+      updateSettings(false, footerStore.idleTimerTime);
+      checkSettings();
+    }
+  } catch (error) {
+    console.error("Failed to load saved settings:", error);
+  }
+};
+
+const updateSettings = async (idleT) => {
+  console.log(idleT + " " + footerStore.idleTimerTime);
+  try {
+    const prevConf = await ControlService.readConfig();
+    const conf = {
+      ...prevConf,
+      idleTimer: { enabled: idleT },
+      idleTimerTime: { value: footerStore.idleTimerTime },
+    };
+    await ControlService.writeConfig(conf);
+    await ControlService.idleTimerCheck(!idleT);
+    await ControlService.setIdleTime(footerStore.idleTimerTime);
+    checkSettings();
+  } catch (error) {
+    console.error("Failed to update settings:", error);
+  }
+};
+
+const toggleIdleTimer = async () => {
+  idleTimer = !idleTimer;
+  footerStore.idleTimer = !footerStore.idleTimer;
+  updateSettings(idleTimer);
+};
+
+onMounted(() => {
+  checkSettings();
+});
+</script>
+<style scoped>
+.toggle-container {
+  width: 100%;
+  height: 93%;
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.switch {
+  width: 50px;
+  height: 24px;
+}
+
+.switch input {
+  display: none;
+}
+
+.slider {
+  border-radius: 34px;
+  transition: 0.4s;
+  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.3);
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  width: 20px;
+  height: 20px;
+  border: 2px solid #0686bd;
+  left: 3px;
+  bottom: 2px;
+  background-color: #3183da;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #e9e9e9;
+}
+
+input:checked + .slider:before {
+  transform: translateX(24px);
+  background-color: #488f63;
+  border: 1px solid #09794c;
+}
+</style>
diff --git a/launcher/src/components/UI/setting-page/components/IdleTimerTime.vue b/launcher/src/components/UI/setting-page/components/IdleTimerTime.vue
new file mode 100644
index 000000000..abc207f39
--- /dev/null
+++ b/launcher/src/components/UI/setting-page/components/IdleTimerTime.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="TimerTime-parent w-full h-full justify-center items-center flex">
+    <input
+      type="number"
+      :value="footerStore.idleTimerTime"
+      class="lang-btn-parent w-full h-full bg-[#33393E] rounded-md flex justify-center items-center cursor-pointer border border-[#33393E] uppercase pl-3 pr-3 text-gray-200 text-base"
+      @change="onChange($event)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from "vue";
+import ControlService from "@/store/ControlService";
+import { useFooter } from "@/store/theFooter";
+
+const footerStore = useFooter();
+
+const checkSettings = async () => {
+  try {
+    const savedConfig = await ControlService.readConfig();
+    if (typeof savedConfig.idleTimerTime.value !== "undefined") {
+      footerStore.idleTimerTime = savedConfig.idleTimerTime.value;
+    } else {
+      updateSettings(5);
+    }
+  } catch (error) {
+    console.error("Failed to load saved settings:", error);
+  }
+};
+
+const updateSettings = async (idleTime) => {
+  try {
+    const prevConf = await ControlService.readConfig();
+    const conf = {
+      ...prevConf,
+      idleTimerTime: { value: idleTime },
+    };
+    await ControlService.writeConfig(conf);
+    await ControlService.setIdleTime(idleTime);
+    useFooter.idleTimerTime = idleTime;
+    checkSettings();
+  } catch (error) {
+    console.error("Failed to update settings:", error);
+  }
+};
+
+const onChange = async (event) => {
+  if (event.target.value == "" || event.target.value < 5) {
+    event.target.value = 5;
+  }
+  updateSettings(event.target.value);
+};
+
+onMounted(() => {
+  checkSettings();
+});
+</script>
+
+<style scoped>
+input[type="number"] {
+  text-align: center;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.TimerTime-parent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/launcher/src/components/base/BaseLayout.vue b/launcher/src/components/base/BaseLayout.vue
index 3767a0fce..347fd78b2 100755
--- a/launcher/src/components/base/BaseLayout.vue
+++ b/launcher/src/components/base/BaseLayout.vue
@@ -48,7 +48,7 @@
   </div>
 </template>
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref } from "vue";
 
 import TheFooter from "../layers/TheFooter.vue";
 import LogoutModal from "../UI/base-header/components/modals/LogoutModal.vue";
@@ -91,8 +91,18 @@ const getLoadingAnime = computed(() => {
 
 onMounted(() => {
   useUpdateCheck();
+  checkSettings();
+  ControlService.addListener("IdleLogout", idleListener);
 });
 
+onUnmounted(() => {
+  ControlService.removeListener("IdleLogout", idleListener);
+});
+
+const idleListener = () => {
+  loggingOut();
+};
+
 const closeServiceBrowser = () => {
   headerStore.setServiceModal(null);
 };
@@ -170,6 +180,20 @@ const reconnect = async () => {
   headerStore.reconnecting = false;
   headerStore.refresh = true;
 };
+
+const checkSettings = async () => {
+  try {
+    const savedConfig = await ControlService.readConfig();
+    if (typeof savedConfig.idleTimer.enabled !== "undefined") {
+      if (savedConfig.idleTimer.enabled) {
+        await ControlService.setIdleTime(savedConfig.idleTimerTime.value);
+        await ControlService.idleTimerCheck(false);
+      }
+    }
+  } catch (error) {
+    console.error("Failed to load saved settings:", error);
+  }
+};
 </script>
 
 <style scoped>
diff --git a/launcher/src/store/ControlService.js b/launcher/src/store/ControlService.js
index c3e896a17..7878013d9 100755
--- a/launcher/src/store/ControlService.js
+++ b/launcher/src/store/ControlService.js
@@ -72,6 +72,14 @@ class ControlService extends EventEmitter {
     await this.promiseIpc.send("setApikey", args);
   }
 
+  async idleTimerCheck(timerStop, win) {
+    return await this.promiseIpc.send("idleTimerCheck", { timerStop, win });
+  }
+
+  async setIdleTime(args) {
+    return await this.promiseIpc.send("setIdleTime", args);
+  }
+
   async readConfig() {
     return await this.promiseIpc.send("readConfig");
   }
diff --git a/launcher/src/store/theFooter.js b/launcher/src/store/theFooter.js
index 2df50ae08..59247af58 100644
--- a/launcher/src/store/theFooter.js
+++ b/launcher/src/store/theFooter.js
@@ -19,6 +19,8 @@ export const useFooter = defineStore("theFooter", {
       prometheusIsOff: false,
       nodataMessage: "",
       volState: false,
+      idleTimer: false,
+      idleTimerTime: 5,
     };
   },
   getters: {},