diff --git a/src/App.css b/src/App.css
index 6971584..e69de29 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +0,0 @@
-*{
-  box-sizing: border-box;
-}
\ No newline at end of file
diff --git a/src/components/Question/Question.styles.ts b/src/components/Question/Question.styles.ts
new file mode 100644
index 0000000..65ec319
--- /dev/null
+++ b/src/components/Question/Question.styles.ts
@@ -0,0 +1,28 @@
+import styled from "@emotion/styled";
+
+export const QuestionWrapper = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  padding: "15px",
+  border: "3px solid #4B2981",
+  borderRadius: "10px",
+});
+
+export const QuestionTitle = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  marginBottom: "10px"
+});
+
+export const QuestionMetadata = styled("div")({
+  display: "flex",
+  justifyContent: "space-between",
+  color: "#4c4c4c",
+  marginTop: "10px"
+});
+
+export const AuthorMeta = styled("div")({
+  display: "flex",
+  justifyContent: "center",
+});
diff --git a/src/components/Question/Question.tsx b/src/components/Question/Question.tsx
new file mode 100644
index 0000000..95b9b9d
--- /dev/null
+++ b/src/components/Question/Question.tsx
@@ -0,0 +1,51 @@
+import { Chip, Typography } from "@mui/material";
+import {
+  AuthorMeta,
+  QuestionMetadata,
+  QuestionTitle,
+  QuestionWrapper,
+} from "./Question.styles";
+import CategoryIcon from "@mui/icons-material/Category";
+import PersonIcon from "@mui/icons-material/Person";
+
+type Question = {
+  title: string;
+  category: string;
+  description: string;
+  difficulty: number;
+  author: string;
+};
+
+type QuestionProps = {
+  question: Question;
+};
+
+const Question = ({ question }: QuestionProps) => {
+  return (
+    <QuestionWrapper>
+      <QuestionTitle>
+        <Typography sx={{ mr: "10px" }} variant="h5">
+          {question.title}
+        </Typography>
+        <Chip
+          variant="outlined"
+          icon={<CategoryIcon />}
+          color="primary"
+          label={`${question.category}`}
+        />
+      </QuestionTitle>
+      <Typography variant="body1">{question.description}</Typography>
+      <QuestionMetadata>
+        <Typography variant="body1">
+          Difficulty: {question.difficulty}
+        </Typography>
+        <AuthorMeta>
+          <PersonIcon/>
+          <Typography variant="body1">{question.author}</Typography>
+        </AuthorMeta>
+      </QuestionMetadata>
+    </QuestionWrapper>
+  );
+};
+
+export default Question;
diff --git a/src/components/StartTestForm/StartTestForm.styles.tsx b/src/components/StartTestForm/StartTestForm.styles.tsx
index 286b068..dd60691 100644
--- a/src/components/StartTestForm/StartTestForm.styles.tsx
+++ b/src/components/StartTestForm/StartTestForm.styles.tsx
@@ -1,13 +1,19 @@
 import styled from "@emotion/styled";
 
-export const StartTestWrapper = styled('div')({
-    color: "#fff",
-    minWidth: "600px",
-    backgroundColor: "#fff",
-    padding: "10px",
-    borderRadius: "10px",
-    display: "flex",
-    justifyContent: "space-between",
-    marginBottom: "36px"
-})
+export const StartTestWrapper = styled("div")({
+  color: "#fff",
+  minWidth: "600px",
+  backgroundColor: "#fff",
+  padding: "10px",
+  borderRadius: "10px",
+  display: "flex",
+  justifyContent: "space-between",
+  marginBottom: "36px",
+  flexDirection: "row",
 
+  "@media (max-width: 1024px)": {
+    flexDirection: "column",
+    minWidth: "auto",
+    gap: "12px",
+  },
+});
diff --git a/src/index.css b/src/index.css
index 4a6b607..f9fd7ab 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,3 @@
 body {
   font-family: 'Roboto', sans-serif;
-}
\ No newline at end of file
+}
diff --git a/src/pages/IndexPage/IndexPage.tsx b/src/pages/IndexPage/IndexPage.tsx
index d4e76aa..86796b4 100644
--- a/src/pages/IndexPage/IndexPage.tsx
+++ b/src/pages/IndexPage/IndexPage.tsx
@@ -2,21 +2,28 @@ import { Typography } from "@mui/material";
 import Container from "../../components/shared/Container";
 import { WelcomeContainer } from "./IndexPage.styles";
 import StartTestForm from "../../components/StartTestForm/StartTestForm";
+import Question from "../../components/Question/Question";
 
 const IndexPage = () => {
+
+const myQuestion = {
+  title: "Example Question",
+  category: "Math",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies, urna eu aliquet tincidunt, augue turpis gravida risus, sit amet posuere neque tellus sit amet justo. Curabitur non facilisis orci, vitae eleifend est. Cras fermentum, velit at scelerisque varius, mauris justo cursus lacus, ac porttitor ante metus sit amet nibh. Vivamus imperdiet, diam vel efficitur euismod, urna odio pharetra ipsum, vitae sollicitudin neque enim ut tortor. Donec gravida orci.",
+  difficulty: 3,
+  author: "David"
+};
+
+
   return (
     <Container>
       <WelcomeContainer>
         <Typography variant="h2">Welcome To HoshiAI!</Typography>
         <Typography variant="subtitle1">The best place to learn!</Typography>
       </WelcomeContainer>
-      <StartTestForm/>
-      {/* <ButtonGroup>
-        <Button sx={{ backgroundColor: "#6610F2" }} variant="contained">
-          Im Feeling Lucky
-        </Button>
-      </ButtonGroup> */}
-      <Typography variant="h3">Browse Questions</Typography>
+      <StartTestForm />
+      <Typography sx={{mb:"36px"}} variant="h3">Browse Questions</Typography>
+      <Question question={myQuestion} />
     </Container>
   );
 };