diff --git a/.changeset/tiny-tables-switch.md b/.changeset/tiny-tables-switch.md
new file mode 100644
index 0000000..fa84477
--- /dev/null
+++ b/.changeset/tiny-tables-switch.md
@@ -0,0 +1,7 @@
+---
+'classic-react-hooks': minor
+---
+
+-  Add refs support in use-event-listener
+-  Update doc for use-event-listener
+-  Add new test case for testing refs in use-event-listener
diff --git a/apps/doc/.vitepress/config.mts b/apps/doc/.vitepress/config.mts
index 7848064..4ab06c9 100644
--- a/apps/doc/.vitepress/config.mts
+++ b/apps/doc/.vitepress/config.mts
@@ -28,7 +28,7 @@ export default defineConfig({
          },
          {
             text: 'API',
-            link: '/hooks/use-synced-ref',
+            link: '/getting-started/overview',
          },
          {
             text: `v${version}`,
diff --git a/apps/doc/hooks/use-event-listener.md b/apps/doc/hooks/use-event-listener.md
index eea5dcc..85624b6 100644
--- a/apps/doc/hooks/use-event-listener.md
+++ b/apps/doc/hooks/use-event-listener.md
@@ -35,17 +35,14 @@ type Handler = (event: Event) => void
 ### Usage
 
 ```ts
+import { useRef } from 'react'
 import { useEventListener } from 'classic-react-hooks'
 
 export default function YourComponent() {
    const ref = useRef()
-   useEventListener(
-      () => ref.current,
-      'click',
-      (e) => {
-         console.log(e)
-      }
-   )
+   useEventListener(ref, 'click', (e) => {
+      console.log(e)
+   })
 
    return (
       <div>
diff --git a/apps/doc/public/android-chrome-192x192.png b/apps/doc/public/android-chrome-192x192.png
new file mode 100644
index 0000000..af1df8e
Binary files /dev/null and b/apps/doc/public/android-chrome-192x192.png differ
diff --git a/apps/doc/public/android-chrome-512x512.png b/apps/doc/public/android-chrome-512x512.png
new file mode 100644
index 0000000..5df4016
Binary files /dev/null and b/apps/doc/public/android-chrome-512x512.png differ
diff --git a/apps/doc/public/apple-touch-icon.png b/apps/doc/public/apple-touch-icon.png
new file mode 100644
index 0000000..2db0c36
Binary files /dev/null and b/apps/doc/public/apple-touch-icon.png differ
diff --git a/apps/doc/public/favicon-16x16.png b/apps/doc/public/favicon-16x16.png
new file mode 100644
index 0000000..3ac375f
Binary files /dev/null and b/apps/doc/public/favicon-16x16.png differ
diff --git a/apps/doc/public/favicon-32x32.png b/apps/doc/public/favicon-32x32.png
new file mode 100644
index 0000000..3453aa4
Binary files /dev/null and b/apps/doc/public/favicon-32x32.png differ
diff --git a/apps/doc/public/favicon.ico b/apps/doc/public/favicon.ico
index 8d93928..8b1729e 100644
Binary files a/apps/doc/public/favicon.ico and b/apps/doc/public/favicon.ico differ
diff --git a/apps/doc/public/logo.ico b/apps/doc/public/logo.ico
deleted file mode 100644
index 8d93928..0000000
Binary files a/apps/doc/public/logo.ico and /dev/null differ
diff --git a/package.json b/package.json
index 98c4c89..0ae5298 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
       "access": "public",
       "provenance": true
    },
-   "homepage": "https://github.com/Ashish-simpleCoder/classic-react-hooks",
+   "homepage": "https://classic-react-hooks.vercel.app",
    "author": "Ashish-simpleCoder",
    "license": "MIT",
    "private": false,
diff --git a/src/lib/use-event-listener/index.test.tsx b/src/lib/use-event-listener/index.test.tsx
index 7a46335..64cd685 100644
--- a/src/lib/use-event-listener/index.test.tsx
+++ b/src/lib/use-event-listener/index.test.tsx
@@ -2,7 +2,7 @@ import { renderHook } from '@testing-library/react'
 import { vi } from 'vitest'
 import { useEventListener } from '.'
 
-describe('use-outside-click', () => {
+describe('use-event-listener', () => {
    it('should render', () => {
       renderHook(() => useEventListener(null, 'click', () => {}))
    })
@@ -33,6 +33,29 @@ describe('use-outside-click', () => {
       expect(removeSpy).toHaveBeenCalledTimes(2)
    })
 
+   it('should work with refs', () => {
+      const div = document.createElement('div')
+      const addSpy = vi.spyOn(div, 'addEventListener')
+      const removeSpy = vi.spyOn(div, 'removeEventListener')
+
+      const ref = { current: div }
+
+      const { rerender, unmount } = renderHook(() => {
+         useEventListener(ref, 'resize', () => {}, { passive: true })
+      })
+
+      expect(addSpy).toHaveBeenCalledTimes(1)
+      expect(removeSpy).toHaveBeenCalledTimes(0)
+
+      rerender()
+      expect(addSpy).toHaveBeenCalledTimes(1)
+      expect(removeSpy).toHaveBeenCalledTimes(0)
+
+      unmount()
+      expect(addSpy).toHaveBeenCalledTimes(1)
+      expect(removeSpy).toHaveBeenCalledTimes(1)
+   })
+
    it('should fire listener on event trigger with proper context', () => {
       const div = document.createElement('div')
       const listener = vi.fn()
diff --git a/src/lib/use-event-listener/index.tsx b/src/lib/use-event-listener/index.tsx
index 649f7e5..95b7694 100644
--- a/src/lib/use-event-listener/index.tsx
+++ b/src/lib/use-event-listener/index.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect } from 'react'
+import React, { RefObject, useEffect } from 'react'
 import useSyncedRef from '../use-synced-ref'
 
-type Target = null | EventTarget | (() => EventTarget | null)
+type Target = null | EventTarget | RefObject<EventTarget> | (() => EventTarget | null)
 type Options = boolean | AddEventListenerOptions
 type Handler = (event: Event) => void
 
@@ -18,7 +18,7 @@ type Handler = (event: Event) => void
    
    export default function YourComponent() {
       const ref = useRef()
-      useEventListener(() => ref.current, 'click', (e) =>{
+      useEventListener(ref, 'click', (e) =>{
          console.log(e)
       })
 
@@ -71,11 +71,19 @@ export function useEventListener(
       const options = listener.current.options
 
       if (shouldInjectEvent) {
-         node.addEventListener(event, callback, options)
+         if ('current' in node) {
+            node.current?.addEventListener(event, callback, options)
+         } else {
+            node.addEventListener(event, callback, options)
+         }
       }
 
       return () => {
-         node.removeEventListener(event, callback, options)
+         if ('current' in node) {
+            node.current?.removeEventListener(event, callback, options)
+         } else {
+            node.removeEventListener(event, callback, options)
+         }
       }
    }, [event, target, shouldInjectEvent])
 }