diff --git a/src/App.scss b/src/App.scss
index 2bb2cb0..7217523 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,3 +1,19 @@
+.inputs-actions {
+  display: flex;
+  gap: 20px;
+}
+
+.checkbox-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  height: 50px;
+  label input {
+    margin-right: 1rem;
+  }
+}
+
 .input-search {
   padding: 1rem;
   margin: 0 0 1rem;
@@ -6,7 +22,7 @@
   border: 1px solid var(--vtl-background);
   box-shadow: 0 0 0 1px #fff3;
   color: var(--vtl-text);
-  width: calc(100% - 2rem);
+  width: calc(100% - 190px);
 }
 
 .not-found {
diff --git a/src/App.tsx b/src/App.tsx
index 502c5a6..4ef8153 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,15 +1,29 @@
 import ReactTechsLogos from "./components/ReactTechsLogos";
-import { useState } from "react";
-import NucleusReact from 'nucleus-react-js';
+import { useState, useEffect } from "react";
+import NucleusReact, { NucleusBox } from "nucleus-react-js";
 import techs from "./components/ReactTechsLogos/techs";
 import { configApp } from "./App.config";
 import "./App.scss";
-// import ReactTechsLogos from 'react-techs-logos'
 
 function App() {
   const [search, setSearch] = useState("");
+  const [showRaw, setShowRaw] = useState(() => {
+    return JSON.parse(localStorage.getItem("showRaw") || "false");
+  });
+  const [hiddenLabel, setHiddenLabel] = useState(() => {
+    return JSON.parse(localStorage.getItem("hiddenLabel") || "false");
+  });
+
+  useEffect(() => {
+    localStorage.setItem("showRaw", JSON.stringify(showRaw));
+  }, [showRaw]);
+
+  useEffect(() => {
+    localStorage.setItem("hiddenLabel", JSON.stringify(hiddenLabel));
+  }, [hiddenLabel]);
+
   const filteredArray = techs
-    .filter((item: any) => {
+    .filter((item) => {
       const nameItem = item.name.toLowerCase();
       return nameItem.includes(search.trim().toLowerCase());
     })
@@ -17,16 +31,44 @@ function App() {
 
   return (
     <NucleusReact config={configApp}>
-      <div className="content">
-        <h2 className="title">List of techs</h2>
-        <input
-          className="input-search"
-          type="text"
-          value={search}
-          onChange={(e: any) => setSearch(e.target.value)}
-          placeholder="Search logo name..."
+      <NucleusBox title="List of techs">
+        <div className="inputs-actions">
+          <input
+            className="input-search"
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search logo name..."
+          />
+
+          <div className="checkbox-container">
+            <label>
+              <input
+                type="checkbox"
+                checked={showRaw}
+                onChange={() => setShowRaw((prev: boolean) => !prev)}
+              />
+              Raw
+            </label>
+            {!showRaw && (
+              <label>
+                <input
+                  type="checkbox"
+                  checked={hiddenLabel || showRaw}
+                  onChange={() => setHiddenLabel((prev: boolean) => !prev)}
+                />
+                Hidden Label
+              </label>
+            )}
+          </div>
+        </div>
+
+        <ReactTechsLogos
+          list={filteredArray}
+          raw={showRaw}
+          hiddenLabel={hiddenLabel}
         />
-        <ReactTechsLogos list={filteredArray} />
+
         {!filteredArray.length && (
           <div className="not-found">
             <svg
@@ -38,15 +80,15 @@ function App() {
             >
               <path
                 fill="var(--vtl-background-svg"
-                fill-rule="evenodd"
+                fillRule="evenodd"
                 d="m38.155 140.475 10.833-78.364 43.881 4.946 18.568 23.955-8.041 57.109-65.241-7.646Zm45.858-46.473 4.814-22.195-34.781-3.5-9.854 67.15 54.143 6.627 6.542-45.275-20.864-2.807Zm-24.242 29.593c-.377-.496-3.721-3.296-4.35-4.162 8.899-9.911 30.629-9.788 36.664 3.324-1.005.371-5.495 2.315-6.375 2.81-2.518-7.317-17.265-9.625-25.939-1.972Zm16.732-27.096-3.666 2.76-5.515-6.642-7.507 4.03-3.029-5.07 6.829-3.426-4.526-5.452 5.5-3.68 4.39 6.439 7.819-3.925 2.356 4.73-7.047 3.784 4.396 6.452Z"
-                clip-rule="evenodd"
+                clipRule="evenodd"
               />
             </svg>
             <p>No logos found matching your search.</p>
           </div>
         )}
-      </div>
+      </NucleusBox>
     </NucleusReact>
   );
 }
diff --git a/src/assets/techs/cisco.svg b/src/assets/techs/cisco.svg
index 26f4d04..c0c5a45 100644
--- a/src/assets/techs/cisco.svg
+++ b/src/assets/techs/cisco.svg
@@ -5,6 +5,7 @@
   version="1.1"
   fill="#049fd9"
   viewBox="0 -30 216 180"
+  class="tech-icon"
 >
   <path
      d="m 106.48,76.238 c -0.282,-0.077 -4.621,-1.196 -9.232,-1.196 -8.73,0 -13.986,4.714 -13.986,11.734 0,6.214 4.397,9.313 9.674,10.98 0.585,0.193 1.447,0.463 2.021,0.653 2.349,0.739 4.224,1.837 4.224,3.739 0,2.127 -2.167,3.504 -6.878,3.504 -4.14,0 -8.109,-1.184 -8.945,-1.395 v 8.637 c 0.466,0.099 5.183,1.025 10.222,1.025 7.248,0 15.539,-3.167 15.539,-12.595 0,-4.573 -2.8,-8.783 -8.947,-10.737 L 97.559,89.755 C 96,89.263 93.217,88.466 93.217,86.181 c 0,-1.805 2.062,-3.076 5.859,-3.076 3.276,0 7.263,1.101 7.404,1.145 z m 80.041,18.243 c 0,5.461 -4.183,9.879 -9.796,9.879 -5.619,0 -9.791,-4.418 -9.791,-9.879 0,-5.45 4.172,-9.87 9.791,-9.87 5.613,0 9.796,4.42 9.796,9.87 m -9.796,-19.427 c -11.544,0 -19.823,8.707 -19.823,19.427 0,10.737 8.279,19.438 19.823,19.438 11.543,0 19.834,-8.701 19.834,-19.438 0,-10.72 -8.291,-19.427 -19.834,-19.427 M 70.561,113.251 H 61.089 V 75.719 h 9.472"
diff --git a/src/assets/techs/jetbrains.svg b/src/assets/techs/jetbrains.svg
index 679eab4..d148d47 100644
--- a/src/assets/techs/jetbrains.svg
+++ b/src/assets/techs/jetbrains.svg
@@ -1,13 +1,13 @@
-<svg class="tech-icon" fill="none" viewBox="0 0 64 64" class="_siteLogo__image_3fer6 _siteLogo__image_il5wq">
+<svg class="tech-icon" fill="none" viewBox="0 0 64 64">
   <defs>
-    <linearGradient id="__WEBTEAM_UI_SITE_HEADER_LOGO_ID__0" x1="1" x2="62.75" y1="63" y2="1.25"
+    <linearGradient id="jetbrains" x1="1" x2="62.75" y1="63" y2="1.25"
       gradientUnits="userSpaceOnUse">
       <stop stop-color="#FF9419"></stop>
       <stop offset="0.43" stop-color="#FF021D"></stop>
       <stop offset="0.99" stop-color="#E600FF"></stop>
     </linearGradient>
   </defs>
-  <path fill="url(#__WEBTEAM_UI_SITE_HEADER_LOGO_ID__0)"
+  <path fill="url(#jetbrains)"
     d="M22.14 0H59c2.76 0 5 2.24 5 5v36.86c0 2.65-1.055 5.195-2.93 7.07L48.93 61.07A10.003 10.003 0 0 1 41.86 64H5c-2.76 0-5-2.24-5-5V22.14c0-2.65 1.055-5.195 2.93-7.07L15.07 2.93A10.003 10.003 0 0 1 22.14 0Z"></path>
   <path fill="#000" d="M52 12H6v46h46V12Z"></path>
   <g fill="#fff" class="jetbrains-simple_svg__letters-to-show-hovered">
diff --git a/src/assets/techs/qwik.svg b/src/assets/techs/qwik.svg
index 554a1f2..fe45235 100644
--- a/src/assets/techs/qwik.svg
+++ b/src/assets/techs/qwik.svg
@@ -1,4 +1,4 @@
-<svg class="tech-icon" xmlns="http://www.w3.org/2000/svg" fill="none" aria-label="Qwik Logo" class="qwik-logo" viewBox="-4 0 53 53">
+<svg class="tech-icon" xmlns="http://www.w3.org/2000/svg" fill="none" aria-label="Qwik Logo" viewBox="-4 0 53 53">
   <path fill="#18B6F6" d="M40.973 52.535 32.086 43.7l-.136.019v-.097L13.051 24.959l4.657-4.495-2.736-15.697L1.991 20.851C-.221 23.08-.629 26.704.963 29.378l8.11 13.449c1.242 2.073 3.493 3.313 5.918 3.294l4.017-.039 21.965 6.453Z"/>
   <path fill="#AC7EF4" d="m45.823 20.541-1.785-3.294-.931-1.686-.369-.659-.039.039-4.89-8.469a6.846 6.846 0 0 0-5.995-3.43l-4.288.117-12.788.038a6.847 6.847 0 0 0-5.86 3.372l-7.78 15.425L15.01 4.729l18.24 20.038-3.24 3.275 1.94 15.677.019-.039v.039h-.039l.039.038 1.513 1.473 7.354 7.19c.31.29.815-.058.602-.427l-4.54-8.933 7.916-14.63.252-.291c.097-.117.194-.233.272-.35 1.552-2.112 1.766-4.94.485-7.247Z"/>
   <path fill="#fff" d="M33.308 24.688 15.01 4.748l2.6 15.619-4.657 4.515L31.91 43.699l-1.707-15.62 3.105-3.39Z"/>