diff --git a/src/components/MiniComponents/OfferSection/index.js b/src/components/MiniComponents/OfferSection/index.js
index 3d65c19..e975a53 100644
--- a/src/components/MiniComponents/OfferSection/index.js
+++ b/src/components/MiniComponents/OfferSection/index.js
@@ -1,7 +1,27 @@
 import React from "react";
+import Button from "../../ButtonDesign/Button";
 
 const OfferSection = () => {
-  return 
OfferSection
;
+  return (
+    
+      
+      
+      {/* divider */}
+      
+      {/* left Button */}
+      
+    
+  );
 };
 
 export default OfferSection;
diff --git a/src/index.scss b/src/index.scss
index 1f209e5..bbda708 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -18,6 +18,23 @@ body {
   background-color: #f5f5f5;
 }
 
+.btn {
+  height: 300px;
+  position: relative;
+  background-color: #000;
+}
+
+.btn:before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  top: 100px;
+  left: 0;
+  background-color: #000;
+  transform: skewX(25deg);
+}
+
 .rtl {
   direction: rtl;
 }