diff --git a/DeskThingServer/src/main/handlers/adbHandler.ts b/DeskThingServer/src/main/handlers/adbHandler.ts
index e46f53c..50f957d 100644
--- a/DeskThingServer/src/main/handlers/adbHandler.ts
+++ b/DeskThingServer/src/main/handlers/adbHandler.ts
@@ -1,9 +1,9 @@
 import path from 'path'
 import { execFile } from 'child_process'
 import getPlatform from '../utils/get-platform'
-import dataListener, { MESSAGE_TYPES } from '../utils/events'
+import loggingStore from '../stores/loggingStore'
 import settingsStore from '../stores/settingsStore'
-import { ReplyFn } from '@shared/types'
+import { ReplyFn, MESSAGE_TYPES } from '@shared/types'
 
 const isDevelopment = process.env.NODE_ENV === 'development'
 const execPath = isDevelopment
@@ -28,17 +28,13 @@ const splitArgs = (str: string): string[] => {
 export const handleAdbCommands = async (command: string, replyFn?: ReplyFn): Promise<string> => {
   const settings = await settingsStore.getSettings()
   const useGlobalADB = settings.globalADB === true
-  dataListener.asyncEmit(
-    MESSAGE_TYPES.LOGGING,
-    useGlobalADB ? 'Using Global ADB' : 'Using Local ADB'
-  )
+  loggingStore.log(MESSAGE_TYPES.LOGGING, useGlobalADB ? 'Using Global ADB' : 'Using Local ADB')
   return new Promise((resolve, reject) => {
     execFile(
       useGlobalADB ? 'adb' : adbPath,
       splitArgs(command),
       { cwd: execPath },
       (error, stdout, stderr) => {
-        console.log(error, stdout, stderr)
         if (error) {
           replyFn &&
             replyFn('logging', {
@@ -47,10 +43,7 @@ export const handleAdbCommands = async (command: string, replyFn?: ReplyFn): Pro
               final: false,
               error: stderr
             })
-          dataListener.asyncEmit(
-            MESSAGE_TYPES.ERROR,
-            `ADB Error: ${stderr}, ${command}, ${adbPath}`
-          )
+          loggingStore.log(MESSAGE_TYPES.ERROR, `ADB Error: ${stderr}, ${command}, ${adbPath}`)
           reject(`ADB Error: ${stderr}, ${command}, ${adbPath}`)
         } else {
           replyFn &&
diff --git a/DeskThingServer/src/main/handlers/appHandler.ts b/DeskThingServer/src/main/handlers/appHandler.ts
index 6ca5feb..704871d 100644
--- a/DeskThingServer/src/main/handlers/appHandler.ts
+++ b/DeskThingServer/src/main/handlers/appHandler.ts
@@ -1,10 +1,16 @@
 import path from 'path'
-import { AppIPCData, ReplyFn } from '@shared/types/ipcTypes'
-import dataListener, { MESSAGE_TYPES } from '../utils/events'
+import {
+  App,
+  AppDataInterface,
+  AppReturnData,
+  AppIPCData,
+  ReplyFn,
+  MESSAGE_TYPES
+} from '@shared/types'
+import loggingStore from '../stores/loggingStore'
 import { getData, setData } from './dataHandler'
 import { dialog, BrowserWindow } from 'electron'
 import { sendMessageToApp, AppHandler } from '../services/apps'
-import { App, AppDataInterface, AppReturnData } from '@shared/types'
 const appStore = AppHandler.getInstance()
 
 export const appHandler: Record<
@@ -109,7 +115,7 @@ export const appHandler: Record<
     return { path: filePath, name: path.basename(filePath) }
   },
   'dev-add-app': async (data, replyFn) => {
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.ERROR,
       'Developer App Not implemented Yet ',
       data.payload.appPath
@@ -118,7 +124,6 @@ export const appHandler: Record<
     replyFn('logging', { status: true, data: 'Finished', final: true })
   },
   'send-to-app': async (data, replyFn) => {
-    console.log('sending data to app: ', data.payload.app, data)
     await sendMessageToApp(data.payload.app, data.payload)
     replyFn('logging', { status: true, data: 'Finished', final: true })
   },
@@ -130,7 +135,6 @@ export const appHandler: Record<
 
 const getApps = (replyFn: ReplyFn): App[] => {
   replyFn('logging', { status: true, data: 'Getting data', final: false })
-  console.log('Getting app data')
   const data = appStore.getAllBase()
   replyFn('logging', { status: true, data: 'Finished', final: true })
   replyFn('app-data', { status: true, data: data, final: true })
@@ -138,8 +142,7 @@ const getApps = (replyFn: ReplyFn): App[] => {
 }
 
 const setAppData = async (replyFn: ReplyFn, id, data: AppDataInterface): Promise<void> => {
-  console.log('Saving app data: ', data)
-  dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, 'SERVER: Saving ' + id + "'s data " + data)
+  loggingStore.log(MESSAGE_TYPES.LOGGING, 'SERVER: Saving ' + id + "'s data " + data)
   await setData(id, data)
   replyFn('logging', { status: true, data: 'Finished', final: true })
 }
@@ -150,7 +153,7 @@ const getAppData = async (replyFn, payload): Promise<AppDataInterface | null> =>
     replyFn('logging', { status: true, data: 'Finished', final: true })
     return data
   } catch (error) {
-    dataListener.asyncEmit(MESSAGE_TYPES.ERROR, 'SERVER: Error saving manifest' + error)
+    loggingStore.log(MESSAGE_TYPES.ERROR, 'SERVER: Error saving manifest' + error)
     console.error('Error setting client manifest:', error)
     replyFn('logging', { status: false, data: 'Unfinished', error: error, final: true })
     return null
diff --git a/DeskThingServer/src/main/handlers/authHandler.ts b/DeskThingServer/src/main/handlers/authHandler.ts
index ba64065..bbd87df 100644
--- a/DeskThingServer/src/main/handlers/authHandler.ts
+++ b/DeskThingServer/src/main/handlers/authHandler.ts
@@ -3,8 +3,8 @@ import { sendMessageToApp } from '../services/apps' // Assuming you have an app
 import http from 'http'
 import url from 'url'
 import settingsStore from '../stores/settingsStore'
-import dataListener, { MESSAGE_TYPES } from '../utils/events'
-import { Settings } from '@shared/types'
+import loggingStore from '../stores/loggingStore'
+import { Settings, MESSAGE_TYPES } from '@shared/types'
 
 const successView = '<h1>Success</h1><p>You can now close this window.</p>'
 
@@ -14,7 +14,7 @@ let callBackPort: number
 function handleCallback(req: http.IncomingMessage, res: http.ServerResponse): void {
   const parsedUrl = url.parse(req.url || '', true)
 
-  dataListener.asyncEmit(
+  loggingStore.log(
     MESSAGE_TYPES.LOGGING,
     `AUTH: Received callback request for ${parsedUrl.pathname}`
   )
@@ -29,7 +29,6 @@ function handleCallback(req: http.IncomingMessage, res: http.ServerResponse): vo
 
   const appName = urlParts[1] // The app name should be the third part after '/callback/'
   const config = getAppData() // Assuming getConfig() returns an object with active apps
-  console.log('AUTH DATA: ', config)
   if (!config.apps || !config.apps.some((app) => app.name === appName && app.enabled)) {
     res.writeHead(404, { 'Content-Type': 'text/html' })
     res.end(`<h1>App Not Found</h1><p>App '${appName}' not found or not active.</p>`)
@@ -37,7 +36,6 @@ function handleCallback(req: http.IncomingMessage, res: http.ServerResponse): vo
   }
 
   const code = parsedUrl.query.code as string
-  console.log('AUTH CODE: ', code)
   sendMessageToApp(appName, { type: 'callback-data', payload: code })
 
   res.writeHead(200, { 'Content-Type': 'text/html' })
@@ -47,11 +45,10 @@ function handleCallback(req: http.IncomingMessage, res: http.ServerResponse): vo
 const startServer = async (): Promise<void> => {
   if (server) {
     await server.close(() => {
-      console.log('CALLBACK: Previous server closed.')
+      loggingStore.log(MESSAGE_TYPES.LOGGING, 'CALLBACK: Shutting down the server...')
     })
   }
 
-  console.log('CALLBACK: Starting server...')
   server = http.createServer((req, res) => {
     const parsedUrl = new URL(`http://${req.headers.host}${req.url}`)
     const pathname = parsedUrl.pathname
@@ -63,9 +60,8 @@ const startServer = async (): Promise<void> => {
     }
   })
 
-  console.log('CALLBACK: Listening...')
   server.listen(callBackPort, () => {
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.MESSAGE,
       `CALLBACK: running at http://localhost:${callBackPort}/`
     )
@@ -82,16 +78,18 @@ const initializeServer = async (): Promise<void> => {
   }
 }
 
-dataListener.on(MESSAGE_TYPES.SETTINGS, (newSettings) => {
+settingsStore.addListener((newSettings) => {
   try {
     if (newSettings.callbackPort != callBackPort) {
       callBackPort = newSettings.callbackPort
       startServer()
     } else {
-      dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, 'CALLBACK: Not starting - port is not changed')
+      loggingStore.log(MESSAGE_TYPES.LOGGING, 'CALLBACK: Not starting - port is not changed')
     }
   } catch (error) {
-    dataListener.asyncEmit(MESSAGE_TYPES.ERROR, 'CALLBACK: Error updating with settings', error)
+    if (error instanceof Error) {
+      loggingStore.log(MESSAGE_TYPES.ERROR, 'CALLBACK: Error updating with settings' + error)
+    }
   }
 })
 
diff --git a/DeskThingServer/src/main/handlers/clientHandler.ts b/DeskThingServer/src/main/handlers/clientHandler.ts
index 88548ee..8d527b4 100644
--- a/DeskThingServer/src/main/handlers/clientHandler.ts
+++ b/DeskThingServer/src/main/handlers/clientHandler.ts
@@ -1,5 +1,5 @@
-import { ClientIPCData, ReplyFn } from '@shared/types/ipcTypes'
-import dataListener, { MESSAGE_TYPES } from '../utils/events'
+import { ClientIPCData, ClientManifest, SocketData, ReplyFn, MESSAGE_TYPES } from '@shared/types'
+import loggingStore from '../stores/loggingStore'
 import { handleAdbCommands } from './adbHandler'
 import {
   configureDevice,
@@ -9,7 +9,6 @@ import {
   HandleWebappZipFromUrl,
   SetupProxy
 } from './deviceHandler'
-import { ClientManifest, SocketData } from '@shared/types'
 import { sendMessageToClient, sendMessageToClients } from '../services/client/clientCom'
 
 export const clientHandler: Record<
@@ -28,7 +27,11 @@ export const clientHandler: Record<
       return `Pinging ${data.payload}...`
     } catch (error) {
       console.error('Error pinging client:', error)
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, error)
+      if (error instanceof Error) {
+        loggingStore.log(MESSAGE_TYPES.ERROR, error.message)
+      } else {
+        loggingStore.log(MESSAGE_TYPES.ERROR, String(error))
+      }
       return 'Error pinging' + data.payload
     }
   },
@@ -45,7 +48,6 @@ export const clientHandler: Record<
     return handleUrl(data, replyFn)
   },
   adb: async (data, replyFn) => {
-    console.log('Running ADB command:', data.payload)
     replyFn('logging', { status: true, data: 'Working', final: false })
 
     const response = await handleAdbCommands(data.payload, replyFn)
@@ -70,7 +72,7 @@ export const clientHandler: Record<
   },
   'push-staged': async (data, replyFn) => {
     try {
-      console.log('Pushing staged webapp...')
+      loggingStore.log(MESSAGE_TYPES.LOGGING, 'Pushing staged app...')
       HandlePushWebApp(data.payload, replyFn)
     } catch (error) {
       replyFn('logging', {
@@ -79,13 +81,16 @@ export const clientHandler: Record<
         error: 'Failed to push staged app!',
         final: true
       })
-      console.error('Error extracting zip file:', error)
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, error)
+      if (error instanceof Error) {
+        loggingStore.log(MESSAGE_TYPES.ERROR, error.message)
+      } else {
+        loggingStore.log(MESSAGE_TYPES.ERROR, String(error))
+      }
     }
   },
   'push-proxy-script': async (data, replyFn) => {
     try {
-      console.log('Pushing proxy script...')
+      loggingStore.log(MESSAGE_TYPES.LOGGING, 'Pushing proxy script...')
       SetupProxy(replyFn, data.payload)
       replyFn('logging', {
         status: true,
@@ -100,7 +105,11 @@ export const clientHandler: Record<
         final: true
       })
       console.error('Error pushing proxy script:', error)
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, error)
+      if (error instanceof Error) {
+        loggingStore.log(MESSAGE_TYPES.ERROR, error.message)
+      } else {
+        loggingStore.log(MESSAGE_TYPES.ERROR, String(error))
+      }
     }
   },
   'run-device-command': async (data, replyFn) => {
@@ -112,7 +121,6 @@ export const clientHandler: Record<
       request: data.payload.request,
       payload: !payload.includes('{') ? data.payload.payload : JSON.parse(data.payload.payload)
     }
-    console.log('Sending data', data)
     replyFn('logging', { status: true, data: 'Finished', final: true })
     return await sendMessageToClients(message)
   }
diff --git a/DeskThingServer/src/main/handlers/configHandler.ts b/DeskThingServer/src/main/handlers/configHandler.ts
index c7ea00f..bbc5480 100644
--- a/DeskThingServer/src/main/handlers/configHandler.ts
+++ b/DeskThingServer/src/main/handlers/configHandler.ts
@@ -1,6 +1,6 @@
 import { sendIpcData } from '..'
-import { AppData, App, Manifest, ButtonMapping } from '@shared/types'
-import dataListener, { MESSAGE_TYPES } from '../utils/events'
+import { AppData, App, MESSAGE_TYPES, Manifest, ButtonMapping } from '@shared/types'
+import loggingStore from '../stores/loggingStore'
 import { readFromFile, writeToFile } from '../utils/fileHandler'
 
 const defaultData: AppData = {
@@ -17,7 +17,6 @@ const readData = (): AppData => {
     const data = readFromFile<AppData>(dataFilePath)
     if (!data) {
       // File does not exist, create it with default data
-      console.log('File does not exist, creating it with default data')
       writeToFile(defaultData, dataFilePath)
       return defaultData
     }
@@ -34,11 +33,11 @@ const writeData = (data: AppData): void => {
   try {
     const result = writeToFile<AppData>(data, 'apps.json')
     if (!result) {
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, 'Error writing data')
+      loggingStore.log(MESSAGE_TYPES.ERROR, 'Error writing data')
     }
     sendIpcData('app-data', data) // Send data to the web UI
   } catch (err) {
-    dataListener.asyncEmit(MESSAGE_TYPES.ERROR, 'Error writing data' + err)
+    loggingStore.log(MESSAGE_TYPES.ERROR, 'Error writing data' + err)
     console.error('Error writing data:', err)
   }
 }
@@ -104,12 +103,11 @@ const addConfig = (configName: string, config: string | Array<string>, data = re
   } else {
     data.config[configName] = config
   }
-  console.log('THIS IS THE FIRST TIME THIS IS BEING EMITTED - TRY AND TRACK IT')
-  dataListener.asyncEmit(MESSAGE_TYPES.CONFIG, {
-    app: 'server',
-    type: 'config',
-    payload: data.config
-  })
+  // loggingStore.log(MESSAGE_TYPES.CONFIG, {
+  //   app: 'server',
+  //   type: 'config',
+  //   payload: data.config
+  // })
   writeData(data)
 }
 const getConfig = (
@@ -150,7 +148,7 @@ const getAppByIndex = (index: number): App | undefined => {
 }
 
 const purgeAppConfig = async (appName: string): Promise<void> => {
-  console.log('SERVER: Deleting App From Config...', appName)
+  loggingStore.log(MESSAGE_TYPES.LOGGING, `Purging app: ${appName}`)
   const data = readData()
 
   // Filter out the app to be purged
@@ -158,11 +156,11 @@ const purgeAppConfig = async (appName: string): Promise<void> => {
   data.apps = filteredApps
 
   writeData(data)
-  dataListener.asyncEmit(MESSAGE_TYPES.CONFIG, {
-    app: 'server',
-    type: 'config',
-    payload: data.config
-  })
+  // loggingStore.log(MESSAGE_TYPES.CONFIG, {
+  //   app: 'server',
+  //   type: 'config',
+  //   payload: data.config
+  // })
 }
 
 export {
diff --git a/DeskThingServer/src/main/handlers/dataHandler.ts b/DeskThingServer/src/main/handlers/dataHandler.ts
index ff8fec1..b11a294 100644
--- a/DeskThingServer/src/main/handlers/dataHandler.ts
+++ b/DeskThingServer/src/main/handlers/dataHandler.ts
@@ -62,7 +62,6 @@ const getData = (app: string): AppDataInterface => {
 }
 
 const purgeAppData = async (appName: string): Promise<void> => {
-  console.log('SERVER: Deleting app data...')
   const data = readData()
   delete data[appName]
   writeData(data)
diff --git a/DeskThingServer/src/main/handlers/deviceHandler.ts b/DeskThingServer/src/main/handlers/deviceHandler.ts
index 8155f5c..5442ddf 100644
--- a/DeskThingServer/src/main/handlers/deviceHandler.ts
+++ b/DeskThingServer/src/main/handlers/deviceHandler.ts
@@ -1,10 +1,10 @@
 import { sendIpcData } from '..'
-import dataListener, { MESSAGE_TYPES } from '../utils/events'
+import loggingStore from '../stores/loggingStore'
 import { join } from 'path'
 import * as fs from 'fs'
 import { app, net } from 'electron'
 import { handleAdbCommands } from './adbHandler'
-import { Client, ClientManifest, ReplyData, ReplyFn } from '@shared/types'
+import { Client, ClientManifest, MESSAGE_TYPES, ReplyData, ReplyFn } from '@shared/types'
 import settingsStore from '../stores/settingsStore'
 import { getLatestRelease } from './githubHandler'
 
@@ -17,14 +17,11 @@ export const HandleDeviceData = async (data: string): Promise<void> => {
         sendIpcData('version-status', deviceData)
         break
       default:
-        console.log('Unhandled response', deviceData)
+        loggingStore.log(MESSAGE_TYPES.ERROR, 'HandleDeviceData Unable to find device version')
         break
     }
   } catch (Exception) {
-    dataListener.asyncEmit(
-      MESSAGE_TYPES.ERROR,
-      'HandleDeviceData encountered the error ' + Exception
-    )
+    loggingStore.log(MESSAGE_TYPES.ERROR, 'HandleDeviceData encountered the error ' + Exception)
   }
 }
 
@@ -34,7 +31,6 @@ export const getDeviceManifestVersion = async (deviceId: string): Promise<string
     const response = await handleAdbCommands(`-s ${deviceId} shell cat ${manifestPath}`)
     // Extract version from manifest content
     const versionMatch = response.match(/"version":\s*"(.+?)"/i)
-    console.log(versionMatch)
     if (versionMatch && versionMatch[1]) {
       return versionMatch[1]
     } else {
@@ -88,13 +84,10 @@ export const configureDevice = async (deviceId: string, reply?: ReplyFn): Promis
   // Check if the client is already installed. Install it if it is missing
   try {
     const clientExists = await checkForClient(reply)
-    console.log('Client Exists?:', clientExists)
 
     if (!clientExists) {
       // Download it from github
       const repos = settings.clientRepos
-
-      console.log('Fetching Latest Client...')
       reply && reply('logging', { status: true, data: 'Fetching Latest Client...', final: false })
       const latestReleases = await Promise.all(
         repos.map(async (repo) => {
@@ -254,7 +247,7 @@ export const HandlePushWebApp = async (
           error: 'Client not found!',
           final: false
         })
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         '[HandlePushWebApp] Client Not Found! Ensure it is downloaded'
       )
@@ -262,7 +255,6 @@ export const HandlePushWebApp = async (
     }
 
     let response
-    console.log('Remounting...')
     reply && reply('logging', { status: true, data: 'Remounting...', final: false })
     response = await handleAdbCommands(`-s ${deviceId} shell mount -o remount,rw /`)
     reply && reply('logging', { status: true, data: response || 'Writing to tmp...', final: false })
@@ -344,10 +336,7 @@ export const HandlePushWebApp = async (
           error: `${Exception}`
         })
     }
-    dataListener.asyncEmit(
-      MESSAGE_TYPES.ERROR,
-      'HandlePushWebApp encountered the error ' + Exception
-    )
+    loggingStore.log(MESSAGE_TYPES.ERROR, 'HandlePushWebApp encountered the error ' + Exception)
   }
 }
 
@@ -391,9 +380,7 @@ export const HandleWebappZipFromUrl = async (
 
           // Optionally remove the temporary zip file
           fs.unlinkSync(tempZipPath)
-
-          console.log(`Successfully extracted ${zipFileUrl} to ${extractDir}`)
-          dataListener.asyncEmit(
+          loggingStore.log(
             MESSAGE_TYPES.LOGGING,
             `Successfully extracted ${zipFileUrl} to ${extractDir}`
           )
@@ -402,7 +389,7 @@ export const HandleWebappZipFromUrl = async (
           reply && reply('logging', { status: true, data: 'Success!', final: false })
         } catch (error) {
           console.error('Error extracting zip file:', error)
-          dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `Error extracting zip file: ${error}`)
+          loggingStore.log(MESSAGE_TYPES.ERROR, `Error extracting zip file: ${error}`)
 
           // Notify failure to the frontend
           reply &&
@@ -416,7 +403,7 @@ export const HandleWebappZipFromUrl = async (
       })
       response.on('error', (error) => {
         console.error('Error downloading zip file:', error)
-        dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `Error downloading zip file: ${error}`)
+        loggingStore.log(MESSAGE_TYPES.ERROR, `Error downloading zip file: ${error}`)
 
         // Notify failure to the frontend
         reply &&
@@ -430,7 +417,7 @@ export const HandleWebappZipFromUrl = async (
     } else {
       const errorMessage = `Failed to download zip file: ${response.statusCode}`
       console.error(errorMessage)
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, errorMessage)
+      loggingStore.log(MESSAGE_TYPES.ERROR, errorMessage)
 
       // Notify failure to the frontend
       reply &&
@@ -445,7 +432,7 @@ export const HandleWebappZipFromUrl = async (
 
   request.on('error', (error) => {
     console.error('Error sending request:', error)
-    dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `Error sending request: ${error}`)
+    loggingStore.log(MESSAGE_TYPES.ERROR, `Error sending request: ${error}`)
 
     // Notify failure to the frontend
     reply &&
@@ -487,18 +474,12 @@ export const handleClientManifestUpdate = async (
 
     // Write the updated manifest to the file
     await fs.promises.writeFile(manifestPath, manifestContent, 'utf8')
-    console.log('Manifest file updated successfully')
+    loggingStore.log(MESSAGE_TYPES.LOGGING, 'Manifest file updated successfully')
     reply && reply('logging', { status: true, data: 'Manifest Updated!', final: false })
-    dataListener.asyncEmit(
-      MESSAGE_TYPES.LOGGING,
-      'DEVICE HANDLER: Manifest file updated successfully'
-    )
+    loggingStore.log(MESSAGE_TYPES.LOGGING, 'DEVICE HANDLER: Manifest file updated successfully')
   } catch (error) {
     console.error('Error updating manifest file:', error)
-    dataListener.asyncEmit(
-      MESSAGE_TYPES.ERROR,
-      'DEVICE HANDLER: Error updating manifest file: ' + error
-    )
+    loggingStore.log(MESSAGE_TYPES.ERROR, 'DEVICE HANDLER: Error updating manifest file: ' + error)
   }
 }
 
@@ -512,14 +493,14 @@ export const checkForClient = async (
 
   const manifestExists = fs.existsSync(manifestPath)
   if (!manifestExists) {
-    console.log('Manifest file not found')
+    loggingStore.log(MESSAGE_TYPES.LOGGING, 'Manifest file not found')
     reply &&
       reply('logging', {
         status: false,
         data: 'Manifest file not found',
         final: false
       })
-    dataListener.asyncEmit(MESSAGE_TYPES.ERROR, 'DEVICE HANDLER: Manifest file not found')
+    loggingStore.log(MESSAGE_TYPES.ERROR, 'DEVICE HANDLER: Manifest file not found')
   }
   return manifestExists
 }
@@ -527,12 +508,12 @@ export const checkForClient = async (
 export const getClientManifest = async (
   reply?: (channel: string, data: ReplyData) => void
 ): Promise<ClientManifest | null> => {
-  console.log('Getting manifest...')
+  loggingStore.log(MESSAGE_TYPES.LOGGING, 'Getting manifest...')
   const userDataPath = app.getPath('userData')
   const manifestPath = join(userDataPath, 'webapp', 'manifest.js')
-  console.log('manifestPath: ', manifestPath)
+  loggingStore.log(MESSAGE_TYPES.LOGGING, 'manifestPath: ' + manifestPath)
   if (!fs.existsSync(manifestPath)) {
-    console.log('Manifest file not found')
+    loggingStore.log(MESSAGE_TYPES.LOGGING, 'Manifest file not found')
     reply &&
       reply('logging', {
         status: false,
@@ -540,7 +521,7 @@ export const getClientManifest = async (
         data: 'Manifest file not found',
         final: false
       })
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.ERROR,
       'DEVICE HANDLER: Client is not detected or downloaded! Please download the client! (downloads -> client)'
     )
@@ -567,12 +548,11 @@ export const getClientManifest = async (
         data: 'Manifest loaded!',
         final: false
       })
-    dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, 'DEVICE HANDLER: Manifest file read successfully')
-    console.log(manifest)
+    loggingStore.log(MESSAGE_TYPES.LOGGING, 'DEVICE HANDLER: Manifest file read successfully')
     return manifest
   } catch (error) {
     console.error('Error reading or parsing manifest file:', error)
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.ERROR,
       'DEVICE HANDLER: Error reading or parsing manifest file: ' + error
     )
@@ -623,7 +603,7 @@ export const SetupProxy = async (
       final: false
     })
 
-    console.log('Remounting...')
+    loggingStore.log(MESSAGE_TYPES.LOGGING, 'Remounting...')
     reply('logging', { status: true, data: 'Remounting...', final: false })
     response = await handleAdbCommands(`-s ${deviceId} shell mount -o remount,rw /`)
 
@@ -701,7 +681,7 @@ user=root`
       final: false,
       error: `${Exception}`
     })
-    dataListener.asyncEmit(MESSAGE_TYPES.ERROR, 'SetupProxy encountered the error ' + Exception)
+    loggingStore.log(MESSAGE_TYPES.ERROR, 'SetupProxy encountered the error ' + Exception)
     throw new Error('SetupProxy encountered the error ' + Exception)
   }
 }
@@ -815,10 +795,7 @@ export const AppendToSupervisor = async (
       final: false,
       error: `${Exception}`
     })
-    dataListener.asyncEmit(
-      MESSAGE_TYPES.ERROR,
-      'AppendToSupervisor encountered the error ' + Exception
-    )
+    loggingStore.log(MESSAGE_TYPES.ERROR, 'AppendToSupervisor encountered the error ' + Exception)
   }
 }
 
@@ -910,7 +887,7 @@ files = /etc/supervisor.d/*.conf\n`
       final: false,
       error: `${Exception}`
     })
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.ERROR,
       'EnsureSupervisorInclude encountered the error ' + Exception
     )
diff --git a/DeskThingServer/src/main/handlers/firewallHandler.ts b/DeskThingServer/src/main/handlers/firewallHandler.ts
index 7924a3e..e97159e 100644
--- a/DeskThingServer/src/main/handlers/firewallHandler.ts
+++ b/DeskThingServer/src/main/handlers/firewallHandler.ts
@@ -1,10 +1,10 @@
 import { exec } from 'child_process'
 import os from 'os'
-import dataListener, { MESSAGE_TYPES } from '../utils/events'
+import loggingStore from '../stores/loggingStore'
 import fs from 'fs'
 import { join } from 'path'
 import { app } from 'electron'
-import { ReplyFn } from '@shared/types'
+import { ReplyFn, MESSAGE_TYPES } from '@shared/types'
 
 // Function to execute shell commands
 function runCommand(command: string): Promise<string> {
@@ -45,7 +45,7 @@ async function checkFirewallRuleExists(port: number): Promise<boolean> {
       const result = await runCommand(checkCommand)
       return result.trim() === 'true'
     } else {
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `FIREWALL: Unsupported OS!`)
+      loggingStore.log(MESSAGE_TYPES.ERROR, `FIREWALL: Unsupported OS!`)
       console.error('Unsupported OS')
       return false
     }
@@ -65,15 +65,18 @@ async function setupFirewall(port: number, reply?: ReplyFn): Promise<void> {
     reply && reply('logging', { status: true, data: 'Checking if rules exist', final: false })
     const ruleExists = await checkFirewallRuleExists(port)
     if (ruleExists) {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.LOGGING,
         `FIREWALL: Firewall rule for port ${port} verified successfully`
       )
-      console.log(`Firewall rule for port ${port} verified successfully`)
+      loggingStore.log(
+        MESSAGE_TYPES.LOGGING,
+        `Firewall rule for port ${port} verified successfully`
+      )
       reply &&
         reply('logging', { status: true, data: 'Verified that the rule exists!', final: false })
     } else {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         `FIREWALL: Failed to verify firewall rule for port ${port}!`
       )
@@ -112,11 +115,11 @@ async function setupFirewall(port: number, reply?: ReplyFn): Promise<void> {
 
       try {
         await runCommand(`powershell -ExecutionPolicy Bypass -File "${tempScriptPath}"`)
-        dataListener.asyncEmit(
+        loggingStore.log(
           MESSAGE_TYPES.LOGGING,
           `FIREWALL: Firewall rules set up successfully on Windows`
         )
-        console.log('Firewall rules set up successfully on Windows')
+        loggingStore.log(MESSAGE_TYPES.LOGGING, 'Firewall rules set up successfully on Windows')
 
         reply &&
           reply('logging', { status: true, data: 'Firewall ran without error', final: false })
@@ -140,11 +143,11 @@ async function setupFirewall(port: number, reply?: ReplyFn): Promise<void> {
       `
 
       await runCommand(`echo "${script}" | bash`)
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.LOGGING,
         `FIREWALL: Firewall rules set up successfully on Linux`
       )
-      console.log('Firewall rules set up successfully on Linux')
+      loggingStore.log(MESSAGE_TYPES.LOGGING, 'Firewall rules set up successfully on Linux')
     } else if (platform === 'darwin') {
       reply &&
         reply('logging', {
@@ -165,16 +168,16 @@ async function setupFirewall(port: number, reply?: ReplyFn): Promise<void> {
       `
 
       await runCommand(`echo "${script}" | bash`)
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.LOGGING,
         `FIREWALL: Firewall rules set up successfully on macOS`
       )
-      console.log('Firewall rules set up successfully on macOS')
+      loggingStore.log(MESSAGE_TYPES.LOGGING, 'Firewall rules set up successfully on macOS')
     } else {
       console.error('Unsupported OS')
     }
   } catch (error) {
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.ERROR,
       `FIREWALL: Error encountered trying to setup firewall for ${port}! Run administrator and try again`
     )
diff --git a/DeskThingServer/src/main/handlers/githubHandler.ts b/DeskThingServer/src/main/handlers/githubHandler.ts
index 150f2f3..36792a0 100644
--- a/DeskThingServer/src/main/handlers/githubHandler.ts
+++ b/DeskThingServer/src/main/handlers/githubHandler.ts
@@ -11,12 +11,10 @@ export async function getLatestRelease(repoUrl: string): Promise<GithubRelease>
     const owner = repoMatch[1]
     const repo = repoMatch[2]
 
-    console.log('Repo:', owner, repo)
     const apiUrl = `https://api.github.com/repos/${owner}/${repo}/releases/latest`
     const response = await fetch(apiUrl)
 
     if (!response.ok) {
-      console.log('HTTP error fetching the latest release! Response: ', response)
       throw new Error(`HTTP error! status: ${response.status}`)
     }
 
diff --git a/DeskThingServer/src/main/handlers/musicHandler.ts b/DeskThingServer/src/main/handlers/musicHandler.ts
index 5358764..2b4c6cd 100644
--- a/DeskThingServer/src/main/handlers/musicHandler.ts
+++ b/DeskThingServer/src/main/handlers/musicHandler.ts
@@ -1,8 +1,9 @@
-import dataListener, { MESSAGE_TYPES } from '../utils/events'
+import loggingStore from '../stores/loggingStore'
 import settingsStore from '../stores/settingsStore'
-import { Settings, SocketData } from '@shared/types'
+import { Settings, SocketData, MESSAGE_TYPES } from '@shared/types'
 import { sendMessageToApp } from '../services/apps'
 import { getAppByName } from './configHandler'
+import appState from '../services/apps/appState'
 
 export class MusicHandler {
   private static instance: MusicHandler
@@ -22,10 +23,13 @@ export class MusicHandler {
 
   private async initializeRefreshInterval(): Promise<void> {
     const settings = await settingsStore.getSettings() // Get from your settings store
+    this.currentApp = settings.playbackLocation || 'none'
+
     this.updateRefreshInterval(settings.refreshInterval)
-    dataListener.on(MESSAGE_TYPES.SETTINGS, this.handleSettingsUpdate)
+    settingsStore.addListener(this.handleSettingsUpdate.bind(this))
 
     setTimeout(() => {
+      loggingStore.log(MESSAGE_TYPES.DEBUG, '[MusicHandler]: Initialized')
       this.refreshMusicData()
     }, 5000) // Delay to ensure settings are loaded
   }
@@ -33,12 +37,12 @@ export class MusicHandler {
   private handleSettingsUpdate = (settings: Settings): void => {
     this.updateRefreshInterval(settings.refreshInterval)
 
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.LOGGING,
       `[MusicHandler]: Received settings update - checking for changes | Playback location: ${this.currentApp} -> ${settings.playbackLocation}`
     )
     if (settings.playbackLocation) {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.LOGGING,
         `[MusicHandler]: Setting restarting to use ${settings.playbackLocation}`
       )
@@ -53,7 +57,13 @@ export class MusicHandler {
     }
 
     if (refreshRate < 0) {
-      dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `[MusicHandler]: Cancelling Refresh Interval!`)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `[MusicHandler]: Cancelling Refresh Interval!`)
+      return
+    } else if (refreshRate < 5) {
+      loggingStore.log(
+        MESSAGE_TYPES.WARNING,
+        `[MusicHandler]: Refresh Interval is ${refreshRate}! Performance may be impacted`
+      )
       return
     }
 
@@ -62,19 +72,66 @@ export class MusicHandler {
     }, refreshRate)
   }
 
-  private async refreshMusicData(): Promise<void> {
-    if (!this.currentApp || this.currentApp.length == 0 || this.currentApp == 'none') {
+  private async findCurrentPlaybackSource(): Promise<string | null> {
+    const Apps = appState.getAllBase()
+
+    const audioSource = Apps.find((app) => app.manifest?.isAudioSource)
+
+    if (audioSource) {
+      loggingStore.log(
+        MESSAGE_TYPES.WARNING,
+        `[MusicHandler]: Found ${audioSource.name} as an audio source automatically. Applying.`
+      )
+      return audioSource.name
+    } else {
+      loggingStore.log(
+        MESSAGE_TYPES.LOGGING,
+        `[MusicHandler]: Unable to automatically set an audio source. No app found!`
+      )
+      return null
+    }
+  }
+
+  private async getPlaybackSource(): Promise<string | null> {
+    if (this.currentApp == 'disabled') {
+      loggingStore.log(
+        MESSAGE_TYPES.LOGGING,
+        `[MusicHandler]: Music is disabled! Cancelling refresh`
+      )
+      const settings = await settingsStore.getSettings()
+      if (settings.refreshInterval > 0) {
+        settingsStore.updateSetting('refreshInterval', -1)
+      }
+      return null
+    }
+
+    if (this.currentApp == 'none') {
+      const app = await this.findCurrentPlaybackSource()
+      if (app) {
+        this.currentApp = app
+        settingsStore.updateSetting('playbackLocation', app)
+        return app
+      } else {
+        loggingStore.log(
+          MESSAGE_TYPES.ERROR,
+          `[MusicHandler]: No Audiosource Found! Go to Downloads -> Apps and download an audio source! (Spotify, MediaWin, GMP, etc)`
+        )
+        return null
+      }
+    }
+
+    if (!this.currentApp || this.currentApp.length == 0) {
       // Attempt to get audiosource from settings
       const currentApp = (await settingsStore.getSettings()).playbackLocation
-      if (!currentApp || currentApp.length == 0 || currentApp == 'none') {
-        dataListener.asyncEmit(
+      if (!currentApp || currentApp.length == 0) {
+        loggingStore.log(
           MESSAGE_TYPES.ERROR,
           `[MusicHandler]: No playback location set! Go to settings -> Music to set the playback location!`
         )
-        return
+        return null
       } else {
-        dataListener.asyncEmit(
-          MESSAGE_TYPES.LOGGING,
+        loggingStore.log(
+          MESSAGE_TYPES.WARNING,
           `[MusicHandler]: Playback location was not set! Setting to ${currentApp}`
         )
         this.currentApp = currentApp
@@ -84,29 +141,40 @@ export class MusicHandler {
     const app = await getAppByName(this.currentApp)
 
     if (!app || app.running == false) {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         `[MusicHandler]: App ${this.currentApp} is not found or not running!`
       )
+      return null
+    }
+
+    return this.currentApp
+  }
+
+  private async refreshMusicData(): Promise<void> {
+    const currentApp = await this.getPlaybackSource()
+
+    if (!currentApp) {
+      return
     }
 
     try {
-      await sendMessageToApp(this.currentApp, { type: 'get', request: 'refresh', payload: '' })
-      dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `[MusicHandler]: Refreshing Music Data!`)
+      await sendMessageToApp(currentApp, { type: 'get', request: 'refresh', payload: '' })
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `[MusicHandler]: Refreshing Music Data!`)
     } catch (error) {
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `[MusicHandler]: Music refresh failed: ${error}`)
+      loggingStore.log(MESSAGE_TYPES.ERROR, `[MusicHandler]: Music refresh failed: ${error}`)
     }
   }
 
   public async setAudioSource(source: string): Promise<void> {
     if (source.length == 0) {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         `[MusicHandler]: Unable to update playback location. No playback location passed!`
       )
       return
     }
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.LOGGING,
       `[MusicHandler]: Setting Playback Location to ${source}`
     )
@@ -114,40 +182,24 @@ export class MusicHandler {
   }
 
   public async handleClientRequest(request: SocketData): Promise<void> {
-    if (!this.currentApp) {
-      const settings = await settingsStore.getSettings()
-      if (settings.playbackLocation) {
-        dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `[MusicHandler]: No playback location set!`)
-        this.currentApp = settings.playbackLocation
-      } else {
-        dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `[MusicHandler]: No playback location set!`)
-        return
-      }
-    }
+    const currentApp = await this.getPlaybackSource()
 
-    if (this.currentApp == 'none') {
-      dataListener.asyncEmit(
-        MESSAGE_TYPES.ERROR,
-        `[MusicHandler]: Playback location is 'none' ! Go to settings -> Music to set the playback location!`
-      )
+    if (!currentApp) {
       return
     }
 
     if (request.app != 'music' && request.app != 'utility') return
 
     if (request.app == 'utility') {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.LOGGING,
         `[MusicHandler]: Legacy Name called! Support for this will be dropped in future updates. Migrate your app to use 'music' instead!`
       )
     }
 
-    dataListener.asyncEmit(
-      MESSAGE_TYPES.LOGGING,
-      `[MusicHandler]: ${request.type} ${request.request}`
-    )
+    loggingStore.log(MESSAGE_TYPES.LOGGING, `[MusicHandler]: ${request.type} ${request.request}`)
 
-    sendMessageToApp(this.currentApp, {
+    sendMessageToApp(currentApp, {
       type: request.type,
       request: request.request,
       payload: request.payload
diff --git a/DeskThingServer/src/main/handlers/utilityHandler.ts b/DeskThingServer/src/main/handlers/utilityHandler.ts
index 53b64fa..2efb75a 100644
--- a/DeskThingServer/src/main/handlers/utilityHandler.ts
+++ b/DeskThingServer/src/main/handlers/utilityHandler.ts
@@ -1,13 +1,20 @@
-import { ButtonMapping, Client, GithubRelease, Settings } from '@shared/types'
-import { ReplyFn, UtilityIPCData } from '@shared/types/ipcTypes'
+import {
+  ReplyFn,
+  UtilityIPCData,
+  ButtonMapping,
+  Client,
+  MESSAGE_TYPES,
+  GithubRelease,
+  Log,
+  Settings
+} from '@shared/types'
 import ConnectionStore from '../stores/connectionsStore'
 import settingsStore from '../stores/settingsStore'
 import { getReleases } from './githubHandler'
-import dataListener, { MESSAGE_TYPES } from '../utils/events'
+import loggingStore from '../stores/loggingStore'
 import path from 'path'
 import { shell, app, dialog } from 'electron'
 import keyMapStore from '../stores/keyMapStore'
-import logger from '../utils/logger'
 import { setupFirewall } from './firewallHandler'
 import { disconnectClient } from '../services/client/clientCom'
 import { restartServer } from '../services/client/websocket'
@@ -18,11 +25,19 @@ export const utilityHandler: Record<
     data: UtilityIPCData,
     replyFn: ReplyFn
   ) => Promise<
-    void | string | Client[] | boolean | string[] | Settings | GithubRelease[] | ButtonMapping
+    | void
+    | string
+    | Client[]
+    | boolean
+    | string[]
+    | Settings
+    | GithubRelease[]
+    | ButtonMapping
+    | Log[]
   >
 > = {
   ping: async () => {
-    console.log('Pinged! pong')
+    loggingStore.log(MESSAGE_TYPES.LOGGING, 'Pinged! pong')
     return 'pong'
   },
   zip: async (data): Promise<string | undefined> => {
@@ -63,14 +78,18 @@ export const utilityHandler: Record<
     try {
       return await getReleases(data.payload)
     } catch (error) {
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, error)
+      if (error instanceof Error) {
+        loggingStore.log(MESSAGE_TYPES.ERROR, error.message)
+      } else {
+        loggingStore.log(MESSAGE_TYPES.ERROR, String(error))
+      }
       return []
     }
   },
   logs: async (data) => {
     switch (data.request) {
       case 'get':
-        return await logger.getLogs()
+        return await loggingStore.getLogs()
       default:
         return
     }
@@ -132,14 +151,13 @@ const refreshFirewall = async (replyFn: ReplyFn): Promise<void> => {
     replyFn('logging', { status: true, data: 'Refreshing Firewall', final: false })
     const payload = (await settingsStore.getSettings()) as Settings
     if (payload) {
-      dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, '[firewall] Setting up firewall')
+      loggingStore.log(MESSAGE_TYPES.LOGGING, '[firewall] Setting up firewall')
       try {
         await setupFirewall(payload.devicePort, replyFn)
       } catch (firewallError) {
-        console.log(firewallError)
         if (!(firewallError instanceof Error)) return
 
-        dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `FIREWALL: ${firewallError.message}`)
+        loggingStore.log(MESSAGE_TYPES.ERROR, `FIREWALL: ${firewallError.message}`)
         replyFn('logging', {
           status: false,
           data: 'Error in firewall',
@@ -149,7 +167,7 @@ const refreshFirewall = async (replyFn: ReplyFn): Promise<void> => {
         return
       }
     } else {
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, '[firewall] No settings found!')
+      loggingStore.log(MESSAGE_TYPES.ERROR, '[firewall] No settings found!')
       replyFn('logging', {
         status: false,
         data: 'Error in firewall',
@@ -158,7 +176,7 @@ const refreshFirewall = async (replyFn: ReplyFn): Promise<void> => {
       })
     }
   } catch (error) {
-    dataListener.asyncEmit(MESSAGE_TYPES.ERROR, 'SERVER: [firewall] Error saving manifest' + error)
+    loggingStore.log(MESSAGE_TYPES.ERROR, 'SERVER: [firewall] Error saving manifest' + error)
     console.error('[Firewall] Error setting client manifest:', error)
     if (error instanceof Error) {
       replyFn('logging', { status: false, data: 'Unfinished', error: error.message, final: true })
diff --git a/DeskThingServer/src/main/index.ts b/DeskThingServer/src/main/index.ts
index d5c6504..08dfa4c 100644
--- a/DeskThingServer/src/main/index.ts
+++ b/DeskThingServer/src/main/index.ts
@@ -1,4 +1,4 @@
-import { AppIPCData, AuthScopes, Client, UtilityIPCData } from '@shared/types'
+import { AppIPCData, AuthScopes, Client, UtilityIPCData, MESSAGE_TYPES } from '@shared/types'
 import { app, shell, BrowserWindow, ipcMain, Tray, Menu, nativeImage } from 'electron'
 import { join, resolve } from 'path'
 import icon from '../../resources/icon.png?asset'
@@ -213,17 +213,16 @@ async function initializeDoc(): Promise<void> {
 }
 
 async function setupIpcHandlers(): Promise<void> {
-  const dataListener = (await import('./utils/events')).default
-  const { MESSAGE_TYPES } = await import('./utils/events')
+  const loggingStore = (await import('./stores/loggingStore')).default
 
   const { appHandler } = await import('./handlers/appHandler')
   const { clientHandler } = await import('./handlers/clientHandler')
   const { utilityHandler } = await import('./handlers/utilityHandler')
-  const { ResponseLogger } = await import('./utils/events')
+  const { ResponseLogger } = await import('./stores/loggingStore')
 
   const defaultHandler = async (data: AppIPCData): Promise<void> => {
     console.error(`No handler implemented for type: ${data.type} ${data}`)
-    dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `No handler implemented for type: ${data.type}`)
+    loggingStore.log(MESSAGE_TYPES.ERROR, `No handler implemented for type: ${data.type}`)
   }
 
   ipcMain.handle('APPS', async (event, data: AppIPCData) => {
@@ -238,7 +237,7 @@ async function setupIpcHandlers(): Promise<void> {
       }
     } catch (error) {
       console.error('Error in IPC handler:', error)
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `Error in IPC handler: ${error}`)
+      loggingStore.log(MESSAGE_TYPES.ERROR, `Error in IPC handler: ${error}`)
     }
   })
 
@@ -254,12 +253,11 @@ async function setupIpcHandlers(): Promise<void> {
       }
     } catch (error) {
       console.error('Error in IPC handler:', error)
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `Error in IPC handler: ${error}`)
+      loggingStore.log(MESSAGE_TYPES.ERROR, `Error in IPC handler: ${error}`)
     }
   })
 
   ipcMain.handle('UTILITY', async (event, data: UtilityIPCData) => {
-    console.log('Received IPC data:', data)
     const handler = utilityHandler[data.type] || defaultHandler
     const replyFn = ResponseLogger(event.sender.send.bind(event.sender))
 
@@ -272,19 +270,13 @@ async function setupIpcHandlers(): Promise<void> {
       }
     } catch (error) {
       console.error('Error in IPC handler:', error)
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `Error in IPC handler: ${error}`)
+      loggingStore.log(MESSAGE_TYPES.ERROR, `Error in IPC handler: ${error}`)
     }
   })
 
-  dataListener.on(MESSAGE_TYPES.ERROR, (errorData) => {
-    sendIpcData('error', errorData)
-  })
-  dataListener.on(MESSAGE_TYPES.LOGGING, (errorData) => {
+  loggingStore.addListener((errorData) => {
     sendIpcData('log', errorData)
   })
-  dataListener.on(MESSAGE_TYPES.MESSAGE, (errorData) => {
-    sendIpcData('message', errorData)
-  })
   ConnectionStore.on((clients: Client[]) => {
     sendIpcData('connections', { status: true, data: clients.length, final: true })
     sendIpcData('clients', { status: true, data: clients, final: true })
@@ -292,7 +284,7 @@ async function setupIpcHandlers(): Promise<void> {
   ConnectionStore.onDevice((devices: string[]) => {
     sendIpcData('adbdevices', { status: true, data: devices, final: true })
   })
-  dataListener.on(MESSAGE_TYPES.SETTINGS, (newSettings) => {
+  settingsStore.addListener((newSettings) => {
     sendIpcData('settings-updated', newSettings)
   })
 }
@@ -367,8 +359,6 @@ function handleUrl(url: string | undefined): void {
   if (url && url.startsWith('deskthing://')) {
     const path = url.replace('deskthing://', '')
 
-    console.log('Handling URL:', url, path)
-
     if (mainWindow) {
       mainWindow.webContents.send('handle-protocol-url', path)
     }
diff --git a/DeskThingServer/src/main/services/apps/appCommunication.ts b/DeskThingServer/src/main/services/apps/appCommunication.ts
index 818e287..fea4749 100644
--- a/DeskThingServer/src/main/services/apps/appCommunication.ts
+++ b/DeskThingServer/src/main/services/apps/appCommunication.ts
@@ -1,6 +1,6 @@
 import { openAuthWindow, sendIpcAuthMessage } from '../..'
-import { AuthScopes, IncomingData, Key, Action, ToClientType } from '@shared/types'
-import dataListener, { MESSAGE_TYPES } from '../../utils/events'
+import { AuthScopes, MESSAGE_TYPES, IncomingData, Key, Action, ToClientType } from '@shared/types'
+import loggingStore from '../../stores/loggingStore'
 import { ipcMain } from 'electron'
 
 /**
@@ -18,7 +18,7 @@ export async function handleDataFromApp(app: string, appData: IncomingData): Pro
 
   switch (appData.type) {
     case 'message':
-      dataListener.asyncEmit(MESSAGE_TYPES.MESSAGE, appData.payload)
+      loggingStore.log(MESSAGE_TYPES.MESSAGE, appData.payload, app.toUpperCase())
       break
     case 'get':
       switch (appData.request) {
@@ -67,7 +67,7 @@ export async function handleDataFromApp(app: string, appData: IncomingData): Pro
       if (appData.payload && appData.request) {
         sendMessageToApp(appData.request, appData.payload)
       } else {
-        dataListener.asyncEmit(
+        loggingStore.log(
           MESSAGE_TYPES.ERROR,
           `${app.toUpperCase()}: App data malformed`,
           appData.payload
@@ -75,10 +75,10 @@ export async function handleDataFromApp(app: string, appData: IncomingData): Pro
       }
       break
     case 'error':
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `${app.toUpperCase()}: ${appData.payload}`)
+      loggingStore.log(MESSAGE_TYPES.ERROR, `${appData.payload}`, app.toUpperCase())
       break
     case 'log':
-      dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `${app.toUpperCase()}: ${appData.payload}`)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `${appData.payload}`, app.toUpperCase())
       break
     case 'button':
       if (appData.request == 'add') {
@@ -93,13 +93,13 @@ export async function handleDataFromApp(app: string, appData: IncomingData): Pro
               Modes: appData.payload.Modes || []
             }
             keyMapStore.addKey(Key)
-            dataListener.asyncEmit(
+            loggingStore.log(
               MESSAGE_TYPES.LOGGING,
               `${app.toUpperCase()}: Added Button Successfully`
             )
           }
         } catch (Error) {
-          dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `${app.toUpperCase()}: ${Error}`)
+          loggingStore.log(MESSAGE_TYPES.ERROR, `${app.toUpperCase()}: ${Error}`)
         }
       } else if (appData.request == 'remove') {
         keyMapStore.removeKey(appData.payload.id)
@@ -122,13 +122,13 @@ export async function handleDataFromApp(app: string, appData: IncomingData): Pro
                 source: app
               }
               keyMapStore.addAction(Action)
-              dataListener.asyncEmit(
+              loggingStore.log(
                 MESSAGE_TYPES.LOGGING,
                 `${app.toUpperCase()}: Added Action Successfully`
               )
             }
           } catch (Error) {
-            dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `${app.toUpperCase()}: ${Error}`)
+            loggingStore.log(MESSAGE_TYPES.ERROR, `${app.toUpperCase()}: ${Error}`)
           }
           break
         case 'remove':
@@ -172,7 +172,7 @@ export async function requestUserInput(appName: string, scope: AuthScopes): Prom
 export async function sendMessageToApp(appName: string, data: IncomingData): Promise<void> {
   const { AppHandler } = await import('./appState')
   const appHandler = AppHandler.getInstance()
-  dataListener.asyncEmit(
+  loggingStore.log(
     MESSAGE_TYPES.LOGGING,
     `[sendMessageToApp] Sending message to ${appName} with ${data.type}`
   )
@@ -181,7 +181,7 @@ export async function sendMessageToApp(appName: string, data: IncomingData): Pro
     if (app && typeof app.func.toClient === 'function') {
       ;(app.func.toClient as ToClientType)(data)
     } else {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         `SERVER: App ${appName} not found or does not have toClient function. (is it running?)`
       )
diff --git a/DeskThingServer/src/main/services/apps/appInstaller.ts b/DeskThingServer/src/main/services/apps/appInstaller.ts
index e946330..c10fe03 100644
--- a/DeskThingServer/src/main/services/apps/appInstaller.ts
+++ b/DeskThingServer/src/main/services/apps/appInstaller.ts
@@ -1,13 +1,14 @@
 import { join, resolve } from 'path'
 import { app } from 'electron'
-import dataListener, { MESSAGE_TYPES } from '../../utils/events'
+import loggingStore from '../../stores/loggingStore'
 import {
   IncomingData,
   ToClientType,
   Response,
   Manifest,
   DeskThing,
-  AppReturnData
+  AppReturnData,
+  MESSAGE_TYPES
 } from '@shared/types'
 import { getAppFilePath, getManifest } from './appUtils'
 import { mkdirSync, existsSync, rmSync, promises } from 'node:fs'
@@ -29,11 +30,14 @@ import { handleDataFromApp } from './appCommunication'
 export async function handleZip(zipFilePath: string, reply?): Promise<AppReturnData> {
   const { getManifest } = await import('./appUtils')
   try {
-    console.log(`[handleZip] Extracting ${zipFilePath}...`)
+    loggingStore.log(MESSAGE_TYPES.LOGGING, `[handleZip] Extracting ${zipFilePath}...`)
     const appPath = join(app.getPath('userData'), 'apps') // Extract to user data folder
     // Create the extraction directory if it doesn't exist
     if (!existsSync(appPath)) {
-      console.log(`[handleZip] Creating extraction directory at ${appPath}...`)
+      loggingStore.log(
+        MESSAGE_TYPES.LOGGING,
+        `[handleZip] Creating extraction directory at ${appPath}...`
+      )
       mkdirSync(appPath, { recursive: true })
     }
 
@@ -42,7 +46,10 @@ export async function handleZip(zipFilePath: string, reply?): Promise<AppReturnD
 
     // Delete the temp directory if it exists
     if (existsSync(tempDir)) {
-      console.log(`[handleZip] Removing temporary directory at ${tempDir}...`)
+      loggingStore.log(
+        MESSAGE_TYPES.LOGGING,
+        `[handleZip] Removing temporary directory at ${tempDir}...`
+      )
       rmSync(tempDir, { recursive: true, force: true })
     }
     mkdirSync(tempDir, { recursive: true })
@@ -53,23 +60,29 @@ export async function handleZip(zipFilePath: string, reply?): Promise<AppReturnD
     const AdmZip = await import('adm-zip')
     await new Promise<void>((resolve, reject) => {
       try {
-        console.log(`[handleZip] Extracting app...`)
+        loggingStore.log(MESSAGE_TYPES.LOGGING, `[handleZip] Extracting app...`)
         const zip = new AdmZip.default(zipFilePath)
 
         zip.getEntries().forEach((entry) => {
           if (entry.isDirectory) {
-            console.log(`[handleZip] Skipping directory ${entry.entryName}`)
+            loggingStore.log(
+              MESSAGE_TYPES.LOGGING,
+              `[handleZip] Skipping directory ${entry.entryName}`
+            )
           } else {
-            console.log(`[handleZip] Extracting file ${entry.entryName}`)
+            loggingStore.log(
+              MESSAGE_TYPES.LOGGING,
+              `[handleZip] Extracting file ${entry.entryName}`
+            )
             zip.extractEntryTo(entry, tempDir, true, true)
           }
         })
 
         zip.extractAllTo(tempDir, true)
-        console.log(`[handleZip] App extracted to ${tempDir}`)
+        loggingStore.log(MESSAGE_TYPES.LOGGING, `[handleZip] App extracted to ${tempDir}`)
         resolve()
       } catch (error) {
-        dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `SERVER: Error extracting ${zipFilePath}`)
+        loggingStore.log(MESSAGE_TYPES.ERROR, `SERVER: Error extracting ${zipFilePath}`)
         reply && reply('logging', { status: false, data: 'Extraction failed!', final: true })
         reject(error)
       }
@@ -80,12 +93,9 @@ export async function handleZip(zipFilePath: string, reply?): Promise<AppReturnD
     const manifestData = await getManifest(tempDir)
     let returnData
 
-    console.log(`[handleZip] Fetching manifest...`)
+    loggingStore.log(MESSAGE_TYPES.LOGGING, `[handleZip] Fetching manifest...`)
     if (!manifestData) {
-      dataListener.asyncEmit(
-        MESSAGE_TYPES.ERROR,
-        `SERVER: Error getting manifest from ${zipFilePath}`
-      )
+      loggingStore.log(MESSAGE_TYPES.ERROR, `SERVER: Error getting manifest from ${zipFilePath}`)
       returnData = {
         appId: '',
         appName: '',
@@ -110,7 +120,7 @@ export async function handleZip(zipFilePath: string, reply?): Promise<AppReturnD
     // Create the folder where the app will be stored in
     const appDirectory = join(appPath, returnData.appId)
     if (existsSync(appDirectory)) {
-      console.log(`[handleZip] Old app detected, purging...`)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `[handleZip] Old app detected, purging...`)
       const { AppHandler } = await import('./appState')
       const appHandler = AppHandler.getInstance()
 
@@ -120,17 +130,20 @@ export async function handleZip(zipFilePath: string, reply?): Promise<AppReturnD
       rmSync(appDirectory, { recursive: true })
     }
 
-    console.log(`[handleZip] Moving files to ${appDirectory}...`)
+    loggingStore.log(MESSAGE_TYPES.LOGGING, `[handleZip] Moving files to ${appDirectory}...`)
     // Move the extracted files from tempDir to appDirectory
     await promises.rename(tempDir, appDirectory)
 
     reply && reply('logging', { status: true, data: 'App files moved successfully', final: false })
 
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.LOGGING,
       `SERVER: Successfully extracted ${zipFilePath} to ${appDirectory}`
     )
-    console.log(`Successfully extracted ${zipFilePath} to ${appDirectory}`)
+    loggingStore.log(
+      MESSAGE_TYPES.LOGGING,
+      `Successfully extracted ${zipFilePath} to ${appDirectory}`
+    )
     return returnData
   } catch (error) {
     console.error('[handleZIP] Error handling zip file:', error)
@@ -148,9 +161,9 @@ export async function handleZipFromUrl(zipUrlPath: string, reply): Promise<AppRe
   const tempZipPath = getAppFilePath('downloads', 'temp.zip')
   let returnData: AppReturnData | undefined
   try {
-    console.log(`[handleZipFromUrl] Downloading ${zipUrlPath}...`)
+    loggingStore.log(MESSAGE_TYPES.LOGGING, `[handleZipFromUrl] Downloading ${zipUrlPath}...`)
     if (!existsSync(getAppFilePath('downloads'))) {
-      console.log(`[handleZipFromUrl] Creating downloads directory...`)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `[handleZipFromUrl] Creating downloads directory...`)
       mkdirSync(getAppFilePath('downloads'), { recursive: true })
     }
 
@@ -161,7 +174,7 @@ export async function handleZipFromUrl(zipUrlPath: string, reply): Promise<AppRe
     if (!response.ok) {
       console.error(`[handleZipFromFile] Failed to download zip file: ${response.status}`)
       const errorMessage = `Failed to download zip file: ${response.status}`
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, errorMessage)
+      loggingStore.log(MESSAGE_TYPES.ERROR, errorMessage)
       reply('logging', {
         status: false,
         data: 'Encountered an error',
@@ -170,7 +183,7 @@ export async function handleZipFromUrl(zipUrlPath: string, reply): Promise<AppRe
       })
       return
     } else {
-      console.log(`[handleZipFromUrl] Downloading ${zipUrlPath}`)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `[handleZipFromUrl] Downloading ${zipUrlPath}`)
       reply('logging', { status: true, data: 'Downloading... 0%', final: false })
     }
 
@@ -201,20 +214,17 @@ export async function handleZipFromUrl(zipUrlPath: string, reply): Promise<AppRe
 
     const arrayBuffer = await response.arrayBuffer()
     const buffer = Buffer.from(arrayBuffer)
-    console.log(`[handleZipFromUrl] Writing to ${tempZipPath}...`)
+    loggingStore.log(MESSAGE_TYPES.LOGGING, `[handleZipFromUrl] Writing to ${tempZipPath}...`)
     await promises.writeFile(tempZipPath, buffer)
 
     reply('logging', { status: true, data: 'Extracting...', final: false })
 
     returnData = await handleZip(tempZipPath, reply)
-    console.log(`Successfully processed and deleted ${tempZipPath}`)
+    loggingStore.log(MESSAGE_TYPES.LOGGING, `Successfully processed and deleted ${tempZipPath}`)
     reply('zip-name', { status: true, data: returnData, final: true })
     return returnData
   } catch (error) {
-    dataListener.asyncEmit(
-      MESSAGE_TYPES.ERROR,
-      `[handleZIPfromURL] Error handling zip file: ${error}`
-    )
+    loggingStore.log(MESSAGE_TYPES.ERROR, `[handleZIPfromURL] Error handling zip file: ${error}`)
     throw new Error('[handleZIPfromURL] Error handling zip file' + error)
   } finally {
     // Clean up the temporary zip file and extracted directory
@@ -225,7 +235,7 @@ export async function handleZipFromUrl(zipUrlPath: string, reply): Promise<AppRe
       if (existsSync(getAppFilePath('downloads', 'extracted'))) {
         await promises.rm(getAppFilePath('downloads', 'extracted'), { recursive: true })
       }
-      console.log(`Successfully deleted temporary files`)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `Successfully deleted temporary files`)
     } catch (cleanupError) {
       console.error(`Error deleting temp files: ${cleanupError}`)
     }
@@ -249,7 +259,7 @@ export async function run(appName: string): Promise<void> {
     if (app && typeof app.func.start === 'function') {
       app.func.start()
     } else {
-      console.log(`App ${appName} not found.`)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `App ${appName} not found.`)
     }
 
     const DeskThing = await getDeskThing(appName)
@@ -270,17 +280,17 @@ export async function run(appName: string): Promise<void> {
       appState.appendManifest(manifest, appName)
     }
 
-    dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `Configuring ${appName}!`)
+    loggingStore.log(MESSAGE_TYPES.LOGGING, `Configuring ${appName}!`)
 
     await setupFunctions(appName, DeskThing)
 
-    dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `Running ${appName}!`)
+    loggingStore.log(MESSAGE_TYPES.LOGGING, `Running ${appName}!`)
     const result = await start(appName)
     if (!result) {
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `App ${appName} failed to start!`)
+      loggingStore.log(MESSAGE_TYPES.ERROR, `App ${appName} failed to start!`)
     }
   } catch (error) {
-    dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `Error running app ${error}`)
+    loggingStore.log(MESSAGE_TYPES.ERROR, `Error running app ${error}`)
     console.error('Error running app:', error)
   }
 }
@@ -296,17 +306,14 @@ export const start = async (appName: string): Promise<boolean> => {
   const appInstance = appState.get(appName)
 
   if (!appInstance || !appInstance.func.start || appInstance.func.start === undefined) {
-    dataListener.asyncEmit(
-      MESSAGE_TYPES.ERROR,
-      `App ${appName} not found. or not started correctly`
-    )
+    loggingStore.log(MESSAGE_TYPES.ERROR, `App ${appName} not found. or not started correctly`)
     return false
   }
   // Check if all required apps are running
   const manifest = appInstance.manifest
 
   if (!manifest) {
-    dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `App ${appName} not found.`)
+    loggingStore.log(MESSAGE_TYPES.ERROR, `App ${appName} not found.`)
     return false
   }
 
@@ -314,7 +321,7 @@ export const start = async (appName: string): Promise<boolean> => {
     const requiredApps = manifest.requires || []
     for (const requiredApp of requiredApps) {
       if (!appState.getOrder().includes(requiredApp) && requiredApp.length > 2) {
-        dataListener.asyncEmit(
+        loggingStore.log(
           MESSAGE_TYPES.ERROR,
           `Unable to run ${appName}! This app requires '${requiredApp}' to be enabled and running.`
         )
@@ -327,20 +334,20 @@ export const start = async (appName: string): Promise<boolean> => {
   try {
     const startResponse: Response = await appInstance.func.start()
     if (startResponse.status == 200) {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.MESSAGE,
         `App ${appName} started successfully with response ${startResponse.data.message}`
       )
       return true
     } else {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         `App ${appName} failed to start with response ${startResponse.data.message}`
       )
       return false
     }
   } catch (error) {
-    dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `Error starting app ${error}`)
+    loggingStore.log(MESSAGE_TYPES.ERROR, `Error starting app ${error}`)
     console.error('Error starting app:', error)
   }
   return false
@@ -360,7 +367,7 @@ const setupFunctions = async (appName: string, DeskThing: DeskThing): Promise<vo
   const listeners: ToClientType[] = []
 
   if (!appInstance) {
-    dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `App ${appName} not found.`)
+    loggingStore.log(MESSAGE_TYPES.ERROR, `App ${appName} not found.`)
     return
   }
 
@@ -370,9 +377,11 @@ const setupFunctions = async (appName: string, DeskThing: DeskThing): Promise<vo
     appInstance.func.start = async (): Promise<Response> => {
       return DeskThing.start({
         toServer: (data) => handleDataFromApp(appName, data),
-        SysEvents: (event: string, listener: (...args: string[]) => void) => {
-          dataListener.on(event, listener) // Add event listener
-          return () => dataListener.removeListener(event, listener)
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        SysEvents: (_event: string, _listener: (...args: string[]) => void) => {
+          return () => {
+            /* do something with this to let apps listen for server events like apps being added or settings being changed */
+          }
         }
       })
     }
@@ -386,7 +395,7 @@ const setupFunctions = async (appName: string, DeskThing: DeskThing): Promise<vo
 
     appState.add(appInstance)
   } catch (error) {
-    dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `Error running app ${error}`)
+    loggingStore.log(MESSAGE_TYPES.ERROR, `Error running app ${error}`)
   }
 }
 
@@ -407,7 +416,7 @@ const handleManifest = async (
     // Manifest not found, searching manually
     const manifestPath = getAppFilePath(appName, 'manifest.json')
     if (!existsSync(manifestPath)) {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         `Manifest for app ${appName} not found at ${manifestPath}`
       )
@@ -426,7 +435,7 @@ const handleManifest = async (
     console.error(
       `Unable to get manifest for ${appName}! Response message: ${manifestResponse.data.message}`
     )
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.ERROR,
       `Unable to get manifest for ${appName}!  Response message: ${manifestResponse.data.message}`
     )
@@ -451,7 +460,7 @@ const getDeskThing = async (appName): Promise<DeskThing | void> => {
   } else if (existsSync(appEntryPointCjs)) {
     appEntryPoint = appEntryPointCjs
   } else {
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.ERROR,
       `Entry point for app ${appName} not found. (Does it have an index.js file?)`
     )
diff --git a/DeskThingServer/src/main/services/apps/appManager.ts b/DeskThingServer/src/main/services/apps/appManager.ts
index 5df36a6..8e1a3ca 100644
--- a/DeskThingServer/src/main/services/apps/appManager.ts
+++ b/DeskThingServer/src/main/services/apps/appManager.ts
@@ -1,6 +1,6 @@
 import { rmSync, readdirSync, statSync, existsSync } from 'node:fs'
-import dataListener, { MESSAGE_TYPES } from '../../utils/events'
-
+import loggingStore from '../../stores/loggingStore'
+import { MESSAGE_TYPES } from '@shared/types'
 export async function clearCache(appName: string): Promise<void> {
   try {
     const { join } = await import('path')
@@ -21,24 +21,41 @@ export async function clearCache(appName: string): Promise<void> {
           const resolvedPath = require.resolve(itemPath)
           if (require.cache[resolvedPath]) {
             delete require.cache[resolvedPath]
-            dataListener.asyncEmit(
-              MESSAGE_TYPES.LOGGING,
-              `SERVER: Removed ${resolvedPath} from cache`
+            loggingStore.log(MESSAGE_TYPES.LOGGING, `SERVER: Removed ${resolvedPath} from cache`)
+          } else {
+            loggingStore.log(MESSAGE_TYPES.LOGGING, `SERVER: ${resolvedPath} not in cache!`)
+          }
+        } catch (error) {
+          if (error instanceof Error) {
+            loggingStore.log(
+              MESSAGE_TYPES.ERROR,
+              `SERVER: Error clearing cache for ${itemPath}:`,
+              error.message
             )
           } else {
-            dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `SERVER: ${resolvedPath} not in cache!`)
+            loggingStore.log(
+              MESSAGE_TYPES.ERROR,
+              `SERVER: Error clearing cache for ${itemPath}:`,
+              String(error)
+            )
           }
-        } catch (e) {
-          dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `SERVER: clearCache Error`, e)
         }
       }
     })
   } catch (error) {
-    dataListener.asyncEmit(
-      MESSAGE_TYPES.LOGGING,
-      `SERVER: Error clearing cache for directory ${appName}:`,
-      error
-    )
+    if (error instanceof Error) {
+      loggingStore.log(
+        MESSAGE_TYPES.ERROR,
+        `SERVER: Error clearing cache for directory ${appName}:`,
+        error.message
+      )
+    } else {
+      loggingStore.log(
+        MESSAGE_TYPES.ERROR,
+        `SERVER: Error clearing cache for directory ${appName}:`,
+        String(error)
+      )
+    }
   }
 }
 
@@ -49,7 +66,7 @@ export async function clearCache(appName: string): Promise<void> {
  */
 export async function purgeApp(appName: string): Promise<void> {
   try {
-    dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `SERVER: Purging App ${appName}`)
+    loggingStore.log(MESSAGE_TYPES.LOGGING, `SERVER: Purging App ${appName}`)
 
     const { purgeAppData } = await import('../../handlers/dataHandler')
     const { purgeAppConfig } = await import('../../handlers/configHandler')
@@ -74,9 +91,9 @@ export async function purgeApp(appName: string): Promise<void> {
     // Remove the file from filesystem
     if (existsSync(dir)) {
       await rmSync(dir, { recursive: true, force: true })
-      console.log(`Purged all data for app ${appName}`)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `Purged all data for app ${appName}`)
     }
-    dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `SERVER: Purged App ${appName}`)
+    loggingStore.log(MESSAGE_TYPES.LOGGING, `SERVER: Purged App ${appName}`)
   } catch (error) {
     console.error(`Error purging app data for ${appName}`, error)
   }
diff --git a/DeskThingServer/src/main/services/apps/appRunner.ts b/DeskThingServer/src/main/services/apps/appRunner.ts
index 9d279db..627ce12 100644
--- a/DeskThingServer/src/main/services/apps/appRunner.ts
+++ b/DeskThingServer/src/main/services/apps/appRunner.ts
@@ -1,4 +1,5 @@
-import dataListener, { MESSAGE_TYPES } from '../../utils/events'
+import loggingStore from '../../stores/loggingStore'
+import { MESSAGE_TYPES } from '@shared/types'
 
 /**
  * Loads and runs all enabled apps from appData.json
@@ -12,12 +13,12 @@ export async function loadAndRunEnabledApps(): Promise<void> {
 
   try {
     const appInstances = appHandler.getAll()
-    dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, 'SERVER: Loaded apps config. Running apps...')
+    loggingStore.log(MESSAGE_TYPES.LOGGING, 'SERVER: Loaded apps config. Running apps...')
     const enabledApps = appInstances.filter((appConfig) => appConfig.enabled === true)
 
     await Promise.all(
       enabledApps.map(async (appConfig) => {
-        dataListener.asyncEmit(
+        loggingStore.log(
           MESSAGE_TYPES.LOGGING,
           `SERVER: Automatically running app ${appConfig.name}`
         )
@@ -29,15 +30,12 @@ export async function loadAndRunEnabledApps(): Promise<void> {
 
     await Promise.all(
       failedApps.map(async (failedApp) => {
-        dataListener.asyncEmit(
-          MESSAGE_TYPES.LOGGING,
-          `SERVER: Attempting to run ${failedApp.name} again`
-        )
+        loggingStore.log(MESSAGE_TYPES.LOGGING, `SERVER: Attempting to run ${failedApp.name} again`)
         await appHandler.run(failedApp.name)
       })
     )
   } catch (error) {
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.ERROR,
       `SERVER: Error loading and running enabled apps: ${error}`
     )
diff --git a/DeskThingServer/src/main/services/apps/appState.ts b/DeskThingServer/src/main/services/apps/appState.ts
index 8707363..2eeae63 100644
--- a/DeskThingServer/src/main/services/apps/appState.ts
+++ b/DeskThingServer/src/main/services/apps/appState.ts
@@ -1,7 +1,6 @@
-import { App, AppInstance, Manifest, AppReturnData } from '@shared/types'
+import { App, AppInstance, Manifest, AppReturnData, MESSAGE_TYPES } from '@shared/types'
 import { sendConfigData, sendSettingsData } from '../client/clientCom'
-import settingsStore from '../../stores/settingsStore'
-import dataListener, { MESSAGE_TYPES } from '../../utils/events'
+import loggingStore from '../../stores/loggingStore'
 
 /**
  * TODO: Sync with the file
@@ -34,7 +33,7 @@ export class AppHandler {
    * Loads the apps from file
    */
   async loadApps(): Promise<void> {
-    console.log('[appState] [loadApps]: Loading apps...')
+    loggingStore.log(MESSAGE_TYPES.LOGGING, '[appState] [loadApps]: Loading apps...')
     const { getAppData } = await import('../../handlers/configHandler')
 
     const data = await getAppData()
@@ -302,20 +301,6 @@ export class AppHandler {
     // Add the manifest to the config file
     addAppManifest(manifest, appName)
     this.saveAppToFile(appName)
-
-    const checkForSettings = async (): Promise<void> => {
-      const settings = await settingsStore.getSettings()
-      const playbackLocation = settings.playbackLocation
-      if (playbackLocation === 'none' || !playbackLocation) {
-        settingsStore.updateSetting('playbackLocation', appName)
-        dataListener.asyncEmit(
-          MESSAGE_TYPES.LOGGING,
-          '[appState][addAppManifest]: Setting playbackLocation to ' + appName
-        )
-      }
-    }
-
-    checkForSettings()
   }
 }
 
diff --git a/DeskThingServer/src/main/services/apps/appUtils.ts b/DeskThingServer/src/main/services/apps/appUtils.ts
index 3999ffa..272249d 100644
--- a/DeskThingServer/src/main/services/apps/appUtils.ts
+++ b/DeskThingServer/src/main/services/apps/appUtils.ts
@@ -1,7 +1,7 @@
-import { Manifest } from '@shared/types'
+import { Manifest, MESSAGE_TYPES } from '@shared/types'
 import { join } from 'path'
 import { existsSync, promises } from 'node:fs'
-import dataListener, { MESSAGE_TYPES } from '../../utils/events'
+import loggingStore from '../../stores/loggingStore'
 import { app } from 'electron'
 
 let devAppPath: string
@@ -16,7 +16,7 @@ let devAppPath: string
  */
 export async function getManifest(fileLocation: string): Promise<Manifest | undefined> {
   try {
-    console.log('[getManifest] Getting manifest for app')
+    loggingStore.log(MESSAGE_TYPES.LOGGING, '[getManifest] Getting manifest for app')
     const manifestPath = join(fileLocation, 'manifest.json')
     if (!existsSync(manifestPath)) {
       throw new Error('manifest.json not found after extraction')
@@ -39,7 +39,7 @@ export async function getManifest(fileLocation: string): Promise<Manifest | unde
       homepage: parsedManifest.homepage || undefined,
       repository: parsedManifest.repository || undefined
     }
-    console.log('[getManifest] Successfully got manifest for app')
+    loggingStore.log(MESSAGE_TYPES.LOGGING, '[getManifest] Successfully got manifest for app')
     return returnData
   } catch (error) {
     console.error('Error getting manifest:', error)
@@ -60,10 +60,7 @@ export function getAppFilePath(appName: string, fileName: string = '/'): string
     if (devAppPath) {
       path = join(devAppPath, fileName)
     } else {
-      dataListener.asyncEmit(
-        MESSAGE_TYPES.ERROR,
-        'Developer app path not set! (Expected if on startup)'
-      )
+      loggingStore.log(MESSAGE_TYPES.ERROR, 'Developer app path not set! (Expected if on startup)')
     }
   } else {
     path = join(app.getPath('userData'), 'apps', appName, fileName)
diff --git a/DeskThingServer/src/main/services/client/clientCom.ts b/DeskThingServer/src/main/services/client/clientCom.ts
index 9b2eaa5..3b392e1 100644
--- a/DeskThingServer/src/main/services/client/clientCom.ts
+++ b/DeskThingServer/src/main/services/client/clientCom.ts
@@ -1,13 +1,13 @@
-import { SocketData } from '@shared/types'
+import { SocketData, MESSAGE_TYPES } from '@shared/types'
 import { server, Clients } from './websocket'
-import dataListener, { MESSAGE_TYPES } from '../../utils/events'
+import loggingStore from '../../stores/loggingStore'
 import connectionsStore from '../../stores/connectionsStore'
 import appState from '../apps/appState'
 import { readData } from '../../handlers/dataHandler'
 import keyMapStore from '../../stores/keyMapStore'
 
 export const sendMessageToClients = async (data: SocketData): Promise<void> => {
-  console.log(`Sending message to clients: ${JSON.stringify(data)}`)
+  loggingStore.log(MESSAGE_TYPES.LOGGING, `Sending message to clients: ${JSON.stringify(data)}`)
   if (server) {
     server.clients.forEach((client) => {
       if (client.readyState === 1) {
@@ -15,7 +15,7 @@ export const sendMessageToClients = async (data: SocketData): Promise<void> => {
       }
     })
   } else {
-    dataListener.emit(MESSAGE_TYPES.LOGGING, 'WSOCKET: No server running - setting one up')
+    loggingStore.log(MESSAGE_TYPES.LOGGING, 'WSOCKET: No server running - setting one up')
   }
 }
 
@@ -25,10 +25,13 @@ export const disconnectClient = (connectionId: string): void => {
   if (client && server) {
     client.socket.terminate()
     Clients.splice(Clients.indexOf(client), 1)
-    console.log(`Forcibly disconnected client: ${connectionId}`)
+    loggingStore.log(MESSAGE_TYPES.LOGGING, `Forcibly disconnected client: ${connectionId}`)
     connectionsStore.removeClient(connectionId)
   } else {
-    console.log(`Client not found or server not running: ${connectionId}`)
+    loggingStore.log(
+      MESSAGE_TYPES.LOGGING,
+      `Client not found or server not running: ${connectionId}`
+    )
   }
 }
 
@@ -58,7 +61,7 @@ export const sendConfigData = async (clientId?: string): Promise<void> => {
 
     sendMessageToClient(clientId, { app: 'client', type: 'config', payload: filteredAppData })
 
-    console.log('WSOCKET: Preferences sent!')
+    loggingStore.log(MESSAGE_TYPES.LOGGING, 'WSOCKET: Preferences sent!')
   } catch (error) {
     console.error('WSOCKET: Error getting config data:', error)
     sendError(clientId, 'WSOCKET: Error getting config data')
@@ -89,7 +92,7 @@ export const sendSettingsData = async (clientId?: string): Promise<void> => {
     }
 
     sendMessageToClient(clientId, { app: 'client', type: 'settings', payload: settings })
-    console.log('WSOCKET: Preferences sent!')
+    loggingStore.log(MESSAGE_TYPES.LOGGING, 'WSOCKET: Preferences sent!')
   } catch (error) {
     console.error('WSOCKET: Error getting config data:', error)
     sendError(clientId, 'WSOCKET: Error getting config data')
@@ -102,8 +105,8 @@ export const sendMappings = async (clientId?: string): Promise<void> => {
 
     sendMessageToClient(clientId, { app: 'client', type: 'button_mappings', payload: mappings })
 
-    console.log('WSOCKET: Button mappings sent!')
-    dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `WEBSOCKET: Client has been sent button maps!`)
+    loggingStore.log(MESSAGE_TYPES.LOGGING, 'WSOCKET: Button mappings sent!')
+    loggingStore.log(MESSAGE_TYPES.LOGGING, `WEBSOCKET: Client has been sent button maps!`)
   } catch (error) {
     console.error('WSOCKET: Error getting button mappings:', error)
     sendError(clientId, 'WSOCKET: Error getting button mappings')
diff --git a/DeskThingServer/src/main/services/client/clientUtils.ts b/DeskThingServer/src/main/services/client/clientUtils.ts
index 67a4cf1..f84c693 100644
--- a/DeskThingServer/src/main/services/client/clientUtils.ts
+++ b/DeskThingServer/src/main/services/client/clientUtils.ts
@@ -30,7 +30,6 @@ export const sendTime = async (): Promise<void> => {
   const formattedMinutes = minutes < 10 ? '0' + minutes : minutes
   const time = `${formattedHours}:${formattedMinutes} ${ampm}`
   sendMessageToClients({ app: 'client', type: 'time', payload: time })
-  console.log(time)
 }
 
 const initializeTimer = async (): Promise<void> => {
diff --git a/DeskThingServer/src/main/services/client/expressServer.ts b/DeskThingServer/src/main/services/client/expressServer.ts
index 9cd4cf4..4b4101b 100644
--- a/DeskThingServer/src/main/services/client/expressServer.ts
+++ b/DeskThingServer/src/main/services/client/expressServer.ts
@@ -1,4 +1,5 @@
-import dataListener, { MESSAGE_TYPES } from '../../utils/events'
+import loggingStore from '../../stores/loggingStore'
+import { MESSAGE_TYPES } from '@shared/types'
 import { app as electronApp } from 'electron'
 import { join } from 'path'
 import { getAppFilePath } from '../apps'
@@ -24,11 +25,14 @@ export const setupExpressServer = async (expressApp: express.Application): Promi
   ): void => {
     const userDataPath = electronApp.getPath('userData')
     const webAppDir = join(userDataPath, 'webapp')
-    dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `WEBSOCKET: Serving ${appName} from ${webAppDir}`)
+    loggingStore.log(MESSAGE_TYPES.LOGGING, `WEBSOCKET: Serving ${appName} from ${webAppDir}`)
 
     const clientIp = req.hostname
 
-    console.log(`WEBSOCKET: Serving ${appName} from ${webAppDir} to ${clientIp}`)
+    loggingStore.log(
+      MESSAGE_TYPES.LOGGING,
+      `WEBSOCKET: Serving ${appName} from ${webAppDir} to ${clientIp}`
+    )
     try {
       if (req.path.endsWith('manifest.js')) {
         const manifestPath = join(webAppDir, 'manifest.js')
@@ -71,7 +75,7 @@ export const setupExpressServer = async (expressApp: express.Application): Promi
       handleClientConnection(appName, req, res, next)
     } else {
       const appPath = getAppFilePath(appName)
-      dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `WEBSOCKET: Serving ${appName} from ${appPath}`)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `WEBSOCKET: Serving ${appName} from ${appPath}`)
 
       if (fs.existsSync(appPath)) {
         express.static(appPath)(req, res, next)
@@ -87,7 +91,7 @@ export const setupExpressServer = async (expressApp: express.Application): Promi
     const appName = req.params.appName
     if (iconName != null) {
       const appPath = getAppFilePath(appName)
-      dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `WEBSOCKET: Serving ${appName} from ${appPath}`)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `WEBSOCKET: Serving ${appName} from ${appPath}`)
 
       if (fs.existsSync(join(appPath, 'icons', iconName))) {
         express.static(join(appPath, 'icons'))(req, res, next)
@@ -103,7 +107,7 @@ export const setupExpressServer = async (expressApp: express.Application): Promi
     const appName = req.params.appName
     if (imageName != null) {
       const appPath = getAppFilePath(appName)
-      dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `WEBSOCKET: Serving ${appName} from ${appPath}`)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `WEBSOCKET: Serving ${appName} from ${appPath}`)
 
       if (fs.existsSync(join(appPath, 'images', imageName))) {
         express.static(join(appPath, 'icons'))(req, res, next)
@@ -117,10 +121,7 @@ export const setupExpressServer = async (expressApp: express.Application): Promi
   expressApp.use('/fetch/:url(*)', async (req, res) => {
     try {
       const url = decodeURIComponent(req.params.url)
-      dataListener.asyncEmit(
-        MESSAGE_TYPES.LOGGING,
-        `WEBSOCKET: Fetching external resource from ${url}`
-      )
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `WEBSOCKET: Fetching external resource from ${url}`)
 
       const response = await fetch(url)
       const contentType = response.headers.get('content-type')
@@ -133,7 +134,7 @@ export const setupExpressServer = async (expressApp: express.Application): Promi
       }
     } catch (error) {
       if (error instanceof Error) {
-        dataListener.asyncEmit(
+        loggingStore.log(
           MESSAGE_TYPES.LOGGING,
           `WEBSOCKET: Error fetching external resource: ${error.message}`
         )
diff --git a/DeskThingServer/src/main/services/client/websocket.ts b/DeskThingServer/src/main/services/client/websocket.ts
index d5b1cca..592ad86 100644
--- a/DeskThingServer/src/main/services/client/websocket.ts
+++ b/DeskThingServer/src/main/services/client/websocket.ts
@@ -1,7 +1,14 @@
 import WebSocket, { WebSocketServer } from 'ws'
 import { createServer, Server as HttpServer, IncomingMessage } from 'http'
-import dataListener, { MESSAGE_TYPES } from '../../utils/events'
-import { AppDataInterface, Client, ClientManifest, Settings, SocketData } from '@shared/types'
+import loggingStore from '../../stores/loggingStore'
+import {
+  AppDataInterface,
+  MESSAGE_TYPES,
+  Client,
+  ClientManifest,
+  Settings,
+  SocketData
+} from '@shared/types'
 import { addData } from '../../handlers/dataHandler'
 import { HandleDeviceData } from '../../handlers/deviceHandler'
 import settingsStore from '../../stores/settingsStore'
@@ -36,8 +43,8 @@ const THROTTLE_DELAY = 100 // milliseconds
 export const restartServer = async (): Promise<void> => {
   try {
     if (server) {
-      console.log('WSOCKET: Shutting down the WebSocket server...')
-      dataListener.emit(MESSAGE_TYPES.LOGGING, 'WSOCKET: Shutting down the WebSocket server...')
+      loggingStore.log(MESSAGE_TYPES.LOGGING, 'WSOCKET: Shutting down the WebSocket server...')
+      loggingStore.log(MESSAGE_TYPES.LOGGING, 'WSOCKET: Shutting down the WebSocket server...')
       ConnectionStore.removeAllClients()
 
       server.clients.forEach((client) => {
@@ -47,25 +54,28 @@ export const restartServer = async (): Promise<void> => {
       server.close((err) => {
         if (err) {
           console.error('WSOCKET: Error shutting down WebSocket server:', err)
-          dataListener.emit(
+          loggingStore.log(
             MESSAGE_TYPES.ERROR,
             'WSOCKET: Error shutting down WebSocket server:' + err
           )
         } else {
-          console.log('WSOCKET: WebSocket server shut down successfully.')
-          dataListener.emit(
+          loggingStore.log(
+            MESSAGE_TYPES.LOGGING,
+            'WSOCKET: WebSocket server shut down successfully.'
+          )
+          loggingStore.log(
             MESSAGE_TYPES.LOGGING,
             'WSOCKET: WebSocket server shut down successfully.'
           )
         }
 
         if (httpServer && httpServer.listening) {
-          console.log('WSOCKET: Stopping HTTP server...')
+          loggingStore.log(MESSAGE_TYPES.LOGGING, 'WSOCKET: Stopping HTTP server...')
           httpServer.close((err) => {
             if (err) {
               console.error('WSOCKET: Error stopping HTTP server:', err)
             } else {
-              console.log('WSOCKET: HTTP server stopped successfully.')
+              loggingStore.log(MESSAGE_TYPES.LOGGING, 'WSOCKET: HTTP server stopped successfully.')
               setupServer()
             }
           })
@@ -74,14 +84,17 @@ export const restartServer = async (): Promise<void> => {
         }
       })
     } else {
-      console.log('WSOCKET: No WebSocket server running - setting one up')
+      loggingStore.log(
+        MESSAGE_TYPES.LOGGING,
+        'WSOCKET: No WebSocket server running - setting one up'
+      )
       if (httpServer && httpServer.listening) {
-        console.log('WSOCKET: Stopping HTTP server...')
+        loggingStore.log(MESSAGE_TYPES.LOGGING, 'WSOCKET: Stopping HTTP server...')
         httpServer.close((err) => {
           if (err) {
             console.error('WSOCKET: Error stopping HTTP server:', err)
           } else {
-            console.log('WSOCKET: HTTP server stopped successfully.')
+            loggingStore.log(MESSAGE_TYPES.LOGGING, 'WSOCKET: HTTP server stopped successfully.')
             setupServer()
           }
         })
@@ -95,7 +108,7 @@ export const restartServer = async (): Promise<void> => {
 }
 
 export const setupServer = async (): Promise<void> => {
-  dataListener.asyncEmit(MESSAGE_TYPES.MESSAGE, 'WSOCKET: Attempting to setup the server')
+  loggingStore.log(MESSAGE_TYPES.MESSAGE, 'WSOCKET: Attempting to setup the server')
 
   if (!currentPort || !currentAddress) {
     const settings = await settingsStore.getSettings()
@@ -112,11 +125,10 @@ export const setupServer = async (): Promise<void> => {
 
   server = new WebSocketServer({ server: httpServer })
 
-  console.log('WSOCKET: WebSocket server is running.')
+  loggingStore.log(MESSAGE_TYPES.LOGGING, 'WSOCKET: WebSocket server is running.')
 
   httpServer.listen(currentPort, currentAddress, () => {
-    console.log(`CALLBACK: Server listening on ${currentAddress}:${currentPort}`)
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.LOGGING,
       `WEBSOCKET: Server is listening on ${currentAddress}:${currentPort}`
     )
@@ -130,7 +142,10 @@ export const setupServer = async (): Promise<void> => {
     const clientIp = socket._socket.remoteAddress
 
     // Setup the initial client data
-    console.log(`WSOCKET: Client connected! Looking for client with IP ${clientIp}`)
+    loggingStore.log(
+      MESSAGE_TYPES.LOGGING,
+      `WSOCKET: Client connected! Looking for client with IP ${clientIp}`
+    )
 
     // Local client that is the true source of truth for the device details
     const client: Client = {
@@ -145,13 +160,17 @@ export const setupServer = async (): Promise<void> => {
 
     Clients.push({ client, socket })
 
-    console.log(
+    loggingStore.log(
+      MESSAGE_TYPES.LOGGING,
       `WSOCKET: Client with id: ${client.connectionId} connected!\nWSOCKET: Sending preferences...`
     )
     ConnectionStore.addClient(client)
 
-    console.log('WSOCKET: Client connected!\nWSOCKET: Sending preferences...')
-    dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `WEBSOCKET: Sending client preferences...`)
+    loggingStore.log(
+      MESSAGE_TYPES.LOGGING,
+      'WSOCKET: Client connected!\nWSOCKET: Sending preferences...'
+    )
+    loggingStore.log(MESSAGE_TYPES.LOGGING, `WEBSOCKET: Sending client preferences...`)
 
     sendConfigData(client.connectionId)
     sendSettingsData(client.connectionId)
@@ -160,8 +179,7 @@ export const setupServer = async (): Promise<void> => {
 
     socket.on('message', async (message) => {
       const messageData = JSON.parse(message) as SocketData
-      console.log(`WSOCKET: ${client.connectionId} sent message `, messageData)
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.LOGGING,
         `WEBSOCKET: Client ${client.connectionId} has sent ${message}`
       )
@@ -207,7 +225,7 @@ export const setupServer = async (): Promise<void> => {
     })
 
     socket.on('close', () => {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.LOGGING,
         `WSOCKET: Client ${client.connectionId} has disconnected!`
       )
@@ -223,7 +241,10 @@ export const setupServer = async (): Promise<void> => {
 const handleServerMessage = (socket, client: Client, messageData: SocketData): void => {
   try {
     if (messageData.app === 'server') {
-      console.log(`WSOCKET: Server message received! ${messageData.type}`)
+      loggingStore.log(
+        MESSAGE_TYPES.LOGGING,
+        `WSOCKET: Server message received! ${messageData.type}`
+      )
       try {
         switch (messageData.type) {
           case 'preferences':
@@ -241,7 +262,7 @@ const handleServerMessage = (socket, client: Client, messageData: SocketData): v
             )
             break
           case 'pong':
-            console.log('Received pong from ', client.connectionId)
+            loggingStore.log(MESSAGE_TYPES.LOGGING, 'Received pong from ', client.connectionId)
             sendIpcData(`pong-${client.connectionId}`, messageData.payload)
             break
           case 'set':
@@ -266,7 +287,7 @@ const handleServerMessage = (socket, client: Client, messageData: SocketData): v
             sendTime()
             break
           case 'message':
-            dataListener.asyncEmit(
+            loggingStore.log(
               MESSAGE_TYPES.MESSAGE,
               `${client.connectionId}: ${messageData.payload}`
             )
@@ -279,7 +300,10 @@ const handleServerMessage = (socket, client: Client, messageData: SocketData): v
               const manifest = messageData.payload as ClientManifest
               if (!manifest) return
 
-              console.log('WSOCKET: Received manifest from client', manifest)
+              loggingStore.log(
+                MESSAGE_TYPES.LOGGING,
+                'WSOCKET: Received manifest from client' + JSON.stringify(manifest)
+              )
 
               // Update the client to the info received from the client
 
@@ -313,10 +337,10 @@ const handleServerMessage = (socket, client: Client, messageData: SocketData): v
   }
 }
 
-dataListener.on(MESSAGE_TYPES.SETTINGS, (newSettings: Settings) => {
+settingsStore.addListener((newSettings: Settings) => {
   if (currentPort !== newSettings.devicePort || currentAddress !== newSettings.address) {
     restartServer()
   } else {
-    dataListener.emit(MESSAGE_TYPES.LOGGING, 'WSOCKET: No settings changed!')
+    loggingStore.log(MESSAGE_TYPES.LOGGING, 'WSOCKET: No settings changed!')
   }
 })
diff --git a/DeskThingServer/src/main/static/defaultMapping.ts b/DeskThingServer/src/main/static/defaultMapping.ts
index 9add34c..46e2244 100644
--- a/DeskThingServer/src/main/static/defaultMapping.ts
+++ b/DeskThingServer/src/main/static/defaultMapping.ts
@@ -103,12 +103,7 @@ const keys: Key[] = [
     description: 'Physical Button Scroll',
     version: '0.9.0',
     enabled: true,
-    Modes: [
-      EventMode.ScrollUp,
-      EventMode.ScrollDown,
-      EventMode.ScrollLeft,
-      EventMode.ScrollRight
-    ]
+    Modes: [EventMode.ScrollUp, EventMode.ScrollDown, EventMode.ScrollLeft, EventMode.ScrollRight]
   },
   {
     id: 'Enter',
@@ -132,12 +127,7 @@ const keys: Key[] = [
     description: 'Touchpad Swipe Button',
     version: '0.9.0',
     enabled: true,
-    Modes: [
-      EventMode.ScrollUp,
-      EventMode.ScrollDown,
-      EventMode.ScrollLeft,
-      EventMode.ScrollRight
-    ]
+    Modes: [EventMode.ScrollUp, EventMode.ScrollDown, EventMode.ScrollLeft, EventMode.ScrollRight]
   },
   {
     id: 'Pad1',
diff --git a/DeskThingServer/src/main/stores/connectionsStore.ts b/DeskThingServer/src/main/stores/connectionsStore.ts
index d69aab8..3fcfc19 100644
--- a/DeskThingServer/src/main/stores/connectionsStore.ts
+++ b/DeskThingServer/src/main/stores/connectionsStore.ts
@@ -1,6 +1,6 @@
-import { Client } from '@shared/types'
+import { Client, MESSAGE_TYPES } from '@shared/types'
 import { handleAdbCommands } from '../handlers/adbHandler'
-import dataListener, { MESSAGE_TYPES } from '../utils/events'
+import loggingStore from '../stores/loggingStore'
 import settingsStore from './settingsStore'
 
 type ClientListener = (client: Client[]) => void
@@ -20,7 +20,7 @@ class ConnectionStore {
       this.autoDetectADB = settings.autoDetectADB
     })
 
-    dataListener.on(MESSAGE_TYPES.SETTINGS, (newSettings) => {
+    settingsStore.addListener((newSettings) => {
       try {
         if (newSettings.autoDetectADB !== undefined) {
           this.autoDetectADB = newSettings.autoDetectADB
@@ -31,14 +31,18 @@ class ConnectionStore {
 
           if (newSettings.autoDetectADB) {
             this.checkAutoDetectADB()
-            dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, '[ADB]: Auto-Detect is Enabled')
+            loggingStore.log(MESSAGE_TYPES.LOGGING, '[ADB]: Auto-Detect is Enabled')
           } else {
-            console.log('Auto-detect ADB disabled')
-            dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, '[ADB]: Auto-Detect is Disabled')
+            loggingStore.log(MESSAGE_TYPES.LOGGING, 'Auto-detect ADB disabled')
+            loggingStore.log(MESSAGE_TYPES.LOGGING, '[ADB]: Auto-Detect is Disabled')
           }
         }
       } catch (error) {
-        dataListener.asyncEmit(MESSAGE_TYPES.ERROR, 'ADB: Error updating with settings', error)
+        if (error instanceof Error) {
+          loggingStore.log(MESSAGE_TYPES.ERROR, 'ADB: Error updating with settings', error.message)
+        } else {
+          loggingStore.log(MESSAGE_TYPES.ERROR, 'ADB: Error updating with settings', String(error))
+        }
       }
     })
 
@@ -70,7 +74,7 @@ class ConnectionStore {
   }
 
   pingClient(connectionId: string): boolean {
-    console.log('Pinging client:', connectionId)
+    loggingStore.log(MESSAGE_TYPES.LOGGING, 'Pinging client:', connectionId)
     const clientIndex = this.clients.findIndex((c) => c.connectionId === connectionId)
     console.error('PINGING CLIENTS NOT IMPLEMENTED YET')
     if (clientIndex !== -1) {
@@ -81,41 +85,38 @@ class ConnectionStore {
   }
 
   getClients(): Client[] {
-    console.log('Getting clients:', this.clients)
     return this.clients
   }
 
   getDevices(): string[] {
-    console.log('Getting devices:', this.devices)
     return this.devices
   }
 
   addClient(client: Client): void {
-    console.log('Adding client:', client)
     this.clients.push(client)
     this.notifyListeners()
   }
 
   updateClient(connectionId: string, updates: Partial<Client>): void {
-    console.log('Updating client:', connectionId, updates)
+    loggingStore.log(MESSAGE_TYPES.LOGGING, 'Updating client:' + connectionId + updates)
     const clientIndex = this.clients.findIndex((c) => c.connectionId === connectionId)
 
     if (clientIndex !== -1) {
       this.clients[clientIndex] = { ...this.clients[clientIndex], ...updates }
       this.notifyListeners()
     } else {
-      console.log('Client not found:', connectionId)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, 'Client not found:', connectionId)
     }
   }
 
   removeClient(connectionId: string): void {
-    console.log('Removing client:', connectionId)
+    loggingStore.log(MESSAGE_TYPES.LOGGING, 'Removing client:' + connectionId)
     this.clients = this.clients.filter((c) => c.connectionId !== connectionId)
     this.notifyListeners()
   }
 
   removeAllClients(): void {
-    console.log('Removing all clients')
+    loggingStore.log(MESSAGE_TYPES.LOGGING, 'Removing all clients')
     this.clients = []
     this.notifyListeners()
   }
@@ -142,7 +143,7 @@ class ConnectionStore {
         const newDevices = parseADBDevices(result) || []
         this.devices = newDevices
         this.notifyDeviceListeners()
-        dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, 'ADB Device found!')
+        loggingStore.log(MESSAGE_TYPES.LOGGING, 'ADB Device found!')
         return newDevices
       })
       .catch((error) => {
@@ -158,7 +159,7 @@ class ConnectionStore {
 
     const checkAndAutoDetect = async (): Promise<void> => {
       if (this.autoDetectADB === true) {
-        console.log('Auto-detecting ADB devices...')
+        loggingStore.log(MESSAGE_TYPES.LOGGING, 'Auto-detecting ADB devices...')
         await this.getAdbDevices()
         this.clearTimeout = await setTimeout(checkAndAutoDetect, 7000)
       }
diff --git a/DeskThingServer/src/main/stores/keyMapStore.ts b/DeskThingServer/src/main/stores/keyMapStore.ts
index c6e4eb3..b3ccb41 100644
--- a/DeskThingServer/src/main/stores/keyMapStore.ts
+++ b/DeskThingServer/src/main/stores/keyMapStore.ts
@@ -1,6 +1,13 @@
 import { defaultData } from '../static/defaultMapping'
-import { Action, ButtonMapping, EventMode, Key, MappingStructure } from '@shared/types'
-import dataListener, { MESSAGE_TYPES } from '../utils/events'
+import {
+  Action,
+  ButtonMapping,
+  MESSAGE_TYPES,
+  EventMode,
+  Key,
+  MappingStructure
+} from '@shared/types'
+import loggingStore from '../stores/loggingStore'
 import {
   readFromFile,
   readFromGlobalFile,
@@ -50,7 +57,7 @@ export class MappingState {
   private loadMappings(): MappingStructure {
     const data = readFromFile('mappings.json') as MappingStructure
     if (!data || data?.version !== defaultData.version) {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         `MAPHANDLER: Mappings file is corrupt or does not exist, using default`
       )
@@ -59,7 +66,7 @@ export class MappingState {
     }
     const parsedData = data as MappingStructure
     if (!this.isValidFileStructure(parsedData)) {
-      dataListener.emit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         `MAPHANDLER: Mappings file is corrupt, resetting to default`
       )
@@ -73,7 +80,7 @@ export class MappingState {
     if (this.isValidFileStructure(mapping)) {
       writeToFile(mapping, 'mappings.json')
     } else {
-      dataListener.emit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         `MAPHANDLER: New Mappings file is corrupt, resetting to default`
       )
@@ -192,15 +199,10 @@ export class MappingState {
    * @param Mode - default is 'onPress'
    * @param profile - default is 'default'
    */
-  addButton = (
-    action: Action,
-    key: string,
-    Mode: EventMode,
-    profile: string = 'default'
-  ): void => {
+  addButton = (action: Action, key: string, Mode: EventMode, profile: string = 'default'): void => {
     const mappings = this.mappings
     if (!mappings[profile]) {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         `MAPHANDLER: Profile ${profile} does not exist! Create a new profile with the name ${profile} and try again`
       )
@@ -211,7 +213,7 @@ export class MappingState {
     }
     // Ensure that the structure of the button is valid
     if (!this.isValidAction(action)) {
-      dataListener.emit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         `MAPHANDLER: Action ${action.id} is invalid, cannot add to mapping`
       )
@@ -234,7 +236,7 @@ export class MappingState {
   removeButton = (key: string, Mode: EventMode | null, profile: string = 'default'): void => {
     const mappings = this.mappings
     if (!mappings[profile]) {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         `MAPHANDLER: Profile ${profile} does not exist! Create a new profile with the name ${profile} and try again`
       )
@@ -242,7 +244,7 @@ export class MappingState {
     }
     // Ensuring the key exists in the mapping
     if (!mappings[profile][key]) {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         `MAPHANDLER: Key ${key} does not exist in profile ${profile}!`
       )
@@ -252,14 +254,14 @@ export class MappingState {
     if (Mode === null) {
       // Remove the entire key
       delete mappings[profile][key]
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.LOGGING,
         `MAPHANDLER: Key ${key} removed from profile ${profile}`
       )
     } else {
       // Ensure that the Mode exists in the mapping
       if (!mappings[profile][key][Mode]) {
-        dataListener.asyncEmit(
+        loggingStore.log(
           MESSAGE_TYPES.ERROR,
           `MAPHANDLER: Mode ${Mode} does not exist in key ${key} in profile ${profile}!`
         )
@@ -271,7 +273,7 @@ export class MappingState {
 
     // Save the mappings to file
     this.mappings = mappings
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.LOGGING,
       `MAPHANDLER: Button ${key} removed from profile ${profile}`
     )
@@ -281,7 +283,7 @@ export class MappingState {
     const mappings = this.mappings
     // Validate key structure
     if (!this.isValidKey(key)) {
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `MAPHANDLER: Invalid key structure`)
+      loggingStore.log(MESSAGE_TYPES.ERROR, `MAPHANDLER: Invalid key structure`)
       return
     }
     // Check if the key already exists
@@ -289,11 +291,11 @@ export class MappingState {
     if (existingKeyIndex !== -1) {
       // Replace the existing key
       mappings.keys[existingKeyIndex] = key
-      dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `MAPHANDLER: Key ${key.id} updated`)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `MAPHANDLER: Key ${key.id} updated`)
     } else {
       // Add the new key
       mappings.keys.push(key)
-      dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `MAPHANDLER: Key ${key.id} added`)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `MAPHANDLER: Key ${key.id} added`)
     }
     // Save the mappings
     this.mappings = mappings
@@ -306,9 +308,9 @@ export class MappingState {
     if (keyIndex !== -1) {
       // Remove the key
       mappings.keys.splice(keyIndex, 1)
-      dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `MAPHANDLER: Key ${keyId} removed`)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `MAPHANDLER: Key ${keyId} removed`)
     } else {
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `MAPHANDLER: Key ${keyId} not found`)
+      loggingStore.log(MESSAGE_TYPES.ERROR, `MAPHANDLER: Key ${keyId} not found`)
     }
     // Save the mappings
     this.mappings = mappings
@@ -323,7 +325,7 @@ export class MappingState {
     const mappings = this.mappings
     // Validate action structure
     if (!this.isValidAction(action)) {
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `MAPHANDLER: Invalid action structure`)
+      loggingStore.log(MESSAGE_TYPES.ERROR, `MAPHANDLER: Invalid action structure`)
       return
     }
     // Check if the action already exists
@@ -331,11 +333,11 @@ export class MappingState {
     if (existingActionIndex !== -1) {
       // Replace the existing action
       mappings.actions[existingActionIndex] = action
-      dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `MAPHANDLER: Action ${action.id} updated`)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `MAPHANDLER: Action ${action.id} updated`)
     } else {
       // Add the new action
       mappings.actions.push(action)
-      dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `MAPHANDLER: Action ${action.id} added`)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `MAPHANDLER: Action ${action.id} added`)
     }
     // Save the mappings
     this.mappings = mappings
@@ -348,9 +350,9 @@ export class MappingState {
     if (actionIndex !== -1) {
       // Remove the action
       mappings.actions.splice(actionIndex, 1)
-      dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `MAPHANDLER: Action ${actionId} removed`)
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `MAPHANDLER: Action ${actionId} removed`)
     } else {
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `MAPHANDLER: Action ${actionId} not found`)
+      loggingStore.log(MESSAGE_TYPES.ERROR, `MAPHANDLER: Action ${actionId} not found`)
     }
     // Save the mappings
     this.mappings = mappings
@@ -385,7 +387,7 @@ export class MappingState {
     // Remove keys with the specified source
     mappings.keys = mappings.keys.filter((key) => key.source !== sourceId)
 
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.LOGGING,
       `MAPHANDLER: Actions for source ${sourceId} disabled in all profiles, global actions, and keys`
     )
@@ -427,7 +429,7 @@ export class MappingState {
       }
     })
 
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.LOGGING,
       `MAPHANDLER: Actions for source ${sourceId} disabled in all profiles, global actions, and keys`
     )
@@ -443,12 +445,9 @@ export class MappingState {
     if (actionIndex !== -1) {
       // Update the icon
       mappings.actions[actionIndex].icon = icon
-      dataListener.asyncEmit(
-        MESSAGE_TYPES.LOGGING,
-        `MAPHANDLER: Icon for action ${actionId} updated`
-      )
+      loggingStore.log(MESSAGE_TYPES.LOGGING, `MAPHANDLER: Icon for action ${actionId} updated`)
     } else {
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `MAPHANDLER: Action ${actionId} not found`)
+      loggingStore.log(MESSAGE_TYPES.ERROR, `MAPHANDLER: Action ${actionId} not found`)
     }
 
     // Update the icon for all actions inside the current profile
@@ -476,7 +475,7 @@ export class MappingState {
       // Update the icon
       return mappings.actions[actionIndex]
     } else {
-      dataListener.asyncEmit(MESSAGE_TYPES.ERROR, `MAPHANDLER: Action ${actionId} not found`)
+      loggingStore.log(MESSAGE_TYPES.ERROR, `MAPHANDLER: Action ${actionId} not found`)
       return null
     }
   }
@@ -492,7 +491,7 @@ export class MappingState {
     if (this.mappings.profiles[profile]) {
       this.mappings.selected_profile = profile
     } else {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         `MAPHANDLER: Profile ${profile} does not exist! Create a new profile with the name ${profile} and try again`
       )
@@ -513,16 +512,13 @@ export class MappingState {
 
     // Check if the profile name already exists
     if (mappings.profiles[profileName]) {
-      dataListener.asyncEmit(
-        MESSAGE_TYPES.ERROR,
-        `MAPHANDLER: Profile "${profileName}" already exists!`
-      )
+      loggingStore.log(MESSAGE_TYPES.ERROR, `MAPHANDLER: Profile "${profileName}" already exists!`)
       return
     }
 
     // Ensure the base profile exists
     if (!mappings.profiles[baseProfile]) {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         `MAPHANDLER: Base profile "${baseProfile}" does not exist!`
       )
@@ -549,7 +545,7 @@ export class MappingState {
     // Save the updated mappings
     this.mappings = mappings
 
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.LOGGING,
       `MAPHANDLER: Profile "${profileName}" added successfully.`
     )
@@ -564,19 +560,13 @@ export class MappingState {
 
     // Prevent removal of the default profile
     if (profileName === 'default') {
-      dataListener.asyncEmit(
-        MESSAGE_TYPES.ERROR,
-        `MAPHANDLER: The "default" profile cannot be removed.`
-      )
+      loggingStore.log(MESSAGE_TYPES.ERROR, `MAPHANDLER: The "default" profile cannot be removed.`)
       return
     }
 
     // Check if the profile exists
     if (!mappings.profiles[profileName]) {
-      dataListener.asyncEmit(
-        MESSAGE_TYPES.ERROR,
-        `MAPHANDLER: Profile "${profileName}" does not exist!`
-      )
+      loggingStore.log(MESSAGE_TYPES.ERROR, `MAPHANDLER: Profile "${profileName}" does not exist!`)
       return
     }
 
@@ -586,7 +576,7 @@ export class MappingState {
     // If the removed profile was the selected profile, revert to default
     if (mappings.selected_profile === profileName) {
       mappings.selected_profile = 'default'
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.LOGGING,
         `MAPHANDLER: Selected profile was removed. Reverted to "default" profile.`
       )
@@ -595,7 +585,7 @@ export class MappingState {
     // Save the updated mappings
     this.mappings = mappings
 
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.LOGGING,
       `MAPHANDLER: Profile "${profileName}" removed successfully.`
     )
@@ -610,7 +600,7 @@ export class MappingState {
     const mappings = this.mappings
 
     if (!mappings.profiles[profile]) {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         `MAPHANDLER: Profile ${profile} does not exist! Cannot export.`
       )
@@ -620,7 +610,7 @@ export class MappingState {
     const profileData = mappings.profiles[profile]
     writeToGlobalFile<ButtonMapping>(profileData, filePath)
 
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.LOGGING,
       `MAPHANDLER: Profile ${profile} exported to ${filePath}`
     )
@@ -638,7 +628,7 @@ export class MappingState {
     const profileData = readFromGlobalFile<ButtonMapping>(filePath)
 
     if (!profileData) {
-      dataListener.asyncEmit(
+      loggingStore.log(
         MESSAGE_TYPES.ERROR,
         `MAPHANDLER: Failed to load profile data from ${filePath}`
       )
@@ -646,10 +636,7 @@ export class MappingState {
     }
 
     if (!this.isValidButtonMapping(profileData)) {
-      dataListener.asyncEmit(
-        MESSAGE_TYPES.ERROR,
-        `MAPHANDLER: Invalid profile data in file ${filePath}`
-      )
+      loggingStore.log(MESSAGE_TYPES.ERROR, `MAPHANDLER: Invalid profile data in file ${filePath}`)
       return
     }
 
@@ -657,7 +644,7 @@ export class MappingState {
     mappings.profiles[profileName] = profileData
     this.mappings = mappings
 
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.LOGGING,
       `MAPHANDLER: Profile ${profileName} imported from ${filePath}`
     )
@@ -667,16 +654,13 @@ export class MappingState {
     const mappings = this.mappings
     const profile = mappings.profiles[profileName]
     if (!profile) {
-      dataListener.asyncEmit(
-        MESSAGE_TYPES.ERROR,
-        `MAPHANDLER: Profile ${profileName} does not exist!`
-      )
+      loggingStore.log(MESSAGE_TYPES.ERROR, `MAPHANDLER: Profile ${profileName} does not exist!`)
       return
     }
     // Update the profile with the provided data
     deepMerge(profile, updatedProfile)
     this.mappings = mappings
-    dataListener.asyncEmit(
+    loggingStore.log(
       MESSAGE_TYPES.LOGGING,
       `MAPHANDLER: Profile ${profileName} updated successfully.`
     )
diff --git a/DeskThingServer/src/main/stores/loggingStore.ts b/DeskThingServer/src/main/stores/loggingStore.ts
new file mode 100644
index 0000000..70e7f32
--- /dev/null
+++ b/DeskThingServer/src/main/stores/loggingStore.ts
@@ -0,0 +1,133 @@
+import fs from 'fs'
+import { join } from 'path'
+import { app } from 'electron'
+import { MESSAGE_TYPES, Log, LOGGING_LEVEL, Settings, ReplyData, ReplyFn } from '@shared/types'
+import settingsStore from './settingsStore'
+
+// LoggingStore configuration
+const logFile = join(app.getPath('userData'), 'application.log.json')
+const readableLogFile = join(app.getPath('userData'), 'readable.log')
+
+// Ensure log directory exists
+const logDir = app.getPath('userData')
+if (!fs.existsSync(logDir)) {
+  fs.mkdirSync(logDir, { recursive: true })
+}
+
+class LoggingStore {
+  private static instance: LoggingStore
+  private listeners: ((data: Log) => void)[] = []
+  private logs: Log[] = []
+  private logLevel: LOGGING_LEVEL = LOGGING_LEVEL.PRODUCTION
+
+  private constructor() {
+    fs.writeFileSync(logFile, '[]')
+    fs.writeFileSync(readableLogFile, '')
+
+    settingsStore.addListener(this.settingsStoreListener.bind(this))
+  }
+
+  private settingsStoreListener(settings: Settings): void {
+    this.logLevel = settings.logLevel
+  }
+
+  // Singleton instance
+  public static getInstance(): LoggingStore {
+    if (!LoggingStore.instance) {
+      LoggingStore.instance = new LoggingStore()
+    }
+    return LoggingStore.instance
+  }
+
+  // Log a message
+  async log(level: MESSAGE_TYPES, message: string, source: string = 'server'): Promise<void> {
+    if (
+      level === MESSAGE_TYPES.LOGGING &&
+      source === 'server' &&
+      this.logLevel != LOGGING_LEVEL.SYSTEM
+    ) {
+      return
+    }
+
+    if (level === MESSAGE_TYPES.LOGGING && this.logLevel == LOGGING_LEVEL.PRODUCTION) {
+      return
+    }
+
+    const timestamp = new Date().toISOString()
+    const trace = new Error().stack || ''
+
+    const logData: Log = {
+      source: source,
+      type: level,
+      log: message,
+      trace: trace,
+      date: timestamp
+    }
+
+    this.logs.push(logData)
+    this.notifyListeners(logData)
+
+    const readableTimestamp = new Date(timestamp).toLocaleString()
+    const readableMessage = `[${readableTimestamp}] [${source}] ${level.toUpperCase()}: ${message}\n`
+
+    console.log(readableMessage)
+
+    // Write to log file as JSON array
+    return new Promise((resolve, reject) => {
+      fs.writeFile(logFile, JSON.stringify(this.logs, null, 2), (err) => {
+        if (err) {
+          console.error('Failed to write to log file:', err)
+          reject(err)
+        }
+        resolve()
+      })
+
+      fs.appendFile(readableLogFile, readableMessage, (err) => {
+        if (err) {
+          console.error('Failed to write to log file:', err)
+          reject(err)
+        }
+        resolve()
+      })
+    })
+  }
+
+  notifyListeners(data: Log): void {
+    this.listeners.forEach((listener) => listener(data))
+  }
+
+  addListener(callback: (data: Log) => void): void {
+    this.listeners.push(callback)
+  }
+
+  public async getLogs(): Promise<Log[]> {
+    return new Promise((resolve, reject) => {
+      if (!fs.existsSync(logFile)) {
+        resolve([])
+        return
+      }
+
+      fs.readFile(logFile, 'utf8', (err, data) => {
+        if (err) {
+          return reject(err)
+        }
+        try {
+          const logs = data ? JSON.parse(data) : []
+          resolve(logs)
+        } catch (error) {
+          reject(error)
+        }
+      })
+    })
+  }
+}
+
+export const ResponseLogger = (replyFn: ReplyFn): ReplyFn => {
+  return async (channel: string, reply: ReplyData): Promise<void> => {
+    LoggingStore.getInstance().log(MESSAGE_TYPES.LOGGING, `[${channel}]: ${JSON.stringify(reply)}`)
+
+    replyFn(channel, reply)
+  }
+}
+
+export default LoggingStore.getInstance()
diff --git a/DeskThingServer/src/main/stores/settingsStore.ts b/DeskThingServer/src/main/stores/settingsStore.ts
index 4cabccc..327b884 100644
--- a/DeskThingServer/src/main/stores/settingsStore.ts
+++ b/DeskThingServer/src/main/stores/settingsStore.ts
@@ -1,15 +1,18 @@
 import { readFromFile, writeToFile } from '../utils/fileHandler'
-import dataListener, { MESSAGE_TYPES } from '../utils/events'
+import loggingStore from './loggingStore'
 import os from 'os'
-import { Settings } from '@shared/types'
+import { LOGGING_LEVEL, Settings, MESSAGE_TYPES } from '@shared/types'
 
 const settingsVersion = '0.9.2'
 const version_code = 9.2
 
+type SettingsStoreListener = (settings: Settings) => void
+
 class SettingsStore {
   private settings: Settings
   private settingsFilePath: string = 'settings.json'
   private static instance: SettingsStore
+  private listeners: SettingsStoreListener[] = []
 
   constructor() {
     this.settings = this.getDefaultSettings()
@@ -18,7 +21,7 @@ class SettingsStore {
         if (settings) {
           this.settings = settings as Settings
           this.settings.localIp = getLocalIpAddress()
-          dataListener.asyncEmit(MESSAGE_TYPES.SETTINGS, this.settings)
+          this.notifyListeners()
         }
       })
       .catch((err) => {
@@ -32,6 +35,16 @@ class SettingsStore {
     return SettingsStore.instance
   }
 
+  public addListener(listener: SettingsStoreListener): void {
+    this.listeners.push(listener)
+  }
+
+  private async notifyListeners(): Promise<void> {
+    this.listeners.forEach((listener) => {
+      listener(this.settings)
+    })
+  }
+
   public async getSettings(): Promise<Settings> {
     if (this.settings) {
       return this.settings
@@ -51,14 +64,13 @@ class SettingsStore {
       this.updateAutoLaunch(value)
     }
     this.settings[key] = value
-    dataListener.asyncEmit(MESSAGE_TYPES.SETTINGS, this.settings)
     this.saveSettings()
   }
 
   public async loadSettings(): Promise<Settings> {
     try {
       const data = await readFromFile<Settings>(this.settingsFilePath)
-      dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, 'SETTINGS: Loaded settings!')
+      loggingStore.log(MESSAGE_TYPES.LOGGING, 'SETTINGS: Loaded settings!')
 
       if (!data || !data.version_code || data.version_code < version_code) {
         // File does not exist, create it with default settings
@@ -71,6 +83,8 @@ class SettingsStore {
         await this.updateAutoLaunch(data.autoStart)
       }
 
+      this.notifyListeners()
+
       return data
     } catch (err) {
       console.error('Error loading settings:', err)
@@ -103,12 +117,13 @@ class SettingsStore {
       if (settings) {
         this.settings = settings as Settings
         await writeToFile(this.settings, this.settingsFilePath)
-        dataListener.asyncEmit(MESSAGE_TYPES.SETTINGS, this.settings)
         console.log('SETTINGS: Updated settings!', this.settings)
-        dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, 'SETTINGS: Updated settings!')
+        loggingStore.log(MESSAGE_TYPES.LOGGING, 'SETTINGS: Updated settings!')
       } else {
-        dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, 'SETTINGS: Invalid setting format!')
+        loggingStore.log(MESSAGE_TYPES.LOGGING, 'SETTINGS: Invalid setting format!')
       }
+
+      this.notifyListeners()
     } catch (err) {
       console.error('Error saving settings:', err)
     }
@@ -125,6 +140,7 @@ class SettingsStore {
       callbackPort: 8888,
       devicePort: 8891,
       address: '0.0.0.0',
+      LogLevel: LOGGING_LEVEL.PRODUCTION,
       autoStart: false,
       autoConfig: false,
       minimizeApp: true,
diff --git a/DeskThingServer/src/main/utils/events.ts b/DeskThingServer/src/main/utils/events.ts
deleted file mode 100644
index 1d0a204..0000000
--- a/DeskThingServer/src/main/utils/events.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import EventEmitter from 'events'
-import Logger from './logger'
-import { ReplyData, ReplyFn, SocketData } from '@shared/types'
-
-/**
- * The MESSAGE_TYPES object defines a set of constants that represent the different types of messages that can be sent or received in the application.
- */
-export enum MESSAGE_TYPES {
-  ERROR = 'error',
-  LOGGING = 'log',
-  MESSAGE = 'message',
-  WARNING = 'warning',
-  FATAL = 'fatal',
-  DEBUG = 'debugging',
-  CONFIG = 'config',
-  SETTINGS = 'settings',
-  MAPPINGS = 'mapping'
-}
-
-/**
- * Events is a class that extends the EventEmitter class from the 'events' module.
- */
-class Events extends EventEmitter {
-  constructor() {
-    super()
-  }
-
-  /**
-   * Emits an event with associated data to all connected clients.
-   *
-   * @param event - The name of the event to emit. Should be one of the MESSAGE_TYPES defined in this file.
-   * @param data - The data to be sent along with the event. Can be of any type, but typically an object containing relevant information.
-   * @returns void
-   *
-   * Usage:
-   * 1. Import the Events instance from this file.
-   * 2. Call the method with the appropriate event type and data.
-   *
-   * @example
-   *
-   * import { events } from './events'
-   *
-   * events.emit(MESSAGE_TYPES.MESSAGE, { content: 'Hello, world!' })
-   */
-  async asyncEmit(event: MESSAGE_TYPES, ...data: (string | SocketData | unknown)[]): Promise<void> {
-    console.log(`[${event}] `, data)
-    return new Promise((resolve) => {
-      setImmediate(() => {
-        // Ensure that two arguments are only emitted at once
-        if (Array.isArray(data) && data.length > 0 && typeof data[0] === 'string') {
-          this.emit(event, data.join(' '))
-        } else {
-          this.emit(event, data[0])
-        }
-
-        Logger.log(event, `[${event}]: ${JSON.stringify(data, null, 2)}`)
-
-        resolve()
-      })
-    })
-  }
-}
-
-const dataListener = new Events()
-
-/**
- * Handles and standardizes the way to reply to ipc handlers
- * @param replyFn
- * @returns
- */
-export const ResponseLogger = (replyFn: ReplyFn): ReplyFn => {
-  return async (channel: string, reply: ReplyData): Promise<void> => {
-    dataListener.asyncEmit(MESSAGE_TYPES.LOGGING, `[CHANNEL][${channel}]: ${JSON.stringify(reply)}`)
-
-    replyFn(channel, reply)
-  }
-}
-
-export default dataListener
diff --git a/DeskThingServer/src/main/utils/logger.ts b/DeskThingServer/src/main/utils/logger.ts
deleted file mode 100644
index 61cefae..0000000
--- a/DeskThingServer/src/main/utils/logger.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import fs from 'fs'
-import { join } from 'path'
-import { app } from 'electron'
-import { MESSAGE_TYPES } from './events'
-
-// Logger configuration
-const logFile = join(app.getPath('userData'), 'application.log')
-
-// Ensure log directory exists
-const logDir = app.getPath('userData')
-if (!fs.existsSync(logDir)) {
-  fs.mkdirSync(logDir, { recursive: true })
-}
-
-class Logger {
-  private static instance: Logger
-
-  private constructor() {
-    fs.writeFileSync(logFile, '')
-  }
-
-  // Singleton instance
-  public static getInstance(): Logger {
-    if (!Logger.instance) {
-      Logger.instance = new Logger()
-    }
-    return Logger.instance
-  }
-
-  // Log a message
-  async log(level: MESSAGE_TYPES, message: string): Promise<void> {
-    const timestamp = new Date().toLocaleTimeString()
-    const logMessage = `[${timestamp}]: ${level.toUpperCase()} | ${message}`
-
-    // Append to log file
-    fs.appendFile(logFile, logMessage + '\n', (err) => {
-      if (err) {
-        console.error('Failed to write to log file:', err)
-      }
-    })
-  }
-
-  public async getLogs(): Promise<string[]> {
-    console.log('LOGGER: Getting logs')
-    return new Promise((resolve, reject) => {
-      fs.readFile(logFile, 'utf8', (err, data) => {
-        if (err) {
-          return reject(err)
-        }
-        const logs = data.trim().split('\n').filter(Boolean)
-        resolve(logs)
-      })
-    })
-  }
-}
-
-export default Logger.getInstance()
diff --git a/DeskThingServer/src/preload/index.d.ts b/DeskThingServer/src/preload/index.d.ts
index f3e5bb1..e6cf083 100644
--- a/DeskThingServer/src/preload/index.d.ts
+++ b/DeskThingServer/src/preload/index.d.ts
@@ -1,5 +1,5 @@
 import { ElectronAPI } from '@electron-toolkit/preload'
-import { AppDataInterface, AppReturnData, Client, ClientManifest } from '@shared/types'
+import { AppDataInterface, AppReturnData, Client, ClientManifest, Log } from '@shared/types'
 
 type AppData = { [key: string]: string }
 
@@ -38,7 +38,7 @@ declare global {
       saveSettings: (settings: Settings) => Promise<void>
       getSettings: () => Promise<Settings>
       fetchGithub: (url: string) => Promise<GithubRelease[]>
-      getLogs: () => Promise<string[]>
+      getLogs: () => Promise<Log[]>
       getMappings: () => Promise<ButtonMapping>
       addProfile: (profile: string, baseProfile?: string) => Promise<ButtonMapping>
       deleteProfile: (profile: string) => Promise<ButtonMapping>
diff --git a/DeskThingServer/src/preload/index.ts b/DeskThingServer/src/preload/index.ts
index 5a38ef4..7195ade 100644
--- a/DeskThingServer/src/preload/index.ts
+++ b/DeskThingServer/src/preload/index.ts
@@ -11,6 +11,7 @@ import {
   IncomingData,
   IPC_HANDLERS,
   IPCData,
+  Log,
   Settings,
   SocketData
 } from '@shared/types'
@@ -209,7 +210,7 @@ const api = {
     })
   },
 
-  getLogs: (): Promise<string[]> => {
+  getLogs: (): Promise<Log[]> => {
     return sendCommand('UTILITY', {
       type: 'logs',
       request: 'get',
diff --git a/DeskThingServer/src/renderer/src/assets/icons/icon/IconToggle.tsx b/DeskThingServer/src/renderer/src/assets/icons/icon/IconToggle.tsx
index 6ef3df5..afcc11b 100644
--- a/DeskThingServer/src/renderer/src/assets/icons/icon/IconToggle.tsx
+++ b/DeskThingServer/src/renderer/src/assets/icons/icon/IconToggle.tsx
@@ -3,9 +3,10 @@ import { useEffect, useRef } from 'react'
 
 interface ToggleProps extends IconProps {
   checked: boolean
+  disabled?: boolean
 }
 
-function IconToggle({ checked, ...props }: ToggleProps): JSX.Element {
+function IconToggle({ disabled = false, checked, ...props }: ToggleProps): JSX.Element {
   const circleRef = useRef<SVGCircleElement>(null)
 
   useEffect(() => {
@@ -29,9 +30,16 @@ function IconToggle({ checked, ...props }: ToggleProps): JSX.Element {
         stroke="currentColor"
         strokeLinecap="round"
         strokeLinejoin="round"
+        style={{ opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer' }}
       >
         <rect width="20" height="12" x="2" y="6" rx="6" ry="6" />
-        <circle ref={circleRef} cx={checked ? '16' : '8'} cy="12" r="5" fill="white">
+        <circle
+          ref={circleRef}
+          cx={checked ? '16' : '8'}
+          cy="12"
+          r="5"
+          fill={disabled ? `gray` : 'white'}
+        >
           <animate
             attributeName="cx"
             from={checked ? '8' : '16'}
diff --git a/DeskThingServer/src/renderer/src/components/Connection.tsx b/DeskThingServer/src/renderer/src/components/Connection.tsx
index 0ea1b85..0111b27 100644
--- a/DeskThingServer/src/renderer/src/components/Connection.tsx
+++ b/DeskThingServer/src/renderer/src/components/Connection.tsx
@@ -30,6 +30,7 @@ const ConnectionComponent: React.FC<ConnectionComponentProps> = ({ client }) =>
   const [showLogging, setShowLogging] = useState(false)
   const [offline, setOffline] = useState(false)
   const refreshADbClients = useClientStore((store) => store.requestADBDevices)
+  const requestClientManifest = useClientStore((store) => store.requestClientManifest)
   const devicePort = useSettingsStore((store) => store.settings.devicePort)
 
   useEffect(() => {
@@ -106,6 +107,7 @@ const ConnectionComponent: React.FC<ConnectionComponentProps> = ({ client }) =>
         setLogging(reply)
         if (reply.final) {
           unsubscribe()
+          requestClientManifest()
         }
       })
     } catch (error) {
@@ -219,12 +221,13 @@ const ConnectionComponent: React.FC<ConnectionComponentProps> = ({ client }) =>
             </Button>
             {!client.connected && (
               <Button
-                className="group hover:bg-zinc-900 gap-2"
+                className="group relative hover:bg-zinc-900 gap-2"
                 onClick={configureDevice}
                 disabled={loading}
               >
+                <div className="absolute inset-0 w-full h-full border-blue-500 border animate-pulse rounded-lg"></div>
                 <IconConfig />
-                <p className="hidden group-hover:block">
+                <p className="hidden group-hover:block lg:block">
                   Config<span className="hidden lg:inline">ure</span>
                 </p>
               </Button>
diff --git a/DeskThingServer/src/renderer/src/components/NotificationButton.tsx b/DeskThingServer/src/renderer/src/components/NotificationButton.tsx
index 70a3764..a4267d0 100644
--- a/DeskThingServer/src/renderer/src/components/NotificationButton.tsx
+++ b/DeskThingServer/src/renderer/src/components/NotificationButton.tsx
@@ -9,6 +9,7 @@ const NotificationButton: React.FC = () => {
 
   const taskNum = useNotificationStore((state) => state.totalTasks)
   const logs = useNotificationStore((state) => state.logs)
+  const requests = useNotificationStore((state) => state.requestQueue)
   const issues = useNotificationStore((state) => state.issues.length)
   const [errors, setErrors] = useState(0)
 
@@ -30,8 +31,11 @@ const NotificationButton: React.FC = () => {
       <Button onClick={handleOpenNotifications} className={`gap-2 hover:bg-zinc-900`}>
         {taskNum > 0 ? (
           <p
-            className={`${errors > 0 || issues > 0 ? 'bg-red-500' : 'bg-green-500'} p-1 w-full rounded text-xs`}
+            className={`${errors > 0 || issues > 0 ? 'bg-red-500' : 'bg-green-500'} relative p-1 w-full rounded text-xs`}
           >
+            {requests.length > 0 && (
+              <div className="absolute inset-0 rounded w-full h-full animate-ping border-2 border-blue-500"></div>
+            )}
             {taskNum}
           </p>
         ) : (
diff --git a/DeskThingServer/src/renderer/src/components/Select.tsx b/DeskThingServer/src/renderer/src/components/Select.tsx
index f818b22..a8b4e18 100644
--- a/DeskThingServer/src/renderer/src/components/Select.tsx
+++ b/DeskThingServer/src/renderer/src/components/Select.tsx
@@ -7,9 +7,17 @@ interface SelectProps {
   value: string[] | string
   isMulti?: boolean
   placeholder: string
+  className?: string
   onChange: (value: SingleValue<SettingOption> | MultiValue<SettingOption>) => void
 }
-const Select: React.FC<SelectProps> = ({ options, isMulti, onChange, value, placeholder }) => {
+const Select: React.FC<SelectProps> = ({
+  options,
+  isMulti,
+  onChange,
+  value,
+  placeholder,
+  className
+}) => {
   // We can't use tailwind css here because of how classes are passed into the child components
   const customStyles = {
     control: (provided) => ({
@@ -80,6 +88,7 @@ const Select: React.FC<SelectProps> = ({ options, isMulti, onChange, value, plac
             : options.find((option) => option.value === value)
         }
         options={options}
+        className={className}
         isMulti={isMulti}
         closeMenuOnSelect={!isMulti}
         styles={customStyles}
diff --git a/DeskThingServer/src/renderer/src/components/settings/SettingsString.tsx b/DeskThingServer/src/renderer/src/components/settings/SettingsString.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/DeskThingServer/src/renderer/src/listeners/LogDataListener.tsx b/DeskThingServer/src/renderer/src/listeners/LogDataListener.tsx
index 0fed88a..3c92615 100644
--- a/DeskThingServer/src/renderer/src/listeners/LogDataListener.tsx
+++ b/DeskThingServer/src/renderer/src/listeners/LogDataListener.tsx
@@ -1,47 +1,23 @@
 import { useEffect } from 'react'
 import { useLogStore, useNotificationStore } from '../stores'
+import { Log } from '@shared/types'
 
 const LogDataListener = (): null => {
   const addLog = useLogStore((state) => state.addLog)
   const addLogs = useNotificationStore((state) => state.addLog)
 
   useEffect(() => {
-    const handleError = (_event, errorData): void => {
-      if (typeof errorData != 'string') {
-        console.log(errorData)
-        errorData = JSON.stringify(errorData)
-      }
-      addLog('error', errorData)
-      addLogs('error', errorData)
-    }
-
-    const handleLog = (_event, logData): void => {
-      if (typeof logData != 'string') {
-        console.log(logData)
-        logData = JSON.stringify(logData)
-      }
-      addLog('log', logData)
-    }
-
-    const handleMessage = (_event, messageData): void => {
-      if (typeof messageData != 'string') {
-        console.log(messageData)
-        messageData = JSON.stringify(messageData)
-      }
-      addLog('message', messageData)
-      addLogs('log', messageData)
+    const handleLog = (_event, log: Log): void => {
+      addLog(log)
+      addLogs(log)
     }
 
     // Listen for IPC events
-    window.electron.ipcRenderer.on('error', handleError)
     window.electron.ipcRenderer.on('log', handleLog)
-    window.electron.ipcRenderer.on('message', handleMessage)
 
     // Clean up the IPC listeners when the component unmounts
     return () => {
-      window.electron.ipcRenderer.removeAllListeners('error')
       window.electron.ipcRenderer.removeAllListeners('log')
-      window.electron.ipcRenderer.removeAllListeners('message')
     }
   }, [addLog])
 
diff --git a/DeskThingServer/src/renderer/src/nav/Nav.tsx b/DeskThingServer/src/renderer/src/nav/Nav.tsx
index 09d019f..d5a7a6a 100644
--- a/DeskThingServer/src/renderer/src/nav/Nav.tsx
+++ b/DeskThingServer/src/renderer/src/nav/Nav.tsx
@@ -65,7 +65,7 @@ const Nav: React.FC = () => {
             location="Developer"
             currentPage={currentPage}
             handleNavigation={handleNavigation}
-            subDirectories={['App', 'ADB', 'Logs']}
+            subDirectories={['Logs', 'App', 'ADB']}
           >
             <IconWrench iconSize={30} />
             <span className="hidden lg:inline group-hover:inline">Dev</span>
diff --git a/DeskThingServer/src/renderer/src/overlays/Overlay.tsx b/DeskThingServer/src/renderer/src/overlays/Overlay.tsx
index 6e957cc..d09d0e8 100644
--- a/DeskThingServer/src/renderer/src/overlays/Overlay.tsx
+++ b/DeskThingServer/src/renderer/src/overlays/Overlay.tsx
@@ -25,7 +25,7 @@ const Overlay: React.FC<DownloadConfirmationProps> = ({ onClose, className, chil
   }, [onClose])
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+    <div className="fixed animate-fade inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
       <div ref={overlayRef} className={`relative bg-black rounded-lg ${className}`}>
         <Button className="absolute top-2 right-2 hover:bg-black bg-zinc-900" onClick={onClose}>
           <IconX />
diff --git a/DeskThingServer/src/renderer/src/overlays/SuccessNotification.tsx b/DeskThingServer/src/renderer/src/overlays/SuccessNotification.tsx
new file mode 100644
index 0000000..7548858
--- /dev/null
+++ b/DeskThingServer/src/renderer/src/overlays/SuccessNotification.tsx
@@ -0,0 +1,58 @@
+import { AppReturnData } from '@shared/types'
+import Overlay from './Overlay'
+import Button from '@renderer/components/Button'
+import { IconPlay } from '@renderer/assets/icons'
+import { useState } from 'react'
+
+interface SuccessNotificationProps {
+  appReturnData: AppReturnData
+  setAppReturnData: (data: null) => void
+  runApp: (appId: string) => void
+}
+
+export function SuccessNotification({
+  appReturnData,
+  setAppReturnData,
+  runApp
+}: SuccessNotificationProps): JSX.Element {
+  const [loading, setLoading] = useState(false)
+
+  if (!appReturnData) return <></>
+
+  const onRunClick = async (): Promise<void> => {
+    setLoading(true)
+    setTimeout(() => {
+      setAppReturnData(null)
+      runApp(appReturnData.appId)
+    }, 500)
+  }
+
+  const onClose = (): void => {
+    runApp(appReturnData.appId)
+    setAppReturnData(null)
+  }
+
+  return (
+    <Overlay onClose={onClose} className="border bg-zinc-950 border-zinc-800 flex flex-col">
+      <div className="w-full py-4 bg-zinc-900 px-5 border-b border-gray-500">
+        <h1 className="text-2xl text-green-500 pr-24">Successfully Downloaded</h1>
+      </div>
+      <div className="p-5 flex flex-col gap-2">
+        <div>
+          <p>{appReturnData.appName} is installed</p>
+          <p>v{appReturnData.appVersion}</p>
+        </div>
+        <Button
+          className="hover:bg-zinc-700 relative flex gap-2 w-full bg-black border border-zinc-900"
+          onClick={onRunClick}
+          disabled={loading}
+        >
+          <IconPlay
+            className={`fill-white absolute duration-500 inset transition-all ${loading ? 'left-1/2 opacity-0' : 'left-4'}`}
+          />
+          <p className={`${loading ? 'opacity-0' : ''} transition-all ml-10`}>Initialize App</p>
+        </Button>
+      </div>
+    </Overlay>
+  )
+}
diff --git a/DeskThingServer/src/renderer/src/overlays/notifications/EventsPage.tsx b/DeskThingServer/src/renderer/src/overlays/notifications/EventsPage.tsx
index 9375690..0c04911 100644
--- a/DeskThingServer/src/renderer/src/overlays/notifications/EventsPage.tsx
+++ b/DeskThingServer/src/renderer/src/overlays/notifications/EventsPage.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { useNotificationStore } from '@renderer/stores'
 import { IconTrash } from '@renderer/assets/icons'
 import Button from '@renderer/components/Button'
+import { MESSAGE_TYPES } from '@shared/types'
 
 const EvensPage: React.FC = () => {
   const logs = useNotificationStore((state) => state.logs)
@@ -21,21 +22,27 @@ const EvensPage: React.FC = () => {
               <li
                 key={index}
                 className={`text-sm font-geistMono break-words whitespace-pre-wrap ${
-                  log.type === 'error'
+                  log.type === MESSAGE_TYPES.ERROR
                     ? 'text-red-500'
-                    : log.type === 'message'
-                      ? 'text-yellow-500'
-                      : 'text-gray-300'
+                    : log.type === MESSAGE_TYPES.FATAL
+                      ? 'text-red-700'
+                      : log.type === MESSAGE_TYPES.WARNING
+                        ? 'text-orange-500'
+                        : log.type === MESSAGE_TYPES.MESSAGE
+                          ? 'text-yellow-500'
+                          : log.type === MESSAGE_TYPES.DEBUG
+                            ? 'text-blue-500'
+                            : 'text-gray-300'
                 }`}
               >
                 <button
                   onClick={() => readLogs(index)}
-                  className="pl-2 py-2 rounded-xl hover:bg-zinc-900 relative group border-gray-500 flex items-center justify w-full"
+                  className="pl-2 py-2 rounded-xl hover:bg-zinc-900 relative group border-gray-500 flex items-center justify-start w-full"
                 >
                   <div className="absolute right-1  text-red-500 hidden group-hover:block">
                     <IconTrash />
                   </div>
-                  <p className="items-start">{log.log}</p>
+                  <p className="text-justify">{log.log}</p>
                 </button>
               </li>
             ))}
diff --git a/DeskThingServer/src/renderer/src/overlays/notifications/NotificationOverlay.tsx b/DeskThingServer/src/renderer/src/overlays/notifications/NotificationOverlay.tsx
index 3fe835c..15aa3eb 100644
--- a/DeskThingServer/src/renderer/src/overlays/notifications/NotificationOverlay.tsx
+++ b/DeskThingServer/src/renderer/src/overlays/notifications/NotificationOverlay.tsx
@@ -60,7 +60,12 @@ const NotificationOverlay: React.FC = () => {
             curPage={page}
             value={notifState.requestQueue.length}
             Icon={<IconBell />}
-          />
+            className="relative"
+          >
+            {notifState.requestQueue.length > 0 && (
+              <div className="absolute inset-0 rounded w-full h-full animate-pulse border-2 border-blue-500"></div>
+            )}
+          </NavComponent>
           <NavComponent
             setPage={setPage}
             page="Task"
@@ -86,6 +91,7 @@ interface NavComponentProps {
   value: number
   Icon: React.ReactElement
   className?: string
+  children?: React.ReactNode
 }
 
 const NavComponent = ({
@@ -94,17 +100,19 @@ const NavComponent = ({
   curPage,
   value,
   Icon,
+  children,
   className
 }: NavComponentProps): React.ReactElement => (
   <Button
     onClick={() => setPage(page.toLowerCase())}
-    className={`gap-2 ${curPage == page.toLowerCase() ? 'bg-zinc-800 hover:bg-zinc-700' : 'bg-zinc-900 hover:bg-zinc-800'} ${value == 0 && 'text-gray-500'} ${className}`}
+    className={`relative gap-2 ${curPage == page.toLowerCase() ? 'bg-zinc-800 hover:bg-zinc-700' : 'bg-zinc-900 hover:bg-zinc-800'} ${value == 0 && 'text-gray-500'} ${className}`}
   >
     {value > 0 && <p>{value}</p>}
     <div className="md:hidden block">{Icon}</div>
     <p className="hidden md:block">
       {page}
       {value != 1 && 's'}
+      {children}
     </p>
   </Button>
 )
diff --git a/DeskThingServer/src/renderer/src/overlays/notifications/RequestsPage.tsx b/DeskThingServer/src/renderer/src/overlays/notifications/RequestsPage.tsx
index 1fa94c6..a01fd66 100644
--- a/DeskThingServer/src/renderer/src/overlays/notifications/RequestsPage.tsx
+++ b/DeskThingServer/src/renderer/src/overlays/notifications/RequestsPage.tsx
@@ -43,7 +43,7 @@ interface RequestProps {
 const RequestComponent = ({ request }: RequestProps): React.ReactElement => {
   const resolveRequest = useNotificationStore((state) => state.resolveRequest)
   const [expanded, setIsExpanded] = useState(false)
-  const [focusedIndex, setFocusedIndex] = useState(-1)
+  const [focusedIndex, setFocusedIndex] = useState(0)
   const [formData, setFormData] = useState<{ [key: string]: string }>({})
   const [allFieldsFilled, setAllFieldsFilled] = useState(false)
 
@@ -73,7 +73,7 @@ const RequestComponent = ({ request }: RequestProps): React.ReactElement => {
 
   const toggleExpanded = (): void => {
     setIsExpanded(!expanded)
-    setFocusedIndex(-1)
+    setFocusedIndex(0)
   }
 
   useEffect(() => {
diff --git a/DeskThingServer/src/renderer/src/overlays/settings/MusicSettings.tsx b/DeskThingServer/src/renderer/src/overlays/settings/MusicSettings.tsx
index 775e8a5..699c998 100644
--- a/DeskThingServer/src/renderer/src/overlays/settings/MusicSettings.tsx
+++ b/DeskThingServer/src/renderer/src/overlays/settings/MusicSettings.tsx
@@ -3,13 +3,16 @@ import useSettingsStore from '../../stores/settingsStore'
 import useAppStore from '../../stores/appStore'
 import Button from '@renderer/components/Button'
 import { IconLoading, IconSave, IconToggle } from '@renderer/assets/icons'
+import Select from '@renderer/components/Select'
+import { SingleValue } from 'react-select'
+import { SettingOption, Settings } from '@shared/types'
 
 const MusicSettings: React.FC = () => {
-  const initialSettings = useSettingsStore((settings) => settings.settings)
   const saveSettings = useSettingsStore((settings) => settings.saveSettings)
+  const requestSettings = useSettingsStore((settings) => settings.requestSettings)
   const appsList = useAppStore((state) => state.appsList)
   const [audioSources, setAudioSources] = useState<{ id: string; name: string }[]>([])
-  const [settings, setSettings] = useState(initialSettings)
+  const [settings, setSettings] = useState<Settings | null>(null)
   const [loading, setLoading] = useState(false)
 
   useEffect(() => {
@@ -20,14 +23,23 @@ const MusicSettings: React.FC = () => {
         name: app.manifest?.label || app.name
       }))
     setAudioSources(sources)
+
+    const fetchSettings = async (): Promise<void> => {
+      const settings = await requestSettings()
+      setSettings(settings)
+    }
+
+    fetchSettings()
   }, [appsList])
 
   const handleSettingChange = (key: string, value: string | boolean | number | string[]): void => {
+    if (!settings) return
     setSettings({ ...settings, [key]: value })
     console.log('Settings Updated:', settings)
   }
 
   const handleSave = async (): Promise<void> => {
+    if (!settings) return
     setLoading(true)
     await saveSettings(settings)
     setTimeout(() => {
@@ -43,55 +55,68 @@ const MusicSettings: React.FC = () => {
           <Button
             className="bg-transparent p-0"
             onClick={() =>
-              handleSettingChange('refreshInterval', settings.refreshInterval === -1 ? 15000 : -1)
+              handleSettingChange('refreshInterval', settings?.refreshInterval === -1 ? 15000 : -1)
             }
           >
             <IconToggle
               iconSize={48}
-              checked={settings.refreshInterval !== -1}
-              className={`transition-color ${settings.refreshInterval !== -1 ? 'text-green-500' : 'text-gray-500'}`}
+              disabled={!settings}
+              checked={settings?.refreshInterval !== -1}
+              className={`transition-color ${settings?.refreshInterval !== -1 ? 'text-green-500' : 'text-gray-500'}`}
             />
           </Button>
         </div>
       </div>
       <div
-        className={`transition-[height,opacity,border] border-t overflow-hidden ${settings.refreshInterval === -1 ? 'h-0 opacity-50 border-black' : 'h-20 opacity-100 border-gray-500'}`}
+        className={`transition-[height,opacity,border] border-t overflow-hidden ${!settings || settings?.refreshInterval === -1 ? 'h-0 opacity-50 border-black' : 'h-20 opacity-100 border-gray-500'}`}
       >
         <div className={`w-full p-4 flex justify-between items-center`}>
           <h2 className="text-xl">Refresh Interval (seconds)</h2>
           <div className="flex items-center gap-4">
             <input
               type="number"
-              value={settings.refreshInterval === -1 ? '' : settings.refreshInterval / 1000}
+              value={
+                settings
+                  ? settings?.refreshInterval === -1
+                    ? ''
+                    : settings.refreshInterval / 1000
+                  : 15000
+              }
               onChange={(e) =>
                 handleSettingChange('refreshInterval', Number(e.target.value) * 1000)
               }
               className="focus:text-white bg-zinc-900 text-white rounded px-2 py-2"
               placeholder="Enter A Value"
-              disabled={settings.refreshInterval === -1}
+              disabled={!settings || settings.refreshInterval === -1}
             />
           </div>
         </div>
       </div>
       <div className="border-t border-gray-500 w-full p-4 flex justify-between items-center">
-        <h2 className="text-xl">Playback Sources</h2>
-        <select
-          value={settings.playbackLocation}
+        <h2 className="text-xl w-full">Playback Sources</h2>
+        <Select
+          placeholder={settings ? settings.playbackLocation || '' : 'Loading...'}
           onChange={(e) => {
-            handleSettingChange('playbackLocation', e.target.value)
+            const value = e as SingleValue<SettingOption>
+            handleSettingChange('playbackLocation', value?.value || '')
           }}
-          defaultValue={'Unset'}
-          className="bg-zinc-900 rounded hover:cursor-pointer text-white px-2 py-2"
-        >
-          {audioSources.map((app) => (
-            <option key={app.id} value={app.id} className="rounded-none">
-              {app.name}
-            </option>
-          ))}
-          <option key={'none'} value={'none'} className="rounded-none">
-            {'None'}
-          </option>
-        </select>
+          value={settings ? settings.playbackLocation || '' : 'Disabled'}
+          className="bg-zinc-900 rounded hover:cursor-pointer text-white px-2 py-2 w-full"
+          options={[
+            ...audioSources.map((app) => ({
+              value: app.id,
+              label: app.name
+            })),
+            {
+              value: 'none',
+              label: 'None'
+            },
+            {
+              value: 'disabled',
+              label: 'Disabled'
+            }
+          ]}
+        />
       </div>
       <div className="border-t py-5 border-gray-500 w-full flex justify-end">
         <Button
diff --git a/DeskThingServer/src/renderer/src/overlays/settings/ServerSettings.tsx b/DeskThingServer/src/renderer/src/overlays/settings/ServerSettings.tsx
index 96c83cf..338324a 100644
--- a/DeskThingServer/src/renderer/src/overlays/settings/ServerSettings.tsx
+++ b/DeskThingServer/src/renderer/src/overlays/settings/ServerSettings.tsx
@@ -2,6 +2,9 @@ import React, { useState } from 'react'
 import useSettingsStore from '../../stores/settingsStore'
 import Button from '@renderer/components/Button'
 import { IconLoading, IconSave, IconToggle } from '@renderer/assets/icons'
+import Select from '@renderer/components/Select'
+import { SingleValue } from 'react-select'
+import { LOGGING_LEVEL, SettingOption } from '@shared/types'
 
 const ServerSettings: React.FC = () => {
   const initialSettings = useSettingsStore((settings) => settings.settings)
@@ -9,6 +12,12 @@ const ServerSettings: React.FC = () => {
   const [settings, setSettings] = useState(initialSettings)
   const [loading, setLoading] = useState(false)
 
+  const logLevelOptions = [
+    { value: LOGGING_LEVEL.SYSTEM, label: 'SYSTEM' },
+    { value: LOGGING_LEVEL.APPS, label: 'APPS' },
+    { value: LOGGING_LEVEL.PRODUCTION, label: 'PRODUCTION' }
+  ]
+
   const handleSettingChange = (key: string, value: string | boolean | number): void => {
     setSettings({ ...settings, [key]: value })
   }
@@ -63,6 +72,19 @@ const ServerSettings: React.FC = () => {
           />
         </Button>
       </div>
+      <div className="w-full p-4 flex justify-between items-center">
+        <h2 className="text-xl w-full">Logging Level</h2>
+        <Select
+          options={logLevelOptions}
+          value={settings.logLevel}
+          placeholder={settings.LogLevel}
+          className="w-full"
+          onChange={(selected) => {
+            const selectedValue = selected as SingleValue<SettingOption>
+            handleSettingChange('logLevel', selectedValue?.value || LOGGING_LEVEL.PRODUCTION)
+          }}
+        />
+      </div>
       <div className="w-full px-4 flex justify-between items-center">
         <h2 className="text-xl">Close To Taskbar</h2>
         <Button
@@ -89,5 +111,4 @@ const ServerSettings: React.FC = () => {
     </div>
   )
 }
-
 export default ServerSettings
diff --git a/DeskThingServer/src/renderer/src/pages/Apps/AppsList.tsx b/DeskThingServer/src/renderer/src/pages/Apps/AppsList.tsx
index d35e1ed..bbcc58e 100644
--- a/DeskThingServer/src/renderer/src/pages/Apps/AppsList.tsx
+++ b/DeskThingServer/src/renderer/src/pages/Apps/AppsList.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import Sidebar from '@renderer/nav/Sidebar'
 import Button from '@renderer/components/Button'
-import { IconDownload } from '@renderer/assets/icons'
+import { IconDownload, IconLink } from '@renderer/assets/icons'
 import { useAppStore, useNotificationStore, usePageStore } from '@renderer/stores'
 import App from '@renderer/components/App'
 import MainElement from '@renderer/nav/MainElement'
@@ -80,31 +80,46 @@ const AppsList: React.FC = () => {
       <MainElement className="relative">
         <div className="absolute top-0 p-5 left-0 w-full h-full">
           {appsList ? (
-            <div className="flex flex-col gap-4">
-              {order.map((appName, index) => {
-                const app = appsList.find((a) => a.name === appName)
-                if (!app) return null
-                return (
-                  <div
-                    key={app.name}
-                    draggable
-                    onDragStart={(e) => handleDragStart(e, app.name)}
-                    onDragOver={(e) => handleDragOver(e, index)}
-                    onDragLeave={handleDragLeave}
-                    onDrop={() => handleDrop(app.name)}
-                    className={`relative ${
-                      dragOverIndex === index ? 'border-t-2 border-zinc-500' : ''
-                    }`}
-                  >
-                    <App app={app} activeRequest={activeRequests.includes(app.name)} />
-                    {index === order.length - 1 && dragOverIndex === index && (
-                      <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-zinc-500"></div>
-                    )}
-                  </div>
-                )
-              })}
-            </div>
+            appsList.length > 0 ? (
+              <div className="flex flex-col gap-4">
+                {order.map((appName, index) => {
+                  const app = appsList.find((a) => a.name === appName)
+                  if (!app) return null
+                  return (
+                    <div
+                      key={app.name}
+                      draggable
+                      onDragStart={(e) => handleDragStart(e, app.name)}
+                      onDragOver={(e) => handleDragOver(e, index)}
+                      onDragLeave={handleDragLeave}
+                      onDrop={() => handleDrop(app.name)}
+                      className={`relative ${
+                        dragOverIndex === index ? 'border-t-2 border-zinc-500' : ''
+                      }`}
+                    >
+                      <App app={app} activeRequest={activeRequests.includes(app.name)} />
+                      {index === order.length - 1 && dragOverIndex === index && (
+                        <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-zinc-500"></div>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            ) : (
+              // Shows when the AppsList is initialized but empty
+              <div className="w-full h-full flex flex-col justify-center items-center gap-2">
+                <p>No apps downloaded yet!</p>
+                <Button
+                  onClick={handleDownloadsNav}
+                  className="bg-zinc-900 gap-2 hover:bg-zinc-800"
+                >
+                  <p className="md:block hidden text-center flex-grow">Downloads Page</p>
+                  <IconLink strokeWidth={1.5} />
+                </Button>
+              </div>
+            )
           ) : (
+            // Shows while retrieving the apps list from the store
             <p>Loading...</p>
           )}
         </div>
diff --git a/DeskThingServer/src/renderer/src/pages/Clients/Connections.tsx b/DeskThingServer/src/renderer/src/pages/Clients/Connections.tsx
index 5a3db49..4a86ac9 100644
--- a/DeskThingServer/src/renderer/src/pages/Clients/Connections.tsx
+++ b/DeskThingServer/src/renderer/src/pages/Clients/Connections.tsx
@@ -95,7 +95,9 @@ const ClientConnections: React.FC = () => {
           <div className="md:block hidden">
             {settings.localIp &&
               settings.localIp.map((ip, index) => (
-                <div key={index}>{ip + ':' + settings.devicePort}</div>
+                <div key={index} className="text-gray-500">
+                  {ip + ':' + settings.devicePort}
+                </div>
               ))}
             <div className="border-t border-gray-500 mt-4 pt-4">
               <p className="">Staged Client</p>
diff --git a/DeskThingServer/src/renderer/src/pages/Dev/Logs.tsx b/DeskThingServer/src/renderer/src/pages/Dev/Logs.tsx
index 421143b..adc7565 100644
--- a/DeskThingServer/src/renderer/src/pages/Dev/Logs.tsx
+++ b/DeskThingServer/src/renderer/src/pages/Dev/Logs.tsx
@@ -12,13 +12,15 @@ import {
   IconWarning
 } from '@renderer/assets/icons'
 import { useReward } from 'react-rewards'
+import { MESSAGE_TYPES } from '@shared/types/types'
 
 const Logs: React.FC = () => {
   const { logList, getLogs } = useLogStore()
-  const [filter, setFilter] = useState<string | null>(null)
+  const [filter, setFilter] = useState<MESSAGE_TYPES | null>(null)
   const logContainerRef = useRef<HTMLDivElement>(null)
   const [autoScroll, setAutoScroll] = useState(true)
   const { reward, isAnimating } = useReward('rewardId', 'confetti')
+  const [hoveredLog, setHoveredLog] = useState<string | null>(null)
 
   const filteredLogs = filter ? logList.filter((log) => log.type === filter) : logList
 
@@ -45,14 +47,26 @@ const Logs: React.FC = () => {
   }
 
   const handleCopyLogs = (): void => {
-    const logsText = filteredLogs.map((log) => `[${log.date}] ${log.type}: ${log.log}`).join('\n')
+    const logsText = filteredLogs
+      .map(
+        (log) =>
+          `[${new Date(log.date || '2024-11-17T11:16:16.970Z').toLocaleTimeString()} ${log.source}]: ${log.log}`
+      )
+      .join('\n')
     navigator.clipboard.writeText(logsText)
     reward()
   }
 
   return (
     <div className="w-full h-full flex">
-      <Sidebar className="flex justify-end flex-col h-full max-h-full md:items-stretch items-center">
+      <Sidebar className="flex justify-between flex-col h-full max-h-full md:items-stretch items-center">
+        <div className="relative h-full overflow-auto">
+          <p>
+            {hoveredLog && (
+              <div className="absolute inset-0 text-xs text-gray-500 break-words">{hoveredLog}</div>
+            )}
+          </p>
+        </div>
         <div className="flex flex-col gap-2">
           <Button onClick={handleLogsOpen} className="hover:bg-zinc-900">
             <IconFolderOpen strokeWidth={1.5} />
@@ -70,25 +84,53 @@ const Logs: React.FC = () => {
         <div className="flex gap-2 px-2 my-2 py-2 bg-zinc-950 border-b border-zinc-900">
           <Button
             onClick={() => setFilter(null)}
-            className={`w-full   ${filter === null ? 'bg-zinc-800 hover:bg-zinc-700' : 'hover:bg-zinc-900'}`}
+            className={`w-full ${filter === null ? 'bg-zinc-800 hover:bg-zinc-700' : 'hover:bg-zinc-900'}`}
           >
             <IconLogs strokeWidth={1.5} />
             <p className="md:block hidden text-center flex-grow">All</p>
           </Button>
           <Button
-            onClick={() => setFilter('message')}
-            className={`w-full  ${filter === 'message' ? 'bg-zinc-800 hover:bg-zinc-700' : 'hover:bg-zinc-900'}`}
+            onClick={() => setFilter(MESSAGE_TYPES.MESSAGE)}
+            className={`w-full ${filter === MESSAGE_TYPES.MESSAGE ? 'bg-zinc-800 hover:bg-zinc-700' : 'hover:bg-zinc-900'}`}
           >
             <IconBell strokeWidth={1.5} />
             <p className="md:block hidden text-center flex-grow">Messages</p>
           </Button>
           <Button
-            onClick={() => setFilter('error')}
-            className={`w-full  ${filter === 'error' ? 'bg-zinc-800 hover:bg-zinc-700' : 'hover:bg-zinc-900'}`}
+            onClick={() => setFilter(MESSAGE_TYPES.ERROR)}
+            className={`w-full ${filter === MESSAGE_TYPES.ERROR ? 'bg-zinc-800 hover:bg-zinc-700' : 'hover:bg-zinc-900'}`}
           >
             <IconWarning strokeWidth={1.5} />
             <p className="md:block hidden text-center flex-grow">Errors</p>
           </Button>
+          <Button
+            onClick={() => setFilter(MESSAGE_TYPES.WARNING)}
+            className={`w-full ${filter === MESSAGE_TYPES.WARNING ? 'bg-zinc-800 hover:bg-zinc-700' : 'hover:bg-zinc-900'}`}
+          >
+            <IconWarning strokeWidth={1.5} />
+            <p className="md:block hidden text-center flex-grow">Warnings</p>
+          </Button>
+          <Button
+            onClick={() => setFilter(MESSAGE_TYPES.FATAL)}
+            className={`w-full ${filter === MESSAGE_TYPES.FATAL ? 'bg-zinc-800 hover:bg-zinc-700' : 'hover:bg-zinc-900'}`}
+          >
+            <IconWarning strokeWidth={1.5} />
+            <p className="md:block hidden text-center flex-grow">Fatal</p>
+          </Button>
+          <Button
+            onClick={() => setFilter(MESSAGE_TYPES.DEBUG)}
+            className={`w-full ${filter === MESSAGE_TYPES.DEBUG ? 'bg-zinc-800 hover:bg-zinc-700' : 'hover:bg-zinc-900'}`}
+          >
+            <IconLogs strokeWidth={1.5} />
+            <p className="md:block hidden text-center flex-grow">Debug</p>
+          </Button>
+          <Button
+            onClick={() => setFilter(MESSAGE_TYPES.LOGGING)}
+            className={`w-full ${filter === MESSAGE_TYPES.LOGGING ? 'bg-zinc-800 hover:bg-zinc-700' : 'hover:bg-zinc-900'}`}
+          >
+            <IconLogs strokeWidth={1.5} />
+            <p className="md:block hidden text-center flex-grow">Logs</p>
+          </Button>
         </div>
         <div
           ref={logContainerRef}
@@ -97,20 +139,34 @@ const Logs: React.FC = () => {
           onScroll={handleScroll}
         >
           <ul className="space-y-2">
-            {filteredLogs.map((log, index) => (
-              <li
-                key={index}
-                className={`text-sm hover:bg-zinc-900 font-geistMono break-words whitespace-pre-wrap ${
-                  log.type === 'error'
-                    ? 'text-red-500'
-                    : log.type === 'message'
-                      ? 'text-yellow-500'
-                      : 'text-gray-500'
-                }`}
-              >
-                [{log.date}] {log.type}: {log.log}
-              </li>
-            ))}
+            {filteredLogs.length > 0 ? (
+              filteredLogs.map((log, index) => (
+                <li
+                  key={index}
+                  className={`relative group text-sm hover:bg-zinc-900 items-center flex overflow-auto justify-between w-full font-geistMono break-words whitespace-pre-wrap ${
+                    log.type === MESSAGE_TYPES.ERROR
+                      ? 'text-red-500'
+                      : log.type === MESSAGE_TYPES.MESSAGE
+                        ? 'text-yellow-500'
+                        : log.type === MESSAGE_TYPES.WARNING
+                          ? 'text-orange-500'
+                          : log.type === MESSAGE_TYPES.FATAL
+                            ? 'text-red-700'
+                            : log.type === MESSAGE_TYPES.DEBUG
+                              ? 'text-blue-500'
+                              : 'text-gray-500'
+                  }`}
+                  onClick={() => setHoveredLog(log.trace || null)}
+                >
+                  <p className="break-words">{log.log}</p>
+                  <p className="text-xs italic text-gray-600 text-nowrap">
+                    [{new Date(log.date as string).toLocaleTimeString()} {log.source}]
+                  </p>
+                </li>
+              ))
+            ) : (
+              <li className="text-sm text-white">No logs available for filter {filter}.</li>
+            )}
           </ul>
         </div>
       </MainElement>
diff --git a/DeskThingServer/src/renderer/src/pages/Downloads/AppDownloads.tsx b/DeskThingServer/src/renderer/src/pages/Downloads/AppDownloads.tsx
index e404da2..3f8ddd2 100644
--- a/DeskThingServer/src/renderer/src/pages/Downloads/AppDownloads.tsx
+++ b/DeskThingServer/src/renderer/src/pages/Downloads/AppDownloads.tsx
@@ -1,19 +1,13 @@
 import React, { useState } from 'react'
 import Sidebar from '@renderer/nav/Sidebar'
 import Button from '@renderer/components/Button'
-import {
-  IconDownload,
-  IconLink,
-  IconLoading,
-  IconLogs,
-  IconPlay,
-  IconUpload
-} from '@renderer/assets/icons'
+import { IconDownload, IconLink, IconLoading, IconLogs, IconUpload } from '@renderer/assets/icons'
 import { useAppStore, useGithubStore, usePageStore } from '@renderer/stores'
 import MainElement from '@renderer/nav/MainElement'
 import { AppReturnData } from '@shared/types'
 import DownloadNotification from '@renderer/overlays/DownloadNotification'
 import Overlay from '@renderer/overlays/Overlay'
+import { SuccessNotification } from '@renderer/overlays/SuccessNotification'
 
 const AppDownloads: React.FC = () => {
   // Getting releases to show
@@ -162,24 +156,11 @@ const AppDownloads: React.FC = () => {
         </Overlay>
       )}
       {appReturnData && (
-        <Overlay
-          onClose={() => setAppReturnData(null)}
-          className="border bg-zinc-950 border-zinc-800 pt-16 p-5"
-        >
-          <h1 className="text-2xl text-green-500">Successfully Downloaded</h1>
-          <p>{appReturnData.appName} is installed</p>
-          <p>v{appReturnData.appVersion}</p>
-          <Button
-            className="hover:bg-zinc-700 flex gap-2 bg-black border border-zinc-800"
-            onClick={() => {
-              setAppReturnData(null)
-              runApp(appReturnData.appId)
-            }}
-          >
-            <IconPlay className="fill-white" />
-            <p>Initialize App</p>
-          </Button>
-        </Overlay>
+        <SuccessNotification
+          runApp={runApp}
+          setAppReturnData={setAppReturnData}
+          appReturnData={appReturnData}
+        />
       )}
       <Sidebar className="flex justify-end flex-col h-full max-h-full md:items-stretch items-center">
         <div>
diff --git a/DeskThingServer/src/renderer/src/stores/keyStore.ts b/DeskThingServer/src/renderer/src/stores/keyStore.ts
index 6a01392..79647a5 100644
--- a/DeskThingServer/src/renderer/src/stores/keyStore.ts
+++ b/DeskThingServer/src/renderer/src/stores/keyStore.ts
@@ -113,12 +113,7 @@ const useKeyMapStore = create<KeyMapStoreState>((set) => ({
   },
 
   // Update a specific button mapping for a key and Mode in the selected profile
-  updateButtonMapping: (
-    profile: string,
-    keyId: string,
-    Mode: EventMode,
-    action: Action
-  ): void => {
+  updateButtonMapping: (profile: string, keyId: string, Mode: EventMode, action: Action): void => {
     set((state) => {
       if (!state.mappingStructure) return state
 
diff --git a/DeskThingServer/src/renderer/src/stores/logStore.ts b/DeskThingServer/src/renderer/src/stores/logStore.ts
index 2930909..711b7ee 100644
--- a/DeskThingServer/src/renderer/src/stores/logStore.ts
+++ b/DeskThingServer/src/renderer/src/stores/logStore.ts
@@ -1,10 +1,5 @@
 import { create } from 'zustand'
-
-export interface Log {
-  type: string
-  log: string
-  date: string
-}
+import { Log, MESSAGE_TYPES } from '@shared/types'
 
 interface LogStoreState {
   logList: Log[]
@@ -12,14 +7,14 @@ interface LogStoreState {
   maxNumLogs: number
 
   getLogs: () => Promise<Log[]>
-  addLog: (type: string, log: string) => void
-  addLogsFromFile: (logs: string[]) => void
+  addLog: (log: Log) => void
+  addLogsFromFile: (logs: Log[]) => void
 }
 
 const useLogStore = create<LogStoreState>((set, get) => ({
   logList: [],
   maxLogLength: 1000,
-  maxNumLogs: 100,
+  maxNumLogs: 300,
 
   getLogs: async (): Promise<Log[]> => {
     const { logList } = get()
@@ -32,54 +27,45 @@ const useLogStore = create<LogStoreState>((set, get) => ({
     }
   },
 
-  addLog: (type: string, log: string): void => {
-    if (typeof log !== 'string') {
-      console.error('Log is not a string')
-      log = JSON.stringify(log)
+  addLog: (log: Log): void => {
+    if (typeof log.log !== 'string') {
+      try {
+        if (log.log === null) {
+          log.log = 'null'
+        } else if (log.log === undefined) {
+          log.log = 'undefined'
+        } else if (typeof log.log === 'object') {
+          log.log = JSON.stringify(log.log, null, 2)
+        } else {
+          log.log = String(log.log)
+        }
+      } catch (error) {
+        console.error('Failed to convert log to string:', log, error)
+        log.log = '[Unconvertible Value]'
+      }
     }
     const { maxLogLength, maxNumLogs } = get()
-    const truncatedLog = log.length > maxLogLength ? `${log.substring(0, maxLogLength)}...` : log
+    const truncatedLog =
+      log.log.length > maxLogLength ? `${log.log.substring(0, maxLogLength)}...` : log.log
 
     const newLog = {
-      type: type,
-      log: truncatedLog,
-      date: new Date().toLocaleTimeString()
+      ...log,
+      log: truncatedLog
     }
 
     set((state) => ({
-      logList: [...state.logList, newLog].slice(-maxNumLogs)
+      logList: [...state.logList, newLog as Log].slice(-maxNumLogs)
     }))
 
-    // Emit events (you might want to implement a custom event system or use a library)
-    // For now, we'll just log to console
-    if (type === 'error' || type === 'message') {
-      console.log('New log', newLog)
+    if (log.type != MESSAGE_TYPES.LOGGING) {
+      console.log(newLog)
     }
   },
-
-  addLogsFromFile: (logs: string[]): void => {
-    const { maxLogLength, maxNumLogs } = get()
-    const parsedLogs = logs
-      .map((log) => {
-        const parsedLog = parseLog(log)
-        if (parsedLog) {
-          const truncatedLog =
-            parsedLog.log.length > maxLogLength
-              ? `${parsedLog.log.substring(0, maxLogLength)}...`
-              : parsedLog.log
-
-          return {
-            type: parsedLog.type,
-            log: truncatedLog,
-            date: parsedLog.date
-          }
-        }
-        return null
-      })
-      .filter((log): log is Log => log !== null)
-
+  addLogsFromFile: (logs: Log[]): void => {
+    const { maxNumLogs } = get()
+    console.log('adding logs from file', logs)
     set((state) => ({
-      logList: [...state.logList, ...parsedLogs].slice(-maxNumLogs)
+      logList: [...state.logList, ...logs].slice(-maxNumLogs)
     }))
 
     // Emit update event (for now, just log to console)
@@ -87,20 +73,4 @@ const useLogStore = create<LogStoreState>((set, get) => ({
   }
 }))
 
-function parseLog(log: string): Log | null {
-  const logRegex = /^\[(.*?)\]: (\w+) \| (.*)$/
-  const match = log.match(logRegex)
-  if (match) {
-    const [, timestamp, type, message] = match
-    return {
-      type: type,
-      log: message,
-      date: timestamp
-    }
-  } else {
-    console.error('Failed to parse log:', log)
-  }
-  return null
-}
-
 export default useLogStore
diff --git a/DeskThingServer/src/renderer/src/stores/notificationStore.ts b/DeskThingServer/src/renderer/src/stores/notificationStore.ts
index 3ce78ca..e39418c 100644
--- a/DeskThingServer/src/renderer/src/stores/notificationStore.ts
+++ b/DeskThingServer/src/renderer/src/stores/notificationStore.ts
@@ -1,5 +1,5 @@
 import { create } from 'zustand'
-import { Log } from './logStore'
+import { Log, MESSAGE_TYPES } from '@shared/types'
 
 export interface AuthScopes {
   [key: string]: {
@@ -40,7 +40,7 @@ interface NotificationStoreState {
   // Logs
 
   readLog: (index?: number) => void
-  addLog: (type: string, message: string) => void
+  addLog: (log: Log) => void
 
   // Tasks
   resolveTask: (taskId: string) => void
@@ -92,15 +92,11 @@ const useNotificationStore = create<NotificationStoreState>((set, get) => ({
     get().calculateTotalTasks()
   },
 
-  addLog: (type: string, message: string): void => {
-    const newLog = {
-      type: type,
-      log: message,
-      date: new Date().toLocaleTimeString()
-    }
+  addLog: (log: Log): void => {
+    if (log.type === MESSAGE_TYPES.LOGGING) return
 
     set((state) => ({
-      logs: [newLog, ...state.logs]
+      logs: [log, ...state.logs]
     }))
 
     get().calculateTotalTasks()
diff --git a/DeskThingServer/src/renderer/src/stores/settingsStore.ts b/DeskThingServer/src/renderer/src/stores/settingsStore.ts
index ce8b881..1b0ab54 100644
--- a/DeskThingServer/src/renderer/src/stores/settingsStore.ts
+++ b/DeskThingServer/src/renderer/src/stores/settingsStore.ts
@@ -1,5 +1,5 @@
 import { create } from 'zustand'
-import { Settings } from '@shared/types'
+import { LOGGING_LEVEL, Settings } from '@shared/types'
 
 interface SettingsStoreState {
   settings: Settings
@@ -19,6 +19,7 @@ const useSettingsStore = create<SettingsStoreState>((set, get) => ({
     devicePort: -1,
     address: '-.-.-.-',
     autoStart: true,
+    LogLevel: LOGGING_LEVEL.PRODUCTION,
     minimizeApp: true,
     autoConfig: false,
     globalADB: false,
diff --git a/DeskThingServer/src/shared/types/types.ts b/DeskThingServer/src/shared/types/types.ts
index 6470790..e9db522 100644
--- a/DeskThingServer/src/shared/types/types.ts
+++ b/DeskThingServer/src/shared/types/types.ts
@@ -138,6 +138,7 @@ export interface Settings {
   version: string
   version_code: number
   callbackPort: number
+  LogLevel: LOGGING_LEVEL
   devicePort: number
   address: string
   autoStart: boolean
@@ -159,3 +160,36 @@ export interface StatusMessage {
   weight: number
   minimum: number
 }
+
+/**
+ * The MESSAGE_TYPES object defines a set of constants that represent the different types of messages that can be sent or received in the application.
+ * Error, Log, Message, Warning, Fatal, and Debugging.
+ */
+export enum MESSAGE_TYPES {
+  ERROR = 'error',
+  LOGGING = 'log',
+  MESSAGE = 'message',
+  WARNING = 'warning',
+  FATAL = 'fatal',
+  DEBUG = 'debugging'
+}
+
+/**
+ * The LOGGING_LEVEL object defines a set of constants that represent the different levels of logging that can be used in the application.
+ * These levels are used to determine which logs should be displayed in the application.
+ * The levels are: SYSTEM, APPS, and PRODUCTION.
+ * The SYSTEM level is used for system-level logs, the APPS level is used for app and client emitted logs, and the PRODUCTION level is used for only errors, warnings, debugging, and fatal logs.
+ */
+export enum LOGGING_LEVEL {
+  SYSTEM = 'system', // All system-level logs
+  APPS = 'apps', // all app and client emitted logs
+  PRODUCTION = 'production' // Only errors, warnings, debugging, and fatal logs
+}
+
+export interface Log {
+  source: string
+  type: MESSAGE_TYPES
+  log: string
+  trace?: string
+  date?: string
+}
diff --git a/DeskThingServer/tailwind.config.js b/DeskThingServer/tailwind.config.js
index 20fdbbd..398d7cd 100644
--- a/DeskThingServer/tailwind.config.js
+++ b/DeskThingServer/tailwind.config.js
@@ -10,7 +10,7 @@ module.exports = {
       },
       keyframes: {
         fade: {
-          '0%': { opacity: 0.5, transform: 'translateY(-30px)' },
+          '0%': { opacity: 0, transform: 'translateY(-10px)' },
           '100%': { opacity: 1, transform: 'translateY(0px)' }
         },
         'fade-in-down': {