diff --git a/.roo/rules/rules.md b/.roo/rules/rules.md
index c59aae1913..59c5135cfc 100644
--- a/.roo/rules/rules.md
+++ b/.roo/rules/rules.md
@@ -44,7 +44,7 @@ The frontend uses yarn (berry).
 
 ### Styling
 
-- We use tailwind v4 to style. Custom stuff is defined in tailwindsetup.css.
+- We use **Tailwind v4** to style. Custom stuff is defined in frontend/tailwindsetup.css
 - _never_ use cursor-help (it looks terrible)
 - We have custom CSS setup as well, so it is a hybrid system. For new code we prefer tailwind, and are working to migrate code to all use tailwind.
 
diff --git a/frontend/app/modals/tos.scss b/frontend/app/modals/tos.scss
deleted file mode 100644
index 1db743d367..0000000000
--- a/frontend/app/modals/tos.scss
+++ /dev/null
@@ -1,247 +0,0 @@
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-.tos-modal {
-    width: 560px;
-    border-radius: 10px;
-    padding: 0;
-
-    .modal-inner {
-        display: flex;
-        flex-direction: column;
-        overflow-y: auto;
-        padding: 30px;
-        width: 100%;
-
-        header.tos-header {
-            flex-direction: column;
-            gap: 8px;
-            border-bottom: none;
-            padding: 0;
-            margin-bottom: 36px;
-            width: 100%;
-
-            .logo {
-                margin-bottom: 10px;
-                display: flex;
-                justify-content: center;
-            }
-
-            .modal-title {
-                text-align: center;
-                font-size: 25px;
-                font-weight: 400;
-                color: var(--main-text-color);
-            }
-
-            .modal-subtitle {
-                color: var(--main-text-color);
-                text-align: center;
-
-                font-style: normal;
-                font-weight: 300;
-                line-height: 20px;
-            }
-        }
-
-        .tos-content {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            gap: 32px;
-            width: 100%;
-            margin-bottom: 0;
-            margin-bottom: 20px;
-
-            .check-toggle-wrapper .toggle-label {
-                color: var(--secondary-text-color);
-            }
-
-            .tips-wrapper {
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-                width: 100%;
-
-                .tips-section {
-                    display: flex;
-                    flex-direction: column;
-                    flex-grow: 1;
-                    gap: 5px;
-
-                    .tip-section-header {
-                        font-weight: bold;
-                        margin-bottom: 5px;
-                        margin-top: 10px;
-
-                        &:first-child {
-                            margin-top: 0;
-                        }
-                    }
-
-                    .tip {
-                        display: flex;
-                        flex-direction: row;
-                        align-items: center;
-
-                        .keybinding2 {
-                            font: var(--fixed-font);
-                            background-color: var(--highlight-bg-color);
-                            color: var(--main-text-color);
-                            padding: 2px 8px;
-                            border-radius: 4px;
-                        }
-
-                        .keybinding-group {
-                            display: flex;
-                            flex-direction: row;
-                            align-items: center;
-                            margin-left: 5px;
-                            margin-right: 5px;
-
-                            &:first-child {
-                                margin-left: 0;
-                            }
-                        }
-
-                        .keybinding {
-                            display: inline-block;
-                            padding: 0.1em 0.4em;
-                            margin: 0 0.1em;
-                            font-family: "SF Pro Text", "Segoe UI", sans-serif;
-                            font-size: 0.85em;
-                            color: #e0e0e0;
-                            background-color: #333;
-                            border-radius: 4px;
-                            border: 1px solid #444;
-                            box-shadow: none;
-                        }
-
-                        .keybinding3 {
-                            color: black;
-                            display: inline-block;
-                            padding: 0.2em 0.4em;
-                            min-width: 24px;
-                            height: 22px;
-                            margin: 0 0.1em;
-                            font-family: "SF Pro Text", "Segoe UI", sans-serif;
-                            font-size: 0.9em;
-                            border: 1px solid #aaa;
-                            border-radius: 4px;
-                            background-color: #ddd;
-                            color: var(--invert-text-color);
-                            box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1);
-                            text-align: center;
-                        }
-
-                        .icon-wrap {
-                            background-color: var(--highlight-bg-color);
-                            padding: 2px;
-                            color: var(--secondary-text-color);
-                            font-size: 12px;
-                            border-radius: 2px;
-                            margin-right: 5px;
-
-                            svg {
-                                position: relative;
-                                top: 3px;
-                                left: 1px;
-                                height: 13px;
-                                #arrow1,
-                                #arrow2 {
-                                    fill: var(--main-text-color);
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            .content-section {
-                display: flex;
-                width: 100%;
-                align-items: center;
-                gap: 18px;
-
-                .icon-wrapper {
-                    .icon {
-                        font-size: 32px;
-                        color: rgba(255, 255, 255, 0.5);
-                    }
-
-                    .fa-people-group {
-                        font-size: 25px;
-                    }
-                }
-
-                .content-section-inner {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: flex-start;
-                    gap: 4px;
-                    flex: 1 0 0;
-
-                    .content-section-title {
-                        color: var(--main-text-color);
-                        font-style: normal;
-                        line-height: 18px;
-                        font-size: 16px;
-                        margin-bottom: 5px;
-                    }
-
-                    .content-section-text {
-                        color: var(--secondary-text-color);
-                        font-style: normal;
-                        line-height: 20px;
-
-                        b {
-                            color: var(--main-text-color);
-                        }
-                    }
-
-                    .content-section-field {
-                        display: flex;
-                        align-items: center;
-                        gap: 8px;
-                    }
-
-                    .check-toggle-wrapper {
-                        margin-top: 5px;
-
-                        label {
-                            font-size: 13px;
-                        }
-                    }
-                }
-            }
-        }
-
-        footer {
-            .content-section-text {
-                text-align: center;
-                color: rgba(255, 255, 255, 0.7);
-                font-size: 11px;
-            }
-
-            .button-wrapper {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: center;
-
-                button {
-                    padding: 8px 20px;
-                    font-size: 14px;
-                }
-
-                button:not(:first-child) {
-                    margin-left: 10px;
-                }
-
-                button.disabled-button {
-                    cursor: default;
-                }
-            }
-        }
-    }
-}
diff --git a/frontend/app/modals/tos.tsx b/frontend/app/modals/tos.tsx
index 3dc900f29d..73cae01ef6 100644
--- a/frontend/app/modals/tos.tsx
+++ b/frontend/app/modals/tos.tsx
@@ -14,7 +14,6 @@ import { atoms, getApi } from "@/app/store/global";
 import { modalsModel } from "@/app/store/modalmodel";
 import { fireAndForget } from "@/util/util";
 import { atom, PrimitiveAtom, useAtom, useAtomValue, useSetAtom } from "jotai";
-import "./tos.scss";
 
 const pageNumAtom: PrimitiveAtom<number> = atom<number>(1);
 
@@ -43,22 +42,22 @@ const ModalPage1 = () => {
 
     return (
         <>
-            <header className="modal-header tos-header unselectable">
-                <div className="logo">
+            <header className="flex flex-col gap-2 border-b-0 p-0 mb-9 w-full unselectable">
+                <div className="mb-2.5 flex justify-center">
                     <Logo />
                 </div>
-                <div className="modal-title">Welcome to Wave Terminal</div>
+                <div className="text-center text-[25px] font-normal text-foreground">Welcome to Wave Terminal</div>
             </header>
-            <div className="modal-content tos-content unselectable">
-                <div className="content-section">
-                    <div className="icon-wrapper">
+            <div className="flex flex-col items-start gap-8 w-full mb-5 unselectable">
+                <div className="flex w-full items-center gap-[18px]">
+                    <div>
                         <a target="_blank" href="https://github.com/wavetermdev/waveterm" rel={"noopener"}>
-                            <i className="icon fa-brands fa-github"></i>
+                            <i className="text-[32px] text-white/50 fa-brands fa-github"></i>
                         </a>
                     </div>
-                    <div className="content-section-inner">
-                        <div className="content-section-title">Support us on GitHub</div>
-                        <div className="content-section-text">
+                    <div className="flex flex-col items-start gap-1 flex-1">
+                        <div className="text-foreground text-base leading-[18px] mb-1.5">Support us on GitHub</div>
+                        <div className="text-secondary leading-5">
                             We're <i>open source</i> and committed to providing a free terminal for individual users.
                             Please show your support by giving us a star on{" "}
                             <a target="_blank" href="https://github.com/wavetermdev/waveterm" rel={"noopener"}>
@@ -67,15 +66,15 @@ const ModalPage1 = () => {
                         </div>
                     </div>
                 </div>
-                <div className="content-section">
-                    <div className="icon-wrapper">
+                <div className="flex w-full items-center gap-[18px]">
+                    <div>
                         <a target="_blank" href="https://discord.gg/XfvZ334gwU" rel={"noopener"}>
-                            <i className="icon fa-solid fa-people-group"></i>
+                            <i className="text-[25px] text-white/50 fa-solid fa-people-group"></i>
                         </a>
                     </div>
-                    <div className="content-section-inner">
-                        <div className="content-section-title">Join our Community</div>
-                        <div className="content-section-text">
+                    <div className="flex flex-col items-start gap-1 flex-1">
+                        <div className="text-foreground text-base leading-[18px] mb-1.5">Join our Community</div>
+                        <div className="text-secondary leading-5">
                             Get help, submit feature requests, report bugs, or just chat with fellow terminal
                             enthusiasts.
                             <br />
@@ -85,13 +84,13 @@ const ModalPage1 = () => {
                         </div>
                     </div>
                 </div>
-                <div className="content-section">
-                    <div className="icon-wrapper">
-                        <i className="icon fa-solid fa-chart-line"></i>
+                <div className="flex w-full items-center gap-[18px]">
+                    <div>
+                        <i className="text-[32px] text-white/50 fa-solid fa-chart-line"></i>
                     </div>
-                    <div className="content-section-inner">
-                        <div className="content-section-title">Telemetry</div>
-                        <div className="content-section-text">
+                    <div className="flex flex-col items-start gap-1 flex-1">
+                        <div className="text-foreground text-base leading-[18px] mb-1.5">Telemetry</div>
+                        <div className="text-secondary leading-5">
                             We collect minimal anonymous{" "}
                             <a target="_blank" href="https://docs.waveterm.dev/telemetry" rel={"noopener"}>
                                 telemetry data
@@ -112,7 +111,7 @@ const ModalPage1 = () => {
                 </div>
             </div>
             <footer className="unselectable">
-                <div className="button-wrapper">
+                <div className="flex flex-row items-center justify-center [&>button]:!px-5 [&>button]:!py-2 [&>button]:text-sm [&>button:not(:first-child)]:ml-2.5">
                     <Button className="font-weight-600" onClick={acceptTos}>
                         Continue
                     </Button>
@@ -131,17 +130,17 @@ const ModalPage2 = () => {
 
     return (
         <>
-            <header className="modal-header tos-header unselectable">
-                <div className="logo">
+            <header className="flex flex-col gap-2 border-b-0 p-0 mb-9 w-full unselectable">
+                <div className="mb-2.5 flex justify-center">
                     <Logo />
                 </div>
-                <div className="modal-title">Icons and Keybindings</div>
+                <div className="text-center text-[25px] font-normal text-foreground">Icons and Keybindings</div>
             </header>
-            <div className="modal-content tos-content unselectable">
+            <div className="flex flex-col items-start gap-8 w-full mb-5 unselectable">
                 <QuickTips />
             </div>
             <footer className="unselectable">
-                <div className="button-wrapper">
+                <div className="flex flex-row items-center justify-center [&>button]:!px-5 [&>button]:!py-2 [&>button]:text-sm [&>button:not(:first-child)]:ml-2.5">
                     <Button className="font-weight-600" onClick={handleGetStarted}>
                         Get Started
                     </Button>
@@ -151,57 +150,6 @@ const ModalPage2 = () => {
     );
 };
 
-const ModalPageLegacy = () => {
-    const setPageNum = useSetAtom(pageNumAtom);
-    const handleContinue = () => {
-        setPageNum(1);
-    };
-    const handleDownloadLegacy = () => {
-        getApi().openExternal("https://waveterm.dev/download-legacy?ref=v7upgrade");
-    };
-    return (
-        <>
-            <header className="modal-header tos-header unselectable">
-                <div className="logo">
-                    <Logo />
-                </div>
-                <div className="modal-title">Welcome to Wave v0.9</div>
-            </header>
-            <div className="modal-content tos-content unselectable">
-                <div className="item">
-                    We’re excited to announce the release of Wave Terminal v0.9. This update introduces a brand-new
-                    layout engine, featuring drag-and-drop screen splitting with flexible block sizing and positioning.
-                    We've also integrated powerful tools like file previews, an editor, web integration, and AI, all
-                    designed to keep you focused and minimize context switching. And for the first time, Wave Terminal
-                    runs <b>natively on Windows</b>!
-                </div>
-                <div>
-                    Wave v0.9 is less opinionated, giving you the freedom to use your standard terminal prompt and
-                    command completions, while supporting all shells (not just bash/zsh). We've also improved
-                    compatibility with ohmyzsh packages, removing some of the friction users experienced. It’s faster,
-                    more performant, and provides a stronger foundation for you to build your own blocks and widgets in
-                    the future.
-                </div>
-                <div className="item">
-                    The new build is a fresh start, and a clean break from the current version. As such, your history,
-                    settings, and configuration will <i>not</i> be carried over. If you'd like to continue to run the
-                    legacy version, you will need to download it separately.
-                </div>
-            </div>
-            <footer className="unselectable">
-                <div className="button-wrapper">
-                    <Button className="outlined grey" onClick={handleDownloadLegacy}>
-                        Download WaveLegacy
-                    </Button>
-
-                    <Button className="font-weight-600" onClick={handleContinue}>
-                        Continue
-                    </Button>
-                </div>
-            </footer>
-        </>
-    );
-};
 
 const TosModal = () => {
     const modalRef = useRef<HTMLDivElement | null>(null);
@@ -223,9 +171,7 @@ const TosModal = () => {
 
     useEffect(() => {
         // on unmount, always reset pagenum
-        if (!clientData.tosagreed && clientData.hasoldhistory) {
-            setPageNum(0);
-        } else if (clientData.tosagreed) {
+        if (clientData.tosagreed) {
             setPageNum(2);
         }
         return () => {
@@ -243,9 +189,6 @@ const TosModal = () => {
     }, []);
     let pageComp: React.JSX.Element = null;
     switch (pageNum) {
-        case 0:
-            pageComp = <ModalPageLegacy />;
-            break;
         case 1:
             pageComp = <ModalPage1 />;
             break;
@@ -257,8 +200,11 @@ const TosModal = () => {
         return null;
     }
     return (
-        <FlexiModal className="tos-modal" ref={modalRef}>
-            <OverlayScrollbarsComponent className="modal-inner" options={{ scrollbars: { autoHide: "leave" } }}>
+        <FlexiModal className="w-[560px] rounded-[10px] p-0" ref={modalRef}>
+            <OverlayScrollbarsComponent
+                className="flex flex-col overflow-y-auto p-[30px] w-full"
+                options={{ scrollbars: { autoHide: "leave" } }}
+            >
                 {pageComp}
             </OverlayScrollbarsComponent>
         </FlexiModal>