diff --git a/client/package-lock.json b/client/package-lock.json
index fb505a0a..d53ed8f9 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -23,6 +23,8 @@
 				"@types/react-dom": "^18.2.0",
 				"@types/react-router-dom": "^5.1.7",
 				"axios": "^0.26.1",
+				"classname": "^0.0.0",
+				"classnames": "^2.5.1",
 				"jest": "26.6.0",
 				"jsonwebtoken": "^9.0.0",
 				"react": "^18.2.0",
@@ -39,6 +41,7 @@
 				"yup": "^0.32.11"
 			},
 			"devDependencies": {
+				"@types/classnames": "^2.3.1",
 				"@types/jest": "^26.0.23",
 				"@types/jsonwebtoken": "^8.5.4",
 				"@types/node": "^15.6.0",
@@ -4144,6 +4147,16 @@
 				"@types/node": "*"
 			}
 		},
+		"node_modules/@types/classnames": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
+			"integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
+			"deprecated": "This is a stub types definition. classnames provides its own type definitions, so you do not need this installed.",
+			"dev": true,
+			"dependencies": {
+				"classnames": "*"
+			}
+		},
 		"node_modules/@types/connect": {
 			"version": "3.4.35",
 			"resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -6269,6 +6282,16 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/classname": {
+			"version": "0.0.0",
+			"resolved": "https://registry.npmjs.org/classname/-/classname-0.0.0.tgz",
+			"integrity": "sha512-kkhsspEJdUW+VhuvNzb2sQf0KbafDPfd36dB1qf03Uu42dWZwMQzaQuyNkaRr5ir0ZiAN0+TlH/EOOfwb/aaXg=="
+		},
+		"node_modules/classnames": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+			"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+		},
 		"node_modules/clean-css": {
 			"version": "5.3.2",
 			"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -24541,6 +24564,15 @@
 				"@types/node": "*"
 			}
 		},
+		"@types/classnames": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
+			"integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
+			"dev": true,
+			"requires": {
+				"classnames": "*"
+			}
+		},
 		"@types/connect": {
 			"version": "3.4.35",
 			"resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -26218,6 +26250,16 @@
 				}
 			}
 		},
+		"classname": {
+			"version": "0.0.0",
+			"resolved": "https://registry.npmjs.org/classname/-/classname-0.0.0.tgz",
+			"integrity": "sha512-kkhsspEJdUW+VhuvNzb2sQf0KbafDPfd36dB1qf03Uu42dWZwMQzaQuyNkaRr5ir0ZiAN0+TlH/EOOfwb/aaXg=="
+		},
+		"classnames": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+			"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+		},
 		"clean-css": {
 			"version": "5.3.2",
 			"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
diff --git a/client/package.json b/client/package.json
index 4e944241..a3a837c0 100644
--- a/client/package.json
+++ b/client/package.json
@@ -18,6 +18,8 @@
 		"@types/react-dom": "^18.2.0",
 		"@types/react-router-dom": "^5.1.7",
 		"axios": "^0.26.1",
+		"classname": "^0.0.0",
+		"classnames": "^2.5.1",
 		"jest": "26.6.0",
 		"jsonwebtoken": "^9.0.0",
 		"react": "^18.2.0",
@@ -57,6 +59,7 @@
 		]
 	},
 	"devDependencies": {
+		"@types/classnames": "^2.3.1",
 		"@types/jest": "^26.0.23",
 		"@types/jsonwebtoken": "^8.5.4",
 		"@types/node": "^15.6.0",
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 5cebeadc..d5e49a01 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -155,6 +155,10 @@ function Header() {
     history.push('/');
   };
 
+  const handleMakePostClick = () => {
+    history.push(routes.MakePost.path); // Ensure this matches your route definition
+  };
+
   return (
     <AppBar position="sticky" className={classes.appBar} color="inherit">
       {/* if no color defaults to primary */}
@@ -168,7 +172,22 @@ function Header() {
               <IconButton size="large">{/* Mailbox icon here */}</IconButton>
               <IconButton size="large">{/* Bell icon here */}</IconButton>
               <IconButton size="large">{/* Profile icon here */}</IconButton>
-
+              <Button
+                onClick={() => handleMakePostClick()}
+                sx={{
+                  textTransform: 'capitalize',
+                  color: '#323232',
+                  fontWeight: 400,
+                  marginRight: '1.5em',
+                  border: 0,
+                  '&:hover, &:active, &[aria-expanded="true"]': {
+                    fontWeight: 600,
+                    backgroundColor: 'transparent',
+                  },
+                }}
+              >
+                Make a Post
+              </Button>
               <Button
                 id="exchange-button"
                 aria-label="exchange dropdown"
diff --git a/client/src/routes/routes.ts b/client/src/routes/routes.ts
index e61ef9bf..308d4e1a 100644
--- a/client/src/routes/routes.ts
+++ b/client/src/routes/routes.ts
@@ -10,6 +10,7 @@ import SignupCitizen from '../views/SignupCitizen';
 import SignupNonProfit from '../views/SignupNonProfit';
 import Inbox from '../views/Inbox';
 import User from '../views/User';
+import MakePost from '../views/MakePost';
 import ActionForm from '../views/ActionForm';
 import SearchResults from '../views/SearchResults';
 import Asset from '../views/Asset';
@@ -117,6 +118,11 @@ const routes: RouteMap = {
     roles: [],
     path: '/my-profile',
   },
+  MakePost: {
+    component: MakePost,
+    roles: [],
+    path: '/make-a-post',
+  },
   ActionForm: {
     component: ActionForm,
     roles: [],
diff --git a/client/src/views/Main.tsx b/client/src/views/Main.tsx
index 7629b4f6..7ceac063 100644
--- a/client/src/views/Main.tsx
+++ b/client/src/views/Main.tsx
@@ -18,6 +18,7 @@ const {
   SignupNonProfit,
   Inbox,
   User,
+  MakePost,
   ActionForm,
   Assets,
   Asset,
@@ -63,6 +64,9 @@ function Main() {
         <Route exact path={Assets.path} component={Assets.component} />
         <Route exact path={Asset.path} component={Asset.component} />
 
+        {/*Make a post Route */}
+        <Route exact path={MakePost.path} component={MakePost.component} />
+
         {/* Private Routes */}
         <Route exact path={User.path} render={renderPrivateRoute(User.roles, User.component)} />
 
diff --git a/client/src/views/MakePost.tsx b/client/src/views/MakePost.tsx
new file mode 100644
index 00000000..4535a5ed
--- /dev/null
+++ b/client/src/views/MakePost.tsx
@@ -0,0 +1,151 @@
+import React, { useState } from 'react';
+import { Grid, Typography, Card, Button } from '@mui/material';
+
+const MakePost = () => {
+  const [selected, setSelected] = useState<string | null>(null);
+  const [step, setStep] = useState(1);
+
+  const handleCardClick = (id: string) => {
+    setSelected(id);
+  };
+
+  const handleNextClick = () => {
+    if (step === 1 && selected) {
+      setStep(2);
+      setSelected(null);
+    }
+  };
+
+  const handleBackClick = () => {
+    if (step === 2) {
+      setStep(1);
+      setSelected(null);
+    }
+  };
+
+  const styles = {
+    card: (isSelected: boolean) => ({
+      display: 'flex',
+      flexDirection: 'column' as const,
+      height: '550px',
+      width: '520px',
+      margin: '10px',
+      position: 'relative' as const,
+      cursor: 'pointer',
+      transition: 'opacity 0.3s ease-in-out',
+      opacity: isSelected ? 0.8 : 1,
+    }),
+    image: {
+      height: '70%',
+      backgroundColor: '#ffc958',
+    },
+    textContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '30%',
+    },
+    overlay: (isSelected: boolean) => ({
+      position: 'absolute' as const,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: isSelected ? 'rgba(0, 0, 0, 0.5)' : 'transparent',
+      transition: 'background-color 0.3s ease-in-out',
+      pointerEvents: 'none' as const,
+    }),
+    button: (isDisabled: boolean) => ({
+      marginTop: '30px',
+      marginBottom: '10px !important',
+      color: isDisabled ? 'white' : 'black',
+      backgroundColor: isDisabled ? 'lightgrey' : 'white',
+      boxShadow: '0 3px 5px 2px rgba(0, 0, 0, .3)',
+      alignSelf: 'flex-end',
+      cursor: isDisabled ? 'default' : 'pointer',
+      '&:hover': {
+        backgroundColor: isDisabled ? 'lightgrey' : 'lightgrey',
+      },
+    }),
+    backButton: {
+      marginTop: '30px',
+      marginBottom: '10px !important',
+      color: 'black',
+      backgroundColor: 'white',
+      boxShadow: '0 3px 5px 2px rgba(0, 0, 0, .3)',
+      alignSelf: 'flex-start',
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: 'lightgrey',
+      },
+    },
+    title: {
+      color: 'rgb(85, 26, 139)',
+      fontSize: '4.2em',
+      transition: 'all 0.3s ease-in-out',
+    },
+    text: {
+      fontSize: '1.9em !important',
+      fontWeight: 'bold',
+      transition: 'font-size 0.3s ease-in-out, color 0.3s ease-in-out',
+    },
+    buttonContainer: {
+      display: 'flex',
+      justifyContent: step === 1 ? 'flex-end' : 'space-between',
+      width: '50%', // Changed to 50% to ensure correct alignment
+      marginTop: '20px',
+    },
+  };
+
+  const title = step === 1 ? 'What is your post for?' : 'What would you like to do?';
+  const cards =
+    step === 1
+      ? [
+          { id: 'goods', text: 'Goods' },
+          { id: 'skills', text: 'Skills' },
+        ]
+      : [
+          { id: 'need', text: 'Share a Need' },
+          { id: 'offer', text: 'Make an Offer' },
+        ];
+
+  return (
+    <Grid container direction="column" alignItems="center">
+      <Typography variant="h4" sx={styles.title}>
+        {title}
+      </Typography>
+      <Grid container justifyContent="center" spacing={2} sx={{ marginTop: '20px' }}>
+        {cards.map((card) => (
+          <Grid item key={card.id} onClick={() => handleCardClick(card.id)}>
+            <Card sx={styles.card(selected === card.id)}>
+              <div style={styles.image}></div>
+              <div style={styles.textContainer}>
+                <Typography align="center" sx={styles.text}>
+                  {card.text}
+                </Typography>
+              </div>
+              <div style={styles.overlay(selected === card.id)}></div>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+      <Grid container sx={styles.buttonContainer}>
+        {step === 2 && (
+          <Button variant="contained" sx={styles.backButton} onClick={handleBackClick}>
+            Back
+          </Button>
+        )}
+        <Button
+          variant="contained"
+          sx={styles.button(!selected)}
+          disabled={!selected}
+          onClick={handleNextClick}
+        >
+          Next
+        </Button>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default MakePost;