diff --git a/src/data/layers/Factory.vue b/src/data/layers/Factory.vue
index 368f23a..755bf5e 100644
--- a/src/data/layers/Factory.vue
+++ b/src/data/layers/Factory.vue
@@ -26,7 +26,8 @@ onMounted(() => {
     position: absolute;
     top: 0;
     bottom: 0;
-    left: 0;
     right: 0;
+    width: 500px;
+    touch-action: none;
 }
 </style>
diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx
index 8834207..18eef99 100644
--- a/src/data/layers/factory.tsx
+++ b/src/data/layers/factory.tsx
@@ -3,12 +3,12 @@ import { Assets } from "@pixi/assets";
 import { Container } from "@pixi/display";
 import { Graphics } from "@pixi/graphics";
 import { Sprite } from "@pixi/sprite";
+import Spacer from "components/layout/Spacer.vue";
 import { jsx } from "features/feature";
 import { globalBus } from "game/events";
 import { createLayer } from "game/layers";
 import { Persistent, persistent, State } from "game/persistence";
-import player from "game/player";
-import Decimal, { formatWhole } from "util/bignum";
+import Decimal, { format, formatWhole } from "util/bignum";
 import { Direction } from "util/common";
 import { computed, ComputedRef, reactive, ref, watchEffect } from "vue";
 import conveyor from "./factory-components/conveyor.png";
@@ -82,7 +82,7 @@ const factory = createLayer(id, () => {
             .reduce((a, b) => a + b, 0)
     );
     const tickRate = computed(() =>
-        Decimal.div(energyConsumption.value, energy.value).pow(2).min(1)
+        Decimal.div(energyConsumption.value, energy.value).recip().pow(2).min(1)
     );
 
     // ---------------------------------------------- Components
@@ -633,7 +633,6 @@ const factory = createLayer(id, () => {
             ) *
                 Math.PI) /
             2;
-        console.log("!!", data, sprite);
         components.value[x + "x" + y] = {
             ticksDone: 0,
             direction: Direction.Right,
@@ -830,9 +829,6 @@ const factory = createLayer(id, () => {
         compSelected.value = name;
     }
 
-    function goBack() {
-        player.tabs.splice(0, Infinity, "main");
-    }
     return {
         name,
         day,
@@ -842,141 +838,166 @@ const factory = createLayer(id, () => {
         style: { overflow: "hidden" },
         components,
         display: jsx(() => (
-            <div class="layer-container">
-                <button class="goBack" onClick={goBack}>
-                    ❌
-                </button>
-                <Factory
-                    application={app}
-                    onPointermove={onFactoryPointerMove}
-                    onPointerdown={onFactoryPointerDown}
-                    onPointerenter={onFactoryMouseEnter}
-                    onPointerleave={onFactoryMouseLeave}
-                    onContextmenu={(e: MouseEvent) => e.preventDefault()}
-                />
-
-                {compHovered.value !== undefined ? (
-                    <div
-                        class="info-container"
-                        id="factory-info"
-                        style={{
-                            ...(mouseCoords.x +
-                                (document.getElementById("factory-info")?.clientWidth ?? 0) >
-                            app.view.width - 30
-                                ? { right: app.view.width - mouseCoords.x + "px" }
-                                : { left: mouseCoords.x + "px" }),
-                            ...(mouseCoords.y +
-                                (document.getElementById("factory-info")?.clientHeight ?? 0) >
-                            app.view.height - 30
-                                ? { bottom: app.view.height - mouseCoords.y + "px" }
-                                : { top: mouseCoords.y + "px" })
-                        }}
-                    >
-                        <h3>{FACTORY_COMPONENTS[compHovered.value.type].name}</h3>
-                        <br />
-                        {FACTORY_COMPONENTS[compHovered.value.type].description}
-                        <br />
-                        {compHovered.value.type !== "conveyor" ? (
-                            <>
-                                {compHovered.value.inputStock !== undefined ? (
-                                    <>
-                                        <br />
-                                        <h5>Inputs:</h5>
-                                        {Object.entries(compHovered.value.inputStock).map(x => (
-                                            <div>
-                                                {x[0]}: {formatWhole(x[1])}
-                                                {FACTORY_COMPONENTS[
-                                                    compHovered.value?.type ?? "cursor"
-                                                ].inputs?.[x[0]].amount !== undefined
-                                                    ? " / " +
-                                                      formatWhole(
-                                                          FACTORY_COMPONENTS[
-                                                              compHovered.value?.type ?? "cursor"
-                                                          ].inputs?.[x[0]].amount ?? 0
-                                                      )
-                                                    : ""}
-                                                {FACTORY_COMPONENTS[
-                                                    compHovered.value?.type ?? "cursor"
-                                                ].inputs?.[x[0]].capacity !== undefined
-                                                    ? " / " +
-                                                      formatWhole(
-                                                          FACTORY_COMPONENTS[
-                                                              compHovered.value?.type ?? "cursor"
-                                                          ].inputs?.[x[0]].capacity ?? 0
-                                                      )
-                                                    : ""}
-                                            </div>
-                                        ))}
-                                    </>
-                                ) : undefined}
-                                {compHovered.value.outputStock !== undefined ? (
-                                    <>
-                                        <br />
-                                        <h5>Outputs:</h5>
-                                        {Object.entries(compHovered.value.outputStock).map(x => (
-                                            <div>
-                                                {x[0]}: {formatWhole(x[1])}
-                                                {FACTORY_COMPONENTS[
-                                                    compHovered.value?.type ?? "cursor"
-                                                ].outputs?.[x[0]].capacity !== undefined
-                                                    ? " / " +
-                                                      formatWhole(
-                                                          FACTORY_COMPONENTS[
-                                                              compHovered.value?.type ?? "cursor"
-                                                          ].outputs?.[x[0]].capacity ?? 0
-                                                      )
-                                                    : ""}
-                                            </div>
-                                        ))}
-                                    </>
-                                ) : undefined}
-                            </>
-                        ) : undefined}
-                    </div>
-                ) : undefined}
-
+            <>
                 <div class="factory-container">
-                    <div
-                        class={{
-                            "comp-info": true,
-                            active: isComponentHover.value
-                        }}
-                        style={{
-                            top:
-                                Math.max(
-                                    Object.keys(FACTORY_COMPONENTS).indexOf(whatIsHovered.value),
-                                    0
-                                ) *
-                                    50 +
-                                10 +
-                                "px"
-                        }}
-                    >
-                        {whatIsHovered.value === "" ? undefined : (
-                            <>
-                                <h3>{FACTORY_COMPONENTS[whatIsHovered.value].name}</h3>
-                                <br />
-                                {FACTORY_COMPONENTS[whatIsHovered.value].description}
-                            </>
-                        )}
-                    </div>
-                    <div class="comp-list">
-                        {Object.entries(FACTORY_COMPONENTS).map(value => {
-                            const key = value[0] as FactoryCompNames;
-                            const item = value[1];
-                            return (
-                                <img
-                                    src={item.imageSrc}
-                                    class={{ selected: compSelected.value === key }}
-                                    onMouseenter={() => onComponentMouseEnter(key)}
-                                    onMouseleave={() => onComponentMouseLeave()}
-                                    onClick={() => onCompClick(key)}
-                                />
-                            );
-                        })}
+                    <Factory
+                        application={app}
+                        onPointermove={onFactoryPointerMove}
+                        onPointerdown={onFactoryPointerDown}
+                        onPointerenter={onFactoryMouseEnter}
+                        onPointerleave={onFactoryMouseLeave}
+                        onContextmenu={(e: MouseEvent) => e.preventDefault()}
+                    />
+                    <div class="comp-container">
+                        <div
+                            class={{
+                                "comp-info": true,
+                                active: isComponentHover.value
+                            }}
+                            style={{
+                                top:
+                                    Math.floor(
+                                        Math.max(
+                                            Object.keys(FACTORY_COMPONENTS).indexOf(
+                                                whatIsHovered.value
+                                            ),
+                                            0
+                                        ) / 2
+                                    ) *
+                                        70 +
+                                    10 +
+                                    "px"
+                            }}
+                        >
+                            {whatIsHovered.value === "" ? undefined : (
+                                <>
+                                    <h3>{FACTORY_COMPONENTS[whatIsHovered.value].name}</h3>
+                                    <br />
+                                    {FACTORY_COMPONENTS[whatIsHovered.value].description}
+                                    {FACTORY_COMPONENTS[whatIsHovered.value].energyCost ?? 0 ? (
+                                        <>
+                                            <br />
+                                            Energy Consumption:{" "}
+                                            {formatWhole(
+                                                FACTORY_COMPONENTS[whatIsHovered.value]
+                                                    .energyCost ?? 0
+                                            )}
+                                        </>
+                                    ) : null}
+                                </>
+                            )}
+                        </div>
+                        <div class="comp-list">
+                            {Object.entries(FACTORY_COMPONENTS).map(value => {
+                                const key = value[0] as FactoryCompNames;
+                                const item = value[1];
+                                return (
+                                    <img
+                                        src={item.imageSrc}
+                                        class={{ selected: compSelected.value === key }}
+                                        onMouseenter={() => onComponentMouseEnter(key)}
+                                        onMouseleave={() => onComponentMouseLeave()}
+                                        onClick={() => onCompClick(key)}
+                                    />
+                                );
+                            })}
+                        </div>
                     </div>
+
+                    {compHovered.value !== undefined ? (
+                        <div
+                            class="info-container"
+                            id="factory-info"
+                            style={{
+                                ...(mouseCoords.x >= 180
+                                    ? { right: app.view.width - mouseCoords.x + "px" }
+                                    : { left: mouseCoords.x + 150 + "px" }),
+                                ...(mouseCoords.y +
+                                    (document.getElementById("factory-info")?.clientHeight ?? 0) >
+                                app.view.height - 30
+                                    ? { bottom: app.view.height - mouseCoords.y + "px" }
+                                    : { top: mouseCoords.y + "px" })
+                            }}
+                        >
+                            <h3>{FACTORY_COMPONENTS[compHovered.value.type].name}</h3>
+                            <br />
+                            {FACTORY_COMPONENTS[compHovered.value.type].description}
+                            <br />
+                            {compHovered.value.type !== "conveyor" ? (
+                                <>
+                                    {compHovered.value.inputStock !== undefined ? (
+                                        <>
+                                            <br />
+                                            <h5>Inputs:</h5>
+                                            {Object.entries(compHovered.value.inputStock).map(x => (
+                                                <div>
+                                                    {x[0]}: {formatWhole(x[1])}
+                                                    {FACTORY_COMPONENTS[
+                                                        compHovered.value?.type ?? "cursor"
+                                                    ].inputs?.[x[0]].amount !== undefined
+                                                        ? " / " +
+                                                          formatWhole(
+                                                              FACTORY_COMPONENTS[
+                                                                  compHovered.value?.type ??
+                                                                      "cursor"
+                                                              ].inputs?.[x[0]].amount ?? 0
+                                                          )
+                                                        : ""}
+                                                    {FACTORY_COMPONENTS[
+                                                        compHovered.value?.type ?? "cursor"
+                                                    ].inputs?.[x[0]].capacity !== undefined
+                                                        ? " / " +
+                                                          formatWhole(
+                                                              FACTORY_COMPONENTS[
+                                                                  compHovered.value?.type ??
+                                                                      "cursor"
+                                                              ].inputs?.[x[0]].capacity ?? 0
+                                                          )
+                                                        : ""}
+                                                </div>
+                                            ))}
+                                        </>
+                                    ) : undefined}
+                                    {compHovered.value.outputStock !== undefined ? (
+                                        <>
+                                            <br />
+                                            <h5>Outputs:</h5>
+                                            {Object.entries(compHovered.value.outputStock).map(
+                                                x => (
+                                                    <div>
+                                                        {x[0]}: {formatWhole(x[1])}
+                                                        {FACTORY_COMPONENTS[
+                                                            compHovered.value?.type ?? "cursor"
+                                                        ].outputs?.[x[0]].capacity !== undefined
+                                                            ? " / " +
+                                                              formatWhole(
+                                                                  FACTORY_COMPONENTS[
+                                                                      compHovered.value?.type ??
+                                                                          "cursor"
+                                                                  ].outputs?.[x[0]].capacity ?? 0
+                                                              )
+                                                            : ""}
+                                                    </div>
+                                                )
+                                            )}
+                                        </>
+                                    ) : undefined}
+                                </>
+                            ) : undefined}
+                        </div>
+                    ) : undefined}
                 </div>
-            </div>
+
+                <Spacer />
+                <div
+                    class={Decimal.gt(energyConsumption.value, energy.value) ? "unaffordable" : ""}
+                >
+                    Energy Consumption: {formatWhole(energyConsumption.value)} /{" "}
+                    {formatWhole(energy.value)}
+                    <br />
+                    Tick Rate: {format(tickRate.value)} TPS
+                </div>
+            </>
         ))
     };
 });
diff --git a/src/data/layers/styles/factory.css b/src/data/layers/styles/factory.css
index 371e0ed..45f3a12 100644
--- a/src/data/layers/styles/factory.css
+++ b/src/data/layers/styles/factory.css
@@ -1,18 +1,11 @@
-
-.factoryDisp {
-    position: absolute;
-
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    
-    background: snow;
-    touch-action: none;
-}
-
-.factoryDisp canvas {
-    filter: drop-shadow(1px 1px 2px #0007);
+.factory-container {
+    width: 650px;
+    height: 500px;
+    position: relative;
+    background-color: var(--raised-background);
+    border-radius: var(--border-radius);
+    box-shadow: 0 2px 10px rgb(0 0 0 / 50%);
+    overflow: hidden;
 }
 
 .info-container {
@@ -35,17 +28,16 @@
 
     pointer-events: none;
     user-select: none;
+
+    z-index: 2;
 }
-.factory-container {
+.comp-container {
     position: absolute;
-
-    top: calc(5% + 30px);
-    bottom: 5%;
-    left: 0%;
-    width: 70px;
-
-    margin: 0;
-    padding: 0;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 148px;
+    z-index: 1;
 }
 
 .comp-info {
@@ -65,24 +57,29 @@
 
     pointer-events: none;
     transition: transform 0.3s;
+
+    z-index: -1;
 }
 .comp-info.active {
     transform: translateX(calc(20px + 100%));
 }
 
 .comp-list {
-    position: relative;
+    width: 100%;
     height: 100%;
-    padding: 10px;
-
+    display: flex;
+    border-right: solid 2px var(--locked);
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: flex-start;
+    align-content: flex-start;
     background: var(--raised-background);
-    border-radius: 0 var(--border-radius) var(--border-radius) 0;
-    box-shadow: 0 2px 10px black;
 }
 .comp-list > img {
     display: block;
     width: 50px;
     height: 50px;
+    margin: 10px;
 }
 .comp-list > img.selected {
     transform: translate(-5px, -5px);
diff --git a/src/data/projEntry.tsx b/src/data/projEntry.tsx
index 750f2ba..e9690be 100644
--- a/src/data/projEntry.tsx
+++ b/src/data/projEntry.tsx
@@ -222,27 +222,21 @@ export const main = createLayer("main", function (this: BaseLayer) {
                         },
                         onOpenLayer() {
                             recentlyUpdated.value = false;
-
-                            // should not be full screen
-                            if (layer !== "factory") {
-                                // 1468 is because two tabs with minWidth of 700px plus the minimized calendar of 60px plus 2 dividers of 4px each
-                                if (window.matchMedia("(min-width: 1468px)").matches) {
-                                    // Desktop, allow multiple tabs to be open
-                                    if (player.tabs.includes(layer ?? "trees")) {
-                                        const index = player.tabs.lastIndexOf(layer ?? "trees");
-                                        player.tabs.splice(index, 1);
-                                    } else {
-                                        player.tabs.push(layer ?? "trees");
-                                        main.minimized.value = true;
-                                    }
+                            // 1468 is because two tabs with minWidth of 700px plus the minimized calendar of 60px plus 2 dividers of 4px each
+                            if (window.matchMedia("(min-width: 1468px)").matches) {
+                                // Desktop, allow multiple tabs to be open
+                                if (player.tabs.includes(layer ?? "trees")) {
+                                    const index = player.tabs.lastIndexOf(layer ?? "trees");
+                                    player.tabs.splice(index, 1);
                                 } else {
-                                    // Mobile, use single tab mode
-                                    player.tabs.splice(1, Infinity, layer ?? "trees");
+                                    player.tabs.push(layer ?? "trees");
+                                    main.minimized.value = true;
                                 }
-                                layers[layer ?? "trees"]!.minimized.value = false;
                             } else {
-                                player.tabs.splice(0, Infinity, layer);
+                                // Mobile, use single tab mode
+                                player.tabs.splice(1, Infinity, layer ?? "trees");
                             }
+                            layers[layer ?? "trees"]!.minimized.value = false;
                         },
                         onUnlockLayer() {
                             if (layer != null) {