diff --git a/package-lock.json b/package-lock.json
index e0414c9..85f8645 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,15 +6,19 @@
   "packages": {
     "": {
       "name": "albumate",
-      "version": "1.0.0",
+      "version": "0.1.0",
       "hasInstallScript": true,
+      "license": "MIT",
       "dependencies": {
         "@electron-toolkit/preload": "^3.0.1",
         "@electron-toolkit/utils": "^3.0.0",
+        "@radix-ui/react-tooltip": "^1.1.3",
         "conf": "^13.0.1",
         "electron-store": "^10.0.0",
         "electron-updater": "^6.1.7",
         "notistack": "^3.0.1",
+        "path-browserify": "^1.0.1",
+        "react-complex-tree": "^2.4.5",
         "react-icons": "^5.3.0",
         "react-modal": "^3.16.1",
         "react-router-dom": "^6.27.0",
@@ -26,6 +30,7 @@
         "@electron-toolkit/eslint-config-ts": "^2.0.0",
         "@electron-toolkit/tsconfig": "^1.0.1",
         "@types/node": "^20.14.8",
+        "@types/path-browserify": "^1.0.3",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@types/react-modal": "^3.16.3",
@@ -1214,6 +1219,19 @@
         "@floating-ui/utils": "^0.2.8"
       }
     },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@floating-ui/utils": {
       "version": "0.2.8",
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
@@ -1551,6 +1569,411 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
+      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
+      "integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
+      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
+      "integrity": "sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.3.tgz",
+      "integrity": "sha512-Z4w1FIS0BqVFI2c1jZvb/uDVJijJjJ2ZMuPV81oVgTZ7g3BZxobplnMVvXtFWgtozdvYJ+MFWtwkM5S2HnAong==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+      "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
+      "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
+      "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
+      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==",
+      "license": "MIT"
+    },
     "node_modules/@remix-run/router": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
@@ -1917,6 +2340,13 @@
         "undici-types": "~6.19.2"
       }
     },
+    "node_modules/@types/path-browserify": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/path-browserify/-/path-browserify-1.0.3.tgz",
+      "integrity": "sha512-ZmHivEbNCBtAfcrFeBCiTjdIc2dey0l7oCGNGpSuRTy8jP6UVND7oUowlvDujBy8r2Hoa8bfFUOCiPWfmtkfxw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/plist": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/plist/-/plist-3.0.5.tgz",
@@ -1932,13 +2362,13 @@
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
       "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.3.11",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.11.tgz",
       "integrity": "sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1948,7 +2378,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -7189,6 +7619,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -7623,6 +8059,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-complex-tree": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/react-complex-tree/-/react-complex-tree-2.4.5.tgz",
+      "integrity": "sha512-RcdgHxe7uUlRHeHS8im1izuIZko3sbtrfR1ZbMuGi3I83AfpuAfQSzhCU7lNRKgAYCDyRGq+92N06uz8Wp3BDg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/lukasbach"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
diff --git a/package.json b/package.json
index d7eb962..c9c2e99 100644
--- a/package.json
+++ b/package.json
@@ -32,10 +32,13 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.1",
     "@electron-toolkit/utils": "^3.0.0",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "conf": "^13.0.1",
     "electron-store": "^10.0.0",
     "electron-updater": "^6.1.7",
     "notistack": "^3.0.1",
+    "path-browserify": "^1.0.1",
+    "react-complex-tree": "^2.4.5",
     "react-icons": "^5.3.0",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.27.0",
@@ -47,6 +50,7 @@
     "@electron-toolkit/eslint-config-ts": "^2.0.0",
     "@electron-toolkit/tsconfig": "^1.0.1",
     "@types/node": "^20.14.8",
+    "@types/path-browserify": "^1.0.3",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-modal": "^3.16.3",
diff --git a/src/main/ipcHandlers.ts b/src/main/ipcHandlers.ts
index c84d206..335d69e 100644
--- a/src/main/ipcHandlers.ts
+++ b/src/main/ipcHandlers.ts
@@ -102,4 +102,11 @@ export const setupIpcHandlers = (webContents: Electron.WebContents, store: Store
     }
     throw new Error('Model provider not initialized or not found');
   });
+
+  ipcMain.handle('remove-images-in-folder', async (_event, folderPath: string) => {
+    const images = store.getImages();
+    const updatedImages = images.filter((image) => !image.id.startsWith(folderPath));
+    store.setImages(updatedImages);
+    return updatedImages;
+  });
 };
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 149781d..31ae95b 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -10,7 +10,7 @@ const api = {
   saveSettings: (settings: Settings): Promise<void> => ipcRenderer.invoke('save-settings', settings),
   getSettings: (): Promise<Settings> => ipcRenderer.invoke('get-settings'),
   selectFolder: (): Promise<{ success: boolean; path?: string }> => ipcRenderer.invoke('select-folder'),
-  addFolder: (folderPath: string, includeSubdirs: boolean): Promise<{ success: boolean; message?: string }> => 
+  addFolder: (folderPath: string, includeSubdirs: boolean): Promise<{ success: boolean; message?: string }> =>
     ipcRenderer.invoke('add-folder', folderPath, includeSubdirs),
   getImages: (): Promise<Image[]> => ipcRenderer.invoke('get-images'),
   generateImageCaption: (image: Image): Promise<string> => ipcRenderer.invoke('generate-image-caption', image),
@@ -28,6 +28,7 @@ const api = {
     }
   },
   getModels: (settings: Settings): Promise<string[]> => ipcRenderer.invoke('get-models', settings),
+  removeImagesInFolder: (folderPath: string): Promise<Image[]> => ipcRenderer.invoke('remove-images-in-folder', folderPath),
 };
 
 // Use `contextBridge` APIs to expose Electron APIs to
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 13e61a2..6218020 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -1,8 +1,9 @@
-import { Link, Navigate, Route, Routes, useNavigate } from 'react-router-dom';
+import { Link, Route, Routes, useNavigate } from 'react-router-dom';
 import { HiCog, HiHome } from 'react-icons/hi';
 import { useEffect } from 'react';
 import Home from './components/Home';
 import SettingsScreen from './components/SettingsScreen';
+import FolderSettings from './components/FolderSettings';
 import Modal from 'react-modal';
 import icon from './assets/icon.png';
 
@@ -11,7 +12,7 @@ const App = () => {
 
   useEffect(() => {
     Modal.setAppElement('#app');
-    navigate('/home');
+    navigate('/home', { replace: true });
   }, []);
 
   return (
@@ -22,7 +23,7 @@ const App = () => {
           <h1 className="text-2xl font-bold text-gray-800 uppercase">Albumate</h1>
         </div>
         <nav className="mt-6">
-          <Link to="/" className="flex items-center px-6 py-3 text-gray-700 hover:bg-gray-200">
+          <Link to="/home" className="flex items-center px-6 py-3 text-gray-700 hover:bg-gray-200">
             <HiHome className="w-5 h-5 mr-3" />
             Home
           </Link>
@@ -37,9 +38,10 @@ const App = () => {
         <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100">
           <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
             <Routes>
-              <Route path="/" element={<Navigate to="/home" />} />
+              <Route path="/" element={<Home />} />
               <Route path="/home" element={<Home />} />
               <Route path="/settings" element={<SettingsScreen />} />
+              <Route path="/folder-settings" element={<FolderSettings />} />
             </Routes>
           </div>
         </main>
diff --git a/src/renderer/src/components/FolderSettings.tsx b/src/renderer/src/components/FolderSettings.tsx
new file mode 100644
index 0000000..45e66c6
--- /dev/null
+++ b/src/renderer/src/components/FolderSettings.tsx
@@ -0,0 +1,195 @@
+import { useEffect, useMemo, useState } from 'react';
+import { StaticTreeDataProvider, Tree, UncontrolledTreeEnvironment } from 'react-complex-tree';
+import '@renderer/styles/TreeStyles.css';
+import { HiArrowLeft, HiTrash } from 'react-icons/hi';
+import RemoveFolderConfirmDialog from './RemoveFolderConfirmDialog';
+import { useNavigate } from 'react-router-dom';
+import path from 'path-browserify';
+import { Image } from '@shared/types';
+
+interface TreeItem {
+  index: string;
+  isFolder: boolean;
+  children: string[];
+  data: string;
+}
+
+const FolderSettings = () => {
+  const [images, setImages] = useState<Image[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [confirmDialog, setConfirmDialog] = useState<{ isOpen: boolean; folderPath: string }>({
+    isOpen: false,
+    folderPath: '',
+  });
+
+  useEffect(() => {
+    const loadImages = async () => {
+      try {
+        const fetchedImages = await window.api.getImages();
+        console.log(fetchedImages);
+        setImages(fetchedImages);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    void loadImages();
+  }, []);
+  const navigate = useNavigate();
+
+  const treeData = useMemo(() => {
+    const items: Record<string, TreeItem> = {
+      root: {
+        index: 'root',
+        isFolder: true,
+        children: [],
+        data: 'Root',
+      },
+    };
+
+    // Process each image path to build the tree structure
+    images.forEach((image) => {
+      const imagePath = image.id;
+      // Handle Windows drive letters and root paths
+      const parts = imagePath.split(path.sep);
+      const dirParts = parts.slice(0, -1); // Skip the last part (filename)
+
+      // Handle root path specially
+      let currentPath = parts[0];
+      if (currentPath === '') {
+        currentPath = path.sep; // Unix root
+      }
+
+      // Add root path if not exists
+      if (!items[currentPath]) {
+        items[currentPath] = {
+          index: currentPath,
+          isFolder: true,
+          children: [],
+          data: currentPath,
+        };
+        items.root.children.push(currentPath);
+      }
+
+      // Start from index 1 since we handled root specially
+      // Process remaining path parts
+      for (let i = 1; i < dirParts.length; i++) {
+        const part = dirParts[i];
+        if (!part) continue; // Skip empty parts
+
+        const fullPath = path.join(currentPath, part);
+        currentPath = fullPath;
+
+        if (!items[fullPath]) {
+          items[fullPath] = {
+            index: fullPath,
+            isFolder: true,
+            children: [],
+            data: part,
+          };
+
+          // Add to parent's children
+          const parentPath = path.dirname(fullPath);
+          const parent = items[parentPath];
+
+          if (parent && !parent.children.includes(fullPath)) {
+            parent.children.push(fullPath);
+          }
+        }
+      }
+    });
+
+    console.log(items);
+
+    return items;
+  }, [images]);
+
+  return (
+    <div className="p-6">
+      <div className="flex items-center mb-6">
+        <button onClick={() => navigate('/')} className="mr-4 p-2 rounded-full hover:bg-gray-100">
+          <HiArrowLeft className="h-6 w-6" />
+        </button>
+        <h1 className="text-2xl font-bold">Folder Settings</h1>
+      </div>
+
+      <div className="bg-white rounded-lg shadow p-4 overflow-auto" style={{ height: 'calc(100vh - 200px)' }}>
+        {isLoading ? (
+          <div className="h-full flex items-center justify-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+          </div>
+        ) : (
+          <UncontrolledTreeEnvironment
+            key={images.length} // Add key to force re-render when images change
+            dataProvider={
+              new StaticTreeDataProvider(treeData, (item) => ({
+                ...item,
+                canMove: false,
+                canRename: false,
+              }))
+            }
+            getItemTitle={(item) => item.data}
+            viewState={{
+              'folder-tree': {
+                expandedItems: Object.keys(treeData),
+              },
+            }}
+            canDragAndDrop={false}
+            canDropOnFolder={false}
+            canReorderItems={false}
+          >
+            <Tree
+              treeId="folder-tree"
+              rootItem="root"
+              renderItem={({ item, title, arrow, children }) => (
+                <>
+                  <div className="flex items-center justify-between w-full pr-2">
+                    <div className="flex items-center">
+                      {arrow}
+                      <span className="ml-1">{title}</span>
+                    </div>
+                    {item.isFolder && (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setConfirmDialog({
+                            isOpen: true,
+                            folderPath: (item as TreeItem).index,
+                          });
+                        }}
+                        className="p-1 rounded hover:bg-gray-200 text-gray-600 hover:text-red-600"
+                      >
+                        <HiTrash className="w-4 h-4" />
+                      </button>
+                    )}
+                  </div>
+                  {children}
+                </>
+              )}
+              renderItemArrow={({ item, context }) =>
+                item.children?.length ? (
+                  <div className={`rct-tree-item-arrow ${context.isExpanded ? 'rct-tree-item-arrow-expanded' : ''}`}>
+                    <span style={{ fontSize: '10px' }}>▶</span>
+                  </div>
+                ) : (
+                  <div className="rct-tree-item-arrow" />
+                )
+              }
+            />
+          </UncontrolledTreeEnvironment>
+        )}
+      </div>
+      <RemoveFolderConfirmDialog
+        isOpen={confirmDialog.isOpen}
+        onRequestClose={() => setConfirmDialog({ isOpen: false, folderPath: '' })}
+        onConfirm={async () => {
+          const updatedImages = await window.api.removeImagesInFolder(confirmDialog.folderPath);
+          setImages(updatedImages);
+        }}
+        title="Remove Folder"
+        message={`Are you sure you want to remove all images in "${confirmDialog.folderPath}" from the application? This won't delete the actual files from your disk.`}
+      />
+    </div>
+  );
+};
+
+export default FolderSettings;
diff --git a/src/renderer/src/components/Home.tsx b/src/renderer/src/components/Home.tsx
index d79f656..3272d69 100644
--- a/src/renderer/src/components/Home.tsx
+++ b/src/renderer/src/components/Home.tsx
@@ -1,5 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { HiFolderAdd, HiOutlineRefresh, HiSearch } from 'react-icons/hi';
+import { HiFolderAdd, HiOutlineRefresh, HiSearch, HiCog } from 'react-icons/hi';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { useNavigate } from 'react-router-dom';
 import Modal from 'react-modal';
 import { Image } from '@shared/types';
 import ImageDetails from './ImageDetails';
@@ -8,6 +10,7 @@ import Pager from './Pager';
 import AddFolderModal from './AddFolderModal';
 
 const Home = () => {
+  const navigate = useNavigate();
   const { enqueueSnackbar } = useSnackbar();
   const [searchQuery, setSearchQuery] = useState('');
   const [images, setImages] = useState<Image[]>([]);
@@ -100,6 +103,24 @@ const Home = () => {
           <HiFolderAdd className="mr-2 h-5 w-5" />
           Add Folder
         </button>
+        <Tooltip.Provider>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <button
+                onClick={() => navigate('/folder-settings')}
+                className="p-2 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+              >
+                <HiCog className="h-5 w-5" />
+              </button>
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content className="bg-gray-900 text-white px-2 py-1 rounded text-sm" sideOffset={5}>
+                Folder Settings
+                <Tooltip.Arrow className="fill-gray-900" />
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+        </Tooltip.Provider>
       </div>
 
       <Pager
diff --git a/src/renderer/src/components/RemoveFolderConfirmDialog.tsx b/src/renderer/src/components/RemoveFolderConfirmDialog.tsx
new file mode 100644
index 0000000..e160379
--- /dev/null
+++ b/src/renderer/src/components/RemoveFolderConfirmDialog.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+type Props = {
+  isOpen: boolean;
+  onRequestClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+};
+
+const RemoveFolderConfirmDialog: React.FC<Props> = ({ isOpen, onRequestClose, onConfirm, title, message }) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+        <h2 className="text-xl font-bold mb-4">{title}</h2>
+        <p className="text-gray-600 mb-6">{message}</p>
+        <div className="flex justify-end space-x-4">
+          <button onClick={onRequestClose} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded">
+            Cancel
+          </button>
+          <button
+            onClick={() => {
+              onConfirm();
+              onRequestClose();
+            }}
+            className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+          >
+            Remove
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RemoveFolderConfirmDialog;
diff --git a/src/renderer/src/styles/TreeStyles.css b/src/renderer/src/styles/TreeStyles.css
new file mode 100644
index 0000000..ff1149c
--- /dev/null
+++ b/src/renderer/src/styles/TreeStyles.css
@@ -0,0 +1,35 @@
+.rct-tree-item-title-container {
+  @apply flex items-center gap-1;
+}
+
+.rct-tree-item-button {
+  @apply flex items-center py-0.5 px-1 w-full hover:bg-gray-100 transition-colors duration-200 rounded gap-1;
+}
+
+.rct-tree-item-title {
+  @apply text-sm text-gray-700;
+}
+
+.rct-tree-item-arrow {
+  @apply text-gray-400 transition-transform duration-200 text-xs inline-flex items-center justify-center flex-shrink-0;
+  transform-origin: center;
+  min-width: 16px;
+  width: 16px;
+  height: 16px;
+}
+
+.rct-tree-item-arrow-expanded {
+  @apply transform rotate-90;
+}
+
+.rct-tree-item-li {
+  @apply list-none;
+}
+
+.rct-tree-items-container {
+  @apply pl-3;
+}
+
+.rct-tree-root {
+  @apply p-0;
+}
diff --git a/src/renderer/src/types/electron.d.ts b/src/renderer/src/types/electron.d.ts
index 1e96938..50e83d2 100644
--- a/src/renderer/src/types/electron.d.ts
+++ b/src/renderer/src/types/electron.d.ts
@@ -10,6 +10,7 @@ export interface ElectronAPI {
   addImageUpdatedListener: (callback: (event: Electron.IpcRendererEvent, image: Image) => void) => string;
   removeImageUpdatedListener: (listenerId: string) => void;
   getModels: (settings: Settings) => Promise<string[]>;
+  removeImagesInFolder: (folderPath: string) => Promise<Image[]>;
 }
 
 declare global {