diff --git a/skore-ui/src/ShareApp.vue b/skore-ui/src/ShareApp.vue
index 5e80c6de..4e0d75ca 100644
--- a/skore-ui/src/ShareApp.vue
+++ b/skore-ui/src/ShareApp.vue
@@ -1,10 +1,22 @@
 <script setup lang="ts">
+import { formatDistance } from "date-fns";
 import Simplebar from "simplebar-vue";
 
-import ProjectViewCanvas from "@/components/ProjectViewCanvas.vue";
+import DataFrameWidget from "@/components/DataFrameWidget.vue";
+import HtmlSnippetWidget from "@/components/HtmlSnippetWidget.vue";
+import ImageWidget from "@/components/ImageWidget.vue";
+import MarkdownWidget from "@/components/MarkdownWidget.vue";
+import PlotlyWidget from "@/components/PlotlyWidget.vue";
+import ProjectViewCard from "@/components/ProjectViewCard.vue";
+import VegaWidget from "@/components/VegaWidget.vue";
 import { useProjectStore } from "@/stores/project";
 
 const projectStore = useProjectStore();
+
+function getItemSubtitle(created_at: Date, updated_at: Date) {
+  const now = new Date();
+  return `Created ${formatDistance(created_at, now)} ago, updated ${formatDistance(updated_at, now)} ago`;
+}
 </script>
 
 <template>
@@ -12,8 +24,37 @@ const projectStore = useProjectStore();
     <div class="share-header">
       <h1>{{ projectStore.currentView }}</h1>
     </div>
-    <Simplebar class="canvas-wrapper">
-      <ProjectViewCanvas :showCardActions="false" />
+    <Simplebar class="cards">
+      <div class="inner">
+        <ProjectViewCard
+          v-for="{ key, mediaType, data, createdAt, updatedAt } in projectStore.currentViewItems"
+          :key="key"
+          :title="key.toString()"
+          :subtitle="getItemSubtitle(createdAt, updatedAt)"
+          :showActions="false"
+        >
+          <DataFrameWidget
+            v-if="mediaType === 'application/vnd.dataframe+json'"
+            :columns="data.columns"
+            :data="data.data"
+            :index="data.index"
+          />
+          <ImageWidget
+            v-if="['image/svg+xml', 'image/png', 'image/jpeg', 'image/webp'].includes(mediaType)"
+            :mediaType="mediaType"
+            :base64-src="data"
+            :alt="key.toString()"
+          />
+          <MarkdownWidget v-if="mediaType === 'text/markdown'" :source="data" />
+          <VegaWidget v-if="mediaType === 'application/vnd.vega.v5+json'" :spec="data" />
+          <PlotlyWidget v-if="mediaType === 'application/vnd.plotly.v1+json'" :spec="data" />
+          <HtmlSnippetWidget
+            v-if="mediaType === 'application/vnd.sklearn.estimator+html'"
+            :src="data"
+          />
+          <HtmlSnippetWidget v-if="mediaType === 'text/html'" :src="data" />
+        </ProjectViewCard>
+      </div>
     </Simplebar>
   </div>
 </template>
@@ -56,35 +97,16 @@ const projectStore = useProjectStore();
     }
   }
 
-  & .drop-indicator {
-    height: 3px;
-    border-radius: 8px;
-    margin: 0 10%;
-    background-color: var(--text-color-title);
-    opacity: 0;
-    transition: opacity var(--transition-duration) var(--transition-easing);
-
-    &.visible {
-      opacity: 1;
-    }
-  }
-
-  & .placeholder {
-    height: 100%;
-    padding-top: calc((100vh - var(--header-height)) * 476 / 730);
-    background-image: var(--editor-placeholder-image);
-    background-position: 50%;
-    background-repeat: no-repeat;
-    background-size: contain;
-    color: var(--text-color-normal);
-    font-size: var(--text-size-normal);
-    text-align: center;
-  }
-
-  & .canvas-wrapper {
+  & .cards {
     height: 0;
     flex-grow: 1;
     padding: var(--spacing-padding-large);
+
+    & .inner {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-gap-large);
+    }
   }
 }
 </style>
diff --git a/skore-ui/src/components/DraggableList.vue b/skore-ui/src/components/DraggableList.vue
index d8d6bd3a..5a15a364 100644
--- a/skore-ui/src/components/DraggableList.vue
+++ b/skore-ui/src/components/DraggableList.vue
@@ -3,7 +3,7 @@ import type { Interactable } from "@interactjs/types";
 import { toPng } from "html-to-image";
 import interact from "interactjs";
 import Simplebar from "simplebar-core";
-import { onMounted, onUnmounted, ref, useTemplateRef } from "vue";
+import { onBeforeUnmount, onMounted, ref, useTemplateRef } from "vue";
 
 import DynamicContentRasterizer from "@/components/DynamicContentRasterizer.vue";
 
@@ -13,6 +13,7 @@ interface Item {
 }
 
 const items = defineModel<Item[]>("items", { required: true });
+const currentDropPosition = defineModel<number>("currentDropPosition");
 const props = defineProps<{
   autoScrollContainerSelector?: string;
 }>();
@@ -22,7 +23,7 @@ const movingItemAsPngData = ref("");
 const movingItemHeight = ref(0);
 const movingItemY = ref(0);
 const container = useTemplateRef("container");
-let interactable: Interactable;
+let draggable: Interactable;
 let direction: "up" | "down" | "none" = "none";
 let autoScrollContainer: HTMLElement = document.body;
 
@@ -64,21 +65,55 @@ function capturedStyles() {
   };
 }
 
-function makeModifier() {
-  const containerBounds = container.value!.getBoundingClientRect();
-
-  return interact.modifiers.restrict({
-    restriction: (x, y, { element }) => {
-      const content = element?.parentElement?.parentElement?.querySelector(".content");
-      const { height } = content?.getBoundingClientRect() ?? { height: 0 };
-      return {
-        top: containerBounds?.top - height,
-        right: containerBounds?.right,
-        bottom: containerBounds?.bottom + height,
-        left: containerBounds?.left,
-      };
-    },
+function setDropIndicatorPosition(y: number) {
+  const itemBounds = Array.from(container.value!.querySelectorAll(".item")).map((item, index) => {
+    const { top, height } = item.getBoundingClientRect();
+    const center = top + height / 2;
+    return {
+      index,
+      distance: Math.abs(y - center),
+      center,
+    };
   });
+  const closestItemBelow = itemBounds.reduce((closest, item) => {
+    if (item.distance < closest.distance) {
+      return item;
+    }
+    return closest;
+  }, itemBounds[0]);
+
+  if (y > closestItemBelow.center) {
+    dropIndicatorPosition.value = closestItemBelow.index;
+  } else {
+    dropIndicatorPosition.value = closestItemBelow.index - 1;
+  }
+}
+
+function onDragOver(event: DragEvent) {
+  // scroll the container if needed
+  const scrollBounds = autoScrollContainer.getBoundingClientRect();
+  const distanceToTop = Math.abs(event.pageY - scrollBounds.top);
+  const distanceToBottom = Math.abs(event.pageY - scrollBounds.bottom);
+  const threshold = 150;
+  const speed = 5;
+  if (distanceToTop < threshold) {
+    autoScrollContainer.scrollTop -= speed;
+  } else if (distanceToBottom < threshold) {
+    const maxScroll = autoScrollContainer.scrollHeight - scrollBounds.height;
+    autoScrollContainer.scrollTop = Math.min(maxScroll, autoScrollContainer.scrollTop + speed);
+  }
+
+  // show drop indicator to the closest item
+  setDropIndicatorPosition(event.pageY);
+
+  if (dropIndicatorPosition.value !== null) {
+    currentDropPosition.value = dropIndicatorPosition.value + 1;
+  }
+}
+
+function onDragLeave() {
+  currentDropPosition.value = -1;
+  dropIndicatorPosition.value = null;
 }
 
 onMounted(() => {
@@ -101,14 +136,14 @@ onMounted(() => {
     autoScrollContainer = container.value!.parentElement ?? document.body;
   }
 
-  interactable = interact(".handle").draggable({
+  draggable = interact(".handle").draggable({
     autoScroll: {
       enabled: true,
       container: autoScrollContainer,
+      speed: 900,
     },
     startAxis: "y",
     lockAxis: "y",
-    modifiers: [makeModifier()],
     listeners: {
       async start(event) {
         // make a rasterized copy of the moving element
@@ -134,40 +169,13 @@ onMounted(() => {
           event.clientY + autoScrollContainer!.scrollTop - paddingTop - containerY;
 
         // set the drop indicator item index
-        const itemBounds = Array.from(container.value!.querySelectorAll(".item")).map(
-          (item, index) => {
-            const { top, height } = item.getBoundingClientRect();
-            const center = top + height / 2;
-            return {
-              index,
-              distance: Math.abs(event.pageY - center),
-            };
-          }
-        );
-        const closestItemBelow = itemBounds.reduce((closest, item) => {
-          if (item.distance < closest.distance) {
-            return item;
-          }
-          return closest;
-        }, itemBounds[0]);
-        // if the first item is the closest we may need to move the drop indicator up
-        if (closestItemBelow.index === 0) {
-          // does the user want to move the item to the top?
-          const bounds = container.value!.getBoundingClientRect();
-          if (event.pageY < bounds.top) {
-            dropIndicatorPosition.value = -1;
-          } else {
-            dropIndicatorPosition.value = 0;
-          }
-        } else {
-          dropIndicatorPosition.value = closestItemBelow.index;
-        }
+        setDropIndicatorPosition(event.pageY);
       },
       end() {
         // change the model order
         if (items.value && movingItemIndex.value !== null && dropIndicatorPosition.value !== null) {
           // did user dropped the item in its previous position ?
-          if (Math.abs(dropIndicatorPosition.value - movingItemIndex.value) > 1) {
+          if (Math.abs(dropIndicatorPosition.value - movingItemIndex.value) >= 1) {
             // move the item to its new position
             const destinationIndex =
               dropIndicatorPosition.value > movingItemIndex.value
@@ -186,10 +194,17 @@ onMounted(() => {
       },
     },
   });
+
+  container.value!.addEventListener("dragover", onDragOver);
+  container.value!.addEventListener("dragleave", onDragLeave);
+  window.addEventListener("dragend", onDragLeave);
 });
 
-onUnmounted(() => {
-  interactable.unset();
+onBeforeUnmount(() => {
+  container.value!.removeEventListener("dragover", onDragOver);
+  container.value!.removeEventListener("dragleave", onDragLeave);
+  window.removeEventListener("dragend", onDragLeave);
+  draggable.unset();
 });
 </script>
 
@@ -236,7 +251,7 @@ onUnmounted(() => {
 }
 
 .draggable {
-  --content-left-margin: 15px;
+  --content-left-margin: 18px;
 
   position: relative;
   display: flex;
@@ -249,18 +264,23 @@ onUnmounted(() => {
 
     & .handle {
       position: absolute;
-      top: 0;
+      top: -4px;
       left: 0;
+      display: flex;
+      color: hsl(from var(--color-primary) h s calc(l * 1.5));
       cursor: move;
+      font-size: calc(var(--text-size-normal) * 1.7);
       opacity: 0;
       transition: opacity var(--transition-duration) var(--transition-easing);
     }
 
     & .content-wrapper {
+      width: calc(100% - var(--content-left-margin));
       margin-left: var(--content-left-margin);
     }
 
     & .content {
+      width: 100%;
       transition: opacity var(--transition-duration) var(--transition-easing);
 
       &.moving {
diff --git a/skore-ui/src/components/DynamicContentRasterizer.vue b/skore-ui/src/components/DynamicContentRasterizer.vue
index ae7f2af6..d3b4669c 100644
--- a/skore-ui/src/components/DynamicContentRasterizer.vue
+++ b/skore-ui/src/components/DynamicContentRasterizer.vue
@@ -12,7 +12,7 @@ const realContent = useTemplateRef("realContent");
 const contentHeight = ref(0);
 
 const styles = computed(() => {
-  const h = contentHeight.value !== 0 ? `${contentHeight.value}px` : "auto";
+  const h = contentHeight.value !== 0 && props.isRasterized ? `${contentHeight.value}px` : "auto";
   return {
     height: h,
   };
@@ -64,6 +64,7 @@ onBeforeUnmount(() => {
 <style scoped>
 .dynamic-content-rasterizer {
   position: relative;
+  overflow: hidden;
   padding: 0;
   margin: 0;
 
diff --git a/skore-ui/src/components/ProjectViewCanvas.vue b/skore-ui/src/components/ProjectViewCanvas.vue
deleted file mode 100644
index 2073bf16..00000000
--- a/skore-ui/src/components/ProjectViewCanvas.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<script setup lang="ts">
-import { formatDistance } from "date-fns";
-import { computed } from "vue";
-
-import DataFrameWidget from "@/components/DataFrameWidget.vue";
-import HtmlSnippetWidget from "@/components/HtmlSnippetWidget.vue";
-import ImageWidget from "@/components/ImageWidget.vue";
-import MarkdownWidget from "@/components/MarkdownWidget.vue";
-import PlotlyWidget from "@/components/PlotlyWidget.vue";
-import ProjectViewCard from "@/components/ProjectViewCard.vue";
-import VegaWidget from "@/components/VegaWidget.vue";
-import { useProjectStore } from "@/stores/project";
-
-const props = defineProps({
-  showCardActions: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const projectStore = useProjectStore();
-
-const visibleItems = computed(() => {
-  const items = [];
-  let index = 0;
-  if (projectStore.items !== null && projectStore.currentView !== null) {
-    const v = projectStore.views[projectStore.currentView];
-    for (const key of v) {
-      const item = projectStore.items[key];
-      if (item) {
-        const mediaType = item.media_type || "";
-        let data;
-        if (
-          [
-            "text/markdown",
-            "application/vnd.dataframe+json",
-            "application/vnd.sklearn.estimator+html",
-            "image/png",
-            "image/jpeg",
-            "image/webp",
-            "image/svg+xml",
-          ].includes(mediaType)
-        ) {
-          data = item.value;
-        } else {
-          data = atob(item.value);
-          if (mediaType.includes("json")) {
-            data = JSON.parse(data);
-          }
-        }
-        const createdAt = new Date(item.created_at);
-        const updatedAt = new Date(item.updated_at);
-        items.push({
-          key,
-          mediaType,
-          data,
-          createdAt,
-          updatedAt,
-          index,
-        });
-        index++;
-      }
-    }
-  }
-  return items;
-});
-
-function onCardRemoved(key: string) {
-  if (projectStore.currentView) {
-    projectStore.hideKey(projectStore.currentView, key);
-  }
-}
-
-function getItemSubtitle(created_at: Date, updated_at: Date) {
-  const now = new Date();
-  return `Created ${formatDistance(created_at, now)} ago, updated ${formatDistance(updated_at, now)} ago`;
-}
-</script>
-
-<template>
-  <div class="canvas">
-    <ProjectViewCard
-      v-for="{ key, mediaType, data, createdAt, updatedAt } in visibleItems"
-      :key="key"
-      :title="key.toString()"
-      :subtitle="getItemSubtitle(createdAt, updatedAt)"
-      :showActions="props.showCardActions"
-      class="canvas-element"
-      @card-removed="onCardRemoved(key)"
-    >
-      <DataFrameWidget
-        v-if="mediaType === 'application/vnd.dataframe+json'"
-        :index="data.index"
-        :columns="data.columns"
-        :data="data.data"
-      />
-      <ImageWidget
-        v-if="['image/svg+xml', 'image/png', 'image/jpeg', 'image/webp'].includes(mediaType)"
-        :mediaType="mediaType"
-        :base64-src="data"
-        :alt="key.toString()"
-      />
-      <MarkdownWidget v-if="mediaType === 'text/markdown'" :source="data" />
-      <VegaWidget v-if="mediaType === 'application/vnd.vega.v5+json'" :spec="data" />
-      <PlotlyWidget v-if="mediaType === 'application/vnd.plotly.v1+json'" :spec="data" />
-      <HtmlSnippetWidget
-        v-if="mediaType === 'application/vnd.sklearn.estimator+html'"
-        :src="data"
-      />
-      <HtmlSnippetWidget v-if="mediaType === 'text/html'" :src="data" />
-    </ProjectViewCard>
-  </div>
-</template>
-
-<style scoped>
-.canvas {
-  display: flex;
-  flex-direction: column;
-  padding: var(--spacing-gap-normal);
-  background-color: var(--background-color-normal);
-  gap: var(--spacing-gap-normal);
-  transition: grid-column var(--transition-duration) var(--transition-easing);
-
-  & .canvas-element {
-    max-width: 100%;
-  }
-}
-</style>
diff --git a/skore-ui/src/components/ProjectViewCard.vue b/skore-ui/src/components/ProjectViewCard.vue
index 0aec3051..c92e63d7 100644
--- a/skore-ui/src/components/ProjectViewCard.vue
+++ b/skore-ui/src/components/ProjectViewCard.vue
@@ -44,13 +44,7 @@ const emit = defineEmits<{
   position: relative;
   overflow: auto;
   max-width: 100%;
-  padding: var(--spacing-padding-large);
-  border: solid 1px var(--background-color-normal);
-  border-radius: var(--border-radius);
   background-color: var(--background-color-normal);
-  transition:
-    background-color var(--transition-duration) var(--transition-easing),
-    border var(--transition-duration) var(--transition-easing);
 
   & .header {
     display: flex;
diff --git a/skore-ui/src/components/TreeAccordionItem.vue b/skore-ui/src/components/TreeAccordionItem.vue
index 881b0dd3..84db2fe4 100644
--- a/skore-ui/src/components/TreeAccordionItem.vue
+++ b/skore-ui/src/components/TreeAccordionItem.vue
@@ -36,7 +36,7 @@ const totalChildrenCount = computed(() => {
 
 function onDragStart(event: DragEvent) {
   if (event.dataTransfer) {
-    event.dataTransfer.setData("key", props.name);
+    event.dataTransfer.setData("application/x-skore-item-name", props.name);
   }
 }
 </script>
diff --git a/skore-ui/src/router.ts b/skore-ui/src/router.ts
index c74fb668..82d5f2e3 100644
--- a/skore-ui/src/router.ts
+++ b/skore-ui/src/router.ts
@@ -1,6 +1,6 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 
-import ProjectView from "./views/ProjectView.vue";
+import ProjectView from "./views/project/ProjectView.vue";
 
 export enum ROUTE_NAMES {
   VIEW_BUILDER = "view-builder",
diff --git a/skore-ui/src/share.ts b/skore-ui/src/share.ts
index abea6e2e..05d4a89e 100644
--- a/skore-ui/src/share.ts
+++ b/skore-ui/src/share.ts
@@ -15,5 +15,5 @@ export default async function share(selectedView: string) {
   const m = JSON.parse(document.getElementById("project-data")?.innerText || "{}");
   const projectStore = useProjectStore();
   await projectStore.setProject(m);
-  projectStore.currentView = selectedView;
+  projectStore.setCurrentView(selectedView);
 }
diff --git a/skore-ui/src/stores/project.ts b/skore-ui/src/stores/project.ts
index ec30a905..3aa15923 100644
--- a/skore-ui/src/stores/project.ts
+++ b/skore-ui/src/stores/project.ts
@@ -3,16 +3,25 @@ import { ref, shallowRef } from "vue";
 
 import { type Layout, type Project, type ProjectItem } from "@/models";
 import { deleteView as deleteViewApi, fetchProject, putView } from "@/services/api";
-import { poll } from "@/services/utils";
 
 export interface TreeNode {
   name: string;
   children: TreeNode[];
 }
 
+export interface PresentableItem {
+  id: string;
+  key: string;
+  mediaType: string;
+  data: any;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
 export const useProjectStore = defineStore("project", () => {
-  // this object is not deeply reactive as it may be very large
+  // this objects is not deeply reactive as it may be very large
   const items = shallowRef<{ [key: string]: ProjectItem } | null>(null);
+  const currentViewItems = shallowRef<PresentableItem[]>([]);
   const views = ref<{ [key: string]: Layout }>({});
   const currentView = ref<string | null>(null);
 
@@ -31,12 +40,22 @@ export const useProjectStore = defineStore("project", () => {
    * Add the value of a key to the view.
    * @param view the view to add the key to
    * @param key the key to add to the view
+   * @param position the position to add the key at, default to the end of the list
    */
-  async function displayKey(view: string, key: string) {
+  async function displayKey(view: string, key: string, position: number = -1) {
     stopBackendPolling();
     const realKey = key.replace(" (self)", "");
     if (!isKeyDisplayed(view, realKey)) {
-      views.value[view] = [...views.value[view], realKey];
+      if (position === -1) {
+        views.value[view] = [...views.value[view], realKey];
+      } else {
+        views.value[view] = [
+          ...views.value[view].slice(0, position),
+          realKey,
+          ...views.value[view].slice(position),
+        ];
+      }
+      _updatePresentableItemsInView();
       await persistView(view, views.value[view]);
     }
     await startBackendPolling();
@@ -52,6 +71,7 @@ export const useProjectStore = defineStore("project", () => {
     if (isKeyDisplayed(view, key)) {
       const v = views.value[view];
       views.value[view] = v.filter((k) => k !== key);
+      _updatePresentableItemsInView();
       await persistView(view, views.value[view]);
     }
     await startBackendPolling();
@@ -76,7 +96,7 @@ export const useProjectStore = defineStore("project", () => {
   async function startBackendPolling() {
     _isCanceledCall = false;
     await fetch();
-    _stopBackendPolling = await poll(fetch, 1500);
+    _stopBackendPolling = () => {}; // await poll(fetch, 1500);
   }
 
   /**
@@ -108,6 +128,7 @@ export const useProjectStore = defineStore("project", () => {
   async function setProject(r: Project) {
     items.value = r.items;
     views.value = r.views;
+    _updatePresentableItemsInView();
   }
 
   /**
@@ -228,19 +249,78 @@ export const useProjectStore = defineStore("project", () => {
     await persistView(newName, views.value[newName]);
   }
 
+  /**
+   * Set the current view
+   */
+  function setCurrentView(view: string) {
+    currentView.value = view;
+    _updatePresentableItemsInView();
+  }
+
+  /**
+   * Get the items in the current view as a presentable list.
+   * @returns a list of items with their metadata
+   */
+  function _updatePresentableItemsInView() {
+    const r: PresentableItem[] = [];
+    if (items.value !== null && currentView.value !== null) {
+      const v = views.value[currentView.value];
+      for (const key of v) {
+        const item = items.value[key];
+        if (item) {
+          const mediaType = item.media_type || "";
+          let data;
+          if (
+            [
+              "text/markdown",
+              "application/vnd.dataframe+json",
+              "application/vnd.sklearn.estimator+html",
+              "image/png",
+              "image/jpeg",
+              "image/webp",
+              "image/svg+xml",
+            ].includes(mediaType)
+          ) {
+            data = item.value;
+          } else {
+            data = atob(item.value);
+            if (mediaType.includes("json")) {
+              data = JSON.parse(data);
+            }
+          }
+          const createdAt = new Date(item.created_at);
+          const updatedAt = new Date(item.updated_at);
+          r.push({
+            id: key,
+            key,
+            mediaType,
+            data,
+            createdAt,
+            updatedAt,
+          });
+        }
+      }
+    }
+    currentViewItems.value = r;
+  }
+
   return {
+    // refs
+    currentView,
+    currentViewItems,
     items,
     views,
-    currentView,
+    // actions
+    createView,
+    deleteView,
     displayKey,
+    duplicateView,
     hideKey,
-    startBackendPolling,
-    stopBackendPolling,
-    setProject,
     keysAsTree,
-    createView,
-    duplicateView,
-    deleteView,
+    setCurrentView,
+    setProject,
     renameView,
+    startBackendPolling,
+    stopBackendPolling,
   };
 });
diff --git a/skore-ui/src/views/ComponentsView.vue b/skore-ui/src/views/ComponentsView.vue
index ebad0339..81c00f00 100644
--- a/skore-ui/src/views/ComponentsView.vue
+++ b/skore-ui/src/views/ComponentsView.vue
@@ -146,6 +146,17 @@ function onEditableListAction(action: string, item: EditableListItemModel) {
 
 const lastSelectedItem = ref<string | null>(null);
 
+function addItemToDraggableList(i: number) {
+  draggableListData.value.splice(i, 0, {
+    id: `${i}`,
+    color: `hsl(${(360 / 25) * i}deg, 90%, 50%)`,
+    content: Array.from(
+      { length: Math.floor(Math.random() * 10) + 1 }, // Random number of items between 1 and 10
+      () => String.fromCharCode(97 + Math.floor(Math.random() * 26)) // Random lowercase letter
+    ),
+  });
+}
+
 const draggableListData = ref(
   Array.from({ length: 25 }, (v, i) => ({
     id: `${i}`,
@@ -157,6 +168,22 @@ const draggableListData = ref(
   }))
 );
 
+function onDragStart(event: DragEvent) {
+  if (event.dataTransfer) {
+    event.dataTransfer.setData("application/x-skore-item-name", "drag-me");
+  }
+}
+
+const currentDropPosition = ref<number>();
+
+function onItemDrop(event: DragEvent) {
+  if (event.dataTransfer) {
+    if (currentDropPosition.value !== undefined) {
+      addItemToDraggableList(currentDropPosition.value);
+    }
+  }
+}
+
 const isCached = ref(false);
 </script>
 
@@ -434,10 +461,25 @@ const isCached = ref(false);
         </div>
       </TabsItem>
       <TabsItem :value="12">
+        <div>Item order: {{ draggableListData.map((item) => item.id).join(", ") }}</div>
+        <div>Drop position: {{ currentDropPosition }}</div>
+        <div>
+          <SimpleButton
+            label="add item"
+            :is-primary="true"
+            @click="addItemToDraggableList(draggableListData.length + 1)"
+          />
+          <div class="drag-me" draggable="true" @dragstart="onDragStart($event)">
+            drag me to the list
+          </div>
+        </div>
         <Simplebar class="draggable-list-container">
           <DraggableList
             v-model:items="draggableListData"
             auto-scroll-container-selector=".draggable-list-container"
+            v-model:current-drop-position="currentDropPosition"
+            @drop="onItemDrop($event)"
+            @dragover.prevent
           >
             <template #item="{ id, color, content }">
               <div :style="{ backgroundColor: color, color: 'white' }">
@@ -562,6 +604,15 @@ main {
   margin-top: 10px;
 }
 
+.drag-me {
+  width: 200px;
+  padding: 10px;
+  margin-top: 10px;
+  background-color: var(--background-color-elevated-high);
+  cursor: move;
+  user-select: none;
+}
+
 .floating-tooltip-tab {
   display: grid;
   padding: 40px;
diff --git a/skore-ui/src/views/ProjectView.vue b/skore-ui/src/views/ProjectView.vue
deleted file mode 100644
index f14eea9c..00000000
--- a/skore-ui/src/views/ProjectView.vue
+++ /dev/null
@@ -1,370 +0,0 @@
-<script setup lang="ts">
-import { format } from "date-fns";
-import Simplebar from "simplebar-vue";
-import { onBeforeUnmount, onMounted, ref } from "vue";
-
-import EditableList, { type EditableListItemModel } from "@/components/EditableList.vue";
-import ProjectViewCanvas from "@/components/ProjectViewCanvas.vue";
-import SectionHeader from "@/components/SectionHeader.vue";
-import SimpleButton from "@/components/SimpleButton.vue";
-import TreeAccordion from "@/components/TreeAccordion.vue";
-import { fetchShareableBlob } from "@/services/api";
-import { generateRandomId, saveBlob } from "@/services/utils";
-import { useProjectStore } from "@/stores/project";
-import { useToastsStore } from "@/stores/toasts";
-
-const projectStore = useProjectStore();
-const toastsStore = useToastsStore();
-const isDropIndicatorVisible = ref(false);
-const editor = ref<HTMLDivElement>();
-const isInFocusMode = ref(false);
-const views = ref<EditableListItemModel[]>([]);
-let unsavedViewsId: string = "";
-
-async function onShareView() {
-  const currentView = projectStore.currentView;
-  if (currentView) {
-    const shareable = await fetchShareableBlob(currentView);
-    if (shareable) {
-      const formattedDate = format(new Date(), "yyyy-MM-dd-HH-mm");
-      saveBlob(shareable, `${formattedDate}-${currentView}.html`);
-    }
-  }
-}
-
-function onFocusMode() {
-  isInFocusMode.value = !isInFocusMode.value;
-}
-
-function displayItem(key: string) {
-  if (projectStore.currentView) {
-    projectStore.displayKey(projectStore.currentView, key);
-  } else {
-    toastsStore.addToast("No view selected", "error");
-  }
-}
-
-function onItemDrop(event: DragEvent) {
-  isDropIndicatorVisible.value = false;
-  if (event.dataTransfer) {
-    const key = event.dataTransfer.getData("key");
-    displayItem(key);
-  }
-}
-
-function onDragEnter() {
-  if (projectStore.currentView) {
-    isDropIndicatorVisible.value = true;
-  }
-}
-
-function onDragLeave(event: DragEvent) {
-  if (event.target == editor.value) {
-    isDropIndicatorVisible.value = false;
-  }
-}
-
-function onItemSelected(key: string) {
-  displayItem(key);
-}
-
-function onViewSelected(view: string) {
-  projectStore.currentView = view;
-}
-
-async function onViewRenamed(oldName: string, newName: string, item: EditableListItemModel) {
-  const viewAlreadyExists = views.value.filter((view) => view.name === newName).length > 1;
-  if (viewAlreadyExists) {
-    toastsStore.addToast(`A view named "${newName}" already exists`, "error");
-    item.isNamed = false;
-    return;
-  }
-  // user can rename an existing view
-  // and rename a new view that is not known by the backend
-  if (unsavedViewsId == item.id) {
-    await projectStore.createView(newName);
-    unsavedViewsId = "";
-    toastsStore.addToast("View added successfully", "success");
-  } else {
-    await projectStore.renameView(oldName, newName);
-  }
-  // auto switch the view to the renamed one
-  onViewSelected(newName);
-}
-
-async function onViewsListAction(action: string, item: EditableListItemModel) {
-  switch (action) {
-    case "rename": {
-      item.isNamed = false;
-      break;
-    }
-    case "duplicate": {
-      const index = views.value.indexOf(item) ?? 0;
-      const newName = `${item.name} - copy`;
-      views.value.splice(index + 1, 0, {
-        name: newName,
-        icon: "icon-new-document",
-        isNamed: false,
-        id: generateRandomId(),
-      });
-      unsavedViewsId = newName;
-      await projectStore.duplicateView(item.name, newName);
-      break;
-    }
-    case "delete": {
-      views.value.splice(views.value.indexOf(item), 1);
-      await projectStore.deleteView(item.name);
-      toastsStore.addToast("View deleted successfully", "success");
-      break;
-    }
-  }
-}
-
-function onAddView() {
-  const hasUnsavedViews = views.value.some((view) => !view.isNamed);
-  if (!hasUnsavedViews) {
-    const id = generateRandomId();
-    views.value.push({ name: "New view", icon: "icon-new-document", isNamed: false, id });
-    unsavedViewsId = id;
-  }
-}
-
-onMounted(async () => {
-  await projectStore.startBackendPolling();
-  views.value = Object.keys(projectStore.views).map((key) => ({
-    name: key,
-    icon: "icon-new-document",
-    isNamed: true,
-    id: generateRandomId(),
-  }));
-});
-onBeforeUnmount(() => {
-  projectStore.stopBackendPolling();
-});
-</script>
-
-<template>
-  <main>
-    <article v-if="projectStore.items !== null">
-      <div class="items" v-if="projectStore.items && !isInFocusMode">
-        <SectionHeader
-          title="Views"
-          icon="icon-recent-document"
-          action-icon="icon-plus-circle"
-          @action="onAddView"
-        />
-        <Simplebar class="views-list">
-          <EditableList
-            v-model:items="views"
-            :actions="[
-              { label: 'rename', emitPayload: 'rename', icon: 'icon-edit' },
-              { label: 'duplicate', emitPayload: 'duplicate', icon: 'icon-copy' },
-              { label: 'delete', emitPayload: 'delete', icon: 'icon-trash' },
-            ]"
-            @action="onViewsListAction"
-            @select="onViewSelected"
-            @rename="onViewRenamed"
-          />
-        </Simplebar>
-        <SectionHeader title="Elements" icon="icon-pie-chart" />
-        <Simplebar class="key-list">
-          <TreeAccordion :nodes="projectStore.keysAsTree()" @item-selected="onItemSelected" />
-        </Simplebar>
-      </div>
-
-      <div
-        ref="editor"
-        class="editor"
-        @drop="onItemDrop"
-        @dragover.prevent
-        @dragenter="onDragEnter"
-        @dragleave="onDragLeave"
-      >
-        <div class="editor-header">
-          <SimpleButton icon="icon-maximize" @click="onFocusMode" />
-          <h1>{{ projectStore.currentView }}</h1>
-          <SimpleButton label="Share view" @click="onShareView" :is-primary="true" />
-        </div>
-        <div class="drop-indicator" :class="{ visible: isDropIndicatorVisible }"></div>
-        <Transition name="fade">
-          <div
-            v-if="
-              projectStore.currentView === null ||
-              projectStore.views[projectStore.currentView] === undefined ||
-              projectStore.views[projectStore.currentView]?.length === 0
-            "
-            class="placeholder"
-          >
-            <div class="wrapper" v-if="projectStore.currentView === null">No view selected.</div>
-            <div class="wrapper" v-else>
-              No elements in this view, start by dragging or double clicking an element from the
-              tree on the left.
-            </div>
-          </div>
-          <Simplebar class="canvas-wrapper" v-else>
-            <ProjectViewCanvas />
-          </Simplebar>
-        </Transition>
-      </div>
-    </article>
-    <div class="not-found" v-else>
-      <div class="not-found-header">Empty workspace.</div>
-      <p>No Skore has been created, this worskpace is empty.</p>
-    </div>
-  </main>
-</template>
-
-<style scoped>
-@media (prefers-color-scheme: dark) {
-  main {
-    --sad-face-image: url("../assets/images/sad-face-dark.svg");
-    --not-found-image: url("../assets/images/not-found-dark.png");
-    --editor-placeholder-image: url("../assets/images/editor-placeholder-dark.svg");
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  main {
-    --sad-face-image: url("../assets/images/sad-face-light.svg");
-    --not-found-image: url("../assets/images/not-found-light.png");
-    --editor-placeholder-image: url("../assets/images/editor-placeholder-light.svg");
-  }
-}
-
-main {
-  display: flex;
-  flex-direction: row;
-
-  article,
-  .not-found {
-    display: flex;
-    overflow: hidden;
-    min-width: 0;
-    flex-grow: 1;
-  }
-
-  article {
-    height: 100dvh;
-    flex-direction: row;
-
-    & .items {
-      display: flex;
-      width: 292px;
-      flex-direction: column;
-      flex-shrink: 0;
-      border-right: solid 1px var(--border-color-normal);
-
-      & .views-list {
-        z-index: 2;
-        max-height: 20vh;
-        background-color: var(--background-color-elevated-high);
-      }
-
-      & .key-list {
-        z-index: 1;
-        height: 0;
-        flex-grow: 1;
-        padding: var(--spacing-padding-large);
-        background-color: var(--background-color-elevated-high);
-      }
-    }
-
-    & .editor {
-      display: flex;
-      overflow: hidden;
-      min-width: 0;
-      max-height: 100vh;
-      flex: auto;
-      flex-direction: column;
-
-      & .editor-header {
-        display: flex;
-        height: 44px;
-        align-items: center;
-        padding: var(--spacing-padding-large);
-        border-right: solid var(--border-width-normal) var(--border-color-normal);
-        border-bottom: solid var(--border-width-normal) var(--border-color-normal);
-        background-color: var(--background-color-elevated);
-
-        & h1 {
-          flex-grow: 1;
-          color: var(--text-color-normal);
-          font-size: var(--text-size-title);
-          font-weight: var(--text-weight-title);
-          text-align: center;
-        }
-      }
-
-      & .drop-indicator {
-        height: 0;
-        border-radius: 8px;
-        margin: 0 10%;
-        background-color: var(--text-color-title);
-        opacity: 0;
-        transition: opacity var(--transition-duration) var(--transition-easing);
-
-        &.visible {
-          height: 3px;
-          opacity: 1;
-        }
-      }
-
-      & .placeholder {
-        display: flex;
-        height: 100%;
-        flex-direction: column;
-        justify-content: center;
-        background-color: var(--background-color-normal);
-        background-image: radial-gradient(
-            circle at center,
-            transparent 0,
-            transparent 60%,
-            var(--background-color-normal) 100%
-          ),
-          linear-gradient(to right, var(--border-color-lower) 1px, transparent 1px),
-          linear-gradient(to bottom, var(--border-color-lower) 1px, transparent 1px);
-        background-size:
-          auto,
-          76px 76px,
-          76px 76px;
-
-        & .wrapper {
-          padding-top: 192px;
-          background-image: var(--editor-placeholder-image);
-          background-position: 50% 0;
-          background-repeat: no-repeat;
-          background-size: 265px 192px;
-          color: var(--text-color-normal);
-          font-size: var(--text-size-normal);
-          text-align: center;
-        }
-      }
-
-      & .canvas-wrapper {
-        height: 0;
-        flex-grow: 1;
-        padding: var(--spacing-padding-large);
-      }
-    }
-  }
-
-  .not-found {
-    height: 100vh;
-    flex-direction: column;
-    justify-content: center;
-    background-image: var(--not-found-image);
-    background-position: 50% calc(50% - 62px);
-    background-repeat: no-repeat;
-    background-size: 109px 82px;
-    color: var(--text-color-normal);
-    font-size: var(--text-size-small);
-    text-align: center;
-
-    & .not-found-header {
-      margin-bottom: var(--spacing-padding-small);
-      color: var(--text-color-highlight);
-      font-size: var(--text-size-large);
-    }
-  }
-}
-</style>
diff --git a/skore-ui/src/views/project/ProjectElementList.vue b/skore-ui/src/views/project/ProjectElementList.vue
new file mode 100644
index 00000000..b2491ab5
--- /dev/null
+++ b/skore-ui/src/views/project/ProjectElementList.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import Simplebar from "simplebar-vue";
+
+import SectionHeader from "@/components/SectionHeader.vue";
+import TreeAccordion from "@/components/TreeAccordion.vue";
+import { useProjectStore } from "@/stores/project";
+import { useToastsStore } from "@/stores/toasts";
+
+const projectStore = useProjectStore();
+const toastsStore = useToastsStore();
+
+function onItemSelected(key: string) {
+  if (projectStore.currentView) {
+    projectStore.displayKey(projectStore.currentView, key);
+  } else {
+    toastsStore.addToast("No view selected", "error");
+  }
+}
+</script>
+
+<template>
+  <div class="keys-list">
+    <SectionHeader title="Elements" icon="icon-pie-chart" />
+    <Simplebar class="scrollable">
+      <TreeAccordion :nodes="projectStore.keysAsTree()" @item-selected="onItemSelected" />
+    </Simplebar>
+  </div>
+</template>
+
+<style scoped>
+.keys-list {
+  display: flex;
+  max-height: 100%;
+  flex-direction: column;
+
+  & .scrollable {
+    height: 0;
+    flex: 1;
+    padding: var(--spacing-padding-large);
+    background-color: var(--background-color-elevated-high);
+  }
+}
+</style>
diff --git a/skore-ui/src/views/project/ProjectView.vue b/skore-ui/src/views/project/ProjectView.vue
new file mode 100644
index 00000000..6a07077c
--- /dev/null
+++ b/skore-ui/src/views/project/ProjectView.vue
@@ -0,0 +1,297 @@
+<script setup lang="ts">
+import { format, formatDistance } from "date-fns";
+import Simplebar from "simplebar-vue";
+import { onBeforeUnmount, onMounted, ref } from "vue";
+
+import DataFrameWidget from "@/components/DataFrameWidget.vue";
+import DraggableList from "@/components/DraggableList.vue";
+import HtmlSnippetWidget from "@/components/HtmlSnippetWidget.vue";
+import ImageWidget from "@/components/ImageWidget.vue";
+import MarkdownWidget from "@/components/MarkdownWidget.vue";
+import PlotlyWidget from "@/components/PlotlyWidget.vue";
+import ProjectViewCard from "@/components/ProjectViewCard.vue";
+import SimpleButton from "@/components/SimpleButton.vue";
+import VegaWidget from "@/components/VegaWidget.vue";
+import { fetchShareableBlob } from "@/services/api";
+import { saveBlob } from "@/services/utils";
+import { useProjectStore } from "@/stores/project";
+import { useToastsStore } from "@/stores/toasts";
+import ProjectElementList from "@/views/project/ProjectElementList.vue";
+import ProjectViewList from "@/views/project/ProjectViewList.vue";
+
+const props = defineProps({
+  showCardActions: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const projectStore = useProjectStore();
+const isInFocusMode = ref(false);
+const currentDropPosition = ref<number>();
+const toastsStore = useToastsStore();
+
+async function onShareView() {
+  const currentView = projectStore.currentView;
+  if (currentView) {
+    const shareable = await fetchShareableBlob(currentView);
+    if (shareable) {
+      const formattedDate = format(new Date(), "yyyy-MM-dd-HH-mm");
+      saveBlob(shareable, `${formattedDate}-${currentView}.html`);
+    }
+  }
+}
+
+function onFocusMode() {
+  isInFocusMode.value = !isInFocusMode.value;
+}
+
+function onCardRemoved(key: string) {
+  if (projectStore.currentView) {
+    projectStore.hideKey(projectStore.currentView, key);
+  }
+}
+
+function onItemDrop(event: DragEvent) {
+  if (projectStore.currentView) {
+    if (event.dataTransfer) {
+      const itemName = event.dataTransfer.getData("application/x-skore-item-name");
+      projectStore.displayKey(projectStore.currentView, itemName, currentDropPosition.value ?? 0);
+    }
+  } else {
+    toastsStore.addToast("No view selected", "error");
+  }
+}
+
+function getItemSubtitle(created_at: Date, updated_at: Date) {
+  const now = new Date();
+  return `Created ${formatDistance(created_at, now)} ago, updated ${formatDistance(updated_at, now)} ago`;
+}
+
+onMounted(async () => {
+  await projectStore.startBackendPolling();
+});
+
+onBeforeUnmount(() => {
+  projectStore.stopBackendPolling();
+});
+</script>
+
+<template>
+  <main class="project-view" v-if="projectStore.items !== null">
+    <div class="left-panel" v-if="projectStore.items && !isInFocusMode">
+      <ProjectViewList />
+      <ProjectElementList />
+    </div>
+    <div ref="editor" class="editor">
+      <div class="editor-header">
+        <SimpleButton icon="icon-maximize" @click="onFocusMode" />
+        <h1>{{ projectStore.currentView }}</h1>
+        <SimpleButton label="Share view" @click="onShareView" :is-primary="true" />
+      </div>
+      <Transition name="fade">
+        <div
+          v-if="
+            projectStore.currentView === null ||
+            projectStore.views[projectStore.currentView] === undefined ||
+            projectStore.views[projectStore.currentView]?.length === 0
+          "
+          class="placeholder"
+          @drop="onItemDrop($event)"
+          @dragover.prevent
+        >
+          <div class="wrapper" v-if="projectStore.currentView === null">No view selected.</div>
+          <div class="wrapper" v-else>
+            No elements in this view, start by dragging or double clicking an element from the tree
+            on the left.
+          </div>
+        </div>
+        <Simplebar class="editor-container" v-else>
+          <DraggableList
+            v-model:items="projectStore.currentViewItems"
+            auto-scroll-container-selector=".editor-container"
+            v-model:current-drop-position="currentDropPosition"
+            @drop="onItemDrop($event)"
+            @dragover.prevent
+          >
+            <template #item="{ key, mediaType, data, createdAt, updatedAt }">
+              <ProjectViewCard
+                :key="key"
+                :title="key.toString()"
+                :subtitle="getItemSubtitle(createdAt, updatedAt)"
+                :showActions="props.showCardActions"
+                @card-removed="onCardRemoved(key)"
+              >
+                <DataFrameWidget
+                  v-if="mediaType === 'application/vnd.dataframe+json'"
+                  :columns="data.columns"
+                  :data="data.data"
+                  :index="data.index"
+                />
+                <ImageWidget
+                  v-if="
+                    ['image/svg+xml', 'image/png', 'image/jpeg', 'image/webp'].includes(mediaType)
+                  "
+                  :mediaType="mediaType"
+                  :base64-src="data"
+                  :alt="key.toString()"
+                />
+                <MarkdownWidget v-if="mediaType === 'text/markdown'" :source="data" />
+                <VegaWidget v-if="mediaType === 'application/vnd.vega.v5+json'" :spec="data" />
+                <PlotlyWidget v-if="mediaType === 'application/vnd.plotly.v1+json'" :spec="data" />
+                <HtmlSnippetWidget
+                  v-if="mediaType === 'application/vnd.sklearn.estimator+html'"
+                  :src="data"
+                />
+                <HtmlSnippetWidget v-if="mediaType === 'text/html'" :src="data" />
+              </ProjectViewCard>
+            </template>
+          </DraggableList>
+        </Simplebar>
+      </Transition>
+    </div>
+  </main>
+  <main class="not-found" v-else>
+    <div class="not-found-header">Empty workspace.</div>
+    <p>No Skore has been created, this worskpace is empty.</p>
+  </main>
+</template>
+
+<style scoped>
+@media (prefers-color-scheme: dark) {
+  main {
+    --sad-face-image: url("../../assets/images/sad-face-dark.svg");
+    --not-found-image: url("../../assets/images/not-found-dark.png");
+    --editor-placeholder-image: url("../../assets/images/editor-placeholder-dark.svg");
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  main {
+    --sad-face-image: url("../../assets/images/sad-face-light.svg");
+    --not-found-image: url("../../assets/images/not-found-light.png");
+    --editor-placeholder-image: url("../../assets/images/editor-placeholder-light.svg");
+  }
+}
+
+main {
+  display: flex;
+  overflow: hidden;
+  width: 100vw;
+  min-width: 0;
+  height: 100vh;
+  flex-direction: row;
+
+  &.project-view {
+    height: 100dvh;
+    flex-direction: row;
+
+    & .left-panel {
+      display: flex;
+      width: 292px;
+      flex-direction: column;
+      flex-shrink: 0;
+      border-right: solid 1px var(--border-color-normal);
+
+      & .views-list {
+        z-index: 2;
+      }
+
+      & .keys-list {
+        z-index: 1;
+        height: 0;
+        flex: 1;
+      }
+    }
+
+    & .editor {
+      --editor-height: 44px;
+
+      display: flex;
+      min-width: 0;
+      max-height: 100vh;
+      flex: auto;
+      flex-direction: column;
+
+      & .editor-header {
+        display: flex;
+        height: var(--editor-height);
+        align-items: center;
+        padding: var(--spacing-padding-large);
+        border-right: solid var(--border-width-normal) var(--border-color-normal);
+        border-bottom: solid var(--border-width-normal) var(--border-color-normal);
+        background-color: var(--background-color-elevated);
+
+        & h1 {
+          flex-grow: 1;
+          color: var(--text-color-normal);
+          font-size: var(--text-size-title);
+          font-weight: var(--text-weight-title);
+          text-align: center;
+        }
+      }
+
+      & .placeholder {
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+        justify-content: center;
+        background-color: var(--background-color-normal);
+        background-image: radial-gradient(
+            circle at center,
+            transparent 0,
+            transparent 60%,
+            var(--background-color-normal) 100%
+          ),
+          linear-gradient(to right, var(--border-color-lower) 1px, transparent 1px),
+          linear-gradient(to bottom, var(--border-color-lower) 1px, transparent 1px);
+        background-size:
+          auto,
+          76px 76px,
+          76px 76px;
+
+        & .wrapper {
+          padding-top: 192px;
+          background-image: var(--editor-placeholder-image);
+          background-position: 50% 0;
+          background-repeat: no-repeat;
+          background-size: 265px 192px;
+          color: var(--text-color-normal);
+          font-size: var(--text-size-normal);
+          text-align: center;
+        }
+      }
+
+      & .editor-container {
+        height: 0;
+        flex: 1;
+        padding: var(--spacing-padding-large);
+
+        & .draggable {
+          min-height: calc(100dvh - var(--editor-height) - var(--spacing-padding-large) * 2);
+          gap: var(--spacing-gap-large);
+        }
+      }
+    }
+  }
+
+  .not-found {
+    height: 100vh;
+    flex-direction: column;
+    justify-content: center;
+    background-image: var(--not-found-image);
+    background-position: 50% calc(50% - 62px);
+    background-repeat: no-repeat;
+    background-size: 109px 82px;
+    color: var(--text-color-normal);
+    font-size: var(--text-size-small);
+    text-align: center;
+
+    & .not-found-header {
+      margin-bottom: var(--spacing-padding-small);
+      color: var(--text-color-highlight);
+      font-size: var(--text-size-large);
+    }
+  }
+}
+</style>
diff --git a/skore-ui/src/views/project/ProjectViewList.vue b/skore-ui/src/views/project/ProjectViewList.vue
new file mode 100644
index 00000000..e81a7c44
--- /dev/null
+++ b/skore-ui/src/views/project/ProjectViewList.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import Simplebar from "simplebar-vue";
+import { onMounted, ref } from "vue";
+
+import type { EditableListItemModel } from "@/components/EditableList.vue";
+import EditableList from "@/components/EditableList.vue";
+import SectionHeader from "@/components/SectionHeader.vue";
+import { generateRandomId } from "@/services/utils";
+import { useProjectStore } from "@/stores/project";
+import { useToastsStore } from "@/stores/toasts";
+
+const projectStore = useProjectStore();
+const toastsStore = useToastsStore();
+const views = ref<EditableListItemModel[]>([]);
+let unsavedViewsId: string = "";
+
+function onViewSelected(view: string) {
+  projectStore.setCurrentView(view);
+}
+
+async function onViewRenamed(oldName: string, newName: string, item: EditableListItemModel) {
+  const viewAlreadyExists = views.value.filter((view) => view.name === newName).length > 1;
+  if (viewAlreadyExists) {
+    toastsStore.addToast(`A view named "${newName}" already exists`, "error");
+    item.isNamed = false;
+    return;
+  }
+  // user can rename an existing view
+  // and rename a new view that is not known by the backend
+  if (unsavedViewsId == item.id) {
+    await projectStore.createView(newName);
+    unsavedViewsId = "";
+    toastsStore.addToast("View added successfully", "success");
+  } else {
+    await projectStore.renameView(oldName, newName);
+  }
+  // auto switch the view to the renamed one
+  onViewSelected(newName);
+}
+
+async function onViewsListAction(action: string, item: EditableListItemModel) {
+  switch (action) {
+    case "rename": {
+      item.isNamed = false;
+      break;
+    }
+    case "duplicate": {
+      const index = views.value.indexOf(item) ?? 0;
+      const newName = `${item.name} - copy`;
+      views.value.splice(index + 1, 0, {
+        name: newName,
+        icon: "icon-new-document",
+        isNamed: false,
+        id: generateRandomId(),
+      });
+      unsavedViewsId = newName;
+      await projectStore.duplicateView(item.name, newName);
+      break;
+    }
+    case "delete": {
+      views.value.splice(views.value.indexOf(item), 1);
+      await projectStore.deleteView(item.name);
+      toastsStore.addToast("View deleted successfully", "success");
+      break;
+    }
+  }
+}
+
+function onAddView() {
+  const hasUnsavedViews = views.value.some((view) => !view.isNamed);
+  if (!hasUnsavedViews) {
+    const id = generateRandomId();
+    views.value.push({ name: "New view", icon: "icon-new-document", isNamed: false, id });
+    unsavedViewsId = id;
+  }
+}
+
+onMounted(async () => {
+  views.value = Object.keys(projectStore.views).map((key) => ({
+    name: key,
+    icon: "icon-new-document",
+    isNamed: true,
+    id: generateRandomId(),
+  }));
+});
+</script>
+
+<template>
+  <div class="views-list">
+    <SectionHeader
+      title="Views"
+      icon="icon-recent-document"
+      action-icon="icon-plus-circle"
+      @action="onAddView"
+    />
+    <Simplebar class="list">
+      <EditableList
+        v-model:items="views"
+        :actions="[
+          { label: 'rename', emitPayload: 'rename', icon: 'icon-edit' },
+          { label: 'duplicate', emitPayload: 'duplicate', icon: 'icon-copy' },
+          { label: 'delete', emitPayload: 'delete', icon: 'icon-trash' },
+        ]"
+        @action="onViewsListAction"
+        @select="onViewSelected"
+        @rename="onViewRenamed"
+      />
+    </Simplebar>
+  </div>
+</template>
+
+<style scoped>
+.views-list {
+  background-color: var(--background-color-elevated-high);
+
+  & .list {
+    max-height: 20vh;
+  }
+}
+</style>
diff --git a/skore-ui/tests/views/ProjectView.spec.ts b/skore-ui/tests/views/ProjectView.spec.ts
index 9b97873d..4cdb30fa 100644
--- a/skore-ui/tests/views/ProjectView.spec.ts
+++ b/skore-ui/tests/views/ProjectView.spec.ts
@@ -5,7 +5,7 @@ import { createApp } from "vue";
 import { useRoute } from "vue-router";
 
 import { ROUTE_NAMES } from "@/router";
-import ProjectView from "@/views/ProjectView.vue";
+import ProjectView from "@/views/project/ProjectView.vue";
 import { mountSuspense } from "../test.utils";
 
 vi.mock("@/services/api", () => {