diff --git a/.changeset/violet-turkeys-divide.md b/.changeset/violet-turkeys-divide.md
new file mode 100644
index 0000000000..ef48734fe3
--- /dev/null
+++ b/.changeset/violet-turkeys-divide.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-docs/gatsby-theme-api-docs': patch
+---
+
+Update import path
diff --git a/packages/gatsby-theme-api-docs/src/components/resource/method/scopes.tsx b/packages/gatsby-theme-api-docs/src/components/resource/method/scopes.tsx
index 26aa0ca124..09b17e5254 100644
--- a/packages/gatsby-theme-api-docs/src/components/resource/method/scopes.tsx
+++ b/packages/gatsby-theme-api-docs/src/components/resource/method/scopes.tsx
@@ -1,8 +1,7 @@
 import SpacingsStack from '@commercetools-uikit/spacings-stack';
-import { Markdown } from '@commercetools-docs/ui-kit';
+import { Markdown, designSystem } from '@commercetools-docs/ui-kit';
 import Title from './title';
 import styled from '@emotion/styled';
-import { dimensions } from '@commercetools-docs/ui-kit/src/design-system';
 
 type ScopesProps = {
   scopes: string[];
@@ -12,21 +11,21 @@ const Container = styled.div`
   display: grid;
   grid-gap: 0.5rem;
 
-  @media screen and (${dimensions.viewports.mobile}) {
+  @media screen and (${designSystem.dimensions.viewports.mobile}) {
     grid-template-columns: 1fr;
   }
-  @media screen and (${dimensions.viewports.tablet}) {
+  @media screen and (${designSystem.dimensions.viewports.tablet}) {
     grid-template-columns: repeat(2, 1fr);
   }
 `;
 
 const Text = styled(Markdown.InlineCodeWithoutBox)`
-  @media screen and (${dimensions.viewports.mobile}) {
+  @media screen and (${designSystem.dimensions.viewports.mobile}) {
     :not(:last-child)&::after {
       content: ', ';
     }
   }
-  @media screen and (${dimensions.viewports.tablet}) {
+  @media screen and (${designSystem.dimensions.viewports.tablet}) {
     &::after {
       content: ' ';
     }