diff --git a/src/components/Product/SingleProduct.component.tsx b/src/components/Product/SingleProduct.component.tsx
index 481deb30c..c9c063f45 100644
--- a/src/components/Product/SingleProduct.component.tsx
+++ b/src/components/Product/SingleProduct.component.tsx
@@ -1,4 +1,3 @@
-/*eslint complexity: ["error", 20]*/
 // Imports
 import { useState, useEffect } from 'react';
 
@@ -43,13 +42,12 @@ const SingleProduct = ({ product }: IProductRootObject) => {
   if (process.browser) {
     DESCRIPTION_WITHOUT_HTML = new DOMParser().parseFromString(
       description,
-      'text/html',
+      'text/html'
     ).body.textContent;
   }
 
   return (
     <section className="bg-white mb-[8rem] md:mb-12">
-      {/* Show loading spinner while loading, and hide content while loading */}
       {isLoading ? (
         <div className="h-56 mt-20">
           <p className="text-2xl font-bold text-center">Laster produkt ...</p>
@@ -57,95 +55,99 @@ const SingleProduct = ({ product }: IProductRootObject) => {
           <LoadingSpinner />
         </div>
       ) : (
-        <div className="container flex flex-wrap items-center pt-4 pb-12 mx-auto">
-          <div className="grid grid-cols-1 gap-4 md:mt-16 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2">
-            {image && (
-              <img
-                id="product-image"
-                src={image.sourceUrl}
-                alt={name}
-                className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 md:hover:grow md:hover:scale-105"
-              />
-            )}
-            {!image && (
+        <div className="container mx-auto px-4 py-8">
+          <div className="flex flex-col md:grid md:grid-cols-2 md:gap-8">
+            {/* Image Container */}
+            <div className="mb-6 md:mb-0">
               <img
                 id="product-image"
                 src={
-                  process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ??
+                  image?.sourceUrl ||
+                  process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ||
                   placeholderFallBack
                 }
                 alt={name}
-                className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 md:hover:grow md:hover:shadow-lg md:hover:scale-105"
+                className="w-full h-auto object-cover transition duration-500 ease-in-out transform md:hover:scale-105"
               />
-            )}
-            <div className="px-4 md:ml-8">
+            </div>
+
+            {/* Product Details Container */}
+            <div className="flex flex-col">
               <h1 className="text-2xl font-bold text-center md:text-left mb-4">
                 {name}
               </h1>
-              {/* Display sale price when on sale */}
-              {onSale && (
-                <div className="flex flex-col md:flex-row items-center md:items-start mb-4">
-                  <p className="text-2xl font-bold text-gray-900">
-                    {product.variations && filteredVariantPrice(price, '')}
-                    {!product.variations && salePrice}
-                  </p>
-                  <p className="text-xl text-gray-500 line-through md:ml-4">
-                    {product.variations && filteredVariantPrice(price, 'right')}
-                    {!product.variations && regularPrice}
-                  </p>
-                </div>
-              )}
-              {/* Display regular price when not on sale */}
-              {!onSale && <p className="text-2xl font-bold mb-4">{price}</p>}
-              <p className="text-lg mb-4 text-center md:text-left">
+
+              {/* Price Display */}
+              <div className="text-center md:text-left mb-6">
+                {onSale ? (
+                  <div className="flex flex-col md:flex-row items-center md:items-start gap-2">
+                    <p className="text-2xl font-bold text-gray-900">
+                      {product.variations
+                        ? filteredVariantPrice(price, '')
+                        : salePrice}
+                    </p>
+                    <p className="text-xl text-gray-500 line-through">
+                      {product.variations
+                        ? filteredVariantPrice(price, 'right')
+                        : regularPrice}
+                    </p>
+                  </div>
+                ) : (
+                  <p className="text-2xl font-bold">{price}</p>
+                )}
+              </div>
+
+              {/* Description */}
+              <p className="text-lg mb-6 text-center md:text-left">
                 {DESCRIPTION_WITHOUT_HTML}
               </p>
+
+              {/* Stock Status */}
               {Boolean(product.stockQuantity) && (
-                <div className="mb-4 p-2 bg-green-100 border border-green-400 rounded-lg mx-auto md:mx-0 max-w-[14.375rem]">
-                  <p className="text-lg text-green-700 font-semibold text-center md:text-left">
-                    {product.stockQuantity} på lager
-                  </p>
+                <div className="mb-6 mx-auto md:mx-0">
+                  <div className="p-2 bg-green-100 border border-green-400 rounded-lg max-w-[14.375rem]">
+                    <p className="text-lg text-green-700 font-semibold text-center md:text-left">
+                      {product.stockQuantity} på lager
+                    </p>
+                  </div>
                 </div>
               )}
+
+              {/* Variations Select */}
               {product.variations && (
-                <div className="mb-4">
+                <div className="mb-6 mx-auto md:mx-0 w-full max-w-[14.375rem]">
                   <label
                     htmlFor="variant"
-                    className="block text-lg font-medium mb-2"
+                    className="block text-lg font-medium mb-2 text-center md:text-left"
                   >
                     Varianter
                   </label>
                   <select
                     id="variant"
                     name="variant"
-                    className="max-w-[14.375rem] block w-full px-4 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                    onChange={(e) => {
-                      setSelectedVariation(Number(e.target.value));
-                    }}
+                    className="w-full px-4 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    onChange={(e) => setSelectedVariation(Number(e.target.value))}
                   >
                     {product.variations.nodes.map(
-                      ({ id, name, databaseId, stockQuantity }) => {
-                        // Remove product name from variation name
-                        const filteredName = name.split('- ').pop();
-                        return (
-                          <option key={id} value={databaseId}>
-                            {filteredName} - ({stockQuantity} på lager)
-                          </option>
-                        );
-                      },
+                      ({ id, name, databaseId, stockQuantity }) => (
+                        <option key={id} value={databaseId}>
+                          {name.split('- ').pop()} - ({stockQuantity} på lager)
+                        </option>
+                      )
                     )}
                   </select>
                 </div>
               )}
-              <div className="w-full p-4 md:p-0">
-                {product.variations && (
+
+              {/* Add to Cart Button */}
+              <div className="w-full mx-auto md:mx-0 max-w-[14.375rem]">
+                {product.variations ? (
                   <AddToCart
                     product={product}
                     variationId={selectedVariation}
                     fullWidth={true}
                   />
-                )}
-                {!product.variations && (
+                ) : (
                   <AddToCart product={product} fullWidth={true} />
                 )}
               </div>