diff --git a/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js
new file mode 100644
index 000000000..71d3bdf1d
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .single-line-editor-wrapper {
+    padding: 0.15rem 0.4rem;
+    border: ${(props) => props.theme.sidebar.search.border};
+  }
+`;
+
+export default Wrapper;
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js
new file mode 100644
index 000000000..845dae273
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useDispatch } from 'react-redux';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { updateAuth } from 'providers/ReduxStore/slices/collections';
+import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+
+const BasicAuth = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const basicAuth = item.draft ? get(item, 'draft.request.auth.basic', {}) : get(item, 'request.auth.basic', {});
+
+  const handleRun = () => dispatch(sendRequest(item, collection.uid));
+  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+
+  const handleUsernameChange = (username) => {
+    dispatch(
+      updateAuth({
+        mode: 'basic',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          username: username,
+          password: basicAuth.password
+        }
+      })
+    );
+  };
+
+  const handlePasswordChange = (password) => {
+    dispatch(
+      updateAuth({
+        mode: 'basic',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          username: basicAuth.username,
+          password: password
+        }
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="mt-2 w-full">
+      <label className="block font-medium mb-2">Username</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={basicAuth.username || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleUsernameChange(val)}
+          onRun={handleRun}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Password</label>
+      <div className="single-line-editor-wrapper">
+        <SingleLineEditor
+          value={basicAuth.password || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handlePasswordChange(val)}
+          onRun={handleRun}
+          collection={collection}
+        />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default BasicAuth;
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js b/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js
index 90347dc5a..d839d6206 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js
@@ -1,13 +1,13 @@
-import React, { useState } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
-import { updateBearerToken } from 'providers/ReduxStore/slices/collections';
+import { updateAuth } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
-const BearerAuth = ({ onTokenChange, item, collection }) => {
+const BearerAuth = ({ item, collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
@@ -20,7 +20,8 @@ const BearerAuth = ({ onTokenChange, item, collection }) => {
 
   const handleTokenChange = (token) => {
     dispatch(
-      updateBearerToken({
+      updateAuth({
+        mode: 'bearer',
         collectionUid: collection.uid,
         itemUid: item.uid,
         content: {
@@ -32,9 +33,7 @@ const BearerAuth = ({ onTokenChange, item, collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label htmlFor="bearerToken" className="block font-medium mb-2">
-        Token
-      </label>
+      <label className="block font-medium mb-2">Token</label>
       <div className="single-line-editor-wrapper">
         <SingleLineEditor
           value={bearerToken}
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/index.js b/packages/bruno-app/src/components/RequestPane/Auth/index.js
index 1210b0251..f07b80f95 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import get from 'lodash/get';
 import AuthMode from './AuthMode';
 import BearerAuth from './BearerAuth';
+import BasicAuth from './BasicAuth';
 import StyledWrapper from './StyledWrapper';
 
 const Auth = ({ item, collection }) => {
@@ -10,7 +11,7 @@ const Auth = ({ item, collection }) => {
   const getAuthView = () => {
     switch (authMode) {
       case 'basic': {
-        return <div>Basic Auth</div>;
+        return <BasicAuth collection={collection} item={item} />;
       }
       case 'bearer': {
         return <BearerAuth collection={collection} item={item} />;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
index b015df0aa..b150ade8c 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
@@ -16,7 +16,7 @@ import CollectionItem from './CollectionItem';
 import RemoveCollection from './RemoveCollection';
 import CollectionProperties from './CollectionProperties';
 import { doesCollectionHaveItemsMatchingSearchText } from 'utils/collections/search';
-import { isItemAFolder, isItemARequest, transformCollectionToSaveToIdb } from 'utils/collections';
+import { isItemAFolder, isItemARequest, transformCollectionToSaveToExportAsFile } from 'utils/collections';
 import exportCollection from 'utils/collections/export';
 
 import RenameCollection from './RenameCollection';
@@ -69,7 +69,7 @@ const Collection = ({ collection, searchText }) => {
 
   const handleExportClick = () => {
     const collectionCopy = cloneDeep(collection);
-    exportCollection(transformCollectionToSaveToIdb(collectionCopy));
+    exportCollection(transformCollectionToSaveToExportAsFile(collectionCopy));
   };
 
   const [{ isOver }, drop] = useDrop({
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
index 84762aa54..2cb1bdea5 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
@@ -322,7 +322,7 @@ export const collectionsSlice = createSlice({
         }
       }
     },
-    updateBearerToken: (state, action) => {
+    updateAuth: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
 
       if (collection) {
@@ -334,10 +334,15 @@ export const collectionsSlice = createSlice({
           }
 
           item.draft.request.auth = item.draft.request.auth || {};
-          switch (item.draft.request.auth.mode) {
+          switch (action.payload.mode) {
             case 'bearer':
+              item.draft.request.auth.mode = 'bearer';
               item.draft.request.auth.bearer = action.payload.content;
               break;
+            case 'basic':
+              item.draft.request.auth.mode = 'basic';
+              item.draft.request.auth.basic = action.payload.content;
+              break;
           }
         }
       }
@@ -1208,7 +1213,7 @@ export const {
   collectionClicked,
   collectionFolderClicked,
   requestUrlChanged,
-  updateBearerToken,
+  updateAuth,
   addQueryParam,
   updateQueryParam,
   deleteQueryParam,
diff --git a/packages/bruno-app/src/utils/collections/index.js b/packages/bruno-app/src/utils/collections/index.js
index a2b63966b..bf0fe6879 100644
--- a/packages/bruno-app/src/utils/collections/index.js
+++ b/packages/bruno-app/src/utils/collections/index.js
@@ -207,7 +207,7 @@ export const getItemsToResequence = (parent, collection) => {
   return itemsToResequence;
 };
 
-export const transformCollectionToSaveToIdb = (collection, options = {}) => {
+export const transformCollectionToSaveToExportAsFile = (collection, options = {}) => {
   const copyHeaders = (headers) => {
     return map(headers, (header) => {
       return {
@@ -285,6 +285,16 @@ export const transformCollectionToSaveToIdb = (collection, options = {}) => {
               formUrlEncoded: copyFormUrlEncodedParams(si.draft.request.body.formUrlEncoded),
               multipartForm: copyMultipartFormParams(si.draft.request.body.multipartForm)
             },
+            auth: {
+              mode: get(si.draft.request, 'auth.mode', 'none'),
+              basic: {
+                username: get(si.draft.request, 'auth.basic.username', ''),
+                password: get(si.draft.request, 'auth.basic.password', '')
+              },
+              bearer: {
+                token: get(si.draft.request, 'auth.bearer.token', '')
+              }
+            },
             script: si.draft.request.script,
             vars: si.draft.request.vars,
             assertions: si.draft.request.assertions,
@@ -307,6 +317,16 @@ export const transformCollectionToSaveToIdb = (collection, options = {}) => {
               formUrlEncoded: copyFormUrlEncodedParams(si.request.body.formUrlEncoded),
               multipartForm: copyMultipartFormParams(si.request.body.multipartForm)
             },
+            auth: {
+              mode: get(si.request, 'auth.mode', 'none'),
+              basic: {
+                username: get(si.request, 'auth.basic.username', ''),
+                password: get(si.request, 'auth.basic.password', '')
+              },
+              bearer: {
+                token: get(si.request, 'auth.bearer.token', '')
+              }
+            },
             script: si.request.script,
             vars: si.request.vars,
             assertions: si.request.assertions,