diff --git a/README.md b/README.md
index a05c75c..34eee74 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,10 @@ There are currently snippets for the following common mobile components:
 - [x] Content
 - [x] Tabs
 - [ ] Nav (in progress)
+- [x] Icon
 - [x] Menu
 - [x] Modal
 - [ ] Dialog
-- [ ] Card
+- [x] Button
+- [x] Card
+- [x] Safe Area
diff --git a/components/ui/App.jsx b/components/ui/App.jsx
index eeede7f..967cf20 100644
--- a/components/ui/App.jsx
+++ b/components/ui/App.jsx
@@ -1,7 +1,9 @@
-const App = ({ children }) => (
-  <div className="flex h-screen flex-col">
+import classNames from 'classnames';
+
+const App = ({ children, className, ...props }) => (
+  <div {...props} className={classNames('flex h-screen flex-col', className)}>
     {children}
   </div>
 );
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/pages/index.js b/pages/index.js
index ef5bf4f..e763f2a 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -135,9 +135,15 @@ export default function Index() {
     });
   };
 
+  // To enable edge drag detection to open the side menu
   const bind = useDrag(
-    ({ down, movement: [mx] }) => {
-      console.log('DRAGGING SIDE', mx);
+    ({ down, movement: [mx], xy: [x, y], cancel }) => {
+      if (mx > 5 && x < 50 && down) {
+        Store.update(s => {
+          s.showMenu = true;
+        });
+        cancel();
+      }
     },
     {
       axis: 'x',