diff --git a/cosmoz-omnitable.js b/cosmoz-omnitable.js
index 5ffbd4e2..73d3f480 100644
--- a/cosmoz-omnitable.js
+++ b/cosmoz-omnitable.js
@@ -36,7 +36,6 @@ const Omnitable = (host) => {
 		<style>
 			${guard([], () => shimCSS(styles))}
 		</style>
-		<div id="layoutStyle"></div>
 
 		<div class="mainContainer">
 			${renderHeader(header)}
diff --git a/lib/compute-layout.js b/lib/compute-layout.js
index 0123e641..d6e546f2 100644
--- a/lib/compute-layout.js
+++ b/lib/compute-layout.js
@@ -1,20 +1,19 @@
-import { html } from '@pionjs/pion';
 import { layout } from './layout';
 
-const
-	_toCss = (layout, config) =>
-		config
-			.map((item, index) => {
-				const width = layout[index];
-				return width == null || width === 0
-					? `cosmoz-omnitable-resize-nub[name="${ item.name }"], .cell[name="${ item.name }"]{display:none}`
-					: `.cell[name="${ item.name }"]{width: ${ width }px;padding: 0 min(3px, ${ width / 2 }px)}`;
-			})
-			.join('\n');
+const _toCss = (layout, config) =>
+	config
+		.map((item, index) => {
+			const width = layout[index];
+			return width == null || width === 0
+				? `cosmoz-omnitable-resize-nub[name="${item.name}"], .cell[name="${item.name}"]{display:none}`
+				: `.cell[name="${item.name}"]{width: ${Math.floor(
+						width,
+					)}px;padding: 0 min(3px, ${width / 2}px)}`;
+		})
+		.join('\n');
 
-export const
-	computeLayout = (_columnConfigs, canvasWidth, numColumns) => {
-		const columnConfigs = _columnConfigs.filter(c => !c.hidden),
+export const computeLayout = (_columnConfigs, canvasWidth, numColumns) => {
+		const columnConfigs = _columnConfigs.filter((c) => !c.hidden),
 			totalWidths = columnConfigs.reduce((sum, { width }) => sum + width, 0);
 
 		if (columnConfigs.length > 1 && totalWidths > canvasWidth) {
@@ -26,8 +25,11 @@ export const
 		// as the column configs might now be in a different order than displayed
 		// due to priority settings
 		const lastColumnIndex = columnConfigs.reduce(
-			([max, maxIndex], column, index) => [Math.max(max, column.index), column.index > max ? index : maxIndex],
-			[-1, -1]
+			([max, maxIndex], column, index) => [
+				Math.max(max, column.index),
+				column.index > max ? index : maxIndex,
+			],
+			[-1, -1],
 		)[1];
 
 		// force the last visible column to flex
@@ -43,6 +45,4 @@ export const
 		}, new Array(numColumns).fill(undefined));
 	},
 	toCss = (layout, config) =>
-		layout.length === 0
-			? html`<style>.cell {display: none;}</style>`
-			: html`<style>${ _toCss(layout, config) }</style>`;
+		layout.length === 0 ? '.cell {display: none;}' : _toCss(layout, config);
diff --git a/lib/use-fast-layout.js b/lib/use-fast-layout.js
index 280d5bfa..dc1858c7 100644
--- a/lib/use-fast-layout.js
+++ b/lib/use-fast-layout.js
@@ -1,10 +1,10 @@
-import { useLayoutEffect, useMemo } from '@pionjs/pion';
+import { useMemo } from '@pionjs/pion';
 import { toCss } from './compute-layout';
 import { useResizableColumns } from './use-resizable-columns';
 import { useCanvasWidth } from './use-canvas-width';
 import { useTweenArray } from './use-tween-array';
 import { useLayout } from './use-layout';
-import { render } from 'lit-html';
+import { useStyleSheet } from '@neovici/cosmoz-utils/hooks/use-stylesheet';
 
 export const useFastLayout = ({
 	host,
@@ -24,7 +24,7 @@ export const useFastLayout = ({
 		tweenedlayout = useTweenArray(layout, resizeSpeedFactor),
 		layoutCss = useMemo(
 			() => toCss(tweenedlayout, settings.columns),
-			[tweenedlayout]
+			[tweenedlayout],
 		),
 		collapsedColumns = useMemo(
 			() =>
@@ -35,9 +35,9 @@ export const useFastLayout = ({
 						column.disabled
 							? acc
 							: [...acc, columns.find((c) => c.name === column.name)],
-					[]
+					[],
 				),
-			[columns, settings, layout]
+			[columns, settings, layout],
 		);
 
 	useResizableColumns({
@@ -47,10 +47,7 @@ export const useFastLayout = ({
 		setSettings: (update) => setSettings(update(settings)),
 	});
 
-	useLayoutEffect(
-		() => render(layoutCss, host.shadowRoot.querySelector('#layoutStyle')),
-		[layoutCss]
-	);
+	useStyleSheet(layoutCss);
 
 	return { collapsedColumns };
 };
diff --git a/package-lock.json b/package-lock.json
index 0778b45b..7712e732 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
 				"@neovici/cosmoz-i18next": "^3.1.1",
 				"@neovici/cosmoz-input": "^4.0.0",
 				"@neovici/cosmoz-router": "^11.0.0",
-				"@neovici/cosmoz-utils": "^6.0.0",
+				"@neovici/cosmoz-utils": "^6.5.0",
 				"@neovici/nullxlsx": "^3.0.0",
 				"@pionjs/pion": "^2.0.0",
 				"@polymer/iron-icon": "^3.0.0",
@@ -1217,9 +1217,9 @@
 			}
 		},
 		"node_modules/@neovici/cosmoz-utils": {
-			"version": "6.1.0",
-			"resolved": "https://registry.npmjs.org/@neovici/cosmoz-utils/-/cosmoz-utils-6.1.0.tgz",
-			"integrity": "sha512-GsAtqHrA/K/pBO4AA+99YgIXaxVPNdgchaNaN6BHnI6H/0ux8en28V3j/O0jew3tlG+GzGpzQDaskClEQxiqvg==",
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/@neovici/cosmoz-utils/-/cosmoz-utils-6.5.0.tgz",
+			"integrity": "sha512-JADH1RKYhcKpH1N2MGraX53E2mmXcNqHOaqaXwa2koLvOzKMAPdH8AjmlErnkxvWfGRPEE41L6ondj3DhWIkBQ==",
 			"dependencies": {
 				"@pionjs/pion": "^2.0.0"
 			}
diff --git a/package.json b/package.json
index c2c0c582..9e117e2a 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
 		"@neovici/cosmoz-i18next": "^3.1.1",
 		"@neovici/cosmoz-input": "^4.0.0",
 		"@neovici/cosmoz-router": "^11.0.0",
-		"@neovici/cosmoz-utils": "^6.0.0",
+		"@neovici/cosmoz-utils": "^6.5.0",
 		"@neovici/nullxlsx": "^3.0.0",
 		"@pionjs/pion": "^2.0.0",
 		"@polymer/iron-icon": "^3.0.0",