diff --git a/js/views/session_registration_view.js b/js/views/session_registration_view.js
index 619248f86..a5f4d3e7e 100644
--- a/js/views/session_registration_view.js
+++ b/js/views/session_registration_view.js
@@ -121,7 +121,7 @@
   window.Session = window.Session || {};
 
   window.Session.setNewSessionID = sessionID => {
-    const el = document.querySelector('.session-signin-enter-session-id');
+    const el = document.querySelector('.session-id-editable');
     const fx = new TextScramble(el);
     el.innerHTML = sessionID;
     fx.setText(sessionID);
diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss
index a0617f156..4cfaf1539 100644
--- a/stylesheets/_session_signin.scss
+++ b/stylesheets/_session_signin.scss
@@ -220,9 +220,9 @@
     line-height: 20px;
   }
 
-  &-signin-enter-session-id {
+  &-id-editable {
     height: 94px;
-    width: 289px;
+    width: 100%;
     border-radius: 8px;
     border: 2px solid $session-color-dark-grey;
     outline: 0;
@@ -242,4 +242,5 @@
 [contenteditable='true']:empty::before {
   content: attr(placeholder);
   color: $session-color-light-grey;
+  font-size: 13px;
 }
diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx
index 054c7cd16..9fa342ab8 100644
--- a/ts/components/session/LeftPaneMessageSection.tsx
+++ b/ts/components/session/LeftPaneMessageSection.tsx
@@ -14,6 +14,8 @@ import { SessionConversationSearch } from './SessionConversationSearch';
 import { debounce } from 'lodash';
 import { cleanSearchTerm } from '../../util/cleanSearchTerm';
 import { SearchOptions } from '../../types/Search';
+import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
+import { SessionIdEditable } from './SessionIdEditable';
 
 export interface Props {
   searchTerm: string;
diff --git a/ts/components/session/RegistrationTabs.tsx b/ts/components/session/RegistrationTabs.tsx
index 8c87d172d..8e70143e2 100644
--- a/ts/components/session/RegistrationTabs.tsx
+++ b/ts/components/session/RegistrationTabs.tsx
@@ -9,6 +9,7 @@ import {
 } from './SessionButton';
 import { trigger } from '../../shims/events';
 import { SessionHtmlRenderer } from './SessionHTMLRenderer';
+import { SessionIdEditable } from './SessionIdEditable';
 
 enum SignInMode {
   Default,
@@ -442,14 +443,11 @@ export class RegistrationTabs extends React.Component<{}, State> {
     const enterSessionIDHere = window.i18n('enterSessionIDHere');
 
     return (
-      <div
-        className="session-signin-enter-session-id"
+      <SessionIdEditable
+        editable={contentEditable}
         placeholder={enterSessionIDHere}
-        contentEditable={contentEditable}
-        onInput={(e: any) => {
-          if (contentEditable) {
-            this.onSecondDeviceSessionIDChanged(e);
-          }
+        onChange={(e: any) => {
+          this.onSecondDeviceSessionIDChanged(e);
         }}
       />
     );
diff --git a/ts/components/session/SessionIdEditable.tsx b/ts/components/session/SessionIdEditable.tsx
new file mode 100644
index 000000000..cc4d72663
--- /dev/null
+++ b/ts/components/session/SessionIdEditable.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+
+interface Props {
+    placeholder: string;
+    editable?: boolean;
+    onChange?: any;
+}
+
+
+export class SessionIdEditable extends React.PureComponent<Props> {
+
+    public render() {
+        const { placeholder, editable, onChange } = this.props;
+
+        return (
+            <div
+                className="session-id-editable"
+                placeholder={placeholder}
+                contentEditable={editable}
+                onInput={(e: any) => {
+                    if (editable) {
+                        onChange(e);
+                    }
+                }}
+            />
+        );
+    }
+}