diff --git a/src/Components/Document/DocumentListPage.js b/src/Components/Document/DocumentListPage.js
index a69114c..fafb9db 100644
--- a/src/Components/Document/DocumentListPage.js
+++ b/src/Components/Document/DocumentListPage.js
@@ -33,11 +33,10 @@ const DocumentListPage = ({ perPage }) => {
   const [page, setPage] = useState(1);
   const [order, setOrder] = useState("parentCaseName");
   const appUserId = group ? group.appUserId : null;
-
   const [isBusy, setIsBusy] = useState(false);
   const [selectedDocumentType, setSelectedDocumentType] = useState();
   const [showModal, setShowModal] = useState(false);
-  const [responseVerbosity, setResponseVerbosity] = useState("");
+  const [value, setValue] = useState([1, 2]);
   const apiUrl =
     process.env.NODE_ENV === "development"
       ? process.env.REACT_APP_API_DEV
@@ -152,10 +151,8 @@ const DocumentListPage = ({ perPage }) => {
     );
   }
 
-  const handleToggle = () => {
-    console.log(" <Toggle onClick={handleToggle} />");
-  };
-
+  const handleToggle = (val) => setValue(val);
+  console.log("value", value);
   function handleCancelDelete() {
     if (!isBusy) {
       setShowDeleteModal(false);
@@ -194,7 +191,7 @@ const DocumentListPage = ({ perPage }) => {
                     <div className="toggle-header"> Response Verbosity</div>
                     <div className="toggle-box">
                       <p className="select-billing-text">Min</p>
-                      <Toggle onClick={handleToggle} />
+                      <Toggle value={value} onClick={handleToggle} />
                       <p className="select-billing-text">Max</p>
                     </div>
                   </div>
diff --git a/src/pageElements/Toggle.js b/src/pageElements/Toggle.js
index 1f11c0f..c64a060 100644
--- a/src/pageElements/Toggle.js
+++ b/src/pageElements/Toggle.js
@@ -2,10 +2,16 @@ import ToggleButton from "react-bootstrap/ToggleButton";
 import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup";
 
 const Toggle = (props) => {
-  const { onClick } = props;
+  const { onClick, handleToggle, value } = props;
   return (
     <>
-      <ToggleButtonGroup type="radio" name="options" defaultValue={1}>
+      <ToggleButtonGroup
+        type="radio"
+        name="options"
+        value={value}
+        onChange={handleToggle}
+        defaultValue={1}
+      >
         <ToggleButton
           onClick={(e) => onClick(1)}
           id="tbg-radio-1"
diff --git a/src/styles/doclist-page.scss b/src/styles/doclist-page.scss
index f922e75..f49e45a 100644
--- a/src/styles/doclist-page.scss
+++ b/src/styles/doclist-page.scss
@@ -81,7 +81,7 @@
 .toggle-header {
   display: flex;
   justify-content: center;
-  padding-right: 16px;
+  padding-right: 12px;
   margin-top: -8px;
   height: 28px;
 }