diff --git a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
index 0e4d1109..4e95a612 100644
--- a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
+++ b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
@@ -51,24 +51,22 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
       <h6>
         Racial Ethnographic
         <button
-          aria-controls="race-expand-content"
+          aria-controls="race-panel"
           aria-expanded="false"
-          class="usa-accordion__button usa-banner__button"
-          id="race-expand-control"
-          type="button"
+          id="race-header"
+          tabindex="0"
         >
-          <span
-            class="usa-banner__button-text"
-          >
-            show
-          </span>
+          show
         </button>
+        <img
+          alt="collapse icon"
+          src="test-file-stub"
+        />
       </h6>
-      <div
-        aria-labelledby="race-expand-control"
-        class="usa-banner__content usa-accordion__content"
+      <section
+        aria-labelledby="race-header"
         hidden=""
-        id="race-expand-content"
+        id="race-panel"
       >
         <div>
           <span>
@@ -142,28 +140,26 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
             10.4%
           </span>
         </div>
-      </div>
+      </section>
       <h6>
         Age
         <button
-          aria-controls="age-expand-content"
+          aria-controls="age-panel"
           aria-expanded="false"
-          class="usa-accordion__button usa-banner__button"
-          id="age-expand-control"
-          type="button"
+          id="age-header"
+          tabindex="0"
         >
-          <span
-            class="usa-banner__button-text"
-          >
-            show
-          </span>
+          show
         </button>
+        <img
+          alt="collapse icon"
+          src="test-file-stub"
+        />
       </h6>
-      <div
-        aria-labelledby="age-expand-control"
-        class="usa-banner__content usa-accordion__content"
+      <section
+        aria-labelledby="age-header"
         hidden=""
-        id="age-expand-content"
+        id="age-panel"
       >
         <div>
           <span>
@@ -189,7 +185,7 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
             7.2%
           </span>
         </div>
-      </div>
+      </section>
     </div>
     <div>
       <div>
@@ -564,24 +560,22 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
       <h6>
         Racial Ethnographic
         <button
-          aria-controls="race-expand-content"
+          aria-controls="race-panel"
           aria-expanded="false"
-          class="usa-accordion__button usa-banner__button"
-          id="race-expand-control"
-          type="button"
+          id="race-header"
+          tabindex="0"
         >
-          <span
-            class="usa-banner__button-text"
-          >
-            show
-          </span>
+          show
         </button>
+        <img
+          alt="collapse icon"
+          src="test-file-stub"
+        />
       </h6>
-      <div
-        aria-labelledby="race-expand-control"
-        class="usa-banner__content usa-accordion__content"
+      <section
+        aria-labelledby="race-header"
         hidden=""
-        id="race-expand-content"
+        id="race-panel"
       >
         <div>
           <span>
@@ -655,28 +649,26 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
             10.4%
           </span>
         </div>
-      </div>
+      </section>
       <h6>
         Age
         <button
-          aria-controls="age-expand-content"
+          aria-controls="age-panel"
           aria-expanded="false"
-          class="usa-accordion__button usa-banner__button"
-          id="age-expand-control"
-          type="button"
+          id="age-header"
+          tabindex="0"
         >
-          <span
-            class="usa-banner__button-text"
-          >
-            show
-          </span>
+          show
         </button>
+        <img
+          alt="collapse icon"
+          src="test-file-stub"
+        />
       </h6>
-      <div
-        aria-labelledby="age-expand-control"
-        class="usa-banner__content usa-accordion__content"
+      <section
+        aria-labelledby="age-header"
         hidden=""
-        id="age-expand-content"
+        id="age-panel"
       >
         <div>
           <span>
@@ -702,7 +694,7 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
             7.2%
           </span>
         </div>
-      </div>
+      </section>
     </div>
     <div>
       <div>
@@ -2452,24 +2444,22 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
       <h6>
         Racial Ethnographic
         <button
-          aria-controls="race-expand-content"
+          aria-controls="race-panel"
           aria-expanded="false"
-          class="usa-accordion__button usa-banner__button"
-          id="race-expand-control"
-          type="button"
+          id="race-header"
+          tabindex="0"
         >
-          <span
-            class="usa-banner__button-text"
-          >
-            show
-          </span>
+          show
         </button>
+        <img
+          alt="collapse icon"
+          src="test-file-stub"
+        />
       </h6>
-      <div
-        aria-labelledby="race-expand-control"
-        class="usa-banner__content usa-accordion__content"
+      <section
+        aria-labelledby="race-header"
         hidden=""
-        id="race-expand-content"
+        id="race-panel"
       >
         <div>
           <span>
@@ -2543,28 +2533,26 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
             10.4%
           </span>
         </div>
-      </div>
+      </section>
       <h6>
         Age
         <button
-          aria-controls="age-expand-content"
+          aria-controls="age-panel"
           aria-expanded="false"
-          class="usa-accordion__button usa-banner__button"
-          id="age-expand-control"
-          type="button"
+          id="age-header"
+          tabindex="0"
         >
-          <span
-            class="usa-banner__button-text"
-          >
-            show
-          </span>
+          show
         </button>
+        <img
+          alt="collapse icon"
+          src="test-file-stub"
+        />
       </h6>
-      <div
-        aria-labelledby="age-expand-control"
-        class="usa-banner__content usa-accordion__content"
+      <section
+        aria-labelledby="age-header"
         hidden=""
-        id="age-expand-content"
+        id="age-panel"
       >
         <div>
           <span>
@@ -2590,7 +2578,7 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
             7.2%
           </span>
         </div>
-      </div>
+      </section>
     </div>
     <div>
       <div>
diff --git a/client/src/components/TractDemographics/TractDemographics.module.scss b/client/src/components/TractDemographics/TractDemographics.module.scss
index f9f3a0dd..c5cafb72 100644
--- a/client/src/components/TractDemographics/TractDemographics.module.scss
+++ b/client/src/components/TractDemographics/TractDemographics.module.scss
@@ -4,15 +4,10 @@
 .demographicsContainer{
     padding: 1.2rem 1rem 0 1.2rem;
     
-    .demographicsLabel {
+    .demographicsTitle {
         @include sidePanelLabelStyle;
     }
 
-    [id*='expand-content']{
-        padding: .5rem 0;
-        
-    }
-
     .demographicItem {
         display: flex;
         justify-content: space-between;
@@ -23,8 +18,41 @@
             margin-top: 0;
         }
     }
-    .customDemographicHeading {
+
+    .demographicItem:first-child {
         @include u-margin-top(.5);
-        font-size: medium;
+    }
+    .demographicHeading {
+        @include u-margin-top(.5);
+        font-size: .875rem;
+        
+        .showHideText {
+            //remove styling of button
+            border: none;
+            background-color: white;
+    
+            //emulate a link
+            cursor:pointer;
+            color:blue;
+            text-decoration:underline;
+    
+            min-width: 45px;
+
+            padding-left: 0;
+            padding-right: 0;
+            margin-left: 6px;
+        }
+
+        .showHideIcon{
+            vertical-align: middle;
+            height: 1rem;
+            margin-left: -8px;
+            filter: invert(8%) sepia(90%) saturate(7490%) hue-rotate(247deg) brightness(105%) contrast(143%);
+
+            &:hover{
+                cursor: pointer;
+            }
+        }
+
     }
 }
diff --git a/client/src/components/TractDemographics/TractDemographics.module.scss.d.ts b/client/src/components/TractDemographics/TractDemographics.module.scss.d.ts
index 72240dc1..041264f8 100644
--- a/client/src/components/TractDemographics/TractDemographics.module.scss.d.ts
+++ b/client/src/components/TractDemographics/TractDemographics.module.scss.d.ts
@@ -1,10 +1,11 @@
 declare namespace TractDemographicsNamespace {
     export interface ITractDemographicsScss {
       demographicsContainer: string;
+      demographicsTitle: string;
+      demographicHeading: string;
+      showHideText: string;
+      showHideIcon: string;
       demographicItem: string;
-      demographicsLabel: strring;
-      customDemographicItemToggle: string;
-      customDemographicHeading: string;
     }
   }
 
diff --git a/client/src/components/TractDemographics/TractDemographics.tsx b/client/src/components/TractDemographics/TractDemographics.tsx
index baa54110..90d5ba2a 100644
--- a/client/src/components/TractDemographics/TractDemographics.tsx
+++ b/client/src/components/TractDemographics/TractDemographics.tsx
@@ -1,5 +1,10 @@
 import React, {useState} from 'react';
 
+// @ts-ignore
+import expandIcon from '/node_modules/uswds/dist/img/usa-icons/expand_more.svg';
+// @ts-ignore
+import collapseIcon from '/node_modules/uswds/dist/img/usa-icons/expand_less.svg';
+
 import * as styles from './TractDemographics.module.scss';
 
 // Mock interface
@@ -53,30 +58,39 @@ interface IJ40AccordionItem {
 const J40AccordionItem = ({id, title, children}:IJ40AccordionItem) => {
   const [isExpanded, setIsExpanded] = useState(false);
   return (
-
     <>
-      <h6 className={styles.customDemographicHeading}>
+      <h6 className={styles.demographicHeading}>
         {title}
         <button
-          id={`${id}-expand-control`}
-          type="button"
-          className="usa-accordion__button usa-banner__button"
+          className={styles.showHideText}
+          id={`${id}-header`}
+          aria-controls={`${id}-panel`}
           aria-expanded={isExpanded}
-          aria-controls={`${id}-expand-content`}
           onClick={() => setIsExpanded(!isExpanded)}
+          tabIndex={0}
         >
-          <span className="usa-banner__button-text">{isExpanded ? `hide` : 'show'}</span>
+          {isExpanded ? 'hide' : 'show'}
         </button>
+        { isExpanded ?
+        <img
+          className={styles.showHideIcon}
+          src={expandIcon}
+          alt={'expand icon'}
+          onClick={() => setIsExpanded(!isExpanded)}
+        /> :
+        <img
+          className={styles.showHideIcon}
+          src={collapseIcon}
+          alt={'collapse icon'}
+          onClick={() => setIsExpanded(!isExpanded)}
+        />}
       </h6>
 
-      <div
-        id={`${id}-expand-content`}
-        className="usa-banner__content usa-accordion__content"
-        aria-labelledby={`${id}-expand-control`}
+      <section
+        id={`${id}-panel`}
+        aria-labelledby={`${id}-header`}
         hidden={!isExpanded}
-      >
-        {children}
-      </div>
+      >{children}</section>
     </>
   );
 };
@@ -84,7 +98,9 @@ const J40AccordionItem = ({id, title, children}:IJ40AccordionItem) => {
 const TractDemographics = () => {
   return (
     <div className={styles.demographicsContainer}>
-      <div className={styles.demographicsLabel}>Tract demographics</div>
+      <div className={styles.demographicsTitle}>
+        Tract demographics
+      </div>
       <>
         <J40AccordionItem id={'race'} title={`Racial Ethnographic`}>
           {demographicItemGen(demographicsData.racial)}
diff --git a/client/src/components/TractDemographics/__snapshots__/TractDemographics.test.tsx.snap b/client/src/components/TractDemographics/__snapshots__/TractDemographics.test.tsx.snap
index 68e2ccef..7c3b4c8c 100644
--- a/client/src/components/TractDemographics/__snapshots__/TractDemographics.test.tsx.snap
+++ b/client/src/components/TractDemographics/__snapshots__/TractDemographics.test.tsx.snap
@@ -9,24 +9,22 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
     <h6>
       Racial Ethnographic
       <button
-        aria-controls="race-expand-content"
+        aria-controls="race-panel"
         aria-expanded="false"
-        class="usa-accordion__button usa-banner__button"
-        id="race-expand-control"
-        type="button"
+        id="race-header"
+        tabindex="0"
       >
-        <span
-          class="usa-banner__button-text"
-        >
-          show
-        </span>
+        show
       </button>
+      <img
+        alt="collapse icon"
+        src="test-file-stub"
+      />
     </h6>
-    <div
-      aria-labelledby="race-expand-control"
-      class="usa-banner__content usa-accordion__content"
+    <section
+      aria-labelledby="race-header"
       hidden=""
-      id="race-expand-content"
+      id="race-panel"
     >
       <div>
         <span>
@@ -100,28 +98,26 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
           10.4%
         </span>
       </div>
-    </div>
+    </section>
     <h6>
       Age
       <button
-        aria-controls="age-expand-content"
+        aria-controls="age-panel"
         aria-expanded="false"
-        class="usa-accordion__button usa-banner__button"
-        id="age-expand-control"
-        type="button"
+        id="age-header"
+        tabindex="0"
       >
-        <span
-          class="usa-banner__button-text"
-        >
-          show
-        </span>
+        show
       </button>
+      <img
+        alt="collapse icon"
+        src="test-file-stub"
+      />
     </h6>
-    <div
-      aria-labelledby="age-expand-control"
-      class="usa-banner__content usa-accordion__content"
+    <section
+      aria-labelledby="age-header"
       hidden=""
-      id="age-expand-content"
+      id="age-panel"
     >
       <div>
         <span>
@@ -147,7 +143,7 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
           7.2%
         </span>
       </div>
-    </div>
+    </section>
   </div>
 </DocumentFragment>
 `;