diff --git a/app-proto/src/assembly.rs b/app-proto/src/assembly.rs
index eb850d8..78228cc 100644
--- a/app-proto/src/assembly.rs
+++ b/app-proto/src/assembly.rs
@@ -18,7 +18,7 @@ pub struct Element {
     pub id: String,
     pub label: String,
     pub color: ElementColor,
-    pub representation: DVector<f64>,
+    pub representation: Signal<DVector<f64>>,
     pub constraints: Signal<BTreeSet<ConstraintKey>>,
     
     // the configuration matrix column index that was assigned to this element
@@ -40,7 +40,7 @@ impl Element {
             id: id,
             label: label,
             color: color,
-            representation: representation,
+            representation: create_signal(representation),
             constraints: create_signal(BTreeSet::default()),
             index: 0
         }
@@ -161,7 +161,7 @@ impl Assembly {
             for (_, elt) in elts {
                 let index = elt.index;
                 gram_to_be.push_sym(index, index, 1.0);
-                guess_to_be.set_column(index, &elt.representation);
+                guess_to_be.set_column(index, &elt.representation.get_clone());
             }
             
             (gram_to_be, guess_to_be)
@@ -203,11 +203,11 @@ impl Assembly {
         
         if success {
             // read out the solution
-            self.elements.update(|elts| {
-                for (_, elt) in elts.iter_mut() {
-                    elt.representation.set_column(0, &config.column(elt.index));
-                }
-            });
+            for (_, elt) in self.elements.get_clone() {
+                elt.representation.update(
+                    |rep| rep.set_column(0, &config.column(elt.index))
+                );
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/app-proto/src/display.rs b/app-proto/src/display.rs
index 79199ec..ee0af47 100644
--- a/app-proto/src/display.rs
+++ b/app-proto/src/display.rs
@@ -103,7 +103,11 @@ pub fn Display() -> View {
     // change listener
     let scene_changed = create_signal(true);
     create_effect(move || {
-        state.assembly.elements.track();
+        state.assembly.elements.with(|elts| {
+            for (_, elt) in elts {
+                elt.representation.track();
+            }
+        });
         state.selection.track();
         scene_changed.set(true);
     });
@@ -295,25 +299,40 @@ pub fn Display() -> View {
                 let assembly_to_world = &location * &orientation;
                 
                 // get the assembly
-                let elements = state.assembly.elements.get_clone();
-                let element_iter = (&elements).into_iter();
-                let reps_world: Vec<_> = element_iter.clone().map(
-                    |(_, elt)| &assembly_to_world * &elt.representation
-                ).collect();
-                let colors: Vec<_> = element_iter.clone().map(|(key, elt)|
-                    if state.selection.with(|sel| sel.contains(&key)) {
-                        elt.color.map(|ch| 0.2 + 0.8*ch)
-                    } else {
-                        elt.color
-                    }
-                ).collect();
-                let highlights: Vec<_> = element_iter.map(|(key, _)|
-                    if state.selection.with(|sel| sel.contains(&key)) {
-                        1.0_f32
-                    } else {
-                        HIGHLIGHT
-                    }
-                ).collect();
+                let (
+                    elt_cnt,
+                    reps_world,
+                    colors,
+                    highlights
+                ) = state.assembly.elements.with(|elts| {
+                    (
+                        // number of elements
+                        elts.len() as i32,
+                        
+                        // representation vectors in world coordinates
+                        elts.iter().map(
+                            |(_, elt)| elt.representation.with(|rep| &assembly_to_world * rep)
+                        ).collect::<Vec<_>>(),
+                        
+                        // colors
+                        elts.iter().map(|(key, elt)| {
+                            if state.selection.with(|sel| sel.contains(&key)) {
+                                elt.color.map(|ch| 0.2 + 0.8*ch)
+                            } else {
+                                elt.color
+                            }
+                        }).collect::<Vec<_>>(),
+                        
+                        // highlight levels
+                        elts.iter().map(|(key, _)| {
+                            if state.selection.with(|sel| sel.contains(&key)) {
+                                1.0_f32
+                            } else {
+                                HIGHLIGHT
+                            }
+                        }).collect::<Vec<_>>()
+                    )
+                });
                 
                 // set the resolution
                 let width = canvas.width() as f32;
@@ -322,7 +341,7 @@ pub fn Display() -> View {
                 ctx.uniform1f(shortdim_loc.as_ref(), width.min(height));
                 
                 // pass the assembly
-                ctx.uniform1i(sphere_cnt_loc.as_ref(), elements.len() as i32);
+                ctx.uniform1i(sphere_cnt_loc.as_ref(), elt_cnt);
                 for n in 0..reps_world.len() {
                     let v = &reps_world[n];
                     ctx.uniform3f(
diff --git a/app-proto/src/outline.rs b/app-proto/src/outline.rs
index 65e440f..f3951b5 100644
--- a/app-proto/src/outline.rs
+++ b/app-proto/src/outline.rs
@@ -1,5 +1,5 @@
 use itertools::Itertools;
-use sycamore::{prelude::*, web::tags::div};
+use sycamore::prelude::*;
 use web_sys::{
     Event,
     HtmlInputElement,
@@ -64,10 +64,11 @@ fn ElementOutlineItem(key: ElementKey, element: assembly::Element) -> View {
         move |sel| if sel.contains(&key) { "selected" } else { "" }
     );
     let label = element.label.clone();
-    let rep_components = element.representation.iter().map(|u| {
-        let u_coord = format!("{:.3}", u).replace("-", "\u{2212}");
-        View::from(div().children(u_coord))
-    }).collect::<Vec<_>>();
+    let rep_components = element.representation.map(
+        |rep| rep.iter().map(
+            |u| format!("{:.3}", u).replace("-", "\u{2212}")
+        ).collect()
+    );
     let constrained = element.constraints.map(|csts| csts.len() > 0);
     let constraint_list = element.constraints.map(
         |csts| csts.clone().into_iter().collect()
@@ -139,7 +140,14 @@ fn ElementOutlineItem(key: ElementKey, element: assembly::Element) -> View {
                         }
                     ) {
                         div(class="elt-label") { (label) }
-                        div(class="elt-rep") { (rep_components) }
+                        div(class="elt-rep") {
+                            Indexed(
+                                list=rep_components,
+                                view=|coord_str| view! {
+                                    div { (coord_str) }
+                                }
+                            )
+                        }
                         div(class="status")
                     }
                 }
@@ -192,12 +200,7 @@ pub fn Outline() -> View {
                 view=|(key, elt)| view! {
                     ElementOutlineItem(key=key, element=elt)
                 },
-                key=|(key, elt)| (
-                    key.clone(),
-                    elt.id.clone(),
-                    elt.label.clone(),
-                    elt.representation.into_iter().map(|u| u.to_bits()).collect::<Vec<_>>()
-                )
+                key=|(key, _)| key.clone()
             )
         }
     }