diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index b400b7e5..e9ec53d8 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -15,7 +15,7 @@ $global-font-weight: 400 !default;
 $global-line-height: 1.5rem !default;
 
 // Radius of the border
-$global-border-radius: 5px !default;
+$global-border-radius: 6px !default;
 
 // Color of the background
 $global-background-color: #ffffff !default;
diff --git a/assets/scss/core/layouts/_header.scss b/assets/scss/core/layouts/_header.scss
index bc4b37ec..d507877b 100644
--- a/assets/scss/core/layouts/_header.scss
+++ b/assets/scss/core/layouts/_header.scss
@@ -71,30 +71,32 @@ header {
   font-size: fi-var(header-title-font-size);
   font-family: fi-var(header-title-font-family);
   font-weight: bold;
-  margin-inline-end: 0.25rem;
-  padding-inline: 0.25rem;
+  line-height: 1;
+  padding: 0.25rem;
   min-width: 10%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   flex: 10;
+  display: flex;
+  align-items: flex-end;
+  gap: 0.25rem;
+  
+  .header-title-link {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
 
-  .logo {
-    min-height: 1.5em;
-    height: 1.5em;
-    width: auto;
-    vertical-align: top;
-    transform: translateY(calc(#{fi-var(header-height)} / 2 - 50%));
-  }
-
-  .header-title-text {
-    margin-left: 0.25rem;
-    margin-right: 0.25rem;
+    // recommended size: 32px * 32px
+    .logo {
+      height: 32px;
+      width: auto;
+    }
   }
 
   .header-subtitle {
-    margin-left: 0.25rem;
-    font-size: 0.6em;
+    font-size: 0.75rem;
+    line-height: fi-var(header-title-font-size);
   }
 }
 
@@ -262,10 +264,6 @@ header {
       padding-inline-end: fi-var(header-height);
     }
 
-    .header-title {
-      height: 100%;
-    }
-
     .menu {
       display: flex;
       flex-direction: row;
@@ -337,7 +335,7 @@ header {
 #header-mobile {
   position: sticky;
   top: 0;
-  min-height: fi-var(header-height);
+  height: fi-var(header-height);
   line-height: fi-var(header-height);
 
   [data-header-mobile='normal'] & {
@@ -347,8 +345,11 @@ header {
   .header-container {
     padding: 0;
     margin: 0;
+    height: fi-var(header-height);
+    position: relative;
 
     .header-wrapper {
+      height: 100%;
       padding: 0 1rem;
       font-size: 1.125rem;
       transition: margin-top 0.3s ease;
diff --git a/assets/scss/widgets/_typeit.scss b/assets/scss/widgets/_typeit.scss
index 472a5c95..688401b1 100644
--- a/assets/scss/widgets/_typeit.scss
+++ b/assets/scss/widgets/_typeit.scss
@@ -10,5 +10,5 @@
 
   --ti-cursor-color: fi-var(global-font-color);
   --ti-cursor-font-family: fi-var(global-font-family);
-  --ti-cursor-transform: translateX(0);
+  // --ti-cursor-transform: translateX(0);
 }
diff --git a/hugo.toml b/hugo.toml
index f9129e56..9da5cca4 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -835,6 +835,7 @@ cursorChar = "|"
 # cursor duration after typing finishing (measured in milliseconds, "-1" means unlimited)
 duration = -1
 # FixIt 0.2.18 | NEW whether your strings will continuously loop after completing
+# [fixme] There is a bug when printing in groups
 loop = false
 
 # FixIt 0.2.15 | NEW Mermaid config
diff --git a/layouts/_partials/layouts/header.html b/layouts/_partials/layouts/header.html
index 5a40d19d..6befd081 100644
--- a/layouts/_partials/layouts/header.html
+++ b/layouts/_partials/layouts/header.html
@@ -5,7 +5,7 @@
 <header class="desktop animate__faster{{ if .Site.Params.header.blur }} blur{{ end }}" id="header-desktop">
   <div class="header-wrapper"{{ if .Site.Params.githubCorner.enable }} data-github-corner="{{ .Site.Params.githubCorner.position }}"{{ end }}>
     <div class="header-title">
-      <a href="{{ $relLangURL }}" title="{{ .Site.Title }}">
+      <a href="{{ $relLangURL }}" title="{{ .Site.Title }}" class="header-title-link">
         {{- with .Site.Params.header.title -}}
           {{- with .logo -}}
             {{- dict "Src" . "Class" "logo" "Alt" $.Site.Title "Width" 32 "Height" 32 | partial "plugin/image.html" -}}
@@ -15,7 +15,7 @@
           {{- end -}}
           {{- if .typeit -}}
             {{- $.Store.Set "hasTyped" true -}}
-            <span class="typeit"><template>{{ .name | default $.Site.Title }}</template></span>
+            <span class="typeit" data-group="header-desktop"><template>{{ .name | default $.Site.Title }}</template></span>
           {{- else -}}
             <span class="header-title-text">{{ .name | default $.Site.Title }}</span>
           {{- end -}}
@@ -29,7 +29,7 @@
       {{- with .Site.Params.header.subtitle -}}
         {{- if .typeit -}}
         {{- $.Store.Set "hasTyped" true -}}
-          <span class="typeit header-subtitle"><template>{{ .name }}</template></span>
+          <span class="typeit header-subtitle" data-group="header-desktop"><template>{{ .name }}</template></span>
         {{- else -}}
           <span class="header-subtitle">{{ .name }}</span>
         {{- end -}}
@@ -159,7 +159,7 @@
   <div class="header-container">
     <div class="header-wrapper">
       <div class="header-title">
-        <a href="{{ $relLangURL }}" title="{{ .Site.Title }}">
+        <a href="{{ $relLangURL }}" title="{{ .Site.Title }}" class="header-title-link">
           {{- with .Site.Params.header.title -}}
             {{- with .logo -}}
               {{- dict "Src" . "Class" "logo" "Alt" $.Site.Title "Width" 26 "Height" 26 | partial "plugin/image.html" -}}
@@ -169,7 +169,7 @@
             {{- end -}}
             {{- if .typeit -}}
               {{- $.Store.Set "hasTyped" true -}}
-              <span class="typeit"><template>{{ .name | default $.Site.Title }}</template></span>
+              <span class="typeit" data-group="header-mobile"><template>{{ .name | default $.Site.Title }}</template></span>
             {{- else -}}
               <span class="header-title-text">{{ .name | default $.Site.Title }}</span>
             {{- end -}}
@@ -183,7 +183,7 @@
         {{- with .Site.Params.header.subtitle -}}
           {{- if .typeit -}}
             {{- $.Store.Set "hasTyped" true -}}
-            <span class="typeit header-subtitle"><template>{{ .name }}</template></span>
+            <span class="typeit header-subtitle" data-group="header-mobile"><template>{{ .name }}</template></span>
           {{- else -}}
             <span class="header-subtitle">{{- .name -}}</span>
           {{- end -}}