diff --git a/packages/asc-web-components/submenu/index.js b/packages/asc-web-components/submenu/index.js
index af399b2798..0b56dee4cd 100644
--- a/packages/asc-web-components/submenu/index.js
+++ b/packages/asc-web-components/submenu/index.js
@@ -2,7 +2,6 @@ import PropTypes from "prop-types";
 import React, { useState } from "react";
 
 import Text from "../text";
-import { isTablet } from "../utils/device";
 import {
   StyledSubmenu,
   StyledSubmenuBottomLine,
diff --git a/packages/asc-web-components/submenu/styled-submenu.js b/packages/asc-web-components/submenu/styled-submenu.js
index 2d752a2bd4..17bb092c06 100644
--- a/packages/asc-web-components/submenu/styled-submenu.js
+++ b/packages/asc-web-components/submenu/styled-submenu.js
@@ -1,5 +1,7 @@
 import styled from "styled-components";
 
+import { tablet } from "../utils/device";
+
 export const StyledSubmenu = styled.div`
   display: flex;
   flex-direction: column;
@@ -23,7 +25,10 @@ export const StyledSubmenuItems = styled.div`
   display: flex;
   flex-direction: row;
   gap: 4px;
-  padding: ${(props) => (props.isTablet ? "16px" : "20px")};
+  padding: 20px;
+  @media ${tablet} {
+    padding: 16px;
+  }
 `;
 
 export const StyledSubmenuItem = styled.div.attrs((props) => ({