diff --git a/frontend/modules/components/ResultBox/ResultBox.tsx b/frontend/modules/components/ResultBox/ResultBox.tsx
new file mode 100644
index 00000000..5d81b6d3
--- /dev/null
+++ b/frontend/modules/components/ResultBox/ResultBox.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { ExternalLinkIcon } from "@chakra-ui/icons";
+import { ResultBoxProps } from "./types";
+
+const ResultBox = (props: ResultBoxProps) => {
+  const ristekLink = `${window.location.origin}/${props.alias}`;
+  if (props.isLoading) {
+    return (
+      <div className="absolute -bottom-32 w-full h-8 bg-gray-300 animate-pulse  py-9 flex flex-row items-center justify-between rounded-md px-4 mt-3 shadow-lg" />
+    );
+  } else {
+    return (
+      <div className="absolute -bottom-32 w-full h-8 bg-primary py-9 flex flex-row items-center justify-between rounded-md px-4 mt-3 shadow-lg">
+        <a href={ristekLink} target="_blank" className="flex items-center">
+          <div className="text-white font-bold hover:underline">{ristekLink}</div>
+          <ExternalLinkIcon className="ml-2" color="white" />
+        </a>
+        <div
+          className="text-white cursor-pointer"
+          onClick={() => props.onCopy()}
+        >
+          {props.isCopied ? "Copied!" : "Copy"}
+        </div>
+      </div>
+    );
+  }
+};
+
+export default ResultBox;
diff --git a/frontend/modules/components/ResultBox/index.tsx b/frontend/modules/components/ResultBox/index.tsx
index c75a47d7..53c41401 100644
--- a/frontend/modules/components/ResultBox/index.tsx
+++ b/frontend/modules/components/ResultBox/index.tsx
@@ -1,30 +1,10 @@
 import React from "react";
+import dynamic from "next/dynamic";
+import { ResultBoxProps } from "./types";
 
-type ResultBoxProps = {
-  onCopy?: () => any;
-  isCopied?: boolean;
-  isLoading?: boolean;
-  alias: string;
+const DynamicResultBox = dynamic(() => import(/* webpackChunkName: "ResultBox" */"./ResultBox"));
+const ResultBoxWrapper = (props: ResultBoxProps) => {
+  return <DynamicResultBox {...props} />;
 };
 
-const ResultBox = (props: ResultBoxProps) => {
-  if (props.isLoading) {
-    return (
-      <div className="absolute -bottom-32 w-full h-8 bg-gray-300 animate-pulse  py-9 flex flex-row items-center justify-between rounded-md px-4 mt-3 shadow-lg" />
-    );
-  } else {
-    return (
-      <div className="absolute -bottom-32 w-full h-8 bg-primary py-9 flex flex-row items-center justify-between rounded-md px-4 mt-3 shadow-lg">
-        <div className="text-white font-bold truncate">{`https://ristek.link/${props.alias}`}</div>
-        <div
-          className="text-white cursor-pointer"
-          onClick={() => props.onCopy()}
-        >
-          {props.isCopied ? "Copied!" : "Copy"}
-        </div>
-      </div>
-    );
-  }
-};
-
-export default ResultBox;
+export default ResultBoxWrapper;
diff --git a/frontend/modules/components/ResultBox/types.tsx b/frontend/modules/components/ResultBox/types.tsx
new file mode 100644
index 00000000..d3edcc64
--- /dev/null
+++ b/frontend/modules/components/ResultBox/types.tsx
@@ -0,0 +1,6 @@
+export type ResultBoxProps = {
+  onCopy?: () => any;
+  isCopied?: boolean;
+  isLoading?: boolean;
+  alias: string;
+};
diff --git a/frontend/package.json b/frontend/package.json
index 75ce2aec..4ea95789 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^1.0.15",
     "@chakra-ui/react": "^1.6.1",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",