diff --git a/static/css/style.css b/static/css/style.css
index 09163ef..59186a6 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -520,7 +520,7 @@ button:disabled {
 .feed-entry-title {
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: 0.5rem;
     margin-bottom: 0.5rem;
 }
 
@@ -646,10 +646,11 @@ button:disabled {
     border: none;
     color: var(--text-color);
     cursor: pointer;
-    padding: 0.5rem;
+    padding: 0.25rem;
     opacity: 0.7;
     transition: opacity 0.2s;
     font-size: 1.2rem;
+    margin-left: -0.25rem;
 }
 
 .read-toggle:hover {
diff --git a/static/js/app.js b/static/js/app.js
index bcacba5..9ec52f6 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -46,18 +46,12 @@ function renderFeedEntries(entries) {
         const title = document.createElement('h2');
         title.className = 'feed-entry-title';
 
-        const titleLink = document.createElement('a');
-        titleLink.href = entry.link || '#';
-        titleLink.target = '_blank';
-        titleLink.textContent = entry.title;
-        title.appendChild(titleLink);
-
         const readToggle = document.createElement('button');
         readToggle.className = 'read-toggle';
         readToggle.title = entry.marked_read ? 'Mark as unread' : 'Mark as read';
         readToggle.innerHTML = entry.marked_read 
-            ? '<i class="fa-solid fa-circle-check"></i>'
-            : '<i class="fa-regular fa-circle"></i>';
+            ? '<i class="fa-solid fa-square-check"></i>'
+            : '<i class="fa-regular fa-square"></i>';
         readToggle.onclick = async () => {
             try {
                 const response = await fetch(`/entries/${entry.id}/state`, {
@@ -74,8 +68,8 @@ function renderFeedEntries(entries) {
                     entry.marked_read = !entry.marked_read;
                     readToggle.title = entry.marked_read ? 'Mark as unread' : 'Mark as read';
                     readToggle.innerHTML = entry.marked_read 
-                        ? '<i class="fa-solid fa-circle-check"></i>'
-                        : '<i class="fa-regular fa-circle"></i>';
+                        ? '<i class="fa-solid fa-square-check"></i>'
+                        : '<i class="fa-regular fa-square"></i>';
                 } else {
                     console.error('Failed to update read state:', response.status);
                 }
@@ -85,6 +79,12 @@ function renderFeedEntries(entries) {
         };
         title.appendChild(readToggle);
 
+        const titleLink = document.createElement('a');
+        titleLink.href = entry.link || '#';
+        titleLink.target = '_blank';
+        titleLink.textContent = entry.title;
+        title.appendChild(titleLink);
+
         const meta = document.createElement('div');
         meta.className = 'feed-entry-meta';
         if (entry.published) {