diff --git a/src/app/series/[...slug].tsx b/src/app/series/[...slug].tsx
deleted file mode 100644
index 0881805..0000000
--- a/src/app/series/[...slug].tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-// TODO: refactor
-import HeadMetaComponent from '../../components/headmeta';
-import CoverWithNavigationComponent from '../../components/cover/withNavigation';
-import SeriesWithArticlesComponent from '../../components/seriesWithArticles';
-import { getSeriesBySeriesName } from '../../api/series';
-import { SeriresWithArticlesResponse, SeriresWithArticles } from '../../models/series';
-import { Article } from '../../models/article';
-import { defaultRobotsMeta } from '../../../config';
-import { getRequestContext } from '../../utils/requestContext';
-import PlanePage from '../../components/planePage';
-
-export default function Page({ statusCode, seriresWithArticles }) {
-  if (statusCode !== 200) {
-    return <PlanePage
-      title={statusCode.toString()}
-      content="Something went to wrong..."
-    />
-  }
-  return (
-    <>
-      <HeadMetaComponent
-        robotsMeta={defaultRobotsMeta}
-      />
-      <CoverWithNavigationComponent
-        contentCover={{
-          title: seriresWithArticles.title,
-          tags: null,
-          publishedAt: null,
-        }}
-      />
-      <main>
-        <SeriesWithArticlesComponent
-           seriresWithArticles={seriresWithArticles}
-        />
-      </main>
-    </>
-  )
-}
-
-export async function getServerSideProps(ctx: any) {
-  const seriesName = ctx.query.slug[0];
-  const response: Response = await getSeriesBySeriesName(seriesName, getRequestContext(ctx.req))
-  ctx.res.statusCode = response.status;
-
-  let seriresWithArticlesResponse: SeriresWithArticlesResponse = null;
-  let seriresWithArticles: SeriresWithArticles = null;
-  if (response.status === 200) {
-    seriresWithArticlesResponse = await response.json() as SeriresWithArticlesResponse;
-    seriresWithArticles = {
-      id: seriresWithArticlesResponse.id,
-      name: seriresWithArticlesResponse.name,
-      title: seriresWithArticlesResponse.title,
-      description: seriresWithArticlesResponse.description,
-      articles: seriresWithArticlesResponse.articles.map(article => {
-        return {
-          path: article.path,
-          title: article.title,
-          content: `${article.content} ...`,
-          publishedAt: article.publishedAt,
-          updatedAt: article.updatedAt
-        } as Article
-      })
-    };
-  }
-
-  return {
-    props: {
-      statusCode: response.status,
-      seriresWithArticles: seriresWithArticles
-    }
-  }
-}
diff --git a/src/app/series/[slug]/page.tsx b/src/app/series/[slug]/page.tsx
new file mode 100644
index 0000000..7f7a3aa
--- /dev/null
+++ b/src/app/series/[slug]/page.tsx
@@ -0,0 +1,44 @@
+// TODO: refactor
+import { getSeriesBySeriesName } from '../../../api/series';
+import { SeriresWithArticlesResponse, SeriresWithArticles } from '../../../models/series';
+import { Article } from '../../../models/article';
+import { getRequestContext } from '../../../utils/requestContext';
+import { Renderer } from './renderer';
+
+export default async function Page(ctx: any) {
+  const { props } = await get(ctx);
+  return <Renderer {...props} />;
+}
+
+export async function get(ctx: any) {
+  const seriesName = ctx.params.slug;
+  const response: Response = await getSeriesBySeriesName(seriesName, getRequestContext(ctx));
+  // ctx.res.statusCode = response.status;
+
+  let seriresWithArticles: SeriresWithArticles = null;
+  if (response.status === 200) {
+    let seriresWithArticlesResponse: SeriresWithArticlesResponse = await response.json() as SeriresWithArticlesResponse;
+    seriresWithArticles = {
+      id: seriresWithArticlesResponse.id,
+      name: seriresWithArticlesResponse.name,
+      title: seriresWithArticlesResponse.title,
+      description: seriresWithArticlesResponse.description,
+      articles: seriresWithArticlesResponse.articles.map(article => {
+        return {
+          path: article.path,
+          title: article.title,
+          content: `${article.content} ...`,
+          publishedAt: article.publishedAt,
+          updatedAt: article.updatedAt
+        } as Article
+      })
+    };
+  }
+
+  return {
+    props: {
+      statusCode: response.status,
+      seriresWithArticles: seriresWithArticles
+    }
+  }
+}
diff --git a/src/app/series/[slug]/renderer.tsx b/src/app/series/[slug]/renderer.tsx
new file mode 100644
index 0000000..4bda322
--- /dev/null
+++ b/src/app/series/[slug]/renderer.tsx
@@ -0,0 +1,37 @@
+// TODO: refactor
+import HeadMetaComponent from '../../../components/headmeta';
+import CoverWithNavigationComponent from '../../../components/cover/withNavigation';
+import SeriesWithArticlesComponent from '../../../components/seriesWithArticles';
+import { defaultRobotsMeta } from '../../../../config';
+import PlanePage from '../../../components/planePage';
+
+export const Renderer: React.FunctionComponent<{
+  statusCode,
+  seriresWithArticles
+}> = ({ statusCode, seriresWithArticles }) => {
+  if (statusCode !== 200) {
+    return <PlanePage
+      title={statusCode.toString()}
+      content="Something went to wrong..."
+    />
+  }
+  return (
+    <>
+      <HeadMetaComponent
+        robotsMeta={defaultRobotsMeta}
+      />
+      <CoverWithNavigationComponent
+        contentCover={{
+          title: seriresWithArticles.title,
+          tags: null,
+          publishedAt: null,
+        }}
+      />
+      <main>
+        <SeriesWithArticlesComponent
+           seriresWithArticles={seriresWithArticles}
+        />
+      </main>
+    </>
+  )
+}
diff --git a/src/app/series/index.tsx b/src/app/series/index.tsx
deleted file mode 100644
index 2d41ede..0000000
--- a/src/app/series/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import HeadMetaComponent from '../../components/headmeta';
-import CoverWithNavigationComponent from '../../components/cover/withNavigation';
-import SeriesComponent from '../../components/series';
-import { getSeries } from '../../api/series';
-import { Series, SeriesResponse } from '../../models/series';
-import { defaultRobotsMeta } from '../../../config';
-import { getRequestContext } from '../../utils/requestContext';
-import PlanePage from '../../components/planePage';
-
-const Page: React.FunctionComponent<{ statusCode: number, series: Array<Series> }> = ({ statusCode, series }) => {
-  if (statusCode !== 200) {
-    return <PlanePage
-      title={statusCode.toString()}
-      content="Something went to wrong..."
-    />
-  }
-
-  return (
-    <>
-      <HeadMetaComponent
-        robotsMeta={defaultRobotsMeta}
-      />
-      <CoverWithNavigationComponent
-        contentCover={{
-          title: "Series",
-          tags: null,
-          publishedAt: null,
-        }}
-      />
-      <main>
-        <SeriesComponent
-          series={series}
-        />
-      </main>
-    </>
-  )
-}
-
-export async function getServerSideProps(ctx: any) {
-  const response: Response = await getSeries(getRequestContext(ctx.req))
-  ctx.res.statusCode = response.status;
-
-  let seriesResponse: Array<SeriesResponse> = null;
-  let series: Array<Series> = [];
-  if (response.status === 200) {
-    seriesResponse = await response.json() as Array<SeriesResponse>;
-    series = seriesResponse.map(series => {
-      return {
-        id: series.id,
-        name: series.name,
-        title: series.title,
-        description: series.description
-      } as Series
-    });
-  }
-
-  return {
-    props: {
-      statusCode: response.status,
-      series: series
-    }
-  }
-}
-
-export default Page;
diff --git a/src/app/series/page.tsx b/src/app/series/page.tsx
new file mode 100644
index 0000000..8f3538e
--- /dev/null
+++ b/src/app/series/page.tsx
@@ -0,0 +1,34 @@
+import { getSeries } from '../../api/series';
+import { Series, SeriesResponse } from '../../models/series';
+import { getRequestContext } from '../../utils/requestContext';
+import { Renderer } from './renderer';
+
+export default async function Page(req: any) {
+  const { props } = await get(req);
+  return <Renderer {...props} />;
+}
+
+export async function get(req: any) {
+  const response: Response = await getSeries(getRequestContext(req))
+  // ctx.res.statusCode = response.status;
+
+  let series: Array<Series> = [];
+  if (response.status === 200) {
+    let seriesResponse: Array<SeriesResponse> = await response.json() as Array<SeriesResponse>;
+    series = seriesResponse.map(series => {
+      return {
+        id: series.id,
+        name: series.name,
+        title: series.title,
+        description: series.description
+      } as Series
+    });
+  }
+
+  return {
+    props: {
+      statusCode: response.status,
+      series: series
+    }
+  }
+}
diff --git a/src/app/series/renderer.tsx b/src/app/series/renderer.tsx
new file mode 100644
index 0000000..aa67101
--- /dev/null
+++ b/src/app/series/renderer.tsx
@@ -0,0 +1,38 @@
+import HeadMetaComponent from '../../components/headmeta';
+import CoverWithNavigationComponent from '../../components/cover/withNavigation';
+import SeriesComponent from '../../components/series';
+import { Series } from '../../models/series';
+import { defaultRobotsMeta } from '../../../config';
+import PlanePage from '../../components/planePage';
+
+export const Renderer: React.FunctionComponent<{
+  statusCode: number,
+  series: Array<Series>
+}> = ({ statusCode, series }) => {
+  if (statusCode !== 200) {
+    return <PlanePage
+      title={statusCode.toString()}
+      content="Something went to wrong..."
+    />
+  }
+
+  return (
+    <>
+      <HeadMetaComponent
+        robotsMeta={defaultRobotsMeta}
+      />
+      <CoverWithNavigationComponent
+        contentCover={{
+          title: "Series",
+          tags: null,
+          publishedAt: null,
+        }}
+      />
+      <main>
+        <SeriesComponent
+          series={series}
+        />
+      </main>
+    </>
+  )
+}