diff --git a/src/layouts/components/KunafaLogo.vue b/src/layouts/components/KunafaLogo.vue
new file mode 100644
index 0000000..af30b89
--- /dev/null
+++ b/src/layouts/components/KunafaLogo.vue
@@ -0,0 +1,27 @@
+<template>
+    <!-- Small logo icon , TODO: replace with logo (dynamically) -->
+    <Icon icon="emojione:up-arrow" class="" />
+    <!-- System name -->
+    <span class="text-xl font-semibold text-primary mx-2">Kunafa Vue</span>
+</template>
+
+<script>
+export default {
+    name: 'KunafaLogo',
+    props: {
+        height: {
+            type: Number,
+            default: 24,
+        },
+        start: {
+            type: String,
+            default: 'primary',
+        },
+        end: {
+            type: String,
+            default: 'secondary',
+        },
+    },
+}
+
+</script>
\ No newline at end of file
diff --git a/src/layouts/components/Sidebar.vue b/src/layouts/components/Sidebar.vue
index 7c07e1e..41062ae 100644
--- a/src/layouts/components/Sidebar.vue
+++ b/src/layouts/components/Sidebar.vue
@@ -31,12 +31,7 @@
         </button>
         <!-- Logo and system name -->
         <router-link class="flex items-center" to="/">
-          <!-- Small logo icon , TODO: replace with logo (dynamically) -->
-          <Icon icon="emojione:up-arrow" class="" />
-          <!-- System name -->
-          <span class="text-xl font-semibold text-primary mx-2"
-            >Kunafa Vue</span
-          >
+          <KunafaLogo />
         </router-link>
       </div>
 
@@ -185,12 +180,14 @@ import { useRouter } from "vue-router"; // Import useRouter
 import SidebarLinkGroup from "../../layouts/components/SidebarLinkGroup.vue";
 import { useI18n } from "vue-i18n";
 import SelectedLanguage from "@/services/LanguageService.js";
+import KunafaLogo from "./KunafaLogo.vue";
 
 export default {
   name: "Sidebar",
   props: ["sidebarOpen"],
   components: {
     SidebarLinkGroup,
+    KunafaLogo,
   },
   setup(props, { emit }) {
     const routes = ref([]);