diff --git a/src/App.js b/src/App.js
index e6ad269..d7d87d5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,12 +2,21 @@ import React from 'react';
 import MainLayout from './components/MainLayout/MainLayout';
 import CheckPage from './components/Tickets/CheckPage/CheckPage';
 import { Routes, Route, useLocation } from 'react-router-dom';
+import { SocketProvider } from './contexts/socketProvider';
 function App({ match }) {
   // const location = useLocation();
   return (
     <>
       <Routes>
-        <Route path="*" element={<MainLayout />} />
+        <Route
+          path="*"
+          element={
+            <SocketProvider>
+              <MainLayout />{' '}
+            </SocketProvider>
+          }
+        />
+
         <Route exact path="/tickets/check" element={<CheckPage />} />
       </Routes>
     </>
diff --git a/src/components/Tickets/EnterPage/EnterList.js b/src/components/Tickets/EnterPage/EnterList.js
index fcbbcf0..89808b6 100644
--- a/src/components/Tickets/EnterPage/EnterList.js
+++ b/src/components/Tickets/EnterPage/EnterList.js
@@ -10,6 +10,7 @@ const ContainerHeight = 800;
 
 function EnterList() {
   const { ticketList } = useSelector(state => state.enterPage);
+  const reverse = [...ticketList].reverse();
 
   const onScroll = e => {
     if (
@@ -31,7 +32,7 @@ function EnterList() {
           <Col span={16}>
             <List>
               <VirtualList
-                data={ticketList}
+                data={reverse}
                 height={ContainerHeight}
                 itemHeight={47}
                 itemKey="email"
diff --git a/src/components/Tickets/EnterPage/EnterPage.js b/src/components/Tickets/EnterPage/EnterPage.js
index a678271..0519918 100644
--- a/src/components/Tickets/EnterPage/EnterPage.js
+++ b/src/components/Tickets/EnterPage/EnterPage.js
@@ -1,11 +1,9 @@
 import React from 'react';
 import EnterList from './EnterList';
-import SocketConnect from './SocketConnect';
 
 function EnterPage() {
   return (
     <div>
-      <SocketConnect />
       <EnterList />
     </div>
   );
diff --git a/src/components/Tickets/EnterPage/RecentEnter.js b/src/components/Tickets/EnterPage/RecentEnter.js
index 426ef93..302df8d 100644
--- a/src/components/Tickets/EnterPage/RecentEnter.js
+++ b/src/components/Tickets/EnterPage/RecentEnter.js
@@ -7,14 +7,6 @@ import { Card, Tag, Space } from 'antd';
 import moment from 'moment';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import styled from 'styled-components';
-
-styled(Card)`
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  position: relative;
-`;
 
 function RecentEnter() {
   const { enterData } = useSelector(state => state.enterPage);
diff --git a/src/components/Tickets/EnterPage/SocketConnect.js b/src/components/Tickets/EnterPage/SocketConnect.js
deleted file mode 100644
index 18d3074..0000000
--- a/src/components/Tickets/EnterPage/SocketConnect.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { io } from 'socket.io-client';
-import { enterPage } from '../../../state/actions-creators/enterPage';
-
-function SocketConnect() {
-  const dispatch = useDispatch();
-  const { accessToken } = useSelector(state => state.auth);
-  const { ticketData, ticketList } = useSelector(state => state.enterPage);
-
-  console.log('accessToken', accessToken);
-
-  const socket = io('https://api.gosrock.band/socket/admin', {
-    auth: {
-      token: accessToken
-    }
-  });
-
-  useEffect(() => {
-    socket.on('connect', data => {
-      console.log('connection server', data);
-    });
-    socket.on('enter', data => {
-      console.log('enter', data);
-      dispatch(
-        enterPage({
-          data: data,
-          enterTime: new Date()
-        })
-      );
-    });
-
-    console.log('ticketData', ticketData);
-    console.log('ticketList', ticketList);
-
-    return () => {
-      socket.close();
-    };
-  }, [dispatch, ticketData]);
-
-  socket.on('connect_error', err => {
-    console.log(err instanceof Error); // true
-    console.log(err.message); // not authorized
-    console.log(err.data); // { content: "Please retry later" }
-  });
-}
-
-export default SocketConnect;
diff --git a/src/contexts/socketContext.js b/src/contexts/socketContext.js
new file mode 100644
index 0000000..160afdd
--- /dev/null
+++ b/src/contexts/socketContext.js
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const SocketContext = createContext({});
+
+export default SocketContext;
diff --git a/src/contexts/socketProvider.js b/src/contexts/socketProvider.js
new file mode 100644
index 0000000..8dde7cd
--- /dev/null
+++ b/src/contexts/socketProvider.js
@@ -0,0 +1,62 @@
+import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import { notification } from 'antd';
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { io } from 'socket.io-client';
+import { enterPage } from '../state/actions-creators/enterPage';
+import SocketContext from './socketContext';
+
+const SocketProvider = ({ children }) => {
+  const dispatch = useDispatch();
+  const { accessToken } = useSelector(state => state.auth);
+  const placement = 'bottomRight';
+
+  const socket = io('https://api.gosrock.band/socket/admin', {
+    auth: {
+      token: accessToken
+    }
+  });
+
+  useEffect(() => {
+    socket.on('connect', data => {
+      console.log('connection server', data);
+    });
+    socket.on('enter', data => {
+      dispatch(
+        enterPage({
+          data: data,
+          enterTime: new Date()
+        })
+      );
+
+      notification.open({
+        message: `[${moment(new Date())
+          .utc(true)
+          .format('HH:mm')}] 입장 알림 🔔 `,
+        description: `${data.name}, ${data.phoneNumber}`,
+        placement,
+        icon:
+          data.success === true ? (
+            <CheckCircleOutlined style={{ color: '#89cc8a' }} />
+          ) : (
+            <CloseCircleOutlined style={{ color: '#cc8989' }} />
+          )
+      });
+    });
+
+    return () => {
+      socket.close();
+    };
+  }, []);
+
+  socket.on('connect_error', err => {
+    console.log(err instanceof Error); // true
+    console.log(err.message); // not authorized
+    console.log(err.data); // { content: "Please retry later" }
+  });
+
+  return <SocketContext.Provider>{children}</SocketContext.Provider>;
+};
+
+export { SocketProvider };
diff --git a/src/index.js b/src/index.js
index 350287a..efd201b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
+
 // pages
 import {
   Routes,