diff --git a/src/controller.rs b/src/controller.rs
index bee16e1..1ff9de2 100644
--- a/src/controller.rs
+++ b/src/controller.rs
@@ -1,15 +1,13 @@
 use std::{cell::RefCell, collections::HashMap, rc::Rc};
 
-use gtk::{
-    glib::{self, clone},
-    prelude::*,
-};
+use gtk::glib::{self, clone};
 use libspa::{ForeignDict, ReadableDict};
 use log::{info, warn};
 use pipewire::{port::Direction, registry::GlobalObject, types::ObjectType};
 
 use crate::{pipewire_connection::PipewireConnection, view};
 
+#[derive(Copy, Clone)]
 pub enum MediaType {
     Audio,
     Video,
@@ -171,6 +169,15 @@ impl Controller {
             .expect("Port has no node.id property!")
             .parse()
             .expect("Could not parse node.id property");
+
+        // Find out the nodes media type so that the port can be colored.
+        let media_type = if let Some(Item::Node { media_type, .. }) = self.state.get(&node_id) {
+            media_type.to_owned()
+        } else {
+            warn!("Node not found for Port {}", port.id);
+            None
+        };
+
         let new_port = crate::view::port::Port::new(
             port.id,
             &port_label,
@@ -179,20 +186,9 @@ impl Controller {
             } else {
                 Direction::Output
             },
+            media_type,
         );
 
-        // Color the port accordingly to its media class.
-        if let Some(Item::Node { media_type, .. }) = self.state.get(&node_id) {
-            match media_type {
-                Some(MediaType::Audio) => new_port.widget.add_css_class("audio"),
-                Some(MediaType::Video) => new_port.widget.add_css_class("video"),
-                Some(MediaType::Midi) => new_port.widget.add_css_class("midi"),
-                None => {}
-            }
-        } else {
-            warn!("Node not found for Port {}", port.id);
-        }
-
         self.view.add_port_to_node(node_id, new_port.id, new_port);
 
         // Save node_id so we can delete this port easily.
diff --git a/src/view/port.rs b/src/view/port.rs
index ddc25f3..e353e0a 100644
--- a/src/view/port.rs
+++ b/src/view/port.rs
@@ -1,3 +1,7 @@
+use gtk::WidgetExt;
+
+use crate::controller::MediaType;
+
 /// Graphical representation of a pipewire port.
 pub struct Port {
     pub widget: gtk::Button,
@@ -6,9 +10,24 @@ pub struct Port {
 }
 
 impl Port {
-    pub fn new(id: u32, name: &str, direction: pipewire::port::Direction) -> Self {
+    pub fn new(
+        id: u32,
+        name: &str,
+        direction: pipewire::port::Direction,
+        media_type: Option<MediaType>,
+    ) -> Self {
+        let widget = gtk::Button::with_label(name);
+
+        // Color the port according to its media type.
+        match media_type {
+            Some(MediaType::Video) => widget.add_css_class("video"),
+            Some(MediaType::Audio) => widget.add_css_class("audio"),
+            Some(MediaType::Midi) => widget.add_css_class("midi"),
+            None => {}
+        }
+
         Self {
-            widget: gtk::Button::with_label(name),
+            widget,
             id,
             direction,
         }