diff --git a/apps/client/src/pages/myBookmark/MyBookmark.tsx b/apps/client/src/pages/myBookmark/MyBookmark.tsx
index 2007e169..708cc93e 100644
--- a/apps/client/src/pages/myBookmark/MyBookmark.tsx
+++ b/apps/client/src/pages/myBookmark/MyBookmark.tsx
@@ -19,6 +19,7 @@ import {
   useDeleteRemindArticle,
   usePutArticleReadStatus,
 } from '@shared/apis/queries';
+import NoUnreadArticles from '@pages/myBookmark/components/noUnreadArticles/NoUnreadArticles';
 
 const MyBookmark = () => {
   const [activeBadge, setActiveBadge] = useState<'all' | 'notRead'>('all');
@@ -82,8 +83,15 @@ const MyBookmark = () => {
     setActiveBadge(badgeType);
   };
 
+  const EmptyStateComponent = () => {
+    if (articles?.totalArticle === 0) {
+      return <NoArticles />;
+    }
+    return <NoUnreadArticles />;
+  };
+
   return (
-    <div className="flex h-screen flex-col py-[5.2rem] pl-[8rem]">
+    <div className="flex h-screen flex-col py-[5.2rem] pl-[8rem] pr-[5rem]">
       <div className="flex items-center gap-[0.4rem]">
         <div className="flex items-center gap-[0.4rem]">
           <p className="head3">나의 북마크</p>
@@ -116,7 +124,7 @@ const MyBookmark = () => {
       </div>
 
       {articlesToDisplay && articlesToDisplay.length > 0 ? (
-        <div className="scrollbar-hide mt-[2.6rem] flex h-screen max-w-[104rem] flex-wrap gap-[1.6rem] overflow-y-auto scroll-smooth">
+        <div className="scrollbar-hide mt-[2.6rem] flex h-screen flex-wrap gap-[1.6rem] overflow-y-auto scroll-smooth">
           {articlesToDisplay.map((article) => (
             <Card
               key={article.articleId}
@@ -154,7 +162,7 @@ const MyBookmark = () => {
           ))}
         </div>
       ) : (
-        <NoArticles />
+        <EmptyStateComponent />
       )}
 
       <OptionsMenuPortal
diff --git a/apps/client/src/pages/myBookmark/components/noUnreadArticles/NoUnreadArticles.tsx b/apps/client/src/pages/myBookmark/components/noUnreadArticles/NoUnreadArticles.tsx
new file mode 100644
index 00000000..10c09db3
--- /dev/null
+++ b/apps/client/src/pages/myBookmark/components/noUnreadArticles/NoUnreadArticles.tsx
@@ -0,0 +1,16 @@
+import chippiNoRemindArticles from '@assets/chippi_remindx.svg';
+
+const NoUnreadArticles = () => {
+  return (
+    <div className="mx-auto mt-[14rem] flex flex-col items-center">
+      <img src={chippiNoRemindArticles} alt="No Articles" />
+
+      <p className="head2 mt-[1.6rem]">저장된 정보를 모두 꺼내봤어요!</p>
+      <p className="body1-m text-font-gray-3 mt-[0.8rem]">
+        치삐가 다음 도토리를 기다리고 있어요
+      </p>
+    </div>
+  );
+};
+
+export default NoUnreadArticles;
diff --git a/apps/client/src/pages/remind/Remind.tsx b/apps/client/src/pages/remind/Remind.tsx
index 1c846fe8..a0aec067 100644
--- a/apps/client/src/pages/remind/Remind.tsx
+++ b/apps/client/src/pages/remind/Remind.tsx
@@ -15,6 +15,7 @@ import {
   useGetArticleDetail,
 } from '@shared/apis/queries';
 import { useQueryClient } from '@tanstack/react-query';
+import NoRemindArticles from './components/noRemindArticles/NoRemindArticles';
 
 const Remind = () => {
   const [isEditOpen, setIsEditOpen] = useState(false);
@@ -25,7 +26,7 @@ const Remind = () => {
 
   const { mutate: updateToReadStatus } = usePutArticleReadStatus();
   const { mutate: deleteArticle } = useDeleteRemindArticle();
-  const { data } = useGetRemindArticles(
+  const { data, isPending } = useGetRemindArticles(
     formattedDate,
     activeBadge === 'read',
     1,
@@ -61,11 +62,21 @@ const Remind = () => {
     setActiveBadge(badgeType);
   };
 
-  const EmptyStateComponent =
-    activeBadge === 'read' ? <NoReadArticles /> : <NoUnreadArticles />;
+  const EmptyStateComponent = () => {
+    if (data?.readArticleCount === 0 && data?.unreadArticleCount === 0) {
+      return <NoRemindArticles />;
+    }
+
+    return activeBadge === 'read' ? <NoReadArticles /> : <NoUnreadArticles />;
+  };
+
+  // TODO: 로딩 상태 디자인 필요
+  if (isPending) {
+    return <div>Loading...</div>;
+  }
 
   return (
-    <div className="flex flex-col py-[5.2rem] pl-[8rem]">
+    <div className="flex flex-col py-[5.2rem] pl-[8rem] pr-[5rem]">
       <p className="head3">리마인드</p>
       <div className="mt-[3rem] flex gap-[2.4rem]">
         <Badge
@@ -83,7 +94,7 @@ const Remind = () => {
       </div>
 
       {data?.articles && data.articles.length > 0 ? (
-        <div className="scrollbar-hide mt-[2.6rem] flex max-w-[104rem] flex-wrap gap-[1.6rem] overflow-y-auto scroll-smooth">
+        <div className="scrollbar-hide mt-[2.6rem] flex flex-wrap gap-[1.6rem] overflow-y-auto scroll-smooth">
           {data.articles.map((article) => (
             <Card
               key={article.articleId}
@@ -114,7 +125,7 @@ const Remind = () => {
           ))}
         </div>
       ) : (
-        EmptyStateComponent
+        <EmptyStateComponent />
       )}
 
       <OptionsMenuPortal
diff --git a/apps/client/src/pages/remind/components/noReadArticles/NoReadArticles.tsx b/apps/client/src/pages/remind/components/noReadArticles/NoReadArticles.tsx
index 6fabb36a..321178a9 100644
--- a/apps/client/src/pages/remind/components/noReadArticles/NoReadArticles.tsx
+++ b/apps/client/src/pages/remind/components/noReadArticles/NoReadArticles.tsx
@@ -7,7 +7,7 @@ const NoReadArticles = () => {
 
       <p className="head2 mt-[1.6rem]">앗..</p>
       <p className="body1-m text-font-gray-3 mt-[0.8rem]">
-        저장된 정보가 없어요
+        리마인드에서 안 읽은 북마크를 확인해 보세요.
       </p>
     </div>
   );
diff --git a/apps/client/src/pages/remind/components/noRemindArticles/NoRemindArticles.tsx b/apps/client/src/pages/remind/components/noRemindArticles/NoRemindArticles.tsx
new file mode 100644
index 00000000..057fbcd5
--- /dev/null
+++ b/apps/client/src/pages/remind/components/noRemindArticles/NoRemindArticles.tsx
@@ -0,0 +1,16 @@
+import chippiNoArticles from '@assets/chippi_x.svg';
+
+const NoRemindArticles = () => {
+  return (
+    <div className="mx-auto mt-[14rem] flex flex-col items-center">
+      <img src={chippiNoArticles} alt="No Articles" />
+
+      <p className="head2 mt-[1.6rem]">앗..</p>
+      <p className="body1-m text-font-gray-3 mt-[0.8rem]">
+        저장된 정보가 없어요
+      </p>
+    </div>
+  );
+};
+
+export default NoRemindArticles;
diff --git a/apps/client/src/shared/components/optionsMenuButton/OptionsMenuButton.tsx b/apps/client/src/shared/components/optionsMenuButton/OptionsMenuButton.tsx
index ab30056e..9c7ddc86 100644
--- a/apps/client/src/shared/components/optionsMenuButton/OptionsMenuButton.tsx
+++ b/apps/client/src/shared/components/optionsMenuButton/OptionsMenuButton.tsx
@@ -9,7 +9,7 @@ export interface OptionsMenuButtonProps {
 
 const ITEM_STYLE =
   'body4-r text-font-black-1 h-[3.6rem] w-full ' +
-  'flex items-center justify-center ' +
+  'flex items-center pl-[0.8rem] ' +
   'hover:bg-gray100 focus-visible:bg-gray100 active:bg-gray200 ' +
   'outline-none transition-colors';
 
diff --git a/apps/client/src/shared/components/sidebar/SideItem.tsx b/apps/client/src/shared/components/sidebar/SideItem.tsx
index 02907c0a..6db49b9d 100644
--- a/apps/client/src/shared/components/sidebar/SideItem.tsx
+++ b/apps/client/src/shared/components/sidebar/SideItem.tsx
@@ -34,7 +34,7 @@ export default function SideItem({
     <div
       className={cn(
         'flex h-[4.4rem] items-center gap-[0.8rem] rounded-[0.4rem] px-[0.8rem] py-[1.2rem]',
-        'transition-colors',
+        'cursor-pointer transition-colors',
         active ? 'bg-main0 text-main600' : 'bg-white-bg text-font-gray-2',
         className
       )}
diff --git a/apps/client/src/shared/components/sidebar/Sidebar.tsx b/apps/client/src/shared/components/sidebar/Sidebar.tsx
index c4a93faa..103cfa33 100644
--- a/apps/client/src/shared/components/sidebar/Sidebar.tsx
+++ b/apps/client/src/shared/components/sidebar/Sidebar.tsx
@@ -103,11 +103,11 @@ export function Sidebar() {
   return (
     <aside className="bg-white-bg sticky top-0 h-screen w-[24rem] border-r border-gray-300">
       <div className="flex h-full flex-col px-[0.8rem]">
-        <header className="py-[2.8rem]">
+        <header className="px-[0.8rem] py-[2.8rem]">
           <Icon
             name="logo"
             aria-label="Pinback 로고"
-            className="h-[2.4rem] w-[8.7rem]"
+            className="h-[2.4rem] w-[8.7rem] cursor-pointer"
           />
         </header>
 
@@ -119,7 +119,6 @@ export function Sidebar() {
             label="리마인드"
             active={activeTab === 'remind'}
             onClick={() => {
-              setSelectedCategoryId(null);
               closeMenu();
               goRemind();
             }}
@@ -131,7 +130,6 @@ export function Sidebar() {
             active={activeTab === 'mybookmark'}
             defaultOpen
             onClick={() => {
-              setSelectedCategoryId(null);
               closeMenu();
               goBookmarks();
             }}
diff --git a/packages/design-system/src/components/card/BaseCard.tsx b/packages/design-system/src/components/card/BaseCard.tsx
index 122fcf8a..cea96898 100644
--- a/packages/design-system/src/components/card/BaseCard.tsx
+++ b/packages/design-system/src/components/card/BaseCard.tsx
@@ -1,13 +1,19 @@
+import { cn } from '../../lib';
+
 interface BaseCardProps {
   onClick?: () => void;
   children: React.ReactNode;
+  className?: string;
 }
 
-const BaseCard = ({ children, onClick }: BaseCardProps) => {
+const BaseCard = ({ children, onClick, className }: BaseCardProps) => {
   return (
     <div
       onClick={onClick}
-      className="border-gray200 w-[24.8rem] overflow-hidden rounded-[1.2rem] border bg-white h-[12rem]"
+      className={cn(
+        'border-gray200 w-[24.8rem] overflow-hidden rounded-[1.2rem] border bg-white',
+        className
+      )}
     >
       {children}
     </div>
diff --git a/packages/design-system/src/components/card/MyBookmarkCard.tsx b/packages/design-system/src/components/card/MyBookmarkCard.tsx
index d5b89b73..e0211c3d 100644
--- a/packages/design-system/src/components/card/MyBookmarkCard.tsx
+++ b/packages/design-system/src/components/card/MyBookmarkCard.tsx
@@ -22,7 +22,7 @@ const MyBookmarkCard = ({
   onOptionsClick,
 }: MyBookmarkCardProps) => {
   return (
-    <BaseCard onClick={onClick}>
+    <BaseCard onClick={onClick} className="h-[33.8rem]">
       <div className="flex h-[12rem] w-full items-center justify-center overflow-hidden bg-[#F8F8FA]">
         {imageUrl ? (
           <img src={imageUrl} className="h-full w-full object-cover" />
diff --git a/packages/design-system/src/components/card/RemindCard.tsx b/packages/design-system/src/components/card/RemindCard.tsx
index b6e49cfc..e0432a28 100644
--- a/packages/design-system/src/components/card/RemindCard.tsx
+++ b/packages/design-system/src/components/card/RemindCard.tsx
@@ -22,7 +22,7 @@ const RemindCard = ({
   onOptionsClick,
 }: RemindCardProps) => {
   return (
-    <BaseCard onClick={onClick}>
+    <BaseCard onClick={onClick} className="h-[35.6rem]">
       <div className="bg-gray900 flex items-center gap-[0.4rem] py-[1.2rem] pl-[1.6rem] text-sm text-white">
         <Icon name="ic_clock_active" />
         <span className="body2-m text-main400 mr-[0.2rem]">