diff --git a/src/components/CollectionsFeed/CollectionsFeed.css b/src/components/CollectionsFeed/CollectionsFeed.css
index 09809d5..c0e3a31 100644
--- a/src/components/CollectionsFeed/CollectionsFeed.css
+++ b/src/components/CollectionsFeed/CollectionsFeed.css
@@ -105,29 +105,55 @@
   }
   
   .collections-filter {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    max-height: 200px;
+    max-height: 300px;
     overflow-y: auto;
     padding: 10px 0;
+    background-color: var(--background);
+    border-radius: 8px;
+    border: 1px solid var(--card-border);
+    margin-top: 10px;
   }
   
-  .collection-checkbox {
+  .collection-item {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--card-border);
+    cursor: pointer;
     display: flex;
     align-items: center;
-    margin-right: 15px;
-    margin-bottom: 5px;
+    transition: background-color 0.2s;
   }
   
-  .collection-checkbox input[type="checkbox"] {
-    margin-right: 5px;
+  .collection-item:last-child {
+    border-bottom: none;
   }
   
-  .collection-checkbox label {
-    font-size: 0.9rem;
+  .collection-item:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+  
+  .collection-item.selected {
+    background-color: rgba(var(--button-bg-rgb), 0.1);
+  }
+  
+  .collection-item-name {
+    font-size: 0.95rem;
     color: var(--text);
-    cursor: pointer;
+    flex-grow: 1;
+  }
+  
+  .collection-item-checkbox {
+    margin-right: 10px;
+    width: 16px;
+    height: 16px;
+    accent-color: var(--button-bg);
+  }
+  
+  .dark-mode .collection-item:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+  
+  .dark-mode .collection-item.selected {
+    background-color: rgba(var(--button-bg-rgb), 0.2);
   }
   
   .refresh-button {
diff --git a/src/components/CollectionsFeed/CollectionsFeed.js b/src/components/CollectionsFeed/CollectionsFeed.js
index 9cb7228..9c20b6a 100644
--- a/src/components/CollectionsFeed/CollectionsFeed.js
+++ b/src/components/CollectionsFeed/CollectionsFeed.js
@@ -106,7 +106,8 @@ const CollectionsFeed = () => {
       
       // Fetch records for each collection in parallel
       const fetchPromises = collectionsList.map(async (collection) => {
-        let url = `${endpoint}/xrpc/com.atproto.repo.listRecords?repo=${encodeURIComponent(userDid)}&collection=${encodeURIComponent(collection)}&limit=10`;
+        // Limit to 5 records per collection initially (for 20 records total across ~4 collections)
+        let url = `${endpoint}/xrpc/com.atproto.repo.listRecords?repo=${encodeURIComponent(userDid)}&collection=${encodeURIComponent(collection)}&limit=5`;
         
         // Add cursor if loading more and we have a cursor for this collection
         if (isLoadMore && newCursors[collection]) {
@@ -155,6 +156,11 @@ const CollectionsFeed = () => {
         return new Date(b.timestamp) - new Date(a.timestamp);
       });
       
+      // If not loading more, limit to 20 most recent records
+      if (!isLoadMore) {
+        allRecords = allRecords.slice(0, 20);
+      }
+      
       setRecords(allRecords);
       setCollectionCursors(newCursors);
       setFetchingMore(false);
@@ -165,14 +171,12 @@ const CollectionsFeed = () => {
     }
   };
   
-  // Handle filter change
-  const handleFilterChange = (e) => {
-    const { value, checked } = e.target;
-    
-    if (checked) {
-      setSelectedCollections(prev => [...prev, value]);
+  // Toggle collection selection
+  const toggleCollection = (collection) => {
+    if (selectedCollections.includes(collection)) {
+      setSelectedCollections(prev => prev.filter(item => item !== collection));
     } else {
-      setSelectedCollections(prev => prev.filter(item => item !== value));
+      setSelectedCollections(prev => [...prev, collection]);
     }
   };
   
@@ -294,17 +298,19 @@ const CollectionsFeed = () => {
                   
                   <div className="collections-filter">
                     {collections.map(collection => (
-                      <div key={collection} className="collection-checkbox">
+                      <div 
+                        key={collection} 
+                        className={`collection-item ${selectedCollections.includes(collection) ? 'selected' : ''}`}
+                        onClick={() => toggleCollection(collection)}
+                      >
                         <input
                           type="checkbox"
-                          id={`collection-${collection}`}
-                          value={collection}
+                          className="collection-item-checkbox"
                           checked={selectedCollections.includes(collection)}
-                          onChange={handleFilterChange}
+                          onChange={() => {}} // Handled by the div onClick
+                          onClick={(e) => e.stopPropagation()}
                         />
-                        <label htmlFor={`collection-${collection}`}>
-                          {collection.split('.').pop()}
-                        </label>
+                        <span className="collection-item-name">{collection}</span>
                       </div>
                     ))}
                   </div>
diff --git a/src/components/CollectionsFeed/FeedTimeline.css b/src/components/CollectionsFeed/FeedTimeline.css
index a4fc383..1f2db12 100644
--- a/src/components/CollectionsFeed/FeedTimeline.css
+++ b/src/components/CollectionsFeed/FeedTimeline.css
@@ -7,16 +7,17 @@
   }
   
   .feed-item {
-    background-color: var(--navbar-bg);
-    border: 1px solid var(--card-border);
-    border-radius: 8px;
+    background: var(--navbar-bg);
     padding: 15px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    border: 5px solid var(--card-border);
+    border-radius: 12px;
     transition: transform 0.2s, box-shadow 0.2s;
   }
   
   .feed-item:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }
   
   .feed-item-header {
@@ -24,6 +25,8 @@
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px;
+    border-bottom: 1px solid var(--card-border);
+    padding-bottom: 10px;
   }
   
   .collection-type {
@@ -41,7 +44,7 @@
     margin-left: 8px;
     font-size: 0.8rem;
     color: var(--text);
-    opacity: 0.6;
+    opacity: 0.7;
   }
   
   .record-rkey {
@@ -55,9 +58,8 @@
   }
   
   .feed-item-content {
-    padding: 5px 0;
+    padding: 10px 0;
     margin-bottom: 10px;
-    border-top: 1px solid var(--card-border);
     border-bottom: 1px solid var(--card-border);
   }
   
@@ -90,6 +92,18 @@
     font-style: italic;
   }
   
+  /* Dark mode overrides */
+  .dark-mode .feed-item {
+    background: #2c2c2c;
+    border: 5px solid #444;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.6);
+  }
+  
+  .dark-mode .feed-item-header,
+  .dark-mode .feed-item-content {
+    border-color: #555;
+  }
+  
   /* Responsive styles */
   @media (max-width: 600px) {
     .feed-item-header {
diff --git a/src/components/CollectionsFeed/FeedTimeline.js b/src/components/CollectionsFeed/FeedTimeline.js
index a600930..0710d43 100644
--- a/src/components/CollectionsFeed/FeedTimeline.js
+++ b/src/components/CollectionsFeed/FeedTimeline.js
@@ -17,20 +17,13 @@ const FeedTimeline = ({ records }) => {
     }
   };
 
-  // Helper to get a readable collection name
-  const getCollectionDisplayName = (collection) => {
-    // Extract the last part of the collection name (e.g., 'like' from 'app.bsky.feed.like')
-    const parts = collection.split('.');
-    return parts[parts.length - 1];
-  };
-
   return (
     <div className="feed-timeline">
       {records.map((record, index) => (
         <div key={`${record.collection}-${record.rkey}-${index}`} className="feed-item">
           <div className="feed-item-header">
             <div className="collection-type">
-              <span className="collection-name">{getCollectionDisplayName(record.collection)}</span>
+              <span className="collection-name">{record.collection.split('.').pop()}</span>
               <span className="collection-full">{record.collection}</span>
             </div>
             <div className="record-rkey">{record.rkey}</div>
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 6a3e4f3..7af0dbc 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -2,6 +2,7 @@
   --navbar-bg: #ffffff;
   --navbar-text: #000000;
   --button-bg: #3B9AF8;
+  --button-bg-rgb: 59, 154, 248; /* RGB version for transparency */
   --button-text: #ffffff;
   --background: #f0f0f0;
   --text: #000000;
@@ -14,6 +15,7 @@
   --navbar-bg: #1f1f1f;
   --navbar-text: #f5f5f5;
   --button-bg: #3b9af8;
+  --button-bg-rgb: 59, 154, 248; /* RGB version for transparency */
   --button-text: #f5f5f5;
   --background: #181818;
   --text: #ffffff;
@@ -25,6 +27,7 @@
   --navbar-bg: #ffffff;
   --navbar-text: #000000;
   --button-bg: #3B9AF8;
+  --button-bg-rgb: 59, 154, 248; /* RGB version for transparency */
   --button-text: #ffffff;
   --background: #f0f0f0;
   --text: #000000;