diff --git a/src/gcf.css b/src/gcf.css
index 001b7d9..9bfa3d2 100644
--- a/src/gcf.css
+++ b/src/gcf.css
@@ -4,3 +4,36 @@
     background: white;
     color: black;
 }
+
+.solution-term {
+    display: inline-block;
+    padding: 9px;
+    color: white;
+    border-radius: 18px;
+    min-width: 36px;
+    font-size: 80%;
+}
+
+.solution-term-red {
+    background-color: red;
+}
+
+.solution-term-blue {
+    background-color: blue;
+}
+
+.solution-term-green {
+    background-color: green;
+}
+
+.solution-term-brown {
+    background-color: brown;
+}
+
+.solution-term-purple {
+    background-color: purple;
+}
+
+.solution-term-orange {
+    background-color: orange;
+}
diff --git a/src/gcf.tsx b/src/gcf.tsx
index 6818d0f..3a31d03 100644
--- a/src/gcf.tsx
+++ b/src/gcf.tsx
@@ -20,9 +20,15 @@ function Solution({rows}:SolutionParams) {
   ]
   const displayRow = (row : SolutionRow, index : number) => {
     let range : number[] = [0, 1, 2]
-    const styles = range.map((i)=>{return `padding:3px;color:white;background:${colors[(i+index)%colors.length]}`})
+    const klasses = range.map((i)=>{return `solution-term solution-term-${colors[(i+index)%colors.length]}`})
     return <p>
-      <span style={styles[0]}>{row[0]}</span>&nbsp;&divide;&nbsp;<span style={styles[1]}>{row[2]}</span>&nbsp;=&nbsp;{row[1]}&nbsp;R&nbsp;<span style={styles[2]}>{row[3]}</span>
+      <span className={klasses[0]}>{row[0]}</span>
+      &nbsp;&divide;&nbsp;
+      <span className={klasses[1]}>{row[2]}</span>
+      &nbsp;=&nbsp;
+      {row[1]}
+      &nbsp;R&nbsp;
+      <span className={klasses[2]}>{row[3]}</span>
     </p>
   }
 
diff --git a/src/lib.tsx b/src/lib.ts
similarity index 100%
rename from src/lib.tsx
rename to src/lib.ts
diff --git a/src/navbar.tsx b/src/navbar.tsx
index 225ca0a..ab79b90 100644
--- a/src/navbar.tsx
+++ b/src/navbar.tsx
@@ -9,7 +9,7 @@ function Navbar() {
   }
 
   return (
-    <nav class="navbar navbar-expand-lg bg-body-tertiary">
+    <nav class="navbar navbar-expand-sm bg-body-tertiary">
       <div class="container-fluid">
         <a class="navbar-brand" href="#">Math Practice</a>
         <button class="navbar-toggler" type="button" onClick={()=>setShow(!show)} aria-expanded={show} aria-label="Toggle navigation">