diff --git a/frontend/src/components/ContactCard.vue b/frontend/src/components/ContactCard.vue
index 606a7084..14e0d65f 100644
--- a/frontend/src/components/ContactCard.vue
+++ b/frontend/src/components/ContactCard.vue
@@ -1,5 +1,14 @@
 <template>
-  <Card class="w-full">
+  <Card class="relative w-full gap-0 py-2.5">
+    <!-- Primary contact crown, sitting on the card's top-left border -->
+    <div
+      v-if="isPrimary"
+      class="absolute -top-2.5 -left-2.5 z-10 bg-orange-100 text-orange-600 rounded-full p-1 border border-orange-200 shadow-sm"
+      title="Primary contact (used in bulk emails)"
+    >
+      <CrownIcon class="size-3" />
+    </div>
+
     <!-- Overlay backdrop when popover is open -->
     <div
       v-if="isEditFormOpen || isDeleteConfirmOpen"
@@ -7,36 +16,73 @@
       @click="closeAllPopovers"
     ></div>
 
-    <CardContent>
-      <div v-if="!contact" class="text-center text-muted-foreground py-8">
+    <CardContent class="px-4">
+      <div v-if="!contact" class="text-center text-muted-foreground py-4">
         No contact information available
       </div>
 
-      <div v-else class="space-y-4">
-        <!-- Header with name and buttons -->
-        <div class="space-y-3">
-          <!-- Name and badges -->
-          <div v-if="contactName">
-            <h3 class="font-semibold text-base">{{ contactName }}</h3>
+      <div v-else class="space-y-1">
+        <!-- Header: name, socials, meta and actions -->
+        <div class="flex items-start gap-3">
+          <div class="flex-1 min-w-0">
+            <!-- Socials wrap to their own line when they don't fit next to the name -->
+            <div class="flex flex-wrap items-center gap-x-2 gap-y-0.5">
+              <h3
+                class="font-semibold text-sm leading-tight truncate min-w-0 max-w-full"
+                :title="contactName"
+              >
+                {{ contactName || "Unnamed Contact" }}
+              </h3>
+              <div
+                v-if="socialLinks.length"
+                class="flex items-center gap-0.5 -mx-0.5"
+              >
+                <a
+                  v-for="social in socialLinks"
+                  :key="social.label"
+                  :href="social.href"
+                  :target="social.external ? '_blank' : undefined"
+                  rel="noopener noreferrer"
+                  :title="social.label"
+                  :aria-label="social.label"
+                  class="p-0.5 rounded transition-colors hover:bg-accent"
+                  :class="social.color"
+                >
+                  <component :is="social.icon" class="size-3.5" />
+                </a>
+              </div>
+            </div>
             <div
               v-if="contact.gender || contact.language"
-              class="mt-1 flex gap-2"
+              class="mt-0.5 flex items-center gap-1.5 text-xs text-muted-foreground"
             >
-              <Badge v-if="contact.gender" variant="secondary" class="text-xs">
+              <span v-if="contact.gender">
                 {{ formatGender(contact.gender) }}
-              </Badge>
-              <Badge v-if="contact.language" variant="outline" class="text-xs">
+              </span>
+              <span v-if="contact.gender && contact.language">·</span>
+              <span
+                v-if="contact.language"
+                class="text-[10px] font-medium tracking-wide"
+                :title="formatLanguageName(contact.language)"
+              >
                 {{ formatLanguage(contact.language) }}
-              </Badge>
+              </span>
             </div>
           </div>
 
           <!-- Action buttons -->
-          <div v-if="canEdit" class="flex gap-2">
+          <div v-if="canEdit" class="flex items-center flex-shrink-0 -mr-1">
             <Popover v-model:open="isEditFormOpen">
               <PopoverTrigger as-child>
-                <Button variant="outline" size="sm" :disabled="isSaving">
-                  Edit
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  class="size-7 text-muted-foreground"
+                  :disabled="isSaving"
+                  title="Edit contact"
+                  aria-label="Edit contact"
+                >
+                  <PencilIcon class="size-3.5" />
                 </Button>
               </PopoverTrigger>
               <PopoverContent
@@ -73,12 +119,18 @@
             <Popover v-if="canDelete" v-model:open="isDeleteConfirmOpen">
               <PopoverTrigger as-child>
                 <Button
-                  variant="outline"
-                  size="sm"
+                  variant="ghost"
+                  size="icon"
                   :disabled="isDeleting"
-                  class="text-destructive hover:text-destructive"
+                  class="size-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                  :title="isDeleting ? 'Deleting...' : 'Remove contact'"
+                  aria-label="Remove contact"
                 >
-                  {{ isDeleting ? "Deleting..." : "Remove" }}
+                  <Loader2Icon
+                    v-if="isDeleting"
+                    class="size-3.5 animate-spin"
+                  />
+                  <Trash2Icon v-else class="size-3.5" />
                 </Button>
               </PopoverTrigger>
               <PopoverContent class="w-80">
@@ -94,126 +146,63 @@
           </div>
         </div>
 
-        <div v-if="contact.mails.length" class="space-y-2">
-          <h4 class="text-sm font-medium text-muted-foreground">Email</h4>
-          <div class="space-y-1">
-            <div v-for="mail in contact.mails" :key="mail.mail" class="text-sm">
-              <div class="flex items-start gap-2">
-                <div class="flex-1 min-w-0">
-                  <div class="flex flex-wrap items-center gap-2">
-                    <a
-                      :href="`mailto:${mail.mail}`"
-                      class="text-primary hover:underline min-w-0 flex-shrink-0"
-                    >
-                      {{ mail.mail }}
-                    </a>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      class="h-6 w-6 p-0"
-                      :disabled="isSaving"
-                      :title="'Copy email'"
-                      @click="copyEmail(mail.mail)"
-                    >
-                      <template v-if="copiedEmail === mail.mail">
-                        <CheckIcon class="w-4 h-4 text-black" />
-                      </template>
-                      <template v-else>
-                        <ClipboardIcon class="w-4 h-4" />
-                      </template>
-                    </Button>
-                    <div v-if="mail.personal" class="flex gap-1 flex-shrink-0">
-                      <Badge
-                        v-if="mail.personal"
-                        variant="secondary"
-                        class="text-xs"
-                      >
-                        Personal
-                      </Badge>
-                    </div>
-                  </div>
-                  <div v-if="copyError" class="text-xs text-destructive mt-1">
-                    {{ copyError }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div v-if="contact.phones.length" class="space-y-2">
-          <h4 class="text-sm font-medium text-muted-foreground">Phone</h4>
-          <div class="space-y-1">
-            <div
-              v-for="phone in contact.phones"
-              :key="phone.phone"
-              class="text-sm"
-            >
-              <div class="flex items-start gap-2">
-                <div class="flex-1 min-w-0">
-                  <div class="flex flex-wrap items-center gap-2">
-                    <a
-                      :href="`tel:${phone.phone}`"
-                      class="text-primary hover:underline min-w-0 flex-shrink-0"
-                    >
-                      {{ phone.phone }}
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div v-if="hasSocials(contact.socials)" class="space-y-2">
-          <h4 class="text-sm font-medium text-muted-foreground">
-            Social Media
-          </h4>
-          <div class="flex flex-wrap gap-2">
+        <!-- Emails and phones -->
+        <div
+          v-if="contact.mails.length || contact.phones.length"
+          class="space-y-0.5"
+        >
+          <div
+            v-for="mail in contact.mails"
+            :key="mail.mail"
+            class="group/row flex items-center gap-2 text-sm min-w-0"
+          >
+            <MailIcon class="size-3.5 flex-shrink-0 text-muted-foreground" />
             <a
-              v-if="contact.socials.linkedin"
-              :href="linkedinUrl(contact.socials.linkedin)"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="inline-flex items-center gap-1 text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors"
+              :href="`mailto:${mail.mail}`"
+              class="truncate hover:underline"
+              :title="mail.mail"
             >
-              LinkedIn
+              {{ mail.mail }}
             </a>
-            <a
-              v-if="contact.socials.twitter"
-              :href="twitterUrl(contact.socials.twitter)"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="inline-flex items-center gap-1 text-xs px-2 py-1 bg-sky-100 text-sky-700 rounded hover:bg-sky-200 transition-colors"
+            <Badge
+              v-if="mail.personal"
+              variant="secondary"
+              class="text-[10px] px-1.5 py-0 flex-shrink-0"
             >
-              Twitter
-            </a>
-            <a
-              v-if="contact.socials.facebook"
-              :href="facebookUrl(contact.socials.facebook)"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="inline-flex items-center gap-1 text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded hover:bg-blue-200 transition-colors"
+              Personal
+            </Badge>
+            <button
+              type="button"
+              class="flex-shrink-0 p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-accent transition-opacity cursor-pointer"
+              :class="
+                copiedEmail === mail.mail
+                  ? 'opacity-100'
+                  : 'opacity-60 sm:opacity-0 group-hover/row:opacity-100 focus-visible:opacity-100'
+              "
+              :title="copiedEmail === mail.mail ? 'Copied!' : 'Copy email'"
+              aria-label="Copy email"
+              @click="copyEmail(mail.mail)"
             >
-              Facebook
-            </a>
-            <a
-              v-if="contact.socials.github"
-              :href="githubUrl(contact.socials.github)"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="inline-flex items-center gap-1 text-xs px-2 py-1 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
-            >
-              GitHub
-            </a>
-            <a
-              v-if="contact.socials.skype"
-              :href="`skype:${contact.socials.skype}?chat`"
-              class="inline-flex items-center gap-1 text-xs px-2 py-1 bg-cyan-100 text-cyan-700 rounded hover:bg-cyan-200 transition-colors"
-            >
-              Skype
+              <CheckIcon
+                v-if="copiedEmail === mail.mail"
+                class="size-3.5 text-green-600"
+              />
+              <CopyIcon v-else class="size-3.5" />
+            </button>
+          </div>
+          <div
+            v-for="phone in contact.phones"
+            :key="phone.phone"
+            class="flex items-center gap-2 text-sm min-w-0"
+          >
+            <PhoneIcon class="size-3.5 flex-shrink-0 text-muted-foreground" />
+            <a :href="`tel:${phone.phone}`" class="truncate hover:underline">
+              {{ phone.phone }}
             </a>
           </div>
+          <div v-if="copyError" class="text-xs text-destructive">
+            {{ copyError }}
+          </div>
         </div>
       </div>
     </CardContent>
@@ -221,10 +210,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref, type Component } from "vue";
 import { useMutation, useQueryCache } from "@pinia/colada";
 import type { Contact } from "@/dto/contacts";
-import type { ContactSocials, CreateContactData } from "@/dto/contacts";
+import type { CreateContactData } from "@/dto/contacts";
 import { Gender, Language } from "@/dto/contacts";
 import { updateContact } from "@/api/contacts";
 import { updateCompanyRepresentative } from "@/api/companies";
@@ -236,7 +225,21 @@ import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import ContactForm from "./companies/ContactForm.vue";
 import ConfirmDelete from "@/components/ConfirmDelete.vue";
 import type { CreateCompanyRepData } from "@/dto/companies";
-import { ClipboardIcon, CheckIcon } from "lucide-vue-next";
+import {
+  CheckIcon,
+  CopyIcon,
+  CrownIcon,
+  FacebookIcon,
+  GithubIcon,
+  LinkedinIcon,
+  Loader2Icon,
+  MailIcon,
+  MessageCircleIcon,
+  PencilIcon,
+  PhoneIcon,
+  Trash2Icon,
+  TwitterIcon,
+} from "lucide-vue-next";
 
 interface Props {
   contact?: Contact;
@@ -247,12 +250,14 @@ interface Props {
   entityType?: "company" | "speaker";
   repId?: string;
   isDeleting?: boolean;
+  isPrimary?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   canEdit: false,
   canDelete: false,
   isDeleting: false,
+  isPrimary: false,
   contact: undefined,
   contactName: undefined,
   entityId: undefined,
@@ -353,12 +358,78 @@ const formatGender = (gender: Gender): string => {
   }
 };
 
+interface SocialLink {
+  label: string;
+  href: string;
+  icon: Component;
+  color: string;
+  external: boolean;
+}
+
+const socialLinks = computed<SocialLink[]>(() => {
+  const socials = props.contact?.socials;
+  if (!socials) return [];
+  const links: SocialLink[] = [];
+  if (socials.linkedin)
+    links.push({
+      label: "LinkedIn",
+      href: linkedinUrl(socials.linkedin),
+      icon: LinkedinIcon,
+      color: "text-[#0A66C2]",
+      external: true,
+    });
+  if (socials.twitter)
+    links.push({
+      label: "Twitter",
+      href: twitterUrl(socials.twitter),
+      icon: TwitterIcon,
+      color: "text-sky-500",
+      external: true,
+    });
+  if (socials.facebook)
+    links.push({
+      label: "Facebook",
+      href: facebookUrl(socials.facebook),
+      icon: FacebookIcon,
+      color: "text-[#1877F2]",
+      external: true,
+    });
+  if (socials.github)
+    links.push({
+      label: "GitHub",
+      href: githubUrl(socials.github),
+      icon: GithubIcon,
+      color: "text-foreground",
+      external: true,
+    });
+  if (socials.skype)
+    links.push({
+      label: "Skype",
+      href: `skype:${socials.skype}?chat`,
+      icon: MessageCircleIcon,
+      color: "text-cyan-600",
+      external: false,
+    });
+  return links;
+});
+
 const formatLanguage = (language: Language): string => {
   switch (language) {
     case Language.PORTUGUESE:
-      return "🇵🇹";
+      return "PT";
+    case Language.ENGLISH:
+      return "EN";
+    default:
+      return "";
+  }
+};
+
+const formatLanguageName = (language: Language): string => {
+  switch (language) {
+    case Language.PORTUGUESE:
+      return "Portuguese";
     case Language.ENGLISH:
-      return "🇺🇸";
+      return "English";
     default:
       return "";
   }
@@ -374,17 +445,6 @@ const closeAllPopovers = () => {
   isDeleteConfirmOpen.value = false;
 };
 
-const hasSocials = (socials?: ContactSocials): boolean => {
-  if (!socials) return false;
-  return !!(
-    socials.linkedin ||
-    socials.twitter ||
-    socials.facebook ||
-    socials.github ||
-    socials.skype
-  );
-};
-
 const copiedEmail = ref<string | null>(null);
 const copyError = ref<string | null>(null);
 
diff --git a/frontend/src/components/companies/CompanyContacts.vue b/frontend/src/components/companies/CompanyContacts.vue
index 372b17db..a6c71d91 100644
--- a/frontend/src/components/companies/CompanyContacts.vue
+++ b/frontend/src/components/companies/CompanyContacts.vue
@@ -78,7 +78,7 @@
         @click="isAddFormOpen = true"
       />
 
-      <div v-else class="space-y-4">
+      <div v-else class="space-y-3">
         <div
           v-for="(rep, index) in orderedRepresentatives"
           :key="rep.id"
@@ -111,29 +111,7 @@
             </Button>
           </div>
 
-          <div class="relative group">
-            <!-- Primary contact indicator -->
-            <div
-              v-if="index === 0"
-              class="absolute -top-2 -right-2 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-            >
-              <div
-                class="bg-primary text-primary-foreground text-xs px-2 py-1 rounded-full shadow-lg flex items-center gap-1"
-              >
-                <CrownIcon class="w-3 h-3" />
-                Primary Contact
-              </div>
-            </div>
-
-            <!-- Always visible crown for first contact -->
-            <div
-              v-if="index === 0"
-              class="absolute -top-1 -right-1 z-10 bg-orange-100 text-orange-600 rounded-full p-1 shadow-sm border border-orange-200"
-              title="Primary Contact"
-            >
-              <CrownIcon class="w-3 h-3" />
-            </div>
-
+          <div class="relative">
             <ContactCard
               :contact="rep.contact"
               :contact-name="rep.name"
@@ -143,6 +121,7 @@
               entity-type="company"
               :rep-id="rep.id"
               :is-deleting="isDeleting"
+              :is-primary="index === 0"
               :class="{
                 'ml-2 md:ml-4': isReorderMode,
                 'transition-all duration-300': true,
@@ -173,7 +152,6 @@ import {
   GripVerticalIcon,
   ChevronUpIcon,
   ChevronDownIcon,
-  CrownIcon,
 } from "lucide-vue-next";
 import Card from "../ui/card/Card.vue";
 import CardContent from "../ui/card/CardContent.vue";