diff --git a/src/App.tsx b/src/App.tsx
index 636b973..292404d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,9 +8,9 @@ export const App: React.FC = () => {
   return (
     <>
       <Switch>
-        <Route exact path="/home" component={Home} />
-        <Route exact path="/">
-          <Redirect to="/home" />
+        <Route exact path="/" component={Home} />
+        <Route exact path="/home">
+          <Redirect to="/" />
         </Route>
         <Route exact path="/cv" component={CV} />
         <Route exact path="/projects-blog" component={ProjectsAndBlog} />
diff --git a/src/assets/index.tsx b/src/assets/index.tsx
deleted file mode 100644
index 437d680..0000000
--- a/src/assets/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import React from "react";
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-
-/**
- * it's a mess for now
- */
-
-export const ScrollToTop = (): null => {
-  const { pathname } = useLocation();
-
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [pathname]);
-
-  return null;
-};
-
-const palette = [
-  "#e85c61",
-  "#e9628a",
-  "#dd71ae",
-  "#c783cb",
-  "#ab94de",
-  "#95a3ed",
-  "#7eb2f5",
-  "#69bff8",
-  "#52cffe",
-  "#41dfff",
-  "#46eefa",
-];
-
-const transitionWhite = (
-  <div
-    style={{
-      transition: "all .3s",
-      backgroundImage: "linear-gradient(180deg,hsla(0,0%,100%,.0001),#fff)",
-      height: "175px",
-      position: "absolute",
-      bottom: "0",
-      top: "175",
-      left: "0",
-      right: "0",
-    }}
-  />
-);
diff --git a/src/contacts/contacts.tsx b/src/contacts/contacts.tsx
index c01ee9d..39c6f63 100644
--- a/src/contacts/contacts.tsx
+++ b/src/contacts/contacts.tsx
@@ -1,17 +1,22 @@
 import React from "react";
+import "cirrus-ui";
 
 export const Contacts: React.FC = () => {
   return (
-    <>
-      <div className="divider" data-content="Contacts" />
-      <div className="u-center w-80" style={{ height: "300px" }}>
-        <div className="col-12">
+    <div
+      className="u-flex u-items-center u-justify-center"
+      style={{ height: "300px" }}
+    >
+      <div className="py-2 mx-2">
+        <div className="col-5">
           <p className="lead">
             Email:{" "}
             <a href="mailto:" className="u u-LR text-indigo-400">
               3mfhognm5@relay.firefox.com
             </a>
           </p>
+        </div>
+        <div className="col-5">
           <p className="lead">
             Telegram:{" "}
             <a
@@ -22,7 +27,8 @@ export const Contacts: React.FC = () => {
             </a>
           </p>
         </div>
+        <div className="divider" />
       </div>
-    </>
+    </div>
   );
 };
diff --git a/src/cv/cv.tsx b/src/cv/cv.tsx
index 1e9ba6c..df24657 100644
--- a/src/cv/cv.tsx
+++ b/src/cv/cv.tsx
@@ -1,111 +1,94 @@
 import React from "react";
 import "cirrus-ui";
 
-import { Wrapper, SmallHeading, Footer, Header } from "../exports";
+import {
+  Wrapper,
+  SmallHeading,
+  Footer,
+  Header,
+  HeroCV,
+  H6Animated,
+} from "../exports";
 import { Contacts } from "~/contacts";
 
 export const CV: React.FC = () => {
   return (
     <>
       <Header />
+      <HeroCV />
       <Wrapper>
-        <div className="p-4 m-2">
-          <h3 className="headline-4 u-text-center text-indigo-500">
-            Work experience 👩🏻‍💻
-          </h3>
-        </div>
-        <div className="p-4 m-2">
-          <SmallHeading
-            h4={"Full stack engineer"}
-            h5={"МойСклад"}
-            children={"Moscow, Russia – (Aug 2020 - Present)"}
-          />
-          <article>
-            Full stack engineer with focus on front end development. I work in
-            the team responsible for developing POS software for small business.
-            <ul>
-              <li>
-                Refactoring a large <code>Scala.js/Scala-React</code> code base
-              </li>
-              <li>
-                Developing inventory management application with{" "}
-                <code>React</code> & <code>TypeScript</code> following the
-                functional programming approach
-              </li>
-              <li>
-                Actively using state manager <code>Effector.js</code>
-              </li>
-              <li>
-                Introduced unit testing with <code>Jest</code> for product
-                identifiers algorithms
-              </li>
-              <li>
-                Programming automated GUI tests using <code>Java</code> and{" "}
-                <code>JUnit</code>
-              </li>
-              <li>
-                Learned fundamentals of <code>Scala</code> and{" "}
-                <code>SQLite</code>
-              </li>
-              <li>
-                Using basic <code>Shell</code> scripting techniques
-              </li>
-            </ul>
-          </article>
-        </div>
-        <div className="p-4 m-2">
-          <SmallHeading
-            h4={"Web search evaluator"}
-            h5={"Yandex LLC"}
-            children={"Moscow, Russia – (Jan 2019 - Jul 2020)"}
-          />
-          <article>
-            <p>Quality Rater at Yandex Search.</p>
+        <SmallHeading
+          h4={"Full stack engineer"}
+          h5={"МойСклад"}
+          children={"Moscow, Russia – (Aug 2020 - Present)"}
+        />
+        <article className="px-4">
+          Full stack engineer with focus on front end development. I work in the
+          team responsible for developing POS software for small business.
+          <ul>
+            <li>
+              Refactoring a large <mark>Scala.js/Scala-React</mark> code base
+            </li>
+            <li>
+              Developing inventory management application with{" "}
+              <mark>React</mark> & <mark>TypeScript</mark> following the
+              functional programming approach
+            </li>
+            <li>
+              Actively using state manager <mark>Effector.js</mark>
+            </li>
+            <li>
+              Introduced unit testing with <mark>Jest</mark> for product
+              identifiers algorithms
+            </li>
+            <li>
+              Programming automated GUI tests using <mark>Java</mark> and{" "}
+              <mark>JUnit</mark>
+            </li>
+            <li>
+              Learned fundamentals of <mark>Scala</mark> and <mark>SQLite</mark>
+            </li>
+            <li>
+              Using basic <mark>Shell</mark> scripting techniques
+            </li>
+          </ul>
+        </article>
+        <SmallHeading
+          h4={"Web search evaluator"}
+          h5={"Yandex LLC"}
+          children={"Moscow, Russia – (Jan 2019 - Jul 2020)"}
+        />
+        <article className="px-4">
+          <p>Quality Rater at Yandex Search.</p>
+          <p>
+            Collected and analysed a vast amount of data, got better
+            understanding of user behavior and their goals.
+          </p>
+        </article>
+        <SmallHeading h4={"Skills"} children={"Technology & Languages"} />
+        <article className="px-4">
+          <section className="py-1">
+            <H6Animated>HTML & CSS</H6Animated>
+            <p>Sass, Tailwind CSS, Bootstrap</p>
+          </section>
+          <section className="py-1">
+            <H6Animated>JavaScript</H6Animated>
             <p>
-              Collected and analysed a vast amount of data, got better
-              understanding of user behavior and their goals.
+              TypeScript, React, Node.js, Effector.js, Scala.js, Material UI,
+              Jest
             </p>
-          </article>
-        </div>
-        <div className="p-4 m-2">
-          <SmallHeading h4={"Skills"} children={"Technology & Languages"} />
-          <div className="row u-items-baseline">
-            <div className="p-6 u-justify-center col-4">
-              <ul className="no-bullets">
-                <h6 className="text-indigo-500 u-text-center u u-LR my-2">
-                  HTML & CSS
-                </h6>
-                <li>Sass</li>
-                <li>Tailwind CSS</li>
-                <li>Bootstrap</li>
-              </ul>
-            </div>
-            <div className="p-6 u-justify-center col-4">
-              <ul className="no-bullets">
-                <h6 className="text-indigo-500 u-text-center u u-LR my-2">
-                  JavaScript
-                </h6>
-                <li>TypeScript</li>
-                <li>React</li>
-                <li>Material UI</li>
-                <li>Node.js</li>
-                <li>Effector.js</li>
-                <li>Scala.js</li>
-                <li>Jest</li>
-              </ul>
-            </div>
-            <div className="p-6 u-justify-center col-4">
-              <ul className="no-bullets">
-                <h6 className="text-indigo-500 u-text-center u u-LR">
-                  Languages
-                </h6>
-                <li>Russian 🇷🇺 — native speaker</li>
-                <li>English 🇬🇧 — B2</li>
-                <li>Hebrew 🇮🇱 and French 🇫🇷 — still learning!</li>
-              </ul>
-            </div>
-          </div>
-        </div>
+          </section>
+          <section className="py-1">
+            <H6Animated>Languages</H6Animated>
+            <p>
+              Russian 🇷🇺
+              <br />
+              English 🇬🇧
+              <br />
+              Hebrew 🇮🇱 and French 🇫🇷 — still learning!
+            </p>
+          </section>
+        </article>
       </Wrapper>
       <Contacts />
       <Footer />
diff --git a/src/exports.ts b/src/exports.ts
index e627740..79eee90 100644
--- a/src/exports.ts
+++ b/src/exports.ts
@@ -1,7 +1,10 @@
 import { Header } from "./ui/header";
 import { Footer } from "./ui/footer";
-import { Hero } from "./ui/hero";
+import { HeroMain } from "./ui/hero-main";
+import { HeroCV } from "./ui/hero-cv";
 import { SmallHeading } from "./ui/small-heading";
+import { Tags } from "./ui/tags";
+import { H6Animated } from "./ui/h6-animated";
 import { Wrapper } from "./ui/wrapper";
 import { Home } from "./home";
 import { CV } from "./cv";
@@ -9,10 +12,13 @@ import { ProjectsAndBlog } from "./projects-blog";
 
 export {
   Header,
-  Hero,
+  HeroMain,
+  HeroCV,
   Footer,
+  H6Animated,
   Wrapper,
   SmallHeading,
+  Tags,
   Home,
   CV,
   ProjectsAndBlog,
diff --git a/src/home/home.tsx b/src/home/home.tsx
index d2f54f2..5d8dcae 100644
--- a/src/home/home.tsx
+++ b/src/home/home.tsx
@@ -1,23 +1,45 @@
 import React from "react";
 import "cirrus-ui";
-import { Header, Hero, Footer } from "../exports";
-import { Contacts } from "~/contacts";
+import { Header, HeroMain, Footer } from "../exports";
 
 export const Home: React.FC = () => {
   return (
     <>
       <Header />
-      <Hero />
-      <div className="u-center w-80" style={{ height: "400px" }}>
-        <p style={{ fontSize: "1.5rem" }}>
-          Full stack developer with 1 year of experience in the industry.
-          <br />
-          Currently based in Moscow, Russia.
-          <br />
-          Always passionate about learning new things ✨📘
-        </p>
+      <HeroMain />
+      <div className="hero fullscreen" style={{ backgroundColor: "#212121" }}>
+        <div className="hero-body">
+          <div className="mx-auto">
+            <div className="py-2">
+              <p className="lead text-gray-100">
+                Full stack developer with 1 year of experience in the industry.
+                <br />
+                Always passionate about learning new things ✨📘
+              </p>
+              <p className="lead text-gray-100">
+                Currently based in Moscow, Russia.
+              </p>
+            </div>
+            <div className="py-2">
+              <p className="text-gray-100">
+                Email:{" "}
+                <a href="mailto:" className="u u-LR text-indigo-400">
+                  3mfhognm5@relay.firefox.com
+                </a>
+              </p>
+              <p className="text-gray-100">
+                Telegram:{" "}
+                <a
+                  href="https://t.me/supramodum"
+                  className="u u-LR text-indigo-400"
+                >
+                  supramodum
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
-      <Contacts />
       <Footer />
     </>
   );
diff --git a/src/index.tsx b/src/index.tsx
index 85a0e1f..6324c26 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { render } from "react-dom";
 import { BrowserRouter as Router } from "react-router-dom";
 import "cirrus-ui";
-import { ScrollToTop } from "./assets";
+import { ScrollToTop } from "./scroll";
 import { App } from "./App";
 
 render(
diff --git a/src/scroll.tsx b/src/scroll.tsx
new file mode 100644
index 0000000..114eaf0
--- /dev/null
+++ b/src/scroll.tsx
@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export const ScrollToTop = (): null => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+};
diff --git a/src/ui/footer.tsx b/src/ui/footer.tsx
index 71c5526..02e70bb 100644
--- a/src/ui/footer.tsx
+++ b/src/ui/footer.tsx
@@ -3,40 +3,45 @@ import { Link } from "react-router-dom";
 
 export const Footer: React.FC = () => {
   return (
-    <footer className="footer bg-gray-100" style={{ marginTop: "0" }}>
-      <h6 className="footer__title uppercase text-indigo-400">rrrageinput</h6>
-      <div className="content">
-        <div className="divider"></div>
-        <div className="row">
-          <div className="col-12">
-            <ul className="no-bullets">
-              <Link to="/home">
-                <li className="footer__list-item">Home</li>
-              </Link>
-              <Link to="/cv">
-                <li className="footer__list-item">CV</li>
-              </Link>
-              <Link to="/projects-blog">
-                <li className="footer__list-item">Projects & Blog</li>
-              </Link>
-              <ul></ul>
-            </ul>
+    <>
+      <footer
+        className="footer bg-blue-100 u-unselectable"
+        style={{ marginTop: "0" }}
+      >
+        <h6 className="footer__title uppercase">rrrageinput</h6>
+        <div className="content">
+          <div className="divider"></div>
+          <div className="row">
+            <div className="col-12">
+              <ul className="no-bullets">
+                <Link to="/home">
+                  <li className="footer__list-item">Home</li>
+                </Link>
+                <Link to="/cv">
+                  <li className="footer__list-item">CV</li>
+                </Link>
+                <Link to="/projects-blog">
+                  <li className="footer__list-item">Projects & Blog</li>
+                </Link>
+                <ul></ul>
+              </ul>
+            </div>
           </div>
         </div>
-      </div>
-      <p className="subtitle">Catherine Zaslavskaya © 2021</p>
-      <p className="subtitle">
-        Built with React & TypeScript,{" "}
-        <a
-          href="http://cirrus-ui.netlify.app"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="u u-LR text-indigo-400"
-        >
-          Cirrus UI
-        </a>{" "}
-        and 🖤
-      </p>
-    </footer>
+        <p className="subtitle">Catherine Zaslavskaya © 2021</p>
+        <p className="subtitle px-2">
+          Built with React & TypeScript,{" "}
+          <a
+            href="http://cirrus-ui.netlify.app"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="u u-LR text-indigo-400"
+          >
+            Cirrus UI
+          </a>{" "}
+          and 🖤
+        </p>
+      </footer>
+    </>
   );
 };
diff --git a/src/ui/h6-animated.tsx b/src/ui/h6-animated.tsx
new file mode 100644
index 0000000..6bac058
--- /dev/null
+++ b/src/ui/h6-animated.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+export const H6Animated: React.FC = ({ children }) => {
+  return (
+    <h6 className="text-indigo-500 u-text-center u u-LR my-2">{children}</h6>
+  );
+};
diff --git a/src/ui/hero-cv.tsx b/src/ui/hero-cv.tsx
new file mode 100644
index 0000000..5de55e6
--- /dev/null
+++ b/src/ui/hero-cv.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+import { Tags } from "./tags";
+
+export const HeroCV: React.FC = () => {
+  return (
+    <div className="hero fullscreen bg-blue-100 u-unselectable">
+      <div className="hero-body">
+        <div className="mx-auto">
+          <div className="p-2">
+            <h1 className="text-indigo-500">Work experience 👩🏻‍💻</h1>
+          </div>
+          <div className="p-2">
+            <h3>Skills:</h3>
+            <Tags
+              tagsInfo={[
+                "TypeScript",
+                "React",
+                "Node.js",
+                "Scala.js",
+                "Effector.js",
+                "Jest & JUnit",
+                "Scala",
+              ]}
+            />
+            <Tags
+              tagsInfo={["Tailwind CSS", "Sass", "Bootstrap", "Material UI"]}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/ui/hero.tsx b/src/ui/hero-main.tsx
similarity index 92%
rename from src/ui/hero.tsx
rename to src/ui/hero-main.tsx
index 693480c..0c2354b 100644
--- a/src/ui/hero.tsx
+++ b/src/ui/hero-main.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 
-export const Hero: React.FC = () => {
+export const HeroMain: React.FC = () => {
   const [colorChange, setColorChange] = useState("");
   const [fontColorChange, setFontColorChange] = useState("");
 
@@ -29,11 +29,10 @@ export const Hero: React.FC = () => {
 
   return (
     <div
-      className="hero fullscreen"
+      className="hero fullscreen u-unselectable"
       style={{
         backgroundColor: `${colorChange}`,
         transition: "background-color 1s ease",
-        position: "relative",
       }}
     >
       <div className="hero-body">
diff --git a/src/ui/small-heading.tsx b/src/ui/small-heading.tsx
index 434065b..58aafde 100644
--- a/src/ui/small-heading.tsx
+++ b/src/ui/small-heading.tsx
@@ -12,10 +12,12 @@ export const SmallHeading: React.FC<SmallHeadingProps> = ({
   children,
 }) => {
   return (
-    <div>
-      <h4>{h4}</h4>
-      <h5 className="text-indigo-500">{h5}</h5>
-      <p className="text-gray-600">{children}</p>
+    <div className="pt-6 pb-3">
+      <div className="px-4">
+        <h4 className="title">{h4}</h4>
+        <h5 className="text-indigo-500 subtitle">{h5}</h5>
+        <p className="text-gray-600">{children}</p>
+      </div>
     </div>
   );
 };
diff --git a/src/ui/tags.tsx b/src/ui/tags.tsx
new file mode 100644
index 0000000..b3cc774
--- /dev/null
+++ b/src/ui/tags.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+interface TagsProps {
+  tagsInfo: string[];
+  bgColor?: string;
+}
+
+export const Tags: React.FC<TagsProps> = ({
+  tagsInfo,
+  bgColor = "bg-indigo-200",
+}) => {
+  return (
+    <div className="tag-container">
+      {tagsInfo.map((text) => (
+        <div className={`tag ${bgColor}`}>{text}</div>
+      ))}
+    </div>
+  );
+};
diff --git a/src/ui/wrapper.tsx b/src/ui/wrapper.tsx
index 0275844..a804544 100644
--- a/src/ui/wrapper.tsx
+++ b/src/ui/wrapper.tsx
@@ -2,12 +2,8 @@ import React from "react";
 
 export const Wrapper: React.FC = ({ children }) => {
   return (
-    <>
-      <div className="row">
-        <div className="col-12 m-1">
-          <div className="p-4 m-2">{children}</div>
-        </div>
-      </div>
-    </>
+    <div className="row">
+      <div className="col-lg-12 px-2">{children}</div>
+    </div>
   );
 };