diff --git a/frontend/src/components/cockpit/about-me/EditUserDetails.vue b/frontend/src/components/cockpit/about-me/EditUserDetails.vue
index 0d72326c6..f2e3fb62c 100644
--- a/frontend/src/components/cockpit/about-me/EditUserDetails.vue
+++ b/frontend/src/components/cockpit/about-me/EditUserDetails.vue
@@ -59,7 +59,7 @@ import { reactive } from 'vue'
 
 import CockpitCard from '#components/cockpit/cockpit-card/CockpitCard.vue'
 
-import { detailCategories, detailCategoryToIcon } from './detailCategories'
+import { detailCategories, detailCategoryToIcon } from '#src/utils/detailCategories'
 import Details from './UserDetails.vue'
 
 import type { UserDetail, AddUserDetailInput } from '#stores/userStore'
diff --git a/frontend/src/components/cockpit/about-me/UserDetails.vue b/frontend/src/components/cockpit/about-me/UserDetails.vue
index cbc647440..8b9e457fb 100644
--- a/frontend/src/components/cockpit/about-me/UserDetails.vue
+++ b/frontend/src/components/cockpit/about-me/UserDetails.vue
@@ -24,7 +24,7 @@
 import { computed, Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { detailCategories, detailCategoryToIcon } from './detailCategories'
+import { detailCategories, detailCategoryToIcon } from '#src/utils/detailCategories'
 
 import type { UserDetail } from '#stores/userStore'
 
diff --git a/frontend/src/components/starmap/HoverInfo.vue b/frontend/src/components/starmap/HoverInfo.vue
index dabd88bfa..08f76a3bd 100644
--- a/frontend/src/components/starmap/HoverInfo.vue
+++ b/frontend/src/components/starmap/HoverInfo.vue
@@ -6,7 +6,7 @@
       </v-avatar>
       <h3>{{ props.data?.name }}</h3>
     </div>
-    <div v-show="showMoreButton" class="mt-2 d-flex align-center justify-center">
+    <div v-if="showMoreButton" class="mt-2 d-flex align-center justify-center">
       <button @click="showMore">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -43,10 +43,10 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'show-more', id: number): void
+  (e: 'show-more'): void
 }>()
 
-const showMore = () => props.data && emit('show-more', props.data?.id)
+const showMore = () => emit('show-more')
 
 const coordinates = computed(() => ({
   x: props.x,
diff --git a/frontend/src/components/starmap/SidebarInfo.vue b/frontend/src/components/starmap/SidebarInfo.vue
new file mode 100644
index 000000000..4c9ca7a4c
--- /dev/null
+++ b/frontend/src/components/starmap/SidebarInfo.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="sidebar">
+    <div class="close">
+      <v-btn icon variant="text" size="small" @click="$emit('close')">
+        <v-icon icon="mdi-close" />
+      </v-btn>
+    </div>
+    <v-avatar :size="85" class="avatar mb-2 text-font">
+      <span>{{ getInitials(props.profile.name) }}</span>
+    </v-avatar>
+    <h3 class="mt-2">{{ props.profile.name }}</h3>
+
+    <div class="availability mt-4 mb-4">
+      <v-icon icon="mdi mdi-circle" :color="availability?.props.circleColor" />
+      {{ availability?.title }}
+    </div>
+    <UserDetails :details="props.profile.details" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import { getInitials } from '#src/utils/getInitials'
+
+import UserDetails from './UserDetails.vue'
+
+import type { UserWithProfile } from '#stores/userStore'
+
+const props = defineProps<{
+  profile: UserWithProfile
+}>()
+
+defineEmits<{
+  (e: 'close'): void
+}>()
+
+const availability = computed(() =>
+  availabilityOptions.find((a) => a.value === props.profile.availability),
+)
+
+const availabilityOptions = [
+  { value: null, title: 'Not specified', props: { circleColor: '#CCCCCC' } },
+  { value: 'available', title: 'Available to work', props: { circleColor: '#23AD5B' } },
+  { value: 'partly_available', title: 'Busy but has time', props: { circleColor: '#F09630' } },
+  { value: 'busy', title: 'Busy', props: { circleColor: '#D02F44' } },
+]
+</script>
+
+<style scoped>
+.sidebar {
+  border-radius: 15px 0px 0px 15px;
+  background: rgba(61, 71, 83, 0.75);
+  backdrop-filter: blur(15px);
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  position: fixed;
+  right: 0;
+  top: 90px;
+  width: min(350px, 100vw);
+  height: 100%;
+  z-index: 200;
+  color: #f5f5f5;
+}
+
+.close {
+  display: flex;
+  width: 100%;
+  padding: 8px 16px;
+  place-content: flex-start flex-start;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+
+.avatar {
+  background-color: rgb(var(--v-theme-cockpit-highlight));
+  border-radius: 50%;
+}
+
+.availability {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+  padding-inline: 8px;
+  color: white;
+  border-radius: 9999px;
+  background: #5d6670;
+  border: 1px solid rgb(214 223 233 / 40%);
+  font-size: 10px;
+}
+</style>
diff --git a/frontend/src/components/starmap/StarMap.vue b/frontend/src/components/starmap/StarMap.vue
index 7461d79a0..870806036 100644
--- a/frontend/src/components/starmap/StarMap.vue
+++ b/frontend/src/components/starmap/StarMap.vue
@@ -2,7 +2,12 @@
   <div class="canvas-container">
     <canvas ref="canvas" gl="{{powerPreference: 'default', antialias: false}}"></canvas>
   </div>
-  <HoverInfo v-bind="hoveredStar" :show-more-button="true" />
+  <HoverInfo
+    v-bind="hoveredStar"
+    :show-more-button="displayedProfile?.id !== hoveredStar.data?.id"
+    @show-more="displayHoveredProfile"
+  />
+  <SidebarInfo v-if="displayedProfile" :profile="displayedProfile" @close="closeProfile" />
 </template>
 
 <script lang="ts" setup>
@@ -30,6 +35,7 @@ import { onMounted, reactive, ref, watch } from 'vue'
 import { starmapQuery, StarmapQueryResult, StarLine, Star } from '#queries/starmapQuery'
 
 import HoverInfo from './HoverInfo.vue'
+import SidebarInfo from './SidebarInfo.vue'
 
 import type { UserWithProfile } from '#stores/userStore'
 
@@ -49,6 +55,20 @@ const hoveredStar = reactive<HoveredStar>({
   y: 0,
 })
 
+const displayedProfile = ref<UserWithProfile | null>(null)
+
+const displayProfile = (data: UserWithProfile) => {
+  displayedProfile.value = data
+}
+
+const displayHoveredProfile = () => {
+  displayedProfile.value = hoveredStar.data
+}
+
+const closeProfile = () => {
+  displayedProfile.value = null
+}
+
 const { result: starmapQueryResult } = useQuery(
   starmapQuery,
   {},
@@ -262,8 +282,7 @@ const onWindowResize = () => {
 const onCanvasClick = (event: MouseEvent) => {
   const star = getRaycasterIntersects(event)
   if (star) {
-    // eslint-disable-next-line no-console
-    console.log('Stern angeklickt!', star.data)
+    displayProfile(star.data)
   }
 }
 
diff --git a/frontend/src/components/starmap/UserDetails.vue b/frontend/src/components/starmap/UserDetails.vue
new file mode 100644
index 000000000..4d03c9103
--- /dev/null
+++ b/frontend/src/components/starmap/UserDetails.vue
@@ -0,0 +1,47 @@
+<template>
+  <ul class="details">
+    <li v-for="detail in props.details" :key="detail.id">
+      <v-chip class="detail border-thin">
+        <v-icon
+          :icon="detailCategoryToIcon(detail.category)"
+          class="mr-2"
+          color="cockpit-highlight"
+        ></v-icon>
+        {{ detail.text }}
+      </v-chip>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { detailCategoryToIcon } from '#src/utils/detailCategories'
+
+import type { UserDetail } from '#stores/userStore'
+
+const props = defineProps<{
+  details: UserDetail[]
+}>()
+</script>
+
+<style scoped>
+.detail {
+  background: rgb(61 71 83);
+
+  &:deep(.v-chip__underlay) {
+    display: none;
+  }
+
+  &:deep(.v-chip__content) {
+    font-size: 11px;
+  }
+}
+
+.details {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 10px;
+  width: 100%;
+  padding: 10px;
+  list-style: none;
+}
+</style>
diff --git a/frontend/src/layouts/DefaultLayout.vue b/frontend/src/layouts/DefaultLayout.vue
index 8f731d2ca..7c64dc0a3 100644
--- a/frontend/src/layouts/DefaultLayout.vue
+++ b/frontend/src/layouts/DefaultLayout.vue
@@ -205,6 +205,7 @@ const { isModalActive } = useModal()
   height: 120px;
   overflow: hidden;
   background: transparent;
+  pointer-events: none;
 }
 
 .dream-mall-floating-container {
diff --git a/frontend/src/components/cockpit/about-me/detailCategories.ts b/frontend/src/utils/detailCategories.ts
similarity index 100%
rename from frontend/src/components/cockpit/about-me/detailCategories.ts
rename to frontend/src/utils/detailCategories.ts