diff --git a/src/werefox-obs-layouts/pages/index.js b/src/werefox-obs-layouts/pages/index.js
index c6c088b..467973b 100644
--- a/src/werefox-obs-layouts/pages/index.js
+++ b/src/werefox-obs-layouts/pages/index.js
@@ -10,16 +10,8 @@ export default function Home() {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div
-        className="fixed z-0 overflow-hidden animate-scroll"
-        style={{ width: "3600px" }}
-      >
-        <Image
-          src="/images/logo_silhouette_bg.png"
-          width="1800px"
-          height="1080px"
-          layout="responsive"
-        />
+      <div className="fixed w-2k h-2k z-0 overflow-hidden animate-scroll">
+        <Image src="/images/4x16_9_logo_silhouette_bg.png" layout="fill" />
       </div>
       <div className="p-4 flex flex-row space-x-6 text-center text-xl text-alice-werefox-red-light w-1080p h-1080p z-10">
         <div className="flex flex-col flex-grow space-y-6 z-10">
@@ -31,88 +23,93 @@ export default function Home() {
               {/* <p>this is the chat</p> */}
             </div>
             <div
-              className="rounded-sm ring-4 ring-alice-werefox-red bg-alice-werefox-grey-dark bg-opacity-0 aspect-video overflow-hidden relative"
-              style={{ height: "176px", width: "264px" }}
+              className="rounded-sm ring-4 ring-alice-werefox-red bg-alice-werefox-grey-dark bg-opacity-60 aspect-video overflow-hidden relative"
+              style={{
+                height: "148px",
+                width: "264px",
+              }}
             >
-              <div className=" top-0 left-0">
-                <Image
-                  src="/images/skye_annoyed.png"
-                  width="720"
-                  height="480"
-                  className="animate-topslide1"
-                ></Image>
-              </div>
-              <div className="absolute top-0 left-0">
-                <Image
-                  src="/images/skye_coffee.png"
-                  width="720"
-                  height="480"
-                  className="animate-topslide2"
-                ></Image>
-              </div>
-              <div className="absolute top-0 left-0">
-                <Image
-                  src="/images/skye_heart.png"
-                  width="720"
-                  height="480"
-                  className="animate-topslide3"
-                ></Image>
-              </div>
-              <div className="absolute top-0 left-0">
-                <Image
-                  src="/images/skye_shrug.png"
-                  width="720"
-                  height="480"
-                  className="animate-topslide4"
-                ></Image>
-              </div>
-              <div className="absolute top-0 left-0">
-                <Image
-                  src="/images/skye_sunglasses.png"
-                  width="720"
-                  height="480"
-                  className="animate-topslide5"
-                ></Image>
-              </div>
-              <div className="absolute top-0 left-0">
-                <Image
-                  src="/images/skye_wink.png"
-                  width="720"
-                  height="480"
-                  className="animate-topslide6"
-                ></Image>
-              </div>
-              <div className="absolute top-0 left-0">
-                <Image
-                  src="/images/skye_witch.jpg"
-                  width="720"
-                  height="480"
-                  className="animate-topslide7"
-                ></Image>
-              </div>
-              <div className="absolute top-0 left-0">
-                <Image
-                  src="/images/fucker_in_charge.jpeg"
-                  width="720"
-                  height="480"
-                  className="animate-topslide8"
-                ></Image>
-              </div>
-              <div className="absolute top-0 left-0">
-                <Image
-                  src="/images/ada_werefox_temp.jpeg"
-                  width="720"
-                  height="480"
-                  className="animate-topslide9"
-                ></Image>
-              </div>
-              <div className="absolute top-0 left-0">
-                <Image
-                  src="/images/ref_sheet_crop.jpg"
-                  width="720"
-                  height="480"
-                  className="animate-topslide10"
-                ></Image>
+              <div className="opacity-100">
+                <div className=" top-0 left-0">
+                  <Image
+                    src="/images/skye_annoyed.png"
+                    width="264px"
+                    height="148px"
+                    className="animate-topslide1"
+                  ></Image>
+                </div>
+                <div className="absolute top-0 left-0">
+                  <Image
+                    src="/images/skye_coffee.png"
+                    width="264px"
+                    height="148px"
+                    className="animate-topslide2"
+                  ></Image>
+                </div>
+                <div className="absolute top-0 left-0">
+                  <Image
+                    src="/images/skye_heart.png"
+                    width="264px"
+                    height="148px"
+                    className="animate-topslide3"
+                  ></Image>
+                </div>
+                <div className="absolute top-0 left-0">
+                  <Image
+                    src="/images/skye_shrug.png"
+                    width="264px"
+                    height="148px"
+                    className="animate-topslide4"
+                  ></Image>
+                </div>
+                <div className="absolute top-0 left-0">
+                  <Image
+                    src="/images/skye_sunglasses.png"
+                    width="264px"
+                    height="148px"
+                    className="animate-topslide5"
+                  ></Image>
+                </div>
+                <div className="absolute top-0 left-0">
+                  <Image
+                    src="/images/skye_wink.png"
+                    width="264px"
+                    height="148px"
+                    className="animate-topslide6"
+                  ></Image>
+                </div>
+                <div className="absolute top-0 left-0">
+                  <Image
+                    src="/images/skye_witch.jpg"
+                    width="264px"
+                    height="148px"
+                    className="animate-topslide7"
+                  ></Image>
+                </div>
+                <div className="absolute top-0 left-0">
+                  <Image
+                    src="/images/fucker_in_charge.jpeg"
+                    width="264px"
+                    height="148px"
+                    className="animate-topslide8"
+                  ></Image>
+                </div>
+                <div className="absolute top-0 left-0">
+                  <Image
+                    src="/images/ada_werefox_temp.jpeg"
+                    width="264px"
+                    height="148px"
+                    className="animate-topslide9"
+                  ></Image>
+                </div>
+                <div className="absolute top-0 left-0">
+                  <Image
+                    src="/images/ref_sheet_crop.jpg"
+                    width="264px"
+                    height="148px"
+                    className="animate-topslide10"
+                  ></Image>
+                </div>
               </div>
             </div>
           </div>
diff --git a/src/werefox-obs-layouts/public/images/4x16_9_logo_silhouette_bg.png b/src/werefox-obs-layouts/public/images/4x16_9_logo_silhouette_bg.png
new file mode 100644
index 0000000..0f76fca
Binary files /dev/null and b/src/werefox-obs-layouts/public/images/4x16_9_logo_silhouette_bg.png differ
diff --git a/src/werefox-obs-layouts/public/images/4x_logo_silhouette_bg.png b/src/werefox-obs-layouts/public/images/4x_logo_silhouette_bg.png
new file mode 100644
index 0000000..d0c2b55
Binary files /dev/null and b/src/werefox-obs-layouts/public/images/4x_logo_silhouette_bg.png differ
diff --git a/src/werefox-obs-layouts/public/images/logo_silhouette_bg.png b/src/werefox-obs-layouts/public/images/logo_silhouette_bg.png
deleted file mode 100644
index 5a0280f..0000000
Binary files a/src/werefox-obs-layouts/public/images/logo_silhouette_bg.png and /dev/null differ
diff --git a/src/werefox-obs-layouts/tailwind.config.js b/src/werefox-obs-layouts/tailwind.config.js
index a4372ee..01c2243 100644
--- a/src/werefox-obs-layouts/tailwind.config.js
+++ b/src/werefox-obs-layouts/tailwind.config.js
@@ -154,9 +154,9 @@ module.exports = withAnimations({
           "100%": { "margin-top": "-10em" },
         },
         scroll: {
-          "0%": { transform: "translate(-45%, -45%)" },
-          "50%": { transform: "translate(-25%, -25%)" },
-          "100%": { transform: "translate(-5%, -5%)" },
+          "0%": { transform: "translate(-40%, -40%)" },
+          "50%": { transform: "translate(-20%, -20%)" },
+          "100%": { transform: "translate(0%, 0%)" },
         },
       },
       animation: {
@@ -173,7 +173,7 @@ module.exports = withAnimations({
         topslide8: "topslide8 40s ease-in-out infinite",
         topslide9: "topslide9 40s ease-in-out infinite",
         topslide10: "topslide10 40s ease-in-out infinite",
-        scroll: "scroll 20s linear infinite",
+        scroll: "scroll 30s linear infinite",
       },
       width: {
         "2k": "3840px",