diff --git a/.github/config/.finnishwords.txt b/.github/config/.finnishwords.txt
index 903927644..8c58ae752 100644
--- a/.github/config/.finnishwords.txt
+++ b/.github/config/.finnishwords.txt
@@ -96,18 +96,14 @@ kansio
 kansioille
 kansioina
 kansion
-kansion
 kansiossa
 kansiot
-kansiot
-kansiota
 kansiota
 kanssa
 kanssasi
 käynnissä
 käynnistyy
 käytä
-käytä
 käytettävissä
 käytetylle
 käytössä
@@ -165,6 +161,7 @@ koskevia
 kulutuksesta
 kulutus
 kunnes
+kuvaus
 kyseisen
 ladata
 ladattavat
@@ -174,7 +171,6 @@ lähetettäväksi
 lähetettävät
 lähetettiin
 lähetetyt
-lähetetyt
 lähettäessä
 lähettäjän
 lähettämistä
@@ -318,7 +314,6 @@ projekteja
 projekti
 projektia
 projektien
-projektien
 projektiin
 projektilla
 projektille
@@ -350,6 +345,7 @@ rajoitteiden
 resurssienkäyttö
 resurssit
 rivinvaihtoa
+saavutettavuus
 sähköpostitse
 säiliö
 säiliöitä
@@ -432,7 +428,6 @@ tarkoittaen
 tarvitset
 tässä
 tätä
-tätä
 taustalla
 tavallisesti
 täytyy
@@ -450,6 +445,7 @@ tieto
 tietoa
 tietosivulta
 tietotekniikan
+tietotekniikkakeskus
 tila
 tilan
 tilankäyttö
@@ -472,6 +468,7 @@ tunnuksen
 tunnus
 tunti
 tuo
+tuottaa
 tyhjä
 tyhjennä
 tyyppi
diff --git a/swift_browser_ui_frontend/public/index.html b/swift_browser_ui_frontend/public/index.html
index cad8bd1e9..8c9283e04 100644
--- a/swift_browser_ui_frontend/public/index.html
+++ b/swift_browser_ui_frontend/public/index.html
@@ -7,6 +7,8 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css">
+  <link rel="stylesheet" href="https://use.typekit.net/csv4mjm.css" />
+
   <title>Swift browser UI</title>
 </head>
 
diff --git a/swift_browser_ui_frontend/src/common/lang.js b/swift_browser_ui_frontend/src/common/lang.js
index c76fe1060..8ec546dab 100644
--- a/swift_browser_ui_frontend/src/common/lang.js
+++ b/swift_browser_ui_frontend/src/common/lang.js
@@ -177,7 +177,7 @@ let default_translations = {
         instructions: "Share ID instructions",
         close_instructions: "Close instructions",
         share_cont: "Share the bucket",
-        share_title: "Share folder: ",
+        share_title: "Share folder",
         share_subtitle:
           "This folder is already accessible to all the members" +
           " of this project.",
@@ -196,7 +196,7 @@ let default_translations = {
         shared_successfully: "Folder was shared successfully!",
         project_id: "Project ID",
         field_label: "Project Identifiers to share with",
-        field_placeholder: "Add Project IDs",
+        field_placeholder: "Add Share IDs",
         cancel: "Cancel",
         confirm: "Share",
         to_me: "Shared to the project",
@@ -451,6 +451,12 @@ let default_translations = {
         sharing: "Sharing API tokens",
         about: "About Sensitive Data Services",
       },
+      footerMenu:{
+        groupandprogram:"Sensitive Data Services - SD Connect",
+        csc:"Powered by CSC - IT Center for Science Ltd.",
+        servicedescription:"Service Description",
+        accessibility:"Accessibility",
+      },
     },
   },
   fi: {
@@ -621,7 +627,7 @@ let default_translations = {
         instructions: "Jaa tunnus ohjeet",
         close_instructions: "Sulje ohjeet",
         share_cont: "Jaa säiliö",
-        share_title: "Jaa kansio: ",
+        share_title: "Jaa kansio ",
         share_subtitle:
           "Tämä kansio on jo kaikkien tämän projektin jäsenten käytettävissä.",
         share_other_projects: "Jaa toisen projektin kanssa",
@@ -634,7 +640,7 @@ let default_translations = {
         read_perm: "Salli säiliön luku",
         write_perm: "Salli säiliöön kirjoitus",
         shared_successfully: "Kansion jakaminen onnistui!",
-        project_id: "Projektin tunnus",
+        project_id: "Jaa tunnus",
         field_label: "Jaa projektitunnisteille",
         field_placeholder: "Lisää projektitunnukset",
         cancel: "Peru",
@@ -885,6 +891,12 @@ let default_translations = {
         sharing: "API avainten jakaminen",
         about: "Tietoa",
       },
+      footerMenu:{
+        groupandprogram:"Sensitive Data Service-SD Connect",
+        csc:"Palvelun tuottaa CSC -Tieteen Tietotekniikkakeskus Oy",
+        servicedescription: "Palvelun Kuvaus",
+        accessibility:"Saavutettavuus",
+      },
     },
   },
 };
diff --git a/swift_browser_ui_frontend/src/components/CFooter.vue b/swift_browser_ui_frontend/src/components/CFooter.vue
new file mode 100644
index 000000000..c2115f74d
--- /dev/null
+++ b/swift_browser_ui_frontend/src/components/CFooter.vue
@@ -0,0 +1,113 @@
+<template>
+  <div id="c-footer">
+    <nav class="navbar">
+      <div class="navbar-menu is-active">
+        <div class="navbar-start">
+          <div class="col-3">
+            <div class="row navbar-item ">
+              <span class="largetext">
+                {{ $t("message.footerMenu.groupandprogram") }}
+              </span>
+            </div>
+            <div class="row navbar-item smalltext">
+              <a
+                class="linktext"
+                href="https://csc.fi"
+                :alt="$t('message.footerMenu.csc')"
+              >
+                {{ $t("message.footerMenu.csc") }}
+              </a>
+            </div>
+          </div>        
+        </div>
+    
+        <div
+          id="rightmenu"
+          class="navbar-end"
+        > 
+          <div class="navbar-item smalltext">
+            <a
+              class="linktext"
+              href="https://research.csc.fi/-/sd-connect"
+              :alt="$t('message.footerMenu.servicedescription')"
+            >
+              {{ $t("message.footerMenu.servicedescription") }}
+            </a>
+          </div> 
+          <div class="navbar-item smalltext">
+            <p>{{ $t("message.footerMenu.accessibility") }}</p> 
+          </div>
+        </div>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name:"CFooter",
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/css/prod.scss";
+
+#c-footer{
+  height:  fit-content;
+  width: 100%;
+  padding:40px 60px;
+  background-color:$csc-lightest-grey;
+  z-index: 2;
+}
+
+.navbar{
+  background-color:$csc-lightest-grey;
+  padding: auto;
+  width: 100%;  
+ 
+}
+.navbar-menu{
+  background-color:$csc-lightest-grey; 
+  width: 100%;
+  height: 100%;
+  box-shadow: none;
+}
+
+.navbar-start{
+  background-color:$csc-lightest-grey;
+}
+
+.navbar-end{
+  background-color:$csc-lightest-grey;
+}
+
+#leftmenu{
+  padding-left: 10px;
+}
+
+.largetext{
+  font-family: var(--csc-font-family);
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 19px;
+  color: $csc-grey;
+}
+.smalltext{
+  font-family:  var(--csc-font-family);;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 18px;
+  color: $csc-grey;
+}
+.linktext {
+  color: $csc-grey; 
+  font-weight: 400;
+}
+a:hover {
+  background-color: #CCF4F0;
+  text-decoration: underline;     
+}
+</style>
diff --git a/swift_browser_ui_frontend/src/components/EditTagsModal.vue b/swift_browser_ui_frontend/src/components/EditTagsModal.vue
index 6ee85eedb..cffc26b93 100644
--- a/swift_browser_ui_frontend/src/components/EditTagsModal.vue
+++ b/swift_browser_ui_frontend/src/components/EditTagsModal.vue
@@ -27,7 +27,7 @@
         size="large"
         @click="toggleEditTagsModal"
       >
-         {{ $t("message.cancel") }}
+        {{ $t("message.cancel") }}
       </c-button>
       <c-button
         size="large"
diff --git a/swift_browser_ui_frontend/src/components/UploadNotification.vue b/swift_browser_ui_frontend/src/components/UploadNotification.vue
index cd423a3bd..11f427af0 100644
--- a/swift_browser_ui_frontend/src/components/UploadNotification.vue
+++ b/swift_browser_ui_frontend/src/components/UploadNotification.vue
@@ -61,7 +61,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "@/css/prod.scss";
 
 h3 {
diff --git a/swift_browser_ui_frontend/src/css/csc.scss b/swift_browser_ui_frontend/src/css/csc.scss
index f114506ad..389920d26 100644
--- a/swift_browser_ui_frontend/src/css/csc.scss
+++ b/swift_browser_ui_frontend/src/css/csc.scss
@@ -17,12 +17,16 @@ $csc-light-green: #c9e2ae;
 $csc-grey: #595959;
 $csc-light-grey: #757575;
 $csc-lighter-grey: #d2d3d5;
+$csc-lightest-grey:#dfe1e3;
 $csc-grey-blue: #8196b9;
 $csc-light-grey-blue: #f8f9fc;
 $csc-yellow: #ffd534;
 $csc-green: #51a808;
 $csc-orange: #ff5800;
 
+//Font Setting
+$csc-font-family: 'museo-sans';
+
 // Set bulma initial colors to be derived from
 // Not overriding black, black's fine as is
 $orange: $csc-orange;
diff --git a/swift_browser_ui_frontend/src/entries/main.js b/swift_browser_ui_frontend/src/entries/main.js
index b2293ccbb..2d8d74fa4 100644
--- a/swift_browser_ui_frontend/src/entries/main.js
+++ b/swift_browser_ui_frontend/src/entries/main.js
@@ -46,6 +46,9 @@ import Resumable from "resumablejs";
 // Upload notification handler
 import UploadNotification from "@/components/UploadNotification";
 
+//Custom footer element
+import CFooter from "@/components/CFooter";
+
 // Import delay
 import delay from "lodash/delay";
 
@@ -123,6 +126,7 @@ new Vue({
   router,
   store,
   components: {
+    CFooter,
     BrowserMainNavbar,
     BrowserSecondaryNavbar,
     CreateFolderModal,
diff --git a/swift_browser_ui_frontend/src/pages/BrowserPage.vue b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
index 097d2055c..a2593e0b6 100644
--- a/swift_browser_ui_frontend/src/pages/BrowserPage.vue
+++ b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
@@ -51,25 +51,6 @@
         :active.sync="isLoading"
         :can-cancel="false"
       />
-      <footer
-        id="footer"
-        class="footer"
-      >
-        <div class="content has-text-centered">
-          <p>
-            <span class="has-text-weight-bold">
-              {{ $t("message.program_name") }}
-            </span>
-            {{ $t("message.devel") }}
-            <a
-              href="https://csc.fi"
-              :alt="$t('message.cscOrg')"
-            >{{
-              $t("message.cscOrg")
-            }}</a>
-          </p>
-        </div>
-      </footer>
       <c-toasts id="toasts" />
       <!-- TODO: Move folder toast to programmatical modal -->
       <c-toasts
@@ -85,6 +66,10 @@
           </p>
         </div>
       </c-toasts>
+      <!--New Footer Component-->
+      <div id="footer">
+        <CFooter />
+      </div> 
     </div>
   </div>
 </template>
@@ -92,11 +77,13 @@
 <script>
 import { truncate } from "@/common/conv";
 
+
 export default {
   name: "BrowserPage",
   filters: {
     truncate,
   },
+  
 };
 </script>
 
@@ -110,12 +97,16 @@ html, body {
 #mainContainer {
   min-height: 100vh;
   position: relative;
+  font-family: var(--csc-font-family);
 }
 
 #subContainer {
   height: 100%;
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
+  z-index: 1;
+  font-family: var(--csc-font-family);
 }
 
 .subContainer-additionalStyles {
@@ -222,6 +213,9 @@ c-modal {
 
 .search {
   flex: 0.4;
+  border: 1px solid #CACACA;
+    border-radius: 4px;
+    background: #FFFFFF;
 
   input, input::placeholder, .icon {
     color: $csc-grey !important;
@@ -232,7 +226,7 @@ c-modal {
   }
 
   input, input:focus {
-    box-shadow:rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
+    box-shadow:none;
   }
 
   input {
@@ -267,16 +261,6 @@ c-modal {
   border-radius: 6px;
 }
 
-.footer {
-  flex-shrink: 0;
-  height: 10rem;
-  width: 100%;
-}
-
-#footer {
-  margin-top: 15px;
-}
-
 #copyFolder-toasts {
   position: sticky;
   bottom: 30vh;
@@ -285,4 +269,13 @@ c-modal {
 .toasts-wrapper {
   padding: 1rem;
 }
+
+#footer{
+  position:relative;
+  bottom:0;
+  width: 100%;
+  margin-top: 15px;
+  z-index: 2;
+}
+
 </style>
diff --git a/swift_browser_ui_frontend/src/pages/IndexOIDCPage.vue b/swift_browser_ui_frontend/src/pages/IndexOIDCPage.vue
index 3534955e4..7ca4ba0fe 100644
--- a/swift_browser_ui_frontend/src/pages/IndexOIDCPage.vue
+++ b/swift_browser_ui_frontend/src/pages/IndexOIDCPage.vue
@@ -38,23 +38,6 @@
         </c-container>
       </c-flex>
     </c-row>
-    <footer>
-      <c-container>
-        <c-flex>
-          <div>
-            <h5>CSC - IT Center for Science Ltd.</h5>
-            <p>P.O. Box 405 FI-02101 Espoo, Finland</p>
-            <p>+358 9 457 2001</p>
-          </div>
-          <div>
-            <h5>Service Desk</h5>
-            <p>Open Monday to Friday from 8.30 a.m. to 4 p.m.</p>
-            <p>+358 9 457 2821</p>
-            <p>servicedesk@csc.fi</p>
-          </div>
-        </c-flex>
-      </c-container>
-    </footer>
   </c-main>
 </template>
 
@@ -71,25 +54,6 @@ c-login-card {
 c-button {
   margin-top: 2rem;
 }
-footer {
-  background-color: var(--csc-light-grey);
-  color: var(--csc-dark-grey);
-  padding: 1rem 0 1rem;
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-footer h5 {
-  font-weight: bold;
-}
-footer p {
-  font-size: 0.875rem;
-  line-height: 1rem;
-}
-footer c-flex {
-  display: flex;
-  justify-content: space-around;
-  text-align: center;
-}
+
+
 </style>
diff --git a/swift_browser_ui_frontend/src/pages/IndexPage.vue b/swift_browser_ui_frontend/src/pages/IndexPage.vue
index 343b677f3..ebbcb1ae0 100644
--- a/swift_browser_ui_frontend/src/pages/IndexPage.vue
+++ b/swift_browser_ui_frontend/src/pages/IndexPage.vue
@@ -93,31 +93,21 @@
         </c-container>
       </c-flex>
     </c-row>
-    <footer>
-      <c-container>
-        <c-flex>
-          <div>
-            <h5>CSC - IT Center for Science Ltd.</h5>
-            <p>P.O. Box 405 FI-02101 Espoo, Finland</p>
-            <p>+358 9 457 2001</p>
-          </div>
-          <div>
-            <h5>Service Desk</h5>
-            <p>Open Monday to Friday from 8.30 a.m. to 4 p.m.</p>
-            <p>+358 9 457 2821</p>
-            <p>servicedesk@csc.fi</p>
-          </div>
-        </c-flex>
-      </c-container>
-    </footer>
+    <div id="footer">
+      <CFooter />
+    </div>
   </c-main>
 </template>
 
 <script>
 import checkIDB from "@/common/idb_support";
+import CFooter from "@/components/CFooter.vue";
 
 export default {
-  mounted: function() {
+  components:{
+    CFooter,
+  },
+  mounted: function () {
     checkIDB().then(result => this.idb = result);
   },
 };
@@ -144,25 +134,12 @@ c-login-card {
 c-button {
   margin-top: 2rem;
 }
-footer {
-  background-color: var(--csc-light-grey);
-  color: var(--csc-dark-grey);
-  padding: 1rem 0 1rem;
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-footer h5 {
-  font-weight: bold;
-}
-footer p {
-  font-size: 0.875rem;
-  line-height: 1rem;
-}
-footer c-flex {
-  display: flex;
-  justify-content: space-around;
-  text-align: center;
+
+#footer{
+  position:fixed;
+  bottom:0;
+  width:100%;
+  z-index: 2;
 }
+
 </style>
diff --git a/swift_browser_ui_frontend/src/pages/LoginPage.vue b/swift_browser_ui_frontend/src/pages/LoginPage.vue
index 8c9db62e7..5e9659bb9 100644
--- a/swift_browser_ui_frontend/src/pages/LoginPage.vue
+++ b/swift_browser_ui_frontend/src/pages/LoginPage.vue
@@ -86,19 +86,19 @@
 }
 
 h2 {
-  font-family: sans-serif;
+  font-family: 'Museo Sans';
   text-align: center;
 }
 
 .maintext {
-  font-family: sans-serif;
+  font-family: 'Museo Sans';
   text-align: justify;
   line-height: 1.5;
 }
 
 #manlist {
   text-align: justify;
-  font-family: monospace;
+  font-family:'Museo Sans';
   line-height: 1.4;
 }
 
diff --git a/swift_browser_ui_frontend/src/pages/LoginPassword.vue b/swift_browser_ui_frontend/src/pages/LoginPassword.vue
index d5d48def4..b3cd37a50 100644
--- a/swift_browser_ui_frontend/src/pages/LoginPassword.vue
+++ b/swift_browser_ui_frontend/src/pages/LoginPassword.vue
@@ -59,23 +59,7 @@
         </c-container>
       </c-flex>
     </c-row>
-    <footer>
-      <c-container>
-        <c-flex>
-          <div>
-            <h5>CSC - IT Center for Science Ltd.</h5>
-            <p>P.O. Box 405 FI-02101 Espoo, Finland</p>
-            <p>+358 9 457 2001</p>
-          </div>
-          <div>
-            <h5>Service Desk</h5>
-            <p>Open Monday to Friday from 8.30 a.m. to 4 p.m.</p>
-            <p>+358 9 457 2821</p>
-            <p>servicedesk@csc.fi</p>
-          </div>
-        </c-flex>
-      </c-container>
-    </footer>
+    <CFooter />
   </c-main>
 </template>
 
@@ -92,25 +76,4 @@ c-login-card {
 c-button {
   margin-top: 2rem;
 }
-footer {
-  background-color: var(--csc-light-grey);
-  color: var(--csc-dark-grey);
-  padding: 1rem 0 1rem;
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-footer h5 {
-  font-weight: bold;
-}
-footer p {
-  font-size: 0.875rem;
-  line-height: 1rem;
-}
-footer c-flex {
-  display: flex;
-  justify-content: space-around;
-  text-align: center;
-}
 </style>
diff --git a/swift_browser_ui_frontend/src/views/DirectRequest.vue b/swift_browser_ui_frontend/src/views/DirectRequest.vue
index 6eddc13a5..66e12ff39 100644
--- a/swift_browser_ui_frontend/src/views/DirectRequest.vue
+++ b/swift_browser_ui_frontend/src/views/DirectRequest.vue
@@ -140,6 +140,7 @@ export default {
     width: auto;
     margin-left: 5%;
     margin-right: 5%;
+    font-family: 'museo-sans';
   }
   .requesthead {
     margin: 1% 1% 1% 0;
diff --git a/swift_browser_ui_frontend/src/views/DirectShare.vue b/swift_browser_ui_frontend/src/views/DirectShare.vue
index ce7f3598c..31e76e0de 100644
--- a/swift_browser_ui_frontend/src/views/DirectShare.vue
+++ b/swift_browser_ui_frontend/src/views/DirectShare.vue
@@ -197,11 +197,14 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import "@/css/prod.scss";
+
   #sharingview {
     width: auto;
     margin-left: 5%;
     margin-right: 5%;
+    font-family: 'museo-sans';
   }
   .sharinghead {
     margin: 1% 1% 1% 0;
diff --git a/swift_browser_ui_frontend/src/views/Tokens.vue b/swift_browser_ui_frontend/src/views/Tokens.vue
index c1701eef5..3fdd9cc6c 100644
--- a/swift_browser_ui_frontend/src/views/Tokens.vue
+++ b/swift_browser_ui_frontend/src/views/Tokens.vue
@@ -193,6 +193,10 @@ export default {
 
 <style scoped lang="scss">
 @import "@/css/prod.scss";
+
+.contents{
+  font-family: var(--csc-font-family);
+}
 .tokenContents {
   width: 90%;
   margin-left: 5%;