diff --git a/static/css/products.css b/static/css/products.css
index ebfce71..d5be50c 100644
--- a/static/css/products.css
+++ b/static/css/products.css
@@ -39,23 +39,29 @@
 .product {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: space-around;
     flex-wrap: wrap;
     flex: 4 0 1rem;
-    max-width: 40%;
-    padding: .5rem 1rem 2rem 2rem;
+    max-width: 30%;
+    padding: .5rem .5rem .5rem .5rem;
     background: var(--bg-secondary);
     border-radius: .5rem .5rem;
     transition: all 0.2s;
 }
 
+.product-image {
+    width: 40%;
+    height: auto;
+    box-shadow: 0px 30px 50px 0px rgba(0, 0, 0, 0.025);
+}
+
 .product-fs {
     height: 80%;
     width: 80%;
     font-size: 150%;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: space-around;
     flex-wrap: wrap;
     padding: .5rem 1rem 2rem 2rem;
     background: var(--bg-secondary);
@@ -83,4 +89,11 @@
 
 .product-description {
     font-size: 70%;
+}
+
+.hide-overflow {
+    inline-size: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
\ No newline at end of file
diff --git a/templates/content.html b/templates/content.html
index d96f5ef..e28e556 100644
--- a/templates/content.html
+++ b/templates/content.html
@@ -11,7 +11,7 @@
                         </div>
                         <div class="product-details">
                             <div class="product-price">£{{product.cost}}</div>
-                            <div class="product-description">{{product.description}}</div>
+                            <div class="product-description hide-overflow ">{{product.description}}</div>
                         </div>
                     </div>
                 <div class="product-add-to-cart"></div>