diff --git a/packages/frontend/src/components/dialogs/BranchEditDialog.vue b/packages/frontend/src/components/dialogs/BranchEditDialog.vue
index 45260a8ef..824646ce0 100644
--- a/packages/frontend/src/components/dialogs/BranchEditDialog.vue
+++ b/packages/frontend/src/components/dialogs/BranchEditDialog.vue
@@ -14,7 +14,9 @@
         <v-spacer></v-spacer>
         <v-btn icon @click="show = false"><v-icon>mdi-close</v-icon></v-btn>
       </v-toolbar>
-
+      <v-alert v-show="error" dismissible type="error">
+        {{ error }}
+      </v-alert>
       <v-form ref="form" v-model="valid" lazy-validation @submit.prevent="agree">
         <v-card-text>
           <v-text-field
@@ -25,6 +27,10 @@
             required
             autofocus
           ></v-text-field>
+          <p class="caption">
+            Tip: you can create nested branches by using "/" as a separator in their names. E.g.,
+            "mep/stage-1" or "arch/sketch-design".
+          </p>
           <v-textarea v-model="branch.description" rows="2" label="Description"></v-textarea>
         </v-card-text>
         <v-card-actions>
@@ -79,7 +85,8 @@ export default {
       ],
       isEdit: false,
       pendingDelete: false,
-      allBranchNames: []
+      allBranchNames: [],
+      error: null
     }
   },
   apollo: {
@@ -125,6 +132,7 @@ export default {
   methods: {
     async deleteBranch() {
       this.loading = true
+      this.error = null
       this.$matomo && this.$matomo.trackPageView('branch/delete')
       try {
         await this.$apollo.mutate({
@@ -141,16 +149,18 @@ export default {
           }
         })
       } catch (e) {
-        console.log(e)
+        this.error = e.message
       }
 
       this.loading = false
-
-      this.resolve({
-        result: true,
-        deleted: true
-      })
-      this.dialog = false
+      this.showDelete = false
+      if (!this.error) {
+        this.resolve({
+          result: true,
+          deleted: true
+        })
+        this.dialog = false
+      }
     },
     open(branch) {
       this.dialog = true
diff --git a/packages/frontend/src/components/dialogs/BranchNewDialog.vue b/packages/frontend/src/components/dialogs/BranchNewDialog.vue
index 8a788c99a..b8ff26519 100644
--- a/packages/frontend/src/components/dialogs/BranchNewDialog.vue
+++ b/packages/frontend/src/components/dialogs/BranchNewDialog.vue
@@ -22,6 +22,10 @@
             required
             autofocus
           ></v-text-field>
+          <p class="caption">
+            Tip: you can create nested branches by using "/" as a separator in their names. E.g.,
+            "mep/stage-1" or "arch/sketch-design".
+          </p>
           <v-textarea v-model="description" rows="2" label="Description"></v-textarea>
         </v-card-text>
         <v-card-actions>
@@ -45,7 +49,7 @@ export default {
       reservedBranchNames: ['main', 'globals'],
       valid: false,
       loading: false,
-      name: null,
+      name: '',
       nameRules: [
         (v) => !!v || 'Branches need a name too!',
         (v) =>
diff --git a/packages/frontend/src/views/stream/Branch.vue b/packages/frontend/src/views/stream/Branch.vue
index 4a0f9df98..6a2d5d3f0 100644
--- a/packages/frontend/src/views/stream/Branch.vue
+++ b/packages/frontend/src/views/stream/Branch.vue
@@ -6,9 +6,9 @@
         <span class="space-grotesk" style="max-width: 80%">{{ stream.branch.name }}</span>
         <span class="caption ml-2 mb-2 pb-2">{{ stream.branch.description }}</span>
         <v-chip
+          v-tooltip="`Branch ${stream.branch.name} has ${stream.branch.commits.totalCount} commits`"
           class="ml-2 pl-2"
           small
-          v-tooltip="`Branch ${stream.branch.name} has ${stream.branch.commits.totalCount} commits`"
         >
           <v-icon small>mdi-source-commit</v-icon>
           {{ stream.branch.commits.totalCount }}
@@ -17,7 +17,6 @@
     </portal>
     <portal to="streamActionsBar">
       <v-btn
-        elevation="0"
         v-if="
           loggedInUserId &&
           stream &&
@@ -25,12 +24,13 @@
           stream.branch &&
           stream.branch.name !== 'main'
         "
+        v-tooltip="'Edit branch'"
+        elevation="0"
         color="primary"
         small
         rounded
         :fab="$vuetify.breakpoint.mdAndDown"
         dark
-        v-tooltip="'Edit branch'"
         @click="editBranch()"
       >
         <v-icon small :class="`${$vuetify.breakpoint.mdAndDown ? '' : 'mr-2'}`">mdi-pencil</v-icon>
@@ -44,11 +44,11 @@
       <v-col v-else-if="stream && stream.branch" cols="12" class="pa-0 ma-0">
         <branch-edit-dialog ref="editBranchDialog" />
 
-        <div style="height: 60vh" v-if="latestCommitObjectUrl">
+        <div v-if="latestCommitObjectUrl" style="height: 60vh">
           <renderer :object-url="latestCommitObjectUrl" show-selection-helper />
         </div>
 
-        <v-list class="pa-0 ma-0" v-if="stream.branch.commits.items.length > 0">
+        <v-list v-if="stream.branch.commits.items.length > 0" class="pa-0 ma-0">
           <list-item-commit
             :commit="latestCommit"
             :stream-id="streamId"
@@ -66,19 +66,18 @@
           ></list-item-commit>
 
           <!-- TODO: pagination -->
-
         </v-list>
       </v-col>
 
       <no-data-placeholder
         v-if="!$apollo.loading && stream.branch && stream.branch.commits.totalCount === 0"
       >
-        <h2 class="space-grotesk">Branch "{{stream.branch.name}}" has no commits.</h2>
+        <h2 class="space-grotesk">Branch "{{ stream.branch.name }}" has no commits.</h2>
       </no-data-placeholder>
     </v-row>
     <error-placeholder
-      error-type="404"
       v-if="!$apollo.loading && (error || stream.branch === null)"
+      error-type="404"
     >
       <h2>{{ error || `Branch "${$route.params.branchName}" does not exist.` }}</h2>
     </error-placeholder>
@@ -162,6 +161,10 @@ export default {
       else return null
     }
   },
+  mounted() {
+    if (this.$route.params.branchName === 'globals')
+      this.$router.push(`/streams/${this.$route.params.streamId}/globals`)
+  },
   methods: {
     editBranch() {
       this.$refs.editBranchDialog.open(this.stream.branch).then((dialog) => {
@@ -181,11 +184,6 @@ export default {
         }
       })
     }
-  },
-  mounted() {
-    console.log(this.$route.params)
-    if (this.$route.params.branchName === 'globals')
-      this.$router.push(`/streams/${this.$route.params.streamId}/globals`)
   }
 }
 </script>
diff --git a/packages/frontend/src/views/stream/Stream.vue b/packages/frontend/src/views/stream/Stream.vue
index 334efd162..37b7c15ce 100644
--- a/packages/frontend/src/views/stream/Stream.vue
+++ b/packages/frontend/src/views/stream/Stream.vue
@@ -106,7 +106,7 @@
       </v-card>
 
       <!-- Stream menu options -->
-      <v-list v-if="stream" style="padding-left: 10px" rounded dense class="mt-0 pt-0">
+      <v-list v-if="stream" style="padding-left: 10px" rounded dense class="mt-0 pt-0" expand>
         <v-list-item link :to="`/streams/${stream.id}`" class="no-overlay">
           <v-list-item-icon>
             <v-icon small>mdi-home</v-icon>
@@ -117,7 +117,6 @@
         </v-list-item>
 
         <!-- Branch menu group -->
-        <!-- TODO: group by "/", eg. dim/a, dim/b, dim/c should be under a sub-group called "dim". -->
         <v-list-group v-model="branchMenuOpen" class="my-2">
           <template #activator>
             <v-list-item-icon>
@@ -143,28 +142,77 @@
             </v-list-item-content>
           </v-list-item>
 
-          <v-list-item
-            v-for="(branch, i) in sortedBranches"
-            v-if="!$apollo.queries.branchQuery.loading"
-            :key="i"
-            link
-            :to="`/streams/${stream.id}/branches/${branch.name}`"
-          >
-            <v-list-item-icon>
-              <v-icon v-if="branch.name !== 'main'" small style="padding-top: 10px">
-                mdi-source-branch
-              </v-icon>
-              <v-icon v-else small style="padding-top: 10px" class="primary--text">mdi-star</v-icon>
-            </v-list-item-icon>
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ branch.name }} ({{ branch.commits.totalCount }})
-              </v-list-item-title>
-              <v-list-item-subtitle class="caption">
-                {{ branch.description ? branch.description : 'no description' }}
-              </v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
+          <!-- TODO -->
+          <div v-if="!$apollo.queries.branchQuery.loading">
+            <template v-for="(item, i) in groupedBranches">
+              <v-list-item
+                v-if="item.type === 'item'"
+                :key="i"
+                :to="`/streams/${stream.id}/branches/${item.name}`"
+                exact
+              >
+                <v-list-item-icon>
+                  <v-icon v-if="item.name !== 'main'" small style="padding-top: 10px">
+                    mdi-source-branch
+                  </v-icon>
+                  <v-icon v-else small style="padding-top: 10px" class="primary--text">
+                    mdi-star
+                  </v-icon>
+                </v-list-item-icon>
+                <v-list-item-content>
+                  <v-list-item-title>
+                    {{ item.displayName }} ({{ item.commits.totalCount }})
+                  </v-list-item-title>
+                  <v-list-item-subtitle class="caption">
+                    {{ item.description ? item.description : 'no description' }}
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+              <v-list-group
+                v-else
+                :key="i"
+                sub-group
+                :value="item.expand"
+                prepend-icon=""
+                :group="item.name"
+              >
+                <template #activator>
+                  <v-list-item style="overflow: visible">
+                    <v-list-item-icon style="position: relative; left: -26px">
+                      <v-icon style="padding-top: 10px">
+                        {{ item.expand ? 'mdi-chevron-down' : 'mdi-chevron-down' }}
+                      </v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-content style="position: relative; left: -8px">
+                      <v-list-item-title>{{ item.name }}</v-list-item-title>
+                      <v-list-item-subtitle class="caption">
+                        {{ item.children.length }} branches
+                      </v-list-item-subtitle>
+                    </v-list-item-content>
+                  </v-list-item>
+                </template>
+                <v-list-item
+                  v-for="(kid, j) in item.children"
+                  :key="j"
+                  :to="`/streams/${stream.id}/branches/${kid.name}`"
+                  exact
+                >
+                  <v-list-item-icon>
+                    <v-icon small style="padding-top: 10px">mdi-source-branch</v-icon>
+                  </v-list-item-icon>
+                  <v-list-item-content>
+                    <v-list-item-title>
+                      {{ kid.displayName }} ({{ kid.commits.totalCount }})
+                    </v-list-item-title>
+                    <v-list-item-subtitle class="caption">
+                      {{ kid.description ? kid.description : 'no description' }}
+                    </v-list-item-subtitle>
+                  </v-list-item-content>
+                </v-list-item>
+              </v-list-group>
+            </template>
+          </div>
+
           <v-skeleton-loader v-else type="list-item-two-line"></v-skeleton-loader>
           <v-divider class="mb-2"></v-divider>
         </v-list-group>
@@ -539,6 +587,10 @@ export default {
               items {
                 name
                 description
+                author {
+                  id
+                  name
+                }
                 commits {
                   totalCount
                 }
@@ -551,6 +603,10 @@ export default {
         return {
           id: this.$route.params.streamId
         }
+      },
+      update: (data) => {
+        // console.log(data.branchQuery.branches.items)
+        return data.branchQuery
       }
     },
     $subscribe: {
@@ -598,6 +654,43 @@ export default {
     }
   },
   computed: {
+    groupedBranches() {
+      if (!this.branchQuery) return
+      let branches = this.branchQuery.branches.items
+      let items = []
+      for (let b of branches) {
+        if (b.name === 'globals') continue
+        let parts = b.name.split('/')
+        if (parts.length === 1) {
+          items.push({ ...b, displayName: b.name, type: 'item', children: [] })
+        } else {
+          let existing = items.find((i) => i.name === parts[0] && i.type === 'group')
+          if (!existing) {
+            existing = { name: parts[0], type: 'group', children: [], expand: false }
+            items.push(existing)
+          }
+          existing.children.push({
+            ...b,
+            displayName: parts.slice(1).join('/'),
+            type: 'item'
+          })
+          if (this.$route.path.includes(b.name)) existing.expand = true
+        }
+      }
+      let sorted = items.sort((a, b) => {
+        const nameA = a.name.toLowerCase()
+        const nameB = b.name.toLowerCase()
+        if (nameA < nameB) return -1
+        if (nameA > nameB) return 1
+        return 0
+      })
+
+      return [
+        ...sorted.filter((it) => it.name === 'main'),
+        ...sorted.filter((it) => it.name !== 'main')
+      ]
+      // return items
+    },
     streamUrl() {
       return `${window.location.origin}/streams/${this.$route.params.streamId}`
     },
@@ -631,14 +724,20 @@ export default {
     }
   },
   watch: {
-    $route() {
+    $route(to) {
       // Ensures branch menu is open when navigating to a branch url
-      if (this.$route.name.toLowerCase().includes('branch') && !this.branchMenuOpen)
+      if (to.name.toLowerCase().includes('branch') && !this.branchMenuOpen)
         this.branchMenuOpen = true
       // closes any share dialog
       this.shareStream = false
       this.snackbar = false
     }
+    // branchMenuOpen(val) {
+    //   if (this.$route.name.toLowerCase().includes('branch') && !val)
+    //     this.$nextTick(() => {
+    //       this.branchMenuOpen = true
+    //     })
+    // }
   },
   mounted() {
     setTimeout(
diff --git a/packages/server/modules/core/graph/resolvers/branches.js b/packages/server/modules/core/graph/resolvers/branches.js
index ead662b44..f170f1699 100644
--- a/packages/server/modules/core/graph/resolvers/branches.js
+++ b/packages/server/modules/core/graph/resolvers/branches.js
@@ -41,7 +41,7 @@ module.exports = {
   Branch: {
 
     async author( parent, args, context, info ) {
-      if ( parent.userId )
+      if ( parent.authorId && context.auth )
         return await getUserById( { userId: parent.authorId } )
       else return null
     }