diff --git a/Cargo.lock b/Cargo.lock
index 1c9d2e1..47325a9 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -949,6 +949,15 @@ version = "2.5.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0206175f82b8d6bf6652ff7d71a1e27fd2e4efde587fd368662814d6ec1d9ce0"
 
+[[package]]
+name = "fake"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4d68f517805463f3a896a9d29c1d6ff09d3579ded64a7201b4069f8f9c0d52fd"
+dependencies = [
+ "rand",
+]
+
 [[package]]
 name = "fastrand"
 version = "1.9.0"
@@ -1010,6 +1019,7 @@ dependencies = [
  "console_error_panic_hook",
  "eframe",
  "egui",
+ "fake",
  "serde",
  "tracing-subscriber",
  "tracing-wasm",
diff --git a/Cargo.toml b/Cargo.toml
index 1c99706..05b3bcc 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -23,6 +23,7 @@ serde = { version = "1", features = ["derive"] }
 chrono = { version = "0.4", features = ["serde"] }
 chrono-humanize = "0.2.2"
 uuid = { version = "1.3.1", features = ["v4", "fast-rng", "js", "serde"] }
+fake = "2.5"
 
 # native:
 [target.'cfg(not(target_arch = "wasm32"))'.dependencies]
diff --git a/dist/fplanner.js b/dist/fplanner.js
index 39fc18d..78be3b0 100644
--- a/dist/fplanner.js
+++ b/dist/fplanner.js
@@ -1353,16 +1353,16 @@ function getImports() {
         const ret = wasm.memory;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper3723 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 304, __wbg_adapter_30);
+    imports.wbg.__wbindgen_closure_wrapper4200 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 318, __wbg_adapter_30);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper3725 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 304, __wbg_adapter_33);
+    imports.wbg.__wbindgen_closure_wrapper4202 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 318, __wbg_adapter_33);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper3773 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 329, __wbg_adapter_36);
+    imports.wbg.__wbindgen_closure_wrapper4250 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 343, __wbg_adapter_36);
         return addHeapObject(ret);
     };
 
diff --git a/dist/fplanner_bg.wasm b/dist/fplanner_bg.wasm
index 4099fc9..51d5b4a 100644
Binary files a/dist/fplanner_bg.wasm and b/dist/fplanner_bg.wasm differ
diff --git a/src/app.rs b/src/app.rs
index 59b6614..617869c 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -1,6 +1,11 @@
+pub mod components;
 mod structure;
+
 use chrono::prelude::Utc;
 use chrono_humanize::HumanTime;
+use fake::{Fake, Faker};
+use std::collections::HashMap;
+use uuid::Uuid;
 
 /// We derive Deserialize/Serialize so we can persist app state on shutdown.
 #[derive(serde::Deserialize, serde::Serialize)]
@@ -14,6 +19,7 @@ pub struct PlannerApp {
     value: f32,
 
     #[serde(skip)]
+    update_view: bool,
     view_layers: Vec<structure::Layer>,
     new_index: usize,
     new_label: String,
@@ -28,6 +34,7 @@ impl Default for PlannerApp {
             label: "Helllllo World!".to_owned(),
             value: 5.5,
             view_layers: vec![],
+            update_view: true,
             new_index: 0,
             new_label: String::default(),
             current_project: structure::Project::default(),
@@ -64,6 +71,7 @@ impl eframe::App for PlannerApp {
             label,
             value,
             view_layers,
+            update_view,
             new_index,
             new_label,
             current_project,
@@ -89,6 +97,18 @@ impl eframe::App for PlannerApp {
             });
         });
 
+        egui::SidePanel::right("right_panel").show(ctx, |ui| {
+            ui.heading("Components");
+
+            for i in view_layers.clone() {
+                if i.visible {
+                    for (id, comp) in &i.components {
+                        ui.label(format!("{}: {}", &id.to_string(), &comp.label));
+                    }
+                }
+            }
+        });
+
         egui::SidePanel::left("side_panel").show(ctx, |ui| {
             ui.heading("Project");
 
@@ -156,16 +176,30 @@ impl eframe::App for PlannerApp {
                         zindex: new_index.clone(),
                         label: new_label.clone(),
                         visible: true,
+                        components: HashMap::from([(
+                            Uuid::new_v4(),
+                            components::Component {
+                                id: Uuid::new_v4(),
+                                label: Faker.fake::<String>(),
+                                description: Faker.fake::<String>(),
+                                c_type: components::ComponentType::Door,
+                                material: components::Material::Metal,
+                            },
+                        )]),
                     };
                     current_project
                         .layers
                         .insert(new_index.clone(), new_layer.clone());
                     current_project.modified = Some(Utc::now());
+                    *update_view = true;
                 }
 
-                *view_layers = vec![];
-                for (index, layer) in &current_project.layers {
-                    view_layers.push(layer.clone());
+                if *update_view {
+                    *view_layers = vec![];
+                    for (index, layer) in &current_project.layers {
+                        view_layers.push(layer.clone());
+                    }
+                    *update_view = false;
                 }
 
                 ui.separator();
diff --git a/src/app/components.rs b/src/app/components.rs
index 26a761a..b382a2d 100644
--- a/src/app/components.rs
+++ b/src/app/components.rs
@@ -1,3 +1,6 @@
+use uuid::Uuid;
+
+#[derive(serde::Deserialize, serde::Serialize, PartialEq)]
 pub enum Unit {
     Kilometer(f64),
     Meter(f64),
@@ -6,6 +9,7 @@ pub enum Unit {
     Foot(f64),
 }
 
+#[derive(serde::Deserialize, serde::Serialize, PartialEq, Clone)]
 pub enum ComponentType {
     Wall,
     Door,
@@ -15,6 +19,7 @@ pub enum ComponentType {
     Furniture,
 }
 
+#[derive(serde::Deserialize, serde::Serialize, PartialEq, Clone)]
 pub enum Material {
     Metal,
     Wood,
@@ -22,3 +27,25 @@ pub enum Material {
     Drywall,
     Cement,
 }
+
+#[derive(serde::Deserialize, serde::Serialize, PartialEq, Clone)]
+#[serde(default)]
+pub struct Component {
+    pub id: Uuid,
+    pub label: String,
+    pub description: String,
+    pub c_type: ComponentType,
+    pub material: Material,
+}
+
+impl Default for Component {
+    fn default() -> Self {
+        Self {
+            id: Uuid::new_v4(),
+            label: String::default(),
+            description: String::default(),
+            c_type: ComponentType::Furniture,
+            material: Material::Wood,
+        }
+    }
+}
diff --git a/src/app/structure.rs b/src/app/structure.rs
index afcf6b0..08fe825 100644
--- a/src/app/structure.rs
+++ b/src/app/structure.rs
@@ -1,7 +1,9 @@
 use chrono::prelude::*;
-use std::collections::BTreeMap;
+use std::collections::{BTreeMap, HashMap};
 use uuid::Uuid;
 
+use super::components::Component;
+
 #[derive(serde::Deserialize, serde::Serialize, PartialEq)]
 pub enum License {
     MIT,
@@ -16,6 +18,7 @@ pub struct Layer {
     pub zindex: usize,
     pub label: String,
     pub visible: bool,
+    pub components: HashMap<Uuid, Component>,
 }
 
 impl Default for Layer {
@@ -24,6 +27,7 @@ impl Default for Layer {
             zindex: 0,
             visible: true,
             label: String::default(),
+            components: HashMap::new(),
         }
     }
 }