diff --git a/client/package-lock.json b/client/package-lock.json
index 6f051b7..67d4ac0 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -18,6 +18,7 @@
         "axios": "^1.7.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^5.2.1",
         "react-modal": "^3.16.1",
         "react-router-dom": "^6.23.1",
         "react-toastify": "^10.0.5",
@@ -9650,6 +9651,14 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
diff --git a/client/package.json b/client/package.json
index 115c85d..67814f7 100644
--- a/client/package.json
+++ b/client/package.json
@@ -21,10 +21,11 @@
     "axios": "^1.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.23.1",
-    "recharts": "^2.12.7",
     "react-toastify": "^10.0.5",
+    "recharts": "^2.12.7",
     "uuid": "^10.0.0"
   },
   "devDependencies": {
diff --git a/client/src/components/BoardComponent.tsx b/client/src/components/BoardComponent.tsx
index 5c4322a..26531a4 100644
--- a/client/src/components/BoardComponent.tsx
+++ b/client/src/components/BoardComponent.tsx
@@ -10,6 +10,7 @@ import CardDetails from "./CardDetails";
 import ProgressBar from "./ProgressBar";
 import { useBoard } from "../context/BoardContext";
 import { useTemplates } from "../context/TemplateContext";
+import { MdOutlineTimer, MdOutlineCheckBox } from "react-icons/md";
 
 const BoardComponent: React.FC = () => {
   const [estimatedTimeTotal, setEstimatedTimeTotal] = useState(0);
@@ -238,12 +239,13 @@ const BoardComponent: React.FC = () => {
                                           className="bg-white p-2 mb-2 rounded shadow"
                                           onClick={() => setSelectedCard(card)}
                                         >
-                                          <h3 className="font-semibold">
+                                          <h3 className="font-semibold text-left">
                                             {card.cardName}
                                           </h3>
                                           {card.details.timeEstimate &&
                                           card.details.timeEstimate > 0 ? (
-                                            <p>
+                                            <p className="flex items-center">
+                                              <MdOutlineTimer aria-hidden="true" className="mr-1"/>
                                               {card.details.timeEstimate}{" "}
                                               minutes
                                             </p>
@@ -253,7 +255,8 @@ const BoardComponent: React.FC = () => {
                                           {card.details.checklist &&
                                             card.details.checklist.length >
                                               0 && (
-                                              <p>
+                                              <p className="flex items-center">
+                                                <MdOutlineCheckBox aria-hidden="true" className="mr-1"/>
                                                 {
                                                   card.details.checklist.filter(
                                                     (item) => item.checked
diff --git a/client/src/components/TemplatePreview.tsx b/client/src/components/TemplatePreview.tsx
index 1627229..69d5834 100644
--- a/client/src/components/TemplatePreview.tsx
+++ b/client/src/components/TemplatePreview.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import { Template } from "../types";
 import { useTemplates } from "../context/TemplateContext";
 import { useBoard } from "../context/BoardContext";
+import { MdOutlineTimer } from "react-icons/md";
+import { PiDownloadSimple, PiCards, PiUploadSimple } from "react-icons/pi";
 
 interface TemplatePreviewProps {
   template: Template;
@@ -36,10 +38,10 @@ const TemplatePreview: React.FC<TemplatePreviewProps> = ({ template }) => {
         {template.name}
       </h1>
 
-      <p>Total cards: {template.cards!.length - 1}</p>
-      <p># Downloads: {template.downloads}</p>
-      <p>Length: {getTotalLength()} Minutes</p>
-      <p>Author: {template.author}</p>
+      <p className="flex items-center">{<PiCards aria-hidden="true"  className="mr-1"/>}Total cards: {template.cards!.length - 1}</p>
+      <p className="flex items-center">{<PiDownloadSimple aria-hidden="true"  className="mr-1"/>}Downloads: {template.downloads}</p>
+      <p className="flex items-center">{<MdOutlineTimer aria-hidden="true"  className="mr-1"/>}Length: {getTotalLength()} Minutes</p>
+      <p className="flex items-center">{<PiUploadSimple aria-hidden="true"  className="mr-1"/>}Author: {template.author}</p>
     </div>
   );
 };
diff --git a/client/src/hooks/usePostNewTemplate.tsx b/client/src/hooks/usePostNewTemplate.tsx
index ce85df2..09ac441 100644
--- a/client/src/hooks/usePostNewTemplate.tsx
+++ b/client/src/hooks/usePostNewTemplate.tsx
@@ -8,8 +8,8 @@ const usePostNewTemplate = () => {
   const [error, setError] = useState<Error | null>(null);
   const { user } = useAuth0();
 
-  const email: string = user?.email ?? "anonymous@somethingwentwronghere.com";
-  // const username: string = email.split("@")[0]; // would like to use this instead of email
+  const username: string = user?.given_name ?? user?.nickname ?? "anonymous";
+  // const username: string = email.split("@")[0];
 
   const postNewTemplate = async (template: Board) => {
     setIsLoading(true);
@@ -19,7 +19,7 @@ const usePostNewTemplate = () => {
         `${import.meta.env.VITE_BACKEND_URL}/api/templates`,
         {
           name: template.name,
-          author: email,
+          author: username,
           uuid: template.uuid,
           downloads: 0,
           uploaded_at: new Date(),