diff --git a/src/assets/banner.jpg b/src/assets/banner.jpg
new file mode 100644
index 0000000..2d8d67b
Binary files /dev/null and b/src/assets/banner.jpg differ
diff --git a/src/components/card.astro b/src/components/card.astro
index 1feff04..17a5764 100644
--- a/src/components/card.astro
+++ b/src/components/card.astro
@@ -7,7 +7,7 @@ const { tag: Tag = "section", class: className, ...props } = Astro.props;
 <Tag
   class:list={[
     "relative px-5 py-4 min-w-0 min-h-0 overflow-scroll",
-    "bg-white shadow-xs rounded-xl",
+    "bg-white rounded-lg shadow-xs",
     className,
   ]}
   {...props}
diff --git a/src/components/image.astro b/src/components/image.astro
index 8c0b9d8..7d52960 100644
--- a/src/components/image.astro
+++ b/src/components/image.astro
@@ -18,7 +18,7 @@ const {
 
 <style>
   .image {
-    background-size: contain;
+    background-size: cover;
     background-position: center;
   }
 </style>
diff --git a/src/components/sticker.astro b/src/components/sticker.astro
deleted file mode 100644
index 2d82f7e..0000000
--- a/src/components/sticker.astro
+++ /dev/null
@@ -1,11 +0,0 @@
----
-import Image from "@components/image.astro";
-import sticker from "@assets/sticker.gif";
----
-
-<Image
-  tag="aside"
-  class="fixed -bottom-14 right-0 -rotate-10 opacity-10 -z-10 w-48 pointer-events-none"
-  format="webp"
-  src={sticker}
-/>
diff --git a/src/layouts/index.astro b/src/layouts/index.astro
index 96b1862..337c62e 100644
--- a/src/layouts/index.astro
+++ b/src/layouts/index.astro
@@ -1,7 +1,8 @@
 ---
 import "./index.css";
 import icon from "@assets/icon.png";
-import Sticker from "@components/sticker.astro";
+import sticker from "@assets/sticker.gif";
+import Image from "@components/image.astro";
 import type { HTMLAttributes } from "astro/types";
 
 type Props = HTMLAttributes<"body"> & { title?: string };
@@ -36,10 +37,21 @@ const { title, class: className, ...props } = Astro.props;
       src="https://track.lua.re/js/script.js"></script>
   </head>
   <body
-    class:list={["max-w-screen-sm mx-auto p-4 flex flex-col", className]}
+    class:list={[
+      "relative max-w-screen-sm mx-auto p-4 flex flex-col",
+      className,
+    ]}
     {...props}
   >
     <slot />
-    <Sticker />
+    <Image
+      tag="aside"
+      class:list={[
+        "fixed pointer-events-none -z-10 -bottom-14 right-0 -rotate-10 opacity-10 w-48",
+        "hidden sm:block",
+      ]}
+      format="webp"
+      src={sticker}
+    />
   </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7920117..5e967e6 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -17,28 +17,31 @@ const links = {
 };
 ---
 
-<Layout class="max-h-screen">
-  <Card tag="main" class="flex flex-col space-y-2">
+<Layout class="sm:max-h-screen">
+  <Card tag="main" class="space-y-3">
+    <h1 class="hidden"><a href="/" title="lua.re">lua.re</a></h1>
     <pre>{
 `   ∧...∧  𝜗𝜚
- (  ̳• · • ̳)   ᭢
+ (  ̳• · • ̳)    ᭢
  /         づ   ////  ⋆.⁺₊`
    }</pre>
-    <p>hi i'm luaneko ^^</p>
-    <p>this is my site where i put a bunch of random stuff !</p>
-    <p><Image src={miku} class="block rounded-lg max-w-80" /></p>
+    <p>
+      hi i'm luaneko ^^<br />
+      this is my site where i put a bunch of random stuff !<br />
+    </p>
+    <Image tag="p" src={miku} class="rounded-lg max-w-80" />
     <pre>{
 `          へ     ╱ 、
     ૮  -   ՛ )  (˚ˎ 。7
      /   ⁻  ៸|   |、˜〵   ᢉ𐭩 p&g
 乀(ˍ, ل ل  じしˍ,)ノ`
    }</pre>
-    <p>i love cats they miau miau</p>
-    <p><Image src={gato} class="block rounded-lg max-w-60" /></p>
-    <p>best way to contact me is by twt or mail {`<3`}</p>
+    <p>i love cats they go miau miau<br /></p>
+    <Image tag="p" src={gato} class="block rounded-lg max-w-60" />
+    <p>best way to contact me is by twt or mail {`<3`}<br /></p>
   </Card>
 
-  <footer class="flex flex-row space-x-1 my-2 text-sm">
+  <footer class="flex flex-row space-x-1 mt-3 text-sm">
     {
       Object.entries(links).map(([name, { alt, href }], i) => [
         i ? <span>·</span> : null,
