diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 345be2ad2178..baf94bb99493 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -16,6 +16,7 @@ import InteractiveItem from "./Items/InteractiveItem.vue";
 import NotificationItem from "./Items/NotificationItem.vue";
 import UploadItem from "./Items/UploadItem.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
+import MultiviewPanel from "@/components/Panels/MultiviewPanel.vue";
 import NotificationsPanel from "@/components/Panels/NotificationsPanel.vue";
 import SettingsPanel from "@/components/Panels/SettingsPanel.vue";
 import ToolPanel from "@/components/Panels/ToolPanel.vue";
@@ -44,7 +45,7 @@ const dragItem: Ref<Activity | null> = ref(null);
 const isDragging = ref(false);
 
 /**
- * Checks if the route of an activitiy is currently being visited and panels are collapsed
+ * Checks if the route of an activity is currently being visited and panels are collapsed
  */
 function isActiveRoute(activityTo: string) {
     return route.path === activityTo && isActiveSideBar("");
@@ -59,6 +60,13 @@ function isActiveSideBar(menuKey: string) {
 
 const isSideBarOpen = computed(() => userStore.toggledSideBar !== "");
 
+/**
+ * Checks if an activity that has a panel should have the `is-active` prop
+ */
+function panelActivityIsActive(activity: Activity) {
+    return isActiveSideBar(activity.id) || (activity.to !== null && isActiveRoute(activity.to));
+}
+
 /**
  * Evaluates the drop data and keeps track of the drop area
  */
@@ -106,7 +114,12 @@ function onDragOver(evt: MouseEvent) {
 /**
  * Tracks the state of activities which expand or collapse the sidepanel
  */
-function onToggleSidebar(toggle: string) {
+function onToggleSidebar(toggle: string, to: string | null = null) {
+    // if an activity's dedicated panel/sideBar is already active
+    // but the route is different, don't collapse
+    if (toggle && to && !(route.path === to) && isActiveSideBar(toggle)) {
+        return;
+    }
     userStore.toggleSideBar(toggle);
 }
 </script>
@@ -137,8 +150,7 @@ function onToggleSidebar(toggle: string) {
                                 :key="activity.id"
                                 :icon="activity.icon"
                                 :title="activity.title"
-                                :tooltip="activity.tooltip"
-                                @click="onToggleSidebar()" />
+                                :tooltip="activity.tooltip" />
                             <InteractiveItem
                                 v-else-if="activity.id === 'interactivetools'"
                                 :id="`activity-${activity.id}`"
@@ -150,15 +162,15 @@ function onToggleSidebar(toggle: string) {
                                 :to="activity.to"
                                 @click="onToggleSidebar()" />
                             <ActivityItem
-                                v-else-if="['tools', 'visualizations'].includes(activity.id)"
+                                v-else-if="['tools', 'visualizations', 'multiview'].includes(activity.id)"
                                 :id="`activity-${activity.id}`"
                                 :key="activity.id"
                                 :icon="activity.icon"
-                                :is-active="isActiveSideBar(activity.id)"
+                                :is-active="panelActivityIsActive(activity)"
                                 :title="activity.title"
                                 :tooltip="activity.tooltip"
                                 :to="activity.to"
-                                @click="onToggleSidebar(activity.id)" />
+                                @click="onToggleSidebar(activity.id, activity.to)" />
                             <ActivityItem
                                 v-else-if="activity.to"
                                 :id="`activity-${activity.id}`"
@@ -178,7 +190,7 @@ function onToggleSidebar(toggle: string) {
                     v-if="!isAnonymous && isConfigLoaded && config.enable_notification_system"
                     id="activity-notifications"
                     icon="bell"
-                    :is-active="isActiveSideBar('notifications')"
+                    :is-active="isActiveSideBar('notifications') || isActiveRoute('/user/notifications')"
                     title="Notifications"
                     @click="onToggleSidebar('notifications')" />
                 <ActivityItem
@@ -193,6 +205,7 @@ function onToggleSidebar(toggle: string) {
         <FlexPanel v-if="isSideBarOpen" side="left" :collapsible="false">
             <ToolPanel v-if="isActiveSideBar('tools')" />
             <VisualizationPanel v-else-if="isActiveSideBar('visualizations')" />
+            <MultiviewPanel v-else-if="isActiveSideBar('multiview')" />
             <NotificationsPanel v-else-if="isActiveSideBar('notifications')" />
             <SettingsPanel v-else-if="isActiveSideBar('settings')" />
         </FlexPanel>
diff --git a/client/src/components/Common/FilterMenu.test.ts b/client/src/components/Common/FilterMenu.test.ts
index de6f90493508..c9955acee309 100644
--- a/client/src/components/Common/FilterMenu.test.ts
+++ b/client/src/components/Common/FilterMenu.test.ts
@@ -154,14 +154,14 @@ describe("FilterMenu", () => {
         // `has_help` filter should have help modal button
         expect(wrapper.find("[title='Value Help']").classes().includes("btn")).toBe(true);
         // ranged time field (has 2 datepickers)
-        const createdGtInput = wrapper.find("[placeholder='creation time after']");
-        const createdLtInput = wrapper.find("[placeholder='creation time before']");
+        const createdGtInput = wrapper.find("[placeholder='after creation time']");
+        const createdLtInput = wrapper.find("[placeholder='before creation time']");
         createdGtInput.setValue("January 1, 2022");
         createdLtInput.setValue("January 1, 2023");
         expect(wrapper.findAll(".b-form-datepicker").length).toBe(2);
         // ranged number field (has different placeholder: greater instead of after...)
-        const indexGtInput = wrapper.find("[placeholder='index greater']");
-        const indexLtInput = wrapper.find("[placeholder='index lower']");
+        const indexGtInput = wrapper.find("[placeholder='greater than index']");
+        const indexLtInput = wrapper.find("[placeholder='lower than index']");
         indexGtInput.setValue("1234");
         indexLtInput.setValue("5678");
         // default bool filter
diff --git a/client/src/components/Common/FilterMenuRanged.vue b/client/src/components/Common/FilterMenuRanged.vue
index 73ebcb316d44..ae1d2527112b 100644
--- a/client/src/components/Common/FilterMenuRanged.vue
+++ b/client/src/components/Common/FilterMenuRanged.vue
@@ -49,11 +49,11 @@ function hasError(field: string) {
 
 function localPlaceholder(comp: "gt" | "lt") {
     if (comp == "gt") {
-        const field = isDateType.value ? "after" : "greater";
-        return `${props.filter.placeholder} ${field}`;
+        const field = isDateType.value ? "after" : "greater than";
+        return `${field} ${props.filter.placeholder}`;
     } else {
-        const field = isDateType.value ? "before" : "lower";
-        return `${props.filter.placeholder} ${field}`;
+        const field = isDateType.value ? "before" : "lower than";
+        return `${field} ${props.filter.placeholder}`;
     }
 }
 
diff --git a/client/src/components/Common/TextSummary.vue b/client/src/components/Common/TextSummary.vue
index 9f0ba44c566d..19b7f40e98c7 100644
--- a/client/src/components/Common/TextSummary.vue
+++ b/client/src/components/Common/TextSummary.vue
@@ -7,12 +7,21 @@ import { computed, ref } from "vue";
 library.add(faChevronUp, faChevronDown);
 
 interface Props {
+    /** The maximum length of the unexpanded text / summary */
     maxLength?: number;
+    /** The text to summarize */
     description: string;
+    /** If `true`, doesn't let unexpanded text go beyond height of one line */
+    oneLineSummary?: boolean;
+    /** If `true`, doesn't show expand/collapse buttons */
+    noExpand?: boolean;
+    /** The component to use for the summary, default = `<p>` */
+    component?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     maxLength: 150,
+    component: "p",
 });
 
 const showDetails = ref(false);
@@ -27,14 +36,29 @@ const text = computed(() =>
 
 <template>
     <div>
-        {{ text }}
+        <component :is="props.component" v-if="props.oneLineSummary" class="one-line-summary">
+            {{ props.description }}
+        </component>
+        <span v-else>{{ text }}</span>
         <span
-            v-if="textTooLong"
+            v-if="!noExpand && textTooLong"
             v-b-tooltip.hover
             class="info-icon cursor-pointer"
-            :title="textTooLong ? 'Show more' : 'Show less'"
+            :title="showDetails ? 'Show less' : 'Show more'"
+            role="button"
+            tabindex="0"
+            @keyup.enter="showDetails = !showDetails"
             @click="showDetails = !showDetails">
             <FontAwesomeIcon :icon="showDetails ? 'chevron-up' : 'chevron-down'" />
         </span>
     </div>
 </template>
+
+<style scoped>
+.one-line-summary {
+    max-height: 2em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+</style>
diff --git a/client/src/components/History/CurrentHistory/HistoryCounter.vue b/client/src/components/History/CurrentHistory/HistoryCounter.vue
index e44b174a8433..c70ec3a91e6b 100644
--- a/client/src/components/History/CurrentHistory/HistoryCounter.vue
+++ b/client/src/components/History/CurrentHistory/HistoryCounter.vue
@@ -28,12 +28,14 @@ const props = withDefaults(
         lastChecked: Date;
         filterText?: string;
         showControls?: boolean;
+        hideReload?: boolean;
     }>(),
     {
         isWatching: false,
         lastChecked: () => new Date(),
         filterText: "",
         showControls: false,
+        hideReload: false,
     }
 );
 
@@ -191,6 +193,7 @@ onMounted(() => {
                 </BButton>
 
                 <BButton
+                    v-if="!hideReload"
                     v-b-tooltip.hover
                     :title="reloadButtonTitle"
                     :variant="reloadButtonVariant"
@@ -216,3 +219,9 @@ onMounted(() => {
         </BButtonGroup>
     </div>
 </template>
+
+<style lang="scss" scoped>
+.btn {
+    white-space: nowrap;
+}
+</style>
diff --git a/client/src/components/History/CurrentHistory/HistoryDetails.vue b/client/src/components/History/CurrentHistory/HistoryDetails.vue
index 3151019aeb60..52619647dd25 100644
--- a/client/src/components/History/CurrentHistory/HistoryDetails.vue
+++ b/client/src/components/History/CurrentHistory/HistoryDetails.vue
@@ -1,16 +1,22 @@
 <script setup lang="ts">
+import { BBadge } from "bootstrap-vue";
+
 import type { HistorySummary } from "@/api";
 import { useHistoryStore } from "@/stores/historyStore";
 
+import TextSummary from "@/components/Common/TextSummary.vue";
 import DetailsLayout from "@/components/History/Layout/DetailsLayout.vue";
+import UtcDate from "@/components/UtcDate.vue";
 
 interface Props {
     history: HistorySummary;
     writeable: boolean;
+    summarized: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     writeable: true,
+    summarized: false,
 });
 
 const historyStore = useHistoryStore();
@@ -27,10 +33,26 @@ function onSave(newDetails: HistorySummary) {
         :annotation="history.annotation || ''"
         :tags="history.tags"
         :writeable="writeable"
+        :summarized="summarized"
+        :update-time="history.update_time"
         @save="onSave">
         <template v-slot:name>
             <!-- eslint-disable-next-line vuejs-accessibility/heading-has-content -->
-            <h3 v-short="history.name || 'History'" data-description="name display" class="my-2" />
+            <h3 v-if="!summarized" v-short="history.name || 'History'" data-description="name display" class="my-2" />
+            <TextSummary
+                v-else
+                :description="history.name"
+                data-description="name display"
+                class="my-2"
+                component="h3"
+                one-line-summary
+                no-expand />
+        </template>
+        <template v-if="summarized" v-slot:update-time>
+            <BBadge v-b-tooltip pill>
+                <span v-localize>last edited </span>
+                <UtcDate v-if="history.update_time" :date="history.update_time" mode="elapsed" />
+            </BBadge>
         </template>
     </DetailsLayout>
 </template>
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 32cf6c822d91..d0cd5257df7f 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { GetComponentPropTypes } from "types/utilityTypes";
-import { computed, onMounted, PropType, ref, set as VueSet, unref, watch } from "vue";
+import { computed, onMounted, ref, set as VueSet, unref, watch } from "vue";
 
+import type { HistorySummary } from "@/api";
 import { copyDataset } from "@/api/datasets";
 import ExpandedItems from "@/components/History/Content/ExpandedItems";
 import SelectedItems from "@/components/History/Content/SelectedItems";
@@ -41,31 +42,23 @@ interface BackendFilterError {
     ValueError?: string;
 }
 
-const props = defineProps({
-    listOffset: {
-        type: Number,
-        default: 0,
-    },
-    history: {
-        type: Object as PropType<Record<string, any> & GetComponentPropTypes<typeof HistoryCounter>["history"]>,
-        required: true,
-    },
-    filter: {
-        type: String,
-        default: "",
-    },
-    canEditHistory: {
-        type: Boolean,
-        default: true,
-    },
-    shouldShowControls: {
-        type: Boolean,
-        default: true,
-    },
-    filterable: {
-        type: Boolean,
-        default: false,
-    },
+interface Props {
+    listOffset?: number;
+    history: HistorySummary;
+    filter?: string;
+    canEditHistory?: boolean;
+    shouldShowControls?: boolean;
+    filterable?: boolean;
+    isMultiViewItem?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    listOffset: 0,
+    filter: "",
+    canEditHistory: true,
+    shouldShowControls: true,
+    filterable: false,
+    isMultiViewItem: false,
 });
 
 const filterClass = HistoryFilters;
@@ -76,7 +69,7 @@ const offsetQueryParam = ref(0);
 const searchError = ref<BackendFilterError | undefined>(undefined);
 const showAdvanced = ref(false);
 const showDropZone = ref(false);
-const operationRunning = ref(null);
+const operationRunning = ref<string | null>(null);
 const operationError = ref(null);
 const querySelectionBreak = ref(false);
 const dragTarget = ref<EventTarget | null>(null);
@@ -88,7 +81,7 @@ const historyStore = useHistoryStore();
 const historyItemsStore = useHistoryItemsStore();
 
 const historyUpdateTime = computed(() => {
-    return props.history.update_time as Date;
+    return props.history.update_time;
 });
 
 const queryKey = computed(() => {
@@ -397,6 +390,7 @@ onMounted(async () => {
                     <HistoryDetails
                         :history="history"
                         :writeable="canEditHistory"
+                        :summarized="isMultiViewItem"
                         @update:history="historyStore.updateHistory($event)" />
 
                     <HistoryMessages :history="history" />
@@ -407,6 +401,7 @@ onMounted(async () => {
                         :last-checked="lastCheckedTime"
                         :show-controls="shouldShowControls"
                         :filter-text.sync="filterText"
+                        :hide-reload="isMultiViewItem"
                         @reloadContents="reloadContents" />
 
                     <HistoryOperations
@@ -452,25 +447,23 @@ onMounted(async () => {
                     <HistoryDropZone v-if="showDropZone" />
                     <div>
                         <div v-if="isLoading && historyItems && historyItems.length === 0">
-                            <b-alert class="m-2" variant="info" show>
+                            <BAlert class="m-2" variant="info" show>
                                 <LoadingSpan message="Loading History" />
-                            </b-alert>
+                            </BAlert>
                         </div>
-                        <b-alert v-else-if="isProcessing" class="m-2" variant="info" show>
+                        <BAlert v-else-if="isProcessing" class="m-2" variant="info" show>
                             <LoadingSpan message="Processing operation" />
-                        </b-alert>
+                        </BAlert>
                         <div v-else-if="historyItems.length === 0">
                             <HistoryEmpty v-if="queryDefault" :writable="canEditHistory" class="m-2" />
 
-                            <b-alert v-else-if="formattedSearchError" class="m-2" variant="danger" show>
+                            <BAlert v-else-if="formattedSearchError" class="m-2" variant="danger" show>
                                 Error in filter:
                                 <a href="javascript:void(0)" @click="showAdvanced = true">
                                     {{ formattedSearchError.filter }}'{{ formattedSearchError.value }}'
                                 </a>
-                            </b-alert>
-                            <b-alert v-else class="m-2" variant="info" show>
-                                No data found for selected filter.
-                            </b-alert>
+                            </BAlert>
+                            <BAlert v-else class="m-2" variant="info" show> No data found for selected filter. </BAlert>
                         </div>
                         <ListingLayout
                             v-else
diff --git a/client/src/components/History/HistoriesFilters.js b/client/src/components/History/HistoriesFilters.js
new file mode 100644
index 000000000000..945ef9622123
--- /dev/null
+++ b/client/src/components/History/HistoriesFilters.js
@@ -0,0 +1,17 @@
+import Filtering, { compare, contains, expandNameTag, toDate } from "utils/filtering";
+
+const validFilters = {
+    name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
+    tag: { placeholder: "tag", type: String, handler: contains("tags", "tag", expandNameTag), menuItem: true },
+    annotation: { placeholder: "annotation", type: String, handler: contains("annotation"), menuItem: true },
+    update_time: {
+        placeholder: "updated time",
+        type: Date,
+        handler: compare("update_time", "le", toDate),
+        isRangeInput: true,
+        menuItem: true,
+    },
+    update_time_ge: { handler: compare("update_time", "ge", toDate), menuItem: false },
+    update_time_le: { handler: compare("update_time", "le", toDate), menuItem: false },
+};
+export const HistoriesFilters = new Filtering(validFilters);
diff --git a/client/src/components/History/HistoryScrollList.vue b/client/src/components/History/HistoryScrollList.vue
new file mode 100644
index 000000000000..8198d3d7ebd4
--- /dev/null
+++ b/client/src/components/History/HistoryScrollList.vue
@@ -0,0 +1,489 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCheckSquare, faListAlt, faSquare } from "@fortawesome/free-regular-svg-icons";
+import { faArrowDown, faColumns, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { useInfiniteScroll } from "@vueuse/core";
+import { BAlert, BBadge, BButton, BButtonGroup, BListGroup, BListGroupItem, BOverlay } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import type { HistoryDetailed, HistorySummary } from "@/api";
+import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
+import { useAnimationFrameScroll } from "@/composables/sensors/animationFrameScroll";
+import { useHistoryStore } from "@/stores/historyStore";
+import { useUserStore } from "@/stores/userStore";
+import localize from "@/utils/localization";
+
+import { HistoriesFilters } from "./HistoriesFilters";
+
+import TextSummary from "../Common/TextSummary.vue";
+import Heading from "@/components/Common/Heading.vue";
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
+import ScrollToTopButton from "@/components/ToolsList/ScrollToTopButton.vue";
+import UtcDate from "@/components/UtcDate.vue";
+
+type AdditionalOptions = "set-current" | "multi" | "center";
+type PinnedHistory = { id: string };
+
+interface Props {
+    multiple?: boolean;
+    selectedHistories?: PinnedHistory[];
+    additionalOptions?: AdditionalOptions[];
+    showModal?: boolean;
+    inModal?: boolean;
+    filter: string;
+    loading: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    multiple: false,
+    selectedHistories: () => [],
+    additionalOptions: () => [],
+    showModal: false,
+    inModal: false,
+    filter: "",
+    loading: false,
+});
+
+const emit = defineEmits<{
+    (e: "selectHistory", history: HistorySummary): void;
+    (e: "setFilter", filter: string, value: string): void;
+    (e: "update:loading", loading: boolean): void;
+    (e: "update:show-modal", showModal: boolean): void;
+}>();
+
+library.add(faColumns, faSignInAlt, faListAlt, faArrowDown, faCheckSquare, faSquare);
+
+const busy = ref(false);
+const showAdvanced = ref(false);
+const scrollableDiv = ref<HTMLElement | null>(null);
+
+const historyStore = useHistoryStore();
+const { currentHistoryId, histories, totalHistoryCount, pinnedHistories } = storeToRefs(historyStore);
+const { currentUser } = storeToRefs(useUserStore());
+
+const hasNoResults = computed(() => props.filter && filtered.value.length == 0);
+const validFilter = computed(() => props.filter && props.filter.length > 2);
+const allLoaded = computed(() => totalHistoryCount.value <= filtered.value.length);
+
+// check if we have scrolled to the top or bottom of the scrollable div
+const { arrived, scrollTop } = useAnimationFrameScroll(scrollableDiv);
+const isScrollable = ref(false);
+useAnimationFrameResizeObserver(scrollableDiv, ({ clientSize, scrollSize }) => {
+    isScrollable.value = scrollSize.height >= clientSize.height + 1;
+});
+const scrolledTop = computed(() => !isScrollable.value || arrived.top);
+const scrolledBottom = computed(() => !isScrollable.value || arrived.bottom);
+
+onMounted(async () => {
+    useInfiniteScroll(scrollableDiv.value, () => loadMore());
+    // if mounted with a filter, load histories for filter
+    if (props.filter !== "" && validFilter.value) {
+        await loadMore(true);
+    }
+});
+
+onUnmounted(() => {
+    // Remove the infinite scrolling behavior
+    useInfiniteScroll(scrollableDiv.value, () => {});
+});
+
+/** if screen size is as such that a scroller is not rendered,
+ * we load enough histories so that a scroller is rendered
+ */
+watch(
+    () => isScrollable.value,
+    (scrollable: boolean) => {
+        if (!scrollable && !allLoaded.value) {
+            loadMore();
+        }
+    }
+);
+
+watch(
+    () => props.filter,
+    async (newVal: string, oldVal: string) => {
+        if (newVal !== "" && validFilter.value && newVal !== oldVal) {
+            await loadMore(true);
+        }
+    }
+);
+
+watch(
+    () => busy.value,
+    (loading: boolean) => {
+        emit("update:loading", loading);
+    }
+);
+
+/** `historyStore` histories for current user */
+const historiesProxy = ref<HistorySummary[]>([]);
+watch(
+    () => histories.value as HistoryDetailed[],
+    (h: HistoryDetailed[]) => {
+        historiesProxy.value = h.filter(
+            (h) => !h.user_id || (!currentUser.value?.isAnonymous && h.user_id === currentUser.value?.id)
+        );
+    },
+    {
+        immediate: true,
+    }
+);
+
+const filtered = computed<HistorySummary[]>(() => {
+    let filteredHistories: HistorySummary[] = [];
+    if (!validFilter.value) {
+        filteredHistories = historiesProxy.value;
+    } else {
+        const filters = HistoriesFilters.getFiltersForText(props.filter);
+        filteredHistories = historiesProxy.value.filter((history: HistorySummary) => {
+            if (!HistoriesFilters.testFilters(filters, history)) {
+                return false;
+            }
+            return true;
+        });
+    }
+    return filteredHistories.sort((a, b) => {
+        if (!isMultiviewPanel.value && a.id == currentHistoryId.value) {
+            return -1;
+        } else if (!isMultiviewPanel.value && b.id == currentHistoryId.value) {
+            return 1;
+        } else if (a.update_time < b.update_time) {
+            return 1;
+        } else {
+            return -1;
+        }
+    });
+});
+
+/** is this the selector list for Multiview that shows up in the left panel */
+const isMultiviewPanel = computed(() => !props.inModal && props.multiple);
+
+function isActiveItem(history: HistorySummary) {
+    if (isMultiviewPanel.value) {
+        return pinnedHistories.value.some((item: PinnedHistory) => item.id == history.id);
+    } else {
+        return props.selectedHistories.some((item: PinnedHistory) => item.id == history.id);
+    }
+}
+
+function historyClicked(history: HistorySummary) {
+    emit("selectHistory", history);
+    if (isMultiviewPanel.value) {
+        if (pinnedHistories.value.some((item: PinnedHistory) => item.id == history.id)) {
+            historyStore.unpinHistories([history.id]);
+        } else {
+            openInMulti(history);
+        }
+    }
+}
+
+function scrollToTop() {
+    scrollableDiv.value?.scrollTo({ top: 0, behavior: "smooth" });
+}
+
+const router = useRouter();
+
+function setCurrentHistory(history: HistorySummary) {
+    historyStore.setCurrentHistory(history.id);
+    emit("update:show-modal", false);
+}
+
+function setCenterPanelHistory(history: HistorySummary) {
+    router.push(`/histories/view?id=${history.id}`);
+    emit("update:show-modal", false);
+}
+
+function setFilterValue(newFilter: string, newValue: string) {
+    emit("setFilter", newFilter, newValue);
+}
+
+function openInMulti(history: HistorySummary) {
+    router.push("/histories/view_multiple");
+    historyStore.pinHistory(history.id);
+    emit("update:show-modal", false);
+}
+
+/** Loads (paginates) for more histories
+ * @param noScroll If true, we are not scrolling and will load _all_ items for current filter
+ */
+async function loadMore(noScroll = false) {
+    if (!busy.value && (noScroll || (!noScroll && !props.filter && !allLoaded.value))) {
+        busy.value = true;
+        const queryString = props.filter && HistoriesFilters.getQueryString(props.filter);
+        await historyStore.loadHistories(true, queryString);
+        busy.value = false;
+    }
+}
+</script>
+
+<template>
+    <div :class="isMultiviewPanel ? 'unified-panel' : 'flex-column-overflow'">
+        <div class="unified-panel-controls">
+            <BBadge v-if="props.filter && !validFilter" class="alert-danger w-100 mb-2">
+                Search string too short!
+            </BBadge>
+            <BAlert v-else-if="!busy && hasNoResults" class="mb-2" variant="danger" show>No histories found.</BAlert>
+        </div>
+
+        <div
+            class="history-list-container"
+            :class="{
+                'in-panel': isMultiviewPanel,
+                'scrolled-top': scrolledTop,
+                'scrolled-bottom': scrolledBottom,
+            }">
+            <div
+                v-show="!showAdvanced"
+                ref="scrollableDiv"
+                :class="{
+                    'history-scroll-list': !hasNoResults,
+                    'in-panel': isMultiviewPanel,
+                    'in-modal': props.inModal,
+                    toolMenuContainer: isMultiviewPanel,
+                }"
+                role="list">
+                <BListGroup>
+                    <BListGroupItem
+                        v-for="history in filtered"
+                        :key="history.id"
+                        :data-pk="history.id"
+                        button
+                        :class="{
+                            current: history.id === currentHistoryId,
+                            'panel-item': isMultiviewPanel,
+                        }"
+                        :active="isActiveItem(history)"
+                        @click="() => historyClicked(history)">
+                        <div class="overflow-auto w-100">
+                            <div :class="!isMultiviewPanel ? 'd-flex justify-content-between align-items-center' : ''">
+                                <div v-if="!isMultiviewPanel">
+                                    <Heading h3 inline bold size="text">
+                                        <span>{{ history.name }}</span>
+                                        <i v-if="history.id === currentHistoryId">(Current)</i>
+                                    </Heading>
+                                    <i
+                                        v-if="props.multiple && pinnedHistories.some((h) => h.id === history.id)"
+                                        v-b-tooltip.noninteractive.hover
+                                        title="This history is currently pinned in the multi-history view">
+                                        (currently pinned)
+                                    </i>
+                                </div>
+                                <TextSummary v-else component="h4" :description="history.name" one-line-summary />
+                                <div class="d-flex align-items-center flex-gapx-1">
+                                    <BBadge
+                                        v-b-tooltip.noninteractive.hover
+                                        pill
+                                        :title="localize('Amount of items in history')">
+                                        {{ history.count }} {{ localize("items") }}
+                                    </BBadge>
+                                    <BBadge
+                                        v-if="history.update_time"
+                                        v-b-tooltip.noninteractive.hover
+                                        pill
+                                        :title="localize('Last edited')">
+                                        <UtcDate :date="history.update_time" mode="elapsed" />
+                                    </BBadge>
+                                </div>
+                            </div>
+
+                            <p v-if="!isMultiviewPanel && history.annotation" class="my-1">{{ history.annotation }}</p>
+
+                            <StatelessTags
+                                v-if="history.tags.length > 0"
+                                class="my-1"
+                                :value="history.tags"
+                                :disabled="true"
+                                :max-visible-tags="isMultiviewPanel ? 1 : 10"
+                                @tag-click="setFilterValue('tag', $event)" />
+
+                            <div
+                                v-if="props.additionalOptions.length > 0"
+                                class="d-flex justify-content-end align-items-center mt-1">
+                                <BButtonGroup>
+                                    <BButton
+                                        v-if="
+                                            props.additionalOptions.includes('set-current') &&
+                                            currentHistoryId !== history.id
+                                        "
+                                        v-b-tooltip.noninteractive.hover
+                                        :title="localize('Set as current history')"
+                                        variant="link"
+                                        class="p-0 px-1"
+                                        @click.stop="() => setCurrentHistory(history)">
+                                        <FontAwesomeIcon :icon="faSignInAlt" />
+                                    </BButton>
+
+                                    <BButton
+                                        v-if="props.additionalOptions.includes('multi')"
+                                        v-b-tooltip.noninteractive.hover
+                                        :title="localize('Open in multi-view')"
+                                        variant="link"
+                                        class="p-0 px-1"
+                                        @click.stop="() => openInMulti(history)">
+                                        <FontAwesomeIcon :icon="faColumns" />
+                                    </BButton>
+
+                                    <BButton
+                                        v-if="props.additionalOptions.includes('center')"
+                                        v-b-tooltip.noninteractive.hover
+                                        :title="localize('Open in center panel')"
+                                        variant="link"
+                                        class="p-0 px-1"
+                                        @click.stop="() => setCenterPanelHistory(history)">
+                                        <FontAwesomeIcon :icon="faListAlt" />
+                                    </BButton>
+                                </BButtonGroup>
+                            </div>
+                        </div>
+                        <div v-if="isMultiviewPanel">
+                            <FontAwesomeIcon v-if="isActiveItem(history)" :icon="faCheckSquare" size="lg" />
+                            <FontAwesomeIcon v-else :icon="faSquare" size="lg" />
+                        </div>
+                    </BListGroupItem>
+                    <div>
+                        <div v-if="allLoaded || props.filter !== ''" class="list-end my-2">
+                            <span v-if="filtered.length == 1">- {{ filtered.length }} history loaded -</span>
+                            <span v-else-if="filtered.length > 1">- All {{ filtered.length }} histories loaded -</span>
+                        </div>
+                        <BOverlay :show="busy" opacity="0.5" />
+                    </div>
+                </BListGroup>
+            </div>
+            <ScrollToTopButton :offset="scrollTop" @click="scrollToTop" />
+        </div>
+
+        <div :class="!isMultiviewPanel && 'd-flex flex-row mt-3'">
+            <div
+                v-if="!allLoaded"
+                class="mr-auto d-flex justify-content-center align-items-center"
+                :class="isMultiviewPanel && 'mt-1'">
+                <i class="mr-1">Loaded {{ filtered.length }} out of {{ totalHistoryCount }} histories</i>
+                <BButton
+                    v-if="!props.filter"
+                    v-b-tooltip.noninteractive.hover
+                    data-description="load more histories button"
+                    size="sm"
+                    :title="localize('Load More')"
+                    variant="link"
+                    @click="loadMore()">
+                    <FontAwesomeIcon :icon="faArrowDown" />
+                </BButton>
+            </div>
+
+            <div v-if="props.inModal" class="ml-auto">
+                <slot name="modal-button-area"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import "theme/blue.scss";
+
+.flex-column-overflow {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.history-list-container {
+    position: relative;
+
+    &.in-panel {
+        flex-grow: 1;
+    }
+
+    &:not(&.in-panel) {
+        @extend .flex-column-overflow;
+    }
+
+    &:before,
+    &:after {
+        position: absolute;
+        content: "";
+        pointer-events: none;
+        z-index: 10;
+        height: 30px;
+        width: 100%;
+        opacity: 0;
+
+        background-repeat: no-repeat;
+        transition: opacity 0.4s;
+    }
+
+    &:before {
+        top: 0;
+        background-image: linear-gradient(to bottom, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
+    }
+
+    &:not(.scrolled-top) {
+        &:before {
+            opacity: 1;
+        }
+    }
+
+    &:after {
+        bottom: 0;
+        background-image: linear-gradient(to top, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
+    }
+
+    &:not(.scrolled-bottom) {
+        &:after {
+            opacity: 1;
+        }
+    }
+}
+
+.history-scroll-list {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+
+    &.in-panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    .list-group {
+        .list-group-item {
+            display: flex;
+            border-radius: 0;
+
+            &.current {
+                border-left: 0.25rem solid $brand-primary;
+            }
+
+            &.panel-item {
+                justify-content: space-between;
+                align-items: center;
+                &:not(&.active) {
+                    background: $panel-bg-color;
+                }
+            }
+
+            &:not(&.panel-item) {
+                &:first-child {
+                    border-top-left-radius: inherit;
+                    border-top-right-radius: inherit;
+                }
+
+                &:last-child {
+                    border-bottom-left-radius: inherit;
+                    border-bottom-right-radius: inherit;
+                }
+            }
+        }
+    }
+    .list-end {
+        width: 100%;
+        text-align: center;
+        color: $text-light;
+    }
+}
+</style>
diff --git a/client/src/components/History/Layout/DetailsLayout.vue b/client/src/components/History/Layout/DetailsLayout.vue
index 5b1e975d7c55..ef49938ca9f3 100644
--- a/client/src/components/History/Layout/DetailsLayout.vue
+++ b/client/src/components/History/Layout/DetailsLayout.vue
@@ -9,6 +9,7 @@ import { computed, ref } from "vue";
 import { useUserStore } from "@/stores/userStore";
 import l from "@/utils/localization";
 
+import TextSummary from "@/components/Common/TextSummary.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 
 library.add(faPen, faSave, faUndo);
@@ -19,6 +20,7 @@ interface Props {
     writeable?: boolean;
     annotation?: string;
     showAnnotation?: boolean;
+    summarized?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -27,6 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
     writeable: true,
     annotation: undefined,
     showAnnotation: true,
+    summarized: false,
 });
 
 const emit = defineEmits(["save"]);
@@ -87,7 +90,10 @@ function selectText() {
 </script>
 
 <template>
-    <section class="m-3 details" data-description="edit details">
+    <section
+        class="details"
+        :class="summarized && !editing ? 'summarized-details' : 'm-3'"
+        data-description="edit details">
         <BButton
             :disabled="isAnonymous || !writeable"
             class="edit-button ml-1 float-right"
@@ -103,9 +109,27 @@ function selectText() {
         <slot name="name" />
 
         <div v-if="!editing">
-            <div v-if="annotation" v-short="annotation" class="mt-2" data-description="annotation value" />
-
-            <StatelessTags v-if="tags" class="tags mt-2" :value="tags" :disabled="true" />
+            <div
+                v-if="annotation && !summarized"
+                v-short="annotation"
+                class="mt-2"
+                data-description="annotation value" />
+            <div v-else-if="summarized" style="min-height: 2rem">
+                <TextSummary
+                    v-if="annotation"
+                    :description="annotation"
+                    data-description="annotation value"
+                    one-line-summary
+                    no-expand />
+            </div>
+            <StatelessTags
+                v-if="tags"
+                class="tags"
+                :class="!summarized && 'mt-2'"
+                :value="tags"
+                disabled
+                :max-visible-tags="summarized ? 1 : 5" />
+            <slot v-if="summarized" name="update-time" />
         </div>
 
         <div v-else class="mt-3" data-description="edit form">
@@ -157,3 +181,15 @@ function selectText() {
         </div>
     </section>
 </template>
+
+<style lang="scss" scoped>
+.summarized-details {
+    min-height: 8.5em;
+    margin: 1rem 1rem 0 1rem;
+    max-width: 15rem;
+
+    .tags {
+        min-height: 2rem;
+    }
+}
+</style>
diff --git a/client/src/components/History/Modals/SelectorModal.test.js b/client/src/components/History/Modals/SelectorModal.test.js
index 6766bdefcc94..e6c4e708b1f9 100644
--- a/client/src/components/History/Modals/SelectorModal.test.js
+++ b/client/src/components/History/Modals/SelectorModal.test.js
@@ -56,6 +56,9 @@ describe("History SelectorModal.vue", () => {
             propsData: props,
             localVue,
             pinia,
+            stubs: {
+                icon: { template: "<div></div>" },
+            },
         });
         historyStore = useHistoryStore();
         axiosMock = new MockAdapter(axios);
@@ -82,7 +85,7 @@ describe("History SelectorModal.vue", () => {
 
         let displayedRows = wrapper.findAllComponents(BListGroupItem).wrappers;
         expect(displayedRows.length).toBe(10);
-        expect(wrapper.find(".load-more-hist-button").exists()).toBe(true);
+        expect(wrapper.find("[data-description='load more histories button']").exists()).toBe(true);
 
         getUpdatedAxiosMock();
         await historyStore.loadHistories();
@@ -92,7 +95,7 @@ describe("History SelectorModal.vue", () => {
 
         displayedRows = wrapper.findAllComponents(BListGroupItem).wrappers;
         expect(displayedRows.length).toBe(15);
-        expect(wrapper.find(".load-more-hist-button").exists()).toBe(false);
+        expect(wrapper.find("[data-description='load more histories button']").exists()).toBe(false);
         axiosMock.restore();
     });
 
@@ -127,7 +130,7 @@ describe("History SelectorModal.vue", () => {
             const selectedHistories = wrapper.findAll(".list-group-item.active").wrappers;
             expect(selectedHistories.length).toBe(2);
 
-            const button = wrapper.find("footer > .btn-primary");
+            const button = wrapper.find("[data-description='change selected histories button']");
 
             await button.trigger("click");
 
diff --git a/client/src/components/History/Modals/SelectorModal.vue b/client/src/components/History/Modals/SelectorModal.vue
index 00052ea4e50a..a15aedf55295 100644
--- a/client/src/components/History/Modals/SelectorModal.vue
+++ b/client/src/components/History/Modals/SelectorModal.vue
@@ -1,50 +1,36 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faListAlt } from "@fortawesome/free-regular-svg-icons";
-import { faArrowDown, faColumns, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { useInfiniteScroll } from "@vueuse/core";
-import { BBadge, BButton, BButtonGroup, BFormGroup, BListGroup, BListGroupItem, BModal } from "bootstrap-vue";
+import { BButton, BFormGroup, BModal } from "bootstrap-vue";
+import { orderBy } from "lodash";
 import isEqual from "lodash.isequal";
 import { storeToRefs } from "pinia";
-import { computed, onMounted, onUnmounted, type PropType, type Ref, ref, watch } from "vue";
-import { useRouter } from "vue-router/composables";
+import { computed, ref, watch } from "vue";
 
-import type { HistoryDetailed, HistorySummary } from "@/api";
+import type { HistorySummary } from "@/api";
+import { HistoriesFilters } from "@/components/History/HistoriesFilters";
 import { useHistoryStore } from "@/stores/historyStore";
-import { useUserStore } from "@/stores/userStore";
-import Filtering, { compare, contains, expandNameTag, toDate } from "@/utils/filtering";
 import localize from "@/utils/localization";
 
 import FilterMenu from "@/components/Common/FilterMenu.vue";
 import Heading from "@/components/Common/Heading.vue";
-import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
-import UtcDate from "@/components/UtcDate.vue";
-
-const validFilters = {
-    name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
-    tag: { placeholder: "tag", type: String, handler: contains("tags", "tag", expandNameTag), menuItem: true },
-    annotation: { placeholder: "annotation", type: String, handler: contains("annotation"), menuItem: true },
-    update_time: {
-        placeholder: "updated time",
-        type: Date,
-        handler: compare("update_time", "le", toDate),
-        isRangeInput: true,
-        menuItem: true,
-    },
-    update_time_ge: { handler: compare("update_time", "ge", toDate), menuItem: false },
-    update_time_le: { handler: compare("update_time", "le", toDate), menuItem: false },
-};
-const HistoriesFilters = new Filtering(validFilters);
+import HistoryList from "@/components/History/HistoryScrollList.vue";
 
 type AdditionalOptions = "set-current" | "multi" | "center";
+type PinnedHistory = { id: string };
+
+interface Props {
+    multiple?: boolean;
+    title?: string;
+    histories: HistorySummary[];
+    additionalOptions?: AdditionalOptions[];
+    showModal: boolean;
+}
 
-const props = defineProps({
-    multiple: { type: Boolean, default: false },
-    title: { type: String, default: "Switch to history" },
-    histories: { type: Array as PropType<HistorySummary[]>, default: () => [] },
-    additionalOptions: { type: Array as PropType<AdditionalOptions[]>, default: () => [] },
-    showModal: { type: Boolean, default: false },
+const props = withDefaults(defineProps<Props>(), {
+    multiple: false,
+    title: "Switch to history",
+    histories: () => [],
+    additionalOptions: () => [],
+    showModal: false,
 });
 
 const emit = defineEmits<{
@@ -53,8 +39,6 @@ const emit = defineEmits<{
     (e: "update:show-modal", showModal: boolean): void;
 }>();
 
-library.add(faColumns, faSignInAlt, faListAlt, faArrowDown);
-
 const propShowModal = computed({
     get: () => {
         return props.showModal;
@@ -64,25 +48,13 @@ const propShowModal = computed({
     },
 });
 
-const selectedHistories: Ref<{ id: string }[]> = ref([]);
+const selectedHistories = ref<PinnedHistory[]>([]);
 const filter = ref("");
 const busy = ref(false);
 const showAdvanced = ref(false);
-const modal: Ref<BModal | null> = ref(null);
-const scrollableDiv: Ref<HTMLElement | null> = ref(null);
+const modal = ref<BModal | null>(null);
 
-const historyStore = useHistoryStore();
-const { currentHistoryId, totalHistoryCount } = storeToRefs(useHistoryStore());
-const { currentUser } = storeToRefs(useUserStore());
-
-const pinnedHistories: Ref<{ id: string }[]> = computed(() => historyStore.pinnedHistories);
-const hasNoResults = computed(() => filter.value && filtered.value.length == 0);
-const validFilter = computed(() => filter.value && filter.value.length > 2);
-const allLoaded = computed(() => totalHistoryCount.value <= filtered.value.length);
-
-onMounted(async () => {
-    useInfiniteScroll(scrollableDiv.value, () => loadMore());
-});
+const { pinnedHistories } = storeToRefs(useHistoryStore());
 
 // retain previously selected histories when you reopen the modal in multi view
 watch(
@@ -97,65 +69,15 @@ watch(
     }
 );
 
-onUnmounted(() => {
-    // Remove the infinite scrolling behavior
-    useInfiniteScroll(scrollableDiv.value, () => {});
+/** if pinned histories and selected histories are equal */
+const pinnedSelectedEqual = computed(() => {
+    // uses `orderBy` to ensure same ids are found in both `{ id: string }[]` arrays
+    return isEqual(orderBy(pinnedHistories.value, ["id"], ["asc"]), orderBy(selectedHistories.value, ["id"], ["asc"]));
 });
 
-watch(
-    () => filter.value,
-    async (newVal: string, oldVal: string) => {
-        if (newVal !== "" && validFilter.value && newVal !== oldVal) {
-            await loadMore(true);
-        }
-    }
-);
-
-// reactive proxy for props.histories, as the prop is not
-// always guaranteed to be reactive for some strange reason.
-// TODO: Re investigate when upgrading to vue3
-const historiesProxy: Ref<HistorySummary[]> = ref([]);
-watch(
-    () => props.histories as HistoryDetailed[],
-    (h: HistoryDetailed[]) => {
-        historiesProxy.value = h.filter(
-            (h) => !h.user_id || (!currentUser.value?.isAnonymous && h.user_id === currentUser.value?.id)
-        );
-    },
-    {
-        immediate: true,
-    }
-);
-
-const filtered: Ref<HistorySummary[]> = computed(() => {
-    let filteredHistories: HistorySummary[] = [];
-    if (!validFilter.value) {
-        filteredHistories = historiesProxy.value;
-    } else {
-        const filters = HistoriesFilters.getFiltersForText(filter.value);
-        filteredHistories = historiesProxy.value.filter((history: HistorySummary) => {
-            if (!HistoriesFilters.testFilters(filters, history)) {
-                return false;
-            }
-            return true;
-        });
-    }
-    return filteredHistories.sort((a, b) => {
-        if (a.id == currentHistoryId.value) {
-            return -1;
-        } else if (b.id == currentHistoryId.value) {
-            return 1;
-        } else if (a.update_time < b.update_time) {
-            return 1;
-        } else {
-            return -1;
-        }
-    });
-});
-
-function historyClicked(history: HistorySummary) {
+function selectHistory(history: HistorySummary) {
     if (props.multiple) {
-        const index = selectedHistories.value.findIndex((item) => item.id == history.id);
+        const index = selectedHistories.value.findIndex((item: PinnedHistory) => item.id == history.id);
         if (index !== -1) {
             selectedHistories.value.splice(index, 1);
         } else {
@@ -175,40 +97,9 @@ function selectHistories() {
     modal.value?.hide();
 }
 
-const router = useRouter();
-
-function setCurrentHistory(history: HistorySummary) {
-    historyStore.setCurrentHistory(history.id);
-    modal.value?.hide();
-}
-
-function setCenterPanelHistory(history: HistorySummary) {
-    router.push(`/histories/view?id=${history.id}`);
-    modal.value?.hide();
-}
-
 function setFilterValue(newFilter: string, newValue: string) {
     filter.value = HistoriesFilters.setFilterValue(filter.value, newFilter, newValue);
 }
-
-function openInMulti(history: HistorySummary) {
-    router.push("/histories/view_multiple");
-    historyStore.pinHistory(history.id);
-    historyStore.loadHistoryById(history.id);
-    modal.value?.hide();
-}
-
-/** Loads (paginates) for more histories
- * @param noScroll If true, we are not scrolling and will load _all_ items for current filter
- */
-async function loadMore(noScroll = false) {
-    if (!busy.value && (noScroll || (!noScroll && !filter.value && !allLoaded.value))) {
-        busy.value = true;
-        const queryString = filter.value && HistoriesFilters.getQueryString(filter.value);
-        await historyStore.loadHistories(true, queryString);
-        busy.value = false;
-    }
-}
 </script>
 
 <template>
@@ -216,9 +107,12 @@ async function loadMore(noScroll = false) {
         <BModal
             ref="modal"
             v-model="propShowModal"
-            class="history-selector-modal"
+            body-class="history-selector-modal-body"
+            content-class="history-selector-modal-content"
             v-bind="$attrs"
             static
+            centered
+            hide-footer
             v-on="$listeners">
             <template v-slot:modal-title>
                 <Heading h2 inline size="sm">{{ localize(title) }}</Heading>
@@ -235,152 +129,57 @@ async function loadMore(noScroll = false) {
                     :show-advanced.sync="showAdvanced" />
             </BFormGroup>
 
-            <BBadge v-if="filter && !validFilter" class="alert-danger w-100">Search string too short!</BBadge>
-            <b-alert v-else-if="!busy && hasNoResults" variant="danger" show>No histories found.</b-alert>
-
-            <div v-show="!showAdvanced" ref="scrollableDiv" class="history-selector-modal-list">
-                <BListGroup>
-                    <BListGroupItem
-                        v-for="history in filtered"
-                        :key="history.id"
-                        :data-pk="history.id"
-                        button
-                        :class="{ current: history.id === currentHistoryId }"
-                        :active="selectedHistories.some((h) => h.id === history.id)"
-                        @click="() => historyClicked(history)">
-                        <div class="d-flex justify-content-between align-items-center">
-                            <Heading h3 inline bold size="text">
-                                {{ history.name }}
-                                <i v-if="history.id === currentHistoryId">(Current)</i>
-                            </Heading>
-
-                            <div class="d-flex align-items-center flex-gapx-1">
-                                <BBadge v-b-tooltip pill :title="localize('Amount of items in history')">
-                                    {{ history.count }} {{ localize("items") }}
-                                </BBadge>
-                                <BBadge v-if="history.update_time" v-b-tooltip pill :title="localize('Last edited')">
-                                    <UtcDate :date="history.update_time" mode="elapsed" />
-                                </BBadge>
-                            </div>
-                        </div>
-
-                        <p v-if="history.annotation" class="my-1">{{ history.annotation }}</p>
-
-                        <StatelessTags
-                            v-if="history.tags.length > 0"
-                            class="my-1"
-                            :value="history.tags"
-                            :disabled="true"
-                            :max-visible-tags="10"
-                            @tag-click="setFilterValue('tag', $event)" />
-
-                        <div
-                            v-if="props.additionalOptions.length > 0"
-                            class="d-flex justify-content-end align-items-center mt-1">
-                            <BButtonGroup>
-                                <BButton
-                                    v-if="props.additionalOptions.includes('set-current')"
-                                    v-b-tooltip
-                                    :title="localize('Set as current history')"
-                                    variant="link"
-                                    class="p-0 px-1"
-                                    @click.stop="() => setCurrentHistory(history)">
-                                    <FontAwesomeIcon icon="fa-sign-in-alt" />
-                                </BButton>
-
-                                <BButton
-                                    v-if="props.additionalOptions.includes('multi')"
-                                    v-b-tooltip
-                                    :title="localize('Open in multi-view')"
-                                    variant="link"
-                                    class="p-0 px-1"
-                                    @click.stop="() => openInMulti(history)">
-                                    <FontAwesomeIcon icon="fa-columns" />
-                                </BButton>
-
-                                <BButton
-                                    v-if="props.additionalOptions.includes('center')"
-                                    v-b-tooltip
-                                    :title="localize('Open in center panel')"
-                                    variant="link"
-                                    class="p-0 px-1"
-                                    @click.stop="() => setCenterPanelHistory(history)">
-                                    <FontAwesomeIcon icon="far fa-list-alt" />
-                                </BButton>
-                            </BButtonGroup>
-                        </div>
-                    </BListGroupItem>
-                    <div>
-                        <div v-if="allLoaded || filter !== ''" class="list-end my-2">
-                            <span v-if="filtered.length == 1">- {{ filtered.length }} history loaded -</span>
-                            <span v-else-if="filtered.length > 1">- All {{ filtered.length }} histories loaded -</span>
-                        </div>
-                        <b-overlay :show="busy" opacity="0.5" />
-                    </div>
-                </BListGroup>
-            </div>
-
-            <template v-slot:modal-footer>
-                <div v-if="!allLoaded" class="mr-auto">
-                    <i>Loaded {{ filtered.length }} out of {{ totalHistoryCount }} histories</i>
-                    <BButton
-                        v-b-tooltip.noninteractive.hover
-                        class="load-more-hist-button"
-                        size="sm"
-                        title="Load More"
-                        variant="link"
-                        @click="loadMore()">
-                        <FontAwesomeIcon icon="fa-arrow-down" />
-                    </BButton>
-                </div>
-                <BButton
-                    v-if="multiple"
-                    v-localize
-                    :disabled="selectedHistories.length === 0 || isEqual(selectedHistories, pinnedHistories)"
-                    variant="primary"
-                    @click="selectHistories">
-                    Change Selected
-                </BButton>
-                <span v-else v-localize> Click a history to switch to it </span>
-            </template>
+            <HistoryList
+                v-show="!showAdvanced"
+                :multiple="props.multiple"
+                :selected-histories="selectedHistories"
+                :additional-options="props.additionalOptions"
+                :show-modal.sync="propShowModal"
+                in-modal
+                :filter="filter"
+                :loading.sync="busy"
+                @selectHistory="selectHistory"
+                @setFilter="setFilterValue">
+                <template v-slot:modal-button-area>
+                    <span class="d-flex align-items-center">
+                        <a
+                            v-if="multiple"
+                            v-b-tooltip.noninteractive.hover
+                            :title="localize('Click here to reset selection')"
+                            class="mr-2"
+                            href="javascript:void(0)"
+                            @click="selectedHistories = []">
+                            <i>{{ selectedHistories.length }} histories selected</i>
+                        </a>
+                        <BButton
+                            v-if="multiple"
+                            v-localize
+                            data-description="change selected histories button"
+                            :disabled="pinnedSelectedEqual || showAdvanced"
+                            variant="primary"
+                            @click="selectHistories">
+                            Change Selected
+                        </BButton>
+                        <span v-else v-localize> Click a history to switch to it </span>
+                    </span>
+                </template>
+            </HistoryList>
         </BModal>
     </div>
 </template>
 
-<style lang="scss">
-@import "theme/blue.scss";
+<style>
+/** NOTE: Not using `<style scoped> here because these classes are
+`BModal` `body-class` and `content-class` and so don't seem to work
+with scoped or lang="scss" */
 
-.history-selector-modal .modal-open .modal {
-    overflow-y: hidden;
+.history-selector-modal-body {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
 }
 
-.history-selector-modal-list {
-    overflow-x: hidden;
-    overflow-y: auto;
-    max-height: 65vh;
-    .list-group {
-        .list-group-item {
-            border-radius: 0;
-
-            &.current {
-                border-left: 0.25rem solid $brand-primary;
-            }
-
-            &:first-child {
-                border-top-left-radius: inherit;
-                border-top-right-radius: inherit;
-            }
-
-            &:last-child {
-                border-bottom-left-radius: inherit;
-                border-bottom-right-radius: inherit;
-            }
-        }
-    }
-    .list-end {
-        width: 100%;
-        text-align: center;
-        color: $text-light;
-    }
+.history-selector-modal-content {
+    max-height: 80vh !important;
 }
 </style>
diff --git a/client/src/components/History/Multiple/MultipleView.test.js b/client/src/components/History/Multiple/MultipleView.test.js
index 13fa2ff4948b..6175c7c69bd1 100644
--- a/client/src/components/History/Multiple/MultipleView.test.js
+++ b/client/src/components/History/Multiple/MultipleView.test.js
@@ -10,55 +10,76 @@ import { getLocalVue } from "tests/jest/helpers";
 
 import MultipleView from "./MultipleView";
 
-const COUNT = 8;
 const USER_ID = "test-user-id";
-const CURRENT_HISTORY_ID = "test-history-id-0";
-
-const pinia = createPinia();
+const FIRST_HISTORY_ID = "test-history-id-0";
 
 const getFakeHistorySummaries = (num, selectedIndex) => {
     return Array.from({ length: num }, (_, index) => ({
-        id: selectedIndex === index ? CURRENT_HISTORY_ID : `test-history-id-${index}`,
+        id: `test-history-id-${index}`,
         name: `History-${index}`,
         tags: [],
         update_time: new Date().toISOString(),
     }));
 };
 const currentUser = { id: USER_ID };
-const UserHistoriesMock = MockUserHistories({ id: CURRENT_HISTORY_ID }, getFakeHistorySummaries(COUNT, 0), false);
-
-const localVue = getLocalVue();
 
 describe("MultipleView", () => {
-    let wrapper;
-    let axiosMock;
-
-    beforeEach(async () => {
-        axiosMock = new MockAdapter(axios);
-        wrapper = mount(MultipleView, {
-            pinia,
+    async function setUpWrapper(UserHistoriesMock, count, currentHistoryId) {
+        const axiosMock = new MockAdapter(axios);
+        axiosMock.onGet(`api/histories/${FIRST_HISTORY_ID}`).reply(200, {});
+        const wrapper = mount(MultipleView, {
+            pinia: createPinia(),
             stubs: {
                 UserHistories: UserHistoriesMock,
                 HistoryPanel: true,
+                icon: { template: "<div></div>" },
             },
-            localVue,
+            localVue: getLocalVue(),
         });
 
         const userStore = useUserStore();
         userStore.currentUser = currentUser;
 
         const historyStore = useHistoryStore();
-        historyStore.setHistories(getFakeHistorySummaries(COUNT, 0));
-        historyStore.setCurrentHistoryId(CURRENT_HISTORY_ID);
+        historyStore.setHistories(getFakeHistorySummaries(count, 0));
+        historyStore.setCurrentHistoryId(currentHistoryId);
 
         await flushPromises();
-    });
 
-    afterEach(() => {
+        return { wrapper, axiosMock };
+    }
+
+    it("more than 4 histories should not show the current history", async () => {
+        const count = 8;
+        const currentHistoryId = FIRST_HISTORY_ID;
+
+        // Set up UserHistories and wrapper
+        const UserHistoriesMock = MockUserHistories({ id: currentHistoryId }, getFakeHistorySummaries(count, 0), false);
+        const { wrapper, axiosMock } = await setUpWrapper(UserHistoriesMock, count, currentHistoryId);
+
+        // Test: current (first) history should not be shown because only 4 latest are shown by default
+        expect(wrapper.find("button[title='Current History']").exists()).toBeFalsy();
+
+        expect(wrapper.find("button[title='Switch to this history']").exists()).toBeTruthy();
+
+        expect(wrapper.find("div[title='Currently showing 4 most recently updated histories']").exists()).toBeTruthy();
+
+        expect(wrapper.find("[data-description='open select histories modal']").exists()).toBeTruthy();
+
         axiosMock.reset();
     });
 
-    it("should show the current history", async () => {
+    it("less than or equal to 4 histories should not show the current history", async () => {
+        const count = 3;
+        const currentHistoryId = FIRST_HISTORY_ID;
+
+        // Set up UserHistories and wrapper
+        const UserHistoriesMock = MockUserHistories({ id: currentHistoryId }, getFakeHistorySummaries(count, 0), false);
+        const { wrapper, axiosMock } = await setUpWrapper(UserHistoriesMock, count, currentHistoryId);
+
+        // Test: current (first) history should be shown because only 4 latest are shown by default, and count = 3
         expect(wrapper.find("button[title='Current History']").exists()).toBeTruthy();
+
+        axiosMock.reset();
     });
 });
diff --git a/client/src/components/History/Multiple/MultipleView.vue b/client/src/components/History/Multiple/MultipleView.vue
index 048efe383dc9..20b6e2773542 100644
--- a/client/src/components/History/Multiple/MultipleView.vue
+++ b/client/src/components/History/Multiple/MultipleView.vue
@@ -1,106 +1,167 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faCheckSquare, faClock, faTimes, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, onMounted, type Ref, ref, watchEffect, type WatchStopHandle } from "vue";
+import { computed, ref, watch } from "vue";
 
+import { HistoryFilters } from "@/components/History/HistoryFilters";
+import { Toast } from "@/composables/toast";
 import { useHistoryStore } from "@/stores/historyStore";
 import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
 
 import MultipleViewList from "./MultipleViewList.vue";
+import FilterMenu from "@/components/Common/FilterMenu.vue";
+import Heading from "@/components/Common/Heading.vue";
 import SelectorModal from "@/components/History/Modals/SelectorModal.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
+type PinnedHistory = { id: string };
+
 const filter = ref("");
+const showAdvanced = ref(false);
 const showSelectModal = ref(false);
+const initialLoaded = ref(false);
 
-library.add(faTimes);
+library.add(faCheckSquare, faClock, faTimes, faUndo);
 
 const { currentUser } = storeToRefs(useUserStore());
-const { histories, currentHistory } = storeToRefs(useHistoryStore());
+const { histories, currentHistory, historiesLoading } = storeToRefs(useHistoryStore());
 
 const historyStore = useHistoryStore();
-const selectedHistories: Ref<{ id: string }[]> = computed(() => historyStore.pinnedHistories);
 
-const noHistoriesInView = computed(() => !selectedHistories.value.length && histories.value.length > 0);
+const selectedHistories = computed<PinnedHistory[]>(() => {
+    if (hasPinnedHistories.value) {
+        return historyStore.pinnedHistories;
+    } else {
+        // get the latest four histories
+        return [...histories.value]
+            .sort((a, b) => {
+                if (a.update_time < b.update_time) {
+                    return 1;
+                } else {
+                    return -1;
+                }
+            })
+            .slice(0, 4)
+            .map((history) => {
+                return { id: history.id };
+            });
+    }
+});
 
-const loadingPinnedHistories = ref(true);
-const stopStoreWatcher: Ref<WatchStopHandle | null> = ref(null);
-onMounted(async () => {
-    loadingPinnedHistories.value = true;
-    stopStoreWatcher.value = watchEffect(() => {
-        if (noHistoriesInView.value == true) {
-            historyStore.pinHistory(histories.value[0]!.id);
-            if (stopStoreWatcher.value) {
-                stopStoreWatcher.value();
-            }
+// On mounted, wait for history store to load, then set `initialLoaded` to true
+watch(
+    () => historiesLoading.value,
+    (loading: boolean) => {
+        if (!loading && histories.value.length > 0 && !initialLoaded.value) {
+            initialLoaded.value = true;
         }
-    });
-    loadingPinnedHistories.value = false;
-});
+    },
+    { immediate: true }
+);
+
+/** computed ref that indicates whether the user has histories pinned */
+const hasPinnedHistories = computed(() => Object.keys(historyStore.pinnedHistories).length > 0);
 
 /**
  * From the incoming list, pin histories that are not already pinned and
  * unpin histories that are not in the incoming list.
  * This is a mechanism to allow users to select or deselect histories in modal.
- * @param histories the incoming list of histories to pin
+ * @param incomingHistories the incoming list of histories to pin
  */
-function addHistoriesToList(histories: { id: string }[]) {
-    // Unpin histories that are already pinned but not in the incoming list
-    const historiesToUnpin = selectedHistories.value.filter(
-        (pinnedHistory) => !histories.some((history) => history.id === pinnedHistory.id)
-    );
-    historiesToUnpin.forEach((history) => {
-        historyStore.unpinHistory(history.id);
-    });
-    // Pin histories that aren't already pinned and are in incoming list
-    histories.forEach((history) => {
-        const historyExists = selectedHistories.value.some((h) => h.id === history.id);
+function addHistoriesToList(incomingHistories: PinnedHistory[]) {
+    if (incomingHistories.length === 0) {
+        showRecent();
+        return;
+    }
+    // Pin histories that are in incoming list and aren't already pinned
+    incomingHistories.forEach((history) => {
+        const historyExists = historyStore.pinnedHistories.some((h: PinnedHistory) => h.id === history.id);
         if (!historyExists) {
             historyStore.pinHistory(history.id);
-            historyStore.loadHistoryById(history.id);
         }
     });
+    // Unpin histories that are already pinned but not in the incoming list
+    const historiesToUnpin = historyStore.pinnedHistories
+        .filter((pinnedHistory: PinnedHistory) => !incomingHistories.some((history) => history.id === pinnedHistory.id))
+        .map((history: PinnedHistory) => history.id);
+    historyStore.unpinHistories(historiesToUnpin);
 }
 
-function updateFilter(newFilter: string) {
-    filter.value = newFilter;
+const showRecentTitle = computed(() => {
+    if (hasPinnedHistories.value) {
+        return localize("Show 4 most recently updated histories instead");
+    } else {
+        return localize("Currently showing 4 most recently updated histories");
+    }
+});
+
+/** Reset to _default_ state; showing 4 latest updated histories */
+function showRecent() {
+    historyStore.pinnedHistories = [];
+    Toast.info(
+        "Showing the 4 most recently updated histories. Pin histories to this view by clicking on Select Histories.",
+        "History Multiview"
+    );
 }
 </script>
 
 <template>
-    <div v-if="currentUser">
-        <b-alert v-if="loadingPinnedHistories" class="m-2" variant="info" show>
+    <div v-if="currentUser" class="d-flex flex-column">
+        <div class="d-flex">
+            <Heading h1 separator inline size="xl" class="flex-grow-1 mb-2">History Multiview</Heading>
+
+            <div class="d-flex justify-content-between">
+                <div>
+                    <BButtonGroup v-b-tooltip.hover.noninteractive :title="showRecentTitle">
+                        <BButton
+                            size="sm"
+                            data-description="show recent histories"
+                            variant="outline-primary"
+                            :disabled="!hasPinnedHistories"
+                            @click="showRecent">
+                            <FontAwesomeIcon v-if="hasPinnedHistories" :icon="faUndo" />
+                            <FontAwesomeIcon v-else :icon="faClock" />
+                            <span v-localize>Recent</span>
+                        </BButton>
+                    </BButtonGroup>
+                    <BButton
+                        v-b-tooltip.hover.noninteractive
+                        :title="localize('Open modal to select/deselect histories')"
+                        size="sm"
+                        data-description="open select histories modal"
+                        variant="outline-primary"
+                        @click="showSelectModal = true">
+                        <FontAwesomeIcon :icon="faCheckSquare" />
+                        <span v-localize>Select</span>
+                    </BButton>
+                </div>
+            </div>
+        </div>
+        <BAlert v-if="!initialLoaded && historiesLoading" class="m-2" variant="info" show>
             <LoadingSpan message="Loading Histories" />
-        </b-alert>
+        </BAlert>
         <div v-else-if="histories.length" class="multi-history-panel d-flex flex-column h-100">
-            <b-input-group class="w-100">
-                <b-form-input
-                    v-model="filter"
-                    size="sm"
-                    debounce="500"
-                    :class="filter && 'font-weight-bold'"
-                    :placeholder="localize('search datasets in selected histories')"
-                    data-description="filter text input"
-                    @keyup.esc="updateFilter('')" />
-                <b-input-group-append>
-                    <b-button size="sm" data-description="show deleted filter toggle" @click="updateFilter('')">
-                        <FontAwesomeIcon icon="fa-times" />
-                    </b-button>
-                </b-input-group-append>
-            </b-input-group>
+            <FilterMenu
+                name="History Multiview"
+                :placeholder="localize('Search datasets and collections in selected histories')"
+                :filter-class="HistoryFilters"
+                :filter-text.sync="filter"
+                :loading="historiesLoading"
+                :show-advanced.sync="showAdvanced" />
             <MultipleViewList
-                :histories="histories"
+                v-show="!showAdvanced"
                 :filter="filter"
                 :current-history="currentHistory"
                 :selected-histories="selectedHistories"
                 :show-modal.sync="showSelectModal" />
         </div>
-        <b-alert v-else class="m-2" variant="danger" show>
+        <BAlert v-else-if="!histories.length" class="m-2" variant="danger" show>
             <span v-localize class="font-weight-bold">No History found.</span>
-        </b-alert>
+        </BAlert>
         <SelectorModal
             v-show="showSelectModal"
             :multiple="true"
diff --git a/client/src/components/History/Multiple/MultipleViewItem.vue b/client/src/components/History/Multiple/MultipleViewItem.vue
index 5c09b60c6438..de19d9af530b 100644
--- a/client/src/components/History/Multiple/MultipleViewItem.vue
+++ b/client/src/components/History/Multiple/MultipleViewItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 
 import { useHistoryStore } from "@/stores/historyStore";
 
@@ -19,7 +19,11 @@ interface Props {
 const props = defineProps<Props>();
 
 const historyStore = useHistoryStore();
-const { currentHistoryId } = storeToRefs(historyStore);
+const { currentHistoryId, pinnedHistories } = storeToRefs(historyStore);
+
+onMounted(() => {
+    historyStore.loadHistoryById(props.source.id);
+});
 
 const selectedCollections = ref<any[]>([]);
 
@@ -55,6 +59,7 @@ function onViewCollection(collection: object) {
             :history="getHistory"
             :filter="filter"
             :show-controls="false"
+            is-multi-view-item
             @view-collection="onViewCollection" />
 
         <hr class="w-100 m-2" />
@@ -69,13 +74,13 @@ function onViewCollection(collection: object) {
                 @click="historyStore.setCurrentHistory(source.id)">
                 {{ sameToCurrent ? "Current History" : "Switch to" }}
             </BButton>
-
             <BButton
+                v-if="Object.keys(pinnedHistories).length > 0"
                 size="sm"
                 class="my-1"
                 variant="outline-danger"
                 title="Hide this history from the list"
-                @click="historyStore.unpinHistory(source.id)">
+                @click="historyStore.unpinHistories([source.id])">
                 Hide
             </BButton>
         </div>
diff --git a/client/src/components/History/Multiple/MultipleViewList.vue b/client/src/components/History/Multiple/MultipleViewList.vue
index ec19d5202825..99af2b246265 100644
--- a/client/src/components/History/Multiple/MultipleViewList.vue
+++ b/client/src/components/History/Multiple/MultipleViewList.vue
@@ -1,24 +1,28 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCheckSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed, type Ref, ref } from "vue";
 //@ts-ignore missing typedefs
 import VirtualList from "vue-virtual-scroll-list";
 
-import type { HistorySummary } from "@/api";
 import { copyDataset } from "@/api/datasets";
 import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
 import { useAnimationFrameScroll } from "@/composables/sensors/animationFrameScroll";
 import { Toast } from "@/composables/toast";
 import { useHistoryStore } from "@/stores/historyStore";
 import localize from "@/utils/localization";
+import { errorMessageAsString } from "@/utils/simple-error";
 
 import HistoryDropZone from "../CurrentHistory/HistoryDropZone.vue";
 import MultipleViewItem from "./MultipleViewItem.vue";
 
+library.add(faCheckSquare, faPlus);
+
 const historyStore = useHistoryStore();
 
 const props = withDefaults(
     defineProps<{
-        histories: HistorySummary[];
         selectedHistories: { id: string }[];
         filter?: string;
     }>(),
@@ -27,6 +31,11 @@ const props = withDefaults(
     }
 );
 
+// defineEmits below
+const emit = defineEmits<{
+    (e: "update:show-modal", value: boolean): void;
+}>();
+
 const scrollContainer: Ref<HTMLElement | null> = ref(null);
 const { arrived } = useAnimationFrameScroll(scrollContainer);
 
@@ -38,10 +47,23 @@ useAnimationFrameResizeObserver(scrollContainer, ({ clientSize, scrollSize }) =>
 const scrolledLeft = computed(() => !isScrollable.value || arrived.left);
 const scrolledRight = computed(() => !isScrollable.value || arrived.right);
 
+async function createAndPin() {
+    try {
+        await historyStore.createNewHistory();
+        if (!historyStore.currentHistoryId) {
+            throw new Error("Error creating history");
+        }
+
+        if (historyStore.pinnedHistories.length > 0) {
+            historyStore.pinHistory(historyStore.currentHistoryId);
+        }
+    } catch (error: any) {
+        console.error(error);
+        Toast.error(errorMessageAsString(error), "Error creating and pinning history");
+    }
+}
+
 const showDropZone = ref(false);
-const historyPickerText = computed(() =>
-    showDropZone.value ? localize("Create new history with this item") : localize("Select histories")
-);
 const processingDrop = ref(false);
 async function onDrop(evt: any) {
     if (processingDrop.value) {
@@ -57,6 +79,7 @@ async function onDrop(evt: any) {
         // this was not a valid object for this dropzone, ignore
     }
     if (data) {
+        const originalHistoryId = data.history_id;
         await historyStore.createNewHistory();
         const currentHistoryId = historyStore.currentHistoryId;
         const dataSource = data.history_content_type === "dataset" ? "hda" : "hdca";
@@ -68,19 +91,32 @@ async function onDrop(evt: any) {
                     } else {
                         Toast.info(localize("Collection copied to new history"));
                     }
-                    historyStore.loadHistoryById(currentHistoryId);
                 })
                 .catch((error) => {
-                    Toast.error(error);
+                    Toast.error(errorMessageAsString(error));
                 });
+            // pin the newly created history via the drop
             historyStore.pinHistory(currentHistoryId);
+            // also pin the original history where the item came from
+            historyStore.pinHistory(originalHistoryId);
         }
         processingDrop.value = false;
     }
 }
+
+async function onKeyDown(evt: KeyboardEvent) {
+    if (evt.key === "Enter" || evt.key === " ") {
+        if ((evt.target as HTMLElement)?.classList?.contains("top-picker")) {
+            await createAndPin();
+        } else if ((evt.target as HTMLElement)?.classList?.contains("bottom-picker")) {
+            emit("update:show-modal", true);
+        }
+    }
+}
 </script>
 
 <template>
+    <!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
     <div class="list-container h-100" :class="{ 'scrolled-left': scrolledLeft, 'scrolled-right': scrolledRight }">
         <div ref="scrollContainer" class="d-flex h-100 w-auto overflow-auto">
             <VirtualList
@@ -91,34 +127,75 @@ async function onDrop(evt: any) {
                 :data-sources="props.selectedHistories"
                 :direction="'horizontal'"
                 :extra-props="{ filter }"
-                :item-style="{ width: '15rem' }"
+                :item-style="{ width: '100%', minWidth: '15rem' }"
                 item-class="d-flex mx-1 mt-1"
                 class="d-flex"
                 wrap-class="row flex-nowrap m-0">
             </VirtualList>
 
             <div
-                class="history-picker text-primary d-flex m-3 align-items-center text-nowrap"
-                @click.stop="$emit('update:show-modal', true)"
+                class="history-picker"
                 @drop.prevent="onDrop"
                 @dragenter.prevent="showDropZone = true"
                 @dragover.prevent
                 @dragleave.prevent="showDropZone = false">
-                {{ historyPickerText }}
-                <HistoryDropZone v-if="showDropZone" style="left: 0" />
+                <span v-if="!showDropZone" class="d-flex flex-column h-100">
+                    <div
+                        class="history-picker-box top-picker text-primary"
+                        tabindex="0"
+                        @keydown="onKeyDown"
+                        @click.stop="createAndPin">
+                        <FontAwesomeIcon :icon="faPlus" class="mr-1" />
+                        {{ localize("Create and pin new history") }}
+                    </div>
+                    <div
+                        class="history-picker-box bottom-picker text-primary"
+                        tabindex="0"
+                        @keydown="onKeyDown"
+                        @click.stop="emit('update:show-modal', true)">
+                        <FontAwesomeIcon :icon="faCheckSquare" class="mr-1" />
+                        {{ localize("Select histories") }}
+                    </div>
+                </span>
+                <div v-else class="history-picker-box history-picker-drop-zone text-primary">
+                    {{ localize("Create new history with this item") }}
+                    <HistoryDropZone />
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <style lang="scss" scoped>
+@import "scss/theme/blue.scss";
 .list-container {
     .history-picker {
-        border: dotted lightgray;
-        cursor: pointer;
-        width: 15rem;
-        position: relative;
-        justify-content: center;
+        min-width: 15rem;
+        max-width: 15rem;
+        margin: 1rem;
+        .history-picker-box {
+            border: dotted lightgray;
+            cursor: pointer;
+            position: relative;
+            justify-content: center;
+            display: flex;
+            align-items: center;
+            text-wrap: none;
+            &.top-picker {
+                height: 20%;
+            }
+            &.bottom-picker {
+                height: 80%;
+            }
+            &:not(.history-picker-drop-zone) {
+                &:hover {
+                    background-color: rgba($brand-info, 0.2);
+                }
+            }
+            &.history-picker-drop-zone {
+                height: 100%;
+            }
+        }
     }
 
     position: relative;
diff --git a/client/src/components/Panels/MultiviewPanel.vue b/client/src/components/Panels/MultiviewPanel.vue
new file mode 100644
index 000000000000..207250346c15
--- /dev/null
+++ b/client/src/components/Panels/MultiviewPanel.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faColumns, faPlus, faUndo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BBadge, BButton, BButtonGroup } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed, ref } from "vue";
+import { useRoute, useRouter } from "vue-router/composables";
+
+import { HistoriesFilters } from "@/components/History/HistoriesFilters";
+import { Toast } from "@/composables/toast";
+import { useHistoryStore } from "@/stores/historyStore";
+import { useUserStore } from "@/stores/userStore";
+import { localize } from "@/utils/localization";
+import { withPrefix } from "@/utils/redirect";
+import { errorMessageAsString } from "@/utils/simple-error";
+
+import FilterMenu from "@/components/Common/FilterMenu.vue";
+import HistoryList from "@/components/History/HistoryScrollList.vue";
+import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
+
+const route = useRoute();
+const router = useRouter();
+
+library.add(faColumns, faPlus, faUndo);
+
+const filter = ref("");
+const showAdvanced = ref(false);
+const loading = ref(false);
+
+const isAnonymous = computed(() => useUserStore().isAnonymous);
+const historyStore = useHistoryStore();
+const { historiesLoading, currentHistoryId } = storeToRefs(historyStore);
+
+const pinnedHistoryCount = computed(() => {
+    return Object.keys(historyStore.pinnedHistories).length;
+});
+
+const pinRecentTitle = computed(() => {
+    if (pinnedHistoryCount.value > 0) {
+        return localize("Reset selection to show 4 most recently updated histories instead");
+    } else {
+        return localize("Currently showing 4 most recently updated histories in Multiview");
+    }
+});
+
+const pinRecentText = computed(() => {
+    if (pinnedHistoryCount.value > 1) {
+        return localize(`${pinnedHistoryCount.value} histories pinned. Click here to reset`);
+    } else if (pinnedHistoryCount.value == 1) {
+        return localize("1 history pinned. Click here to reset");
+    } else {
+        return localize("Select histories to pin to Multiview");
+    }
+});
+
+async function createAndPin() {
+    try {
+        loading.value = true;
+        await historyStore.createNewHistory();
+        if (!currentHistoryId.value) {
+            throw new Error("Error creating history");
+        }
+        if (pinnedHistoryCount.value > 0) {
+            historyStore.pinHistory(currentHistoryId.value);
+        }
+        router.push("/histories/view_multiple");
+    } catch (error: any) {
+        console.error(error);
+        Toast.error(errorMessageAsString(error), "Error creating and pinning history");
+    } finally {
+        loading.value = false;
+    }
+}
+
+/** Reset to _default_ state; showing 4 latest updated histories */
+function pinRecent() {
+    historyStore.pinnedHistories = [];
+    Toast.info(
+        "Showing the 4 most recently updated histories in Multiview. Pin histories to History Multiview by selecting them in the panel.",
+        "History Multiview"
+    );
+}
+
+function setFilter(newFilter: string, newValue: string) {
+    filter.value = HistoriesFilters.setFilterValue(filter.value, newFilter, newValue);
+}
+
+function userTitle(title: string) {
+    if (isAnonymous.value == true) {
+        return `Log in to ${title}`;
+    } else {
+        return title;
+    }
+}
+</script>
+
+<template>
+    <ActivityPanel title="Select Histories">
+        <template v-slot:header-buttons>
+            <BButtonGroup>
+                <BButton
+                    v-b-tooltip.bottom.hover
+                    data-description="create new history for multiview"
+                    size="sm"
+                    variant="link"
+                    :title="userTitle('Create new history and show in multiview')"
+                    :disabled="isAnonymous"
+                    @click="createAndPin">
+                    <FontAwesomeIcon :icon="faPlus" fixed-width />
+                </BButton>
+            </BButtonGroup>
+        </template>
+
+        <template v-slot:header>
+            <FilterMenu
+                class="mb-3"
+                name="Histories"
+                placeholder="search histories"
+                :filter-class="HistoriesFilters"
+                :filter-text.sync="filter"
+                :loading="historiesLoading || loading"
+                :show-advanced.sync="showAdvanced" />
+            <section v-if="!showAdvanced">
+                <BButton
+                    v-if="route.path !== '/histories/view_multiple'"
+                    v-b-tooltip.hover.noninteractive.bottom
+                    :aria-label="userTitle('Open History Multiview in center panel')"
+                    :title="userTitle('Open History Multiview in center panel')"
+                    class="w-100"
+                    size="sm"
+                    :disabled="isAnonymous"
+                    @click="router.push('/histories/view_multiple')">
+                    <FontAwesomeIcon :icon="faColumns" class="mr-1" />
+                    <span v-localize>Open History Multiview</span>
+                </BButton>
+                <BButtonGroup
+                    v-else
+                    v-b-tooltip.hover.noninteractive.bottom
+                    class="w-100"
+                    :aria-label="pinRecentTitle"
+                    :title="pinRecentTitle">
+                    <BButton size="sm" :disabled="!pinnedHistoryCount" @click="pinRecent">
+                        <span class="position-relative">
+                            <FontAwesomeIcon v-if="pinnedHistoryCount" :icon="faUndo" class="mr-1" />
+                            <b>{{ pinRecentText }}</b>
+                        </span>
+                    </BButton>
+                </BButtonGroup>
+            </section>
+        </template>
+
+        <div v-if="isAnonymous">
+            <BBadge class="alert-info w-100 mx-2">
+                Please <a :href="withPrefix('/login')">log in or register</a> to create multiple histories.
+            </BBadge>
+        </div>
+
+        <HistoryList v-show="!showAdvanced" multiple :filter="filter" :loading.sync="loading" @setFilter="setFilter" />
+    </ActivityPanel>
+</template>
diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 6fd2db1e1b0f..413def84e2a2 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -133,7 +133,7 @@ function onTagClicked(tag: string) {
                     :id="toggleButtonId"
                     variant="link"
                     class="toggle-link"
-                    @click="() => (toggledOpen = true)">
+                    @click.stop="() => (toggledOpen = true)">
                     {{ slicedTags.length }} more...
                 </BButton>
 
diff --git a/client/src/components/ToolsList/ScrollToTopButton.vue b/client/src/components/ToolsList/ScrollToTopButton.vue
index 04694b2dea4b..34b5d8d6fbc5 100644
--- a/client/src/components/ToolsList/ScrollToTopButton.vue
+++ b/client/src/components/ToolsList/ScrollToTopButton.vue
@@ -35,6 +35,7 @@ export default {
     position: absolute;
     opacity: 0;
     transition: opacity 0.4s;
+    z-index: 1000;
 
     &.show {
         opacity: 1;
diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index 21ff320e7ce1..472c7c4d37c1 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -280,6 +280,7 @@ export function getRouter(Galaxy) {
                         path: "histories/view_multiple",
                         component: HistoryMultipleView,
                         props: true,
+                        redirect: redirectAnon(),
                     },
                     {
                         path: "histories/list_published",
diff --git a/client/src/stores/activitySetup.ts b/client/src/stores/activitySetup.ts
index ff2b62533534..01293c21c49f 100644
--- a/client/src/stores/activitySetup.ts
+++ b/client/src/stores/activitySetup.ts
@@ -82,6 +82,17 @@ export const Activities = [
         to: "/histories/list",
         visible: true,
     },
+    {
+        description: "Displays the history selector panel and opens History Multiview in the center panel.",
+        icon: "fa-columns",
+        id: "multiview",
+        mutable: false,
+        optional: true,
+        title: "History Multiview",
+        tooltip: "Select histories to show in History Multiview",
+        to: "/histories/view_multiple",
+        visible: true,
+    },
     {
         description: "Displays all of your datasets across all histories.",
         icon: "fa-folder",
diff --git a/client/src/stores/historyStore.ts b/client/src/stores/historyStore.ts
index dc912b5fc815..fa82ee602e1b 100644
--- a/client/src/stores/historyStore.ts
+++ b/client/src/stores/historyStore.ts
@@ -136,8 +136,8 @@ export const useHistoryStore = defineStore("historyStore", () => {
         }
     }
 
-    function unpinHistory(historyId: string) {
-        pinnedHistories.value = pinnedHistories.value.filter((h) => h.id !== historyId);
+    function unpinHistories(historyIds: string[]) {
+        pinnedHistories.value = pinnedHistories.value.filter((h) => !historyIds.includes(h.id));
     }
 
     function selectHistory(history: HistorySummary) {
@@ -180,6 +180,7 @@ export const useHistoryStore = defineStore("historyStore", () => {
             await createNewHistory();
         }
         Vue.delete(storedHistories.value, deletedHistory.id);
+        unpinHistories([deletedHistory.id]);
         await handleTotalCountChange(1, true);
     }
 
@@ -295,7 +296,7 @@ export const useHistoryStore = defineStore("historyStore", () => {
         setHistory,
         setHistories,
         pinHistory,
-        unpinHistory,
+        unpinHistories,
         selectHistory,
         applyFilters,
         copyHistory,