diff --git a/CHANGELOG.md b/CHANGELOG.md
index f01821c..faa9d02 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
 ## [Unreleased]
+## [0.5.1 - 0.5.2](https://github.com/averrin/alpha-suit/compare/0.5.1...0.5.2)
+Added:
+  * Expanding dropped folders for grid
+  * [Director integration] support saved effects for grid
+  * Support dropped compendiums for grid [Compendium Folders required]
+  * [Premium, Experimental] Grid tab in the sidebar
+  * [Premium, Experimental] Grid tab in Alpha Tree
+  * Folders are now grid-droppable in Alpha Tree 
+  * [Experimental] Checkbox to search files within the current folder
+
+Known Issues:
+  * Grid can lost some data. Resizing and auto-placing can act weirdly, especially with experimental features enabled.
+
 ## [0.5.0 - 0.5.1](https://github.com/averrin/alpha-suit/compare/0.5.0...0.5.1)
 Added:
   * Titles for grid buttons
diff --git a/module.json b/module.json
index bc2d264..f57423c 100644
--- a/module.json
+++ b/module.json
@@ -14,9 +14,9 @@
     "readme": "https://github.com/averrin/alpha-suit/blob/master/README.md",
     "bugs": "https://github.com/averrin/alpha-suit/issues",
     "changelog": "https://github.com/averrin/alpha-suit/releases/latest/",
-    "version": "0.5.0-dev",
-    "minimumCoreVersion": "0.8.6",
-    "compatibleCoreVersion": "9",
+    "version": "0.6.0-dev",
+    "minimumCoreVersion": "9",
+    "compatibleCoreVersion": "10",
     "esmodules": [
         "index.js"
     ],
@@ -35,7 +35,7 @@
     "relationships": {},
     "socket": false,
     "manifest": "https://github.com/averrin/alpha-suit/releases/latest/download/module.json",
-    "download": "https://github.com/averrin/alpha-suit/releases/download/0.5.0-dev/module.zip",
+    "download": "https://github.com/averrin/alpha-suit/releases/download/0.6.0-dev/module.zip",
     "protected": false,
     "coreTranslation": false,
     "library": false,
diff --git a/package-lock.json b/package-lock.json
index 073158c..7c7b141 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "svelte-collapsible": "^0.2.1",
         "svelte-copy-to-clipboard": "^0.2.5",
         "svelte-french-toast": "^1.0.3",
-        "svelte-grid": "../svelte-grid",
+        "svelte-grid": "averrin/svelte-grid",
         "sveltejs-tippy": "^3.0.0",
         "tree-model": "^1.0.7",
         "treeverse": "^3.0.0",
diff --git a/src/apps.js b/src/apps.js
index 04e080d..c5fb588 100644
--- a/src/apps.js
+++ b/src/apps.js
@@ -27,7 +27,6 @@ export function createApps() {
     const app = new (CreateApplication(spec, props))();
     apps[spec.app_id] = app;
   }
-  logger.info(apps)
   return apps;
 }
 
diff --git a/src/index.js b/src/index.js
index ea95f3a..8ffc9fc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,7 +7,7 @@ import "iconify-icon";
 
 import { moduleId, SETTINGS, infoColor } from "./modules/constants.js";
 
-import {get} from "svelte/store"
+import { get } from "svelte/store"
 import initHelpers, { logger, moduleId as mid } from "crew-components/helpers";
 import { initStores as helperStores } from "crew-components/stores";
 
@@ -18,9 +18,11 @@ import { initSettingsTopics } from "./modules/settings_content";
 import { createApps, getApp, startGMApps, startUserApps } from "./apps";
 import { getTool, initTools } from "./tools";
 import "./systems.js";
-import {createAPI} from "./api.js";
+import { createAPI } from "./api.js";
+import GridUI_inline from "./view/GridUI_inline.svelte"
 
 import NotificationsApp from "./view/Notifications.js"
+import CreateApplication from "crew-components/AlphaApplication";
 
 initHelpers(moduleId, infoColor, SETTINGS);
 createApps();
@@ -47,11 +49,43 @@ Hooks.on('renderSceneControls', _ => {
   initTools();
 });
 
+function addSidebarTab(id, appSpec) {
+  const tabs = document.getElementById("sidebar-tabs");
+  const tab = document.createElement("a")
+  tab.classList.add("item")
+  tab.dataset.tab = id
+  const icon = document.createElement("i")
+  icon.classList.add("fas")
+  icon.classList.add("fa-icons")
+  tab.appendChild(icon)
+  tabs.prepend(tab)
+
+  const sidebar = document.getElementById("sidebar");
+  const section = document.createElement("section")
+  section.classList.add("sidebar-tab")
+  section.classList.add("tab")
+  section.id = id
+  section.dataset.tab = id
+  sidebar.appendChild(section);
+
+  //TODO: rework resizing
+  document.querySelector(':root').style.setProperty("--sidebar-width", "360px");
+
+  const igApp = new (CreateApplication(appSpec))();
+  igApp.start();
+  igApp.show()
+}
+
 Hooks.once('ready', () => {
   helperStores()
   initStores();
   startUserApps()
 
+    if (game.settings.get(moduleId, SETTINGS.GRID_IN_SIDEBAR)) {
+      const inlineGrid = { moduleId: "alpha-suit", isTemp: true, app_id: "grid", target: "#grid", title: "Alpha Grid [ALPHA]", component: GridUI_inline }
+      addSidebarTab("grid", inlineGrid)
+    }
+
   if (game.user.isGM) {
     startGMApps()
 
diff --git a/src/modules/constants.js b/src/modules/constants.js
index 45e3c7b..ed7f56f 100644
--- a/src/modules/constants.js
+++ b/src/modules/constants.js
@@ -5,6 +5,8 @@ export const FLAGS = {
 }
 
 export const SETTINGS = {
+  GRID_IN_SIDEBAR: "grid-in-sidebar",
+  GRID_IN_TREE: "grid-in-tree",
   GRID_FOR_PLAYERS: "grid-for-players",
   DEBUG: "debug",
   FILES_WHITE_LIST: "files-white-list",
diff --git a/src/modules/settings.js b/src/modules/settings.js
index f186e16..3f29228 100644
--- a/src/modules/settings.js
+++ b/src/modules/settings.js
@@ -396,4 +396,22 @@ export function initSettings() {
     type: Boolean,
     default: true,
   });
+
+  game.settings.register(moduleId, SETTINGS.GRID_IN_SIDEBAR, {
+    name: "Show grid tab in sidebar",
+    hint: "[EXPERIMENTAL] Add grid tab to the sidebar",
+    scope: "client",
+    config: false,
+    type: Boolean,
+    default: false,
+  });
+
+  game.settings.register(moduleId, SETTINGS.GRID_IN_TREE, {
+    name: "Show grid tab in Alpha Tree",
+    hint: "[EXPERIMENTAL] Add grid tab in Alpha Tree",
+    scope: "client",
+    config: false,
+    type: Boolean,
+    default: false,
+  });
 }
diff --git a/src/modules/stores.js b/src/modules/stores.js
index e448908..f98087b 100644
--- a/src/modules/stores.js
+++ b/src/modules/stores.js
@@ -30,6 +30,8 @@ export const helpTopic = writable(null);
 export const helpTree = writable({});
 export const settingsTopic = writable(null);
 export const settingsTree = writable({});
+export const gridSizes = writable({});
+export const lastEditGrid = writable(null);
 
 export const tagsStore = writable([]);
 export const systems = writable({});
@@ -39,6 +41,8 @@ export const directorActionsStore = writable([]);
 export const charactersStore = writable([]);
 export const targetsStore = writable([]);
 
+export const editingWidget = writable(null)
+
 function getTree() {
   let collection = get(currentCollection);
   return collection.directory.tree;
diff --git a/src/view/EditWidgetDialog.svelte b/src/view/EditWidgetDialog.svelte
index f964939..510b152 100644
--- a/src/view/EditWidgetDialog.svelte
+++ b/src/view/EditWidgetDialog.svelte
@@ -3,7 +3,7 @@
 <script>
    import { v4 as uuidv4 } from "uuid";
    import AlphaShell from "crew-components/AlphaShell";
-   import { onDestroy, tick } from "svelte";
+   import { onDestroy, tick, createEventDispatcher } from "svelte";
    import InlineButton from "crew-components/InlineButton";
 
    import { isPremium } from "crew-components/premium";
@@ -13,15 +13,38 @@
    import { TJSProseMirror } from "@typhonjs-fvtt/svelte-standard/component";
    import ArgInput from "crew-components/ArgInput";
    import InspectButton from "./components/InspectButton.svelte";
+   import { editingWidget } from "../modules/stores.js";
 
    export let elementRoot;
    export let id;
-
    let content = "HP: {{system.attributes.hp.value}} / {{system.attributes.hp.max}}";
+   let widget = $editingWidget;
+   if (!widget) {
+      widget = {
+         1: {
+            h: 1,
+            w: 4,
+            x: 0,
+            y: 0,
+         },
+         type: "Text",
+         widgetId: uuidv4(),
+         persist: {
+            target: undefined,
+            template: content,
+         },
+      };
+   }
+   logger.info(widget)
+
    let result = "";
    let source;
    let target;
 
+   function save() {
+      $editingWidget.set(widget);
+   }
+
    function getTarget() {
       target = calculateValue(source, "token");
       logger.info(target);
@@ -30,8 +53,8 @@
    function process() {
       try {
          getTarget();
-         result = Handlebars.compile(content)(target.actor);
-         logger.info(result);
+         result = Handlebars.compile(widget.persist.template)(target.actor);
+         logger.info(widget.persist.template, result);
       } catch (e) {
          result = e;
       }
@@ -41,29 +64,31 @@
    $: process();
 </script>
 
-<AlphaShell bind:elementRoot {id} fullHeight={true} temp={true}>
+<AlphaShell bind:elementRoot {id} fullHeight={true} isTemp={true}>
    <div class="ui-flex ui-flex-col ui-gap-2 ui-h-full ui-items-stretch">
-         <div class="ui-flex ui-flex-row ui-gap-2 ui-items-center ui-p-1"
-        style:background-color="hsl(var(--b2))"
-      >
-            <ArgInput type="token" label="Source token" bind:value={source} on:change={process} />
-            <InspectButton item={target?.actor} size="md" />
-         </div>
+      <div class="ui-flex ui-flex-row ui-gap-2 ui-items-center ui-p-1" style:background-color="hsl(var(--b2))">
+         <ArgInput type="token" label="Source token" bind:value={source} on:change={process} />
+         <InspectButton item={target?.actor} size="md" />
+      </div>
 
       <div class="ui-flex ui-flex-col ui-h-1/2 ui-p-1">
+         <h3>Template</h3>
          <TJSProseMirror
             on:editor:save={(e) => {
                logger.info("editor:save", e);
-              process()
+               process();
             }}
-            bind:content
+            bind:content={widget.persist.template}
             options={{ editable: true }}
          />
       </div>
       <div class="ui-flex ui-flex-col ui-h-1/2 ui-p-1">
          <h3>Preview</h3>
-         <button on:click={process}>update</button>
          <TJSProseMirror content={result} options={{ editable: false }} />
       </div>
+      <div class="ui-flex ui-flex-row ui-w-full ui-content-between ui-p-2 ui-gap-2">
+         <button class="ui-btn ui-btn-md" style:width="49%" on:click={process}>Update</button>
+         <button class="ui-btn ui-btn-md ui-btn-primary" style:width="49%" on:click={save}>Save</button>
+      </div>
    </div>
 </AlphaShell>
diff --git a/src/view/FilesUI.svelte b/src/view/FilesUI.svelte
index c427587..08d7723 100644
--- a/src/view/FilesUI.svelte
+++ b/src/view/FilesUI.svelte
@@ -443,15 +443,25 @@
    const ff = foundry.utils.debounce(filterFiles, 5);
    const searchLimit = setting(SETTINGS.FILES_SEARCH_LIMIT);
    const fuzzy = setting(SETTINGS.FILES_FUZZY) && isPremium();
+   let searchInFolder = false;
+   let folderForSearch;
    function searchFile() {
       if (search.length >= 3) {
+         if (topic.id != "Search") {
+            folderForSearch = topic.id;
+         }
+
          selectedFiles.set([]);
          searchStatus = "Searching...";
          files = [];
          topic = { id: "Search", source: { files } };
          filterFiles();
+         let index = $fileIndex;
+         if (searchInFolder && folderForSearch) {
+            index = index.filter((p) => p.startsWith(folderForSearch));
+         }
          if (!fuzzy) {
-            $fileIndex.forEach((f) => {
+            index.forEach((f) => {
                const name = f.split("/")[f.split("/").length - 1];
                const store = f.split("/")[0];
                f = f.replace(store + "/", "");
@@ -464,7 +474,7 @@
          } else {
             const result = fuzzyFindInList(
                search,
-               $fileIndex.map((f) => {
+               index.map((f) => {
                   const name = f.split("/")[f.split("/").length - 1];
                   const store = f.split("/")[0];
                   f = f.replace(store + "/", "");
@@ -530,6 +540,21 @@
             clearable={true}
          >
             <svelte:fragment slot="right">
+               <span
+                  class="ui-p-1"
+                  style="background-color: hsl(var(--n) / var(--tw-bg-opacity));"
+                  title="Search within the current folder"
+               >
+                  <ArgInput
+                     type="check"
+                     size="xs"
+                     bind:value={searchInFolder}
+                     on:change={(e) => {
+                        searchInFolder = e.detail;
+                        searchFile();
+                     }}
+                  />
+               </span>
                {#if $fileIndex.length == 0}
                   <IconButton icon="mdi:database" on:click={rebuildIndex} type="primary" title="Start indexing" />
                {/if}
diff --git a/src/view/GridUI.svelte b/src/view/GridUI.svelte
index 17eada3..92ddadb 100644
--- a/src/view/GridUI.svelte
+++ b/src/view/GridUI.svelte
@@ -1,573 +1,10 @@
 <svelte:options accessors={true} />
-
 <script>
-   import { v4 as uuidv4 } from "uuid";
-   import IconButton from "crew-components/IconButton";
-   import InlineButton from "crew-components/InlineButton";
    import AlphaShell from "crew-components/AlphaShell";
-   import ItemThumb from "./components/ItemThumb.svelte";
-   import DocumentThumb from "./components/DocumentThumb.svelte";
-   import ActiveEffectThumb from "./components/ActiveEffectThumb.svelte";
-   import RemoveButton from "crew-components/RemoveButton";
-   import ArgInput from "crew-components/ArgInput";
-   import EditWidgetDialog from "./EditWidgetDialog.svelte";
-   import { gridLayout } from "../modules/stores.js";
-   import { getContext, onDestroy, tick } from "svelte";
-   const { application } = getContext("external");
-   const position = application.position;
-   const { width, height, top, left } = position.stores;
-   import { writable } from "svelte/store";
-   import { moduleId } from "../modules/constants.js";
-
-   import { TJSProseMirror } from "@typhonjs-fvtt/svelte-standard/component";
-
+   import GridComponent from "./components/GridComponent.svelte";
    export let elementRoot;
-
-   import Grid from "svelte-grid";
-   import gridHelp from "svelte-grid/build/helper/index.mjs";
-   import FileThumb from "./components/FileThumb.svelte";
-   import { notify } from "../modules/notify";
-   import CreateApplication from "crew-components/AlphaApplication";
-   import { isPremium } from "crew-components/premium";
-
-   let entities = [];
-   let gap = 4;
-   let rowHeight = 52;
-   let hm = 1;
-   let COLS = 6;
-   let ROWS = $height / (rowHeight * hm);
-   let cols = [[1200, COLS]];
-
-   let items = [];
-   let layoutId = uuidv4();
-   let layoutName = `Grid #${$gridLayout.length}`;
-   if ($gridLayout.length > 0) {
-      layoutId = $gridLayout[0].layoutId;
-   } else {
-      serializeItems(true);
-   }
-   tick().then(async (_) => {
-      items = await deserializeItems();
-      resizeItems();
-   });
-   let locked = true;
-
-   function _resizeItems() {
-      const old_items = [...items];
-      items = [];
-      for (const item of old_items) {
-         const oc = Object.keys(item)[0];
-         let x = item[oc].x;
-         if (x > COLS - 1) {
-            x = 0;
-         }
-         let y = item[oc].y;
-         if (y > ROWS - 1) {
-            y = 0;
-         }
-         const w = item[oc].w;
-         const h = item[oc].h;
-         delete item[oc];
-         addItem(item.source, x, y, w, h);
-      }
-      serializeItems();
-   }
-   const resizeItems = foundry.utils.debounce(_resizeItems, 50);
-
-   async function deserializeItems() {
-      entities = [];
-      const l = $gridLayout.find((l) => l.layoutId == layoutId);
-      let layout = l?.layout ?? [];
-      layoutId = l?.layoutId ?? layoutId;
-      layoutName = l?.name ?? layoutName;
-      rowHeight = l?.options?.rowHeight ?? rowHeight;
-      for (const i of layout) {
-         let source;
-         if (i.uuid) {
-            source = await fromUuid(i.uuid);
-         } else if (i.type == "Text") {
-            source = {
-               text: i.persist,
-               ...i,
-            };
-         } else if (i.type == "File") {
-            source = {
-               name: i.id.split("/")[i.id.split("/").length - 1],
-               ...i,
-            };
-         } else if (i.type == "ActiveEffect") {
-            source = game.dfreds?.effects?.all.find((e) => e._id == i.id);
-            source.type = "ActiveEffect";
-            source.id = i.id;
-         } else {
-            continue;
-         }
-         i.source = source;
-         entities.push(source);
-      }
-      return layout.filter((i) => i.source);
-   }
-
-   function serializeItems(force = false) {
-      if (items.length == 0 && !force) return;
-      let layout = items.map((i) => {
-         return { ...i };
-      });
-      for (const i of layout) {
-         delete i.source;
-      }
-      // logger.info(JSON.stringify(layout));
-      // logger.info(layout);
-      gridLayout.update((gl) => {
-         let l = gl.find((l) => l.layoutId == layoutId);
-         if (!l) {
-            layoutId = uuidv4();
-            l = { layoutId };
-            gl.push(l);
-         }
-         l.layout = layout;
-         l.name = layoutName;
-         if (!l.options) {
-            l.options = {};
-         }
-         l.options.rowHeight = rowHeight;
-         return gl;
-      });
-   }
-
-   function updateItems() {
-      const old_items = [...items];
-      items = [];
-      for (const item of old_items) {
-         const oc = Object.keys(item)[0];
-         let x = 0;
-         let y = 0;
-         const w = item[oc].w;
-         const h = item[oc].h;
-         delete item[oc];
-         addItem(item.source, x, y, w, h);
-      }
-      serializeItems();
-   }
-
-   function toggleEdit() {
-      locked = !locked;
-      items = items.map((i) => {
-         i[COLS].draggable = !locked;
-         i[COLS].resizable = !locked;
-         return i;
-      });
-      items = [...items];
-      serializeItems();
-   }
-
-   onDestroy(
-      width.subscribe((w) => {
-         tick().then((_) => {
-            const oc = COLS;
-            COLS = Math.round((w - gap * 2) / (rowHeight * hm + gap));
-            if (COLS == oc) return;
-            cols = [[1200, COLS]];
-            resizeItems();
-            // logger.info(cols);
-         });
-      }),
-      height.subscribe((h) => {
-         tick().then((_) => {
-            ROWS = h / (rowHeight * hm);
-            resizeItems();
-            // logger.info(cols);
-         });
-      })
-   );
-
-   async function itemClick(e, dataItem) {
-      if (dataItem.type == "ActiveEffect") {
-         game.dfreds.effectInterface.toggleEffect(dataItem.source.name);
-         return;
-      }
-      if (dataItem.type == "Macro") {
-         dataItem.source.execute();
-         return;
-      }
-      if (dataItem.type == "Scene") {
-         dataItem.source.view();
-         return;
-      }
-      if (dataItem.type == "Actor") {
-         // dataItem.source.sheet.render(true);
-         const token = canvas.tokens.placeables.find((t) => t.actor?.id == dataItem.source?.id);
-         logger.info(token);
-         if (token) {
-            token.control();
-            globalThis.canvas.animatePan({
-               x: token.document.object.center.x,
-               y: token.document.object.center.y,
-               scale: 1,
-            });
-         }
-         return;
-      }
-      if (dataItem.type == "File" || dataItem.type == "Text") {
-         return;
-      }
-      if (dataItem.source.toChat) {
-         dataItem.source.toChat();
-      } else if (dataItem.source.use) {
-         if (dataItem.source.actor) {
-            dataItem.source.use();
-         } else {
-            notify.error("You cannot use unowned items.");
-         }
-      } else {
-         dataItem.source.sheet.render(true);
-      }
-   }
-
-   async function dropHandler(event) {
-      const data = TextEditor.getDragEventData(event);
-      logger.info(data);
-      let w,
-         h = 1;
-      let entity;
-      if (data.type == "Tile") {
-         data.documentName = "File";
-         entity = data;
-         if (entities.find((e) => e.id == data.id)) return;
-      } else if (data.type == "ActiveEffect") {
-         entity = game.dfreds?.effects?.all.find((e) => e._id == data.data.id);
-         entity.documentName = "ActiveEffect";
-         entity.id = entity._id;
-         if (entities.find((e) => e?.id == data?.id)) return;
-      } else if (data.uuid) {
-         if (entities.find((e) => e.uuid == data.uuid)) return;
-         entity = await fromUuid(data.uuid);
-
-         if (data.type == "JournalEntry" || data.type == "Scene") {
-            w = 4;
-         }
-      }
-      if (!entity) {
-         logger.error("Drop item is unknown", data);
-         return;
-      }
-      logger.info(entity);
-      entities = [...entities, entity];
-      addItem(
-         entity,
-         Math.round(event.offsetX / (rowHeight + gap)) - 1,
-         Math.round(event.offsetY / (rowHeight + gap)),
-         w,
-         h
-      );
-      serializeItems();
-   }
-
-   function addItem(item, x = 0, y = 0, w = 1, h = hm) {
-      if (!item) return;
-      const i = gridHelp.item({
-         w,
-         h,
-         x,
-         y,
-         draggable: !locked,
-         resizable: !locked,
-      });
-      let newItem = {
-         [COLS]: i,
-         id: item.id,
-         uuid: item.uuid,
-         source: item,
-         type: item.documentName ?? item.type,
-         persist: item.persist,
-      };
-
-      if (x == 0 && y == 0) {
-         let findOutPosition = gridHelp.findSpace(newItem, items, COLS);
-         newItem = {
-            ...newItem,
-            [COLS]: {
-               ...newItem[COLS],
-               ...findOutPosition,
-            },
-         };
-      }
-      items = [...items, newItem];
-   }
-
-   function reset() {
-      entities = [];
-      items = [];
-      serializeItems(true);
-   }
-
-   function removeItem(dataItem) {
-      items = items.filter((i) => i.id != dataItem.id);
-      entities = entities.filter((e) => e.id != dataItem.source.id);
-      serializeItems(true);
-   }
-
-   function addLayout() {
-      serializeItems();
-      items = [];
-      layoutId = uuidv4();
-      layoutName = `Grid #${$gridLayout.length}`;
-      gridLayout.update((gl) => {
-         gl.push({ layout: [], name: layoutName, layoutId });
-         return gl;
-      });
-   }
-
-   function editWidget() {
-      const dialogClass = CreateApplication({
-         moduleId,
-         app_id: "edit-widget",
-         title: "Edit widget",
-         component: EditWidgetDialog,
-         height: 600,
-         width: 600,
-         temp: true,
-      });
-      const dialog = new dialogClass();
-      dialog.start();
-      dialog.show();
-   }
-
-   async function removeGrid() {
-      logger.info(layoutId);
-      gridLayout.update((gl) => {
-         gl = gl.filter((l) => l.layoutId != layoutId);
-         layoutId = gl[0]?.layoutId;
-         locked = true;
-         return gl;
-      });
-      logger.info(layoutId);
-      items = await deserializeItems();
-   }
-
-   function mouseUp(e, dataItem) {
-      if (!locked) return;
-      e.preventDefault();
-      e.stopPropagation();
-      if (e.button == 0) {
-         return itemClick(e, dataItem);
-      }
-      if (e.button == 1) {
-         return itemMidClick(e, dataItem);
-      }
-      if (e.button == 2) {
-         return itemRightClick(e, dataItem);
-      }
-   }
-
-   function itemRightClick(e, dataItem) {
-      dataItem.source.sheet.render(true);
-   }
-
-   function itemMidClick(e, dataItem) {
-      if (dataItem.type == "Actor") {
-         const token = canvas.tokens.placeables.find((t) => t.actor?.id == dataItem.source?.id);
-         logger.info(token);
-         if (token) {
-            token.setTarget(game.user, { releaseOthers: !e.shiftKey });
-         }
-      }
-   }
 </script>
 
 <AlphaShell bind:elementRoot id="grid" trackSize={true}>
-   <div class="ui-flex ui-flex-col" style="background-color: hsl(var(--b2))">
-      <div class="ui-p-1 ui-w-full ui-h-fit ui-flex ui-flex-row ui-items-center ui-gap-2">
-         <IconButton
-            title={locked ? `Edit grid` : `Lock grid`}
-            icon={locked ? "material-symbols:edit-square" : "material-symbols:lock"}
-            on:click={toggleEdit}
-            size="xs"
-         />
-
-         <div
-            style="background: unset"
-            class="ui-justify-center ui-w-full ui-tabs ui-tabs-boxed ui-flex ui-items-center ui-h-full "
-         >
-            <div
-               class="ui-flex ui-flex-1 ui-flex-row ui-w-full ui-h-full ui-justify-center ui-items-center ui-flex-wrap ui-gap-2"
-            >
-               {#each $gridLayout as l (l.layoutId)}
-                  <a
-                     on:click={async (_) => {
-                        if (!locked) {
-                           notify.info("Lock the grid before switching.");
-                           return;
-                        }
-                        layoutId = l.layoutId;
-                        items = await deserializeItems();
-                     }}
-                     class="ui-tab ui-tab-xs ui-text-base-content ui-h-full"
-                     class:ui-tab-active={l.layoutId == layoutId}
-                  >
-                     {l.name}
-                  </a>
-               {/each}
-               <InlineButton
-                  disabled={!isPremium()}
-                  title={isPremium() ? "Add grid" : "Grid adding is Patreon-only feature"}
-                  on:click={addLayout}
-                  icon="material-symbols:add-circle-rounded"
-                  size="xs"
-               />
-            </div>
-         </div>
-      </div>
-      {#if !locked}
-         <div class="ui-p-1 ui-w-full ui-h-fit ui-flex ui-flex-row ui-items-center ui-gap-2">
-            <div class="ui-flex-1 ui-w-full ui-h-fit ui-flex ui-flex-row ui-items-center ui-gap-2">
-               <ArgInput
-                  size="xs"
-                  label="Name"
-                  type="string"
-                  bind:value={layoutName}
-                  on:change={(_) => {
-                     serializeItems();
-                  }}
-               />
-               <!-- <ArgInput -->
-               <!--    size="xs" -->
-               <!--    label="Row height" -->
-               <!--    type="int" -->
-               <!--    bind:value={rowHeight} -->
-               <!--    on:change={async (_) => { -->
-               <!--       serializeItems(); -->
-               <!--       items = await deserializeItems(); -->
-               <!--    }} -->
-               <!-- /> -->
-
-               <IconButton title="Reset layout" icon="gg:arrow-top-left-r" on:click={updateItems} size="xs" />
-            </div>
-            <div class="ui-flex-none">
-               <IconButton title="Remove all items" icon="icon-park-solid:clear-format" on:click={reset} size="xs" />
-               {#if isPremium()}
-                  <RemoveButton title="Delete grid" disabled={$gridLayout.length <= 1} on:click={removeGrid} size="xs" />
-               {/if}
-            </div>
-         </div>
-      {/if}
-   </div>
-   <div id={layoutId} class="ui-h-full ui-w-full" style="background-color: hsv(var(--b1))" on:drop={dropHandler}>
-      <Grid
-         offset={{ top: -$top, left: -$left }}
-         scroller={elementRoot}
-         gap={[gap, gap]}
-         {cols}
-         {rowHeight}
-         bind:items
-         let:item
-         let:dataItem
-      >
-         <div
-            class="grid-item ui-h-full ui-w-full ui-rounded-md ui-flex ui-items-center ui-justify-center"
-            style="background-color: hsl(var(--b2))"
-            class:editable={!locked}
-            class:ui-cursor-pointer={locked}
-            on:mouseup={(e) => mouseUp(e, dataItem)}
-            id={dataItem.id}
-            data-type={dataItem.type}
-         >
-            {#if dataItem.type == "Item"}
-               <ItemThumb maximize={true} item={dataItem.source} />
-            {:else if dataItem.type == "ActiveEffect"}
-               <ActiveEffectThumb draggable={false} maximize={true} item={dataItem.source} />
-            {:else if dataItem.type == "File"}
-               <FileThumb zoom={false} maximize={true} file={dataItem.source} />
-            {:else if dataItem.type == "Text"}
-               <div class="ui-p-1">
-                  <TJSProseMirror content={dataItem.source.text} options={{ editable: false }} />
-               </div>
-            {:else if dataItem.type == "JournalEntry"}
-               <div class="ui-p-1 ui-font-bold ui-link">
-                  {dataItem.source.name}
-               </div>
-            {:else if dataItem.type == "Scene"}
-               <div
-                  class="ui-text-shadow-lg ui-flex ui-items-center ui-justify-center ui-rounded-md ui-font-bold ui-link ui-bg-cover ui-w-full ui-h-full"
-                  style:background-image={`url(${dataItem.source.thumb})`}
-                  style:color="#eee"
-               >
-                  {dataItem.source.name}
-               </div>
-            {:else if dataItem.type == "Actor"}
-               <DocumentThumb
-                  title={`${dataItem.source.data.name} [select | target | open]`}
-                  maximize={true}
-                  item={writable(dataItem.source)}
-               />
-            {:else}
-               <DocumentThumb maximize={true} item={writable(dataItem.source)} />
-            {/if}
-
-            {#if !locked}
-               <div class="remove">
-                  <RemoveButton size="xs" on:click={(_) => removeItem(dataItem)} title="Remove item" />
-               </div>
-            {/if}
-         </div>
-      </Grid>
-
-      {#if items.length == 0}
-         <div class="overlay">
-            {#if game.user.isGM}
-               <span>Drop <b>Item / Actor / File / Macros / Scene</b> here</span>
-            {:else}
-               <span>Drop <b>Item / Macros</b> here</span>
-            {/if}
-            <div class="ui-divider">OR</div>
-            <button
-               disabled={true}
-               style="pointer-events: all !important"
-               class="ui-btn ui-btn-md ui-btn-primary ui-w-48 ui-btn-disabled"
-               on:click={editWidget}>Add widget<br />[coming soon...]</button
-            >
-         </div>
-      {/if}
-   </div>
+  <GridComponent {elementRoot} id="standalone"/>
 </AlphaShell>
-
-<style>
-   :global(.svlt-grid-shadow) {
-      /* Back shadow */
-      background: #444 !important;
-   }
-   :global(.svlt-grid-container) {
-      /* Container color */
-      /* background: #eee; */
-   }
-   :global(.svlt-grid-resizer::after) {
-      /* Resizer color */
-      border-color: white !important;
-   }
-   .overlay {
-      /* background: rebeccapurple; */
-      height: 100%;
-      width: 100%;
-      position: fixed;
-      top: 30px;
-      /* opacity: 50%; */
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-      padding: 4rem;
-      pointer-events: none;
-   }
-   .editable {
-      border: 1px indianred solid;
-   }
-   .remove {
-      cursor: pointer;
-      position: absolute;
-      right: -30px;
-      top: 0px;
-   }
-   :global(.svlt-grid-item:hover) {
-      z-index: 10;
-   }
-</style>
diff --git a/src/view/GridUI_inline.svelte b/src/view/GridUI_inline.svelte
new file mode 100644
index 0000000..5a0a48d
--- /dev/null
+++ b/src/view/GridUI_inline.svelte
@@ -0,0 +1,20 @@
+<svelte:options accessors={true} />
+
+<script>
+   import GridComponent from "./components/GridComponent.svelte";
+   export let elementRoot;
+
+   import { getContext, onDestroy, tick } from "svelte";
+   const { application } = getContext("external");
+   const position = application.position;
+   const { width, height, top, left } = position.stores;
+
+   setTimeout(_ => {
+     const sb = document.getElementById("sidebar");
+     height.set(sb.clientHeight - 60);
+     width.set(sb.clientWidth);
+   }, 1000)
+
+</script>
+<GridComponent {elementRoot} id="sidebar"/>
+
diff --git a/src/view/TreeUI.svelte b/src/view/TreeUI.svelte
index d3f40b9..c1fe8a6 100644
--- a/src/view/TreeUI.svelte
+++ b/src/view/TreeUI.svelte
@@ -65,7 +65,7 @@
          class:ui-w-full={$selected.length == 0}
          style="height: {contentH}px;"
       >
-         <LeftPane />
+         <LeftPane {elementRoot} />
       </div>
       {#if $selected.length > 0}
          <div
diff --git a/src/view/components/DocumentThumb.svelte b/src/view/components/DocumentThumb.svelte
index 7cb61ed..a978305 100644
--- a/src/view/components/DocumentThumb.svelte
+++ b/src/view/components/DocumentThumb.svelte
@@ -5,8 +5,9 @@
 
    export let item;
    export let title;
-   export let draggable=true;
+   export let draggable = true;
    export let maximize = false;
+   export let widthAuto = false;
 
    export let fromCompendium = null;
    import { currentCollection } from "../../modules/stores.js";
@@ -15,6 +16,9 @@
    async function drag(e) {
       let id = $item.id;
       let type = $item?.compendium?.metadata?.type ?? $currentCollection.documentName;
+     if ($item instanceof Folder) {
+       type = "Folder"
+     }
       let data = {
          type,
          id,
@@ -102,11 +106,13 @@
 </script>
 
 <div
-   class="zoom-container ui-w-full ui-h-full ui-border-none ui-rounded-md ui-bg-contain ui-bg-no-repeat"
+   class="zoom-container ui-h-full ui-flex ui-items-center ui-justify-center ui-border-none ui-rounded-md ui-bg-contain ui-bg-no-repeat"
+  class:ui-w-full={!widthAuto}
+  class:ui-w-auto={widthAuto}
    style:background-image="url({thumb})"
-  style:background-size={maximize ? "cover" : "contain"}
+   style:background-size={maximize ? "cover" : "contain"}
    alt=""
-  {draggable}
+   {draggable}
    on:pointerdown={() => null}
    on:click
    on:dragstart={drag}
@@ -114,7 +120,9 @@
    {title}
    on:drop={handleDrop}
    on:click
-/>
+>
+  <slot />
+</div>
 
 <style>
    .zoom-container {
diff --git a/src/view/components/GridComponent.svelte b/src/view/components/GridComponent.svelte
new file mode 100644
index 0000000..7448061
--- /dev/null
+++ b/src/view/components/GridComponent.svelte
@@ -0,0 +1,746 @@
+<svelte:options accessors={true} />
+
+<script>
+   import { theme } from "crew-components/stores";
+   import Icon from "crew-components/Icon";
+   import { v4 as uuidv4 } from "uuid";
+   import IconButton from "crew-components/IconButton";
+   import InlineButton from "crew-components/InlineButton";
+   import ItemThumb from "./ItemThumb.svelte";
+   import DocumentThumb from "./DocumentThumb.svelte";
+   import ActiveEffectThumb from "./ActiveEffectThumb.svelte";
+   import RemoveButton from "crew-components/RemoveButton";
+   import ArgInput from "crew-components/ArgInput";
+   import EditWidgetDialog from "../EditWidgetDialog.svelte";
+   import { gridLayout, gridSizes, lastEditGrid } from "../../modules/stores.js";
+   import { getContext, onDestroy, tick } from "svelte";
+   const { application } = getContext("external");
+   const position = application.position;
+   const { width, height, top, left } = position.stores;
+   import { writable } from "svelte/store";
+   import { moduleId } from "../../modules/constants.js";
+   import { editingWidget } from "../../modules/stores.js";
+
+   export let elementRoot;
+   export let id;
+
+   import { TJSProseMirror } from "@typhonjs-fvtt/svelte-standard/component";
+
+   import Grid from "svelte-grid";
+   import gridHelp from "svelte-grid/build/helper/index.mjs";
+   import FileThumb from "./FileThumb.svelte";
+   import { notify } from "../../modules/notify";
+   import CreateApplication from "crew-components/AlphaApplication";
+   import { isPremium } from "crew-components/premium";
+
+   async function setVideoThumb(effect) {
+      const els = document.querySelectorAll(`img#et-${effect.id ?? effect.effect.id}`);
+      for (const el of els) {
+         if (el) {
+            try {
+               let f = effect.effect.file;
+               const entry = Sequencer.Database.getEntry(effect.effect.file);
+               if (entry) {
+                  f = entry.file;
+                  if (typeof f === "object") {
+                     f = f[Object.keys(f)[0]];
+                  }
+               }
+               const thumb = await game.video.createThumbnail(f, {
+                  height: 100,
+                  width: 100,
+               });
+               el.setAttribute("src", thumb);
+            } catch (error) {
+               logger.error(error);
+            }
+         }
+      }
+   }
+
+   let entities = [];
+   let gap = 4;
+   let rowHeight = 52;
+   let hm = 1;
+   let COLS = 6;
+   let ROWS = $height / (rowHeight * hm);
+   let cols = [[1200, COLS]];
+
+   let items = [];
+   let layoutId = uuidv4();
+   let layoutName = `Grid #${$gridLayout.length}`;
+   if ($gridLayout.length > 0) {
+      layoutId = $gridLayout[0].layoutId;
+   } else {
+      serializeItems(true);
+   }
+
+   const u = async (l) => {
+      if (!locked) return;
+      items = await deserializeItems(l);
+      resizeItems();
+   };
+   onDestroy(gridLayout.subscribe(foundry.utils.debounce(u, 1000)));
+   tick().then(u);
+
+   let locked = true;
+
+   function _resizeItems() {
+      const old_items = [...items];
+      items = [];
+      for (const item of old_items) {
+         let oc = $gridSizes[$lastEditGrid] ?? Object.keys(item)[0];
+         if (!item[oc]) {
+            oc = Object.keys(item)[0];
+         }
+         let pos = item[oc] ?? { x: 0, y: 0, w: 1, h: 1 };
+         let x = pos.x;
+         let y = pos.y;
+         if (x > COLS - 1 || y > ROWS - 1) {
+            x = 0;
+            y = 0;
+         }
+         const w = pos.w;
+         const h = pos.h;
+         addItem(item.source, x, y, w, h);
+      }
+      serializeItems();
+   }
+   const resizeItems = foundry.utils.debounce(_resizeItems, 50);
+
+   async function deserializeItems(gl) {
+      gl = gl ?? $gridLayout;
+      entities = [];
+      const l = gl.find((l) => l.layoutId == layoutId);
+      let layout = l?.layout ?? [];
+      layoutId = l?.layoutId ?? layoutId;
+      layoutName = l?.name ?? layoutName;
+      rowHeight = l?.options?.rowHeight ?? rowHeight;
+      for (const i of layout) {
+         let source;
+         if (i.uuid) {
+            source = await fromUuid(i.uuid);
+         } else if (i.type == "CompendiumEntry") {
+            source = game.packs.get(i.persist);
+            source.persist = i.persist;
+         } else if (i.type == "Text") {
+            source = {
+               text: i.persist,
+               ...i,
+            };
+         } else if (i.type == "Effect") {
+            source = {
+               ...i.persist,
+               ...i,
+            };
+         } else if (i.type == "File") {
+            source = {
+               name: i.sourceId.split("/")[i.id.split("/").length - 1],
+               ...i,
+            };
+         } else if (i.type == "ActiveEffect") {
+            source = game.dfreds?.effects?.all.find((e) => e._id == i.sourceId);
+            source.type = "ActiveEffect";
+            source.id = i.sourceId;
+         } else {
+            continue;
+         }
+         i.source = source;
+         source.widgetId = i.widgetId;
+         entities.push(source);
+      }
+      return Array.from(new Set(layout.filter((i) => i.source)));
+   }
+
+   function serializeItems(force = false) {
+      if (items.length == 0 && !force) return;
+      let layout = items.map((i) => {
+         return { ...i };
+      });
+      for (const i of layout) {
+         delete i.source;
+      }
+      const ll = $gridLayout.find((l) => l.layoutId == layoutId);
+      if (ll) {
+         const ol = JSON.parse(JSON.stringify(ll)).layout;
+         if (ol) {
+            ol.forEach((l) => {
+               delete l.source;
+            });
+            if (JSON.stringify(layout) == JSON.stringify(ol)) {
+               return;
+            }
+         }
+      }
+      gridLayout.update((gl) => {
+         let l = gl.find((l) => l.layoutId == layoutId);
+         if (!l) {
+            layoutId = uuidv4();
+            l = { layoutId };
+            gl.push(l);
+         }
+         l.layout = layout;
+         l.name = layoutName;
+         if (!l.options) {
+            l.options = {};
+         }
+         l.options.rowHeight = rowHeight;
+         for (const ll of gl) {
+            ll.layout.forEach((i) => {
+               delete i.source;
+            });
+         }
+         return gl;
+      });
+   }
+
+   function updateItems() {
+      const old_items = [...items];
+      items = [];
+      for (const item of old_items) {
+         const oc = Object.keys(item)[0];
+         let x = 0;
+         let y = 0;
+         const w = item[oc].w;
+         const h = item[oc].h;
+         delete item[oc];
+         addItem(item.source, x, y, w, h);
+      }
+      serializeItems();
+   }
+
+   function toggleEdit() {
+      locked = !locked;
+      items = items.map((i) => {
+         i[COLS].draggable = !locked;
+         i[COLS].resizable = !locked;
+         return i;
+      });
+      items = [...items];
+      serializeItems();
+   }
+
+   onDestroy(
+      width.subscribe((w) => {
+         tick().then((_) => {
+            const oc = COLS;
+            COLS = Math.round((w - gap * 2) / (rowHeight * hm + gap));
+            if (COLS == oc) return;
+            gridSizes.update((s) => {
+               s[id] = COLS;
+               return s;
+            });
+            cols = [[1200, COLS]];
+            resizeItems();
+         });
+      }),
+      height.subscribe((h) => {
+         tick().then((_) => {
+            ROWS = h / (rowHeight * hm);
+            resizeItems();
+         });
+      })
+   );
+
+   async function itemClick(e, dataItem) {
+      if (dataItem.type == "CompendiumEntry") {
+         dataItem.source.apps[0]?.render(true);
+         return;
+      }
+      if (dataItem.type == "ActiveEffect") {
+         game.dfreds.effectInterface.toggleEffect(dataItem.source.name);
+         return;
+      }
+      if (dataItem.type == "Macro") {
+         dataItem.source.execute();
+         return;
+      }
+      if (dataItem.type == "Scene") {
+         dataItem.source.view();
+         return;
+      }
+      if (dataItem.type == "Effect") {
+         logger.info(dataItem.source);
+         // dataItem.source.data = dataItem.source.effect;
+         // Director.openEffectEditor(dataItem.source);
+         notify.error("Editing is not available yet.");
+         return;
+      }
+      if (dataItem.type == "Actor") {
+         // dataItem.source.sheet.render(true);
+         const token = canvas.tokens.placeables.find((t) => t.actor?.id == dataItem.source?.id);
+         // logger.info(token);
+         if (token) {
+            token.control();
+            globalThis.canvas.animatePan({
+               x: token.document.object.center.x,
+               y: token.document.object.center.y,
+               scale: 1,
+            });
+         }
+         return;
+      }
+      if (dataItem.type == "File" || dataItem.type == "Text") {
+         return;
+      }
+      if (dataItem.source.toChat) {
+         dataItem.source.toChat();
+      } else if (dataItem.source.use) {
+         if (dataItem.source.actor) {
+            dataItem.source.use();
+         } else {
+            notify.error("You cannot use unowned items.");
+         }
+      } else {
+         dataItem.source.sheet?.render(true);
+      }
+   }
+
+   async function dropHandler(event) {
+      const data = TextEditor.getDragEventData(event);
+      // logger.info(data);
+      // TODO: replace on drop
+      let entity;
+      if (data.type == "Tile") {
+         data.documentName = "File";
+         entity = data;
+         if (entities.find((e) => e.id == data.id)) return;
+      } else if (data.type == "CompendiumEntry") {
+         entity = game.packs.get(data.id);
+         entity.persist = data.id;
+         // logger.error(entity);
+         data.documentName = "CompendiumEntry";
+         entity.w = 4;
+         if (entities.find((e) => e?.id == data?.id)) return;
+      } else if (data.type == "Effect") {
+         data.documentName = "Effect";
+         entity = data;
+         entity.persist = { effect: entity.effect, section: entity.section };
+         entity.w = 4;
+         if (entities.find((e) => e.section?.id == data.section?.id)) return;
+         setTimeout((_) => setVideoThumb(entity), 100);
+      } else if (data.type == "ActiveEffect") {
+         // TODO: custom effects
+         entity = game.dfreds?.effects?.all.find((e) => e._id == data.data.id);
+         entity.documentName = "ActiveEffect";
+         entity.id = entity._id;
+         if (entities.find((e) => e?.id == data?.id)) return;
+      } else if (data.uuid) {
+         if (entities.find((e) => e.uuid == data.uuid)) return;
+         entity = await fromUuid(data.uuid);
+
+         if (data.type == "JournalEntry" || data.type == "Scene") {
+            entity.w = 4;
+         }
+      }
+      if (!entity) {
+         logger.error("Drop item is unknown", data);
+         return;
+      }
+      addEntity(entity, event);
+   }
+
+   function addEntity(entity, event) {
+      if (!entity) {
+         return;
+      }
+
+      if (entity.uuid?.startsWith("Folder")) {
+         entities = [...entities, ...entity.contents];
+         for (const e of entity.contents) {
+            addEntity(e);
+         }
+         for (const child of entity.children) {
+            addEntity(child.folder);
+         }
+      } else {
+         entities = [...entities, entity];
+         addItem(
+            entity,
+            event ? Math.round(event.offsetX / (rowHeight + gap)) - 1 : 0,
+            event ? Math.round(event.offsetY / (rowHeight + gap)) : 0,
+            entity.w ?? 1,
+            entity.h ?? 1
+         );
+      }
+      serializeItems();
+   }
+
+   function addItem(item, x = 0, y = 0, w = 1, h = hm) {
+      if (!item) return;
+      let type = item.documentName ?? item.type;
+      if (item instanceof CompendiumCollection) {
+         type = "CompendiumEntry";
+      }
+      const i = gridHelp.item({
+         w,
+         h,
+         x,
+         y,
+         draggable: !locked,
+         resizable: !locked,
+      });
+      const widgetId = item.widgetId ?? uuidv4();
+      let newItem = {
+         widgetId,
+         id: widgetId,
+         sourceId: item.id ?? uuidv4(),
+         uuid: item.uuid,
+         source: item,
+         type,
+         persist: item.persist,
+      };
+      for (const g in $gridSizes) {
+         newItem[$gridSizes[g]] = i;
+      }
+
+      if (x == 0 && y == 0) {
+         let findOutPosition = gridHelp.findSpace(newItem, items, COLS);
+         newItem = {
+            ...newItem,
+            [COLS]: {
+               ...newItem[COLS],
+               ...findOutPosition,
+            },
+         };
+      }
+      items = [...items, newItem];
+   }
+
+   function reset() {
+      entities = [];
+      items = [];
+      serializeItems(true);
+   }
+
+   function removeItem(dataItem) {
+      items = items.filter((i) => i.id != dataItem.id);
+      entities = entities.filter((e) => e.id != dataItem.source.id);
+      serializeItems(true);
+   }
+
+   function addLayout() {
+      serializeItems();
+      items = [];
+      layoutId = uuidv4();
+      layoutName = `Grid #${$gridLayout.length}`;
+      serializeItems(true);
+      // gridLayout.update((gl) => {
+      //    gl.push({ layout: [], name: layoutName, layoutId });
+      //    return gl;
+      // });
+   }
+
+   function editWidget() {
+      editingWidget.set(null);
+      const dialogClass = CreateApplication({
+         moduleId,
+         app_id: "edit-widget",
+         title: "Edit widget",
+         component: EditWidgetDialog,
+         height: 600,
+         width: 600,
+         isTemp: true,
+      });
+      const dialog = new dialogClass();
+      dialog.start();
+      dialog.show();
+   }
+
+   async function removeGrid() {
+      gridLayout.update((gl) => {
+         gl = gl.filter((l) => l.layoutId != layoutId);
+         layoutId = gl[0]?.layoutId;
+         locked = true;
+         return gl;
+      });
+      items = await deserializeItems();
+   }
+
+   function mouseUp(e, dataItem) {
+      if (!locked) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.button == 0) {
+         return itemClick(e, dataItem);
+      }
+      if (e.button == 1) {
+         return itemMidClick(e, dataItem);
+      }
+      if (e.button == 2) {
+         return itemRightClick(e, dataItem);
+      }
+   }
+
+   function itemRightClick(e, dataItem) {
+      dataItem.source.sheet?.render(true);
+   }
+
+   function itemMidClick(e, dataItem) {
+      if (dataItem.type == "Actor") {
+         const token = canvas.tokens.placeables.find((t) => t.actor?.id == dataItem.source?.id);
+         logger.info(token);
+         if (token) {
+            token.setTarget(game.user, { releaseOthers: !e.shiftKey });
+         }
+      }
+   }
+
+   function getEffectName(effect) {
+      let name = effect.effect.file.split("/")[effect.effect.file.split("/").length - 1];
+      if (effect.section?.args[0]) {
+         name = effect.section?.args[0];
+      } else if (effect.effect.name) {
+         if (effect.effect.name != effect.effect.file) {
+            name = `${effect.ffect.name} (${name})`;
+         }
+      } else {
+      }
+      return name;
+   }
+
+   function onDragStartEffect(event, effect) {
+      // debugger;
+      let section = { ...effect.section };
+      section.id = uuidv4();
+      section.savedId = null;
+      const dragData = {
+         type: "Effect",
+         effect: effect.effect,
+         section,
+         temp: event.ctrlKey,
+         instant: event.altKey,
+      };
+      event.dataTransfer.setData("text/plain", JSON.stringify(dragData));
+   }
+</script>
+
+<div class="ui-flex ui-flex-col alpha-ui" data-theme={$theme} style="background-color: hsl(var(--b2))">
+   <div class="ui-p-1 ui-w-full ui-h-fit ui-flex ui-flex-row ui-items-center ui-gap-2">
+      <IconButton
+         title={locked ? `Edit grid` : `Lock grid`}
+         icon={locked ? "material-symbols:edit-square" : "material-symbols:lock"}
+         on:click={toggleEdit}
+         size="xs"
+      />
+
+      <!-- <IconButton -->
+      <!--    title={locked ? `Edit grid` : `Lock grid`} -->
+      <!--    icon={"uil:arrow-resize-diagonal"} -->
+      <!--    on:click={resizeItems} -->
+      <!--    size="xs" -->
+      <!-- /> -->
+
+      <div
+         style="background: unset"
+         class="ui-justify-center ui-w-full ui-tabs ui-tabs-boxed ui-flex ui-items-center ui-h-full "
+      >
+         <div
+            class="ui-flex ui-flex-1 ui-flex-row ui-w-full ui-h-full ui-justify-center ui-items-center ui-flex-wrap ui-gap-2"
+         >
+            {#each $gridLayout as l (l.layoutId)}
+               <a
+                  on:click={async (_) => {
+                     if (!locked) {
+                        notify.info("Lock the grid before switching.");
+                        return;
+                     }
+                     layoutId = l.layoutId;
+                     items = await deserializeItems();
+                     resizeItems();
+                  }}
+                  class="ui-tab ui-tab-xs ui-text-base-content ui-h-full"
+                  class:ui-tab-active={l.layoutId == layoutId}
+               >
+                  {l.name}
+               </a>
+            {/each}
+            <InlineButton
+               disabled={!isPremium()}
+               title={isPremium() ? "Add grid" : "Grid adding is Patreon-only feature"}
+               on:click={addLayout}
+               icon="material-symbols:add-circle-rounded"
+               size="xs"
+            />
+         </div>
+      </div>
+   </div>
+   {#if !locked}
+      <div class="ui-p-1 ui-w-full ui-h-fit ui-flex ui-flex-row ui-items-center ui-gap-2">
+         <div class="ui-flex-1 ui-w-full ui-h-fit ui-flex ui-flex-row ui-items-center ui-gap-2">
+            <ArgInput
+               size="xs"
+               label="Name"
+               type="string"
+               bind:value={layoutName}
+               on:change={(_) => {
+                  serializeItems();
+               }}
+            />
+            <!-- <ArgInput -->
+            <!--    size="xs" -->
+            <!--    label="Row height" -->
+            <!--    type="int" -->
+            <!--    bind:value={rowHeight} -->
+            <!--    on:change={async (_) => { -->
+            <!--       serializeItems(); -->
+            <!--       items = await deserializeItems(); -->
+            <!--    }} -->
+            <!-- /> -->
+
+            <IconButton title="Reset layout" icon="gg:arrow-top-left-r" on:click={updateItems} size="xs" />
+         </div>
+         <div class="ui-flex-none">
+            <IconButton title="Remove all items" icon="icon-park-solid:clear-format" on:click={reset} size="xs" />
+            {#if isPremium()}
+               <RemoveButton title="Delete grid" disabled={$gridLayout.length <= 1} on:click={removeGrid} size="xs" />
+            {/if}
+         </div>
+      </div>
+   {/if}
+</div>
+<div id={layoutId} class="ui-h-full ui-w-full" style="background-color: hsv(var(--b1))" on:drop={dropHandler}>
+   <Grid
+      offset={{ top: -$top, left: -$left }}
+      scroller={elementRoot}
+      gap={[gap, gap]}
+      {cols}
+      {rowHeight}
+      bind:items
+      let:item
+      let:dataItem
+      on:change={(_) => {
+         if (id == lastEditGrid) return;
+         lastEditGrid.set(id);
+      }}
+   >
+      <div
+         class="grid-item ui-h-full ui-w-full ui-rounded-md ui-flex ui-items-center ui-justify-center"
+         style="background-color: hsl(var(--b2))"
+         class:editable={!locked}
+         class:ui-cursor-pointer={locked}
+         on:mouseup={(e) => mouseUp(e, dataItem)}
+         id={dataItem.widgetId}
+         data-type={dataItem.type}
+      >
+         {#if dataItem.type == "Item"}
+            <ItemThumb maximize={true} item={dataItem.source} />
+         {:else if dataItem.type == "ActiveEffect"}
+            <ActiveEffectThumb draggable={false} maximize={true} item={dataItem.source} />
+         {:else if dataItem.type == "File"}
+            <FileThumb zoom={false} maximize={true} file={dataItem.source} />
+         {:else if dataItem.type == "Text"}
+            <div class="ui-p-1">
+               <TJSProseMirror content={dataItem.source.text} options={{ editable: false }} />
+            </div>
+         {:else if dataItem.type == "JournalEntry"}
+            <div class="ui-p-1 ui-font-bold ui-link">
+               {dataItem.source.name}
+            </div>
+         {:else if dataItem.type == "Scene"}
+            <div
+               class="ui-text-shadow-lg ui-flex ui-items-center ui-justify-center ui-rounded-md ui-font-bold ui-link ui-bg-cover ui-w-full ui-h-full"
+               style:background-image={`url(${dataItem.source.thumb})`}
+               style:color="#eee"
+            >
+               {dataItem.source.name}
+            </div>
+         {:else if dataItem.type == "Effect"}
+            <div
+               class="ui-flex ui-flex-1 ui-flex-row ui-gap-2 ui-items-center ui-justify-center"
+               draggable="true"
+               on:dragstart={(e) => onDragStartEffect(e, dataItem.source)}
+            >
+               <img
+                  id={`et-${dataItem.source.effect.id}`}
+                  src="icons/svg/video.svg"
+                  alt=""
+                  class="ui-rounded-md ui-h-6 ui-border-none"
+               />
+               {@html getEffectName(dataItem.source)}
+
+               {#if dataItem.source.section?.lightConfig}
+                  <Icon icon="fa6-solid:lightbulb" />
+               {/if}
+            </div>
+         {:else if dataItem.type == "CompendiumEntry"}
+            <div class="ui-flex ui-flex-row ui-gap-2 ui-items-center">
+               <Icon icon="fa-solid:atlas" />
+               {dataItem.source.metadata.label}
+            </div>
+         {:else if dataItem.type == "Actor"}
+            <DocumentThumb
+               title={`${dataItem.source.data.name} [select | target | open]`}
+               maximize={true}
+               item={writable(dataItem.source)}
+            />
+         {:else}
+            <DocumentThumb maximize={true} item={writable(dataItem.source)} />
+         {/if}
+
+         {#if !locked}
+            <div class="remove">
+               <RemoveButton size="xs" on:click={(_) => removeItem(dataItem)} title="Remove item" />
+            </div>
+         {/if}
+      </div>
+   </Grid>
+
+   {#if items.length == 0}
+      <div class="overlay">
+         {#if game.user.isGM}
+            <span>Drop <b>Item / Actor / File / Macros / Scene</b> here</span>
+         {:else}
+            <span>Drop <b>Item / Macros</b> here</span>
+         {/if}
+         <div class="ui-divider">OR</div>
+         <button
+            style="pointer-events: all !important"
+            class="ui-btn ui-btn-md ui-btn-primary ui-w-48 ui-btn-disabled"
+            disabled={true}
+            on:click={editWidget}>Add widget<br /> [coming soon...]</button
+         >
+      </div>
+   {/if}
+</div>
+
+<style>
+   :global(.svlt-grid-shadow) {
+      /* Back shadow */
+      background: #444 !important;
+   }
+   :global(.svlt-grid-container) {
+      /* Container color */
+      /* background: #eee; */
+   }
+   :global(.svlt-grid-resizer::after) {
+      /* Resizer color */
+      border-color: white !important;
+   }
+   .overlay {
+      /* background: rebeccapurple; */
+      height: 100%;
+      width: 100%;
+      position: fixed;
+      top: 30px;
+      /* opacity: 50%; */
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      padding: 4rem;
+      pointer-events: none;
+   }
+   .editable {
+      border: 1px indianred solid;
+   }
+   .remove {
+      cursor: pointer;
+      position: absolute;
+      right: -30px;
+      top: 0px;
+   }
+   :global(.svlt-grid-item:hover) {
+      z-index: 10;
+   }
+</style>
diff --git a/src/view/components/LeftPane.svelte b/src/view/components/LeftPane.svelte
index ce5a234..478015e 100644
--- a/src/view/components/LeftPane.svelte
+++ b/src/view/components/LeftPane.svelte
@@ -1,4 +1,5 @@
 <script>
+   import GridComponent from "./GridComponent.svelte";
    import { currentCollection, selected, filter, treeItems, aliases, tagsStore } from "../../modules/stores.js";
    import FilterBar from "./FilterBar.svelte";
    import TreeView from "./TreeView.svelte";
@@ -11,6 +12,8 @@
    import { createFilter } from "crew-components/helpers";
    import { onDestroy } from "svelte";
 
+   export let elementRoot;
+
    let ftags = $tagsStore.filter((t) => t.fav);
    onDestroy(
       tagsStore.subscribe((tags) => {
@@ -31,12 +34,21 @@
          icon: "fa-solid:magic",
       });
    }
+   if (setting(SETTINGS.GRID_IN_TREE)) {
+      availableTabs.push({
+         title: "Grid",
+         icon: "ic:twotone-widgets",
+      });
+   }
+
    let mode = availableTabs[0].title;
    function selectMode(t) {
       mode = t.title;
-      $currentCollection = t.get();
-      $selected = [];
-      $filter = t.filter ? { persist_filters: [createFilter({}, t.filter, "default", true)] } : {};
+      if (t.get) {
+         $currentCollection = t.get();
+         $filter = t.filter ? { persist_filters: [createFilter({}, t.filter, "default", true)] } : {};
+      }
+         $selected = [];
    }
    let showTip = setting(SETTINGS.SHOW_TREE_TIP);
    function closeTip() {
@@ -95,39 +107,45 @@
       </div>
    </div>
 
-   <div class="ui-bg-base-100 ui-p-2 ui-h-full ui-pb-[120px]">
-      <div class="ui-flex ui-flex-1 ui-flex-col">
-         <FilterBar {filter} />
-      </div>
-
-      <div class="ui-flex ui-flex-row ui-gap-1 ui-flex-1 ui-items-center">
-         <div class="ui-flex ui-flex-row ui-gap-2 ui-flex-1 ui-items-center ui-text-base-content">
-            Items: <span class="ui-font-bold">{$treeItems ? Object.keys($treeItems)?.length - 1 : 0}</span>
+   {#if mode != "Grid"}
+      <div class="ui-bg-base-100 ui-p-2 ui-h-full ui-pb-[120px]">
+         <div class="ui-flex ui-flex-1 ui-flex-col">
+            <FilterBar {filter} />
          </div>
 
-         {#if mode == "Actors"}
+         <div class="ui-flex ui-flex-row ui-gap-1 ui-flex-1 ui-items-center">
+            <div class="ui-flex ui-flex-row ui-gap-2 ui-flex-1 ui-items-center ui-text-base-content">
+               Items: <span class="ui-font-bold">{$treeItems ? Object.keys($treeItems)?.length - 1 : 0}</span>
+            </div>
+
+            {#if mode == "Actors"}
+               <InlineButton
+                  title="On Scene"
+                  icon="fa-solid:map"
+                  on:click={(_) => toggleFilter(filter, "@onScene", "onScene", aliases)}
+               />
+            {/if}
             <InlineButton
-               title="On Scene"
-               icon="fa-solid:map"
-               on:click={(_) => toggleFilter(filter, "@onScene", "onScene", aliases)}
+               title="Favs"
+               icon="fa-solid:star"
+               on:click={(_) => toggleFilter(filter, "@fav", "fav", aliases)}
             />
-         {/if}
-         <InlineButton
-            title="Favs"
-            icon="fa-solid:star"
-            on:click={(_) => toggleFilter(filter, "@fav", "fav", aliases)}
-         />
-         {#if !$filter?.persist_filters}
-            <CreateButtons />
-         {/if}
-      </div>
+            {#if !$filter?.persist_filters}
+               <CreateButtons />
+            {/if}
+         </div>
 
-      {#if ftags.length > 0}
-         <Tags {onTagClick} tags={ftags.map((t) => t.text)} disable={true} />
-      {/if}
+         {#if ftags.length > 0}
+            <Tags {onTagClick} tags={ftags.map((t) => t.text)} disable={true} />
+         {/if}
 
-      <div class="ui-flex ui-flex-1 ui-flex-col ui-overflow-y-auto ui-h-full">
-         <TreeView />
+         <div class="ui-flex ui-flex-1 ui-flex-col ui-overflow-y-auto ui-h-full">
+            <TreeView />
+         </div>
       </div>
-   </div>
+   {:else}
+      <div class="ui-p-1 ui-h-full">
+         <GridComponent {elementRoot} id="tree" />
+      </div>
+   {/if}
 </div>
diff --git a/src/view/components/SelectedDocument.svelte b/src/view/components/SelectedDocument.svelte
index fa938fd..a0c6411 100644
--- a/src/view/components/SelectedDocument.svelte
+++ b/src/view/components/SelectedDocument.svelte
@@ -106,13 +106,13 @@
 
 <div class="ui-flex ui-flex-col ui-gap-2" id={$item.id}>
    <div class="ui-flex ui-flex-row ui-gap-3 ui-items-center">
-      {#if $item.thumbnail}
-         <div class="ui-h-12 ui-w-12">
-            <DocumentThumb {item} on:click={() => $item.sheet.render(true)} />
-         </div>
-      {:else}
-         <iconify-icon icon="fa-solid:folder" class="ui-ml-2 ui-text-lg" />
-      {/if}
+      <div class="ui-h-12 ui-w-12">
+         <DocumentThumb {item} on:click={() => $item.sheet.render(true)}>
+            {#if $item instanceof Folder}
+               <iconify-icon style:color={$item.data.color} icon="fa-solid:folder" style:font-size="2rem" />
+            {/if}
+         </DocumentThumb>
+      </div>
 
       <div class="ui-flex ui-flex-row ui-flex-1">
          <div class="ui-input-group ui-input-group-md">
diff --git a/src/view/components/TreeItem.svelte b/src/view/components/TreeItem.svelte
index 1a7e230..e8902ea 100644
--- a/src/view/components/TreeItem.svelte
+++ b/src/view/components/TreeItem.svelte
@@ -131,27 +131,29 @@
       <div class="ui-flex ui-flex-row ui-w-full ui-justify-center">
          <div class="ui-text-xs ui-font-medium ui-flex ui-flex-row ui-gap-2 ui-flex-1 ui-w-full ui-items-center">
             {#if isFolder}
-               {#if !isExpanded}
-                  {#if node.children?.length > 0}
-                     <iconify-icon
-                        icon="fa-solid:folder-plus"
-                        class="ui-ml-2 ui-text-lg ui-text-base-content"
-                        style:color={node.color == "#000000" ? "hsv(var(--bc))" : node.color}
-                     />
+               <DocumentThumb widthAuto={true} item={writable(node.source.folder)}>
+                  {#if !isExpanded}
+                     {#if node.children?.length > 0}
+                        <iconify-icon
+                           icon="fa-solid:folder-plus"
+                           class="ui-ml-2 ui-text-lg ui-text-base-content"
+                           style:color={node.color == "#000000" ? "hsv(var(--bc))" : node.color}
+                        />
+                     {:else}
+                        <iconify-icon
+                           icon="fa-solid:folder-minus"
+                           class="ui-ml-2 ui-text-lg ui-text-base-content"
+                           style:color={node.color == "#000000" ? "hsv(var(--bc))" : node.color}
+                        />
+                     {/if}
                   {:else}
                      <iconify-icon
-                        icon="fa-solid:folder-minus"
+                        icon="fa-solid:folder-open"
                         class="ui-ml-2 ui-text-lg ui-text-base-content"
                         style:color={node.color == "#000000" ? "hsv(var(--bc))" : node.color}
                      />
                   {/if}
-               {:else}
-                  <iconify-icon
-                     icon="fa-solid:folder-open"
-                     class="ui-ml-2 ui-text-lg ui-text-base-content"
-                     style:color={node.color == "#000000" ? "hsv(var(--bc))" : node.color}
-                  />
-               {/if}
+               </DocumentThumb>
             {:else if thumbnail}
                {#if !isScene}
                   <div class="ui-h-8 ui-w-8">
diff --git a/src/view/settings/GridSettings.svelte b/src/view/settings/GridSettings.svelte
index 5d84032..636ee39 100644
--- a/src/view/settings/GridSettings.svelte
+++ b/src/view/settings/GridSettings.svelte
@@ -7,4 +7,7 @@
    <div class="ui-text-center ui-text-base-content ui-text-lg ui-font-bold">Game System Settings</div>
 
    <SettingsInput key={SETTINGS.GRID_FOR_PLAYERS} />
+
+   <SettingsInput key={SETTINGS.GRID_IN_SIDEBAR} premium={true} />
+   <SettingsInput key={SETTINGS.GRID_IN_TREE} premium={true} />
 </div>
diff --git a/src/view/settings/SupportSettings.svelte b/src/view/settings/SupportSettings.svelte
index ff9e425..c5ea757 100644
--- a/src/view/settings/SupportSettings.svelte
+++ b/src/view/settings/SupportSettings.svelte
@@ -13,6 +13,7 @@
     <li>Thomakaze</li>
     <li>Oshy</li>
     <li>TehT</li>
+    <li>Aaron Dougherty</li>
   </ul>
 
   <h1>Special Thanks</h1>