diff --git a/app/gui2/src/App.vue b/app/gui2/src/App.vue
index 413b30cbab..83bb71c01c 100644
--- a/app/gui2/src/App.vue
+++ b/app/gui2/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ProjectView from './views/ProjectView.vue'
+import ProjectView from '@/views/ProjectView.vue'
 </script>
 
 <template>
diff --git a/app/gui2/src/assets/base.css b/app/gui2/src/assets/base.css
index 41a11fa46d..40ac3d0ee3 100644
--- a/app/gui2/src/assets/base.css
+++ b/app/gui2/src/assets/base.css
@@ -33,9 +33,16 @@
   --color-heading: var(--vt-c-text-light-1);
   --color-text: var(--vt-c-text-light-1);
 
-  --color-dim: rgba(0, 0, 0, 0.25);
+  --color-text-light: rgba(255, 255, 255, 0.7);
+
+  --color-widget: rgba(255, 255, 255, 0.12);
+  --color-widget-selected: rgba(255, 255, 255, 0.58);
+
+  --color-port-connected: rgba(255, 255, 255, 0.15);
 
   --color-frame-bg: rgba(255, 255, 255, 0.3);
+
+  --color-dim: rgba(0, 0, 0, 0.25);
 }
 
 /* non-color variables */
@@ -62,6 +69,8 @@ body {
   /* TEMPORARY. Will be replaced with actual background when it is integrated with the dashboard. */
   background: #e4d4be;
   color: var(--color-text);
+  /* TEMPORARY. Will be replaced with actual background when it is integrated with the dashboard. */
+  background: #e4d4be;
   transition: color 0.5s, background-color 0.5s;
   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
     Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
@@ -82,6 +91,14 @@ body {
   cursor: pointer;
 }
 
+:focus {
+  outline: none;
+}
+
+.hidden {
+  display: none;
+}
+
 .button.disabled {
   cursor: default;
 }
diff --git a/app/gui2/src/assets/icons.svg b/app/gui2/src/assets/icons.svg
index 9dc29f4a6e..99a1210b25 100644
--- a/app/gui2/src/assets/icons.svg
+++ b/app/gui2/src/assets/icons.svg
@@ -975,4 +975,37 @@
     <g id="workflow_play" fill="none">
         <path d="M4.48489 3.22329L11.5226 7.12542C12.2094 7.50621 12.2094 8.49376 11.5226 8.87455L4.48488 12.7767C3.81837 13.1462 2.99998 12.6642 2.99998 11.9021L2.99998 4.09786C2.99998 3.33575 3.81837 2.85374 4.48489 3.22329Z" fill="currentColor" />
     </g>
+    <g id="underscore" fill="none">
+        <svg width="20" height="4" viewBox="0 0 20 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="20" height="4" rx="2" fill="white" fill-opacity="0.33" />
+        </svg>
+    </g>
+    <g id="sort" fill="none">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g opacity="0.32">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M11 3L8 7L10 7L10 14L12 14L12 7L14 7L11 3Z" fill="#111827" />
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M5 14L8 10L6 10L6 3L4 3L4 10L2 10L5 14Z" fill="#111827" />
+            </g>
+        </svg>
+    </g>
+    <g id="sort_ascending" fill="none">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g opacity="0.8">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M11 3L8 7L10 7L10 14L12 14L12 7L14 7L11 3Z" fill="#111827" />
+                <g opacity="0.4">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 14L8 10L6 10L6 3L4 3L4 10L2 10L5 14Z" fill="#111827" />
+                </g>
+            </g>
+        </svg>
+    </g>
+    <g id="sort_descending" fill="none">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g opacity="0.8">
+                <g opacity="0.4">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M11 3L8 7L10 7L10 14L12 14L12 7L14 7L11 3Z" fill="#111827" />
+                </g>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M5 14L8 10L6 10L6 3L4 3L4 10L2 10L5 14Z" fill="#111827" />
+            </g>
+        </svg>
+    </g>
 </svg>
\ No newline at end of file
diff --git a/app/gui2/src/assets/icons/sort_descending.svg b/app/gui2/src/assets/icons/sort_descending.svg
new file mode 100644
index 0000000000..167721b0c4
--- /dev/null
+++ b/app/gui2/src/assets/icons/sort_descending.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g opacity="0.8">
+    <g opacity="0.4">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M11 3L8 7L10 7L10 14L12 14L12 7L14 7L11 3Z" fill="#111827" />
+    </g>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 14L8 10L6 10L6 3L4 3L4 10L2 10L5 14Z" fill="#111827" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/app/gui2/src/components/GraphNode.vue b/app/gui2/src/components/GraphNode.vue
index 03985bf37c..70d2fc4901 100644
--- a/app/gui2/src/components/GraphNode.vue
+++ b/app/gui2/src/components/GraphNode.vue
@@ -22,7 +22,7 @@ const emit = defineEmits<{
 
 const rootNode = ref<HTMLElement>()
 const nodeSize = useResizeObserver(rootNode)
-const editableRoot = ref<HTMLElement>()
+const editableRootNode = ref<HTMLElement>()
 
 watchEffect(() => {
   const size = nodeSize.value
@@ -157,7 +157,7 @@ interface SavedSelections {
 let selectionToRecover: SavedSelections | null = null
 
 function saveSelections() {
-  const root = editableRoot.value
+  const root = editableRootNode.value
   const selection = window.getSelection()
   if (root == null || selection == null || !selection.containsNode(root, true)) return
   const ranges: ContentRange[] = Array.from({ length: selection.rangeCount }, (_, i) =>
@@ -186,9 +186,9 @@ function saveSelections() {
 }
 
 onUpdated(() => {
-  if (selectionToRecover != null && editableRoot.value != null) {
+  if (selectionToRecover != null && editableRootNode.value != null) {
     const saved = selectionToRecover
-    const root = editableRoot.value
+    const root = editableRootNode.value
     selectionToRecover = null
     const selection = window.getSelection()
     if (selection == null) return
@@ -264,7 +264,7 @@ function handleClick(e: PointerEvent) {
     <div class="icon" @pointerdown="handleClick">@ &nbsp;</div>
     <div class="binding" @pointerdown.stop>{{ node.binding }}</div>
     <div
-      ref="editableRoot"
+      ref="editableRootNode"
       class="editable"
       contenteditable
       spellcheck="false"
@@ -308,6 +308,8 @@ function handleClick(e: PointerEvent) {
 
 .editable {
   outline: none;
+  display: flex;
+  gap: 4px;
 }
 
 .icon {
diff --git a/app/gui2/src/components/NavBreadcrumb.vue b/app/gui2/src/components/NavBreadcrumb.vue
index ca58dea57b..0448d772d5 100644
--- a/app/gui2/src/components/NavBreadcrumb.vue
+++ b/app/gui2/src/components/NavBreadcrumb.vue
@@ -4,7 +4,7 @@ const emit = defineEmits<{ click: [] }>()
 </script>
 
 <template>
-  <div class="NavBreadcrumb"><span v-text="text" @click="emit('click')"></span></div>
+  <div class="NavBreadcrumb"><span @click="emit('click')" v-text="text"></span></div>
 </template>
 
 <style scoped>
diff --git a/app/gui2/src/components/widgets/CheckboxWidget.vue b/app/gui2/src/components/widgets/CheckboxWidget.vue
new file mode 100644
index 0000000000..c8e42e5225
--- /dev/null
+++ b/app/gui2/src/components/widgets/CheckboxWidget.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const props = defineProps<{ modelValue: boolean }>()
+const emit = defineEmits<{ 'update:modelValue': [modelValue: boolean] }>()
+</script>
+
+<template>
+  <div class="Checkbox" @click="emit('update:modelValue', !modelValue)">
+    <div :class="{ hidden: !modelValue }"></div>
+  </div>
+</template>
+
+<style scoped>
+.Checkbox {
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-full);
+  background: var(--color-widget);
+}
+
+.Checkbox > div {
+  margin: 6px;
+  width: 12px;
+  height: 12px;
+  border-radius: var(--radius-full);
+  background: var(--color-widget-selected);
+}
+</style>
diff --git a/app/gui2/src/components/widgets/DropdownWidget.vue b/app/gui2/src/components/widgets/DropdownWidget.vue
new file mode 100644
index 0000000000..40796e4b6c
--- /dev/null
+++ b/app/gui2/src/components/widgets/DropdownWidget.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon.vue'
+
+import { computed, ref } from 'vue'
+
+enum SortDirection {
+  none = 'none',
+  ascending = 'ascending',
+  descending = 'descending',
+}
+
+const props = defineProps<{ color: string; selectedValue: string | null; values: string[] }>()
+const emit = defineEmits<{ click: [index: number] }>()
+
+const sortDirection = ref<SortDirection>(SortDirection.none)
+
+const sortedValuesAndIndices = computed(() => {
+  const valuesAndIndices = props.values.map<[value: string, index: number]>((value, index) => [
+    value,
+    index,
+  ])
+  switch (sortDirection.value) {
+    case SortDirection.ascending: {
+      return valuesAndIndices.sort((a, b) => (a[0] > b[0] ? 1 : a[0] < b[0] ? -1 : 0))
+    }
+    case SortDirection.descending: {
+      return valuesAndIndices.sort((a, b) => (a[0] > b[0] ? -1 : a[0] < b[0] ? 1 : 0))
+    }
+    case SortDirection.none:
+    default: {
+      return valuesAndIndices
+    }
+  }
+})
+
+const ICON_LOOKUP: Record<SortDirection, string> = {
+  [SortDirection.none]: 'sort',
+  [SortDirection.ascending]: 'sort_ascending',
+  [SortDirection.descending]: 'sort_descending',
+}
+
+const NEXT_SORT_DIRECTION: Record<SortDirection, SortDirection> = {
+  [SortDirection.none]: SortDirection.ascending,
+  [SortDirection.ascending]: SortDirection.descending,
+  [SortDirection.descending]: SortDirection.none,
+}
+</script>
+
+<template>
+  <div class="Dropdown">
+    <ul class="list" :style="{ background: color }" @wheel.stop>
+      <template v-for="[value, index] in sortedValuesAndIndices" :key="value">
+        <li v-if="value === selectedValue">
+          <div class="selected-item"><span v-text="value"></span></div>
+        </li>
+        <li v-else class="selectable-item button" @click="emit('click', index)">
+          <span v-text="value"></span>
+        </li>
+      </template>
+    </ul>
+    <div class="sort button">
+      <div class="sort-background" :style="{ background: color }"></div>
+      <SvgIcon
+        :name="ICON_LOOKUP[sortDirection]"
+        @click="sortDirection = NEXT_SORT_DIRECTION[sortDirection]"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.Dropdown {
+  position: absolute;
+  top: 100%;
+  margin-top: 4px;
+  height: 136px;
+}
+
+.list {
+  position: relative;
+  user-select: none;
+  overflow: auto;
+  border-radius: 8px;
+  width: min-content;
+  height: 100%;
+  scrollbar-width: none;
+  scrollbar-gutter: stable both-edges;
+  list-style-type: none;
+  color: var(--color-text-light);
+  padding: 4px 0;
+}
+
+.list::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 8px;
+}
+
+.list::-webkit-scrollbar-track {
+  -webkit-box-shadow: none;
+}
+
+.list::-webkit-scrollbar-thumb {
+  border: 2px solid #0000;
+  border-left-width: 1px;
+  border-right-width: 3px;
+  background-clip: padding-box;
+  border-radius: var(--radius-full);
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.list::-webkit-scrollbar-corner {
+  background: rgba(0, 0, 0, 0);
+}
+
+.list::-webkit-scrollbar-button {
+  height: 4px;
+}
+
+.sort-background {
+  position: absolute;
+  border-top-left-radius: var(--radius-full);
+  border-bottom-left-radius: var(--radius-full);
+  opacity: 0.5;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.sort {
+  position: absolute;
+  border-top-left-radius: var(--radius-full);
+  border-bottom-left-radius: var(--radius-full);
+  top: 1px;
+  right: 6px;
+  padding: 2px;
+  padding-right: 0;
+  line-height: 0;
+}
+
+.sort > img {
+  position: relative;
+}
+
+.selected-item {
+  border-radius: var(--radius-full);
+  background-color: var(--color-port-connected);
+  padding-left: 8px;
+  padding-right: 8px;
+  width: min-content;
+}
+
+.selectable-item {
+  margin-right: 16px;
+}
+</style>
diff --git a/app/gui2/src/components/widgets/PlaceholderWidget.vue b/app/gui2/src/components/widgets/PlaceholderWidget.vue
new file mode 100644
index 0000000000..92d735290a
--- /dev/null
+++ b/app/gui2/src/components/widgets/PlaceholderWidget.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="Placeholder">
+    <SvgIcon name="underscore" />
+  </div>
+</template>
diff --git a/app/gui2/src/components/widgets/SliderWidget.vue b/app/gui2/src/components/widgets/SliderWidget.vue
new file mode 100644
index 0000000000..0e32f38c73
--- /dev/null
+++ b/app/gui2/src/components/widgets/SliderWidget.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { PointerButtonMask, usePointer } from '@/util/events'
+
+const props = defineProps<{ modelValue: number; min: number; max: number }>()
+const emit = defineEmits<{ 'update:modelValue': [modelValue: number] }>()
+
+const sliderNode = ref<HTMLElement>()
+
+const dragPointer = usePointer((position) => {
+  if (sliderNode.value == null) {
+    return
+  }
+  const rect = sliderNode.value.getBoundingClientRect()
+  const fractionRaw = (position.absolute.x - rect.left) / (rect.right - rect.left)
+  const fraction = Math.max(0, Math.min(1, fractionRaw))
+  const newValue = props.min + Math.round(fraction * (props.max - props.min))
+  emit('update:modelValue', newValue)
+}, PointerButtonMask.Main)
+
+const sliderWidth = computed(
+  () => `${((props.modelValue - props.min) * 100) / (props.max - props.min)}%`,
+)
+
+const inputValue = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  },
+})
+</script>
+
+<template>
+  <div ref="sliderNode" class="Slider" v-on="dragPointer.events">
+    <div class="fraction" :style="{ width: sliderWidth }"></div>
+    <input v-model.number="inputValue" type="number" :size="1" class="value" />
+  </div>
+</template>
+
+<style scoped>
+.Slider {
+  clip-path: inset(0 round var(--radius-full));
+  position: relative;
+  user-select: none;
+  display: flex;
+  justify-content: space-around;
+  background: var(--color-widget);
+  border-radius: var(--radius-full);
+  width: 56px;
+}
+
+.fraction {
+  position: absolute;
+  height: 100%;
+  left: 0;
+  background: var(--color-widget);
+}
+
+.value {
+  position: relative;
+  display: inline-block;
+  background: none;
+  border: none;
+  text-align: center;
+  min-width: 0;
+  font-weight: 800;
+  line-height: 171.5%;
+  height: 24px;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>
diff --git a/app/gui2/src/util/events.ts b/app/gui2/src/util/events.ts
index 17b73e90ab..93da372ee5 100644
--- a/app/gui2/src/util/events.ts
+++ b/app/gui2/src/util/events.ts
@@ -88,6 +88,26 @@ export function useWindowEventConditional<K extends keyof WindowEventMap>(
   })
 }
 
+/**
+ * Add an event listener on document for the duration of condition being true.
+ * @param condition the condition that determines if event is bound
+ * @param event name of event to register
+ * @param handler event handler
+ */
+export function useDocumentEventConditional<K extends keyof DocumentEventMap>(
+  event: K,
+  condition: WatchSource<boolean>,
+  handler: (e: DocumentEventMap[K]) => void,
+  options?: boolean | AddEventListenerOptions,
+): void {
+  watch(condition, (conditionMet, _, onCleanup) => {
+    if (conditionMet) {
+      document.addEventListener(event, handler, options)
+      onCleanup(() => document.removeEventListener(event, handler, options))
+    }
+  })
+}
+
 // const hasWindow = typeof window !== 'undefined'
 // const platform = hasWindow ? window.navigator?.platform ?? '' : ''
 // const isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(platform)