diff --git a/lib/cannery_web/components/ammo_group_card.ex b/lib/cannery_web/components/ammo_group_card.ex
index 88f4fcc5..59cd2dc0 100644
--- a/lib/cannery_web/components/ammo_group_card.ex
+++ b/lib/cannery_web/components/ammo_group_card.ex
@@ -14,7 +14,8 @@ defmodule CanneryWeb.Components.AmmoGroupCard do
     <div
       id={"ammo_group-#{@ammo_group.id}"}
       class="mx-4 my-2 px-8 py-4 flex flex-col justify-center items-center
-            border border-gray-400 rounded-lg shadow-lg hover:shadow-md"
+            border border-gray-400 rounded-lg shadow-lg hover:shadow-md
+            transition-all duration-300 ease-in-out"
     >
       <%= live_redirect to: Routes.ammo_group_show_path(Endpoint, :show, @ammo_group),
                     class: "mb-2 link" do %>
diff --git a/lib/cannery_web/components/container_card.ex b/lib/cannery_web/components/container_card.ex
index fb190d4d..2f73f550 100644
--- a/lib/cannery_web/components/container_card.ex
+++ b/lib/cannery_web/components/container_card.ex
@@ -11,7 +11,8 @@ defmodule CanneryWeb.Components.ContainerCard do
     <div
       id={"container-#{@container.id}"}
       class="mx-4 my-2 px-8 py-4 flex flex-col justify-center items-center
-        border border-gray-400 rounded-lg shadow-lg hover:shadow-md"
+        border border-gray-400 rounded-lg shadow-lg hover:shadow-md
+        transition-all duration-300 ease-in-out"
     >
       <div class="mb-4 flex flex-col justify-center items-center">
         <%= live_redirect to: Routes.container_show_path(Endpoint, :show, @container),
diff --git a/lib/cannery_web/components/invite_card.ex b/lib/cannery_web/components/invite_card.ex
index 7b1f8f92..f293f887 100644
--- a/lib/cannery_web/components/invite_card.ex
+++ b/lib/cannery_web/components/invite_card.ex
@@ -9,7 +9,8 @@ defmodule CanneryWeb.Components.InviteCard do
   def invite_card(assigns) do
     ~H"""
     <div class="mx-4 my-2 px-8 py-4 flex flex-col justify-center items-center space-y-4
-      border border-gray-400 rounded-lg shadow-lg hover:shadow-md">
+      border border-gray-400 rounded-lg shadow-lg hover:shadow-md
+      transition-all duration-300 ease-in-out">
       <h1 class="title text-xl">
         <%= @invite.name %>
       </h1>
diff --git a/lib/cannery_web/components/tag_card.ex b/lib/cannery_web/components/tag_card.ex
index d4b54714..15a393d9 100644
--- a/lib/cannery_web/components/tag_card.ex
+++ b/lib/cannery_web/components/tag_card.ex
@@ -10,7 +10,8 @@ defmodule CanneryWeb.Components.TagCard do
     <div
       id={"tag-#{@tag.id}"}
       class="mx-4 my-2 px-8 py-4 space-x-4 flex justify-center items-center
-          border border-gray-400 rounded-lg shadow-lg hover:shadow-md"
+          border border-gray-400 rounded-lg shadow-lg hover:shadow-md
+          transition-all duration-300 ease-in-out"
     >
       <h1
         class="px-4 py-2 rounded-lg title text-xl"
diff --git a/lib/cannery_web/components/user_card.ex b/lib/cannery_web/components/user_card.ex
index 7d9d886e..6b3518ad 100644
--- a/lib/cannery_web/components/user_card.ex
+++ b/lib/cannery_web/components/user_card.ex
@@ -10,7 +10,8 @@ defmodule CanneryWeb.Components.UserCard do
     <div
       id={"user-#{@user.id}"}
       class="mx-4 my-2 px-8 py-4 flex flex-col justify-center items-center
-          border border-gray-400 rounded-lg shadow-lg hover:shadow-md"
+          border border-gray-400 rounded-lg shadow-lg hover:shadow-md
+          transition-all duration-300 ease-in-out"
     >
       <h1 class="px-4 py-2 rounded-lg title text-xl">
         <%= @user.email %>