diff --git a/package.json b/package.json
index ee52e8ef..aa20cf09 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "env-cmd": "^10.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
     "react-query": "^3.39.3",
diff --git a/src/components/common/StepInfo.js b/src/components/common/StepInfo.js
index 4edec10d..8d85ce11 100644
--- a/src/components/common/StepInfo.js
+++ b/src/components/common/StepInfo.js
@@ -3,6 +3,7 @@ import { Box, Typography } from "@mui/material";
 import StepData from "../../data/StepData.json";
 import Button from "@mui/material/Button";
 import { activeState } from "../../recoil/commonState";
+import { modalVer } from "../../recoil/templateState";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { eachStepState, modalState } from "../../recoil/commonState";
 
@@ -10,33 +11,53 @@ import { eachStepState, modalState } from "../../recoil/commonState";
 const StepInfo = () => {
   //using recoil for matching step information and step
   const activeStep = useRecoilValue(activeState);
+  const [reorderable, setReorderable] = useRecoilState(modalVer);
 
   return (
     <div>
       {StepData.StepData.filter((eachStep) => eachStep.id === activeStep).map(
         (it) => {
-          const [modalValue, setModalValue] = useRecoilState(modalState(it.type));
-          const handleOpen = () => setModalValue(true);
+          const [modalValue, setModalValue] = useRecoilState(
+            modalState(it.type),
+          );
+          const handleOpen = (toggle) => {
+            setModalValue(true);
+            setReorderable(toggle);
+          };
           return (
             <div key={it.step}>
-              <Box_><StStepInfo>
-                <TitleH1>
-                  Step{it.step}. {it.title}
-                </TitleH1>
-                <ContentP>{it.content}</ContentP>
-                {activeStep > 1 ? (
-                  <ButtonWrapper
-                    size="large"
-                    variant="text"
-                    disableElevation
-                    onClick={handleOpen}
-                  >
-                    Find Template
-                  </ButtonWrapper>
-                ) : (
-                  <div></div>
-                )}
-              </StStepInfo></Box_>
+              <Box_>
+                <StStepInfo>
+                  <TitleH1>
+                    STEP{it.step}. {it.title}
+                  </TitleH1>
+                  <ContentP>{it.content}</ContentP>
+                  {activeStep > 1 ? (
+                    <ButtonWrapper
+                      size="large"
+                      variant="text"
+                      disableElevation
+                      onClick={() => handleOpen(false)}
+                    >
+                      Find Template
+                    </ButtonWrapper>
+                  ) : (
+                    <div></div>
+                  )}
+                  {activeStep > 2 ? (
+                    <ButtonWrapper
+                      size="large"
+                      variant="text"
+                      disableElevation
+                      onClick={() => handleOpen(true)}
+                    >
+                      Generate on your own
+                    </ButtonWrapper>
+                  ) : (
+                    <div></div>
+                  )}
+                </StStepInfo>
+              </Box_>
             </div>
           );
         },
@@ -49,26 +70,29 @@ const StStepInfo = styled.div`
   display: flex;
   margin-top: 10%;
   flex-direction: column;
+  justify-content: space-evenly;
   align-items: center;
   gap: 2rem;
 `;
 
 const TitleH1 = styled(Typography)`
-  font-size: 2.2rem;
+  font-size: 2.3rem;
+  font-weight: bolder;
   text-align: center;
 `;
 
 const ContentP = styled.p`
   margin: 0rem 2rem 0rem 2rem;
   text-align: justify;
-  font-size: 1.3rem;
+  word-wrap: break-word;
+  font-size: 1.7rem;
   line-height: 2.2rem;
 `;
 
 const ButtonWrapper = styled(Button)`
   padding: 0.8rem 1.6rem 0.8rem 1.6rem;
   height: 100%;
-  margin-top: 50%;
+  margin: 1rem;
   font-size: 2rem;
 `;
 
diff --git a/src/components/common/template/TemplateList.js b/src/components/common/template/TemplateList.js
index 58c4f29b..3e1585f9 100644
--- a/src/components/common/template/TemplateList.js
+++ b/src/components/common/template/TemplateList.js
@@ -10,15 +10,19 @@ import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import axios from "axios";
 import {
   templateContent,
   templatePreviewState,
   templateSelectState,
+  modalVer,
 } from "../../../recoil/templateState";
 
 // props -> type(pr, readme, contributing)
 export function TemplateList(props) {
+  // React state to track order of items
+  const [selectedData, setSelectedData] = useState([]);
   const [data, setData] = useState([]);
   const url = process.env.REACT_APP_SERVER_URL + "/file/" + props.type;
 
@@ -26,6 +30,7 @@ export function TemplateList(props) {
   const [showValue, setShowValue] = useRecoilState(
     templatePreviewState(props.type),
   );
+  const reorderable = useRecoilValue(modalVer);
 
   const handleSelect = (value) => {
     setShowValue({
@@ -35,6 +40,22 @@ export function TemplateList(props) {
       repoUrl: value.repoUrl,
       content: value.content,
     });
+    let tmp = selectedData;
+    tmp.push(value.title);
+    setSelectedData(tmp);
+    console.log(selectedData);
+  };
+
+  const handleDrop = (droppedItem) => {
+    // Ignore drop outside droppable container
+    if (!droppedItem.destination) return;
+    let updatedList = [...selectedData];
+    // Remove dragged item
+    const [reorderedItem] = updatedList.splice(droppedItem.source.index, 1);
+    // Add dropped item
+    updatedList.splice(droppedItem.destination.index, 0, reorderedItem);
+    // Update State
+    setSelectedData(updatedList);
   };
 
   useEffect(() => {
@@ -62,6 +83,10 @@ export function TemplateList(props) {
     };
   }, []);
 
+  useEffect(() => {
+    console.log(selectedData);
+  }, [selectedData]);
+
   return (
     <Item>
       <Typography
@@ -102,6 +127,45 @@ export function TemplateList(props) {
             overscanCount: 5,
           }}
         >
+          {reorderable ? (
+            <DragDropContext onDragEnd={handleDrop}>
+              <Droppable droppableId="list-container">
+                {(provided) => (
+                  <div
+                    className="list-container"
+                    {...provided.droppableProps}
+                    ref={provided.innerRef}
+                  >
+                    {selectedData.map((item, index) => (
+                      <Draggable key={item} draggableId={item} index={index}>
+                        {(provided) => (
+                          <div
+                            className="item-container"
+                            ref={provided.innerRef}
+                            {...provided.dragHandleProps}
+                            {...provided.draggableProps}
+                          >
+                            <div className="left-item">{item}</div>
+                            <button
+                              className="right-item"
+                              onClick={() => {
+                                console.log(item);
+                              }}
+                            >
+                              remove
+                            </button>
+                          </div>
+                        )}
+                      </Draggable>
+                    ))}
+                    {provided.placeholder}
+                  </div>
+                )}
+              </Droppable>
+            </DragDropContext>
+          ) : (
+            <div></div>
+          )}
           <div>
             {data.map((it) => (
               <div key={it._id}>
@@ -114,7 +178,9 @@ export function TemplateList(props) {
                 >
                   <ListItemButton>
                     <ListItemText
-                      primary={props.type === "contributing" ? it.type : it.title}
+                      primary={
+                        props.type === "contributing" ? it.type : it.title
+                      }
                       id="PR-desc"
                       variant="h6"
                       gutterBottom
@@ -122,7 +188,9 @@ export function TemplateList(props) {
                       m={2}
                     />
                     <ListItemText
-                      primary={props.type === "contributing" ? it.title : it.repoName}
+                      primary={
+                        props.type === "contributing" ? it.title : it.repoName
+                      }
                       id="PR-desc"
                       variant="h6"
                       gutterBottom
diff --git a/src/index.js b/src/index.js
index e57a85cb..944c4c08 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,11 +9,11 @@ RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false;
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
-    <RecoilRoot>
-      <App />
-    </RecoilRoot>
-  </React.StrictMode>,
+  // <React.StrictMode>
+  <RecoilRoot>
+    <App />
+  </RecoilRoot>,
+  // </React.StrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function
diff --git a/src/pages/ReadmeTemplatePage.js b/src/pages/ReadmeTemplatePage.js
index 20fd7f8a..42731275 100644
--- a/src/pages/ReadmeTemplatePage.js
+++ b/src/pages/ReadmeTemplatePage.js
@@ -11,15 +11,15 @@ import MDEditor from "@uiw/react-md-editor";
 
 
 function ReadmeTemplatePage() {
-  const [modalValue, setModalValue] = useRecoilState(modalState("readme"));
-  const [content, setContent] = useRecoilState(templateContent("readme"));
+  // const [modalValue, setModalValue] = useRecoilState(modalState("readme"));
+  // const [content, setContent] = useRecoilState(templateContent("readme"));
   const [stepComplete, setStepComplted] = useRecoilState(eachStepState("5"));
 
   useEffect(() => {
     setStepComplted(true);
   }, []);
 
-  const handleOpen = () => setModalValue(true);
+  // const handleOpen = () => setModalValue(true);
 
   return (
     <StReadmeTemplatePage>
diff --git a/src/recoil/templateState.js b/src/recoil/templateState.js
index b759585b..1fde87ce 100644
--- a/src/recoil/templateState.js
+++ b/src/recoil/templateState.js
@@ -17,3 +17,8 @@ export const templateContent = atomFamily({
   key: "templateContent",
   default: "",
 });
+
+export const modalVer = atom({
+  key: "reorderable",
+  default: false,
+});
diff --git a/src/routes/router.js b/src/routes/router.js
index 22e161b6..57f6c9d8 100644
--- a/src/routes/router.js
+++ b/src/routes/router.js
@@ -1,7 +1,7 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import MainPage from "../pages/MainPage";
 import LoginPage from "../pages/Login";
-import SelectTypePage from "../pages/SelectTypePage";
+// import SelectTypePage from "../pages/SelectTypePage";
 import PRTemplatePage from "../pages/PRTemplatePage";
 import { Layout } from "../layout/Layout";
 import CreateRepo from "../pages/CreateRepoPage";
@@ -15,7 +15,7 @@ const Router = () => {
       <Routes>
         <Route path="/" element={<MainPage />} />
         <Route path="/login" element={<LoginPage />} />
-        <Route path="/select" element={<SelectTypePage />} />
+        {/* <Route path="/select" element={<SelectTypePage />} /> */}
         <Route element={<Layout />}>
           <Route path="/step1" element={<CreateRepo />} />
           <Route path="/step2" element={<LicensePage />} />
diff --git a/yarn.lock b/yarn.lock
index 25c70171..9a15621d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1180,6 +1180,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.15.4":
+  version "7.23.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d"
+  integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.22.10":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.15.tgz#38f46494ccf6cf020bd4eed7124b425e83e523b8"
@@ -2353,6 +2360,14 @@
   dependencies:
     "@types/unist" "^2"
 
+"@types/hoist-non-react-statics@^3.3.0":
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#dc1e9ded53375d37603c479cc12c693b0878aa2a"
+  integrity sha512-YIQtIg4PKr7ZyqNPZObpxfHsHEmuB8dXCxd6qVcGuQVDK2bpsF7bYNnBJ4Nn7giuACZg+WewExgrtAJ3XnA4Xw==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -2487,6 +2502,16 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-redux@^7.1.20":
+  version "7.1.27"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.27.tgz#1afb31f7354bf787e162c10ff3fa19bafa9e6b57"
+  integrity sha512-xj7d9z32p1K/eBmO+OEy+qfaWXtcPlN8f1Xk3Ne0p/ZRQ867RI5bQ/bpBtxbqU1AHNhKJSgGvld/P2myU2uYkg==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react-transition-group@^4.4.6":
   version "4.4.6"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e"
@@ -3937,6 +3962,13 @@ css-blank-pseudo@^3.0.3:
   dependencies:
     postcss-selector-parser "^6.0.9"
 
+css-box-model@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
+  integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
+  dependencies:
+    tiny-invariant "^1.0.6"
+
 css-color-keywords@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
@@ -5676,7 +5708,7 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7313,7 +7345,7 @@ memfs@^3.1.2, memfs@^3.4.3:
   dependencies:
     fs-monkey "^1.0.4"
 
-"memoize-one@>=3.1.1 <6":
+"memoize-one@>=3.1.1 <6", memoize-one@^5.1.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
@@ -8825,6 +8857,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+raf-schd@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
+  integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
+
 raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
@@ -8866,6 +8903,19 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
+react-beautiful-dnd@^13.1.1:
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz#b0f3087a5840920abf8bb2325f1ffa46d8c4d0a2"
+  integrity sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+    css-box-model "^1.2.0"
+    memoize-one "^5.1.1"
+    raf-schd "^4.0.2"
+    react-redux "^7.2.0"
+    redux "^4.0.4"
+    use-memo-one "^1.1.1"
+
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
@@ -8969,6 +9019,18 @@ react-query@^3.39.3:
     broadcast-channel "^3.4.1"
     match-sorter "^6.0.2"
 
+react-redux@^7.2.0:
+  version "7.2.9"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"
+  integrity sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/react-redux" "^7.1.20"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@@ -9138,6 +9200,13 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux@^4.0.0, redux@^4.0.4:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
+  integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 reflect.getprototypeof@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3"
@@ -10321,6 +10390,11 @@ thunky@^1.0.2:
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
+tiny-invariant@^1.0.6:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
+  integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
+
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@@ -10656,6 +10730,11 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+use-memo-one@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
+  integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"