diff --git a/public/icons/icon-192x192.png b/public/icons/icon-192x192.png
new file mode 100644
index 0000000..cfd5211
Binary files /dev/null and b/public/icons/icon-192x192.png differ
diff --git a/public/icons/icon-256x256.png b/public/icons/icon-256x256.png
new file mode 100644
index 0000000..8b1d420
Binary files /dev/null and b/public/icons/icon-256x256.png differ
diff --git a/public/icons/icon-384x384.png b/public/icons/icon-384x384.png
new file mode 100644
index 0000000..81f5330
Binary files /dev/null and b/public/icons/icon-384x384.png differ
diff --git a/public/icons/icon-512x512.png b/public/icons/icon-512x512.png
new file mode 100644
index 0000000..a01c287
Binary files /dev/null and b/public/icons/icon-512x512.png differ
diff --git a/public/icons/icon.svg b/public/icons/icon.svg
new file mode 100644
index 0000000..a4b6abb
--- /dev/null
+++ b/public/icons/icon.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 44 44" width="44" height="44" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style>
+      .a {
+        fill: #fff;
+      }
+
+      .b {
+        fill: #edb824;
+      }
+    </style>
+  </defs>
+  <path class="b" d="M 43.119 21.822 C 38.466 32.856 31.964 39.365 20.603 43.229 C 8.893 47.211 4.585 35.113 0.549 22.003 C -2.631 11.684 8.528 3.249 20.603 0.418 C 33.245 -2.546 47.747 10.851 43.119 21.822 Z" style=""/>
+  <path class="a" d="M 20.549 23.084 C 13.223 22.515 10.382 20.572 10.382 16.167 L 10.382 15.787 C 10.382 10.434 14.818 7.875 21.048 7.875 C 28.623 7.875 31.761 11.239 31.761 16.451 L 31.761 16.687 L 25.433 16.687 L 25.433 12.661 L 16.761 12.661 L 16.761 15.645 C 16.761 17.493 17.709 18.394 21.596 18.678 C 28.224 19.198 32.061 20.668 32.061 25.737 L 32.061 26.068 C 32.061 31.043 28.323 34.218 21.047 34.218 C 13.422 34.218 10.033 30.474 10.033 25.926 L 10.033 25.737 L 16.462 25.737 L 16.462 29.432 L 25.582 29.432 L 25.582 26.305 C 25.582 24.126 24.285 23.367 20.549 23.084 Z" style=""/>
+</svg>
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index cf27db3..0420bc7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="theme-color" content="#3498db" />
+    <meta name="theme-color" content="#001769" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, user-scalable=no"
     />
-    <!-- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> -->
+    <link rel="shortcut icon" href="%PUBLIC_URL%/icons/icon.svg">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Secret-in</title>
     <script src="%PUBLIC_URL%/app-version.js"></script>
diff --git a/public/logo.svg b/public/logo.svg
new file mode 100644
index 0000000..7a27b38
--- /dev/null
+++ b/public/logo.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 235 44" width="235" height="44" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style>
+      .a {
+        fill: #001769;
+      }
+
+      .b {
+        fill: #edb824;
+      }
+    </style>
+  </defs>
+  <path class="a" d="M20.1434,29.3163C12.72,28.7106,9.8424,26.64,9.8424,21.9444V21.54c0-5.7052,4.4938-8.4321,10.8056-8.4321,7.6744,0,10.8549,3.5849,10.8549,9.14V22.5h-6.412V18.2083H16.3053v3.1805c0,1.9691.96,2.9291,4.8982,3.2315,6.7145.5556,10.6034,2.1212,10.6034,7.5232v.3534c0,5.3017-3.7871,8.6853-11.159,8.6853-7.7253,0-11.159-3.9892-11.159-8.8365v-.2022h6.5139v3.9383h9.2392V32.75C25.2421,30.4275,23.9288,29.6188,20.1434,29.3163Z"/>
+  <path class="a" d="M54.2762,36.0818v-4.14h6.21v.2014c0,4.7971-4.0385,9.0386-11.7146,9.0386-8.6343,0-12.5216-5.7562-12.5216-13.38V26.4884c0-7.6243,3.9892-13.38,12.27-13.38,8.23,0,11.9661,5.7562,11.9661,13.38v3.08H42.8148v6.5131Zm-.4043-17.8735H42.8148v6.5131H53.8718Z"/>
+  <path class="a" d="M87.6,30.7809v1.06c0,5.1-3.5339,9.3411-11.1081,9.3411-8.23,0-11.8148-5.605-11.8148-13.2292V26.3372c0-7.6744,3.5849-13.2292,11.8148-13.2292,7.5741,0,11.1081,4.3426,11.1081,9.7454v1.1111H81.39v-5.15H71.2424V35.4259H81.39V30.7809Z"/>
+  <path class="a" d="M99.3659,19.5208V40.5255H92.8026V21.3387l-.4553-7.5741h5.8072l.5556,3.2315a8.5339,8.5339,0,0,1,7.2207-3.8881c.3024,0,.6049.051.7577.051v6.3619Z"/>
+  <path class="a" d="M128.8043,36.0818v-4.14h6.21v.2014c0,4.7971-4.0385,9.0386-11.7146,9.0386-8.6343,0-12.5216-5.7562-12.5216-13.38V26.4884c0-7.6243,3.9892-13.38,12.27-13.38,8.23,0,11.9661,5.7562,11.9661,13.38v3.08H117.3429v6.5131ZM128.4,18.2083H117.3429v6.5131H128.4Z"/>
+  <path class="a" d="M149.2042,19.5208V35.4259h6.9166v5.1a10.2915,10.2915,0,0,1-4.14.6567c-5.5031,0-9.3411-2.4746-9.3411-9.392V19.5208H138.55V13.7646h4.0895V6.1913h6.5649v7.5733h7.4229v5.7562Z"/>
+  <path class="a" d="M188.535,2H195.1v5.1H188.535ZM195.1,40.5255H188.535V13.7646H195.1Z"/>
+  <path class="a" d="M208.1261,18.814V40.5255h-6.5633V21.3387l-.4553-7.5741h5.8072l.6065,3.5348c1.6651-2.4236,4.4429-4.1914,8.6836-4.1914,5.8581,0,8.2316,4.2415,8.2316,9.0888V40.5255h-6.5139V18.814Z"/>
+  <path class="b" d="M182,26c-2.0659,5.1543-4.9536,8.195-10,10-5.2,1.86-7.1128-3.7911-8.9065-9.9163C161.6817,21.2627,166.6376,17.3216,172,16,177.6148,14.6162,184.0547,20.8736,182,26Z"/>
+</svg>
\ No newline at end of file
diff --git a/public/manifest.json b/public/manifest.json
index da58cd5..3908fea 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,8 +1,38 @@
 {
-  "short_name": "Secret-in.me",
-  "name": "Secret-in.me - Open source secret manager with sharing capability",
-  "start_url": "./index.html",
+  "categories": ["security"],
+  "theme_color": "#001769",
+  "background_color": "#001769",
   "display": "standalone",
-  "theme_color": "#3498db",
-  "background_color": "#fafafa"
-}
+  "scope": "/",
+  "start_url": "./index.html",
+  "name": "Secret-in.me - Open source secret manager with sharing capability",
+  "short_name": "Secret-in.me",
+  "description": "A team-oriented open source password manager with a focus on transparency, usability and security.",
+  "icons": [
+      {
+          "src": "/icons/icon.svg",
+          "sizes": "any",
+          "type": "image/svg+xml"
+      },
+      {
+          "src": "/icons/icon-192x192.png",
+          "sizes": "192x192",
+          "type": "image/png"
+      },
+      {
+          "src": "/icons/icon-256x256.png",
+          "sizes": "256x256",
+          "type": "image/png"
+      },
+      {
+          "src": "/icons/icon-384x384.png",
+          "sizes": "384x384",
+          "type": "image/png"
+      },
+      {
+          "src": "/icons/icon-512x512.png",
+          "sizes": "512x512",
+          "type": "image/png"
+      }
+  ]
+}
\ No newline at end of file
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
index 5c56d27..f9637ff 100644
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@@ -67,7 +67,12 @@ function Sidebar() {
     <div className="sidebar">
       <div className="sidebar-header">
         <Link to="/" title={isOnline && secretin.api.db}>
-          {isOnline ? 'Secret-In.me' : 'Offline'}
+          <img
+            src="/logo.svg"
+            style={{ width: '100%' }}
+            alt="logo"
+            title={isOnline ? 'Secret-In.me' : 'Offline'}
+          ></img>
         </Link>
       </div>
       <div className="sidebar-content">
diff --git a/src/components/secrets/SecretUserListNew.js b/src/components/secrets/SecretUserListNew.js
index 8f09d7d..5eccaab 100644
--- a/src/components/secrets/SecretUserListNew.js
+++ b/src/components/secrets/SecretUserListNew.js
@@ -15,6 +15,7 @@ import Icon from 'components/utilities/Icon';
 
 class SecretUserListNew extends Component {
   static propTypes = {
+    knownFriendList: PropTypes.array,
     secret: PropTypes.instanceOf(Secret),
     errors: PropTypes.object,
     dispatch: PropTypes.func,
@@ -84,6 +85,7 @@ class SecretUserListNew extends Component {
           value={this.state.user.username}
           size="small"
           onChange={this.handleChange}
+          autoCompleteFromList={this.props.knownFriendList}
           error={this.props.errors.username}
         />
         <Select
@@ -107,4 +109,11 @@ class SecretUserListNew extends Component {
   }
 }
 
-export default connect()(SecretUserListNew);
+const mapStateToProps = state => {
+  const { knownFriendList } = state.Metadata;
+  return {
+    knownFriendList,
+  };
+};
+
+export default connect(mapStateToProps)(SecretUserListNew);
diff --git a/src/components/users/UserAvatar.js b/src/components/users/UserAvatar.js
index aa49d4a..07fa4c3 100644
--- a/src/components/users/UserAvatar.js
+++ b/src/components/users/UserAvatar.js
@@ -4,12 +4,12 @@ import classNames from 'classnames';
 import User from 'models/User';
 
 const COLORS = [
-  'green-sea',
+  'emerland',
   'nephritis',
   'belize-hole',
   'wisteria',
   'midnight-blue',
-  'orange',
+  'sun-flower',
   'pumpkin',
   'pomegranate',
   'silver',
diff --git a/src/components/users/UserConnectForm.js b/src/components/users/UserConnectForm.js
index 1ebfb21..4db651b 100644
--- a/src/components/users/UserConnectForm.js
+++ b/src/components/users/UserConnectForm.js
@@ -82,8 +82,12 @@ class UserConnectForm extends Component {
           className="user-connect-title"
           title={this.props.isOnline && secretin.api.db}
         >
-          Secret-in.me
-          <small>{status}</small>
+          <img
+            src="/logo.svg"
+            style={{ width: '70%' }}
+            alt="logo"
+            title={this.props.isOnline ? 'Secret-In.me' : 'Offline'}
+          />
         </h2>
 
         <Input
diff --git a/src/components/utilities/Input.js b/src/components/utilities/Input.js
index bb1d74a..335d094 100644
--- a/src/components/utilities/Input.js
+++ b/src/components/utilities/Input.js
@@ -5,6 +5,7 @@ import classNames from 'classnames';
 
 import Icon from 'components/utilities/Icon';
 import Button from 'components/utilities/Button';
+import Dropdown from 'components/utilities/Dropdown';
 
 class Input extends Component {
   static propTypes = {
@@ -25,6 +26,7 @@ class Input extends Component {
     autoFocus: PropTypes.bool,
     autoSelect: PropTypes.bool,
     autoComplete: PropTypes.bool,
+    autoCompleteFromList: PropTypes.array,
     disabled: PropTypes.bool,
     readOnly: PropTypes.bool,
     actions: PropTypes.array,
@@ -43,6 +45,7 @@ class Input extends Component {
     autoFocus: false,
     autoSelect: false,
     autoComplete: false,
+    autoCompleteFromList: [],
     disabled: false,
     readOnly: false,
     actions: [],
@@ -57,6 +60,7 @@ class Input extends Component {
     this.onTogglePasswordShow = this.onTogglePasswordShow.bind(this);
     this.id = uniqueId(`${this.props.name}_input_`);
     this.state = {
+      autoCompleteSelected: false,
       showPassword: false,
     };
   }
@@ -77,12 +81,18 @@ class Input extends Component {
   }
 
   handleChange(event) {
+    this.setState({ autoCompleteSelected: false });
     this.props.onChange({
       name: this.props.name,
       value: event.target.value,
     });
   }
 
+  handleAutoCompleteSelect(value) {
+    this.setState({ autoCompleteSelected: true });
+    this.props.onChange({ name: this.props.name, value });
+  }
+
   select() {
     this.input.select();
   }
@@ -109,8 +119,16 @@ class Input extends Component {
       readOnly,
       actions,
       inputProps,
+      autoCompleteFromList,
     } = this.props;
 
+    const filteredAutoCompleteList =
+      this.props.value.length > 0
+        ? autoCompleteFromList.filter(elem =>
+            elem.toLowerCase().includes(this.props.value.toLowerCase())
+          )
+        : [];
+
     return (
       <div className={className}>
         {label && (
@@ -136,12 +154,30 @@ class Input extends Component {
             value={this.props.value}
             onChange={this.handleChange}
             placeholder={placeholder}
-            autoComplete={autoComplete ? null : 'new-password'}
+            autoComplete={autoComplete ? 'on' : 'off'}
             autoFocus={autoFocus}
             disabled={disabled}
             readOnly={readOnly}
             {...inputProps}
           />
+          {!this.state.autoCompleteSelected &&
+            filteredAutoCompleteList.length > 0 && (
+              <Dropdown
+                id="input--auto-complete-list"
+                open={Boolean(this.props.value.length > 0)}
+              >
+                <Dropdown.Menu>
+                  {filteredAutoCompleteList.slice(0, 5).map(elem => (
+                    <Dropdown.MenuItem
+                      key={elem}
+                      onSelect={() => this.handleAutoCompleteSelect(elem)}
+                    >
+                      {elem}
+                    </Dropdown.MenuItem>
+                  ))}
+                </Dropdown.Menu>
+              </Dropdown>
+            )}
           {type === 'password' && (
             <div className="input--password-show">
               <Button
diff --git a/src/slices/MetadataSlice.js b/src/slices/MetadataSlice.js
index cc460d3..384452d 100644
--- a/src/slices/MetadataSlice.js
+++ b/src/slices/MetadataSlice.js
@@ -34,6 +34,13 @@ const getById = (state, secretId) =>
 const _rebuildMetadata = (state, action) => {
   const { metadata } = action.payload;
   state.metadata = buildSecrets(Object.values(metadata));
+  const friendList = new Set();
+  Object.values(metadata).forEach(metadatum => {
+    Object.values(metadatum.users).forEach(user => {
+      friendList.add(user.username);
+    });
+  });
+  state.knownFriendList = Array.from(friendList).sort();
 };
 
 export const MetadataSlice = createSlice({
diff --git a/src/stylesheets/_common.sass b/src/stylesheets/_common.sass
index 9d7b1dc..ff703c3 100644
--- a/src/stylesheets/_common.sass
+++ b/src/stylesheets/_common.sass
@@ -37,7 +37,7 @@ h1, h2, h3, h4, h5, h6
 a
   text-decoration: none
   cursor: pointer
-  color: $color-turquoise
+  color: $color-turquoise-my-secret-in
   outline: none
 
 a:hover
diff --git a/src/stylesheets/_vars.sass b/src/stylesheets/_vars.sass
index 34722ed..40c9607 100644
--- a/src/stylesheets/_vars.sass
+++ b/src/stylesheets/_vars.sass
@@ -18,10 +18,13 @@ $color-sun-flower: #f1c40f
 $color-turquoise: #1abc9c
 $color-wet-asphalt: #34495e
 $color-wisteria: #8e44ad
+$color-turquoise-my-secret-in: #0cc7ab
+$color-sun-flower-my-secret-in: #edb824
+$color-ocean-my-secret-in: #001769
 
 $color-brand: #334149
 $color-text: #333
-$color-success: $color-emerland
+$color-success: $color-turquoise-my-secret-in
 $color-error: $color-alizarin
 
 $color-background: #fafafa
diff --git a/src/stylesheets/components/Sidebar.sass b/src/stylesheets/components/Sidebar.sass
index c1d128e..2c37dfa 100644
--- a/src/stylesheets/components/Sidebar.sass
+++ b/src/stylesheets/components/Sidebar.sass
@@ -9,7 +9,7 @@
     right: 0
     top: 0
     bottom: 0
-    border-left: 1px solid rgba($color-brand, .05)
+    border-left: 1px solid rgba($color-ocean-my-secret-in, .05)
 
 .sidebar-header
   display: flex
@@ -19,7 +19,7 @@
   font-weight: $font-weight-semibold
   height: 50px
   color: rgba($color-brand, .4)
-  border-bottom: 1px solid rgba($color-brand, .05)
+  border-bottom: 1px solid rgba($color-ocean-my-secret-in, .05)
   a
     color: inherit
     text-decoration: inherit
@@ -39,6 +39,12 @@
   margin: 0
   padding: 0
 
+.sidebar-menu-item .icon
+  fill: $color-ocean-my-secret-in
+
+.sidebar-menu-item .icon--id-logout
+  fill: $color-error
+
 .sidebar-menu-item--home
   @media screen and (max-width: $width-small)
     display: none
@@ -70,4 +76,4 @@
 .sidebar-separator
   margin-top: 20px
   margin-bottom: 20px
-  border-bottom: 1px solid rgba($color-brand, 0.05)
+  border-bottom: 1px solid rgba($color-ocean-my-secret-in, 0.05)
diff --git a/src/stylesheets/components/options/ImportKeepass.sass b/src/stylesheets/components/options/ImportKeepass.sass
index 72017eb..c52fb8f 100644
--- a/src/stylesheets/components/options/ImportKeepass.sass
+++ b/src/stylesheets/components/options/ImportKeepass.sass
@@ -9,7 +9,7 @@
     margin: 0 0 20px
 
   .spinner
-    color: $color-peter-river
+    color: $color-turquoise-my-secret-in
   .icon--id-done
     color: $color-success
 
diff --git a/src/stylesheets/components/secrets/SecretListItem.sass b/src/stylesheets/components/secrets/SecretListItem.sass
index adaacda..30f8c58 100644
--- a/src/stylesheets/components/secrets/SecretListItem.sass
+++ b/src/stylesheets/components/secrets/SecretListItem.sass
@@ -9,7 +9,7 @@
 .secret-list-item
   td
     padding: 0 0 0 10px
-    border-bottom: 1px solid rgba($color-brand, .05)
+    border-bottom: 1px solid rgba($color-ocean-my-secret-in, .05)
     vertical-align: middle
     @media screen and (max-width: $width-small)
       padding: 0 0 0 2px
@@ -94,5 +94,5 @@
   font-size: 18px
   td
     padding: 40px 0 10px 10px
-    border-bottom: 1px solid rgba($color-brand, .05)
+    border-bottom: 1px solid rgba($color-ocean-my-secret-in, .05)
     vertical-align: middle
diff --git a/src/stylesheets/components/users/UserAvatar.sass b/src/stylesheets/components/users/UserAvatar.sass
index 44267c8..3c83333 100644
--- a/src/stylesheets/components/users/UserAvatar.sass
+++ b/src/stylesheets/components/users/UserAvatar.sass
@@ -27,7 +27,7 @@
   line-height: 12px
 
 .user-avatar--color-turquoise
-  background-color: $color-turquoise
+  background-color: $color-turquoise-my-secret-in
 .user-avatar--color-emerland
   background-color: $color-emerland
 .user-avatar--color-peter-river
@@ -42,6 +42,12 @@
   background-color: $color-nephritis
 .user-avatar--color-belize-hole
   background-color: $color-belize-hole
+.user-avatar--color-ocean-my-secret-in
+  background-color: $color-ocean-my-secret-in
+.user-avatar--color-sun-flower-my-secret-in
+  background-color: $color-sun-flower-my-secret-in
+.user-avatar--color-turquoise-my-secret-in
+  background-color: $color-turquoise-my-secret-in
 .user-avatar--color-wisteria
   background-color: $color-wisteria
 .user-avatar--color-midnight-blue
diff --git a/src/stylesheets/components/users/UserConnect.sass b/src/stylesheets/components/users/UserConnect.sass
index 1689798..5a9115d 100644
--- a/src/stylesheets/components/users/UserConnect.sass
+++ b/src/stylesheets/components/users/UserConnect.sass
@@ -19,16 +19,16 @@
 .user-connect-more
   text-align: center
   margin: 10px 0 0
-  color: $color-peter-river
+  color: $color-turquoise-my-secret-in
 
 .user-connect-create
   text-align: center
   margin: 10px 0 0
   a
-    color: $color-peter-river
+    color: $color-turquoise-my-secret-in
 
 .user-connect-progress-bar
-  border-top: 3px solid $color-peter-river
+  border-top: 3px solid $color-turquoise-my-secret-in
 
 .user-connect-progress
   color: rgba($color-brand, .8)
diff --git a/src/stylesheets/components/utilities/Breadcrumb.sass b/src/stylesheets/components/utilities/Breadcrumb.sass
index fa69296..2c4c992 100644
--- a/src/stylesheets/components/utilities/Breadcrumb.sass
+++ b/src/stylesheets/components/utilities/Breadcrumb.sass
@@ -8,6 +8,9 @@
   @media screen and (max-width: $width-small)
     font-size: 1rem
 
+.breadcrumb-item .icon
+  fill: $color-ocean-my-secret-in
+
 .breadcrumb-item-separator
   display: block
 
diff --git a/src/stylesheets/components/utilities/Button.sass b/src/stylesheets/components/utilities/Button.sass
index 6cfd9ec..5a1423e 100644
--- a/src/stylesheets/components/utilities/Button.sass
+++ b/src/stylesheets/components/utilities/Button.sass
@@ -40,12 +40,12 @@
 
 .button--style-primary
   @extend .button--style-default
-  background-color: $color-peter-river
+  background-color: $color-turquoise-my-secret-in
   color: white
 
 .button--style-warning
   @extend .button--style-primary
-  background-color: $color-pomegranate
+  background-color: $color-alizarin
 
 .button--style-success
   @extend .button--style-primary
diff --git a/src/stylesheets/components/utilities/Checkbox.sass b/src/stylesheets/components/utilities/Checkbox.sass
index 17e138a..00d4b65 100644
--- a/src/stylesheets/components/utilities/Checkbox.sass
+++ b/src/stylesheets/components/utilities/Checkbox.sass
@@ -18,7 +18,7 @@
     transition: all .2s
 
   &.checkbox--checked
-    background-color: $color-peter-river
+    background-color: $color-turquoise-my-secret-in
     &:after
       margin-left: 8px
 
diff --git a/src/stylesheets/components/utilities/Icon.sass b/src/stylesheets/components/utilities/Icon.sass
index 32d0b38..25250c4 100644
--- a/src/stylesheets/components/utilities/Icon.sass
+++ b/src/stylesheets/components/utilities/Icon.sass
@@ -1,3 +1,3 @@
 .icon
   display: inline-block
-  fill: currentColor
+  fill: currentColor
\ No newline at end of file
diff --git a/src/stylesheets/components/utilities/Input.sass b/src/stylesheets/components/utilities/Input.sass
index 619e0a6..c1397da 100644
--- a/src/stylesheets/components/utilities/Input.sass
+++ b/src/stylesheets/components/utilities/Input.sass
@@ -97,6 +97,12 @@
 .input--wrapper
   position: relative
 
+.input--wrapper .dropdown
+  display: block
+
+.input--wrapper .dropdown-menu
+  width: 100%
+
 .input--password-show
   position: absolute
   bottom: 0
diff --git a/src/stylesheets/components/utilities/Page.sass b/src/stylesheets/components/utilities/Page.sass
index 95bd8ce..f2fde1a 100644
--- a/src/stylesheets/components/utilities/Page.sass
+++ b/src/stylesheets/components/utilities/Page.sass
@@ -12,7 +12,7 @@
   justify-content: space-between
   margin: 0 20px 0px
   height: 50px
-  border-bottom: 1px solid rgba($color-brand, .05)
+  border-bottom: 1px solid rgba($color-ocean-my-secret-in, .05)
   @media screen and (max-width: $width-small)
     flex: 0 0 30px
     height: 30px
