diff --git a/public/assets/image/empty_image.png b/public/assets/image/empty_image.png
deleted file mode 100644
index 22340f4..0000000
Binary files a/public/assets/image/empty_image.png and /dev/null differ
diff --git a/public/assets/image/empty_image_1.png b/public/assets/image/empty_image_1.png
new file mode 100644
index 0000000..30f0267
Binary files /dev/null and b/public/assets/image/empty_image_1.png differ
diff --git a/public/assets/image/empty_image_2.png b/public/assets/image/empty_image_2.png
new file mode 100644
index 0000000..2d82dbe
Binary files /dev/null and b/public/assets/image/empty_image_2.png differ
diff --git a/public/logo-white.svg b/public/logo-white.svg
new file mode 100644
index 0000000..0caead0
--- /dev/null
+++ b/public/logo-white.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="12" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM14.7558 11.8646L14.3814 10.6779L12.7168 11.2195V9.3H11.3389V11.2195L9.67434 10.6779L9.3 11.8646L10.9965 12.3903L9.88142 13.9752L10.9009 14.7L12.0398 13.2027L13.1469 14.7L14.1664 13.9752L13.0593 12.3903L14.7558 11.8646Z" fill="white"/>
+</svg>
diff --git a/public/next.svg b/public/next.svg
deleted file mode 100644
index 5174b28..0000000
--- a/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index d2f8422..0000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/src/app/RouteGuard.tsx b/src/app/RouteGuard.tsx
index 72dc076..b6d0616 100644
--- a/src/app/RouteGuard.tsx
+++ b/src/app/RouteGuard.tsx
@@ -31,7 +31,6 @@ const RouteGuard = () => {
     const token = getCookie('accessToken');
 
     if (chrome && chrome.runtime && chrome.runtime.sendMessage) {
-      console.log(!!token, token ?? '');
       chrome.runtime.sendMessage(process.env.NEXT_PUBLIC_EXTENSION_ID, {
         isLogin: !!token,
         accessToken: token ?? '',
diff --git a/src/components/BookmarkCard/index.tsx b/src/components/BookmarkCard/index.tsx
index 163ce14..716056a 100644
--- a/src/components/BookmarkCard/index.tsx
+++ b/src/components/BookmarkCard/index.tsx
@@ -3,7 +3,6 @@
 import { useBookmarkLike, useGetThumbnailImage } from '@/apis/bookmark';
 import { cn } from '@/lib/utils';
 import useToastStore from '@/stores/toastStore';
-import Image from 'next/image';
 import { MouseEvent, useState } from 'react';
 import Icon from '../common/Icon';
 export interface IBookmarkCard {
@@ -42,9 +41,11 @@ const BookmarkCard = ({
   useGetThumbnailImage(imageUUID);
 
   const { mutateAsync: mutateBookmarkLike } = useBookmarkLike();
-
   const [isLike, setIsLike] = useState(isFavorite);
 
+  const bookmarkTitle = title !== '' ? title : url;
+  const bookmarkSiteName = siteName !== '' ? siteName : url.split('/')[2];
+
   // 북마크 좋아요
   const handleToggleLike = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
@@ -54,6 +55,7 @@ const BookmarkCard = ({
     });
   };
 
+  // 북마크 링크 복사
   const handleCopyUrl = async (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
 
@@ -62,6 +64,11 @@ const BookmarkCard = ({
     });
   };
 
+  // empty 이미지 랜덤
+  const getRandomNumber = () => {
+    return Math.random() < 0.5 ? 1 : 2;
+  };
+
   return (
     <div
       className='cursor-pointer max-h-[342px] mb-40 flex flex-col gap-20 group'
@@ -81,12 +88,11 @@ const BookmarkCard = ({
             width={650}
           />
         ) : (
-          <Image
+          <img
             className='aspect-[296/180] object-cover'
-            src='/assets/image/empty_image.png'
-            alt='Empty'
+            src={`/assets/image/empty_image_${getRandomNumber()}.png`}
+            alt='썸네일'
             width={650}
-            height={400}
           />
         )}
       </div>
@@ -94,24 +100,26 @@ const BookmarkCard = ({
         {categoryNames.length > 0 && (
           <span className='body-sm-bold text-primary'>{categoryNames[0]}</span>
         )}
-        <h2 className='body-lg-bold text-text'>{title}</h2>
+        <h2 className='body-lg-bold text-text truncate'>{bookmarkTitle}</h2>
         <p className='body-md text-text-sub truncate'>{memo}</p>
       </div>
-      <div className='relative px-10 flex items-center gap-8'>
-        <picture>
-          <img
-            className='rounded-full'
-            src={faviconUrl}
-            alt='파비콘'
-            width={28}
-            height={28}
-            onError={(e) => ((e.target as HTMLImageElement).src = '/logo.svg')}
-          />
-        </picture>
-        <span className='body-md text-text truncate'>{siteName}</span>
+      <div className='px-10 flex items-center justify-between gap-8'>
+        <div className='flex items-center gap-8 truncate'>
+          <picture>
+            <img
+              className='rounded-full min-w-28 h-28'
+              src={faviconUrl ?? '/logo-white.svg'}
+              alt='파비콘'
+              width={28}
+              height={28}
+              onError={(e) => ((e.target as HTMLImageElement).src = '/logo-white.svg')}
+            />
+          </picture>
+          <span className='body-md text-text truncate'>{bookmarkSiteName}</span>
+        </div>
         <div
           className={cn([
-            'absolute right-0 hidden items-center gap-12 bg-surface *:text-icon-minimal group-hover:flex',
+            'hidden items-center gap-12 *:text-icon-minimal group-hover:flex',
             isLike && 'flex',
           ])}
         >
diff --git a/src/components/BookmarkItem/index.tsx b/src/components/BookmarkItem/index.tsx
index 972734e..26895d7 100644
--- a/src/components/BookmarkItem/index.tsx
+++ b/src/components/BookmarkItem/index.tsx
@@ -34,9 +34,11 @@ const BookmarkItem = ({
   const { addToast } = useToastStore();
 
   const { mutateAsync: mutateBookmarkLike } = useBookmarkLike();
-
   const [isLike, setIsLike] = useState(isFavorite);
 
+  const bookmarkTitle = title !== '' ? title : url;
+  const bookmarkSiteName = siteName !== '' ? siteName : url.split('/')[2];
+
   // 북마크 좋아요
   const handleToggleLike = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
@@ -60,18 +62,18 @@ const BookmarkItem = ({
       onClick={onClick}
     >
       <div className='flex flex-col justify-center gap-4 px-8 overflow-hidden'>
-        <h2 className='body-md text-text truncate'>{title}</h2>
+        <h2 className='body-md text-text truncate'>{bookmarkTitle}</h2>
         <p className='body-sm text-text-sub truncate'>{memo}</p>
       </div>
       <div className='flex items-center justify-end gap-8 px-8'>
-        <span className='body-md text-text truncate'>{siteName}</span>
+        <span className='body-md text-text truncate'>{bookmarkSiteName}</span>
         <img
           className='rounded-full'
-          src={faviconUrl}
+          src={faviconUrl ?? '/logo-white.svg'}
           alt='파비콘'
           width={20}
           height={20}
-          onError={(e) => ((e.target as HTMLImageElement).src = '/logo.svg')}
+          onError={(e) => ((e.target as HTMLImageElement).src = '/logo-white.svg')}
         />
       </div>
       <div className='flex items-center justify-end px-8'>
diff --git a/src/components/ContentBox/index.tsx b/src/components/ContentBox/index.tsx
index 77e64d2..e2f5fba 100644
--- a/src/components/ContentBox/index.tsx
+++ b/src/components/ContentBox/index.tsx
@@ -33,7 +33,7 @@ const ContentBox = () => {
   } = useBookmarkInfinityAPI({
     size: 10,
     direction: 'DESC',
-    property: 'id',
+    property: queryParam.get('sort') ?? 'id',
     categoryId,
     isFavorite: queryParam.get('favorite') === 'true',
   });
diff --git a/src/components/FilterBox/index.tsx b/src/components/FilterBox/index.tsx
index 32b2c4e..097504c 100644
--- a/src/components/FilterBox/index.tsx
+++ b/src/components/FilterBox/index.tsx
@@ -4,13 +4,20 @@ import { useCategoryList, useSaveCategory } from '@/apis/category';
 import useQueryString from '@/hooks/useQueyString';
 import { cn } from '@/lib/utils';
 import useToastStore from '@/stores/toastStore';
-import { ChangeEvent, useRef, useState } from 'react';
+import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import TabList from '../TabList';
 import { Button } from '../common/Button';
 import Divider from '../common/Divider';
 import Icon from '../common/Icon';
+import { Option } from '../common/Option';
 import AddCategory from './AddCategory';
 
+const sortList = [
+  { label: '최신순', value: 'id' },
+  { label: '이름순', value: 'updatedAt' },
+  { label: '오래된순', value: 'createdAt' },
+];
+
 const FilterBox = () => {
   const { queryParam, updateQueryString } = useQueryString();
 
@@ -19,12 +26,15 @@ const FilterBox = () => {
   const { mutateAsync: mutateSaveCategory } = useSaveCategory();
 
   const isLikeChecked = queryParam.get('favorite') === 'true'; // 종아요 항목 표시
+  const sortType = queryParam.get('sort') ?? 'id'; // 종아요 항목 표시
   const viewType = queryParam.get('view') ?? 'grid'; // list 타입 grid | list
 
+  const [isShowSort, setIsShowSort] = useState<boolean>(false);
   const [isOpenCategory, setIsOpenCategory] = useState<boolean>(false); // 카테고리 모달 오픈
   const [category, setCategory] = useState<string>(''); // 카테고리 텍스트
   const [isError, setIsError] = useState<boolean>(false); // 카테고리 에러
 
+  const sortTabRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLDivElement>(null);
 
   const handleChangeCategory = (e: ChangeEvent<HTMLInputElement>) => {
@@ -34,10 +44,14 @@ const FilterBox = () => {
     setCategory(e.target.value);
   };
 
+  const handleSelectSortOption = (value: string) => {
+    updateQueryString('sort', value);
+    setIsShowSort(false);
+  };
+
   /**
    * TODO :
    * - 유효성 검증 case 추가 필요
-   * - 카테고리 영역 밖 클릭 or esc 닫기
    */
   const handleAddCategory = () => {
     if (!category) {
@@ -63,6 +77,19 @@ const FilterBox = () => {
     });
   };
 
+  // 정렬 option 외부 클릭시 닫힘
+  useEffect(() => {
+    const handleCloseSortOption = (e: Event) => {
+      const target = e.target as HTMLElement;
+
+      if (isShowSort && !sortTabRef.current?.contains(target)) setIsShowSort(false);
+    };
+
+    window.addEventListener('click', handleCloseSortOption);
+
+    return () => window.removeEventListener('click', handleCloseSortOption);
+  }, [isShowSort]);
+
   return (
     <div>
       <div className='px-40 flex justify-between'>
@@ -108,9 +135,29 @@ const FilterBox = () => {
           </Button.Label>
         </Button>
         <div className='flex items-center gap-12'>
-          <span className='cursor-pointer mr-4 flex items-center gap-4 label-md text-text-minimal'>
-            최신순 <Icon name='chevronDown_s' className='w-20 h-20 ' />
-          </span>
+          {/* 정렬 START */}
+          <div className='relative' ref={sortTabRef}>
+            <span
+              className='cursor-pointer mr-4 flex items-center gap-4 label-md text-text-minimal'
+              onClick={() => {
+                setIsShowSort((prev) => !prev);
+              }}
+            >
+              {sortList.find((item) => item.value === sortType)?.label}
+              <Icon name='chevronDown_s' className='w-20 h-20 ' />
+            </span>
+            {isShowSort && (
+              <div className='absolute top-[calc(100%+8px)] w-[165px] flex flex-col gap-4 p-8 bg-surface rounded-lg shadow-layer z-10'>
+                {sortList.map((item) => (
+                  <Option key={item.value} onClick={() => handleSelectSortOption(item.value)}>
+                    <Option.Label>{item.label}</Option.Label>
+                  </Option>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* 정렬 END */}
           <button onClick={() => updateQueryString('view', 'grid')}>
             <Icon
               name='grid'