diff --git a/src/actions/dataset.js b/src/actions/dataset.js
index 97297d0..6894e55 100644
--- a/src/actions/dataset.js
+++ b/src/actions/dataset.js
@@ -69,7 +69,7 @@ export function receiveDatasets(type, json) {
 	};
 }
 
-export function fetchDatasets(when, date, limit = "5") {
+export function fetchDatasets(when, date, limit = 5) {
 	let url = `${config.hostname}/clowder/api/datasets?superAdmin=true&limit=${limit}`;
 	if (date) url = `${url}&date=${date}`;
 	if (when) url = `${url}&when=${when}`;
diff --git a/src/actions/file.js b/src/actions/file.js
index f3efef6..62bf995 100644
--- a/src/actions/file.js
+++ b/src/actions/file.js
@@ -3,7 +3,8 @@ import {getHeader} from "../utils/common";
 
 
 export const RECEIVE_FILE_METADATA = "RECEIVE_FILE_METADATA";
-export function receiveFileMetadata(type, json){
+
+export function receiveFileMetadata(type, json) {
 	return (dispatch) => {
 		dispatch({
 			type: type,
@@ -12,6 +13,7 @@ export function receiveFileMetadata(type, json){
 		});
 	};
 }
+
 export function fetchFileMetadata(id) {
 	let url = `${config.hostname}/clowder/api/files/${id}/metadata?superAdmin=true`;
 	return (dispatch) => {
diff --git a/src/app.config.js b/src/app.config.ts
similarity index 60%
rename from src/app.config.js
rename to src/app.config.ts
index 0c4e97f..1123b00 100644
--- a/src/app.config.js
+++ b/src/app.config.ts
@@ -1,10 +1,16 @@
-let config = {};
+interface Config{
+	hostname: string;
+	apikey: string;
+}
+
+let config:Config = <Config>{};
+
 let hostname = process.env.CLOWDER_REMOTE_HOSTNAME || "";
 
 // TODO when add auth piece remove this env
 let apikey = process.env.APIKEY;
 
 config["hostname"] = hostname;
-config["apikey"] = apikey;
+config["apikey"] = apikey ?? "";
 
 export default config;
diff --git a/src/components/Dashbard.jsx b/src/components/Dashbard.tsx
similarity index 93%
rename from src/components/Dashbard.jsx
rename to src/components/Dashbard.tsx
index 90061f3..9a24b61 100644
--- a/src/components/Dashbard.jsx
+++ b/src/components/Dashbard.tsx
@@ -7,16 +7,16 @@ import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
 import StarBorderIcon from "@material-ui/icons/StarBorder";
 import CloudDownloadOutlinedIcon from "@material-ui/icons/CloudDownloadOutlined";
 
-import CreateDataset from "./childComponents/CreateDataset";
+import CreateDataset from "./datasets/CreateDataset";
 import {downloadDataset} from "../utils/dataset";
 import {useDispatch, useSelector} from "react-redux";
 
 import {deleteDataset as deleteDatasetAction, fetchDatasets} from "../actions/dataset";
 import {downloadThumbnail} from "../utils/thumbnail";
-import TopBar from "./childComponents/TopBar";
-import Breadcrumbs from "./childComponents/BreadCrumb";
+import TopBar from "./navigation/TopBar";
+import {BreadCrumb} from "./navigation/BreadCrumb";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
 	appBar: {
 		background: "#FFFFFF",
 		boxShadow: "none",
@@ -63,18 +63,18 @@ const useStyles = makeStyles((theme) => ({
 	}
 }));
 
-export default function Dashboard(props) {
+export default function Dashboard() {
 	const classes = useStyles();
 
 	const dispatch = useDispatch();
-	const deleteDataset = (datasetId) => dispatch(deleteDatasetAction(datasetId));
-	const listDatasets = (when, date, limit) => dispatch(fetchDatasets(when, date, limit));
+	const deleteDataset = (datasetId:string) => dispatch(deleteDatasetAction(datasetId));
+	const listDatasets = (when:string|null, date:string|null, limit:number|undefined) => dispatch(fetchDatasets(when, date, limit));
 
 	const datasets = useSelector((state) => state.dataset.datasets);
 
 	const [lastDataset, setLastDataset] = useState([]);
 	const [firstDataset, setFirstDataset] = useState([]);
-	const [limit, setLimit] = useState(5);
+	const [limit, _] = useState(5);
 	const [selectedTabIndex, setSelectedTabIndex] = useState(0);
 	const [open, setOpen] = React.useState(false);
 	const [datasetThumbnailList, setDatasetThumbnailList] = useState([]);
@@ -116,7 +116,7 @@ export default function Dashboard(props) {
 		if (date) listDatasets("a", date.toISOString(), limit);
 	}
 
-	const handleTabChange = (event, newTabIndex) => {
+	const handleTabChange = (event, newTabIndex:number) => {
 		setSelectedTabIndex(newTabIndex);
 	};
 
@@ -131,7 +131,7 @@ export default function Dashboard(props) {
 		<>
 			<TopBar/>
 			<div className="outer-container">
-				<Breadcrumbs paths={paths}/>
+				<BreadCrumb paths={paths}/>
 				<div className="inner-container">
 						<Grid container spacing={4}>
 							<Grid item lg={8} xl={8} md={8} sm={8} xs={12}>
@@ -258,7 +258,7 @@ function TabPanel(props) {
 	);
 }
 
-function a11yProps(index) {
+function a11yProps(index:number) {
 	return {
 		id: `dashboard-tab-${index}`,
 		"aria-controls": `dashboard-tabpanel-${index}`,
diff --git a/src/components/childComponents/ActionCard.jsx b/src/components/childComponents/ActionCard.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/childComponents/BreadCrumb.jsx b/src/components/childComponents/BreadCrumb.jsx
deleted file mode 100644
index 1c1e504..0000000
--- a/src/components/childComponents/BreadCrumb.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import MuiBreadcrumbs from "@mui/material/Breadcrumbs";
-import {Button} from "@mui/material";
-import {makeStyles} from "@material-ui/core/styles";
-import {useNavigate} from "react-router";
-
-const useStyles = makeStyles((theme) => ({
-	breadCrumb: {
-		padding: "28px"
-	},
-	breadCrumbText: {
-		fontStyle: "normal",
-		fontWeight: "600",
-		fontSize: "24px",
-		color: "#343A40"
-	},
-	breadCrumbLink: {
-		fontStyle: "normal",
-		fontWeight: "600",
-		fontSize: "24px",
-		color: "#6C757D",
-	}
-}));
-
-export default function Breadcrumbs(props) {
-	const classes = useStyles();
-	const history = useNavigate();
-
-	const {paths} = props;
-	return (
-		<div>
-			<MuiBreadcrumbs aria-label="breadcrumb">
-				{
-					paths.map((path, index) => {
-						if (index !== paths.length -1){
-							return (<Button key={index} onClick={() => history(path["url"])}>{path["name"]}
-							</Button>);
-						}
-						else{
-							return (<Button disabled color="primary" key={index}>{path["name"]}</Button>);
-						}
-					})
-				}
-			</MuiBreadcrumbs>
-		</div>
-	);
-}
diff --git a/src/components/childComponents/Followers.jsx b/src/components/childComponents/Followers.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/childComponents/Following.jsx b/src/components/childComponents/Following.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/childComponents/MySelections.jsx b/src/components/childComponents/MySelections.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/childComponents/UserInfoCard.jsx b/src/components/childComponents/UserInfoCard.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/childComponents/CreateDataset.jsx b/src/components/datasets/CreateDataset.tsx
similarity index 56%
rename from src/components/childComponents/CreateDataset.jsx
rename to src/components/datasets/CreateDataset.tsx
index 26c5309..791d6a6 100644
--- a/src/components/childComponents/CreateDataset.jsx
+++ b/src/components/datasets/CreateDataset.tsx
@@ -1,26 +1,29 @@
 import React, {useState} from "react";
 
-import {Box, Button, Container} from "@material-ui/core";
-
-import {makeStyles} from "@material-ui/core/styles";
+import {Box, Container} from "@material-ui/core";
 
 import Form from "@rjsf/material-ui";
 import datasetSchema from "../../schema/datasetSchema.json";
 import {createDataset} from "../../utils/dataset";
 import LoadingOverlay from "react-loading-overlay-ts";
 import {useNavigate} from "react-router";
+import {FormProps} from "@rjsf/core";
+import {ClowderButton} from "../styledComponents/ClowderButton";
+
 
-const useStyles = makeStyles();
+type Props = {
+	setOpen: any
+}
 
-export default function CreateDataset(props) {
-	const {setOpen, ...other} = props;
+export default function CreateDataset(props: Props) {
+	const {setOpen} = props;
 
 	const history = useNavigate();
 
-	const [disabled, setDisabled] = useState(true);
+	// const [disabled, setDisabled] = useState(true);
 	const [loading, setLoading] = useState(false);
 
-	const onSave = async (formData) => {
+	const onSave = async (formData:FormData) => {
 		setLoading(true);
 		const response = await createDataset(formData);
 
@@ -40,10 +43,10 @@ export default function CreateDataset(props) {
 				spinner
 				text="Saving..."
 			>
-				<Form schema={datasetSchema["schema"]} uiSchema={datasetSchema["uiSchema"]} // widgets={widgets}
-					  onSubmit={({formData}, e) => {onSave(formData);}}>
+				<Form schema={datasetSchema["schema"] as FormProps<any>["schema"]} uiSchema={datasetSchema["uiSchema"]} // widgets={widgets}
+					  onSubmit={({formData}, _) => {onSave(formData);}}>
 					<Box className="inputGroup">
-						<Button variant="contained" type="submit" className="form-button-block">Create</Button>
+						<ClowderButton variant="contained" type="submit" className="form-button-block">Create</ClowderButton>
 					</Box>
 				</Form>
 			</LoadingOverlay>
diff --git a/src/components/Dataset.jsx b/src/components/datasets/Dataset.tsx
similarity index 91%
rename from src/components/Dataset.jsx
rename to src/components/datasets/Dataset.tsx
index 2b1e0ec..670365a 100644
--- a/src/components/Dataset.jsx
+++ b/src/components/datasets/Dataset.tsx
@@ -16,20 +16,20 @@ import {
 } from "@material-ui/core";
 import DescriptionIcon from "@material-ui/icons/Description";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
-import UploadFile from "./childComponents/UploadFile";
+import UploadFile from "../files/UploadFile";
 import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
 import StarBorderIcon from "@material-ui/icons/StarBorder";
 import CloudDownloadOutlinedIcon from "@material-ui/icons/CloudDownloadOutlined";
-import {downloadDataset} from "../utils/dataset";
-import {downloadFile, fetchFileMetadata} from "../utils/file";
+import {downloadDataset} from "../../utils/dataset";
+import {downloadFile, fetchFileMetadata} from "../../utils/file";
 import {useDispatch, useSelector} from "react-redux";
-import {deleteFile as deleteFileAction} from "../actions/file";
-import {deleteDataset as deleteDatasetAction, fetchDatasetAbout, fetchFilesInDataset} from "../actions/dataset";
+import {deleteFile as deleteFileAction} from "../../actions/file";
+import {deleteDataset as deleteDatasetAction, fetchDatasetAbout, fetchFilesInDataset} from "../../actions/dataset";
 import {useNavigate, useParams} from "react-router";
-import {downloadThumbnail} from "../utils/thumbnail";
+import {downloadThumbnail} from "../../utils/thumbnail";
 import {Link as RouterLink} from "react-router-dom";
-import TopBar from "./childComponents/TopBar";
-import Breadcrumbs from "./childComponents/BreadCrumb";
+import TopBar from "../navigation/TopBar";
+import {BreadCrumb} from "../navigation/BreadCrumb";
 
 const useStyles = makeStyles((theme) => ({
 	appBar: {
@@ -103,10 +103,10 @@ export default function Dataset() {
 	const {datasetId} = useParams();
 
 	const dispatch = useDispatch();
-	const listFilesInDataset = (datasetId) => dispatch(fetchFilesInDataset(datasetId));
-	const listDatasetAbout = (datasetId) => dispatch(fetchDatasetAbout(datasetId));
-	const deleteFile = (fileId) => dispatch(deleteFileAction(fileId));
-	const deleteDataset = (datasetId) => dispatch(deleteDatasetAction(datasetId));
+	const listFilesInDataset = (datasetId:string|undefined) => dispatch(fetchFilesInDataset(datasetId));
+	const listDatasetAbout = (datasetId:string|undefined) => dispatch(fetchDatasetAbout(datasetId));
+	const deleteFile = (fileId:string|undefined) => dispatch(deleteFileAction(fileId));
+	const deleteDataset = (datasetId:string|undefined|null) => dispatch(deleteDatasetAction(datasetId));
 
 	const filesInDataset = useSelector((state) => state.dataset.files);
 	const datasetAbout = useSelector((state) => state.dataset.about);
@@ -142,11 +142,11 @@ export default function Dataset() {
 		})();
 	}, [filesInDataset])
 
-	const handleTabChange = (event, newTabIndex) => {
+	const handleTabChange = (_event: any, newTabIndex:number) => {
 		setSelectedTabIndex(newTabIndex);
 	};
 
-	const handleOptionClick = (event) => {
+	const handleOptionClick = (event: { currentTarget: React.SetStateAction<null>; }) => {
 		setAnchorEl(event.currentTarget);
 	};
 
@@ -169,7 +169,7 @@ export default function Dataset() {
 		<>
 			<TopBar/>
 			<div className="outer-container">
-				<Breadcrumbs paths={paths}/>
+				<BreadCrumb paths={paths}/>
 				<div className="inner-container">
 					<Grid container spacing={4}>
 						<Grid item lg={8} xl={8} md={8} sm={8} xs={12}>
@@ -332,7 +332,7 @@ export default function Dataset() {
 	);
 }
 
-function TabPanel(props) {
+function TabPanel(props:any) {
 	const {children, value, index, ...other} = props;
 
 	return (
@@ -352,7 +352,7 @@ function TabPanel(props) {
 	);
 }
 
-function a11yProps(index) {
+function a11yProps(index:number) {
 	return {
 		id: `dataset-tab-${index}`,
 		"aria-controls": `dataset-tabpanel-${index}`,
diff --git a/src/components/File.jsx b/src/components/files/File.tsx
similarity index 89%
rename from src/components/File.jsx
rename to src/components/files/File.tsx
index 052a90e..99dc523 100644
--- a/src/components/File.jsx
+++ b/src/components/files/File.tsx
@@ -1,18 +1,18 @@
 import React, {useEffect, useState} from "react";
-import config from "../app.config";
+import config from "../../app.config";
 import {AppBar, Box, Grid, Tab, Tabs, Typography} from "@material-ui/core"
 import {makeStyles} from "@material-ui/core/styles";
-import Audio from "./previewers/Audio";
-import Video from "./previewers/Video";
-import {downloadResource} from "../utils/common";
-import Thumbnail from "./previewers/Thumbnail";
-import Html from "./previewers/Html";
+import Audio from "../previewers/Audio";
+import Video from "../previewers/Video";
+import {downloadResource} from "../../utils/common";
+import Thumbnail from "../previewers/Thumbnail";
+import Html from "../previewers/Html";
 import {useDispatch, useSelector} from "react-redux";
 import {useParams} from "react-router";
-import {fetchFileMetadata, fetchFileMetadataJsonld, fetchFilePreviews} from "../actions/file";
-import TopBar from "./childComponents/TopBar";
-import Breadcrumbs from "./childComponents/BreadCrumb";
-import {fetchDatasetAbout} from "../actions/dataset";
+import {fetchFileMetadata, fetchFileMetadataJsonld, fetchFilePreviews} from "../../actions/file";
+import TopBar from "../navigation/TopBar";
+import {BreadCrumb} from "../navigation/BreadCrumb";
+import {fetchDatasetAbout} from "../../actions/dataset";
 import {useSearchParams} from "react-router-dom";
 
 const useStyles = makeStyles(() => ({
@@ -35,14 +35,14 @@ export default function File() {
 	// path parameter
 	const {fileId} = useParams();
 	// search parameters
-	let [searchParams, setSearchParams] = useSearchParams();
+	let [searchParams, _] = useSearchParams();
 	const datasetId = searchParams.get("datasetId");
 
 	const dispatch = useDispatch();
-	const listFileMetadata = (fileId) => dispatch((fetchFileMetadata(fileId)));
-	const listFileMetadataJsonld = (fileId) => dispatch((fetchFileMetadataJsonld(fileId)));
-	const listFilePreviews = (fileId) => dispatch((fetchFilePreviews(fileId)));
-	const listDatasetAbout = (datasetId) => dispatch(fetchDatasetAbout(datasetId));
+	const listFileMetadata = (fileId:string|undefined) => dispatch((fetchFileMetadata(fileId)));
+	const listFileMetadataJsonld = (fileId:string|undefined) => dispatch((fetchFileMetadataJsonld(fileId)));
+	const listFilePreviews = (fileId:string|undefined) => dispatch((fetchFilePreviews(fileId)));
+	const listDatasetAbout = (datasetId:string|undefined) => dispatch(fetchDatasetAbout(datasetId));
 
 	const fileMetadata = useSelector((state) => state.file.metadata);
 	const fileMetadataJsonld = useSelector((state) => state.file.metadataJsonld);
@@ -113,7 +113,7 @@ export default function File() {
 		<>
 			<TopBar/>
 			<div className="outer-container">
-				<Breadcrumbs paths={paths}/>
+				<BreadCrumb paths={paths}/>
 				<div className="inner-container">
 					<Grid container spacing={4}>
 						<Grid item lg={8} sm={8} xl={8} xs={12}>
diff --git a/src/components/childComponents/UploadFile.jsx b/src/components/files/UploadFile.tsx
similarity index 66%
rename from src/components/childComponents/UploadFile.jsx
rename to src/components/files/UploadFile.tsx
index 4257723..77242aa 100644
--- a/src/components/childComponents/UploadFile.jsx
+++ b/src/components/files/UploadFile.tsx
@@ -1,21 +1,24 @@
 import React, {useState} from "react";
 
-import {Box, Button, Container} from "@material-ui/core";
+import {Box, Container} from "@material-ui/core";
 
 import LoadingOverlay from "react-loading-overlay-ts";
-import {makeStyles} from "@material-ui/core/styles";
 
 import Form from "@rjsf/material-ui";
 
 import {uploadFile} from "../../utils/file.js";
 import fileSchema from "../../schema/fileSchema.json";
 import {useNavigate} from "react-router";
+import {FormProps} from "@rjsf/core";
+import {ClowderButton} from "../styledComponents/ClowderButton";
 
-const useStyles = makeStyles();
+type Props = {
+	selectedDatasetId: string,
+	setOpen: any
+}
 
-export default function UploadFile(props) {
+export default function UploadFile(props:Props) {
 	const {selectedDatasetId, setOpen} = props;
-	const classes = useStyles();
 
 	// use history hook to redirect/navigate between routes
 	const history = useNavigate();
@@ -23,7 +26,7 @@ export default function UploadFile(props) {
 	const [loading, setLoading] = useState(false);
 
 
-	const onSave = async (formData) => {
+	const onSave = async (formData:FormData) => {
 		setLoading(true);
 		const response = await uploadFile(formData, selectedDatasetId);
 		setLoading(false);
@@ -44,10 +47,10 @@ export default function UploadFile(props) {
 				spinner
 				text="Saving..."
 			>
-			<Form schema={fileSchema["schema"]} uiSchema={fileSchema["uiSchema"]}
-				  onSubmit={({formData}, e) => {onSave(formData);}}>
+			<Form schema={fileSchema["schema"] as FormProps<any>["schema"]} uiSchema={fileSchema["uiSchema"]}
+				  onSubmit={({formData}, _) => {onSave(formData);}}>
 				<Box className="inputGroup">
-					<Button variant="contained" type="submit" className="form-button-block">Upload</Button>
+					<ClowderButton variant="contained" type="submit" className="form-button-block">Upload</ClowderButton>
 				</Box>
 			</Form>
 			</LoadingOverlay>
diff --git a/src/components/navigation/BreadCrumb.tsx b/src/components/navigation/BreadCrumb.tsx
new file mode 100644
index 0000000..3c4c3d7
--- /dev/null
+++ b/src/components/navigation/BreadCrumb.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import MuiBreadcrumbs from "@mui/material/Breadcrumbs";
+import {Button} from "@mui/material";
+import {useNavigate} from "react-router-dom";
+
+type BreadCrumbProps = {
+	paths: any
+}
+export const BreadCrumb: React.FC<BreadCrumbProps> = (props:BreadCrumbProps) => {
+	const { paths } = props;
+	const history = useNavigate();
+
+	return (
+		<MuiBreadcrumbs aria-label="breadcrumb">
+			{
+				paths.map((path:any, index:number) => {
+					if (index !== paths.length -1){
+						return (<Button key={index} onClick={() => history(path["url"])}>{path["name"]}
+						</Button>);
+					}
+					else{
+						return (<Button disabled color="primary" key={index}>{path["name"]}</Button>);
+					}
+				})
+			}
+		</MuiBreadcrumbs>
+	);
+};
diff --git a/src/components/childComponents/TopBar.jsx b/src/components/navigation/TopBar.tsx
similarity index 84%
rename from src/components/childComponents/TopBar.jsx
rename to src/components/navigation/TopBar.tsx
index eab8609..ab0ce69 100644
--- a/src/components/childComponents/TopBar.jsx
+++ b/src/components/navigation/TopBar.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import {makeStyles} from '@material-ui/core/styles';
-import {AppBar, Link, Toolbar, Typography,} from '@material-ui/core';
+import React from "react";
+import {makeStyles} from "@material-ui/core/styles";
+import {AppBar, Link, Toolbar, Typography,} from "@material-ui/core";
 
 const useStyles = makeStyles((theme) => ({
 	root: {
@@ -39,7 +39,7 @@ export default function TopBar() {
 		<div className={classes.root}>
 			<AppBar position="static" className={classes.appBar}>
 				<Toolbar className={classes.toolBar}>
-					<img className={classes.logo} src="../../public/clowder-logo-sm.svg" alt="clowder-logo-sm"/>
+					<img src="../../public/clowder-logo-sm.svg" alt="clowder-logo-sm"/>
 					<Typography className={classes.toolBarItem}>
 						<Link href="/" target="_blank" className={classes.toolBarlink}>
 							Home</Link>
diff --git a/src/components/previewers/Audio.jsx b/src/components/previewers/Audio.jsx
deleted file mode 100644
index 19b052a..0000000
--- a/src/components/previewers/Audio.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from "react";
-
-export default function Audio(props) {
-	const {fileId, audioSrc, ...other} = props;
-	return <audio controls><source id={fileId} src={audioSrc} /></audio>
-}
diff --git a/src/components/previewers/Audio.tsx b/src/components/previewers/Audio.tsx
new file mode 100644
index 0000000..0dbf171
--- /dev/null
+++ b/src/components/previewers/Audio.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+type Props = {
+	fileId: string,
+	audioSrc: string
+}
+
+export default function Audio(props: Props) {
+	const {fileId, audioSrc} = props;
+	return <audio controls><source id={fileId} src={audioSrc} /></audio>
+}
diff --git a/src/components/previewers/Html.jsx b/src/components/previewers/Html.jsx
deleted file mode 100644
index 92190bc..0000000
--- a/src/components/previewers/Html.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-import Link from "@material-ui/core/Link";
-
-export default function Html(props) {
-	const {fileId, htmlSrc, ...other} = props;
-	return <iframe id={fileId} src={htmlSrc} width="1000" height="1000"/>
-}
diff --git a/src/components/previewers/Html.tsx b/src/components/previewers/Html.tsx
new file mode 100644
index 0000000..15c641d
--- /dev/null
+++ b/src/components/previewers/Html.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+type Props = {
+	fileId: string,
+	htmlSrc: string,
+}
+export default function Html(props: Props) {
+	const {fileId, htmlSrc} = props;
+	return <iframe id={fileId} src={htmlSrc} width="1000" height="1000"/>
+}
diff --git a/src/components/previewers/Thumbnail.jsx b/src/components/previewers/Thumbnail.tsx
similarity index 80%
rename from src/components/previewers/Thumbnail.jsx
rename to src/components/previewers/Thumbnail.tsx
index 6a4b6cd..e4cf904 100644
--- a/src/components/previewers/Thumbnail.jsx
+++ b/src/components/previewers/Thumbnail.tsx
@@ -1,8 +1,14 @@
 import React from "react";
 import { Typography } from "@material-ui/core";
 
-export default function Thumbnail(props){
-	const {fileId, imgSrc, fileType, ...other} = props;
+type Props = {
+	fileId: string,
+	imgSrc:string,
+	fileType: string
+}
+
+export default function Thumbnail(props:Props){
+	const {fileId, imgSrc, fileType} = props;
 	return (
 		(() => {
 			if (fileType === "image/jpeg" || fileType === "image/jpg" || fileType === "image/png"
diff --git a/src/components/previewers/Video.jsx b/src/components/previewers/Video.tsx
similarity index 51%
rename from src/components/previewers/Video.jsx
rename to src/components/previewers/Video.tsx
index d338ca5..ac0a5e3 100644
--- a/src/components/previewers/Video.jsx
+++ b/src/components/previewers/Video.tsx
@@ -1,7 +1,12 @@
 import React from "react";
 
-export default function Video(props) {
-	const {fileId, videoSrc, ...other} = props;
+type Props = {
+	fileId: string,
+	videoSrc: string
+}
+
+export default function Video(props: Props) {
+	const {fileId, videoSrc} = props;
 	return (<video width='100%' id='ourvideo' controls>
 		<source id={fileId} src={videoSrc}></source>
 	</video>);
diff --git a/src/components/styledComponents/ClowderButton.jsx b/src/components/styledComponents/ClowderButton.jsx
deleted file mode 100644
index a0ecbcc..0000000
--- a/src/components/styledComponents/ClowderButton.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import {styled} from "@material-ui/core/styles";
-import {Button} from "@material-ui/core";
-
-export const ClowderButton = styled(Button)({
-	height: "41px",
-	width: "100%",
-	fontSize: "16px",
-	backgroundColor: "#FFFFFF",
-	// "&:hover": {
-	// 	backgroundColor: "#2C4170"
-	// },
-	color: "#007BFF",
-	border: "1px solid #007BFF",
-	borderRadius: "4px",
-	textTransform: "capitalize"
-});
-
-
diff --git a/src/components/styledComponents/ClowderButton.tsx b/src/components/styledComponents/ClowderButton.tsx
new file mode 100644
index 0000000..dd2be21
--- /dev/null
+++ b/src/components/styledComponents/ClowderButton.tsx
@@ -0,0 +1,14 @@
+import {styled} from "@mui/styles";
+import {Button} from "@mui/material";
+
+export const ClowderButton = styled(Button)({
+	height: "41px",
+	width: "100%",
+	fontSize: "16px",
+	border:"1px solid",
+	borderRadius: "4px",
+	textTransform: "capitalize",
+	backgroundColor: "#ffffff",
+});
+
+
diff --git a/src/components/styledComponents/ClowderInput.jsx b/src/components/styledComponents/ClowderInput.jsx
deleted file mode 100644
index 2488a96..0000000
--- a/src/components/styledComponents/ClowderInput.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import {styled} from "@material-ui/core/styles";
-import {TextField} from "@material-ui/core";
-
-export const ClowderInput = styled(TextField)({
-	width: "100%",
-	"& .MuiInputBase-root": {
-		height: "41px",
-		width: "100%",
-		fontSize: "16px",
-		backgroundColor: "#FFFFFF",
-		padding: "6px 12px",
-		border: "1px solid #CED4DA",
-		borderRadius: "4px",
-		color: "#6C757D",
-	},
-});
diff --git a/src/components/styledComponents/ClowderInput.tsx b/src/components/styledComponents/ClowderInput.tsx
new file mode 100644
index 0000000..8e65f3a
--- /dev/null
+++ b/src/components/styledComponents/ClowderInput.tsx
@@ -0,0 +1,15 @@
+import {styled} from "@mui/styles";
+import {TextField} from "@mui/material";
+
+export const ClowderInput = styled(TextField)({
+	width: "100%",
+	"& .MuiInputBase-root":{
+		// height: "41px",
+		width: "100%",
+		fontSize: "14px",
+		backgroundColor: "#FFFFFF",
+		// padding:"6px 12px",
+		border:"1px solid #CED4DA",
+		borderRadius: "4px",
+	},
+});
diff --git a/src/components/styledComponents/ClowderMetadataFormHelperText.tsx b/src/components/styledComponents/ClowderMetadataFormHelperText.tsx
new file mode 100644
index 0000000..6380918
--- /dev/null
+++ b/src/components/styledComponents/ClowderMetadataFormHelperText.tsx
@@ -0,0 +1,9 @@
+import {styled} from "@mui/styles";
+import {FormHelperText} from "@mui/material";
+import {theme} from "../../theme";
+
+
+export const ClowderMetadataFormHelperText = styled(FormHelperText)({
+	"color": theme.palette.primary.main,
+	"background": "#ffffff"
+});
diff --git a/src/components/styledComponents/ClowderMetadataSelect.tsx b/src/components/styledComponents/ClowderMetadataSelect.tsx
new file mode 100644
index 0000000..e85f3f1
--- /dev/null
+++ b/src/components/styledComponents/ClowderMetadataSelect.tsx
@@ -0,0 +1,17 @@
+import {styled} from "@mui/styles";
+import {Select} from "@mui/material";
+import {theme} from "../../theme";
+
+
+export const ClowderMetadataSelect = styled(Select)({
+	background: "#ffffff",
+	"& .Mui-disabled": {
+		"color": theme.palette.secondary.dark,
+		"-webkit-text-fill-color": theme.palette.secondary.dark,
+		"background": theme.palette.background.default
+	},
+	"& .MuiFormHelperText-root":{
+		"color": theme.palette.primary.main,
+		"background": "#ffffff"
+	}
+});
diff --git a/src/components/styledComponents/ClowderMetadataTextField.tsx b/src/components/styledComponents/ClowderMetadataTextField.tsx
new file mode 100644
index 0000000..17a3b9e
--- /dev/null
+++ b/src/components/styledComponents/ClowderMetadataTextField.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import {styled} from "@mui/styles";
+import {TextField} from "@mui/material";
+import {theme} from "../../theme";
+
+
+export const ClowderMetadataTextField = styled(TextField)({
+	background: "#ffffff",
+	"& .Mui-disabled": {
+		"color": theme.palette.secondary.dark,
+		"-webkit-text-fill-color": theme.palette.secondary.dark,
+		"background": theme.palette.background.default
+	},
+	"& .MuiFormHelperText-root":{
+		"color": theme.palette.primary.main,
+		"background": "#ffffff"
+	}
+});
diff --git a/src/components/styledComponents/IncoreInputLabel.jsx b/src/components/styledComponents/IncoreInputLabel.tsx
similarity index 100%
rename from src/components/styledComponents/IncoreInputLabel.jsx
rename to src/components/styledComponents/IncoreInputLabel.tsx
diff --git a/src/components/styledComponents/IncoreSelect.jsx b/src/components/styledComponents/IncoreSelect.tsx
similarity index 100%
rename from src/components/styledComponents/IncoreSelect.jsx
rename to src/components/styledComponents/IncoreSelect.tsx
diff --git a/src/loader.js b/src/loader.ts
similarity index 80%
rename from src/loader.js
rename to src/loader.ts
index e01321f..44e673a 100644
--- a/src/loader.js
+++ b/src/loader.ts
@@ -1 +1,3 @@
 window.$ = window.jQuery = require('jquery')
+
+export {}
diff --git a/src/reducers/dataset.js b/src/reducers/dataset.ts
similarity index 87%
rename from src/reducers/dataset.js
rename to src/reducers/dataset.ts
index bddd2c4..29613bf 100644
--- a/src/reducers/dataset.js
+++ b/src/reducers/dataset.ts
@@ -1,7 +1,8 @@
 import {RECEIVE_FILES_IN_DATASET, RECEIVE_DATASET_ABOUT, RECEIVE_DATASETS, DELETE_DATASET} from "../actions/dataset";
 import {DELETE_FILE} from "../actions/file";
+import {Dataset} from "../types/data";
 
-const defaultState = {files: [], about: {}, datasets: [], status: ""};
+const defaultState = {files: [], about: {}, datasets: <Dataset[]>[], status: ""};
 
 const dataset = (state=defaultState, action) => {
 	switch(action.type) {
@@ -11,7 +12,7 @@ const dataset = (state=defaultState, action) => {
 			return Object.assign({}, state, {
 				files: state.files.filter(file => file.id !== action.file.id),
 				status: action.file.status
-			})	
+			})
 		case RECEIVE_DATASET_ABOUT:
 			return Object.assign({}, state, {about: action.about});
 		case RECEIVE_DATASETS:
diff --git a/src/reducers/file.js b/src/reducers/file.ts
similarity index 100%
rename from src/reducers/file.js
rename to src/reducers/file.ts
diff --git a/src/reducers/index.js b/src/reducers/index.ts
similarity index 100%
rename from src/reducers/index.js
rename to src/reducers/index.ts
diff --git a/src/routes.tsx b/src/routes.tsx
index e0f4a78..7db0954 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -2,8 +2,8 @@ import React from "react";
 import {BrowserRouter, Route, Routes} from "react-router-dom";
 
 import Dashboard from "./components/Dashbard";
-import DatasetComponent from "./components/Dataset";
-import FileComponent from "./components/File";
+import DatasetComponent from "./components/datasets/Dataset";
+import FileComponent from "./components/files/File";
 
 export const AppRoutes = (): JSX.Element => {
 	return (
diff --git a/src/types/action.ts b/src/types/action.ts
new file mode 100644
index 0000000..94d4289
--- /dev/null
+++ b/src/types/action.ts
@@ -0,0 +1,224 @@
+interface RECEIVE_FILES_IN_DATASET {
+	type: "RECEIVE_FILES_IN_DATASET";
+	files: FileSummary[];
+}
+
+interface DELETE_FILE {
+	type: "DELETE_FILE";
+	file: FileSummary;
+}
+
+interface RECEIVE_DATASET_ABOUT{
+	type: "RECEIVE_DATASET_ABOUT";
+	about: Dataset;
+}
+
+interface RECEIVE_DATASETS{
+	type: "RECEIVE_DATASETS";
+	datasets: Dataset[];
+}
+
+interface DELETE_DATASET{
+	type: "DELETE_DATASET";
+	dataset: Dataset;
+}
+
+interface RECEIVE_FILE_EXTRACTED_METADATA{
+	type: "RECEIVE_FILE_EXTRACTED_METADATA";
+	extractedMetadata: ExtractedMetadata;
+}
+
+interface RECEIVE_FILE_METADATA_JSONLD{
+	type:"RECEIVE_FILE_METADATA_JSONLD";
+	metadataJsonld: MetadataJsonld[];
+}
+
+interface RECEIVE_PREVIEWS{
+	type:"RECEIVE_PREVIEWS";
+	previews: FilePreview[];
+}
+
+interface RECEIVE_VERSIONS{
+	type: "RECEIVE_VERSIONS";
+	fileVersions: FileVersion[];
+}
+
+interface SET_USER{
+	type: "SET_USER",
+	Authorization: string,
+}
+
+interface LOGIN_ERROR{
+	errorMsg: string,
+	type: "LOGIN_ERROR",
+}
+
+interface LOGOUT{
+	type: "LOGOUT",
+	loggedOut: boolean,
+}
+
+interface RESET_LOGOUT{
+	type: "RESET_LOGOUT",
+	loggedOut: boolean
+}
+
+interface REGISTER_ERROR{
+	errorMsg: string,
+	type: "REGISTER_ERROR"
+}
+
+interface REGISTER_USER{
+	type: "REGISTER_USER"
+}
+
+interface CREATE_DATASET{
+	type: "CREATE_DATASET",
+	dataset: Dataset
+}
+interface RESET_CREATE_DATASET{
+	type: "RESET_CREATE_DATASET",
+	newDataset: Dataset
+}
+
+interface CREATE_FILE{
+	type: "CREATE_FILE",
+	newFile: File
+}
+
+interface RESET_CREATE_FILE{
+	type: "RESET_CREATE_FILE",
+	newFile: File
+	file: FileSummary
+}
+
+interface FAILED{
+	stack: "string";
+	type: "FAILED",
+	reason: string
+}
+
+interface RESET_FAILED{
+	type: "RESET_FAILED",
+	reason: string
+}
+
+interface FOLDER_ADDED{
+	type: "FOLDER_ADDED",
+	folder: Folder
+}
+
+interface RECEIVE_FILE_SUMMARY{
+	type: "RECEIVE_FILE_SUMMARY",
+	fileSummary: FileSummary
+}
+
+interface RECEIVE_DATASET_METADATA{
+	type: "RECEIVE_DATASET_METADATA",
+	metadataList: Metadata[]
+}
+
+interface RECEIVE_FILE_METADATA{
+	type:"RECEIVE_FILE_METADATA";
+	metadataList: Metadata[];
+}
+
+interface RECEIVE_FOLDERS_IN_DATASET{
+	type: "RECEIVE_FOLDERS_IN_DATASET",
+	folders: Folder[]
+}
+
+interface UPDATE_DATASET_METADATA{
+	type:"UPDATE_DATASET_METADATA",
+	metadata: Metadata
+}
+
+interface UPDATE_FILE_METADATA{
+	type:"UPDATE_FILE_METADATA",
+	metadata: Metadata
+}
+
+interface POST_DATASET_METADATA{
+	type:"POST_DATASET_METADATA",
+	metadata: Metadata
+}
+
+interface POST_FILE_METADATA{
+	type:"POST_FILE_METADATA",
+	metadata: Metadata
+}
+
+interface RECEIVE_METADATA_DEFINITIONS{
+	type:"RECEIVE_METADATA_DEFINITIONS",
+	metadataDefinitionList: MetadataDefinition[]
+}
+
+interface SAVE_METADATA_DEFINITIONS{
+	type:"SAVE_METADATA_DEFINITIONS",
+	metadataDefinitionList: MetadataDefinition[]
+}
+
+interface DOWNLOAD_FILE{
+	type:"DOWNLOAD_FILE"
+}
+
+interface DELETE_DATASET_METADATA{
+	type: "DELETE_DATASET_METADATA"
+	metadata: Metadata
+}
+
+interface DELETE_FILE_METADATA{
+	type: "DELETE_FILE_METADATA"
+	metadata: Metadata
+}
+
+interface FOLDER_DELETED{
+	type: "FOLDER_DELETED"
+	folder: Folder
+}
+
+interface GET_FOLDER_PATH{
+	type: "GET_FOLDER_PATH"
+	folderPath: String[]
+}
+
+export type DataAction =
+	| RECEIVE_FILES_IN_DATASET
+	| RECEIVE_FOLDERS_IN_DATASET
+	| DELETE_FILE
+	| RECEIVE_DATASET_ABOUT
+	| RECEIVE_DATASETS
+	| DELETE_DATASET
+	| RECEIVE_FILE_SUMMARY
+	| RECEIVE_FILE_EXTRACTED_METADATA
+	| RECEIVE_FILE_METADATA_JSONLD
+	| RECEIVE_PREVIEWS
+	| RECEIVE_VERSIONS
+	| SET_USER
+	| LOGIN_ERROR
+	| LOGOUT
+	| REGISTER_ERROR
+	| REGISTER_USER
+	| CREATE_DATASET
+	| RESET_CREATE_DATASET
+	| CREATE_FILE
+	| RESET_CREATE_FILE
+	| FAILED
+	| RESET_FAILED
+	| RESET_LOGOUT
+	| FOLDER_ADDED
+	| UPDATE_DATASET_METADATA
+	| UPDATE_FILE_METADATA
+	| POST_DATASET_METADATA
+	| POST_FILE_METADATA
+	| RECEIVE_METADATA_DEFINITIONS
+	| SAVE_METADATA_DEFINITIONS
+	| RECEIVE_DATASET_METADATA
+    | SAVE_METADATA_DEFINITIONS
+	| RECEIVE_FILE_METADATA
+	| DELETE_DATASET_METADATA
+	| DELETE_FILE_METADATA
+	| DOWNLOAD_FILE
+	| FOLDER_DELETED
+	| GET_FOLDER_PATH
+	;
diff --git a/src/types/data.ts b/src/types/data.ts
new file mode 100644
index 0000000..cbef29a
--- /dev/null
+++ b/src/types/data.ts
@@ -0,0 +1,132 @@
+import {Dataset as DatasetModel} from "../openapi/v1";
+
+interface DatasetId {
+	id: string;
+}
+
+export type Dataset = DatasetId | DatasetModel;
+
+export interface FileMetadata {
+	id: string;
+	"content-type": string;
+	size:number;
+	created: string | Date;
+	name: string;
+	status: string;
+	filedescription: string;
+	thumbnail:string;
+	downloads:number;
+	views:number;
+	version: string;
+}
+
+export interface FileMetadataList{
+	id: string;
+	metadata: FileMetadata;
+}
+
+export interface Preview{
+	"p_id": string;
+	"pv_route": string;
+	"pv_id": string;
+	"p_path": string;
+	"pv_contenttype": string;
+}
+
+export interface FilePreview{
+	"file_id": string;
+	previews: Preview[];
+}
+
+export interface PreviewConfiguration{
+	previewType: string;
+	url:string;
+	fileid:string;
+	previewer:string;
+	fileType:string;
+	resource:string | null;
+}
+
+export interface Path{
+	name: string;
+	id: string;
+	type:string
+}
+
+export interface ExtractedMetadata{
+	filename:string;
+}
+
+export interface MetadataJsonld{
+	"id":string;
+	"@context": (Context|string)[];
+	agent:Agent;
+	"attached_to": AttatchTo;
+	content: any;
+	"created_at": string | Date;
+}
+
+interface Context{
+	database:string;
+	scan:string;
+}
+
+interface Agent{
+	"@type": string;
+	"extractor_id": string;
+	name: string
+}
+
+interface AttatchTo{
+	"resource_type": string;
+	url: string;
+}
+
+export interface Thumbnail{
+	id: string;
+	thumbnail: string;
+}
+
+export interface DatasetState{
+	files: FileSummary[];
+	datasets: Dataset[];
+	about: {};
+	status: string;
+}
+export interface MetadataState{
+	metadataDefinitionList: MetadataDefinitionOut[],
+	datasetMetadataList: Metadata[],
+	fileMetadataList: Metadata[],
+}
+export interface FileState{
+	fileSummary: FileSummary;
+	extractedMetadata: ExtractedMetadata;
+	metadataJsonld: MetadataJsonld[];
+	previews: FilePreview[];
+	fileVersions: FileVersion[];
+}
+
+export interface UserState{
+	Authorization: string | null;
+	loginError: boolean;
+	registerSucceeded: boolean;
+	errorMsg: string;
+}
+
+export interface ErrorState{
+	stack: string;
+	reason: string;
+	loggedOut: boolean;
+}
+
+export interface FolderState{
+	folders: FolderOut[];
+	folderPath: String[];
+}
+
+export interface RootState {
+	metadata: MetadataState;
+	file:FileState;
+	dataset:DatasetState;
+}
+
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
new file mode 100644
index 0000000..1c981e6
--- /dev/null
+++ b/src/types/global.d.ts
@@ -0,0 +1,51 @@
+declare const ENV: "development" | "production" | "test";
+declare const PUBLIC_PATH: string;
+
+declare module "*.json" {
+	const src: string;
+	export default src;
+}
+
+declare module "*.bmp" {
+	const src: string;
+	export default src;
+}
+
+declare module "*.gif" {
+	const src: string;
+	export default src;
+}
+
+declare module "*.jpg" {
+	const src: string;
+	export default src;
+}
+
+declare module "*.jpeg" {
+	const src: string;
+	export default src;
+}
+
+declare module "*.png" {
+	const src: string;
+	export default src;
+}
+
+declare module "*.webp" {
+	const src: string;
+	export default src;
+}
+
+declare module "*.svg" {
+	import * as React from "react";
+
+	export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+
+	const src: string;
+	export default src;
+}
+
+declare module "*.css" {
+	const classes: { readonly [key: string]: string };
+	export default classes;
+}