diff --git a/package-lock.json b/package-lock.json
index c62643a..51bc73c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.15",
       "dependencies": {
         "darkmode-react-component": "^0.1.7",
+        "highlight.js": "^11.10.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-techs-logos": "^0.1.14"
@@ -2781,6 +2782,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
diff --git a/package.json b/package.json
index 1a576f3..fd8f999 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "darkmode-react-component": "^0.1.7",
+    "highlight.js": "^11.10.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-techs-logos": "^0.1.14"
diff --git a/src/components/Code/index.tsx b/src/components/Code/index.tsx
new file mode 100644
index 0000000..da91753
--- /dev/null
+++ b/src/components/Code/index.tsx
@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+import hljs from 'highlight.js';
+import 'highlight.js/scss/atom-one-light.scss';
+
+function ModalInstall(props: any) {
+  const codeRef: any = useRef(null);
+
+  useEffect(() => {
+    hljs.highlightElement(codeRef.current);
+  }, [props.children]);
+
+  return (
+    <code ref={codeRef} className={`language-${props.language}`}>{props.children}</code>
+  );
+}
+
+export default ModalInstall;
diff --git a/src/components/Code/style.scss b/src/components/Code/style.scss
new file mode 100644
index 0000000..1b7a48e
--- /dev/null
+++ b/src/components/Code/style.scss
@@ -0,0 +1,59 @@
+.modal {
+  background: var(--vtl-background);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 11;
+  backdrop-filter: blur(20px);
+  opacity: 0;
+  pointer-events: none;
+  transition: .5s all;
+  &.active {
+    opacity: 1;
+    pointer-events: all;
+  }
+}
+
+.modal-content {
+  background: var(--vtl-background);
+  overflow: auto;
+  border-radius: 20px;
+  margin: 3rem;
+  padding: 2rem;
+  height: calc(100% - 10rem);
+  h2:first-of-type {
+    margin-top: 0;
+  }
+  code:last-of-type {
+    margin-bottom: 0;
+  }
+  code {
+    background: #fff;
+    color: #000;
+  }
+}
+
+.darkmode {
+  .modal-content code {
+    background: #000;
+    color: #fff;
+  }
+}
+
+.modal-button {
+  position: absolute;
+  top: 2.5rem;
+  right: 2.5rem;
+  z-index: 11;
+  cursor: pointer;
+  background-color: #fff;
+  border: 0;
+  border-radius: 100px;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: scale(2);
+}
diff --git a/src/components/ModalInstall/index.tsx b/src/components/ModalInstall/index.tsx
index cac6d28..1be5829 100644
--- a/src/components/ModalInstall/index.tsx
+++ b/src/components/ModalInstall/index.tsx
@@ -1,3 +1,4 @@
+import Code from '../Code';
 import "./style.scss";
 
 function ModalInstall(props: any) {
@@ -19,21 +20,21 @@ function ModalInstall(props: any) {
       </button>
       <div className="modal-content">
         <h2>Install</h2>
-        <code>npm install --save react-techs-logos</code>
+        <Code language="shell">npm install --save react-techs-logos</Code>
         <h2>Usage</h2>
-        <code>import ReactTechsLogs from 'react-techs-logos'</code>
-        <br />
-        <code>{`<ReactTechsLogos name="facebook" />`}</code>
-        <h2 className="title">Hidden Label</h2>
-        <code>{`<ReactTechsLogos name="facebook" hiddenLabel />`}</code>
-        <h2 className="title">List of techs filtered</h2>
-        <code>
+        <Code language="jsx">{`import ReactTechsLogs from 'react-techs-logos'
+
+<ReactTechsLogos name="facebook" />`}</Code>
+        <h2 className="title">hiddenLabel</h2>
+        <Code language="jsx">{`<ReactTechsLogos name="facebook" hiddenLabel />`}</Code>
+        <h2 className="title">List</h2>
+        <Code language="jsx">
           {`<ReactTechsLogos list={['vue', 'react', 'angular', 'ember']} />`}
-        </code>
-        <h2 className="title">List of techs hiddenLogos</h2>
-        <code>
+        </Code>
+        <h2 className="title">hiddenLogos</h2>
+        <Code language="jsx">
           {`<ReactTechsLogos hiddenLogos={['android', 'apple', 'vue', 'react', 'angular', 'ember']} />`}
-        </code>
+        </Code>
       </div>
     </div>
   );
diff --git a/src/components/ModalInstall/style.scss b/src/components/ModalInstall/style.scss
index 1b7a48e..ba5b06f 100644
--- a/src/components/ModalInstall/style.scss
+++ b/src/components/ModalInstall/style.scss
@@ -30,8 +30,10 @@
     margin-bottom: 0;
   }
   code {
+    padding: 1rem;
     background: #fff;
     color: #000;
+    white-space: pre;
   }
 }