diff --git a/package.json b/package.json
index e30af1c..9d630ce 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "eslint-config-next": "13.3.1",
     "lucide-react": "^0.176.0",
     "next": "13.3.1",
+    "next-cloudinary": "^4.4.0",
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 851d0b9..8bcafd9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -43,6 +43,9 @@ dependencies:
   next:
     specifier: 13.3.1
     version: 13.3.1(react-dom@18.2.0)(react@18.2.0)
+  next-cloudinary:
+    specifier: ^4.4.0
+    version: 4.4.0(next@13.3.1)(react@18.2.0)
   postcss:
     specifier: 8.4.23
     version: 8.4.23
@@ -85,6 +88,29 @@ packages:
       regenerator-runtime: 0.13.11
     dev: false
 
+  /@cloudinary-util/url-loader@3.2.0:
+    resolution: {integrity: sha512-jCgguukNTPLKGQZIVWRObXHySBde16wPvTs1S8J89/vtPhQsGxpE83jOVCll539ndm5qa5DrFfsgAsLd3g9CxQ==}
+    dependencies:
+      '@cloudinary-util/util': 2.0.1
+      '@cloudinary/url-gen': 1.10.0
+    dev: false
+
+  /@cloudinary-util/util@2.0.1:
+    resolution: {integrity: sha512-d2imgUjYTLjv8ZhZPMAts/uPbMvIE71X4I/5hwdY/7vM4BuFQoJMSyq+h2pW1z1MyGG9BOWBm70vp082lSrbEQ==}
+    dev: false
+
+  /@cloudinary/transformation-builder-sdk@1.2.7:
+    resolution: {integrity: sha512-Q1fhw37BXXmN6/BCxdnw3OUJ6aAy/zpDWH5t+xIwmG5GtYUYMZqOjvdOkOhWBmus9ptq9znuGsYn8h5vtSjT+w==}
+    dependencies:
+      '@cloudinary/url-gen': 1.10.0
+    dev: false
+
+  /@cloudinary/url-gen@1.10.0:
+    resolution: {integrity: sha512-J3V+gzT6Tepw9bMrR3prWVbW22cIFJtPS8Wkt1WFSZVHWpZx8/vv9ACHaxUmRqaSkjhX8ErsuzDY5YxdWnaCbw==}
+    dependencies:
+      '@cloudinary/transformation-builder-sdk': 1.2.7
+    dev: false
+
   /@eslint-community/eslint-utils@4.4.0(eslint@8.39.0):
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2105,6 +2131,19 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: false
 
+  /next-cloudinary@4.4.0(next@13.3.1)(react@18.2.0):
+    resolution: {integrity: sha512-nV/HNNXmZtAyyRDcjIhuLdxGhkyy9KeNYgRLieJtIL1AnolhWurrJtjr3eGq4wOEh56QWqJtD1mOYRaTXW0o8Q==}
+    peerDependencies:
+      next: ^12 || ^13
+      react: ^17 || ^18
+    dependencies:
+      '@cloudinary-util/url-loader': 3.2.0
+      '@cloudinary-util/util': 2.0.1
+      '@cloudinary/url-gen': 1.10.0
+      next: 13.3.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+    dev: false
+
   /next@13.3.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-eByWRxPzKHs2oQz1yE41LX35umhz86ZSZ+mYyXBqn2IBi2hyUqxBA88avywdr4uyH+hCJczegGsDGWbzQA5Rqw==}
     engines: {node: '>=14.18.0'}
diff --git a/src/components/cloudop-image.tsx b/src/components/cloudop-image.tsx
new file mode 100644
index 0000000..9749794
--- /dev/null
+++ b/src/components/cloudop-image.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { CloudOpImageProps } from "@/types";
+import { CldImage } from "next-cloudinary";
+
+export default function CloudOpImage({
+  className,
+  width,
+  height,
+  src,
+  alt,
+  style,
+  priority,
+}: CloudOpImageProps) {
+  return (
+    <CldImage
+      className={className}
+      width={width}
+      height={height}
+      src={src}
+      alt={alt}
+      format="webp"
+      quality={75}
+      style={style}
+      priority={priority}
+    />
+  );
+}
diff --git a/src/components/design-card.tsx b/src/components/design-card.tsx
index 2cf051d..e165436 100644
--- a/src/components/design-card.tsx
+++ b/src/components/design-card.tsx
@@ -1,21 +1,18 @@
 import { DesignCardProps } from "@/types";
-import Image from "next/image";
 import Link from "next/link";
+import CloudOpImage from "./cloudop-image";
 
 export default function DesignCard({ item }: DesignCardProps) {
   return (
     <div className="w-full">
       <Link href={item.dribbble_url} target="_blank" rel="noopener noreferrer">
-        <Image
+        <CloudOpImage
           className="mr-0 transition-all rounded-lg brightness-100 hover:brightness-75"
           src={item.image_url}
           width={800}
           height={600}
           alt={item.name}
-          style={{
-            height: "auto",
-          }}
-          priority
+          priotity={true}
         />
       </Link>
     </div>
diff --git a/src/components/image-scroll.tsx b/src/components/image-scroll.tsx
index bdf0650..c0a7624 100644
--- a/src/components/image-scroll.tsx
+++ b/src/components/image-scroll.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { ImageScrollProps } from "@/types";
 import Link from "next/link";
 
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index ba23cbf..74c979b 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -113,3 +113,13 @@ export interface ButtonAccentProps {
   styleNormal?: React.CSSProperties;
   styleHover?: React.CSSProperties;
 }
+
+export interface CloudOpImageProps {
+  className?: string;
+  width: number;
+  height: number;
+  src: string;
+  alt: string;
+  style?: React.CSSProperties;
+  priority?: boolean;
+}