diff --git a/src/components/common/Collapse/CopyCode.tsx b/src/components/common/Collapse/CopyCode.tsx
index d8a4006464..7847c62a9c 100644
--- a/src/components/common/Collapse/CopyCode.tsx
+++ b/src/components/common/Collapse/CopyCode.tsx
@@ -22,7 +22,10 @@ const CopyCode = ({ referralCode }: Props) => {
   return (
     <Collapse header="Refer Operators +100 XP">
       <Wrapper>
-        <div>{referralCode || 'Connect to wallet to get referral code'}</div>
+        <div className="referral-code">
+          {`https://dashboard.logos.co/dashboard?referral_code=${referralCode}` ||
+            'Connect to wallet to get referral code'}
+        </div>
         <CopyButton onClick={copyToClipboard}>
           <img src="/assets/file-copy-purple.svg" alt="file copy" />
         </CopyButton>
@@ -47,6 +50,14 @@ const Wrapper = styled.div`
   gap: 10px;
   width: 100%;
   height: 28px;
+
+  .referral-code {
+    // ellipsis
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 90%;
+  }
 `
 
 export default CopyCode