diff --git a/web/src/app/components/shared/sign-in-page/sign-in-page.component.html b/web/src/app/components/shared/sign-in-page/sign-in-page.component.html
index 5ddd0ca7b..127205477 100644
--- a/web/src/app/components/shared/sign-in-page/sign-in-page.component.html
+++ b/web/src/app/components/shared/sign-in-page/sign-in-page.component.html
@@ -30,16 +30,13 @@
       </p>
 
       <div class="buttons">
-        <button
-          mat-flat-button
-          color="primary"
+        <button 
+          class="google-signin-btn" 
           (click)="onGoogleSignIn()"
-          i18n-aria-label="@@app.login.signInWithGoogle"
-          aria-label="Sign in with Google"
+          type="button"
         >
-          <ng-container i18n="@@app.login.signInWithGoogle"
-            >Sign in with Google</ng-container
-          >
+          <img src="assets/img/web_light_rd_na.svg" alt="" class="google-logo" />
+          <span i18n="@@app.login.signInWithGoogle">Sign in with Google</span>
         </button>
       </div>
     </mat-card-content>
diff --git a/web/src/app/components/shared/sign-in-page/sign-in-page.component.scss b/web/src/app/components/shared/sign-in-page/sign-in-page.component.scss
index 4225ed1a7..0e5dad9ca 100644
--- a/web/src/app/components/shared/sign-in-page/sign-in-page.component.scss
+++ b/web/src/app/components/shared/sign-in-page/sign-in-page.component.scss
@@ -42,4 +42,46 @@
 
 .buttons {
   margin-top: 48px;
+  display: flex;
+  justify-content: center;
+}
+
+.google-signin-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 0 0 12px 0;
+  border: 1px solid #dadce0;
+  border-radius: 4px;
+  background-color: #fff;
+  color: #3c4043;
+  font-family: 'Google Sans', Roboto, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-height: 40px;
+
+  &:hover {
+    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+    background-color: #f8f9fa;
+  }
+
+  &:active {
+    background-color: #f1f3f4;
+    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+  }
+
+  &:disabled {
+    background-color: #f1f3f4;
+    color: #9aa0a6;
+    cursor: not-allowed;
+    border-color: #f1f3f4;
+  }
 }
diff --git a/web/src/assets/img/web_light_rd_na.svg b/web/src/assets/img/web_light_rd_na.svg
new file mode 100644
index 000000000..ccfb4ada0
--- /dev/null
+++ b/web/src/assets/img/web_light_rd_na.svg
@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M17.64 9.20454C17.64 8.56636 17.5827 7.95272 17.4764 7.36363H9V10.845H13.8436C13.635 11.97 13.0009 12.9231 12.0477 13.5613V15.8195H14.9564C16.6582 14.2527 17.64 11.9454 17.64 9.20454Z" fill="#4285F4"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.99976 18C11.4298 18 13.467 17.1941 14.9561 15.8195L12.0475 13.5613C11.2416 14.1013 10.2107 14.4204 8.99976 14.4204C6.65567 14.4204 4.67158 12.8372 3.96385 10.71H0.957031V13.0418C2.43794 15.9831 5.48158 18 8.99976 18Z" fill="#34A853"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.96409 10.71C3.78409 10.17 3.68182 9.59318 3.68182 9C3.68182 8.40682 3.78409 7.83 3.96409 7.29V4.95818H0.957273C0.347727 6.17318 0 7.54773 0 9C0 10.4523 0.347727 11.8268 0.957273 13.0418L3.96409 10.71Z" fill="#FBBC05"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.99976 3.57955C10.3211 3.57955 11.5075 4.03364 12.4402 4.92545L15.0216 2.34409C13.4629 0.891818 11.4257 0 8.99976 0C5.48158 0 2.43794 2.01682 0.957031 4.95818L3.96385 7.29C4.67158 5.16273 6.65567 3.57955 8.99976 3.57955Z" fill="#EA4335"/>
+</svg>