diff --git a/histoire.config.ts b/histoire.config.ts
index bde6549..4a7e5b7 100644
--- a/histoire.config.ts
+++ b/histoire.config.ts
@@ -2,8 +2,15 @@ import { defineConfig } from 'histoire'
 import { HstVue } from '@histoire/plugin-vue'
 
 export default defineConfig({
-  plugins: [
-    HstVue(),
-  ],
+  plugins: [HstVue()],
   setupFile: 'src/histoire-setup.ts',
+  theme: {
+    title: 'Bootsman-ui',
+    logo: {
+      square: './src/assets/logo.png',
+      light: './src/assets/logo-full.png',
+      dark: './src/assets/logo-full-dark.png'
+    },
+    logoHref: 'https://github.com/soft-stech/bootsman-ui'
+  }
 })
diff --git a/package-lock.json b/package-lock.json
index df84d5c..532bb19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "@soft-stech/bootsman-ui",
       "version": "0.0.1",
       "dependencies": {
+        "@fontsource-variable/inter": "^5.0.15",
+        "@vueuse/core": "^10.5.0",
         "tailwind-merge": "^1.14.0",
         "vue-demi": "^0.14.6"
       },
@@ -20,7 +22,6 @@
         "@types/node": "^18.18.5",
         "@vitejs/plugin-vue": "^4.4.0",
         "@vitest/coverage-istanbul": "^0.34.6",
-        "@vitest/coverage-v8": "^0.34.6",
         "@vue/eslint-config-prettier": "^8.0.0",
         "@vue/eslint-config-typescript": "^12.0.0",
         "@vue/test-utils": "^2.4.1",
@@ -565,12 +566,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@bcoe/v8-coverage": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
-      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
-      "dev": true
-    },
     "node_modules/@codemirror/commands": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.3.0.tgz",
@@ -1055,6 +1050,11 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fontsource-variable/inter": {
+      "version": "5.0.15",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.0.15.tgz",
+      "integrity": "sha512-CdQPQQgOVxg6ifmbrqYZeUqtQf7p2wPn6EvJ4M+vdNnsmYZgYwPPPQDNlIOU7LCUlSGaN26v6H0uA030WKn61g=="
+    },
     "node_modules/@histoire/app": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/@histoire/app/-/app-0.17.0.tgz",
@@ -1445,12 +1445,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/istanbul-lib-coverage": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz",
-      "integrity": "sha512-zONci81DZYCZjiLe0r6equvZut0b+dBRPBN5kBDjsONnutYNtJMoWQ9uR2RkL1gLG9NMTzvf+29e5RFfPbeKhQ==",
-      "dev": true
-    },
     "node_modules/@types/jsdom": {
       "version": "21.1.4",
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.4.tgz",
@@ -1514,6 +1508,11 @@
       "integrity": "sha512-95Sfz4nvMAb0Nl9DTxN3j64adfwfbBPEYq14VN7zT5J5O2M9V6iZMIIQU1U+pJyl9agHYHNCqhCXgyEtIRRa5A==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz",
+      "integrity": "sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw=="
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "6.9.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.9.0.tgz",
@@ -1743,31 +1742,6 @@
         "vitest": ">=0.32.0 <1"
       }
     },
-    "node_modules/@vitest/coverage-v8": {
-      "version": "0.34.6",
-      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-0.34.6.tgz",
-      "integrity": "sha512-fivy/OK2d/EsJFoEoxHFEnNGTg+MmdZBAVK9Ka4qhXR2K3J0DS08vcGVwzDtXSuUMabLv4KtPcpSKkcMXFDViw==",
-      "dev": true,
-      "dependencies": {
-        "@ampproject/remapping": "^2.2.1",
-        "@bcoe/v8-coverage": "^0.2.3",
-        "istanbul-lib-coverage": "^3.2.0",
-        "istanbul-lib-report": "^3.0.1",
-        "istanbul-lib-source-maps": "^4.0.1",
-        "istanbul-reports": "^3.1.5",
-        "magic-string": "^0.30.1",
-        "picocolors": "^1.0.0",
-        "std-env": "^3.3.3",
-        "test-exclude": "^6.0.0",
-        "v8-to-istanbul": "^9.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      },
-      "peerDependencies": {
-        "vitest": ">=0.32.0 <1"
-      }
-    },
     "node_modules/@vitest/expect": {
       "version": "0.34.6",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.34.6.tgz",
@@ -2113,6 +2087,39 @@
         "@vue/language-core": "1.8.20"
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.5.0.tgz",
+      "integrity": "sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.18",
+        "@vueuse/metadata": "10.5.0",
+        "@vueuse/shared": "10.5.0",
+        "vue-demi": ">=0.14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.5.0.tgz",
+      "integrity": "sha512-fEbElR+MaIYyCkeM0SzWkdoMtOpIwO72x8WsZHRE7IggiOlILttqttM69AS13nrDxosnDBYdyy3C5mR1LCxHsw==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.5.0.tgz",
+      "integrity": "sha512-18iyxbbHYLst9MqU1X1QNdMHIjks6wC7XTVf0KNOv5es/Ms6gjVFCAAWTVP2JStuGqydg3DT+ExpFORUEi9yhg==",
+      "dependencies": {
+        "vue-demi": ">=0.14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -6766,20 +6773,6 @@
         "node": ">= 0.4.0"
       }
     },
-    "node_modules/v8-to-istanbul": {
-      "version": "9.1.3",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.1.3.tgz",
-      "integrity": "sha512-9lDD+EVI2fjFsMWXc6dy5JJzBsVTcQ2fVkfBvncZ6xJWG9wtBhOldG+mHkSL0+V1K/xgZz0JDO5UT5hFwHUghg==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.12",
-        "@types/istanbul-lib-coverage": "^2.0.1",
-        "convert-source-map": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10.12.0"
-      }
-    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
diff --git a/package.json b/package.json
index 9ebd5c4..83edd59 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,8 @@
     "story:preview": "histoire preview"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.0.15",
+    "@vueuse/core": "^10.5.0",
     "tailwind-merge": "^1.14.0",
     "vue-demi": "^0.14.6"
   },
diff --git a/src/assets/logo-full-dark.png b/src/assets/logo-full-dark.png
new file mode 100644
index 0000000..b2befcd
Binary files /dev/null and b/src/assets/logo-full-dark.png differ
diff --git a/src/assets/logo-full.png b/src/assets/logo-full.png
new file mode 100644
index 0000000..d1e2fed
Binary files /dev/null and b/src/assets/logo-full.png differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..5ef7cd2
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/assets/main.css b/src/assets/main.css
index b5c61c9..c12ec54 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+    font-family: 'Inter Variable', sans-serif;
+}
diff --git a/src/components/BuiButton/BuiButton.spec.ts b/src/components/BuiButton/BuiButton.spec.ts
index 9e3445e..1135746 100644
--- a/src/components/BuiButton/BuiButton.spec.ts
+++ b/src/components/BuiButton/BuiButton.spec.ts
@@ -22,7 +22,7 @@ describe('BuiButton', () => {
     createComponent({ props: { color: 'primary' } })
 
     expect(wrapper.classes().join(' ')).toEqual(
-      'focus:ring-4 focus:ring-primary-200 font-medium rounded text-sm px-5 py-2.5 mr-2 mb-2 focus:outline-none bg-primary-500 hover:bg-primary-600 dark:bg-primary-500 dark:hover:bg-primary-600 dark:focus:ring-primary-400 text-white'
+      'focus:ring-4 focus:ring-primary-200 font-medium rounded text-sm px-5 py-2.5 mr-2 mb-2 focus:outline-none bg-primary-500 hover:bg-primary-550 dark:bg-primary-500 dark:hover:bg-primary-600 dark:focus:ring-primary-400 text-white'
     )
   })
   test('secondary button classes is correct', () => {
diff --git a/src/components/BuiButton/BuiButton.vue b/src/components/BuiButton/BuiButton.vue
index fb9e6d4..b314733 100644
--- a/src/components/BuiButton/BuiButton.vue
+++ b/src/components/BuiButton/BuiButton.vue
@@ -8,7 +8,7 @@ const baseClasses =
 
 const colorClasses: Record<ButtonColor, string> = {
   primary:
-    'bg-primary-500 hover:bg-primary-600 dark:bg-primary-500 dark:hover:bg-primary-600 dark:focus:ring-primary-400 text-white',
+    'bg-primary-500 hover:bg-primary-550 dark:bg-primary-500 dark:hover:bg-primary-600 dark:focus:ring-primary-400 text-white',
   secondary:
     'bg-primary-150 hover:bg-primary-200 dark:bg-primary-650 dark:hover:bg-primary-700 dark:focus:ring-primary-300 text-primary-500',
   link: 'text-primary-500 bg-transparent hover:bg-primary-100 dark:hover:bg-primary-650 dark:hover:text-primary-400'
diff --git a/src/components/BuiInput/BuiInput.spec.ts b/src/components/BuiInput/BuiInput.spec.ts
new file mode 100644
index 0000000..8c6a36b
--- /dev/null
+++ b/src/components/BuiInput/BuiInput.spec.ts
@@ -0,0 +1,43 @@
+import { shallowMount } from '@vue/test-utils'
+import BuiInput from './BuiInput.vue'
+import { describe, expect, test } from 'vitest'
+import type { TestWrapper } from '../../types/globalTypes'
+
+describe('BuiInput', () => {
+  // @ts-ignore
+  let wrapper: TestWrapper
+
+  const createComponent = (props: any) => {
+    wrapper = shallowMount(BuiInput, {
+      global: { stubs: { teleport: true } },
+      ...props
+    })
+  }
+  test('input event fired', async () => {
+    createComponent({ props: { color: 'primary' } })
+    const input = wrapper.find('input')
+
+    await input.setValue('some-text')
+
+    expect(input.element.value).toBe('some-text')
+    expect(wrapper.emitted('update:modelValue')[0][0]).toBe('some-text')
+  })
+
+  test('focus event fired', async () => {
+    createComponent({ props: { color: 'primary' } })
+    const input = wrapper.find('input')
+
+    await input.trigger('focus')
+
+    expect(wrapper.emitted()).toHaveProperty('focus')
+  })
+
+  test('blur event fired', async () => {
+    createComponent({ props: { color: 'primary' } })
+    const input = wrapper.find('input')
+
+    await input.trigger('blur')
+
+    expect(wrapper.emitted()).toHaveProperty('blur')
+  })
+})
diff --git a/src/components/BuiInput/BuiInput.story.vue b/src/components/BuiInput/BuiInput.story.vue
new file mode 100644
index 0000000..f8a963e
--- /dev/null
+++ b/src/components/BuiInput/BuiInput.story.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import BuiInput from './BuiInput.vue'
+import { ref } from 'vue-demi'
+
+const model = ref('')
+</script>
+
+<template>
+  <Story title="BuiInput" autoPropsDisabled :layout="{ type: 'grid', width: '400px' }">
+    <Variant title="Default">
+      <div class="p-2">
+        <BuiInput label="Default" v-model="model" />
+      </div>
+    </Variant>
+    <Variant title="Placeholder">
+      <div class="p-2">
+        <BuiInput label="Default" v-model="model" placeholder="Some text" />
+      </div>
+    </Variant>
+    <Variant title="Error">
+      <div class="p-2">
+        <BuiInput label="Default" v-model="model" validation-status="error">
+          <template #validationMessage> Some error text </template>
+        </BuiInput>
+      </div>
+    </Variant>
+    <Variant title="Success">
+      <div class="p-2">
+        <BuiInput label="Default" v-model="model" validation-status="success">
+          <template #validationMessage> Some success text </template>
+        </BuiInput>
+      </div>
+    </Variant>
+    <Variant title="Helper text">
+      <div class="p-2">
+        <BuiInput label="Default" v-model="model">
+          <template #helper> Some help text </template>
+        </BuiInput>
+      </div>
+    </Variant>
+    <Variant title="Prefix slot">
+      <div class="p-2">
+        <BuiInput label="Default" v-model="model">
+          <template #prefix>
+            <svg
+              class="w-5 h-5 text-gray-800 dark:text-white"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 21 21"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m6.072 10.072 2 2 6-4m3.586 4.314.9-.9a2 2 0 0 0 0-2.828l-.9-.9a2 2 0 0 1-.586-1.414V5.072a2 2 0 0 0-2-2H13.8a2 2 0 0 1-1.414-.586l-.9-.9a2 2 0 0 0-2.828 0l-.9.9a2 2 0 0 1-1.414.586H5.072a2 2 0 0 0-2 2v1.272a2 2 0 0 1-.586 1.414l-.9.9a2 2 0 0 0 0 2.828l.9.9a2 2 0 0 1 .586 1.414v1.272a2 2 0 0 0 2 2h1.272a2 2 0 0 1 1.414.586l.9.9a2 2 0 0 0 2.828 0l.9-.9a2 2 0 0 1 1.414-.586h1.272a2 2 0 0 0 2-2V13.8a2 2 0 0 1 .586-1.414Z"
+              />
+            </svg>
+          </template>
+        </BuiInput>
+      </div>
+    </Variant>
+    <Variant title="Suffix slot">
+      <div class="p-2">
+        <BuiInput label="Default" v-model="model">
+          <template #suffix>
+            <svg
+              class="w-5 h-5 text-gray-800 dark:text-white"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 21 21"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m6.072 10.072 2 2 6-4m3.586 4.314.9-.9a2 2 0 0 0 0-2.828l-.9-.9a2 2 0 0 1-.586-1.414V5.072a2 2 0 0 0-2-2H13.8a2 2 0 0 1-1.414-.586l-.9-.9a2 2 0 0 0-2.828 0l-.9.9a2 2 0 0 1-1.414.586H5.072a2 2 0 0 0-2 2v1.272a2 2 0 0 1-.586 1.414l-.9.9a2 2 0 0 0 0 2.828l.9.9a2 2 0 0 1 .586 1.414v1.272a2 2 0 0 0 2 2h1.272a2 2 0 0 1 1.414.586l.9.9a2 2 0 0 0 2.828 0l.9-.9a2 2 0 0 1 1.414-.586h1.272a2 2 0 0 0 2-2V13.8a2 2 0 0 1 .586-1.414Z"
+              />
+            </svg>
+          </template>
+        </BuiInput>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/src/components/BuiInput/BuiInput.vue b/src/components/BuiInput/BuiInput.vue
new file mode 100644
index 0000000..fa93adc
--- /dev/null
+++ b/src/components/BuiInput/BuiInput.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="flex flex-col justify-center gap-1">
+    <label v-if="label" :class="labelClasses">{{ label }}</label>
+    <div class="flex relative">
+      <div
+        v-if="$slots.prefix"
+        class="w-10 flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none overflow-hidden"
+      >
+        <slot name="prefix" />
+      </div>
+      <input
+        v-model="model"
+        :disabled="disabled"
+        :required="required"
+        :class="[inputClasses, $slots.prefix ? 'pl-10' : '']"
+        @focus="emit('focus')"
+        @blur="emit('blur')"
+        :placeholder="placeholder"
+      />
+      <div v-if="$slots.suffix" class="absolute right-2.5 bottom-2.5">
+        <slot name="suffix" />
+      </div>
+    </div>
+    <div v-if="$slots.validationMessage" :class="validationWrapperClasses">
+      <slot name="validationMessage" />
+    </div>
+    <div v-if="$slots.helper" class="text-sm font-normal text-gray-500 dark:text-gray-400">
+      <slot name="helper" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue-demi'
+import { useVModel } from '@vueuse/core'
+import { twMerge } from 'tailwind-merge'
+
+type ValidationStatus = 'success' | 'error'
+interface InputProps {
+  disabled?: boolean
+  label?: string
+  modelValue?: string
+  required?: boolean
+  validationStatus?: ValidationStatus | null
+  placeholder?: string | undefined
+}
+
+const props = withDefaults(defineProps<InputProps>(), {
+  disabled: false,
+  label: '',
+  modelValue: '',
+  required: false,
+  validationStatus: null,
+  placeholder: ''
+})
+const emit = defineEmits(['focus', 'blur', 'update:modelValue'])
+
+const model = useVModel(props, 'modelValue')
+
+const inputClasses = twMerge(
+  'py-2 px-3 border border-slate-300 dark:border-gray-500  dark:focus:border-primary-500 focus:border-primary-500 bg-transparent rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-550 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500',
+  props.validationStatus === 'success' &&
+    'border-green-300 focus:border-green-300 focus:ring-green-200',
+  props.validationStatus === 'error' && 'border-red-300 focus:border-red-300 focus:ring-red-200'
+)
+
+const labelClasses = 'text-sm text-clay-500 font-semibold leading-6 dark:text-gray-100'
+const validationWrapperClasses = computed(() =>
+  twMerge(
+    'text-sm font-normal',
+    props.validationStatus === 'success' ? 'text-green-300' : '',
+    props.validationStatus === 'error' ? 'text-red-300' : ''
+  )
+)
+</script>
diff --git a/src/components/BuiInput/types.ts b/src/components/BuiInput/types.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/histoire-setup.ts b/src/histoire-setup.ts
index bd00172..9febd71 100644
--- a/src/histoire-setup.ts
+++ b/src/histoire-setup.ts
@@ -1 +1,2 @@
 import './assets/main.css'
+import '@fontsource-variable/inter'
diff --git a/src/index.ts b/src/index.ts
index 65af6c3..9e0cad3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,2 +1,3 @@
 import './assets/main.css'
-export {default as BuiButton} from './components/BuiButton/BuiButton.vue'
+
+export { default as BuiButton } from './components/BuiButton/BuiButton.vue'
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6aa2a6c..1e35bed 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -11,10 +11,27 @@ module.exports = {
           300: '#adabf9',
           400: '#8989ff',
           500: '#7371F9',
+          550: '#5957E8',
           600: '#413f7c',
           650: '#2f2e51',
           700: '#323149',
           800: '#292841'
+        },
+        clay: {
+          500: '#292841'
+        },
+        slate: {
+          300: '#D0D3DA'
+        },
+        gray: {
+          100: '#F5F6F8',
+          500: '#737680'
+        },
+        red: {
+          300: '#E05FA3'
+        },
+        green: {
+          300: '#12D480'
         }
       }
     }