diff --git a/src/constants/index.ts b/src/constants/index.ts
index 77b20b3bc7..78dd09b8dd 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -22,7 +22,7 @@ public class Example {
     // Registering types can reduce class name serialization
     // overhead but not mandatory.
     // If secure mode enabled
-    //all custom types must be registered.
+    // all custom types must be registered.
     fory.register(SomeClass.class);
   }
 
diff --git a/src/pages/home/components/HomepageCodeDisplay.tsx b/src/pages/home/components/HomepageCodeDisplay.tsx
index b1a6663bd9..cbd7ca636b 100644
--- a/src/pages/home/components/HomepageCodeDisplay.tsx
+++ b/src/pages/home/components/HomepageCodeDisplay.tsx
@@ -56,75 +56,131 @@ export default function HomepageCodeDisplay() {
       });
   };
 
+  const handleLeftArrowClick = () => {
+    const currentIndex = langs.indexOf(selectedLang);
+    setSelectedLang(
+      langs[currentIndex > 0 ? currentIndex - 1 : langs.length - 1]
+    );
+    startAutoSlide();
+  };
+
+  const handleRightArrowClick = () => {
+    const currentIndex = langs.indexOf(selectedLang);
+    setSelectedLang(langs[(currentIndex + 1) % langs.length]);
+    startAutoSlide();
+  };
+
   return (
     <div className="flex flex-col md:flex-row items-center justify-center md:m-32 m-6 space-y-6 md:space-y-0 md:space-x-8">
       {/* Pic */}
       <div className="hidden md:flex w-full md:w-1/2 justify-center">
         <img
+          className="w-full max-w-md h-auto"
           src={programmingImageUrl}
           alt="programming-coding"
-          className="w-full max-w-md h-auto"
         />
       </div>
       {/* Code Box */}
       <div
-        className="relative text-sm overflow-hidden bg-[#1e1e2f]rounded-lg"
+        className="w-full relative text-sm overflow-hidden bg-[#1e1e2f]rounded-lg"
         style={{
           width: "100%",
-          maxWidth: "600px",
-          height: "666px",
+          maxWidth: "666px",
         }}
       >
-        {/* Top Bar */}
-        <div className="flex items-center px-3 py-2 bg-[#1e1e2f]">
-          <div className="space-x-3 overflow-auto">
-            {langs.map((lang) => (
-              <button
-                key={lang}
-                onClick={() => handleLangChange(lang)}
-                className={`px-3 py-1 rounded-full text-sm font-medium border border-gray-500 duration-200 ${selectedLang === lang
-                  ? "bg-blue-600 text-white"
-                  : "bg-gray-600 text-gray-300 hover:bg-gray-500"
-                  }`}
+        <div className="flex items-center justify-between">
+          <div>
+            <button
+              className="flex items-center justify-center w-12 h-12 rounded-full bg-white shadow-lg hover:shadow-xl transition-shadow focus:outline-none"
+              onClick={handleLeftArrowClick}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6 text-gray-700"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
               >
-                {CODE_EXAMPLES[lang].label}
-              </button>
-            ))}
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 19l-7-7 7-7"
+                />
+              </svg>
+            </button>
           </div>
-        </div>
-
-
-        {/* Code Area with animation and scroll */}
-        <AnimatePresence mode="wait">
-          <motion.div
-            key={selectedLang}
-            initial={{ opacity: 0, x: 50 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: -50 }}
-            transition={{ duration: 0.4 }}
-            className="relative w-full h-full"
-          >
+          <div>
+            {/* Top Bar */}
+            <div className="flex items-center px-3 bg-[#1e1e2f]">
+              <div className="space-x-3 overflow-auto">
+                {langs.map((lang) => (
+                  <button
+                    key={lang}
+                    onClick={() => handleLangChange(lang)}
+                    className={`px-3 py-1 rounded-full text-sm font-medium border border-gray-500 duration-200 ${
+                      selectedLang === lang
+                        ? "bg-blue-600 text-white"
+                        : "bg-gray-600 text-gray-300 hover:bg-gray-500"
+                    }`}
+                  >
+                    {CODE_EXAMPLES[lang].label}
+                  </button>
+                ))}
+              </div>
+            </div>
+            {/* Code Area with animation and scroll */}
+            <AnimatePresence mode="wait">
+              <motion.div
+                key={selectedLang}
+                initial={{ opacity: 0, x: 50 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -50 }}
+                transition={{ duration: 0.4 }}
+                className="relative w-full h-full max-w-lg"
+              >
+                <button
+                  onClick={copyToClipboard}
+                  className="absolute top-5 right-5 z-10 text-xs px-2 rounded border border-gray-500 text-white hover:bg-white/10 transition"
+                >
+                  {copyMessage || "Copy"}
+                </button>
+                <div className="w-full h-full overflow-auto px-4 py-1">
+                  <SyntaxHighlighter
+                    language={selectedLang}
+                    style={dracula}
+                    wrapLongLines={true}
+                    codeTagProps={{ className: "text-sm bg-transparent" }}
+                  >
+                    {CODE_EXAMPLES[selectedLang].code}
+                  </SyntaxHighlighter>
+                </div>
+              </motion.div>
+            </AnimatePresence>
+          </div>
+          <div>
             <button
-              onClick={copyToClipboard}
-              className="absolute top-5 right-5 z-10 text-xs px-2 py-1 rounded border border-gray-500 text-white hover:bg-white/10 transition"
+              className="flex items-center justify-center w-12 h-12 rounded-full bg-white shadow-lg hover:shadow-xl transition-shadow focus:outline-none"
+              onClick={handleRightArrowClick}
             >
-              {copyMessage || "Copy"}
-            </button>
-            <div className="w-full h-full overflow-auto px-4 py-2">
-              <SyntaxHighlighter
-                language={selectedLang}
-                style={dracula}
-                wrapLongLines={true}
-                codeTagProps={{ className: "text-sm bg-transparent" }}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6 text-gray-700"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
               >
-                {CODE_EXAMPLES[selectedLang].code}
-              </SyntaxHighlighter>
-            </div>
-          </motion.div>
-        </AnimatePresence>
-
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
       </div>
     </div>
-
   );
 }