diff --git a/src/App.tsx b/src/App.tsx
index 78d22d5..67913c8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import { QueryClientProvider, QueryClient } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
-import { Todos, Header, BottomNavigation } from './components';
+import { Todos, Header, Footer } from './components';
 
 const queryClient = new QueryClient();
 
@@ -13,7 +13,7 @@ const App = (): JSX.Element => {
         <Todos />
         <ReactQueryDevtools />
       </QueryClientProvider>
-      <BottomNavigation />
+      <Footer />
     </div>
   );
 };
diff --git a/src/components/BottomNavigation/index.tsx b/src/components/BottomNavigation/index.tsx
index 72311f2..421dcbb 100644
--- a/src/components/BottomNavigation/index.tsx
+++ b/src/components/BottomNavigation/index.tsx
@@ -1,8 +1,8 @@
-import { ClipboardListIcon, ChartSquareBarIcon, AdjustmentsIcon } from '@heroicons/react/outline';
+import { AdjustmentsIcon, ChartSquareBarIcon, ClipboardListIcon } from '@heroicons/react/outline';
 
-const BottomNavigation = (): JSX.Element => {
+const BottomNavigation = ({ className }: { className?: string }): JSX.Element => {
   return (
-    <nav className="fixed inset-x-0 bottom-0 flex justify-between text-xs text-blue-900 bg-blue-100 md:hidden">
+    <nav className={`flex justify-between text-xs text-blue-900 bg-blue-100 md:hidden ${className ?? ''}`}>
       <button
         type="button"
         className="w-full p-3 text-center transition duration-300 hover:bg-blue-200 hover:text-blue-800"
diff --git a/src/components/CtaButton/index.tsx b/src/components/CtaButton/index.tsx
new file mode 100644
index 0000000..785d757
--- /dev/null
+++ b/src/components/CtaButton/index.tsx
@@ -0,0 +1,16 @@
+import { PlusIcon } from '@heroicons/react/outline';
+
+const CtaButton = ({ className }: { className?: string }): JSX.Element => {
+  return (
+    <button
+      type="button"
+      className={`text-white transition duration-200 ease-in bg-blue-500 rounded-full shadow w-14 h-14 hover:bg-blue-700 active:shadow-lg focus:outline-none ${
+        className ?? ''
+      }`}
+    >
+      <PlusIcon />
+    </button>
+  );
+};
+
+export { CtaButton };
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
new file mode 100644
index 0000000..414438e
--- /dev/null
+++ b/src/components/Footer/index.tsx
@@ -0,0 +1,13 @@
+import { BottomNavigation } from '../BottomNavigation';
+import { CtaButton } from '../CtaButton';
+
+const Footer = (): JSX.Element => {
+  return (
+    <>
+      <CtaButton className="fixed z-10 md:bottom-8 bottom-24 right-6" />
+      <BottomNavigation className="fixed inset-x-0 bottom-0" />
+    </>
+  );
+};
+
+export { Footer };
diff --git a/src/components/index.ts b/src/components/index.ts
index d3ea465..5c34c63 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,4 +1,3 @@
 export { Todos } from './Todos';
 export { Header } from './Header';
-export { BottomNavigation } from './BottomNavigation';
-export { SearchBox } from './SearchBox';
+export { Footer } from './Footer';