diff --git a/src/components/01_branch-management/BtnAddComponet.vue b/src/components/01_branch-management/BtnAddComponet.vue
new file mode 100644
index 00000000..c4f4e699
--- /dev/null
+++ b/src/components/01_branch-management/BtnAddComponet.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineProps<{
+  label?: string;
+}>();
+</script>
+
+<template>
+  <div class="column items-center box" :class="{ dark: $q.dark.isActive }">
+    <div class="row">
+      <q-btn
+        @click="$emit('trigger')"
+        size="lg"
+        class="color-btn"
+        icon="mdi-plus"
+        round
+      />
+    </div>
+    <div class="row q-mt-sm color-text">{{ label }}</div>
+  </div>
+</template>
+
+<style scoped>
+.box {
+  --_btn-add-color: var(--cyan-6-hsl);
+
+  .color-btn {
+    color: hsl(var(--_btn-add-color));
+    background: hsla(var(--_btn-add-color) / 0.1) !important;
+  }
+
+  .color-text {
+    color: var(--stone-6);
+  }
+
+  &.dark {
+    --_btn-add-color: var(--cyan-5-hsl);
+  }
+}
+</style>