diff --git a/website/client/assets/svg/for-css/support-habitica-gems.svg b/website/client/assets/svg/for-css/support-habitica-gems.svg
new file mode 100644
index 0000000000..bf2f8d8f28
--- /dev/null
+++ b/website/client/assets/svg/for-css/support-habitica-gems.svg
@@ -0,0 +1,115 @@
+
diff --git a/website/client/assets/svg/member-icon.svg b/website/client/assets/svg/member-icon.svg
new file mode 100644
index 0000000000..d7975d5ca5
--- /dev/null
+++ b/website/client/assets/svg/member-icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/website/client/components/appMenu.vue b/website/client/components/appMenu.vue
index 88e35a06f2..794aeee139 100644
--- a/website/client/components/appMenu.vue
+++ b/website/client/components/appMenu.vue
@@ -24,7 +24,7 @@ div
router-link.dropdown-item(:to="{name: 'tavern'}") {{ $t('tavern') }}
router-link.dropdown-item(:to="{name: 'myGuilds'}") {{ $t('myGuilds') }}
router-link.dropdown-item(:to="{name: 'guildsDiscovery'}") {{ $t('guildsDiscovery') }}
- router-link.nav-item(tag="li", :to="{name: 'challenges'}", exact)
+ router-link.nav-item(tag="li", :to="{name: 'myChallenges'}", exact)
a.nav-link(v-once) {{ $t('challenges') }}
router-link.nav-item.dropdown(tag="li", to="/help", :class="{'active': $route.path.startsWith('/help')}")
a.nav-link(v-once) {{ $t('help') }}
diff --git a/website/client/components/challenges/challengeDetail.vue b/website/client/components/challenges/challengeDetail.vue
new file mode 100644
index 0000000000..589b387ec4
--- /dev/null
+++ b/website/client/components/challenges/challengeDetail.vue
@@ -0,0 +1,199 @@
+
+.row
+ challenge-modal(:challenge='challenge')
+ close-challenge-modal
+
+ .col-8.standard-page
+ .row
+ .col-8
+ h1 {{challenge.name}}
+ div
+ strong(v-once) {{$t('createdBy')}}
+ span {{challenge.author}}
+ strong.margin-left(v-once)
+ .svg-icon.calendar-icon(v-html="icons.calendarIcon")
+ | {{$t('endDate')}}
+ span {{challenge.endDate}}
+ .tags
+ span.tag(v-for='tag in challenge.tags') {{tag}}
+ .col-4
+ .box
+ .svg-icon.member-icon(v-html="icons.memberIcon")
+ | {{challenge.memberCount}}
+ .details(v-once) {{$t('participants')}}
+ .box
+ .svg-icon.gem-icon(v-html="icons.gemIcon")
+ | {{challenge.prize}}
+ .details(v-once) {{$t('prize')}}
+ .row
+ task-column.col-6(v-for="column in columns", :type="column", :key="column")
+ .col-4.sidebar.standard-page
+ .acitons
+ div(v-if='!isMember && !isLeader')
+ button.btn.btn-success(v-once) {{$t('joinChallenge')}}
+ div(v-if='isMember')
+ button.btn.btn-danger(v-once) {{$t('leaveChallenge')}}
+ div(v-if='isLeader')
+ button.btn.btn-success(v-once) {{$t('addTask')}}
+ div(v-if='isLeader')
+ button.btn.btn-secondary(v-once, @click='edit()') {{$t('editChallenge')}}
+ div(v-if='isLeader')
+ button.btn.btn-danger(v-once, @click='closeChallenge()') {{$t('endChallenge')}}
+ .description-section
+ h2(v-once) {{$t('challengeDescription')}}
+ p {{challenge.description}}
+
+
+
+
+
diff --git a/website/client/components/challenges/challengeItem.vue b/website/client/components/challenges/challengeItem.vue
new file mode 100644
index 0000000000..04c9bfb8b9
--- /dev/null
+++ b/website/client/components/challenges/challengeItem.vue
@@ -0,0 +1,178 @@
+
+.card
+ router-link(:to="{ name: 'challenge', params: { challengeId: challenge._id } }")
+ h3 {{challenge.name}}
+ .row
+ .col-6
+ div.details
+ span
+ .svg-icon.member-icon(v-html="icons.memberIcon")
+ span {{challenge.memberCount}}
+ span
+ .svg-icon.calendar-icon(v-html="icons.calendarIcon")
+ span
+ strong End Date:
+ span {{challenge.endDate}}
+ div.tags
+ span.tag(v-for='tag in challenge.tags') {{tag}}
+ .col-6.prize-section
+ div
+ span.svg-icon.gem(v-html="icons.gemIcon")
+ span.prize {{challenge.prize}}
+ div Challenge Prize
+ .row.description
+ .col-12
+ | {{challenge.description}}
+ .container.well-wrapper(v-if='challenge.counts')
+ .well.row
+ .col-3
+ .count-details
+ .svg-icon.habit-icon(v-html="icons.habitIcon")
+ span.count {{challenge.counts.habit}}
+ div {{$t('habit')}}
+ .col-3
+ .count-details
+ .svg-icon.daily-icon(v-html="icons.dailyIcon")
+ span.count {{challenge.counts.dailies}}
+ div {{$t('daily')}}
+ .col-3
+ .count-details
+ .svg-icon.todo-icon(v-html="icons.todoIcon")
+ span.count {{challenge.counts.todos}}
+ div {{$t('todo')}}
+ .col-3
+ .count-details
+ .svg-icon.reward-icon(v-html="icons.rewardIcon")
+ span.count {{challenge.counts.rewards}}
+ div {{$t('reward')}}
+
+
+
+
+
diff --git a/website/client/components/challenges/challengeModal.vue b/website/client/components/challenges/challengeModal.vue
new file mode 100644
index 0000000000..1cfdb9e28b
--- /dev/null
+++ b/website/client/components/challenges/challengeModal.vue
@@ -0,0 +1,160 @@
+
+div
+ b-modal#challenge-modal(:title="$t('createChallenge')", size='lg')
+ form(@submit.stop.prevent="submit")
+ .form-group
+ label
+ strong(v-once) {{$t('name')}}*
+ b-form-input(type="text", :placeholder="$t('challengeNamePlaceHolder')", v-model="workingChallenge.name")
+ .form-group
+ label
+ strong(v-once) {{$t('description')}}*
+ div.description-count.float-right {{charactersRemaining}} {{ $t('charactersRemaining') }}
+ b-form-input.description-textarea(type="text", textarea, :placeholder="$t('challengeDescriptionPlaceHolder')", v-model="workingChallenge.description")
+ .form-group
+ label
+ strong(v-once) {{$t('guildInformation')}}*
+ a.float-right {{ $t('markdownFormattingHelp') }}
+ b-form-input.information-textarea(type="text", textarea, :placeholder="$t('challengeInformationPlaceHolder')", v-model="workingChallenge.information")
+ .form-group(v-if='creating')
+ label
+ strong(v-once) {{$t('where')}}
+ b-dropdown(:text="$t('sort')", right=true)
+ b-dropdown-item(@click='sort(option.value)')
+ .form-group
+ label
+ strong(v-once) {{$t('categories')}}*
+ b-dropdown(:text="$t('sort')", right=true)
+ b-dropdown-item(@click='sort(option.value)')
+ | Member
+ .form-group
+ label
+ strong(v-once) {{$t('endDate')}}
+ b-form-input.end-date-input
+ .form-group
+ label
+ strong(v-once) {{$t('prize')}}
+ b-dropdown(:text="$t('sort')", right=true)
+ b-dropdown-item(@click='sort(option.value)')
+ | Member
+ .row.footer-wrap
+ .col-12.text-center.submit-button-wrapper
+ button.btn.btn-primary(v-once) {{$t('createChallenge')}}
+ .col-12.text-center
+ p(v-once) {{$t('challengeMinimum')}}
+
+
+
+
+
diff --git a/website/client/components/challenges/closeChallengeModal.vue b/website/client/components/challenges/closeChallengeModal.vue
new file mode 100644
index 0000000000..b53e6ec3e1
--- /dev/null
+++ b/website/client/components/challenges/closeChallengeModal.vue
@@ -0,0 +1,104 @@
+
+div
+ b-modal#close-challenge-modal(:title="$t('createGuild')", size='md')
+ .header-wrap(slot="modal-header")
+ h2.text-center(v-once) {{$t('endChallenge')}}
+ .row.text-center
+ .col-12
+ .support-habitica
+ // @TODO: Add challenge achievement badge here
+ .col-12
+ strong(v-once) {{$t('selectChallengeWinnersDescription')}}
+ .col-12
+ b-dropdown(:text="$t('sort')", right=true)
+ b-dropdown-item(@click='sort(option.value)')
+ | Member
+ .col-12
+ button.btn.btn-primary(v-once) {{$t('awardWinners')}}
+ .col-12
+ hr
+ .or {{$t('or')}}
+ .col-12
+ strong(v-once) {{$t('doYouWantedToDeleteChallenge')}}
+ .col-12
+ button.btn.btn-danger(v-once) {{$t('deleteChallenge')}}
+ .footer-wrap(slot="modal-footer")
+
+
+
+
+
diff --git a/website/client/components/challenges/findChallenges.vue b/website/client/components/challenges/findChallenges.vue
new file mode 100644
index 0000000000..64e13479fe
--- /dev/null
+++ b/website/client/components/challenges/findChallenges.vue
@@ -0,0 +1,89 @@
+
+.row
+ challenge-modal
+ sidebar(v-on:search="updateSearch", v-on:filter="updateFilters")
+
+ .col-10.standard-page
+ .row.header-row
+ .col-md-8.text-left
+ h1(v-once) {{$t('findChallenges')}}
+ .col-md-4
+ span.dropdown-label {{ $t('sortBy') }}
+ b-dropdown(:text="$t('sort')", right=true)
+ b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
+ button.btn.btn-secondary.create-challenge-button
+ .svg-icon.positive-icon(v-html="icons.positiveIcon")
+ span(v-once, @click='createChallenge()') {{$t('createChallenge')}}
+ .row
+ .col-6(v-for='challenge in challenges')
+ challenge-item(:challenge='challenge')
+
+
+
+
+
diff --git a/website/client/components/challenges/index.vue b/website/client/components/challenges/index.vue
new file mode 100644
index 0000000000..8a2588ca1b
--- /dev/null
+++ b/website/client/components/challenges/index.vue
@@ -0,0 +1,19 @@
+
+.row
+ secondary-menu.col-12
+ router-link.nav-link(:to="{name: 'myChallenges'}", :class="{'active': $route.name === 'myChallenges'}") {{ $t('myChallenges') }}
+ router-link.nav-link(:to="{name: 'findChallenges'}", :class="{'active': $route.name === 'findChallenges'}") {{ $t('findChallenges') }}
+
+ .col-12
+ router-view
+
+
+
diff --git a/website/client/components/challenges/myChallenges.vue b/website/client/components/challenges/myChallenges.vue
new file mode 100644
index 0000000000..7ab1862c0e
--- /dev/null
+++ b/website/client/components/challenges/myChallenges.vue
@@ -0,0 +1,142 @@
+
+.row
+ challenge-modal
+ sidebar(v-on:search="updateSearch", v-on:filter="updateFilters")
+
+ .col-10.standard-page
+ .row.header-row
+ .col-md-8.text-left
+ h1(v-once) {{$t('myChallenges')}}
+ .col-md-4
+ span.dropdown-label {{ $t('sortBy') }}
+ b-dropdown(:text="$t('sort')", right=true)
+ b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
+ button.btn.btn-secondary.create-challenge-button
+ .svg-icon.positive-icon(v-html="icons.positiveIcon")
+ span(v-once, @click='createChallenge()') {{$t('createChallenge')}}
+
+ .row
+ .no-challenges.text-center.col-md-6.offset-3(v-if='challenges.length === 0')
+ .svg-icon(v-html="icons.challengeIcon")
+ h2(v-once) {{$t('noChallengeTitle')}}
+ p(v-once) {{$t('challengeDescription1')}}
+ p(v-once) {{$t('challengeDescription2')}}
+
+ .row
+ .col-6(v-for='challenge in challenges')
+ challenge-item(:challenge='challenge')
+
+
+
+
+
diff --git a/website/client/components/challenges/sidebar.vue b/website/client/components/challenges/sidebar.vue
new file mode 100644
index 0000000000..496251d24f
--- /dev/null
+++ b/website/client/components/challenges/sidebar.vue
@@ -0,0 +1,156 @@
+
+.col-2.standard-sidebar
+ .form-group
+ input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
+
+ form
+ h3(v-once) {{ $t('filter') }}
+ .form-group
+ h5 Category
+ .form-check(
+ v-for="group in categoryOptions",
+ :key="group.key",
+ )
+ label.custom-control.custom-checkbox
+ input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters")
+ span.custom-control-indicator
+ span.custom-control-description(v-once) {{ $t(group.label) }}
+ .form-group
+ h5 Membership
+ .form-check(
+ v-for="group in roleOptions",
+ :key="group.key",
+ )
+ label.custom-control.custom-checkbox
+ input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters")
+ span.custom-control-indicator
+ span.custom-control-description(v-once) {{ $t(group.label) }}
+ .form-group
+ h5 Guild Size
+ .form-check(
+ v-for="group in guildSizeOptions",
+ :key="group.key",
+ )
+ label.custom-control.custom-checkbox
+ input.custom-control-input(type="checkbox", :value='group.key' v-model="guildSizeFilters")
+ span.custom-control-indicator
+ span.custom-control-description(v-once) {{ $t(group.label) }}
+
+
+
diff --git a/website/client/components/guilds/myGuilds.vue b/website/client/components/guilds/myGuilds.vue
index 13a834b53e..94ca7da8f8 100644
--- a/website/client/components/guilds/myGuilds.vue
+++ b/website/client/components/guilds/myGuilds.vue
@@ -24,26 +24,26 @@