diff --git a/apps/client/src/components/Elements/ColorsGrid/ColorsGrid.tsx b/apps/client/src/components/Elements/ColorsGrid/ColorsGrid.tsx
index 4222f24..7662bba 100644
--- a/apps/client/src/components/Elements/ColorsGrid/ColorsGrid.tsx
+++ b/apps/client/src/components/Elements/ColorsGrid/ColorsGrid.tsx
@@ -1,7 +1,7 @@
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as PanelStyled from '@/components/Panels/StylePanel/StylePanel.styled';
 import * as Styled from './ColorsGrid.styled';
-import { getStyleTitle } from '@/utils/string';
+import { createTitle } from '@/utils/string';
 import type { NodeColor } from 'shared';
 import ColorCircle from '../ColorCircle/ColorCircle';
 
@@ -45,7 +45,7 @@ const ColorsGrid = ({ withLabel = false, value, onSelect }: Props) => {
               checked={color.value === value}
               value={color.value}
               aria-label={`${color.name} color`}
-              title={getStyleTitle('Color', color.name)}
+              title={createTitle('Color', color.name)}
               color={
                 color.value === value ? 'secondary-dark' : 'secondary-light'
               }
diff --git a/apps/client/src/components/Panels/ControlPanel/ControlPanel.tsx b/apps/client/src/components/Panels/ControlPanel/ControlPanel.tsx
index 66953f9..0bcfbca 100644
--- a/apps/client/src/components/Panels/ControlPanel/ControlPanel.tsx
+++ b/apps/client/src/components/Panels/ControlPanel/ControlPanel.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { CONTROL } from '@/constants/panels/control';
-import { getKeyTitle } from '@/utils/string';
+import { createKeyTitle } from '@/utils/string';
 import * as PanelStyled from '../Panels.styled';
 import Icon from '@/components/Elements/Icon/Icon';
 
@@ -35,8 +35,8 @@ const ControlPanel = ({ enabledControls, onControl }: Props) => {
         return (
           <PanelStyled.Button
             key={control.name}
-            title={getKeyTitle(control.name, [
-              ...control.modifierKeys.map((key) => key.replace(/key/i, '')),
+            title={createKeyTitle(control.name, [
+              ...control.modifierKeys,
               control.key,
             ])}
             disabled={getDisabledByControlValue(control.value)}
diff --git a/apps/client/src/components/Panels/StylePanel/AnimatedSection.tsx b/apps/client/src/components/Panels/StylePanel/AnimatedSection.tsx
index b674756..86d22f6 100644
--- a/apps/client/src/components/Panels/StylePanel/AnimatedSection.tsx
+++ b/apps/client/src/components/Panels/StylePanel/AnimatedSection.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react';
 import type { NodeStyle } from 'shared';
 import { ANIMATED } from '@/constants/panels/style';
 import * as Styled from './StylePanel.styled';
-import { getStyleTitle } from '@/utils/string';
+import { createTitle } from '@/utils/string';
 
 type Props = {
   value: NodeStyle['animated'];
@@ -18,7 +18,7 @@ const AnimatedSection = ({ value, isDisabled, onAnimatedChange }: Props) => {
       <Styled.Label>{ANIMATED.name}</Styled.Label>
       <Styled.Toggle
         aria-label="Toggle Animated"
-        title={getStyleTitle(ANIMATED.name, valueTitle)}
+        title={createTitle(ANIMATED.name, valueTitle)}
         pressed={value}
         color={value ? 'primary' : 'secondary-light'}
         disabled={isDisabled}
diff --git a/apps/client/src/components/Panels/StylePanel/FillSection.tsx b/apps/client/src/components/Panels/StylePanel/FillSection.tsx
index 3c0b026..80f0767 100644
--- a/apps/client/src/components/Panels/StylePanel/FillSection.tsx
+++ b/apps/client/src/components/Panels/StylePanel/FillSection.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react';
 import type { NodeFill } from 'shared';
 import { FILL } from '@/constants/panels/style';
 import * as Styled from './StylePanel.styled';
-import { getStyleTitle } from '@/utils/string';
+import { createTitle } from '@/utils/string';
 import Icon from '@/components/Elements/Icon/Icon';
 
 type FillValue = Exclude<NodeFill, undefined>;
@@ -28,7 +28,7 @@ const FillSection = ({ value, onFillChange }: Props) => {
             <Styled.Item
               key={fill.value}
               value={fill.value ?? 'none'}
-              title={getStyleTitle('Fill', fill.name)}
+              title={createTitle('Fill', fill.name)}
               checked={fill.value === value}
               color={
                 fill.value === value ? 'secondary-dark' : 'secondary-light'
diff --git a/apps/client/src/components/Panels/StylePanel/LineSection.tsx b/apps/client/src/components/Panels/StylePanel/LineSection.tsx
index b6aa801..d43e582 100644
--- a/apps/client/src/components/Panels/StylePanel/LineSection.tsx
+++ b/apps/client/src/components/Panels/StylePanel/LineSection.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react';
 import type { NodeLine } from 'shared';
 import { LINE } from '@/constants/panels/style';
 import * as Styled from './StylePanel.styled';
-import { getStyleTitle } from '@/utils/string';
+import { createTitle } from '@/utils/string';
 import Icon from '@/components/Elements/Icon/Icon';
 
 type Props = {
@@ -26,7 +26,7 @@ const LineSection = ({ value, onLineChange }: Props) => {
             <Styled.Item
               key={line.value}
               value={line.value}
-              title={getStyleTitle('Line', line.name)}
+              title={createTitle('Line', line.name)}
               checked={line.value === value}
               color={
                 line.value === value ? 'secondary-dark' : 'secondary-light'
diff --git a/apps/client/src/components/Panels/StylePanel/SizeSection.tsx b/apps/client/src/components/Panels/StylePanel/SizeSection.tsx
index 5d80b97..8568aff 100644
--- a/apps/client/src/components/Panels/StylePanel/SizeSection.tsx
+++ b/apps/client/src/components/Panels/StylePanel/SizeSection.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import type { NodeSize } from 'shared';
 import { SIZE } from '@/constants/panels/style';
-import { getStyleTitle } from '@/utils/string';
+import { createTitle } from '@/utils/string';
 import Icon from '@/components/Elements/Icon/Icon';
 import { getSizeValue } from '@/utils/shape';
 import * as Styled from './StylePanel.styled';
@@ -26,7 +26,7 @@ const SizeSection = ({ value, onSizeChange }: Props) => {
           return (
             <Styled.Item
               key={size.name}
-              title={getStyleTitle('Size', size.name)}
+              title={createTitle('Size', size.name)}
               value={size.value}
               checked={size.value === value}
               color={
diff --git a/apps/client/src/components/Panels/ToolsPanel/ToolsPanel.tsx b/apps/client/src/components/Panels/ToolsPanel/ToolsPanel.tsx
index dbe23d1..5a2ac55 100644
--- a/apps/client/src/components/Panels/ToolsPanel/ToolsPanel.tsx
+++ b/apps/client/src/components/Panels/ToolsPanel/ToolsPanel.tsx
@@ -1,7 +1,7 @@
 import { Fragment, memo } from 'react';
 import Divider from '@/components/Elements/Divider/Divider';
 import { TOOLS, type ToolType } from '@/constants/panels/tools';
-import { getKeyTitle } from '@/utils/string';
+import { createKeyTitle } from '@/utils/string';
 import * as Styled from '../Panels.styled';
 import Icon from '@/components/Elements/Icon/Icon';
 
@@ -19,7 +19,7 @@ const ToolsPanel = ({ activeTool, onToolSelect }: Props) => {
             <Styled.Button
               size="sm"
               color={activeTool === tool.value ? 'primary' : 'secondary'}
-              title={getKeyTitle(tool.name, [tool.key])}
+              title={createKeyTitle(tool.name, [tool.key])}
               data-testid={`tool-button-${tool.value}`}
               onClick={() => onToolSelect(tool.value)}
             >
diff --git a/apps/client/src/components/Panels/ZoomPanel/ZoomPanel.test.tsx b/apps/client/src/components/Panels/ZoomPanel/ZoomPanel.test.tsx
index 3c94afd..692e6ea 100644
--- a/apps/client/src/components/Panels/ZoomPanel/ZoomPanel.test.tsx
+++ b/apps/client/src/components/Panels/ZoomPanel/ZoomPanel.test.tsx
@@ -1,19 +1,34 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import { ZOOM } from '@/constants/panels/zoom';
 import ZoomPanel from './ZoomPanel';
 
 describe('ZoomPanel', () => {
-  it('should call handleZoomChange when clicked', () => {
+  it('should call handleZoomChange when zoom in clicked', () => {
     const handleZoomChange = vi.fn();
 
     render(<ZoomPanel value={100} onZoomChange={handleZoomChange} />);
 
-    const zoomActions = Object.values(ZOOM);
+    fireEvent.click(screen.getByTestId('zoom-in-button'));
 
-    zoomActions.forEach((action) => {
-      fireEvent.click(screen.getByTitle(new RegExp(action.name)));
-    });
+    expect(handleZoomChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call handleZoomChange when zoom out clicked', () => {
+    const handleZoomChange = vi.fn();
+
+    render(<ZoomPanel value={100} onZoomChange={handleZoomChange} />);
+
+    fireEvent.click(screen.getByTestId('zoom-out-button'));
+
+    expect(handleZoomChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call handleZoomChange when zoom reset clicked', () => {
+    const handleZoomChange = vi.fn();
+
+    render(<ZoomPanel value={120} onZoomChange={handleZoomChange} />);
+
+    fireEvent.click(screen.getByTestId('zoom-reset-button'));
 
-    expect(handleZoomChange).toHaveBeenCalledTimes(zoomActions.length);
+    expect(handleZoomChange).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/apps/client/src/components/Panels/ZoomPanel/ZoomPanel.tsx b/apps/client/src/components/Panels/ZoomPanel/ZoomPanel.tsx
index e722408..573acc6 100644
--- a/apps/client/src/components/Panels/ZoomPanel/ZoomPanel.tsx
+++ b/apps/client/src/components/Panels/ZoomPanel/ZoomPanel.tsx
@@ -8,6 +8,7 @@ import { ZOOM, type ZoomAction } from '@/constants/panels/zoom';
 import * as PanelStyled from '../Panels.styled';
 import * as Styled from './ZoomPanel.styled';
 import Icon from '@/components/Elements/Icon/Icon';
+import { createKeyTitle } from '@/utils/string';
 
 type Props = {
   value: number;
@@ -40,6 +41,7 @@ const ZoomPanel = ({ value, onZoomChange }: Props) => {
       <PanelStyled.Button
         disabled={value === DEFAULT_ZOOM_VALUE}
         title={ZOOM.reset.name}
+        data-testId="zoom-reset-button"
         css={{ fontSize: '$1', width: 'calc($5 * 1.5)' }}
         onClick={() => handleZoomAction(ZOOM.reset.value)}
       >
@@ -47,14 +49,22 @@ const ZoomPanel = ({ value, onZoomChange }: Props) => {
       </PanelStyled.Button>
       <PanelStyled.Button
         disabled={value === ZOOM_RANGE.MAX}
-        title={ZOOM.in.name}
+        title={createKeyTitle(ZOOM.in.name, [
+          ZOOM.in.key,
+          ...ZOOM.in.modifierKeys,
+        ])}
+        data-testId="zoom-in-button"
         onClick={() => handleZoomAction(ZOOM.in.value)}
       >
         <Icon name={ZOOM.in.icon} size="sm" />
       </PanelStyled.Button>
       <PanelStyled.Button
         disabled={value === ZOOM_RANGE.MIN}
-        title={ZOOM.out.name}
+        title={createKeyTitle(ZOOM.out.name, [
+          ZOOM.out.key,
+          ...ZOOM.out.modifierKeys,
+        ])}
+        data-testId="zoom-out-button"
         onClick={() => handleZoomAction(ZOOM.out.value)}
       >
         <Icon name={ZOOM.out.icon} size="sm" />
diff --git a/apps/client/src/constants/index.ts b/apps/client/src/constants/index.ts
index 81a9f3e..9e379f5 100644
--- a/apps/client/src/constants/index.ts
+++ b/apps/client/src/constants/index.ts
@@ -5,3 +5,8 @@ export type Entity<Value = string | number> = {
   value: Value;
   icon: IconName;
 };
+
+export type ShortcutKeyCombo<Value = string | number> = Entity<Value> & {
+  key: string;
+  modifierKeys: readonly string[];
+};
diff --git a/apps/client/src/constants/panels/control.ts b/apps/client/src/constants/panels/control.ts
index 98e7df4..be7d5ad 100644
--- a/apps/client/src/constants/panels/control.ts
+++ b/apps/client/src/constants/panels/control.ts
@@ -1,12 +1,8 @@
 import type { HistoryActionKey } from '@/stores/reducers/history';
 import { type canvasActions } from '@/stores/slices/canvas';
-import { KEYS, type Key } from '../keys';
-import type { Entity } from '@/constants/index';
+import type { ShortcutKeyCombo } from '@/constants/index';
 
-type Control = Entity<HistoryActionKey | keyof typeof canvasActions> & {
-  key: string;
-  modifierKeys: readonly Key[];
-};
+type Control = ShortcutKeyCombo<HistoryActionKey | keyof typeof canvasActions>;
 
 export const CONTROL: readonly Control[] = [
   {
@@ -14,14 +10,14 @@ export const CONTROL: readonly Control[] = [
     value: 'undo',
     icon: 'arrowBackUp',
     key: 'Z',
-    modifierKeys: [KEYS.CTRL],
+    modifierKeys: ['Ctrl'],
   },
   {
     name: 'Redo',
     value: 'redo',
     icon: 'arrowForwardUp',
     key: 'Z',
-    modifierKeys: [KEYS.CTRL, KEYS.SHIFT],
+    modifierKeys: ['Ctrl', 'Shift'],
   },
   {
     name: 'Delete',
diff --git a/apps/client/src/constants/panels/zoom.ts b/apps/client/src/constants/panels/zoom.ts
index 3e95261..3561db1 100644
--- a/apps/client/src/constants/panels/zoom.ts
+++ b/apps/client/src/constants/panels/zoom.ts
@@ -1,10 +1,10 @@
-import type { Entity } from '../index';
+import type { Entity, ShortcutKeyCombo } from '../index';
 
 export type ZoomAction = (typeof ZOOM)[keyof typeof ZOOM]['value'];
 
 type Zoom = {
-  in: Entity;
-  out: Entity;
+  in: ShortcutKeyCombo;
+  out: ShortcutKeyCombo;
   reset: Omit<Entity, 'icon'>;
 };
 
@@ -13,11 +13,15 @@ export const ZOOM: Zoom = {
     name: 'Zoom In',
     value: 'increase',
     icon: 'plus',
+    key: 'Ctrl',
+    modifierKeys: ['Mouse Wheel++'],
   },
   out: {
     name: 'Zoom Out',
     value: 'decrease',
     icon: 'minus',
+    key: 'Ctrl',
+    modifierKeys: ['Mouse Wheel--'],
   },
   reset: {
     name: 'Reset Zoom',
diff --git a/apps/client/src/utils/__tests__/string.test.ts b/apps/client/src/utils/__tests__/string.test.ts
index 595434a..d1d31db 100644
--- a/apps/client/src/utils/__tests__/string.test.ts
+++ b/apps/client/src/utils/__tests__/string.test.ts
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   capitalizeFirstLetter,
-  getKeyTitle,
-  getStyleTitle,
+  createKeyTitle,
+  createTitle,
   hexToRGBa,
 } from '../string';
 
@@ -25,27 +25,27 @@ describe('capitalizeFirstLetter', () => {
   });
 });
 
-describe('getKeyTitle', () => {
+describe('createKeyTitle', () => {
   it('should return a formatted string for a single key', () => {
-    expect(getKeyTitle('foo', ['bar'])).toBe('Foo — Bar');
+    expect(createKeyTitle('foo', ['bar'])).toBe('Foo — Bar');
   });
 
   it('should return a formatted string for multiple keys', () => {
-    expect(getKeyTitle('foo', ['bar', 'foo'])).toBe('Foo — Bar + Foo');
+    expect(createKeyTitle('foo', ['bar', 'foo'])).toBe('Foo — Bar + Foo');
   });
 
   it('should return empty string if name is an empty string', () => {
-    expect(getKeyTitle('', ['foo', 'bar'])).toBe(' — Foo + Bar');
+    expect(createKeyTitle('', ['foo', 'bar'])).toBe(' — Foo + Bar');
   });
 
   it('should return keys as strings when provided with non-string values', () => {
-    expect(getKeyTitle('foo', [<any>12, null])).toBe('Foo — 12 + Null');
+    expect(createKeyTitle('foo', [<any>12, null])).toBe('Foo — 12 + Null');
   });
 });
 
-describe('getStyleTitle', () => {
+describe('createTitle', () => {
   it('returns a formatted title', () => {
-    expect(getStyleTitle('foo', 'bar')).toBe('foo — bar');
+    expect(createTitle('foo', 'bar')).toBe('foo — bar');
   });
 });
 
diff --git a/apps/client/src/utils/string.ts b/apps/client/src/utils/string.ts
index 3bd5f16..3d4e4bf 100644
--- a/apps/client/src/utils/string.ts
+++ b/apps/client/src/utils/string.ts
@@ -13,24 +13,27 @@ export function capitalizeFirstLetter(string: string) {
   return string[0].toUpperCase() + string.slice(1).toLowerCase();
 }
 
-export const getKeyTitle = (name: string, keys: string[]) => {
+export const createTitle = (name: string, value: string) =>
+  `${name} — ${value}`;
+
+export const createKeyTitle = (name: string, keys: string[]) => {
   if (typeof name !== 'string') {
     throw new Error('The provided name must be a string');
   }
 
-  const capitalizedName = name.length ? capitalizeFirstLetter(name) : '';
+  const capitalizedName = capitalizeFirstLetter(name);
 
   if (keys.length === 1) {
-    return `${capitalizedName} — ${capitalizeFirstLetter(`${keys[0]}`)}`;
+    const capitalizedKey = capitalizeFirstLetter(keys[0]);
+
+    return createTitle(capitalizedName, capitalizedKey);
   }
 
-  return `${capitalizedName} — ${keys
+  const joinedKeys = keys
     .map((key) => capitalizeFirstLetter(`${key}`))
-    .join(' + ')}`;
-};
+    .join(' + ');
 
-export const getStyleTitle = (name: string, value: string) => {
-  return `${name} — ${value}`;
+  return createTitle(capitalizedName, joinedKeys);
 };
 
 export const hexToRGBa = (hex: string, alpha = 1) => {