diff --git a/packages/geoview-core/src/core/components/notifications/notifications-style.ts b/packages/geoview-core/src/core/components/notifications/notifications-style.ts
index 1ee784348f0..b833f77fef7 100644
--- a/packages/geoview-core/src/core/components/notifications/notifications-style.ts
+++ b/packages/geoview-core/src/core/components/notifications/notifications-style.ts
@@ -31,9 +31,12 @@ export const getSxClasses = (theme: Theme) => ({
     flexDirection: 'row',
     alignItems: 'center',
     gap: '8px',
-    borderBottom: '1px solid #474747',
     padding: '10px 15px',
 
+    '&:not(:last-child)': {
+      borderBottom: `1px solid ${theme.palette.geoViewColor.bgColor.dark[300]}`
+    },
+
     '& .MuiIconButton-root': {
       color: theme.palette.geoViewColor.textColor.lighten(0.2, 0.4),
       '&:hover': {
diff --git a/packages/geoview-core/src/core/components/notifications/notifications.tsx b/packages/geoview-core/src/core/components/notifications/notifications.tsx
index b785adc9b33..3c0a7472101 100644
--- a/packages/geoview-core/src/core/components/notifications/notifications.tsx
+++ b/packages/geoview-core/src/core/components/notifications/notifications.tsx
@@ -49,6 +49,7 @@ export default function Notifications(): JSX.Element {
 
   // internal state
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const [open, setOpen] = useState(false);
 
   // get values from the store
   const notifications = useAppNotifications();
@@ -57,9 +58,9 @@ export default function Notifications(): JSX.Element {
   const notificationsCount = _.sumBy(notifications, (n) => n.count);
 
   // handle open/close
-  const open = Boolean(anchorEl);
   const handleOpenPopover = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
+    setOpen(!open);
   };
 
   /**
@@ -125,7 +126,7 @@ export default function Notifications(): JSX.Element {
             {notifications.length > 0 ? (
               notifications.map((notification, index) => renderNotification(notification, index))
             ) : (
-              <Typography component="div">{t('appbar.no_notifications_available')}</Typography>
+              <Typography component="div" sx={{padding:"10px 15px"}}>{t('appbar.no_notifications_available')}</Typography>
             )}
           </Box>
         </Paper>
diff --git a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts
index ff6e29a5212..d0e548d5860 100644
--- a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts
+++ b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts
@@ -210,7 +210,7 @@ export const generateThemeOptions = (geoViewColors: IGeoViewColors = defaultGeoV
         styleOverrides: {
           root: {
             '&.style1': {
-              backgroundColor: `${geoViewColors.bgColor.dark[100]}`,
+              backgroundColor: 'transparent',
               border: `3px solid transparent`,
               color: `${geoViewColors.primary.main}`,
               '&:hover, &:active, &.active': {