diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 994c6a5..6febcd1 100755
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -8594,4 +8594,28 @@ LND PAGE STYLE STARTS HERE
   .banner_text h1{
     font-size: 30px;
   }
+}
+
+
+/* -----------Interface_Section-Css-Start----------------- */
+
+/* interface wraper */
+.interface_section .screen_slider {
+  margin-top: 35px;
+  min-height: 720px;
+}
+
+/* interface images */
+.interface_section .owl-item .screen_frame_img img {
+  transform: scale(.9);
+  border: 2px solid #000;
+  border-radius: 20px;
+  transition: 1s all;
+  margin: 0 auto;
+}
+
+.interface_section .owl-item.center .screen_frame_img img {
+  transform: scale(1);
+  border: 3px solid #000;
+
 }
\ No newline at end of file
diff --git a/src/components/HomeOne/FeaturedScreen.js b/src/components/HomeOne/FeaturedScreen.js
new file mode 100644
index 0000000..1b7c560
--- /dev/null
+++ b/src/components/HomeOne/FeaturedScreen.js
@@ -0,0 +1,78 @@
+import React from 'react'
+import OwlCarousel from 'react-owl-carousel'
+import localImgLoad from '../../lib/localImgLoad'
+
+export default function FeaturedScreen() {
+  
+    const screen_slider = {
+        loop:true,
+        margin:10,
+        nav:false,
+        autoplay: true,
+        smartSpeed: 1500,
+        center: true,
+        dots: true, 
+        responsive:{
+            0:{
+                items:2
+            },
+            600:{
+                items:3
+            },
+            1000:{
+                items:5
+            }
+        }
+    }
+  return (
+    <>
+        <section className="appie-service-area pt-50 pb-50 interface_section">
+            <div className="container-fluid">
+                <div className="appie-traffic-title section_title text-center" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
+                    <h3 className='title'>App Screens <div className='section_sub_title'></div></h3>
+                    <p>Simplicity of use is our goal always. Here are some of our featured screens.</p>
+                </div>
+                <div className="screen_slider" >
+                    <OwlCarousel id="screen_slider" {...screen_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_1.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_2.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_3.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_4.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_5.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_6.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_7.png')} alt="image" />
+                            </div>
+                        </div>
+                    </OwlCarousel>
+                </div>
+            </div>
+        </section>
+    </>
+  )
+}
diff --git a/src/components/HomeOne/HeroHomeOne.js b/src/components/HomeOne/HeroHomeOne.js
index 1f94b58..71db6f7 100644
--- a/src/components/HomeOne/HeroHomeOne.js
+++ b/src/components/HomeOne/HeroHomeOne.js
@@ -3,25 +3,14 @@ import heroThumbOne from '../../assets/images/app-thumb-1.png';
 import heroThumbOne1 from '../../assets/images/app-thumb-2.png';
 
 import heroThumbTwo from '../../assets/images/app-pic.png';
+import shapeTwo from '../../assets/images/shape/shape-2.png';
+import shapeThree from '../../assets/images/shape/shape-3.png';
+import shapeFour from '../../assets/images/shape/shape-4.png';
 import getConfig from './../../Config/config'
-
 import CustomSlider from '../customSlider/CustomSlider';
 
-import Slider1 from '../../assets/images/slider/slider_1.png'
-import Slider2 from '../../assets/images/slider/slider_2.png'
-import Slider3 from '../../assets/images/slider/slider_3.png'
-import Slider4 from '../../assets/images/slider/slider_4.png'
-import Slider5 from '../../assets/images/slider/slider_5.png'
-import Slider6 from '../../assets/images/slider/slider_6.png'
-import Slider7 from '../../assets/images/slider/slider_7.png'
-
-
-
 
 function HeroHomeOne() {
-
-  const Sliders = [Slider1, Slider2, Slider3, Slider4, Slider5, Slider6, Slider7]
-
   var site = getConfig()[0];
   return (
     <>
@@ -62,9 +51,10 @@ function HeroHomeOne() {
                   data-wow-duration="2000ms"
                   data-wow-delay="200ms"
                 >
+                  {/* <img src={heroThumbOne} alt="WrenchBoard" /> */}
                   <div style={{ width: '350px', margin: 'auto' }}>
                     <CustomSlider
-                      images={Sliders}
+                      images={[heroThumbOne, heroThumbOne1, heroThumbOne]}
                       speed='5'
                       indicatorColor='#333'
                     />
diff --git a/src/components/HomeOne/index.js b/src/components/HomeOne/index.js
index 574a0c5..4c7b502 100644
--- a/src/components/HomeOne/index.js
+++ b/src/components/HomeOne/index.js
@@ -18,6 +18,7 @@ import TrafficHomeTwo from './TrafficHomeTwo';
 import WrenchBoardHome from './WrenchBoardHome';
 import RecentJobsOne from './RecentJobsOne';
 import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
+import FeaturedScreen from './FeaturedScreen';
 //import BlogData from './../../Services/BlogData';
 
 function HomeOne() {
@@ -35,6 +36,7 @@ function HomeOne() {
             {/*<FaqHomeOne />*/}
             {/*<TrafficHomeOne />*/}
             <TrafficHomeTwo />
+            <FeaturedScreen />
             {/*<TestimonialHomeOne />*/}
             {/*<TeamHomeOne />*/}
             {/*<PricingHomeOne />*/}