diff --git a/demo/gif/1 (copy).xcf b/demo/gif/1 (copy).xcf
new file mode 100644
index 0000000..5d4d948
Binary files /dev/null and b/demo/gif/1 (copy).xcf differ
diff --git a/demo/gif/1.xcf b/demo/gif/1.xcf
index 7f5eea0..7aee5bb 100644
Binary files a/demo/gif/1.xcf and b/demo/gif/1.xcf differ
diff --git a/demo/gif/2.xcf b/demo/gif/2.xcf
new file mode 100644
index 0000000..b8d040b
Binary files /dev/null and b/demo/gif/2.xcf differ
diff --git a/demo/gif/3.xcf b/demo/gif/3.xcf
new file mode 100644
index 0000000..06a7654
Binary files /dev/null and b/demo/gif/3.xcf differ
diff --git a/demo/gif/4.xcf b/demo/gif/4.xcf
new file mode 100644
index 0000000..b3dcef8
Binary files /dev/null and b/demo/gif/4.xcf differ
diff --git a/demo/gif/5.xcf b/demo/gif/5.xcf
new file mode 100644
index 0000000..3aa69fd
Binary files /dev/null and b/demo/gif/5.xcf differ
diff --git a/demo/gif/6.xcf b/demo/gif/6.xcf
new file mode 100644
index 0000000..cb37d41
Binary files /dev/null and b/demo/gif/6.xcf differ
diff --git a/demo/gif/Screenshot from 2021-05-04 00-57-50.png b/demo/gif/Screenshot from 2021-05-04 00-57-50.png
new file mode 100644
index 0000000..4bfb088
Binary files /dev/null and b/demo/gif/Screenshot from 2021-05-04 00-57-50.png differ
diff --git a/demo/gif/Screenshot from 2021-05-04 00-58-02.png b/demo/gif/Screenshot from 2021-05-04 00-58-02.png
new file mode 100644
index 0000000..0f9c4d4
Binary files /dev/null and b/demo/gif/Screenshot from 2021-05-04 00-58-02.png differ
diff --git a/demo/gif/Screenshot from 2021-05-04 00-58-08.png b/demo/gif/Screenshot from 2021-05-04 00-58-08.png
new file mode 100644
index 0000000..6641aaa
Binary files /dev/null and b/demo/gif/Screenshot from 2021-05-04 00-58-08.png differ
diff --git a/demo/gif/Screenshot from 2021-05-04 00-58-29.png b/demo/gif/Screenshot from 2021-05-04 00-58-29.png
new file mode 100644
index 0000000..5371343
Binary files /dev/null and b/demo/gif/Screenshot from 2021-05-04 00-58-29.png differ
diff --git a/demo/gif/Screenshot from 2021-05-04 00-59-02.png b/demo/gif/Screenshot from 2021-05-04 00-59-02.png
new file mode 100644
index 0000000..4aec155
Binary files /dev/null and b/demo/gif/Screenshot from 2021-05-04 00-59-02.png differ
diff --git a/demo/gif/Screenshot from 2021-05-04 00-59-07.png b/demo/gif/Screenshot from 2021-05-04 00-59-07.png
new file mode 100644
index 0000000..7361504
Binary files /dev/null and b/demo/gif/Screenshot from 2021-05-04 00-59-07.png differ
diff --git a/demo/gif/extrude.png b/demo/gif/extrude.png
new file mode 100644
index 0000000..8ba4e7b
Binary files /dev/null and b/demo/gif/extrude.png differ
diff --git a/demo/gif/extrude.xcf b/demo/gif/extrude.xcf
index 723702d..884cc82 100644
Binary files a/demo/gif/extrude.xcf and b/demo/gif/extrude.xcf differ
diff --git a/demo/gif/in.mp4 b/demo/gif/in.mp4
new file mode 100644
index 0000000..66187bf
Binary files /dev/null and b/demo/gif/in.mp4 differ
diff --git a/demo/gif/sculpt.gif b/demo/gif/sculpt.gif
index 4222c0e..f9a36f9 100644
Binary files a/demo/gif/sculpt.gif and b/demo/gif/sculpt.gif differ
diff --git a/demo/gif/sculpt.xcf b/demo/gif/sculpt.xcf
index f204118..68a68f3 100644
Binary files a/demo/gif/sculpt.xcf and b/demo/gif/sculpt.xcf differ
diff --git a/demo/gif/sketch.mp4 b/demo/gif/sketch.mp4
new file mode 100644
index 0000000..7994f54
Binary files /dev/null and b/demo/gif/sketch.mp4 differ
diff --git a/demo/gif/sketch.xcf b/demo/gif/sketch.xcf
index 96e3f64..77e77aa 100644
Binary files a/demo/gif/sketch.xcf and b/demo/gif/sketch.xcf differ
diff --git a/demo/user-guide.md b/demo/user-guide.md
index dba4bcf..01a8aaf 100644
--- a/demo/user-guide.md
+++ b/demo/user-guide.md
@@ -1,5 +1,24 @@
 
 
+const basicWorkflowTS = [
+  10, 'Sketching on a plane',
+  10, 'Extruding a sketch to a solid',
+  10, 'Sketch on a face of a solid',
+  10, 'Peforming boolean operation between solids',
+]
+
+const editWorkflowTS = [
+  10, 'opening a file from disk',
+  10, 'editing an existing sketch',
+  10, 'accepting the edit and exiting',
+]
+
+const exportTS = [
+  10, 'selecting a body for export',
+  10, 'initiate export',
+  10, 'loading exported stl into 3dprint slicer',
+  10, 'result',
+]
 
 
 
diff --git a/dist/extrude.png b/dist/extrude.png
index 601e727..8ba4e7b 100644
Binary files a/dist/extrude.png and b/dist/extrude.png differ
diff --git a/dist/sculpt.gif b/dist/sculpt.gif
index 4222c0e..f9a36f9 100644
Binary files a/dist/sculpt.gif and b/dist/sculpt.gif differ
diff --git a/dist/sketch.mp4 b/dist/sketch.mp4
new file mode 100644
index 0000000..dcbe602
Binary files /dev/null and b/dist/sketch.mp4 differ
diff --git a/dist/sketch.png b/dist/sketch.png
index 1664316..c93e54d 100644
Binary files a/dist/sketch.png and b/dist/sketch.png differ
diff --git a/src/react/clip.jsx b/src/react/clip.jsx
index 5bdb963..627eb40 100644
--- a/src/react/clip.jsx
+++ b/src/react/clip.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback, useReducer } from "react"
+import React from "react"
 import { MdCancel } from 'react-icons/md'
 
 
@@ -12,7 +12,6 @@ export const Clip = ({ setClip, clip }) => {
 
   width = Math.min(width * 0.9, 1024)
   const top = (window.innerHeight - (width / 1.6) - 32) / 2
-  // console.log(width, width/1.6, window.innerHeight, top)
 
   return (
     <div className='absolute left-0 right-0 m-auto flex flex-col
@@ -23,7 +22,7 @@ export const Clip = ({ setClip, clip }) => {
         top,
       }}
     >
-      <div className='text-xl flex justify-center items-center bg-green-900 '>
+      <div className='text-xl flex justify-center items-center bg-green-500 '>
         <div className='text-gray-50'>
           {clip[1]}
         </div>
@@ -39,22 +38,3 @@ export const Clip = ({ setClip, clip }) => {
   )
 }
 
-const basicWorkflowTS = [
-  10, 'Sketching on a plane',
-  10, 'Extruding a sketch to a solid',
-  10, 'Sketch on a face of a solid',
-  10, 'Peforming boolean operation between solids',
-]
-
-const editWorkflowTS = [
-  10, 'opening a file from disk',
-  10, 'editing an existing sketch',
-  10, 'accepting the edit and exiting',
-]
-
-const exportTS = [
-  10, 'selecting a body for export',
-  10, 'initiate export',
-  10, 'loading exported stl into 3dprint slicer',
-  10, 'result',
-]
diff --git a/src/react/help.jsx b/src/react/help.jsx
index 9a67057..d20bc28 100644
--- a/src/react/help.jsx
+++ b/src/react/help.jsx
@@ -48,7 +48,7 @@ function reducer(state, action) {
     case 'drag':
       const dragLeft = state.dragLeft - action.move
 
-      if (dragLeft < 0 || dragLeft > state.rect * arr.length - 1) {
+      if (dragLeft < 0 || dragLeft > state.rect * (arr.length - 1)) {
         return state
       } else {
         return {
@@ -74,7 +74,7 @@ const transTime = 300
 const elastic = `transform ${transTime}ms cubic-bezier(0.4, 0.0, 0.2, 1)`;
 
 const arr = [
-  ['Sketch out your idea in a 2D outline.', 'sketch.png'],
+  ['Sketch out the 2D outline of your idea.', 'sketch.mp4'],
   ['Extrude the sketched shape into a 3D solid.', 'extrude.png'],
   ['Use additional sketches to sculpt or extend the model.', 'sculpt.gif'],
   ['Export your design to a 3D printer and turn into reality!', '3dprint.mp4'],
@@ -178,6 +178,7 @@ export const Help = ({ setModal, setQs }) => {
                         width: state.rect * 0.8,
                         height: state.rect * 0.8,
                       }}
+                      draggable='false'
                     ></img>
                 }
 
@@ -203,7 +204,7 @@ export const Help = ({ setModal, setQs }) => {
     </div>
 
     <div
-      className="cursor-pointer text-gray-50 bg-green-500 rounded p-1.5 inline-block hover:bg-green-600"
+      className="cursor-pointer text-gray-50 bg-green-500 rounded p-1.5 inline-block hover:bg-green-500"
       // style={{ 
       //   position:'absolute'
       //   bottom: 0.1 * state.rect}}
diff --git a/src/react/navBar.jsx b/src/react/navBar.jsx
index 956a471..cac6bc4 100644
--- a/src/react/navBar.jsx
+++ b/src/react/navBar.jsx
@@ -32,7 +32,6 @@ export const NavBar = () => {
   const modified = useSelector(state => state.ui.modified)
   const fileName = useSelector(state => state.ui.fileName)
   const mode = useSelector(state => state.ui.mode)
-  const help = useSelector(state => state.ui.help)
 
   const boolOp = (code) => {
     if (sce.selected.length != 2 || !sce.selected.every(e => e.userData.type == 'mesh')) {
@@ -190,7 +189,7 @@ export const NavBar = () => {
         ([Icon, fcn, txt], idx) => (
           Icon !== undefined ?
             <Icon className={`cursor-pointer fill-current w-auto h-full p-3.5
-            ${idx == buttonIdx[mode] ? 'bg-green-800' : 'hover:bg-gray-600 bg-transparent'}`} tooltip={txt}
+            ${idx == buttonIdx[mode] ? 'bg-green-500' : 'hover:bg-gray-600 bg-transparent'}`} tooltip={txt}
               onClick={fcn} key={idx}
             /> :
             <div className="w-12 h-full"></div>
@@ -200,7 +199,7 @@ export const NavBar = () => {
     <div className='w-auto h-full flex-1 justify-end flex-shrink-1 hidden md:flex'>
 
       <MdHelpOutline className={`cursor-pointer fill-current w-auto h-full p-3
-            ${modal ? 'bg-green-800' : 'hover:bg-gray-600 bg-transparent'}`} onClick={() => {
+            ${modal ? 'bg-green-500' : 'hover:bg-gray-600 bg-transparent'}`} onClick={() => {
         setModal(true)
       }
       } />
diff --git a/src/react/quickStart.jsx b/src/react/quickStart.jsx
index 51e8f7b..b12fe29 100644
--- a/src/react/quickStart.jsx
+++ b/src/react/quickStart.jsx
@@ -59,24 +59,14 @@ export const QuickStart = ({ setModal }) => {
   const dispatch = useDispatch()
 
   const [clip, setClip] = useState(null)
-  const [rect, setRect] = useState(Math.min(Math.min(window.innerHeight * 0.8, window.innerWidth * 0.7), 800))
 
-  const updateSize = () => {
-    setRect(Math.min(Math.min(window.innerHeight * 0.8, window.innerWidth * 0.7), 800))
-  }
-  useEffect(() => {
-    window.addEventListener('resize', updateSize)
-    return () => {
-      window.removeEventListener('resize', updateSize)
-    }
-  }, [])
 
   return <div className="absolute left-0 right-0 mx-auto bg-gray-700 flex flex-col items-center
   text-sm lg:text-base xl:text-lg text-gray-50"
     style={{
-      width: rect,
-      height: 1.1 * rect,
-      top: (window.innerHeight - 1.1 * rect) / 2,
+      width: 'min(800px, 70%)',
+      height: '90%' ,
+      top: 'calc(5% + 14px)' ,
     }}
   >
     <div className='w-full h-full bg-transparent overflow-y-auto overflow-x-hidden flex flex-col items-center'>
@@ -175,7 +165,7 @@ export const QuickStart = ({ setModal }) => {
       </div>
     </div>
 
-    <div className='absolute -top-7 w-full text-xl flex justify-center items-center bg-green-800'>
+    <div className='absolute -top-7 w-full text-xl flex justify-center items-center bg-green-500'>
       <div className='text-gray-50'>
         Quick Start
         </div>
diff --git a/src/shared.js b/src/shared.js
index 8cbaca7..09a6582 100644
--- a/src/shared.js
+++ b/src/shared.js
@@ -12,7 +12,8 @@ raycaster.params.Points.threshold = 1;
 
 
 const color = {
-  background: 0x18181B,
+  // background: 0x181818,
+  background: 0x404040,
   lighting: 0xFFFFFF,
   emissive: 0x072534,
   meshTempHover: 0x9DCFED,