diff --git a/src/App/App.tsx b/src/App/App.tsx
index b59ccbb..bce27ec 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -1,7 +1,6 @@
 import React, { FC, ReactElement } from "react";
 import { HashRouter, Routes, Route } from "react-router-dom";
 import { Home } from "../containers/Home";
-import { New } from "../containers/New";
 import { Edit } from "../containers/Edit";
 import { Log } from "../containers/Log";
 import { LogEntry } from "../containers/LogEntry";
@@ -13,9 +12,9 @@ export const App: FC = (): ReactElement => {
       <Routes>
         <Route path="*" element={<h1>404</h1>} />
         <Route path="/" element={<Home />} />
+        <Route path="/new" element={<Home />} />
         <Route path="/log/">
           <Route path="" element={<h1>404</h1>} />
-          <Route path="new/" element={<New />} />
           <Route path=":id/">
             <Route path="" element={<Log />} />
             <Route path="entry/" element={<LogEntry />} />
diff --git a/src/containers/Home/Home.scss b/src/containers/Home/Home.scss
index e69de29..4763ae4 100644
--- a/src/containers/Home/Home.scss
+++ b/src/containers/Home/Home.scss
@@ -0,0 +1,10 @@
+#addLogModal {
+  .col > button {
+    width: 100%;
+  }
+
+  .modal-footer {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
diff --git a/src/containers/Home/Home.tsx b/src/containers/Home/Home.tsx
index bd4c68c..ea9c604 100644
--- a/src/containers/Home/Home.tsx
+++ b/src/containers/Home/Home.tsx
@@ -3,25 +3,61 @@ import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import "./Home.scss";
-import { Button, ButtonGroup, Dropdown } from "react-bootstrap";
+import { Button, ButtonGroup, Dropdown, Form, Modal } from "react-bootstrap";
 import { Link, useNavigate } from "react-router-dom";
 import { removeLog, useGetLogsArray } from "../../store/Log";
+import { v4 as uuidv4 } from "uuid";
+
 import store from "../../store/store";
-import { ADD_ENTRY, PRIMARY } from "../../strings";
+import { addLog } from "../../store/Log";
+import {
+  ADD_ENTRY,
+  CANCEL,
+  EMPTY,
+  PRIMARY,
+  SAVE,
+  SECONDARY,
+  TEXT,
+  TEXT_DANGER,
+} from "../../strings";
 
 export const TRACKER_KEEPER = "Tracker Keeper";
 export const YOUR_LOGS = "Your Logs";
 export const LOG = "Log";
+export const LOG_NAME = "Log Name";
+export const LOG_NAME_PLACEHOLDER = "Enter log name";
 export const ACTIONS = "Actions";
 export const EDIT = "Edit";
 export const DELETE = "Delete";
 export const NO_LOGS_YET = "No logs yet.";
 export const CREATE_NEW_LOG = "Create a new log...";
 
+export const onAddLog = (id: string, name: string) => {
+  const log = {
+    id,
+    name,
+    fields: {},
+    entries: {},
+  };
+  store.dispatch(addLog({ log }));
+};
+
 export const Home: FC = (): ReactElement => {
   const navigate = useNavigate();
+  const isNewLogModalOpen = window.location.hash === "#/new";
+  const [showModal, setShowModal] = React.useState(isNewLogModalOpen);
+  const [newLogId, setNewLogId] = React.useState(EMPTY);
+  const [newLogName, setNewLogName] = React.useState(EMPTY);
   const logs = useGetLogsArray();
 
+  if (
+    newLogId !== EMPTY &&
+    newLogName !== EMPTY &&
+    newLogName.trim() !== EMPTY
+  ) {
+    navigate("/log/" + newLogId + "/edit");
+  }
+
   return (
     <Container>
       <Row>
@@ -71,7 +107,7 @@ export const Home: FC = (): ReactElement => {
                             {EDIT}
                           </Dropdown.Item>
                           <Dropdown.Item
-                            className="text-danger"
+                            className={TEXT_DANGER}
                             onClick={(e) => {
                               e.preventDefault();
                               store.dispatch(removeLog({ logId: log.id }));
@@ -92,13 +128,71 @@ export const Home: FC = (): ReactElement => {
             variant={PRIMARY}
             onClick={(e) => {
               e.preventDefault();
-              navigate("/log/new");
+              navigate("/new");
+              setShowModal(true);
             }}
           >
             {CREATE_NEW_LOG}
           </Button>
         </Col>
       </Row>
+
+      <Modal
+        id="addLogModal"
+        show={showModal}
+        onHide={() => {
+          setShowModal(false);
+          setNewLogName(EMPTY);
+          navigate("/");
+        }}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>{CREATE_NEW_LOG}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form>
+            <Form.Group controlId="formLogName">
+              <Form.Label>{LOG_NAME}</Form.Label>
+              <Form.Control
+                type={TEXT}
+                placeholder={LOG_NAME_PLACEHOLDER}
+                onChange={(e) => setNewLogName(e.target.value)}
+              />
+            </Form.Group>
+          </Form>
+        </Modal.Body>
+        <Modal.Footer>
+          <Container>
+            <Row>
+              <Col>
+                <Button
+                  variant={SECONDARY}
+                  onClick={() => {
+                    setShowModal(false);
+                    setNewLogName(EMPTY);
+                    navigate("/");
+                  }}
+                >
+                  {CANCEL}
+                </Button>
+              </Col>
+              <Col>
+                <Button
+                  variant={PRIMARY}
+                  disabled={newLogName.trim() === EMPTY}
+                  onClick={() => {
+                    const newId = uuidv4();
+                    onAddLog(newId, newLogName);
+                    setNewLogId(newId);
+                  }}
+                >
+                  {SAVE}
+                </Button>
+              </Col>
+            </Row>
+          </Container>
+        </Modal.Footer>
+      </Modal>
     </Container>
   );
 };
diff --git a/src/containers/New/New.scss b/src/containers/New/New.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/containers/New/New.tsx b/src/containers/New/New.tsx
deleted file mode 100644
index 5f4216e..0000000
--- a/src/containers/New/New.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { FC, ReactElement } from "react";
-import Container from "react-bootstrap/Container";
-import Row from "react-bootstrap/Row";
-import Col from "react-bootstrap/Col";
-import { v4 as uuidv4 } from "uuid";
-
-import "./New.scss";
-
-import { Form, Button } from "react-bootstrap";
-import { NavigateFunction, useNavigate } from "react-router-dom";
-import store from "../../store/store";
-import { addLog } from "../../store/Log";
-import { CANCEL, PRIMARY, SECONDARY, SUBMIT, TEXT, TEXT_MUTED } from "../../strings";
-
-export const NEW_LOG = "New Log";
-export const LOG_NAME_LABEL = "Log Name";
-export const LOG_NAME_PLACEHOLDER = "Enter log name";
-export const LOG_NAME_HELP_TEXT = "What is the name of this log?";
-export const CREATE_LOG = "Create Log";
-
-export const onCreateLog = (e: any, navigate: NavigateFunction) => {
-  e.preventDefault();
-  const log = {
-    id: uuidv4(),
-    name: e.target.form[0].value,
-    fields: {},
-    entries: {},
-  };
-  store.dispatch(addLog({ log }));
-  navigate("/log/" + log.id + "/edit");
-};
-
-export const New: FC = (): ReactElement => {
-  const navigate = useNavigate();
-
-  return (
-    <Container>
-      <Row>
-        <Col>
-          <h1>{NEW_LOG}</h1>
-          <Form>
-            <Form.Group controlId="formBasicName">
-              <Form.Label>{LOG_NAME_LABEL}</Form.Label>
-              <Form.Control type={TEXT} placeholder={LOG_NAME_PLACEHOLDER} />
-              <Form.Text className={TEXT_MUTED}>
-                {LOG_NAME_HELP_TEXT}
-              </Form.Text>
-            </Form.Group>
-            <br />
-            <Button
-              variant={SECONDARY}
-              onClick={() => navigate("/")}
-              className="mr-2"
-            >
-              {CANCEL}
-            </Button>
-            &nbsp;
-            <Button
-              variant={PRIMARY}
-              type={SUBMIT}
-              onClick={(e) => onCreateLog(e, navigate)}
-            >
-              {CREATE_LOG}
-            </Button>
-          </Form>
-        </Col>
-      </Row>
-    </Container>
-  );
-};
-
-export default New;
diff --git a/src/containers/New/index.ts b/src/containers/New/index.ts
deleted file mode 100644
index 6373bc6..0000000
--- a/src/containers/New/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import New from "./New";
-export { New };