diff --git a/app/javascript/src/assets/scss/views/_signup.scss b/app/javascript/src/assets/scss/views/_signup.scss
index 376f3a07c..7e28a1975 100644
--- a/app/javascript/src/assets/scss/views/_signup.scss
+++ b/app/javascript/src/assets/scss/views/_signup.scss
@@ -1,25 +1,25 @@
 .signup {
   // margin-top: $space-larger*1.2;
 
-  .signup__hero {
+  .signup--hero {
     margin-bottom: $space-larger*1.5;
 
-    .hero__logo {
+    .hero--logo {
       width: 180px;
     }
 
-    .hero__title {
+    .hero--title {
       margin-top: $space-large;
       font-weight: $font-weight-light;
     }
 
-    .hero__sub {
+    .hero--sub {
       font-size: $font-size-medium;
       color: $medium-gray;
     }
   }
 
-  .signup__features {
+  .signup--features {
     list-style-type: none;
     font-size: $font-size-medium;
 
@@ -53,7 +53,7 @@
     }
   }
 
-  .signup-box {
+  .signup--box {
     @include elegant-card;
     padding: $space-large;
     label {
@@ -71,7 +71,7 @@
     }
   }
 
-  .sigin__footer {
+  .sigin--footer {
     padding: $space-medium;
     font-size: $font-size-default;
 
@@ -80,7 +80,7 @@
     }
   }
 
-  .accept-terms {
+  .accept--terms {
     font-size: $font-size-mini;
     text-align: center;
     @include margin($zero);
diff --git a/app/javascript/src/routes/auth/Signup.vue b/app/javascript/src/routes/auth/Signup.vue
index 24b8b34b7..8d862f88c 100644
--- a/app/javascript/src/routes/auth/Signup.vue
+++ b/app/javascript/src/routes/auth/Signup.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="medium-10 column signup">
-    <div class="text-center medium-12 signup__hero">
+    <div class="text-center medium-12 signup--hero">
       <img
         src="~assets/images/woot-logo.svg"
         alt="Woot-logo"
-        class="hero__logo"
+        class="hero--logo"
       />
-      <h2 class="hero__title">
+      <h2 class="hero--title">
         {{ $t('REGISTER.TRY_WOOT') }}
       </h2>
-      <p class="hero__sub">
+      <p class="hero--sub">
         {{ $t('REGISTER.TRY_WOOT_SUB') }}
       </p>
     </div>
     <div class="row align-center">
       <div class="medium-5 column">
-        <ul class="signup__features">
+        <ul class="signup--features">
           <li><i class="ion-beer beer"></i>Unlimited Facebook Pages</li>
           <li><i class="ion-stats-bars report"></i>Robust Reporting</li>
           <li><i class="ion-chatbox-working canned"></i>Canned Responses</li>
@@ -24,7 +24,7 @@
         </ul>
       </div>
       <div class="medium-5 column">
-        <form class="signup-box login-box " @submit.prevent="submit()">
+        <form class="signup--box login-box " @submit.prevent="submit()">
           <div class="column log-in-form">
             <label :class="{ error: $v.credentials.name.$error }">
               {{ $t('REGISTER.ACCOUNT_NAME.LABEL') }}
@@ -61,10 +61,10 @@
               button-class="large expanded"
             >
             </woot-submit-button>
-            <p class="accept-terms" v-html="$t('REGISTER.TERMS_ACCEPT')"></p>
+            <p class="accept--terms" v-html="$t('REGISTER.TERMS_ACCEPT')"></p>
           </div>
         </form>
-        <div class="column text-center sigin__footer">
+        <div class="column text-center sigin--footer">
           <span>Already have an account?</span>
           <router-link to="auth/login">
             {{ $t('LOGIN.TITLE') }}