diff --git a/tgui/packages/tgui/interfaces/ClockworkSlab.js b/tgui/packages/tgui/interfaces/ClockworkSlab.js
index 3246a8b067..55674ff211 100644
--- a/tgui/packages/tgui/interfaces/ClockworkSlab.js
+++ b/tgui/packages/tgui/interfaces/ClockworkSlab.js
@@ -1,124 +1,157 @@
+import { Window } from 'inferno';
 import { useBackend } from '../backend';
-import { Box, Section, LabeledList, Button, ProgressBar } from '../components';
-import { Fragment } from 'inferno';
-import { Window } from '../layouts';
+import { Button, LabeledList, Section, Tabs, Input } from '../components';
 
-export const Sleeper = (props, context) => {
-  const { act, data } = useBackend(context);
 
+export const ClockworkSlab = props => {
+  const { act, data } = useBackend(props);
   const {
-    open,
-    occupant = {},
-    occupied,
+    recollection,
+    rec_text,
+    recollection_categories,
+    rec_section,
+    rec_binds,
   } = data;
 
-  const preSortChems = data.chems || [];
-  const chems = preSortChems.sort((a, b) => {
-    const descA = a.name.toLowerCase();
-    const descB = b.name.toLowerCase();
-    if (descA < descB) {
-      return -1;
-    }
-    if (descA > descB) {
-      return 1;
-    }
-    return 0;
-  });
-
-  const damageTypes = [
-    {
-      label: 'Brute',
-      type: 'bruteLoss',
-    },
-    {
-      label: 'Burn',
-      type: 'fireLoss',
-    },
-    {
-      label: 'Toxin',
-      type: 'toxLoss',
-    },
-    {
-      label: 'Oxygen',
-      type: 'oxyLoss',
-    },
-  ];
-
   return (
-    <Window>
-      <Window.Content>
-        <Section
-          title={occupant.name ? occupant.name : 'No Occupant'}
-          minHeight="210px"
-          buttons={!!occupant.stat && (
-            <Box
-              inline
-              bold
-              color={occupant.statstate}>
-              {occupant.stat}
-            </Box>
-          )}>
-          {!!occupied && (
-            <Fragment>
-              <ProgressBar
-                value={occupant.health}
-                minValue={occupant.minHealth}
-                maxValue={occupant.maxHealth}
-                ranges={{
-                  good: [50, Infinity],
-                  average: [0, 50],
-                  bad: [-Infinity, 0],
-                }} />
-              <Box mt={1} />
-              <LabeledList>
-                {damageTypes.map(type => (
-                  <LabeledList.Item
-                    key={type.type}
-                    label={type.label}>
-                    <ProgressBar
-                      value={occupant[type.type]}
-                      minValue={0}
-                      maxValue={occupant.maxHealth}
-                      color="bad" />
-                  </LabeledList.Item>
-                ))}
-                <LabeledList.Item
-                  label="Cells"
-                  color={occupant.cloneLoss ? 'bad' : 'good'}>
-                  {occupant.cloneLoss ? 'Damaged' : 'Healthy'}
-                </LabeledList.Item>
-                <LabeledList.Item
-                  label="Brain"
-                  color={occupant.brainLoss ? 'bad' : 'good'}>
-                  {occupant.brainLoss ? 'Abnormal' : 'Healthy'}
-                </LabeledList.Item>
-              </LabeledList>
-            </Fragment>
-          )}
+    <Window style="clockwork">
+      <Section>
+        <Button
+          content={recollection ? "Recital" : "Recollection"}
+          onClick={() => act('toggle')}
+        />
+      </Section>
+      {!!recollection && (
+        <Section title="Recollection">
+          {rec_text}
+          {recollection_categories.map(categories => {
+            return (
+              <Window>
+                <br key='weh'/>
+                <Button
+                  content={`${categories.name} - ${categories.desc}`}
+                  onClick={() => act('rec_category', {
+                    "category": categories.name,
+                  })} />
+              </Window>
+            );
+          })}
+          {rec_section}
+          {rec_binds}
         </Section>
-        <Section
-          title="Medicines"
-          minHeight="205px"
-          buttons={(
-            <Button
-              icon={open ? 'door-open' : 'door-closed'}
-              content={open ? 'Open' : 'Closed'}
-              onClick={() => act('door')} />
-          )}>
-          {chems.map(chem => (
-            <Button
-              key={chem.name}
-              icon="flask"
-              content={chem.name}
-              disabled={!(occupied && chem.allowed)}
-              width="140px"
-              onClick={() => act('inject', {
-                chem: chem.id,
-              })}
-            />
-          ))}
-        </Section>
-      </Window.Content>
+      )}
+      {recollection && (
+        <Window>
+          <Section title="Power">
+            {data.power}
+          </Section>
+          <Section title="Recital">
+            {data.tier_info}
+            {data.scripturecolors}
+            <Tabs>
+              <Tabs.Tab
+                key="driver"
+                label="Driver">
+                {() => (
+                  <Section>
+                    <LabeledList>
+                      {data.scripture.driver.map(script => { // HEY! Make sure the data gets built byondside!
+                        return (
+                          <LabeledList.Item
+                            key={script.name}
+                            label={script.name} // should i just md5 this and cut
+                            buttons={(
+                              <Window>
+                                <Button
+                                  content={`Recite (${script.required} W)`}
+                                  onClick={() => act('recite', {
+                                    'category': script.name,
+                                  })} />
+                                <Button
+                                  content={script.quickbind ? `Unbind ${script.quickbind}` : 'Quickbind'}
+                                  onClick={() => act('bind', {
+                                    'category': script.name,
+                                  })} />
+                              </Window>
+                            )}>
+                            {`${script.descname} ${script.invokers}`}
+                          </LabeledList.Item>
+                        );
+                      })}
+                    </LabeledList>
+                  </Section>
+                )}
+              </Tabs.Tab>
+              <Tabs.Tab
+                key="script"
+                label="Script">
+                {() => (
+                  <Section>
+                    <LabeledList>
+                      {data.scripture.script.map(script => { // HEY! Make sure the data gets built byondside!
+                        return (
+                          <LabeledList.Item
+                            key={script.name}
+                            label={script.name} // should i just md5 this and cut
+                            buttons={(
+                              <Window>
+                                <Button
+                                  content={`Recite (${script.required} W)`}
+                                  onClick={() => act('recite', {
+                                    'category': script.name,
+                                  })} />
+                                <Button
+                                  content={script.quickbind ? `Unbind ${script.quickbind}` : 'Quickbind'}
+                                  onClick={() => act('bind', {
+                                    'category': script.name,
+                                  })} />
+                              </Window>
+                            )}>
+                            {`${script.descname} ${script.invokers}`}
+                          </LabeledList.Item>
+                        );
+                      })}
+                    </LabeledList>
+                  </Section>
+                )}
+              </Tabs.Tab>
+              <Tabs.Tab
+                key="application"
+                label="Application">
+                {() => (
+                  <Section>
+                    <LabeledList>
+                      {data.scripture.application.map(script => { // HEY! Make sure the data gets built byondside!
+                        return (
+                          <LabeledList.Item
+                            key={script.name}
+                            label={script.name} // should i just md5 this and cut
+                            buttons={(
+                              <Window>
+                                <Button
+                                  content={`Recite (${script.required} W)`}
+                                  onClick={() => act('recite', {
+                                    'category': script.name,
+                                  })} />
+                                <Button
+                                  content={script.quickbind ? `Unbind ${script.quickbind}` : 'Quickbind'}
+                                  onClick={() => act('bind', {
+                                    'category': script.name,
+                                  })} />
+                              </Window>
+                            )}>
+                            {`${script.descname} ${script.invokers}`}
+                          </LabeledList.Item>
+                        );
+                      })}
+                    </LabeledList>
+                  </Section>
+                )}
+              </Tabs.Tab>
+            </Tabs>
+          </Section>
+        </Window>
+      )}
     </Window>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/Sleeper.js b/tgui/packages/tgui/interfaces/Sleeper.js
index a01167039b..5e6d2958e7 100644
--- a/tgui/packages/tgui/interfaces/Sleeper.js
+++ b/tgui/packages/tgui/interfaces/Sleeper.js
@@ -1,6 +1,5 @@
 import { useBackend } from '../backend';
 import { Box, Section, LabeledList, Button, ProgressBar, AnimatedNumber } from '../components';
-import { Fragment } from 'inferno';
 import { Window } from '../layouts';
 
 export const Sleeper = props => {
@@ -70,7 +69,7 @@ export const Sleeper = props => {
             </Box>
           )}>
           {!!occupied && (
-            <Fragment>
+            <Window>
               <ProgressBar
                 value={occupant.health}
                 minValue={occupant.minHealth}
@@ -113,7 +112,7 @@ export const Sleeper = props => {
                   {occupant.brainLoss ? 'Abnormal' : 'Healthy'}
                 </LabeledList.Item>
               </LabeledList>
-            </Fragment>
+            </Window>
           )}
         </Section>
         <Section title="Chemical Analysis">