diff --git a/apps/web/src/views/Settings.js b/apps/web/src/views/Settings.js
index 68ca823f1..33c577118 100644
--- a/apps/web/src/views/Settings.js
+++ b/apps/web/src/views/Settings.js
@@ -11,166 +11,166 @@ const Settings = props => {
   const theme = useTheme();
   return (
     <Flex flexDirection="column" flex="1 1 auto">
-      <Flex flexDirection="column" flex="1 1 auto">
+      <Flex
+        flexDirection="row"
+        bg="shade"
+        mx={2}
+        p={2}
+        sx={{ borderRadius: "default" }}
+      >
         <Flex
-          flexDirection="row"
-          bg="shade"
-          mx={2}
-          p={2}
-          sx={{ borderRadius: "default" }}
+          flexDirection="column"
+          justifyContent="center"
+          alignItems="center"
+          bg="primary"
+          mr={2}
+          sx={{
+            width: 40,
+            height: 40,
+            borderRadius: 80,
+            color: "secondary"
+          }}
         >
-          <Flex
-            flexDirection="column"
-            justifyContent="center"
-            alignItems="center"
-            bg="primary"
-            mr={2}
-            sx={{
-              width: 40,
-              height: 40,
-              borderRadius: 80,
-              color: "secondary"
-            }}
-          >
-            <Icon.User style={{ margin: 2 }} size={20} />
+          <Icon.User style={{ margin: 2 }} size={20} />
+        </Flex>
+        <Flex flexDirection="column" justifyContent="center">
+          <Flex fontSize="subBody" color="gray">
+            You are not logged in
           </Flex>
-          <Flex flexDirection="column" justifyContent="center">
-            <Flex fontSize="subBody" color="gray">
-              You are not logged in
-            </Flex>
-            <Flex fontSize="body" color="primary">
-              Login to sync notes.
-            </Flex>
+          <Flex fontSize="body" color="primary">
+            Login to sync notes.
           </Flex>
         </Flex>
-        <Box
-          px={2}
-          mt={2}
-          fontSize="body"
-          fontFamily="heading"
-          fontWeight="bold"
-          color="primary"
-        >
-          Appearance
-        </Box>
-        <Box
-          sx={{
-            borderBottom: "1px Solid",
-            borderColor: "border",
-            "&:hover": { borderColor: "primary" }
-          }}
-          py={2}
-        >
-          <Flex
-            fontSize="body"
-            alignItems="center"
-            px={2}
-            sx={{ fontSize: "body" }}
-          >
-            {Titles.accent}
-          </Flex>
-
-          <Flex flexDirection="column" justifyContent="center" mx={2}>
-            <Flex
-              flexWrap="wrap"
-              sx={{ marginBottom: 2, borderRadius: "default" }}
-              justifyContent="left"
-              my={2}
-              bg="shade"
-              p={1}
-            >
-              {[
-                { label: "red", code: "#ed2d37" },
-                { label: "orange", code: "#ec6e05" },
-                { label: "yellow", code: "yellow" },
-                { label: "green", code: "green" },
-                { label: "blue", code: "blue" },
-                { label: "purple", code: "purple" },
-                { label: "gray", code: "gray" },
-                { label: "lightblue", code: "#46F0F0" },
-                { label: "indigo", code: "#F032E6" },
-                { label: "lightpink", code: "#FABEBE" }
-              ].map(color => (
-                <Flex
-                  sx={{ position: "relative" }}
-                  justifyContent="center"
-                  alignItems="center"
-                  onClick={() => {
-                    changeAccent(color.code);
-                  }}
-                >
-                  {color.code === theme.colors.primary && (
-                    <Icon.Check
-                      style={{
-                        position: "absolute",
-                        cursor: "pointer",
-                        color: "white"
-                      }}
-                      size={20}
-                    />
-                  )}
-                  <Icon.Circle
-                    size={40}
-                    style={{ cursor: "pointer" }}
-                    fill={color.code}
-                    strokeWidth={0}
-                  />
-                </Flex>
-              ))}
-            </Flex>
-          </Flex>
-          <Flex flexDirection="row" px={2} justifyContent="space-between">
-            <Text fontSize="body">Dark Mode</Text>
-            <Switch
-              onClick={() => {
-                setCheck(!check);
-                changeTheme();
-              }}
-              checked={check}
-            />
-          </Flex>
-        </Box>
-        <Box
-          px={2}
-          mt={2}
-          fontSize="body"
-          fontFamily="heading"
-          fontWeight="bold"
-          color="primary"
-        >
-          Other
-        </Box>
-        <Button
-          variant="setting"
-          onClick={() => {
-            props.navigator.navigate("TOS", {
-              title: Titles.TOS
-            });
-          }}
-        >
-          {Titles.TOS}
-        </Button>
-        <Button
-          variant="setting"
-          onClick={() => {
-            props.navigator.navigate("privacy", {
-              title: Titles.privacy
-            });
-          }}
-        >
-          {Titles.privacy}
-        </Button>
-        <Button
-          variant="setting"
-          onClick={() => {
-            props.navigator.navigate("about", {
-              title: Titles.about
-            });
-          }}
-        >
-          {Titles.about}
-        </Button>
       </Flex>
+      <Box
+        px={2}
+        mt={2}
+        fontSize="body"
+        fontFamily="heading"
+        fontWeight="bold"
+        color="primary"
+      >
+        Appearance
+      </Box>
+      <Box
+        sx={{
+          borderBottom: "1px Solid",
+          borderColor: "border",
+          "&:hover": { borderColor: "primary" }
+        }}
+        py={2}
+      >
+        <Flex
+          fontSize="body"
+          alignItems="center"
+          px={2}
+          sx={{ fontSize: "body" }}
+        >
+          {Titles.accent}
+        </Flex>
+
+        <Flex
+          flexWrap="wrap"
+          sx={{
+            marginBottom: 2,
+            borderRadius: "default"
+          }}
+          justifyContent="left"
+          mx={2}
+          my={2}
+          bg="shade"
+          p={1}
+        >
+          {[
+            { label: "red", code: "#ed2d37" },
+            { label: "orange", code: "#ec6e05" },
+            { label: "yellow", code: "yellow" },
+            { label: "green", code: "green" },
+            { label: "blue", code: "blue" },
+            { label: "purple", code: "purple" },
+            { label: "gray", code: "gray" },
+            { label: "lightblue", code: "#46F0F0" },
+            { label: "indigo", code: "#F032E6" },
+            { label: "lightpink", code: "#FABEBE" }
+          ].map(color => (
+            <Flex
+              sx={{ position: "relative" }}
+              justifyContent="center"
+              alignItems="center"
+              onClick={() => {
+                changeAccent(color.code);
+              }}
+            >
+              {color.code === theme.colors.primary && (
+                <Icon.Check
+                  style={{
+                    position: "absolute",
+                    cursor: "pointer",
+                    color: "white"
+                  }}
+                  size={20}
+                />
+              )}
+              <Icon.Circle
+                size={40}
+                style={{ cursor: "pointer" }}
+                fill={color.code}
+                strokeWidth={0}
+              />
+            </Flex>
+          ))}
+        </Flex>
+        <Flex flexDirection="row" px={2} justifyContent="space-between">
+          <Text fontSize="body">Dark Mode</Text>
+          <Switch
+            onClick={() => {
+              setCheck(!check);
+              changeTheme();
+            }}
+            checked={check}
+          />
+        </Flex>
+      </Box>
+      <Box
+        px={2}
+        mt={2}
+        fontSize="body"
+        fontFamily="heading"
+        fontWeight="bold"
+        color="primary"
+      >
+        Other
+      </Box>
+      <Button
+        variant="setting"
+        onClick={() => {
+          props.navigator.navigate("TOS", {
+            title: Titles.TOS
+          });
+        }}
+      >
+        {Titles.TOS}
+      </Button>
+      <Button
+        variant="setting"
+        onClick={() => {
+          props.navigator.navigate("privacy", {
+            title: Titles.privacy
+          });
+        }}
+      >
+        {Titles.privacy}
+      </Button>
+      <Button
+        variant="setting"
+        onClick={() => {
+          props.navigator.navigate("about", {
+            title: Titles.about
+          });
+        }}
+      >
+        {Titles.about}
+      </Button>
     </Flex>
   );
 };