diff --git a/src/assets/images/checkbox.svg b/src/assets/images/checkbox.svg
index 1c5997a..995ba93 100644
--- a/src/assets/images/checkbox.svg
+++ b/src/assets/images/checkbox.svg
@@ -1,8 +1,9 @@
 <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <g fill="none" fill-rule="evenodd">
         <path d="M0 0h24v24H0z"/>
+        <rect fill="#FFF" fill-rule="nonzero" width="24" height="24" rx="3.5"/>
         <rect fill="#FFF" fill-rule="nonzero" x="2" y="2" width="20" height="20" rx="1.5"/>
-        <rect fill-opacity=".5" fill="#72BFCA" fill-rule="nonzero" x="2" y="2" width="20" height="20" rx="1.5"/>
+        <rect fill="#177991" fill-rule="nonzero" x="2" y="2" width="20" height="20" rx="1.5"/>
         <path d="M20.5 2A1.5 1.5 0 0 1 22 3.5v17a1.5 1.5 0 0 1-1.5 1.5h-17A1.5 1.5 0 0 1 2 20.5v-17A1.5 1.5 0 0 1 3.5 2h17zm0 1.5h-17v17h17v-17z" fill="#177991" fill-rule="nonzero"/>
         <path fill="#FFF" fill-rule="nonzero" d="m10 17-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z"/>
     </g>
diff --git a/src/assets/images/orbital-sun.svg b/src/assets/images/orbital-sun.svg
index 36e95ee..ff3853c 100644
--- a/src/assets/images/orbital-sun.svg
+++ b/src/assets/images/orbital-sun.svg
@@ -1,28 +1,28 @@
 <svg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
-        <filter x="-32.5%" y="-32.5%" width="165%" height="165%" filterUnits="objectBoundingBox" id="kt9l4qt15a">
+        <filter x="-32.5%" y="-32.5%" width="165%" height="165%" filterUnits="objectBoundingBox" id="m8q5lgj2ha">
             <feGaussianBlur stdDeviation="1" in="SourceGraphic"/>
         </filter>
-        <filter x="-45%" y="-45%" width="190%" height="190%" filterUnits="objectBoundingBox" id="uuuo1sneab">
+        <filter x="-45%" y="-45%" width="190%" height="190%" filterUnits="objectBoundingBox" id="mwy4ysb44b">
             <feOffset in="SourceAlpha" result="shadowOffsetOuter1"/>
             <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
             <feColorMatrix values="0 0 0 0 0.996078431 0 0 0 0 0.31372549 0 0 0 0 0.0941176471 0 0 0 1 0" in="shadowBlurOuter1"/>
         </filter>
-        <filter x="-25%" y="-25%" width="150%" height="150%" filterUnits="objectBoundingBox" id="17m8yoyy8e">
+        <filter x="-25%" y="-25%" width="150%" height="150%" filterUnits="objectBoundingBox" id="0eda9rtqwe">
             <feGaussianBlur in="SourceGraphic"/>
         </filter>
-        <filter x="-37.5%" y="-37.5%" width="175%" height="175%" filterUnits="objectBoundingBox" id="53wepbn6ef">
+        <filter x="-37.5%" y="-37.5%" width="175%" height="175%" filterUnits="objectBoundingBox" id="jqim6890kf">
             <feOffset in="SourceAlpha" result="shadowOffsetOuter1"/>
             <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
             <feColorMatrix values="0 0 0 0 0.996078431 0 0 0 0 0.31372549 0 0 0 0 0.0941176471 0 0 0 1 0" in="shadowBlurOuter1"/>
         </filter>
-        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="cdoimp6tod">
+        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="27s8tdy2td">
             <stop stop-color="#FFDD6C" offset="0%"/>
             <stop stop-color="#FFDD6C" offset="25.595%"/>
             <stop stop-color="#FFA203" offset="89.689%"/>
             <stop stop-color="#FE5018" offset="100%"/>
         </radialGradient>
-        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="l3iwwncs2h">
+        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="5z1ahht6hh">
             <stop stop-color="#FFE89D" offset="0%"/>
             <stop stop-color="#FFE283" offset="13.458%"/>
             <stop stop-color="#FFDD6C" offset="32.393%"/>
@@ -30,18 +30,18 @@
             <stop stop-color="#FFA203" offset="89.689%"/>
             <stop stop-color="#FE5018" offset="100%"/>
         </radialGradient>
-        <circle id="c9ldibv0dc" cx="40" cy="40" r="20"/>
-        <circle id="v3h0jxy4hg" cx="40" cy="40" r="20"/>
+        <circle id="cwj1p1w70c" cx="40" cy="40" r="20"/>
+        <circle id="etkqst4ibg" cx="40" cy="40" r="20"/>
     </defs>
     <g fill="none" fill-rule="evenodd">
         <path d="M0 0h80v80H0z"/>
-        <g filter="url(#kt9l4qt15a)">
-            <use fill="#000" filter="url(#uuuo1sneab)" xlink:href="#c9ldibv0dc"/>
-            <use fill="url(#cdoimp6tod)" xlink:href="#c9ldibv0dc"/>
+        <g filter="url(#m8q5lgj2ha)">
+            <use fill="#000" filter="url(#mwy4ysb44b)" xlink:href="#cwj1p1w70c"/>
+            <use fill="url(#27s8tdy2td)" xlink:href="#cwj1p1w70c"/>
         </g>
-        <g filter="url(#17m8yoyy8e)">
-            <use fill="#000" filter="url(#53wepbn6ef)" xlink:href="#v3h0jxy4hg"/>
-            <use fill="url(#l3iwwncs2h)" xlink:href="#v3h0jxy4hg"/>
+        <g filter="url(#0eda9rtqwe)">
+            <use fill="#000" filter="url(#jqim6890kf)" xlink:href="#etkqst4ibg"/>
+            <use fill="url(#5z1ahht6hh)" xlink:href="#etkqst4ibg"/>
         </g>
     </g>
 </svg>
diff --git a/src/assets/images/slider-thumb.svg b/src/assets/images/slider-thumb.svg
index f449ea4..3d4c6df 100644
--- a/src/assets/images/slider-thumb.svg
+++ b/src/assets/images/slider-thumb.svg
@@ -1,17 +1,17 @@
 <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
-        <filter x="-21.9%" y="-15.6%" width="143.8%" height="143.8%" filterUnits="objectBoundingBox" id="wo8ae1ktia">
+        <filter x="-21.9%" y="-15.6%" width="143.8%" height="143.8%" filterUnits="objectBoundingBox" id="baew37szna">
             <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
             <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
             <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" in="shadowBlurOuter1"/>
         </filter>
-        <circle id="y15elo0alb" cx="16" cy="16" r="16"/>
+        <circle id="2d2pbbxtrb" cx="16" cy="16" r="16"/>
     </defs>
     <g fill-rule="nonzero" fill="none">
         <g transform="translate(4 2)">
-            <use fill="#000" filter="url(#wo8ae1ktia)" xlink:href="#y15elo0alb"/>
-            <use fill-opacity=".8" fill="#FFF" xlink:href="#y15elo0alb"/>
+            <use fill="#000" filter="url(#baew37szna)" xlink:href="#2d2pbbxtrb"/>
+            <use fill-opacity=".8" fill="#FFF" xlink:href="#2d2pbbxtrb"/>
         </g>
         <path d="M20 2c8.837 0 16 7.163 16 16s-7.163 16-16 16S4 26.837 4 18 11.163 2 20 2zm0 1.5C11.992 3.5 5.5 9.992 5.5 18S11.992 32.5 20 32.5 34.5 26.008 34.5 18 28.008 3.5 20 3.5z" fill="#177991"/>
     </g>
diff --git a/src/components/dropdown.scss b/src/components/dropdown.scss
index c262ec7..fb5df31 100644
--- a/src/components/dropdown.scss
+++ b/src/components/dropdown.scss
@@ -3,6 +3,7 @@
 .day-length-dropdown-container {
   box-sizing: border-box;
   font-size: 12px;
+  font-weight: 500;
 
   .day-length-dropdown-label {
     position: relative;
@@ -31,6 +32,7 @@
       left: 6px;
       top: 6px;
       z-index: 1;
+      pointer-events: none;
     }
 
     .dropdown-main-button, input {
@@ -51,16 +53,38 @@
       background-color: white;
       border-radius: $input-border-radius;
       box-sizing: border-box;
-    }
 
-    .dropdown-main-button {
-      font-weight: 600;
-      cursor: pointer;
-      &:hover {
-        background-color: $codap-teal-lightest;
+      .arrow-icon {
+        position: absolute;
+        right: 5px;
+        top: 6px;
+        z-index: 1;
+        pointer-events: none;
+
+        &.up {
+          transform: rotate(180deg);
+        }
       }
-      &:active {
-        background-color: $codap-teal-active;
+
+      .dropdown-main-button {
+        background-color: white;
+        font-weight: 600;
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.iconPresent {
+          padding-left: 28px;
+          font-weight: 500;
+        }
+
+        &:hover {
+          background-color: $codap-teal-lightest;
+        }
+        &:active {
+          background-color: $codap-teal-active;
+        }
       }
     }
 
@@ -89,6 +113,7 @@
 
       button {
         font-size: 12px;
+        font-weight: 500;
         font-family: "Montserrat", sans-serif;
         border: none;
         background-color: white;
diff --git a/src/components/dropdown.tsx b/src/components/dropdown.tsx
index a6cb541..e1663c0 100644
--- a/src/components/dropdown.tsx
+++ b/src/components/dropdown.tsx
@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from "react";
 import { clsx } from "clsx";
+import DropdownArrow from "../assets/images/dropdown-arrow-icon.svg";
 
 import "./dropdown.scss";
 
-interface IOption {
+export interface IOption {
   name: string;
   value?: string;
 }
@@ -11,7 +12,7 @@ interface IOption {
 interface IDropdownProps<T extends IOption> {
   value: string;
   options: T[];
-  onSelect: (place: T) => void;
+  onSelect: (option: T) => void;
   onSearchChange?: (value: string) => void;
   label: string;
   inputPlaceholder?: string;
@@ -64,7 +65,7 @@ export const Dropdown = <T extends IOption>({
     setShowOptions(false);
   };
 
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => {
     if (!showOptions) return;
 
     switch (event.key) {
@@ -91,6 +92,8 @@ export const Dropdown = <T extends IOption>({
     }
   };
 
+  const iconPresent = !!icon;
+
   return (
     <div className={clsx("day-length-dropdown-container", { inline })}>
       <div className="day-length-dropdown-label">
@@ -108,7 +111,14 @@ export const Dropdown = <T extends IOption>({
             />
           ) : (
             <div className="dropdown-main-button-container">
-              <button className="dropdown-main-button" onClick={handleMainButtonClick}>{value}</button>
+              <button
+                className={clsx("dropdown-main-button", { iconPresent })}
+                onClick={handleMainButtonClick}
+                onKeyDown={handleKeyDown}
+              >
+                {value}
+              </button>
+              <DropdownArrow className={clsx("arrow-icon", { up: showOptions })} />
             </div>
           )
         }
@@ -127,7 +137,7 @@ export const Dropdown = <T extends IOption>({
                     onMouseLeave={() => setFocusedOptionIndex(-1)}
                     className={clsx({
                       focused: focusedOptionIndex === index ? "focused" : "",
-                      iconPresent: icon
+                      iconPresent
                     })
                     }
                   >
diff --git a/src/grasp-seasons/components/my-locations.tsx b/src/grasp-seasons/components/my-locations.tsx
index a33bd85..d75da95 100644
--- a/src/grasp-seasons/components/my-locations.tsx
+++ b/src/grasp-seasons/components/my-locations.tsx
@@ -2,6 +2,8 @@ import React, { Component } from "react";
 import t, { Language } from "../translation/translate";
 import { ILocation } from "../../types";
 import { locationsEqual } from "../../utils/daylight-utils";
+import { Dropdown, IOption } from "../../components/dropdown";
+import LocationIcon from "../../assets/images/icon-location.svg";
 
 import "./my-locations.scss";
 
@@ -19,22 +21,20 @@ export default class MyLocations extends Component<IProps> {
     this.selectChange = this.selectChange.bind(this);
   }
 
-  selectChange(event: any) {
+  selectChange(option: IOption) {
     const { onLocationChange, locations } = this.props;
-    const location = locations[event.target.value];
-    if (location.latitude && location.longitude) {
+    const location = locations[Number(option.value)];
+    if (location && location.latitude && location.longitude) {
       onLocationChange(location.latitude, location.longitude, location.name);
     }
   }
 
   getOptions() {
     const { locations } = this.props;
-    const options = this.selectedLocation === "" ? [
-      <option key="unsaved" value="" disabled={true}>Custom Location (unsaved)</option>
-    ] : [];
+    const options = [];
     for (let i = 0; i < locations.length; i++) {
       const loc = locations[i];
-      options.push(<option key={i} value={i}>{ loc.name || `(${loc.latitude}, ${loc.longitude})` }</option>);
+      options.push({ name: loc.name || `(${loc.latitude}, ${loc.longitude})`, value: i.toString() });
     }
     return options;
   }
@@ -44,7 +44,7 @@ export default class MyLocations extends Component<IProps> {
     const currentLocation: ILocation = { latitude: lat, longitude: long, name: "" };
     for (let i = 0; i < locations.length; i++) {
       if (locationsEqual(currentLocation, locations[i])) {
-        return i;
+        return locations[i].name;
       }
     }
     return ""; // custom location
@@ -53,10 +53,14 @@ export default class MyLocations extends Component<IProps> {
   render() {
     return (
       <div className="my-locations">
-        <label>{ t("~MY_LOCATIONS", this.props.lang) }</label>
-        <select className="form-control" value={this.selectedLocation} onChange={this.selectChange}>
-          { this.getOptions() }
-        </select>
+        <Dropdown
+          width="250px"
+          value={this.selectedLocation}
+          options={this.getOptions()}
+          onSelect={this.selectChange}
+          label={t("~MY_LOCATIONS", this.props.lang)}
+          icon={<LocationIcon />}
+        />
       </div>
     );
   }