diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index fc504de..ffdcf4f 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import {
   ThemeProvider,
   CssBaseline,
@@ -43,6 +43,7 @@ import { clearInfos, clearTemplates } from '../../store/action/Actions'
 import DashboardIcon from '@mui/icons-material/Dashboard'
 import { restfulApiConfig } from '../../api/Config'
 import { muiColorTheme } from '../Theme'
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 const drawerWidth = 240
 
@@ -62,9 +63,11 @@ const closedMixin = (theme: Theme): CSSObject => ({
   }),
   overflowX: 'hidden',
   width: `calc(${theme.spacing(7)} + 1px)`,
-  [theme.breakpoints.up('sm')]: {
-    width: `calc(${theme.spacing(9)} + 1px)`,
-  },
+  // 大きい画面の時に、drawerを閉じた時に、アイコンが中心にならないため、コメントアウト
+  // width: `calc(${theme.spacing(7)} + 1px)`,
+  // [theme.breakpoints.up('sm')]: {
+  //  width: `calc(${theme.spacing(9)} + 1px)`,
+  // },
 })
 
 interface AppBarProps extends MuiAppBarProps {
@@ -106,10 +109,34 @@ const Drawer = styled(MuiDrawer, {
   }),
 }))
 
-export default function Dashboard(props: any) {
+
+interface DashboardProps {
+  title?: string
+  children?: React.ReactNode
+  sx?: CSSObject
+  forceDrawerClosed?: boolean
+}
+export default function Dashboard(props: DashboardProps) {
   const navigate = useNavigate()
   // Menu Bar
-  const [open, setOpen] = React.useState(true)
+  // useMediaQuery("(min-width:800px)")でmobileかどうかを判定
+  const [open, setOpen] = React.useState(useMediaQuery("(min-width:600px)"))
+
+  // 画面サイズが変わったときにopenを変更
+  // closeが強制されているときは、openをfalseにする
+  const isMobile = !useMediaQuery("(min-width:600px)");
+  useEffect(() => {
+    if(props.forceDrawerClosed){
+      setOpen(false)
+    }
+    else if(isMobile){
+      setOpen(false)
+    }
+    else{
+      setOpen(true)
+    }
+  }, [isMobile, props.forceDrawerClosed])
+
   const handleDrawerOpen = () => {
     setOpen(true)
   }
@@ -233,14 +260,13 @@ export default function Dashboard(props: any) {
             <Divider />
           </List>
         </Drawer>
-        <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+        <Box component="main" sx={{ flexGrow: 1, p: 3, ...props.sx}}>
           <StyledDivDashboardToolBarIcon />
 
           <StyledTypographyPageTitle
             // component="h2"
             variant="h5"
             color="inherit"
-            noWrap
           >
             {props.title}
           </StyledTypographyPageTitle>
diff --git a/src/index.tsx b/src/index.tsx
index b492253..37bc843 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,17 +2,27 @@ import React from 'react'
 import './index.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
-import { SnackbarProvider } from 'notistack'
+import { SnackbarProvider, closeSnackbar } from 'notistack'
 import { Provider } from 'react-redux'
 import { createRoot } from 'react-dom/client'
 import store from './store'
+import { IconButton } from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close';
 
 const container = document.getElementById('root')
 if (container) {
   const root = createRoot(container)
   root.render(
     <Provider store={store}>
-      <SnackbarProvider maxSnack={3}>
+      <SnackbarProvider
+        maxSnack={3}
+        autoHideDuration={5000}
+        action={(snackbarId) => (
+          <IconButton onClick={() => closeSnackbar(snackbarId)}>
+            <CloseIcon />
+          </IconButton>
+        )}
+      >
         <App />
       </SnackbarProvider>
     </Provider>
diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index d6d74ac..b378850 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -18,6 +18,8 @@ import Cookies from 'js-cookie'
 import { useNavigate } from 'react-router-dom'
 import { restfulApiConfig } from '../../api/Config'
 import { StyledCardRoot3, StyledTypographyTitle } from '../../style'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 
 export default function Dashboard() {
   const [data, setData] = React.useState<InfoData>()
@@ -110,7 +112,7 @@ export default function Dashboard() {
   return (
     <DashboardComponent title="Dashboard">
       <Grid container spacing={3}>
-        <Grid item xs={8}>
+        <Grid item xs={12} md={8}>
           {restfulApiConfig.enableMoney &&
             data?.group?.is_expired &&
             !data?.info?.length && (
@@ -177,7 +179,12 @@ export default function Dashboard() {
                   {notice.fault && <Chip label="障害" color="secondary" />}
                 </StyledTypographyTitle>
                 <br />
-                {notice.data}
+                <ReactMarkdown
+                  skipHtml={true}
+                  remarkPlugins={[remarkGfm]}
+                >
+                  {notice.data}
+                </ReactMarkdown>
               </CardContent>
               <CardActions>
                 {/*<Button color="secondary" size="small" variant="outlined"*/}
@@ -188,7 +195,7 @@ export default function Dashboard() {
             </StyledCardRoot3>
           ))}
         </Grid>
-        <Grid item xs={4}>
+        <Grid item xs={12} md={4}>
           {restfulApiConfig.enableMoney && (
             <StyledCardRoot3 key={'student'}>
               <CardContent>
diff --git a/src/pages/Support/Support.tsx b/src/pages/Support/Support.tsx
index be6f1d2..8d5a7f5 100644
--- a/src/pages/Support/Support.tsx
+++ b/src/pages/Support/Support.tsx
@@ -176,7 +176,7 @@ export default function Support() {
                 {ticket.solved && (
                   <Button
                     size="small"
-                    color="primary"
+                    color="secondary"
                     onClick={() => clickSolvedStatus(ticket.id, false)}
                   >
                     未解決
diff --git a/src/pages/Support/SupportAddDialog.tsx b/src/pages/Support/SupportAddDialog.tsx
index 14164a5..4b8514a 100644
--- a/src/pages/Support/SupportAddDialog.tsx
+++ b/src/pages/Support/SupportAddDialog.tsx
@@ -10,6 +10,7 @@ import {
   Grid,
   Radio,
   RadioGroup,
+  Typography,
 } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import { DefaultSupportAddData } from '../../interface'
@@ -17,6 +18,8 @@ import { useSnackbar } from 'notistack'
 import { Post } from '../../api/Support'
 import { Get } from '../../api/Info'
 import { StyledTextFieldVeryLong } from '../../style'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 
 export function SupportAddDialog(props: { groupEnable: boolean }) {
   const { groupEnable } = props
@@ -95,6 +98,10 @@ export function SupportAddDialog(props: { groupEnable: boolean }) {
                 />
               </RadioGroup>
               <br />
+              <Typography variant="inherit">
+                このチャットはMarkdownに準拠しております。
+              </Typography>
+              <br />
               <StyledTextFieldVeryLong
                 id="title"
                 label="Title"
@@ -119,6 +126,16 @@ export function SupportAddDialog(props: { groupEnable: boolean }) {
                 variant="outlined"
               />
             </Grid>
+            <Grid item xs={12}>
+              <h3>内容のプレビュー ↓</h3>
+              <ReactMarkdown
+                skipHtml={true}
+                remarkPlugins={[remarkGfm]}
+              >
+                {data.data}
+              </ReactMarkdown>
+              内容のプレビュー ↑
+            </Grid>
           </Grid>
         </DialogContent>
         <DialogActions>
diff --git a/src/pages/Support/SupportDetail/Message.tsx b/src/pages/Support/SupportDetail/Message.tsx
index dbe0b55..dc86412 100644
--- a/src/pages/Support/SupportDetail/Message.tsx
+++ b/src/pages/Support/SupportDetail/Message.tsx
@@ -1,8 +1,9 @@
 import React, { useRef } from 'react'
 import remarkGfm from 'remark-gfm'
 import {
-  StyledMessageTimeStampRight,
-  StyledReactMarkdownMessageContent,
+  StyledMessageTimeStampLeft,
+  StyledReactMarkdownMessageContentRight,
+  StyledReactMarkdownMessageContentLeft,
 } from './styles'
 import { Avatar, Box } from '@mui/material'
 import { StyledBlueMessage, StyledOrangeMessage } from '../../../style'
@@ -19,23 +20,29 @@ export const MessageLeft = (props: {
   const divRef = useRef<HTMLDivElement>(null)
 
   return (
-    <Box sx={{ display: 'flex' }}>
-      <Avatar sx={{ bgcolor: deepOrange[500] }}>{displayName}</Avatar>
+    <Box sx={{ display: 'flex', paddingLeft: "6px" }}>
+      <Avatar sx={{ 
+        bgcolor: deepOrange[500],
+        fontSize: "medium",
+      }}>
+        {displayName}
+      </Avatar>
       <StyledBlueMessage>
         <div
           ref={divRef}
           style={{
             borderRadius: 15,
-            width: '50vw',
+            minWidth: "50vw",
+            maxWidth: "70vw",
           }}
         >
-          <StyledReactMarkdownMessageContent
+          <StyledReactMarkdownMessageContentLeft
             children={message}
             skipHtml={true}
             remarkPlugins={[remarkGfm]}
           />
         </div>
-        <StyledMessageTimeStampRight>{timestamp}</StyledMessageTimeStampRight>
+        <StyledMessageTimeStampLeft>{timestamp}</StyledMessageTimeStampLeft>
       </StyledBlueMessage>
     </Box>
   )
@@ -58,19 +65,20 @@ export const MessageRight = (props: {
           ref={divRef}
           style={{
             borderRadius: 15,
-            width: '50vw',
+            minWidth: "50vw",
+            maxWidth: "70vw",
           }}
         >
-          <StyledReactMarkdownMessageContent
+          <StyledReactMarkdownMessageContentRight
             children={message}
             skipHtml={true}
             remarkPlugins={[remarkGfm]}
             // escapeHtml={false}
           />
         </div>
-        <StyledMessageTimeStampRight>
-          ({displayName}) {timestamp}
-        </StyledMessageTimeStampRight>
+        <StyledMessageTimeStampLeft>
+          ({displayName}) <br/> {timestamp}
+        </StyledMessageTimeStampLeft>
       </StyledOrangeMessage>
     </Box>
   )
diff --git a/src/pages/Support/SupportDetail/SupportDetail.tsx b/src/pages/Support/SupportDetail/SupportDetail.tsx
index 72f7099..9eb1058 100644
--- a/src/pages/Support/SupportDetail/SupportDetail.tsx
+++ b/src/pages/Support/SupportDetail/SupportDetail.tsx
@@ -12,10 +12,9 @@ import Cookies from 'js-cookie'
 import { clearInfos, clearTemplates } from '../../../store/action/Actions'
 import { Get } from '../../../api/Info'
 import {
-  StyledDivContainer,
-  StyledPaper1,
   StyledPaperMessage,
 } from '../../../style'
+import DashboardComponent from '../../../components/Dashboard/Dashboard'
 
 export default function SupportDetail() {
   let id: string | undefined
@@ -162,40 +161,38 @@ export default function SupportDetail() {
 
   return (
     <div>
-      {id === undefined && <h2>IDの値が取得できません</h2>}
-      {baseChatData === undefined && <h2>データがありません</h2>}
+      {id === undefined && <DashboardComponent><h2>IDの値が取得できません</h2></DashboardComponent>}
+      {baseChatData === undefined && <DashboardComponent><h2>データがありません</h2></DashboardComponent>}
       {baseChatData != null && (
-        <StyledDivContainer>
-          <StyledPaper1>
-            <StyledPaperMessage id="style-1">
-              <b>このチャットはMarkdownに準拠しております。</b>
-              {baseChatData.map((chat, index) =>
-                !chat.admin ? (
-                  <MessageRight
-                    key={index}
-                    message={chat.data}
-                    timestamp={chat.created_at}
-                    displayName={getUser(chat.user_id)}
-                  />
-                ) : (
-                  <MessageLeft
-                    key={index}
-                    message={chat.data}
-                    timestamp={chat.created_at}
-                    displayName={'運営'}
-                  />
-                )
-              )}
-              <div ref={ref} />
-            </StyledPaperMessage>
-            <TextInput
-              key={'textInput'}
-              inputChat={inputChatData}
-              setInputChat={setInputChatData}
-              setSendPush={setSendPush}
-            />
-          </StyledPaper1>
-        </StyledDivContainer>
+        <DashboardComponent title={"ID: "+ tickets?.id + " " + tickets?.title} sx={{ padding: "2px" }} forceDrawerClosed={true}>
+          <StyledPaperMessage id="style-1">
+            <b>このチャットはMarkdownに準拠しております。</b>
+            {baseChatData.map((chat, index) =>
+              !chat.admin ? (
+                <MessageRight
+                  key={index}
+                  message={chat.data}
+                  timestamp={chat.created_at}
+                  displayName={getUser(chat.user_id)}
+                />
+              ) : (
+                <MessageLeft
+                  key={index}
+                  message={chat.data}
+                  timestamp={chat.created_at}
+                  displayName={'運営'}
+                />
+              )
+            )}
+            <div ref={ref} />
+          </StyledPaperMessage>
+          <TextInput
+            key={'textInput'}
+            inputChat={inputChatData}
+            setInputChat={setInputChatData}
+            setSendPush={setSendPush}
+          />
+        </DashboardComponent>
       )}
     </div>
   )
diff --git a/src/pages/Support/SupportDetail/TextInput.tsx b/src/pages/Support/SupportDetail/TextInput.tsx
index 9277c8d..70e2d10 100644
--- a/src/pages/Support/SupportDetail/TextInput.tsx
+++ b/src/pages/Support/SupportDetail/TextInput.tsx
@@ -20,6 +20,14 @@ export const TextInput = (props: {
           //margin="normal"
           multiline
           rows={5}
+          
+          // TextFieldの枠線の色を変更
+          // 無理やり変更する方法しかないみたいなので、したみたいな実装になっている
+          sx={{
+            "& .MuiOutlinedInput-root": {
+              "& > fieldset": { borderColor: "black" },
+            },
+          }}
           onChange={(event) => {
             setInputChat(event.target.value)
           }}
@@ -27,6 +35,10 @@ export const TextInput = (props: {
         <Button
           variant="contained"
           color="primary"
+          style={{
+            border: "3px solid #000000",
+            borderRadius: "10px",
+          }}
           onClick={() => setSendPush(true)}
         >
           <SendIcon />
diff --git a/src/pages/Support/SupportDetail/styles.ts b/src/pages/Support/SupportDetail/styles.ts
index eefc235..e594a66 100644
--- a/src/pages/Support/SupportDetail/styles.ts
+++ b/src/pages/Support/SupportDetail/styles.ts
@@ -1,21 +1,35 @@
 import { Paper, styled } from '@mui/material'
 import ReactMarkdown from 'react-markdown'
 
-export const StyledMessageTimeStampRight = styled('div')(() => ({
-  color: 'black',
+export const StyledMessageTimeStampLeft = styled('div')(() => ({
+  color: "lightgrey",
   position: 'absolute',
   fontSize: '.85em',
   fontWeight: 300,
   marginTop: '10px',
-  bottom: '-3px',
-  right: '5px',
+  bottom: '2px',
+  //right: '5px',
+  left: '8px',
 }))
 
-export const StyledReactMarkdownMessageContent = styled(ReactMarkdown)(
+export const StyledReactMarkdownMessageContentLeft = styled(ReactMarkdown)(
   () => ({
     padding: 0,
+    paddingBottom: "10px",
     margin: 0,
-    color: 'black',
+    color: 'white',
+    // overflowWrap: "normal",
+    // overflowY: 'scroll',
+    overflowX: 'auto',
+  })
+)
+
+export const StyledReactMarkdownMessageContentRight = styled(ReactMarkdown)(
+  () => ({
+    padding: 0,
+    paddingBottom: "20px",
+    margin: 0,
+    color: 'white',
     // overflowWrap: "normal",
     // overflowY: 'scroll',
     overflowX: 'auto',
diff --git a/src/style.ts b/src/style.ts
index c8daaa1..a539c75 100644
--- a/src/style.ts
+++ b/src/style.ts
@@ -4,6 +4,7 @@ import {
   Button,
   Card,
   Chip,
+  colors,
   Container,
   FormControl,
   InputBase,
@@ -14,6 +15,7 @@ import {
   TextField,
   Typography,
 } from '@mui/material'
+import { borderRadius } from '@mui/system'
 
 //search
 export const StyledSearchInput = styled(InputBase)(({ theme }) => ({
@@ -52,25 +54,27 @@ export const StyledPaper1 = styled(Paper)(() => ({
 }))
 
 export const StyledPaperMessage = styled(Paper)(() => ({
-  width: 'calc( 100% - 20px )',
-  margin: 10,
-  backgroundColor: 'rgb(113, 147, 193)',
-  // overflowX: 'hidden',
+  width: "100%",
+  //margin: 10,
+  backgroundColor: '#000000',
+  //overflowX: 'hidden',
   overflowY: 'scroll',
-  height: 'calc( 100% - 80px )',
+  height: "calc(100vh - 305px)",
+  borderRadius: '10px',
 }))
 
 export const StyledBlueMessage = styled('div')(() => ({
   position: 'relative',
-  marginLeft: '20px',
+  marginLeft: '8px',
   marginBottom: '10px',
   padding: '10px',
-  backgroundColor: '#d2d2cc',
-  // width: "40%",
+  backgroundColor: '#343a40',
+  width: "75%",
   textAlign: 'left',
   font: "400 .9em 'Open Sans', sans-serif",
-  border: '1px solid #d2d2cc',
-  borderRadius: '10px',
+  //border: '1px solid #d2d2cc',
+  borderRadius: '15px',
+  /*
   '&:after': {
     content: "''",
     position: 'absolute',
@@ -93,25 +97,28 @@ export const StyledBlueMessage = styled('div')(() => ({
     top: '-1px',
     left: '-17px',
   },
+  */
 }))
 
+// right message box
 export const StyledOrangeMessage = styled('div')(() => ({
   position: 'relative',
-  marginRight: '20px',
+  marginRight: '10px',
   marginBottom: '10px',
   padding: '10px',
-  backgroundColor: '#85e249',
-  width: '60%',
+  background: "#6c757d",
+  width: '80%',
   textAlign: 'left',
   font: "400 .9em 'Open Sans', sans-serif",
-  border: '1px solid #85e249',
-  borderRadius: '10px',
+  //border: '1px solid #c4c4c4',
+  borderRadius: '15px',
+  /*
   '&:after': {
     content: "''",
     position: 'absolute',
     width: '0',
     height: '0',
-    borderTop: '15px solid #85e249',
+    borderTop: '15px solid rgb(0,83,255)',
     borderLeft: '15px solid transparent',
     borderRight: '15px solid transparent',
     top: '0',
@@ -122,12 +129,13 @@ export const StyledOrangeMessage = styled('div')(() => ({
     position: 'absolute',
     width: '0',
     height: '0',
-    borderTop: '17px solid #85e249',
+    borderTop: '17px solid #c4c4c4',
     borderLeft: '16px solid transparent',
     borderRight: '16px solid transparent',
     top: '-1px',
     right: '-17px',
   },
+  */
 }))
 
 // typography
@@ -152,9 +160,12 @@ export const StyledTable2 = styled(Table)(() => ({
 export const StyledWrapForm = styled('form')(({ theme }) => ({
   display: 'flex',
   justifyContent: 'center',
-  width: '95%',
+  width: "100%",
   margin: `${theme.spacing(0)} auto`,
   height: '150px',
+  backgroundColor: "#000000",
+  borderRadius: '10px',
+  borderTop: "1px solid #5c5c5c",
 }))
 
 // container