diff --git a/src/plugins/condition/components/ConditionEdit.vue b/src/plugins/condition/components/ConditionEdit.vue
index 8b1276e458..eedcf6c032 100644
--- a/src/plugins/condition/components/ConditionEdit.vue
+++ b/src/plugins/condition/components/ConditionEdit.vue
@@ -34,7 +34,7 @@
             <div class="c-sw-rule">
                 <div class="c-sw-rule__ui l-compact-form l-widget-rule has-local-controls">
                     <div>
-                        <ul>
+                        <ul class="t-widget-rule-config">
                             <li>
                                 <label>Condition Name</label>
                                 <span class="controls">
@@ -44,45 +44,82 @@
                                     >
                                 </span>
                             </li>
-                            <li v-if="telemetryObject && telemetryMetadata">
-                                <label>when</label>
-                                <span class="controls">
-                                    <select class="">
-                                        <option :value="telemetryObject.key">{{ telemetryObject.name }}</option>
-                                    </select>
-                                </span>
-                                <span class="controls">
-                                    <select v-model="selectedMetaDataKey">
-                                        <option v-for="option in telemetryMetadata"
-                                                :key="option.key"
-                                                :value="option.key"
-                                        >
-                                            {{ option.name }}
-                                        </option>
-                                    </select>
-                                </span>
-
-                                <span class="controls">
-                                    <select v-model="selectedOperationKey">
-                                        <option v-for="option in operations"
-                                                :key="option.name"
-                                                :value="option.name"
-                                        >
-                                            {{ option.text }}
-                                        </option>
-                                    </select>
-                                </span>
-                            </li>
                             <li>
                                 <label>Output</label>
                                 <span class="controls">
-                                    <select v-model="condition.output">
-                                        <option value="false">false</option>
-                                        <option value="true">true</option>
+                                    <select ref="outputSelect"
+                                            @change="getOutputBinary">
+                                        <option value="false">False</option>
+                                        <option value="true">True</option>
+                                        <option value="string">String</option>
                                     </select>
+                                    <input v-if="stringOutputField"
+                                           ref="outputString"
+                                           class="t-rule-name-input"
+                                           type="text"
+                                           :value="condition.output"
+                                           @keyup="getOutputString"
+                                    >
                                 </span>
                             </li>
                         </ul>
+                        <div v-if="!condition.isDefault"
+                             class="widget-rule-content expanded"
+                        >
+                            <ul class="t-widget-rule-config">
+                                <li class="has-local-controls t-condition">
+                                    <label>Match when</label>
+                                    <span class="controls">
+                                        <select>
+                                            <option value="all">all criteria are met</option>
+                                            <option value="any">any criteria are met</option>
+                                        </select>
+                                    </span>
+                                </li>
+                            </ul>
+                            <ul class="t-widget-rule-config">
+                                <li v-if="telemetryObject && telemetryMetadata"
+                                    class="has-local-controls t-condition"
+                                >
+                                    <label>when</label>
+                                    <span class="t-configuration">
+                                        <span class="controls">
+                                            <select class="">
+                                                <option value="">- Select Telemetry -</option>
+                                                <option :value="telemetryObject.key">{{ telemetryObject.name }}</option>
+                                            </select>
+                                        </span>
+                                        <span class="controls">
+                                            <select v-model="selectedMetaDataKey">
+                                                <option value="">- Select Field -</option>
+                                                <option v-for="option in telemetryMetadata"
+                                                        :key="option.key"
+                                                        :value="option.key"
+                                                >
+                                                    {{ option.name }}
+                                                </option>
+                                            </select>
+                                        </span>
+                                        <span class="controls">
+                                            <select @change="getOperationKey">
+                                                <option value="">- Select Comparison -</option>
+                                                <option v-for="option in operations"
+                                                        :key="option.name"
+                                                        :value="option.name"
+                                                >
+                                                    {{ option.text }}
+                                                </option>
+                                            </select>
+                                            <input v-if="comparisonValueField"
+                                                   class="t-rule-name-input"
+                                                   type="text"
+                                                   @keyup="getOperationValue"
+                                            >
+                                        </span>
+                                    </span>
+                                </li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -112,16 +149,21 @@ export default {
             telemetryMetadata: this.telemetryMetadata,
             operations: OPERATIONS,
             selectedMetaDataKey: null,
-            selectedOperationKey: null
+            selectedOperationKey: null,
+            stringOutputField: false,
+            comparisonValueField: false
         };
     },
     mounted() {
+        if (this.condition.output !== 'false' && this.condition.output !== 'true') {
+            this.$refs.outputSelect.value = 'string';
+            this.stringOutputField = true;
+        }
         this.updateTelemetry();
     },
     updated() {
-        console.log('updated conditionEdit');
         this.updateCurrentCondition();
-        this.persist()
+        this.persist();
     },
     methods: {
         removeCondition(ev) {
@@ -162,6 +204,29 @@ export default {
             } else {
                 this.conditionCollection[0].isCurrent = true;
             }
+        },
+        getOutputBinary(ev) {
+            if (ev.target.value !== 'string') {
+                this.condition.output = ev.target.value;
+                this.stringOutputField = false;
+            } else {
+                this.stringOutputField = true;
+            }
+        },
+        getOutputString(ev) {
+            this.condition.output = ev.target.value;
+        },
+        getOperationKey(ev) {
+            console.log(ev.target.value)
+            if (ev.target.value !== 'isUndefined' && ev.target.value !== 'isDefined') {
+                this.comparisonValueField = true;
+            } else {
+                this.comparisonValueField = false;
+            }
+            this.selectedOperationKey = ev.target.value;
+        },
+        getOperationValue(ev) {
+            this.selectedOperationKey = ev.target.value;
         }
     }
 }
diff --git a/src/plugins/condition/components/condition.scss b/src/plugins/condition/components/condition.scss
index 46b128b878..160ab59286 100644
--- a/src/plugins/condition/components/condition.scss
+++ b/src/plugins/condition/components/condition.scss
@@ -57,27 +57,29 @@
     padding: 0;
 }
 
+.l-compact-form ul li {
+    padding: 0;
+}
+
 .widget-rule-content.expanded {
     margin: 0 3px;
 }
 
 .widget-rule-content.expanded ul {
     border-top: solid 1px #ccc;
-    padding: 5px;
-}
-
-.l-compact-form ul li {
-    padding: 1px 0;
+    padding: 2px;
 }
 
 .l-compact-form ul li .controls {
-    line-height: 20px;
-    min-height: 20px;
+    display: inline-flex;
+    flex-grow: inherit;
+    padding: 2px 0;
 }
 
 .l-compact-form ul li > label {
     display: block;
     width: 90px;
+    min-width: 90px;
     text-align: right;
     line-height: 20px;
 }