diff --git a/src/App.jsx b/src/App.jsx
index 421c125..79c02b7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -12,7 +12,7 @@ import Forget from "./containers/AccountPortal/forget";
 import EmailVerifyPage from "./containers/EmailVerifyPage";
 import Loading from "./containers/Loading";
 import PostPage from "./containers/PostPage";
-import { fetchUserState } from './slices';
+import { fetchUserState } from './features/actions';
 import { toast, ToastContainer } from 'react-toastify';
 import "react-toastify/dist/ReactToastify.css";
 import 'sweetalert2/src/sweetalert2.scss';
diff --git a/src/containers/AccountPortal/login.jsx b/src/containers/AccountPortal/login.jsx
index e0e4a6f..30dc3c7 100644
--- a/src/containers/AccountPortal/login.jsx
+++ b/src/containers/AccountPortal/login.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
-import { setLoading } from '../../slices';
+import { setLoading } from '../../features/actions';
 import React from 'react';
 import UserApi from '../../utils/UserAPI';
 import { sleep } from '../../utils/commonUtils';
@@ -48,13 +48,13 @@ const Login = () => {
         }
     };
 
-    
+
     useEffect(() => {
         (async () => {
             await UserApi.waitUntilLoaded();
             setLoaded(true);
-        })()
-    })
+        })();
+    });
 
     useEffect(() =>{
         if (loginStatus) {
@@ -66,31 +66,31 @@ const Login = () => {
 
     return (
         <div className="page" ref={pageRef}>
-                {loaded && <div ref={unloginElementContainer} className="login-page unlogin">
+            {loaded && <div ref={unloginElementContainer} className="login-page unlogin">
                 <TransitionTriangle active={loginSuccess} text="登入成功" redirectTo='/' />
-                    <h1><b>登入</b></h1>
-                    <span>
-                        <input
-                            type="text"
-                            name="username"
-                            placeholder="使用者名稱"
-                            value={username}
-                            autoComplete='off'
-                            onChange={(e) => setUsername(e.target.value)}
-                        />
-                    </span>
-                    <span>
-                        <input
-                            type="password"
-                            name="password"
-                            placeholder="密碼"
-                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
-                        />
-                    </span>
-                    <button onClick={handleSubmit}>登入</button>
-                    {error && <p className="error">{error}</p>}
-                </div>}
+                <h1><b>登入</b></h1>
+                <span>
+                    <input
+                        type="text"
+                        name="username"
+                        placeholder="使用者名稱"
+                        value={username}
+                        autoComplete='off'
+                        onChange={(e) => setUsername(e.target.value)}
+                    />
+                </span>
+                <span>
+                    <input
+                        type="password"
+                        name="password"
+                        placeholder="密碼"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                    />
+                </span>
+                <button onClick={handleSubmit}>登入</button>
+                {error && <p className="error">{error}</p>}
+            </div>}
         </div>
     );
 };
diff --git a/src/containers/ArticlePage/CommentContainer.jsx b/src/containers/ArticlePage/CommentContainer.jsx
index 96366d6..b39ac65 100644
--- a/src/containers/ArticlePage/CommentContainer.jsx
+++ b/src/containers/ArticlePage/CommentContainer.jsx
@@ -6,7 +6,7 @@ import ReactionButtons from './ReactionButtons';
 import { toast, Bounce } from 'react-toastify';
 import ReplyArea from './ReplyArea';
 import { useSelector, useDispatch } from 'react-redux';
-import { fetchReplies } from '../../slices';
+import { fetchReplies } from '../../features/actions';
 import { replyTagCheck } from '../../utils/commonUtils';
 import UserAPI from '../../utils/UserAPI';
 import LoadMore from './LoadMore';
@@ -95,7 +95,7 @@ const CommentContainer = ({ articleId, commentData, level, parentReply = null, p
             await comment.bp(articleId, id);
         }
         catch (e) {
-            console.error(e)
+            console.error(e);
             setLock(false);
             return toast.error('此事件交互失敗', {
                 position: "bottom-right",
@@ -126,14 +126,14 @@ const CommentContainer = ({ articleId, commentData, level, parentReply = null, p
     const toggleReply = () => {
         if (level == 1) {
             // console.log(parentReply)
-            const [text, setText] = parentReply
+            const [text, setText] = parentReply;
             if (replyTagCheck(text)) {
-                var msg = text.split(" ")
-                msg.shift()
+                var msg = text.split(" ");
+                msg.shift();
                 // console.log(msg)
-                setText(msg.join(" "))
+                setText(msg.join(" "));
             }
-            setText(`@${by} ${text}`)
+            setText(`@${by} ${text}`);
             return;
         }
         setReplyEnabled(!replyEnabled);
diff --git a/src/containers/ArticlePage/LoadMore.jsx b/src/containers/ArticlePage/LoadMore.jsx
index f15f82c..1ec24ec 100644
--- a/src/containers/ArticlePage/LoadMore.jsx
+++ b/src/containers/ArticlePage/LoadMore.jsx
@@ -1,8 +1,8 @@
 import { useDispatch } from "react-redux";
-import { fetchReplies } from "../../slices";
+import { fetchReplies } from "../../features/actions";
 
 
-const LoadMore = ({articleId = 0, level, parentId, commentList})=>{
+const LoadMore = ({ articleId = 0, level, parentId, commentList })=>{
     var dispatch = useDispatch();
 
     var style = {
@@ -10,9 +10,9 @@ const LoadMore = ({articleId = 0, level, parentId, commentList})=>{
     };
 
     var loadMoreHandler = ()=>{
-        dispatch(fetchReplies({ articleId, commentId: parentId, lastId: commentList[commentList.length - 1].id}));
-    }
-    
+        dispatch(fetchReplies({ articleId, commentId: parentId, lastId: commentList[commentList.length - 1].id }));
+    };
+
     return (
         <div style={style} className="reply-area">
             <label>
@@ -21,6 +21,6 @@ const LoadMore = ({articleId = 0, level, parentId, commentList})=>{
             </label>
         </div>
     );
-}
+};
 
-export default LoadMore;
\ No newline at end of file
+export default LoadMore;
diff --git a/src/containers/ArticlePage/ReplyArea.jsx b/src/containers/ArticlePage/ReplyArea.jsx
index 900b61f..c65ed79 100644
--- a/src/containers/ArticlePage/ReplyArea.jsx
+++ b/src/containers/ArticlePage/ReplyArea.jsx
@@ -2,13 +2,13 @@ import { useState } from 'react';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
-import { fetchComments, fetchReplies } from '../../slices';
+import { fetchComments, fetchReplies } from '../../features/actions';
 import { toast, Bounce } from 'react-toastify';
 import './ReplyArea.scss';
 import { article, comment } from '../../utils/ArticleAPI';
 
 
-const ReplyArea = ({ level, parentId, textState = useState('')}) => {
+const ReplyArea = ({ level, parentId, textState = useState('') }) => {
     if (level > 1) {
         level = 1;
     }
diff --git a/src/containers/ArticlePage/index.jsx b/src/containers/ArticlePage/index.jsx
index d6327c7..2dcbca2 100644
--- a/src/containers/ArticlePage/index.jsx
+++ b/src/containers/ArticlePage/index.jsx
@@ -4,7 +4,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import ArticleContainer from './ArticleContainer';
 import CommentContainer from './CommentContainer';
 
-import { fetchArticle, fetchComments, clearComment } from '../../slices';
+import { fetchArticle, fetchComments, clearComment } from '../../features/actions';
 import './ArticlePage.scss';
 
 const ArticlePage = () => {
diff --git a/src/containers/IndexPage/index.jsx b/src/containers/IndexPage/index.jsx
index c3ba743..5384967 100644
--- a/src/containers/IndexPage/index.jsx
+++ b/src/containers/IndexPage/index.jsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import { fetchArticleList } from '../../slices';
+import { fetchArticleList } from '../../features/actions';
 import IdeaShow from './IdeaShow';
 import IndexContentContainer from './IndexContentContainer';
 
diff --git a/src/features/actions.js b/src/features/actions.js
new file mode 100644
index 0000000..d84207a
--- /dev/null
+++ b/src/features/actions.js
@@ -0,0 +1,8 @@
+export * from './articleListSlice';
+export * from './articleSlice';
+export * from './commentsSlice';
+export * from './loadingSlice';
+export * from './userStateSlice';
+
+
+export default {};
diff --git a/src/slices/articleList.js b/src/features/articleListSlice.js
similarity index 93%
rename from src/slices/articleList.js
rename to src/features/articleListSlice.js
index f0930e7..7b1331c 100644
--- a/src/slices/articleList.js
+++ b/src/features/articleListSlice.js
@@ -3,7 +3,7 @@ import { article } from '../utils/ArticleAPI';
 
 const initialState = [];
 
-export const fetchArticleList = createAsyncThunk('articleList/fetchArticleList', async (sortBy, lastId) => {
+export const fetchArticleList = createAsyncThunk('articleList/fetchArticleList', async ({ sortBy, lastId } = {}) => {
     var lastId = 0;
     const response = await article.getArticleList(sortBy, lastId);
     return response?.data?.articles;
diff --git a/src/slices/article.js b/src/features/articleSlice.js
similarity index 100%
rename from src/slices/article.js
rename to src/features/articleSlice.js
diff --git a/src/slices/comments.js b/src/features/commentsSlice.js
similarity index 100%
rename from src/slices/comments.js
rename to src/features/commentsSlice.js
diff --git a/src/features/index.js b/src/features/index.js
new file mode 100644
index 0000000..da6ebec
--- /dev/null
+++ b/src/features/index.js
@@ -0,0 +1,3 @@
+export * from './actions';
+
+export default {};
diff --git a/src/slices/loading.js b/src/features/loadingSlice.js
similarity index 100%
rename from src/slices/loading.js
rename to src/features/loadingSlice.js
diff --git a/src/features/reducers.js b/src/features/reducers.js
new file mode 100644
index 0000000..8f58a05
--- /dev/null
+++ b/src/features/reducers.js
@@ -0,0 +1,13 @@
+import articleList from './articleListSlice';
+import article from './articleSlice';
+import comments from './commentsSlice';
+import loading from './loadingSlice';
+import userState from './userStateSlice';
+
+export default {
+    articleList,
+    article,
+    comments,
+    loading,
+    userState,
+};
diff --git a/src/slices/userState.js b/src/features/userStateSlice.js
similarity index 100%
rename from src/slices/userState.js
rename to src/features/userStateSlice.js
diff --git a/src/slices/index.js b/src/slices/index.js
deleted file mode 100644
index bb95f4b..0000000
--- a/src/slices/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import articleList from './articleList';
-import article from './article';
-import comments from './comments';
-import loading from './loading';
-import userState from './userState';
-
-export * from './articleList';
-export * from './article';
-export * from './comments';
-export * from './loading';
-export * from './userState';
-
-
-export default {
-    articleList,
-    article,
-    comments,
-    loading,
-    userState,
-};
diff --git a/src/store.js b/src/store.js
index 40fa925..7d1abb7 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,5 +1,5 @@
 import { configureStore } from '@reduxjs/toolkit';
-import reducers from './slices';
+import reducers from './features/reducers';
 
 export default configureStore({
     reducer: reducers,