diff --git a/Frontend/the-message/src/App.tsx b/Frontend/the-message/src/App.tsx
index 5bdd4e1..a87a9f3 100644
--- a/Frontend/the-message/src/App.tsx
+++ b/Frontend/the-message/src/App.tsx
@@ -1,19 +1,8 @@
-import { ChakraProvider } from '@chakra-ui/react'
-import {
-  RouterProvider,
-} from "react-router-dom";
-import router from '../src/routes/route';
-
-
-
-
-
-const App = () => {
+import Layout from './layout/layout'
+function App() {
   return (
     <>
-      <ChakraProvider>
-        <RouterProvider router={router} />
-      </ChakraProvider>
+     <Layout/>
     </>
   )
 }
diff --git a/Frontend/the-message/src/assets/images/allset.jpg b/Frontend/the-message/src/assets/images/allset.jpg
deleted file mode 100644
index f7ec95a..0000000
Binary files a/Frontend/the-message/src/assets/images/allset.jpg and /dev/null differ
diff --git a/Frontend/the-message/src/assets/images/backOfFunctionCard.jpg b/Frontend/the-message/src/assets/images/backOfFunctionCard.jpg
deleted file mode 100644
index 3e04c69..0000000
Binary files a/Frontend/the-message/src/assets/images/backOfFunctionCard.jpg and /dev/null differ
diff --git a/Frontend/the-message/src/assets/images/backOfLineUpCard.jpg b/Frontend/the-message/src/assets/images/backOfLineUpCard.jpg
deleted file mode 100644
index 12f2a75..0000000
Binary files a/Frontend/the-message/src/assets/images/backOfLineUpCard.jpg and /dev/null differ
diff --git a/Frontend/the-message/src/assets/images/lurking.jpg b/Frontend/the-message/src/assets/images/lurking.jpg
deleted file mode 100644
index 14d7b16..0000000
Binary files a/Frontend/the-message/src/assets/images/lurking.jpg and /dev/null differ
diff --git a/Frontend/the-message/src/assets/images/lurking1.jpg b/Frontend/the-message/src/assets/images/lurking1.jpg
deleted file mode 100644
index 1549d83..0000000
Binary files a/Frontend/the-message/src/assets/images/lurking1.jpg and /dev/null differ
diff --git a/Frontend/the-message/src/assets/images/millitaryIntelligence.jpg b/Frontend/the-message/src/assets/images/millitaryIntelligence.jpg
deleted file mode 100644
index 7d44751..0000000
Binary files a/Frontend/the-message/src/assets/images/millitaryIntelligence.jpg and /dev/null differ
diff --git a/Frontend/the-message/src/assets/images/soysauce.jpg b/Frontend/the-message/src/assets/images/soysauce.jpg
deleted file mode 100644
index c45b1da..0000000
Binary files a/Frontend/the-message/src/assets/images/soysauce.jpg and /dev/null differ
diff --git a/Frontend/the-message/src/components/items/card.tsx b/Frontend/the-message/src/components/items/card.tsx
deleted file mode 100644
index cea5e50..0000000
--- a/Frontend/the-message/src/components/items/card.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-interface CardProps {
-  cardUrl:string,
-  cardName:string,
-  cardBackUrl:string,
-}
-
-const Card:React.FC<CardProps> = ( { cardUrl, cardBackUrl } ) => {
-
-    return (
-      <>
-        <div className="flex min-h-screen items-center justify-center bg-slate-100">
-          <div className="group h-96 w-80 [perspective:1000px]">
-            <div className="relative h-full w-full rounded-xl shadow-xl transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(540deg)]">
-              <div className="absolute inset-0">
-                <img className="card-image h-full w-full rounded-xl object-cover shadow-xl shadow-black/40" src={ cardUrl } style={{ border:"10px solid #000"}}/>
-              </div>
-              <div className="absolute inset-0 h-full w-full rounded-xl bg-black/80 px-12 text-center text-slate-200 [transform:rotateY(180deg)] [backface-visibility:hidden]">
-                <div className="absolute inset-0">
-                  <img className="card-image h-full w-full rounded-xl object-cover shadow-xl shadow-black/40" src={ cardBackUrl } style={{ border:"10px solid #000"}}/>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </>
-    );
-}
-
-export default Card;
\ No newline at end of file
diff --git a/Frontend/the-message/src/components/page/entrance/entrance.tsx b/Frontend/the-message/src/components/page/entrance/entrance.tsx
index 6728289..2d36adc 100644
--- a/Frontend/the-message/src/components/page/entrance/entrance.tsx
+++ b/Frontend/the-message/src/components/page/entrance/entrance.tsx
@@ -1,22 +1,23 @@
-import { Input } from '@chakra-ui/react'
-import { Button } from '@chakra-ui/react'
-import { Link } from "react-router-dom";
-
-
 
+import Button from "@material-ui/core/Button/Button";
+import SendIcon from '@mui/icons-material/Send';
+import title from "../../../assets/images/title.png";
+import TextField from "@mui/material/TextField/TextField";
 
 const Entrance = () => {
 
     return (
         <div className="absolute h-4/5 w-96 right-10">
-            <div className="flex align-item justify-center w-full text-5xl text-white">
-                <p className="s">風聲</p>
+            <div className="flex align-item justify-center w-full">
+                <img src={title} className="scale-75"/>
             </div>
-            <div className="flex items-center justify-center mt-5">
-                <Input placeholder='輸入玩家姓名' errorBorderColor="red" focusBorderColor='gray.500' color='#fff'/>
+            <div className="flex items-center justify-center">
+                <TextField id="outlined-basic" color="info" label="Outlined" variant="outlined" />
             </div>
             <div className="p-10 flex items-center justify-center">
-                <Button className='bg-gray-500' bg='#66666' color='#fff'><Link to="/game/map">Enter The Game</Link></Button>
+                <Button variant="outlined" color="primary" endIcon={<SendIcon />} >
+                    進入遊戲
+                </Button>
             </div>
         </div>
     );
diff --git a/Frontend/the-message/src/components/page/game/map.tsx b/Frontend/the-message/src/components/page/game/map.tsx
deleted file mode 100644
index d436344..0000000
--- a/Frontend/the-message/src/components/page/game/map.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-// import Card from "../../items/card";
-import lurking from "../../../assets/images/lurking1.jpg";
-import soysauce from "../../../assets/images/soysauce.jpg";
-import millitaryIntelligence from "../../../assets/images/millitaryIntelligence.jpg";
-import useCardRenderer from "../../../hooks/useCardRenderer.tsx";
-import { useState } from "react";
-
-type CardInformations = {
-    cardUrl:string,
-    cardName:string
-}
-
-type CardSet = {
-    cardInformations: CardInformations[],
-    cardKind: "LineUp" | "Functional"
-} 
-
-const Map = () => {
-    
-    const LineUpCards: CardInformations[] = [
-        {
-            cardUrl: lurking,
-            cardName: "潛伏戰線",
-        },
-        {
-            cardUrl: soysauce,
-            cardName: "打醬油"
-        },
-        {
-            cardUrl: millitaryIntelligence,
-            cardName: "軍情處"
-        }
-    ];
-
-    const LineUpCardSet: CardSet = {
-        cardInformations: LineUpCards,
-        cardKind: "LineUp"
-    }
-    
-
-    const [cardsSet, setCardsSet ] = useState<CardSet>(LineUpCardSet);
-    
-
-    return (
-        <div className="flex">
-            { useCardRenderer(cardsSet) }
-        </div>
-    );
-
-};
-
-export default Map;
-
diff --git a/Frontend/the-message/src/hooks/useCardRenderer.tsx b/Frontend/the-message/src/hooks/useCardRenderer.tsx
deleted file mode 100644
index 053d611..0000000
--- a/Frontend/the-message/src/hooks/useCardRenderer.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import Card from '../components/items/card';
-import lineUpCardBack from "../assets/images/backOfLineUpCard.jpg";
-import functionalCardBack from "../assets/images/backOfFunctionCard.jpg";
-
-type CardInformations = {
-    cardUrl:string,
-    cardName:string
-}
-
-type CardSet = {
-    cardInformations: CardInformations[],
-    cardKind: string
-} 
-
-const useCardRenderer = (cardSet: CardSet) => {
-  return (
-    <div className="flex">
-        {cardSet.cardInformations.map((card: CardInformations) => (
-            <Card cardName={card.cardName} cardUrl={card.cardUrl} cardBackUrl={(cardSet.cardKind == "LineUp") ? lineUpCardBack : functionalCardBack } />
-        ))}
-    </div>
-  );
-};
-
-export default useCardRenderer;
\ No newline at end of file
diff --git a/Frontend/the-message/src/routes/route.tsx b/Frontend/the-message/src/routes/route.tsx
deleted file mode 100644
index 1716fa0..0000000
--- a/Frontend/the-message/src/routes/route.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import {createBrowserRouter} from "react-router-dom";
-import Layout from '../layout/layout'
-import Map from '../components/page/game/map'
-
-
-const router = createBrowserRouter([
-    {
-        path: "/",
-        element: <Layout/>,
-    },
-    {
-        path: "/game/map",
-        element: <Map/>
-    }
-]);
-
-
-export default router;
\ No newline at end of file