diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index 5427b5602f1b..1fbd3d1c9063 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -5,35 +5,40 @@ import { Component } from "react";
 
 // Import Components
 import Cube from "../Cube/Cube.jsx";
-import TextRotator from "../TextRotater/TextRotater.jsx";
+import TextRotater from "../TextRotater/TextRotater.jsx";
 import HomeSVG from "./SplashVizSVG.mjs";
 
 // Load Styling
-import "./SplashViz.scss";
+// Tailwind CSS is now used for styling. Custom SCSS removed.
 
 export default class SplashViz extends Component {
   render() {
     return (
-      <section className="splash-viz dark:bg-gray-900!">
-        <h1 className="splash-viz__heading">
+      <section className="relative overflow-hidden px-4 pb-16 pt-0 bg-[#2b3a42] dark:bg-gray-900 h-[clamp(33rem,calc(100vh-80px),43rem)] md:h-[clamp(29rem,calc(100vh-80px),33rem)] sm:min-h-[clamp(37rem,calc(100vh-80px),45rem)]">
+        {/* TOP TEXT */}
+        <h1 className="text-white text-center font-normal font-[Source_Sans_Pro] text-[30px] md:text-[40px] pt-[100px] md:pt-[110px] mb-8 md:mb-10 leading-[36px] md:leading-[48px]">
           <span> bundle your</span>
-          <TextRotator delay={5000} repeatDelay={5000} maxWidth={110}>
-            <span> assets </span>
-            <span> scripts </span>
-            <span> images </span>
-            <span> styles </span>
-          </TextRotator>
+          <span className="inline-block w-[120px] text-left">
+            <TextRotater delay={2000}>
+              <span>assets</span>
+              <span>scripts</span>
+              <span>images</span>
+              <span>styles</span>
+            </TextRotater>
+          </span>
         </h1>
-        <div
-          className="splash-viz__modules"
-          dangerouslySetInnerHTML={{ __html: HomeSVG.body }}
-        ></div>
-        <Cube
-          className="splash-viz__cube"
-          depth={120}
-          repeatDelay={5000}
-          continuous
-        />
+
+        {/* CENTER GRAPHIC */}
+        <div className="absolute top-[60%] left-1/2 w-[60vw] min-w-[550px] max-w-[768px] -translate-x-1/2 -translate-y-1/2 hidden md:block">
+          <div dangerouslySetInnerHTML={{ __html: HomeSVG.body }} />
+
+          <Cube
+            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10"
+            depth={120}
+            repeatDelay={5000}
+            continuous
+          />
+        </div>
       </section>
     );
   }
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);
-  }
-}