diff --git a/web/packages/design/src/Icon/Icon.jsx b/web/packages/design/src/Icon/Icon.jsx
index 2ac2953176f1f..734769c6672f7 100644
--- a/web/packages/design/src/Icon/Icon.jsx
+++ b/web/packages/design/src/Icon/Icon.jsx
@@ -77,6 +77,7 @@ export const ChatBubble = makeFontIcon(
   'ChatBubble',
   'icon-chat_bubble_outline'
 );
+export const Chart = makeFontIcon('Chart', 'icon-chart-bars');
 export const Check = makeFontIcon('Check', 'icon-check');
 export const ChevronCircleDown = makeFontIcon(
   'ChevronCircleDown',
@@ -233,7 +234,6 @@ export const SettingsOverscan = makeFontIcon(
   'icon-settings_overscan'
 );
 export const Share = makeFontIcon('Share', 'icon-share');
-export const Shart = makeFontIcon('Shart', 'icon-chart-bars');
 export const ShieldCheck = makeFontIcon('ShieldCheck', 'icon-shield-check');
 export const Shrink = makeFontIcon('Shrink', 'icon-shrink');
 export const SmallArrowDown = makeFontIcon(
diff --git a/web/packages/design/src/Icon/Icon.story.js b/web/packages/design/src/Icon/Icon.story.js
index bd4f108c0b2d6..b4e7e0ecafc73 100644
--- a/web/packages/design/src/Icon/Icon.story.js
+++ b/web/packages/design/src/Icon/Icon.story.js
@@ -58,6 +58,7 @@ export const ListOfIcons = () => (
     <IconBox IconCmpt={Icon.CarrotUp} text="CarrotUp" />
     <IconBox IconCmpt={Icon.Cash} text="Cash" />
     <IconBox IconCmpt={Icon.ChatBubble} text="ChatBubble" />
+    <IconBox IconCmpt={Icon.Chart} text="Chart" />
     <IconBox IconCmpt={Icon.Check} text="Check" />
     <IconBox IconCmpt={Icon.ChevronCircleDown} text="ChevronCircleDown" />
     <IconBox IconCmpt={Icon.ChevronCircleLeft} text="ChevronCircleLeft" />
@@ -162,7 +163,6 @@ export const ListOfIcons = () => (
     />
     <IconBox IconCmpt={Icon.SettingsOverscan} text="SettingsOverscan" />
     <IconBox IconCmpt={Icon.Share} text="Share" />
-    <IconBox IconCmpt={Icon.Shart} text="Shart" />
     <IconBox IconCmpt={Icon.ShieldCheck} text="ShieldCheck" />
     <IconBox IconCmpt={Icon.Shrink} text="Shrink" />
     <IconBox IconCmpt={Icon.SmallArrowDown} text="SmallArrowDown" />
diff --git a/web/packages/shared/config.js b/web/packages/shared/config.js
index 1e7d1a14cbb83..adb15ff9f0eac 100644
--- a/web/packages/shared/config.js
+++ b/web/packages/shared/config.js
@@ -16,8 +16,8 @@ limitations under the License.
 
 const cfg = {
   dateTimeFormat: 'yyyy-MM-dd HH:mm:ss',
-
   dateFormat: 'yyyy-MM-dd',
+  shortFormat: 'MMM dd, yyyy',
 };
 
 export default cfg;
diff --git a/web/packages/shared/services/loc/loc.ts b/web/packages/shared/services/loc/loc.ts
index ffb300b054150..859fede8e82c4 100644
--- a/web/packages/shared/services/loc/loc.ts
+++ b/web/packages/shared/services/loc/loc.ts
@@ -23,6 +23,7 @@ const isTest = process.env.NODE_ENV === 'test';
 
 const logger = Logger.create('services/loc');
 
+// displayUnixDate accepts a unix timestamp and returns formatted as 'yyyy-MM-dd'
 export function displayUnixDate(seconds: number) {
   // Multiply by 1000 b/c date constructor expects milliseconds.
   const date = new Date(seconds * 1000);
@@ -30,6 +31,7 @@ export function displayUnixDate(seconds: number) {
   return displayDate(date);
 }
 
+// displayDate accepts a date and returns formatted as 'yyyy-MM-dd'
 export function displayDate(date: Date) {
   try {
     if (isTest) {
@@ -42,6 +44,20 @@ export function displayDate(date: Date) {
   }
 }
 
+// displayShortDate accepts a date and returns formatted as 'MM dd, yyyy'
+export function displayShortDate(date: Date) {
+  try {
+    if (isTest) {
+      return format(dateToUtc(date), cfg.shortFormat);
+    }
+    return format(date, cfg.shortFormat);
+  } catch (err) {
+    logger.error('displayDate()', err);
+    return 'undefined';
+  }
+}
+
+// displayDateTime accepts a date and returns formatted as 'yyyy-MM-dd HH:mm:ss'
 export function displayDateTime(date: Date) {
   try {
     if (isTest) {