diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
new file mode 100644
index 0000000..0385547
--- /dev/null
+++ b/components/Footer/Footer.tsx
@@ -0,0 +1,66 @@
+import React, { ReactElement, useContext, useMemo } from 'react';
+import styled from '@emotion/styled';
+import MemberContext from 'components/MemberProvider/MemberContext';
+import Icon from 'components/Icon';
+import UserAvatar from 'components/UserAvatar';
+import { useRouter } from 'next/router';
+import { IconTypes } from 'components/Icon/Icon';
+import Link from 'next/link';
+
+const TAB_LIST = [
+ { name: 'home', path: '/' },
+ { name: 'explore', path: '/explore' },
+ { name: 'newPost', path: '/newPost' },
+ { name: 'activity', path: '/accounts/activity' },
+];
+
+function Footer(): ReactElement {
+ const { member } = useContext(MemberContext);
+ const { pathname } = useRouter();
+ const tabList = useMemo(
+ () => TAB_LIST.map(({ name, path }) => ({ name: path === pathname ? `${name}Filled` : name, path })),
+ [pathname],
+ );
+ return (
+
+ );
+}
+
+export default Footer;
+
+const Nav = styled.nav`
+ height: 44px;
+ background-color: white;
+ display: flex;
+`;
+
+const Tab = styled.a`
+ all: unset;
+ cursor: pointer;
+ height: 100%;
+ flex: 1 1 auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`;
+
+const Button = Tab.withComponent('button');
diff --git a/components/Footer/index.ts b/components/Footer/index.ts
new file mode 100644
index 0000000..dc67484
--- /dev/null
+++ b/components/Footer/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Footer';
+export * from './Footer';
diff --git a/components/Icon/svg/activity-filled.svg b/components/Icon/svg/activity-filled.svg
new file mode 100644
index 0000000..e58cbbc
--- /dev/null
+++ b/components/Icon/svg/activity-filled.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/components/Icon/svg/activity.svg b/components/Icon/svg/activity.svg
index 62a3fe5..7388873 100644
--- a/components/Icon/svg/activity.svg
+++ b/components/Icon/svg/activity.svg
@@ -1 +1,3 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/components/Icon/svg/explore-filled.svg b/components/Icon/svg/explore-filled.svg
new file mode 100644
index 0000000..2c38528
--- /dev/null
+++ b/components/Icon/svg/explore-filled.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/components/Icon/svg/search.svg b/components/Icon/svg/explore.svg
similarity index 100%
rename from components/Icon/svg/search.svg
rename to components/Icon/svg/explore.svg
diff --git a/components/Icon/svg/home-filled.svg b/components/Icon/svg/home-filled.svg
new file mode 100644
index 0000000..a793e2d
--- /dev/null
+++ b/components/Icon/svg/home-filled.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/components/Icon/svg/home.svg b/components/Icon/svg/home.svg
index a793e2d..0069110 100644
--- a/components/Icon/svg/home.svg
+++ b/components/Icon/svg/home.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/components/Icon/svg/index.ts b/components/Icon/svg/index.ts
index f118bc8..b6cd228 100644
--- a/components/Icon/svg/index.ts
+++ b/components/Icon/svg/index.ts
@@ -1,10 +1,13 @@
export { ReactComponent as menu } from './menu.svg';
export { ReactComponent as home } from './home.svg';
+export { ReactComponent as homeFilled } from './home-filled.svg';
export { ReactComponent as activity } from './activity.svg';
-export { ReactComponent as search } from './search.svg';
+export { ReactComponent as activityFilled } from './activity-filled.svg';
+export { ReactComponent as explore } from './explore.svg';
+export { ReactComponent as exploreFilled } from './explore-filled.svg';
export { ReactComponent as favorite } from './favorite.svg';
export { ReactComponent as comment } from './comment.svg';
export { ReactComponent as share } from './share.svg';
export { ReactComponent as bookmark } from './bookmark.svg';
-export { ReactComponent as newpost } from './newpost.svg';
+export { ReactComponent as newPost } from './newpost.svg';
export { ReactComponent as back } from './back.svg';
diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
new file mode 100644
index 0000000..46fa37d
--- /dev/null
+++ b/components/Layout/Layout.tsx
@@ -0,0 +1,30 @@
+import React, { ReactElement, ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+export type LayoutProps = {
+ header: ReactNode;
+ footer: ReactNode;
+ children: ReactElement;
+};
+
+function Layout({ header, footer, children }: LayoutProps): ReactElement {
+ return (
+