diff --git a/packages/app/src/components/app/index.jsx b/packages/app/src/components/app/index.jsx
index d76ca0f..ea6fe9d 100644
--- a/packages/app/src/components/app/index.jsx
+++ b/packages/app/src/components/app/index.jsx
@@ -12,7 +12,7 @@ import {
 import {UserRequired} from '@flecks/user/local';
 import '@humus/app/scss/index.scss';
 
-import Ui from '../valent-ui';
+import Ui from './ui';
 import Login from './login';
 import Overview from './overview';
 import Play from './play';
diff --git a/packages/app/src/components/valent-ui/arrow-inout.png b/packages/app/src/components/app/ui/arrow-inout.png
similarity index 100%
rename from packages/app/src/components/valent-ui/arrow-inout.png
rename to packages/app/src/components/app/ui/arrow-inout.png
diff --git a/packages/app/src/components/valent-ui/context.js b/packages/app/src/components/app/ui/context.js
similarity index 100%
rename from packages/app/src/components/valent-ui/context.js
rename to packages/app/src/components/app/ui/context.js
diff --git a/packages/app/src/components/app/ui/index.jsx b/packages/app/src/components/app/ui/index.jsx
new file mode 100644
index 0000000..9489d3c
--- /dev/null
+++ b/packages/app/src/components/app/ui/index.jsx
@@ -0,0 +1,47 @@
+import {
+  PropTypes,
+  React,
+  useContext,
+  useEffect,
+  useRef,
+} from '@flecks/react';
+
+import Context from './context';
+import styles from './index.module.scss';
+
+export {Context};
+
+const Ui = ({children}) => {
+  const [width, height] = useContext(Context);
+  const $ui = useRef();
+  useEffect(() => {
+    if (!$ui.current) {
+      return undefined;
+    }
+    const onResize = () => {
+      const {innerWidth, innerHeight} = window;
+      const ratio = innerWidth / innerHeight;
+      const targetRatio = width / height;
+      $ui.current.style.setProperty(
+        '--scale',
+        ratio <= targetRatio ? innerWidth / width : innerHeight / height,
+      );
+    };
+    window.addEventListener('resize', onResize);
+    onResize();
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, [$ui, height, width]);
+  return (
+    <div className={styles.ui} ref={$ui} style={{height: `${height}px`, width: `${width}px`}}>
+      {children}
+    </div>
+  );
+};
+
+Ui.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Ui;
diff --git a/packages/app/src/components/valent-ui/index.scss b/packages/app/src/components/app/ui/index.module.scss
similarity index 94%
rename from packages/app/src/components/valent-ui/index.scss
rename to packages/app/src/components/app/ui/index.module.scss
index dc1db40..048d80e 100644
--- a/packages/app/src/components/valent-ui/index.scss
+++ b/packages/app/src/components/app/ui/index.module.scss
@@ -1,4 +1,4 @@
-.valent-ui {
+.ui {
   display: inline-block;
   left: 50%;
   overflow: hidden;
diff --git a/packages/app/src/components/valent-ui/index.jsx b/packages/app/src/components/valent-ui/index.jsx
deleted file mode 100644
index 6e4846e..0000000
--- a/packages/app/src/components/valent-ui/index.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import './index.scss';
-
-import {
-  PropTypes,
-  React,
-  useContext,
-  useEffect,
-  useRef,
-} from '@flecks/react';
-
-import Context from './context';
-
-export {Context};
-
-const ValentUi = ({children}) => {
-  const [width, height] = useContext(Context);
-  const $ui = useRef();
-  useEffect(() => {
-    if (!$ui.current) {
-      return undefined;
-    }
-    const onResize = () => {
-      const RATIO = width / height;
-      const {innerWidth, innerHeight} = window;
-      const ratio = innerWidth / innerHeight;
-      let scale;
-      if (ratio < RATIO) {
-        scale = innerWidth / width;
-      }
-      else if (ratio > RATIO) {
-        scale = innerHeight / height;
-      }
-      else {
-        scale = innerWidth / width;
-      }
-      $ui.current.style.setProperty('--scale', scale);
-    };
-    window.addEventListener('resize', onResize);
-    onResize();
-    return () => window.removeEventListener('resize', onResize);
-  }, [$ui, height, width]);
-  return (
-    <div
-      className="valent-ui"
-      ref={$ui}
-      style={{
-        height: `${height}px`,
-        width: `${width}px`,
-      }}
-    >
-      {children}
-    </div>
-  );
-};
-
-ValentUi.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default ValentUi;
diff --git a/packages/app/src/index.js b/packages/app/src/index.js
index 54e285b..114e4a5 100644
--- a/packages/app/src/index.js
+++ b/packages/app/src/index.js
@@ -2,7 +2,7 @@ import {Hooks} from '@flecks/core';
 
 import App from './components/app';
 import {selfEntity} from './state';
-import Ui, {Context} from './components/valent-ui';
+import Ui, {Context} from './components/app/ui';
 
 export * from './hooks';
 export * from './state';