diff --git a/apps/web/src/app.css b/apps/web/src/app.css
index 66cbb3400..0659a2769 100644
--- a/apps/web/src/app.css
+++ b/apps/web/src/app.css
@@ -1,4 +1,4 @@
-.unselectable {
+* {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -8,6 +8,6 @@
   cursor: default;
 }
 
-.unselectable::-moz-focus-inner {
+*::-moz-focus-inner {
   border: 0;
 }
diff --git a/apps/web/src/app.js b/apps/web/src/app.js
index 0525a5275..c981450b5 100644
--- a/apps/web/src/app.js
+++ b/apps/web/src/app.js
@@ -15,7 +15,6 @@ const NavMenuItem = props => {
   }, [props.item.key, props.selected]);
   return (
     <Button
-      className="unselectable"
       onClick={props.onSelected}
       variant="nav"
       sx={{
@@ -132,7 +131,7 @@ function App() {
             <CheckBox icon={Icon.Star} label="Favorite" />
             <CheckBox icon={Icon.Lock} label="Lock" />
             <Flex
-              className="unselectable"
+              
               fontSize="body"
               sx={{ marginBottom: 2 }}
               alignItems="center"
@@ -142,7 +141,7 @@ function App() {
             </Flex>
             <Input sx={{ marginBottom: 2 }} variant="default" />
             <Flex
-              className="unselectable"
+              
               fontSize="body"
               sx={{ marginBottom: 2 }}
               alignItems="center"
diff --git a/apps/web/src/components/button/index.js b/apps/web/src/components/button/index.js
index 0fbfd8581..26d3504e3 100644
--- a/apps/web/src/components/button/index.js
+++ b/apps/web/src/components/button/index.js
@@ -22,7 +22,7 @@ const Button = props => (
     onClick={props.onClick}
   >
     {props.Icon && <props.Icon />}
-    <Text as="span" className="unselectable" mx={1} flex="1 1 auto">
+    <Text as="span" mx={1} flex="1 1 auto">
       {props.content}
     </Text>
   </Flex>
diff --git a/apps/web/src/components/checkbox/index.js b/apps/web/src/components/checkbox/index.js
index 7de082e69..021d64299 100644
--- a/apps/web/src/components/checkbox/index.js
+++ b/apps/web/src/components/checkbox/index.js
@@ -12,27 +12,17 @@ const CheckBox = props => {
           props.onCheckChanged(checked);
         }
       }}
-      className="unselectable"
       width="full"
       alignItems="center"
       justifyContent="space-between"
       sx={{ cursor: "pointer", marginBottom: 2 }}
     >
-      <Flex
-        className="unselectable"
-        fontSize="body"
-        sx={{ cursor: "pointer" }}
-        alignItems="center"
-      >
+      <Flex fontSize="body" sx={{ cursor: "pointer" }} alignItems="center">
         <props.icon size={18} />
         <Text sx={{ marginLeft: 1 }}>{props.label}</Text>
       </Flex>
       <Text color={checked ? "primary" : "foreground"}>
-        <Icon.CheckCircle
-          size={18}
-          className="unselectable"
-          style={{ cursor: "pointer" }}
-        />
+        <Icon.CheckCircle size={18} style={{ cursor: "pointer" }} />
       </Text>
     </Flex>
   );
diff --git a/apps/web/src/components/menu/index.js b/apps/web/src/components/menu/index.js
index cc3f82d8c..88c0e0907 100644
--- a/apps/web/src/components/menu/index.js
+++ b/apps/web/src/components/menu/index.js
@@ -38,13 +38,7 @@ function Menu(props) {
               }
             }}
           >
-            <Text
-              className="unselectable"
-              as="span"
-              mx={1}
-              fontFamily="body"
-              fontSize="menu"
-            >
+            <Text as="span" mx={1} fontFamily="body" fontSize="menu">
               {item.title}
             </Text>
           </Flex>
diff --git a/apps/web/src/components/notebook/index.js b/apps/web/src/components/notebook/index.js
index 3f7d4e50a..b32c76a9b 100644
--- a/apps/web/src/components/notebook/index.js
+++ b/apps/web/src/components/notebook/index.js
@@ -64,7 +64,7 @@ const Notebook = ({ item, index, onClick, onTopicClick }) => {
                 color: "static"
               }}
             >
-              <Text className="unselectable" variant="body" fontSize={11}>
+              <Text variant="body" fontSize={11}>
                 {topic.title}
               </Text>
             </Flex>
diff --git a/apps/web/src/utils/css.js b/apps/web/src/utils/css.js
new file mode 100644
index 000000000..e3138fab8
--- /dev/null
+++ b/apps/web/src/utils/css.js
@@ -0,0 +1,8 @@
+export function addCss(rule) {
+  let css = document.createElement("style");
+  css.type = "text/css";
+  if (css.styleSheet) css.styleSheet.cssText = rule;
+  // Support for IE
+  else css.appendChild(document.createTextNode(rule)); // Support for the rest
+  document.getElementsByTagName("head")[0].appendChild(css);
+}
diff --git a/apps/web/src/views/Properties.js b/apps/web/src/views/Properties.js
index 2ee1e652b..5fcf2f6e4 100644
--- a/apps/web/src/views/Properties.js
+++ b/apps/web/src/views/Properties.js
@@ -21,22 +21,12 @@ function Properties() {
       <CheckBox icon={Icon.MapPin} label="Pin" />
       <CheckBox icon={Icon.Star} label="Favorite" />
       <CheckBox icon={Icon.Lock} label="Lock" />
-      <Flex
-        className="unselectable"
-        fontSize="body"
-        sx={{ marginBottom: 2 }}
-        alignItems="center"
-      >
+      <Flex fontSize="body" sx={{ marginBottom: 2 }} alignItems="center">
         <Icon.Tag size={18} />
         <Text sx={{ marginLeft: 1 }}>Tags:</Text>
       </Flex>
       <Input sx={{ marginBottom: 2 }} variant="default" />
-      <Flex
-        className="unselectable"
-        fontSize="body"
-        sx={{ marginBottom: 2 }}
-        alignItems="center"
-      >
+      <Flex fontSize="body" sx={{ marginBottom: 2 }} alignItems="center">
         <Icon.Octagon size={18} />
         <Text sx={{ marginLeft: 1 }}>Colors:</Text>
       </Flex>
diff --git a/apps/web/src/views/Settings.js b/apps/web/src/views/Settings.js
index e9342f7f1..b94b4a177 100644
--- a/apps/web/src/views/Settings.js
+++ b/apps/web/src/views/Settings.js
@@ -10,12 +10,8 @@ function Settings() {
   return (
     <Flex flexDirection="column" flex="1 1 auto">
       <Flex flexDirection="column" flex="1 1 auto">
-        <Button className="unselectable" variant="setting">
-          General
-        </Button>
-        <Button className="unselectable" variant="setting">
-          Account
-        </Button>
+        <Button variant="setting">General</Button>
+        <Button variant="setting">Account</Button>
         <Box
           sx={{
             borderLeft: "0px Solid",
@@ -26,7 +22,7 @@ function Settings() {
           }}
           py="15px"
         >
-          <Flex className="unselectable" fontSize="body" alignItems="center">
+          <Flex fontSize="body" alignItems="center">
             <Text px="16px" sx={{ fontFamily: "body", fontSize: "title" }}>
               Theme
             </Text>
@@ -59,7 +55,6 @@ function Settings() {
               <Text width={1 / 2}>Dark Mode</Text>{" "}
               <Flex width={1 / 2} justifyContent="right">
                 <Switch
-                  className="unselectable"
                   onClick={() => {
                     setCheck(!check);
                     changeTheme();
@@ -70,15 +65,9 @@ function Settings() {
             </Flex>
           </Flex>
         </Box>
-        <Button className="unselectable" variant="setting">
-          Terms of Service
-        </Button>
-        <Button className="unselectable" variant="setting">
-          Privacy Policy
-        </Button>
-        <Button className="unselectable" variant="setting">
-          About
-        </Button>
+        <Button variant="setting">Terms of Service</Button>
+        <Button variant="setting">Privacy Policy</Button>
+        <Button variant="setting">About</Button>
       </Flex>
     </Flex>
   );