diff --git a/app/javascript/vue/shared/scinote_edit_download.vue b/app/javascript/vue/shared/scinote_edit_download.vue
index 80e994ef0..166ad026a 100644
--- a/app/javascript/vue/shared/scinote_edit_download.vue
+++ b/app/javascript/vue/shared/scinote_edit_download.vue
@@ -9,9 +9,9 @@
          target="_blank">
         <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.windows_button') }}</span>
       </a>
-      <p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);">
+      <div class="text-xs pt-2 pb-6" style="color: var(--sn-sleepy-grey);">
         {{ i18n.t('users.settings.account.addons.desktop_app.version', { version: this.responseData[0]['version']}) }}
-      </p>
+      </div>
     </template>
 
     <template v-else-if="isMac">
@@ -23,9 +23,9 @@
          target="_blank">
         <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.macos_button') }}</span>
       </a>
-      <p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);">
+      <div class="text-xs pt-2 pb-6" style="color: var(--sn-sleepy-grey);">
         {{ i18n.t('users.settings.account.addons.desktop_app.version', { version: this.responseData[1]['version']}) }}
-      </p>
+      </div>
     </template>
 
     <template v-else>
@@ -39,11 +39,11 @@
              target="_blank">
             <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.windows_button') }}</span>
           </a>
-          <p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);">
+          <div class="text-xs pt-2 pb-6" style="color: var(--sn-sleepy-grey);">
             {{ i18n.t('users.settings.account.addons.desktop_app.version',
               { version: this.responseData[0]['version']})
             }}
-          </p>
+          </div>
         </div>
 
         <div class="ml-2">
@@ -55,7 +55,7 @@
              target="_blank">
             <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.macos_button') }}</span>
           </a>
-          <p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);">
+          <p class="text-xs pt-2 pb-6" style="color: var(--sn-sleepy-grey);">
             {{ i18n.t('users.settings.account.addons.desktop_app.version',
               { version: this.responseData[1]['version']})
             }}
@@ -66,6 +66,7 @@
 
     <a :href="'https://knowledgebase.scinote.net/en/knowledge/how-to-use-scinote-edit'"
         :title="i18n.t('users.settings.account.addons.more_info')"
+        class="text-sn-blue"
         target="_blank">
       <span class="sn-icon sn-icon-open"></span>
       {{ i18n.t('users.settings.account.addons.more_info') }}
diff --git a/app/views/users/settings/account/addons/index.html.erb b/app/views/users/settings/account/addons/index.html.erb
index ed86200b7..a30526a23 100644
--- a/app/views/users/settings/account/addons/index.html.erb
+++ b/app/views/users/settings/account/addons/index.html.erb
@@ -3,83 +3,107 @@
 
 <%= render partial: 'users/settings/sidebar' %>
 <div class="tab-content user-account-addons">
-  <div class="tab-pane content-pane active" role="tabpanel">
+  <div role="tabpanel">
 
-    <div>
-      <h1 class="addons-title"><%= t('users.settings.account.addons.title') %></h1>
-      <div>
-        <h2 class="addons-subtitle" ><%= t('users.settings.account.addons.scinote_addons') %></h2>
+    <h1 id="scinote-addons-title" class="mt-0 pb-1.5 text-sn-black"><%= t('users.settings.account.addons.title') %></h1>
+
+    <div id="scinote-addons-wrapper" class="flex flex-col bg-sn-white p-4 rounded mb-6">
+        <h2 class="my-0 pb-6 text-sn-black" ><%= t('users.settings.account.addons.scinote_addons') %></h2>
         <div data-hook="settings-addons-container">
           <em data-hook="settings-addons-no-addons">
             <%= t('users.settings.account.addons.no_addons') %>
           </em>
         </div>
-      </div>
     </div>
-    <br>
+
+    <%# scinote edit %>
     <% if ENV['ASSET_SYNC_URL'].present? %>
-      <div class="panel panel-default">
-        <div class="panel-body">
-          <div class="row">
-            <div class="col-xs-8 col-sm-9 col-md-9 col-lg-9">
-              <p class="manuscript-title"><%= t('users.settings.account.addons.desktop_app.title') %></p>
-              <p class="manuscript-description">
-                <span><%= t('users.settings.account.addons.desktop_app.description') %></span>
-              </p><br/>
-              <div id="scinoteEditDownload" data-behaviour="vue">
-                <scinote-edit-download data="<%= @user_agent %>">
-              </div>
-            </div>
+      <div class="bg-sn-white rounded p-4 mb-6">
+          <div class="font-bold my-0 pb-2 text-sn-black"><%= t('users.settings.account.addons.desktop_app.title') %></div>
+          <div class="pb-6 text-sn-dark-grey">
+            <%= t('users.settings.account.addons.desktop_app.description') %>
+          </div>
+          <div id="scinoteEditDownload" data-behaviour="vue">
+            <scinote-edit-download data="<%= @user_agent %>">
           </div>
-        </div>
       </div>
     <% end %>
-    <div class="row printer-settings">
-      <div class="col-xs-12 col-sm-12">
-        <h2 class="addons-subtitle"><%= t('users.settings.account.addons.label_printers') %></h2>
-        <div class="printers-container">
-          <div class="printer">
-            <div class="header">
-              <div class="title">
-                <%= t('users.settings.account.addons.zebra_printer.title') %>
-              </div>
-              <div class="control">
-                <%= t('users.settings.account.addons.printers.enabled') %>
-                <i class="sn-icon sn-icon-check"></i>
-              </div>
+
+    <%# label printers %>
+    <div id="printer-settings" class="flex flex-col gap-6 rounded bg-sn-white mb-6 p-4">
+      <h2 class="my-0 text-sn-black"><%= t('users.settings.account.addons.label_printers') %></h2>
+
+      <%# zebra printer %>
+      <div class="flex flex-row justify-between">
+        <%# left part %>
+        <div id="left-part" class="flex flex-col">
+          <%# title %>
+          <div class="flex flex-row justify-between pb-2">
+            <div class="font-bold text-sn-black">
+              <%= t('users.settings.account.addons.zebra_printer.title') %>
             </div>
-            <div class="description">
-              <%= t('users.settings.account.addons.zebra_printer.description') %>
-            </div>
-              <%= link_to t('users.settings.account.addons.printers.details'), zebra_settings_path(), class: 'printer-details' %>
+          </div>
+          <%# description text %>
+          <div class="text-sn-dark-grey pb-6">
+            <%= t('users.settings.account.addons.zebra_printer.description') %>
+          </div>
+          <%# button %>
+          <div>
+            <%= link_to t('users.settings.account.addons.printers.details'), zebra_settings_path(), class: 'text-sn-blue' %>
           </div>
         </div>
-        <div class="printers-container">
-          <div class="printer">
-            <div class="header">
-              <div class="title">
-                <%= t('users.settings.account.addons.fluics_printer.title') %>
-              </div>
-              <div class="control">
+        <%# right-part %>
+        <div id="right-part" class="flex flex-row min-w-fit items-start">
+          <div class="flex items-center gap-2">
+              <div class="text-sn-black">
                 <%= t('users.settings.account.addons.printers.enabled') %>
-                <i class="sn-icon sn-icon-check"></i>
               </div>
+              <i class="sn-icon sn-icon-check"></i>
+          </div>
+        </div>
+      </div>
+
+      <%# solid line divider %>
+      <div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px"></div>
+
+      <%# fluics printer %>
+      <div class="flex flex-row justify-between">
+        <%# left part %>
+        <div id="left-part" class="flex flex-col">
+          <%# title %>
+          <div class="flex flex-row justify-between pb-2">
+            <div class="font-bold text-sn-black">
+              <%= t('users.settings.account.addons.fluics_printer.title') %>
             </div>
-            <div class="description">
-              <%= t('users.settings.account.addons.fluics_printer.description') %>
-            </div>
+          </div>
+          <%# description text %>
+          <div class="text-sn-dark-grey pb-6">
+            <%= t('users.settings.account.addons.fluics_printer.description') %>
+          </div>
+          <%# button %>
+          <div>
             <% if !@label_printer_any && can_manage_label_printers? %>
               <%= link_to label_printers_path(), class: 'printer-details btn btn-primary' do %>
-                <i class="fas fa-key"></i>
-                <%= t('users.settings.account.addons.printers.enter_api_key') %>
+                <%= t('users.settings.account.addons.printers.set_up') %>
               <% end %>
             <% else %>
-              <%= link_to t('users.settings.account.addons.printers.printer_details'), label_printers_path(), class: 'printer-details' %>
+              <%= link_to t('users.settings.account.addons.printers.details'), label_printers_path(), class: 'text-sn-blue' %>
             <% end %>
           </div>
         </div>
+        <%# right-part %>
+        <div id="right-part" class="flex flex-row min-w-fit items-start">
+          <div class="flex items-center gap-2">
+              <div class="text-sn-black">
+                <%= t('users.settings.account.addons.printers.enabled') %>
+              </div>
+              <i class="sn-icon sn-icon-check"></i>
+          </div>
+        </div>
       </div>
     </div>
+
+    <%# Integrations inserted here via deface %>
   </div>
   <div class="tab-pane tab-pane-settings" role="tabpanel"></div>
 </div>
diff --git a/config/initializers/extends.rb b/config/initializers/extends.rb
index 4bd958580..332e2666c 100644
--- a/config/initializers/extends.rb
+++ b/config/initializers/extends.rb
@@ -623,6 +623,7 @@ class Extends
     results/index
     protocols/show
     preferences/index
+    addons/index
   )
 
   DEFAULT_USER_NOTIFICATION_SETTINGS = {
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 38750522d..0641021be 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2793,6 +2793,7 @@ en:
             printer_details: "Printer details"
             details: "Details"
             enter_api_key: "Enter API key"
+            set_up: "Set up"
             enabled: "Enabled"
           fluics_printer:
             title: "FLUICS Print"