diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..ca8c503
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,6 @@
+node_modules
+build
+.dockerignore
+**/.git
+**/.DS_Store
+**/node_modules
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..a8232c7
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,14 @@
+FROM node:14-alpine AS development
+ENV NODE_ENV development
+
+WORKDIR /app
+
+COPY package.json .
+COPY yarn.lock .
+RUN yarn install
+
+COPY . .
+
+EXPOSE 5000
+
+CMD [ "yarn", "start" ]
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
new file mode 100644
index 0000000..08a4ff7
--- /dev/null
+++ b/docker-compose.dev.yml
@@ -0,0 +1,13 @@
+version: '3.8'
+
+services:
+  app:
+    container_name: snmp-sim-ui
+    image: snmp-sim-ui
+    build:
+      context: .
+      target: development
+    volumes:
+      - ./src:/app/src
+    ports:
+      - 5000:5000
diff --git a/package.json b/package.json
index 179f848..d15445f 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "test": "jest"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.1.4",
+    "@tanstack/match-sorter-utils": "^8.1.1",
+    "@tanstack/react-table": "^8.2.3",
     "axios": "^0.27.2",
     "flowbite": "^1.4.7",
     "flowbite-react": "^0.1.3",
@@ -51,7 +52,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^5.5.1",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.11",
+    "fork-ts-checker-webpack-plugin": "^7.2.12",
     "html-webpack-plugin": "^5.5.0",
     "jest": "^28.1.2",
     "jest-environment-jsdom": "^28.1.2",
diff --git a/src/config/tableColumns/agentsColumns.tsx b/src/components/DataTable/tableColumns/agentsColumns.tsx
similarity index 94%
rename from src/config/tableColumns/agentsColumns.tsx
rename to src/components/DataTable/tableColumns/agentsColumns.tsx
index d6b5da0..1bdeabe 100644
--- a/src/config/tableColumns/agentsColumns.tsx
+++ b/src/components/DataTable/tableColumns/agentsColumns.tsx
@@ -3,8 +3,8 @@ import { Tooltip } from 'flowbite-react'
 import React from 'react'
 import { AiOutlineClose, AiOutlineTool } from 'react-icons/ai'
 import { toast } from 'react-toastify'
-import { Alert, StyledLink } from '../../components'
-import { Agent } from '../../models'
+import { Alert, StyledLink } from '../..'
+import { Agent } from '../../../models'
 
 export type AgentsColumns = Array<ColumnDef<Agent>>
 
diff --git a/src/config/tableColumns/devicesColumns.tsx b/src/components/DataTable/tableColumns/devicesColumns.tsx
similarity index 95%
rename from src/config/tableColumns/devicesColumns.tsx
rename to src/components/DataTable/tableColumns/devicesColumns.tsx
index 0eba00c..fe7a6a7 100644
--- a/src/config/tableColumns/devicesColumns.tsx
+++ b/src/components/DataTable/tableColumns/devicesColumns.tsx
@@ -3,8 +3,8 @@ import { Tooltip } from 'flowbite-react'
 import React from 'react'
 import { AiOutlineCaretRight, AiOutlineClose, AiOutlinePause, AiOutlineTool } from 'react-icons/ai'
 import { toast } from 'react-toastify'
-import { Alert, StatusIndicator, StyledLink } from '../../components'
-import { Device } from '../../models'
+import { Alert, StatusIndicator, StyledLink } from '../..'
+import { Device } from '../../../models'
 
 export type DevicesColumns = Array<ColumnDef<Device>>
 
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index cc00fe2..86cb7ac 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -2,7 +2,7 @@ import { Navbar as FlowbiteNavbar } from 'flowbite-react'
 import React from 'react'
 import { useLocation } from 'react-router'
 import Logo from '../../assets/images/sonalake_logo.jpeg'
-import { NAVBAR_LINKS } from '../../config/constants'
+import { NAVBAR_LINKS } from '../../constants'
 
 export const Navbar = () => {
   const { pathname } = useLocation()
diff --git a/src/components/PageWrapper/PageWrapper.tsx b/src/components/PageWrapper/PageWrapper.tsx
index 7b447c6..7fa4e4d 100644
--- a/src/components/PageWrapper/PageWrapper.tsx
+++ b/src/components/PageWrapper/PageWrapper.tsx
@@ -1,7 +1,7 @@
 import React, { FC, ReactNode } from 'react'
 import { ToastContainer } from 'react-toastify'
 import { Navbar } from '..'
-import { ALERT_AUTO_CLOSE_TIME } from '../../config/constants'
+import { ALERT_AUTO_CLOSE_TIME } from '../../constants'
 
 export const PageWrapper: FC<{ children: ReactNode }> = ({ children }) => (
   <>
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 31af345..d77bd0b 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1,6 +1,6 @@
 import { Pagination as FlowbitePagination, Select } from 'flowbite-react'
 import React, { FC, useMemo } from 'react'
-import { PAGINATION_PAGE_SIZE_OPTIONS } from '../../config/constants'
+import { PAGINATION_PAGE_SIZE_OPTIONS } from '../../constants'
 
 export const Pagination: FC<{
   currentPage: number
diff --git a/src/config/constants.ts b/src/constants.ts
similarity index 100%
rename from src/config/constants.ts
rename to src/constants.ts
diff --git a/src/pages/AgentDetails/AgentDetails.test.tsx b/src/pages/AgentDetails/AgentDetails.test.tsx
new file mode 100644
index 0000000..d2b3392
--- /dev/null
+++ b/src/pages/AgentDetails/AgentDetails.test.tsx
@@ -0,0 +1,18 @@
+import { screen } from '@testing-library/react'
+import axios from 'axios'
+import React from 'react'
+import { mockDevices } from '../../utils/testUtils/mockDevices'
+import { customRender } from '../../utils/testUtils/testUtils'
+import { AgentDetails } from './AgentDetails'
+
+jest.mock('axios')
+
+axios.get = jest.fn().mockImplementation(() => Promise.resolve({ data: mockDevices[0] }))
+
+describe('AgentDetails', () => {
+  it('should render the component', async () => {
+    customRender(<AgentDetails />)
+
+    expect(await screen.findByText(`Agent Details - ${mockDevices[0].name} - WIP`)).toBeInTheDocument()
+  })
+})
diff --git a/src/pages/Agents/Agents.tsx b/src/pages/Agents/Agents.tsx
index 81ed8f1..b7bd918 100644
--- a/src/pages/Agents/Agents.tsx
+++ b/src/pages/Agents/Agents.tsx
@@ -4,9 +4,9 @@ import React, { useCallback, useState } from 'react'
 import { AiOutlinePlusCircle } from 'react-icons/ai'
 import { toast } from 'react-toastify'
 import { Alert, BreadCrumbs, DataTable, Form, LoadingIndicator, Modal, PageWrapper, Pagination } from '../../components'
+import { agentsColumns } from '../../components/DataTable/tableColumns/agentsColumns'
 import { agentFormFields } from '../../components/Form/formFields'
-import { PAGINATION_PAGE_SIZE_OPTIONS } from '../../config/constants'
-import { agentsColumns } from '../../config/tableColumns/agentsColumns'
+import { PAGINATION_PAGE_SIZE_OPTIONS } from '../../constants'
 import { useFetch } from '../../hooks'
 import { Agent, AgentResponse } from '../../models'
 
diff --git a/src/pages/DeviceDetails/DeviceDetails.test.tsx b/src/pages/DeviceDetails/DeviceDetails.test.tsx
index c511b4f..d7c59b1 100644
--- a/src/pages/DeviceDetails/DeviceDetails.test.tsx
+++ b/src/pages/DeviceDetails/DeviceDetails.test.tsx
@@ -13,6 +13,6 @@ describe('DeviceDetails', () => {
   it('should render the component', async () => {
     customRender(<DeviceDetails />)
 
-    expect(await screen.findByText(`Device Details - ${mockDevices[0].name}`)).toBeInTheDocument()
+    expect(await screen.findByText(`Device Details - ${mockDevices[0].name} - WIP`)).toBeInTheDocument()
   })
 })
diff --git a/src/pages/Devices/Devices.tsx b/src/pages/Devices/Devices.tsx
index 0b3d699..4403f17 100644
--- a/src/pages/Devices/Devices.tsx
+++ b/src/pages/Devices/Devices.tsx
@@ -5,9 +5,9 @@ import React, { useCallback, useState } from 'react'
 import { AiOutlineCaretRight, AiOutlinePause, AiOutlinePlusCircle, AiOutlineReload } from 'react-icons/ai'
 import { toast } from 'react-toastify'
 import { Alert, BreadCrumbs, DataTable, Form, LoadingIndicator, Modal, PageWrapper, Pagination } from '../../components'
+import { devicesColumns } from '../../components/DataTable/tableColumns/devicesColumns'
 import { deviceFormFields } from '../../components/Form/formFields'
-import { PAGINATION_PAGE_SIZE_OPTIONS } from '../../config/constants'
-import { devicesColumns } from '../../config/tableColumns/devicesColumns'
+import { PAGINATION_PAGE_SIZE_OPTIONS } from '../../constants'
 import { useFetch } from '../../hooks'
 import { Device, DeviceResponse } from '../../models'
 
diff --git a/yarn.lock b/yarn.lock
index 4c28896..7323350 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -902,17 +902,24 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@tanstack/react-table@^8.1.4":
-  version "8.1.4"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.1.4.tgz#84fb62852afbad0fa8a5643207b529530a1c5813"
-  integrity sha512-WpPrZVbwrom2+8wZaM94OkVPfhMyzYvxyxPk2xfyFexjGorKl5erI/EnMme1EXTltsND5Jhsq/wnU6medaOQ9w==
+"@tanstack/match-sorter-utils@^8.1.1":
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.1.1.tgz#895f407813254a46082a6bbafad9b39b943dc834"
+  integrity sha512-IdmEekEYxQsoLOR0XQyw3jD1GujBpRRYaGJYQUw1eOT1eUugWxdc7jomh1VQ1EKHcdwDLpLaCz/8y4KraU4T9A==
+  dependencies:
+    remove-accents "0.4.2"
+
+"@tanstack/react-table@^8.2.3":
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.2.3.tgz#bc451497d53b788581c0c226626e625c904a2d20"
+  integrity sha512-48vfd1gOsjE6XCUrFQ8ZSUNRDEbDhFNmYgPlB8RkO+kyvOGut219lZ5rsu8Znw6YVU/WhUmsdE+GMGUeCjFdVQ==
   dependencies:
-    "@tanstack/table-core" "8.1.4"
+    "@tanstack/table-core" "8.2.3"
 
-"@tanstack/table-core@8.1.4":
-  version "8.1.4"
-  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.1.4.tgz#799b2bc4ced5d8c4ee099ece513270c1b73f16a7"
-  integrity sha512-iSlAT2BpkBFayJBgVxqQNXOgnF2S1r8b3aS1QlRGIusc4iZP0lRr0ie0CJ7Jhp0BZ62UH10RBIoBYHVYkg8Ejw==
+"@tanstack/table-core@8.2.3":
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.2.3.tgz#2ca0c8564262a6624bfddfd9b8361c4b829621e9"
+  integrity sha512-jzWAXgoXj8OK5zCrUfApesZ0+Admley/+T+W21MQxkfFaPRyoz+wiM+3xARpwGkB7SPzc3FuAzF4Ae9JcKq6gw==
 
 "@testing-library/dom@^8.5.0":
   version "8.14.0"
@@ -3601,10 +3608,10 @@ follow-redirects@^1.0.0, follow-redirects@^1.14.9:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5"
   integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==
 
-fork-ts-checker-webpack-plugin@^7.2.11:
-  version "7.2.11"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-7.2.11.tgz#aff3febbc11544ba3ad0ae4d5aa4055bd15cd26d"
-  integrity sha512-2e5+NyTUTE1Xq4fWo7KFEQblCaIvvINQwUX3jRmEGlgCTc1Ecqw/975EfQrQ0GEraxJTnp8KB9d/c8hlCHUMJA==
+fork-ts-checker-webpack-plugin@^7.2.12:
+  version "7.2.12"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-7.2.12.tgz#d15c48745f9092574b41138934aa3de504a39ba1"
+  integrity sha512-SCjmmjPXPgp5XRQ49hXd2Eqth8rz4+ggtOHygTzyaOn32oIIOd8Kw+xKcgXNkFGlZy5l03bHRYTkbQs+TWhaNA==
   dependencies:
     "@babel/code-frame" "^7.16.7"
     chalk "^4.1.2"
@@ -6563,6 +6570,11 @@ relateurl@^0.2.7:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==
 
+remove-accents@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
+  integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
+
 renderkid@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-3.0.0.tgz#5fd823e4d6951d37358ecc9a58b1f06836b6268a"