diff --git a/src/runtime/components/BitinflowInput.vue b/src/runtime/components/BitinflowInput.vue
new file mode 100644
index 0000000..68d7f0d
--- /dev/null
+++ b/src/runtime/components/BitinflowInput.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <div class="opacity-80 mb-1">
+      {{ label }}
+    </div>
+    <input
+      class="block w-full text-black dark:text-white border-2 border-zinc-200 dark:border-base-500 dark:border-base-500 focus:outline-none dark:bg-base-700 dark:text-white rounded-lg px-4 py-2"
+      :type="type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      @change="change"
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BitinflowInput",
+
+  props: {
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'text'
+    }
+  },
+
+  emits: ['update:modelValue'],
+
+  methods: {
+    change(e) {
+      this.$emit('update:modelValue', e.target.value);
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/runtime/components/BitinflowMuted.vue b/src/runtime/components/BitinflowMuted.vue
new file mode 100644
index 0000000..6818399
--- /dev/null
+++ b/src/runtime/components/BitinflowMuted.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="text-black dark:text-white opacity-50 text-sm">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BitinflowMuted"
+}
+</script>