diff --git a/src/App.css b/src/App.css
index 9574ef4..4b5463c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,9 +2,14 @@
   text-align: center;
 }
 .main {
-  margin-top: 75px;
-  text-align: center;
+  margin-left: 250px;
+}
+
+.breadcrumbs {
+  padding-top: 1vw;
+  padding-left: 2vw;
 }
+
 @media (max-width: 500px) {
   .main {
     margin-top: 100px;
diff --git a/src/components/NavBar.css b/src/components/NavBar.css
index af98681..aaac794 100644
--- a/src/components/NavBar.css
+++ b/src/components/NavBar.css
@@ -1,30 +1,38 @@
 .navbar {
-  position: fixed;
-  top: 0;
-  width: 100vw;
-  color: gray;
   z-index: 1100;
 }
 
+.navbar .MuiDrawer-paper {
+  width: 250px;
+  background-color: rgb(92, 93, 111);
+  color: rgb(209, 211, 223);
+}
+
 .navbar img {
-  margin-right: 2vw;
+  margin-top: 35px;
+  margin-bottom: 90px;
+  width: 200px;
+  border-radius: 2px;
 }
 
-.navbar p {
+.navbarOptions p {
   cursor: pointer;
 }
 
 .navbarOptions {
   display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
   overflow-wrap: break-word;
   justify-content: space-between;
+  flex-direction: column;
+  height: 45vh;
+  align-content: center;
 }
 
 .menuBurger {
   position: fixed;
-  right: 2vw;
+  bottom: 10px;
+  left: 10px;
 }
 
 .menu {
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 624e560..719913f 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,16 +1,15 @@
 import MenuIcon from "@mui/icons-material/Menu";
 import {
-  AppBar,
   Button,
   ButtonGroup,
   Divider,
+  Drawer,
   IconButton,
   Menu,
   MenuItem,
-  Toolbar,
   Typography,
 } from "@mui/material";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { push } from "redux-first-history";
 import { useAppDispatch } from "../app/hooks";
@@ -25,9 +24,10 @@ function Navbar({ partial }: { partial?: number }) {
     i18n.changeLanguage(language);
     console.debug(`Language changed to ${language}`);
   };
+
   return (
-    <AppBar color="secondary" className="navbar">
-      <Toolbar>
+    <Drawer className="navbar" variant="permanent" anchor="left">
+      <div className="navbarOptions">
         <Typography>
           <img
             src={require("../static/llng-logo-32.png")}
@@ -35,15 +35,13 @@ function Navbar({ partial }: { partial?: number }) {
             style={{ backgroundColor: "white" }}
           />
         </Typography>
-        <Divider />
         {!partial && (
-          <div className="navbarOptions">
+          <>
             <Typography
               variant="h6"
               component="div"
-              onClick={() => dispatch(push(""))}
+              onClick={() => dispatch(push("/manager.html"))}
               style={{ cursor: "pointer", marginRight: "15px" }}
-              sx={{ flexGrow: 1 }}
             >
               {t("Configuration")}
             </Typography>
@@ -51,7 +49,6 @@ function Navbar({ partial }: { partial?: number }) {
               variant="h6"
               component="div"
               style={{ cursor: "pointer", marginRight: "15px" }}
-              sx={{ flexGrow: 1 }}
             >
               {t("sessions")}
             </Typography>
@@ -59,7 +56,6 @@ function Navbar({ partial }: { partial?: number }) {
               variant="h6"
               component="div"
               style={{ cursor: "pointer", marginRight: "15px" }}
-              sx={{ flexGrow: 1 }}
             >
               {t("notifications")}
             </Typography>
@@ -67,82 +63,60 @@ function Navbar({ partial }: { partial?: number }) {
               variant="h6"
               component="div"
               style={{ cursor: "pointer", marginRight: "15px" }}
-              sx={{ flexGrow: 1 }}
             >
               {t("secondFactors")}
             </Typography>
-          </div>
+          </>
         )}
-
-        <IconButton
-          size="large"
-          edge="end"
-          className="menuBurger"
-          aria-label="menu burger"
-          aria-controls="menu-appbar"
-          aria-haspopup="true"
-          onClick={() => setMenuOpen(true)}
-          color="inherit"
-        >
-          <MenuIcon />
-        </IconButton>
-        <Menu
-          id="menu-appbar"
-          anchorOrigin={{
-            vertical: "top",
-            horizontal: "right",
-          }}
-          keepMounted
-          transformOrigin={{
-            vertical: "top",
-            horizontal: "right",
-          }}
-          open={menuOpen}
-          onClose={() => setMenuOpen(false)}
-        >
-          <MenuItem
-            onClick={() => {
-              (window as any).menulinks.map(
-                (el: { title: string; target: string }) => {
-                  if (el.title === "backtoportal") {
-                    window.location.href = el.target;
-                  }
-                }
-              );
-            }}
-          >
-            {t("backtoportal")}
-          </MenuItem>
-          <MenuItem
-            onClick={() => {
-              (window as any).menulinks.map(
-                (el: { title: string; target: string }) => {
-                  if (el.title === "logout") {
-                    window.location.href = el.target;
-                  }
-                }
-              );
-            }}
+      </div>
+      <IconButton
+        size="large"
+        edge="end"
+        className="menuBurger"
+        aria-label="menu burger"
+        aria-controls="menu-appbar"
+        aria-haspopup="true"
+        onClick={() => setMenuOpen(true)}
+        color="inherit"
+      >
+        <MenuIcon />
+      </IconButton>
+      <Menu
+        id="menu-appbar"
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+        keepMounted
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        open={menuOpen}
+        onClose={() => setMenuOpen(false)}
+      >
+        <MenuItem onClick={() => console.debug("portal")}>
+          {t("backtoportal")}
+        </MenuItem>
+        <MenuItem onClick={() => console.debug("logout")}>
+          {t("logout")}
+        </MenuItem>
+        <Divider />
+        <MenuItem>
+          <ButtonGroup
+            variant="text"
+            color="secondary"
+            aria-label="Basic button group"
           >
-            {t("logout")}
-          </MenuItem>
-          <Divider />
-          <MenuItem>
-            <ButtonGroup
-              variant="text"
-              color="secondary"
-              aria-label="Basic button group"
-            >
-              <Button onClick={() => handleLanguageChange("fr")}>🇫🇷</Button>
-              <Button onClick={() => handleLanguageChange("en")}>🇬🇧</Button>
-              <Button onClick={() => handleLanguageChange("es")}>🇪🇸</Button>
-            </ButtonGroup>
-          </MenuItem>
-          <Divider />
-          <MenuItem>{t("version")} 0.0.1</MenuItem>
-        </Menu>
-      </Toolbar>
-    </AppBar>
+            <Button onClick={() => handleLanguageChange("fr")}>🇫🇷</Button>
+            <Button onClick={() => handleLanguageChange("en")}>🇬🇧</Button>
+            <Button onClick={() => handleLanguageChange("es")}>🇪🇸</Button>
+          </ButtonGroup>
+        </MenuItem>
+        <Divider />
+        <MenuItem>{t("version")} 0.0.1</MenuItem>
+      </Menu>
+    </Drawer>
   );
 }
 
diff --git a/src/components/SaveButton.css b/src/components/SaveButton.css
index 38dc554..c67d16a 100644
--- a/src/components/SaveButton.css
+++ b/src/components/SaveButton.css
@@ -8,6 +8,7 @@
   border-radius: 50%;
   bottom: 2%;
   right: 2%;
+  z-index: 2000;
 }
 
 .notif {
diff --git a/src/components/SaveButton.tsx b/src/components/SaveButton.tsx
index 9b1b4c7..7ed90c4 100644
--- a/src/components/SaveButton.tsx
+++ b/src/components/SaveButton.tsx
@@ -20,7 +20,6 @@ export default function SaveButton({ partial }: { partial?: boolean }) {
     <div>
       <Fab
         className="saveButton"
-        style={{ position: "fixed", bottom: "2%", left: "2%" }}
         color="primary"
         onClick={async () => {
           let stateOk = true;
diff --git a/src/components/applicationsComponents/AppPage.css b/src/components/applicationsComponents/AppPage.css
index 670f1e3..c165c2e 100644
--- a/src/components/applicationsComponents/AppPage.css
+++ b/src/components/applicationsComponents/AppPage.css
@@ -75,7 +75,6 @@ textarea {
   justify-content: space-between;
   background-color: rgb(37, 63, 63);
   padding: 2%;
-  border-radius: 15px;
   color: #acacac;
   display: flex;
   justify-content: space-around;
diff --git a/src/components/applicationsComponents/CasApp.tsx b/src/components/applicationsComponents/CasApp.tsx
index c86b391..0105c9b 100644
--- a/src/components/applicationsComponents/CasApp.tsx
+++ b/src/components/applicationsComponents/CasApp.tsx
@@ -49,7 +49,9 @@ export function CasApp({ name }: { name: string }) {
   const dispatch = useAppDispatch();
   return (
     <div>
-      <strong className="title">{name}</strong>
+      <div className="top">
+        <strong className="title">{name}</strong>
+      </div>
       <div className="optionNavbar">
         <label
           className={`option ${optionSelected === "basic" ? "selected" : ""}`}
diff --git a/src/components/applicationsComponents/NativeApp.tsx b/src/components/applicationsComponents/NativeApp.tsx
index ac2d463..4bc8c53 100644
--- a/src/components/applicationsComponents/NativeApp.tsx
+++ b/src/components/applicationsComponents/NativeApp.tsx
@@ -405,7 +405,9 @@ export function NativeApp({ name }: { name: string }) {
   const dispatch = useAppDispatch();
   return (
     <div>
-      <strong className="title">{name}</strong>
+      <div className="top">
+        <strong className="title">{name}</strong>
+      </div>
       <div className="optionNavbar">
         <label
           className={`option ${optionSelected === "basic" ? "selected" : ""}`}
diff --git a/src/components/applicationsComponents/OIDCApp.tsx b/src/components/applicationsComponents/OIDCApp.tsx
index a643f2e..2875a58 100644
--- a/src/components/applicationsComponents/OIDCApp.tsx
+++ b/src/components/applicationsComponents/OIDCApp.tsx
@@ -33,7 +33,9 @@ export function OIDCApp({ name }: { name: string }) {
   const dispatch = useAppDispatch();
   return (
     <div>
-      <strong className="title">{name}</strong>
+      <div className="top">
+        <strong className="title">{name}</strong>
+      </div>
       <div className="optionNavbar">
         <label
           className={`option ${
diff --git a/src/components/applicationsComponents/SAMLApp.tsx b/src/components/applicationsComponents/SAMLApp.tsx
index 276a482..2a84b59 100644
--- a/src/components/applicationsComponents/SAMLApp.tsx
+++ b/src/components/applicationsComponents/SAMLApp.tsx
@@ -42,7 +42,9 @@ export function SAMLApp({
   const [optionSelected, setOptionSelected] = useState("basic");
   return (
     <div>
-      <strong className="title">{name}</strong>
+      <div className="top">
+        <strong className="title">{name}</strong>
+      </div>
       <div className="optionNavbar">
         <label
           className={`option ${optionSelected === "basic" ? "selected" : ""}`}
diff --git a/src/components/issuersComponents/CasIssuer.tsx b/src/components/issuersComponents/CasIssuer.tsx
index 9b61236..5234f93 100644
--- a/src/components/issuersComponents/CasIssuer.tsx
+++ b/src/components/issuersComponents/CasIssuer.tsx
@@ -31,7 +31,9 @@ export function CasIssuer() {
   const [option, setOption] = useState("basic");
   return (
     <div>
-      <strong className="title">{t("casServiceMetadata")}</strong>
+      <div className="top">
+        <strong className="title">{t("casServiceMetadata")}</strong>{" "}
+      </div>
       <div className="optionNavbar">
         <label
           className={`option ${option === "basic" ? "selected" : ""}`}
diff --git a/src/components/issuersComponents/GetIssuer.tsx b/src/components/issuersComponents/GetIssuer.tsx
index 51e2578..364e3b7 100644
--- a/src/components/issuersComponents/GetIssuer.tsx
+++ b/src/components/issuersComponents/GetIssuer.tsx
@@ -20,8 +20,9 @@ export function GetIssuer() {
 
   return (
     <div>
-      <strong className="title">{t("issuerDBGetParameters")}</strong>
-
+      <div className="top">
+        <strong className="title">{t("issuerDBGetParameters")}</strong>
+      </div>
       <div className="appDesc">
         <div className="box">
           <table>
diff --git a/src/components/issuersComponents/OIDCIssuer.tsx b/src/components/issuersComponents/OIDCIssuer.tsx
index 90a451c..325062e 100644
--- a/src/components/issuersComponents/OIDCIssuer.tsx
+++ b/src/components/issuersComponents/OIDCIssuer.tsx
@@ -34,7 +34,9 @@ export function OIDCIssuer() {
 
   return (
     <div>
-      <strong className="title">{t("OIDCServiceMetaData")}</strong>
+      <div className="top">
+        <strong className="title">{t("OIDCServiceMetaData")}</strong>
+      </div>
       <div className="optionNavbar">
         <label
           className={`option ${option === "basic" ? "selected" : ""}`}
diff --git a/src/components/issuersComponents/OIDIssuer.tsx b/src/components/issuersComponents/OIDIssuer.tsx
index 0cada8c..339463a 100644
--- a/src/components/issuersComponents/OIDIssuer.tsx
+++ b/src/components/issuersComponents/OIDIssuer.tsx
@@ -18,7 +18,9 @@ export function OIDIssuer() {
   const dispatch = useAppDispatch();
   return (
     <div>
-      <strong className="title">{t("issuerDBOIDParameters")}</strong>
+      <div className="top">
+        <strong className="title">{t("issuerDBOIDParameters")}</strong>
+      </div>
       <div className="appDesc">
         <div className="box">
           <table>
diff --git a/src/components/issuersComponents/SAMLIssuer.tsx b/src/components/issuersComponents/SAMLIssuer.tsx
index cb9f741..121583c 100644
--- a/src/components/issuersComponents/SAMLIssuer.tsx
+++ b/src/components/issuersComponents/SAMLIssuer.tsx
@@ -52,19 +52,23 @@ export function SAMLIssuer() {
 
   return (
     <div>
-      <strong className="title">
-        {t("samlServiceMetaData")}
-        <IconButton
-          size="large"
-          color="secondary"
-          onClick={async () =>
-            await exportData("samlMetadata", config.cfgNum ? config.cfgNum : 1)
-          }
-        >
-          <DownloadIcon />
-        </IconButton>
-      </strong>
-
+      <div className="top">
+        <strong className="title">
+          {t("samlServiceMetaData")}
+          <IconButton
+            size="large"
+            color="secondary"
+            onClick={async () =>
+              await exportData(
+                "samlMetadata",
+                config.cfgNum ? config.cfgNum : 1
+              )
+            }
+          >
+            <DownloadIcon />
+          </IconButton>
+        </strong>{" "}
+      </div>
       <div className="optionNavbar">
         <label
           className={`option ${option === "basic" ? "selected" : ""}`}
diff --git a/src/components/managerComponents/AddApp.css b/src/components/managerComponents/AddApp.css
index 1cf2d12..875e208 100644
--- a/src/components/managerComponents/AddApp.css
+++ b/src/components/managerComponents/AddApp.css
@@ -1,13 +1,5 @@
 .addButton {
-  position: fixed;
-  width: 75px;
-  height: 75px;
-  background: #fff;
-  cursor: pointer;
-  border: 2px solid coral;
-  border-radius: 50%;
-  bottom: 2%;
-  right: 2%;
+  left: 2vw;
 }
 
 .modal > .close {
diff --git a/src/components/managerComponents/AddApp.tsx b/src/components/managerComponents/AddApp.tsx
index 12a3ab7..4014df5 100644
--- a/src/components/managerComponents/AddApp.tsx
+++ b/src/components/managerComponents/AddApp.tsx
@@ -1,5 +1,5 @@
 import AddIcon from "@mui/icons-material/Add";
-import { Dialog, DialogContent, DialogTitle, Fab } from "@mui/material";
+import { Button, Dialog, DialogContent, DialogTitle } from "@mui/material";
 import { t } from "i18next";
 import { useState } from "react";
 import "./AddApp.css";
@@ -11,16 +11,17 @@ function AddApp() {
   };
   return (
     <div>
-      <Fab
+      <Button
         className="addButton"
-        style={{ position: "fixed", bottom: "2%", right: "2%" }}
+        variant="contained"
         color="primary"
         onClick={() => {
           setOpen(!open);
         }}
       >
         <AddIcon fontSize="large" />
-      </Fab>
+        <span>{t("newApp")}</span>
+      </Button>
       <Dialog
         fullWidth
         open={open}
diff --git a/src/components/managerComponents/AppCard.css b/src/components/managerComponents/AppCard.css
index de38039..cfda10f 100644
--- a/src/components/managerComponents/AppCard.css
+++ b/src/components/managerComponents/AppCard.css
@@ -1,13 +1,20 @@
 .card {
-  background-color: rgb(215, 239, 247);
-  border: 2px solid #acacac;
-  padding: 5%;
-  border-radius: 15px;
+  background-color: white;
+  box-shadow: 1px 1px 1px #888888;
+  padding: 15px;
+  border-radius: 5px;
   align-content: center;
   cursor: pointer;
   position: relative;
+  flex-direction: row;
 }
 
+.cardInfo {
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+  align-items: center;
+}
 .card:hover {
   box-shadow: 5px 5px 5px #888888;
 }
@@ -26,14 +33,9 @@
   background-color: red;
 }
 
-.more {
-  width: 25px;
-  transform: rotate(-90deg) translateX(-25%);
-}
-
-.moreOptions {
-  background-color: white;
-  border-radius: 15px;
+.name {
+  display: flex;
+  flex-direction: column;
 }
 .menu-item {
   cursor: pointer;
@@ -55,18 +57,6 @@
 }
 
 .bottomRectangle {
-  background-color: rgba(
-    0,
-    0,
-    0,
-    0.158
-  ); /* Change this to the desired background color */
-  padding: 5px 10px;
-  border: 1px solid #acacac;
-  border-radius: 10px;
   font-size: 12px;
   text-align: center;
-  position: absolute;
-  top: 0;
-  left: 0;
 }
diff --git a/src/components/managerComponents/AppCard.tsx b/src/components/managerComponents/AppCard.tsx
index d2a806f..9a6baf4 100644
--- a/src/components/managerComponents/AppCard.tsx
+++ b/src/components/managerComponents/AppCard.tsx
@@ -1,7 +1,7 @@
 import ControlPointDuplicateOutlinedIcon from "@mui/icons-material/ControlPointDuplicateOutlined";
 import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
 import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
-import { Button, ButtonGroup, Menu, TextField } from "@mui/material";
+import { Button, ButtonGroup, Chip, Menu, TextField } from "@mui/material";
 import { t } from "i18next";
 import { useState } from "react";
 import { push } from "redux-first-history";
@@ -67,11 +67,37 @@ function AppCard({
         role="gridcell"
         onClick={() => dispatch(push(`#app/${type}/${info.name}`))}
       >
-        <div data-testid="appcard">
-          <div>
-            <strong className="title2">
-              {info.name} <span> {!rule ? "⚠️" : ""}</span>
-            </strong>
+        <div className="cardInfo" data-testid="appcard">
+          <Chip label={t(type)} className="bottomRectangle" />
+          <strong className="title2">
+            {info.name} <span> {!rule ? "⚠️" : ""}</span>
+          </strong>
+          <div className="name">
+            {" "}
+            {type === "native" ? (
+              <div className="maintenanceToggle">
+                <p>{t("maintenance")}</p>
+                <div
+                  data-testid={`maintenanceButton.${info.name}`}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                >
+                  <ToggleButton
+                    inputProps={{ role: "switch" }}
+                    data-testid={`maintenance.${info.name}`}
+                    color="secondary"
+                    role="switch"
+                    checked={maintenanceToggled}
+                    onChange={() =>
+                      dispatch(toggleMaintenance(String(info.name)))
+                    }
+                  />
+                </div>
+              </div>
+            ) : (
+              ""
+            )}
             <ButtonGroup size="small" color="secondary">
               <Button
                 onClick={(e) => {
@@ -104,31 +130,6 @@ function AppCard({
               </Button>
             </ButtonGroup>
           </div>
-          {type === "native" ? (
-            <div className="maintenanceToggle">
-              <p>{t("maintenance")}</p>
-              <div
-                data-testid={`maintenanceButton.${info.name}`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                }}
-              >
-                <ToggleButton
-                  inputProps={{ role: "switch" }}
-                  data-testid={`maintenance.${info.name}`}
-                  color="secondary"
-                  role="switch"
-                  checked={maintenanceToggled}
-                  onChange={() =>
-                    dispatch(toggleMaintenance(String(info.name)))
-                  }
-                />
-              </div>
-            </div>
-          ) : (
-            ""
-          )}
-          <div className="bottomRectangle">{t(type)}</div>
         </div>
       </div>
       <Menu
diff --git a/src/components/managerComponents/Filters.css b/src/components/managerComponents/Filters.css
index 228a97c..4ab0d7c 100644
--- a/src/components/managerComponents/Filters.css
+++ b/src/components/managerComponents/Filters.css
@@ -1,8 +1,7 @@
 .filters {
   display: flex;
-  justify-content: right;
-  margin: 0% 10%;
-  justify-content: space-between;
+  margin-left: 2vw;
+  align-items: center;
 }
 
 .filter {
diff --git a/src/components/managerComponents/Filters.tsx b/src/components/managerComponents/Filters.tsx
index 6b0a04c..caf3aca 100644
--- a/src/components/managerComponents/Filters.tsx
+++ b/src/components/managerComponents/Filters.tsx
@@ -1,6 +1,6 @@
-import { Button, Checkbox, Menu, MenuItem, TextField } from "@mui/material";
+import SortByAlphaIcon from "@mui/icons-material/SortByAlpha";
+import { Button, TextField } from "@mui/material";
 import { t } from "i18next";
-import React from "react";
 import "./Filters.css";
 function FilterToggle({
   filters,
@@ -9,14 +9,6 @@ function FilterToggle({
   filters: { alpha: boolean; search: string };
   setFilters: Function;
 }) {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
   return (
     <div className="filters">
       <div>
@@ -29,27 +21,13 @@ function FilterToggle({
         />
       </div>
       <Button
-        variant="outlined"
-        className="filter"
-        aria-controls={open ? "basic-menu" : undefined}
-        aria-haspopup="true"
-        aria-expanded={open ? "true" : undefined}
-        onClick={handleClick}
+        aria-labelledby="alpha-label"
+        onClick={() => setFilters({ ...filters, alpha: !filters.alpha })}
+        color={filters.alpha ? "primary" : "secondary"}
       >
-        {t("ldapFilters")}
+        <SortByAlphaIcon />
       </Button>
-      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
-        <MenuItem
-          onClick={() => setFilters({ ...filters, alpha: !filters.alpha })}
-        >
-          <label id="alpha-label">{t("alphabetical")}</label>
-          <Checkbox
-            aria-labelledby="alpha-label"
-            onChange={() => setFilters({ ...filters, alpha: !filters.alpha })}
-            checked={filters.alpha}
-          />
-        </MenuItem>
-      </Menu>
+      <label>{t("Sort")}</label>
     </div>
   );
 }
diff --git a/src/components/managerComponents/Issuers.css b/src/components/managerComponents/Issuers.css
index 2772499..3125be7 100644
--- a/src/components/managerComponents/Issuers.css
+++ b/src/components/managerComponents/Issuers.css
@@ -1,11 +1,9 @@
 .issuersList {
-  background-color: coral;
-  border-radius: 20px;
+  background-color: white;
   padding: 15px;
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
-  margin: 15px;
 }
 
 .issuers {
diff --git a/src/components/managerComponents/Issuers.tsx b/src/components/managerComponents/Issuers.tsx
index 4a15766..fbad2cc 100644
--- a/src/components/managerComponents/Issuers.tsx
+++ b/src/components/managerComponents/Issuers.tsx
@@ -133,7 +133,7 @@ function Issuers() {
             ))}
           >
             <WarningTwoToneIcon
-              color="warning"
+              color="primary"
               data-testid="warning"
               style={{
                 visibility: warnings.samlWarning ? "visible" : "hidden",
@@ -199,7 +199,7 @@ function Issuers() {
             ))}
           >
             <WarningTwoToneIcon
-              color="warning"
+              color="primary"
               data-testid="warning"
               style={{
                 visibility: warnings.oidcWarning ? "visible" : "hidden",
@@ -237,7 +237,7 @@ function Issuers() {
             ))}
           >
             <WarningTwoToneIcon
-              color="warning"
+              color="primary"
               data-testid="warning"
               style={{ visibility: warnings.casWarning ? "visible" : "hidden" }}
             />
diff --git a/src/dashboards/Manager.css b/src/dashboards/Manager.css
index 9501a65..0db48dc 100644
--- a/src/dashboards/Manager.css
+++ b/src/dashboards/Manager.css
@@ -8,30 +8,23 @@
 }
 
 .grid {
-  display: grid;
+  display: flex;
   justify-content: center;
-  margin: 2%;
-  margin-bottom: 75px;
+  margin-left: 2vw;
+  margin-right: 5vw;
   grid-gap: 5px;
-  grid-auto-flow: row;
-  grid-auto-rows: 1fr;
+  flex-flow: column;
 }
 
-@media only screen and (min-width: 640px) {
-  .grid {
-    grid-template-columns: 45% 45%;
-  }
-}
-
-@media (min-width: 981px) {
-  .grid {
-    grid-template-columns: 30% 30% 30%;
-  }
+.top {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  padding: 2vw;
 }
 
 .title {
   font-size: xx-large;
-  padding: 5px;
 }
 .title2 {
   font-size: larger;
diff --git a/src/dashboards/Manager.tsx b/src/dashboards/Manager.tsx
index 2a86d51..d472858 100644
--- a/src/dashboards/Manager.tsx
+++ b/src/dashboards/Manager.tsx
@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { push } from "redux-first-history";
 import { useAppDispatch, useAppSelector } from "../app/hooks";
+import AddApp from "../components/managerComponents/AddApp";
 import AppCard from "../components/managerComponents/AppCard";
 import FilterToggle from "../components/managerComponents/Filters";
 import Issuers from "../components/managerComponents/Issuers";
@@ -170,7 +171,7 @@ export default function Manager() {
           el1.props.info.name > el2.props.info.name ? 1 : -1
         );
       }
-      const pageLimit = 12;
+      const pageLimit = 6;
       const pageNb = Math.ceil(renderedData.length / pageLimit);
       const pages = Array.from(
         { length: Math.ceil(renderedData.length / pageLimit) },
@@ -182,40 +183,31 @@ export default function Manager() {
 
       return (
         <>
-          <strong className="title"> {t("currentConfiguration")}</strong>
-          <Button
-            variant="contained"
-            sx={{ verticalAlign: "top" }}
-            className="cfgNum"
-            color={config.data.metadata.next ? "warning" : "success"}
-            onClick={(e) => {
-              handleClick(e);
-            }}
-          >
-            {config.data.metadata.cfgNum}
-          </Button>
-          <Button
-            onClick={() => {
-              dispatch(push("#catandapp"));
-            }}
-          >
-            <WidgetsOutlinedIcon color="secondary" />
-          </Button>
+          <div className="top">
+            <strong className="title"> {t("currentConfiguration")}</strong>
+            <Button
+              variant="contained"
+              sx={{ verticalAlign: "top" }}
+              className="cfgNum"
+              color={config.data.metadata.next ? "warning" : "success"}
+              onClick={(e) => {
+                handleClick(e);
+              }}
+            >
+              {config.data.metadata.cfgNum}
+            </Button>
+            <Button
+              onClick={() => {
+                dispatch(push("#catandapp"));
+              }}
+            >
+              <WidgetsOutlinedIcon color="secondary" />
+            </Button>
+            <Divider />
+            <AddApp />
+          </div>
           <Issuers />
           <FilterToggle filters={filters} setFilters={setFilters} />
-          <Pagination
-            sx={{
-              justifyContent: "center",
-              display: "flex",
-            }}
-            count={pageNb}
-            page={page}
-            onChange={handleChangePage}
-            color="primary"
-            size="large"
-            showFirstButton
-            showLastButton
-          />
           <div className="grid">{pages[page - 1]}</div>
           <Pagination
             sx={{
diff --git a/src/index.css b/src/index.css
index 4a1df4d..67e415c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,6 @@
 body {
   margin: 0;
+  background-color: rgb(232, 233, 235);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
diff --git a/src/pages/Configuration.tsx b/src/pages/Configuration.tsx
index 35b619f..d16729b 100644
--- a/src/pages/Configuration.tsx
+++ b/src/pages/Configuration.tsx
@@ -4,7 +4,6 @@ import { t } from "i18next";
 import { useEffect, useState } from "react";
 import { push } from "redux-first-history";
 import { useAppDispatch, useAppSelector } from "../app/hooks";
-import AddApp from "../components/managerComponents/AddApp";
 import { AdvancedAuthParams } from "../dashboards/AdvancedAuthParams";
 import { ApplicationDashboard } from "../dashboards/ApplicationDashboard";
 import { CatAndAppList } from "../dashboards/CatAndAppList";
@@ -45,7 +44,7 @@ export function Configuration({
     case "app":
       return (
         <div className="main">
-          <Breadcrumbs>
+          <Breadcrumbs className="breadcrumbs">
             <Link underline="hover" color="inherit">
               <span onClick={() => dispatch(push(``))}>{t("conf")}</span>
             </Link>
@@ -74,7 +73,7 @@ export function Configuration({
     case "conf":
       return (
         <div className="main">
-          <Breadcrumbs>
+          <Breadcrumbs className="breadcrumbs">
             <Link underline="hover" color="inherit">
               <span onClick={() => dispatch(push(``))}>{t("conf")}</span>
             </Link>
@@ -87,14 +86,13 @@ export function Configuration({
           <Manager />
           <div>
             <SaveButton />
-            <AddApp />
           </div>
         </div>
       );
     case "authParams":
       return (
         <div className="main">
-          <Breadcrumbs>
+          <Breadcrumbs className="breadcrumbs">
             <Link underline="hover" color="inherit">
               <span onClick={() => dispatch(push(``))}>{t("conf")}</span>
             </Link>
@@ -123,7 +121,7 @@ export function Configuration({
     case "issuer":
       return (
         <div className="main">
-          <Breadcrumbs>
+          <Breadcrumbs className="breadcrumbs">
             <Link underline="hover" color="inherit">
               <span onClick={() => dispatch(push(``))}>{t("conf")}</span>
             </Link>
@@ -146,7 +144,7 @@ export function Configuration({
     case "tree":
       return (
         <div className="main">
-          <Breadcrumbs>
+          <Breadcrumbs className="breadcrumbs">
             <Link underline="hover" color="inherit">
               <span onClick={() => dispatch(push(``))}>{t("conf")}</span>
             </Link>
@@ -167,7 +165,7 @@ export function Configuration({
     case "catandapp":
       return (
         <div className="main">
-          <Breadcrumbs>
+          <Breadcrumbs className="breadcrumbs">
             <Link underline="hover" color="inherit">
               <span onClick={() => dispatch(push(``))}>{t("conf")}</span>
             </Link>
@@ -187,7 +185,7 @@ export function Configuration({
     default:
       return (
         <div className="main">
-          <Breadcrumbs>
+          <Breadcrumbs className="breadcrumbs">
             <Link underline="hover" color="text.primary">
               <span onClick={() => dispatch(push(``))}>{t("conf")}</span>
             </Link>