diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx
index 0f8aedd..545930c 100644
--- a/src/data/layers/factory.tsx
+++ b/src/data/layers/factory.tsx
@@ -1238,45 +1238,54 @@ const factory = createLayer(id, () => {
 
     // ------------------------------------------------------------------------------- Tabs
 
+    const hovered = ref(false);
     const componentsList = jsx(() => {
         return (
-            <div class="comp-container">
+            <div class={{ "comp-container": true, hovered: hovered.value }}>
                 <div class="comp-list">
-                    {Object.entries(FACTORY_COMPONENTS).map(value => {
-                        const key = value[0] as FactoryCompNames;
-                        const item = value[1];
-                        return (
-                            <div class="comp">
-                                <img
-                                    src={item.imageSrc}
-                                    class={{ selected: compSelected.value === key }}
-                                    onClick={() => onCompClick(key)}
-                                />
-                                {item.extraImage == null ? null : (
-                                    <img src={item.extraImage} class="producedItem" />
-                                )}
-                                <div
-                                    class={{
-                                        "comp-info": true
-                                    }}
-                                >
-                                    <h3>
-                                        {FACTORY_COMPONENTS[key].name + " "}
-                                        <HotkeyVue hotkey={hotkeys[key]} />
-                                    </h3>
-                                    <br />
-                                    {unref(FACTORY_COMPONENTS[key].description)}
-                                    {FACTORY_COMPONENTS[key].energyCost ?? 0 ? (
-                                        <>
-                                            <br />
-                                            Energy Consumption:{" "}
-                                            {formatWhole(FACTORY_COMPONENTS[key].energyCost ?? 0)}
-                                        </>
-                                    ) : null}
+                    <div
+                        class="comp-list-child"
+                        onPointerenter={() => (hovered.value = true)}
+                        onPointerleave={() => (hovered.value = false)}
+                    >
+                        {Object.entries(FACTORY_COMPONENTS).map(value => {
+                            const key = value[0] as FactoryCompNames;
+                            const item = value[1];
+                            return (
+                                <div class="comp">
+                                    <img
+                                        src={item.imageSrc}
+                                        class={{ selected: compSelected.value === key }}
+                                        onClick={() => onCompClick(key)}
+                                    />
+                                    {item.extraImage == null ? null : (
+                                        <img src={item.extraImage} class="producedItem" />
+                                    )}
+                                    <div
+                                        class={{
+                                            "comp-info": true
+                                        }}
+                                    >
+                                        <h3>
+                                            {FACTORY_COMPONENTS[key].name + " "}
+                                            <HotkeyVue hotkey={hotkeys[key]} />
+                                        </h3>
+                                        <br />
+                                        {unref(FACTORY_COMPONENTS[key].description)}
+                                        {FACTORY_COMPONENTS[key].energyCost ?? 0 ? (
+                                            <>
+                                                <br />
+                                                Energy Consumption:{" "}
+                                                {formatWhole(
+                                                    FACTORY_COMPONENTS[key].energyCost ?? 0
+                                                )}
+                                            </>
+                                        ) : null}
+                                    </div>
                                 </div>
-                            </div>
-                        );
-                    })}
+                            );
+                        })}
+                    </div>
                 </div>
             </div>
         );
diff --git a/src/data/layers/styles/factory.css b/src/data/layers/styles/factory.css
index 3d5f4c7..6a0b3df 100644
--- a/src/data/layers/styles/factory.css
+++ b/src/data/layers/styles/factory.css
@@ -57,8 +57,6 @@
     border-left: 1px solid var(--foreground);
 }
 
-
-
 .factory-container {
     width: auto;
     top: 113px;
@@ -68,6 +66,7 @@
     position: absolute;
     background-color: var(--raised-background);
     overflow: hidden;
+    z-index: 1;
 }
 
 .info-container {
@@ -100,6 +99,10 @@
     left: 0;
     bottom: 0;
     width: 158px;
+    z-index: -1;
+}
+
+.comp-container.hovered {
     z-index: 1;
 }
 
@@ -124,25 +127,30 @@
 
     z-index: -1;
 }
-.comp-list > .comp:nth-child(2n - 1) .comp-info {
+.comp-list .comp:nth-child(2n - 1) .comp-info {
     right: -85px;
 }
-.comp-list > .comp:hover .comp-info {
+.comp-list .comp:hover .comp-info {
     transform: translateX(calc(20px + 100%));
 }
 
 .comp-list {
     width: 100%;
     height: 100%;
+    overflow-y: overlay;
+    overflow-x: hidden;
+    padding-right: 370px;
+    direction: rtl;
+}
+
+.comp-list-child {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
     align-items: flex-start;
     align-content: flex-start;
-    overflow-y: overlay;
-    overflow-x: hidden;
-    padding-right: 500px;
-    pointer-events: none;
+    width: 148px;
+    direction: ltr;
 }
 
 .comp-list::after {
@@ -157,7 +165,7 @@
     z-index: -1;
 }
 
-.comp-list > .comp {
+.comp-list .comp {
     position: relative;
     width: 50px;
     height: 50px;
@@ -165,8 +173,8 @@
     pointer-events: all;
 }
 
-.comp-list > div:nth-child(3)::after,
-.comp-list > div:nth-child(4)::after {
+.comp-list .comp:nth-child(3)::after,
+.comp-list .comp:nth-child(4)::after {
     content: "";
     position: absolute;
     top: calc(100% + 10px);
@@ -175,13 +183,13 @@
     left: 0;
     right: 0;
 }
-.comp-list > div:nth-child(3)::after {
+.comp-list .comp:nth-child(3)::after {
     right: -50px;
 }
-.comp-list > div:nth-child(4)::after {
+.comp-list .comp:nth-child(4)::after {
     left: -50px;
 }
-.comp-list > img.selected:not(.producedItem) {
+.comp-list .comp img.selected:not(.producedItem) {
     transform: translate(-5px, -5px);
     filter: drop-shadow(2px 2px 0 var(--foreground)) drop-shadow(5px 5px 5px #0007);
 }