diff --git a/src/lib/global.ts b/src/lib/global.ts
index 9c89919b..c3722182 100644
--- a/src/lib/global.ts
+++ b/src/lib/global.ts
@@ -118,15 +118,15 @@ export const Global = styled.div`
   }
 
   [data-priority='white'] {
-    --woly-shape-default: transparent;
+    --woly-shape-default: hsla(var(--bw-1000), 1);
     --woly-shape-disabled: hsla(var(--bw-200), 1);
-    --woly-shape-hover: transparent;
-    --woly-shape-active: transparent;
+    --woly-shape-hover: hsla(var(--bw-400), 1);
+    --woly-shape-active: hsla(var(--bw-600), 1);
 
-    --woly-shape-text-default: hsla(var(--bw-1000), 1);
+    --woly-shape-text-default: hsla(var(--bw-0), 1);
     --woly-shape-text-disabled: hsla(var(--bw-300), 1);
-    --woly-shape-text-hover: hsla(var(--bw-400), 1);
-    --woly-shape-text-active: hsla(var(--bw-500), 1);
+    --woly-shape-text-hover: hsla(var(--bw-0), 1);
+    --woly-shape-text-active: hsla(var(--bw-0), 1);
 
     --woly-canvas-default: transparent;
     --woly-canvas-disabled: hsla(var(--bw-200), 1);
diff --git a/src/static/icons/index.ts b/src/static/icons/index.ts
index 65413845..4fbe75d7 100644
--- a/src/static/icons/index.ts
+++ b/src/static/icons/index.ts
@@ -12,3 +12,4 @@ export { default as IconSearch } from './search.svg';
 export { default as IconFilledUnchecked } from './check-filled-unchecked.svg';
 export { default as IconSpinner } from './spinner.svg';
 export { default as IconProfile } from './profile.svg';
+export { default as Threebars } from './threebars.svg';
diff --git a/src/static/icons/threebars.svg b/src/static/icons/threebars.svg
new file mode 100644
index 00000000..0f77d4db
--- /dev/null
+++ b/src/static/icons/threebars.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M11.41 9H.59C0 9 0 8.59 0 8c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm0-4H.59C0 5 0 4.59 0 4c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zM.59 11H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1H.59C0 13 0 12.59 0 12c0-.59 0-1 .59-1z"/></svg>
diff --git a/src/woly/atoms/button-icon/index.tsx b/src/woly/atoms/button-icon/index.tsx
index 885f48f9..779ac909 100644
--- a/src/woly/atoms/button-icon/index.tsx
+++ b/src/woly/atoms/button-icon/index.tsx
@@ -128,8 +128,8 @@ export const ButtonIcon = styled(ButtonIconBase)`
 
   &[data-weight='goast'] {
     --local-shape-color: transparent;
-    --local-icon-color: var(--woly-shape-text-default);
-    --local-border-color: var(--woly-shape-text-default);
+    --local-icon-color: var(--woly-shape-default);
+    --local-border-color: var(--woly-shape-default);
 
     --local-shadow: var(--woly-border-width) var(--woly-border-width)
       calc(var(--woly-border-width) * 4) hsla(0, 0%, 100%, 50%);
diff --git a/src/woly/atoms/button-icon/usage.mdx b/src/woly/atoms/button-icon/usage.mdx
index 0d9675a1..fefdb8a5 100644
--- a/src/woly/atoms/button-icon/usage.mdx
+++ b/src/woly/atoms/button-icon/usage.mdx
@@ -146,12 +146,6 @@ In case of choosing button-icon in black-and-white priority with outline styles
       weight="goast"
       priority="white"
     />
-    <ButtonIcon
-      icon={<IconSearch />}
-      onClick={() => console.info('ButtonIcon clicked')}
-      priority="white"
-      weight="fill"
-    />
   </block.L>
 </Playground>
 
diff --git a/src/woly/atoms/surface/index.tsx b/src/woly/atoms/surface/index.tsx
index 5e053fba..efdb1a07 100644
--- a/src/woly/atoms/surface/index.tsx
+++ b/src/woly/atoms/surface/index.tsx
@@ -1,12 +1,32 @@
+import React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Priority } from 'lib/types';
 
-const map = (properties: Priority) => ({
+interface SurfaceProps {
+  weight?: string;
+}
+
+const map = (properties: SurfaceProps & Priority) => ({
   'data-priority': properties.priority || 'secondary',
+  'data-weight': properties.weight || 'goast',
 });
 
 export const Surface = styled.div.attrs(map)`
-  background-color: var(--woly-shape-text-default);
+  z-index: 1;
+
+  width: 100%;
+
   border-radius: var(--woly-rounding);
-  box-shadow: var(--woly-box-shadow, 3px 3px 8px rgba(11, 31, 53, 0.04));
-` as StyledComponent<'div', Record<string, unknown>, Priority>;
+
+  &[data-weight='fill'] {
+    background-color: var(--woly-shape-default);
+    border-color: var(--woly-shape-default);
+    box-shadow: 3px 3px 8px var(--woly-shape-default);
+  }
+
+  &[data-weight='goast'] {
+    background-color: var(--woly-background);
+    border-color: var(--woly-background);
+    box-shadow: 3px 3px 8px var(--woly-shape-text-disabled);
+  }
+` as StyledComponent<'div', Record<string, unknown>, SurfaceProps & Priority>;
diff --git a/src/woly/atoms/surface/usage.mdx b/src/woly/atoms/surface/usage.mdx
index 944dacf8..68502129 100644
--- a/src/woly/atoms/surface/usage.mdx
+++ b/src/woly/atoms/surface/usage.mdx
@@ -7,8 +7,31 @@ import {
   Playground,
   State
 } from 'lib/playground'
-import {Button, ButtonIcon, Input, Label, Surface} from 'ui'
-import {IconClose} from 'static/icons';
+import {Button, ButtonIcon, Input, Label, Surface, Popover, ListContainer, ListItem, Text} from 'ui';
+import {IconClose, Threebars} from 'static/icons';
+
+export const links = [
+  {
+    id: "fwed324fcse",
+    content: "John",
+    disabled: false
+  },
+  {
+    id: "fwed32q4fcss",
+    content: "Alex",
+    disabled: true
+  },
+  {
+    id: "fwed32q4fcsw",
+    content: "Michael",
+    disabled: false
+  },
+  {
+    id: "fwed32q4fcsb",
+    content: "Donald",
+    disabled: false
+  }
+];
 
 `Surface` is a simple layer that contains information. Surface can be used inside Popover or Sidebar component.
 
@@ -17,8 +40,10 @@ import {IconClose} from 'static/icons';
 Simple text inside `Surface`.
 
 <Playground>
-  <Surface>
-    <Content>Surface content</Content>
+  <Surface priority="primary" weight="fill">
+    <Content>
+      <Text type="XS">Surface content</Text>
+    </Content>
   </Surface>
 </Playground>
 
@@ -29,41 +54,41 @@ Sign in form based on `Surface`.
 <Playground>
   <State initial={false} change={(i) => !i}>
     {(value, change) => (
-      <block.S style={{ padding: '20px' }}>
-        <Button onClick={change} text="Sign in" priority="primary" />
-        <div
-          style={{
-            visibility: value ? 'visible' : 'hidden',
-            marginTop: '20px',
-          }}
+      <block.L style={{ width: '300px', padding: '350px 0' }}>
+        <Popover
+          isOpen={false}
+          content={
+            <Surface priority="primary" weight="goast">
+              <FormBlock>
+                <Label priority="primary">Name</Label>
+                <Input
+                  name="name"
+                  onChange={() => console.info('On input change')}
+                  placeholder="Ivan Ivanov"
+                  type="text"
+                  priority="primary"
+                />
+                <Label priority="primary">Password</Label>
+                <Input
+                  name="password"
+                  onChange={() => console.info('On input change')}
+                  type="password"
+                  priority="primary"
+                />
+                <Button
+                  style={{ marginTop: '20px' }}
+                  onClick={() => {}}
+                  text="Submit"
+                  type="submit"
+                  priority="primary"
+                />
+              </FormBlock>
+            </Surface>
+          }
         >
-          <Surface>
-            <FormBlock>
-              <Label priority="primary">Name</Label>
-              <Input
-                name="name"
-                onChange={() => console.info('On input change')}
-                placeholder="Ivan Ivanov"
-                type="text"
-                priority="primary"
-              />
-              <Label priority="primary">Password</Label>
-              <Input
-                name="password"
-                onChange={() => console.info('On input change')}
-                type="password"
-                priority="primary"
-              />
-              <Button
-                style={{ marginTop: '20px' }}
-                onClick={() => {}}
-                text="Sign in"
-                priority="primary"
-              />
-            </FormBlock>
-          </Surface>
-        </div>
-      </block.S>
+          <Button onClick={change} text="Sign in" priority="primary" />
+        </Popover>
+      </block.L>
     )}
   </State>
 </Playground>
@@ -75,37 +100,41 @@ Aside menu based on `Surface`.
 <Playground>
   <State initial={false} change={(i) => !i}>
     {(value, change) => (
-      <block.S style={{ paddingLeft: '320px', position: 'relative', height: '300px' }}>
+      <block style={{ position: 'relative', width: '400px', padding: '0 0 350px 0' }}>
         <ButtonIcon
           onClick={change}
-          priority="secondary"
-          style={{ position: 'absolute', left: 0, zIndex: 1 }}
-          icon={
-            <div
-              style={{
-                transform: value ? '' : 'rotate(45deg)',
-                transition: '0.5s',
-              }}
-            >
-              <IconClose />
-            </div>
-          }
-        />
-        <Aside
+          priority="default"
+          weight="transparent"
           style={{
-            width: value ? '250px' : '0',
+            position: 'absolute',
+            left: value ? '250px' : '60px',
+            zIndex: 2,
+            transition: '1s',
           }}
-        >
-          <Surface>
-            <Menu>
-              <li>Home</li>
-              <li>Shop</li>
-              <li>About</li>
-              <li>Contacts</li>
-            </Menu>
+          icon={value ? <IconClose /> : <Threebars />}
+        />
+        <Aside style={{ width: value ? '250px' : '40px', paddingLeft: value ? '10px' : '60px' }}>
+          <Surface priority="primary" weight="goast">
+            <ListContainer
+              style={{ paddingLeft: '30px', paddingTop: '70px' }}
+              priority="primary"
+              as="ul"
+            >
+              {links.map(({ id, content }) => (
+                <ListItem
+                  key={id}
+                  as="a"
+                  href={`#${id}`}
+                  onClick={() => {
+                    console.log(id);
+                  }}
+                  text={content}
+                />
+              ))}
+            </ListContainer>
           </Surface>
         </Aside>
-      </block.S>
+      </block>
     )}
   </State>
 </Playground>
@@ -122,3 +151,4 @@ Aside menu based on `Surface`.
 | ---------- | ----------------- | ------------- | ----------------------------------------------------------------- |
 | `children` | `React.ReactNode` |               | Pass any content as a children property within Surface component. |
 | `priority` | `string`          | `'secondary'` | Priority prop to style Surface component                          |
+| `weight`   | `string`          | `goast`       | Set surface`s weight (ex.: fill, goast)                           |
diff --git a/src/woly/atoms/text/index.tsx b/src/woly/atoms/text/index.tsx
index 6f42aec8..84aec42c 100644
--- a/src/woly/atoms/text/index.tsx
+++ b/src/woly/atoms/text/index.tsx
@@ -15,7 +15,7 @@ const map = (properties: TextProps & Priority) => ({
 });
 
 export const Text = styled.p.attrs(map)`
-  --local-color: var(--woly-canvas-text-default);
+  --local-color: var(--woly-shape-text-default);
 
   margin: 0;
 
diff --git a/src/woly/molecules/modal/index.tsx b/src/woly/molecules/modal/index.tsx
index a20b99c6..4d549698 100644
--- a/src/woly/molecules/modal/index.tsx
+++ b/src/woly/molecules/modal/index.tsx
@@ -84,6 +84,8 @@ const ModalBase: React.FC<ModalProps & Priority> = ({
 };
 
 const Shape = styled(Surface)`
+  /* TODO: rewrite formulas [13.07.21]*/
+  --local-inset-padding: 36px;
   position: relative;
   z-index: 1;
 
@@ -95,8 +97,6 @@ const Shape = styled(Surface)`
   max-width: calc((100% - (var(--local-inset-padding) * 2)) / 3 * 2);
 
   max-height: 100%;
-
-  padding: var(--local-vertical) var(--local-horizontal);
 `;
 
 export const Modal = styled(ModalBase)`
@@ -104,8 +104,8 @@ export const Modal = styled(ModalBase)`
 
   /* TODO: rewrite formulas [13.07.21]*/
   --local-gap: calc(3px * var(--woly-component-level) * var(--woly-main-level));
-  --local-vertical: calc(var(--woly-const-m) * (var(--woly-component-level) + 1));
   --local-inset-padding: 36px;
+  --local-vertical: calc(var(--woly-const-m) * (var(--woly-component-level) + 1));
 
   position: fixed;
   top: 0;
@@ -118,7 +118,8 @@ export const Modal = styled(ModalBase)`
   justify-content: center;
   box-sizing: border-box;
   max-height: 100vh;
-  padding: --local-inset-padding;
+
+  padding: var(--local-inset-padding);
 
   visibility: hidden;
   opacity: 0;
diff --git a/src/woly/molecules/tooltip/index.tsx b/src/woly/molecules/tooltip/index.tsx
index 40dbb71d..ee246163 100644
--- a/src/woly/molecules/tooltip/index.tsx
+++ b/src/woly/molecules/tooltip/index.tsx
@@ -10,6 +10,7 @@ interface TooltipProps {
   className?: string;
   content?: string | React.ReactNode;
   position?: TooltipPosition;
+  weight?: string;
 }
 
 const TooltipBase: React.FC<TooltipProps & Priority> = ({
@@ -18,6 +19,7 @@ const TooltipBase: React.FC<TooltipProps & Priority> = ({
   content,
   position = 'top',
   priority = 'secondary',
+  weight = 'goast',
 }) => {
   const [tooltipPosition, setPosition] = React.useState<TooltipPosition>('top');
   const ref = React.useRef<HTMLDivElement>(null);
@@ -44,6 +46,7 @@ const TooltipBase: React.FC<TooltipProps & Priority> = ({
       className={className}
       data-position={tooltipPosition}
       data-priority={priority}
+      data-weight={weight}
       ref={ref}
       tabIndex={0}
     >
@@ -52,7 +55,9 @@ const TooltipBase: React.FC<TooltipProps & Priority> = ({
       </div>
       <div role="tooltip" id="notifications-desc">
         <div data-triangle />
-        <Surface data-priority={priority}>{content}</Surface>
+        <Surface priority={priority} weight={weight}>
+          {content}
+        </Surface>
       </div>
     </div>
   );
@@ -72,6 +77,7 @@ export const Tooltip = styled(TooltipBase)`
   --tooltip-position: calc(100% + var(--woly-border-width) + var(--local-gap));
   --local-tooltip-maxsize: 240px;
   --local-icon-size: var(--woly-line-height);
+
   position: relative;
 
   color: var(--woly-shape-text-default);
@@ -79,6 +85,7 @@ export const Tooltip = styled(TooltipBase)`
   line-height: var(--woly-line-height);
 
   outline: none;
+
   [role='tooltip'] {
     position: absolute;
     z-index: 1;
@@ -88,64 +95,76 @@ export const Tooltip = styled(TooltipBase)`
     width: max-content;
     max-width: var(--local-tooltip-maxsize);
 
-    background-color: var(--woly-background);
-    border-color: var(--woly-background);
-    border-style: solid;
-    border-width: var(--woly-border-width);
     border-radius: calc(var(--woly-rounding) * 2);
-    box-shadow: var(--woly-shadow);
     visibility: hidden;
     opacity: 0;
 
     transition: 0.3s ease-in-out;
+
     [data-triangle] {
       position: absolute;
 
       width: 0;
       height: 0;
 
-      border-color: var(--woly-background) transparent transparent transparent;
       border-style: solid;
       border-width: var(--local-triangle);
     }
   }
+
+  &[data-weight='goast'] {
+    [role='tooltip'] [data-triangle] {
+      border-color: var(--woly-background) transparent transparent transparent;
+    }
+  }
+
+  &[data-weight='fill'] {
+    [role='tooltip'] [data-triangle] {
+      border-color: var(--woly-shape-default) transparent transparent transparent;
+    }
+  }
+
   &:hover [role='tooltip'],
   &:focus [role='tooltip'] {
     visibility: visible;
     opacity: 1;
   }
+
   &[data-position='top'] [role='tooltip'] {
     bottom: var(--tooltip-position);
     [data-triangle] {
-      bottom: calc(-1 * (var(--woly-const-m) + var(--woly-border-width)));
+      bottom: calc(-1 * (var(--woly-const-m)));
       left: calc(2 * var(--woly-const-m));
     }
   }
+
   &[data-position='bottom'] [role='tooltip'] {
     top: var(--tooltip-position);
     [data-triangle] {
-      top: calc(-1 * (var(--woly-const-m) + var(--woly-border-width)));
+      top: calc(-1 * (var(--woly-const-m)));
       left: calc(2 * var(--woly-const-m));
 
       transform: rotate(180deg);
     }
   }
+
   &[data-position='left'] [role='tooltip'] {
     top: 0;
     right: var(--tooltip-position);
     [data-triangle] {
       top: calc(2 * var(--woly-const-m));
-      right: calc(-1 * (var(--woly-const-m) + var(--woly-border-width)));
+      right: calc(-1 * (var(--woly-const-m)));
 
       transform: rotate(-90deg);
     }
   }
+
   &[data-position='right'] [role='tooltip'] {
     top: 0;
     left: var(--tooltip-position);
     [data-triangle] {
       top: calc(2 * var(--woly-const-m));
-      left: calc(-1 * (var(--woly-const-m) + var(--woly-border-width)));
+      left: calc(-1 * (var(--woly-const-m)));
 
       transform: rotate(90deg);
     }
diff --git a/src/woly/molecules/tooltip/usage.mdx b/src/woly/molecules/tooltip/usage.mdx
index 918019ba..2ebb7e23 100644
--- a/src/woly/molecules/tooltip/usage.mdx
+++ b/src/woly/molecules/tooltip/usage.mdx
@@ -32,21 +32,26 @@ The top, right, bottom, and left positions appear outside the target element, ce
     <Tooltip
       content={
         <Box>
-          <Text type="S">Подсказка может быть написана в две строки и более</Text>
+          <Text type="XS">Подсказка может быть написана в две строки и более</Text>
         </Box>
       }
       position="top"
+      priority="primary"
+      weight="fill"
     >
-      <Button onClick={() => console.info('Hi!')} text="Button" variant="primary" />
+      <Button onClick={() => console.info('Hi!')} text="Button" priority="primary" />
     </Tooltip>
     <Tooltip
       content={
         <Box>
-          <Text type="XS">4 Whitehall Street New York NY 10004</Text>
+          <Text priority="white" type="XS">
+            4 Whitehall Street New York NY 10004
+          </Text>
         </Box>
       }
       position="bottom"
-      variant="primary"
+      priority="white"
+      weight="goast"
     >
       <Input
         name="adress"
@@ -57,10 +62,12 @@ The top, right, bottom, and left positions appear outside the target element, ce
       />
     </Tooltip>
     <Tooltip
+      priority="secondary"
+      weight="fill"
       content={
         <BoxVertical>
           <Box>
-            <Text type="S">
+            <Text type="XS">
               Подсказка может быть написана в две и более строки, а также содержать блок с actions
             </Text>
           </Box>
@@ -69,7 +76,7 @@ The top, right, bottom, and left positions appear outside the target element, ce
               <Button
                 onClick={() => console.info('Hi!')}
                 text="Got it"
-                variant="primary"
+                priority="primary"
                 style={{ alignSelf: 'flex-end' }}
               />
             </block.S>
@@ -78,18 +85,21 @@ The top, right, bottom, and left positions appear outside the target element, ce
       }
       position="right"
     >
-      <Button onClick={() => console.info('Hi!')} text="Button" variant="primary" />
+      <Button onClick={() => console.info('Hi!')} text="Button" priority="primary" />
     </Tooltip>
     <Tooltip
       content={
         <Box>
-          <Text type="S">Подсказка</Text>
+          <Text priority="white" type="S">
+            Подсказка
+          </Text>
         </Box>
       }
       position="left"
       id="tooltip-top"
+      priority="primary"
     >
-      <Button onClick={() => console.info('Hi!')} text="Button" variant="primary" />
+      <Button onClick={() => console.info('Hi!')} text="Button" priority="primary" />
     </Tooltip>
   </block.S>
 </Playground>
@@ -102,3 +112,4 @@ The top, right, bottom, and left positions appear outside the target element, ce
 | `content`  | `React.ReactElement` | `null`        | Tooltip`s content                                             |
 | `position` | `string`             | `'top'`       | The positon of the tooltip aginst the relative element        |
 | `priority` | `string`             | `'secondary'` | Priority prop to style Tooltip component                      |
+| `weight`   | `string`             | `goast`       | Set tooltip`s weight (ex.: fill, goast)                       |