diff --git a/frontend/frontend/src/components/Home/LanguagesLayoutSection.js b/frontend/frontend/src/components/Home/LanguagesLayoutSection.js
new file mode 100644
index 00000000..28b40189
--- /dev/null
+++ b/frontend/frontend/src/components/Home/LanguagesLayoutSection.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Section from './Section';
+import { Input } from '../Generic';
+
+export const DEFAULT_OPTION = {
+  id: 1,
+  label: 'Normal',
+  disabled: false,
+  value: 'normal',
+};
+
+const LanguagesLayoutSection = ({ selectedOption, setSelectedOption }) => {
+  const options = [
+    DEFAULT_OPTION,
+    { id: 2, label: 'Compact', disabled: false, value: 'compact' },
+    { id: 3, label: 'Donut', disabled: false, value: 'donut' },
+    { id: 4, label: 'Vertical Donut', disabled: false, value: 'donut-vertical' },
+    { id: 5, label: 'Pie', disabled: false, value: 'pie' },
+  ];
+
+  return (
+    <Section title="Date Range">
+      <p>Select a card layout.</p>
+      <Input
+        options={options}
+        selectedOption={selectedOption || DEFAULT_OPTION}
+        setSelectedOption={setSelectedOption}
+      />
+    </Section>
+  );
+};
+
+LanguagesLayoutSection.propTypes = {
+  selectedOption: PropTypes.object.isRequired,
+  setSelectedOption: PropTypes.func.isRequired,
+};
+
+export default LanguagesLayoutSection;