diff --git a/src/button/Button.jsx b/src/button/Button.jsx
index b28420d..57789b2 100644
--- a/src/button/Button.jsx
+++ b/src/button/Button.jsx
@@ -9,7 +9,7 @@ import { ReactComponent as HangupIcon } from "../icons/Hangup.svg";
 import { ReactComponent as ScreenshareIcon } from "../icons/Screenshare.svg";
 import { useButton } from "@react-aria/button";
 import { mergeProps, useObjectRef } from "@react-aria/utils";
-import { Tooltip, TooltipTrigger } from "../Tooltip";
+import { TooltipTrigger } from "../Tooltip";
 
 export const variantToClassName = {
   default: [styles.button],
@@ -18,6 +18,7 @@ export const variantToClassName = {
   secondary: [styles.secondary],
   copy: [styles.copyButton],
   iconCopy: [styles.iconCopyButton],
+  secondaryCopy: [styles.copyButton],
 };
 
 export const sizeToClassName = {
@@ -65,6 +66,7 @@ export const Button = forwardRef(
           {
             [styles.on]: on,
             [styles.off]: off,
+            [styles.secondaryCopy]: variant === "secondaryCopy",
           }
         )}
         {...mergeProps(rest, filteredButtonProps)}
diff --git a/src/button/Button.module.css b/src/button/Button.module.css
index c8e0e44..265e69d 100644
--- a/src/button/Button.module.css
+++ b/src/button/Button.module.css
@@ -107,6 +107,11 @@ limitations under the License.
   background-color: transparent;
 }
 
+.copyButton.secondaryCopy {
+  color: var(--textColor1);
+  border-color: var(--textColor1);
+}
+
 .copyButton {
   width: 100%;
   height: 40px;
@@ -140,6 +145,10 @@ limitations under the License.
   stroke: white;
 }
 
+.copyButton.secondaryCopy:not(.on) svg * {
+  fill: var(--textColor1);
+}
+
 .iconCopyButton svg * {
   fill: var(--textColor3);
 }
diff --git a/src/button/CopyButton.jsx b/src/button/CopyButton.jsx
index 8501a29..17483c5 100644
--- a/src/button/CopyButton.jsx
+++ b/src/button/CopyButton.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React from "react";
 import useClipboard from "react-use-clipboard";
 import { ReactComponent as CheckIcon } from "../icons/Check.svg";
 import { ReactComponent as CopyIcon } from "../icons/Copy.svg";
@@ -17,7 +17,7 @@ export function CopyButton({
   return (
     <Button
       {...rest}
-      variant={variant === "icon" ? "iconCopy" : "copy"}
+      variant={variant === "icon" ? "iconCopy" : variant || "copy"}
       on={isCopied}
       className={className}
       onPress={setCopied}
diff --git a/src/room/LobbyView.jsx b/src/room/LobbyView.jsx
index 08ad346..bc97ece 100644
--- a/src/room/LobbyView.jsx
+++ b/src/room/LobbyView.jsx
@@ -83,13 +83,6 @@ export function LobbyView({
                     />
                   </div>
                 )}
-                <Button
-                  className={styles.joinCallButton}
-                  disabled={state !== GroupCallState.LocalCallFeedInitialized}
-                  onPress={onEnter}
-                >
-                  Join call now
-                </Button>
                 <div className={styles.previewButtons}>
                   <MicButton
                     muted={microphoneMuted}
@@ -109,8 +102,17 @@ export function LobbyView({
               </>
             )}
           </div>
+          <Button
+            className={styles.copyButton}
+            size="lg"
+            disabled={state !== GroupCallState.LocalCallFeedInitialized}
+            onPress={onEnter}
+          >
+            Join call now
+          </Button>
           <Body>Or</Body>
           <CopyButton
+            variant="secondaryCopy"
             value={getRoomUrl(roomId)}
             className={styles.copyButton}
             copiedMessage="Call link copied"
diff --git a/src/room/LobbyView.module.css b/src/room/LobbyView.module.css
index d205e45..4753f2e 100644
--- a/src/room/LobbyView.module.css
+++ b/src/room/LobbyView.module.css
@@ -112,6 +112,11 @@ limitations under the License.
 
 .copyButton {
   width: 320px !important;
+  margin-bottom: 15px;
+}
+
+.copyButton:last-child {
+  margin-bottom: 0;
 }
 
 .previewButtons > * {
