diff --git a/clients/sample-app/src/components/Home/style.module.scss b/clients/sample-app/src/components/Home/style.module.scss
index 721ded784c..538ee2c52d 100644
--- a/clients/sample-app/src/components/Home/style.module.scss
+++ b/clients/sample-app/src/components/Home/style.module.scss
@@ -9,6 +9,7 @@
 
 .main {
   flex-grow: 1;
+  padding-inline: 24px;
 }
 
 .products {
@@ -20,6 +21,12 @@
   max-width: 744px;
   margin: 0 auto;
   margin-top: 77px;
+
+  @media screen and (max-width: 768px) {
+    & {
+      justify-content: center;
+    }
+  }
 }
 
 .product {
@@ -37,6 +44,12 @@
   img {
     margin-bottom: 8px;
   }
+
+  @media screen and (max-width: 768px) {
+    & {
+      width: 100%;
+    }
+  }
 }
 
 .name {
@@ -57,6 +70,12 @@
 
 .purchase {
   margin-top: 10px;
+
+  @media screen and (max-width: 768px) {
+    & {
+      width: 100%;
+    }
+  }
 }
 
 .footer {
@@ -78,6 +97,12 @@
   a:hover {
     color: #5b301d;
   }
+
+  @media screen and (max-width: 768px) {
+    & {
+      flex-direction: column;
+    }
+  }
 }
 
 .modalLink {
@@ -98,4 +123,10 @@
   right: 0;
   margin: 1em;
   color: #171923;
+
+  @media screen and (max-width: 768px) {
+    & {
+      position: relative;
+    }
+  }
 }