diff --git a/styles/atat.scss b/styles/atat.scss
index fc13952f..3e241da3 100644
--- a/styles/atat.scss
+++ b/styles/atat.scss
@@ -12,7 +12,7 @@
 @import 'elements/buttons';
 @import 'elements/panels';
 @import 'elements/block_lists';
-@import 'elements/accordians';
+@import 'elements/accordions';
 @import 'elements/tables';
 @import 'elements/sidenav';
 @import 'elements/action_group';
diff --git a/styles/elements/_accordians.scss b/styles/elements/_accordions.scss
similarity index 91%
rename from styles/elements/_accordians.scss
rename to styles/elements/_accordions.scss
index 61ef3c68..62a8d66a 100644
--- a/styles/elements/_accordians.scss
+++ b/styles/elements/_accordions.scss
@@ -1,4 +1,4 @@
-.accordian {
+.accordion {
   @include block-list;
 
   box-shadow: 0 4px 10px 0 rgba(193,193,193,0.5);
@@ -21,7 +21,7 @@
   }
 }
 
-.accordian__header {
+.accordion__header {
   @include block-list-header;
   border-top: 3px solid $color-blue;
   border-bottom: none;
@@ -32,7 +32,7 @@
   }
 }
 
-.accordian__title {
+.accordion__title {
   @include block-list__title;
   color: $color-blue;
   @include h3;
@@ -45,14 +45,14 @@
   }
 }
 
-.accordian__description {
+.accordion__description {
   @include block-list__description;
   font-style: italic;
   font-size: $small-font-size;
   color: $color-gray;
 }
 
-.accordian__actions {
+.accordion__actions {
   margin-top: $gap;
   display: flex;
   flex-direction: row;
@@ -76,14 +76,14 @@
   }
 }
 
-.accordian__item {
+.accordion__item {
   @include block-list-item;
 
   opacity: 0.75;
   background-color: $color-blue-light;
   border-bottom: 1px solid rgba($color-gray-light, 0.5);
 
-  &.accordian__item--selectable {
+  &.accordion__item--selectable {
     > div {
       display: flex;
       flex-direction: row-reverse;
@@ -117,7 +117,7 @@
   }
 }
 
-.accordian__footer {
+.accordion__footer {
   @include block-list__footer;
   border-top: 0;
 }
diff --git a/styles/sections/_application_list.scss b/styles/sections/_application_list.scss
index ba8fca73..3b7ad134 100644
--- a/styles/sections/_application_list.scss
+++ b/styles/sections/_application_list.scss
@@ -30,7 +30,7 @@
     overflow: auto;
   }
 
-  header.accordian__header {
+  header.accordion__header {
     padding: 1.6rem;
   }
 
diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html
index 3eec6645..35c79483 100644
--- a/templates/fragments/applications/environments.html
+++ b/templates/fragments/applications/environments.html
@@ -38,7 +38,7 @@
         </tr>
 
         <tr scope='rowgroup' v-for='member in members_list' v-show='environmentsState[name].isVisible' class='spend-table__application__env'>
-          <td class='accordian__item application-list-item__environment table-cell--expand'>
+          <td class='accordion__item application-list-item__environment table-cell--expand'>
             <div class='application-list-item__environment__name'>
               <span v-html='member'></span>
             </div>
diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html
index 51a3ce56..0ecddde4 100644
--- a/templates/portfolios/applications/index.html
+++ b/templates/portfolios/applications/index.html
@@ -34,13 +34,13 @@
 
     <div class='application-list'>
       {% for application in portfolio.applications|sort(attribute='name') %}
-        <div is='toggler' v-cloak class='accordian application-list-item'>
+        <div is='toggler' v-cloak class='accordion application-list-item'>
           <template slot-scope='props'>
-            <header class='accordian__header row'>
+            <header class='accordion__header row'>
               <div class='col col-grow'>
-                <h3 class='icon-link accordian__title' v-on:click="props.toggle">{{ application.name }}</h3>
-                <span class='accordian__description'>{{ application.description }}</span>
-                <div class='accordian__actions'>
+                <h3 class='icon-link accordion__title' v-on:click="props.toggle">{{ application.name }}</h3>
+                <span class='accordion__description'>{{ application.description }}</span>
+                <div class='accordion__actions'>
                   {% if user_can(permissions.EDIT_APPLICATION) %}
                     <a class='icon-link' href='{{ url_for("portfolios.edit_application", portfolio_id=portfolio.id, application_id=application.id) }}'>
                       <span>{{ "portfolios.applications.app_settings_text" | translate }}</span>
@@ -68,7 +68,7 @@
             </header>
             <ul v-if="props.isVisible">
               {% for environment in application.environments %}
-                <li class='accordian__item application-list-item__environment'>
+                <li class='accordion__item application-list-item__environment'>
                   <div class='application-list-item__environment__name'>
                     <span>{{ environment.name }}</span>
                   </div>