diff --git a/README.md b/README.md
index 75fc343..a6d8adb 100644
--- a/README.md
+++ b/README.md
@@ -1,34 +1,13 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Education technologies, news, books, courses, videos, articles, podcasts, and more
+
 
-## Getting Started
+## Run locally
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
 First, run the development server:
 
 ```bash
 npm run dev
-# or
-yarn dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/page.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/_templates/_page.tsx b/_templates/_page.tsx
new file mode 100644
index 0000000..b53d36d
--- /dev/null
+++ b/_templates/_page.tsx
@@ -0,0 +1,9 @@
+import type { NextPage } from 'next'
+
+const SomePage: NextPage = () => {
+  return (
+    <div>SomePage</div>
+  )
+}
+
+export default SomePage
diff --git a/src/app/books/page.tsx b/src/app/books/page.tsx
new file mode 100644
index 0000000..547a608
--- /dev/null
+++ b/src/app/books/page.tsx
@@ -0,0 +1,9 @@
+import type { NextPage } from 'next'
+
+const BooksPage: NextPage = () => {
+  return (
+    <div>BooksPage</div>
+  )
+}
+
+export default BooksPage
diff --git a/src/app/companies/page.tsx b/src/app/companies/page.tsx
new file mode 100644
index 0000000..c94d284
--- /dev/null
+++ b/src/app/companies/page.tsx
@@ -0,0 +1,35 @@
+import type { NextPage } from 'next'
+
+import { CompaniesList } from '@/components'
+
+const companies = [
+  {
+    id: '1',
+    name: 'Khan Academy',
+    url: 'https://www.khanacademy.org/',
+    wiki: 'https://en.wikipedia.org/wiki/Khan_Academy',
+    launched: '2006',
+    logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Khan_Academy_logo_%282018%29.svg/440px-Khan_Academy_logo_%282018%29.svg.png',
+    description: 'Khan Academy is a nonprofit with the mission of providing a free, world-class education for anyone, anywhere.'
+  },
+  {
+    id: '2',
+    name: 'Coursera',
+    url: 'https://www.coursera.org/',
+    wiki: 'https://en.wikipedia.org/wiki/Coursera',
+    launched: '2012',
+    logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Coursera_logo_%282020%29.svg/440px-Coursera_logo_%282020%29.svg.png',
+    description: 'Choose from hundreds of free courses or pay to earn a Course or Specialization Certificate. Explore our catalog of online degrees, certificates, Specializations, & MOOCs in data science, computer science, business, health, and dozens of other topics.'
+  }
+];
+
+const CompaniesPage: NextPage = () => {
+  return (
+    <div>
+      <h1>Companies</h1>
+      <CompaniesList list={companies} />
+    </div>
+  )
+}
+
+export default CompaniesPage
diff --git a/src/app/free-universities/page.tsx b/src/app/free-universities/page.tsx
new file mode 100644
index 0000000..aca0a90
--- /dev/null
+++ b/src/app/free-universities/page.tsx
@@ -0,0 +1,9 @@
+import type { NextPage } from 'next'
+
+const FreeUniversitiesPage: NextPage = () => {
+  return (
+    <div>FreeUniversitiesPage</div>
+  )
+}
+
+export default FreeUniversitiesPage
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b9c294c..5f9f259 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,9 @@
 import type { ReactNode } from 'react'
-import { Metadata } from 'next'
+import type { Metadata } from 'next'
 import Script from 'next/script'
+
+import { GlobalMenu } from '@/components'
+
 import '@/styles/global.css'
 
 export const metadata: Metadata = {
@@ -16,6 +19,9 @@ export default function RootLayout ({
   return (
     <html lang="en">
     <body>
+    <header>
+      <GlobalMenu />
+    </header>
     <main>
       {children}
     </main>
diff --git a/src/app/news/page.tsx b/src/app/news/page.tsx
new file mode 100644
index 0000000..61c49cf
--- /dev/null
+++ b/src/app/news/page.tsx
@@ -0,0 +1,9 @@
+import type { NextPage } from 'next'
+
+const NewsPage: NextPage = () => {
+  return (
+    <div>NewsPage</div>
+  )
+}
+
+export default NewsPage
diff --git a/src/app/page.tsx b/src/app/page.tsx
index fc15724..2b54f59 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-import { NextPage } from 'next'
+import type { NextPage } from 'next'
 import Link from 'next/link'
 
 const IndexPage: NextPage = () => {
diff --git a/src/app/systems/page.tsx b/src/app/systems/page.tsx
new file mode 100644
index 0000000..ac11e07
--- /dev/null
+++ b/src/app/systems/page.tsx
@@ -0,0 +1,27 @@
+import type { NextPage } from 'next'
+
+import { SystemsList } from '@/components'
+
+const systems = [
+  {
+    name: 'Flipped classroom',
+    description: 'Flipped classroom is an instructional strategy and a type of blended learning that reverses the traditional learning environment by delivering instructional content, often online, outside of the classroom. It moves activities, including those that may have traditionally been considered homework, into the classroom. In a flipped classroom, students watch online lectures, collaborate in online discussions, or carry out research at home and engage in concepts in the classroom with the guidance of a mentor.',
+    wiki: 'https://en.wikipedia.org/wiki/Flipped_classroom',
+  },
+  {
+    name: 'Personalized learning',
+    description: 'Personalized learning, individualized instruction, personal learning environment and direct instruction all refer to efforts to tailor education to meet the different needs of students. In addition, various terms are used to describe what personalized learning looks like, including differentiated instruction, individualized instruction and adaptive learning.',
+    wiki: 'https://en.wikipedia.org/wiki/Personalized_learning',
+  },
+]
+
+const SystemsPage: NextPage = () => {
+  return (
+    <div>
+      <h3>SystemsPage</h3>
+      <SystemsList systems={systems} />
+    </div>
+  )
+}
+
+export default SystemsPage
diff --git a/src/components/CompaniesList/CompaniesList.tsx b/src/components/CompaniesList/CompaniesList.tsx
new file mode 100644
index 0000000..7696e57
--- /dev/null
+++ b/src/components/CompaniesList/CompaniesList.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+type Company = {
+  id: string
+  name: string
+  url: string
+  logo: string
+  description: string
+}
+
+export type CompaniesListProps = {
+  list: Company[]
+}
+
+export const CompaniesList = ({ list }: CompaniesListProps) => {
+  return (
+    <div>
+      <h3>CompaniesList</h3>
+      {list.length > 0 && <ul>
+        {list.map((company) => <li key={company.id}>
+          <a href={company.url} target="_blank" rel="noreferrer">
+            <img src={company.logo} alt={company.name} />
+            {company.name}
+          </a>
+          <p>{company.description}</p>
+        </li>)}
+      </ul>}
+    </div>
+  )
+}
diff --git a/src/components/CompaniesList/index.ts b/src/components/CompaniesList/index.ts
new file mode 100644
index 0000000..94c37b5
--- /dev/null
+++ b/src/components/CompaniesList/index.ts
@@ -0,0 +1,2 @@
+export { CompaniesList } from './CompaniesList'
+export type { CompaniesListProps } from './CompaniesList'
diff --git a/src/components/GlobalMenu/GlobalMenu.module.css b/src/components/GlobalMenu/GlobalMenu.module.css
new file mode 100644
index 0000000..b844be8
--- /dev/null
+++ b/src/components/GlobalMenu/GlobalMenu.module.css
@@ -0,0 +1,3 @@
+.component {
+    display: flex;
+}
diff --git a/src/components/GlobalMenu/GlobalMenu.tsx b/src/components/GlobalMenu/GlobalMenu.tsx
new file mode 100644
index 0000000..397bf03
--- /dev/null
+++ b/src/components/GlobalMenu/GlobalMenu.tsx
@@ -0,0 +1,15 @@
+import Link from 'next/link'
+
+import classes from './GlobalMenu.module.css'
+
+export const GlobalMenu = () => {
+  return (
+    <menu className={classes.component}>
+      <li><Link href="/news">edu news</Link></li>
+      <li><Link href="/free-universities">free universities programs</Link></li>
+      <li><Link href="/companies">EduTech companies</Link></li>
+      <li><Link href="/systems">systems</Link></li>
+      <li><Link href="/books">books</Link></li>
+    </menu>
+  )
+}
diff --git a/src/components/GlobalMenu/index.ts b/src/components/GlobalMenu/index.ts
new file mode 100644
index 0000000..ace1727
--- /dev/null
+++ b/src/components/GlobalMenu/index.ts
@@ -0,0 +1 @@
+export { GlobalMenu } from './GlobalMenu'
diff --git a/src/components/SystemsList/SystemsList.module.css b/src/components/SystemsList/SystemsList.module.css
new file mode 100644
index 0000000..b844be8
--- /dev/null
+++ b/src/components/SystemsList/SystemsList.module.css
@@ -0,0 +1,3 @@
+.component {
+    display: flex;
+}
diff --git a/src/components/SystemsList/SystemsList.tsx b/src/components/SystemsList/SystemsList.tsx
new file mode 100644
index 0000000..f030d5e
--- /dev/null
+++ b/src/components/SystemsList/SystemsList.tsx
@@ -0,0 +1,23 @@
+import classes from './SystemsList.module.css'
+
+export type SystemsList = {
+  systems: {
+    name: string
+    description: string
+    wiki: string
+  }[]
+}
+
+const SystemsList = ({ systems }: SystemsList) => {
+  console.log("systems: ", systems); // eslint-disable-line
+  
+  return (
+    <div className={classes.component}>
+      SystemsList
+    </div>
+  )
+}
+
+export {
+  SystemsList,
+}
diff --git a/src/components/SystemsList/index.ts b/src/components/SystemsList/index.ts
new file mode 100644
index 0000000..5342891
--- /dev/null
+++ b/src/components/SystemsList/index.ts
@@ -0,0 +1 @@
+export { SystemsList } from './SystemsList'
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..1f23091
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,6 @@
+export { GlobalMenu } from './GlobalMenu'
+
+export { CompaniesList } from './CompaniesList'
+export type { CompaniesListProps } from './CompaniesList'
+
+export { SystemsList } from './SystemsList'