diff --git a/react/src/components/dashboard/settings/settings.panelBody.js b/react/src/components/dashboard/settings/settings.panelBody.js
index 1997c79..84a52fe 100644
--- a/react/src/components/dashboard/settings/settings.panelBody.js
+++ b/react/src/components/dashboard/settings/settings.panelBody.js
@@ -61,12 +61,16 @@ class PanelSection extends React.Component {
       transition: 'height .25s ease',
     };
 
+    const triggerClasses = className('panel', {
+      active
+    });
+
     const contentClasses = className('panel-collapse', {
       active
     });
 
     return(
-      <div className="panel" onClick={() => this.toggleSection()}>
+      <div className={triggerClasses} onClick={() => this.toggleSection()}>
         <div className="panel-heading">
           <a className='panel-title'>
             <i className={icon}></i> {title}
diff --git a/react/src/components/dashboard/settings/settings.scss b/react/src/components/dashboard/settings/settings.scss
index e27331f..e3a10c0 100644
--- a/react/src/components/dashboard/settings/settings.scss
+++ b/react/src/components/dashboard/settings/settings.scss
@@ -117,7 +117,7 @@
     cursor: hand;
 
     &:before {
-      content: '\F273';
+      content: '\F278';
     }
     &.collapsed {
       &:before {
@@ -125,6 +125,11 @@
       }
     }
   }
+  .panel.active {
+    .panel-title:before {
+      content: '\F273';
+    }
+  }
 }
 
 @keyframes max-height {