diff --git a/frontend/src/api/members.ts b/frontend/src/api/members.ts
index 74da98ad..8bd12fef 100644
--- a/frontend/src/api/members.ts
+++ b/frontend/src/api/members.ts
@@ -3,6 +3,7 @@ import type {
   AllMembersFilter,
   Member,
   MemberWithContact,
+  MemberEventTeam,
 } from "@/dto/members";
 
 export const getAllMembers = (filters?: AllMembersFilter) =>
@@ -11,3 +12,9 @@ export const getAllMembers = (filters?: AllMembersFilter) =>
   });
 
 export const getMe = () => instance.get<MemberWithContact>("/me");
+
+export const getMemberById = (id: string) =>
+  instance.get<Member>(`/members/${id}`);
+
+export const getMemberParticipations = (id: string) =>
+  instance.get<MemberEventTeam[]>(`/members/${id}/participations`);
diff --git a/frontend/src/components/CompanyOrSpeakerAutocompleteWithDialog.vue b/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
similarity index 84%
rename from frontend/src/components/CompanyOrSpeakerAutocompleteWithDialog.vue
rename to frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
index 39bd1c48..61dc33d4 100644
--- a/frontend/src/components/CompanyOrSpeakerAutocompleteWithDialog.vue
+++ b/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
@@ -151,17 +151,50 @@
             </button>
           </div>
 
+          <!-- Members section -->
+          <div v-if="filteredMembers.length > 0">
+            <div
+              class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b"
+            >
+              Members
+            </div>
+            <button
+              v-for="member in filteredMembers"
+              :key="`member-${member.id}`"
+              type="button"
+              :class="[
+                'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
+                getItemIndex(member) === highlightedIndex
+                  ? 'bg-blue-50 border-blue-200'
+                  : 'hover:bg-gray-50',
+              ]"
+              @click="selectMember(member)"
+            >
+              <Image
+                :src="member.img"
+                :alt="member.name"
+                class="w-8 h-8 rounded object-cover border flex-shrink-0"
+              />
+              <div class="flex-1 min-w-0">
+                <div class="font-medium text-gray-900 truncate">
+                  {{ member.name }}
+                </div>
+              </div>
+            </button>
+          </div>
+
           <!-- No results -->
           <div
             v-if="
               !isLoading &&
               filteredCompanies.length === 0 &&
               filteredSpeakers.length === 0 &&
+              filteredMembers.length === 0 &&
               searchTerm.trim()
             "
             class="p-3 text-gray-500 text-center"
           >
-            No companies or speakers found
+            No companies, speakers or members found
           </div>
 
           <!-- Welcome message when no search term -->
@@ -170,11 +203,12 @@
               !isLoading &&
               !searchTerm.trim() &&
               filteredCompanies.length === 0 &&
-              filteredSpeakers.length === 0
+              filteredSpeakers.length === 0 &&
+              filteredMembers.length === 0
             "
             class="p-3 text-gray-500 text-center"
           >
-            Start typing to search companies and speakers...
+            Start typing to search companies, speakers and members...
           </div>
 
           <!-- Create options -->
@@ -255,6 +289,7 @@ import { ref, computed, watch, nextTick } from "vue";
 import { useQuery } from "@pinia/colada";
 import { getAllCompanies } from "@/api/companies";
 import { getAllSpeakers } from "@/api/speakers";
+import { getAllMembers } from "@/api/members";
 import { useEventStore } from "@/stores/event";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -271,8 +306,9 @@ import {
 } from "@/components/ui/alert-dialog";
 import type { Company } from "@/dto/companies";
 import type { Speaker } from "@/dto/speakers";
+import type { Member } from "@/dto/members";
 
-type SelectedItem = Company | Speaker;
+type SelectedItem = Company | Speaker | Member;
 
 interface Props {
   modelValue?: string;
@@ -297,6 +333,7 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   companySelected: [value: Company];
   speakerSelected: [value: Speaker];
+  memberSelected: [value: Member];
   "update:modelValue": [value: string];
   companySuccess: [companyId: string];
   speakerSuccess: [speakerId: string];
@@ -335,8 +372,14 @@ const { data: speakersData, isLoading: speakersLoading } = useQuery({
   enabled: () => !!eventStore.selectedEvent?.id,
 });
 
+const { data: membersData, isLoading: membersLoading } = useQuery({
+  key: () => ["members"],
+  query: () => getAllMembers({}),
+  enabled: () => !!eventStore.selectedEvent?.id,
+});
+
 const isLoading = computed(
-  () => companiesLoading.value || speakersLoading.value,
+  () => companiesLoading.value || speakersLoading.value || membersLoading.value,
 );
 
 const filteredCompanies = computed(() => {
@@ -377,12 +420,37 @@ const filteredSpeakers = computed(() => {
     .slice(0, 5); // Limit to 5 results
 });
 
+const filteredMembers = computed(() => {
+  if (!membersData.value?.data) return [];
+
+  const term = searchTerm.value.toLowerCase();
+
+  if (!term) {
+    // Show recent members when no search term
+    return membersData.value.data.slice(0, 5);
+  }
+
+  return membersData.value.data
+    .filter((member: Member) => member.name.toLowerCase().includes(term))
+    .slice(0, 5);
+});
+
 const results = computed(() => [
-  ...filteredCompanies.value,
-  ...filteredSpeakers.value,
+  ...filteredCompanies.value.map((company: Company) => ({
+    ...company,
+    type: "company",
+  })),
+  ...filteredSpeakers.value.map((speaker: Speaker) => ({
+    ...speaker,
+    type: "speaker",
+  })),
+  ...filteredMembers.value.map((member: Member) => ({
+    ...member,
+    type: "member",
+  })),
 ]);
 
-const getItemIndex = (item: Company | Speaker) => {
+const getItemIndex = (item: SelectedItem) => {
   return results.value.findIndex((result) => result.id === item.id);
 };
 
@@ -396,6 +464,10 @@ const getItemImage = (item: SelectedItem) => {
       return item.imgs.internal || item.imgs.speaker;
     }
   }
+
+  // Member may have an `img` property
+  if ((item as Member).img) return (item as Member).img;
+
   return "";
 };
 
@@ -440,11 +512,11 @@ const handleKeydown = (event: KeyboardEvent) => {
       highlightedIndex.value < results.value.length
     ) {
       const selectedResult = results.value[highlightedIndex.value];
-      if ("companyName" in selectedResult) {
-        // It's a speaker
+      if (selectedResult.type === "speaker") {
         selectSpeaker(selectedResult as Speaker);
-      } else {
-        // It's a company
+      } else if (selectedResult.type === "member") {
+        selectMember(selectedResult as Member);
+      } else if (selectedResult.type === "company") {
         selectCompany(selectedResult as Company);
       }
     }
@@ -469,6 +541,15 @@ const selectSpeaker = (speaker: Speaker) => {
   emit("update:modelValue", speaker.name);
 };
 
+const selectMember = (member: Member) => {
+  selectedItem.value = member;
+  searchTerm.value = member.name;
+  showSuggestions.value = false;
+  highlightedIndex.value = -1;
+  emit("memberSelected", member);
+  emit("update:modelValue", member.name);
+};
+
 const clearSelection = () => {
   selectedItem.value = null;
   searchTerm.value = "";
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index 7ae3c2d2..7c20e5c7 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -15,9 +15,10 @@ import {
 import { useEventStore } from "@/stores/event";
 import { useAuthStore } from "@/stores/auth";
 import { useRouter } from "vue-router";
-import CompanyOrSpeakerAutocompleteWithDialog from "./CompanyOrSpeakerAutocompleteWithDialog.vue";
+import CompanyOrSpeakerAutocompleteWithDialog from "./CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue";
 import type { Company } from "@/dto/companies";
 import type { Speaker } from "@/dto/speakers";
+import type { Member } from "@/dto/members";
 import { useMagicKeys } from "@vueuse/core";
 import Notification from "./navbar/Notification.vue";
 
@@ -73,6 +74,9 @@ const companySelected = (company: Company) =>
 const speakerSelected = (speaker: Speaker) =>
   router.push({ name: "speaker", params: { speakerId: speaker.id } });
 
+const memberSelected = (member: Member) =>
+  router.push({ name: "member", params: { memberId: member.id } });
+
 const keys = useMagicKeys();
 const shortcutMac = keys["meta+k"];
 const shortcutLinux = keys["ctrl+k"];
@@ -134,6 +138,7 @@ watch(shortcutLinux, () => {
           show-create
           @company-selected="companySelected"
           @speaker-selected="speakerSelected"
+          @member-selected="memberSelected"
         />
 
         <!-- Desktop Navigation -->
@@ -180,6 +185,7 @@ watch(shortcutLinux, () => {
           placeholder="Search"
           @company-selected="companySelected"
           @speaker-selected="speakerSelected"
+          @member-selected="memberSelected"
         />
 
         <div class="container mx-auto px-4">
diff --git a/frontend/src/components/companies/MembersCompanies.vue b/frontend/src/components/companies/MembersCompanies.vue
index 62c3305a..a76e72d3 100644
--- a/frontend/src/components/companies/MembersCompanies.vue
+++ b/frontend/src/components/companies/MembersCompanies.vue
@@ -26,7 +26,12 @@
     <template #default="{ item }">
       <div class="w-full border-b border-muted-foreground/10 pb-4 mb-4">
         <div class="flex items-center justify-between w-full py-2">
-          <MemberWithAvatar :member="item" with-separator />
+          <RouterLink
+            :to="{ name: 'member', params: { memberId: item.id } }"
+            class="flex items-center gap-3 no-underline"
+          >
+            <MemberWithAvatar :member="item" with-separator />
+          </RouterLink>
           <button
             type="button"
             class="p-2 rounded-md hover:bg-slate-100"
diff --git a/frontend/src/components/speakers/MembersSpeakers.vue b/frontend/src/components/speakers/MembersSpeakers.vue
index b5280adc..25bb73a1 100644
--- a/frontend/src/components/speakers/MembersSpeakers.vue
+++ b/frontend/src/components/speakers/MembersSpeakers.vue
@@ -26,7 +26,12 @@
     <template #default="{ item }">
       <div class="w-full border-b border-muted-foreground/10 pb-4 mb-4">
         <div class="flex items-center justify-between w-full py-2">
-          <MemberWithAvatar :member="item" with-separator />
+          <RouterLink
+            :to="{ name: 'member', params: { memberId: item.id } }"
+            class="flex items-center gap-3 no-underline"
+          >
+            <MemberWithAvatar :member="item" with-separator />
+          </RouterLink>
           <button
             type="button"
             class="p-2 rounded-md hover:bg-slate-100"
diff --git a/frontend/src/router.ts b/frontend/src/router.ts
index 1e02bbc2..ea9ce8b1 100644
--- a/frontend/src/router.ts
+++ b/frontend/src/router.ts
@@ -41,6 +41,11 @@ const router = createRouter({
           name: "speaker",
           component: () => import("./views/Dashboard/Speakers/SpeakerView.vue"),
         },
+        {
+          path: "member/:memberId",
+          name: "member",
+          component: () => import("./views/Dashboard/Members/MemberView.vue"),
+        },
         {
           path: "settings",
           name: "settings",
diff --git a/frontend/src/views/Dashboard/Members/MemberView.vue b/frontend/src/views/Dashboard/Members/MemberView.vue
new file mode 100644
index 00000000..2d057b9e
--- /dev/null
+++ b/frontend/src/views/Dashboard/Members/MemberView.vue
@@ -0,0 +1,276 @@
+<template>
+  <div>
+    <div class="flex items-center justify-between mb-6">
+      <div class="flex items-center gap-4">
+        <Image
+          :src="member?.data?.img"
+          alt="Member Avatar"
+          class="w-12 h-12 rounded-xl"
+        />
+        <div v-if="member?.data">
+          <h1 class="text-2xl font-bold">{{ member.data.name }}</h1>
+          <div class="text-sm text-muted-foreground">
+            SINFO ID: {{ member.data.sinfoid || "—" }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div class="mb-6 lg:col-span-3">
+        <ContactCard
+          v-if="contact?.data"
+          :contact="contact.data"
+          :contact-name="member?.data?.name"
+          :can-edit="false"
+        />
+        <Skeleton v-else-if="contactLoading" class="h-28" />
+      </div>
+      <section class="col-span-1 lg:col-span-2">
+        <Accordion type="single" collapsible class="mb-3">
+          <AccordionItem value="speakers">
+            <AccordionTrigger
+              class="text-lg font-semibold flex items-center justify-between p-3 border rounded-md hover:bg-slate-50"
+            >
+              <div class="flex items-center gap-2">
+                <span>Speakers</span>
+                <span class="text-sm text-muted-foreground"
+                  >({{ speakers?.data?.length || 0 }})</span
+                >
+              </div>
+            </AccordionTrigger>
+            <br />
+            <AccordionContent>
+              <div
+                v-if="speakersLoading"
+                class="grid grid-cols-2 sm:grid-cols-3 gap-3"
+              >
+                <Skeleton
+                  v-for="skeletonIndex in 6"
+                  :key="skeletonIndex"
+                  class="h-20"
+                />
+              </div>
+
+              <div
+                v-else-if="speakers?.data && speakers.data.length === 0"
+                class="text-muted-foreground"
+              >
+                No speakers found for this member.
+              </div>
+
+              <div
+                v-else
+                class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3"
+              >
+                <RouterLink
+                  v-for="s in speakers?.data || []"
+                  :key="s.id"
+                  :to="{ name: 'speaker', params: { speakerId: s.id } }"
+                  class="block p-2 border rounded-md hover:shadow-sm bg-white"
+                >
+                  <Image
+                    :src="
+                      s.imgs?.speaker || s.imgs?.internal || s.imgs?.company
+                    "
+                    class="w-full h-16 object-contain mb-2"
+                  />
+                  <div class="text-sm font-medium truncate">{{ s.name }}</div>
+                </RouterLink>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+
+        <Accordion type="single" collapsible class="mt-6">
+          <AccordionItem value="companies">
+            <AccordionTrigger
+              class="text-lg font-semibold flex items-center justify-between p-3 border rounded-md hover:bg-slate-50"
+            >
+              <div class="flex items-center gap-2">
+                <span>Companies</span>
+                <span class="text-sm text-muted-foreground"
+                  >({{ companies?.data?.length || 0 }})</span
+                >
+              </div>
+            </AccordionTrigger>
+            <br />
+            <AccordionContent>
+              <div
+                v-if="companiesLoading"
+                class="grid grid-cols-2 sm:grid-cols-3 gap-3"
+              >
+                <Skeleton
+                  v-for="skeletonIndex in 6"
+                  :key="`c-${skeletonIndex}`"
+                  class="h-20"
+                />
+              </div>
+
+              <div
+                v-else-if="companies?.data && companies.data.length === 0"
+                class="text-muted-foreground"
+              >
+                No companies found for this member.
+              </div>
+
+              <div
+                v-else
+                class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3"
+              >
+                <RouterLink
+                  v-for="company in companies?.data || []"
+                  :key="company.id"
+                  :to="{ name: 'company', params: { companyId: company.id } }"
+                  class="block p-2 border rounded-md hover:shadow-sm bg-white"
+                >
+                  <Image
+                    :src="company.imgs?.internal || company.imgs?.public"
+                    class="w-full h-16 object-contain mb-2"
+                  />
+                  <div class="text-sm font-medium truncate">
+                    {{ company.name }}
+                  </div>
+                </RouterLink>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </section>
+
+      <aside>
+        <h2 class="text-xl font-semibold mb-3">Participations & Teams</h2>
+
+        <div v-if="participationsLoading">
+          <Skeleton
+            v-for="skeletonIndex in 4"
+            :key="skeletonIndex"
+            class="h-16 mb-2"
+          />
+        </div>
+
+        <div
+          v-else-if="participations?.data && participations.data.length === 0"
+          class="text-muted-foreground"
+        >
+          No participations found.
+        </div>
+
+        <div v-else class="space-y-3">
+          <div
+            v-for="participation in sortedParticipations"
+            :key="`${participation.event}-${participation.team}`"
+            class="p-3 border rounded"
+          >
+            <div class="font-medium">
+              {{ getEventName(participation.event) }}
+            </div>
+            <div class="text-sm text-muted-foreground">
+              Team: {{ getTeamName(participation.team) }}
+            </div>
+            <div class="text-sm text-muted-foreground">
+              Role: {{ participation.role }}
+            </div>
+          </div>
+        </div>
+      </aside>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+import { computed } from "vue";
+import { useQuery } from "@pinia/colada";
+import { getMemberById, getMemberParticipations } from "@/api/members";
+import { getAllSpeakers } from "@/api/speakers";
+import { getAllCompanies } from "@/api/companies";
+import { useEventStore } from "@/stores/event";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "@/components/ui/accordion";
+import Image from "@/components/Image.vue";
+import ContactCard from "@/components/ContactCard.vue";
+import { instance } from "@/api";
+import { Skeleton } from "@/components/ui/skeleton";
+import { getAllEvents } from "@/api/events";
+import type { Event } from "@/dto/events";
+
+const route = useRoute();
+const memberId = String(route.params.memberId || "");
+
+const { data: member } = useQuery({
+  key: () => ["member", memberId],
+  query: () => getMemberById(memberId),
+});
+
+const eventStore = useEventStore();
+
+const speakersFilters = computed(() => ({
+  member: memberId,
+  event: eventStore.selectedEvent?.id,
+}));
+
+const { data: speakers, isLoading: speakersLoading } = useQuery({
+  key: () => ["member-speakers", JSON.stringify(speakersFilters.value)],
+  query: () => getAllSpeakers(speakersFilters.value),
+});
+
+const contactId = computed(
+  () => member.value?.data?.contact as string | undefined,
+);
+
+const { data: contact, isLoading: contactLoading } = useQuery({
+  key: () => ["member-contact", contactId.value || ""],
+  enabled: () => !!contactId.value,
+  query: () => instance.get(`/contacts/${contactId.value}`),
+});
+
+const companiesFilters = computed(() => ({
+  member: memberId,
+  event: eventStore.selectedEvent?.id,
+}));
+
+const { data: companies, isLoading: companiesLoading } = useQuery({
+  key: () => ["member-companies", JSON.stringify(companiesFilters.value)],
+  query: () => getAllCompanies(companiesFilters.value),
+});
+
+// Collapsible implemented with Accordion UI - no local toggles needed
+
+const { data: participations, isLoading: participationsLoading } = useQuery({
+  key: () => ["member-participations", memberId],
+  query: () => getMemberParticipations(memberId),
+});
+
+const { data: eventsData } = useQuery({
+  key: () => ["events"],
+  query: () => getAllEvents(),
+});
+
+const getEventName = (id: number) => {
+  if (!eventsData.value?.data) return `Event ${id}`;
+  const evt = eventsData.value.data.find((e: Event) => e.id === id);
+  return evt?.name || `Event ${id}`;
+};
+
+const getTeamName = (team: string) => {
+  if (!team) return "";
+  return team.split(" (")[0];
+};
+
+// Sort participations by event id descending (largest -> smallest)
+const sortedParticipations = computed(() => {
+  const list = participations.value?.data || [];
+  return [...list].sort((a, b) => (b.event || 0) - (a.event || 0));
+});
+</script>
+
+<style scoped>
+.text-muted-foreground {
+  color: var(--muted-foreground);
+}
+</style>