diff --git a/package-lock.json b/package-lock.json
index c927db62..60140390 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,10 +9,10 @@
       "version": "0.1.0",
       "dependencies": {
         "@headlessui/react": "^1.4.2",
+        "@imageengine/react": "^0.10.6",
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
-        "lazysizes": "^5.3.2",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^6.2.1",
@@ -1925,6 +1925,14 @@
         "react-dom": "^16 || ^17 || ^18"
       }
     },
+    "node_modules/@imageengine/react": {
+      "version": "0.10.6",
+      "resolved": "https://registry.npmjs.org/@imageengine/react/-/react-0.10.6.tgz",
+      "integrity": "sha512-lzpAmqrZ977haAwcJl5iwzIqsHTDzVG3215d6M8MLPkxAb+hA8fLRugmpPEU34sxI3amAt3Ixt6l3Ko6Fy0Img==",
+      "peerDependencies": {
+        "react": "^17.0.2"
+      }
+    },
     "node_modules/@jest/console": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz",
@@ -11308,11 +11316,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/lazysizes": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-5.3.2.tgz",
-      "integrity": "sha512-22UzWP+Vedi/sMeOr8O7FWimRVtiNJV2HCa+V8+peZOw6QbswN9k58VUhd7i6iK5bw5QkYrF01LJbeJe0PV8jg=="
-    },
     "node_modules/lcid": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
@@ -19708,6 +19711,12 @@
       "integrity": "sha512-N8tv7kLhg9qGKBkVdtg572BvKvWhmiudmeEpOCyNwzOsZHCXBtl8AazGikIfUS+vBoub20Fse3BjawXDVPPdug==",
       "requires": {}
     },
+    "@imageengine/react": {
+      "version": "0.10.6",
+      "resolved": "https://registry.npmjs.org/@imageengine/react/-/react-0.10.6.tgz",
+      "integrity": "sha512-lzpAmqrZ977haAwcJl5iwzIqsHTDzVG3215d6M8MLPkxAb+hA8fLRugmpPEU34sxI3amAt3Ixt6l3Ko6Fy0Img==",
+      "requires": {}
+    },
     "@jest/console": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz",
@@ -27166,11 +27175,6 @@
       "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
       "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4="
     },
-    "lazysizes": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-5.3.2.tgz",
-      "integrity": "sha512-22UzWP+Vedi/sMeOr8O7FWimRVtiNJV2HCa+V8+peZOw6QbswN9k58VUhd7i6iK5bw5QkYrF01LJbeJe0PV8jg=="
-    },
     "lcid": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
diff --git a/package.json b/package.json
index 85c412ad..31ca5e3e 100644
--- a/package.json
+++ b/package.json
@@ -8,10 +8,10 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.4.2",
+    "@imageengine/react": "^0.10.6",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "lazysizes": "^5.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.1",
diff --git a/src/App.jsx b/src/App.jsx
index 5cd9ffb2..fd2c8346 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -14,32 +14,34 @@ import EventsPage from './pages/EventsPage';
 import SourcesPage from './pages/SourcesPage';
 import ReferencePage from './pages/ReferencePage';
 import ErrorPage from './pages/ErrorPage';
-import 'lazysizes';
 import './tailwind.min.css';
+import { ImageEngineProvider } from '@imageengine/react';
 
 function App() {
   return (
-    <Router>
-      <Routes>
-        <Route exact path='/' element={<HomePage />} />
-        <Route exact path='/about' element={<AboutUsPage />} />
-        <Route exact path='/festival/recipes' element={<RecipesPage />} />
-        <Route exact path='/festival/about' element={<AboutFestivalPage />} />
-        <Route exact path='/events' element={<EventsPage />} />
-        <Route exact path='/sources' element={<SourcesPage />} />
-        <Route exact path='/ref' element={<ReferencePage />} />
-        {/* redirects */}
-        <Route
-          exact
-          path='/festival'
-          element={<Navigate to='/festival/about' />}
-        />
-        <Route exact path='/home' element={<Navigate to='/' />} />
-        {/* -------------- */}
-        {/* Error page */}
-        <Route path='*' element={<ErrorPage />} />
-      </Routes>
-    </Router>
+    <ImageEngineProvider deliveryAddress='https://jsa7yin6.cdn.imgeng.in/'>
+      <Router>
+        <Routes>
+          <Route exact path='/' element={<HomePage />} />
+          <Route exact path='/about' element={<AboutUsPage />} />
+          <Route exact path='/festival/recipes' element={<RecipesPage />} />
+          <Route exact path='/festival/about' element={<AboutFestivalPage />} />
+          <Route exact path='/events' element={<EventsPage />} />
+          <Route exact path='/sources' element={<SourcesPage />} />
+          <Route exact path='/ref' element={<ReferencePage />} />
+          {/* redirects */}
+          <Route
+            exact
+            path='/festival'
+            element={<Navigate to='/festival/about' />}
+          />
+          <Route exact path='/home' element={<Navigate to='/' />} />
+          {/* -------------- */}
+          {/* Error page */}
+          <Route path='*' element={<ErrorPage />} />
+        </Routes>
+      </Router>
+    </ImageEngineProvider>
   );
 }
 
diff --git a/src/components/Banner/index.jsx b/src/components/Banner/index.jsx
index 1293d0b3..d7c0baa9 100644
--- a/src/components/Banner/index.jsx
+++ b/src/components/Banner/index.jsx
@@ -1,17 +1,26 @@
 import React from 'react';
 import './index.css';
-import empty from '../../empty.webp';
+// import empty from '../../empty.webp';
+import { Image } from '@imageengine/react';
 
 function Banner({ img, text }) {
   return (
     <div className='p-2 relative h-auto pt-0'>
-      <img
+      {/* <img
         className='lazyload filter object-cover vh w-full text-center brightness-90'
         src={empty}
         data-srcset={img}
         alt='banner'
         width='300'
         height='400'
+      /> */}
+      <Image
+        className='filter object-cover vh w-full text-center brightness-90'
+        src={img}
+        alt='banner'
+        width='300'
+        height='400'
+        directives={{ noOptimization: false, sharpess: 100 }}
       />
       <p className='text-6xl sm:text-7xl md:text-8xl lg:text-9xl text-white font-semibold centered outline banner-header'>
         {text}
diff --git a/src/components/Card/index.jsx b/src/components/Card/index.jsx
index a4db9772..83f7e7ac 100644
--- a/src/components/Card/index.jsx
+++ b/src/components/Card/index.jsx
@@ -2,7 +2,8 @@ import React from 'react';
 import './index.css';
 import { classNames } from '../../utils';
 import { v4 as uuid } from 'uuid';
-import empty from '../../empty.webp';
+// import empty from '../../empty.webp';
+import { Image } from '@imageengine/react';
 
 export default function Card({
   src,
@@ -20,12 +21,18 @@ export default function Card({
         className && className
       )}
     >
-      {/* card bg-transparent px-2 mb-3 my-1 px-0 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3 */}
-      <img
+      {/* <img
         src={empty}
         data-srcset={src}
         className='lazyload card-img card-img-top'
         alt='card banner'
+      /> */}
+      <Image
+        src={src}
+        className='card-img card-img-top'
+        alt='card banner'
+        width='100'
+        height='150'
       />
       <div>
         <div className='accordion' id={`acc-controller${id}`}>
diff --git a/yarn.lock b/yarn.lock
index 3b5ca7cd..b5c4c174 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1276,6 +1276,11 @@
   "resolved" "https://registry.npmjs.org/@headlessui/react/-/react-1.4.2.tgz"
   "version" "1.4.2"
 
+"@imageengine/react@^0.10.6":
+  "integrity" "sha512-lzpAmqrZ977haAwcJl5iwzIqsHTDzVG3215d6M8MLPkxAb+hA8fLRugmpPEU34sxI3amAt3Ixt6l3Ko6Fy0Img=="
+  "resolved" "https://registry.npmjs.org/@imageengine/react/-/react-0.10.6.tgz"
+  "version" "0.10.6"
+
 "@jest/console@^24.7.1", "@jest/console@^24.9.0":
   "integrity" "sha512-Zuj6b8TnKXi3q4ymac8EQfc3ea/uhLeCGThFqXeC8H9/raaH8ARPUTdId+XyGd03Z4In0/VjD2OYFcBF09fNLQ=="
   "resolved" "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz"
@@ -2460,6 +2465,13 @@
   "resolved" "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz"
   "version" "2.2.0"
 
+"bindings@^1.5.0":
+  "integrity" "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ=="
+  "resolved" "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz"
+  "version" "1.5.0"
+  dependencies:
+    "file-uri-to-path" "1.0.0"
+
 "bluebird@^3.5.5":
   "integrity" "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
   "resolved" "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz"
@@ -4807,6 +4819,24 @@
   "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   "version" "1.0.0"
 
+"fsevents@^1.2.7":
+  "integrity" "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw=="
+  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz"
+  "version" "1.2.13"
+  dependencies:
+    "bindings" "^1.5.0"
+    "nan" "^2.12.1"
+
+"fsevents@~2.3.2":
+  "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
+  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  "version" "2.3.2"
+
+"fsevents@2.0.6":
+  "integrity" "sha512-vfmKZp3XPM36DNF0qhW+Cdxk7xm7gTEHY1clv1Xq1arwRQuKZgAhw+NZNWbJBtuaNxzNXwhfdPYRrvIbjfS33A=="
+  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.0.6.tgz"
+  "version" "2.0.6"
+
 "function-bind@^1.1.1":
   "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
   "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@@ -7013,6 +7043,11 @@
   "resolved" "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz"
   "version" "0.0.7"
 
+"nan@^2.12.1":
+  "integrity" "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ=="
+  "resolved" "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz"
+  "version" "2.15.0"
+
 "nanomatch@^1.2.9":
   "integrity" "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA=="
   "resolved" "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz"