diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index f1aec81e937f..7f12bc1545aa 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
-import { type Ref, ref } from "vue";
+import { computed, type Ref, ref } from "vue";
 import { useRoute } from "vue-router/composables";
 import draggable from "vuedraggable";
 
@@ -10,14 +10,14 @@ import { type Activity, useActivityStore } from "@/stores/activityStore";
 import { useEventStore } from "@/stores/eventStore";
 import { useUserStore } from "@/stores/userStore";
 
+import VisualizationPanel from "../Panels/VisualizationPanel.vue";
 import ActivityItem from "./ActivityItem.vue";
-import ActivitySettings from "./ActivitySettings.vue";
 import InteractiveItem from "./Items/InteractiveItem.vue";
 import NotificationItem from "./Items/NotificationItem.vue";
 import UploadItem from "./Items/UploadItem.vue";
-import ContextMenu from "@/components/Common/ContextMenu.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import NotificationsPanel from "@/components/Panels/NotificationsPanel.vue";
+import SettingsPanel from "@/components/Panels/SettingsPanel.vue";
 import ToolPanel from "@/components/Panels/ToolPanel.vue";
 import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
 
@@ -37,11 +37,6 @@ activityStore.sync();
 // activities from store
 const { activities } = storeToRefs(activityStore);
 
-// context menu references
-const contextMenuVisible = ref(false);
-const contextMenuX = ref(0);
-const contextMenuY = ref(0);
-
 // drag references
 const dragTarget: Ref<EventTarget | null> = ref(null);
 const dragItem: Ref<Activity | null> = ref(null);
@@ -63,6 +58,8 @@ function isActiveSideBar(menuKey: string) {
     return userStore.toggledSideBar === menuKey;
 }
 
+const isSideBarOpen = computed(() => userStore.toggledSideBar !== "");
+
 /**
  * Evaluates the drop data and keeps track of the drop area
  */
@@ -113,20 +110,6 @@ function onDragOver(evt: MouseEvent) {
 function onToggleSidebar(toggle: string) {
     userStore.toggleSideBar(toggle);
 }
-
-/**
- * Positions and displays the context menu
- */
-function toggleContextMenu(evt: MouseEvent) {
-    if (evt && !contextMenuVisible.value) {
-        evt.preventDefault();
-        contextMenuVisible.value = true;
-        contextMenuX.value = evt.x;
-        contextMenuY.value = evt.y;
-    } else {
-        contextMenuVisible.value = false;
-    }
-}
 </script>
 
 <template>
@@ -134,7 +117,6 @@ function toggleContextMenu(evt: MouseEvent) {
         <div
             class="activity-bar d-flex flex-column no-highlight"
             data-description="activity bar"
-            @contextmenu="toggleContextMenu"
             @dragover.prevent="onDragOver"
             @dragenter.prevent="onDragEnter"
             @dragleave.prevent="onDragLeave">
@@ -169,7 +151,7 @@ function toggleContextMenu(evt: MouseEvent) {
                                 :to="activity.to"
                                 @click="onToggleSidebar()" />
                             <ActivityItem
-                                v-else-if="['tools', 'workflows'].includes(activity.id)"
+                                v-else-if="['tools', 'workflows', 'visualizations'].includes(activity.id)"
                                 :id="`activity-${activity.id}`"
                                 :key="activity.id"
                                 :icon="activity.icon"
@@ -203,25 +185,19 @@ function toggleContextMenu(evt: MouseEvent) {
                 <ActivityItem
                     id="activity-settings"
                     icon="cog"
-                    :is-active="isActiveRoute('/user')"
+                    :is-active="isActiveSideBar('settings')"
                     title="Settings"
                     tooltip="Edit preferences"
-                    to="/user"
-                    @click="onToggleSidebar()" />
+                    @click="onToggleSidebar('settings')" />
             </b-nav>
         </div>
-        <FlexPanel v-if="isActiveSideBar('tools')" key="tools" side="left" :collapsible="false">
-            <ToolPanel />
-        </FlexPanel>
-        <FlexPanel v-else-if="isActiveSideBar('workflows')" key="workflows" side="left" :collapsible="false">
-            <WorkflowPanel />
-        </FlexPanel>
-        <FlexPanel v-else-if="isActiveSideBar('notifications')" key="notifications" side="left" :collapsible="false">
-            <NotificationsPanel />
+        <FlexPanel v-if="isSideBarOpen" side="left" :collapsible="false">
+            <ToolPanel v-if="isActiveSideBar('tools')" />
+            <WorkflowPanel v-else-if="isActiveSideBar('workflows')" />
+            <VisualizationPanel v-else-if="isActiveSideBar('visualizations')" />
+            <NotificationsPanel v-else-if="isActiveSideBar('notifications')" />
+            <SettingsPanel v-else-if="isActiveSideBar('settings')" />
         </FlexPanel>
-        <ContextMenu :visible="contextMenuVisible" :x="contextMenuX" :y="contextMenuY" @hide="toggleContextMenu">
-            <ActivitySettings />
-        </ContextMenu>
     </div>
 </template>
 
diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
index 4afe1fea1d12..092f46e3e98c 100644
--- a/client/src/components/ActivityBar/ActivitySettings.vue
+++ b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -59,11 +59,11 @@ function onQuery(newQuery: string) {
 </script>
 
 <template>
-    <div class="activity-settings rounded p-3 no-highlight">
-        <DelayedInput class="mb-3" :delay="100" placeholder="Search activities" @change="onQuery" />
-        <div v-if="foundActivities" class="activity-settings-content overflow-auto">
+    <div class="activity-settings rounded no-highlight">
+        <DelayedInput :delay="100" placeholder="Search activities" @change="onQuery" />
+        <div v-if="foundActivities" class="activity-settings-content">
             <div v-for="activity in filteredActivities" :key="activity.id">
-                <div class="activity-settings-item p-2 cursor-pointer" @click="onClick(activity)">
+                <button class="activity-settings-item p-2 cursor-pointer" @click="onClick(activity)">
                     <div class="d-flex justify-content-between align-items-start">
                         <span class="w-100">
                             <FontAwesomeIcon
@@ -97,7 +97,7 @@ function onQuery(newQuery: string) {
                     <small v-localize>
                         {{ activity.description || "No description available" }}
                     </small>
-                </div>
+                </button>
             </div>
         </div>
         <div v-else class="activity-settings-content">
@@ -110,14 +110,22 @@ function onQuery(newQuery: string) {
 @import "theme/blue.scss";
 
 .activity-settings {
-    width: 20rem;
+    overflow-y: hidden;
+    display: flex;
+    flex-direction: column;
 }
 
 .activity-settings-content {
-    height: 20rem;
+    overflow-y: scroll;
 }
 
 .activity-settings-item {
+    background: none;
+    border: none;
+    text-align: left;
+    transition: none;
+    width: 100%;
+
     .icon-check {
         color: darken($brand-success, 15%);
     }
diff --git a/client/src/components/Panels/ActivityPanel.vue b/client/src/components/Panels/ActivityPanel.vue
index 47480ba91d62..707e9dcec23a 100644
--- a/client/src/components/Panels/ActivityPanel.vue
+++ b/client/src/components/Panels/ActivityPanel.vue
@@ -2,6 +2,7 @@
 interface Props {
     title: string;
     goToAllTitle?: string;
+    href?: string;
 }
 
 const props = defineProps<Props>();
@@ -30,6 +31,7 @@ const emit = defineEmits(["goToAll"]);
             class="activity-panel-footer"
             variant="primary"
             :data-description="`props.mainButtonText button`"
+            :to="props.href"
             @click="emit('goToAll')">
             {{ props.goToAllTitle }}
         </BButton>
@@ -43,7 +45,7 @@ const emit = defineEmits(["goToAll"]);
     height: 100%;
     display: flex;
     flex-flow: column;
-    padding: 0.5rem 0.25rem;
+    padding: 0.5rem 1rem;
     background-color: $brand-light;
 
     .activity-panel-header {
@@ -53,22 +55,26 @@ const emit = defineEmits(["goToAll"]);
             display: flex;
             align-items: center;
             justify-content: space-between;
+            min-height: 2rem;
 
             .activity-panel-heading {
-                margin: 0 !important;
+                margin: 0;
+                padding-left: 0.25rem;
             }
         }
     }
 
     .activity-panel-body {
+        display: flex;
+        flex-direction: column;
         flex-grow: 1;
-        height: 100%;
-        overflow-y: auto;
+        overflow-y: hidden;
         padding: 0.2rem 0.2rem;
     }
 
     .activity-panel-footer {
         margin-top: 0.5rem;
+        font-weight: bold;
     }
 }
 </style>
diff --git a/client/src/components/Panels/NotificationsPanel.vue b/client/src/components/Panels/NotificationsPanel.vue
index b0c0bd61cbe1..606e87459074 100644
--- a/client/src/components/Panels/NotificationsPanel.vue
+++ b/client/src/components/Panels/NotificationsPanel.vue
@@ -5,7 +5,6 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
-import { useRouter } from "vue-router/composables";
 
 import { useConfirmDialog } from "@/composables/confirmDialog";
 import { useNotificationsStore } from "@/stores/notificationsStore";
@@ -16,7 +15,6 @@ import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
 
 library.add(faCheckDouble);
 
-const router = useRouter();
 const { confirm } = useConfirmDialog();
 
 const notificationsStore = useNotificationsStore();
@@ -38,19 +36,14 @@ async function onMarkAllAsRead() {
         });
     }
 }
-
-function goToAllNotifications() {
-    router.push("/user/notifications");
-}
 </script>
 
 <template>
-    <ActivityPanel title="Unread Notifications" go-to-all-title="All notifications" @goToAll="goToAllNotifications">
+    <ActivityPanel title="Unread Notifications" go-to-all-title="All notifications" href="/user/notifications">
         <template v-slot:header-buttons>
             <BButtonGroup>
                 <BButton
                     v-b-tooltip.bottom.hover
-                    :disabled="!unreadNotifications.length"
                     data-description="mark all as read"
                     size="sm"
                     variant="link"
@@ -75,7 +68,7 @@ function goToAllNotifications() {
             No unread notifications to show.
         </BAlert>
 
-        <TransitionGroup name="notifications-box-list" tag="div">
+        <TransitionGroup class="notifications-box-list" name="notifications-box-list" tag="div">
             <div v-for="notification in unreadNotifications" :key="notification.id" class="notifications-box-card">
                 <NotificationCard :notification="notification" />
             </div>
@@ -90,6 +83,10 @@ function goToAllNotifications() {
     background-color: $body-bg;
 }
 
+.notifications-box-list {
+    overflow-y: scroll;
+}
+
 .notifications-box-list-enter-active {
     transition: all 0.5s ease;
 }
diff --git a/client/src/components/Panels/SettingsPanel.vue b/client/src/components/Panels/SettingsPanel.vue
new file mode 100644
index 000000000000..4dcebaa0a0c4
--- /dev/null
+++ b/client/src/components/Panels/SettingsPanel.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import ActivitySettings from "@/components/ActivityBar/ActivitySettings.vue";
+import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
+</script>
+
+<template>
+    <ActivityPanel title="Settings" go-to-all-title="User Preferences" href="/user">
+        <h3>Customize Activity Bar</h3>
+        <ActivitySettings />
+    </ActivityPanel>
+</template>
diff --git a/client/src/components/Panels/VisualizationPanel.vue b/client/src/components/Panels/VisualizationPanel.vue
new file mode 100644
index 000000000000..c38af166b961
--- /dev/null
+++ b/client/src/components/Panels/VisualizationPanel.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
+import PluginList from "@/components/Visualizations/PluginList.vue";
+</script>
+
+<template>
+    <ActivityPanel title="Visualizations">
+        <PluginList />
+    </ActivityPanel>
+</template>
diff --git a/client/src/components/Visualizations/PluginList.vue b/client/src/components/Visualizations/PluginList.vue
index 25ed2d6fad6f..2c9ac18ead3b 100644
--- a/client/src/components/Visualizations/PluginList.vue
+++ b/client/src/components/Visualizations/PluginList.vue
@@ -1,55 +1,61 @@
 <template>
     <div class="plugin-list">
         <div v-if="error" class="alert alert-danger">{{ error }}</div>
-        <div v-else>
+        <template v-else>
             <DelayedInput
                 class="mb-3"
                 :query="search"
                 :placeholder="titleSearchVisualizations"
                 :delay="100"
                 @change="onSearch" />
-            <div v-for="plugin in plugins" :key="plugin.name">
-                <table v-if="match(plugin)">
-                    <tr class="plugin-list-item" :data-plugin-name="plugin.name" @click="select(plugin)">
-                        <td>
-                            <img v-if="plugin.logo" alt="ui thumbnails" class="plugin-list-image" :src="plugin.logo" />
-                            <div v-else class="plugin-list-icon fa fa-eye" />
-                        </td>
-                        <td>
-                            <div class="plugin-list-title font-weight-bold">{{ plugin.html }}</div>
-                            <div class="plugin-list-text">{{ plugin.description }}</div>
-                        </td>
-                    </tr>
-                    <tr v-if="!fixed">
-                        <td />
-                        <td v-if="plugin.name == name">
-                            <div v-if="hdas && hdas.length > 0">
-                                <div class="font-weight-bold">{{ titleSelectDataset }}</div>
-                                <div class="ui-select">
-                                    <select v-model="selected" class="select">
-                                        <option v-for="file in hdas" :key="file.id" :value="file.id">
-                                            {{ file.name }}
-                                        </option>
-                                    </select>
-                                    <div class="icon-dropdown fa fa-caret-down" />
+            <div class="plugin-list-items">
+                <div v-for="plugin in plugins" :key="plugin.name">
+                    <table v-if="match(plugin)">
+                        <tr class="plugin-list-item" :data-plugin-name="plugin.name" @click="select(plugin)">
+                            <td>
+                                <img
+                                    v-if="plugin.logo"
+                                    alt="ui thumbnails"
+                                    class="plugin-list-image"
+                                    :src="plugin.logo" />
+                                <div v-else class="plugin-list-icon fa fa-eye" />
+                            </td>
+                            <td>
+                                <div class="plugin-list-title font-weight-bold">{{ plugin.html }}</div>
+                                <div class="plugin-list-text">{{ plugin.description }}</div>
+                            </td>
+                        </tr>
+                        <tr v-if="!fixed">
+                            <td />
+                            <td v-if="plugin.name == name">
+                                <div v-if="hdas && hdas.length > 0">
+                                    <div class="font-weight-bold">{{ titleSelectDataset }}</div>
+                                    <div class="ui-select">
+                                        <select v-model="selected" class="select">
+                                            <option v-for="file in hdas" :key="file.id" :value="file.id">
+                                                {{ file.name }}
+                                            </option>
+                                        </select>
+                                        <div class="icon-dropdown fa fa-caret-down" />
+                                    </div>
+                                    <button
+                                        type="button"
+                                        class="ui-button-default float-left mt-3 btn btn-primary"
+                                        @click="create(plugin)">
+                                        <i class="icon fa fa-check" />
+                                        <span class="title">{{ titleCreateVisualization }}</span>
+                                    </button>
                                 </div>
-                                <button
-                                    type="button"
-                                    class="ui-button-default float-left mt-3 btn btn-primary"
-                                    @click="create(plugin)">
-                                    <i class="icon fa fa-check" />
-                                    <span class="title">{{ titleCreateVisualization }}</span>
-                                </button>
-                            </div>
-                            <div v-else v-localize class="alert alert-danger">
-                                There is no suitable dataset in your current history which can be visualized with this
-                                plugin.
-                            </div>
-                        </td>
-                    </tr>
-                </table>
+                                <div v-else v-localize class="alert alert-danger">
+                                    There is no suitable dataset in your current history which can be visualized with
+                                    this plugin.
+                                </div>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
             </div>
-        </div>
+        </template>
     </div>
 </template>
 <script>
@@ -157,6 +163,14 @@ export default {
 @import "~scss/mixins.scss";
 
 .plugin-list {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .plugin-list-items {
+        overflow-y: auto;
+    }
+
     .plugin-list-item {
         cursor: pointer;
         .plugin-list-image {
@@ -173,7 +187,7 @@ export default {
             color: $text-color;
         }
         .plugin-list-text {
-            word-wrap: break-word;
+            word-break: break-word;
         }
     }
     .plugin-list-item:hover {
diff --git a/client/src/stores/activitySetup.ts b/client/src/stores/activitySetup.ts
index 2155bddb9c54..ff2b62533534 100644
--- a/client/src/stores/activitySetup.ts
+++ b/client/src/stores/activitySetup.ts
@@ -67,7 +67,7 @@ export const Activities = [
         mutable: false,
         optional: true,
         title: "Visualize",
-        to: "/visualizations",
+        to: null,
         tooltip: "Visualize datasets",
         visible: true,
     },