diff --git a/Shared/views/CustomIcon/CreateWidgetView.swift b/Shared/views/CustomIcon/CreateWidgetView.swift
index e159b19..ca8cb0f 100644
--- a/Shared/views/CustomIcon/CreateWidgetView.swift
+++ b/Shared/views/CustomIcon/CreateWidgetView.swift
@@ -11,14 +11,14 @@ struct CreateWidgetView: View {
     @AppStorage(UserDefaultsStore.Keys.theme.rawValue, store: GroupUserDefaults.groupDefaults) private var theme: Theme = .system
     @Environment(\.dismiss) var dismiss
     @AppStorage(UserDefaultsStore.Keys.textColor.rawValue, store: GroupUserDefaults.groupDefaults) private var textColor: Color = DefaultTextColor.textColor
-
+    
     @StateObject private var customWidget: CustomWidgetModel
     
     @State private var mouth: CustomWidgetMouthOptions = CustomWidgetMouthOptions.defaultOption
     @State private var showRightEyeImagePicker: Bool = false
     @State private var showLeftEyeImagePicker: Bool = false
     @State private var showMuthImagePicker: Bool = false
-
+    
     var widgetView: CustomWidgetView
     
     private var randomElements: [AnyView]
@@ -26,17 +26,17 @@ struct CreateWidgetView: View {
     init(customWidget: CustomWidgetModel, randomElements: [AnyView] = [AnyView]()) {
         self.randomElements = [
             AnyView(Image(CustomWidgetBackGroundOptions.selectable.randomElement()!.rawValue)
-                        .resizable()
-                        .frame(width: 20, height: 20)),
+                .resizable()
+                .frame(width: 20, height: 20)),
             AnyView(Image(CustomWidgetBackGroundOptions.selectable.randomElement()!.rawValue)
-                        .resizable()
-                        .frame(width: 20, height: 20)),
+                .resizable()
+                .frame(width: 20, height: 20)),
             AnyView(Image(CustomWidgetBackGroundOptions.selectable.randomElement()!.rawValue)
-                        .resizable()
-                        .frame(width: 20, height: 20)),
+                .resizable()
+                .frame(width: 20, height: 20)),
             AnyView(Image(CustomWidgetBackGroundOptions.selectable.randomElement()!.rawValue)
-                        .resizable()
-                        .frame(width: 20, height: 20))
+                .resizable()
+                .frame(width: 20, height: 20))
         ]
         
         _customWidget = StateObject(wrappedValue: customWidget)
@@ -98,239 +98,234 @@ struct CreateWidgetView: View {
     }
     
     var bottomBarButtons: some View {
-        Group {
-            HStack(alignment: .center, spacing: 0) {
-                Button(action: {
-                    EventLogger.log(event: "create_widget_view_shuffle")
-                    createRandom()
-                }, label: {
-                    Image(systemName: "shuffle")
-                        .font(.title)
-                        .foregroundColor(Color(UIColor.white))
-                    
-                })
-                    .frame(minWidth: 0, maxWidth: .infinity)
-                    .frame(height: 40)
-                    .background(.blue)
+        HStack(alignment: .center, spacing: 0) {
+            Button(action: {
+                EventLogger.log(event: "create_widget_view_shuffle")
+                createRandom()
+            }, label: {
+                Image(systemName: "shuffle")
+                    .font(.title)
+                    .foregroundColor(Color(UIColor.white))
                 
+            })
+            .frame(minWidth: 0, maxWidth: .infinity)
+            .frame(minHeight: 40, maxHeight: .infinity)
+            .background(.blue)
+            
+            Button(action: {
+                EventLogger.log(event: "create_widget_view_save_widget")
+                UserDefaultsStore.saveCustomWidget(widgetModel: customWidget, inUse: false)
+                let impactMed = UIImpactFeedbackGenerator(style: .heavy)
+                impactMed.impactOccurred()
+                dismiss()
+            }, label: {
+                Text(String(localized: "create_widget_save"))
+                    .font(.title)
+                    .fontWeight(.bold)
+                    .foregroundColor(Color(UIColor.white))
+                
+            })
+            .frame(minWidth: 0, maxWidth: .infinity)
+            .frame(minHeight: 40, maxHeight: .infinity)
+            .background(.green)
+            
+            Button(action: {
+                EventLogger.log(event: "customize_view_use_widget")
+                UserDefaultsStore.saveCustomWidget(widgetModel: customWidget, inUse: true)
+                let impactMed = UIImpactFeedbackGenerator(style: .heavy)
+                impactMed.impactOccurred()
+                dismiss()
+            }, label: {
+                Text(String(localized: "create_widget_use"))
+                    .font(.title)
+                    .fontWeight(.bold)
+                    .foregroundColor(Color(UIColor.white))
+                
+            })
+            .frame(minWidth: 0, maxWidth: .infinity)
+            .frame(minHeight: 40, maxHeight: .infinity)
+            .background(.pink)
+            
+            if customWidget.isSaved {
                 Button(action: {
-                    EventLogger.log(event: "create_widget_view_save_widget")
-                    UserDefaultsStore.saveCustomWidget(widgetModel: customWidget, inUse: false)
+                    EventLogger.log(event: "customize_view_delete_widget")
+                    UserDefaultsStore.deleteCustomWidget(withUUID: customWidget.uuid)
                     let impactMed = UIImpactFeedbackGenerator(style: .heavy)
                     impactMed.impactOccurred()
                     dismiss()
                 }, label: {
-                    Text(String(localized: "create_widget_save"))
+                    Image(systemName: "trash")
                         .font(.title)
-                        .fontWeight(.bold)
                         .foregroundColor(Color(UIColor.white))
                     
                 })
-                    .frame(minWidth: 0, maxWidth: .infinity)
-                    .frame(height: 40)
-                    .background(.green)
-                
-                Button(action: {
-                    EventLogger.log(event: "customize_view_use_widget")
-                    UserDefaultsStore.saveCustomWidget(widgetModel: customWidget, inUse: true)
-                    let impactMed = UIImpactFeedbackGenerator(style: .heavy)
-                    impactMed.impactOccurred()
-                    dismiss()
-                }, label: {
-                    Text(String(localized: "create_widget_use"))
-                        .font(.title)
-                        .fontWeight(.bold)
-                        .foregroundColor(Color(UIColor.white))
-                    
-                })
-                    .frame(height: 40)
-                    .frame(minWidth: 0, maxWidth: .infinity)
-                    .background(.pink)
-                
-                if customWidget.isSaved {
-                    Button(action: {
-                        EventLogger.log(event: "customize_view_delete_widget")
-                        UserDefaultsStore.deleteCustomWidget(withUUID: customWidget.uuid)
-                        let impactMed = UIImpactFeedbackGenerator(style: .heavy)
-                        impactMed.impactOccurred()
-                        dismiss()
-                    }, label: {
-                        Image(systemName: "trash")
-                            .font(.title)
-                            .foregroundColor(Color(UIColor.white))
-                        
-                    })
-                        .frame(height: 40)
-                        .frame(minWidth: 0, maxWidth: .infinity)
-                        .background(.orange)
-                }
+                .frame(minWidth: 0, maxWidth: .infinity)
+                .frame(minHeight: 40, maxHeight: .infinity)
+                .background(.orange)
             }
         }
+        .frame(minHeight: 40, maxHeight: .infinity)
     }
     
     var colorOptions: some View {
-        Group {
-            VStack {
-                HStack(spacing: 0) {
-                    VStack(alignment: .center) {
-                        Text(String(localized: "create_widget_background_color"))
-                        ColorPicker("", selection: $customWidget.bgColor)
-                            .onChange(of: customWidget.mouthColor, perform: { newValue in
-                                EventLogger.log(event: "create_widget_view_update_background_color")
-                            })
-                            .labelsHidden()
-                    }
-                    .frame(minWidth: 0, maxWidth: .infinity)
-                    
-                    VStack(alignment: .center) {
-                        Text(String(localized: "create_widget_inner_color"))
-                        ColorPicker("", selection: $customWidget.innerColor)
-                            .onChange(of: customWidget.mouthColor, perform: { newValue in
-                                EventLogger.log(event: "create_widget_view_update_inner_color")
-                            })
-                            .labelsHidden()
-                    }
-                    .frame(minWidth: 0, maxWidth: .infinity)
-                    
-                    VStack(alignment: .center) {
-                        Text(String(localized: "create_widget_face_outline_color"))
-                        ColorPicker("", selection: $customWidget.circleStrokeColor)
-                            .onChange(of: customWidget.mouthColor, perform: { newValue in
-                                EventLogger.log(event: "create_widget_view_update_outline_color")
-                            })
-                            .labelsHidden()
-                    }
-                    .frame(minWidth: 0, maxWidth: .infinity)
+        VStack {
+            HStack(spacing: 0) {
+                VStack(alignment: .center) {
+                    Text(String(localized: "create_widget_background_color"))
+                    ColorPicker("", selection: $customWidget.bgColor)
+                        .onChange(of: customWidget.mouthColor, perform: { newValue in
+                            EventLogger.log(event: "create_widget_view_update_background_color")
+                        })
+                        .labelsHidden()
                 }
+                .frame(minWidth: 0, maxWidth: .infinity)
                 
-                HStack(spacing: 0) {
-                    VStack(alignment: .center) {
-                        Text(String(localized: "create_widget_view_left_eye_color"))
-                        ColorPicker("", selection: $customWidget.leftEyeColor)
-                            .onChange(of: customWidget.mouthColor, perform: { newValue in
-                                EventLogger.log(event: "create_widget_view_update_left_eye_color")
-                            })
-                            .labelsHidden()
-                    }
-                    .frame(minWidth: 0, maxWidth: .infinity)
-                    
-                    VStack(alignment: .center) {
-                        Text(String(localized: "create_widget_view_right_eye_color"))
-                        ColorPicker("", selection: $customWidget.rightEyeColor)
-                            .onChange(of: customWidget.mouthColor, perform: { newValue in
-                                EventLogger.log(event: "create_widget_view_update_right_eye_color")
-                            })
-                            .labelsHidden()
-                    }
-                    .frame(minWidth: 0, maxWidth: .infinity)
-                    
-                    VStack(alignment: .center) {
-                        Text(String(localized: "create_widget_view_mouth_color"))
-                        ColorPicker("", selection: $customWidget.mouthColor)
-                            .onChange(of: customWidget.mouthColor, perform: { newValue in
-                                EventLogger.log(event: "create_widget_view_update_mouth_color")
-                            })
-                            .labelsHidden()
-                    }
-                    .frame(minWidth: 0, maxWidth: .infinity)
+                VStack(alignment: .center) {
+                    Text(String(localized: "create_widget_inner_color"))
+                    ColorPicker("", selection: $customWidget.innerColor)
+                        .onChange(of: customWidget.mouthColor, perform: { newValue in
+                            EventLogger.log(event: "create_widget_view_update_inner_color")
+                        })
+                        .labelsHidden()
                 }
+                .frame(minWidth: 0, maxWidth: .infinity)
+               
+                VStack(alignment: .center) {
+                    Text(String(localized: "create_widget_face_outline_color"))
+                    ColorPicker("", selection: $customWidget.circleStrokeColor)
+                        .onChange(of: customWidget.mouthColor, perform: { newValue in
+                            EventLogger.log(event: "create_widget_view_update_outline_color")
+                        })
+                        .labelsHidden()
+                }
+                .frame(minWidth: 0, maxWidth: .infinity)
+            }
+            
+            HStack(spacing: 0) {
+                VStack(alignment: .center) {
+                    Text(String(localized: "create_widget_view_left_eye_color"))
+                    ColorPicker("", selection: $customWidget.leftEyeColor)
+                        .onChange(of: customWidget.mouthColor, perform: { newValue in
+                            EventLogger.log(event: "create_widget_view_update_left_eye_color")
+                        })
+                        .labelsHidden()
+                }
+                .frame(minWidth: 0, maxWidth: .infinity)
+                
+                VStack(alignment: .center) {
+                    Text(String(localized: "create_widget_view_right_eye_color"))
+                    ColorPicker("", selection: $customWidget.rightEyeColor)
+                        .onChange(of: customWidget.mouthColor, perform: { newValue in
+                            EventLogger.log(event: "create_widget_view_update_right_eye_color")
+                        })
+                        .labelsHidden()
+                }
+                .frame(minWidth: 0, maxWidth: .infinity)
+                
+                VStack(alignment: .center) {
+                    Text(String(localized: "create_widget_view_mouth_color"))
+                    ColorPicker("", selection: $customWidget.mouthColor)
+                        .onChange(of: customWidget.mouthColor, perform: { newValue in
+                            EventLogger.log(event: "create_widget_view_update_mouth_color")
+                        })
+                        .labelsHidden()
+                }
+                .frame(minWidth: 0, maxWidth: .infinity)
             }
-            .padding()
-            .background(
-                theme.currentTheme.secondaryBGColor
-            )
         }
+        .multilineTextAlignment(.center)
+        .padding()
+        .background(
+            theme.currentTheme.secondaryBGColor
+        )
     }
     
     var bgImageOptions: some View {
-        Group {
-            HStack {
-                ForEach(CustomWidgetBackGroundOptions.selectable, id: \.self) { bg in
-                    Image(bg.rawValue, bundle: .main)
-                        .resizable()
-                        .aspectRatio(contentMode: .fill)
-                        .frame(minWidth: 10, idealWidth: 40, maxWidth: 40,
-                               minHeight: 10, idealHeight: 40, maxHeight: 40,
-                               alignment: .center)
-                        .onTapGesture {
-                            update(background: bg)
-                        }
-                }
-                mixBG
+        HStack {
+            ForEach(CustomWidgetBackGroundOptions.selectable, id: \.self) { bg in
+                Image(bg.rawValue, bundle: .main)
+                    .resizable()
+                    .aspectRatio(contentMode: .fill)
+                    .frame(minWidth: 10, idealWidth: 40, maxWidth: 40,
+                           minHeight: 10, idealHeight: 40, maxHeight: 40,
+                           alignment: .center)
                     .onTapGesture {
-                        update(background: .random)
+                        update(background: bg)
                     }
-                
-                ColorPicker("", selection: $customWidget.bgOverlayColor)
             }
-            .padding()
-            .background(
-                theme.currentTheme.secondaryBGColor
-            )
+            mixBG
+                .onTapGesture {
+                    update(background: .random)
+                }
+            Divider()
+            ColorPicker("", selection: $customWidget.bgOverlayColor)
         }
+        .padding()
+        .background(
+            theme.currentTheme.secondaryBGColor
+        )
     }
     
     var faceImageOptions: some View {
-        Group {
-            HStack(alignment: .center) {
-                Spacer()
-                VStack(alignment: .center) {
-                    Text(String(localized: "create_widget_view_left_eye"))
-                        .onTapGesture(perform: {
-                            showLeftEyeImagePicker.toggle()
-                        })
-                    .foregroundColor(textColor)
-                    .foregroundColor(textColor)
-                }
-                Spacer()
-                VStack(alignment: .center) {
-                    Text(String(localized: "create_widget_view_right_eye"))
-                        .onTapGesture(perform: {
-                            showRightEyeImagePicker.toggle()
-                        })
-                    .foregroundColor(textColor)
-                }
-                Spacer()
-                VStack(alignment: .center) {
-                    Text(String(localized: "create_widget_view_mouth"))
-                        .onTapGesture(perform: {
-                            showMuthImagePicker.toggle()
-                        })
-                    .foregroundColor(textColor)
-                    .foregroundColor(textColor)
-                }
-                Spacer()
-            }
-            .padding()
-            .background(
-                theme.currentTheme.secondaryBGColor
-            )
+        HStack(alignment: .center) {
+            Text(String(localized: "create_widget_view_left_eye"))
+                .onTapGesture(perform: {
+                    showLeftEyeImagePicker.toggle()
+                })
+                .foregroundColor(textColor)
+                .foregroundColor(textColor)
+                .frame(minWidth: 0, maxWidth: .infinity)
+            Divider()
+            Text(String(localized: "create_widget_view_right_eye"))
+                .onTapGesture(perform: {
+                    showRightEyeImagePicker.toggle()
+                })
+                .foregroundColor(textColor)
+                .frame(minWidth: 0, maxWidth: .infinity)
+            Divider()
+            Text(String(localized: "create_widget_view_mouth"))
+                .onTapGesture(perform: {
+                    showMuthImagePicker.toggle()
+                })
+                .foregroundColor(textColor)
+                .foregroundColor(textColor)
+                .frame(minWidth: 0, maxWidth: .infinity)
         }
+        .padding()
+        .background(
+            theme.currentTheme.secondaryBGColor
+        )
     }
     
     var body: some View {
-        VStack(spacing: 0) {
-            widgetView
-                .cornerRadius(10)
-                .padding()
-            
-            Spacer()
-            
-            Divider().background(Color(UIColor.tertiarySystemBackground))
-            
-            faceImageOptions
-            
-            Divider().background(Color(UIColor.tertiarySystemBackground))
-            
-            bgImageOptions
-            
-            Divider().background(Color(UIColor.tertiarySystemBackground))
-            
-            colorOptions
-            
-            Divider().background(Color(UIColor.tertiarySystemBackground))
-            
-            bottomBarButtons
+        GeometryReader { geo in
+            VStack(spacing: 0) {
+                widgetView
+                    .cornerRadius(10)
+                    .padding()
+                    .frame(width: geo.size.width, height: geo.size.width)
+                
+                Spacer()
+                ScrollView {
+                    VStack(spacing: 0) {
+                        Divider().background(Color(UIColor.tertiarySystemBackground))
+                        
+                        faceImageOptions
+                        
+                        Divider().background(Color(UIColor.tertiarySystemBackground))
+                        
+                        bgImageOptions
+                        
+                        Divider().background(Color(UIColor.tertiarySystemBackground))
+                        
+                        colorOptions
+                        
+                        Divider().background(Color(UIColor.tertiarySystemBackground))
+                        
+                        bottomBarButtons
+                    }
+                }
+            }
         }
         .sheet(isPresented: $showRightEyeImagePicker) {
             ImagePickerGridView(pickedImageClosure: { image in