diff --git a/assets/components.d.ts b/assets/components.d.ts
index 1d761f96..4eff4ae7 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -17,7 +17,7 @@ declare module '@vue/runtime-core' {
     copy: typeof import('./components/LogViewer/DockerEventLogItem copy.vue')['default']
     DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default']
     DropdownMenu: typeof import('./components/DropdownMenu.vue')['default']
-    FieldList: typeof import('./components/FieldList.vue')['default']
+    FieldList: typeof import('./components/LogViewer/FieldList.vue')['default']
     FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
     InfiniteLoader: typeof import('./components/InfiniteLoader.vue')['default']
     JSONPayload: typeof import('./components/LogViewer/JSONPayload.vue')['default']
diff --git a/assets/components/FuzzySearchModal.vue b/assets/components/FuzzySearchModal.vue
index f26037c9..415abfba 100644
--- a/assets/components/FuzzySearchModal.vue
+++ b/assets/components/FuzzySearchModal.vue
@@ -36,12 +36,9 @@
 import fuzzysort from "fuzzysort";
 import { type Container } from "@/types/Container";
 
-const props = defineProps({
-  maxResults: {
-    default: 20,
-    type: Number,
-  },
-});
+const { maxResults = 20 } = defineProps<{
+  maxResults: number;
+}>();
 
 const emit = defineEmits(["close"]);
 
@@ -64,7 +61,7 @@ const preparedContainers = computed(() =>
 
 const results = computed(() => {
   const options = {
-    limit: props.maxResults,
+    limit: maxResults,
     key: "preparedName",
   };
   if (query.value) {
diff --git a/assets/components/InfiniteLoader.vue b/assets/components/InfiniteLoader.vue
index b3db9932..dc35ed9a 100644
--- a/assets/components/InfiniteLoader.vue
+++ b/assets/components/InfiniteLoader.vue
@@ -9,21 +9,21 @@
 </template>
 
 <script lang="ts" setup>
-const props = defineProps({
-  onLoadMore: Function,
-  enabled: Boolean,
-});
+const { onLoadMore = () => {}, enabled } = defineProps<{
+  onLoadMore: () => void;
+  enabled: boolean;
+}>();
 
 const isLoading = ref(false);
 const root = ref<HTMLElement>();
 
 const observer = new IntersectionObserver(async (entries) => {
   if (entries[0].intersectionRatio <= 0) return;
-  if (props.onLoadMore && props.enabled) {
+  if (onLoadMore && enabled) {
     const scrollingParent = root.value?.closest("[data-scrolling]") || document.documentElement;
     const previousHeight = scrollingParent.scrollHeight;
     isLoading.value = true;
-    await props.onLoadMore();
+    await onLoadMore();
     isLoading.value = false;
     await nextTick();
     scrollingParent.scrollTop += scrollingParent.scrollHeight - previousHeight;
diff --git a/assets/components/LogActionsToolbar.vue b/assets/components/LogActionsToolbar.vue
index 77844114..c8694389 100644
--- a/assets/components/LogActionsToolbar.vue
+++ b/assets/components/LogActionsToolbar.vue
@@ -41,22 +41,19 @@
 </template>
 
 <script lang="ts" setup>
-import { type PropType, type ComputedRef } from "vue";
+import { type ComputedRef } from "vue";
 import { type Container } from "@/types/Container";
 import hotkeys from "hotkeys-js";
 
 const { showSearch } = useSearchFilter();
 const { base } = config;
 
-const props = defineProps({
-  onClearClicked: {
-    type: Function as PropType<(e: Event) => void>,
-    default: (e: Event) => {},
-  },
-});
+const { onClearClicked = (e: Event) => {} } = defineProps<{
+  onClearClicked: (e: Event) => void;
+}>();
 
 const onHotkey = (event: Event) => {
-  props.onClearClicked(event);
+  onClearClicked(event);
   event.preventDefault();
 };
 
diff --git a/assets/components/LogViewer/ComplexLogItem.vue b/assets/components/LogViewer/ComplexLogItem.vue
index 6001a35d..f2dfda40 100644
--- a/assets/components/LogViewer/ComplexLogItem.vue
+++ b/assets/components/LogViewer/ComplexLogItem.vue
@@ -1,13 +1,15 @@
 <template>
-  <ul class="fields" @click="expanded = !expanded">
-    <li v-for="(value, name) in logEntry.message">
-      <template v-if="value">
-        <span class="has-text-grey">{{ name }}=</span>
-        <span class="has-text-weight-bold" v-html="markSearch(value)"></span>
-      </template>
-    </li>
-  </ul>
-  <field-list :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys"></field-list>
+  <div>
+    <ul class="fields" @click="expanded = !expanded">
+      <li v-for="(value, name) in logEntry.message">
+        <template v-if="value">
+          <span class="has-text-grey">{{ name }}=</span>
+          <span class="has-text-weight-bold" v-html="markSearch(value)"></span>
+        </template>
+      </li>
+    </ul>
+    <field-list :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys"></field-list>
+  </div>
 </template>
 <script lang="ts" setup>
 import { type ComplexLogEntry } from "@/models/LogEntry";
diff --git a/assets/components/FieldList.vue b/assets/components/LogViewer/FieldList.vue
similarity index 71%
rename from assets/components/FieldList.vue
rename to assets/components/LogViewer/FieldList.vue
index 1c6ceb1b..93392781 100644
--- a/assets/components/FieldList.vue
+++ b/assets/components/LogViewer/FieldList.vue
@@ -28,26 +28,18 @@
 </template>
 <script lang="ts" setup>
 import { arrayEquals, isObject } from "@/utils";
-import { nextTick, PropType, ref, toRaw } from "vue";
 
-const props = defineProps({
-  fields: {
-    type: Object as PropType<Record<string, any>>,
-    required: true,
-  },
-  expanded: {
-    type: Boolean,
-    default: false,
-  },
-  parentKey: {
-    type: Array as PropType<string[]>,
-    default: [],
-  },
-  visibleKeys: {
-    type: Array as PropType<string[][]>,
-    default: [],
-  },
-});
+const {
+  fields,
+  expanded = false,
+  parentKey = [],
+  visibleKeys = [],
+} = defineProps<{
+  fields: Record<string, any>;
+  expanded?: boolean;
+  parentKey?: string[];
+  visibleKeys?: string[][];
+}>();
 
 const root = ref<HTMLElement>();
 
@@ -55,9 +47,9 @@ async function toggleField(field: string) {
   const index = fieldIndex(field);
 
   if (index > -1) {
-    props.visibleKeys.splice(index, 1);
+    visibleKeys.splice(index, 1);
   } else {
-    props.visibleKeys.push(props.parentKey.concat(field));
+    visibleKeys.push(parentKey.concat(field));
   }
 
   await nextTick();
@@ -72,8 +64,8 @@ function hasField(field: string) {
 }
 
 function fieldIndex(field: string) {
-  const path = props.parentKey.concat(field);
-  return props.visibleKeys.findIndex((keys) => arrayEquals(toRaw(keys), toRaw(path)));
+  const path = parentKey.concat(field);
+  return visibleKeys.findIndex((keys) => arrayEquals(toRaw(keys), toRaw(path)));
 }
 </script>
 
diff --git a/assets/components/LogViewer/LogContainer.vue b/assets/components/LogViewer/LogContainer.vue
index eddb55ea..bf934dc1 100644
--- a/assets/components/LogViewer/LogContainer.vue
+++ b/assets/components/LogViewer/LogContainer.vue
@@ -26,26 +26,25 @@
 <script lang="ts" setup>
 import LogViewerWithSource from "./LogViewerWithSource.vue";
 
-const props = withDefaults(
-  defineProps<{
-    id: string;
-    showTitle?: boolean;
-    scrollable?: boolean;
-    closable?: boolean;
-  }>(),
-  {
-    showTitle: false,
-    scrollable: false,
-    closable: false,
-  }
-);
+const {
+  id,
+  showTitle = false,
+  scrollable = false,
+  closable = false,
+} = defineProps<{
+  id: string;
+  showTitle?: boolean;
+  scrollable?: boolean;
+  closable?: boolean;
+}>();
 
-const emit = defineEmits(["close"]);
+const emit = defineEmits<{
+  (event: "close"): void;
+}>();
 
-const { id } = toRefs(props);
 const store = useContainerStore();
 
-const container = store.currentContainer(id);
+const container = store.currentContainer($$(id));
 
 provide("container", container);
 
diff --git a/assets/components/LogViewer/LogViewer.vue b/assets/components/LogViewer/LogViewer.vue
index 2a0afa5e..cffc0569 100644
--- a/assets/components/LogViewer/LogViewer.vue
+++ b/assets/components/LogViewer/LogViewer.vue
@@ -40,12 +40,12 @@ const props = defineProps<{
   messages: LogEntry<string | JSONObject>[];
 }>();
 
-const { messages } = toRefs(props);
 let visibleKeys = persistentVisibleKeys(inject("container") as ComputedRef<Container>);
 
 const { filteredPayload } = useVisibleFilter(visibleKeys);
 const { filteredMessages, resetSearch, isSearching } = useSearchFilter();
 
+const { messages } = toRefs(props);
 const visible = filteredPayload(messages);
 const filtered = filteredMessages(visible);
 
diff --git a/assets/components/PastTime.vue b/assets/components/PastTime.vue
index c2d5e695..9bd78f08 100644
--- a/assets/components/PastTime.vue
+++ b/assets/components/PastTime.vue
@@ -5,13 +5,13 @@
 <script lang="ts" setup>
 import formatDistance from "date-fns/formatDistance";
 
-const props = defineProps<{
+const { date } = defineProps<{
   date: Date;
 }>();
 
 const text = ref<string>();
 function updateFromNow() {
-  text.value = formatDistance(props.date, new Date(), {
+  text.value = formatDistance(date, new Date(), {
     addSuffix: true,
   });
 }
diff --git a/assets/components/RelativeTime.vue b/assets/components/RelativeTime.vue
index c4ea3800..087a2692 100644
--- a/assets/components/RelativeTime.vue
+++ b/assets/components/RelativeTime.vue
@@ -7,7 +7,6 @@ defineProps<{
   date: Date;
 }>();
 
-// hourStyle
 const dateFormatter = new Intl.DateTimeFormat(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
 const use12Hour = $computed(() => ({ auto: undefined, "12": true, "24": false }[hourStyle.value]));
 const timeFormatter = $computed(
diff --git a/assets/components/ScrollProgress.vue b/assets/components/ScrollProgress.vue
index 92d586d5..2289da34 100644
--- a/assets/components/ScrollProgress.vue
+++ b/assets/components/ScrollProgress.vue
@@ -18,16 +18,10 @@
 </template>
 
 <script lang="ts" setup>
-const props = withDefaults(
-  defineProps<{
-    indeterminate: boolean;
-    autoHide: boolean;
-  }>(),
-  {
-    indeterminate: false,
-    autoHide: true,
-  }
-);
+const { indeterminate = false, autoHide = false } = defineProps<{
+  indeterminate?: boolean;
+  autoHide?: boolean;
+}>();
 
 const scrollProgress = ref(0);
 const animation = ref({ cancel: () => {} });
@@ -54,7 +48,7 @@ watchPostEffect(() => {
       : (scrollElement.value as HTMLElement);
   scrollProgress.value = scrollY.value / (parent.scrollHeight - parent.clientHeight);
   animation.value.cancel();
-  if (props.autoHide && root.value) {
+  if (autoHide && root.value) {
     animation.value = root.value.animate(
       { opacity: [1, 0] },
       {
diff --git a/assets/components/ScrollableView.vue b/assets/components/ScrollableView.vue
index 57703b3e..409d15b7 100644
--- a/assets/components/ScrollableView.vue
+++ b/assets/components/ScrollableView.vue
@@ -25,35 +25,28 @@
 </template>
 
 <script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    scrollable: boolean;
-  }>(),
-  {
-    scrollable: false,
-  }
-);
+const { scrollable = false } = defineProps<{ scrollable?: boolean }>();
 
-const paused = ref(false);
-const hasMore = ref(false);
-const loading = ref(false);
+let paused = $ref(false);
+let hasMore = $ref(false);
+let loading = $ref(false);
 const scrollObserver = ref<HTMLElement>();
 const scrollableContent = ref<HTMLElement>();
 
 provide("scrollingPaused", paused);
 
 const mutationObserver = new MutationObserver((e) => {
-  if (!paused.value) {
+  if (!paused) {
     scrollToBottom();
   } else {
     const record = e[e.length - 1];
     if (record.target.children[record.target.children.length - 1] == record.addedNodes[record.addedNodes.length - 1]) {
-      hasMore.value = true;
+      hasMore = true;
     }
   }
 });
 
-const intersectionObserver = new IntersectionObserver((entries) => (paused.value = entries[0].intersectionRatio == 0), {
+const intersectionObserver = new IntersectionObserver((entries) => (paused = entries[0].intersectionRatio == 0), {
   threshold: [0, 1],
   rootMargin: "80px 0px",
 });
@@ -65,11 +58,11 @@ onMounted(() => {
 
 function scrollToBottom(behavior: "auto" | "smooth" = "auto") {
   scrollObserver.value?.scrollIntoView({ behavior });
-  hasMore.value = false;
+  hasMore = false;
 }
 
 function setLoading(value: boolean) {
-  loading.value = value;
+  loading = value;
 }
 </script>
 <style scoped lang="scss">
diff --git a/assets/pages/container/[id].vue b/assets/pages/container/[id].vue
index 76d7000b..db389fb7 100644
--- a/assets/pages/container/[id].vue
+++ b/assets/pages/container/[id].vue
@@ -5,11 +5,9 @@
 
 <script lang="ts" setup>
 const store = useContainerStore();
-const props = defineProps<{ id: string }>();
+const { id } = defineProps<{ id: string }>();
 
-const { id } = toRefs(props);
-
-const currentContainer = store.currentContainer(id);
+const currentContainer = store.currentContainer($$(id));
 const { activeContainers } = storeToRefs(store);
 
 setTitle("loading");