diff --git a/src/client/components/Dashboard/Dashboard.tsx b/src/client/components/Dashboard/Dashboard.tsx
index 3620993..d247b17 100644
--- a/src/client/components/Dashboard/Dashboard.tsx
+++ b/src/client/components/Dashboard/Dashboard.tsx
@@ -88,7 +88,7 @@ export const Dashboard = (): ReactElement => {
         <div className="grid grid-cols-5 gap-6">
           {recentComics?.data.docs.map((recentComic, idx) => (
             <Card
-              orientation="horizontal-2"
+              orientation="horizontal-2-medium"
               key={idx}
               imageUrl={`${LIBRARY_SERVICE_HOST}/${recentComic.rawFileDetails.cover.filePath}`}
               title={recentComic.inferredMetadata.issue.name}
@@ -96,7 +96,7 @@ export const Dashboard = (): ReactElement => {
             >
               <div>
                 <dt className="sr-only">Address</dt>
-                <dd className="text-sm my-1">
+                <dd className="text-sm my-1 flex flex-row gap-1">
                   <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
                     <span className="pr-1 pt-1">
                       <i className="icon-[solar--hashtag-outline]"></i>
@@ -105,6 +105,15 @@ export const Dashboard = (): ReactElement => {
                       {recentComic.inferredMetadata.issue.number}
                     </span>
                   </span>
+                  <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                    <span className="pr-1 pt-1">
+                      <i className="icon-[solar--file-bold-duotone] w-4 h-4"></i>
+                    </span>
+
+                    <span className="text-md text-slate-500">
+                      {recentComic.rawFileDetails.extension}
+                    </span>
+                  </span>
                 </dd>
               </div>
 
diff --git a/src/client/components/shared/Carda.tsx b/src/client/components/shared/Carda.tsx
index 7771ed9..a70c58f 100644
--- a/src/client/components/shared/Carda.tsx
+++ b/src/client/components/shared/Carda.tsx
@@ -107,19 +107,36 @@ const renderCard = (props: ICardProps): ReactElement => {
     case "horizontal-2-small":
       return (
         <>
-          <div className="flex flex-row justify-start align-top gap-3 bg-slate-400 h-fit rounded-md">
+          <div className="flex flex-row justify-start align-top gap-3 bg-slate-200 h-fit rounded-md shadow-md shadow-white-400">
             {/* thumbnail */}
             <div className="rounded-l-md overflow-hidden">
               <img src={props.imageUrl} className="object-cover h-20 w-20" />
             </div>
             {/* details */}
-            <div className="w-fit h-fit px-1 py-1">
+            <div className="w-fit h-fit pl-1 pr-2 py-1">
               <p className="text-sm">{props.title}</p>
               nothin
             </div>
           </div>
         </>
       );
+
+    case "horizontal-2-medium":
+      return (
+        <>
+          <div className="flex flex-row items-center align-top gap-3 bg-slate-200 h-fit p-2 rounded-md shadow-md shadow-white-400">
+            {/* thumbnail */}
+            <div className="rounded-md overflow-hidden">
+              <img src={props.imageUrl} />
+            </div>
+            {/* details */}
+            <div className="pl-1 pr-2 py-1">
+              <p className="text-sm">{props.title}</p>
+              {props.hasDetails && <>{props.children}</>}
+            </div>
+          </div>
+        </>
+      );
     default:
       return <></>;
   }