diff --git a/README.md b/README.md
index 58beeac..530420a 100644
--- a/README.md
+++ b/README.md
@@ -1,70 +1,15 @@
-# Getting Started with Create React App
+# Speed Reader by a110
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This app is intended to help the user improve their reading speed by displaying the words
+of a text passage one by one at a given speed. That prevents the reader from effectively
+subvocalization or regression. For more background on the contextual meaning of these terms,
+visit the [Wikipedia page on Speed Reading](https://en.wikipedia.org/wiki/Speed_reading) -
+the content of which is used as the default text passage within the app.
 
-## Available Scripts
+The text used in the app can be easily replaced by any other text that might be more
+applicable to the specific use case.
 
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+The styling could use refinement and in particular there is no support as yet for a dark
+mode view. Also the deployment originally intended with GitHub Pages was not possible due
+to the behavior of the main app at [a110.dev](https://a110.dev). Thus for the time being
+this app can be viewed via Netlify at [https://main--velvety-gumdrop-c43a77.netlify.app/](https://main--velvety-gumdrop-c43a77.netlify.app/)
diff --git a/jsconfig.json b/jsconfig.json
index ffcd441..0967ef4 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1 +1 @@
-{ }
+{}
diff --git a/src/App.js b/src/App.js
index 8949300..4c2da8f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,7 @@ import React from "react";
 import { useRecoilValue } from "recoil";
 import Frame from "./components/Frame";
 import Header from "./components/Header";
-import { VIEW_NAME_PASSAGE } from './constants'
+import { VIEW_NAME_PASSAGE } from "./constants";
 import state from "./state";
 import Passage from "./views/Passage";
 import WordsRunner from "./views/WordsRunner";
diff --git a/src/GlobalStyles.js b/src/GlobalStyles.js
index 9b1997d..6fcef8b 100644
--- a/src/GlobalStyles.js
+++ b/src/GlobalStyles.js
@@ -1,37 +1,37 @@
-import React from 'react'
-import { createGlobalStyle } from 'styled-components'
-import tw, { GlobalStyles as BaseStyles } from 'twin.macro'
-
-const CustomStyles = createGlobalStyle`
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-      sans-serif;
-    ${tw`antialiased`}
-    margin: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-      monospace;
-  }
-
-  #root {
-    background-color: cyan;
-    height: 100%;
-  }
-`
-
-const GlobalStyles = () => (
-  <>
-    <BaseStyles />
-    <CustomStyles />
-  </>
-)
-
-export default GlobalStyles
+import React from "react";
+import { createGlobalStyle } from "styled-components";
+import tw, { GlobalStyles as BaseStyles } from "twin.macro";
+
+const CustomStyles = createGlobalStyle`
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+      sans-serif;
+    ${tw`antialiased`}
+    margin: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+      monospace;
+  }
+
+  #root {
+    background-color: cyan;
+    height: 100%;
+  }
+`;
+
+const GlobalStyles = () => (
+  <>
+    <BaseStyles />
+    <CustomStyles />
+  </>
+);
+
+export default GlobalStyles;
diff --git a/src/components/Button.js b/src/components/Button.js
index cd67c6a..3aae44e 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,6 +1,6 @@
-import React from 'react'
-import tw, { styled } from 'twin.macro';
-import 'styled-components/macro';
+import React from "react";
+import tw, { styled } from "twin.macro";
+import "styled-components/macro";
 
 const StyledAnchor = styled.a(() => [
   `
@@ -26,13 +26,11 @@ const StyledAnchor = styled.a(() => [
     active:top-0.5
     hover:from-sky-400
     hover:to-sky-500
-  `
-])
+  `,
+]);
 
-const Button = ({value, onClick}) => {
-  return (
-    <StyledAnchor onClick={onClick}>{value}</StyledAnchor>
-  )
-}
+const Button = ({ value, onClick }) => {
+  return <StyledAnchor onClick={onClick}>{value}</StyledAnchor>;
+};
 
-export default Button
+export default Button;
diff --git a/src/components/Controls/PlayPauseButton.js b/src/components/Controls/PlayPauseButton.js
index 64a5944..3c913d7 100644
--- a/src/components/Controls/PlayPauseButton.js
+++ b/src/components/Controls/PlayPauseButton.js
@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { useRecoilState } from "recoil";
 import state from "../../state";
-import Button from '../Button'
+import Button from "../Button";
 
 const PlayPauseButton = () => {
   const [isPlaying, setIsPlaying] = useRecoilState(state.isPlaying);
@@ -10,12 +10,7 @@ const PlayPauseButton = () => {
     setIsPlaying((isPlaying) => !isPlaying);
   }, [setIsPlaying]);
 
-  return (
-    <Button
-      value={isPlaying ? "Pause" : "Play"}
-      onClick={onClick}
-    />
-  );
+  return <Button value={isPlaying ? "Pause" : "Play"} onClick={onClick} />;
 };
 
 export default PlayPauseButton;
diff --git a/src/components/Controls/ResetButton.js b/src/components/Controls/ResetButton.js
index b62c5e7..2cad0f4 100644
--- a/src/components/Controls/ResetButton.js
+++ b/src/components/Controls/ResetButton.js
@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import { useSetRecoilState } from "recoil";
 import { VIEW_NAME_PASSAGE } from "../../constants";
 import state from "../../state";
-import Button from '../Button'
+import Button from "../Button";
 
 const ResetButton = () => {
   const setIsPlaying = useSetRecoilState(state.isPlaying);
@@ -12,7 +12,7 @@ const ResetButton = () => {
   const onClick = useCallback(() => {
     setIsPlaying(false);
     setOffset(0);
-    setViewName(VIEW_NAME_PASSAGE)
+    setViewName(VIEW_NAME_PASSAGE);
   }, [setIsPlaying, setOffset, setViewName]);
 
   return <Button value="Reset" onClick={onClick} />;
diff --git a/src/components/Controls/RestartButton.js b/src/components/Controls/RestartButton.js
index ffc0dcb..9f1e161 100644
--- a/src/components/Controls/RestartButton.js
+++ b/src/components/Controls/RestartButton.js
@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { useSetRecoilState } from "recoil";
 import state from "../../state";
-import Button from '../Button'
+import Button from "../Button";
 
 const RestartButton = () => {
   const setIsPlaying = useSetRecoilState(state.isPlaying);
diff --git a/src/components/Controls/WpmControl.js b/src/components/Controls/WpmControl.js
index f79f8c1..757dd8b 100644
--- a/src/components/Controls/WpmControl.js
+++ b/src/components/Controls/WpmControl.js
@@ -1,25 +1,15 @@
-import React  from "react";
+import React from "react";
 import { useRecoilValue } from "recoil";
-import tw from 'twin.macro';
+import tw from "twin.macro";
 import state from "../../state";
 import WpmSlider from "./WpmSlider";
 
-const Row = tw.div`flex gap-2 items-center w-full bg-gray-100`
-const Label = tw.span`italic font-bold text-blue-800`
+const Row = tw.div`flex gap-2 items-center w-full bg-gray-100`;
+const Label = tw.span`italic font-bold text-blue-800`;
 
 const WpmControl = () => {
   const wpm = useRecoilValue(state.wpm);
 
-  // const onChange = useCallback(
-  //   (ev) => {
-  //     const evTargetValue = ev.target.value;
-  //     const nextValue = parseInt(evTargetValue, 10);
-  //     if (isNaN(nextValue)) return;
-  //     setWpm(ev.target.value);
-  //   },
-  //   [setWpm],
-  // );
-
   return (
     <Row>
       <WpmSlider />
diff --git a/src/components/Controls/WpmSlider.js b/src/components/Controls/WpmSlider.js
index 1d7882c..6ee8748 100644
--- a/src/components/Controls/WpmSlider.js
+++ b/src/components/Controls/WpmSlider.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from "react";
-import tw from 'twin.macro'
+import tw from "twin.macro";
 import { useRecoilState } from "recoil";
 import state from "../../state";
 
@@ -7,7 +7,7 @@ const SCALE = 50;
 const MIN = 2;
 const MAX = 10;
 
-const StyledInput = tw.input`flex-1`
+const StyledInput = tw.input`flex-1`;
 
 const WpmSlider = () => {
   const [wpm, setWpm] = useRecoilState(state.wpm);
@@ -25,7 +25,13 @@ const WpmSlider = () => {
   );
 
   return (
-    <StyledInput type="range" min={MIN} max={MAX} value={value} onChange={onChange} />
+    <StyledInput
+      type="range"
+      min={MIN}
+      max={MAX}
+      value={value}
+      onChange={onChange}
+    />
   );
 };
 
diff --git a/src/components/Controls/index.js b/src/components/Controls/index.js
index 194f770..c44446c 100644
--- a/src/components/Controls/index.js
+++ b/src/components/Controls/index.js
@@ -1,12 +1,12 @@
 import React from "react";
-import tw from 'twin.macro';
+import tw from "twin.macro";
 import PlayPauseButton from "./PlayPauseButton";
 import ResetButton from "./ResetButton";
 import RestartButton from "./RestartButton";
 import WpmControl from "./WpmControl";
 
-const Buttons = tw.div`flex justify-between gap-2`
-const Stack = tw.div`flex flex-col gap-2 bg-yellow-100 max-w-sm`
+const Buttons = tw.div`flex justify-between gap-2`;
+const Stack = tw.div`flex flex-col gap-2 bg-yellow-100 max-w-sm`;
 
 const Controls = () => {
   return (
diff --git a/src/components/Frame.js b/src/components/Frame.js
index 1e2ee93..6cd3ab2 100644
--- a/src/components/Frame.js
+++ b/src/components/Frame.js
@@ -1,8 +1,8 @@
 import React from "react";
-import tw from 'twin.macro';
-import 'styled-components/macro';
+import tw from "twin.macro";
+import "styled-components/macro";
 
-const Container = tw.div`h-full w-full flex flex-col bg-orange-200 p-2`
+const Container = tw.div`h-full w-full flex flex-col bg-orange-200 p-2`;
 
 const Frame = ({ children }) => <Container>{children}</Container>;
 
diff --git a/src/components/Header.js b/src/components/Header.js
index 4e19d3e..034ee34 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,10 +1,10 @@
 import React from "react";
-import tw from 'twin.macro';
-import 'styled-components/macro';
+import tw from "twin.macro";
+import "styled-components/macro";
 
-const Container = tw.div`flex flex-row items-center h-12 gap-4 px-2 py-8 border-b`
-const Image = tw.img`h-12`
-const Text = tw.span`select-none text-xl`
+const Container = tw.div`flex flex-row items-center h-12 gap-4 px-2 py-8 border-b`;
+const Image = tw.img`h-12`;
+const Text = tw.span`select-none text-xl`;
 
 const Header = () => (
   <Container>
diff --git a/src/components/PassageText.js b/src/components/PassageText.js
index 0476c1b..246145c 100644
--- a/src/components/PassageText.js
+++ b/src/components/PassageText.js
@@ -1,12 +1,12 @@
-import React from 'react';
-import { useRecoilState } from 'recoil';
-import state from '../state'
-import TextArea from './TextArea';
+import React from "react";
+import { useRecoilState } from "recoil";
+import state from "../state";
+import TextArea from "./TextArea";
 
 const PassageText = () => {
-    const [passage, setPassage] = useRecoilState(state.passage)
+  const [passage, setPassage] = useRecoilState(state.passage);
 
-    return <TextArea text={passage} onChange={setPassage} />
-}
+  return <TextArea text={passage} onChange={setPassage} />;
+};
 
-export default PassageText
+export default PassageText;
diff --git a/src/components/PasteBox.js b/src/components/PasteBox.js
deleted file mode 100644
index 23f9d1c..0000000
--- a/src/components/PasteBox.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-
-const PasteBox = ({onInput}) => {
-    return (
-        
-      <div>
-      <textarea rows="4" cols="50" onInput={onInput} />
-    </div>
-    )
-}
\ No newline at end of file
diff --git a/src/components/StartReadingButton.js b/src/components/StartReadingButton.js
index 2aec6f1..d567a1f 100644
--- a/src/components/StartReadingButton.js
+++ b/src/components/StartReadingButton.js
@@ -1,21 +1,16 @@
-import React, { useCallback } from 'react'
-import { useSetRecoilState } from 'recoil'
-import state from '../state'
-import Button from './Button'
+import React, { useCallback } from "react";
+import { useSetRecoilState } from "recoil";
+import state from "../state";
+import Button from "./Button";
 
 const StartReadingButton = () => {
-  const setViewName = useSetRecoilState(state.viewName)
+  const setViewName = useSetRecoilState(state.viewName);
 
-  const onClick =
-    useCallback(
-      () => {
-        setViewName('')
-      }, [setViewName]
-    )
+  const onClick = useCallback(() => {
+    setViewName("");
+  }, [setViewName]);
 
-  return (
-    <Button onClick={onClick} value="Click Here to Start Reading" />
-  )
-}
+  return <Button onClick={onClick} value="Click Here to Start Reading" />;
+};
 
-export default StartReadingButton
+export default StartReadingButton;
diff --git a/src/components/TextArea.js b/src/components/TextArea.js
index 984c33a..2ec9cb2 100644
--- a/src/components/TextArea.js
+++ b/src/components/TextArea.js
@@ -1,33 +1,35 @@
-import React, { useCallback, useEffect, useRef } from 'react'
-import tw from 'twin.macro';
-import 'styled-components/macro';
-
-const Container = tw.div`p-2 h-full`
-const StyledTextarea = tw.textarea`outline outline-[1px] h-full w-full p-1`
-
-const TextArea = ({onChange, text}) => {
-    const textAreaRef = useRef()
-
-    useEffect(() => {
-      if (textAreaRef.current) {
-        textAreaRef.current.focus()
-      }
-    }, [textAreaRef])
-
-  const onInput = useCallback(
-    (ev) => {
-      const eventTargetValue = ev.target?.value;
-
-      if (eventTargetValue) onChange(eventTargetValue);
-    },
-    [onChange],
-  );
-
-    return (
-      <Container>
-        <StyledTextarea ref={textAreaRef} onInput={onInput}>{text}</StyledTextarea>
-      </Container>
-    )
-}
-
-export default TextArea
+import React, { useCallback, useEffect, useRef } from "react";
+import tw from "twin.macro";
+import "styled-components/macro";
+
+const Container = tw.div`p-2 h-full`;
+const StyledTextarea = tw.textarea`outline outline-[1px] h-full w-full p-1`;
+
+const TextArea = ({ onChange, text }) => {
+  const textAreaRef = useRef();
+
+  useEffect(() => {
+    if (textAreaRef.current) {
+      textAreaRef.current.focus();
+    }
+  }, [textAreaRef]);
+
+  const onInput = useCallback(
+    (ev) => {
+      const eventTargetValue = ev.target?.value;
+
+      if (eventTargetValue) onChange(eventTargetValue);
+    },
+    [onChange],
+  );
+
+  return (
+    <Container>
+      <StyledTextarea ref={textAreaRef} onInput={onInput}>
+        {text}
+      </StyledTextarea>
+    </Container>
+  );
+};
+
+export default TextArea;
diff --git a/src/components/Word.js b/src/components/Word.js
index d9d04a4..277d1e7 100644
--- a/src/components/Word.js
+++ b/src/components/Word.js
@@ -1,9 +1,9 @@
 import React from "react";
 import { useRecoilValue } from "recoil";
-import tw from 'twin.macro'
+import tw from "twin.macro";
 import state from "../state";
 
-const Div = tw.div`text-6xl h-full bg-green-100 flex items-center justify-center`
+const Div = tw.div`text-6xl h-full bg-green-100 flex items-center justify-center`;
 
 const Word = () => {
   const word = useRecoilValue(state.word);
diff --git a/src/constants.js b/src/constants.js
index 57c16b0..ef89486 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-webpack-loader-syntax
-import _INITIAL_PASSAGE_TEXT from '!!raw-loader!./INITIAL_PASSAGE_TEXT.txt';
+import _INITIAL_PASSAGE_TEXT from "!!raw-loader!./INITIAL_PASSAGE_TEXT.txt";
 
-export const VIEW_NAME_PASSAGE = 'passage'
-export const VIEW_NAME_WORDS_RUNNER = 'words-runner'
+export const VIEW_NAME_PASSAGE = "passage";
+export const VIEW_NAME_WORDS_RUNNER = "words-runner";
 
-export const INITIAL_PASSAGE_TEXT = _INITIAL_PASSAGE_TEXT
+export const INITIAL_PASSAGE_TEXT = _INITIAL_PASSAGE_TEXT;
diff --git a/src/state.js b/src/state.js
index c9a1f62..b5d7aff 100644
--- a/src/state.js
+++ b/src/state.js
@@ -1,10 +1,10 @@
 import { atom, selector } from "recoil";
-import { VIEW_NAME_PASSAGE, INITIAL_PASSAGE_TEXT } from './constants'
+import { VIEW_NAME_PASSAGE, INITIAL_PASSAGE_TEXT } from "./constants";
 
 const viewName = atom({
   key: "viewName",
-  default: VIEW_NAME_PASSAGE
-})
+  default: VIEW_NAME_PASSAGE,
+});
 
 const passage = atom({
   key: "passage",
diff --git a/src/views/Passage.js b/src/views/Passage.js
index 0792547..b696ef4 100644
--- a/src/views/Passage.js
+++ b/src/views/Passage.js
@@ -1,12 +1,12 @@
 import React from "react";
-import tw from 'twin.macro';
-import PassageText from '../components/PassageText'
-import StartReadingButton from '../components/StartReadingButton'
-import 'styled-components/macro';
+import tw from "twin.macro";
+import PassageText from "../components/PassageText";
+import StartReadingButton from "../components/StartReadingButton";
+import "styled-components/macro";
 
-const Container = tw.div`flex flex-col flex-1 p-2 gap-2 bg-yellow-200`
-const ControlRow = tw.div`flex gap-2 items-center`
-const ControlRowText = tw.span`italic text-gray-600 select-none`
+const Container = tw.div`flex flex-col flex-1 p-2 gap-2 bg-yellow-200`;
+const ControlRow = tw.div`flex gap-2 items-center`;
+const ControlRowText = tw.span`italic text-gray-600 select-none`;
 
 const Passage = () => {
   return (
diff --git a/src/views/WordsRunner.js b/src/views/WordsRunner.js
index a5f7b6f..bf143ee 100644
--- a/src/views/WordsRunner.js
+++ b/src/views/WordsRunner.js
@@ -1,9 +1,9 @@
 import React from "react";
-import tw from 'twin.macro';
+import tw from "twin.macro";
 import Controls from "../components/Controls";
 import Word from "../components/Word";
 
-const Stack = tw.div`flex flex-col gap-2 flex-1 bg-blue-100`
+const Stack = tw.div`flex flex-col gap-2 flex-1 bg-blue-100`;
 
 const WordsRunner = () => {
   return (