diff --git a/public/audios/dtmf-#.mp3 b/public/audios/dtmf-#.mp3
new file mode 100644
index 0000000..7bbcc51
Binary files /dev/null and b/public/audios/dtmf-#.mp3 differ
diff --git a/public/audios/dtmf-*.mp3 b/public/audios/dtmf-*.mp3
new file mode 100644
index 0000000..4263df1
Binary files /dev/null and b/public/audios/dtmf-*.mp3 differ
diff --git a/public/audios/dtmf-0.mp3 b/public/audios/dtmf-0.mp3
new file mode 100644
index 0000000..6de9f4c
Binary files /dev/null and b/public/audios/dtmf-0.mp3 differ
diff --git a/public/audios/dtmf-1.mp3 b/public/audios/dtmf-1.mp3
new file mode 100644
index 0000000..788eb7e
Binary files /dev/null and b/public/audios/dtmf-1.mp3 differ
diff --git a/public/audios/dtmf-2.mp3 b/public/audios/dtmf-2.mp3
new file mode 100644
index 0000000..96e1167
Binary files /dev/null and b/public/audios/dtmf-2.mp3 differ
diff --git a/public/audios/dtmf-3.mp3 b/public/audios/dtmf-3.mp3
new file mode 100644
index 0000000..1a39bb6
Binary files /dev/null and b/public/audios/dtmf-3.mp3 differ
diff --git a/public/audios/dtmf-4.mp3 b/public/audios/dtmf-4.mp3
new file mode 100644
index 0000000..2133f58
Binary files /dev/null and b/public/audios/dtmf-4.mp3 differ
diff --git a/public/audios/dtmf-5.mp3 b/public/audios/dtmf-5.mp3
new file mode 100644
index 0000000..1b416d4
Binary files /dev/null and b/public/audios/dtmf-5.mp3 differ
diff --git a/public/audios/dtmf-6.mp3 b/public/audios/dtmf-6.mp3
new file mode 100644
index 0000000..bfc2f27
Binary files /dev/null and b/public/audios/dtmf-6.mp3 differ
diff --git a/public/audios/dtmf-7.mp3 b/public/audios/dtmf-7.mp3
new file mode 100644
index 0000000..662f8eb
Binary files /dev/null and b/public/audios/dtmf-7.mp3 differ
diff --git a/public/audios/dtmf-8.mp3 b/public/audios/dtmf-8.mp3
new file mode 100644
index 0000000..d722de4
Binary files /dev/null and b/public/audios/dtmf-8.mp3 differ
diff --git a/public/audios/dtmf-9.mp3 b/public/audios/dtmf-9.mp3
new file mode 100644
index 0000000..cd69e7b
Binary files /dev/null and b/public/audios/dtmf-9.mp3 differ
diff --git a/public/audios/local-party-hungup-tone.mp3 b/public/audios/local-party-hungup-tone.mp3
new file mode 100644
index 0000000..ccfeb67
Binary files /dev/null and b/public/audios/local-party-hungup-tone.mp3 differ
diff --git a/src/lib/SipAudioElements.ts b/src/lib/SipAudioElements.ts
index 93252b6..42f3dc9 100644
--- a/src/lib/SipAudioElements.ts
+++ b/src/lib/SipAudioElements.ts
@@ -5,6 +5,7 @@ export default class SipAudioElements {
   #busy: HTMLAudioElement;
   #remote: HTMLAudioElement;
   #hungup: HTMLAudioElement;
+  #localHungup: HTMLAudioElement;
 
   constructor() {
     this.#ringing = new Audio(chrome.runtime.getURL("audios/ringing.mp3"));
@@ -21,9 +22,22 @@ export default class SipAudioElements {
       chrome.runtime.getURL("audios/remote-party-hungup-tone.mp3")
     );
     this.#hungup.volume = 0.3;
+    this.#localHungup = new Audio(
+      chrome.runtime.getURL("audios/local-party-hungup-tone.mp3")
+    );
+    this.#localHungup.volume = 0.3;
     this.#remote = new Audio();
   }
 
+  playLocalHungup(volume: number | undefined) {
+    this.pauseRingback();
+    this.pauseRinging();
+    if (volume) {
+      this.#localHungup.volume = volume;
+    }
+    this.#localHungup.play();
+  }
+
   playRinging(volume: number | undefined): void {
     if (volume) {
       this.#ringing.volume = volume;
diff --git a/src/lib/SipSession.ts b/src/lib/SipSession.ts
index 53d9d2b..2210487 100644
--- a/src/lib/SipSession.ts
+++ b/src/lib/SipSession.ts
@@ -105,6 +105,8 @@ export default class SipSession extends events.EventEmitter {
       let description;
       if (originator === "remote") {
         this.#audio.playRemotePartyHungup(undefined);
+      } else {
+        this.#audio.playLocalHungup(undefined);
       }
       if (message && originator === "remote" && message.hasHeader("Reason")) {
         const reason = Grammar.parse(message.getHeader("Reason"), "Reason");
diff --git a/src/window/phone/DialPadSoundElement.ts b/src/window/phone/DialPadSoundElement.ts
new file mode 100644
index 0000000..d3fd567
--- /dev/null
+++ b/src/window/phone/DialPadSoundElement.ts
@@ -0,0 +1,28 @@
+export default class DialPadAudioElements {
+  private keySounds: { [key: string]: HTMLAudioElement | undefined } = {};
+
+  constructor() {
+    const arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "*", "#"];
+    for (const i of arr) {
+      this.keySounds[i] = new Audio(
+        chrome.runtime.getURL(`audios/dtmf-${encodeURIComponent(i)}.mp3`)
+      );
+      const audio = this.keySounds[i];
+      console.log({ i, audio }, "xquanluu");
+      if (audio) {
+        audio.volume = 0.5;
+      }
+    }
+  }
+
+  playKeyTone(key: string): void {
+    const audio = this.keySounds[key];
+    if (audio) {
+      if (!audio.paused) {
+        audio.pause();
+        audio.currentTime = 0;
+      }
+      audio.play();
+    }
+  }
+}
diff --git a/src/window/phone/dial-pad.tsx b/src/window/phone/dial-pad.tsx
index 5552c88..974ec22 100644
--- a/src/window/phone/dial-pad.tsx
+++ b/src/window/phone/dial-pad.tsx
@@ -1,9 +1,13 @@
 import { Box, Button, HStack, VStack } from "@chakra-ui/react";
+import DialPadAudioElements from "./DialPadSoundElement";
+import { useEffect } from "react";
 
 type DialPadProbs = {
   handleDigitPress: (digit: string) => void;
 };
 
+const keySounds = new DialPadAudioElements();
+
 export const DialPad = ({ handleDigitPress }: DialPadProbs) => {
   const buttons = [
     ["1", "2", "3"],
@@ -12,6 +16,25 @@ export const DialPad = ({ handleDigitPress }: DialPadProbs) => {
     ["*", "0", "#"],
   ];
 
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (
+      ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "*", "#"].includes(
+        e.key
+      )
+    ) {
+      keySounds?.playKeyTone(e.key);
+      handleDigitPress(e.key);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      console.log("xquanluu1231");
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
   return (
     <Box p={2} w="full">
       <VStack w="full" bg="grey.500" spacing={0.5}>
@@ -20,7 +43,10 @@ export const DialPad = ({ handleDigitPress }: DialPadProbs) => {
             {row.map((num) => (
               <Button
                 key={num}
-                onClick={() => handleDigitPress(num)}
+                onClick={() => {
+                  keySounds?.playKeyTone(num);
+                  handleDigitPress(num);
+                }}
                 size="lg"
                 p={0}
                 width="124px"
diff --git a/src/window/phone/index.tsx b/src/window/phone/index.tsx
index 81da0f8..8ec8698 100644
--- a/src/window/phone/index.tsx
+++ b/src/window/phone/index.tsx
@@ -315,9 +315,8 @@ export const Phone = ({
   }
 
   const handleDialPadClick = (value: string) => {
-    if (isSipClientIdle(callStatus)) {
-      setInputNumber((prev) => prev + value);
-    } else if (isSipClientAnswered(callStatus)) {
+    setInputNumber((prev) => prev + value);
+    if (isSipClientAnswered(callStatus)) {
       sipUA.current?.dtmf(value, undefined);
     }
   };
@@ -414,9 +413,9 @@ export const Phone = ({
     <Center flexDirection="column">
       {isConfigured ? (
         <>
-          <HStack spacing={2} boxShadow="md" w="full" p={2} borderRadius={5}>
-            <Image src={isOnline() ? GreenAvatar : Avatar} />
-            <VStack spacing={2} alignItems="start" w="full">
+          <HStack spacing={2} boxShadow="md" w="full" borderRadius={5} p={2}>
+            <Image src={isOnline() ? GreenAvatar : Avatar} boxSize="50px" />
+            <VStack alignItems="start" w="full" spacing={0}>
               <HStack spacing={2} w="full">
                 <Text fontWeight="bold" fontSize="13px">
                   {sipDisplayName || sipUsername}