diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index 5427b5602f1b..092b1875a219 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -1,21 +1,15 @@
-// Import External Dependencies
 import { Component } from "react";
 
-// Load Images
-
 // Import Components
 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="splash-viz relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16 h-[clamp(35rem,calc(100vh-80px),45rem)] max-lg:h-[clamp(30rem,calc(100vh-80px),35rem)] max-[425px]:min-h-[clamp(40rem,calc(100vh-80px),50rem)] bg-[#2b3a42] dark:bg-gray-900!">
+        <h1 className="splash-viz__heading mt-[80px] row-start-1 row-end-2 text-center font-extralight text-white text-[2rem] lg:text-[2.5rem] lg:mt-[90px]">
           <span> bundle your</span>
           <TextRotator delay={5000} repeatDelay={5000} maxWidth={110}>
             <span> assets </span>
@@ -24,12 +18,14 @@ export default class SplashViz extends Component {
             <span> styles </span>
           </TextRotator>
         </h1>
+
         <div
-          className="splash-viz__modules"
+          className="splash-viz__modules absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[768px] m-auto -translate-x-1/2 -translate-y-1/2 hidden md:block row-start-2 row-end-3"
           dangerouslySetInnerHTML={{ __html: HomeSVG.body }}
         ></div>
+
         <Cube
-          className="splash-viz__cube"
+          className="splash-viz__cube 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);
-  }
-}