diff --git a/client/Make_Suggestion_Code/makeSuggestion.css b/client/Make_Suggestion_Code/makeSuggestion.css
index 644d3c84f442978081581bc1dffa4083f49a192c..0d203150d0ac011d08be442db01f4f302ba09566 100644
--- a/client/Make_Suggestion_Code/makeSuggestion.css
+++ b/client/Make_Suggestion_Code/makeSuggestion.css
@@ -1,90 +1,98 @@
-.filter {
-    margin-left: 2%;
-    margin-top: 1%;
-}
-
-.filterFont {
-    font-family:  'Gill Sans MT';
-    font-size: 200%;
-    margin-left: 3%;
-}
+/* .filterFont {
+  font-family: "Roboto", sans-serif;
+  margin-left: 5%;
+} */
 
 .makeSuggestionFilterButtons {
-    text-align: left;
-    margin-left: 3%;
-    margin-bottom: 5%;
+  margin-left: 5%;
+  margin-bottom: 1%;
 }
 
-.filterButtonsLabel {
-    text-align: center;
-    display: inline-block;
-    border-radius: 10px 0px 0px 10px;
-    color: #ffffff;
-    background: linear-gradient(to right, #bc57ad 12%, #ca41b3 25%, #b72fa5 50%, #a71c94 75%);
-    font-family:  'Gill Sans MT';
-    font-size: 21px;
-    width: 150px;
-    height: 32px;
-    padding-top: 7px;   
-}
-
-.filterButtons {    
-    border-radius: 0px 10px 10px 0px;
-    color: #ffffff;
-    background: linear-gradient(to right, #a1188c 12%, #92157d 25%, #6d0e60 50%, #4e0b45 75%);
-    cursor: pointer;
-    font-family:  'Gill Sans MT';
-    font-size: 19.75px;
-    text-align: center;
-    width: 150px;
-    height: 40px;
+.filter {
+  background-image: linear-gradient(
+    to right,
+    rgb(201, 164, 213),
+    rgb(162, 88, 202)
+  );
+  padding: 8px;
+  color: #fffafa;
+  font-weight: 1700;
+  border-radius: 8px;
+  margin-right: 3%;
+  width: 12%;
+  font-family: "Roboto", sans-serif;
+  font-weight: 400;
+  font-size: medium;
+  text-align: center;
 }
 
 #middleFilterButtonLabel {
-    margin-left: 2.5%;
+  margin-left: 2.5%;
 }
 
 #selectSection {
-    margin-right: 2.5%;
+  margin-right: 2.5%;
 }
 
-.option {
-    color: black;
-}
+/* .option {
+  color: black;
+} */
 
 #suggestionQuestion {
-    font-size: 20px;
+  font-size: 20px;
+  margin: 0%;
 }
 
 .shadowText {
-    text-align: left;
-    margin-top: 5%;
-    margin-bottom: 10%;
-    margin-left: 10%;
-    max-width: 28%;
+  display: flex;
+  align-items: center;
+  text-align: left;
+  vertical-align: middle;
+  width: 40%;
+  padding: 5%;
 }
 
 #suggestionCard {
-    width: 78%;
-    margin-top: 1%;
-    margin-left: 5%;
-    border: 1px solid rgb(246, 144, 255);
-    border-radius: 5px;
-    align-items: right;
+  width: 78%;
+  margin-top: 1%;
+  margin-left: 5%;
+  border: 1px solid rgb(246, 144, 255);
+  border-radius: 5px;
+  align-items: right;
 }
 
 .inputBox {
-    align-items: right;
-    margin-left: 27.5%;
-    margin-right: 0%;
+  /* align-items: right; */
+  margin-left: 8%;
+  margin-right: 0%;
+  width: 100%;
 }
 
 .inputBoxForm {
-    text-align: center;
-    background-color: transparent;
-    height: 168px;
-    width: 200%;
-    border: none;
-    border-radius: 5px;
+  text-align: left;
+  background-color: transparent;
+  height: 100%;
+  width: 98%;
+  border: none;
+  border-radius: 5px;
+  padding-left: 2%;
 }
 
+#suggestion-button {
+  background-image: linear-gradient(
+    to right,
+    rgb(201, 164, 213),
+    rgb(162, 88, 202)
+  );
+  padding: 6px;
+  color: #fffafa;
+  font-weight: 1700;
+  border-radius: 8px;
+  width: 10%;
+  font-family: "Roboto", sans-serif;
+  font-weight: 400;
+  font-size: medium;
+  text-align: center;
+  margin-left: 5%;
+  margin-top: 1%;
+}
diff --git a/client/Make_Suggestion_Code/makeSuggestion.html b/client/Make_Suggestion_Code/makeSuggestion.html
index 0ab25e6010d5ea6339ae582fe777e47f580eaeac..bde358efdfc072f98e1de6925255040fa849ab44 100644
--- a/client/Make_Suggestion_Code/makeSuggestion.html
+++ b/client/Make_Suggestion_Code/makeSuggestion.html
@@ -2,45 +2,58 @@
 <html lang="en">
   <html>
     <head>
-      <link rel="stylesheet" href="/Make_Suggestion_Code/makeSuggestion.css" />
-      <link rel="stylesheet" href="/Activity_card_code/activitity_card.css" />
+      <meta charset="UTF-8" />
+      <link rel="stylesheet" href="Make_Suggestion_Code/makeSuggestion.css" />
+      <link rel="stylesheet" href="Activity_card_code/activitity_card.css" />
       <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
+      <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=Roboto:wght@300;400&display=swap"
+        rel="stylesheet"
+      />
+
       <title>Make Suggestion</title>
     </head>
     <body>
-      <script src="/dist/makeSuggestion.bundle.js" type="module"></script>
+      <script src="../../dist/makeSuggestion.bundle.js" type="module"></script>
       <div id="suggestionPage">
-        <div class="filter">
-          <p class="filterFont" id="makeSuggestionDivision">Division</p>
+        <div class="filter-section">
+          <!-- <p class="filterFont" id="filter-font">
+            Fyll i vårdinstans och avdelning som förslaget gäller
+          </p> -->
           <div class="makeSuggestionFilterButtons">
-            <label for="department" class="filterButtonsLabel"
-              >Department:
-            </label>
-            <select
-              name="department"
-              id="selectDepartment"
-              class="filterButtons"
-            >
+            <select class="filter" id="CareFacilityDropdown">
+              <option value="all">VÃ¥rdinstans</option>
               <!-- Options will be added dynamically here -->
             </select>
 
-            <label
-              for="section"
-              class="filterButtonsLabel"
-              id="middleFilterButtonLabel"
-              >Section:
-            </label>
-            <select name="section" id="selectSection" class="filterButtons">
+            <select class="filter" id="departmentDropdown">
+              <option value="all">Avdelningar</option>
               <!-- Options will be added dynamically here -->
             </select>
+          </div>
+        </div>
 
-            <label for="type" class="filterButtonsLabel">Type: </label>
-            <select name="type" id="selectDepartment" class="filterButtons">
-              <option value="option1" class="option">Option 1</option>
-              <option value="option2" class="option">Option 2</option>
-              <option value="option3" class="option">Option 3</option>
-            </select>
+        <!-- <p class="filterFont" id="filter-font">
+          Fyll i mer information om ditt förslag
+        </p> -->
+        <div class="activityCard" id="suggestionCard">
+          <div class="activityCardBorder">
+            <div class="shadowText">
+              <p id="suggestionQuestion" class="activityCardFont">Rubrik</p>
+            </div>
+            <div class="inputBox">
+              <form action="/url" method="POST" class="inputBoxForm">
+                <input
+                  type="text"
+                  class="inputBoxForm"
+                  id="inputBoxFormNameInput"
+                  placeholder="Vad vill du kalla ditt förslag?"
+                />
+              </form>
+            </div>
           </div>
         </div>
 
@@ -52,12 +65,12 @@
               </p>
             </div>
             <div class="inputBox">
-              <form action="/url" method="POST" id="inputBoxFormName">
+              <form action="/url" method="POST" class="inputBoxForm">
                 <input
                   type="text"
                   class="inputBoxForm"
                   id="inputBoxFormNameInput"
-                  placeholder="Berätta om din förbättring och vilket område det hade förbättrat."
+                  placeholder="Berätta om område ditt förslag hade förbättrat."
                 />
               </form>
             </div>
@@ -67,17 +80,15 @@
         <div class="activityCard" id="suggestionCard">
           <div class="activityCardBorder">
             <div class="shadowText" id="middleShadowText">
-              <p id="suggestionQuestion" class="activityCardFont">
-                Hur kan förbättringen implementeras?
-              </p>
+              <p id="suggestionQuestion" class="activityCardFont">Bakgrund</p>
             </div>
             <div class="inputBox">
-              <form action="/url" method="POST" id="inputBoxFormContent">
+              <form action="/url" method="POST" class="inputBoxForm">
                 <input
                   type="text"
                   class="inputBoxForm"
                   id="inputBoxFormContentInput"
-                  placeholder="Skriv hur du tror att förbättringen implementeras på bästa sätt."
+                  placeholder="Beskriv problemet"
                 />
               </form>
             </div>
@@ -92,20 +103,58 @@
               </p>
             </div>
             <div class="inputBox">
-              <form action="/url" method="POST" id="inputBoxFormPurpose">
+              <form action="/url" method="POST" class="inputBoxForm">
+                <input
+                  type="text"
+                  class="inputBoxForm"
+                  id="inputBoxFormPurposeInput"
+                  placeholder="Vad ska åstadkommas och varför? Kom ihåg att få med patientperspektivet"
+                />
+              </form>
+            </div>
+          </div>
+        </div>
+
+        <div class="activityCard" id="suggestionCard">
+          <div class="activityCardBorder">
+            <div class="shadowText">
+              <p id="suggestionQuestion" class="activityCardFont">
+                Hur ska det mätas?
+              </p>
+            </div>
+            <div class="inputBox">
+              <form action="/url" method="POST" class="inputBoxForm">
+                <input
+                  type="text"
+                  class="inputBoxForm"
+                  id="inputBoxFormPurposeInput"
+                  placeholder="Hur vet vi att en förändring är en förbättring?"
+                />
+              </form>
+            </div>
+          </div>
+        </div>
+
+        <div class="activityCard" id="suggestionCard">
+          <div class="activityCardBorder">
+            <div class="shadowText">
+              <p id="suggestionQuestion" class="activityCardFont">Idéer</p>
+            </div>
+            <div class="inputBox">
+              <form action="/url" method="POST" class="inputBoxForm">
                 <input
                   type="text"
                   class="inputBoxForm"
                   id="inputBoxFormPurposeInput"
-                  placeholder="Berätta vad du tror att förbättringen kommer leda till och hur det skulle förbättra..."
+                  placeholder="Vilka förändringar kan prövas för att uppnå en förbättring?"
                 />
               </form>
             </div>
           </div>
         </div>
 
-        <div class="submitButton" id="suggestionButton">
-          <button>Submit</button>
+        <div class="submitButton">
+          <button id="suggestion-button">Submit</button>
         </div>
         <div id="message"></div>
       </div>
diff --git a/server/main.py b/server/main.py
index 757f55d4a14520e3b1e998de51d6d08ed769016c..8f357f1b27705ac0aa69d4246b026177b008028b 100644
--- a/server/main.py
+++ b/server/main.py
@@ -4,7 +4,7 @@ app = Flask(__name__, static_folder='../client/', static_url_path='/')
 
 @app.route("/")
 def client():
-  return app.send_static_file("ideaBank.html")
+  return app.send_static_file("Make_Suggestion_Code/makeSuggestion.html")
 
 if __name__ == "__main__":
     app.run(port=5001, debug=True)