diff --git a/matsen-tool/package-lock.json b/matsen-tool/package-lock.json
index 67cb1c8..e9b8821 100644
--- a/matsen-tool/package-lock.json
+++ b/matsen-tool/package-lock.json
@@ -27,6 +27,7 @@
         "bootstrap-icons": "^1.11.2",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
+        "uuid": "^9.0.1",
         "zone.js": "~0.14.2"
       },
       "devDependencies": {
@@ -35,6 +36,7 @@
         "@angular/compiler-cli": "^17.0.0",
         "@openapitools/openapi-generator-cli": "^2.7.0",
         "@types/jasmine": "~5.1.0",
+        "@types/uuid": "^9.0.8",
         "@verizonconnect/ngx-form-generator": "^1.2.0",
         "jasmine-core": "~5.1.0",
         "karma": "~6.4.0",
@@ -4829,6 +4831,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/uuid": {
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
+      "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
+      "dev": true
+    },
     "node_modules/@types/ws": {
       "version": "8.5.10",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
@@ -13036,6 +13044,15 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sockjs/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/socks": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz",
@@ -13919,10 +13936,13 @@
       }
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
       "bin": {
         "uuid": "dist/bin/uuid"
       }
diff --git a/matsen-tool/package.json b/matsen-tool/package.json
index d38547a..beba248 100644
--- a/matsen-tool/package.json
+++ b/matsen-tool/package.json
@@ -30,6 +30,7 @@
     "bootstrap-icons": "^1.11.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
+    "uuid": "^9.0.1",
     "zone.js": "~0.14.2"
   },
   "devDependencies": {
@@ -38,6 +39,7 @@
     "@angular/compiler-cli": "^17.0.0",
     "@openapitools/openapi-generator-cli": "^2.7.0",
     "@types/jasmine": "~5.1.0",
+    "@types/uuid": "^9.0.8",
     "@verizonconnect/ngx-form-generator": "^1.2.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
diff --git a/matsen-tool/src/app/_components/toggle/toggle.component.html b/matsen-tool/src/app/_components/toggle/toggle.component.html
new file mode 100644
index 0000000..6e84b9b
--- /dev/null
+++ b/matsen-tool/src/app/_components/toggle/toggle.component.html
@@ -0,0 +1,9 @@
+<div class="toggle-component">
+    <div class="toggle" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse-' + toggleId"
+         aria-expanded="false">
+        <h2>{{ headline }}</h2>
+    </div>
+    <div class="collapse" id="collapse-{{ toggleId }}">
+        <ng-content></ng-content>
+    </div>
+</div>
\ No newline at end of file
diff --git a/matsen-tool/src/app/_components/toggle/toggle.component.scss b/matsen-tool/src/app/_components/toggle/toggle.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/matsen-tool/src/app/_components/toggle/toggle.component.spec.ts b/matsen-tool/src/app/_components/toggle/toggle.component.spec.ts
new file mode 100644
index 0000000..d11a5b2
--- /dev/null
+++ b/matsen-tool/src/app/_components/toggle/toggle.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToggleComponent } from './toggle.component';
+
+describe('ToggleComponent', () => {
+  let component: ToggleComponent;
+  let fixture: ComponentFixture<ToggleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ToggleComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/matsen-tool/src/app/_components/toggle/toggle.component.ts b/matsen-tool/src/app/_components/toggle/toggle.component.ts
new file mode 100644
index 0000000..273027c
--- /dev/null
+++ b/matsen-tool/src/app/_components/toggle/toggle.component.ts
@@ -0,0 +1,16 @@
+import {Component, Input} from '@angular/core';
+import { v4 as uuidv4 } from 'uuid';
+import {ContactJsonld} from "@app/core/api/v1";
+@Component({
+  selector: 'app-toggle',
+  templateUrl: './toggle.component.html',
+  styleUrl: './toggle.component.scss'
+})
+export class ToggleComponent {
+    @Input() public headline!: string;
+
+    protected toggleId: string;
+    constructor() {
+        this.toggleId = uuidv4();
+    }
+}
diff --git a/matsen-tool/src/app/app.module.ts b/matsen-tool/src/app/app.module.ts
index 621d1e6..89b1a63 100644
--- a/matsen-tool/src/app/app.module.ts
+++ b/matsen-tool/src/app/app.module.ts
@@ -46,6 +46,7 @@ import { DocumentsDetailComponent } from './documents/documents-detail/documents
 import { SalesComponent } from './sales/sales.component';
 import { SalesDetailComponent } from './sales/sales-detail/sales-detail.component';
 import { NewSaleComponent } from './sales/new-sale/new-sale.component';
+import { ToggleComponent } from './_components/toggle/toggle.component';
 
 export function apiConfigFactory(): Configuration {
     const params: ConfigurationParameters = {
@@ -112,7 +113,8 @@ export function HttpLoaderFactory(http: HttpClient) {
         DocumentsDetailComponent,
         SalesComponent,
         SalesDetailComponent,
-        NewSaleComponent
+        NewSaleComponent,
+        ToggleComponent
     ],
     providers: [
         {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},
diff --git a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
index c88c2aa..c677b29 100644
--- a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
+++ b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
@@ -46,170 +46,174 @@
         </div>
     </div>
 </div>
-<div class="spt-container">
-    <div class="contacts">
-        <div class="d-flex justify-content-between align-items-start">
-            <h2>{{ 'basic.contacts' | translate }}</h2>
-            <button class="btn btn-primary" (click)="openModalNewContact()">{{ 'basic.new-contact' | translate }}
-            </button>
-        </div>
-        <div class="row">
-            <div class="col-4" *ngFor="let contact of contacts">
-                <div class="card">
-                    <div class="card-body row">
-                        <div class="col-8">
-                            <h2>{{ contact.firstName }} {{ contact.lastName }}</h2>
-                            <p><a href="mailto:{{contact.email}}">{{ contact.email }}</a><br/>
-                                {{ contact.phone }}<br/>
-                                {{ contact.position }}</p>
-                        </div>
-                        <div class="col-4">
-                            <img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined"
-                                 ngSrc="{{contact.imageUrl}}" width="247" height="94"
-                                 alt="{{contact.firstName}} {{contact.lastName}}"
-                                 title="{{contact.firstName}} {{contact.lastName}}"/>
+<app-toggle #toggleContacts [headline]="'basic.contacts' | translate">
+    <div class="spt-container">
+        <div class="contacts">
+            <div class="d-flex justify-content-end align-items-start mb-3 toggle-btn">
+                <button class="btn btn-primary" (click)="openModalNewContact()">{{ 'basic.new-contact' | translate }}
+                </button>
+            </div>
+            <div class="row">
+                <div class="col-4" *ngFor="let contact of contacts">
+                    <div class="card">
+                        <div class="card-body row">
+                            <div class="col-8">
+                                <h2>{{ contact.firstName }} {{ contact.lastName }}</h2>
+                                <p><a href="mailto:{{contact.email}}">{{ contact.email }}</a><br/>
+                                    {{ contact.phone }}<br/>
+                                    {{ contact.position }}</p>
+                            </div>
+                            <div class="col-4">
+                                <img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined"
+                                     ngSrc="{{contact.imageUrl}}" width="247" height="94"
+                                     alt="{{contact.firstName}} {{contact.lastName}}"
+                                     title="{{contact.firstName}} {{contact.lastName}}"/>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="d-flex justify-content-end mt-1 mb-4">
-                    <span role="button" (click)="navigateToContactDetails(contact)"
-                          class="badge bg-secondary p-2">{{ 'basic.details' | translate }}</span>
+                    <div class="d-flex justify-content-end mt-1 mb-4">
+                        <span role="button" (click)="navigateToContactDetails(contact)"
+                              class="badge bg-secondary p-2">{{ 'basic.details' | translate }}</span>
+                    </div>
                 </div>
             </div>
+            <mat-paginator *ngIf="contacts.length > 0" class="rounded-1"
+                           [pageSizeOptions]="[6,12,18]"
+                           [length]="contactsLength"
+                           (page)="contactsHandlePageEvent($event)"
+                           [pageSize]="contactsPageSize"
+                           [pageIndex]="contactsPageIndex"
+                           showFirstLastButtons>
+            </mat-paginator>
         </div>
-        <mat-paginator *ngIf="contacts.length > 0" class="rounded-1"
-                       [pageSizeOptions]="[6,12,18]"
-                       [length]="contactsLength"
-                       (page)="contactsHandlePageEvent($event)"
-                       [pageSize]="contactsPageSize"
-                       [pageIndex]="contactsPageIndex"
-                       showFirstLastButtons>
-        </mat-paginator>
     </div>
-</div>
-<div class="spt-container">
-    <div class="spt-accordion">
-        <div class="d-flex justify-content-between align-items-start">
-            <h2>{{ 'basic.tasks' | translate }}</h2>
-            <button class="btn btn-primary" (click)="openModalNewTask()">{{ 'basic.new-task' | translate }}</button>
-        </div>
-        <div class="tasks mb-3" *ngFor="let task of tasks">
-            <div class="card p-3">
-                <div class="position-relative" data-bs-toggle="collapse"
-                     [attr.data-bs-target]="'#collapse-' + ApiConverter.extractId(task.id)"
-                     aria-expanded="false"
-                     aria-controls="collapseExample">
-                    <h3 class="m-0">{{ task.partnerName }}</h3>
-                    <span class="info d-flex position-absolute">
-                        <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
-                        <span class="importance" [attr.data-importance]="task.prio"></span>
-                    </span>
-                    <h2 class="m-0">{{ task.headline }}</h2>
-                </div>
-                <div class="collapse" id="collapse-{{ApiConverter.extractId(task.id)}}">
-                    <div class="pt-3 pe-5 position-relative">
-                        <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(task.description)"></p>
-                        <p>Zugewiesen an: {{ task.assignedToName }}</p>
-                        <span *ngIf="task.createdBy === user?.id" class="position-absolute bi bi-pencil p-2"
-                              data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
-                    </div>
-                </div>
+</app-toggle>
+
+<app-toggle #toggleTasks [headline]="'basic.tasks' | translate">
+    <div class="spt-container">
+        <div class="spt-accordion">
+            <div class="d-flex justify-content-end align-items-start mb-3 toggle-btn">
+                <button class="btn btn-primary" (click)="openModalNewTask()">{{ 'basic.new-task' | translate }}</button>
             </div>
-            <div *ngIf="task.id && taskNotesVisibility.get(task.id)">
-                <div class="card ms-5" *ngFor="let taskNote of task.taskNotes">
-                    <div class="card-body">
-                        <div class="d-flex justify-content-between align-items-center">
-                            <p>{{ taskNote.createdAt | date:'dd.MM.YYYY' }}</p>
-                            <p>{{ taskNote.ownerName }}</p>
+            <div class="tasks mb-3" *ngFor="let task of tasks">
+                <div class="card p-3">
+                    <div class="position-relative" data-bs-toggle="collapse"
+                         [attr.data-bs-target]="'#collapse-' + ApiConverter.extractId(task.id)"
+                         aria-expanded="false"
+                         aria-controls="collapseExample">
+                        <h3 class="m-0">{{ task.partnerName }}</h3>
+                        <span class="info d-flex position-absolute">
+                            <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
+                            <span class="importance" [attr.data-importance]="task.prio"></span>
+                        </span>
+                        <h2 class="m-0">{{ task.headline }}</h2>
+                    </div>
+                    <div class="collapse" id="collapse-{{ApiConverter.extractId(task.id)}}">
+                        <div class="pt-3 pe-5 position-relative">
+                            <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(task.description)"></p>
+                            <p>Zugewiesen an: {{ task.assignedToName }}</p>
+                            <span *ngIf="task.createdBy === user?.id" class="position-absolute bi bi-pencil p-2"
+                                  data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
                         </div>
-                        <div>
-                            <p>{{ taskNote.message }}</p>
+                    </div>
+                </div>
+                <div *ngIf="task.id && taskNotesVisibility.get(task.id)">
+                    <div class="card ms-5" *ngFor="let taskNote of task.taskNotes">
+                        <div class="card-body">
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p>{{ taskNote.createdAt | date:'dd.MM.YYYY' }}</p>
+                                <p>{{ taskNote.ownerName }}</p>
+                            </div>
+                            <div>
+                                <p>{{ taskNote.message }}</p>
+                            </div>
+                            <span *ngIf="taskNote.owner === user?.id" class="position-absolute bi bi-pencil p-2"
+                                  data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>
                         </div>
-                        <span *ngIf="taskNote.owner === user?.id" class="position-absolute bi bi-pencil p-2"
-                              data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>
                     </div>
                 </div>
-            </div>
 
-            <div class="d-flex justify-content-end mt-1">
-                <span *ngIf="task.taskNotes?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
-                      (click)="showTaskNotes(task)">
-                    <ng-container
-                            *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
-                    <ng-container
-                            *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}</ng-container>
-                </span>
-                <span role="button" class="badge bg-secondary p-2"
-                      (click)="openModalNewTaskNote(task)">{{ 'basic.comment-it' | translate }}</span>
+                <div class="d-flex justify-content-end mt-1">
+                    <span *ngIf="task.taskNotes?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
+                          (click)="showTaskNotes(task)">
+                        <ng-container
+                                *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
+                        <ng-container
+                                *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}</ng-container>
+                    </span>
+                    <span role="button" class="badge bg-secondary p-2"
+                          (click)="openModalNewTaskNote(task)">{{ 'basic.comment-it' | translate }}</span>
+                </div>
             </div>
+            <mat-paginator *ngIf="tasks.length > 0" class="rounded-1"
+                           [pageSizeOptions]="[10,20,30]"
+                           [length]="tasksLength"
+                           (page)="tasksHandlePageEvent($event)"
+                           [pageSize]="tasksPageSize"
+                           [pageIndex]="tasksPageIndex"
+                           showFirstLastButtons>
+            </mat-paginator>
         </div>
-        <mat-paginator *ngIf="tasks.length > 0" class="rounded-1"
-                       [pageSizeOptions]="[10,20,30]"
-                       [length]="tasksLength"
-                       (page)="tasksHandlePageEvent($event)"
-                       [pageSize]="tasksPageSize"
-                       [pageIndex]="tasksPageIndex"
-                       showFirstLastButtons>
-        </mat-paginator>
     </div>
-</div>
-<div class="spt-container">
-    <div class="posts">
-        <div class="d-flex justify-content-between align-items-start">
-            <h2>{{ 'basic.posts' | translate }}</h2>
-            <button class="btn btn-primary" (click)="openModalNewPosting()">{{ 'basic.new-post' | translate }}</button>
-        </div>
-        <div class="post mb-3" *ngFor="let post of posts">
-            <div class="card">
-                <div class="card-body">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p>
-                        <p>{{ post.ownerName }}</p>
-                    </div>
-                    <div>
-                        <h3>{{ post.headline }}</h3>
-                        <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(post.message)"></p>
-                    </div>
-                    <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2"
-                          data-type="user-tool"
-                          data-action="edit" (click)="openModalEditPosting(post)"></span>
-                </div>
+</app-toggle>
+<app-toggle #togglePosts [headline]="'basic.posts' | translate">
+    <div class="spt-container">
+        <div class="posts">
+            <div class="d-flex justify-content-end align-items-start mb-3 toggle-btn">
+                <button class="btn btn-primary" (click)="openModalNewPosting()">{{ 'basic.new-post' | translate }}</button>
             </div>
-            <div *ngIf="post.id && commentsVisibility.get(post.id)">
-                <div class="card ms-5" *ngFor="let comment of post.comments">
+            <div class="post mb-3" *ngFor="let post of posts">
+                <div class="card">
                     <div class="card-body">
                         <div class="d-flex justify-content-between align-items-center">
-                            <p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p>
-                            <p>{{ comment.ownerName }}</p>
+                            <p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p>
+                            <p>{{ post.ownerName }}</p>
                         </div>
                         <div>
-                            <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(comment.message)"></p>
+                            <h3>{{ post.headline }}</h3>
+                            <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(post.message)"></p>
+                        </div>
+                        <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2"
+                              data-type="user-tool"
+                              data-action="edit" (click)="openModalEditPosting(post)"></span>
+                    </div>
+                </div>
+                <div *ngIf="post.id && commentsVisibility.get(post.id)">
+                    <div class="card ms-5" *ngFor="let comment of post.comments">
+                        <div class="card-body">
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p>
+                                <p>{{ comment.ownerName }}</p>
+                            </div>
+                            <div>
+                                <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(comment.message)"></p>
+                            </div>
+                            <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2"
+                                  data-type="user-tool" data-action="edit" (click)="openModalEditComment(comment)"></span>
                         </div>
-                        <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2"
-                              data-type="user-tool" data-action="edit" (click)="openModalEditComment(comment)"></span>
                     </div>
                 </div>
-            </div>
 
-            <div class="d-flex justify-content-end mt-1">
-                <span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
-                      (click)="showComments(post)">
-                    <ng-container
-                            *ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
-                    <ng-container
-                            *ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
-                </span>
-                <span role="button" class="badge bg-secondary p-2"
-                      (click)="openModalNewComment(post)">{{ 'basic.comment-it' | translate }}</span>
+                <div class="d-flex justify-content-end mt-1">
+                    <span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
+                          (click)="showComments(post)">
+                        <ng-container
+                                *ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
+                        <ng-container
+                                *ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
+                    </span>
+                    <span role="button" class="badge bg-secondary p-2"
+                          (click)="openModalNewComment(post)">{{ 'basic.comment-it' | translate }}</span>
+                </div>
             </div>
+            <mat-paginator *ngIf="posts.length > 0" class="rounded-1"
+                           [pageSizeOptions]="[10,20,30]"
+                           [length]="postsLength"
+                           (page)="postsHandlePageEvent($event)"
+                           [pageSize]="postsPageSize"
+                           [pageIndex]="postsPageIndex"
+                           showFirstLastButtons>
+            </mat-paginator>
         </div>
-        <mat-paginator *ngIf="posts.length > 0" class="rounded-1"
-                       [pageSizeOptions]="[10,20,30]"
-                       [length]="postsLength"
-                       (page)="postsHandlePageEvent($event)"
-                       [pageSize]="postsPageSize"
-                       [pageIndex]="postsPageIndex"
-                       showFirstLastButtons>
-        </mat-paginator>
     </div>
-</div>
+</app-toggle>
diff --git a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts
index 4b7184f..3070e54 100644
--- a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts
+++ b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts
@@ -24,6 +24,7 @@ import {User} from "@app/_models";
 import {NewCommentComponent} from "@app/postings/new-comment/new-comment.component";
 import {NewPartnerComponent} from "@app/partners/new-partner/new-partner.component";
 import {NewTaskNoteComponent} from "@app/tasks/new-task-note/new-task-note.component";
+import {ToggleComponent} from "@app/_components/toggle/toggle.component";
 
 @Component({
     selector: 'app-partners-detail',
@@ -31,6 +32,9 @@ import {NewTaskNoteComponent} from "@app/tasks/new-task-note/new-task-note.compo
     styleUrl: './partners-detail.component.scss'
 })
 export class PartnersDetailComponent implements OnInit, AfterViewInit {
+    @ViewChild("toggleContacts", { static: true }) toggleContacts: ToggleComponent = new ToggleComponent();
+    @ViewChild("toggleTasks", { static: true }) toggleTasks: ToggleComponent = new ToggleComponent();
+    @ViewChild("togglePosts", { static: true }) togglePosts: ToggleComponent = new ToggleComponent();
     @ViewChild(MatPaginator) contactsPaginator: MatPaginator;
     @ViewChild(MatPaginator) tasksPaginator: MatPaginator;
     @ViewChild(MatPaginator) postsPaginator: MatPaginator;
diff --git a/matsen-tool/src/assets/scss/_basics.scss b/matsen-tool/src/assets/scss/_basics.scss
index 1d917e6..c31fae7 100644
--- a/matsen-tool/src/assets/scss/_basics.scss
+++ b/matsen-tool/src/assets/scss/_basics.scss
@@ -56,4 +56,8 @@ img {
     height: 120px;
     width: 100%;
   }
+}
+
+.toggle-btn {
+  margin-top: -3.25rem;
 }
\ No newline at end of file