diff --git a/frontend/src/component/feature/variant/__tests__/__snapshots__/update-variant-component-test.jsx.snap b/frontend/src/component/feature/variant/__tests__/__snapshots__/update-variant-component-test.jsx.snap
index e5f09f8c06..491fde6295 100644
--- a/frontend/src/component/feature/variant/__tests__/__snapshots__/update-variant-component-test.jsx.snap
+++ b/frontend/src/component/feature/variant/__tests__/__snapshots__/update-variant-component-test.jsx.snap
@@ -177,27 +177,9 @@ exports[`renders correctly with without variants 1`] = `
     </code>
      method in the Client SDK.
   </p>
-  <table
-    className="mdl-data-table mdl-shadow--2dp variantTable"
-  >
-    <thead>
-      <tr>
-        <th>
-          Variant name
-        </th>
-        <th
-          className="labels"
-        />
-        <th>
-          Weight
-        </th>
-        <th
-          className="actions"
-        />
-      </tr>
-    </thead>
-    <tbody />
-  </table>
+  <p>
+    No variants defined.
+  </p>
   <br />
   <p>
     <a
@@ -234,27 +216,9 @@ exports[`renders correctly with without variants and no permissions 1`] = `
     </code>
      method in the Client SDK.
   </p>
-  <table
-    className="mdl-data-table mdl-shadow--2dp variantTable"
-  >
-    <thead>
-      <tr>
-        <th>
-          Variant name
-        </th>
-        <th
-          className="labels"
-        />
-        <th>
-          Weight
-        </th>
-        <th
-          className="actions"
-        />
-      </tr>
-    </thead>
-    <tbody />
-  </table>
+  <p>
+    No variants defined.
+  </p>
   <br />
 </section>
 `;
diff --git a/frontend/src/component/feature/variant/update-variant-component.jsx b/frontend/src/component/feature/variant/update-variant-component.jsx
index a777a58ed6..410b2278fb 100644
--- a/frontend/src/component/feature/variant/update-variant-component.jsx
+++ b/frontend/src/component/feature/variant/update-variant-component.jsx
@@ -88,7 +88,7 @@ class UpdateVariantComponent extends Component {
                     <code style={{ color: 'navy' }}>getVariant()</code> method in the Client SDK.
                 </p>
 
-                {this.renderVariants(variants)}
+                {variants.length > 0 ? this.renderVariants(variants) : <p>No variants defined.</p>}
                 <br />
                 {this.props.hasPermission(UPDATE_FEATURE) ? (
                     <p>