diff --git a/src/components/modals/AboutModal.tsx b/src/components/modals/AboutModal.tsx
index 025c09e..7934c52 100644
--- a/src/components/modals/AboutModal.tsx
+++ b/src/components/modals/AboutModal.tsx
@@ -1,6 +1,4 @@
-import { Fragment } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
-import { XCircleIcon } from '@heroicons/react/outline'
+import { BaseModal } from './BaseModal'
 
 type Props = {
   isOpen: boolean
@@ -9,80 +7,23 @@ type Props = {
 
 export const AboutModal = ({ isOpen, handleClose }: Props) => {
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog
-        as="div"
-        className="fixed z-10 inset-0 overflow-y-auto"
-        onClose={handleClose}
-      >
-        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-          </Transition.Child>
-
-          {/* This element is to trick the browser into centering the modal contents. */}
-          <span
-            className="hidden sm:inline-block sm:align-middle sm:h-screen"
-            aria-hidden="true"
-          >
-            &#8203;
-          </span>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enterTo="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
-              <div className="absolute right-4 top-4">
-                <XCircleIcon
-                  className="h-6 w-6 cursor-pointer"
-                  onClick={() => handleClose()}
-                />
-              </div>
-              <div>
-                <div className="text-center">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-lg leading-6 font-medium text-gray-900"
-                  >
-                    About
-                  </Dialog.Title>
-                  <div className="mt-2">
-                    <p className="text-sm text-gray-500">
-                      This is an open source clone of the game Wordle -{' '}
-                      <a
-                        href="https://github.com/hannahcode/wordle"
-                        className="underline font-bold"
-                      >
-                        check out the code here
-                      </a>{' '}
-                      and{' '}
-                      <a
-                        href="https://www.powerlanguage.co.uk/wordle/"
-                        className="underline font-bold"
-                      >
-                        play the original here
-                      </a>
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </Transition.Child>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <BaseModal title="About" isOpen={isOpen} handleClose={handleClose}>
+      <p className="text-sm text-gray-500">
+        This is an open source clone of the game Wordle -{' '}
+        <a
+          href="https://github.com/hannahcode/wordle"
+          className="underline font-bold"
+        >
+          check out the code here
+        </a>{' '}
+        and{' '}
+        <a
+          href="https://www.powerlanguage.co.uk/wordle/"
+          className="underline font-bold"
+        >
+          play the original here
+        </a>
+      </p>
+    </BaseModal>
   )
 }
diff --git a/src/components/modals/BaseModal.tsx b/src/components/modals/BaseModal.tsx
new file mode 100644
index 0000000..e07a1e3
--- /dev/null
+++ b/src/components/modals/BaseModal.tsx
@@ -0,0 +1,75 @@
+import { Fragment } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import { XCircleIcon } from '@heroicons/react/outline'
+
+type Props = {
+  title: string
+  children: React.ReactNode
+  isOpen: boolean
+  handleClose: () => void
+}
+
+export const BaseModal = ({ title, children, isOpen, handleClose }: Props) => {
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog
+        as="div"
+        className="fixed z-10 inset-0 overflow-y-auto"
+        onClose={handleClose}
+      >
+        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          </Transition.Child>
+
+          {/* This element is to trick the browser into centering the modal contents. */}
+          <span
+            className="hidden sm:inline-block sm:align-middle sm:h-screen"
+            aria-hidden="true"
+          >
+            &#8203;
+          </span>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enterTo="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
+              <div className="absolute right-4 top-4">
+                <XCircleIcon
+                  className="h-6 w-6 cursor-pointer"
+                  onClick={() => handleClose()}
+                />
+              </div>
+              <div>
+                <div className="text-center">
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg leading-6 font-medium text-gray-900"
+                  >
+                    {title}
+                  </Dialog.Title>
+                  <div className="mt-2">
+                    {children}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  )
+}
diff --git a/src/components/modals/InfoModal.tsx b/src/components/modals/InfoModal.tsx
index 37472d0..3fc0f32 100644
--- a/src/components/modals/InfoModal.tsx
+++ b/src/components/modals/InfoModal.tsx
@@ -1,7 +1,5 @@
-import { Fragment } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
 import { Cell } from '../grid/Cell'
-import { XCircleIcon } from '@heroicons/react/outline'
+import { BaseModal } from './BaseModal'
 
 type Props = {
   isOpen: boolean
@@ -10,102 +8,44 @@ type Props = {
 
 export const InfoModal = ({ isOpen, handleClose }: Props) => {
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog
-        as="div"
-        className="fixed z-10 inset-0 overflow-y-auto"
-        onClose={handleClose}
-      >
-        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-          </Transition.Child>
+    <BaseModal title="How to play" isOpen={isOpen} handleClose={handleClose}>
+      <p className="text-sm text-gray-500">
+        Guess the WORDLE in 6 tries. After each guess, the color of the tiles
+        will change to show how close your guess was to the word.
+      </p>
 
-          {/* This element is to trick the browser into centering the modal contents. */}
-          <span
-            className="hidden sm:inline-block sm:align-middle sm:h-screen"
-            aria-hidden="true"
-          >
-            &#8203;
-          </span>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enterTo="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
-              <div className="absolute right-4 top-4">
-                <XCircleIcon
-                  className="h-6 w-6 cursor-pointer"
-                  onClick={() => handleClose()}
-                />
-              </div>
-              <div>
-                <div className="text-center">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-lg leading-6 font-medium text-gray-900"
-                  >
-                    How to play
-                  </Dialog.Title>
-                  <div className="mt-2">
-                    <p className="text-sm text-gray-500">
-                      Guess the WORDLE in 6 tries. After each guess, the color
-                      of the tiles will change to show how close your guess was
-                      to the word.
-                    </p>
+      <div className="flex justify-center mb-1 mt-4">
+        <Cell value="W" status="correct" />
+        <Cell value="E" />
+        <Cell value="A" />
+        <Cell value="R" />
+        <Cell value="Y" />
+      </div>
+      <p className="text-sm text-gray-500">
+        The letter W is in the word and in the correct spot.
+      </p>
 
-                    <div className="flex justify-center mb-1 mt-4">
-                      <Cell value="W" status="correct" />
-                      <Cell value="E" />
-                      <Cell value="A" />
-                      <Cell value="R" />
-                      <Cell value="Y" />
-                    </div>
-                    <p className="text-sm text-gray-500">
-                      The letter W is in the word and in the correct spot.
-                    </p>
+      <div className="flex justify-center mb-1 mt-4">
+        <Cell value="P" />
+        <Cell value="I" />
+        <Cell value="L" status="present" />
+        <Cell value="O" />
+        <Cell value="T" />
+      </div>
+      <p className="text-sm text-gray-500">
+        The letter L is in the word but in the wrong spot.
+      </p>
 
-                    <div className="flex justify-center mb-1 mt-4">
-                      <Cell value="P" />
-                      <Cell value="I" />
-                      <Cell value="L" status="present" />
-                      <Cell value="O" />
-                      <Cell value="T" />
-                    </div>
-                    <p className="text-sm text-gray-500">
-                      The letter L is in the word but in the wrong spot.
-                    </p>
-
-                    <div className="flex justify-center mb-1 mt-4">
-                      <Cell value="V" />
-                      <Cell value="A" />
-                      <Cell value="G" />
-                      <Cell value="U" status="absent" />
-                      <Cell value="E" />
-                    </div>
-                    <p className="text-sm text-gray-500">
-                      The letter U is not in the word in any spot.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </Transition.Child>
-        </div>
-      </Dialog>
-    </Transition.Root>
+      <div className="flex justify-center mb-1 mt-4">
+        <Cell value="V" />
+        <Cell value="A" />
+        <Cell value="G" />
+        <Cell value="U" status="absent" />
+        <Cell value="E" />
+      </div>
+      <p className="text-sm text-gray-500">
+        The letter U is not in the word in any spot.
+      </p>
+    </BaseModal>
   )
 }
diff --git a/src/components/modals/StatsModal.tsx b/src/components/modals/StatsModal.tsx
index a2e08a2..4b0ad02 100644
--- a/src/components/modals/StatsModal.tsx
+++ b/src/components/modals/StatsModal.tsx
@@ -1,9 +1,7 @@
-import { Fragment } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
-import { XCircleIcon } from '@heroicons/react/outline'
 import { StatBar } from '../stats/StatBar'
 import { Histogram } from '../stats/Histogram'
 import { GameStats } from '../../lib/localStorage'
+import { BaseModal } from './BaseModal'
 
 type Props = {
   isOpen: boolean
@@ -13,71 +11,12 @@ type Props = {
 
 export const StatsModal = ({ isOpen, handleClose, gameStats }: Props) => {
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog
-        as="div"
-        className="fixed z-10 inset-0 overflow-y-auto"
-        onClose={handleClose}
-      >
-        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-          </Transition.Child>
-
-          {/* This element is to trick the browser into centering the modal contents. */}
-          <span
-            className="hidden sm:inline-block sm:align-middle sm:h-screen"
-            aria-hidden="true"
-          >
-            &#8203;
-          </span>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enterTo="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <div
-              className="inline-block align-bottom bg-white rounded-lg px-4 
-                            pt-5 pb-4 text-left overflow-hidden shadow-xl transform 
-                            transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
-            >
-              <div className="absolute right-4 top-4">
-                <XCircleIcon
-                  className="h-6 w-6 cursor-pointer"
-                  onClick={handleClose}
-                />
-              </div>
-              <div>
-                <div className="text-center">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-lg leading-6 font-medium text-gray-900"
-                  >
-                    Statistics
-                  </Dialog.Title>
-                  <StatBar gameStats={gameStats} />
-                  <h4 className="text-lg leading-6 font-medium text-gray-900">
-                    Guess Distribution
-                  </h4>
-                  <Histogram gameStats={gameStats} />
-                </div>
-              </div>
-            </div>
-          </Transition.Child>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <BaseModal title="Statistics" isOpen={isOpen} handleClose={handleClose}>
+      <StatBar gameStats={gameStats} />
+      <h4 className="text-lg leading-6 font-medium text-gray-900">
+        Guess Distribution
+      </h4>
+      <Histogram gameStats={gameStats} />
+    </BaseModal>
   )
 }
diff --git a/src/components/modals/WinModal.tsx b/src/components/modals/WinModal.tsx
index faf8254..a0979da 100644
--- a/src/components/modals/WinModal.tsx
+++ b/src/components/modals/WinModal.tsx
@@ -1,9 +1,8 @@
-import { Fragment } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
+import { Dialog } from '@headlessui/react'
 import { CheckIcon } from '@heroicons/react/outline'
 import { MiniGrid } from '../mini-grid/MiniGrid'
 import { shareStatus } from '../../lib/share'
-import { XCircleIcon } from '@heroicons/react/outline'
+import { BaseModal } from './BaseModal'
 
 type Props = {
   isOpen: boolean
@@ -19,84 +18,36 @@ export const WinModal = ({
   handleShare,
 }: Props) => {
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog
-        as="div"
-        className="fixed z-10 inset-0 overflow-y-auto"
-        onClose={handleClose}
-      >
-        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-          </Transition.Child>
-          
-          {/* This element is to trick the browser into centering the modal contents. */}
-          <span
-            className="hidden sm:inline-block sm:align-middle sm:h-screen"
-            aria-hidden="true"
-          >
-            &#8203;
-          </span>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enterTo="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
-              <div className="absolute right-4 top-4">
-                <XCircleIcon
-                  className="h-6 w-6 cursor-pointer"
-                  onClick={() => handleClose()}
-                />
-              </div>
-              <div>
-                <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
-                  <CheckIcon
-                    className="h-6 w-6 text-green-600"
-                    aria-hidden="true"
-                  />
-                </div>
-                <div className="mt-3 text-center sm:mt-5">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-lg leading-6 font-medium text-gray-900"
-                  >
-                    You won!
-                  </Dialog.Title>
-                  <div className="mt-2">
-                    <MiniGrid guesses={guesses} />
-                    <p className="text-sm text-gray-500">Great job.</p>
-                  </div>
-                </div>
-              </div>
-              <div className="mt-5 sm:mt-6">
-                <button
-                  type="button"
-                  className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm"
-                  onClick={() => {
-                    shareStatus(guesses)
-                    handleShare()
-                  }}
-                >
-                  Share
-                </button>
-              </div>
-            </div>
-          </Transition.Child>
+    <BaseModal title="You won!" isOpen={isOpen} handleClose={handleClose}>
+      <div>
+        <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
+          <CheckIcon className="h-6 w-6 text-green-600" aria-hidden="true" />
         </div>
-      </Dialog>
-    </Transition.Root>
+        <div className="mt-3 text-center sm:mt-5">
+          <Dialog.Title
+            as="h3"
+            className="text-lg leading-6 font-medium text-gray-900"
+          >
+            You won!
+          </Dialog.Title>
+          <div className="mt-2">
+            <MiniGrid guesses={guesses} />
+            <p className="text-sm text-gray-500">Great job.</p>
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 sm:mt-6">
+        <button
+          type="button"
+          className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm"
+          onClick={() => {
+            shareStatus(guesses)
+            handleShare()
+          }}
+        >
+          Share
+        </button>
+      </div>
+    </BaseModal>
   )
 }