diff --git a/client/src/utils/types.ts b/client/src/utils/types.ts
index 0dde0c2..34adc3c 100644
--- a/client/src/utils/types.ts
+++ b/client/src/utils/types.ts
@@ -397,7 +397,6 @@ interface JobStatus {
 export interface Job extends ApiItem<JobSpec, JobStatus> {
 }
 
-
 interface DeploymentSpec {
     template: {
         spec: Spec;
@@ -408,4 +407,27 @@ interface DeploymentStatus {
 }
 
 export interface Deployment extends ApiItem<DeploymentSpec, DeploymentStatus> {
+}
+
+interface Port {
+    name: string;
+    port: number;
+    targetPort: number;
+    protocol: string;
+}
+
+interface ServiceSpec {
+    clusterIP: string;
+    type: string;
+    sessionAffinity: string;
+    selector?: {
+        app: string;
+    }
+    ports: Port[];
+}
+
+interface ServiceStatus {
+}
+
+export interface Service extends ApiItem<ServiceSpec, ServiceStatus> {
 }
\ No newline at end of file
diff --git a/client/src/views/service.js b/client/src/views/service.tsx
similarity index 91%
rename from client/src/views/service.js
rename to client/src/views/service.tsx
index 62b0518..ee41a2e 100644
--- a/client/src/views/service.js
+++ b/client/src/views/service.tsx
@@ -10,10 +10,21 @@ import Loading from '../components/loading';
 import MetadataFields from '../components/metadataFields';
 import SaveButton from '../components/saveButton';
 import {filterByOwner} from '../utils/filterHelper';
+import { Service, K8sEvent } from '../utils/types';
+
+type Props = {
+    namespace: string;
+    name: string;
+}
+
+type State = {
+    item?: Service;
+    events?: K8sEvent[];
+}
 
 const {service} = api;
 
-export default class Service extends Base {
+export default class ServiceView extends Base<Props, State> {
     componentDidMount() {
         const {namespace, name} = this.props;
 
diff --git a/client/src/views/services.js b/client/src/views/services.tsx
similarity index 82%
rename from client/src/views/services.js
rename to client/src/views/services.tsx
index d4392e7..54356aa 100644
--- a/client/src/views/services.js
+++ b/client/src/views/services.tsx
@@ -2,18 +2,25 @@ import React from 'react';
 import Base from '../components/base';
 import Filter from '../components/filter';
 import {MetadataHeaders, MetadataColumns, TableBody} from '../components/listViewHelpers';
-import {defaultSortInfo} from '../components/sorter';
+import {defaultSortInfo, SortInfo} from '../components/sorter';
 import api from '../services/api';
 import test from '../utils/filterHelper';
+import { Service } from '../utils/types';
 
-export default class Services extends Base {
-    state = {
+type State = {
+    filter: string;
+    sort: SortInfo;
+    items?: Service[];
+}
+
+export default class Services extends Base<{}, State> {
+    state: State = {
         filter: '',
         sort: defaultSortInfo(this),
     };
 
-    setNamespace(namespace) {
-        this.setState({items: null});
+    setNamespace(namespace: string) {
+        this.setState({items: undefined});
 
         this.registerApi({
             items: api.service.list(namespace, items => this.setState({items})),
@@ -41,7 +48,7 @@ export default class Services extends Base {
                             </tr>
                         </thead>
 
-                        <TableBody items={filtered} filter={filter} sort={sort} colSpan='4' row={x => (
+                        <TableBody items={filtered} filter={filter} sort={sort} colSpan={4} row={x => (
                             <tr key={x.metadata.uid}>
                                 <MetadataColumns
                                     item={x}