diff --git a/package.json b/package.json
index 1757fcd..6cc2e17 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "@kyvg/vue3-notification": "^2.9.1",
     "@mdi/font": "^7.4.47",
     "@vueuse/core": "^13.1.0",
+    "@wwtelescope/engine": "^7.30.1",
     "@wwtelescope/engine-pinia": "^0.9.0",
     "leaflet": "^1.9.4",
     "pinia": "~2.1.7",
diff --git a/src/components/FolderView.vue b/src/components/FolderView.vue
new file mode 100644
index 0000000..4f21ec5
--- /dev/null
+++ b/src/components/FolderView.vue
@@ -0,0 +1,322 @@
+<template>
+  <nav
+    class="fv-root"
+    v-if="items !== null"
+    :style="cssVars"
+    aria-role="navigation"
+    aria-label="Folder View"
+  >
+    <div
+      class="fv-header-container"
+    >
+      <slot
+        name="header"
+        :expanded="expanded"
+        :toggle-expanded="toggleExpanded"
+      ></slot>
+    </div>
+    <div
+      v-show="expanded"
+      class="fv-content"
+    >
+      <div
+        v-for="(item, index) of items"
+        :key="index"
+        class="fv-item"
+      >
+        <slot
+          name="item"
+          :item="item"
+          :last-selected-item="lastSelectedItem"
+          :select-item="selectItem"
+        >
+          <div
+            :class="['fv-item-content', lastSelectedItem === item ? 'selected' : '']"
+            :key="item.get_name()"
+            :title="item.get_name()"
+            @click="() => selectItem(item, 'click')"
+            @dblclick="() => selectItem(item, 'dblclick')"
+            @keydown.enter="() => selectItem(item, 'keyup')"
+            tabindex="0"
+            role="button"
+            :aria-label="item.get_name()"
+            :aria-selected="lastSelectedItem === item"
+          >
+            <img :src="item.get_thumbnailUrl() ?? defaultThumbnail" :alt="item.get_name()" />
+            <label class="fv-item-name">
+              {{item.get_name()}}
+            </label>
+            <FontAwesomeIcon
+              v-if="item instanceof Folder"
+              icon="folder-open"
+              class="fv-folder-icon"
+            />
+          </div>
+        </slot>
+      </div>
+    </div>
+    <div
+      v-if="loading"
+      class="fv-loading"
+    >
+      <v-progress-circular indeterminate />
+      <span>Loading folder contents. Please wait...</span>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch, type Ref } from "vue";
+import { VProgressCircular } from "vuetify/components";
+import { Folder, FolderUp } from "@wwtelescope/engine";
+import { Thumbnail } from "@wwtelescope/engine-types";
+import { FolderViewProps, ItemSelectionType } from "../types";
+import { engineStore } from "@wwtelescope/engine-pinia";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faFolderOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+library.add(faFolderOpen);
+
+const items: Ref<Thumbnail[] | null> = ref<Thumbnail[]>([]);
+const lastSelectedItem: Ref<Thumbnail | null> = ref(null);
+
+
+const props = withDefaults(defineProps<FolderViewProps>(), {
+  gap: "5px",
+  highlightColor: "#1671e0",
+  thumbnailColor: "white",
+  backgroundColor: "black",
+  textColor: "white",
+  orientation: "column",
+  startExpanded: true,
+  selectFirst: true,
+  lazy: true,
+  defaultThumbnail: "https://web.wwtassets.org/engine/assets/thumb_star.jpg",
+});
+
+if (!(props.rootFolder || props.rootUrl)) {
+  throw new Error("Either one of rootFolder or rootUrl must be specified!");
+}
+
+const store = engineStore();
+const folder = ref<Folder | null>(null);
+let currentFolder: Folder | null = null;
+const loading = ref(false);
+
+if (props.rootFolder != null) {
+  folder.value = props.rootFolder; 
+} else if (props.rootUrl != null) {
+  const url = props.rootUrl;
+  store.waitForReady().then(() => {
+    loading.value = true;
+    store.loadImageCollection({ url, loadChildFolders: !props.lazy })
+      .then(loadedFolder => {
+        folder.value = loadedFolder;
+        loading.value = false;
+      });
+  });
+}
+
+const emit = defineEmits<{
+  (event: "select", data: { item: Thumbnail, type: ItemSelectionType }): void;
+}>();
+
+const expanded = ref(props.startExpanded);
+function toggleExpanded() {
+  expanded.value = !expanded.value;
+}
+
+function updateFolder(folder: Folder) {
+  const children = folder.get_children() ?? [];
+  items.value = props.filter ? children.filter(props.filter) : children;
+  currentFolder = folder;
+  const firstItem = items.value.find((item) => (!(item instanceof Folder) || (item instanceof FolderUp)));
+  if (props.selectFirst && firstItem) {
+    selectItem(firstItem, "folder");
+  }
+}
+
+function folderItems(folder: Folder, includeUp=true): Thumbnail[] {
+  const items = [] as Thumbnail[];
+  if (includeUp) {
+    const up = new FolderUp();
+    if (currentFolder) {
+      up.parent = currentFolder;
+    }
+    items.push(up);
+  }
+  return items.concat(folder.get_children() ?? []);
+}
+
+function selectItem(item: Thumbnail, type: ItemSelectionType) {
+  lastSelectedItem.value = item;
+  if (item instanceof Folder) {
+    if (props.lazy) {
+      loading.value = true;
+      store.loadImageCollection({
+        url: item.get_url(),
+        loadChildFolders: !props.lazy,
+      }).then(loadedFolder => {
+        items.value = folderItems(loadedFolder);
+        currentFolder = loadedFolder;
+        loading.value = false;
+      });
+    } else {
+      items.value = folderItems(item);
+      currentFolder = item;
+    }
+  } else if (item instanceof FolderUp) {
+    currentFolder = item.parent;
+    items.value = folderItems(item.parent, item.parent != folder.value);
+  }
+
+  emit("select", { item, type });
+}
+
+onMounted(() => {
+  if (folder.value) {
+    updateFolder(folder.value);
+  }
+});
+
+watch(() => props.rootFolder, (propFolder: Folder | undefined) => {
+  if (propFolder != undefined) {
+    folder.value = propFolder;
+  }
+});
+
+watch(() => props.rootUrl, async (url: string | undefined) => {
+  if (url != undefined) {
+    folder.value = await store.loadImageCollection({ url, loadChildFolders: false });
+  }
+});
+
+watch(folder, (newFolder: Folder | null) => {
+  if (newFolder != null) {
+    updateFolder(newFolder);
+  }
+});
+
+const cssVars = computed(() => ({
+  "--flex-direction": props.orientation,
+  "--background-color": props.backgroundColor,
+  "--thumbnail-color": props.thumbnailColor,
+  "--highlight-color": props.highlightColor,
+  "--text-color": props.textColor,
+  "--gap": props.gap,
+}));
+</script>
+
+<style scoped lang="less">
+.fv-root {
+  width: auto;
+	height: 100%;
+  overflow-x: auto;
+  overflow-y: auto;
+  background: var(--background-color);
+  padding: 5px;
+
+	&::-webkit-scrollbar {
+    padding: 1px;
+    height: 3px;
+		width: 10px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.07);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--highlight-color);
+    border-radius: 10px;
+  }	
+}
+
+.fv-header-container {
+  pointer-events: auto;
+  user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+}
+
+.fv-content {
+  margin: auto;
+  display: flex;
+  flex-direction: var(--flex-direction);
+  align-items: center;
+  justify-content: space-around;
+  gap: var(--gap);
+
+  &::after {
+    content: "";
+    height: 0px;
+  }
+}
+
+.fv-item {
+  height: 100%;
+  flex-grow: 1;
+}
+
+.fv-item-content {
+  position: relative;
+  padding: 1px;
+  margin: 2px;
+  border: 2px solid #444;
+  background: var(--thumbnail-color);
+  border-radius: 2px;
+  width: ~"min(115px, 22vw)";
+  height: 100%;
+  color: var(--text-color);
+  cursor: pointer;
+  pointer-events: auto;
+  font-size: 10pt;
+
+  & img {
+    width: 100%;
+    height: ~"min(45px, 10.3vw)";
+    object-fit: cover;
+    border-radius: 2px;
+  }
+	
+	&:hover {
+		border: 2px solid var(--highlight-color);
+		transition: all 200ms ease-out;
+  }
+
+  &.selected {
+    border: 2px solid var(--highlight-color);
+  }
+}
+
+.fv-item-name {
+  color: var(--text-color);
+  max-width: 100%;
+  padding-left: 2px;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fv-folder-icon {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+}
+
+.fv-loading {
+  position: absolute;
+  top: 5px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--background-color);
+  color: var(--text-color);
+  border: 1px solid var(--text-color);
+  border-radius: 5px;
+  padding: 5px;
+}
+</style>
diff --git a/src/index.ts b/src/index.ts
index 5917d6e..b67a74d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -9,6 +9,7 @@ import { useWWTKeyboardControls } from "./composables/wwtKeyboard";
 
 import CreditLogos from "./components/CreditLogos.vue";
 import DateTimePicker from "./components/DateTimePicker.vue";
+import FolderView from "./components/FolderView.vue";
 import FundingAcknowledgement from "./components/FundingAcknowledgement.vue";
 import Gallery from "./components/Gallery.vue";
 import GeolocationButton from "./components/GeolocationButton.vue";
@@ -38,6 +39,7 @@ export {
 
   CreditLogos,
   DateTimePicker,
+  FolderView,
   FundingAcknowledgement,
   Gallery,
   GeolocationButton,
diff --git a/src/stories/FolderView.stories.ts b/src/stories/FolderView.stories.ts
new file mode 100644
index 0000000..117bb2a
--- /dev/null
+++ b/src/stories/FolderView.stories.ts
@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import { Meta, StoryContext, StoryObj } from "@storybook/vue3";
+import { FolderView, FolderViewProps } from "..";
+import { Folder, FolderUp, Place } from "@wwtelescope/engine";
+import { Thumbnail } from "@wwtelescope/engine-types";
+import { engineStore, WWTComponent } from "@wwtelescope/engine-pinia";
+
+import "./stories.css";
+
+interface LoadedData {
+  loaded: {
+    folder: Folder;
+  }
+}
+
+const meta: Meta<typeof FolderView> = {
+  component: FolderView,
+  tags: ["autodocs"],
+  title: "Vue Toolkit/Components/Folder View",
+};
+
+export default meta;
+type Story = StoryObj<typeof FolderView>;
+type Context = StoryContext<LoadedData>;
+
+
+export const Primary: Story = {
+  render: (args: FolderViewProps, _context: Context) => {
+    const store = engineStore();
+    return {
+      components: { FolderView, WWTComponent },
+      template: `
+        <div style="width: 1000px; height: 500px; position: relative;">
+          <div style="height: fit-content;">
+            <FolderView
+              v-bind="args"
+              @select="({ item, type }) => { if (item instanceof Place) { store.gotoTarget({ place: item }); } }"
+            />
+          </div>
+          <WWTComponent
+            :wwtNamespace="storybook"
+          />
+        </div>
+      `, 
+      setup() {
+        return { args, store, Place };
+      }
+    };
+  },
+  args: {
+    orientation: "row",
+    gap: "10px",
+    backgroundColor: "black",
+    thumbnailColor: "black",
+    highlightColor: "dodgerblue",
+    textColor: "white",
+    startExpanded: true,
+    lazy: true,
+    filter: (item: Thumbnail) => item instanceof Place || item instanceof Folder || item instanceof FolderUp,
+    rootUrl: "https://cdn.worldwidetelescope.org/wwtweb/catalog.aspx?W=explorerootweb",
+  }
+};
diff --git a/src/types.ts b/src/types.ts
index cac41de..e765956 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,7 @@
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { CircleMarkerOptions, TileLayerOptions } from "leaflet";
+import { Folder } from "@wwtelescope/engine";
+import { Thumbnail } from "@wwtelescope/engine-types";
 import { engineStore } from "@wwtelescope/engine-pinia";
 import { MapBoxFeatureCollection } from "./mapbox";
 
@@ -394,3 +396,37 @@ export interface ShareButtonProps {
   /** The ARIA label for the button */
   ariaLabel?: string;
 }
+
+export interface FolderViewProps {
+  /** The root folder of the tree to display in the view. One of either this or `rootUrl` must be specified */
+  rootFolder?: Folder;
+  /** A URL for the root folder of the tree to display in the view. One of either this or `rootFolder` must be specified */
+  rootUrl?: string;
+  /** Specifies the orientation of the folder view */
+  orientation: "row" | "column";
+  /** The gap between folder view items. Any CSS flex gap size is valid. */
+  gap?: string;
+  /** The color of the folder view background. Should be a valid CSS color */
+  backgroundColor?: string;
+  /** The color of the thumbnail view background. Should be a valid CSS color */
+  thumbnailColor?: string;
+  /** The color marking the currently highlighted item. Should be a valid CSS color */
+  highlightColor?: string;
+  /** The color of item name text. Should be a valid CSS color */
+  textColor?: string;
+  /** Whether the folder view should start expanded or not. */
+  startExpanded?: boolean;
+  /** Whether to select the first non-folder item automatically on when the component is mounted. */
+  selectFirst?: boolean;
+  /** The URL of an image to use as a default thumbnail, for items that don't have one. */
+  defaultThumbnail?: string;
+  /**
+  * If true, subfolders are only loaded when they are first visited.
+  * If false, the entire folder tree is loaded right away.
+  * */
+  lazy?: boolean;
+  /** A predicate for filtering which folder items are displayed. Items to be displayed should return true. */
+  filter?: (item: Thumbnail) => boolean;
+}
+
+export type ItemSelectionType = "click" | "dblclick" | "keyup" | "folder";
diff --git a/yarn.lock b/yarn.lock
index d62959e..3f24bc1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -555,6 +555,7 @@ __metadata:
     "@vue/eslint-config-typescript": ^12.0.0
     "@vueuse/core": ^13.1.0
     "@wdns/vue-code-block": ^2.3.5
+    "@wwtelescope/engine": ^7.30.1
     "@wwtelescope/engine-pinia": ^0.9.0
     copy-webpack-plugin: ^12.0.2
     css-loader: ^7.1.1
@@ -3001,7 +3002,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@wwtelescope/engine@npm:^7.29.1":
+"@wwtelescope/engine@npm:^7.29.1, @wwtelescope/engine@npm:^7.30.1":
   version: 7.30.1
   resolution: "@wwtelescope/engine@npm:7.30.1"
   dependencies: