diff --git a/src/assets/box-lr.png b/src/assets/box-lr.png
new file mode 100644
--- /dev/null
+++ b/src/assets/box-lr.png
diff --git a/src/assets/box-tb.png b/src/assets/box-tb.png
new file mode 100644
--- /dev/null
+++ b/src/assets/box-tb.png
diff --git a/src/assets/line.png b/src/assets/line.png
new file mode 100644
--- /dev/null
+++ b/src/assets/line.png
diff --git a/src/components/Header.astro b/src/components/Header.astro
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -73,6 +73,8 @@
     padding: 10px 20px;
     overflow: auto;
     height: 3rem; /* 2rem * 1.5 */
+    /* render over feed bg */
+    z-index: 1;
 
     display: flex;
     flex-direction: row;
diff --git a/src/pages/index.astro b/src/pages/index.astro
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -58,10 +58,6 @@
         }
       }
 
-      & :global(section) {
-        outline: 1px solid red;
-      }
-
       & :global(.landing) {
         grid-area: landing;
       }
diff --git a/src/components/home/Landing.astro b/src/components/home/Landing.astro
--- a/src/components/home/Landing.astro
+++ b/src/components/home/Landing.astro
@@ -3,6 +3,7 @@
 
 import boxRoundedTop from "/assets/box-rounded-top.png";
 import boxCircleMask from "/assets/box-circle-mask.png";
+import line from "/assets/line.png";
 
 const avatar = await fetch(
   "https://api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=" +
@@ -22,20 +23,22 @@
   });
 ---
 
-<section class="landing">
+<section
+  class="landing"
+  style={`--line-png: url("${line.src}");
+          --box-rounded-top-png: url("${boxRoundedTop.src}");
+          --box-circle-mask-png: url("${boxCircleMask.src}");`}
+>
   <h2>Hello World 🏳️‍⚧️</h2>
-  <figure style={`--box-rounded-top-png: url("${boxRoundedTop.src}")`}>
-    <img
-      src={avatar ?? "http://undefined"}
-      alt=""
-      style={`--box-circle-mask-png: url("${boxCircleMask.src}")`}
-    />
+  <figure>
+    <img src={avatar ?? "http://undefined"} alt="" />
     <figcaption>bsky pfp</figcaption>
   </figure>
   <p>
-    Hi! I'm Kai/Nico/Alex/Jen [she/it] (non binary) and I make silly websites!
-    I'm a big fan of progressive enhancement, open source, and linux. (I use
-    arch btw)
+    <!-- todo update this content -->
+    Hi! I'm Kai<wbr />/<wbr />Nico<wbr />/<wbr />Alex<wbr />/<wbr />Jen [she<wbr
+    />/<wbr />it] (non binary) and I make silly websites! I'm a big fan of
+    progressive enhancement, open source, and linux. (I use arch btw)
   </p>
   <p>
     My preferred tools are vanilla html/css, typescript, vite, astro, svelte,
@@ -47,6 +50,26 @@
   section {
     padding: 10px;
     height: fit-content;
+    z-index: 1;
+
+    /* desktop border image */
+    @media not (max-width: 90ch) {
+      position: relative;
+      z-index: 0;
+      &::before {
+        content: "";
+        display: block;
+        image-rendering: pixelated;
+        background-image: var(--line-png);
+        background-size: 60px;
+        z-index: -1;
+        width: 50vw;
+        height: 20px;
+        position: absolute;
+        bottom: -20px;
+        right: -50px;
+      }
+    }
   }
 
   figure {
diff --git a/src/components/home/feeds/Feeds.astro b/src/components/home/feeds/Feeds.astro
--- a/src/components/home/feeds/Feeds.astro
+++ b/src/components/home/feeds/Feeds.astro
@@ -8,6 +8,7 @@
 import IconTumblr from "/assets/icons/Tumblr.svg";
 import IconGit from "/assets/icons/Git.svg";
 import IconGithub from "/assets/icons/GitHub.svg";
+import boxLR from "/assets/box-lr.png";
 
 const tabs: {
   id: string;
@@ -22,7 +23,7 @@
 ];
 ---
 
-<section class="feeds">
+<section class="feeds" style={`--box-lr-png: url("${boxLR.src}");`}>
   <!-- tabindex -1 disables tabbing onto this element
        tabbing is disabled because when the element overflows its focusable
        to scrub across children etc. which is a logical default
@@ -53,7 +54,7 @@
   <div class="feed-contents">
     {
       tabs.map((tab) => (
-        <div class="content" data-tab={tab.id} id={"tab-" + tab.id}>
+        <div class="content" data-tab={tab.id}>
           <tab.content />
         </div>
       ))
@@ -68,7 +69,7 @@
   set:html={tabs
     .map(
       ({ id }) =>
-        `#tab-container:has([data-tab-for="${id}"]:checked) + .feed #tab-${id} { /* show relevant tab */ }`,
+        `#tab-container:has([data-tab-for="${id}"]:checked) + .feed-contents [data-tab="${id}"] { /* show relevant tab */ }`,
     )
     .join("\n")}
 ></style>
@@ -84,6 +85,15 @@
     @media (max-width: 90ch) {
       height: 600px;
     }
+
+    z-index: 0;
+
+    image-rendering: pixelated;
+    border-image-source: var(--box-lr-png);
+    border-image-slice: 0 10 fill;
+    border-image-width: 0 20px;
+    border-image-outset: 10000px 20px;
+    border-image-repeat: round;
   }
 
   /* tab menu */
diff --git a/src/components/home/playing/NowPlaying.astro b/src/components/home/playing/NowPlaying.astro
--- a/src/components/home/playing/NowPlaying.astro
+++ b/src/components/home/playing/NowPlaying.astro
@@ -7,6 +7,7 @@
 import mp3HeadCircle from "/assets/mp3/head-circle.png";
 import mp3PlaybackHead from "/assets/mp3/playback-head.png";
 import boxTlbr from "/assets/box-tlbr.png";
+import boxTB from "/assets/box-tb.png";
 import popoutSpeech from "/assets/popout-speech.png";
 import smallBoxMask from "/assets/small-box-mask.png";
 import type { PlaybackState, Track } from "@spotify/web-api-ts-sdk";
@@ -28,6 +29,7 @@
   --mp3-head-circle-png: url(${mp3HeadCircle.src});
   --mp3-playback-head-png: url(${mp3PlaybackHead.src});
   --box-tlbr-png: url("${boxTlbr.src}");
+  --box-tb-png: url("${boxTB.src}");
   --popout-speech-png: url("${popoutSpeech.src}");
   --small-box-mask-png: url("${smallBoxMask.src}");
 `}
@@ -204,6 +206,20 @@
     }
   }
 
+  .playing {
+    z-index: 2;
+    
+    /* mobile border image */
+    @media (max-width: 90ch) {
+      image-rendering: pixelated;
+      border-image-source: var(--box-tb-png);
+      border-image-slice: 10 0 fill;
+      border-image-width: 20px 0;
+      border-image-outset: 20px 10000px;
+      border-image-repeat: round;
+    }
+  }
+
   .player {
     /* internal and external nodes dont affect each other 
         children dont affect this size
@@ -319,6 +335,8 @@
 
     background-image: var(--mp3-base-png);
     background-size: contain;
+
+    z-index: -99999
   }
 
   .player:focus,