diff --git a/.vscode/scss.code-snippets b/.vscode/scss.code-snippets
index 93fc058e6..408134bbc 100644
--- a/.vscode/scss.code-snippets
+++ b/.vscode/scss.code-snippets
@@ -9,7 +9,7 @@
 		"scope": "scss",
 		"prefix": "use",
 		"body": [
-			"@use '/src/scss${1:/}'${2: as $3};",
+			"@use '@/scss${1:/}'${2: as $3};",
 			"$0"
 		],
 		"description": "Add @use in header."
@@ -18,7 +18,7 @@
 		"scope": "scss",
 		"prefix": "useu",
 		"body": [
-			"@use '/src/scss/underscore' as _;",
+			"@use '@/scss/underscore' as _;",
 			"$0"
 		],
 		"description": "Add @use underscore in header."
diff --git a/.vscode/tsx.code-snippets b/.vscode/tsx.code-snippets
index be2b52bab..2f1caf11c 100644
--- a/.vscode/tsx.code-snippets
+++ b/.vscode/tsx.code-snippets
@@ -10,7 +10,7 @@
 		"scope": "javascriptreact,typescriptreact",
 		"prefix": "isc",
 		"body": [
-			"import styles from './index.module.scss';",
+			"import * as styles from './index.module.scss';",
 			"$0"
 		],
 		"description": "Import SCSS styles from the same directory."
diff --git a/packages/console/package.json b/packages/console/package.json
index e175f2629..7006d9471 100644
--- a/packages/console/package.json
+++ b/packages/console/package.json
@@ -38,11 +38,17 @@
     "stylelint": "^13.13.1",
     "typescript": "^4.5.5"
   },
+  "alias": {
+    "@/*": "./src/$1"
+  },
   "eslintConfig": {
     "extends": "@silverhand/react"
   },
   "stylelint": {
-    "extends": "@silverhand/eslint-config-react/.stylelintrc"
+    "extends": "@silverhand/eslint-config-react/.stylelintrc",
+    "rules": {
+      "color-function-notation": "legacy"
+    }
   },
   "prettier": "@silverhand/eslint-config/.prettierrc"
 }
diff --git a/packages/console/src/App.module.scss b/packages/console/src/App.module.scss
index 79f828507..91d9cfa0c 100644
--- a/packages/console/src/App.module.scss
+++ b/packages/console/src/App.module.scss
@@ -1,3 +1,14 @@
-.app {
-  color: #aaa;
+.skeleton {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+
+  .content {
+    flex-grow: 1;
+    display: flex;
+  }
 }
diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx
index e60dbd8bd..096b00a83 100644
--- a/packages/console/src/App.tsx
+++ b/packages/console/src/App.tsx
@@ -1,7 +1,19 @@
 import React from 'react';
 
+import './scss/normalized.scss';
 import * as styles from './App.module.scss';
+import Content from './components/Content';
+import Sidebar from './components/Sidebar';
+import Topbar from './components/Topbar';
 
 export const App = () => {
-  return <h1 className={styles.app}>Hello world!</h1>;
+  return (
+    <div className={styles.skeleton}>
+      <Topbar />
+      <div className={styles.content}>
+        <Sidebar />
+        <Content />
+      </div>
+    </div>
+  );
 };
diff --git a/packages/console/src/components/Content/index.module.scss b/packages/console/src/components/Content/index.module.scss
new file mode 100644
index 000000000..a13e02528
--- /dev/null
+++ b/packages/console/src/components/Content/index.module.scss
@@ -0,0 +1,3 @@
+.content {
+  flex-grow: 1;
+}
diff --git a/packages/console/src/components/Content/index.tsx b/packages/console/src/components/Content/index.tsx
new file mode 100644
index 000000000..f63c8fdb0
--- /dev/null
+++ b/packages/console/src/components/Content/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import * as styles from './index.module.scss';
+
+const Content = () => {
+  return <div className={styles.content}>Content</div>;
+};
+
+export default Content;
diff --git a/packages/console/src/components/Sidebar/index.module.scss b/packages/console/src/components/Sidebar/index.module.scss
new file mode 100644
index 000000000..871f5a2d2
--- /dev/null
+++ b/packages/console/src/components/Sidebar/index.module.scss
@@ -0,0 +1,9 @@
+@use '@/scss/underscore' as _;
+
+.sidebar {
+  padding: _.unit(3);
+  flex-grow: 0;
+  flex-shrink: 0;
+  // TO-DO: remove after fulfilled with components
+  width: 250px;
+}
diff --git a/packages/console/src/components/Sidebar/index.tsx b/packages/console/src/components/Sidebar/index.tsx
new file mode 100644
index 000000000..529d47c5b
--- /dev/null
+++ b/packages/console/src/components/Sidebar/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import * as styles from './index.module.scss';
+
+const Sidebar = () => {
+  return <div className={styles.sidebar}>Sidebar</div>;
+};
+
+export default Sidebar;
diff --git a/packages/console/src/components/Topbar/index.module.scss b/packages/console/src/components/Topbar/index.module.scss
new file mode 100644
index 000000000..2bc0feeb1
--- /dev/null
+++ b/packages/console/src/components/Topbar/index.module.scss
@@ -0,0 +1,9 @@
+@use '@/scss/underscore' as _;
+
+.topbar {
+  height: 80px;
+  width: 100%;
+  padding: _.unit(3) _.unit(8);
+  display: flex;
+  align-items: center;
+}
diff --git a/packages/console/src/components/Topbar/index.tsx b/packages/console/src/components/Topbar/index.tsx
new file mode 100644
index 000000000..c16564d8b
--- /dev/null
+++ b/packages/console/src/components/Topbar/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import * as styles from './index.module.scss';
+
+const Topbar = () => {
+  return <div className={styles.topbar}>Admin Console</div>;
+};
+
+export default Topbar;
diff --git a/packages/console/src/scss/_underscore.scss b/packages/console/src/scss/_underscore.scss
new file mode 100644
index 000000000..8f5c5b957
--- /dev/null
+++ b/packages/console/src/scss/_underscore.scss
@@ -0,0 +1,10 @@
+@function unit($factor: 1, $unit: 'px') {
+  @return #{$factor * 4}#{$unit};
+}
+
+@mixin flex-colomn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/packages/console/src/scss/normalized.scss b/packages/console/src/scss/normalized.scss
new file mode 100644
index 000000000..2f6b901fd
--- /dev/null
+++ b/packages/console/src/scss/normalized.scss
@@ -0,0 +1,15 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  background: rgb(#e5e1ec, 50%);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+input {
+  border: none;
+  outline: none;
+}
diff --git a/packages/console/tsconfig.json b/packages/console/tsconfig.json
index f2cc02dc3..7d925ad29 100644
--- a/packages/console/tsconfig.json
+++ b/packages/console/tsconfig.json
@@ -1,6 +1,15 @@
 {
   "extends": "@silverhand/ts-config-react/tsconfig.base",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
   "include": [
-    "src"
+    "src",
+    "jest.config.ts"
   ]
 }