diff --git a/app/src/app/views/fevermap-data-entry.js b/app/src/app/views/fevermap-data-entry.js
index af2af7d3a67b62d69602b436fe104b6eeb5a85ed..aa65762aa6c28ddadca0199e85571bbb271b9376 100644
--- a/app/src/app/views/fevermap-data-entry.js
+++ b/app/src/app/views/fevermap-data-entry.js
@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css, unsafeCSS } from 'lit-element';
 import { MDCSlider } from '@material/slider';
 import { MDCCheckbox } from '@material/checkbox/component';
 import maleIcon from 'src/assets/images/male.svg';
@@ -35,11 +35,13 @@ class FevermapDataEntry extends LitElement {
             selectedCountryIndex: { type: Number },
 
             errorMessage: { type: String },
-        };
-    }
 
-    static get styles() {
-        return [];
+            currentQuestion: { type: Number },
+            questionCount: { type: Number },
+
+            yearOfBirth: { type: Number },
+            symptoms: { type: Array },
+        };
     }
 
     constructor() {
@@ -83,13 +85,18 @@ class FevermapDataEntry extends LitElement {
         this.previousSubmissions = [];
         this.hasQueuedEntries = false;
         this.queuedEntries = [];
+
+        this.currentQuestion = 1;
+        this.questionCount = this.firstTimeSubmitting ? 4 : 3;
+        this.symptoms = [];
     }
 
     firstUpdated(_changedProperties) {
-        this.initializeComponents();
-        this.getGeoLocationInfo();
+        /*this.initializeComponents();
         this.getPreviousSubmissionsFromIndexedDb();
-        this.getQueuedEntriesFromIndexedDb();
+        this.getQueuedEntriesFromIndexedDb();*/
+        this.initSlider();
+        this.getGeoLocationInfo();
     }
 
     createCountrySelectOptions() {
@@ -195,11 +202,10 @@ class FevermapDataEntry extends LitElement {
     }
 
     initSlider() {
-        const slider = new MDCSlider(this.querySelector('.mdc-slider'));
-        slider.listen('MDCSlider:input', () => {
-            this.feverAmount = slider.value.toFixed(1);
+        this.querySelector('#temperature-meter').addEventListener('input', e => {
+            console.log(e);
+            this.feverAmount = e.target.value;
         });
-        return slider;
     }
 
     async handleSubmit() {
@@ -351,7 +357,156 @@ class FevermapDataEntry extends LitElement {
         SnackBar.success(Translator.get('system_messages.success.location_update'));
     }
 
+    moveToFeverQuestions() {
+        let carouselWrapper = this.querySelector('.fevermap-data-entry-content');
+        let targetElem = this.querySelector('.fevermap-fever-questions');
+        let target = targetElem.offsetLeft * 0.925;
+
+        this.yearOfBirth = this.querySelector('#birth-year').getValue();
+        this.smoothScroll(carouselWrapper, target);
+    }
+
+    moveToOtherSymptomps(tempNotKnown) {
+        let carouselWrapper = this.querySelector('.fevermap-data-entry-content');
+        let targetElem = this.querySelector('.fevermap-other-symptoms-questions');
+        let target = targetElem.offsetLeft * 0.96;
+
+        this.smoothScroll(carouselWrapper, target);
+    }
+
+    moveToLocation() {
+        let carouselWrapper = this.querySelector('.fevermap-data-entry-content');
+        let targetElem = this.querySelector('.fevermap-location-questions');
+        let target = targetElem.offsetLeft * 0.975;
+
+        this.smoothScroll(carouselWrapper, target);
+    }
+
+    smoothScroll(div, target) {
+        (function smoothScroll() {
+            if (div.scrollLeft >= target) return;
+            div.scrollLeft += 10;
+            setTimeout(smoothScroll, 10);
+        })();
+    }
+
+    handleSymptomAdd(e) {
+        let target = e.target;
+        if (e.target.nodeName === 'P') {
+            target = target.parentNode;
+        }
+        if (this.symptoms.includes(e.target.id)) {
+            this.symptoms.splice(this.symptoms.indexOf(e.target.id), 1);
+            target.classList.remove('symptom--selected');
+        } else {
+            this.symptoms.push(e.target.id);
+            target.classList.add('symptom--selected');
+        }
+    }
+
     render() {
+        return html`
+            <div class="container view-wrapper">
+                <div class="fevermap-data-entry-content">
+                    <div
+                        class="fevermap-entry-carousel${this.questionCount === 4
+                            ? ' fevermap-entry-carousel--full-width'
+                            : ' fevermap-entry-carousel--smaller-width'}"
+                    >
+                        ${this.renderQuestions()}
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    renderQuestions() {
+        return html`
+            ${this.questionCount === 4
+                ? html`
+                      <div class="fevermap-entry-window mdc-elevation--z9">
+                          <h2>New Entry</h2>
+                          <p class="subtitle">As this is your first time, we'll ask you a few questions first.</p>
+                          ${this.getYearOfBirthInput()} ${this.getGenderInput()}
+                          <div class="proceed-button">
+                              <button class="mdc-button mdc-button--raised" @click="${this.moveToFeverQuestions}">
+                                  <div class="mdc-button__ripple"></div>
+
+                                  <i class="material-icons mdc-button__icon" aria-hidden="true">save</i>
+                                  <span class="mdc-button__label">${'Save'}</span>
+                              </button>
+                          </div>
+                      </div>
+                  `
+                : ''}
+            <div class="fevermap-entry-window mdc-elevation--z9 fevermap-fever-questions">
+                <h2>New Entry</h2>
+                <p class="temperature-title">What's your temperature?</p>
+                ${this.getFeverMeter()}
+
+                <div class="proceed-button">
+                    <button class="mdc-button mdc-button--raised" @click="${this.moveToOtherSymptomps}">
+                        <div class="mdc-button__ripple"></div>
+
+                        <i class="material-icons mdc-button__icon" aria-hidden="true">done</i>
+                        <span class="mdc-button__label">${'Set temperature'}</span>
+                    </button>
+                </div>
+            </div>
+            <div class="fevermap-entry-window mdc-elevation--z9 fevermap-other-symptoms-questions">
+                <h2>New Entry</h2>
+                <p class="symptoms-title">Other symptoms?</p>
+                <p class="subtitle">Choose all that apply</p>
+                <div class="symptom-holder">
+                    <div class="symptom" id="breathing-difficulty" @click="${this.handleSymptomAdd}">
+                        <p>Difficulty to breathe</p>
+                    </div>
+                    <div class="symptom" id="cough" @click="${this.handleSymptomAdd}">
+                        <p>Cough</p>
+                    </div>
+                    <div class="symptom" id="sore-throat" @click="${this.handleSymptomAdd}">
+                        <p>Sore throat</p>
+                    </div>
+                    <div class="symptom" id="muscular-pain" @click="${this.handleSymptomAdd}">
+                        <p>Muscular pain</p>
+                    </div>
+                </div>
+
+                <div class="mdc-form-field">
+                    <div class="mdc-checkbox">
+                        <input type="checkbox" class="mdc-checkbox__native-control" id="checkbox-1" />
+                        <div class="mdc-checkbox__background">
+                            <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
+                                <path
+                                    class="mdc-checkbox__checkmark-path"
+                                    fill="none"
+                                    d="M1.73,12.91 8.1,19.28 22.79,4.59"
+                                />
+                            </svg>
+                            <div class="mdc-checkbox__mixedmark"></div>
+                        </div>
+                        <div class="mdc-checkbox__ripple"></div>
+                    </div>
+                    <label for="checkbox-1">I have a positive diagnosis of COVID-19</label>
+                </div>
+                <div class="proceed-button">
+                    <button class="mdc-button mdc-button--raised" @click="${this.moveToLocation}">
+                        <div class="mdc-button__ripple"></div>
+
+                        <i class="material-icons mdc-button__icon" aria-hidden="true">done</i>
+                        <span class="mdc-button__label">${'Set symptoms'}</span>
+                    </button>
+                </div>
+            </div>
+            <div class="fevermap-entry-window mdc-elevation--z9 fevermap-location-questions">
+                <h2>New Entry</h2>
+                <p>What's your location?</p>
+                ${this.getGeoLocationInput()}
+            </div>
+        `;
+    }
+
+    /*render() {
         return html`
             <div class="container view-wrapper">
                 <div class="fevermap-data-entry-content">
@@ -406,90 +561,32 @@ class FevermapDataEntry extends LitElement {
                   `
                 : ''}
         `;
-    }
+    }*/
 
     getFeverMeter() {
         return html`
             <div class="entry-field">
-                <p>${Translator.get('entry.questions.do_you_have_fever')}</p>
-                <div
-                    class="fever-answer-button mdc-elevation--z3${
-                        this.hasFever ? ' fever-answer-button--has-fever' : ' fever-answer-button--no-fever'
-                    }
-                    ${this.hasFever === null ? ' fever-answer-button--not-set' : ''}"
-                >
-                    <div class="no-button fever-button${this.hasFever === false ? ' fever-button--selected' : ''}"
-                    @click="${() => this.handleFeverButton(false)}">
-                        <p>${Translator.get('entry.questions.no')}</p>
-                    </div>
-                    <div class="yes-button fever-button${this.hasFever ? ' fever-button--selected' : ''}"
-                    @click="${() => this.handleFeverButton(true)}">
-                        <p>${Translator.get('entry.questions.yes')}</p>
-                    </div>
-                </div>
-                    ${
-                        this.hasFever
-                            ? html`
                                   <div class="fever-meters ${this.feverAmountNotKnown ? ' fever-meters--hidden' : ''}">
-                                      <p>${Translator.get('entry.questions.how_much')}</p>
-
                                       <div class="fever-slider">
-                                          <div
-                                              class="mdc-slider"
-                                              tabindex="0"
-                                              role="slider"
-                                              aria-valuemin="37"
-                                              aria-valuemax="44"
-                                              aria-valuenow="37"
-                                              aria-label="Select Value"
-                                              data-step="0.1"
-                                          >
-                                              <div class="mdc-slider__track-container">
-                                                  <div class="mdc-slider__track"></div>
-                                              </div>
-                                              <div class="mdc-slider__thumb-container">
-                                                  <div class="mdc-slider__pin">
-                                                      <span class="mdc-slider__pin-value-marker"></span>
-                                                  </div>
-                                                  <svg class="mdc-slider__thumb" width="21" height="21">
-                                                      <circle cx="10.5" cy="10.5" r="7.875"></circle>
-                                                  </svg>
-                                                  <div class="mdc-slider__focus-ring"></div>
-                                              </div>
+                                          <div class="fever-slider-element">
+                                            <input type="range" id="temperature-meter" min="35" max="45" step="0.1" value="36">
                                           </div>
                                       </div>
-                                      <p class="fever-amount-display">
-                                          ${Translator.get('entry.questions.degrees_of_fever', {
-                                              degrees: this.getFeverWithUnit(),
-                                          })}
-                                          (${this.getFeverWithUnit(true)})
-                                      </p>
+                                      <div class="fever-amount-display">
+                                          <p class="celcius mdc-elevation--z3">${this.getFeverWithUnit()}</p>
+                                          <p class="fahrenheit mdc-elevation--z3">${this.getFeverWithUnit(true)}</p>
+                                      </div>
                                   </div>
                                   <div
-                                      class="mdc-form-field fever-not-measured-field ${this.feverAmountNotKnown
-                                          ? ' fever-not-measured-field--checked'
-                                          : ''}"
+                                      class="mdc-form-field fever-not-measured-field ${
+                                          this.feverAmountNotKnown ? ' fever-not-measured-field--checked' : ''
+                                      }"
                                   >
-                                      <div class="mdc-checkbox">
-                                          <input type="checkbox" class="mdc-checkbox__native-control" id="checkbox-1" />
-                                          <div class="mdc-checkbox__background">
-                                              <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
-                                                  <path
-                                                      class="mdc-checkbox__checkmark-path"
-                                                      fill="none"
-                                                      d="M1.73,12.91 8.1,19.28 22.79,4.59"
-                                                  />
-                                              </svg>
-                                              <div class="mdc-checkbox__mixedmark"></div>
-                                          </div>
-                                          <div class="mdc-checkbox__ripple"></div>
-                                      </div>
-
-                                      <label for="checkbox-1">${Translator.get('entry.questions.not_measured')}</label>
+                                      <p id="dont-know-temperature" @click="${() =>
+                                          this.moveToOtherSymptomps(true)}">${Translator.get(
+            'entry.questions.not_measured'
+        )}</p>
                                   </div>
-                              `
-                            : ''
-                    }
                 </div>
             </div>
         `;
@@ -500,7 +597,7 @@ class FevermapDataEntry extends LitElement {
             <div class="entry-field">
                 <p>${Translator.get('entry.questions.birth_year')}</p>
                 <input-field
-                    placeHolder=${Translator.get('entry.questions.birth_year_placeholder')}
+                    placeHolder=${'Years 1900 - 2020'}
                     fieldId="year-of-birth-input"
                     id="birth-year"
                     value="${this.latestEntry ? this.latestEntry.birth_year : ''}"
@@ -541,14 +638,6 @@ class FevermapDataEntry extends LitElement {
     getGeoLocationInput() {
         return html`
             <div class="entry-field">
-                <p>${Translator.get('entry.questions.location_information')}</p>
-                <input-field
-                    placeHolder="${Translator.get('entry.questions.city')}"
-                    fieldId="location-city-input"
-                    id="location-city"
-                    value="${this.geoCodingInfo ? this.geoCodingInfo.city : ''}"
-                    ?disabled=${true}
-                ></input-field>
                 <select-field
                     id="location-country"
                     label="${Translator.get('entry.questions.country')}"
@@ -563,9 +652,6 @@ class FevermapDataEntry extends LitElement {
                         ? this.geoCodingInfo.postal_code
                         : ''}"
                 ></input-field>
-                <p class="subtitle">
-                    ${Translator.get('entry.questions.location_determination_subtitle')}
-                </p>
                 <p class="subtitle">
                     ${Translator.get('entry.questions.location_change_subtitle')}
                 </p>
@@ -585,6 +671,15 @@ class FevermapDataEntry extends LitElement {
                         <span class="mdc-button__label">${Translator.get('entry.questions.use_gps')}</span>
                     </button>
                 </div>
+
+                <div class="proceed-button">
+                    <button class="mdc-button mdc-button--raised" @click="${this.moveToLocation}">
+                        <div class="mdc-button__ripple"></div>
+
+                        <i class="material-icons mdc-button__icon" aria-hidden="true">done</i>
+                        <span class="mdc-button__label">${'Set location and submit'}</span>
+                    </button>
+                </div>
             </div>
         `;
     }
@@ -608,7 +703,7 @@ class FevermapDataEntry extends LitElement {
             </div>
         `;
     }
-
+    /*
     getPreviousSubmissionsSummary() {
         return html`
             <div class="submission-summary">
@@ -634,6 +729,8 @@ class FevermapDataEntry extends LitElement {
             </div>
         `;
     }
+    
+ */
 
     createRenderRoot() {
         return this;
diff --git a/app/src/assets/styles/views/fevermap-data-entry.scss b/app/src/assets/styles/views/fevermap-data-entry.scss
index 6d2fb7e29be252364b45dfd2f410f92301c6efbf..7e1f08be0324685135a1899ec9d89473b3fa5bea 100644
--- a/app/src/assets/styles/views/fevermap-data-entry.scss
+++ b/app/src/assets/styles/views/fevermap-data-entry.scss
@@ -1,5 +1,9 @@
 @use "~@material/button/mixins";
 
+.container {
+  margin-bottom: 1rem;
+}
+
 .fevermap-data-entry-content {
   margin: 3rem 30% 10%;
   height: 100%;
@@ -241,14 +245,194 @@ p.mdc-theme--error {
     }
   }
 }
+/* new styles */
+.fevermap-data-entry-content {
+  min-height: 75vh;
+  max-width: 100%;
+  overflow-x: hidden;
+  padding: 4rem 2rem 2rem;
+  margin: 0;
+}
 
 .first-entry-disclaimer {
   color: #ed143d;
 }
 
+
+.fevermap-entry-carousel {
+  min-height: inherit;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-right: 4rem;
+
+  &--full-width {
+    width: calc(100vw * 4.15);
+  }
+
+  &--smaller-width {
+    width: calc(100vw * 3.15);
+  }
+
+  .fevermap-entry-window {
+    width: calc(85vw - 4rem);
+    border-radius: 25px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 1rem 2rem 0;
+
+    .entry-field {
+      width: 100%;
+    }
+
+    .subtitle {
+      color: #8e8e8e;
+    }
+
+    h2 {
+      font-weight: 400;
+    }
+
+    .proceed-button {
+      text-align:center;
+      margin-top: 2rem;
+      .mdc-button {
+        background: cornflowerblue;
+      }
+    }
+  }
+}
+
+.fever-slider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .fever-slider-element {
+    input {
+      writing-mode: bt-lr; /* IE */
+      -webkit-appearance: slider-vertical; /* WebKit */
+      width: 8px;
+      height: 175px;
+      padding: 0 5px;
+    }
+  }
+}
+
+.temperature-title {
+  font-size: 1.2rem;
+  margin: 0 0 2rem;
+}
+
+.symptoms-title {
+  margin: 0 0 1rem 0;
+  font-size: 1.2rem;
+}
+
+.fever-amount-display {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  p {
+    padding: 0.5rem;
+    font-size: 1.4rem;
+    border-radius: 5px;
+  }
+}
+
+.fever-not-measured-field {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  p {
+    text-decoration: underline;
+    margin: 0;
+  }
+}
+
+.symptom-holder {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 2rem;
+  .symptom {
+    width: 90%;
+    display: flex;
+    align-items: center;
+    border-radius: 10px;
+    border: 2px solid #25a2b1;
+    padding: 0.5rem;
+    margin-bottom: 1rem;
+
+    &--selected {
+      background: #25a2b166;
+    }
+    p {
+      margin: 0;
+    }
+  }
+}
+
+label {
+  font-size: 0.9rem;
+}
+
+
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 8.4px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: linear-gradient(45deg, #03A9F4, #F44336);
+  border-radius: 10px;
+  border: 0.2px solid #010101;
+}
+
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: linear-gradient(45deg, #03A9F4, #F44336);
+}
+
+input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 8.4px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: linear-gradient(45deg, #03A9F4, #F44336);
+  border-radius: 10px;
+  border: 0.2px solid #010101;
+}
+
+input[type=range]::-ms-track {
+  width: 100%;
+  height: 8.4px;
+  cursor: pointer;
+  background: transparent;
+  border-color: transparent;
+  border-width: 16px 0;
+  color: transparent;
+}
+input[type=range]::-ms-fill-lower {
+  background: linear-gradient(45deg, #03A9F4, #F44336);
+  border: 0.2px solid #010101;
+  border-radius: 10px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+input[type=range]:focus::-ms-fill-lower {
+  background: linear-gradient(45deg, #03A9F4, #F44336);
+}
+input[type=range]::-ms-fill-upper {
+  background: linear-gradient(45deg, #03A9F4, #F44336);
+  border: 0.2px solid #010101;
+  border-radius: 10px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+input[type=range]:focus::-ms-fill-upper {
+  background: linear-gradient(45deg, #03A9F4, #F44336);
+}
 @media only screen and (max-width: 780px) {
 
   .fevermap-data-entry-content {
-    margin: 3rem 5%;
   }
 }
\ No newline at end of file