Further UI Updates.

client/src/pages/bills/bills.page.component.jsx

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Checkbox, Input, Space, Table, Typography } from "antd";
+import { Button, Card, Checkbox, Input, Space, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -201,37 +201,39 @@ export function BillsListPage({
   };
 
   return (
-    <div>
+    <Card
+      title={t("bills.labels.bills")}
+      extra={
+        <Space wrap>
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
+          <Button
+            onClick={() => {
+              setBillEnterContext({
+                actions: { refetch: refetch },
+                context: {},
+              });
+            }}
+          >
+            {t("jobs.actions.postbills")}
+          </Button>
+          <div className="imex-table-header__search">
+            <Input.Search
+              placeholder={t("general.labels.search")}
+              onSearch={(value) => {
+                search.search = value;
+                history.push({ search: queryString.stringify(search) });
+              }}
+            />
+          </div>
+        </Space>
+      }
+    >
       <PartsOrderModalContainer />
-      <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
+
       <Table
         loading={loading}
-        title={() => (
-          <div className="imex-table-header">
-            <Button onClick={() => refetch()}>
-              <SyncOutlined />
-            </Button>
-            <Button
-              onClick={() => {
-                setBillEnterContext({
-                  actions: { refetch: refetch },
-                  context: {},
-                });
-              }}
-            >
-              {t("jobs.actions.postbills")}
-            </Button>
-            <div className="imex-table-header__search">
-              <Input.Search
-                placeholder={t("general.labels.search")}
-                onSearch={(value) => {
-                  search.search = value;
-                  history.push({ search: queryString.stringify(search) });
-                }}
-              />
-            </div>
-          </div>
-        )}
         scroll={{ x: "50%", y: "40rem" }}
         pagination={{
           position: "top",
@@ -244,7 +246,7 @@ export function BillsListPage({
         dataSource={data}
         onChange={handleTableChange}
       />
-    </div>
+    </Card>
   );
 }
 export default connect(null, mapDispatchToProps)(BillsListPage);