diff --git a/com-dict-client/src/components/AddWord/index.js b/com-dict-client/src/components/AddWord/index.js
index 77dde09..ca3f71a 100644
--- a/com-dict-client/src/components/AddWord/index.js
+++ b/com-dict-client/src/components/AddWord/index.js
@@ -75,7 +75,7 @@ function WordForm() {
   const user = useSelector((state) => state.firebase.auth);
 
   const handleAddHeadTerm = () => {
-    if (category === "") {
+    if (category === "" || category == null) {
       return message.error("Please select a category");
     }
 
@@ -120,7 +120,9 @@ function WordForm() {
             <Form onFinish={onSubmit} style={{ paddingTop: "4vmin" }}>
               <Form.Item
                 label="Select the language"
-                rules={[{ required: true, message: "" }]}
+                rules={[
+                  { required: true, message: "Please select a language" },
+                ]}
               >
                 <Select
                   showSearch
@@ -135,8 +137,9 @@ function WordForm() {
                     ))}
                 </Select>
               </Form.Item>
+
               <Row>
-                <Col span={12}>
+                <Col xs={24} xl={8}>
                   <Form.Item
                     label="Head term"
                     rules={[{ required: true, message: "" }]}
@@ -156,10 +159,10 @@ function WordForm() {
                     </Select>
                   </Form.Item>
                 </Col>
-                <Col span={1}>
+                <Col xs={24} xl={2}>
                   <Button type="text">Or</Button>
                 </Col>
-                <Col span={6}>
+                <Col xs={24} xl={7}>
                   <Input
                     value={newHeadTerm}
                     onChange={(val) =>
@@ -168,7 +171,8 @@ function WordForm() {
                     placeholder="New head term"
                   />
                 </Col>
-                <Col span={5}>
+                <Col xs={24} xl={1}></Col>
+                <Col xs={24} xl={6}>
                   <Button
                     type="primary"
                     // size="large"
@@ -180,19 +184,24 @@ function WordForm() {
                   </Button>
                 </Col>
               </Row>
-
-              <Form.Item
-                name="other_language_term"
-                rules={[{ required: true, message: "" }]}
-              >
-                <Input
-                  onChange={(val) => setOtherLanguageTerm(val.target.value)}
-                  placeholder="Word in <selected langauge>"
-                />
-              </Form.Item>
-
+              <br />
+              <Row>
+                <Col xs={24} xl={24}>
+                  <Form.Item
+                    name="other_language_term"
+                    rules={[{ required: true, message: "Please inut a word" }]}
+                  >
+                    <Input
+                      onChange={(val) => setOtherLanguageTerm(val.target.value)}
+                      placeholder="Word in <selected langauge>"
+                    />
+                  </Form.Item>
+                </Col>
+              </Row>
               <Form.Item
-                // rules={[{ required: true, message: "" }]}
+                rules={[
+                  { required: true, message: "Please input a word class" },
+                ]}
                 name="classes"
                 label="Select the word class"
               >
@@ -201,7 +210,9 @@ function WordForm() {
 
               <Form.Item
                 name="other_laguage_def"
-                rules={[{ required: true, message: "" }]}
+                rules={[
+                  { required: true, message: "Please input the definition" },
+                ]}
               >
                 <Input
                   onChange={(val) => setMeaning(val.target.value)}
@@ -211,7 +222,13 @@ function WordForm() {
 
               <Form.Item
                 name="example"
-                rules={[{ required: true, message: "" }]}
+                rules={[
+                  {
+                    required: true,
+                    message:
+                      "Please input an example on using the word in a sentence",
+                  },
+                ]}
               >
                 <Input
                   onChange={(val) => setExample(val.target.value)}
@@ -219,7 +236,15 @@ function WordForm() {
                 />
               </Form.Item>
 
-              <Form.Item name="category">
+              <Form.Item
+                name="category"
+                rules={[
+                  {
+                    required: true,
+                    message: "Please select a category",
+                  },
+                ]}
+              >
                 <Select
                   showSearch
                   placeholder="Select the category"
diff --git a/com-dict-client/src/components/Categories/index.js b/com-dict-client/src/components/Categories/index.js
index 898ecf8..c2ea0e2 100644
--- a/com-dict-client/src/components/Categories/index.js
+++ b/com-dict-client/src/components/Categories/index.js
@@ -160,7 +160,6 @@ function CatView() {
           <img alt="1" style={{ maxWidth: "100%" }} src={food} />
         </Col>
 
-        <Col span={1}></Col>
         <Col span={17}>
           <Card
             style={{
@@ -189,6 +188,7 @@ function CatView() {
             </Row>
           </Card>
         </Col>
+        <Col span={1}></Col>
       </Row>
       <Row style={{ paddingTop: "2vmin" }}>
         <Col span={24}>
@@ -251,13 +251,14 @@ function CatView() {
       </Row>
       <Row>
         <Col span={1}></Col>
-        <Col span={6}>
+        <Col span={3}>
           <img
             alt="1"
             style={{ maxWidth: "100%", maxHeight: "auto" }}
             src={religion}
           />
         </Col>
+        <Col span={2}></Col>
         <Col span={17}>
           <Card
             borderd
@@ -287,6 +288,7 @@ function CatView() {
             </Row>
           </Card>
         </Col>
+        <Col span={1}></Col>
       </Row>
 
       <Row style={{ paddingTop: "2vmin" }}>
@@ -331,9 +333,10 @@ function CatView() {
             </Row>
           </Card>
         </Col>
-        <Col span={6}>
+        <Col span={5}>
           <img alt="1" style={{ maxWidth: "100%" }} src={music} />
         </Col>
+        <Col span={1}></Col>
       </Row>
 
       <Row>
@@ -350,14 +353,14 @@ function CatView() {
       </Row>
       <Row>
         <Col span={1}></Col>
-        <Col span={6}>
+        <Col span={4}>
           <img
             alt="1"
             style={{ maxWidth: "100%", maxHeight: "auto" }}
             src={college}
           />
         </Col>
-
+        <Col span={1}></Col>
         <Col span={17}>
           <Card
             borderd
@@ -387,6 +390,7 @@ function CatView() {
             </Row>
           </Card>
         </Col>
+        <Col span={1}></Col>
       </Row>
     </>
   );