diff --git a/pages/index.jsx b/pages/index.tsx
similarity index 81%
rename from pages/index.jsx
rename to pages/index.tsx
index 7175736..8917f84 100644
--- a/pages/index.jsx
+++ b/pages/index.tsx
@@ -2,6 +2,8 @@ import { gql, useApolloClient } from '@apollo/client';
 import initializeApollo from 'apollo/client';
 import * as Calculation from 'Components/Calculation';
 import Output from 'Components/Output';
+import type { BaseOption } from 'Elements/types';
+import type { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import leadOpportunityUrlsReactions from 'process/lead-opportunity/reactions/urls';
 import { fetchUser } from 'services/user';
@@ -32,7 +34,11 @@ const Grid = styled(Box)`
   }
 `;
 
-function Home({ graphQLData }) {
+type PageProps = {
+  graphQLData: Record<string, BaseOption[] | null>;
+};
+
+function Home({ graphQLData }: PageProps) {
   const store = useStore();
   const apolloClient = useApolloClient();
 
@@ -42,15 +48,15 @@ function Home({ graphQLData }) {
   leadOpportunityUrlsReactions(store, apolloClient);
 
   /**
-   * set owner data to store
+   * set graphql data to store
    */
-  const { ownerData, transactioncurrencies } = graphQLData;
+  const { leads, opportunities, transactioncurrencies } = graphQLData;
 
   const { $calculation } = store;
 
   $calculation.$options.setOptions({
-    selectLead: ownerData?.leads || [],
-    selectOpportunity: ownerData.opportunities || [],
+    selectLead: leads || [],
+    selectOpportunity: opportunities || [],
     selectSupplierCurrency: transactioncurrencies || [],
   });
 
@@ -89,7 +95,7 @@ const QUERY_GET_TRANSACTION_CURRENCIES = gql`
   }
 `;
 
-export const getServerSideProps = async (ctx) => {
+export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) => {
   const user = await fetchUser({
     headers: ctx?.req?.headers?.cookie
       ? {
@@ -108,14 +114,14 @@ export const getServerSideProps = async (ctx) => {
   });
 
   // prettier-ignore
-  const { data: { transactioncurrencies }, } = await apolloClient.query({
+  const { data: { transactioncurrencies } } = await apolloClient.query({
     query: QUERY_GET_TRANSACTION_CURRENCIES,
   });
 
   return {
     props: {
       graphQLData: {
-        ownerData,
+        ...ownerData,
         transactioncurrencies,
       },
       initialApolloState: apolloClient.cache.extract(),