diff --git a/pages/test.tsx b/pages/test.tsx
index 29f41437a..ddaceab57 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -44,6 +44,26 @@ export default function Test() {
       <RelevantBlogPosts />
       <EmptyCommon description="" />
       <EmptyCommon description="No product" />
+      <div className="shape-common-lg" style={{ background: "blue" }}>
+        <div className="inner">
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium delectus incidunt et cupiditate soluta, deleniti dolorem tempora officia atque earum recusandae vitae libero molestiae quas officiis ducimus voluptas exercitationem. Dolor non illo distinctio, nemo numquam quo nihil debitis magni ullam quasi optio, commodi at! Error, asperiores sint. Labore, at ipsum.
+        </div>
+      </div>
+      <div className="shape-common-lg-border">
+        <div className="inner">
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium delectus incidunt et cupiditate soluta, deleniti dolorem tempora officia atque earum recusandae vitae libero molestiae quas officiis ducimus voluptas exercitationem. Dolor non illo distinctio, nemo numquam quo nihil debitis magni ullam quasi optio, commodi at! Error, asperiores sint. Labore, at ipsum.
+        </div>
+      </div>
+
+      <div className="shape-common">
+        Lorem ipsum dolor
+      </div>
+
+      <div className="shape-common-border">
+        <div className="inner">
+          Lorem ipsum dolor sit
+        </div>
+      </div>
 
     </>
   )
diff --git a/src/components/common/CustomShapeSvg/CustomShapeSvg.tsx b/src/components/common/CustomShapeSvg/CustomShapeSvg.tsx
new file mode 100644
index 000000000..573160b70
--- /dev/null
+++ b/src/components/common/CustomShapeSvg/CustomShapeSvg.tsx
@@ -0,0 +1,21 @@
+
+const CustomShapeSvg = () => {
+    return (
+        <>
+            <svg width="0" height="0" viewBox="0 0 1 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <clipPath id="svg-custom-shape" clipPathUnits="objectBoundingBox">
+                    <path
+                        d="M0.0172975 0.136181C0.0343229 -0.030626 0.360144 0.00272041 0.510753 0.00272041C0.640763 0.00272041 0.779987 0.0273237 0.944182 0.0678791C0.966966 0.0735065 0.986 0.126214 0.990073 0.19938C0.994835 0.284918 1 0.404512 1 0.520863C1 0.736726 0.993726 0.834689 0.982222 0.886228C0.943784 1.05844 0.733836 0.983992 0.493833 0.983992C0.30975 0.983992 0.127708 0.957276 0.052872 0.944826C0.0312385 0.941228 0.0126875 0.895116 0.00839312 0.826023C0.00415553 0.757843 0 0.662594 0 0.551233C0 0.345672 0.000272106 0.302988 0.0172975 0.136181Z"
+                        fill="#B5B5B5" />
+                </clipPath>
+            </svg>
+            <svg width="0" height="0" viewBox="0 0 1 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <clipPath id="svg-custom-shape-lg" clipPathUnits="objectBoundingBox">
+                    <path d="M0.00309475 0.648049L0.016817 0.981984H0.165017L0.368106 0.987044C0.428484 0.985357 0.660022 0.997877 0.750058 0.998542C0.845065 0.999243 0.83562 1.00172 0.881179 0.998007C0.938818 0.993313 0.955418 0.966805 0.96914 0.941507C0.982862 0.916209 0.99209 0.790258 0.99384 0.76948C0.995632 0.748196 1.00207 0.572154 0.999329 0.425425C0.996584 0.278696 0.977373 0.0408933 0.96914 0.0257144C0.960907 0.0105355 0.546495 0.000416471 0.532773 0.000416471C0.519051 0.000416471 0.329256 -0.00466047 0.156356 0.0206377C-0.0165445 0.0459358 0.0135012 0.0186561 0.00526778 0.180564C-0.00116735 0.30711 -0.00147933 0.563722 0.00309475 0.648049Z" fill="#C4C4C4" />
+                </clipPath>
+            </svg>
+        </>
+    )
+}
+
+export default CustomShapeSvg
\ No newline at end of file
diff --git a/src/components/common/CustomShapeSvg/ViewAllItem.module.scss b/src/components/common/CustomShapeSvg/ViewAllItem.module.scss
new file mode 100644
index 000000000..b4ec26872
--- /dev/null
+++ b/src/components/common/CustomShapeSvg/ViewAllItem.module.scss
@@ -0,0 +1,16 @@
+@import "../../../styles/utilities";
+
+.viewAll {
+    display: flex;
+    .content {
+        color: var(--primary);
+        margin: 0.8rem 0.8rem 0.8rem 0;
+        font-weight: bold;
+    }
+    .vector {
+        margin: 0.8rem 0rem 0.8rem 0rem;
+        svg path {
+            fill: var(--primary);
+        }
+    }
+}
diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx
index 17f520185..a808c33ff 100644
--- a/src/components/common/Layout/Layout.tsx
+++ b/src/components/common/Layout/Layout.tsx
@@ -2,7 +2,7 @@ import { CommerceProvider } from '@framework'
 import { useRouter } from 'next/router'
 import { FC } from 'react'
 import { useModalCommon } from 'src/components/hooks'
-import { CartDrawer } from '..'
+import { CartDrawer, CustomShapeSvg } from '..'
 import Footer from '../Footer/Footer'
 import Header from '../Header/Header'
 import s from './Layout.module.scss'
@@ -30,6 +30,7 @@ const Layout: FC<Props> = ({ children }) => {
                 <Header />
                 <main >{children}</main>
                 <button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
+                <CustomShapeSvg/>
                 <CartDrawer
                     visible={visibleCartDrawer}
                     onClose={closeCartDrawer} />
diff --git a/src/components/common/StaticImage/StaticImage.tsx b/src/components/common/StaticImage/StaticImage.tsx
index abc27912a..f744e492d 100644
--- a/src/components/common/StaticImage/StaticImage.tsx
+++ b/src/components/common/StaticImage/StaticImage.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import s from './ImgWithLink.module.scss'
+import s from './StaticImage.module.scss'
 import Image from 'next/image'
 
 export interface Props {
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index d124b0578..52c372a83 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -41,3 +41,4 @@ export { default as DrawerCommon} from './DrawerCommon/DrawerCommon'
 export { default as CartDrawer} from './CartDrawer/CartDrawer'
 export { default as StaticImage} from './StaticImage/StaticImage'
 export { default as EmptyCommon} from './EmptyCommon/EmptyCommon'
+export { default as CustomShapeSvg} from './CustomShapeSvg/CustomShapeSvg'
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
index 6b919de76..fd604735b 100644
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@@ -112,6 +112,71 @@
         border-radius: 60% 2% 2% 2%/ 6% 50% 50% 50%;
     }
 
+    .shape-common {
+        all: unset;
+        position: relative;
+        $border: 2px;
+        margin: $border;
+        color: white;
+        background: palevioletred;
+        background-size: cover;
+        clip-path: url(#svg-custom-shape);
+    }
+
+    .shape-common-border {
+        all: unset;
+        position: relative;
+        $border: 2px;
+        margin: $border;
+
+        .inner {
+            color: red;
+            background: papayawhip;
+            background-size: cover;
+            clip-path: url(#svg-custom-shape);
+        }
+        &::before {
+            position: absolute;
+            content: "";
+            width: calc(100% + #{$border} * 2);
+            height: calc(100% + #{$border} * 2);
+            background-color: var(--primary);
+            top: calc(#{$border} * -1);
+            left: calc(#{$border} * -1);
+            clip-path: url(#svg-custom-shape);
+            z-index: -1;
+        }
+    }
+
+    .shape-common-lg {
+        background-size: cover;
+        clip-path: url(#svgClip3);
+        padding: 2rem;
+    }
+    
+    .shape-common-lg-border {
+        position: relative;
+        $border: 2px;
+        margin: $border;
+    
+        .inner {
+            padding: 2rem;
+            background-size: cover;
+            clip-path: url(#svg-custom-shape-lg);
+        }
+        &::before {
+            position: absolute;
+            content: "";
+            width: calc(100% + #{$border} * 2);
+            height: calc(100% + #{$border} * 2);
+            background-color: wheat;
+            top: calc(#{$border} * -1);
+            left: calc(#{$border} * -1);
+            clip-path: url(#svg-custom-shape-lg);
+            z-index: -1;
+        }
+    }
+
     .font-heading {
         font-family: var(--font-heading);
     }
@@ -135,7 +200,7 @@
 
         &::-webkit-scrollbar-thumb {
             border-radius: 10px;
-            background-color: var(--primary)
+            background-color: var(--primary);
         }
     }