diff --git a/website/index.html b/website/index.html
index dd2f7b1..d39c245 100644
--- a/website/index.html
+++ b/website/index.html
@@ -6,6 +6,12 @@
   <link rel="icon" type="image/svg+xml" href="/generated_two_no_background.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Birdy</title>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+    rel="stylesheet">
 </head>
 
 <body>
diff --git a/website/src/Reviews.css b/website/src/Reviews.css
index 893b3a7..4425963 100644
--- a/website/src/Reviews.css
+++ b/website/src/Reviews.css
@@ -1,17 +1,27 @@
 .input-box {
     display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 80px;
+    width: 100%;
+    padding: 40px;
+    height: fit-content;
 }
 
 .review-select-dropdown {
     width: 200px;
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
-    height: calc(50px + 40px * 2);
+    justify-content: center;
+    height: fit-content;
     gap: 0px;
     user-select: none;
 }
 
+.review-select-dropdown.rating {
+    width: 60px;
+}
+
 .review-select-button {
     width: 100%;
     height: 50px;
@@ -19,7 +29,8 @@
     background: var(--surface);
     border: 1px solid var(--surface);
     outline: none;
-    color: white;
+    color: black;
+    font-weight: bold;
     border-radius: 16px;
 }
 
@@ -57,4 +68,35 @@
 .review-select-item:hover {
     cursor: pointer;
     border-color: white;
+}
+
+.review-text-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    height: fit-content;
+}
+
+.review-text {
+    resize: none;
+    overflow: hidden;
+    width: 300px;
+    height: 160px;
+    border-radius: 8px;
+    border: 1px solid var(--surface);
+    background: var(--surface);
+    color: black;
+    padding: 10px;
+    font-family: "Space Mono", monospace;
+    font-size: 15px;
+}
+
+.review-text:focus {
+    border: 1px solid white;
+}
+
+.review-text::placeholder {
+    color: white;
 }
\ No newline at end of file
diff --git a/website/src/Reviews.jsx b/website/src/Reviews.jsx
index a5109ac..80b6eb3 100644
--- a/website/src/Reviews.jsx
+++ b/website/src/Reviews.jsx
@@ -1,13 +1,15 @@
 import { useState, useRef, useEffect } from 'react';
 import './Reviews.css';
+import SelectDropdown from './components/SelectDropdown';
 
 function Reviews() {
     const [error, setError] = useState(null);
     const [selectedWebsite, setSelectedWebsite] = useState("Not Specified");
-    const [selectWebsiteVisibility, setSelectWebsiteVisibility] = useState(false);
-    const websiteSelectButton = useRef();
+    const [selectedRating, setSelectedRating] = useState(0);
     const [text, setText] = useState("");
 
+    const MAX_TEXT = 180;
+
 
     const fetchReviews = async () => {
         const response = await fetch(`api.marvinkrausser/review`, {
@@ -47,26 +49,25 @@ function Reviews() {
         setSelectedWebsite(website);
     };
 
+    const changeSelectedRating = (rating) => {
+        setSelectedRating(rating);
+    }
+
     const websites = [
         "CNN (current)",
         "Portfolio",
         "Not Specified"
     ];
 
-    useEffect(() => {
-        function handleClick(event) {
-            if (websiteSelectButton.current && !websiteSelectButton.current.contains(event.target)
-            ) {
-                setSelectWebsiteVisibility(false);
-            }
+    const ratings = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+    const handleTextInput = (e) => {
+        const textInput = e.target.value;
+
+        if (textInput.length <= MAX_TEXT || textInput.length < text.length) {
+            setText(textInput);
         }
-
-        document.addEventListener("click", handleClick);
-
-        return () => {
-            document.removeEventListener("click", handleClick);
-        };
-    }, []);
+    };
 
 
     return (<>
@@ -74,31 +75,23 @@ function Reviews() {
             <h1 className='site-headline'>Reviews</h1>
 
             <div className='input-box'>
-                <div className='review-select-dropdown'>
-                    <button ref={websiteSelectButton} className={selectWebsiteVisibility ? "review-select-button active" : "review-select-button"} onClick={() => { setSelectWebsiteVisibility(!selectWebsiteVisibility) }}>
-                        {selectedWebsite}
-                    </button>
-                    {selectWebsiteVisibility && <div className='review-select-menu'>
-                        {websites.map((site, i) =>
-                            selectedWebsite !== site && (
-                                <div
-                                    key={site}
-                                    className={i >= (websites.length - (selectedWebsite == websites.at(-1) ? 2 : 1)) ? "review-select-item last" : "review-select-item"}
-                                    onClick={() => changeSelectedWebsite(site)}
-                                >
-                                    {site}
-                                </div>
-                            )
-                        )}
-                    </div>}
+                <SelectDropdown values={websites} defaultValue={websites.at(0)} classNames={"website"} changeInputParent={changeSelectedWebsite} />
+
+                <div className='review-text-box'>
+                    <textarea
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck={false}
+                        className='review-text'
+                        type="text"
+                        value={text}
+                        onChange={(e) => handleTextInput(e)}
+                        placeholder="Type something..."
+                    />
+                    <p>{text.length}/{MAX_TEXT}</p>
                 </div>
 
-                <input
-                    type="text"
-                    value={text}
-                    onChange={(e) => setText(e.target.value)}
-                    placeholder="Type something..."
-                />
+                <SelectDropdown values={ratings} defaultValue={ratings.at(0)} classNames={"rating"} changeInputParent={changeSelectedRating} />
             </div>
         </div>
     </>)
diff --git a/website/src/components/SelectDropdown.jsx b/website/src/components/SelectDropdown.jsx
new file mode 100644
index 0000000..01b82c7
--- /dev/null
+++ b/website/src/components/SelectDropdown.jsx
@@ -0,0 +1,55 @@
+import { useState, useRef, useEffect } from 'react';
+
+function SelectDropdown(props) {
+    const values = props.values;
+    const defaultValue = props.defaultValue;
+    const classNames = props.classNames;
+    const changeInputParent = props.changeInputParent;
+    const [selectedInput, setselectedInput,] = useState(defaultValue);
+    const [selectVisibility, setSelectVisibility] = useState(false);
+    const SelectButton = useRef();
+
+    useEffect(() => {
+        function handleClick(event) {
+            if (SelectButton.current && !SelectButton.current.contains(event.target)
+            ) {
+                setSelectVisibility(false);
+            }
+        }
+
+        document.addEventListener("click", handleClick);
+
+        return () => {
+            document.removeEventListener("click", handleClick);
+        };
+    }, []);
+
+    const changeSelectedInput = (input) => {
+        setselectedInput(input);
+        changeInputParent(input);
+    };
+
+
+    return (
+        <div className={`review-select-dropdown ${classNames}`} >
+            <button ref={SelectButton} className={selectVisibility ? `review-select-button ${classNames} active` : `review-select-button ${classNames}`} onClick={() => { setSelectVisibility(!selectVisibility) }}>
+                {selectedInput}
+            </button>
+            {selectVisibility && <div className={`review-select-menu ${classNames}`}>
+                {values.map((item, i) =>
+                    String(selectedInput) !== String(item) && (
+                        <div
+                            key={item}
+                            className={i >= (values.length - (selectedInput == values.at(-1) ? 2 : 1)) ? `review-select-item ${classNames} last` : `review-select-item ${classNames}`}
+                            onClick={() => changeSelectedInput(item)}
+                        >
+                            {item}
+                        </div>
+                    )
+                )}
+            </div>}
+        </ div>
+    );
+}
+
+export default SelectDropdown;
\ No newline at end of file
