diff --git a/example/src/App.tsx b/example/src/App.tsx
index c29ae65..cef64c2 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,15 +1,15 @@
-import Alert from '@mui/material/Alert'
-import Container from '@mui/material/Container'
-import Divider from '@mui/material/Divider'
-import Grid from '@mui/material/Grid'
-import Stack from '@mui/material/Stack'
-import { useReducer, useState } from 'react'
 import { OnlineStatusNotification, useOnlineStatus } from '../../src/nsn'
 import './App.css'
 import { AppBarContainer } from './components/AppBar'
 import { InfoModal } from './components/InfoModal'
 import { DarkModeContainer } from './components/darkMode'
 import { PositionContainer } from './components/position'
+import Alert from '@mui/material/Alert'
+import Container from '@mui/material/Container'
+import Divider from '@mui/material/Divider'
+import Grid from '@mui/material/Grid'
+import Stack from '@mui/material/Stack'
+import { useReducer, useState } from 'react'
 
 type ReducerActions = {
   type:
diff --git a/package-lock.json b/package-lock.json
index c2358cf..2e4219d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "react-nsn",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "react-nsn",
-      "version": "1.3.2",
+      "version": "1.3.3",
       "license": "MIT",
       "devDependencies": {
         "@types/jest": "^27.5.2",
diff --git a/package.json b/package.json
index 1157992..5960339 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-nsn",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "private": false,
   "description": "A very lightweight and customizable online network status notification built for react apps.",
   "license": "MIT",
diff --git a/src/App.css b/src/App.css
index 87ef1b8..00ab543 100644
--- a/src/App.css
+++ b/src/App.css
@@ -25,6 +25,7 @@
 .statusNotification {
   align-items: center;
   border-radius: 8px;
+  box-sizing: content-box;
   direction: ltr;
   display: flex;
   height: 48px;
diff --git a/src/OnlineStatusNotification.tsx b/src/OnlineStatusNotification.tsx
index f62cabf..0f12eec 100644
--- a/src/OnlineStatusNotification.tsx
+++ b/src/OnlineStatusNotification.tsx
@@ -1,8 +1,8 @@
-import React, { forwardRef, useEffect } from 'react'
-import { CSSTransition, SwitchTransition } from 'react-transition-group'
 import './App.css'
 import { useFirstRender } from './hooks'
 import { closeIcon, offlineIcon, onlineIcon } from './icons'
+import React, { forwardRef, useEffect } from 'react'
+import { CSSTransition, SwitchTransition } from 'react-transition-group'
 
 type StatusText = {
   online?: string
@@ -190,6 +190,8 @@ export const OnlineStatusNotification = React.memo(
   OnlineStatusNotificationComponent
 )
 
+export default OnlineStatusNotification
+
 const getStatusText = (isOnline: boolean, statusText: StatusText): string =>
   isOnline
     ? statusText?.online ?? DefaultOnlineText
diff --git a/src/hooks.tsx b/src/hooks.tsx
index b09e253..fbdb94a 100644
--- a/src/hooks.tsx
+++ b/src/hooks.tsx
@@ -1,3 +1,4 @@
+import { DEFAULT_POLLING_URL, timeSince } from './utils'
 import {
   useCallback,
   useEffect,
@@ -6,7 +7,6 @@ import {
   useRef,
   useState
 } from 'react'
-import { DEFAULT_POLLING_URL, timeSince } from './utils'
 
 const isWindowDocumentAvailable = typeof window !== 'undefined'
 
@@ -22,7 +22,9 @@ function getConnectionInfo() {
 }
 
 const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect
+  typeof window !== 'undefined' || typeof navigator !== 'undefined'
+    ? useLayoutEffect
+    : useEffect
 
 type OnlineStatusProps = {
   pollingUrl?: string
diff --git a/src/nsn.ts b/src/nsn.ts
index 7594d79..5f00f54 100644
--- a/src/nsn.ts
+++ b/src/nsn.ts
@@ -1,2 +1,2 @@
-export { OnlineStatusNotification } from './OnlineStatusNotification'
+export { default as OnlineStatusNotification } from './OnlineStatusNotification'
 export { useOnlineStatus } from './hooks'