diff --git a/HikeApp.xcodeproj/project.pbxproj b/HikeApp.xcodeproj/project.pbxproj
index e0b2ae1..f5406df 100644
--- a/HikeApp.xcodeproj/project.pbxproj
+++ b/HikeApp.xcodeproj/project.pbxproj
@@ -7,15 +7,21 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
-		F4A0A8822C1F800B003AFEA1 /* HikeAppApp.swift in Sources */ = {isa = PBXBuildFile; fileRef = F4A0A8812C1F800B003AFEA1 /* HikeAppApp.swift */; };
+		F43259AF2C22279E00F258E5 /* CardView.swift in Sources */ = {isa = PBXBuildFile; fileRef = F43259AE2C22279E00F258E5 /* CardView.swift */; };
+		F4610AD42C28B67A0095D75F /* CustomBackgroundView.swift in Sources */ = {isa = PBXBuildFile; fileRef = F4610AD32C28B67A0095D75F /* CustomBackgroundView.swift */; };
+		F4610AD72C28B78C0095D75F /* ColorExtension.swift in Sources */ = {isa = PBXBuildFile; fileRef = F4610AD62C28B78C0095D75F /* ColorExtension.swift */; };
+		F4A0A8822C1F800B003AFEA1 /* HikeApp.swift in Sources */ = {isa = PBXBuildFile; fileRef = F4A0A8812C1F800B003AFEA1 /* HikeApp.swift */; };
 		F4A0A8842C1F800B003AFEA1 /* ContentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = F4A0A8832C1F800B003AFEA1 /* ContentView.swift */; };
 		F4A0A8862C1F800D003AFEA1 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = F4A0A8852C1F800D003AFEA1 /* Assets.xcassets */; };
 		F4A0A8892C1F800D003AFEA1 /* Preview Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = F4A0A8882C1F800D003AFEA1 /* Preview Assets.xcassets */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
+		F43259AE2C22279E00F258E5 /* CardView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CardView.swift; sourceTree = "<group>"; };
+		F4610AD32C28B67A0095D75F /* CustomBackgroundView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CustomBackgroundView.swift; sourceTree = "<group>"; };
+		F4610AD62C28B78C0095D75F /* ColorExtension.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ColorExtension.swift; sourceTree = "<group>"; };
 		F4A0A87E2C1F800B003AFEA1 /* HikeApp.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = HikeApp.app; sourceTree = BUILT_PRODUCTS_DIR; };
-		F4A0A8812C1F800B003AFEA1 /* HikeAppApp.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HikeAppApp.swift; sourceTree = "<group>"; };
+		F4A0A8812C1F800B003AFEA1 /* HikeApp.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HikeApp.swift; sourceTree = "<group>"; };
 		F4A0A8832C1F800B003AFEA1 /* ContentView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ContentView.swift; sourceTree = "<group>"; };
 		F4A0A8852C1F800D003AFEA1 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
 		F4A0A8882C1F800D003AFEA1 /* Preview Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = "Preview Assets.xcassets"; sourceTree = "<group>"; };
@@ -32,6 +38,23 @@
 /* End PBXFrameworksBuildPhase section */
 
 /* Begin PBXGroup section */
+		F4610AD22C28B6560095D75F /* Component */ = {
+			isa = PBXGroup;
+			children = (
+				F43259AE2C22279E00F258E5 /* CardView.swift */,
+				F4610AD32C28B67A0095D75F /* CustomBackgroundView.swift */,
+			);
+			path = Component;
+			sourceTree = "<group>";
+		};
+		F4610AD52C28B7730095D75F /* Utility */ = {
+			isa = PBXGroup;
+			children = (
+				F4610AD62C28B78C0095D75F /* ColorExtension.swift */,
+			);
+			path = Utility;
+			sourceTree = "<group>";
+		};
 		F4A0A8752C1F800B003AFEA1 = {
 			isa = PBXGroup;
 			children = (
@@ -51,8 +74,10 @@
 		F4A0A8802C1F800B003AFEA1 /* HikeApp */ = {
 			isa = PBXGroup;
 			children = (
-				F4A0A8812C1F800B003AFEA1 /* HikeAppApp.swift */,
+				F4A0A8812C1F800B003AFEA1 /* HikeApp.swift */,
 				F4A0A8832C1F800B003AFEA1 /* ContentView.swift */,
+				F4610AD22C28B6560095D75F /* Component */,
+				F4610AD52C28B7730095D75F /* Utility */,
 				F4A0A8852C1F800D003AFEA1 /* Assets.xcassets */,
 				F4A0A8872C1F800D003AFEA1 /* Preview Content */,
 			);
@@ -138,7 +163,10 @@
 			buildActionMask = 2147483647;
 			files = (
 				F4A0A8842C1F800B003AFEA1 /* ContentView.swift in Sources */,
-				F4A0A8822C1F800B003AFEA1 /* HikeAppApp.swift in Sources */,
+				F43259AF2C22279E00F258E5 /* CardView.swift in Sources */,
+				F4A0A8822C1F800B003AFEA1 /* HikeApp.swift in Sources */,
+				F4610AD42C28B67A0095D75F /* CustomBackgroundView.swift in Sources */,
+				F4610AD72C28B78C0095D75F /* ColorExtension.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
diff --git a/HikeApp/Component/CardView.swift b/HikeApp/Component/CardView.swift
new file mode 100644
index 0000000..56eb7c6
--- /dev/null
+++ b/HikeApp/Component/CardView.swift
@@ -0,0 +1,35 @@
+//
+//  CardView.swift
+//  HikeApp
+//
+//  Created by Dorian Emenir on 18/06/2024.
+//
+
+import SwiftUI
+
+struct CardView: View {
+    var body: some View {
+        // MARK: - CARD
+        
+        ZStack {
+            CustomBackgroundView()
+            
+            ZStack {
+                Circle()
+                    .fill(
+                        LinearGradient(colors: [Color.colorIndigoMedium, Color.colorSalmonLight], startPoint: .topLeading, endPoint: .bottomTrailing)
+                    )
+                    .frame(width: 256, height: 256)
+                
+                Image("image-1")
+                    .resizable()
+                .scaledToFit()
+            }
+        } //: CARD
+        .frame(width: 320, height: 570)
+    }
+}
+
+#Preview {
+    CardView()
+}
diff --git a/HikeApp/Component/CustomBackgroundView.swift b/HikeApp/Component/CustomBackgroundView.swift
new file mode 100644
index 0000000..636d91f
--- /dev/null
+++ b/HikeApp/Component/CustomBackgroundView.swift
@@ -0,0 +1,37 @@
+//
+//  CustomBackgroundView.swift
+//  HikeApp
+//
+//  Created by Dorian Emenir on 23/06/2024.
+//
+
+import SwiftUI
+
+struct CustomBackgroundView: View {
+    var body: some View {
+        ZStack {
+            // MARK: - 3. DEPTH
+            
+            Color.colorGreenDark
+                .clipShape(.rect(cornerRadius: 40))
+                .offset(y: 12)
+            
+            // MARK: - 2. LIGHT
+            
+            Color.colorGreenLight
+                .clipShape(.rect(cornerRadius: 40))
+                .offset(y: 3)
+                .opacity(0.85)
+            
+            // MARK: - 1. SURFACE
+            
+            LinearGradient(colors: [Color.colorGreenLight, Color.colorGreenMedium], startPoint: .top, endPoint: .bottom)
+                .clipShape(.rect(cornerRadius: 40))
+        }
+    }
+}
+
+#Preview {
+    CustomBackgroundView()
+        .padding()
+}
diff --git a/HikeApp/ContentView.swift b/HikeApp/ContentView.swift
index eaab56a..ca0b594 100644
--- a/HikeApp/ContentView.swift
+++ b/HikeApp/ContentView.swift
@@ -9,13 +9,7 @@ import SwiftUI
 
 struct ContentView: View {
     var body: some View {
-        VStack {
-            Image(systemName: "globe")
-                .imageScale(.large)
-                .foregroundStyle(.tint)
-            Text("Hello, world!")
-        }
-        .padding()
+        CardView()
     }
 }
 
diff --git a/HikeApp/HikeAppApp.swift b/HikeApp/HikeApp.swift
similarity index 79%
rename from HikeApp/HikeAppApp.swift
rename to HikeApp/HikeApp.swift
index 6f74cbe..9ca6951 100644
--- a/HikeApp/HikeAppApp.swift
+++ b/HikeApp/HikeApp.swift
@@ -1,5 +1,5 @@
 //
-//  HikeAppApp.swift
+//  HikeApp.swift
 //  HikeApp
 //
 //  Created by Dorian Emenir on 16/06/2024.
@@ -8,7 +8,7 @@
 import SwiftUI
 
 @main
-struct HikeAppApp: App {
+struct HikeApp: App {
     var body: some Scene {
         WindowGroup {
             ContentView()
diff --git a/HikeApp/Utility/ColorExtension.swift b/HikeApp/Utility/ColorExtension.swift
new file mode 100644
index 0000000..e9d8171
--- /dev/null
+++ b/HikeApp/Utility/ColorExtension.swift
@@ -0,0 +1,19 @@
+//
+//  ColorExtension.swift
+//  HikeApp
+//
+//  Created by Dorian Emenir on 23/06/2024.
+//
+
+import Foundation
+import SwiftUI
+
+extension Color {
+    static let customGreenLight = Color("ColorGreenLight")
+    static let customGreenMedium = Color("ColorGreenMedium")
+    static let customGreenDark = Color("ColorGreenDark")
+    static let customGrayLight = Color("ColorGrayLight")
+    static let customGrayMedium = Color("ColorGrayMedium")
+    static let customIndigoMedium = Color("ColorIndigoMedium")
+    static let customSalmonLight = Color("ColorSalmonLight")
+}