diff --git a/unit-conversion/src/app.js b/unit-conversion/src/app.js
index d84b1fcee89a9e5e0b508b76525a165e5494cb7a..41b2cfec295d9567aeb8346eea814af5a2d06a27 100644
--- a/unit-conversion/src/app.js
+++ b/unit-conversion/src/app.js
@@ -2,16 +2,25 @@ 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';
+import { Card } from './features/card/card.js';
 
 export function App() {
   return (
     <>
       <Route exact path={'/'}>
       </Route>
-      <UnitSelector type="Input"/>
-      <NumberInputField />
-      <UnitSelector type="Output"/>
-      <EndingNumberOutput />
+      <Card title="Input Unit Selector">
+        <UnitSelector type="Input"/>
+      </Card>
+      <Card title="Number Input">
+        <NumberInputField />
+      </Card>
+      <Card title="Output Unit Selector">
+        <UnitSelector type="Output"/>
+      </Card>
+      <Card title="Number Output">
+        <EndingNumberOutput />
+      </Card>
     </>
   );
 }
diff --git a/unit-conversion/src/features/card/card.css b/unit-conversion/src/features/card/card.css
new file mode 100644
index 0000000000000000000000000000000000000000..0b564d2f5c5532d01839d468dc82ddce303e2f10
--- /dev/null
+++ b/unit-conversion/src/features/card/card.css
@@ -0,0 +1,20 @@
+.card {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 20px;
+  min-height: 20%;
+  border-radius: 10px;
+  background-color: rgba(255 255 255 / 90%);
+  box-shadow:
+    0 2.8px 2.2px rgba(0 0 0 / 3.4%),
+    0 6.7px 5.3px rgba(0 0 0 / 4.8%),
+    0 12.5px 10px rgba(0 0 0 / 6%),
+    0 22.3px 17.9px rgba(0 0 0 / 7.2%),
+    0 41.8px 33.4px rgba(0 0 0 / 8.6%),
+    0 100px 80px rgba(0 0 0 / 12%);
+}
+
+.inputField {
+  max-width: 75%;
+}
diff --git a/unit-conversion/src/features/card/card.js b/unit-conversion/src/features/card/card.js
new file mode 100644
index 0000000000000000000000000000000000000000..5368f55bb8e726a43883cf9566fc1bd01012535d
--- /dev/null
+++ b/unit-conversion/src/features/card/card.js
@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import './card.css';
+
+export function Card(props) {
+  Card.propTypes = {
+    title: PropTypes.string.isRequired,
+  };
+
+  return (
+    <div className="card">
+      <h1>{props.title}</h1>
+      <div>
+        {props.children}
+      </div>
+    </div>
+  );
+}
diff --git a/unit-conversion/src/features/number-input-field/numberInputField.js b/unit-conversion/src/features/number-input-field/numberInputField.js
index c34810d3fffd36adb08821a2b9db17e79f479a53..65c50c8b82675ccc41f0c2cf90c16c8cc7da96be 100644
--- a/unit-conversion/src/features/number-input-field/numberInputField.js
+++ b/unit-conversion/src/features/number-input-field/numberInputField.js
@@ -12,16 +12,9 @@ export function NumberInputField() {
     dispatch(setNumberOfUnits(currentNumber));
   }
 
-  function handleSubmit(e) {
-    e.preventDefault();
-  }
-
   return (
     <div>
-      <form onSubmit={handleSubmit}>
-        <h1>Number Input Field</h1>
-        <input type="text" placeholder={ placeHolderString } onChange={handleChange}/>
-      </form>
+      <input className="inputField" type="text" placeholder={ placeHolderString } onChange={handleChange}/>
     </div>
   );
 }
diff --git a/unit-conversion/src/features/unit-selector/unitSelector.js b/unit-conversion/src/features/unit-selector/unitSelector.js
index 01f663857cab57fdc99f3523fa537c3fd3430a1b..5cf9a67bcbde4cb4eb98c90868b145d11712ff64 100644
--- a/unit-conversion/src/features/unit-selector/unitSelector.js
+++ b/unit-conversion/src/features/unit-selector/unitSelector.js
@@ -59,7 +59,6 @@ export function UnitSelector(props) {
   return (
     <div>
       <form onSubmit={handleSubmit}>
-        <h1>{props.type} Unit Selector</h1>
         <div className="select-container">
           <select name="units" onChange={handleChange}>
             {unitSelectorOptions.map((option) =>
diff --git a/unit-conversion/src/index.css b/unit-conversion/src/index.css
index 97ab24b2c00ece55c9cda463bf87733c1e24b902..f0108b84828ba96ead8f19fa9c218550e91876e3 100644
--- a/unit-conversion/src/index.css
+++ b/unit-conversion/src/index.css
@@ -1,13 +1,17 @@
 :root {
   /* Colors */
-  --letterbox-color: rgba(0 0 0 / 100%);
-  --app-background-color: rgba(239 239 239 / 100%);
+  --letterbox-color: rgba(255 255 255 / 100%);
+  --app-background-color: rgba(101 142 156 / 100%);
   --font-color: rgba(0 0 0 / 100%);
 
   /* Sizes */
   --minimum-app-size: 300px;
 }
 
+* {
+  font-size: 1.05em;
+}
+
 body {
   margin: 0;
   font-family: sans-serif;