diff --git a/src/app/public/components/public-archive/public-archive.component.html b/src/app/public/components/public-archive/public-archive.component.html
index b7d369301..482f8cf36 100644
--- a/src/app/public/components/public-archive/public-archive.component.html
+++ b/src/app/public/components/public-archive/public-archive.component.html
@@ -26,8 +26,20 @@
       }"
     >
       <div>
-        <div class="profile-name">The {{ this.archive.fullName }} Archive</div>
-        <div class="profile-description">
+        <div class="profile-name">
+          The {{ this.archive.fullName }} Archive
+          <fa-icon
+            (click)="toggleProfileInformation()"
+            class="icon-expand"
+            [class.reverse]="showProfileInformation"
+            [icon]="['fas', 'chevron-down']"
+            *ngIf="!(isViewingProfile$ | async)"
+          ></fa-icon>
+        </div>
+        <div
+          [ngClass]="{ 'archive-description-show': showProfileInformation }"
+          class="archive-description"
+        >
           <span
             *ngIf="
               hasSingleValueFor('birth_info', 'locnId1') ||
@@ -87,32 +99,34 @@
           </ng-container>
         </div>
         <ng-container *ngIf="isViewingProfile$ | async">
-          <div
-            class="profile-blurb"
-            *ngIf="hasSingleValueFor('blurb', 'string1')"
-          >
-            {{ this.profileItems.blurb[0].string1 }}
+          <div class="profile-info">
+            <div
+              class="profile-blurb"
+              *ngIf="hasSingleValueFor('blurb', 'string1')"
+            >
+              {{ this.profileItems.blurb[0].string1 }}
+            </div>
+            <span
+              class="profile-description"
+              *ngIf="
+                hasSingleValueFor('description', 'textData1') && !showShortText
+              "
+              [innerHTML]="this.description"
+            ></span>
+            <span
+              class="profile-description"
+              *ngIf="
+                hasSingleValueFor('description', 'textData1') && showShortText
+              "
+              [innerHTML]="this.shortText + '...'"
+            ></span>
+            <span
+              *ngIf="this.description.length > 100"
+              class="expand-text"
+              (click)="toggleShowFullText()"
+              >{{ showShortText ? ' See More' : ' See Less' }}
+            </span>
           </div>
-          <span
-            class="profile-description"
-            *ngIf="
-              hasSingleValueFor('description', 'textData1') && !showShortText
-            "
-            [innerHTML]="this.description"
-          ></span>
-          <span
-            class="profile-description"
-            *ngIf="
-              hasSingleValueFor('description', 'textData1') && showShortText
-            "
-            [innerHTML]="this.shortText + '...'"
-          ></span>
-          <span
-            *ngIf="this.description.length > 100"
-            class="expand-text"
-            (click)="toggleShowFullText()"
-            >{{ showShortText ? ' See More' : ' See Less' }}
-          </span>
         </ng-container>
       </div>
       <div class="profile-controls">
@@ -122,6 +136,7 @@
               class="btn btn-link"
               [routerLink]="['/p', 'archive', archive.archiveNbr]"
               [hidden]="!(isViewingProfile$ | async)"
+              (click)="showProfileInformation = false"
             >
               View Public Archive
               <svg
@@ -157,6 +172,7 @@
               class="btn btn-link"
               [routerLink]="['/p', 'archive', archive.archiveNbr, 'profile']"
               [hidden]="isViewingProfile$ | async"
+              (click)="showProfileInformation = true"
             >
               View Public Profile
               <svg
diff --git a/src/app/public/components/public-archive/public-archive.component.scss b/src/app/public/components/public-archive/public-archive.component.scss
index 2cfd5a4d7..eea356823 100644
--- a/src/app/public/components/public-archive/public-archive.component.scss
+++ b/src/app/public/components/public-archive/public-archive.component.scss
@@ -93,7 +93,7 @@ $desktop-size: pxToGrid(200px);
   font-family: 'Usual';
 
   @include beforeDesktop {
-    font-size: $font-size-base * 1.5;
+    font-size: $font-size-base;
   }
 }
 
@@ -193,6 +193,20 @@ $desktop-size: pxToGrid(200px);
   }
 }
 
+.archive-description {
+  white-space: pre-line;
+
+  @include beforeDesktop {
+    display: none;
+  }
+
+  &-show {
+    @include beforeDesktop {
+      display: block;
+    }
+  }
+}
+
 .profile-description {
   white-space: pre-line;
 }
@@ -387,3 +401,17 @@ $desktop-size: pxToGrid(200px);
   cursor: pointer;
   color: gray;
 }
+
+.icon-expand {
+  display: none;
+
+  @include beforeDesktop {
+    display: inline-block;
+    font-size: $mat-icon-sm;
+    transition: transform 250ms $tweaked-ease;
+    cursor: pointer;
+    &.reverse {
+      transform: rotate(180deg);
+    }
+  }
+}
diff --git a/src/app/public/components/public-archive/public-archive.component.spec.ts b/src/app/public/components/public-archive/public-archive.component.spec.ts
index 432203ad7..203a9a4d7 100644
--- a/src/app/public/components/public-archive/public-archive.component.spec.ts
+++ b/src/app/public/components/public-archive/public-archive.component.spec.ts
@@ -1,25 +1,57 @@
-// import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-// import { PublicArchiveComponent } from './public-archive.component';
-
-// describe('PublicArchiveComponent', () => {
-//   let component: PublicArchiveComponent;
-//   let fixture: ComponentFixture<PublicArchiveComponent>;
-
-//   beforeEach(async(() => {
-//     TestBed.configureTestingModule({
-//       declarations: [ PublicArchiveComponent ]
-//     })
-//     .compileComponents();
-//   }));
-
-//   beforeEach(() => {
-//     fixture = TestBed.createComponent(PublicArchiveComponent);
-//     component = fixture.componentInstance;
-//     fixture.detectChanges();
-//   });
-
-//   it('should create', () => {
-//     expect(component).toBeTruthy();
-//   });
-// });
+/* @format */
+import { waitForAsync } from '@angular/core/testing';
+import { PublicModule } from '@public/public.module';
+import { Shallow } from 'shallow-render';
+import { of } from 'rxjs';
+import { PublicProfileService } from '@public/services/public-profile/public-profile.service';
+import { PublicArchiveComponent } from './public-archive.component';
+
+const publicProfileServiceMock = {
+  publicRoot$: () => of({}),
+  archive$: () => of({}),
+  profileItemsDictionary$: () => of({}),
+};
+
+describe('PublicArchiveComponent', () => {
+  let shallow: Shallow<PublicArchiveComponent>;
+
+  beforeEach(waitForAsync(() => {
+    shallow = new Shallow(PublicArchiveComponent, PublicModule).provideMock({
+      provide: PublicProfileService,
+      useValue: publicProfileServiceMock,
+    });
+  }));
+
+  it('should create', async () => {
+    const { instance } = await shallow.render();
+
+    expect(instance).toBeTruthy();
+  });
+
+  it('should have the information hidden as default', async () => {
+    const { instance } = await shallow.render();
+
+    expect(instance.showProfileInformation).toBe(false);
+  });
+
+  it('should have the information shown when the button is clicked', async () => {
+    const { instance, find } = await shallow.render();
+    const icon = find('.icon-expand');
+    icon.nativeElement.click();
+
+    expect(instance.showProfileInformation).toBe(true);
+  });
+
+  it('should give the correct classes when expanding the information', async () => {
+    const { find, fixture, instance } = await shallow.render();
+    const icon = find('.icon-expand');
+    icon.nativeElement.click();
+
+    fixture.detectChanges();
+
+    expect(find('.archive-description').classes).toEqual({
+      'archive-description': true,
+      'archive-description-show': true,
+    });
+  });
+});
diff --git a/src/app/public/components/public-archive/public-archive.component.ts b/src/app/public/components/public-archive/public-archive.component.ts
index a077740b4..127909cbf 100644
--- a/src/app/public/components/public-archive/public-archive.component.ts
+++ b/src/app/public/components/public-archive/public-archive.component.ts
@@ -31,6 +31,7 @@ export class PublicArchiveComponent implements OnInit, OnDestroy {
   shortText = '';
   emails: string[] = [];
   websites: string[] = [];
+  showProfileInformation: boolean = false;
 
   waiting = true;
 
@@ -125,4 +126,8 @@ export class PublicArchiveComponent implements OnInit, OnDestroy {
   toggleShowFullText(): void {
     this.showShortText = !this.showShortText;
   }
+
+  toggleProfileInformation(): void {
+    this.showProfileInformation = !this.showProfileInformation;
+  }
 }
diff --git a/src/app/public/public.module.ts b/src/app/public/public.module.ts
index e7ea22203..6ef05a5d1 100644
--- a/src/app/public/public.module.ts
+++ b/src/app/public/public.module.ts
@@ -1,3 +1,4 @@
+/* @format */
 import { NgModule, Optional, ComponentFactoryResolver } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
@@ -5,7 +6,12 @@ import {
   FaIconLibrary,
   FontAwesomeModule,
 } from '@fortawesome/angular-fontawesome';
-import { faSearch, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
+import {
+  faSearch,
+  faTimesCircle,
+  faChevronDown,
+  faChevronUp,
+} from '@fortawesome/free-solid-svg-icons';
 import { DataService } from '@shared/services/data/data.service';
 import { FolderViewService } from '@shared/services/folder-view/folder-view.service';
 import { FileBrowserModule } from '@fileBrowser/file-browser.module';
@@ -53,7 +59,7 @@ import { PublicSearchResultsComponent } from './components/public-search-results
 })
 export class PublicModule {
   constructor(folderView: FolderViewService, private library: FaIconLibrary) {
-    this.library.addIcons(faSearch, faTimesCircle);
+    this.library.addIcons(faSearch, faTimesCircle, faChevronDown, faChevronUp);
     folderView.setFolderView(FolderView.Grid, true);
   }
 }