diff --git a/package.json b/package.json
index 5e532fc..b72996d 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@types/web-bluetooth": "^0.0.20",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 511563d..efd834a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ dependencies:
   '@radix-ui/react-dropdown-menu':
     specifier: ^2.0.6
     version: 2.0.6(@types/react-dom@18.2.19)(@types/react@18.2.62)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-slider':
+    specifier: ^1.1.2
+    version: 1.1.2(@types/react-dom@18.2.19)(@types/react@18.2.62)(react-dom@18.2.0)(react@18.2.0)
   '@radix-ui/react-slot':
     specifier: ^1.0.2
     version: 1.0.2(@types/react@18.2.62)(react@18.2.0)
@@ -1149,6 +1152,12 @@ packages:
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
     dev: true
 
+  /@radix-ui/number@1.0.1:
+    resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==}
+    dependencies:
+      '@babel/runtime': 7.24.0
+    dev: false
+
   /@radix-ui/primitive@1.0.1:
     resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
     dependencies:
@@ -1541,6 +1550,37 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-slider@1.1.2(@types/react-dom@18.2.19)(@types/react@18.2.62)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-NKs15MJylfzVsCagVSWKhGGLNR1W9qWs+HtgbmjjVUB3B9+lb3PYoXxVju3kOrpf0VKyVCtZp+iTwVoqpa1Chw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.0
+      '@radix-ui/number': 1.0.1
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.62)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.62)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.62)(react@18.2.0)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.62)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.62)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.62)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.62)(react@18.2.0)
+      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.62)(react@18.2.0)
+      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.62)(react@18.2.0)
+      '@types/react': 18.2.62
+      '@types/react-dom': 18.2.19
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-slot@1.0.2(@types/react@18.2.62)(react@18.2.0):
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
@@ -1646,6 +1686,20 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-use-previous@1.0.1(@types/react@18.2.62)(react@18.2.0):
+    resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.0
+      '@types/react': 18.2.62
+      react: 18.2.0
+    dev: false
+
   /@radix-ui/react-use-rect@1.0.1(@types/react@18.2.62)(react@18.2.0):
     resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==}
     peerDependencies:
diff --git a/src/components/MainContent/SelectedDevice.tsx b/src/components/MainContent/SelectedDevice.tsx
index ff80a7c..440eacf 100644
--- a/src/components/MainContent/SelectedDevice.tsx
+++ b/src/components/MainContent/SelectedDevice.tsx
@@ -4,6 +4,7 @@ import { Pax } from '@/pax';
 import { post } from '@/pax/containers/api';
 import {
   BatteryPercentageMessage,
+  BrightnessMessage,
   ColorThemeMessage,
 } from '@/pax/core/messages';
 import { ColorTheme } from '@/pax/shared/types';
@@ -16,6 +17,7 @@ import TemperatureProgress from '../TemperatureProgress';
 import { ThemePicker } from '../ThemePicker';
 import { hardcodedThemes } from '../ThemePicker/colors';
 import { Button } from '../ui/button';
+import { Slider } from '../ui/slider';
 import { Connect } from './SelectedDevice/Connect';
 
 interface SelectedDeviceProps {
@@ -53,6 +55,9 @@ export const SelectedDevice = ({ currentDevice }: SelectedDeviceProps) => {
         if (message instanceof BatteryPercentageMessage) {
           actions.setBatteryPercentage(message.percentage);
         }
+        if (message instanceof BrightnessMessage) {
+          actions.setBrightness(message.brightness);
+        }
       })
       .catch(e => {
         if (e instanceof BaseBluetoothException) {
@@ -96,6 +101,22 @@ export const SelectedDevice = ({ currentDevice }: SelectedDeviceProps) => {
         actualTemperature={state.actualTemperature}
         unit={'C'}
       />
+      <Slider
+        disabled={!bluetoothState.connected && !state.brightness}
+        max={1}
+        step={0.1}
+        value={state.brightness ? [state.brightness] : [0]}
+        onValueChange={value => {
+          actions.setBrightness(value[0]);
+        }}
+        onValueCommit={value => {
+          const toPost = post(
+            BrightnessMessage.createWithBrightness(value[0]),
+            currentDevice,
+          );
+          void bluetoothState.writeToMainService(toPost.packet);
+        }}
+      />
       <HeaterStatus heaterStatus={state.heatingSate} />
       <h1>Device: {!currentDevice ? '' : currentDevice.serial}</h1>
       <Button
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
new file mode 100644
index 0000000..8e7d63c
--- /dev/null
+++ b/src/components/ui/slider.tsx
@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as React from 'react';
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex w-full touch-none select-none items-center',
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track
+      className={`relative h-2 w-full grow overflow-hidden
+    rounded-full bg-neutral-100 dark:bg-neutral-800`}
+    >
+      <SliderPrimitive.Range className="absolute h-full bg-neutral-900 dark:bg-neutral-50" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb
+      className={`block h-5 w-5 rounded-full border-2 border-neutral-900
+     bg-white ring-offset-white transition-colors focus-visible:outline-none 
+     focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 
+     disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-50 dark:bg-neutral-950 
+     dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300`}
+    />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };
diff --git a/src/pax/containers/api/get.ts b/src/pax/containers/api/get.ts
index 53af780..ab923f1 100644
--- a/src/pax/containers/api/get.ts
+++ b/src/pax/containers/api/get.ts
@@ -3,6 +3,7 @@ import { ColorThemeMessage } from '@/pax/core/messages/ColorThemeMessage';
 import {
   ActualTemperatureMessage,
   BatteryPercentageMessage,
+  BrightnessMessage,
   HeaterSetPointMessage,
   HeatingStateMessage,
   MessageAbs,
@@ -36,6 +37,8 @@ export const decodeDecryptedPacket = (
       return ColorThemeMessage.createWithPacket(packet);
     case Messages.ATTRIBUTE_BATTERY:
       return new BatteryPercentageMessage(packet);
+    case Messages.ATTRIBUTE_BRIGHTNESS:
+      return BrightnessMessage.createWithPacket(packet);
     default:
       return new UnknownMessage(messageType, packet);
   }
diff --git a/src/pax/core/messages/BrightnessMessage.ts b/src/pax/core/messages/BrightnessMessage.ts
new file mode 100644
index 0000000..169e16d
--- /dev/null
+++ b/src/pax/core/messages/BrightnessMessage.ts
@@ -0,0 +1,112 @@
+import { PaxDecryptedPacket } from '@/pax/containers/lib';
+import { Messages } from '@/pax/shared/enums';
+
+import { MessageAbs } from './MessageAbs';
+import { ReadAndWriteMessageAbs } from './ReadAndWriteMessageAbs';
+
+export class BrightnessMessage
+  extends ReadAndWriteMessageAbs
+  implements MessageAbs
+{
+  readonly brightness: number;
+  readonly messageType: Messages;
+  readonly packet: PaxDecryptedPacket;
+
+  readonly PaxBrightnessMin = 0;
+  readonly PaxBrightnessMax = 128;
+
+  constructor(
+    builder:
+      | BrightnessMessageBuilderFromPacket<BrightnessMessage>
+      | BrightnessMessageBuilderFromValue<BrightnessMessage>,
+  ) {
+    super();
+    this.messageType = Messages.ATTRIBUTE_BRIGHTNESS;
+    if (builder instanceof BrightnessMessageBuilderFromPacket) {
+      this.packet = builder.getPacket();
+      const absoluteBrightness = this.packet.getUint8(1);
+      const brightnessPercentage =
+        this.brightnessToPercentage(absoluteBrightness);
+
+      this.brightness = brightnessPercentage;
+    } else if (builder instanceof BrightnessMessageBuilderFromValue) {
+      this.brightness = builder.getBrightness();
+      const buffer = new ArrayBuffer(16);
+      const view = new PaxDecryptedPacket(buffer);
+      view.setUint8(0, this.messageType);
+      view.setUint8(1, this.brightnessToAbsolute(this.brightness));
+      this.packet = view;
+    } else {
+      throw new Error('Invalid builder');
+    }
+  }
+
+  private brightnessToPercentage(brightness: number): number {
+    return (
+      (brightness - this.PaxBrightnessMin) /
+      (this.PaxBrightnessMax - this.PaxBrightnessMin)
+    );
+  }
+
+  private brightnessToAbsolute(brightness: number): number {
+    return brightness * (this.PaxBrightnessMax - this.PaxBrightnessMin);
+  }
+
+  static createWithPacket(packet: PaxDecryptedPacket): BrightnessMessage {
+    const builder = new BrightnessMessageBuilderFromPacket<BrightnessMessage>();
+    builder.setPacket(packet);
+    return new BrightnessMessage(builder);
+  }
+
+  static createWithBrightness(brightness: number): BrightnessMessage {
+    const builder = new BrightnessMessageBuilderFromValue<BrightnessMessage>();
+    builder.setBrightness(brightness);
+    return new BrightnessMessage(builder);
+  }
+}
+
+export class BrightnessMessageBuilderFromPacket<T extends BrightnessMessage> {
+  private packet?: PaxDecryptedPacket;
+
+  setPacket(packet: PaxDecryptedPacket): BrightnessMessageBuilderFromPacket<T> {
+    this.packet = packet;
+    return this;
+  }
+
+  getPacket(): PaxDecryptedPacket {
+    if (!this.packet) {
+      throw new Error('Packet is not set');
+    }
+    return this.packet;
+  }
+
+  build(ctor: new (builder: BrightnessMessageBuilderFromPacket<T>) => T): T {
+    if (!this.packet) {
+      throw new Error('Packet is not set');
+    }
+    return new ctor(this);
+  }
+}
+
+export class BrightnessMessageBuilderFromValue<T extends BrightnessMessage> {
+  private brightness?: number;
+
+  setBrightness(brightness: number): BrightnessMessageBuilderFromValue<T> {
+    this.brightness = brightness;
+    return this;
+  }
+
+  getBrightness(): number {
+    if (!this.brightness) {
+      throw new Error('Theme is not set');
+    }
+    return this.brightness;
+  }
+
+  build(ctor: new (builder: BrightnessMessageBuilderFromValue<T>) => T): T {
+    if (!this.brightness) {
+      throw new Error('Brightness is not set');
+    }
+    return new ctor(this);
+  }
+}
diff --git a/src/pax/core/messages/index.ts b/src/pax/core/messages/index.ts
index 5e4986e..c98377a 100644
--- a/src/pax/core/messages/index.ts
+++ b/src/pax/core/messages/index.ts
@@ -8,3 +8,4 @@ export * from './ReadAndWriteMessageAbs';
 export * from './HeatingStateMessage';
 export * from './ColorThemeMessage';
 export * from './BatteryPercentageMessage';
+export * from './BrightnessMessage';
diff --git a/src/state/paxState/actions.ts b/src/state/paxState/actions.ts
index 803cae9..f586f4b 100644
--- a/src/state/paxState/actions.ts
+++ b/src/state/paxState/actions.ts
@@ -6,6 +6,7 @@ export type PaxActions =
   | { type: 'SET_HEATING_STATE'; payload: Pax.lib.HeatingStates }
   | { type: 'SET_COLOR_THEME'; payload: Pax.lib.ColorTheme }
   | { type: 'SET_BATTERY_PERCENTAGE'; payload: number }
+  | { type: 'SET_BRIGHTNESS'; payload: number }
   | { type: 'RESET_PAX_STATE' };
 
 export interface BuiltPaxActions {
@@ -14,6 +15,7 @@ export interface BuiltPaxActions {
   setHeatingState: (heatingSate: Pax.lib.HeatingStates) => void;
   setColorTheme: (theme: Pax.lib.ColorTheme) => void;
   setBatteryPercentage: (percentage: number) => void;
+  setBrightness: (brightness: number) => void;
   resetPaxState: () => void;
 }
 
@@ -56,6 +58,13 @@ const setBatteryPercentage = (
   dispatch({ type: 'SET_BATTERY_PERCENTAGE', payload: percentage });
 };
 
+const setBrightness = (
+  dispatch: React.Dispatch<PaxActions>,
+  brightness: number,
+) => {
+  dispatch({ type: 'SET_BRIGHTNESS', payload: brightness });
+};
+
 export const buildActions = (
   dispatch: React.Dispatch<PaxActions>,
 ): BuiltPaxActions => {
@@ -71,5 +80,6 @@ export const buildActions = (
     setBatteryPercentage: (percentage: number) =>
       setBatteryPercentage(dispatch, percentage),
     resetPaxState: () => resetPaxState(dispatch),
+    setBrightness: (brightness: number) => setBrightness(dispatch, brightness),
   };
 };
diff --git a/src/state/paxState/reducer.ts b/src/state/paxState/reducer.ts
index d1771c5..6c240c3 100644
--- a/src/state/paxState/reducer.ts
+++ b/src/state/paxState/reducer.ts
@@ -6,6 +6,8 @@ export const initialPaxState: PaxState = {
   heaterSetPointTemperature: 0,
   heatingSate: undefined,
   colorTheme: undefined,
+  batteryPercentage: undefined,
+  brightness: undefined,
 };
 
 const reducer = (state: PaxState, action: PaxActions): PaxState => {
@@ -20,6 +22,8 @@ const reducer = (state: PaxState, action: PaxActions): PaxState => {
       return { ...state, colorTheme: action.payload };
     case 'SET_BATTERY_PERCENTAGE':
       return { ...state, batteryPercentage: action.payload };
+    case 'SET_BRIGHTNESS':
+      return { ...state, brightness: action.payload };
     case 'RESET_PAX_STATE':
       return initialPaxState;
     default:
diff --git a/src/state/paxState/types.ts b/src/state/paxState/types.ts
index 29bfe12..8b3d3fd 100644
--- a/src/state/paxState/types.ts
+++ b/src/state/paxState/types.ts
@@ -6,4 +6,5 @@ export interface PaxState {
   heatingSate?: Pax.lib.HeatingStates;
   colorTheme?: Pax.lib.ColorTheme;
   batteryPercentage?: number;
+  brightness?: number;
 }