diff --git a/src/components/common/FileListBox/index.tsx b/src/components/common/FileListBox/index.tsx
index 63e0640..b86b857 100644
--- a/src/components/common/FileListBox/index.tsx
+++ b/src/components/common/FileListBox/index.tsx
@@ -6,11 +6,17 @@ type FileListBoxProps = {
   filename: string;
   size: string;
   LastModified: any;
+  click: () => void;
 };
 
-export const FileListBox: React.FC<FileListBoxProps> = ({ filename, size, LastModified }) => (
-  <S.FileListBoxContainer>
-    파일이름: {filename} / 크기:{size} / 업로드날짜:{LastModified.getFullYear()}-
-    {LastModified.getMonth() + 1}-{LastModified.getDate()}
+export const FileListBox: React.FC<FileListBoxProps> = ({
+  filename,
+  size,
+  LastModified,
+  click,
+}) => (
+  <S.FileListBoxContainer onClick={click}>
+    파일이름: {filename} / 크기:{size} / 업로드날짜:{LastModified.year}-{LastModified.month}-
+    {LastModified.day}
   </S.FileListBoxContainer>
 );
diff --git a/src/pages/download/index.tsx b/src/pages/download/index.tsx
index 2d93319..f18640d 100644
--- a/src/pages/download/index.tsx
+++ b/src/pages/download/index.tsx
@@ -1,13 +1,48 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
 
 import { Button } from '../../components';
+import { RootState } from '../../state/reducers';
+import { getFileSize, getDate } from '../../utils';
 import * as S from './styled';
 
-export const DownloadPage: React.FC = () => (
-  <S.DownloadPageContainer>
-    <S.DownloadPageButtonSection>
-      <Button click={() => {}} bgColor="var(--color-button-secondary)" label="다운로드" />
-      <Button click={() => {}} bgColor="var(--color-button-secondary)" label="신고" />
-    </S.DownloadPageButtonSection>
-  </S.DownloadPageContainer>
-);
+export const DownloadPage: React.FC = () => {
+  const navigate = useNavigate();
+  const downloadFileProps: any = useSelector((state: RootState) => state.DownloadFileProps);
+  const { year, month, day } = getDate(downloadFileProps.LastModified);
+  useEffect(() => {
+    if (
+      downloadFileProps.Name === null ||
+      downloadFileProps.Size === null ||
+      downloadFileProps.LastModified === null
+    ) {
+      navigate(-1);
+    }
+  });
+  return (
+    <S.DownloadPageContainer>
+      <S.DonwloadFileBox>
+        파일이름:{downloadFileProps.Name} / 크기:{getFileSize(downloadFileProps.Size)} / 업로드된
+        날짜:
+        {year}-{month}-{day}
+      </S.DonwloadFileBox>
+      <S.DownloadPageButtonSection>
+        <a href={`https://tfb.minpeter.cf/dl/${downloadFileProps.Name}`}>
+          <Button click={() => {}} bgColor="var(--color-button-primary)" label="다운로드" />
+        </a>
+        <Button
+          click={() => {
+            toast.success('제작중!', {
+              autoClose: 1000,
+              position: toast.POSITION.BOTTOM_RIGHT,
+            });
+          }}
+          bgColor="var(--color-button-secondary)"
+          label="신고"
+        />
+      </S.DownloadPageButtonSection>
+    </S.DownloadPageContainer>
+  );
+};
diff --git a/src/pages/download/styled.ts b/src/pages/download/styled.ts
index b03408c..0e7cf2d 100644
--- a/src/pages/download/styled.ts
+++ b/src/pages/download/styled.ts
@@ -1,12 +1,25 @@
 import styled from '@emotion/styled';
 
 export const DownloadPageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
   width: 100%;
 `;
 
 export const DownloadPageButtonSection = styled.div`
+  display: flex;
   width: 100%;
-  min-width: 300px;
+  justify-content: center;
+  margin-top: 3rem;
+`;
+
+export const DonwloadFileBox = styled.div`
+  background-color: var(--color-backgorund-filelistbox);
+  color: var(--color-text-filelistbox);
+  border-radius: 10px;
+  padding: 1.2rem 1.2rem 1.2rem 1.2rem;
   display: flex;
-  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  font-size: 2.2rem;
 `;
diff --git a/src/pages/filelist/index.tsx b/src/pages/filelist/index.tsx
index b923d65..1dd8db8 100644
--- a/src/pages/filelist/index.tsx
+++ b/src/pages/filelist/index.tsx
@@ -1,13 +1,20 @@
 import axios from 'axios';
 import React, { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { bindActionCreators } from 'redux';
 
 import { FileListBox } from '../../components';
-import { getFileSize, getShortFileName } from '../../utils';
+import { actionCreators } from '../../state';
+import { getFileSize, getShortFileName, getDate } from '../../utils';
 import * as S from './styled';
 
 export const FileListPage: React.FC = () => {
+  const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
   const SkeletonUIRandomWidth = ['50', '55', '60', '65', '70', '75', '80'];
+  const dispatch = useDispatch();
+  const { SetDownloadFileProps } = bindActionCreators(actionCreators, dispatch);
   const [fileList, setFileList] = useState<any[]>();
   const getFileList = async () => {
     await axios({
@@ -15,10 +22,10 @@ export const FileListPage: React.FC = () => {
       url: 'https://tfb.minpeter.cf/list',
     })
       .then((res) => {
-        setFileList(res.data.list);
+        setFileList(res.data.list); //파일리스트 요소 갯수에 따른 핸들링 추가예정
         setTimeout(() => {
           setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요.
-        }, 2000);
+        }, 1500);
       })
       .catch((err) => {
         console.log(err);
@@ -37,7 +44,16 @@ export const FileListPage: React.FC = () => {
                 key={index}
                 filename={getShortFileName(item.Name)}
                 size={getFileSize(item.Size)}
-                LastModified={new Date(item.LastModified)}
+                LastModified={getDate(item.LastModified)}
+                click={() => {
+                  SetDownloadFileProps({
+                    Name: item.Name,
+                    Size: item.Size,
+                    LastModified: item.LastModified,
+                    //passowrd 유무 추가예정
+                  });
+                  navigate('/download');
+                }}
               />
             ))}
           </S.FileListPageContainer>
diff --git a/src/state/action-types/index.ts b/src/state/action-types/index.ts
index 020513b..8c14626 100644
--- a/src/state/action-types/index.ts
+++ b/src/state/action-types/index.ts
@@ -1,4 +1,5 @@
 export enum ActionType {
   SusccesFileProps = 'SusccesFileProps',
   DeleteFileName = 'DeleteFileName',
+  DownloadFileProps = 'DownloadFileProps',
 }
diff --git a/src/state/actions-creators/index.ts b/src/state/actions-creators/index.ts
index f816356..d34d7ee 100644
--- a/src/state/actions-creators/index.ts
+++ b/src/state/actions-creators/index.ts
@@ -16,3 +16,10 @@ export const SetDeleteFileName = (name: string) => (dispatch: Dispatch<Action>)
     name: name,
   });
 };
+
+export const SetDownloadFileProps = (props: any) => (dispatch: Dispatch<Action>) => {
+  dispatch({
+    type: ActionType.DownloadFileProps,
+    props: props,
+  });
+};
diff --git a/src/state/actions/index.ts b/src/state/actions/index.ts
index fe12175..4a29d08 100644
--- a/src/state/actions/index.ts
+++ b/src/state/actions/index.ts
@@ -10,4 +10,9 @@ interface DeleteFileProps {
   name: string;
 }
 
-export type Action = SusccesFileProps | DeleteFileProps;
+interface DownloadFileProps {
+  type: ActionType.DownloadFileProps;
+  props: any;
+}
+
+export type Action = SusccesFileProps | DeleteFileProps | DownloadFileProps;
diff --git a/src/state/reducers/DownloadFileProps.ts b/src/state/reducers/DownloadFileProps.ts
new file mode 100644
index 0000000..f0db2a4
--- /dev/null
+++ b/src/state/reducers/DownloadFileProps.ts
@@ -0,0 +1,16 @@
+import { ActionType } from '../action-types';
+import { Action } from '../actions';
+
+const reducer = (
+  state: any = { Name: null, Size: null, LastModified: null },
+  action: Action,
+): any => {
+  switch (action.type) {
+    case ActionType.DownloadFileProps:
+      return action.props;
+    default:
+      return state;
+  }
+};
+
+export default reducer;
diff --git a/src/state/reducers/index.ts b/src/state/reducers/index.ts
index 9bda831..c12a1f2 100644
--- a/src/state/reducers/index.ts
+++ b/src/state/reducers/index.ts
@@ -1,11 +1,13 @@
 import { combineReducers } from 'redux';
 
 import DeleteFileName from './DeleteFileName';
+import DownloadFileProps from './DownloadFileProps';
 import SuccessFileProps from './SuccessFileProps';
 
 const reducers = combineReducers({
   SuccessFileProps: SuccessFileProps,
   DeleteFileName: DeleteFileName,
+  DownloadFileProps: DownloadFileProps,
 });
 
 export default reducers;
diff --git a/src/utils/getDate.ts b/src/utils/getDate.ts
new file mode 100644
index 0000000..0f2091c
--- /dev/null
+++ b/src/utils/getDate.ts
@@ -0,0 +1,4 @@
+export const getDate = (date: string) => {
+  const NewDate = new Date(date);
+  return { year: NewDate.getFullYear(), month: NewDate.getMonth() + 1, day: NewDate.getDay() };
+};
diff --git a/src/utils/getShotFileName.ts b/src/utils/getShotFileName.ts
deleted file mode 100644
index 66bec22..0000000
--- a/src/utils/getShotFileName.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-const getFileFullName = (fileName: string) => {
-  var lastDot = fileName.lastIndexOf('.');
-  if (lastDot === -1) {
-    lastDot = fileName.length;
-  }
-  const fileFullName = fileName.substring(0, lastDot);
-  return fileFullName;
-};
-
-const getFileExtension = (fileName: string) => {
-  var lastDot = fileName.lastIndexOf('.');
-  const fileLength = fileName.length;
-  const fileExtension = fileName.substring(lastDot + 1, fileLength);
-  if (lastDot === -1) {
-    return '';
-  }
-  return '.' + fileExtension;
-};
-
-export const getShotFileName = (fileName: string) => {
-  const fileFullName = getFileFullName(fileName);
-  if (fileFullName.length >= 9) {
-    return fileFullName.substring(0, 10) + '(...)' + getFileExtension(fileName);
-  }
-  return fileName;
-};
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 412bd74..aa41e31 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,2 +1,3 @@
 export * from './getFileSize';
 export * from './getShortFileName';
+export * from './getDate';