diff --git a/components/Card.jsx b/components/Card.jsx
deleted file mode 100644
index 059b289..0000000
--- a/components/Card.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-const PostCard = ({ title, type, text, author, image }) => (
-  <div className="m-auto px-4 py-4 max-w-xl">
-    <div className="bg-white shadow-md rounded-b-xl">
-      <div>
-        <img
-          className="rounded-t-xl h-32 w-full object-cover"
-          src={image || 'https://ionic-docs-demo.herokuapp.com/assets/card-top-img.png'}
-        />
-      </div>
-      <div className="px-4 py-4 mt-2 bg-white rounded-b-xl">
-        <h4 className="font-bold py-0 text-s text-gray-400 uppercase">{type}</h4>
-        <h2 className="font-bold text-2xl text-gray-800">{title}</h2>
-        <p className="sm:text-sm text-s text-gray-500 mr-1 my-3">{text}</p>
-      </div>
-    </div>
-  </div>
-);
-
-export default PostCard;
diff --git a/components/pages/Feed.jsx b/components/pages/Feed.jsx
index 7119ee5..d9869c8 100644
--- a/components/pages/Feed.jsx
+++ b/components/pages/Feed.jsx
@@ -1,8 +1,8 @@
-import Content from '../Content';
-
 import { Virtuoso } from 'react-virtuoso';
-import List from '../List';
-import ListItem from '../ListItem';
+
+import Content from '../ui/Content';
+import List from '../ui/List';
+import ListItem from '../ui/ListItem';
 
 const Feed = ({ selected }) => {
   return (
diff --git a/components/pages/Home.jsx b/components/pages/Home.jsx
index 6cae91b..f72ed92 100644
--- a/components/pages/Home.jsx
+++ b/components/pages/Home.jsx
@@ -1,6 +1,22 @@
-import { homeItems } from "../../data";
-import PostCard from "../Card";
-import Content from "../Content";
+import { homeItems } from '../../data';
+import Card from '../ui/Card';
+import Content from '../ui/Content';
+
+const PostCard = ({ title, type, text, author, image }) => (
+  <Card>
+    <div>
+      <img
+        className="rounded-t-xl h-32 w-full object-cover"
+        src={image || 'https://ionic-docs-demo.herokuapp.com/assets/card-top-img.png'}
+      />
+    </div>
+    <div className="px-4 py-4 mt-2 bg-white rounded-b-xl">
+      <h4 className="font-bold py-0 text-s text-gray-400 uppercase">{type}</h4>
+      <h2 className="font-bold text-2xl text-gray-800">{title}</h2>
+      <p className="sm:text-sm text-s text-gray-500 mr-1 my-3">{text}</p>
+    </div>
+  </Card>
+);
 
 const Home = ({ selected }) => {
   return (
@@ -9,7 +25,7 @@ const Home = ({ selected }) => {
         <PostCard {...i} />
       ))}
     </Content>
-  )
-}
+  );
+};
 
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/components/pages/Settings.jsx b/components/pages/Settings.jsx
index c4bde04..046a29c 100644
--- a/components/pages/Settings.jsx
+++ b/components/pages/Settings.jsx
@@ -1,11 +1,11 @@
-import Content from "../Content";
+import Content from '../ui/Content';
 
 const Settings = ({ selected }) => {
   return (
     <Content visible={selected} className="p-4">
       <h2>Settings</h2>
     </Content>
-  )
-}
+  );
+};
 
-export default Settings;
\ No newline at end of file
+export default Settings;
diff --git a/components/App.jsx b/components/ui/App.jsx
similarity index 100%
rename from components/App.jsx
rename to components/ui/App.jsx
diff --git a/components/Backdrop.jsx b/components/ui/Backdrop.jsx
similarity index 100%
rename from components/Backdrop.jsx
rename to components/ui/Backdrop.jsx
diff --git a/components/Button.jsx b/components/ui/Button.jsx
similarity index 100%
rename from components/Button.jsx
rename to components/ui/Button.jsx
diff --git a/components/ui/Card.jsx b/components/ui/Card.jsx
new file mode 100644
index 0000000..82d2a56
--- /dev/null
+++ b/components/ui/Card.jsx
@@ -0,0 +1,9 @@
+import classNames from 'classnames';
+
+const Card = ({ children, className, ...props }) => (
+  <div {...props} className={classNames('m-auto px-4 py-4 max-w-xl', className)}>
+    <div className="bg-white shadow-md rounded-b-xl">{children}</div>
+  </div>
+);
+
+export default Card;
diff --git a/components/Content.jsx b/components/ui/Content.jsx
similarity index 100%
rename from components/Content.jsx
rename to components/ui/Content.jsx
diff --git a/components/Dialog.jsx b/components/ui/Dialog.jsx
similarity index 100%
rename from components/Dialog.jsx
rename to components/ui/Dialog.jsx
diff --git a/components/EdgeDrag.jsx b/components/ui/EdgeDrag.jsx
similarity index 100%
rename from components/EdgeDrag.jsx
rename to components/ui/EdgeDrag.jsx
diff --git a/components/List.jsx b/components/ui/List.jsx
similarity index 100%
rename from components/List.jsx
rename to components/ui/List.jsx
diff --git a/components/ListItem.jsx b/components/ui/ListItem.jsx
similarity index 100%
rename from components/ListItem.jsx
rename to components/ui/ListItem.jsx
diff --git a/components/Menu.jsx b/components/ui/Menu.jsx
similarity index 100%
rename from components/Menu.jsx
rename to components/ui/Menu.jsx
diff --git a/components/Modal.jsx b/components/ui/Modal.jsx
similarity index 98%
rename from components/Modal.jsx
rename to components/ui/Modal.jsx
index 46b1f51..bf0e4c9 100644
--- a/components/Modal.jsx
+++ b/components/ui/Modal.jsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useDrag } from 'react-use-gesture';
-import Store from '../store';
+import Store from '../../store';
 import { SafeAreaContext } from './SafeArea';
 
 const Modal = ({ open, onClose, children }) => {
diff --git a/components/Nav.jsx b/components/ui/Nav.jsx
similarity index 99%
rename from components/Nav.jsx
rename to components/ui/Nav.jsx
index 03e5a22..3aa0e13 100644
--- a/components/Nav.jsx
+++ b/components/ui/Nav.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { Plugins } from '@capacitor/core';
-import Store from '../store';
+import Store from '../../store';
 
 const Nav = ({ page }) => {
   const [showMenu, setShowMenu] = useState(false);
diff --git a/components/ui/README.md b/components/ui/README.md
new file mode 100644
index 0000000..a368341
--- /dev/null
+++ b/components/ui/README.md
@@ -0,0 +1,5 @@
+# UI Components
+
+These components are a mini-tailwind UI framework for building native mobile apps with web technologies.
+
+These components are meant to be modified and customized to fit your app, and provide many common mobile UI patterns.
diff --git a/components/SafeArea.jsx b/components/ui/SafeArea.jsx
similarity index 100%
rename from components/SafeArea.jsx
rename to components/ui/SafeArea.jsx
diff --git a/components/Tab.jsx b/components/ui/Tab.jsx
similarity index 100%
rename from components/Tab.jsx
rename to components/ui/Tab.jsx
diff --git a/components/TabBar.jsx b/components/ui/TabBar.jsx
similarity index 100%
rename from components/TabBar.jsx
rename to components/ui/TabBar.jsx
diff --git a/pages/index.js b/pages/index.js
index f941b01..5acd897 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,22 +1,23 @@
+import { useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
 import Store from '../store';
 
-import App from '../components/App';
-import Backdrop from '../components/Backdrop';
-import Menu from '../components/Menu';
-import Modal from '../components/Modal';
-import Nav from '../components/Nav';
+import App from '../components/ui/App';
+import Backdrop from '../components/ui/Backdrop';
+import Menu from '../components/ui/Menu';
+import Modal from '../components/ui/Modal';
+import Nav from '../components/ui/Nav';
+import Tab from '../components/ui/Tab';
+import TabBar from '../components/ui/TabBar';
+import List from '../components/ui/List';
+import ListItem from '../components/ui/ListItem';
+import Button from '../components/ui/Button';
+import { SafeAreaProvider } from '../components/ui/SafeArea';
+
 import Home from '../components/pages/Home';
 import Feed from '../components/pages/Feed';
 import Settings from '../components/pages/Settings';
-import Tab from '../components/Tab';
-import TabBar from '../components/TabBar';
-import List from '../components/List';
-import ListItem from '../components/ListItem';
-import { useState } from 'react';
-import Button from '../components/Button';
-import { SafeAreaProvider } from '../components/SafeArea';
 
 const pages = [
   { id: 'home', title: 'Home', icon: 'home-outline', selectedIcon: 'home', component: Home },