diff --git a/src/pages/Tariffs/TariffCard.tsx b/src/pages/Tariffs/TariffCard.tsx
index 182016c..e2ec126 100644
--- a/src/pages/Tariffs/TariffCard.tsx
+++ b/src/pages/Tariffs/TariffCard.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography, Tooltip, SxProps, Theme, Button, Badge } from "@mui/material";
+import { Box, Typography, Tooltip, SxProps, Theme, Button, Badge, useTheme, useMediaQuery, } from "@mui/material";
 import { MouseEventHandler, ReactNode } from "react";
 import { cardShadow } from "@root/utils/theme";
 import { relative } from "path";
@@ -18,7 +18,8 @@ interface Props {
 }
 
 export default function TariffCard({ icon, headerText, text, sx, price, buttonProps, discount }: Props) {
-
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down(600));
   return (
     <Box
       sx={{
@@ -30,6 +31,7 @@ export default function TariffCard({ icon, headerText, text, sx, price, buttonPr
         flexDirection: "column",
         alignItems: "start",
         p: "20px",
+        zIndex: isMobile ? -1 : undefined,
 
         boxShadow: cardShadow,
         ...sx,
@@ -54,6 +56,7 @@ export default function TariffCard({ icon, headerText, text, sx, price, buttonPr
               flexWrap: "wrap",
               columnGap: "10px",
               rowGap: 0,
+              flexDirection: isMobile ? "column-reverse" : undefined,
             }}
           >
             {price}