diff --git a/components/form/InputField.vue b/components/form/InputField.vue
new file mode 100644
index 0000000..3340e70
--- /dev/null
+++ b/components/form/InputField.vue
@@ -0,0 +1,102 @@
+<template>
+  <label
+    class="form-label fw-semibold text-secondary text-uppercase mb-1"
+    :for="id"
+    >{{ label }}</label
+  >
+
+  <input
+    v-if="inputTypes.includes(inputType)"
+    :type="type"
+    class="form-control py-2 text-dark"
+    style="border-radius: 10px; font-size: 1rem"
+    :id="id"
+    :value="value"
+    :placeholder="placeholder"
+    @input="handleInput"
+  />
+
+  <textarea
+    v-if="inputType === 'textarea'"
+    class="form-control py-2 text-dark"
+    style="border-radius: 10px; font-size: 1rem"
+    :id="id"
+    :value="value"
+    :placeholder="placeholder"
+    :type="type"
+    @input="handleInput"
+    rows="3"
+  ></textarea>
+
+  <FormMultiSelect
+    v-if="inputType === 'multiselect'"
+    :suggestions="suggestions"
+    :modelValue="value"
+    :placeholder="placeholder"
+    @input="(value) => handleSelection(value)"
+  />
+
+  <p v-if="error" class="text-danger">{{ error }}</p>
+</template>
+<script setup>
+const inputTypes = ["text", "email", "password", "number", "tel", "file"];
+const props = defineProps({
+  inputType: {
+    type: String,
+    default: "text",
+  },
+  id: {
+    type: String,
+    default: "",
+  },
+  value: {
+    type: [String, Number, Array],
+    default: "",
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  type: {
+    type: String,
+    default: "text",
+    validator: (value) =>
+      ["text", "email", "password", "number", "tel", "file"].includes(value),
+  },
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: String,
+    default: "",
+  },
+  suggestions: {
+    type: Array,
+    default: () => [],
+  },
+  selections: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["input"]);
+
+// const inputValue = ref(props.value);
+const handleInput = (event) => {
+  emit("input", event.target.value);
+};
+
+const handleSelection = (value) => {
+  emit("input", value);
+};
+</script>
diff --git a/components/form/MultiSelect.vue b/components/form/MultiSelect.vue
new file mode 100644
index 0000000..cf8f2fa
--- /dev/null
+++ b/components/form/MultiSelect.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="position-relative">
+    <div
+      class="form-control d-flex flex-wrap gap-2 min-h-auto"
+      @click="focusInput"
+    >
+      <span
+        v-for="item in selectedItems"
+        :key="item"
+        class="badge bg-primary d-flex align-items-center gap-2"
+      >
+        {{ item }}
+        <button
+          type="button"
+          class="btn-close btn-close-white"
+          style="font-size: 0.5rem"
+          @click.stop="removeItem(item)"
+          aria-label="Remove"
+        ></button>
+      </span>
+
+      <input
+        ref="inputRef"
+        type="text"
+        class="border-0 flex-grow-1 min-w-50"
+        style="outline: none; background: transparent"
+        v-model="searchQuery"
+        @input="handleInput"
+        @keydown.enter.prevent="handleEnter"
+        @keydown.down.prevent="handleArrowDown"
+        @keydown.up.prevent="handleArrowUp"
+        @keydown.backspace="handleBackspace"
+        @blur="handleBlur"
+        :placeholder="selectedItems.length ? '' : placeholder"
+      />
+    </div>
+
+    <div
+      v-if="showSuggestions && (filteredSuggestions.length > 0 || searchQuery)"
+      class="position-absolute w-100 mt-1 shadow bg-white border rounded-2"
+      style="z-index: 3"
+    >
+      <template v-if="filteredSuggestions.length > 0">
+        <button
+          v-for="(suggestion, index) in filteredSuggestions"
+          :key="suggestion"
+          class="dropdown-item w-100 text-start"
+          :class="{ active: index === selectedIndex }"
+          @mousedown.prevent="selectSuggestion(suggestion)"
+          @mouseover="selectedIndex = index"
+        >
+          {{ suggestion }}
+        </button>
+      </template>
+
+      <button
+        v-if="searchQuery && !exactMatch"
+        class="dropdown-item w-100 text-start"
+        :class="{ active: selectedIndex === filteredSuggestions.length }"
+        @mousedown.prevent="addNewItem"
+      >
+        Add "{{ searchQuery }}"
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  suggestions: {
+    type: Array,
+    default: () => [],
+  },
+  placeholder: {
+    type: String,
+    default: "Type to search or add new items...",
+  },
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "add", "input"]);
+
+const inputRef = ref(null);
+const searchQuery = ref("");
+const showSuggestions = ref(false);
+const selectedIndex = ref(-1);
+const selectedItems = ref([...props.modelValue]);
+
+const filteredSuggestions = computed(() => {
+  if (!searchQuery.value)
+    return props.suggestions.filter(
+      (item) => !selectedItems.value.includes(item)
+    );
+
+  return props.suggestions.filter(
+    (suggestion) =>
+      suggestion.toLowerCase().includes(searchQuery.value.toLowerCase()) &&
+      !selectedItems.value.includes(suggestion)
+  );
+});
+
+const exactMatch = computed(() => {
+  return props.suggestions.some(
+    (suggestion) => suggestion.toLowerCase() === searchQuery.value.toLowerCase()
+  );
+});
+
+const focusInput = () => {
+  inputRef.value?.focus();
+};
+
+const handleInput = () => {
+  showSuggestions.value = true;
+  selectedIndex.value = -1;
+};
+
+const handleEnter = () => {
+  if (selectedIndex.value >= 0) {
+    if (selectedIndex.value < filteredSuggestions.value.length) {
+      selectSuggestion(filteredSuggestions.value[selectedIndex.value]);
+    } else {
+      addNewItem();
+    }
+  } else if (searchQuery.value && !exactMatch.value) {
+    addNewItem();
+  }
+};
+
+const handleArrowDown = () => {
+  const maxIndex =
+    filteredSuggestions.value.length + (exactMatch.value ? 0 : 1) - 1;
+  selectedIndex.value =
+    selectedIndex.value < maxIndex ? selectedIndex.value + 1 : -1;
+};
+
+const handleArrowUp = () => {
+  const maxIndex =
+    filteredSuggestions.value.length + (exactMatch.value ? 0 : 1) - 1;
+  selectedIndex.value =
+    selectedIndex.value > -1 ? selectedIndex.value - 1 : maxIndex;
+};
+
+const handleBackspace = () => {
+  if (!searchQuery.value && selectedItems.value.length > 0) {
+    removeItem(selectedItems.value[selectedItems.value.length - 1]);
+  }
+};
+
+const handleBlur = () => {
+  setTimeout(() => {
+    showSuggestions.value = false;
+    selectedIndex.value = -1;
+    searchQuery.value = "";
+  }, 200);
+};
+
+const selectSuggestion = (suggestion) => {
+  if (!selectedItems.value.includes(suggestion)) {
+    selectedItems.value = [...selectedItems.value, suggestion];
+    emit("input", selectedItems.value);
+  }
+  searchQuery.value = "";
+  showSuggestions.value = false;
+};
+
+const addNewItem = () => {
+  if (searchQuery.value && !selectedItems.value.includes(searchQuery.value)) {
+    const newItem = searchQuery.value.trim();
+    selectedItems.value = [...selectedItems.value, newItem];
+    emit("add", newItem);
+    emit("input", selectedItems.value);
+    searchQuery.value = "";
+    showSuggestions.value = false;
+  }
+};
+
+const removeItem = (item) => {
+  selectedItems.value = selectedItems.value.filter((i) => i !== item);
+};
+</script>
+
+<style scoped>
+.dropdown-item {
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+}
+
+.dropdown-item:hover,
+.dropdown-item.active {
+  background-color: #e9ecef;
+  color: #16181b;
+}
+
+.min-h-auto {
+  min-height: auto;
+}
+
+.min-w-50 {
+  min-width: 50px;
+}
+</style>
diff --git a/components/form/Pagination.vue b/components/form/Pagination.vue
new file mode 100644
index 0000000..563d1f4
--- /dev/null
+++ b/components/form/Pagination.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="mb-4">
+    <div class="d-flex justify-content-between align-items-center">
+      <template v-for="(step, index) in steps" :key="index">
+        <div class="d-flex align-items-center">
+          <div
+            :class="[
+              'rounded-circle d-flex align-items-center justify-content-center',
+              'border border-2',
+              'text-center',
+              currentStep > index
+                ? 'bg-dark text-white'
+                : currentStep === index
+                ? 'bg-secondary text-white'
+                : 'bg-light',
+              'position-relative',
+            ]"
+            style="width: 40px; height: 40px"
+          >
+            {{ index + 1 }}
+          </div>
+          <span class="ms-2 text-uppercase">{{ step.title }}</span>
+        </div>
+        <div
+          v-if="index < steps.length - 1"
+          :class="['flex-grow-1 mx-4 my-auto', 'progress', 'position-relative']"
+          style="height: 2px"
+        >
+          <div
+            :class="[
+              'progress-bar',
+              currentStep > index ? 'bg-dark' : 'bg-secondary',
+            ]"
+            :style="{ width: currentStep > index ? '100%' : '0%' }"
+          ></div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  steps: Array,
+  currentStep: Number,
+});
+</script>
diff --git a/components/registerCompany/AddStackForm.vue b/components/registerCompany/AddStackForm.vue
new file mode 100644
index 0000000..a6bae71
--- /dev/null
+++ b/components/registerCompany/AddStackForm.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="card">
+    <div class="card-body p-4">
+      <h2
+        class="fw-semibold text-dark d-flex align-items-center"
+        style="font-size: 1.25rem"
+      >
+        <span class="me-2">🚀</span>Add Stack
+      </h2>
+      <div class="mb-3 row">
+        <div class="col-12 mb-3">
+          <FormInputField
+            :id="'feStack'"
+            :label="'Frontend Stack'"
+            :inputType="'multiselect'"
+            :suggestions="[
+              'JavaScript',
+              'Python',
+              'Java',
+              'React',
+              'Next JS',
+              'Vue JS',
+              'Nuxt JS',
+              'PHP',
+            ]"
+            :value="modelValue.frontendStack"
+            @input="(value) => $emit('update', 'frontendStack', value)"
+          />
+        </div>
+        <div class="col-12 mb-3">
+          <FormInputField
+            :id="'mobileStack'"
+            :label="'Mobile Stack'"
+            :inputType="'multiselect'"
+            :suggestions="[
+              'React Native',
+              'Flutter',
+              'Kotlin',
+              'Ionic',
+              'Swift',
+              'Xamarin',
+              'Appcelerator',
+              'Cordova',
+              'Objective C',
+              'C#',
+            ]"
+            :value="modelValue.mobileStack"
+            @input="(value) => $emit('update', 'mobileStack', value)"
+          />
+        </div>
+        <div class="col-12 mb-3">
+          <FormInputField
+            :id="'beStack'"
+            :label="'Backend Stack'"
+            :inputType="'multiselect'"
+            :suggestions="[
+              'JavaScript',
+              'Python',
+              'Java',
+              'Node JS',
+              '.Net',
+              'Express JS',
+              'Nest JS',
+              'Django',
+              'Fast API',
+              'Flask',
+              'Spring boot',
+              'Ruby',
+              'Go lang',
+            ]"
+            :value="modelValue.backendStack"
+            @input="(value) => $emit('update', 'backendStack', value)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: {},
+  },
+});
+
+const emit = defineEmits(["update"]);
+</script>
diff --git a/components/registerCompany/Form.vue b/components/registerCompany/Form.vue
new file mode 100644
index 0000000..85748ac
--- /dev/null
+++ b/components/registerCompany/Form.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="card">
+    <div class="card-body p-4">
+      <h2
+        class="fw-semibold text-dark d-flex align-items-center"
+        style="font-size: 1.25rem"
+      >
+        <span class="me-2">💼</span>Add Company
+      </h2>
+      <div class="mb-3 row">
+        <div
+          class="col-12 fw-bold mt-1 mb-3 border-bottom pb-1 border-light text-dark"
+        >
+          COMPANY INFO<span class="ms-2">ℹ️</span>
+        </div>
+        <div class="col-12 mb-3">
+          <FormInputField
+            :id="'companyName'"
+            :label="'Company Name'"
+            :type="'text'"
+            :value="modelValue.name"
+            :placeholder="'John Doe Inc.'"
+            @input="(value) => $emit('update', 'name', value)"
+          />
+        </div>
+        <div class="col-12 mb-3">
+          <FormInputField
+            :id="'about'"
+            :label="'About'"
+            :inputType="'textarea'"
+            :value="modelValue.about"
+            @input="(value) => $emit('update', 'about', value)"
+          />
+        </div>
+        <div class="col-12 mb-3">
+          <FormInputField
+            :id="'websiteUrl'"
+            :label="'Company Website'"
+            :type="'text'"
+            :value="modelValue.websiteUrl"
+            :placeholder="'https://www.johndoe.inc'"
+            @input="(value) => $emit('update', 'websiteUrl', value)"
+          />
+        </div>
+        <div class="col-12 mb-3">
+          <FormInputField
+            :id="'slug'"
+            :label="'Source Slug'"
+            :type="'text'"
+            :value="modelValue.slug"
+            :placeholder="'Job source slug'"
+            @input="(value) => $emit('update', 'slug', value)"
+          />
+        </div>
+        <div class="col-12 mb-3">
+          <FormInputField
+            :id="'logo'"
+            :label="'Company Logo'"
+            :type="'file'"
+            :inputType="'file'"
+            :value="modelValue.logo"
+            :placeholder="'+1 (123) 456-7890'"
+            @input="(value) => $emit('update', 'logo', value)"
+          />
+        </div>
+
+        <div
+          class="col-12 fw-bold mt-3 mb-3 border-bottom pb-1 border-light text-dark"
+        >
+          CONTACTS<span class="ms-2">☎️</span>
+        </div>
+        <div class="col-12 col-md-6 mb-3">
+          <FormInputField
+            :id="'ceoName'"
+            :label="'CEO Name'"
+            :type="'text'"
+            :value="modelValue.ceoName"
+            :placeholder="'John Doe Inc.'"
+            @input="(value) => $emit('update', 'ceoName', value)"
+          />
+        </div>
+        <div class="col-12 col-md-6 mb-3">
+          <FormInputField
+            :id="'ceoContact'"
+            :label="'CEO Contact'"
+            :inputType="'text'"
+            :value="modelValue.ceoContact"
+            :placeholder="'+1 (123) 456-7890'"
+            @input="(value) => $emit('update', 'ceoContact', value)"
+          />
+        </div>
+        <div class="col-12 col-md-6 mb-3">
+          <FormInputField
+            :id="'ctoName'"
+            :label="'CTO Name'"
+            :type="'text'"
+            :value="modelValue.ctoName"
+            :placeholder="'Jane Racket'"
+            @input="(value) => $emit('update', 'ctoName', value)"
+          />
+        </div>
+        <div class="col-12 col-md-6 mb-3">
+          <FormInputField
+            :id="'ctoContact'"
+            :label="'CTO Contact'"
+            :type="'text'"
+            :value="modelValue.ctoContact"
+            :placeholder="'+1 (123) 456-7890'"
+            @input="(value) => $emit('update', 'ctoContact', value)"
+          />
+        </div>
+
+        <div class="col-12 col-md-6 mb-3">
+          <FormInputField
+            :id="'hrName'"
+            :label="'HR Name'"
+            :inputType="'text'"
+            :value="modelValue.hrName"
+            :placeholder="'Rodri Lei'"
+            @input="(value) => $emit('update', 'hrName', value)"
+          />
+        </div>
+        <div class="col-12 col-md-6 mb-3">
+          <FormInputField
+            :id="'hrContact'"
+            :label="'HR Contact'"
+            :type="'text'"
+            :value="modelValue.hrContact"
+            :placeholder="'+1 (123) 456-7890'"
+            @input="(value) => $emit('update', 'hrContact', value)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: {},
+  },
+});
+const emit = defineEmits(["update"]);
+</script>
diff --git a/pages/community/RegisterCompany/index.vue b/pages/community/RegisterCompany/index.vue
new file mode 100644
index 0000000..27eb9a2
--- /dev/null
+++ b/pages/community/RegisterCompany/index.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="container py-4 flex-grow-1">
+    <FormPagination :steps="steps" :currentStep="currentStep" />
+
+    <form @submit.prevent="handleSubmit">
+      <RegisterCompanyForm
+        v-model="formData"
+        @update="updateFormData"
+        v-if="currentStep === 0"
+      />
+
+      <RegisterCompanyAddStackForm
+        v-model="formData"
+        @update="updateFormData"
+        v-if="currentStep === 1"
+      />
+
+      <!-- Navigation buttons -->
+      <div class="mt-4 d-flex flex-row-reverse justify-content-between">
+        <div>
+          <button
+            v-if="currentStep < steps.length - 1"
+            type="button"
+            @click="nextStep"
+            class="btn btn-dark fw-semibold"
+          >
+            Next
+          </button>
+          <button
+            v-if="currentStep === steps.length - 1"
+            type="submit"
+            class="btn btn-dark fw-semibold"
+          >
+            Submit
+          </button>
+        </div>
+
+        <button
+          v-if="currentStep > 0"
+          type="button"
+          @click="prevStep"
+          class="btn btn-secondary fw-semibold"
+        >
+          Previous
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+const steps = [{ title: "Add Company" }, { title: "Add Stack" }];
+
+const currentStep = ref(0);
+const formData = ref({
+  name: "",
+  about: "",
+  websiteUrl: "",
+  slug: "",
+  ceoName: "",
+  ceoContact: "",
+  ctoName: "",
+  ctoContact: "",
+  hrName: "",
+  hrContact: "",
+  logo: "",
+  frontendStack: ["JavaScript"],
+  backendStack: [],
+  mobileStack: [],
+});
+
+const updateFormData = (field, value) => {
+  formData.value[field] = value;
+};
+
+const nextStep = () => {
+  if (currentStep.value < steps.length - 1) {
+    currentStep.value++;
+  }
+};
+
+const prevStep = () => {
+  if (currentStep.value > 0) {
+    currentStep.value--;
+  }
+};
+
+const handleSubmit = () => {
+  // console.log("Form submitted:", formData);
+  // emit("submit", formData);
+};
+</script>