diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/elements.js b/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/elements.js
index 467339dd394..34a57f0272d 100755
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/elements.js
+++ b/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/elements.js
@@ -18,6 +18,15 @@ export const SandboxName = styled.span`
   text-overflow: ellipsis;
 `;
 
+export const SandboxForm = styled.form`
+  position: 'absolute';
+  left: 0;
+  right: 0;
+  display: 'flex';
+  align-items: 'center';
+  justify-content: 'center';
+`;
+
 export const SandboxInput = styled(AutosizeInput)`
   input {
     display: inline-block;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/index.js b/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/index.js
deleted file mode 100755
index e4017894e71..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/index.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import React from 'react';
-import { basename } from 'path';
-import { inject, observer } from 'app/componentConnectors';
-import Media from 'react-media';
-
-import { Spring } from 'react-spring/renderprops';
-
-import track from '@codesandbox/common/lib/utils/analytics';
-import { ESC } from '@codesandbox/common/lib/utils/keycodes';
-import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
-import { Container, SandboxName, SandboxInput, FolderName } from './elements';
-
-class CollectionInfo extends React.Component {
-  state = {
-    updatingName: false,
-    nameValue: '',
-  };
-
-  sandboxName = () => getSandboxName(this.props.sandbox) || 'Untitled';
-
-  updateSandboxInfo = () => {
-    this.props.signals.workspace.sandboxInfoUpdated();
-
-    this.setState({
-      updatingName: false,
-    });
-  };
-
-  submitNameChange = e => {
-    e.preventDefault();
-    this.updateSandboxInfo();
-
-    track('Change Sandbox Name From Header');
-  };
-
-  handleNameClick = () => {
-    this.setState({
-      updatingName: true,
-      nameValue: this.sandboxName(),
-    });
-  };
-
-  handleKeyUp = e => {
-    if (e.keyCode === ESC) {
-      this.updateSandboxInfo();
-    }
-  };
-
-  handleBlur = () => {
-    this.updateSandboxInfo();
-  };
-
-  handleInputUpdate = e => {
-    this.props.signals.workspace.valueChanged({
-      field: 'title',
-      value: e.target.value,
-    });
-
-    this.setState({
-      nameValue: e.target.value,
-    });
-  };
-
-  render() {
-    const { sandbox, isLoggedIn, signals } = this.props;
-    const { nameValue, updatingName } = this.state;
-
-    const value = nameValue !== 'Untitled' && updatingName ? nameValue : '';
-
-    const folderName = sandbox.collection
-      ? basename(sandbox.collection.path) ||
-        (sandbox.team ? sandbox.team.name : 'My Sandboxes')
-      : 'My Sandboxes';
-
-    return (
-      <Spring
-        from={{
-          opacity: 1,
-        }}
-        to={
-          updatingName
-            ? {
-                opacity: 0,
-                pointerEvents: 'none',
-              }
-            : {
-                opacity: 1,
-                pointerEvents: 'initial',
-              }
-        }
-      >
-        {style => (
-          <Media
-            query="(min-width: 826px)"
-            render={() => (
-              <Container>
-                <Media
-                  query="(min-width: 950px)"
-                  render={() => (
-                    <div style={{ ...style, overflow: 'hidden' }}>
-                      {isLoggedIn ? (
-                        <FolderName
-                          onClick={() => {
-                            signals.modalOpened({
-                              modal: 'moveSandbox',
-                            });
-                          }}
-                        >
-                          {folderName}
-                        </FolderName>
-                      ) : (
-                        'Anonymous '
-                      )}
-                      /{' '}
-                    </div>
-                  )}
-                />
-                {updatingName ? (
-                  <form
-                    css={{
-                      position: 'absolute',
-                      left: 0,
-                      right: 0,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                    }}
-                    onSubmit={this.submitNameChange}
-                  >
-                    <SandboxInput
-                      autoFocus
-                      innerRef={el => {
-                        if (el) {
-                          el.focus();
-                        }
-                      }}
-                      onKeyUp={this.handleKeyUp}
-                      onBlur={this.handleBlur}
-                      onChange={this.handleInputUpdate}
-                      placeholder={nameValue}
-                      value={value}
-                    />
-                  </form>
-                ) : (
-                  <SandboxName onClick={this.handleNameClick}>
-                    {this.sandboxName()}
-                  </SandboxName>
-                )}
-              </Container>
-            )}
-          />
-        )}
-      </Spring>
-    );
-  }
-}
-
-export default inject('signals')(observer(CollectionInfo));
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/index.tsx
new file mode 100755
index 00000000000..a391a29a6e2
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/index.tsx
@@ -0,0 +1,171 @@
+import React, { useCallback, useState } from 'react';
+import { basename } from 'path';
+import { useOvermind } from 'app/overmind';
+import Media from 'react-media';
+
+import { Spring } from 'react-spring/renderprops';
+
+import track from '@codesandbox/common/lib/utils/analytics';
+import { ESC } from '@codesandbox/common/lib/utils/keycodes';
+import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
+import { Sandbox } from '@codesandbox/common/lib/types';
+import {
+  Container,
+  SandboxName,
+  SandboxForm,
+  SandboxInput,
+  FolderName,
+} from './elements';
+
+interface ICollectionInfoProps {
+  sandbox: Sandbox;
+  isLoggedIn: boolean;
+}
+
+const CollectionInfo: React.FC<ICollectionInfoProps> = ({
+  sandbox,
+  isLoggedIn,
+}) => {
+  const [updatingName, setUpdatingName] = useState(false);
+  const [nameValue, setNameValue] = useState('');
+  const {
+    actions: {
+      workspace: { sandboxInfoUpdated, valueChanged },
+      modalOpened,
+    },
+  } = useOvermind();
+
+  const sandboxName = useCallback(() => getSandboxName(sandbox) || 'Untitled', [
+    sandbox,
+  ]);
+
+  const updateSandboxInfo = useCallback(() => {
+    sandboxInfoUpdated();
+    setUpdatingName(false);
+  }, [sandboxInfoUpdated]);
+
+  const submitNameChange = useCallback(
+    e => {
+      e.preventDefault();
+      updateSandboxInfo();
+
+      track('Change Sandbox Name From Header');
+    },
+    [updateSandboxInfo]
+  );
+
+  const handleNameClick = useCallback(() => {
+    setUpdatingName(true);
+    setNameValue(sandboxName());
+  }, [sandboxName]);
+
+  const handleKeyUp = useCallback(
+    e => {
+      if (e.keyCode === ESC) {
+        updateSandboxInfo();
+      }
+    },
+    [updateSandboxInfo]
+  );
+
+  const handleBlur = useCallback(() => {
+    updateSandboxInfo();
+  }, [updateSandboxInfo]);
+
+  const handleInputUpdate = useCallback(
+    e => {
+      valueChanged({
+        field: 'title',
+        value: e.target.value,
+      });
+
+      setNameValue(e.target.value);
+    },
+    [valueChanged]
+  );
+
+  const value = nameValue !== 'Untitled' && updatingName ? nameValue : '';
+
+  const folderName = sandbox.collection
+    ? basename(sandbox.collection.path) ||
+      (sandbox.team ? sandbox.team.name : 'My Sandboxes')
+    : 'My Sandboxes';
+
+  return (
+    <Spring<{ opacity: number; pointerEvents: 'none' | 'initial' }>
+      from={{
+        opacity: 1,
+      }}
+      to={
+        updatingName
+          ? {
+              opacity: 0,
+              pointerEvents: 'none',
+            }
+          : {
+              opacity: 1,
+              pointerEvents: 'initial',
+            }
+      }
+    >
+      {style => (
+        <Media
+          query="(min-width: 826px)"
+          render={() => (
+            <Container>
+              <Media
+                query="(min-width: 950px)"
+                render={() => (
+                  <div
+                    style={{
+                      ...style,
+                      overflow: 'hidden',
+                    }}
+                  >
+                    {isLoggedIn ? (
+                      <FolderName
+                        onClick={() => {
+                          modalOpened({
+                            modal: 'moveSandbox',
+                          });
+                        }}
+                      >
+                        {folderName}
+                      </FolderName>
+                    ) : (
+                      'Anonymous '
+                    )}
+                    /{' '}
+                  </div>
+                )}
+              />
+              {updatingName ? (
+                <SandboxForm onSubmit={submitNameChange}>
+                  <SandboxInput
+                    autoFocus
+                    innerRef={el => {
+                      if (el) {
+                        el.focus();
+                      }
+                    }}
+                    onKeyUp={handleKeyUp}
+                    onBlur={handleBlur}
+                    onChange={handleInputUpdate}
+                    placeholder={nameValue}
+                    value={value}
+                  />
+                </SandboxForm>
+              ) : (
+                <SandboxName onClick={handleNameClick}>
+                  {sandboxName()}
+                </SandboxName>
+              )}
+            </Container>
+          )}
+        />
+      )}
+    </Spring>
+  );
+};
+
+export { CollectionInfo };
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx
index a4b002d657c..d8d38ab730d 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx
@@ -22,7 +22,7 @@ import ShareIcon from 'react-icons/lib/md/share';
 import PatronBadge from '-!svg-react-loader!@codesandbox/common/lib/utils/badges/svg/patron-4.svg';
 
 import { Action } from './Buttons/Action';
-import CollectionInfo from './CollectionInfo';
+import { CollectionInfo } from './CollectionInfo';
 import {
   Centered,
   Container,