diff --git a/next.config.js b/next.config.js
index 313849a..1d81aaf 100644
--- a/next.config.js
+++ b/next.config.js
@@ -14,21 +14,21 @@ const webpack = (config, options) => {
     })
   )
 
-  config.module.rules.push({
-    test: /\.svg/,
-    use: [
-      options.defaultLoaders.babel,
-      {
-        loader: 'file-loader',
-        options: {
-          limit: 1000,
-          name: '[name]_[hash].[ext]',
-          publicPath: `/_next/static/svg`,
-          outputPath: 'static/svg',
-        },
-      },
-    ],
-  })
+  // config.module.rules.push({
+  //   test: /\.svg/,
+  //   use: [
+  //     options.defaultLoaders.babel,
+  //     {
+  //       loader: 'file-loader',
+  //       options: {
+  //         limit: 1000,
+  //         name: '[name]_[hash].[ext]',
+  //         publicPath: `/_next/static/svg`,
+  //         outputPath: 'static/svg',
+  //       },
+  //     },
+  //   ],
+  // })
 
   config.module.rules.push({
     test: /\.pdf/,
diff --git a/src/components/ui/Pagination/index.tsx b/src/components/ui/Pagination/index.tsx
index ae7abf0..555945b 100644
--- a/src/components/ui/Pagination/index.tsx
+++ b/src/components/ui/Pagination/index.tsx
@@ -9,11 +9,13 @@ import { PaginationStyled } from './styles'
 export * from './interfaces'
 
 const Pagination: React.FC<PaginationProps> = ({
-  page,
+  page: pageProps,
   limit,
   total,
   ...other
 }) => {
+  const page = pageProps || 1
+
   const router = useRouter()
 
   const getNewLocation = useCallback(
@@ -35,7 +37,7 @@ const Pagination: React.FC<PaginationProps> = ({
     [router.asPath]
   )
 
-  if (!page || !limit || !total) {
+  if (!limit || !total) {
     return null
   }
 
diff --git a/src/pages/Cities/City/View/index.tsx b/src/pages/Cities/City/View/index.tsx
new file mode 100644
index 0000000..17d378f
--- /dev/null
+++ b/src/pages/Cities/City/View/index.tsx
@@ -0,0 +1,19 @@
+import React, { useMemo } from 'react'
+import CompaniesView from 'src/pages/Companies/View'
+import { CityPageViewProps } from './interfaces'
+
+const CityPageView: React.FC<CityPageViewProps> = ({
+  city,
+  companies,
+  ...other
+}) => {
+  return useMemo(() => {
+    return (
+      <>
+        <CompaniesView companies={companies} city={city} {...other} />
+      </>
+    )
+  }, [companies, city, other])
+}
+
+export default CityPageView
diff --git a/src/pages/Cities/City/View/interfaces.ts b/src/pages/Cities/City/View/interfaces.ts
new file mode 100644
index 0000000..ca83002
--- /dev/null
+++ b/src/pages/Cities/City/View/interfaces.ts
@@ -0,0 +1,6 @@
+import { CityFragment } from 'src/modules/gql/generated'
+import { CompaniesViewProps } from 'src/pages/Companies/View/interfaces'
+
+export type CityPageViewProps = {
+  city: CityFragment
+} & CompaniesViewProps
diff --git a/src/pages/Cities/City/index.tsx b/src/pages/Cities/City/index.tsx
new file mode 100644
index 0000000..7b86420
--- /dev/null
+++ b/src/pages/Cities/City/index.tsx
@@ -0,0 +1,99 @@
+import { NextSeo } from 'next-seo'
+import { useRouter } from 'next/router'
+import { ParsedUrlQuery } from 'querystring'
+import React, { useMemo } from 'react'
+import {
+  QueryCompaniesArgs,
+  useCompaniesQuery,
+} from 'src/modules/gql/generated'
+import { Page } from 'src/pages/_App/interfaces'
+import { CityPageProps } from './interfaces'
+import CityPageView from './View'
+
+/**
+ * Параметры для запроса компаний
+ */
+export const getCompaniesVariables = ({
+  city,
+  query,
+}: {
+  city: CityPageProps['city'] | undefined
+  query: ParsedUrlQuery
+}): {
+  variables: QueryCompaniesArgs
+  page: number
+} => {
+  let skip: number | undefined
+
+  const take = 10
+
+  const page =
+    (query.page && typeof query.page === 'string' && parseInt(query.page)) || 0
+
+  if (page > 1) {
+    skip = (page - 1) * take
+  }
+
+  const variables: QueryCompaniesArgs = {
+    take: 12,
+    skip,
+  }
+
+  if (city?.coords) {
+    variables.orderBy = {
+      coords: {
+        lat: city.coords.lat,
+        lng: city.coords.lng,
+      },
+    }
+  }
+
+  return {
+    variables,
+    page,
+  }
+}
+
+const CityPage: Page<CityPageProps> = ({ city, ...other }) => {
+  const router = useRouter()
+
+  const { variables, page } = useMemo(() => {
+    return getCompaniesVariables({
+      city,
+      query: router.query,
+    })
+  }, [city, router.query])
+
+  const companiesResponse = useCompaniesQuery({
+    variables,
+  })
+
+  return useMemo(() => {
+    return (
+      <>
+        <NextSeo
+          title={`Общественные бани в городе "${city.pagetitle}"`}
+          description={`Все общественные бани и сауны в городе "${city.pagetitle}"`}
+        />
+        <CityPageView
+          city={city}
+          companies={companiesResponse.data?.companies || []}
+          pagination={{
+            page,
+            limit: companiesResponse.variables?.take || 0,
+            total: 100,
+          }}
+          {...other}
+        />
+      </>
+    )
+  }, [
+    city,
+    companiesResponse.data?.companies,
+    companiesResponse.variables?.take,
+    other,
+    page,
+  ])
+}
+
+export default CityPage
diff --git a/src/pages/Cities/City/interfaces.ts b/src/pages/Cities/City/interfaces.ts
new file mode 100644
index 0000000..1a623d1
--- /dev/null
+++ b/src/pages/Cities/City/interfaces.ts
@@ -0,0 +1,6 @@
+import { PageProps } from 'src/pages/_App/interfaces'
+import { CityPageViewProps } from './View/interfaces'
+
+export type CityPageProps = PageProps & {
+  city: CityPageViewProps['city']
+}
diff --git a/src/pages/Companies/View/index.tsx b/src/pages/Companies/View/index.tsx
index 7195a04..28fc372 100644
--- a/src/pages/Companies/View/index.tsx
+++ b/src/pages/Companies/View/index.tsx
@@ -1,17 +1,29 @@
-import { Grid } from '@material-ui/core'
 import React, { useMemo } from 'react'
+import { Grid } from '@material-ui/core'
+import Link from 'next/link'
+import Pagination from 'src/components/ui/Pagination'
 import CompaniesViewCompany from './Company'
 import { CompaniesViewProps } from './interfaces'
 import { CompaniesViewStyled } from './styles'
 
 const CompaniesView: React.FC<CompaniesViewProps> = ({
   companies,
+  city,
+  pagination,
   ...other
 }) => {
   return useMemo(() => {
     return (
       <>
         <CompaniesViewStyled {...other}>
+          {city ? (
+            <p>
+              Данные показаны относительно города {city.pagetitle}.{' '}
+              <Link href="/city">
+                <a title="Смотреть бани в других городах">Выбрать город</a>
+              </Link>
+            </p>
+          ) : null}
           <Grid container>
             {companies.map((n) => (
               <Grid key={n.id} item xs={12} sm={6} md={4} lg={3}>
@@ -20,9 +32,11 @@ const CompaniesView: React.FC<CompaniesViewProps> = ({
             ))}
           </Grid>
         </CompaniesViewStyled>
+
+        {pagination ? <Pagination {...pagination} /> : null}
       </>
     )
-  }, [companies, other])
+  }, [city, companies, other, pagination])
 }
 
 export default CompaniesView
diff --git a/src/pages/Companies/View/interfaces.ts b/src/pages/Companies/View/interfaces.ts
index 63afa44..a37dea5 100644
--- a/src/pages/Companies/View/interfaces.ts
+++ b/src/pages/Companies/View/interfaces.ts
@@ -1,5 +1,8 @@
-import { CompaniesQuery } from 'src/modules/gql/generated'
+import { PaginationProps } from 'src/components/ui/Pagination'
+import { CityFragment, CompaniesQuery } from 'src/modules/gql/generated'
 
 export type CompaniesViewProps = {
   companies: CompaniesQuery['companies']
+  city: CityFragment | undefined
+  pagination: PaginationProps | undefined
 }
diff --git a/src/pages/MainPage/__tests__/page.test.tsx b/src/pages/MainPage/__tests__/page.test.tsx
index 035a168..f086cf8 100644
--- a/src/pages/MainPage/__tests__/page.test.tsx
+++ b/src/pages/MainPage/__tests__/page.test.tsx
@@ -15,7 +15,20 @@ jest.mock('next/router', () => ({
 
 describe('MainPage', () => {
   it('Render MainPage', () => {
-    const tree = appRender(<MainPage />)
+    const tree = appRender(
+      <MainPage
+        city={{
+          id: 1197,
+          pagetitle: 'Москва',
+          longtitle: 'Бани Москвы',
+          coords: {
+            lat: 55.752898,
+            lng: 37.621908,
+            zoom: 12,
+          },
+        }}
+      />
+    )
 
     // eslint-disable-next-line no-console
     // console.log('MainPage tree', tree.container.outerHTML);
diff --git a/src/pages/MainPage/index.tsx b/src/pages/MainPage/index.tsx
index 9a9d60b..93824ce 100644
--- a/src/pages/MainPage/index.tsx
+++ b/src/pages/MainPage/index.tsx
@@ -1,3 +1,4 @@
+import React, { useMemo } from 'react'
 // import { useRouter } from 'next/router'
 import { NextSeo } from 'next-seo'
 // import OldMainPage from 'src/components_old/Pages/MainPage'
@@ -15,21 +16,24 @@ import { Page } from '../_App/interfaces'
 import {
   useCompaniesQuery,
   CompaniesDocument,
+  CompaniesQuery,
   CompaniesQueryVariables,
 } from 'src/modules/gql/generated'
 
 import CompaniesView from '../Companies/View'
+import { MainPageProps } from './interfaces'
+import { getCompaniesVariables } from '../Cities/City'
+import { useRouter } from 'next/router'
 
-const variables: CompaniesQueryVariables = {
-  take: 12,
-}
-
-export const MainPage: Page = (): JSX.Element => {
-  // const router = useRouter()
+export const MainPage: Page<MainPageProps> = ({ city }): JSX.Element => {
+  const router = useRouter()
 
-  // const {
-  //   // query: { skip, first },
-  // } = router
+  const { variables, page } = useMemo(() => {
+    return getCompaniesVariables({
+      city,
+      query: router.query,
+    })
+  }, [city, router.query])
 
   const companiesResponse = useCompaniesQuery({
     variables,
@@ -44,20 +48,35 @@ export const MainPage: Page = (): JSX.Element => {
 
       {/* <OldMainPage /> */}
 
-      <CompaniesView companies={companiesResponse.data?.companies || []} />
+      <CompaniesView
+        companies={companiesResponse.data?.companies || []}
+        city={city}
+        pagination={{
+          page,
+          limit: companiesResponse.variables?.take || 0,
+          total: 100,
+        }}
+      />
     </>
   )
 }
 
 MainPage.getInitialProps = async (appContext) => {
-  const { apolloClient } = appContext
+  const { apolloClient, cities, query } = appContext
 
-  await apolloClient.query({
+  const moscow = cities.find((n) => n.id === 1197)
+
+  await apolloClient.query<CompaniesQuery, CompaniesQueryVariables>({
     query: CompaniesDocument,
-    variables,
+    variables: getCompaniesVariables({
+      city: moscow,
+      query,
+    }).variables,
   })
 
-  return {}
+  return {
+    city: moscow,
+  }
 }
 
 export default MainPage
diff --git a/src/pages/MainPage/interfaces.ts b/src/pages/MainPage/interfaces.ts
new file mode 100644
index 0000000..c39952e
--- /dev/null
+++ b/src/pages/MainPage/interfaces.ts
@@ -0,0 +1,6 @@
+import { PageProps } from '../_App/interfaces'
+import { CityFragment } from 'src/modules/gql/generated'
+
+export type MainPageProps = {
+  city: CityFragment | undefined
+} & PageProps
diff --git a/src/pages/Ratings/View/Rating/index.tsx b/src/pages/Ratings/View/Rating/index.tsx
index 029d003..4a0e4b8 100644
--- a/src/pages/Ratings/View/Rating/index.tsx
+++ b/src/pages/Ratings/View/Rating/index.tsx
@@ -58,7 +58,11 @@ const RatingsPageViewRating: React.FC<RatingsPageViewRatingProps> = ({
             <Title variant="h2">{ratingType.pagetitle}</Title>
           </Link>
 
-          <CompaniesView companies={companies} />
+          <CompaniesView
+            companies={companies}
+            city={undefined}
+            pagination={undefined}
+          />
 
           {haveMore && (
             <div className="buttons">
diff --git a/src/pages/Resource/index.tsx b/src/pages/Resource/index.tsx
index 10f000d..2306f60 100644
--- a/src/pages/Resource/index.tsx
+++ b/src/pages/Resource/index.tsx
@@ -5,6 +5,9 @@
 
 import React, { useMemo } from 'react'
 import {
+  CompaniesDocument,
+  CompaniesQuery,
+  CompaniesQueryVariables,
   ResourcesDocument,
   ResourcesQuery,
   ResourcesQueryVariables,
@@ -22,6 +25,7 @@ import { ResourcePageProps } from './interfaces'
 import CompanyView from '../Companies/Company/View'
 import Topic from 'src/components/ui/Topic'
 import { NextSeo } from 'next-seo'
+import CityPage, { getCompaniesVariables } from '../Cities/City'
 
 export const getResourceVariables = (
   router: NextRouter | NextPageContextCustom
@@ -85,6 +89,8 @@ const ResourcePage: Page<ResourcePageProps> = () => {
       //
 
       return <CompanyView company={object} />
+    } else if (object.__typename === 'City') {
+      return <CityPage city={object} />
     } else if (
       object.__typename === 'Review' ||
       object.__typename === 'Topic'
@@ -190,6 +196,19 @@ ResourcePage.getInitialProps = async (context) => {
       // || (object.__typename === 'Resource' &&
       //   [15, 28].includes(object.template))
     ) {
+      statusCode = 200
+    } else if (object.__typename === 'City') {
+      /**
+       * Дополнительно получаем данные компаний
+       */
+      await apolloClient.query<CompaniesQuery, CompaniesQueryVariables>({
+        query: CompaniesDocument,
+        variables: getCompaniesVariables({
+          city: object,
+          query: context.query,
+        }).variables,
+      })
+
       statusCode = 200
     } else if (['City'].includes(object.__typename)) {
       //
diff --git a/src/pages/_App/index.tsx b/src/pages/_App/index.tsx
index 6379bb8..21137f6 100644
--- a/src/pages/_App/index.tsx
+++ b/src/pages/_App/index.tsx
@@ -12,7 +12,12 @@ import jquery from 'jquery'
 
 import Head from 'next/head'
 
-import { AppDataDocument, useAppDataQuery } from 'src/modules/gql/generated'
+import {
+  AppDataDocument,
+  AppDataQuery,
+  AppDataQueryVariables,
+  useAppDataQuery,
+} from 'src/modules/gql/generated'
 
 import {
   MainApp,
@@ -175,25 +180,30 @@ App.getInitialProps = async (appContext: NextAppContext) => {
     appContext,
   })
 
+  /**
+   * Получаем основные данные приложения
+   */
+  const appData = await apolloClient.query<AppDataQuery, AppDataQueryVariables>(
+    {
+      query: AppDataDocument,
+      variables: {},
+    }
+  )
+
   /**
    * Передаваемый далее в страницу контекст
    */
+  const ctx: NextPageContextCustom = {
+    ...appContext.ctx,
+    apolloClient,
+    cities: appData.data.cities,
+  }
+
   const newAppContext = {
     ...appContext,
-    ctx: {
-      ...appContext.ctx,
-      apolloClient,
-    } as NextPageContextCustom,
+    ctx,
   }
 
-  /**
-   * Получаем основные данные приложения
-   */
-  await apolloClient.query({
-    query: AppDataDocument,
-    variables: {},
-  })
-
   /**
    * Call final _App.getInitialProps, _Document.getInitialProps() and page.getInitialProps()
    */
diff --git a/src/pages/_App/interfaces.ts b/src/pages/_App/interfaces.ts
index fdbb1a2..830699a 100644
--- a/src/pages/_App/interfaces.ts
+++ b/src/pages/_App/interfaces.ts
@@ -2,6 +2,7 @@ import React from 'react'
 import { NextComponentType, NextPageContext } from 'next'
 import { ApolloClient, NormalizedCacheObject } from '@apollo/client'
 import { AppContext, AppInitialProps } from 'next/app'
+import { CityFragment } from 'src/modules/gql/generated'
 
 /**
  * API apollo-client
@@ -16,6 +17,11 @@ export interface NextPageContextCustom extends NextPageContext {
    * API apollo-client
    */
   apolloClient: ApolloClientNormolized
+
+  /**
+   * Города
+   */
+  cities: CityFragment[]
 }
 
 export interface PageProps extends React.PropsWithChildren<{}> {