diff --git a/src/Pages/DB/DB.tsx b/src/Pages/DB/DB.tsx
index 0664734c..2103a611 100644
--- a/src/Pages/DB/DB.tsx
+++ b/src/Pages/DB/DB.tsx
@@ -3,7 +3,6 @@ import React from "react";
 import { useLocation } from "wouter";
 import { useTranslation } from "react-i18next";
 import { Disclaimer } from "./Disclaimer";
-import AutoSizer from "react-virtualized-auto-sizer";
 import IngameNamesJson from "../../../public/locales/IngameNames.json";
 
 // todo use translation for char names
@@ -11,25 +10,75 @@ const charNames = IngameNamesJson.English.character_names;
 type CharEntry = [keyof typeof charNames, string];
 
 function CharCard({ charEntry }: { charEntry: CharEntry }) {
+  const tooLongNames = [
+    "Kaedehara Kazuha",
+    "Kamisato Ayaka",
+    "Raiden Shogun",
+    "Sangonomiya Kokomi",
+    "Kamisato Ayato",
+    "Shikanoin Heizou",
+    "Traveler (Anemo)",
+    "Traveler (Geo)",
+    "Traveler (Electro)",
+    "Traveler (Pyro)",
+  ];
+  const rareCharNames = [
+    "amber",
+    "barbara",
+    "beidou",
+    "bennett",
+    "chongyun",
+    "diona",
+    "fischl",
+    "gorou",
+    "kaeya",
+    "kujousara",
+    "lisa",
+    "kuki",
+    "ningguang",
+    "noelle",
+    "razor",
+    "heizou",
+    "rosaria",
+    "sucrose",
+    "sayu",
+    "thoma",
+    "xiangling",
+    "xinyan",
+    "xingqiu",
+    "yanfei",
+    "yunjin",
+  ];
+
   const [_, setLocation] = useLocation();
   const [shortName, name] = charEntry;
+
+  const legendaryCss = "bg-opacity-60 bg-[#FFB13F] ";
+  const rareCss = "bg-opacity-60 bg-[#D28FD6]";
   return (
-    <div
-      className="hover:bg-gray-600 border border-gray-700 hover:border-gray-400 rounded-md relative"
-      style={{ display: "inline-block", margin: "5px" }}
-      onClick={() => setLocation(`/db/${shortName}`)}
-    >
-      <img
-        src={`/images/avatar/${shortName}.png`}
-        alt={name}
-        className="w-16"
-        style={{ margin: "auto" }}
-      />
-      <div
-        className="top-0 right-0 text-sm font-semibold text-grey-300"
-        style={{ textAlign: "center" }}
-      >
-        {name}
+    <div className=" border-gray-700 border-2  rounded-md">
+      <div className="hover:opacity-50">
+        <div
+          className={rareCharNames.includes(shortName) ? rareCss : legendaryCss}
+          onClick={() => setLocation(`/db/${shortName}`)}
+        >
+          <img
+            src={`/images/avatar/${shortName}.png`}
+            alt={name}
+            className="margin-auto"
+          />
+        </div>
+        <div>
+          {tooLongNames.includes(name) ? (
+            <div className="text-xs flex items-center justify-center text-center h-8 bg-slate-600 ">
+              {name}
+            </div>
+          ) : (
+            <div className="text-md flex items-center justify-center text-center h-8 bg-slate-600 ">
+              {name}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
@@ -38,43 +87,15 @@ function CharCard({ charEntry }: { charEntry: CharEntry }) {
 const LOCALSTORAGE_DISC_KEY = "gcsim-db-disclaimer-show";
 
 function CharsView({ characters }: { characters: CharEntry[] }) {
-  // TODO consider removing this, idk what does it do lol
-  const parentRef = React.useRef<HTMLDivElement>(null!);
   return (
-    <div className="h-full w-full pl-2 pr-2">
-      <AutoSizer defaultHeight={100}>
-        {({ height, width }) => (
-          <div
-            ref={parentRef}
-            style={{
-              minHeight: "100px",
-              height: height,
-              width: width,
-              overflow: "auto",
-              position: "relative",
-            }}
-            id="resize-inner"
-          >
-            <div
-              className="ListInner"
-              style={{
-                width: width - 50,
-                position: "relative",
-              }}
-            >
-              {characters.map(entry => (
-                <div
-                  key={entry[0]}
-                  style={{ display: "inline-block" }}
-                  // ref={virtualRow.measureRef}
-                >
-                  <CharCard charEntry={entry} />
-                </div>
-              ))}
-            </div>
+    <div className="p-4">
+      <div className="grid grid-cols-3 gap-2 wide:grid-cols-12">
+        {characters.map((entry) => (
+          <div key={entry[0]}>
+            <CharCard charEntry={entry} />
           </div>
-        )}
-      </AutoSizer>
+        ))}
+      </div>
     </div>
   );
 }
@@ -103,34 +124,28 @@ export function DB() {
       )
     : charsEntries;
   return (
-    <main className="flex flex-col h-full m-2 w-full xs:w-full sm:w-[640px] hd:w-full wide:w-[1160px] ml-auto mr-auto ">
+    <div className="flex flex-col  m-2 w-full xs:w-full sm:w-[640px] hd:w-full wide:w-[1160px] ml-auto mr-auto ">
       <LolDanger />
-      <div className="flex flex-row items-center">
-        <div
-          className="ml-auto flex flex-row gap-x-1"
-          style={{ marginLeft: "0", marginRight: "auto" }}
-        >
-          <ShowFaqsButton setShowDisclaimer={setShowDisclaimer} />
-          <InputGroup
-            leftIcon="search"
-            placeholder={t("db.type_to_search")}
-            value={searchString}
-            onChange={e => setSearchString(e.target.value)}
-          />
-        </div>
+      <div className=" flex flex-row gap-x-1">
+        <ShowFaqsButton setShowDisclaimer={setShowDisclaimer} />
+        <InputGroup
+          leftIcon="search"
+          placeholder={t("db.type_to_search")}
+          value={searchString}
+          onChange={(e) => setSearchString(e.target.value)}
+        />
       </div>
       <div className="border-b-2 mt-2 border-gray-300" />
-      <div className="p-2 grow ">
-        <CharsView characters={filteredChars} />
-      </div>
+      <CharsView characters={filteredChars} />
       <Disclaimer
         isOpen={showDisclaimer}
         onClose={() => setShowDisclaimer(false)}
         hideAlways={hideDisclaimer}
       />
-    </main>
+    </div>
   );
 }
+
 function ShowFaqsButton({
   setShowDisclaimer,
 }: {