diff --git a/core/installer/welcome/launcher-tmpl/launcher.html b/core/installer/welcome/launcher-tmpl/launcher.html
index 04c584e..7219925 100644
--- a/core/installer/welcome/launcher-tmpl/launcher.html
+++ b/core/installer/welcome/launcher-tmpl/launcher.html
@@ -14,7 +14,7 @@
                 <p>{{ GetUserInitials .LoggedInUsername }}</p>
                 <div class="tooltip-user" id="tooltip-user">
                     <p>{{ .LoggedInUsername }}</p>
-                    <button id="logout-button">Log out</button>
+                    <a href="{{ .LogoutUrl }}" role="button" id="logout-button">Log Out</a>
                 </div>
             </div>
         </div>
diff --git a/core/installer/welcome/launcher.go b/core/installer/welcome/launcher.go
index 288fc60..8619459 100644
--- a/core/installer/welcome/launcher.go
+++ b/core/installer/welcome/launcher.go
@@ -142,6 +142,7 @@
 type homeHandlerData struct {
 	LoggedInUsername string
 	AllAppsInfo      []AppLauncherInfo
+	LogoutUrl        string
 }
 
 func (s *LauncherServer) homeHandler(w http.ResponseWriter, r *http.Request) {
@@ -157,6 +158,7 @@
 	data := homeHandlerData{
 		LoggedInUsername: loggedInUsername,
 		AllAppsInfo:      allAppsInfo,
+		LogoutUrl:        s.logoutUrl,
 	}
 	if err := s.homeTmpl.Execute(w, data); err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
diff --git a/core/installer/welcome/static/launcher.css b/core/installer/welcome/static/launcher.css
index 8b0f274..aab58c6 100644
--- a/core/installer/welcome/static/launcher.css
+++ b/core/installer/welcome/static/launcher.css
@@ -1,295 +1,304 @@
 :root:not([data-theme]) {
-    --pico-background-color: unset;
-    --pico-color: unset;
+  --pico-background-color: unset;
+  --pico-color: unset;
 }
 
 body {
-    margin: 0;
-    padding: 0;
-    font-family: Arial, sans-serif;
-    display: flex;
-    height: 100vh;
-    padding-left: 10px !important;
-    padding-right: 10px !important;
-    background-color: black;
+  margin: 0;
+  padding: 0;
+  font-family: Arial, sans-serif;
+  display: flex;
+  height: 100vh;
+  padding-left: 10px !important;
+  padding-right: 10px !important;
+  background-color: black;
 }
 
 #left-panel {
-    width: 80px;
-    background-color: #f0f0f0;
-    border-radius: 10px;
-    border-width: 1px;
-    border-color: black;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 5px;
-    margin-bottom: 5px;
+  width: 80px;
+  background-color: #f0f0f0;
+  border-radius: 10px;
+  border-width: 1px;
+  border-color: black;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 .app-list {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 #right-panel {
-    flex: 1;
-    background-color: #f0f0f0;
-    margin: 5px;
-    padding: 2px;
-    border-radius: 10px;
-    border-color: black;
+  flex: 1;
+  background-color: #f0f0f0;
+  margin: 5px;
+  padding: 2px;
+  border-radius: 10px;
+  border-color: black;
 }
 
 #appFrame {
-    border-radius: 10px;
+  border-radius: 10px;
 }
 
 .app-icon-tooltip {
-    position: relative;
-    display: inline-block;
-    align-items: flex-start;
-    justify-content: center;
-    cursor: initial;
-    width: 80px !important;
-    height: 50px !important;
-    margin-bottom: 10px !important;
-    cursor: pointer !important;
-    --pico-background-color: unset !important;
-    --pico-color: unset !important;
+  position: relative;
+  display: inline-block;
+  align-items: flex-start;
+  justify-content: center;
+  cursor: initial;
+  width: 80px !important;
+  height: 50px !important;
+  margin-bottom: 10px !important;
+  cursor: pointer !important;
+  --pico-background-color: unset !important;
+  --pico-color: unset !important;
 }
 
 .tooltip {
-    position: absolute;
-    width: 200px;
-    border-radius: 0 10px 10px 0;
-    top: 70%;
-    left: 98%;
-    transform: translateY(-50%);
-    background-color: black;
-    color: white;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-    padding: 5px;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    visibility: hidden;
-    opacity: 0;
-    cursor: auto;
-    font-size: 16px;
+  position: absolute;
+  width: 200px;
+  border-radius: 0 10px 10px 0;
+  top: 70%;
+  left: 98%;
+  transform: translateY(-50%);
+  background-color: black;
+  color: white;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  padding: 5px;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  visibility: hidden;
+  opacity: 0;
+  cursor: auto;
+  font-size: 16px;
 }
 
 .help-button {
-    margin-top: 5px !important;
-    padding: 0 !important;
-    border: 0 !important;
-    margin-bottom: 5px !important;
-    width: 100% !important;
-    color: white !important;
-    cursor: pointer !important;
-    font-size: 16px !important;
+  margin-top: 5px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  margin-bottom: 5px !important;
+  width: 100% !important;
+  color: white !important;
+  cursor: pointer !important;
+  font-size: 16px !important;
 }
 
 .icon {
-    display: flex;
-    justify-content: center;
-    align-items: center !important;
+  display: flex;
+  justify-content: center;
+  align-items: center !important;
 }
 
 .tooltip p {
-    color: white;
-    margin: 0;
-    cursor: auto;
+  color: white;
+  margin: 0;
+  cursor: auto;
 }
 
 .app-icon-tooltip:hover {
-    transform: scale(1.15);
+  transform: scale(1.15);
 }
 
 .app-icon-tooltip .background-glow {
-    position: absolute;
-    top: 0;
-    left: 4px;
-    right: 4px;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0);
-    pointer-events: none;
-    border-radius: 5px;
-    box-shadow: 0px 0px 7px 7px black;
+  position: absolute;
+  top: 0;
+  left: 4px;
+  right: 4px;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0);
+  pointer-events: none;
+  border-radius: 5px;
+  box-shadow: 0px 0px 7px 7px black;
 }
 
 .modal-left {
-    width: 30%;
-    overflow-y: auto;
-    float: left;
-    margin-left: 0px;
-    background-color: #fbfcfc;
-    border-radius: 2px;
+  width: 30%;
+  overflow-y: auto;
+  float: left;
+  margin-left: 0px;
+  background-color: #fbfcfc;
+  border-radius: 2px;
 }
 
 .modal-right {
-    /* flex: 1; */
-    width: 70%;
-    overflow-y: auto;
-    float: right;
-    margin-left: 2px;
+  /* flex: 1; */
+  width: 70%;
+  overflow-y: auto;
+  float: right;
+  margin-left: 2px;
 }
 
 .app-help-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .app-help-modal-article {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    max-width: 100%;
-    min-height: 97%;
-    max-height: 97%;
-    overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  max-width: 100%;
+  min-height: 97%;
+  max-height: 97%;
+  overflow: hidden;
 }
 
 .app-info-modal-article header {
-    flex: 0 0 auto;
+  flex: 0 0 auto;
 }
 
 header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: relative;
-    margin-bottom: 2px !important;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  margin-bottom: 2px !important;
 }
 
 .close-button {
-    padding: 0;
-    border: none;
-    background: none;
-    cursor: pointer;
-    outline: none;
-    width: 1.5em;
-    height: 1.5em;
-    position: absolute;
-    top: 11px;
-    right: 5px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  outline: none;
+  width: 1.5em;
+  height: 1.5em;
+  position: absolute;
+  top: 11px;
+  right: 5px;
 }
 
 .modal-article {
-    min-width: 80% !important;
-    max-width: 80% !important;
-    min-height: 90% !important;
-    max-height: 90% !important;
-    overflow: hidden;
+  min-width: 80% !important;
+  max-width: 80% !important;
+  min-height: 90% !important;
+  max-height: 90% !important;
+  overflow: hidden;
 }
 
 .help-content {
-    display: none;
+  display: none;
 }
 
 .circle {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    background-color: #ccc;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #ccc;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .circle p {
-    font-size: 24px;
-    text-align: center;
-    line-height: 50px;
-    margin: 0;
-    position: relative;
-    display: inline-block;
+  font-size: 24px;
+  text-align: center;
+  line-height: 50px;
+  margin: 0;
+  position: relative;
+  display: inline-block;
 }
 
 .user-circle {
-    min-width: 80px !important;
-    max-width: 80px !important;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  min-width: 80px !important;
+  max-width: 80px !important;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .separator {
-    margin-top: 2px !important;
-    margin-bottom: 4px !important;
-    border-width: 2px !important;
-    border-color: black !important;
-    width: 100% !important;
+  margin-top: 2px !important;
+  margin-bottom: 4px !important;
+  border-width: 2px !important;
+  border-color: black !important;
+  width: 100% !important;
 }
 
 .modal-left ul {
-    padding-inline-start: 0px !important;
-    margin-bottom: 0px;
-    list-style: none;
-    font-size: 14px;
+  padding-inline-start: 0px !important;
+  margin-bottom: 0px;
+  list-style: none;
+  font-size: 14px;
 }
 
 .modal-left ul li {
-    list-style: none !important;
-    padding-inline-start: 19px !important;
-    margin-bottom: 0px;
-    font-size: 16px !important;
+  list-style: none !important;
+  padding-inline-start: 19px !important;
+  margin-bottom: 0px;
+  font-size: 16px !important;
 }
 
 .modal-left ul li a {
-	--pico-text-decoration: none;
-	cursor: pointer;
+  --pico-text-decoration: none;
+  cursor: pointer;
 }
 
 .modal-left ul li a[aria-current] {
-	color: var(--pico-primary);
+  color: var(--pico-primary);
 }
 
 .tooltip-user {
-    position: absolute;
-    top: 54px;
-    left: 90px;
-    transform: translateY(-50%);
-    width: 234px;
-    background-color: black;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-    padding: 5px;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    visibility: hidden;
-    opacity: 0;
-    border-radius: 0 0 10px 0;
-    cursor: auto;
+  position: absolute;
+  top: 54px;
+  left: 90px;
+  transform: translateY(-50%);
+  width: 234px;
+  background-color: black;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  padding: 5px;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  visibility: hidden;
+  opacity: 0;
+  border-radius: 0 0 10px 0;
+  cursor: auto;
 }
 
 .tooltip-user button {
-    margin-top: 5px !important;
-    padding: 0 !important;
-    border: 0 !important;
-    margin-bottom: 5px !important;
-    width: 100% !important;
-    color: white !important;
-    cursor: pointer !important;
-    font-size: 19px !important;
+  margin-top: 5px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  margin-bottom: 5px !important;
+  width: 100% !important;
+  color: white !important;
+  cursor: pointer !important;
+  font-size: 19px !important;
 }
 
 .tooltip-user p {
-    color: white;
-    margin: 0;
-    cursor: auto;
-    font-size: 19px;
-    /* align-self: flex-start; */
+  color: white;
+  margin: 0;
+  cursor: auto;
+  font-size: 19px;
+  /* align-self: flex-start; */
+}
+
+#logout-button {
+  padding: 2px !important;
+  border: 0 !important;
+  width: 100% !important;
+  color: white !important;
+  cursor: pointer !important;
+  margin-bottom: 5px !important;
 }