diff --git a/unit-conversion/src/__snapshots__/app.test.js.snap b/unit-conversion/src/__snapshots__/app.test.js.snap
index 083ebbe57c2c145ec7284a7c074e929679fb0e43..3bccb3e6a9335b2644dc8b3fbeb967bf52398775 100644
--- a/unit-conversion/src/__snapshots__/app.test.js.snap
+++ b/unit-conversion/src/__snapshots__/app.test.js.snap
@@ -1,3 +1,82 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`the app runs 1`] = `<div />`;
+exports[`the app runs 1`] = `
+<div>
+  <div>
+    <h1>
+      Unit Selector
+    </h1>
+    <select
+      name="units"
+    >
+      <option
+        value="km"
+      >
+        km
+      </option>
+      <option
+        value="m"
+      >
+        m
+      </option>
+      <option
+        value="ft"
+      >
+        ft
+      </option>
+      <option
+        value="in"
+      >
+        in
+      </option>
+    </select>
+  </div>
+  <div>
+    <h1>
+      NumberInputField
+    </h1>
+    <input
+      placeholder="Enter # of {unitSelectorUnit}"
+      required=""
+      type="text"
+    />
+  </div>
+  <h1>
+    Ouput Section
+  </h1>
+  <div>
+    <h1>
+      Unit Selector
+    </h1>
+    <select
+      name="units"
+    >
+      <option
+        value="km"
+      >
+        km
+      </option>
+      <option
+        value="m"
+      >
+        m
+      </option>
+      <option
+        value="ft"
+      >
+        ft
+      </option>
+      <option
+        value="in"
+      >
+        in
+      </option>
+    </select>
+  </div>
+  <div>
+    <h1>
+      Number Output Text
+    </h1>
+  </div>
+</div>
+`;
diff --git a/unit-conversion/src/app.js b/unit-conversion/src/app.js
index bd6e9715c0c10527bb843e926f17507b617d1244..9d2b3fa1a6902e7f43edd7420162979e8d975e24 100644
--- a/unit-conversion/src/app.js
+++ b/unit-conversion/src/app.js
@@ -1,11 +1,19 @@
+
 import { Route } from 'react-router-dom';
+import { EndingNumberOutput } from './features/ending-number-output/endingNumberOutput.js';
+import { NumberInputField } from './features/number-input-field/numberInputField.js';
+import { UnitSelector } from './features/unit-selector/unitSelector.js';
 
 export function App() {
   return (
     <>
       <Route exact path={'/'}>
-
       </Route>
+      <UnitSelector />
+      <NumberInputField />
+      <h1>Ouput Section</h1>
+      <UnitSelector />
+      <EndingNumberOutput />
     </>
   );
 }
diff --git a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js
new file mode 100644
index 0000000000000000000000000000000000000000..d3af4212739bae41d6f01bcf981d67cf9a1012d7
--- /dev/null
+++ b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js
@@ -0,0 +1,7 @@
+export function EndingNumberOutput() {
+  return (
+    <div>
+      <h1>Number Output Text</h1>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/unit-conversion/src/features/number-input-field/numberInputField.js b/unit-conversion/src/features/number-input-field/numberInputField.js
new file mode 100644
index 0000000000000000000000000000000000000000..a72db64d2f2ddfcabd024aeb9a97ef99f1940453
--- /dev/null
+++ b/unit-conversion/src/features/number-input-field/numberInputField.js
@@ -0,0 +1,8 @@
+export function NumberInputField() {
+  return (
+    <div>
+      <h1>NumberInputField</h1>
+      <input required type="text" placeholder="Enter # of {unitSelectorUnit}"></input>
+    </div>
+  );
+}
diff --git a/unit-conversion/src/features/unit-selector/unitSelector.js b/unit-conversion/src/features/unit-selector/unitSelector.js
new file mode 100644
index 0000000000000000000000000000000000000000..087deda5d99aa8f0646f0c8ff1d4310b26c78691
--- /dev/null
+++ b/unit-conversion/src/features/unit-selector/unitSelector.js
@@ -0,0 +1,13 @@
+export function UnitSelector() {
+  return (
+    <div>
+      <h1>Unit Selector</h1>
+      <select name="units">
+          <option value="km">km</option>
+          <option value="m">m</option>
+          <option value="ft">ft</option>
+          <option value="in">in</option>
+      </select>
+    </div>
+  );
+}