diff --git a/web/satellite/src/api/users.ts b/web/satellite/src/api/users.ts
index d92e84f59..60e54b3b5 100644
--- a/web/satellite/src/api/users.ts
+++ b/web/satellite/src/api/users.ts
@@ -179,5 +179,5 @@ export async function deleteUserAccountRequest(password: string): Promise<any> {
         console.error(e);
     }
 
-	return response;
+    return response;
 }
diff --git a/web/satellite/src/components/dashboard/DashboardHeader.vue b/web/satellite/src/components/dashboard/DashboardHeader.vue
index 8fc414912..64997d979 100644
--- a/web/satellite/src/components/dashboard/DashboardHeader.vue
+++ b/web/satellite/src/components/dashboard/DashboardHeader.vue
@@ -43,8 +43,8 @@ import AccountButton from './account/AccountButton.vue';
         components: {
             ProjectSelectionArea,
             NewProjectArea,
-            AccountButton
-        }
+            AccountButton,
+        },
     }
 )
 
diff --git a/web/satellite/src/components/dashboard/account/AccountArea.vue b/web/satellite/src/components/dashboard/account/AccountArea.vue
index 89393a96f..5089b9570 100644
--- a/web/satellite/src/components/dashboard/account/AccountArea.vue
+++ b/web/satellite/src/components/dashboard/account/AccountArea.vue
@@ -102,9 +102,9 @@
         </div>
         <!--end of Password area -->
         <div class="account-area-button-area">
-            <Button label="Delete account" width="140px" height="50px" :onPress="onDeleteAccountClick" isWhite/>
+            <Button label="Delete account" width="140px" height="50px" :onPress="togglePopup" isWhite/>
         </div>
-        <!-- <DeleteAccontPopup /> -->
+        <DeleteAccountPopup v-if="isPopupShown" :onClose="togglePopup" />
     </div>
 </template>
 
@@ -114,6 +114,7 @@ import Button from '@/components/common/Button.vue';
 import HeaderedInput from '@/components/common/HeaderedInput.vue';
 import Checkbox from '@/components/common/Checkbox.vue';
 import ROUTES from '@/utils/constants/routerConstants';
+import DeleteAccountPopup from '@/components/dashboard/account/DeleteAccountPopup.vue';
 
 @Component(
     {
@@ -144,7 +145,9 @@ import ROUTES from '@/utils/constants/routerConstants';
                 oldPasswordError: '',
                 newPasswordError: '',
                 confirmationPasswordError: '',
-                isPasswordEditing: false
+                isPasswordEditing: false,
+
+                isPopupShown: false
             };
         },
         methods: {
@@ -295,26 +298,16 @@ import ROUTES from '@/utils/constants/routerConstants';
 
                 this.$data.isPasswordEditing = false;
             },
-            onDeleteAccountClick: async function () {
-                // TODO show popup with user confirmation
-                let isSuccess = await this.$store.dispatch('deleteUserAccount');
-                if (!isSuccess) {
-                    // TODO Change to popup
-                    console.error('error while deleting user account');
-
-                    return;
-                }
-
-                // TODO navigate to start route
-                this.$router.push(ROUTES.LOGIN.path);
-            }
+            togglePopup: function(): void {
+                this.$data.isPopupShown = ! this.$data.isPopupShown;
+            },
         },
         components: {
             Button,
             HeaderedInput,
-            Checkbox
+            Checkbox,
+            DeleteAccountPopup
         },
-        computed: {}
     }
 )
 
diff --git a/web/satellite/src/components/dashboard/account/DeleteAccountPopup.vue b/web/satellite/src/components/dashboard/account/DeleteAccountPopup.vue
new file mode 100644
index 000000000..c3c113fdc
--- /dev/null
+++ b/web/satellite/src/components/dashboard/account/DeleteAccountPopup.vue
@@ -0,0 +1,200 @@
+// Copyright (C) 2018 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class='delete-account-container'>
+        <div class='delete-account' >
+            <div class='delete-account__info-panel-container'>
+                <h2 class='delete-account__info-panel-container__main-label-text'>Delete account</h2>
+                <div v-html='imageSource'></div>
+            </div>
+            <div class='delete-account__form-container'>
+                <p>Are you sure that you want to delete your account? All your information, projects, API Keys will be deleted from the Satellite forever.</p>
+                <HeaderedInput 
+                    label='Enter your password' 
+                    placeholder='Your Password'
+                    class='full-input'
+                    width='100%'
+                    isPassword
+                    :error='passwordError'
+                    @setData='setPassword'>
+                </HeaderedInput>
+                <div class='delete-account__form-container__button-container'>
+                    <Button label='Cancel' width='205px' height='48px' :onPress='onClose' isWhite/>
+                    <Button label='Delete' width='205px' height='48px' class='red' :onPress='onDeleteAccountClick'/>
+                </div>
+            </div>
+            <div class='delete-account__close-cross-container'>
+                <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' v-on:click='onClose'>
+                    <path d='M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z' fill='#384B65'/>
+                </svg>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang='ts'>
+import { Component, Vue } from 'vue-property-decorator';
+import HeaderedInput from '@/components/common/HeaderedInput.vue';
+import Button from '@/components/common/Button.vue';
+import { removeToken } from '@/utils/tokenManager';
+import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
+
+@Component(
+    {
+        props: {
+            onClose: Function
+        },
+        data: function() {
+            return {
+                password: '',
+                passwordError: '',
+                imageSource: EMPTY_STATE_IMAGES.DELETE_ACCOUNT,
+            };
+        },
+        methods: {
+            setPassword: function(value: string): void {
+                this.$data.password = value;
+            },
+            onDeleteAccountClick: async function() {
+                let isSuccessDeletion = await this.$store.dispatch('deleteUserAccount', this.$data.password);
+
+                if (!isSuccessDeletion) {
+                    this.$store.dispatch('error', 'Error during account deletion');
+
+                    return;
+                }
+
+                this.$store.dispatch('success', 'Account was successfully deleted');
+                removeToken();
+                this.$router.push('/login');
+            },
+        },
+        components: {
+            HeaderedInput,
+            Button
+        }
+    }
+)
+
+export default class DeleteAccountPopup extends Vue {}
+</script>
+
+<style scoped lang='scss'>
+    .delete-account-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(134, 134, 148, 0.4);
+        z-index: 1121;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .input-container.full-input {
+        width: 100%;
+    }
+    .red {
+        background-color: #EB5757;
+    }
+    .text {
+        margin: 0;
+        margin-bottom: 0 !important;
+        font-family: 'montserrat_regular' !important;
+        font-size: 16px;
+        line-height: 25px;
+    }
+    .delete-account {
+        width: 100%;
+        max-width: 845px;
+        background-color: #FFFFFF;
+        border-radius: 6px;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        position: relative;
+        justify-content: center;
+        padding: 100px 100px 100px 80px;
+
+        &__info-panel-container {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            align-items: center;
+            margin-right: 100px;
+
+            &__main-label-text {
+                font-family: 'montserrat_bold';
+                font-size: 32px;
+                line-height: 39px;
+                color: #384B65;
+                margin-bottom: 60px;
+                margin-top: 0;
+            }
+        }
+
+        &__form-container {
+            width: 100%;
+            max-width: 450px;
+
+            p {
+                margin: 0;
+                margin-bottom: 25px;
+                font-family: 'montserrat_medium';
+                font-size: 16px;
+                line-height: 25px;
+
+                &:nth-child(2) {
+                    margin-top: 20px;
+                }
+            }
+
+            a {
+                font-family: 'montserrat_medium';
+                font-size: 16px;
+                color: #2683FF;
+            }
+
+            &__button-container {
+                width: 100%;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+                margin-top: 30px;
+            }
+        }
+
+        &__close-cross-container {
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            position: absolute;
+            right: 30px;
+            top: 40px;
+            svg {
+                cursor: pointer;
+            }
+        }
+    }
+
+    @media screen and (max-width: 720px) {
+        .delete-account {
+            padding: 10px;
+
+            &__info-panel-container {
+                display: none;
+
+            }
+
+            &__form-container {
+
+                &__button-container {
+                    width: 100%;
+                }
+            }
+        }
+    }
+</style>
diff --git a/web/satellite/src/components/notifications/NotificationArea.vue b/web/satellite/src/components/notifications/NotificationArea.vue
index e16e413c0..0e03c0872 100644
--- a/web/satellite/src/components/notifications/NotificationArea.vue
+++ b/web/satellite/src/components/notifications/NotificationArea.vue
@@ -41,6 +41,6 @@ export default class NotificationArea extends Vue {
         justify-content: space-between;
         box-shadow: 0px 12px 24px rgba(175, 183, 193, 0.4);
         border-radius: 6px;
-        z-index: 999;
+        z-index: 9999;
     }
 </style>
diff --git a/web/satellite/src/utils/constants/emptyStatesImages.ts b/web/satellite/src/utils/constants/emptyStatesImages.ts
index 1b75a2f79..03ac00f5a 100644
--- a/web/satellite/src/utils/constants/emptyStatesImages.ts
+++ b/web/satellite/src/utils/constants/emptyStatesImages.ts
@@ -101,4 +101,37 @@ export const EMPTY_STATE_IMAGES = {
     <path d="M350.452 224.555C349.952 224.555 349.553 224.555 349.154 224.654C348.355 224.754 347.557 224.256 347.257 223.56C337.873 206.543 319.705 195 298.742 195C279.775 195 263.004 204.454 253.121 218.883C252.622 219.579 251.724 219.878 250.925 219.778C248.429 219.281 245.834 218.982 243.239 218.982C223.772 219.082 208 234.605 208 253.91C208 253.91 208 253.91 208 254.01C208 255.104 208.898 256 210.096 256H377.904C379.002 256 380 255.104 380 254.01V253.91C379.8 237.591 366.623 224.555 350.452 224.555Z" fill="#B0B6C9"/>
     <path d="M206 195C210.418 195 214 191.194 214 186.5C214 181.806 210.418 178 206 178C201.582 178 198 181.806 198 186.5C198 191.194 201.582 195 206 195Z" fill="white"/>
     </svg>`,
+    ADD_USER: `<svg width="300" height="233" viewBox="0 0 300 233" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M132.5 233C194.648 233 245 182.632 245 120.5C245 58.3684 194.648 8 132.5 8C70.3519 8 20 58.3684 20 120.5C20 182.632 70.3519 233 132.5 233Z" fill="#2683FF"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.6132 78C17.1086 78 16 76.8122 16 75.3077C16.7127 54.8783 25.3442 36.4284 38.8853 22.8879C52.4264 9.34746 70.8772 0.716397 91.3076 0.00374127C92.8122 -0.0754427 94 1.11232 94 2.61681V25.8177C94 27.243 92.8914 28.3516 91.466 28.4308C78.7959 29.0643 67.3929 34.528 58.9198 42.9215C50.5259 51.3942 45.0619 62.7967 44.4284 75.4661C44.3492 76.8914 43.2406 78 41.8152 78H18.6132Z" fill="#DEDEFC"/>
+    <path d="M92.5 24C97.7467 24 102 19.9706 102 15C102 10.0294 97.7467 6 92.5 6C87.2533 6 83 10.0294 83 15C83 19.9706 87.2533 24 92.5 24Z" fill="#499FFC"/>
+    <path d="M89 77C91.7614 77 94 74.7614 94 72C94 69.2386 91.7614 67 89 67C86.2386 67 84 69.2386 84 72C84 74.7614 86.2386 77 89 77Z" fill="#6CB9FF"/>
+    <path d="M12.0004 223C18.5808 223 24 217.15 24 210C24 202.85 18.5808 197 12.0004 197C5.41999 197 0.000819275 202.85 0.000819275 210C-0.0765974 217.231 5.34257 223 12.0004 223Z" fill="#499FFC"/>
+    <path d="M12.5 216C15.4857 216 18 213.564 18 210.5C18 207.514 15.5643 205 12.5 205C9.51429 205 7 207.436 7 210.5C7 213.564 9.43571 216 12.5 216Z" fill="white"/>
+    <path d="M222.642 88H242.358C244.337 88 246 86.4091 246 84.5C246 82.5909 244.337 81 242.358 81H222.642C220.663 81 219 82.5909 219 84.5C219 86.4091 220.663 88 222.642 88Z" fill="white"/>
+    <path d="M222.726 74H228.274C230.335 74 232 72.24 232 70C232 67.76 230.335 66 228.274 66H222.726C220.665 66 219 67.76 219 70C219 72.24 220.585 74 222.726 74Z" fill="white"/>
+    <path d="M199.726 73H205.274C207.335 73 209 71.6364 209 70C209 68.3636 207.335 67 205.274 67H199.726C197.665 67 196 68.3636 196 70C196 71.6364 197.665 73 199.726 73Z" fill="#0F002D"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M35.5 131C38.5 131 41 128.5 41 125.5C41 122.5 38.5 120 35.5 120C32.5 120 30 122.5 30 125.5C30 128.5 32.5 131 35.5 131Z" fill="#6CB9FF"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M171.5 183C174.5 183 177 180.5 177 177.5C177 174.5 174.5 172 171.5 172C168.5 172 166 174.5 166 177.5C166 180.5 168.5 183 171.5 183Z" fill="#2683FF"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 112C23.5 112 26 109.727 26 107C26 104.273 23.5 102 20.5 102C17.5 102 15 104.273 15 107C15 109.727 17.5 112 20.5 112Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M35.5 112C38.5 112 41 109.727 41 107C41 104.273 38.5 102 35.5 102C32.5 102 30 104.273 30 107C30 109.727 32.5 112 35.5 112Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M50.5 112C53.5 112 56 109.727 56 107C56 104.273 53.5 102 50.5 102C47.5 102 45 104.273 45 107C45 109.727 47.5 112 50.5 112Z" fill="white"/>
+    <path d="M84.7279 102.263C84.7279 102.263 120.108 93.3561 157.458 98.7163C167.938 100.214 177.315 106.362 182.989 115.349C193.232 131.508 207.652 160.359 204.579 190.47L188.504 194.412C188.504 194.412 177.394 158.703 164.944 144.199C164.944 144.199 150.13 177.937 150.918 196.461C150.918 197.013 150.997 197.486 150.997 197.959C152.73 216.089 80 201.348 80 201.348L84.7279 102.263Z" fill="white"/>
+    <path d="M113 71.2548L114.598 96.3443C114.757 98.7112 116.275 100.684 118.432 101.315C123.384 102.735 132.729 104.471 141.835 100.841C143.512 100.21 144.391 98.2378 143.832 96.4232L131.691 58L113 71.2548Z" fill="#CECEEF"/>
+    <path d="M149 48.3559C149 48.3559 147.011 67.5992 142.874 75.9832C138.738 84.3672 137.544 90.5953 127.282 86.9223C117.02 83.2493 111.769 74.1467 112.008 63.6068C112.008 63.6068 112.326 47.3179 116.701 43.086C121.156 38.854 149 48.3559 149 48.3559Z" fill="#DEDEFC"/>
+    <path d="M118.611 59.455L119.805 60.0764C119.805 60.0764 120.601 47.6474 125.854 48.2688C131.107 48.8903 150.05 54.8717 157.134 50.9877C163.899 47.2589 150.766 34.6745 141.772 31.7226C129.037 27.4502 118.77 27.8386 114.074 35.529C113.756 35.9951 113.119 35.9951 112.801 35.529C112.243 34.5192 101.021 42.365 104.762 51.7645C104.921 52.2306 109.458 65.5918 110.731 65.9802C111.05 66.0579 111.448 65.9025 111.607 65.5918L115.188 58.4451C115.348 58.0567 115.825 57.9013 116.223 58.1344L118.611 59.455Z" fill="#0F002D"/>
+    <path d="M118.183 61.2712C118.183 61.2712 121.407 49.7606 115.044 50.0038C108.68 50.247 110.886 62.5682 114.45 65L118.183 61.2712Z" fill="#DEDEFC"/>
+    <path d="M84.2644 174.516C82.6933 163.42 94.1627 147.015 98.8762 140.833C100.212 139.09 100.997 136.871 100.997 134.652C101.154 118.881 94.5555 108.736 84.0288 102C84.0288 102 45.8496 146.857 55.5908 181.331C56.6121 185.056 58.2618 188.226 60.3043 191C61.8754 177.923 76.8014 175.15 84.2644 174.516Z" fill="white"/>
+    <path d="M85.4975 170L84 169.84C85.2611 158.83 94.798 145.266 98.8177 140L100 140.878C96.0591 146.064 86.7586 159.388 85.4975 170Z" fill="#0F002D"/>
+    <path d="M84.6744 175.535C84.5147 175.051 84.4348 174.485 84.355 174C76.6892 174.646 61.597 177.475 60 190.728C77.328 213.92 125 205.516 125 205.516V196.465C125.08 196.546 88.4275 189.677 84.6744 175.535Z" fill="#DEDEFC"/>
+    <path d="M120 203C120 203 127.045 186.351 139.534 192.274C151.943 198.197 150.983 202.039 150.983 202.039L120 203Z" fill="#DEDEFC"/>
+    <path d="M214.211 188H107.789C105.737 188 104 186.26 104 184.203V110.797C104 108.74 105.737 107 107.789 107H214.211C216.263 107 218 108.74 218 110.797V184.203C218 186.26 216.342 188 214.211 188Z" fill="#0F002D"/>
+    <path d="M171.324 204H154.673C152.632 204 151 202.417 151 200.437V150.562C151 148.583 152.632 147 154.673 147H171.324C173.365 147 174.997 148.583 174.997 150.562V200.437C175.079 202.337 173.365 204 171.324 204Z" fill="#0F002D"/>
+    <path d="M194.773 201H119.227C118.034 201 117 202.083 117 203.333V204.667C117 205.917 118.034 207 119.227 207H194.773C195.966 207 197 205.917 197 204.667V203.333C197 202.083 196.046 201 194.773 201Z" fill="#0F002D"/>
+    <path d="M276.636 177.256C276.241 177.256 275.926 177.256 275.61 177.334C274.979 177.413 274.347 177.021 274.11 176.473C266.691 163.083 252.325 154 235.749 154C220.752 154 207.492 161.439 199.677 172.793C199.283 173.341 198.572 173.576 197.941 173.498C195.967 173.106 193.915 172.871 191.863 172.871C176.471 172.949 164 185.165 164 200.356C164 200.356 164 200.356 164 200.434C164 201.295 164.71 202 165.658 202H298.342C299.211 202 300 201.295 300 200.434V200.356C299.842 187.514 289.423 177.256 276.636 177.256Z" fill="#DEDEFC"/>
+    <path d="M162.5 154C166.09 154 169 151.09 169 147.5C169 143.91 166.09 141 162.5 141C158.91 141 156 143.91 156 147.5C156 151.09 158.91 154 162.5 154Z" fill="white"/>
+    </svg>`,
+    DELETE_USER: `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.7803 1.28033C12.0732 0.987437 12.0732 0.512563 11.7803 0.21967C11.4874 -0.0732233 11.0126 -0.0732233 10.7197 0.21967L11.7803 1.28033ZM0.21967 10.7197C-0.0732233 11.0126 -0.0732233 11.4874 0.21967 11.7803C0.512563 12.0732 0.987437 12.0732 1.28033 11.7803L0.21967 10.7197ZM1.28033 0.21967C0.987437 -0.0732233 0.512563 -0.0732233 0.21967 0.21967C-0.0732233 0.512563 -0.0732233 0.987437 0.21967 1.28033L1.28033 0.21967ZM10.7197 11.7803C11.0126 12.0732 11.4874 12.0732 11.7803 11.7803C12.0732 11.4874 12.0732 11.0126 11.7803 10.7197L10.7197 11.7803ZM10.7197 0.21967L0.21967 10.7197L1.28033 11.7803L11.7803 1.28033L10.7197 0.21967ZM0.21967 1.28033L10.7197 11.7803L11.7803 10.7197L1.28033 0.21967L0.21967 1.28033Z" fill="#AFB7C1"/>
+    </svg>`,
 };
diff --git a/web/satellite/src/utils/entities/DelayedNotification.ts b/web/satellite/src/utils/entities/DelayedNotification.ts
index b90b68112..0f2c20a60 100644
--- a/web/satellite/src/utils/entities/DelayedNotification.ts
+++ b/web/satellite/src/utils/entities/DelayedNotification.ts
@@ -1,6 +1,8 @@
 // Copyright (C) 2018 Storj Labs, Inc.
 // See LICENSE for copying information.
 
+import { getId } from '@/utils/idGenerator';
+
 export class DelayedNotification {
 	public type: string;
 	public message: string;
@@ -10,14 +12,14 @@ export class DelayedNotification {
 	private remainingTime: any;
 	private callback: Function;
 
-	constructor(callback: Function, type: string, message: string) {
-		this.callback = callback;
-		this.type = type;
-		this.message = message;
-		this.id = Date.now().toString();
-		this.remainingTime = 3000;
-		this.start();
-	}
+    constructor(callback: Function, type: string, message: string) {
+        this.callback = callback;
+        this.type = type;
+        this.message = message;
+        this.id = getId();
+        this.remainingTime = 3000;
+        this.start();
+    }
 
 	public pause(): void {
 		clearTimeout(this.timerId);