diff --git a/sass/css/_shop.scss b/sass/css/_shop.scss
index 8bb7989..52101a4 100644
--- a/sass/css/_shop.scss
+++ b/sass/css/_shop.scss
@@ -216,18 +216,6 @@ button {
                 width: 50%;
                 padding-right: 30px;
             }
-
-            > .legend {
-                //d-flex justify-content-end align-self-start
-                display: flex;
-                justify-content: end;
-                align-self: start;
-                width: 50%;
-                table {
-                    width: 75%;
-                    max-width: 300px;
-                }
-            }
         }
 
         .summary {
diff --git a/static/css/order-hardware.css b/static/css/order-hardware.css
index 0f45610..f3033ae 100644
--- a/static/css/order-hardware.css
+++ b/static/css/order-hardware.css
@@ -108,17 +108,9 @@
   }
 
   #root-shop .panel .control > .description,
-  #root-shop .panel .control > .legend,
   #root-shop .crate-mode {
     width: 100%;
   }
-  #root-shop .panel .control > .legend {
-    justify-content: center;
-    align-self: center;
-  }
-  #root-shop .panel .control > .legend tr {
-    padding: 0;
-  }
 
   #root-shop .crate-mode {
     text-align: left;
@@ -315,17 +307,9 @@
     margin-bottom: 1.5rem;
   }
 
-  #root-shop .panel .control > .description,
-  #root-shop .panel .control > .legend {
+  #root-shop .panel .control > .description {
     width: 100%;
   }
-  #root-shop .panel .control > .legend {
-    justify-content: center;
-    align-self: center;
-  }
-  #root-shop .panel .control > .legend tr {
-    padding: 0;
-  }
 
   #root-shop .panel .crate .crate-bar .crate-mode {
     text-align: left;
@@ -589,17 +573,9 @@
     font-size: 1.5rem;
   }
 
-  #root-shop .panel .control > .description,
-  #root-shop .panel .control > .legend {
+  #root-shop .panel .control > .description {
     width: 100%;
   }
-  #root-shop .panel .control > .legend {
-    justify-content: center;
-    align-self: center;
-  }
-  #root-shop .panel .control > .legend tr {
-    padding: 0;
-  }
 
   #root-shop .panel .crate .crate-bar .crate-mode {
     text-align: left;
diff --git a/static/js/shop/Legend.jsx b/static/js/shop/Legend.jsx
deleted file mode 100644
index 4543152..0000000
--- a/static/js/shop/Legend.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import {useShopStore} from "./shop_store";
-
-export function LegendItem({icon, description}) {
-    return (
-        <tr>
-            <td className="p-1"><img className="" width="20px" src={icon} alt={description}/></td>
-            <td className="p-1"><span> {description} </span></td>
-        </tr>
-    )
-}
-
-export function Legend() {
-    const legend = useShopStore(state => state.legend);
-
-    return <table>
-        <tbody>
-        {legend.map((item, i) => <LegendItem key={"legend_item"+i} icon={item.icon} description={item.description}/>)}
-        </tbody>
-    </table>
-}
\ No newline at end of file
diff --git a/static/js/shop/OrderPanel.jsx b/static/js/shop/OrderPanel.jsx
index 36fd316..51c6f89 100644
--- a/static/js/shop/OrderPanel.jsx
+++ b/static/js/shop/OrderPanel.jsx
@@ -13,7 +13,7 @@ import {useRenderCount} from "@uidotdev/usehooks";
  * Component that renders all things for order.
  * It acts like-a layout, this component do nothing more.
  */
-export function OrderPanel({title, description, legend}) {
+export function OrderPanel({title, description}) {
     // #!render_count
     const renderCount = useRenderCount();
     const isMobile = useShopStore((state) => state.isMobile);
@@ -28,11 +28,6 @@ export function OrderPanel({title, description, legend}) {
 
         <div className="control justify-content-between">
             {description}
-
-            <div className="legend">
-                {legend}
-            </div>
-
         </div>
 
         <div>
diff --git a/static/js/shop/Shop.jsx b/static/js/shop/Shop.jsx
index 84eaf7c..59f56ab 100644
--- a/static/js/shop/Shop.jsx
+++ b/static/js/shop/Shop.jsx
@@ -9,7 +9,6 @@ import {Layout} from "./Layout";
 import {Backlog} from "./Backlog";
 import {OrderPanel} from "./OrderPanel";
 import {useShopStore} from "./shop_store";
-import {Legend} from "./Legend";
 
 /**
  * Component that renders the entire shop
@@ -60,7 +59,6 @@ export function Shop() {
                                 this ordering system, or if you need other configurations, email us directly anytime
                                 at <a href="mailto:sales@m-labs.hk">sales@m-labs.hk</a>. The price is estimated and must
                                 be confirmed by a quote.</p>)}
-                        legend={(<Legend/>)}
                     />
                 )}>
             </Layout>
diff --git a/static/js/shop/shop_store.js b/static/js/shop/shop_store.js
index 08370aa..7e8ad7a 100644
--- a/static/js/shop/shop_store.js
+++ b/static/js/shop/shop_store.js
@@ -28,10 +28,6 @@ const useBacklog = ((set, get) => ({
     cardIndexById: card_id => get().cards_list.findIndex((element) => (card_id === element))
 }));
 
-const useLegend = ((set, get) => ({
-    legend: shared_data.legend
-}))
-
 const useCrateModes  = ((set, get) => ({
     crate_modes: shared_data.crateModes,
     modes_order: shared_data.crateModeOrder,
@@ -454,5 +450,4 @@ export const useShopStore = createWithEqualityFn((...params) => ({
     ...useLayout(...params),
     ...useHighlighted(...params),
     ...useImportJSON(...params),
-    ...useLegend(...params),
 }))
\ No newline at end of file
diff --git a/static/js/shop_data.js b/static/js/shop_data.js
index 3375987..2e399e9 100644
--- a/static/js/shop_data.js
+++ b/static/js/shop_data.js
@@ -3,16 +3,6 @@ const shop_data = {
   API_RFQ: 'https://hooks.m-labs.hk/rfq',
   currency: 'USD',
 
-  legend: [
-    {icon: "/images/shop/icon-customize.svg", description: "cards configuration available"},
-    {icon: "/images/shop/icon-add.svg", description: "add a card or crate to the order"},
-    {icon: "/images/shop/icon-remove.svg", description: "remove a card or crate from the order"},
-    {icon: "/images/shop/icon-clear.svg", description: "remove all the cards from the crate"},
-    {icon: "/images/shop/icon-warning.svg", description: "the card or crate contains errors"},
-    {icon: "/images/shop/icon-reminder.svg", description: "suggestions or hints available"},
-
-  ],
-
   crateModes: {
     rack: {
       id: 'rack',