diff --git a/code/modules/modular_computers/file_system/programs/raptordex.dm b/code/modules/modular_computers/file_system/programs/raptordex.dm
index b54e847ce1f..d26151f9c29 100644
--- a/code/modules/modular_computers/file_system/programs/raptordex.dm
+++ b/code/modules/modular_computers/file_system/programs/raptordex.dm
@@ -5,7 +5,7 @@
 	program_open_overlay = "bountyboard"
 	extended_desc = "Scan and analyze raptor genes."
 	size = 2
-	tgui_id = "RaptorDex"
+	tgui_id = "NtosRaptorDex"
 	program_icon = "crow"
 	can_run_on_flags = PROGRAM_PDA
 	/// Raptor scan data we have stored
diff --git a/tgui/packages/tgui/interfaces/NtosRaptorDex.tsx b/tgui/packages/tgui/interfaces/NtosRaptorDex.tsx
new file mode 100644
index 00000000000..e677f7c7449
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/NtosRaptorDex.tsx
@@ -0,0 +1,12 @@
+import { NtosWindow } from '../layouts';
+import { RaptorDexContent } from './RaptorDex';
+
+export const NtosRaptorDex = (props) => {
+  return (
+    <NtosWindow width={770} height={370}>
+      <NtosWindow.Content scrollable>
+        <RaptorDexContent />
+      </NtosWindow.Content>
+    </NtosWindow>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/RaptorDex.tsx b/tgui/packages/tgui/interfaces/RaptorDex.tsx
index 27724a533b3..9192f9c3676 100644
--- a/tgui/packages/tgui/interfaces/RaptorDex.tsx
+++ b/tgui/packages/tgui/interfaces/RaptorDex.tsx
@@ -35,6 +35,16 @@ type Data = {
 };
 
 export const RaptorDex = (props) => {
+  return (
+    <Window title="Raptor Data" width={770} height={370} theme="hackerman">
+      <Window.Content>
+        <RaptorDexContent />
+      </Window.Content>
+    </Window>
+  );
+};
+
+export const RaptorDexContent = (props) => {
   const { act, data } = useBackend<Data>();
   const {
     raptor_scan,
@@ -61,133 +71,121 @@ export const RaptorDex = (props) => {
   } = data;
 
   if (!raptor_scan) {
-    return (
-      <Window title="Raptor Data" width={625} height={420} theme="hackerman">
-        <Window.Content>
-          <Modal textAlign="center">No scan data present.</Modal>
-        </Window.Content>
-      </Window>
-    );
+    return <Modal textAlign="center">No scan data present.</Modal>;
   }
 
   return (
-    <Window title="Raptor Data" width={770} height={370} theme="hackerman">
-      <Window.Content>
-        <Stack>
-          {' '}
-          <Stack.Item width="33%">
-            <Section textAlign="center" title={capitalizeAll(raptor_color)}>
-              <Image
-                src={`data:image/jpeg;base64,${raptor_image}`}
-                height="128px"
-                width="224px"
-                style={{
-                  verticalAlign: 'middle',
-                  borderRadius: '1em',
-                  border: '1px solid green',
+    <Stack>
+      {' '}
+      <Stack.Item width="33%">
+        <Section textAlign="center" title={capitalizeAll(raptor_color)}>
+          <Image
+            src={`data:image/jpeg;base64,${raptor_image}`}
+            height="128px"
+            width="224px"
+            style={{
+              verticalAlign: 'middle',
+              borderRadius: '1em',
+              border: '1px solid green',
+            }}
+          />
+        </Section>
+        <Section fill title="Description">
+          {raptor_description}
+        </Section>
+      </Stack.Item>
+      <Stack.Item width="33%" textAlign="center">
+        <Section title="Stats">
+          <LabeledList>
+            <LabeledList.Item label="Health">
+              {raptor_health} / {raptor_max_health}
+            </LabeledList.Item>
+            <LabeledList.Item label="Attack">{raptor_attack}</LabeledList.Item>
+            <LabeledList.Item label="Speed">
+              {Math.round(10 / Math.max(raptor_speed, 0.5))}
+            </LabeledList.Item>
+            <LabeledList.Item label="Gender">
+              {capitalizeFirst(raptor_gender)}
+            </LabeledList.Item>
+          </LabeledList>
+        </Section>
+        <Section title="Inherit Modifiers">
+          <LabeledList>
+            <LabeledList.Item label="Health">
+              <ProgressBar
+                value={inherited_health}
+                maxValue={inherited_health_max}
+                ranges={{
+                  good: [0.5 * inherited_health_max, Infinity],
+                  average: [0, inherited_health_max * 0.5],
+                  bad: [-Infinity, 0],
                 }}
               />
-            </Section>
-            <Section fill title="Description">
-              {raptor_description}
-            </Section>
-          </Stack.Item>
-          <Stack.Item width="33%" textAlign="center">
-            <Section title="Stats">
-              <LabeledList>
-                <LabeledList.Item label="Health">
-                  {raptor_health} / {raptor_max_health}
-                </LabeledList.Item>
-                <LabeledList.Item label="Attack">
-                  {raptor_attack}
-                </LabeledList.Item>
-                <LabeledList.Item label="Speed">
-                  {Math.round(10 / Math.max(raptor_speed, 0.5))}
-                </LabeledList.Item>
-                <LabeledList.Item label="Gender">
-                  {capitalizeFirst(raptor_gender)}
-                </LabeledList.Item>
-              </LabeledList>
-            </Section>
-            <Section title="Inherit Modifiers">
-              <LabeledList>
-                <LabeledList.Item label="Health">
-                  <ProgressBar
-                    value={inherited_health}
-                    maxValue={inherited_health_max}
-                    ranges={{
-                      good: [0.5 * inherited_health_max, Infinity],
-                      average: [0, inherited_health_max * 0.5],
-                      bad: [-Infinity, 0],
-                    }}
-                  />
-                </LabeledList.Item>
-                <LabeledList.Item label="Attack">
-                  <ProgressBar
-                    value={inherited_attack}
-                    maxValue={inherited_attack_max}
-                    ranges={{
-                      good: [0.5 * inherited_attack_max, Infinity],
-                      average: [0, inherited_attack_max * 0.5],
-                      bad: [-Infinity, 0],
-                    }}
-                  />
-                </LabeledList.Item>
-                <LabeledList.Item label="Speed">
-                  <ProgressBar
-                    value={inherited_speed}
-                    maxValue={inherited_speed_max}
-                    ranges={{
-                      good: [0.5 * inherited_speed_max, Infinity],
-                      average: [0, inherited_speed_max * 0.5],
-                      bad: [-Infinity, 0],
-                    }}
-                  />
-                </LabeledList.Item>
-                <LabeledList.Item label="Capability">
-                  <ProgressBar
-                    value={inherited_ability}
-                    maxValue={inherited_ability_max}
-                    ranges={{
-                      good: [0.5 * inherited_ability_max, Infinity],
-                      average: [0, inherited_ability_max * 0.5],
-                      bad: [-Infinity, 0],
-                    }}
-                  />
-                </LabeledList.Item>
-                <LabeledList.Item label="Growth Speed">
-                  <ProgressBar
-                    value={inherited_growth}
-                    maxValue={inherited_growth_max}
-                    ranges={{
-                      good: [0.5 * inherited_growth_max, Infinity],
-                      average: [0, inherited_growth_max * 0.5],
-                      bad: [-Infinity, 0],
-                    }}
-                  />
-                </LabeledList.Item>
-              </LabeledList>
-            </Section>
-          </Stack.Item>
-          <Stack.Item width="33%">
-            <Section textAlign="center" title="Friendship bond">
-              <Image
-                mt={-9.5}
-                src={`data:image/jpeg;base64,${raptor_happiness}`}
-                height="72px"
-                width="72px"
+            </LabeledList.Item>
+            <LabeledList.Item label="Attack">
+              <ProgressBar
+                value={inherited_attack}
+                maxValue={inherited_attack_max}
+                ranges={{
+                  good: [0.5 * inherited_attack_max, Infinity],
+                  average: [0, inherited_attack_max * 0.5],
+                  bad: [-Infinity, 0],
+                }}
               />
-            </Section>
-            <Section textAlign="center" title="Inherited Traits">
-              <Stack vertical>
-                {inherited_traits.map((trait, index) => (
-                  <Stack.Item key={index}>{trait}</Stack.Item>
-                ))}
-              </Stack>
-            </Section>
-          </Stack.Item>
-        </Stack>
-      </Window.Content>
-    </Window>
+            </LabeledList.Item>
+            <LabeledList.Item label="Speed">
+              <ProgressBar
+                value={inherited_speed}
+                maxValue={inherited_speed_max}
+                ranges={{
+                  good: [0.5 * inherited_speed_max, Infinity],
+                  average: [0, inherited_speed_max * 0.5],
+                  bad: [-Infinity, 0],
+                }}
+              />
+            </LabeledList.Item>
+            <LabeledList.Item label="Capability">
+              <ProgressBar
+                value={inherited_ability}
+                maxValue={inherited_ability_max}
+                ranges={{
+                  good: [0.5 * inherited_ability_max, Infinity],
+                  average: [0, inherited_ability_max * 0.5],
+                  bad: [-Infinity, 0],
+                }}
+              />
+            </LabeledList.Item>
+            <LabeledList.Item label="Growth Speed">
+              <ProgressBar
+                value={inherited_growth}
+                maxValue={inherited_growth_max}
+                ranges={{
+                  good: [0.5 * inherited_growth_max, Infinity],
+                  average: [0, inherited_growth_max * 0.5],
+                  bad: [-Infinity, 0],
+                }}
+              />
+            </LabeledList.Item>
+          </LabeledList>
+        </Section>
+      </Stack.Item>
+      <Stack.Item width="33%">
+        <Section textAlign="center" title="Friendship bond">
+          <Image
+            mt={-9.5}
+            src={`data:image/jpeg;base64,${raptor_happiness}`}
+            height="72px"
+            width="72px"
+          />
+        </Section>
+        <Section textAlign="center" title="Inherited Traits">
+          <Stack vertical>
+            {inherited_traits.map((trait, index) => (
+              <Stack.Item key={index}>{trait}</Stack.Item>
+            ))}
+          </Stack>
+        </Section>
+      </Stack.Item>
+    </Stack>
   );
 };