diff --git a/dapp/src/App.svelte b/dapp/src/App.svelte
index b552bb2b..72bed019 100644
--- a/dapp/src/App.svelte
+++ b/dapp/src/App.svelte
@@ -63,6 +63,58 @@
   .body2 {
     @apply text-base;
   }
+  .table-font {
+    @apply text-white;
+  }
+  [data-tooltip] {
+    @apply relative z-2 block;
+  }
+
+  [data-tooltip]:before,
+  [data-tooltip]:after {
+    @apply invisible opacity-0 pointer-events-none;
+  }
+
+  [data-tooltip]:before,
+  [data-tooltip]:after {
+    transition: 0.2s ease-out;
+    transform: translate(-50%, 5px);
+  }
+
+  [data-tooltip]:before {
+    @apply absolute bottom-full left-2/4 mb-5px p-7px w-full rounded-3px max-w-100 w-full min-w-32.5 bg-black bg-opacity-90 bg-dark-3 text-white text-center text-sm leading-tight break-normal break-words;
+  }
+
+  [data-tooltip]:before {
+    content: attr(data-tooltip);
+    transition: 0.2s ease-out;
+  }
+
+  [data-tooltip]:after {
+    @apply absolute bottom-full left-2/4 w-0 border-solid border-t-5px border-r-5px border-l-5px;
+  }
+
+  [data-tooltip]:after {    
+    content: ' ';    
+    font-size: 0;
+    line-height: 0;
+    border-left-color: transparent;
+    border-right-color: transparent;
+    border-top-color: rgba(51, 51, 51, 0.9);
+  }
+
+  [data-tooltip]:hover:before,
+  [data-tooltip]:hover:after {
+    @apply visible opacity-100;
+  }
+  [data-tooltip]:hover:before,
+  [data-tooltip]:hover:after {
+    transform: translate(-50%, 0);
+  }
+  [data-tooltip='false']:hover:before,
+  [data-tooltip='false']:hover:after {
+    @apply opacity-0 invisible;
+  }
 </style>
 
 <script lang="ts">
diff --git a/dapp/src/components/buttons/Tooltip.svelte b/dapp/src/components/buttons/Tooltip.svelte
index 08dc2a1e..a6e8d2ae 100644
--- a/dapp/src/components/buttons/Tooltip.svelte
+++ b/dapp/src/components/buttons/Tooltip.svelte
@@ -1,70 +1,3 @@
-<style>
-  [data-tooltip] {
-    position: relative;
-    z-index: 2;
-    display: block;
-  }
-
-  [data-tooltip]:before,
-  [data-tooltip]:after {
-    visibility: hidden;
-    opacity: 0;
-    pointer-events: none;
-    transition: 0.2s ease-out;
-    transform: translate(-50%, 5px);
-  }
-
-  [data-tooltip]:before {
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    margin-bottom: 5px;
-    padding: 7px;
-    width: 100%;
-    min-width: 130px;
-    max-width: 400px;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    background-color: #000;
-    background-color: hsla(0, 0%, 20%, 0.9);
-    color: #fff;
-    content: attr(data-tooltip);
-    text-align: center;
-    font-size: 14px;
-    line-height: 1.2;
-    transition: 0.2s ease-out;
-    word-break: normal;
-    overflow-wrap: break-word;
-  }
-
-  [data-tooltip]:after {
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    width: 0;
-    border-top: 5px solid #000;
-    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
-    border-right: 5px solid transparent;
-    border-left: 5px solid transparent;
-    content: ' ';
-    font-size: 0;
-    line-height: 0;
-  }
-
-  [data-tooltip]:hover:before,
-  [data-tooltip]:hover:after {
-    visibility: visible;
-    opacity: 1;
-    transform: translate(-50%, 0);
-  }
-  [data-tooltip='false']:hover:before,
-  [data-tooltip='false']:hover:after {
-    visibility: hidden;
-    opacity: 0;
-  }
-</style>
-
 <script lang="ts">
   export let tooltip: string = '';
   export { clazz as class };
diff --git a/dapp/src/components/claims/ClaimIcon.svelte b/dapp/src/components/claims/ClaimIcon.svelte
index dc069766..c0f604de 100644
--- a/dapp/src/components/claims/ClaimIcon.svelte
+++ b/dapp/src/components/claims/ClaimIcon.svelte
@@ -1,68 +1,3 @@
-<style>
-  [data-tooltip] {
-    position: relative;
-    z-index: 2;
-    display: block;
-  }
-
-  [data-tooltip]:before,
-  [data-tooltip]:after {
-    visibility: hidden;
-    opacity: 0;
-    pointer-events: none;
-    transition: 0.2s ease-out;
-    transform: translate(-50%, 5px);
-  }
-
-  [data-tooltip]:before {
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    margin-bottom: 5px;
-    padding: 7px;
-    width: 100%;
-    min-width: 130px;
-    max-width: 400px;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    background-color: #000;
-    background-color: hsla(0, 0%, 20%, 0.9);
-    color: #fff;
-    content: attr(data-tooltip);
-    text-align: center;
-    font-size: 14px;
-    line-height: 1.2;
-    transition: 0.2s ease-out;
-  }
-
-  [data-tooltip]:after {
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    width: 0;
-    border-top: 5px solid #000;
-    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
-    border-right: 5px solid transparent;
-    border-left: 5px solid transparent;
-    content: ' ';
-    font-size: 0;
-    line-height: 0;
-  }
-
-  [data-tooltip]:hover:before,
-  [data-tooltip]:hover:after {
-    visibility: visible;
-    opacity: 1;
-    transform: translate(-50%, 0);
-  }
-  [data-tooltip='false']:hover:before,
-  [data-tooltip='false']:hover:after {
-    visibility: hidden;
-    opacity: 0;
-  }
-</style>
-
 <script lang="ts">
   import { claimToOutlink } from 'src/helpers';
   import { selectIconCopyText } from 'src/components/page/view/publicProfileViewHelper';
diff --git a/dapp/src/components/form/Input.scss b/dapp/src/components/form/Input.scss
index b5420144..193ada8e 100644
--- a/dapp/src/components/form/Input.scss
+++ b/dapp/src/components/form/Input.scss
@@ -8,4 +8,10 @@
     #enter-twitter-handle {
         @apply pl-7;
     }
+    .state-container {
+        @apply bg-gray-1;
+    }
+    .state-container-border {
+        @apply border-1.5px border-solid border-gray-1;
+    }
 }
diff --git a/dapp/src/components/form/VerificationStep.svelte b/dapp/src/components/form/VerificationStep.svelte
index c6f9733e..6ae9c897 100644
--- a/dapp/src/components/form/VerificationStep.svelte
+++ b/dapp/src/components/form/VerificationStep.svelte
@@ -1,14 +1,5 @@
-<style>
-  .state-container {
-    background-color: rgb(224, 224, 224);
-  }
-
-  .state-container-border {
-    border: 1.5px solid rgb(224, 224, 224);
-  }
-</style>
-
 <script lang="ts">
+  import './Input.scss';
   import { CheckIcon, SpinnerIcon, ErrorIcon } from 'components';
   export let step: number;
   export let currentStep: number;
diff --git a/dapp/src/components/modals/FileModal.scss b/dapp/src/components/modals/FileModal.scss
new file mode 100644
index 00000000..7027e212
--- /dev/null
+++ b/dapp/src/components/modals/FileModal.scss
@@ -0,0 +1,8 @@
+@layer components {
+  .bg {
+    @apply absolute w-full h-full top-0 left-0 bg-opacity-50 bg-dark-2;
+  }
+  .modal-container {
+    @apply bg-white max-h-80vh overflow-auto mx-4 py-10 px-5;
+  }
+}
diff --git a/dapp/src/components/modals/FileModal.svelte b/dapp/src/components/modals/FileModal.svelte
index 8c7a54a4..e3209c0a 100644
--- a/dapp/src/components/modals/FileModal.svelte
+++ b/dapp/src/components/modals/FileModal.svelte
@@ -1,24 +1,5 @@
-<style>
-  .bg {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    background-color: rgba(5, 5, 5, 0.5);
-  }
-
-  .modal-container {
-    background-color: white;
-    max-height: 80vh;
-    overflow: auto;
-    margin-left: 16px;
-    margin-right: 16px;
-    padding: 40px 20px;
-  }
-</style>
-
 <script lang="ts">
+  import './FileModal.scss';
   import {
     CloseIcon
   } from 'components/icons';
diff --git a/dapp/src/routes/PrivacyPolicy.scss b/dapp/src/routes/PrivacyPolicy.scss
new file mode 100644
index 00000000..50436bad
--- /dev/null
+++ b/dapp/src/routes/PrivacyPolicy.scss
@@ -0,0 +1,167 @@
+ul.lst-kix_77iyj6qm6h9l-0 {
+  list-style-type: none;
+}
+.lst-kix_ggc1sghzlom9-0 > li:before {
+  content: '\0025cf  ';
+}
+ul.lst-kix_il4zdrxztb1p-0 {
+  list-style-type: none;
+}
+ul.lst-kix_f7jlosydnf99-0 {
+  list-style-type: none;
+}
+.lst-kix_il4zdrxztb1p-0 > li:before {
+  content: '\0025cf  ';
+}
+.lst-kix_77iyj6qm6h9l-0 > li:before {
+  content: '\0025cf  ';
+}
+ul.lst-kix_ggc1sghzlom9-0 {
+  list-style-type: none;
+}
+li.li-bullet-0:before {
+  margin-left: -18pt;
+  white-space: nowrap;
+  display: inline-block;
+  min-width: 18pt;
+}
+.lst-kix_f7jlosydnf99-0 > li:before {
+  content: '\0025cf  ';
+}
+.c15 {
+  padding-top: 0pt;
+  padding-bottom: 0pt;
+  line-height: 1.15;
+  orphans: 2;
+  widows: 2;
+  text-align: left;
+  height: 11pt;
+}
+.c1 {
+  color: #000000;
+  font-weight: 400;
+  text-decoration: none;
+  vertical-align: baseline;
+  font-size: 10pt;
+  font-family: 'Arial';
+  font-style: normal;
+}
+.c7 {
+  padding-top: 8pt;
+  padding-bottom: 8pt;
+  line-height: 1.2;
+  orphans: 2;
+  widows: 2;
+  text-align: left;
+}
+.c10 {
+  color: #000000;
+  font-weight: 400;
+  text-decoration: none;
+  vertical-align: baseline;
+  font-size: 11pt;
+  font-family: 'Arial';
+  font-style: normal;
+}
+.c2 {
+  padding-top: 0pt;
+  padding-bottom: 8pt;
+  line-height: 1.5;
+  orphans: 2;
+  widows: 2;
+  text-align: left;
+}
+.c8 {
+  color: #222222;
+  font-weight: 700;
+  text-decoration: none;
+  vertical-align: baseline;
+  font-size: 24pt;
+  font-family: 'Arial';
+  font-style: normal;
+}
+.c3 {
+  padding-top: 0pt;
+  padding-bottom: 0pt;
+  line-height: 1.5;
+  orphans: 2;
+  widows: 2;
+  text-align: left;
+}
+.c11 {
+  color: #000000;
+  text-decoration: none;
+  vertical-align: baseline;
+  font-family: 'Arial';
+  font-style: normal;
+}
+.c12 {
+  color: #000000;
+  text-decoration: none;
+  vertical-align: baseline;
+  font-family: 'Arial';
+  font-style: italic;
+}
+.c19 {
+  color: #222222;
+  text-decoration: none;
+  vertical-align: baseline;
+  font-family: 'Arial';
+  font-style: normal;
+}
+.c9 {
+  font-size: 24pt;
+  color: #222222;
+  font-weight: 700;
+}
+.c0 {
+  font-size: 10pt;
+  font-weight: 700;
+}
+.c13 {
+  padding: 0;
+  margin: 0;
+}
+.c5 {
+  margin-left: 36pt;
+  padding-left: 0pt;
+}
+.c20 {
+  font-weight: 700;
+  font-size: 42pt;
+}
+.c4 {
+  font-size: 10pt;
+}
+.c16 {
+  font-weight: 400;
+}
+.c14 {
+  font-style: italic;
+}
+.c17 {
+  height: 11pt;
+}
+li {
+  color: #000000;
+  font-size: 11pt;
+  font-family: 'Arial';
+}
+p {
+  margin: 0;
+  color: #000000;
+  font-size: 11pt;
+  font-family: 'Arial';
+}
+h4 {
+  padding-top: 14pt;
+  color: #222222;
+  font-size: 12pt;
+  padding-bottom: 4pt;
+  font-family: 'Arial';
+  line-height: 1.15;
+  page-break-after: avoid;
+  orphans: 2;
+  widows: 2;
+  text-align: left;
+}
diff --git a/dapp/src/routes/PrivacyPolicy.svelte b/dapp/src/routes/PrivacyPolicy.svelte
index a919d91c..acb3d50c 100644
--- a/dapp/src/routes/PrivacyPolicy.svelte
+++ b/dapp/src/routes/PrivacyPolicy.svelte
@@ -1,176 +1,7 @@
-<style type="text/css">
-  ul.lst-kix_77iyj6qm6h9l-0 {
-    list-style-type: none;
-  }
-  .lst-kix_ggc1sghzlom9-0 > li:before {
-    content: '\0025cf  ';
-  }
-  ul.lst-kix_il4zdrxztb1p-0 {
-    list-style-type: none;
-  }
-  ul.lst-kix_f7jlosydnf99-0 {
-    list-style-type: none;
-  }
-  .lst-kix_il4zdrxztb1p-0 > li:before {
-    content: '\0025cf  ';
-  }
-  .lst-kix_77iyj6qm6h9l-0 > li:before {
-    content: '\0025cf  ';
-  }
-  ul.lst-kix_ggc1sghzlom9-0 {
-    list-style-type: none;
-  }
-  li.li-bullet-0:before {
-    margin-left: -18pt;
-    white-space: nowrap;
-    display: inline-block;
-    min-width: 18pt;
-  }
-  .lst-kix_f7jlosydnf99-0 > li:before {
-    content: '\0025cf  ';
-  }
-  .c15 {
-    padding-top: 0pt;
-    padding-bottom: 0pt;
-    line-height: 1.15;
-    orphans: 2;
-    widows: 2;
-    text-align: left;
-    height: 11pt;
-  }
-  .c1 {
-    color: #000000;
-    font-weight: 400;
-    text-decoration: none;
-    vertical-align: baseline;
-    font-size: 10pt;
-    font-family: 'Arial';
-    font-style: normal;
-  }
-  .c7 {
-    padding-top: 8pt;
-    padding-bottom: 8pt;
-    line-height: 1.2;
-    orphans: 2;
-    widows: 2;
-    text-align: left;
-  }
-  .c10 {
-    color: #000000;
-    font-weight: 400;
-    text-decoration: none;
-    vertical-align: baseline;
-    font-size: 11pt;
-    font-family: 'Arial';
-    font-style: normal;
-  }
-  .c2 {
-    padding-top: 0pt;
-    padding-bottom: 8pt;
-    line-height: 1.5;
-    orphans: 2;
-    widows: 2;
-    text-align: left;
-  }
-  .c8 {
-    color: #222222;
-    font-weight: 700;
-    text-decoration: none;
-    vertical-align: baseline;
-    font-size: 24pt;
-    font-family: 'Arial';
-    font-style: normal;
-  }
-  .c3 {
-    padding-top: 0pt;
-    padding-bottom: 0pt;
-    line-height: 1.5;
-    orphans: 2;
-    widows: 2;
-    text-align: left;
-  }
-  .c11 {
-    color: #000000;
-    text-decoration: none;
-    vertical-align: baseline;
-    font-family: 'Arial';
-    font-style: normal;
-  }
-  .c12 {
-    color: #000000;
-    text-decoration: none;
-    vertical-align: baseline;
-    font-family: 'Arial';
-    font-style: italic;
-  }
-  .c19 {
-    color: #222222;
-    text-decoration: none;
-    vertical-align: baseline;
-    font-family: 'Arial';
-    font-style: normal;
-  }
-  .c9 {
-    font-size: 24pt;
-    color: #222222;
-    font-weight: 700;
-  }
-  .c0 {
-    font-size: 10pt;
-    font-weight: 700;
-  }
-  .c13 {
-    padding: 0;
-    margin: 0;
-  }
-  .c5 {
-    margin-left: 36pt;
-    padding-left: 0pt;
-  }
-  .c20 {
-    font-weight: 700;
-    font-size: 42pt;
-  }
-  .c4 {
-    font-size: 10pt;
-  }
-  .c16 {
-    font-weight: 400;
-  }
-  .c14 {
-    font-style: italic;
-  }
-  .c17 {
-    height: 11pt;
-  }
-  li {
-    color: #000000;
-    font-size: 11pt;
-    font-family: 'Arial';
-  }
-  p {
-    margin: 0;
-    color: #000000;
-    font-size: 11pt;
-    font-family: 'Arial';
-  }
-  h4 {
-    padding-top: 14pt;
-    color: #222222;
-    font-size: 12pt;
-    padding-bottom: 4pt;
-    font-family: 'Arial';
-    line-height: 1.15;
-    page-break-after: avoid;
-    orphans: 2;
-    widows: 2;
-    text-align: left;
-  }
-</style>
-
 <script lang="ts">
   /* eslint-disable */
   import { BasePage } from 'components';
+  import './PrivacyPolicy.scss';
 </script>
 
 <BasePage class="flex flex-col 2xl:px-32 sm:px-8 px-4">
diff --git a/dapp/src/routes/TermsOfService.scss b/dapp/src/routes/TermsOfService.scss
new file mode 100644
index 00000000..52ccac9b
--- /dev/null
+++ b/dapp/src/routes/TermsOfService.scss
@@ -0,0 +1,202 @@
+.lst-kix_4ubjrbd9m6k1-0>li:before {
+  content: ''counter(lst-ctn-kix_4ubjrbd9m6k1-0, decimal) '. ';
+}
+
+ol.lst-kix_vkgcwtejarco-0 {
+  list-style-type: none;
+}
+
+ol.lst-kix_4ubjrbd9m6k1-0.start {
+  counter-reset: lst-ctn-kix_4ubjrbd9m6k1-0 0;
+}
+
+.lst-kix_vkgcwtejarco-0>li {
+  counter-increment: lst-ctn-kix_vkgcwtejarco-0;
+}
+
+ol.lst-kix_vkgcwtejarco-0.start {
+  counter-reset: lst-ctn-kix_vkgcwtejarco-0 0;
+}
+
+.lst-kix_4ubjrbd9m6k1-0>li {
+  counter-increment: lst-ctn-kix_4ubjrbd9m6k1-0;
+}
+
+.lst-kix_vkgcwtejarco-0>li:before {
+  content: ''counter(lst-ctn-kix_vkgcwtejarco-0, decimal) '. ';
+}
+
+li.li-bullet-0:before {
+  margin-left: -18pt;
+  white-space: nowrap;
+  display: inline-block;
+  min-width: 18pt;
+}
+
+ol.lst-kix_4ubjrbd9m6k1-0 {
+  list-style-type: none;
+}
+
+ol {
+  margin: 0;
+  padding: 0;
+}
+
+.c20 {
+  margin-left: 36pt;
+  padding-top: 0pt;
+  padding-left: 0pt;
+  padding-bottom: 0pt;
+  line-height: 1.1500022727272727;
+  orphans: 2;
+  widows: 2;
+  text-align: left;
+}
+
+.c3 {
+  margin-left: 36pt;
+  padding-top: 12pt;
+  padding-left: 0pt;
+  padding-bottom: 0pt;
+  line-height: 1.5;
+  orphans: 2;
+  widows: 2;
+  text-align: left;
+}
+
+.c4 {
+  color: #134f5c;
+  font-weight: 700;
+  text-decoration: none;
+  vertical-align: baseline;
+  font-size: 24pt;
+  font-family: 'Arial';
+  font-style: normal;
+}
+
+.c7 {
+  color: #000000;
+  font-weight: 400;
+  text-decoration: none;
+  vertical-align: baseline;
+  font-size: 10.5pt;
+  font-family: 'Arial';
+  font-style: normal;
+}
+
+.c2 {
+  color: #134f5c;
+  font-weight: 700;
+  text-decoration: none;
+  vertical-align: baseline;
+  font-size: 42pt;
+  font-family: 'Arial';
+  font-style: normal;
+}
+
+.c0 {
+  padding-top: 0pt;
+  padding-bottom: 0pt;
+  line-height: 1.15;
+  orphans: 2;
+  widows: 2;
+  text-align: left;
+  height: 11pt;
+}
+
+.c13 {
+  padding-top: 0pt;
+  padding-bottom: 0pt;
+  line-height: 1.15;
+  orphans: 2;
+  widows: 2;
+  text-align: left;
+}
+
+.c19 {
+  color: #000000;
+  font-weight: 400;
+  text-decoration: none;
+  vertical-align: baseline;
+  font-family: 'Arial';
+  font-style: italic;
+}
+
+.c5 {
+  padding-top: 0pt;
+  padding-bottom: 0pt;
+  line-height: 1.5;
+  orphans: 2;
+  widows: 2;
+  text-align: left;
+}
+
+.c8 {
+  color: #000000;
+  font-weight: 700;
+  text-decoration: none;
+  vertical-align: baseline;
+  font-family: 'Arial';
+  font-style: normal;
+}
+
+.c9 {
+  color: #000000;
+  font-weight: 400;
+  text-decoration: none;
+  vertical-align: baseline;
+  font-family: 'Arial';
+  font-style: normal;
+}
+
+.c15 {
+  padding: 0;
+  margin: 0;
+}
+
+.c21 {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+.c18 {
+  margin-left: 54pt;
+  text-indent: -18pt;
+}
+
+.c10 {
+  font-size: 18pt;
+}
+
+.c6 {
+  height: 11pt;
+}
+
+.c1 {
+  font-size: 10pt;
+}
+
+.c12 {
+  font-weight: 700;
+}
+
+.c17 {
+  font-size: 10.5pt;
+}
+
+.c11 {
+  font-size: 12pt;
+}
+
+li {
+  color: #000000;
+  font-size: 11pt;
+  font-family: 'Arial';
+}
+
+p {
+  margin: 0;
+  color: #000000;
+  font-size: 11pt;
+  font-family: 'Arial';
+}
diff --git a/dapp/src/routes/TermsOfService.svelte b/dapp/src/routes/TermsOfService.svelte
index 9fd85a8b..106ba156 100644
--- a/dapp/src/routes/TermsOfService.svelte
+++ b/dapp/src/routes/TermsOfService.svelte
@@ -1,180 +1,7 @@
-<style type="text/css">
-  .lst-kix_4ubjrbd9m6k1-0 > li:before {
-    content: '' counter(lst-ctn-kix_4ubjrbd9m6k1-0, decimal) '. ';
-  }
-  ol.lst-kix_vkgcwtejarco-0 {
-    list-style-type: none;
-  }
-  ol.lst-kix_4ubjrbd9m6k1-0.start {
-    counter-reset: lst-ctn-kix_4ubjrbd9m6k1-0 0;
-  }
-  .lst-kix_vkgcwtejarco-0 > li {
-    counter-increment: lst-ctn-kix_vkgcwtejarco-0;
-  }
-  ol.lst-kix_vkgcwtejarco-0.start {
-    counter-reset: lst-ctn-kix_vkgcwtejarco-0 0;
-  }
-  .lst-kix_4ubjrbd9m6k1-0 > li {
-    counter-increment: lst-ctn-kix_4ubjrbd9m6k1-0;
-  }
-  .lst-kix_vkgcwtejarco-0 > li:before {
-    content: '' counter(lst-ctn-kix_vkgcwtejarco-0, decimal) '. ';
-  }
-  li.li-bullet-0:before {
-    margin-left: -18pt;
-    white-space: nowrap;
-    display: inline-block;
-    min-width: 18pt;
-  }
-  ol.lst-kix_4ubjrbd9m6k1-0 {
-    list-style-type: none;
-  }
-  ol {
-    margin: 0;
-    padding: 0;
-  }
-  .c20 {
-    margin-left: 36pt;
-    padding-top: 0pt;
-    padding-left: 0pt;
-    padding-bottom: 0pt;
-    line-height: 1.1500022727272727;
-    orphans: 2;
-    widows: 2;
-    text-align: left;
-  }
-  .c3 {
-    margin-left: 36pt;
-    padding-top: 12pt;
-    padding-left: 0pt;
-    padding-bottom: 0pt;
-    line-height: 1.5;
-    orphans: 2;
-    widows: 2;
-    text-align: left;
-  }
-  .c4 {
-    color: #134f5c;
-    font-weight: 700;
-    text-decoration: none;
-    vertical-align: baseline;
-    font-size: 24pt;
-    font-family: 'Arial';
-    font-style: normal;
-  }
-  .c7 {
-    color: #000000;
-    font-weight: 400;
-    text-decoration: none;
-    vertical-align: baseline;
-    font-size: 10.5pt;
-    font-family: 'Arial';
-    font-style: normal;
-  }
-  .c2 {
-    color: #134f5c;
-    font-weight: 700;
-    text-decoration: none;
-    vertical-align: baseline;
-    font-size: 42pt;
-    font-family: 'Arial';
-    font-style: normal;
-  }
-  .c0 {
-    padding-top: 0pt;
-    padding-bottom: 0pt;
-    line-height: 1.15;
-    orphans: 2;
-    widows: 2;
-    text-align: left;
-    height: 11pt;
-  }
-  .c13 {
-    padding-top: 0pt;
-    padding-bottom: 0pt;
-    line-height: 1.15;
-    orphans: 2;
-    widows: 2;
-    text-align: left;
-  }
-  .c19 {
-    color: #000000;
-    font-weight: 400;
-    text-decoration: none;
-    vertical-align: baseline;
-    font-family: 'Arial';
-    font-style: italic;
-  }
-  .c5 {
-    padding-top: 0pt;
-    padding-bottom: 0pt;
-    line-height: 1.5;
-    orphans: 2;
-    widows: 2;
-    text-align: left;
-  }
-  .c8 {
-    color: #000000;
-    font-weight: 700;
-    text-decoration: none;
-    vertical-align: baseline;
-    font-family: 'Arial';
-    font-style: normal;
-  }
-  .c9 {
-    color: #000000;
-    font-weight: 400;
-    text-decoration: none;
-    vertical-align: baseline;
-    font-family: 'Arial';
-    font-style: normal;
-  }
-  .c15 {
-    padding: 0;
-    margin: 0;
-  }
-  .c21 {
-    color: inherit;
-    text-decoration: inherit;
-  }
-  .c18 {
-    margin-left: 54pt;
-    text-indent: -18pt;
-  }
-  .c10 {
-    font-size: 18pt;
-  }
-  .c6 {
-    height: 11pt;
-  }
-  .c1 {
-    font-size: 10pt;
-  }
-  .c12 {
-    font-weight: 700;
-  }
-  .c17 {
-    font-size: 10.5pt;
-  }
-  .c11 {
-    font-size: 12pt;
-  }
-  li {
-    color: #000000;
-    font-size: 11pt;
-    font-family: 'Arial';
-  }
-  p {
-    margin: 0;
-    color: #000000;
-    font-size: 11pt;
-    font-family: 'Arial';
-  }
-</style>
-
 <script lang="ts">
   /* eslint-disable */
   import { BasePage } from 'components';
+  import './TermsOfService.scss';
 </script>
 
 <BasePage class="flex flex-col bg-white 2xl:px-32 sm:px-8 px-4">
diff --git a/dapp/src/routes/context/BasicProfile.svelte b/dapp/src/routes/context/BasicProfile.svelte
index 652642fe..84c94240 100644
--- a/dapp/src/routes/context/BasicProfile.svelte
+++ b/dapp/src/routes/context/BasicProfile.svelte
@@ -1,9 +1,3 @@
-<style>
-  .table-font {
-    color: white;
-  }
-</style>
-
 <div class="table-font">
   <h1>Basic Profile</h1>
   <p>Basic Profile for tzprofiles</p>
diff --git a/dapp/src/routes/context/EthereumAddressControl.svelte b/dapp/src/routes/context/EthereumAddressControl.svelte
index 2392273b..c20f9f9e 100644
--- a/dapp/src/routes/context/EthereumAddressControl.svelte
+++ b/dapp/src/routes/context/EthereumAddressControl.svelte
@@ -1,9 +1,3 @@
-<style>
-  .table-font {
-    color: white;
-  }
-</style>
-
 <script lang="ts">
   import { Link } from 'svelte-navigator';
 </script>
diff --git a/dapp/src/routes/context/EthereumAddressControl/address.svelte b/dapp/src/routes/context/EthereumAddressControl/address.svelte
index b6847b1a..d1f6214d 100644
--- a/dapp/src/routes/context/EthereumAddressControl/address.svelte
+++ b/dapp/src/routes/context/EthereumAddressControl/address.svelte
@@ -1,9 +1,3 @@
-<style>
-  .table-font {
-    color: white;
-  }
-</style>
-
 <script lang="ts">
   import { Link } from 'svelte-navigator';
 </script>
diff --git a/dapp/src/routes/context/EthereumControl.svelte b/dapp/src/routes/context/EthereumControl.svelte
index 69b1c6c3..26ef98c0 100644
--- a/dapp/src/routes/context/EthereumControl.svelte
+++ b/dapp/src/routes/context/EthereumControl.svelte
@@ -1,9 +1,3 @@
-<style>
-  .table-font {
-    color: white;
-  }
-</style>
-
 <script lang="ts">
   import { Link } from 'svelte-navigator';
 </script>
diff --git a/dapp/src/routes/context/EthereumControl/wallet.svelte b/dapp/src/routes/context/EthereumControl/wallet.svelte
index 88fc1eac..a6558a7b 100644
--- a/dapp/src/routes/context/EthereumControl/wallet.svelte
+++ b/dapp/src/routes/context/EthereumControl/wallet.svelte
@@ -1,9 +1,3 @@
-<style>
-  .table-font {
-    color: white;
-  }
-</style>
-
 <script lang="ts">
   import { Link } from 'svelte-navigator';
 </script>
diff --git a/dapp/src/routes/context/GitHubVerification.svelte b/dapp/src/routes/context/GitHubVerification.svelte
index 14364278..a5a39801 100644
--- a/dapp/src/routes/context/GitHubVerification.svelte
+++ b/dapp/src/routes/context/GitHubVerification.svelte
@@ -1,9 +1,3 @@
-<style>
-  .table-font {
-    color: white;
-  }
-</style>
-
 <div class="table-font">
   <h1>GitHub Verification</h1>
   <p>GitHub verification for tzprofiles</p>
diff --git a/dapp/src/routes/context/GitHubVerificationMessage.svelte b/dapp/src/routes/context/GitHubVerificationMessage.svelte
index 01620e59..ad4efba2 100644
--- a/dapp/src/routes/context/GitHubVerificationMessage.svelte
+++ b/dapp/src/routes/context/GitHubVerificationMessage.svelte
@@ -1,9 +1,3 @@
-<style>
-  .table-font {
-    color: white;
-  }
-</style>
-
 <script lang="ts">
   import { Link } from 'svelte-navigator';
 </script>
diff --git a/dapp/src/routes/context/GithubVerificationMessage/gistId.svelte b/dapp/src/routes/context/GithubVerificationMessage/gistId.svelte
index e02579d9..eaa77dcb 100644
--- a/dapp/src/routes/context/GithubVerificationMessage/gistId.svelte
+++ b/dapp/src/routes/context/GithubVerificationMessage/gistId.svelte
@@ -1,9 +1,3 @@
-<style>
-  .table-font {
-    color: white;
-  }
-</style>
-
 <script lang="ts">
   import { Link } from 'svelte-navigator';
 </script>
diff --git a/dapp/src/routes/context/GithubVerificationMessage/gistVersion.svelte b/dapp/src/routes/context/GithubVerificationMessage/gistVersion.svelte
index 3293916d..9373671b 100644
--- a/dapp/src/routes/context/GithubVerificationMessage/gistVersion.svelte
+++ b/dapp/src/routes/context/GithubVerificationMessage/gistVersion.svelte
@@ -1,9 +1,3 @@
-<style>
-  .table-font {
-    color: white;
-  }
-</style>
-
 <script lang="ts">
   import { Link } from 'svelte-navigator';
 </script>
diff --git a/dapp/src/routes/context/TwitterVerification.svelte b/dapp/src/routes/context/TwitterVerification.svelte
index bdd114af..86740b39 100644
--- a/dapp/src/routes/context/TwitterVerification.svelte
+++ b/dapp/src/routes/context/TwitterVerification.svelte
@@ -1,9 +1,3 @@
-<style>
-  .table-font {
-    color: white;
-  }
-</style>
-
 <div class="table-font">
   <h1>Twitter Verification</h1>
   <p>Twitter verification for tzprofiles</p>
diff --git a/dapp/src/routes/context/TwitterVerificationPublicTweet.svelte b/dapp/src/routes/context/TwitterVerificationPublicTweet.svelte
index c4feb279..32d9e14d 100644
--- a/dapp/src/routes/context/TwitterVerificationPublicTweet.svelte
+++ b/dapp/src/routes/context/TwitterVerificationPublicTweet.svelte
@@ -1,9 +1,3 @@
-<style>
-  .table-font {
-    color: white;
-  }
-</style>
-
 <script lang="ts">
   import { Link } from 'svelte-navigator';
 </script>
diff --git a/dapp/src/routes/context/TwitterVerificationPublicTweet/handle.svelte b/dapp/src/routes/context/TwitterVerificationPublicTweet/handle.svelte
index a568cddf..1546c90d 100644
--- a/dapp/src/routes/context/TwitterVerificationPublicTweet/handle.svelte
+++ b/dapp/src/routes/context/TwitterVerificationPublicTweet/handle.svelte
@@ -1,9 +1,3 @@
-<style>
-  .table-font {
-    color: white;
-  }
-</style>
-
 <script lang="ts">
   import { Link } from 'svelte-navigator';
 </script>
diff --git a/dapp/src/routes/context/TwitterVerificationPublicTweet/timestamp.svelte b/dapp/src/routes/context/TwitterVerificationPublicTweet/timestamp.svelte
index 06b102d7..60b7c57d 100644
--- a/dapp/src/routes/context/TwitterVerificationPublicTweet/timestamp.svelte
+++ b/dapp/src/routes/context/TwitterVerificationPublicTweet/timestamp.svelte
@@ -1,9 +1,3 @@
-<style>
-  .table-font {
-    color: white;
-  }
-</style>
-
 <script lang="ts">
   import { Link } from 'svelte-navigator';
 </script>
diff --git a/dapp/src/routes/context/TwitterVerificationPublicTweet/tweetId.svelte b/dapp/src/routes/context/TwitterVerificationPublicTweet/tweetId.svelte
index d603af18..f36f8e50 100644
--- a/dapp/src/routes/context/TwitterVerificationPublicTweet/tweetId.svelte
+++ b/dapp/src/routes/context/TwitterVerificationPublicTweet/tweetId.svelte
@@ -1,9 +1,3 @@
-<style>
-  .table-font {
-    color: white;
-  }
-</style>
-
 <script lang="ts">
   import { Link } from 'svelte-navigator';
 </script>
diff --git a/dapp/tailwind.config.js b/dapp/tailwind.config.js
index 0f5ae3df..26de2b26 100644
--- a/dapp/tailwind.config.js
+++ b/dapp/tailwind.config.js
@@ -19,6 +19,7 @@ module.exports = {
           350: '#AAAAAA',
           370: '#A0A4A8',
           650: '#3E3E3E',
+          1: '#e0e0e0',
         },
         blue: {
           'light': '#ecf2fe',
@@ -28,6 +29,8 @@ module.exports = {
         },
         dark: {
           1: '#222222',
+          2: '#050505',
+          3: '#333333'
         },
         beige: {
           1: '#ccc',
@@ -63,6 +66,7 @@ module.exports = {
         52.5: '13.125rem', // 210px
         60: '15rem', // 240px
         80: '20rem', // 320px
+        100: '25rem', // 400px
         '112.5': '28.125rem', // 450px
         '137.5': '34.375rem', // 550px
         144: '36rem', // 576px
@@ -75,9 +79,11 @@ module.exports = {
         '2/3': '66.67%',
         '5/6': '83.33%',
         25: '6.25rem', // 100px
+        '80vh': '80vh'
       },
       minWidth: {
         25: '6.25rem', // 100px
+        '32.5': '8.125rem', // 130px
         72: '18rem', // 288px
       },
       minHeight: {
@@ -104,12 +110,14 @@ module.exports = {
       },
       padding: {
         '0.75': '0.1875rem', // 3px
+        '7px': '0.4375rem', // 7px
         '4.5': '1.125rem', // 18px
         18: '4.5rem', // 72px
         22: '5.5rem', // 88px
         34: '8.5rem', // 136px
       },
       margin: {
+        '5px': '0.3125rem', // 5px
         '12.5': '3.125rem', // 50px
       },
       inset: {
@@ -118,11 +126,17 @@ module.exports = {
         '-29': '-7.25rem', // -116px
       },
       zIndex: {
+        '2': 2,
         '100': 100,
       },
       borderRadius: {
+        '3px': '3px', // 3px
         25: '6.25rem', // 100px
       },
+      borderWidth: {
+        '1.5px': '1.5px',
+        '5px': '5px'
+      },
       outline: {
         green: ['2px solid #429383', '-6px'],
       },