diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index 5427b5602f1b..395187b383c9 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -8,14 +8,11 @@ import Cube from "../Cube/Cube.jsx";
 import TextRotator from "../TextRotater/TextRotater.jsx";
 import HomeSVG from "./SplashVizSVG.mjs";
 
-// Load Styling
-import "./SplashViz.scss";
-
 export default class SplashViz extends Component {
   render() {
     return (
-      <section className="splash-viz dark:bg-gray-900!">
-        <h1 className="splash-viz__heading">
+      <section className="relative h-[clamp(35rem,calc(100vh-80px),45rem)] bg-blue-800 grid grid-rows-[auto_1fr] overflow-hidden p-4 max-lg:h-[clamp(30rem,calc(100vh-80px),35rem)] max-[425px]:min-h-[clamp(40rem,calc(100vh-80px),50rem)] dark:bg-gray-900!">
+        <h1 className="flex flex-wrap items-center justify-center text-white text-[33.178px] md:text-[39.813px] text-center font-[200] mt-[80px] md:mt-[90px] row-start-1 row-end-2">
           <span> bundle your</span>
           <TextRotator delay={5000} repeatDelay={5000} maxWidth={110}>
             <span> assets </span>
@@ -25,11 +22,11 @@ export default class SplashViz extends Component {
           </TextRotator>
         </h1>
         <div
-          className="splash-viz__modules"
+          className="absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[768px] mx-auto -translate-x-1/2 -translate-y-1/2 hidden md:block row-start-2 row-end-3 [&_img]:pt-4 [&_img]:w-full [&_img]:h-full"
           dangerouslySetInnerHTML={{ __html: HomeSVG.body }}
         ></div>
         <Cube
-          className="splash-viz__cube"
+          className="absolute inset-0 m-auto z-[1] row-start-2 row-end-3"
           depth={120}
           repeatDelay={5000}
           continuous
diff --git a/src/components/SplashViz/SplashViz.scss b/src/components/SplashViz/SplashViz.scss
deleted file mode 100644
index 2708b9605984..000000000000
--- a/src/components/SplashViz/SplashViz.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-@use "../../styles/partials/functions" as *;
-@use "../../styles/partials/vars" as *;
-@use "../../styles/partials/mixins" as *;
-@use "sass:map";
-
-.splash-viz {
-  position: relative;
-  height: clamp(35rem, calc(100vh - 80px), 45rem);
-  background: getColor(elephant);
-  display: grid;
-  grid-template-rows: auto 1fr;
-  overflow: hidden;
-  padding-bottom: 4rem;
-  padding: 1rem;
-
-  &__heading {
-    color: getColor(white);
-    font-size: getFontSize(4);
-    text-align: center;
-    font-weight: 200;
-    margin-top: 80px;
-
-    grid-row: 1/2;
-    @include break {
-      font-size: getFontSize(5);
-      margin-top: 90px;
-    }
-  }
-
-  &__modules {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 60vw;
-    min-width: 550px;
-    max-width: map.get($screens, medium);
-    margin: 0 auto;
-    transform: translate(-50%, -50%);
-    display: none;
-    grid-row: 2/3;
-    @include break {
-      display: block;
-    }
-
-    img {
-      padding-top: 1rem;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__cube {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    z-index: 1;
-    grid-row: 2/3;
-  }
-}
-
-@media (max-width: 1024px) {
-  .splash-viz {
-    height: clamp(30rem, calc(100vh - 80px), 35rem);
-  }
-}
-
-@media (max-width: 425px) {
-  .splash-viz {
-    min-height: clamp(40rem, calc(100vh - 80px), 50rem);
-  }
-}