diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/package.json b/components/crud-web-apps/common/frontend/kubeflow-common-lib/package.json
index c8cfcc6c..7ee92660 100644
--- a/components/crud-web-apps/common/frontend/kubeflow-common-lib/package.json
+++ b/components/crud-web-apps/common/frontend/kubeflow-common-lib/package.json
@@ -9,7 +9,7 @@
"test-ci": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI",
"lint": "ng lint",
"e2e": "ng e2e",
- "copyCSS": "cp ./projects/kubeflow/src/kubeflow.css ./dist/kubeflow && cp ./projects/kubeflow/src/styles.scss ./dist/kubeflow && cp ./projects/kubeflow/src/lib/variables.scss ./dist/kubeflow/lib",
+ "copyCSS": "cp ./projects/kubeflow/src/kubeflow.css ./dist/kubeflow && cp ./projects/kubeflow/src/styles.scss ./dist/kubeflow && cp ./projects/kubeflow/src/lib/variables.scss ./dist/kubeflow/lib && cp ./projects/kubeflow/src/lib/fonts.scss ./dist/kubeflow/lib",
"copyAssets": "cp -r ./projects/kubeflow/src/assets ./dist/kubeflow/assets"
},
"private": true,
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillic-normal300.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillic-normal300.woff2
new file mode 100644
index 00000000..377218a4
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillic-normal300.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillic-normal400.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillic-normal400.woff2
new file mode 100644
index 00000000..814b9474
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillic-normal400.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillic-normal500.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillic-normal500.woff2
new file mode 100644
index 00000000..972c566b
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillic-normal500.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillicext-normal300.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillicext-normal300.woff2
new file mode 100644
index 00000000..73c8c5aa
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillicext-normal300.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillicext-normal400.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillicext-normal400.woff2
new file mode 100644
index 00000000..10cd611d
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillicext-normal400.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillicext-normal500.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillicext-normal500.woff2
new file mode 100644
index 00000000..30843410
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-cyrillicext-normal500.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greek-normal300.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greek-normal300.woff2
new file mode 100644
index 00000000..d6115b61
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greek-normal300.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greek-normal400.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greek-normal400.woff2
new file mode 100644
index 00000000..23cb3ad4
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greek-normal400.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greek-normal500.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greek-normal500.woff2
new file mode 100644
index 00000000..bafbf7b8
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greek-normal500.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greekext-normal300.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greekext-normal300.woff2
new file mode 100644
index 00000000..ea768a18
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greekext-normal300.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greekext-normal400.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greekext-normal400.woff2
new file mode 100644
index 00000000..e17542dc
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greekext-normal400.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greekext-normal500.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greekext-normal500.woff2
new file mode 100644
index 00000000..7aae2e9b
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-greekext-normal500.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latin-normal300.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latin-normal300.woff2
new file mode 100644
index 00000000..dc034ba4
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latin-normal300.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latin-normal400.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latin-normal400.woff2
new file mode 100644
index 00000000..4fc449af
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latin-normal400.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latin-normal500.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latin-normal500.woff2
new file mode 100644
index 00000000..5ab8a656
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latin-normal500.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latinext-normal300.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latinext-normal300.woff2
new file mode 100644
index 00000000..3fb5f272
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latinext-normal300.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latinext-normal400.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latinext-normal400.woff2
new file mode 100644
index 00000000..9b257dcb
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latinext-normal400.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latinext-normal500.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latinext-normal500.woff2
new file mode 100644
index 00000000..7a7b8b27
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-latinext-normal500.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-vietnamese-normal300.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-vietnamese-normal300.woff2
new file mode 100644
index 00000000..b13f49e5
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-vietnamese-normal300.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-vietnamese-normal400.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-vietnamese-normal400.woff2
new file mode 100644
index 00000000..4a61f869
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-vietnamese-normal400.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-vietnamese-normal500.woff2 b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-vietnamese-normal500.woff2
new file mode 100644
index 00000000..a39b80a3
Binary files /dev/null and b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/fonts/roboto-vietnamese-normal500.woff2 differ
diff --git a/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/fonts.scss b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/fonts.scss
new file mode 100644
index 00000000..ea3d61a5
--- /dev/null
+++ b/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/fonts.scss
@@ -0,0 +1,168 @@
+/* cyrillic-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Light'), local('Roboto-Light'), url('assets/fonts/roboto-cyrillicext-normal300.woff2') format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Light'), local('Roboto-Light'), url('assets/fonts/roboto-cyrillic-normal300.woff2') format('woff2');
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Light'), local('Roboto-Light'), url('assets/fonts/roboto-greekext-normal300.woff2') format('woff2');
+ unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Light'), local('Roboto-Light'), url('assets/fonts/roboto-greek-normal300.woff2') format('woff2');
+ unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Light'), local('Roboto-Light'), url('assets/fonts/roboto-vietnamese-normal300.woff2') format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Light'), local('Roboto-Light'), url('assets/fonts/roboto-latinext-normal300.woff2') format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Light'), local('Roboto-Light'), url('assets/fonts/roboto-latin-normal300.woff2') format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Roboto'), local('Roboto-Regular'), url('assets/fonts/roboto-cyrillicext-normal400.woff2') format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Roboto'), local('Roboto-Regular'), url('assets/fonts/roboto-cyrillic-normal400.woff2') format('woff2');
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Roboto'), local('Roboto-Regular'), url('assets/fonts/roboto-greekext-normal400.woff2') format('woff2');
+ unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Roboto'), local('Roboto-Regular'), url('assets/fonts/roboto-greek-normal400.woff2') format('woff2');
+ unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Roboto'), local('Roboto-Regular'), url('assets/fonts/roboto-vietnamese-normal400.woff2') format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Roboto'), local('Roboto-Regular'), url('assets/fonts/roboto-latinext-normal400.woff2') format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Roboto'), local('Roboto-Regular'), url('assets/fonts/roboto-latin-normal400.woff2') format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: local('Roboto Medium'), local('Roboto-Medium'), url('assets/fonts/roboto-cyrillicext-normal500.woff2') format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: local('Roboto Medium'), local('Roboto-Medium'), url('assets/fonts/roboto-cyrillic-normal500.woff2') format('woff2');
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: local('Roboto Medium'), local('Roboto-Medium'), url('assets/fonts/roboto-greekext-normal500.woff2') format('woff2');
+ unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: local('Roboto Medium'), local('Roboto-Medium'), url('assets/fonts/roboto-greek-normal500.woff2') format('woff2');
+ unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: local('Roboto Medium'), local('Roboto-Medium'), url('assets/fonts/roboto-vietnamese-normal500.woff2') format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: local('Roboto Medium'), local('Roboto-Medium'), url('assets/fonts/roboto-latinext-normal500.woff2') format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: local('Roboto Medium'), local('Roboto-Medium'), url('assets/fonts/roboto-latin-normal500.woff2') format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/components/crud-web-apps/jupyter/frontend/.gitignore b/components/crud-web-apps/jupyter/frontend/.gitignore
index c0cef758..3cd873f9 100644
--- a/components/crud-web-apps/jupyter/frontend/.gitignore
+++ b/components/crud-web-apps/jupyter/frontend/.gitignore
@@ -47,3 +47,6 @@ Thumbs.db
# Rok files
**/browse-in-rok*
+
+# Fonts Files
+/src/assets/fonts
diff --git a/components/crud-web-apps/jupyter/frontend/package.json b/components/crud-web-apps/jupyter/frontend/package.json
index cec967ee..53c6bd76 100644
--- a/components/crud-web-apps/jupyter/frontend/package.json
+++ b/components/crud-web-apps/jupyter/frontend/package.json
@@ -7,7 +7,7 @@
"build": "npm run copyLibAssets && ng build --prod --base-href /jupyter/ --deploy-url /jupyter/static/",
"build:watch": "npm run copyLibAssets && ng build --watch --deploy-url static/ --outputPath ../backend/apps/default/static/ --outputHashing all",
"build:watch:rok": "npm run copyLibAssets && ng build --watch --deploy-url static/ --outputPath ../backend/apps/rok/static/ --outputHashing all --configuration=rok",
- "copyLibAssets": "cp ./node_modules/kubeflow/assets/* ./src/assets/",
+ "copyLibAssets": "cp -r ./node_modules/kubeflow/assets/* ./src/assets/",
"format:check": "prettier --check 'src/**/*.{js,ts,html,scss,css}' || node scripts/check-format-error.js",
"format:write": "prettier --write 'src/**/*.{js,ts,html,scss,css}'",
"test": "ng test",
diff --git a/components/crud-web-apps/jupyter/frontend/src/index.html b/components/crud-web-apps/jupyter/frontend/src/index.html
index f6c4c98c..872963af 100644
--- a/components/crud-web-apps/jupyter/frontend/src/index.html
+++ b/components/crud-web-apps/jupyter/frontend/src/index.html
@@ -6,10 +6,6 @@