diff --git a/src/components/characters.jsx b/src/components/characters.jsx
index f4cf5a0..6be3f5d 100644
--- a/src/components/characters.jsx
+++ b/src/components/characters.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import '../style/characters.scss';
 
@@ -9,9 +9,22 @@ export default function Characters({ data, onClick }) {
     setIsVisible(false);
   };
 
+  const handleClickOutside = (event) => {
+    if (isVisible && !event.target.closest('.search-container')) {
+      hideCharacters();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  });
+
   return (
     <>
-      <div className='search-container' style={{ display: isVisible ? 'block' : 'none' }}>
+      <div className='search-container' style={{ display: isVisible ? '' : 'none' }}>
         <div className='search-result' onClick={hideCharacters}>
           <button className='close-search' onClick={hideCharacters}>
             X
diff --git a/src/components/comics.jsx b/src/components/comics.jsx
index 5efdc57..9bb9394 100644
--- a/src/components/comics.jsx
+++ b/src/components/comics.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import '../style/comics.scss';
@@ -10,8 +10,21 @@ export default function Comics({ data, onClick }) {
     setIsVisible(false);
   };
 
+  const handleClickOutside = (event) => {
+    if (isVisible && !event.target.closest('.search-container')) {
+      hideComics();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  });
+
   return (
-    <div className='search-container' style={{ display: isVisible ? 'block' : 'none' }}>
+    <div className='search-container' style={{ display: isVisible ? '' : 'none' }}>
       <div className='search-result' onClick={hideComics}>
         <button className='close-search' onClick={hideComics}>
           X