diff --git a/src/app/app-build/app-build.component.html b/src/app/app-build/app-build.component.html
index bd8b077d..07ca8a4d 100644
--- a/src/app/app-build/app-build.component.html
+++ b/src/app/app-build/app-build.component.html
@@ -8,35 +8,6 @@
 
 <div class="canvas_container" dfDropZone (drop)="dropped($event)">
   <div class="canvas_toolbar">
-    <div class="button button_undo" disabled>
-      <svg
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M11.9133 5.4265H3.24663L6.95329 1.7665C7.07971 1.64008 7.15073 1.46862 7.15073 1.28983C7.15073 1.11105 7.07971 0.939584 6.95329 0.813164C6.82687 0.686744 6.65541 0.615723 6.47663 0.615723C6.29784 0.615723 6.12638 0.686744 5.99996 0.813164L0.666626 6.0865L5.99996 11.3332C6.1255 11.4578 6.29541 11.5275 6.47232 11.5269C6.64923 11.5262 6.81864 11.4554 6.94329 11.3298C7.06794 11.2043 7.13762 11.0344 7.137 10.8575C7.13637 10.6806 7.0655 10.5112 6.93996 10.3865L3.23996 6.75983H11.9066C13.5086 6.75095 15.0488 7.37748 16.1897 8.50214C17.3307 9.6268 17.9792 11.1579 17.9933 12.7598C17.9856 13.8702 17.6699 14.9566 17.0814 15.8982C16.4929 16.8399 15.6547 17.5997 14.66 18.0932C14.4955 18.1763 14.3708 18.3213 14.3133 18.4963C14.2849 18.583 14.2737 18.6744 14.2806 18.7654C14.2874 18.8564 14.3121 18.9451 14.3533 19.0265C14.3944 19.1079 14.4512 19.1804 14.5204 19.2399C14.5896 19.2994 14.6698 19.3447 14.7564 19.3731C14.9315 19.4306 15.1222 19.4163 15.2866 19.3332C16.7647 18.5873 17.9469 17.3632 18.6409 15.86C19.3349 14.3569 19.4998 12.6631 19.1088 11.0543C18.7178 9.44553 17.7939 8.01638 16.4875 6.9994C15.181 5.98242 13.5688 5.43745 11.9133 5.45317V5.4265Z"
-          fill="currentColor"
-        />
-      </svg>
-    </div>
-    <div class="button button_redo" disabled>
-      <svg
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M14 0.813337C13.8745 0.688685 13.7045 0.619008 13.5276 0.619633C13.3507 0.620258 13.1813 0.691135 13.0567 0.81667C12.932 0.942206 12.8623 1.11212 12.863 1.28903C12.8636 1.46594 12.9345 1.63535 13.06 1.76L16.7667 5.42H8.09999C6.43097 5.38531 4.80007 5.92111 3.47681 6.93885C2.15355 7.95659 1.21713 9.39536 0.822311 11.0174C0.427493 12.6394 0.597906 14.3476 1.30539 15.8596C2.01287 17.3717 3.21508 18.5971 4.71332 19.3333C4.87422 19.4156 5.06119 19.4305 5.2331 19.3749C5.40501 19.3192 5.54777 19.1976 5.62999 19.0367C5.71221 18.8758 5.72714 18.6888 5.6715 18.5169C5.61587 18.345 5.49422 18.2022 5.33332 18.12C4.33862 17.6265 3.50036 16.8667 2.91186 15.9251C2.32335 14.9835 2.00768 13.897 1.99999 12.7867C2.01408 11.1847 2.66263 9.65364 3.80354 8.52898C4.94444 7.40432 6.48465 6.77779 8.08666 6.78667H16.7533L13.06 10.44C12.9848 10.5697 12.9556 10.7208 12.9769 10.8692C12.9982 11.0175 13.0689 11.1543 13.1775 11.2575C13.2862 11.3608 13.4264 11.4244 13.5756 11.4382C13.7248 11.4519 13.8743 11.415 14 11.3333L19.3333 6.06L14 0.813337Z"
-          fill="currentColor"
-        />
-      </svg>
-    </div>
-
     <div class="button button_cart" *ngIf="!isGuest" (click)="toggleCartPanel()">
       <svg
         width="20"
diff --git a/src/app/app-header/app-header.component.html b/src/app/app-header/app-header.component.html
index ef4c5452..66412c27 100644
--- a/src/app/app-header/app-header.component.html
+++ b/src/app/app-header/app-header.component.html
@@ -47,6 +47,7 @@
     My Groups
   </div>
   <div (click)="goToBlockLibrary()">Block Library</div>
+  <div (click)="this.tutorialCompleted = false">Tutorial</div>
   <div>
     <a href="https://moleculemaker.org/dmm-help/">Help</a>
   </div>
@@ -75,3 +76,5 @@
     </div>
   </p-dialog>
 </div>
+
+<tutorial [completed]="tutorialCompleted" (onClose)="tutorialCompleted = true"></tutorial>
diff --git a/src/app/app-header/app-header.component.ts b/src/app/app-header/app-header.component.ts
index 129f428f..93b4bf15 100644
--- a/src/app/app-header/app-header.component.ts
+++ b/src/app/app-header/app-header.component.ts
@@ -23,6 +23,24 @@ export class AppHeaderComponent implements OnInit {
     this.menuOpen = false;
   }
 
+  tutorialCompletedLocalStorageKey = 'dmm-tutorial-completed';
+  _tutorialCompleted = Boolean(
+    localStorage.getItem(this.tutorialCompletedLocalStorageKey),
+  );
+
+  get tutorialCompleted() {
+    return this._tutorialCompleted;
+  }
+
+  set tutorialCompleted(completed: boolean) {
+    this._tutorialCompleted = completed;
+    if (completed) {
+      localStorage.setItem(this.tutorialCompletedLocalStorageKey, '1');
+    } else {
+      localStorage.removeItem(this.tutorialCompletedLocalStorageKey);
+    }
+  }
+
   constructor(
     private userService: UserService,
     private workspaceService: WorkspaceService,
diff --git a/src/app/app-sidebar/app-sidebar.component.html b/src/app/app-sidebar/app-sidebar.component.html
index 30c9436d..5ff359d0 100644
--- a/src/app/app-sidebar/app-sidebar.component.html
+++ b/src/app/app-sidebar/app-sidebar.component.html
@@ -1,31 +1,4 @@
 <div class="sidebar_container">
-  <!-- todo: change to data driven toggle structure -->
-  <!--
-  <div class="toggle"
-    [class.select_0]="currentToggle == 'build'"
-    [class.select_1]="currentToggle == 'preset'"
-  >
-    <div class="button" [class.selected]="currentToggle == 'build'" (click)="onChangeToggle('build')">Build your own</div>
-    <div class="button" [class.selected]="currentToggle == 'preset'" (click)="onChangeToggle('preset')">Presets</div>
-  </div>
-  -->
-  <div class="sidebar_toggle" (click)="toggleSidebar()">
-    <svg
-      width="9"
-      height="27"
-      viewBox="0 0 9 27"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M7.44795 26.3975C7.21084 26.5163 6.93625 26.536 6.68458 26.4524C6.43291 26.3687 6.22477 26.1886 6.10595 25.9515L0.10595 13.9515C0.0362665 13.8124 -1.69969e-05 13.659 -1.69833e-05 13.5035C-1.69697e-05 13.3479 0.0362665 13.1945 0.10595 13.0555L6.10595 1.05546C6.16416 0.937015 6.24524 0.831266 6.34451 0.744308C6.44379 0.65735 6.55929 0.590902 6.68437 0.548796C6.80945 0.506689 6.94162 0.489757 7.07327 0.498976C7.20492 0.508194 7.33345 0.543381 7.45143 0.602507C7.56942 0.661632 7.67454 0.743526 7.76073 0.843472C7.84691 0.943417 7.91246 1.05943 7.9536 1.18483C7.99474 1.31023 8.01064 1.44253 8.00041 1.57411C7.99017 1.70568 7.95399 1.83393 7.89395 1.95146L2.11995 13.5035L7.89395 25.0555C8.01276 25.2926 8.03251 25.5672 7.94887 25.8188C7.86523 26.0705 7.68505 26.2786 7.44795 26.3975Z"
-        fill="currentColor"
-      />
-    </svg>
-  </div>
-
   <div class="tabs">
     <div
       class="tab"
diff --git a/src/app/app-sidebar/app-sidebar.component.scss b/src/app/app-sidebar/app-sidebar.component.scss
index dcacf1d8..b5574db8 100644
--- a/src/app/app-sidebar/app-sidebar.component.scss
+++ b/src/app/app-sidebar/app-sidebar.component.scss
@@ -47,12 +47,6 @@ $sidebar_width: 500px;
     .sidebar_container {
       @include translate(-$sidebar_width, 0%);
     }
-
-    .sidebar_toggle {
-      svg {
-        @include rotate(180deg);
-      }
-    }
   }
 }
 
@@ -86,45 +80,6 @@ $sidebar_width: 500px;
     }
   }
 
-  .sidebar_toggle {
-    cursor: pointer;
-
-    position: absolute;
-    left: 100%;
-    top: $padding;
-    z-index: get_index(interface);
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    min: {
-      height: 5rem;
-    }
-
-    background: {
-      color: color_variable("background");
-    }
-
-    margin: {
-      left: 4px; //don't cover up the border
-    }
-    padding: ($padding * 0.5) ($padding * 0.65);
-
-    border: 1px solid color_variable("interface_border");
-    border: {
-      left: 0px;
-    }
-
-    @include border-right-radius($border_radius * 2);
-
-    &:hover {
-      background: {
-        color: color_variable("interface_hover");
-      }
-    }
-  }
-
   .tabs {
     display: flex;
 
@@ -437,6 +392,20 @@ $sidebar_width: 500px;
         y: scroll;
       }
 
+      &::-webkit-scrollbar {
+        --webkit-appearance: none;
+        width: 16px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: #eeeeee;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-radius: 8px;
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+
       padding: {
         top: $padding;
         right: $padding * 0.5;
diff --git a/src/app/app-sidebar/app-sidebar.component.ts b/src/app/app-sidebar/app-sidebar.component.ts
index c21c2cb6..3f696761 100644
--- a/src/app/app-sidebar/app-sidebar.component.ts
+++ b/src/app/app-sidebar/app-sidebar.component.ts
@@ -119,8 +119,6 @@ export class AppSidebarComponent implements OnInit {
     this.applyFilters();
   }
 
-  isSidebarExpanded = true;
-
   molecule: Molecule | null = null;
   functionModeEnabled = true;
 
@@ -158,13 +156,6 @@ export class AppSidebarComponent implements OnInit {
     return this.moleculeSearch.length == 0 ? this.searchPlaceholder : '';
   }
 
-  //********************************************
-  toggleSidebar(override?: boolean) {
-    this.isSidebarExpanded =
-      typeof override != 'undefined' ? override : !this.isSidebarExpanded;
-    this.sidebarClasses = this.isSidebarExpanded ? 'expanded' : 'collapsed';
-  }
-
   //********************************************
   onClickType(type: string) {
     if (type == 'all') {
diff --git a/src/app/block-library/block-library.component.html b/src/app/block-library/block-library.component.html
index 976482e8..4b87ed5f 100644
--- a/src/app/block-library/block-library.component.html
+++ b/src/app/block-library/block-library.component.html
@@ -54,5 +54,3 @@
     </div>
   </div>
 </div>
-
-<tutorial></tutorial>
diff --git a/src/app/block-library/block-library.component.scss b/src/app/block-library/block-library.component.scss
index bf5679c9..fa49aea3 100644
--- a/src/app/block-library/block-library.component.scss
+++ b/src/app/block-library/block-library.component.scss
@@ -1,4 +1,8 @@
 :host {
+  display: block;
+  height: 100%;
+  overflow-y: scroll;
+
   .title {
     margin: 32px;
     text-align: center;
diff --git a/src/app/group-cart/group-cart.component.scss b/src/app/group-cart/group-cart.component.scss
index a90e4bb0..a01a80b9 100644
--- a/src/app/group-cart/group-cart.component.scss
+++ b/src/app/group-cart/group-cart.component.scss
@@ -60,10 +60,10 @@
       font-size: 24px;
       display: flex;
       justify-content: flex-end;
+      position: sticky;
+      bottom: 76px;
 
       ::ng-deep button {
-        width: 388px;
-        height: 85px;
         background: #31509e;
         border: 1px solid #31509e;
         border-radius: 8px;
diff --git a/src/app/molecule-detail/molecule-detail.component.html b/src/app/molecule-detail/molecule-detail.component.html
index ac52d8b5..8920cb4e 100644
--- a/src/app/molecule-detail/molecule-detail.component.html
+++ b/src/app/molecule-detail/molecule-detail.component.html
@@ -10,15 +10,6 @@
           : 'none'
       "
     >
-      <div class="carousel-item" (click)="requestFullscreen($event)">
-        <svg
-          *ngIf="hasSvgAndMol2"
-          width="100%"
-          height="100%"
-          [attr.data-src]="svgUrl"
-        ></svg>
-      </div>
-
       <div class="carousel-item blocks-view">
         <svg viewBox="-300 -150 600 300" width="100%" height="100%">
           <g
@@ -40,6 +31,15 @@
         </svg>
       </div>
 
+      <div class="carousel-item" (click)="requestFullscreen($event)">
+        <svg
+          *ngIf="hasSvgAndMol2"
+          width="100%"
+          height="100%"
+          [attr.data-src]="svgUrl"
+        ></svg>
+      </div>
+
       <div class="carousel-item" (click)="requestFullscreen($event)">
         <div #3dmol *ngIf="hasSvgAndMol2" class="mol-container"></div>
       </div>
diff --git a/src/app/molecule-detail/molecule-detail.component.ts b/src/app/molecule-detail/molecule-detail.component.ts
index 9e4e3049..8a28eb70 100644
--- a/src/app/molecule-detail/molecule-detail.component.ts
+++ b/src/app/molecule-detail/molecule-detail.component.ts
@@ -32,7 +32,7 @@ export class MoleculeDetailComponent implements OnChanges {
   @Input()
   blockSet!: BlockSet;
 
-  carouselIndex = 1;
+  carouselIndex = 0;
 
   get hasSvgAndMol2() {
     return (
diff --git a/src/app/tutorial/tutorial.component.html b/src/app/tutorial/tutorial.component.html
index 806c73e9..12b81e4a 100644
--- a/src/app/tutorial/tutorial.component.html
+++ b/src/app/tutorial/tutorial.component.html
@@ -1,4 +1,4 @@
-<div class="tutorial" *ngIf="currentStep">
+<div class="tutorial" *ngIf="!completed">
   <div
     class="step"
     [class]="[
diff --git a/src/app/tutorial/tutorial.component.ts b/src/app/tutorial/tutorial.component.ts
index f6286d3a..759df06d 100644
--- a/src/app/tutorial/tutorial.component.ts
+++ b/src/app/tutorial/tutorial.component.ts
@@ -1,13 +1,25 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   selector: 'tutorial',
   templateUrl: './tutorial.component.html',
   styleUrls: ['./tutorial.component.scss'],
 })
-export class TutorialComponent implements OnInit {
-  currentStep: any | null = null; //if null, the tutorial will not show
-  steps: any[] = [];
+export class TutorialComponent {
+  steps = [
+    { id: 'welcome', class: '' },
+    { id: 'videos', class: 'wide' },
+
+    // { id: 'workspace', class: '' },
+    // { id: 'blocks', class: '' },
+
+    // { id: 'build', class: '' },
+    // { id: 'build_002', class: 'wide' },
+    // { id: 'build_003', class: 'wide' },
+    // { id: 'build_004', class: 'wide' },
+
+    { id: 'finish', class: '' },
+  ];
 
   videos = [
     {
@@ -71,63 +83,36 @@ export class TutorialComponent implements OnInit {
     },
   ];
 
-  currentVideoIndex = 0;
-  readonly videoCount = 10;
-
-  //********************************************
-  ngOnInit(): void {
-    this.steps = [
-      { id: 'welcome', class: '' },
-      { id: 'videos', class: 'wide' },
-
-      // { id: 'workspace', class: '' },
-      // { id: 'blocks', class: '' },
-
-      // { id: 'build', class: '' },
-      // { id: 'build_002', class: 'wide' },
-      // { id: 'build_003', class: 'wide' },
-      // { id: 'build_004', class: 'wide' },
+  index = 0;
 
-      { id: 'finish', class: '' },
-    ];
-
-    //start tutorial right away?
-    this.start();
+  get currentStep() {
+    return this.steps[this.index]!;
   }
 
-  //********************************************
-  ngAfterViewInit() {}
+  currentVideoIndex = 0;
+  readonly videoCount = 10;
 
-  //********************************************
-  start() {
-    this.currentStep = this.steps[0];
-  }
+  @Input()
+  completed!: boolean;
 
-  //********************************************
-  close() {
-    this.currentStep = null;
-  }
+  @Output()
+  onClose = new EventEmitter<void>();
 
-  //********************************************
-  getCurrentStepIndex() {
-    return this.steps.findIndex((item, index) => {
-      return item == this.currentStep;
-    });
+  close() {
+    this.index = 0;
+    this.onClose.emit();
   }
 
-  //********************************************
   previousStep() {
-    let index = this.getCurrentStepIndex();
-    this.currentStep = index > 0 ? this.steps[index - 1] : 0;
+    if (this.index > 0) {
+      this.index--;
+    }
   }
 
-  //********************************************
   nextStep() {
-    let index = this.getCurrentStepIndex();
-    this.currentStep =
-      index <= this.steps.length - 1
-        ? this.steps[index + 1]
-        : this.steps[this.steps.length - 1];
+    if (this.index < this.steps.length - 1) {
+      this.index++;
+    }
   }
 
   previousVideo() {
diff --git a/src/styles.scss b/src/styles.scss
index 53ceca2c..eaf0dc34 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -17,4 +17,6 @@ body {
     size: 0.9rem;
     family: "Montserrat", "Open Sans", sans-serif; //'Inter', 'Open Sans', sans-serif;
   }
+
+  user-select: none;
 }