diff --git a/mp/resources/icons/icon_ppi.svg b/mp/resources/icons/icon_ppi.svg
new file mode 100644
index 0000000..556f38e
--- /dev/null
+++ b/mp/resources/icons/icon_ppi.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
+  <circle cx="100" cy="100" r="90" fill="#e0e0e0" stroke="#b0b0b0" stroke-width="2" />
+  <!-- 雷达网格 -->
+  <circle cx="100" cy="100" r="70" fill="none" stroke="#a0a0a0" stroke-width="1" />
+  <circle cx="100" cy="100" r="50" fill="none" stroke="#a0a0a0" stroke-width="1" />
+  <circle cx="100" cy="100" r="30" fill="none" stroke="#a0a0a0" stroke-width="1" />
+  <line x1="100" y1="10" x2="100" y2="190" stroke="#a0a0a0" stroke-width="1" />
+  <line x1="10" y1="100" x2="190" y2="100" stroke="#a0a0a0" stroke-width="1" />
+  <line x1="30" y1="30" x2="170" y2="170" stroke="#a0a0a0" stroke-width="1" />
+  <line x1="170" y1="30" x2="30" y2="170" stroke="#a0a0a0" stroke-width="1" />
+  <!-- 雷达扫描扇形 -->
+  <path d="M100,100 L100,10 A90,90 0 0,1 160,40 Z" fill="rgba(255, 255, 255, 0.3)" />
+  <!-- 中心点 -->
+  <circle cx="100" cy="100" r="5" fill="#ffffff" />
+</svg>
\ No newline at end of file
diff --git a/mp/resources/icons/icon_radar.svg b/mp/resources/icons/icon_radar.svg
new file mode 100644
index 0000000..858edfc
--- /dev/null
+++ b/mp/resources/icons/icon_radar.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 85.333333C280.704 85.333333 85.333333 280.746667 85.333333 512s195.370667 426.666667 426.666667 426.666667 426.666667-195.413333 426.666667-426.666667S743.296 85.333333 512 85.333333z m0 768c-185.045333 0-341.333333-156.330667-341.333333-341.333333 0-170.581333 132.906667-316.458667 298.666666-338.218667V259.84C348.458667 280.277333 256 385.408 256 512c0 141.184 114.816 256 256 256 68.053333 0 132.266667-26.709333 180.778667-75.221333l-60.330667-60.373334A169.386667 169.386667 0 0 1 512 682.666667c-94.122667 0-170.666667-76.544-170.666667-170.666667 0-79.274667 54.570667-145.536 128-164.608v91.562667c-25.173333 15.061333-42.666667 42.368-42.666666 73.045333 0 46.122667 39.210667 85.333333 85.333333 85.333333s85.333333-39.210667 85.333333-85.333333c0-30.677333-17.493333-57.984-42.666666-73.045333V173.781333c165.76 21.76 298.666667 167.637333 298.666666 338.218667 0 185.002667-156.288 341.333333-341.333333 341.333333z"  /></svg>
\ No newline at end of file
diff --git a/mp/resources/icons/icon_threed.svg b/mp/resources/icons/icon_threed.svg
new file mode 100644
index 0000000..0e3cd7f
--- /dev/null
+++ b/mp/resources/icons/icon_threed.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M948.411376 243.34925L529.941637 4.548584c-11.37146-6.822876-25.017213-6.822876-36.388673 0L75.083225 243.34925c-11.37146 6.822876-18.194336 18.194336-18.194336 31.840089V750.51638c0 13.645752 6.822876 25.017213 18.194336 31.840089l418.469739 236.526374c11.37146 6.822876 25.017213 6.822876 36.388673 0l418.469739-236.526374c11.37146-6.822876 18.194336-18.194336 18.194337-31.840089V275.189339c0-13.645752-6.822876-25.017213-18.194337-31.840089zM891.554075 727.773459l-343.418101 195.589117v-120.537479h-75.051638v120.537479L131.940527 727.773459V336.595225l104.617435 59.131593 36.388673-63.680177L168.3292 272.915047 511.747301 79.600222l343.418101 195.589117-104.617435 59.131594 36.388673 63.680177 104.617435-59.131593V727.773459z" fill="#C4C4C4" /><path d="M357.095441 623.156024c-6.822876-6.822876-13.645752-15.920044-18.194337-25.017212h-45.485841c4.548584 25.017213 15.920044 45.485841 31.840089 59.131593 15.920044 13.645752 36.388673 20.468629 56.857301 20.468629 27.291505 0 50.034425-9.097168 68.228762-27.291505 18.194336-15.920044 27.291505-40.937257 27.291505-68.228762 0-13.645752-2.274292-25.017213-9.097168-38.662965-6.822876-11.37146-15.920044-22.742921-29.565797-31.840089 13.645752-9.097168 22.742921-18.194336 27.291505-29.565796 4.548584-11.37146 6.822876-22.742921 6.822876-34.114381 0-22.742921-9.097168-45.485841-25.017213-61.405886-15.920044-18.194336-40.937257-27.291505-68.228762-27.291505-22.742921 0-43.211549 9.097168-59.131593 25.017213-15.920044 15.920044-25.017213 34.114381-27.291505 59.131594h45.485841c2.274292-13.645752 9.097168-22.742921 18.194337-29.565797 9.097168-6.822876 15.920044-9.097168 27.291505-9.097168 13.645752 0 25.017213 4.548584 34.11438 11.37146 9.097168 9.097168 13.645752 20.468629 13.645753 31.840089 0 13.645752-4.548584 22.742921-13.645753 31.840089-9.097168 9.097168-20.468629 13.645752-36.388673 13.645752h-15.920044v38.662965h18.194337c13.645752 0 25.017213 4.548584 34.11438 11.37146 9.097168 9.097168 13.645752 20.468629 13.645753 36.388673 0 15.920044-4.548584 27.291505-13.645753 36.388673-9.097168 9.097168-20.468629 13.645752-34.11438 13.645753-9.097168 4.548584-18.194336 0-27.291505-6.822877zM732.353631 459.406996V454.858412c-2.274292-13.645752-6.822876-25.017213-13.645753-36.388673-25.017213-36.388673-56.857301-54.583009-100.06885-54.583009h-111.440311v311.578012h106.891727c22.742921 0 43.211549-4.548584 59.131593-15.920045 15.920044-9.097168 29.565797-22.742921 38.662965-36.388673 2.274292-4.548584 6.822876-11.37146 9.097168-15.920044 2.274292-4.548584 4.548584-11.37146 4.548585-18.194336 2.274292-13.645752 4.548584-36.388673 4.548584-70.503054v-6.822877c2.274292-22.742921 2.274292-40.937257 2.274292-52.308717z m-47.760134 79.600222c0 18.194336 0 31.840089-2.274292 40.937257-2.274292 9.097168-4.548584 15.920044-9.097168 22.742921l-2.274292 2.274292v2.274292c-11.37146 15.920044-31.840089 25.017213-56.857301 25.017213H557.233142V409.372571H623.187612c20.468629 2.274292 36.388673 11.37146 47.760133 25.017212 6.822876 6.822876 11.37146 15.920044 11.37146 27.291505 2.274292 11.37146 2.274292 27.291505 2.274292 52.308718v25.017212z" fill="#C4C4C4" /></svg>
\ No newline at end of file
diff --git a/mp/src/app.rs b/mp/src/app.rs
index 9a0f073..ef4a1fe 100644
--- a/mp/src/app.rs
+++ b/mp/src/app.rs
@@ -20,6 +20,7 @@ live_design! {
     import makepad_widgets::base::*;
     import makepad_widgets::theme_desktop_dark::*;
     import crate::app_ui::MainView;
+    import crate::widgets::selector::*;
 
     HELLO = "Hello, World!";
 
@@ -52,9 +53,16 @@ live_design! {
                                 x: 0.5,
                                 y: 0.5
                             }
-                            <Label> {
-                                text: "Content in the modal"
-                            }
+
+                        }
+                    }
+
+                    selector_modal = <Modal> {
+                        content:  {
+                            height: 470
+                            width:650
+                            show_bg: false
+                            selector = <Selector> {}
                         }
                     }
 
@@ -202,78 +210,43 @@ impl MatchEvent for App {
             render_task.render().await;
         });
 
-        let items = vec![
-            (
-                ItemKey {
-                    path: "path".to_string(),
-                    category: "category".to_string(),
-                    description: "description_1".to_string(),
+        let items = vec![(
+            ItemKey {
+                path: "path".to_string(),
+                category: "category".to_string(),
+                description: "description_1".to_string(),
+            },
+            vec![
+                ItemValue {
+                    name: "Item 1".to_string(),
+                    icon: "icon_radar.svg".to_string(),
                 },
-                vec![
-                    ItemValue {
-                        name: "Item 1".to_string(),
-                    },
-                    ItemValue {
-                        name: "Item 2".to_string(),
-                    },
-                ],
-            ),
-            (
-                ItemKey {
-                    path: "path".to_string(),
-                    category: "category".to_string(),
-                    description: "description_1".to_string(),
+                ItemValue {
+                    name: "Item 2".to_string(),
+                    icon: "icon_threed.svg".to_string(),
                 },
-                vec![
-                    ItemValue {
-                        name: "Item 1".to_string(),
-                    },
-                    ItemValue {
-                        name: "Item 2".to_string(),
-                    },
-                ],
-            ),
-            (
-                ItemKey {
-                    path: "path".to_string(),
-                    category: "category".to_string(),
-                    description: "description_2".to_string(),
-                },
-                vec![
-                    ItemValue {
-                        name: "Item 1".to_string(),
-                    },
-                    ItemValue {
-                        name: "Item 2".to_string(),
-                    },
-                ],
-            ),
-            (
-                ItemKey {
-                    path: "path".to_string(),
-                    category: "category".to_string(),
-                    description: "description_1".to_string(),
-                },
-                vec![
-                    ItemValue {
-                        name: "Item 1".to_string(),
-                    },
-                    ItemValue {
-                        name: "Item 3".to_string(),
-                    },
-                ],
-            ),
-        ];
+            ],
+        )];
 
-        ui.selector(id!(a)).set_items(cx, items);
+        ui.selector(id!(selector)).set_items(cx, items);
     }
 
     fn handle_signal(&mut self, cx: &mut Cx) {
         self.file_manager.try_deal_file(cx);
     }
 
+    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
+        let ui = self.ui.clone();
+
+        if ui.button(id!(open_modal)).clicked(actions) {
+            let modal = ui.modal(id!(selector_modal));
+            modal.open(cx);
+        }
+    }
+
     fn handle_action(&mut self, _cx: &mut Cx, e: &Action) {
         let ui = self.ui.clone();
+
         match e.cast() {
             AppAction::OpenFile => {
                 use native_dialog::FileDialog;
diff --git a/mp/src/app_ui.rs b/mp/src/app_ui.rs
index 6154238..a91dcf5 100644
--- a/mp/src/app_ui.rs
+++ b/mp/src/app_ui.rs
@@ -70,8 +70,6 @@ live_design! {
                         x: 0.5,
                         y: 0.5
                     }
-
-                    a = <Selector> {}
                 }
 
             }
diff --git a/mp/src/widgets/selector.rs b/mp/src/widgets/selector.rs
index a1ccce1..b99bda6 100644
--- a/mp/src/widgets/selector.rs
+++ b/mp/src/widgets/selector.rs
@@ -9,6 +9,8 @@ live_design! {
     import makepad_draw::shader::std::*;
 
     ICO_SEARCH = dep("crate://self/resources/icons/Icon_Search.svg")
+    RADAR = dep("crate://self/resources/icons/icon_radar.svg")
+    THREED = dep("crate://self/resources/icons/icon_threed.svg")
 
     RView = <ViewBase> {
         show_bg: true,
@@ -50,21 +52,21 @@ live_design! {
             }
 
             padding: {
-                left:10
+                left:20
             }
 
             draw_bg: {
-                color: #3c3c3c
-                border_color: #fff
+                color: #202121
+                border_color: #9c9c9c
                 border_width: 0.5
             }
 
             class_title = <Label> {
 
                 draw_text: {
-                    color: #fff
+                    color: #9c9c9c
                     text_style: <THEME_FONT_BOLD>{
-                        font_size: 8.0
+                        font_size: 10.0
                     }
                 }
 
@@ -125,9 +127,7 @@ live_design! {
         }
 
         draw_icon: {
-
-            svg_file: dep("crate://self/resources/logo_makepad.svg")
-
+            svg_file: (THREED)
             fn get_color(self) -> vec4 {
                 return #0A60FE;
             }
@@ -151,36 +151,54 @@ live_design! {
 
     Selector = {{Selector}} {
 
-        <RoundedShadowView> {
+        <RoundedView> {
             height: Fill
             width: Fill
             flow: Down
-            padding: 15.0
+            padding: 20.0
 
             align: {y:0.0}
 
             draw_bg: {
-                color: #3c3c3c
-                shadow_radius: 30.0
+                color: #202121
                 radius: 5.0
             }
-            <H3> {
-                text: "Selector"
-            }
-
             <View> {
                 height: Fill
                 width: Fill
                 flow: Down
 
+                <Label> {
+                    text: "choose a template for your project"
+
+                    draw_text: {
+                        color: #ffffff
+                    }
+
+                    margin: {
+                        bottom: 5.0
+                    }
+                }
+
+                <RView> {
+                    height: 26
+                    width: Fill
+
+                    draw_bg: {
+                        color: #303030
+                        border_color: #9c9c9c
+                        border_width: 0.5
+                    }
+                }
+
                 <RView> {
                     height: Fill
                     width: Fill
                     flow: Down
 
                     draw_bg: {
-                        color: #3c3c3c
-                        border_color: #fff
+                        color: #202121
+                        border_color: #9c9c9c
                         border_width: 0.5
                     }
 
@@ -217,19 +235,18 @@ live_design! {
                         spacing:10.0
 
                         <Button> {
+                            width: 90
                             text: "Previous"
                         }
 
                         <Button> {
+                            width: 90
                             text: "Next"
                         }
 
                     }
-
-
                 }
 
-
             }
 
         }
@@ -251,6 +268,7 @@ pub struct ItemKey {
 #[derive(Clone, PartialEq, Eq, Hash)]
 pub struct ItemValue {
     pub name: String,
+    pub icon: String,
 }
 
 #[derive(Live, LiveHook, Widget)]
@@ -332,6 +350,7 @@ impl SelectorList {
             self.items.insert(item.clone());
             let new_ref = WidgetRef::new_from_ptr(cx, self.item_ref);
             new_ref.as_selector_item().set_text(&item.name);
+
             self.item_refs.push(new_ref);
         }
     }
@@ -413,7 +432,7 @@ impl Widget for SelectorItem {
         );
 
         let icon_walk = Walk {
-            width: Size::Fixed(54.0),
+            width: Size::Fixed(32.0),
             height: Size::Fit,
             ..Default::default()
         };