diff --git a/_layouts/default.html b/_layouts/default.html
index b11449ed12e..15d9987bb43 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -14,6 +14,7 @@
 
     {% include footer.html %}
     <script src="{{site.baseurl}}/assets/js/bundle.js" charset="utf-8"></script>
+    <script src="{{site.baseurl}}/assets/js/shuffle_candidates.js" charset="utf-8"></script>
   </body>
 
 </html>
diff --git a/_layouts/office_election.html b/_layouts/office_election.html
index 5bb6c296171..25bf823c76f 100644
--- a/_layouts/office_election.html
+++ b/_layouts/office_election.html
@@ -16,7 +16,7 @@
   <header class="office-election__header">
     <h2>{{ office_election.title }}</h2>
   </header>
-  <main>
+  <main class="office-election__container">
     {% for candidate_id in office_election.candidates %}
       {% assign candidate = ballot_candidates | where: "slug", candidate_id | first %}
       {% assign finance = site.data.candidates[locality.slug][election_day][candidate.slug] %}
diff --git a/_sass/module/_office-election.scss b/_sass/module/_office-election.scss
index c95d971e9a0..2a1d5c133d1 100644
--- a/_sass/module/_office-election.scss
+++ b/_sass/module/_office-election.scss
@@ -1,3 +1,9 @@
+.office-election__container {
+  display: none; 
+  grid-template-columns: repeat(auto-fill, 250px);
+  grid-gap: 0 30px;
+}
+
 .office-election__header {
   border-bottom: 2px $color-gold solid;
 }
diff --git a/assets/js/shuffle_candidates.js b/assets/js/shuffle_candidates.js
new file mode 100644
index 00000000000..2b1f440d94c
--- /dev/null
+++ b/assets/js/shuffle_candidates.js
@@ -0,0 +1,34 @@
+// Makes use of Fisher-Yates algorithm
+// Found in: https://stackoverflow.com/a/2450976/1293256
+var shuffle = function (array) {
+	var currentIndex = array.length;
+	var temporaryValue, randomIndex;
+
+	// While there remain elements to shuffle...
+	while (0 !== currentIndex) {
+		// Pick a remaining element...
+		randomIndex = Math.floor(Math.random() * currentIndex);
+		currentIndex -= 1;
+
+		// And swap it with the current element.
+		temporaryValue = array[currentIndex];
+		array[currentIndex] = array[randomIndex];
+		array[randomIndex] = temporaryValue;
+	}
+
+	return array;
+};
+
+let container = document.querySelector(".office-election__container")
+let candidates = document.getElementsByClassName("office-election__candidate");
+let shuffled = shuffle([...candidates]);
+
+// Need an independent counter to call code after all items appended
+let items = 0;
+shuffled.forEach((c) => {
+	items++;
+	container.appendChild(c)
+	if (items === shuffled.length) {
+		container.style.display = 'grid';
+	}
+});
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index b90be80cf93..77325831191 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2867,7 +2867,8 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -2885,11 +2886,13 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -2902,15 +2905,18 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -3013,7 +3019,8 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -3023,6 +3030,7 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -3035,17 +3043,20 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.2.4",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.1",
                 "yallist": "^3.0.0"
@@ -3062,6 +3073,7 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -3134,7 +3146,8 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -3144,6 +3157,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -3219,7 +3233,8 @@
             },
             "safe-buffer": {
               "version": "5.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -3249,6 +3264,7 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -3266,6 +3282,7 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -3304,11 +3321,13 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             }
           }
         },