diff --git a/app/(sub-page)/my/page.tsx b/app/(sub-page)/my/page.tsx
index f4075c0c..a1bf7f11 100644
--- a/app/(sub-page)/my/page.tsx
+++ b/app/(sub-page)/my/page.tsx
@@ -1,14 +1,20 @@
 import LectureSearch from '@/app/ui/lecture/lecture-search';
 import TakenLecture from '@/app/ui/lecture/taken-lecture';
+import UserInfoNavigator, { UserInfoNavigatorSkeleton } from '@/app/ui/user/user-info-navigator/user-info-navigator';
 import ContentContainer from '@/app/ui/view/atom/content-container';
 import Drawer from '@/app/ui/view/molecule/drawer/drawer';
 import { DIALOG_KEY } from '@/app/utils/key/dialog.key';
+import { Suspense } from 'react';
 
 export default function MyPage() {
   return (
     <>
       <ContentContainer className="flex">
-        <div className="hidden lg:w-[30%] lg:block">정보칸</div>
+        <div className="hidden lg:w-[30%] lg:block">
+          <Suspense fallback={<UserInfoNavigatorSkeleton />}>
+            <UserInfoNavigator />
+          </Suspense>
+        </div>
         <div className="w-full lg:w-[70%] lg:px-[20px]">
           <TakenLecture />
         </div>
diff --git a/app/mocks/handlers/user-handler.mock.ts b/app/mocks/handlers/user-handler.mock.ts
index bde7ac3a..af26d9d7 100644
--- a/app/mocks/handlers/user-handler.mock.ts
+++ b/app/mocks/handlers/user-handler.mock.ts
@@ -33,12 +33,12 @@ export const userHandlers = [
   }),
   http.get<never, never, UserInfoResponse | ErrorResponseData>(`${API_PATH.user}`, async ({ request }) => {
     const accessToken = request.headers.get('Authorization')?.replace('Bearer ', '');
-    if (!accessToken) {
+    if (accessToken === 'undefined' || !accessToken) {
       return HttpResponse.json({ status: 401, message: 'Unauthorized' }, { status: 401 });
     }
 
     const userInfo = mockDatabase.getUserInfo(mockDecryptToken(accessToken).authId);
-    await delay(500);
+    await delay(3000);
 
     if (!userInfo) {
       return HttpResponse.json({ status: 401, message: 'Unauthorized' }, { status: 401 });
diff --git a/app/ui/user/user-info-navigator/user-info-navigator.tsx b/app/ui/user/user-info-navigator/user-info-navigator.tsx
new file mode 100644
index 00000000..e975e6bc
--- /dev/null
+++ b/app/ui/user/user-info-navigator/user-info-navigator.tsx
@@ -0,0 +1,41 @@
+import Avatar from '../../view/atom/avatar/avatar';
+import Button from '../../view/atom/button/button';
+import { getUserInfo } from '@/app/business/user/user.query';
+import Skeleton from '../../view/atom/skeleton';
+
+export default async function UserInfoNavigator() {
+  const userInfo = await getUserInfo();
+
+  return (
+    <div className="flex flex-col items-center p-4 ">
+      <Avatar className="w-24 h-24" alt="Profile picture" src={'/assets/profile-image.png'} />
+
+      <div className="my-5 text-lg">
+        <span className="font-semibold">{userInfo.studentName}</span>
+        <span>님</span>
+      </div>
+      <div className="mb-3 text-sm">{userInfo.major}</div>
+      <div className="text-sm text-gray-400">{userInfo.studentNumber}</div>
+
+      <div className="mt-9">
+        <Button size="sm" variant="secondary" label="로그아웃" />
+      </div>
+      <div className="mt-2">
+        <Button size="sm" variant="text" label="회원탈퇴하기" />
+      </div>
+    </div>
+  );
+}
+
+export function UserInfoNavigatorSkeleton() {
+  return (
+    <div className="flex flex-col items-center p-4  space-y-3">
+      <Skeleton className="h-24 w-24 rounded-full" />
+      <div className="space-y-6">
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-4 w-32" />
+        <Skeleton className="h-4 w-32" />
+      </div>
+    </div>
+  );
+}
diff --git a/app/ui/view/atom/avatar/avatar.stories.tsx b/app/ui/view/atom/avatar/avatar.stories.tsx
new file mode 100644
index 00000000..e548910e
--- /dev/null
+++ b/app/ui/view/atom/avatar/avatar.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Avatar from './avatar';
+
+const meta = {
+  title: 'ui/view/atom/Avatar',
+  component: Avatar,
+} as Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    src: './assets/profile-image.png',
+  },
+};
diff --git a/app/ui/view/atom/avatar/avatar.tsx b/app/ui/view/atom/avatar/avatar.tsx
new file mode 100644
index 00000000..5ab47206
--- /dev/null
+++ b/app/ui/view/atom/avatar/avatar.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '@/app/utils/shadcn/utils';
+
+interface AvatarProps {
+  src: string;
+  fallback?: React.ReactNode;
+  alt?: string;
+  className?: string;
+}
+
+export default function Avatar({ src, fallback, alt, className }: AvatarProps) {
+  return (
+    <AvatarRoot className={className}>
+      <AvatarImage src={src} alt={alt} />
+      <AvatarFallback>{fallback}</AvatarFallback>
+    </AvatarRoot>
+  );
+}
+
+const AvatarRoot = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+    {...props}
+  />
+));
+AvatarRoot.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800',
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
diff --git a/app/ui/view/atom/skeleton.tsx b/app/ui/view/atom/skeleton.tsx
new file mode 100644
index 00000000..4cfa96e4
--- /dev/null
+++ b/app/ui/view/atom/skeleton.tsx
@@ -0,0 +1,5 @@
+import { cn } from '@/app/utils/shadcn/utils';
+
+export default function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('animate-pulse rounded-md bg-slate-100 dark:bg-slate-800', className)} {...props} />;
+}
diff --git a/package-lock.json b/package-lock.json
index 9f39b401..3ace1a6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@heroicons/react": "^2.1.1",
         "@mswjs/http-middleware": "^0.9.2",
         "@radix-ui/react-alert-dialog": "^1.0.5",
+        "@radix-ui/react-avatar": "^1.0.4",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-slot": "^1.0.2",
@@ -3926,6 +3927,32 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.0.4.tgz",
+      "integrity": "sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
diff --git a/package.json b/package.json
index 5973ac8f..fee2e12a 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@heroicons/react": "^2.1.1",
     "@mswjs/http-middleware": "^0.9.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
diff --git a/public/assets/profile-image.png b/public/assets/profile-image.png
new file mode 100644
index 00000000..c53f181c
Binary files /dev/null and b/public/assets/profile-image.png differ