diff --git a/src/components/LogOutput.vue b/src/components/LogOutput.vue
index f666c8e..5e73878 100644
--- a/src/components/LogOutput.vue
+++ b/src/components/LogOutput.vue
@@ -1,25 +1,94 @@
 <template>
-    <v-alert
-        border="start"
-        icon="mdi-information"
-        :title="title"
-        type="success"
-        class="log-output-container"
-    >
-        {{ log }}
-    </v-alert>
+    <v-card class="log-output-container mb-4">
+        <v-card-title>{{ `Capture Area ${captureAreaId}` }}</v-card-title>
+        <v-list lines="three" disabled class="reverse">
+            <v-list-item v-for="(item, i) in matchedElements" :key="i">
+                <template v-slot:prepend>
+                    <v-icon color="primary" icon="mdi-information"></v-icon>
+                </template>
+
+                <v-list-item-title> {{ item.timestamp }}</v-list-item-title>
+                <v-list-item-subtitle>
+                    <div>Element: {{ item.match.element }}</div>
+                    <div>Rating: {{ item.rating }}</div>
+                </v-list-item-subtitle>
+            </v-list-item>
+        </v-list>
+    </v-card>
 </template>
 
 <script setup lang="ts">
+import { ref, watch } from 'vue';
+import { Vigad } from '@/proc/Vigad';
+import { isRunning } from '@/composables/useRunning';
+
 const props = defineProps<{
-    title: string;
-    log: string;
+    captureAreaId: number;
 }>();
+
+/**
+ * Get singelton instance reference to vigad
+ */
+const vigad = ref(Vigad.getInstance());
+
+// local interface otherwise typescript is complaining
+interface MatchedElement {
+    match: {
+        index: number;
+        element: string;
+    };
+    rating: number;
+    timestamp?: string;
+}
+
+const matchedElements = ref<MatchedElement[]>([]);
+
+let timerId: string | number | NodeJS.Timeout | undefined;
+
+// watch for changes in isRunning and start/stop the timer
+watch(isRunning, (newValue) => {
+    if (newValue) {
+        matchedElements.value = [];
+        timerId = setTimeout(function tick() {
+            let newFoundMatch: MatchedElement = vigad.value
+                .getCaptureArea(props.captureAreaId)
+                .getRegexGroups()[0]
+                .getValueRegex()
+                .getLastBestMatch();
+            // add timestamp to the new value
+            let date = new Date();
+            let hours = date.getHours();
+            let minutes = '0' + date.getMinutes();
+            let seconds = '0' + date.getSeconds();
+            newFoundMatch.timestamp =
+                hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
+            // add new value to the array
+            matchedElements.value.push(newFoundMatch);
+            timerId = setTimeout(tick, 1000);
+        }, 1000);
+    } else {
+        clearTimeout(timerId);
+    }
+});
+
+function getCurrentTime() {
+    let date = new Date();
+    let hours = date.getHours();
+    let minutes = '0' + date.getMinutes();
+    let seconds = '0' + date.getSeconds();
+    let formattedTime =
+        hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
+    return formattedTime;
+}
 </script>
 
 <style lang="scss" scoped>
 .log-output-container {
-    max-height: 350px;
+    max-height: 400px;
     overflow-y: auto;
 }
+.reverse {
+    display: flex;
+    flex-direction: column-reverse;
+}
 </style>
diff --git a/src/components/capture-area/AfterConstraint.vue b/src/components/capture-area/AfterConstraint.vue
new file mode 100644
index 0000000..7e827f3
--- /dev/null
+++ b/src/components/capture-area/AfterConstraint.vue
@@ -0,0 +1,215 @@
+<template>
+    <v-text-field
+        v-model="afterValueConstraint"
+        label="After Constraint"
+        placeholder="Enter a constraint value"
+        variant="outlined"
+        hide-details="auto"
+    >
+        <template v-slot:prepend-inner>
+            <v-icon icon="mdi-table-column-plus-after"></v-icon>
+        </template>
+        <template v-slot:append-inner>
+            <v-fade-transition leave-absolute>
+                <v-progress-circular
+                    v-if="false"
+                    color="info"
+                    indeterminate
+                    size="24"
+                ></v-progress-circular>
+            </v-fade-transition>
+        </template>
+    </v-text-field>
+
+    <v-btn
+        @click="expand = !expand"
+        class="rounded"
+        size="x-small"
+        variant="text"
+    >
+        {{ !expand ? 'More Options' : 'Less Options' }}
+    </v-btn>
+
+    <v-expand-transition>
+        <div v-if="expand" class="pa-4">
+            <v-select
+                v-model="currentMatchingOption"
+                :items="matchingOptions"
+                label="Matching"
+                variant="underlined"
+            ></v-select>
+
+            <v-select
+                v-model="currentSlicingOption"
+                :items="slicingOptions"
+                label="Slicing"
+                variant="underlined"
+            ></v-select>
+
+            <v-select
+                v-model="currentSimilarityOption"
+                :items="similarityOptions"
+                label="Similarity"
+                variant="underlined"
+            ></v-select>
+
+            <v-text-field
+                v-if="currentMatchingOption === 'Approximate'"
+                v-model="currentNumberOfMatches"
+                label="Number of Matches"
+                placeholder="Enter a number"
+                variant="outlined"
+                :rules="[(v:number) => !!Number(v) || 'Please enter a number']"
+                hide-details="auto"
+            >
+                <template v-slot:prepend-inner>
+                    <v-icon icon="mdi-numeric"></v-icon>
+                </template>
+            </v-text-field>
+
+            <v-btn
+                @click="reset()"
+                class="rounded mt-2 mb-2"
+                size="small"
+                variant="text"
+                color="primary"
+                width="100%"
+            >
+                Reset options
+            </v-btn>
+            <v-divider></v-divider>
+        </div>
+    </v-expand-transition>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { Vigad } from '@/proc/Vigad';
+import { Matching } from '@/proc/regex/Regex';
+import { Slicing } from '@/proc/regex/Regex';
+import { Similarity } from '@/proc/regex/Regex';
+
+const props = defineProps<{
+    captureAreaId: number;
+}>();
+
+/**
+ * Get singelton instance reference to vigad
+ */
+const vigad = ref(Vigad.getInstance());
+
+const expand = ref(false);
+
+// Value Regex input
+const afterValueConstraint = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .getRegex()
+        .toString()
+        .slice(1, -1)
+);
+
+watch(afterValueConstraint, (newValue) => {
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .setRegex(newValue.toString());
+});
+
+// Matching options
+const currentMatchingOption = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .getMatching()
+);
+
+const matchingOptions = ref([Matching.APPROX, Matching.EXACT]);
+
+watch(currentMatchingOption, (newValue) => {
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .setMatching(newValue);
+});
+
+// Slicing options
+const currentSlicingOption = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .getSlicing()
+);
+
+const slicingOptions = ref([
+    Slicing.SUBSTR,
+    Slicing.SPACES,
+    Slicing.ENTIRE_STR,
+]);
+
+watch(currentSlicingOption, (newValue) => {
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .setSlicing(newValue);
+});
+
+// Similarity options
+const currentSimilarityOption = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .getSimilarity()
+);
+
+const similarityOptions = ref([
+    Similarity.NONE,
+    Similarity.NUM_LET,
+    Similarity.LET_NUM,
+]);
+
+watch(currentSimilarityOption, (newValue) => {
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .setSimilarity(newValue);
+});
+
+// Number of matches
+const currentNumberOfMatches = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .getMatchesNum()
+);
+
+watch(currentNumberOfMatches, (newValue) => {
+    if (!Number(newValue)) return;
+
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .setMatchesNum(newValue);
+});
+
+// Reset all options to default
+function reset() {
+    currentMatchingOption.value = Matching.APPROX;
+    currentSlicingOption.value = Slicing.SUBSTR;
+    currentSimilarityOption.value = Similarity.NONE;
+    currentNumberOfMatches.value = 10000;
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/capture-area/BeforeConstraint.vue b/src/components/capture-area/BeforeConstraint.vue
new file mode 100644
index 0000000..1886e0b
--- /dev/null
+++ b/src/components/capture-area/BeforeConstraint.vue
@@ -0,0 +1,215 @@
+<template>
+    <v-text-field
+        v-model="beforeValueConstraint"
+        label="Before Constraint"
+        placeholder="Enter a constraint value"
+        variant="outlined"
+        hide-details="auto"
+    >
+        <template v-slot:prepend-inner>
+            <v-icon icon="mdi-table-column-plus-before"></v-icon>
+        </template>
+        <template v-slot:append-inner>
+            <v-fade-transition leave-absolute>
+                <v-progress-circular
+                    v-if="false"
+                    color="info"
+                    indeterminate
+                    size="24"
+                ></v-progress-circular>
+            </v-fade-transition>
+        </template>
+    </v-text-field>
+
+    <v-btn
+        @click="expand = !expand"
+        class="rounded"
+        size="x-small"
+        variant="text"
+    >
+        {{ !expand ? 'More Options' : 'Less Options' }}
+    </v-btn>
+
+    <v-expand-transition>
+        <div v-if="expand" class="pa-4">
+            <v-select
+                v-model="currentMatchingOption"
+                :items="matchingOptions"
+                label="Matching"
+                variant="underlined"
+            ></v-select>
+
+            <v-select
+                v-model="currentSlicingOption"
+                :items="slicingOptions"
+                label="Slicing"
+                variant="underlined"
+            ></v-select>
+
+            <v-select
+                v-model="currentSimilarityOption"
+                :items="similarityOptions"
+                label="Similarity"
+                variant="underlined"
+            ></v-select>
+
+            <v-text-field
+                v-if="currentMatchingOption === 'Approximate'"
+                v-model="currentNumberOfMatches"
+                label="Number of Matches"
+                placeholder="Enter a number"
+                variant="outlined"
+                :rules="[(v:number) => !!Number(v) || 'Please enter a number']"
+                hide-details="auto"
+            >
+                <template v-slot:prepend-inner>
+                    <v-icon icon="mdi-numeric"></v-icon>
+                </template>
+            </v-text-field>
+
+            <v-btn
+                @click="reset()"
+                class="rounded mt-2 mb-2"
+                size="small"
+                variant="text"
+                color="primary"
+                width="100%"
+            >
+                Reset options
+            </v-btn>
+            <v-divider></v-divider>
+        </div>
+    </v-expand-transition>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { Vigad } from '@/proc/Vigad';
+import { Matching } from '@/proc/regex/Regex';
+import { Slicing } from '@/proc/regex/Regex';
+import { Similarity } from '@/proc/regex/Regex';
+
+const props = defineProps<{
+    captureAreaId: number;
+}>();
+
+/**
+ * Get singelton instance reference to vigad
+ */
+const vigad = ref(Vigad.getInstance());
+
+const expand = ref(false);
+
+// Value Regex input
+const beforeValueConstraint = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[0]
+        .getRegex()
+        .toString()
+        .slice(1, -1)
+);
+
+watch(beforeValueConstraint, (newValue) => {
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[0]
+        .setRegex(newValue.toString());
+});
+
+// Matching options
+const currentMatchingOption = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[0]
+        .getMatching()
+);
+
+const matchingOptions = ref([Matching.APPROX, Matching.EXACT]);
+
+watch(currentMatchingOption, (newValue) => {
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[0]
+        .setMatching(newValue);
+});
+
+// Slicing options
+const currentSlicingOption = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[0]
+        .getSlicing()
+);
+
+const slicingOptions = ref([
+    Slicing.SUBSTR,
+    Slicing.SPACES,
+    Slicing.ENTIRE_STR,
+]);
+
+watch(currentSlicingOption, (newValue) => {
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[0]
+        .setSlicing(newValue);
+});
+
+// Similarity options
+const currentSimilarityOption = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[0]
+        .getSimilarity()
+);
+
+const similarityOptions = ref([
+    Similarity.NONE,
+    Similarity.NUM_LET,
+    Similarity.LET_NUM,
+]);
+
+watch(currentSimilarityOption, (newValue) => {
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[0]
+        .setSimilarity(newValue);
+});
+
+// Number of matches
+const currentNumberOfMatches = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[0]
+        .getMatchesNum()
+);
+
+watch(currentNumberOfMatches, (newValue) => {
+    if (!Number(newValue)) return;
+
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[0]
+        .setMatchesNum(newValue);
+});
+
+// Reset all options to default
+function reset() {
+    currentMatchingOption.value = Matching.APPROX;
+    currentSlicingOption.value = Slicing.SUBSTR;
+    currentSimilarityOption.value = Similarity.NONE;
+    currentNumberOfMatches.value = 10000;
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/capture-area/CaptureAreaSearchValue.vue b/src/components/capture-area/CaptureAreaSearchValue.vue
index cd79a73..fe58b03 100644
--- a/src/components/capture-area/CaptureAreaSearchValue.vue
+++ b/src/components/capture-area/CaptureAreaSearchValue.vue
@@ -1,36 +1,15 @@
 <template>
     <div>
         <div class="pt-2 regex-definition">
-            <RegexInput
-                inputLabel="Search value"
-                inputPlaceholder="Enter search value"
-                prepend-icon="mdi-table-column"
-                matchingOption="Exact"
-                slicingOption="Substrings"
-                similarityOption="None"
-            />
+            <ValueRegex :captureAreaId="captureAreaId" />
         </div>
 
         <div class="mt-4 regex-constraint-before-definition">
-            <RegexInput
-                inputLabel="Before Constraint"
-                inputPlaceholder="Enter a constraint"
-                prepend-icon="mdi-table-column-plus-before"
-                matchingOption="Approximate"
-                slicingOption="Substrings"
-                similarityOption="None"
-            />
+            <BeforeConstraint :captureAreaId="captureAreaId" />
         </div>
 
         <div class="mt-4 regex-constraint-after-definition">
-            <RegexInput
-                inputLabel="After Constraint"
-                inputPlaceholder="Enter a constraint"
-                prepend-icon="mdi-table-column-plus-after"
-                matchingOption="Approximate"
-                slicingOption="Substrings"
-                similarityOption="None"
-            />
+            <AfterConstraint :captureAreaId="captureAreaId" />
         </div>
 
         <div class="mt-4 actions">
@@ -39,6 +18,7 @@
                 color="error"
                 prepend-icon="mdi-delete"
                 rounded="lg"
+                @click="vigad.deleteCaptureArea(captureAreaId)"
                 >Delete</v-btn
             >
         </div>
@@ -46,7 +26,20 @@
 </template>
 
 <script setup lang="ts">
-import RegexInput from './RegexInput.vue';
+import { ref } from 'vue';
+import { Vigad } from '@/proc/Vigad';
+import ValueRegex from './ValueRegex.vue';
+import BeforeConstraint from './BeforeConstraint.vue';
+import AfterConstraint from './AfterConstraint.vue';
+
+const props = defineProps<{
+    captureAreaId: number;
+}>();
+
+/**
+ * Get singelton instance reference to vigad
+ */
+const vigad = ref(Vigad.getInstance());
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/capture-area/RegexInput.vue b/src/components/capture-area/RegexInput.vue
deleted file mode 100644
index 3d96178..0000000
--- a/src/components/capture-area/RegexInput.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<template>
-    <v-text-field
-        :label="inputLabel"
-        :placeholder="inputPlaceholder"
-        variant="outlined"
-        clear-icon="mdi-close-circle"
-        :rules="[(v:string) => !!v || 'Regular expression is required']"
-        hide-details="auto"
-    >
-        <template v-slot:prepend-inner>
-            <v-icon :icon="prependIcon"></v-icon>
-        </template>
-        <template v-slot:append-inner>
-            <v-fade-transition leave-absolute>
-                <v-progress-circular
-                    v-if="false"
-                    color="info"
-                    indeterminate
-                    size="24"
-                ></v-progress-circular>
-            </v-fade-transition>
-        </template>
-    </v-text-field>
-
-    <v-btn
-        @click="expand = !expand"
-        class="rounded"
-        size="x-small"
-        variant="text"
-    >
-        {{ !expand ? 'More Options' : 'Less Options' }}
-    </v-btn>
-
-    <v-expand-transition>
-        <div v-if="expand" class="pa-4">
-            <v-combobox
-                v-model="currentMatchingOption"
-                label="Matching"
-                :items="matchingOptions"
-                variant="underlined"
-            ></v-combobox>
-
-            <v-combobox
-                v-model="currentSlicingOption"
-                label="Slicing"
-                :items="slicingOptions"
-                variant="underlined"
-            ></v-combobox>
-
-            <v-combobox
-                v-model="currentSimilarityOption"
-                label="Similarity"
-                :items="similarityOptions"
-                variant="underlined"
-            ></v-combobox>
-
-            <v-text-field
-                v-if="currentMatchingOption === 'Approximate'"
-                v-model="currentNumberOfMatches"
-                label="Number of Matches"
-                placeholder="Enter a number"
-                variant="outlined"
-                clear-icon="mdi-close-circle"
-                :rules="[(v:number) => !!v || 'Please enter a number']"
-                hide-details="auto"
-            >
-                <template v-slot:prepend-inner>
-                    <v-icon icon="mdi-numeric"></v-icon>
-                </template>
-            </v-text-field>
-
-            <v-btn
-                @click="reset()"
-                class="rounded mt-2 mb-2"
-                size="small"
-                variant="text"
-                color="primary"
-                width="100%"
-            >
-                Reset options
-            </v-btn>
-            <v-divider></v-divider>
-        </div>
-    </v-expand-transition>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-// Later on we will use proper enums for these options
-const props = defineProps<{
-    inputLabel: string;
-    inputPlaceholder: string;
-    prependIcon: string;
-    matchingOption: string;
-    slicingOption: string;
-    similarityOption: string;
-}>();
-
-const expand = ref(false);
-
-const defaultMatchingOption = ref(props.matchingOption);
-const currentMatchingOption = ref(defaultMatchingOption.value);
-const matchingOptions = ref(['Approximate', 'Exact']);
-
-const defaultSlicingOptions = ref(props.slicingOption);
-const currentSlicingOption = ref(defaultSlicingOptions.value);
-const slicingOptions = ref(['Substrings', 'Spaces', 'Entire string']);
-
-const defaultSimilarityOptions = ref(props.similarityOption);
-const currentSimilarityOption = ref(defaultSimilarityOptions.value);
-const similarityOptions = ref(['None', 'Number to Letter', 'Letter to Number']);
-
-const defaultNumberOfMatches = ref(10000);
-const currentNumberOfMatches = ref(defaultNumberOfMatches.value);
-
-function reset() {
-    currentMatchingOption.value = defaultMatchingOption.value;
-    currentSlicingOption.value = defaultSlicingOptions.value;
-    currentSimilarityOption.value = defaultSimilarityOptions.value;
-    currentNumberOfMatches.value = defaultNumberOfMatches.value;
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/components/capture-area/ValueRegex.vue b/src/components/capture-area/ValueRegex.vue
new file mode 100644
index 0000000..3b89cae
--- /dev/null
+++ b/src/components/capture-area/ValueRegex.vue
@@ -0,0 +1,215 @@
+<template>
+    <v-text-field
+        v-model="valueRegex"
+        label="Search value"
+        placeholder="Enter search value"
+        variant="outlined"
+        hide-details="auto"
+    >
+        <template v-slot:prepend-inner>
+            <v-icon icon="mdi-table-column"></v-icon>
+        </template>
+        <template v-slot:append-inner>
+            <v-fade-transition leave-absolute>
+                <v-progress-circular
+                    v-if="false"
+                    color="info"
+                    indeterminate
+                    size="24"
+                ></v-progress-circular>
+            </v-fade-transition>
+        </template>
+    </v-text-field>
+
+    <v-btn
+        @click="expand = !expand"
+        class="rounded"
+        size="x-small"
+        variant="text"
+    >
+        {{ !expand ? 'More Options' : 'Less Options' }}
+    </v-btn>
+
+    <v-expand-transition>
+        <div v-if="expand" class="pa-4">
+            <v-select
+                v-model="currentMatchingOption"
+                :items="matchingOptions"
+                label="Matching"
+                variant="underlined"
+            ></v-select>
+
+            <v-select
+                v-model="currentSlicingOption"
+                :items="slicingOptions"
+                label="Slicing"
+                variant="underlined"
+            ></v-select>
+
+            <v-select
+                v-model="currentSimilarityOption"
+                :items="similarityOptions"
+                label="Similarity"
+                variant="underlined"
+            ></v-select>
+
+            <v-text-field
+                v-if="currentMatchingOption === 'Approximate'"
+                v-model="currentNumberOfMatches"
+                label="Number of Matches"
+                placeholder="Enter a number"
+                variant="outlined"
+                :rules="[(v:number) => !!Number(v) || 'Please enter a number']"
+                hide-details="auto"
+            >
+                <template v-slot:prepend-inner>
+                    <v-icon icon="mdi-numeric"></v-icon>
+                </template>
+            </v-text-field>
+
+            <v-btn
+                @click="reset()"
+                class="rounded mt-2 mb-2"
+                size="small"
+                variant="text"
+                color="primary"
+                width="100%"
+            >
+                Reset options
+            </v-btn>
+            <v-divider></v-divider>
+        </div>
+    </v-expand-transition>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { Vigad } from '@/proc/Vigad';
+import { Matching } from '@/proc/regex/Regex';
+import { Slicing } from '@/proc/regex/Regex';
+import { Similarity } from '@/proc/regex/Regex';
+
+const props = defineProps<{
+    captureAreaId: number;
+}>();
+
+/**
+ * Get singelton instance reference to vigad
+ */
+const vigad = ref(Vigad.getInstance());
+
+const expand = ref(false);
+
+// Value Regex input
+const valueRegex = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getValueRegex()
+        .getRegex()
+        .toString()
+        .slice(1, -1)
+);
+
+watch(valueRegex, (newValue) => {
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getValueRegex()
+        .setRegex(newValue.toString());
+});
+
+// Matching options
+const currentMatchingOption = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getValueRegex()
+        .getMatching()
+);
+
+const matchingOptions = ref([Matching.APPROX, Matching.EXACT]);
+
+watch(currentMatchingOption, (newValue) => {
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getValueRegex()
+        .setMatching(newValue);
+});
+
+// Slicing options
+const currentSlicingOption = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getValueRegex()
+        .getSlicing()
+);
+
+const slicingOptions = ref([
+    Slicing.SUBSTR,
+    Slicing.SPACES,
+    Slicing.ENTIRE_STR,
+]);
+
+watch(currentSlicingOption, (newValue) => {
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getValueRegex()
+        .setSlicing(newValue);
+});
+
+// Similarity options
+const currentSimilarityOption = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getValueRegex()
+        .getSimilarity()
+);
+
+const similarityOptions = ref([
+    Similarity.NONE,
+    Similarity.NUM_LET,
+    Similarity.LET_NUM,
+]);
+
+watch(currentSimilarityOption, (newValue) => {
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getValueRegex()
+        .setSimilarity(newValue);
+});
+
+// Number of matches
+const currentNumberOfMatches = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getValueRegex()
+        .getMatchesNum()
+);
+
+watch(currentNumberOfMatches, (newValue) => {
+    if (!Number(newValue)) return;
+
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getValueRegex()
+        .setMatchesNum(newValue);
+});
+
+// Reset all options to default
+function reset() {
+    currentMatchingOption.value = Matching.EXACT;
+    currentSlicingOption.value = Slicing.SUBSTR;
+    currentSimilarityOption.value = Similarity.NONE;
+    currentNumberOfMatches.value = 10000;
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/proc/TesseractHandler.ts b/src/proc/TesseractHandler.ts
index 37fbdc6..1c0faec 100644
--- a/src/proc/TesseractHandler.ts
+++ b/src/proc/TesseractHandler.ts
@@ -52,12 +52,12 @@ export class TesseractHandler {
      * @return void
      */
     public async addWorker(): Promise<void> {
-        const worker = createWorker({cachePath: "."});
+        const worker = createWorker({ cachePath: '.' });
         await worker.load();
         await worker.loadLanguage('eng');
         await worker.initialize('eng');
         this.worker.push(worker);
-        console.log("added tesseract worker");
+        console.log('added tesseract worker');
     }
 
     /**
@@ -73,7 +73,12 @@ export class TesseractHandler {
      * @param stream: MediaStream
      * @return Promise<void>
      */
-    public async run(stream:MediaStream, callback:Function, previewWidth: number, previewHeight: number): Promise<void> {
+    public async run(
+        stream: MediaStream,
+        callback: Function,
+        previewWidth: number,
+        previewHeight: number
+    ): Promise<void> {
         if (!this.running) {
             this.running = true;
             await new Promise(async () => {
@@ -92,28 +97,49 @@ export class TesseractHandler {
                     const canvas = document.createElement('canvas');
                     canvas.height = video.videoHeight;
                     canvas.width = video.videoWidth;
-                    canvas.getContext('2d')!.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+                    canvas
+                        .getContext('2d')!
+                        .drawImage(
+                            video,
+                            0,
+                            0,
+                            video.videoWidth,
+                            video.videoHeight
+                        );
                     const img = canvas.toDataURL('image/png');
                     video.pause();
 
                     // create rectangles from capture areas
                     const rectangles = this.enabledCaptureAreas.map((ca) => {
-                        let streamScales = ca.getStreamScales(stream, previewWidth, previewHeight);
+                        let streamScales = ca.getStreamScales(
+                            stream,
+                            previewWidth,
+                            previewHeight
+                        );
                         return {
                             id: ca.getId(),
                             left: streamScales.left,
                             top: streamScales.top,
                             width: streamScales.width,
-                            height: streamScales.height
+                            height: streamScales.height,
                         };
                     });
 
                     // run tesseract
                     (async () => {
-                        const results: {ca_id: number, data: string}[] = [];
-                        await Promise.all(rectangles.map((rectangle) => (
-                            scheduler.addJob('recognize', img, {rectangle}).then((x) => results.push({ca_id: rectangle.id, data: x.data.text}))
-                        )));
+                        const results: { ca_id: number; data: string }[] = [];
+                        await Promise.all(
+                            rectangles.map((rectangle) =>
+                                scheduler
+                                    .addJob('recognize', img, { rectangle })
+                                    .then((x) =>
+                                        results.push({
+                                            ca_id: rectangle.id,
+                                            data: x.data.text,
+                                        })
+                                    )
+                            )
+                        );
                         callback(results);
                         this.running = false;
                     })();
@@ -121,4 +147,4 @@ export class TesseractHandler {
             });
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/proc/regex/Regex.ts b/src/proc/regex/Regex.ts
index 1a7353c..1648afe 100644
--- a/src/proc/regex/Regex.ts
+++ b/src/proc/regex/Regex.ts
@@ -1,5 +1,5 @@
-import RandExp from "randexp";
-import { RegexHandler } from "./RegexHandler";
+import RandExp from 'randexp';
+import { RegexHandler } from './RegexHandler';
 
 export abstract class Regex {
     protected id: number;
@@ -8,18 +8,21 @@ export abstract class Regex {
     protected slicing: Slicing;
     protected similarity: Similarity;
     protected matchesNum: number;
-    protected substrings: {index: number, element: string}[];
-    protected lastBestMatch: {rating: number, match: {index: number, element: string}};
+    protected substrings: { index: number; element: string }[];
+    protected lastBestMatch: {
+        rating: number;
+        match: { index: number; element: string };
+    };
 
-    protected constructor () {
+    protected constructor() {
         this.id = 0;
-        this.regex = new RegExp("");
+        this.regex = new RegExp('');
         this.matching = Matching.EXACT;
         this.slicing = Slicing.SUBSTR;
         this.similarity = Similarity.NONE;
         this.matchesNum = 10000;
         this.substrings = [];
-        this.lastBestMatch = {rating: -1, match: {index: -1, element: ""}}
+        this.lastBestMatch = { rating: -1, match: { index: -1, element: '' } };
     }
 
     public getId(): number {
@@ -66,15 +69,18 @@ export abstract class Regex {
         this.matchesNum = matchesNum;
     }
 
-    public getSubstrings(): {index: number, element: string}[] {
+    public getSubstrings(): { index: number; element: string }[] {
         return this.substrings;
     }
 
-    public setSubstrings(substrings: {index: number, element: string}[]) {
+    public setSubstrings(substrings: { index: number; element: string }[]) {
         this.substrings = substrings;
     }
 
-    public getLastBestMatch(): {rating: number, match: {index: number, element: string}} {
+    public getLastBestMatch(): {
+        rating: number;
+        match: { index: number; element: string };
+    } {
         return this.lastBestMatch;
     }
 
@@ -83,18 +89,21 @@ export abstract class Regex {
      * @param data
      * @return void
      */
-    public genSubstrings(data:string) {
+    public genSubstrings(data: string) {
         switch (this.slicing) {
             case Slicing.SUBSTR:
                 this.substrings = this.getAllSubstrings(data!);
                 break;
             case Slicing.SPACES:
-                data.split(" ").forEach(element => {
-                    this.substrings.push({index: this.indexOfFirst(data), element: element});
+                data.split(' ').forEach((element) => {
+                    this.substrings.push({
+                        index: this.indexOfFirst(data),
+                        element: element,
+                    });
                 });
                 break;
             case Slicing.ENTIRE_STR:
-                this.substrings.push({index: 0, element: data});
+                this.substrings.push({ index: 0, element: data });
                 break;
         }
     }
@@ -103,12 +112,18 @@ export abstract class Regex {
         switch (this.similarity) {
             case Similarity.NUM_LET:
                 this.substrings.forEach((element, index) => {
-                    this.substrings[index] = {index: element.index, element: this.repSimNumLet(element.element)};
+                    this.substrings[index] = {
+                        index: element.index,
+                        element: this.repSimNumLet(element.element),
+                    };
                 });
                 break;
             case Similarity.LET_NUM:
                 this.substrings.forEach((element, index) => {
-                    this.substrings[index] = {index: element.index, element: this.repSimLetNum(element.element)};
+                    this.substrings[index] = {
+                        index: element.index,
+                        element: this.repSimLetNum(element.element),
+                    };
                 });
                 break;
         }
@@ -119,7 +134,7 @@ export abstract class Regex {
      * @param max: number
      * @return string[]
      */
-    public genMatches(max:number = this.matchesNum) {
+    public genMatches(max: number = this.matchesNum) {
         let regLev0: string[] = [];
         let randexp = new RandExp(this.regex);
         for (let i = 0; i < max; i++) {
@@ -130,7 +145,6 @@ export abstract class Regex {
                 // i--; May be a good performance optimization, doesn't work however if max is greater than the number of possible matches
             }
         }
-        console.log("generated matches for regex: " + this.id);
         return regLev0;
     }
 
@@ -139,12 +153,14 @@ export abstract class Regex {
      * @param str: string
      * @return {index: number, element: string}[]
      */
-    private getAllSubstrings(str:string): {index: number, element: string}[] {
+    private getAllSubstrings(
+        str: string
+    ): { index: number; element: string }[] {
         var i, j, result = [];
 
         for (i = 0; i < str.length; i++) {
             for (j = i + 1; j < str.length + 1; j++) {
-                result.push({index: i, element: str.slice(i, j)});
+                result.push({ index: i, element: str.slice(i, j) });
             }
         }
         return result;
@@ -155,19 +171,34 @@ export abstract class Regex {
      * @param data: string
      * @return {rating: number, match: {index: number, element: string}}
      */
-    public getBestMatch(data: string): {rating: number, match: {index: number, element: string}} {
-        let bestMatch = {rating: -1, match: {index: -1, element: ""}};
+    public getBestMatch(data: string): {
+        rating: number;
+        match: { index: number; element: string };
+    } {
+        let bestMatch = { rating: -1, match: { index: -1, element: '' } };
         switch (this.matching) {
             case Matching.EXACT:
-                this.substrings.every(element => {
+                this.substrings.every((element) => {
                     let exactMatch = element.element.match(this.regex);
-                    if (exactMatch !== null && bestMatch.match.element.length < exactMatch[0].length) {
-                        bestMatch = {rating: 1, match: {index: this.indexOfFirst(data), element: exactMatch[0]}};
+                    if (
+                        exactMatch !== null &&
+                        bestMatch.match.element.length < exactMatch[0].length
+                    ) {
+                        bestMatch = {
+                            rating: 1,
+                            match: {
+                                index: this.indexOfFirst(data),
+                                element: exactMatch[0],
+                            },
+                        };
                     }
                 });
                 break;
             case Matching.APPROX:
-                bestMatch = RegexHandler.approxMatching(this.substrings, this.genMatches());
+                bestMatch = RegexHandler.approxMatching(
+                    this.substrings,
+                    this.genMatches()
+                );
                 break;
         }
         this.lastBestMatch = bestMatch;
@@ -179,7 +210,7 @@ export abstract class Regex {
      * @param str: string
      * @return string
      */
-    private repSimNumLet(str:string):string {
+    private repSimNumLet(str: string): string {
         for (let i = 0; i < str.length; i++) {
             switch (str.charAt(i)) {
                 case '0':
@@ -218,7 +249,7 @@ export abstract class Regex {
      * @param str: string
      * @return string
      */
-    private repSimLetNum(str:string):string {
+    private repSimLetNum(str: string): string {
         for (let i = 0; i < str.length; i++) {
             switch (str.charAt(i)) {
                 case 'o':
@@ -292,7 +323,7 @@ export abstract class Regex {
      * @param replacement: string
      * @return string
      */
-    private replaceCharAt(str:string, index:number, replacement:string) {
+    private replaceCharAt(str: string, index: number, replacement: string) {
         return str.substring(0, index) + replacement + str.substring(index + 1);
     }
 
@@ -303,7 +334,7 @@ export abstract class Regex {
      * @param before: boolean
      * @return number
      */
-    private indexOfFirst(data:string, before:boolean = false):number {
+    private indexOfFirst(data: string, before: boolean = false): number {
         let match = data.match(this.regex);
         if (!match) {
             return -1;
@@ -317,18 +348,18 @@ export abstract class Regex {
 }
 
 export enum Matching {
-    EXACT = "Exact",
-    APPROX = "Approximate"
+    EXACT = 'Exact',
+    APPROX = 'Approximate',
 }
 
 export enum Slicing {
-    SUBSTR = "Substring",
-    SPACES = "Spaces",
-    ENTIRE_STR = "Entire String"
+    SUBSTR = 'Substring',
+    SPACES = 'Spaces',
+    ENTIRE_STR = 'Entire String',
 }
 
 export enum Similarity {
-    NONE = "None",
-    NUM_LET = "Numbers To Letters",
-    LET_NUM = "Letters To Numbers"
-}
\ No newline at end of file
+    NONE = 'None',
+    NUM_LET = 'Numbers To Letters',
+    LET_NUM = 'Letters To Numbers',
+}
diff --git a/src/views/RegexView.vue b/src/views/RegexView.vue
index 3b67254..fb88ce3 100644
--- a/src/views/RegexView.vue
+++ b/src/views/RegexView.vue
@@ -24,7 +24,9 @@
                         {{ captureArea.getId() }}
                     </v-expansion-panel-title>
                     <v-expansion-panel-text>
-                        <CaptureAreaSearchValue />
+                        <CaptureAreaSearchValue
+                            :capture-area-id="captureArea.getId()"
+                        />
                     </v-expansion-panel-text>
                 </v-expansion-panel>
             </v-expansion-panels>
diff --git a/src/views/RunPage.vue b/src/views/RunPage.vue
index abe9f67..13109e1 100644
--- a/src/views/RunPage.vue
+++ b/src/views/RunPage.vue
@@ -20,17 +20,30 @@
         </template>
         <template v-slot:default>
             <LogOutput
-                title="Capture Area 1"
-                log="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+                v-for="captureArea in captureAreas"
+                :key="captureArea.getId()"
+                :captureAreaId="captureArea.getId()"
             />
         </template>
     </ViewComponent>
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref } from 'vue';
 import ViewComponent from '@/components/ViewComponent.vue';
 import { useRunning, isRunning } from '@/composables/useRunning';
 import LogOutput from '@/components/LogOutput.vue';
+import { Vigad } from '@/proc/Vigad';
+
+/**
+ * Get singelton instance reference to vigad
+ */
+const vigad = ref(Vigad.getInstance());
+
+/**
+ * Get a reactive reference to all of the capture areas
+ */
+const captureAreas = ref(vigad.value.getAllCaptureAreas());
 </script>
 
 <style lang="scss" scoped></style>