diff --git a/index.html b/index.html
index e7b93e92e..0cd64d212 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="./style.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
     <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
+    <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" defer></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
     <title>CalcDiverse</title>
 </head>
@@ -95,6 +96,7 @@
     <!-- Hero Section Starts here  -->
     <section class="comp-section">
         <div class="compcontainer">
+            <div id="google_translate_element"></div>
             <div class="logo">
                 <img src="./assets/images/logo.png" alt="CalcDiverse Logo">
             </div>
diff --git a/script.js b/script.js
index 92ec78d74..4985edf28 100644
--- a/script.js
+++ b/script.js
@@ -79,6 +79,15 @@ toggleSwitch.addEventListener('change', (e) => {
     }
 });
 
+// Google Translate
+function googleTranslateElementInit() {
+    new google.translate.TranslateElement({
+            pageLanguage: 'en'
+        },
+        'google_translate_element'
+    );
+}
+
 // Hide or show scroll progress indicator
 let calcScrollValue = () => {
     let scrollProg = document.getElementById("progress");
diff --git a/style.css b/style.css
index 4df195ca8..761be8798 100644
--- a/style.css
+++ b/style.css
@@ -409,6 +409,15 @@ nav ul {
     background-color: var(--secondary);
 }
 
+/* Google Translate Css */
+
+#google_translate_element {
+    right: 0;
+    margin-top: 5px;
+    margin-right: 5px;
+    position: absolute;
+}
+
 /* Components Section Css */
 
 section {