diff --git a/unit-conversion/src/__snapshots__/app.test.js.snap b/unit-conversion/src/__snapshots__/app.test.js.snap
index ce50593a1264fefe9e1e6f5b2728f70ba16a88e5..1b22075b7f74340ffbcc9a31cc8ea2c2cab22dde 100644
--- a/unit-conversion/src/__snapshots__/app.test.js.snap
+++ b/unit-conversion/src/__snapshots__/app.test.js.snap
@@ -2,14 +2,81 @@
 
 exports[`the app has one labeled button that displays the value from the store 1`] = `
 <div>
-  <label>
-    Taps
-    : 
-    <button
-      class="blue"
+  <div>
+    <h1>
+      Unit Selector
+    </h1>
+    <select
+      name="units"
     >
-      9999
-    </button>
-  </label>
+      <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 848a3df73fc7a6b6cb27aa88d4430a97eaf033ac..d547b717a04cccfd83c5d5eac3f9a82a57e37ea9 100644
--- a/unit-conversion/src/app.js
+++ b/unit-conversion/src/app.js
@@ -1,13 +1,15 @@
-import { Route } from 'react-router-dom';
-
-import { Counter } from './features/counter/counter.js';
+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={'/'}>
-        <Counter label={'Taps'} />
-      </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>
+  );
+}