diff --git a/docs/release-notes/version-2.9.md b/docs/release-notes/version-2.9.md
index 915d9e038..9b49cc1f3 100644
--- a/docs/release-notes/version-2.9.md
+++ b/docs/release-notes/version-2.9.md
@@ -13,6 +13,7 @@
 * [#4969](https://github.com/netbox-community/netbox/issues/4969) - Replace secret role user/group assignment with object permissions
 * [#4982](https://github.com/netbox-community/netbox/issues/4982) - Extended ObjectVar to allow filtering API query
 * [#4994](https://github.com/netbox-community/netbox/issues/4994) - Add `cable` attribute to PowerFeed API serializer
+* [#4996](https://github.com/netbox-community/netbox/issues/4996) - Add "connect" buttons to individual device component views
 
 ### Bug Fixes
 
diff --git a/netbox/templates/dcim/consoleport.html b/netbox/templates/dcim/consoleport.html
index 63916bcc5..3f4d7b306 100644
--- a/netbox/templates/dcim/consoleport.html
+++ b/netbox/templates/dcim/consoleport.html
@@ -89,6 +89,18 @@
                 {% else %}
                     <div class="panel-body text-muted">
                         Not connected
+                        {% if perms.dcim.add_cable %}
+                            <span class="dropdown pull-right">
+                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span> Connect
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-right">
+                                    <li><a href="{% url 'dcim:consoleport_connect' termination_a_id=instance.pk termination_b_type='console-server-port' %}?return_url={{ instance.get_absolute_url }}">Console Server Port</a></li>
+                                    <li><a href="{% url 'dcim:consoleport_connect' termination_a_id=instance.pk termination_b_type='front-port' %}?return_url={{ instance.get_absolute_url }}">Front Port</a></li>
+                                    <li><a href="{% url 'dcim:consoleport_connect' termination_a_id=instance.pk termination_b_type='rear-port' %}?return_url={{ instance.get_absolute_url }}">Rear Port</a></li>
+                                </ul>
+                            </span>
+                        {% endif %}
                     </div>
                 {% endif %}
             </div>
diff --git a/netbox/templates/dcim/consoleserverport.html b/netbox/templates/dcim/consoleserverport.html
index cdc43142e..77d17fe8a 100644
--- a/netbox/templates/dcim/consoleserverport.html
+++ b/netbox/templates/dcim/consoleserverport.html
@@ -89,6 +89,18 @@
                 {% else %}
                     <div class="panel-body text-muted">
                         Not connected
+                        {% if perms.dcim.add_cable %}
+                            <span class="dropdown pull-right">
+                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span> Connect
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-right">
+                                    <li><a href="{% url 'dcim:consoleserverport_connect' termination_a_id=instance.pk termination_b_type='console-port' %}?return_url={{ instance.get_absolute_url }}">Console Port</a></li>
+                                    <li><a href="{% url 'dcim:consoleserverport_connect' termination_a_id=instance.pk termination_b_type='front-port' %}?return_url={{ instance.get_absolute_url }}">Front Port</a></li>
+                                    <li><a href="{% url 'dcim:consoleserverport_connect' termination_a_id=instance.pk termination_b_type='rear-port' %}?return_url={{ instance.get_absolute_url }}">Rear Port</a></li>
+                                </ul>
+                            </span>
+                        {% endif %}
                     </div>
                 {% endif %}
             </div>
diff --git a/netbox/templates/dcim/frontport.html b/netbox/templates/dcim/frontport.html
index 8ab51cb30..e3c7bcad6 100644
--- a/netbox/templates/dcim/frontport.html
+++ b/netbox/templates/dcim/frontport.html
@@ -77,6 +77,21 @@
                 {% else %}
                     <div class="panel-body text-muted">
                         Not connected
+                        {% if perms.dcim.add_cable %}
+                            <span class="dropdown pull-right">
+                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span> Connect
+                                </button>
+                                    <ul class="dropdown-menu dropdown-menu-right">
+                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=instance.pk termination_b_type='interface' %}?return_url={{ instance.get_absolute_url }}">Interface</a></li>
+                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=instance.pk termination_b_type='console-server-port' %}?return_url={{ instance.get_absolute_url }}">Console Server Port</a></li>
+                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=instance.pk termination_b_type='console-port' %}?return_url={{ instance.get_absolute_url }}">Console Port</a></li>
+                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=instance.pk termination_b_type='front-port' %}?return_url={{ instance.get_absolute_url }}">Front Port</a></li>
+                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=instance.pk termination_b_type='rear-port' %}?return_url={{ instance.get_absolute_url }}">Rear Port</a></li>
+                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=instance.pk termination_b_type='circuit-termination' %}?return_url={{ instance.get_absolute_url }}">Circuit Termination</a></li>
+                                    </ul>
+                            </span>
+                        {% endif %}
                     </div>
                 {% endif %}
             </div>
diff --git a/netbox/templates/dcim/interface.html b/netbox/templates/dcim/interface.html
index e3d67eb2c..7fcf6ab0a 100644
--- a/netbox/templates/dcim/interface.html
+++ b/netbox/templates/dcim/interface.html
@@ -169,6 +169,19 @@
                     {% else %}
                         <div class="panel-body text-muted">
                             Not connected
+                            {% if perms.dcim.add_cable %}
+                                <span class="dropdown pull-right">
+                                    <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                        <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span> Connect
+                                    </button>
+                                    <ul class="dropdown-menu dropdown-menu-right">
+                                        <li><a href="{% url 'dcim:interface_connect' termination_a_id=instance.pk termination_b_type='interface' %}?return_url={{ instance.get_absolute_url }}">Interface</a></li>
+                                        <li><a href="{% url 'dcim:interface_connect' termination_a_id=instance.pk termination_b_type='front-port' %}?return_url={{ instance.get_absolute_url }}">Front Port</a></li>
+                                        <li><a href="{% url 'dcim:interface_connect' termination_a_id=instance.pk termination_b_type='rear-port' %}?return_url={{ instance.get_absolute_url }}">Rear Port</a></li>
+                                        <li><a href="{% url 'dcim:interface_connect' termination_a_id=instance.pk termination_b_type='circuit-termination' %}?return_url={{ instance.get_absolute_url }}">Circuit Termination</a></li>
+                                    </ul>
+                                </span>
+                            {% endif %}
                         </div>
                     {% endif %}
                 </div>
diff --git a/netbox/templates/dcim/poweroutlet.html b/netbox/templates/dcim/poweroutlet.html
index cddcffd6f..2ea70972b 100644
--- a/netbox/templates/dcim/poweroutlet.html
+++ b/netbox/templates/dcim/poweroutlet.html
@@ -97,6 +97,11 @@
                 {% else %}
                     <div class="panel-body text-muted">
                         Not connected
+                        {% if perms.dcim.add_cable %}
+                            <a href="{% url 'dcim:poweroutlet_connect' termination_a_id=instance.pk termination_b_type='power-port' %}?return_url={{ instance.get_absolute_url }}" title="Connect" class="btn btn-primary btn-sm pull-right">
+                                <i class="glyphicon glyphicon-resize-small" aria-hidden="true"></i> Connect
+                            </a>
+                        {% endif %}
                     </div>
                 {% endif %}
             </div>
diff --git a/netbox/templates/dcim/powerport.html b/netbox/templates/dcim/powerport.html
index 8642bd8fb..3f3d28899 100644
--- a/netbox/templates/dcim/powerport.html
+++ b/netbox/templates/dcim/powerport.html
@@ -97,6 +97,17 @@
                 {% else %}
                     <div class="panel-body text-muted">
                         Not connected
+                        {% if perms.dcim.add_cable %}
+                            <span class="dropdown pull-right">
+                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span> Connect
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-right">
+                                    <li><a href="{% url 'dcim:powerport_connect' termination_a_id=instance.pk termination_b_type='power-outlet' %}?return_url={{ instance.get_absolute_url }}">Power Outlet</a></li>
+                                    <li><a href="{% url 'dcim:powerport_connect' termination_a_id=instance.pk termination_b_type='power-feed' %}?return_url={{ instance.get_absolute_url }}">Power Feed</a></li>
+                                </ul>
+                            </span>
+                        {% endif %}
                     </div>
                 {% endif %}
             </div>
diff --git a/netbox/templates/dcim/rearport.html b/netbox/templates/dcim/rearport.html
index 982d53eaa..23246602a 100644
--- a/netbox/templates/dcim/rearport.html
+++ b/netbox/templates/dcim/rearport.html
@@ -71,6 +71,19 @@
                 {% else %}
                     <div class="panel-body text-muted">
                         Not connected
+                        {% if perms.dcim.add_cable %}
+                            <span class="dropdown pull-right">
+                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span> Connect
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-right">
+                                    <li><a href="{% url 'dcim:rearport_connect' termination_a_id=instance.pk termination_b_type='interface' %}?return_url={{ instance.get_absolute_url }}">Interface</a></li>
+                                    <li><a href="{% url 'dcim:rearport_connect' termination_a_id=instance.pk termination_b_type='front-port' %}?return_url={{ instance.get_absolute_url }}">Front Port</a></li>
+                                    <li><a href="{% url 'dcim:rearport_connect' termination_a_id=instance.pk termination_b_type='rear-port' %}?return_url={{ instance.get_absolute_url }}">Rear Port</a></li>
+                                    <li><a href="{% url 'dcim:rearport_connect' termination_a_id=instance.pk termination_b_type='circuit-termination' %}?return_url={{ instance.get_absolute_url }}">Circuit Termination</a></li>
+                                </ul>
+                            </span>
+                        {% endif %}
                     </div>
                 {% endif %}
             </div>