diff --git a/packages/saas-ui-core/src/navbar/navbar.test.tsx b/packages/saas-ui-core/src/navbar/navbar.test.tsx
index a30f61857..3c2a57e93 100644
--- a/packages/saas-ui-core/src/navbar/navbar.test.tsx
+++ b/packages/saas-ui-core/src/navbar/navbar.test.tsx
@@ -1,15 +1,11 @@
 import * as React from 'react'
-import { act, render } from '@testing-library/react'
+import { render, testStories } from '@saas-ui/test-utils'
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarItem,
-  NavbarContent,
-  NavbarMenuToggle,
-  NavbarMenu,
-  NavbarMenuItem,
-} from './index'
+import { Navbar, NavbarBrand, NavbarItem, NavbarContent } from './index'
+
+import * as stories from './navbar.stories'
+
+testStories<typeof stories>(stories)
 
 describe('Navbar', () => {
   it('should render correctly', () => {
@@ -28,7 +24,7 @@ describe('Navbar', () => {
   it('should render correctly with brand', () => {
     const wrapper = render(
       <Navbar>
-        <NavbarBrand data-testid="navbar-test">ACME</NavbarBrand>
+        <NavbarBrand data-testid="navbar-test">Saas UI</NavbarBrand>
       </Navbar>
     )
 
@@ -40,9 +36,7 @@ describe('Navbar', () => {
       <Navbar>
         <NavbarContent data-testid="navbar-content-test">
           <NavbarItem>Dashboard</NavbarItem>
-          <NavbarItem>Team</NavbarItem>
-          <NavbarItem>Deployments</NavbarItem>
-          <NavbarItem>Activity</NavbarItem>
+          <NavbarItem>Contacts</NavbarItem>
           <NavbarItem>Settings</NavbarItem>
         </NavbarContent>
       </Navbar>
@@ -52,86 +46,4 @@ describe('Navbar', () => {
 
     expect(navbarContent.children.length).toBe(5)
   })
-
-  it('should render correctly with menu', () => {
-    const items = ['item1', 'item2', 'item3', 'item4', 'item5']
-
-    const wrapper = render(
-      <Navbar data-testid="navbar-test">
-        <NavbarMenuToggle data-testid="navbar-toggle-test" />
-        <NavbarContent data-testid="navbar-content-test">
-          <NavbarItem>Dashboard</NavbarItem>
-          <NavbarItem>Team</NavbarItem>
-          <NavbarItem>Deployments</NavbarItem>
-          <NavbarItem>Activity</NavbarItem>
-          <NavbarItem>Settings</NavbarItem>
-        </NavbarContent>
-        <NavbarMenu data-testid="navbar-menu-test">
-          {items.map((item, index) => (
-            <NavbarMenuItem key={`${item}-${index}`}>{item}</NavbarMenuItem>
-          ))}
-        </NavbarMenu>
-      </Navbar>
-    )
-
-    const toggle = wrapper.getByTestId('navbar-toggle-test')
-
-    act(() => {
-      toggle.click()
-    })
-
-    const menu = wrapper.getByTestId('navbar-menu-test')
-
-    expect(menu.children.length).toBe(items.length)
-  })
-
-  it('should call on onChange when toggle is clicked', () => {
-    const onChange = jest.fn()
-
-    const wrapper = render(
-      <Navbar data-testid="navbar-test">
-        <NavbarMenuToggle
-          data-testid="navbar-toggle-test"
-          onChange={onChange}
-        />
-        <NavbarContent data-testid="navbar-content-test">
-          <NavbarItem>Dashboard</NavbarItem>
-          <NavbarItem>Team</NavbarItem>
-          <NavbarItem>Deployments</NavbarItem>
-          <NavbarItem>Activity</NavbarItem>
-          <NavbarItem>Settings</NavbarItem>
-        </NavbarContent>
-      </Navbar>
-    )
-
-    const toggle = wrapper.getByTestId('navbar-toggle-test')
-
-    act(() => {
-      toggle.click()
-    })
-
-    expect(onChange).toHaveBeenCalled()
-  })
-
-  it('should render correctly with custom toggle icon', () => {
-    const wrapper = render(
-      <Navbar data-testid="navbar-test">
-        <NavbarMenuToggle
-          data-testid="navbar-toggle-test"
-          icon={<span>test</span>}
-        />
-        <NavbarContent data-testid="navbar-content-test">
-          <NavbarItem>Dashboard</NavbarItem>
-          <NavbarItem>Team</NavbarItem>
-          <NavbarItem>Deployments</NavbarItem>
-          <NavbarItem>Activity</NavbarItem>
-          <NavbarItem>Settings</NavbarItem>
-        </NavbarContent>
-      </Navbar>
-    )
-
-    const toggle = wrapper.getByTestId('navbar-toggle-test')
-
-    expect(toggle).toHaveTextContent('test')
-  })
 })
diff --git a/packages/saas-ui-core/src/navbar/navbar.tsx b/packages/saas-ui-core/src/navbar/navbar.tsx
index 0067e918a..37505a232 100644
--- a/packages/saas-ui-core/src/navbar/navbar.tsx
+++ b/packages/saas-ui-core/src/navbar/navbar.tsx
@@ -18,7 +18,7 @@ type MotionProps = Pick<
 >
 
 export interface NavbarProps
-  extends Omit<UseNavbarProps, 'hideOnScroll'>,
+  extends Omit<UseNavbarProps, 'hideOnScroll' | 'ref'>,
     Omit<HTMLChakraProps<'div'>, keyof MotionProps | 'height'>,
     MotionProps,
     ThemingProps<'SuiNavbar'> {
diff --git a/packages/saas-ui-core/src/persona/persona.test.tsx b/packages/saas-ui-core/src/persona/persona.test.tsx
index 678854048..88caf074e 100644
--- a/packages/saas-ui-core/src/persona/persona.test.tsx
+++ b/packages/saas-ui-core/src/persona/persona.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
 import { render, testStories } from '@saas-ui/test-utils'
-import * as stories from '../stories/persona.stories'
+import * as stories from './persona.stories'
 
 testStories<typeof stories>(stories)
diff --git a/packages/saas-ui-core/src/property/property.test.tsx b/packages/saas-ui-core/src/property/property.test.tsx
index 58cb3ef9b..d15d3bb70 100644
--- a/packages/saas-ui-core/src/property/property.test.tsx
+++ b/packages/saas-ui-core/src/property/property.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import { render, testStories } from '@saas-ui/test-utils'
-import * as stories from '../stories/property.stories'
+import * as stories from './property.stories'
 
 const { Basic } = testStories<typeof stories>(stories)