diff --git a/Makefile b/Makefile
index 5ef536c..240e5f3 100644
--- a/Makefile
+++ b/Makefile
@@ -60,7 +60,7 @@ $(DIST_DIR)/index.staging.html: src/index.pug src/config.json $(wildcard src/*.p
 	node_modules/.bin/pug --pretty $< --out $(dir $@) -E staging.html -O src/config.json || touch $@
 
 # sass
-$(DIST_DIR)/styles/index.css: src/styles/index.scss $(wildcard src/*.scss src/*/*.scss)
+$(DIST_DIR)/styles/index.css: src/styles/_index.scss $(wildcard src/*.scss src/*/*.scss src/*/*/*.scss src/*/*/*/*.scss)
 	@echo sass: $< ➜ $@
 	@node_modules/.bin/node-sass $< $@ --source-map true --source-map-contents || touch $@ 
 
diff --git a/server.js b/server.js
index 7b0f156..df4f56e 100644
--- a/server.js
+++ b/server.js
@@ -21,6 +21,12 @@ bs.init({
   proxy: `http://localhost:${port}`,
   open: false,
   notify: false,
-  port: browserSyncPort
-  // tunnel: true,
+  port: browserSyncPort,
+  files: [
+    'www/styles/index.css',
+    'www/scripts/index.js',
+    'www/index.html',
+    'www/images/**',
+    'www/fonts/**'
+  ]
 });
diff --git a/src/dependencies.pug b/src/dependencies.pug
index b15139a..54d675a 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -1,28 +1,21 @@
-// Scripts
-//- script(src="https://unpkg.com/@webcomponents/webcomponentsjs@1.2.7/webcomponents-loader.js")
-//script(src="/lib/webcomponentsjs/webcomponents-loader.js")
-//- script(src="lib/html-imports.js")
-
 script(type="module" src="https://unpkg.com/@startinblox/oidc@0.6.0")
-
 script(src="/scripts/index.js")
 
-// Stylesheets
+//- Stylesheets
 link(rel='stylesheet', href='/lib/normalize.css')
 link(rel='stylesheet', href='/styles/index.css')
 link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&amp;subset=latin-ext')
 link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i')
 
-// Web components
-
 //- local
-//script(type="module" src="/lib/sib-core/sib-display.js")
-//script(type="module" src="/lib/sib-router/sib-router.js")
-//script(type="module" src="/lib/sib-core/sib-form.js")
+//- script(type="module" src="/lib/sib-core/src/index.js")
+//- script(type="module" src="/lib/sib-router/src/index.js")
+//- script(type="module" src="/lib/sib-chat/sib-chat.js")
+//- script(type="module" src="/lib/sib-notifications/sib-notifications.js")
+//- script(type="module" src="/lib/sib-conversation/sib-conversation.js")
+//- script(type="module" src="/lib/sib-directory/sib-directory.js")
 
-//link(rel='import', href='/lib/sib-chat/sib-chat.html')
-
-//- cdn
+//- CDN
 script(type="module" src="https://unpkg.com/@startinblox/core@0.7.15")
 script(type="module" src="https://unpkg.com/@startinblox/router@0.7.2")
 script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1.7")
diff --git a/src/header.pug b/src/header.pug
index 6aced93..9099c88 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -1,4 +1,3 @@
-#button-toggle
 #logo
   img(src="/images/logo.png" width=111 height=32)
 
diff --git a/src/index.pug b/src/index.pug
index eb5b1ee..666c4c9 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -9,33 +9,33 @@ html(lang="en")
     link(rel="icon" type="image/png" href="/images/favicon.png")
     include dependencies.pug
   body
-    div.layer
-      header#header.row(role='banner')
-        include header.pug
-      .content.row
-        include menu-left.pug
+    header#header.row(role='banner')
+      include header.pug
+    .content.row
+      include menu-left.pug
+      main#mainContainer
+
+        #members(hidden).padded-width
+          include page-members.pug
+
+        #job-offers(hidden).padded-width
+          include page-job-offers.pug
+
+        #job-offer-create(hidden).padded-width
+          sib-link(class="backlink", next="job-offers") Back
+          include page-job-offer-create.pug
+
+        #project(hidden)
+          include page-project.pug
         
-        main#mainContainer
-          //- #dashboard(hidden)
-            include page-dashboard.pug
-          #members(hidden)
-            include page-members.pug
-          #member-chat(hidden)
-            include page-member-chat.pug
-          #job-offers(hidden)
-            include page-job-offers.pug
-          #job-offer-create(hidden)
-            include page-job-offer-create.pug
-          #project(hidden)
-            include page-project.pug
-          #user-profile(hidden)
-          #user-settings(hidden)
-          #user-admin(hidden)
-          //- #client-creation(hidden)
-            include page-client-creation.pug
-          //-#groups(hidden)
-            include page-groups.pug
-          #circle(hidden)
-            include page-group.pug
-          //- #search(hidden)
-            include page-search.pug
+        #circle(hidden)
+          include page-group.pug
+
+        #member-chat(hidden)
+          include page-member-chat.pug
+
+        #user-profile(hidden)
+
+        #user-settings(hidden)
+
+        #user-admin(hidden)
diff --git a/src/menu-left.pug b/src/menu-left.pug
index cb22b65..bc86895 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -4,8 +4,7 @@ nav#navbar
       div.menu-notification
         sib-display(
         data-src=`${sdn}/members/`,
-        data-fields='-',
-        counter-template='${counter}'
+        data-fields='-'
         )
       div.menu-label Members
       div.menu-icon.icon-people
@@ -14,8 +13,7 @@ nav#navbar
       div.menu-notification
         sib-display(
         data-src=`${sdn}/job-offers/`,
-        data-fields='-',
-        counter-template='${counter}'
+        data-fields='-'
         )
       div.menu-label Job offers
       div.menu-icon.icon-briefcase
diff --git a/src/page-group-create.pug b/src/page-group-create.pug
index 922bd3a..343db17 100644
--- a/src/page-group-create.pug
+++ b/src/page-group-create.pug
@@ -1,4 +1,4 @@
-.frame-form
+.frame-form.full-wide
   h1 New group
   p.form-goal Here you can create a new group according to your interests, what you want to share, etc.
   .form-view
diff --git a/src/page-group-edit.pug b/src/page-group-edit.pug
index edcfa1c..b4c0676 100644
--- a/src/page-group-edit.pug
+++ b/src/page-group-edit.pug
@@ -1,4 +1,4 @@
-#circle-edit
+#circle-edit.frame-form
   h1 Edit group
   .form-view
     sib-form.block(
diff --git a/src/page-group.pug b/src/page-group.pug
index 2c1cb89..39635d0 100644
--- a/src/page-group.pug
+++ b/src/page-group.pug
@@ -16,7 +16,7 @@ nav.jsRightMenu(role='navigation')
       sib-route(name='circle-create')
         li
           a Add new
-#views-container
+.views-container
   #circle-chat
     include page-group-chat.pug
   #circle-profile
diff --git a/src/page-job-offer-create.pug b/src/page-job-offer-create.pug
index 14f9388..93be66f 100644
--- a/src/page-job-offer-create.pug
+++ b/src/page-job-offer-create.pug
@@ -1,5 +1,5 @@
-.frame-form
-
+.frame-form.frame
+    
   sib-widget(name='title-text')
     template
       p Be clear and specific with the name of your offer. You can indicate which skill is important, the start date or the name of the client. Ex: "Looking for a plumber for planet Mars ASAP".
@@ -8,7 +8,6 @@
     template
       p Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...'
   
-  sib-link(next='job-offers' class='back') Back
   h1 Post a new job offer
   p.form-goal This form allows you to share an offer to all members of the network.
   .form-view
diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug
index 219599d..be4a39f 100644
--- a/src/page-job-offers.pug
+++ b/src/page-job-offers.pug
@@ -5,7 +5,7 @@ div.grid-layer
   include templates/template-joboffers-filter.pug
 
   div.grid-layer-main.containerV
-    h2 New offers
+    h1 New offers
       span Here you can find and post offers
     sib-display#offers-list(
       data-src=`${sdn}/job-offers/`,
@@ -38,7 +38,7 @@ div.grid-layer
   div.grid-layer-links.containerV
     template#groups-list-template
       p ${value}
-    sib-link(next="job-offer-create").containerH.containerCenter.action-link
+    sib-link(next="job-offer-create").plus-button
       div.icon-plus
       div Post a new offer
     //-sib-link().containerH.containerCenter.how-link
diff --git a/src/page-project-create.pug b/src/page-project-create.pug
index 7e8fc7e..4e26997 100644
--- a/src/page-project-create.pug
+++ b/src/page-project-create.pug
@@ -1,4 +1,4 @@
-.frame-form
+.frame-form.full-wide
   h1 New project
   p.form-goal Here you can create your project, add members and assign them a job.
   .form-view
diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug
index f15b79b..7849547 100644
--- a/src/page-project-edit.pug
+++ b/src/page-project-edit.pug
@@ -17,7 +17,7 @@ sib-widget(name='template-members')
       label-user.name='Member(s)',
     )
 
-.frame-form
+.frame-form.full-wide
   h1 Edit your project
   p.form-goal Here you can edit your projet's details
   .form-view
diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug
index 5dbd56a..7330f28 100644
--- a/src/page-project-profile.pug
+++ b/src/page-project-profile.pug
@@ -1,4 +1,4 @@
-.frame
+.frame-form.full-wide
 
   include templates/template-business-provider.pug
   include templates/template-customer.pug
diff --git a/src/page-project.pug b/src/page-project.pug
index ed32ffe..f06a683 100644
--- a/src/page-project.pug
+++ b/src/page-project.pug
@@ -15,7 +15,7 @@ nav.jsRightMenu(role='navigation')
       sib-route(name='project-create', use-id)
         li
           a Add new
-#views-container
+.views-container
   #project-chat
     include page-project-chat.pug
   #project-profile
diff --git a/src/scripts/hd-app.js b/src/scripts/hd-app.js
deleted file mode 100644
index 1fe90ce..0000000
--- a/src/scripts/hd-app.js
+++ /dev/null
@@ -1,63 +0,0 @@
-document.addEventListener("DOMContentLoaded", function (event) {
-  // Constants declaration
-  const navBar = document.querySelector("#navbar");
-  const searchBar = document.querySelector("#search-bar");
-  const searchView = document.querySelector("#search-view");
-  const searchInput = searchBar.querySelector("#search-input");
-  const btnToggle = document.querySelector("#button-toggle");
-
-
-  // Shortcuts
-  window.addEventListener("keydown", function (e) {
-    // CTRL + K triggers the search feature
-    if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
-      e.preventDefault();
-      e.stopPropagation();
-      openSearchBar();
-    }
-
-    // Escape key
-    else if (e.keyCode == 27 && navBar.classList.contains("search-mode")) {
-      closeSearchBar();
-    }
-  });
-
-  searchBar.querySelector("#close-search-icon").addEventListener("click", emptySearchBar);
-
-  function openSearchBar(e) {
-    navBar.classList.add("search-mode");
-    searchBar.querySelector("#search-input").focus();
-    searchView.classList.add("search-mode");
-  }
-
-  function closeSearchBar(e) {
-    navBar.classList.remove("search-mode");
-    searchView.classList.remove("search-mode");
-  }
-
-  function emptySearchBar(e) {
-    searchInput.value = '';
-    openSearchBar();
-    searchInput.focus;
-  }
-
-
-  // Synchronizes the search input with the <ldp-form>s 
-  searchInput.addEventListener("keyup", (e) => {
-    searchView.querySelectorAll("ldp-form input[type=text]").forEach((el) => {
-      el.value = searchInput.value;
-    });
-  });
-
-
-  btnToggle.addEventListener('click', e => {
-    navBar.classList.toggle('open');
-    e.stopPropagation();
-  });
-
-  window.addEventListener('click', e => {
-    navBar.classList.remove('open');
-  });
-
-
-});
diff --git a/src/scripts/index.js b/src/scripts/index.js
index 9b4fac6..7d19dde 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -1,33 +1,6 @@
 document.addEventListener('DOMContentLoaded', function (event) {
-  const navBar = document.querySelector('#navbar');
-  const btnToggle = document.querySelector('#button-toggle');
   const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
   const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
-  
-  if (!navBar || !btnToggle) return;
-
-  btnToggle.addEventListener('click', e => {
-    navBar.classList.toggle('open');
-    e.stopPropagation();
-  });
-
-  window.addEventListener('click', e => {
-    navBar.classList.remove('open');
-  });
-
-  function resize() {
-    setTimeout(() =>
-      Array.from(document.querySelectorAll('.chat-view')).forEach(elm => {
-        if (!elm.offsetParent) return;
-        elm.style.setProperty('--pos-top', elm.offsetTop + 'px');
-      }));
-  }
-  window.addEventListener('resize', resize);
-  window.addEventListener('navigate', resize);
-  window.addEventListener('popstate', resize);
-  document.addEventListener('load', resize);
-  document.addEventListener('WebComponentsReady', resize);
-  resize();
 
   // Toggle sub-menus
   menuWrappers.forEach(menuWrapper => {
@@ -40,9 +13,10 @@ document.addEventListener('DOMContentLoaded', function (event) {
   // Open/close menu on the right
   rightMenus.forEach(rightMenu => {
     const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
-    
+
     btnRightMenu.addEventListener('click', e => {
       rightMenu.classList.toggle('offsite-is-closed');
     })
-  })
-});
+  });
+
+});
\ No newline at end of file
diff --git a/src/styles/_index.scss b/src/styles/_index.scss
new file mode 100644
index 0000000..e8c7a32
--- /dev/null
+++ b/src/styles/_index.scss
@@ -0,0 +1,17 @@
+@charset "UTF-8";
+
+@import '../../node_modules/include-media/dist/include-media';
+
+@import 'abstracts/variables';
+@import 'abstracts/mixins';
+@import 'components/icons/index';
+@import 'base/main';
+@import 'components/index';
+
+main#mainContainer {
+    @import 'layout/members/index';
+    @import 'layout/job-offers/index';
+    @import 'layout/project-profile/index';
+    @import 'layout/circle-profile/index';
+    @import 'layout/member-chat/index';
+}
diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss
new file mode 100644
index 0000000..31cde50
--- /dev/null
+++ b/src/styles/abstracts/_mixins.scss
@@ -0,0 +1,24 @@
+@mixin style-template-fieldset($name: 'default') {
+  template-legend-#{$name} {
+    border-bottom: 1px solid $color-221-51-90;
+    color: $color-233-18-29;
+    font-size: 1.8rem;
+    font-weight: 600;
+    padding-bottom: 1rem;
+  }
+}
+
+@mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) {
+  box-shadow: 0 0 8px 0 $shadow;
+  background-color: $background;
+}
+
+%user-role {
+  border: 1px solid $color-45-95-54;
+  border-radius: 3px;
+  color: $color-210-4-50;
+  font-size: 1.4rem;
+  font-weight: 400;
+  margin-right: 0.4rem;
+  padding: calc(1.6rem - 0.8em) 0.7em;
+}
\ No newline at end of file
diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
new file mode 100644
index 0000000..e63db81
--- /dev/null
+++ b/src/styles/abstracts/_variables.scss
@@ -0,0 +1,25 @@
+// Color Variables
+$color-43-100-50: hsl(43, 100%, 50%);
+$color-45-95-54: hsl(45, 95%, 54%);
+$color-46-100-67: hsl(46, 100%, 67%);
+$color-46-100-50: hsl(46, 100%, 50%);
+$color-0-0-100: hsl(0, 0%, 100%);
+$color-210-17-91: hsl(210, 17%, 91%);
+$color-222-52-90: hsl(222, 52%, 90%);
+$color-210-25-95: hsl(210, 25%, 95%);
+$color-222-57-95: hsl(222, 57%, 95%);
+$color-213-20-91: hsl(213, 20%, 91%);
+$color-221-51-90: hsl(221, 51%, 90%);
+$color-0-0-85: hsl(0, 0%, 85%);
+$color-229-25-79: hsl(229, 25%, 79%);
+$color-215-9-73: hsl(215, 9%, 73%);
+$color-244-10-70: hsl(244, 10%, 70%);
+$color-215-6-63: hsl(215, 6%, 63%);
+$color-210-5-56: hsl(210, 5%, 56%);
+$color-210-4-50: hsl(210, 4%, 50%);
+$color-213-4-50: hsl(213, 4%, 50%);
+$color-213-13-86: hsla(213, 13%, 86%, 0.2);
+$color-0-0-29: hsl(0, 0%, 29%);
+$color-233-18-29: hsl(233, 18%, 29%);
+$color-216-4-22: hsl(216, 4%, 22%);
+$color-244-73-62: hsl(244, 73%, 62%);
diff --git a/src/styles/base/_compat.scss b/src/styles/base/_compat.scss
new file mode 100644
index 0000000..8a31961
--- /dev/null
+++ b/src/styles/base/_compat.scss
@@ -0,0 +1,73 @@
+.grid-layer {
+    display: grid;
+    font-size: 16px;
+    grid-template-columns: [start]auto[middle]25%[end];
+    grid-template-rows: [start]7em[middle]auto[end];
+}
+
+%flex-grid-layer {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.grid-layer-main {
+    @extend %flex-grid-layer;
+    grid-column-start: start;
+    grid-column-end: end;
+    grid-row-start: start;
+    grid-row-end: end;
+}
+
+.grid-layer-links {
+    @extend %flex-grid-layer;
+    grid-column-start: middle;
+    grid-column-end: end;
+    grid-row-start: start;
+    grid-row-end: middle;
+}
+
+.containerH {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.containerV {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.grow {
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+.fix {
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+.containerCenter {
+    justify-content: center;
+    align-items: center;
+}
+
+.reverse {
+    flex-direction: row-reverse;
+}
+
+.row {
+    display: flex;
+    max-width: 100%;
+}
+
+.content {
+    flex-direction: row;
+    height: 100%;
+    overflow: hidden;
+}
+
+.col {
+    min-width: 0;
+}
\ No newline at end of file
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
new file mode 100644
index 0000000..c4d2251
--- /dev/null
+++ b/src/styles/base/main.scss
@@ -0,0 +1,114 @@
+$breakpoints: (phone: 480px,
+  tablet: 768px,
+  desktop: 1024px) !default;
+
+[hidden],
+.hidden {
+  display: none !important;
+}
+
+:root {
+  font-size: 10px;
+  font-family: Open Sans, sans-serif;
+  --sib-notifications-theme: #{$color-46-100-50};
+
+  body {
+    background-color: $color-210-25-95;
+    color: $color-213-4-50;
+    font-size: 1.6rem;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+  }
+}
+
+img {
+  max-height: 100%;
+  max-width: 100%;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $color-216-4-22;
+  font-weight: 600;
+  padding: 0;
+
+  span {
+    font-weight: 400;
+    padding-left: 0.85rem;
+
+    &:before {
+      content: '// ';
+    }
+  }
+}
+
+h1 {
+  font-size: 2.1rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.6rem;
+}
+
+h4 {
+  font-size: 1.2rem;
+}
+
+h5 {
+  font-size: 2rem;
+}
+
+button {
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+%padding-main {
+  padding: 5rem;
+}
+
+.padded-width {
+  flex: 1;
+  @extend %padding-main;
+}
+
+.frame {
+  @include window-style-modal();
+  @extend %padding-main;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin: 2rem 1rem 5rem 2rem;
+}
+
+/* Dividing into columns */
+@mixin respond-to($breakpoint) {
+
+  @if map-has-key($breakpoints, $breakpoint) {
+
+    @media (min-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  }
+
+  @else {
+    @warn "Sorry, no value could be retrieved from `#{$breakpoint}`."
+    +"Available breakpoints are: #{map-keys($breakpoints)}.";
+  }
+}
+
+// Compatibility layer for non-updated components
+@import 'compat';
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
new file mode 100644
index 0000000..b9c8a25
--- /dev/null
+++ b/src/styles/components/_index.scss
@@ -0,0 +1,8 @@
+@import 'form';
+@import 'content';
+@import 'filters';
+@import 'howto';
+@import 'header';
+@import 'menu-left';
+@import 'menu-right';
+@import 'skills';
\ No newline at end of file
diff --git a/src/styles/components/content.scss b/src/styles/components/content.scss
new file mode 100644
index 0000000..762cec9
--- /dev/null
+++ b/src/styles/components/content.scss
@@ -0,0 +1,114 @@
+.backlink {
+  font-size: 1.5rem;
+  margin: 2rem 0 0 2rem;
+  @include icon('arrow-left-circle');
+  color: #3d4057;
+  text-decoration: underline;
+
+  &::before {
+    text-decoration: none;
+  }
+
+  &::before {
+    font-size: 2rem;
+    margin-right: 1rem;
+  }
+}
+
+sib-route,
+sib-link {
+  cursor: pointer;
+}
+
+// group
+
+#group-profile {
+  sib-display-div[name='name'] div {
+    @extend h1;
+  }
+
+  sib-display-div[name='label-description'] div {
+    @extend h2;
+  }
+}
+// chat
+
+.chat-view {
+  padding: 1.7rem;
+  position: relative;
+  z-index: 0;
+  @include window-style-modal();
+  height: calc(100vh - 104px);
+
+  > sib-chat {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+#member-profile {
+  @include media('width>tablet') {
+    div[name='header'] {
+      float: left;
+      width: 50%;
+    }
+  }
+
+  div[name='name'] {
+    @extend h1;
+
+    div {
+      display: inline-block;
+      margin-right: 0.7rem;
+    }
+  }
+
+  sib-link[next='member-chat'] {
+    border-style: solid;
+    display: flex;
+    border-radius: 25px;
+    border-style: solid;
+    border-color: $color-244-73-62;
+    color: $color-244-73-62;
+    padding: 1.7rem;
+    text-decoration:none;
+  }
+
+  div[name='pseudonym'] {
+    margin-top: -1.7rem;
+    margin-bottom: 1.7rem;
+  }
+
+  #member-info {
+    &:after {
+      content: '';
+      display: block;
+      clear: both;
+    }
+  }
+}
+
+sib-form {
+
+  form > * {
+    margin-top: 0.85rem;
+  }
+
+  // button like
+  input[type='color'],
+  input[type='file'],
+  input[type='reset'],
+  input[type='submit'] {
+    display: inline-block;
+    padding: 0.85rem 2.55rem;
+    border: none;
+    border-radius: 100em;
+    font-weight: normal;
+  }
+
+  input[type='reset'] {
+    display: none;
+  }
+}
diff --git a/src/styles/filters.scss b/src/styles/components/filters.scss
similarity index 94%
rename from src/styles/filters.scss
rename to src/styles/components/filters.scss
index d97dc63..03faa2e 100644
--- a/src/styles/filters.scss
+++ b/src/styles/components/filters.scss
@@ -14,7 +14,7 @@
     -webkit-appearance: none;
     border-style: none;
     box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
-    color: $color-taupe-gray;
+    color: $color-210-5-56;
     font-size: 1.36rem;
     line-height: 1.80;
     margin-top: 1.36rem;
@@ -27,7 +27,7 @@
   }
 
   select {
-    background: $color-white;
+    background: $color-0-0-100;
     background-image: url("/images/chevron-down.png");
     background-position: right 12px top 60%;
     background-repeat: no-repeat;
diff --git a/src/styles/form.scss b/src/styles/components/form.scss
similarity index 76%
rename from src/styles/form.scss
rename to src/styles/components/form.scss
index 17cfa25..add6ffd 100644
--- a/src/styles/form.scss
+++ b/src/styles/components/form.scss
@@ -1,31 +1,26 @@
+@include style-template-fieldset('fee');
+@include style-template-fieldset('customer');
+@include style-template-fieldset('team');
+
 .frame-form {
-  display: flex;
-  flex-direction: column;
-  margin: 0 auto;
-  min-height: 100vh;
-  padding: 6.8rem 8.5rem 10.2rem;
-  @extend %frame;
+  &.full-wide {
+    display: flex;
+    flex: 1;
+    font-size: 1.5rem;
+    flex-direction: column;
+    margin: 0 auto;
+    min-height: 100vh;
+    padding: 6.8rem 8.5rem 10.2rem;
+    background: $color-0-0-100;
+  }
   
   .form-view {
-    border-bottom: 1px solid $color-platinum;
+    border-bottom: 1px solid $color-210-17-91;
     padding-bottom: 2.55rem;
   }
-}
-
-@include styleTemplateFieldset('fee');
-@include styleTemplateFieldset('customer');
-@include styleTemplateFieldset('team');
-
-#circle-create,
-#circle-edit,
-#job-offer-create,
-#project-create,
-#project-edit {
-  flex: 1;
-  font-size: 1.5rem;
 
   h1 {
-    color: $color-purple-dark;
+    color: $color-233-18-29;
     font-weight: bold;
     font-size: 2rem;
     text-align: center;
@@ -49,9 +44,9 @@
   input {
     -webkit-appearance: none;
     align-items: center;
-    background: $color-glitter;
+    background: $color-222-57-95;
     border: none;
-    color: $color-purple-dark;
+    color: $color-233-18-29;
     display: inline-flex;
     justify-content: flex-start;
     line-height: 1.5;
@@ -69,14 +64,21 @@
     flex-direction: column;
 
     > label {
-      @extend %label;
+      color: $color-244-10-70;
+      font-weight: 600;
+      margin: 2em 0 0.5em;
+      text-transform: uppercase;
+    
+      > div {
+        padding-bottom: 1rem;
+      }
     }
 
     select,
     textarea {
-      background: $color-glitter;
+      background: $color-222-57-95;
       border: none;
-      color: $color-purple-dark;
+      color: $color-233-18-29;
       line-height: 1.5;
       width: 100%;
       
@@ -97,7 +99,7 @@
   sib-form-multiple-dropdown {
 
     label {
-      color: $color-dark-lava;
+      color: $color-216-4-22;
       font-weight: 600;
       text-transform: initial;
     }
@@ -119,7 +121,7 @@
           /*@extend %skill;*/
 
           button.choices__button {
-            border-left: 1px solid $color-selective-yellow;
+            border-left: 1px solid $color-43-100-50;
             opacity: 1;
             padding-left: 0;
           }
@@ -142,7 +144,7 @@
       margin-top: 2em;
       
       &:before {
-        border: 2px solid $color-taupe-gray; 
+        border: 2px solid $color-210-5-56; 
         content: '';
         height: 1rem;
         left: 0;
@@ -155,8 +157,8 @@
       
       &:checked {
         &:before {
-          border: 2px solid $color-taupe-gray; 
-          color: $color-majorelle-blue;
+          border: 2px solid $color-210-5-56; 
+          color: $color-244-73-62;
           height: 1rem;
           left: 0;
           margin-left: 1rem;
@@ -169,7 +171,7 @@
       }
       
       &:after {
-        background: $color-white;
+        background: $color-0-0-100;
         content: '';
         height: 1rem;
         position: absolute;
@@ -198,10 +200,10 @@
 
     button {
       appearance: none;
-      background-color: $color-white;
+      background-color: $color-0-0-100;
       border: 1px solid;
       border-radius: 100%;
-      color: $color-majorelle-blue;
+      color: $color-244-73-62;
       cursor: pointer;
       font-size: 2.55rem;
       height: 1em;
@@ -226,7 +228,11 @@
 
   input[type='submit'] {
     margin-top: 6rem;
-    @extend %submit-form;
+    background-color: $color-233-18-29;
+    color: $color-0-0-100;
+    float: right;
+    font-weight: bold;
+    text-transform: uppercase;
   }
 }
 
@@ -271,10 +277,10 @@ sib-multiple-form[name='members'] {
 
   button {
     appearance: none;
-    background-color: $color-white;
+    background-color: $color-0-0-100;
     border: 1px solid;
     border-radius: 100%;
-    color: $color-majorelle-blue;
+    color: $color-244-73-62;
     cursor: pointer;
     font-size: 2.55rem;
     height: 1em;
diff --git a/src/styles/header.scss b/src/styles/components/header.scss
similarity index 84%
rename from src/styles/header.scss
rename to src/styles/components/header.scss
index 8b448da..95b7238 100644
--- a/src/styles/header.scss
+++ b/src/styles/components/header.scss
@@ -1,8 +1,8 @@
 
 #header {
   align-items: center;
-  background-color: $color-white;
-  color: $color-dark-lava;
+  background-color: $color-0-0-100;
+  color: $color-216-4-22;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
   display: flex;
   flex-shrink: 0;
@@ -15,15 +15,6 @@
   }
 }
 
-#button-toggle {
-  color: $color-dark-lava;
-  cursor: pointer;
-  display: none;
-  font-size: 3.2rem;
-  padding: 2.3rem;
-  @include icon('menu');
-}
-
 #logo {
   flex: 1 1 0;
 }
@@ -34,14 +25,14 @@
   #search-input {
     border-radius: 10em;
     padding: 0.64rem 1.28rem;
-    border: 1px solid $color-bombay;
+    border: 1px solid $color-215-9-73;
     height: 3.8rem;
     width: 28rem;
     -webkit-appearance: textfield;
   
     & ~ #close-search-icon,
     & ~ #search-icon {
-      color: $color-bombay;
+      color: $color-215-9-73;
       display: block;
       font-size: 1.7rem;
       margin: auto;
@@ -49,7 +40,7 @@
       right: 3.7rem;
       top: 50%;
       transform: translateY(-50%);
-      -webkit-text-stroke: 1px $color-bombay;
+      -webkit-text-stroke: 1px $color-215-9-73;
     }
   
     & ~ #close-search-icon {
@@ -115,8 +106,8 @@ details {
 details#user-controls {
 
   summary:focus {
-    background-color: $color-purple-dark;
-    color: $color-white;
+    background-color: $color-233-18-29;
+    color: $color-0-0-100;
     outline: none;
   }
 
@@ -160,7 +151,7 @@ details#user-controls {
     z-index: 1;
     
     > nav {
-      background-color: $color-white;
+      background-color: $color-0-0-100;
       box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
       position: absolute;
       right: 0;
@@ -178,14 +169,14 @@ details#user-controls {
           padding: 1.6rem 1.3rem;
 
           a {
-            color: $color-text-base;
+            color: $color-213-4-50;
             text-decoration: none;
           }
         }
       }
 
       button {
-        color: $color-text-base;
+        color: $color-213-4-50;
         padding: 1.6rem 1.3rem;
         text-align: left;
         width: 100%;
@@ -194,8 +185,8 @@ details#user-controls {
   }
 
   &[open] {
-    background-color: $color-purple-dark;
-    color: $color-white;
+    background-color: $color-233-18-29;
+    color: $color-0-0-100;
 
     #user-controls__profile {
 
diff --git a/src/styles/components/howto.scss b/src/styles/components/howto.scss
new file mode 100644
index 0000000..391e9ba
--- /dev/null
+++ b/src/styles/components/howto.scss
@@ -0,0 +1,17 @@
+.howto {
+  padding: 0.85rem;
+  margin-bottom: 1.7rem;
+  margin-left: 8.5rem;
+  flex-basis: auto;
+  border-radius: 2em;
+
+  div[class*="icon-"] {
+    align-items: center;
+    display: flex;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+}
+
+
+
diff --git a/src/styles/components/icons/_index.scss b/src/styles/components/icons/_index.scss
new file mode 100644
index 0000000..37259f7
--- /dev/null
+++ b/src/styles/components/icons/_index.scss
@@ -0,0 +1,3 @@
+@import 'custom-icons';
+@import 'icons';
+@import 'material-design-icons';
\ No newline at end of file
diff --git a/src/styles/icons/custom-icons.scss b/src/styles/components/icons/custom-icons.scss
similarity index 100%
rename from src/styles/icons/custom-icons.scss
rename to src/styles/components/icons/custom-icons.scss
diff --git a/src/styles/icons/icons.scss b/src/styles/components/icons/icons.scss
similarity index 100%
rename from src/styles/icons/icons.scss
rename to src/styles/components/icons/icons.scss
diff --git a/src/styles/icons/material-design-icons.scss b/src/styles/components/icons/material-design-icons.scss
similarity index 100%
rename from src/styles/icons/material-design-icons.scss
rename to src/styles/components/icons/material-design-icons.scss
diff --git a/src/styles/menu-left.scss b/src/styles/components/menu-left.scss
similarity index 56%
rename from src/styles/menu-left.scss
rename to src/styles/components/menu-left.scss
index 223051c..5e44ee6 100644
--- a/src/styles/menu-left.scss
+++ b/src/styles/components/menu-left.scss
@@ -1,14 +1,10 @@
 #navbar {
-  background-color: $color-purple-dark;
-  color: $color-white;
+  background-color: $color-233-18-29;
+  color: $color-0-0-100;
   display: block;
-  flex: 0 0 16em;
-  flex-direction: column;
   overflow: auto;
+  flex: 0 0 16em;
   transition: flex-basis 0.5s ease-in-out;
-  // max-width: 16rem;
-  // position: relative;
-  // min-height: 100%;
 
   &.open {
     transform: translateX(0);
@@ -35,18 +31,17 @@
       padding: 1.6rem;
   
       &[active] {
-        background-color: $color-mustard;
-        color: $color-purple-dark;
+        background-color: $color-46-100-67;
+        color: $color-233-18-29;
   
         .menu-icon:before {
-          background-color: $color-purple-dark;
-          color: $color-white;
-          // transform: perspective(1000px) translateZ(1px) scale(0.8);
+          background-color: $color-233-18-29;
+          color: $color-0-0-100;
         }
   
         .menu-notification > sib-display > div:first-child {
-          background-color: $color-purple-dark;
-          color: $color-mustard;
+          background-color: $color-233-18-29;
+          color: $color-46-100-67;
         }
       }
   
@@ -64,9 +59,6 @@
           height: 1.9em;
           line-height: 1.9em;
           width: 1.9em;
-          // transform: perspective(1000px) translateZ(1px) scale(1);
-          // will-change: transform;
-          // transition: all 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
         }
       }
       
@@ -81,27 +73,10 @@
         text-transform: uppercase;
         width: 8em;
       }
-      
-      /*Fix: presque doublon avec main.scss ligne 71 qui gère le nombre de notifications sur la cloche */
-      .menu-notification {
-        align-self: center;
-        display: flex;
-        flex-grow: 0;
-        flex-shrink: 0;
-        justify-content: center;
-        width: 2em;
-  
-        > sib-display {
-          
-          > div:first-of-type {
-            @extend %notification;
-          }
-        }
-      }
 
       .menu-chevron {
         align-items: center;
-        color: $color-spun-pearl;
+        color: $color-244-10-70;
         display: flex;
         flex-grow: 0;
         flex-shrink: 0;
@@ -118,7 +93,7 @@
       padding-left: 2.88rem;
       
       div {
-        color: $color-spun-pearl;
+        color: $color-244-10-70;
         cursor: pointer;
         padding-bottom: 1.12rem;
   
@@ -138,24 +113,8 @@
 
     .divider {
       height: 1px;
-      background-color: $color-gainsboro-a02;
+      background-color: $color-213-13-86;
     }
   }
 }
 
-@include media('width<phone') {
-  #button-toggle {
-    display: block;
-  }
-
-  #navbar {
-    //transform: translateX(-120%);
-    transition: flex-basis 0.5s ease-in-out;
-    flex-basis: 0;
-    //position: absolute;
-    //top: auto;
-    //display: none;
-    //z-index: 1;
-  }
-}
-
diff --git a/src/styles/menu-right.scss b/src/styles/components/menu-right.scss
similarity index 62%
rename from src/styles/menu-right.scss
rename to src/styles/components/menu-right.scss
index 4d40034..ae75eed 100644
--- a/src/styles/menu-right.scss
+++ b/src/styles/components/menu-right.scss
@@ -1,17 +1,40 @@
 #mainContainer {
-  
-  > div {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow-y: auto;
+
+
+  >div#project,
+  >div#circle {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: stretch;
+    overflow-x: hidden;
+    
+    .views-container {
+      flex: 1 0 0;
+      overflow-y: auto;
+    }
+
+    >div {
+      transition: all 0.5s;
+    }
+  }
+
+  >div {
 
     nav {
       transition: all 0.5s;
 
-      > sib-router {
+      >sib-router {
         background-color: $color-222-52-90;
-        color: $color-purple-dark;
+        color: $color-233-18-29;
         flex: 0 0 auto;
         font-weight: 600;
 
-        > ul {  
+        >ul {
           cursor: pointer;
           list-style: none;
           margin: 0;
@@ -19,7 +42,7 @@
 
           li {
             align-items: center;
-            border-bottom: 1px solid $color-lavender-gray;
+            border-bottom: 1px solid $color-229-25-79;
             display: flex;
             margin: 0;
             padding: 2.55rem 2.55rem;
@@ -34,57 +57,57 @@
             }
           }
 
-          > li {
+          >li {
             @include icon('arrow-right-circle');
           }
-          
-          > sib-route {
-            
+
+          >sib-route {
+
             &[active] {
-              background-color: $color-purple-dark;
-              color: $color-mustard;
+              background-color: $color-233-18-29;
+              color: $color-46-100-67;
               display: inline-block;
             }
 
             &[name^='circle'],
             &[name^='project'] {
-              
-              > li::before {
+
+              >li::before {
                 font-size: 4rem;
               }
             }
-            
-            &[name$='chat'] > li {
+
+            &[name$='chat']>li {
               @include ci('chat');
             }
-            
-            &[name$='create'] > li {
+
+            &[name$='create']>li {
               @include ci('offer');
             }
-            
-            &[name$='edit'] > li {
+
+            &[name$='edit']>li {
               @include ci('list');
             }
-            
-            &[name$='profile'] > li {
+
+            &[name$='profile']>li {
               @include ci('information');
-            }          
+            }
           }
         }
       }
-      
+
       &.offsite-is-closed {
         transform: translate(15.5rem);
-        
+
         & .jsOffsiteToggle::before {
           transform: rotate(180deg);
         }
 
-        & ~ #views-container {
+        &~.views-container {
           margin-left: -15.5rem;
           transform: translate(15.5rem);
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/styles/components/skills.scss b/src/styles/components/skills.scss
new file mode 100644
index 0000000..48bbbae
--- /dev/null
+++ b/src/styles/components/skills.scss
@@ -0,0 +1,18 @@
+/* TEMPLATE SKILLS*/
+
+sib-multiple[name*='skills'] {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.skill {
+    background-color: $color-43-100-50;
+    border: 1px solid $color-43-100-50;
+    border-radius: 2em;
+    color: $color-0-0-100;
+    display: block;
+    font-size: 1.4rem;
+    font-weight: bold;
+    margin: 0.4rem 1rem 0.4rem 0;
+    padding: 0.5rem 2rem;
+}
\ No newline at end of file
diff --git a/src/styles/content.scss b/src/styles/content.scss
deleted file mode 100644
index 4d66ca7..0000000
--- a/src/styles/content.scss
+++ /dev/null
@@ -1,191 +0,0 @@
-// job offers
-// .new-job-offer {
-//   @extend %button;
-//   text-transform: uppercase;
-//   margin-left: 1em;
-//   margin-bottom: 1em
-//   //float: right;
-// }
-
-// skills
-
-/*#member-profile sib-display-lookuplist {
-  display: flex;
-
-  ul {
-    display: flex;
-    flex-wrap: wrap;
-    list-style: none;
-  }
-
-  li[name*='skills'] {
-    padding: 0.3em 1.2em;
-    border: 1px solid;
-    border-radius: 2em;
-    margin: 0.25em;
-    background-color: $color-selective-yellow;
-    color: $color-white;
-    font-weight: bold;
-  }
-}
-*/
-// group
-
-#group-profile {
-  sib-display-div[name='name'] div {
-    @extend h1;
-  }
-
-  sib-display-div[name='label-description'] div {
-    @extend h2;
-  }
-}
-// chat
-
-.chat-view {
-  padding: 1.7rem;
-  position: relative;
-  z-index: 0;
-  @extend %frame;
-  height: calc(100vh - 104px);
-
-  > sib-chat {
-    @include pos();
-  }
-}
-// member-profile && members
-
-/*.members-list-condensed {
-  img {
-    width: 50px;
-    height: 100px;
-    border-radius: 100%;
-    object-fit: cover;
-    object-position: top;
-  }
-
-  label {
-    display: none;
-  }
-
-  > div > sib-display > div {
-    display: grid;
-    grid-template-columns: 0.5fr 2fr;
-    grid-template-rows: repeat(3, auto);
-    grid-column-gap: 3rem;
-    align-items: center;
-
-    div[name="teammate-img"] {
-      background: blue;
-      grid-row: 1 / -1;
-    }
-      
-    }
-
-
-    ul{
-      margin-top: 0px;
-      margin-bottom: 0px;
-      list-style-type: none;
-    }
-    >[name$="user"]{
-      color: $color-dark-lava;
-    }
-    >[name$="avatar"]{
-      grid-column-start: first;
-      grid-column-end: middle;
-      grid-row-start: first;
-      grid-row-end: end;
-    }
-  }
-
-  // ul {
-  //   padding-left: 1em;
-  // }
-}*/
-
-hdapp-available {
-  display: block;
-  text-align: right;
-
-  strong {
-    @extend %button;
-  }
-}
-
-/*#member-profile {
-  ul {
-    @include list-reset();
-  }
-}*/
-
-#member-profile {
-  @include media('width>tablet') {
-    div[name='header'] {
-      float: left;
-      width: 50%;
-    }
-  }
-
-  div[name='name'] {
-    @extend h1;
-
-    div {
-      display: inline-block;
-      margin-right: 0.7rem;
-    }
-  }
-
-  sib-link[next='member-chat'] {
-    border-style: solid;
-    display: flex;
-    border-radius: 25px;
-    border-style: solid;
-    border-color: $color-majorelle-blue;
-    color: $color-majorelle-blue;
-    padding: 1.7rem;
-    text-decoration:none;
-  }
-
-  div[name='pseudonym'] {
-    margin-top: -1.7rem;
-    margin-bottom: 1.7rem;
-  }
-
-  #member-info {
-    &:after {
-      content: '';
-      display: block;
-      clear: both;
-    }
-  }
-}
-
-sib-form {
-
-  form > * {
-    margin-top: 0.85rem;
-  }
-
-  // button like
-  input[type='color'],
-  input[type='file'],
-  input[type='reset'],
-  input[type='submit'] {
-    @extend %button;
-  }
-
-  input[type='reset'] {
-    display: none;
-  }
-}
-
-/*
-label {
-  @extend h2;
-  &:after {
-    content: ':';
-  }
-}
-*/
-
diff --git a/src/styles/index.scss b/src/styles/index.scss
deleted file mode 100644
index 14a79e8..0000000
--- a/src/styles/index.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@charset "UTF-8";
-
-@import '../../node_modules/include-media/dist/include-media';
-@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css';
-@import 'icons/custom-icons';
-@import 'icons/icons';
-@import 'icons/material-design-icons';
-
-@import 'variables';
-@import 'mixins';
-@import 'main';
-@import 'form';
-@import 'content';
-
-@import 'filters';
-@import 'right-panel';
-
-@import 'group-profile';
-@import 'job-offers';
-@import 'member-profile';
-@import 'members';
-@import 'project-profile';
-@import 'member-chat';
-
-// @import 'members';
-@import 'header';
-@import 'menu-left';
-@import 'menu-right';
\ No newline at end of file
diff --git a/src/styles/job-offers.scss b/src/styles/job-offers.scss
deleted file mode 100644
index d23731a..0000000
--- a/src/styles/job-offers.scss
+++ /dev/null
@@ -1,134 +0,0 @@
-#offers-list {
-  @extend .grid-layer;
-  
-  > sib-form {
-    grid-column-start: start;
-    grid-column-end: middle;
-    grid-row-start: start;
-    grid-row-end: middle;
-  }
-  
-  > div {
-    grid-column-start: start;
-    grid-column-end: end;
-    grid-row-start: middle;
-    grid-row-end: end;
-    
-    &:first-of-type {
-      margin-top: 5rem;
-    }
-    
-    > sib-display {
-      @extend %frame;
-      display: block;
-      font-size: 1.5rem;
-      margin: 1.7rem 0;
-      padding: 3.4rem;
-      /*&:nth-child(odd) {
-        background-color: $color-anti-flash-white;
-      }*/
-      
-      [name='user-thumb'] {
-        align-items: center;
-        display: flex;
-        margin: -0.25em;
-      
-        > * {
-          margin: 0.25em;
-        }
-  
-        [name='author.first_name'] {
-          color: $color-quartz;
-          font-weight: 600;
-        }
-
-        sib-multiple[name$='groups'] {
-          display: flex;
-
-          label {
-            display: none;
-          }
-
-          > * {
-            @extend %group;
-          }
-        }
-      
-        sib-display-img {
-          background-color: $color-white;
-          border-radius: 50%;
-          height: 4.25rem;
-          overflow: hidden;
-          position: relative;
-          width: 4.25rem;
-
-          img {
-            height: 100%;
-            left: 0;
-            object-fit: cover;
-            position: absolute;
-            top: 0;
-            width: 100%;
-          }
-        }
-      }
-      
-      [name='creationDate'] {
-        display: block;
-        margin-bottom: 0.7rem;
-        margin-top: 2rem;
-      }
-
-      [name='title'] {
-        @extend h3;
-        display: block;
-        font-weight: bold;
-        line-height: 19px;
-      }
-      
-      [name='description'] {
-        display: block;
-        line-height: 1.6;
-        margin-bottom: 1.6rem;
-      }
-
-      [name='skills'] {
-        label {
-          display: none;
-        }
-      }
-      
-      [name='send'] {
-        color: $color-majorelle-blue;
-        font-size: 1.3rem;
-        float: right;
-      
-        > sib-link {
-          cursor: pointer;
-          @include icon('speech');
-      
-          &::before {
-            font-size: 1.5rem;
-            margin-right: 1.2rem;
-          }
-        }
-      }
-      
-      [name='status'] {
-        float: right;
-        display: flex;
-        align-items: center;
-        margin: -0.25em;
-        
-        > * {
-          margin: 0.25em;
-        }
-        
-        strong {
-          @extend %status-open;
-        }
-      } 
-    }
-  }
-}
-
diff --git a/src/styles/layout/circle-profile/_index.scss b/src/styles/layout/circle-profile/_index.scss
new file mode 100644
index 0000000..293bc89
--- /dev/null
+++ b/src/styles/layout/circle-profile/_index.scss
@@ -0,0 +1 @@
+@import 'circle-profile';
\ No newline at end of file
diff --git a/src/styles/group-profile.scss b/src/styles/layout/circle-profile/circle-profile.scss
similarity index 93%
rename from src/styles/group-profile.scss
rename to src/styles/layout/circle-profile/circle-profile.scss
index ddc1f87..882ce86 100644
--- a/src/styles/group-profile.scss
+++ b/src/styles/layout/circle-profile/circle-profile.scss
@@ -31,7 +31,7 @@
       }
 
       > div[name='teammate-img'] {
-        background-color: $color-bombay;
+        background-color: $color-215-9-73;
         border-radius: 50%;
         grid-column: 1 / span 2;
         grid-row: 1 / span 2;
@@ -61,7 +61,7 @@
       }
 
       > sib-display-value[name='teammate-profile'] {
-        color: $color-dark-lava;
+        color: $color-216-4-22;
         display: block;
         font-size: 1.2rem;
         grid-column: 1 / span 2;
@@ -69,7 +69,7 @@
       }
 
       > sib-display-value[name='teammate-contact'] {
-        color: $color-majorelle-blue;
+        color: $color-244-73-62;
         font-size: 1.2rem;
         justify-self: stretch;
         grid-column: 3 / span 2;
diff --git a/src/styles/layout/job-offers/_index.scss b/src/styles/layout/job-offers/_index.scss
new file mode 100644
index 0000000..07a4c0e
--- /dev/null
+++ b/src/styles/layout/job-offers/_index.scss
@@ -0,0 +1 @@
+@import 'job-offers.scss';
\ No newline at end of file
diff --git a/src/styles/layout/job-offers/job-offers.scss b/src/styles/layout/job-offers/job-offers.scss
new file mode 100644
index 0000000..42858a7
--- /dev/null
+++ b/src/styles/layout/job-offers/job-offers.scss
@@ -0,0 +1,163 @@
+#job-offers {
+
+  .plus-button {
+    @extend .howto;
+    background-color: $color-43-100-50;
+    color: $color-0-0-100;
+    font-weight: bold;
+    text-transform: uppercase;
+    cursor: pointer;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+
+    .icon-plus {
+      font-size: 20px;
+      justify-content: center;
+      margin: 0.5rem 0.5rem 0.5rem 0;
+
+    }
+  }
+
+  #offers-list {
+    @extend .grid-layer;
+
+    >sib-form {
+      grid-column-start: start;
+      grid-column-end: middle;
+      grid-row-start: start;
+      grid-row-end: middle;
+    }
+
+    >div {
+      grid-column-start: start;
+      grid-column-end: end;
+      grid-row-start: middle;
+      grid-row-end: end;
+
+      &:first-of-type {
+        margin-top: 5rem;
+      }
+
+      >sib-display {
+        @include window-style-modal();
+        display: block;
+        font-size: 1.5rem;
+        margin: 1.7rem 0;
+        padding: 3.4rem;
+        /*&:nth-child(odd) {
+        background-color: $color-210-25-95;
+      }*/
+
+        [name='user-thumb'] {
+          align-items: center;
+          display: flex;
+          margin: -0.25em;
+
+          >* {
+            margin: 0.25em;
+          }
+
+          [name='author.first_name'] {
+            color: $color-0-0-29;
+            font-weight: 600;
+          }
+
+          sib-multiple[name$='groups'] {
+            display: flex;
+
+            label {
+              display: none;
+            }
+
+            >* {
+              @extend %user-role;
+            }
+          }
+
+          sib-display-img {
+            background-color: $color-0-0-100;
+            border-radius: 50%;
+            height: 4.25rem;
+            overflow: hidden;
+            position: relative;
+            width: 4.25rem;
+
+            img {
+              height: 100%;
+              left: 0;
+              object-fit: cover;
+              position: absolute;
+              top: 0;
+              width: 100%;
+            }
+          }
+        }
+
+        [name='creationDate'] {
+          display: block;
+          margin-bottom: 0.7rem;
+          margin-top: 2rem;
+        }
+
+        [name='title'] {
+          @extend h3;
+          display: block;
+          font-weight: bold;
+          line-height: 19px;
+        }
+
+        [name='description'] {
+          display: block;
+          line-height: 1.6;
+          margin-bottom: 1.6rem;
+        }
+
+        [name='skills'] {
+          label {
+            display: none;
+          }
+        }
+
+        [name='send'] {
+          color: $color-244-73-62;
+          font-size: 1.3rem;
+          float: right;
+
+          >sib-link {
+            cursor: pointer;
+            @include icon('speech');
+
+            &::before {
+              font-size: 1.5rem;
+              margin-right: 1.2rem;
+            }
+          }
+        }
+
+        [name='status'] {
+          float: right;
+          display: flex;
+          align-items: center;
+          margin: -0.25em;
+
+          >* {
+            margin: 0.25em;
+          }
+
+          strong {
+            background-color: $color-244-73-62;
+            border: none;
+            border-radius: 100em;
+            color: $color-0-0-100;
+            display: inline-block;
+            font-weight: normal;
+            padding: 0.85rem 1.7rem;
+          }
+        }
+      }
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/src/styles/layout/member-chat/_index.scss b/src/styles/layout/member-chat/_index.scss
new file mode 100644
index 0000000..5f2bf8f
--- /dev/null
+++ b/src/styles/layout/member-chat/_index.scss
@@ -0,0 +1 @@
+@import 'member-chat.scss';
\ No newline at end of file
diff --git a/src/styles/member-chat.scss b/src/styles/layout/member-chat/member-chat.scss
similarity index 100%
rename from src/styles/member-chat.scss
rename to src/styles/layout/member-chat/member-chat.scss
diff --git a/src/styles/layout/members/_index.scss b/src/styles/layout/members/_index.scss
new file mode 100644
index 0000000..2450f36
--- /dev/null
+++ b/src/styles/layout/members/_index.scss
@@ -0,0 +1,2 @@
+@import 'members';
+@import 'member-profile';
diff --git a/src/styles/member-profile.scss b/src/styles/layout/members/member-profile.scss
similarity index 84%
rename from src/styles/member-profile.scss
rename to src/styles/layout/members/member-profile.scss
index f8c9466..183a6e9 100644
--- a/src/styles/member-profile.scss
+++ b/src/styles/layout/members/member-profile.scss
@@ -3,25 +3,14 @@
   flex-direction: column;
   flex-grow: 1;
 
-  .backlink {
-    font-size: 1.5rem;
-    margin: 2rem 0 0 2rem;
-    @extend %backlink; 
-
-    &::before {
-      font-size: 2rem;
-      margin-right: 1rem;
-    }
-  }
-
   #member-info {
-    background-color: $color-white;
+    background-color: $color-0-0-100;
     box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
     margin: 2rem 1rem 5rem 2rem;
     min-height: 100vh;
 
     div[name='member-profile__bio'] {
-      border-bottom: 1px solid $color-link-water;
+      border-bottom: 1px solid $color-221-51-90;
       display: grid;
       grid-template-areas: "avatar name status"
                            "avatar pseudo status"
@@ -49,7 +38,7 @@
         grid-area: name;
   
         > sib-display-value[name^='user.'] {
-          color: $color-dark-lava;
+          color: $color-216-4-22;
           font-weight: bold;
           @extend h1;
         }
@@ -80,7 +69,7 @@
 
       member-status[name$='available']{
         align-self: flex-end;
-        color: $color-majorelle-blue;
+        color: $color-244-73-62;
         grid-area: status;
         justify-self: flex-end;
 
@@ -97,7 +86,7 @@
           @include ci('awareness');
 
           &::before {
-            border-bottom: 2px solid $color-selective-yellow;
+            border-bottom: 2px solid $color-43-100-50;
             font-size: 7.3rem;
             padding-bottom: 1.5rem;
           }
@@ -107,7 +96,7 @@
           @include ci('armor');
 
           &::before {
-            border-bottom: 2px solid $color-selective-yellow;
+            border-bottom: 2px solid $color-43-100-50;
             font-size: 7.3rem;
             padding-bottom: 1.5rem;
           }
@@ -122,9 +111,9 @@
       
       [next=member-chat] {
         @include icon('speech');
-        border: 1px solid $color-majorelle-blue;
+        border: 1px solid $color-244-73-62;
         border-radius: 2em;
-        color: $color-majorelle-blue;
+        color: $color-244-73-62;
         font-size: 18px;
         font-weight: bold;
         justify-self: end;
diff --git a/src/styles/members.scss b/src/styles/layout/members/members.scss
similarity index 73%
rename from src/styles/members.scss
rename to src/styles/layout/members/members.scss
index 07c3fa4..b616fa4 100644
--- a/src/styles/members.scss
+++ b/src/styles/layout/members/members.scss
@@ -1,3 +1,51 @@
+%member-info {
+
+  sib-multiple[name^='user.'],
+  > member-info > div,
+  > sib-display-value {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 0;
+    margin-top: 1.7rem;
+
+    &::before {
+      color: $color-43-100-50;
+      padding: 0 0.6em 0 0;
+    }
+  }
+  
+  [name$='city'] * {
+    @include mdi('atom');
+  }
+
+  [name$='email'] * {
+    @include mdi('email-outline');
+  }
+
+  [name$='phone'] * {
+    @include mdi('cellphone-iphone');
+  }
+
+  [name="foaf:homepage"]:not(:empty) {
+    @include mdi('link-variant');
+  }
+}
+
+.how-link {
+  @extend .howto;
+  background-color: $color-0-0-100;
+  color: $color-216-4-22;
+  flex-wrap: nowrap;
+  .icon-idea {
+    background-color: $color-46-100-67;
+    border-radius: 100%;
+    justify-content: center;
+    margin-right: 1.2rem;
+    width: 1.8em;
+    height: 1.8em;
+  }
+}
+
 #members-list {
   @extend .grid-layer;
 
@@ -11,15 +59,15 @@
       justify-content: center;
 
       button {
-        color: $color-anti-flash-white;
+        color: $color-210-25-95;
         
         &:before {
-          color: $color-dark-lava;
+          color: $color-216-4-22;
           @include icon('arrow-left-circle');
         }
 
         &:disabled::before {
-          color: $color-manatee;
+          color: $color-215-6-63;
         }
       }
 
@@ -53,14 +101,14 @@
       justify-content: space-between;
 
       &:first-of-type {
-        color: $color-quartz;
+        color: $color-0-0-29;
         font-weight: bold;
         justify-content: center;
         margin: 3.75rem 0;
         position: relative;
 
         &::before {
-          border-top: 1px solid $color-timberwolf;
+          border-top: 1px solid $color-0-0-85;
           bottom: 0;
           content: '';
           left: 0;
@@ -73,7 +121,7 @@
         }
 
         span {
-          background-color: $color-anti-flash-white;
+          background-color: $color-210-25-95;
           padding: 0 60px;
         }
       }
@@ -81,7 +129,7 @@
       > sib-display {
         background-color: white;
         box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
-        color: $color-rolling-stone;
+        color: $color-210-4-50;
         cursor: pointer;
         display: flex;
         flex-flow: column wrap;
@@ -110,7 +158,7 @@
         }
 
         div[name='header'] {
-          border-bottom: 1px solid $color-anti-flash-white;
+          border-bottom: 1px solid $color-210-25-95;
           display: flex;
           flex-direction: column;
           padding: 0.85rem 0 3.4rem;
@@ -122,7 +170,7 @@
           }
 
           member-picture {
-            background-color: $color-white;
+            background-color: $color-0-0-100;
             border-radius: 50%;
             height: 28vh;
             margin: 1.7rem auto;
@@ -157,9 +205,9 @@
           
           [next=member-chat] {
             align-self: center;
-            border: 1px solid $color-majorelle-blue;
+            border: 1px solid $color-244-73-62;
             border-radius: 3.4rem;
-            color: $color-majorelle-blue;
+            color: $color-244-73-62;
             font-size: 1.8rem;
             font-weight: bold;
             padding: 1rem 2.55rem 0.7rem;
diff --git a/src/styles/layout/project-profile/_index.scss b/src/styles/layout/project-profile/_index.scss
new file mode 100644
index 0000000..c00467b
--- /dev/null
+++ b/src/styles/layout/project-profile/_index.scss
@@ -0,0 +1 @@
+@import 'project-profile'
\ No newline at end of file
diff --git a/src/styles/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss
similarity index 92%
rename from src/styles/project-profile.scss
rename to src/styles/layout/project-profile/project-profile.scss
index 7e321fa..d81d61c 100644
--- a/src/styles/project-profile.scss
+++ b/src/styles/layout/project-profile/project-profile.scss
@@ -19,12 +19,12 @@
   }
 
   [name='block-title'] {
-    border-bottom: 1px solid $color-link-water;
+    border-bottom: 1px solid $color-221-51-90;
     display: flex;
     padding-bottom: 3.4rem;
   
     > * {
-      color: $color-dark-lava;
+      color: $color-216-4-22;
       font-size: 2rem;
       font-weight: bold;
       padding-right: 0.85rem;
@@ -40,7 +40,7 @@
     }
     
     > :nth-child(5) {
-      color: $color-purple-dark;
+      color: $color-233-18-29;
       font-weight: normal;
       text-transform: none;
     }
@@ -50,7 +50,7 @@
     }
 
     > :nth-last-child(-n+2) {
-      color: $color-text-base;
+      color: $color-213-4-50;
       font-size: 1.6rem;
       font-weight: normal;
       text-transform: none;
@@ -105,7 +105,7 @@
   max-width: 100%;
 
   > * {
-    border: 1px solid $color-link-water;
+    border: 1px solid $color-221-51-90;
     flex: 1 1 auto;
     justify-content: space-between;
     margin: 0 -0.1rem -0.1rem 0;
@@ -158,7 +158,7 @@
         }
 
         &::before {
-          color: $color-selective-yellow;
+          color: $color-43-100-50;
           font-size: 2.2rem;
           padding: 0 1rem 0 0;
         }
@@ -187,7 +187,7 @@
         grid-row: 1 / span 2;
 
         div {
-          background-color: $color-white;
+          background-color: $color-0-0-100;
           border-radius: 50%;
           height: 7vh;
           overflow: hidden;
@@ -223,7 +223,7 @@
             margin-left: 1rem;
             
             sib-multiple [name='name'] {
-              @extend %group;
+              @extend %user-role;
             }
           }
         }
diff --git a/src/styles/main.scss b/src/styles/main.scss
deleted file mode 100644
index 3901cbb..0000000
--- a/src/styles/main.scss
+++ /dev/null
@@ -1,332 +0,0 @@
-[hidden],
-.hidden,
-.is-hidden {
-  display: none !important;
-}
-
-:root {
-  font-size: 62.5%;
-  font-family: Open Sans, sans-serif;
-  --sib-notifications-theme: #{$color-46-100-50};
-  
-  body {
-    /*Will help to make .content fit your height screen size. Part.1*/
-    background-color: $color-anti-flash-white;
-    color: $color-text-base;
-    display: flex;
-    flex-direction: column;
-    font-size: 1.6rem;
-    height: 100vh;
-    margin: 0;
-    overflow: hidden;
-    overflow-wrap: break-word;
-  }
-}
-
-img {
-  max-width: 100%;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: $color-dark-lava;
-  font-weight: 600;
-  padding: 0;
-  /*margin: 0.67em 0;*/
-
-  span {
-    font-weight: 400;
-    padding-left: 0.85rem;
-
-    &:before {
-      content: '// ';
-    }
-  }
-}
-
-h1 {
-  font-size: 2.1rem;
-}
-
-h2 {  font-size: 2rem;
-}
-
-h3 {
-  font-size: 1.6rem;
-}
-
-h4 {
-  font-size: 1.2rem;
-}
-
-h5 {
-  font-size: 2rem;
-}
-
-.debug {
-  outline: 2px dotted red;
-}
-
-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
-  text-decoration: none;
-  -webkit-appearance: none;
-}
-
-li {
-  list-style: none;
-  margin-right: 0.4rem;
-  padding-left: 0;
-}
-
-#job-offers,
-#members {
-  @extend %content-padding;
-}
-
-.frame {
-  @extend %frame;
-  padding: 5rem;
-}
-
-.layer {
-  position: absolute;
-  bottom: 0;
-  top: 0;
-  right: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  overflow-x: hidden;
-}
-
-/*
-#content {
-  display: flex;
-  overflow: hidden;
-}
-*/
-
-#mainContainer {
-  flex-grow: 1;
-  flex-shrink: 1;
-  overflow-y: auto;
-}
-
-.limiter {
-  display: block;
-  max-width: 650px;
-}
-/* sub menu (right menu) */
-#mainContainer {
-  display: flex;
-  > div#project,
-  > div#circle {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: stretch;
-    overflow-x: hidden;
-
-    > div {
-      transition: all 0.5s;
-    }
-  }
-}
-
-sib-route,
-sib-link {
-  cursor: pointer;
-}
-
-sib-link.back {
-  color: $color-purple-dark;
-  display: block;
-  font-size: 2rem;
-  font-weight: bold;
-  text-align: right;
-}
-
-.containerH {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.containerV {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.grow {
-  flex-grow: 1;
-  flex-shrink: 1;
-}
-
-.fix {
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.containerCenter {
-  justify-content: center;
-  align-items: center;
-}
-
-.reverse {
-  flex-direction: row-reverse;
-}
-
-#views-container {
-  flex: 1 0 0;
-  overflow-y: auto;
-}
-
-.grid-layer{
-  display: grid;
-  font-size: 16px;
-  grid-template-columns: [start]auto[middle]25%[end];
-  grid-template-rows: [start]7em[middle]auto[end];
-}
-.grid-layer-main {
-  grid-column-start: start;
-  grid-column-end: end;
-  grid-row-start: start;
-  grid-row-end: end;
-}
-.grid-layer-links {
-  grid-column-start: middle;
-  grid-column-end: end;
-  grid-row-start: start;
-  grid-row-end: middle;
-}
-
-
-/* TEMPLATE SKILLS*/
-
-sib-multiple[name*='skills'] {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.skill {
-  background-color: $color-selective-yellow;
-  border: 1px solid $color-selective-yellow;
-  border-radius: 2em;
-  color: $color-white;
-  display: block;
-  font-size: 1.4rem;
-  font-weight: bold;
-  margin: 0.4rem 1rem 0.4rem 0;
-  padding: 0.5rem 2rem;
-}
-
-member-info-groups {
-  @extend %group;
-}
-
-
-/* NEW RESPONSIVE */
-
-.right-sidebar {
-  overflow: hidden;
-  transition: width 0.3s;
-}
-
-.right-sidebar.js-right-sidebar-expanded {
-  width: 130px;
-}
-
-.right-sidebar.js-right-sidebar-collapsed {
-  width: 62px;
-}
-
-/*Define the basic row-column properties that construct the foundation*/
-.row {
-  display: flex;
-  max-width: 100%;
-}
-
-.content {
-  /*Will help to make .content fit your height screen size. Part 2*/
-  flex-direction: row;
-  height: 100%;
-  overflow: hidden;
-}
-
-.col {
-  min-width: 0;
-}
-
-.block-grid {
-  display: flex;
-  flex-wrap: nowrap;
-  height: 100%;
-}
-
-/* Dividing into columns */
-@mixin respond-to($breakpoint) {
-  
-  @if map-has-key($breakpoints, $breakpoint) {
-
-    @media (min-width: map-get($breakpoints, $breakpoint)) {
-      @content;
-    }
-  }
-
-  @else {
-    @warn "Sorry, no value could be retrieved from `#{$breakpoint}`."
-      + "Available breakpoints are: #{map-keys($breakpoints)}.";
-  }
-}
-
-.small-2 {
-
-  @include respond-to('phone'){
-    display: block;
-    flex: 0 1 calc(100% / 12 * 2);
-  }
-}
-
-.small-shrink {
-
-  @include respond-to('phone') {
-    display: block;
-    flex: 0 1 auto;
-  }
-}
-
-.medium-auto {
-
-  @include respond-to('tablet') {
-    display: block;
-    flex: 1;
-    overflow: auto;
-  }
-}
-
-.small-12 {
-
-  @include respond-to('phone') {
-    display: block;
-    flex: 0 1 calc(100% / 12 * 12);
-  }
-}
-
-.small-auto {
-
-  @include respond-to ('phone') {
-    display: block;
-    flex: 1;
-    overflow: auto;
-  }
-}
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
deleted file mode 100644
index d8d0b6e..0000000
--- a/src/styles/mixins.scss
+++ /dev/null
@@ -1,160 +0,0 @@
-@charset "UTF-8";
-@mixin debug {
-  $hsla: hsla(random(360), 100%, 50%, 0.3);
-  background-color: $hsla;
-}
-@mixin log($v) {
-  font-family: '__log__:#{$v}';
-}
-
-@mixin offset($corner: 1, $x: 0, $y: 0) {
-  // corner:
-  // 1-----2
-  // |     |
-  // |     |
-  // 3-----4
-  position: absolute;
-  @if ($corner == 1) {
-    top: $y;
-    left: $x;
-  }
-  @if ($corner == 2) {
-    top: $y;
-    right: $x;
-  }
-  @if ($corner == 3) {
-    bottom: $y;
-    left: $x;
-  }
-  @if ($corner == 4) {
-    bottom: $y;
-    right: $x;
-  }
-}
-
-@mixin position($top: 0, $right: null, $bottom: null, $left: null) {
-  //  --1--
-  // |     |
-  // 4     2
-  // |     |
-  //  --3--
-  @if ($right == null) {
-    $right: $top;
-  }
-
-  @if ($bottom == null) {
-    $bottom: $top;
-  }
-
-  @if ($left == null) {
-    $left: $right;
-  }
-
-  position: absolute;
-  top: $top;
-  left: $left;
-  right: $right;
-  bottom: $bottom;
-}
-
-@mixin pos($pos: 5, $position: absolute) {
-  // ╔═──┐ ╔═══╗ ┌──═╗
-  // │ 1 │ │ 2 │ │ 3 │
-  // └───┘ └───┘ └───┘
-  // ╔═──┐ ╔═══╗ ┌──═╗
-  // ║ 4 │ ║ 5 ║ │ 6 ║
-  // ╚═──┘ ╚═══╝ └──═╝
-  // ┌───┐ ┌───┐ ┌───┐
-  // │ 7 │ │ 8 │ │ 9 │
-  // ╚═──┘ ╚═══╝ └──═╝
-
-  $mod: ($pos - 1) % 3;
-
-  position: $position;
-  @if ($pos <= 6) {
-    top: 0;
-  }
-  @if ($mod <= 1) {
-    left: 0;
-  }
-  @if ($mod >= 1) {
-    right: 0;
-  }
-  @if ($pos >= 4) {
-    bottom: 0;
-  }
-}
-
-// @mixin border-shadow($border: top, $size: 4px, $opacity: 0.05, $color: black) {
-//   &:after {
-//     content: '';
-//     position: absolute;
-//     top: if(($border == bottom), auto, 0);
-//     left: if(($border == right), auto, 0);
-//     right: if(($border == left), auto, 0);
-//     bottom: if(($border == top), auto, 0);
-//     background-image: linear-gradient(to #{$border}, $color, transparent);
-//     #{$border}: -$size;
-//     opacity: $opacity;
-//     @if ($border == top or $border == bottom) {
-//       height: $size;
-//     } @else {
-//       width: $size;
-//     }
-//   }
-// }
-
-@mixin align($horizontal: center, $vertical: middle) {
-  text-align: $horizontal;
-  white-space: nowrap;
-  &:after,
-  > * {
-    display: inline-block;
-    vertical-align: $vertical;
-  }
-  &:after {
-    content: '';
-    height: 100%;
-    width: 0;
-    visibility: hidden;
-  }
-  > * {
-    //text-align:left;
-    white-space: normal;
-  }
-}
-
-@mixin list-reset($deep: 0) {
-  padding: 0;
-  margin: 0;
-  display: block;
-  list-style: none;
-  @if ($deep == 0) {
-    > li {
-      padding: 0;
-      margin: 0;
-      display: block;
-      list-style: none;
-    }
-  } @else {
-    ul,
-    ol,
-    li {
-      padding: 0;
-      margin: 0;
-      display: block;
-      list-style: none;
-    }
-  }
-}
-
-@mixin styleTemplateFieldset($name) {
-  template-legend-#{$name} {
-    border-bottom: 1px solid $color-link-water;
-    color: $color-purple-dark;
-    font-size: 1.8rem;
-    font-weight: 600;
-    padding-bottom: 1rem;
-  }
-}
-
diff --git a/src/styles/right-panel.scss b/src/styles/right-panel.scss
deleted file mode 100644
index 8f8ff5b..0000000
--- a/src/styles/right-panel.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-.right-link {
-  padding: 0.85rem;
-  margin-bottom: 1.7rem;
-  margin-left: 8.5rem;
-  flex-basis: auto;
-  border-radius: 2em;
-
-  div[class*="icon-"] {
-    align-items: center;
-    display: flex;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-}
-
-.how-link {
-  @extend .right-link;
-  background-color: $color-white;
-  color: $color-dark-lava;
-  flex-wrap: nowrap;
-  .icon-idea {
-    background-color: $color-mustard;
-    border-radius: 100%;
-    justify-content: center;
-    margin-right: 1.2rem;
-    //flex-direction: column;
-    width: 1.8em;
-    height: 1.8em;
-    //margin-right: 1em;
-  }
-}
-
-.action-link {
-  @extend .right-link;
-  background-color: $color-selective-yellow;
-  color: $color-white;
-  font-weight: bold;
-  text-transform: uppercase;
-  cursor: pointer;
-
-  .icon-plus {
-    font-size: 20px;
-    justify-content: center;
-    margin: 0.5rem 0.5rem 0.5rem 0;
-
-    &:before {
-      //font-size: 1.3em;
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
deleted file mode 100644
index b9d7b22..0000000
--- a/src/styles/variables.scss
+++ /dev/null
@@ -1,150 +0,0 @@
-//Color Variables
-$color-quartz:           hsl(0, 0%, 29%);
-$color-timberwolf:       hsl(0, 0%, 85%);
-$color-white:            hsl(0, 0%,100%);
-
-$color-selective-yellow: hsl(43, 100%, 50%);
-$color-mikado-yellow:    hsl(45, 95%, 54%);
-$color-mustard:          hsl(46, 100%, 67%);
-$color-46-100-50:        hsl(46, 100%, 50%);
-
-$color-rolling-stone:    hsl(210, 4%, 50%);
-$color-taupe-gray:       hsl(210, 5%, 56%);
-$color-platinum:         hsl(210, 17%, 91%);
-$color-anti-flash-white: hsl(210, 25%, 95%);
-$color-text-base:        hsl(213, 4%, 50%);
-$color-gainsboro:        hsl(213, 13%, 86%);
-$color-gainsboro-a02:    hsla(213, 13%, 86%, 0.2);
-$color-213-20-91:        hsl(213, 20%, 91%);
-$color-bombay:           hsl(215, 9%, 73%);
-$color-manatee:          hsl(215, 6%, 63%);
-$color-dark-lava:        hsl(216, 4%, 22%);
-$color-link-water:       hsl(221, 51%, 90%);
-$color-222-52-90:        hsl(222, 52%, 90%);
-$color-glitter:          hsl(222, 57%, 95%);
-$color-lavender-gray:    hsl(229, 25%, 79%);
-$color-purple-dark:      hsl(233, 18%, 29%);
-$color-spun-pearl:       hsl(244, 10%, 70%);
-$color-majorelle-blue:   hsl(244, 73%, 62%);
-
-%backlink {
-  @include icon('arrow-left-circle');
-  color: #3d4057;
-  text-decoration: underline;
-
-  &::before {
-    text-decoration: none;
-  }
-}
-
-%button {
-  display: inline-block;
-  padding: 0.85rem 2.55rem;
-  border: none;
-  border-radius: 100em;
-  font-weight: normal;
-}  
-
-%content-padding {
-  flex: 1;
-  padding: 4.4rem;
-}
-
-%frame {
-  @extend %shadow;
-  background-color: $color-white;
-}
-
-%group {
-  border: 1px solid $color-mikado-yellow;
-  border-radius: 3px;
-  color: $color-rolling-stone;
-  font-size: 1.4rem;
-  font-weight: 400;
-  margin-right: 0.4rem;
-  padding: calc(1.6rem - 0.8em) 0.7em;
-}
-
-%member-info {
-
-  sib-multiple[name^='user.'],
-  > member-info > div,
-  > sib-display-value {
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: 0;
-    margin-top: 1.7rem;
-
-    &::before {
-      color: $color-selective-yellow;
-      padding: 0 0.6em 0 0;
-    }
-  }
-  
-  [name$='city'] * {
-    @include mdi('atom');
-  }
-
-  [name$='email'] * {
-    @include mdi('email-outline');
-  }
-
-  [name$='phone'] * {
-    @include mdi('cellphone-iphone');
-  }
-
-  [name="foaf:homepage"]:not(:empty) {
-    @include mdi('link-variant');
-  }
-}
-
-%label {
-  color: $color-spun-pearl;
-  font-weight: 600;
-  margin: 2em 0 0.5em;
-  text-transform: uppercase;
-
-  > div {
-    padding-bottom: 1rem;
-  }
-}
-
-%notification {
-  align-items: center;
-  background-color: $color-mustard;
-  border-radius: 100%;
-  color: $color-dark-lava;
-  display: flex !important;
-  font-size: 1.3rem;
-  height: 1.7em;
-  justify-content: center;
-  width: 1.7em;
-}
-
-%shadow {
-  box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
-}
-
-%status-open {
-  background-color: $color-majorelle-blue;
-  border: none;
-  border-radius: 100em;
-  color: $color-white;
-  display: inline-block;
-  font-weight: normal;
-  padding: 0.85rem 1.7rem;
-}
-
-%submit-form {
-  background-color: $color-purple-dark;
-  color: $color-white;
-  float: right;
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
-$breakpoints: (
-  phone: 480px,
-  tablet: 768px,
-  desktop: 1024px
-) !default;