diff --git a/frontend/src/components/settings/arrs/ArrCard.jsx b/frontend/src/components/settings/arrs/ArrCard.jsx
new file mode 100644
index 0000000..35e8d5d
--- /dev/null
+++ b/frontend/src/components/settings/arrs/ArrCard.jsx
@@ -0,0 +1,24 @@
+// ArrCard.jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ArrCard = ({title, icon: Icon, onClick}) => (
+    <div
+        className='bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm cursor-pointer hover:shadow-lg hover:border-blue-400 dark:hover:border-blue-500 transition-all'
+        onClick={onClick}>
+        <div className='flex flex-col items-center justify-center h-32'>
+            <Icon size={48} className='text-blue-500 mb-2' />
+            <h3 className='font-bold text-lg text-gray-800 dark:text-gray-200'>
+                {title}
+            </h3>
+        </div>
+    </div>
+);
+
+ArrCard.propTypes = {
+    title: PropTypes.string.isRequired,
+    icon: PropTypes.elementType.isRequired,
+    onClick: PropTypes.func.isRequired
+};
+
+export default ArrCard;
diff --git a/frontend/src/components/settings/arrs/ArrContainer.jsx b/frontend/src/components/settings/arrs/ArrContainer.jsx
new file mode 100644
index 0000000..6a7e33f
--- /dev/null
+++ b/frontend/src/components/settings/arrs/ArrContainer.jsx
@@ -0,0 +1,57 @@
+// ArrContainer.jsx
+import React, {useState} from 'react';
+import AddNewCard from '../../ui/AddNewCard';
+import ArrModal from './ArrModal';
+
+const ArrContainer = () => {
+    const [showModal, setShowModal] = useState(false);
+    const [editingArr, setEditingArr] = useState(null);
+
+    const handleAddArr = () => {
+        setEditingArr(null);
+        setShowModal(true);
+    };
+
+    const handleEditArr = arr => {
+        setEditingArr(arr);
+        setShowModal(true);
+    };
+
+    const handleCloseModal = () => {
+        setShowModal(false);
+        setEditingArr(null);
+    };
+
+    const handleSubmit = arrData => {
+        if (editingArr) {
+            console.log('Updating arr:', arrData);
+            // Implement your update logic here
+        } else {
+            console.log('Adding new arr:', arrData);
+            // Implement your add logic here
+        }
+        setShowModal(false);
+        setEditingArr(null);
+    };
+
+    return (
+        <>
+            <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4'>
+                <AddNewCard
+                    onAdd={handleAddArr}
+                    width='200px'
+                    height='200px'
+                    minHeight='200px'
+                />
+            </div>
+            <ArrModal
+                isOpen={showModal}
+                onClose={handleCloseModal}
+                onSubmit={handleSubmit}
+                editingArr={editingArr}
+            />
+        </>
+    );
+};
+
+export default ArrContainer;
diff --git a/frontend/src/components/settings/arrs/ArrModal.jsx b/frontend/src/components/settings/arrs/ArrModal.jsx
new file mode 100644
index 0000000..2b13587
--- /dev/null
+++ b/frontend/src/components/settings/arrs/ArrModal.jsx
@@ -0,0 +1,135 @@
+// ArrModal.js
+import React, {useState, useEffect} from 'react';
+import {Plus, TestTube, Loader, Save} from 'lucide-react';
+import Modal from '../../ui/Modal';
+
+const ArrModal = ({isOpen, onClose, onSubmit, editingArr}) => {
+    const [arrType, setArrType] = useState('');
+    const [arrName, setArrName] = useState('');
+    const [apiKey, setApiKey] = useState('');
+    const [isTestingConnection, setIsTestingConnection] = useState(false);
+
+    useEffect(() => {
+        if (editingArr) {
+            setArrType(editingArr.type);
+            setArrName(editingArr.name);
+            setApiKey(editingArr.apiKey);
+        } else {
+            setArrType('');
+            setArrName('');
+            setApiKey('');
+        }
+    }, [editingArr]);
+
+    const handleTestConnection = async () => {
+        setIsTestingConnection(true);
+        try {
+            const result = await testConnection(arrType, apiKey);
+            if (result.success) {
+                alert('Connection successful!');
+            } else {
+                alert('Connection failed: ' + result.error);
+            }
+        } catch (error) {
+            alert('An error occurred while testing the connection.');
+            console.error('Error testing connection:', error);
+        } finally {
+            setIsTestingConnection(false);
+        }
+    };
+
+    const handleSubmit = e => {
+        e.preventDefault();
+        onSubmit({type: arrType, name: arrName, apiKey});
+    };
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={onClose}
+            title={editingArr ? 'Edit Arr' : 'Add New Arr'}
+            size='md'>
+            <form onSubmit={handleSubmit} className='space-y-4'>
+                <div>
+                    <label
+                        htmlFor='arrType'
+                        className='block text-sm font-medium text-gray-700 dark:text-gray-300'>
+                        Arr Type
+                    </label>
+                    <select
+                        id='arrType'
+                        value={arrType}
+                        onChange={e => setArrType(e.target.value)}
+                        className='mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white'
+                        required>
+                        <option value=''>Select an arr type</option>
+                        <option value='radarr'>Radarr</option>
+                        <option value='sonarr'>Sonarr</option>
+                        <option value='custom'>Custom</option>
+                    </select>
+                </div>
+                <div>
+                    <label
+                        htmlFor='arrName'
+                        className='block text-sm font-medium text-gray-700 dark:text-gray-300'>
+                        Arr Name
+                    </label>
+                    <input
+                        type='text'
+                        id='arrName'
+                        value={arrName}
+                        onChange={e => setArrName(e.target.value)}
+                        className='mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white'
+                        required
+                    />
+                </div>
+                <div>
+                    <label
+                        htmlFor='apiKey'
+                        className='block text-sm font-medium text-gray-700 dark:text-gray-300'>
+                        API Key
+                    </label>
+                    <input
+                        type='text'
+                        id='apiKey'
+                        value={apiKey}
+                        onChange={e => setApiKey(e.target.value)}
+                        className='mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white'
+                        required
+                    />
+                </div>
+                <div className='flex justify-end space-x-2'>
+                    <button
+                        type='button'
+                        onClick={handleTestConnection}
+                        className='px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors duration-200 ease-in-out flex items-center'
+                        disabled={isTestingConnection || !arrType || !apiKey}>
+                        {isTestingConnection ? (
+                            <Loader size={16} className='animate-spin mr-2' />
+                        ) : (
+                            <TestTube size={16} className='mr-2' />
+                        )}
+                        Test Connection
+                    </button>
+                    <button
+                        type='submit'
+                        className='px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200 ease-in-out flex items-center'>
+                        {editingArr ? (
+                            <>
+                                <Save size={16} className='mr-2' />
+                                Update Arr
+                            </>
+                        ) : (
+                            <>
+                                <Plus size={16} className='mr-2' />
+                                Add Arr
+                            </>
+                        )}
+                    </button>
+                </div>
+            </form>
+        </Modal>
+    );
+};
+
+export default ArrModal;