diff --git a/ui/appwindow.slint b/ui/appwindow.slint
index fac45d8..2a48dbc 100644
--- a/ui/appwindow.slint
+++ b/ui/appwindow.slint
@@ -5,7 +5,7 @@ import { Util } from "./util.slint";
 import { Panel } from "./panel/panel.slint";
 import { Toast, IconsDialog, IconsDialogSetting, OkCancelDialogV2, Blanket, LanguageDialog, InputBar, OkCancelDialogSetting, LandingPage } from "./base/widgets.slint";
 
-import { SlideCard } from "./base/widgets.slint";
+// import { Drawer, DrawerPosition, TextBtn } from "./base/widgets.slint";
 
 export component AppWindow inherits Window {
     default-font-size: Theme.default-font-size;
@@ -70,10 +70,10 @@ export component AppWindow inherits Window {
         }
     }
 
-    Rectangle {
+    // Rectangle {
         // visible: false;
         // background: red;
-    }
+    // }
 }
 
 export { Util, Logic, Store, Theme }
diff --git a/ui/base/drawer.slint b/ui/base/drawer.slint
new file mode 100644
index 0000000..c42fe97
--- /dev/null
+++ b/ui/base/drawer.slint
@@ -0,0 +1,113 @@
+import { Theme } from "../theme.slint";
+import { Blanket } from "./blanket.slint";
+
+// Example:
+// Rectangle {
+//     drawer := Drawer {
+//         is-show: true;
+//         position: DrawerPosition.Right;
+//         drawer-size: 300px;
+//         Rectangle {
+//             background: blue;
+//         }
+//     }
+//     HorizontalLayout {
+//         y: 0;
+//         height: 50px;
+//         spacing: 30px;
+//         TextBtn {
+//             text: "Show";
+//             background: pink;
+//             clicked => {
+//                 drawer.show();
+//             }
+//         }
+//         TextBtn {
+//             text: "Hide";
+//             background: pink;
+//             clicked => {
+//                 drawer.hide();
+//             }
+//         }
+//     }
+// }
+
+export enum DrawerPosition {
+    Top,
+    Right,
+    Bottom,
+    Left,
+}
+
+export component Drawer inherits Rectangle {
+    in-out property <bool> is-show;
+    in property <length> drawer-size: 200px;
+    in property <DrawerPosition> position: DrawerPosition.Bottom;
+
+    public function show() {
+        root.is-show = true;
+    }
+
+    public function hide() {
+        root.is-show = false;
+    }
+
+    pure function drawer-x() -> length {
+        if (root.position == DrawerPosition.Left) {
+            if (root.is-show) {
+                return 0px;
+            } else {
+                return -root.width;
+            }
+        } else if (root.position == DrawerPosition.Right) {
+            if (root.is-show) {
+                return 0px;
+            } else {
+                return root.width;
+            }
+        }
+        return 0px;
+    }
+
+    pure function drawer-y() -> length {
+        if (root.position == DrawerPosition.Top) {
+            if (root.is-show) {
+                return 0px;
+            } else {
+                return -root.height;
+            }
+        } else if (root.position == DrawerPosition.Bottom) {
+            if (root.is-show) {
+                return 0px;
+            } else {
+                return root.height;
+            }
+        }
+        return 0px;
+    }
+
+    x: drawer-x();
+    y: drawer-y();
+
+    animate x, y {
+        duration: Theme.default-animate-duration;
+        easing: ease-in-out;
+    }
+
+    if root.is-show: Blanket {
+        clicked => {
+            root.is-show = false;
+        }
+    }
+
+    VerticalLayout {
+        x: root.position == DrawerPosition.Right ? root.width - self.width : 0px;
+        y: root.position == DrawerPosition.Bottom ? root.height - self.height : 0px;
+        width: root.position == DrawerPosition.Right || root.position == DrawerPosition.Left ? drawer-size : root.width;
+        height: root.position == DrawerPosition.Top || root.position == DrawerPosition.Bottom ? drawer-size : root.height;
+
+        TouchArea {
+            @children
+        }
+    }
+}
diff --git a/ui/base/slider.slint b/ui/base/slider.slint
deleted file mode 100644
index cf85baf..0000000
--- a/ui/base/slider.slint
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Theme } from "../theme.slint";
-
-export component Slider inherits Text {
-    in-out property <bool> is-read;
-
-    callback clicked <=> touch.clicked;
-
-    wrap: word-wrap;
-    font-size: Theme.title5-font-size;
-    color: root.is-read ? Theme.have-read-text-color : Theme.link-text-color;
-
-    touch := TouchArea {
-        mouse-cursor: MouseCursor.pointer;
-    }
-}
diff --git a/ui/base/widgets.slint b/ui/base/widgets.slint
index 501d8f9..2c58d3b 100644
--- a/ui/base/widgets.slint
+++ b/ui/base/widgets.slint
@@ -28,6 +28,7 @@ import { Loading } from "./loading.slint";
 import { ListTile } from "./list-tile.slint";
 import { News } from "./news.slint";
 import { SlideCard } from "./slide-card.slint";
+import { Drawer, DrawerPosition } from "./drawer.slint";
 
 export {
     Toast,
@@ -67,5 +68,7 @@ export {
     Loading,
     ListTile,
     News,
-    SlideCard
+    SlideCard,
+    Drawer,
+    DrawerPosition
 }