diff --git a/resources/js/components/AvailableSources.vue b/resources/js/components/AvailableSources.vue
new file mode 100644
index 0000000..cc415b6
--- /dev/null
+++ b/resources/js/components/AvailableSources.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="border-b mt-5">
+        <div class="mb-5">
+            <div>
+                <h2
+                    class="text-gray-800 font-bold text-3xl text-center mt-3 mb-2 MvAamu"
+                >
+                    މަސްދަރުތަށް
+                </h2>
+            </div>
+
+            <div class="flex flex-wrap justify-center">
+                <div
+                    v-for="source in sources"
+                    :key="source.id"
+                    class="flex flex-col items-center shadow hover:shadow-lg mr-5 rounded p-10"
+                >
+                    <img
+                        class="h-16 w-16"
+                        :src="source.logo"
+                        :alt="source.name"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: "available-sources",
+
+    data() {
+        return {
+            sources: []
+        };
+    },
+
+    mounted() {
+        axios.get("/api/sources").then(response => {
+            this.sources = response.data.data;
+        });
+    }
+};
+</script>