diff --git a/android/app/src/main/java/com/audiobookshelf/app/MyNativeAudio.kt b/android/app/src/main/java/com/audiobookshelf/app/MyNativeAudio.kt
index 86a96822..533526cf 100644
--- a/android/app/src/main/java/com/audiobookshelf/app/MyNativeAudio.kt
+++ b/android/app/src/main/java/com/audiobookshelf/app/MyNativeAudio.kt
@@ -5,6 +5,7 @@ import android.os.Handler
 import android.os.Looper
 import android.util.Log
 import androidx.core.content.ContextCompat
+import com.audiobookshelf.app.device.DeviceManager
 import com.audiobookshelf.app.server.ApiHandler
 import com.capacitorjs.plugins.app.AppPlugin
 import com.fasterxml.jackson.module.kotlin.jacksonObjectMapper
@@ -80,6 +81,23 @@ class MyNativeAudio : Plugin() {
     }
   }
 
+  @PluginMethod
+  fun playLocalLibraryItem(call:PluginCall) {
+    var localMediaItemId = call.getString("localMediaItemId", "").toString()
+    var playWhenReady = call.getBoolean("playWhenReady") == true
+
+    DeviceManager.dbManager.loadLocalMediaItem(localMediaItemId)?.let {
+      Handler(Looper.getMainLooper()).post() {
+        Log.d(tag, "Preparing Local Media item ${jacksonObjectMapper().writeValueAsString(it)}")
+        playerNotificationService.playLocalMediaItem(it, playWhenReady)
+      }
+      return call.resolve(JSObject())
+    }
+    var errObj = JSObject()
+    errObj.put("error", "Item Not Found")
+    call.resolve(errObj)
+  }
+
   @PluginMethod
   fun getLibraryItems(call: PluginCall) {
     var libraryId = call.getString("libraryId", "").toString()
diff --git a/android/app/src/main/java/com/audiobookshelf/app/PlayerNotificationService.kt b/android/app/src/main/java/com/audiobookshelf/app/PlayerNotificationService.kt
index ce79dc82..cd95a341 100644
--- a/android/app/src/main/java/com/audiobookshelf/app/PlayerNotificationService.kt
+++ b/android/app/src/main/java/com/audiobookshelf/app/PlayerNotificationService.kt
@@ -24,6 +24,7 @@ import androidx.media.MediaBrowserServiceCompat
 import androidx.media.utils.MediaConstants
 import com.anggrayudi.storage.file.isExternalStorageDocument
 import com.audiobookshelf.app.data.DbManager
+import com.audiobookshelf.app.data.LocalMediaItem
 import com.audiobookshelf.app.data.PlaybackSession
 import com.getcapacitor.Bridge
 import com.getcapacitor.JSObject
@@ -706,6 +707,10 @@ class PlayerNotificationService : MediaBrowserServiceCompat()  {
     currentPlayer.setPlaybackSpeed(1f) // TODO: Playback speed should come from settings
   }
 
+  fun playLocalMediaItem(localMediaItem: LocalMediaItem, playWhenReady:Boolean) {
+    Log.d(tag, "playLocalMediaItem ${localMediaItem}")
+  }
+
   fun initPlayer(audiobookStreamData: AudiobookStreamData) {
     currentAudiobookStreamData = audiobookStreamData
 
diff --git a/android/app/src/main/java/com/audiobookshelf/app/StorageManager.kt b/android/app/src/main/java/com/audiobookshelf/app/StorageManager.kt
index c8cd79ec..0f6d5cbc 100644
--- a/android/app/src/main/java/com/audiobookshelf/app/StorageManager.kt
+++ b/android/app/src/main/java/com/audiobookshelf/app/StorageManager.kt
@@ -10,6 +10,8 @@ import com.anggrayudi.storage.SimpleStorage
 import com.anggrayudi.storage.callback.FolderPickerCallback
 import com.anggrayudi.storage.callback.StorageAccessCallback
 import com.anggrayudi.storage.file.*
+import com.audiobookshelf.app.data.LocalFolder
+import com.audiobookshelf.app.device.DeviceManager
 import com.audiobookshelf.app.device.FolderScanner
 import com.fasterxml.jackson.module.kotlin.jacksonObjectMapper
 import com.getcapacitor.*
@@ -21,30 +23,6 @@ class StorageManager : Plugin() {
 
   lateinit var mainActivity:MainActivity
 
-  data class MediaFile(val uri: Uri, val name: String, val simplePath: String, val size: Long, val type: String, val isAudio: Boolean) {
-    fun toJSObject() : JSObject {
-      var obj = JSObject()
-      obj.put("uri", this.uri)
-      obj.put("name", this.name)
-      obj.put("simplePath", this.simplePath)
-      obj.put("size", this.size)
-      obj.put("type", this.type)
-      obj.put("isAudio", this.isAudio)
-      return obj
-    }
-  }
-
-  data class MediaFolder(val uri: Uri, val name: String, val simplePath: String, val mediaFiles:List<MediaFile>) {
-    fun toJSObject() : JSObject {
-      var obj = JSObject()
-      obj.put("uri", this.uri)
-      obj.put("name", this.name)
-      obj.put("simplePath", this.simplePath)
-      obj.put("files", this.mediaFiles.map { it.toJSObject() })
-      return obj
-    }
-  }
-
   override fun load() {
     mainActivity = (activity as MainActivity)
 
@@ -79,24 +57,19 @@ class StorageManager : Plugin() {
 
   @PluginMethod
   fun selectFolder(call: PluginCall) {
+    var mediaType = call.data.getString("mediaType", "book").toString()
+
     mainActivity.storage.folderPickerCallback = object : FolderPickerCallback {
       override fun onFolderSelected(requestCode: Int, folder: DocumentFile) {
         Log.d(TAG, "ON FOLDER SELECTED ${folder.uri} ${folder.name}")
-
         var absolutePath = folder.getAbsolutePath(activity)
-        var storageId = folder.getStorageId(activity)
         var storageType = folder.getStorageType(activity)
         var simplePath = folder.getSimplePath(activity)
-        var basePath = folder.getBasePath(activity)
 
-        var jsobj = JSObject()
-        jsobj.put("uri", folder.uri)
-        jsobj.put("absolutePath", absolutePath)
-        jsobj.put("storageId", storageId)
-        jsobj.put("storageType", storageType)
-        jsobj.put("simplePath", simplePath)
-        jsobj.put("basePath", basePath)
-        call.resolve(jsobj)
+        var localFolder = LocalFolder(folder.id, folder.name, folder.uri.toString(),absolutePath, simplePath, storageType.toString(), mediaType)
+
+        DeviceManager.dbManager.saveLocalFolder(localFolder)
+        call.resolve(JSObject(jacksonObjectMapper().writeValueAsString(localFolder)))
       }
 
       override fun onStorageAccessDenied(requestCode: Int, folder: DocumentFile?, storageType: StorageType) {
@@ -155,19 +128,22 @@ class StorageManager : Plugin() {
 
   @PluginMethod
   fun searchFolder(call: PluginCall) {
-    var folderUrl = call.data.getString("folderUrl", "").toString()
-    var mediaType = call.data.getString("mediaType", "book").toString()
-    Log.d(TAG, "Searching folder $folderUrl")
-
-    var folderScanner = FolderScanner(context)
-    var folderScanResult = folderScanner.scanForMediaItems(folderUrl, mediaType)
-    if (folderScanResult == null) {
-      Log.d(TAG, "NO Scan DATA")
-      call.resolve(JSObject())
-    } else {
-      Log.d(TAG, "Scan DATA ${jacksonObjectMapper().writeValueAsString(folderScanResult)}")
-      call.resolve(JSObject(jacksonObjectMapper().writeValueAsString(folderScanResult)))
+    var folderId =  call.data.getString("folderId", "").toString()
+    var folder: LocalFolder? = DeviceManager.dbManager.loadLocalFolder(folderId)
+    folder?.let {
+      Log.d(TAG, "Searching folder ${it.contentUrl}")
+      var folderScanner = FolderScanner(context)
+      var folderScanResult = folderScanner.scanForMediaItems(it.contentUrl, it.mediaType)
+      if (folderScanResult == null) {
+        Log.d(TAG, "NO Scan DATA")
+        return call.resolve(JSObject())
+      } else {
+        Log.d(TAG, "Scan DATA ${jacksonObjectMapper().writeValueAsString(folderScanResult)}")
+        return call.resolve(JSObject(jacksonObjectMapper().writeValueAsString(folderScanResult)))
+      }
     }
+    Log.d(TAG, "Folder not found $folderId")
+    call.resolve(JSObject())
 
 //
 //    var df: DocumentFile? = DocumentFileCompat.fromUri(context, Uri.parse(folderUrl))
diff --git a/android/app/src/main/java/com/audiobookshelf/app/data/DbManager.kt b/android/app/src/main/java/com/audiobookshelf/app/data/DbManager.kt
index dc86d58d..fd04bf07 100644
--- a/android/app/src/main/java/com/audiobookshelf/app/data/DbManager.kt
+++ b/android/app/src/main/java/com/audiobookshelf/app/data/DbManager.kt
@@ -1,6 +1,7 @@
 package com.audiobookshelf.app.data
 
 import android.util.Log
+import com.fasterxml.jackson.module.kotlin.jacksonObjectMapper
 import com.getcapacitor.JSObject
 import com.getcapacitor.Plugin
 import com.getcapacitor.PluginCall
@@ -13,15 +14,54 @@ import org.json.JSONObject
 class DbManager : Plugin() {
   val tag = "DbManager"
 
-  fun loadDeviceData():DeviceData {
-    var deviceData:DeviceData? = Paper.book("device").read("data")
-    return deviceData ?: DeviceData(mutableListOf(),null)
+  fun loadDeviceData(): DeviceData {
+    return Paper.book("device").read("data") ?: DeviceData(mutableListOf(), null)
   }
 
   fun saveDeviceData(deviceData:DeviceData) {
     Paper.book("device").write("data", deviceData)
   }
 
+  fun loadLocalMediaItems():List<LocalMediaItem> {
+    var localMediaItems:MutableList<LocalMediaItem> = mutableListOf()
+    Paper.book("localMediaItems").allKeys.forEach {
+      var localMediaItem:LocalMediaItem? = Paper.book("localMediaItems").read(it)
+      if (localMediaItem != null) {
+        localMediaItems.add(localMediaItem)
+      }
+    }
+    return localMediaItems
+  }
+
+  fun loadLocalMediaItem(localMediaItemId:String):LocalMediaItem? {
+    return Paper.book("localMediaItems").read(localMediaItemId)
+  }
+
+  fun saveLocalMediaItems(localMediaItems:List<LocalMediaItem>) {
+    localMediaItems.map {
+      Paper.book("localMediaItems").write(it.id, it)
+    }
+  }
+
+  fun saveLocalFolder(localFolder:LocalFolder) {
+    Paper.book("localFolders").write(localFolder.id,localFolder)
+  }
+
+  fun loadLocalFolder(folderId:String):LocalFolder? {
+    return Paper.book("localFolders").read(folderId)
+  }
+
+  fun getAllLocalFolders():List<LocalFolder> {
+    var localFolders:MutableList<LocalFolder> = mutableListOf()
+    Paper.book("localFolders").allKeys.forEach {
+      var localFolder:LocalFolder? = Paper.book("localFolders").read(it)
+      if (localFolder != null) {
+        localFolders.add(localFolder)
+      }
+    }
+    return localFolders
+  }
+
   fun saveObject(db:String, key:String, value:JSONObject) {
     Log.d(tag, "Saving Object $key ${value.toString()}")
     Paper.book(db).write(key, value)
@@ -60,4 +100,26 @@ class DbManager : Plugin() {
     var jsobj = JSObject.fromJSONObject(json)
     call.resolve(jsobj)
   }
+
+  @PluginMethod
+  fun localFoldersFromWebView(call:PluginCall) {
+    var folders = getAllLocalFolders()
+    var folderObjArray = jacksonObjectMapper().writeValueAsString(folders)
+    var jsobj = JSObject()
+    jsobj.put("folders", folderObjArray)
+    call.resolve(jsobj)
+  }
+
+  @PluginMethod
+  fun loadMediaItemsInFolder(call:PluginCall) {
+    var folderId = call.getString("folderId", "").toString()
+    var localMediaItems = loadLocalMediaItems().filter {
+      it.folderId == folderId
+    }
+
+    var mediaItemsArray = jacksonObjectMapper().writeValueAsString(localMediaItems)
+    var jsobj = JSObject()
+    jsobj.put("localMediaItems", mediaItemsArray)
+    call.resolve(jsobj)
+  }
 }
diff --git a/android/app/src/main/java/com/audiobookshelf/app/data/DeviceClasses.kt b/android/app/src/main/java/com/audiobookshelf/app/data/DeviceClasses.kt
index 052ba958..54259c75 100644
--- a/android/app/src/main/java/com/audiobookshelf/app/data/DeviceClasses.kt
+++ b/android/app/src/main/java/com/audiobookshelf/app/data/DeviceClasses.kt
@@ -20,7 +20,10 @@ data class DeviceData(
 
 @JsonIgnoreProperties(ignoreUnknown = true)
 data class LocalMediaItem(
+  var id:String,
   var name: String,
+  var mediaType:String,
+  var folderId:String,
   var contentUrl:String,
   var simplePath: String,
   var absolutePath:String,
@@ -39,3 +42,14 @@ data class LocalFile(
   var mimeType:String?,
   var size:Long
 )
+
+@JsonIgnoreProperties(ignoreUnknown = true)
+data class LocalFolder(
+  var id:String,
+  var name:String?,
+  var contentUrl:String,
+  var absolutePath:String,
+  var simplePath:String,
+  var storageType:String,
+  var mediaType:String
+)
diff --git a/android/app/src/main/java/com/audiobookshelf/app/device/FolderScanner.kt b/android/app/src/main/java/com/audiobookshelf/app/device/FolderScanner.kt
index cb39c283..e5ffea44 100644
--- a/android/app/src/main/java/com/audiobookshelf/app/device/FolderScanner.kt
+++ b/android/app/src/main/java/com/audiobookshelf/app/device/FolderScanner.kt
@@ -20,6 +20,10 @@ class FolderScanner(var ctx: Context) {
        Log.e(tag, "Folder Doc File Invalid $folderUrl")
        return null
      }
+     var folderName = df.name ?: ""
+     var folderPath = df.getAbsolutePath(ctx)
+     var folderUrl = df.uri.toString()
+     var folderId = df.id
 
      var foldersFound = df.search(false, DocumentFileType.FOLDER)
 
@@ -27,7 +31,7 @@ class FolderScanner(var ctx: Context) {
 
      foldersFound.forEach {
        Log.d(tag, "Iterating over Folder Found ${it.name} | ${it.getSimplePath(ctx)} | URI: ${it.uri}")
-       var folderName = it.name ?: ""
+       var itemFolderName = it.name ?: ""
 
        var audioTracks = mutableListOf<AudioTrack>()
        var localFiles = mutableListOf<LocalFile>()
@@ -40,7 +44,7 @@ class FolderScanner(var ctx: Context) {
          var mimeType = it2?.mimeType ?: ""
          var filename = it2?.name ?: ""
          var isAudio = mimeType.startsWith("audio")
-         Log.d(tag, "Found $mimeType file $filename in folder $folderName")
+         Log.d(tag, "Found $mimeType file $filename in folder $itemFolderName")
 
          var localFile = LocalFile(it2.id,it2.name,it2.uri.toString(),it2.getAbsolutePath(ctx),it2.getSimplePath(ctx),it2.mimeType,it2.length())
          localFiles.add(localFile)
@@ -70,15 +74,16 @@ class FolderScanner(var ctx: Context) {
          }
        }
        if (audioTracks.size > 0) {
-        Log.d(tag, "Found local media item named $folderName with ${audioTracks.size} tracks")
-         var localMediaItem = LocalMediaItem(folderName, it.uri.toString(), it.getSimplePath(ctx), it.getAbsolutePath(ctx),audioTracks,localFiles,coverPath)
+        Log.d(tag, "Found local media item named $itemFolderName with ${audioTracks.size} tracks")
+         var localMediaItem = LocalMediaItem(it.id, itemFolderName, mediaType, folderId, it.uri.toString(), it.getSimplePath(ctx), it.getAbsolutePath(ctx),audioTracks,localFiles,coverPath)
          mediaItems.add(localMediaItem)
        }
      }
 
      return if (mediaItems.size > 0) {
        Log.d(tag, "Found ${mediaItems.size} Media Items")
-       FolderScanResult(df.name, df.getAbsolutePath(ctx), mediaType, df.uri.toString(), mediaItems)
+       DeviceManager.dbManager.saveLocalMediaItems(mediaItems)
+       FolderScanResult(folderName, folderPath, mediaType, folderUrl, mediaItems)
      } else {
        Log.d(tag, "No Media Items Found")
        null
diff --git a/components/app/AudioPlayerContainer.vue b/components/app/AudioPlayerContainer.vue
index 6dac10c1..9fa1cfad 100644
--- a/components/app/AudioPlayerContainer.vue
+++ b/components/app/AudioPlayerContainer.vue
@@ -488,6 +488,18 @@ export default {
         .catch((error) => {
           console.error('TEST failed', error)
         })
+    },
+    async playLocalItem(localMediaItemId) {
+      console.log('Called play local media item for lmi', localMediaItemId)
+      MyNativeAudio.playLocalLibraryItem({ localMediaItemId, playWhenReady: true })
+        .then((data) => {
+          console.log('TEST library item play response', JSON.stringify(data))
+          var mediaEntity = data.mediaEntity
+          this.$store.commit('globals/setMediaEntityPlaying', mediaEntity)
+        })
+        .catch((error) => {
+          console.error('TEST failed', error)
+        })
     }
   },
   mounted() {
@@ -499,6 +511,7 @@ export default {
 
     this.setListeners()
     this.$eventBus.$on('play-item', this.playLibraryItem)
+    this.$eventBus.$on('play-local-item', this.playLocalItem)
     this.$eventBus.$on('close_stream', this.closeStreamOnly)
     this.$store.commit('user/addSettingsListener', { id: 'streamContainer', meth: this.settingsUpdated })
   },
@@ -514,6 +527,7 @@ export default {
       this.$server.socket.off('stream_reset', this.streamReset)
     }
     this.$eventBus.$off('play-item', this.playLibraryItem)
+      this.$eventBus.$off('play-local-item', this.playLocalItem)
     this.$eventBus.$off('close_stream', this.closeStreamOnly)
     this.$store.commit('user/removeSettingsListener', 'streamContainer')
   }
diff --git a/components/app/SideDrawer.vue b/components/app/SideDrawer.vue
index bcab1bc2..cd39fb84 100644
--- a/components/app/SideDrawer.vue
+++ b/components/app/SideDrawer.vue
@@ -83,8 +83,8 @@ export default {
         {
           icon: 'folder',
           iconOutlined: true,
-          text: 'Downloads',
-          to: '/downloads'
+          text: 'Local Media',
+          to: '/localMedia/folders'
         }
         // {
         //   icon: 'settings',
diff --git a/components/ui/Btn.vue b/components/ui/Btn.vue
index 734e0d76..0b0f187f 100644
--- a/components/ui/Btn.vue
+++ b/components/ui/Btn.vue
@@ -1,8 +1,15 @@
 <template>
-  <button class="btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :type="type" :class="classList" @click="click">
+  <nuxt-link v-if="to" :to="to" class="btn outline-none rounded-md shadow-md relative border border-gray-600 text-center" :disabled="disabled || loading" :class="classList">
+    <slot />
+    <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
+      <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
+      </svg>
+    </div>
+  </nuxt-link>
+  <button v-else class="btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :type="type" :class="classList" @mousedown.prevent @click="click">
     <slot />
     <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
-      <!-- <span class="material-icons animate-spin">refresh</span> -->
       <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
         <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
       </svg>
@@ -13,6 +20,7 @@
 <script>
 export default {
   props: {
+    to: String,
     color: {
       type: String,
       default: 'primary'
@@ -46,6 +54,9 @@ export default {
       if (this.paddingX !== undefined) {
         list.push(`px-${this.paddingX}`)
       }
+      if (this.disabled) {
+        list.push('cursor-not-allowed')
+      }
       return list
     }
   },
@@ -59,7 +70,7 @@ export default {
 </script>
 
 <style>
-button.btn::before {
+.btn::before {
   content: '';
   position: absolute;
   border-radius: 6px;
@@ -70,7 +81,7 @@ button.btn::before {
   background-color: rgba(255, 255, 255, 0);
   transition: all 0.1s ease-in-out;
 }
-button.btn:hover:not(:disabled)::before {
+.btn:hover:not(:disabled)::before {
   background-color: rgba(255, 255, 255, 0.1);
 }
 button:disabled::before {
diff --git a/components/ui/Dropdown.vue b/components/ui/Dropdown.vue
new file mode 100644
index 00000000..c351ab42
--- /dev/null
+++ b/components/ui/Dropdown.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="relative w-full" v-click-outside="clickOutsideObj">
+    <p class="text-sm font-semibold" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
+    <button type="button" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none sm:text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
+      <span class="flex items-center">
+        <span class="block truncate" :class="small ? 'text-sm' : ''">{{ selectedText }}</span>
+      </span>
+      <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+        <span class="material-icons">expand_more</span>
+      </span>
+    </button>
+
+    <transition name="menu">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
+        <template v-for="item in items">
+          <li :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
+            <div class="flex items-center">
+              <span class="font-normal ml-3 block truncate font-sans text-sm">{{ item.text }}</span>
+            </div>
+          </li>
+        </template>
+      </ul>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: [String, Number],
+    label: {
+      type: String,
+      default: ''
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    disabled: Boolean,
+    small: Boolean
+  },
+  data() {
+    return {
+      clickOutsideObj: {
+        handler: this.clickedOutside,
+        events: ['mousedown'],
+        isActive: true
+      },
+      showMenu: false
+    }
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    selectedItem() {
+      return this.items.find((i) => i.value === this.selected)
+    },
+    selectedText() {
+      return this.selectedItem ? this.selectedItem.text : ''
+    },
+    buttonClass() {
+      var classes = []
+      if (this.small) classes.push('h-9')
+      else classes.push('h-10')
+
+      if (this.disabled) classes.push('cursor-not-allowed border-gray-600 bg-primary bg-opacity-70 border-opacity-70 text-gray-400')
+      else classes.push('cursor-pointer border-gray-600 bg-primary text-gray-100')
+
+      return classes.join(' ')
+    }
+  },
+  methods: {
+    clickShowMenu() {
+      if (this.disabled) return
+      this.showMenu = !this.showMenu
+    },
+    clickedOutside() {
+      this.showMenu = false
+    },
+    clickedOption(itemValue) {
+      this.selected = itemValue
+      this.showMenu = false
+    }
+  },
+  mounted() {}
+}
+</script>
\ No newline at end of file
diff --git a/pages/downloads.vue b/pages/downloads.vue
index 90994969..c08a69f8 100644
--- a/pages/downloads.vue
+++ b/pages/downloads.vue
@@ -2,6 +2,22 @@
   <div class="w-full h-full py-6">
     <h1 class="text-2xl px-4">Downloads</h1>
 
+    <div v-if="!isIos" class="w-full px-2 py-2">
+      <template v-for="folder in localFolders">
+        <div :key="folder.id" class="flex items-center p-2">
+          <div class="flex-grow">
+            <p>{{ folder.id }}|{{ folder.name }}|{{ folder.contentUrl }}</p>
+          </div>
+          <div class="w-40">
+            <ui-btn @click="searchFolder(folder.id)">Scan</ui-btn>
+          </div>
+        </div>
+      </template>
+      <div v-if="!localFolders.length" class="flex justify-center">
+        <p class="text-center">No Media Folders</p>
+      </div>
+    </div>
+
     <div v-if="!isIos" class="w-full px-2 py-2" :class="hasStoragePermission ? '' : 'text-error'">
       <div class="flex items-center">
         <span class="material-icons" @click="changeDownloadFolderClick">{{ hasStoragePermission ? 'folder' : 'error' }}</span>
@@ -25,7 +41,7 @@
         </div>
       </div>
     </div>
-    <div v-if="!isIos" class="list-content-body relative w-full overflow-x-hidden bg-primary">
+    <div v-if="!isIos" class="list-content-body relative w-full overflow-x-hidden overflow-y-auto bg-primary">
       <template v-if="showingDownloads">
         <div v-if="!totalDownloads" class="flex items-center justify-center h-40">
           <p>No Downloads</p>
@@ -52,8 +68,8 @@
       <template v-else>
         <div class="w-full h-full">
           <div class="w-full flex justify-around py-4 px-2">
-            <ui-btn small @click="searchFolder">Re-Scan</ui-btn>
-            <ui-btn small @click="changeDownloadFolderClick">Change Folder</ui-btn>
+            <!-- <ui-btn small @click="searchFolder">Re-Scan</ui-btn> -->
+            <!-- <ui-btn small @click="changeDownloadFolderClick">Change Folder</ui-btn> -->
             <ui-btn small color="error" @click="resetFolder">Reset</ui-btn>
           </div>
 
@@ -107,7 +123,8 @@ export default {
       totalSize: 0,
       showingDownloads: true,
       isScanning: false,
-      localMediaItems: []
+      localMediaItems: [],
+      localFolders: []
     }
   },
   computed: {
@@ -150,11 +167,19 @@ export default {
       if (!this.hasStoragePermission) {
         StorageManager.requestStoragePermission()
       } else {
-        var folderObj = await StorageManager.selectFolder()
+        var folderObj = await StorageManager.selectFolder({ mediaType: 'book' })
         if (folderObj.error) {
           return this.$toast.error(`Error: ${folderObj.error || 'Unknown Error'}`)
         }
-        var permissionsGood = await StorageManager.checkFolderPermissions({ folderUrl: folderObj.uri })
+
+        var indexOfExisting = this.localFolders.findIndex((lf) => lf.id == folderObj.id)
+        if (indexOfExisting >= 0) {
+          this.localFolders.splice(indexOfExisting, 1, folderObj)
+        } else {
+          this.localFolders.push(folderObj)
+        }
+
+        var permissionsGood = await StorageManager.checkFolderPermissions({ folderUrl: folderObj.contentUrl })
 
         if (!permissionsGood) {
           this.$toast.error('Folder permissions failed')
@@ -163,18 +188,17 @@ export default {
           this.$toast.success('Folder permission success')
         }
 
-        await this.$localStore.setDownloadFolder(folderObj)
-
-        await this.searchFolder()
+        // await this.$localStore.setDownloadFolder(folderObj)
+        await this.searchFolder(folderObj.id)
 
         if (this.isSocketConnected) {
           this.$store.dispatch('downloads/linkOrphanDownloads')
         }
       }
     },
-    async searchFolder() {
+    async searchFolder(folderId) {
       this.isScanning = true
-      var response = await StorageManager.searchFolder({ folderUrl: this.downloadFolderUri })
+      var response = await StorageManager.searchFolder({ folderId })
 
       if (response && response.localMediaItems) {
         this.localMediaItems = response.localMediaItems.map((mi) => {
@@ -252,10 +276,14 @@ export default {
         this.$set(this.downloadingProgress, audiobookId, progress)
       }
     },
-    init() {
+    async init() {
+      this.localFolders = (await this.$db.loadFolders()) || []
       AudioDownloader.addListener('onDownloadProgress', this.onDownloadProgress)
     }
   },
+  mounted() {
+    this.init()
+  },
   beforeDestroy() {
     AudioDownloader.removeListener('onDownloadProgress', this.onDownloadProgress)
   }
diff --git a/pages/localMedia/folders/_id.vue b/pages/localMedia/folders/_id.vue
new file mode 100644
index 00000000..3e6f4e33
--- /dev/null
+++ b/pages/localMedia/folders/_id.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="w-full h-full py-6 px-2">
+    <div class="flex justify-between mb-4">
+      <ui-btn to="/localMedia/folders">Back</ui-btn>
+      <ui-btn :loading="isScanning" @click="searchFolder">Scan</ui-btn>
+    </div>
+    <p class="text-lg mb-0.5 text-white text-opacity-75">Folder: {{ folderId }}</p>
+    <p class="mb-4 text-xl">Local Media Items ({{ localMediaItems.length }})</p>
+    <div v-if="isScanning" class="w-full text-center p-4">
+      <p>Scanning...</p>
+    </div>
+    <div v-else class="w-full media-item-container overflow-y-auto">
+      <template v-for="mediaItem in localMediaItems">
+        <div :key="mediaItem.id" class="flex my-1">
+          <div class="w-12 h-12 bg-primary">
+            <img v-if="mediaItem.coverPathSrc" :src="mediaItem.coverPathSrc" class="w-full h-full object-contain" />
+          </div>
+          <div class="flex-grow px-2">
+            <p>{{ mediaItem.name }}</p>
+            <p>{{ mediaItem.audioTracks.length }} Tracks</p>
+          </div>
+          <div class="w-12 h-12 flex items-center justify-center">
+            <button v-if="!isMissing" class="shadow-sm text-accent flex items-center justify-center rounded-full" @click.stop="play(mediaItem)">
+              <span class="material-icons" style="font-size: 2rem">play_arrow</span>
+            </button>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Capacitor } from '@capacitor/core'
+import StorageManager from '@/plugins/storage-manager'
+
+export default {
+  asyncData({ params, query }) {
+    return {
+      folderId: params.id,
+      shouldScan: !!query.scan
+    }
+  },
+  data() {
+    return {
+      localMediaItems: [],
+      isScanning: false
+    }
+  },
+  computed: {},
+  methods: {
+    play(mediaItem) {
+      this.$eventBus.$emit('play-local-item', mediaItem.id)
+    },
+    async searchFolder() {
+      this.isScanning = true
+      var response = await StorageManager.searchFolder({ folderId: this.folderId })
+
+      if (response && response.localMediaItems) {
+        this.localMediaItems = response.localMediaItems.map((mi) => {
+          if (mi.coverPath) {
+            mi.coverPathSrc = Capacitor.convertFileSrc(mi.coverPath)
+          }
+          return mi
+        })
+        console.log('Set Local Media Items', this.localMediaItems.length)
+      } else {
+        console.log('No Local media items found')
+      }
+
+      this.isScanning = false
+    },
+    async init() {
+      var items = (await this.$db.loadLocalMediaItemsInFolder(this.folderId)) || []
+      console.log('Init folder', this.folderId, items)
+      this.localMediaItems = items.map((lmi) => {
+        return {
+          ...lmi,
+          coverPathSrc: lmi.coverPath ? Capacitor.convertFileSrc(lmi.coverPath) : null
+        }
+      })
+      if (this.shouldScan) {
+        this.searchFolder()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+.media-item-container {
+  height: calc(100vh - 200px);
+  max-height: calc(100vh - 200px);
+}
+</style>
\ No newline at end of file
diff --git a/pages/localMedia/folders/index.vue b/pages/localMedia/folders/index.vue
new file mode 100644
index 00000000..28c973e2
--- /dev/null
+++ b/pages/localMedia/folders/index.vue
@@ -0,0 +1,278 @@
+<template>
+  <div class="w-full h-full py-6">
+    <h1 class="text-2xl px-4">Downloads</h1>
+
+    <div v-if="!isIos" class="w-full max-w-full px-2 py-2">
+      <template v-for="folder in localFolders">
+        <nuxt-link :to="`/localMedia/folders/${folder.id}`" :key="folder.id" class="flex items-center px-2 py-4 bg-primary rounded-md border-bg mb-1">
+          <span class="material-icons text-xl text-yellow-400">folder</span>
+          <p class="ml-2">{{ folder.id }}</p>
+          <div class="flex-grow" />
+          <p class="text-sm italic text-gray-300 px-2 capitalize">{{ folder.mediaType }}s</p>
+          <span class="material-icons text-base text-gray-300">arrow_right</span>
+        </nuxt-link>
+      </template>
+      <div v-if="!localFolders.length" class="flex justify-center">
+        <p class="text-center">No Media Folders</p>
+      </div>
+      <div class="flex p-2 border-t border-primary mt-2">
+        <div class="flex-grow pr-1">
+          <ui-dropdown v-model="newFolderMediaType" :items="mediaTypeItems" />
+        </div>
+        <ui-btn small class="w-28" @click="selectFolder">Add Folder</ui-btn>
+      </div>
+    </div>
+
+    <!-- <div v-if="!isIos" class="list-content-body relative w-full overflow-x-hidden overflow-y-auto bg-primary">
+      <template v-if="showingDownloads">
+        <div v-if="!totalDownloads" class="flex items-center justify-center h-40">
+          <p>No Downloads</p>
+        </div>
+        <ul v-else class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+          <li v-for="download in downloadsDownloading" :key="download.id" class="text-gray-400 select-none relative px-4 py-5 border-b border-white border-opacity-10 bg-black bg-opacity-10">
+            <div class="flex items-center justify-center">
+              <div class="w-3/4">
+                <span class="text-xs">({{ downloadingProgress[download.id] || 0 }}%) {{ download.isPreparing ? 'Preparing' : 'Downloading' }}...</span>
+                <p class="font-normal truncate text-sm">{{ download.audiobook.book.title }}</p>
+              </div>
+              <div class="flex-grow" />
+
+              <div class="shadow-sm text-white flex items-center justify-center rounded-full animate-spin">
+                <span class="material-icons">refresh</span>
+              </div>
+            </div>
+          </li>
+          <li v-for="download in downloadsReady" :key="download.id" class="text-gray-50 select-none relative pr-4 pl-2 py-5 border-b border-white border-opacity-10" @click="jumpToAudiobook(download)">
+            <modals-downloads-download-item :download="download" @play="playDownload" @delete="clickDeleteDownload" />
+          </li>
+        </ul>
+      </template>
+      <template v-else>
+        <div class="w-full h-full">
+          <div class="w-full flex justify-around py-4 px-2">
+            <ui-btn small color="error" @click="resetFolder">Reset</ui-btn>
+          </div>
+
+          <p v-if="isScanning" class="text-center my-8">Scanning Folder..</p>
+          <p v-else-if="!mediaScanResults" class="text-center my-8">No Files Found</p>
+          <div v-else>
+            <div v-for="mediaFolder in mediaScanResults.folders" :key="mediaFolder.uri" class="w-full px-2 py-2">
+              <div class="flex items-center">
+                <span class="material-icons text-base text-white text-opacity-50">folder</span>
+                <p class="ml-1 py-0.5">{{ mediaFolder.name }}</p>
+              </div>
+              <div v-for="mediaFile in mediaFolder.files" :key="mediaFile.uri" class="ml-3 flex items-center">
+                <span class="material-icons text-base text-white text-opacity-50">{{ mediaFile.isAudio ? 'music_note' : 'image' }}</span>
+                <p class="ml-1 py-0.5">{{ mediaFile.name }}</p>
+              </div>
+            </div>
+            <div v-for="mediaFile in mediaScanResults.files" :key="mediaFile.uri" class="w-full px-2 py-2">
+              <div class="flex items-center">
+                <span class="material-icons text-base text-white text-opacity-50">{{ mediaFile.isAudio ? 'music_note' : 'image' }}</span>
+                <p class="ml-1 py-0.5">{{ mediaFile.name }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div> -->
+  </div>
+</template>
+
+<script>
+import { Capacitor } from '@capacitor/core'
+import { Dialog } from '@capacitor/dialog'
+import AudioDownloader from '@/plugins/audio-downloader'
+import StorageManager from '@/plugins/storage-manager'
+
+export default {
+  data() {
+    return {
+      downloadingProgress: {},
+      totalSize: 0,
+      showingDownloads: true,
+      isScanning: false,
+      localMediaItems: [],
+      localFolders: [],
+      newFolderMediaType: 'book',
+      mediaTypeItems: [
+        {
+          value: 'book',
+          text: 'Books'
+        },
+        {
+          value: 'podcast',
+          text: 'Podcasts'
+        }
+      ]
+    }
+  },
+  computed: {
+    isIos() {
+      return this.$platform === 'ios'
+    },
+    isSocketConnected() {
+      return this.$store.state.socketConnected
+    },
+    hasStoragePermission() {
+      return this.$store.state.hasStoragePermission
+    },
+    downloadFolder() {
+      return this.$store.state.downloadFolder
+    },
+    downloadFolderSimplePath() {
+      return this.downloadFolder ? this.downloadFolder.simplePath : null
+    },
+    downloadFolderUri() {
+      return this.downloadFolder ? this.downloadFolder.uri : null
+    },
+    totalDownloads() {
+      return this.downloadsReady.length + this.downloadsDownloading.length
+    },
+    downloadsDownloading() {
+      return this.downloads.filter((d) => d.isDownloading || d.isPreparing)
+    },
+    downloadsReady() {
+      return this.downloads.filter((d) => !d.isDownloading && !d.isPreparing)
+    },
+    downloads() {
+      return this.$store.state.downloads.downloads
+    },
+    mediaScanResults() {
+      return this.$store.state.downloads.mediaScanResults
+    }
+  },
+  methods: {
+    async selectFolder() {
+      var folderObj = await StorageManager.selectFolder({ mediaType: this.newFolderMediaType })
+      if (folderObj.error) {
+        return this.$toast.error(`Error: ${folderObj.error || 'Unknown Error'}`)
+      }
+
+      var indexOfExisting = this.localFolders.findIndex((lf) => lf.id == folderObj.id)
+      if (indexOfExisting >= 0) {
+        this.localFolders.splice(indexOfExisting, 1, folderObj)
+      } else {
+        this.localFolders.push(folderObj)
+      }
+
+      var permissionsGood = await StorageManager.checkFolderPermissions({ folderUrl: folderObj.contentUrl })
+
+      if (!permissionsGood) {
+        this.$toast.error('Folder permissions failed')
+        return
+      } else {
+        this.$toast.success('Folder permission success')
+      }
+
+      // await this.searchFolder(folderObj.id)
+
+      this.$router.push(`/localMedia/folders/${folderObj.id}?scan=1`)
+    },
+    async changeDownloadFolderClick() {
+      if (!this.hasStoragePermission) {
+        StorageManager.requestStoragePermission()
+      } else {
+        var folderObj = await StorageManager.selectFolder({ mediaType: 'book' })
+        if (folderObj.error) {
+          return this.$toast.error(`Error: ${folderObj.error || 'Unknown Error'}`)
+        }
+
+        var indexOfExisting = this.localFolders.findIndex((lf) => lf.id == folderObj.id)
+        if (indexOfExisting >= 0) {
+          this.localFolders.splice(indexOfExisting, 1, folderObj)
+        } else {
+          this.localFolders.push(folderObj)
+        }
+
+        var permissionsGood = await StorageManager.checkFolderPermissions({ folderUrl: folderObj.contentUrl })
+
+        if (!permissionsGood) {
+          this.$toast.error('Folder permissions failed')
+          return
+        } else {
+          this.$toast.success('Folder permission success')
+        }
+        await this.searchFolder(folderObj.id)
+
+        if (this.isSocketConnected) {
+          this.$store.dispatch('downloads/linkOrphanDownloads')
+        }
+      }
+    },
+    async searchFolder(folderId) {
+      this.isScanning = true
+      var response = await StorageManager.searchFolder({ folderId })
+
+      if (response && response.localMediaItems) {
+        this.localMediaItems = response.localMediaItems.map((mi) => {
+          if (mi.coverPath) {
+            mi.coverPathSrc = Capacitor.convertFileSrc(mi.coverPath)
+          }
+          return mi
+        })
+        console.log('Set Local Media Items', this.localMediaItems.length)
+      } else {
+        console.log('No Local media items found')
+      }
+      this.isScanning = false
+    },
+    async resetFolder() {
+      await this.$localStore.setDownloadFolder(null)
+      this.$store.commit('downloads/setMediaScanResults', {})
+      this.$toast.info('Unlinked Folder')
+    },
+    jumpToAudiobook(download) {
+      this.show = false
+      this.$router.push(`/audiobook/${download.id}`)
+    },
+    async clickDeleteDownload(download) {
+      const { value } = await Dialog.confirm({
+        title: 'Confirm',
+        message: 'Delete this download?'
+      })
+      if (value) {
+        this.deleteDownload(download)
+      }
+    },
+    playDownload(download) {
+      this.$store.commit('setPlayOnLoad', true)
+      this.$store.commit('setPlayingDownload', download)
+      this.show = false
+    },
+    async deleteDownload(download) {
+      console.log('Delete download', download.filename)
+
+      if (this.$store.state.playingDownload && this.$store.state.playingDownload.id === download.id) {
+        console.warn('Deleting download when currently playing download - terminate play')
+        if (this.$refs.streamContainer) {
+          this.$refs.streamContainer.cancelStream()
+        }
+      }
+      if (download.contentUrl) {
+        await StorageManager.delete(download)
+      }
+      this.$store.commit('downloads/removeDownload', download)
+    },
+    onDownloadProgress(data) {
+      var progress = data.progress
+      var audiobookId = data.audiobookId
+
+      var downloadObj = this.$store.getters['downloads/getDownload'](audiobookId)
+      if (downloadObj) {
+        this.$set(this.downloadingProgress, audiobookId, progress)
+      }
+    },
+    async init() {
+      this.localFolders = (await this.$db.loadFolders()) || []
+      AudioDownloader.addListener('onDownloadProgress', this.onDownloadProgress)
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    AudioDownloader.removeListener('onDownloadProgress', this.onDownloadProgress)
+  }
+}
+</script>
\ No newline at end of file
diff --git a/plugins/db.js b/plugins/db.js
index cc7c0c30..05dc3a48 100644
--- a/plugins/db.js
+++ b/plugins/db.js
@@ -22,6 +22,29 @@ class DbService {
       return null
     })
   }
+
+  loadFolders() {
+    return DbManager.localFoldersFromWebView().then((data) => {
+      console.log('Loaded local folders', JSON.stringify(data))
+      if (data.folders && typeof data.folders == 'string') {
+        return JSON.parse(data.folders)
+      }
+      return data.folders
+    }).catch((error) => {
+      console.error('Failed to load', error)
+      return null
+    })
+  }
+
+  loadLocalMediaItemsInFolder(folderId) {
+    return DbManager.loadMediaItemsInFolder({ folderId }).then((data) => {
+      console.log('Loaded local media items in folder', JSON.stringify(data))
+      if (data.localMediaItems && typeof data.localMediaItems == 'string') {
+        return JSON.parse(data.localMediaItems)
+      }
+      return data.localMediaItems
+    })
+  }
 }
 
 export default ({ app, store }, inject) => {