diff --git a/package.json b/package.json
index 0c75d9d..4ab8b01 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,7 @@
     "react-icons": "^3.8.0",
     "react-redux": "^7.1.3",
     "redux": "^4.0.4",
-    "reselect": "^4.0.0",
-    "styled-components": "^4.4.1"
+    "reselect": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.5",
diff --git a/src/components/RsvpReader.css b/src/components/RsvpReader.css
new file mode 100644
index 0000000..ec7ccbd
--- /dev/null
+++ b/src/components/RsvpReader.css
@@ -0,0 +1,13 @@
+.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+  border: 1px solid black;
+}
+
+.mainItem {
+  composes: item;
+  flex: 2;
+}
diff --git a/src/components/RsvpReader.js b/src/components/RsvpReader.js
index 76977af..4f56dca 100644
--- a/src/components/RsvpReader.js
+++ b/src/components/RsvpReader.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import styled from 'styled-components'
 import { TextInput } from './TextInput'
 import { TextOutput } from './TextOutput'
 import { MainControl } from './MainControl'
@@ -7,30 +6,23 @@ import { RsvpSegment } from './RsvpSegment'
 import { RsvpOptions } from './RsvpOptions'
 import { RsvpPlayer } from './RsvpPlayer'
 
-const FlexRow = styled.div`
-  display: flex;
-`
-
-const FlexItem = styled.div`
-  flex: ${props => props.flex || 1};
-  border: 1px solid black;
-`
+import styles from './RsvpReader.css'
 
 export const RsvpReader = () => {
   return (
-    <FlexRow>
-      <FlexItem>
+    <div className={styles.container}>
+      <div className={styles.item}>
         <TextInput />
-      </FlexItem>
-      <FlexItem flex={2}>
+      </div>
+      <div className={styles.mainItem}>
         <RsvpSegment />
         <MainControl></MainControl>
         <RsvpOptions></RsvpOptions>
         <RsvpPlayer />
-      </FlexItem>
-      <FlexItem>
+      </div>
+      <div className={styles.item}>
         <TextOutput />
-      </FlexItem>
-    </FlexRow>
+      </div>
+    </div>
   )
 }
diff --git a/src/components/TextInput.js b/src/components/TextInput.js
index becd1f8..bbbe373 100644
--- a/src/components/TextInput.js
+++ b/src/components/TextInput.js
@@ -1,20 +1,8 @@
 import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
-import styled from 'styled-components'
 
 import { setText } from '../store/actions.js'
 
-const Button = styled.button`
-  padding: 0.5em 1em;
-  border-radius: 3px;
-  background: white;
-  color: grey;
-
-  &:hover {
-    background: lightgrey;
-  }
-`
-
 const lorem =
   'Excepteur aliqua cupidatat ullamco laboris cupidatat elit sint cillum incididunt. Anim sit excepteur laboris commodo ullamco consequat tempor. Velit elit eiusmod aute aliquip amet sunt minim deserunt voluptate esse ea sint. Commodo ipsum dolor dolor Lorem et consectetur minim ut in voluptate. Nulla qui consectetur nostrud sint anim minim duis qui amet. Ipsum reprehenderit eiusmod quis Lorem. Consectetur ipsum quis incididunt proident ea sit mollit veniam in excepteur.'
 
@@ -27,7 +15,7 @@ export const TextInput = () => {
         defaultValue={text}
         onInput={e => setTextState(e.target.value)}
       ></textarea>
-      <Button onClick={() => dispatch(setText(text))}>Load</Button>
+      <button onClick={() => dispatch(setText(text))}>Load</button>
     </div>
   )
 }
diff --git a/src/components/TextOutput.css b/src/components/TextOutput.css
new file mode 100644
index 0000000..f483f55
--- /dev/null
+++ b/src/components/TextOutput.css
@@ -0,0 +1,7 @@
+.current {
+  text-decoration: underline;
+}
+
+.sentenceBeginning {
+  color: red;
+}
diff --git a/src/components/TextOutput.js b/src/components/TextOutput.js
index 520b63b..97fd54e 100644
--- a/src/components/TextOutput.js
+++ b/src/components/TextOutput.js
@@ -1,39 +1,39 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
-import styled from 'styled-components'
+import classNames from 'classnames'
 
+import { getNextSmallerNumber } from '../lib/array-util.js'
 import {
   selectParsedText,
   selectCurrentSegmentIndex
 } from '../store/selectors.js'
 
-const Segment = styled.span`
-  color: ${props => (props.sentenceBeginning ? 'red' : 'black')};
-  font-weight: ${props => (props.current ? 'bold' : 'normal')};
-`
-
-const SelectedSegment = styled.span`
-  font-weight: ;
-`
+import styles from './TextOutput.css'
 
 export const TextOutput = () => {
-  const parsedText = useSelector(selectParsedText)
+  const { segments, sentences, words } = useSelector(selectParsedText)
   const curSegment = useSelector(selectCurrentSegmentIndex)
-  const { segments, words, sentences } = parsedText
   return (
     <div>
       {segments.map((segment, idx) => {
-        const current = curSegment === idx
-        const sentenceBeginning = sentences.includes(idx)
+        const isCurrent = curSegment === idx
+        const isWordStart = words.includes(idx)
+        const wordBeginning = isWordStart
+          ? idx
+          : getNextSmallerNumber(idx, words)
+        const isSentenceStart = sentences.includes(wordBeginning)
 
         return (
-          <Segment
+          <span
             key={idx}
-            current={current}
-            sentenceBeginning={sentenceBeginning}
+            className={classNames({
+              [styles.current]: isCurrent,
+              [styles.sentenceBeginning]: isSentenceStart
+            })}
           >
-            {segment}{' '}
-          </Segment>
+            {isWordStart && ' '}
+            {segment}
+          </span>
         )
       })}
     </div>
diff --git a/src/styles/IconButton.css b/src/styles/IconButton.css
new file mode 100644
index 0000000..300adf1
--- /dev/null
+++ b/src/styles/IconButton.css
@@ -0,0 +1,42 @@
+.svgButton {
+  display: inline-block;
+  border: none;
+  border-radius: 2px;
+  background: none;
+  cursor: pointer;
+  padding: 3px;
+  /* width: 1.4em; */
+  /* height: 1.4em; */
+}
+
+.svgButton svg {
+  outline: none;
+  transition: transform 0.1s linear;
+  vertical-align: middle;
+}
+
+.svgButton:focus {
+  outline: 2px dashed #17171d;
+}
+
+.svgButton:hover svg {
+  transform: scale(1.1);
+}
+
+.svgButton::-moz-focus-inner {
+  border: 0;
+}
+
+.svgButton[disabled] svg {
+  transform: scale(1.5);
+
+  color: '#c7c7c7';
+}
+
+.a11yLabel {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+}
diff --git a/src/styles/IconButton.js b/src/styles/IconButton.js
index 8cfe2fc..7a498d7 100644
--- a/src/styles/IconButton.js
+++ b/src/styles/IconButton.js
@@ -1,57 +1,20 @@
 import React from 'react'
-import styled from 'styled-components'
 
-const SvgButton = styled.button`
-  display: inline-block;
-  border: none;
-  border-radius: 2px;
-  background: none;
-  cursor: pointer;
-  padding: 3px;
-  /* width: 1.4em; */
-  /* height: 1.4em; */
+import styles from './IconButton.css'
 
-  svg {
-    outline: none;
-    transition: transform 0.1s linear;
-    vertical-align: middle;
-  }
+const SvgButton = ({ children, ...props }) => (
+  <button className={styles.svgButton} {...props}>
+    {children}
+  </button>
+)
 
-  &:focus {
-    outline: 2px dashed #17171d;
-  }
+const AccessLabel = ({ children }) => (
+  <span className={styles.a11yLabel}>{children}</span>
+)
 
-  &:hover {
-    svg {
-      transform: scale(1.1);
-    }
-  }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &[disabled] {
-    color: '#c7c7c7';
-    svg {
-      transform: scale(1.5);
-
-      color: '#c7c7c7';
-    }
-  }
-`
-
-const AccessLabel = styled.span`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  white-space: nowrap;
-`
-
-export const IconButton = ({ Icon, title, onClick, disabled }) => {
+export const IconButton = ({ Icon, title, ...props }) => {
   return (
-    <SvgButton onClick={onClick} title={title} tabindex="0" disabled={disabled}>
+    <SvgButton tabIndex="0" title={title} {...props}>
       {Icon && <Icon aria-hidden="true" focusable="false" />}
       <AccessLabel>{title}</AccessLabel>
     </SvgButton>