diff --git a/package.json b/package.json
index 94d4e44..672f4e1 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
-    "svg-to-img": "^2.0.9"
+    "svg-to-img": "^2.0.9",
+    "he": "^1.2.0"
   },
   "devDependencies": {
     "@types/dom-to-image": "^2.6.7",
diff --git a/src/components/LeetCodeCard.tsx b/src/components/LeetCodeCard.tsx
index d819a30..eafc391 100644
--- a/src/components/LeetCodeCard.tsx
+++ b/src/components/LeetCodeCard.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { fetchLeetCodeData } from '../utils/leetcode';
+import he from 'he';
 
 type LeetCodeCardProps = {
   username: string;
@@ -33,7 +34,7 @@ const LeetCodeCard: React.FC<LeetCodeCardProps> = ({ username,type, theme, borde
   }
 
   // Construct the image URL using props
-  const imgUrl = `http://leetcode-status.vercel.app/api/${type}/${username}?theme=${theme}&border=${border}&hide_title=${hide_title}&custom_title=${custom_title}`;
+  const imgUrl = `http://leetcode-status.vercel.app/api/${he.encode(type)}/${he.encode(username)}?theme=${he.encode(theme)}&border=${border}&hide_title=${hide_title}&custom_title=${he.encode(custom_title)}`;
 
   return (
     <div className='flex items-center justify-center rounded'>