diff --git a/src/components/Phonetic/index.tsx b/src/components/Phonetic/index.tsx
index 2a7b5d66..ff114c91 100644
--- a/src/components/Phonetic/index.tsx
+++ b/src/components/Phonetic/index.tsx
@@ -7,9 +7,9 @@ export type PhoneticProps = {
 
 const Phonetic: React.FC<PhoneticProps> = ({ usphone, ukphone }) => {
   return (
-    <div className="pt-1 text-sm font-normal text-gray-600 text-center space-x-5">
+    <div className="pt-1 text-sm font-normal text-gray-600 dark:text-gray-400 transition-colors duration-300 text-center space-x-5">
       {usphone.length > 1 && <span>{`US: [${usphone}]`}</span>}
-      {ukphone.length > 1 && <span>{`UK:[${ukphone}]`}</span>}
+      {ukphone.length > 1 && <span>{`UK: [${ukphone}]`}</span>}
     </div>
   )
 }