diff --git a/consoles/my-joy-images/src/components/summary.js b/consoles/my-joy-images/src/components/summary.js
index 88d951e1..0c40e3c9 100644
--- a/consoles/my-joy-images/src/components/summary.js
+++ b/consoles/my-joy-images/src/components/summary.js
@@ -6,6 +6,7 @@ import Flex, { FlexItem } from 'styled-flex-component';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import titleCase from 'title-case';
 import remcalc from 'remcalc';
+import { breakpoints } from 'joyent-ui-toolkit/dist/es/breakpoints/screens';
 
 import {
   Card,
@@ -37,7 +38,7 @@ const VerticalDivider = styled.div`
   align-self: flex-end;
   margin: 0 ${remcalc(18)};
 
-  @media (max-width: ${remcalc(767)}) {
+  @media (max-width: ${remcalc(breakpoints.small.upper)}) {
     display: none;
   }
 `;
diff --git a/consoles/my-joy-instances/src/components/instances/summary.js b/consoles/my-joy-instances/src/components/instances/summary.js
index e056bb15..14d48de9 100644
--- a/consoles/my-joy-instances/src/components/instances/summary.js
+++ b/consoles/my-joy-instances/src/components/instances/summary.js
@@ -7,6 +7,7 @@ import titleCase from 'title-case';
 import get from 'lodash.get';
 import remcalc from 'remcalc';
 import { Field } from 'redux-form';
+import { breakpoints } from 'joyent-ui-toolkit/dist/es/breakpoints/screens';
 
 import {
   Card,
@@ -58,7 +59,7 @@ const Flex = styled.div`
   display: flex;
   justify-content: flex-start;
 
-  @media (max-width: ${remcalc(767)}) {
+  @media (max-width: ${remcalc(breakpoints.small.upper)}) {
     display: block;
   }
 `;
@@ -75,7 +76,7 @@ const VerticalDivider = styled.div`
   align-self: flex-end;
   margin: 0 ${remcalc(12)};
 
-  @media (max-width: ${remcalc(767)}) {
+  @media (max-width: ${remcalc(breakpoints.small.upper)}) {
     display: none;
   }
 `;