diff --git a/assets/styles/components/links.scss b/assets/styles/components/links.scss
index 61369a2..4372bcc 100644
--- a/assets/styles/components/links.scss
+++ b/assets/styles/components/links.scss
@@ -2,6 +2,10 @@ a {
   color: get-light-color('accent-color');
   @include transition();
 
+  &:link {
+    text-decoration: none;
+  }
+
   &:hover,
   &:focus {
     text-decoration: get-light-color('hover-over-accent-color') underline;
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
index 9475868..371c808 100644
--- a/layouts/_default/search.html
+++ b/layouts/_default/search.html
@@ -58,8 +58,8 @@
                   {{ end }}
                 </div>
                 <div class="card-footer">
-                  <span class="float-left">${date}</span>
-                  <a href="${link}" class="float-right btn btn-outline-info btn-sm">Read</a>
+                  <span class="float-start">${date}</span>
+                  <a href="${link}" class="float-end btn btn-outline-info btn-sm">Read</a>
                 </div>
               </div>
           </div>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 8981d32..cd511ac 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -37,7 +37,7 @@
       <!--Content Start-->
       <div class="page-content">
         {{ if site.Params.features.blog.showAuthor | default true }}
-        <div class="author-profile ml-auto align-self-lg-center">
+        <div class="author-profile ms-auto align-self-lg-center">
           <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}' alt="Author Image">
           <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
           <p class="text-muted">{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} {{i18n "minute" .ReadingTime }}{{ end }}</p>
@@ -51,7 +51,7 @@
         </div>
 
         {{ if not (site.Params.features.blog.showAuthor | default true) }}
-        <div class="author-profile ml-auto align-self-lg-center">
+        <div class="author-profile ms-auto align-self-lg-center">
           <p class="text-muted">{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} {{i18n "minute" .ReadingTime }}{{ end }}</p>
         </div>
         {{ end }}
@@ -64,7 +64,7 @@
         </div>
 
         <!-- Share or Contribute -->
-        <div class="row pl-3 pr-3">
+        <div class="row ps-3 pe-3">
         <!--Social Media Share Buttons-->
           <div class="col-md-6 share-buttons">
           {{ if site.Params.features.blog.shareButtons }}
@@ -175,7 +175,7 @@
   <section class="toc-section" id="toc-section">
     {{ if and site.Params.features.toc.enable ( .Params.enableTOC | default true ) }}
     <div class="toc-holder">
-      <h5 class="text-center pl-3">{{ i18n "toc_heading" }}</h5>
+      <h5 class="text-center ps-3">{{ i18n "toc_heading" }}</h5>
       <hr>
       <div class="toc">
         {{ .TableOfContents }}
diff --git a/layouts/partials/cards/accomplishments.html b/layouts/partials/cards/accomplishments.html
index a62fa22..27015b1 100644
--- a/layouts/partials/cards/accomplishments.html
+++ b/layouts/partials/cards/accomplishments.html
@@ -4,7 +4,7 @@
       <h5 class="card-title mb-0">{{ .name }}</h5>
       <div class="sub-title">
         <span><a href="{{ .organization.url }}" title="{{ .organization.name }}" target="_blank" rel="noopener">{{ .organization.name }}</a></span>
-        <span class="ml-2">{{ .timeline }}</span>
+        <span class="ms-2">{{ .timeline }}</span>
       </div>
     </div>
     <div class="card-body">
@@ -12,7 +12,7 @@
     </div>
     <div class="card-footer">
       {{ if .certificateURL }}
-        <a class="btn btn-outline-info ml-1 pl-2 mb-2" href="{{ .certificateURL }}" target="_blank" rel="noopener" role="button">{{ i18n "view_certificate"}}</a>
+        <a class="btn btn-outline-info ms-1 ps-2 mb-2" href="{{ .certificateURL }}" target="_blank" rel="noopener" role="button">{{ i18n "view_certificate"}}</a>
       {{ end }}
     </div>
   </div>
diff --git a/layouts/partials/cards/post.html b/layouts/partials/cards/post.html
index 99178bc..4426b7c 100644
--- a/layouts/partials/cards/post.html
+++ b/layouts/partials/cards/post.html
@@ -15,12 +15,12 @@
       {{ end }}
     </div>
     <div class="card-footer">
-      <span class="float-left">
+      <span class="float-start">
           {{ .Date | time.Format ":date_full" }}
           {{ if site.Params.features.readingTime }} | {{.ReadingTime}} {{ i18n "minute" .ReadingTime }} {{ end }}</span>
       <a
       href="{{ .RelPermalink | relLangURL }}"
-      class="float-right btn btn-outline-info btn-sm">{{ i18n "read" }}</a>
+      class="float-end btn btn-outline-info btn-sm">{{ i18n "read" }}</a>
     </div>
   </div>
 </div>
diff --git a/layouts/partials/cards/publication.html b/layouts/partials/cards/publication.html
index bdc7b21..2c238e1 100644
--- a/layouts/partials/cards/publication.html
+++ b/layouts/partials/cards/publication.html
@@ -12,11 +12,11 @@
       <h5 class="card-title mb-0">{{ .title }}</h5>
       <div class="sub-title">
         <span><a class="" href="{{.publishedIn.url}}">{{ .publishedIn.name }}</a></span>
-        <span class="ml-2">{{ .publishedIn.date }}</span>
+        <span class="ms-2">{{ .publishedIn.date }}</span>
       </div>
       <div class="authors">
         {{ range $index,$author:= .authors }}
-          <span class="mr-2"><a class="" href="{{.url}}">{{ .name }}</a></span>
+          <span class="me-2"><a class="" href="{{.url}}">{{ .name }}</a></span>
         {{ end }}
       </div>
     </div>
@@ -26,13 +26,13 @@
     <div class="card-footer">
       <div class="tags">
         {{ range $index,$tag:= .tags }}
-            <span class="btn badge btn-info ml-1 p-2">
+            <span class="btn badge btn-info ms-1 p-2">
               {{ $tag }}
             </span>
         {{ end }}
       </div>
       <div class="details-btn">
-        <a class="btn btn-outline-info ml-1 pl-2 mb-2" href="{{ .paper.url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
+        <a class="btn btn-outline-info ms-1 ps-2 mb-2" href="{{ .paper.url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
       </div>
     </div>
   </div>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 048074f..c04bd7a 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -66,7 +66,7 @@
 
   <footer id="footer" class="container-fluid text-center align-content-center footer pb-2">
     <div class="container pt-5">
-      <div class="row text-left">
+      <div class="row text-start">
         {{ if $navigationEnabled }}
         <div class="col-md-4 col-sm-12">
           <h5>{{ i18n "navigation" }}</h5>
@@ -193,7 +193,7 @@
     {{ if $credentialsEnabled }}
     <hr />
     <div class="container">
-      <div class="row text-left">
+      <div class="row text-start">
         <div class="col-md-4">
           <a id="theme" href="https://github.com/hugo-toha/toha" target="_blank" rel="noopener">
             <img src="{{ $themeLogo }}" alt="Toha Theme Logo">
@@ -201,7 +201,7 @@
           </a>
         </div>
         <div class="col-md-4 text-center">{{ $copyrightNotice | markdownify }}</div>
-        <div class="col-md-4 text-right">
+        <div class="col-md-4 text-end">
           <a id="hugo" href="https://gohugo.io/" target="_blank" rel="noopener">{{ i18n "hugoAttributionText" }}
           <img
             src="{{ $hugoLogo }}"
diff --git a/layouts/partials/navigators/navbar.html b/layouts/partials/navigators/navbar.html
index d10a78e..ee1025e 100644
--- a/layouts/partials/navigators/navbar.html
+++ b/layouts/partials/navigators/navbar.html
@@ -77,7 +77,7 @@
     </button>
 
     <div class="collapse navbar-collapse dynamic-navbar" id="top-nav-items">
-      <ul class="nav navbar-nav ml-auto">
+      <ul class="nav navbar-nav ms-auto">
         <li class="nav-item">
           <a class="nav-link" href="{{ if .IsHome }}#home{{else}}{{ site.BaseURL | relLangURL }}#home{{end}}">{{ i18n "home" }}</a>
         </li>
diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html
index 34a48ec..fc4a95b 100644
--- a/layouts/partials/sections/about.html
+++ b/layouts/partials/sections/about.html
@@ -25,7 +25,7 @@
       <p class="p-1 text-justify">
         {{ .summary | markdownify }}
       </p>
-      <div class="text-container ml-auto">
+      <div class="text-container ms-auto">
         <ul class="social-link d-flex">
           {{ range .socialLinks }}
           <li>
@@ -52,7 +52,7 @@
       {{ end }}
     </div>
     <!-- soft skills circular-progressbar -->
-    <div class="col-sm-6 pt-5 pl-md-4 pl-sm-3 pt-sm-0">
+    <div class="col-sm-6 pt-5 ps-md-4 ps-sm-3 pt-sm-0">
       <div class="row">
         {{ range .badges }}
           {{ partial "misc/badge.html" . }}
diff --git a/layouts/partials/sections/achievements/entry.html b/layouts/partials/sections/achievements/entry.html
index 3718e56..ba5cd52 100644
--- a/layouts/partials/sections/achievements/entry.html
+++ b/layouts/partials/sections/achievements/entry.html
@@ -17,11 +17,11 @@
   <i class="fa-solid fa-xmark hidden"></i>
   <i class="fa-solid fa-magnifying-glass-plus" id="enlarge-icon"></i>
   <h4 class="title" id="achievement-title">{{ .title }}</h4>
-  <div class="caption hidden col-lg-6 text-left" id="caption">
+  <div class="caption hidden col-lg-6 text-start" id="caption">
     <h4>{{ .title }}</h4>
     <p>{{ .summary | markdownify }}</p>
     {{ if .url }}
-      <a class="btn btn-info ml-1 pl-2 mb-2" href="{{ .url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
+      <a class="btn btn-info ms-1 ps-2 mb-2" href="{{ .url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
     {{ end }}
   </div>
   <span style="background-image: url('{{ $achievementImageSm }}');" class="d-none" id="SmallImage" active="true"></span>
diff --git a/layouts/partials/sections/education-alt.html b/layouts/partials/sections/education-alt.html
index 8716c5b..dce4616 100644
--- a/layouts/partials/sections/education-alt.html
+++ b/layouts/partials/sections/education-alt.html
@@ -101,9 +101,9 @@
                                     </ul>
                                 {{ end }}
                                 {{ if gt (len .takenCourses.courses) $collapseAfter }}
-                                    <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
+                                    <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}"
                                     id="show-more-btn" aria-label="{{ i18n "show_more"}}">{{ i18n "show_more"}}</button>
-                                    <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
+                                    <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}"
                                     id="show-less-btn" aria-label="{{ i18n "show_less"}}">{{ i18n "show_less"}}</button>
                                 {{ end }}
                             </div>
diff --git a/layouts/partials/sections/education.html b/layouts/partials/sections/education.html
index ced5404..62c7239 100644
--- a/layouts/partials/sections/education.html
+++ b/layouts/partials/sections/education.html
@@ -101,9 +101,9 @@
                                     </ul>
                                 {{ end }}
                                 {{ if gt (len .takenCourses.courses ) $collapseAfter }}
-                                    <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
+                                    <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}"
                                     id="show-more-btn">{{ i18n "show_more"}}</button>
-                                    <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
+                                    <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}"
                                     id="show-less-btn">{{ i18n "show_less"}}</button>
                                 {{ end }}
                             </div>
diff --git a/layouts/partials/sections/experiences/vertical-line.html b/layouts/partials/sections/experiences/vertical-line.html
index 7d8b74b..1178741 100644
--- a/layouts/partials/sections/experiences/vertical-line.html
+++ b/layouts/partials/sections/experiences/vertical-line.html
@@ -1,3 +1,3 @@
 <div class="col-1 col-lg-2 text-center vertical-line d-inline-flex justify-content-center">
-  <div class="circle font-weight-bold">{{ add . 1 }}</div>
+  <div class="circle fw-bold">{{ add . 1 }}</div>
 </div>
diff --git a/layouts/partials/sections/projects.html b/layouts/partials/sections/projects.html
index 34a5e6f..98c86cc 100644
--- a/layouts/partials/sections/projects.html
+++ b/layouts/partials/sections/projects.html
@@ -11,7 +11,7 @@
     <h1 class="text-center" style="display: none">
         <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
   {{ end }}
-  <div class="container ml-auto text-center">
+  <div class="container ms-auto text-center">
     <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
       {{ range .buttons }}
       <button type="button" class="btn btn-dark project-filtr-control" data-filter="{{ .filter }}">
diff --git a/layouts/partials/sections/publications.html b/layouts/partials/sections/publications.html
index 733d578..3102f3d 100644
--- a/layouts/partials/sections/publications.html
+++ b/layouts/partials/sections/publications.html
@@ -11,7 +11,7 @@
     <h1 class="text-center" style="display: none">
         <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
   {{ end }}
-  <div class="container ml-auto text-center">
+  <div class="container ms-auto text-center">
     <div class="btn-group flex-wrap" role="pub-group" id="publication-filter-buttons">
       {{ range .buttons }}
       <button type="button" class="btn btn-dark pub-filtr-control" data-filter="pub-{{ .filter }}">
diff --git a/layouts/partials/sections/recent-posts.html b/layouts/partials/sections/recent-posts.html
index 87792b4..3f09491 100644
--- a/layouts/partials/sections/recent-posts.html
+++ b/layouts/partials/sections/recent-posts.html
@@ -29,7 +29,7 @@
   display: flex;
   align-items: center;
   justify-content: center;">
-    <a href="/posts/" title="Show More" class="float-right btn btn-outline-info btn-sm" >
+    <a href="/posts/" title="Show More" class="float-end btn btn-outline-info btn-sm" >
     {{ i18n "show_more"}}</a>
   </div>
   {{ end }}
diff --git a/package-lock.json b/package-lock.json
index b0aff04..1ef8a63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@fontsource/mulish": "4.5.13",
         "@fortawesome/fontawesome-free": "^6.2.0",
         "autoprefixer": "^10.4.13",
-        "bootstrap": "^4.6.2",
+        "bootstrap": "^5.3.3",
         "eslint": "^8.31.0",
         "eslint-config-prettier": "^8.6.0",
         "eslint-config-standard": "^17.0.0",
@@ -150,6 +150,17 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "dev": true,
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -352,9 +363,9 @@
       }
     },
     "node_modules/bootstrap": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
-      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
       "dev": true,
       "funding": [
         {
@@ -367,8 +378,7 @@
         }
       ],
       "peerDependencies": {
-        "jquery": "1.9.1 - 3",
-        "popper.js": "^1.16.1"
+        "@popperjs/core": "^2.11.8"
       }
     },
     "node_modules/brace-expansion": {
@@ -2522,13 +2532,6 @@
       "integrity": "sha512-46Qnh3qs+6EJlWDHmvWRW6qiz5jFy2mkh9UvtTvQmLJMZIjKrdz4du68le7hLX4tAWCp6QTKiq/OuLv6huHxZg==",
       "dev": true
     },
-    "node_modules/jquery": {
-      "version": "3.6.3",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.3.tgz",
-      "integrity": "sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/js-sdsl": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
@@ -3931,6 +3934,13 @@
         "fastq": "^1.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "dev": true,
+      "peer": true
+    },
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -4063,9 +4073,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
-      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
       "dev": true,
       "requires": {}
     },
@@ -5652,13 +5662,6 @@
       "integrity": "sha512-46Qnh3qs+6EJlWDHmvWRW6qiz5jFy2mkh9UvtTvQmLJMZIjKrdz4du68le7hLX4tAWCp6QTKiq/OuLv6huHxZg==",
       "dev": true
     },
-    "jquery": {
-      "version": "3.6.3",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.3.tgz",
-      "integrity": "sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==",
-      "dev": true,
-      "peer": true
-    },
     "js-sdsl": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
diff --git a/package.json b/package.json
index e3478f5..41e0067 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "@fontsource/mulish": "4.5.13",
     "@fortawesome/fontawesome-free": "^6.2.0",
     "autoprefixer": "^10.4.13",
-    "bootstrap": "^4.6.2",
+    "bootstrap": "^5.3.3",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-config-standard": "^17.0.0",