diff --git a/react/src/helpers/challenges.ts b/react/src/helpers/challenges.ts
index 5e9742c9c..3f3962ce6 100644
--- a/react/src/helpers/challenges.ts
+++ b/react/src/helpers/challenges.ts
@@ -315,6 +315,17 @@ export const challenges = new Map<string, Challenge>([
       tags: [],
     },
   ],
+  [
+    'emoji-picker',
+    {
+      title: 'Emoji Picker',
+      link: 'emoji-picker',
+      difficulty: 'medium',
+      developer: 'jeevaramanathan',
+      tags: [],
+      isNew: true,
+    },
+  ],
   [
     'investment-calculator',
     {
@@ -423,15 +434,4 @@ export const challenges = new Map<string, Challenge>([
       tags: [],
     },
   ],
-  [
-    'emoji-picker',
-    {
-      title: 'Emoji Picker',
-      link: 'emoji-picker',
-      difficulty: 'medium',
-      developer: 'jeevaramanathan',
-      tags: [],
-      isNew:true
-    },
-  ],
 ]);
diff --git a/react/src/machine-coding/emoji-picker/App.jsx b/react/src/machine-coding/emoji-picker/App.jsx
index c6a8d6365..7970c05a8 100644
--- a/react/src/machine-coding/emoji-picker/App.jsx
+++ b/react/src/machine-coding/emoji-picker/App.jsx
@@ -1,12 +1,10 @@
-import styles from "./app.module.css"
 import Emoji from './Emoji';
-import Code from './Code'
+import styles from './app.module.css';
+
 export default function App() {
-  
-    return (
+  return (
     <div className={styles.main}>
-     <Emoji/>
-     <Code/>
+      <Emoji />
     </div>
   );
 }
diff --git a/react/src/machine-coding/emoji-picker/Code.jsx b/react/src/machine-coding/emoji-picker/Code.jsx
deleted file mode 100644
index 77766116d..000000000
--- a/react/src/machine-coding/emoji-picker/Code.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import styles from './app.module.css';
-
-const obj = `
-                    **Main Functionalities**
-
-
-        **Copy Block level(div) elements to clipboard**
-function copyToClipboard(element) {
-    // Create a range object that selects the element \n
-    // to be copied.
-    const range = document.createRange();
-    range.selectNode(element);
-  
-    // clear current selection
-    window.getSelection().removeAllRanges(); 
-    
-    // Selects the given range.
-    window.getSelection().addRange(range);
-  
-    // Copy the selection to the clipboard.
-    document.execCommand('copy');
-  
-    // Remove the range from the selection.
-    selection.removeAllRanges();
-}
-
-
-        **Filter emojis based on search value**
-emojis.filter((icon) => {
-    icon.toLowerCase().includes(searchValue.toLowerCase())
-})
-
-
-        **axios to call API**
-axios.get(__url__)
-    .then(response => {
-        // Handle response
-    });
-`;
-
-const Code = () => {
-  return (
-    <div className={styles.container}>
-    <pre>
-      <code>
-        {obj.split('\n').map((line, index) => {
-          if (line.trim().startsWith('//')) {
-            return <span key={index} className={styles.comments}>{line}</span>;
-          }
-          else if(line.trim().startsWith('**')){
-            return <b key={index}>{line}</b>;  
-          }
-          return <div key={index}>{line}</div>;
-        })}
-      </code>
-    </pre>
-    </div>
-  );
-};
-
-export default Code;
\ No newline at end of file
diff --git a/react/src/machine-coding/emoji-picker/Emoji.jsx b/react/src/machine-coding/emoji-picker/Emoji.jsx
index 87aed391a..1799fff3e 100644
--- a/react/src/machine-coding/emoji-picker/Emoji.jsx
+++ b/react/src/machine-coding/emoji-picker/Emoji.jsx
@@ -1,8 +1,10 @@
 import { useEffect, useState } from 'react';
-import styles from './app.module.css';
+
 import axios from 'axios';
+import styles from './app.module.css';
 
 const access_key = 'eb3aa13df1b14cc7bc614fc2d7f894f41b09d68a';
+
 const Emoji = () => {
   const [emojis, setEmojis] = useState([]);
   const [filteredEmojis, setFilteredEmojis] = useState([]);
@@ -13,7 +15,7 @@ const Emoji = () => {
   useEffect(() => {
     loadAllEmojis();
     loadCategories();
-    window.scrollTo(0,0);
+    window.scrollTo(0, 0);
   }, []);
 
   const loadAllEmojis = () => {
@@ -77,7 +79,11 @@ const Emoji = () => {
           <select className={styles.select} onChange={categoryChange}>
             <option>all</option>
             {category.map((item) => {
-              return <option value={item.slug}>{item.slug.replace('-', ' ')}</option>;
+              return (
+                <option value={item.slug} key={item.slug}>
+                  {item.slug.replace('-', ' ')}
+                </option>
+              );
             })}
           </select>
         </div>
@@ -98,6 +104,7 @@ const Emoji = () => {
           Click on an Emoji to Copy
         </div>
       </div>
+
       <div className={styles.container}>
         {filteredEmojis?.length == 0 && search.trim() == '' && (
           <div className={styles.loaderContainer}>
diff --git a/react/src/machine-coding/emoji-picker/app.module.css b/react/src/machine-coding/emoji-picker/app.module.css
index bf7e0f0d7..9d0a03e23 100644
--- a/react/src/machine-coding/emoji-picker/app.module.css
+++ b/react/src/machine-coding/emoji-picker/app.module.css
@@ -1,29 +1,29 @@
 /* app */
 .main {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  flex-direction: column;
 }
 
 /* emoji component */
 .container {
-  height: 400px;
   width: 100%;
-  background-color: rgb(249, 249, 249);
-  border-radius: 3px;
-  box-shadow: 0 0 3px 2px rgba(201, 201, 201, 0.933);
-  overflow-x: hidden;
-  overflow-y: scroll;
+  height: 400px;
   padding: 10px;
   margin: 26px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  background-color: rgb(249, 249, 249);
+  border-radius: 3px;
+  box-shadow: 0 0 3px 2px rgba(201, 201, 201, 93.3%);
 }
 
 .container::-webkit-scrollbar,
 .container::-webkit-scrollbar-thumb {
-  border-radius: 13px;
-  width: 13px;
+  width: 6px;
   height: 40px;
+  border-radius: 12px;
 }
 
 .container::-webkit-scrollbar-thumb {
@@ -31,20 +31,20 @@
 }
 
 .iconContainer {
-  height: 30%;
   width: 30%;
+  height: 30%;
 }
 
 .icon {
   display: inline-block;
   width: calc(100% / 3);
   padding: 1px;
-  text-align: center;
   font-size: 30px;
+  text-align: center;
+  cursor: pointer;
   border: 3px solid transparent;
   border-radius: 10px;
   transition: border-color 0.3s;
-  cursor: pointer;
 }
 
 .icon:hover {
@@ -54,36 +54,38 @@
 .inputField {
   padding: 10px;
   margin-bottom: 10px;
-  font-size: 16px;
+  font-size: 1rem;
   border: 1px solid #ccc;
-  border-radius: 5px;
   border: 2px solid rgb(80, 66, 0);
+  border-radius: 4px;
 }
+
 .inputField:hover {
   cursor: auto;
   border: 2px solid rgb(80, 66, 0);
 }
+
 .toast {
   position: fixed;
   top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 300px;
   height: 30px;
-  background-color: rgb(128, 238, 128);
-  border-radius: 20px;
-  box-shadow: 0 0 3px 2px rgba(201, 201, 201, 0.933);
   color: darkslategray;
   text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  background-color: rgb(128, 238, 128);
+  border-radius: 20px;
+  box-shadow: 0 0 3px 2px rgba(201, 201, 201, 93.3%);
 }
 
 .loader {
+  width: 60px;
+  height: 60px;
   border: 6px solid #f3f3f3;
   border-top: 6px solid #3498db;
   border-radius: 50%;
-  width: 60px;
-  height: 60px;
   animation: spin 2s linear infinite;
 }
 
@@ -94,26 +96,23 @@
 
 .topSection {
   display: flex;
-  justify-content: center;
   flex-direction: column;
+  justify-content: center;
 }
 
 .select {
-  padding: 10px;
-  margin-left: 20px;
   width: 180px;
+  padding: 10px;
   margin-bottom: 10px;
-  font-size: 16px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
+  font-size: 1rem;
   border: 2px solid rgb(80, 66, 0);
-  font-size: 14px;
+  border-radius: 5px;
 }
 
 .copyText {
   font-size: small;
-  text-align: center;
   color: #bababa;
+  text-align: center;
   opacity: 1;
 }
 
@@ -125,54 +124,34 @@
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
 }
 
-@media (max-width: 576px) {
+@media (width <= 576px) {
   .icon {
     width: calc(100% / 6);
   }
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .icon {
     width: calc(100% / 8);
   }
+
   .container {
     width: 500px;
   }
 }
 
-@media (min-width: 992px) {
+@media (width >= 992px) {
   .icon {
     width: calc(100% / 10);
   }
+
   .container {
     width: 500px;
   }
 }
-
-
-/* code component */
-pre {
-  background: #eee;
-  padding: 1rem;
-  overflow: auto;
-  border-radius: 3px;
-  max-width: 80ch;
-}
-
-pre code {
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-}
-
-.comments {
-  color: green;
-}