diff --git a/src/components/card/user/conferenceCard/ConferenceCard.tsx b/src/components/card/user/conferenceCard/ConferenceCard.tsx
index 31ca40d0..e323155a 100644
--- a/src/components/card/user/conferenceCard/ConferenceCard.tsx
+++ b/src/components/card/user/conferenceCard/ConferenceCard.tsx
@@ -30,6 +30,7 @@ const ConferenceCard: React.FC<ConferenceCardProps> = ({
   imageUrl,
   onClick,
 }) => {
+  console.log('img:', imageUrl);
   return (
     <S.CardContainer onClick={onClick}>
       {imageUrl && <Img size={100} imageUrl={imageUrl} />}
diff --git a/src/pages/face-recognition/FaceRecognition.style.ts b/src/pages/face-recognition/FaceRecognition.style.ts
index e4f2241c..aae4252c 100644
--- a/src/pages/face-recognition/FaceRecognition.style.ts
+++ b/src/pages/face-recognition/FaceRecognition.style.ts
@@ -21,16 +21,66 @@ export const ToastBox = styled.span`
   left: 50%;
   transform: translate(-50%, -50%);
 `;
+// export const Box = styled.div<BoxProps>`
+//   position: absolute;
+//   width: ${({ $boxWidth }) => `${$boxWidth}px`};
+//   height: ${({ $boxHeight }) => `${$boxHeight}px`};
+//   border: ${({ $isFaceInside }) =>
+//     $isFaceInside ? '3px solid blue' : '3px solid red'};
+//   top: 50%;
+//   left: 50%;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   transform: translate(-50%, -50%);
+// `;
+
 export const Box = styled.div<BoxProps>`
   position: absolute;
   width: ${({ $boxWidth }) => `${$boxWidth}px`};
   height: ${({ $boxHeight }) => `${$boxHeight}px`};
-  border: ${({ $isFaceInside }) =>
-    $isFaceInside ? '3px solid blue' : '3px solid red'};
   top: 50%;
   left: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   transform: translate(-50%, -50%);
+  pointer-events: none;
+
+  &::before,
+  &::after,
+  > div::before,
+  > div::after {
+    content: '';
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    border: ${({ $isFaceInside }) =>
+      $isFaceInside ? `3px solid #1466FF` : '3px solid white'};
+  }
+
+  &::before {
+    top: 0;
+    left: 0;
+    border-right: none;
+    border-bottom: none;
+  }
+
+  &::after {
+    top: 0;
+    right: 0;
+    border-left: none;
+    border-bottom: none;
+  }
+
+  > div::before {
+    bottom: 0;
+    left: 0;
+    border-right: none;
+    border-top: none;
+  }
+
+  > div::after {
+    bottom: 0;
+    right: 0;
+    border-left: none;
+    border-top: none;
+  }
 `;
diff --git a/src/pages/face-recognition/FaceRecognition.tsx b/src/pages/face-recognition/FaceRecognition.tsx
index 86bb0437..438dd687 100644
--- a/src/pages/face-recognition/FaceRecognition.tsx
+++ b/src/pages/face-recognition/FaceRecognition.tsx
@@ -119,7 +119,9 @@ const FaceRecognition = () => {
             $boxWidth={boxSize}
             $boxHeight={boxSize}
             $isFaceInside={isFaceInside || faceState === 'success'}
-          ></S.Box>
+          >
+            <div />
+          </S.Box>
         )}
         {isVideoLoaded && (
           <S.ToastBox>
diff --git a/src/pages/user/FaceRegistration.style.ts b/src/pages/user/FaceRegistration.style.ts
index 41a23aa8..854eb09a 100644
--- a/src/pages/user/FaceRegistration.style.ts
+++ b/src/pages/user/FaceRegistration.style.ts
@@ -20,15 +20,52 @@ export const Box = styled.div<BoxProps>`
   position: absolute;
   width: ${({ $boxWidth }) => `${$boxWidth}px`};
   height: ${({ $boxHeight }) => `${$boxHeight}px`};
-  border: ${({ $isFaceInside }) =>
-    $isFaceInside ? '3px solid green' : '3px solid red'};
   top: 50%;
   left: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   transform: translate(-50%, -50%);
+  pointer-events: none;
+
+  &::before,
+  &::after,
+  > div::before,
+  > div::after {
+    content: '';
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    border: ${({ $isFaceInside }) =>
+      $isFaceInside ? `3px solid #1466FF` : '3px solid white'};
+  }
+
+  &::before {
+    top: 0;
+    left: 0;
+    border-right: none;
+    border-bottom: none;
+  }
+
+  &::after {
+    top: 0;
+    right: 0;
+    border-left: none;
+    border-bottom: none;
+  }
+
+  > div::before {
+    bottom: 0;
+    left: 0;
+    border-right: none;
+    border-top: none;
+  }
+
+  > div::after {
+    bottom: 0;
+    right: 0;
+    border-left: none;
+    border-top: none;
+  }
 `;
+
 export const ToastBox = styled.span`
   position: absolute;
   bottom: 10%;
diff --git a/src/pages/user/FaceRegistration.tsx b/src/pages/user/FaceRegistration.tsx
index 05acb3f3..f4d145b1 100644
--- a/src/pages/user/FaceRegistration.tsx
+++ b/src/pages/user/FaceRegistration.tsx
@@ -77,7 +77,9 @@ const FaceRegistration = () => {
                 $boxWidth={230}
                 $boxHeight={230}
                 $isFaceInside={isFaceInside}
-              ></S.Box>
+              >
+                <div />
+              </S.Box>
             )}
             {isCameraVisible && isVideoLoaded && (
               <S.ToastBox>