From 6851ab1c35824da322537b5677854053dd327c2f Mon Sep 17 00:00:00 2001
From: Jack <jack@speckle.systems>
Date: Tue, 23 Sep 2025 18:36:05 +0200
Subject: [PATCH 1/4] matching ui to design

---
 .../components/presentation/Actions.vue       | 34 ++++++++++++++++---
 .../components/presentation/Header.vue        | 18 +++++++---
 .../components/presentation/InfoSidebar.vue   | 19 ++++++-----
 .../components/presentation/LeftSidebar.vue   | 20 +++++++----
 .../components/presentation/PageWrapper.vue   | 18 +++++-----
 .../presentation/SlideIndicator.vue           |  4 +--
 .../presentation/controls/Button.vue          |  2 +-
 .../presentation/controls/Controls.vue        |  2 +-
 .../presentation/floatingPanel/Button.vue     |  5 +--
 .../floatingPanel/FloatingPanel.vue           |  2 +-
 .../presentation/slideList/Slide.vue          | 15 ++++----
 11 files changed, 94 insertions(+), 45 deletions(-)

diff --git a/packages/frontend-2/components/presentation/Actions.vue b/packages/frontend-2/components/presentation/Actions.vue
index 123fde0b7..a2ff9e0d9 100644
--- a/packages/frontend-2/components/presentation/Actions.vue
+++ b/packages/frontend-2/components/presentation/Actions.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-foundation border border-outline-3 rounded-xl shadow-md h-10 flex items-center"
+    class="bg-foundation border border-outline-3 rounded-xl shadow-md flex items-center h-10"
   >
     <div class="flex items-center justify-between space-x-1 p-1">
       <FormButton>Share</FormButton>
@@ -9,21 +9,32 @@
         class="hidden md:flex touch:hidden"
         @click="toggleFullscreen"
       >
-        <LucideFullscreen class="size-4" />
+        <LucideMinimize
+          v-if="isFullscreen"
+          :size="16"
+          :stroke-width="1.5"
+          :absolute-stroke-width="true"
+        />
+        <LucideMaximize
+          v-else
+          :size="16"
+          :stroke-width="1.5"
+          :absolute-stroke-width="true"
+        />
       </PresentationFloatingPanelButton>
 
       <PresentationFloatingPanelButton
         :is-active="isSidebarOpen"
         @click="emit('toggleSidebar')"
       >
-        <LucideInfo class="size-4" />
+        <LucideInfo :size="16" :stroke-width="1.5" :absolute-stroke-width="true" />
       </PresentationFloatingPanelButton>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { LucideInfo, LucideFullscreen } from 'lucide-vue-next'
+import { LucideInfo, LucideMaximize, LucideMinimize } from 'lucide-vue-next'
 
 const emit = defineEmits<{
   (e: 'toggleSidebar'): void
@@ -31,6 +42,8 @@ const emit = defineEmits<{
 
 const isSidebarOpen = defineModel<boolean>('is-sidebar-open')
 
+const isFullscreen = ref(false)
+
 const toggleFullscreen = () => {
   if (!document.fullscreenElement) {
     document.documentElement.requestFullscreen()
@@ -38,4 +51,17 @@ const toggleFullscreen = () => {
     document.exitFullscreen()
   }
 }
+
+// Listen for fullscreen changes
+onMounted(() => {
+  const handleFullscreenChange = () => {
+    isFullscreen.value = !!document.fullscreenElement
+  }
+
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+
+  onUnmounted(() => {
+    document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  })
+})
 </script>
diff --git a/packages/frontend-2/components/presentation/Header.vue b/packages/frontend-2/components/presentation/Header.vue
index 6494fb8e1..a872ab28e 100644
--- a/packages/frontend-2/components/presentation/Header.vue
+++ b/packages/frontend-2/components/presentation/Header.vue
@@ -1,16 +1,26 @@
 <template>
   <PresentationFloatingPanel>
-    <div class="flex items-center justify-between space-x-1">
+    <div class="flex items-center justify-between space-x-2">
       <PresentationFloatingPanelButton
         :active="isSidebarOpen"
         @click="emit('toggleSidebar')"
       >
-        <LucideArrowLeftToLine v-if="isSidebarOpen" class="size-4" />
-        <LucidePanelLeft v-else class="size-4" />
+        <LucideArrowLeftToLine
+          v-if="isSidebarOpen"
+          :size="16"
+          :stroke-width="1.5"
+          :absolute-stroke-width="true"
+        />
+        <LucidePanelLeft
+          v-else
+          :size="16"
+          :stroke-width="1.5"
+          :absolute-stroke-width="true"
+        />
       </PresentationFloatingPanelButton>
       <h1
         v-if="presentation?.title"
-        class="hidden sm:block text-body-xs font-medium text-foreground leading-none sm:pr-1.5"
+        class="hidden sm:block text-body-xs font-medium text-foreground leading-none sm:pr-3 max-w-64 truncate"
       >
         {{ presentation?.title }}
       </h1>
diff --git a/packages/frontend-2/components/presentation/InfoSidebar.vue b/packages/frontend-2/components/presentation/InfoSidebar.vue
index 97bc319cd..299608cfd 100644
--- a/packages/frontend-2/components/presentation/InfoSidebar.vue
+++ b/packages/frontend-2/components/presentation/InfoSidebar.vue
@@ -1,8 +1,8 @@
 <template>
   <aside
-    class="bg-foundation h-48 lg:h-dvh w-full lg:w-64 xl:w-80 border-t lg:border-t-0 lg:border-l border-outline-3 py-5 px-4"
+    class="bg-foundation h-[196px] lg:h-dvh w-full lg:w-[260px] xl:w-[324px] border-t lg:border-t-0 lg:border-l border-outline-3 p-4"
   >
-    <div class="hidden lg:flex items-center justify-end space-x-0.5">
+    <div class="hidden lg:flex items-center justify-end space-x-1">
       <div
         v-tippy="
           canUpdateSlide ? undefined : 'You do not have permission to edit this slide'
@@ -24,9 +24,12 @@
         @click="$emit('close')"
       />
     </div>
-    <section class="pt-2 flex flex-col gap-4">
-      <div class="flex items-center justify-between gap-x-2">
-        <h1 v-if="currentSlide?.name" class="text-xl font-medium text-foreground px-2">
+    <section class="lg:pt-4 lg:px-1 flex flex-col gap-3">
+      <div class="flex items-start justify-between gap-x-2">
+        <h1
+          v-if="currentSlide?.name"
+          class="text-xl font-medium text-foreground px-1 lg:px-3 lg:py-1.5"
+        >
           {{ currentSlide?.name }}
         </h1>
         <div class="lg:hidden flex items-center gap-x-1">
@@ -37,18 +40,18 @@
             hide-text
             @click="isSlideEditDialogOpen = true"
           />
-          <FormButton
+          <!--<FormButton
             :icon-left="LucideX"
             color="subtle"
             hide-text
             @click="$emit('close')"
-          />
+          />-->
         </div>
       </div>
 
       <p
         v-if="currentSlide?.description"
-        class="text-body-sm text-foreground whitespace-pre-wrap px-2"
+        class="text-body-sm text-foreground whitespace-pre-wrap px-1 lg:px-3 lg:py-1"
       >
         {{ currentSlide?.description }}
       </p>
diff --git a/packages/frontend-2/components/presentation/LeftSidebar.vue b/packages/frontend-2/components/presentation/LeftSidebar.vue
index 46111a4fa..664151fd3 100644
--- a/packages/frontend-2/components/presentation/LeftSidebar.vue
+++ b/packages/frontend-2/components/presentation/LeftSidebar.vue
@@ -1,28 +1,34 @@
 <template>
   <div class="w-full sm:w-auto">
     <div class="fixed inset-0 z-10 md:hidden">
-      <div class="absolute inset-0 bg-black/50" />
+      <div class="absolute inset-0 bg-black/20" />
     </div>
 
     <aside
-      class="relative z-20 bg-foundation h-dvh w-52 md:w-60 border-r border-outline-3 pt-3"
+      class="relative z-20 bg-foundation h-dvh w-[212px] md:w-60 border-r border-outline-3"
     >
       <div class="flex flex-col h-full">
-        <section class="flex-shrink-0 flex items-center gap-3 px-3">
+        <section
+          class="flex-shrink-0 flex items-center gap-3 absolute bg-white/70 backdrop-blur-md w-full p-3 pb-2.5 border-b border-white/80"
+        >
           <NuxtLink
-            class="flex items-center gap-2 min-w-0 flex-1"
+            class="flex items-center gap-2.5 min-w-0 flex-1"
             :to="workspaceRoute(workspace?.slug)"
           >
-            <WorkspaceAvatar :name="workspace?.name" :logo="workspace?.logo" />
+            <WorkspaceAvatar
+              :name="workspace?.name"
+              :logo="workspace?.logo"
+              :size="'lg'"
+            />
             <div class="flex-1 min-w-0">
-              <p class="text-body-xs text-foreground truncate">
+              <p class="text-body-xs font-medium text-foreground truncate">
                 {{ workspace?.name }}
               </p>
             </div>
           </NuxtLink>
         </section>
         <section
-          class="flex-1 flex justify-center simple-scrollbar overflow-y-auto mt-3 pb-3 px-3"
+          class="flex-1 flex justify-center overflow-y-auto pt-16 pb-3 px-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
         >
           <PresentationSlideList />
         </section>
diff --git a/packages/frontend-2/components/presentation/PageWrapper.vue b/packages/frontend-2/components/presentation/PageWrapper.vue
index 493a34c21..7e08750e6 100644
--- a/packages/frontend-2/components/presentation/PageWrapper.vue
+++ b/packages/frontend-2/components/presentation/PageWrapper.vue
@@ -4,15 +4,15 @@
       <PresentationHeader
         v-if="!hideUi"
         v-model:is-sidebar-open="isLeftSidebarOpen"
-        class="absolute top-4 z-40"
-        :class="[isLeftSidebarOpen ? 'left-56 md:left-[15.75rem]' : 'left-4']"
+        class="absolute top-3 z-40"
+        :class="[isLeftSidebarOpen ? 'left-56 md:left-[15.75rem]' : 'left-3']"
         @toggle-sidebar="isLeftSidebarOpen = !isLeftSidebarOpen"
       />
 
       <PresentationActions
         v-if="!hideUi"
         v-model:is-sidebar-open="isInfoSidebarOpen"
-        class="absolute bottom-4 lg:top-4 right-4 z-20"
+        class="absolute bottom-3 lg:top-3 right-3 z-20"
         :class="{
           'bottom-52 lg:bottom-auto lg:right-[17rem] xl:right-[21rem]':
             isInfoSidebarOpen
@@ -28,12 +28,12 @@
           isInfoSidebarOpen
             ? 'translate-y-[calc(-50%+25px-6rem)] lg:translate-y-[-50%]'
             : 'translate-y-[-50%]',
-          isLeftSidebarOpen ? 'lg:left-[14.75rem] hidden md:block' : 'left-0'
+          isLeftSidebarOpen ? 'lg:left-60 hidden md:block' : 'left-0'
         ]"
       />
 
       <PresentationSpeckleLogo
-        class="absolute right-4 z-30 top-4 lg:top-auto lg:bottom-4"
+        class="absolute right-3 z-30 top-3 lg:top-auto lg:bottom-3"
         :class="[isInfoSidebarOpen ? '' : '']"
       />
 
@@ -60,10 +60,10 @@
 
       <PresentationControls
         :hide-ui="hideUi"
-        class="absolute left-4 lg:left-1/2 lg:-translate-x-1/2"
+        class="absolute left-3 lg:left-1/2 lg:-translate-x-1/2"
         :class="[
-          isInfoSidebarOpen ? 'bottom-52 lg:bottom-4' : 'bottom-4',
-          isLeftSidebarOpen ? 'hidden md:flex md:left-64' : ''
+          isInfoSidebarOpen ? 'bottom-52 lg:bottom-3' : 'bottom-3',
+          isLeftSidebarOpen ? 'hidden md:flex md:left-[252px]' : ''
         ]"
       />
     </div>
@@ -96,7 +96,7 @@ const onLoadingChange = (loading: boolean) => {
   if (!loading) {
     hideUi.value = false
 
-    isLeftSidebarOpen.value = !isMobile.value
+    isLeftSidebarOpen.value = false
     isInfoSidebarOpen.value = !isMobile.value
   }
 }
diff --git a/packages/frontend-2/components/presentation/SlideIndicator.vue b/packages/frontend-2/components/presentation/SlideIndicator.vue
index 6feaa9de1..c53c7d656 100644
--- a/packages/frontend-2/components/presentation/SlideIndicator.vue
+++ b/packages/frontend-2/components/presentation/SlideIndicator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 absolute group">
+  <div class="p-5 absolute group">
     <ul class="flex flex-col space-y-2">
       <li v-for="slide in visibleSlides" :key="slide.id">
         <div
@@ -11,7 +11,7 @@
 
     <div
       v-if="showSlideList"
-      class="hidden lg:block absolute top-[calc(50%+25px)] -translate-y-1/2 max-h-[75vh] overflow-y-auto w-56 simple-scrollbar bg-foundation border border-outline-3 rounded-xl p-3 shadow-md transition-all duration-300 ease-out opacity-0 invisible group-hover:opacity-100 group-hover:visible -translate-x-5 group-hover:translate-x-0"
+      class="hidden lg:block absolute top-[calc(50%+25px)] -translate-y-1/2 max-h-[75vh] overflow-y-auto w-56 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden bg-foundation border border-outline-3 rounded-2xl p-2 shadow-md transition-all duration-300 ease-out opacity-0 invisible group-hover:opacity-100 group-hover:visible -translate-x-5 group-hover:translate-x-0"
     >
       <PresentationSlideList class="w-full" hide-title />
     </div>
diff --git a/packages/frontend-2/components/presentation/controls/Button.vue b/packages/frontend-2/components/presentation/controls/Button.vue
index 74090a0c2..9d9b8f440 100644
--- a/packages/frontend-2/components/presentation/controls/Button.vue
+++ b/packages/frontend-2/components/presentation/controls/Button.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     :disabled="disabled"
-    class="bg-foundation size-9 flex items-center justify-center hover:bg-primary-muted disabled:hover:bg-transparent text-foreground disabled:text-foreground-3"
+    class="bg-foundation size-8 rounded-md flex items-center justify-center hover:bg-primary-muted disabled:hover:bg-transparent text-foreground disabled:text-foreground-3"
   >
     <component :is="icon" class="size-4" />
     <slot />
diff --git a/packages/frontend-2/components/presentation/controls/Controls.vue b/packages/frontend-2/components/presentation/controls/Controls.vue
index d1d14188c..08e0881fc 100644
--- a/packages/frontend-2/components/presentation/controls/Controls.vue
+++ b/packages/frontend-2/components/presentation/controls/Controls.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center rounded-xl bg-foundation border border-outline-3 shadow-md overflow-hidden divide-x divide-outline-3"
+    class="flex items-center rounded-xl bg-foundation border border-outline-3 shadow-md overflow-hidden h-10 p-[3px]"
     :class="{ hidden: hideUi }"
   >
     <PresentationControlsButton
diff --git a/packages/frontend-2/components/presentation/floatingPanel/Button.vue b/packages/frontend-2/components/presentation/floatingPanel/Button.vue
index 210f22f4c..bb754626f 100644
--- a/packages/frontend-2/components/presentation/floatingPanel/Button.vue
+++ b/packages/frontend-2/components/presentation/floatingPanel/Button.vue
@@ -1,8 +1,9 @@
 <template>
   <button
-    class="size-8 flex items-center justify-center bg-foundation rounded-xl hover:bg-info-lighter hover:text-primary-focus dark:hover:text-foreground-on-primary"
+    class="size-8 flex items-center text-foreground justify-center bg-foundation rounded-md hover:bg-primary-muted dark:hover:text-foreground-on-primary"
     :class="{
-      'bg-info-lighter text-primary-focus dark:text-foreground-on-primary': isActive
+      'bg-info-lighter hover:!bg-info-lighter text-primary-focus dark:text-foreground-on-primary':
+        isActive
     }"
   >
     <slot />
diff --git a/packages/frontend-2/components/presentation/floatingPanel/FloatingPanel.vue b/packages/frontend-2/components/presentation/floatingPanel/FloatingPanel.vue
index 6b607fc7c..96c21e260 100644
--- a/packages/frontend-2/components/presentation/floatingPanel/FloatingPanel.vue
+++ b/packages/frontend-2/components/presentation/floatingPanel/FloatingPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-foundation border border-outline-3 rounded-xl p-1 shadow-md h-10 flex items-center"
+    class="bg-foundation border border-collapse border-outline-3 rounded-xl p-1 p-x-[3px] shadow-md flex items-center h-10"
   >
     <slot />
   </div>
diff --git a/packages/frontend-2/components/presentation/slideList/Slide.vue b/packages/frontend-2/components/presentation/slideList/Slide.vue
index fb997058b..093b8229c 100644
--- a/packages/frontend-2/components/presentation/slideList/Slide.vue
+++ b/packages/frontend-2/components/presentation/slideList/Slide.vue
@@ -1,19 +1,22 @@
 <template>
-  <li class="w-full" :class="{ 'pb-1 last:pb-0': hideTitle }">
+  <li class="w-full" :class="{ 'pb-0': hideTitle }">
     <button
-      class="bg-foundation-page rounded-xl overflow-hidden border border-outline-3 transition-all duration-200 hover:!border-outline-4 w-full"
+      class="bg-foundation-page rounded-md overflow-hidden border border-outline-3 transition-all duration-200 hover:!border-outline-4 w-full"
       :class="[isCurrentSlide ? '!border-outline-5' : '']"
       @click="onSelectSlide"
     >
       <img
         :src="slide.screenshot"
         :alt="slide.name"
-        class="w-full h-28 object-contain"
+        class="w-full aspect-[3/2] md:aspect-video object-cover"
       />
     </button>
-    <p v-if="!hideTitle" class="text-body-3xs leading-none text-foreground my-2">
-      {{ slideIndex }}. {{ slide.name }}
-    </p>
+    <div v-if="!hideTitle" class="flex flex-row gap-x-1 pt-0.5 pb-1">
+      <p class="text-body-3xs font-semibold text-foreground my-1">{{ slideIndex }}.</p>
+      <p class="text-body-3xs font-medium text-foreground my-1">
+        {{ slide.name }}
+      </p>
+    </div>
   </li>
 </template>
 

From 2ed4603870345be7827a327979cbd9f7b896f3e2 Mon Sep 17 00:00:00 2001
From: Jack <jack@speckle.systems>
Date: Tue, 23 Sep 2025 18:47:04 +0200
Subject: [PATCH 2/4] view panel spacing

---
 packages/frontend-2/components/viewer/saved-views/Panel.vue   | 2 +-
 .../frontend-2/components/viewer/saved-views/panel/Groups.vue | 2 +-
 .../frontend-2/components/viewer/saved-views/panel/View.vue   | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/frontend-2/components/viewer/saved-views/Panel.vue b/packages/frontend-2/components/viewer/saved-views/Panel.vue
index 298fafe83..d729af2c5 100644
--- a/packages/frontend-2/components/viewer/saved-views/Panel.vue
+++ b/packages/frontend-2/components/viewer/saved-views/Panel.vue
@@ -63,7 +63,7 @@
         />
       </div>
     </template>
-    <div class="px-3 pt-3">
+    <div class="px-2 pt-2">
       <ViewerButtonGroup>
         <ViewerButtonGroupButton
           v-for="viewsType in Object.values(ViewsType)"
diff --git a/packages/frontend-2/components/viewer/saved-views/panel/Groups.vue b/packages/frontend-2/components/viewer/saved-views/panel/Groups.vue
index f7a721427..548418aab 100644
--- a/packages/frontend-2/components/viewer/saved-views/panel/Groups.vue
+++ b/packages/frontend-2/components/viewer/saved-views/panel/Groups.vue
@@ -7,7 +7,7 @@
       v-if="!hasGroups || !project"
       :type="emptyStateType"
     />
-    <div v-else class="p-1.5 pt-2">
+    <div v-else class="p-2 pt-2">
       <ViewerSavedViewsPanelViewsGroup
         v-for="group in groups"
         :key="group.id"
diff --git a/packages/frontend-2/components/viewer/saved-views/panel/View.vue b/packages/frontend-2/components/viewer/saved-views/panel/View.vue
index 5dc2a43af..8e362f554 100644
--- a/packages/frontend-2/components/viewer/saved-views/panel/View.vue
+++ b/packages/frontend-2/components/viewer/saved-views/panel/View.vue
@@ -24,7 +24,7 @@
         </div>
       </div>
     </div>
-    <div class="flex flex-col min-w-0 grow">
+    <div class="flex flex-col min-w-0 grow gap-y-0.5">
       <div class="text-body-2xs font-medium text-foreground truncate grow-0">
         {{ view.name }}
       </div>
@@ -267,7 +267,7 @@ const menuItems = computed((): LayoutMenuItem<MenuItems>[][] => [
 
 const wrapperClasses = computed(() => {
   const classParts = [
-    'flex items-center gap-2 p-1.5 w-full group rounded-md cursor-pointer relative transition-all'
+    'flex items-center gap-2 p-2 w-full group rounded-md cursor-pointer relative transition-all'
   ]
 
   if (isActive.value) {

From 57f5b2ca96adeed81a4422d63f48944eaa1d8095 Mon Sep 17 00:00:00 2001
From: Jack <jack@speckle.systems>
Date: Wed, 24 Sep 2025 11:14:52 +0200
Subject: [PATCH 3/4] mike's feedback and speckle badge links to website

---
 .../components/presentation/Actions.vue       | 14 +++++------
 .../components/presentation/InfoSidebar.vue   |  6 -----
 .../components/presentation/LeftSidebar.vue   |  6 ++---
 .../presentation/SlideIndicator.vue           |  2 +-
 .../components/presentation/SpeckleLogo.vue   | 25 +++++++++++++------
 .../presentation/slideList/Slide.vue          | 11 ++++----
 6 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/packages/frontend-2/components/presentation/Actions.vue b/packages/frontend-2/components/presentation/Actions.vue
index a2ff9e0d9..9e30e2265 100644
--- a/packages/frontend-2/components/presentation/Actions.vue
+++ b/packages/frontend-2/components/presentation/Actions.vue
@@ -53,15 +53,15 @@ const toggleFullscreen = () => {
 }
 
 // Listen for fullscreen changes
+const handleFullscreenChange = () => {
+  isFullscreen.value = !!document.fullscreenElement
+}
+
 onMounted(() => {
-  const handleFullscreenChange = () => {
-    isFullscreen.value = !!document.fullscreenElement
-  }
-
   document.addEventListener('fullscreenchange', handleFullscreenChange)
+})
 
-  onUnmounted(() => {
-    document.removeEventListener('fullscreenchange', handleFullscreenChange)
-  })
+onUnmounted(() => {
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
 })
 </script>
diff --git a/packages/frontend-2/components/presentation/InfoSidebar.vue b/packages/frontend-2/components/presentation/InfoSidebar.vue
index 299608cfd..ec9d55599 100644
--- a/packages/frontend-2/components/presentation/InfoSidebar.vue
+++ b/packages/frontend-2/components/presentation/InfoSidebar.vue
@@ -40,12 +40,6 @@
             hide-text
             @click="isSlideEditDialogOpen = true"
           />
-          <!--<FormButton
-            :icon-left="LucideX"
-            color="subtle"
-            hide-text
-            @click="$emit('close')"
-          />-->
         </div>
       </div>
 
diff --git a/packages/frontend-2/components/presentation/LeftSidebar.vue b/packages/frontend-2/components/presentation/LeftSidebar.vue
index 664151fd3..4b9bfc775 100644
--- a/packages/frontend-2/components/presentation/LeftSidebar.vue
+++ b/packages/frontend-2/components/presentation/LeftSidebar.vue
@@ -9,7 +9,7 @@
     >
       <div class="flex flex-col h-full">
         <section
-          class="flex-shrink-0 flex items-center gap-3 absolute bg-white/70 backdrop-blur-md w-full p-3 pb-2.5 border-b border-white/80"
+          class="flex-shrink-0 flex items-center gap-3 absolute bg-foundation/70 backdrop-blur-lg w-full p-3 pb-2.5 border-b border-white/80 dark:border-gray-900/30"
         >
           <NuxtLink
             class="flex items-center gap-2.5 min-w-0 flex-1"
@@ -18,7 +18,7 @@
             <WorkspaceAvatar
               :name="workspace?.name"
               :logo="workspace?.logo"
-              :size="'lg'"
+              size="lg"
             />
             <div class="flex-1 min-w-0">
               <p class="text-body-xs font-medium text-foreground truncate">
@@ -28,7 +28,7 @@
           </NuxtLink>
         </section>
         <section
-          class="flex-1 flex justify-center overflow-y-auto pt-16 pb-3 px-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          class="flex-1 flex justify-center simple-scrollbar overflow-y-auto pt-16 pb-3 px-3"
         >
           <PresentationSlideList />
         </section>
diff --git a/packages/frontend-2/components/presentation/SlideIndicator.vue b/packages/frontend-2/components/presentation/SlideIndicator.vue
index c53c7d656..e1e4f56d6 100644
--- a/packages/frontend-2/components/presentation/SlideIndicator.vue
+++ b/packages/frontend-2/components/presentation/SlideIndicator.vue
@@ -11,7 +11,7 @@
 
     <div
       v-if="showSlideList"
-      class="hidden lg:block absolute top-[calc(50%+25px)] -translate-y-1/2 max-h-[75vh] overflow-y-auto w-56 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden bg-foundation border border-outline-3 rounded-2xl p-2 shadow-md transition-all duration-300 ease-out opacity-0 invisible group-hover:opacity-100 group-hover:visible -translate-x-5 group-hover:translate-x-0"
+      class="hidden lg:block absolute top-[calc(50%+25px)] -translate-y-1/2 max-h-[75vh] overflow-y-auto w-56 simple-scrollbar bg-foundation border border-outline-3 rounded-2xl p-2 shadow-md transition-all duration-300 ease-out opacity-0 invisible group-hover:opacity-100 group-hover:visible -translate-x-5 group-hover:translate-x-0"
     >
       <PresentationSlideList class="w-full" hide-title />
     </div>
diff --git a/packages/frontend-2/components/presentation/SpeckleLogo.vue b/packages/frontend-2/components/presentation/SpeckleLogo.vue
index 14de22a0f..589f02860 100644
--- a/packages/frontend-2/components/presentation/SpeckleLogo.vue
+++ b/packages/frontend-2/components/presentation/SpeckleLogo.vue
@@ -1,12 +1,21 @@
 <template>
-  <PresentationFloatingPanel class="flex items-center shrink-0 select-none px-3 h-10">
-    <span class="text-body-2xs text-foreground-2">Made with</span>
-    <img
-      class="size-5 block mr-0.5 ml-1"
-      src="~~/assets/images/speckle_logo_big.png"
-      alt="Speckle"
-    />
+  <PresentationFloatingPanel
+    class="flex items-center shrink-0 select-none px-[3px] h-10"
+  >
+    <NuxtLink
+      to="https://speckle.systems/"
+      external
+      target="_blank"
+      class="flex items-center gap-1 hover:bg-highlight-1 rounded-md h-8 px-2.5"
+    >
+      <span class="text-body-xs text-foreground-2">Made with</span>
+      <img
+        class="size-6 block mr-[0.5px] ml-0.5"
+        src="~~/assets/images/speckle_logo_big.png"
+        alt="Speckle"
+      />
 
-    <div class="text-body-xs mt-0 font-medium">Speckle</div>
+      <div class="text-body-xs mt-0 font-medium">Speckle</div>
+    </NuxtLink>
   </PresentationFloatingPanel>
 </template>
diff --git a/packages/frontend-2/components/presentation/slideList/Slide.vue b/packages/frontend-2/components/presentation/slideList/Slide.vue
index 093b8229c..fb8dc16a4 100644
--- a/packages/frontend-2/components/presentation/slideList/Slide.vue
+++ b/packages/frontend-2/components/presentation/slideList/Slide.vue
@@ -11,12 +11,11 @@
         class="w-full aspect-[3/2] md:aspect-video object-cover"
       />
     </button>
-    <div v-if="!hideTitle" class="flex flex-row gap-x-1 pt-0.5 pb-1">
-      <p class="text-body-3xs font-semibold text-foreground my-1">{{ slideIndex }}.</p>
-      <p class="text-body-3xs font-medium text-foreground my-1">
-        {{ slide.name }}
-      </p>
-    </div>
+
+    <p v-if="!hideTitle" class="text-body-3xs font-medium text-foreground mt-1.5 mb-2">
+      <span class="font-semibold mr-1">{{ slideIndex }}.</span>
+      {{ slide.name }}
+    </p>
   </li>
 </template>
 

From d533bc7c9ed60a2db4f998fa56df6e9201753b17 Mon Sep 17 00:00:00 2001
From: Jack <jack@speckle.systems>
Date: Wed, 24 Sep 2025 11:37:19 +0200
Subject: [PATCH 4/4] info panel font size adjustments

---
 packages/frontend-2/components/presentation/InfoSidebar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend-2/components/presentation/InfoSidebar.vue b/packages/frontend-2/components/presentation/InfoSidebar.vue
index ec9d55599..ee2e40263 100644
--- a/packages/frontend-2/components/presentation/InfoSidebar.vue
+++ b/packages/frontend-2/components/presentation/InfoSidebar.vue
@@ -28,7 +28,7 @@
       <div class="flex items-start justify-between gap-x-2">
         <h1
           v-if="currentSlide?.name"
-          class="text-xl font-medium text-foreground px-1 lg:px-3 lg:py-1.5"
+          class="text-xl/7 xl:text-[26px]/8 tracking-[-0.399px] xl:tracking-[-0.494px] font-medium text-foreground px-1 lg:px-2 xl:px-3 py-0.5 lg:py-1.5"
         >
           {{ currentSlide?.name }}
         </h1>
@@ -45,7 +45,7 @@
 
       <p
         v-if="currentSlide?.description"
-        class="text-body-sm text-foreground whitespace-pre-wrap px-1 lg:px-3 lg:py-1"
+        class="text-body-sm xl:text-body text-foreground whitespace-pre-wrap px-1 lg:px-2 xl:px-3 lg:py-1"
       >
         {{ currentSlide?.description }}
       </p>