diff --git a/.env b/.env
index 3a05556..b3474b3 100644
--- a/.env
+++ b/.env
@@ -1,11 +1,11 @@
-NEXT_PUBLIC_COGNITO_CLIENT_ID=1234
-NEXT_PUBLIC_COGNITO_URL =https://quemistry.auth.ap-southeast-1.amazoncognito.com
+NEXT_PUBLIC_COGNITO_CLIENT_ID = 1234
+NEXT_PUBLIC_COGNITO_URL = https://quemistry.auth.ap-southeast-1.amazoncognito.com
 NEXT_PUBLIC_IDP_AuthorizeEndpoint = $NEXT_PUBLIC_COGNITO_URL/oauth2/authorize
 NEXT_PUBLIC_IDP_Tokendpoint = $NEXT_PUBLIC_COGNITO_URL/oauth2/token
-NEXT_PUBLIC_QUEMISTRY_DOMAIN =https://dkraju438qs82.cloudfront.net
+NEXT_PUBLIC_QUEMISTRY_DOMAIN = https://dkraju438qs82.cloudfront.net
 NEXT_PUBLIC_RedirectUrl = $NEXT_PUBLIC_QUEMISTRY_DOMAIN/auth/google
-NEXT_PUBLIC_QUEMISTRY_GATEWAY_URL=https://b4jba6xq87.execute-api.ap-southeast-1.amazonaws.com/Staging
+NEXT_PUBLIC_QUEMISTRY_GATEWAY_URL= https://b4jba6xq87.execute-api.ap-southeast-1.amazonaws.com/Staging
 NEXT_PUBLIC_QUEMISTRY_AUTH_URL = $NEXT_PUBLIC_QUEMISTRY_GATEWAY_URL/auth
 NEXT_PUBLIC_QUEMISTRY_QUESTIONS_URL = $NEXT_PUBLIC_QUEMISTRY_GATEWAY_URL/questions
-NEXT_PUBLIC_QUEMISTRY_USER_URL = $NEXT_PUBLIC_QUEMISTRY_GATEWAY_URL/user
+NEXT_PUBLIC_QUEMISTRY_CLASS_URL = $NEXT_PUBLIC_QUEMISTRY_GATEWAY_URL/class
 NEXT_PUBLIC_QUEMISTRY_QUIZZES_URL = $NEXT_PUBLIC_QUEMISTRY_GATEWAY_URL/quizzes
diff --git a/app/(main)/classes/page.tsx b/app/(main)/classes/page.tsx
index 8744bfc..ba45864 100644
--- a/app/(main)/classes/page.tsx
+++ b/app/(main)/classes/page.tsx
@@ -1,105 +1,55 @@
 /* eslint-disable @next/next/no-img-element */
 'use client';
 import { Button } from 'primereact/button';
-import React, { Fragment, useContext, useEffect, useRef, useState } from 'react';
-import { ChartOptions } from 'chart.js';
+import React, { Fragment, useState } from 'react';
 import { Dialog } from 'primereact/dialog';
 import { InputText } from 'primereact/inputtext';
-import { LayoutContext } from '@/layout/context/layoutcontext';
 import { UserService } from '../../../service/UserService';
 
+
+
 const Classes = () => {
     const [addClass, setAddClass] = useState(false);
-    const [newClassCode, setNewClassCode] = useState('');
-    const [newClassDescription, setNewClassDescription] = useState('');
-    const [newClassEducationLevel, setNewClassEducationLevel] = useState('');
-    const [newClassSubject, setNewClassSubject] = useState('');
 
-    const { layoutConfig } = useContext(LayoutContext);
+    const DEFAULT_CLASS_CODE = '';
+    const DEFAULT_CLASS_DESCRIPTION = '';
+    const DEFAULT_CLASS_EDUCATION_LEVEL = '';
+    const DEFAULT_CLASS_SUBJECT = 'Chemistry';
+
+    interface ClassMap {
+        descriptionName: string;
+        apiName: string;
+        defaultValue: string;
+        value: string;
+        setValue: React.Dispatch<React.SetStateAction<string>>;
+    }
+
+    const useGenerateClassMap = (descriptionName: string, apiName: string, defaultValue: string): ClassMap => {
+        const [value, setValue] = useState(defaultValue);
+        return { descriptionName, apiName, defaultValue, value, setValue };
+    }
+
+    const classMapList: ClassMap[] = [
+        useGenerateClassMap('Class Code', 'code', DEFAULT_CLASS_CODE),
+        useGenerateClassMap('Class Description', 'description', DEFAULT_CLASS_DESCRIPTION),
+        useGenerateClassMap('Class Education Level', 'educationLevel', DEFAULT_CLASS_EDUCATION_LEVEL),
+        useGenerateClassMap('Class Subject', 'subject', DEFAULT_CLASS_SUBJECT)
+    ];
 
     const clearNewClass = () => {
         setAddClass(false);
-        setNewClassCode('');
-        setNewClassDescription('');
-        setNewClassEducationLevel('');
-        setNewClassSubject('');
-    };
-    const applyLightTheme = () => {
-        const lineOptions: ChartOptions = {
-            plugins: {
-                legend: {
-                    labels: {
-                        color: '#495057'
-                    }
-                }
-            },
-            scales: {
-                x: {
-                    ticks: {
-                        color: '#495057'
-                    },
-                    grid: {
-                        color: '#ebedef'
-                    }
-                },
-                y: {
-                    ticks: {
-                        color: '#495057'
-                    },
-                    grid: {
-                        color: '#ebedef'
-                    }
-                }
-            }
-        };
-    };
-
-    const applyDarkTheme = () => {
-        const lineOptions = {
-            plugins: {
-                legend: {
-                    labels: {
-                        color: '#ebedef'
-                    }
-                }
-            },
-            scales: {
-                x: {
-                    ticks: {
-                        color: '#ebedef'
-                    },
-                    grid: {
-                        color: 'rgba(160, 167, 181, .3)'
-                    }
-                },
-                y: {
-                    ticks: {
-                        color: '#ebedef'
-                    },
-                    grid: {
-                        color: 'rgba(160, 167, 181, .3)'
-                    }
-                }
-            }
-        };
+        classMapList.forEach(({ setValue, defaultValue }) => setValue(defaultValue));
     };
 
     const saveClass = async () => {
-        const newClass: Class = {
-            code: newClassCode,
-            description: newClassDescription,
-            educationLevel: newClassEducationLevel,
-            subject: newClassSubject
-        };
-
-        await UserService.addClass("user-id", newClass)
+        await UserService.addClass(classMapList.reduce((result, { apiName, value }) => ({ ...result, [apiName]: value }), {}) as Class);
         clearNewClass();
     }
 
     const addClassFooter = (
         <div>
-            <Button label="Cancel" icon="pi pi-times" onClick={() => clearNewClass()} className="p-button-text" />
-            <Button label="Save" icon="pi pi-save" onClick={() => saveClass()} autoFocus />
+            <Button label="Cancel" icon="pi pi-times" onClick={clearNewClass} className="p-button-text" />
+            <Button label="Save" icon="pi pi-save" onClick={saveClass} autoFocus />
         </div>
     );
 
@@ -114,34 +64,15 @@ const Classes = () => {
         </div>
     );
 
-    useEffect(() => {
-        if (layoutConfig.colorScheme === 'light') {
-            applyLightTheme();
-        } else {
-            applyDarkTheme();
-        }
-    }, [layoutConfig.colorScheme]);
-
     return (
         <div className="grid">
             <div className="col-12 xl:col-6">
                 <div className="card">
                     <Fragment>
-                        <Button label="New" icon="pi pi-plus" onClick={(e) => setAddClass(true)} />
+                        <Button label="New" icon="pi pi-plus" onClick={() => setAddClass(true)} />
                     </Fragment>
-                    <Dialog
-                        header="Add Class"
-                        style={{ width: '50vw' }}
-                        visible={addClass}
-                        onHide={() => {
-                            addClass && clearNewClass();
-                        }}
-                        footer={addClassFooter}
-                    >
-                        {renderField('Class Code', newClassCode, (e) => setNewClassCode(e.target.value))}
-                        {renderField('Class Description', newClassDescription, (e) => setNewClassDescription(e.target.value))}
-                        {renderField('Class Education Level', newClassEducationLevel, (e) => setNewClassEducationLevel(e.target.value))}
-                        {renderField('Class Subject', newClassSubject, (e) => setNewClassSubject(e.target.value))}
+                    <Dialog header="Add Class" style={{ width: '50vw' }} visible={addClass} onHide={() => { addClass && clearNewClass(); }} footer={addClassFooter}>
+                        {classMapList.map(({ descriptionName, value, setValue }) => renderField(descriptionName, value, ({ target }) => setValue(target.value)))}
                     </Dialog>
                     <h5>Manage Classes</h5>
                 </div>
diff --git a/service/UserService.tsx b/service/UserService.tsx
index 5f0a45c..abcf3f4 100644
--- a/service/UserService.tsx
+++ b/service/UserService.tsx
@@ -1,14 +1,13 @@
-const userServiceUrl = process.env.NEXT_PUBLIC_QUEMISTRY_USER_URL || ''
-const saveUserServiceUrl =`${userServiceUrl}/v1/class`
+const classUrl = process.env.NEXT_PUBLIC_QUEMISTRY_CLASS_URL || ''
+const saveUserServiceUrl = `${classUrl}`
 
 export const UserService = {
-  async addClass(userId: string, data: Class) {
+  async addClass(data: Class) {
     console.log("calling saveClass ", saveUserServiceUrl);
     const res = await fetch(saveUserServiceUrl, {
       method: 'POST',
       headers: {
-        'Content-Type': 'application/json',
-        'X-USER-ID': userId
+        'Content-Type': 'application/json'
       },
       credentials: "include",
       body: JSON.stringify(data)