diff --git a/.idea/olm.iml b/.idea/olm.iml
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/Helpers/Get/User/GetUserDataHelper.php b/app/Helpers/Get/User/GetUserDataHelper.php
new file mode 100644
index 000000000..89d723bf2
--- /dev/null
+++ b/app/Helpers/Get/User/GetUserDataHelper.php
@@ -0,0 +1,50 @@
+<?php
+
+
+namespace App\Helpers\Get\User;
+
+
+use App\Level;
+use App\Models\Photo;
+use App\Models\User\User;
+
+trait GetUserDataHelper
+{
+    /**
+     * Get the users current position and other global metadata
+     *
+     * @param $userXp
+     * @param $totalTags
+     * @param $totalImages
+     * @return array
+     */
+    public static function get ($userXp, $totalTags, $totalImages)
+    {
+        // Todo - Store this metadata in another table
+        $totalUsers = User::count();
+
+        $usersPosition = User::where('xp', '>', $userXp)->count() + 1;
+
+        // Todo - Store this metadata in Redis
+        $totalPhotosAllUsers = Photo::count();
+        // Todo - Store this metadata in Redis
+        $totalTagsAllUsers = Photo::sum('total_litter'); // this doesn't include brands
+
+        $usersTotalTags = $totalTags;
+
+        $photoPercent = ($totalImages && $totalPhotosAllUsers) ? number_format(($totalImages / $totalPhotosAllUsers), 2) : 0;
+        $tagPercent = ($usersTotalTags && $totalTagsAllUsers) ? number_format(($usersTotalTags / $totalTagsAllUsers), 2) : 0;
+
+        // XP needed to reach the next level
+        $nextLevelXp = Level::where('xp', '>=', $userXp)->first()->xp;
+        $requiredXp = $nextLevelXp - $userXp;
+
+        return [
+            'totalUsers'    => $totalUsers,
+            'usersPosition' => $usersPosition,
+            'tagPercent'    => $tagPercent,
+            'photoPercent'  => $photoPercent,
+            'requiredXp'    => $requiredXp
+        ];
+    }
+}
diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
index 7e059374c..2c5121da2 100644
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -2,7 +2,6 @@
 
 namespace App\Http\Controllers;
 
-// use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 
 class HomeController extends Controller
@@ -18,15 +17,19 @@ public function index ()
         $auth = Auth::check();
 
         $user = null;
+
         if ($auth)
         {
             $user = Auth::user();
+
+            // Load this data
             $user->roles;
+            $user->settings;
         }
 
         // We set this to true when user verifies their email
         $verified = false;
-        // or when a user unsubscribes from emails
+        // We set this to true when a user unsubscribes from communication
         $unsub = false;
 
         return view('root', compact('auth', 'user', 'verified', 'unsub'));
diff --git a/app/Http/Controllers/User/ProfileController.php b/app/Http/Controllers/User/ProfileController.php
index 6fed66a9e..827788832 100644
--- a/app/Http/Controllers/User/ProfileController.php
+++ b/app/Http/Controllers/User/ProfileController.php
@@ -2,14 +2,19 @@
 
 namespace App\Http\Controllers\User;
 
-use App\Exports\CreateCSVExport;
-use App\Http\Controllers\Controller;
-use App\Jobs\EmailUserExportCompleted;
+use App\Helpers\Get\User\GetUserDataHelper;
 use App\Level;
 use App\Models\Photo;
 use App\Models\User\User;
+
+use App\Exports\CreateCSVExport;
+use App\Jobs\EmailUserExportCompleted;
+
+use Illuminate\Routing\Redirector;
 use Illuminate\Support\Facades\Auth;
 
+use App\Http\Controllers\Controller;
+
 class ProfileController extends Controller
 {
     /**
@@ -91,6 +96,7 @@ public function geojson ()
             'features'  => []
         ];
 
+        // Might be big...
         $photos = $query->get();
 
         // Populate geojson object
@@ -100,7 +106,7 @@ public function geojson ()
                 'type' => 'Feature',
                 'geometry' => [
                     'type' => 'Point',
-                    'coordinates' => [$photo->lon, $photo->lat]
+                    'coordinates' => [$photo->lat, $photo->lon]
                 ],
 
                 'properties' => [
@@ -118,45 +124,47 @@ public function geojson ()
         }
 
         return [
+            'success' => true,
             'geojson' => $geojson
         ];
     }
 
     /**
-     * Get the total number of users, and the current users position
-     * To get the current position, we need to count how many users have more XP than current users
+     * Load extra data for the Users Profile Page
+     *
+     * This is also used to get extra data for a PublicProfile if allowed.
+     *
+     * Gets:
+     * - total number of users,
+     * - users position
      *
      * @return array
      */
-    public function index ()
+    public function index () : array
     {
-        $user = Auth::user();
-
-        // Todo - Store this metadata in another table
-        $totalUsers = User::count();
-
-        $usersPosition = $user->position;
+        $user = request()->has('username')
+            ? User::where('username', request()->username)->first()
+            : Auth::user();
 
-        // Todo - Store this metadata in Redis
-        $totalPhotosAllUsers = Photo::count();
-        // Todo - Store this metadata in Redis
-        $totalTagsAllUsers = Photo::sum('total_litter'); // this doesn't include brands
-
-        $usersTotalTags = $user->total_tags;
-
-        $photoPercent = ($user->total_images && $totalPhotosAllUsers) ? ($user->total_images / $totalPhotosAllUsers) : 0;
-        $tagPercent = ($usersTotalTags && $totalTagsAllUsers) ? ($usersTotalTags / $totalTagsAllUsers) : 0;
+        if (Auth::guest() && (!$user || !isset($user->settings) || !$user->settings->show_public_profile)) {
+            return [
+                'success' => false
+            ];
+        }
 
-        // XP needed to reach the next level
-        $nextLevelXp = Level::where('xp', '>=', $user->xp)->first()->xp;
-        $requiredXp = $nextLevelXp - $user->xp;
+        $userData = GetUserDataHelper::get(
+            $user->xp,
+            $user->total_tags,
+            $user->total_images
+        );
 
         return [
-            'totalUsers' => $totalUsers,
-            'usersPosition' => $usersPosition,
-            'tagPercent' => $tagPercent,
-            'photoPercent' => $photoPercent,
-            'requiredXp' => $requiredXp
+            'success' => true,
+            'totalUsers' => $userData->totalUsers,
+            'usersPosition' => $userData->usersPosition,
+            'tagPercent' => $userData->tagPercent,
+            'photoPercent' => $userData->photoPercent,
+            'requiredXp' => $userData->requiredXp
         ];
     }
 }
diff --git a/app/Http/Controllers/User/PublicProfile/PublicProfileMapController.php b/app/Http/Controllers/User/PublicProfile/PublicProfileMapController.php
new file mode 100644
index 000000000..13e65a2f9
--- /dev/null
+++ b/app/Http/Controllers/User/PublicProfile/PublicProfileMapController.php
@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Http\Controllers\User\PublicProfile;
+
+use App\Http\Controllers\Controller;
+use App\Models\Photo;
+use App\Models\User\User;
+use Illuminate\Http\Request;
+
+class PublicProfileMapController extends Controller
+{
+    /**
+     * When the users settings allow it,
+     *
+     * Return their data for the given date range.
+     *
+     * Todo:
+     * - a lot of duplication here with PublicProfileController @ get user
+     * - a lot of duplication here with ProfileController @ geojson
+     */
+    public function index ()
+    {
+        $user = User::select([
+            'id',
+            'username',
+            'level',
+            'xp',
+            'photos_per_month'
+        ])
+        ->with(['settings' => function ($q) {
+            $q->select('id', 'user_id', 'public_profile_show_map', 'show_public_profile');
+        }])
+        ->where([
+            'username' => request()->username
+        ])->first();
+
+        if (!$user || !isset($user->settings) || !$user->settings->show_public_profile || !$user->settings->public_profile_show_map) {
+            return redirect('/');
+        }
+
+        // Todo - Pre-cluster each users photos
+        $query = Photo::select('id', 'filename', 'datetime', 'lat', 'lon', 'model', 'result_string', 'created_at')
+            ->where([
+                'user_id' => $user->id,
+                ['verified', '>=', 2]
+            ])
+            ->whereDate(request()->period, '>=', request()->start)
+            ->whereDate(request()->period, '<=', request()->end);
+
+        $geojson = [
+            'type'      => 'FeatureCollection',
+            'features'  => []
+        ];
+
+        // Might be big...
+        $photos = $query->get();
+
+        // Populate geojson object
+        foreach ($photos as $photo)
+        {
+            $feature = [
+                'type' => 'Feature',
+                'geometry' => [
+                    'type' => 'Point',
+                    'coordinates' => [$photo->lat, $photo->lon]
+                ],
+
+                'properties' => [
+                    'img' => $photo->filename,
+                    'model' => $photo->model,
+                    'datetime' => $photo->datetime,
+                    'latlng' => [$photo->lat, $photo->lon],
+                    'text' => $photo->result_string
+                ]
+            ];
+
+            array_push($geojson["features"], $feature);
+        }
+
+        return [
+            'success' => true,
+            'geojson' => $geojson
+        ];
+    }
+}
diff --git a/app/Http/Controllers/User/Settings/PublicProfileController.php b/app/Http/Controllers/User/Settings/PublicProfileController.php
new file mode 100644
index 000000000..a250bb8a3
--- /dev/null
+++ b/app/Http/Controllers/User/Settings/PublicProfileController.php
@@ -0,0 +1,131 @@
+<?php
+
+namespace App\Http\Controllers\User\Settings;
+
+use App\Models\User\User;
+use App\Models\User\UserSettings;
+use App\Helpers\Get\User\GetUserDataHelper;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+use App\Http\Controllers\Controller;
+
+class PublicProfileController extends Controller
+{
+    /**
+     * Visit a users public profile by Username
+     *
+     * @param string $username
+     *
+     * @return array|string
+     */
+    public function index (string $username)
+    {
+        $user = User::select([
+            'id',
+            'username',
+            'level',
+            'xp',
+            'photos_per_month'
+        ])
+        ->with(['settings' => function ($q) {
+            $q->select('id', 'user_id', 'public_profile_show_map', 'public_profile_download_my_data', 'show_public_profile');
+        }])
+        ->where([
+            'username' => $username
+        ])->first();
+
+        if (!$user || !isset($user->settings) || !$user->settings->show_public_profile) {
+            return redirect('/');
+        }
+
+        // Extra user data
+        // totalUsers, usersPosition, tagPercent, photoPercent, requiredXp
+        $userData = GetUserDataHelper::get(
+            $user->xp,
+            $user->total_tags,
+            $user->total_images
+        );
+
+        return view('root')->with([
+            'auth' => Auth::check(),
+            'success' => true,
+            'user' => Auth::user(),
+            'verified' => null,
+            'unsub' => null,
+            'username' => $username,
+            'publicProfile' => $user,
+            'userData' => json_encode($userData)
+        ]);
+    }
+
+    /**
+     * Change the privacy status of a users Public Profile setting
+     *
+     * @param Request $request
+     *
+     * @return array
+     */
+    public function toggle (Request $request): array
+    {
+        try
+        {
+            $user = Auth::user();
+
+            $settings = UserSettings::firstOrCreate(['user_id' => $user->id]);
+
+            $settings->show_public_profile = ($settings->wasRecentlyCreated)
+                ? true
+                : $settings->show_public_profile = ! $settings->show_public_profile;
+
+            $settings->save();
+
+            return [
+                'success' => true,
+                'settings' => $settings
+            ];
+        }
+        catch (\Exception $e)
+        {
+            \Log::info(['PublicProfileController@toggle', $e->getMessage()]);
+
+            return ['success' => false];
+        }
+    }
+
+    /**
+     * Update the settings on the users public profile
+     *
+     * @param Request $request
+     *
+     * @return array
+     *
+     * Todo:
+     * - add validation
+     * - only update what params were changed
+     */
+    public function update (Request $request): array
+    {
+        try
+        {
+            $user = Auth::user();
+
+            $user->settings->public_profile_download_my_data = $request->download ?: false;
+            $user->settings->public_profile_show_map = $request->map ?: false;
+            $user->settings->save();
+
+            return [
+                'success' => true
+            ];
+        }
+        catch (\Exception $e)
+        {
+            \Log::info(['PublicProfileController@update', $e->getMessage()]);
+
+            return [
+                'success' => false
+            ];
+        }
+    }
+}
diff --git a/app/Http/Controllers/User/Settings/SocialMediaController.php b/app/Http/Controllers/User/Settings/SocialMediaController.php
new file mode 100644
index 000000000..743796fbc
--- /dev/null
+++ b/app/Http/Controllers/User/Settings/SocialMediaController.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Http\Controllers\User\Settings;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class SocialMediaController extends Controller
+{
+    /**
+     * Update the users social media links
+     *
+     * @param Request $request
+     *
+     * @return array
+     */
+    public function update (Request $request): array
+    {
+        try
+        {
+            $user = Auth::user();
+
+            $user->settings->twitter = $request->twitter;
+            $user->settings->instagram = $request->instagram;
+            $user->settings->save();
+
+            return [
+                'success' => true
+            ];
+        }
+        catch (\Exception $e)
+        {
+            \Log::info(['SocialMediaController@update', $e->getMessage()]);
+
+            return [
+                'success' => false
+            ];
+        }
+    }
+}
diff --git a/app/Listeners/AddTags/CompileResultsString.php b/app/Listeners/AddTags/CompileResultsString.php
index c863d1f70..16413ebb6 100644
--- a/app/Listeners/AddTags/CompileResultsString.php
+++ b/app/Listeners/AddTags/CompileResultsString.php
@@ -14,8 +14,8 @@ class CompileResultsString implements ShouldQueue
      * We save the metadata on the photos table as a string to speed up page load
      * and avoid additional requests
      *
-     * When a record exists, we apply the translation key => value,
-     * for every item in each category.
+     * When a litter tag exists, we generate the translation key => value,
+     * for every tag in each category.
      *
      * with this 1 line of code!
      *
diff --git a/app/Listeners/AddTags/UpdateUser.php b/app/Listeners/AddTags/UpdateUser.php
index c8156495c..2039d3b8d 100644
--- a/app/Listeners/AddTags/UpdateUser.php
+++ b/app/Listeners/AddTags/UpdateUser.php
@@ -27,7 +27,8 @@ public function handle (TagsVerifiedByAdmin $event)
 
         if ($user->count_correctly_verified >= 100)
         {
-            $user->littercoin_allowance += 1;
+            // $user->littercoin_allowance += 1;
+            $user->littercoin_owed += 1;
             $user->count_correctly_verified = 0;
 
             event (new LittercoinMined($user->id, '100-images-verified'));
diff --git a/app/Models/User/User.php b/app/Models/User/User.php
index f90d75fbe..ee52dcae8 100644
--- a/app/Models/User/User.php
+++ b/app/Models/User/User.php
@@ -90,7 +90,8 @@ public static function boot ()
         'previous_tags',
         'remaining_teams',
         'photos_per_month',
-        'bbox_verification_count'
+        'bbox_verification_count',
+        'show_public_profile'
     ];
 
     /**
@@ -225,6 +226,14 @@ public function setPasswordAttribute ($password)
         $this->attributes['password'] = bcrypt($password);
     }
 
+    /**
+     * The users settings if they exist
+     */
+    public function settings ()
+    {
+        return $this->hasOne('App\Models\User\UserSettings');
+    }
+
     /**
      * Has Many Through relationships
      */
diff --git a/app/Models/User/UserSettings.php b/app/Models/User/UserSettings.php
index c3d91af60..8f9618f71 100644
--- a/app/Models/User/UserSettings.php
+++ b/app/Models/User/UserSettings.php
@@ -8,16 +8,26 @@ class UserSettings extends Model
 {
     protected $fillable = [
         'user_id',
-        'picked_up',
-        'global_flag',
-        'previous_tags',
-        'litter_picked_up',
-        'show_name_maps',
-        'show_username_maps',
-        'show_name_leaderboard',
-        'show_username_leaderboard',
-        'show_name_createdby',
-        'show_username_createdby',
-        'email_sub'
+
+        'show_public_profile',
+        'public_profile_download_my_data',
+        'public_profile_show_map',
+        'twitter',
+        'instagram',
+        'link_username'
+
+// We need to move these columns here from users table
+// Some of the column names could be improved
+//        'picked_up',
+//        'global_flag',
+//        'previous_tags',
+//        'litter_picked_up',
+//        'show_name_maps',
+//        'show_username_maps',
+//        'show_name_leaderboard',
+//        'show_username_leaderboard',
+//        'show_name_createdby',
+//        'show_username_createdby',
+//        'email_sub'
     ];
 }
diff --git a/database/migrations/2020_09_13_114634_create_user_settings_table.php b/database/migrations/2020_09_13_114634_create_user_settings_table.php
deleted file mode 100644
index 8b6a197a2..000000000
--- a/database/migrations/2020_09_13_114634_create_user_settings_table.php
+++ /dev/null
@@ -1,45 +0,0 @@
-<?php
-
-use Illuminate\Database\Migrations\Migration;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Support\Facades\Schema;
-
-class CreateUserSettingsTable extends Migration
-{
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    // public function up()
-    // {
-    //     Schema::create('user_settings', function (Blueprint $table) {
-    //         $table->id();
-    //         $table->integer('user_id');
-    //         $table->foreign('user_id')->references('id')->on('users');
-
-    //         $table->boolean('picked_up')->default(0);
-    //         $table->string('global_flag')->nullable();
-    //         $table->boolean('previous_tags')->default(0);
-
-    //         $table->boolean('litter_picked_up')->default(0);
-    //         $table->boolean('show_name_maps')->default(0);
-    //         $table->boolean('show_username_maps')->default(0);
-    //         $table->boolean('show_name_leaderboard')->default(0);
-    //         $table->boolean('show_username_leaderboard')->default(0);
-    //         $table->boolean('show_name_createdby')->default(0);
-    //         $table->boolean('show_username_createdby')->default(0);
-    //         $table->timestamps();
-    //     });
-    // }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::dropIfExists('user_settings');
-    }
-}
diff --git a/database/migrations/2021_08_14_171118_create_user_settings_table.php b/database/migrations/2021_08_14_171118_create_user_settings_table.php
new file mode 100644
index 000000000..9c4f7b484
--- /dev/null
+++ b/database/migrations/2021_08_14_171118_create_user_settings_table.php
@@ -0,0 +1,43 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateUserSettingsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('user_settings', function (Blueprint $table) {
+            $table->id();
+            $table->unsignedInteger('user_id');
+            $table->foreign('user_id')->references('id')->on('users');
+
+            $table->boolean('show_public_profile')->default(false);
+            $table->boolean('public_profile_download_my_data')->default(false);
+            $table->boolean('public_profile_show_map')->default(false);
+
+            $table->string('twitter')->nullable()->default(null);
+            $table->string('instagram')->nullable()->default(null);
+
+            $table->string('link_username')->nullable()->default(null);
+
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('user_settings');
+    }
+}
diff --git a/public/css/openlittermap.css b/public/css/openlittermap.css
index 89eec0b5e..aa0cf2223 100644
--- a/public/css/openlittermap.css
+++ b/public/css/openlittermap.css
@@ -115,11 +115,23 @@ html {
 }
 
 .flex {
-	display: flex;
+	display: flex !important;
+}
+
+.flex-0-25 {
+    flex: 0.25em;
 }
 
 .flex-1 {
-	flex: 1;
+	flex: 1 !important;
+}
+
+.flex-1-15 {
+    flex: 1.15 !important;
+}
+
+.flex-1-25 {
+    flex: 1.25 !important;
 }
 
 .fullheight {
@@ -337,6 +349,14 @@ html {
     color: #363636 !important;
 }
 
+.w-3 {
+    width: 3em;
+}
+
+.w-15 {
+    width: 15em;
+}
+
 .w10 {
     width: 10em;
 }
diff --git a/resources/js/components/Charts/CategoriesPieChart.vue b/resources/js/components/Charts/CategoriesPieChart.vue
new file mode 100644
index 000000000..f51cd81fe
--- /dev/null
+++ b/resources/js/components/Charts/CategoriesPieChart.vue
@@ -0,0 +1,69 @@
+<script>
+import { Pie } from 'vue-chartjs';
+import { categories } from '../../extra/categories';
+
+export default {
+    extends: Pie,
+    name: 'CategoriesPieChart',
+    props: ['categories'],
+    data () {
+        return {
+            colors: [
+                '#9c88ff',
+                '#8AAE56',
+                '#B66C46',
+                '#EAE741',
+                '#BFE5A6',
+                '#FFFFFF',
+                '#BF00FE',
+                '#add8e6',
+                '#ccc',
+                '#ff4aa1',
+                '#e3a158'
+            ]
+        };
+    },
+    mounted ()
+    {
+        let labels = [];
+        // temp fix - we need to add art and pet surprise / dogshit
+        categories.filter((category) => (category !== 'art' && category !== 'dogshit')).map((category) => {
+            labels.push(
+                this.$t('litter.categories.' + category)
+            )
+        });
+
+        this.renderChart({
+            labels,
+            datasets: [
+                {
+                    label: this.$t('profile.dashboard.total-categories'),
+                    backgroundColor: this.categories.map((key, index) => {
+                        return this.colors[index];
+                    }),
+                    data: this.categories,
+                    fill: true,
+                    borderColor: '#1DD3B0',
+                    maxBarThickness: '10'
+                }
+            ]
+        },
+        {
+            // options
+            responsive: true,
+            maintainAspectRatio: false,
+            legend: {
+                position: 'right',
+                labels: {
+                    fontColor: '#1DD3B0'
+                }
+            },
+            tooltips: {
+                callbacks: {
+                    title: (tooltipItem, data) => data.labels[tooltipItem[0].index]
+                }
+            }
+        });
+    }
+}
+</script>
diff --git a/resources/js/components/Charts/Radar.vue b/resources/js/components/Charts/Radar.vue
index 8f69247f7..50ea32286 100644
--- a/resources/js/components/Charts/Radar.vue
+++ b/resources/js/components/Charts/Radar.vue
@@ -1,15 +1,17 @@
 <script>
 import { Radar } from 'vue-chartjs'
-import { categories} from '../../extra/categories';
+import { categories } from '../../extra/categories';
 
 export default {
     extends: Radar,
     name: 'Radar',
-    props: ['categories'],
+    props: [
+        'categories'
+    ],
     mounted ()
     {
         let labels = [];
-        //temp fix - we need to add art and dogshit
+        // temp fix - we need to add art and pet surprise / dogshit
         categories.filter((category) => (category !== 'art' && category !== 'dogshit')).map((category) => {
             labels.push(
                 this.$t('litter.categories.' + category)
diff --git a/resources/js/components/General/Nav.vue b/resources/js/components/General/Nav.vue
index 04cbfcd90..f8b82b65d 100644
--- a/resources/js/components/General/Nav.vue
+++ b/resources/js/components/General/Nav.vue
@@ -131,9 +131,8 @@ export default {
         };
     },
     computed: {
-
         /**
-         * Return true if the user is logged in
+         * Return True if the user is logged in
          */
         auth ()
         {
@@ -164,9 +163,7 @@ export default {
             return this.open ? 'navbar-menu is-active' : 'navbar-menu';
         }
     },
-
     methods: {
-
         /**
          * Mobile - Close the nav
          */
diff --git a/resources/js/components/Profile/bottom/ProfileDownload.vue b/resources/js/components/Profile/bottom/ProfileDownload.vue
index 8806d1c34..b42243d52 100644
--- a/resources/js/components/Profile/bottom/ProfileDownload.vue
+++ b/resources/js/components/Profile/bottom/ProfileDownload.vue
@@ -57,7 +57,4 @@ export default {
         margin-bottom: 1em;
     }
 
-    .is-purp {
-        background-color: #8e7fd6;
-    }
 </style>
diff --git a/resources/js/components/Profile/bottom/ProfilePhotos.vue b/resources/js/components/Profile/bottom/ProfilePhotos.vue
index 174c14a48..c0a5527ed 100644
--- a/resources/js/components/Profile/bottom/ProfilePhotos.vue
+++ b/resources/js/components/Profile/bottom/ProfilePhotos.vue
@@ -1,8 +1,13 @@
 <template>
     <div class="profile-card">
+        <p class="profile-dl-title">View My Photos</p>
+
         <p class="mb1">{{ $t('profile.dashboard.manage-my-photos') }}</p>
 
-        <button class="button is-medium is-primary" @click="load">{{ $t('profile.dashboard.view-my-photos') }}</button>
+        <button
+            class="button is-medium is-primary"
+            @click="load"
+        >{{ $t('profile.dashboard.view-my-photos') }}</button>
     </div>
 </template>
 
@@ -31,4 +36,10 @@ export default {
 
 <style scoped>
 
+    .profile-dl-title {
+        color: #1DD3B0;
+        margin-bottom: 1em;
+        font-weight: 600;
+    }
+
 </style>
diff --git a/resources/js/components/Profile/bottom/ProfileTimeSeries.vue b/resources/js/components/Profile/bottom/ProfileTimeSeries.vue
index 23a59411e..f9db32706 100644
--- a/resources/js/components/Profile/bottom/ProfileTimeSeries.vue
+++ b/resources/js/components/Profile/bottom/ProfileTimeSeries.vue
@@ -1,6 +1,8 @@
 <template>
-    <div class="profile-card">
-       <TimeSeriesLine :ppm="ppm" />
+    <div class="profile-time-series">
+       <TimeSeriesLine
+           :ppm="ppm"
+       />
     </div>
 </template>
 
@@ -9,20 +11,20 @@ import TimeSeriesLine from '../../Charts/TimeSeriesLine';
 
 export default {
     name: 'ProfileTimeSeries',
-    components: { TimeSeriesLine },
-    computed: {
-
-        /**
-         * The users photos per month, as a string. Saved as metadata because CPU.
-         */
-        ppm ()
-        {
-            return this.$store.state.user.user.photos_per_month;
-        }
-    }
+    components: {
+        TimeSeriesLine
+    },
+    props: [
+        'ppm'
+    ]
 };
 </script>
 
 <style scoped>
 
+    .profile-time-series {
+        flex: 1;
+        padding: 3em;
+    }
+
 </style>
diff --git a/resources/js/components/Profile/middle/ProfileCalendar.vue b/resources/js/components/Profile/middle/ProfileCalendar.vue
index 3e7250f5d..aaf46aecc 100644
--- a/resources/js/components/Profile/middle/ProfileCalendar.vue
+++ b/resources/js/components/Profile/middle/ProfileCalendar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="profile-card">
+    <div class="profile-calendar">
         <FunctionalCalendar
             v-model="calendarData"
             :day-names="$t('common.day-names')"
@@ -14,11 +14,18 @@
         />
 
         <!-- Change time period -->
-        <select v-model="period" class="input mt1 mb1">
+        <select v-model="period" class="input profile-calendar-select">
             <option v-for="time in periods" :value="time">{{ getPeriod(time) }}</option>
         </select>
 
-        <button :class="button" @click="changePeriod" :disabled="disabled">{{ $t('profile.dashboard.calendar-load-data') }}</button>
+        <br>
+
+        <button
+            :class="processing ? 'is-loading' : ''"
+            class="button"
+            @click="changePeriod"
+            :disabled="disabled"
+        >{{ $t('profile.dashboard.calendar-load-data') }}</button>
     </div>
 </template>
 
@@ -27,29 +34,22 @@ import { FunctionalCalendar } from 'vue-functional-calendar';
 
 export default {
     name: 'ProfileCalendar',
-    components: { FunctionalCalendar },
+    components: {
+        FunctionalCalendar
+    },
     data ()
     {
         return {
-            btn: 'button long-purp',
             calendarData: {},
             period: 'created_at',
             periods: [
                 'created_at',
                 'datetime'
-            ]
+            ],
+            processing: false
         }
     },
     computed: {
-
-        /**
-         * Add spinner when processing
-         */
-        button ()
-        {
-            return this.processing ? this.btn + ' is-loading' : this.btn;
-        },
-
         /**
          * Return true to disable the button
          */
@@ -65,7 +65,6 @@ export default {
         }
     },
     methods: {
-
         /**
          * Get map data
          */
@@ -73,11 +72,15 @@ export default {
         {
             if (this.disabled) return;
 
+            this.processing = true;
+
             await this.$store.dispatch('GET_USERS_PROFILE_MAP_DATA', {
                 period: this.period,
                 start: this.calendarData.dateRange.start,
-                end: this.calendarData.dateRange.end,
+                end: this.calendarData.dateRange.end
             });
+
+            this.processing = false;
         },
 
         /**
@@ -85,7 +88,7 @@ export default {
          */
         getPeriod (period)
         {
-            if (! period) period = this.period;
+            if (!period) period = this.period;
 
             return this.$t('teams.dashboard.times.' + period)
         },
@@ -95,8 +98,13 @@ export default {
 
 <style scoped>
 
-    .long-purp {
-        background-color: #8e7fd6;
-        width: 100%;
+    .profile-calendar {
+        padding-top: 5em;
     }
+
+    .profile-calendar-select {
+        margin: 1em 0;
+        width: 21em;
+    }
+
 </style>
diff --git a/resources/js/components/Profile/middle/ProfileCategories.vue b/resources/js/components/Profile/middle/ProfileCategories.vue
index 61b7f6bce..5bed6e3c6 100644
--- a/resources/js/components/Profile/middle/ProfileCategories.vue
+++ b/resources/js/components/Profile/middle/ProfileCategories.vue
@@ -1,44 +1,50 @@
 <template>
-    <div class="profile-card">
-        <!-- Using :key helps to update the radar when tags change -->
-        <Radar :key="user.total_tags" :categories="categories" />
+    <div class="profile-categories">
+        <CategoriesPieChart
+            :categories="categories"
+        />
     </div>
 </template>
 
 <script>
-import Radar from '../../Charts/Radar';
+import CategoriesPieChart from '../../Charts/CategoriesPieChart';
 
 export default {
     name: 'ProfileCategories',
-    components: { Radar },
+    components: {
+        CategoriesPieChart
+    },
     computed: {
-
         /**
          * The users photos per month, as a string. Saved as metadata because CPU.
          */
         categories ()
         {
             return [
-                this.user.total_categories.alcohol,
+                this.user.total_categories?.alcohol,
                 this.user.total_brands_redis,
-                this.user.total_categories.coastal,
-                this.user.total_categories.coffee,
-                this.user.total_categories.dumping,
-                this.user.total_categories.food,
-                this.user.total_categories.industrial,
-                this.user.total_categories.other,
-                this.user.total_categories.sanitary,
-                this.user.total_categories.softdrinks,
-                this.user.total_categories.smoking,
-            ]
+                this.user.total_categories?.coastal,
+                this.user.total_categories?.coffee,
+                this.user.total_categories?.dumping,
+                this.user.total_categories?.food,
+                this.user.total_categories?.industrial,
+                this.user.total_categories?.other,
+                this.user.total_categories?.sanitary,
+                this.user.total_categories?.softdrinks,
+                this.user.total_categories?.smoking,
+            ];
         },
 
         /**
-         * Currently authenticated user
+         * Return User object
+         *
+         * Currently authenticated user (Profile page) or Public Profile
          */
         user ()
         {
-            return this.$store.state.user.user;
+            return (this.$store.state.user.public_profile.publicProfile)
+                ? this.$store.state.user.public_profile.publicProfile
+                : this.$store.state.user.user;
         }
     }
 };
@@ -46,4 +52,9 @@ export default {
 
 <style scoped>
 
+    .profile-categories {
+        flex: 1;
+        padding: 3em;
+    }
+
 </style>
diff --git a/resources/js/components/Profile/middle/ProfileMap.vue b/resources/js/components/Profile/middle/ProfileMap.vue
index 6c807faa8..1939e3df5 100644
--- a/resources/js/components/Profile/middle/ProfileMap.vue
+++ b/resources/js/components/Profile/middle/ProfileMap.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="profile-card" style="padding: 0 !important;">
+    <div class="profile-map-outer-container" style="padding: 0 !important;">
         <fullscreen ref="fullscreen" @change="fullscreenChange" class="profile-map-container">
 
             <button class="btn-map-fullscreen" @click="toggle">
@@ -14,13 +14,11 @@
                     </l-marker>
                 </v-marker-cluster>
             </l-map>
-
         </fullscreen>
     </div>
 </template>
 
 <!-- NOTE: This very similar to TeamMap.vue - We should combine them -->
-
 <script>
 import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet';
 import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster';
@@ -55,7 +53,6 @@ export default {
         };
     },
     computed: {
-
         /**
          * From backend api request
          */
@@ -65,7 +62,6 @@ export default {
         }
     },
     methods: {
-
         /**
          * Return html content for each popup
          *
@@ -99,9 +95,7 @@ export default {
         toggle ()
         {
             this.$refs['fullscreen'].toggle() // recommended
-        },
-
-
+        }
     }
 };
 </script>
@@ -109,19 +103,24 @@ export default {
 <style lang="scss">
 @import "~leaflet.markercluster/dist/MarkerCluster.css";
 @import "~leaflet.markercluster/dist/MarkerCluster.Default.css";
+// @import '../../../styles/variables.scss';
+
+    .profile-map-outer-container {
+        height: 20em;
+    }
 
-//@import '../../../styles/variables.scss';
+    .btn-map-fullscreen {
+        position: absolute;
+        top: 1em;
+        right: 1em;
+        z-index: 1234;
+    }
+
+    /* remove padding on mobile */
+    .profile-map-container {
+        height: 100%;
+        position: relative;
+    }
 
-.btn-map-fullscreen {
-    position: absolute;
-    top: 1em;
-    right: 1em;
-    z-index: 1234;
-}
 
-/* remove padding on mobile */
-.profile-map-container {
-    height: 100%;
-    position: relative;
-}
 </style>
diff --git a/resources/js/components/Profile/top/ProfileNextTarget.vue b/resources/js/components/Profile/top/ProfileNextTarget.vue
index 879337431..8e266a6f5 100644
--- a/resources/js/components/Profile/top/ProfileNextTarget.vue
+++ b/resources/js/components/Profile/top/ProfileNextTarget.vue
@@ -1,59 +1,35 @@
 <template>
-    <div class="profile-card">
-        <p class="mb1">{{ $t('profile.dashboard.your-level') }}</p>
+    <div class="profile-next-target">
+        <p class="is-secondary">Level: <strong class="is-white">{{ level }}</strong></p>
 
-        <p class="is-secondary">{{ $t('profile.dashboard.reached-level') }} <strong class="is-white">{{ currentLevel }}</strong></p>
+        <p class="is-secondary">XP: <strong class="is-white">{{ xp }} xp</strong></p>
 
-        <p class="is-secondary mb1">{{ $t('profile.dashboard.have-xp') }} <strong class="is-white">{{ currentXp }} xp</strong></p>
-
-        <p class="is-secondary mb2">{{ $t('profile.dashboard.need-xp') }} <strong class="is-white">{{ neededXp }} xp</strong> {{ $t('profile.dashboard.to-reach-level') }}</p>
+        <p class="is-secondary">Level up: <strong class="is-white">{{ xpNeeded }} xp</strong></p>
     </div>
 </template>
 
 <script>
 export default {
     name: 'ProfileNextTarget',
-    computed: {
-
-        /**
-         * The users current level, based on their XP
-         */
-        currentLevel ()
-        {
-            return this.user.level;
-        },
-
-        /**
-         * The users current XP
-         */
-        currentXp ()
-        {
-            return this.user.xp;
-        },
-
-        /**
-         * Remaining xp until the user Levels Up
-         */
-        neededXp ()
-        {
-            return this.$store.state.user.requiredXp;
-        },
-
-        /**
-         * Currently authenticated user
-         */
-        user ()
-        {
-            return this.$store.state.user.user;
-        }
-    }
-};
+    props: [
+        'level',
+        'xp',
+        'xpNeeded'
+    ]
+}
 </script>
 
 <style scoped>
 
-    .is-purp {
-        color: #8e7fd6;
+    .profile-next-target {
+        position: absolute;
+        top: 33em;
+        left: 7em;
+        z-index: 999;
+    }
+
+    .profile-next-target p {
+        font-size: 1.25em;
     }
 
     .is-white {
diff --git a/resources/js/components/Profile/top/ProfilePosition.vue b/resources/js/components/Profile/top/ProfilePosition.vue
new file mode 100644
index 000000000..d6235ea5e
--- /dev/null
+++ b/resources/js/components/Profile/top/ProfilePosition.vue
@@ -0,0 +1,45 @@
+<template>
+    <div class="profile-position">
+        <p class="profile-position-text">{{ usersPosition }}</p>
+    </div>
+</template>
+
+<script>
+import moment from 'moment';
+
+export default {
+    name: 'ProfilePosition',
+    props: [
+        'position'
+    ],
+    computed: {
+        /**
+         * The users position out of all users, based on their XP
+         */
+        usersPosition ()
+        {
+            return moment.localeData().ordinal(this.position);
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+    .profile-position {
+        position: absolute;
+        background-color: white;
+        padding: 3em;
+        top: 20em;
+        left: 5em;
+        z-index: 999;
+        border-radius: 50%;
+        border: 2px solid black;
+    }
+
+    .profile-position-text {
+        font-size: 3em;
+        font-weight: 700;
+    }
+
+</style>
diff --git a/resources/js/components/Profile/top/ProfileStats.vue b/resources/js/components/Profile/top/ProfileStats.vue
index e05543e90..a2bc4a6e8 100644
--- a/resources/js/components/Profile/top/ProfileStats.vue
+++ b/resources/js/components/Profile/top/ProfileStats.vue
@@ -1,43 +1,37 @@
 <template>
-    <div class="profile-card">
-        <p class="mb1">{{ $t('profile.dashboard.have-uploaded') }}</p>
+    <div class="profile-stats">
 
-        <div class="flex">
+        <div class="profile-stat-card flex-1-15" />
 
-            <div class="profile-stat-card">
-                <img src="/assets/icons/home/camera.png" />
+        <div class="profile-stat-card">
+            <img src="/assets/icons/home/camera.png" />
 
-                <div>
-                    <p class="profile-stat">{{ userPhotoCount }}</p>
-                    <p class="profile-text">{{ $t('profile.dashboard.photos') }}</p>
-                </div>
+            <div>
+                <p class="profile-stat">{{ this.photosCount }}</p>
+                <p class="profile-text">{{ $t('profile.dashboard.photos') }}</p>
             </div>
+        </div>
 
-            <div class="profile-stat-card">
-                <img src="/assets/icons/home/phone.png" />
+        <div class="profile-stat-card">
+            <img src="/assets/icons/home/phone.png" />
 
-                <div>
-                    <p class="profile-stat">{{ userTagsCount }}</p>
-                    <p class="profile-text">{{ $t('profile.dashboard.tags') }}</p>
-                </div>
+            <div>
+                <p class="profile-stat">{{ this.tagsCount }}</p>
+                <p class="profile-text">{{ $t('profile.dashboard.tags') }}</p>
             </div>
+        </div>
 
-            <div class="profile-stat-card">
-                <p class="profile-percent">%</p>
-
-                <div>
-                    <p class="profile-stat">{{ photoPercent }}</p>
-                    <p class="profile-text">{{ $t('profile.dashboard.all-photos') }}</p>
-                </div>
+        <div class="profile-percent-card">
+            <div class="inline-block">
+                <p class="profile-percent">{{ photoPercent }}%</p>
+                <p class="profile-text">{{ $t('profile.dashboard.all-photos') }}</p>
             </div>
+        </div>
 
-            <div class="profile-stat-card">
-                <p class="profile-percent">%</p>
-
-                <div>
-                    <p class="profile-stat">{{ tagPercent }}</p>
-                    <p class="profile-text">{{ $t('profile.dashboard.all-tags') }}</p>
-                </div>
+        <div class="profile-percent-card">
+            <div class="inline-block">
+                <p class="profile-percent">{{ tagPercent }}%</p>
+                <p class="profile-text">{{ $t('profile.dashboard.all-tags') }}</p>
             </div>
         </div>
     </div>
@@ -46,53 +40,29 @@
 <script>
 export default {
     name: 'ProfileStats',
-    computed: {
-
-        /**
-         *
-         */
-        photoPercent ()
-        {
-            return this.user.photoPercent;
-        },
-
-        /**
-         *
-         */
-        tagPercent ()
-        {
-            return this.user.tagPercent;
-        },
-
-        /**
-         * Total number of tags the user has submitted
-         */
-        userTagsCount ()
-        {
-            return this.user.user.total_tags;
-        },
-
-        /**
-         * Total number of photos the user has uploaded
-         */
-        userPhotoCount ()
-        {
-            return this.user.user.total_images;
-        },
-
-        /**
-         * The currently active user
-         */
-        user ()
-        {
-            return this.$store.state.user;
-        }
-    }
+    props: [
+        'photoPercent',
+        'tagPercent',
+        'tagsCount',
+        'photosCount'
+    ]
 };
 </script>
 
 <style scoped>
 
+    .profile-percent {
+        font-size: 3em;
+        text-align: center;
+        color: white;
+        text-transform: capitalize;
+    }
+
+    .profile-stats {
+        display: flex;
+        padding: 3em 0;
+    }
+
     .profile-percent {
         font-size: 3em;
         font-weight: 600;
@@ -105,18 +75,39 @@ export default {
         text-align: center;
     }
 
+    .profile-percent-card {
+        flex: 1;
+        text-align: left;
+    }
+
     .profile-stat-card img {
-        height: 3em;
+        height: 5em;
         margin: auto 1em auto 0;
     }
 
+    .profile-stat-card p {
+        color: white;
+        font-size: 2em;
+        text-transform: capitalize;
+    }
+
+    .profile-percent-card p {
+        color: white;
+        font-size: 2em;
+        text-transform: capitalize;
+    }
+
     .profile-stat {
-        font-size: 1.5em;
         font-weight: 600;
+        font-size: 2em;
     }
 
     .profile-text {
-        color: #1DD3B0 !important;
-}
+        color: #7cd85e !important;
+    }
+
+    .inline-block {
+        display: inline-block;
+    }
 
 </style>
diff --git a/resources/js/components/Profile/top/ProfileWelcome.vue b/resources/js/components/Profile/top/ProfileWelcome.vue
deleted file mode 100644
index a5c494d1f..000000000
--- a/resources/js/components/Profile/top/ProfileWelcome.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <div class="profile-card">
-        <p class="mb1">{{ $t('profile.dashboard.welcome') }}, {{ name }}</p>
-
-        <p class="mb1">{{ $t('profile.dashboard.out-of', {total: totalUsers} ) }}</p>
-        <p>{{ $t('profile.dashboard.rank', { rank: usersPosition } ) }}</p>
-    </div>
-</template>
-
-<script>
-import moment from 'moment';
-
-export default {
-    name: 'ProfileWelcome',
-    computed: {
-
-        /**
-         * The users name
-         */
-        name ()
-        {
-            return this.user.user.name;
-        },
-
-        /**
-         * The total number of accounts on OLM
-         */
-        totalUsers ()
-        {
-            return this.user.totalUsers;
-        },
-
-        /**
-         * The users position out of all users, based on their XP
-         */
-        usersPosition ()
-        {
-            return moment.localeData().ordinal(this.user.position);
-        },
-
-        /**
-         * The currently active user
-         */
-        user ()
-        {
-            return this.$store.state.user;
-        }
-    }
-};
-</script>
-
-<style scoped>
-
-</style>
diff --git a/resources/js/components/ProfileChart.vue b/resources/js/components/ProfileChart.vue
deleted file mode 100644
index 50c278d9e..000000000
--- a/resources/js/components/ProfileChart.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script>
-import { Pie } from 'vue-chartjs'
-
-export default Pie.extend({
-
-  props: ['smoking', 'food', 'coffee', 'alcohol', 'softdrinks', 'drugs', 'sanitary', 'other'],
-
-  mounted () {
-    // console.log('profile chart vue');
-    // console.log(this);
-
-    // get fraction of data 
-    var total = parseInt(this.smoking) + parseInt(this.food) + parseInt(this.coffee) + parseInt(this.alcohol) + parseInt(this.softdrinks) + parseInt(this.drugs) + parseInt(this.sanitary) + parseInt(this.other);
-    // console.log(total);
-
-    var smokingPercent = parseInt(this.smoking) / total * 100 + "%";
-    var foodPercent = parseInt(this.food) / total * 100 + "%";
-    var coffeePercent = parseInt(this.coffee) / total * 100 + "%";
-    var alcoholPercent = parseInt(this.alcohol) / total * 100 + "%";
-    var softdrinksPercent = parseInt(this.softdrinks) / total * 100 + "%";
-    var drugsPercent = parseInt(this.drugs) / total * 100 + "%";
-    var sanitaryPercent = parseInt(this.sanitary) / total * 100 + "%";
-    var otherPercent = parseInt(this.other) / total * 100 + "%";
-
-    var percentArray = [];
-    percentArray.push(smokingPercent.slice(0,4)+ "%", foodPercent.slice(0,4)+ "%", coffeePercent.slice(0,4)+ "%", alcoholPercent.slice(0,4)+ "%", softdrinksPercent.slice(0,4)+ "%", drugsPercent.slice(0,4)+ "%", sanitaryPercent.slice(0,4)+ "%", otherPercent.slice(0,4)+ "%");
-    // console.log(percentArray);
-
-
-    // Overwriting base render method with actual data.
-    this.renderChart({
-      labels: ['Smoking', 'Food', 'Coffee', 'Alcohol', 'SoftDrinks', 'Drugs', 'Sanitary', 'Other'],
-      datasets: [
-        {
-          label: 'Collected',
-          backgroundColor: ['#C28535', '#8AAE56', '#B66C46', '#EAE741', '#FF0000', '#BFE5A6', '#FFFFFF', '#BF00FE'],
-          data: [this.smoking, this.food, this.coffee, this.alcohol, this.softdrinks, this.drugs, this.sanitary, this.other]
-        }
-      ],
-    },
-
-    {
-
-
-      legend: {
-        labels: {
-          fontColor: '#ffffff'
-        }
-      },
-
-      // scales: {
-      //   yAxes: [{
-      //     ticks: {
-      //       stepSize: 1
-      //     }
-      //   }]
-      // },
-
-     // tooltips: {
-     //    mode: 'single',  // this is the Chart.js default, no need to set
-     //    callbacks: {
-     //        label: function (tooltipItems, percentArray) {
-     //          console.log(tooltipItems),
-     //          console.log(percentArray)
-     //        }
-     //    }
-    // },
-
-    } // end options 
-    ) // end render chart 
-  } // end mounted 
-})
-</script>
diff --git a/resources/js/langs/de/settings/common.json b/resources/js/langs/de/settings/common.json
index 772ffe02a..a5183c0f8 100644
--- a/resources/js/langs/de/settings/common.json
+++ b/resources/js/langs/de/settings/common.json
@@ -9,5 +9,7 @@
     "presence": "Presence",
     "emails": "Emails",
     "show-flag": "Show Flag",
-    "teams": "Teams"
+    "teams": "Teams",
+    "public-profile": "Public Profile",
+    "social-media": "Social Media"
 }
diff --git a/resources/js/langs/en/settings/common.json b/resources/js/langs/en/settings/common.json
index 772ffe02a..a5183c0f8 100644
--- a/resources/js/langs/en/settings/common.json
+++ b/resources/js/langs/en/settings/common.json
@@ -9,5 +9,7 @@
     "presence": "Presence",
     "emails": "Emails",
     "show-flag": "Show Flag",
-    "teams": "Teams"
+    "teams": "Teams",
+    "public-profile": "Public Profile",
+    "social-media": "Social Media"
 }
diff --git a/resources/js/langs/es/settings/common.json b/resources/js/langs/es/settings/common.json
index 3632d740e..ff09258f4 100644
--- a/resources/js/langs/es/settings/common.json
+++ b/resources/js/langs/es/settings/common.json
@@ -9,5 +9,7 @@
     "presence": "Presencia",
     "emails": "Corres electrónicos",
     "show-flag": "Mostrar bandera",
-    "teams": "Equipos"
+    "teams": "Equipos",
+    "public-profile": "Public Profile",
+    "social-media": "Social Media"
 }
diff --git a/resources/js/langs/nl/settings/common.json b/resources/js/langs/nl/settings/common.json
index 73f3d4bf9..932451515 100644
--- a/resources/js/langs/nl/settings/common.json
+++ b/resources/js/langs/nl/settings/common.json
@@ -9,5 +9,7 @@
     "presence": "Aanwezigheid",
     "emails": "Emails",
     "show-flag": "Toon vlag",
-    "teams": "Teams"
-} 
\ No newline at end of file
+    "teams": "Teams",
+    "public-profile": "Public Profile",
+    "social-media": "Social Media"
+}
diff --git a/resources/js/langs/pl/settings/common.json b/resources/js/langs/pl/settings/common.json
index 3838a83c9..478e2cffc 100644
--- a/resources/js/langs/pl/settings/common.json
+++ b/resources/js/langs/pl/settings/common.json
@@ -9,5 +9,7 @@
     "presence": "Obecność",
     "emails": "E-maile",
     "show-flag": "Pokaż flage",
-    "teams": "Drużyny"
+    "teams": "Drużyny",
+    "public-profile": "Public Profile",
+    "social-media": "Social Media"
 }
diff --git a/resources/js/routes.js b/resources/js/routes.js
index 2c4fa778f..73ef719f3 100644
--- a/resources/js/routes.js
+++ b/resources/js/routes.js
@@ -9,10 +9,8 @@ import can_verify_boxes from './middleware/can_verify_boxes'
 
 import middlewarePipeline from './middleware/middlewarePipeline'
 
-// The earlier a route is defined, the higher its priority.
 const router = new VueRouter({
     mode: 'history',
-    // base: process.env.BASE_URL, // not sure if we need this?
     linkActiveClass: 'is-active',
     routes: [
         // GUEST ROUTES
@@ -113,13 +111,6 @@ const router = new VueRouter({
                 middleware: [ auth ]
             }
         },
-        {
-            path: '/submit', // old route
-            component: require('./views/general/Upload').default,
-            meta: {
-                middleware: [ auth ]
-            }
-        },
         {
             path: '/tag',
             component: require('./views/general/Tag').default,
@@ -154,40 +145,44 @@ const router = new VueRouter({
                 },
                 {
                     path: 'details',
-                    component: require('./views/settings/Details').default,
+                    component: require('./views/Settings/Details').default,
                 },
                 {
                     path: 'account',
-                    component: require('./views/settings/Account').default,
+                    component: require('./views/Settings/Account').default,
                 },
                 {
                     path: 'payments',
-                    component: require('./views/settings/Payments').default,
+                    component: require('./views/Settings/Payments').default,
                 },
                 {
                     path: 'privacy',
-                    component: require('./views/settings/Privacy').default,
+                    component: require('./views/Settings/Privacy').default,
                 },
                 {
                     path: 'littercoin',
-                    component: require('./views/settings/Littercoin').default,
+                    component: require('./views/Settings/Littercoin').default,
                 },
                 {
                     path: 'presence',
-                    component: require('./views/settings/Presence').default,
+                    component: require('./views/Settings/Presence').default,
                 },
                 {
                     path: 'emails',
-                    component: require('./views/settings/Emails').default,
+                    component: require('./views/Settings/Emails').default,
                 },
                 {
                     path: 'show-flag',
-                    component: require('./views/settings/GlobalFlag').default,
+                    component: require('./views/Settings/GlobalFlag').default,
                 },
-                // {
-                // 	path: 'phone',
-                // 	component: require('./views/Phone').default
-                // }
+                {
+                    path: 'public-profile',
+                    component: require('./views/Settings/PublicProfile').default
+                },
+                {
+                    path: 'social-media',
+                    component: require('./views/Settings/SocialMediaIntegration').default
+                }
             ]
         },
         {
@@ -203,6 +198,11 @@ const router = new VueRouter({
             meta: {
                 middleware: [ auth, can_verify_boxes ]
             }
+        },
+        // Public Profile by Username
+        {
+            path: '/:username?',
+            component: require('./views/general/Profile').default,
         }
     ]
 });
@@ -212,7 +212,7 @@ const router = new VueRouter({
  */
 router.beforeEach((to, from, next) => {
 
-    if (! to.meta.middleware) return next();
+    if (!to.meta.middleware) return next();
 
     // testing --- this allows store to init before router finishes and returns with auth false
     // await store.dispatch('CHECK_AUTH');
diff --git a/resources/js/store/modules/user/actions.js b/resources/js/store/modules/user/actions.js
index ffb0f8792..aa6a8066c 100644
--- a/resources/js/store/modules/user/actions.js
+++ b/resources/js/store/modules/user/actions.js
@@ -165,15 +165,15 @@ export const actions = {
     async GET_CURRENT_USER (context)
     {
         await axios.get('/current-user')
-        .then(response => {
-            console.log('get_current_user', response);
+            .then(response => {
+                console.log('get_current_user', response);
 
-            context.commit('initUser', response.data);
-            context.commit('set_default_litter_presence', response.data.items_remaining);
-        })
-        .catch(error => {
-            console.log('error.get_current_user', error);
-        });
+                context.commit('initUser', response.data);
+                context.commit('set_default_litter_presence', response.data.items_remaining);
+            })
+            .catch(error => {
+                console.log('error.get_current_user', error);
+            });
     },
 
     /**
@@ -199,33 +199,62 @@ export const actions = {
      */
     async GET_USERS_PROFILE_DATA (context)
     {
-        await axios.get('/user/profile/index')
-            .then(response => {
-                console.log('get_users_position', response);
+        const username = context.state.public_profile.publicProfile.username;
 
-                context.commit('usersPosition', response.data);
-            })
-            .catch(error => {
-                console.error('get_users_position', error);
-            });
+        await axios.get('/user/profile/index', {
+            params: {
+                username
+            }
+        })
+        .then(response => {
+            console.log('get_users_position', response);
+
+            context.commit('usersPosition', response.data);
+        })
+        .catch(error => {
+            console.error('get_users_position', error);
+        });
     },
 
     /**
      * Get the geojson data for the users Profile/ProfileMap
+     *
+     * This can be for the currently authenticated user, or a public profile
      */
     async GET_USERS_PROFILE_MAP_DATA (context, payload)
     {
-        await axios.get('/user/profile/map', {
+        const url = (context.state.public_profile.publicProfile)
+            ? '/user/public-profile/map'
+            : '/user/profile/map';
+
+        const username = context.state.public_profile.publicProfile.hasOwnProperty('username')
+            ? context.state.public_profile.publicProfile.username
+            : null;
+
+        const title = i18n.t('notifications.success');
+        const body = "Map data updated";
+
+        await axios.get(url, {
             params: {
                 period: payload.period,
                 start: payload.start + ' 00:00:00',
-                end: payload.end + ' 23:59:59'
+                end: payload.end + ' 23:59:59',
+                username
             }
         })
         .then(response => {
             console.log('get_users_profile_map_data', response);
 
-            context.commit('usersGeojson', response.data.geojson);
+            if (response.data.success)
+            {
+                Vue.$vToastify.success({
+                    title,
+                    body,
+                    position: 'top-right'
+                });
+
+                context.commit('usersGeojson', response.data.geojson);
+            }
         })
         .catch(error => {
             console.error('get_users_profile_map_data', error);
@@ -354,8 +383,8 @@ export const actions = {
      */
     async TOGGLE_LITTER_PICKED_UP_SETTING (context)
     {
-        let title = i18n.t('notifications.success');
-        let body  = i18n.t('notifications.litter-toggled');
+        const title = i18n.t('notifications.success');
+        const body  = i18n.t('notifications.litter-toggled');
 
         await axios.post('/settings/toggle')
             .then(response => {
@@ -378,13 +407,44 @@ export const actions = {
             });
     },
 
+    /**
+     * Toggle the privacy status of the users dashboard
+     */
+    async TOGGLE_PUBLIC_PROFILE (context)
+    {
+        const title = i18n.t('notifications.success');
+
+        const nowPublic = "Your Profile is now public";
+        const nowPrivate = "Your Profile is now private";
+
+        await axios.post('/settings/public-profile/toggle')
+            .then(response => {
+                console.log('toggle_public_profile', response);
+
+                if (response.data.success)
+                {
+                    context.commit('updateUserSettings', response.data.settings);
+
+                    Vue.$vToastify.success({
+                        title,
+                        body: (response.data.settings.show_public_profile)
+                            ? nowPublic
+                            : nowPrivate,
+                        position: 'top-right'
+                    });
+                }
+            })
+            .catch(error => {
+                console.error('toggle_public_profile', error);
+            });
+    },
+
     /**
      * The user wants to update name, email, username
      */
     async UPDATE_DETAILS (context)
     {
         const title = i18n.t('notifications.success');
-        // todo - translate this
         const body  = 'Your information has been updated'
 
         await axios.post('/settings/details', {
@@ -395,7 +455,6 @@ export const actions = {
         .then(response => {
             console.log('update_details', response);
 
-            /* improve this */
             Vue.$vToastify.success({
                 title,
                 body,
@@ -403,7 +462,7 @@ export const actions = {
             });
         })
         .catch(error => {
-            console.log('error.update_details', error);
+            console.error('update_details', error);
 
             // update errors. user.js
             context.commit('errors', error.response.data.errors);
@@ -415,16 +474,15 @@ export const actions = {
      */
     async UPDATE_GLOBAL_FLAG (context, payload)
     {
-        let title = i18n.t('notifications.success');
-        let body  = i18n.t('notifications.settings.flag-updated');
+        const title = i18n.t('notifications.success');
+        const body  = i18n.t('notifications.settings.flag-updated');
 
         await axios.post('/settings/save-flag', {
             country: payload
         })
         .then(response => {
-            console.log(response);
+            console.log('update_global_flag', response);
 
-            /* improve this */
             Vue.$vToastify.success({
                 title,
                 body,
@@ -432,7 +490,65 @@ export const actions = {
             });
         })
         .catch(error => {
-            console.log(error);
+            console.log('update_global_flag', error);
+        });
+    },
+
+    /**
+     * Update the settings of the users public profile
+     */
+    async UPDATE_PUBLIC_PROFILE_SETTINGS (context)
+    {
+        const title = i18n.t('notifications.success');
+        const body = "Your settings have been updated";
+
+        await axios.post('/settings/public-profile/update', {
+            map: context.state.user.settings.map,
+            download: context.state.user.settings.download,
+        })
+        .then(response => {
+            console.log('update_public_profile_settings', response);
+
+            if (response.data.success)
+            {
+                Vue.$vToastify.success({
+                    title,
+                    body,
+                    position: 'top-right'
+                });
+            }
+        })
+        .catch(error => {
+            console.error('update_public_profile_settings', error);
+        });
+    },
+
+    /**
+     * Update the users links to twitter and instagram
+     */
+    async UPDATE_SOCIAL_MEDIA_LINKS (context)
+    {
+        const title = i18n.t('notifications.success');
+        const body = "Your settings have been updated";
+
+        await axios.post('/settings/social-media/update', {
+            twitter: context.state.user.settings.twitter,
+            instagram: context.state.user.settings.instagram,
+        })
+        .then(response => {
+            console.log('update_public_profile_settings', response);
+
+            if (response.data.success)
+            {
+                Vue.$vToastify.success({
+                    title,
+                    body,
+                    position: 'top-right'
+                });
+            }
+        })
+        .catch(error => {
+            console.error('update_public_profile_settings', error);
         });
     }
 };
diff --git a/resources/js/store/modules/user/index.js b/resources/js/store/modules/user/index.js
index 9e07f8e6d..2df1a564a 100644
--- a/resources/js/store/modules/user/index.js
+++ b/resources/js/store/modules/user/index.js
@@ -5,9 +5,14 @@ import { mutations } from './mutations';
 
 const state = Object.assign({}, init);
 
+import { public_profile } from './public_profile';
+
 export const user = {
     state,
     actions,
     getters,
-    mutations
+    mutations,
+    modules: {
+	    public_profile
+    }
 };
diff --git a/resources/js/store/modules/user/init.js b/resources/js/store/modules/user/init.js
index 948b2bac4..42d0aefc3 100644
--- a/resources/js/store/modules/user/init.js
+++ b/resources/js/store/modules/user/init.js
@@ -11,6 +11,7 @@ export const init = {
     position: 0,
     photoPercent: 0,
     requiredXp: 0,
+    settings: null,
     tagPercent: 0,
     totalPhotos: 0,
     totalTags: 0,
diff --git a/resources/js/store/modules/user/mutations.js b/resources/js/store/modules/user/mutations.js
index 2ef2b4fb9..fcbce514b 100644
--- a/resources/js/store/modules/user/mutations.js
+++ b/resources/js/store/modules/user/mutations.js
@@ -118,6 +118,18 @@ export const mutations = {
         state.user.active_team = payload;
     },
 
+    /**
+     * Update a value for one of the available settings params
+     */
+    publicProfileSetting (state, payload)
+    {
+        const settings = Object.assign({}, state.user.settings);
+
+        settings[payload.key] = payload.v;
+
+        state.user.settings = settings;
+    },
+
     /**
      * Updates the user's team data
      */
@@ -150,6 +162,22 @@ export const mutations = {
         state.user.items_remaining = payload;
     },
 
+    // /**
+    //  * After successful response
+    //  */
+    // toggleUserDashboardPrivacyStatus (state, payload)
+    // {
+    //     state.user.show_public_profile = ! state.user.show_public_profile;
+    // },
+
+    /**
+     * Initialise settings after updating pubic profile
+     */
+    updateUserSettings (state, payload)
+    {
+        state.user.settings = payload;
+    },
+
     /**
      * Users map data for the given time-period
      */
diff --git a/resources/js/store/modules/user/public_profile/index.js b/resources/js/store/modules/user/public_profile/index.js
new file mode 100644
index 000000000..5ea87443c
--- /dev/null
+++ b/resources/js/store/modules/user/public_profile/index.js
@@ -0,0 +1,11 @@
+import { mutations } from './mutations';
+
+const state = {
+    publicProfile: null,
+    userData: null
+};
+
+export const public_profile = {
+    state,
+    mutations
+};
diff --git a/resources/js/store/modules/user/public_profile/mutations.js b/resources/js/store/modules/user/public_profile/mutations.js
new file mode 100644
index 000000000..fb16ad018
--- /dev/null
+++ b/resources/js/store/modules/user/public_profile/mutations.js
@@ -0,0 +1,10 @@
+export const mutations = {
+    /**
+     * Initialise the public profile and related data of a user when viewing /username
+     */
+    userByUsername (state, payload)
+    {
+        state.publicProfile = payload.publicProfile;
+        state.userData = payload.userData;
+    }
+}
diff --git a/resources/js/views/RootContainer.vue b/resources/js/views/RootContainer.vue
index 79ebb4441..e07eb2c31 100644
--- a/resources/js/views/RootContainer.vue
+++ b/resources/js/views/RootContainer.vue
@@ -19,7 +19,17 @@ import Unsubscribed from '../components/Notifications/Unsubscribed'
 
 export default {
     name: 'RootContainer',
-    props: ['auth', 'user', 'verified', 'unsub'],
+    props: [
+        'auth',
+        'user',
+        'verified',
+        'unsub',
+
+        // These exist when we are visiting olm.com/username = public profile
+        'username',
+        'publicProfile',
+        'userData'
+    ],
     components: {
         Nav,
         Modal,
@@ -31,15 +41,17 @@ export default {
         return {
             showEmailConfirmed: false,
             showUnsubscribed: false
-        }
+        };
     },
     created ()
     {
+        // Initialise language
         if (this.$localStorage.get('lang'))
         {
             this.$i18n.locale = this.$localStorage.get('lang');
         }
 
+        // Check if the user is authenticated
         if (this.auth)
         {
             this.$store.commit('login');
@@ -47,22 +59,41 @@ export default {
             // user object is passed when the page is refreshed
             if (this.user)
             {
-                const u = JSON.parse(this.user);
-                this.$store.commit('initUser', u);
-                this.$store.commit('set_default_litter_presence', u.items_remaining);
+                const user = JSON.parse(this.user);
+                console.log('RootContainer.user', user);
+
+                this.$store.commit('initUser', user);
+                this.$store.commit('set_default_litter_presence', user.items_remaining);
             }
         }
-
         // This is needed to invalidate user.auth = true
         // which is persisted and not updated if the authenticated user forgets to manually log out
-        else this.$store.commit('resetState');
+        else
+        {
+            console.log('guest');
+            this.$store.commit('resetState');
+        }
 
         // If Account Verified
         if (this.verified) this.showEmailConfirmed = true;
         if (this.unsub) this.showUnsubscribed = true;
+
+        // If the user is visiting a username with public settings turned on
+        if (this.username)
+        {
+            const publicProfile = JSON.parse(this.publicProfile);
+            console.log({ publicProfile });
+
+            const userData = JSON.parse(this.userData);
+            console.log({ userData });
+
+            this.$store.commit('userByUsername', {
+                publicProfile,
+                userData
+            });
+        }
     },
     computed: {
-
         /**
          * Boolean to show or hide the modal
          */
diff --git a/resources/js/views/Settings.vue b/resources/js/views/Settings.vue
index f4df3232f..c6c1cbb0c 100644
--- a/resources/js/views/Settings.vue
+++ b/resources/js/views/Settings.vue
@@ -7,7 +7,7 @@
 				        {{ $t('settings.common.general') }}
 				    </p>
 				    <ul class="menu-list">
-				        <li v-for="link in links">
+				        <li v-for="link in Object.keys(this.links)">
 				    	    <router-link :to="'/settings/' + link" @click.native="change(link)">
                                 {{ translate(link) }}
 				    	    </router-link>
@@ -16,22 +16,24 @@
 				</aside>
 			</div>
 			<div class="column is-three-quarters is-offset-1">
-                <component :is="this.types[this.link]" />
+                <component :is="this.links[this.link]" />
 			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-import Password from './settings/Password'
-import Details from './settings/Details'
-import Account from './settings/Account'
-import Payments from './settings/Payments'
-import Privacy from './settings/Privacy'
-import Littercoin from './settings/Littercoin'
-import Presence from './settings/Presence'
-import Emails from './settings/Emails'
-import GlobalFlag from './settings/GlobalFlag'
+import Password from './Settings/Password'
+import Details from './Settings/Details'
+import Account from './Settings/Account'
+import Payments from './Settings/Payments'
+import Privacy from './Settings/Privacy'
+import Littercoin from './Settings/Littercoin'
+import Presence from './Settings/Presence'
+import Emails from './Settings/Emails'
+import GlobalFlag from './Settings/GlobalFlag'
+import PublicProfile from './Settings/PublicProfile';
+import SocialMediaIntegration from './Settings/SocialMediaIntegration';
 
 export default {
     name: 'Settings',
@@ -45,6 +47,8 @@ export default {
         Presence,
         Emails,
         GlobalFlag,
+        PublicProfile,
+        SocialMediaIntegration
     },
     async created ()
     {
@@ -56,19 +60,9 @@ export default {
     data ()
     {
         return {
-            links: [
-                'password',
-                'details',
-                'account',
-                'payments',
-                'privacy',
-                'littercoin',
-                'presence',
-                'emails',
-                'show-flag',
-            ],
             link: 'password',
-            types: {
+            // Link route name to Component
+            links: {
                 'password': 'Password',
                 'details': 'Details',
                 'account': 'Account',
@@ -78,11 +72,12 @@ export default {
                 'presence': 'Presence',
                 'emails': 'Emails',
                 'show-flag': 'GlobalFlag',
+                'public-profile': 'PublicProfile',
+                // 'social-media': 'SocialMediaIntegration'
             }
         }
     },
     methods: {
-
         /**
          * Change link = view different component
          */
diff --git a/resources/js/views/settings/Account.vue b/resources/js/views/Settings/Account.vue
similarity index 100%
rename from resources/js/views/settings/Account.vue
rename to resources/js/views/Settings/Account.vue
diff --git a/resources/js/views/settings/Details.vue b/resources/js/views/Settings/Details.vue
similarity index 100%
rename from resources/js/views/settings/Details.vue
rename to resources/js/views/Settings/Details.vue
diff --git a/resources/js/views/settings/Emails.vue b/resources/js/views/Settings/Emails.vue
similarity index 100%
rename from resources/js/views/settings/Emails.vue
rename to resources/js/views/Settings/Emails.vue
diff --git a/resources/js/views/settings/GlobalFlag.vue b/resources/js/views/Settings/GlobalFlag.vue
similarity index 100%
rename from resources/js/views/settings/GlobalFlag.vue
rename to resources/js/views/Settings/GlobalFlag.vue
diff --git a/resources/js/views/settings/Littercoin.vue b/resources/js/views/Settings/Littercoin.vue
similarity index 100%
rename from resources/js/views/settings/Littercoin.vue
rename to resources/js/views/Settings/Littercoin.vue
diff --git a/resources/js/views/settings/Password.vue b/resources/js/views/Settings/Password.vue
similarity index 100%
rename from resources/js/views/settings/Password.vue
rename to resources/js/views/Settings/Password.vue
diff --git a/resources/js/views/settings/Payments.vue b/resources/js/views/Settings/Payments.vue
similarity index 100%
rename from resources/js/views/settings/Payments.vue
rename to resources/js/views/Settings/Payments.vue
diff --git a/resources/js/views/settings/Presence.vue b/resources/js/views/Settings/Presence.vue
similarity index 100%
rename from resources/js/views/settings/Presence.vue
rename to resources/js/views/Settings/Presence.vue
diff --git a/resources/js/views/settings/Privacy.vue b/resources/js/views/Settings/Privacy.vue
similarity index 100%
rename from resources/js/views/settings/Privacy.vue
rename to resources/js/views/Settings/Privacy.vue
diff --git a/resources/js/views/Settings/PublicProfile.vue b/resources/js/views/Settings/PublicProfile.vue
new file mode 100644
index 000000000..d80c7a5fa
--- /dev/null
+++ b/resources/js/views/Settings/PublicProfile.vue
@@ -0,0 +1,196 @@
+<template>
+    <div style="padding-left: 1em; padding-right: 1em;">
+        <h1 class="title is-4">{{ $t('settings.common.public-profile') }}</h1>
+
+        <hr>
+        <br>
+
+        <div class="columns">
+            <div class="column is-offset-1">
+                <div class="row">
+                    <p class="subtitle is-4 mb1">Do you want to make your User Dashboard public or private?</p>
+
+                    <strong class="mb1">
+                        Public Profile Status:
+
+                        <span :style="getColor">{{ this.getStatusText }}</span>
+                    </strong>
+
+                    <p>{{ this.getInfoText }}</p>
+
+                    <br>
+
+                    <button
+                        class="button is-medium"
+                        :class="getButtonClass"
+                        @click="toggle"
+                        :disabled="processing"
+                    >{{ this.getButtonText }}</button>
+
+                    <div v-if="show_public_profile" class="pt2">
+
+                        <p class="subtitle is-4 mb1">You control what data you want to display</p>
+
+                        <!-- Download my data -->
+                        <!-- Show map with all my data -->
+                        <div class="control mb1">
+                            <input
+                                id="map"
+                                name="map"
+                                type="checkbox"
+                                v-model="map"
+                            />
+                            <label for="map">Show map with all my data and show a button to download all my data. Does not include your email.</label>
+                        </div>
+
+                        <button
+                            class="button is-medium is-info mt1"
+                            :class="processing ? 'is-loading' : ''"
+                            @click="update"
+                            :disabled="processing"
+                        >Save</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'PublicProfile',
+    data () {
+        return {
+            processing: false
+        };
+    },
+    computed: {
+        /**
+         * CSS class to show to style button
+         */
+        getButtonClass ()
+        {
+            const color = (this.show_public_profile)
+                ? 'is-danger'
+                : 'is-primary';
+
+            return (this.processing)
+                ? color + ' is-loading'
+                : color;
+        },
+
+        /**
+         * Text to show when toggling public status
+         */
+        getButtonText ()
+        {
+            return (this.show_public_profile)
+                ? 'Make My Profile Private'
+                : 'Make My Profile Public';
+        },
+
+        /**
+         * Color to show for public/private status
+         */
+        getColor ()
+        {
+            return (this.show_public_profile)
+                ? 'color: green;'
+                : 'color: red;';
+        },
+
+        /**
+         * More information to show about the current privacy status
+         */
+        getInfoText ()
+        {
+            return (this.show_public_profile)
+                ? 'Your profile is public. Anyone can visit it and see the data you allow.'
+                : 'Your profile is private. Only you can access it.';
+        },
+
+        /**
+         * Text to show for public/private status
+         */
+        getStatusText ()
+        {
+            return (this.show_public_profile)
+                ? 'Public'
+                : 'Private';
+        },
+
+        download: {
+            get () {
+                return this.settings.download;
+            },
+            set (v) {
+                this.$store.commit('publicProfileSetting', {
+                    key: 'download',
+                    v
+                });
+            }
+        },
+
+        map: {
+            get () {
+                return this.settings.map;
+            },
+            set (v) {
+                this.$store.commit('publicProfileSetting', {
+                    key: 'map',
+                    v
+                });
+            }
+        },
+
+        /**
+         * Shortcut to user.settings
+         */
+        settings ()
+        {
+            return this.$store.state.user.user.settings;
+        },
+
+        /**
+         * Return True to make the Profile Public
+         *
+         * Return False if UserSettings does not exist yet
+         */
+        show_public_profile ()
+        {
+            return this.$store.state.user.user.settings?.show_public_profile;
+        }
+    },
+    methods: {
+        /**
+         * Change the privacy value of the users public profile
+         */
+        async toggle ()
+        {
+            this.processing = true;
+
+            await this.$store.dispatch('TOGGLE_PUBLIC_PROFILE');
+
+            this.processing = false;
+        },
+
+        /**
+         * Change what components are visible on a Public Profile
+         */
+        async update ()
+        {
+            this.processing = true;
+
+            await this.$store.dispatch('UPDATE_PUBLIC_PROFILE_SETTINGS');
+
+            this.processing = false;
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+
+
+</style>
diff --git a/resources/js/views/Settings/SocialMediaIntegration.vue b/resources/js/views/Settings/SocialMediaIntegration.vue
new file mode 100644
index 000000000..e1e4a2392
--- /dev/null
+++ b/resources/js/views/Settings/SocialMediaIntegration.vue
@@ -0,0 +1,217 @@
+<template>
+    <div style="padding-left: 1em; padding-right: 1em;">
+        <h1 class="title is-4">{{ $t('settings.common.public-profile') }}</h1>
+
+        <hr>
+        <br>
+
+        <div class="columns">
+            <div class="column is-offset-1">
+                <div class="row">
+                    <p class="subtitle is-4 mb1">Link your apps</p>
+
+                    <p class="mb1">
+                        You use this to promote some social media handles on OpenLitterMap and create links on the maps and leaderboards.
+                    </p>
+
+                    <!-- Link Twitter -->
+                    <div class="public-profile-icon-container mb1">
+
+                        <img src="/assets/icons/twitter2.png" class="public-profile-icon" />
+
+                        <input
+                            id="twitter"
+                            name="twitter"
+                            type="input"
+                            class="input w-15"
+                            v-model="twitter"
+                            placeholder="openlittermap"
+                        />
+                    </div>
+
+                    <div v-if="twitter" class="social-media-options">
+
+                        <!-- Show map with all my data -->
+                        <div class="control mb1">
+                            <input
+                                id="twitter_leaderboards"
+                                name="twitter_leaderboards"
+                                type="checkbox"
+                                v-model="twitter_leaderboards"
+                            />
+                            <label for="twitter_leaderboards">Link My Username In Leaderboards To My Twitter Link</label>
+                        </div>
+
+                        <!-- Show map with all my data -->
+                        <div class="control mb1">
+                            <input
+                                id="twitter_global_map"
+                                name="twitter_global_map"
+                                type="checkbox"
+                                v-model="twitter_global_map"
+                            />
+                            <label for="twitter_global_map">Link </label>
+                        </div>
+                    </div>
+
+                    <!-- Link Instagram -->
+                    <div class="public-profile-icon-container mb1">
+
+                        <img src="/assets/icons/ig2.png" class="public-profile-icon" />
+
+                        <input
+                            id="instagram"
+                            name="instagram"
+                            type="input"
+                            class="input w-15"
+                            v-model="instagram"
+                            placeholder="openlittermap"
+                        />
+                    </div>
+
+                    <div v-if="instagram" class="social-media-options">
+                        <input
+                            id="instagram_leaderboards"
+                            name="instagram_leaderboards"
+                            type="checkbox"
+                            v-model="instagram_leaderboards"
+                        />
+                        <label for="instagram_leaderboards">Link instagram to my username on the Leaderboards</label>
+
+                        <!-- Show map with all my data -->
+                        <div class="control mb1">
+                            <input
+                                id="instagram_global_map"
+                                name="instagram_global_map"
+                                type="checkbox"
+                                v-model="instagram_global_map"
+                            />
+                            <label for="instagram_global_map">Link instagram to my username on the Global Map</label>
+                        </div>
+                    </div>
+
+                    <button
+                        class="button is-medium is-info mt1"
+                        :class="processing ? 'is-loading' : ''"
+                        @click="update"
+                        :disabled="processing"
+                    >Save</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'SocialMediaIntegration',
+    data () {
+        return {
+            processing: false
+        };
+    },
+    computed: {
+
+        instagram: {
+            get () {
+                return this.settings.instagram;
+            },
+            set (v) {
+                this.$store.commit('publicProfileSetting', {
+                    key: 'instagram',
+                    v
+                });
+            }
+        },
+
+        instagram_leaderboards : {
+            get () {
+                return true;
+            },
+            set (v) {
+
+            }
+        },
+
+        instagram_global_map: {
+            get () {
+                return true;
+            },
+            set (v) {
+
+            }
+        },
+
+        twitter: {
+            get () {
+                return this.settings.twitter;
+            },
+            set (v) {
+                this.$store.commit('publicProfileSetting', {
+                    key: 'twitter',
+                    v
+                });
+            }
+        },
+
+        twitter_leaderboards : {
+            get () {
+                return true;
+            },
+            set (v) {
+
+            }
+        },
+
+        twitter_global_map: {
+            get () {
+                return true;
+            },
+            set (v) {
+
+            }
+        },
+
+        /**
+         * Shortcut to UserSettings state
+         */
+        settings ()
+        {
+            return this.$store.state.user.user.settings;
+        }
+    },
+    methods: {
+        /**
+         * Change what components are visible on a Public Profile
+         */
+        async update ()
+        {
+            this.processing = true;
+
+            await this.$store.dispatch('UPDATE_SOCIAL_MEDIA_LINKS');
+
+            this.processing = false;
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+    .public-profile-icon-container {
+        display: flex;
+        margin: auto 0;
+        align-items: center;
+    }
+
+    .public-profile-icon {
+        width: 3em;
+        margin-right: 1em;
+    }
+
+    .social-media-options {
+        margin-bottom: 1em;
+        padding-left: 4em;
+    }
+
+</style>
diff --git a/resources/js/views/general/Profile.vue b/resources/js/views/general/Profile.vue
index 7d9bcccd0..a84b94384 100644
--- a/resources/js/views/general/Profile.vue
+++ b/resources/js/views/general/Profile.vue
@@ -1,41 +1,64 @@
 <template>
-    <section class="profile-container">
+    <section class="outer-profile-container">
 
         <!--  Todo - Show Loading -->
         <!--  Todo - Later: Add translations -->
         <!--  Todo - Animate numbers incrementing from previous to current values -->
+        <ProfileMap />
 
-        <!-- Row 1, Column 1 -->
-        <ProfileWelcome />
+        <div class="main-profile-container">
+            <ProfilePosition
+                :position="this.userData.usersPosition"
+            />
 
-        <!-- Row 1, Column 2 -->
-        <ProfileStats />
+            <ProfileStats
+                :photo-percent="this.userData.photoPercent"
+                :photos-count="this.user.photos_count"
+                :tag-percent="this.userData.tagPercent"
+                :tags-count="this.user.total_tags"
+            />
 
-        <!-- Row 1, Column 3 -->
-        <ProfileNextTarget />
+            <ProfileNextTarget
+                :level="this.user.level"
+                :xp="this.user.xp"
+                :xp-needed="this.userData.requiredXp"
+            />
 
-        <!-- Row 2, Column 1 -->
-        <ProfileCategories />
+            <div class="flex">
 
-        <!-- Row 2, Column 2 -->
-        <ProfileMap />
+                <div style="flex: 0.1;" />
+
+                <ProfileCalendar
+                    v-if="canDownloadUserData"
+                />
 
-        <!-- Row 2, Column 3 -->
-        <ProfileCalendar />
+                <div style="flex: 0.25" />
 
-        <!-- Row 3, Column 1 -->
-        <ProfileDownload />
+                <ProfileCategories />
 
-        <!-- Row 3, Column 2 -->
-        <ProfileTimeSeries />
+                <div class="smaller-empty-profile-card" />
+            </div>
 
-        <!-- Row 3, Column 3 -->
-        <ProfilePhotos />
+            <ProfileTimeSeries
+                :ppm="this.user.photos_per_month"
+            />
+
+            <div class="profile-buttons-container">
+                <ProfileDownload
+                    v-if="canDownloadUserData"
+                />
+
+                <!-- Hide this when viewing a public profile -->
+                <ProfilePhotos
+                    v-if="!publicProfile"
+                />
+            </div>
+        </div>
     </section>
 </template>
 
 <script>
-import ProfileWelcome from '../../components/Profile/top/ProfileWelcome';
+import ProfilePosition from '../../components/Profile/top/ProfilePosition';
 import ProfileStats from '../../components/Profile/top/ProfileStats';
 import ProfileNextTarget from '../../components/Profile/top/ProfileNextTarget';
 import ProfileCategories from '../../components/Profile/middle/ProfileCategories';
@@ -48,7 +71,7 @@ import ProfilePhotos from '../../components/Profile/bottom/ProfilePhotos';
 export default {
     name: 'Profile',
     components: {
-        ProfileWelcome,
+        ProfilePosition,
         ProfileTimeSeries,
         ProfileStats,
         ProfileNextTarget,
@@ -60,40 +83,82 @@ export default {
     },
     async mounted ()
     {
-        await this.$store.dispatch('GET_CURRENT_USER');
-
-        await this.$store.dispatch('GET_USERS_PROFILE_DATA');
+        if (!this.publicProfile)
+        {
+            await this.$store.dispatch('GET_CURRENT_USER');
+            await this.$store.dispatch('GET_USERS_PROFILE_DATA');
+        }
+    },
+    computed: {
+        /**
+         * Return True if we can download the users data
+         */
+        canDownloadUserData ()
+        {
+            // Return True if the user is visiting their own profile
+            if (!this.publicProfile) return true;
+
+            return this.publicProfile.settings.public_profile_download_my_data;
+        },
+
+        /**
+         * Publicly available data per user
+         */
+        publicProfile ()
+        {
+            return this.$store.state.user.public_profile.publicProfile;
+        },
+
+        /**
+         * Return either the currently authenticated user,
+         *
+         * Or show another users public profile if it exists.
+         */
+        user ()
+        {
+            return (this.publicProfile)
+                ? this.publicProfile
+                : this.$store.state.user.user;
+        },
+
+        /**
+         * Extra user data that is loaded separately to main user
+         */
+        userData ()
+        {
+            return this.$store.state.user.public_profile.userData;
+        }
     }
 }
 </script>
 
 <style lang="scss">
 
-    .profile-container {
+    .outer-profile-container {
+        display: flex;
+        flex-direction: column;
         min-height: calc(100vh - 82px);
-        background-color: #341f97;
-        display: grid;
-        grid-template-columns: 1fr 2fr 1fr;
-        grid-template-rows: 0.5fr 1fr 1fr;
-        column-gap: 1em;
-        row-gap: 1em;
-        padding: 3em;
     }
 
-    .profile-card {
+    .main-profile-container {
         background-color: #292f45;
-        border-radius: 6px;
-        box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 10%), 0 0px 0 1px rgb(10 10 10 / 2%);
-        color: #4a4a4a;
-        display: block;
-        padding: 1.25rem;
+        flex: 1;
+    }
+
+    .profile-card {
+        flex: 1;
     }
 
     .profile-card p {
         color: white;
     }
 
-    .profile-stat-card p {
+    .smaller-empty-profile-card {
+        flex: 0.25;
+    }
 
+    .profile-buttons-container {
+        padding: 3em 10em;
+        display: flex;
     }
 </style>
diff --git a/resources/views/root.blade.php b/resources/views/root.blade.php
index 227d782a7..b5a726f53 100644
--- a/resources/views/root.blade.php
+++ b/resources/views/root.blade.php
@@ -5,5 +5,8 @@
         user="{{ $user }}"
         verified="{{ $verified }}"
         unsub="{{ $unsub }}"
+        username="{{ isset($username) ? $username : false }}"
+        public-profile="{{ isset($publicProfile) ? $publicProfile : null }}"
+        user-data="{{ isset($userData) ? $userData : null }}"
     ></Root-Container>
 @stop
diff --git a/routes/web.php b/routes/web.php
index b5ab4bb3e..fb4d2d94c 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -92,7 +92,7 @@
 // Tag litter to an image
 Route::get('tag', 'HomeController@index');
 
-// The users profile
+// The authenticated users profile
 Route::get('profile', 'HomeController@index');
 
 // Get unverified paginated photos for tagging
@@ -121,21 +121,15 @@
 // Delete selected photos
 Route::post('/user/profile/photos/delete', 'User\UserPhotoController@destroy');
 
+// The users profile. Used for Authenticated User and PublicProfile
+Route::get('/user/profile/index', 'User\ProfileController@index');
+Route::get('/user/profile/map', 'User\ProfileController@geojson');
+Route::get('/user/profile/download', 'User\ProfileController@download');
+
 /**
  * USER SETTINGS
  */
-Route::get('/settings', 'HomeController@index');
-Route::get('/settings/password', 'HomeController@index');
-Route::get('/settings/details', 'HomeController@index');
-Route::get('/settings/account', 'HomeController@index');
-Route::get('/settings/payments', 'HomeController@index');
-Route::get('/settings/privacy', 'HomeController@index');
-Route::get('/settings/littercoin', 'HomeController@index');
-Route::get('/settings/phone', 'HomeController@index');
-Route::get('/settings/presence', 'HomeController@index');
-Route::get('/settings/email', 'HomeController@index');
-Route::get('/settings/show-flag', 'HomeController@index');
-Route::get('/settings/teams', 'HomeController@index');
+Route::get('/settings/{route?}', 'HomeController@index');
 
 // Game settings @ SettingsController
 // Toggle Presense of a piece of litter
@@ -185,6 +179,13 @@
 // Save Country Flag for top 10
 Route::post('/settings/save-flag', 'SettingsController@saveFlag');
 
+// Public Profile
+Route::post('/settings/public-profile/toggle', 'User\Settings\PublicProfileController@toggle');
+Route::post('/settings/public-profile/update', 'User\Settings\PublicProfileController@update');
+
+// Social Media
+Route::post('/settings/social-media/update', 'User\Settings\SocialMediaController@update');
+
 // Teams
 Route::get('/teams', 'HomeController@index');
 Route::get('/teams/get-types', 'Teams\TeamsController@types');
@@ -207,11 +208,6 @@
 Route::post('/teams/download', 'Teams\TeamsController@download');
 Route::post('/teams/leaderboard/visibility', 'Teams\TeamsLeaderboardController@toggle')->middleware('auth');
 
-// The users profile
-Route::get('/user/profile/index', 'User\ProfileController@index');
-Route::get('/user/profile/map', 'User\ProfileController@geojson');
-Route::get('/user/profile/download', 'User\ProfileController@download');
-
 // Unsubscribe via email (user not authenticated)
 Route::get('/emails/unsubscribe/{token}', 'EmailSubController@unsubEmail');
 Route::get('/unsubscribe/{token}', 'UsersController@unsubscribeEmail');
@@ -326,3 +322,9 @@
     Route::get('/verify/index', 'Bbox\VerifyBoxController@index');
     Route::post('/verify/update', 'Bbox\VerifyBoxController@update');
 });
+
+// Public Profile Routes
+Route::get('/user/public-profile/map', 'User\PublicProfile\PublicProfileMapController@index');
+
+// Visit public profile of a User with settings on
+Route::get('{username}', 'User\Settings\PublicProfileController@index');