diff --git a/app-proto/full-interface/main.css b/app-proto/full-interface/main.css
index 51cdb3c..a687aac 100644
--- a/app-proto/full-interface/main.css
+++ b/app-proto/full-interface/main.css
@@ -4,9 +4,11 @@ body {
   background-color: #222;
 }
 
-/* outline */
+/* sidebar */
 
-#outline {
+#sidebar {
+  display: flex;
+  flex-direction: column;
   float: left;
   width: 450px;
   height: 100vh;
@@ -15,6 +17,28 @@ body {
   border-width: 0px 1px 0px 0px;
   border-style: solid;
   border-color: #555;
+}
+
+/* add-remove */
+
+#add-remove {
+  display: flex;
+  gap: 8px;
+  margin: 8px;
+}
+
+#add-remove > button {
+  width: 32px;
+  height: 32px;
+  font-size: large;
+}
+
+/* outline */
+
+#outline {
+  flex-grow: 1;
+  margin: 0px;
+  padding: 0px;
   overflow-y: scroll;
 }
 
diff --git a/app-proto/full-interface/src/add_remove.rs b/app-proto/full-interface/src/add_remove.rs
new file mode 100644
index 0000000..59220ae
--- /dev/null
+++ b/app-proto/full-interface/src/add_remove.rs
@@ -0,0 +1,55 @@
+use sycamore::prelude::*;
+use web_sys::{MouseEvent, console, wasm_bindgen::JsValue};
+
+use crate::AppState;
+use crate::Constraint;
+
+#[component]
+pub fn AddRemove() -> View {
+    let state = use_context::<AppState>();
+    
+    view! {
+        div(id="add-remove") {
+            button(
+                on:click=move |event: MouseEvent| {
+                    console::log_1(&JsValue::from("constraints:"));
+                    state.assembly.constraints.with(|csts| {
+                        for (_, cst) in csts.into_iter() {
+                            console::log_4(
+                                &JsValue::from(cst.args.0),
+                                &JsValue::from(cst.args.1),
+                                &JsValue::from(":"),
+                                &JsValue::from(cst.rep)
+                            );
+                        }
+                    });
+                }
+            ) { "+" }
+            button(
+                disabled={
+                    state.selection.with(|sel| sel.len() != 2)
+                },
+                on:click=move |event: MouseEvent| {
+                    let args = state.selection.with(
+                        |sel| {
+                            let arg_vec: Vec<_> = sel.into_iter().collect();
+                            (arg_vec[0].clone(), arg_vec[1].clone())
+                        }
+                    );
+                    console::log_5(
+                        &JsValue::from("add constraint"),
+                        &JsValue::from(args.0),
+                        &JsValue::from(args.1),
+                        &JsValue::from(":"),
+                        &JsValue::from(0.0)
+                    );
+                    state.assembly.insert_constraint(Constraint {
+                        args: args,
+                        rep: 0.0
+                    });
+                    state.selection.update(|sel| sel.clear());
+                }
+            ) { "🔗" }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app-proto/full-interface/src/main.rs b/app-proto/full-interface/src/main.rs
index 0466724..2f31ada 100644
--- a/app-proto/full-interface/src/main.rs
+++ b/app-proto/full-interface/src/main.rs
@@ -1,3 +1,4 @@
+mod add_remove;
 mod assembly;
 mod display;
 mod outline;
@@ -6,6 +7,7 @@ use nalgebra::DVector;
 use rustc_hash::FxHashSet;
 use sycamore::prelude::*;
 
+use add_remove::AddRemove;
 use assembly::{Assembly, Constraint, Element};
 use display::Display;
 use outline::Outline;
@@ -68,7 +70,10 @@ fn main() {
         provide_context(state);
         
         view! {
-            Outline {}
+            div(id="sidebar") {
+                AddRemove {}
+                Outline {}
+            }
             Display {}
         }
     });