diff --git a/.github/workflows/github-actions-publish.yml b/.github/workflows/github-actions-publish.yml
index 7f4d315..a72383c 100644
--- a/.github/workflows/github-actions-publish.yml
+++ b/.github/workflows/github-actions-publish.yml
@@ -8,13 +8,12 @@ jobs:
     build-and-publish:
         runs-on: ubuntu-latest
         steps:
-            - name: Checkout 🛎️
+            - name: checkout
               uses: actions/checkout@v2.3.1
-            - name: Install and Build 🔧
+            - name: install and build
               run: |
                   npm i -g pnpm
                   pnpm i
                   pnpm run build
-            - run: pnpm publish --no-git-checks --access public
-              env:
-                  NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+            - name: publish
+              run: pnpm publish --no-git-checks --access public
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..bd3327a
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
\ No newline at end of file
diff --git a/package.json b/package.json
index f7103fc..69c37a7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mantine-data-grid",
-    "version": "0.0.8",
+    "version": "0.0.9",
     "license": "MIT",
     "type": "module",
     "repository": {
diff --git a/src/filters/booleanFilter.tsx b/src/filters/booleanFilter.tsx
index 4e148f2..71ff683 100644
--- a/src/filters/booleanFilter.tsx
+++ b/src/filters/booleanFilter.tsx
@@ -1,4 +1,4 @@
-import { Button, Group, Radio } from '@mantine/core';
+import { SegmentedControl } from '@mantine/core';
 import { DataGridFilterFn, DataGridFilterProps } from '../types';
 
 export enum BooleanFilter {
@@ -31,20 +31,24 @@ booleanFilterFn.element = function ({
     filter,
     onFilterChange,
 }: DataGridFilterProps) {
-    const handleValueChange = (value: boolean) => () =>
-        onFilterChange({ ...filter, value });
+    const handleValueChange = (value: string) =>
+        onFilterChange({ ...filter, value: value === 'true' ? true : false });
 
     return (
-        <Button.Group>
-            {[true, false].map((value) => (
-                <Button
-                    key={String(value)}
-                    color={filter.value === value ? 'blue' : 'gray'}
-                    style={{ flexGrow: 1 }}
-                    children={String(value)}
-                    onClick={handleValueChange(value)}
-                />
-            ))}
-        </Button.Group>
+        <SegmentedControl
+            value={filter.value ? 'true' : 'false'}
+            onChange={handleValueChange}
+            data={[
+                { label: 'true', value: 'true' },
+                { label: 'false', value: 'false' },
+            ]}
+            fullWidth
+            styles={{
+                active: {
+                    // fix visual bug when opening filter dropdown
+                    height: 'calc(100% - 8px) !important',
+                },
+            }}
+        />
     );
 };