diff --git a/src/style.css b/src/style.css
index 685a8465370bc9b46928388fd55b27511b18d59d..33861c8eb13e6ff368c3ed36ec9e99a8e24645d6 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,7 @@
+:root {
+    --main-bg-color: #5C56F5;
+}
+
 body {
     margin: 0;
 }
@@ -6,7 +10,8 @@ body {
     position: absolute;
     width: 100vw;
     height: 100vh;
-    border-radius: 5px;
+    border-radius: 12px;
+    background: #F4F6FA;
 }
 
 #chatterbox .Timeline {
@@ -17,6 +22,15 @@ body {
     pointer-events: none;
 }
 
+#chatterbox .LoadingView {
+    flex-direction: column;
+    gap: 12px;
+}
+
+#chatterbox .spinner {
+    color: var(--main-bg-color);
+}
+
 /*
 todo: this style should actually be in hydrogen-web
 */
@@ -26,45 +40,97 @@ todo: this style should actually be in hydrogen-web
     left: 0;
 }
 
-.StartChat {
-    width: 32px;
-    height: 32px;
-    border: none;
-    background: no-repeat center url('./ui/res/chat-bubbles.svg'), #295dbd;
-    border-radius: 2px;
-    cursor: pointer;
-}
-
 .AccountSetupView {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-evenly;
     height: 100%;
     width: 100%;
 }
 
-.PolicyAgreementView-text {
-    padding-bottom: 10px;
+.PolicyAgreementView {
+    width: 100%;
+    height: 311px;
+}
+
+.PolicyAgreementView_title {
+    font-weight: 600;
+    font-size: 18px;
+    margin-top: 52px;
+    text-align: center;
+}
+
+.PolicyAgreementView_text {
+    margin-top: 16px;
+    padding: 0 32px;
+    width: 311px;
+    text-align: center;
+    font-weight: 400;
+    font-size: 15px;
 }
 
-.PolicyAgreementView-next, .PolicyAgreementView-cancel {
+.PolicyAgreementView_next {
     display: flex;
     padding: 10px;
-    width: 85px;
+    width: 311px;
+    height: 48px;
     justify-content: center;
+    align-items: center;
+    margin-top: 32px;
+    background: var(--main-bg-color);
+    border: none;
+    font-weight: 600;
+    color: white;
+    border-radius: 8px;
+    cursor: pointer;
 }
 
-.PolicyAgreementView-btn-collection .PolicyAgreementView-cancel {
-    border: 1px solid #03B381;
-    border-radius: 8px;
+.PolicyAgreementView_cancel {
+    margin-top: 12px;
+    color: #737D8C;
 }
 
-.PolicyAgreementView-btn-collection {
+.PolicyAgreementView_btn-collection {
     display: flex;
-    justify-content: space-evenly;
-    flex-direction: row;
+    flex-direction: column;
     width: 100%;
+    align-items: center;
+}
+
+.FooterView_logo {
+    filter: brightness(0) saturate(100%) invert(41%) sepia(81%) saturate(5403%) hue-rotate(233deg) brightness(99%) contrast(94%);
+    height: 16px;
+    width: 16px;
+}
+
+.FooterView_chatterbox-branding {
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 15px;
+    color: var(--main-bg-color);
+    margin-left: 4px;
+}
+
+.FooterView {
+    display: flex;
+    gap: 8px;
+    justify-content: center;
+    margin-bottom: 33px;
+}
+
+.ChatterboxView .FooterView {
+    margin: 10.5px 0;
+}
+
+.FooterView>div {
+    display: flex;
+    align-items: center;
+}
+
+.FooterView_matrix-branding {
+    font-size: 12px;
+    line-height: 15px;
+    color: #737D8C;
 }
 
 .ChatterboxView {
@@ -79,12 +145,14 @@ todo: this style should actually be in hydrogen-web
     grid-template-columns: 1fr 6fr 1fr;
     align-items: center;
     padding: 10px 15px;
-    height: 35px;
-    background-color: #295dbd;
-    border-radius: 5px 5px 0 0;
-    color: white;
+    height: 64px;
+    background-color: #ffffff;
+    border-radius: 12px 12px 0px 0px;
+    border: 1px solid #E3E8F0;
+    color: #17191C;
     font-weight: 600;
-    font-size: 1.5rem;
+    font-size: 15px;
+    line-height: 24px;
 }
 
 .RoomHeaderView_menu {
@@ -93,7 +161,7 @@ todo: this style should actually be in hydrogen-web
 }
 
 .RoomHeaderView_menu_minimize {
-    background: url("./ui/res/chevron-down.svg") no-repeat;
+    background: url("./ui/res/chevron-down.svg") no-repeat center;
     height: 20px;
     width: 20px;
     border: none;
@@ -101,7 +169,9 @@ todo: this style should actually be in hydrogen-web
 }
 
 .RoomHeaderView .avatar {
-    border-radius: 2px;
+    border-radius: 100%;
+    background: var(--main-bg-color);
+    border: 2px solid rgba(255, 255, 255, 0.8);
 }
 
 .ChatterboxView_footer {
@@ -120,7 +190,28 @@ todo: this style should actually be in hydrogen-web
     padding-left: 4px;
 }
 
+.ChatterboxView .MessageComposer_input {
+    background: #FFFFFF;
+    border: 1px solid #E3E8F0;
+    border-radius: 8px;
+    width: 351px;
+    height: 56px;
+    box-sizing: border-box;
+}
+
 .ChatterboxView .MessageComposer_input>textarea {
-    border-radius: 5px;
-    border: #c2bebe 1.5px solid;
+    background: #FFFFFF;
+}
+
+.ChatterboxView .MessageComposer_input>textarea:focus-visible {
+    outline: none;
+}
+
+.ChatterboxView .MessageComposer_input .send {
+    background-color: var(--main-bg-color);
+}
+
+.ChatterboxView .MessageComposer {
+    display: flex;
+    justify-content: center;
 }
diff --git a/src/ui/res/chevron-down.svg b/src/ui/res/chevron-down.svg
index 12c9e044b29c8aca33599acb8a91d1ec4b7a0b89..7ac6676cd68f7e3c37e635adb38fe5d1657bdf47 100644
--- a/src/ui/res/chevron-down.svg
+++ b/src/ui/res/chevron-down.svg
@@ -16,7 +16,7 @@
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M 8.20723,2.70711 C 8.59775,3.09763 8.59878,3.73182 8.20952,4.1236 L 3.27581,9.08934 8.22556,14.0391 c 0.39052,0.3905 0.39155,1.0247 0.00229,1.4165 -0.38926,0.3918 -1.0214,0.3928 -1.41192,0.0023 L 1.15907,9.80101 C 0.768549,9.41049 0.767523,8.7763 1.15678,8.38452 L 6.79531,2.70939 C 7.18457,2.31761 7.8167,2.31658 8.20723,2.70711 Z"
-       fill="#fff"
+       fill="#737D8C"
        id="path830" />
   </g>
   <defs
@@ -26,7 +26,7 @@
       <rect
          width="8"
          height="17"
-         fill="#ffffff"
+         fill="#737D8C"
          transform="rotate(180,4.25,8.5)"
          id="rect834"
          x="0"