diff --git a/product-workflow/ScreenShareAndVolumeView+macOS.swift b/product-workflow/ScreenShareAndVolumeView+macOS.swift
index ff9745c..5b9cd10 100644
--- a/product-workflow/ScreenShareAndVolumeView+macOS.swift
+++ b/product-workflow/ScreenShareAndVolumeView+macOS.swift
@@ -7,6 +7,7 @@
 
 import AgoraRtcKit
 import CoreGraphics
+import SwiftUI
 
 #if os(macOS)
 extension ScreenShareVolumeManager {
@@ -90,9 +91,6 @@ extension ScreenShareAndVolumeView {
         self.showPopup = true
     }
 
-    @State private var popupWidth: CGFloat = 0
-    @State private var popupHeight: CGFloat = 0
-
     func startScreenshare(with source: AgoraScreenCaptureSourceInfo) {
         self.screenSharingActive = true
         self.agoraManager.startScreenShare(with: source.sourceId, isDisplay: source.sourceName.contains("Screens"))
@@ -102,4 +100,106 @@ extension ScreenShareAndVolumeView {
         self.agoraManager.stopScreenShare()
     }
 }
+
+struct ScreenShareModal: View {
+
+    @Binding var displayed: Bool
+    @State var screens: [String: [AgoraScreenCaptureSourceInfo]]
+    @State var selectedScreen: AgoraScreenCaptureSourceInfo?
+    @State var selectedGroup: String = ""
+    var startScreenShare: (AgoraScreenCaptureSourceInfo) -> Void
+    var body: some View {
+        VStack {
+            ScrollView(.horizontal) {
+                LazyHGrid(rows: [GridItem(.flexible())]) {
+                    ForEach(
+                        screens.keys.sorted(), id: \.self
+                    ) { name in
+                        if let screenSources = screens[name] {
+                            ScreenGroupButton(
+                                selectedScreen: $selectedScreen,
+                                screenSources: screenSources,
+                                groupName: name,
+                                selectedGroup: $selectedGroup
+                            )
+                        }
+                    }
+                }.padding()
+            }.frame(height: 75)
+            if let selectedScreens = screens[selectedGroup] {
+                ScrollView {
+                    LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))]) {
+                        ForEach(selectedScreens, id: \.sourceId) { screen in
+                            Button(action: {
+                                self.selectedScreen = screen
+                            }, label: {
+                                Image(nsImage: screen.thumbImage)
+                                    .resizable()
+                                    .aspectRatio(contentMode: .fit)
+                                    .frame(width: 90, height: 90) // Adjust size as needed
+                            }).background(
+                                selectedScreen?.sourceId == screen.sourceId ?
+                                Color.green : Color.secondary
+                            )
+                        }
+                    }.padding()
+                }
+            } else {
+                Spacer()
+            }
+            Button(action: {
+                guard let selectedScreen else { return }
+                self.displayed = false
+                self.startScreenShare(selectedScreen)
+            }, label: {
+                Text("Start Screenshare")
+            }).disabled(selectedScreen == nil).padding()
+
+        }.onAppear {
+            self.selectedGroup = screens.keys.sorted().first ?? ""
+        }
+    }
+}
+
+struct ScreenGroupButton: View {
+    @Binding var selectedScreen: AgoraScreenCaptureSourceInfo?
+    @State var screenSources: [AgoraScreenCaptureSourceInfo]
+    @State var groupName: String
+    @Binding var selectedGroup: String
+    var body: some View {
+        Button(action: {
+            selectedScreen = nil
+            selectedGroup = groupName
+        }, label: {
+            VStack {
+                if let firstScreen = screenSources.first,
+                   let appIcon = firstScreen.iconImage {
+                    Image(nsImage: appIcon)
+                        .resizable()
+                        .aspectRatio(contentMode: .fit)
+                        .frame(width: 25, height: 25)
+                } else {
+                    Image(systemName: "rectangle.on.rectangle.angled")
+                        .resizable()
+                        .aspectRatio(contentMode: .fit)
+                        .frame(width: 25, height: 25)
+                }
+                Text(groupName.replacingOccurrences(of: "00", with: ""))
+            }.buttonStyle(NoHighlightButtonStyle())
+                .foregroundStyle(
+                    selectedGroup == groupName ?
+                        Color.green : Color.secondary
+                ).padding(3)
+        })
+
+    }
+}
+
+struct NoHighlightButtonStyle: PrimitiveButtonStyle {
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .focusable(false)
+    }
+}
+
 #endif
diff --git a/product-workflow/ScreenShareAndVolumeView.swift b/product-workflow/ScreenShareAndVolumeView.swift
index f243d6f..cf31575 100644
--- a/product-workflow/ScreenShareAndVolumeView.swift
+++ b/product-workflow/ScreenShareAndVolumeView.swift
@@ -80,6 +80,9 @@ struct ScreenShareAndVolumeView: View {
     @State var selectedScreenName: String = ""
     @State var selectedScreen: CGWindowID?
     @State var screenSharingActive = false
+
+    @State internal var popupWidth: CGFloat = 0
+    @State internal var popupHeight: CGFloat = 0
     #endif
 
     var body: some View {