diff --git a/packages/frontend/package-lock.json b/packages/frontend/package-lock.json
index d76aad242..144ac4a73 100644
--- a/packages/frontend/package-lock.json
+++ b/packages/frontend/package-lock.json
@@ -1863,6 +1863,16 @@
       "integrity": "sha512-9GvTek+7cVw7r+L7TNGOG1astZJWXz2h5q4BqMXl28KN+24iSCm1xo+RhZOZvwdT3bzNe9hD7riJc/lBoO7mgg==",
       "dev": true
     },
+    "@speckle/viewer": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/@speckle/viewer/-/viewer-2.0.12.tgz",
+      "integrity": "sha512-R5NL2/ECacW4GFni/Cri2mUbwRPkSu5EaOybQL/Vhp1QdNPA2wwotAdfxGr84KzQV0+A1J0lypZchVafLUZpDg==",
+      "requires": {
+        "camera-controls": "^1.28.0",
+        "lodash.debounce": "^4.0.8",
+        "three": "0.124.0"
+      }
+    },
     "@types/accepts": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz",
@@ -4462,6 +4472,11 @@
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
       "dev": true
     },
+    "camera-controls": {
+      "version": "1.28.4",
+      "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-1.28.4.tgz",
+      "integrity": "sha512-Y5B5I0cnMwyZKbd6Chcr0hdSpY4B39jqFP/HXH3NqtL91JpPKy9tec+S7+OTpCPrQBIUMsBkQWloXwd9hIlB1Q=="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -13723,6 +13738,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "three": {
+      "version": "0.124.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.124.0.tgz",
+      "integrity": "sha512-ROXp1Ly7YyF+jC910DQyAWj++Qlw2lQv0qwYLNQwdDbjk4bsOXAfGO92wYTMPNei1GMJUmCxSxc3MjGBTS09Rg=="
+    },
     "throttle-debounce": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
diff --git a/packages/frontend/src/assets/api-tutorial.png b/packages/frontend/src/assets/api-tutorial.png
new file mode 100644
index 000000000..602eb3060
Binary files /dev/null and b/packages/frontend/src/assets/api-tutorial.png differ
diff --git a/packages/frontend/src/assets/app-tutorial.png b/packages/frontend/src/assets/app-tutorial.png
new file mode 100644
index 000000000..9ffca3801
Binary files /dev/null and b/packages/frontend/src/assets/app-tutorial.png differ
diff --git a/packages/frontend/src/assets/connector-tutorial.png b/packages/frontend/src/assets/connector-tutorial.png
new file mode 100644
index 000000000..c2521e318
Binary files /dev/null and b/packages/frontend/src/assets/connector-tutorial.png differ
diff --git a/packages/frontend/src/assets/gh-revit-tutorial.png b/packages/frontend/src/assets/gh-revit-tutorial.png
new file mode 100644
index 000000000..cfe4f225c
Binary files /dev/null and b/packages/frontend/src/assets/gh-revit-tutorial.png differ
diff --git a/packages/frontend/src/assets/onboarding_connectors.png b/packages/frontend/src/assets/onboarding_connectors.png
new file mode 100644
index 000000000..8bb773b02
Binary files /dev/null and b/packages/frontend/src/assets/onboarding_connectors.png differ
diff --git a/packages/frontend/src/assets/onboarding_connectors_dev.png b/packages/frontend/src/assets/onboarding_connectors_dev.png
new file mode 100644
index 000000000..0053babad
Binary files /dev/null and b/packages/frontend/src/assets/onboarding_connectors_dev.png differ
diff --git a/packages/frontend/src/assets/onboarding_streams.png b/packages/frontend/src/assets/onboarding_streams.png
new file mode 100644
index 000000000..28383c2bd
Binary files /dev/null and b/packages/frontend/src/assets/onboarding_streams.png differ
diff --git a/packages/frontend/src/assets/onboarding_workflow.png b/packages/frontend/src/assets/onboarding_workflow.png
new file mode 100644
index 000000000..c245750b2
Binary files /dev/null and b/packages/frontend/src/assets/onboarding_workflow.png differ
diff --git a/packages/frontend/src/assets/revit-gh-tutorial.png b/packages/frontend/src/assets/revit-gh-tutorial.png
new file mode 100644
index 000000000..ce3c426d1
Binary files /dev/null and b/packages/frontend/src/assets/revit-gh-tutorial.png differ
diff --git a/packages/frontend/src/assets/rhino-revit-tutorial.png b/packages/frontend/src/assets/rhino-revit-tutorial.png
new file mode 100644
index 000000000..6159df508
Binary files /dev/null and b/packages/frontend/src/assets/rhino-revit-tutorial.png differ
diff --git a/packages/frontend/src/assets/tutorials.png b/packages/frontend/src/assets/tutorials.png
new file mode 100644
index 000000000..664433899
Binary files /dev/null and b/packages/frontend/src/assets/tutorials.png differ
diff --git a/packages/frontend/src/assets/viewer-tutorial.png b/packages/frontend/src/assets/viewer-tutorial.png
new file mode 100644
index 000000000..f1e1e5c79
Binary files /dev/null and b/packages/frontend/src/assets/viewer-tutorial.png differ
diff --git a/packages/frontend/src/components/GettingStartedSteps.vue b/packages/frontend/src/components/GettingStartedSteps.vue
index d19dd3f0e..2572fe425 100644
--- a/packages/frontend/src/components/GettingStartedSteps.vue
+++ b/packages/frontend/src/components/GettingStartedSteps.vue
@@ -1,142 +1,319 @@
 <template>
   <div>
     <v-card class="elevation-10 rounded-lg">
-      <v-img class="white--text align-end" height="200px" src="@/assets/onboardingsplash.png">
-        <v-card-title class="">Speckle Onboarding {{ onboarding + 1 }} / 4</v-card-title>
-      </v-img>
-      <v-window v-model="onboarding" class="py-3">
+      <v-btn
+        v-if="onboarding < 3"
+        small
+        text
+        class="white--grey"
+        style="position: absolute; top: 5px; right: 5px; z-index: 1002"
+        @click="skip"
+      >
+        Skip
+      </v-btn>
+
+      <v-window v-model="onboarding" class="pb-3">
         <v-window-item>
-          <v-card class="transparent elevation-0" color="transparent">
-            <v-card-title>Welcome!</v-card-title>
-            <v-card-text class="body-1">
+          <v-card class="transparent elevation-0 text-center" color="transparent">
+            <v-img
+              class="white--text align-end mb-3"
+              height="200px"
+              src="@/assets/onboardingsplash.png"
+            ></v-img>
+            <v-card-title class="display-1 justify-center mb-5">
+              👋 Welcome to Speckle!
+            </v-card-title>
+            <v-card-subtitle class="subtitle-1 justify-center mb-5">
+              The Open Data Infrastructure for the Built Environment.
+            </v-card-subtitle>
+            <v-card-text class="body-1 text--primary">
               <p>
-                Next, we will guide you through setting up Speckle on your computer. If you've done
-                this before, feel free to skip this wizard!
+                Engineers, designers, hackers and entire organizations rely on us for
+                interoperability, automation and collaboration to deliver better buildings, faster.
+                <br />
+                Please select your role:
               </p>
-              <p>The next steps in a nutshell:</p>
-              <ul>
-                <li>Installing the Speckle Manager</li>
-                <li>Setting up your account</li>
-                <li>Creating your first stream</li>
-              </ul>
             </v-card-text>
-            <v-card-actions class="justify-center">
-              <v-btn block color="primary" @click="next">
-                Let's go
-                <v-icon>mdi-chevron-right</v-icon>
-              </v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-window-item>
-        <v-window-item>
-          <v-card class="transparent elevation-0" color="transparent">
-            <v-card-title>Speckle Manager Installation</v-card-title>
-            <v-card-text class="body-1">
-              <p>
-                Speckle Manager is a desktop application that handles accounts and connectors
-                (Rhino, Revit, etc.) on your machine. Once you have downloaded Speckle Manager, go
-                ahead and install it. Once you're done, go to the next step!
-              </p>
-              <p>Note: Currently, we only support Windows.</p>
-              <v-btn
-                block
-                :x-large="!hasClickedDownload"
-                elevation="10"
-                class="mb-4"
-                :color="hasClickedDownload ? '' : 'primary'"
-                @click="downloadManager"
-              >
-                <v-icon small class="mr-4">mdi-download</v-icon>
-                Download Speckle Manager (WIN)
-              </v-btn>
-              <p>If you already have installed Speckle Manager, proceed to the next step.</p>
-            </v-card-text>
-            <v-card-actions class="justify-center">
-              <v-btn block :color="hasClickedDownload ? 'primary' : ''" @click="next">
-                Next Step: Accounts
-                <v-icon>mdi-chevron-right</v-icon>
-              </v-btn>
-            </v-card-actions>
+            <v-container fluid>
+              <v-row dense>
+                <v-col cols="5" offset="1">
+                  <v-hover>
+                    <v-card
+                      slot-scope="{ hover }"
+                      height="100%"
+                      :class="`pa-5 elevation-${hover ? 10 : 10}`"
+                      @click="nextUser"
+                    >
+                      <h1>👷‍♀️</h1>
+                      <v-card-title class="justify-center">AEC Person</v-card-title>
+                      <v-card-subtitle class="justify-center">
+                        Architect, engineer, BIM/project manager...
+                      </v-card-subtitle>
+                    </v-card>
+                  </v-hover>
+                </v-col>
+                <v-col cols="5" offset="0">
+                  <v-hover>
+                    <v-card
+                      slot-scope="{ hover }"
+                      height="100%"
+                      :class="`pa-5 elevation-${hover ? 10 : 10}`"
+                      @click="nextDev"
+                    >
+                      <h1>👩‍💻</h1>
+                      <v-card-title class="justify-center">AEC Developer</v-card-title>
+                      <v-card-subtitle class="justify-center">
+                        Software engineer, computational designer, hacker
+                      </v-card-subtitle>
+                    </v-card>
+                  </v-hover>
+                </v-col>
+              </v-row>
+            </v-container>
+            <p class="my-7"><strong>Let us give you a quick tour! 🙋‍♂️</strong></p>
           </v-card>
         </v-window-item>
 
-        <v-window-item>
-          <v-card class="transparent elevation-0" color="transparent">
-            <v-card-title>Account Linking</v-card-title>
-            <v-card-text class="body-1">
+        <v-window-item v-if="isDev">
+          <v-card class="transparent elevation-0 text-center" color="transparent">
+            <v-img
+              class="white--text align-end mb-3"
+              height="200px"
+              src="@/assets/onboarding_connectors_dev.png"
+            ></v-img>
+            <v-card-title class="display-1 justify-center mb-5">🧰 Our toolkit</v-card-title>
+            <v-card-subtitle class="subtitle-1 justify-center mb-5">
+              From AEC developers, for AEC developers
+            </v-card-subtitle>
+            <v-card-text class="body-1 text--primary">
               <p>
-                In order to use the desktop connectors with Speckle, you need to add this account to
-                the Speckle Manager. Click the button below to do so. NOTE: You need to have Speckle
-                Manager installed first!
+                Use our
+                <b>connectors, SDKs, APIs and tools</b>
+                to get in control of
+                <i>your data.</i>
               </p>
               <p>
-                The authentication process will open several annoying windows, but at the end of the
-                process your account should be safely stored on your computer - and usable from
-                within all the connectors.
+                Whether you are
+                <b>writing new integrations, custom workflows or creating brand new apps</b>
+                on top of Speckle, our toolkit is here to take care of the low level stuff, so that
+                you can focus on the fun bits.
+              </p>
+              <p>
+                From user permission management, data extraction or 3d model online visualization,
+                we've got you covered!
               </p>
-              <v-btn
-                block
-                :x-large="hasClickedAddAccount === 0"
-                class="mb-4"
-                elevation="10"
-                :color="hasClickedAddAccount !== 0 ? '' : 'primary'"
-                @click="addAccount"
-              >
-                <v-icon small class="mr-4">mdi-account-plus</v-icon>
-                Add Account Speckle Manager
-              </v-btn>
             </v-card-text>
-            <v-alert type="info" color="blue" text class="mx-4" v-show="hasClickedAddAccount >= 2">
-              Having trouble adding your account to the Speckle Manager? Read a
-              <a
-                _target="_blank"
-                href="http://speckle.guide/user/FAQs.html#i-cannot-add-an-account-in-speckle-manager"
-              >
-                quick help article on this
-              </a>
-              !
-            </v-alert>
-            <v-card-actions class="justify-center">
-              <v-btn block :color="hasClickedAddAccount !== 0 ? 'primary' : ''" @click="next">
-                Your first stream
-                <v-icon>mdi-chevron-right</v-icon>
-              </v-btn>
-            </v-card-actions>
           </v-card>
         </v-window-item>
 
-        <v-window-item>
-          <v-card class="transparent elevation-0" color="transparent">
-            <v-card-title>Your First Stream</v-card-title>
-            <v-card-text class="body-1">
+        <v-window-item v-else>
+          <v-card class="transparent elevation-0 text-center" color="transparent">
+            <v-img
+              class="white--text align-end mb-3"
+              height="200px"
+              src="@/assets/onboarding_connectors.png"
+            ></v-img>
+            <v-card-title class="display-1 justify-center mb-5">🔌 Connectors</v-card-title>
+            <v-card-subtitle class="subtitle-1 justify-center mb-5">
+              Say goodbye to files!
+            </v-card-subtitle>
+            <v-card-text class="body-1 text--primary">
+              <p></p>
               <p>
-                Streams are the primary way Speckle organizes data. You can see them as a file, a
-                part of a file, or a repository. Ultimately, a stream is simply a collection of
-                objects with some helpful additional information to manage and retrieve them.
+                <b>Connectors</b>
+                are plugins for design and analysis software, they let you
+                <b>exchange</b>
+                geometry and BIM data dirctly from the tools you use.
               </p>
               <p>
-                A stream also lets you manage permissions: it has a list of collaborators including
-                an owner and additional reviewers and contributors which the owner has chosen to
-                share the stream with.
+                Install our connectors and you'll instantly be able to
+                <b>share your models and data</b>
+                with others or
+                <b>access it from the web,</b>
+                or
+                <b>load it into other supported software</b>
+                .
               </p>
-              <v-btn block depressed color="primary" class="mb-2" @click="newStreamDialog = true">
-                Create Your First Stream
-              </v-btn>
             </v-card-text>
           </v-card>
         </v-window-item>
+
+        <v-window-item v-if="isDev">
+          <v-card class="transparent elevation-0 text-center" color="transparent">
+            <v-img
+              class="white--text align-end mb-3"
+              height="200px"
+              src="@/assets/onboarding_streams.png"
+            ></v-img>
+            <v-card-title class="display-1 justify-center mb-5">
+              🐙 Git & DevOps for AEC
+            </v-card-title>
+            <v-card-subtitle class="subtitle-1 justify-center mb-5">
+              Welcome to the future of the AEC industry!
+            </v-card-subtitle>
+            <v-card-text class="body-1 text--primary">
+              <p>
+                Speckle ships with a
+                <b>version control system,</b>
+                we're bringing the tech industry best practices to AEC. You'll soon also be able to
+                <b>trigger custom workflows and pipelines</b>
+                directly from Speckle!
+              </p>
+              <p>
+                Also, Speckle talks
+                <i>data, not files!</i>
+                <br />
+                Store it where you want, and access it when you need 🔓
+              </p>
+            </v-card-text>
+          </v-card>
+        </v-window-item>
+        <v-window-item v-else>
+          <v-card class="transparent elevation-0 text-center" color="transparent">
+            <v-img
+              class="white--text align-end mb-3"
+              height="200px"
+              src="@/assets/onboarding_streams.png"
+            ></v-img>
+            <v-card-title class="display-1 justify-center mb-5">🌊 Streams</v-card-title>
+            <v-card-subtitle class="subtitle-1 justify-center mb-5">
+              A new way of working together
+            </v-card-subtitle>
+            <v-card-text class="body-1 text--primary">
+              <p>
+                <b>Streams</b>
+                are collections of data inside Speckle. You can see a stream as a folder, a project
+                or a repository.
+              </p>
+              <p>
+                Data in a stream is stored in
+                <b>commits,</b>
+                which are snapshots of data in time. Every time you send to Speckle from a
+                connector, a commit is created.
+              </p>
+              <p>
+                Commits can also be organized in
+                <b>branches,</b>
+                for instace, to have multiple design options or to store data by discipline. The
+                dafault branch is called
+                <i>main</i>
+                .
+              </p>
+            </v-card-text>
+          </v-card>
+        </v-window-item>
+        <v-window-item v-if="isDev">
+          <v-card class="transparent elevation-0 text-center" color="transparent">
+            <v-card-title class="display-1 justify-center my-5">🏃‍♀️ Start Hacking!</v-card-title>
+            <v-card-subtitle class="subtitle-1 justify-center mb-5">
+              Time to make the most of
+              <b>your</b>
+              data!
+            </v-card-subtitle>
+            <v-card-text class="body-1 text--primary">
+              <p>
+                You can now start developing with Speckle and create your connectors, apps or custom
+                workflows.
+              </p>
+              <p>We have put together a series of resources that you might find useful:</p>
+            </v-card-text>
+            <v-container fluid>
+              <v-row dense>
+                <v-col v-for="(tutorial, i) in tutorialsDev" :key="i" cols="6">
+                  <v-hover>
+                    <v-card
+                      slot-scope="{ hover }"
+                      :class="`elevation-${hover ? 10 : 0}`"
+                      :href="tutorial.link"
+                      target="_blank"
+                    >
+                      <v-img
+                        class="white--text align-end"
+                        height="150"
+                        gradient="to bottom, rgba(36,100,235,.2), rgba(36,100,235,.7)"
+                        :src="require('@/assets/' + tutorial.image)"
+                      >
+                        <v-card-title class="justify-center">
+                          {{ tutorial.title }}
+                        </v-card-title>
+                      </v-img>
+                    </v-card>
+                  </v-hover>
+                </v-col>
+              </v-row>
+            </v-container>
+
+            <v-btn elevation="10" class="my-4" rounded color="primary" @click="finish">
+              <!-- <v-icon small class="mr-4">mdi-download</v-icon> -->
+              Finish & go to the web app
+            </v-btn>
+          </v-card>
+        </v-window-item>
+        <v-window-item v-else>
+          <v-card class="transparent elevation-0 text-center" color="transparent">
+            <v-card-title class="display-1 justify-center my-5">🏃‍♀️ Get Started!</v-card-title>
+            <v-card-subtitle class="subtitle-1 justify-center mb-5">
+              Time to make the most of
+              <b>your</b>
+              data!
+            </v-card-subtitle>
+            <v-card-text class="body-1 text--primary">
+              <p>
+                You can now start creating your own workflows for automation, interoperaility or
+                collaboration using Speckle!
+              </p>
+              <p>We have put together a series of tutorials that you might find useful:</p>
+            </v-card-text>
+            <v-container fluid>
+              <v-row dense>
+                <v-col v-for="(tutorial, i) in tutorials" :key="i" cols="6">
+                  <v-hover>
+                    <v-card
+                      slot-scope="{ hover }"
+                      :class="`elevation-${hover ? 10 : 0}`"
+                      :href="tutorial.link"
+                      target="_blank"
+                    >
+                      <v-img
+                        class="white--text align-end"
+                        height="150"
+                        gradient="to bottom, rgba(36,100,235,.2), rgba(36,100,235,.7)"
+                        :src="require('@/assets/' + tutorial.image)"
+                      >
+                        <v-card-title class="justify-center">
+                          {{ tutorial.title }}
+                        </v-card-title>
+                      </v-img>
+                    </v-card>
+                  </v-hover>
+                </v-col>
+              </v-row>
+            </v-container>
+
+            <v-btn elevation="10" class="my-4" rounded color="primary" @click="finish">
+              <!-- <v-icon small class="mr-4">mdi-download</v-icon> -->
+              Finish & go to the web app
+            </v-btn>
+          </v-card>
+        </v-window-item>
       </v-window>
+      <v-card-actions v-if="onboarding > 0" class="justify-space-between pb-7">
+        <v-btn text @click="prev">
+          <v-icon>mdi-chevron-left</v-icon>
+        </v-btn>
+        <v-item-group v-model="onboarding" class="text-center" mandatory>
+          <v-item v-for="n in length" :key="`btn-${n}`" v-slot="{ active, toggle }">
+            <v-btn :input-value="active" icon @click="toggle">
+              <v-icon small>mdi-record</v-icon>
+            </v-btn>
+          </v-item>
+        </v-item-group>
+        <v-btn :disabled="onboarding == 3" text @click="next">
+          <v-icon>mdi-chevron-right</v-icon>
+        </v-btn>
+      </v-card-actions>
     </v-card>
-    <div class="text-center py-4">
-      <v-btn v-show="onboarding !== 0" small text color="grey" @click="prev">
-        <v-icon small>mdi-chevron-left</v-icon>
-      </v-btn>
-      <v-btn small text @click="skip">
-        Skip Onboarding
-        <v-icon small style="opacity: 0.5" class="ml-1">mdi-fast-forward</v-icon>
-        <!-- <v-icon small>mdi-chevron-right</v-icon> -->
-      </v-btn>
-    </div>
+
     <v-dialog v-model="newStreamDialog" max-width="500">
       <stream-new-dialog @created="finish" />
     </v-dialog>
@@ -148,17 +325,58 @@ import StreamNewDialog from '../components/dialogs/StreamNewDialog'
 export default {
   components: { StreamNewDialog },
   data: () => ({
-    length: 3,
+    length: 4,
     onboarding: 0,
     newStreamDialog: false,
     hasClickedDownload: false,
-    hasClickedAddAccount: 0
+    hasClickedAddAccount: 0,
+    isDev: false,
+    tutorials: [
+      {
+        title: 'Create Revit models from Rhino',
+        image: 'rhino-revit-tutorial.png',
+        link: 'https://speckle.guide/user/interop-rhino-revit.html'
+      },
+      {
+        title: 'View 3d models online',
+        image: 'viewer-tutorial.png',
+        link: 'https://speckle.guide/user/web.html#_3d-viewer'
+      },
+      {
+        title: 'Analyse Revit models in Grasshopper',
+        image: 'revit-gh-tutorial.png',
+        link: 'https://speckle.guide/user/interop-revit-gh.html'
+      },
+      {
+        title: 'See more in our tutorials portal!',
+        image: 'tutorials.png',
+        link: 'https://speckle.guide/user/tutorials.html'
+      }
+    ],
+    tutorialsDev: [
+      {
+        title: 'Writing your own connector',
+        image: 'connector-tutorial.png',
+        link: 'https://speckle.guide/dev/connectors-dev.html'
+      },
+      {
+        title: 'Writing your own app',
+        image: 'app-tutorial.png',
+        link: 'https://speckle.guide/dev/apps.html'
+      },
+      {
+        title: 'Using the GraphQL API',
+        image: 'api-tutorial.png',
+        link: 'https://speckle.guide/dev/server-graphql-api.html'
+      },
+      {
+        title: 'See more content and resources in our dev docs!',
+        image: 'tutorials.png',
+        link: 'https://speckle.guide/dev/'
+      }
+    ]
   }),
-  computed: {
-    rootUrl() {
-      return window.location.origin
-    }
-  },
+  computed: {},
   mounted() {
     this.$matomo && this.$matomo.trackEvent('onboarding', 'start')
   },
@@ -171,6 +389,7 @@ export default {
     finish() {
       this.$matomo && this.$matomo.trackPageView(`onboarding/done`)
       localStorage.setItem('onboarding', 'complete')
+      this.$router.push('/')
     },
     prev() {
       this.onboarding--
@@ -180,17 +399,13 @@ export default {
       this.onboarding++
       this.$matomo && this.$matomo.trackPageView(`onboarding/step-${this.onboarding}`)
     },
-    downloadManager() {
-      this.hasClickedDownload = true
-      this.$matomo && this.$matomo.trackPageView(`onboarding/managerdownload`)
-      this.$matomo && this.$matomo.trackEvent('onboarding', 'managerdownload')
-      window.open('https://releases.speckle.dev/manager/SpeckleManager%20Setup.exe', '_blank')
+    nextUser() {
+      this.isDev = false
+      this.next()
     },
-    addAccount() {
-      this.hasClickedAddAccount++
-      this.$matomo && this.$matomo.trackPageView(`onboarding/accountadd`)
-      this.$matomo && this.$matomo.trackEvent('onboarding', 'accountadd')
-      window.open(`speckle://accounts?add_server_account=${this.rootUrl}`, '_blank')
+    nextDev() {
+      this.isDev = true
+      this.next()
     }
   }
 }
diff --git a/packages/frontend/src/views/Streams.vue b/packages/frontend/src/views/Streams.vue
index 5246aad14..0c4630bfc 100644
--- a/packages/frontend/src/views/Streams.vue
+++ b/packages/frontend/src/views/Streams.vue
@@ -83,48 +83,178 @@
         </v-card>
       </v-col>
       <v-col cols="12" sm="12" md="8" lg="9" xl="10">
-        <div v-if="!$apollo.loading && streams.totalCount === 0" class="pa-4">
-          <no-data-placeholder
-            :message="`Hello there! It seems like you don't have any streams yet. Here's a handful of useful links to help you get started:`"
-          />
-        </div>
-        <v-card v-if="user && user.streams.totalCount > 0" class="my-5" flat>
-          <v-card-text class="body-1">
-            <span>
-              You have
-              <v-icon small>mdi-compare-vertical</v-icon>
-              <b>{{ user.streams.totalCount }}</b>
-              streams and
-              <v-icon small>mdi-source-commit</v-icon>
-              <b>{{ user.commits.totalCount }}</b>
-              commits.
-            </span>
-          </v-card-text>
-        </v-card>
-        <v-card elevation="0" color="transparent">
-          <div v-if="$apollo.loading" class="my-5">
-            <v-skeleton-loader type="list-item-three-line"></v-skeleton-loader>
-          </div>
-        </v-card>
-        <v-row v-if="streams && streams.items">
-          <v-col
-            v-for="(stream, i) in streams.items"
-            :key="i"
-            cols="12"
-            sm="12"
-            md="12"
-            lg="6"
-            xl="4"
-          >
-            <list-item-stream :stream="stream"></list-item-stream>
+        <v-row>
+          <v-col v-if="$apollo.loading">
+            <v-card elevation="0" color="transparent">
+              <div v-if="$apollo.loading" class="my-5">
+                <v-skeleton-loader type="list-item-three-line"></v-skeleton-loader>
+              </div>
+            </v-card>
+          </v-col>
+
+          <v-col v-else-if="streams && streams.items && streams.items.length > 0">
+            <!-- <div v-if="!$apollo.loading && streams.totalCount === 0" class="pa-4">
+              <no-data-placeholder
+                :message="`Hello there! It seems like you don't have any streams yet. Here's a handful of useful links to help you get started:`"
+              />
+            </div> -->
+            <v-card v-if="user" class="my-5" flat>
+              <v-card-text class="body-1">
+                <span>
+                  You have
+                  <v-icon small>mdi-compare-vertical</v-icon>
+                  <b>{{ user.streams.totalCount }}</b>
+                  streams and
+                  <v-icon small>mdi-source-commit</v-icon>
+                  <b>{{ user.commits.totalCount }}</b>
+                  commits.
+                </span>
+              </v-card-text>
+            </v-card>
+
+            <v-row>
+              <v-col
+                v-for="(stream, i) in streams.items"
+                :key="i"
+                cols="12"
+                sm="12"
+                md="12"
+                lg="6"
+                xl="4"
+              >
+                <list-item-stream :stream="stream"></list-item-stream>
+              </v-col>
+              <infinite-loading
+                v-if="streams.items.length < streams.totalCount"
+                @infinite="infiniteHandler"
+              >
+                <div slot="no-more">These are all your streams!</div>
+                <div slot="no-results">There are no streams to load</div>
+              </infinite-loading>
+            </v-row>
+          </v-col>
+          <v-col v-if="quickstart > 0">
+            <div v-if="quickstart === 1" class="ma-5 headline">
+              Hello 👋
+              <br />
+              It seems you're new here, let's get you set up:
+            </div>
+            <v-stepper
+              v-model="quickstart"
+              flat
+              shaped
+              vertical
+              class="rounded-lg quickstart-stepper mt-5"
+            >
+              <v-stepper-step :complete="quickstart > 1" step="1">
+                Create your first stream
+              </v-stepper-step>
+
+              <v-stepper-content step="1" class="body-2">
+                <p>
+                  Streams are the
+                  <b>primary way Speckle organizes data</b>
+                  . You can see them as a folder, a project or a repository.
+                </p>
+                <p>
+                  Streams
+                  <b>can be shared with others</b>
+                  and can be made publicly visible on the web. Only the owner of a stream can manage
+                  its permissions and visibility.
+                </p>
+                <p>
+                  In order to use Speckle you first need to create a stream, so
+                  <b>go ahead and create your first one</b>
+                  !
+                </p>
+              </v-stepper-content>
+
+              <v-stepper-step :complete="quickstart > 2" step="2">
+                Install Speckle Manager
+              </v-stepper-step>
+
+              <v-stepper-content step="2" class="body-2">
+                <p>
+                  Speckle Manager is a free
+                  <b>desktop application</b>
+                  that lets you install connectors for some of the most popular design and analysis
+                  software.
+                </p>
+                <p>
+                  The connectors
+                  <b>exchange</b>
+                  geometry and BIM data with Speckle, so that you can access it wherever you want!
+                </p>
+                <v-btn elevation="10" class="my-5" rounded color="primary" @click="downloadManager">
+                  <v-icon small class="mr-4">mdi-download</v-icon>
+                  Download Manager
+                </v-btn>
+              </v-stepper-content>
+
+              <v-stepper-step :complete="quickstart > 3" step="3">
+                Set up Speckle Manager
+              </v-stepper-step>
+
+              <v-stepper-content step="3">
+                <p>
+                  With Speckle Manager installed,
+                  <b>log into your account</b>
+                  and then
+                  <b>install the connectors</b>
+                  for the software that you use.
+                </p>
+                <p>
+                  <v-btn
+                    elevation="10"
+                    rounded
+                    color="primary"
+                    target="_blank"
+                    @click="refreshApplications"
+                  >
+                    Done
+                  </v-btn>
+                </p>
+
+                <p v-if="refreshFailied" class="red--text caption">
+                  Please install Manager and log into your account to continue.
+                </p>
+
+                <p class="caption">Having issues logging in Manager? Try with the button below:</p>
+                <v-btn small text rounded color="primary" @click="addAccount">
+                  <v-icon small class="mr-4">mdi-account-plus</v-icon>
+                  Add account to manager
+                </v-btn>
+              </v-stepper-content>
+
+              <v-stepper-step step="4">Send data to Speckle</v-stepper-step>
+              <v-stepper-content step="4">
+                <p>Great progress 🥳!</p>
+                <p>
+                  We're almost done here, and just need to send your first set of data to Speckle.
+                  By doing so you will also be creating your first
+                  <b>commit.</b>
+                </p>
+                <p>
+                  Commits are
+                  <b>snapshots or versions of your data in time.</b>
+                  Every time you send to Speckle, a new commit is created for you.
+                </p>
+                <p>Send data to Speckle now by using one of our connetors!</p>
+                <p>
+                  <v-btn
+                    elevation="10"
+                    class="my-5"
+                    rounded
+                    color="primary"
+                    href="https://speckle.guide/user/connectors.html"
+                    target="_blank"
+                  >
+                    How to use connectors
+                  </v-btn>
+                </p>
+              </v-stepper-content>
+            </v-stepper>
           </v-col>
-          <infinite-loading
-            v-if="streams.items.length < streams.totalCount"
-            @infinite="infiniteHandler"
-          >
-            <div slot="no-more">These are all your streams!</div>
-            <div slot="no-results">There are no streams to load</div>
-          </infinite-loading>
         </v-row>
       </v-col>
     </v-row>
@@ -133,7 +263,6 @@
 <script>
 import ListItemStream from '../components/ListItemStream'
 import StreamNewDialog from '../components/dialogs/StreamNewDialog'
-import NoDataPlaceholder from '../components/NoDataPlaceholder'
 import UserAvatar from '../components/UserAvatar'
 import streamsQuery from '../graphql/streams.gql'
 import userQuery from '../graphql/user.gql'
@@ -148,7 +277,6 @@ export default {
     StreamNewDialog,
     InfiniteLoading,
     UserAvatar,
-    NoDataPlaceholder,
     ServerInviteDialog
   },
   apollo: {
@@ -190,13 +318,42 @@ export default {
           return !this.loggedIn
         }
       }
+    },
+    authorizedApps: {
+      query: gql`
+        query {
+          user {
+            id
+            authorizedApps {
+              id
+            }
+          }
+        }
+      `,
+      update: (data) => data.user.authorizedApps
     }
   },
   data: () => ({
     streams: [],
-    newStreamDialog: false
+    newStreamDialog: false,
+    hasClickedDownload: false,
+    refreshFailied: false
   }),
   computed: {
+    quickstart() {
+      if (!this.user) return 0
+      if (this.streams.totalCount === 0) return 1
+      if (this.streams.totalCount > 0 && !this.hasManager && !this.hasClickedDownload) return 2
+      if (this.streams.totalCount > 0 && !this.hasManager && this.hasClickedDownload) return 3
+      if (this.hasManager && this.user.commits.totalCount === 0) return 4
+      if (this.user.commits.totalCount > 0) return 0
+
+      return 0
+    },
+    hasManager() {
+      if (!this.authorizedApps) return false
+      return this.authorizedApps.findIndex((a) => a.id === 'sdm') !== -1
+    },
     recentActivity() {
       let activity = []
 
@@ -216,6 +373,9 @@ export default {
     },
     loggedIn() {
       return localStorage.getItem('uuid') !== null
+    },
+    rootUrl() {
+      return window.location.origin
     }
   },
   watch: {
@@ -226,6 +386,23 @@ export default {
     }
   },
   methods: {
+    downloadManager() {
+      this.hasClickedDownload = true
+      this.$matomo && this.$matomo.trackPageView(`onboarding/managerdownload`)
+      this.$matomo && this.$matomo.trackEvent('onboarding', 'managerdownload')
+      window.open('https://releases.speckle.dev/manager/SpeckleManager%20Setup.exe', '_blank')
+    },
+    addAccount() {
+      this.$matomo && this.$matomo.trackPageView(`onboarding/accountadd`)
+      this.$matomo && this.$matomo.trackEvent('onboarding', 'accountadd')
+      window.open(`speckle://accounts?add_server_account=${this.rootUrl}`, '_blank')
+    },
+    async refreshApplications() {
+      await this.$apollo.queries.authorizedApps.refetch()
+      if (!this.hasManager) {
+        this.refreshFailied = true
+      } else this.refreshFailied = false
+    },
     infiniteHandler($state) {
       this.$apollo.queries.streams.fetchMore({
         variables: {
@@ -277,3 +454,8 @@ export default {
   text-decoration: underline;
 }
 </style>
+<style scoped>
+.quickstart-stepper {
+  box-shadow: none !important;
+}
+</style>