diff --git a/Client/src/components/TextFields/Description/DescriptionTextField.jsx b/Client/src/components/TextFields/Description/DescriptionTextField.jsx
index e1fe1d329..13c28783d 100644
--- a/Client/src/components/TextFields/Description/DescriptionTextField.jsx
+++ b/Client/src/components/TextFields/Description/DescriptionTextField.jsx
@@ -1,8 +1,21 @@
 import React from "react";
 import "./descriptionTextField.css";
+import { TextField } from "@mui/material";
 
-function DescriptionTextField() {
-  return <div>DescriptionTextField</div>;
+function DescriptionTextField({ hintText, hasError }) {
+  return (
+    <div className="description-field-holder">
+      <div className="text-field-title">Website</div>
+      <TextField
+        error={hasError}
+        className="description-field-area"
+        multiline
+        rows={4}
+        placeholder="Enter a description..."
+        helperText={hintText}
+      />
+    </div>
+  );
 }
 
 export default DescriptionTextField;
diff --git a/Client/src/components/TextFields/Description/descriptionTextField.css b/Client/src/components/TextFields/Description/descriptionTextField.css
index e69de29bb..9b62fa320 100644
--- a/Client/src/components/TextFields/Description/descriptionTextField.css
+++ b/Client/src/components/TextFields/Description/descriptionTextField.css
@@ -0,0 +1,32 @@
+:root {
+  --color-title-1: #344054;
+  --font-family-1: "Roboto", "Helvetica", "Arial", sans-serif;
+  --text-field-margin-0: 10px 20px;
+}
+
+.description-field-holder {
+  margin: var(--text-field-margin-0);
+  margin-top: 20px;
+}
+
+.text-field-title {
+  color: var(--color-title-1);
+  font-weight: bold;
+  font-family: var(--font-family-1);
+  margin-bottom: 10px;
+}
+
+.description-field-area {
+  font-size: 13px;
+  border-radius: 8px;
+}
+
+.description-field-label {
+  margin-top: 10px;
+  font-family: var(--font-family);
+  font-size: 11px;
+}
+
+.with-error {
+  color: red;
+}
diff --git a/Client/src/screens/PlayGround/PlayGround.jsx b/Client/src/screens/PlayGround/PlayGround.jsx
index 5625265d7..5e04db30e 100644
--- a/Client/src/screens/PlayGround/PlayGround.jsx
+++ b/Client/src/screens/PlayGround/PlayGround.jsx
@@ -3,6 +3,7 @@ import EmailTextField from "../../components/TextFields/Email/EmailTextField";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import WebsiteTextField from "../../components/TextFields/Website/WebsiteTextField";
+import DescriptionTextField from "../../components/TextFields/Description/DescriptionTextField";
 
 // This Component is just for the development and test
 // purposes and just to see what my components look like while development
@@ -42,6 +43,16 @@ function PlayGround() {
         hasCopyButton={true}
         hintText="This is a hint text to help user."
       />
+      <br />
+      <br />
+      <hr />
+      {/* Now, illustration of the Description text fields */}
+      <br />
+      <DescriptionTextField hintText="This is a hint text to help user." />
+      <DescriptionTextField
+        hasError={true}
+        hintText="This is a hint text to help user."
+      />
     </div>
   );
 }