diff --git a/src/components/LoadingModal.tsx b/src/components/LoadingModal.tsx
new file mode 100644
index 0000000..5ad26ba
--- /dev/null
+++ b/src/components/LoadingModal.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+import Card from '../ui/Card';
+
+const Modal = styled.div`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+`;
+
+const ModalCardArea = styled.div`
+  width: 100%;
+  max-width: 800px;
+  margin: 200px auto;
+`;
+
+function LoadingModal({
+  message,
+  pullRequestURL,
+}: {
+  message: string;
+  pullRequestURL: string | null;
+}) {
+  return (
+    <Modal>
+      <ModalCardArea>
+        <Card>
+          <h2>{pullRequestURL == null ? 'Loading...' : 'Congratulations'}</h2>
+          <p>{message}</p>
+          {pullRequestURL != null && (
+            <p>
+              <a href={pullRequestURL}>Go to newly generated pull request</a>
+            </p>
+          )}
+        </Card>
+      </ModalCardArea>
+    </Modal>
+  );
+}
+
+export default LoadingModal;
diff --git a/src/screens/SplitScreen.tsx b/src/screens/SplitScreen.tsx
index 55ddda8..34c08df 100644
--- a/src/screens/SplitScreen.tsx
+++ b/src/screens/SplitScreen.tsx
@@ -1,6 +1,6 @@
 import { TypedDocumentNode, gql, useMutation } from '@apollo/client';
 import React, { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import {
   ApplySplitMutation,
   ApplySplitMutationVariables,
@@ -17,6 +17,8 @@ import getGithubAuthURL from '../util/getGithubAuthURL';
 import useQueryParams from '../util/useQueryParams';
 import nullThrows from 'capital-t-null-throws';
 import TopBar from '../components/TopBar';
+import Card from '../ui/Card';
+import LoadingModal from '../components/LoadingModal';
 
 const Page = styled.div`
   background-color: #fafbfc;
@@ -32,15 +34,6 @@ const DescriptionSections = styled.div`
   flex-direction: row;
 `;
 
-const Card = styled.div`
-  background-color: #fff;
-  border: 1px solid #eee;
-  border-radius: 8px;
-  padding: 16px;
-  margin: 12px 16px;
-  width: 100%;
-`;
-
 const Label = styled.div`
   font-size: 14px;
   margin-bottom: 4px;
@@ -104,45 +97,6 @@ function DescriptionSection({
   );
 }
 
-const Modal = styled.div`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.4);
-`;
-
-const ModalCardArea = styled.div`
-  width: 100%;
-  max-width: 800px;
-  margin: 200px auto;
-`;
-
-function LoadingModal({
-  message,
-  pullRequestURL,
-}: {
-  message: string;
-  pullRequestURL: string | null;
-}) {
-  return (
-    <Modal>
-      <ModalCardArea>
-        <Card>
-          <h2>{pullRequestURL == null ? 'Loading...' : 'Congratulations'}</h2>
-          <p>{message}</p>
-          {pullRequestURL != null && (
-            <p>
-              <a href={pullRequestURL}>Go to newly generated pull request</a>
-            </p>
-          )}
-        </Card>
-      </ModalCardArea>
-    </Modal>
-  );
-}
-
 function generateFilePatches(diffFiles: File[], splitDiffIndexes: number[]) {
   // TODO: DRY this out.
   return {
diff --git a/src/ui/Card.tsx b/src/ui/Card.tsx
new file mode 100644
index 0000000..136e64d
--- /dev/null
+++ b/src/ui/Card.tsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const Card = styled.div`
+  background-color: #fff;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 16px;
+  margin: 12px 16px;
+  width: 100%;
+`;
+
+export default Card;