diff --git a/PuraceDemo/PuraceDemo.xcodeproj/project.pbxproj b/PuraceDemo/PuraceDemo.xcodeproj/project.pbxproj
index 05987dc..5f04a99 100644
--- a/PuraceDemo/PuraceDemo.xcodeproj/project.pbxproj
+++ b/PuraceDemo/PuraceDemo.xcodeproj/project.pbxproj
@@ -11,6 +11,7 @@
 		2F1F7D7128317E0700AA30DB /* CollectionCardExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F1F7D7028317E0700AA30DB /* CollectionCardExample.swift */; };
 		2F1F7D7328318D9900AA30DB /* TextExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F1F7D7228318D9900AA30DB /* TextExample.swift */; };
 		2F1F7D7528318EEE00AA30DB /* ButtonExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F1F7D7428318EEE00AA30DB /* ButtonExample.swift */; };
+		2F77A234283C4AC700F143FB /* ImageExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F77A233283C4AC700F143FB /* ImageExample.swift */; };
 		2F9321B3282EE49E003DA929 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F9321B2282EE49E003DA929 /* AppDelegate.swift */; };
 		2F9321B5282EE49E003DA929 /* SceneDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F9321B4282EE49E003DA929 /* SceneDelegate.swift */; };
 		2F9321B7282EE49E003DA929 /* MenuView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F9321B6282EE49E003DA929 /* MenuView.swift */; };
@@ -28,6 +29,7 @@
 		2F1F7D7028317E0700AA30DB /* CollectionCardExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CollectionCardExample.swift; sourceTree = "<group>"; };
 		2F1F7D7228318D9900AA30DB /* TextExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextExample.swift; sourceTree = "<group>"; };
 		2F1F7D7428318EEE00AA30DB /* ButtonExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonExample.swift; sourceTree = "<group>"; };
+		2F77A233283C4AC700F143FB /* ImageExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ImageExample.swift; sourceTree = "<group>"; };
 		2F9321AF282EE49E003DA929 /* PuraceDemo.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = PuraceDemo.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		2F9321B2282EE49E003DA929 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
 		2F9321B4282EE49E003DA929 /* SceneDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SceneDelegate.swift; sourceTree = "<group>"; };
@@ -63,6 +65,7 @@
 				2FA986782837351B000DB409 /* GridExample.swift */,
 				2FA9867A28373DD3000DB409 /* SnackbarExample.swift */,
 				2F072906283C00080098C5AF /* LoaderExample.swift */,
+				2F77A233283C4AC700F143FB /* ImageExample.swift */,
 			);
 			path = Examples;
 			sourceTree = "<group>";
@@ -187,6 +190,7 @@
 				2F1F7D7328318D9900AA30DB /* TextExample.swift in Sources */,
 				2F9321B7282EE49E003DA929 /* MenuView.swift in Sources */,
 				2F9321B3282EE49E003DA929 /* AppDelegate.swift in Sources */,
+				2F77A234283C4AC700F143FB /* ImageExample.swift in Sources */,
 				2FA9867B28373DD3000DB409 /* SnackbarExample.swift in Sources */,
 				2F1F7D7528318EEE00AA30DB /* ButtonExample.swift in Sources */,
 				2FA986792837351B000DB409 /* GridExample.swift in Sources */,
diff --git a/PuraceDemo/PuraceDemo/Examples/ImageExample.swift b/PuraceDemo/PuraceDemo/Examples/ImageExample.swift
new file mode 100644
index 0000000..930ba80
--- /dev/null
+++ b/PuraceDemo/PuraceDemo/Examples/ImageExample.swift
@@ -0,0 +1,19 @@
+//
+//  ImageExample.swift
+//  PuraceDemo
+//
+//  Created by Juan Hurtado on 23/05/22.
+//
+
+import Foundation
+import SwiftUI
+import Purace
+
+struct ImageExample: View {
+    var body: some View {
+        Text("`PraceImageView(url: ...)`")
+        PuraceImageView(url: URL(string: "https://www.biografiasyvidas.com/biografia/c/fotos/caldas_francisco_jose_2.jpg"))
+            .frame(width: 150, height: 150)
+        Spacer()
+    }
+}
diff --git a/PuraceDemo/PuraceDemo/MenuView.swift b/PuraceDemo/PuraceDemo/MenuView.swift
index cbb2a20..14d4d01 100644
--- a/PuraceDemo/PuraceDemo/MenuView.swift
+++ b/PuraceDemo/PuraceDemo/MenuView.swift
@@ -26,6 +26,9 @@ struct MenuView: View {
                     NavigationLink("Loader") {
                         LoaderExample()
                     }
+                    NavigationLink("Image") {
+                        ImageExample()
+                    }
                 }
                 Section(header: Text("Complex")) {
                     NavigationLink("Collection card") {
diff --git a/Sources/Purace/Views/Basic/Image/PuraceImageView.swift b/Sources/Purace/Views/Basic/Image/PuraceImageView.swift
new file mode 100644
index 0000000..db551b3
--- /dev/null
+++ b/Sources/Purace/Views/Basic/Image/PuraceImageView.swift
@@ -0,0 +1,34 @@
+//
+//  PuraceImageView.swift
+//  
+//
+//  Created by Juan Hurtado on 23/05/22.
+//
+
+import Foundation
+import SwiftUI
+import Kingfisher
+
+public struct PuraceImageView: View {
+    let url: URL?
+    
+    public init(url: URL?) {
+        self.url = url
+    }
+    
+    public var body: some View {
+        KFImage.url(url)
+            .resizable()
+            .fade(duration: 0.2)
+            .placeholder { _ in
+                GeometryReader { reader in
+                    ZStack {
+                        PuraceCircularLoaderView()
+                            .foregroundColor(PuraceStyle.Color.G3)
+                            .frame(width: reader.size.width * 0.1, height: reader.size.width * 0.1)
+                            .position(x: reader.size.width / 2, y: reader.size.height / 2)
+                    }
+                }
+            }
+    }
+}
diff --git a/Sources/Purace/Views/Complex/Collection Card/PuraceCollectionCardView.swift b/Sources/Purace/Views/Complex/Collection Card/PuraceCollectionCardView.swift
index 7304b78..40af33a 100644
--- a/Sources/Purace/Views/Complex/Collection Card/PuraceCollectionCardView.swift	
+++ b/Sources/Purace/Views/Complex/Collection Card/PuraceCollectionCardView.swift	
@@ -56,21 +56,9 @@ public struct PuraceCollectionCardView: View {
         Group {
             if cards.isEmpty {
                 EmptyView()
-                
             } else {
                 ZStack(alignment: .center) {
-                    KFImage.url(cards[index].backgroundImage)
-                        .placeholder({ _ in
-                            GeometryReader { reader in
-                                ZStack {
-                                    PuraceCircularLoaderView()
-                                        .foregroundColor(PuraceStyle.Color.G3)
-                                        .frame(width: reader.size.width * 0.1, height: reader.size.width * 0.1)
-                                        .position(x: reader.size.width / 2, y: reader.size.height / 2)
-                                }
-                            }
-                        })
-                        .resizable()
+                    PuraceImageView(url: cards[index].backgroundImage)
                         .frame(width: getSize(at: index).width, height: getSize(at: index).height)
                         .aspectRatio(contentMode: .fill)
                     LinearGradient(gradient: Gradient(colors: [.clear, .black.opacity(0.35)]), startPoint: .top, endPoint: .center)
diff --git a/Sources/Purace/Views/Complex/Story/PuraceStoryView.swift b/Sources/Purace/Views/Complex/Story/PuraceStoryView.swift
index be53bf8..b0aefab 100644
--- a/Sources/Purace/Views/Complex/Story/PuraceStoryView.swift
+++ b/Sources/Purace/Views/Complex/Story/PuraceStoryView.swift
@@ -38,18 +38,7 @@ public struct PuraceStoryView: View {
     
     public var body: some View {
         ZStack {
-            KFImage.url(stories[currentIndex].image)
-                .placeholder({ _ in
-                    GeometryReader { reader in
-                        ZStack {
-                            PuraceCircularLoaderView()
-                                .foregroundColor(PuraceStyle.Color.G3)
-                                .frame(width: reader.size.width * 0.1, height: reader.size.width * 0.1)
-                                .position(x: reader.size.width / 2, y: reader.size.height / 2)
-                        }
-                    }
-                })
-                .resizable()
+            PuraceImageView(url: stories[currentIndex].image)
             LinearGradient(gradient: Gradient(colors: [.clear, .black.opacity(0.35)]), startPoint: .top, endPoint: .center)
             VStack {
                 Spacer()