diff --git a/src/components/ExpressionCard/ExpressionCard.tsx b/src/components/ExpressionCard/ExpressionCard.tsx
index 1e3afbc..4d5db1f 100644
--- a/src/components/ExpressionCard/ExpressionCard.tsx
+++ b/src/components/ExpressionCard/ExpressionCard.tsx
@@ -14,14 +14,12 @@ export function ExpressionCard({
   show_description,
 }: ExpressionCardProps) {
   return (
-    <article className="expression-card">
-      <h2 className="expression-card-prompt">{prompt}</h2>
-      <span className="expression-card-categories">
-        {categories.join(", ")}
-      </span>
-      {show_description && (
-        <div className="expression-card-details">{description}</div>
-      )}
+    <article className="content-card">
+      <h2 className="content-row text-title">{prompt}</h2>
+      <span className="content-row text-meta">{categories.join(", ")}</span>
+      {show_description ? (
+        <div className="content-paragraph text-details">{description}</div>
+      ) : null}
     </article>
   );
 }
diff --git a/src/components/ExpressionSetCard/ExpressionSetCard.tsx b/src/components/ExpressionSetCard/ExpressionSetCard.tsx
index 640b519..909779a 100644
--- a/src/components/ExpressionSetCard/ExpressionSetCard.tsx
+++ b/src/components/ExpressionSetCard/ExpressionSetCard.tsx
@@ -10,14 +10,10 @@ export function ExpressionSetCard({
   word_count,
 }: ExpressionSetCardProps) {
   return (
-    <article className="expression-set-card">
-      <h2 className="expression-set-card-header">
-        <span className="expression-set-card-name">{name}</span>
-        <span className="expression-set-card-word-count">
-          {word_count} word(s)
-        </span>
-      </h2>
-      <p className="expression-set-card-description">{description}</p>
+    <article className="content-card">
+      <h2 className="content-row text-title">{name}</h2>
+      <span className="content-row text-meta">{word_count} word(s)</span>
+      <p className="content-paragraph text-details">{description}</p>
     </article>
   );
 }
diff --git a/src/components/ExpressionSetInfo/ExpressionSetInfo.tsx b/src/components/ExpressionSetInfo/ExpressionSetInfo.tsx
index 2603d36..7d1f93c 100644
--- a/src/components/ExpressionSetInfo/ExpressionSetInfo.tsx
+++ b/src/components/ExpressionSetInfo/ExpressionSetInfo.tsx
@@ -16,8 +16,8 @@ export function ExpressionSetInfo({
 }: ExpressionSetInfo) {
   return (
     <section className="expression-set-info">
-      <h2 className="expression-set-info-header">
-        <span className="expression-set-info-name">{name}</span>
+      <h2 className="content-row">
+        <span className="text-title grow">{name}</span>
         <Link
           href={{
             pathname: "expression-set/settings",
@@ -37,10 +37,8 @@ export function ExpressionSetInfo({
           </a>
         </Link>
       </h2>
-      <span className="expression-set-info-word-count">
-        {word_count} word(s)
-      </span>
-      <p className="expression-set-info-description">{description}</p>
+      <span className="content-row text-meta">{word_count} word(s)</span>
+      <p className="content-paragraph text-details">{description}</p>
     </section>
   );
 }
diff --git a/src/components/Navigation/NavigationItem.tsx b/src/components/Navigation/NavigationItem.tsx
index 07c4593..d39b619 100644
--- a/src/components/Navigation/NavigationItem.tsx
+++ b/src/components/Navigation/NavigationItem.tsx
@@ -17,11 +17,11 @@ export function NavigationItem({ text, iconUrl, href }: NavigationItemProps) {
   if (href !== "/" && router.pathname.startsWith(href)) active = true;
 
   return (
-    <li className={active ? "navigation-item active" : "navigation-item"}>
+    <li className="navigation-li">
       <Link href={href} passHref>
-        <a>
+        <a className={active ? "navigation-item active" : "navigation-item"}>
           {iconUrl && <Image src={iconUrl} width="24" height="24" alt="" />}
-          <span>{text}</span>
+          <span className="text-navigation">{text}</span>
         </a>
       </Link>
     </li>
diff --git a/src/pages/expression-sets/details.tsx b/src/pages/expression-sets/details.tsx
index 09d4261..1e7a5a7 100644
--- a/src/pages/expression-sets/details.tsx
+++ b/src/pages/expression-sets/details.tsx
@@ -34,9 +34,7 @@ const ExpressionSetDetailsPage: NextPage = () => {
             description={expression_set.description}
             word_count={word_count}
           />
-          <p className="details grow scroll">
-            No expressions left in this set.
-          </p>
+          <p className="text-details">No expressions left in this set.</p>
         </div>
       </Page>
     );
@@ -50,7 +48,7 @@ const ExpressionSetDetailsPage: NextPage = () => {
           description={expression_set.description}
           word_count={word_count}
         />
-        <p className="details grow scroll">{/* TODO add details */}</p>
+        <p className="text-details grow">{/* TODO other details */}</p>
         <Link
           href={{
             pathname: "expression-sets/practice",
@@ -58,8 +56,8 @@ const ExpressionSetDetailsPage: NextPage = () => {
           }}
           passHref
         >
-          <a className="navigation-item-button">
-            <span>Practice</span>
+          <a className="navigation-item text-navigation">
+            <span>Practice this set</span>
           </a>
         </Link>
       </div>
diff --git a/src/styles/components.css b/src/styles/components.css
index 2f34a41..4c59818 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -13,6 +13,32 @@
   overflow-y: auto;
 }
 
+/* Typography */
+
+.text-navigation {
+  color: black;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.text-title {
+  color: darkslategray;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.text-meta {
+  color: slategray;
+  font-family: monospace;
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.text-details {
+  color: darkslategray;
+  font-size: 15px;
+}
+
 /* Page */
 
 .page {
@@ -32,6 +58,7 @@
 
   /* Will it conflict with overlays? Move elsewhere? */
   padding: 16px;
+  height: 100%;
   overflow-y: auto;
 }
 
@@ -46,55 +73,37 @@
 .navigation {
   display: flex;
   flex-direction: row;
+  box-shadow: 0px 5px 5px -5px darkslategray;
 }
 
-.navigation > .navigation-item {
+.navigation > .navigation-li {
   flex: 1;
 }
 
-.navigation-item {
+.navigation-li {
   list-style: none;
 }
 
-.navigation-item > a {
+.navigation-item {
   display: flex;
+  flex-shrink: 0;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
   background-color: lavenderblush;
   border: 1px solid darkslategray;
-  font-weight: bold;
   height: 64px;
 }
 
-.navigation-item > a:hover {
+.navigation-item:hover {
   background-color: antiquewhite;
 }
 
-.navigation-item.active > a {
+.navigation-item.active {
   background-color: bisque;
-  cursor: default;
 }
 
-.navigation-item-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  background-color: lavenderblush;
-  border: 1px solid darkslategray;
-  font-weight: bold;
-  height: 64px;
-}
-
-.navigation-item-button:hover {
-  background-color: antiquewhite;
-}
-
-/* Misc classes */
-
 .icon-button {
   display: flex;
   align-items: center;
@@ -110,6 +119,8 @@
   border: 1px solid slategray;
 }
 
+/* tofix */
+
 .details {
   color: darkslategray;
   font-size: 15px;
@@ -117,95 +128,28 @@
   overflow-y: auto;
 }
 
-/* Expression cards */
+/* Content organization */
 
-.expression-card {
-  display: flex;
-  flex-direction: column;
+.content-page {
+  padding: 16px;
+}
 
+.content-card {
   background-color: lavender;
   border: 1px solid darkslategray;
   box-shadow: 0px 5px 5px -5px darkslategray;
   padding: 16px;
-  word-wrap: break-word;
 }
 
-.expression-card-prompt {
-  color: darkslategray;
-  font-size: 18px;
-  font-weight: bold;
-  margin: 10px 0px;
-}
-
-.expression-card-categories {
-  color: slategray;
-  font-family: monospace;
-  font-size: 12px;
-  margin: 10px 0px;
-}
-
-.expression-card-details {
-  color: darkslategray;
-  font-size: 15px;
-  margin: 20px 0px 10px;
-  overflow-y: auto;
-}
-
-.expression-card-details::-webkit-scrollbar-track {
-  background-color: lightslategray;
-  border-radius: 4px;
-}
-
-.expression-card-details::-webkit-scrollbar {
-  border-radius: 4px;
-  width: 8px;
-  padding-left: 14px;
-}
-
-.expression-card-details::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  background-color: darkslategray;
-}
-
-/* Expression set card */
-
-.expression-set-card {
-  display: flex;
-  flex-direction: column;
-
-  background-color: lavender;
-  border: 1px solid darkslategray;
-  box-shadow: 0px 5px 5px -5px darkslategray;
-  padding: 16px;
-  word-wrap: break-word;
-}
-
-.expression-set-card-header {
+.content-row {
   display: flex;
   flex-direction: row;
   align-items: center;
-}
-
-.expression-set-card-name {
-  color: darkslategray;
-  font-size: 18px;
-  font-weight: bold;
   margin: 10px 0px;
-  text-transform: capitalize;
 }
 
-.expression-set-card-word-count {
-  color: slategray;
-  font-family: monospace;
-  font-size: 12px;
-  margin: 10px;
-}
-
-.expression-set-card-description {
-  color: darkslategray;
-  font-size: 15px;
+.content-paragraph {
   margin: 20px 0px 10px;
-  overflow-y: auto;
 }
 
 /* Expression set page */
@@ -215,33 +159,3 @@
   flex-direction: column;
   height: 100%;
 }
-
-.expression-set-info-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.expression-set-info-name {
-  flex: 1;
-  color: darkslategray;
-  font-size: 24px;
-  font-weight: bold;
-  margin: 10px 0px;
-  text-transform: capitalize;
-  word-wrap: break-word;
-}
-
-.expression-set-info-word-count {
-  flex: 1;
-  color: slategray;
-  font-family: monospace;
-  font-size: 12px;
-}
-
-.expression-set-info-description {
-  color: darkslategray;
-  font-size: 15px;
-  margin: 20px 0px 10px;
-  overflow-y: auto;
-}