diff --git a/app/Http/Controllers/Dashboard/DashboardController.php b/app/Http/Controllers/Dashboard/DashboardController.php
index 1f7292c2..36651597 100644
--- a/app/Http/Controllers/Dashboard/DashboardController.php
+++ b/app/Http/Controllers/Dashboard/DashboardController.php
@@ -13,6 +13,7 @@ namespace CachetHQ\Cachet\Http\Controllers\Dashboard;
 
 use CachetHQ\Cachet\Integrations\Feed;
 use CachetHQ\Cachet\Models\Component;
+use CachetHQ\Cachet\Models\ComponentGroup;
 use CachetHQ\Cachet\Models\Incident;
 use CachetHQ\Cachet\Models\Subscriber;
 use Illuminate\Routing\Controller;
@@ -67,6 +68,9 @@ class DashboardController extends Controller
         $components = Component::orderBy('order')->get();
         $incidents = $this->getIncidents();
         $subscribers = $this->getSubscribers();
+        $usedComponentGroups = Component::enabled()->where('group_id', '>', 0)->groupBy('group_id')->pluck('group_id');
+        $componentGroups = ComponentGroup::whereIn('id', $usedComponentGroups)->orderBy('order')->get();
+        $ungroupedComponents = Component::enabled()->where('group_id', 0)->orderBy('order')->orderBy('created_at')->get();
 
         $entries = null;
         if ($feed = $this->feed->latest()) {
@@ -78,7 +82,9 @@ class DashboardController extends Controller
             ->withComponents($components)
             ->withIncidents($incidents)
             ->withSubscribers($subscribers)
-            ->withEntries($entries);
+            ->withEntries($entries)
+            ->withComponentGroups($componentGroups)
+            ->withUngroupedComponents($ungroupedComponents);
     }
 
     /**
diff --git a/resources/assets/sass/pages/_dashboard.scss b/resources/assets/sass/pages/_dashboard.scss
index 47d971cf..f8be49b6 100755
--- a/resources/assets/sass/pages/_dashboard.scss
+++ b/resources/assets/sass/pages/_dashboard.scss
@@ -1,4 +1,4 @@
-.componet-inline-update {
+.component-inline-update {
     @extend .text-right;
     padding-top: 8px;
     label {
@@ -7,4 +7,13 @@
     }
 }
 
+.component-group-name{
+  font-size: 18px;
+  padding-left: 10px;
+}
+
+.component-group-other{
+  font-size: 18px;
+}
+
 @import "modules/stats";
diff --git a/resources/views/dashboard/index.blade.php b/resources/views/dashboard/index.blade.php
index e06abb3e..4c65a86b 100644
--- a/resources/views/dashboard/index.blade.php
+++ b/resources/views/dashboard/index.blade.php
@@ -15,38 +15,22 @@
             <div class="alert alert-info hidden" id="update-alert">{!! trans('cachet.system.update') !!}</div>
         </div>
     </div>
+
     <div class="row">
-        <div class="col-md-12">
-            <h4 class="sub-header">{{ trans('dashboard.components.component_statuses') }}</h4>
-            <div class="panel panel-default">
-                <div class="list-group">
-                    @forelse($components as $component)
-                    <div class="list-group-item">
-                        <form class='component-inline form-vertical' data-messenger="{{trans('dashboard.components.edit.success')}}">
-                            <div class="row striped-list-item">
-                                <div class="col-lg-4 col-md-3 col-sm-12">
-                                    <h4>{{ $component->name }}</h4>
-                                </div>
-                                <div class="col-lg-8 col-md-9 col-sm-12 radio-items componet-inline-update">
-                                    @foreach(trans('cachet.components.status') as $statusID => $status)
-                                    <div class="radio-inline">
-                                        <label>
-                                            <input type="radio" name="status" value="{{ $statusID }}" {{ (int) $component->status === $statusID ? 'checked' : null }}>
-                                            {{ $status }}
-                                        </label>
-                                    </div>
-                                    @endforeach
-                                </div>
-                            </div>
-                            <input type="hidden" name="component_id" value="{{ $component->id }}">
-                        </form>
-                    </div>
-                    @empty
-                    <div class="list-group-item"><a href="{{ route('dashboard.components.add') }}">{{ trans('dashboard.components.add.message') }}</a></div>
-                    @endforelse
-                </div>
-            </div>
-        </div>
+      <div class="col-md-12">
+          <h4 class="sub-header">{{ trans('dashboard.components.component_statuses') }}</h4>
+          <div class="section-components">
+              @if(!$component_groups->isEmpty() || !$ungrouped_components->isEmpty())
+              @include('dashboard.partials.components')
+              @else
+              <ul class="list-group components">
+                  <li class="list-group-item">
+                      <a href="{{ route('dashboard.components.add') }}">{{ trans('dashboard.components.add.message') }}</a>
+                  </li>
+              </ul>
+              @endif
+          </div>
+      </div>
     </div>
 
     <div class="row">
diff --git a/resources/views/dashboard/partials/component.blade.php b/resources/views/dashboard/partials/component.blade.php
new file mode 100644
index 00000000..9a8f019c
--- /dev/null
+++ b/resources/views/dashboard/partials/component.blade.php
@@ -0,0 +1,20 @@
+<li class="list-group-item {{ $component->group_id ? "sub-component" : "component" }}">
+    <form class='component-inline form-vertical' data-messenger="{{trans('dashboard.components.edit.success')}}">
+        <div class="row striped-list-item">
+            <div class="col-lg-4 col-md-3 col-sm-12">
+                <h5 class="{{ $component->status_color }}">{{ $component->name }}</h5>
+            </div>
+            <div class="col-lg-8 col-md-9 col-sm-12 radio-items component-inline-update">
+                @foreach(trans('cachet.components.status') as $statusID => $status)
+                <div class="radio-inline">
+                    <label>
+                        <input type="radio" name="status" value="{{ $statusID }}" {{ (int) $component->status === $statusID ? 'checked' : null }}>
+                        {{ $status }}
+                    </label>
+                </div>
+                @endforeach
+            </div>
+        </div>
+        <input type="hidden" name="component_id" value="{{ $component->id }}">
+    </form>
+</li>
diff --git a/resources/views/dashboard/partials/components.blade.php b/resources/views/dashboard/partials/components.blade.php
new file mode 100644
index 00000000..aa9f5496
--- /dev/null
+++ b/resources/views/dashboard/partials/components.blade.php
@@ -0,0 +1,30 @@
+@if($component_groups->count() > 0)
+@foreach($component_groups as $componentGroup)
+@if($componentGroup->enabled_components->count() > 0)
+<ul class="list-group components">
+    <li class="list-group-item group-name">
+        <i class="{{ $componentGroup->collapse_class }} group-toggle"></i>
+        <span class="component-group-name">{{ $componentGroup->name }}</span>
+    </li>
+    <div class="group-items {{ $componentGroup->is_collapsed ? "hide" : null }}">
+        @foreach($componentGroup->enabled_components()->orderBy('order')->get() as $component)
+        @include('dashboard.partials.component', compact($component))
+        @endforeach
+    </div>
+</ul>
+@endif
+@endforeach
+@endif
+
+@if($ungrouped_components->count() > 0)
+<ul class="list-group components">
+    @if($component_groups->count() > 0)
+    <li class="list-group-item group-name">
+        <span class="component-group-other">{{ trans('cachet.components.group.other') }}</span>
+    </li>
+    @endif
+    @foreach($ungrouped_components as $component)
+    @include('dashboard.partials.component', compact($component))
+    @endforeach
+</ul>
+@endif