diff --git a/.pnp.cjs b/.pnp.cjs
index 8d50ca5ea..38fe139ec 100755
--- a/.pnp.cjs
+++ b/.pnp.cjs
@@ -284,6 +284,14 @@ const RAW_RUNTIME_STATE =
     {\
       "name": "@atls-ui/design",\
       "reference": "workspace:ui/design"\
+    },\
+    {\
+      "name": "@atls-utils/use-hover",\
+      "reference": "workspace:utils/use-hover"\
+    },\
+    {\
+      "name": "@atls-utils/use-popover",\
+      "reference": "workspace:utils/use-popover"\
     }\
   ],\
   "enableTopLevelFallback": true,\
@@ -356,6 +364,8 @@ const RAW_RUNTIME_STATE =
     ["@atls-ui-proto/tooltip", ["workspace:ui-proto/tooltip"]],\
     ["@atls-ui-proto/upload", ["workspace:ui-proto/upload"]],\
     ["@atls-ui/design", ["workspace:ui/design"]],\
+    ["@atls-utils/use-hover", ["workspace:utils/use-hover"]],\
+    ["@atls-utils/use-popover", ["workspace:utils/use-popover"]],\
     ["@atls/storybook-google-fonts", ["virtual:084ea6e6eb61d61d529e38a9d5e6a4e67d34c25f7d28e26d3c2fb9c78ae89b3cf1a01301495971f34e3cae3a99bbdecdf3a6d670b1a9f6ad7b2fe5c66bb38e22#workspace:storybook/google-fonts", "virtual:8d719a0b3ab41aef985519ac74fa0a513aa7bee36213eb39b7cd82f90a48b0f06f4b7809e23f2bff1b0cae657f847fd7a9119b9df2f65d72dbef009384006482#workspace:storybook/google-fonts", "workspace:storybook/google-fonts"]],\
     ["hyperion", ["workspace:."]]\
   ],\
@@ -3745,6 +3755,28 @@ const RAW_RUNTIME_STATE =
         "linkType": "SOFT"\
       }]\
     ]],\
+    ["@atls-utils/use-hover", [\
+      ["workspace:utils/use-hover", {\
+        "packageLocation": "./utils/use-hover/",\
+        "packageDependencies": [\
+          ["@atls-utils/use-hover", "workspace:utils/use-hover"],\
+          ["react-laag", "virtual:464f07f3aeb7539a804fd5547ef9f22c6345c5e48a7e13531016fd05a5483cf6876bf2dd95f71e77d3b3e43b21f1779c414e2afddc027b4dfb663b681a0c9a7a#npm:2.0.5"]\
+        ],\
+        "linkType": "SOFT"\
+      }]\
+    ]],\
+    ["@atls-utils/use-popover", [\
+      ["workspace:utils/use-popover", {\
+        "packageLocation": "./utils/use-popover/",\
+        "packageDependencies": [\
+          ["@atls-utils/use-popover", "workspace:utils/use-popover"],\
+          ["@types/react", "npm:17.0.39"],\
+          ["react", "npm:18.2.0"],\
+          ["react-laag", "virtual:e8b379d238bee0c446fdeaddb9725553fcee91eeb8db9f1f4b47e4e36a5c6c26c07ae1861b7d0a5dd574863bc008f048d25fc793392ceeaade0c9801b921d418#npm:2.0.5"]\
+        ],\
+        "linkType": "SOFT"\
+      }]\
+    ]],\
     ["@atls/code-service", [\
       ["npm:0.0.21", {\
         "packageLocation": "./.yarn/cache/@atls-code-service-npm-0.0.21-5fa808fc76-c7d0397b42.zip/node_modules/@atls/code-service/",\
@@ -28850,6 +28882,24 @@ const RAW_RUNTIME_STATE =
         ],\
         "linkType": "SOFT"\
       }],\
+      ["virtual:464f07f3aeb7539a804fd5547ef9f22c6345c5e48a7e13531016fd05a5483cf6876bf2dd95f71e77d3b3e43b21f1779c414e2afddc027b4dfb663b681a0c9a7a#npm:2.0.5", {\
+        "packageLocation": "./.yarn/__virtual__/react-laag-virtual-88a71ef29e/0/cache/react-laag-npm-2.0.5-ee934b6029-32de5cb560.zip/node_modules/react-laag/",\
+        "packageDependencies": [\
+          ["react-laag", "virtual:464f07f3aeb7539a804fd5547ef9f22c6345c5e48a7e13531016fd05a5483cf6876bf2dd95f71e77d3b3e43b21f1779c414e2afddc027b4dfb663b681a0c9a7a#npm:2.0.5"],\
+          ["@types/react", null],\
+          ["@types/react-dom", null],\
+          ["react", null],\
+          ["react-dom", null],\
+          ["tiny-warning", "npm:1.0.3"]\
+        ],\
+        "packagePeers": [\
+          "@types/react-dom",\
+          "@types/react",\
+          "react-dom",\
+          "react"\
+        ],\
+        "linkType": "HARD"\
+      }],\
       ["virtual:715735a4a2e8d54905169134c454af6bc069cd38753b21c330a59c9416baae469297a98652616fe195b447efe73a93ec5d519bc00280e9faea2d12c5bf015e0a#npm:2.0.4", {\
         "packageLocation": "./.yarn/__virtual__/react-laag-virtual-dfa5a47c36/0/cache/react-laag-npm-2.0.4-6112c8d85c-d018f37526.zip/node_modules/react-laag/",\
         "packageDependencies": [\
diff --git a/package.json b/package.json
index 2ac104054..ab4b968e4 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
     "ui-admin/*",
     "ui-parts/*",
     "ui-proto/*",
-    "ui/*"
+    "ui/*",
+    "utils/*"
   ],
   "scripts": {
     "postinstall": "yarn workspace @atls-ui-admin/icons build-icons"
diff --git a/utils/use-hover/package.json b/utils/use-hover/package.json
new file mode 100644
index 000000000..9a778b453
--- /dev/null
+++ b/utils/use-hover/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@atls-utils/use-hover",
+  "version": "0.0.0",
+  "license": "BSD-3-Clause",
+  "main": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn library build",
+    "prepack": "yarn run build",
+    "postpack": "rm -rf dist"
+  },
+  "dependencies": {
+    "react-laag": "2.0.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.js",
+    "typings": "dist/index.d.ts"
+  }
+}
diff --git a/utils/use-hover/src/index.ts b/utils/use-hover/src/index.ts
new file mode 100644
index 000000000..4609d95a0
--- /dev/null
+++ b/utils/use-hover/src/index.ts
@@ -0,0 +1 @@
+export { useHover } from 'react-laag'
diff --git a/utils/use-popover/package.json b/utils/use-popover/package.json
new file mode 100644
index 000000000..1149db7fc
--- /dev/null
+++ b/utils/use-popover/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@atls-utils/use-popover",
+  "version": "0.0.0",
+  "license": "BSD-3-Clause",
+  "main": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn library build",
+    "prepack": "yarn run build",
+    "postpack": "rm -rf dist"
+  },
+  "dependencies": {
+    "react-laag": "2.0.5"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.20",
+    "react": "18.2.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.js",
+    "typings": "dist/index.d.ts"
+  }
+}
diff --git a/utils/use-popover/src/index.ts b/utils/use-popover/src/index.ts
new file mode 100644
index 000000000..a26261cd4
--- /dev/null
+++ b/utils/use-popover/src/index.ts
@@ -0,0 +1 @@
+export { usePopover } from './use-popover.hook'
diff --git a/utils/use-popover/src/use-popover.hook.ts b/utils/use-popover/src/use-popover.hook.ts
new file mode 100644
index 000000000..b88cb4797
--- /dev/null
+++ b/utils/use-popover/src/use-popover.hook.ts
@@ -0,0 +1,48 @@
+import { PlacementType } from 'react-laag/dist/PlacementType'
+import { useState }      from 'react'
+import { useLayer }      from 'react-laag'
+
+export const usePopover = (placement: PlacementType, offset = 9, trigger = 'click') => {
+  const [isOpen, setIsOpen] = useState<boolean>(false)
+
+  const close = () => setIsOpen(false)
+
+  const { layerProps, triggerProps, renderLayer } = useLayer({
+    isOpen,
+    placement,
+    auto: true,
+    onOutsideClick: close,
+    onDisappear: close,
+    triggerOffset: offset,
+  })
+
+  const setTrigger = (value) => {
+    if (value === 'click') {
+      return { ...triggerProps, onClick: () => setIsOpen(!isOpen) }
+    }
+    if (value === 'hover') {
+      return {
+        ...triggerProps,
+        onMouseEnter: () => setIsOpen(true),
+        onMouseLeave: () => false,
+      }
+    }
+
+    return {}
+  }
+
+  const render = (children) => renderLayer(isOpen && children)
+
+  return {
+    triggerProps: setTrigger(trigger),
+    layerProps: {
+      ...layerProps,
+      style: {
+        ...layerProps.style,
+      },
+    },
+    render,
+    isOpen,
+    setIsOpen,
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 78e42d17a..40fea5144 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1625,6 +1625,24 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@atls-utils/use-hover@workspace:utils/use-hover":
+  version: 0.0.0-use.local
+  resolution: "@atls-utils/use-hover@workspace:utils/use-hover"
+  dependencies:
+    react-laag: "npm:2.0.5"
+  languageName: unknown
+  linkType: soft
+
+"@atls-utils/use-popover@workspace:utils/use-popover":
+  version: 0.0.0-use.local
+  resolution: "@atls-utils/use-popover@workspace:utils/use-popover"
+  dependencies:
+    "@types/react": "npm:18.2.20"
+    react: "npm:18.2.0"
+    react-laag: "npm:2.0.5"
+  languageName: unknown
+  linkType: soft
+
 "@atls/code-service@npm:^0.0.21":
   version: 0.0.21
   resolution: "@atls/code-service@npm:0.0.21"