diff --git a/public/data.json b/public/data.json
new file mode 100644
index 0000000..e69de29
diff --git a/src/App.js b/src/App.js
index 3038ae6..7450632 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,14 @@
 import React from "react";
 import Nav from "./components/Nav";
 import Hero from "./components/Hero";
+import Features from "./components/Features";
 
 function App() {
   return (
     <>
       <Nav/>
       <Hero />
+      <Features/>
     </>
   );
 }
diff --git a/src/assets/images/desktop/image-interactive.jpg b/src/assets/images/desktop/imageinteractive.jpg
similarity index 100%
rename from src/assets/images/desktop/image-interactive.jpg
rename to src/assets/images/desktop/imageinteractive.jpg
diff --git a/src/assets/images/mobile/image-interactive.jpg b/src/assets/images/mobile/imageinteractivem.jpg
similarity index 100%
rename from src/assets/images/mobile/image-interactive.jpg
rename to src/assets/images/mobile/imageinteractivem.jpg
diff --git a/src/components/Features.jsx b/src/components/Features.jsx
new file mode 100644
index 0000000..64a29be
--- /dev/null
+++ b/src/components/Features.jsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import imageinteractive from '../assets/images/desktop/imageinteractive.jpg';
+import imageinteractivem from '../assets/images/mobile/imageinteractivem.jpg';
+// imageinteractivem.jpg
+
+function Features() {
+  return (
+    <>
+        <section class="py-10 bg-white sm:py-16 lg:py-24">
+            <div class="px-4 mx-auto max-w-screen-xl sm:px-6 lg:px-8">
+                <div class="relative grid items-center grid-cols-1 lg:grid-cols-2 ">
+                    <div class="relative lg:mb-12 ">
+                        <div class="">
+                            <img class="relative " src={imageinteractive} alt="" />
+                        </div>
+                    </div>
+
+                    <div class="lg:p-16 text-center lg:text-justify lg:max-w-2xl bg-white lg:absolute left-[30rem] top-[8rem]">
+                        <h2 class="mt-8 lg:mt-0 text-xl font-thin tracking-wider leading-tight text-gray-500 lg:text-black sm:text-4xl lg:text-4xl lg:leading-tight">THE LEADER IN<br/> INTERACTIVE VR</h2>
+                        <p class="text-lg text-gray-500 mt-9">
+                            Founded in 2011, Loopstudios has been producing world-class
+                            virtual reality projects for some of the best companies around the globe.
+                            Our award-winning creations have transformed businesses through digital experiences that binf to their brand.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </>
+  )
+}
+
+export default Features