diff --git a/tgui/packages/tgui/interfaces/FlightComputer.tsx b/tgui/packages/tgui/interfaces/FlightComputer.tsx
index 23478d135cee..3a594844523e 100644
--- a/tgui/packages/tgui/interfaces/FlightComputer.tsx
+++ b/tgui/packages/tgui/interfaces/FlightComputer.tsx
@@ -7,7 +7,6 @@ import {
   Box,
   Button,
   ColorBox,
-  Divider,
   Flex,
   RoundGauge,
   Stack,
@@ -48,103 +47,66 @@ export const FlightComputer = (props) => {
   const { act, data } = useBackend<FlightComputerData>();
 
   return (
-    <Window width={700} height={410} theme="crtgreen">
-      <Window.Content>
-        <Stack vertical width="100%">
-          <Stack.Item height="100%">
-            <Box m={-10} height={40}>
-              <svg width="100%" height="100%">
-                <rect
-                  fill="rgb(0, 0, 0)"
-                  x="10"
-                  y="10"
+    <Window width={700} height={410}>
+      <Window.Content className="FlightComputer__Background">
+        <Box className="FlightComputer__Casing">
+          <Table height="100%">
+            <Table.Row>
+              <Table.Cell align="start" verticalAlign="top">
+                <HexScrew />
+              </Table.Cell>
+              <Table.Cell />
+              <Table.Cell align="end" verticalAlign="top">
+                <HexScrew />
+              </Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell />
+              <Table.Cell className="FlightComputer__Gradient">
+                <Box
                   width="100%"
                   height="100%"
-                />
-              </svg>
-            </Box>
-            <Box mt={-71.5} width="100%" height={32}>
-              <Box width="100%" height="100%" ml={-0.5}>
-                <svg width="100%" height="100%">
-                  <rect
-                    stroke="rgb(7, 7, 7)"
-                    strokeWidth={4}
-                    fill="rgb(17, 17, 17)"
-                    x="10"
-                    y="10"
-                    rx="10"
-                    ry="10"
-                    width="98%"
-                    height="95%"
-                  />
-                </svg>
-              </Box>
-
-              <Table mt={-64} height="100%">
-                <Table.Row>
-                  <Table.Cell align="start" verticalAlign="top" p="12px">
-                    <HexScrew />
-                  </Table.Cell>
-                  <Table.Cell align="end" verticalAlign="top" p="12px">
-                    <HexScrew />
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell align="start" verticalAlign="bottom" p="12px">
-                    <HexScrew />
-                  </Table.Cell>
-                  <Table.Cell align="end" verticalAlign="bottom" p="12px">
-                    <HexScrew />
-                  </Table.Cell>
-                </Table.Row>
-              </Table>
-            </Box>
-
-            <Box mt={-58.5} height={32} width="90%" ml="4%">
-              <Box width="100%" height="100%">
-                <svg width="100%" height="100%">
-                  <defs>
-                    <radialGradient
-                      id="gradient-fill"
-                      x1="0"
-                      y1="0"
-                      x2="800"
-                      y2="0"
-                      gradientUnits="userSpaceOnUse"
-                    >
-                      <stop offset="0" stop-color="#042208" />
-
-                      <stop offset="1" stop-color="#000b02" />
-                    </radialGradient>
-                  </defs>
-
-                  <rect
-                    stroke="#00e94e"
-                    strokeWidth={2}
-                    fill="url(#gradient-fill)"
-                    x="10"
-                    y="10"
-                    rx="5"
-                    ry="5"
-                    width="97%"
-                    height="75%"
-                  />
-                </svg>
-              </Box>
-            </Box>
-          </Stack.Item>
-
-          <Stack.Item align="center" mt={-67.5} width={50} mr={0.2}>
-            <Box height={22.4} p={0.7} m={2} mt={7.5}>
-              <CrtDisplay />
-            </Box>
-          </Stack.Item>
-        </Stack>
+                  className="FlightComputer__Static"
+                >
+                  <Box className="FlightComputer__Screen">
+                    <CrtDisplay />
+                  </Box>
+                </Box>
+              </Table.Cell>
+              <Table.Cell />
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell align="start" verticalAlign="bottom">
+                <HexScrew />
+              </Table.Cell>
+              <Table.Cell />
+              <Table.Cell align="end" verticalAlign="bottom">
+                <HexScrew />
+              </Table.Cell>
+            </Table.Row>
+          </Table>
+        </Box>
       </Window.Content>
     </Window>
   );
 };
 
+const CrtDisplay = (props) => {
+  const { act, data } = useBackend<FlightComputerData>();
+
+  return (
+    <Stack m="6px" pl="1%">
+      <Stack.Item width="54%" className="FlightComputer__MainDivider">
+        <FuelPanel />
+      </Stack.Item>
+      <Stack.Item grow>
+        <Console />
+        <TankReadouts />
+      </Stack.Item>
+    </Stack>
+  );
+};
+
 const FuelPanel = (props) => {
   const { act, data } = useBackend<FlightComputerData>();
 
@@ -152,49 +114,41 @@ const FuelPanel = (props) => {
 
   return (
     <Box pt={2} width="100%">
-      <Stack>
-        <Stack.Item>
+      <Stack className="FlightComputer__Fuel">
+        <Stack.Item className="FlightComputer__Divider">
           <Flex ml={2.5} mb={1} bold fontSize={0.9}>
             <Flex.Item grow>LEFT</Flex.Item>
             <Flex.Item grow>RIGHT</Flex.Item>
           </Flex>
 
-          <Stack mb={1} height={10.3}>
-            <Stack.Item grow fontSize={0.75} mr={0}>
+          <Stack mb={1} height={10.3} pr={1}>
+            <Stack.Item grow fontSize={0.9} mr={0}>
               <Box
                 inline
                 mb={2.5}
                 width="26px"
                 fontSize={1}
                 bold
-                textColor="white"
                 textAlign="right"
               >
                 F -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 3/4 -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 2/4 -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 1/4 -
               </Box>
-              <Box
-                inline
-                width="26px"
-                fontSize={1}
-                bold
-                textColor="white"
-                textAlign="right"
-              >
+              <Box inline width="26px" fontSize={1} bold textAlign="right">
                 E -
               </Box>
             </Stack.Item>
             <Stack.Item ml={0}>
               <Stack.Item height={10}>
-                <ColorBox color="green" height={10} />
+                <ColorBox color="#00e94ef5" height={10} />
               </Stack.Item>
               <Stack.Item mt={-19.5} ml={0.5}>
                 <ColorBox color="darkgreen" height={9.5} width={0.5} />
@@ -202,46 +156,38 @@ const FuelPanel = (props) => {
               <Stack.Item mt={(fuel / max_fuel) * -20} minHeight="0px">
                 <ColorBox
                   height={vtol_detected ? (fuel / max_fuel) * 10 : 0}
-                  color="green"
+                  color="#00e94ef5"
                 />
               </Stack.Item>
             </Stack.Item>
-            <Stack.Divider ml={2} mr={1} height={10} opacity={0.99} />
-            <Stack.Item grow fontSize={0.75}>
+            <Stack.Item className="FlightComputer__Subdivider" />
+            <Stack.Item grow fontSize={0.9}>
               <Box
                 inline
                 mb={2.5}
                 width="26px"
                 fontSize={1}
                 bold
-                textColor="white"
                 textAlign="right"
               >
                 F -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 3/4 -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 2/4 -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 1/4 -
               </Box>
-              <Box
-                inline
-                width="26px"
-                fontSize={1}
-                bold
-                textColor="white"
-                textAlign="right"
-              >
+              <Box inline width="26px" fontSize={1} bold textAlign="right">
                 E -
               </Box>
             </Stack.Item>
             <Stack.Item ml={0} mr={1}>
               <Stack.Item height={10}>
-                <ColorBox color="green" height={10} />
+                <ColorBox color="#00e94ef5" height={10} />
               </Stack.Item>
               <Stack.Item mt={-19.5} ml={0.5}>
                 <ColorBox color="darkgreen" height={9.5} width={0.5} />
@@ -249,12 +195,19 @@ const FuelPanel = (props) => {
               <Stack.Item mt={(fuel / max_fuel) * -20} minHeight="0px">
                 <ColorBox
                   height={vtol_detected ? (fuel / max_fuel) * 10 : 0}
-                  color="green"
+                  color="#00e94ef5"
                 />
               </Stack.Item>
             </Stack.Item>
           </Stack>
-          <Box bold fontSize={0.8} textAlign="center">
+          <Box
+            bold={fuel / max_fuel === 1 ? false : true}
+            fontSize={0.8}
+            textAlign="center"
+            className={
+              fuel / max_fuel === 1 ? 'FlightComputer__TextConfirm' : ''
+            }
+          >
             TANK VOLUME:{' '}
             <AnimatedNumber
               initial={0}
@@ -263,56 +216,48 @@ const FuelPanel = (props) => {
             %
           </Box>
 
-          <Box textAlign="center" bold mt={2} fontFamily="monospace">
+          <Box textAlign="center" bold mt={1.8} fontFamily="monospace">
             FUEL TANK LEVELS
           </Box>
           <Box textAlign="center" bold fontSize={0.7}>
             {vtol_detected ? '[ 16,000L CAPACITY ]' : 'NONE DETECTED'}
           </Box>
         </Stack.Item>
-        <Stack.Divider ml={3} mr={2} />
+
         <Stack.Item verticalAlign="center">
           <Flex ml={2.5} mb={1} bold fontSize={0.9}>
             <Flex.Item grow>CELL</Flex.Item>
             <Flex.Item grow>INPUT</Flex.Item>
           </Flex>
 
-          <Stack mb={1} height={10.3}>
-            <Stack.Item grow fontSize={0.75}>
+          <Stack mb={1} height={10.3} pr={1}>
+            <Stack.Item fontSize={0.9}>
               <Box
                 inline
-                ml={-1}
+                ml={-0.5}
                 mb={2.5}
                 width="30px"
                 bold
-                textColor="white"
                 textAlign="right"
               >
                 2.8 -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 2.1 -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 1.4 -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 0.7 -
               </Box>
-              <Box
-                inline
-                width="30px"
-                bold
-                ml={-1}
-                textColor="white"
-                textAlign="right"
-              >
+              <Box inline width="30px" bold ml={-0.5} textAlign="right">
                 0 -
               </Box>
             </Stack.Item>
             <Stack.Item ml={0}>
               <Stack.Item height={10}>
-                <ColorBox color="green" height={10} />
+                <ColorBox color="#00e94ef5" height={10} />
               </Stack.Item>
               <Stack.Item mt={-19.5} ml={0.5}>
                 <ColorBox color="darkgreen" height={9.5} width={0.5} />
@@ -320,38 +265,38 @@ const FuelPanel = (props) => {
               <Stack.Item mt={(battery / max_battery) * -20}>
                 <ColorBox
                   height={vtol_detected ? (battery / max_battery) * 10 : 0}
-                  color="green"
+                  color="#00e94ef5"
                 />
               </Stack.Item>
             </Stack.Item>
-            <Stack.Divider ml={2.5} mr={2.5} height={10} opacity={0.99} />
-            <Stack.Item grow fontSize={0.75}>
-              <Box inline ml={-2} mb={2.5} width="40px" bold textColor="white">
+            <Stack.Item className="FlightComputer__Subdivider" />
+            <Stack.Item grow fontSize={0.8} mr={0.5}>
+              <Box inline ml={-0.5} mb={2.5} width="40px" bold>
                 1.2kW -
               </Box>
-              <Box inline mb={2.5} ml={-2} width="40px" bold textColor="white">
+              <Box inline className="FlightComputer__Energynotch" bold>
                 0.9kW -
               </Box>
-              <Box inline mb={2.5} ml={-2} width="40px" bold textColor="white">
+              <Box inline className="FlightComputer__Energynotch" bold>
                 0.6kW -
               </Box>
-              <Box inline mb={2.5} ml={-2} width="40px" bold textColor="white">
+              <Box inline className="FlightComputer__Energynotch" bold>
                 0.9kW -
               </Box>
               <Box
                 inline
                 mb={2.5}
-                ml={-0.4}
                 width="40px"
                 bold
-                textColor="white"
+                textAlign="right"
+                ml={-0.6}
               >
                 0kW -
               </Box>
             </Stack.Item>
             <Stack.Item ml={0} mr={2}>
               <Stack.Item height={10}>
-                <ColorBox color="green" height={10} />
+                <ColorBox color="#00e94ef5" height={10} />
               </Stack.Item>
               <Stack.Item mt={-19.5} ml={0.5}>
                 <ColorBox
@@ -366,7 +311,15 @@ const FuelPanel = (props) => {
               </Stack.Item>
             </Stack.Item>
           </Stack>
-          <Box bold fontSize={0.8} textAlign="center">
+          <Box
+            bold={battery / max_battery === 1 ? false : true}
+            fontSize={0.8}
+            textAlign="center"
+            width="95%"
+            className={
+              battery / max_battery === 1 ? 'FlightComputer__TextConfirm' : ''
+            }
+          >
             APROX CHARGE:{' '}
             <AnimatedNumber
               initial={0}
@@ -375,20 +328,20 @@ const FuelPanel = (props) => {
             %
           </Box>
 
-          <Box textAlign="center" bold mt={2} fontFamily="monospace">
+          <Box textAlign="center" bold ml={-1} mt={1.7} fontFamily="monospace">
             POWERCELL CHARGE
           </Box>
-          <Box textAlign="center" bold fontSize={0.7}>
+          <Box textAlign="center" bold ml={-1} fontSize={0.7}>
             {vtol_detected ? '[ 2x Li BATTERY, KWh ]' : 'NONE DETECTED'}
           </Box>
         </Stack.Item>
       </Stack>
       <Button
         align="center"
+        className="FlightComputer__FuelButton"
         icon={!vtol_detected || fueling ? 'ban' : 'tint'}
         fluid
         bold
-        color={!vtol_detected && 'transperant'}
         onClick={() =>
           act(vtol_detected ? (fueling ? 'stop' : 'start') + '_fueling' : '')
         }
@@ -406,20 +359,30 @@ const FuelPanel = (props) => {
   );
 };
 
-const CrtDisplay = (props) => {
+const Console = (props) => {
   const { act, data } = useBackend<FlightComputerData>();
-
+  let { vtol_detected, fueling } = data;
   return (
-    <Stack>
-      <Stack.Item width="55%">
-        <FuelPanel />
-      </Stack.Item>
-      <Stack.Divider opacity={0.99} mr={1} />
-      <Stack.Item grow>
-        <Console />
-        <TankReadouts />
-      </Stack.Item>
-    </Stack>
+    <Box height={10.75} opacity={0.99}>
+      <Box mt={1} mb={1} className="FlightComputer__HorizontalDivider" />
+      <Box bold fontFamily="monospace" fontSize={1.1}>
+        {vtol_detected ? 'Linked aircraft detected:' : 'No aircraft detected!'}
+      </Box>
+      <Box bold>{vtol_detected && '[ AD-71E BLACKFOOT ]'}</Box>
+      <Box bold fontFamily="monospace" fontSize={1.1} mt={1.3}>
+        Refuel and recharge status:
+      </Box>
+      <Box bold fontSize={1.1}>
+        {fueling ? '[ ENGAGED ]' : '[ DISENGAGED ]'}
+      </Box>
+      <Box bold fontFamily="monospace" fontSize={1.1} mt={1.3}>
+        Primary resupply systems:
+      </Box>
+      <Box bold fontSize={0.95} mb={1.3}>
+        [ SYSTEMS NOMINAL ]
+      </Box>
+      <Box className="FlightComputer__HorizontalDivider" />
+    </Box>
   );
 };
 
@@ -459,6 +422,7 @@ const TankReadouts = (props) => {
             INT. PRESSURE
           </Box>
           <RoundGauge
+            className="FlightComputer__Readout"
             value={randomNumber(945, 950)}
             minValue={800}
             maxValue={1000}
@@ -476,6 +440,7 @@ const TankReadouts = (props) => {
             STORED FUEL
           </Box>
           <RoundGauge
+            className="FlightComputer__Readout"
             value={vtol_detected ? 35000 - fuel * 27 : 36000}
             minValue={0}
             maxValue={40000}
@@ -488,34 +453,7 @@ const TankReadouts = (props) => {
           />
         </Flex.Item>
       </Flex>
-      <Divider />
-    </Box>
-  );
-};
-
-const Console = (props) => {
-  const { act, data } = useBackend<FlightComputerData>();
-  let { vtol_detected, fueling } = data;
-  return (
-    <Box height={10.75} opacity={0.99}>
-      <Divider />
-      <Box bold fontFamily="monospace" fontSize={1.1}>
-        {vtol_detected ? 'Linked aircraft detected:' : 'No aircraft detected!'}
-      </Box>
-      <Box bold>{vtol_detected && '[ AD-71E BLACKFOOT ]'}</Box>
-      <Box bold fontFamily="monospace" fontSize={1.1} mt={1.3}>
-        Refuel and recharge status:
-      </Box>
-      <Box bold color={fueling ? 'default' : 'red'} fontSize={1.1}>
-        {fueling ? '[ ENGAGED ]' : '[ DISENGAGED ]'}
-      </Box>
-      <Box bold fontFamily="monospace" fontSize={1.1} mt={1.3}>
-        Primary resupply systems:
-      </Box>
-      <Box bold fontSize={0.95} mb={1.3}>
-        [ SYSTEMS NOMINAL ]
-      </Box>
-      <Divider />
+      <Box mb={1} className="FlightComputer__HorizontalDivider" />
     </Box>
   );
 };
diff --git a/tgui/packages/tgui/styles/interfaces/FlightComputer.scss b/tgui/packages/tgui/styles/interfaces/FlightComputer.scss
new file mode 100644
index 000000000000..eaf65cf9d039
--- /dev/null
+++ b/tgui/packages/tgui/styles/interfaces/FlightComputer.scss
@@ -0,0 +1,96 @@
+.FlightComputer__Background {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: black;
+}
+
+.FlightComputer__Casing {
+  height: 100%;
+  border-radius: 5px;
+  border: 2px outset rgba(0, 0, 0, 0.685);
+  background-color: #111111;
+  padding: 6px;
+  max-width: 700px;
+  max-height: 410px;
+}
+
+.FlightComputer__Gradient {
+  background: radial-gradient(#042208, #000b02);
+}
+
+.FlightComputer__Static {
+  width: 100%;
+  height: 100%;
+  outline: 3px inset #111111;
+  outline-offset: 2px;
+  border-radius: 5px;
+  border: 2px ridge #00e94e;
+  background:
+    linear-gradient(hsla(0, 6%, 7%, 0) 50%, hsla(0, 0%, 0%, 0.25) 50%),
+    linear-gradient(
+      90deg,
+      hsla(0, 100%, 50%, 0.06),
+      hsla(120, 100%, 50%, 0.02),
+      hsla(240, 100%, 50%, 0.06)
+    );
+  background-size:
+    100% 2px,
+    3px 100%;
+  .FlightComputer__Screen {
+    mix-blend-mode: color-dodge;
+    background: radial-gradient(#05a11ab7, #00250786);
+    width: 100%;
+    height: 100%;
+    padding-left: 1%;
+    padding-right: 2%;
+    color: #00e94e;
+    font-family: monospace;
+  }
+}
+
+.FlightComputer__TextConfirm {
+  color: #000b02;
+  background-color: #00e94e;
+}
+
+.FlightComputer__FuelButton {
+  border: 1px solid #00e94e;
+  color: #00e94e;
+  background-color: transparent;
+}
+
+.FlightComputer__Readout {
+  filter: brightness(1.5);
+}
+
+.FlightComputer__MainDivider {
+  border-right: 2px solid #00e94ed3;
+  margin-right: 6px;
+}
+
+.FlightComputer__HorizontalDivider {
+  width: 100%;
+  border-bottom: 2px solid #00e94ee3;
+}
+
+.FlightComputer__Fuel {
+  .FlightComputer__Divider {
+    border-right: 2px solid #00e94ed3;
+    padding-right: 6px;
+    margin-right: 6px;
+  }
+  .FlightComputer__Subdivider {
+    border-right: 2px solid #00e94ed3;
+    padding-right: 6px;
+    margin-right: 6px;
+  }
+  .FlightComputer__Fuelnotch {
+    width: 30px;
+    margin-bottom: 14px;
+  }
+  .FlightComputer__Energynotch {
+    width: 40px;
+    margin-bottom: 17px;
+  }
+}
diff --git a/tgui/packages/tgui/styles/main.scss b/tgui/packages/tgui/styles/main.scss
index 7547c6e29b55..0425b5403f98 100644
--- a/tgui/packages/tgui/styles/main.scss
+++ b/tgui/packages/tgui/styles/main.scss
@@ -94,6 +94,7 @@
 @include meta.load-css('./interfaces/TacticalMap.scss');
 @include meta.load-css('./interfaces/StripMenu.scss');
 @include meta.load-css('./interfaces/CrewManifest.scss');
+@include meta.load-css('./interfaces/FlightComputer.scss');
 
 // Layouts
 @include meta.load-css('./layouts/Layout.scss');