diff --git a/libs/design-system/social-media-button/src/lib/social-media-button.component.html b/libs/design-system/social-media-button/src/lib/social-media-button.component.html
index 97fd42920..5eef1e2e2 100644
--- a/libs/design-system/social-media-button/src/lib/social-media-button.component.html
+++ b/libs/design-system/social-media-button/src/lib/social-media-button.component.html
@@ -1,3 +1,7 @@
 <a [href]="link()" target="_blank" rel="noopener noreferrer">
-  <mat-icon [class.small]="size() === 'small'" [svgIcon]="icon()"></mat-icon>
+  @if (name() === 'email') {
+    <mat-icon [class.small]="size() === 'small'">email</mat-icon>
+  } @else {
+    <mat-icon [class.small]="size() === 'small'" [svgIcon]="icon()"></mat-icon>
+  }
 </a>
diff --git a/libs/design-system/social-media-button/src/lib/social-media-button.component.scss b/libs/design-system/social-media-button/src/lib/social-media-button.component.scss
index 8551c25bc..c1d702d28 100644
--- a/libs/design-system/social-media-button/src/lib/social-media-button.component.scss
+++ b/libs/design-system/social-media-button/src/lib/social-media-button.component.scss
@@ -6,11 +6,13 @@
     border-radius: 100%;
     width: 3rem;
     height: 3rem;
+    font-size: 3rem;
     outline-color: transparent;
 
     &.small {
       width: 2.25rem;
       height: 2.25rem;
+      font-size: 2.25rem;
     }
 
     &:hover {
diff --git a/libs/design-system/social-media-button/src/lib/social-media-button.component.ts b/libs/design-system/social-media-button/src/lib/social-media-button.component.ts
index c1e30df74..b064ba4d8 100644
--- a/libs/design-system/social-media-button/src/lib/social-media-button.component.ts
+++ b/libs/design-system/social-media-button/src/lib/social-media-button.component.ts
@@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
 import { MatIconModule } from '@angular/material/icon';
 
 /** Social media name type */
-export type SocialMediaName = 'x' | 'facebook' | 'instagram' | 'youtube' | 'linkedin' | 'github';
+export type SocialMediaName = 'x' | 'facebook' | 'instagram' | 'youtube' | 'linkedin' | 'email' | 'github';
 /** Button size type */
 export type SocialMediaButtonSize = 'small' | 'large';
 
@@ -14,6 +14,7 @@ export const SOCIAL_LINKS: Record<SocialMediaName, string> = {
   instagram: 'https://www.instagram.com/cns_at_iu/',
   youtube: 'https://www.youtube.com/@CNSCenter/',
   linkedin: 'https://www.linkedin.com/company/cns-indiana-university-bloomington',
+  email: 'mailto:infoccf@iu.edu',
   github: 'https://github.com/hubmapconsortium/hra-ui',
 };
 
diff --git a/libs/design-system/social-media-button/src/lib/social-media-button.stories.ts b/libs/design-system/social-media-button/src/lib/social-media-button.stories.ts
index 50aeb52f6..2b512a4ab 100644
--- a/libs/design-system/social-media-button/src/lib/social-media-button.stories.ts
+++ b/libs/design-system/social-media-button/src/lib/social-media-button.stories.ts
@@ -1,5 +1,4 @@
-import { provideHttpClient } from '@angular/common/http';
-import { provideIcons } from '@hra-ui/cdk/icons';
+import { provideDesignSystem } from '@hra-ui/design-system';
 import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
 
 import { SocialMediaButtonComponent } from './social-media-button.component';
@@ -15,7 +14,7 @@ const meta: Meta<SocialMediaButtonComponent> = {
   },
   decorators: [
     applicationConfig({
-      providers: [provideHttpClient(), provideIcons()],
+      providers: [provideDesignSystem()],
     }),
   ],
 };
@@ -30,7 +29,7 @@ export const Default: Story = {
   argTypes: {
     name: {
       control: 'select',
-      options: ['github', 'facebook', 'instagram', 'linkedin', 'x', 'youtube'],
+      options: ['email', 'github', 'facebook', 'instagram', 'linkedin', 'x', 'youtube'],
     },
     size: {
       control: 'select',