Made some style changes (not great, but I think it's a little better)

assets/styles/nardah.scss

@@ -5,10 +5,15 @@ $nav-height: 65px;
 
 $textarea-min-height: 100px;
 
+$shadow-normal: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+$shadow-light: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+$shadow-heavy: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+
 body{
   margin: 0;
   padding: $nav-height 0 0;
-  background: white;
+  background: #f6f6f6;
+  font-size: 16px;
 }
 
 a{
@@ -19,12 +24,51 @@ a{
   }
 }
 
+table{
+  border: 1px solid #e1e1e1;
+  border-collapse: collapse;
+  box-shadow: $shadow-light;
+  border-radius: 7px;
+  overflow: hidden;
+
+  thead{
+    border-bottom: 2px solid #212121;
+    font-size: 2rem;
+  }
+
+  tr,
+  th,
+  td{
+    border: none;
+  }
+
+  tr:nth-child(even){
+    background-color: #eee;
+  }
+
+  th,
+  td{
+    padding: 12px 15px !important;
+  }
+}
+
 textarea{
   min-width: 100%;
   max-width: 100%;
   min-height: $textarea-min-height;
 }
 
+input[type=submit].button-primary,
+button.button-primary,
+.button.button-primary{
+  background-color: $primary-color;
+  font-size: 1.5rem;
+
+  &:hover{
+    background-color: lighten($primary-color, 10%);
+  }
+}
+
 select[multiple]{
   max-width: 100%;
   min-height: 100px;
@@ -37,8 +81,10 @@ select[multiple]{
   width: 100%;
   height: $nav-height;
   background: $primary-color;
+  box-shadow: $shadow-normal;
   color: #eee;
   font-size: 2rem;
+  z-index: 100;
 
   ul{
     list-style: none;
@@ -58,6 +104,7 @@ select[multiple]{
     display: inline-block;
     padding: 15px 10px;
     color: #eee;
+    font-weight: bold;
     text-decoration: none;
     &:hover{
       color: white;
@@ -75,6 +122,9 @@ select[multiple]{
   max-width: 1180px;
   margin-top: 15px;
   padding: 15px 20px;
+  background-color: white;
+  box-shadow: $shadow-normal;
+  border-radius: 10px;
 }
 
 #result-form{

src/Controllers/ComponentController.php

@@ -59,4 +59,31 @@ class ComponentController extends Controller {
       ->withStatus(302);
   }
 
+  public function getEdit(Request $request, Response $response, array $args): Response {
+    $component = Component::where('id', $args['component_id'])->first();
+
+    $view = Twig::fromRequest($request);
+    return $view->render($response, 'component/edit.twig', [
+      'component' => $component,
+    ]);
+  }
+
+  public function postEdit(Request $request, Response $response, array $args): Response {
+    $component = Component::where('id', $args['component_id'])->first();
+
+    $params = (array)$request->getParsedBody();
+
+    $component->name = $params['component_name'];
+    $component->type = $params['component_type'];
+
+    $component->save();
+
+    // redirect the user back to the home page
+    $routeContext = RouteContext::fromRequest($request);
+    $routeParser = $routeContext->getRouteParser();
+    return $response
+      ->withHeader('Location', $routeParser->urlFor('component.view', ['component_id' => $component->id]))
+      ->withStatus(302);
+  }
+
 }

src/routes.php

@@ -17,7 +17,13 @@ $app->group('/component', function(RouteCollectorProxy $group) {
   $group->get('/list', '\\BitGoblin\\Colossus\\Controllers\\ComponentController:getList')->setName('component.list');
   $group->get('/add', '\\BitGoblin\\Colossus\\Controllers\\ComponentController:getAdd')->setName('component.add');
   $group->post('/add', '\\BitGoblin\\Colossus\\Controllers\\ComponentController:postAdd');
-  $group->get('/{component_id}', '\\BitGoblin\\Colossus\\Controllers\\ComponentController:getView')->setName('component.view');
+
+  $group->group('/{component_id}', function(RouteCollectorProxy $component) {
+    $component->get('', '\\BitGoblin\\Colossus\\Controllers\\ComponentController:getView')->setName('component.view');
+
+    $component->get('/edit', '\\BitGoblin\\Colossus\\Controllers\\ComponentController:getEdit')->setName('component.edit');
+    $component->post('/edit', '\\BitGoblin\\Colossus\\Controllers\\ComponentController:postEdit');
+  });
 });
 
 $app->group('/test', function(RouteCollectorProxy $group) {

views/component/edit.twig

@@ -0,0 +1,40 @@
+{% extends 'layout.twig' %}
+
+{% block title %}Editing Component: {{ component.name }}{% endblock %}
+
+{% block content %}
+
+<div class="row">
+  <div class="twelve columns">
+    <h1>Editing Component: {{ component.name }}</h1>
+  </div>
+</div>
+
+<div class="row">
+  <div class="twelve columns">
+    <form action="{{ url_for('component.edit', { component_id: component.id }) }}" method="POST" class="u-full-width">
+      <div class="row">
+        <div class="nine columns">
+					<label>
+						Component name:
+						<input type="text" id="component_name" class="u-full-width" name="component_name" value="{{ component.name }}">
+					</label>
+        </div>
+
+        <div class="three columns">
+          <label>
+            Component type:
+            <select class="u-full-width" name="component_type">
+              <option value="gpu" {% if component.type == 'gpu' %}selected{% endif %}>Graphics card</option>
+              <option value="cpu" {% if component.type == 'cpu' %}selected{% endif %}>Processor</option>
+            </select>
+          </label>
+        </div>
+      </div>
+
+      <input class="button button-primary u-full-width" type="submit" value="Submit">
+    </form>
+  </div>
+</div>
+
+{% endblock %}

views/component/view.twig

@@ -6,6 +6,7 @@
   <div class="row">
     <div class="twelve columns">
       <h1>{{ component.name }}</h1>
+      <p><a href="{{ url_for('component.edit', { component_id: component.id }) }}">Edit</a></p>
       <p>{{ component.type }}</p>
     </div>
   </div>

views/test/view.twig

@@ -25,13 +25,13 @@
           </div>
 
           <div class="two columns">
-            <input type="number" step="0.01" name="result_avg" placeholder="0.0">
+            <input class="u-full-width" type="number" step="0.01" name="result_avg" placeholder="0.0">
           </div>
           <div class="two columns">
-            <input type="number" step="0.01" name="result_min" placeholder="0.0">
+            <input class="u-full-width" type="number" step="0.01" name="result_min" placeholder="0.0">
           </div>
           <div class="two columns">
-            <input type="number" step="0.01" name="result_max" placeholder="0.0">
+            <input class="u-full-width" type="number" step="0.01" name="result_max" placeholder="0.0">
           </div>
 
           <div class="two columns">