diff --git a/components/Card.tsx b/components/Card.tsx
index 13389b3..4e84866 100644
--- a/components/Card.tsx
+++ b/components/Card.tsx
@@ -2,16 +2,28 @@ import { isYoutubeLink } from "@lib/string.ts";
 import { IconBrandYoutube } from "@components/icons.tsx";
 
 export function Card(
-  { link, title, image }: { link?: string; title?: string; image?: string },
+  { link, title, image, backgroundSize = 100 }: {
+    backgroundSize?: number;
+    link?: string;
+    title?: string;
+    image?: string;
+  },
 ) {
+  const backgroundStyle = {
+    backgroundImage: `url(${image})`,
+    backgroundSize: "cover",
+  };
+
+  if (backgroundSize !== 100) {
+    backgroundStyle["backgroundSize"] = `${backgroundSize}%`;
+    backgroundStyle["backgroundRepeat"] = "no-repeat";
+    backgroundStyle["backgroundPosition"] = "center";
+  }
+
   return (
     <a
       href={link}
-      style={{
-        backgroundImage: `url(${image})`,
-        backgroundSize: "cover",
-        //background: "#2B2930",
-      }}
+      style={backgroundStyle}
       class="text-white rounded-3xl shadow-md p-4 relative overflow-hidden 
   lg:w-56 lg:h-56 
   sm:w-48 sm:h-48
diff --git a/components/Emoji.tsx b/components/Emoji.tsx
new file mode 100644
index 0000000..f21371e
--- /dev/null
+++ b/components/Emoji.tsx
@@ -0,0 +1,14 @@
+import { asset } from "$fresh/runtime.ts";
+
+export const Emoji = (props: { class?: string; name: string }) => {
+  return props.name
+    ? props.name.endsWith(".png")
+      ? (
+        <img
+          class={`${props?.class || ""}`}
+          src={asset(`/emojis/${props.name}`)}
+        />
+      )
+      : <span>{props.name}</span>
+    : <></>;
+};
diff --git a/components/layouts/main.tsx b/components/layouts/main.tsx
index d8b183c..da39490 100644
--- a/components/layouts/main.tsx
+++ b/components/layouts/main.tsx
@@ -4,6 +4,7 @@ import { CSS, KATEX_CSS } from "https://deno.land/x/gfm@0.2.5/mod.ts";
 import { Head } from "$fresh/runtime.ts";
 import Search, { RedirectSearchHandler } from "@islands/Search.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
+import { Emoji } from "@components/Emoji.tsx";
 
 export type Props = {
   children: ComponentChildren;
@@ -34,11 +35,11 @@ export const MainLayout = ({ children, url, title, context }: Props) => {
             return (
               <a
                 href={m.link}
-                class={`block ${
+                class={`flex items-center gap-2  ${
                   m.link === url.pathname ? "bg-white text-black" : "text-white"
                 } p-3 text-xl w-full rounded-2xl`}
               >
-                {m.emoji} {m.name}
+                {<Emoji class="w-6 h-6" name={m.emoji} />} {m.name}
               </a>
             );
           })}
diff --git a/islands/Search.tsx b/islands/Search.tsx
index f4bf618..3cd0c2b 100644
--- a/islands/Search.tsx
+++ b/islands/Search.tsx
@@ -10,6 +10,7 @@ import Checkbox from "@components/Checkbox.tsx";
 import { Rating } from "@components/Rating.tsx";
 import { useSignal } from "@preact/signals";
 import Image from "@components/Image.tsx";
+import { Emoji } from "@components/Emoji.tsx";
 
 export const RedirectSearchHandler = () => {
   useEventListener("keydown", (e: KeyboardEvent) => {
@@ -53,8 +54,11 @@ export const SearchResultItem = (
       href={href}
       class="p-2 text-white flex gap-4 items-center rounded-2xl hover:bg-gray-700"
     >
+      {showEmoji && resourceType
+        ? <Emoji class="w-7 h-7" name={resourceType.emoji} />
+        : ""}
       {doc?.image && <SearchResultImage src={doc.image} />}
-      {`${showEmoji && resourceType ? resourceType.emoji : ""}`} {doc?.name}
+      {doc?.name}
     </a>
   );
 };
@@ -179,7 +183,7 @@ const Search = (
             class="flex items-center gap-2 p-2 my-4 mx-3"
             style={{ color: "#818181" }}
           >
-            <IconGhost class="animate-hover" />
+            <Emoji class="w-8 h-8" name="Ghost.png" />
             No Results
           </div>
         )}
diff --git a/lib/resources.ts b/lib/resources.ts
index dc516da..f7ec601 100644
--- a/lib/resources.ts
+++ b/lib/resources.ts
@@ -1,30 +1,30 @@
 export const resources = {
   "home": {
-    emoji: "🏡",
+    emoji: "House with Garden.png",
     name: "Home",
     link: "/",
     prefix: "",
   },
   "recipe": {
-    emoji: "🍽️",
+    emoji: "Fork and Knife with Plate.png",
     name: "Recipes",
     link: "/recipes",
     prefix: "Recipes/",
   },
   "movie": {
-    emoji: "🍿",
+    emoji: "Popcorn.png",
     name: "Movies",
     link: "/movies",
     prefix: "Media/movies/",
   },
   "article": {
-    emoji: "📝",
+    emoji: "Writing Hand Medium-Light Skin Tone.png",
     name: "Articles",
     link: "/articles",
     prefix: "Media/articles/",
   },
   "series": {
-    emoji: "📺",
+    emoji: "Television.png",
     name: "Series",
     link: "/series",
     prefix: "Media/series/",
diff --git a/routes/index.tsx b/routes/index.tsx
index 483f2ea..e1263f8 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -19,8 +19,13 @@ export default function Home(props: PageProps) {
           {Object.values(resources).map((m) => {
             return (
               <Card
-                title={`${m.emoji} ${m.name}`}
-                image="/placeholder.svg"
+                title={`${m.name}`}
+                backgroundSize={80}
+                image={`${
+                  m.emoji.endsWith(".png")
+                    ? `/emojis/${encodeURIComponent(m.emoji)}`
+                    : "/placeholder.svg"
+                }`}
                 link={m.link}
               />
             );
diff --git a/static/emojis/Bookmark Tabs.png b/static/emojis/Bookmark Tabs.png
new file mode 100755
index 0000000..92a7cfe
Binary files /dev/null and b/static/emojis/Bookmark Tabs.png differ
diff --git a/static/emojis/Crystal Ball.png b/static/emojis/Crystal Ball.png
new file mode 100755
index 0000000..d13dc19
Binary files /dev/null and b/static/emojis/Crystal Ball.png differ
diff --git a/static/emojis/Fork and Knife with Plate.png b/static/emojis/Fork and Knife with Plate.png
new file mode 100755
index 0000000..b56fe2f
Binary files /dev/null and b/static/emojis/Fork and Knife with Plate.png differ
diff --git a/static/emojis/Ghost.png b/static/emojis/Ghost.png
new file mode 100755
index 0000000..8cf4548
Binary files /dev/null and b/static/emojis/Ghost.png differ
diff --git a/static/emojis/Hourglass Done.png b/static/emojis/Hourglass Done.png
new file mode 100755
index 0000000..284f453
Binary files /dev/null and b/static/emojis/Hourglass Done.png differ
diff --git a/static/emojis/Hourglass Not Done.png b/static/emojis/Hourglass Not Done.png
new file mode 100755
index 0000000..2730dd5
Binary files /dev/null and b/static/emojis/Hourglass Not Done.png differ
diff --git a/static/emojis/House with Garden.png b/static/emojis/House with Garden.png
new file mode 100755
index 0000000..b034ec3
Binary files /dev/null and b/static/emojis/House with Garden.png differ
diff --git a/static/emojis/Musical Note.png b/static/emojis/Musical Note.png
new file mode 100755
index 0000000..37be127
Binary files /dev/null and b/static/emojis/Musical Note.png differ
diff --git a/static/emojis/Musical Notes.png b/static/emojis/Musical Notes.png
new file mode 100755
index 0000000..bfd7b4e
Binary files /dev/null and b/static/emojis/Musical Notes.png differ
diff --git a/static/emojis/Paperclip.png b/static/emojis/Paperclip.png
new file mode 100755
index 0000000..53e90c5
Binary files /dev/null and b/static/emojis/Paperclip.png differ
diff --git a/static/emojis/Party Popper.png b/static/emojis/Party Popper.png
new file mode 100755
index 0000000..530e114
Binary files /dev/null and b/static/emojis/Party Popper.png differ
diff --git a/static/emojis/Popcorn.png b/static/emojis/Popcorn.png
new file mode 100755
index 0000000..54739a6
Binary files /dev/null and b/static/emojis/Popcorn.png differ
diff --git a/static/emojis/Rocket.png b/static/emojis/Rocket.png
new file mode 100755
index 0000000..d8986e4
Binary files /dev/null and b/static/emojis/Rocket.png differ
diff --git a/static/emojis/Teddy Bear.png b/static/emojis/Teddy Bear.png
new file mode 100755
index 0000000..b7c821a
Binary files /dev/null and b/static/emojis/Teddy Bear.png differ
diff --git a/static/emojis/Television.png b/static/emojis/Television.png
new file mode 100755
index 0000000..b35b6d2
Binary files /dev/null and b/static/emojis/Television.png differ
diff --git a/static/emojis/Writing Hand Medium-Light Skin Tone.png b/static/emojis/Writing Hand Medium-Light Skin Tone.png
new file mode 100755
index 0000000..222bd7d
Binary files /dev/null and b/static/emojis/Writing Hand Medium-Light Skin Tone.png differ
diff --git a/static/emojis/placeholder.png b/static/emojis/placeholder.png
new file mode 100755
index 0000000..ec342ea
Binary files /dev/null and b/static/emojis/placeholder.png differ