diff --git a/plugins/renamer/src/App.css b/plugins/renamer/src/App.css
index 35a373caa..83d124ff6 100644
--- a/plugins/renamer/src/App.css
+++ b/plugins/renamer/src/App.css
@@ -49,6 +49,10 @@
     position: relative;
 }
 
+[data-framer-styles="prerelease"] .tabs {
+    padding: 0 15px;
+}
+
 .tabs:before {
     content: "";
     position: absolute;
@@ -60,6 +64,10 @@
     z-index: 1;
 }
 
+[data-framer-styles="prerelease"] .tabs:before {
+    display: none;
+}
+
 .tabs-container {
     position: relative;
     display: flex;
@@ -73,6 +81,16 @@
     height: 30px;
 }
 
+[data-framer-styles="prerelease"] .tabs-container {
+    justify-content: start;
+    background-color: transparent;
+    border-radius: 0;
+    padding: 10px 0;
+    height: auto;
+    border-top: 1px solid var(--framer-color-divider);
+    border-bottom: 1px solid var(--framer-color-divider);
+}
+
 .tab {
     position: relative;
     background: none !important;
@@ -85,15 +103,33 @@
     transition: color 200ms ease;
 }
 
+[data-framer-styles="prerelease"] .tab {
+    flex: none;
+    width: fit-content;
+    height: 30px;
+    padding: 0 11px;
+    transition:
+        color 100ms ease,
+        background-color 100ms ease;
+}
+
 .tab:not(.active):hover {
     color: var(--framer-color-text-secondary);
 }
 
+[data-framer-styles="prerelease"] .tab:not(.active):hover {
+    color: #999999;
+}
+
 .tab.active {
     color: var(--framer-color-text);
     font-weight: 600;
 }
 
+[data-framer-styles="prerelease"] .tab.active {
+    background-color: var(--framer-color-bg-tertiary) !important;
+}
+
 .tab-bg-container {
     position: absolute;
     inset: 2px;
@@ -221,7 +257,7 @@
     inset: 0;
 }
 
-.results-container:before {
+body:not([data-framer-styles="prerelease"]) .results-container:before {
     content: "";
     position: absolute;
     top: 0;
@@ -250,6 +286,10 @@
     padding: 15px;
 }
 
+[data-framer-styles="prerelease"] .container {
+    padding: 10px 15px;
+}
+
 .results-list {
     position: relative;
 }
@@ -364,6 +404,8 @@
 
 .icon {
     flex-shrink: 0;
+    width: 12px;
+    height: 12px;
 }
 
 .before .icon {
diff --git a/plugins/renamer/src/components/LayerIcon.tsx b/plugins/renamer/src/components/LayerIcon.tsx
index 746462381..9d73e6abe 100644
--- a/plugins/renamer/src/components/LayerIcon.tsx
+++ b/plugins/renamer/src/components/LayerIcon.tsx
@@ -1,65 +1,197 @@
+import { useMemo } from "react"
 import type { IndexNodeType } from "../search/types"
 
 interface Props {
     type: IndexNodeType
+    isBreakpoint: boolean
 }
 
-export default function LayerIcon({ type }: Props) {
-    const width = 12
-    const height = 12
+export default function LayerIcon({ type, isBreakpoint }: Props) {
+    const isPrerelease = useMemo(() => document.body.getAttribute("data-framer-styles") === "prerelease", [])
 
     let icon = null
 
-    switch (type) {
-        case "TextNode":
-            icon = (
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" className="text-icon">
-                    <path
-                        d="M 5.5 4 L 5.5 8.5 M 2.5 3 L 8.5 3"
-                        fill="transparent"
-                        strokeWidth="2"
-                        stroke="currentColor"
-                        strokeLinecap="round"
-                    />
-                </svg>
-            )
-            break
+    if (isPrerelease) {
+        switch (type) {
+            case "TextNode":
+                icon = (
+                    <svg
+                        role="presentation"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="12"
+                        height="12"
+                        fill="none"
+                        className="text-icon"
+                    >
+                        <g
+                            fill="transparent"
+                            stroke="currentColor"
+                            strokeLinecap="round"
+                            strokeMiterlimit="10"
+                            strokeWidth="1.5"
+                        >
+                            <path d="M6.25 2.25V10M2 2.25h8.5" />
+                        </g>
+                    </svg>
+                )
+                break
+            case "FrameNode":
+                icon = isBreakpoint ? (
+                    <svg
+                        role="presentation"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="12"
+                        height="12"
+                        fill="none"
+                        className="frame-icon"
+                    >
+                        <defs>
+                            <clipPath id="breakpoint-clip-path">
+                                <path d="M.5 3.5a3 3 0 0 1 3-3h5a3 3 0 0 1 3 3v5a3 3 0 0 1-3 3h-5a3 3 0 0 1-3-3Z"></path>
+                            </clipPath>
+                        </defs>
+                        <path
+                            d="M.5 3.5a3 3 0 0 1 3-3h5a3 3 0 0 1 3 3v5a3 3 0 0 1-3 3h-5a3 3 0 0 1-3-3Z"
+                            fill="transparent"
+                            stroke="currentColor"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="3"
+                            clipPath="url(#breakpoint-clip-path)"
+                        />
+                        <path
+                            fill="currentColor"
+                            fillOpacity="0.2"
+                            stroke="currentColor"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M10 1.5H2.5l-1 1v2H11v-1Z"
+                        />
+                    </svg>
+                ) : (
+                    <svg
+                        role="presentation"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="12"
+                        height="12"
+                        fill="none"
+                        className="frame-icon"
+                    >
+                        <path
+                            fill="currentColor"
+                            fillOpacity="0.2"
+                            stroke="currentColor"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="1.5"
+                            d="M1.25 3.25a2 2 0 0 1 2-2h5.5a2 2 0 0 1 2 2v5.5a2 2 0 0 1-2 2h-5.5a2 2 0 0 1-2-2Z"
+                        />
+                    </svg>
+                )
+                break
 
-        case "FrameNode":
-            icon = (
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11" className="frame-icon">
-                    <path
-                        d="M 1 2.5 C 1 1.672 1.672 1 2.5 1 L 8.5 1 C 9.328 1 10 1.672 10 2.5 L 10 8.5 C 10 9.328 9.328 10 8.5 10 L 2.5 10 C 1.672 10 1 9.328 1 8.5 Z"
-                        fill="currentColor"
-                    />
-                </svg>
-            )
-            break
+            case "ComponentInstanceNode":
+                icon = (
+                    <svg
+                        role="presentation"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="12"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        fill="none"
+                        aria-hidden="true"
+                        focusable="false"
+                        className="component-icon"
+                    >
+                        <path
+                            fill="currentColor"
+                            fillOpacity="0.2"
+                            stroke="currentColor"
+                            strokeWidth="1.5"
+                            d="M4.586 1.354a2 2 0 0 1 2.828 0l3.232 3.232a2 2 0 0 1 0 2.828l-3.232 3.232a2 2 0 0 1-2.828 0L1.354 7.414a2 2 0 0 1 0-2.828Z"
+                        />
+                        <path fill="none" stroke="currentColor" d="m3 3 6 6M9 3 3 9" />
+                    </svg>
+                )
+                break
 
-        case "ComponentInstanceNode":
-            icon = (
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="11"
-                    height="11"
-                    viewBox="0 0 11 11"
-                    className="component-icon"
-                >
-                    <path
-                        d="M4.44.55a1.5 1.5 0 0 1 2.12 0l1.592 1.591L5.5 4.793 2.848 2.14ZM2.14 8.152.551 6.56a1.5 1.5 0 0 1 0-2.122l1.59-1.59L4.793 5.5Zm8.309-3.713a1.5 1.5 0 0 1 0 2.122L8.859 8.15 6.207 5.5 8.86 2.848Zm-3.89 6.01a1.5 1.5 0 0 1-2.12 0L2.847 8.86 5.5 6.207 8.152 8.86Z"
-                        fill="currentColor"
-                    />
-                </svg>
-            )
-            break
+            default:
+                icon = null
+        }
+    } else {
+        switch (type) {
+            case "TextNode":
+                icon = (
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        role="presentation"
+                        width="12"
+                        height="12"
+                        className="text-icon"
+                    >
+                        <path
+                            d="M6 3.5v6M2.25 2.5h7.5"
+                            fill="transparent"
+                            strokeWidth="2"
+                            stroke="currentColor"
+                            strokeLinecap="round"
+                            strokeMiterlimit="10"
+                        />
+                    </svg>
+                )
+                break
 
-        default:
-            icon = null
+            case "FrameNode":
+                icon = isBreakpoint ? (
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="12"
+                        height="12"
+                        fill="none"
+                        role="presentation"
+                        className="frame-icon"
+                    >
+                        <path
+                            fill="currentColor"
+                            d="M1 3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1a.5.5 0 0 1-.5.5h-9A.5.5 0 0 1 1 4Z"
+                        />
+                        <path
+                            fill="currentColor"
+                            fillOpacity="0.4"
+                            d="M1 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2Z"
+                        />
+                    </svg>
+                ) : (
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11" className="frame-icon">
+                        <path
+                            d="M 1 2.5 C 1 1.672 1.672 1 2.5 1 L 8.5 1 C 9.328 1 10 1.672 10 2.5 L 10 8.5 C 10 9.328 9.328 10 8.5 10 L 2.5 10 C 1.672 10 1 9.328 1 8.5 Z"
+                            fill="currentColor"
+                        />
+                    </svg>
+                )
+                break
+
+            case "ComponentInstanceNode":
+                icon = (
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="11"
+                        height="11"
+                        viewBox="0 0 11 11"
+                        className="component-icon"
+                    >
+                        <path
+                            d="M4.44.55a1.5 1.5 0 0 1 2.12 0l1.592 1.591L5.5 4.793 2.848 2.14ZM2.14 8.152.551 6.56a1.5 1.5 0 0 1 0-2.122l1.59-1.59L4.793 5.5Zm8.309-3.713a1.5 1.5 0 0 1 0 2.122L8.859 8.15 6.207 5.5 8.86 2.848Zm-3.89 6.01a1.5 1.5 0 0 1-2.12 0L2.847 8.86 5.5 6.207 8.152 8.86Z"
+                            fill="currentColor"
+                        />
+                    </svg>
+                )
+                break
+
+            default:
+                icon = null
+        }
     }
 
-    return (
-        <div className="icon" style={{ width, height }}>
-            {icon}
-        </div>
-    )
+    return <div className="icon">{icon}</div>
 }
diff --git a/plugins/renamer/src/components/Results.tsx b/plugins/renamer/src/components/Results.tsx
index 624a93a4f..38929f052 100644
--- a/plugins/renamer/src/components/Results.tsx
+++ b/plugins/renamer/src/components/Results.tsx
@@ -119,7 +119,7 @@ export default function Results({ query, indexing, results, selectedNodeIds, get
                                     void focusResult(result)
                                 }}
                             >
-                                <LayerIcon type={result.entry.type} />
+                                <LayerIcon type={result.entry.type} isBreakpoint={result.entry.isBreakpoint} />
                             </RenameComparison>
                         ))}
                     </div>
diff --git a/plugins/renamer/src/components/SearchIcon.tsx b/plugins/renamer/src/components/SearchIcon.tsx
index 52720f5cf..3b89f25fc 100644
--- a/plugins/renamer/src/components/SearchIcon.tsx
+++ b/plugins/renamer/src/components/SearchIcon.tsx
@@ -1,10 +1,10 @@
 export default function SearchIcon() {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="11.384" height="11.134">
+        <svg role="img" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
             <path
-                d="M 5 0 C 7.761 0 10 2.239 10 5 C 10 6.046 9.679 7.017 9.13 7.819 L 11.164 9.854 C 11.457 10.146 11.457 10.621 11.164 10.914 C 10.871 11.207 10.396 11.207 10.104 10.914 L 8.107 8.918 C 7.254 9.595 6.174 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z M 1.5 5 C 1.5 6.933 3.067 8.5 5 8.5 C 6.933 8.5 8.5 6.933 8.5 5 C 8.5 3.067 6.933 1.5 5 1.5 C 3.067 1.5 1.5 3.067 1.5 5 Z"
+                d="M5.299.5a5 5 0 0 1 4.416 7.345.75.75 0 0 0 .127.887l1.621 1.622a.749.749 0 1 1-1.06 1.06L8.851 9.862a.75.75 0 0 0-.925-.107A5.001 5.001 0 1 1 5.299.5m-3.5 5a3.5 3.5 0 1 0 7 0 3.5 3.5 0 0 0-7 0"
                 fill="currentColor"
-            ></path>
+            />
         </svg>
     )
 }
diff --git a/plugins/renamer/src/components/Tabs.tsx b/plugins/renamer/src/components/Tabs.tsx
index 789ed0c55..52d05ca97 100644
--- a/plugins/renamer/src/components/Tabs.tsx
+++ b/plugins/renamer/src/components/Tabs.tsx
@@ -1,4 +1,5 @@
 import cx from "classnames"
+import { useMemo } from "react"
 
 interface TabItem {
     label: string
@@ -11,22 +12,25 @@ interface Props {
 }
 
 export default function Tabs({ items }: Props) {
+    const isPrerelease = useMemo(() => document.body.getAttribute("data-framer-styles") === "prerelease", [])
     const activeIndex = items.findIndex(item => item.active)
 
     return (
         <div className="tabs">
             <div className="tabs-container">
-                <div className="tab-bg-container">
-                    {activeIndex !== -1 && (
-                        <div
-                            className="tab-bg"
-                            style={{
-                                width: `${100 / items.length}%`,
-                                left: `${(100 / items.length) * activeIndex}%`,
-                            }}
-                        />
-                    )}
-                </div>
+                {!isPrerelease && (
+                    <div className="tab-bg-container">
+                        {activeIndex !== -1 && (
+                            <div
+                                className="tab-bg"
+                                style={{
+                                    width: `${100 / items.length}%`,
+                                    left: `${(100 / items.length) * activeIndex}%`,
+                                }}
+                            />
+                        )}
+                    </div>
+                )}
 
                 {items.map((item, index) => (
                     <button key={index} className={cx("tab", item.active && "active")} onClick={item.select}>
diff --git a/plugins/renamer/src/search/indexer.ts b/plugins/renamer/src/search/indexer.ts
index ff699e8dc..8b435928f 100644
--- a/plugins/renamer/src/search/indexer.ts
+++ b/plugins/renamer/src/search/indexer.ts
@@ -93,6 +93,7 @@ export class Indexer {
                     type: node.__class,
                     locked: node.locked,
                     visible: node.visible,
+                    isBreakpoint: isFrameNode(node) && node.isBreakpoint,
                     name,
                     rect,
                     text,
diff --git a/plugins/renamer/src/search/types.ts b/plugins/renamer/src/search/types.ts
index 7e214ddf2..ee4649653 100644
--- a/plugins/renamer/src/search/types.ts
+++ b/plugins/renamer/src/search/types.ts
@@ -11,6 +11,7 @@ export interface IndexEntry {
     rect: { x: number; y: number; width: number; height: number } | null
     visible: boolean
     locked: boolean
+    isBreakpoint: boolean
 }
 
 export interface Result {