diff --git a/src/components/layout/DashboardLayout.tsx b/src/components/layout/DashboardLayout.tsx
index adca7af..4c2c21d 100644
--- a/src/components/layout/DashboardLayout.tsx
+++ b/src/components/layout/DashboardLayout.tsx
@@ -33,6 +33,11 @@ import {
   Hub,
   Dashboard,
   Notifications,
+  FamilyRestroom,
+  Person,
+  Business,
+  Work,
+  People,
 } from '@mui/icons-material';
 import BottomNavigation from '../navigation/BottomNavigation';
 import { notificationService } from '../../services/notificationService';
@@ -52,6 +57,14 @@ interface DashboardLayoutProps {
   children: ReactNode;
 }
 
+interface RelationshipCategory {
+  id: string;
+  name: string;
+  icon: ReactNode;
+  color: string;
+  count: number;
+}
+
 const DashboardLayout = ({ children }: DashboardLayoutProps) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -64,6 +77,7 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => {
     pending: 0,
     byType: { vouch: 0, praise: 0, connection: 0, group_invite: 0, message: 0, system: 0 }
   });
+  const [dragOverCategory, setDragOverCategory] = useState<string | null>(null);
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -74,6 +88,15 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => {
     { text: 'Chat', icon: <Chat />, path: '/messages' },
   ];
 
+  const relationshipCategories: RelationshipCategory[] = [
+    { id: 'close_family', name: 'Close Family', icon: <FamilyRestroom />, color: '#d32f2f', count: 0 },
+    { id: 'family', name: 'Family', icon: <People />, color: '#f57c00', count: 0 },
+    { id: 'friend', name: 'Friend', icon: <Person />, color: '#388e3c', count: 0 },
+    { id: 'colleague', name: 'Colleague', icon: <Work />, color: '#1976d2', count: 0 },
+    { id: 'business', name: 'Business', icon: <Business />, color: '#7b1fa2', count: 0 },
+    { id: 'acquaintance', name: 'Acquaintance', icon: <Groups />, color: '#616161', count: 0 },
+  ];
+
   // Load notification summary for badge
   useEffect(() => {
     const loadNotificationSummary = async () => {
@@ -133,6 +156,34 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => {
     return false;
   };
 
+  const handleDragOver = (e: React.DragEvent, categoryId: string) => {
+    e.preventDefault();
+    setDragOverCategory(categoryId);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOverCategory(null);
+  };
+
+  const handleDrop = (e: React.DragEvent, categoryId: string) => {
+    e.preventDefault();
+    setDragOverCategory(null);
+    
+    const contactData = e.dataTransfer.getData('application/json');
+    if (contactData) {
+      try {
+        const contact = JSON.parse(contactData);
+        // Emit custom event for contact categorization
+        window.dispatchEvent(new CustomEvent('contactCategorized', {
+          detail: { contactId: contact.id, category: categoryId, contact }
+        }));
+      } catch (error) {
+        console.error('Error parsing contact data:', error);
+      }
+    }
+  };
+
   const renderNavItem = (item: NavItem, level: number = 0) => {
     const hasChildren = item.children && item.children.length > 0;
     const isExpanded = expandedItems.has(item.text);
@@ -211,10 +262,77 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => {
         </Typography>
       </Box>
       
-      <List sx={{ flex: 1, py: 2, overflow: 'hidden' }}>
+      <List sx={{ py: 2, flexShrink: 0 }}>
         {navItems.map((item) => renderNavItem(item))}
       </List>
 
+      {/* Relationship Categories */}
+      <Box sx={{ px: 2, pb: 2, flexGrow: 1, overflow: 'auto' }}>
+        <Divider sx={{ mb: 2 }} />
+        <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600, color: 'text.secondary', px: 1 }}>
+          Relationship Categories
+        </Typography>
+        <Typography variant="caption" sx={{ mb: 2, color: 'text.secondary', px: 1, fontSize: '0.7rem', lineHeight: 1.2, display: 'block' }}>
+          Drag and drop contacts into a category to automatically set sharing permissions.
+        </Typography>
+        <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1 }}>
+          {relationshipCategories.map((category) => (
+            <Box
+              key={category.id}
+              onDragOver={(e) => handleDragOver(e, category.id)}
+              onDragLeave={handleDragLeave}
+              onDrop={(e) => handleDrop(e, category.id)}
+              sx={{
+                minHeight: 80,
+                border: 2,
+                borderColor: dragOverCategory === category.id ? category.color : 'divider',
+                borderStyle: dragOverCategory === category.id ? 'solid' : 'dashed',
+                borderRadius: 2,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                p: 1,
+                cursor: 'pointer',
+                backgroundColor: dragOverCategory === category.id ? `${category.color}10` : 'transparent',
+                transition: 'all 0.2s ease-in-out',
+                '&:hover': {
+                  borderColor: category.color,
+                  backgroundColor: `${category.color}08`,
+                },
+              }}
+            >
+              <Box sx={{ color: category.color, mb: 0.5 }}>
+                {category.icon}
+              </Box>
+              <Typography 
+                variant="caption" 
+                sx={{ 
+                  textAlign: 'center', 
+                  fontSize: '0.7rem', 
+                  fontWeight: 500,
+                  lineHeight: 1.2
+                }}
+              >
+                {category.name}
+              </Typography>
+              {category.count > 0 && (
+                <Typography 
+                  variant="caption" 
+                  sx={{ 
+                    color: 'text.secondary', 
+                    fontSize: '0.6rem',
+                    mt: 0.5
+                  }}
+                >
+                  {category.count}
+                </Typography>
+              )}
+            </Box>
+          ))}
+        </Box>
+      </Box>
+
     </Box>
   );
 
diff --git a/src/pages/ContactListPage.tsx b/src/pages/ContactListPage.tsx
index f9c5037..bc4da18 100644
--- a/src/pages/ContactListPage.tsx
+++ b/src/pages/ContactListPage.tsx
@@ -14,7 +14,15 @@ import {
   CardContent,
   Grid,
   alpha,
-  useTheme
+  useTheme,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  IconButton,
+  Menu,
+  ListItemIcon,
+  ListItemText
 } from '@mui/material';
 import NetworkGraph from '../components/NetworkGraph';
 import {
@@ -35,7 +43,17 @@ import {
   Schedule,
   Send,
   ArrowUpward,
-  ArrowDownward
+  ArrowDownward,
+  FilterList,
+  Sort,
+  SortByAlpha,
+  Business,
+  AccessTime,
+  FamilyRestroom,
+  Person,
+  Work,
+  People,
+  DragIndicator
 } from '@mui/icons-material';
 import { dataService } from '../services/dataService';
 import type { Contact } from '../types/contact';
@@ -47,6 +65,12 @@ const ContactListPage = () => {
   const [searchQuery, setSearchQuery] = useState('');
   const [tabValue, setTabValue] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
+  const [relationshipFilter, setRelationshipFilter] = useState<string>('all');
+  const [groupFilter, setGroupFilter] = useState<string>('all');
+  const [sortBy, setSortBy] = useState<string>('name');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+  const [filterMenuAnchor, setFilterMenuAnchor] = useState<null | HTMLElement>(null);
+  const [sortMenuAnchor, setSortMenuAnchor] = useState<null | HTMLElement>(null);
   const theme = useTheme();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
@@ -70,17 +94,79 @@ const ContactListPage = () => {
       }
     };
     loadContacts();
+
+    // Listen for contact categorization events from the sidebar
+    const handleContactCategorized = (event: CustomEvent) => {
+      const { contactId, category } = event.detail;
+      setContacts(prevContacts => 
+        prevContacts.map(contact => 
+          contact.id === contactId 
+            ? { ...contact, relationshipCategory: category }
+            : contact
+        )
+      );
+    };
+
+    window.addEventListener('contactCategorized', handleContactCategorized as EventListener);
+    return () => {
+      window.removeEventListener('contactCategorized', handleContactCategorized as EventListener);
+    };
   }, []);
 
   useEffect(() => {
-    const filtered = contacts.filter(contact =>
-      contact.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      contact.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      contact.company?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      contact.position?.toLowerCase().includes(searchQuery.toLowerCase())
-    );
+    let filtered = contacts.filter(contact => {
+      // Search filter
+      const matchesSearch = searchQuery === '' || 
+        contact.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        contact.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        contact.company?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        contact.position?.toLowerCase().includes(searchQuery.toLowerCase());
+
+      // Relationship filter
+      const matchesRelationship = relationshipFilter === 'all' || 
+        (relationshipFilter === 'undefined' && !contact.relationshipCategory) ||
+        contact.relationshipCategory === relationshipFilter;
+
+      // Group filter
+      const matchesGroup = groupFilter === 'all' || 
+        (groupFilter === 'has_groups' && contact.groupIds && contact.groupIds.length > 0) ||
+        (groupFilter === 'no_groups' && (!contact.groupIds || contact.groupIds.length === 0));
+
+      return matchesSearch && matchesRelationship && matchesGroup;
+    });
+
+    // Sort the filtered results
+    filtered.sort((a, b) => {
+      let compareValue = 0;
+      
+      switch (sortBy) {
+        case 'name':
+          compareValue = a.name.localeCompare(b.name);
+          break;
+        case 'company':
+          const aCompany = a.company || '';
+          const bCompany = b.company || '';
+          compareValue = aCompany.localeCompare(bCompany);
+          break;
+        case 'naoStatus':
+          const statusOrder = { 'member': 0, 'invited': 1, 'not_invited': 2 };
+          compareValue = (statusOrder[a.naoStatus as keyof typeof statusOrder] || 3) - 
+                        (statusOrder[b.naoStatus as keyof typeof statusOrder] || 3);
+          break;
+        case 'groupCount':
+          const aGroups = a.groupIds?.length || 0;
+          const bGroups = b.groupIds?.length || 0;
+          compareValue = aGroups - bGroups;
+          break;
+        default:
+          compareValue = 0;
+      }
+
+      return sortDirection === 'asc' ? compareValue : -compareValue;
+    });
+
     setFilteredContacts(filtered);
-  }, [searchQuery, contacts]);
+  }, [searchQuery, contacts, relationshipFilter, groupFilter, sortBy, sortDirection]);
 
   const handleContactClick = (contactId: string) => {
     if (isSelectionMode) {
@@ -149,6 +235,55 @@ const ContactListPage = () => {
     navigate(`/invite?inviteeName=${encodeURIComponent(contact.name)}&inviteeEmail=${encodeURIComponent(contact.email)}`);
   };
 
+  const handleFilterClick = (event: React.MouseEvent<HTMLElement>) => {
+    setFilterMenuAnchor(event.currentTarget);
+  };
+
+  const handleSortClick = (event: React.MouseEvent<HTMLElement>) => {
+    setSortMenuAnchor(event.currentTarget);
+  };
+
+  const handleFilterClose = () => {
+    setFilterMenuAnchor(null);
+  };
+
+  const handleSortClose = () => {
+    setSortMenuAnchor(null);
+  };
+
+  const handleSortChange = (newSortBy: string) => {
+    if (sortBy === newSortBy) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortBy(newSortBy);
+      setSortDirection('asc');
+    }
+    handleSortClose();
+  };
+
+  const clearFilters = () => {
+    setRelationshipFilter('all');
+    setGroupFilter('all');
+    setSearchQuery('');
+  };
+
+  const getRelationshipCategoryInfo = (category?: string) => {
+    const categories = {
+      'close_family': { name: 'Close Family', icon: <FamilyRestroom sx={{ fontSize: 14 }} />, color: '#d32f2f' },
+      'family': { name: 'Family', icon: <People sx={{ fontSize: 14 }} />, color: '#f57c00' },
+      'friend': { name: 'Friend', icon: <Person sx={{ fontSize: 14 }} />, color: '#388e3c' },
+      'colleague': { name: 'Colleague', icon: <Work sx={{ fontSize: 14 }} />, color: '#1976d2' },
+      'business': { name: 'Business', icon: <Business sx={{ fontSize: 14 }} />, color: '#7b1fa2' },
+      'acquaintance': { name: 'Acquaintance', icon: <Group sx={{ fontSize: 14 }} />, color: '#616161' },
+    };
+    return category ? categories[category as keyof typeof categories] : null;
+  };
+
+  const handleDragStart = (e: React.DragEvent, contact: Contact) => {
+    e.dataTransfer.setData('application/json', JSON.stringify(contact));
+    e.dataTransfer.effectAllowed = 'move';
+  };
+
   const getVouchPraiseCounts = (contact: Contact) => {
     // Based on the contact detail page data, return appropriate counts
     // This would normally come from a real data service, but for demo purposes:
@@ -369,9 +504,112 @@ const ContactListPage = () => {
                 </InputAdornment>
               ),
             }}
-            sx={{ mb: 3 }}
+            sx={{ mb: 2 }}
           />
 
+          {/* Filter and Sort Controls */}
+          <Box sx={{ 
+            display: 'flex', 
+            gap: 2, 
+            mb: 3, 
+            alignItems: 'center',
+            flexWrap: 'wrap'
+          }}>
+            {/* Relationship Filter */}
+            <FormControl size="small" sx={{ minWidth: 140 }}>
+              <InputLabel>Relationship</InputLabel>
+              <Select
+                value={relationshipFilter}
+                label="Relationship"
+                onChange={(e) => setRelationshipFilter(e.target.value)}
+              >
+                <MenuItem value="all">All Relationships</MenuItem>
+                <MenuItem value="undefined">Undefined</MenuItem>
+                <MenuItem value="close_family">Close Family</MenuItem>
+                <MenuItem value="family">Family</MenuItem>
+                <MenuItem value="friend">Friend</MenuItem>
+                <MenuItem value="colleague">Colleague</MenuItem>
+                <MenuItem value="business">Business</MenuItem>
+                <MenuItem value="acquaintance">Acquaintance</MenuItem>
+              </Select>
+            </FormControl>
+
+            {/* Group Filter */}
+            <FormControl size="small" sx={{ minWidth: 120 }}>
+              <InputLabel>Groups</InputLabel>
+              <Select
+                value={groupFilter}
+                label="Groups"
+                onChange={(e) => setGroupFilter(e.target.value)}
+              >
+                <MenuItem value="all">All Groups</MenuItem>
+                <MenuItem value="has_groups">In Groups</MenuItem>
+                <MenuItem value="no_groups">No Groups</MenuItem>
+              </Select>
+            </FormControl>
+
+            {/* Sort Button */}
+            <Button
+              variant="outlined"
+              startIcon={<Sort />}
+              onClick={handleSortClick}
+              size="small"
+              sx={{ height: 40 }}
+            >
+              Sort by {sortBy === 'name' ? 'Name' : sortBy === 'company' ? 'Company' : sortBy === 'naoStatus' ? 'Status' : 'Groups'}
+              {sortDirection === 'desc' ? ' ↓' : ' ↑'}
+            </Button>
+
+            {/* Clear Filters */}
+            {(relationshipFilter !== 'all' || groupFilter !== 'all' || searchQuery !== '') && (
+              <Button
+                variant="text"
+                onClick={clearFilters}
+                size="small"
+                color="secondary"
+              >
+                Clear Filters
+              </Button>
+            )}
+
+            {/* Results Count */}
+            <Typography variant="body2" color="text.secondary" sx={{ ml: 'auto' }}>
+              {filteredContacts.length} of {contacts.length} contacts
+            </Typography>
+          </Box>
+
+          {/* Sort Menu */}
+          <Menu
+            anchorEl={sortMenuAnchor}
+            open={Boolean(sortMenuAnchor)}
+            onClose={handleSortClose}
+          >
+            <MenuItem onClick={() => handleSortChange('name')}>
+              <ListItemIcon>
+                <SortByAlpha fontSize="small" />
+              </ListItemIcon>
+              <ListItemText>Name</ListItemText>
+            </MenuItem>
+            <MenuItem onClick={() => handleSortChange('company')}>
+              <ListItemIcon>
+                <Business fontSize="small" />
+              </ListItemIcon>
+              <ListItemText>Company</ListItemText>
+            </MenuItem>
+            <MenuItem onClick={() => handleSortChange('naoStatus')}>
+              <ListItemIcon>
+                <VerifiedUser fontSize="small" />
+              </ListItemIcon>
+              <ListItemText>NAO Status</ListItemText>
+            </MenuItem>
+            <MenuItem onClick={() => handleSortChange('groupCount')}>
+              <ListItemIcon>
+                <Group fontSize="small" />
+              </ListItemIcon>
+              <ListItemText>Group Count</ListItemText>
+            </MenuItem>
+          </Menu>
+
           {isLoading ? (
             <Box sx={{ textAlign: 'center', py: 8 }}>
               <Typography variant="h6" color="text.secondary" gutterBottom>
@@ -391,31 +629,54 @@ const ContactListPage = () => {
               </Typography>
             </Box>
           ) : (
-            <Grid container spacing={2}>
+            <Grid container spacing={1}>
               {filteredContacts.map((contact) => (
                 <Grid size={{ xs: 12 }} key={contact.id}>
-                  <Card
-                    onClick={() => handleContactClick(contact.id)}
-                    sx={{
-                      cursor: isSelectionMode ? 'default' : 'pointer',
-                      transition: 'all 0.2s ease-in-out',
-                      border: 1,
-                      borderColor: 'divider',
-                      '&:hover': !isSelectionMode ? {
-                        borderColor: 'primary.main',
-                        boxShadow: theme.shadows[2],
-                        transform: 'translateY(-1px)',
-                      } : {},
-                    }}
-                  >
-                    <CardContent sx={{ p: 3 }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                    {/* Drag Handle - positioned to align with filter dropdown */}
+                    {!isSelectionMode && (
+                      <DragIndicator 
+                        sx={{ 
+                          fontSize: 16, 
+                          color: 'text.disabled', 
+                          cursor: 'grab',
+                          '&:hover': { color: 'text.secondary' },
+                          ml: 0.5
+                        }} 
+                      />
+                    )}
+                    
+                    <Box sx={{ width: '20px' }} />
+                    
+                    <Card
+                      draggable={!isSelectionMode}
+                      onDragStart={(e) => handleDragStart(e, contact)}
+                      onClick={() => handleContactClick(contact.id)}
+                      sx={{
+                        cursor: isSelectionMode ? 'default' : 'grab',
+                        transition: 'all 0.2s ease-in-out',
+                        border: 1,
+                        borderColor: 'divider',
+                        '&:hover': !isSelectionMode ? {
+                          borderColor: 'primary.main',
+                          boxShadow: theme.shadows[2],
+                          transform: 'translateY(-1px)',
+                        } : {},
+                        '&:active': {
+                          cursor: 'grabbing',
+                        },
+                        position: 'relative',
+                        flex: 1,
+                      }}
+                    >
+                    <CardContent sx={{ p: 1 }}>
                       {/* Desktop Layout */}
-                      <Box sx={{ display: { xs: 'none', md: 'flex' }, alignItems: 'flex-start', width: '100%' }}>
+                      <Box sx={{ display: { xs: 'none', md: 'flex' }, alignItems: 'flex-start', width: '100%', height: 44 }}>
                         {/* Avatar */}
                         <Box
                           sx={{ 
-                            width: 56, 
-                            height: 56,
+                            width: 44, 
+                            height: 44,
                             borderRadius: '50%',
                             backgroundImage: contact.profileImage ? `url(${contact.profileImage})` : 'none',
                             backgroundSize: contact.profileImage ? getContactPhotoStyles(contact.name).backgroundSize : 'cover',
@@ -428,22 +689,26 @@ const ContactListPage = () => {
                             fontSize: '1.25rem',
                             fontWeight: 600,
                             flexShrink: 0,
-                            mr: 3
+                            mr: 2
                           }}
                         >
                           {!contact.profileImage && contact.name.charAt(0)}
                         </Box>
                         
-                        {/* Left Column - Basic Info */}
-                        <Box sx={{ width: 280, flexShrink: 0, mr: 3 }}>
-                          {/* Name with source icon inline */}
+                        {/* First Column - Name & Title */}
+                        <Box sx={{ width: 320, flexShrink: 0, mr: 3, minWidth: 0 }}>
+                          {/* Name with source icon */}
                           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
                             <Typography 
                               variant="h6" 
                               sx={{ 
                                 fontWeight: 600,
-                                fontSize: '1.125rem',
-                                color: 'text.primary'
+                                fontSize: '0.95rem',
+                                color: 'text.primary',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                flex: 1
                               }}
                             >
                               {contact.name}
@@ -451,279 +716,164 @@ const ContactListPage = () => {
                             {getSourceIcon(contact.source)}
                           </Box>
                           
-                          {/* Job Title & Company */}
+                          {/* Job Title & Company - single line */}
                           <Typography 
                             variant="body2" 
                             color="text.secondary" 
-                            sx={{ mb: 1, lineHeight: 1.4 }}
+                            sx={{ 
+                              fontSize: '0.75rem',
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              whiteSpace: 'nowrap'
+                            }}
                           >
                             {contact.position}{contact.company && ` at ${contact.company}`}
                           </Typography>
-                          
-                          {/* Email */}
+                        </Box>
+
+                        {/* Second Column - Email */}
+                        <Box sx={{ width: 160, flexShrink: 0, mr: 2, minWidth: 0, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', alignItems: 'flex-start', height: 44, pt: '2px', pb: '2px' }}>
                           <Typography 
                             variant="body2" 
                             color="text.secondary" 
                             sx={{ 
-                              fontSize: '0.875rem',
+                              fontSize: '0.8rem',
                               overflow: 'hidden',
                               textOverflow: 'ellipsis',
-                              whiteSpace: 'nowrap'
+                              whiteSpace: 'nowrap',
+                              lineHeight: '1.25rem'
                             }}
                           >
                             {contact.email}
                           </Typography>
+                          {contact.name === 'Aza Mafi' && (
+                            <Typography 
+                              variant="body2" 
+                              color="text.secondary" 
+                              sx={{ 
+                                fontSize: '0.75rem',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                lineHeight: '1.1rem'
+                              }}
+                            >
+                              +1 (415)555-7892
+                            </Typography>
+                          )}
                         </Box>
 
-                        {/* Middle Column - Vouch & Praise Counts + Tags */}
+                        {/* Right Column - Relationship, Vouches, Praise */}
                         <Box sx={{ 
-                          display: 'flex',
+                          display: 'flex', 
                           flexDirection: 'column',
-                          alignItems: 'flex-start',
-                          justifyContent: 'flex-start',
-                          gap: 1,
-                          flexGrow: 1,
-                          pt: 0.5,
-                          minWidth: 200
+                          justifyContent: 'space-between',
+                          alignItems: 'flex-end',
+                          height: 44,
+                          flexShrink: 0,
+                          ml: 'auto',
+                          pt: '1px',
+                          pb: '1px'
                         }}>
-                          {/* Vouches and Praises Row */}
-                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, height: 24 }}>
-                            {(() => {
-                              const counts = getVouchPraiseCounts(contact);
-                              const totalVouches = counts.vouchesSent + counts.vouchesReceived;
-                              const totalPraises = counts.praisesSent + counts.praisesReceived;
-                              
-                              return (
-                                <>
-                                  <Chip
-                                    icon={<VerifiedUser sx={{ fontSize: 14 }} />}
-                                    label={
-                                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                                        {counts.vouchesReceived > 0 && (
-                                          <>
-                                            <ArrowDownward sx={{ fontSize: 10 }} />
-                                            <span>{counts.vouchesReceived}</span>
-                                          </>
-                                        )}
-                                        {counts.vouchesSent > 0 && counts.vouchesReceived > 0 && (
-                                          <span style={{ fontSize: '0.6rem', opacity: 0.6 }}>•</span>
-                                        )}
-                                        {counts.vouchesSent > 0 && (
-                                          <>
-                                            <ArrowUpward sx={{ fontSize: 10 }} />
-                                            <span>{counts.vouchesSent}</span>
-                                          </>
-                                        )}
-                                        {totalVouches === 0 && <span>0</span>}
-                                      </Box>
-                                    }
-                                    size="small"
-                                    variant="outlined"
-                                    title={contact.naoStatus === 'member' 
-                                      ? `Vouches: ${counts.vouchesReceived} received, ${counts.vouchesSent} sent` 
-                                      : `Vouches: ${counts.vouchesSent} sent (hidden until they join)`}
-                                    sx={{
-                                      fontSize: '0.75rem',
-                                      height: 24,
-                                      borderRadius: 1,
-                                      backgroundColor: alpha(theme.palette.primary.main, 0.04),
-                                      borderColor: alpha(theme.palette.primary.main, 0.12),
-                                      color: 'primary.main',
-                                      fontWeight: 500,
-                                      '& .MuiChip-icon': { fontSize: 14 },
-                                      '& .MuiChip-label': {
-                                        fontSize: '0.75rem',
-                                        padding: '0 4px',
-                                      },
-                                    }}
-                                  />
+                          {/* Top Row - Relationship Category */}
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            {contact.relationshipCategory && (
+                              <Chip
+                                icon={getRelationshipCategoryInfo(contact.relationshipCategory)?.icon}
+                                label={getRelationshipCategoryInfo(contact.relationshipCategory)?.name}
+                                size="small"
+                                sx={{
+                                  height: 20,
+                                  fontSize: '0.65rem',
+                                  backgroundColor: `${getRelationshipCategoryInfo(contact.relationshipCategory)?.color}15`,
+                                  borderColor: `${getRelationshipCategoryInfo(contact.relationshipCategory)?.color}30`,
+                                  color: getRelationshipCategoryInfo(contact.relationshipCategory)?.color,
+                                  '& .MuiChip-icon': {
+                                    fontSize: 10,
+                                    color: getRelationshipCategoryInfo(contact.relationshipCategory)?.color,
+                                  },
+                                }}
+                                variant="outlined"
+                              />
+                            )}
 
-                                  <Chip
-                                    icon={<Favorite sx={{ fontSize: 14 }} />}
-                                    label={
-                                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                                        {counts.praisesReceived > 0 && (
-                                          <>
-                                            <ArrowDownward sx={{ fontSize: 10 }} />
-                                            <span>{counts.praisesReceived}</span>
-                                          </>
-                                        )}
-                                        {counts.praisesSent > 0 && counts.praisesReceived > 0 && (
-                                          <span style={{ fontSize: '0.6rem', opacity: 0.6 }}>•</span>
-                                        )}
-                                        {counts.praisesSent > 0 && (
-                                          <>
-                                            <ArrowUpward sx={{ fontSize: 10 }} />
-                                            <span>{counts.praisesSent}</span>
-                                          </>
-                                        )}
-                                        {totalPraises === 0 && <span>0</span>}
-                                      </Box>
-                                    }
-                                    size="small"
-                                    variant="outlined"
-                                    title={contact.naoStatus === 'member' 
-                                      ? `Praises: ${counts.praisesReceived} received, ${counts.praisesSent} sent` 
-                                      : `Praises: ${counts.praisesSent} sent (hidden until they join)`}
-                                    sx={{
-                                      fontSize: '0.75rem',
-                                      height: 24,
-                                      borderRadius: 1,
-                                      backgroundColor: alpha('#f8bbd9', 0.3),
-                                      borderColor: alpha('#d81b60', 0.3),
-                                      color: '#d81b60',
-                                      fontWeight: 500,
-                                      '& .MuiChip-icon': { fontSize: 14 },
-                                      '& .MuiChip-label': {
-                                        fontSize: '0.75rem',
-                                        padding: '0 4px',
-                                      },
-                                    }}
-                                  />
-                                </>
-                              );
-                            })()}
+                            {/* Selection mode button */}
+                            {isSelectionMode && (
+                              <Button
+                                variant="contained"
+                                size="small"
+                                onClick={() => handleSelectContact(contact)}
+                                sx={{ 
+                                  borderRadius: 2,
+                                  px: 2,
+                                  py: 0.25,
+                                  fontWeight: 600,
+                                  fontSize: '0.65rem',
+                                  height: 20,
+                                  minWidth: 50
+                                }}
+                              >
+                                Select
+                              </Button>
+                            )}
                           </Box>
 
-                          {/* Tags Row */}
-                          {contact.tags && contact.tags.length > 0 && (
-                            <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', justifyContent: 'flex-start' }}>
-                              {contact.tags.slice(0, 3).map((tag) => (
-                                <Chip 
-                                  key={tag} 
-                                  label={tag} 
-                                  size="small" 
-                                  variant="outlined"
-                                  sx={{ 
-                                    borderRadius: 1,
-                                    backgroundColor: alpha(theme.palette.grey[500], 0.04),
-                                    borderColor: alpha(theme.palette.grey[500], 0.12),
-                                    color: 'text.secondary',
-                                    fontWeight: 500,
-                                    fontSize: '0.65rem',
-                                    height: 18
-                                  }}
-                                />
-                              ))}
-                              {contact.tags.length > 3 && (
-                                <Chip 
-                                  label={`+${contact.tags.length - 3}`}
-                                  size="small" 
+                          {/* Bottom Row - Vouches and Praise Counts */}
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            {/* Vouches Count */}
+                            {(() => {
+                              const counts = getVouchPraiseCounts(contact);
+                              const totalVouches = counts.vouchesSent + counts.vouchesReceived;
+                              return totalVouches > 0 ? (
+                                <Chip
+                                  icon={<VerifiedUser sx={{ fontSize: 10 }} />}
+                                  label={totalVouches}
+                                  size="small"
                                   variant="outlined"
-                                  sx={{ 
-                                    borderRadius: 1,
-                                    backgroundColor: alpha(theme.palette.grey[500], 0.04),
-                                    borderColor: alpha(theme.palette.grey[500], 0.12),
-                                    color: 'text.secondary',
+                                  sx={{
+                                    height: 20,
                                     fontSize: '0.65rem',
-                                    height: 18
+                                    backgroundColor: alpha(theme.palette.primary.main, 0.04),
+                                    borderColor: alpha(theme.palette.primary.main, 0.12),
+                                    color: 'primary.main',
+                                    '& .MuiChip-icon': { fontSize: 10 },
                                   }}
                                 />
-                              )}
-                            </Box>
-                          )}
-                        </Box>
+                              ) : null;
+                            })()}
 
-                        {/* Right Column - Network Status Only (Push to Far Right) */}
-                        <Box sx={{ 
-                          display: 'flex', 
-                          flexDirection: 'column', 
-                          alignItems: 'flex-end', 
-                          justifyContent: 'center',
-                          gap: 1,
-                          flexShrink: 0,
-                          minWidth: 140,
-                          height: 56,
-                          ml: 'auto'
-                        }}>
-                          {(() => {
-                            const naoStatus = getNaoStatusIndicator(contact);
-                            if (isSelectionMode) {
-                              return (
-                                <Button
-                                  variant="contained"
-                                  size="small"
-                                  onClick={() => handleSelectContact(contact)}
-                                  sx={{ 
-                                    borderRadius: 2,
-                                    px: 3,
-                                    py: 1,
-                                    fontWeight: 600,
-                                    fontSize: '0.75rem',
-                                    height: 28,
-                                    minWidth: 80
-                                  }}
-                                >
-                                  Select
-                                </Button>
-                              );
-                            } else if (contact.naoStatus === 'not_invited') {
-                              return (
-                                <Button
-                                  variant="outlined"
-                                  size="small"
-                                  startIcon={<Send sx={{ fontSize: 14 }} />}
-                                  onClick={() => handleInviteToNao(contact)}
-                                  sx={{ 
-                                    borderRadius: 2,
-                                    px: 2,
-                                    py: 1,
-                                    fontWeight: 500,
-                                    fontSize: '0.75rem',
-                                    height: 28,
-                                    minWidth: 80
-                                  }}
-                                >
-                                  Invite
-                                </Button>
-                              );
-                            } else {
-                              return naoStatus ? (
+                            {/* Praise Count */}
+                            {(() => {
+                              const counts = getVouchPraiseCounts(contact);
+                              const totalPraises = counts.praisesSent + counts.praisesReceived;
+                              return totalPraises > 0 ? (
                                 <Chip
-                                  icon={naoStatus.icon}
-                                  label={naoStatus.label}
+                                  icon={<Favorite sx={{ fontSize: 10 }} />}
+                                  label={totalPraises}
                                   size="small"
+                                  variant="outlined" 
                                   sx={{
-                                    backgroundColor: naoStatus.bgColor,
-                                    borderColor: naoStatus.borderColor,
-                                    color: naoStatus.color,
-                                    fontWeight: 500,
-                                    fontSize: '0.75rem',
-                                    height: 28,
-                                    minWidth: 80,
-                                    '& .MuiChip-icon': { fontSize: 14 }
+                                    height: 20,
+                                    fontSize: '0.65rem',
+                                    backgroundColor: alpha('#f8bbd9', 0.3),
+                                    borderColor: alpha('#d81b60', 0.3),
+                                    color: '#d81b60',
+                                    '& .MuiChip-icon': { fontSize: 10 },
                                   }}
                                 />
                               ) : null;
-                            }
-                          })()}
-                          
-                          {contact.groupIds && contact.groupIds.length > 0 && (
-                            <Chip
-                              icon={<Group sx={{ fontSize: 14 }} />}
-                              label={`${contact.groupIds.length} group${contact.groupIds.length > 1 ? 's' : ''}`}
-                              size="small"
-                              variant="outlined"
-                              sx={{
-                                backgroundColor: alpha(theme.palette.primary.main, 0.04),
-                                borderColor: alpha(theme.palette.primary.main, 0.2),
-                                color: 'primary.main',
-                                fontWeight: 500,
-                                fontSize: '0.75rem',
-                                height: 24
-                              }}
-                            />
-                          )}
+                            })()}
+                          </Box>
                         </Box>
                       </Box>
 
                       {/* Mobile Layout */}
-                      <Box sx={{ display: { xs: 'flex', md: 'none' }, alignItems: 'flex-start', gap: 2 }}>
+                      <Box sx={{ display: { xs: 'flex', md: 'none' }, alignItems: 'center', gap: 2, height: 40 }}>
                         {/* Avatar */}
                         <Box
                           sx={{ 
-                            width: 48, 
-                            height: 48,
+                            width: 40, 
+                            height: 40,
                             borderRadius: '50%',
                             backgroundImage: contact.profileImage ? `url(${contact.profileImage})` : 'none',
                             backgroundSize: contact.name === 'Tree Willard' ? '120%' : contact.name === 'Niko Bonnieure' ? '100%' : contact.name === 'Tim Bansemer' ? '220%' : contact.name === 'Duke Dorje' ? '200%' : contact.name === 'Kevin Triplett' ? '220%' : contact.name === 'Kristina Lillieneke' ? '220%' : contact.name === 'Oliver Sylvester-Bradley' ? '220%' : contact.name === 'David Thomson' ? '220%' : contact.name === 'Samuel Gbafa' ? '280%' : contact.name === 'Meena Seshamani' ? '280%' : '180%',
@@ -733,7 +883,7 @@ const ContactListPage = () => {
                             justifyContent: 'center',
                             backgroundColor: contact.profileImage ? 'transparent' : 'primary.main',
                             color: 'white',
-                            fontSize: '1.125rem',
+                            fontSize: '1rem',
                             fontWeight: 600,
                             flexShrink: 0
                           }}
@@ -741,16 +891,20 @@ const ContactListPage = () => {
                           {!contact.profileImage && contact.name.charAt(0)}
                         </Box>
                         
-                        {/* Main Content */}
+                        {/* Name & Company Column */}
                         <Box sx={{ flex: 1, minWidth: 0 }}>
-                          {/* Name with source icon */}
-                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
+                          {/* Name with icons */}
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 0.5 }}>
                             <Typography 
                               variant="h6" 
                               sx={{ 
                                 fontWeight: 600,
-                                fontSize: '1rem',
-                                color: 'text.primary'
+                                fontSize: '0.85rem',
+                                color: 'text.primary',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                flex: 1
                               }}
                             >
                               {contact.name}
@@ -759,211 +913,114 @@ const ContactListPage = () => {
                           </Box>
                           
                           {/* Job Title & Company */}
-                          <Typography 
-                            variant="body2" 
-                            color="text.secondary" 
-                            sx={{ mb: 0.5, lineHeight: 1.3, fontSize: '0.8rem' }}
-                          >
-                            {contact.position}{contact.company && ` at ${contact.company}`}
-                          </Typography>
-                          
-                          {/* Email */}
                           <Typography 
                             variant="body2" 
                             color="text.secondary" 
                             sx={{ 
-                              mb: 1,
-                              fontSize: '0.75rem',
+                              fontSize: '0.7rem',
                               overflow: 'hidden',
                               textOverflow: 'ellipsis',
                               whiteSpace: 'nowrap'
                             }}
                           >
-                            {contact.email}
+                            {contact.position}{contact.company && ` at ${contact.company}`}
                           </Typography>
+                        </Box>
+
+                        {/* Right side - Compact chips */}
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }}>
+                          {/* Relationship Category */}
+                          {contact.relationshipCategory && (
+                            <Chip
+                              icon={getRelationshipCategoryInfo(contact.relationshipCategory)?.icon}
+                              size="small"
+                              sx={{
+                                height: 20,
+                                width: 20,
+                                backgroundColor: `${getRelationshipCategoryInfo(contact.relationshipCategory)?.color}15`,
+                                borderColor: `${getRelationshipCategoryInfo(contact.relationshipCategory)?.color}30`,
+                                color: getRelationshipCategoryInfo(contact.relationshipCategory)?.color,
+                                '& .MuiChip-icon': {
+                                  fontSize: 12,
+                                  color: getRelationshipCategoryInfo(contact.relationshipCategory)?.color,
+                                  margin: 0,
+                                },
+                                '& .MuiChip-label': {
+                                  display: 'none'
+                                }
+                              }}
+                              variant="outlined"
+                            />
+                          )}
 
-                          {/* Info Chips Row (excluding NAO status) */}
-                          <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', alignItems: 'center', mb: 1 }}>
-                            {/* Groups Count */}
-                            {contact.groupIds && contact.groupIds.length > 0 && (
+                          {/* Vouches Count */}
+                          {(() => {
+                            const counts = getVouchPraiseCounts(contact);
+                            const totalVouches = counts.vouchesSent + counts.vouchesReceived;
+                            return totalVouches > 0 ? (
                               <Chip
-                                icon={<Group sx={{ fontSize: 12 }} />}
-                                label={`${contact.groupIds.length} group${contact.groupIds.length > 1 ? 's' : ''}`}
+                                icon={<VerifiedUser sx={{ fontSize: 10 }} />}
+                                label={totalVouches}
                                 size="small"
                                 variant="outlined"
                                 sx={{
+                                  height: 18,
+                                  fontSize: '0.6rem',
                                   backgroundColor: alpha(theme.palette.primary.main, 0.04),
-                                  borderColor: alpha(theme.palette.primary.main, 0.2),
+                                  borderColor: alpha(theme.palette.primary.main, 0.12),
                                   color: 'primary.main',
-                                  fontWeight: 500,
-                                  fontSize: '0.65rem',
-                                  height: 20
+                                  '& .MuiChip-icon': { fontSize: 10 },
                                 }}
                               />
-                            )}
-
-                            {/* Vouch & Praise Counts */}
-                            {(() => {
-                              const counts = getVouchPraiseCounts(contact);
-                              const totalVouches = counts.vouchesSent + counts.vouchesReceived;
-                              const totalPraises = counts.praisesSent + counts.praisesReceived;
-                              
-                              return (
-                                <>
-                                  {totalVouches > 0 && (
-                                    <Chip
-                                      icon={<VerifiedUser sx={{ fontSize: 10 }} />}
-                                      label={totalVouches}
-                                      size="small"
-                                      variant="outlined"
-                                      sx={{
-                                        fontSize: '0.6rem',
-                                        height: 18,
-                                        borderRadius: 1,
-                                        backgroundColor: alpha(theme.palette.primary.main, 0.04),
-                                        borderColor: alpha(theme.palette.primary.main, 0.12),
-                                        color: 'primary.main',
-                                        '& .MuiChip-icon': { fontSize: 10 },
-                                      }}
-                                    />
-                                  )}
-                                  {totalPraises > 0 && (
-                                    <Chip
-                                      icon={<Favorite sx={{ fontSize: 10 }} />}
-                                      label={totalPraises}
-                                      size="small"
-                                      variant="outlined"
-                                      sx={{
-                                        fontSize: '0.6rem',
-                                        height: 18,
-                                        borderRadius: 1,
-                                        backgroundColor: alpha('#f8bbd9', 0.3),
-                                        borderColor: alpha('#d81b60', 0.3),
-                                        color: '#d81b60',
-                                        '& .MuiChip-icon': { fontSize: 10 },
-                                      }}
-                                    />
-                                  )}
-                                </>
-                              );
-                            })()}
-                          </Box>
-                          
-                          {/* Tags Row */}
-                          {contact.tags && contact.tags.length > 0 && (
-                            <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
-                              {contact.tags.slice(0, 2).map((tag) => (
-                                <Chip 
-                                  key={tag} 
-                                  label={tag} 
-                                  size="small" 
-                                  variant="outlined"
-                                  sx={{ 
-                                    borderRadius: 1,
-                                    backgroundColor: alpha(theme.palette.grey[500], 0.04),
-                                    borderColor: alpha(theme.palette.grey[500], 0.12),
-                                    color: 'text.secondary',
-                                    fontWeight: 500,
-                                    fontSize: '0.6rem',
-                                    height: 16
-                                  }}
-                                />
-                              ))}
-                              {contact.tags.length > 2 && (
-                                <Chip 
-                                  label={`+${contact.tags.length - 2}`}
-                                  size="small" 
-                                  variant="outlined"
-                                  sx={{ 
-                                    borderRadius: 1,
-                                    backgroundColor: alpha(theme.palette.grey[500], 0.04),
-                                    borderColor: alpha(theme.palette.grey[500], 0.12),
-                                    color: 'text.secondary',
-                                    fontSize: '0.6rem',
-                                    height: 16
-                                  }}
-                                />
-                              )}
-                            </Box>
-                          )}
-                        </Box>
+                            ) : null;
+                          })()}
 
-                        {/* Right Column - Status & Action */}
-                        <Box sx={{ 
-                          display: 'flex', 
-                          flexDirection: 'column', 
-                          alignItems: 'flex-end',
-                          justifyContent: 'center',
-                          gap: 1,
-                          flexShrink: 0,
-                          minWidth: 80,
-                          height: 48
-                        }}>
+                          {/* Praise Count */}
                           {(() => {
-                            const naoStatus = getNaoStatusIndicator(contact);
-                            if (isSelectionMode) {
-                              return (
-                                <Button
-                                  variant="contained"
-                                  size="small"
-                                  onClick={() => handleSelectContact(contact)}
-                                  sx={{ 
-                                    borderRadius: 2,
-                                    px: 2,
-                                    py: 0.5,
-                                    fontWeight: 600,
-                                    fontSize: '0.7rem',
-                                    height: 24,
-                                    minWidth: 60
-                                  }}
-                                >
-                                  Select
-                                </Button>
-                              );
-                            } else if (contact.naoStatus === 'not_invited') {
-                              return (
-                                <Button
-                                  variant="outlined" 
-                                  size="small"
-                                  startIcon={<Send sx={{ fontSize: 12 }} />}
-                                  onClick={() => handleInviteToNao(contact)}
-                                  sx={{ 
-                                    borderRadius: 2,
-                                    px: 1.5,
-                                    py: 0.5,
-                                    fontWeight: 500,
-                                    fontSize: '0.7rem',
-                                    height: 24,
-                                    minWidth: 60
-                                  }}
-                                >
-                                  Invite
-                                </Button>
-                              );
-                            } else {
-                              return naoStatus ? (
-                                <Chip
-                                  icon={naoStatus.icon}
-                                  label={naoStatus.label}
-                                  size="small"
-                                  sx={{
-                                    backgroundColor: naoStatus.bgColor,
-                                    borderColor: naoStatus.borderColor,
-                                    color: naoStatus.color,
-                                    fontWeight: 500,
-                                    fontSize: '0.65rem',
-                                    height: 24,
-                                    minWidth: 60,
-                                    '& .MuiChip-icon': { fontSize: 12 }
-                                  }}
-                                />
-                              ) : null;
-                            }
+                            const counts = getVouchPraiseCounts(contact);
+                            const totalPraises = counts.praisesSent + counts.praisesReceived;
+                            return totalPraises > 0 ? (
+                              <Chip
+                                icon={<Favorite sx={{ fontSize: 10 }} />}
+                                label={totalPraises}
+                                size="small"
+                                variant="outlined" 
+                                sx={{
+                                  height: 18,
+                                  fontSize: '0.6rem',
+                                  backgroundColor: alpha('#f8bbd9', 0.3),
+                                  borderColor: alpha('#d81b60', 0.3),
+                                  color: '#d81b60',
+                                  '& .MuiChip-icon': { fontSize: 10 },
+                                }}
+                              />
+                            ) : null;
                           })()}
+
+                          {/* Selection mode button */}
+                          {isSelectionMode && (
+                            <Button
+                              variant="contained"
+                              size="small"
+                              onClick={() => handleSelectContact(contact)}
+                              sx={{ 
+                                borderRadius: 2,
+                                px: 1.5,
+                                py: 0.5,
+                                fontWeight: 600,
+                                fontSize: '0.65rem',
+                                height: 20,
+                                minWidth: 50
+                              }}
+                            >
+                              Select
+                            </Button>
+                          )}
                         </Box>
                       </Box>
                     </CardContent>
                   </Card>
+                  </Box>
                 </Grid>
               ))}
             </Grid>
diff --git a/src/types/contact.ts b/src/types/contact.ts
index 0e8cf8e..b0071ee 100644
--- a/src/types/contact.ts
+++ b/src/types/contact.ts
@@ -12,6 +12,7 @@ export interface Contact {
   tags?: string[];
   groupIds?: string[];
   naoStatus?: 'member' | 'invited' | 'not_invited';
+  relationshipCategory?: 'close_family' | 'family' | 'friend' | 'colleague' | 'business' | 'acquaintance';
   invitedAt?: Date;
   joinedAt?: Date;
   createdAt: Date;