diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx
index 42f40f7..304ed0d 100644
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -53,39 +53,37 @@ export const Library = (): ReactElement => {
 
   const ComicInfoXML = (value) => {
     return value.data ? (
-      <div className="comicvine-metadata mt-3">
-        <dl>
-          <span className="tags has-addons is-size-7">
-            <span className="tag">Series</span>
-            <span className="tag is-warning is-light">
-              {ellipsize(value.data.series[0], 25)}
-            </span>
+      <dl className="flex flex-col text-md p-4 mx-4 my-3 rounded-lg bg-amber-400 w-max">
+        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+          <span className="pr-1 pt-1">
+            <i className="icon-[solar--bookmark-square-minimalistic-bold-duotone] w-5 h-5"></i>
           </span>
-        </dl>
-        <dl>
-          <div className="field is-grouped is-grouped-multiline">
-            <div className="control">
-              <span className="tags has-addons is-size-7  mt-2">
-                <span className="tag">Pages</span>
-                <span className="tag is-info is-light has-text-weight-bold">
-                  {value.data.pagecount[0]}
-                </span>
+          <span className="text-md text-slate-900 dark:text-slate-900">
+            {ellipsize(value.data.series[0], 45)}
+          </span>
+        </span>
+        <div className="field is-grouped is-grouped-multiline">
+          <div className="control">
+            <span className="tags has-addons is-size-7  mt-2">
+              <span className="tag">Pages</span>
+              <span className="tag is-info is-light has-text-weight-bold">
+                {value.data.pagecount[0]}
               </span>
-            </div>
-
-            <div className="control">
-              <span className="tags has-addons is-size-7 mt-2">
-                <span className="tag">Issue</span>
-                {!isNil(value.data.number) && (
-                  <span className="tag has-text-weight-bold is-success is-light">
-                    {parseInt(value.data.number[0], 10)}
-                  </span>
-                )}
-              </span>
-            </div>
+            </span>
           </div>
-        </dl>
-      </div>
+
+          <div className="control">
+            <span className="tags has-addons is-size-7 mt-2">
+              <span className="tag">Issue</span>
+              {!isNil(value.data.number) && (
+                <span className="tag has-text-weight-bold is-success is-light">
+                  {parseInt(value.data.number[0], 10)}
+                </span>
+              )}
+            </span>
+          </div>
+        </div>
+      </dl>
     ) : null;
   };
 
@@ -110,13 +108,11 @@ export const Library = (): ReactElement => {
           {
             header: "ComicInfo.xml",
             accessorKey: "_source.sourcedMetadata.comicInfo",
-            align: "center",
-            minWidth: 250,
             cell: (info) =>
               !isEmpty(info.getValue()) ? (
                 <ComicInfoXML data={info.getValue()} />
               ) : (
-                <span className="tag mt-5">No ComicInfo.xml</span>
+                <span className="text-sm p-4">No ComicInfo.xml</span>
               ),
           },
         ],
@@ -128,12 +124,10 @@ export const Library = (): ReactElement => {
             header: "Publisher",
             accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation",
             cell: (info) => {
-              return (
-                !isNil(info.getValue()) && (
-                  <h6 className="is-size-7 has-text-weight-bold">
-                    {info.getValue().publisher.name}
-                  </h6>
-                )
+              return !isNil(info.getValue()) ? (
+                <h6>{info.getValue().publisher.name}</h6>
+              ) : (
+                "Chimin"
               );
             },
           },
diff --git a/src/client/components/shared/Carda.tsx b/src/client/components/shared/Carda.tsx
index 315ba8e..a162620 100644
--- a/src/client/components/shared/Carda.tsx
+++ b/src/client/components/shared/Carda.tsx
@@ -141,11 +141,23 @@ const renderCard = (props: ICardProps): ReactElement => {
       return (
         <>
           {/* thumbnail */}
-          <div className="rounded-md overflow-hidden w-fit h-fit">
+          <div className="rounded-lg overflow-hidden w-fit h-fit">
             <img src={props.imageUrl} />
           </div>
         </>
       );
+    case "card-with-info-panel":
+      return (
+        <>
+          <div className="flex flex-row">
+            {/* thumbnail */}
+            <div className="rounded-md overflow-hidden w-fit h-fit">
+              <img src={props.imageUrl} />
+            </div>
+            {/* myata-dyata */}
+          </div>
+        </>
+      );
 
     default:
       return <></>;
diff --git a/src/client/components/shared/MetadataPanel.tsx b/src/client/components/shared/MetadataPanel.tsx
index 8fb5e3c..82078b5 100644
--- a/src/client/components/shared/MetadataPanel.tsx
+++ b/src/client/components/shared/MetadataPanel.tsx
@@ -31,61 +31,49 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
     {
       name: "rawFileDetails",
       content: () => (
-        <dl>
+        <dl className="bg-[#647587] p-3 rounded-lg">
           <dt>
-            <h6
-              className="name has-text-weight-medium mb-1"
-              style={props.titleStyle}
-            >
-              {issueName}
-            </h6>
+            <p className="text-lg">{issueName}</p>
           </dt>
-          <dd className="is-size-7">
-            Is a part of{" "}
-            <span className="has-text-weight-semibold">
-              {inferredMetadata.issue.name}
-            </span>
+          <dd className="text-sm">
+            Is a part of <span>{inferredMetadata.issue.name}</span>
           </dd>
 
-          <dd className="is-size-7 mt-2">
-            <div className="field is-grouped is-grouped-multiline">
-              <div className="control">
-                <span className="tags">
-                  <span
-                    className="tag is-success is-light has-text-weight-semibold"
-                    style={props.tagsStyle}
-                  >
-                    {rawFileDetails.extension}
-                  </span>
-                  <span
-                    className="tag is-success is-light has-text-weight-semibold"
-                    style={props.tagsStyle}
-                  >
-                    {rawFileDetails.mimeType}
-                  </span>
-                  <span
-                    className="tag is-success is-light"
-                    style={props.tagsStyle}
-                  >
-                    {prettyBytes(rawFileDetails.fileSize)}
-                  </span>
+          {/* Issue number */}
+          {inferredMetadata.issue.number && (
+            <dd className="my-2">
+              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                <span className="pr-1 pt-1">
+                  <i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
                 </span>
-              </div>
-              <div className="control">
-                {inferredMetadata.issue.number && (
-                  <div className="tags has-addons">
-                    <span className="tag is-light" style={props.tagsStyle}>
-                      Issue #
-                    </span>
-                    <span className="tag is-warning" style={props.tagsStyle}>
-                      {inferredMetadata.issue.number}
-                    </span>
-                  </div>
-                )}
-              </div>
+                <span className="text-md text-slate-900 dark:text-slate-900">
+                  {inferredMetadata.issue.number}
+                </span>
+              </span>
+            </dd>
+          )}
+          <dd className="flex flex-row gap-2 w-max">
+            {/* File extension */}
+            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+              <span className="pr-1 pt-1">
+                <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
+              </span>
 
-            </div>
-            
+              <span className="text-md text-slate-500 dark:text-slate-900">
+                {rawFileDetails.mimeType}
+              </span>
+            </span>
+
+            {/* size */}
+            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+              <span className="pr-1 pt-1">
+                <i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
+              </span>
+
+              <span className="text-md text-slate-500 dark:text-slate-900">
+                {prettyBytes(rawFileDetails.fileSize)}
+              </span>
+            </span>
           </dd>
         </dl>
       ),
@@ -208,25 +196,14 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
   });
 
   return (
-    <div className="column" style={props.containerStyle}>
-      <div className="comic-detail issue-metadata">
-        <dl>
-          <dd>
-            <div className="columns mt-2">
-              <div className="column is-3">
-                <Card
-                  imageUrl={url}
-                  orientation={"vertical"}
-                  hasDetails={false}
-                  imageStyle={props.imageStyle}
-                // cardContainerStyle={{ maxWidth: 200 }}
-                />
-              </div>
-              <div className="column">{metadataPanel.content()}</div>
-            </div>
-          </dd>
-        </dl>
-      </div>
+    <div className="flex gap-5 my-3">
+      <Card
+        imageUrl={url}
+        orientation={"cover-only"}
+        hasDetails={false}
+        imageStyle={props.imageStyle}
+      />
+      <div>{metadataPanel.content()}</div>
     </div>
   );
 };
diff --git a/src/client/components/shared/T2Table.tsx b/src/client/components/shared/T2Table.tsx
index 26fc835..5fdd9fe 100644
--- a/src/client/components/shared/T2Table.tsx
+++ b/src/client/components/shared/T2Table.tsx
@@ -126,14 +126,14 @@ export const T2Table = (tableOptions): ReactElement => {
         </nav>
       </div>
       <table className="table-auto">
-        <thead>
+        <thead className="sticky top-0 bg-slate-200 dark:bg-slate-500">
           {table.getHeaderGroups().map((headerGroup, idx) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header, idx) => (
                 <th
                   key={header.id}
                   colSpan={header.colSpan}
-                  className="sticky top-0 px-6 py-3"
+                  className="px-3 py-3"
                 >
                   {header.isPlaceholder
                     ? null
@@ -151,11 +151,16 @@ export const T2Table = (tableOptions): ReactElement => {
           {table.getRowModel().rows.map((row, idx) => {
             return (
               <tr key={row.id} onClick={() => rowClickHandler(row)}>
-                {row.getVisibleCells().map((cell) => (
-                  <td key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                ))}
+                {row.getVisibleCells().map((cell) => {
+                  return (
+                    <td key={cell.id} className="align-top">
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </td>
+                  );
+                })}
               </tr>
             );
           })}