diff --git a/src/components/AboutUs.jsx b/src/components/AboutUs.jsx
index de8f670..a937a8a 100644
--- a/src/components/AboutUs.jsx
+++ b/src/components/AboutUs.jsx
@@ -9,6 +9,8 @@ export const AboutUs = () => {
             <Container sx={{
                 height: '100vh',
                 display: 'flex',
+                overflowY: 'hidden',
+                overflowX: 'hidden',
                 flexDirection: 'column',
                 justifyContent: 'center',
                 alignItems: 'center',
diff --git a/src/components/ActiveControl.jsx b/src/components/ActiveControl.jsx
new file mode 100644
index 0000000..e4143a4
--- /dev/null
+++ b/src/components/ActiveControl.jsx
@@ -0,0 +1,24 @@
+import { useTheme } from '@mui/material/styles';
+import { Button } from '@mui/material';
+
+export const ActiveControl = ({ props, onOpen}) => {
+    const theme = useTheme();
+
+    return (
+        <Button
+            onClick={onOpen}
+            sx={{
+                fontFamily: 'Open Sans',
+                backgroundColor: theme.palette.text.link,
+                borderRadius: '182.5px',
+                paddingTop:0.2,
+                paddingBottom:0.2,
+                color:'white',
+                paddingRight:2.4,
+                paddingLeft:2.4
+            }}
+        >
+            {props.title}
+        </Button>
+    );
+};
diff --git a/src/components/Discussion.jsx b/src/components/Discussion.jsx
new file mode 100644
index 0000000..bc204d2
--- /dev/null
+++ b/src/components/Discussion.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Button, Typography, useTheme } from '@mui/material';
+import { useNavigate } from 'react-router';
+
+const typographyStyle = {
+    fontFamily: 'Open Sans',
+    marginLeft: 4,
+    marginRight: 4,
+    fontWeight: 700,
+    letterSpacing: 1.3,
+    fontSize: '1.42em',
+
+};
+
+export const Discussion = ({ props }) => {
+
+    const theme = useTheme();
+
+    const navigate = useNavigate();
+
+    const hundleOnClick = () => {
+        navigate(`?id=${props.id}`);
+    };
+
+
+    return (
+
+        <Button variant="contained" color="primary" onClick={hundleOnClick}
+            sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                width: 947,
+                height: 74,
+                marginTop: 3,
+                padding: 1.5,
+                color: theme.palette.text.primary,
+                background: `linear-gradient(
+                            to right top,
+                            ${theme.palette.background.default} 50%,
+                            ${theme.palette.primary.dark})`,
+                borderRadius: '23px',
+                border: `solid 1.5px ${theme.palette.grey[100]}`
+            }}>
+            <Typography sx={typographyStyle}>
+                {props.comments[props.comments.length - 1].date.toLocaleDateString()} :תגובה אחרונה
+            </Typography>
+            <Typography sx={{ ...typographyStyle, marginLeft: -25, direction: 'rtl' }}>
+                {props.comments.length}  תגובות
+            </Typography>
+            <Typography sx=
+                {{ ...typographyStyle, fontSize: '2.3em' }}>
+                {props.name}
+            </Typography>
+        </Button>
+    );
+};
\ No newline at end of file
diff --git a/src/components/DiscussionBoard.jsx b/src/components/DiscussionBoard.jsx
new file mode 100644
index 0000000..4c53f18
--- /dev/null
+++ b/src/components/DiscussionBoard.jsx
@@ -0,0 +1,136 @@
+import { useState, useRef } from 'react';
+// import sendRequest from '../utils/api/api';
+import { Box, useTheme } from '@mui/material';
+import { PageTitle } from './PageTitle.jsx';
+import { Discussion } from './Discussion.jsx';
+import { ActiveControl } from './ActiveControl.jsx';
+import { NewDiscussion } from './NewDiscussion.jsx';
+
+export const DiscussionBoard = () => {
+    const theme = useTheme();
+
+    const [openDialog, setOpenDialog] = useState(false);
+    const newDiscussionRef = useRef(null);
+
+    const Open = () => {
+        setOpenDialog(true);
+        if (newDiscussionRef.current) {
+            newDiscussionRef.current.scrollIntoView({ behavior: 'smooth' });
+        }
+    };
+    const onclose = ()=>{
+        setOpenDialog(false);
+    };
+
+    // const allDiscussions = await sendRequest('/subject' , 'GET');
+    // setSubjects(allDiscussions);
+    const allDiscussions = [
+        { id: '123', name: 'ressume', comments: [{ date: new Date() }] },
+        { id: '123', name: 'salary', comments: [{ date: new Date() }] },
+        { id: '123', name: 'activity', comments: [{ date: new Date() }] },
+        { id: '123', name: 'ressume', comments: [{ date: new Date() }] },
+        { id: '123', name: 'salary', comments: [{ date: new Date() }] },
+        { id: '123', name: 'activity', comments: [{ date: new Date() }] },
+        { id: '123', name: 'salary', comments: [{ date: new Date() }] },
+        { id: '123', name: 'activity', comments: [{ date: new Date() }] },
+    ];
+
+    // return (
+    //     <>
+    //         <Container
+    //             sx={{
+    //                 // position: 'relative',
+    //                 // display:'flex',
+    //                 // flexDirection:'column',
+    //                 backgroundColor: theme.palette.background.default
+    //             }}
+    //         >
+    //             <Box sx={{
+    //                 width:'5%',
+    //                 position: 'absolute',
+    //                 top: 0,
+    //                 height:1,
+    //                 left: 300,
+    //             }}>
+    //                 <PageTitle props={{ title: 'יצירת דיון חדש'} }
+    //                     sx={{
+    //                         textAlign: 'center',
+    //                         width:'100%',
+    //                     }}></PageTitle>
+    //             </Box>
+    //             <ActiveControl props={{ title: 'יצירת דיון חדש' }} onOpen={Open}></ActiveControl>
+    //             <Box sx={{
+    //                 display: 'flex',
+    //                 flexDirection: 'column',
+    //                 justifyContent: 'space-evenly',
+    //             }}>
+    //                 {allDiscussions.map((discussion) => (
+    //                     <Discussion key={discussion.id} props={discussion}></Discussion>
+    //                 ))}
+    //             </Box>
+
+    //             <ActiveControl props={{ title: 'יצירת דיון חדש' }} onOpen={Open}></ActiveControl>
+    //         </Container >
+    //     </>
+    // );
+    return (
+        <Box
+            sx={{
+                backgroundColor: theme.palette.background.default, // Set the background color to dark
+                minHeight: '88.9vh',
+                padding: '20px',
+                overflow: 'hidden',
+                position: 'relative',
+            }}
+        >
+            <Box sx={{
+                height: '20%',
+                background: `radial-gradient(circle,
+                 ${theme.palette.primary.light} 0%, ${theme.palette.background.default} 100%)`,
+                backgroundPosition: 'center',
+            }}>
+                <Box
+                    sx={{
+                        margin: '0 auto',
+                        padding: '10px',
+                        position: 'absolute',
+                        top: 0,
+                        // left: '50%',
+                        transform: 'translateX(-50%)',
+                        // zIndex: -1, 
+                        width: '100%',
+                        position: 'absolute',
+                        // top: '-32%',
+                        left: '50%',
+                        // width: '40%',
+                        height: '30%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        textShadow: `
+    0 0 50px #49ACEF,
+    0 0 100px #49ACEF,
+    0 0 200px #49ACEF,
+    0 0 300px #49ACEF`,
+                    }}
+                >
+                    <PageTitle props={{ title: 'דיונים' }} />
+                </Box>
+            </Box>
+
+
+            <ActiveControl props={{ title: 'יצירת דיון חדש' }} onOpen={Open} sx={{
+                // position: 'absolute', top: '10%'
+            }}></ActiveControl>
+            <Box sx={{ marginTop: 3 }}>
+                {allDiscussions.map((discussion, index) => (
+                    <Discussion key={index} props={discussion} />
+                ))}
+            </Box>
+            <Box ref={newDiscussionRef}>
+                <NewDiscussion open={openDialog} onClose={() => setOpenDialog(false) || onclose} />
+            </Box>
+        </Box>
+    );
+
+};
\ No newline at end of file
diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx
index 9493a36..16f51c7 100644
--- a/src/components/Nav.jsx
+++ b/src/components/Nav.jsx
@@ -14,7 +14,7 @@ const pages = [
 export const Nav = () => {
     return (
         <>
-            <AppBar position="static" sx={{ backgroundColor: 'background.default', boxShadow: 'none' }}>
+            <AppBar position="fixed" sx={{ backgroundColor: 'background.default', boxShadow: 'none' }}>
                 <Toolbar sx={{ borderBottom: '1px solid lightgray' ,justifyContent: 'flex-end'}} >
                     {pages.map((page) => (
                         <Button
diff --git a/src/components/NewDiscussion.jsx b/src/components/NewDiscussion.jsx
new file mode 100644
index 0000000..ac34f50
--- /dev/null
+++ b/src/components/NewDiscussion.jsx
@@ -0,0 +1,89 @@
+import { Box, TextField, Typography, useTheme } from '@mui/material';
+import { IconButton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { ActiveControl } from './ActiveControl';
+
+export const NewDiscussion = ({ onClose }) => {
+    const theme = useTheme();
+
+    const typhographyStyle = {
+        color: theme.palette.text.primary,
+        fontFamily: 'Open Sans',
+        fontSize: '1.67vw',
+        m: 2,
+    };
+
+    const textFieldStyle = {
+        width: '80%',
+        border: `1px solid ${theme.palette.grey[100]}`,
+        borderRadius: 1.5
+    };
+
+    return (
+        <Box
+            sx={{
+                border: `0.2vw solid ${theme.palette.primary.light}`,
+                borderRadius: '39px',
+                // height:663,
+                width: '49.89%',
+                mt: 15,
+                boxShadow: 2,
+                textAlign: 'center',
+
+            }}
+        >
+            <IconButton
+                onClick={onClose}
+                sx={{
+                    width: '100%',
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    mt:'1%',
+                    color: theme.palette.text.primary,
+                }}
+            >
+                <CloseIcon />
+            </IconButton>
+            <Typography variant="h6"
+                sx={{
+                    color: theme.palette.primary.light,
+                    fontFamily: 'Open Sans',
+                    fontWeight: 700,
+                    fontSize: '2.08vw',
+                    mt: 7.5
+                }}>
+                יצירת דיון חדש
+            </Typography>
+            <Typography
+                sx={{
+                    ...typhographyStyle, ml: '36.4vw'
+                }}>
+                כותרת
+            </Typography>
+            <TextField
+                size='small'
+                sx={{
+                    ...textFieldStyle
+                }}
+            />
+            <Typography
+                sx={{
+                    ...typhographyStyle, ml: '32vw'
+                }}>
+                תוכן ההודעה
+            </Typography>
+            <TextField
+                multiline
+                rows={7}
+                className="css-16wblaj-MuiInputBase-input-MuiOutlinedInput"
+                sx={{
+                    ...textFieldStyle, mb: 3
+                }}
+            />
+            <Box sx={{ mb: 5, mr: 87.5 }}>
+                <ActiveControl props={{ title: 'צור' }}></ActiveControl>
+            </Box>
+        </Box>
+    );
+};
+
diff --git a/src/components/Routing.jsx b/src/components/Routing.jsx
index 0a847a9..1cc4602 100644
--- a/src/components/Routing.jsx
+++ b/src/components/Routing.jsx
@@ -3,6 +3,7 @@ import { AboutUs } from './AboutUs.jsx';
 import { Home } from './Home.jsx';
 import { NotFound } from './NotFound.jsx';
 import { SubjectBoard } from './SubjectBoard.jsx';
+import { DiscussionBoard } from './DiscussionBoard.jsx';
 
 export const Routing = () => {
     return <>
@@ -10,7 +11,8 @@ export const Routing = () => {
             <Route path='*' element={<NotFound></NotFound>}></Route>
             <Route path='/' element={<Home></Home>}></Route>
             <Route path='/about' element={<AboutUs></AboutUs>}></Route>
-            <Route path='/discuss' element={<SubjectBoard></SubjectBoard>}></Route>
+            <Route path='/subject' element={<SubjectBoard></SubjectBoard>}></Route>
+            <Route path='/discuss' element={<DiscussionBoard></DiscussionBoard>}></Route>
         </Routes>
     </>;
 };
\ No newline at end of file
diff --git a/src/utils/style/ThemeColors.js b/src/utils/style/ThemeColors.js
index d664ea3..5dbb31c 100644
--- a/src/utils/style/ThemeColors.js
+++ b/src/utils/style/ThemeColors.js
@@ -15,11 +15,11 @@ const theme = createTheme({
         grey: {
             900: '#212121',
             500: '#555555',
-            100: '#E0DDDD',
+            100: '#696969',
         },
         text: {
             primary: '#FFFFFF',
-            link:'#3598DB',
+            link: '#3598DB',
         },
         background: {
             default: '#181818',