diff --git a/src/components/SearchModal.css b/src/components/SearchModal.css
index 1d4e2ef71..e322a788a 100644
--- a/src/components/SearchModal.css
+++ b/src/components/SearchModal.css
@@ -50,3 +50,18 @@
     display: flex;
     align-items: center
 }
+
+.vc-search-modal-header-text {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 8px;
+}
+
+.vc-search-modal-no-results-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
diff --git a/src/components/SearchModal.tsx b/src/components/SearchModal.tsx
index 65e6baaa6..3264f8812 100644
--- a/src/components/SearchModal.tsx
+++ b/src/components/SearchModal.tsx
@@ -637,7 +637,7 @@ export default function SearchModal({ modalProps, onSubmit, input, searchType =
             else throw new Error("Unknown type " + type);
         }, [results, selectedDestinationKeys, handleToggleDestination]);
         const navRef = useRef(null);
-        const nav = createNavigator(cl("search-modal"), navRef);
+        const nav = createNavigator(cl("nav"), navRef);
 
         return navigatorWrapper({
             navigator: nav,
@@ -684,20 +684,14 @@ export default function SearchModal({ modalProps, onSubmit, input, searchType =
 
 
     return (
-        <ModalRoot {...modalProps} size={ModalSize.SMALL} className={cl("search-modal")}>
+        <ModalRoot {...modalProps} size={ModalSize.SMALL}>
             <ModalHeader
-                className={cl("search-modal-header")}
+                className={cl("header")}
                 direction={Flex.Direction.VERTICAL}
                 align={Flex.Align.START}
                 justify={Flex.Justify.BETWEEN}
             >
-                <div style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    justifyContent: "space-between",
-                    width: "100%",
-                    marginBottom: "8px"
-                }}>
+                <div className={cl("header-text")}>
                     <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
                         <Heading variant="heading-lg/semibold"
                                  style={{ flexGrow: 1 }}>{"Search for " + searchTypeToText(searchType)}</Heading>
@@ -728,7 +722,7 @@ export default function SearchModal({ modalProps, onSubmit, input, searchType =
                     rowData={results}
                     handleToggleDestination={setSelectedCallback}
                 /> : <ModalContent className={cl("no-results")}>
-                        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "20px" }}>
+                        <div className={cl("no-results-container")}>
                             <svg
                                 width="48"
                                 height="48"