diff --git a/app/assets/images/tag-outline.svg b/app/assets/images/tag-outline.svg
new file mode 100644
index 000000000..1c8fab206
--- /dev/null
+++ b/app/assets/images/tag-outline.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2 13c0 .55.21985 1.0502.58984 1.4102l7 7 .14161.1289c.34435.2851.78735.4609 1.26855.4609s.9243-.1758 1.2754-.4609l.1445-.1289 8.9903-9c.37-.36.5898-.8602.5898-1.4102v-7c0-1.11-.89-2-2-2h-7c-.55 0-1.0502.22008-1.4102.58008l-8.99996 9.00002c-.35993.36-.58984.86-.58984 1.4199zm18-2.0088-8.9775 8.9873-.0205.0147-6.99809-6.9971v-.002l8.99409-8.9941h7.002z"/><circle cx="17.5" cy="6.5" r="1.5"/></svg>
diff --git a/app/assets/images/tag.svg b/app/assets/images/tag.svg
index 76591fe36..aa0368613 100644
--- a/app/assets/images/tag.svg
+++ b/app/assets/images/tag.svg
@@ -1 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m5.5 7a1.5 1.5 0 0 1 -1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1 -1.5 1.5m15.91 4.58-9-9c-.36-.36-.86-.58-1.41-.58h-7c-1.11 0-2 .89-2 2v7c0 .55.22 1.05.59 1.41l8.99 9c.37.36.87.59 1.42.59s1.05-.23 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.56-.23-1.06-.59-1.42z"/></svg>
\ No newline at end of file
+<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m18.5 7c.3978 0 .7794-.15804 1.0607-.43934s.4393-.66284.4393-1.06066-.158-.77936-.4393-1.06066-.6629-.43934-1.0607-.43934-.7794.15804-1.0607.43934-.4393.66284-.4393 1.06066.158.77936.4393 1.06066.6629.43934 1.0607.43934zm-15.91 4.58 9-9c.36-.36.86-.58 1.41-.58h7c1.11 0 2 .89 2 2v7c0 .55-.22 1.05-.59 1.41l-8.99 9c-.37.36-.87.59-1.42.59s-1.05-.23-1.41-.59l-7-7c-.37-.36-.59-.86-.59-1.41 0-.56.23-1.06.59-1.42z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 0f6c4c2c1..5540cc1a0 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -206,7 +206,7 @@
 
   /* Colors: Cards */
   --color-card-default: oklch(var(--lch-blue-dark));
-  --color-card-complete: var(--color-ink);
+  --color-card-complete: var(--color-ink-darker);
   --color-card-1: oklch(var(--lch-ink-medium));
   --color-card-2: oklch(var(--lch-uncolor-medium));
   --color-card-3: oklch(var(--lch-yellow-medium));
diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index fae632c5e..0dc828829 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -169,6 +169,13 @@
     }
   }
 
+  .blank-slate--card {
+    box-shadow: none !important;
+    border: 2px dashed color-mix(in srgb, var(--card-color) 40%, var(--color-canvas));;
+    font-weight: 600;
+    rotate: 2deg;
+  }
+
   /* TODO: I think this is legacy now? */
   .cards__heading {
     display: flex;
@@ -213,16 +220,10 @@
   /* ------------------------------------------------------------------------ */
 
   .cards {
-    .blank-slate--card {
-      box-shadow: none !important;
-      border: 2px dashed color-mix(in srgb, var(--card-color) 40%, var(--color-canvas));;
-      font-weight: 600;
-      rotate: 2deg;
-    }
-
     .card {
       --block-space: 1em;
       --block-space-half: 0.5em;
+      --card-padding-inline: 1em;
       --text-xx-large: 1.6em;
       --text-x-small: 1em;
 
@@ -230,12 +231,8 @@
       font-size: clamp(0.6rem, 0.85cqi, 100px);
     }
 
-    .card__body {
-      margin-block: var(--block-space-half);
-    }
-
-    .card__footer {
-      margin-block-start: var(--block-space-half);
+    .card__tags {
+      gap: calc(var(--card-header-space) / 2);
     }
 
     .card__title {
@@ -251,6 +248,19 @@
       display: none;
     }
 
+    .card__body {
+      padding-block: calc(var(--card-padding-block) * 0.75);
+    }
+
+    .card__meta {
+      font-weight: 600;
+
+      strong,
+      .local-time-value {
+        font-weight: inherit;
+      }
+    }
+
     .card:has(.card__background img:not([src=""])) {
       .card__content,
       .card__meta,
@@ -370,21 +380,35 @@
       &:nth-child(4n) { rotate: 0.5deg; }
     }
 
-    .card__body {
-      padding-block-start: 0;
-      padding-inline: 0;
-    }
-
     .card__collection {
       background-color: transparent;
-      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+      color: var(--card-text-color);
     }
 
-    .card__collection-name {
-      border-inline-start: 1px solid color-mix(in srgb, var(--color-ink) 33%, var(--color-canvas));
-      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+    /* The following groups the header and title on considering cards */
+    .card__header {
+      color: var(--color-ink);
     }
 
+    .card__collection,
+    .card__tags {
+      color: inherit;
+    }
+
+    .card__body {
+      padding-block: 0 var(--card-padding-block);
+    }
+    /* End */
+
+    /* The Uncomment the following to add borders and such */
+    /*
+    .card__collection {
+      border-block-end: var(--card-border);
+      border-inline-end: var(--card-border);
+    }
+    */
+    /* End */
+
     .card--drafted {
       --card-color: var(--color-ink-medium) !important;
 
@@ -393,11 +417,6 @@
       box-shadow: none !important;
     }
 
-    .card__header {
-      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
-      margin-inline: calc(-0.5 * var(--card-padding-inline)) calc(-0.25 * var(--card-padding-inline));
-    }
-
     .card__people-label {
       display: none;
     }
@@ -405,10 +424,6 @@
     .card__title {
       min-block-size: 0;
     }
-
-    .card__tags {
-      font-size: var(--text-small);
-    }
   }
 
 
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index f0ae80af0..bffd4211c 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -5,6 +5,9 @@
   .card {
     --avatar-size: 2.75em;
     --card-bg-color: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas));
+    --card-text-color: color-mix(in srgb, var(--card-color) 75%, var(--color-ink));
+    --card-border: 1px solid color-mix(in srgb, var(--card-color) 33%, var(--color-ink-inverted));
+    --card-header-space: 1ch;
     --card-padding-inline: var(--inline-space-double);
     --card-padding-block: var(--block-space);
     --border-color: transparent;
@@ -15,7 +18,7 @@
     background-color: var(--card-bg-color);
     border-radius: var(--border-radius);
     box-shadow: var(--shadow);
-    color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+    color: var(--card-text-color);
     display: flex;
     flex-direction: column;
     inline-size: 100%;
@@ -41,7 +44,7 @@
     border-radius: var(--border-radius) 0 0 0;
     display: flex;
     flex-wrap: nowrap;
-    gap: var(--inline-space);
+    gap: var(--card-header-space);
     margin-block-start: calc(-1 * var(--card-padding-block));
     margin-inline: calc(-1 * var(--card-padding-inline)) calc(-0.5 * var(--card-padding-inline));
     max-inline-size: unset;
@@ -52,25 +55,16 @@
     }
   }
 
-  .card__id {
-    flex-shrink: 0;
-    margin-inline-start: calc(var(--inline-space) * -1);
-
-    .card-perma &:before {
-      content: "No.";
-      opacity: 0.5;
-    }
-  }
-
   .card__collection {
     background-color: var(--card-color);
     border-radius: var(--border-radius) 0 var(--border-radius) 0;
     color: var(--color-ink-inverted);
     display: inline-flex;
-    font-weight: 800;
+    font-weight: 600;
     max-inline-size: 100%;
     min-inline-size: 0;
-    padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--card-padding-inline);
+    padding-block: 0.25lh;
+    padding-inline: var(--card-padding-inline) 1ch;
 
     &:has(.collection-picker__button) {
       cursor: pointer;
@@ -89,34 +83,43 @@
     }
   }
 
-  .card__collection-name {
-    border-inline-start: 1px solid color-mix(in srgb, var(--color-ink-inverted) 33%, var(--card-color));
-    color: currentcolor;
-    display: flex;
-    margin-inline-start: var(--inline-space-half);
-    max-inline-size: 100%;
-    min-inline-size: 0;
-    padding-inline-start: calc(var(--inline-space) * 0.75);
-    text-transform: uppercase;
+  .card__id {
+    flex-shrink: 0;
 
-    .cards--considering & {
-      border-inline-start: 1px solid color-mix(in srgb, var(--color-ink) 33%, var(--color-canvas));
-      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+    .card-perma &:before {
+      content: "No.";
+      opacity: 0.5;
     }
   }
 
-  .card__tag {
-    color: var(--card-color);
-    font-weight: 700;
+  .card__collection-name {
+    border-inline-start: 1px solid color-mix(in hsl, transparent 75%, currentColor);
+    color: currentColor;
+    display: flex;
+    margin-inline-start: var(--card-header-space);
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    padding-inline-start: var(--card-header-space);
+    text-transform: uppercase;
   }
 
   .card__tags {
+    --btn-color: var(--card-color);
+
     align-items: center;
-    color: var(--card-color);
+    color: var(--card-text-color);
     display: flex;
+    gap: var(--card-header-space);
     min-inline-size: 0;
   }
 
+  .card__tag {
+    color: inherit;
+    font-weight: 600;
+    min-width: 0;
+    text-transform: uppercase;
+  }
+
   /* Body
   /* ------------------------------------------------------------------------ */
 
@@ -140,10 +143,10 @@
 
   .card__title {
     --input-border-radius: 0;
-    --input-color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+    --input-color: var(--card-text-color);
     --lines: 3;
 
-    color: inherit;
+    color: var(--color-ink);
     font-size: var(--text-xx-large);
     font-weight: 900;
     line-height: 1.3;
@@ -199,7 +202,6 @@
   /* ------------------------------------------------------------------------ */
 
   .card__meta {
-     --meta-border: 1px solid color-mix(in srgb, var(--card-color) 50%, transparent);
      --meta-spacer-block: 0.5ch;
      --meta-spacer-inline: 0.75ch;
 
@@ -259,7 +261,7 @@
 
   /* Top */
   .card__meta-text:nth-of-type(odd) {
-    border-block-end: var(--meta-border);
+    border-block-end: var(--card-border);
     padding-block-end: var(--meta-spacer-block);
   }
 
@@ -270,7 +272,7 @@
 
   /* Left */
   .card__meta-text:nth-of-type(-n+2) {
-    border-inline-end: var(--meta-border);
+    border-inline-end: var(--card-border);
     padding-inline-end: var(--meta-spacer-inline);
   }
 
diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css
index 6eab28b1b..3733ceb34 100644
--- a/app/assets/stylesheets/icons.css
+++ b/app/assets/stylesheets/icons.css
@@ -85,6 +85,7 @@
   .icon--sliders { --svg: url("sliders.svg "); }
   .icon--switch { --svg: url("switch.svg "); }
   .icon--tag { --svg: url("tag.svg "); }
+  .icon--tag-outline { --svg: url("tag-outline.svg "); }
   .icon--thumb-up { --svg: url("thumb-up.svg "); }
   .icon--trash { --svg: url("trash.svg "); }
   .icon--unpinned { --svg: url("unpinned.svg"); }
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index 2f580a519..70391db02 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -6,7 +6,7 @@
       <%= render "cards/display/preview/collection", card: card %>
       <%= render "cards/display/preview/tags", card: card %>
       <%= render "cards/display/preview/steps", card: card %>
-      <%= icon_tag "attachment", class: "card__attachments-indicator translucent txt-x-small" if card.has_attachments? %>
+      <%= icon_tag "attachment", class: "card__attachments-indicator translucent" if card.has_attachments? %>
 
       <% if card.staged? && card.doing? %>
           <span class="btn justify-start workflow-stage workflow-stage--current txt-uppercase min-width max-width">
diff --git a/app/views/cards/display/_public_preview.html.erb b/app/views/cards/display/_public_preview.html.erb
index c35af99a8..b9180d94d 100644
--- a/app/views/cards/display/_public_preview.html.erb
+++ b/app/views/cards/display/_public_preview.html.erb
@@ -2,7 +2,6 @@
   <%= card_article_tag card, class: "card" do %>
     <div class="flex flex-column flex-item-grow max-inline-size">
       <header class="card__header">
-
         <div class="card__collection flex align-start">
           <span class="card__id"><%= card.id %></span>
           <span class="card__collection-name">
diff --git a/app/views/cards/display/common/_collection.html.erb b/app/views/cards/display/common/_collection.html.erb
index 1482d1b51..9a69481c9 100644
--- a/app/views/cards/display/common/_collection.html.erb
+++ b/app/views/cards/display/common/_collection.html.erb
@@ -1,4 +1,4 @@
-<label class="card__collection flex align-center">
+<label class="card__collection">
   <span class="card__id"><%= card.id %></span>
   <span class="card__collection-name">
     <span class="overflow-ellipsis"><%= card.collection.name %></span>
diff --git a/app/views/cards/display/perma/_tags.html.erb b/app/views/cards/display/perma/_tags.html.erb
index 76d69a8d0..f68c99fd5 100644
--- a/app/views/cards/display/perma/_tags.html.erb
+++ b/app/views/cards/display/perma/_tags.html.erb
@@ -1,16 +1,4 @@
-<div id="<%= dom_id(card, :tags) %>" class="card__tags gap-half">
-  <div class="min-width overflow-ellipsis">
-    <% if card.tags.any? || card.creating? %>
-      <span class="margin-inline-start-half"># </span>
-      <% card.tags.each_with_index do |tag, index| %>
-        <%= link_to cards_path(collection_ids: [ card.collection ], tag_ids: [ tag.id ]),
-              class: "card__tag btn btn--plain min-width txt-uppercase fill-transparent" do %>
-          <span class="overflow-ellipsis"><%= tag.title %></span>
-        <% end %><%= ", " unless index == card.tags.size - 1 %>
-      <% end %>
-    <% end %>
-  </div>
-
+<div id="<%= dom_id(card, :tags) %>" class="card__tags">
   <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
     <button class="tag-picker__button btn card__hide-on-index tooltip" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);">
       <%= icon_tag "tag" %>
@@ -21,4 +9,15 @@
       <%= turbo_frame_tag card, :tagging, src: new_card_tagging_path(card) %>
     </dialog>
   </div>
+
+  <% if card.tags.any? || card.creating? %>
+    <div class="min-width overflow-ellipsis">
+      <% card.tags.each_with_index do |tag, index| %>
+        <%= link_to cards_path(collection_ids: [ card.collection ], tag_ids: [ tag.id ]),
+              class: "card__tag btn btn--plain min-width txt-uppercase fill-transparent" do %>
+          <%= tag.title %>
+        <% end %><%= "," unless index == card.tags.size - 1 %>
+      <% end %>
+    </div>
+  <% end %>
 </div>
diff --git a/app/views/cards/display/preview/_tags.html.erb b/app/views/cards/display/preview/_tags.html.erb
index f255a6a88..5d98eb2fa 100644
--- a/app/views/cards/display/preview/_tags.html.erb
+++ b/app/views/cards/display/preview/_tags.html.erb
@@ -1,12 +1,12 @@
-<div class="card__tags">
-  <div class="min-width overflow-ellipsis">
-    <% if card.tags.any?  %>
-      <span># </span>
+<% if card.tags.any?  %>
+  <div class="card__tags">
+    <%= icon_tag "tag-outline", class: "translucent" %>
+    <div class="min-width overflow-ellipsis">
       <% card.tags.each_with_index do |tag, index| %>
-        <span class="card__tag btn btn--plain min-width txt-uppercase fill-transparent overflow-ellipsis">
-          <%= tag.title %>
+        <span class="card__tag btn btn--plain overflow-ellipsis">
+          <%= tag.title %><%= "," unless index == card.tags.size - 1 %>
         </span>
       <% end %>
-    <% end %>
+    </div>
   </div>
-</div>
+<% end %>