diff --git a/components/Content.jsx b/components/Content.jsx
index d88f534..533d4be 100644
--- a/components/Content.jsx
+++ b/components/Content.jsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 
 const Content = ({ className, visible, children }) => (
-  <div className={classNames(`h-full overflow-auto py-2 absolute top-0 ${className || ''}`, {
+  <div className={classNames(`h-full overflow-auto py-2 absolute top-0`, className, {
     visible,
     invisible: !visible
   })}>
diff --git a/components/pages/Profile.jsx b/components/pages/Profile.jsx
index fc75967..efbb9c6 100644
--- a/components/pages/Profile.jsx
+++ b/components/pages/Profile.jsx
@@ -3,7 +3,7 @@ import Content from "../Content";
 
 const Profile = ({ selected }) => {
   return (
-    <Content visible={selected}>
+    <Content visible={selected} className="p-4">
       <h2>Profile</h2>
     </Content>
   )
diff --git a/components/pages/Settings.jsx b/components/pages/Settings.jsx
index 3ff94ec..c4bde04 100644
--- a/components/pages/Settings.jsx
+++ b/components/pages/Settings.jsx
@@ -2,7 +2,7 @@ import Content from "../Content";
 
 const Settings = ({ selected }) => {
   return (
-    <Content visible={selected}>
+    <Content visible={selected} className="p-4">
       <h2>Settings</h2>
     </Content>
   )