diff --git a/frontend/app/modals/about.scss b/frontend/app/modals/about.scss
deleted file mode 100644
index a6d41dd0ba..0000000000
--- a/frontend/app/modals/about.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-.about-modal {
-    padding-bottom: 34px;
-
-    .content-wrapper .modal-content {
-        margin-bottom: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        padding: 0px 0px;
-        gap: 24px;
-
-        .section-wrapper {
-            display: flex;
-            flex-direction: column;
-            gap: 26px;
-            width: 100%;
-        }
-
-        .section {
-            align-items: center;
-            gap: 16px;
-            align-self: stretch;
-            width: 100%;
-            text-align: center;
-
-            &.logo-section {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex-direction: column;
-                text-align: center;
-
-                .app-name {
-                    font-size: 25px;
-                }
-
-                .text-standard {
-                    line-height: 20px;
-                }
-            }
-        }
-
-        .section.links {
-            display: flex;
-            align-items: flex-start;
-            gap: 10px;
-
-            .wave-button {
-                display: flex;
-                align-items: center;
-
-                .icon-left {
-                    margin-right: 5px;
-                }
-
-                i {
-                    font-size: 16px;
-                    margin-right: 5px;
-                }
-            }
-        }
-    }
-}
diff --git a/frontend/app/modals/about.tsx b/frontend/app/modals/about.tsx
index 2764801b62..348a63d591 100644
--- a/frontend/app/modals/about.tsx
+++ b/frontend/app/modals/about.tsx
@@ -8,7 +8,6 @@ import { Modal } from "./modal";
 import { isDev } from "@/util/isdev";
 import { useState } from "react";
 import { getApi } from "../store/global";
-import "./about.scss";
 
 interface AboutModalProps {}
 
@@ -18,24 +17,24 @@ const AboutModal = ({}: AboutModalProps) => {
     const [updaterChannel] = useState(() => getApi().getUpdaterChannel());
 
     return (
-        <Modal className="about-modal" onClose={() => modalsModel.popModal()}>
-            <div className="section-wrapper">
-                <div className="section logo-section">
+        <Modal className="pb-[34px]" onClose={() => modalsModel.popModal()}>
+            <div className="flex flex-col gap-[26px] w-full">
+                <div className="flex flex-col items-center justify-center gap-4 self-stretch w-full text-center">
                     <Logo />
-                    <div className="app-name">Wave Terminal</div>
-                    <div className="text-standard">
+                    <div className="text-[25px]">Wave Terminal</div>
+                    <div className="leading-5">
                         Open-Source AI-Native Terminal
                         <br />
                         Built for Seamless Workflows
                     </div>
                 </div>
-                <div className="section text-standard">
+                <div className="items-center gap-4 self-stretch w-full text-center">
                     Client Version {details.version} ({isDev() ? "dev-" : ""}
                     {details.buildTime})
                     <br />
                     Update Channel: {updaterChannel}
                 </div>
-                <div className="section links">
+                <div className="flex items-start gap-[10px] self-stretch w-full text-center">
                     <a
                         href="https://github.com/wavetermdev/waveterm"
                         target="_blank"
@@ -61,7 +60,7 @@ const AboutModal = ({}: AboutModalProps) => {
                         <i className="fa-sharp fa-light fa-heart mr-2"></i>Acknowledgements
                     </a>
                 </div>
-                <div className="section text-standard">&copy; {currentDate.getFullYear()} Command Line Inc.</div>
+                <div className="items-center gap-4 self-stretch w-full text-center">&copy; {currentDate.getFullYear()} Command Line Inc.</div>
             </div>
         </Modal>
     );