diff --git a/apps/blueprints/src/components/Panel.tsx b/apps/blueprints/src/components/Panel.tsx
index 902af65..84b2af6 100644
--- a/apps/blueprints/src/components/Panel.tsx
+++ b/apps/blueprints/src/components/Panel.tsx
@@ -14,7 +14,7 @@ const StyledPanel = styled(Box)`
     inset -2px 0 1px -1px #201815, inset 0 -3px 3px -3px #000, inset 0 -2px 2px -2px #000,
     inset 0 -1px 1px -1px #000, 0 0 2px 0 #201815, 0 0 4px 0 #201815;
 
-  h2 {
+  .title {
     font-weight: 900;
     color: #ffe6c0;
     line-height: 1.25;
@@ -33,15 +33,6 @@ const StyledPanel = styled(Box)`
       -2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f,
       0 3px 3px -3px #8f8c8b, 0 2px 2px -2px #8f8c8b, 0 1px 1px -1px #8f8c8b;
   }
-
-  .panel-inset {
-    padding: 4px;
-    box-shadow: inset 0 0 3px 0 #000, 0 -2px 2px -1px #000, -2px 0 2px -2px #28221f,
-      -2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f,
-      0 3px 3px -3px #8f8c8b, 0 2px 2px -2px #8f8c8b, 0 1px 1px -1px #8f8c8b;
-    background-color: #242324;
-    margin-top: 12px;
-  }
 `;
 
 interface PanelProps extends Omit<BoxProps, "title" | "bottom"> {
@@ -51,7 +42,7 @@ interface PanelProps extends Omit<BoxProps, "title" | "bottom"> {
 
 export const Panel: React.FC<PanelProps> = ({ title, bottom, children, className, ...props }) => (
   <StyledPanel className={clsx("panel", className)} {...props}>
-    {title && <h2>{title}</h2>}
+    {title && <h2 className="title">{title}</h2>}
     <div className="panel-content">{children}</div>
     {bottom && <div className="panel-inset">{bottom}</div>}
   </StyledPanel>
diff --git a/apps/blueprints/src/components/PanelInset.tsx b/apps/blueprints/src/components/PanelInset.tsx
new file mode 100644
index 0000000..b89aca7
--- /dev/null
+++ b/apps/blueprints/src/components/PanelInset.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, BoxProps } from "@chakra-ui/layout";
+
+interface PanelInsetProps extends BoxProps {
+  light?: boolean;
+}
+
+const StyledPanelInset = styled(Box)`
+  display: block;
+  padding: 4px;
+  box-shadow: inset 0 0 3px 0 #000, 0 -2px 2px -1px #000, -2px 0 2px -2px #28221f,
+    -2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f, 0 3px 3px -3px #8f8c8b,
+    0 2px 2px -2px #8f8c8b, 0 1px 1px -1px #8f8c8b;
+  background-color: #242324;
+
+  &.light {
+    height: 100%;
+    padding: 12px;
+    background: #414040;
+    box-shadow: inset 0 0 3px 0 #000, 0 -2px 2px -1px #000, -2px 0 2px -2px #28221f,
+      -2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f,
+      0 3px 3px -3px #8f8c8b, 0 2px 2px -2px #8f8c8b, 0 1px 1px -1px #8f8c8b;
+  }
+`;
+
+export const PanelInset: React.FC<PanelInsetProps> = ({ className, children, ...props }) => {
+  return (
+    <StyledPanelInset className={className} {...props}>
+      {children}
+    </StyledPanelInset>
+  );
+};
diff --git a/apps/blueprints/src/components/blueprint/Blueprint.tsx b/apps/blueprints/src/components/blueprint/Blueprint.tsx
index 8ec2e54..5d6e13c 100644
--- a/apps/blueprints/src/components/blueprint/Blueprint.tsx
+++ b/apps/blueprints/src/components/blueprint/Blueprint.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import BBCode from "bbcode-to-react";
-import { Grid, Image, Box } from "@chakra-ui/react";
+import { Grid, Box } from "@chakra-ui/react";
 import { Blueprint as IBlueprint, BlueprintPage, BlueprintStringData } from "@factorio-sites/types";
 import { chakraResponsive, parseBlueprintStringClient } from "@factorio-sites/web-utils";
 import { Panel } from "../../components/Panel";
@@ -34,12 +34,8 @@ const StyledBlueptintPage = styled(Grid)`
   }
 
   .panel {
-    &.image {
-      height: 579px;
-    }
     &.child-tree {
       overflow: hidden;
-      height: 579px;
       position: relative;
       .child-tree-wrapper {
         height: 483px;
@@ -47,18 +43,6 @@ const StyledBlueptintPage = styled(Grid)`
       }
     }
 
-    &.tags {
-      text-align: left;
-
-      .tag {
-        display: inline-block;
-        margin: 3px;
-        padding: 0 3px;
-        background: #313131;
-        border-radius: 3px;
-      }
-    }
-
     .description {
       max-height: 600px;
     }
@@ -97,10 +81,13 @@ export const BlueprintSubPage: React.FC<BlueprintProps> = ({
   }, []);
 
   return (
-    <StyledBlueptintPage templateColumns={chakraResponsive({ mobile: "1fr", desktop: "1fr 1fr" })}>
+    <StyledBlueptintPage
+      templateColumns={chakraResponsive({ mobile: "1fr", desktop: "1fr 1fr 1fr 1fr" })}
+    >
       <Panel
         className="image"
-        gridColumn="2"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "3 / span 2" })}
+        gridRow="1"
         title={
           <div className="title">
             <span>Image</span>
@@ -133,8 +120,8 @@ export const BlueprintSubPage: React.FC<BlueprintProps> = ({
 
       <Panel
         className="description"
-        gridColumn="1"
-        gridRow="1"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "1 / span 2" })}
+        gridRow={chakraResponsive({ mobile: null, desktop: "1" })}
         title={
           <div className="title">
             <span className="text">{blueprint_page.title}</span>
@@ -145,20 +132,28 @@ export const BlueprintSubPage: React.FC<BlueprintProps> = ({
         <StyledMarkdown>{blueprint_page.description_markdown}</StyledMarkdown>
       </Panel>
 
-      <Panel title="Info" gridColumn="1" gridRow="2">
+      <Panel
+        title="Info"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "1 / span 2" })}
+        gridRow={chakraResponsive({ mobile: null, desktop: "2" })}
+      >
         <BlueprintInfo blueprint_page={blueprint_page} />
       </Panel>
 
-      <Panel gridColumn="2" gridRow="2" title="Tags">
+      <Panel
+        title="Tags"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "3" })}
+        gridRow={chakraResponsive({ mobile: null, desktop: "2" })}
+      >
         <BlueprintTags blueprint_page={blueprint_page} />
       </Panel>
 
       <Panel
         className="entities"
-        gridColumn="1 / span 2"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "4" })}
         title={
           <span>
-            Entities for{" "}
+            Components for{" "}
             {data?.blueprint?.label ? BBCode.toReact(data.blueprint.label) : "blueprint"}
           </span>
         }
@@ -166,7 +161,11 @@ export const BlueprintSubPage: React.FC<BlueprintProps> = ({
         {data && <BlueprintEntities data={data} />}
       </Panel>
 
-      <Panel className="bp-strings" gridColumn="1 / span 2" title="Blueprint data">
+      <Panel
+        title="Blueprint data"
+        className="bp-strings"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "1 / span 4" })}
+      >
         {string && data && <BlueprintData string={string} data={data} />}
       </Panel>
     </StyledBlueptintPage>
diff --git a/apps/blueprints/src/components/blueprint/BlueprintBook.tsx b/apps/blueprints/src/components/blueprint/BlueprintBook.tsx
index 00888be..84151e6 100644
--- a/apps/blueprints/src/components/blueprint/BlueprintBook.tsx
+++ b/apps/blueprints/src/components/blueprint/BlueprintBook.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import BBCode from "bbcode-to-react";
-import { Image, Box, Grid } from "@chakra-ui/react";
+import { Box, Grid } from "@chakra-ui/react";
 import styled from "@emotion/styled";
 import {
   BlueprintBook,
@@ -45,15 +45,11 @@ const StyledBlueptintPage = styled(Grid)`
   }
 
   .panel {
-    &.image {
-      height: 579px;
-    }
     &.child-tree {
       overflow: hidden;
-      height: 579px;
       position: relative;
       .child-tree-wrapper {
-        height: 483px;
+        height: 480px;
         overflow: auto;
       }
     }
@@ -142,7 +138,7 @@ export const BlueprintBookSubPage: React.FC<BlueprintBookSubPageProps> = ({
   return (
     <StyledBlueptintPage
       className="bp-book"
-      templateColumns={chakraResponsive({ mobile: "1fr", desktop: "1fr 1fr" })}
+      templateColumns={chakraResponsive({ mobile: "1fr", desktop: "1fr 1fr 1fr 1fr" })}
     >
       <Panel
         className="child-tree"
@@ -152,8 +148,8 @@ export const BlueprintBookSubPage: React.FC<BlueprintBookSubPageProps> = ({
             <FavoriteButton is_favorite={favorite} blueprint_page_id={blueprint_page.id} />
           </div>
         }
-        gridColumn="1"
-        gridRow="1"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "1 / span 2" })}
+        gridRow={chakraResponsive({ mobile: "2", desktop: "1" })}
       >
         {bookChildTreeData && (
           <div className="child-tree-wrapper">
@@ -168,7 +164,8 @@ export const BlueprintBookSubPage: React.FC<BlueprintBookSubPageProps> = ({
 
       <Panel
         className="image"
-        gridColumn="2"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "3 / span 2" })}
+        gridRow={chakraResponsive({ mobile: "1", desktop: "1" })}
         title={
           <div className="title">
             <span>Image</span>
@@ -201,8 +198,8 @@ export const BlueprintBookSubPage: React.FC<BlueprintBookSubPageProps> = ({
 
       <Panel
         className="description"
-        gridColumn="1"
-        gridRow={"2 / span 2"}
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "1 / span 2" })}
+        gridRow={chakraResponsive({ mobile: null, desktop: "2 / span 2" })}
         title={
           <div className="title">
             <span className="text">Description </span>
@@ -213,21 +210,29 @@ export const BlueprintBookSubPage: React.FC<BlueprintBookSubPageProps> = ({
         <StyledMarkdown>{blueprint_page.description_markdown}</StyledMarkdown>
       </Panel>
 
-      <Panel title="Info" gridColumn="2" gridRow="2">
+      <Panel
+        title="Info"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "3 / span 2" })}
+        gridRow={chakraResponsive({ mobile: null, desktop: "2" })}
+      >
         <BlueprintInfo blueprint_page={blueprint_page} />
       </Panel>
 
-      <Panel title="Tags" gridColumn="2" gridRow={"3"}>
+      <Panel
+        title="Tags"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: showEntities ? "3" : "3 / span 2" })}
+        gridRow={chakraResponsive({ mobile: null, desktop: "3" })}
+      >
         <BlueprintTags blueprint_page={blueprint_page} />
       </Panel>
 
       {showEntities && (
         <Panel
           className="entities"
-          gridColumn="1 / span 2"
+          gridColumn={chakraResponsive({ mobile: "1", desktop: "4" })}
           title={
             <span>
-              Entities for{" "}
+              Components for{" "}
               {selectedData?.blueprint?.label
                 ? BBCode.toReact(selectedData.blueprint.label)
                 : "blueprint"}
@@ -240,7 +245,7 @@ export const BlueprintBookSubPage: React.FC<BlueprintBookSubPageProps> = ({
 
       <Panel
         className="bp-strings"
-        gridColumn="1 / span 2"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "1 / span 4" })}
         title={`data for ${selected.type.replace("_", " ")} "${selected.data.label}"`}
       >
         {selectedBlueprintString && (
diff --git a/apps/blueprints/src/components/blueprint/BlueprintEntities.tsx b/apps/blueprints/src/components/blueprint/BlueprintEntities.tsx
index 9135d3c..629c1ea 100644
--- a/apps/blueprints/src/components/blueprint/BlueprintEntities.tsx
+++ b/apps/blueprints/src/components/blueprint/BlueprintEntities.tsx
@@ -1,13 +1,40 @@
 import { Box, Image } from "@chakra-ui/react";
-import { BlueprintStringData } from "@factorio-sites/types";
 import styled from "@emotion/styled";
+import { BlueprintStringData } from "@factorio-sites/types";
+import { PanelInset } from "../PanelInset";
 
 const StyledBox = styled(Box)`
-  td {
-    border: 1px solid #909090;
+  .entities {
+    display: inline-block;
   }
-  td:not(.no-padding) {
-    padding: 5px 10px;
+`;
+
+const StyledEntity = styled.span`
+  background: #313131;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 2px;
+  padding: 5px;
+  box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 10px 2px -8px #282828,
+    inset 0 -9px 2px -8px #000, 0 0 4px 0 #000;
+  position: relative;
+
+  &:hover {
+    box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 9px 2px -8px #fff,
+      inset 0 8px 4px -8px #000, inset 0 -8px 4px -8px #000, inset 0 -9px 2px -8px #432400,
+      0 0 4px 0 #000, inset 0 0 4px 2px #f9b44b;
+    background-color: #e39827;
+    filter: drop-shadow(0 0 2px #f9b44b);
+  }
+
+  .entity-total {
+    pointer-events: none;
+    font-weight: 600;
+    position: absolute;
+    right: 3px;
+    bottom: 0;
+    text-shadow: 1px 1px 2px #282828;
   }
 `;
 
@@ -18,37 +45,32 @@ interface BlueprintEntitiesProps {
 export const BlueprintEntities: React.FC<BlueprintEntitiesProps> = ({ data }) => {
   return (
     <StyledBox>
-      <table>
-        <tbody>
-          {data?.blueprint?.entities &&
-            Object.entries(
-              data.blueprint.entities.reduce<Record<string, number>>((entities, entity) => {
-                if (entities[entity.name]) {
-                  entities[entity.name]++;
-                } else {
-                  entities[entity.name] = 1;
-                }
-                return entities;
-              }, {})
-            )
-              .sort((a, b) => b[1] - a[1])
-              .map(([entry_name, entry]) => (
-                <tr key={entry_name}>
-                  <td className="no-padding">
-                    <Image
-                      alt={entry_name.replace(/-/g, " ")}
-                      src={`https://factorioprints.com/icons/${entry_name}.png`}
-                      fallbackSrc="https://storage.googleapis.com/factorio-blueprints-assets/error-icon.png"
-                      width="32px"
-                      height="32px"
-                    />
-                  </td>
-                  <td>{entry_name}</td>
-                  <td>{entry}</td>
-                </tr>
-              ))}
-        </tbody>
-      </table>
+      <PanelInset className="entities">
+        {data?.blueprint?.entities &&
+          Object.entries(
+            data.blueprint.entities.reduce<Record<string, number>>((entities, entity) => {
+              if (entities[entity.name]) {
+                entities[entity.name]++;
+              } else {
+                entities[entity.name] = 1;
+              }
+              return entities;
+            }, {})
+          )
+            .sort((a, b) => b[1] - a[1])
+            .map(([entry_name, entry]) => (
+              <StyledEntity key={entry_name} className="entity" title={entry_name}>
+                <Image
+                  alt={entry_name.replace(/-/g, " ")}
+                  src={`https://factorioprints.com/icons/${entry_name}.png`}
+                  fallbackSrc="https://storage.googleapis.com/factorio-blueprints-assets/error-icon.png"
+                  width="32px"
+                  height="32px"
+                />
+                <span className="entity-total">{entry}</span>
+              </StyledEntity>
+            ))}
+      </PanelInset>
     </StyledBox>
   );
 };
diff --git a/libs/database/src/lib/data/blueprint.ts b/libs/database/src/lib/data/blueprint.ts
index e321cc6..a071d40 100644
--- a/libs/database/src/lib/data/blueprint.ts
+++ b/libs/database/src/lib/data/blueprint.ts
@@ -58,6 +58,7 @@ export async function createBlueprint(
       tags: extraInfo.tags,
       game_version: `${blueprint.version}`,
       image_version: 1,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       data: blueprintDataToDbData(blueprint) as any,
       updated_at: extraInfo.updated_at ? new Date(extraInfo.updated_at * 1000) : new Date(),
       created_at: extraInfo.created_at ? new Date(extraInfo.created_at * 1000) : new Date(),