diff --git a/app/Enums/GroupTypeEnum.php b/app/Enums/GroupTypeEnum.php
index 1dbc319..6bf2219 100644
--- a/app/Enums/GroupTypeEnum.php
+++ b/app/Enums/GroupTypeEnum.php
@@ -6,6 +6,7 @@ enum GroupTypeEnum: string
 {
     case Default = 'none';
     case Department = 'department';
+    case Team = 'team';
     case Automated = 'automated';
 
 }
diff --git a/app/Http/Controllers/Staff/GroupMemberController.php b/app/Http/Controllers/Staff/GroupMemberController.php
index f9cb16a..dd3cade 100644
--- a/app/Http/Controllers/Staff/GroupMemberController.php
+++ b/app/Http/Controllers/Staff/GroupMemberController.php
@@ -18,14 +18,23 @@ class GroupMemberController extends Controller
     public function index(Group $group, Request $request)
     {
         return Inertia::render('Staff/Groups/Tabs/MemberTab', [
-            'group' => $group->loadCount('users')->only(['hashid', 'name', 'users_count']),
+            'group' => $group->loadCount('users')->only(['hashid', 'name', 'users_count','parent_id']),
+            'parent' => $group->parent?->only(['hashid', 'name']),
             // Sort Owner, Admin, Moderator, Member and then by name
-            'users' => $group->users()->withPivot('level')->get(['id', 'name', 'profile_photo_path'])->map(fn($user
+            'users' => $group->users()
+                ->with([
+                    'groups' => fn($q) => $q->where('type', 'team')->where('parent_id', $group->id)->get(['id', 'name'])
+                ])
+                ->withPivot('level')->get(['id', 'name', 'profile_photo_path'])->map(fn($user
             ) => [
                 'id' => $user->hashid,
                 'name' => $user->name,
                 'profile_photo_path' => (is_null($user->profile_photo_path)) ? null : Storage::drive('s3-avatars')->url($user->profile_photo_path),
                 'level' => $user->pivot->level,
+                'teams' => $user->groups->map(fn($group) => [
+                    'id' => $group->hashid,
+                    'name' => $group->name,
+                ]),
                 'title' => $user->pivot->title,
             ])->sortBy(fn($user) => [
                 $user['level'] === 'owner' ? 0 : 1,
@@ -33,7 +42,7 @@ public function index(Group $group, Request $request)
                 $user['level'] === 'moderator' ? 2 : 3,
                 $user['name']
             ]),
-            'canEdit' => $group->isAdmin($request->user())
+            'canEdit' => $request->user()->can('update', $group),
         ]);
     }
 
@@ -61,10 +70,14 @@ public function store(Group $group, Request $request)
         }
         // If user is already in the department throw validationexception
         if ($group->users->contains($user)) {
-            throw ValidationException::withMessages([$field => 'User is already in the department']);
+            throw ValidationException::withMessages([$field => 'User is already in the group']);
         }
         // Attach user to department
         $group->users()->attach($user, ['level' => GroupUserLevel::Member]);
+        // If group has a parent, add them to the parent group
+        if ($group->parent && !$group->parent->users->contains($user)) {
+            $group->parent->users()->syncWithoutDetaching([$user->id => ['level' => GroupUserLevel::Member]]);
+        }
         return redirect()->route('staff.groups.members.index', $group);
     }
 
@@ -83,7 +96,8 @@ public function edit(Group $group, User $member)
      */
     public function update(Group $group, User $member, Request $request)
     {
-        if ($member->id == $request->user()->id) {
+        $isAdminOfParentGroup = $group->parent?->isAdmin($request->user());
+        if ($member->id == $request->user()->id && !$isAdminOfParentGroup) {
             throw ValidationException::withMessages(["You cannot update your own level."]);
         }
 
@@ -106,12 +120,16 @@ public function update(Group $group, User $member, Request $request)
      */
     public function destroy(Group $group, User $member, Request $request)
     {
-        if ($member->id === $request->user()->id) {
+        if ($member->id === $request->user()->id && !$group->parent?->isAdmin($request->user())) {
             throw ValidationException::withMessages(["You cannot remove yourself."]);
         }
 
         $requestMember = $group->users()->find($member)->pivot;
         $this->authorize('delete', $requestMember);
         $group->users()->detach($member);
+        // If group has children, remove them from the children
+        if ($group->children()->exists()) {
+            $group->children->each(fn($child) => $child->users()->detach($member));
+        }
     }
 }
diff --git a/app/Http/Controllers/Staff/GroupTeamController.php b/app/Http/Controllers/Staff/GroupTeamController.php
new file mode 100644
index 0000000..d2b243e
--- /dev/null
+++ b/app/Http/Controllers/Staff/GroupTeamController.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Http\Controllers\Staff;
+
+use App\Enums\GroupTypeEnum;
+use App\Http\Controllers\Controller;
+use App\Models\Group;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Gate;
+use Inertia\Inertia;
+
+class GroupTeamController extends Controller
+{
+    public function index(Group $group, Request $request)
+    {
+        Gate::authorize('view', $group);
+        $myDepartments = $request->user()->groups()
+            ->where('type', GroupTypeEnum::Department)->select('id', 'level')->get()
+            ->mapWithKeys(fn($role) => [$role->id => ucwords($role->level)]);
+        return Inertia::render('Staff/Groups/Tabs/TeamTab', [
+            'group' => $group->loadCount('users')->only(['hashid', 'name', 'users_count','parent_id']),
+            'parent' => $group->parent?->only(['hashid', 'name']),
+            'teams' => $group->children()
+                ->where('type', GroupTypeEnum::Team)
+                ->withCount('users')
+                ->get(['hashid', 'name', 'users_count']),
+            'myGroups' => $myDepartments->values(),
+            'canEdit' => $group->isAdmin($request->user())
+        ]);
+    }
+
+    public function store(Group $group, Request $request)
+    {
+        Gate::authorize('update', $group);
+        $validated = $request->validate([
+            'name' => 'required|string|max:255',
+        ]);
+        $group->children()->create([
+            'name' => $validated['name'],
+            'type' => GroupTypeEnum::Team,
+        ]);
+        return redirect()->back();
+    }
+}
diff --git a/app/Http/Controllers/Staff/GroupsController.php b/app/Http/Controllers/Staff/GroupsController.php
index bfa3bbd..4dfa77d 100644
--- a/app/Http/Controllers/Staff/GroupsController.php
+++ b/app/Http/Controllers/Staff/GroupsController.php
@@ -29,7 +29,7 @@ public function index(Request $request)
         ]);
 
         return Inertia::render('Staff/Groups/GroupsIndex', [
-            'groups' => $departmentsSortedByMembershipAndUserCount,
+            'groups' => $departmentsSortedByMembershipAndUserCount->values(),
             'myGroups' => $myDepartments,
         ]);
     }
@@ -39,9 +39,12 @@ public function show(Group $group, Request $request)
         $Parsedown = new Parsedown();
         $Parsedown->setSafeMode(true);
         return Inertia::render('Staff/Groups/Tabs/GroupInfoTab', [
-            'group' => $group->loadCount('users')->only(['hashid', 'description', 'name', 'users_count']),
+            'group' => $group
+                ->loadCount('users')
+                ->only(['hashid', 'name', 'users_count', 'description','parent_id']),
+            'parent' => $group->parent?->only(['hashid', 'name']),
             'descriptionHtml' => $Parsedown->parse($group->description),
-            'canEdit' => $group->isAdmin($request->user()),
+            'canEdit' => $request->user()->can('update', $group),
         ]);
     }
 
@@ -58,4 +61,13 @@ public function update(GroupUpdateRequest $request, Group $group)
         ]);
         return redirect()->back();
     }
+
+    public function destroy(Group $group)
+    {
+        Gate::authorize('delete', $group);
+        $parent = $group->parent;
+        $group->delete();
+        return redirect()->route('staff.groups.show', $parent);
+
+    }
 }
diff --git a/app/Models/Group.php b/app/Models/Group.php
index 90a4d2c..ca5686f 100644
--- a/app/Models/Group.php
+++ b/app/Models/Group.php
@@ -102,4 +102,14 @@ public function isAdmin(User $user)
         }
         return $member->pivot->level == GroupUserLevel::Admin || $member->pivot->level == GroupUserLevel::Owner;
     }
+
+    public function children()
+    {
+        return $this->hasMany(__CLASS__, 'parent_id');
+    }
+
+    public function parent()
+    {
+        return $this->belongsTo(__CLASS__, 'parent_id');
+    }
 }
diff --git a/app/Observers/GroupObserver.php b/app/Observers/GroupObserver.php
index 6a28294..a2d26d5 100644
--- a/app/Observers/GroupObserver.php
+++ b/app/Observers/GroupObserver.php
@@ -2,6 +2,7 @@
 
 namespace App\Observers;
 
+use App\Enums\GroupTypeEnum;
 use App\Enums\GroupUserLevel;
 use App\Models\Group;
 use App\Services\NextcloudService;
@@ -11,6 +12,14 @@ class GroupObserver
 {
     public function created(Group $group)
     {
+        if ($group->type === GroupTypeEnum::Team && $group->parent->nextcloud_folder_id) {
+            NextcloudService::createGroup($group->hashid);
+            // Parent->name / Group->name
+            NextcloudService::setDisplayName($group->hashid, $group->parent->name.' / '.$group->name);
+            // Add to parent group folder
+            NextcloudService::addGroupToFolder($group->parent->nextcloud_folder_id, $group->hashid);
+            return;
+        }
         if (Auth::user()) {
             $group->users()->attach(Auth::user(), [
                 "level" => GroupUserLevel::Owner
@@ -43,5 +52,15 @@ public function updated(Group $group): void
             // Update the display name of the group
             NextcloudService::setDisplayName($group->hashid, $group->name);
         }
+
+        // Team update nextcloud dipslay name
+        if ($group->type === GroupTypeEnum::Team && $group->isDirty('name') && $group->parent->nextcloud_folder_id) {
+            NextcloudService::setDisplayName($group->hashid, $group->parent->name.' / '.$group->name);
+        }
+    }
+
+    public function deleted(Group $group)
+    {
+        NextcloudService::deleteGroup($group->hashid);
     }
 }
diff --git a/app/Observers/GroupUserObserver.php b/app/Observers/GroupUserObserver.php
index b77e252..433d760 100644
--- a/app/Observers/GroupUserObserver.php
+++ b/app/Observers/GroupUserObserver.php
@@ -15,10 +15,10 @@ public function created(GroupUser $groupUser): void
         if ($groupUser->group->type === GroupTypeEnum::Department) {
             CheckStaffGroupMembershipJob::dispatch($groupUser->user);
         }
-        if ($groupUser->group->nextcloud_folder_name && !app()->runningUnitTests()) {
+        if (($groupUser->group->nextcloud_folder_name || $groupUser->group->parent?->nextcloud_folder_name) && !app()->runningUnitTests()) {
             NextcloudService::addUserToGroup($groupUser->group, $groupUser->user);
             $allowAclManagement = in_array($groupUser->level, [GroupUserLevel::Admin, GroupUserLevel::Owner]);
-            if ($allowAclManagement) {
+            if ($allowAclManagement && $groupUser->group->type !== GroupTypeEnum::Team) {
                 NextcloudService::setManageAcl($groupUser->group, $groupUser->user, $allowAclManagement);
             }
         }
@@ -26,7 +26,7 @@ public function created(GroupUser $groupUser): void
 
     public function updated(GroupUser $groupUser): void
     {
-        if ($groupUser->group->nextcloud_folder_nam && !app()->runningUnitTests()) {
+        if ($groupUser->group->nextcloud_folder_name && !app()->runningUnitTests()) {
             if ($groupUser->isDirty('level')) {
                 $allowAclManagement = in_array($groupUser->level, [GroupUserLevel::Admin, GroupUserLevel::Owner]);
                 NextcloudService::setManageAcl($groupUser->group, $groupUser->user, $allowAclManagement);
@@ -41,15 +41,9 @@ public function deleted(GroupUser $groupUser): void
         }
         if ($groupUser->group->nextcloud_folder_name && !app()->runningUnitTests()) {
             NextcloudService::removeUserFromGroup($groupUser->group, $groupUser->user);
-            NextcloudService::setManageAcl($groupUser->group, $groupUser->user, false);
+            if ($groupUser->group->type !== GroupTypeEnum::Team) {
+                NextcloudService::setManageAcl($groupUser->group, $groupUser->user, false);
+            }
         }
     }
-
-    public function restored(GroupUser $groupUser): void
-    {
-    }
-
-    public function forceDeleted(GroupUser $groupUser): void
-    {
-    }
 }
diff --git a/app/Policies/GroupPolicy.php b/app/Policies/GroupPolicy.php
index ee78a0a..a6db896 100644
--- a/app/Policies/GroupPolicy.php
+++ b/app/Policies/GroupPolicy.php
@@ -35,7 +35,7 @@ public function viewAny(User $user): bool
     public function view(User $user, Group $group): Response
     {
         $inGroup = $user->inGroup($group->id);
-        $staffException = $group->type === GroupTypeEnum::Department && $user->isStaff();
+        $staffException = ($group->type === GroupTypeEnum::Department || $group->type === GroupTypeEnum::Team) && $user->isStaff();
         $userPermission = $user->scopeCheck('groups.read');
 
         if ($inGroup || $staffException) {
@@ -61,12 +61,20 @@ public function update(User $user, Group $group): bool
             ->whereGroupId($group->id)
             ->where(fn($q) => $q->whereLevel(GroupUserLevel::Admin)->orWhere('level', GroupUserLevel::Owner))
             ->exists();
-        return ((Auth::guard("admin")->check() && $user->can('admin.groups.update')) || ($userAdminInGroup && $user->scopeCheck('groups.update')));
+        $userAdminInParentGroup = GroupUser::whereUserId($user->id)
+            ->whereGroupId($group->parent_id)
+            ->where(fn($q) => $q->whereLevel(GroupUserLevel::Admin)->orWhere('level', GroupUserLevel::Owner))
+            ->exists();
+        return ((Auth::guard("admin")->check() && $user->can('admin.groups.update')) || (($userAdminInGroup || $userAdminInParentGroup) && $user->scopeCheck('groups.update')));
     }
 
     public function delete(User $user, Group $group): bool
     {
+        if($group->type !== GroupTypeEnum::Team) {
+            return false;
+        }
         $userOwnerInGroup = GroupUser::whereUserId($user->id)->whereGroupId($group->id)->whereLevel(GroupUserLevel::Owner)->exists();
-        return ((Auth::guard("admin")->check() && $user->can('admin.groups.delete')) || ($userOwnerInGroup && $user->scopeCheck('groups.delete')));
+        $userOwnerInParentGroup = GroupUser::whereUserId($user->id)->whereGroupId($group->parent_id)->whereLevel(GroupUserLevel::Owner)->exists();
+        return ((Auth::guard("admin")->check() && $user->can('admin.groups.delete')) || (($userOwnerInGroup || $userOwnerInParentGroup) && $user->scopeCheck('groups.delete')));
     }
 }
diff --git a/app/Policies/GroupUserPolicy.php b/app/Policies/GroupUserPolicy.php
index fd34af7..c42c95a 100644
--- a/app/Policies/GroupUserPolicy.php
+++ b/app/Policies/GroupUserPolicy.php
@@ -19,12 +19,12 @@ public function view(User $user, GroupUser $groupUser): bool
 
     public function update(User $user, GroupUser $groupUserInitiator): bool
     {
-        return $user->scopeCheck('groups.update') && $groupUserInitiator->isAdmin();
+        return $user->scopeCheck('groups.update') && ($groupUserInitiator->isAdmin() || $groupUserInitiator->group->parent?->isAdmin($user));
     }
 
     public function create(User $user, GroupUser $groupUserInitiator): bool
     {
-        return $user->scopeCheck('groups.update') && $groupUserInitiator->isAdmin();
+        return $user->scopeCheck('groups.update') && ($groupUserInitiator->isAdmin() || $groupUserInitiator->group->parent?->isAdmin($user));
     }
 
     public function delete(User $user, GroupUser $groupUser): Response
@@ -40,6 +40,12 @@ public function delete(User $user, GroupUser $groupUser): Response
         if ($groupUser->group->isAdmin($user)) {
             return Response::allow();
         }
+
+        // check if user is admin of parent group
+        if ($groupUser->group->parent && $groupUser->group->parent->isAdmin($user)) {
+            return Response::allow();
+        }
+
         return Response::deny('Insufficient permissions, you cannot delete users.');
     }
 }
diff --git a/app/Services/NextcloudService.php b/app/Services/NextcloudService.php
index 76af548..7635ce2 100644
--- a/app/Services/NextcloudService.php
+++ b/app/Services/NextcloudService.php
@@ -16,6 +16,12 @@ public static function createGroup($groupId)
         return $groupId;
     }
 
+    // delete group
+    public static function deleteGroup($groupId)
+    {
+        Http::nextcloud()->delete("/ocs/v1.php/cloud/groups/{$groupId}")->throw();
+    }
+
     public static function setDisplayName($groupId, $displayName)
     {
         Http::nextcloud()->put("https://cloud.eurofurence.org/ocs/v2.php/cloud/groups/{$groupId}", [
@@ -41,11 +47,10 @@ public static function addUserToGroup(Group $group, User $user)
         // Check user
         if (!self::checkUserExists($user->hashid)) {
             self::createUser($user); // Create user also adds groups so we don't need to add them here
-        } else {
-            Http::nextcloud()->post("ocs/v2.php/cloud/users/{$user->hashid}/groups", [
-                "groupid" => $group->hashid,
-            ])->throw();
         }
+        Http::nextcloud()->post("ocs/v2.php/cloud/users/{$user->hashid}/groups", [
+            "groupid" => $group->hashid,
+        ])->throw();
     }
 
     public static function removeUserFromGroup(Group $group, User $user)
@@ -108,6 +113,14 @@ public static function createFolder(string $folderName, string $groupId): int
         return (int) $xml->data->id;
     }
 
+    // add group to folder
+    public static function addGroupToFolder($folderId, $groupId)
+    {
+        Http::nextcloud()->post("apps/groupfolders/folders/{$folderId}/groups", [
+            "group" => $groupId,
+        ])->throw();
+    }
+
     public static function renameFolder(int $folderId, string $folderName): void
     {
         Http::nextcloud()->post("apps/groupfolders/folders/{$folderId}/mountpoint", [
diff --git a/database/migrations/2024_08_14_000454_add_parent_id_to_groups_table.php b/database/migrations/2024_08_14_000454_add_parent_id_to_groups_table.php
new file mode 100644
index 0000000..66c8e48
--- /dev/null
+++ b/database/migrations/2024_08_14_000454_add_parent_id_to_groups_table.php
@@ -0,0 +1,15 @@
+<?php
+
+use App\Models\Group;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::table('groups', function (Blueprint $table) {
+            $table->foreignIdFor(Group::class, 'parent_id')->after('id')->nullable()->constrained('groups')->cascadeOnDelete();
+        });
+    }
+};
diff --git a/resources/js/Components/GroupListItem.vue b/resources/js/Components/GroupListItem.vue
new file mode 100644
index 0000000..8a7c806
--- /dev/null
+++ b/resources/js/Components/GroupListItem.vue
@@ -0,0 +1,59 @@
+<template>
+    <li
+        @click="handleClick"
+        class="relative flex items-center space-x-4 px-4 py-4 sm:px-6 lg:px-8 cursor-pointer hover:bg-gray-50 duration-200"
+    >
+        <div class="min-w-0 flex-auto">
+            <div class="flex items-center gap-x-3">
+                <h2 class="min-w-0 font-semibold leading-6">
+                    <Link :href="groupLink" class="flex">
+                        <span class="truncate">{{ department.name }}</span>
+                    </Link>
+                </h2>
+            </div>
+            <div class="mt-3 flex items-center gap-x-2.5 text-xs leading-5 text-gray-400">
+                <p class="truncate">{{ department.users_count }} Members</p>
+            </div>
+        </div>
+        <Link :href="groupLink" class="flex items-center">
+            <div
+                v-if="myGroupLabel"
+                class="rounded-full flex-none py-1 px-2 mr-5 text-xs font-medium ring-1 ring-inset"
+            >
+                {{ myGroupLabel }}
+            </div>
+            <ChevronRightIcon class="h-5 w-5 flex-none text-gray-400" aria-hidden="true" />
+        </Link>
+    </li>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import {Link, router} from '@inertiajs/vue3';
+import ChevronRightIcon from "./Icons/ChevronRightIcon.vue";
+
+const props = defineProps({
+    department: {
+        type: Object,
+        required: true,
+    },
+    myGroups: {
+        type: Object,
+        required: true,
+    },
+});
+
+const groupLink = computed(() =>
+    route('staff.groups.show', { group: props.department.hashid })
+);
+
+const handleClick = () => {
+    router.visit(groupLink.value);
+};
+
+const myGroupLabel = computed(() => props.myGroups[props.department.id]);
+</script>
+
+<style scoped>
+/* Add any necessary styles here */
+</style>
diff --git a/resources/js/Components/Staff/SiteHeader.vue b/resources/js/Components/Staff/SiteHeader.vue
index 6371654..242cd21 100644
--- a/resources/js/Components/Staff/SiteHeader.vue
+++ b/resources/js/Components/Staff/SiteHeader.vue
@@ -8,7 +8,9 @@ const props = defineProps({
 <template>
     <div class="border-b border-b-gray-200 border-solid px-6 py-6 flex flex-col lg:flex-row justify-between items-start gap-4">
         <div>
-            <h1 class="font-semibold text-xl">{{ title }}</h1>
+            <h1 class="font-semibold text-xl">
+                <slot name="title">{{title}}</slot>
+            </h1>
             <p v-if="subtitle">{{subtitle}}</p>
         </div>
         <div>
diff --git a/resources/js/Pages/Staff/Groups/GroupsIndex.vue b/resources/js/Pages/Staff/Groups/GroupsIndex.vue
index a138440..87f7028 100644
--- a/resources/js/Pages/Staff/Groups/GroupsIndex.vue
+++ b/resources/js/Pages/Staff/Groups/GroupsIndex.vue
@@ -1,53 +1,31 @@
 <script setup>
-import AppLayout from '../../../Layouts/AppLayout.vue'
-import SiteHeader from '../../../Components/Staff/SiteHeader.vue'
-import ChevronRightIcon from '../../../Components/Icons/ChevronRightIcon.vue'
-import {Link, router} from '@inertiajs/vue3'
+import AppLayout from '../../../Layouts/AppLayout.vue';
+import SiteHeader from '../../../Components/Staff/SiteHeader.vue';
+import GroupListItem from "../../../Components/GroupListItem.vue";
+
+defineOptions({ layout: AppLayout });
 
-defineOptions({layout: AppLayout})
 const props = defineProps({
     groups: Array,
-    myGroups: Array,
-})
-
+    myGroups: Object,
+});
 </script>
 
 <template>
-    <SiteHeader class="mb-4" title="Departments"></SiteHeader>
-    <!-- Department list -->
-    <ul role="list" class="divide-y divide-gray-900/5">
-        <li v-for="department in groups" :key="department.id"
-            @click="router.visit(route('staff.groups.show',{group: department.hashid}))"
-            class="relative flex items-center space-x-4 px-4 py-4 sm:px-6 lg:px-8 cursor-pointer hover:bg-gray-50 duration-200">
-            <div class="min-w-0 flex-auto">
-                <div class="flex items-center gap-x-3">
-                    <h2 class="min-w-0 font-semibold leading-6">
-                        <Link :href="route('staff.groups.show',{group: department.hashid})" class="flex">
-                            <span class="truncate">{{ department.name }}</span>
-                        </Link>
-                    </h2>
-                </div>
-                <div class="mt-3 flex items-center gap-x-2.5 text-xs leading-5 text-gray-400">
-                    <p class="truncate">{{ department.users_count }} Members</p>
+    <SiteHeader class="mb-4" title="Departments" />
 
-                    <!--<svg viewBox="0 0 2 2" class="h-0.5 w-0.5 flex-none fill-gray-300">
-                            <circle cx="1" cy="1" r="1"/>
-                        </svg>
-                        <p class="whitespace-nowrap">Lead by xxx</p> -->
-                </div>
-            </div>
-            <Link :href="route('staff.groups.show',{group: department.hashid})" class="flex items-center ">
-                <div
-                    v-if="myGroups[department.id]"
-                    class="rounded-full flex-none py-1 px-2 mr-5 text-xs font-medium ring-1 ring-inset">
-                    {{ myGroups[department.id] }}
-                </div>
-                <ChevronRightIcon class="h-5 w-5 flex-none text-gray-400" aria-hidden="true"/>
-            </Link>
-        </li>
+    <!-- Department list -->
+    <ul role="list" class="divide-y divide-gray-900/5" v-if="groups.length">
+        <GroupListItem
+            v-for="department in groups"
+            :key="department.id"
+            :department="department"
+            :myGroups="myGroups"
+        />
     </ul>
+    <!-- No Team created info message -->
+    <div v-else class="flex items-center justify-center h-96">
+        <p class="text-gray-400">No departments created yet.</p>
+    </div>
 </template>
 
-<style scoped>
-
-</style>
diff --git a/resources/js/Pages/Staff/Groups/Tabs/GroupInfoTab.vue b/resources/js/Pages/Staff/Groups/Tabs/GroupInfoTab.vue
index 6b32169..7e648b9 100644
--- a/resources/js/Pages/Staff/Groups/Tabs/GroupInfoTab.vue
+++ b/resources/js/Pages/Staff/Groups/Tabs/GroupInfoTab.vue
@@ -13,13 +13,17 @@ import "md-editor-v3/lib/style.css";
 defineOptions({layout: AppLayout})
 const props = defineProps({
     group: Object,
+    parent: {
+        type: Object,
+        required: false
+    },
     users: Array,
     canEdit: Boolean,
     descriptionHtml: String,
 })
 
 const form = useForm('patch', route('staff.groups.update', {group: props.group.hashid}), {
-    description: props.group.description,
+    description: props.group.description ?? '',
 })
 
 const submit = () => form.submit({
@@ -40,6 +44,7 @@ const showDescriptionLabel = computed(() => {
 
 <template>
     <TabHeader
+        :parent="parent"
         :group="group"
         subtitle="Info"
         :can-edit="canEdit"
diff --git a/resources/js/Pages/Staff/Groups/Tabs/MemberTab.vue b/resources/js/Pages/Staff/Groups/Tabs/MemberTab.vue
index 67b59c1..3b82098 100644
--- a/resources/js/Pages/Staff/Groups/Tabs/MemberTab.vue
+++ b/resources/js/Pages/Staff/Groups/Tabs/MemberTab.vue
@@ -7,7 +7,7 @@ import Button from 'primevue/button'
 import TabComponent from "./TabComponent.vue";
 import TabHeader from "./TabHeader.vue";
 import {useToast} from "primevue/usetoast";
-
+import Tag from "primevue/tag"
 
 const deleteModal = ref({
     visible: false,
@@ -44,6 +44,10 @@ function deleteUser() {
 defineOptions({layout: AppLayout})
 const props = defineProps({
     group: Object,
+    parent: {
+        type: Object,
+        required: false
+    },
     users: Array,
     canEdit: Boolean,
 })
@@ -55,6 +59,7 @@ const form = useForm({})
 <template>
     <div>
         <TabHeader
+            :parent="parent"
             :group="group"
             subtitle="Members"
             :can-edit="canEdit"
@@ -67,9 +72,16 @@ const form = useForm({})
                     <div class="flex justify-between items-center align-items-center">
                         <div>
                             <div class="text-lg font-semibold">{{ user.name }}</div>
-                            <div class="text-sm text-gray-600">{{ user.level }}</div>
+                            <div class="text-sm text-gray-600 flex">
+                                <div class="w-16">
+                                    {{ user.level }}
+                                </div>
+                                <div>
+                                    <Tag v-for="team in user.teams" severity="secondary">{{ team.name }}</Tag>
+                                </div>
+                            </div>
                         </div>
-                        <div class="flex gap-2" v-if="canEdit && user.id !== attrs.user.id">
+                        <div class="flex gap-2" v-if="canEdit && (user.id !== attrs.user.id || parent !== null)">
                             <Button
                                 @click="router.visit(route('staff.groups.members.edit', {group: group.hashid, member: user.id}))"
                                 severity="secondary"
@@ -91,7 +103,7 @@ const form = useForm({})
         </ul>
 
         <!-- Delete modal -->
-        <Dialog v-model:visible="deleteModal.visible" modal header="Remove user from department"
+        <Dialog v-model:visible="deleteModal.visible" modal header="Remove user from group"
                 :style="{ width: '25rem' }">
                                 <span class="p-text-secondary block mb-5">Really remove {{
                                         deleteModal.user.name
diff --git a/resources/js/Pages/Staff/Groups/Tabs/TabComponent.vue b/resources/js/Pages/Staff/Groups/Tabs/TabComponent.vue
index 500e54e..6e622c8 100644
--- a/resources/js/Pages/Staff/Groups/Tabs/TabComponent.vue
+++ b/resources/js/Pages/Staff/Groups/Tabs/TabComponent.vue
@@ -1,6 +1,7 @@
 <script setup>
 import TabMenu from "primevue/tabmenu";
 import {router} from "@inertiajs/vue3";
+import {computed} from "vue";
 
 const props = defineProps({
     activeIndex: {
@@ -12,10 +13,18 @@ const props = defineProps({
         required: true
     }
 });
-const tabMenuItems = [
+const tabMenuItemsSource = [
     {label: 'Info', icon: 'pi pi-box', command: () => router.visit(route('staff.groups.show', {group: props.group.hashid}))},
     {label: 'Members', icon: 'pi pi-users', command: () => router.visit(route('staff.groups.members.index', {group: props.group.hashid}))},
+    {label: 'Teams', icon: 'pi pi-th-large', command: () => router.visit(route('staff.groups.teams.index', {group: props.group.hashid}))},
 ];
+
+const tabMenuItems = computed(() => {
+    if (props.group.parent_id === null) {
+        return tabMenuItemsSource;
+    }
+    return tabMenuItemsSource.filter(item => item.label !== 'Teams');
+});
 </script>
 
 <template>
diff --git a/resources/js/Pages/Staff/Groups/Tabs/TabHeader.vue b/resources/js/Pages/Staff/Groups/Tabs/TabHeader.vue
index 61c6076..ee7aed2 100644
--- a/resources/js/Pages/Staff/Groups/Tabs/TabHeader.vue
+++ b/resources/js/Pages/Staff/Groups/Tabs/TabHeader.vue
@@ -4,29 +4,31 @@ import SiteHeader from "../../../../Components/Staff/SiteHeader.vue";
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
 import InputText from "primevue/inputtext";
-import {Head, usePage} from "@inertiajs/vue3";
+import {Head, Link, usePage} from "@inertiajs/vue3";
 import Dialog from 'primevue/dialog';
 import {ref, watch} from "vue";
 import SelectButton from 'primevue/selectbutton';
 import {useForm} from "laravel-precognition-vue-inertia";
 import {useToast} from "primevue/usetoast";
 
-
 const props = defineProps({
     group: Object,
+    parent: Object,
     canEdit: Boolean,
     subtitle: String,
 })
 const showAddMemberDialog = ref(false);
+const showAddTeamDialog = ref(false);
+const confirmDeleteTeamDialog = ref(false);
 const toast = useToast();
 
-function submit() {
+function submitUserForm() {
     if (addVia.value === 'Staff List') {
-        form.email = '';
+        addUserForm.email = '';
     } else {
-        form.user_id = '';
+        addUserForm.user_id = '';
     }
-    form.submit({
+    addUserForm.submit({
         preserveScroll: true,
         onSuccess: () => {
             showAddMemberDialog.value = false;
@@ -34,24 +36,40 @@ function submit() {
         }
     });
 }
+
+function submitTeamForm() {
+    addTeamForm.submit({
+        preserveScroll: true,
+        onSuccess: () => {
+            showAddTeamDialog.value = false;
+            addTeamForm.reset();
+            toast.add({severity: 'success', summary: 'Success', detail: 'Team added to department'});
+        }
+    });
+}
+
 const staffMemberList = usePage().props.staffMemberList;
 
-const form = useForm('POST',route('staff.groups.members.store',{group: props.group.hashid}), {
+const addUserForm = useForm('POST',route('staff.groups.members.store',{group: props.group.hashid}), {
     user_id: '',
     email: '',
 })
 
-// watch showAddMemberDialog if closed, reset form
+const addTeamForm = useForm('POST',route('staff.groups.teams.store',{group: props.group.hashid}), {
+    name: '',
+})
+
+// watch showAddMemberDialog if closed, reset addUserForm
 watch(showAddMemberDialog, (value) => {
     if (!value) {
-        form.reset();
+        addUserForm.reset();
     }
 })
 
 // If email is selected, reset user_id
-watch(() => form.email, (value) => {
+watch(() => addUserForm.email, (value) => {
     if (value) {
-        form.user_id = '';
+        addUserForm.user_id = '';
     }
 })
 const addVia = ref('Staff List');
@@ -64,6 +82,11 @@ const options = ref(['Staff List', 'Email']);
         :title="group.name"
         :subtitle="subtitle"
     >
+        <template #title>
+            <h1 class="font-semibold text-xl flex items-center">
+                <Link as="span" :href="route('staff.groups.show', {'group': parent.hashid})" v-if="parent" class="cursor-pointer">{{ parent.name }}</Link><span class="px-2 text-2xl" v-if="parent">/</span>{{ group.name }}
+            </h1>
+        </template>
         <!-- Template Action -->
         <template v-slot:action v-if="canEdit">
             <div class="flex gap-2">
@@ -71,40 +94,87 @@ const options = ref(['Staff List', 'Email']);
                     size="small"
                     @click="showAddMemberDialog = true">Add User
                 </Button>
+                <Button
+                    v-if="group.parent_id === null"
+                    size="small"
+                    outlined
+                    @click="showAddTeamDialog = true">Add Team
+                </Button>
+                <Button
+                    v-if="group.parent_id !== null"
+                    size="small"
+                    severity="danger"
+                    outlined
+                    @click="confirmDeleteTeamDialog = true">Delete Team
+                </Button>
             </div>
         </template>
     </SiteHeader>
+    <!-- Add Member Dialog -->
     <Dialog v-model:visible="showAddMemberDialog" modal class="max-w-md" header="Add Member">
-        <form @submit.prevent="submit" class="space-y-3">
+        <form @submit.prevent="submitUserForm" class="space-y-3">
             <p>You can add existing <strong>Staff Members</strong> via the Dropdown to this Group. Non-Staff Members need to be added using the E-Mail.</p>
             <SelectButton class="w-full grid grid-cols-2" v-model="addVia" :unselectable="false" :options="options" aria-labelledby="basic" />
             <!-- Dropdown -->
             <div v-if="staffMemberList.length && addVia === 'Staff List'">
                 <label for="user_id">Staff Member</label>
                 <Dropdown
-                    v-model="form.user_id"
+                    v-model="addUserForm.user_id"
                     :options="staffMemberList"
                     optionLabel="name"
                     optionValue="id"
                     :virtualScrollerOptions="{ itemSize: 38 }"
                     placeholder="Select a Staff Member"
                     filter
-                    :invalid="form.errors.user_id"
+                    :invalid="addUserForm.errors.user_id"
                     class="w-full"/>
-                <small class="text-red-500" v-if="form.errors.user_id">{{ form.errors.user_id }}</small>
+                <small class="text-red-500" v-if="addUserForm.errors.user_id">{{ addUserForm.errors.user_id }}</small>
             </div>
             <!-- E-Mail -->
             <div v-if="addVia === 'Email'">
                 <label for="email">E-Mail</label>
-                <InputText :invalid="form.errors.email" v-model="form.email" type="email" id="email" class="w-full"/>
-                <small class="text-red-500" v-if="form.errors.email">{{ form.errors.email }}</small>
+                <InputText :invalid="addUserForm.errors.email" v-model="addUserForm.email" type="email" id="email" class="w-full"/>
+                <small class="text-red-500" v-if="addUserForm.errors.email">{{ addUserForm.errors.email }}</small>
             </div>
             <!-- Submit Button -->
             <div class="flex justify-end">
-                <Button type="submit" class="btn btn-primary w-full">Add</Button>
+                <Button type="submit" class="btn btn-primary w-full">Add Member</Button>
             </div>
         </form>
     </Dialog>
+    <!-- Create a new Team Dialog  -->
+    <Dialog v-model:visible="showAddTeamDialog" modal class="max-w-md" header="Create a new Team">
+        <form @submit.prevent="submitTeamForm()" class="space-y-3">
+            <label for="name">Team Name</label>
+            <InputText :invalid="addTeamForm.errors.name" v-model="addTeamForm.name" id="name" class="w-full"/>
+            <small class="text-red-500" v-if="addTeamForm.errors.name">{{ addTeamForm.errors.name }}</small>
+            <!-- Submit Button -->
+            <div class="flex justify-end">
+                <Button type="submit" class="btn btn-primary w-full">Create Team</Button>
+            </div>
+        </form>
+    </Dialog>
+    <!-- Delete Team Dialog -->
+    <Dialog v-model:visible="confirmDeleteTeamDialog" modal class="max-w-md" header="Delete Team">
+        <p>Are you sure you want to delete this Team?</p>
+        <div class="flex justify-end gap-2">
+            <Button
+                size="small"
+                @click="confirmDeleteTeamDialog = false">Cancel
+            </Button>
+            <Button
+                size="small"
+                severity="danger"
+                @click="useForm('DELETE', route('staff.groups.destroy', {group: group.hashid}),{}).submit({
+                    preserveScroll: true,
+                    onSuccess: () => {
+                        confirmDeleteTeamDialog = false;
+                        toast.add({severity: 'success', summary: 'Success', detail: 'Team deleted'});
+                    }
+                })">Delete
+            </Button>
+        </div>
+    </Dialog>
 </template>
 
 <style scoped>
diff --git a/resources/js/Pages/Staff/Groups/Tabs/TeamTab.vue b/resources/js/Pages/Staff/Groups/Tabs/TeamTab.vue
new file mode 100644
index 0000000..5611a95
--- /dev/null
+++ b/resources/js/Pages/Staff/Groups/Tabs/TeamTab.vue
@@ -0,0 +1,109 @@
+<script setup>
+import AppLayout from '../../../../Layouts/AppLayout.vue'
+import {useForm} from '@inertiajs/vue3'
+import {ref, useAttrs} from 'vue'
+import Dialog from 'primevue/dialog'
+import Button from 'primevue/button'
+import TabComponent from "./TabComponent.vue";
+import TabHeader from "./TabHeader.vue";
+import {useToast} from "primevue/usetoast";
+import GroupListItem from "../../../../Components/GroupListItem.vue";
+
+const deleteModal = ref({
+    visible: false,
+    user: {
+        id: '',
+        name: '',
+    },
+    groupHash: '',
+})
+
+function showDeleteModal(groupHash, user) {
+    deleteModal.value = {
+        groupHash,
+        user,
+        visible: true,
+    }
+}
+
+const toast = useToast();
+
+function deleteUser() {
+    form.delete(route('staff.groups.members.destroy', {
+        group: deleteModal.value.groupHash,
+        member: deleteModal.value.user.id,
+    }), {
+        preserveScroll: true,
+        onSuccess: () => {
+            toast.add({severity: 'success', summary: 'Success', detail: 'User removed from group'});
+        }
+    })
+    deleteModal.value.visible = false
+}
+
+defineOptions({layout: AppLayout})
+const props = defineProps({
+    group: Object,
+    parent: {
+        type: Object,
+        required: false
+    },
+    teams: Array,
+    myGroups: Array,
+    canEdit: Boolean,
+})
+
+const attrs = useAttrs()
+const form = useForm({})
+</script>
+
+<template>
+    <div>
+        <TabHeader
+            :parent="parent"
+            :group="group"
+            subtitle="Teams"
+            :can-edit="canEdit"
+        ></TabHeader>
+        <TabComponent :active-index="2" :group="group"></TabComponent>
+        <!-- Department list -->
+        <ul role="list" class="divide-y divide-gray-900/5" v-if="teams.length">
+            <GroupListItem
+                v-for="department in teams"
+                :key="department.id"
+                :department="department"
+                :myGroups="myGroups"
+            />
+        </ul>
+        <!-- No Team created info message -->
+        <div v-else class="flex items-center justify-center h-96">
+            <p class="text-gray-400">No teams created yet.</p>
+        </div>
+
+        <!-- Delete modal -->
+        <Dialog v-model:visible="deleteModal.visible" modal header="Remove user from department"
+                :style="{ width: '25rem' }">
+                                <span class="p-text-secondary block mb-5">Really remove {{
+                                        deleteModal.user.name
+                                    }}?</span>
+
+
+            <form action="#" method="post"
+                  @submit.prevent="deleteUser">
+                <div class="flex justify-content-end pull-right gap-2">
+                    <Button type="button" label="Cancel"
+                            severity="secondary"
+                            @click="deleteModal.visible = false"></Button>
+
+                    <Button
+                        type="submit"
+                        :loading="form.processing"
+                        severity="danger">
+                        Remove<span class="sr-only">, {{ deleteModal.user.name }}</span>
+                    </Button>
+                </div>
+            </form>
+
+        </Dialog>
+    </div>
+</template>
diff --git a/routes/apps/staff.php b/routes/apps/staff.php
index 89d647e..bc284af 100644
--- a/routes/apps/staff.php
+++ b/routes/apps/staff.php
@@ -3,12 +3,14 @@
 use App\Http\Controllers\Staff\DashboardController;
 use App\Http\Controllers\Staff\GroupMemberController;
 use App\Http\Controllers\Staff\GroupsController;
+use App\Http\Controllers\Staff\GroupTeamController;
 
 // Forward / to /dashboard
 Route::redirect('/', '/dashboard');
 Route::get('/dashboard', DashboardController::class)->name('dashboard');
-Route::resource('groups', GroupsController::class)->only(['index','show','update']);
+Route::resource('groups', GroupsController::class)->only(['index','show','update','destroy']);
 Route::resource('groups.members', GroupMemberController::class);
+Route::resource('groups.teams', GroupTeamController::class)->only(['index','store']);
 // rewrite /departments to /groups
 Route::get('/departments', fn() => redirect()->route('groups.index'));
 Route::get('/departments/{department}', fn($department) => redirect()->route('staff.groups.show', $department));