diff --git a/.gitignore b/.gitignore
index 0bd7603..19a9ac3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,10 @@
 # testing
 /coverage
 
+# development
+bundle.js
+bundle.js.map
+
 # production
 /build
 
diff --git a/package.json b/package.json
index bd24b98..ee32f92 100644
--- a/package.json
+++ b/package.json
@@ -25,12 +25,10 @@
     "lint-staged": {
         "src/**/*.{js,jsx,ts,tsx}": [
             "eslint --fix",
-            "prettier --write --tab-width 4 --single-quote",
-            "git add"
+            "prettier --write --tab-width 4 --single-quote"
         ],
         "src/**/*.{json,css,scss,md}": [
-            "prettier --write --tab-width 4 --single-quote",
-            "git add"
+            "prettier --write --tab-width 4 --single-quote"
         ]
     },
     "husky": {
diff --git a/src/clients/Element.io.ts b/src/clients/Element.ts
similarity index 95%
rename from src/clients/Element.io.ts
rename to src/clients/Element.ts
index 2550840..0693ede 100644
--- a/src/clients/Element.io.ts
+++ b/src/clients/Element.ts
@@ -24,7 +24,7 @@ import {
 import { LinkKind } from '../parser/types';
 import logo from '../imgs/element.svg';
 
-const Element: LinkedClient = {
+export const Element: LinkedClient = {
     kind: ClientKind.LINKED_CLIENT,
     name: 'Element',
     author: 'Element',
@@ -32,7 +32,7 @@ const Element: LinkedClient = {
     homepage: 'https://element.io',
     maturity: Maturity.STABLE,
     description: 'Fully-featured Matrix client for the Web',
-    platform: Platform.Desktop,
+    platforms: [Platform.Desktop, Platform.Android, Platform.iOS],
     experimental: false,
     clientId: ClientId.Element,
     toUrl: (link) => {
@@ -69,7 +69,7 @@ export const ElementDevelop: LinkedClient = {
     homepage: 'https://element.io',
     maturity: Maturity.STABLE,
     description: 'Fully-featured Matrix client for the Web',
-    platform: Platform.Desktop,
+    platforms: [Platform.Desktop],
     experimental: true,
     clientId: ClientId.ElementDevelop,
     toUrl: (link) => {
@@ -95,4 +95,3 @@ export const ElementDevelop: LinkedClient = {
     },
     linkSupport: () => true,
 };
-export default Element;
diff --git a/src/clients/Fractal.tsx b/src/clients/Fractal.tsx
index 058b4d6..bd0f068 100644
--- a/src/clients/Fractal.tsx
+++ b/src/clients/Fractal.tsx
@@ -30,7 +30,7 @@ const Fractal: TextClient = {
     homepage: 'https://github.com/poljar/weechat-matrix',
     maturity: Maturity.BETA,
     experimental: false,
-    platform: Platform.Desktop,
+    platforms: [Platform.Desktop],
     clientId: ClientId.Fractal,
     toInviteString: (link) => {
         switch (link.kind) {
diff --git a/src/clients/Nheko.tsx b/src/clients/Nheko.tsx
index a0954d1..1195716 100644
--- a/src/clients/Nheko.tsx
+++ b/src/clients/Nheko.tsx
@@ -30,7 +30,7 @@ const Nheko: TextClient = {
     homepage: 'https://github.com/Nheko-Reborn/nheko',
     maturity: Maturity.BETA,
     experimental: false,
-    platform: Platform.Desktop,
+    platforms: [Platform.Desktop],
     clientId: ClientId.Nheko,
     toInviteString: (link) => {
         switch (link.kind) {
@@ -40,7 +40,10 @@ const Nheko: TextClient = {
                     <span>
                         Type{' '}
                         <code>
-                            /join <b>{link.identifier}</b>
+                            /join{' '}
+                            <b className="matrixIdentifier">
+                                {link.identifier}
+                            </b>
                         </code>
                     </span>
                 );
@@ -49,7 +52,10 @@ const Nheko: TextClient = {
                     <span>
                         Type{' '}
                         <code>
-                            /invite <b>{link.identifier}</b>
+                            /invite{' '}
+                            <b className="matrixIdentifier">
+                                {link.identifier}
+                            </b>
                         </code>
                     </span>
                 );
diff --git a/src/clients/Weechat.tsx b/src/clients/Weechat.tsx
index cd15769..105a979 100644
--- a/src/clients/Weechat.tsx
+++ b/src/clients/Weechat.tsx
@@ -30,7 +30,7 @@ const Weechat: TextClient = {
     homepage: 'https://github.com/poljar/weechat-matrix',
     maturity: Maturity.LATE_BETA,
     experimental: false,
-    platform: Platform.Desktop,
+    platforms: [Platform.Desktop],
     clientId: ClientId.WeeChat,
     toInviteString: (link) => {
         switch (link.kind) {
@@ -40,7 +40,10 @@ const Weechat: TextClient = {
                     <span>
                         Type{' '}
                         <code>
-                            /join <b>{link.identifier}</b>
+                            /join{' '}
+                            <b className="matrixIdentifier">
+                                {link.identifier}
+                            </b>
                         </code>
                     </span>
                 );
@@ -49,7 +52,10 @@ const Weechat: TextClient = {
                     <span>
                         Type{' '}
                         <code>
-                            /invite <b>{link.identifier}</b>
+                            /invite{' '}
+                            <b className="matrixIdentifier">
+                                {link.identifier}
+                            </b>
                         </code>
                     </span>
                 );
diff --git a/src/clients/index.ts b/src/clients/index.ts
index c3686bb..a00cd71 100644
--- a/src/clients/index.ts
+++ b/src/clients/index.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import { Client } from './types';
 
-import Element, { ElementDevelop } from './Element.io';
+import { Element, ElementDevelop } from './Element';
 import Weechat from './Weechat';
 import Nheko from './Nheko';
 import Fractal from './Fractal';
diff --git a/src/clients/types.ts b/src/clients/types.ts
index 5a93f15..3278f96 100644
--- a/src/clients/types.ts
+++ b/src/clients/types.ts
@@ -62,7 +62,7 @@ export interface ClientDescription {
     homepage: string;
     logo: string;
     description: string;
-    platform: Platform;
+    platforms: Platform[];
     maturity: Maturity;
     clientId: ClientId;
     experimental: boolean;
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 4dcffc9..adf99ac 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -35,7 +35,7 @@ interface IProps {
 const Avatar: React.FC<IProps> = ({ className, avatarUrl, label }: IProps) => {
     const [src, setSrc] = useState(avatarUrl);
     useEffect(() => {
-        setSrc(avatarUrl);
+        setSrc(avatarUrl ? avatarUrl : logo);
     }, [avatarUrl]);
 
     const _className = classNames('avatar', className, {
diff --git a/src/components/ClientList.tsx b/src/components/ClientList.tsx
index 4d23d37..64dbebc 100644
--- a/src/components/ClientList.tsx
+++ b/src/components/ClientList.tsx
@@ -47,16 +47,18 @@ const ClientList: React.FC<IProps> = ({ link, rememberSelection }: IProps) => {
             showClient = true;
         }
 
-        switch (client.platform) {
-            case Platform.Desktop:
-                showClient = showClient || !(uaResults as any).mobile;
-                break;
-            case Platform.iOS:
-                showClient = showClient || (uaResults as any).ios;
-                break;
-            case Platform.Android:
-                showClient = showClient || (uaResults as any).android;
-                break;
+        for (const platform of client.platforms) {
+            switch (platform) {
+                case Platform.Desktop:
+                    showClient = showClient || !(uaResults as any).mobile;
+                    break;
+                case Platform.iOS:
+                    showClient = showClient || (uaResults as any).ios;
+                    break;
+                case Platform.Android:
+                    showClient = showClient || (uaResults as any).android;
+                    break;
+            }
         }
 
         if (!showExperimentalClients && client.experimental) {
diff --git a/src/components/ClientSelection.tsx b/src/components/ClientSelection.tsx
index 9989b29..6e5ed8d 100644
--- a/src/components/ClientSelection.tsx
+++ b/src/components/ClientSelection.tsx
@@ -38,7 +38,7 @@ const ClientSelection: React.FC<IProps> = ({ link }: IProps) => {
                 }}
                 checked={rememberSelection}
             >
-                Remember choice for future invites in this browser
+                Remember for future invites in this browser
             </StyledCheckbox>
             <StyledCheckbox
                 onChange={(): void => {
diff --git a/src/components/ClientTile.tsx b/src/components/ClientTile.tsx
index c238a8b..e8eddde 100644
--- a/src/components/ClientTile.tsx
+++ b/src/components/ClientTile.tsx
@@ -47,7 +47,7 @@ const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
         if (copyString !== '') {
             inviteButton = (
                 <Button
-                    onClick={() => navigator.clipboard.writeText(copyString)}
+                    onClick={() => navigator.clipboard?.writeText(copyString)}
                     flashChildren="Invite copied"
                 >
                     Copy invite
diff --git a/src/components/CreateLinkTile.scss b/src/components/CreateLinkTile.scss
index a377ae4..0fba4fc 100644
--- a/src/components/CreateLinkTile.scss
+++ b/src/components/CreateLinkTile.scss
@@ -35,10 +35,6 @@ limitations under the License.
         color: $foreground;
     }
 
-    .linkHeader h1 {
-        word-break: break-all;
-    }
-
     .createLinkReset {
         height: 40px;
         width: 40px;
diff --git a/src/components/CreateLinkTile.tsx b/src/components/CreateLinkTile.tsx
index 5c05c58..2b92455 100644
--- a/src/components/CreateLinkTile.tsx
+++ b/src/components/CreateLinkTile.tsx
@@ -128,13 +128,13 @@ const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
                 <div>New link</div>
                 <img src={refreshIcon} alt="Go back to matrix.to home page" />
             </button>
-            <h1 className="linkHeader">{props.link}</h1>
+            <h1 className="linkHeader matrixIdentifier">{props.link}</h1>
             <Button
                 flashChildren={'Copied'}
                 icon={copyIcon}
                 flashIcon={tickIcon}
                 onClick={(): void => {
-                    navigator.clipboard.writeText(props.link);
+                    navigator.clipboard?.writeText(props.link);
                 }}
                 ref={buttonRef}
             >
diff --git a/src/components/DefaultPreview.scss b/src/components/DefaultPreview.scss
index 48e404c..21b77bb 100644
--- a/src/components/DefaultPreview.scss
+++ b/src/components/DefaultPreview.scss
@@ -19,8 +19,4 @@ limitations under the License.
         border-radius: 0;
         border: 0;
     }
-
-    h1 {
-        word-break: break-all;
-    }
 }
diff --git a/src/components/DefaultPreview.tsx b/src/components/DefaultPreview.tsx
index 894bbf8..00f4b91 100644
--- a/src/components/DefaultPreview.tsx
+++ b/src/components/DefaultPreview.tsx
@@ -34,7 +34,7 @@ const DefaultPreview: React.FC<IProps> = ({ link }: IProps) => {
                 avatarUrl={genericRoomPreview}
                 label={`Generic icon representing ${link.identifier}`}
             />
-            <h1>{link.identifier}</h1>
+            <h1 className="matrixIdentifier">{link.identifier}</h1>
         </div>
     );
 };
diff --git a/src/components/HomeserverOptions.tsx b/src/components/HomeserverOptions.tsx
index ab30a3c..750b1c0 100644
--- a/src/components/HomeserverOptions.tsx
+++ b/src/components/HomeserverOptions.tsx
@@ -91,7 +91,12 @@ const HomeserverOptions: React.FC<IProps> = ({ link }: IProps) => {
         <Tile className="homeserverOptions">
             <div className="homeserverOptionsDescription">
                 <div>
-                    <h3>About {link.identifier}</h3>
+                    <h3>
+                        About&nbsp;
+                        <span className="matrixIdentifier">
+                            {link.identifier}
+                        </span>
+                    </h3>
                     <p>
                         A homeserver will show you metadata about the link, like
                         a description. Homeservers will be able to relate your
diff --git a/src/components/InviteTile.tsx b/src/components/InviteTile.tsx
index 269e47e..06357b7 100644
--- a/src/components/InviteTile.tsx
+++ b/src/components/InviteTile.tsx
@@ -53,12 +53,12 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
                         Accept invite
                     </LinkButton>
                 );
-                inviteUseString = `Accepting will open ${link.identifier} in ${client.name}.`;
+                inviteUseString = `Accepting will open this link in ${client.name}.`;
                 break;
             case ClientKind.TEXT_CLIENT:
                 // TODO: copy to clipboard
                 invite = <p>{client.toInviteString(link)}</p>;
-                navigator.clipboard.writeText(client.copyString(link));
+                navigator.clipboard?.writeText(client.copyString(link));
                 inviteUseString = `These are instructions for ${client.name}.`;
                 break;
         }
@@ -69,7 +69,7 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
                 <TextButton
                     onClick={(): void => setShowAdvanced(!showAdvanced)}
                 >
-                    Change Client.
+                    Change client
                 </TextButton>
             </p>
         );
diff --git a/src/components/LinkPreview.tsx b/src/components/LinkPreview.tsx
index dec14e8..37557e7 100644
--- a/src/components/LinkPreview.tsx
+++ b/src/components/LinkPreview.tsx
@@ -137,7 +137,12 @@ const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
                     checked={showHSOptions}
                     onChange={(): void => setShowHSOPtions(!showHSOptions)}
                 >
-                    About {link.identifier}
+                    <span>
+                        About&nbsp;
+                        <span className="matrixIdentifier">
+                            {link.identifier}
+                        </span>
+                    </span>
                 </Toggle>
             </>
         );
diff --git a/src/components/RoomPreview.tsx b/src/components/RoomPreview.tsx
index 0ef2f14..620874a 100644
--- a/src/components/RoomPreview.tsx
+++ b/src/components/RoomPreview.tsx
@@ -38,9 +38,11 @@ const RoomPreview: React.FC<IProps> = ({ room }: IProps) => {
     return (
         <div className="roomPreview">
             <RoomAvatar room={room} />
-            <h1>{room.name ? room.name : roomAlias}</h1>
+            <h1 className="matrixIdentifier">
+                {room.name ? room.name : roomAlias}
+            </h1>
             {members}
-            <p>{roomAlias}</p>
+            <p className="matrixIdentifier">{roomAlias}</p>
         </div>
     );
 };
diff --git a/src/components/StyledCheckbox.scss b/src/components/StyledCheckbox.scss
index 21b40f1..011e53f 100644
--- a/src/components/StyledCheckbox.scss
+++ b/src/components/StyledCheckbox.scss
@@ -23,9 +23,7 @@ limitations under the License.
     align-items: center;
 
     input[type='checkbox'] {
-        appearance: none;
-        margin: 0;
-        padding: 0;
+        display: none;
 
         &:checked + div {
             background: $foreground;
diff --git a/src/components/Toggle.scss b/src/components/Toggle.scss
index 5d82223..8654dcf 100644
--- a/src/components/Toggle.scss
+++ b/src/components/Toggle.scss
@@ -21,9 +21,7 @@ limitations under the License.
 
     > input[type='checkbox'] {
         // Remove the OS's representation
-        margin: 0;
-        padding: 0;
-        appearance: none;
+        display: none;
 
         &.focus-visible {
             & + img {
diff --git a/src/components/UserPreview.tsx b/src/components/UserPreview.tsx
index 6122977..7cfda27 100644
--- a/src/components/UserPreview.tsx
+++ b/src/components/UserPreview.tsx
@@ -67,9 +67,12 @@ export const InviterPreview: React.FC<InviterPreviewProps> = ({
         <div className={className}>
             <div>
                 <h1>
-                    Invited by <b>{user ? user.displayname : userId}</b>
+                    Invited by{' '}
+                    <b className="matrixIdentifier">
+                        {user ? user.displayname : userId}
+                    </b>
                 </h1>
-                {user ? <p>{userId}</p> : null}
+                {user ? <p className="matrixIdentifier">{userId}</p> : null}
             </div>
             {avatar}
         </div>
@@ -84,7 +87,7 @@ export const WrappedInviterPreview: React.FC<WrappedInviterProps> = ({
     link,
 }: WrappedInviterProps) => {
     const [user, setUser] = useState<User | undefined>(undefined);
-    const hss = useHSs({link});
+    const hss = useHSs({ link });
     useEffect(() => {
         if (hss.length) {
             client(hss[0])
diff --git a/src/index.scss b/src/index.scss
index c1ed963..a628c94 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -64,3 +64,7 @@ hr {
     border: 1px solid lighten($grey, 50);
     margin: 0 40px;
 }
+
+.matrixIdentifier {
+    word-break: break-all;
+}